@charset "UTF-8";
/* =========================================
   Variables & Reset
   ========================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

body {
  font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* PC에서는 화면에 딱 맞게 고정 */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  /* 모바일/태블릿에서는 스크롤 허용 */ }
  @media (max-width: 1024px) {
    body {
      height: auto;
      min-height: 100dvh;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch; } }

/* =========================================
   Main Layout
   ========================================= */
.main-container {
  display: flex;
  width: 100%;
  height: 100%; }
  @media (max-width: 1024px) {
    .main-container {
      flex-direction: column;
      height: auto; } }

/* =========================================
   Left Section (Visual)
   너비(vw) 기반 반응형
   ========================================= */
.left-section {
  flex: 1.2;
  background: linear-gradient(135deg, #1A4239 0%, #234f3e 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* 너비에 따라 패딩 조절 */
  padding: clamp(30px, 5vw, 60px);
  /* 노이즈 텍스처 */
  /* 빛 효과 */ }
  .left-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.03;
    mix-blend-mode: overlay; }
  .left-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 30%, rgba(197, 160, 101, 0.2) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(212, 175, 122, 0.15) 0%, transparent 50%);
    pointer-events: none; }
  @media (max-width: 1024px) {
    .left-section {
      flex: none;
      min-height: 35vh;
      /* 모바일에서 화면 상단 35% 차지 */
      padding: 40px 20px; } }
  @media (max-width: 480px) {
    .left-section {
      display: none;
      /* 아주 작은 모바일에선 숨김 처리 */ } }

.image-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15); }

.left-content {
  position: relative;
  z-index: 1;
  color: white;
  width: 100%;
  max-width: 600px; }

.quote-section {
  text-align: left;
  animation: fadeInLeft 1s ease-out 0.3s both; }
  @media (max-width: 768px) {
    .quote-section {
      text-align: center; } }

.quote-mark {
  font-family: 'Nanum Myeongjo', serif;
  font-weight: 800;
  line-height: 0.8;
  opacity: 0.2;
  color: rgba(197, 160, 101, 0.4);
  /* 너비 비례 폰트 사이즈 */
  font-size: clamp(60px, 8vw, 120px);
  margin-bottom: clamp(15px, 3vh, 30px); }

.quote-text {
  font-family: 'Pretendard Variable', 'Pretendard', sans-serif;
  font-weight: 700;
  line-height: 1.5;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
  letter-spacing: -0.5px;
  color: rgba(255, 255, 255, 0.98);
  /* 너비 비례 폰트 사이즈 */
  font-size: clamp(22px, 2.5vw, 38px);
  margin-bottom: clamp(20px, 4vh, 32px); }

.quote-author {
  font-weight: 500;
  opacity: 0.85;
  font-style: italic;
  color: rgba(197, 160, 101, 0.9);
  letter-spacing: 0.3px;
  font-size: clamp(14px, 1.2vw, 17px); }

/* =========================================
   Right Section (Login Form)
   높이(vh) 기반 유동형 반응형
   ========================================= */
.right-section {
  flex: 1;
  background: #F5F1E8;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 세로 중앙 정렬 */
  align-items: center;
  /* 가로 중앙 정렬 */
  /* [핵심] 화면 높이만큼만 사용하고 기본적으로 스크롤 방지 */
  height: 100dvh;
  overflow: hidden;
  /* 높이에 비례한 패딩 (작은 화면에선 패딩 축소) */
  padding: clamp(20px, 5vh, 60px);
  /* 노이즈 텍스처 */
  /* 화면 세로가 극단적으로 작을 때(600px 이하)는 스크롤 허용 */
  /* 모바일/태블릿 (가로폭 기준) 대응 */ }
  .right-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.02;
    mix-blend-mode: multiply;
    pointer-events: none; }
  @media (max-height: 600px) {
    .right-section {
      overflow-y: auto;
      display: block;
      /* Flex 해제하여 자연스러운 스크롤 유도 */
      padding-top: 40px;
      text-align: center; } }
  @media (max-width: 1024px) {
    .right-section {
      height: auto;
      /* 고정 높이 해제 */
      min-height: 65vh;
      overflow-y: visible;
      padding: 60px 24px;
      display: flex;
      justify-content: flex-start; } }

