/* PracExam landing styles — shared by / (hub), /ea/ and /re/. Extracted from the old index.html on 2026-10-24.
   Colors come from exam-palettes.css via <body data-exam="…">. */
:root{
  /* 2026-10-24 — 색 팔레트는 exam-palettes.css 로 옮겼다(<body data-exam="…">). 여기에는 색이 아닌 값만 남는다. */
  --card-bg:     #ffffff;
  --white:       #ffffff;
  --success-color:#16a34a;
  --danger-color:#dc2626;
  --flag-color:  #d97706;
  --font-serif:  'Poppins', 'IBM Plex Sans KR','Pretendard Variable', -apple-system, sans-serif;
  --font-display:'DM Serif Display', Georgia, serif;
  --font-sans:   'Inter', 'IBM Plex Sans KR','Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --radius:      14px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{
  font-family:var(--font-sans);
  background:var(--page-bg);
  color:var(--text-main);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* CJK(한국어) 어절 단위 줄바꿈 — 조사가 앞말과 함께 개행 */
  word-break:keep-all;
  overflow-wrap:break-word;
}
img,svg{display:block;}
a{color:inherit;}

/* ── language toggle ───────────────────────────────────── */
.lang-ko .en, .lang-en .ko { display:none !important; }

/* ── layout helpers ────────────────────────────────────── */
.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}
.eyebrow{
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--navy-mid);
}
h1,h2,h3{font-family:var(--font-serif); font-weight:700; color:var(--text-main); letter-spacing:-.02em;}
h1{font-size:clamp(34px,5.5vw,58px); line-height:1.12;}
h2{font-size:clamp(26px,4vw,38px); line-height:1.2;}
h3{font-size:20px; line-height:1.35;}
p{color:var(--text-mid);}
section{padding:88px 0;}
@media (max-width:720px){ section{padding:56px 0;} }

/* ── checkbox brand mark (Phase 8 motif) ──────────────────*/
.brand-mark{display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:8px; background:var(--navy); flex:0 0 auto;}
.brand-mark svg{width:18px; height:18px; stroke:var(--white); fill:none;
  stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;}
.hero-note-icon{width:34px; height:34px; flex:none; margin:-4px -8px -4px -6px; position:relative; top:-3px; mix-blend-mode:multiply;}

