/* 글꼴: Pretendard Variable 하나(SIL OFL 1.1, 라이선스는 fonts/Pretendard-LICENSE.txt).
   글자 조각(dynamic-subset)으로 나뉘어 있어서 화면에 쓰는 글자가 든 조각만 내려받는다 */
@import url("fonts/pretendard/pretendardvariable-dynamic-subset.css");

/* 간격은 8px 단위만 쓴다: --s1 8px, --s2 16px, --s3 24px, --s4 32px, --s5 40px, --s6 48px
   포인트 색(--accent)은 선, 주 버튼, 선택 상태에만 쓴다. 빨강(--danger)은 시험·오류에만 쓴다.
   바탕은 차분한 어두운 색이 기본이고, 기기가 밝은 화면을 쓰면(prefers-color-scheme: light) 밝은 색이 된다 */
:root {
  --ground: #0b0e12;
  --surface: #141920;
  --surface-2: #1b222b;
  --ink: #f2f4f7;
  --ink-2: #b3bbc7;
  --ink-3: #8a94a3;
  --hair: #232b35;
  --hair-strong: #3a4452;
  --accent: #4fd1c5;
  --on-accent: #04201d;
  --accent-soft: #14302d;
  --danger: #ff8478;
  --on-danger: #2a0a07; /* 밤 화면의 연한 빨강 위 글자색(대비 4.5 이상) */
  --danger-soft: #2e1815;
  --dock: #1b222b;
  --dock-ink: #f2f4f7;
  /* 예전 이름(아직 쓰는 규칙이 많아서 새 이름으로 이어 둔다) */
  --bg: var(--ground);
  --card: var(--surface);
  --line: var(--hair);
  --muted: var(--ink-3);
  --accent-ink: var(--on-accent);
  --ok: var(--accent);
  --warn: var(--danger);
  --warn-soft: var(--danger-soft);
  --display: "Pretendard Variable", "Pretendard", -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px;
  --r-ctl: 14px;
  --r-card: 16px;
  --tap: 52px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --tabbar-h: 60px; /* 아래 탭바의 높이(안전 영역 제외). 스톱워치 막대와 아래 여백이 이 값을 쓴다 */
  color-scheme: dark light;
}
/* 화면 색: 기본은 기기 설정을 따르고, 내 계정에서 "밝게/어둡게"를 고르면 data-theme이 붙는다.
   밝은 색 목록은 아래 두 곳에 똑같이 둔다(시험이 같은지 확인한다) */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ground: #f6f7f9;
    --surface: #ffffff;
    --surface-2: #eef0f3;
    --ink: #101820;
    --ink-2: #4a5360;
    --ink-3: #69727e;
    --hair: #e1e5ea;
    --hair-strong: #c4cbd3;
    --accent: #0f766e;
    --on-accent: #ffffff;
    --accent-soft: #e6f3f1;
    --danger: #d92d20;
  --on-danger: #ffffff;
    --danger-soft: #fdecea;
    --dock: #101820;
    --dock-ink: #f2f4f7;
  }
}
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] {
  color-scheme: light;
  --ground: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #eef0f3;
  --ink: #101820;
  --ink-2: #4a5360;
  --ink-3: #69727e;
  --hair: #e1e5ea;
  --hair-strong: #c4cbd3;
  --accent: #0f766e;
  --on-accent: #ffffff;
  --accent-soft: #e6f3f1;
  --danger: #d92d20;
  --on-danger: #ffffff;
  --danger-soft: #fdecea;
  --dock: #101820;
  --dock-ink: #f2f4f7;
}

/* ---------- 기본 ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; background: none; } /* 첫 순간 바탕색(index.html)은 여기서 지운다: 화면 바탕은 예전처럼 body 색을 따른다 */
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "Pretendard Variable", "Pretendard", -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.012em;
  font-variant-numeric: tabular-nums;
  word-break: keep-all;
  overflow-wrap: anywhere;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  accent-color: var(--accent);
}
::selection { background: var(--accent); color: var(--on-accent); }
h1, h2, h3, h4 { margin: 0; line-height: 1.3; letter-spacing: -0.02em; }
h1 { font-size: 28px; font-weight: 600; }
h2 { font-size: 20px; font-weight: 600; }
h3 { font-size: 17px; font-weight: 600; margin: var(--s3) 0 var(--s1); }
h4 { font-size: 16px; font-weight: 600; }
b, strong { font-weight: 600; } /* 굵기는 400/500/600만 */
p { margin: 0; }
a { color: var(--accent); }
.sub { color: var(--ink-3); font-size: 16px; margin: 0; }
.center { text-align: center; }
code { background: var(--surface-2); padding: 0 var(--s1); border-radius: var(--s1); font-size: 14px; }

/* 가운데 정렬 최대 440px 한 열 */
.top, main, footer { max-width: 440px; margin: 0 auto; padding: 0 var(--s2); }

/* ---------- 입력칸과 버튼 ---------- */
label { display: flex; flex-direction: column; gap: var(--s1); font-size: 14px; font-weight: 600; color: var(--ink-2); }
input, select, textarea, button { font: inherit; font-size: 16px; color: var(--ink); }
input, select {
  min-height: var(--tap);
  padding: 0 var(--s2);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  width: 100%;
  min-width: 0;
}
textarea {
  width: 100%;
  padding: var(--s1) var(--s2);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  line-height: 1.5;
  resize: vertical;
}
input[type="checkbox"] { min-height: 0; width: 24px; height: 24px; padding: 0; flex: none; accent-color: var(--accent); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, summary:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
input:disabled, select:disabled { background: var(--bg); color: var(--muted); }

button {
  min-height: var(--tap);
  padding: 0 var(--s2);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 140ms ease-out, background-color 140ms ease-out;
}
button:active:not(:disabled) { transform: scale(0.98); }
button:disabled { opacity: 0.4; cursor: default; }
button.primary, a.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
button.secondary { background: var(--accent-soft); border-color: transparent; color: var(--accent); font-weight: 600; }
button.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
button.block, .block { display: block; width: 100%; }
button.icon { width: var(--tap); padding: 0; font-size: 24px; line-height: 1; }
.linkbtn { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s2); border-radius: var(--r-ctl); text-decoration: none; }
.linklike { min-height: 0; border: 0; background: none; padding: 0; color: var(--accent); text-decoration: underline; font-size: inherit; font-weight: inherit; }

.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s2); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s1); margin: var(--s2) 0; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s1); margin-top: var(--s1); }

details > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s1); min-height: var(--tap); font-weight: 600; }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: ""; width: var(--s1); height: var(--s1); border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); margin: 0 var(--s1); flex: none; }
details[open] > summary::after { transform: rotate(-135deg); }

/* ---------- 카드와 상자 ---------- */
/* 카드 상자 대신 가는 줄로 나눈다 */
.card { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-card); padding: var(--s2); margin: 0 0 var(--s2); }
.card > h2 + .sub { margin-top: var(--s1); }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s1); flex-wrap: wrap; }
.bar { height: var(--s1); background: var(--line); border-radius: 99px; overflow: hidden; }
.bar > div { height: 100%; width: 0; background: var(--ok); border-radius: 99px; transition: width 0.25s; }
.note { background: var(--warn-soft); color: var(--ink); border-radius: var(--r-card); padding: var(--s1) var(--s2); font-size: 16px; margin: 0; }
#devBox .dev-reset-text { margin-top: var(--s2); }
.hint { background: var(--accent-soft); color: var(--ink); border-radius: var(--r-card); padding: var(--s2); font-size: 16px; margin: var(--s2) 0 0; }
/* 처음 안내는 한 줄로 접어 두고, 눌러서 읽는다 (새 기능이 아래로 밀리지 않게) */
details.hint { padding: var(--s1) var(--s2); }
details.hint summary { font-weight: 600; color: var(--ink-2); min-height: 32px; }
details.hint p { margin: var(--s1) 0 0; }
.errors { border-radius: var(--r-card); padding: var(--s2); margin: 0 0 var(--s2); background: var(--accent-soft); font-size: 14px; }
.errors.bad { background: var(--warn-soft); color: var(--warn); font-weight: 600; }
.errors:empty { display: none; }
.errors p + p { margin-top: var(--s1); }

/* ---------- 상단 ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 64px; padding-top: var(--s1); padding-bottom: var(--s1); }
.brand { font-size: 17px; font-weight: 600; white-space: nowrap; }
.top-left { display: flex; align-items: center; gap: var(--s1); min-width: 0; }
.acct { min-width: 0; }
.acct button { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 좁은 폰에서는 "○○ 님"을 줄여서 한 줄을 지킨다 */
/* 이름 옆 모드 단추와 펼침 메뉴 */
.mode-menu-wrap { position: relative; }
.mode-pill { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--hair-strong); background: var(--surface-2); color: var(--ink); font-size: 14px; font-weight: 600; white-space: nowrap; }
.mode-pill[aria-expanded="true"] { border-color: var(--accent); }
.mode-pill[aria-expanded="true"] svg { transform: rotate(180deg); }
.mode-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; width: 220px; padding: 6px; border-radius: var(--r-card); border: 1px solid var(--hair-strong); background: var(--surface); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }
.mode-menu button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 52px; padding: 8px 10px 8px 34px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); text-align: left; position: relative; }
.mode-menu button b { font-size: 15px; }
.mode-menu button small { font-size: 12px; color: var(--ink-2); }
.mode-menu button[aria-checked="true"] { background: var(--surface-2); }
.mode-menu button[aria-checked="true"]::before { content: "✓"; position: absolute; left: 12px; top: 10px; color: var(--accent); font-weight: 600; }
.acct button { min-height: var(--tap); color: var(--ink-2); }

/* ---------- 첫 입력 화면 ---------- */
.intro { padding: var(--s2) 0 var(--s3); }
.intro .step-tower { margin-bottom: 16px; }
.intro h1 { font-size: 30px; letter-spacing: -0.03em; line-height: 1.25; }
.intro .lead { margin-top: var(--s1); font-size: 17px; color: var(--ink-2); }
.steps { list-style: none; padding: 0; margin: var(--s3) 0; display: grid; gap: var(--s1); }
.steps li { display: flex; align-items: center; gap: var(--s2); font-size: 15px; color: var(--ink-2); }
.steps b { width: var(--s4); height: var(--s4); border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--card); color: var(--accent); font-size: 15px; }
#setup .card h2 { margin-bottom: var(--s1); }
#subjects { margin-top: var(--s2); }
#make { min-height: 56px; font-size: 17px; margin-top: var(--s1); }
#setup > .sub.center { margin-top: var(--s2); }

