/* 수업일지 전용 모양 — admin-sky.css 뒤에 불러와서 덮어쓴다.
   ① 상자 구분(카드 대비·머리글 아이콘)  ② 학년·과목 색  ③ 폰(홈 화면 앱) 맞춤  ④ 글자 크기 조절 */

/* ───────── ④ 글자 크기: 설정에서 --fs(0.92 / 1 / 1.1)를 바꾼다. rem 글자는 전부 같이 변한다 ───────── */
html { font-size: calc(16px * var(--fs, 1)); }
body.ui-sky { font-size: calc(17px * var(--fs, 1)); -webkit-tap-highlight-color: transparent; }
@media (min-width: 1600px) {
  html:has(body.ui-sky) { font-size: calc(clamp(16px, calc(16px + (100vw - 1600px) * 0.0042), 20px) * var(--fs, 1)); }
}
button, a, .lesson, .slot, .tl-item, .mini-item, .class-card, .pick-item { touch-action: manipulation; }

/* ───────── ① 상자 구분 ───────── */
body.ui-sky {
  --card-bg: rgba(255,255,255,0.94);
  --card-solid: #ffffff;
  --card-line: rgba(24,27,58,0.09);
  --tint-a: 0.20;
  --tint-hover: 0.32;
  --tint-s: 30%;   /* 학년 칸 바탕: 채도 낮게 */
  --tint-l: 55%;
  --dot-s: 24%;    /* 과목 점: 탁한 톤 */
  --dot-l: 52%;
  --sub: rgba(24,27,58,0.72);
}
body.ui-sky.dark {
  --card-bg: rgba(34,36,72,0.90);
  --card-solid: #25274e;
  --card-line: rgba(255,255,255,0.12);
  --tint-a: 0.22;
  --tint-hover: 0.34;
  --tint-s: 34%;
  --tint-l: 72%;
  --dot-s: 30%;
  --dot-l: 72%;
  --sub: rgba(244,244,251,0.74);
}
html body.ui-sky .card { background: var(--card-bg); border: 1px solid var(--card-line); box-shadow: 0 1px 2px rgba(20,30,70,0.05), 0 10px 30px rgba(30,45,100,0.10); }
html body.ui-sky .modal-box { background: var(--card-solid); border: 1px solid var(--card-line); }
html body.ui-sky .card h2 { font-size: 1.12rem; font-weight: 800; letter-spacing: -0.01em; align-items: center; gap: 12px; margin-bottom: 16px; }
html body.ui-sky .card h2 .icon { width: 32px; height: 32px; border-radius: 10px; background: var(--accent-light); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
html body.ui-sky .card h2 .ttl { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
html body.ui-sky .card h2 .ttl small { font-size: 0.8rem; font-weight: 500; color: var(--sub); margin-top: 2px; }
html body.ui-sky .card h2 .right { margin-left: auto; flex-shrink: 0; }
/* 카드 안의 작은 구역(지난 수업 요약 등)은 회색 채움으로 한 층 더 */
.inset { background: var(--fill); border-radius: 12px; padding: 12px 14px; }
body.ui-sky .small { font-size: 0.86rem; }
body.ui-sky .badge { font-size: 0.76rem; padding: 3px 10px; }
body.ui-sky .field > span { font-size: 0.86rem; color: var(--text-2); }
body.ui-sky .section-header h1 { font-size: 1.8rem; }
body.ui-sky .section-header p { font-size: 0.92rem; }

/* ───────── ② 학년·과목 색 — 아주 옅게: 학년은 칸 바탕, 과목은 이름 앞 작은 점 ───────── */
.slot, .lesson, .class-card { --gh: 268; --sh: 268; }
.slot { background: hsl(var(--gh) var(--tint-s) var(--tint-l) / var(--tint-a)); }
.slot:hover { background: hsl(var(--gh) var(--tint-s) var(--tint-l) / var(--tint-hover)); }
.slot.done { background: hsl(var(--gh) var(--tint-s) var(--tint-l) / var(--tint-a)); }
.slot.done::after { color: var(--accent); }
.slot small, .lesson .who .subj, .class-card .t small { display: inline-flex; align-items: center; gap: 4px; }
.slot small::before, .lesson .who .subj::before, .class-card .t small::before, .subj-dot::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; display: inline-block;
  background: hsl(var(--sh) var(--dot-s) var(--dot-l));
}
body.ui-sky.dark .slot small::before, body.ui-sky.dark .lesson .who .subj::before, body.ui-sky.dark .class-card .t small::before, body.ui-sky.dark .subj-dot::before { background: hsl(var(--sh) var(--dot-s) var(--dot-l)); }
.lesson { position: relative; padding-left: 14px; }
.lesson::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 4px; background: hsl(var(--gh) var(--tint-s) var(--tint-l) / 0.9); }
.lesson .who .subj { font-weight: 600; color: var(--text-2); font-size: 0.86rem; }
.class-card { background: hsl(var(--gh) var(--tint-s) var(--tint-l) / var(--tint-a)); }
.class-card:hover { background: hsl(var(--gh) var(--tint-s) var(--tint-l) / var(--tint-hover)); }
.class-card.on { background: hsl(var(--gh) var(--tint-s) var(--tint-l) / var(--tint-hover)); box-shadow: inset 0 0 0 2px hsl(var(--gh) var(--tint-s) var(--tint-l)); }
.legend i.g1 { background: hsl(198 30% 55% / 0.45); } .legend i.g2 { background: hsl(228 30% 55% / 0.45); } .legend i.g3 { background: hsl(268 30% 55% / 0.45); }
.legend i.done { background: none; box-shadow: none; } .legend i.done::before { content: '✓'; color: var(--accent); font-size: 0.8rem; font-weight: 800; position: relative; top: -1px; }
.legend i.sdot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }

