/* 골든타임GT 앱 지면 — 로그인 · 상담실 · 화상 상담 · 결제(서버가 그림).
 *
 * 방향(시안 C, 2026-10-03 통일): 메인(home.css)과 같은 블랙·골드.
 * 흰 머리(메인과 같은 모양) → 검정 머리띠(금빛·필름 질감·명조 제목) → 흰 카드 본문.
 * 흰 카드 위 주 버튼은 검정, 검정 바탕 위 주 버튼은 금색 그라데이션 — 모든 화면에 같은 규칙.
 * 예외: 흰 바탕이라도 «지금 눌러야 할 한 곳»(상담실 입장 버튼)만 금색으로 강조한다(일부러).
 * 이전 남색(시안 A) 스타일은 public/drafts/site-a.css 에 보관(drafts/a-main.html 이 씀).
 */
:root{
  --black:#0A0A0B; --black-2:#141416; --black-3:#1C1C1F; --line-d:rgba(255,255,255,.1);
  --white:#fff; --gray:#F4F4F5; --gray-2:#E7E7EA; --line:#E7E7EA;
  --ink:#141418; --ink-2:#55575E; --ink-3:#8B8D94;
  --on-dark:#F4F4F5; --on-dark-2:#B9BBC2; --on-dark-3:#7E8087;
  --gold-a:#B8893A; --gold-b:#E9C77C; --gold:#D4AD5F; --gold-wash:#F8F1E2;
  --gold-grad:linear-gradient(90deg,#B8893A 0%,#E9C77C 55%,#C79A4A 100%);
  --radius:6px; --max:1160px;
  --shadow:0 8px 30px -12px rgba(20,20,24,.22);
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --serif-ko:"Noto Serif KR","Nanum Myeongjo",serif;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--gray); color:var(--ink); font-family:var(--font); font-size:16px; line-height:1.7;
  letter-spacing:-.02em; word-break:keep-all; -webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:var(--max); margin:0 auto; padding:0 28px}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--gold-a); outline-offset:3px}
p{margin:0 0 14px}
p:last-child{margin-bottom:0}

/* 영문 명조 꼬리표(메인 구획 머리와 같은 말투) */
.eyebrow{display:block; font-family:var(--serif); font-size:16px; font-weight:700; letter-spacing:.18em; color:var(--gold-a); margin:0 0 8px}
.page-hero .eyebrow{color:var(--gold)}

/* ── 머리(메인과 같은 흰 머리) ───────────── */
.site-head{position:sticky; top:0; z-index:20; background:rgba(255,255,255,.96); backdrop-filter:blur(8px); border-bottom:1px solid var(--gray-2)}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; height:76px}
.brand{display:flex; align-items:center; gap:14px; text-decoration:none}
.brand-logo{display:block; height:30px; width:auto}
.brand-sub{font-size:13px; font-weight:700; color:var(--gold-a); padding-left:14px; border-left:1px solid var(--gray-2); letter-spacing:.02em; white-space:nowrap}
.nav{display:flex; align-items:center; gap:22px; font-size:14.5px; font-weight:600}
.nav a{color:var(--ink-2); text-decoration:none; white-space:nowrap}
.nav a:hover{color:var(--ink)}

/* ── 버튼 ─────────────────────────────── */
.btn,.btn-gold,.btn-ghost,.btn-alt{display:inline-flex; align-items:center; justify-content:center; gap:8px; font:inherit; font-size:15.5px;
  font-weight:700; text-decoration:none; padding:14px 24px; border-radius:var(--radius); cursor:pointer; border:1px solid transparent;
  transition:background-color .15s, border-color .15s, color .15s, filter .15s}
