/* ══════════════════════════════════════════════════════════════════
   NEONIX 문짝(door) 공용 스킨 — login / register / recovery / pending
   2026-08-19 신설.

   ⚠️ 반드시 neonix-shell.css **뒤에** 로드한다. shell 은 레이아웃(.wrapper /
      .gate-main / .gate-card / .header-nav)을 주고, 이 파일은 **색과 부품**만
      덮어쓴다. shell 자체는 건드리지 않는다 — settings 와 master 가 같이 쓴다.

   토큰은 templates/landing.html 의 :root 를 그대로 가져왔다(오너 판단 2026-08-19:
   "랜딩이 최근에 만든 거고 저게 마음에 든다"). 그래서 문짝은 제품 SSOT 인
   중립 검정(#09090b)이 아니라 **랜딩의 푸른 검정(#0a0e16)** 을 쓴다.
   ⚠️ 랜딩 토큰이 바뀌면 이 블록도 같이 바꿔야 한다 — 두 곳이 갈리면 문짝만 튄다.
   ══════════════════════════════════════════════════════════════════ */

:root {
    --dr-bg:       #08090a;
    --dr-surface:  #0f1012;
    --dr-surface2: #17181c;
    --dr-line:     rgba(255, 255, 255, 0.08);
    --dr-txt:      #f7f8f8;
    --dr-muted:    #8a8f98;
    --dr-faint:    #5c6068;
    --dr-brand:    #38bdf8;
    --dr-warn:     #fbbf24;
    --dr-danger:   #f87171;
    --dr-success:  #34d399;
}

/* ── 바탕 ────────────────────────────────────────────────────────
   shell 의 오로라/그리드 백드롭은 끄고, 랜딩 히어로와 같은 radial 하나만 쓴다.
   랜딩을 보다가 넘어왔을 때 "같은 집" 으로 읽히게 하는 게 이 한 겹의 목적. */
body.gate-body {
    background-color: var(--dr-bg);
    color: var(--dr-txt);
    background-image: none;
}
body.gate-body::before,
body.gate-body::after { display: none; }

.gate-main { position: relative; }
.gate-main::before {
    content: "";
    position: absolute;
    inset: -22% 0 auto 0;
    height: 62%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(60% 100% at 50% 0%,
        rgba(34, 211, 238, 0.13), transparent 70%);
}

/* ── 상단 바 ─────────────────────────────────────────────────── */
.header-nav { border-bottom: 1px solid var(--dr-line); }
.shell-title { color: var(--dr-txt); font-weight: 700; }
.nav-btn-v2 {
    border: 1px solid var(--dr-line) !important;
    background: transparent !important;
    color: var(--dr-muted) !important;
    border-radius: 0.7rem !important;
    transition: border-color 0.15s, color 0.15s;
}
a.nav-btn-v2:hover { border-color: var(--dr-brand) !important; color: var(--dr-brand) !important; }

/* ── 카드 ────────────────────────────────────────────────────── */
.gate-card {
    background: var(--dr-surface);
    border: 1px solid var(--dr-line);
    border-radius: 1.1rem;
    box-shadow: none;
}

/* ── 헤더(브랜드 + 제목) ──────────────────────────────────────
   예전엔 제목이 그라데이션 글자 + drop-shadow 글로우였다. 랜딩 h1 은 단색이라
   같이 놓으면 문짝만 옛날 톤으로 튀었다 — 단색 + 굵기로 간다. */
.door-head { text-align: center; margin-bottom: 1.9rem; }
.door-badge {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.3rem 0.75rem; margin-bottom: 0.9rem;
    border-radius: 9999px;
    background: rgba(34, 211, 238, 0.12);
    border: 1px solid rgba(34, 211, 238, 0.32);
    color: var(--dr-brand);
    font-size: 0.72rem; font-weight: 700; letter-spacing: -0.1px;
}
.door-badge .dot {
    width: 0.42rem; height: 0.42rem; border-radius: 9999px;
    background: var(--dr-brand); box-shadow: 0 0 8px var(--dr-brand);
}

