:root {
  --board: #1F4B3F;
  --board-deep: #16382F;
  --gold: #C7972F;
  --gold-soft: #F4E8CE;
  --paper: #F5F6F2;
  --card: #FFFFFF;
  --ink: #22302B;
  --ink-soft: #5C6B64;
  --line: #E3E7DE;
  --now-glow: rgba(199, 151, 47, .35);
  --radius: 14px;
  --shadow: 0 2px 10px rgba(31, 75, 63, .08);

  --ui-font: 'Jua', 'Pretendard Variable', sans-serif;
  --display-font: 'Jua', 'Pretendard Variable', sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: var(--ui-font);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  transition: background .4s ease, color .4s ease;
}
.display { font-family: var(--display-font); font-weight: 400; }

header {
  background: linear-gradient(180deg, var(--board) 0%, var(--board-deep) 100%);
  color: #fff;
  padding: 18px 28px 16px;
  display: flex;
  align-items: center;
  gap: 20px;
  border-bottom: 4px solid var(--gold);
}
.head-title { flex: 1; min-width: 0; }
.head-title h1 { font-size: 30px; letter-spacing: .5px; }
.head-title h1 .grade { color: var(--gold-soft); font-size: 20px; margin-left: 10px; }
.head-title .subtitle { font-size: 14px; opacity: .85; margin-top: 2px; }
.daily-line {
  background: rgba(255,255,255,.12);
  border: 1px dashed rgba(255,255,255,.4);
  border-radius: 10px;
  padding: 8px 16px;
  font-size: 15px;
  max-width: 340px;
}
.daily-line .label { font-size: 11px; color: var(--gold-soft); display: block; margin-bottom: 2px; letter-spacing: 1px; }
.head-meta { text-align: right; white-space: nowrap; }
.head-meta .clock { font-size: 34px; font-variant-numeric: tabular-nums; line-height: 1; }
.head-meta .date { font-size: 13px; opacity: .85; margin-top: 4px; }
.head-meta .weather { font-size: 14px; margin-top: 6px; color: var(--gold-soft); }

main {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding: 20px 24px 28px;
  max-width: 1500px;
  margin: 0 auto;
}
.card {
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 16px 18px;
  margin-bottom: 16px;
}
.card h2 {
  font-size: 15px;
  color: var(--board);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--gold-soft);
}
.empty { color: var(--ink-soft); font-size: 14px; padding: 6px 0; }

.morning { font-size: 14.5px; line-height: 1.65; white-space: pre-line; }
.morning-row { min-width:0; margin-bottom:16px; }
.morning-row > .card { min-width:0; margin-bottom:0; }
.whiteboard-card { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:15px 8px; background:#e7eedf; color:var(--board); cursor:pointer; font:inherit; font-size:14px; }
.whiteboard-card[hidden] { display:none !important; }
.whiteboard-card > span:first-child { font-size:32px; }
.whiteboard-card:hover { background:#dbe8cf; }
/* Independent grids keep lunch height out of the tool-card row sizing. */
.overview-grid, .activity-zone {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 18px;
  min-width: 0;
}
.overview-grid { align-items: stretch; }
.overview-grid > #flow-card { display: flex; flex-direction: column; }
.overview-grid > #flow-card > .flow { display: flex; flex-direction: column; flex: 1; }
.overview-grid > #flow-card > .flow > .period { flex: 1; }
.daily-sidebar {
  display: grid;
  grid-template-rows: auto minmax(min-content, 1fr) auto;
  gap: 14px;
  min-width: 0;
}
.overview-grid .card, .overview-grid .morning-row,
.activity-zone .card { margin-bottom: 0; min-width: 0; }
.overview-grid .morning-row { display: grid; }
.activity-zone { align-items: start; }
.activity-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
}
.activity-grid > .card, .tool-pair > .archive-card {
  min-height: 96px;
  padding: 14px 16px;
  justify-content: center;
}
.tool-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
#tool-pair > .card { order: 0; }
.tool-pair:has(> .whiteboard-card:not([hidden])) { grid-template-columns: 96px minmax(0, 1fr); }
.tool-pair > .whiteboard-card { width: 100%; aspect-ratio: 1; align-self: start; padding: 8px; gap: 8px; font-size: 13px; }
.col-right { display: contents; }
.meal-menu { font-size: 15px; line-height: 1.8; white-space: pre-line; }
.meal-item { display: block; min-width: 0; }
.meal-date { font-size: 12px; color: var(--ink-soft); margin-bottom: 6px; }
#meal-card .meal-menu { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; font-size: 16px; line-height: 1.35; white-space: normal; }
/* Match the independent tool grid without letting a long menu enlarge it. */
@media (min-width: 701px) {
  .activity-zone > #meal-card { align-self: stretch; contain: size; overflow-y: auto; }
}
.duty-list { list-style: none; }
.duty-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  margin-bottom: 6px;
  background: var(--paper);
  font-size: 14.5px;
}
.duty-list .who { font-weight: 700; color: var(--board); }

