:root { --fs: 1; }   /* 글자 크기 배율. 모든 font-size는 calc(Npx * var(--fs)) */
:root[data-fs="90"] { --fs: 0.9; }
:root[data-fs="110"] { --fs: 1.1; }
:root[data-fs="120"] { --fs: 1.2; }
:root[data-fs="130"] { --fs: 1.3; }
/* 디자인 원칙 (D19): Pretendard, 중립 바탕, 강조색 하나, 상태 색은 채도 낮은 작은 배지,
   8px 격자, 1px 테두리, 화면마다 채운 버튼 하나. 다크 모드는 위에 놓인 면일수록 조금씩 밝다. */

:root {
  /* 면: 바탕 → 카드 → 카드 안 옅은 면 */
  --bg: #F6F7F8;
  --surface: #FFFFFF;
  --surface-2: #F3F4F6;
  --surface-3: #ECEEF1;
  --border: #E3E5E9;
  --border-strong: #CDD1D7;
  /* 글자 세 단계 */
  --text: #16191D;
  --text-2: #4A515C;
  --text-3: #7B828D;
  /* 강조색 하나 */
  --accent: #1E6B52;
  --accent-hover: #185943;
  --accent-ink: #FFFFFF;
  --accent-weak: #E7F1ED;
  /* 상태 배지 (채도 낮춤) */
  --in-fg: #1E6B52;   --in-bg: #E7F1ED;
  --late-fg: #85622A; --late-bg: #F4EEE3;
  --late-ink: #5E4520;
  --absent-fg: #934842; --absent-bg: #F5EAE9;
  --out-fg: #3D5674;  --out-bg: #EAEEF3;
  --off-fg: #6B717B;  --off-bg: #EFF0F2;
  --danger: #A8392F;
  --focus: #1E6B52;
  --radius: 12px;
  --radius-sm: 8px;
  color-scheme: light;
}

/* 어두운 화면은 사용자가 달 단추로 고를 때만 쓴다. 휴대폰 설정이 어두운 화면이어도 처음은 밝은 화면이다(David 11/12 "기본은 브라이트 모드로 하고"). */
:root[data-theme="dark"] {
  --bg: #0F1113;
  --surface: #171A1D;
  --surface-2: #1E2125;
  --surface-3: #262A2F;
  --border: #2A2E34;
  --border-strong: #3A4048;
  --text: #ECEEF0;
  --text-2: #B6BCC4;
  --text-3: #868D97;
  --accent: #4EA888;
  --accent-hover: #5DB696;
  --accent-ink: #0B1712;
  --accent-weak: #1A2B25;
  --in-fg: #6FBEA0;   --in-bg: #1A2B25;
  --late-fg: #D2AE6E; --late-bg: #2B251B;
  --late-ink: #E6C996;
  --absent-fg: #DD958E; --absent-bg: #2D1F1E;
  --out-fg: #96B0D2;  --out-bg: #1D2530;
  --off-fg: #9AA1AB;  --off-bg: #23272C;
  --danger: #E8867C;
  --focus: #4EA888;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  font-size: calc(15px * var(--fs));
  line-height: 1.55;
  letter-spacing: -0.01em;
  /* 시각과 숫자는 자리 폭이 같은 숫자로 맞춘다 */
  font-variant-numeric: tabular-nums;
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
main {
  max-width: 480px;
  margin: 0 auto;
  padding: calc(8px + env(safe-area-inset-top)) 16px calc(96px + env(safe-area-inset-bottom));
}

/* 글자 위계: 제목(h1, h2), 본문, 보조 글 */
h1, h2, h3 { margin: 0; line-height: 1.35; letter-spacing: -0.02em; }
h1 { font-size: calc(22px * var(--fs)); font-weight: 700; }
h2 { font-size: calc(17px * var(--fs)); font-weight: 650; }
h3 { font-size: calc(15px * var(--fs)); font-weight: 650; }
p { margin: 0; }
a { color: var(--accent); }
b { font-weight: 650; }
.muted { color: var(--text-3); }
.small { font-size: calc(14px * var(--fs)); color: var(--text-2); }
.tiny { font-size: calc(13px * var(--fs)); color: var(--text-3); }
.stack > * + * { margin-top: 16px; }
.stack-sm > * + * { margin-top: 8px; }
.row { display: flex; align-items: center; gap: 8px; }
.row.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }

.top {
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; margin-bottom: 8px;
}
.brand { display: flex; align-items: center; gap: 8px; }
.brand img { width: 28px; height: 28px; border-radius: 8px; }
.brand b { font-size: calc(16px * var(--fs)); font-weight: 700; }
.date { color: var(--text-3); font-size: calc(14px * var(--fs)); }
.top .end { display: flex; align-items: center; gap: 12px; }