/* 만료/잠김 상태 배지. 시안은 "정상"으로 읽혀서 상태 배지로 못 쓴다.
   빨강이 아니라 앰버인 이유 — 결제하면 그대로 풀리는 **회복 가능한** 상태다. */
.door-badge--warn {
    background: rgba(251, 191, 36, 0.12);
    border-color: rgba(251, 191, 36, 0.32);
    color: var(--dr-warn);
}
.door-badge--warn .dot {
    background: var(--dr-warn); box-shadow: 0 0 8px var(--dr-warn);
}
.door-title {
    margin: 0 0 0.4rem;
    font-size: clamp(1.45rem, 6vw, 1.72rem);
    font-weight: 900; letter-spacing: -0.6px; line-height: 1.25;
    color: var(--dr-txt);
    text-wrap: balance;
}
.door-sub {
    margin: 0;
    font-size: 0.88rem; font-weight: 500; line-height: 1.6;
    color: var(--dr-muted); word-break: keep-all;
}

/* ── 입력 ────────────────────────────────────────────────────── */
.door-field { margin-bottom: 0.95rem; text-align: left; }
.door-label {
    display: block; margin: 0 0 0.4rem 0.15rem;
    font-size: 0.8rem; font-weight: 700; letter-spacing: -0.1px;
    color: var(--dr-muted);
}
.gate-card input[type="text"],
.gate-card input[type="password"],
.gate-card input[type="email"],
.gate-card input[type="tel"],
.gate-card input[type="number"],
.gate-card select {
    width: 100%;
    background: var(--dr-bg);
    border: 1px solid var(--dr-line);
    border-radius: 0.75rem;
    padding: 0.85rem 0.95rem;
    color: var(--dr-txt);
    font-family: inherit;
    font-size: 0.98rem;
    transition: border-color 0.15s, background 0.15s;
}
.gate-card input:focus,
.gate-card select:focus {
    outline: none;
    border-color: var(--dr-brand);
    background: var(--dr-surface2);
}
.gate-card input::placeholder { color: var(--dr-faint); }

/* ── 버튼 — 랜딩 .btn 기하 그대로 ────────────────────────────── */
.door-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
    width: 100%;
    padding: 0.9rem 1.55rem;
    border-radius: 0.9rem;
    border: 0;
    font-family: inherit;
    font-weight: 800; font-size: 0.98rem;
    cursor: pointer; text-decoration: none;
    transition: filter 0.15s, border-color 0.15s, color 0.15s;
}
.door-btn:active { transform: scale(0.96); transition: none; }
.door-btn--primary {
    background: var(--dr-brand);
    color: #06141a;
    box-shadow: 0 0 30px rgba(34, 211, 238, 0.32);
}
.door-btn--primary:hover { filter: brightness(1.07); }
.door-btn--primary:disabled { opacity: 0.5; cursor: default; box-shadow: none; }
.door-btn--ghost {
    background: transparent;
    color: var(--dr-txt);
    border: 1px solid var(--dr-line);
}
.door-btn--ghost:hover { border-color: var(--dr-brand); color: var(--dr-brand); }

/* ── 보조 링크 줄 ────────────────────────────────────────────── */
.door-foot {
    margin-top: 1.4rem; padding-top: 1.1rem;
    border-top: 1px solid var(--dr-line);
    text-align: center;
}
.door-foot a {
    color: var(--dr-muted); text-decoration: none;
    font-size: 0.85rem; font-weight: 600;
    transition: color 0.15s;
}
.door-foot a:hover { color: var(--dr-brand); }
.door-foot .sep { color: var(--dr-faint); margin: 0 0.5rem; }

/* ── 알림 박스 ───────────────────────────────────────────────── */
.door-note {
    margin-top: 1.1rem; padding: 0.9rem 1rem;
    border-radius: 0.8rem;
    background: var(--dr-surface2);
    border: 1px solid var(--dr-line);
    text-align: center;
}
.door-note-title { font-size: 0.88rem; font-weight: 800; color: var(--dr-txt); margin-bottom: 0.35rem; }
.door-note-body { font-size: 0.82rem; line-height: 1.6; color: var(--dr-muted); word-break: keep-all; }
.door-note--ok .door-note-title { color: var(--dr-success); }

