/* ═══════════════════════════════════════════════════════════════
   AI 툴박스 디자인 시스템 (2026-08-10 전면 개편)

   방향: 한국 학원 원장을 위한 B2B 판매 사이트.
        차분하고 믿음이 가는 편집형. 장식보다 글자와 여백이 일한다.

   다이얼: 변화도 6 / 모션 4 / 밀도 4
   - 모서리는 전 요소 2px 하나로 통일한다 (둥근 카드 = AI 사이트 티)
   - 강조색은 딥 파인 하나만 쓴다 (파랑·보라 그라데이션 금지)
   - 라이트/다크 두 모드를 토큰으로 함께 설계한다
   ═══════════════════════════════════════════════════════════════ */

/* 서체: Pretendard (한국어 웹서체). 못 받아오면 시스템 글꼴로 자연스럽게 내려간다 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

:root {
  /* 색 — 라이트 */
  --paper:    #FAFAF7;
  --surface:  #FFFFFF;
  --raised:   #F3F3EE;
  --ink:      #14181B;
  --muted:    #5C646B;
  --line:     #E3E2DC;
  --line-soft:#EEEDE7;
  --deep:     #0E2E2B;   /* 어두운 섹션·헤딩 */
  --deep-ink: #E9EFEC;   /* 어두운 섹션 위 글자 */
  --deep-mut: #93A7A2;
  --deep-line:#254743;
  --accent:   #0E7C6B;   /* 단 하나의 강조색 */
  --accent-on:#FFFFFF;   /* 강조색 위 글자 */
  --accent-sf:#E7F1EE;   /* 강조색 아주 옅은 면 */

  /* 형태 — 하나로 고정.
     규칙: 바깥 상자·버튼·이미지는 --r, 얇은 선으로 나눈 격자의 '칸'은 각지게 둔다
     (표의 칸과 같은 성격이라 칸마다 모서리를 주면 격자가 흐트러진다). */
  --r: 2px;

  /* 글자 크기 단계 */
  --t--1: .8125rem;
  --t-0:  1rem;
  --t-1:  1.0625rem;
  --t-2:  1.25rem;
  --t-3:  1.5rem;
  --t-4:  clamp(1.75rem, 2.8vw, 2.25rem);
  --t-5:  clamp(2.1rem, 5vw, 3.35rem);

  /* 여백 */
  --gap:   1rem;
  --gap-2: 1.5rem;
  --gap-3: 2.5rem;
  --gap-4: 4rem;
  --gap-5: 6rem;

  --wrap: 1180px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:    #0F1312;
    --surface:  #161B1A;
    --raised:   #1B2220;
    --ink:      #ECEEEA;
    --muted:    #9BA4A1;
    --line:     #262D2B;
    --line-soft:#1F2624;
    --deep:     #091412;
    --deep-ink: #E9EFEC;
    --deep-mut: #8FA29E;
    --deep-line:#1E2E2B;
    --accent:   #4FBFA8;
    --accent-on:#062019;
    --accent-sf:#122824;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
               'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', sans-serif;
  font-size: var(--t-0);
  line-height: 1.75;
  letter-spacing: -.011em;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

img { max-width: 100%; height: auto; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.container { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* ── 상단 바 ───────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header .container {
  height: 68px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 1.0625rem; font-weight: 750; letter-spacing: -.03em; color: var(--ink);
  white-space: nowrap;
}
.logo:hover { text-decoration: none; }
.logo .accent { color: var(--accent); }
.logo-mark {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: var(--r);
  background: var(--deep); display: inline-flex; align-items: center; justify-content: center;
}
.logo-mark svg { width: 18px; height: 18px; display: block; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  color: var(--muted); font-weight: 550; font-size: .9375rem;
  padding: 7px 12px; border-radius: var(--r);
  transition: color .16s ease, background-color .16s ease;
  white-space: nowrap;
}
.nav a:hover { color: var(--ink); background: var(--raised); text-decoration: none; }
.nav a.active { color: var(--ink); font-weight: 700; }

/* 제품 펼침 메뉴 — <details> 라 자바스크립트 없이도 열린다(닫기만 layout.js 가 돕는다) */
.nav-drop { position: relative; }
.nav-drop > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--muted); font-weight: 550; font-size: .9375rem;
  padding: 7px 12px; border-radius: var(--r); white-space: nowrap;
  transition: color .16s ease, background-color .16s ease;
}
.nav-drop > summary::-webkit-details-marker { display: none; }
.nav-drop > summary::after {
  content: ''; width: 5px; height: 5px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .16s ease;
}
.nav-drop[open] > summary::after { transform: rotate(-135deg); margin-top: 2px; }
.nav-drop > summary:hover,
.nav-drop[open] > summary { color: var(--ink); background: var(--raised); }
.nav-drop.active > summary { color: var(--ink); font-weight: 700; }