.login-container {
  width: 100%;
  max-width: 440px;
  position: relative;
  z-index: 1;
  margin: auto;
  /* Flex container 내부 자동 중앙 정렬 */
  /* 컨테이너 내부도 Flex로 잡아서 간격 제어 */
  display: flex;
  flex-direction: column; }

/* --- 브랜드 영역 --- */
.brand-section {
  text-align: left;
  /* 화면 높이에 따른 유동적 마진 */
  margin-bottom: clamp(20px, 5vh, 60px);
  animation: fadeInDown 0.8s ease-out; }

.logo-wrapper {
  margin-bottom: clamp(10px, 2vh, 24px);
  animation: fadeIn 0.6s ease-out; }

.main-logo {
  /* 화면 높이에 따라 로고 크기 조절 */
  height: clamp(50px, 10vh, 100px);
  width: auto;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.08)); }

.brand-title {
  font-family: 'Pretendard Variable', serif;
  font-weight: 800;
  color: #1B2430;
  margin-bottom: clamp(4px, 1vh, 8px);
  line-height: 1.3;
  letter-spacing: -0.5px;
  /* 화면 높이에 비례한 폰트 크기 */
  font-size: clamp(24px, 4vh, 36px); }

.brand-subtitle {
  color: #8B8577;
  font-weight: 500;
  letter-spacing: 0.5px;
  font-size: clamp(13px, 1.5vh, 16px); }

/* --- 로그인 폼 영역 --- */
.login-form-section {
  width: 100%;
  animation: fadeInUp 1s ease-out 0.2s both; }

.form-title {
  font-family: 'Pretendard Variable', serif;
  font-weight: 700;
  color: #1B2430;
  margin-bottom: clamp(4px, 1vh, 8px);
  font-size: clamp(20px, 3.5vh, 30px);
  letter-spacing: -0.3px; }

.form-description {
  color: #8B8577;
  font-weight: 400;
  font-size: clamp(13px, 1.5vh, 15px);
  margin-bottom: clamp(16px, 4vh, 40px); }

.form-inputs {
  display: flex;
  flex-direction: column;
  /* 입력창 사이 간격 유동 조절 */
  gap: clamp(12px, 2vh, 24px);
  margin-bottom: clamp(20px, 4vh, 32px);
  animation: fadeInUp 1.2s ease-out 0.4s both; }

.input-group {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.8vh, 8px); }

.input-label {
  font-size: clamp(12px, 1.4vh, 14px);
  font-weight: 600;
  color: #2C2C2C;
  letter-spacing: -0.2px; }

.form-input {
  width: 100%;
  /* 입력창 패딩을 높이에 맞춰 조절 (납작해짐) */
  padding: clamp(10px, 1.8vh, 16px) 16px;
  font-size: clamp(14px, 1.6vh, 15px);
  border: 1.5px solid #E8E5DC;
  border-radius: 6px;
  outline: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(255, 255, 255, 0.9);
  color: #2C2C2C; }
  .form-input::placeholder {
    color: #8B8577;
    font-weight: 400; }
  .form-input:focus {
    border-color: #C5A065;
    background: white;
    box-shadow: 0 0 0 3px rgba(197, 160, 101, 0.12);
    transform: translateY(-1px); }

/* --- 버튼 --- */
.login-submit {
  width: 100%;
  /* 버튼 높이도 vh 비례 */
  padding: clamp(12px, 2vh, 18px) 24px;
  background: linear-gradient(135deg, #C5A065 0%, #D4AF7A 100%);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: clamp(14px, 1.6vh, 16px);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 0;
  /* 중앙 정렬이므로 하단 여백 제거 */
  box-shadow: 0 2px 8px rgba(197, 160, 101, 0.25);
  position: relative;
  overflow: hidden;
  animation: fadeInUp 1.4s ease-out 0.6s both;
  /* 호버 이펙트 */ }
  .login-submit::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease; }
  .login-submit:hover {
    background: linear-gradient(135deg, #be9552 0%, #cea367 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(197, 160, 101, 0.35); }
    .login-submit:hover::before {
      left: 100%; }
    .login-submit:hover svg {
      transform: translateX(4px); }
  .login-submit:active {
    transform: translateY(0); }
  .login-submit svg {
    transition: transform 0.3s; }

/* =========================================
   Animations
   ========================================= */
@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px); }
  to {
    opacity: 1;
    transform: translateX(0); } }

/*# sourceMappingURL=main.css.map */