/* ============ miristudio — v5 (Canva 컨펌 시안: 벤토 카드 에디토리얼) ============
   기준: 시안D 디벨롭(2026-07-15 사용자 컨펌) — 라벤더 그레이 페이지 위에
   큰 라운드 카드들이 떠 있는 구성. 헤더=뉴트럴 그레이 카드, 본문=다크 플럼 카드,
   점선 구분선, 큰 스탯 타이포. 바이올렛은 로고·포인트에만 소량.               */
:root {
  --bg: #f4f2f7;                 /* 라벤더 그레이 페이지 */
  --bg-subtle: #ece9f0;
  --ink: #272430;                /* 다크 플럼 잉크 */
  --body: #59535f;
  --muted: #8a8590;
  --faint: #a5a0ac;
  --line: #dcd8e0;
  --line-strong: #c9c4cc;
  --accent: #8e6ac7;             /* 브랜드 바이올렛 — 로고·포인트 소량 */
  --rose: #e39096;
  --pink: #c97ab0;
  --card-gray: #cbc8d0;          /* 헤더 카드 (컨펌 시안) */
  --dark: #3a3644;               /* 다크 플럼 카드 */
  --dark-deep: #272430;
  --dark-line: #59535f;
  --dark-body: #b3aebb;
  --accent-dark: #9978cf;
  --r-md: 16px;
  --r-lg: 28px;                  /* 벤토 카드 라운드 */
  --shadow-sm: 0 1px 2px rgba(39, 36, 48, 0.05);
  --shadow-md: 0 6px 18px rgba(39, 36, 48, 0.07);
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, "Noto Sans KR", sans-serif;
  --font-display: "Archivo", "Pretendard Variable", Pretendard, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 15px;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }

.container { width: min(1080px, 93%); margin: 0 auto; }
section { padding: 72px 0; }

/* ---------- 스크롤 등장 ---------- */
[data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: calc(var(--stagger, 0) * 90ms);
}
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- 타이포 ---------- */
h1, h2, h3 { text-wrap: balance; letter-spacing: -0.03em; font-family: var(--font-display); }
h2 { font-size: clamp(25px, 3.2vw, 34px); font-weight: 700; line-height: 1.25; margin-bottom: 14px; }
h2 .hl { color: var(--accent); }
.section-lead { color: var(--muted); max-width: 58ch; margin-bottom: 44px; font-size: 15.5px; }
.eyebrow {
  display: block; font-family: var(--font-display); font-size: 12px; font-weight: 500;
  color: var(--muted); margin-bottom: 14px;
  text-transform: uppercase; letter-spacing: 0.22em;
}