.nav-menu {
  position: absolute; top: calc(100% + 9px); right: 0;
  min-width: min(272px, calc(100vw - 28px));
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 14px 34px rgba(11, 26, 24, .13);
  padding: 6px; display: grid; gap: 2px;
}
.nav-menu a {
  display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r);
}
.nav-menu a b { color: var(--ink); font-weight: 650; font-size: .9375rem; letter-spacing: -.02em; }
.nav-menu a span { color: var(--muted); font-size: .8125rem; line-height: 1.5; }
.nav-menu a:hover { background: var(--raised); text-decoration: none; }
.nav-menu a.active b { color: var(--accent); }

@media (prefers-color-scheme: dark) {
  /* 어두운 배경에서는 그림자가 안 보인다 — 테두리를 조금 밝혀 떠 있는 느낌을 낸다 */
  .nav-menu { box-shadow: 0 14px 34px rgba(0, 0, 0, .5); border-color: var(--deep-line); }
}

/* ⚠ 좁은 화면에서는 「제품」 단추가 메뉴 한가운데 있어, 거기에 붙이면
   메뉴가 화면 왼쪽 밖으로 잘려 나간다(2026-08-30 실측).
   그래서 기준을 헤더로 옮겨 화면 폭을 꽉 채운다. */
@media (max-width: 720px) {
  .nav-drop { position: static; }
  .nav-menu { left: 14px; right: 14px; min-width: 0; }
}

/* 푸터 제품 줄 — 검색엔진이 제품 페이지를 찾아가는 길이기도 하다 */
.footer-products a { font-weight: 600; }

/* ── 버튼 ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 22px; border-radius: var(--r);
  font-weight: 650; font-size: .9688rem; letter-spacing: -.015em;
  border: 1px solid transparent; white-space: nowrap;
  transition: background-color .16s ease, border-color .16s ease,
              color .16s ease, transform .1s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--deep); color: #F4F8F6; }
.btn-primary:hover { background: #0A2320; }
.btn-accent  { background: var(--accent); color: var(--accent-on); }
.btn-accent:hover { background: color-mix(in srgb, var(--accent) 86%, #000); }
.btn-ghost   { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); background: var(--surface); }
.btn-sm { padding: 9px 15px; font-size: .875rem; }

@media (prefers-color-scheme: dark) {
  .btn-primary { background: var(--accent); color: var(--accent-on); }
  .btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, #fff); }
}

/* ── 히어로 (비대칭 분할) ──────────────────────────────────── */
.hero { padding: 84px 0 76px; border-bottom: 1px solid var(--line); }
.hero .hero-layout {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 56px; align-items: center;
}
/* 폭은 그리드 칸이 정한다. 여기에 ch 단위를 쓰면 본문 글꼴 기준으로 계산돼
   제목이 잘게 쪼개진다 (실제로 4줄로 깨졌던 자리). */
.hero-copy { max-width: none; }
.hero h1 {
  margin: 0;
  font-size: var(--t-5); font-weight: 800;
  line-height: 1.16; letter-spacing: -.042em;
  text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero p.lead {
  margin: 20px 0 0; font-size: var(--t-1); color: var(--muted);
  max-width: 34rem; line-height: 1.72;
}
.hero .cta { margin-top: 34px; display: flex; gap: 10px; flex-wrap: wrap; }
.hero .chips { margin-top: 30px; display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.hero .chips .label { font-size: var(--t--1); color: var(--muted); margin-right: 2px; }
.chip {
  display: inline-block; padding: 5px 12px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
  font-size: var(--t--1); font-weight: 550; color: var(--muted);
  transition: border-color .16s ease, color .16s ease;
}
a.chip:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.hero-visual img { display: block; width: 100%; border-radius: var(--r); }

/* 로드 시 한 번만 부드럽게 들어온다 (모션 4) */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > *, .hero-visual {
    animation: rise .62s cubic-bezier(.16, 1, .3, 1) both;
  }
  .hero-copy > *:nth-child(1) { animation-delay: .02s; }
  .hero-copy > *:nth-child(2) { animation-delay: .08s; }
  .hero-copy > *:nth-child(3) { animation-delay: .14s; }
  .hero-copy > *:nth-child(4) { animation-delay: .2s; }
  .hero-visual { animation-delay: .1s; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } }
}

