/* 디자인 토큰 + 공용 컴포넌트. 원본: book-ktx DESIGN.md (토스 다크, 다크 전용) */
:root{
  --bg:oklch(0.17 0.012 255);--surface:oklch(0.22 0.014 255);--surface2:oklch(0.27 0.016 255);--surface3:oklch(0.32 0.016 255);
  --line:oklch(0.30 0.014 255);
  --fg:oklch(0.96 0.006 255);--dim:oklch(0.72 0.014 255);--faint:oklch(0.55 0.014 255);
  --accent:oklch(0.66 0.17 255);--accent-hi:oklch(0.72 0.16 255);--accent-ink:oklch(0.80 0.12 255);--accent-bg:oklch(0.30 0.06 255);
  --ok:oklch(0.75 0.16 160);--ok-bg:oklch(0.28 0.05 160);
  --warn:oklch(0.80 0.15 75);--warn-bg:oklch(0.30 0.06 75);
  --bad:oklch(0.70 0.19 25);--bad-bg:oklch(0.30 0.07 25);
  --bread:oklch(0.285 0.035 62);--bread-btn:#F97A24;--bread-hi:#E4691A;--bread-ink:#fff; /* 빵빵 스튜디오 색 (허브 띠 / 새 앱 만들기 버튼: 주황 #F97A24 + 흰 글자 — 사용자 선택 / 누를 때 / 그 위 글자) */
  --r:18px;--rr:14px;
  --fast:150ms;--base:220ms;--slow:320ms;--ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* 스크롤바는 어디서도 안 보인다(스크롤은 된다 · 10/24 소유자) */
*{scrollbar-width:none}
*::-webkit-scrollbar{display:none}
/* hidden 이면 body 가 스크롤 컨테이너가 돼서 position:sticky 가 안 먹는다 → clip (가로 넘침만 자름) */
html,body{overflow-x:clip}
html{background:var(--bg);color-scheme:dark}
/* iOS 26 standalone + black-translucent: 뷰포트가 상단 safe-area(59pt)만큼 짧게 잡혀 fixed bottom 이 뜬다.
   html 을 그만큼 늘리면 innerHeight 가 화면 전체(932)로 잡힌다 (실기기 측정으로 확인) */
@media (display-mode:standalone){html{min-height:calc(100% + env(safe-area-inset-top))}}
body{margin:0;background:var(--bg);color:var(--fg);
  font:500 15px/1.5 "Pretendard Variable",Pretendard,Tossface,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums;
  padding-bottom:calc(40px + var(--bb-safe-bottom, env(safe-area-inset-bottom)))}
/* 폼 요소는 기본으로 폰트를 안 물려받는다 → 이모지가 시스템 이모지로 보이지 않게 전부 inherit */
button,input,textarea,select{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
.hidden{display:none!important}

/* ---- top ---- */
.top{padding:calc(14px + var(--bb-safe-top, env(safe-area-inset-top))) 20px 6px;max-width:520px;margin:0 auto}
.top .app{font-size:13px;font-weight:600;color:var(--faint);display:flex;align-items:center;gap:6px}
.top h1{margin:6px 0 0;font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.25}
main{max-width:520px;margin:0 auto;padding:0 20px}

/* ---- sections ---- */
.sec{margin-top:28px}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;margin:0 2px 12px}
.sec-h h2{margin:0;font-size:19px;font-weight:700;letter-spacing:-.015em}
.sec-h h2 .n{font-size:15px;color:var(--faint);font-weight:600;margin-left:6px}
.card{background:var(--surface);border-radius:var(--r);padding:6px}

/* ---- list rows (Toss style) ---- */
.row{display:flex;align-items:center;gap:13px;padding:13px 12px;border-radius:var(--rr);width:100%;text-align:left;
  background:none;border:0;transition:background var(--fast) var(--ease),transform 100ms var(--ease)}
.row:active{background:var(--surface2);transform:scale(.985)}
.row[aria-disabled="true"]{opacity:.55;pointer-events:none}
.row .ic{flex:none;width:42px;height:42px;border-radius:50%;background:var(--surface2);display:grid;place-items:center;font-size:22px}
.row .ic.acc{background:var(--accent-bg)}.row .ic.ok{background:var(--ok-bg)}.row .ic.warn{background:var(--warn-bg)}
.row .bd{flex:1;min-width:0}
.row .t{display:block;font-size:16px;font-weight:700;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .s{display:block;font-size:13px;color:var(--dim);margin-top:2px;line-height:1.45}
.row .chev{flex:none;color:var(--faint);font-size:18px}
.chev svg{display:block}
/* 허브 앱 행: 앱 열기 + 오른쪽 고치기 버튼 */
.app-row{display:flex;align-items:center}
.app-row .row{flex:1;min-width:0}
.app-row .acts{flex:none;display:flex;gap:6px;margin-right:12px}
.app-row .act{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--surface2);color:var(--dim);transition:background var(--fast) var(--ease),transform 100ms var(--ease)}
.app-row .act:active{background:var(--surface3);transform:scale(.94)}
.app-row .act svg{display:block}
/* 허브 맨 위: 빵빵 스튜디오 — 화면 가로 전체를 덮는 따뜻한 빵색 띠(좌우 여백·모서리 없음)로 앱 목록과 구분.
   그라데이션 없이 한 가지 색(처음 그라데이션의 진한 빵색) — 어두운 화면에서 영역을 나누는 "살짝 밝고 브랜드색이 도는 평평한 면".
   내용은 페이지 기본 여백(20px, "무엇을 할까요?"와 같은 줄)에 맞춘다 */
.studio-sec{margin:18px calc(50% - 50vw) 0;padding:12px calc(50vw - 50%);
  background:var(--bread)}
.studio .row{padding:8px 0;gap:14px}
.studio .t{font-size:18px;letter-spacing:-.02em}
.studio .s{margin-top:3px}
.studio .row:active{background:none;opacity:.8}
.studio .ic{width:auto;height:auto;background:none;border-radius:0;font-size:36px;line-height:1}
.studio .acts{margin-right:0}
.studio .act{background:oklch(1 0 0/.08);color:var(--fg)}
.studio .act:active{background:oklch(1 0 0/.14)}
.divider{height:1px;background:var(--line);margin:0 12px 0 67px;opacity:.6}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--surface2);color:var(--dim)}

