/* ============================================================
   corktv — 인증 계열 페이지(로그인/성인인증/회원가입) 라이트 테마 공통 CSS
   출처: .orchestrator/sessions/current/design-system.md (2장, 4.1~4.6)
         .orchestrator/sessions/current/components/index.html (섹션 10~12)
   규칙: CSS 변수 우선 · 하드코딩 금지 · 가로 스크롤 금지(100vw 사용 금지)
   주의: 기존 style.css는 수정하지 않음. 인증 페이지에서 이 파일을 추가 로드.
   ============================================================ */

/* ============================================================
   CSS 변수 (design-system.md 2장 원본 그대로)
   ============================================================ */
:root {
  /* ===== 다크 테마 (서비스 본체) ===== */
  --color-bg: #140707;            /* 페이지 배경 (짙은 와인빛 블랙) */
  --color-surface: #282828;       /* 헤더/카드 표면 */
  --color-surface-2: #3a3a3a;     /* 메가메뉴/모달 표면 */
  --color-primary: #da5b5b;       /* 포인트 (호버, 선택 상태) */
  --color-accent: #ed1557;        /* CTA, 강조 */
  --color-text: #ffffff;          /* 주 텍스트 */
  --color-text-muted: #9e9e9e;    /* 보조 텍스트 */
  --color-text-dim: #c5c5c5;      /* 부가 텍스트 */

  /* ===== 라이트 테마 (인증 계열 페이지) ===== */
  --auth-bg: #ffffff;             /* 인증 페이지 배경 */
  --auth-title: #666666;          /* 페이지 타이틀 바 텍스트 */
  --auth-text: #555555;           /* 본문/안내 텍스트 */
  --auth-border: #ced4da;         /* 입력 필드 보더 */
  --auth-input-text: #495057;     /* 입력 텍스트 */
  --auth-cta: #ed1557;            /* 인증/로그인 CTA (다크 테마 accent 공유) */
  --auth-title-bar-bg: #f4f4f4;   /* 타이틀 바 배경 */

  /* ===== 타이포그래피 ===== */
  --font-family: 'Noto Sans KR', 'Malgun Gothic', '맑은 고딕', sans-serif;
  --fs-caption: 14px;             /* 캡션/안내 문구 */
  --fs-body: 16px;                /* 인증 페이지 본문 */
  --fs-body-dark: 18px;           /* 다크 본체 본문/메뉴 */
  --fs-title-sm: 20px;            /* 페이지 타이틀 바, 선택 메뉴 */
  --fs-title: 24px;               /* 섹션 제목 */
  --fs-title-lg: 27px;            /* 메가메뉴 타이틀 */
  --fs-hero: 40px;                /* 히어로/인트로 대제목 */

  /* ===== 라운딩/그림자 ===== */
  --radius-xs: 3px;               /* 인증 페이지 버튼 (bflix 규격) */
  --radius-sm: 5px;               /* 다크 본체 소형 요소 */
  --radius-input: 4px;            /* 인증 페이지 입력 필드 */
  --radius-md: 9px;               /* 카드/모달 */
  --shadow-menu: 6px 2px 21px 2px rgba(0,0,0,.49);
  --shadow-card: 0 2px 12px rgba(0,0,0,.35);

  /* ===== 레이아웃 ===== */
  --header-height: 74px;          /* 고정 상단 배너 */
  --auth-column-width: 360px;     /* 인증 페이지 중앙 컬럼 (bflix 규격) */
}

/* ============================================================
   인증 계열 페이지(로그인/성인인증/가입) 라이트 테마 베이스
   ============================================================ */
body.auth-page { background: var(--auth-bg); color: var(--auth-text); font-family: var(--font-family); margin: 0; }
body.auth-page, html { overflow-x: hidden; max-width: 100%; } /* 가로 스크롤 금지 규칙 */

/* 고정 헤더(#banner, 74px)에 타이틀 바가 가려지지 않도록 헤더 높이만큼 본문을 내림 */
body.auth-page { padding-top: var(--header-height); }
/* 라이트 배경에서는 투명 그라디언트 헤더가 묻히므로 어두운 표면색으로 고정 */
body.auth-page #banner { background: var(--color-surface); }

