@font-face { font-family:"Geurimilgi"; src:url(/fonts/geurimilgi.woff2) format("woff2"); font-display:swap; }
:root {
  color-scheme: light;
  --bg:#FFFFFF; --surface:#F5F7FB; --line:#DDE3EF; --text:#1B2440;
  --navy:#1F3A8A; --navy-dark:#14246B; --sky:#E6ECFA; --amber:#B45309;
  --muted:#505D76; --header-height:130px;
}
* { box-sizing:border-box; }
html { background:var(--bg); scroll-padding-top:calc(var(--header-height) + 16px); }
body { margin:0; color:var(--text); background:var(--bg); font-family:"Geurimilgi",system-ui,sans-serif; font-size:17px; line-height:1.5; letter-spacing:.01em; }
button,input,textarea { font:inherit; letter-spacing:inherit; color:inherit; }
button,input,textarea,a { -webkit-tap-highlight-color:transparent; }
button { min-height:44px; border:1px solid var(--line); border-radius:9px; background:var(--bg); padding:8px 14px; cursor:pointer; }
button:hover { background:var(--surface); border-color:var(--navy); }
button:disabled { cursor:default; opacity:.55; }
input,textarea { width:100%; min-width:0; border:1px solid var(--line); border-radius:8px; background:var(--bg); padding:9px 11px; min-height:44px; }
input[type=checkbox] { width:20px; height:20px; min-height:20px; flex-shrink:0; accent-color:var(--navy); }
textarea { display:block; resize:vertical; min-height:94px; }
:focus-visible { outline:2px solid var(--navy); outline-offset:3px; }
[hidden] { display:none !important; }
h1,h2,h3,p { margin:0; }
h1 { font-size:30px; } h2 { font-size:23px; } h3 { font-size:20px; }
a { color:var(--navy); text-underline-offset:3px; overflow-wrap:anywhere; }
.muted { color:var(--muted); }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.error-text { color:var(--amber); overflow-wrap:anywhere; }
.error-text:empty { display:none; }
.primary { background:var(--navy); border-color:var(--navy); color:white; }
.primary:hover { background:var(--navy-dark); color:white; }
.text-button { border-color:transparent; color:var(--navy); background:transparent; }
.icon-button { width:44px; height:44px; padding:10px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.skip-link { position:fixed; left:16px; top:-100px; z-index:20; padding:12px; background:white; }
.skip-link:focus { top:8px; }
.login-screen { min-height:100svh; display:grid; place-items:center; padding:32px 16px; background:linear-gradient(180deg,var(--surface),white 75%); }
.login-card { max-width:390px; width:100%; padding:32px 24px; border-top:4px solid var(--navy); background:white; border-radius:4px 4px 16px 16px; box-shadow:0 8px 35px #1b24400a; }
.brand-mark { display:grid; place-items:center; width:48px; height:48px; border-radius:13px; background:var(--navy); color:white; font-size:30px; margin-bottom:24px; }
.eyebrow { color:var(--navy); margin-bottom:6px; }
.login-card h1 { margin-bottom:8px; }
.login-card form { margin-top:28px; display:grid; gap:10px; }
.login-card form button { margin-top:6px; }
#session-status { margin-top:16px; }
.header { position:sticky; top:0; z-index:5; background:#fffffff7; border-bottom:1px solid var(--line); }
.header-inner { max-width:1400px; margin:auto; padding:6px 16px; }
.header-primary,.header-secondary { display:flex; align-items:center; gap:20px; }
.header-primary { min-height:52px; }
.brand { font-size:27px; white-space:nowrap; margin-right:16px; }
.grade-tabs { display:flex; gap:4px; }
.grade-tabs button { border:0; border-radius:8px; white-space:nowrap; }
/* 건수 배지는 탭 모서리에 겹쳐 두어 탭 폭을 늘리지 않는다 */
#tab-today { position:relative; }
.tab-count { position:absolute; top:2px; right:-4px; min-width:17px; padding:0 4px; border-radius:999px; background:var(--navy); color:#fff; font-size:11px; font-weight:bold; line-height:17px; text-align:center; pointer-events:none; }
.today-summary { margin:0 0 6px; color:var(--muted); font-size:15px; }
.today-group h3 { margin:14px 0 8px; font-size:18px; color:var(--navy); }
.today-group + .today-group h3 { margin-top:18px; }
.grade-tabs [aria-selected=true] { color:var(--navy); background:var(--sky); font-weight:bold; }
.header-actions { display:flex; gap:8px; margin-left:auto; }
.header-secondary { min-height:42px; font-size:15px; color:var(--muted); gap:18px; }
.save-status { margin-right:auto; }
.save-status[data-status=error],.save-status[data-status=offline] { color:var(--amber); }
.weather { display:inline-flex; align-items:center; gap:4px; }
.deg { font-family:system-ui,sans-serif; letter-spacing:0; }
.weather svg { width:20px; height:20px; }
.weather.is-error { font-size:14px; }
.clock { white-space:nowrap; display:flex; gap:10px; font-variant-numeric:tabular-nums; }
.logout { font-size:14px; padding:4px 6px; }
.planner-main { max-width:1400px; margin:0 auto; padding:26px 24px 70px; }
#app-message { margin-bottom:12px; }
.lesson { position:relative; display:grid; grid-template-columns:80px minmax(0,1fr) auto; grid-template-areas:"side content actions" "side classes classes" ". bottom bottom"; align-items:start; gap:0 12px; border:1px solid var(--line); border-radius:12px; padding:12px 16px; margin-bottom:8px; background:white; scroll-margin-top:16px; }
.lesson.is-current { border-left:4px solid var(--navy); padding-left:13px; }
.lesson.is-complete { opacity:.72; }
/* Darker foreground preserves contrast after the complete card's opacity. */
.lesson.is-complete .muted,.lesson.is-complete .lesson-body,.lesson.is-complete .class-note,.lesson.is-complete .place-chip { color:var(--text); }
.lesson-side { grid-area:side; display:flex; flex-direction:column; align-items:flex-start; gap:7px; padding-top:4px; min-width:0; overflow-wrap:anywhere; }
.lesson-number { font-size:20px; font-weight:bold; }
.place-chip { padding:2px 9px; border-radius:6px; color:var(--muted); background:var(--surface); font-size:15px; }
.current-label { color:var(--navy); font-size:14px; font-weight:bold; }
.lesson-content { grid-area:content; min-width:0; }
.lesson-title { display:block; margin:0 0 3px; white-space:pre-wrap; overflow-wrap:anywhere; }
.lesson-details { display:flex; flex-direction:column; align-items:flex-start; gap:0; }
.lesson-details .lesson-body { width:100%; min-width:0; }
.lesson-body { font-size:16px; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--muted); }
.clamped { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.expand-button { font-size:14px; padding:0 8px 0 0; min-height:32px; min-width:44px; flex-shrink:0; text-align:left; }
.class-area { display:contents; }
.card-actions { grid-area:actions; display:flex; justify-content:flex-end; gap:14px; margin:0; padding-top:3px; }
/* 준비물·메모·수정: 네모 없이 글자만 있는 작은 링크. 눌리는 영역만 투명하게 넓힌다 */
.link-button { position:relative; min-height:0; padding:2px 0; border:0; border-radius:4px; background:transparent; color:var(--muted); font-size:14px; line-height:1.4; }
.link-button::after { content:""; position:absolute; inset:-12px -6px; }
.link-button:hover { background:transparent; border-color:transparent; color:var(--navy); text-decoration:underline; text-underline-offset:3px; }
.link-button.has-memo,.prep-toggle[aria-pressed=true],.link-button[data-action=edit][aria-expanded=true] { color:var(--navy); font-weight:bold; }
.link-button.has-memo::before,.prep-toggle[aria-pressed=true]::before { content:"● "; font-size:9px; vertical-align:2px; }
/* 학급 줄: 수업 내용 아래 한 줄 띄워 글자처럼 이어 붙인다. 네모는 반 이름에만 */
/* 수정 모드 윗줄: ↑ ↓ 저장 취소 | 준비물 메모 수정 중. 버튼 사이 8px 이상 */
.is-editing { grid-template-columns:auto minmax(0,1fr); grid-template-areas:"side actions" "content content" "classes classes" "bottom bottom"; }
.is-editing .card-actions { flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:6px 14px; padding-top:0; }
.edit-buttons { display:flex; align-items:center; gap:8px; }
.arrow-button { width:44px; height:44px; padding:0; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.arrow-button svg { width:22px; height:22px; }
.save-button,.cancel-button { min-height:44px; padding:8px 14px; font-size:15px; white-space:nowrap; }
.class-chips { grid-area:classes; display:flex; flex-wrap:wrap; gap:6px 22px; margin-top:16px; align-items:flex-start; }
.is-editing .class-chips { display:grid; grid-template-columns:repeat(var(--class-count),minmax(0,1fr)); gap:10px; }
.class-chip { min-width:0; max-width:100%; }
.chip-row { display:flex; align-items:center; min-width:0; gap:7px; min-height:26px; }
.class-name { flex-shrink:0; padding:1px 9px; border-radius:999px; background:var(--surface); color:var(--navy); font-size:14px; font-weight:bold; white-space:nowrap; }
.is-done .class-name { background:var(--sky); color:var(--navy); }
.is-skip .class-name { background:#E6E9F0; color:var(--muted); }
.date-text { font-size:14px; white-space:nowrap; }
.date-text.is-empty,.skip-text { color:var(--muted); }
.skip-text { font-size:14px; }
.date-button { position:relative; min-height:0; padding:0; border:0; border-radius:0; background:transparent; color:var(--navy); font-size:14px; text-decoration:underline dotted; text-underline-offset:4px; white-space:nowrap; }
.date-button::after { content:""; position:absolute; inset:-10px -6px; }
.date-button:hover { background:transparent; border-color:transparent; }
.date-editor { width:150px; flex:none; height:36px; min-height:36px; padding:4px 8px; font-size:14px; }
/* 완료 표시: 빈 네모를 누르면 V 가 든 체크칸이 된다 */
.done-box { position:relative; flex-shrink:0; width:18px; height:18px; min-height:0; padding:0; border:0; border-radius:0; background:transparent; }
.done-box::after { content:""; position:absolute; inset:-13px; }
.done-box:hover { background:transparent; border-color:transparent; }
.done-box .box { display:grid; place-items:center; width:18px; height:18px; border:1.5px solid var(--muted); border-radius:4px; background:#fff; color:#fff; font-size:13px; font-weight:bold; line-height:1; }
.done-box[aria-pressed=true] .box { background:var(--navy); border-color:var(--navy); }
.chip-meta { display:flex; align-items:baseline; gap:6px; padding-left:2px; min-width:0; font-size:13px; }
.chip-tag { font-size:13px; font-weight:bold; color:var(--navy); flex-shrink:0; }
.is-overdue .chip-tag { color:var(--amber); }
.class-note { display:block; min-width:0; max-width:min(240px,100%); flex:1; min-height:22px; padding:0; border:0; border-radius:0; background:transparent; font-size:13px; text-align:left; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.class-note.is-expanded { white-space:pre-wrap; overflow-wrap:anywhere; max-width:100%; }
.skip-toggle { display:flex; align-items:center; gap:7px; min-height:44px; cursor:pointer; font-size:15px; }
.skip-toggle { border-top:1px solid var(--line); }
.lesson-bottom { grid-area:bottom; min-width:0; }
/* 목록의 준비물: 수업 내용 아래 한 줄 띄워 구분한다 */
.lesson-prep { margin-top:14px; font-size:15px; overflow-wrap:anywhere; }
.lesson-prep-label { margin-right:4px; padding:1px 8px; border-radius:999px; background:var(--surface); color:var(--navy); font-size:13px; font-weight:bold; }
.memo-field { display:block; padding-top:10px; border-top:1px dashed var(--line); margin-top:8px; }
.memo-field textarea { margin-top:5px; background:var(--surface); }
.edit-fields { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:6px 10px; }
.edit-fields label { font-size:14px; min-width:0; }
.edit-fields label.wide { grid-column:1 / -1; }
.edit-fields input,.edit-fields textarea { margin-top:3px; }
.edit-fields input { min-height:40px; padding:6px 10px; }
.edit-fields textarea { min-height:78px; }
.structure-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.structure-actions button { font-size:14px; min-height:36px; padding:4px 12px; }
.class-note-field { display:block; padding:4px 6px 8px; font-size:15px; }
.class-note-field input { margin-top:4px; }
.action-dialog { width:min(480px,calc(100% - 32px)); max-height:85svh; overflow:auto; border:1px solid var(--line); border-radius:16px; padding:22px; color:var(--text); background:var(--bg); overflow-wrap:anywhere; }
.action-dialog::backdrop { background:#14246b66; }
.action-dialog p { margin-top:12px; white-space:pre-wrap; }
.dialog-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; margin-top:22px; }
.dialog-actions button { min-width:80px; min-height:44px; }
.danger { color:var(--amber); border-color:var(--amber); }
.add-between { display:block; margin:3px auto 15px; padding:4px 16px; border-style:dashed; font-size:15px; color:var(--navy); }
.add-last { width:100%; min-height:52px; border-style:dashed; color:var(--navy); margin-top:8px; }
.state-panel { padding:48px 16px; text-align:center; color:var(--muted); }
.state-panel button { display:block; margin:16px auto 0; }
.restore-dialog { width:min(540px,calc(100% - 32px)); max-height:85svh; border:1px solid var(--line); border-radius:16px; padding:22px; color:var(--text); background:white; }
.restore-dialog::backdrop { background:#14246b55; }
.dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.snapshot-item { border-top:1px solid var(--line); padding:12px 0; }
.snapshot-item:first-child { margin-top:18px; }
.snapshot-choice { width:100%; text-align:left; }
.snapshot-confirm { display:flex; gap:8px; flex-wrap:wrap; padding-top:10px; }
.snapshot-confirm p { flex-basis:100%; }
@media(min-width:900px) {
  .header-inner { display:grid; grid-template-columns:auto auto minmax(0,1fr) auto auto auto auto auto; align-items:center; gap:10px; }
  .header-primary,.header-secondary { display:contents; }
  .brand { grid-column:1; font-size:23px; margin:0; }
  .grade-tabs { grid-column:2; }
  .grade-tabs button { font-size:15px; padding:6px; }
  .save-status { grid-column:4; grid-row:1; font-size:14px; }
  .weather { grid-column:5; grid-row:1; font-size:14px; white-space:nowrap; }
  .clock { grid-column:6; grid-row:1; font-size:14px; gap:6px; }
  .header-actions { grid-column:7; grid-row:1; gap:0; margin:0; }
  .logout { grid-column:8; grid-row:1; }
}
@media(min-width:900px) and (max-width:1150px) {
  .header-inner { gap:5px; }
  .brand { font-size:20px; }
  .grade-tabs { gap:0; }
  .grade-tabs button { font-size:14px; padding:4px; }
  .weather,.clock,.save-status,.logout { font-size:13px; }
  .weather svg { display:none; }
  .clock { gap:4px; }
}
@media(max-width:899px) {
  .header-primary { gap:4px; min-height:48px; }
  .brand { font-size:20px; margin-right:auto; }
  .grade-tabs { gap:0; }
  .grade-tabs button { font-size:15px; padding:8px 4px; min-width:44px; }
  .header-actions { gap:0; margin-left:0; }
  .header-actions .icon-button { padding:11px; }
  .header-secondary { flex-wrap:wrap; gap:4px 8px; font-size:13px; align-items:center; line-height:1.4; }
  .weather { font-size:13px; gap:3px; min-width:0; }
  .weather svg { width:16px; height:16px; }
  .weather-range { display:none; }
  .clock { flex-wrap:wrap; gap:0 5px; }
  .logout { font-size:13px; padding:4px 0; min-width:44px; margin-left:auto; }
  .save-status { margin:0; min-width:0; overflow-wrap:anywhere; }
  .planner-main { padding:16px 16px 48px; }
  /* 윗줄: 회차 번호 · 장소 · 다음 수업 (오른쪽 끝에 링크). 수업 내용은 그 아래 전체 폭 */
  .lesson { grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"side actions" "content content" "classes classes" "bottom bottom"; padding:12px; }
  .lesson.is-current { padding-left:9px; }
  .lesson-side { flex-direction:row; flex-wrap:wrap; align-items:center; gap:2px 8px; padding-top:0; }
  .lesson-number { font-size:18px; }
  .card-actions { padding-top:0; gap:12px; }
  .lesson-content { margin-top:6px; }
  .class-chips { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 10px; margin-top:12px; }
  .is-editing .class-chips { grid-template-columns:minmax(0,1fr); }
  .is-editing { grid-template-columns:minmax(0,1fr); grid-template-areas:"side" "actions" "content" "classes" "bottom"; }
  /* 첫 줄: ↑ ↓ 저장 취소 / 둘째 줄: 준비물 메모 수정 중(오른쪽) */
  .is-editing .card-actions { justify-content:flex-end; margin-top:4px; row-gap:2px; }
  .is-editing .edit-buttons { flex:0 0 100%; }
  .restore-dialog { padding:16px; }
}
@media(max-width:400px) {
  .header-inner { padding-left:10px; padding-right:10px; }
  .brand { font-size:18px; }
  .grade-tabs button { min-width:40px; padding:8px 3px; font-size:14px; }
  .header-actions .icon-button { width:40px; padding:9px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }