/* ===== 00-tokens.css ===== */
/* MetaFitHub — 임상 대시보드(Clinical Dashboard) 방향
 *
 * 설계 근거 (2026-07 경쟁사·업계 조사):
 *  · ExamSoft·Gradescope·ClassMarker 등 어디도 문항분석을 히어로에 두지 않는다.
 *    ExamSoft 조차 자료실 페이지에 묻어놨다 → 우리는 전면에 놓는다.
 *  · 이 시장 구매자는 40~60대 학과장·교수다. 본문 17px 이상, 줄간격 1.7 이상.
 *    Light 굵기 금지(가독성). 스크롤재킹·카운트업 애니메이션 금지(경박해 보인다).
 *  · 여백이 많으면 스타트업엔 "자신감"이지만 기관 구매자에겐 "정보를 숨긴다"로 읽힌다.
 *    → 표와 숫자를 실제로 보여주는 높은 밀도.
 *  · 실제 전환은 "PDF 를 학장에게 메일로 보내는 것"이다 → 인쇄 스타일 필수.
 *
 * 의도적으로 피한 것 (2026년 'AI가 만든 티' 시그니처):
 *  · 보라→인디고→핑크 그라디언트 히어로  · Tailwind 기본색(indigo-600 등)
 *  · Inter/Roboto  · 모든 요소 border-radius 16px  · 글래스모피즘
 *  · 아이콘 4개 카드 그리드  · 이모지 아이콘  · 기울어진 3D 목업
 */

/* ── 웹폰트 ────────────────────────────────────────────────────
   CDN 을 쓰지 않는다 — 캠퍼스망이 외부를 막으면 글꼴이 통째로 안 뜬다.
   KS X 1001 서브셋(한글 3,728자)이라 267KB. 전체 세트는 766KB 라 모바일에 무겁다. */
