/* 색·글자·간격은 전부 ~/.claude/skills/디자인방향/tokens.md 의 값이다.
   이탈은 DESIGN.md 의 이탈 표에만 있다 (바깥 여백 16px, 1컬럼, 본문 t6).
   여기에 토큰 밖 값을 새로 만들면 design_check.py 가 빨간불을 켠다. */

:root{
  --fg-default:#16283c; --fg-muted:#48607a; --fg-subtle:#6b8299;
  --fg-disabled:#94a8bb; --fg-link:#023e8a; --fg-on-solid:#ffffff;
  --bg-canvas:#f7f9fb; --bg-surface:#ffffff; --bg-subtle:#f1f5f9;
  --bg-selected:#caf0f8; --bg-accent:#0077b6; --bg-accent-pressed:#023e8a;
  --stroke-subtle:#e6edf3; --stroke-default:#d5e0ea; --stroke-strong:#94a8bb;
  --stroke-focus:#0077b6;
  --ok-fg:#00745f; --ok-bg:#edfaf6; --warn-fg:#755b22; --warn-bg:#fff7de;
  --danger-fg:#ca1d13; --danger-bg:#fdf0f0;
  --title:#03045e;
  --font:"Pretendard","Malgun Gothic",sans-serif;
  --r-control:6px; --r-card:12px; --s1:0 1px 4px rgba(0,0,0,0.08);

  /* 한 손 조작용 치수. 전부 간격 스케일 안의 값이다 */
  --edge:16px;          /* 바깥 여백 — DESIGN.md 이탈 1 */
  --tap:44px;           /* 터치 영역 하한 (토큰의 권장값) */
  --row:48px;           /* 목록 한 줄 — 토큰의 "여유" 행 높이. 56 은 스케일 밖이라 내렸다 */
  --primary-h:64px;     /* 주 버튼 높이 */
}

*{box-sizing:border-box}

html,body{margin:0;padding:0}

body{
  font-family:var(--font);
  font-size:16px; line-height:24px;   /* t6 — DESIGN.md 이탈 2 */
  font-weight:400;
  color:var(--fg-default);
  background:var(--bg-canvas);
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;                  /* 가로로는 절대 안 움직인다 */
}

:focus-visible{outline:2px solid var(--stroke-focus);outline-offset:2px}

/* ——————————————————————————— 뼈대 */

.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px var(--edge);
  padding-top:calc(12px + env(safe-area-inset-top));
  background:var(--bg-surface);
  border-bottom:1px solid var(--stroke-subtle);
}

.topbar .title{flex:1}               /* 뒤로 버튼 옆에 붙고 나머지를 차지한다 */

.topbar h1{
  flex:1;
  margin:0; font-size:24px; line-height:34px; font-weight:700;  /* t9 */
  color:var(--title);
}

.topbar .age{
  margin:2px 0 0;
  font-size:15px; line-height:23px;   /* t5 */
  color:var(--fg-muted);
}

.screen{
  padding:var(--edge);
  /* 아래쪽 고정 버튼에 가리지 않도록 비워 둔다 */
  padding-bottom:calc(var(--primary-h) + 40px + env(safe-area-inset-bottom));
}

.dock{
  position:fixed; left:0; right:0; bottom:0;
  padding:12px var(--edge);
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
  background:var(--bg-canvas);
  border-top:1px solid var(--stroke-subtle);
}
.dock:empty{display:none}

/* ——————————————————————————— 카드·구역 */

.card{
  background:var(--bg-surface);
  border:1px solid var(--stroke-subtle);
  border-radius:var(--r-card);
  box-shadow:var(--s1);
  padding:16px;
  margin:0 0 16px;
}

.card h2{
  margin:0 0 12px;
  font-size:18px; line-height:27px; font-weight:500;  /* t7 */
  color:var(--fg-muted);
}

.muted{color:var(--fg-muted);margin:0}
.card-do{margin:0;font-size:18px;line-height:27px;font-weight:500;color:var(--fg-default)}  /* t7 */
.card p + p{margin-top:8px}

.hint{
  margin:24px 0 0;
  color:var(--fg-muted);
  font-size:15px; line-height:23px;                   /* t5 */
  text-align:center;
}