/* 과목 한 줄: 이름(제목처럼), 시험 날짜 칩, 접어 둔 "더 정확하게". 칩이 숨은 date 입력칸의 값을 바꾼다 */
#setup .first { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s1); margin-bottom: var(--s2); font-size: 15px; }
#setup .first b { margin-left: 6px; font-weight: 600; }
#setup .first .linklike { min-height: 36px; color: var(--ink-2); text-decoration: none; font-size: 13px; }
#setup .first input[type="date"] { flex: 1 0 100%; }
#setup .first input[hidden] { display: none; }
.schips { display: flex; flex-wrap: wrap; gap: var(--s1); }
.schip { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--hair-strong); background: transparent; color: var(--ink-2); font-size: 15px; }
.schip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.schip.custom { border-style: dashed; color: var(--ink-2); }
#subjectsHint { margin: var(--s2) 0 0; }
.subject { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s2) 0; margin: 0; border: 0; border-top: 1px solid var(--hair); border-radius: 0; }
#subjects { margin-top: var(--s2); }
#subjects .subject:first-child { border-top: 0; padding-top: 0; }
.shead { display: flex; align-items: center; gap: var(--s1); }
.shead input { flex: 1; min-width: 0; min-height: 40px; padding: 0; border: 0; background: none; font-size: 18px; font-weight: 600; }
.shead .del { flex: none; width: 40px; min-height: 40px; padding: 0; border: 0; background: none; color: var(--ink-2); }
.shead .fine-toggle { flex: none; align-self: center; }
.dhead { display: flex; justify-content: space-between; gap: var(--s1); margin-bottom: 6px; color: var(--ink-3); font-size: 12px; }
.dchips { display: flex; align-items: stretch; gap: 6px; }
.dchip { flex: 1; min-width: 0; min-height: 52px; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-radius: 12px; border: 1px solid var(--hair-strong); background: transparent; color: var(--ink-2); }
.dchip span { font-size: 11px; }
.dchip b { font-size: 16px; font-weight: 600; }
.dchip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.dchip:disabled { opacity: 0.35; }
.dnav { flex: none; width: 24px; min-height: 52px; padding: 0; border: 0; background: none; color: var(--ink-2); font-size: 22px; }
.dnav:disabled { opacity: 0.25; }
.subject .linklike { align-self: flex-start; min-height: 36px; color: var(--ink-2); text-decoration: none; font-size: 13px; }
.subject input[hidden], .subject .fine[hidden], .subject .detail[hidden] { display: none; }
.fine { display: flex; flex-direction: column; gap: var(--s2); padding-top: var(--s1); }
.fine .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fine > .detail { padding-top: var(--s2); border-top: 1px solid var(--line); }
.timebox { padding: var(--s1) var(--s2); }
.timebox summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s1); min-height: 44px; font-weight: 600; cursor: pointer; list-style: none; }
.timebox summary::-webkit-details-marker { display: none; }
.timebox summary > span:first-child { flex: none; } /* 요약이 길어져도 "공부 시간"은 한 줄로 */
.timebox summary .sub { margin: 0; font-weight: 400; text-align: right; }
.timebox[open] summary { margin-bottom: var(--s1); }
.timebox .row { padding-bottom: var(--s2); }
input[type="date"] { padding: 0 var(--s1); }
.row.time { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.row.time > label:first-child { grid-column: 1 / -1; }
/* 바쁜 요일: 요일 칩 일곱 개가 한 줄에 들어가게 칩을 좁힌다(320px 폰에서도) */
.busy { padding-bottom: var(--s2); }
.busy-q { margin: 0 0 var(--s1); font-size: 14px; color: var(--ink-2); }
.busy-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.busy-days .schip { padding: 0; min-height: 44px; }
.busy-min { display: block; margin-top: var(--s2); }
.detail textarea { margin: var(--s2) 0 0; }
.detail .actions { margin: var(--s1) 0; }
.detail details { margin: var(--s1) 0; font-size: 14px; }
.detail summary { color: var(--muted); font-weight: 600; }
.raw { white-space: pre-wrap; max-height: 160px; overflow: auto; font-size: 13px; color: var(--muted); }
.items { display: flex; flex-direction: column; gap: var(--s2); margin: var(--s2) 0; }
.it { display: flex; flex-direction: column; gap: 6px; padding-bottom: var(--s2); border-bottom: 1px solid var(--line); }
.it-head { display: flex; gap: var(--s1); align-items: center; }
.it-head input { flex: 1; min-width: 0; }
.it .del { flex: none; min-width: var(--tap); color: var(--muted); }
.it-line { display: flex; align-items: center; justify-content: space-between; gap: var(--s1); }
.it-sum { color: var(--ink-2); font-size: 13px; }
.it-toggle { min-height: 44px; font-size: 14px; }
.it-edit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s1); }
.it-edit[hidden] { display: none; }
.it .warn { color: var(--warn); font-size: 13px; }
.est { margin-top: var(--s1); }

/* ---------- 계획 화면 ---------- */
.hero { padding: var(--s1) 0 var(--s2); }
.hero .sub { margin-top: var(--s1); }
.notes { list-style: none; margin: var(--s2) 0 0; padding: var(--s2); border-radius: var(--r-card); background: var(--warn-soft); color: var(--ink); font-size: 14px; }
.notes:empty { display: none; }
.notes.calm { background: var(--surface-2); }
.notes li + li { margin-top: var(--s1); }
.notes details summary { color: var(--ink-2); font-size: 13px; }
.notes details p { margin: var(--s1) 0 0; }

.today .card-head { margin-bottom: var(--s1); }
.empty { padding: var(--s2) 0; }
.empty b { display: block; font-size: 17px; margin-bottom: var(--s1); }
.empty .sub { font-size: 15px; }

.goal { display: flex; flex-direction: column; gap: var(--s1); margin-top: var(--s2); font-size: 14px; color: var(--ink-2); }
.timer { margin-top: var(--s2); display: flex; flex-direction: column; gap: var(--s2); }
.timer .pair { margin-top: 0; }
label.inline { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s2); }
label.inline select { width: auto; min-width: 160px; }
.goal { padding-top: var(--s2); border-top: 1px solid var(--line); }
.timer-help { margin-top: var(--s2); font-size: 14px; }
.range-hint { margin-top: var(--s2); font-size: 14px; }
/* 기록이 하나도 없을 때(data-empty)는 레벨 카드, 배지, 안내만. 비어 있는 칸들(이번 주 0분, 빈 잔디)은 첫 기록이 생기면 나타난다.
   배지는 잠긴 채로 보여 줘서 무엇을 모을 수 있는지 처음부터 알게 한다 */
#recordView[data-empty] > :not(h2):not(.rec-empty):not(#lvCard):not(#badgeBox):not(#hint) { display: none; }
.rec-empty { margin: var(--s1) 0 0; font-size: 15px; color: var(--ink-2); }
/* 평소 모드와 매일 할 일 */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* 단계 탑 마크: 첫 화면 마크와 같은 세 칸 탑. 단계마다 아래부터 한 칸씩 채워진다(모드 고르기 1칸, 다음 화면 2칸) */
.step-tower { display: block; color: var(--accent); margin-bottom: 20px; }