@font-face {
  font-family: 'Pretendard';
  src: url('../fonts/Pretendard-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../fonts/Pretendard-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../fonts/Pretendard-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* 잉크·지면 — 순백/순흑을 피해 장시간 읽기 부담을 낮춘다 */
  --ink:        #0F172A;
  --ink-2:      #475569;
  --ink-3:      #7C8899;
  --paper:      #FFFFFF;
  --paper-2:    #F6F7F9;
  --line:       #E1E5EA;
  --line-2:     #CBD2DA;

  /* 강조 — 청록 슬레이트. Tailwind 기본 팔레트에 없는 값을 골랐다. */
  --brand:      #0F5F5C;
  --brand-ink:  #0A4644;
  --brand-soft: #E7F1F0;

  /* 의미색 — 데이터에서만 쓴다. 장식으로 쓰지 않는다. */
  --ok:         #15803D;  --ok-soft:   #ECF6EF;
  --warn:       #9A6410;  --warn-soft: #FBF3E4;
  --bad:        #B3352F;  --bad-soft:  #FBEDEC;

  --r:    4px;   /* 모서리를 거의 굴리지 않는다 — 문서·표의 인상 */
  --r-lg: 6px;
  --w:    64rem; /* 본문 최대폭 */
}

/* ===== 05-scale.css ===== */
/* ══ 타입·간격 스케일 — 애플 실측값 기반 ═══════════════════════
 *
 * 2026-07 조사: apple.com/kr 의 프로덕션 CSS 를 내려받아 실제 값을 추출했다.
 * (iphone-17-pro / macbook-pro / ipad-pro 의 overview.built.css, 각 400KB~1.1MB)
 * 아래 숫자는 추정이 아니라 그 파일에서 인용한 것이다.
 *
 * ── 한국어에서 애플이 바꾸는 것 (:lang(ko) 오버라이드 288개) ──
 *   ① letter-spacing 을 전부 0 으로 되돌린다.
 *      라틴 대제목은 -0.015em 로 조이지만 한글은 조이지 않는다.
 *      한글은 자간을 좁히면 글자가 뭉친다.
 *   ② line-height 를 8~10% 올린다 (본문 1.47 → 1.59, 대제목 1.05 → 1.15).
 *   ③ font-size 는 건드리지 않는다.
 *   우리 사이트는 한국어이므로 ①②를 기본값으로 삼는다.
 */

:root {
  /* 애플 실측 브레이크포인트 — 이 둘만 쓴다 (734px 498회, 1068px 366회 사용) */
  --bp-s: 734px;
  --bp-m: 1068px;

  /* 본문 폭. 애플 --global-content-max-width: 1260px */
  --w: 1260px;
}

/* ── 섹션 여백 ────────────────────────────────────────────────
   애플이 JS 없는 버전에 쓰는 값 그대로: 200 / 120 / 60px.
   여백은 사진·영상 없이도 그대로 가져올 수 있는, 가장 값싸고
   효과가 큰 요소다. */
section { padding: 200px 0; }
@media (max-width: 1068px) { section { padding: 120px 0; } }
@media (max-width: 734px)  { section { padding: 60px 0; } }

/* 히어로는 위쪽을 조금 줄인다 (헤더 바로 아래라) */
.hero { padding: 120px 0 160px; }
@media (max-width: 1068px) { .hero { padding: 80px 0 100px; } }
@media (max-width: 734px)  { .hero { padding: 56px 0 64px; } }

/* ── 타입 램프 ────────────────────────────────────────────────
   애플: 80 / 64 / 48 / 40 / 32 / 24 / 17.  weight 600 (700 아님).
   대제목:본문 비율 80/17 ≈ 4.7:1.
   한글이므로 letter-spacing 0, line-height 는 라틴보다 높게. */

h1 {
  font-size: 64px;            /* 애플 headline-elevated. 80px 은 제품 사진용이라 과함 */
  line-height: 1.15;          /* ko 값 (라틴 1.0625) */
  letter-spacing: 0;          /* ko — 조이지 않는다 */
  font-weight: 600;
}
@media (max-width: 1068px) { h1 { font-size: 48px; line-height: 1.1875; } }
@media (max-width: 734px)  { h1 { font-size: 36px; line-height: 1.25; } }

h2 {
  font-size: 48px;            /* 애플 headline */
  line-height: 1.1875;        /* ko (라틴 1.0834) */
  letter-spacing: 0;
  font-weight: 600;
}
@media (max-width: 1068px) { h2 { font-size: 40px; line-height: 1.2; } }
@media (max-width: 734px)  { h2 { font-size: 28px; line-height: 1.3; } }

h3 {
  font-size: 24px;
  line-height: 1.3334;
  letter-spacing: 0;
  font-weight: 600;
}
@media (max-width: 734px) { h3 { font-size: 20px; } }

/* 본문 — 애플 17px. 우리 구매자(40~60대)에게도 이 값이 하한이다. */
body {
  font-size: 17px;
  line-height: 1.5882;        /* ko (라틴 1.4706) */
  letter-spacing: 0;
}

/* 도입부 — 애플 manifesto 32px 를 한 단계 낮춰 사용 */
.lede {
  font-size: 24px;
  line-height: 1.375;         /* ko (라틴 1.25) */
  letter-spacing: 0;
  font-weight: 400;
}
@media (max-width: 1068px) { .lede { font-size: 21px; } }
@media (max-width: 734px)  { .lede { font-size: 18px; } }

.small, caption { font-size: 14px; line-height: 1.45; letter-spacing: 0; }

/* ── 색 ───────────────────────────────────────────────────────
   애플은 배경에 순백·순흑을 쓰지만 **글자는 절대 순흑이 아니다**.
   #1d1d1f 가 실제 값이다. 우리 --ink 를 이 값에 맞춘다. */
:root {
  --ink:     #1d1d1f;   /* 애플 --sk-body-text-color (light) */
  --ink-2:   #6e6e73;   /* 애플 secondary */
  --ink-3:   #86868b;   /* 애플 tertiary */
  --paper-2: #f5f5f7;   /* 애플에서 52회로 가장 많이 쓰인 회색 */
}

/* 애플 주력 이징 — easeOutCubic */
:root { --ease: cubic-bezier(.33, 1, .68, 1); }

/* ===== 10-base.css ===== */
/* ── 기본 ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont,
               'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  word-break: keep-all;     /* 한국어 어절 단위 줄바꿈 */
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-ink); }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* ⚠️ letter-spacing 을 여기서 주지 않는다.
   애플이 :lang(ko) 오버라이드 288개로 하는 일이 정확히 이것 —
   라틴에서 조인 자간(-0.015em)을 한글에선 전부 0 으로 되돌린다.
   한글은 자간을 좁히면 글자가 뭉친다. 크기·자간은 05-scale.css 가 담당. */