/* 밝은 화면 · 어두운 화면 고르기: 해와 달 단추 (David 11/12 "한쪽에 햇볕. 아니면 뭐 달 모양 그런 것들을 선택해 가지고 전환할 수 있도록 해라") */
.theme-sw { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); flex: none; }
.theme-sw button { appearance: none; border: 0; padding: 0; background: transparent; color: var(--text-3); width: 36px; height: 32px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; }
.theme-sw button svg { width: 18px; height: 18px; }
.theme-sw button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--border); }
.theme-sw button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* 글자 크기 단추: 해 · 달 단추와 같은 모양의 두 칸(David 11/12 "그냥 +,-표시넣고 글자 크기 조정가능하게 바꿔"). 단계는 html의 data-fs(90 · 100 · 110 · 120 · 130)가 --fs 값만 바꾼다. */
.fs-sw button { font-size: calc(14px * var(--fs)); font-weight: 600; line-height: 1; }
.theme-sw button:disabled { opacity: 0.35; cursor: default; }
.hero .theme-sw.fs-sw { right: 90px; }
.tabs .fs-sw + .theme-sw { margin-left: 8px; }
/* 화면 틀(PC 탭 막대, 휴대폰 아래 탭 막대, 머리, 테스트 버전 노란 줄)은 글자 크기 단추로 키우지 않는다. 안쪽 요소의 var(--fs)가 1이 된다. */
.tabs, .testbar, .top { --fs: 1; }
/* 휴대폰 머리(폭 959 이하): 한 줄에 맞춘다. 단추 칸 32px, 두 단추 사이 4px. 머리는 화면 틀이라 앱 이름 · 날짜 · 단추 글자는 --fs로 키우지 않는다(글자 크기 단추는 본문을 키운다). */
@media (max-width: 959px) {
  .top .end { gap: 4px; }
  .top .brand { margin-right: 8px; }   /* 앱 이름과 날짜 사이 8px 이상 */
  .top .end .date { margin-right: 0; font-size: 14px; white-space: nowrap; }
  .top .brand b { font-size: 16px; white-space: nowrap; }
  .top .theme-sw { padding: 2px; }
  .top .theme-sw button { width: 30px; }
  .top .fs-sw button { font-size: 14px; width: 30px; padding: 0; }
}
@media (max-width: 400px) {
  .top .end .date { font-size: 13px; }
}
.hero { position: relative; }
.hero .theme-sw { position: absolute; top: 8px; right: 0; }
/* 휴대폰 아래 탭 막대에는 넣지 않는다(화면 위 머리에 있음). 넓은 화면은 위쪽 탭 막대 오른쪽 끝에 둔다. */
.tabs .theme-sw { display: none; }

/* 카드: 1px 테두리, 그림자 없음 */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.card + .card, .card + section, section + .card, section + section { margin-top: 16px; }
.card .card { background: var(--surface-2); border-color: var(--border); }
.card.soft { background: var(--surface-2); }
/* 알림 카드: 큰 면을 칠하지 않고 왼쪽 가는 선으로 종류만 알린다 */
.card.info, .card.warn, .card.alert {
  background: var(--surface);
  box-shadow: inset 3px 0 0 var(--line, var(--accent));
  border-radius: var(--radius-sm);
}
.card.info { --line: var(--accent); }
.card.warn { --line: var(--late-fg); }
.card.alert { --line: var(--absent-fg); }
.card.prof { background: var(--surface); }
.section-title { font-size: calc(13px * var(--fs)); color: var(--text-3); font-weight: 600; margin: 24px 0 8px; letter-spacing: 0; }

/* 버튼: 채운 버튼은 화면마다 하나, 나머지는 테두리 버튼 */
.btn {
  appearance: none; border: 1px solid transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 16px; border-radius: 10px;
  font: inherit; font-weight: 600; font-size: calc(15px * var(--fs)); letter-spacing: -0.01em;
  background: var(--accent); color: var(--accent-ink);
  text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--accent-hover); }
.btn.block { width: 100%; }
.btn.big { min-height: 56px; font-size: calc(17px * var(--fs)); }
.btn.quiet, .btn.outline, .btn.late, .btn.absent { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn.quiet:hover, .btn.outline:hover, .btn.late:hover, .btn.absent:hover { background: var(--surface-2); }
.btn.outline.accent { color: var(--accent); }
.btn.ghost { background: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--surface-2); }
.btn.danger { background: var(--surface); color: var(--danger); border-color: var(--border-strong); }
.btn.danger:hover { background: var(--surface-2); }
.btn.small { min-height: 32px; padding: 0 12px; font-size: calc(13px * var(--fs)); border-radius: 8px; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn svg { stroke-width: 1.75; }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .switch input:focus-visible + span, .tabs a:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px;
}
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn-row > * { min-width: 0; }
.linkbtn { background: none; border: 0; color: var(--accent); font: inherit; font-weight: 600; padding: 8px 0; cursor: pointer; }