/* ───────── ③ 폰(홈 화면 앱) ───────── */
.nav-brand { -webkit-user-select: none; user-select: none; }
@media (max-width: 899px) {
  html body.ui-sky .nav { padding-top: env(safe-area-inset-top); height: calc(var(--nav-h) + env(safe-area-inset-top)); }
  body.ui-sky .wrap { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
}
@media (max-width: 899px) { body.ui-sky .tabbar { padding-bottom: 6px; } }
/* 입력칸은 16px 이상이어야 iOS가 눌렀을 때 화면을 확대하지 않는다 */
@media (max-width: 899px) { html body.ui-sky .inp, html body.ui-sky textarea.inp, html body.ui-sky select.inp { font-size: 16px; } }
.screen { padding-top: max(16px, env(safe-area-inset-top)); }

/* 주간 표를 폰 폭에 꽉 채운다(월~금이 한 화면에) */
.week-grid { table-layout: fixed; width: 100%; }
.week-grid th:first-child, .week-grid td.per { width: 52px; }
@media (max-width: 599px) {
  #sec-week .card { padding: 12px 6px 14px; border-radius: 18px; }
  #sec-week .card h2 { padding: 0 6px; }
  #sec-week .legend { padding: 0 8px; }
  .week-scroll { margin: 0; overflow: visible; }
  .week-grid { border-spacing: 3px; }
  .week-grid th:first-child, .week-grid td.per { width: 30px; }
  .week-grid th { font-size: 0.8rem; padding: 4px 0; }
  .week-grid th small { font-size: 0.66rem; }
  .week-grid td { height: 58px; }
  .week-grid td.per { font-size: 0.82rem; }
  .week-grid td.per small { font-size: 0.56rem; letter-spacing: -0.02em; }
  .slot { min-height: 58px; padding: 6px 1px 4px; border-radius: 9px; }
  .slot b { font-size: 0.9rem; }
  .slot small { font-size: 0.66rem; gap: 2px; white-space: nowrap; overflow: hidden; max-width: 100%; justify-content: center; }
  .slot small::before { width: 5px; height: 5px; }
  .slot i { display: none; }
  .slot.done::after { top: 2px; right: 4px; font-size: 0.64rem; }
}

/* 일지 쓰기: 폰에서는 아래에서 올라오는 시트 */
.modal-actions.sticky { position: sticky; bottom: 0; background: var(--card-solid); padding: 12px 0 2px; margin-top: 6px; z-index: 5; flex-wrap: wrap; }
@media (max-width: 599px) {
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal-overlay#askModal { align-items: center; padding: 16px; }
  .modal-box { border-radius: 22px 22px 0 0; max-width: none; max-height: 94vh; max-height: 94dvh; overflow-y: auto; padding: 18px 16px calc(14px + env(safe-area-inset-bottom)); }
  .modal-box.sm { border-radius: 22px; max-height: none; padding: 22px 18px 18px; }
  .modal-box::before { content: ''; display: block; width: 38px; height: 5px; border-radius: 5px; background: var(--fill-strong); margin: -6px auto 12px; }
  .modal-box.sm::before { display: none; }
  .modal-actions.sticky { padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
}

/* 드롭다운(진도·이전 내용 고르기) */
.combo { position: relative; }
.combo-box { display: flex; gap: 6px; }
.combo-box .inp { flex: 1; min-width: 0; }
.combo-btn { width: 46px; flex-shrink: 0; border: 0; border-radius: 10px; background: var(--fill); color: var(--accent); font-size: 1rem; font-weight: 700; cursor: pointer; font-family: inherit; }
.combo-btn:hover { background: var(--fill-strong); }
.combo-menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; max-height: min(46vh, 360px); overflow-y: auto; background: var(--card-solid); border: 1px solid var(--card-line); border-radius: 14px; box-shadow: 0 18px 44px rgba(20,30,70,0.28); padding: 6px; -webkit-overflow-scrolling: touch; }
.combo-sec { font-size: 0.76rem; font-weight: 700; color: var(--accent); padding: 8px 10px 4px; }
.combo-grp { font-size: 0.78rem; font-weight: 600; color: var(--text-3); padding: 8px 10px 2px; }
.combo-opt { display: flex; gap: 10px; align-items: baseline; width: 100%; text-align: left; border: 0; background: none; border-radius: 9px; padding: 11px 10px; font: inherit; font-size: 0.95rem; color: var(--text); cursor: pointer; }
.combo-opt:hover, .combo-opt:focus-visible { background: var(--fill); outline: none; }
.combo-opt small { margin-left: auto; color: var(--sub); white-space: nowrap; font-size: 0.78rem; }
.combo-opt.next { background: var(--accent-light); color: var(--accent); font-weight: 700; }
.combo-opt.done { color: var(--text-3); }
.combo-opt .tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.combo-empty { padding: 14px 10px; color: var(--sub); font-size: 0.88rem; }
.suggest { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 12px; border: 0; border-radius: 999px; background: var(--accent-light); color: var(--accent); font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; max-width: 100%; }
.suggest span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-btn { border: 0; background: none; color: var(--accent); font: inherit; font-size: 0.84rem; font-weight: 600; padding: 6px 2px; cursor: pointer; }
.now-badge { background: var(--accent); color: #fff; }
.lesson.now { background: var(--accent-light); }
.week-nav { display: flex; align-items: center; gap: 6px; }
.week-nav select.inp { width: auto; max-width: 56vw; padding: 8px 34px 8px 12px; }
.icon-btn:disabled { opacity: 0.3; cursor: default; }
.tip { display: flex; gap: 12px; align-items: flex-start; }
.tip ol { margin: 6px 0 0; padding-left: 20px; font-size: 0.9rem; line-height: 1.7; color: var(--text-2); }

/* ───────── 추가: 오늘 열 강조·학급 시간표 칸·팁·인쇄 ───────── */
.week-grid td.tdy { background: rgba(0,122,255,0.07); border-radius: 12px; }
body.ui-sky.dark .week-grid td.tdy { background: rgba(10,132,255,0.12); }
.slot.ro { cursor: default; }
.slot.ro:hover { background: hsl(var(--gh) var(--tint-s) var(--tint-l) / var(--tint-a)); }
.slot.ro small::before { display: none; }
.slot.mine { box-shadow: inset 0 0 0 2px var(--accent); }
.tip-list { margin: 4px 0 0; padding-left: 20px; font-size: 0.92rem; line-height: 1.8; color: var(--text-2); }
@media print { .credit, .tabbar { display: none !important; } }

/* 폰: 주 선택 줄이 한 줄에 들어가게 '이번 주' 버튼은 숨긴다(목록에 '이번 주' 표시가 있음) */
@media (max-width: 599px) { .week-nav .btn.sm[data-n="0"] { display: none; } }

/* ───────── 시간표 칸이 열을 꽉 채우게 ─────────
   admin-sky.css 가 모든 표 칸(td)에 좌우 8~12px 여백을 줘서, 폰에서 칸이 열 폭의 70%로 쪼그라들었다.
   시간표는 칸 자체가 여백을 가지므로 표 칸 여백은 없앤다. */
html body.ui-sky .week-grid td, html body.ui-sky .week-grid th { padding: 0; border: 0; white-space: normal; }
html body.ui-sky .week-grid th { padding: 6px 0 4px; }
html body.ui-sky .week-grid td.per { padding: 0 2px; white-space: nowrap; }
html body.ui-sky .week-grid tr:hover td { background: none; }
html body.ui-sky .week-grid td.tdy { background: rgba(0,122,255,0.07); }
html body.ui-sky.dark .week-grid td.tdy { background: rgba(10,132,255,0.12); }
.slot { display: flex; flex-direction: column; align-items: center; justify-content: center; }
@media (max-width: 599px) {
  /* 폰: 시간표·학급 시간표 카드를 화면 가장자리 쪽으로 넓혀 칸을 더 크게 */
  #sec-week .card, #sec-class .card { margin-left: -8px; margin-right: -8px; }
  .week-grid { border-spacing: 2px; }
  .week-grid td { height: 64px; }
  .slot { min-height: 64px; padding: 6px 2px; }
  .slot b { font-size: 1rem; }
  .slot small { font-size: 0.72rem; }
  .slot small::before { width: 6px; height: 6px; }
}

/* 학급별 시간표는 칸 바탕이 과목 색이라 학년 색보다 한 단계 더 옅고 탁하게 */
.slot.bysubj { --tint-s: 18%; --tint-a: 0.16; }
body.ui-sky.dark .slot.bysubj { --tint-s: 24%; --tint-a: 0.20; }