/* 🎛 BLOCROWN UI 시스템(2026-10-06 · docs/design/ui-skills-audit-2026-10-06.md)
   오너 「ui 스킬은 이거 참조해서 진행」 — beautiful-shadows · apple-design · emil-design-eng · interaction-design · accessibility · adapt · better-interface.
   원칙: ① 모양 값(그림자·움직임·초점·모서리)은 여기 토큰 한 곳 → 각 파일은 var(--…)로 쓴다 ② 기본 규칙은 :where()(구체성 0)라
   화면별 규칙이 언제나 이긴다 — 기존 화면을 덮지 않고 빈 곳만 채운다 ③ 3D 캔버스 위 전체 화면 층에는 무거운 흐림·필터를 새로 넣지 않는다.
   브랜드 색(딥그린 #093329 · 라임 #C6FA49)은 brand.css 그대로. 마지막에 불러온다(index.html). */
:root{
 /* 그림자 3단(beautiful-shadows · 무채색 · 겹쳐 쌓은 옅은 그림자): sm = 칩·알약·입력 · md = 떠 있는 막대·버튼·카드 · lg = 창(시트)·건물 창 */
 --shadow-sm:0 2px 3px -1px rgba(0,0,0,.1),0 1px 0 0 rgba(25,28,33,.02),0 0 0 1px rgba(25,28,33,.08);
 --shadow-md:0 0 0 1px rgba(0,0,0,.06),0 1px 1px -.5px rgba(0,0,0,.06),0 3px 3px -1.5px rgba(0,0,0,.06),0 6px 6px -3px rgba(0,0,0,.06),0 12px 12px -6px rgba(0,0,0,.06),0 24px 24px -12px rgba(0,0,0,.06);
 --shadow-lg:0 2.8px 2.2px rgba(0,0,0,.034),0 6.7px 5.3px rgba(0,0,0,.048),0 12.5px 10px rgba(0,0,0,.06),0 22.3px 17.9px rgba(0,0,0,.072),0 41.8px 33.4px rgba(0,0,0,.086),0 100px 80px rgba(0,0,0,.12);
 /* 움직임(emil · apple): 들어올 때 감속 · ease-in은 쓰지 않는다 · UI 움직임은 300ms 아래 · 시트는 iOS 서랍 곡선 */
 --ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);--ease-drawer:cubic-bezier(.32,.72,0,1);
 --dur-press:120ms;--dur-fast:160ms;--dur-base:220ms;--dur-sheet:280ms;
 /* 초점 고리: 크림(4.2:1)·흰색(4.4:1)·딥그린(3.1:1) 어디서나 3:1 이상(WCAG 1.4.11) · 어두운 판 위에서는 라임 */
 --focus-ring:#227dbe;--focus-ring-dark:#C6FA49;
 /* 모서리·누르는 칸 · 흐린 글자(크림 위 4.5:1 이상) */
 --r-sm:10px;--r-md:14px;--r-lg:24px;--r-pill:999px;--tap:44px;
 --text-muted:#56686c;
 /* 🔤 글씨 단계(2026-10-12 오너 「글씨들 크기 너무 큰건 줄여서 1줄로 버튼 안넘어가게」): 화면은 이 토큰만 쓴다 — 제목 20 · 소제목 15 · 본문 14 · 작은 글 12.5 · 단추 15 · 작은 단추 13
    전체 화면 한 장(로그인)만 display 22 · 입력 칸은 16 아래로 내리지 않는다(iOS가 칸을 누르면 화면을 키운다) */
 --fs-display:22px;--fs-title:20px;--fs-sub:15px;--fs-body:14px;--fs-small:12.5px;--fs-caption:11.5px;--fs-btn:15px;--fs-btn-sm:13px;--fs-input:16px;
 --lh-tight:1.25;--lh-body:1.45;--fw-title:850;--fw-btn:800;
 /* 단추 높이·간격 한 벌: 큰 단추 48 · 작은 단추 40(누르는 칸은 --tap 44를 감싼 줄이 맡는다) · 간격 4/8/12/16 */
 --btn-h:48px;--btn-h-sm:40px;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;
 /* 대비: 흐린 글은 --text-muted(크림 위 4.5:1↑) 하나 · 어두운 판 위 흐린 글은 --text-muted-dark */
 --text-muted-dark:#c9d6d0;
}
/* 🔤 창 제목 한 단계(2026-10-12 textfit): 26·27·25·23px로 제각각이던 창·건물 시트·패널·안내 제목 → --fs-title(20) — 같은 구체성이라 마지막에 불러오는 이 파일이 이긴다 · 더 구체적인 화면별 규칙(앨범·첫 아지트 등 20px)은 그대로 */
.dialog h2,.detail h2,.panel-heading h2,.guide-heading h2,.nav-dialog h2{font-size:var(--fs-title);line-height:var(--lh-tight);letter-spacing:-.02em}
.dialog h3{font-size:var(--fs-sub)}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}
:where(h1,h2,h3){text-wrap:balance}
:where(p,li){text-wrap:pretty}

