/* ── hidden 은 언제나 이긴다 ─────────────────────────────────────────
   브라우저 기본은 [hidden]{display:none} 인데, 우리가 쓴 .field{display:flex}
   같은 규칙이 **그것을 이긴다**(작성자 CSS > 기본 CSS). 그래서 hidden 을 붙여
   두고도 안 감춰지는 일이 난다 — 실제로 탈퇴 창에서 소셜 계정에 비밀번호
   칸이 그대로 보였다.

   .alert[hidden] · .nav .who[hidden] 처럼 한 곳씩 막아 온 흔적이 있는데,
   그건 다음에 또 밟는다. 여기서 한 번에 막는다. */
[hidden]{display:none !important}

/* 계정 화면 공통 스타일 — 가입·로그인·비밀번호·마이페이지가 함께 쓴다.
   토큰과 컴포넌트는 DESIGN.md 를 따른다. 여기에만 있는 색을 만들지 않는다.

   왜 파일 하나로 두는가. 다른 페이지들은 <style> 을 통째로 복붙하는데,
   그 탓에 word-break:keep-all 이 일부 페이지에만 있어 한글이 낱말 한가운데서
   갈렸던 적이 있다(2026-08-26 수정). 고지문은 build_legal_pages.py 가
   legal.css 를 인라인해 원천이 하나지만, 손으로 쓰는 이 여섯 장은 그 장치가
   없다. 여섯 벌을 두면 같은 사고가 반복된다. */

:root{
  --ink:#0B1A21;
  --ink-2:#3D5560;
  --ink-3:#6E858F;
  --line:#DBE4E7;
  --line-2:#EDF2F3;
  --bg:#FFFFFF;
  --bg-2:#F4F8F8;
  --bg-3:#E8F0F1;
  --brand:#0C6B70;
  --brand-d:#084C50;
  --ok:#1B7A4C;
  --warn:#A96A0E;
  --ng:#B2342A;
  --sans:'IBM Plex Sans KR',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono','IBM Plex Sans KR',monospace;
}
*{box-sizing:border-box}
/* 700 은 싣지 않는다(DESIGN.md §3) — 가짜 굵게를 막는다 */
b,strong{font-weight:600}
h1,h2,h3,h4{text-wrap:balance;margin:0}
p{text-wrap:pretty;margin:0}

html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);font-weight:400;color:var(--ink);background:var(--bg);
  line-height:1.7;-webkit-font-smoothing:antialiased;
  word-break:keep-all;overflow-wrap:break-word;
  display:flex;flex-direction:column;min-height:100vh}
.wrap{max-width:1600px;margin:0 auto;padding:0 40px;width:100%}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
a{color:inherit}
button{font-family:inherit}

/* ── 차림표 — 다른 페이지와 같은 모양 ───────────────────────────────── */
.nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:34px;height:62px}
.logo{font-family:var(--mono);font-weight:600;font-size:19px;letter-spacing:.13em;
  text-decoration:none;cursor:pointer}
.logo i{font-style:normal;color:var(--brand)}
.nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;font-size:14px;color:var(--ink-2)}
.nav a{text-decoration:none}
.nav a:hover{color:var(--brand)}
.nav .right{margin-left:auto;display:flex;align-items:center;gap:16px}
/* 로그인 상태는 JS 가 채운다. 채워지기 전에는 자리를 비워 둔다 —
   "로그인" 이 잠깐 보였다가 "마이페이지" 로 바뀌면 깜빡임이 된다. */
.nav .who{font-size:14px;color:var(--ink-2)}
.nav .who[hidden]{display:none}
@media(max-width:880px){.nav ul{display:none}}

/* ── 단추 ───────────────────────────────────────────────────────────── */
.btn{display:inline-block;border:1px solid var(--brand);background:var(--brand);color:#fff;
  padding:9px 18px;font-size:14px;font-weight:500;border-radius:3px;text-decoration:none;
  cursor:pointer;text-align:center}
.btn:hover{background:var(--brand-d);border-color:var(--brand-d)}
.btn:disabled{opacity:.45;cursor:default}
.btn.ghost{background:transparent;color:var(--brand)}
.btn.ghost:hover{background:var(--bg-3);color:var(--brand-d)}
.btn.wide{display:block;width:100%;padding:11px 18px;font-size:15px}
.btn.danger{border-color:var(--line);background:transparent;color:var(--ng);
  padding:5px 12px;font-size:13px}
