/* 로그인 · 세션 화면(login.html · account.html 이 같이 써요).
   아래 토큰 세 덩어리(:root · 다크 두 덩어리)는 index.html 과 같은 값을 그대로 옮겨요 — tests/ui_audit.js 가 같은지 확인해요. 고칠 때는 index.html 과 함께. */
:root{
--bg:#f3f4f7;
--surface:#ffffff;
--surface-2:#f7f8fa;
--surface-3:#eef0f3;
--border:#e8eaee;
--border-strong:#c9ced6;
--divider:#eff1f4;
--text:#111418;
--muted:#667085;
--muted-tint:#545b6a;
--faint:#9aa2b0;
--primary:#1f3a64;
--primary-hover:#24467a;
--primary-press:#1a3255;
--on-primary:#ffffff;
--accent:#2456b3;
--accent-weak:#eaf0f8;
--on-accent:#ffffff;
--focus-ring:color-mix(in srgb,#2456b3 22%,transparent);
--up:#e5383b;
--down:#2a6fdb;
--up-text:#cc2b2e;
--down-text:#2563c9;
--up-weak:#fdeded;
--down-weak:#eaf1fd;
--ok:#10794f;
--ok-weak:#e1f4ea;
--fut-long:#12a150;
--fut-short:#e03131;
--warn:#9c5d00;
--warn-weak:#fff3dd;
--warn-dot:#e09a1a;
--danger:#cc2b2e;
--danger-fg:#ffffff;
--grid:#eef0f3;
--axis:#c9ced6;
--tip-bg:rgba(17,20,24,.95);
--tip-text:#ffffff;
--overlay:rgba(12,14,18,.40);
--edge-shade:rgba(17,20,24,.16);
--s-strategy:#2a62d6;
--s-bench-1:#8a94a6;
--s-bench-2:#5f9e8c;
--s-bench-3:#c39233;
--s-bench-4:#b07ca0;
--c1:#3a6fd8;
--c2:#e07b53;
--c3:#2f9d7b;
--c4:#d2a13b;
--c5:#c06a96;
--sh-1:0 1px 2px rgba(17,20,24,.04),0 2px 8px rgba(17,20,24,.04);
--sh-2:0 8px 24px rgba(17,20,24,.12);
--sh-3:0 24px 48px -12px rgba(17,20,24,.25);
--sh-bar:0 -8px 24px rgba(17,20,24,.06);
--sh-focus:0 0 0 3px var(--focus-ring);
--sh-mark:inset 3px 0 0 var(--accent);
--sh-col:inset -1px 0 0 var(--border);
--sh-ring:inset 0 0 0 1px var(--accent);
--font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR","Segoe UI",sans-serif;
--mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
--fs-xs:12px;
--fs-sm:13px;
--fs-md:14px;
--fs-lg:16px;
--fs-xl:20px;
--fs-num-lead:40px;
--fs-num-md:28px;
--fs-num-sm:18px;
--fs-mono:13px;
--sp-1:4px;
--sp-2:8px;
--sp-3:12px;
--sp-4:16px;
--sp-5:20px;
--sp-6:24px;
--sp-8:32px;
--sp-10:40px;
--gap-field:6px;
--r-xs:4px;
--r-sm:6px;
--r-md:10px;
--r-lg:14px;
--r-xl:18px;
--r-pill:999px;
--h-sm:32px;
--h-md:36px;
--h-lg:48px;
--h-code:56px;
--chart-main:340px;
--chart-half:240px;
--chart-bars:280px;
--dur-1:120ms;
--dur-2:180ms;
--dur-3:240ms;
--ease:cubic-bezier(.2,.7,.2,1);
--ease-in:cubic-bezier(.4,0,1,1);
--hdr:112px;
color-scheme:light;
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
--bg:#0e1116;
--surface:#14171d;
--surface-2:#1a1e25;
--surface-3:#222731;
--border:#252a33;
--border-strong:#3a414d;
--divider:#1e232b;
--text:#eceef2;
--muted:#8d95a5;
--muted-tint:#8d95a5;
--faint:#626a79;
--primary:#3563c4;
--primary-hover:#3d6fd6;
--primary-press:#2f59b0;
--on-primary:#ffffff;
--accent:#8fb0ff;
--accent-weak:#18233a;
--on-accent:#0e1420;
--focus-ring:color-mix(in srgb,#8fb0ff 28%,transparent);
--up:#ff6166;
--down:#5c9dff;
--up-text:#ff6166;
--down-text:#5c9dff;
--up-weak:#2c1618;
--down-weak:#14213a;
--ok:#3cc48e;
--ok-weak:#11291f;
--fut-long:#3cc48e;
--fut-short:#ff6b6b;
--warn:#e3a53c;
--warn-weak:#2a2112;
--warn-dot:#e3a53c;
--danger:#d9363c;
--danger-fg:#ffffff;
--grid:#1f242c;
--axis:#3a414d;
--tip-bg:rgba(236,238,242,.97);
--tip-text:#111418;
--overlay:rgba(0,0,0,.60);
--edge-shade:rgba(0,0,0,.50);
--s-strategy:#7aa2ff;
--s-bench-1:#8d96a8;
--s-bench-2:#5fb3a1;
--s-bench-3:#d9ab4f;
--s-bench-4:#c79bbd;
--c1:#6f9cf5;
--c2:#e88c66;
--c3:#4fb995;
--c4:#ddb055;
--c5:#d384ad;
--sh-1:inset 0 1px 0 rgba(255,255,255,.03);
--sh-2:0 8px 24px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.04);
--sh-3:0 24px 64px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.05);
--sh-bar:0 -8px 24px rgba(0,0,0,.5);
color-scheme:dark;
}
}
:root[data-theme="dark"]{
--bg:#0e1116;
--surface:#14171d;
--surface-2:#1a1e25;
--surface-3:#222731;
--border:#252a33;
--border-strong:#3a414d;
--divider:#1e232b;
--text:#eceef2;
--muted:#8d95a5;
--muted-tint:#8d95a5;
--faint:#626a79;
--primary:#3563c4;
--primary-hover:#3d6fd6;
--primary-press:#2f59b0;
--on-primary:#ffffff;
--accent:#8fb0ff;
--accent-weak:#18233a;
--on-accent:#0e1420;
--focus-ring:color-mix(in srgb,#8fb0ff 28%,transparent);
--up:#ff6166;
--down:#5c9dff;
--up-text:#ff6166;
--down-text:#5c9dff;
--up-weak:#2c1618;
--down-weak:#14213a;
--ok:#3cc48e;
--ok-weak:#11291f;
--fut-long:#3cc48e;
--fut-short:#ff6b6b;
--warn:#e3a53c;
--warn-weak:#2a2112;
--warn-dot:#e3a53c;
--danger:#d9363c;
--danger-fg:#ffffff;
--grid:#1f242c;
--axis:#3a414d;
--tip-bg:rgba(236,238,242,.97);
--tip-text:#111418;
--overlay:rgba(0,0,0,.60);
--edge-shade:rgba(0,0,0,.50);
--s-strategy:#7aa2ff;
--s-bench-1:#8d96a8;
--s-bench-2:#5fb3a1;
--s-bench-3:#d9ab4f;
--s-bench-4:#c79bbd;
--c1:#6f9cf5;
--c2:#e88c66;
--c3:#4fb995;
--c4:#ddb055;
--c5:#d384ad;
--sh-1:inset 0 1px 0 rgba(255,255,255,.03);
--sh-2:0 8px 24px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.04);
--sh-3:0 24px 64px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.05);
--sh-bar:0 -8px 24px rgba(0,0,0,.5);
color-scheme:dark;
}
@media (max-width:560px){:root{--fs-num-lead:34px;--fs-num-md:22px;--fs-num-sm:16px}}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font:var(--fs-md)/1.55 var(--font);-webkit-font-smoothing:antialiased}
.wrap{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--sp-8) var(--sp-4)}
.card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--sh-2);padding:var(--sp-8) var(--sp-6) var(--sp-6)}
.eyebrow{margin:0 0 var(--sp-1);color:var(--muted);font-size:var(--fs-xs);letter-spacing:.02em}
h1{margin:0 0 var(--sp-1);font-size:var(--fs-xl);font-weight:600;letter-spacing:-.01em}
.lede{margin:0 0 var(--sp-5);color:var(--muted);font-size:var(--fs-sm)}
.field{display:flex;flex-direction:column;gap:var(--gap-field);margin-bottom:var(--sp-4)}
label{font-size:var(--fs-sm);font-weight:500}
input[type="password"],input[type="text"]{width:100%;height:var(--h-lg);padding:0 var(--sp-3);border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--surface);color:var(--text);font:inherit;font-size:var(--fs-lg);outline:none;transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
@media (hover:hover){input:hover{border-color:var(--muted)}}
input:focus{border-color:var(--accent);box-shadow:var(--sh-focus)}
#code,#rec{font-family:var(--mono);letter-spacing:.12em}
.hint{margin:0;color:var(--muted);font-size:var(--fs-xs)}
.msg{min-height:20px;margin:var(--sp-1) 0 var(--sp-3);font-size:var(--fs-sm);color:var(--up-text)}
.msg.ok{color:var(--ok)}
.msg.warn{color:var(--warn)}
.btn{display:flex;align-items:center;justify-content:center;width:100%;height:var(--h-lg);padding:0 var(--sp-5);border:1px solid transparent;border-radius:var(--r-md);font:inherit;font-size:var(--fs-lg);font-weight:600;cursor:pointer;text-decoration:none;transition:background-color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.btn.primary{background:var(--primary);color:var(--on-primary)}
@media (hover:hover){.btn.primary:hover{background:var(--primary-hover)}}
.btn.primary:active{background:var(--primary-press)}
.btn.secondary{margin-top:var(--sp-3);background:var(--surface);border-color:var(--border-strong);color:var(--text)}
@media (hover:hover){.btn.secondary:hover{border-color:var(--muted)}}
.btn.secondary:active{background:var(--surface-3)}
.btn[disabled]{background:var(--surface-2);border-color:var(--border);color:var(--faint);cursor:progress}
.btn:focus-visible,.link:focus-visible{outline:2px solid var(--accent);outline-offset:2px;box-shadow:var(--sh-focus)}
.link{display:block;margin:var(--sp-4) auto 0;padding:var(--sp-1);border:0;background:none;color:var(--muted);font:inherit;font-size:var(--fs-xs);text-decoration:underline;cursor:pointer}
.foot{max-width:400px;margin:var(--sp-4) 0 0;color:var(--muted);font-size:var(--fs-xs);text-align:center}
code{font-family:var(--mono);font-size:var(--fs-xs);background:var(--surface-2);border:1px solid var(--border);padding:0 4px;border-radius:var(--r-xs)}
[hidden]{display:none !important}
/* 세션 화면(account.html) 표 = DataTable(13px · 행 40 · 셀 10/12 · 행 사이 구분선) */
.table-wrap{margin:0 0 var(--sp-4);overflow-x:auto}
table.data{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
table.data th,table.data td{height:40px;padding:10px 12px;border-bottom:1px solid var(--divider);text-align:left;vertical-align:middle}
table.data tr:last-child th,table.data tr:last-child td{border-bottom:0}
table.data th{font-size:var(--fs-xs);font-weight:500;color:var(--muted);white-space:nowrap;padding-left:0}
table.data td{font-variant-numeric:tabular-nums;word-break:break-all;padding-right:0}
#sid{font-family:var(--mono);font-size:var(--fs-xs)}
/* 손가락 화면: 글자 버튼도 누르는 높이 40px */
@media (pointer:coarse){.link{min-height:40px;padding:10px 4px}}
@media (prefers-reduced-motion:reduce){input,.btn{transition:none}}
/* ---- 가입 화면(join.html · join.js) · 계정 화면의 손님 관리(account.html #guestAdmin · guests.js) — 지인 공유(2026-10-19).
   위 토큰만 쓴다(새 색 없음). 표(table.data)는 계정 표 4행 전용이라 손님 목록은 목록(ul.ga-list)으로 그린다 ---- */
.card+.card{margin-top:var(--sp-4)}
h2{margin:0 0 var(--sp-1);font-size:var(--fs-lg);font-weight:600;letter-spacing:-.01em}
h3{margin:var(--sp-6) 0 var(--sp-2);font-size:var(--fs-md);font-weight:600}
.center{text-align:center}
#guestNote{margin-top:var(--sp-4)}
.hint.warn{color:var(--warn)}
input[readonly]{background:var(--surface-2);color:var(--muted-tint)}
.note{margin:0 0 var(--sp-4);padding:var(--sp-3);border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-2);color:var(--muted-tint);font-size:var(--fs-sm)}
.note.warn{border-color:var(--warn-dot);background:var(--warn-weak);color:var(--text)}
.steps{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);margin:var(--sp-3) 0 var(--sp-2);padding:0;list-style:none;counter-reset:st;font-size:var(--fs-xs);color:var(--faint)}
.steps li{counter-increment:st;display:flex;align-items:center;gap:6px}
.steps li::before{content:counter(st);display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:1px solid var(--border-strong);border-radius:50%;font-weight:600}
.steps li[aria-current="step"]{color:var(--text);font-weight:600}
.steps li[aria-current="step"]::before{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.steps li.done{color:var(--muted)}
.steps li.done::before{content:"✓";border-color:var(--ok);color:var(--ok)}
.qr-box{display:flex;justify-content:center;margin:var(--sp-3) 0}
.qr-box svg{display:block;width:208px;height:208px;max-width:100%;border:1px solid var(--border);border-radius:var(--r-md)}
#otpLink{margin:0 0 var(--sp-3)}
.key{margin:var(--sp-2) 0 var(--sp-4);padding:var(--sp-2) var(--sp-3);border:1px dashed var(--border-strong);border-radius:var(--r-md);font-family:var(--mono);font-size:var(--fs-md);letter-spacing:.06em;text-align:center;word-break:break-all;user-select:all}
.codes{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);margin:0 0 var(--sp-4);padding:0;list-style:none;font-family:var(--mono);font-size:var(--fs-sm)}
.codes li{padding:var(--sp-2);border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-2);text-align:center;user-select:all}
.check{display:flex;align-items:center;gap:var(--sp-2);margin:0 0 var(--sp-4);font-size:var(--fs-md);cursor:pointer}
.check input{width:20px;height:20px;margin:0;accent-color:var(--primary)}
#toLogin[disabled]{cursor:not-allowed}
.btn.sm{display:inline-flex;width:auto;height:var(--h-sm);margin:0;padding:0 var(--sp-3);border-color:var(--border-strong);background:var(--surface);color:var(--text);font-size:var(--fs-sm);font-weight:500}
.btn.sm.primary{border-color:transparent;background:var(--primary);color:var(--on-primary)}
.btn.sm.danger{color:var(--danger)}
@media (hover:hover){.btn.sm:hover{border-color:var(--muted)}.btn.sm.primary:hover{background:var(--primary-hover)}}
.btn.sm[disabled]{background:var(--surface-2);border-color:var(--border);color:var(--faint)}
.chip{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--r-pill);background:var(--surface-3);color:var(--muted-tint);font-size:var(--fs-xs);font-weight:500;white-space:nowrap}
.chip.ok{background:var(--ok-weak);color:var(--ok)}
.chip.warn{background:var(--warn-weak);color:var(--warn)}
.chip.off{color:var(--muted)}
.ga-switch{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3);border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-2)}
.ga-sw-t{display:flex;flex:1;flex-direction:column;min-width:0}
.ga-step{margin:var(--sp-3) 0 0;padding:var(--sp-3);border:1px solid var(--accent);border-radius:var(--r-md);background:var(--accent-weak)}
.ga-step label{display:block;margin-bottom:var(--sp-1)}
.ga-step .hint{margin-bottom:var(--sp-2)}
.ga-inline{display:flex;align-items:center;gap:var(--sp-2)}
.ga-inline input[type="text"]{flex:1;min-width:0;height:var(--h-md)}
#gaCode{font-family:var(--mono);letter-spacing:.12em}
.ga-link{margin:var(--sp-4) 0 0;padding:var(--sp-3);border:1px solid var(--ok);border-radius:var(--r-md);background:var(--ok-weak)}
.ga-link-h{margin:0 0 var(--sp-2);font-size:var(--fs-sm);font-weight:600}
.ga-link input[type="text"]{height:var(--h-md);margin-bottom:var(--sp-2);font-family:var(--mono);font-size:var(--fs-xs)}
.ga-list{margin:0;padding:0;list-style:none}
.ga-item{padding:var(--sp-3) 0;border-top:1px solid var(--divider)}
.ga-item:first-child{border-top:0}
.ga-main{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-bottom:2px}
.ga-main b{word-break:break-all}
.ga-acts{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-2)}
.ga-empty{padding:var(--sp-2) 0}
#guestAdmin .msg{margin:var(--sp-3) 0 0}
@media (pointer:coarse){.btn.sm{height:40px}}
/* ---- 가입 신청(2026-10-19, spec_v1_signup.md S5): 로그인 화면 아래 '처음이세요? 가입 신청' 링크 · 계정 화면의 가입 신청 목록 ---- */
.signup-row{margin-top:var(--sp-4)}
.hint a,.note a{color:var(--accent);text-underline-offset:2px}
@media (pointer:coarse){.signup-row a{display:inline-block;padding:10px 4px}}
.ga-buid{font-family:var(--mono);font-size:var(--fs-sm);letter-spacing:.02em;word-break:break-all}
.ga-confirm{margin:var(--sp-2) 0 0;font-size:var(--fs-sm)}
.ga-confirm input{width:18px;height:18px}
.ga-ask{margin-top:var(--sp-2);padding:var(--sp-2) var(--sp-3);border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--surface-2)}
.ga-ask p{margin:0 0 var(--sp-2);font-size:var(--fs-sm)}
.ga-switch+.ga-switch{margin-top:var(--sp-2)}