.flow-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.flow-head h2 { border: 0; padding: 0; margin: 0; font-size: 18px; }
.flow-head .day-chip {
  background: var(--board);
  color: #fff;
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 14px;
}
.flow { position: relative; padding-left: 26px; }
.flow::before {
  content: '';
  position: absolute;
  left: 8px; top: 8px; bottom: 8px;
  width: 3px;
  background: var(--line);
  border-radius: 2px;
}
.period {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 10px;
  transition: transform .2s, box-shadow .2s;
}
.period .p-main { display: flex; align-items: center; gap: 14px; }
.period::before {
  content: '';
  position: absolute;
  left: -23px; top: 22px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--line);
  border: 2px solid var(--paper);
}
.period .p-time { font-size: 13px; color: var(--ink-soft); width: 46px; font-variant-numeric: tabular-nums; }
.period .p-label { font-size: 13px; color: var(--ink-soft); width: 52px; }
.period .p-subject { font-size: 19px; flex: 1; }
.subject-jump { color: inherit; text-decoration: none; cursor: pointer; }
.subject-jump:hover, .subject-jump:focus-visible { color: var(--board); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .16em; }
.subject-jump:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.period .p-status { font-size: 13px; color: var(--board); background: var(--gold-soft); border-radius: 6px; padding: 3px 10px; }
.period .p-tag { font-size: 12px; border-radius: 6px; padding: 2px 8px; }
.period .p-flags { display:flex; align-items:center; gap:4px; flex:none; min-width:0; }
.period .p-detail { margin-top: 9px; padding: 9px 2px 1px; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 6px; }
.period .p-content { font-size: 14.5px; color: var(--ink); line-height: 1.45; }
.period .p-supplies { font-size: 13.5px; color: var(--ink-soft); }
.period .p-supplies b { color: var(--board); font-weight: 700; }
.period .p-announce { font-size: 14px; color: var(--board); background: var(--gold-soft); border-left: 3px solid var(--gold); border-radius: 6px; padding: 6px 10px; }
.period .tag-moving { background: #E8F0FE; color: #1A56A8; }
.period .tag-override { background: #FDECEC; color: #B0362F; }
.period.done { opacity: .5; }
.period.now {
  border: 2px solid var(--gold);
  box-shadow: 0 4px 18px var(--now-glow);
  transform: translateX(4px);
}
.period.now::before { background: var(--gold); width: 13px; height: 13px; left: -24px; }
.now-chip {
  background: var(--gold);
  color: #fff;
  font-size: 12px;
  border-radius: 999px;
  padding: 3px 12px;
  letter-spacing: 1px;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .now-chip { animation: none; } .period { transition: none; } }
.announce {
  background: var(--gold-soft);
  border-left: 4px solid var(--gold);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14.5px;
  margin-bottom: 12px;
}

.link-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
a.link-card {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 14px;
  text-decoration: none;
  color: var(--ink);
  font-size: 15px;
  background: var(--card);
  transition: border-color .15s, background .15s;
}
a.link-card:hover { border-color: var(--gold); background: var(--gold-soft); }
a.link-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
a.link-card .arrow { margin-left: auto; color: var(--gold); }
.todo-list { list-style: none; }
.todo-list li { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; font-size: 15px; }
.todo-list li .box { color: var(--gold); }
.todo-list li.done { color: var(--ink-soft); text-decoration: line-through; }
.upcoming li { display: flex; gap: 10px; padding: 6px 0; font-size: 14px; list-style: none; }
.upcoming li .d { color: var(--board); font-weight: 700; width: 56px; font-variant-numeric: tabular-nums; }

footer { text-align: center; font-size: 12px; color: var(--ink-soft); padding: 4px 0 20px; }

header[hidden], main[hidden], footer[hidden] { display: none !important; }

#boot { padding: 0; }
.sk-head { background: linear-gradient(180deg, var(--board) 0%, var(--board-deep) 100%);
  border-bottom: 4px solid var(--gold); padding: 22px 28px; display: flex; gap: 20px; align-items: center; }
.sk-main { display: grid; grid-template-columns: 300px 1fr 320px; gap: 18px;
  padding: 20px 24px 28px; max-width: 1500px; margin: 0 auto; }
.sk-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }
.sk-bar { height: 12px; border-radius: 6px; background: var(--line); margin: 10px 0; }
.sk-bar.t { height: 16px; width: 45%; margin-bottom: 14px; }
.sk-bar.w70 { width: 70%; } .sk-bar.w50 { width: 50%; } .sk-bar.w85 { width: 85%; }
.sk-bar.light { background: rgba(255,255,255,.22); }
.sk-row { height: 54px; border-radius: 12px; background: var(--line); margin-bottom: 10px; opacity: .55; }
.sk-pulse { animation: skPulse 1.4s ease-in-out infinite; }
@keyframes skPulse { 0%,100% { opacity: .55; } 50% { opacity: .95; } }
@media (prefers-reduced-motion: reduce) { .sk-pulse { animation: none; } }
@media (max-width: 1100px) { .sk-main { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .sk-main { grid-template-columns: 1fr; padding: 14px; } }

body.scheme-sky {
  --board: #1E5F8C; --board-deep: #16496B;
  --gold: #E08A3C; --gold-soft: #FBE7D3;
  --paper: #EEF5FB; --card: #FFFFFF;
  --ink: #16283A; --ink-soft: #526575; --line: #DBE7F1;
  --now-glow: rgba(224,138,60,.35);
}
body.scheme-pink {
  --board: #B0446B; --board-deep: #8C3555;
  --gold: #E0A64B; --gold-soft: #FBEACB;
  --paper: #FBF0F3; --card: #FFFFFF;
  --ink: #3A2029; --ink-soft: #7A5763; --line: #F0DDE4;
  --now-glow: rgba(224,166,75,.35);
}
body.scheme-green {
  --board: #2E7D52; --board-deep: #236340;
  --gold: #C7972F; --gold-soft: #E4F2E8;
  --paper: #EFF7F1; --card: #FFFFFF;
  --ink: #123522; --ink-soft: #4B6B57; --line: #D6EADD;
  --now-glow: rgba(199,151,47,.35);
}

body.scheme-chalk {
  --board: #10352C; --board-deep: #0A241E;
  --gold: #F2E06A; --gold-soft: rgba(242,224,106,.20);
  --paper: #1B4438; --card: rgba(255,255,255,.05);
  --ink: #F2F6F0; --ink-soft: #AFC7B7; --line: rgba(255,255,255,.24);
  --now-glow: rgba(242,224,106,.38);
  --shadow: none;
}

body.scheme-chalk {
  background-image:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.05), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(255,255,255,.04), transparent 46%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.014) 0 2px, transparent 2px 7px);
  background-attachment: fixed;
}