.btn{background:var(--black); color:#fff}
.btn:hover{background:#26262A}
.btn-gold{background:var(--gold-grad); color:#1A1405; font-weight:800; box-shadow:0 10px 30px -12px rgba(212,173,95,.6)}
.btn-gold:hover{filter:brightness(1.06)}
.btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.45)}
.btn-ghost:hover{border-color:var(--gold-b); color:var(--gold-b)}
.btn-alt{background:var(--white); color:var(--ink); border-color:var(--gray-2)}
.btn-alt:hover{border-color:var(--ink)}
.btn:disabled,.btn-gold:disabled,.btn-alt:disabled{opacity:.45; cursor:not-allowed; filter:none}

/* ── 검정 바탕 공통(금빛 + 필름 질감) ─────── */
.center-pane,.page-hero,.paybody,.call{background-color:var(--black)}
.center-pane,.page-hero,.paywrap{position:relative; isolation:isolate; overflow:hidden}
.center-pane::before,.page-hero::before,.paywrap::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(800px 320px at 50% 0%, rgba(212,173,95,.15), transparent 70%)}
.center-pane::after,.page-hero::after,.paywrap::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.07; mix-blend-mode:overlay; background-image:var(--grain)}
.watermark{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:-1; white-space:nowrap; pointer-events:none; user-select:none;
  font-family:var(--serif); font-weight:700; font-size:clamp(80px,13vw,200px); letter-spacing:.06em; color:rgba(255,255,255,.05)}
.page-hero .watermark{left:auto; right:-2%; transform:translateY(-50%); font-size:clamp(70px,10vw,150px); color:rgba(255,255,255,.04)}

/* ── 폼 ───────────────────────────────── */
label{display:block; font-size:14px; font-weight:700; margin:0 0 7px; color:var(--ink-2)}
input[type=text],input[type=tel],input[type=password],select,textarea{width:100%; font:inherit; font-size:16px; padding:13px 15px; border-radius:var(--radius);
  border:1px solid var(--gray-2); background:var(--white); color:var(--ink)}