/* ── nav ───────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-clr);
}
.nav-inner{
  max-width:1120px; margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.logo{display:flex; align-items:center; gap:10px; font-weight:700; font-size:19px; color:var(--navy); text-decoration:none; flex:0 0 auto;}
.nav-right{display:flex; align-items:center; gap:20px; flex:0 1 auto; min-width:0;}
.nav-menu{display:contents;}
.nav-links{display:flex; align-items:center; gap:28px; font-size:14px; font-weight:600; color:var(--text-mid);}
.nav-links a{text-decoration:none;}
.nav-links a:hover{color:var(--navy);}
.nav-actions{display:flex; align-items:center; gap:10px;}

.nav-toggle{
  display:none; flex:0 0 auto; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:9px; border:none; background:none; cursor:pointer;
  -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent;
}
.nav-toggle:hover{background:var(--navy-light);}
.nav-toggle svg{width:22px; height:22px; stroke:var(--navy); fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
.nav-toggle .icon-close{display:none;}
.nav-toggle.open .icon-bars{display:none;}
.nav-toggle.open .icon-close{display:block;}

@media (max-width:860px){
  .nav-right{gap:10px;}
  .nav-toggle{display:flex;}
  .nav-menu{
    display:none; flex-direction:column; align-items:stretch; gap:0;
    position:absolute; top:100%; left:0; right:0;
    background:var(--white); border-bottom:1px solid var(--border-clr);
    padding:4px 24px 20px; box-shadow:0 16px 30px -14px rgba(var(--navy-rgb),.25);
    max-height:calc(100vh - 60px); overflow-y:auto;
  }
  .nav-menu.open{display:flex;}
  .nav-links{flex-direction:column; align-items:stretch; gap:0; width:100%;}
  .nav-links a{display:block; padding:13px 2px; border-bottom:1px solid var(--border-clr);}
  .nav-actions{flex-direction:column; align-items:stretch; gap:10px; width:100%; padding-top:14px;}
  .nav-actions .btn{width:100%; padding:13px 18px; font-size:14px;}
}

.btn{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:9px; border:1.5px solid transparent; cursor:pointer;
  font-family:var(--font-sans); font-weight:600; font-size:14px; line-height:1.2;
  padding:9px 18px; text-decoration:none; transition:transform .12s, box-shadow .12s, background .15s;
  white-space:nowrap; box-sizing:border-box; vertical-align:middle;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--navy); color:var(--white);}
.btn-primary:hover{background:var(--navy-mid); box-shadow:0 6px 18px rgba(var(--navy-rgb),.25);}
.btn-ghost{background:transparent; color:var(--navy); border-color:var(--border-strong);}
.btn-ghost:hover{background:var(--navy-light); border-color:var(--navy-light);}
.btn-accent{background:var(--accent); color:#fff; border-color:var(--accent);}
.btn-accent:hover{background:var(--accent-hover,#5D8F8A); border-color:var(--accent-hover,#5D8F8A);}
.btn-lg{padding:12px 24px; font-size:15px; border-radius:10px;}
.btn-sm{padding:6px 12px; font-size:12px; border-radius:8px;}

.lang-toggle{
  display:flex; border:1.5px solid var(--border-strong); border-radius:8px; overflow:hidden;
  flex:0 0 auto;
}
.lang-toggle button{
  font-family:var(--font-sans); font-weight:700; font-size:12px; letter-spacing:.05em;
  padding:6px 11px; border:none; background:var(--white); color:var(--text-muted); cursor:pointer;
}
.lang-toggle button.active{background:var(--navy); color:var(--white);}

/* ── hero ──────────────────────────────────────────────── */
.hero{
  padding-top:64px; padding-bottom:64px;
  background:linear-gradient(135deg,#ffffff 0%,#ffffff 55%,var(--accent-tint) 100%);
  position:relative; overflow:hidden;
}
/* min-height — 데모 카드(길었음) 시절 680/720. 사진은 낮아서 600 이면 넉넉하다 (2026-08-27) */
.hero-wrap{position:relative; min-height:600px; display:flex; align-items:center;}
@media (max-width:1100px){
  .hero-wrap{min-height:560px;}
}
@media (max-width:900px){
  .hero-wrap{flex-direction:column; align-items:stretch; min-height:0;}
}
@media (max-width:600px){
  .hero{padding-top:40px; padding-bottom:32px;}
}
.hero h1{margin-bottom:18px;}
/* 🔴 2026-09-22 — 부제가 h1 안에 있어 «제목과 같은 크기»를 물려받고 있었다.
   🔴 «em 으로 매면 안 된다» — em 은 제목 크기를 따라가는데, 제목은 폰에서 34px 에서
      멈춘다(clamp 의 최소값). 그러면 부제가 27px 이 되어 420px 폭에서 한 줄에 못 들어가
      오른쪽으로 «삐져나갔다». 그래서 제목과 떼어 화면 폭에 직접 매단다.
      clamp(27px, 4.4vw, 40px) = 900px 에서 40px(=제목의 .80), 폰에서 27px.
      🔴 폰 바닥값은 «진짜 390px 뷰포트»에서 재고 정했다 —
         한 줄에 들어가는 한계가 23px 이라 27px 은 «두 줄»로 접힌다. 그래도 27 이 맞다:
         24px 은 두 줄이 되는 대가를 치르면서 2px 만 얻어 제일 손해다. 두 줄이 될 바에는
         27 까지 올려 값을 받는다. 버튼은 그래도 첫 화면 안에 남는다.
      ⚠️ headless 로 --window-size=390 을 줘도 «뷰포트가 500px 에 고정»된다(실측
         window.innerWidth=500). 그 그림은 500px 레이아웃을 잘라낸 것이라 못 믿는다.
         폭 390 짜리 iframe 안에 띄워야 진짜 폰 뷰포트로 잰다(iframe 은 자기 뷰포트를 갖는다).
      제목 49 -> 부제 40 -> 본문 18 (데스크톱) · 34 -> 22 -> 16 (폰).
   🔴 .62 로 내렸다가 사장님이 «너무 작다» 하셔서 .80 으로 올렸다.
   ⛔ .88 이상으로 올리지 말 것 — 제목 끝(Exam)과 부제 끝(Finisher)이 거의 같은
      자리에서 끝나 두 줄이 «한 덩어리»로 뭉쳐 보인다. .80 은 부제가 조금 짧게
      끝나 위아래 관계가 드러난다.
   letter-spacing 은 0 으로 푼다 — h1 의 -.02em 은 «큰 글씨»용이라 작아진 부제에
   그대로 두면 글자가 붙어 보인다. */
.hero h1 em{font-style:italic; font-weight:800; color:var(--accent); text-shadow:0 2px 8px rgba(var(--accent-rgb),.15); font-size:clamp(27px,4.4vw,40px); letter-spacing:0; display:inline-block; margin-top:5px;}
/* 🔴 사장님 2026-09-22 — *"모바일 화면에서 글씨가 작아서 빈공간이 있어 허전해 보이니
   모바일에서만 한정으로 이 글씨를 제목과 동일한 크기로"*. 1em = h1 이 그때 쓰는 크기를
   «그대로» 물려받는다(폰에서 34px). 값을 박지 않아야 h1 이 바뀌어도 따라간다.
   ⛔ 이 규칙을 지우면 폰에서 부제가 27px 로 돌아가 다시 허전해진다.
   두 줄로 접히는 것은 «의도»다 — 한 줄에 들어가는 한계가 23px 이라 어차피 접힌다. */
/* 🔴 2026-09-22 (2차) — 부제가 「Your Ultimate PSI-style Exam Finisher」로 길어지면서
   1em(=제목과 같은 34px)에서는 폰에서 «세 줄»이 됐다(제목 3 + 부제 3 = 여섯 줄).
   .82em 으로 낮추면 두 줄로 돌아오고, 그래도 제목 34 ↔ 부제 28 이라 허전하지 않다.
   ⛔ 1em 으로 되돌리지 말 것 — 부제 글이 짧아지지 않는 한 다시 세 줄이 된다. */
@media (max-width:600px){ .hero h1 em{font-size:.82em;} }
.hero p.lead{font-size:18px; max-width:480px; margin-bottom:30px;}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:22px;}
.hero-note{font-size:15px; font-weight:600; color:var(--text-muted); display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
/* 2026-10-10 — icon-192.png 는 사방에 여백이 있어 18px 로 두면 체크가 «점»처럼 작고 글과 멀어 보였다(유튜브 촬영용 개선).
   크게(34px) 키우고 음수 마진으로 그림 안쪽 여백만큼 글에 붙인다. mix-blend-mode 로 흰 배경이 히어로 색 위에서 튀지 않게 한다. */
.hero-note-link{margin-left:14px; font-weight:700; color:var(--accent); text-decoration:none; border-bottom:1px solid var(--accent-border); padding-bottom:1px; white-space:nowrap;}
.hero-note-link:hover{color:var(--navy); border-bottom-color:var(--navy);}
.hero-footnote{font-size:12px; color:var(--text-muted); margin-top:10px; line-height:1.4;}

/* hero left text column */
.hero-left{
  position:relative; z-index:2;
  max-width:520px;
}

/* hero photo — 예제 문제 카드 대신 공부하는 사람 사진 (2026-08-27 사용자 결정 · PDF 3쪽 안)
   예제 문제는 아래 #samples 섹션이 그대로 보여 주므로 잃는 것 없음. 시안 = new landing design\ */
.hero-demo{
  position:absolute;
  right:0; top:50%;
  transform:translateY(-50%);
  width:min(560px, 44vw);
  aspect-ratio:3/2;   /* 슬라이드 5장이 모두 이 비율(816x544) — 자리를 미리 잡아 흔들림(CLS) 방지 */
  z-index:1;
}
/* 히어로 사진 로테이션 (2026-09-13 사용자 지시) — 5장을 겹쳐 놓고 opacity 로 crossfade.
   1번째(맨 처음 DOM 순서)만 즉시 로딩(fetchpriority=high) · 나머지 4장은 data-src 로 두었다가
   페이지가 다 뜬 뒤 JS 가 채운다(아래 스크립트) — 첫 화면 로딩 속도(LCP)에 영향 없음. */
.hero-photo{
  display:block; width:100%; height:100%;
  position:absolute; inset:0;
  object-fit:cover;
  border-radius:20px;
  box-shadow:0 26px 50px -18px rgba(var(--navy-rgb),.30), 0 6px 14px rgba(var(--navy-rgb),.08);
  opacity:0;
  transition:opacity 3.5s linear;
}
.hero-photo.rot-active{ opacity:1; }
/* 🔴 2026-09-13 — prefers-reduced-motion 분기를 없앴다(사용자 지시). 브라우저·기기마다
   그 설정 감지가 달라(크롬에서만 켜진 것으로 잡히는 사례 실측) fade 유무가 들쭉날쭉했다.
   모든 곳에서 «항상 같은» fade 가 나오게 통일한다. */
/* 데스크톱·아이패드 가로(≥901px) — 사용자 지시(2026-08-27): 사진을 «크게», 왼쪽은 그라데이션으로
   배경에 녹인다(카드 틀·그림자 없음 · 화면 오른쪽 끝까지). 얼굴은 사진 오른쪽 60% 지점이라
   왼쪽 34% 페이드에 닿지 않는다(얼굴이 중요 — 사용자). 폰·아이패드 세로는 아래 900 블록의 카드 그대로. */
@media (min-width:901px){
  .hero-demo{
    /* right:0 = 콘텐츠 폭(wrap) 오른쪽 앵커 (화면 끝까지 밀면 인물이 쳐박힌다 — 사용자 2026-08-27). */
    /* 오른쪽으로 이동(사용자 2026-08-27 · 데스크톱 기준) — 왼쪽 끝이 본문 «War» 낱말에 걸치는 지점.
       max(...) = 화면 밖으로는 안 나가게 상한(사진이 잘리면 안 됨 · 좁은 데스크톱은 화면 끝까지만) */
    right:max(-151px, calc((min(100vw, 1120px) - 100vw) / 2));
    width:min(816px, 60vw);   /* 680·50vw 에서 +20% (사용자: 세로 20% 확대 — 비율 유지라 가로도 함께) */
  }
  .hero-photo{
    /* 🔴 원본 그대로 — 자르거나 확대하지 않는다(사용자 2026-08-27 «원본에서 새로 시작»). 왼쪽만 배경으로 페이드. */
    border-radius:20px; box-shadow:none;
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 25%);
    mask-image:linear-gradient(to right, transparent 0, #000 25%);
  }
}
/* 901~1150px(아이패드 가로 등): 화면이 좁아 글 옆 공간이 작다 → 사진 좁게 + 가장자리 여백 */
@media (min-width:901px) and (max-width:1150px){
  .hero-demo{ width:min(650px, 57vw); right:24px; }
}
@media (max-width:1100px){
  .hero-left{ max-width:460px; }
}
@media (max-width:900px){
  .hero-left{ max-width:100%; }
  .hero-demo{
    position:relative; right:auto; top:auto;
    transform:none; width:100%; max-width:520px;
    margin:36px auto 0;
  }
}

/* ── stats strip ───────────────────────────────────────── */
.stats{padding:36px 0; border-top:1px solid var(--border-clr); border-bottom:1px solid var(--border-clr);}
.stats-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:24px; text-align:center;}
@media (max-width:760px){ .stats-grid{grid-template-columns:repeat(2,1fr); gap:28px 16px;}
  .stats-grid > div:last-child:nth-child(odd){grid-column:1 / -1;} }