.btn.danger:hover{background:var(--ng);border-color:var(--ng);color:#fff}

/* ── 가운데 놓인 카드 — 로그인·가입·비밀번호가 쓴다 ─────────────────── */
main{flex:1 0 auto}
.center{display:flex;justify-content:center;padding:72px 20px 96px}
.card{width:100%;max-width:420px}
.card h1{font-size:26px;font-weight:600;letter-spacing:-.025em;margin-bottom:10px}
.card .sub{font-size:14.5px;color:var(--ink-2);margin-bottom:28px}
.card .foot{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);
  font-size:14px;color:var(--ink-2);text-align:center}
.card .foot a{color:var(--brand);text-decoration:none}
.card .foot a:hover{text-decoration:underline}

/* ── 입력 ───────────────────────────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-size:13.5px;color:var(--ink-2);font-weight:500}
.field input{font-family:inherit;font-size:15px;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:3px;padding:10px 12px;width:100%}
.field input:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand)}
.field input[aria-invalid="true"]{border-color:var(--ng)}
.field .hint{font-size:12.5px;color:var(--ink-3)}
.field .hint.bad{color:var(--ng)}

/* 폼 전체에 걸리는 오류. 서버가 준 message 를 그대로 넣는다 —
   화면이 문구를 다시 짓지 않는다(API 계약 01절). */
.alert{border:1px solid var(--ng);border-radius:3px;padding:11px 13px;
  font-size:14px;color:var(--ng);margin-bottom:18px}
.alert.ok{border-color:var(--ok);color:var(--ok)}
.alert[hidden]{display:none}

/* ── 약관 동의 단계 ─────────────────────────────────────────────────── */
/* 끝까지 굴려야 동의가 열린다. 읽지 않고 누르는 것을 막지는 못하지만,
   적어도 한 번은 스쳐 가게 한다. */
.terms{border:1px solid var(--line);border-radius:4px;background:#fff;
  height:340px;overflow-y:auto;padding:20px 22px;font-size:14px;color:var(--ink-2);
  line-height:1.75}
.terms h3{font-size:15.5px;font-weight:600;color:var(--ink);margin:0 0 8px}
.terms h3 + p{margin-bottom:18px}
.terms hr{border:0;border-top:1px solid var(--line-2);margin:22px 0}
.terms .end{margin-top:22px;padding-top:14px;border-top:1px solid var(--line-2);
  font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.terms a{color:var(--brand)}
.scrollnote{font-size:12.5px;color:var(--ink-3);margin-top:8px}
.scrollnote.done{color:var(--ok)}

/* 동의 항목 하나 — 약관과 방침을 따로 세운다.
   한 상자에 둘을 넣으면 "두 가지에 동의합니다" 한 줄이 되는데, 그러면
   무엇에 동의했는지 나중에 갈라 말할 수 없다. DB 는 이미 둘을 따로
   두고 있었는데 화면만 하나로 묶고 있었다. */
.consent{border:1px solid var(--line);border-radius:5px;background:var(--bg-2);
  padding:16px 16px 18px;margin-top:20px}
.consent + .consent{margin-top:16px}
.chead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:11px}
.chead h2{font-size:15.5px;font-weight:600;letter-spacing:-.01em;margin:0}
.cstate{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-3);
  border:1px solid currentColor;border-radius:2px;padding:1px 7px;white-space:nowrap}
.cstate.done{color:var(--ok)}
.consent .terms{height:260px}
.consent .agree{margin-top:14px}

.agree{display:flex;gap:10px;align-items:flex-start;margin-top:20px;
  font-size:14px;color:var(--ink-2);cursor:pointer}
.agree input{width:auto;margin-top:4px;flex:0 0 auto}
.agree.off{opacity:.45;cursor:default}
.agree b{color:var(--ink);font-weight:500}
.agree .req{color:var(--ng);font-size:12.5px}

/* ── 인증 코드 ──────────────────────────────────────────────────────── */
.code-in{font-family:var(--mono);font-size:30px;font-weight:600;text-align:center;
  letter-spacing:.42em;text-indent:.42em;padding:14px 12px;width:100%;
  border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--ink);
  font-variant-numeric:tabular-nums}
