/* Account pages (login, signup, profile, delete). Builds on site.css (prototype V.login / V.join);
   replaces the prototype's inline styles. Colours come from tokens.css only. */

.page-head-end{height:44px}

/* Entrance: side panel + forms */
.auth-side .seed{color:var(--yellow)}
.auth-side .eyebrow{color:var(--on-deep-2)}
.auth-side .side-text{margin-top:14px;color:var(--on-deep-2);max-width:24em}
.auth-panel{display:grid;gap:18px;align-content:start;padding:clamp(22px,4vw,36px)}
.auth-panel form.form{padding:0;background:none}
.social form{display:grid}
.social button{width:100%}
.social-pending{padding:12px 14px;border-radius:14px;background:var(--sunk)}
.auth-narrow{max-width:40rem}
/* minmax(0,1fr), not the implicit auto track: an unbreakable e-mail address would size the
   column to its own width and push the page sideways at 360px (TZ-03, MP-08). */
.stack{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-content:start;min-width:0}
.account-summary dd,.break-any{overflow-wrap:anywhere}

/* Form pieces */
.pick.pick-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.form-title,.box-title{font-size:1.4rem}
.link-strong{font-weight:600;color:var(--ink)}
/* Small links between consent check boxes (이용약관, 개인정보처리방침) and the password-reset
   hint: a 44px row each, never pulled up against the check box label above (R5-MT-04, R5-MT-07). */
.help-link{display:inline-flex;align-items:center;min-height:var(--target-min)}
.field .help ul{margin:4px 0 0;padding-left:1.2em}
.cat.cat-pending{background:var(--yellow-soft);color:var(--yellow-ink)}