/* "어떻게 쓸까요?": 제목 → 가운데 그림 두 장(아래 두 칸과 짝) → 고르는 칸 두 개 → 고르면 "이걸로 시작" */
.mode-pick { display: flex; flex-direction: column; padding: 40px 0 24px; }
.mode-pick h1 { font-size: 30px; letter-spacing: -0.03em; line-height: 1.25; }
.mode-pick .lead { margin: 10px 0 0; font-size: 16px; color: var(--ink-2); }
.mp-opts { display: grid; gap: 12px; }
.mode-opt { display: grid; grid-template-columns: 44px 1fr; align-items: center; column-gap: 14px; row-gap: 2px; padding: 18px; min-height: 88px; border: 1px solid var(--hair-strong); border-radius: 20px; background: var(--surface); color: var(--ink); text-align: left; transition: border-color 160ms ease-out, background-color 160ms ease-out; }
.mode-opt .mo-ico { grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.mode-opt b { grid-column: 2; font-size: 18px; font-weight: 600; }
.mode-opt span:not(.mo-ico) { grid-column: 2; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.mode-opt[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--accent-soft); }
.pick-go { min-height: 54px; border-radius: 16px; font-size: 17px; margin-top: 4px; }
.pick-go:disabled { visibility: hidden; } /* 고르기 전에는 안 보이지만 자리는 잡아 두어 나타날 때 칸이 튀지 않게(hidden은 자리까지 없앤다) */
@keyframes pick-go-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pick-go:not(:disabled) { animation: pick-go-in 220ms var(--ease-out); }
/* 그림 두 장: 첫 화면 그림처럼 어두운 카드 + 흰 카드, 색은 고정. 고르면 그쪽이 앞으로 나와 밝아지고 다른 쪽은 흐려진다 */
.mode-art { position: relative; height: 214px; margin: 12px 0; zoom: 0.92; }
.mode-art[hidden] { display: none; }
.ma-card { position: absolute; box-sizing: border-box; border-radius: 20px; padding: 16px; overflow: hidden; cursor: pointer; white-space: nowrap; transition: opacity 200ms ease-out, transform 260ms var(--ease-out); }
.ma-lb { display: block; font-size: 11px; letter-spacing: 0.08em; margin-bottom: 12px; overflow: hidden; text-overflow: ellipsis; }
.ma-daily { left: 50%; margin-left: -162px; top: 0; width: 196px; background: #10161c; color: #ffffff; border: 1px solid #2a3442; }
.ma-daily .ma-lb { color: #9aa4b0; }
.ma-row { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1; }
.ma-row + .ma-row { margin-top: 12px; }
.ma-row span:last-child { overflow: hidden; text-overflow: ellipsis; }
.ma-row.done span:last-child { color: #8a94a3; text-decoration: line-through; }
.ma-box { position: relative; flex: none; width: 18px; height: 18px; border-radius: 6px; border: 1.8px solid #5b6675; box-sizing: border-box; }
.ma-box.on { background: #4fd1c5; border-color: #4fd1c5; }
.ma-box.on::after { content: ""; position: absolute; left: 5px; top: 1.5px; width: 4px; height: 8px; border: solid #04201d; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ma-exam { left: 50%; margin-left: -14px; top: 74px; width: 176px; background: #ffffff; color: #111111; border: 1px solid #e3e6ea; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12); }
.ma-exam .ma-lb { color: #666666; }
.ma-dd { display: flex; align-items: baseline; gap: 8px; overflow: hidden; }
.ma-dd b { font-size: 34px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.ma-dd span { font-size: 14px; color: #444444; }
.ma-segs { display: flex; gap: 4px; margin-top: 14px; }
.ma-segs i { flex: 1; height: 6px; border-radius: 99px; background: #e3e6ea; }
.ma-segs i.on { background: #0f766e; }
#modePick[data-pick] .ma-card { opacity: 0.35; }
#modePick[data-pick="daily"] .ma-daily, #modePick[data-pick="exam"] .ma-exam { opacity: 1; transform: scale(1.04); z-index: 2; }
#modePick[data-pick="daily"] .ma-daily { box-shadow: 0 0 0 2px var(--accent); }
#modePick[data-pick="exam"] .ma-exam { box-shadow: 0 0 0 2px var(--accent), 0 10px 28px rgba(0, 0, 0, 0.12); }
/* 어두운 화면: 어두운 카드는 배경에 묻히지 않게 살짝 밝히고, 흰 카드는 덜 튀게 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ma-daily { background: #1e2630; border-color: #334050; }
  :root:not([data-theme="light"]) .ma-exam { background: #eef1f4; border-color: transparent; box-shadow: none; }
}
:root[data-theme="dark"] .ma-daily { background: #1e2630; border-color: #334050; }
:root[data-theme="dark"] .ma-exam { background: #eef1f4; border-color: transparent; box-shadow: none; }
/* 작은 폰: 그림을 줄이고, 화면이 아주 낮으면 그림을 빼서 고르는 칸과 시작 단추가 늘 한 화면 안에 들어오게 */
@media (max-width: 359px) { .mode-art { zoom: 0.8; } }
@media (max-height: 760px) {
  .mode-pick { padding-top: 20px; }
  .mode-pick .step-tower { margin-bottom: 12px; }
  .mode-pick h1 { font-size: 26px; }
  .mode-art { zoom: 0.72; margin: 4px 0; }
  .mode-opt { min-height: 76px; padding-top: 14px; padding-bottom: 14px; }
}
@media (max-height: 600px) { .mode-art { display: none; } }

.mode-nudge { display: flex; align-items: center; justify-content: space-between; gap: var(--s1); flex-wrap: wrap; margin: 0 0 var(--s2); padding: var(--s1) var(--s2); border-radius: var(--r-card); background: var(--surface-2); font-size: 14px; color: var(--ink-2); }
.mode-nudge .linklike { min-height: var(--tap); color: var(--accent); }
.first-tip { margin: var(--s2) 0 0; padding: var(--s1) var(--s2); border-radius: var(--r-ctl); background: var(--surface-2); color: var(--ink-2); font-size: 14px; }
.add-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: var(--tap); margin-top: var(--s2); border: 1px solid var(--hair-strong); border-radius: var(--r-ctl); background: var(--surface); color: var(--ink); font-size: 15px; font-weight: 600; }
.add-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 60px; padding: var(--s1) var(--s2); border: 1px solid var(--hair-strong); border-radius: var(--r-ctl); background: var(--surface); color: var(--ink); text-align: left; }
.add-opt b { font-size: 15px; }
.add-opt small { font-size: 13px; color: var(--ink-2); }
.add-opt[aria-expanded="true"] { border-color: var(--accent); }
.starter-list { display: flex; flex-direction: column; gap: var(--s1); }
.starter { display: flex; align-items: center; justify-content: flex-start; gap: 14px; width: 100%; min-height: 60px; padding: 12px 16px; border: 1px solid var(--hair-strong); border-radius: 16px; background: var(--surface); color: var(--ink); text-align: left; }
/* 왼쪽 동그란 고르기 표시(고른 칸은 가운데가 채워지고 칸이 옅은 청록) */
.starter::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--hair-strong); box-sizing: border-box; }
.starter[aria-checked="true"]::before { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 4.5px, transparent 5px); }
.starter b { display: block; font-size: 15px; }
.starter small { font-size: 13px; color: var(--ink-2); }
.starter[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); }
#starterDialog h3 { font-size: 24px; letter-spacing: -0.03em; }
#starterDialog .dlg > p.sub { margin-top: 6px; }
#starterDialog .actions { display: grid; grid-template-columns: 1fr; gap: 4px; margin-top: 20px; }
#starterGo { width: 100%; min-height: 54px; border-radius: 16px; font-size: 17px; }
#starterSkip { justify-self: center; min-height: 44px; text-decoration: none; color: var(--ink-2); }
.learned { margin-top: var(--s2); padding: var(--s2); border-radius: var(--r-card); background: var(--surface-2); }
.learned-lb { display: block; margin-bottom: var(--s1); font-size: 14px; font-weight: 600; }
.learned-row { display: flex; gap: var(--s1); }
.learned-row input { flex: 1; min-width: 0; }
.learned .sub { margin: var(--s1) 0 0; font-size: 13px; }
.rt-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink-2); }
.rt-list-h { margin-top: var(--s2); font-size: 16px; }
.rt-row { display: grid; grid-template-columns: 10px 1fr auto auto; align-items: center; gap: var(--s1); padding: 6px 0; border-top: 1px solid var(--hair); }
.rt-row .dot { width: 10px; height: 10px; border-radius: 50%; }
.rt-row small { color: var(--ink-3); font-size: 12px; }
.rt-del { min-height: 44px; color: var(--ink-2); font-size: 13px; }

/* 지난 날에 못 한 공부: 오늘 할 공부 위에서 한 번 묻는다 */
.overdue { margin: 0 0 var(--s2); padding: var(--s2); border-radius: var(--r-card); background: var(--surface-2); }
.overdue p { margin: 0 0 var(--s1); font-size: 15px; }
.overdue-actions { display: flex; align-items: center; gap: var(--s2); }
.overdue-actions .primary { flex: 1; min-height: var(--tap); }
.overdue-actions .linklike { min-height: var(--tap); color: var(--ink-2); }
.tdisplay { font-size: 48px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; line-height: 1.2; }
.timer.idle .tdisplay, .timer.idle .timer-more { display: none; }
#tStart { min-height: 56px; font-size: 17px; }

.stats h2 { margin-bottom: var(--s2); }
.lv { display: flex; flex-direction: column; gap: var(--s1); }
.lv-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s1); flex-wrap: wrap; }
.chips { display: flex; gap: var(--s1); flex-wrap: wrap; margin-top: var(--s2); }
.chip { background: var(--accent-soft); border-radius: 99px; padding: 0 var(--s2); line-height: 32px; font-size: 14px; color: var(--ink-2); }
/* 기록 탭 맨 위: 레벨 카드(링이 다음 레벨까지의 진행) */
.lv-card { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s1); padding: var(--s2); border-radius: var(--r-card); background: var(--surface-2); }
.ring { width: 86px; height: 86px; flex: none; }
.ring-bg { fill: none; stroke: var(--hair-strong); stroke-width: 8; }
.ring-fg { fill: none; stroke: var(--accent); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 226.2; stroke-dashoffset: 226.2; transform: rotate(-90deg); transform-origin: 43px 43px; }
.ring-wrap { position: relative; width: 86px; height: 86px; flex: none; }
.ring-wrap .ring { position: absolute; inset: 0; }
.ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.ring-icon { display: flex; color: var(--accent); }
.ring-lv { font-size: 10px; font-weight: 600; color: var(--ink-3); }
.lv-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lv-info strong { font-size: 17px; font-weight: 600; }
.lv-next { font-size: 12px; color: var(--ink-3); }
.lv-to { font-size: 15px; font-weight: 600; color: var(--accent); }
.lv-path { flex: 1 0 100%; display: flex; justify-content: space-between; gap: 4px; padding-top: var(--s1); }
.lvc { flex: 1 1 0; max-width: 28px; min-width: 0; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--surface); color: var(--ink-2); }
.lvc.cur { background: var(--accent); color: var(--on-accent); }
.lvc.locked { opacity: 0.5; color: var(--ink-3); font-size: 13px; font-weight: 600; }
.lv-week { align-self: flex-start; margin-top: 6px; padding: 3px 10px; border-radius: 999px; background: var(--surface); font-size: 12px; color: var(--ink-2); }

/* 기록 탭 위쪽: 큰 숫자, 요일 막대, 잔디 달력 */
.rec-week { margin-top: var(--s3); }
.rec-label { margin: 0; font-size: 13px; color: var(--ink-3); }
.rec-big { margin: 2px 0 0; display: flex; align-items: baseline; gap: 2px; color: var(--ink-2); font-size: 16px; }
.rec-big b { font-family: var(--display); font-size: 48px; font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums; }
.rec-big b + span + b { margin-left: 4px; }
.rec-delta { display: inline-block; margin: var(--s1) 0 0; padding: 4px 12px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: 13px; font-weight: 600; }
.rec-delta[data-kind="more"], .rec-delta[data-kind="rested"] { background: var(--accent-soft); color: var(--accent); }
.rec-days { display: flex; align-items: flex-end; gap: var(--s1); margin-top: var(--s2); }
.rd-col { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; text-align: center; }
.rd-col > span { font-size: 11px; color: var(--ink-3); }
.rd-col.today > span { color: var(--accent); font-weight: 600; }
.rd-col.future { opacity: 0.45; }
.rd-stack { display: flex; flex-direction: column-reverse; justify-content: flex-start; gap: 2px; min-height: 96px; }
.rd-seg { display: block; border-radius: 3px; }
.rd-none { display: block; height: 4px; border-radius: 2px; background: var(--hair); margin-top: auto; }
.rd-stack:has(.rd-none) { justify-content: flex-start; }
.rec-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s1); margin-top: var(--s2); }
.rec-card { padding: var(--s2); border-radius: var(--r-card); background: var(--surface-2); }
.rec-card span { display: block; font-size: 12px; color: var(--ink-3); }
.rec-card b { display: block; margin-top: 2px; font-size: 22px; font-weight: 600; }
.rec-note { margin: var(--s2) 0 0; padding: var(--s2); border-radius: var(--r-card); background: var(--surface-2); font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.rec-grass { margin-top: var(--s4); }
.grass-dow, .grass { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.grass-dow { margin-top: var(--s1); font-size: 10px; color: var(--ink-3); text-align: center; }
.grass { margin-top: 4px; }
.g { display: block; aspect-ratio: 1; border-radius: 6px; background: var(--surface-2); }
.g1 { background: color-mix(in srgb, var(--accent) 30%, var(--surface-2)); }
.g2 { background: color-mix(in srgb, var(--accent) 60%, var(--surface-2)); }
.g3 { background: var(--accent); }
.g.today { outline: 2px solid var(--ink); outline-offset: 1px; }
.g.future { opacity: 0.35; }
.grass-legend { display: flex; align-items: center; justify-content: flex-end; gap: 5px; margin-top: var(--s1); font-size: 10px; color: var(--ink-3); }
.grass-legend .g { width: 12px; height: 12px; border-radius: 3px; aspect-ratio: auto; }
.rec-month { margin: var(--s2) 0 0; font-size: 16px; font-weight: 600; }
.rec-grass .sub { margin: 2px 0 0; }
.week-study, .exam-review { margin-top: var(--s3, 24px); }
.week-study h3, .exam-review h3 { font-size: 16px; margin: 0; }
#weekBars { display: flex; flex-direction: column; gap: var(--s1); margin-top: var(--s1); }
.ws-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--s1); align-items: center; font-size: 14px; }
.ws-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ws-min { color: var(--muted); font-variant-numeric: tabular-nums; }
.ws-bar { grid-column: 1 / -1; height: 12px; position: relative; }
.ws-plan { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink); opacity: 0.7; }
.review-row { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s1) 0; border-top: 1px solid var(--line); }
.reasons { display: flex; flex-wrap: wrap; gap: var(--s1); }
/* 시험 점수: 과목 줄마다 점수 칸과 지난 시험 비교 */
.score-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); }
.score-lb { font-size: 14px; color: var(--ink-2); }
.score-in { width: 88px; min-height: 44px; text-align: right; }
.score-delta { font-size: 13px; color: var(--ink-2); }
.score-msg { flex-basis: 100%; font-size: 13px; color: var(--warn); }
.score-summary { margin: var(--s2) 0 0; font-size: 14px; color: var(--ink); font-weight: 600; }
.reason { min-height: 44px; padding: 0 var(--s2); font-size: 14px; background: var(--card); border: 1px solid var(--line); color: var(--ink-2); }
.review-actions { display: flex; flex-direction: column; gap: var(--s1); margin-top: var(--s1); }
.review-actions button { width: 100%; min-height: var(--tap); border: 1px solid var(--line); background: transparent; color: var(--ink); }
/* 눌리지 않는 버튼: 투명도로 흐리게 하지 않고, 연한 회색 바탕에 진한 회색 글자(대비 4.5:1 이상)로 보여 준다 */
.review-actions button:disabled { opacity: 1; background: var(--line); border-color: var(--line); color: var(--muted); cursor: not-allowed; }
#reviewNote { margin: var(--s1) 0 0; }
#reviewPanel { margin-top: var(--s1); }
.reason.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.badges { margin-top: var(--s2); }
/* 배지 줄: 칸 수는 badge-shelf-ui.js가 배지 수에 맞춘다(한 줄에 7개까지). 못 받은 배지는 흐린 아이콘 + 자물쇠 */
.badge-row { display: grid; gap: 6px; margin-top: var(--s1); }
.badge-dot { position: relative; aspect-ratio: 1; min-height: 44px; min-width: 44px; width: 100%; max-width: 48px; justify-self: center; padding: 0; border: 1px solid transparent; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; font-size: 17px; line-height: 1; }
.badge-dot .ico { filter: grayscale(1); opacity: 0.35; }
.badge-dot .lock { position: absolute; right: -2px; bottom: -2px; font-size: 10px; filter: grayscale(1); opacity: 0.7; }
.badge-dot.on { background: var(--accent-soft); }
.badge-dot.on .ico { filter: none; opacity: 1; }
.badge-dot[aria-pressed="true"] { border-color: var(--accent); }
.badge-info { margin: var(--s1) 0 0; padding: 10px 14px; border-radius: var(--r-card); background: var(--surface-2); color: var(--ink-2); font-size: 14px; }