/* ============================================================
   레거시 style.css id 셀렉터 중화 (인증 페이지 한정)
   style.css의 #login_redbutton(vw 폭), #find-password(absolute)가
   .auth-btn/.auth-link-row보다 우선순위가 높아 레이아웃을 깨는 문제 수정
   ============================================================ */
body.auth-page #login_redbutton {
  position: static; margin-top: 0;
  width: 100%; height: 40px; line-height: normal;
  background: var(--auth-cta);
  font-size: var(--fs-body); font-weight: 400;
}
body.auth-page #find-password {
  position: static; top: auto; margin-left: 0;
  line-height: normal; font-size: var(--fs-caption);
  color: var(--auth-text);
}
/* 회원가입 페이지 레거시 id 중화 (인증번호 버튼 / 로그인 이동 버튼) */
body.auth-page #emailbtn {
  position: static; float: none; margin: 0;
  width: 100%; height: 40px; line-height: normal;
  background: var(--auth-cta); font-size: var(--fs-caption); font-weight: 400;
}
body.auth-page #join_bluebutton {
  position: static; margin: 0;
  width: 100%; height: 40px; line-height: normal;
  background: #555; font-size: var(--fs-body); font-weight: 400;
}

/* 폼 라벨 (회원가입 등 다항목 폼) */
.auth-label {
  font-size: var(--fs-caption); font-weight: 500;
  color: var(--auth-text); margin-top: 8px;
}

/* ============================================================
   페이지 타이틀 바 (design-system.md 4.1)
   ============================================================ */
.auth-title-bar {
  width: 100%; padding: 22px 0; text-align: center;
  background: var(--auth-title-bar-bg);
  color: var(--auth-title); font-size: var(--fs-title-sm); font-weight: 500;
}

/* ============================================================
   중앙 360px 컬럼 컨테이너 (design-system.md 4.2)
   ============================================================ */
.auth-container {
  width: var(--auth-column-width); max-width: 360px; margin: 48px auto;
  display: flex; flex-direction: column; gap: 8px;
}
@media (max-width: 420px) { .auth-container { width: calc(100% - 32px); } }

/* 안내 문구 */
.auth-desc { color: var(--auth-text); font-size: var(--fs-caption); line-height: 1.5; margin: 0 0 12px; }

/* ============================================================
   풀와이드 버튼 스택 (design-system.md 4.3, bflix 규격)
   ============================================================ */