/* ── 비밀번호 보기 토글 ──────────────────────────────────────── */
.pw-wrap { position: relative; }
.pw-toggle-btn {
    position: absolute; top: 50%; right: 0.6rem; transform: translateY(-50%);
    background: none; border: 0; padding: 0.35rem; cursor: pointer;
    color: var(--dr-faint); display: inline-flex;
}
.pw-toggle-btn:hover { color: var(--dr-muted); }
.gate-card .pw-wrap input { padding-right: 2.6rem; }

@media (prefers-reduced-motion: reduce) {
    .door-btn:active { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   레거시 클래스 브리지 — register / recovery 용 (2026-08-19)

   두 페이지는 login 과 같은 옛 클래스(.title-main / .label-text / .form-group /
   .btn-login / .recovery-link)를 쓴다. 마크업을 손대면 폼 필드와 JS 를 건드리게
   되므로, **여기서 색만 덮어쓴다** — 템플릿엔 이 파일 <link> 한 줄만 추가한다.

   ⚠️ `body.gate-body` 접두사가 있는 이유: 페이지 인라인 <style> 이 이 파일보다
      뒤에 오기 때문에, 같은 특정성이면 인라인이 이긴다. (0,1,1) 로 한 단계 올려야
      덮인다. 접두사를 빼면 조용히 옛 스타일로 돌아간다.
   ══════════════════════════════════════════════════════════════════ */

/* 그라데이션 글자 + drop-shadow 글로우 -> 랜딩과 같은 단색 굵은 제목 */
body.gate-body .title-main {
    background: none !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
    background-clip: border-box !important;
    filter: none !important;
    color: var(--dr-txt) !important;
    font-size: clamp(1.45rem, 6vw, 1.72rem);
    font-weight: 900;
    letter-spacing: -0.6px;
}
body.gate-body .title-sub {
    color: var(--dr-muted);
    font-weight: 500;
    letter-spacing: -0.1px;
    font-size: 0.88rem;
}
body.gate-body .header-section { margin-bottom: 1.9rem; }

/* 대문자 시안 라벨 -> 랜딩에 있는 어법(작은 회색 라벨) */
body.gate-body .label-text {
    color: var(--dr-muted);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: -0.1px;
    margin-left: 0.15rem;
    margin-bottom: 0.4rem;
}
body.gate-body .form-group { margin-bottom: 0.95rem; }

/* 그라데이션 버튼 + translateY -> 랜딩 .btn--primary */
body.gate-body .btn-login {
    background: var(--dr-brand) !important;
    color: #06141a !important;
    border-radius: 0.9rem !important;
    padding: 0.9rem 1.55rem !important;
    font-size: 0.98rem !important;
    box-shadow: 0 0 30px rgba(34, 211, 238, 0.32) !important;
    transition: filter 0.15s !important;
}
body.gate-body .btn-login:hover { transform: none !important; filter: brightness(1.07); }
body.gate-body .btn-login:active { transform: scale(0.96) !important; transition: none !important; }

body.gate-body .recovery-link { border-top-color: var(--dr-line); }
body.gate-body .recovery-link a { color: var(--dr-muted); }
body.gate-body .recovery-link a:hover { color: var(--dr-brand); }

/* 카드 글로우 애니메이션 제거 — 랜딩엔 이런 물건이 없다 */
body.gate-body .login-container,
body.gate-body .gate-card { box-shadow: none !important; }

/* ── 크롬 자동완성 ────────────────────────────────────────────────
   저장된 비밀번호가 채워지면 크롬이 입력칸을 **흰 배경 + 검은 글자**로 칠한다.
   background 로는 못 이기고 inset box-shadow 로 덮어야 한다(크롬 전용 해법). */
.gate-card input:-webkit-autofill,
.gate-card input:-webkit-autofill:hover,
.gate-card input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--dr-txt);
    -webkit-box-shadow: 0 0 0 1000px var(--dr-bg) inset;
    box-shadow: 0 0 0 1000px var(--dr-bg) inset;
    caret-color: var(--dr-txt);
    transition: background-color 9999s ease-in-out 0s;
}