/* ---------- 내비게이션 ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244, 242, 247, 0.88);
  backdrop-filter: blur(12px);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }

/* ---------- 12e 로고 로크업 ---------- */
.lockup { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); }
.lk-word { display: flex; align-items: baseline; }
.lk-miri { position: relative; }
.lk-miri span {
  font-weight: 700; font-size: 30px; letter-spacing: -0.04em; line-height: 1;
  mix-blend-mode: multiply;
}
.lk-g1, .lk-g2 { position: absolute; top: 0; }
.lk-g1 { left: 6px; color: var(--rose); }
.lk-g2 { left: 3px; color: var(--pink); }
.lk-front { position: relative; color: var(--accent); }
.lk-studio {
  font-weight: 700; font-size: 23px; letter-spacing: -0.04em; line-height: 1;
  color: var(--ink); margin-left: 8px;
}
.lk-div { width: 1px; height: 28px; background: var(--line-strong); }
.lk-slogan {
  font-weight: 500; font-size: 9.5px; letter-spacing: 0.14em; line-height: 1.5;
  color: var(--muted); text-transform: uppercase;
}
.lockup:hover .lk-g1 { animation: lk-spread1 0.4s ease-out; }
.lockup:hover .lk-g2 { animation: lk-spread2 0.4s ease-out; }
@keyframes lk-spread1 { from { left: 0; } to { left: 6px; } }
@keyframes lk-spread2 { from { left: 0; } to { left: 3px; } }
.lockup.on-dark .lk-miri span { mix-blend-mode: screen; }
.lockup.on-dark .lk-g1 { color: #e1878e; }
.lockup.on-dark .lk-g2 { color: var(--pink); }
.lockup.on-dark .lk-front { color: var(--accent-dark); }
.lockup.on-dark .lk-studio { color: #f4f2f7; }
.lockup.on-dark .lk-div { background: var(--dark-line); }
.lockup.on-dark .lk-slogan { color: var(--dark-body); }

.nav-links { display: flex; gap: 4px; font-size: 14px; font-weight: 500; color: var(--muted); }
.nav-links a { padding: 7px 12px; border-radius: 999px; transition: color 0.15s, background 0.15s; }
.nav-links a:hover { color: var(--ink); background: rgba(39, 36, 48, 0.06); }
.nav-cta {
  background: var(--ink); color: var(--bg);
  padding: 9px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  transition: background 0.2s, transform 0.1s;
}
.nav-cta:hover { background: var(--accent); }
.nav-cta:active { transform: scale(0.98); }
.nav-toggle { display: none; background: none; border: 0; font-size: 22px; cursor: pointer; color: var(--ink); }

/* ---------- 버튼 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 46px; padding: 0 26px; border-radius: 999px;
  font-weight: 600; font-size: 14.5px; cursor: pointer; border: 0;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.1s;
}
.btn .arr { transition: transform 0.2s; font-size: 15px; }
.btn:hover .arr { transform: translateX(2px); }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { background: var(--accent); }
.btn-accent { background: var(--accent); color: #f4f2f7; }
.btn-accent:hover { background: var(--ink); }
.btn-ghost { border: 1.5px solid var(--ink); background: transparent; color: var(--ink); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-dark-ghost { border: 1.5px solid var(--dark-line); background: transparent; color: #f4f2f7; }
.btn-dark-ghost:hover { border-color: var(--accent-dark); color: var(--accent-dark); }

/* ---------- 히어로 (뉴트럴 그레이 카드 — 컨펌 시안) ---------- */
.hero { padding: 20px 0 36px; }
.hero-card {
  background: var(--card-gray); border-radius: var(--r-lg);
  padding: clamp(48px, 7vw, 88px) clamp(28px, 6vw, 80px);
  text-align: center;
}
.hero-card h1 {
  font-size: clamp(34px, 5.2vw, 58px);
  font-weight: 800; letter-spacing: -0.04em; line-height: 1.18;
  color: var(--ink); margin-bottom: 20px;
}
.xpose { position: relative; display: inline-block; }
.xpose i { font-style: normal; mix-blend-mode: multiply; }
.xpose .x1, .xpose .x2 { position: absolute; top: 0; }
.xpose .x1 { left: 0.14em; color: var(--rose); }
.xpose .x2 { left: 0.07em; color: var(--pink); }
.xpose .x0 { position: relative; color: var(--accent); }
.hero-sub {
  color: var(--body); font-size: 16.5px; max-width: 46ch;
  margin: 0 auto 32px; line-height: 1.7;
}
.hero-ctas { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ---------- 다크 벤토 카드 (시안 핵심) ---------- */
.bento-wrap { padding: 16px 0 40px; }
.bento {
  background: var(--dark); color: #f4f2f7;
  border-radius: var(--r-lg);
  padding: clamp(36px, 5.5vw, 72px) clamp(24px, 5vw, 72px);
}
.dotsep {
  border: 0; border-top: 6px dotted rgba(244, 242, 247, 0.75);
  margin: clamp(36px, 5vw, 56px) 0; width: 100%;
}
.stat-hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; }
.stat-big {
  font-family: var(--font-display);
  font-size: clamp(52px, 7vw, 84px); font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.05; margin-bottom: 18px;
}
.stat-desc { color: var(--dark-body); font-size: 14.5px; max-width: 38ch; line-height: 1.7; }
.bento-photo {
  border-radius: var(--r-md); overflow: hidden;
  background: #efedf2; padding: 16px;
}
.bento-photo img { border-radius: 8px; aspect-ratio: 4/5; object-fit: cover; width: 100%; }

.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 44px 56px; }
.stat-cell { display: block; transition: transform 0.15s; }
a.stat-cell:hover { transform: translateY(-3px); }
a.stat-cell:hover .stat-num { color: var(--accent-dark); }
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 44px); font-weight: 800; letter-spacing: -0.02em;
  line-height: 1.1; margin-bottom: 8px; transition: color 0.15s;
}
.stat-label { color: var(--dark-body); font-size: 13.5px; line-height: 1.65; }