/* 누름(emil 「버튼은 누르는 순간 반응」 · apple 「pointer-down에 바로」): 0.97로 살짝 — transform 대신 scale 속성이라 translate(-50%)로 자리 잡은 단추도 안 흔들린다 */
:where(button,[role=button],[role=tab],summary){transition-property:scale,background-color,color,border-color,box-shadow,opacity;transition-duration:var(--dur-press);transition-timing-function:var(--ease-out)}
:where(button,[role=button],[role=tab],summary):not(:disabled,[aria-disabled=true]):active{scale:.97}
:where(button:disabled,[aria-disabled=true]){scale:none}

/* 초점: 키보드로 옮길 때만(:focus-visible) · 색은 토큰 하나 · 어두운 판(이동 막대·등반 패드·첫 할 일) 위에서는 라임 */
:where(button,a[href],[role=button],[role=tab],summary,input,select,textarea,[tabindex]:not([tabindex="-1"])):focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
#tripHUD,.thumb-deck,.first-steps,#toast{--focus-ring:var(--focus-ring-dark)}

/* 누르는 칸 44px(adapt · WCAG 2.5.8 권장) · 체크박스는 22px + 브랜드 색(누르는 칸은 감싼 label) */
:where(select){min-height:var(--tap)}
:where(input[type=checkbox],input[type=radio]){width:22px;height:22px;accent-color:var(--deep,#093329);flex:0 0 auto}
#profileOpen{min-height:var(--tap)}
#idGroup #playerStatus{min-width:var(--tap);justify-content:center}/* 🔔 알림함: 윗줄 묶음 안에서 33~38px이던 폭 → 44px */

/* 바뀌는 숫자는 같은 폭(better-interface 9 · 숫자가 바뀔 때 글자가 옆으로 밀리지 않게) */
#hudPoints,#hudLevel,#hudBellCount,.dock-badge,#tripRemain,#tripDistance,#timer,#height,#total,#arrivalCountdown,#resultHeight,#resultTime,#buildingHeight,#manageCount,#bikeTime,#bikeRemaining,.boost-pct,.boost-gain,.boost-eta,.mb-seg-count{font-variant-numeric:tabular-nums}

/* 높이 단계(떠 있는 것만 · 테두리는 구조 표시에만)는 각 자리(district.css · app-shell.css)에서 var(--shadow-sm|md|lg)로 쓴다 — 여기서 덮으면 그림자를 일부러 뺀 창(증서 등)까지 덮는다 */

/* 창 열기(interaction-design 「무엇이 바뀌었는지 보여 주는 움직임」): 배경은 옅게 · 시트는 24px 아래에서 서랍 곡선으로 올라온다.
   @starting-style를 모르는 브라우저는 지금처럼 바로 뜬다(점진 향상) · 닫기는 바로(emil 「나가는 움직임은 더 짧게」) · 탭 바꾸기처럼 자주 하는 일에는 움직임 없음 */
@media (prefers-reduced-motion:no-preference){
 .modal:not([hidden]){transition:opacity var(--dur-base) var(--ease-out)}
 .modal:not([hidden])>.dialog{transition:translate var(--dur-sheet) var(--ease-drawer),opacity var(--dur-base) var(--ease-out)}
 .detail:not([hidden]){transition:translate var(--dur-sheet) var(--ease-drawer),opacity var(--dur-base) var(--ease-out)}
 #toast{transition:opacity var(--dur-base) var(--ease-out),translate var(--dur-base) var(--ease-out);translate:0 6px}
 #toast.show{translate:0 0}
 @starting-style{
  .modal:not([hidden]){opacity:0}
  .modal:not([hidden])>.dialog{translate:0 24px;opacity:0}
  .detail:not([hidden]){translate:0 16px;opacity:0}
 }
}

/* 움직임 줄이기(accessibility 2.3 · emil): 움직임·위치 변화는 끄고 상태는 그대로 보인다 · 누름 축소도 끈다 */
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
 :where(button,[role=button],[role=tab],summary):active{scale:none}
}

/* 🔐 로그인 상태 유지·이메일 기억·이메일 찾기(2026-10-06 · 오너 「회원가입하고 로그인시 정보 저장으로 바로 로그인 가능하게」 「비밀번호 찾기말고 이메일 찾기도 추가」): 체크 줄은 누르는 칸 44px · 인증 창의 비밀번호 칸은 코드 칸(22px 띄움)과 달리 보통 글자 */
#memberModal .auth-keep{display:flex;flex-wrap:wrap;gap:0 18px;margin:6px 0 0}
#memberModal .auth-keep .check{min-height:var(--tap);margin:0;font-size:14px;color:var(--ink,#17333c)}
#memberModal .verify-box input[type=password]{font-size:16px;letter-spacing:normal;text-align:left}
#memberModal .find-email-result{margin:8px 0;padding:10px 12px;border-radius:var(--r-sm);background:#f3f6ee;box-shadow:var(--shadow-sm);font-size:14px;line-height:1.5}
#memberModal .find-email-result b{display:block;font-size:16px;font-variant-numeric:tabular-nums;word-break:break-all}
/* select: WebKit(Safari·iOS) ignores min-height on native selects (22px) unless appearance is none; draw the arrow with gradients (no image) */
select{-webkit-appearance:none;appearance:none;min-height:44px;padding-right:34px!important;background-image:linear-gradient(45deg,transparent 50%,#4b5f63 50%),linear-gradient(135deg,#4b5f63 50%,transparent 50%)!important;background-position:calc(100% - 18px) 50%,calc(100% - 12px) 50%!important;background-size:6px 6px,6px 6px!important;background-repeat:no-repeat!important}
select::-ms-expand{display:none}
.store-card button.primary:disabled{background:#e6ebe3!important;color:#3f5357!important;border-color:#cfd8cc!important;opacity:1!important}
/* panel back chip: shrink to its label (dialog buttons are width:100% elsewhere) and keep a gap above the eyebrow */
.dialog>.panel-back,.panel-back{width:auto!important;max-width:calc(100% - 96px);margin:0 0 10px!important}

/* account deletion block (2026-10-11 UX U68): subheading + "before you delete" line with the account-deletion page link */
#memberModal .delete-head{margin:16px 0 4px;padding-top:12px;border-top:1px solid #e3e8e1;font-size:16px}
#memberModal .delete-before{margin:0 0 8px;font-size:14px;line-height:1.5;color:var(--ink,#17333c)}
#memberModal .delete-before a{font-weight:800;text-decoration:underline}
/* 2026-10-12 iOS Q7: the link sat mid-sentence and broke across lines -> its own line, kept whole */
#memberModal .delete-before a{display:flex;align-items:center;width:fit-content;max-width:100%;box-sizing:border-box;margin-top:6px;word-break:keep-all}
/* U48 (2026-10-11 UX audit): unselected tabs and live buttons looked like the grey dashed disabled style - unselected = white, dark text, thin border; selected = dark green; same rule for aria-selected and aria-pressed */
.seg button[aria-selected="false"],.seg button[aria-pressed="false"],.ct-tabs button[aria-selected="false"],.ct-tabs button[aria-pressed="false"],[role=tablist]>button[role=tab][aria-selected="false"]{background:#fff;color:#16323b;border:1px solid #cfdcd4;font-weight:700}
.seg button[aria-selected="true"],.seg button[aria-pressed="true"],.ct-tabs button[aria-selected="true"],[role=tablist]>button[role=tab][aria-selected="true"]{background:#093329;color:#C6FA49;border:1px solid #093329;font-weight:800}
.sc-feed-acts .sc-note-btn,.sc-note-btn{background:#fff;border:1px solid #cfe0d6;color:#16533f}
#extModal button[aria-pressed="true"]{background:#093329!important;color:#C6FA49!important;border:1px solid #093329!important;font-weight:800}#extModal button[aria-pressed="false"]{background:#fff;color:#16323b;border:1px solid #cfdcd4
}

/* textfit 2026-10-12: More hub cards 72px -> 56px (half the card was empty once the hint line hides; with a hint the content sets the height) */
.phub[data-hub=more5]>.phub-btn{min-height:56px}
/* Decor storage note: 9-10px was hard to read -> --fs-small; it sits inside a text-fit fold */
#decorUI .decor-note{font-size:var(--fs-small);line-height:var(--lh-body)}
/* 2026-10-12 REST admin: audit filter select was 41px -> 44px; a details that is already a card drew a second bordered box for its summary - admin sections keep the card, plain summary */
#adminModal .admin-tools select{min-height:var(--tap)}
details.admin-section>summary{border:0!important;background:transparent!important;margin:0!important;box-shadow:none!important}
/* 2026-10-12 REST tabs: tab rows built with class "secondary" (inbox, chat) kept the 1.5px dark ring, so unselected tabs looked like buttons while the wallet/feed tabs are white with a thin border - one tab look (U48) */
[role=tablist]>button[role=tab][aria-selected="false"].secondary{border:1px solid #cfdcd4!important;color:#16323b!important;font-weight:700!important}
/* 2026-10-12 REST settings: check rows were 26px tall at 12px (the whole label is the touch target) -> 44px at the body size */
#settingsModal label.check,#memberModal #signedIn label.check,#adminModal label.check{display:flex;align-items:center;gap:8px;min-height:var(--tap);margin:4px 0;font-size:var(--fs-body);line-height:var(--lh-tight)}/* 2026-10-12 settings audit S10: the same check rows in account management (profile public · news mail · delete confirm, 26-38px) and the admin cards (26px) get the 44px row too - the sign-in/sign-up form keeps its own rows */
/* 2026-10-12 REST growth: the crew panel repeated the window title (h2 = crew, then h3 = crew); the XP guide drew its own card around a fold, unlike the "title steps" fold right above it */
#economyModal #crewBox>h3:first-child{display:none}
details.xp-guide{border:0!important;background:transparent!important;border-radius:0!important}
/* 2026-10-12 REST wallet: guest "log in" and "retry" were narrow left-aligned primaries above a full-width close - the one main action is full width */
#storeLogin,#storeRetry{display:flex;align-items:center;justify-content:center;width:100%;min-height:var(--btn-h,48px);margin:8px 0 0}
/* 2026-10-12 REST eyebrow: in a flex-column dialog (recommended accounts) the eyebrow pill stretched into a full-width lime bar - it hugs its label like every other window */
.dialog>.eyebrow{align-self:flex-start}
/* 2026-10-12 pro MAP-05: map HUD, building sheet, rooftop sheet and trip card text was hard-coded at 9-10.5px (below the smallest token --fs-caption) - type scale tokens only; the rooftop note matches the facade note (--fs-small) and the rooftop count gets >=4.5:1 */
#tripHUD small{font-size:var(--fs-caption)}
.roof-sheet .decor-note{font-size:var(--fs-small);line-height:var(--lh-body)}
.roof-count{font-size:var(--fs-caption);color:#4f5f5d}
.detail #buildingAddress,.detail .building-metrics span{font-size:var(--fs-caption)}
header .place{font-size:var(--fs-caption)}
#hudRight .home-return b,#hudRight .home-return small{font-size:var(--fs-caption)}
.mine-card .mine-tag{font-size:var(--fs-caption)}
.attribution{font-size:var(--fs-caption);line-height:1.25;padding:2px 7px}
/* 2026-10-12 pro MAP-12: the neighbourhood chip drops its pin first when the short name still overflows (the name matters more than the icon) */
header .hood-chip.no-pin>span[aria-hidden]{display:none}
@media(max-width:360px){header .hood-chip{max-width:35%;flex-shrink:0}}
/* 2026-10-12 pro MAP-14: buttons that carry a function icon (Phosphor set) next to their label - icon and label on one centred line */
button.ic-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.mine-card .mine-ic .ph,.mine-small .mine-ic .ph{display:block}
/* 2026-10-12 pro MAP-16: the facade sheet's "- view +" zoom buttons fell back to the browser grey (looked disabled) next to the white face arrows - one white control look, 44px */
.decor-zoom button,.decor-face button{background:#fff;border:1px solid #cfdcd4;color:var(--deep,#093329);box-shadow:var(--shadow-sm)}
.decor-face button{height:var(--tap,44px)}
/* 2026-10-12 pro MAP-17: while decorating, the ODbL credit moved to the top but kept left:0, so it became a 382px white band over the facade - a small pill at the top right (credit stays visible) */
body.decorating .attribution{left:auto;max-width:calc(100% - 16px);border-radius:6px}
/* 2026-10-12 pro MAP-19: on short phones (320x640) the rooftop sheet's normal height held only the head, hub tabs and the two-line "who sees it" note - the tab row sat half under the sticky save bar and no prop was visible. Short screens: normal height 60dvh and the note on one line (full text in the expanded sheet, as the second sentence already is) */
@media (max-width:700px) and (max-height:700px){.roof-sheet:not(.tall):not(.peek){max-height:60dvh}.roof-sheet:not(.tall) #roofWho{align-items:center}.roof-sheet:not(.tall) #roofWho>span:not(.hub-who-ic){min-width:0;overflow:hidden}.roof-sheet:not(.tall) #roofWho .hub-who-t{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
/* 2026-10-12 settings audit S06: windows whose height changes with a tab or group (wallet, inbox, settings, profile, points, more, account) were centred, so each tab switch re-centred the dialog and the tab row / "back to list" button jumped 50-180px under the finger - pin them to the top edge below the notch so the tab row keeps its y (the full-screen sign-in keeps its own layout) */
:is(#storeModal,#inboxModal,#settingsModal,#profileModal,#pointsModal,#moreModal,#memberModal:not(.auth-full)).modal{place-items:start center;padding-top:calc(max(12px,env(safe-area-inset-top)) + 4px)}
/* 2026-10-12 settings audit S12: "delete account" used the same pale quiet look as "get delete code" and "export data", so it did not read as irreversible - danger colours (red text and outline on a pale red fill, 5.9:1) like the admin console danger buttons; the delete group is now the last block of account management (backup moved above it) */
#memberModal #accountDelete{background:#fdf1ef!important;color:#b3261e!important;border:1.5px solid #b3261e!important;font-weight:800!important}#memberModal #accountDelete:active{background:#f8dcd8!important}#memberModal #accountDelete:disabled{opacity:.6}
/* 2026-10-12 settings audit S08: settings > help - open guide / first-time tips again / support FAQ / mail us were three looks (white button, white button with emoji, pale pill links) at three widths - one stacked column of the same white button, full width, one line */
#settingsModal .help-acts{display:grid;gap:var(--sp-2);margin:var(--sp-1) 0 0}#settingsModal .help-act{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;min-height:var(--btn-h);margin:0!important;padding:0 var(--sp-4);font-size:var(--fs-btn);line-height:var(--lh-tight);text-align:center;text-decoration:none}
/* 2026-10-12 settings audit S16: settings "low-spec auto" hint had an inline 12px / #4f6a63 style - same hint step as the other settings hints */
#lowFxAuto{margin:-4px 0 8px;font-size:var(--fs-small);color:var(--text-muted)}