/* 토큰·상단바·푸터는 site.css(단일 정본)로 이동 (D127) */
/* 랜딩 공유 스타일 (D122) — index·intro 공용. 정본은 이 파일 하나 */
/* =========================================================================
   이 페이지의 디자인 규칙 전부. 코드가 규칙을 지키지 않으면 규칙이 틀린 것이다.

   1) 정체성
      이 페이지는 소개서를 지향하지 않는다. '세션 기록부'다. 판형은 좌측 번호대(rail),
      본문단(600px), 우측 여백주석(232px) 3트랙으로 고정된다.
      기록부이므로 모든 내용은 기본 상태에서 이미 보인다.

   2) 팔레트 역할제 (단일 테마, 모든 색을 명시적으로 칠한다)
      --paper   #F4F1E9  바탕(종이)
      --paper-2 #E9E4D7  침잠면(요약 카드, 음성 구간 바닥)
      --card    #FFFDF6  들어올린 종이(재현물, 기록 카드)
      --ink     #191713  본문 잉크
      --ink-2   #55514A  보조 잉크 (대비 6.7:1)
      --line    #D6CFBD  괘선
      --pen     #A62F1C  채점 펜. 주석·번호·행동유도에만 쓴다 (대비 6.1:1)
      --tutor   #20241C  튜터 발화면 / --tutor-text #F2EFE3 (대비 13:1)

   3) 타이포 3역할. 서체가 화자이되, 위계는 서체에만 걸지 않는다.
      명조 = 페이지의 목소리(헤드라인·여백주석)
      고딕 = 대화 본문과 산문
      모노 = 기록 라벨·시각·수식. 손글씨 전사도 모노다(기계가 옮겨적은 기록).
      명조가 없는 환경에서 고딕으로 폴백해도 위계가 유지되도록,
      크기·자간·색·괘선·여백에 위계를 분산했다.

   4) 간격 스케일 하나: 8 / 16 / 24 / 40 / 64 / 104

   5) 말풍선은 히어로 기록(M1) 한 곳에만 쓴다.
      메신저 꼬리는 없다. 모서리는 양쪽 화자 모두 14px로 같고,
      화자는 정렬(좌/우)과 채움(면/윤곽)으로만 구분한다.
      나머지 구간은 전사체·하강 사다리·요구응답 대장·음성 스트립으로 조판한다.

   6) 모션은 하나뿐이다. '답을 참는 1.4초'.
      스크롤 진입 애니메이션은 전부 제거했다(관측 노드 1개).
      그 1.4초조차 CSS 애니메이션 종료 시점에 스스로 복구되므로,
      JS가 멈춰도 문장이 사라진 채 남지 않는다.
      JS 미동작 · reduced-motion · 인쇄 어디서도 전문이 그대로 보인다.

   7) 그림자는 실물 표면에만. 재현물 종이, 기록 카드, 학생 쪽지, 입력바가 대상이다.
      말풍선과 버튼과 표는 평면이다.
   ========================================================================= */

*{margin:0; padding:0; box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16.5px; line-height:1.72;
  word-break:keep-all; overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}
