/* Book Roasting — LAUNCH 테마 (단일 레이어, 정본)
   적용 순서: base.css → public.css | hub.css → app.css → launch.css. 구조는 앞 파일, 색·서체·크기·상태는 여기서만 정한다.
   회차별 패치 구역을 두지 않는다. 선택자는 이 파일에서 한 번씩만 선언한다(7회차 디자인 평가 RED 4).

   규칙
   - 색: 크림 종이, 잉크. 강조는 둘. 구리(#9C5A24) = 진행과 현재 위치, 틸 = 넣음(완료). 선택(지금 보는 것)은 잉크 채움.
         잠김과 빈 칸은 회색 점선. 경고는 색이 아니라 잉크 1px 윤곽과 반경 10. 9 Colors 역할색은 점·밑줄·2px 띠에만.
   - 서체: 제목은 모두 Noto Serif KR(큰 제목 500, 작은 제목 700). 본문과 UI는 Pretendard. 800 굵기는 쓰지 않는다.
   - 크기: --fs-d(히어로) / --fs-1(페이지) / --fs-2(섹션) / --fs-3(소제목) / --fs-lead 20 / --fs-body 17 / --fs-aux 14 / --fs-label 12.
   - 높이: 상태 칩 24 / 조작(알약, 탭, 작은 버튼) 36 / 주 버튼 48.
   - 모서리: 면 14, 조작·칩 999, 입력 10.
   - 현재·진행 표시는 한 번만: 테두리가 있는 면 = 구리 1px 윤곽, 테두리 없는 행(대시보드 단계 행, 레일) = 좌측 3px 구리 띠.
   - 띠: 상단 2px(카드 폭 전체, 모서리는 overflow가 자른다) = 역할색. 그 밖의 띠는 없다.
   - 완료 표시도 한 번만: '넣음' 칩(홈 카드 제목 뒤 ✓ 같은 이중 표시 없음). 알약·레일의 ✓는 칩이 없는 자리에만.
   - 번호(단계, 순번, 레일, D1~D5)는 산세리프 12/600 ink-3. 세리프 숫자는 제목 안에서만.
   - 간격: 카드 격자 --gap-card 20, 쌓인 목록 --gap-stack 12.
   - 라벨 자간은 .02em 한 값(한글·라틴 공통). 영문 틀 이름(.stage__fw 등 라틴 전용)만 .04em.
   - 필드 행 버튼은 입력 높이에 맞춘 44(Skill 결과 붙여넣기 줄). 이 한 곳이 48/36 밖의 예외다. */

:root {
  --paper: #FAF9F5;
  --paper-2: #F0EEE6;
  --paper-3: #E8E6DC;
  --sheet: #FFFFFF;
  --ink: #141413;
  --ink-2: #2B2A27;
  --ink-3: #5E5D59;
  --gray: #87867F;
  --rule: rgba(20, 20, 19, .10);
  --rule-2: rgba(20, 20, 19, .22);
  /* 진행·현재: 경고색(RED 역할)과 겹치지 않는 짙은 구리색. 크림 위 대비 5.1:1 */
  --rust: #9C5A24;
  --rust-soft: rgba(156, 90, 36, .10);
  --teal: #3E7D77;
  --teal-soft: rgba(62, 125, 119, .10);
  --amber-soft: #F4EBDD;
  --focus: var(--rust);

  --c-black: #141413;
  --c-red: #B5452F;
  --c-silver: #8A9199;
  --c-gold: #B8892A;
  --c-light: #CDBF95;
  --c-purple: #6A5A8C;
  --c-blue: #4A6F94;
  --c-green: #5B7F5E;
  --c-white: #FFFFFF;

  --serif: "Noto Serif KR", "Nanum Myeongjo", serif;
  --fs-d: clamp(32px, 5vw, 64px);
  --fs-1: clamp(30px, 4.2vw, 50px);
  --fs-2: clamp(26px, 2.6vw, 30px);
  --fs-3: 20px;
  --fs-lead: 20px;
  --fs-body: 17px;
  --fs-aux: 14px;
  --fs-label: 12px;
  --h-chip: 24px;
  --h-ctl: 36px;
  --r-card: 14px;
  --r-ctl: 999px;
  --r-field: 10px;
  --gap-card: 20px;
  --gap-stack: 12px;
  --shadow-sheet: none;
  --shadow-card: none;
  --radius: var(--r-card);
}