:is(input,select,textarea):focus{outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold)}
textarea{min-height:96px; resize:vertical}
.field{margin-bottom:16px}
.check{display:flex; gap:10px; align-items:flex-start; font-size:14px; font-weight:500; color:var(--ink-2); margin:6px 0 18px}
.check input{margin-top:5px; accent-color:var(--gold-a)}
.formmsg{margin-top:12px; font-size:14px; min-height:1.4em}
.formmsg[data-tone=error]{color:#B02A2A}
.formmsg[data-tone=ok]{color:#1F6B3B}
.side .formmsg[data-tone=error]{color:#FF8A8A}
.side .formmsg[data-tone=ok]{color:#7FD39C}

/* ── 흰 카드(로그인 · 결제 · 입장 동의) — 위에 금색 선 한 줄 ── */
.auth-card,.paycard,.gate{background:var(--gold-grad) top/100% 3px no-repeat, var(--white); border-radius:var(--radius); box-shadow:0 40px 90px -30px rgba(0,0,0,.85)}
.auth-card h1,.paycard h1,.gate h1{margin:0 0 8px; font-family:var(--serif-ko); font-size:27px; font-weight:700; letter-spacing:-.035em; line-height:1.35}

/* 로그인 */
.center-pane{min-height:calc(100vh - 76px); display:grid; place-items:center; padding:56px 16px}
.auth-card{width:100%; max-width:420px; padding:44px 36px 36px}
.auth-card .sub{margin:0 0 28px; font-size:15px; color:var(--ink-3)}
.auth-card .btn,.paycard .btn{width:100%; margin-top:6px}

/* 결제 */
.paywrap{min-height:100vh; display:grid; place-items:center; padding:40px 16px}
.paycard{width:100%; max-width:420px; padding:42px 36px 34px}
.paycard .brand-logo{margin-bottom:24px}
.paytable{width:100%; border-collapse:collapse; margin:18px 0; font-size:15px}
.paytable th{text-align:left; color:var(--ink-3); font-weight:600; padding:11px 0; width:34%; border-bottom:1px solid var(--line)}
.paytable td{padding:11px 0; border-bottom:1px solid var(--line); font-weight:600}
.paysum{display:flex; justify-content:space-between; align-items:baseline; margin:8px 0 24px; color:var(--ink-2); font-weight:600}
.paysum strong{font-family:var(--serif-ko); font-size:30px; font-weight:900; letter-spacing:-.03em; color:var(--ink)}
.paybtns{display:grid; gap:8px}
.paybtns .btn-alt{width:100%}
.pay-test{font-size:13.5px; color:#7A5A1E; background:var(--gold-wash); padding:8px 12px; border-radius:var(--radius); border-left:3px solid var(--gold)}
.payfine{font-size:13px; color:var(--ink-3); margin-top:16px}
.payfine a{color:var(--gold-a)}

/* ── 상담실 ─────────────────────────────── */
.page{min-height:calc(100vh - 76px); background:var(--gray)}
.page-hero{color:var(--on-dark); padding:64px 0 76px}
.page-hero h1{margin:0 0 14px; font-family:var(--serif-ko); font-size:clamp(28px,3.6vw,40px); font-weight:700; letter-spacing:-.035em; line-height:1.3}
.page-hero p{margin:0; color:var(--on-dark-2); max-width:60ch}
.page-hero p::before{content:""; display:block; width:56px; height:2px; margin-bottom:18px; background:var(--gold-grad)}
.panel{background:var(--white); border-radius:var(--radius); padding:32px; margin-top:24px; box-shadow:var(--shadow)}
.page-hero + .wrap > .panel:first-child{margin-top:-32px; position:relative}
.panel h2{display:flex; align-items:center; gap:12px; margin:0 0 18px; font-size:20px; font-weight:800; letter-spacing:-.03em}
.panel h2::before{content:""; width:4px; height:20px; background:var(--gold-grad); border-radius:2px}
.consult-list{display:grid; gap:12px}
.consult-item{display:flex; align-items:center; gap:18px; padding:18px 22px; border:1px solid var(--gray-2); border-radius:var(--radius); transition:border-color .15s, box-shadow .15s}
.consult-item:hover{border-color:var(--gold); box-shadow:0 6px 20px -12px rgba(184,137,58,.5)}
.consult-when{font-weight:800; font-size:18px; font-variant-numeric:tabular-nums; min-width:128px}
.consult-who{flex:1; color:var(--ink-2)}
.consult-who b{color:var(--ink)}
.consult-item .btn-gold{padding:11px 24px; font-size:15px}
.empty{color:var(--ink-3)}
.devcheck{display:grid; gap:28px; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); align-items:start}
.devcheck-video{position:relative; aspect-ratio:4/3; background:var(--black-2); border-radius:var(--radius); overflow:hidden}
.devcheck-video video{width:100%; height:100%; object-fit:cover; display:block; transform:scaleX(-1)}
.devcheck-empty{position:absolute; inset:0; display:grid; place-items:center; color:var(--on-dark-3); font-size:15px}
.devcheck-empty[hidden]{display:none}
.meter{height:8px; background:var(--gray-2); border-radius:100px; overflow:hidden; margin:8px 0 4px}
.meter span{display:block; height:100%; width:0; background:var(--gold-grad); transition:width .08s linear}

/* ── 화상 상담(전체 검정) ───────────────── */
.call{color:var(--on-dark); min-height:100vh; display:flex; flex-direction:column}
.call-top{display:flex; align-items:center; gap:14px; padding:14px 20px; border-bottom:1px solid var(--line-d); background:var(--black)}
.call-top .brand-logo{height:22px; filter:brightness(0) invert(1)}
.call-title{flex:1; font-weight:700; font-size:15px; color:var(--on-dark-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rec-dot{display:none; align-items:center; gap:8px; font-size:13px; font-weight:800; color:#FF8A8A}
.rec-dot.on{display:inline-flex}
.rec-dot::before{content:""; width:10px; height:10px; border-radius:50%; background:#FF5A5A; animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.25}}
.stage{flex:1; display:flex; flex-direction:column; min-height:0}
.call-main{flex:1; display:grid; grid-template-columns:1fr 320px; min-height:0}
.tiles{display:grid; gap:12px; padding:16px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); align-content:center}
.tile{position:relative; aspect-ratio:16/10; background:var(--black-2); border-radius:8px; overflow:hidden; border:1px solid var(--line-d)}
.tile video{width:100%; height:100%; object-fit:cover; display:block; background:#000}
.tile.me video{transform:scaleX(-1)}
.tile-name{position:absolute; left:12px; bottom:12px; font-size:13px; font-weight:700; background:rgba(0,0,0,.55); padding:4px 10px; border-radius:6px; border-left:2px solid var(--gold)}
.side{border-left:1px solid var(--line-d); padding:18px; display:flex; flex-direction:column; gap:14px; overflow:auto; background:var(--black-2)}
.side h3{font-size:15px; color:var(--gold-b); margin:0; font-weight:700}
.side textarea{background:rgba(255,255,255,.05); border-color:var(--line-d); color:var(--on-dark); min-height:180px}
.side .btn-alt{background:transparent; color:var(--on-dark); border-color:rgba(255,255,255,.3)}
.side .btn-alt:hover{border-color:var(--gold-b); color:var(--gold-b)}
.side .formmsg{margin:0}
.controls{display:flex; justify-content:center; gap:10px; padding:16px; border-top:1px solid var(--line-d); flex-wrap:wrap}
.ctl{font:inherit; font-weight:700; font-size:14.5px; padding:12px 20px; border-radius:999px; border:1px solid var(--line-d); background:var(--black-3); color:var(--on-dark); cursor:pointer}
.ctl:hover{border-color:rgba(255,255,255,.3)}
.ctl[aria-pressed=true]{background:#3A2026; border-color:#6B3442; color:#FFB3B3}
.ctl.danger{background:#B83A3A; border-color:#B83A3A; color:#fff}
.ctl.goldbtn{background:var(--gold-grad); color:#1A1405; border-color:transparent}
.ctl:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.gate{max-width:520px; margin:8vh auto; color:var(--ink); padding:42px 36px 34px}
.gate h1{font-size:25px; margin-bottom:12px}
.gate p{color:var(--ink-2)}
.gate .btn{width:100%}

/* ── 좁은 화면 ─────────────────────────── */
@media (max-width:960px){
  .call-main{grid-template-columns:1fr}
  .side{border-left:0; border-top:1px solid var(--line-d)}
}
@media (max-width:640px){
  body{font-size:15.5px}
  .wrap{padding:0 16px}
  .site-head .wrap{height:64px}
  .brand-logo{height:26px}
  .brand-sub{display:none}
  .center-pane,.page{min-height:calc(100vh - 64px)}
  .page-hero{padding:44px 0 64px}
  .page-hero .watermark{display:none}
  .paywrap{padding:20px 12px; place-items:start center}
  .paysum strong{font-size:26px}
  .panel{padding:22px 18px}
  .devcheck{grid-template-columns:1fr}
  .consult-item{flex-wrap:wrap; padding:16px}
  .consult-item .btn-gold{width:100%}
  .auth-card,.paycard{padding:36px 22px 28px}
  .gate{margin:4vh 16px; padding:34px 22px 26px}
  .tiles{grid-template-columns:1fr; padding:10px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}

/* ── 녹화 강의(10/15) ── */
.lec-list{display:grid; gap:14px}
.lec-item{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 22px; align-items:center; padding:20px 22px; border:1px solid var(--gray-2); border-radius:var(--radius); background:var(--white); transition:border-color .15s, box-shadow .15s}
.lec-item:hover{border-color:var(--gold); box-shadow:0 6px 20px -12px rgba(184,137,58,.5)}
.lec-no{font-family:var(--serif); color:var(--gold-a); font-weight:700; font-size:15px; letter-spacing:.06em}
.lec-item h3{margin:2px 0 6px; font-size:19px; line-height:1.45}
.lec-item p{margin:0; color:var(--ink-2); font-size:15px}
.lec-meta{display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:10px; color:var(--ink-3); font-size:14px}
.lec-meta b{color:var(--ink-2); font-weight:700}
.lec-done{color:var(--gold-a); font-weight:800}
.lec-bar{height:6px; background:var(--gray-2); border-radius:3px; overflow:hidden; margin-top:10px; max-width:360px}
.lec-bar span{display:block; height:100%; background:var(--gold-grad)}
.lec-item .btn-gold,.lec-item .btn{padding:11px 24px; font-size:15px; white-space:nowrap}
.lec-player{background:var(--black); border-radius:var(--radius); overflow:hidden; aspect-ratio:16/9}
.lec-player video{display:block; width:100%; height:100%; background:#000}
.lec-info{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:16px; color:var(--ink-2)}
@media (max-width:720px){
  .lec-item{grid-template-columns:1fr; padding:16px}
  .lec-item .btn-gold,.lec-item .btn{width:100%; text-align:center}
}