/* 입력 칸 */
label.field { display: block; }
label.field > span { display: block; font-size: calc(13px * var(--fs)); font-weight: 600; color: var(--text-2); margin-bottom: 8px; }
input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="time"], input[type="number"], input[type="month"], select, textarea {
  width: 100%; min-height: 48px; padding: 8px 12px;
  border: 1px solid var(--border-strong); border-radius: 10px;
  background: var(--surface); color: var(--text); font: inherit; font-size: max(16px, calc(16px * var(--fs)));
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-weak); }
input:disabled { background: var(--surface-2); color: var(--text-3); }
textarea { min-height: 72px; resize: vertical; }
/* 시각 칸이 좁으면 "오전 09:"처럼 분이 잘린다. Windows Chrome에서 140px부터 다 보여서 휴대폰 글꼴을 생각해 160px로 둔다. */
input[type="time"] { min-width: 160px; }
.check { display: flex; align-items: center; gap: 8px; font-size: calc(14px * var(--fs)); color: var(--text-2); min-height: 40px; }
.check input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
/* 암호 규칙: 빈 원 → 채운 원에 체크 표시 */
.rules { list-style: none; padding: 0; margin: 0; font-size: calc(13px * var(--fs)); }
.rules li { display: flex; gap: 8px; align-items: center; color: var(--text-3); min-height: 24px; }
.rules li::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--border-strong); box-sizing: border-box;
}
.rules li.ok { color: var(--text); }
.rules li.ok::before {
  border-color: var(--accent);
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.error { color: var(--danger); font-size: calc(13px * var(--fs)); font-weight: 600; }
.error:empty { display: none; }

/* 상태 배지 */
.pill {
  display: inline-flex; align-items: center; white-space: nowrap; vertical-align: 1px;
  padding: 2px 8px; border-radius: 6px; font-size: calc(12px * var(--fs)); font-weight: 600; letter-spacing: 0;
  background: var(--off-bg); color: var(--off-fg);
}
.pill.in { background: var(--in-bg); color: var(--in-fg); }
.pill.late_in, .pill.late_notice { background: var(--late-bg); color: var(--late-fg); }
.pill.absent { background: var(--absent-bg); color: var(--absent-fg); }
.pill.out { background: var(--out-bg); color: var(--out-fg); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--off-fg); flex: none; }
.dot.in { background: var(--in-fg); }
.dot.out { background: var(--late-fg); }
.dot.gone { background: var(--out-fg); }

.today-time { font-size: calc(14px * var(--fs)); color: var(--text-3); }
.today-time b { color: var(--text); font-size: calc(15px * var(--fs)); }
.status-line { font-size: calc(20px * var(--fs)); font-weight: 700; letter-spacing: -0.02em; }
/* 학교 와이파이 연결 표시(D27) */
.net { display: flex; align-items: center; gap: 6px; font-size: calc(14px * var(--fs)); font-weight: 600; }
.net.ok { color: var(--in-fg); }
.net svg { width: 18px; height: 18px; flex: none; }

/* 현황판 */
.board { list-style: none; margin: 0; padding: 0; }
.board li {
  display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: start;
  padding: 12px 0; border-top: 1px solid var(--border);
}
.board li:first-child { border-top: 0; padding-top: 0; }
.board li:last-child { padding-bottom: 0; }
.board li.me .name::after { content: " (나)"; color: var(--text-3); font-weight: 500; font-size: calc(13px * var(--fs)); }
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 600; font-size: calc(13px * var(--fs));
  background: var(--surface-3); color: var(--text-2);
}
.name { font-weight: 600; margin-right: 4px; }
a.name { color: var(--text); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; }
.reason { font-size: calc(13px * var(--fs)); color: var(--text-2); margin-top: 4px; }
/* 사유 아래 작은 회색 표시(미리 알림) */
.reason-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.reason-meta span { font-size: calc(12px * var(--fs)); color: var(--text-3); border: 1px solid var(--border); border-radius: 4px; padding: 0 6px; line-height: 20px; }
.time { font-size: calc(13px * var(--fs)); color: var(--text-3); text-align: right; white-space: nowrap; line-height: 1.6; }

.daylist { list-style: none; margin: 0; padding: 0; }
.daylist li { padding: 12px 0; border-top: 1px solid var(--border); }
.daylist li:first-child { border-top: 0; padding-top: 0; }
.daylist li:last-child { padding-bottom: 0; }
.summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.summary div { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 8px; text-align: center; }
.summary b { display: block; font-size: calc(22px * var(--fs)); font-weight: 700; letter-spacing: -0.02em; }
.summary span { font-size: calc(13px * var(--fs)); color: var(--text-3); }

/* 누적기록 전체 표(D22): 이름 순서, 순위 없음 */
.rtable { width: 100%; border-collapse: collapse; font-size: calc(15px * var(--fs)); }
.rtable th, .rtable td { padding: 12px 4px; border-top: 1px solid var(--border); text-align: right; }
.rtable thead th { border-top: 0; padding-top: 0; font-size: calc(12px * var(--fs)); font-weight: 500; color: var(--text-3); white-space: nowrap; }
.rtable th[scope="row"], .rtable thead th:first-child { text-align: left; }
.rtable td, .rtable thead th:not(:first-child) { width: 22%; }
.rtable th[scope="row"] a { color: var(--text); font-weight: 600; display: block; text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; }
.rtable tbody tr:last-child > * { padding-bottom: 0; }
.rtable tr.me th[scope="row"] a::after { content: " (나)"; color: var(--text-3); font-weight: 500; font-size: calc(13px * var(--fs)); }

.week { display: grid; gap: 8px; }
.week .day { display: grid; grid-template-columns: 28px 1fr 160px; align-items: center; gap: 8px; }
.week .day b { font-size: calc(15px * var(--fs)); }
.week .day .check { white-space: nowrap; }

.switch { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: calc(14px * var(--fs)); color: var(--text-2); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch span {
  width: 40px; height: 24px; border-radius: 999px; background: var(--border-strong); position: relative; flex: none;
  transition: background 0.15s;
}
.switch span::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; transition: transform 0.15s; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(16px); }