.stat-num{font-family:var(--font-serif); font-size:clamp(22px,2.7vw,32px); color:var(--navy); white-space:nowrap;}
.stat-label{font-size:13px; color:var(--text-muted); margin-top:4px;}

/* ── section heads ─────────────────────────────────────── */
.sec-head{max-width:620px; margin:0 auto 48px; text-align:center;}
.sec-head .eyebrow{display:block; margin-bottom:10px;}
.sec-head h2{margin-bottom:12px;}

/* ── features ──────────────────────────────────────────── */
.feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:900px){ .feat-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .feat-grid{grid-template-columns:1fr;} }
.feat-card{
  background:var(--card-bg); border:1px solid var(--border-clr); border-radius:var(--radius);
  padding:24px; transition:border-color .15s, box-shadow .15s;
}
.feat-card:hover{border-color:rgba(var(--navy-rgb),.2); box-shadow:0 14px 30px -22px rgba(var(--navy-rgb),.35);}
.feat-icon{
  width:42px; height:42px; border-radius:10px; background:var(--navy-light);
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.feat-icon svg{width:21px; height:21px; stroke:var(--navy); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.feat-card h3{margin-bottom:6px; font-size:17px;}
.feat-card p{font-size:14px;}

/* ── sample questions — App 문제풀이 화면과 동일한 디자인 구조 ──────── */
.samples{background:var(--card-bg); border-top:1px solid var(--border-clr); border-bottom:1px solid var(--border-clr);}

/* question-card (App: .question-card) */
.sample-card{
  background:var(--white); border:1px solid var(--border-clr); border-radius:16px;
  padding:1.5rem 1.5rem 1.5rem; margin-bottom:18px;
  box-shadow:0 1px 6px rgba(0,0,0,.08);
  overflow:hidden;
}
.sample-head{display:flex; align-items:center; gap:6px; margin-bottom:1rem; flex-wrap:wrap;}
.sample-badge{
  background:rgba(var(--navy-rgb),.12); color:var(--navy);
  border:1px solid var(--border-clr);
  border-radius:6px; display:inline-flex; align-items:center;
  height:28px; padding:0 10px; font-size:12px; font-weight:700; letter-spacing:.02em;
  white-space:nowrap; text-transform:none;
}
.sample-q{font-size:18px; line-height:1.7; font-weight:500; color:var(--text-main); margin-bottom:0;}

/* options — App Design A: Document Flow (테두리 없는 좌측 컬러바 방식) */
.sample-opts{display:flex; flex-direction:column; gap:0; margin:1rem -1.5rem 0; border-top:1px solid var(--border-clr);}
.sample-opt{
  display:flex; align-items:flex-start; gap:12px; padding:16px 1.5rem;
  border:none; border-bottom:1px solid var(--border-clr); border-radius:0;
  font-size:16px; color:var(--text-mid); font-family:var(--font-sans);
  cursor:pointer; background:transparent; text-align:left; width:100%;
  position:relative; transition:background .12s;
}
.sample-opt:last-of-type{border-bottom:none;}
.sample-opt::before{content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:transparent; transition:background .12s;}
@media(hover:hover){
  .sample-opt:hover:not([disabled]){background:rgba(0,0,0,.03);}
}
.sample-opt .dot{
  flex:0 0 auto; min-width:20px; font-size:16px; font-weight:600; color:var(--text-muted);
  margin-top:0; transition:color .12s; background:none; border:none; border-radius:0;
  width:auto; height:auto; display:block;
}
.sample-opt.correct{background:rgba(74,222,128,.07);}
.sample-opt.correct::before{background:var(--success-color);}
.sample-opt.correct .dot{color:var(--success-color); font-weight:700;}
.sample-opt.wrong{background:rgba(244,63,94,.06);}
.sample-opt.wrong::before{background:var(--danger-color);}
.sample-opt.wrong .dot{color:var(--danger-color); font-weight:700;}
.sample-opt[disabled]{cursor:default;}

/* explanation-card (App: .explanation-card) */
.sample-exp{
  display:none; background:var(--card-bg); border:1px solid var(--border-clr); border-radius:14px;
  padding:1.25rem; margin-top:1rem; box-shadow:var(--card-shadow,0 1px 4px rgba(0,0,0,.06));
  animation:fade .25s ease;
}
.sample-exp.show{display:block;}
/* 해설 머리 구역 — 앱 해설 화면의 확정 디자인(B2·C2)과 같은 모양으로 통일 (2026-08-27 사용자 지시).
   판정 상자(판정 문구만) + War Room 청회색 상자, 641px 이상 1:2 나란히 · 폰은 위아래. */
.smp-exp-head{display:flex; flex-direction:column; gap:8px; margin-bottom:1rem;}
.sample-result-banner{
  padding:11px 14px; border-radius:10px;
  font-size:15px; font-weight:700; line-height:1.45;
}
.sample-result-banner.ok{background:rgba(74,222,128,.1); color:var(--success-color); border:1px solid rgba(74,222,128,.25);}
.sample-result-banner.fail{background:rgba(244,63,94,.08); color:var(--danger-color); border:1px solid rgba(244,63,94,.2);}
.sample-result-banner .banner-fail{display:none;}
.sample-result-banner.fail .banner-ok{display:none;}
.sample-result-banner.fail .banner-fail{display:inline;}
@media(min-width:641px){
  .smp-exp-head{flex-direction:row; align-items:stretch;}
  .smp-exp-head .sample-result-banner{flex:0 0 32%; min-width:0;}
  .smp-exp-head .sample-wr-btn{flex:1 1 0; width:auto;}
}
.sample-exp-label{font-size:11px; color:var(--navy); letter-spacing:.1em; margin-bottom:8px; font-weight:700; text-transform:uppercase;}
/* white-space:pre-line = 해설 원문의 빈 줄(\n\n)을 그대로 문단으로 보여 준다 (2026-08-13).
   그전에는 이 설정이 없어 «영문 해설의 문단 나눔까지» 한 덩어리로 붙어 나왔다. */
.sample-exp-body{font-size:16.5px; line-height:1.85; color:var(--text-mid); margin-bottom:1rem; white-space:pre-line;}
.sample-exp .tip{
  background:var(--terracotta-tint); border-left:3px solid var(--terracotta); border-radius:0 8px 8px 0;
  padding:12px 14px; margin:0; display:block;
}
.sample-exp .tip-label{font-size:11px; font-weight:700; color:var(--terracotta-deep); letter-spacing:.08em; margin-bottom:6px; text-transform:uppercase;}
.sample-exp .tip-body{font-size:15.5px; line-height:1.75; color:var(--text-mid);}
/* War Room 상자 — 앱 해설 화면의 청회색 상자와 같은 모양(번개·토픽 한 줄 말줄임·↗·펄스 12초).
   랜딩에서는 로그인 전이라 시트를 열 수 없으므로, 누르면 «로그인 후 볼 수 있다» 모달이 뜬다.
   (옛 테라코타 배지는 2026-08-27 사용자 지시로 앱 확정 디자인에 통일) */
.sample-wr-btn{
  display:flex; align-items:center; gap:8px; width:100%; box-sizing:border-box; min-width:0;
  padding:11px 14px; border-radius:10px; font-size:15px; font-weight:500; line-height:1.45; overflow:hidden;
  font-family:var(--font-sans); cursor:pointer; text-align:left;
  background:#e9eeee; border:1px solid rgba(var(--navy-rgb),.18); color:var(--navy);
  animation:smpWrPulse 12s ease-in-out infinite; -webkit-tap-highlight-color:transparent;
}
.sample-wr-btn:hover{background:var(--navy-light);}
.sample-wr-btn b{font-weight:700;}
.sample-wr-btn .wr-bolt{width:15px; height:15px; flex:none; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
.sample-wr-btn .wr-txt{flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sample-wr-btn .wr-arrow{flex:none; opacity:.7; font-weight:600;}
@keyframes smpWrPulse{0%,100%{border-color:rgba(var(--navy-rgb),.18); box-shadow:0 0 0 0 rgba(var(--navy-mid-rgb),0);}
  50%{border-color:rgba(var(--navy-mid-rgb),.40); box-shadow:0 0 0 2px rgba(var(--navy-mid-rgb),.05),0 0 12px 2px rgba(var(--navy-mid-rgb),.10);}}
/* 2026-10-31 boss: same War Room box as the app explanation screen (app.html .exp-head #exp-topic-badge, final 10-27 design):
   quiet grey box, slow 6s border pulse, a small grey dot in the top-right corner fading in step, no ↗ arrow.
   No prefers-reduced-motion branch, same as the app (Chrome/Edge read that setting differently on one machine). */
.sample-wr-btn{position:relative; background:rgba(0,0,0,.03); border:1px solid var(--border-clr); color:var(--text-mid);
  padding-right:22px; animation:smpWrPulse 6s ease-in-out infinite;}
.sample-wr-btn:hover{background:rgba(0,0,0,.03); border-color:var(--accent); color:var(--navy);}
.sample-wr-btn .wr-arrow{display:none;}
.sample-wr-btn::after{content:""; position:absolute; top:7px; right:7px; width:7px; height:7px; border-radius:50%;
  background:rgba(var(--navy-mid-rgb),.55); animation:smpWrDotFade 6s ease-in-out infinite;}
@keyframes smpWrDotFade{0%,100%{opacity:.08; transform:scale(.15);} 50%{opacity:.85; transform:scale(.9);}}
@keyframes fade{from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:translateY(0);}}

/* ── killer questions section ───────────────────────────── */
.killer-section{
  background:var(--navy);
  padding:88px 0;
  position:relative;
  overflow:hidden;
}
.killer-section::before{
  content:'';
  position:absolute;
  top:-120px; right:-80px;
  width:420px; height:420px;
  border-radius:50%;
  background:rgba(var(--accent-rgb),.07);
  pointer-events:none;
}
.killer-eyebrow{
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); display:block; margin-bottom:10px;
}
.killer-head{
  max-width:680px; margin:0 auto 16px; text-align:center;
}
.killer-head h2{
  font-family:var(--font-serif); color:var(--white); font-weight:700;
  font-size:clamp(26px,4vw,38px); line-height:1.2; letter-spacing:-.02em;
  margin-bottom:14px;
}
.killer-intro{
  font-size:16.5px; line-height:1.75; color:rgba(255,255,255,.68);
  max-width:640px; margin:0 auto 48px; text-align:center;
}
.killer-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
@media (max-width:900px){ .killer-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .killer-grid{grid-template-columns:1fr;} }

.killer-card{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius); padding:28px;
  transition:border-color .15s, background .15s;
  position:relative;
}
.killer-card:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(var(--accent-rgb),.4);
}
.killer-num{
  font-family:var(--font-serif); font-size:36px; font-weight:800;
  color:var(--accent); opacity:.9; line-height:1; margin-bottom:14px;
  display:block;
}
.killer-card h3{
  font-family:var(--font-serif); color:var(--white); font-size:17px;
  font-weight:700; margin-bottom:10px; line-height:1.35; letter-spacing:-.01em;
}
.killer-card p{
  font-size:14px; line-height:1.75; color:rgba(255,255,255,.62);
}
.killer-badge{
  display:inline-block; margin-bottom:12px;
  background:rgba(var(--accent-rgb),.15); color:var(--accent);
  border:1px solid rgba(var(--accent-rgb),.3);
  border-radius:6px; padding:3px 10px; font-size:11px;
  font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
/* 킬러 사진 — 모래주머니 콜아웃 대신 공부하는 사람 사진 (2026-08-27 사용자 결정).
   사용자 정정 2026-08-27: ①사진은 «어두운 배경 안»에 온전히 들어간다(경계 걸침 취소)
   ②그리드 전체 폭은 너무 크다 → 가운데 860px ③모래주머니 캡션 삭제. */
.killer-photo{
  max-width:690px; margin:44px auto 0;   /* 860 → 690 = 20% 축소 (사용자 2026-08-27) */
  border-radius:20px; overflow:hidden;
  box-shadow:0 24px 50px -20px rgba(0,0,0,.5);
}
/* 🔴 크롭 금지(사용자 2026-08-27) — 사진을 원본 프레임 «통째로» 보여 준다. 책상·손이 잘리면 안 된다.
   파일도 원본 전체(2752×1536 → 860/1720w)라 aspect-ratio·object-fit 을 걸지 않는다. */
.killer-photo img{display:block; width:100%; height:auto;}
.killer-encourage{
  margin-top:16px; font-size:13.5px; color:rgba(255,255,255,.45);
  font-style:italic;
}

/* ═══ SMART STUDY MODE (TPIQ) + WAR ROOM 미리보기 ═══════════ */
.tpiq-section{
  background:linear-gradient(180deg, var(--navy-light) 0%, #cde3e1 100%);
  position:relative; overflow:hidden;
}
.tpiq-section::before{
  content:''; position:absolute;
  top:-140px; left:-100px;
  width:380px; height:380px; border-radius:50%;
  background:rgba(var(--accent-rgb),.12);
  pointer-events:none;
}
.tpiq-section::after{
  content:''; position:absolute;
  bottom:-180px; right:-120px;
  width:420px; height:420px; border-radius:50%;
  background:rgba(var(--navy-rgb),.06);
  pointer-events:none;
}
.tpiq-section .sec-head{ position:relative; z-index:1; }
.tpiq-section .eyebrow{ color:var(--accent); }

.tpiq-pill{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:8px;
  padding:6px 14px; border-radius:99px;
  background:rgba(var(--navy-rgb),.06); border:1px solid rgba(var(--navy-rgb),.14);
  font-size:12px; font-weight:600; color:var(--navy-mid);
  letter-spacing:.02em;
}
.tpiq-pill svg{width:14px; height:14px; stroke:var(--accent); fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
.tpiq-pill strong{color:var(--navy); font-weight:800; letter-spacing:.04em;}

/* ── 2열 배치 (2026-08-15) ──────────────────────────────────
   이전에는 이 섹션을 TPIQ 하나가 다 썼다(도표 760×420 + 카드 3장 → 세로 1,000px 넘음).
   같은 자리를 반으로 나눠 왼쪽 = TPIQ(좁은 폭용으로 다시 그린 도표),
   오른쪽 = War Room 실제 화면 미리보기. 900px 이하에서는 위아래로 쌓인다.
   글 배치(2026-08-15 사용자 지시): 두 칸 모두 «큰 라벨(SMART STUDY MODE·WAR ROOM) + 한 문장»
   까지만 둔다. 라벨을 키우고 그 밑 문장을 줄여야 제목처럼 읽힌다. 설명을 더 붙이지 말 것. */
.duo-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
  max-width:1080px; margin:0 auto;
}
@media (max-width:900px){ .duo-grid{grid-template-columns:1fr;} }
.duo-card{
  display:flex; flex-direction:column;
  background:var(--white);
  border:1px solid var(--border-clr);
  border-radius:calc(var(--radius) + 4px);
  padding:36px 30px;
  box-shadow:0 8px 32px rgba(var(--navy-rgb),.06);
}
@media (max-width:600px){ .duo-card{padding:26px 18px;} }
/* 라벨이 제목 노릇을 한다 — 기본 .eyebrow(12px)보다 크게.
   ⚠️ 색은 지정하지 않는다 — 위 `.tpiq-section .eyebrow{color:var(--accent)}` 의
   시폼색을 그대로 쓴다 (2026-08-15 사용자 지시: 네이비로 바꿨더니 이전 색이 나았다). */
.duo-card .eyebrow{
  display:block; margin-bottom:12px;
  font-size:16px; font-weight:800; letter-spacing:.1em;
}
.duo-card > h3{
  font-size:16.5px; font-weight:700; line-height:1.5;
  color:var(--text-mid); margin-bottom:6px;
}

/* ── 왼쪽 · TPIQ ─────────────────────────────────────────── */
/* 도표는 남는 세로 공간의 가운데에 — 오른쪽 War Room 칸이 더 길어서 생기는 여백을 나눠 갖는다. */
.tpiq-mini{margin:auto 0;}
.tpiq-mini svg{width:100%; height:auto; display:block;}

/* ── 오른쪽 · War Room 미리보기 ────────────────────────────
   캡처 사진이 아니라 app.html 의 .wr-sheet/.wr-body 스타일과 라이브 War Room 본문
   C1004(무료 공개 토픽) 본문을 그대로 옮겨 온 것. 그래서 한/영이 전환되고,
   어느 화면 크기에서도 글씨가 선명하며, 이미지 내려받기가 없다.
   ⚠️ app.html 의 War Room 디자인을 고치면 여기도 함께 맞출 것. */
.lpwr-frame{
  margin:18px 0 12px; background:var(--white);
  border:1px solid var(--border-clr); border-radius:14px; overflow:hidden;
  box-shadow:0 6px 18px rgba(var(--navy-rgb),.08);
}
.lpwr-bar{
  display:flex; align-items:center; gap:6px;
  padding:9px 13px; background:#EDF1F2; border-bottom:1px solid var(--border-clr);
}
/* 창 단추 — macOS/iOS 창의 실제 신호등 색 (2026-08-15 사용자 지시: 회색 점은 어정쩡하다) */
.lpwr-bar i{width:10px; height:10px; border-radius:50%; flex:0 0 auto;}
.lpwr-bar i:nth-child(1){background:#FF5F57;}
.lpwr-bar i:nth-child(2){background:#FEBC2E;}
.lpwr-bar i:nth-child(3){background:#28C840;}
.lpwr-bar span{margin-left:8px; font-size:11px; letter-spacing:.02em; color:var(--text-muted);}
/* 앞부분만 보여 주고 아래를 흰색으로 서서히 덮는다 — 앱이 무료 회원에게 쓰는 방식(.wr-peek)과 같다.
   🔴 잠금 박스·[무료로 시작하기] 단추를 여기에 다시 넣지 말 것 (2026-08-15 사용자 지시).
   그냥 흐려지며 끝나는 편이 낫다고 판단하셨다. */
.lpwr-sheet{
  position:relative; height:420px; overflow:hidden;
  padding:18px 20px 0;
  -webkit-user-select:none; user-select:none;
}
.lpwr-sheet::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:150px;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--white) 92%);
  pointer-events:none;
}
@media (max-width:600px){ .lpwr-sheet{height:380px; padding:16px 14px 0;} }
.lpwr-title{
  display:flex; align-items:center; gap:7px;
  font-family:var(--font-serif); font-size:16px; font-weight:800;
  color:var(--text-main); letter-spacing:-.01em; margin-bottom:12px;
}
.lpwr-title svg{
  width:16px; height:16px; flex:0 0 auto;
  stroke:var(--terracotta-deep); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.lpwr-body h4{
  font-family:var(--font-serif); font-size:14px; font-weight:700; color:var(--navy);
  margin:16px 0 8px; padding-bottom:6px; border-bottom:1px solid var(--border-clr);
}
.lpwr-body h4:first-child{margin-top:0;}
.lpwr-body p{font-size:13px; line-height:1.7; color:var(--text-mid); margin-bottom:10px;}
.lpwr-body strong{color:var(--text-main);}
.lpwr-body table{width:100%; border-collapse:collapse; margin:4px 0 12px; font-size:12px;}
.lpwr-body th,.lpwr-body td{
  border:1px solid var(--border-clr); padding:6px 9px;
  text-align:left; vertical-align:top;
}
.lpwr-body th{background:var(--accent-tint); color:var(--navy); font-weight:700; font-size:11.5px;}
.lpwr-body td{color:var(--text-mid);}
.lpwr-body .tip{
  background:var(--terracotta-tint); border-left:3px solid var(--terracotta);
  border-radius:0 8px 8px 0; padding:10px 13px; margin:6px 0 14px;
}
.lpwr-body .tip-label{
  font-size:10px; font-weight:700; color:var(--terracotta-deep);
  letter-spacing:.05em; text-transform:uppercase; margin-bottom:4px;
}
.lpwr-body .tip p{font-size:12.5px; line-height:1.65; margin:0;}
.lpwr-cap{font-size:11.5px; line-height:1.6; color:var(--text-muted); text-align:center;}

/* ── pricing ───────────────────────────────────────────── */
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:1080px; margin:0 auto;}   /* 3 cards: Free, Monthly, 3-Month (boss 2026-10-31) */
@media (max-width:920px){ .price-grid{grid-template-columns:1fr; max-width:460px;} }
.price-card{
  border:1px solid var(--border-clr); border-radius:var(--radius); padding:30px; background:var(--card-bg); display:flex; flex-direction:column;
}
.price-card.featured{border:1.5px solid var(--navy); background:var(--white); position:relative;}
.price-card.monthly{border:1.5px solid var(--navy); background:var(--white);}   /* boss 2026-10-31: outline like the other two */
/* 2026-10-31 boss (Google Workspace pricing): buttons are light with dark text until the card is hovered;
   the hovered card lifts and its button turns solid. Keyboard focus inside a card does the same. */
.price-grid .price-card{transition:box-shadow .18s, transform .18s, border-color .18s;}
.price-grid .price-card .btn{background:var(--white); color:var(--navy); border:1.5px solid var(--navy); box-shadow:none;}
.price-grid .price-card:hover, .price-grid .price-card:focus-within{transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(var(--navy-rgb),.18);}
.price-grid .price-card.pro:hover, .price-grid .price-card.pro:focus-within{box-shadow:0 14px 34px rgba(221,143,117,.30);}
.price-grid .price-card:hover .btn, .price-grid .price-card:focus-within .btn{background:var(--navy); color:var(--white);}
@media (hover:none){ .price-grid .price-card .btn{background:var(--navy); color:var(--white);} }   /* phones: no hover, keep buttons solid */
/* RE pricing in the RE palette (boss 2026-10-31): same layout as EA, blue instead of apricot, RE logo icon for ticks */
body[data-exam="re"] .price-card.pro{border-color:var(--accent); background:var(--white); box-shadow:0 12px 32px rgba(var(--accent-rgb),.18);}   /* boss 10-31: white cards, the blue border carries the emphasis */
body[data-exam="re"] .price-card.pro .price-amount{color:var(--navy-mid);}
body[data-exam="re"] .price-badge{background:var(--accent);}
body[data-exam="re"] .price-grid .price-card.pro:hover, body[data-exam="re"] .price-grid .price-card.pro:focus-within{box-shadow:0 14px 34px rgba(var(--accent-rgb),.30);}
body[data-exam="re"] .price-list li::before{background-image:url(/check-mark-re.png?v=1);}
/* 2026-10-31 boss: Best Value badge blinks (soft ring pulse) */
.price-badge{animation:pxBadgePulse 1.8s ease-out infinite;}
@keyframes pxBadgePulse{0%{box-shadow:0 0 0 0 rgba(221,143,117,.65);}70%{box-shadow:0 0 0 10px rgba(221,143,117,0);}100%{box-shadow:0 0 0 0 rgba(221,143,117,0);}}
body[data-exam="re"] .price-badge{animation-name:pxBadgePulseRe;}
@keyframes pxBadgePulseRe{0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.65);}70%{box-shadow:0 0 0 10px rgba(var(--accent-rgb),0);}100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0);}}