.auth-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 40px; border-radius: var(--radius-xs);
  font-size: var(--fs-body); font-weight: 400; color: #fff;
  cursor: pointer; text-decoration: none; border: 0; font-family: var(--font-family);
  transition: filter .15s linear;
}
.auth-btn:hover { filter: brightness(1.08); }
.auth-btn--cta  { background: var(--auth-cta); }      /* 로그인 CTA */
.auth-btn--cert { background: var(--auth-cta); }      /* 드림시큐리티 본인인증 호출 */
.auth-btn--sub  { background: #555; }                 /* 보조 (회원가입 등) */
.auth-btn:disabled { opacity: .45; cursor: not-allowed; filter: none; }

/* ============================================================
   입력 필드 (design-system.md 4.4)
   ============================================================ */
.auth-input {
  width: 100%; height: 38px; box-sizing: border-box;
  padding: 6px 12px; border: 1px solid var(--auth-border);
  border-radius: var(--radius-input);
  color: var(--auth-input-text); font-size: var(--fs-body);
  font-family: var(--font-family); background: #fff; outline: none;
}
.auth-input:focus { border-color: var(--auth-cta); }
textarea.auth-input { height: auto; min-height: 90px; resize: vertical; padding-top: 10px; }
select.auth-input { appearance: auto; }
.auth-input--error { border-color: var(--auth-cta); }

/* ============================================================
   자동 로그인 체크박스 (design-system.md 4.5)
   ============================================================ */
.auth-check { display: flex; align-items: center; gap: 6px; color: var(--auth-text); font-size: var(--fs-caption); cursor: pointer; }

/* ============================================================
   구분선
   ============================================================ */
.auth-divider { display: flex; align-items: center; gap: 12px; color: #aaa; font-size: 12px; margin: 8px 0; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--auth-border); }

/* ============================================================
   인증 상태 표시 (design-system.md 4.6, 드림시큐리티 결과)
   ============================================================ */
.auth-status          { font-size: var(--fs-caption); text-align: center; padding: 10px 0; margin: 0; }
.auth-status--pending { color: var(--auth-text); }      /* 인증 진행중 */
.auth-status--success { color: #1ec800; }               /* 인증 성공 */
.auth-status--fail    { color: var(--auth-cta); }       /* 인증 실패 */

/* ============================================================
   소셜 로그인 아이콘 행 (login.php 기존 .social-icon 마크업 재배치용)
   style.css의 absolute/vw 규칙을 라이트 컬럼 안에서 중화
   ============================================================ */
.auth-social-row { display: flex; justify-content: center; gap: 16px; margin: 4px 0; }
.auth-social-row .social-icon { position: static; width: 40px; height: 40px; cursor: pointer; }
.auth-social-row .social-icon img { width: 100%; height: 100%; }

/* ============================================================
   19금 표시 블록 — 레드플릭스(red.bflix.co.kr/login) 규격 동일 적용
   (인터넷진흥원 청소년 유해매체물 표시 가이드)
   배지: img_adult.png 240×240 (빨간 테두리 원 + 흰 배경 + 검정 19)
   원본 CSS: .adult_top / .text1 / .text2 / .btn_default.btn_line_p.btn_midium / hr.line_w
   ============================================================ */
.adult-top {
  width: 520px; max-width: 100%;
  margin: 0 auto 20px auto; padding-top: 40px;   /* bflix: contents_wrap 40px + adult_top 하단 20px */
  text-align: center;
}
.adult-top img { padding: 0 0 30px 0; }          /* 배지 원본 크기(240px) 그대로, 아래 30px */
.adult-top .text1 { color: #333; font-size: 27px; letter-spacing: -2.2px; margin: 0; }
.adult-top .text1 span { color: #f94254; }       /* "만 19세 이상만" 빨강 강조 */
.adult-top .text2 {
  display: inline-block; white-space: nowrap;
  font-size: 15px; line-height: 20px; color: #333; margin: 0;
}
.adult-top .btn-adult-exit {                     /* bflix btn_default + btn_line_p + btn_midium */
  display: inline-block; height: 44px; padding: 0 20px;
  font-size: 16px; font-weight: 400; font-family: var(--font-family);
  color: #f00060; border: 2px solid #f00060; border-radius: 22px;
  background: transparent; cursor: pointer; margin-top: 20px;
}
.adult-top .btn-adult-exit:hover { filter: brightness(1.08); }
.adult-top hr.adult-line { width: 100%; border: 0; border-bottom: 1px solid #d6d6d6; margin: 30px 0 0; }
/* 모바일: 가로 스크롤 금지 규칙 유지 — nowrap 고지 문구만 줄바꿈 허용 */
@media (max-width: 560px) {
  .adult-top { width: calc(100% - 32px); }
  .adult-top .text2 { white-space: normal; }
  .adult-top .text2 br { display: none; }
}

/* ============================================================
   에러 문구 / 링크 행
   ============================================================ */
.auth-error { color: var(--auth-cta); font-size: 12px; margin: -2px 0 4px; }
.auth-link-row { display: flex; justify-content: center; gap: 14px; font-size: var(--fs-caption); }
.auth-link-row a { color: var(--auth-text); text-decoration: none; }
.auth-link-row a:hover { color: var(--auth-cta); }

/* ============================================================
   MOK 본인인증 (성인인증) — 인증 방식 탭 / 2열 입력 행
   design-system.md 4.6 성인인증 게이트 확장 (2026-07-27, Step 13)
   ============================================================ */
.auth-tab-row { display: flex; gap: 8px; margin-bottom: 4px; }
.auth-tab {
  flex: 1; height: 40px; border-radius: var(--radius-xs);
  border: 1px solid var(--auth-border); background: #fff;
  color: var(--auth-text); font-size: var(--fs-caption); font-family: var(--font-family);
  cursor: pointer; transition: all .15s linear;
}
.auth-tab:hover { border-color: var(--auth-cta); color: var(--auth-cta); }
.auth-tab--on { border-color: var(--auth-cta); background: var(--auth-cta); color: #fff; font-weight: 500; }
.auth-row-2col { display: flex; gap: 8px; }
.auth-row-2col .auth-input { flex: 1; }
#mok-sms-fields { display: flex; flex-direction: column; gap: 8px; }
#mok-step1, #mok-step2-sms, #mok-step2-pass { display: flex; flex-direction: column; gap: 8px; }