/* ── 섹션 공통 ────────────────────────────────────────────── */
.section { padding: var(--gap-5) 0; }
.section.soft { background: var(--raised); border-block: 1px solid var(--line); }
.section h2 {
  margin: 0 0 10px; font-size: var(--t-4); font-weight: 780;
  letter-spacing: -.032em; line-height: 1.24; text-wrap: balance;
}
.section p.sub { margin: 0 0 var(--gap-3); color: var(--muted); max-width: 58ch; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

/* 어두운 섹션 — 페이지 안에서 한 번만 쓴다 */
.section.dark { background: var(--deep); color: var(--deep-ink); }
.section.dark h2 { color: #fff; }
.section.dark p.sub { color: var(--deep-mut); }
.section.dark.with-photo {
  position: relative;
  background: var(--deep) url('/assets/aitoolbox-main/08-automation-bg.webp') no-repeat center/cover;
}
.section.dark.with-photo::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--deep) 91%, transparent),
    color-mix(in srgb, var(--deep) 86%, transparent));
}
.section.dark.with-photo .container { position: relative; }

/* ── 제품 목록 (비대칭 벤토, 4칸) ─────────────────────────── */
.lineup {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
.lineup-item {
  background: var(--surface); padding: 34px 32px;
  display: grid; gap: 12px; align-content: start;
}
.lineup-item.wide {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px; align-items: center; padding: 40px 32px;
}
.lineup-item.wide.flip .lineup-media { order: 2; }
.lineup-item.tinted { background: var(--accent-sf); }
.lineup-media img { display: block; width: 100%; border-radius: var(--r); }
/* 작은 칸은 이미지를 위에 얹고 아래로 글이 흐른다 */
.lineup-item:not(.wide) .lineup-media { margin-bottom: 6px; }
.lineup-item:not(.wide) .lineup-media img { aspect-ratio: 16 / 9; object-fit: cover; }
.lineup-body { display: grid; gap: 12px; align-content: start; }
.lineup-item h3 {
  margin: 0; font-size: var(--t-2); font-weight: 750; letter-spacing: -.028em;
}
.lineup-item p { margin: 0; color: var(--muted); font-size: .9375rem; line-height: 1.72; }
.lineup-item .kicker {
  font-size: var(--t--1); color: var(--accent); font-weight: 650;
}
.lineup-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

/* ── 자동화 시나리오 ──────────────────────────────────────── */
.scenarios {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--deep-line); border: 1px solid var(--deep-line); border-radius: var(--r); overflow: hidden;
}
.scenario { background: var(--deep); padding: 26px 28px; }
.section.dark.with-photo .scenario { background: color-mix(in srgb, var(--deep) 92%, transparent); }
.scenario h3, .scenario h4 {
  margin: 0 0 16px; font-size: var(--t-1); font-weight: 700;
  letter-spacing: -.024em; color: #fff;
}
.pipeline { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.node {
  padding: 8px 14px; border-radius: var(--r); font-size: .875rem; font-weight: 550;
  background: transparent; border: 1px solid var(--deep-line); color: #CFDCD8;
}
.node.ai { background: var(--accent); border-color: var(--accent); color: var(--accent-on); font-weight: 650; }
.node.out { border-style: dashed; border-color: var(--accent); color: var(--accent); }
.pipe-arrow { color: #56706B; }
.scenario .meta { margin-top: 14px; font-size: var(--t--1); color: var(--deep-mut); }

/* ── 근거 목록 (좌측 고정 제목 + 우측 항목) ───────────────── */
.why { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 56px; }
.why-head { position: sticky; top: 100px; align-self: start; }
.why-head h2 { margin-bottom: 12px; }
.why-head p { margin: 0; color: var(--muted); max-width: 30ch; }
.why-list { display: grid; }
.why-item { padding: 28px 0; border-top: 1px solid var(--line); }
.why-item:first-child { border-top: 0; padding-top: 0; }
.why-item:last-child { padding-bottom: 0; }
.why-item h3 {
  margin: 0 0 8px; font-size: var(--t-1); font-weight: 700; letter-spacing: -.024em;
}
.why-item p { margin: 0; color: var(--muted); font-size: .9375rem; max-width: 56ch; }

/* ── 하단 전환 ────────────────────────────────────────────── */
.cta-split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px; align-items: center; }
.cta-copy h2 { margin-bottom: 10px; }
.cta-copy p.sub { margin-bottom: 26px; }
.cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cta-visual img { display: block; width: 100%; border-radius: var(--r); }

/* ── 제품 상세 머리 ───────────────────────────────────────── */
.product-hero { padding: 72px 0 56px; border-bottom: 1px solid var(--line); }
.product-hero .tag {
  display: inline-block; font-size: var(--t--1); font-weight: 650;
  color: var(--accent); border: 1px solid var(--accent); padding: 3px 11px; border-radius: var(--r);
}
.product-hero h1 {
  margin: 16px 0 0; font-size: var(--t-4); font-weight: 800;
  letter-spacing: -.038em; line-height: 1.2; max-width: 22ch; text-wrap: balance;
}
.product-hero p.lead {
  margin: 16px 0 0; color: var(--muted); font-size: var(--t-1); max-width: 58ch; line-height: 1.72;
}
.spec-strip { margin-top: 28px; display: flex; gap: 8px; flex-wrap: wrap; }
.spec {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 7px 14px; font-size: var(--t--1); font-weight: 550; color: var(--muted);
}
.spec b { color: var(--accent); }

.product-visual { max-width: var(--wrap); margin: 40px auto 0; padding: 0 24px; }
.product-visual img { display: block; width: 100%; border: 1px solid var(--line); border-radius: var(--r); }
.product-visual .caption { margin-top: 12px; font-size: var(--t--1); color: var(--muted); }

/* ── 기능 목록 ────────────────────────────────────────────── */
.features {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
}
.feature { background: var(--surface); padding: 28px 26px; }
.feature h4 { margin: 0 0 8px; font-size: var(--t-1); font-weight: 700; letter-spacing: -.024em; }
.feature p { margin: 0; color: var(--muted); font-size: .9375rem; }

/* ── 본문 목록 (제품 페이지 "이런 분께 맞습니다") ─────────── */
.prose-list { margin: 0; padding-left: 20px; max-width: 62ch; color: var(--muted); }
.prose-list li { margin-bottom: 10px; }
.prose-list li::marker { color: var(--accent); }

/* ── 요금제 카드 (학원 패키지 한 개) ─────────────────────── */
.plan { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.plan-top {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px; align-items: center;
  padding: 40px 36px; border-bottom: 1px solid var(--line);
}
.plan-name h2 { margin: 0 0 8px; font-size: var(--t-3); font-weight: 780; letter-spacing: -.03em; }
.plan-name p { margin: 0; color: var(--muted); font-size: .9688rem; max-width: 44ch; }
.plan-amount { text-align: right; white-space: nowrap; }
.plan-amount .num {
  font-size: clamp(2.1rem, 4.4vw, 2.9rem); font-weight: 800;
  letter-spacing: -.04em; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.plan-amount .per { font-size: var(--t-1); color: var(--muted); font-weight: 600; margin-left: 4px; }
.plan-amount .note { margin: 6px 0 0; font-size: var(--t--1); color: var(--muted); }

.plan-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.plan-item { background: var(--surface); padding: 24px 26px; }
.plan-item h3 { margin: 0 0 6px; font-size: var(--t-1); font-weight: 700; letter-spacing: -.022em; }
.plan-item p { margin: 0; color: var(--muted); font-size: .9063rem; line-height: 1.7; }

.plan-foot {
  padding: 26px 36px; border-top: 1px solid var(--line); background: var(--raised);
  display: flex; gap: 26px; flex-wrap: wrap;
}
.plan-foot span { font-size: .9063rem; color: var(--muted); }
.plan-foot b { color: var(--ink); font-weight: 650; }

@media (max-width: 720px) {
  .plan-top { grid-template-columns: minmax(0, 1fr); padding: 28px 22px; }
  .plan-amount { text-align: left; }
  .plan-items { grid-template-columns: minmax(0, 1fr); }
  .plan-item { padding: 20px 22px; }
  .plan-foot { padding: 22px; gap: 12px; }
}

/* ── 가격 묶음 ────────────────────────────────────────────── */
.price-group + .price-group { margin-top: 56px; }
.price-group h2 { margin-bottom: 6px; font-size: var(--t-3); }
.price-group p.sub { margin-bottom: 18px; }
.price-group p.after { margin: 12px 0 0; font-size: var(--t--1); color: var(--muted); }
.note.pricing-note { margin-top: 56px; }

/* 제품 페이지 하단 요금 안내 */
.rate-note { display: grid; gap: 18px; justify-items: start; }
.rate-note .cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── 표 ───────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); }
.price-table { width: 100%; border-collapse: collapse; background: var(--surface); min-width: 520px; }
.price-table th, .price-table td { padding: 16px 18px; text-align: left; vertical-align: top; }
.price-table th {
  background: var(--raised); font-size: var(--t--1); font-weight: 650; color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.price-table tr + tr td { border-top: 1px solid var(--line-soft); }
.price-table td { font-size: .9375rem; }
.price-table td.price { font-weight: 750; white-space: nowrap; font-variant-numeric: tabular-nums; }
.price-table td.price b { font-size: var(--t-1); }

.badge {
  display: inline-block; font-size: var(--t--1); font-weight: 600;
  padding: 3px 10px; border-radius: var(--r);
  background: var(--accent-sf); color: var(--accent);
}
.badge.mint { background: var(--accent-sf); color: var(--accent); }
.badge.navy { background: var(--raised); color: var(--muted); border: 1px solid var(--line); }

/* ── 본문 문서 (약관 등) ──────────────────────────────────── */
.doc { max-width: 760px; margin: 0 auto; padding: 64px 24px 88px; }
.doc h1 { margin: 0 0 6px; font-size: var(--t-3); font-weight: 780; letter-spacing: -.032em; }
.doc .updated { margin: 0 0 40px; color: var(--muted); font-size: var(--t--1); }
.doc h2 { margin: 40px 0 12px; font-size: var(--t-1); font-weight: 700; letter-spacing: -.022em; }
.doc p, .doc li { color: var(--ink); font-size: .9688rem; }
.doc ul, .doc ol { padding-left: 20px; margin: 10px 0; }
.doc li { margin-bottom: 6px; }
.doc li::marker { color: var(--muted); }
.doc .note {
  background: var(--accent-sf); border-left: 2px solid var(--accent);
  padding: 16px 20px; font-size: .9375rem; margin: 26px 0;
}

/* ── 자주 묻는 질문 ───────────────────────────────────────── */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); background: transparent; }
.faq summary {
  padding: 20px 0; font-weight: 650; cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  transition: color .16s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; color: var(--muted); font-weight: 400; font-size: 1.25rem; line-height: 1;
}
.faq details[open] summary::after { content: '\2212'; }
.faq summary:hover { color: var(--accent); }
.faq details p { margin: 0 0 22px; color: var(--muted); font-size: .9375rem; max-width: 62ch; }