@media (min-width:700px){ body{font-size:17px} }
::selection{background:var(--pen); color:#FFF8F2}
a{color:inherit}
:focus-visible{outline:2px solid var(--pen); outline-offset:3px; border-radius:2px}
img,svg{max-width:100%}

/* 판형 3트랙(.track)은 site.css로 이동 — 푸터가 공유 (D127) */
@media (min-width:920px){
  .oneline > *{grid-row:1}
}
.band{max-width:var(--col)}
@media (min-width:920px){ .band{margin-left:calc(var(--rail) + var(--gap))} }

/* 좌측 번호대 */
.rail{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  color:var(--ink-2); text-transform:uppercase; padding-top:5px;
}
.rail b{display:block; font-weight:400; color:var(--pen); letter-spacing:.1em; margin-top:4px}

/* 우측 여백주석 */
.note{
  font-family:var(--serif); font-size:13px; line-height:1.58;
  color:var(--pen); padding-top:17px;
}
.note::before{content:""; display:block; width:22px; height:1px; background:var(--pen); margin-bottom:8px}
@media (max-width:919px){
  .note{
    padding:9px 0 0 14px; margin-top:10px;
    border-left:2px solid var(--pen); max-width:34em; font-size:14.5px;
  }
  .note::before{display:none}
}


/* ---------- 히어로 ---------- */
.hero{padding-top:var(--s4); padding-bottom:var(--s2)}
@media (min-width:920px){
  .hero{padding-top:var(--s5)}
  /* 헤드라인과 입력바는 본문단+여백단을 함께 쓴다. 여백단이 비어 보이지 않게 하는 유일한 예외. */
  .hero h1, .hero .composer, .close-in{grid-column:2 / 4}
}
.kicker{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.18em; color:var(--ink-2);
  margin-bottom:var(--s3);
}
h1{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(33px, 7.2vw, 56px); line-height:1.18; letter-spacing:-0.025em;
  margin-bottom:var(--s3);
}
h1 .hush{
  display:inline-block;
  background:linear-gradient(to top, rgba(166,47,28,.30) 0 .15em, transparent .15em);
}
.identity{
  font-size:18px; line-height:1.62; max-width:31em;
  padding-left:16px; border-left:3px solid var(--ink);
  margin-bottom:var(--s2);
}
.lede{font-size:16.5px; color:var(--ink-2); max-width:33em; margin-bottom:var(--s4)}

/* ---------- 입력 진입 3종 (제품 화면) ---------- */
.composer{
  background:var(--card); border:1px solid var(--line); border-radius:4px;
  box-shadow:0 5px 16px rgba(25,23,19,.07);
  padding:var(--s3) var(--s3) var(--s2);
}
.crail{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--ink-2);
  padding-bottom:10px; border-bottom:1px solid var(--line); margin-bottom:var(--s3);
}
.cgrid{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s3)}
@media (min-width:760px){
  .cgrid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:0}
  .centry{padding:0 20px; border-left:1px solid var(--line)}
  .centry:first-child{padding-left:0; border-left:0}
  .centry:last-child{padding-right:0}
}
.cnum{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--pen)}
.ctitle{display:block; font-weight:700; font-size:16px; margin:5px 0 10px; letter-spacing:-0.01em}
.cfield{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--line); border-radius:6px; background:var(--paper);
  padding:9px 11px; font-size:13.5px; line-height:1.4; color:var(--ink-2);
  min-height:42px;
}
.cfield .caret{
  width:1px; height:15px; background:var(--ink); flex:none;
}
.cfield svg{flex:none; color:var(--ink-2)}
.cdesc{display:block; font-size:13.5px; color:var(--ink-2); margin-top:9px; line-height:1.6}
.cact{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  margin-top:var(--s3); padding-top:var(--s2); border-top:1px solid var(--line);
}
.btn{
  display:inline-block; background:var(--pen); color:#FFF8F2;
  font-size:16px; font-weight:700; text-decoration:none;
  border-radius:6px; padding:13px 24px; letter-spacing:-0.01em;
}
.btn:hover{background:var(--pen-deep)}
.btn:active{transform:translateY(1px)}
.cfine{font-size:13px; color:var(--ink-2)}

/* ---------- 섹션 머리 ---------- */
section{padding-top:var(--s5)}
@media (min-width:920px){ section{padding-top:var(--s6)} }
.sechead{border-top:1px solid var(--ink); padding-top:var(--s2); margin-bottom:var(--s3)}
h2{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(23px, 4.4vw, 31px); line-height:1.3; letter-spacing:-0.02em;
}
.sub{color:var(--ink-2); font-size:16px; max-width:34em; margin-top:var(--s2)}
.sub strong{color:var(--ink); font-weight:700}

/* ---------- 기록 머리(세션 태그) ---------- */
.stag{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; color:var(--ink-2);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:8px 0; margin:var(--s4) 0 var(--s3);
}
.stag em{font-style:normal; color:var(--pen)}
/* 기록 머리 바로 뒤에 오는 표는 괘선을 겹치지 않는다. 빈 행처럼 보이는 것을 막는다. */
.stag + .script, .stag + .ladder{margin-top:0}
.stag + .script{border-top:0}
.stag + .ladder > li:first-child{border-top:0}
.stag + .ledger{margin-top:var(--s2)}