/* Profile and delete */
.account-links{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.account-links a{display:inline-flex;align-items:center;min-height:var(--target-min);font-weight:600}
/* 회원 탈퇴 stands apart from the everyday links above it (R5-MT-03). */
.account-links .account-links-end{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.effects{margin:0;padding-left:1.2em;display:grid;gap:8px;color:var(--ink-2)}
.end-sessions{display:grid;gap:8px;justify-items:start;margin-top:6px;padding-top:12px;border-top:1px solid var(--line)}
.under14{margin-top:-6px}

/* Two member-type cards side by side down to ~340px (tighter padding); one column below
   that or at the largest text size. */
@media (max-width:560px){
  .pick.pick-2 .o{padding:12px}
}
@media (max-width:340px){
  .pick.pick-2{grid-template-columns:1fr}
}
:root[data-font-scale="xlarge"] .pick.pick-2{grid-template-columns:1fr}

/* Unified login mode switch (D1): the prototype's .seg, with buttons + aria-pressed */
.login-mode{display:flex}
.login-mode .seg{width:100%}
/* Below 260px the two buttons stack instead of splitting their words. */
@media (max-width:259.98px){
  .login-mode .seg{flex-wrap:wrap;border-radius:22px}
  .login-mode .seg button{flex-basis:100%}
}
.seg button{flex:1;padding:8px 20px;border:0;border-radius:999px;background:none;color:var(--ink-2);font:inherit;font-weight:600;cursor:pointer;min-height:44px;touch-action:manipulation}
/* Selected: raised pill + 2px ink ring + ✓ (the surface/sunk difference alone is ~1.1:1,
   and none at all in high contrast). */
.seg button{transition:transform var(--dur-ui) var(--ease-out)}
.seg button:active{transform:scale(.97)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink),0 2px 8px -3px var(--shadow)}
.seg button[aria-pressed="true"]::before{content:"✓";content:"✓" / "";margin-right:6px}
.seg button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.staff-note{display:grid;gap:6px;padding:14px 18px;border-radius:14px;background:var(--sunk);color:var(--ink-2);font-size:.92rem}
.staff-note-title{font-weight:700;color:var(--ink)}
[hidden]{display:none!important}

/* Password with "보기" toggle */
.pw-wrap{position:relative;display:flex;align-items:center}
.pw-wrap input{padding-right:5.5em}
.pw-toggle{position:absolute;right:6px;min-height:var(--target-min);min-width:var(--target-min);transition:transform var(--dur-ui) var(--ease-out);padding:6px 12px;border:1.5px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;font-size:.9375rem;font-weight:600;cursor:pointer;touch-action:manipulation}
.pw-toggle[data-shown]{background:var(--yellow-soft);border-color:var(--ink)}
.pw-toggle:active{transform:scale(.97)}
.pw-toggle:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* Checkbox lists and consents (D5–D7) */
/* Checkbox chips (contact preferences): real checkboxes in wrapping 44px pills; the
   chosen ones get an ink border and tint, so state is not colour alone. */
.checks{display:flex;flex-wrap:wrap;gap:8px}
.checks .check{align-items:center;gap:8px;min-height:var(--target-min);padding:6px 14px 6px 12px;border:1.5px solid var(--line);border-radius:999px;background:var(--surface);font-size:.94rem}
.checks .check input{margin-top:0;width:18px;height:18px}
.checks .check:has(input:checked){border-color:var(--ink);background:var(--yellow-soft);box-shadow:inset 0 0 0 1px var(--ink)}
/* The ring moves from the box to the whole chip only where :has() exists; an engine without
   it (Firefox 115 ESR) keeps the box's own ring instead of showing none (R4-XB-05). */
@supports selector(:has(*)){
  .checks .check:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
  .checks .check input:focus-visible{outline:none}
}
/* Login: "로그인 상태 유지" and "비밀번호 찾기" share one row (prototype). */
.login-extras{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;margin-top:-6px}
.login-extras .field{gap:0}
.login-extras .help{font-size:.82rem}
.login-reset{margin-left:auto;display:inline-flex;align-items:center;min-height:var(--target-min);font-size:.9rem;color:var(--ink-2);text-underline-offset:3px}
.consents{display:grid;gap:6px;padding:10px 16px 12px;border:1px solid var(--line);border-radius:18px}
.consents-title{font-weight:700;padding:0 4px}
.renew{display:grid;gap:8px;margin-top:6px}
.renew form{display:grid;gap:8px;justify-items:start}
.inline-action{margin-top:6px}


/* Short signup (auth-legal-design.md §3, §6) */
/* Password pair: side by side on desktop (.row2); its one help line sits under both. */
.pw-help{margin-top:-6px}
/* "비밀번호 (8자 이상)": the rule is part of the label, read with the name (MA-04). */
.label-hint{font-weight:400;color:var(--ink-2)}
/* The short signup sits closer to the heading, with tighter field spacing, so its button
   stays within the height budget (design §6). */
.auth-wrap-short .auth-panel{padding-block:clamp(20px,2.5vw,24px)}
.auth-wrap-short .auth-panel form.form{gap:10px}
/* Entrance head band (login, signup): no ghost word and less padding, so the form starts
   in the first screen; the page h1 names the page (design §6, ux-bench auth.md §2). */
.page-head--entrance .wrap{padding-block:clamp(20px,3vw,32px) 0}
.page-head--entrance h1{margin-top:0;font-size:clamp(1.8rem,3vw,2.4rem)}
.page-head--entrance .page-head-end{height:20px}
.page-head--entrance .ghost-t{display:none}
.page.page-short{padding-top:16px}
/* Phones: the side panel goes; the h1 already says what the page is, so the first field
   is in the first screen (login fits one screen).
   MA-04: the entrance form is the page. No card around it (the wrap already
   gives the 16px gutter), a tighter head band, the consents unboxed (their legend stays
   for screen readers: the group still has its name) and label gap 4 (form gap 10 above), so
   the signup button sits about one screen down instead of 1.25. */
@media (max-width:640px){
  .auth-wrap-short .auth-side{display:none}
  .page-head--entrance .wrap{padding-block:12px 0}
  .page-head--entrance h1{font-size:1.6rem}
  .page-head--entrance .page-head-end{height:12px}
  .page.page-short{padding-top:12px}
  .auth-wrap-short{border:0;border-radius:0;background:none;overflow:visible}
  .auth-wrap-short .auth-panel{padding:0;gap:12px}
  .auth-wrap-short .field{gap:4px}
  .auth-wrap-short :is(.consents,.phone-group){padding:0;border:0;border-radius:0}
  /* Unboxed, the phone group's own box keeps a divider from "전체 동의" below it. */
  .auth-wrap-short .phone-group{padding-bottom:10px;border-bottom:1px solid var(--line)}
  .auth-wrap-short .consents-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  /* The keyboard covers half the screen: while a field has focus the header scrolls away
     with the page instead of covering the field that is being typed in (WCAG 2.4.11).
     Same position (sticky -> relative keeps its place in the flow), so nothing jumps. */
  body:has(.auth-panel :is(input,select,textarea):focus) header.site{position:relative}
}
/* Consents: "전체 동의" on top, then one row per confirmation with its "보기". */
.consent-all{padding-bottom:8px;border-bottom:1px solid var(--line)}
.consent-all .check > span{font-weight:700}
.consent-rows{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.consent-row{gap:2px}
/* The optional row: a divider like the one under 전체 동의, inside the same list (no extra margins). */
.consent-row-optional{padding-top:2px;border-top:1px solid var(--line)}
.consent-line{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap}
.consent-line .check{flex:1 1 14em;min-width:0}
/* The collection notice sentence above the submit button (no checkbox; design §3.3): an
   inline opener inside the sentence (WCAG 2.5.8 inline exception), a link without JS and
   a button with JS (site.js copies the class), both looking like a link. */
/* Read with the block above it: 10px from the box instead of the form's 18px gap
   (6px in the short signup, whose gap is 10). */
.consent-notice{margin:-8px 4px 0}
.auth-wrap-short .consent-notice{margin-top:-4px}
.notice-opener{display:inline;padding:0;border:0;background:none;font:inherit;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.notice-opener:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.consent-tag{font-weight:700;margin-right:2px}
.consent-tag-req{color:var(--danger)}
.consent-tag-opt{color:var(--muted)}
.consent-optional{padding:12px 14px;border:1px solid var(--line);border-radius:14px}
/* The optional phone number (ADR-0017 decision 12): one group like the consents block. Its
   legend names the group for screen readers only (the field's own label says the same on
   screen); the notice runs in small print between the field and its own box, one line of
   flowing text per item (dt then dd), so the signup grows as little as it can, in
   reading size (16 px: the notice is what the reader agrees to, ADR-0017 decision 13). */
.phone-group{display:grid;gap:8px;padding:10px 16px 12px;border:1px solid var(--line);border-radius:18px}
.phone-group-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.phone-notice dl{margin:0;font-size:1rem;line-height:1.6;color:var(--ink-2)}
.phone-notice dt{display:inline;font-weight:700;color:var(--ink)}
.phone-notice dt::after{content:" · ";content:" · " / "";font-weight:400}
.phone-notice dd{display:inline;margin:0}
.phone-notice dd::after{content:"";display:block}
.form-actions{display:flex;flex-wrap:wrap;gap:10px}
.form-actions .btn{flex:1 1 12em}
.consent-document .doc-body{max-width:44em}
.consent-document-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:24px}
.consent-document-links a{display:inline-flex;align-items:center;min-height:var(--target-min)}

/* Review fixes (auth-legal-design §3.5–3.6) */
/* Welcome: the first-screen "건너뛰기" next to the lead (its own small form). */
.welcome-skip{margin-top:12px;position:relative}
/* Signup closed while the terms or the privacy policy are not final. */
.signup-closed{display:grid;gap:8px}
.renew-notice{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:.92rem}