/* HD.LAB 소개·판매 페이지(웹 루트의 *.html) 공통 스타일. tokens.css 다음에 불러온다.
   기준: docs(whiteboard 리포) 기획안-디자인개편-보안.md §2 — 덜어내고, 브랜드 색에서 출발한다.
   - 밝은 바탕 + 단색 면. 그라데이션·발광·흐림(blur)·떠오르는 카드·스크롤 등장 효과는 쓰지 않는다.
   - (2026-11 담백한 화면: 색·모서리는 tokens.css, 페이지 고유 부품은 파일 끝 구역.)
   - 페이지마다 제품 색은 body의 --accent 하나로만 바꾼다(아래 .p-* 클래스). */

/* ── 제품별 강조색 — 흰 글자가 4.5:1 이상 나오는 톤으로 맞췄다 ── */
.p-hdlab     { --accent: #2A2622; --accent-ink: #2A2622; --accent-soft: #F1EDE6; }
.p-board     { --accent: var(--board-900); --accent-ink: var(--board-900); --accent-soft: var(--board-50); }
/* 수업지기 — 상표 등록된 로고(딥바이올렛 방패)의 보라에서 뽑았다. 칠판지기(초록)와 구분된다.
   tokens.css에 --sj-*가 들어오기 전에도 깨지지 않게 값을 함께 적어 둔다. */
.p-sueobjigi { --accent: var(--sj-600, #6A57E0); --accent-ink: var(--sj-700, #5443C4); --accent-soft: var(--sj-50, #EFEDFD); }
.p-phonejigi { --accent: #0A8574; --accent-ink: #0A7363; --accent-soft: #E3F4F0; }
.p-odapjigi  { --accent: #B04F2F; --accent-ink: #A2472A; --accent-soft: #FBEDE6; }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-size: var(--fs-15);
  line-height: 1.65;
  color: var(--ink-900);
  background: var(--chalk-50);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
a { color: inherit; text-decoration: none; }
b, strong { font-weight: 700; }
img { max-width: 100%; }
.num { font-variant-numeric: tabular-nums; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 560px) { .wrap { padding: 0 18px; } }

/* ── 아이콘(스프라이트) — <svg class="i"><use href="/assets/ui/icons.svg#i-pen"/></svg> ── */
.i {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -4px;
}
.i-sm { width: 16px; height: 16px; vertical-align: -3px; }
.i-lg { width: 24px; height: 24px; }

/* ── 머리글 — 흐림 효과 없이 단색 ── */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--chalk-0);
  border-bottom: 1px solid var(--chalk-200);
}
.site-header .bar { display: flex; align-items: center; gap: 28px; height: 64px; }
.site-brand { display: flex; align-items: center; gap: 10px; font-size: var(--fs-17); font-weight: 700; color: var(--ink-900); }
.site-brand img { width: 30px; height: 30px; }
.site-brand small { font-size: var(--fs-13); font-weight: 500; color: var(--ink-600); }
.site-nav { display: flex; gap: 22px; margin-left: auto; font-size: var(--fs-15); font-weight: 500; color: var(--ink-600); }
.site-nav a { white-space: nowrap; padding: 6px 0; border-bottom: 2px solid transparent; }
.site-nav a:hover { color: var(--ink-900); }
.site-nav a[aria-current="page"] { color: var(--ink-900); border-bottom-color: var(--accent); }
.site-header .btn { flex: none; }
@media (max-width: 900px) { .site-nav { gap: 16px; font-size: var(--fs-13); } }
@media (max-width: 760px) { .site-nav { display: none; } .site-header .btn { margin-left: auto; } }

/* ── 버튼 ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border: 1px solid transparent; border-radius: var(--r-md);
  font: inherit; font-size: var(--fs-15); font-weight: 600; line-height: 1;
  background: var(--accent); color: #fff;
  cursor: pointer; white-space: nowrap;
  transition: background-color .12s, border-color .12s;
}
.btn:hover { filter: brightness(1.12); }
.btn:active { filter: brightness(.92); }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: var(--fs-13); border-radius: var(--r-sm); }
.btn-lg { min-height: 52px; padding: 0 22px; font-size: var(--fs-17); }
.btn-secondary { background: var(--chalk-0); color: var(--ink-900); border-color: var(--chalk-300); }
.btn-secondary:hover { filter: none; background: var(--chalk-100); }
.btn-block { width: 100%; }
.link-arrow { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--accent-ink); }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 3px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── 첫 화면 — 가운데 정렬·거대한 제목 대신 왼쪽 정렬로 읽히게 ── */
.hero { padding: 64px 0 56px; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 36px; } }
.hero .kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: var(--fs-15); font-weight: 600; color: var(--ink-600); }
.hero .kicker img { width: 40px; height: 40px; }
.hero h1 {
  font-size: clamp(30px, 4.2vw, 44px); line-height: 1.28; font-weight: 700; letter-spacing: -.02em;
  margin-bottom: 18px;
}
.hero .lead { font-size: var(--fs-17); color: var(--ink-600); max-width: 34em; margin-bottom: 28px; }
.hero .fine { margin-top: 14px; font-size: var(--fs-13); color: var(--ink-600); }

/* ── 구역 ── */
.section { padding: 64px 0; border-top: 1px solid var(--chalk-200); }
.section-head { max-width: 640px; margin-bottom: 36px; }
.section-head h2 { font-size: clamp(24px, 3vw, 30px); line-height: 1.35; font-weight: 700; letter-spacing: -.01em; }
.section-head p { margin-top: 10px; font-size: var(--fs-17); color: var(--ink-600); }
.label { display: block; margin-bottom: 8px; font-size: var(--fs-13); font-weight: 600; color: var(--accent-ink); }

/* ── 면(판넬) — 카드 안에 카드를 넣지 않는다 ── */
.panel { background: var(--chalk-0); border: 1px solid var(--chalk-200); border-radius: var(--r-md); padding: 24px; }
.panel + .panel { margin-top: 16px; }

/* ── 기능 목록 — 아이콘 + 제목 + 설명. 칸마다 색을 칠하지 않는다 ── */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 36px; }
.features.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .features, .features.two { grid-template-columns: 1fr; gap: 26px; } }
.feature { padding-top: 18px; border-top: 1px solid var(--chalk-200); }
.feature .i { width: 24px; height: 24px; color: var(--accent-ink); margin-bottom: 12px; display: block; }
.feature h3 { font-size: var(--fs-17); font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.feature p { font-size: var(--fs-15); color: var(--ink-600); }
.feature ul { list-style: none; margin-top: 8px; }
.feature li { position: relative; padding-left: 16px; font-size: var(--fs-15); color: var(--ink-600); }
.feature li + li { margin-top: 4px; }
.feature li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-400); }