/* ---- buttons / inputs: 앱들이 폼을 제각각 그리지 않게 공용으로. <label class="field"><span>이름</span><input class="input"></label> · <button class="btn"> (.sub .bad .sm) ---- */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;border-radius:var(--rr);border:0;width:100%;
  background:var(--accent);color:#fff;font-size:16px;font-weight:700;transition:transform 100ms var(--ease),filter var(--fast) var(--ease)}
.btn:active{transform:scale(.98);filter:brightness(.92)}
.btn.sub{background:var(--surface2);color:var(--fg)}
.btn.bad{background:var(--bad-bg);color:var(--bad)}
.btn.sm{height:38px;font-size:14px;border-radius:12px;padding:0 14px;width:auto}
.btn[disabled]{opacity:.45;pointer-events:none}
.field{display:block} /* 간격은 쓰는 쪽에서 (gifticon 등 예전 앱이 이미 .field 를 써서 여기선 안 준다) */
.field>span{display:block;font-size:13px;color:var(--dim);margin:0 2px 6px}
.input{width:100%;background:var(--surface2);border:0;border-radius:12px;padding:13px 14px;font-size:16px;color:var(--fg);outline:none;
  transition:box-shadow var(--fast) var(--ease)}
/* 칸이 부모보다 넓어지지 않게 — iOS 의 date·time 칸은 width:100% 를 무시하고 글 길이만큼 커진다(appearance 를 끄면 따른다) */
.input{max-width:100%;min-width:0}
input.input[type=date],input.input[type=time],input.input[type=datetime-local]{-webkit-appearance:none;appearance:none;display:block;min-height:46px}
.input::-webkit-date-and-time-value{text-align:left}
.input:focus{box-shadow:0 0 0 2px var(--accent)}

/* ---- skeleton: 데이터가 오기 전 자리 모양. HTML 에 미리 넣어 두고, 데이터가 오면 통째로 바꾼다 (새 항목엔 .in) ---- */
.sk{position:relative;overflow:hidden;display:block;background:var(--surface2);border-radius:8px;color:transparent!important;user-select:none;pointer-events:none}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,oklch(1 0 0/.07),transparent);animation:sk-shine 1.3s ease-in-out infinite}
@keyframes sk-shine{to{transform:translateX(100%)}}
.sk-line{height:13px;margin:5px 0;width:100%}.sk-line.lg{height:20px}.sk-line.sm{height:10px}
.sk-circle{border-radius:50%}
.sk-pill{display:inline-block;width:52px;height:22px;border-radius:999px;vertical-align:middle}
.sk-row{display:flex;align-items:center;gap:14px;padding:14px 12px}
.sk-row .sk-circle{flex:none;width:42px;height:42px}
.sk-row .bd{flex:1;min-width:0}
.sk-card{height:120px;border-radius:var(--r)}

/* ---- entering items ---- */
.in{animation:rise var(--slow) var(--ease) both;animation-delay:calc(var(--i,0)*40ms)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:120ms!important;animation-delay:0ms!important;transition-duration:120ms!important}
  .in{animation-name:fade}
  .sk::after{animation:none}
  @keyframes fade{from{opacity:0}to{opacity:1}}
}