.price-card.featured::before{
  content:attr(data-tag); position:absolute; top:-12px; left:24px;
  background:var(--navy); color:var(--white); font-size:11px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; padding:4px 12px; border-radius:999px;
}
/* Pro(유료) 카드 강조 — 테라코타 액센트 + '가장 인기' 배지 */
.price-card.pro{border:2px solid var(--terracotta); background:var(--terracotta-tint);
  position:relative; box-shadow:0 12px 32px rgba(221,143,117,.20);}
.price-card.pro .price-amount{color:var(--terracotta-deep);}
.price-badge{position:absolute; top:-12px; left:24px;
  background:var(--terracotta); color:#fff; font-size:11px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; padding:4px 12px; border-radius:999px;}
.price-name{font-weight:700; font-size:15px; color:var(--navy-mid); margin-bottom:8px;}
.price-amount{font-family:var(--font-serif); font-size:36px; color:var(--text-main); margin-bottom:6px;}
.price-amount span{font-size:14px; font-family:var(--font-sans); color:var(--text-muted);}
.price-desc{font-size:13.5px; margin-bottom:18px;}
.price-list{list-style:none; display:flex; flex-direction:column; gap:9px; margin-bottom:22px;}
.price-list li{display:flex; gap:9px; align-items:flex-start; font-size:13.5px; color:var(--text-mid);}
.price-list svg{width:16px; height:16px; stroke:var(--success-color); fill:none; stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; margin-top:2px;}
/* 2026-10-31 boss: pricing list ticks = the PracExam logo's brush checkmark (transparent PNG cut from the logo) */
.price-list svg{display:none;}
.price-list li::before{content:""; flex:0 0 auto; width:17px; height:15px; margin-top:2px;
  background:url(/check-mark.png?v=2) center/contain no-repeat;}

/* ── CTA ───────────────────────────────────────────────── */
/* 위쪽 요금제 섹션과 배경이 같아 88+88=176px 이 통째로 빈 공간처럼 보였다.
   마지막 CTA 의 위 여백만 없애 한 섹션 간격(88px)으로 줄임 — 2026-08-06 */
.cta{text-align:center; padding-top:0;}
.cta h2{margin-bottom:14px;}
.cta p{max-width:520px; margin:0 auto 28px;}
.cta-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}