.quote-row { display: grid; grid-template-columns: 0.65fr 1.35fr; gap: 44px; align-items: center; }
.quote-photo { border-radius: var(--r-md); overflow: hidden; }
.quote-photo img { aspect-ratio: 1/1; object-fit: cover; width: 100%; }
.quote-text {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.4vw, 26px); font-weight: 700; line-height: 1.45;
  letter-spacing: -0.02em;
}
.quote-by { margin-top: 14px; font-size: 14px; font-weight: 700; color: var(--dark-body); }

.bento-para { color: var(--dark-body); font-size: 14.5px; line-height: 1.8; max-width: 72ch; }
.bento-para b { color: #f4f2f7; }
.bento-cta { text-align: center; margin-top: clamp(36px, 5vw, 56px); }
.bento-cta .btn { background: #f4f2f7; color: var(--ink); }
.bento-cta .btn:hover { background: var(--accent-dark); color: #f4f2f7; }

/* ---------- 이용 방법 ---------- */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.step-card {
  background: #fff; border-radius: var(--r-md);
  padding: 30px 28px; box-shadow: var(--shadow-sm);
}
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 999px;
  background: var(--bg); color: var(--body);
  font-size: 13px; font-weight: 700; margin-bottom: 18px;
  font-variant-numeric: tabular-nums;
}
.step-card h3 { font-size: 16.5px; font-weight: 700; margin-bottom: 8px; }
.step-card p { font-size: 14px; color: var(--muted); line-height: 1.65; }

.before-after {
  margin-top: 48px;
  background: #fff; border-radius: var(--r-lg); padding: 40px;
  display: grid; grid-template-columns: auto auto 1fr; gap: 40px; align-items: center;
  box-shadow: var(--shadow-sm);
}
.ba-inputs { display: flex; gap: 10px; }
.ba-inputs img {
  width: 96px; border-radius: var(--r-md);
  aspect-ratio: 4/5; object-fit: cover;
}
.ba-arrow { font-size: 13.5px; font-weight: 600; color: var(--muted); text-align: center; line-height: 1.5; }
.ba-arrow .arr-line { font-size: 22px; display: block; color: var(--accent); }
.ba-label { font-size: 12.5px; color: var(--muted); margin-top: 10px; text-align: center; }
.ba-slider-wrap { max-width: 360px; justify-self: center; }
.ba-slider {
  --divider-width: 2px;
  --divider-color: #fff;
  --default-handle-width: 56px;
  --default-handle-color: #fff;
  width: 100%; border-radius: var(--r-md); overflow: hidden;
  aspect-ratio: 3/4;
}
.ba-slider img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* ---------- 사진 가이드 ---------- */
.guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.guide-card {
  background: #fff; border-radius: var(--r-md);
  padding: 30px 28px; box-shadow: var(--shadow-sm);
}
.guide-card h3 { font-size: 15.5px; font-weight: 700; margin-bottom: 14px; }
.guide-card.good h3 { color: var(--accent); }
.guide-card.bad h3 { color: var(--rose); }
.guide-card li { font-size: 14px; color: var(--body); padding: 7px 0; display: flex; gap: 10px; line-height: 1.55; }
.guide-card.good li::before { content: "✓"; color: var(--accent); font-weight: 700; flex-shrink: 0; }
.guide-card.bad li::before { content: "✕"; color: var(--rose); font-weight: 700; flex-shrink: 0; }
.guide-note { margin-top: 20px; font-size: 13.5px; color: var(--muted); }

/* ---------- 갤러리 ---------- */
.gallery-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
}
.g-item { position: relative; border-radius: var(--r-md); overflow: hidden; background: #fff; }
.g-item.tall { grid-row: span 2; }
.g-item a { display: block; width: 100%; height: 100%; }
.g-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.45s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.g-item:hover img { transform: scale(1.04); }
.g-item figcaption {
  position: absolute; left: 10px; bottom: 10px; pointer-events: none;
  background: rgba(244, 242, 247, 0.94); color: var(--body);
  font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px;
}
.g-more { display: none; } /* 라이트박스 전용 추가 컷 — 그리드에는 비노출 */
.gallery-note { margin-top: 20px; font-size: 12.5px; color: var(--faint); }

/* ---------- B2B — 다크 플럼 카드 ---------- */
.b2b { padding: 40px 0 72px; }
.b2b-box {
  background: var(--dark); color: var(--dark-body); border-radius: var(--r-lg);
  padding: 56px 52px;
  display: grid; grid-template-columns: 1.5fr 0.5fr; gap: 40px; align-items: center;
}
.b2b-box h2 { color: #f4f2f7; }
.b2b-box h2 .hl { color: var(--accent-dark); }
.b2b-box p { color: var(--dark-body); font-size: 14.5px; max-width: 56ch; line-height: 1.7; }
.b2b-tag {
  font-family: var(--font-display); font-size: 12px; font-weight: 500;
  color: var(--accent-dark); display: block; margin-bottom: 14px;
  text-transform: uppercase; letter-spacing: 0.22em;
}
.b2b-box .btn { background: #f4f2f7; color: var(--ink); justify-self: end; }
.b2b-box .btn:hover { background: var(--accent-dark); color: #f4f2f7; }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; }
.faq-cell { padding: 24px 0; border-top: 1px solid var(--line); }
.faq-cell h3 { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.faq-cell h3::before { content: "Q. "; color: var(--accent); }
.faq-cell p { font-size: 13.5px; color: var(--muted); line-height: 1.7; }
.faq-cell a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 주문 (다크 플럼 카드) ---------- */
.final-cta { padding: 8px 0 72px; }
.order-card {
  background: var(--dark); color: #f4f2f7; border-radius: var(--r-lg);
  padding: clamp(48px, 7vw, 80px) clamp(24px, 5vw, 64px);
  text-align: center;
}
.order-card h2 { font-size: clamp(27px, 3.8vw, 40px); color: #f4f2f7; }
.order-card > .container > p, .order-lead { color: var(--dark-body); margin-bottom: 30px; }
.order-steps { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
  list-style: none; padding: 0; margin: 26px 0 30px; counter-reset: ostep; }
.order-steps li { background: rgba(244, 242, 247, 0.06); border: 1px solid rgba(244, 242, 247, 0.14);
  border-radius: var(--r-md); padding: 14px 18px; min-width: 150px; text-align: left; counter-increment: ostep; }
.order-steps li::before { content: counter(ostep); display: inline-block; width: 22px; height: 22px;
  border-radius: 50%; background: var(--accent-dark); color: #fff; font-size: 12.5px; font-weight: 700;
  text-align: center; line-height: 22px; margin-bottom: 8px; }
.order-steps li b { display: block; font-size: 14.5px; margin-bottom: 2px; }
.order-steps li span { font-size: 12.5px; opacity: 0.75; line-height: 1.45; display: block; }
.order-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.order-card .btn-primary { background: #f4f2f7; color: var(--ink); }
.order-card .btn-primary:hover { background: var(--accent-dark); color: #f4f2f7; }
.order-note { margin-top: 16px; font-size: 12.5px; opacity: 0.65; }
.order-note a { color: inherit; text-decoration: underline; }

/* ---------- 푸터 ---------- */
footer {
  background: transparent; color: var(--muted);
  padding: 8px 0 48px; font-size: 13px;
}
.footer-inner { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: flex-start;
  border-top: 1px solid var(--line); padding-top: 32px; }
.footer-inner a { text-decoration: underline; text-underline-offset: 3px; }
.footer-inner a:hover { color: var(--ink); }
.footer-legal { margin-top: 24px; font-size: 12px; color: var(--faint); max-width: 640px; line-height: 1.7; }
footer .lockup .lk-miri span { font-size: 22px; }
footer .lockup .lk-studio { font-size: 17px; }

/* ---------- 약관 페이지 ---------- */
.doc-page { max-width: 720px; margin: 0 auto; padding: 64px 0 96px; }
.doc-page h1 { font-size: 28px; font-weight: 800; margin-bottom: 8px; }
.doc-page .doc-date { color: var(--muted); font-size: 13px; margin-bottom: 40px; }
.doc-page h2 { font-size: 18px; margin: 42px 0 12px; }
.doc-page h3 { font-size: 15px; font-weight: 700; margin: 26px 0 8px; }
.doc-page p, .doc-page li { font-size: 14px; color: var(--body); }
.doc-page ul { list-style: disc; padding-left: 22px; }
.doc-page table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 13.5px; }
.doc-page th, .doc-page td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.doc-page th { background: #fff; width: 120px; }

/* ---------- 스티커 보드 ---------- */
.sticker-page { padding: 56px 0 96px; }
.sticker-page h1 { font-size: clamp(26px, 3.6vw, 38px); font-weight: 800; margin-bottom: 12px; }
.sticker-lead { color: var(--muted); max-width: 56ch; margin-bottom: 40px; }
.sticker-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: start; }
.cat { padding: 18px 0; border-top: 1px solid var(--line); }
.cat h3 { font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.cat h3 small { font-weight: 500; font-size: 12px; color: var(--faint); margin-left: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1.5px solid var(--line-strong); background: #fff; color: var(--body);
  border-radius: 999px; padding: 8px 16px; font-size: 13.5px; font-weight: 500; cursor: pointer;
  font-family: var(--font-sans); transition: all 0.15s; }
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.on { background: var(--accent); border-color: var(--accent); color: #f4f2f7; font-weight: 600; }
/* 취향 진단에서 도착했을 때 안내 배너 */
.quiz-arrival { margin: 14px 0 0; padding: 12px 16px; border-radius: 12px;
  background: #f3eefb; color: var(--accent); font-weight: 600; font-size: 14.5px;
  word-break: keep-all; }
/* 사진 카드형 스티커 (장소) — 세로 3:4 예시컷, 글자 칩과 같은 토글 동작 */
.chips.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.chip-card { display: flex; flex-direction: column; padding: 0; overflow: hidden;
  border-radius: 14px; background: #fff; text-align: center; }
.chip-card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.chip-card span { padding: 8px 4px 9px; font-size: 13.5px; }
.chip-card:hover { color: var(--body); box-shadow: 0 4px 14px rgba(90, 70, 130, .16); }
.chip-card.on { background: #fff; color: var(--accent);
  outline: 2.5px solid var(--accent); outline-offset: -2.5px; }
.chip-card.on span { font-weight: 700; }
.sticker-board-wrap { position: sticky; top: 84px; }
.sticker-board { background: var(--dark); color: #f4f2f7; border-radius: var(--r-lg); padding: 28px 26px; }
.sticker-board h2 { font-size: 17px; color: #f4f2f7; margin-bottom: 16px; }
.board-chips { min-height: 96px; display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start;
  background: rgba(244, 242, 247, 0.05); border: 1px dashed var(--dark-line);
  border-radius: var(--r-md); padding: 14px; margin-bottom: 18px; }
.board-empty { color: var(--dark-body); font-size: 13px; margin: auto; }
.board-chip { background: var(--accent-dark); color: #f4f2f7; border-radius: 999px;
  padding: 6px 14px; font-size: 13px; font-weight: 600; }
.board-chip:nth-child(odd) { transform: rotate(-1.5deg); }
.board-chip:nth-child(even) { transform: rotate(1.2deg); background: var(--pink); }
.board-chip:nth-child(3n) { background: #e1878e; }
.board-actions { display: flex; flex-direction: column; gap: 8px; }
.board-actions .btn-primary { background: #f4f2f7; color: var(--ink); }
.board-actions .btn-primary:hover { background: var(--accent-dark); color: #f4f2f7; }
.board-actions .btn-ghost { border-color: var(--dark-line); color: #f4f2f7; }
.board-actions .btn-ghost:hover { border-color: var(--accent-dark); color: var(--accent-dark); }
.board-hint { margin-top: 14px; font-size: 12px; color: var(--dark-body); line-height: 1.6; }

/* ---------- 반응형 ---------- */
@media (max-width: 900px) {
  section { padding: 56px 0; }
  .hero-card { text-align: left; }
  .hero-ctas { justify-content: flex-start; }
  .hero-sub { margin-left: 0; }
  .stat-hero, .quote-row { grid-template-columns: 1fr; gap: 28px; }
  .stat-grid { grid-template-columns: 1fr; gap: 32px; }
  .steps-grid { grid-template-columns: 1fr; }
  .guide-grid { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: 1fr; gap: 0; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 190px; }
  .before-after { grid-template-columns: 1fr; text-align: center; padding: 28px; }
  .ba-inputs { justify-content: center; }
  .b2b-box { grid-template-columns: 1fr; padding: 40px 28px; }
  .b2b-box .btn { justify-self: start; }
  .sticker-layout { grid-template-columns: 1fr; }
  .sticker-board-wrap { position: static; }
  .nav-links {
    display: none; position: absolute; top: 64px; left: 0; right: 0;
    background: var(--bg); flex-direction: column; gap: 0;
    border-bottom: 1px solid var(--line); padding: 8px 0;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 13px 24px; border-radius: 0; }
  .nav-toggle { display: block; }
  .nav .lk-div, .nav .lk-slogan { display: none; }
}

/* ═══ 타임라인·추가금 비교 (2026-07-18 플래너 문법 보강) ═══ */
.tl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tl-card{background:#fff;border-radius:var(--r-md);padding:28px 26px;box-shadow:var(--shadow-sm)}
.tl-when{font-family:var(--font-display);font-size:12px;font-weight:500;color:var(--accent);
  text-transform:uppercase;letter-spacing:.18em;margin-bottom:10px}
.tl-card h3{font-size:18px;font-weight:800;margin-bottom:8px}
.tl-card p{font-size:13.5px;color:var(--muted);line-height:1.65}
.cmp-wrap{overflow-x:auto}
.cmp-table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;
  border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm);font-size:14px}
.cmp-table th{background:var(--dark);color:#f4f2f7;text-align:left;padding:14px 18px;
  font-weight:600;font-size:13.5px}
.cmp-table td{padding:13px 18px;border-top:1px solid var(--line);color:var(--body)}
.cmp-table td:first-child{font-weight:600;color:var(--ink)}
.cmp-table td.zero{color:var(--accent);font-weight:700}
.cmp-note{margin-top:14px;font-size:12.5px;color:var(--faint)}
@media (max-width:900px){.tl-grid{grid-template-columns:1fr}}

/* ══════════════════════════════════════════════════════════════════
   MOTION LAYER v5.1 (2026-07-21) — 벤토 브랜드 보존, 모션만 추가.
   전 구간 transform/opacity. index 전용 요소로 스코프(약관·스티커 무영향).
   Lenis 제거 → 네이티브 scroll-behavior:smooth. reduced-motion 완전 비활성.
   (전역 [data-reveal] 리튠은 파일 상단 '스크롤 등장' 블록에서 처리)
   ══════════════════════════════════════════════════════════════════ */

/* 1. 히어로 로드 시퀀스 — 헤드라인 → 미리 고스트 분해 → 서브 → CTA (0/160/320/460ms) */
.hero-card h1  { animation: ms-rise .78s cubic-bezier(0.22,0.61,0.36,1) both; }
.hero-sub      { animation: ms-rise .78s cubic-bezier(0.22,0.61,0.36,1) .32s both; }
.hero-ctas     { animation: ms-rise .78s cubic-bezier(0.22,0.61,0.36,1) .46s both; }
.xpose .x1     { animation: ms-ghost1 .6s cubic-bezier(0.22,0.61,0.36,1) .16s both; }
.xpose .x2     { animation: ms-ghost2 .6s cubic-bezier(0.22,0.61,0.36,1) .16s both; }
@keyframes ms-rise   { from { opacity:0; transform: translateY(22px); } to { opacity:1; transform: translateY(0); } }
@keyframes ms-ghost1 { from { transform: translateX(-0.14em); } to { transform: translateX(0); } }
@keyframes ms-ghost2 { from { transform: translateX(-0.07em); } to { transform: translateX(0); } }

/* 2. 카운트업 자릿수 안정 (변동 중 레이아웃 시프트 0) */
.stat-big, .stat-num { font-variant-numeric: tabular-nums; }

/* 3. 갤러리 타일 스태거 리빌 + 캡션 호버 리프트 */
.gallery-grid .g-item {
  opacity: 0; transform: translateY(24px) scale(0.98);
  transition: opacity .6s cubic-bezier(0.22,0.61,0.36,1),
              transform .6s cubic-bezier(0.22,0.61,0.36,1);
}
.gallery-grid.in .g-item { opacity: 1; transform: none; }
.gallery-grid.in .g-item:nth-child(1) { transition-delay: 0ms; }
.gallery-grid.in .g-item:nth-child(2) { transition-delay: 60ms; }
.gallery-grid.in .g-item:nth-child(3) { transition-delay: 120ms; }
.gallery-grid.in .g-item:nth-child(4) { transition-delay: 180ms; }
.gallery-grid.in .g-item:nth-child(5) { transition-delay: 240ms; }
.gallery-grid.in .g-item:nth-child(6) { transition-delay: 300ms; }
.g-item figcaption { transition: transform .22s ease, background .22s ease; }
.g-item:hover figcaption { transform: translateY(-3px); background: rgba(244,242,247,1); }

/* 4. 가격 카드 그라데이션 하이라이트 보더 + 리프트 (호버/키보드 포커스) */
.stat-cell.form-cta { position: relative; }
.stat-cell.form-cta::before {
  content: ""; position: absolute; inset: -14px -18px; border-radius: 18px;
  padding: 1.5px;
  background: linear-gradient(135deg, var(--accent-dark), var(--pink));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.stat-cell.form-cta:hover::before,
.stat-cell.form-cta:focus-visible::before { opacity: 1; }
a.stat-cell:focus-visible { transform: translateY(-3px); }
a.stat-cell:focus-visible .stat-num { color: var(--accent-dark); }

/* 5. 스티키 내비 응축 — 히어로 통과 시 헤어라인·그림자 (센티넬 관찰) */
.nav { transition: background .25s ease, box-shadow .25s ease; }
.nav-inner { transition: height .25s ease; }
.nav.scrolled {
  background: rgba(244, 242, 247, 0.94);
  box-shadow: 0 1px 0 rgba(39,36,48,0.07), 0 8px 24px rgba(39,36,48,0.06);
}
@media (min-width: 901px) { .nav.scrolled .nav-inner { height: 58px; } }
.scroll-sentinel { height: 1px; }

/* 6. 섹션 헤더 — .hl 강조어 밑 바이올렛 언더라인 좌→우 드로우 */
.hl { position: relative; }
.hl::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.06em; height: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s ease-out .2s;
}
.b2b-box .hl::after { background: var(--accent-dark); }
[data-reveal].in .hl::after { transform: scaleX(1); }

/* 7. 피처 이미지 줌아웃 세틀 (프레임 안에서 1.06 → 1 + 페이드) */
.bento-photo img, .quote-photo img, .ba-inputs img {
  transform: scale(1.06); opacity: 0;
  transition: transform .8s ease-out, opacity .8s ease-out;
}
[data-reveal].in .bento-photo img,
[data-reveal].in .quote-photo img,
[data-reveal].in .ba-inputs img { transform: scale(1); opacity: 1; }

/* 8. 벤토 점선 구분선 좌→우 드로우 (콘텐츠 후행) */
.dotsep { transform: scaleX(0); transform-origin: left; transition: transform .7s ease-out .3s; }
[data-reveal].in .dotsep { transform: scaleX(1); }

/* 9. 추가금 비교표 — 행 위에서부터 순차 안착 */
.cmp-table tbody tr {
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s ease-out, transform .5s ease-out;
}
.cmp-wrap.in .cmp-table tbody tr { opacity: 1; transform: none; }
.cmp-wrap.in .cmp-table tbody tr:nth-child(1) { transition-delay: 0ms; }
.cmp-wrap.in .cmp-table tbody tr:nth-child(2) { transition-delay: 50ms; }
.cmp-wrap.in .cmp-table tbody tr:nth-child(3) { transition-delay: 100ms; }
.cmp-wrap.in .cmp-table tbody tr:nth-child(4) { transition-delay: 150ms; }
.cmp-wrap.in .cmp-table tbody tr:nth-child(5) { transition-delay: 200ms; }

/* 10. 주요 버튼 — 대각선 광택 sheen (호버 시 1회 스윕) */
.btn, .nav-cta { position: relative; overflow: hidden; }
.btn::after, .nav-cta::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.28), transparent);
  transform: translateX(-220%); pointer-events: none;
}
.btn:hover::after, .nav-cta:hover::after { animation: ms-sheen .45s ease; }
@keyframes ms-sheen { from { transform: translateX(-220%); } to { transform: translateX(360%); } }

/* 11. 신뢰 마퀴 스트립 (index 전용, 느린 흐름 · 호버 시 정지) */
.promise-strip { overflow: hidden; padding: 15px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.promise-track { display: inline-flex; align-items: center; white-space: nowrap; animation: ms-marquee 42s linear infinite; will-change: transform; }
.promise-track > span { font-family: var(--font-display); font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; color: var(--muted); padding: 0 4px; }
.promise-track .ps-sep { display: inline-block; width: 3px; height: 3px; margin: 0 20px; border-radius: 50%; background: var(--faint); }
.promise-strip:hover .promise-track { animation-play-state: paused; }
@keyframes ms-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* 12. reduced-motion — 전 모션 즉시 최종 상태로 고정 (가장 마지막, 우선) */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal].in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-card h1, .hero-sub, .hero-ctas, .xpose .x1, .xpose .x2 { animation: none !important; }
  .gallery-grid .g-item { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cmp-table tbody tr { opacity: 1 !important; transform: none !important; transition: none !important; }
  .bento-photo img, .quote-photo img, .ba-inputs img { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hl::after { transform: none !important; transition: none !important; }
  .dotsep { transform: none !important; transition: none !important; }
  .g-item figcaption { transition: none !important; }
  .btn::after, .nav-cta::after { display: none !important; }
  .btn:hover::after, .nav-cta:hover::after { animation: none !important; }
  .nav, .nav-inner { transition: none !important; }
  .promise-track { animation: none !important; }
}