/* 레이아웃: 회로도 격자 바탕. 누가 무엇을 → AI에게 말하면 → AI가 문제 위치를 가리키는 모습 → 한 차시 → 단원 → 실수가 보이는 화면 */
:root {
  --bg: #f4f7f7;
  --sheet: #ffffff;
  --ink: #13211f;
  --muted: #586866;
  --line: #d3dddc;
  --grid: #e3eaea;
  --accent: #0f7c78;
  --accent-soft: #dcefed;
  --ai: #b7700a;
  --ai-soft: #fbefd9;
  --ok: #1f8a4c;
  --hl: #9be15d;
  --hl-ink: #13211f;
  --w-pos: #d23b2f;
  --w-zero: #2f62c9;
  --font-body: "IBM Plex Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1514; --sheet: #142020; --ink: #dce8e6; --muted: #92a5a2; --line: #2a3b3a; --grid: #172524;
    --accent: #4dbdb5; --accent-soft: #163634; --ai: #f0b04a; --ai-soft: #3a2c14;
    --ok: #57c486; --hl: #7cc443; --w-pos: #ff6b5e; --w-zero: #6a96ff;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 20px 20px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
}
.page {
  max-width: 1040px;
  margin: 0 auto;
  padding-block: 40px 56px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: grid;
  gap: 28px;
}
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.back { font-size: 14px; text-decoration: none; justify-self: start; }
.head { display: grid; gap: 14px; }
.eyebrow { font-size: 12.5px; letter-spacing: 0.08em; color: var(--muted); }
h1 { font-size: clamp(30px, 5.4vw, 46px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.lede { font-size: 17.5px; max-width: 60ch; }

.sheet { background: var(--sheet); border: 1px solid var(--line); border-radius: 6px; padding: 24px; display: grid; gap: 18px; min-width: 0; }
.sheet-head { border-bottom: 1px solid var(--line); padding-bottom: 12px; display: grid; gap: 2px; }
.sheet-head h2 { font-size: 21px; font-weight: 600; }
.sheet-head p { font-size: 14px; color: var(--muted); }
.note { font-size: 14px; color: var(--muted); max-width: 72ch; }

/* 역할 */
.roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.role { border: 1px solid var(--line); border-radius: 6px; padding: 16px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.role.ai { border: 1.6px solid var(--ai); background: var(--ai-soft); }
.role.student { border: 1.6px solid var(--accent); }
.role .who { font-size: 12.5px; letter-spacing: 0.05em; color: var(--muted); }
.role h3 { font-size: 17px; font-weight: 700; }
.role ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: 14.5px; }

/* 대화 카드 */
.talks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.talk { border: 1px solid var(--line); border-radius: 6px; padding: 16px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.talk .when { font-size: 12.5px; color: var(--muted); letter-spacing: 0.04em; }
.say { background: var(--accent-soft); border-radius: 10px 10px 10px 2px; padding: 10px 12px; font-size: 15.5px; font-weight: 500; }
.say::before { content: "교수자"; font-size: 11.5px; font-weight: 600; color: var(--accent); letter-spacing: 0.04em; display: block; }
.does { background: var(--ai-soft); border-radius: 10px 10px 2px 10px; padding: 10px 12px; font-size: 14.5px; }
.does::before { content: "AI"; font-size: 11.5px; font-weight: 600; color: var(--ai); letter-spacing: 0.04em; display: block; }
.result { font-size: 14.5px; border-left: 3px solid var(--ok); padding-left: 10px; }
.result b { font-weight: 600; }
.guard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.guard div { font-size: 14px; display: grid; gap: 2px; padding: 10px 12px; border: 1px dashed var(--ai); border-radius: 4px; min-width: 0; }
.guard b { font-size: 14.5px; }
.guard span { color: var(--muted); }

/* 가리키기 그림 */
.demo { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 22px; align-items: center; }
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scroll svg { display: block; min-width: 380px; width: 100%; height: auto; }
svg text { font-family: var(--font-body); fill: var(--ink); }
svg .wire { fill: none; stroke: var(--ink); stroke-width: 1.6; }
svg .pos { stroke: var(--w-pos); }
svg .zero { stroke: var(--w-zero); }
svg .sym { fill: var(--sheet); stroke: var(--ink); stroke-width: 1.6; }
svg .halo { fill: none; stroke: var(--hl); stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; opacity: 0.55; }
svg .badge { fill: var(--hl); stroke: var(--ink); stroke-width: 1; }
svg .badge-t { fill: var(--hl-ink); font-weight: 700; }
svg .t-muted { fill: var(--muted); }
.chat { display: grid; gap: 10px; font-size: 14.5px; }
.chat .q { background: var(--accent-soft); border-radius: 10px 10px 10px 2px; padding: 10px 12px; }
.chat .q::before { content: "학생 질문"; font-size: 11.5px; font-weight: 600; color: var(--accent); display: block; }
.chat .a { background: var(--ai-soft); border-radius: 10px 10px 2px 10px; padding: 10px 12px; }
.chat .a::before { content: "AI"; font-size: 11.5px; font-weight: 600; color: var(--ai); display: block; }
.chat .after { border-left: 3px solid var(--ok); padding-left: 10px; }

/* 한 차시 */
.flow { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.step { padding: 14px; display: grid; gap: 6px; align-content: start; border-right: 1px solid var(--line); min-width: 0; }
.step:last-child { border-right: 0; }
.step .t { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.step h3 { font-size: 15.5px; font-weight: 700; }
.step p { font-size: 14px; }
.step .by { font-size: 12.5px; font-weight: 600; }
.step .by.ai { color: var(--ai); }
.step .by.st { color: var(--accent); }
.step.prep { background: var(--ai-soft); }
.variants { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; }
.variants b { font-weight: 600; margin-right: 4px; }
.variants span { padding: 3px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); }

/* 단원 */
.units { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.unit { border: 1px solid var(--line); border-radius: 6px; padding: 14px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.unit h3 { font-size: 15.5px; font-weight: 700; }
.unit .parts { font-size: 13px; color: var(--muted); }
.unit p { font-size: 14px; }

/* 실수 */
.mist { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.mist div { border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; display: grid; gap: 4px; min-width: 0; }
.mist b { font-size: 15px; }
.mist span { font-size: 14px; color: var(--muted); }

.foot { font-size: 13px; color: var(--muted); }

@media (max-width: 860px) {
  .flow { grid-template-columns: 1fr 1fr; }
  .step { border-bottom: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .roles, .talks, .guard, .demo { grid-template-columns: 1fr; }
  .sheet { padding: 18px; }
}
@media (max-width: 480px) {
  .flow { grid-template-columns: 1fr; }
  .step { border-right: 0; }
}