/* ── footer ────────────────────────────────────────────── */
footer{border-top:1px solid var(--border-clr); padding:36px 0; font-size:13px; color:var(--text-muted);}
.footer-inner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;}
.footer-links{display:flex; gap:20px;}
.footer-links a{text-decoration:none; color:var(--text-muted);}
.footer-links a:hover{color:var(--navy);}
.footer-legal{width:100%; margin-top:14px; padding-top:14px; border-top:1px solid var(--border-clr); font-size:12px; line-height:1.7; color:var(--text-muted);}

/* ── footer social (2026-08-06) ────────────────────────── */
.footer-meta{display:flex; align-items:center; gap:20px; flex-wrap:wrap;}
.footer-social{display:flex; align-items:center; gap:4px; padding-left:18px; border-left:1px solid var(--border-clr);}
.social-link{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px;
  border-radius:8px; color:var(--text-muted); transition:background .18s, color .18s;}
.social-link svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;}
.social-link:hover{background:var(--navy-light); color:var(--navy);}
.social-link:focus-visible{outline:2px solid var(--navy); outline-offset:2px;}
/* 향후 YouTube·LinkedIn 확장용 자리 — 마크업 위치만 잡아두고 폭은 0.
   (폭을 주면 보이지 않는 여백이 생겨 아이콘이 왼쪽으로 치우쳐 보인다 — 2026-08-06 수정) */