body { background: var(--paper); color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
[data-color="LIGHT"] { --role: #A8996B; }
[data-color="WHITE"] { --role: #B9B3A8; }
.muted { color: var(--ink-3); }

/* ================================================================
   1. 서체와 크기
   ================================================================ */
.vhero__title, .hero__title { font-size: var(--fs-d); }
.section__title, .start__title, .cardhead__title, .desk__title { font-size: var(--fs-1); line-height: 1.25; }
.cover__title, .next__title, .progress__head h2, .plandoc__head h2, .mp__title, .question__text, .stage__title,
.dsec__title .serif, .locked__title, .saved__msg, .hclose__title { font-size: var(--fs-2); line-height: 1.35; }
.q-text, .divider__ko, .dstep__ko, .rcard__title, .slip__title, .dsheet__title, .skill__name, .trow__title .serif { font-size: var(--fs-3); }

/* 큰 제목: 세리프 500 */
h1, .vhero__title, .hero__title, .section__title, .start__title, .cardhead__title, .desk__title, .cover__title,
.next__title, .progress__head h2, .plandoc__head h2, .mp__title, .question__text, .stage__title, .make__out,
.locked__title, .saved__msg, .reader__head h2, .hclose__title, .dsec__title .serif,
.anchor__ex, .ms, .ba__side .serif, .ex-one .serif, .mp__rule {
  font-family: var(--serif); font-weight: 500; letter-spacing: -.02em; text-shadow: none;
}
/* 작은 제목: 세리프 700 */
.q-text, .divider__ko, .dstep__ko, .anchor__title, .beliefs li, .trow__title .serif,
.slip__title, .dsheet__title, .skill__name, .rcard__title, .chcard__title, .start__list strong, .stack__item,
.loop-panel__round, .toc__part, .next__meta dd {
  font-family: var(--serif); font-weight: 700; letter-spacing: -.01em; text-shadow: none;
}
h2, h3 { text-shadow: none; }
h1, h2, .vhero__title, .section__title, .stage__title, .hclose__title { text-wrap: balance; }
.section__lead, .problem__answer, .vhero__lead, .cover__one, .next__today { text-wrap: pretty; }

.wordmark__text, .wordmark--sm { font-family: var(--serif); font-weight: 700; letter-spacing: -.01em; }
.wordmark__mark { color: currentColor; }
/* 한글 라벨은 자간을 벌리지 않는다 */
.eyebrow, .vhero__kicker, .blk__n, .next > .fw-label, .track__badge, .fgroup { letter-spacing: .02em; text-transform: none; }
.eyebrow { color: var(--ink-3); font-weight: 600; font-size: var(--fs-aux); }
.blk__n { color: var(--ink-3); font-weight: 600; }
.fw-label { color: var(--ink-3); font-weight: 700; letter-spacing: .02em; font-size: var(--fs-label); }
/* 번호: 산세리프 12/600 */
.q-num, .divider__num, .rail__dot, .dstep::before { font-family: var(--sans); font-size: var(--fs-label); font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
/* 영문 틀 이름(BOOK FLOW 같은)은 한 단계 낮춘다 */
.stage__fw, .trow__title .fw-label, .dsec__title .fw-label { font-size: var(--fs-label); letter-spacing: .04em; color: var(--gray); font-weight: 600; }

/* ================================================================
   2. 조작: 버튼(48), 알약·탭·작은 버튼(36), 링크
   ================================================================ */
.btn { background: var(--ink); color: var(--paper); border: 0; border-radius: var(--r-ctl); box-shadow: none; font-weight: 600; transform: none; }
.btn:hover { background: #2f2e2b; transform: none; }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule-2); }
.btn--ghost:hover { background: var(--paper-2); color: var(--ink); }
.btn--light { background: var(--paper); color: var(--ink); }
.btn--light:hover { background: #fff; }
.btn--line { background: transparent; color: var(--paper); border: 1px solid rgba(250, 249, 245, .45); }
.btn--line:hover { background: rgba(250, 249, 245, .1); }
.btn[aria-disabled="true"], .btn[disabled] { opacity: .45; }
.btn--sm, .rtab, .gbtn, .fchip, .sib {
  min-height: var(--h-ctl); height: var(--h-ctl); padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center;
  border-radius: var(--r-ctl); box-shadow: none; transform: none;
}
.rtab, .fchip, .sib, .gbtn { border: 1px solid var(--rule-2); background: transparent; }
.gbtn { padding-left: 14px; padding-right: 14px; font-size: var(--fs-aux); font-weight: 600; justify-content: center; color: var(--ink); }
.gbtn:hover { transform: none; background: var(--paper-2); }
.gbtn__num { background: transparent !important; color: var(--ink-3); padding: 0; font-weight: 600; font-size: var(--fs-label); }
.rtab .num { color: var(--gray); }
.link { text-decoration-color: var(--rule-2); }
.link:hover { color: var(--ink); text-decoration-color: var(--ink); }

/* ================================================================
   3. 상태 칩(24) 한 모양. 채움은 넣음(틸)·진행(구리) 둘, 나머지는 점선 윤곽
   기본 윤곽(.rchip)을 먼저 두고 상태 칩이 뒤에서 덮는다(같은 특이도)
   ================================================================ */
.rchip { background: transparent; color: var(--ink-3); border: 1px solid var(--rule-2); border-radius: var(--r-ctl); }
.rchip, .track__badge, .rcard__no, .stage__num {
  display: inline-flex; align-items: center; justify-content: center; height: var(--h-chip); padding: 0 9px; line-height: 1;
  font-size: var(--fs-label); white-space: nowrap;
}
.stamp, .ritem__tag, .rchip--done, .rchip--doing, .rchip--start, .stage__status {
  display: inline-flex; align-items: center; height: var(--h-chip); padding: 0 9px; border-radius: var(--r-ctl);
  font-family: var(--sans); font-size: var(--fs-label); font-weight: 600; letter-spacing: .02em; line-height: 1; border: 1px solid transparent;
  text-transform: none; transform: none; box-shadow: none; white-space: nowrap;
}
.stamp--ok, .rchip--done, .ritem.is-done .ritem__tag, .stage__status[data-status="COMPLETED"] { background: var(--teal-soft); color: var(--teal); }
.stamp--draft, .rchip--doing, .rchip--start, .ritem.is-current .ritem__tag, .stage__status[data-status="IN_PROGRESS"] { background: var(--rust-soft); color: var(--rust); }
.stamp--empty, .ritem.is-next .ritem__tag { background: transparent; color: var(--ink-3); border: 1px dashed var(--rule-2); }
.stage__status { background: var(--paper-2); color: var(--ink-3); }
.rchip--time::before, .rchip--out::before { content: none; }
.chip { color: var(--ink-2); }
.chip::before { box-shadow: inset 0 0 0 1px rgba(20, 20, 19, .2); }
.leader { border-bottom: 1px dotted var(--rule-2); }

/* ================================================================
   4. 면(카드)과 입력
   ================================================================ */
.sheet, .index-card, .rcard, .cover, .next, .progress, .plandoc, .preview, .skill, .skill-item, .saved, .loop-panel,
.start__aside, .questions li, .method__panel, .plan, .toc, .chcard, .anchor, .rms, .fb, .scores, .ba__side, .ex-one,
.readings li, .crow, .ritem, .check, .slip, .dsheet__in, .outs__row, .mybook-bar, .reader, .contract, .locked, .make,
.dstep, .stack__item, .loop li, .mp__outs li, .colors-row li, .verdict, .hero__card, .ms {
  background-color: var(--sheet); background-image: none; border: 1px solid var(--rule); border-radius: var(--r-card);
  box-shadow: none; transform: none;
}
.input { background: #fff; border: 1px solid var(--rule-2); border-radius: var(--r-field); box-shadow: none; }
.input:hover { border-color: var(--gray); }
.input:focus { border-color: var(--rust); box-shadow: 0 0 0 3px rgba(156, 90, 36, .16); }
.input--ms { background-color: #FFFEFB; font-family: var(--serif); }
select.input { border-radius: var(--r-field); }
/* 한 줄 답에는 큰 상자를 주지 않는다 */
textarea.input:not(.input--ms) { min-height: 3.4em; }

/* 경고: 색이 아니라 형태로 */
.warn { border: 1px solid var(--ink-2); border-radius: var(--r-field); background: var(--sheet); color: var(--ink); }

/* ================================================================
   5. 띠: 상단 2px = 역할색, 좌측 3px(안쪽) = 현재 위치
   ================================================================ */
.skill, .skill-item, .colors-row li, .loop-panel, .rcard, .outs__row, .ritem { position: relative; overflow: hidden; }
.skill::before, .skill-item::before, .colors-row li::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--role, var(--ink));
}
.skill--none { border: 1px solid var(--rule); background: var(--paper-2); }
.skill--none::before { display: none; }
.loop-panel { border-color: var(--rust); }
.trow[data-status="IN_PROGRESS"] .trow__main { box-shadow: inset 3px 0 0 var(--rust); }

/* ================================================================
   6. 선택(지금 보고 있는 것) = 잉크 채움. 완료 윤곽 = 틸, 잠김 = 점선
   ================================================================ */
.gbtn.is-active, .sib.is-here, .sib.is-here[data-status], .divider[aria-selected="true"], .rtab[aria-selected="true"], .fchip.is-on,
.dstep[aria-selected="true"], .toc__item[aria-selected="true"] {
  background: var(--ink); color: var(--paper); border-color: var(--ink); border-style: solid; box-shadow: none; transform: none; opacity: 1;
}
.gbtn.is-active .gbtn__num, .gbtn.is-active .gbtn__done, .sib.is-here .sib__id, .sib.is-here .sib__done, .divider[aria-selected="true"] .divider__num,
.divider[aria-selected="true"] .divider__fw, .rtab[aria-selected="true"] .num, .dstep[aria-selected="true"]::before,
.dstep[aria-selected="true"] .dstep__en, .dstep[aria-selected="true"] .dstep__desc, .fchip.is-on .chip { color: rgba(250, 249, 245, .72); }
.toc__item[aria-selected="true"] { border-radius: var(--r-card); }
.toc__item[aria-selected="true"] .muted { color: rgba(250, 249, 245, .6); }
.gbtn__done, .sib__done { color: var(--teal); margin-left: 4px; font-size: var(--fs-label); }
.sib[data-status="COMPLETED"]:not(.is-here), .gbtn[data-status="COMPLETED"]:not(.is-active) { border-color: rgba(62, 125, 119, .45); color: var(--ink); }
.sib[data-status="IN_PROGRESS"]:not(.is-here), .gbtn[data-status="IN_PROGRESS"]:not(.is-active) { border-color: rgba(156, 90, 36, .55); color: var(--ink); }
.sib[data-status="LOCKED"]:not(.is-here), .gbtn[data-status="LOCKED"]:not(.is-active) { border-style: dashed; color: var(--gray); }
.gbtn.is-active[data-status="LOCKED"], .sib.is-here[data-status="LOCKED"] { background: var(--sheet); color: var(--ink); border: 1px dashed var(--ink); }
.gbtn.is-active[data-status="LOCKED"] .gbtn__num, .sib.is-here[data-status="LOCKED"] .sib__id { color: var(--ink-3); }
.sib { font-size: var(--fs-label); }
@media (min-width: 1000px) { .sibs { flex-wrap: wrap; overflow: visible; } }
@media (max-width: 999px) { .sibs { padding-right: 24px; mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); } }

/* ================================================================
   7. 헤더, 배너, 푸터 (모든 페이지 한 틀)
   ================================================================ */
.site-header, .app-header { background: rgba(250, 249, 245, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
.site-header__inner, .app-header__in { min-height: 64px; }
.app-nav a, .site-nav a { color: var(--ink-3); }
.site-nav a:hover { color: var(--ink); }
.app-nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); border: 0; background: none; }
.sample-banner { background: var(--amber-soft); color: var(--ink-2); border-bottom: 1px solid var(--rule); }
.sample-banner .btn { background: var(--ink); color: var(--paper); }
.site-footer { padding: 36px 0 48px; border-top: 1px solid var(--rule); background: var(--paper); }
.site-footer__inner { display: grid; gap: 10px; }
.site-footer p { margin: 0; }
.site-footer a { color: inherit; }
@media (min-width: 720px) { .site-footer__inner { grid-template-columns: auto 1fr; gap: 40px; align-items: baseline; } .site-footer__inner p:last-child { text-align: right; } }

/* ================================================================
   8. 영상 히어로와 마무리 초대 (홈)
   ================================================================ */
.vhero { position: relative; min-height: min(100vh, 1100px); min-height: min(100svh, 1100px); display: flex; flex-direction: column; background: var(--ink); color: var(--paper); overflow: hidden; isolation: isolate; }
.vhero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .85; }
.vhero__shade { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 50%, rgba(20,20,19,.66) 0%, rgba(20,20,19,.74) 55%, rgba(20,20,19,.9) 100%); }
/* 맨 위 창틀 선과 맨 아래 경계를 가린다 */
.vhero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 110px; z-index: -1; background: linear-gradient(to bottom, rgba(20, 20, 19, .92), transparent); }
.vhero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; z-index: -1; background: linear-gradient(to bottom, transparent, rgba(20, 20, 19, .95)); }
.vhero.no-video .vhero__video { display: none; }
.vhero.no-video .vhero__shade {
  background: radial-gradient(40% 50% at 30% 35%, rgba(156, 90, 36, .28), transparent 70%),
    radial-gradient(45% 55% at 72% 62%, rgba(62, 125, 119, .22), transparent 70%),
    radial-gradient(ellipse at 50% 50%, #1d1c1a 0%, #141413 70%);
  background-size: 140% 140%, 140% 140%, 100% 100%;
  animation: drift 22s ease-in-out infinite alternate;
}
@keyframes drift { from { background-position: 0% 0%, 100% 100%, 0 0; } to { background-position: 60% 40%, 30% 60%, 0 0; } }
@media (prefers-reduced-motion: reduce) { .vhero.no-video .vhero__shade { animation: none; } }
.vhero__top { display: flex; justify-content: space-between; align-items: center; min-height: 64px; padding-top: 8px; }
.vhero__top .wordmark { color: var(--paper); text-decoration: none; }
.vhero__links { display: flex; gap: 22px; font-size: var(--fs-aux); }
.vhero__links a { color: rgba(250, 249, 245, .8); text-decoration: none; white-space: nowrap; }
.vhero__links a:hover { color: var(--paper); }
.vhero__body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 20px 64px; width: min(1040px, 100%); margin: 0 auto; }
.vhero__kicker { font-size: var(--fs-aux); color: rgba(250, 249, 245, .8); margin: 0 0 18px; }
.vhero__title { font-family: var(--serif); font-weight: 500; line-height: 1.18; letter-spacing: -.025em; margin: 0 0 20px; color: var(--paper); word-break: keep-all; }
.vhero__lead { font-size: var(--fs-lead); color: rgba(250, 249, 245, .84); max-width: 30em; margin: 0 0 16px; text-wrap: balance; }
@media (min-width: 720px) { .vhero__lead .nb { display: block; } }
.vhero__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 0; margin: 0 0 30px; padding: 6px 16px; border-radius: var(--r-ctl); font-size: var(--fs-aux); color: rgba(250, 249, 245, .82); background: rgba(20, 20, 19, .6); backdrop-filter: blur(10px); }
.vhero__meta span + span::before { content: "·"; margin: 0 10px; color: rgba(250, 249, 245, .4); }
@media (max-width: 720px) { .vhero__meta { flex-direction: column; gap: 2px; border-radius: var(--r-card); } .vhero__meta span + span::before { content: none; } }
.vhero__toc { list-style: none; margin: 0 0 32px; width: min(480px, 100%); display: grid; gap: 3px; padding: 14px 20px; border-radius: var(--r-card); background: rgba(20, 20, 19, .66); backdrop-filter: blur(12px); }
.vhero__toc a { display: grid; grid-template-columns: 3.6em auto 1fr auto; column-gap: 10px; align-items: baseline; text-decoration: none; color: var(--paper); font-family: var(--serif); font-size: var(--fs-body); font-variant-numeric: tabular-nums; }
.vhero__toc a:hover .vtoc__t { text-decoration: underline; text-underline-offset: 5px; }
.vtoc__n { font-family: var(--sans); font-size: var(--fs-aux); color: rgba(250, 249, 245, .85); white-space: nowrap; text-align: left; }
.vtoc__t { white-space: nowrap; }
.vtoc__dots { align-self: end; margin-bottom: .4em; border-bottom: 1px dotted rgba(250, 249, 245, .4); }
.vtoc__m { font-family: var(--sans); font-size: var(--fs-label); color: rgba(250, 249, 245, .6); white-space: nowrap; text-align: right; }
.vhero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.vhero .mybook-bar { margin: 26px auto 0; background: rgba(250, 249, 245, .1); border: 1px solid rgba(250, 249, 245, .22); color: var(--paper); backdrop-filter: blur(8px); text-align: left; }
.vhero .mybook-bar__k, .vhero .mybook-bar__s { color: rgba(250, 249, 245, .78); }
.vhero .mybook-bar .btn { background: var(--paper); color: var(--ink); }
/* 마무리 초대: 히어로와 짝을 이루는 어두운 띠 */
.hclose { background: var(--ink); color: var(--paper); padding: 88px 0 96px; text-align: center; }
.hclose__in { display: flex; flex-direction: column; align-items: center; }
.hclose__title { margin: 0 0 14px; color: var(--paper); }
.hclose__lead { margin: 0 0 30px; color: rgba(250, 249, 245, .78); font-size: var(--fs-body); max-width: 36em; text-wrap: balance; }