/* ══════════════════════════════════════════════════════════════════
   register / recovery 내부 (2026-08-19)
   오너 지적: "내부 좀 깔끔하고 예쁘게, 보라색도 마음에 안 들고,
   아이디/비번 찾기도 투박하다."
   ══════════════════════════════════════════════════════════════════ */

/* 폼 안의 맨 <label> — .door-label 과 같은 어법으로 */
body.gate-body .gate-card .form-group > label {
    display: block;
    margin: 0 0 0.4rem 0.15rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: -0.1px;
    color: var(--dr-muted);
}

/* 보라 그라데이션 가입 버튼 -> 랜딩 브랜드 시안.
   랜딩의 주 CTA 가 시안인데 가입 버튼만 보라라 흐름이 끊겼다. */
body.gate-body .btn-register {
    background: var(--dr-brand) !important;
    color: #06141a !important;
    border: 0 !important;
    border-radius: 0.9rem !important;
    padding: 0.9rem 1.55rem !important;
    font-size: 0.98rem !important;
    box-shadow: 0 0 30px rgba(34, 211, 238, 0.32) !important;
    transition: filter 0.15s !important;
}
body.gate-body .btn-register:hover { transform: none !important; filter: brightness(1.07); }
body.gate-body .btn-register:active { transform: scale(0.96) !important; transition: none !important; }

/* ── 약관 박스 — 화면에서 제일 투박한 물건이었다 ────────────────
   검은 구멍 + 시안 제목 + 빽빽한 글자였다. 카드 안의 한 단계 밝은 면으로 올리고
   제목을 무채색으로 내려, "읽을 것" 이지 "경고" 로 보이지 않게 한다. */
body.gate-body .privacy-box {
    background: var(--dr-surface2);
    border: 1px solid var(--dr-line);
    border-radius: 0.8rem;
    padding: 0.95rem 1.05rem;
    font-size: 0.74rem;
    line-height: 1.75;
    color: var(--dr-muted);
    scrollbar-width: thin;
    scrollbar-color: var(--dr-line) transparent;
}
body.gate-body .privacy-box h4 {
    color: var(--dr-txt);
    font-size: 0.8rem;
    font-weight: 800;
    margin: 0 0 0.6rem;
}
body.gate-body .privacy-box strong { color: var(--dr-txt); }
body.gate-body .privacy-box::-webkit-scrollbar { width: 6px; }
body.gate-body .privacy-box::-webkit-scrollbar-thumb {
    background: var(--dr-line); border-radius: 999px;
}
body.gate-body .privacy-box::-webkit-scrollbar-track { background: transparent; }

/* 동의 체크 — 보라 accent 제거 + 누르기 쉬운 한 줄로 */
body.gate-body .privacy-check {
    margin-top: 0.7rem;
    padding: 0.7rem 0.85rem;
    border-radius: 0.7rem;
    background: var(--dr-surface2);
    border: 1px solid var(--dr-line);
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--dr-txt);
    transition: border-color 0.15s;
}
body.gate-body .privacy-check:hover { border-color: var(--dr-brand); }
body.gate-body .privacy-check input {
    accent-color: var(--dr-brand);
    width: 1.05rem; height: 1.05rem; margin-top: 0.05rem;
}

/* ── 아이디/비번 찾기 탭 — 세그먼트 컨트롤로 ────────────────────
   전엔 활성 탭이 시안 solid + 그림자라 버튼 두 개가 싸우는 것처럼 보였다.
   묶음은 한 겹의 면, 활성만 밝은 알약 — 랜딩 .show-tabs 와 같은 어법. */
