/* Authentication uses the approved Playground surfaces; it does not replace the main layout. */
.account-page{margin:0;min-height:100dvh;background:#eef1f6;color:#273447;font:calc(16px * var(--pg-ts,1))/1.5 Arial,"PG Hangul","Apple SD Gothic Neo",sans-serif;padding:max(32px,env(safe-area-inset-top)) 24px max(32px,env(safe-area-inset-bottom))}
.account-home{color:#425bc7;text-decoration:none;font:600 calc(16px * var(--pg-ts,1))/1.5 Arial,"PG Hangul",sans-serif}.account-page .account-shell{max-width:440px;margin:6vh auto;padding:32px;border:1px solid #fff;border-radius:24px;background:rgba(247,249,253,.9);box-shadow:0 16px 48px #26385812}
.auth-dialog{padding:0!important;width:min(440px,calc(100vw - 48px));max-width:440px;max-height:calc(100dvh - 64px);border-radius:24px;border:1px solid rgba(255,255,255,.9);background:rgba(245,248,253,.86);color:#273447;box-shadow:0 20px 64px #172c492e;backdrop-filter:blur(24px) saturate(115%);-webkit-backdrop-filter:blur(24px) saturate(115%);overflow:auto}
.auth-dialog::backdrop{background:rgba(25,37,57,.24);backdrop-filter:blur(6px)}.auth-dialog .account-shell{padding:30px 32px}
.account-shell{--auth-text:#273447;--auth-muted:#65748b;--auth-border:#cdd6e5;color:var(--auth-text);font:calc(15px * var(--pg-ts,1))/1.5 Arial,"PG Hangul","Apple SD Gothic Neo",sans-serif;box-sizing:border-box;text-align:left}
.account-shell *, .account-shell *::before,.account-shell *::after{box-sizing:border-box}.account-shell [hidden]{display:none!important}
.auth-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.auth-brand{display:flex;align-items:center;gap:10px;font-size:calc(19px * var(--pg-ts,1));font-weight:700;color:var(--auth-text);text-decoration:none}.auth-mark{display:grid;place-items:center;width:34px;height:34px;background:#354ee7;color:white;border-radius:9px;font-size:calc(25px * var(--pg-ts,1));line-height:1}.auth-close{display:grid;place-items:center;min-width:44px;min-height:44px;padding:0!important;border:0!important;background:none!important;color:var(--auth-muted);font-size:calc(28px * var(--pg-ts,1))!important;cursor:pointer}
.account-shell h1{font-size:calc(27px * var(--pg-ts,1));line-height:1.3;letter-spacing:-.6px;margin:25px 0 8px;font-weight:700}.auth-description{margin:0 0 24px;color:var(--auth-muted);font-size:calc(14px * var(--pg-ts,1));line-height:1.65}.auth-tabs{display:flex;gap:0;border-bottom:1px solid var(--auth-border);margin-bottom:24px}.auth-tabs button{flex:1;background:none!important;border:0!important;border-radius:0!important;padding:13px 8px!important;min-height:48px;color:var(--auth-muted);font-weight:600;font-size:calc(15px * var(--pg-ts,1))!important;cursor:pointer}.auth-tabs button[aria-pressed=true]{box-shadow:inset 0 -2px #4054df;color:var(--pg-accent)}
.account-shell label:not(.auth-check){display:block;margin:0 0 18px;font-size:calc(13px * var(--pg-ts,1));font-weight:600}.account-shell input:not([type=checkbox]){display:block;width:100%;margin-top:8px;padding:15px 16px;min-height:52px;border:1px solid var(--auth-border);border-radius:12px;background:rgba(255,255,255,.8);color:var(--auth-text);font:calc(16px * var(--pg-ts,1))/1.4 Arial,"PG Hangul","Apple SD Gothic Neo",sans-serif;box-shadow:none}.account-shell input::placeholder{color:#8a95a6}.account-shell small{display:block;color:var(--auth-muted);font-size:calc(12px * var(--pg-ts,1));font-weight:400;margin-top:7px;line-height:1.5}.auth-primary,.auth-secondary{display:flex!important;justify-content:center;align-items:center;gap:8px;width:100%;min-height:52px;border-radius:12px;padding:14px 18px!important;font:600 calc(15px * var(--pg-ts,1))/1.5 Arial,"PG Hangul","Apple SD Gothic Neo",sans-serif;text-decoration:none;cursor:pointer}.auth-primary{border:0!important;background:var(--pg-btn-bg)!important;color:var(--pg-btn-fg)!important}.auth-secondary{border:1px solid var(--auth-border)!important;background:transparent!important;color:var(--auth-text)!important;margin-top:12px}.account-shell button:disabled{opacity:.6;cursor:wait}.account-shell :focus-visible{outline:3px solid #8d9df4;outline-offset:3px}.auth-subactions{display:flex;justify-content:flex-end;margin-top:15px}.auth-subactions button,.auth-policy-link{border:0;background:none!important;color:var(--pg-accent);font-size:calc(13px * var(--pg-ts,1));padding:5px;cursor:pointer}.auth-divider{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--auth-muted);font-size:calc(12px * var(--pg-ts,1))}.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--auth-border)}.auth-google{display:grid;place-items:center;min-height:44px}.auth-google-unavailable{display:flex;align-items:center;justify-content:center;gap:12px;border:1px solid var(--auth-border);border-radius:12px;width:100%;min-height:50px;background:rgba(255,255,255,.75);color:var(--auth-text);font:600 calc(14px * var(--pg-ts,1)) Arial,"PG Hangul",sans-serif;cursor:pointer}.auth-google-logo{font-size:calc(20px * var(--pg-ts,1));color:#4285f4;font-weight:700}.auth-status{color:#a13838;font-size:calc(13px * var(--pg-ts,1));line-height:1.6;margin:16px 0 0}.auth-status:empty{display:none}.auth-step{display:flex;gap:8px;font-size:calc(12px * var(--pg-ts,1));color:var(--auth-muted);margin:0 0 20px}.auth-step b{color:#425bd2}.auth-check{display:flex;align-items:flex-start;gap:9px;font-size:calc(13px * var(--pg-ts,1));line-height:1.6;margin:16px 0}.auth-check input{margin:5px 0 0;width:16px;height:16px;accent-color:#4054df;flex:none}.auth-policy{max-height:160px;overflow:auto;color:var(--auth-muted);font-size:calc(13px * var(--pg-ts,1));padding:14px;background:#eef1f8;border-radius:12px;margin:8px 0 16px}.auth-policy h3{font-size:calc(14px * var(--pg-ts,1));margin:0 0 8px}.auth-policy p{margin:6px 0}
.auth-avatar-preview{display:flex;align-items:center;gap:16px;margin:20px 0}.auth-avatar-preview>img{width:64px;height:64px;object-fit:contain;image-rendering:pixelated}.auth-avatar-preview button{background:none;border:1px solid var(--auth-border);border-radius:10px;min-height:44px;padding:9px 13px;color:var(--auth-text);cursor:pointer}.auth-avatar-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;max-height:210px;overflow:auto;margin-bottom:12px}.auth-avatar-grid button{padding:4px;border:1px solid transparent;border-radius:10px;background:#e8edf4;aspect-ratio:1;cursor:pointer}.auth-avatar-grid img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.auth-avatar-grid [aria-pressed=true]{border-color:#4054df;background:#dce3ff}.auth-avatar-pages{display:flex;justify-content:space-between;align-items:center;font-size:calc(12px * var(--pg-ts,1));margin-bottom:16px}.auth-avatar-pages button{min-width:44px;min-height:40px;border:1px solid var(--auth-border);border-radius:8px;color:var(--auth-text);background:transparent;cursor:pointer}
.auth-entry-icon{display:block;width:23px;height:23px}.me.auth-entry{display:grid!important;place-items:center;background:none!important;border:0!important;box-shadow:none!important;color:var(--surface-text,#283647);min-width:44px;min-height:44px;border-radius:12px;cursor:pointer}.me.auth-entry .human-pixel-avatar{display:none!important}.profile-cloud-account{cursor:pointer}
body.dark .account-shell{--auth-text:#eef3fc;--auth-muted:#b4c0d4;--auth-border:#59667c}body.dark .auth-dialog{background:rgba(32,43,61,.88);border-color:#78849a88;color:#eef3fc}body.dark .account-shell input:not([type=checkbox]),body.dark .auth-google-unavailable{background:#26354bd9}body.dark .auth-policy,body.dark .auth-avatar-grid button{background:#2c3a51}body.dark .auth-avatar-grid [aria-pressed=true]{background:#4a557d}
/* 2026-10-03 Claude: the sign-in window is centred in both directions at any window size. Wider than 600px it is the glass card;
   phones get a full screen whose content sits in the middle when it fits and scrolls from the top when it does not.
   The phone-screen styles (≤700px) give dialog content 22px side margins — the account window keeps its own centring. */
html body dialog.auth-dialog>.account-shell{margin-left:auto;margin-right:auto}.auth-dialog .account-shell:focus{outline:none}.auth-dialog .phone-screen-bar{display:none!important}
@media(min-width:601px){html body dialog.auth-dialog>.account-shell{margin-left:0!important;margin-right:0!important}}
@media(max-width:600px){.auth-dialog{width:100vw!important;max-width:none!important;height:100dvh!important;max-height:100dvh!important;margin:0!important;border:0!important;border-radius:0!important;background:#f1f4fa!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important}html body dialog.auth-dialog[open]{display:flex;flex-direction:column;overflow-y:auto}html body dialog.auth-dialog>.account-shell{flex:none;width:100%;max-width:480px;margin:auto!important;padding:calc(22px + env(safe-area-inset-top)) 24px calc(32px + env(safe-area-inset-bottom))}.account-shell h1{font-size:calc(25px * var(--pg-ts,1))}.account-page .account-shell{padding:24px 0;margin:32px auto;border:0;background:none;box-shadow:none}body.dark .auth-dialog{background:#1c293c!important}}
@media(prefers-reduced-transparency:reduce){.auth-dialog{background:#f4f7fc;backdrop-filter:none}body.dark .auth-dialog{background:#202b3d}}
/* 2026-10-04 Claude: the character note and 'Customize character' instead of the face picker */
.auth-character{display:flex;align-items:center;gap:12px;margin:16px 0;flex-wrap:wrap}.auth-character img{height:64px;width:auto;max-width:72px;object-fit:contain;image-rendering:pixelated;flex:none}   /* 원형 금지: the character as it is */.auth-character p{margin:0;flex:1;min-width:180px;font-size:calc(13px * var(--pg-ts,1));line-height:1.5;color:var(--auth-muted,#55647a)}.auth-character button[data-auth-character]{min-height:40px;padding:0 16px;border-radius:12px;border:0;background:var(--pg-btn-bg,#1f2329);color:var(--pg-btn-fg,#fff);font-weight:700;cursor:pointer}
/* 2026-10-08 Claude: one start screen — Google, then a folded 'existing ID' sign-in (account.js) */
.account-shell .auth-google{margin:26px 0 0;min-height:44px;display:flex;justify-content:center}
.account-shell .auth-google-note{margin:10px 0 0;text-align:center;font-size:calc(12.5px * var(--pg-ts,1));color:#6b7488}
.account-shell details.auth-legacy{margin:22px 0 0;border-top:1px solid rgba(120,132,156,.22);padding-top:14px}
.account-shell details.auth-legacy>summary{cursor:pointer;list-style:none;text-align:center;font-size:calc(12.5px * var(--pg-ts,1));font-weight:600;color:#6b7488;padding:4px 0;user-select:none}
.account-shell details.auth-legacy>summary::-webkit-details-marker{display:none}
.account-shell details.auth-legacy>summary::after{content:' ›';display:inline-block;transition:transform .15s}
.account-shell details.auth-legacy[open]>summary::after{transform:rotate(90deg)}
.account-shell details.auth-legacy>form{margin-top:14px}
.dark .account-shell .auth-google-note,.dark .account-shell details.auth-legacy>summary{color:#9aa6bb}
/* 2026-10-31 Claude (서버 4단계 B3): 약관 재동의 창의 바뀐 점 목록 */
.account-shell .auth-terms-points{margin:0 0 6px;padding:14px 16px 14px 32px;background:#eef1f8;border-radius:12px;color:var(--auth-text);font-size:calc(13.5px * var(--pg-ts,1));line-height:1.65}
.account-shell .auth-terms-points li+li{margin-top:6px}
.account-shell .auth-terms-points a{color:var(--pg-accent)}
body.dark .account-shell .auth-terms-points{background:#2c3a51}