.viewbar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s1); margin: 0 0 var(--s2); } /* 단추 개수만큼 같은 폭의 칸(보기 탭 4개, 화면 색 3개) */
.viewbar button { background: var(--card); border-color: transparent; color: var(--ink-2); }
.viewbar button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
/* 화면 색 고르기: 선택지마다 테두리를 두고, 고른 것은 강조색 테두리로 보여 준다 */
#themeBar button { border: 1px solid var(--line); }
#themeBar button[aria-pressed="true"] { border-color: var(--accent); }
.views { min-height: 240px; }
.card.views:has(#days:not([hidden])) { background: none; border: 0; padding: 0; min-height: 0; }
.manage summary { color: var(--ink-2); }
.target { margin-bottom: var(--s2); }
.target-h { font-size: 16px; margin: var(--s1) 0; }
.target-row { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s1); }
.target-row label { display: flex; align-items: center; gap: var(--s1); font-weight: 600; }
.target-row select { width: auto; min-width: 120px; }
.target .sub { margin: var(--s1) 0 0; }
.manage .actions { margin-bottom: 0; }
.manage.card { padding-top: var(--s1); padding-bottom: var(--s1); }
.manage-h { font-size: 16px; margin: var(--s2) 0 var(--s1); }
.manage > .sub { margin: var(--s1) 0 0; }

/* 날짜별 목록과 오늘 목록이 같이 쓰는 줄 */
.daytools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s1); margin-bottom: var(--s1); }
.daytools-gap { flex: 1; } /* 왼쪽은 저장 단추, 오른쪽은 접기·펼치기 */
.daytools button { min-height: var(--tap); font-size: 14px; }
.day { border-top: 1px solid var(--line); }
.group-body > .day:first-child { border-top: 0; }
/* 묶음(지난 날, 이번 주, 다음 주 ...) */
.weekgroup { border: 1px solid var(--hair); border-radius: var(--r-card); margin-bottom: var(--s1); }
.weekgroup.now { border-color: var(--accent); }
.weekgroup > summary { padding: var(--s1) var(--s2); }
.weekgroup[open] > summary { border-bottom: 1px solid var(--line); }
.group-title { flex: 1 1 auto; min-width: 0; display: flex; gap: var(--s1); align-items: center; flex-wrap: wrap; font-size: 16px; font-weight: 600; }
.group-range { color: var(--muted); font-size: 14px; font-weight: 500; }
.group-meta { flex: none; color: var(--muted); font-size: 14px; font-weight: 500; }
.group-body { padding: 0 var(--s2); }
.group-body .day.today { margin-left: 0; margin-right: 0; }
.day > summary { gap: var(--s1); padding: var(--s1) 0; }
.day-title { flex: 1 1 auto; min-width: 0; display: flex; gap: var(--s1); align-items: center; flex-wrap: wrap; font-size: 16px; font-weight: 600; }
.day-meta { flex: none; color: var(--muted); font-size: 14px; font-weight: 500; }
.day-body { padding-bottom: var(--s2); }
.day.today { background: var(--accent-soft); margin: var(--s1) calc(-1 * var(--s2)); padding: 0 var(--s2); border-radius: var(--r-card); border-top: 0; }
/* 이번 주: 요일 칸 한 줄 + 고른 날 하나 */
.weekstrip { border: 1px solid var(--accent); border-radius: var(--r-card); margin-bottom: var(--s1); padding: var(--s1) var(--s2) 0; }
.strip-head { display: flex; gap: var(--s1); align-items: baseline; font-size: 16px; font-weight: 600; margin-bottom: var(--s1); }
.strip-days { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.strip-day { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: var(--tap); padding: 6px 0; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--card); color: var(--ink-2); font: inherit; }
.strip-day .sd-week { font-size: 12px; color: var(--muted); }
.strip-day .sd-num { font-size: 16px; font-weight: 600; color: var(--ink); }
.strip-day .sd-meta { font-size: 11px; color: var(--muted); }
.strip-day.exam { border-color: var(--warn); }
.strip-day.exam .sd-meta { color: var(--warn); font-weight: 600; }
.strip-day.done .sd-meta { color: var(--accent); font-weight: 600; }
.strip-day.today .sd-week { color: var(--accent); font-weight: 600; }
.strip-day.on { background: var(--accent-soft); border-color: var(--accent); border-width: 2px; padding: 5px 0; }
.strip-pane { padding-top: var(--s1); }
.strip-title { display: flex; gap: var(--s1); align-items: center; justify-content: space-between; padding: var(--s1) 0; }
.tag { font-size: 12px; font-weight: 600; padding: 0 var(--s1); line-height: 24px; border-radius: 99px; background: var(--accent); color: var(--accent-ink); }
.tag.exam { background: var(--warn); color: var(--on-danger); }
.tag.past { background: var(--line); color: var(--muted); }
.item { flex-direction: row; gap: var(--s2); align-items: flex-start; padding: var(--s1) 0; min-height: var(--tap); color: var(--ink); font-size: 16px; font-weight: 400; cursor: pointer; }
.item input { margin-top: 0; }
.item .dot { width: var(--s1); height: var(--s1); border-radius: 50%; flex: none; margin-top: var(--s1); }
.item.done .txt { text-decoration: line-through; color: var(--muted); }
#todayList .item { padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
#todayList .item:last-child { border-bottom: 0; }
.txt { font-size: 16px; line-height: 1.5; }
.txt b { font-weight: 600; }
.txt small { color: var(--muted); font-size: 14px; }
.free { color: var(--muted); font-size: 14px; }

