/* Optional account UI (2026-10-14). Scoped to #account-button and .account-*; reuses the dark glass dialog. */
/* Header button: sits immediately left of the language pill without changing the header grid. */
body header.site-header { --account-offset:108px; }
body .site-header #account-button.header-account {
  position:absolute; top:0; right:var(--account-offset); z-index:2;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:44px; min-width:44px; padding:0 14px; margin:0;
  border:1px solid var(--surface-line); border-radius:var(--r-pill);
  background:rgba(8,11,16,.68); color:var(--text);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  font:600 11px 'DM Sans','Noto Sans KR',sans-serif; white-space:nowrap; cursor:pointer;
}
body .site-header #account-button.header-account:focus-visible { color:var(--gold); border-color:var(--gold); }
/* Hover only where a real pointer hovers: on touch a tap left the pill lit after its dialog closed (edge-interactions-50). */
@media (hover:hover) and (pointer:fine) { body .site-header #account-button.header-account:hover { color:var(--gold); border-color:var(--gold); } }
body .site-header #account-button .account-icon { width:15px; height:15px; flex:none; }
/* Late session reply (after the reveal): ease the button in rather than popping. Opacity only, so it composites. */
body .site-header #account-button.header-account.account-arriving { animation:account-arrive 520ms cubic-bezier(.22,.61,.36,1) both; }
@keyframes account-arrive { from { opacity:0; } to { opacity:1; } }
@media not all { body .site-header #account-button.header-account.account-arriving { animation-duration:240ms; } }
body .site-header #account-button.signed-in { border-color:color-mix(in srgb,var(--mint) 45%,var(--surface-line)); }
body .site-header #account-button.signed-in .account-icon { color:var(--mint); }
@media (max-width:1100px) {
  body header.site-header { --account-offset:52px; }
  body .site-header #account-button.header-account { width:44px; min-width:44px; padding:0; }
  body .site-header #account-button .account-button-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}

/* Dialog content. */
body #dialog .account-dialog { display:grid; gap:14px; }
body #dialog .account-dialog > * { margin:0; }
body #dialog .account-dialog h2 { margin:0; }
body #dialog .account-dialog h3 { margin:0 0 8px; font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--text); }
body #dialog .account-note { font-size:11.5px; line-height:1.7; color:var(--muted); margin:0; }
body #dialog .account-status { min-height:1em; margin:0; font-size:12px; line-height:1.6; color:var(--gold); }
body #dialog .account-status:empty { display:none; }
body #dialog .account-link { display:inline; min-height:0; padding:0; border:0; background:none; color:var(--gold); font:inherit; font-size:inherit; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
body #dialog .account-wide { width:100%; }
body #dialog .account-check { display:flex; align-items:flex-start; gap:10px; font-size:12.5px; line-height:1.6; color:var(--text); cursor:pointer; }
body #dialog .account-check input[type="checkbox"] { flex:none; width:18px; height:18px; min-height:0; margin:2px 0 0; padding:0; accent-color:var(--gold); }
body #dialog .account-privacy summary { cursor:pointer; font-size:12px; color:var(--muted); }
body #dialog .account-privacy-list { display:grid; gap:10px; margin:10px 0 0; }
body #dialog .account-privacy-list div { display:grid; gap:2px; }
body #dialog .account-privacy-list dt { font-size:11px; font-weight:600; color:var(--text); }
body #dialog .account-privacy-list dd { margin:0; font-size:11.5px; line-height:1.7; color:var(--muted); }

/* Provider buttons follow each brand's colour rules; logos are inline SVG. */
body #dialog .account-provider {
  position:relative; display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; min-height:44px; padding:0 44px; border:1px solid transparent; border-radius:10px;
  font:600 14px 'DM Sans','Noto Sans KR',sans-serif; cursor:pointer;
}
body #dialog .account-provider .account-logo { position:absolute; left:14px; width:18px; height:18px; }
body #dialog .account-provider small { position:absolute; right:12px; font-size:10px; font-weight:500; opacity:.8; }
body #dialog .account-provider-kakao { background:#FEE500; color:rgba(0,0,0,.85); }
body #dialog .account-provider-naver { background:#03C75A; color:#fff; }
body #dialog .account-provider-google { background:#fff; color:#1f1f1f; border-color:#747775; }
body #dialog .account-provider:disabled,body #dialog .account-email button:disabled,body #dialog .account-dev button:disabled { opacity:.45; cursor:not-allowed; }
@media (hover:hover){body #dialog .account-provider:not(:disabled):hover{ filter:brightness(.96); }}
body #dialog .account-email,body #dialog .account-dev { display:grid; gap:8px; margin:0; padding:12px 14px; border:1px solid var(--surface-line); border-radius:12px; background:rgba(4,8,14,.35); }
body #dialog .account-email label,body #dialog .account-dev-title { display:flex; align-items:center; gap:8px; margin:0; font-size:12.5px; font-weight:600; color:var(--text); }
body #dialog .account-email label small,body #dialog .account-dev-title small { margin-left:auto; font-size:10px; font-weight:500; color:var(--muted); }
body #dialog .account-email .account-logo,body #dialog .account-dev .account-logo { width:17px; height:17px; color:var(--gold); }
body #dialog .account-dev-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr)); gap:8px; }

/* Account panel. */
body #dialog .account-section { display:grid; gap:10px; padding-top:14px; border-top:1px solid var(--surface-line); }
body #dialog .account-section > * { margin:0; }
body #dialog .account-section > h3 { margin:0; }
body #dialog .account-section > button { justify-self:start; }
body #dialog .account-identities { list-style:none; margin:0; padding:0; display:grid; gap:4px; font-size:13px; color:var(--text); }
body #dialog .account-email-mask { color:var(--muted); font-variant-numeric:tabular-nums; }
body #dialog .account-plan { font-size:11px; color:var(--muted); letter-spacing:.04em; }
body #dialog .account-sync-state { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0; font-size:12.5px; color:var(--text); }
body #dialog .account-dot { width:7px; height:7px; border-radius:50%; background:var(--muted); flex:none; }
body #dialog .account-sync-synced .account-dot { background:var(--mint); }
body #dialog .account-sync-saving .account-dot { background:var(--gold); }
body #dialog :is(.account-sync-error,.account-sync-conflict) .account-dot { background:#f08a7e; }
body #dialog .account-diff { margin:0; padding-left:18px; font-size:12.5px; line-height:1.8; color:var(--text); }
body #dialog .account-actions { display:flex; flex-wrap:wrap; gap:10px; }
body #dialog .account-actions > button { flex:1 1 160px; min-height:44px; }
body #dialog .account-spending-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:8px; }
body #dialog .account-spending-summary > div { display:grid; gap:2px; padding:10px 12px; border:1px solid var(--surface-line); border-radius:10px; background:rgba(4,8,14,.35); }
body #dialog .account-spending-summary span { font-size:11px; color:var(--muted); }
body #dialog .account-spending-summary strong { font-size:18px; color:var(--gold); font-variant-numeric:tabular-nums; }
body #dialog .account-spending-summary small { font-size:10.5px; color:var(--muted); }
body #dialog .account-spending-form { display:grid; gap:10px; margin:0; }
body #dialog .account-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr)); gap:8px 10px; }
body #dialog .account-grid label { display:grid; gap:4px; margin:0; font-size:11px; color:var(--muted); }
body #dialog .account-grid label[hidden] { display:none; }
body #dialog .account-grid .account-grid-wide { grid-column:1/-1; }
body #dialog .account-grid :is(input,select) { width:100%; height:44px; margin:0; padding:0 10px; font-size:max(var(--field-fs-floor,0px),13px); }
body #dialog .account-spending-list ul { list-style:none; margin:0 0 10px; padding:0; display:grid; gap:6px; }
body #dialog .account-entry { display:flex; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid var(--surface-line); border-radius:10px; background:rgba(4,8,14,.25); }
body #dialog .account-entry-main { display:grid; gap:2px; min-width:0; }
body #dialog .account-entry-main strong { font-size:13px; color:var(--text); }
body #dialog .account-entry-main span,body #dialog .account-entry-main small { font-size:11px; color:var(--muted); }
body #dialog .account-entry-side { display:grid; justify-items:end; align-content:start; gap:4px; flex:none; text-align:right; }
body #dialog .account-entry-side b { font-size:13px; font-variant-numeric:tabular-nums; color:var(--text); }
body #dialog .account-entry-side .account-link { font-size:11px; }
body #dialog .account-confirm { display:flex; gap:10px; }
body #dialog .account-danger-text { color:#f08a7e; }
body #dialog .account-danger { color:#f3a196; border-color:#f08a7e66!important; }
body #dialog .account-danger-fill { background:#e0796c!important; color:#17191c!important; }
body #dialog .account-danger-fill:disabled { opacity:.45; cursor:not-allowed; }
body #dialog .account-delete { display:grid; gap:10px; padding:12px 14px; border:1px solid #f08a7e55; border-radius:12px; }
body #dialog .account-delete p { margin:0; font-size:12.5px; }
body #dialog .account-logout { gap:12px; }

@media (max-width:520px) {
  body #dialog .account-section > button { justify-self:stretch; min-height:44px; }
  body #dialog .account-entry { flex-direction:column; gap:6px; }
  body #dialog .account-entry-side { justify-items:start; text-align:left; grid-auto-flow:column; align-items:center; justify-content:space-between; }
}

/* Sign-in view (2026-10-16): the same warm black glass frame, radius, serif heading, eyebrow and close button as every other dialog
   (it was a separate neutral-grey card with a white primary button). Only the width is narrower. */
body #dialog:has(.account-signin) { width:min(420px,calc(100% - 24px)); }
body #dialog .auth { display:grid; gap:0; font-family:'DM Sans','Noto Sans KR',sans-serif; color:var(--text); }
body #dialog .auth .eyebrow { margin:0 0 8px; }
body #dialog .auth h2 { margin:0 0 8px; padding-right:44px; }
body #dialog .auth .auth-sub { margin:0 0 22px; font-size:13px; line-height:1.7; color:var(--muted); }
body #dialog .auth .auth-providers { display:grid; gap:10px; }
body #dialog .auth .auth-btn {
  position:relative; display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  height:44px; min-height:44px; margin:0; padding:0 18px; border:1px solid var(--surface-line); border-radius:var(--r-pill);
  background:var(--surface-inset); color:var(--text); font:500 14px 'DM Sans','Noto Sans KR',sans-serif; letter-spacing:0;
  box-shadow:none; filter:none; text-transform:none; cursor:pointer; transition:background-color 200ms ease,border-color 200ms ease,color 200ms ease;
}
@media (hover:hover){body #dialog .auth .auth-btn:not(:disabled):hover{ background:var(--surface-hover); border-color:rgba(223,207,170,.45); }}
body #dialog .auth .auth-btn:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
body #dialog .auth .auth-btn:disabled { opacity:.5; cursor:default; }
body #dialog .auth .auth-btn .account-logo { position:static; width:18px; height:18px; flex:none; }
body #dialog .auth .account-provider-naver .account-logo { width:14px; height:14px; padding:2px; box-sizing:content-box; background:#03C75A; border-radius:3px; }
body #dialog .auth .account-provider-kakao .account-logo { width:14px; height:14px; padding:2px; box-sizing:content-box; background:#FEE500; border-radius:3px; }
body #dialog .auth .auth-btn-primary { background:var(--gold); border-color:var(--gold); color:#17191c; font-weight:600; }
@media (hover:hover){body #dialog .auth .auth-btn-primary:not(:disabled):hover{ background:#ead9b4; border-color:#ead9b4; }}
body #dialog .auth .auth-or { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; margin:12px 0; font-size:10px; letter-spacing:.14em; color:var(--muted); }
body #dialog .auth .auth-or::before,body #dialog .auth .auth-or::after { content:""; border-top:1px solid var(--surface-line); }
body #dialog .auth .auth-email { display:grid; gap:10px; margin:0; }
body #dialog .auth .auth-email input {
  width:100%; height:44px; min-height:44px; margin:0; padding:0 16px; border:1px solid var(--surface-line); border-radius:var(--r-sm);
  background:rgba(4,8,14,.48); color:var(--text); font:400 14px 'DM Sans','Noto Sans KR',sans-serif; font-size:max(var(--field-fs-floor,0px),14px); box-shadow:none;
}
body #dialog .auth .auth-email input::placeholder { color:#8d9097; }
body #dialog .auth .auth-email input:focus { outline:none; border-color:rgba(223,207,170,.55); }
body #dialog .auth .auth-email input:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
body #dialog .auth .auth-status:empty { display:none; }
body #dialog .auth .auth-status,body #dialog .auth .auth-note { margin:0; font-size:12.5px; line-height:1.6; color:var(--muted); }
body #dialog .auth .auth-legal { margin:20px 0 0; padding-top:16px; border-top:1px solid var(--surface-line); font-size:11.5px; line-height:1.7; color:var(--muted); }
body #dialog .auth .auth-link { display:inline; margin:0; padding:0; min-height:0; border:0; background:none; color:var(--gold); font:inherit; text-decoration:underline; text-decoration-color:rgba(223,207,170,.4); text-underline-offset:3px; cursor:pointer; }
@media (hover:hover){body #dialog .auth .auth-link:hover{ text-decoration-color:var(--gold); }}
body #dialog .auth .auth-privacy { margin:10px 0 0; font-size:12px; color:var(--muted); }
body #dialog .auth .auth-privacy:not([open]) { display:none; }
body #dialog .auth .auth-privacy summary { cursor:pointer; color:var(--text); margin-bottom:8px; }
body #dialog .auth .account-dev { margin-top:12px; }

/* Header: a plain "Log in" text button while signed out (it was an icon only below 1100px, and hidden until a sign-in method had keys). */
body .site-header #account-button.header-account:not(.signed-in) { padding:0 16px; font:500 13px 'DM Sans','Noto Sans KR',sans-serif; letter-spacing:0; }
/* Hover and focus stay the gold of every other header pill (header-account:hover above; a white variant here differed from the language pill beside it). */
@media (max-width:1100px) {
  body .site-header #account-button.header-account:not(.signed-in) { width:auto; min-width:0; padding:0 14px; }
  body .site-header #account-button.header-account:not(.signed-in) .account-button-label { position:static; width:auto; height:auto; overflow:visible; clip:auto; }
}

/* While the sign-in options load: two calm blocks of the same height, never the full button set (no jump when the real list arrives). */
body #dialog .auth .auth-skeleton { display:grid; gap:10px; align-content:start; }
/* The rows reserve the exact height (44 px button rows and the real OR row, same gaps as the list). The usual list (~40 ms) replaces
   them while they are still transparent; only a slow network sees them: after 400 ms they fade in as quiet outlines of the real
   controls in the same places (button, OR rule, field, button) with a soft sheen, so a slow load never shows an unexplained gap. */
body #dialog .auth .auth-skeleton > * { animation:account-skeleton-in 320ms ease 400ms both; }
body #dialog .auth .auth-skeleton .auth-or span { visibility:hidden; }
body #dialog .auth .auth-skeleton .auth-skeleton-row {
  display:block; height:44px; box-sizing:border-box; border:1px solid var(--surface-line); border-radius:var(--r-pill);
  background:linear-gradient(100deg,transparent 35%,rgba(237,235,228,.06) 50%,transparent 65%) 100% 0/250% 100% no-repeat var(--surface-inset);
  animation:account-skeleton-in 320ms ease 400ms both,account-skeleton-sheen 1.8s ease-in-out 720ms infinite;
}
body #dialog .auth .auth-skeleton .auth-or + .auth-skeleton-row { border-radius:var(--r-sm); }
@keyframes account-skeleton-in { from { opacity:0; } to { opacity:1; } }
@keyframes account-skeleton-sheen { from { background-position:100% 0; } to { background-position:0 0; } }
@media not all {
  body #dialog .auth .auth-skeleton .auth-skeleton-row { animation:account-skeleton-in 320ms ease 400ms both; }
}