.social-slot{display:none;}
@media (max-width:640px){
  .footer-inner{justify-content:center; text-align:center;}
  .footer-meta{justify-content:center; gap:12px;}
  .footer-links{flex-wrap:wrap; justify-content:center; gap:12px 18px;}
  .footer-social{padding-left:0; border-left:none;}
}

/* ── about (사업자 정보 고지용 콜로폰 — 강조 최소화 2026-08-06) ── */
#about{padding:28px 0; background:var(--card-bg); border-top:1px solid var(--border-clr);}
.about-strip{max-width:840px; margin:0 auto; text-align:center; color:var(--text-muted);}
.about-strip h2{font-size:13px; font-weight:700; line-height:1.5; margin:0 0 7px; color:var(--text-muted); letter-spacing:.01em;}
/* 🔴 text-wrap:balance — 마지막 줄에 «꼬리»가 남는 것을 막는다(사장님 2026-09-01
   *"애매하게 3줄이 되었습니다. 끝말이 꼬리처럼 3번째 줄에 붙음"*).
   실측 = 97·102·«6»자 → 68·73·64자 로 고르게 나뉜다.
   브라우저가 이 값을 모르면 그냥 지금처럼 흐른다(무장애). 글자는 한 자도 안 바뀐다. */
.about-strip p{font-size:12.5px; line-height:1.7; margin:0 0 9px; text-wrap:balance;}
.about-facts{display:flex; flex-wrap:wrap; justify-content:center; gap:3px 15px; margin:0; font-size:12px; line-height:1.7;}
.about-facts > div{display:flex; gap:5px;}
.about-facts dt{font-weight:600; opacity:.75;}
.about-facts dd{margin:0;}
.about-facts a{color:inherit; text-decoration:none;}
.about-facts a:hover{color:var(--navy); text-decoration:underline;}
@media (max-width:560px){ .about-facts{flex-direction:column; align-items:center; gap:2px;} }