/* ---------- 대화 스레드 (히어로 기록 M1 전용) ---------- */
.turn{padding:9px 0}
.say-wrap{min-width:0}
.who{
  display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  color:var(--ink-2); margin-bottom:5px;
}
.student .say-wrap{text-align:right}
.student .say-wrap > *{text-align:left}
.bubble{
  position:relative; display:inline-block; max-width:88%;
  padding:12px 17px; border-radius:14px;
  font-size:15.8px; line-height:1.74; text-align:left;
}
.tutor .bubble{background:var(--tutor); color:var(--tutor-text)}
.student .bubble{background:#FFFFFF; border:1px solid var(--line); color:var(--ink)}
.m{font-family:var(--mono); font-size:.93em; letter-spacing:.01em}
.cut{font-family:var(--mono); font-size:11px; color:var(--ink-2); letter-spacing:.08em; white-space:nowrap}
.tutor .cut{color:#B7B2A2}

/* 답을 참는 1.4초 · 이 페이지 유일의 인터랙션 */
.replay{
  display:none; margin-top:7px;
  font-family:var(--mono); font-size:10px; letter-spacing:.04em; white-space:nowrap;
  color:var(--pen); background:transparent;
  border:1px solid var(--pen); border-radius:4px; padding:3px 6px; cursor:pointer;
}
.replay:hover{background:var(--pen); color:#FFF8F2}
.js .replay{display:inline-block}
.pause{
  display:none; position:absolute; inset:0;
  align-items:center; gap:6px; padding:12px 17px;
}
.pause i{width:5px; height:5px; border-radius:50%; background:var(--tutor-text); opacity:.5}
.pause .bar{position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--pen)}
.hold.is-holding .pause{display:flex; animation:pause-out 1.4s steps(1,end) forwards}
.hold.is-holding .pause .bar{animation:pause-fill 1.4s linear forwards}
.hold.is-holding .pause i{animation:blip 1.05s infinite}
.hold.is-holding .pause i:nth-child(2){animation-delay:.16s}
.hold.is-holding .pause i:nth-child(3){animation-delay:.32s}
.hold.is-holding .say{animation:say-in 1.4s steps(1,end) forwards}
@keyframes say-in{0%,99.9%{visibility:hidden} 100%{visibility:visible}}
@keyframes pause-out{0%,99.9%{opacity:1} 100%{opacity:0; visibility:hidden}}
@keyframes pause-fill{from{width:0} to{width:100%}}
@keyframes blip{0%,80%,100%{opacity:.28} 40%{opacity:.95}}
@media (prefers-reduced-motion: reduce){
  .replay{display:none !important}
  .hold.is-holding .say{animation:none; visibility:visible}
  .hold.is-holding .pause{display:none}
}

/* ---------- 재현물 종이 ---------- */
.repro{margin-top:12px}
.student .repro{display:flex; flex-direction:column; align-items:flex-end}
.paper-card{
  width:min(310px,92%); text-align:left;
  background:repeating-linear-gradient(to bottom, transparent 0 29px, #E7E1D2 29px 30px), var(--card);
  border:1px solid var(--line); border-radius:2px;
  padding:19px 20px 13px;
  transform:rotate(-1.1deg);
  box-shadow:0 6px 16px rgba(25,23,19,.10), 0 1px 2px rgba(25,23,19,.07);
}
.paper-card .pl{
  font-family:var(--mono); font-size:18px; color:#33302A;
  line-height:30px; letter-spacing:.05em; white-space:nowrap; overflow-x:auto;
}
.paper-card .pl:nth-child(2){transform:rotate(.45deg)}
.paper-card .pl:nth-child(3){transform:rotate(-.35deg)}
.paper-card.printed .pl{letter-spacing:.01em; font-size:15px; white-space:normal; line-height:30px}
.paper-card .smudge{filter:blur(1.6px); opacity:.72}
.repro figcaption{
  font-size:12.5px; line-height:1.7; color:var(--ink-2);
  margin-top:10px; max-width:310px;
}
.student .repro figcaption{text-align:right}

/* ---------- 세션 요약 카드 ---------- */
.summary{
  background:var(--paper-2); border:1px solid var(--line); border-radius:2px;
  padding:var(--s3) 26px; margin-top:var(--s4);
  box-shadow:0 4px 12px rgba(25,23,19,.06);
}
.summary h3{
  font-family:var(--mono); font-weight:400; font-size:11.5px; letter-spacing:.16em; color:var(--ink-2);
  padding-bottom:9px; border-bottom:1px solid var(--line); margin-bottom:var(--s2);
}
.summary dl{display:grid; grid-template-columns:minmax(0,1fr); gap:4px 20px; font-size:15.5px}
.summary dt{font-family:var(--mono); font-size:12px; color:var(--ink-2); letter-spacing:.04em}
.summary dd{margin-bottom:12px}
.summary dd:last-of-type{margin-bottom:0}
@media (min-width:620px){
  .summary dl{grid-template-columns:auto minmax(0,1fr); gap:11px 22px}
  .summary dt{padding-top:3px; white-space:nowrap}
  .summary dd{margin-bottom:0}
}
.summary .zero{font-family:var(--mono); font-size:20px; font-weight:700; color:var(--pen); letter-spacing:.02em}
.summary .verify{
  font-size:13px; color:var(--ink-2); margin-top:var(--s2);
  padding-top:12px; border-top:1px solid var(--line);
}

/* ---------- 산문 ---------- */
.quote{border-left:3px solid var(--pen); padding-left:22px; margin-bottom:var(--s3)}
.quote blockquote{
  font-family:var(--serif); font-size:clamp(21px,3.6vw,27px); line-height:1.45; letter-spacing:-0.015em;
}
.quote cite{
  display:block; font-style:normal; font-family:var(--mono); font-size:11.5px;
  color:var(--ink-2); margin-top:12px; letter-spacing:.06em;
}
p.body{max-width:34em; margin-bottom:var(--s2)}
p.body.dim{color:var(--ink-2)}
.metric{
  max-width:34em; margin-top:var(--s3); padding-top:var(--s3); border-top:1px solid var(--line);
  font-family:var(--serif); font-size:19px; line-height:1.6;
}
.metric em{font-style:normal; color:var(--pen); font-weight:700}

/* ---------- 전사체 (사진 판독 구간) ---------- */
.script{margin-top:var(--s3); border-top:1px solid var(--line)}
.script .ln{
  display:grid; grid-template-columns:minmax(0,1fr); gap:2px;
  padding:13px 0; border-bottom:1px solid var(--line);
}
@media (min-width:620px){
  .script .ln{grid-template-columns:82px minmax(0,1fr); column-gap:18px; gap:0}
}
.script .lab{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--ink-2); padding-top:5px;
}
.script .ln.t .lab{color:var(--pen)}
.script .tx{font-size:15.8px; line-height:1.74}
.script .ln.t .tx{font-weight:500}
.script .ln.s .tx{color:var(--ink-2)}

/* ---------- 음성 구간 ---------- */
.voice{
  background:var(--paper-2); border:1px solid var(--line); border-radius:3px;
  padding:var(--s3) 22px; margin-top:var(--s3);
}
.voice .vhead{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--ink-2);
  padding-bottom:10px; border-bottom:1px solid var(--line);
}
.vlist{list-style:none}
.vrow{display:grid; grid-template-columns:minmax(0,1fr); gap:7px; padding:15px 0; border-bottom:1px solid var(--line)}
.vrow:last-child{border-bottom:0; padding-bottom:0}
@media (min-width:700px){
  .vrow{grid-template-columns:186px minmax(0,1fr); column-gap:22px; align-items:start}
}
.vmeta{display:flex; align-items:center; gap:10px; padding-top:2px}
.vtime{font-family:var(--mono); font-size:11px; color:var(--ink-2); letter-spacing:.04em}
.vwho{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--ink-2)}
.vrow.t .vwho{color:var(--pen)}
.meter{display:flex; align-items:center; gap:2px; height:16px}
.meter i{width:2px; background:var(--ink-2); opacity:.55; border-radius:1px}
.vrow.t .meter i{background:var(--pen); opacity:.75}
.meter .a{height:20%} .meter .b{height:45%} .meter .c{height:72%}
.meter .d{height:96%} .meter .e{height:58%} .meter .f{height:32%}
.vsay{font-size:15.6px; line-height:1.74; padding-left:14px; border-left:2px solid var(--line)}
.vrow.t .vsay{border-left-color:var(--pen)}