/* ── 단계 안내 ────────────────────────────────────────────── */
.steps { display: grid; border-top: 1px solid var(--line); }
.step {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 20px;
  padding: 26px 0; border-bottom: 1px solid var(--line); align-items: start;
}
.step::before {
  content: counter(step, decimal-leading-zero); counter-increment: step;
  font-size: var(--t--1); font-weight: 650; color: var(--accent);
  font-variant-numeric: tabular-nums; padding-top: 3px;
}
.steps { counter-reset: step; }
.step h4 { margin: 0 0 6px; font-size: var(--t-1); font-weight: 700; letter-spacing: -.022em; }
.step p { margin: 0; color: var(--muted); font-size: .9375rem; max-width: 62ch; }

/* ── 섹션 대표 이미지 ─────────────────────────────────────── */
.section-visual { margin: 0 0 var(--gap-3); }
.section-visual img { display: block; width: 100%; border-radius: var(--r); }
.section-visual.ecosystem img { max-width: 640px; margin: 0 auto; }
.section-visual.trust img { max-width: 900px; margin: 0 auto; }

/* ── 바닥글 ───────────────────────────────────────────────── */
.site-footer { background: var(--deep); color: var(--deep-mut); margin-top: var(--gap-5); }
.site-footer .container { padding-block: 48px; }
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 24px; }
.footer-links a { color: var(--deep-ink); font-size: .9375rem; font-weight: 550; }
.footer-links a:hover { color: #fff; }
.biz-info { font-size: var(--t--1); line-height: 1.95; }
.biz-info strong { color: var(--deep-ink); font-weight: 650; }
.biz-info a { color: #9EC4BB; }

/* ── 화면 폭 대응 ─────────────────────────────────────────── */
@media (max-width: 980px) {
  .hero .hero-layout,
  .cta-split,
  .why { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .hero-copy { max-width: none; }
  .why-head { position: static; }
  .why-head p { max-width: 52ch; }
  .lineup-item.wide { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .lineup-item.wide.flip .lineup-media { order: 0; }
}

@media (max-width: 720px) {
  :root { --gap-5: 4rem; }
  .hero { padding: 56px 0 52px; }
  .hero-visual img, .cta-visual img { max-width: 520px; margin-inline: auto; }
  .lineup, .scenarios, .features { grid-template-columns: minmax(0, 1fr) !important; }
  .features { grid-template-columns: minmax(0, 1fr); }
  .site-header .container { height: 60px; }
  .nav a { padding: 6px 9px; font-size: .875rem; }
  .lineup-item, .lineup-item.wide { padding: 28px 22px; }
  .scenario { padding: 22px 20px; }
  .doc { padding: 44px 20px 64px; }
  .step { grid-template-columns: 38px minmax(0, 1fr); gap: 14px; }
}

@media (max-width: 420px) {
  .logo span.full { display: none; }
  .nav a { padding: 6px 7px; }
}

/* ══════════════════════════════════════════════════════════════
   결제 (checkout · 결과 · 주문 목록)
   ⚠ grid/flex 안의 입력칸에는 min-width:0 을 습관처럼 둔다 —
     안 그러면 좁은 화면에서 칸이 옆 칸을 밀어낸다.
   ══════════════════════════════════════════════════════════════ */
.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
.co-main { min-width: 0; }
.co-main h2 { font-size: var(--t-2); margin: 0 0 14px; }
.co-main h2 + * { margin-top: 0; }
.co-main > h2 ~ h2 { margin-top: 44px; }
.co-loading { color: var(--muted); }

.co-picks { display: grid; gap: 10px; }
.co-pick {
  display: grid; gap: 4px; text-align: left; cursor: pointer;
  padding: 16px 18px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .16s ease, background-color .16s ease;
}
.co-pick:hover { border-color: var(--ink); }
.co-pick.on { border-color: var(--accent); background: var(--accent-sf); box-shadow: inset 3px 0 0 var(--accent); }
.co-pick-name { font-weight: 700; font-size: var(--t-1); color: var(--ink); letter-spacing: -.02em; }
.co-pick-desc { color: var(--muted); font-size: .9063rem; line-height: 1.6; }
.co-pick-amount { margin-top: 4px; font-weight: 750; color: var(--ink); font-variant-numeric: tabular-nums; }

.co-custom { margin-top: 16px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--raised); }
.co-custom label { display: block; font-weight: 650; font-size: .9375rem; margin-bottom: 8px; }
.co-amountrow { display: flex; align-items: center; gap: 8px; }
.co-amountrow input { min-width: 0; flex: 1; }
.co-amountrow span { color: var(--muted); font-weight: 600; }

.co-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.co-field { min-width: 0; display: grid; gap: 7px; }
.co-field.co-wide { grid-column: 1 / -1; }
.co-field label { font-weight: 650; font-size: .9375rem; }
.co-field label b { color: var(--accent); }
.co-hint { margin: 2px 0 0; color: var(--muted); font-size: .8438rem; line-height: 1.6; }

.checkout input, .checkout textarea {
  min-width: 0; width: 100%; font: inherit; font-size: .9375rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 11px 13px;
}
.checkout textarea { resize: vertical; line-height: 1.7; }
.checkout input:focus, .checkout textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }

.co-side { position: sticky; top: 88px; min-width: 0; }
.co-summary { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 24px; }
.co-summary h3 { margin: 0 0 16px; font-size: var(--t-1); }
.co-line { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; font-size: .9375rem; }
.co-line span { color: var(--muted); flex: none; }
.co-line b { text-align: right; min-width: 0; overflow-wrap: anywhere; }
.co-line.total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 14px; }
.co-line.total b { font-size: var(--t-2); font-weight: 800; font-variant-numeric: tabular-nums; }
.co-pay { width: 100%; margin-top: 16px; }
.co-pay:disabled { opacity: .45; cursor: not-allowed; }

.co-msg { margin: 12px 0 0; font-size: .875rem; line-height: 1.6; color: var(--muted); }
.co-msg.bad { color: #B4331F; }
.co-msg.warn { color: #8A5A12; }
@media (prefers-color-scheme: dark) {
  .co-msg.bad { color: #FF9E8A; }
  .co-msg.warn { color: #E8B65C; }
}

.co-terms { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line-soft); display: grid; gap: 8px; }
.co-terms li { color: var(--muted); font-size: .8125rem; line-height: 1.65; }

@media (max-width: 900px) {
  .checkout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .co-side { position: static; }
}
@media (max-width: 560px) {
  .co-form { grid-template-columns: minmax(0, 1fr); }
}

/* ── 결제 결과 ─────────────────────────────────────────────── */
.done { max-width: 640px; margin: 0 auto; text-align: center; }
.done h1 { font-size: var(--t-4); margin: 0 0 12px; }
.done .lead { margin: 0 auto 28px; max-width: 46ch; }
.done-mark {
  width: 58px; height: 58px; margin: 0 auto 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.6rem; font-weight: 700;
  background: var(--accent); color: var(--accent-on);
}
.done-mark.bad { background: #B4331F; color: #fff; }
.done-card { text-align: left; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 20px 22px; }
.done-next { text-align: left; margin-top: 32px; }
.done-next h2 { font-size: var(--t-1); margin: 0 0 12px; }
.done-next ol { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.done-next li { color: var(--muted); font-size: .9375rem; line-height: 1.7; }
.done-next li b { color: var(--ink); font-weight: 650; }
.done-note { color: var(--muted); font-size: .9063rem; line-height: 1.7; }
.done-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 32px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9063rem; }

/* ── 주문 목록 (원장님용) ──────────────────────────────────── */
.ob-keybar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 20px 0 4px; }
.ob-keybar input[type=password] {
  min-width: 0; flex: 1 1 220px; max-width: 320px; font: inherit; font-size: .9375rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 11px 13px;
}
.ob-remember { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .875rem; }
.ob-empty { color: var(--muted); margin-top: 24px; }

.ob-card { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 18px 20px; margin-top: 14px; }
.ob-card.handled { opacity: .58; }
.ob-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ob-top b { font-size: var(--t-1); letter-spacing: -.02em; }
.ob-amount { margin-left: auto; font-weight: 750; font-variant-numeric: tabular-nums; }
.ob-badge { font-size: .75rem; font-weight: 700; padding: 3px 9px; border-radius: var(--r); background: var(--raised); color: var(--muted); }
.ob-badge.ok { background: var(--accent); color: var(--accent-on); }
.ob-badge.wait { background: #F3E7C8; color: #6E4E10; }
.ob-badge.bad { background: #F6DCD6; color: #8C2716; }
@media (prefers-color-scheme: dark) {
  .ob-badge.wait { background: #3A3016; color: #E8C877; }
  .ob-badge.bad { background: #3E1E18; color: #FF9E8A; }
}
.ob-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px 20px; }
.ob-body > div { min-width: 0; display: grid; gap: 3px; }
.ob-body span { color: var(--muted); font-size: .8125rem; }
.ob-body b { font-size: .9063rem; overflow-wrap: anywhere; }
.ob-memo { margin: 14px 0 0; padding: 12px 14px; background: var(--raised); border-radius: var(--r); font-size: .9063rem; line-height: 1.7; white-space: pre-wrap; }
.ob-handle { margin-top: 14px; }