/* 짧은 표시(새 기능·조건) — 알약은 칩에만 */
.chip {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
  border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink);
  font-size: var(--fs-12); font-weight: 600; white-space: nowrap;
}
.chip.muted { background: var(--chalk-100); color: var(--ink-600); }

/* ── 단계(1·2·3) — 큰 원 숫자 대신 글자 ── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; counter-reset: step; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; gap: 22px; } }
.step { padding-top: 16px; border-top: 2px solid var(--ink-900); counter-increment: step; }
.step::before { content: counter(step); display: block; font-size: var(--fs-13); font-weight: 700; color: var(--ink-600); margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.step h3 { font-size: var(--fs-17); font-weight: 700; margin-bottom: 6px; }
.step p { color: var(--ink-600); }

/* ── 제품 줄(HD.LAB 첫 화면) ── */
.products { border-top: 1px solid var(--chalk-200); }
.product {
  display: grid; grid-template-columns: 72px 1fr auto; gap: 24px; align-items: start;
  padding: 28px 0; border-bottom: 1px solid var(--chalk-200); position: relative;
}
@media (max-width: 760px) { .product { grid-template-columns: 56px 1fr; } .product .side { grid-column: 1 / -1; } }
.product > img { width: 72px; height: 72px; }
@media (max-width: 760px) { .product > img { width: 56px; height: 56px; } }
.product .cat { font-size: var(--fs-13); font-weight: 600; color: var(--ink-600); }
.product h3 { font-size: var(--fs-24); font-weight: 700; margin: 2px 0 6px; letter-spacing: -.01em; }
.product p { color: var(--ink-600); max-width: 40em; }
.product .facts { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.product .side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; min-width: 180px; }
@media (max-width: 760px) { .product .side { flex-direction: row; align-items: center; flex-wrap: wrap; min-width: 0; } }
.product .status { font-size: var(--fs-13); color: var(--ink-600); }
.product .status b { color: var(--ink-900); }