.code-in:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand)}
.code-in[aria-invalid="true"]{border-color:var(--ng)}
.countdown{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);
  text-align:center;margin-top:10px;font-variant-numeric:tabular-nums}
.countdown.out{color:var(--ng)}

/* ── 소셜 단추 — 서버가 준 목록대로 그린다 ──────────────────────────── */
.social{display:flex;flex-direction:column;gap:9px}
.social a{display:block;border:1px solid var(--line);border-radius:3px;
  padding:11px 16px;font-size:14.5px;font-weight:500;color:var(--ink);
  text-decoration:none;text-align:center;background:#fff}
.social a:hover{border-color:var(--ink-3);background:var(--bg-2)}
/* 아직 못 쓰는 것도 보여준다 — 다만 왜 안 되는지 붙인다.
   이유 없는 회색 단추는 고장으로 읽힌다. */
.social .off{display:flex;justify-content:space-between;align-items:center;gap:10px;
  border:1px solid var(--line-2);border-radius:3px;padding:11px 16px;
  font-size:14.5px;font-weight:500;color:var(--ink-3);background:var(--bg-2);
  cursor:default}
.social .off .why{font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  border:1px solid currentColor;border-radius:2px;padding:1px 7px}
.divider{display:flex;align-items:center;gap:14px;margin:22px 0;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--ink-3)}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}