body.scheme-chalk .card, body.scheme-chalk .period { border-radius: 8px; }
body.scheme-chalk .card h2 { border-bottom-style: dashed; }
body.scheme-chalk .duty-list li { background: rgba(255,255,255,.06); }
body.scheme-chalk header { border-bottom-width: 3px; }

body.scheme-dark, body.scheme-black {
  --gold: #FBBF24; --gold-soft: rgba(251,191,36,.14);
  --ink: #F1F5F9; --ink-soft: #94A3B8; --line: rgba(255,255,255,.12);
  --now-glow: rgba(251,191,36,.4);
  --shadow: 0 2px 12px rgba(0,0,0,.45);
}
body.scheme-dark { --board: #24344B; --board-deep: #0F1B2E; --paper: #0F172A; --card: #1B2637; }
body.scheme-black { --board: #202020; --board-deep: #0A0A0A; --paper: #0A0A0A; --card: #171717; }

body.scheme-dark .card h2, body.scheme-black .card h2, body.scheme-chalk .card h2 { color: var(--gold); border-bottom-color: rgba(255,255,255,.10); }
body.scheme-dark .head-title h1 .grade, body.scheme-black .head-title h1 .grade, body.scheme-chalk .head-title h1 .grade { color: var(--gold); }
body.scheme-dark .period .p-status, body.scheme-black .period .p-status, body.scheme-chalk .period .p-status { color: #0A0A0A; background: var(--gold); }
body.scheme-dark .day-chip, body.scheme-black .day-chip, body.scheme-chalk .day-chip,
body.scheme-dark .now-chip, body.scheme-black .now-chip, body.scheme-chalk .now-chip { color: #0A0A0A; }
body.scheme-dark .duty-list li, body.scheme-black .duty-list li { background: rgba(255,255,255,.05); }
body.scheme-dark .duty-list .who, body.scheme-black .duty-list .who, body.scheme-chalk .duty-list .who { color: var(--gold); }
body.scheme-dark a.link-card:hover, body.scheme-black a.link-card:hover, body.scheme-chalk a.link-card:hover { background: rgba(251,191,36,.12); }

body.font-pretendard { --ui-font: 'Pretendard Variable', Pretendard, sans-serif; --display-font: 'Pretendard Variable', Pretendard, sans-serif; }
body.font-nanum { --ui-font: 'Nanum Gothic', sans-serif; --display-font: 'Nanum Gothic', sans-serif; }
body.font-single { --ui-font: 'Single Day', cursive; --display-font: 'Single Day', cursive; }
body.font-jua { --ui-font: 'Jua', sans-serif; --display-font: 'Jua', sans-serif; }
body.font-dohyeon { --ui-font: 'Do Hyeon', sans-serif; --display-font: 'Do Hyeon', sans-serif; }
body.font-songmyung { --ui-font: 'Song Myung', serif; --display-font: 'Song Myung', serif; }
body.font-gaegu { --ui-font: 'Gaegu', cursive; --display-font: 'Gaegu', cursive; }

#theme-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 9000;
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font-size: 24px; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.18);
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s, background .2s;
}
#theme-fab:hover { transform: scale(1.08); background: var(--gold-soft); }
#theme-fab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
#bell-fab {
  position: fixed; right: 80px; bottom: 20px; z-index: 9000;
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font-size: 23px; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.18);
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s, background .2s, opacity .2s;
}
#bell-fab:hover { transform: scale(1.08); background: var(--gold-soft); }
#bell-fab[aria-pressed="false"] { opacity: .58; }
#bell-fab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
body.embedded #bell-fab { display: none !important; }
#theme-panel {
  position: fixed; right: 20px; bottom: 82px; z-index: 9000;
  width: 268px; max-height: 74vh; overflow-y: auto;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.24); padding: 14px 16px;
  display: none;
}
#theme-panel.open { display: block; }
#theme-panel .grp { font-size: 12px; color: var(--ink-soft); letter-spacing: .5px; margin: 12px 2px 8px; }
#theme-panel .grp:first-child { margin-top: 2px; }
#theme-panel .swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
#theme-panel .swatch {
  border: 2px solid transparent; border-radius: 12px; padding: 8px 4px 6px;
  cursor: pointer; text-align: center; font-size: 11.5px; color: var(--ink-soft);
  background: var(--paper); transition: border-color .15s;
}
#theme-panel .swatch .dot {
  width: 100%; height: 26px; border-radius: 8px; margin-bottom: 5px;
  border: 1px solid rgba(0,0,0,.08);
}
#theme-panel .swatch[aria-pressed="true"] { border-color: var(--gold); color: var(--ink); font-weight: 700; }
#theme-panel .fonts { display: flex; flex-direction: column; gap: 6px; }
#theme-panel .fontopt {
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px;
  cursor: pointer; font-size: 16px; background: var(--card); color: var(--ink);
  text-align: left; transition: border-color .15s;
}
#theme-panel .fontopt[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-soft); font-weight: 700; }
@media print { #theme-fab, #theme-panel, #bell-fab, #admin-fab { display: none !important; } }

#fbToast { position: fixed; left: 50%; transform: translateX(-50%) translateY(-140%); top: 16px; z-index: 9500;
  background: var(--card); color: var(--ink); border: 2px solid var(--gold); border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0,0,0,.22); padding: 14px 18px; display: flex; align-items: center; gap: 14px;
  max-width: min(560px, 92vw); transition: transform .45s cubic-bezier(.2,.9,.3,1.2); }
#fbToast.show { transform: translateX(-50%) translateY(0); }
#fbToast .ico { font-size: 30px; }
#fbToast .t { font-size: 16px; font-weight: 700; }
#fbToast .s { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
#fbToast .go { background: var(--board); color: #fff; border: 0; border-radius: 10px; padding: 10px 16px;
  font-size: 14px; font-family: inherit; cursor: pointer; white-space: nowrap; }