/* 공유 — 아이콘 버튼 + 작은 메뉴 */
.share { position: relative; }
.share-btn {
  display: inline-grid; place-items: center; width: 36px; height: 36px;
  border: 1px solid var(--chalk-300); border-radius: var(--r-sm); background: var(--chalk-0); color: var(--ink-600); cursor: pointer;
}
.share-btn:hover { color: var(--ink-900); background: var(--chalk-100); }
.share-pop {
  position: absolute; top: 42px; right: 0; z-index: 20; min-width: 180px; padding: 6px;
  display: none; flex-direction: column;
  background: var(--chalk-0); border: 1px solid var(--chalk-200); border-radius: var(--r-md); box-shadow: var(--shadow-float);
}
.share-pop.open { display: flex; }
.share-pop button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px;
  border: none; background: none; border-radius: var(--r-sm);
  font: inherit; font-size: var(--fs-15); color: var(--ink-900); text-align: left; cursor: pointer;
}
.share-pop button:hover { background: var(--chalk-100); }
.share-pop .i { color: var(--ink-600); }

/* ── 요금 ── */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.plans.two { grid-template-columns: repeat(2, minmax(0, 420px)); }
@media (max-width: 900px) { .plans, .plans.two { grid-template-columns: 1fr; } }
.plan { display: flex; flex-direction: column; background: var(--chalk-0); border: 1px solid var(--chalk-200); border-radius: var(--r-md); padding: 26px 24px; }
.plan.recommended { border: 2px solid var(--accent); padding: 25px 23px; }
.plan .plan-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.plan h3 { font-size: var(--fs-17); font-weight: 700; }
.plan h3 small { font-size: var(--fs-13); font-weight: 500; color: var(--ink-600); margin-left: 4px; }
.plan .amount { margin: 14px 0 2px; font-size: var(--fs-30); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.plan .amount small { font-size: var(--fs-15); font-weight: 500; color: var(--ink-600); margin-left: 2px; }
.plan .per { font-size: var(--fs-13); color: var(--ink-600); margin-bottom: 16px; }
.plan ul { list-style: none; flex: 1; border-top: 1px solid var(--chalk-200); }
.plan li { padding: 9px 0; border-bottom: 1px solid var(--chalk-200); font-size: var(--fs-15); color: var(--ink-600); }
.plan li b { color: var(--ink-900); }
.plan li.off { color: var(--ink-600); }
.plan li.off::before { content: "\BBF8 \D3EC \D568"; font-size: var(--fs-12); font-weight: 700; color: var(--ink-600); }
.plan li .sub { display: block; margin-top: 2px; font-size: var(--fs-13); color: var(--ink-600); }
.plan .btn { margin-top: 20px; }
.price-note { margin-top: 18px; font-size: var(--fs-13); color: var(--ink-600); }

/* ── 표 ── */
.table-wrap { overflow-x: auto; background: var(--chalk-0); border: 1px solid var(--chalk-200); border-radius: var(--r-md); }
table.t { width: 100%; border-collapse: collapse; font-size: var(--fs-15); }
.t th, .t td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--chalk-200); vertical-align: middle; }
.t thead th { font-size: var(--fs-13); font-weight: 600; color: var(--ink-600); background: var(--chalk-100); }
.t tbody tr:last-child td { border-bottom: none; }
.t .price { font-size: var(--fs-17); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.t .muted { color: var(--ink-600); font-size: var(--fs-13); }
.t .yes { color: var(--green-600); font-weight: 600; }
.t .part { color: #8A5D0B; font-weight: 600; } /* amber-600은 흰 바탕 글자 대비가 모자라 한 톤 진하게 */
.t .no { color: var(--red-600); font-weight: 600; }

/* ── 자주 묻는 질문 ── */
.faq { max-width: 760px; border-top: 1px solid var(--chalk-200); }
.faq details { border-bottom: 1px solid var(--chalk-200); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0; list-style: none; cursor: pointer;
  font-size: var(--fs-17); font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-right: 4px;
  border-right: 1.75px solid var(--ink-400); border-bottom: 1.75px solid var(--ink-400);
  transform: rotate(45deg) translateY(-3px); transition: transform .15s;
}
.faq details[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.faq details > div, .faq details > p { padding: 0 0 20px; color: var(--ink-600); max-width: 680px; }

/* ── 문의 ── */
.contact { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.contact h2 { font-size: var(--fs-24); font-weight: 700; }
.contact p { margin-top: 6px; color: var(--ink-600); }
.contact .mail { font-size: var(--fs-20); font-weight: 700; color: var(--accent-ink); }
.contact .mail:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ── 바닥글 — 사업자 정보(토스 심사 요건)는 모든 판매 페이지에 그대로 둔다 ── */
.site-footer { margin-top: 24px; padding: 40px 0 48px; background: var(--chalk-100); border-top: 1px solid var(--chalk-200); font-size: var(--fs-13); color: var(--ink-600); }
.foot-cols { display: flex; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.foot-cols h4 { font-size: var(--fs-13); font-weight: 700; color: var(--ink-900); margin-bottom: 10px; }
.foot-cols a { display: block; margin: 6px 0; }
.foot-cols a:hover { color: var(--ink-900); text-decoration: underline; text-underline-offset: 3px; }
.biz { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--chalk-200); line-height: 1.9; }
.biz b, .biz a { color: var(--ink-900); }
.copyright { margin-top: 12px; color: var(--ink-600); }

/* ── 화면 그림(실제 캡처로 바꿀 때까지 쓰는 단순한 그림) ── */
.device {
  background: var(--chalk-0); border: 1px solid var(--chalk-200); border-radius: var(--r-lg);
  padding: 10px; box-shadow: var(--shadow-float);
}
/* 실제 앱 캡처 — 휴대폰 화면 비율 그대로, 틀만 두른다(assets/shots/) */
.shot-phone { max-width: 340px; margin: 0 auto; border-radius: 28px; }
.shot-phone img { display: block; width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--chalk-200); }
.shot-phone figcaption { margin-top: 8px; text-align: center; font-size: var(--fs-12); color: var(--ink-600); }
/* 앱 화면의 한 부분(카드) — 두 장을 나란히, 좁으면 한 줄에 하나 */
.shots-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 36px; max-width: 820px; }
@media (max-width: 640px) { .shots-row { grid-template-columns: 1fr; } }
.shot-card img { display: block; width: 100%; height: auto; border-radius: var(--r-md); }
.shot-card figcaption { margin-top: 8px; font-size: var(--fs-13); color: var(--ink-600); }
.screen-app { border-radius: var(--r-md); background: var(--chalk-50); border: 1px solid var(--chalk-200); padding: 16px; display: grid; gap: 10px; }
.screen-app .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: var(--chalk-0); border: 1px solid var(--chalk-200); border-radius: var(--r-sm); font-size: var(--fs-13); }
.screen-app .row .k { color: var(--ink-600); }
.screen-app .big { font-size: var(--fs-30); font-weight: 700; letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.meter { height: 6px; border-radius: 3px; background: var(--chalk-200); overflow: hidden; margin-top: 6px; }
.meter i { display: block; height: 100%; background: var(--accent); }
.meter.warn i { background: var(--red-600); }

/* ── 알림(링크 복사 등) ── */
.toast {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%); z-index: 100;
  padding: 11px 16px; border-radius: var(--r-md);
  background: var(--ink-900); color: var(--chalk-0); font-size: var(--fs-15);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.toast.show { opacity: 1; }

/* ── 입력(요금 계산기·출시 알림) ── */
.field { display: block; font-size: var(--fs-13); font-weight: 600; color: var(--ink-600); }
.input {
  display: block; width: 100%; height: 46px; margin-top: 6px; padding: 0 12px;
  border: 1px solid var(--chalk-300); border-radius: var(--r-sm); background: var(--chalk-0); color: var(--ink-900);
  font: inherit; font-size: 16px; font-weight: 600;
}
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input:disabled { background: var(--chalk-100); color: var(--ink-400); }
.segmented { display: inline-flex; padding: 3px; gap: 3px; border-radius: var(--r-md); background: var(--chalk-100); border: 1px solid var(--chalk-200); }
.segmented button {
  min-height: 36px; padding: 0 14px; border: none; border-radius: var(--r-sm); background: none;
  font: inherit; font-size: var(--fs-15); font-weight: 600; color: var(--ink-600); cursor: pointer;
}
.segmented button[aria-pressed="true"] { background: var(--chalk-0); color: var(--ink-900); box-shadow: 0 1px 2px rgba(16, 34, 28, .08); }

/* ── 결제 결과 카드(결제 완료·실패 페이지) ── */
.result-page { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.result {
  width: 100%; max-width: 440px; padding: 32px 28px; text-align: center;
  background: var(--chalk-0); border: 1px solid var(--chalk-200); border-radius: var(--r-lg);
}
.result .brand-line { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 24px; font-size: var(--fs-13); font-weight: 700; color: var(--ink-600); }
.result .mark { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--chalk-100); color: var(--ink-600); }
.result .mark .i { width: 24px; height: 24px; }
.result[data-state="ok"] .mark { color: var(--green-600); }
.result[data-state="err"] .mark { color: var(--red-600); }
.result h1 { margin: 16px 0 8px; font-size: var(--fs-20); font-weight: 700; }
.result p { color: var(--ink-600); font-size: var(--fs-15); }
.result .err { color: var(--red-600); font-weight: 700; }
.result .detail {
  margin: 20px 0 0; padding: 14px 16px; text-align: left; font-size: var(--fs-13); line-height: 1.9;
  background: var(--chalk-50); border: 1px solid var(--chalk-200); border-radius: var(--r-md);
}
.result .detail b { color: var(--ink-900); font-variant-numeric: tabular-nums; }
.result code { padding: 1px 6px; border-radius: var(--r-sm); background: var(--chalk-100); font-size: var(--fs-13); overflow-wrap: anywhere; }
.result .btn { margin-top: 24px; }
.result .help { margin-top: 16px; font-size: var(--fs-13); }
.result .help a { color: var(--ink-900); text-decoration: underline; text-underline-offset: 3px; }

/* 접근성 — 키보드 초점 */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ════════════════════════════════════════════════════════════════════
   담백한 화면(2026-11) — 위 기본 규칙을 그대로 쓰고, 필요한 것만 뒤에서 맞춘다.
   (2026-10 '출석부' 덮어쓰기 구역을 걷어 냈다: 종이 바탕·명조·손글씨·기울임·점선 영수증·겹친 그림자 없음)
   - 제품마다 색을 달리하지 않는다. 주 버튼·링크는 파랑 하나(tokens.css --accent).
   - 아이콘은 혼자 서지 않는다(기능 목록은 제목 + 설명만). 숫자·코드는 고정폭.
   ════════════════════════════════════════════════════════════════════ */
.p-hdlab, .p-board, .p-sueobjigi, .p-phonejigi, .p-odapjigi { --accent: #1D4ED8; --accent-ink: #1D4ED8; --accent-soft: #EEF2FF; }

/* 머리글 — 보조 링크 버튼은 테두리만 */
.site-brand { letter-spacing: -.01em; }
.site-nav a[aria-current="page"] { border-bottom-color: var(--ink-900); }

/* 첫 화면 */
.hero { padding: 72px 0 64px; }
.hero h1 { text-wrap: balance; }
.hero .kicker { font-size: 14px; font-weight: 500; }
.hero .kicker img { width: 28px; height: 28px; }
.hero .lead { line-height: 1.75; }
.hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.hero-grid h1 { font-size: clamp(30px, 3.5vw, 42px); }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
.label { color: var(--ink-600); font-weight: 500; }
.link-arrow { color: var(--accent-ink); }
.actions { align-items: center; gap: 12px; }

/* 기능 목록 — 아이콘 없이 제목 + 설명, 두 칸 */
.features, .features.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; border-top: 1px solid var(--chalk-200); }
@media (max-width: 760px) { .features, .features.two { grid-template-columns: 1fr; gap: 0; } }
.feature { border-top: none; border-bottom: 1px solid var(--chalk-200); padding: 20px 0; }
.feature .i { display: none; }

/* 짧은 표시 — 작은 테두리 글자 */
.chip { height: auto; padding: 3px 9px; border-radius: var(--r-sm); background: none; border: 1px solid var(--chalk-200);
  color: var(--ink-900); font-size: var(--fs-13); font-weight: 500; line-height: 1.5; }
.chip.muted { background: none; color: var(--ink-600); }

/* 단계 — 01·02·03 */
.step::before { content: counter(step, decimal-leading-zero); font-family: var(--mono); font-weight: 500; }

/* 요금 */
.plan .amount, .t .price { font-variant-numeric: tabular-nums; }
.plan.recommended { border-color: var(--accent); }
.plan li.off { color: var(--ink-400); }

/* 문의 — 짙은 띠 */
.section:has(> .contact) { background: var(--ink-900); color: #FFFFFF; border-top: none; }
.contact p { color: var(--chalk-300); }
.contact .mail { font-family: var(--mono); font-weight: 500; color: #FFFFFF; text-decoration: underline; text-underline-offset: 6px; }
.contact .mail:hover { color: var(--chalk-200); }
.site-footer { margin-top: 0; }

/* 화면 그림 — 실제 캡처에 얇은 틀만 */
.device { box-shadow: none; }
.shots-row { align-items: start; }

/* 출석부 표(수업지기 첫 화면 그림) — 실제 콘솔과 같은 기호 ○ 지 결. 기울이지 않은 표 한 장 */
.ledger-paper { position: relative; background: var(--chalk-0); border: 1px solid var(--chalk-200); border-radius: var(--r-lg);
  padding: 18px 20px 16px; margin: 0; }
.ledger-paper h3 { font-size: 15px; font-weight: 700; }
.ledger-paper .sub { font-size: 13px; color: var(--ink-600); margin-bottom: 12px; }
.ledger-paper table { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed; }
.ledger-paper th { font-weight: 500; font-size: 13px; color: var(--ink-600); padding: 0 2px 8px; border-bottom: 1px solid var(--chalk-200);
  font-variant-numeric: tabular-nums; }
.ledger-paper th:first-child, .ledger-paper td:first-child { width: 64px; text-align: left; }
.ledger-paper td { padding: 10px 2px; border-bottom: 1px solid var(--chalk-100); text-align: center; }
.ledger-paper tr:last-child td { border-bottom: none; }
.ledger-paper td:first-child { font-weight: 500; }
.ledger-paper .mk { font-weight: 600; }
.ledger-paper .x { color: #B45309; }
.ledger-paper .l { color: var(--ink-600); }
/* 예전 손글씨 주석 — 표 아래 작은 설명 줄로 */
.ledger-paper .ann { position: static; transform: none; display: inline-block; margin: 12px 16px 0 0; font-size: 13px; color: var(--ink-600);
  line-height: 1.5; white-space: normal; }
.hero-grid:has(.ledger-paper) { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; }
@media (max-width: 900px) { .hero-grid:has(.ledger-paper) { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 560px) {
  .ledger-paper { padding: 14px 12px; }
  .ledger-paper th:first-child, .ledger-paper td:first-child { width: 52px; }
}

/* 하루 흐름 — 수업 하나가 지나가는 순서 */
.day-steps { border-top: 1px solid var(--chalk-200); }
.day-step { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 360px); gap: 32px; padding: 28px 0;
  border-bottom: 1px solid var(--chalk-200); align-items: start; }
.day-step time { font-family: var(--mono); font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.3; }
.day-step time small { display: block; font-family: var(--font); font-size: 13px; font-weight: 400; color: var(--ink-600); margin-top: 2px; }
.day-step h3 { font-size: 18px; margin-bottom: 6px; }
.day-step p { color: var(--ink-600); line-height: 1.75; }
.day-step .ex { background: var(--chalk-0); border: 1px solid var(--chalk-200); border-radius: var(--r-lg); padding: 14px 16px;
  font-size: 14px; color: var(--ink-600); line-height: 1.8; }
.day-step .ex b { color: var(--ink-900); }
.day-step .ex.msg { border: 1px solid var(--chalk-200); }
.day-step .code { font-family: var(--mono); font-size: 28px; font-weight: 500; letter-spacing: .08em; color: var(--ink-900); }
@media (max-width: 860px) {
  .day-step { grid-template-columns: 80px minmax(0, 1fr); gap: 12px 20px; }
  .day-step .ex { grid-column: 2; }
  .day-step time { font-size: 19px; }
}
@media (max-width: 480px) { .day-step { grid-template-columns: 1fr; } .day-step .ex { grid-column: 1; } }

/* 예전 손글씨 메모 자리 — 작은 설명 글자 */
.note-hand { font-family: var(--font); font-size: var(--fs-13); color: var(--ink-600); line-height: 1.5; }