:root {
  --photo-paper: #f2efe7;
  --photo-sheet: #fffdf8;
  --photo-ink: #20201d;
  --photo-muted: #6f6c64;
  --photo-line: rgba(42, 40, 35, 0.16);
  --photo-amber: #bd7b32;
  --photo-rust: #8f4f37;
  --photo-sage: #536a64;
  --photo-blue: #587487;
  --photo-dark: #181a19;
  --photo-shadow: 0 22px 58px rgba(52, 46, 36, 0.1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--photo-ink);
  background:
    radial-gradient(circle at 14% 5%, rgba(255, 255, 255, 0.92), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(189, 123, 50, 0.13), transparent 31%),
    var(--photo-paper);
  font-family: "Manrope", "Noto Sans KR", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0.17;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
  content: "";
  pointer-events: none;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
:focus-visible { outline: 3px solid rgba(189, 123, 50, 0.48); outline-offset: 3px; }
.skip-link {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--photo-dark);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}
.skip-link:focus { top: 12px; }

.course-bar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  min-height: 66px;
  padding: 10px clamp(14px, 4vw, 56px);
  border-bottom: 1px solid var(--photo-line);
  background: rgba(242, 239, 231, 0.9);
  backdrop-filter: blur(20px) saturate(1.08);
}
.course-bar > strong {
  color: var(--photo-muted);
  font: 500 9px/1 "DM Mono", monospace;
  letter-spacing: 0.14em;
}
.course-bar > div { display: flex; justify-content: flex-end; gap: 6px; }
.course-bar button,
.filter-row button,
.worksheet-actions button,
.activity-timer button,
.deep-lab button {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--photo-line);
  border-radius: 10px;
  background: #fff;
  color: var(--photo-ink);
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
}
.course-bar [data-print-all] { border-color: var(--photo-dark); background: var(--photo-dark); color: #fff; }
.back-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 11px; font-weight: 800; }
.back-link::before { margin-right: 8px; content: "←"; font-size: 17px; font-weight: 500; }