/* ── 마이페이지 ─────────────────────────────────────────────────────── */
.page-head{padding:56px 0 8px}
.page-head h1{font-size:clamp(23px,3vw,32px);font-weight:600;letter-spacing:-.025em}
.page-head p{font-size:15px;color:var(--ink-2);margin-top:8px}
.panels{display:flex;flex-direction:column;gap:28px;padding:32px 0 88px}
.panel{border:1px solid var(--line);border-radius:5px;background:#fff;overflow:hidden}
.panel > header{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:16px 20px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.panel > header h2{font-size:15.5px;font-weight:600}
.panel > header .note{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.panel .body{padding:20px}
.panel .body > p{font-size:14.5px;color:var(--ink-2)}

/* 값을 줄줄이 놓는 자리 */
.rows{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:14px;
  align-items:baseline;padding:13px 0;border-top:1px solid var(--line-2)}
.row:first-child{border-top:0;padding-top:0}
.row .k{font-size:13.5px;color:var(--ink-3)}
.row .v{font-size:14.5px;word-break:break-all}
@media(max-width:640px){
  .row{grid-template-columns:1fr;gap:3px}
  .row .k{font-size:12.5px}
}

/* 상태 배지 — DESIGN.md §5.6 */
.state{font-family:var(--mono);font-size:11px;padding:2px 8px;border-radius:2px;
  white-space:nowrap;border:1px solid currentColor}
.s-ok{color:var(--ok)}
.s-wait{color:var(--warn)}
.s-off{color:var(--ink-3)}

/* 새로 낸 토큰 — 이 화면을 벗어나면 다시 못 본다 */
.reveal{border:1px solid var(--ok);border-radius:4px;padding:16px 18px;margin-bottom:20px}
.reveal .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  color:var(--ink-3);margin-bottom:8px}
.reveal .val{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.reveal code{font-family:var(--mono);font-size:13px;color:var(--ink);
  background:var(--bg-2);border:1px solid var(--line);border-radius:3px;
  padding:7px 10px;word-break:break-all;flex:1 1 240px}
.reveal .warn{font-size:13px;color:var(--warn);margin-top:10px}
.reveal[hidden]{display:none}

/* 비어 있을 때는 사과하지 않고 다음 행동을 알려준다(DESIGN.md §9) */
.empty{font-size:14.5px;color:var(--ink-3);padding:6px 0 2px}

/* ── 바닥글 ─────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding:30px 0 56px;flex-shrink:0}
footer .wrap{display:flex;flex-wrap:wrap;gap:14px 32px;align-items:baseline;
  font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
footer a{color:var(--brand);text-decoration:none}
footer a:hover{text-decoration:underline}
.fmeta{display:flex;gap:18px;flex-wrap:wrap}
.flegal{display:flex;gap:18px;flex-wrap:wrap;margin-left:auto}
.fnote{flex:1 0 100%;margin:6px 0 0;font-family:var(--sans);font-size:12px;
  color:var(--ink-3);line-height:1.7}
@media(max-width:760px){
  .flegal{margin-left:0}
  .wrap{padding:0 20px}
  .center{padding:44px 20px 64px}
  .page-head{padding:36px 0 4px}
  .panels{padding:24px 0 56px}
}

a:focus-visible,button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}

/* ── 되돌릴 수 없는 자리 ─────────────────────────────────────────────
   빨강은 여기서만 쓴다. 아껴 써야 눈에 띈다. */
.panel.danger{border-color:var(--ng)}
.panel.danger > header{background:#FCF3F2;border-bottom-color:var(--ng)}
.panel.danger > header h2{color:var(--ng)}
.panel.danger > header .note{color:var(--ng)}
/* .btn.danger 가 뒤에 있어 padding 을 이기므로 둘을 함께 잡는다 */
.btn.danger.wide{display:block;width:100%;padding:11px 18px;font-size:15px}

/* ── 페이지 사이를 옮겨 다닐 때 ─────────────────────────────────────
   같은 Optra 안에서 움직이는 느낌이 나야 한다. 차림표와 바닥글에 이름을
   주면 브라우저가 그 둘을 "같은 것" 으로 알아보고 그대로 둔 채 본문만
   바꾼다. 지원하지 않는 브라우저는 예전처럼 그냥 넘어간다 — 깨지지 않는다. */
@view-transition{navigation:auto}
.nav{view-transition-name:optra-nav}
footer{view-transition-name:optra-foot}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}
@media(prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ── 되돌릴 수 없는 일을 묻는 창 ─────────────────────────────────────
   브라우저 기본 confirm 을 쓰지 않는다. 꾸밀 수 없고 화면마다 모양이
   달라, 무게가 실려야 하는 물음에 안 맞는다.

   빨강은 이 창과 위험 패널에서만 쓴다. 아껴야 눈에 띈다. */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;
  justify-content:center;padding:20px;background:rgba(11,26,33,.5);
  backdrop-filter:blur(2px)}
.modal[hidden]{display:none}
.sheet{width:100%;max-width:420px;background:#fff;border-radius:6px;
  border:1px solid var(--line);padding:26px 26px 22px;
  box-shadow:0 24px 60px -20px rgba(11,26,33,.4)}
.sheet h3{margin:0 0 10px;font-size:19px;font-weight:600;letter-spacing:-.02em;color:var(--ng)}
.sheet .lead{font-size:14.5px;color:var(--ink-2);margin:0 0 20px}
.sheet .field{margin-bottom:0}
.sheet .alert{margin-bottom:16px}
/* 단추는 오른쪽에. 무거운 쪽이 바깥이라 손이 먼저 닿지 않는다. */
.sheet .acts{display:flex;gap:9px;justify-content:flex-end;margin-top:22px}
.sheet .acts .btn{padding:9px 16px}
.sheet .btn.danger{border-color:var(--ng);background:var(--ng);color:#fff;font-size:14px}
.sheet .btn.danger:hover{background:#8E2A22;border-color:#8E2A22}
.sheet .btn.danger:disabled{opacity:.4}
.sheet .code-in{font-size:26px}
@media(max-width:480px){
  .sheet{padding:22px 20px 18px}
  .sheet .acts{flex-direction:column-reverse}
  .sheet .acts .btn{width:100%}
}

/* 확인 번호 — 입력칸과 단추를 한 줄에.
   위아래로 늘어놓으면 "번호를 받는 것" 과 "번호를 넣는 것" 이 따로 보인다.
   한 줄이면 한 가지 일이다. */
.coderow{display:flex;gap:9px;align-items:stretch}
.coderow .code-in{flex:1 1 auto;min-width:0;font-size:24px;letter-spacing:.3em;
  text-indent:.3em;padding:11px 10px}
.coderow .code-in:disabled{background:var(--bg-2);color:var(--ink-3)}
.coderow .code-in::placeholder{color:var(--line);letter-spacing:.3em}
.coderow .btn{flex:0 0 auto;white-space:nowrap;padding:0 16px;font-size:14px}
.sheet .countdown{margin-top:9px}
@media(max-width:420px){
  .coderow{flex-direction:column}
  .coderow .btn{width:100%;padding:10px 16px}
}

/* 곁들이는 설명 한 줄 — 자리 이름 아래 붙는다. */
.panel .hint{font-size:12.5px;color:var(--ink-3)}