/* ---------- 캘린더 ---------- */
.calhead { display: flex; align-items: center; justify-content: center; gap: var(--s1); margin-bottom: var(--s2); }
.calhead strong { min-width: 120px; text-align: center; font-size: 17px; }
.calhead button { border-color: transparent; background: transparent; }
.calhead #calToday { color: var(--accent); }
.calgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; }
.calgrid.wd { margin-bottom: var(--s1); text-align: center; font-size: 12px; color: var(--muted); }
.calgrid.wd span:first-child { color: var(--warn); }
/* 달력 칸. 시험은 칸 전체(배경+글자), 일정은 보라 막대, 공부는 과목 색 점, 오늘은 숫자를 동그라미로 둘러싼다 */
.cell { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0; padding: var(--s1) 0; min-height: 72px; border-radius: var(--r-ctl); border: 0; background: transparent; font-weight: 500; font-size: 15px; }
.cell.other { opacity: 0.35; }
.dn { display: inline-flex; align-items: center; justify-content: center; width: var(--s3); height: var(--s3); border-radius: 50%; font-size: 15px; line-height: 1; }
.cell.today .dn { color: var(--accent); font-weight: 600; box-shadow: inset 0 0 0 2px var(--accent); }
.cell.has-exam { background: var(--warn-soft); }
.cell.has-exam .dn { color: var(--warn); font-weight: 600; }
.cell.has-exam.today .dn { box-shadow: inset 0 0 0 2px var(--warn); }
.exam-tag { font-size: 12px; font-weight: 600; line-height: var(--s2); color: var(--warn); }
.cell.sel { background: var(--accent-soft); color: var(--accent); font-weight: 600; box-shadow: inset 0 0 0 2px var(--accent); }
.cell.has-exam.sel { background: var(--warn-soft); }
.marks { display: flex; gap: 2px; flex-wrap: wrap; align-items: center; justify-content: center; min-height: var(--s2); }
.dot { display: inline-block; width: 6px; height: 6px; flex: none; border-radius: 50%; }
.ev-bar { display: inline-block; width: var(--s2); height: 4px; flex: none; border-radius: 2px; }
.more { font-size: 11px; line-height: var(--s2); color: var(--muted); }
.study { min-height: var(--s2); font-size: 11px; font-weight: 600; line-height: var(--s2); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.study-sample { font-size: 11px; font-weight: 600; color: var(--ink-2); }
.legend { margin: var(--s2) 0 0; display: flex; align-items: center; gap: var(--s1) var(--s2); flex-wrap: wrap; }
.legend .lg { display: inline-flex; align-items: center; gap: var(--s1); }
.lg-exam { padding: 0 var(--s1); border-radius: var(--s1); background: var(--warn-soft); color: var(--warn); font-size: 12px; font-weight: 600; line-height: var(--s3); }
.lg-today { padding: 0 var(--s1); border-radius: 99px; color: var(--accent); font-size: 12px; font-weight: 600; line-height: 20px; box-shadow: inset 0 0 0 2px var(--accent); }
.daydetail { margin-top: var(--s2); padding: var(--s2); border-radius: var(--r-card); background: var(--ground); }
.daydetail h4 { margin: 0 0 var(--s1); }
.daydetail > button { margin-top: var(--s1); }
.ev { display: flex; justify-content: space-between; gap: var(--s1); align-items: flex-start; padding: var(--s1) 0; }
.ev.exam { color: var(--warn); font-weight: 600; }
.ev .memo { white-space: pre-line; font-size: 14px; color: var(--muted); }
.ev .auto { display: block; color: var(--accent); font-size: 13px; }
.upcoming { list-style: none; padding: 0; margin: 0; }
/* 줄 안의 조각(남은 날, 날짜, 제목) 사이는 gap으로 띄운다. flex에서는 글자 사이 빈칸이 사라진다 */
.upcoming li { display: flex; align-items: center; gap: var(--s2); min-height: var(--tap); padding: var(--s1) 0; border-top: 1px solid var(--line); cursor: pointer; font-size: 15px; }
.upcoming .dd { flex: none; min-width: 56px; }
.upcoming .when { flex: none; min-width: 40px; color: var(--muted); font-variant-numeric: tabular-nums; }
.upcoming .what { flex: 1 1 auto; min-width: 0; }
.upcoming li.exam { color: var(--warn); font-weight: 600; }
.upcoming li.exam .when { color: inherit; }
#calAdd { width: 100%; min-height: var(--tap); margin-bottom: var(--s1); border: 1px solid var(--line); color: var(--ink); }

/* ---------- 창(대화상자) ---------- */
dialog { width: min(calc(100vw - var(--s4)), 440px); max-height: 88vh; max-height: 88dvh; overflow: auto; border: 0; border-radius: var(--r-card); background: var(--surface); color: var(--ink); padding: var(--s3); }
/* 입력 칸이 맨 앞인 창(로그인·가입·매일 할 일)은 열 때 제목에 먼저 초점을 둔다(autofocus). 입력 칸에 바로 가면 아이폰이 키보드를 올리며 창을 밀어 올려 제목과 이메일 칸이 안 보였다. 제목에는 초점 테두리를 그리지 않는다 */
dialog h3[tabindex="-1"]:focus { outline: none; }
dialog::backdrop { background: rgba(0, 0, 0, 0.4); }
dialog form, .dlg, .stack { display: flex; flex-direction: column; gap: var(--s2); }
.stack .linklike, dialog form > .linklike { align-self: flex-start; min-height: var(--tap); }
.warn-text { color: var(--warn); font-size: 14px; margin: 0; }
/* 창이 길어서 스크롤해도 아래 버튼이 늘 보이게 붙여 둔다 */
dialog .actions.sticky { position: sticky; bottom: calc(-1 * var(--s3)); z-index: 1; margin: 0 calc(-1 * var(--s3)); padding: var(--s2) var(--s3); background: var(--surface); border-top: 1px solid var(--line); }
dialog .switch { margin: 0; text-align: center; font-size: 14px; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: var(--s1); flex-wrap: wrap; }
dialog .switch .linklike { min-height: var(--tap); }
body.authwait .landing { visibility: hidden; }
/* 로그인 상태를 읽는 동안(이미 로그인한 사람도 매번 잠깐 거친다): 바탕은 흰 첫 화면이 아니라 앱 바탕색이다.
   흰색이면 어두운 화면을 쓰는 사람에게 켤 때마다 밝게 번쩍였다. "불러오는 중" 글도 0.6초가 지나야 보인다(금방 끝나면 안 보이게) */
body.authwait.locked { background: var(--ground); }
body.authwait.locked::before { content: "불러오는 중이에요…"; display: block; text-align: center; padding: var(--s6) var(--s2); color: var(--muted); animation: authwait-note 0s linear 0.6s both; }
@keyframes authwait-note { from { visibility: hidden; } to { visibility: visible; } }
dialog h3 { margin: 0; font-size: 20px; }
dialog .actions { margin: var(--s1) 0 0; }
dialog .row { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
dialog pre { white-space: pre-wrap; max-height: 160px; overflow: auto; font-size: 13px; color: var(--muted); }
dialog a { color: var(--accent); }
@media (max-width: 560px) {
  /* 휴대폰에서는 아래에서 올라오는 창으로 보여 엄지로 누르기 쉽게 한다 */
  dialog { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: var(--r-card) var(--r-card) 0 0; padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom)); }
}
label.check { flex-direction: row; align-items: flex-start; gap: var(--s1); color: var(--ink); font-size: 15px; font-weight: 400; cursor: pointer; }
.consent-sum { font-size: 13px; color: var(--muted); border-radius: var(--r-ctl); padding: 0 var(--s2); background: var(--ground); }
/* 로그인·가입 창: 동의는 한 상자. "전체 동의"는 크게 맨 위, 필수 세 줄은 작게(필수 표시만 청록) */
#signupDialog h3 { font-size: 24px; letter-spacing: -0.03em; }
#suBanner { background: var(--surface-2); color: var(--ink-2); font-size: 13px; padding: 10px 14px; }
.stack.consent { gap: 0; padding: 4px 0; border: 1px solid var(--hair-strong); border-radius: 16px; }
.consent > label.check { padding: 10px 16px; font-size: 14px; color: var(--ink-2); align-items: center; }
.consent > label.consent-all { padding: 14px 16px; margin-bottom: 4px; border-bottom: 1px solid var(--hair); font-size: 16px; font-weight: 600; color: var(--ink); }
.consent .req { flex: none; white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--accent); }
.consent .consent-sum { margin: 4px 12px 8px; padding: 0 4px; background: transparent; }
#signupDialog .actions.sticky { display: grid; grid-template-columns: 1fr; gap: 4px; }
#suSubmit { width: 100%; min-height: 54px; border-radius: 16px; font-size: 17px; }
#suCancel { justify-self: center; min-height: 44px; border: 0; background: none; color: var(--ink-2); }
.consent-sum summary { font-size: 14px; font-weight: 600; }
.consent-sum[open] { padding-bottom: var(--s1); }
.consent-sum ul, .terms-sum, .cmp ul { margin: var(--s1) 0 0; padding-left: var(--s3); }
.dlg h4 { margin: var(--s1) 0 0; }
.cmp { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s2); }
.cmp > div { border-radius: var(--r-card); padding: var(--s2); background: var(--ground); }
.cmp h4 { margin: 0; }
.cmp li { font-size: 14px; }
.info { display: grid; grid-template-columns: auto 1fr; gap: var(--s1) var(--s2); margin: 0; font-size: 15px; }
.info dt { color: var(--muted); }
.info dd { margin: 0; overflow-wrap: anywhere; }
.choices { display: flex; gap: var(--s1); flex-wrap: wrap; }
.ev-photo { display: grid; gap: var(--s1); margin-bottom: var(--s2); }
.ev-photo[hidden] { display: none; }
.ev-paste summary { color: var(--muted); font-size: 14px; font-weight: 600; min-height: var(--tap); display: flex; align-items: center; cursor: pointer; }
.ev-paste textarea { margin: var(--s1) 0; }
.legend .lg[hidden] { display: none; }
.ics-link { display: block; margin-top: var(--s2); }
.choices:empty { display: none; }