/* ---------- 하강 사다리 (G1) ---------- */
.ladder{list-style:none; margin-top:var(--s3)}
.ladder li{
  padding:15px 0 15px calc(var(--d,0) * 16px);
  border-top:1px solid var(--line);
}
.ladder li:last-child{border-bottom:1px solid var(--line)}
.d0{--d:0} .d1{--d:1} .d2{--d:2} .d3{--d:3}
.ladder .depth{
  display:inline-block; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  color:var(--ink-2); margin-bottom:7px;
}
.ladder .floor .depth{color:var(--pen)}
.ladder p{font-size:15.4px; line-height:1.7; max-width:33em}
.ladder p + p{margin-top:5px}
.ladder .lab{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; color:var(--ink-2); margin-right:8px}
.ladder .t .lab{color:var(--pen)}
.ladder .s{color:var(--ink-2)}
.ladder .floor{background:linear-gradient(to right, rgba(166,47,28,.07), rgba(166,47,28,0) 70%)}

/* ---------- 요구 / 응답 대장 (G3) ---------- */
.ledger{margin-top:var(--s3); border-top:1px solid var(--ink)}
.lg{display:grid; grid-template-columns:minmax(0,1fr); border-bottom:1px solid var(--line)}
@media (min-width:760px){
  .lg{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .lg .ans{border-left:1px solid var(--line)}
}
.lg > div{padding:16px 0}
.lg .ans{padding-left:0}
@media (min-width:760px){ .lg .ans{padding-left:22px} .lg .ask{padding-right:22px} }
.lg .tag{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--ink-2); margin-bottom:7px}
.lg .ans .tag{color:var(--pen)}
.lg p{font-size:15.4px; line-height:1.72}
.lg .ask p{color:var(--ink-2)}
.lg-out{
  margin-top:var(--s2); font-size:15.4px; line-height:1.72;
  background:var(--card); border:1px solid var(--line); border-radius:2px; padding:16px 18px;
}
.lg-out .tag{font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--pen); display:block; margin-bottom:7px}