main { width: min(1220px, calc(100% - 36px)); margin: 0 auto; padding: 70px 0 110px; }
.course-hero { max-width: 900px; padding: clamp(28px, 6vw, 76px) 0 82px; }
.course-hero > small,
.course-index small,
.reference-section > header small,
.deep-lab small,
.activity-timer small,
.lesson-head small {
  color: var(--photo-rust);
  font: 500 9px/1 "DM Mono", monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.course-hero h1 { margin: 22px 0 0; font-size: clamp(52px, 8vw, 96px); line-height: 0.96; letter-spacing: -0.065em; }
.course-hero > p { max-width: 760px; margin: 26px 0 0; color: #55524b; font-size: clamp(16px, 2vw, 20px); font-weight: 650; word-break: keep-all; }
.course-notice { margin-top: 25px; padding: 14px 16px; border: 1px solid rgba(83, 106, 100, 0.24); border-radius: 14px; background: rgba(230, 236, 233, 0.78); color: #4d615b; font-size: 11px; font-weight: 750; }

.course-index { scroll-margin-top: 86px; padding-top: 30px; border-top: 1px solid var(--photo-line); }
.course-index > header { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.course-index h2,
.reference-section h2 { margin: 10px 0 0; font-size: clamp(34px, 5vw, 58px); line-height: 1; letter-spacing: -0.05em; }
.course-search { display: grid; gap: 6px; width: min(340px, 100%); color: var(--photo-muted); font-size: 10px; font-weight: 800; }
.course-search input { width: 100%; min-height: 44px; padding: 0 14px; border: 1px solid var(--photo-line); border-radius: 12px; background: rgba(255, 255, 255, 0.7); color: var(--photo-ink); }
.filter-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 24px; }
.filter-row button[aria-pressed="true"] { border-color: var(--photo-dark); background: var(--photo-dark); color: #fff; }
.filter-status { min-height: 20px; margin: 10px 0 0; color: var(--photo-sage); font-size: 10px; font-weight: 750; }
.lesson-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.lesson-card-grid > a {
  position: relative;
  min-height: 150px;
  padding: 19px;
  border: 1px solid var(--photo-line);
  border-radius: 18px;
  background: rgba(255, 253, 248, 0.66);
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.lesson-card-grid > a:hover { transform: translateY(-4px); border-color: rgba(143, 79, 55, 0.46); box-shadow: 0 15px 32px rgba(54, 47, 37, 0.09); }
.lesson-card-grid strong { display: block; margin-top: 18px; font-size: 16px; line-height: 1.35; }
.lesson-card-grid span { display: block; margin-top: 7px; color: var(--photo-muted); font-size: 10px; font-weight: 650; line-height: 1.5; }
.reference-links { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.reference-links a { padding: 9px 12px; border: 1px solid var(--photo-line); border-radius: 999px; background: #fff; font-size: 10px; font-weight: 800; }
.is-filtered-out { display: none !important; }

.foundation-lesson { scroll-margin-top: 82px; margin-top: 120px; padding-top: 30px; border-top: 1px solid var(--photo-line); }
.foundation-lesson:target { border-top-color: var(--photo-rust); }
.lesson-head { display: grid; grid-template-columns: 116px minmax(0, 1fr) auto; gap: 24px; align-items: end; margin-bottom: 28px; }
.lesson-number { color: transparent; font: 500 clamp(54px, 8vw, 88px)/0.8 "DM Mono", monospace; -webkit-text-stroke: 1.4px rgba(143, 79, 55, 0.48); }
.lesson-head h2 { margin: 10px 0 0; font-size: clamp(36px, 5vw, 60px); line-height: 1; letter-spacing: -0.055em; }
.lesson-head p { max-width: 760px; margin: 13px 0 0; color: var(--photo-muted); font-size: 14px; font-weight: 650; word-break: keep-all; }
.lesson-time { padding: 9px 12px; border: 1px solid var(--photo-line); border-radius: 999px; background: #fff; font: 500 9px/1 "DM Mono", monospace; white-space: nowrap; }
.lesson-contract,
.lesson-teaching { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 14px; }
.panel,
.support-card,
.activity-timer { padding: 22px; border: 1px solid var(--photo-line); border-radius: 21px; background: rgba(255, 253, 248, 0.76); box-shadow: 0 12px 30px rgba(54, 48, 39, 0.05); }
.panel h3,
.support-card h3,
.activity-timer h3 { margin: 0; font-size: 15px; }
.numbered-list,
.materials-list,
.question-list,
.support-list,
.guide-list { display: grid; gap: 8px; margin: 15px 0 0; padding: 0; list-style: none; }
.numbered-list { counter-reset: goals; }
.numbered-list li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; color: #59574f; font-size: 11px; font-weight: 650; }
.numbered-list li::before { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: rgba(189, 123, 50, 0.13); color: var(--photo-rust); content: counter(goals); counter-increment: goals; font: 500 9px/1 "DM Mono", monospace; }
.materials-list { grid-template-columns: repeat(2, 1fr); }
.materials-list li { padding: 10px; border-radius: 10px; background: rgba(32, 32, 29, 0.055); color: #58564f; font-size: 10px; font-weight: 700; }
.contract-extra { display: grid; gap: 6px; margin-top: 12px; }
.contract-row { display: grid; grid-template-columns: 100px 1fr; gap: 10px; padding: 8px 10px; border-left: 2px solid var(--photo-amber); background: #fff8ec; font-size: 9px; }
.contract-row b { font-family: "DM Mono", monospace; }
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.timeline li { min-height: 128px; padding: 16px; border: 1px solid var(--photo-line); border-radius: 16px; background: rgba(255, 255, 255, 0.44); }
.timeline li[data-phase="make"] { border-color: rgba(83, 106, 100, 0.26); background: #e8eeeb; }
.timeline small { color: var(--photo-rust); font: 500 8px/1 "DM Mono", monospace; }
.timeline strong { display: block; margin-top: 13px; font-size: 12px; }
.timeline span { display: block; margin-top: 6px; color: var(--photo-muted); font-size: 10px; }
.phase-teacher-script, .phase-student-action { margin: 8px 0 0; padding-top: 7px; border-top: 1px solid var(--photo-line); color: var(--photo-muted); font-size: 9px; }
.phase-teacher-script::before { margin-right: 5px; color: var(--photo-rust); content: "T"; font: 500 8px/1 "DM Mono", monospace; }
.phase-student-action::before { margin-right: 5px; color: var(--photo-sage); content: "S"; font: 500 8px/1 "DM Mono", monospace; }
.study-plate { margin: 18px 0 0; padding: 12px 12px 14px; border: 1px solid var(--photo-line); border-radius: 18px; background: #fff; box-shadow: var(--photo-shadow); }
.study-plate-image { display: block; width: 100%; max-height: 720px; border-radius: 10px; background: #ddd; object-fit: contain; }
.study-plate figcaption { display: flex; justify-content: space-between; gap: 14px; margin-top: 11px; color: var(--photo-muted); font: 500 8px/1.4 "DM Mono", monospace; }
.study-plate figcaption b { color: var(--photo-sage); }

.deep-lab { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(380px, 1.18fr); gap: 18px; margin-top: 18px; padding: 18px; border-radius: 28px; background: var(--photo-dark); color: #f7f3e9; }
.deep-lab-copy { padding: 20px 15px; }
.deep-lab h3 { margin: 14px 0 0; font-size: 30px; line-height: 1.15; letter-spacing: -0.04em; }
.deep-lab-copy > p { margin: 12px 0 0; color: #b3afa6; font-size: 12px; font-weight: 650; }
.lab-button-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 22px; }
.lab-button-grid--four { grid-template-columns: repeat(2, 1fr); }
.deep-lab button { min-height: 45px; border-color: rgba(255, 255, 255, 0.17); background: transparent; color: #d8d4ca; }
.deep-lab button[aria-pressed="true"] { border-color: #efb96a; background: #efb96a; color: #29231a; }
.lab-status { margin-top: 16px; padding: 13px; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 12px; color: #d4cfc3; font-size: 10px; }
.lab-image-window { position: relative; width: min(100%, 540px); height: 700px; justify-self: center; overflow: hidden; border-radius: 18px; background: #777; }
.lab-strip { position: absolute; inset: 0 auto 0 0; display: block; max-width: none; height: 100%; object-fit: cover; transition: transform 0.42s ease; }
.lab-strip--three { width: 300%; }
.lab-strip--four { width: 400%; }
[data-light-window][data-mode="hard"] .lab-strip { transform: translateX(-33.3333%); }
[data-light-window][data-mode="back"] .lab-strip { transform: translateX(-66.6667%); }
[data-composition-window][data-mode="thirds"] .lab-strip { transform: translateX(-25%); }
[data-composition-window][data-mode="diagonal"] .lab-strip { transform: translateX(-50%); }
[data-composition-window][data-mode="space"] .lab-strip { transform: translateX(-75%); }
.lab-image-window > span { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 4; padding: 9px 11px; border-radius: 9px; background: rgba(18, 20, 19, 0.74); color: #fff; font: 500 8px/1.3 "DM Mono", monospace; }
.composition-guide { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
[data-composition-window][data-mode="center"] .composition-guide { background: linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(255, 255, 255, 0.78) 50%, transparent calc(50% + 0.5px)), linear-gradient(transparent calc(50% - 0.5px), rgba(255, 255, 255, 0.78) 50%, transparent calc(50% + 0.5px)); }
[data-composition-window][data-mode="thirds"] .composition-guide { background: linear-gradient(90deg, transparent 33.2%, rgba(255, 255, 255, 0.76) 33.3% 33.55%, transparent 33.65% 66.2%, rgba(255, 255, 255, 0.76) 66.3% 66.55%, transparent 66.65%), linear-gradient(transparent 33.2%, rgba(255, 255, 255, 0.76) 33.3% 33.55%, transparent 33.65% 66.2%, rgba(255, 255, 255, 0.76) 66.3% 66.55%, transparent 66.65%); }
[data-composition-window][data-mode="diagonal"] .composition-guide::before { position: absolute; left: -18%; top: 50%; width: 136%; height: 1px; background: rgba(255, 255, 255, 0.78); content: ""; transform: rotate(28deg); }
[data-composition-window][data-mode="space"] .composition-guide { box-shadow: inset 0 0 0 18px rgba(0, 0, 0, 0.18); }
.exposure-control { display: grid; grid-template-columns: 78px 1fr 74px; gap: 10px; align-items: center; margin-top: 17px; }
.exposure-control label { color: #dad4c8; font-size: 9px; font-weight: 900; }
.exposure-control input { width: 100%; min-height: 44px; accent-color: var(--photo-amber); }
.exposure-control output { color: #efbb70; font: 500 9px/1 "DM Mono", monospace; text-align: right; }
.exposure-stage { --brightness: 1; --grain: 0.02; --depth-blur: 2px; --motion: 0px; position: relative; min-height: 620px; overflow: hidden; border-radius: 18px; background: #737a72; isolation: isolate; }
.exposure-stage::after { position: absolute; inset: -20%; z-index: 8; opacity: var(--grain); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); content: ""; pointer-events: none; }
.exposure-backdrop { position: absolute; inset: -3%; filter: brightness(var(--brightness)) blur(var(--depth-blur)); transform: scale(1.06); background: linear-gradient(155deg, #bed0c8 0 47%, #7b6149 48% 100%); }
.exposure-backdrop::before { position: absolute; left: 12%; top: 13%; width: 28%; height: 38%; border-radius: 50%; background: #47685b; box-shadow: 52px 36px 0 -12px #365347; content: ""; }
.exposure-vase { position: absolute; z-index: 3; left: 46%; bottom: 14%; width: 124px; height: 206px; border-radius: 48% 48% 27% 27% / 22% 22% 15% 15%; background: linear-gradient(90deg, #32433e, #aebdb0 48%, #283a35); box-shadow: 20px 17px 30px rgba(20, 20, 18, 0.34); filter: brightness(var(--brightness)); transform: translateX(-50%); }
.exposure-vase::before { position: absolute; left: 37px; top: -30px; width: 50px; height: 42px; border-radius: 9px 9px 45% 45%; background: #62796f; content: ""; }
.exposure-spinner { position: absolute; z-index: 4; right: 15%; bottom: 24%; width: 76px; height: 76px; border-radius: 50%; background: conic-gradient(#d16f51 0 25%, #ead095 0 50%, #607f85 0 75%, #e7eadf 0); filter: brightness(var(--brightness)) drop-shadow(var(--motion) 0 4px rgba(232, 181, 91, 0.5)); }
.exposure-spinner::after { position: absolute; left: 35px; top: 72px; width: 6px; height: 120px; background: #3d3c37; content: ""; }
.exposure-readout { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 9; display: grid; gap: 5px; padding: 10px; border-radius: 10px; background: rgba(18, 20, 19, 0.76); color: #fff; font: 500 8px/1.35 "DM Mono", monospace; }

.activity-timer { display: grid; grid-template-columns: 1fr auto auto auto; gap: 16px; align-items: center; margin-top: 14px; }
.activity-timer output { font: 500 34px/1 "DM Mono", monospace; }
.activity-timer > p { min-width: 70px; color: var(--photo-sage); font-size: 10px; font-weight: 800; }
.activity-timer > div:last-child { display: flex; gap: 5px; }
.activity-timer button:first-child { border-color: var(--photo-dark); background: var(--photo-dark); color: #fff; }
.lesson-teaching { margin-top: 14px; }
.question-list li { padding: 10px; border-radius: 10px; background: rgba(143, 79, 55, 0.07); color: #674f47; font-size: 10px; font-weight: 700; }
blockquote { margin: 14px 0 0; padding: 14px 16px; border-left: 3px solid var(--photo-amber); border-radius: 0 12px 12px 0; background: #fff7ea; color: #5f5548; font-family: Georgia, "Noto Sans KR", serif; font-size: 15px; }
.level-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 14px; }
.level-card { padding: 13px; border-radius: 12px; background: rgba(32, 32, 29, 0.055); }
.level-card > b { color: var(--photo-rust); font: 500 8px/1 "DM Mono", monospace; }
.level-card h4 { margin: 8px 0 0; font-size: 11px; }
.level-card p { margin: 5px 0 0; color: var(--photo-muted); font-size: 9px; }
.no-device { margin: 10px 0 0; padding: 13px; border: 1px dashed rgba(83, 106, 100, 0.35); border-radius: 12px; background: #edf2ef; color: #52645f; font-size: 10px; font-weight: 700; }
.support-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.support-card--safe { border-color: rgba(143, 79, 55, 0.23); }
.support-list li { color: #5f5c55; font-size: 10px; font-weight: 650; }
.support-list li::before { margin-right: 7px; color: var(--photo-sage); content: "✓"; font-weight: 900; }
.lesson-terms { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.lesson-terms a { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 10px; border-radius: 999px; background: rgba(88, 116, 135, 0.1); color: var(--photo-blue); font: 500 8px/1 "DM Mono", monospace; }

.worksheet-a4 { position: relative; margin-top: 16px; padding: 24px; border: 1px solid #c9c3b8; border-radius: 20px; background: #fff; color: #222; box-shadow: 0 12px 30px rgba(49, 43, 35, 0.07); }
.worksheet-head { display: flex; align-items: start; justify-content: space-between; gap: 18px; padding-bottom: 15px; border-bottom: 2px solid #222; }
.worksheet-head small { font: 500 9px/1 "DM Mono", monospace; letter-spacing: 0.12em; }
.worksheet-head h3 { margin: 7px 0 0; font-size: 22px; line-height: 1.15; }
.worksheet-name { display: flex; gap: 14px; color: #555; font-size: 10px; }
.worksheet-name span { min-width: 94px; padding-bottom: 4px; border-bottom: 1px solid #777; }
.worksheet-instructions { margin: 12px 0 0; color: #555; font-size: 10px; }
.worksheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 15px; }
.worksheet-block { min-height: 145px; padding: 13px; border: 1px solid #aaa; border-radius: 10px; }
.worksheet-block--wide { grid-column: 1 / -1; }
.worksheet-block--tall { min-height: 220px; }
.worksheet-block--wide-tall { grid-column: 1 / -1; min-height: 220px; }
.worksheet-block strong { font-size: 11px; }
.worksheet-block p { margin: 7px 0 0; color: #666; font-size: 9px; }
.write-lines { height: calc(var(--write-lines) * 24px); margin-top: 10px; background: repeating-linear-gradient(transparent 0 23px, #bbb 24px); }
.worksheet-footer { display: flex; justify-content: space-between; gap: 15px; margin-top: 14px; color: #777; font: 500 8px/1.4 "DM Mono", monospace; }
.worksheet-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.worksheet-actions button { border-color: var(--photo-dark); background: var(--photo-dark); color: #fff; }
.lesson-pager { display: flex; justify-content: flex-end; gap: 7px; margin-top: 16px; }
.lesson-pager a { padding: 8px 11px; border: 1px solid var(--photo-line); border-radius: 10px; background: #fff; font-size: 9px; font-weight: 800; }

.reference-section { scroll-margin-top: 84px; margin-top: 120px; padding-top: 30px; border-top: 1px solid var(--photo-line); }
.reference-section > header > p { max-width: 760px; color: var(--photo-muted); font-size: 13px; }
.glossary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 28px; }
.glossary-grid > div,
.guide-grid > article { padding: 18px; border: 1px solid var(--photo-line); border-radius: 16px; background: rgba(255, 253, 248, 0.68); }
.glossary-grid dt { font-size: 13px; font-weight: 850; }
.glossary-grid dd { margin: 7px 0 0; color: var(--photo-muted); font-size: 10px; }
.guide-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 28px; }
.guide-grid h3 { margin: 0; font-size: 14px; }
.guide-grid p,
.guide-list li { color: var(--photo-muted); font-size: 10px; }
.rubric-scroll { margin-top: 28px; overflow-x: auto; border: 1px solid var(--photo-line); border-radius: 16px; background: rgba(255, 253, 248, 0.76); }
.rubric-table { width: 100%; min-width: 820px; border-collapse: collapse; }
.rubric-table th, .rubric-table td { padding: 14px; border-right: 1px solid var(--photo-line); border-bottom: 1px solid var(--photo-line); text-align: left; vertical-align: top; }
.rubric-table tr:last-child th, .rubric-table tr:last-child td { border-bottom: 0; }
.rubric-table th:last-child, .rubric-table td:last-child { border-right: 0; }
.rubric-table thead th { background: rgba(32, 32, 29, 0.055); font-size: 10px; }
.rubric-table thead b { display: block; color: var(--photo-rust); font: 500 12px/1 "DM Mono", monospace; }
.rubric-table thead span { display: block; margin-top: 6px; }
.rubric-table tbody th { width: 160px; font-size: 11px; }
.rubric-table td { color: var(--photo-muted); font-size: 9px; }
.rubric-interpretation { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.rubric-interpretation p { margin: 0; padding: 13px; border-radius: 12px; background: rgba(83, 106, 100, 0.09); color: var(--photo-muted); font-size: 9px; }
.rubric-interpretation b { display: block; margin-bottom: 5px; color: var(--photo-sage); font: 500 10px/1 "DM Mono", monospace; }
.rubric-safety { padding: 14px; border: 1px solid rgba(143, 79, 55, 0.24); border-radius: 13px; background: #fff5ed; color: #73574c; font-size: 10px; font-weight: 750; }
.site-footer { display: flex; justify-content: space-between; gap: 18px; width: min(1220px, calc(100% - 36px)); margin: 0 auto; padding: 26px 0 40px; border-top: 1px solid var(--photo-line); color: var(--photo-muted); font-size: 10px; }
.site-footer strong { color: var(--photo-ink); }

@media (max-width: 980px) {
  .lesson-card-grid { grid-template-columns: repeat(3, 1fr); }
  .lesson-head { grid-template-columns: 88px 1fr; }
  .lesson-time { display: none; }
  .lesson-contract, .lesson-teaching, .deep-lab { grid-template-columns: 1fr; }
  .lab-image-window { height: 680px; }
  .activity-timer { grid-template-columns: 1fr auto; }
  .activity-timer > p, .activity-timer > div:last-child { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .course-bar { grid-template-columns: 1fr auto; }
  .course-bar > strong { display: none; }
  .course-index > header { align-items: stretch; flex-direction: column; }
  .lesson-card-grid { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: repeat(2, 1fr); }
  .support-grid, .glossary-grid, .guide-grid { grid-template-columns: 1fr; }
  .rubric-interpretation { grid-template-columns: 1fr; }
  .level-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .course-bar { padding: 9px 10px; }
  .back-link { font-size: 0; }
  .back-link::before { font-size: 18px; }
  .course-bar button { padding: 0 9px; }
  main { width: min(100% - 24px, 1220px); padding-top: 46px; }
  .course-hero h1 { font-size: 48px; }
  .lesson-card-grid { grid-template-columns: 1fr; }
  .lesson-head { grid-template-columns: 55px 1fr; gap: 11px; }
  .lesson-number { font-size: 43px; }
  .lesson-head h2 { font-size: 33px; }
  .materials-list, .timeline, .worksheet-grid { grid-template-columns: 1fr; }
  .deep-lab { padding: 12px; }
  .lab-image-window { height: 540px; }
  .exposure-stage { min-height: 500px; }
  .exposure-control { grid-template-columns: 67px 1fr 62px; }
  .worksheet-a4 { padding: 16px; }
  .worksheet-head { display: grid; }
  .worksheet-block--wide, .worksheet-block--wide-tall { grid-column: auto; }
  .worksheet-name { flex-wrap: wrap; }
  .site-footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

@media (forced-colors: active) {
  .course-bar,
  .course-hero,
  .lesson-card,
  .foundation-lesson,
  .worksheet-a4,
  .deep-lab,
  .rubric-scroll { color: CanvasText; border-color: CanvasText; background: Canvas; box-shadow: none; }
  a,
  button { color: LinkText; border-color: ButtonText; forced-color-adjust: auto; }
  :focus-visible { outline: 3px solid Highlight; outline-offset: 3px; }
}

@page { size: A4 portrait; margin: 9mm; }
@media print {
  html, body { width: 100%; margin: 0; background: #fff !important; }
  body { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  body::before,
  .skip-link,
  .course-bar,
  .course-hero,
  .course-index,
  .site-footer,
  .reference-section,
  .foundation-lesson > :not(.worksheet-a4) { display: none !important; }
  main, .lesson-list { width: 100%; margin: 0; padding: 0; }
  .foundation-lesson { display: block !important; margin: 0; padding: 0; border: 0; }
  body[data-print-mode="single"] .foundation-lesson:not(.is-print-target) { display: none !important; }
  .worksheet-a4 { display: block !important; width: 100%; min-height: 277mm; margin: 0; padding: 8mm; border: 1px solid #222; border-radius: 0; box-shadow: none; break-after: page; page-break-after: always; }
  .foundation-lesson:last-child .worksheet-a4,
  body[data-print-mode="single"] .foundation-lesson.is-print-target .worksheet-a4 { break-after: auto; page-break-after: auto; }
  .worksheet-actions { display: none !important; }
  .worksheet-grid { grid-template-columns: 1fr 1fr; }
  .worksheet-block--wide, .worksheet-block--wide-tall { grid-column: 1 / -1; }
  .worksheet-footer { position: absolute; left: 8mm; right: 8mm; bottom: 7mm; }
}