/* ================================================================
   9. 스크롤 후 나타나는 여섯 단계 메뉴와 단계 카드 (홈)
   ================================================================ */
.gnav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 10px 0; background: rgba(250, 249, 245, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); transform: translateY(-110%); opacity: 0; transition: transform .28s ease, opacity .28s ease; box-shadow: none; }
.gnav.is-visible { transform: none; opacity: 1; }
.gnav .gbtn.is-active { background: var(--sheet); color: var(--ink); border: 1.5px solid var(--ink); }
.gnav .gbtn.is-active .gbtn__num { color: var(--ink-3); }
.gnav__cta { margin-left: 8px; }
.hub, .app { --st-prep: var(--ink-3); --st-team: var(--ink-3); --st-concept: var(--ink-3); --st-structure: var(--ink-3); --st-draft: var(--ink-3); --st-roasting: var(--ink-3); }
.stages { padding-top: 56px; }
.stage { padding: 56px 0 24px; border-top: 1px solid var(--rule); scroll-margin-top: 72px; }
.stage:first-child { border-top: 0; }
.stage__head { align-items: baseline; }
.stage__num { background: transparent !important; color: var(--ink-3); border: 1px solid var(--rule-2); border-radius: var(--r-ctl); font-weight: 600; }
.track__badge { background: var(--paper-2); border: 0; border-radius: var(--r-ctl); color: var(--ink-2); }
.rcards, .anchors__row, .questions, .skill-list, .sheets, .recent__list { gap: var(--gap-card); }
.rcard:hover { border-color: var(--rule-2); transform: none; }
.rcard[data-status="IN_PROGRESS"], .rcard.is-start { border-color: var(--rust); }
.rcard__icon { display: none; }
.rcard__row { grid-template-columns: 1fr auto; }
.rcard__no { border: 1px solid var(--rule-2); color: var(--ink-3); background: transparent; border-radius: var(--r-ctl); min-width: 3.2em; text-align: center; }
.rcard__desc { -webkit-line-clamp: 4; }
.stage__time { font-size: var(--fs-aux); color: var(--ink-3); }
/* 카드 폭은 1/3 열 한 체계. 제목 두 줄 높이를 잡아 칩 기준선을 맞춘다 */
@media (min-width: 1040px) { .rcard__row { min-height: calc(var(--fs-3) * 1.4 * 2); align-items: start; } .rcard__title { line-height: 1.4; } }