/* ---------- 알림 ---------- */
.toast { position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + var(--s2) + env(safe-area-inset-bottom)); transform: translate(-50%, var(--s2)); background: var(--ink); color: var(--card); padding: var(--s1) var(--s2); border-radius: var(--r-ctl); font-size: 15px; white-space: pre-line; text-align: center; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 40; width: max-content; max-width: calc(100vw - var(--s4)); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.confetti { position: fixed; top: -14px; width: 8px; height: 12px; z-index: 50; pointer-events: none; animation: fall 1.5s ease-in forwards; }
@keyframes fall { to { transform: translateY(108vh) rotate(540deg); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  button:active:not(:disabled) { transform: none; }
}

/* ---------- 로그인 전 첫 화면 ----------
   어두운 윗부분(제목, 한 줄 설명, 선과 점 세 개)이 차례로 나타나고, 그 아래에 안내와 로그인 단추가 가만히 놓인다 */
body.locked > header, body.locked > main { display: none; } /* 로그인 전에는 앱 내용을 가린다 */
.landing { display: none; }
body.locked .landing { display: flex; }
.landing { --ground: #ffffff; --surface: #ffffff; --surface-2: #f2f2f2; --ink: #0b0b0b; --ink-2: #444444; --ink-3: #666666; --hair: #e5e5e5; --hair-strong: #cfcfcf; --accent: #0b0b0b; --on-accent: #ffffff; --danger: #c4321f; --danger-soft: #fdecea; --bg: #ffffff; --card: #ffffff; --line: #e5e5e5; --muted: #666666; --accent-ink: #ffffff; --warn: #c4321f; --warn-soft: #fdecea; color-scheme: light; flex-direction: column; min-height: calc(100vh - var(--testbar-h, 0px)); min-height: calc(100svh - var(--testbar-h, 0px)); background: var(--ground); color: var(--ink); }
/* 첫 화면은 기기 설정과 상관없이 흰 바탕에 먹색이다(잡지 첫 장처럼). 색은 가운데 카드의 과목 색뿐이다. 아래 링크도 같은 바탕 위에 있으니 색을 맞춘다 */
body.locked { background: #ffffff; }
/* 켜지는 중(booting): 앱이 어느 화면을 보여 줄지 정하기 전에는 아무것도 보이지 않게 한다(입력 화면과 결과 화면이 0.1초 겹쳐 보이지 않게).
   배경은 앱 배경색이라 로그인한 사람은 흰 화면이 번쩍이지 않는다. 앱이 첫 화면을 그리면 app.js가 이 표시를 뗀다 */
body.booting > * { visibility: hidden; }
body.booting.locked { background: var(--ground); }
body.locked footer { --muted: #666666; --ink-2: #444444; --accent: #0b0b0b; --surface-2: #f2f2f2; }
/* 앱 화면 조각을 겹쳐 놓은 그림: 어두운 스톱워치 카드 위로 흰 "오늘" 카드가 걸친다. 설명 글은 넣지 않는다 */
.lp { position: relative; flex: none; width: 100%; max-width: 440px; height: 262px; margin: max(36px, env(safe-area-inset-top)) auto 0; }
.lp-label { display: block; font-size: 11px; letter-spacing: 0.14em; color: #666666; }
.lp-stop { position: absolute; left: 50%; top: 0; width: 184px; height: 124px; margin-left: -92px; padding: 16px; box-sizing: border-box; background: #10161c; border-radius: var(--r-card); }
.lp-stop .lp-label { color: #9aa4b0; }
.lp-time { display: block; margin-top: 14px; font-family: var(--display); font-size: 34px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; color: #ffffff; font-variant-numeric: tabular-nums; }
.lp-today { position: absolute; left: 50%; top: 100px; width: 216px; height: 154px; margin-left: -108px; padding: 14px; box-sizing: border-box; background: #ffffff; border: 1px solid var(--hair); border-radius: var(--r-card); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06); }
.lp-row { display: flex; gap: 8px; margin-top: 12px; }
.lp-row > div { flex: 1; min-width: 0; }
.lp-row .dim { flex: 0.5; opacity: 0.5; }
.lp-row i { display: block; height: 70px; border-radius: 8px; transform-origin: bottom; }
.lp-row em { display: block; margin-top: 6px; font-style: normal; font-family: var(--display); font-size: 12px; color: var(--ink); }
.landing-hero { flex: 1; display: flex; align-items: flex-start; background: var(--ground); }
.landing-hero-inner { width: 100%; max-width: 440px; margin: 0 auto; padding: var(--s5) var(--s3) var(--s3); text-align: center; }
.landing h1 { font-family: var(--display); font-size: clamp(40px, 13vw, 54px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; text-wrap: balance; color: var(--ink); }
/* 이름 앞의 탑 마크: 위로 갈수록 좁아지는 세 칸, 맨 위는 테두리만(아직 쌓는 중). 이름 글자는 app이 넣으므로 그림은 ::before로 붙인다.
   색은 앱 밝은 화면의 강조색(#0f766e). 글자 크기에 맞춰 함께 커지고 작아진다 */
.landing h1::before { content: ""; display: inline-block; width: 0.5em; height: 0.58em; margin-right: 0.2em; vertical-align: -0.02em;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 26'%3E%3Crect x='0' y='19' width='22' height='7' rx='1.6' fill='%230f766e'/%3E%3Crect x='3' y='10.5' width='16' height='7' rx='1.6' fill='%230f766e'/%3E%3Crect x='6' y='3' width='10' height='6' rx='1.4' fill='none' stroke='%230f766e' stroke-width='2'/%3E%3C/svg%3E"); }
.landing .tagline { margin: 12px 0 0; font-family: var(--display); font-size: 17px; font-weight: 500; line-height: 1.6; color: #222222; }
.landing-body { width: 100%; max-width: 440px; margin: 0 auto; padding: 0 var(--s2) calc(var(--s3) + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: var(--s1); }
.landing .sub { margin: 0; text-align: center; font-size: 13px; color: var(--ink-3); }
/* 단추는 앱 안의 단추와 같은 모서리(14px), 색은 탑 마크와 같은 진한 청록(흰 글자 대비 5.4 이상), 글자 간격은 넓게. 카드도 앱의 카드 모서리(16px)를 쓴다 */
.landing .primary { min-height: 52px; border-radius: var(--r-ctl); border-color: #0f766e; background: #0f766e; color: #ffffff; font-size: 14px; font-weight: 500; letter-spacing: 0.16em; }
/* 키가 작은 화면(작은 폰, 테스트 안내 띠가 있을 때): 그림과 여백을 줄여 로그인 버튼이 첫 화면 안에 보이게 한다 */
@media (max-height: 680px) {
  .lp { height: 200px; margin-top: var(--s2); }
  .lp-stop { width: 168px; height: 98px; margin-left: -84px; padding: 12px; }
  .lp-time { margin-top: 10px; font-size: 28px; }
  .lp-today { top: 76px; width: 196px; height: 122px; margin-left: -98px; padding: 12px; }
  .lp-row { margin-top: 8px; }
  .lp-row i { height: 50px; }
  .landing-hero-inner { padding-top: var(--s3); padding-bottom: var(--s2); }
  .landing h1 { font-size: clamp(36px, 12vw, 46px); }
  .landing .tagline { margin-top: 8px; font-size: 15px; }
}
/* 어두운 화면에서는 오프닝도 어둡게(시안 B, 2026-11-05): 로그인 전후로 색이 갑자기 바뀌지 않게 폰 설정(또는 내 계정의 화면 색)을 따른다.
   바탕은 앱 밤 화면 #0b0e12, 탑 마크·단추·스톱워치 카드는 민트 #4fd1c5, "오늘" 카드는 밝은 회색이라 어두운 바탕에서도 그림이 또렷하다.
   두 묶음(기기 설정이 어두움 / 내 계정에서 "어둡게")은 같은 규칙이다(test/dark-landing.test.mjs가 확인한다) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.locked { background: #0b0e12; }
  :root:not([data-theme="light"]) .landing { --ground: #0b0e12; --surface: #141920; --surface-2: #1b222b; --ink: #f2f4f7; --ink-2: #b3bbc7; --ink-3: #8a94a3; --hair: #232b35; --hair-strong: #3a4452; --accent: #4fd1c5; --on-accent: #04201d; --bg: #0b0e12; --card: #141920; --line: #232b35; --muted: #8a94a3; color-scheme: dark; }
  :root:not([data-theme="light"]) .landing .tagline { color: #b3bbc7; }
  :root:not([data-theme="light"]) .landing .primary { border-color: #4fd1c5; background: #4fd1c5; color: #04201d; font-weight: 600; }
  :root:not([data-theme="light"]) .landing h1::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 26'%3E%3Crect x='0' y='19' width='22' height='7' rx='1.6' fill='%234fd1c5'/%3E%3Crect x='3' y='10.5' width='16' height='7' rx='1.6' fill='%234fd1c5'/%3E%3Crect x='6' y='3' width='10' height='6' rx='1.4' fill='none' stroke='%234fd1c5' stroke-width='2'/%3E%3C/svg%3E"); }
  :root:not([data-theme="light"]) .lp-stop { background: #4fd1c5; }
  :root:not([data-theme="light"]) .lp-stop .lp-label { color: #04201d; }
  :root:not([data-theme="light"]) .lp-time { color: #04201d; }
  :root:not([data-theme="light"]) .lp-today { background: #eef1f4; border-color: transparent; box-shadow: 0 20px 44px rgba(0, 0, 0, 0.6); }
  :root:not([data-theme="light"]) .lp-today .lp-label { color: #4a5563; }
  :root:not([data-theme="light"]) .lp-row em { color: #0b0e12; }
  :root:not([data-theme="light"]) body.locked footer { --muted: #8a94a3; --ink-2: #b3bbc7; --accent: #4fd1c5; --surface-2: #1b222b; }
}
:root[data-theme="dark"] body.locked { background: #0b0e12; }
:root[data-theme="dark"] .landing { --ground: #0b0e12; --surface: #141920; --surface-2: #1b222b; --ink: #f2f4f7; --ink-2: #b3bbc7; --ink-3: #8a94a3; --hair: #232b35; --hair-strong: #3a4452; --accent: #4fd1c5; --on-accent: #04201d; --bg: #0b0e12; --card: #141920; --line: #232b35; --muted: #8a94a3; color-scheme: dark; }
:root[data-theme="dark"] .landing .tagline { color: #b3bbc7; }
:root[data-theme="dark"] .landing .primary { border-color: #4fd1c5; background: #4fd1c5; color: #04201d; font-weight: 600; }
:root[data-theme="dark"] .landing h1::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 26'%3E%3Crect x='0' y='19' width='22' height='7' rx='1.6' fill='%234fd1c5'/%3E%3Crect x='3' y='10.5' width='16' height='7' rx='1.6' fill='%234fd1c5'/%3E%3Crect x='6' y='3' width='10' height='6' rx='1.4' fill='none' stroke='%234fd1c5' stroke-width='2'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .lp-stop { background: #4fd1c5; }
:root[data-theme="dark"] .lp-stop .lp-label { color: #04201d; }
:root[data-theme="dark"] .lp-time { color: #04201d; }
:root[data-theme="dark"] .lp-today { background: #eef1f4; border-color: transparent; box-shadow: 0 20px 44px rgba(0, 0, 0, 0.6); }
:root[data-theme="dark"] .lp-today .lp-label { color: #4a5563; }
:root[data-theme="dark"] .lp-row em { color: #0b0e12; }
:root[data-theme="dark"] body.locked footer { --muted: #8a94a3; --ink-2: #b3bbc7; --accent: #4fd1c5; --surface-2: #1b222b; }

/* ---------- 복습 ----------
   체크한 직후 뜨는 "얼마나 알겠어요?" 창, 복습 탭의 "오늘 다시 볼 것", 오늘 화면의 "복습 N분" 한 줄 */
.level-opts { display: flex; flex-direction: column; gap: var(--s1); }
.level-opts button { display: flex; align-items: center; justify-content: flex-start; gap: 14px; min-height: var(--tap); padding: 0 var(--s3); }
.level-opts i { display: block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.level-what { margin: 0 0 4px; font-size: 14px; color: var(--ink-2); }
#levelDialog h3 { font-size: 22px; }
#levelDialog .linklike { align-self: center; min-height: var(--tap); color: var(--ink-2); text-decoration: none; }
#reviewDue .card-head { margin: 0 0 var(--s1); }
#reviewDue h2 { font-size: 22px; }
.rev-row { display: grid; grid-template-columns: 12px 1fr; column-gap: var(--s2); align-items: center; padding: var(--s2) 0; border-top: 1px solid var(--hair); }
.rev-dot { width: 12px; height: 12px; border-radius: 50%; display: block; }
.rev-txt b { display: block; font-size: 16px; font-weight: 600; }
.rev-txt small { display: block; margin-top: 2px; color: var(--ink-3); font-size: 13px; }
.rev-actions, .rev-running { grid-column: 1 / -1; margin-top: var(--s1); }
.rev-actions { display: flex; align-items: center; gap: var(--s2); }
.rev-start { flex: 1; min-height: 48px; }
.rev-pass { flex: none; min-height: 48px; padding: 0 var(--s1); color: var(--ink-2); text-decoration: none; }
.rev-running { margin-bottom: 0; font-size: 14px; color: var(--ink-2); }
.tab[data-due] { position: relative; }
.tab[data-due]::after { content: ""; position: absolute; top: 8px; left: calc(50% + 8px); width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* ---------- 아래쪽 ---------- */
footer { color: var(--muted); font-size: 13px; padding-top: var(--s4); padding-bottom: calc(var(--s6) + env(safe-area-inset-bottom)); }
footer p + p { margin-top: var(--s1); }
footer a { color: var(--ink-2); }
footer .linklike { min-height: 44px; }
/* 로그인한 뒤에는 맨 아래 글을 숨긴다(계정 창 "의견·약관"으로 옮김). footer 자체는 남겨서 아래 단추에 가리지 않게 띄우는 여백을 그대로 쓴다 */
body:not(.locked) footer > p { display: none; }
.acct-links { color: var(--muted); font-size: 14px; }
.acct-links a { color: var(--ink-2); }
.acct-links .linklike { min-height: 44px; }
#shop { margin-top: var(--s2); }

/* ---------- 약관 페이지 ---------- */
main.legal { max-width: 720px; margin: 0 auto; padding: var(--s3) var(--s2) var(--s6); }
.legal h1 { margin: var(--s2) 0 var(--s1); }
.legal h2 { font-size: 17px; margin: var(--s3) 0 var(--s1); }
.legal table { width: 100%; border-collapse: collapse; font-size: 14px; margin: var(--s1) 0; }
.legal th, .legal td { border: 1px solid var(--line); padding: var(--s1); text-align: left; vertical-align: top; }

/* ---------- 오늘 화면: 흐름 ----------
   맨 위 오늘 카드(한 줄, 칸 막대, 칩), 왼쪽 세로 줄 위에 시간순으로 놓인 오늘 할 공부, 화면 아래에 붙은 스톱워치 막대.
   색은 먹색과 청록 하나뿐이다(과목 색 점은 데이터 색이다). */
.flow-top .hero { padding: var(--s2) 0 var(--s1); }
/* 오늘 카드: 남은 일을 말하는 한 줄(크지만 화면을 차지하지 않게), 할 일 하나가 한 칸인 막대, 눌러서 가는 칩 */
.today-head { margin: 0; font-size: clamp(24px, 7vw, 28px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; text-wrap: balance; }
.today-segs { display: flex; gap: 3px; height: 6px; margin: var(--s2) 0 var(--s2); }
.today-segs .seg { flex: 1; border-radius: 3px; background: var(--hair); }
.today-segs .seg.on { background: var(--accent); }
.today-segs.flat { border-radius: 3px; background: var(--hair); overflow: hidden; }
.today-segs.flat .seg { flex: none; height: 100%; border-radius: 3px; }
.today-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.today-chips-dyn { display: contents; }
.chip-btn { display: inline-flex; align-items: center; min-height: 36px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--hair-strong); background: var(--surface); color: var(--ink-2); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chip-btn.urgent { border-color: transparent; background: var(--danger-soft); color: var(--danger); }
#recordSummary::after { content: "›"; margin-left: 4px; color: var(--ink-3); }

.flow-list { border-top: 0; }
.flow-list .card-head { margin: var(--s2) 0 var(--s1); }
.flow-list h2 { font-size: 15px; font-weight: 600; }
#todayList { position: relative; padding-left: 32px; }
#todayList::before { content: ""; position: absolute; left: 7px; top: 12px; bottom: 12px; width: 2px; background: var(--line); }
#todayList .item { position: relative; padding: var(--s2) 0; gap: var(--s2); align-items: center; border-bottom: 0; }
#todayList .item:last-child { border-bottom: 0; }
#todayList .item .dot { position: absolute; left: -32px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; margin: 0; box-shadow: 0 0 0 4px var(--bg); }
#todayList .item input { order: 3; margin-left: auto; }
.item input { appearance: none; -webkit-appearance: none; width: 28px; height: 28px; border-radius: 9px; border: 2px solid var(--ink-2); background: transparent; display: grid; place-items: center; cursor: pointer; transition: background-color 0.15s ease-out, border-color 0.15s ease-out; }
.item input:checked { background: var(--accent); border-color: var(--accent); }
.item input:checked::after { content: ""; width: 6px; height: 12px; border: solid var(--accent-ink); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px, -1px); }
#todayList .item .txt { order: 1; font-size: 18px; }
#todayList .item.done .txt { opacity: 0.55; }
.flow-list .timer-help { margin-top: var(--s2); }

/* 스톱워치 막대: 화면 아래에 붙는다 */
.dock { position: fixed; left: 12px; right: 12px; bottom: calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom)); z-index: 20; max-width: 416px; margin: 0 auto; background: var(--dock); color: var(--dock-ink); border-radius: 22px; padding: 12px 16px 14px; }
.dock .timer { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px 12px; margin: 0; }
.dock .dock-time { grid-column: 1; grid-row: 1; display: grid; gap: 6px; justify-items: start; min-width: 0; }
/* 어떤 과목으로 재는지 접힌 막대에서도 보이게 한다. 누르면 과목 고르기가 펼쳐진다 */
.dock .dock-subject { min-height: 0; width: auto; max-width: 100%; padding: 0; border: 0; background: none; color: var(--dock-ink); font-size: 15px; font-weight: 600; line-height: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock .dock-subject::after { content: " ›"; opacity: 0.6; }
.dock .timer:not(.idle) .dock-subject::after, .dock[data-more] .dock-subject::after { content: ""; }
.dock .tdisplay { grid-column: 1; text-align: left; font-family: var(--display); font-size: 34px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
/* 공부 전 막대는 과목 이름과 "공부 시작"만 남긴다(흐린 00:00과 화살표는 뺐다). 과목 이름을 누르면 펼쳐진다 */
.dock .timer.idle .tdisplay { display: none; }
.dock .timer.idle .dock-subject { min-height: var(--tap); }
.dock #tStart { grid-column: 3; grid-row: 1; width: auto; min-width: 128px; min-height: var(--tap); border-radius: 999px; background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.dock .timer-more { grid-column: 1 / -1; margin: 0; }
/* 쉬는 중(공부 전) 막대는 한 줄: 시간과 시작 단추. 막대 안의 화살표를 누르면 과목 고르기와 오늘 목표가 펼쳐진다(dock-more.js) */
.dock .dock-more { display: none; }
.dock:has(.timer.idle) .dock-more { display: grid; place-items: center; grid-column: 2; grid-row: 1; width: var(--tap); min-width: 0; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: var(--dock-ink); }
.dock:has(.timer.idle):not([data-more]) .dock-more { display: none; } /* 펼쳤을 때만 접는 화살표가 보인다 */
.dock .dock-more svg { width: 24px; height: 24px; transition: transform 160ms ease-out; }
.dock[data-more] .dock-more svg { transform: rotate(180deg); }
.dock:has(.timer.idle):not([data-more]) :is(.goal, label.inline) { display: none; }
/* 다른 화면(계획, 캘린더, 연습, 기록)에서는 공부 중이 아닐 때 막대를 숨긴다. 공부를 시작하면 위쪽 알약이 따라온다 */
#result[data-view]:not([data-view="today"]) .dock:has(.timer.idle) { display: none; }
.dock .timer-more button { background: rgba(255, 255, 255, 0.12); color: var(--dock-ink); border: 0; min-height: var(--tap); }
.dock label.inline { grid-column: 1 / -1; color: rgba(244, 246, 247, 0.7); font-size: 13px; }
.dock label.inline select { min-height: 40px; background: rgba(255, 255, 255, 0.12); color: var(--dock-ink); border: 0; }
.dock .goal { color: rgba(244, 246, 247, 0.7); border: 0; padding: 0 0 8px; margin: 0; font-size: 13px; }
.dock .goal .bar { background: rgba(255, 255, 255, 0.18); }

/* 폰: 공부를 시작하면 스톱워치 막대가 화면 위쪽의 작은 알림 알약으로 줄어든다(다이나믹 아일랜드 모양).
   알약을 누르면 펼쳐지고, 멈추면 아래 막대로 돌아간다. 움직임은 dock-motion.js가 맡고 여기서는 두 상태의 모양만 정한다 */
.dock-toggle { display: none; }
/* 좁은 화면(폰)이거나 터치 기기(아이패드를 가로로 들어 화면이 넓은 경우도)에서 알약이 된다. 넓은 화면의 옆 패널(sticky)에서 나와 위쪽에 고정된다 */
@media (max-width: 959px), (pointer: coarse) {
  .dock.is-island { position: fixed; top: calc(env(safe-area-inset-top) + 8px); bottom: auto; left: 50%; right: auto; width: 232px; max-width: none; margin: 0; transform: translateX(-50%); padding: 6px 6px 6px 18px; border-radius: 999px; overflow: hidden; display: flex; align-items: center; gap: 4px; }
  /* 알약이 위쪽 가운데에 뜨면 모드 단추와 이름 단추를 가리지 않게 머리줄을 알약 아래로 내린다 */
  body:has(.dock.is-island) .top { padding-top: calc(env(safe-area-inset-top) + 60px); }
  .dock.is-island .goal, .dock.is-island label.inline, .dock.is-island .timer-more, .dock.is-island .dock-subject { display: none; }
  .dock.is-island[data-open] .dock-subject { display: block; }
  .dock.is-island .timer { flex: 1; min-width: 0; gap: 0 8px; grid-template-columns: 1fr auto; }
  .dock.is-island #tStart { grid-column: 2; }
  .dock.is-island .tdisplay { font-size: 22px; white-space: nowrap; } /* 좁은 폰에서도 4:00:00이 한 줄 */
  .dock.is-island #tStart { min-width: 0; min-height: 40px; padding: 0 14px; font-size: 14px; }
  .dock.is-island .dock-toggle { display: grid; place-items: center; flex: none; width: 36px; height: 36px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: var(--dock-ink); }
  .dock-toggle::before { content: ""; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
  /* 펼친 모양: 위쪽에서 내려온 큰 막대 */
  .dock.is-island[data-open] { width: calc(100vw - 24px); max-width: 416px; display: block; padding: 12px 16px 14px; border-radius: 22px; }
  .dock.is-island[data-open] .goal { display: block; }
  .dock.is-island[data-open] label.inline { display: flex; }
  .dock.is-island[data-open] .timer-more { display: grid; }
  .dock.is-island[data-open] .timer { gap: 8px 12px; }
  .dock.is-island[data-open] .tdisplay { font-size: 34px; }
  /* 멈춘 동안에는 작은 알약에도 "끝내고 기록"이 보인다(알약을 펼치지 않아도 기록할 수 있게). 알약이 조금 넓어진다 */
  /* 멈춘 작은 알약: 시간 칸은 글자 폭만큼 꼭 두고(max-content) 단추가 남은 자리를 나눠 쓴다. 자리가 모자라면 단추 글자가 "…"로 줄어든다.
     전에는 시간 칸이 1fr이라 320px 폰에서 "이어서 하기"가 시간을 5px, 글자를 키우면 60px 가렸다(PR #62~#71 사후 검사 3번) */
  .dock.is-island[data-paused]:not([data-open]) { width: min(calc(100vw - 16px), 340px); padding-left: 14px; }
  .dock.is-island[data-paused]:not([data-open]) .timer { grid-template-columns: max-content minmax(0, auto) minmax(0, auto); gap: 0 6px; }
  .dock.is-island[data-paused]:not([data-open]) .timer-more { display: contents; }
  .dock.is-island[data-paused]:not([data-open]) #tReset { display: none; }
  .dock.is-island[data-paused]:not([data-open]) #tFinish { grid-column: 3; min-height: 40px; padding: 0 10px; font-size: 13px; white-space: nowrap; }
  .dock.is-island[data-paused]:not([data-open]) #tStart { padding: 0 10px; font-size: 13px; white-space: nowrap; }
  .dock.is-island[data-paused]:not([data-open]) :is(#tStart, #tFinish) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .dock.is-island[data-paused]:not([data-open]) .tdisplay { font-size: 18px; }
  /* 4시간이 찼으면 "이어서 하기"는 못 쓰니 작은 알약에서는 숨긴다(펼치면 그대로 보인다) */
  .dock.is-island[data-capped]:not([data-open]) .timer { grid-template-columns: max-content minmax(0, auto); justify-content: space-between; }
  .dock.is-island[data-capped]:not([data-open]) #tStart { display: none; }
  .dock.is-island[data-capped]:not([data-open]) #tFinish { grid-column: 2; }
  .dock.is-island[data-open] #tStart { min-width: 128px; min-height: var(--tap); padding: 0 16px; font-size: 16px; }
  .dock.is-island[data-open] .dock-toggle { width: 100%; height: 36px; margin-top: 8px; border-radius: 12px; }
  .dock.is-island[data-open] .dock-toggle::before { transform: translateY(2px) rotate(-135deg); }
}


@media (max-width: 380px) {
  .day.today { margin-left: calc(-1 * var(--s1)); margin-right: calc(-1 * var(--s1)); padding: 0 var(--s1); }
}

/* ---------- 아래 탭바 ----------
   화면 아래에 고정. 탭 개수만큼 같은 폭(칸 수는 index.html의 .tabbar-inner가 정한다). 지금 보는 탭은 글자가 먹색, 아이콘만 포인트 색 */
/* 탭은 쓸 일이 생겨야 나타난다(web/tabs.js가 hidden과 칸 수를 정한다). "오늘" 하나뿐이면 탭바를 숨기고 높이를 0으로 해서 막대와 아래 여백이 따라 내려온다 */
.tab[hidden] { display: none; }
:root[data-notabs] { --tabbar-h: 0px; }
:root[data-notabs] .tabbar { display: none; }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--surface); border-top: 1px solid var(--hair); padding-bottom: env(safe-area-inset-bottom); }
.tabbar-inner { max-width: 440px; margin: 0 auto; display: grid; }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: var(--tabbar-h); padding: 8px 0 6px; border: 0; border-radius: 0; background: none; color: var(--ink-3); font-size: 12px; font-weight: 500; letter-spacing: 0; }
.tab svg { width: 24px; height: 24px; transition: transform 160ms ease-out; }
.tab[aria-current="page"] { color: var(--ink); }
.tab[aria-current="page"] svg { color: var(--accent); }
.tab:active:not(:disabled) { transform: none; } /* 탭은 아이콘만 줄어든다 */
.tab:active svg { transform: scale(0.88); }

/* 폰에서는 스톱워치 막대와 아래 탭바가 화면 아래에 고정이라, 맨 끝까지 내려가도 아래 링크가 가리지 않게 둘의 높이(막대는 실행 중 가장 큰 높이 약 214px)보다 큰 여백을 둔다 */
body:has(#result:not([hidden])) footer { padding-bottom: calc(264px + var(--tabbar-h) + env(safe-area-inset-bottom)); }
body:has(#result[data-view]:not([data-view="today"])) footer { padding-bottom: calc(var(--s5) + var(--tabbar-h) + env(safe-area-inset-bottom)); }
body:has(#result[data-view]:not([data-view="today"]) .timer:not(.idle)) footer { padding-bottom: calc(264px + var(--tabbar-h) + env(safe-area-inset-bottom)); }
@supports not selector(:has(*)) {
  footer { padding-bottom: calc(264px + var(--tabbar-h) + env(safe-area-inset-bottom)); }
}

/* ---------- 움직임 ----------
   transform과 opacity만 움직인다. 끝값은 모두 none이라 애니메이션이 끝나면 transform이 남지 않는다(고정된 요소가 깨지지 않게) */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes view-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes view-in-back { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes fade-only { from { opacity: 0; } to { opacity: 1; } }

/* 화면 전환: 화면 전체를 감싼 #screen이 탭 순서대로 오른쪽 탭이면 오른쪽에서, 왼쪽 탭이면 왼쪽에서 들어온다(300ms). 시작은 screen-motion.js가 한다 */
.view { animation: view-in 300ms var(--ease-out) backwards; }
.view.back { animation-name: view-in-back; }
#setup { animation: view-in 300ms var(--ease-out) backwards; }

/* 목록과 선택지: 화면이 들어오는 동안(#screen[data-entering]) 만들어진 줄은 40ms 간격으로 차례로 올라온다(320ms). 열한 번째부터는 한꺼번에.
   체크할 때마다 목록을 새로 그리므로, 들어오는 동안이 아니면 움직이지 않는다 */
#screen[data-entering] :is(#todayList, #days, .group-body, .upcoming, .shelf, #weekBars, .review-actions) > *,
.steps > li { animation: rise 320ms var(--ease-out) 400ms backwards; }
#screen[data-entering] :is(#todayList, #days, .group-body, .upcoming, .shelf, #weekBars, .review-actions) > :nth-child(1), .steps > li:nth-child(1) { animation-delay: 0ms; }
#screen[data-entering] :is(#todayList, #days, .group-body, .upcoming, .shelf, #weekBars, .review-actions) > :nth-child(2), .steps > li:nth-child(2) { animation-delay: 40ms; }
#screen[data-entering] :is(#todayList, #days, .group-body, .upcoming, .shelf, #weekBars, .review-actions) > :nth-child(3), .steps > li:nth-child(3) { animation-delay: 80ms; }
#screen[data-entering] :is(#todayList, #days, .group-body, .upcoming, .shelf, #weekBars, .review-actions) > :nth-child(4) { animation-delay: 120ms; }
#screen[data-entering] :is(#todayList, #days, .group-body, .upcoming, .shelf, #weekBars, .review-actions) > :nth-child(5) { animation-delay: 160ms; }
#screen[data-entering] :is(#todayList, #days, .group-body, .upcoming, .shelf, #weekBars, .review-actions) > :nth-child(6) { animation-delay: 200ms; }
#screen[data-entering] :is(#todayList, #days, .group-body, .upcoming, .shelf, #weekBars, .review-actions) > :nth-child(7) { animation-delay: 240ms; }
#screen[data-entering] :is(#todayList, #days, .group-body, .upcoming, .shelf, #weekBars, .review-actions) > :nth-child(8) { animation-delay: 280ms; }
#screen[data-entering] :is(#todayList, #days, .group-body, .upcoming, .shelf, #weekBars, .review-actions) > :nth-child(9) { animation-delay: 320ms; }
#screen[data-entering] :is(#todayList, #days, .group-body, .upcoming, .shelf, #weekBars, .review-actions) > :nth-child(10) { animation-delay: 360ms; }

/* 로그인 전 첫 화면: 한 번의 연출. 어두운 스톱워치 카드가 위에서 내려오고(0ms, 700ms), 흰 "오늘" 카드가 180ms 뒤 아래에서 올라와 겹친다(800ms).
   카드 안의 색 막대가 700ms부터 90ms 간격으로 자라고, 스톱워치 숫자는 0에서 올라간다(landing-clock.js). 이름은 450ms, 한 줄은 560ms, 단추는 800ms에 올라온다 */
@keyframes drop-in { from { opacity: 0; transform: translateY(-28px); } to { opacity: 1; transform: none; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes grow { from { transform: scaleY(0); } to { transform: none; } }
.lp-stop { animation: drop-in 700ms var(--ease-out) backwards; }
.lp-today { animation: rise-in 800ms var(--ease-out) 180ms backwards; }
.lp-row i { animation: grow 500ms var(--ease-out) calc(700ms + var(--i) * 90ms) backwards; }
.landing h1 { animation: rise 600ms var(--ease-out) 450ms backwards; }
.landing .tagline { animation: rise 600ms var(--ease-out) 560ms backwards; }
.landing-body > * { animation: rise 420ms var(--ease-out) 800ms backwards; }

/* 복습 질문 창: 폰에서는 아래에서 올라오고(320ms), 닫을 때는 아래로 내려간다(200ms, review-ui.js가 data-closing을 붙인다). 뒤의 어두운 막도 같이 나타나고 사라진다.
   넓은 화면에서는 가운데 창이 살짝 올라오며 나타난다 */
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sheet-down { from { transform: none; } to { transform: translateY(100%); } }
@keyframes sheet-pop { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes sheet-out { from { opacity: 1; } to { opacity: 0; transform: translateY(16px); } }
@keyframes scrim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes scrim-out { from { opacity: 1; } to { opacity: 0; } }
#levelDialog[open] { animation: sheet-pop 240ms var(--ease-out); }
#levelDialog[open]::backdrop { animation: scrim-in 320ms linear; }
#levelDialog[data-closing] { animation: sheet-out 200ms ease-in forwards; }
#levelDialog[data-closing]::backdrop { animation: scrim-out 200ms linear forwards; }
@media (max-width: 560px) {
  #levelDialog[open] { animation-name: sheet-up; animation-duration: 320ms; }
  #levelDialog[data-closing] { animation-name: sheet-down; }
}

/* 다른 아래 창들도 레벨 창과 같게: 폰에서는 아래에서 올라오고(320ms) 닫을 때 내려간다(220ms, sheet-motion.js가 data-closing을 붙인다).
   넓은 화면에서는 가운데 창이 살짝 올라오며 나타난다 */
dialog:not(#levelDialog)[open] { animation: sheet-pop 240ms var(--ease-out); }
dialog:not(#levelDialog)[open]::backdrop { animation: scrim-in 320ms linear; }
dialog:not(#levelDialog)[data-closing] { animation: sheet-out 200ms ease-in forwards; }
dialog:not(#levelDialog)[data-closing]::backdrop { animation: scrim-out 220ms linear forwards; }
@media (max-width: 560px) {
  dialog:not(#levelDialog)[open] { animation-name: sheet-up; animation-duration: 320ms; }
  dialog:not(#levelDialog)[data-closing] { animation-name: sheet-down; animation-duration: 220ms; }
}

/* 로그인 직후: 다음 화면이 살짝 올라온다(app.js가 body에 just-unlocked를 0.7초 붙인다) */
body.just-unlocked :is(#modePick, #setup):not([hidden]) { animation: rise-12 380ms var(--ease-out) backwards; }
body.just-unlocked .top { animation: fade-only 380ms ease-out backwards; }
@keyframes rise-12 { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* 오늘 화면에 처음 들어올 때(screen-motion.js playFirstEnter): 제목 → 목록(45ms 간격) → 스톱워치 막대 → 탭.
   위에 창이 떠 있는 동안(data-wait)은 숨겨 두었다가 창이 내려가기 시작할 때 나타난다 */
@keyframes up-28 { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
#result[data-wait] :is(.today-card, .flow-list > *, .dock, .tabbar) { opacity: 0; }
#result[data-first] .today-card { animation: rise-12 380ms var(--ease-out) backwards; }
#result[data-first] .flow-list > * { animation: rise-12 360ms var(--ease-out) backwards; animation-delay: calc(100ms + var(--i, 0) * 45ms); }
#result[data-first] .dock { animation: up-28 440ms var(--ease-out) 260ms backwards; }
#result[data-first] .tabbar { animation: up-28 440ms var(--ease-out) 330ms backwards; }

/* 체크한 순간(check-motion.js): 상자가 살짝 눌렸다 돌아오고 체크 표시가 위에서 아래로 그려진다. 방금 누른 줄만 */
@keyframes box-press { 0% { transform: scale(1); } 45% { transform: scale(0.86); } 100% { transform: scale(1); } }
@keyframes check-draw { from { opacity: 0; clip-path: inset(100% 0 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
.item.just input { animation: box-press 220ms ease-out; }
.item.just input::after { animation: check-draw 200ms ease-out 40ms backwards; }
.item.just .txt { animation: fade-only 240ms ease-out; }

/* 스톱워치 막대를 펼칠 때 과목 고르기·오늘 목표가 살짝 올라온다 */
.dock[data-more] :is(.goal, label.inline) { animation: rise-12 220ms var(--ease-out) backwards; }

/* "평소 공부 ▾" 메뉴가 살짝 내려오며 나타난다 */
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }
.mode-menu:not([hidden]) { animation: menu-in 170ms var(--ease-out); transform-origin: top left; }

/* 배지: 새로 받은 배지는 기록 탭을 열 때 한 번 커졌다 돌아오고 테두리가 퍼진다(badge-shelf-ui.js의 data-fresh). 설명 줄은 바뀔 때 살짝 나타난다 */
@keyframes badge-earn { 0% { transform: scale(1); } 40% { transform: scale(1.16); } 100% { transform: scale(1); } }
@keyframes badge-ring { 0% { opacity: 0.9; transform: scale(0.92); } 100% { opacity: 0; transform: scale(1.4); } }
.badge-dot[data-fresh] { animation: badge-earn 520ms var(--ease-out) 250ms; }
.badge-dot[data-fresh]::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; animation: badge-ring 760ms ease-out 250ms; pointer-events: none; }
.badge-info.swap { animation: fade-only 200ms ease-out; }

/* 마우스가 있을 때만 나오는 반응 */
@media (hover: hover) and (pointer: fine) {
  button:hover:not(:disabled) { background: var(--surface-2); }
  button.primary:hover:not(:disabled) { background: var(--accent); filter: brightness(1.08); }
  .tab:hover:not(:disabled) { background: none; color: var(--ink); }
  .dock .timer-more button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.2); }
  .rev-btn:hover:not(:disabled) { background: var(--surface-2); }
  button.auto-review:hover:not(:disabled) { background: none; }
}

/* 움직임 줄이기: 이동 없이 200ms 페이드만 */
@media (prefers-reduced-motion: reduce) {
  .view, .view.back, #setup,
  #screen[data-entering] :is(#todayList, #days, .group-body, .upcoming, .shelf, #weekBars, .review-actions) > *,
  .steps > li, .lp-stop, .lp-today, .lp-row i, .landing h1, .landing .tagline, .landing-body > * { animation-name: fade-only !important; animation-duration: 200ms !important; animation-delay: 0ms !important; }
  .tab svg { transition: none !important; }
  #levelDialog[open], #levelDialog[open]::backdrop { animation-name: fade-only !important; animation-duration: 200ms !important; }
  dialog[open], dialog[open]::backdrop, body.just-unlocked :is(#modePick, #setup, .top),
  #result[data-first] :is(.today-card, .flow-list > *, .dock, .tabbar),
  .item.just :is(input, .txt), .item.just input::after, .dock[data-more] :is(.goal, label.inline), .mode-menu, .badge-dot[data-fresh], .badge-info.swap { animation-name: fade-only !important; animation-duration: 200ms !important; animation-delay: 0ms !important; }
  .badge-dot[data-fresh]::after { display: none; }
  .confetti { display: none; } /* 떨어지는 색종이는 움직임이 크니 끈다. 축하 문구는 그대로 나온다 */
}