/* ——————————————————————————— 값이 붙는 목록 */

.rows{list-style:none;margin:0;padding:0}

.rows li{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:var(--row);
  border-top:1px solid var(--stroke-subtle);
}
.rows li:first-child{border-top:0}

.rows .name{font-weight:500}

.rows .val{
  color:var(--fg-muted);
  font-variant-numeric:tabular-nums;
  text-align:right;
}

/* ——————————————————————————— 탭해서 올리는 줄
   줄 하나가 통째로 버튼이다. 한 손으로 안고 누르므로 표적이 클수록 좋다. */

.taps{display:block}

.row-tap{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; min-height:var(--row);
  padding:0;
  border:0; border-top:1px solid var(--stroke-subtle);
  background:var(--bg-surface);
  text-align:left;
  cursor:pointer;
  transition:background-color 150ms cubic-bezier(0.35,0,0.35,1);
}
.row-tap:first-child{border-top:0}
.row-tap:active{background:var(--bg-selected)}

.row-tap .name{font-weight:500;color:var(--fg-default)}
/* 누를 수 있는 줄과 못 누르는 줄이 똑같이 보이면 어디를 눌러야 할지 알 수 없다(디자인 감사 지적).
   값에 옅은 판을 깔아 "이 숫자는 눌러서 바뀐다" 를 보인다. 못 누르는 줄(.rows)에는 판이 없다 */
.row-tap .val{
  color:var(--fg-default);
  background:var(--bg-subtle);
  padding:4px 12px;
  border-radius:9999px;
  font-variant-numeric:tabular-nums;
}

/* ——————————————————————————— 버튼 */

button{font-family:var(--font);font-size:16px;line-height:24px}

.primary{
  display:block; width:100%;
  min-height:var(--primary-h);
  border:0; border-radius:var(--r-control);
  background:var(--bg-accent); color:var(--fg-on-solid);
  font-size:20px; line-height:29px; font-weight:700;   /* t8 */
  cursor:pointer;
  transition:background-color 150ms cubic-bezier(0.35,0,0.35,1);
}
.primary:active{background:var(--bg-accent-pressed)}
.primary:disabled{background:var(--bg-subtle);color:var(--fg-disabled);cursor:not-allowed}

.ghost{
  min-height:var(--tap); min-width:var(--tap);
  padding:0 12px;
  border:1px solid var(--stroke-default);
  border-radius:var(--r-control);
  background:var(--bg-surface); color:var(--fg-link);
  font-weight:500;
  cursor:pointer;
  transition:background-color 150ms cubic-bezier(0.35,0,0.35,1);
}
.ghost:active{background:var(--bg-subtle)}

.wide{
  display:block; width:100%;
  min-height:var(--row);
  margin:16px 0 0;
  border:1px solid var(--stroke-default);
  border-radius:var(--r-control);
  background:var(--bg-surface); color:var(--fg-link);
  font-weight:500;
  cursor:pointer;
}
.wide:disabled{background:var(--bg-subtle);color:var(--fg-disabled);cursor:not-allowed}
/* 켜진 상태 — 토큰의 "선택됨" 값 그대로 */
.wide.on{background:var(--bg-selected);color:var(--fg-link);border-color:var(--bg-selected)}

/* ——————————————————————————— 더보기 목록 */

.menu{list-style:none;margin:0;padding:0}

.menu li{border-top:1px solid var(--stroke-subtle)}
.menu li:first-child{border-top:0}

/* 아직 만들지 않은 항목은 누를 수 없는 글자로 둔다.
   누를 수 없는 것이 버튼처럼 보이면 그게 고장으로 읽힌다. */
.menu .todo{
  display:flex; align-items:center;
  min-height:var(--row);
  color:var(--fg-disabled);
}

.menu button{
  display:flex; align-items:center;
  width:100%; min-height:var(--row);
  padding:0;
  border:0; background:var(--bg-surface); color:var(--fg-link);
  font-weight:500; text-align:left;
  cursor:pointer;
}

/* ——————————————————————————— 앱 상태 보기 */

.state{list-style:none;margin:0;padding:0}

.state li{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:var(--row);
  border-top:1px solid var(--stroke-subtle);
  font-size:15px; line-height:23px;   /* t5 — 개발자용 화면이라 조밀해도 된다 */
}
.state li:first-child{border-top:0}

