/* 10 Studio — CI 2.0 토큰 (브랜딩 캔버스 「CI 2.0 · 정교화」 기준) */
:root {
  --ink-50: #F4F6F9;
  --ink-100: #E7EBF1;
  --ink-200: #CDD7E4;
  --ink-300: #A7B9D3;
  --ink-400: #7593BD;
  --ink-500: #4B6A93;
  --ink-600: #2E4E7B;
  --ink-700: #1F3A5F; /* 기본 */
  --ink-900: #0E1A2A;
  --steel-200: #D6D8DC;
  --steel-300: #E3E5E8;
  --steel-400: #9098A2;
  --steel-500: #5B6675; /* 보조 글자 · 흰 바탕 5.83 */
  --steel-700: #373D46;
  --text: #111418;      /* 먹 */
  --paper: #F6F6F4;     /* 종이 */
  --white: #FFFFFF;
  --sub-on-ink: #C9D6E8; /* 남색 위 보조 글자 7.80 */
  --lime: #D4FF3A;       /* 포인트 — 남색 · 먹 바탕 위에서만 면으로 */
  --ok: #2E6B4F; --ok-bg: #E6F0EA;
  --warn: #8A5A0F; --warn-bg: #F6EEDF;

  --font-ko: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-latin: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, Inter, "Pretendard Variable", Pretendard, sans-serif;

  --max: 1200px;
  --gutter: 24px;
  --radius-card: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-ko);
  font-size: 15px;
  line-height: 1.65;
  word-break: keep-all;
  overflow-wrap: break-word;
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; }
a { color: var(--ink-700); text-underline-offset: 3px; }
a:hover { color: var(--text); }
:focus-visible { outline: 2px solid var(--ink-700); outline-offset: 2px; border-radius: 4px; }
.dark :focus-visible { outline-color: var(--lime); }

.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.skip { position: absolute; left: -9999px; top: 0; background: var(--lime); color: var(--text); padding: 8px 16px; z-index: 10; }
.skip:focus { left: 16px; top: 16px; }

/* 글자 단계 (CI 2.0) — 48 · 34 · 17 · 15 · 13 */
.t-display { font-size: 48px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.22; margin: 0; text-wrap: balance; }
.t-title { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; margin: 0; text-wrap: balance; }
.t-heading { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.45; margin: 0; }
.t-lead { font-size: 17px; line-height: 1.65; margin: 0; }
.t-body { font-size: 15px; line-height: 1.65; margin: 0; }
.t-small { font-size: 13px; line-height: 1.6; margin: 0; }
.muted { color: var(--steel-500); }
.dark .muted { color: var(--sub-on-ink); }
.dark .screen .muted { color: var(--steel-500); }
.latin { font-family: var(--font-latin); }

/* 번호 라벨 — 1을 닮은 3×13 막대 + 두 자리 번호 */
.label { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; color: var(--steel-500); margin: 0; }
.label::before { content: ""; width: 3px; height: 13px; background: var(--ink-700); flex: none; }
.dark .label { color: var(--sub-on-ink); }
.dark .label::before { background: var(--lime); }
.chip { align-self: flex-start; display: inline-block; background: var(--ink-100); color: var(--ink-700); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; padding: 4px 12px; border-radius: 999px; }

/* 버튼 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px; border-radius: 10px; font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; border: 0; }
.btn-lime { background: var(--lime); color: var(--text); }
.btn-lime:hover { color: var(--text); filter: brightness(0.96); }
.btn-ink { background: var(--ink-700); color: var(--white); }
.btn-ink:hover { color: var(--white); background: var(--ink-600); }
.btn-ghost { color: var(--white); border: 1.5px solid var(--ink-500); }
.btn-ghost:hover { color: var(--white); border-color: var(--sub-on-ink); }

/* 머리 · 첫 화면 */
.dark { background: var(--ink-900); color: var(--white); }
.nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 20px; padding-bottom: 20px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--white); text-decoration: none; }
.brand:hover { color: var(--white); }
.wordmark { font-family: var(--font-latin); font-size: 17px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.wordmark .t { letter-spacing: -0.05em; }
.nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; font-size: 13px; font-weight: 600; }
.nav-links a { color: var(--sub-on-ink); text-decoration: none; padding: 12px 0; }
.nav-links a:hover { color: var(--white); }
.nav-links .btn { padding: 8px 16px; min-height: 40px; font-size: 13px; }