/* ---------- 학생 쪽지 ---------- */
.memo{
  background:var(--card); border:1px solid var(--line); border-top:3px solid var(--pen);
  border-radius:2px; padding:var(--s3) 24px; margin-top:var(--s3);
  box-shadow:0 4px 12px rgba(25,23,19,.06);
}
.memo .to{font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--pen); margin-bottom:var(--s2)}
.memo p{font-size:16.5px; line-height:1.8; max-width:31em}
.memo p + p{margin-top:11px}
.memo p strong{font-weight:700}

/* ---------- 학부모 확인 ---------- */
.checks{margin-top:var(--s3); border-top:1px solid var(--ink)}
.chk{display:grid; grid-template-columns:minmax(0,1fr); gap:6px; padding:var(--s3) 0; border-bottom:1px solid var(--line)}
@media (min-width:760px){
  .chk{grid-template-columns:236px minmax(0,1fr); column-gap:var(--gap); gap:0}
}
.chk h3{font-family:var(--serif); font-size:18.5px; font-weight:700; letter-spacing:-0.015em; padding-top:1px}
.chk p{color:var(--ink-2); font-size:15.6px; max-width:36em}
.chk p b{color:var(--ink); font-weight:700}
.chk p + p{margin-top:9px}

/* ---------- 마무리 CTA ---------- */
.close{padding-bottom:var(--s5)}
.close-in{border-top:3px solid var(--ink); padding-top:var(--s3)}
.close h2{margin-bottom:var(--s2)}
.close p.lead{color:var(--ink-2); max-width:31em; margin-bottom:var(--s3)}
.close .row{display:flex; flex-wrap:wrap; align-items:center; gap:16px}
.link-cta{
  font-size:15px; text-decoration:none; color:var(--ink);
  border-bottom:1px solid var(--pen); padding-bottom:3px;
}
.link-cta:hover{color:var(--pen)}
.close .fine{font-size:13px; color:var(--ink-2); margin-top:var(--s3); line-height:1.8}


/* ---------- 인쇄 ---------- */
@media print{
  @page{margin:14mm}
  :root{--paper:#fff; --paper-2:#fff; --card:#fff; --line:#999; --ink:#000; --ink-2:#333; --pen:#000}
  body{background:#fff; color:#000; font-size:10.5pt; line-height:1.6}
  .topbar, .composer, .replay, .pause, .link-cta, .btn, .cact{display:none !important}
  .hold.is-holding .say{animation:none !important; visibility:visible !important}
  .tutor .bubble{background:#fff !important; color:#000 !important; border:1px solid #666}
  .student .bubble{background:#fff !important; border:1px dashed #999}
  .bubble{max-width:100%; border-radius:3px}
  .summary, .memo, .voice, .paper-card, .lg-out{box-shadow:none !important; background:#fff !important; border:1px solid #999}
  .paper-card{transform:none !important; background-image:none !important}
  .paper-card .pl{color:#000}
  .paper-card .smudge{filter:none; opacity:1; text-decoration:underline dotted}
  .note{color:#000; border-left:2px solid #000; padding-left:10px}
  .note::before{display:none}
  section{padding-top:22px}
  .turn, .ln, .vrow, .ladder li, .lg, .chk{break-inside:avoid}
  h1,h2{break-after:avoid}
  a{text-decoration:none}
  footer{border-top:1px solid #999}
}

/* ---------- 히어로 일러스트 (D122) — 여백단에 펜 선화 선생님. 모바일에선 숨김 ---------- */
.hero-fig{display:none; margin:0}
@media (min-width:920px){
  /* 헤드라인 우측 여백 전체를 쓰는 절대배치 — 그리드 행(rail·kicker 동일 행) 밀림과 h1 열 겹침 회피 */
  .hero .track{position:relative}
  .hero-fig{display:block; position:absolute; right:20px; top:36px;
    width:clamp(320px, calc(24vw + 90px), 560px)}
  .hero-fig img{width:100%; height:auto; display:block}
}