/* ── modal ─────────────────────────────────────────────── */
.modal-bg{
  position:fixed; inset:0; background:rgba(26,32,44,.45); display:none;
  align-items:center; justify-content:center; z-index:100; padding:20px;
}
.modal-bg.open{display:flex;}
.modal{
  background:var(--white); border-radius:16px; padding:28px; max-width:440px; width:100%;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.4);
}
.modal h3{margin-bottom:6px;}
/* 확인 대기 화면의 상태 줄 — 아무 글도 없을 때는 아래 여백까지 없앤다 (2026-08-12) */
#cf-status:empty{display:none;}
.modal p.sub{font-size:13.5px; margin-bottom:18px;}
.modal label{font-size:12px; font-weight:700; color:var(--text-mid); display:block; margin-bottom:6px; margin-top:14px;}
.modal input{
  width:100%; padding:11px 13px; border:1.5px solid var(--border-clr); border-radius:9px;
  font-size:14px; font-family:var(--font-sans); background:var(--card-bg); color:var(--text-main);
}
.modal input:focus{outline:none; border-color:var(--navy-mid);}
.modal .btn{width:100%; margin-top:18px;}

/* ── 비밀번호 [보기] 토글 (2026-08-18) ─────────────────────
   SDSU Global Campus 가입 화면을 참고했다. 오타로 가입이 막히는 일을 줄인다.
   ⚠️ 비밀번호 «규칙» 안내와 Supabase 정책 변경은 하지 않기로 했다(사용자 결정). */