.state .what{color:var(--fg-default)}

.pill{
  flex:none;
  padding:2px 10px;
  border-radius:9999px;
  font-size:13px; line-height:19px; font-weight:500;  /* t3 */
  white-space:nowrap;
}
.pill[data-state="ok"]{background:var(--ok-bg);color:var(--ok-fg)}
.pill[data-state="fail"]{background:var(--danger-bg);color:var(--danger-fg)}
.pill[data-state="info"]{background:var(--bg-subtle);color:var(--fg-muted)}

.errors{
  list-style:none;margin:0;padding:0;
  font-size:13px; line-height:19px;
}
.errors li{
  padding:8px 0;
  border-top:1px solid var(--stroke-subtle);
  color:var(--danger-fg);
  word-break:break-all;
}
.errors li:first-child{border-top:0}

/* ——————————————————————————— 글 넣는 칸
   16px 이상이어야 아이폰이 누를 때 화면을 확대하지 않는다 */

.field{
  display:block; width:100%;
  min-height:var(--row);
  padding:0 12px;
  border:1px solid var(--stroke-default);
  border-radius:var(--r-control);
  background:var(--bg-surface); color:var(--fg-default);
  font-family:var(--font); font-size:16px; line-height:24px;
}
.field::placeholder{color:var(--fg-muted)}
.field:focus{border-color:var(--stroke-focus);outline:none}

/* 엄마가 적은 책 이름은 길 수 있다 — 한 줄에서 자르고 가로로 밀어내지 않는다 */
.row-tap .name,.rows .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.row-tap .val,.rows .val{flex:none}

.player{display:block;width:100%;max-height:50vh;margin:0 0 16px;border-radius:var(--r-card);background:var(--fg-default)}

.notices{margin:0 0 16px}
.notices .wide:first-child{margin-top:0}
.notices .wide{margin-top:8px}

/* ——————————————————————————— 예/아니요 */

.flags{list-style:none;margin:0;padding:0}
.flag{padding:12px 0;border-top:1px solid var(--stroke-subtle)}
.flag:first-child{border-top:0;padding-top:0}
.flag-q{margin:0 0 8px}
.flag .notice{margin:8px 0 0}
.pair{display:flex;gap:8px}
.pair .ghost{flex:1;min-height:var(--row)}
/* 고른 쪽 — 색만이 아니라 aria-pressed 로도 알린다 */
.ghost.picked{background:var(--bg-selected);border-color:var(--bg-selected)}

/* ——————————————————————————— 안내 문장 */

.says{list-style:none;margin:0;padding:0}
.says li{padding:8px 0;border-top:1px solid var(--stroke-subtle)}
.says li:first-child{border-top:0;padding-top:0}

.notice{
  margin:0 0 16px; padding:12px 16px;
  border-radius:var(--r-control);
  background:var(--bg-subtle); color:var(--fg-default);
}

.lead{
  margin:0 0 12px;
  font-size:20px; line-height:29px; font-weight:700;   /* t8 */
  color:var(--fg-default);
}

/* ——————————————————————————— 듣는 중
   아기에게 보여줄 것이 없어야 한다. 어두운 바탕에 남은 시간과 그만두기만 (DESIGN.md 이탈 표).
   새 색을 만들지 않는다 — 글자색 토큰 둘을 뒤집어 쓴다 (대비 14.18) */

body[data-mode="listening"]{background:var(--fg-default);color:var(--bg-canvas)}
body[data-mode="listening"] .topbar{display:none}
body[data-mode="listening"] .dock{background:var(--fg-default);border-top-color:var(--fg-default)}

.listening{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:60vh;
}
.timer-label{margin:0;font-size:18px;line-height:27px;color:var(--bg-canvas)}  /* t7 */
.timer{
  margin:8px 0 0;
  font-size:48px; line-height:60px; font-weight:700;  /* t14 */
  font-variant-numeric:tabular-nums;
  color:var(--bg-canvas);
}
.wide.dark{background:var(--fg-default);color:var(--bg-canvas);border-color:var(--fg-muted);margin:0}

.copy-buffer{position:fixed;opacity:0}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-property:color,background-color}
}