/* 아래 탭 */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: grid; grid-template-columns: repeat(var(--n, 4), 1fr);
  background: var(--surface); border-top: 1px solid var(--border);
  padding: 4px 8px calc(4px + env(safe-area-inset-bottom));
}
.tabs a {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 0 4px; text-decoration: none; color: var(--text-3); font-size: calc(11px * var(--fs)); font-weight: 600;
  border-radius: 8px; position: relative; letter-spacing: 0;
}
.tabs a svg { width: 22px; height: 22px; stroke-width: 1.75; }
.tabs a.on { color: var(--accent); }
.tabs .badge {
  position: absolute; top: 4px; left: calc(50% + 6px); font-style: normal;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--danger); color: #fff; font-size: calc(10px * var(--fs)); font-weight: 700; line-height: 16px; text-align: center;
}

.toast {
  position: fixed; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: var(--text); color: var(--bg); padding: 12px 16px; border-radius: 10px;
  font-weight: 600; font-size: calc(14px * var(--fs)); z-index: 30; max-width: calc(100% - 32px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
  pointer-events: none; /* 알림이 떠 있어도 밑의 단추를 누를 수 있게 한다 */
}

.sheet {
  border: 0; padding: 0; margin: auto auto 0; width: 100%; max-width: 480px;
  background: var(--surface); color: var(--text);
  border-radius: 16px 16px 0 0;
}
.sheet::backdrop { background: rgba(0, 0, 0, 0.4); }
.sheet .inner { padding: 24px 16px calc(16px + env(safe-area-inset-bottom)); }

.undo { display: flex; align-items: center; gap: 8px; }
.undo .grow { font-size: calc(14px * var(--fs)); color: var(--text-2); }
.count { font-weight: 700; color: var(--text); }

.segment { display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); gap: 4px; background: var(--surface-2); border: 1px solid var(--border); padding: 4px; border-radius: 10px; }
.segment button { border: 0; background: transparent; color: var(--text-3); font: inherit; font-size: calc(14px * var(--fs)); font-weight: 600; min-height: 36px; border-radius: 8px; cursor: pointer; }
.segment button.on { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--border); }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; font-size: calc(14px * var(--fs)); }
.kv dt { color: var(--text-3); }
.kv dd { margin: 0; }
.hero { padding: 32px 0 24px; }
.hero img { width: 48px; height: 48px; border-radius: 12px; }
.hero h1 { margin-top: 16px; font-size: calc(26px * var(--fs)); }
.empty { text-align: center; color: var(--text-3); padding: 16px 0; font-size: calc(14px * var(--fs)); }
.code { font-family: ui-monospace, Consolas, monospace; font-size: calc(20px * var(--fs)); letter-spacing: 1px; background: var(--surface-2); padding: 8px 12px; border-radius: 8px; border: 1px dashed var(--border-strong); user-select: all; }
hr { border: 0; border-top: 1px solid var(--border); margin: 12px 0; }