h1, h2, h3, h4 { margin: 0 0 .5rem; }
h4 { font-size: 1.05rem; font-weight: 600; line-height: 1.4; }
p  { margin: 0 0 1rem; }

.wrap { max-width: var(--w); margin: 0 auto; padding: 0 1.25rem; }
.lede { color: var(--ink-2); }   /* 크기는 05-scale */
.small { color: var(--ink-3); }  /* 크기는 05-scale */
.num { font-variant-numeric: tabular-nums; }  /* 숫자 폭 고정 */

/* 섹션 라벨 — 작은 대문자 활자. 아이콘 대신 활자로 위계를 만든다. */
.eyebrow {
  font-size: .73rem; font-weight: 700; letter-spacing: .14em;
  color: var(--brand); text-transform: uppercase; margin: 0 0 .7rem;
}

/* ===== 20-layout.css ===== */
/* 애플식 리듬 — 섹션마다 크게 숨을 쉬고, 경계선 대신 배경 톤으로 구분한다.
   선을 지우면 페이지가 조각이 아니라 하나의 흐름으로 읽힌다. */
/* section padding 은 05-scale.css 로 이동 (애플 실측 200/120/60px) */

/* 교차 배경 — 위아래로 아주 옅게 번지게 해서 '띠'가 아니라 '면'으로 보이게 */
section.alt {
  background:
    linear-gradient(180deg,
      rgba(15,95,92,.035) 0%,
      rgba(15,95,92,.055) 45%,
      rgba(15,95,92,.025) 100%),
    var(--paper);
}

/* 히어로 뒤 — 우상단에서 아주 옅게 스며드는 빛.
   그라디언트 '오브'가 아니라 조명에 가깝다. 색이 거의 안 보여야 성공. */
.hero {
  position: relative;
  background:
    radial-gradient(120% 90% at 78% -10%,
      rgba(15,95,92,.07) 0%,
      rgba(15,95,92,.03) 35%,
      transparent 68%),
    var(--paper);
}

/* ===== 30-header.css ===== */
/* ── 헤더 ───────────────────────────────────────────────────── */
.site-head {
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(1.2);
}
.site-head .wrap {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 56px;
}
.brand {
  font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em;
  color: var(--ink); text-decoration: none; flex: none;
}
.brand span { color: var(--brand); }
.site-nav { margin-left: auto; display: flex; gap: 1.3rem; align-items: center; }
.site-nav a { color: var(--ink-2); text-decoration: none; font-size: .93rem; font-weight: 500; }
.site-nav a:hover { color: var(--brand); }