body.gate-body .tab-nav {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1.4rem;
    padding: 0.25rem;
    border-radius: 0.8rem;
    background: var(--dr-bg);
    border: 1px solid var(--dr-line);
}
body.gate-body .tab-btn {
    flex: 1;
    padding: 0.6rem 0.5rem;
    border: 0;
    border-radius: 0.6rem;
    background: transparent;
    color: var(--dr-muted);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
body.gate-body .tab-btn:hover { color: var(--dr-txt); }
body.gate-body .tab-btn.active {
    background: var(--dr-surface2);
    color: var(--dr-txt);
    box-shadow: none;
}

/* ── 동의 블록 (2026-08-19, 아이엠스쿨 어법) ────────────────────────
   전엔 스크롤 박스에 빽빽한 본문 + 체크 하나였다. 항목을 줄로 나누고
   본문은 **필요할 때만** 펼친다 — 읽을 사람은 펼치고, 아닌 사람은 안 막힌다. */
body.gate-body .agree-block { margin-top: 0.4rem; }

body.gate-body .agree-all {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.85rem 0.95rem; margin-bottom: 0.5rem;
    border-radius: 0.8rem;
    background: var(--dr-surface2);
    border: 1px solid var(--dr-line);
    font-size: 0.9rem; font-weight: 800; color: var(--dr-txt);
    cursor: pointer;
    transition: border-color 0.15s;
}
body.gate-body .agree-all:hover { border-color: var(--dr-brand); }

body.gate-body .agree-list {
    border: 1px solid var(--dr-line);
    border-radius: 0.8rem;
    overflow: hidden;
}
body.gate-body .agree-item {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.75rem 0.95rem;
    font-size: 0.85rem; color: var(--dr-txt);
    cursor: pointer;
}
body.gate-body .agree-item + .agree-item { border-top: 1px solid var(--dr-line); }
body.gate-body .agree-text { flex: 1; min-width: 0; font-weight: 600; }
body.gate-body .agree-text b { color: var(--dr-brand); font-weight: 800; margin-right: 0.15rem; }
body.gate-body .agree-more {
    flex: none; display: inline-flex; color: var(--dr-faint);
    transition: color 0.15s, transform 0.2s;
}
body.gate-body .agree-item:hover .agree-more { color: var(--dr-muted); }

/* 개인정보 항목 — <details> 라 줄 자체가 펼침 트리거다 */
body.gate-body .agree-item--fold { display: block; padding: 0; cursor: default; }
body.gate-body .agree-item--fold > summary {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.75rem 0.95rem;
    list-style: none; cursor: pointer;
}
body.gate-body .agree-item--fold > summary::-webkit-details-marker { display: none; }
body.gate-body .agree-hit { display: flex; align-items: center; gap: 0.6rem; flex: 1; min-width: 0; cursor: pointer; }
body.gate-body .agree-item--fold[open] .agree-more { transform: rotate(90deg); }
body.gate-body .agree-body {
    padding: 0 0.95rem 0.95rem;
    font-size: 0.74rem; line-height: 1.75; color: var(--dr-muted);
    max-height: 13rem; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: var(--dr-line) transparent;
}
body.gate-body .agree-body strong { color: var(--dr-txt); }
body.gate-body .agree-body::-webkit-scrollbar { width: 6px; }
body.gate-body .agree-body::-webkit-scrollbar-thumb { background: var(--dr-line); border-radius: 999px; }

body.gate-body .agree-all input,
body.gate-body .agree-item input {
    flex: none; width: 1.05rem; height: 1.05rem; margin: 0;
    accent-color: var(--dr-brand); cursor: pointer;
}

/* 지연 로드된 약관 본문 — /terms 의 .legal-wrap 이 통째로 들어온다.
   원본은 820px 문서 폭이라 카드 안에선 그대로 쓰면 안 된다. */
body.gate-body .agree-body .legal-wrap { max-width: none; margin: 0; padding: 0; }
body.gate-body .agree-body .legal-wrap h1 { font-size: 0.95rem; margin: 0 0 0.3rem; }
body.gate-body .agree-body .legal-wrap h2 {
    font-size: 0.8rem; margin: 1rem 0 0.35rem;
    padding-left: 0.5rem; border-left: 2px solid var(--dr-brand);
    color: var(--dr-txt);
}
body.gate-body .agree-body .legal-wrap p,
body.gate-body .agree-body .legal-wrap li { font-size: 0.74rem; color: var(--dr-muted); }
body.gate-body .agree-body .legal-meta { font-size: 0.7rem; margin-bottom: 0.8rem; padding-bottom: 0.6rem; }
body.gate-body .agree-loading { margin: 0; color: var(--dr-faint); font-size: 0.74rem; }
body.gate-body .agree-fallback { color: var(--dr-brand); font-size: 0.78rem; font-weight: 700; }