.hero { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; padding-top: 48px; padding-bottom: 64px; }
.hero-text { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.hero-text .t-lead { color: var(--sub-on-ink); max-width: 540px; }
.mark-u { box-shadow: inset 0 -0.18em 0 var(--lime); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-shot { flex: 1 1 360px; min-width: 0; }
.facts { border-top: 1px solid var(--ink-700); }
.facts .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 32px; padding-top: 24px; padding-bottom: 24px; font-size: 13px; line-height: 1.6; }
.facts dt { color: var(--ink-300); }
.facts dd { margin: 0; font-weight: 600; }

/* 화면 틀 (보조 그래픽 D) */
.frame { background: var(--ink-700); border-radius: 20px; padding: 20px 20px 0; overflow: hidden; }
.frame.steel { background: var(--steel-700); }
.frame.deep { background: var(--ink-900); }
.screen { background: var(--white); color: var(--text); border-radius: 12px 12px 0 0; padding: 16px; font-size: 13px; line-height: 1.5; }
.frame.deep .screen.navy { background: var(--ink-700); color: var(--white); }
.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--steel-300); }
.row > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag { flex: none; white-space: nowrap; border-radius: 6px; padding: 2px 8px; font-weight: 600; font-size: 13px; }
.tag.ok { background: var(--ok-bg); color: var(--ok); }
.tag.ink { background: var(--ink-100); color: var(--ink-700); }
.tag.warn { background: var(--warn-bg); color: var(--warn); }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 64px; }
.bars span { flex: 1; background: var(--ink-300); border-radius: 3px 3px 0 0; }
.bars span.hi { background: var(--ink-700); }
.navy .bars span { background: var(--ink-500); }
.navy .bars span.hi { background: var(--lime); }

/* 구역 */
.section { padding-top: 72px; padding-bottom: 72px; }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 24px; margin-bottom: 32px; }
.section-head > div { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.section-head > p { max-width: 400px; }
.bg-white { background: var(--white); }

.grid { display: grid; gap: 24px; }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); }