.pw-wrap{position:relative;}
.modal .pw-wrap input{padding-right:66px;}
.pw-toggle{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  border:none; background:none; cursor:pointer;
  font-family:var(--font-sans); font-size:12.5px; font-weight:700; color:var(--navy-mid);
  padding:7px 10px; border-radius:7px;
}
.pw-toggle:hover{background:var(--navy-light); color:var(--navy);}

/* ── 동의 체크박스 (2026-08-18) ────────────────────────────
   🔴 약관(필수)과 마케팅(선택)을 «한 칸으로 묶지 말 것». 필수와 선택을 묶으면
      한국 개인정보보호법상 문제가 되고 동의 자체가 무효로 다뤄질 수 있다.
   ⚠️ .modal label 이 display:block 이라 클래스 하나로는 못 이긴다 → label.su-agree 로 쓴다. */
.modal label.su-agree{
  display:flex; align-items:flex-start; gap:9px;
  margin-top:14px; margin-bottom:0;
  font-size:13px; line-height:1.55; font-weight:400; color:var(--text-mid); cursor:pointer;
}
.modal label.su-agree input{
  width:20px; height:20px; margin-top:0; flex-shrink:0;   /* 16→20px: easier to tap (boss 2026-10-30) */
  accent-color:var(--navy); cursor:pointer;
}
.modal label.su-agree a{color:var(--navy); text-decoration:underline;}
.modal label.su-agree b{font-weight:700;}
.su-consent-note{font-size:11.5px; line-height:1.65; color:var(--text-muted); margin:6px 0 0 29px;}
.su-consent-note a{color:var(--text-muted); text-decoration:underline;}
/* 약관 미동의 상태 — 흐리게 두되 «누를 수는 있게» 한다. 눌렀을 때 왜 안 되는지 알려 줘야 한다
   (disabled 로 막으면 아무 반응이 없어 이유를 모른다). */
.btn.needs-agree{opacity:.55;}
/* ── 유입 경로 선택 상자 (2026-08-07) ─────────────────────
   가입 폼 맨 아래 선택 항목. 질문은 상자 첫 줄에 넣어 라벨 한 줄을 아꼈다.
   ⚠️ line-height 를 px 로 못박은 이유 = 첫 줄만 13px 로 줄여도(아래 .is-empty)
      상자 높이가 다른 입력칸과 어긋나지 않게 하려는 것. 22px ≈ 14px × 1.6. */
.modal select{
  width:100%; padding:11px 34px 11px 13px; margin-top:14px;
  border:1.5px solid var(--border-clr); border-radius:9px;
  font-size:14px; font-family:var(--font-sans); line-height:22px;
  background-color:var(--card-bg); color:var(--text-main);
  appearance:none; -webkit-appearance:none; cursor:pointer; text-overflow:ellipsis;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%234E5C66' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center;
}
.modal select:focus{outline:none; border-color:var(--navy-mid);}
/* 아직 안 고른 상태 = 안내 글이므로 이 창의 다른 안내 글과 같은 13px.
   고르고 나면 다른 입력칸과 같은 14px 로 돌아온다. */
.modal select.is-empty{color:var(--text-muted); font-size:13px;}
#su-ref-other{margin-top:8px; font-size:13.5px; padding:10px 13px;}
.modal-close{
  position:absolute; top:14px; right:14px; background:none; border:none; cursor:pointer;
  width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  color:var(--text-muted);
}
.modal-close:hover{background:var(--navy-light); color:var(--navy);}
.modal-wrap{position:relative;}
.modal-msg{font-size:13px; margin-top:12px; padding:10px 12px; border-radius:8px; display:none;}
.modal-msg.show{display:block;}
.modal-msg.ok{background:rgba(22,163,74,.08); color:var(--success-color);}
.modal-msg.err{background:rgba(220,38,38,.08); color:var(--danger-color);}
.modal-switch{font-size:13px; text-align:center; margin-top:14px; color:var(--text-muted);}
.modal-switch button{background:none; border:none; color:var(--navy); font-weight:700; cursor:pointer; font-family:var(--font-sans); font-size:13px;}
/* 🔴 스크롤 막대 자리를 늘 잡아 둔다 — 긴 화면·짧은 화면을 오갈 때 가운데 정렬이
   통째로 밀리는 것을 막는다 (2026-08-23 사용자 지적). */
html{scrollbar-gutter:stable;}
@supports not (scrollbar-gutter:stable){ html{overflow-y:scroll;} }
/* 🔴 머리줄 높이를 못 박는다 — 글꼴이 늦게 뜨면 대체 글꼴이 커서 한 번 출렁인다
   (사용자: "로고가 계속 움직임"). 로고도 가로 크기를 적어 두었다. */
@media(min-width:861px){ .nav-inner{height:57px; box-sizing:border-box;} }