/* ================================================================
   10. 소개 페이지
   ================================================================ */
.section { border-top: 1px solid var(--rule); }
.questions li { background: var(--sheet); min-height: 0; padding: 18px 22px; }
.divider { border-radius: var(--r-card); margin: 0; background: var(--sheet); border: 1px solid var(--rule); }
.dividers { gap: 8px; }
.method__panel { margin-top: 12px; }
.mp__rule, .ex-note, .hero__note { border-left: 0; padding-left: 0; }
.ex-note, .hero__note { color: var(--ink-2); }
.mp__outs li { background: var(--paper); }
.mp__outs li::before { content: "·"; color: var(--gray); }
.plan__head, .chcard__head { border-bottom: 1px solid var(--ink); }
.plan__progress { font-family: var(--serif); }
.js .plan__row:not(.is-filled) { background-image: none; min-height: 44px; }
.anchor--main { box-shadow: none; }
@media (min-width: 860px) { .anchors__row { align-items: stretch; } }
.hero-ins, .rms .ins { border-left: 0; padding-left: 0; font-size: inherit; text-decoration: underline; text-decoration-color: var(--role); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.mat { border-radius: var(--r-ctl); }
.scores thead th { border-bottom: 1px solid var(--rule-2); }
.scores td { border-bottom: 1px solid var(--rule); }
.scores .miss { color: var(--rust); }
.verdict { border-style: dashed; background: transparent; }
.loop li:last-child { border-style: dashed; }
.stack__item { margin: 0 0 8px !important; }
.hero__card { position: relative; right: auto; bottom: auto; margin: 12px 0 0 auto; transform: none; }
.problem .section__head { max-width: 900px; }
.beliefs { margin: 0; border-top: 1px solid var(--rule-2); }
.beliefs li { border-bottom: 1px solid var(--rule); color: var(--ink); }
.beliefs .num { color: var(--ink-3); font-weight: 600; }

/* ================================================================
   11. 작업실: 대시보드
   ================================================================ */
@media (min-width: 960px) { .dash__top { grid-template-columns: 1.15fr 1fr; align-items: stretch; } }
.dash__top .next { order: -1; }
.next, .cover { padding: 32px 32px 28px; }
.next { border-color: var(--rust); }
.next > .fw-label, .cover > .fw-label { position: static; margin: 0 0 14px; }
.next > .fw-label { color: var(--rust); }
.next__today { margin: 4px 0 14px; padding: 12px 14px; border-radius: var(--r-field); background: var(--rust-soft); color: var(--ink); font-size: var(--fs-aux); line-height: 1.6; }
.next__today strong { color: var(--rust); margin-right: 6px; }
.cover { border-left: 1px solid var(--rule); }
.cover__title { margin-top: 0; }
.cover__one { border-left: 0; padding-left: 0; color: var(--ink-2); }
.cover { display: flex; flex-direction: column; gap: 6px; }
.cover__one { margin-bottom: 0; }
.cover__stage { margin: 20px 0 24px; padding-top: 14px; border-top: 1px dashed var(--rule-2); color: var(--ink-3); }
.cover__foot { margin-top: auto; }
.pile__sheets { width: 28px; height: calc(4px + min(var(--n), 8) * 3px); border: 1px solid var(--rule-2); background: repeating-linear-gradient(to top, var(--sheet) 0, var(--sheet) 2px, var(--rule-2) 2px, var(--rule-2) 3px); }
.progress__head { border-bottom: 1px solid var(--ink); }
.trow__num { color: var(--ink-3); font-weight: 600; }
.trow[data-status="IN_PROGRESS"] .trow__status strong { color: var(--rust); }
.trow[data-status="COMPLETED"] .trow__status strong { color: var(--teal); }
.trow[data-status="LOCKED"] .trow__title, .trow[data-status="LOCKED"] .trow__status strong { color: var(--gray); }
.trow[data-status="LOCKED"] .trow__status { align-self: center; }
.outs__row { background: var(--sheet); }
a.outs__row:hover { border-color: var(--rule-2); background: var(--sheet); }
.outs li[data-status="IN_PROGRESS"] .outs__row { border-color: var(--rust); }
.outs li[data-status="LOCKED"] .outs__row { border-style: dashed; background: transparent; opacity: .75; }
.slip__meta { display: flex; gap: 8px; align-items: center; }

/* ================================================================
   12. 작업실: 카드 화면
   ================================================================ */
.cardhead { border-bottom: 1px solid var(--rule); }
.cardhead__locked { margin: 14px 0 0; }
.make { padding-top: 26px; }
.make .blk__n { position: static; margin-bottom: 8px; }
.question__text { border-left: 0; padding-left: 0; }
/* 원리 번호는 레일 번호 원과 다른 모양(작은 숫자) */
.principles li { padding-left: 28px; }
.principles li::before { content: counter(p) "."; width: auto; height: auto; border: 0; border-radius: 0; background: none; display: block; top: 0; font-family: var(--sans); font-size: var(--fs-aux); font-weight: 600; color: var(--ink-3); }
/* 사례: Before는 종이 채움, After는 흰 면. 차이는 면으로만(잉크 윤곽은 경고 전용) */
@media (min-width: 760px) { .ba { grid-template-columns: 5fr 32px 7fr; } }
.ba { align-items: start; }
.ba__side:first-child { background: var(--paper-2); }
.ba__side--after { border-color: var(--rule-2); background: var(--sheet); }
.ex-dl { display: grid; grid-template-columns: 6.5em 1fr; gap: 6px 12px; margin: 0; }
.ex-dl dt { font-family: var(--sans); font-size: var(--fs-label); font-weight: 600; color: var(--ink-3); letter-spacing: .02em; padding-top: 4px; }
.ex-dl dd { margin: 0; line-height: 1.7; text-wrap: pretty; }
.work-divider { display: flex; align-items: center; gap: 14px; margin: 8px 0 36px; color: var(--ink-3); font-size: var(--fs-label); font-weight: 600; letter-spacing: .02em; }
.work-divider::before, .work-divider::after { content: ""; flex: 1; border-top: 1px solid var(--rule-2); }
/* 레일: 넣은 칸 = 틸 채움, 현재 = 구리 링. 끝낸 칸이 현재이거나 잠긴 카드면 잉크 링 */
.rail__dot { border: 1px solid var(--rule-2); background: var(--sheet); }
.rail a.is-partial .rail__dot { border-color: var(--rust); color: var(--rust); }
.rail a.is-done .rail__dot { background: var(--teal); border-color: var(--teal); color: #fff; }
.rail a.is-here { color: var(--ink); font-weight: 700; background: none; }
.rail a.is-here .rail__dot { box-shadow: 0 0 0 2px var(--rust); }
.rail a.is-here.is-done .rail__dot, .cardpage.is-locked .rail a.is-here .rail__dot { box-shadow: 0 0 0 2px var(--ink); }
@media (min-width: 1000px) { .rail a.is-here { border-left-color: var(--rust); } .cardpage.is-locked .rail a.is-here { border-left-color: var(--ink); } }

/* 장 행: 제목 · 상태 · 펼치기 세 열 고정 */
.ritem.is-current { border-color: var(--rust); }
.ritem.is-collapsed { padding-top: 12px; padding-bottom: 12px; }
.ritem.is-collapsed .ritem__grid, .ritem.is-collapsed .ritem__foot { display: none; }
.ritem.is-collapsed .ritem__head { margin-bottom: 0; }
.ritem__head { justify-content: flex-start; gap: 16px; align-items: baseline; }
.ritem__head--grid { display: grid; grid-template-columns: minmax(0, 1fr) auto 3.5em; column-gap: 12px; align-items: center; }
.ritem__head--grid .ritem__tag { justify-self: end; }
.ritem__head .ritem__toggle { justify-self: end; margin-left: auto; font-size: var(--fs-label); }
.ritem.is-done { border-left: 1px solid var(--rule); }
.ritem.is-done .ritem__tag { border-color: transparent; }
.ritem__n { font-size: var(--fs-label); color: var(--ink-3); font-weight: 600; letter-spacing: .02em; }
.ritem__t { font-family: var(--serif); font-weight: 500; font-size: var(--fs-body); color: var(--ink); line-height: 1.4; font-variant-numeric: tabular-nums; }
.ritem__foot { display: flex; justify-content: flex-end; margin-top: 10px; }
.ritem__foot .ritem__del { font-size: var(--fs-label); color: var(--ink-3); text-decoration: none; }
.ritem__foot .ritem__del:hover { color: var(--c-red); text-decoration: underline; }

/* Skill: 두 열의 첫 줄을 맞춘다 */
.skill__mode { margin-left: auto; }
.skill__how { align-content: start; gap: 8px; margin-top: 6px; }
.skill__prompt pre { border-radius: var(--r-field); background: var(--paper); }
.skill-form { border-top: 1px dashed var(--rule-2); }
.skill-form .btn, .skill-form .input { min-height: 44px; }
.skill-more > summary { cursor: pointer; font-size: var(--fs-aux); font-weight: 600; color: var(--ink-3); margin-top: 12px; }
.badge { border-color: var(--rule-2); background: transparent; }
.contract { max-width: none; }

/* 검토: 조판 미리보기와 따라오는 체크리스트 */
.review { align-items: start; }
.preview { max-height: none; overflow: visible; }
.preview__head { border-bottom: 1px solid var(--rule); }
@media (min-width: 900px) { .checks { position: sticky; top: 88px; align-self: start; } }
.pv { padding: 10px 0 12px; border-bottom: 1px solid var(--rule); }
.pv:last-child { border-bottom: 0; }
.pv__k, .pv-item__row span:first-child { font-family: var(--sans); font-size: var(--fs-label); font-weight: 600; color: var(--ink-3); letter-spacing: .02em; }
.pv__k { margin-bottom: 4px; }
.pv__v { font-family: var(--serif); font-size: var(--fs-body); line-height: 1.85; color: var(--ink); max-width: 36em; }
.pv__v p { margin: 0 0 .6em; }
.pv__v p + p { text-indent: 1em; }
.pv-item { padding: 8px 0 10px; border-top: 1px dashed var(--rule); }
.pv-item:first-child { border-top: 0; padding-top: 2px; }
.pv-item__t { font-family: var(--serif); font-weight: 700; font-size: var(--fs-body); margin-bottom: 2px; }
.pv-item__row { display: grid; grid-template-columns: 6.5em 1fr; gap: 8px; font-family: var(--serif); font-size: var(--fs-aux); line-height: 1.7; }
.pv-item__row span:first-child { padding-top: 2px; }
.pv-done { list-style: none; margin: 4px 0 10px; padding: 0; display: grid; gap: 6px; }
.pv-done li, .pv-later { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: var(--fs-aux); color: var(--ink-2); }
.pv-done li .stamp, .pv-later .stamp { flex: none; }
.pv-later { margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed var(--rule); color: var(--ink-3); }
.check:has(input:checked) { border-color: var(--teal); background: var(--sheet); }
.check input { accent-color: var(--teal); }
/* 넣은 카드의 확인 표시는 죽은 컨트롤이 아니라 틸 체크 */
.check input:checked:disabled {
  appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border-radius: 4px; margin-top: 3px;
  background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3l2.3 2.2 4.7-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* 저장: 진행 문장 → 버튼 → 조건 문장을 붙여서 */
.approve { gap: 8px; }
.approve__progress { margin: 0; font-size: var(--fs-aux); color: var(--ink-2); }
.approve__hint { margin: 0; font-size: var(--fs-aux); color: var(--ink-2); }
.approve .btn[aria-disabled="true"] { opacity: .6; background: transparent; color: var(--ink-3); border: 1px solid var(--rule-2); }
.saved { border-color: var(--teal); background: #fff; }
.locked { border-style: dashed; background: transparent; }

/* ================================================================
   13. 작업실: 편집 데스크, 읽기 창
   ================================================================ */
.desk__head, .plandoc__head { border-bottom: 1px solid var(--ink); }
.plandoc { max-width: none; }
.pgroup__k { color: var(--ink-3); }
.dsheet__in { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.dsheet__date { margin-top: auto; padding-top: 4px; }
.dsheet--draft .dsheet__in, .dsheet--dirty .dsheet__in { border-color: var(--rust); }
.dsheet--empty .dsheet__in { border: 1px dashed var(--rule-2); background: transparent; min-height: 120px; }
.dsheet--ms .dsheet__in:not(.dsheet--empty .dsheet__in) { background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 27px, rgba(20, 20, 19, .05) 27px, rgba(20, 20, 19, .05) 28px); }
.dsheet__lab { font-size: var(--fs-label); font-weight: 600; color: var(--ink-3); letter-spacing: .02em; }
.dsheet__excerpt { -webkit-line-clamp: 3; align-self: stretch; }
.reader { background: var(--paper); }
.reader__head { border-bottom: 1px solid var(--rule); }