.card { background: var(--white); border-radius: var(--radius-card); padding: 28px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.card.tint { background: var(--ink-50); }
.card-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.card .shot { margin-top: auto; padding-top: 12px; }
.card .screen { height: 150px; overflow: hidden; }
.meta { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: 13px; line-height: 1.5; border-top: 1px solid var(--steel-200); padding-top: 14px; }
.meta dt { color: var(--steel-500); }
.meta dd { margin: 0; }
.ext { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; align-self: flex-start; }

.checks { list-style: none; margin: 0; padding: 0; }
.checks li { display: flex; gap: 12px; padding: 9px 0; border-top: 1px solid var(--steel-300); }
.checks svg { flex: none; margin-top: 3px; }

.promise { display: flex; flex-wrap: wrap; gap: 32px 64px; }
.promise > div { flex: 1 1 320px; display: flex; flex-direction: column; gap: 16px; }
.promise ol { flex: 999 1 480px; list-style: none; margin: 0; padding: 0; }
.promise li { display: flex; gap: 24px; padding: 18px 0; border-top: 1px solid var(--ink-600); }
.promise li:last-child { border-bottom: 1px solid var(--ink-600); }
.promise li .n { font-size: 13px; font-weight: 600; color: var(--lime); padding-top: 2px; }

.about { display: flex; flex-wrap: wrap; gap: 32px 64px; }
.about > div:first-child { flex: 1 1 320px; display: flex; flex-direction: column; gap: 12px; }
.about > div:last-child { flex: 999 1 480px; min-width: 0; max-width: 680px; display: flex; flex-direction: column; gap: 20px; }
.sign { display: flex; align-items: center; gap: 16px; border-top: 1px solid var(--steel-200); padding-top: 20px; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.steps li { border-top: 2px solid var(--text); padding-top: 20px; display: flex; flex-direction: column; gap: 6px; }

.contact { background: var(--ink-50); border-radius: var(--radius-card); padding: 32px; display: flex; flex-wrap: wrap; gap: 32px 48px; margin-top: 56px; }
.contact > div { flex: 1 1 280px; display: flex; flex-direction: column; gap: 14px; }
.contact form, .contact .contact-actions { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.contact-actions .checks .n { flex: none; font-size: 13px; font-weight: 600; color: var(--steel-500); padding-top: 2px; width: 20px; }
.btn-outline { color: var(--ink-700); border: 1.5px solid var(--ink-700); background: transparent; }
.btn-outline:hover { color: var(--text); border-color: var(--text); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 13px; font-weight: 600; }
.field input, .field textarea { font: inherit; font-size: 15px; padding: 12px 16px; border: 1px solid var(--steel-400); border-radius: 10px; background: var(--white); color: var(--text); min-height: 48px; width: 100%; }
.field textarea { resize: vertical; min-height: 112px; }
.form-note { font-size: 13px; color: var(--steel-500); margin: 0; }

.footer .wrap { display: flex; flex-direction: column; gap: 32px; padding-top: 56px; padding-bottom: 40px; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; border-top: 1px solid var(--ink-700); padding-top: 20px; font-size: 13px; color: var(--ink-300); }

@media (max-width: 720px) {
  .t-display { font-size: 34px; letter-spacing: -0.02em; }
  .section { padding-top: 56px; padding-bottom: 56px; }
  .hero { padding-top: 32px; padding-bottom: 48px; gap: 40px; }
  .nav-links { gap: 4px 16px; }
}
@media (max-width: 480px) {
  :root { --gutter: 16px; }
  .card { padding: 22px; }
  .contact { padding: 22px; }
}

/* ── 포트폴리오 중심 판 (2026-10-24) ── */
.hero-shot img { width: 100%; height: auto; border-radius: 12px 12px 0 0; }
.frame.img { padding: 16px 16px 0; }
.frame.img img { width: 100%; height: auto; border-radius: 10px 10px 0 0; display: block; }

.diffs { border-top: 1px solid var(--ink-700); }
.diffs ol { list-style: none; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px 32px; padding-top: 28px; padding-bottom: 28px; }
.diffs li { display: flex; flex-direction: column; gap: 4px; }
.diffs .n { font-size: 13px; font-weight: 600; color: var(--lime); }
.diffs .t-heading { color: var(--white); }
.diffs p { color: var(--sub-on-ink); font-size: 13px; margin: 0; line-height: 1.6; }

.compare { width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--radius-card); overflow: hidden; font-size: 15px; line-height: 1.6; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: 16px 20px; border-bottom: 1px solid var(--steel-300); }
.compare thead th { font-size: 13px; font-weight: 600; border-bottom: 2px solid var(--text); background: var(--white); }
.compare tbody tr:nth-child(even) td, .compare tbody tr:nth-child(even) th { background: #FAFAF9; }
.compare tbody tr:last-child td, .compare tbody tr:last-child th { border-bottom: 0; }
.compare th[scope="row"] { font-weight: 600; width: 16%; white-space: nowrap; }
.compare .them { color: var(--steel-500); width: 34%; }
.compare .us { font-weight: 500; }
.compare .us::before { content: ""; display: inline-block; width: 3px; height: 13px; background: var(--ink-700); margin-right: 10px; vertical-align: -1px; }
.table-scroll { overflow-x: auto; border-radius: var(--radius-card); }
.table-scroll .compare { min-width: 680px; }

.benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 24px; margin-top: 24px; }
.benefit { background: var(--white); border-radius: var(--radius-card); padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.benefit ul { list-style: none; margin: 0; padding: 0; }
.benefit li { display: flex; gap: 12px; padding: 9px 0; border-top: 1px solid var(--steel-300); }
.benefit li svg { flex: none; margin-top: 4px; }

.case { display: flex; flex-wrap: wrap; gap: 32px 56px; align-items: center; padding: 56px 0; border-top: 1px solid var(--steel-200); }
.case:first-of-type { border-top: 0; padding-top: 8px; }
.case-text { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.case-shot { flex: 1 1 480px; min-width: 0; }
.case.flip .case-shot { order: -1; }
.case-points { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
.case-points div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--steel-300); }
.case-points dt { font-size: 13px; font-weight: 600; color: var(--steel-500); padding-top: 1px; }
.case-points dd { margin: 0; }
.case-points .for-patient dt, .case-points .for-staff dt { color: var(--ink-700); }
.stats { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 13px; color: var(--steel-500); }
.stats strong { color: var(--text); font-size: 15px; }
.cap { font-size: 13px; color: var(--steel-500); margin: 10px 0 0; }

.work-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
.work-list li { border-top: 2px solid var(--text); padding-top: 18px; display: flex; flex-direction: column; gap: 8px; }

@media (max-width: 720px) {
  .case { padding: 40px 0; }
  .case.flip .case-shot { order: 0; }
  .case-points div { grid-template-columns: 80px 1fr; }
}
.diffs ol.wrap { margin: 0 auto; }
@media (max-width: 720px) {
  .table-scroll .compare { min-width: 0; }
  .compare thead { display: none; }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; }
  .compare tr { padding: 16px 20px; border-bottom: 1px solid var(--steel-300); }
  .compare tbody tr:nth-child(even) td, .compare tbody tr:nth-child(even) th { background: transparent; }
  .compare th, .compare td { padding: 0; border: 0; }
  .compare th[scope="row"] { font-size: 15px; margin-bottom: 8px; width: auto; white-space: normal; }
  .compare .them { width: auto; }
  .compare td + td { margin-top: 8px; }
  .compare td::before { content: attr(data-label); display: block; font-size: 13px; font-weight: 600; color: var(--steel-500); margin-bottom: 2px; }
  .compare .us::before { content: attr(data-label); display: block; width: auto; height: auto; background: none; margin: 0 0 2px; color: var(--ink-700); }
}

/* ── 고객 유형별 판 (2026-10-25) ── */
.nav-links a[aria-current="page"] { color: var(--white); box-shadow: inset 0 -2px 0 var(--lime); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: 13px; font-weight: 600; }
.footer-nav a { color: var(--sub-on-ink); text-decoration: none; padding: 8px 0; }
.footer-nav a:hover { color: var(--white); }
.hero-short, .hero-home { padding-bottom: 72px; }
.hero-home .hero-text { max-width: 760px; }
.ext.on-dark { color: var(--lime); }
.ext.on-dark:hover { color: var(--white); }

/* 홈 — 세 갈래 */
.paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px; }
.path { background: var(--white); border-radius: var(--radius-card); overflow: hidden; display: flex; flex-direction: column; color: var(--text); text-decoration: none; border: 1px solid var(--steel-300); transition: border-color .15s; }
.path:hover { color: var(--text); border-color: var(--ink-700); }
.path-shot { border-radius: 0; height: 240px; }
.path-shot img { height: 224px !important; object-fit: cover; object-position: top; }
.path-shot .pdp { height: 224px; overflow: hidden; }
.path-body { padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.path-list { list-style: none; margin: 4px 0 0; padding: 0; font-size: 15px; }
.path-list li { padding: 8px 0; border-top: 1px solid var(--steel-300); }
.path-go { margin-top: auto; padding-top: 12px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink-700); }
.path:hover .path-go { color: var(--text); }

/* 예시 시안 알림 */
.notice { display: flex; gap: 12px; align-items: flex-start; background: #F4FBD9; color: var(--text); border-radius: 14px; padding: 16px 20px; margin-bottom: 32px; }
.notice svg { flex: none; color: #4F6600; margin-top: 2px; }
.notice p { margin: 0; }
.sample-badge { position: absolute; top: 12px; right: 12px; z-index: 1; background: var(--lime); color: var(--text); font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }

/* 가상 상품 상세페이지 (예시 시안) */
.pdp { position: relative; background: var(--white); color: var(--text); border-radius: 12px 12px 0 0; padding: 16px 16px 20px; font-size: 13px; line-height: 1.5; display: flex; flex-direction: column; gap: 8px; }
.pdp p { margin: 0; }
.pdp-photo { background: #EFE7DC; border-radius: 10px; height: 180px; display: grid; place-items: center; }
.pdp-hero .pdp-photo { height: 200px; }
.dripbag { width: 92px; height: 116px; background: #FFFFFF; border-radius: 4px; position: relative; box-shadow: 0 6px 16px rgba(60,40,20,.15); display: grid; place-items: center; clip-path: polygon(0 10px, 10px 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.dripbag::before { content: ""; position: absolute; left: 10px; right: 10px; top: 16px; border-top: 1.5px dashed #B49C80; }
.dripbag span { font-family: var(--font-latin); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-align: center; line-height: 1.2; color: #5A3E26; margin-top: 12px; }
.pdp-brand { color: var(--steel-500); font-size: 13px; margin-top: 4px !important; }
.pdp-name { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.35; }
.pdp-price { color: var(--steel-500); }
.pdp-price strong { color: var(--text); font-size: 17px; margin-right: 6px; }
.pdp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pdp-chips span { background: var(--ink-50); color: var(--ink-700); font-weight: 600; padding: 2px 8px; border-radius: 6px; }
.pdp-facts { margin: 4px 0 0; }
.pdp-facts div { display: grid; grid-template-columns: 64px 1fr; gap: 8px; padding: 8px 0; border-top: 1px solid var(--steel-300); }
.pdp-facts dt { color: var(--steel-500); font-weight: 600; }
.pdp-facts dd { margin: 0; }
.pdp-h { font-size: 15px; font-weight: 700; margin-top: 8px !important; }
.pdp-h:first-child { margin-top: 0 !important; }
.pdp-list { list-style: none; margin: 0; padding: 0; }
.pdp-list li { display: flex; gap: 8px; padding: 4px 0; }
.pdp-list svg { flex: none; color: var(--ok); margin-top: 2px; }
.pdp-list.no svg { color: var(--warn); }
.pdp-taste { margin: 0; }
.pdp-taste div { display: grid; grid-template-columns: 52px 1fr; align-items: center; padding: 3px 0; }
.pdp-taste dt { color: var(--steel-500); }
.pdp-taste dd { margin: 0; display: flex; gap: 4px; }
.pdp-taste i { width: 22px; height: 8px; border-radius: 4px; background: var(--steel-300); }
.pdp-taste i.on { background: #8A5A2B; }
.pdp-table { width: 100%; border-collapse: collapse; }
.pdp-table th, .pdp-table td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--steel-300); }
.pdp-table thead th { font-weight: 600; color: var(--steel-500); border-bottom: 2px solid var(--text); }
.pdp-table tr.pick td { font-weight: 700; background: var(--ink-50); }
.pdp-how { list-style: none; margin: 0; padding: 0; }
.pdp-how li { display: flex; gap: 10px; align-items: center; padding: 5px 0; }
.pdp-how span { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--ink-700); color: var(--white); font-weight: 700; display: grid; place-items: center; font-size: 13px; }
.pdp-faq { margin: 0; }
.pdp-faq dt { font-weight: 600; padding-top: 8px; border-top: 1px solid var(--steel-300); }
.pdp-faq dd { margin: 2px 0 8px; color: var(--steel-500); }

.pdp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px; align-items: start; }
.pdp-step { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.pdp-step .frame { padding: 16px 16px 0; }
.pdp-step figcaption { display: flex; flex-direction: column; gap: 4px; }
.pdp-step figcaption .n { font-size: 13px; font-weight: 600; color: var(--ink-700); }
.channel-list { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 24px; }
.channel-list li { border-top: 2px solid var(--text); padding-top: 16px; display: flex; flex-direction: column; gap: 6px; }

/* 쇼핑몰 — 아임웹 근거 */
.proof { display: flex; flex-wrap: wrap; gap: 32px 56px; align-items: center; }
.proof-text { flex: 1 1 380px; display: flex; flex-direction: column; gap: 16px; }
.proof-shot { flex: 1 1 440px; min-width: 0; }
.proof .frame { background: var(--ink-700); }

/* 브랜드 */
.sns-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sns-pair .cap { grid-column: 1 / -1; margin-top: 0; }
.sns-pair .frame { border-radius: 20px 20px 0 0; }
.ci-board { background: var(--ink-700); border-radius: 20px; padding: 40px; display: flex; flex-direction: column; gap: 32px; color: var(--white); }
.ci-mark { width: 160px; height: auto; color: var(--white); }
.ci-swatches { display: flex; gap: 10px; }
.ci-swatches span { width: 44px; height: 44px; border-radius: 10px; }
.ci-line { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font-size: 13px; color: var(--sub-on-ink); }
.ci-line svg { width: 160px; height: auto; }

/* 소개 — 걸어온 길 */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 24px 0; border-top: 1px solid var(--steel-300); }
.timeline li:last-child { border-bottom: 1px solid var(--steel-300); }
.timeline .year { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-700); line-height: 1.3; }
.timeline li > div { display: flex; flex-direction: column; gap: 4px; max-width: 680px; }

@media (max-width: 720px) {
  .timeline li { grid-template-columns: 1fr; gap: 6px; }
  .ci-board { padding: 28px; }
  .path-body { padding: 20px 22px 24px; }
}
.pdp-steps { align-items: stretch; }
.pdp-step .frame { flex: 1; display: flex; flex-direction: column; }
.pdp-step .pdp { flex: 1; }
/* 홈 첫 화면 마크 모션 */
.hero-mark { flex: 1 1 320px; min-width: 0; display: flex; justify-content: center; align-items: center; }
.mark-motion { width: 100%; max-width: 400px; height: auto; color: var(--white); }
@media (max-width: 720px) { .hero-mark { justify-content: flex-start; } .mark-motion { max-width: 200px; } }
.footer-mail { color: var(--ink-300); }
.footer-mail:hover { color: var(--white); }