#fbToast .x { background: transparent; border: 0; color: var(--ink-soft); font-size: 20px; cursor: pointer; }
#fbToastList { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
#fbToastList button { text-align: left; background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  padding: 7px 11px; font-family: inherit; font-size: 13px; color: var(--ink); cursor: pointer; }
#fbToastList button:hover { border-color: var(--gold); background: var(--gold-soft); }
#fbToastList .what { color: var(--ink-soft); font-size: 12px; }
@media (prefers-reduced-motion: reduce) { #fbToast { transition: none; } }

#teacher-tools { position: fixed; left: 20px; bottom: 20px; z-index: 9000; display: none; gap: 10px; }
#teacher-tools.show { display: flex; }
body.embedded #teacher-tools,
body.embedded #theme-fab { display: none !important; }
#teacher-tools button {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--card); font-size: 24px; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.18);
  transition: transform .15s, background .2s;
}
#teacher-tools button:hover { transform: scale(1.08); background: var(--gold-soft); }

.tt-modal { display: none; position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,.85); align-items: center; justify-content: center; flex-direction: column; touch-action: none; }
.tt-modal.show { display: flex; }
.tt-box { background: var(--card); color: var(--ink); padding: 40px 48px; border-radius: 24px; position: relative;
  text-align: center; border: 2px solid var(--gold); width: 95%; max-width: 1000px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.tt-close { position: absolute; top: 10px; right: 24px; font-size: 3rem; line-height: 1;
  color: var(--ink-soft); cursor: pointer; }
.tt-close:hover { color: #ef4444; }

.ed-lab { display: block; margin: 18px 0 6px; font-size: .95rem; color: var(--ink-soft); }
.ed-in { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper); color: var(--ink); font-family: inherit; font-size: 1rem; }
.ed-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.ed-row .ed-in { flex: 1; }
.ed-del { flex: none; border: 1px solid var(--line); background: var(--paper); color: var(--ink-soft);
  border-radius: 8px; width: 36px; height: 36px; cursor: pointer; font-size: 1.1rem; }
.ed-del:hover { color: #ef4444; border-color: #ef4444; }
.ed-btn { margin-top: 8px; padding: 10px 18px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper); color: var(--ink); font-family: inherit; font-size: 1rem; cursor: pointer; }
.ed-btn:hover { background: var(--gold-soft); }
.ed-primary { background: var(--board); color: #fff; border-color: var(--board); }
.ed-primary:hover { background: var(--board-deep); }
.ed-btn[disabled] { opacity: .5; cursor: default; }

#timer-display { font-size: 11rem; margin: 28px 0; font-variant-numeric: tabular-nums; line-height: 1; color: var(--ink); }
#timer-display.urgent { color: #ef4444; }
.tt-add { background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 20px; font-size: 1.2rem; cursor: pointer; font-family: inherit; }
.tt-add:hover { background: var(--gold-soft); }
.tt-ctrl { background: var(--board); color: #fff; border: 0; border-radius: 12px;
  padding: 18px 44px; font-size: 1.8rem; margin: 0 10px; cursor: pointer; font-family: inherit; }
.tt-ctrl.ghost { background: var(--paper); color: var(--ink); border: 1px solid var(--line); }

.pk-filters { display: flex; justify-content: center; gap: 10px; margin-bottom: 18px; }
.pk-f { background: var(--paper); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 18px; font-size: 1.2rem; cursor: pointer; font-family: inherit; }
.pk-f.on { background: var(--gold); color: #fff; border-color: var(--gold); }
.pk-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 28px; }
.pk-cell { background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 4px; font-size: 1.6rem; word-break: keep-all; line-height: 1.2; }
.pk-cell.boy { background: rgba(59,130,246,.16); border-color: rgba(59,130,246,.45); }
.pk-cell.girl { background: rgba(236,72,153,.16); border-color: rgba(236,72,153,.45); }
.pk-cell.drawn { opacity: .4; text-decoration: line-through; border-color: transparent; }
.pk-btns { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.pk-b { background: var(--board); color: #fff; border: 0; border-radius: 12px;
  padding: 16px 22px; font-size: 1.3rem; cursor: pointer; font-family: inherit; }
.pk-b:disabled { background: #94a3b8; cursor: not-allowed; }
.pk-b.reset { background: #ef4444; }
#pk-result { display: none; position: fixed; inset: 0; z-index: 10001; background: rgba(0,0,0,.92);
  align-items: center; justify-content: center; flex-direction: column; cursor: pointer; touch-action: none; }
#pk-result.show { display: flex; }
#pk-result .names { font-size: 6rem; color: var(--gold); text-align: center; line-height: 1.4; word-break: keep-all; }
#pk-result .hint { margin-top: 36px; font-size: 1.2rem; color: #cbd5e1; }
@media (max-width: 700px) {
  .tt-box { padding: 28px 18px; }
  #timer-display { font-size: 6rem; }
  .pk-grid { grid-template-columns: repeat(4, 1fr); }
  #pk-result .names { font-size: 3.4rem; }
  #teacher-tools { gap: 8px; }
  #teacher-login { right: 20px; bottom: 84px; }
  #admin-fab { bottom: 84px; }
}

#admin-fab {
  position: fixed; left: 20px; bottom: 72px; z-index: 9000;
  display: none; align-items: center; gap: 6px;
  background: var(--board); color: #fff; text-decoration: none;
  border-radius: 999px; padding: 10px 18px; font-size: 14px;
  font-family: var(--ui-font); box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
#admin-fab.show { display: inline-flex; }
#admin-fab:hover { background: var(--board-deep); }
#student-preview-banner {
  position:fixed; top:12px; left:50%; transform:translateX(-50%); z-index:10020;
  display:none; align-items:center; gap:8px; max-width:calc(100vw - 24px);
  padding:8px 13px; border:1px solid rgba(255,255,255,.32); border-radius:999px;
  background:rgba(15,23,42,.92); color:#f7fee7; box-shadow:0 6px 22px rgba(0,0,0,.24);
  font-family:var(--ui-font); font-size:13px; font-weight:800; white-space:nowrap;
  backdrop-filter:blur(10px); pointer-events:none;
}
#student-preview-banner.show { display:flex; }

#teacher-login {

  position: fixed; right: 144px; bottom: 26px; z-index: 9000;
  display: none; align-items: center; gap: 5px;
  background: transparent; border: 1px solid var(--line, #d5dae6);
  color: var(--ink-soft, #6b7280); border-radius: 999px;
  padding: 5px 12px; font-size: 12px; font-family: var(--ui-font);
  cursor: pointer; opacity: .45;
}
#teacher-login.show { display: inline-flex; }
#teacher-login:hover { opacity: 1; }
body.embedded #teacher-login { right:20px; bottom:20px; }
@media print { #teacher-login { display: none !important; } }

/* 학생 활동을 여는 동안에는 대시보드 전용 플로팅 버튼을 활동 화면 위에 남기지 않는다. */
body.tool-open #theme-fab,
body.tool-open #bell-fab,
body.tool-open #teacher-login,
body.tool-open #admin-fab,
body.tool-open #teacher-tools { display:none !important; }

.archive-card {
  display: flex; flex-direction: column; gap: 4px; text-decoration: none;
  background: var(--gold, #c79a3b); color: #1a1205;
  border: none; transition: filter .15s, transform .1s;
}

.archive-card[hidden] { display: none !important; }
.archive-card:hover { filter: brightness(1.06); }
.archive-card:active { transform: scale(0.99); }
.archive-card .ac-title { font-size: 20px; font-weight: 800; font-family: var(--ui-font); }
.archive-card .ac-sub { font-size: 14px; font-weight: 700; opacity: .8; font-family: var(--ui-font); }
.reading-debate-card { background:linear-gradient(135deg,#e8f2df,#fff3c9); color:#2f5d4b; }
.wall-card { background: #3f9d78; color: #052016; }
.mygraph-card { background: #7c6cd9; color: #14103a; }
.voca-card { background: #7184b8; color: #fff; }
.voca-card .voca-mark {
  display: inline-grid; place-items: center; min-width: 28px; height: 28px;
  margin-right: 7px; border-radius: 9px; background: rgba(255,255,255,.2);
  font-size: 14px; font-weight: 900; letter-spacing: -.04em; vertical-align: 2px;
}
.voca-card .beta-badge {
  display: inline-block; margin-left: 6px; padding: 3px 7px; border-radius: 999px;
  background: rgba(255,255,255,.2); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; vertical-align: 3px;
}
.survey-card { background: #d9a53f; color: #3a2a08; }
.essay-card { background: #47555f; color: #eef2f5; }
.essay-card.essay-live { background: #c9a45f; color: #2a2216; animation: livePulse 2.2s ease-in-out infinite; }

.debate-card { background: #3f79d9; color: #fff; text-decoration: none; }
.debate-card.is-live { background: #e0642f; animation: livePulse 2.2s ease-in-out infinite; }

.tamgu-card { background: #4f7a68; color: #eef5f1; }
.tamgu-card.tamgu-live { background: #e0904a; color: #2a1c10; animation: livePulse 2.2s ease-in-out infinite; }

body.scheme-chalk .archive-card {
  --acc: #F2E06A;
  background: rgba(255,255,255,.05); color: var(--ink);
  border: 1px solid rgba(255,255,255,.22); box-shadow: inset 4px 0 0 var(--acc);
}
body.scheme-chalk .archive-card .ac-title { color: var(--acc); }
body.scheme-chalk .archive-card .ac-sub { color: var(--ink-soft); opacity: 1; }
body.scheme-chalk .wall-card { --acc: #8FE3B8; }
body.scheme-chalk .mygraph-card { --acc: #C6BCF7; }
body.scheme-chalk .voca-card { --acc: #B9C8F5; }
body.scheme-chalk .survey-card { --acc: #F2D07A; }
body.scheme-chalk .essay-card { --acc: #D3E2EC; }
body.scheme-chalk .debate-card { --acc: #A4C4F7; }
body.scheme-chalk .tamgu-card { --acc: #9FD8BE; }
body.scheme-chalk .essay-card.essay-live,
body.scheme-chalk .debate-card.is-live,
body.scheme-chalk .tamgu-card.tamgu-live {
  background: rgba(242,224,106,.14); border-color: var(--acc); color: var(--ink);
}
body.scheme-chalk .debate-card.is-live { --acc: #F5A97F; }
body.scheme-chalk .tamgu-card.tamgu-live { --acc: #F5C07F; }
body.scheme-chalk .essay-card.essay-live { --acc: #F2E06A; }

body.embedded #admin-fab { display: none !important; }
@keyframes livePulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.15); } }
.archive-card { cursor: pointer; }

.tool-ov { position: fixed; inset: 0; z-index: 300; display: none; background: #0f172a; }
.tool-ov.show { display: flex; }
.tool-bar { position: absolute; right: 14px; top: 14px; z-index: 2; display: flex; align-items: center; gap: 8px;
            padding: 6px; background: rgba(17,26,46,.9); backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,.16); border-radius: 999px; box-shadow: 0 8px 26px rgba(0,0,0,.28); }
.tool-back { background: #1e293b; color: #e2e8f0; border: 1px solid rgba(255,255,255,0.2); border-radius: 8px;
             padding: 8px 15px; cursor: pointer; font-size: 0.92rem; font-family: inherit; font-weight: 700; }
.tool-back:hover { background: #273549; }
.tool-name { display:none; }
body.reader-open .tool-bar { display:none !important; }
.tool-ov iframe { width: 100%; height: 100%; border: none; background: #0f172a; }

.week-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.week-table th, .week-table td { border: 1px solid var(--line); padding: 8px 5px; text-align: center; }
.week-table thead th { background: var(--gold-soft); color: var(--board); font-size: 13px; font-weight: 700; }
.week-table .pcol { color: var(--ink-soft); width: 40px; font-size: 12px; background: var(--paper); }
.week-table td .subj { font-size: 15px; }
.week-table td.empty-cell { color: var(--line); }
.week-table thead th.today { background: var(--board); color: #fff; }
.week-table td.today { background: rgba(199,151,47,.08); }
.week-table td.now-cell { outline: 2px solid var(--gold); outline-offset: -2px; }

@media (max-width: 1100px) {
  main { grid-template-columns: 1fr 1fr; }
  .col-center { grid-column: 1 / -1; grid-row: 1; }
}

body.view-mobile main { grid-template-columns: minmax(0, 1fr); padding: 10px; max-width: none; margin: 0; gap: 10px; }
body.view-mobile { font-size: 18px; }
body.view-mobile .card { padding: 18px 20px; }
body.view-mobile .card h2 { font-size: 18px; }
body.view-mobile .flow { padding-left: 0; }
body.view-mobile .flow::before,
body.view-mobile .period::before { display: none; }
body.view-mobile .period {
  display: grid;
  grid-template-columns: minmax(430px, .95fr) minmax(0, 1.55fr);
  align-items: center;
  gap: 24px;
  padding: 12px 14px;
  margin: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}
body.view-mobile .period:first-child { border-top: 1px solid var(--line); }
body.view-mobile .period.now {
  background: var(--gold-soft);
  border: 0;
  border-bottom: 1px solid var(--gold);
  box-shadow: none;
  transform: none;
}
body.view-mobile .period .p-main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
body.view-mobile .period .p-time { width: 64px; min-width: 64px; font-size: 17px; }
body.view-mobile .period .p-label {
  width: 92px;
  min-width: 92px;
  font-size: 26px;
  line-height: 1;
  color: var(--board);
  font-weight: 800;
}
body.view-mobile .period .p-subject {
  flex: none;
  min-width: 160px;
  font-size: 34px;
  line-height: 1;
  white-space: nowrap;
}
body.view-mobile .period .p-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "content supplies"
    "announce announce";
  align-items: center;
  gap: 4px 18px;
  min-width: 0;
  margin: 0;
  padding: 0 0 0 22px;
  border-top: 0;
  border-left: 1px solid var(--line);
}
body.view-mobile .period .p-content {
  grid-area: content;
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.3;
  font-size: 16.5px;
}
body.view-mobile .period .p-supplies { grid-area: supplies; white-space: nowrap; font-size: 15.5px; }
body.view-mobile .period .p-announce {
  grid-area: announce;
  min-width: 0;
  white-space: normal;
  padding: 2px 0 0;
  border-left: 0;
  background: transparent;
  font-size: 15px;
  line-height: 1.3;
}
body.view-mobile .period .p-tag { flex: none; white-space: nowrap; word-break: keep-all; }
body.view-mobile .morning, body.view-mobile .meal-menu { font-size: 17.5px; }
body.view-mobile .todo-list li { font-size: 17.5px; padding: 8px 0; }
body.view-mobile .upcoming li { font-size: 16.5px; }
body.view-mobile .duty-list li { font-size: 17px; }
body.view-mobile .archive-card .ac-title { font-size: 22px; }
body.view-mobile .archive-card .ac-sub { font-size: 16px; }
body.view-mobile header {
  display: grid;
  grid-template-columns: minmax(250px, 1fr) auto;
  align-items: center;
  gap: 32px;
  padding: 18px 28px;
}
body.view-mobile .daily-line { display: none !important; }
body.view-mobile .head-title { flex-basis: auto; }
body.view-mobile .head-title h1 { font-size: 22px; word-break: keep-all; }
body.view-mobile .head-title h1 .grade { font-size: 15px; }
body.view-mobile .head-meta {
  display: grid;
  grid-template-columns: minmax(310px, auto) auto;
  grid-template-areas:
    "date clock"
    "weather clock";
  align-items: center;
  gap: 4px 30px;
  width: auto;
  justify-self: end;
  text-align: right;
}
body.view-mobile .head-meta .clock { grid-area: clock; font-size: 62px; }
body.view-mobile .head-meta .date { grid-area: date; margin: 0; font-size: 24px; font-weight: 700; opacity: 1; }
body.view-mobile .head-meta .weather { grid-area: weather; margin: 0; font-size: 21px; font-weight: 700; }
body.view-mobile .col-left, body.view-mobile .col-center, body.view-mobile .col-right { display: contents; }
body.view-mobile #flow-card { order: -3; }
body.view-mobile #duty-card {
  order: -2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  padding: 14px 18px;
}
body.view-mobile #duty-card h2 { margin: 0; padding: 0; border: 0; white-space: nowrap; }
body.view-mobile #duty-card .duty-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
body.view-mobile #duty-card .duty-list li { margin: 0; padding: 9px 13px; }
body.view-mobile #week-card { order: -1; }
body.view-mobile #debate-live, body.view-mobile #reading-debate-card, body.view-mobile #archive-card, body.view-mobile #wall-card,
body.view-mobile #mygraph-card, body.view-mobile #survey-card, body.view-mobile #essay-card,
body.view-mobile #tamgu-card, body.view-mobile #voca-card { order: -1; }

/* Refined classroom command board: three distinct panels with a calm dashboard palette. */
body.view-mobile {
  background: var(--paper);
  word-break: keep-all;
  overflow-wrap: break-word;
}
body.view-mobile .display { font-weight: 700; letter-spacing: -.025em; }
body.view-mobile header {
  background: var(--board);
  border-bottom: 0;
  box-shadow: 0 1px 0 rgba(255,255,255,.08);
}
body.view-mobile main {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 18px;
  row-gap: clamp(16px, calc(2vh - 3.6px), 18px);
  padding: 18px;
  align-items: start;
}
body.view-mobile .card {
  min-width: 0;
  margin-bottom: 0;
  border-radius: 14px;
  border-color: var(--line);
  box-shadow: var(--shadow);
}
body.view-mobile .card h2,
body.view-mobile .flow-head h2 { color: var(--ink); font-weight: 700; letter-spacing: -.02em; }
body.view-mobile .flow-head .day-chip {
  background: var(--gold-soft);
  color: var(--gold);
  font-weight: 700;
}
body.view-mobile #flow-card {
  order: 0;
  align-self: stretch;
  padding: clamp(18px, calc(4vh - 21.2px), 22px) 24px;
}
body.view-mobile #flow-card .flow-head { margin-bottom: clamp(12px, calc(2vh - 5.6px), 14px); }
body.view-mobile #flow-card .flow-head h2,
body.view-mobile #duty-card h2,
body.view-mobile #week-card h2 { font-size: 22px; }
body.view-mobile #flow-card .period { padding: clamp(13px, calc(2vh - 6.6px), 15px) 16px; }
body.view-mobile #flow-card .period .p-main { gap: 16px; }
body.view-mobile #flow-card .period .p-time { width: 68px; min-width: 68px; font-size: 18px; }
body.view-mobile #flow-card .period .p-label { width: 102px; min-width: 102px; font-size: 30px; }
body.view-mobile #flow-card .period .p-subject { min-width: 174px; font-size: 38px; }
body.view-mobile #flow-card .period .p-content { font-size: 18px; }
body.view-mobile #flow-card .period .p-supplies { font-size: 17px; }
body.view-mobile #flow-card .period .p-status,
body.view-mobile #flow-card .period .p-tag { font-size: 14px; }
@media (min-width:1200px) {
  body.view-mobile #flow-card .period .p-main { gap:12px; }
  body.view-mobile #flow-card .period .p-subject { min-width:130px; }
  body.view-mobile #flow-card .period .p-flags { width:124px; flex-wrap:wrap; align-content:center; }
  body.view-mobile #flow-card .period .tag-override { font-size:11px; padding:2px 5px; }
}
body.view-mobile #duty-card {
  order: 0;
  display: block;
  padding: clamp(16px, calc(4vh - 23.2px), 20px) 22px;
}
body.view-mobile #duty-card h2 {
  margin: 0 0 clamp(12px, calc(3vh - 17.4px), 15px);
  padding: 0 0 clamp(9px, calc(3vh - 20.4px), 12px);
  border-bottom: 1px solid var(--line);
}
body.view-mobile #duty-card .duty-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
body.view-mobile #duty-card .duty-list li {
  display: block;
  min-width: 0;
  margin: 0;
  padding: clamp(10px, calc(3vh - 19.4px), 13px);
  background: var(--paper);
  border-radius: 9px;
  font-size: 16px;
}
body.view-mobile #duty-card .duty-list li > span:first-child {
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink-soft);
}
body.view-mobile #duty-card .duty-list .who {
  display: block;
  margin-top: 4px;
  white-space: nowrap;
  color: var(--ink);
  font-size: 20px;
}
body.view-mobile #week-card {
  order: 0;
  padding: clamp(16px, calc(4vh - 23.2px), 20px) 22px;
}
body.view-mobile #week-card .flow-head { margin-bottom: clamp(10px, calc(3vh - 19.4px), 13px); }
body.view-mobile #week-card .week-table { table-layout: fixed; word-break: keep-all; }
body.view-mobile #week-card .week-table th,
body.view-mobile #week-card .week-table td { padding: clamp(7px, calc(2vh - 12.6px), 9px) 4px; }
body.view-mobile #week-card .week-table thead th { background: var(--paper); color: var(--ink-soft); font-size: 15px; }
body.view-mobile #week-card .week-table thead th.today { background: var(--board); color: #FFFFFF; }
body.view-mobile #week-card .week-table td.today { background: var(--gold-soft); color: var(--board); }
body.view-mobile #week-card .week-table .pcol { font-size: 14px; }
body.view-mobile #week-card .week-table td .subj { font-size: 17px; }
body.view-mobile #week-card .week-table td.now-cell { outline-color: var(--gold); }
body.view-mobile #week-card .week-table .subj {
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.view-mobile .period,
body.view-mobile .period .p-content,
body.view-mobile .period .p-supplies,
body.view-mobile .period .p-announce,
body.view-mobile .duty-list,
body.view-mobile .week-table { word-break: keep-all; overflow-wrap: normal; }
body.view-mobile .period .p-supplies,
body.view-mobile .period .p-announce {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.view-mobile .period.now {
  background: var(--gold-soft);
  border-left: 4px solid var(--gold);
  border-bottom-color: var(--line);
}
body.view-mobile .overview-grid,
body.view-mobile .activity-zone { gap: 18px; }
body.view-mobile .daily-sidebar { gap: 14px; }
body.view-mobile #activity-grid > .card,
body.view-mobile #activity-grid .tool-pair > .archive-card {
  grid-column: auto;
  order: 0;
  min-height: 96px;
  padding: 14px 16px;
  justify-content: center;
  align-self: stretch;
}
body.view-mobile #activity-grid .archive-card { border: none; }
body.view-mobile #activity-grid .whiteboard-card { padding: 8px; }
body.view-mobile #activity-grid .ac-title { font-size: 20px; line-height: 1.25; }
body.view-mobile #activity-grid .ac-sub { font-size: 14px; line-height: 1.4; }
body.view-mobile #archive-card { background: #C7972F; color: #1A1205; }
body.view-mobile .morning-row {
  margin-bottom: 0;
  min-height: 96px;
  align-self: stretch;
}
body.view-mobile .morning-row > .card { height:100%; padding:14px 16px; }
body.view-mobile #morning-card h2 { margin-bottom:6px; padding-bottom:6px; font-size:18px; border-bottom-width:1px; }
body.view-mobile #morning-card .morning { font-size:16px; line-height:1.45; }
body.view-mobile #meal-card .meal-menu {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  font-size: 16px;
  white-space: normal;
  line-height: 1.35;
}
body.view-mobile .col-right > .card:not(.archive-card) {
  grid-column: span 2;
  order: 2;
}

/*
 * 1920×1080 classroom displays have slightly less usable height than the
 * browser viewport suggests (fullscreen chrome and Windows scaling vary).
 * Keep the large, glanceable lesson labels, but trim the surrounding chrome
 * so 100% browser zoom has the same comfortable fit that 95% used to have.
 */
@media (min-width: 1600px) and (min-height: 900px) and (max-height: 1100px) {
  body.view-mobile header {
    gap: 26px;
    padding: 14px 24px;
  }
  body.view-mobile .head-meta {
    gap: 2px 26px;
  }
  body.view-mobile .head-meta .clock { font-size: 58px; }
  body.view-mobile .head-meta .date { font-size: 23px; }
  body.view-mobile .head-meta .weather { font-size: 20px; }

  body.view-mobile main {
    column-gap: 14px;
    row-gap: 14px;
    padding: 14px;
  }
  body.view-mobile #flow-card {
    padding: 18px 22px;
  }
  body.view-mobile #flow-card .flow-head { margin-bottom: 11px; }
  body.view-mobile #flow-card .period { padding: 12px 14px; }

  body.view-mobile #duty-card,
  body.view-mobile #week-card {
    padding: 15px 20px;
  }
  body.view-mobile #duty-card h2 {
    margin-bottom: 11px;
    padding-bottom: 9px;
  }
  body.view-mobile #duty-card .duty-list li { padding: 10px 11px; }
  body.view-mobile #week-card .flow-head { margin-bottom: 9px; }
  body.view-mobile #week-card .week-table th,
  body.view-mobile #week-card .week-table td { padding: 6px 4px; }

  body.view-mobile .overview-grid,
  body.view-mobile .activity-zone { gap: 14px; }
}

@media (max-width: 1500px) {
  .activity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  .activity-grid { grid-template-columns: minmax(0, 1fr); }
  .overview-grid { grid-template-columns: minmax(0, 1fr); }
  .daily-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; }
  .daily-sidebar #duty-card { grid-column: 1; grid-row: 1; }
  .daily-sidebar .morning-row { grid-column: 1; grid-row: 2; }
  .daily-sidebar #week-card { grid-column: 2; grid-row: 1 / span 2; }
  body.view-mobile main { grid-template-columns: minmax(0, 1fr); }
  body.view-mobile .head-meta { grid-template-columns: minmax(0, auto) auto; gap: 4px 18px; }
  body.view-mobile .col-right > .card:not(.archive-card) {
    grid-column: 1;
    grid-row: auto;
  }
  body.view-mobile #duty-card, body.view-mobile #week-card { order: 0; }
}

@media (max-width: 700px) {
  .activity-zone { grid-template-columns: minmax(0, 1fr); }
  .activity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .daily-sidebar { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .daily-sidebar #duty-card, .daily-sidebar .morning-row, .daily-sidebar #week-card { grid-column: 1; grid-row: auto; }
  main { grid-template-columns: 1fr; padding: 14px; }
  header { flex-wrap: wrap; padding: 14px 16px; }
  .daily-line { max-width: none; width: 100%; order: 3; }
  .head-meta .clock { font-size: 26px; }

  .head-title { flex-basis: 100%; }
  .head-title h1 { font-size: 22px; word-break: keep-all; }
  .head-title h1 .grade { font-size: 15px; }

  .col-left, .col-center, .col-right { display: contents; }
  #debate-live, #reading-debate-card, #archive-card, #wall-card, #mygraph-card, #survey-card, #essay-card, #tamgu-card, #voca-card { order: -2; }
  #flow-card { order: -1; }

  body.view-mobile header { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px 16px; min-width: 0; }
  body.view-mobile .head-title { width: 100%; min-width: 0; }
  body.view-mobile .head-meta {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "date clock"
      "weather clock";
    gap: 8px 18px;
    width: 100%;
    min-width: 0;
    white-space: normal;
  }
  body.view-mobile .head-meta .clock { font-size: 48px; }
  body.view-mobile .head-meta .date,
  body.view-mobile .head-meta .weather { font-size: 18px; }
  body.view-mobile .period {
    display: block;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-bottom: 7px;
  }
  body.view-mobile .period .p-main {
    gap: 8px;
  }
  body.view-mobile .period .p-time { width: 48px; min-width: 48px; }
  body.view-mobile .period .p-label { width: 76px; min-width: 76px; font-size: 23px; }
  body.view-mobile .period .p-subject { flex: 1 1 auto; min-width: 72px; font-size: 31px; }
  body.view-mobile .period .p-detail {
    display: flex;
    flex-wrap: wrap;
    margin-left: 0;
    padding: 6px 0 0;
    border-left: 0;
    border-top: 1px dashed var(--line);
  }
  body.view-mobile .period .p-content { flex: 1 1 100%; width: 100%; max-width: 100%; }
  body.view-mobile #flow-card { padding: 18px 20px; }
  body.view-mobile #flow-card .period { padding: 10px 12px; }
  body.view-mobile #flow-card .period .p-main { gap: 8px; }
  body.view-mobile #flow-card .period .p-time { width: 48px; min-width: 48px; font-size: 17px; }
  body.view-mobile #flow-card .period .p-label { width: 76px; min-width: 76px; font-size: 23px; }
  body.view-mobile #flow-card .period .p-subject { flex: 1 1 auto; min-width: 72px; font-size: 31px; }
  body.view-mobile #flow-card .period .p-content { font-size: 16.5px; }
  body.view-mobile #flow-card .period .p-supplies { font-size: 15.5px; }
  body.view-mobile #duty-card { grid-template-columns: 1fr; gap: 10px; }
  body.view-mobile #duty-card .duty-list { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .activity-grid { grid-template-columns: minmax(0, 1fr); }
}