/* ===== 40-button.css ===== */
/* ── 버튼 ───────────────────────────────────────────────────── */
.btn {
  display: inline-block; padding: .62rem 1.1rem;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--paper); color: var(--ink);
  font-size: .95rem; font-weight: 600; text-decoration: none;
  transition: background-color .12s, border-color .12s;
}
.btn:hover { background: var(--paper-2); border-color: var(--ink-3); color: var(--ink); }
.btn.primary {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.btn.primary:hover { background: var(--brand-ink); border-color: var(--brand-ink); color: #fff; }
.btn-row { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.4rem; }

/* ===== 50-hero.css ===== */
/* ── 히어로 ─────────────────────────────────────────────────── */
/* 가운데 정렬 대신 좌측 정렬 + 우측에 실제 분석표.
   "제품이 무엇을 내놓는지"를 문장보다 표가 빠르게 말한다. */
/* .hero padding 은 05-scale.css 로 이동 */
.hero-grid {
  display: grid; gap: 2.4rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 62rem) {
  .hero-grid { grid-template-columns: 1fr 1fr; align-items: center; gap: 3rem; }
}
.hero h1 { margin-bottom: .8rem; }
.hero .lede { font-size: 1.18rem; line-height: 1.7; max-width: 34rem; }

/* ===== 60-table.css ===== */
/* ── 문항분석 표 — 이 사이트의 핵심 이미지 ────────────────────
   그림이 아니라 진짜 HTML 표다. 확대해도 깨지지 않고, 인쇄되고,
   화면낭독기가 읽고, 유지보수에 이미지 파이프라인이 필요 없다. */
.tw { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table {
  border-collapse: collapse; width: 100%;
  font-size: .9rem; background: var(--paper);
}
caption {
  caption-side: top; text-align: left;
  font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  color: var(--ink-3); text-transform: uppercase;
  padding: 0 0 .5rem;
}
th, td {
  text-align: left; padding: .55rem .7rem;
  border-bottom: 1px solid var(--line);
}
thead th {
  font-size: .74rem; font-weight: 700; letter-spacing: .06em;
  color: var(--ink-3); text-transform: uppercase;
  background: var(--paper-2);
  border-bottom: 1.5px solid var(--line-2);
  white-space: nowrap;
}
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 1px solid var(--line-2); }

/* 판정 배지 — 색만으로 구분하지 않는다(WCAG 1.4.1). 글자도 함께 바뀐다. */
.tag {
  display: inline-block; padding: .1rem .45rem;
  border-radius: var(--r); font-size: .78rem; font-weight: 600;
  border: 1px solid transparent; white-space: nowrap;
}
.tag.ok   { background: var(--ok-soft);   color: var(--ok);   border-color: #C6E3CF; }
.tag.warn { background: var(--warn-soft); color: var(--warn); border-color: #EAD6AC; }
.tag.bad  { background: var(--bad-soft);  color: var(--bad);  border-color: #EFC9C6; }
tr.flag td { background: var(--bad-soft); }
tr.flag td:first-child { font-weight: 700; }

.table-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.15rem 1.25rem 1.3rem;
  background: var(--paper);
  /* 3겹 그림자 — 한 겹짜리 박스섀도는 싸구려로 보인다.
     가까운 것은 또렷하게, 먼 것은 크고 옅게 겹쳐야 공중에 뜬 느낌이 난다. */
  box-shadow:
    0 1px 2px rgba(15,23,42,.04),
    0 6px 16px -6px rgba(15,23,42,.08),
    0 24px 48px -24px rgba(15,23,42,.12);
}

/* ===== 70-blocks.css ===== */
/* ── 본문 블록 ──────────────────────────────────────────────── */
.cols { display: grid; gap: 1.6rem; grid-template-columns: minmax(0,1fr); }
@media (min-width: 48rem) { .cols.two { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62rem) { .cols.three { grid-template-columns: repeat(3, 1fr); } }

.panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.5rem 1.6rem;
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(15,23,42,.03), 0 8px 24px -12px rgba(15,23,42,.07);
}
.panel h3 { margin-top: 0; }
.panel p:last-child { margin-bottom: 0; }

/* 절차 — 아이콘 카드 대신 번호 목록. 번호가 실제로 순서를 뜻한다. */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li {
  counter-increment: s; position: relative;
  padding: .9rem 0 .9rem 3rem;
  border-bottom: 1px solid var(--line);
}
.steps li:last-child { border-bottom: none; }
.steps li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute; left: 0; top: .95rem;
  font-variant-numeric: tabular-nums; font-weight: 700;
  font-size: .85rem; color: var(--brand);
  border: 1px solid var(--brand); border-radius: var(--r);
  padding: .05rem .35rem;
}
.steps b { display: block; font-size: 1rem; }
.steps span { color: var(--ink-2); font-size: .93rem; }

/* 인용 — 유일하게 서체 대비를 주는 자리 */
.quote {
  border-left: 3px solid var(--brand); background: var(--brand-soft);
  padding: 1rem 1.2rem; border-radius: 0 var(--r) var(--r) 0; margin: 1.2rem 0;
}
.quote p:last-child { margin-bottom: 0; }

.note {
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: var(--paper-2); padding: .9rem 1.1rem; font-size: .93rem;
}

/* ===== 80-pricing.css ===== */
/* ── 가격 ───────────────────────────────────────────────────── */
.plans { display: grid; gap: 1rem; grid-template-columns: minmax(0,1fr); }
@media (min-width: 54rem) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan {
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  padding: 1.2rem 1.2rem 1.4rem; display: flex; flex-direction: column;
  background: var(--paper);
}
.plan.hl { border: 2px solid var(--brand); }
.plan .kind {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
}
.plan.hl .kind { color: var(--brand); }
.plan h3 { margin: .3rem 0 .1rem; font-size: 1.12rem; }
.plan .price {
  font-size: 1.75rem; font-weight: 700; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; margin: .4rem 0 0;
}
.plan .price small { font-size: .9rem; font-weight: 400; color: var(--ink-3); }
.plan .sum { color: var(--ink-2); font-size: .9rem; margin: .1rem 0 .8rem; }
.plan ul { margin: 0; padding-left: 1.05rem; font-size: .92rem; color: var(--ink-2); flex: 1; }
.plan li { margin: .3rem 0; }

/* ===== 85-dashboard.css ===== */
/* ── 대시보드 ─────────────────────────────────────────────── */
.row { display: flex; align-items: baseline; gap: .6rem; }
.row.end { justify-content: space-between; align-items: center; margin-top: 1rem; }
.row h3 { margin: 0; flex: 1; }

/* 준비 중인 서비스 — 흐리게 두되 읽을 수는 있게 */
.panel.dim { opacity: .62; }
.panel.dim:hover { transform: none; }

#cards .panel { display: flex; flex-direction: column; }
#cards .panel .small:first-of-type { flex: 1; }

/* ===== 90-footer.css ===== */
/* ── 푸터 ───────────────────────────────────────────────────── */
/* 한국 기관 구매자는 사업자등록번호를 확인하러 푸터까지 내려온다.
   없으면 문의 자체를 안 한다. */
.site-foot {
  border-top: 1px solid var(--line); background: var(--paper-2);
  padding: 2rem 0 2.5rem; font-size: .87rem; color: var(--ink-2);
}
.site-foot a { color: var(--ink-2); }
.site-foot .legal { color: var(--ink-3); font-size: .82rem; line-height: 1.9; }
.site-foot .legal b { color: var(--ink-2); }
.foot-links { display: flex; gap: 1.1rem; flex-wrap: wrap; margin-bottom: .9rem; }

/* ===== 95-print.css ===== */
/* ── 인쇄 ───────────────────────────────────────────────────── */
/* 실제 전환 경로의 끝은 "학장에게 PDF 를 보내는 것"이다. 인쇄가 깨지면 안 된다. */
@media print {
  .site-head, .btn-row, .site-nav { display: none !important; }
  body { font-size: 11pt; }
  section { padding: 1rem 0; border-top: 1px solid #ccc; break-inside: avoid; }
  .panel, .plan, .table-card { break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}

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

/* ===== 98-motion.css ===== */
/* ══ 인터랙션 ═══════════════════════════════════════════════════
   전부 CSS 다. 자바스크립트 0바이트 — 캠퍼스망이 느려도 즉시 뜨고,
   화면낭독기·인쇄·구형 브라우저에서 깨지지 않는다.
   애플식 원칙: 움직임은 "반응"이지 "장식"이 아니다. 짧고, 한 번만, 조용히. */

/* 스크롤 진입 — 요소가 화면에 들어올 때 아주 살짝 떠오른다.
   animation-timeline 을 지원하지 않는 브라우저는 그냥 처음부터 보인다(안전). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    section > .wrap > *,
    .hero-grid > * {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }
    @keyframes rise {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: none; }
    }
  }
}

/* 카드 — 마우스를 올리면 종이가 한 장 뜨듯. 크기는 거의 안 변한다(1px 수준). */
.panel, .table-card, .plan {
  transition: transform .28s cubic-bezier(.2,.7,.3,1),
              box-shadow .28s cubic-bezier(.2,.7,.3,1),
              border-color .2s;
}
@media (hover: hover) {
  .panel:hover, .plan:hover {
    transform: translateY(-2px);
    border-color: var(--line-2);
    box-shadow: 0 2px 4px rgba(15,23,42,.04), 0 14px 32px -14px rgba(15,23,42,.13);
  }
  .table-card:hover {
    transform: translateY(-3px);
    box-shadow:
      0 1px 2px rgba(15,23,42,.05),
      0 10px 22px -8px rgba(15,23,42,.1),
      0 32px 60px -28px rgba(15,23,42,.16);
  }
}

/* 표 행 — 훑어 내려갈 때 지금 보는 줄이 따라온다 */
tbody tr { transition: background-color .15s; }
@media (hover: hover) {
  tbody tr:hover td { background: var(--paper-2); }
  tbody tr.flag:hover td { background: #F7E3E1; }
}

/* 경고 행 — 처음 한 번만 부드럽게 물든다.
   깜빡임이 아니라 '나중에 칠해진 것'처럼 보이게 3초에 걸쳐 한 번. */
@media (prefers-reduced-motion: no-preference) {
  tr.flag td { animation: ink 2.6s cubic-bezier(.4,0,.2,1) .5s both; }
  @keyframes ink {
    from { background: transparent; }
    to   { background: var(--bad-soft); }
  }
}

/* 버튼 — 누르는 감각. 올릴 때 살짝 뜨고 누를 때 내려앉는다. */
.btn { transition: background-color .16s, border-color .16s,
                   transform .12s, box-shadow .16s; }
@media (hover: hover) {
  .btn.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -6px rgba(15,95,92,.45);
  }
}
.btn:active { transform: translateY(0) scale(.985); }

/* 링크 밑줄 — 왼쪽에서 그어진다 */
.panel h3 a, .site-foot a, .lede a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px; background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .3s cubic-bezier(.2,.7,.3,1);
  text-decoration: none;
}
.panel h3 a:hover, .site-foot a:hover, .lede a:hover { background-size: 100% 1px; }

/* 절차 목록 — 번호에 브랜드색이 차오른다 */
.steps li { transition: background-color .2s; }
@media (hover: hover) {
  .steps li:hover { background: var(--paper-2); }
  .steps li:hover::before { background: var(--brand); color: #fff; }
}
.steps li::before { transition: background-color .2s, color .2s; }

/* 헤더 — 스크롤하면 경계가 또렷해진다 */
.site-head { transition: box-shadow .25s, background-color .25s; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .site-head {
      animation: lift linear both;
      animation-timeline: scroll();
      animation-range: 0 90px;
    }
    @keyframes lift {
      to { box-shadow: 0 1px 3px rgba(15,23,42,.07), 0 6px 20px -12px rgba(15,23,42,.16); }
    }
  }
}

/* 목차 이동 시 헤더에 가리지 않게 */
[id] { scroll-margin-top: 5rem; }

/* ===== 99-showcase.css ===== */
/* ══ 스크롤 연출 — 애플 실측 트리거값 기반 ═══════════════════════
 *
 * 2026-07 조사 결과 두 가지가 판단을 바꿨다.
 *
 * ① 애플은 CSS 스크롤 애니메이션을 **전혀 쓰지 않는다.**
 *    (animation-timeline / view-timeline / scroll-timeline 검색 결과 0건)
 *    전부 JS 로 transform 을 쓴다. 다만 **JS 없는 버전을 함께 제공**하고,
 *    그게 정확히 우리가 만들 수 있는 등급이다.
 *    → 애플을 흉내내는 게 아니라, 애플이 이미 설계해둔 tier 를 만드는 것.
 *
 * ② 브라우저 지원이 생각보다 좋다 (2026-07 기준).
 *    Chrome 115+ / Firefox 155+ / Safari 26.0+ — 4개 엔진 전부, 전세계 83.7%.
 *    미지원 16% 는 애니메이션 없이 **완성된 정적 페이지**를 본다(손해 없음).
 *
 * ── 애플에서 가져온 실제 수치 ──
 *   텍스트 페이드 구간 : 20~25vh   (--hz-copy-lockup-kf-start/end)
 *   스크림 도달 구간   : 20vh      (--hz-scrim-kf-start/end)
 *   이징              : cubic-bezier(.33,1,.68,1)  easeOutCubic
 *
 * ── 의도적으로 안 한 것 (조사에서 "싸구려로 보인다"고 판단된 것) ──
 *   · 제품 사진 확대(scale 1→2) — 5K 스튜디오 렌더가 있어야 견딘다.
 *     확대는 용서가 없다. 우리는 **축소**(1.06→1.0)만 쓴다 —
 *     원본 해상도에 안착하므로 항상 선명하다.
 *   · 전면 사진 위 텍스트 — 여백을 계산해 촬영한 사진이 있어야 한다.
 *   · 검은 섹션 — 애플의 검정은 빛나는 제품을 놓는 무대다.
 *     보여줄 물건이 없으면 그냥 어두울 뿐이다.
 *   · 큰 요소에 스프링 이징 — 애플은 36px 버튼에만 쓴다.
 *   · 프레임 시퀀스 스크럽 — 애플조차 이 페이지들에 안 쓴다(canvas 0개).
 *
 * ⚠️ 이 파일만 지우면 움직임이 전부 사라지고 레이아웃은 그대로다.
 */

@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {

  /* ── 섹션 헤드라인 — 애플식 페이드업 ──────────────────────────
     조사 권고: "약 40px 이동, entry 10% → cover 35%, easeOutCubic".
     그대로 적용한다. 이게 사진 없이도 애플 느낌을 내는 핵심이다. */
  section:not(.hero) > .wrap > .eyebrow,
  section:not(.hero) > .wrap > h2,
  section:not(.hero) > .wrap > .lede {
    animation: ap-rise linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 35%;
  }
  @keyframes ap-rise {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: none; }
  }

  /* 본문 덩어리는 조금 늦게 — 제목이 먼저 자리를 잡는다 */
  section:not(.hero) > .wrap > .cols,
  section:not(.hero) > .wrap > .plans,
  section:not(.hero) > .wrap > .tw,
  section:not(.hero) > .wrap > .steps,
  section:not(.hero) > .wrap > .note {
    animation: ap-rise linear both;
    animation-timeline: view();
    animation-range: entry 18% cover 42%;
  }

  /* ── 히어로 분석표 — 스크롤하면 물러난다 ─────────────────────
     ⚠️ 확대가 아니라 **축소**다. 1.06 에서 1.0 으로 내려앉으며
     원본 해상도에 안착한다. 확대했다면 흐려졌을 것이다. */
  .hero .table-card {
    animation: ap-settle linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
    transform-origin: center 40%;
  }
  @keyframes ap-settle {
    from { opacity: 0; transform: scale(1.06) translateY(30px); }
    to   { opacity: 1; transform: none; }
  }

  /* ── 표의 행 — 위에서 아래로 훑듯 ────────────────────────────
     nth-child 로 트리거 구간을 어긋나게 준다. JS 불필요. */
  .table-card tbody tr {
    animation: ap-row linear both;
    animation-timeline: view();
  }
  .table-card tbody tr:nth-child(1) { animation-range: entry 12% cover 30%; }
  .table-card tbody tr:nth-child(2) { animation-range: entry 16% cover 34%; }
  .table-card tbody tr:nth-child(3) { animation-range: entry 20% cover 38%; }
  .table-card tbody tr:nth-child(4) { animation-range: entry 24% cover 42%; }
  .table-card tbody tr:nth-child(5) { animation-range: entry 28% cover 46%; }
  @keyframes ap-row {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }

  /* ── 절차 번호 ──────────────────────────────────────────────── */
  .steps li {
    animation: ap-rise linear both;
    animation-timeline: view();
  }
  .steps li:nth-child(1) { animation-range: entry 14% cover 34%; }
  .steps li:nth-child(2) { animation-range: entry 18% cover 38%; }
  .steps li:nth-child(3) { animation-range: entry 22% cover 42%; }
  .steps li:nth-child(4) { animation-range: entry 26% cover 46%; }

  /* ── 요금제 카드 ────────────────────────────────────────────── */
  .plan {
    animation: ap-rise linear both;
    animation-timeline: view();
  }
  .plan:nth-child(1) { animation-range: entry 16% cover 36%; }
  .plan:nth-child(2) { animation-range: entry 20% cover 40%; }
  .plan:nth-child(3) { animation-range: entry 24% cover 44%; }
}

/* ── 로드 직후 히어로 (스크롤 무관) ─────────────────────────────
   첫인상. 0.8초 안에 끝난다. easeOutCubic. */
.hero .eyebrow  { animation: ap-in .8s var(--ease) .05s both; }
.hero h1        { animation: ap-in .8s var(--ease) .12s both; }
.hero .lede     { animation: ap-in .8s var(--ease) .22s both; }
.hero .btn-row  { animation: ap-in .8s var(--ease) .32s both; }
@keyframes ap-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* ── 호버 — 절제 ───────────────────────────────────────────────
   조사 결론: "싸구려의 신호는 여백의 질이 아니라 움직임의 양이다."
   확대는 아주 조금만. 그림자로 뜨는 느낌을 낸다. */
@media (hover: hover) {
  .panel, .plan, .table-card {
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
  }
  .panel:hover, .plan:hover {
    transform: translateY(-4px);
    box-shadow: 0 2px 6px rgba(29,29,31,.04),
                0 18px 40px -16px rgba(29,29,31,.16);
  }
  .table-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 6px rgba(29,29,31,.05),
                0 12px 26px -10px rgba(29,29,31,.1),
                0 36px 64px -30px rgba(29,29,31,.16);
  }
}

}  /* prefers-reduced-motion */