/* 할 일과 휴대폰 알림 (기획안 2단계, D28 시안) */
.segment a.seg { display: flex; align-items: center; justify-content: center; color: var(--text-3); font-size: calc(14px * var(--fs)); font-weight: 600; min-height: 36px; border-radius: 8px; text-decoration: none; }
.segment a.seg.on { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--border); }
.row.ttl { align-items: flex-start; gap: 8px; }
.row.ttl > h3, .row.ttl > b { flex: 1; min-width: 0; }
.task .kv { font-size: calc(13px * var(--fs)); margin: 0; }
.task .kv dd { color: var(--text-2); }
.who { padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.who + .daylist { margin-top: 12px; }
.chk { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 8px; }
.strong { color: var(--text); font-weight: 600; }
.empty.left { text-align: left; padding: 4px 0; }

/* 일정표와 날짜별 목록 (D33, 일정표 시안 11/4) */
.headrow .segment { margin-top: 12px; }
.segment.sub { width: 200px; margin-top: 8px; }
.segment.sub a.seg { min-height: 30px; font-size: calc(13px * var(--fs)); }
.section-title.over { color: var(--absent-fg); }
.me-tag { display: inline-flex; margin-left: 8px; padding: 1px 7px; border-radius: 6px; font-size: calc(12px * var(--fs)); font-weight: 700; line-height: 1.4; background: var(--text); color: var(--surface); vertical-align: 1px; }
.subrow { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 20px 0 12px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 8px 14px; display: flex; align-items: baseline; gap: 8px; }
.stat b { font-size: calc(20px * var(--fs)); font-weight: 700; }
.stat span { color: var(--text-3); font-size: calc(14px * var(--fs)); font-weight: 600; }
.stat em { font-style: normal; font-size: calc(13px * var(--fs)); font-weight: 650; color: var(--late-fg); background: var(--late-bg); border-radius: 6px; padding: 1px 8px; margin-left: 4px; }
.stat.over b { color: var(--absent-fg); }
.stat.done b { color: var(--in-fg); }
.range { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: calc(14px * var(--fs)); font-weight: 600; color: var(--text-2); }
.range .btn { min-height: 34px; padding: 0 10px; }
.sched-wrap { position: relative; }
.sched { display: grid; grid-template-columns: 128px repeat(9, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.sched > div { border-bottom: 1px solid var(--border); }
.sched > div.last { border-bottom: 0; }
.sched .hd { padding: 9px 6px 8px; font-size: calc(14px * var(--fs)); font-weight: 650; color: var(--text-2); text-align: center; border-left: 1px solid var(--border); line-height: 1.3; }
.sched .hd small { display: block; font-size: calc(12px * var(--fs)); font-weight: 500; color: var(--text-3); }
.sched .hd.first { border-left: 0; text-align: left; padding-left: 14px; }
.sched .hd.over { color: var(--absent-fg); }
.sched .hd.today { color: var(--text); font-weight: 800; }
.sched .hd.today small { color: var(--text-2); font-weight: 650; }
.sched .nm { padding: 12px 10px 12px 14px; font-weight: 650; font-size: calc(15px * var(--fs)); line-height: 1.3; }
.sched .nm small { display: block; font-size: calc(12px * var(--fs)); color: var(--text-3); font-weight: 500; margin-top: 3px; }
.sched .nm .me-tag { margin-left: 6px; }
.sched .nm.mine { box-shadow: inset 4px 0 0 var(--text); }
.sched .c { padding: 6px 5px; border-left: 1px solid var(--border); min-height: 64px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sched .wkend { background: var(--surface-2); }
.chip { display: block; width: 100%; text-align: left; font: inherit; letter-spacing: inherit; cursor: pointer; border-radius: 7px; padding: 5px 7px 5px 9px; font-size: calc(14px * var(--fs)); line-height: 1.35; font-weight: 600; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: inset 3px 0 0 var(--k, var(--text-3)); color: var(--text); transition: transform 0.12s, box-shadow 0.12s; }
.chip .t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chip .m { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin-top: 3px; font-size: calc(13px * var(--fs)); font-weight: 600; color: var(--text-2); }
.chip .m span { white-space: nowrap; }
.chip .m > svg { width: 12px; height: 12px; stroke-width: 2.6; }
.chip .many { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; }
.chip .many svg { width: 13px; height: 13px; }
.chip.done { --k: var(--in-fg); background: var(--in-bg); border-color: transparent; color: var(--in-fg); }
.chip.done .m { color: var(--in-fg); }
.chip.over { --k: var(--absent-fg); background: var(--absent-bg); border-color: transparent; color: var(--absent-fg); }
.chip.over .m { color: var(--absent-fg); }
.chip.soon { --k: var(--late-fg); background: var(--late-bg); border-color: transparent; color: var(--late-ink); }
.chip.soon .m { color: var(--late-fg); }
.chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.chip.sel { box-shadow: inset 3px 0 0 var(--k, var(--text-3)), 0 8px 20px rgba(0, 0, 0, 0.28); transform: translateY(-2px); position: relative; z-index: 6; }
.dim { position: absolute; inset: 0; background: var(--bg); opacity: 0.72; z-index: 4; }
.legend { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: calc(13px * var(--fs)); color: var(--text-3); font-weight: 600; }
.legend i { display: inline-block; width: 18px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 6px; box-sizing: border-box; }
.legend i.over { background: var(--absent-bg); border-left: 3px solid var(--absent-fg); }
.legend i.soon { background: var(--late-bg); border-left: 3px solid var(--late-fg); }
.legend i.rest { background: var(--surface); border: 1px solid var(--border-strong); border-left: 3px solid var(--text-3); }
.legend i.done { background: var(--in-bg); border-left: 3px solid var(--in-fg); }
.pop { position: absolute; width: 360px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14); padding: 20px 22px 22px; z-index: 7; }
.pop h2 { font-size: calc(18px * var(--fs)); margin: 10px 0 12px; padding-right: 56px; }
.pop .kv { font-size: calc(14px * var(--fs)); gap: 8px 16px; }
.pop .upd { margin-top: 18px; padding: 12px 14px; background: var(--surface-2); border-radius: 10px; font-size: calc(14px * var(--fs)); }
.pop .upd p.tiny { margin-top: 4px; }
.pop .close { position: absolute; top: 12px; right: 12px; }
.pop:focus { outline: none; }

/* 넓은 화면(PC): 탭 막대를 위쪽에 두고, 할 일 탭은 넓게 쓴다(D33). 휴대폰 화면은 그대로다. */
.tabs .tb-brand, .tabs .tb-me { display: none; }
/* 넓은 화면에서도 숨긴 탭 막대(로그인, 테스트 버전 첫 화면)는 보이지 않게 한다(11/11 화면 검수). */
.tabs[hidden] { display: none; }
@media (min-width: 960px) {
  .tabs { top: 0; bottom: auto; display: flex; align-items: center; gap: 4px; height: 60px; padding: 0 32px; border-top: 0; border-bottom: 1px solid var(--border); }
  .tabs .tb-brand { display: flex; align-items: center; gap: 8px; margin-right: 24px; font-size: calc(17px * var(--fs)); letter-spacing: -0.02em; }
  .tabs .tb-brand img { width: 28px; height: 28px; border-radius: 8px; }
  .tabs .tb-brand b { font-weight: 700; color: var(--text); }
  .tabs a { flex-direction: row; gap: 0; padding: 8px 14px; font-size: calc(15px * var(--fs)); color: var(--text-2); }
  .tabs a svg { display: none; }
  .tabs a.on { background: var(--accent-weak); color: var(--accent); }
  .tabs .badge { position: static; display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; font-size: calc(11px * var(--fs)); line-height: 18px; }
  .tabs .tb-me { display: block; margin-left: auto; font-size: calc(14px * var(--fs)); color: var(--text-3); }
  .tabs .tb-me b { color: var(--text); font-weight: 600; margin-left: 8px; }
  .tabs .theme-sw { display: inline-flex; margin-left: 16px; }
  body.has-tabs main { padding-top: 84px; padding-bottom: 48px; }
  body.has-tabs main > .top { display: none; }
  main.wide { max-width: 1440px; padding-left: 32px; padding-right: 32px; position: relative; }
  main.wide .narrowcol { max-width: 560px; }
  .headrow { display: flex; align-items: center; gap: 20px; }
  .headrow h1 { font-size: calc(24px * var(--fs)); }
  .headrow .segment { margin-top: 0; display: inline-grid; }
  .headrow .segment a.seg { padding: 0 18px; }
  .headrow .actions { margin-left: auto; display: flex; gap: 8px; }
  .toast { bottom: 32px; }
  .sheet { margin: auto; border-radius: 16px; }
}

/* 대회 공지 (D35, 시안 1안) */
.kind { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 6px; font-size: calc(12px * var(--fs)); font-weight: 700; background: var(--accent-weak); color: var(--accent); flex: none; }
.nlist { list-style: none; margin: 0; padding: 0; }
.nlist li { padding: 12px 0; border-top: 1px solid var(--border); }
.nlist li:first-child { border-top: 0; padding-top: 0; }
.nlist li:last-child { padding-bottom: 0; }
.nlist li.sel { margin: 0 -12px; padding: 12px; border-radius: 10px; background: var(--accent-weak); border-top-color: transparent; }
.nlist li.sel + li { border-top-color: transparent; }
.nlist p { margin-top: 4px; }
.nlink { display: block; color: inherit; text-decoration: none; }
.nrow { display: flex; align-items: center; gap: 6px; }
.nrow b { font-size: calc(15px * var(--fs)); font-weight: 650; min-width: 0; }
.nrow .pill { margin-left: auto; flex: none; }
.plan li { display: grid; grid-template-columns: 12.5em 1fr; gap: 8px; font-size: calc(14px * var(--fs)); }
.plan li .d { font-weight: 600; color: var(--text-2); }
.plan li.past, .plan li.past .d { color: var(--text-3); }
.plan li.past em { font-style: normal; font-size: calc(12px * var(--fs)); margin-left: 6px; border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; }
.pre { white-space: pre-line; }
.ndetail h2 { font-size: calc(20px * var(--fs)); line-height: 1.35; }
.nstrip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; font-size: calc(14px * var(--fs)); }
.nstrip .lbl { font-weight: 700; color: var(--text-2); margin-right: 4px; }
.nstrip .it { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; background: var(--surface-2); font-weight: 600; color: inherit; text-decoration: none; }
.nstrip .it small { color: var(--text-3); font-weight: 600; font-size: calc(13px * var(--fs)); }
.nstrip .more { margin-left: auto; color: var(--accent); font-weight: 650; text-decoration: none; }
.ngrid { display: grid; grid-template-columns: 440px 1fr; gap: 20px; align-items: start; }
.nform { max-width: 760px; }
.nform textarea { min-height: 96px; }
.nform .two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* 휴대폰 폭(375)에서 날짜와 시각 칸이 카드 밖으로 나가지 않게 한다(11/11 화면 검수). */
.nform .two > *, .nform .two input[type="time"], .nform .two input[type="date"] { min-width: 0; }
/* 일정 한 줄: 날짜와 끝 날짜 아래에 내용 칸을 넓게 둔다(긴 내용이 잘리지 않게) */
.planrow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.planrow .p-text { grid-column: 1 / -1; }
.planrow > * { min-width: 0; }
#n-plan .planrow + .planrow { padding-top: 10px; border-top: 1px solid var(--border); }
.planrow.head { margin-bottom: 4px; }
.chk2 { display: grid; grid-template-columns: 1fr; gap: 6px; }

/* 학생 할 일 직접 등록과 회의록 (D39, 학생직접등록 시안 v4) */
.nform [hidden] { display: none !important; }
.nform textarea.big { min-height: 320px; }
.chk.kinds { grid-template-columns: repeat(4, auto); justify-content: start; gap: 0 16px; }
.chk.kinds .check { white-space: nowrap; }
.regcard { border-left: 4px solid var(--accent); }
.regcard .row2 { display: flex; gap: 8px; margin-top: 12px; }
.regcard .row2 .btn { flex: 1; }
.regbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; font-size: calc(14px * var(--fs)); }
.regbar .lbl { font-weight: 700; color: var(--text-2); }
.regbar .more { margin-left: auto; color: var(--accent); font-weight: 650; text-decoration: none; }
/* 아직 등록하지 않은 학생이 많으면 휴대폰 폭에서 줄을 바꾼다(잘리지 않게) */
.regbar .pill { white-space: normal; line-height: 1.5; }
.regt { width: 100%; border-collapse: collapse; font-size: calc(14px * var(--fs)); }
.regt th, .regt td { text-align: left; padding: 9px 6px; border-top: 1px solid var(--border); vertical-align: top; }
.regt th { color: var(--text-3); font-weight: 600; font-size: calc(13px * var(--fs)); border-top: 0; }
.who-reg { font-size: calc(12px * var(--fs)); color: var(--text-3); margin-top: 2px; }
.mini { display: flex; gap: 6px; }
.mini .btn { min-height: 30px; padding: 0 10px; font-size: calc(13px * var(--fs)); }
.radios { display: flex; flex-direction: column; gap: 2px; }
.nw { display: inline-block; max-width: 100%; }
.sched .nm .pill { margin-top: 6px; }

/* 테스트 버전(이 Mac에서만, 11/3 시안 ②와 ⑪): 모든 화면 맨 위 노란 줄 */
.testbar {
  display: flex; align-items: center; gap: 10px;
  margin: 8px 0 0; padding: 8px 8px 8px 14px; min-height: 48px;
  background: var(--late-bg); color: var(--text);
  border: 1px solid color-mix(in srgb, var(--late-fg) 40%, transparent); border-radius: var(--radius-sm);
  font-size: calc(14px * var(--fs)); line-height: 1.4;
}
.testbar .tv-tag { flex: none; color: var(--late-fg); font-weight: 700; }
.testbar .tv-who { flex: 1; min-width: 0; }
.testbar .tv-clock { display: block; font-size: calc(13px * var(--fs)); color: var(--late-ink); font-weight: 600; }
.testbar .keep { white-space: nowrap; }
.testbar .btn { flex: none; }
.tv-h { font-size: calc(15px * var(--fs)); font-weight: 600; }
.tv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tv-clockform { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tv-clockform > *, .tv-clockform input[type="time"] { min-width: 0; }
@media (min-width: 960px) {
  body.has-tabs main > .testbar { margin-top: 0; margin-bottom: 16px; }
}

/* ===== Basecoat 1.1.0 기준 통일 (2026-11-12, D41) =====
   David "추천값대로 넣기": docs/UI점검_Basecoat기준_20261112.md 6절 질문 1~6의 추천값.
   배지는 B(옅은 채움 유지, 크기 · 굵기 · 모서리만 Basecoat), 일정표 카드는 지금 채움(D33) 그대로.
   위 규칙을 같은 선택자로 덮는다. !important는 쓰지 않는다. 비교 화면 원본: docs/UI수정안_20261112/ */

/* ---------- 5절 명암비, 모서리 단계 ---------- */
:root { --text-3: #6B717B; --radius: 14px; }   /* 흐린 글자 #7B828D(3.87) → #6B717B(4.91). 카드 모서리 12 → 14 */
:root[data-theme="dark"] .tabs .badge { color: #0B1712; }  /* 어두운 화면 탭 숫자 배지 2.58 → 7.10 */

/* ---------- 글자 (질문 2, 3, 4) ---------- */
body { font-size: calc(14px * var(--fs)); line-height: 1.5; }               /* 본문 15 → 14 */
h1 { font-size: calc(20px * var(--fs)); font-weight: 500; }                 /* 쪽 제목 22/700 → 20/500 */
.hero h1 { font-size: calc(20px * var(--fs)); }                             /* 로그인 26 → 20 */
.headrow h1 { font-size: calc(20px * var(--fs)); }                          /* PC 할 일 · 공지 24 → 20 */
h2 { font-size: calc(16px * var(--fs)); font-weight: 500; }                 /* 카드 · 창 제목 17/650 → 16/500 */
.pop h2 { font-size: calc(16px * var(--fs)); }                              /* 일정표 자세히 18 → 16 */
.ndetail h2 { font-size: calc(20px * var(--fs)); }                          /* 공지 자세히 제목은 쪽 제목 단계 */
h3 { font-size: calc(14px * var(--fs)); font-weight: 500; }
b { font-weight: 500; }
.card p.small b { font-weight: 600; }   /* 문장 속 강조(약속 상자, 알림 카드)는 600으로 남긴다(11/12 화면 판정: 500에서는 강조가 보이지 않음) */

/* 설명 글: 크기 14 하나, 흐린 색 하나 */
.small:not(.btn, .strong), .tiny { font-size: calc(14px * var(--fs)); }   /* 설명 글 크기는 14 하나. 글자색은 원래 규칙(.muted 등)을 따른다(11/12 화면 판정: 약속 상자 · 알림 카드 본문이 흐려짐) */
.reason, .time, .kv, .task .kv { font-size: calc(14px * var(--fs)); }
.today-time b { font-size: calc(14px * var(--fs)); font-weight: 500; }
.summary span { font-size: calc(14px * var(--fs)); }
.rules { font-size: calc(14px * var(--fs)); }
.error { font-size: calc(14px * var(--fs)); font-weight: 500; }
.board li.me .name::after, .rtable tr.me th[scope="row"] a::after { font-size: calc(14px * var(--fs)); font-weight: 400; }

/* 목록 항목 제목 · 사람 이름: 15/600~700 → 14/500 */
.name { font-weight: 500; }
.nrow b { font-size: calc(14px * var(--fs)); font-weight: 500; }
.week .day b { font-size: calc(14px * var(--fs)); }
.strong, .count { font-weight: 500; }
.avatar { font-size: calc(12px * var(--fs)); font-weight: 500; }

/* 표 */
.rtable { font-size: calc(14px * var(--fs)); }
.rtable thead th { font-size: calc(14px * var(--fs)); font-weight: 500; }
.rtable th[scope="row"] a { font-weight: 500; }
.regt th { font-size: calc(14px * var(--fs)); font-weight: 500; }

/* 묶음 이름, 입력 칸 라벨 */
.section-title { font-size: calc(12px * var(--fs)); font-weight: 500; }
label.field > span { font-size: calc(14px * var(--fs)); font-weight: 500; color: var(--text); }

/* 앱 이름 글자: 두 폭 16/600 */
.brand b { font-weight: 600; }
.tabs .tb-brand { font-size: calc(16px * var(--fs)); }
.tabs .tb-brand b { font-weight: 600; }
.tabs .tb-me b { font-weight: 500; }

/* 그 밖의 굵기 600~700 → 500 */
.linkbtn, .net, .range, .toast, .plan li .d { font-weight: 500; }
.nstrip .lbl, .regbar .lbl, .nstrip .it, .nstrip .more, .regbar .more { font-weight: 500; }
.nstrip .it small { font-size: calc(12px * var(--fs)); font-weight: 500; }
.stat span { font-weight: 500; }
.legend { font-size: calc(12px * var(--fs)); font-weight: 500; }

/* 큰 숫자만 600 (질문 4) */
.status-line { font-weight: 600; }
.summary b { font-size: calc(20px * var(--fs)); font-weight: 600; }
.stat b { font-weight: 600; }

/* ---------- 단추 (질문 1: 휴대폰 높이 48 유지) ---------- */
.btn { font-size: calc(14px * var(--fs)); font-weight: 500; padding: 0 12px; border-radius: 8px; }
.btn.big { font-size: calc(16px * var(--fs)); }
.btn.small { min-height: 32px; padding: 0 10px; font-size: calc(14px * var(--fs)); }
.range .btn { min-height: 32px; padding: 0 10px; }       /* 34 → 32 */
.mini .btn { min-height: 32px; font-size: calc(14px * var(--fs)); }         /* 30 → 32 */

/* 입력 칸: 휴대폰은 48 · 16px 유지(아이폰 확대 방지), 모서리 8 */
input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="time"], input[type="number"], input[type="month"], select, textarea {
  border-radius: 8px;
}

/* 세그먼트(탭 목록) */
.segment { padding: 3px; }
.segment button, .segment a.seg, .segment.sub a.seg { font-size: calc(14px * var(--fs)); font-weight: 500; }
.segment button.on, .segment a.seg.on { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); }
:root[data-theme="dark"] .segment button.on, :root[data-theme="dark"] .segment a.seg.on { box-shadow: 0 0 0 1px var(--border-strong); }

/* 휴대폰 아래 탭 11/600 → 12/500, 숫자 배지 10/700 → 12/500 */
.tabs a { font-size: calc(12px * var(--fs)); font-weight: 500; }
.tabs .badge { font-size: calc(12px * var(--fs)); font-weight: 500; }

/* ---------- 모양 ---------- */
.card.info, .card.warn, .card.alert { border-radius: var(--radius); }   /* 알림 카드 8 → 카드와 같게 */
.nstrip, .regbar { border-radius: 10px; }
.sched { border-radius: 14px; }
.pop { padding: 24px; }
.sheet { border-radius: 14px 14px 0 0; }
.chip { border-radius: 8px; font-weight: 500; }                          /* 일정표 카드 제목 14/500 */
.chip .m { font-size: calc(12px * var(--fs)); font-weight: 500; }                          /* 세부 13/600 → 12/500 */
.sched .hd { font-weight: 500; }
.sched .hd.today, .sched .hd.today small { font-weight: 500; color: var(--accent); }  /* 오늘은 굵기 800 대신 색 */
.sched .nm { font-size: calc(14px * var(--fs)); font-weight: 500; }

/* ---------- 배지: 기본은 B(옅은 채움 유지, 크기 · 굵기 · 모서리만 Basecoat) ---------- */
.pill { font-size: calc(12px * var(--fs)); font-weight: 500; line-height: 16px; padding: 2px 8px; border-radius: 999px; }
.kind { min-height: 20px; font-weight: 500; border-radius: 999px; }
.me-tag { font-weight: 500; line-height: 16px; padding: 2px 8px; border-radius: 999px; }
.reason-meta span, .plan li.past em { line-height: 16px; padding: 2px 8px; border-radius: 999px; }
.stat em { font-size: calc(12px * var(--fs)); font-weight: 500; border-radius: 999px; padding: 2px 8px; }


/* ---------- PC 폭(960px 이상): Basecoat 크기 (질문 1) ---------- */
@media (min-width: 960px) {
  .btn { min-height: 36px; padding: 0 10px; }
  .btn.big { min-height: 40px; }
  .btn.small, .range .btn, .mini .btn { min-height: 32px; }
  input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="time"], input[type="number"], input[type="month"], select {
    min-height: 36px; padding: 4px 10px; font-size: calc(14px * var(--fs));
  }
  textarea { padding: 8px 10px; font-size: calc(14px * var(--fs)); }
  .segment button, .segment a.seg { min-height: 30px; }
  .card { padding: 24px; }
  .tabs a { font-size: calc(14px * var(--fs)); }
  .tabs .badge { font-size: calc(12px * var(--fs)); }
  .sheet { border-radius: 14px; }
}