/* ============================================================
   CAPSULE 홈페이지 — 디자인 시스템 (SSOT)
   근거: DESIGN.md §2~8 · component-guide.md §0~12
   Warm Tech Luxury — Coral(온기) + Sage(신뢰) 듀오
   ============================================================ */

/* ---------- @font-face (공유 자산: assets/fonts/ woff2 서브셋) ---------- */
@font-face{font-family:'Libre Caslon Text';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/caslon-400.woff2') format('woff2');}
@font-face{font-family:'Libre Caslon Text';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/caslon-600.woff2') format('woff2');}
@font-face{font-family:'Noto Sans KR';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/noto-400.woff2') format('woff2');}
@font-face{font-family:'Noto Sans KR';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/noto-500.woff2') format('woff2');}
@font-face{font-family:'Noto Sans KR';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/noto-600.woff2') format('woff2');}

/* ---------- 토큰 (component-guide §0) ---------- */
:root{
  /* color */
  --coral:#B6503E; --thermal:#D97862; --sage:#557069;
  --ivory:#FFFDF8; --cream:#FAF4EE; --coral-mist:#F4DED6; --warm-capsule:#EAD9CD;
  --ink:#2B2522; --graphite:#5B504A; --line:#E3D3C8;
  --graphite-ink:#2B2522;
  /* type */
  --serif:'Libre Caslon Text',Georgia,serif;
  --sans:'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  /* space (4px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:28px; --s8:32px;
  --s12:48px; --s16:64px; --s24:96px; --s32:128px;
  /* radius */ --r-card:12px; --r-btn:8px; --r-img:6px; --r-pill:999px;
  /* motion */ --ease:cubic-bezier(.22,.61,.36,1); --dur:.6s;
  /* shadow (절제) */
  --shadow:0 4px 24px rgba(43,37,34,.06);
  --shadow-lg:0 12px 40px rgba(43,37,34,.10);
  --shadow-up:0 -4px 24px rgba(43,37,34,.06);
  /* layout */ --container:1280px; --gutter:32px; --nav-h:72px;
}
@media (max-width:768px){ :root{ --gutter:20px; --nav-h:56px; } }

/* ---------- reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans); font-weight:400; font-size:17px; line-height:1.6;
  color:var(--ink); background:var(--ivory);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
  /* 한국어 어절(단어) 단위 줄바꿈 — 글자 중간에서 끊기지 않도록 */
  word-break:keep-all; overflow-wrap:break-word;
}
@media (max-width:768px){ body{ font-size:15px; } }
img,svg,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
ul{ list-style:none; }
:focus-visible{ outline:2px solid var(--sage); outline-offset:2px; border-radius:2px; }
::selection{ background:var(--coral-mist); color:var(--ink); }

/* ---------- typography (DESIGN.md §3) ---------- */
.display{ font-family:var(--serif); font-weight:400; letter-spacing:-.01em; line-height:1.05; }
h1,.h1{ font-family:var(--serif); font-weight:400; font-size:clamp(40px,8vw,96px); letter-spacing:-.5px; line-height:1.04; }
h2,.h2{ font-family:var(--serif); font-weight:400; font-size:clamp(28px,4.5vw,52px); letter-spacing:-.3px; line-height:1.12; }
h3,.h3{ font-family:var(--serif); font-weight:400; font-size:clamp(22px,3vw,30px); line-height:1.2; }
.serif-italic{ font-family:var(--serif); font-style:italic; color:var(--coral); }
.lead{ font-size:clamp(15px,2vw,17px); line-height:1.65; color:var(--graphite); max-width:62ch; }
.label{
  font-family:var(--sans); font-weight:600; font-size:12px; text-transform:uppercase;
  letter-spacing:.2em; color:#495F57; /* sage 진한 변형 — 12px AA 4.5:1 충족 */
}
.eyebrow{ display:inline-block; margin-bottom:var(--s4); }
.body-muted{ color:var(--graphite); }
em,.em{ font-family:var(--serif); font-style:italic; color:var(--coral); }
strong{ font-weight:600; }

/* ---------- layout ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.container-narrow{ max-width:880px; }
.section{ padding-block:clamp(56px,10vw,128px); position:relative; }
.section--cream{ background:var(--cream); }
.section--mist{ background:var(--coral-mist); }
.section--capsule{ background:var(--warm-capsule); }
.section--dark{ background:var(--graphite-ink); color:var(--ivory); }
.section-header{ max-width:760px; margin-bottom:var(--s16); }
.section-header.center{ margin-inline:auto; text-align:center; }
.section-header .h2,.section-header .h3{ margin-block:var(--s3) var(--s4); }
.grid{ display:grid; gap:var(--s8); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1024px){ .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:768px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }
.flex{ display:flex; } .items-center{ align-items:center; } .justify-between{ justify-content:space-between; }
.gap-4{ gap:var(--s4); } .gap-6{ gap:var(--s6); }
.text-center{ text-align:center; }
.mt-4{ margin-top:var(--s4); } .mt-6{ margin-top:var(--s6); } .mt-8{ margin-top:var(--s8); } .mt-12{ margin-top:var(--s12); }

/* ---------- buttons (component-guide §4) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  font-family:var(--sans); font-weight:500; font-size:15px; letter-spacing:.02em;
  padding:14px 28px; border-radius:var(--r-btn); min-height:48px; white-space:nowrap;
  transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.btn-sm{ padding:12px 20px; min-height:44px; font-size:14px; }
.btn-primary{ background:var(--coral); color:var(--ivory); }
.btn-primary:hover{ background:var(--thermal); transform:translateY(-1px); box-shadow:var(--shadow); }
.btn-primary:active{ transform:translateY(0) scale(.99); }
.btn-secondary{ background:transparent; color:var(--coral); border:1.5px solid var(--coral); }
.btn-secondary:hover{ background:var(--coral); color:var(--ivory); }
.btn-ondark{ background:transparent; color:var(--ivory); border:1.5px solid rgba(255,253,248,.6); }
.btn-ondark:hover{ background:var(--ivory); color:var(--ink); border-color:var(--ivory); }
.btn-text{ padding:10px 0; min-height:44px; display:inline-flex; align-items:center; color:var(--ink); position:relative; }
.btn-text::after{ content:''; position:absolute; left:0; bottom:8px; width:0; height:1px; background:var(--coral); transition:width .25s var(--ease); }
.btn-text:hover{ color:var(--coral); }
.btn-text:hover::after{ width:100%; }
.btn-text .arrow{ transition:transform .2s var(--ease); }
.btn-text:hover .arrow{ transform:translateX(3px); }
.btn:disabled{ opacity:.4; pointer-events:none; }
.btn-block{ width:100%; }

/* ---------- nav (component-guide §1) ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100; height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .35s var(--ease),box-shadow .35s var(--ease),color .35s var(--ease);
  background:transparent; color:var(--ivory);
}
.nav .container{ display:flex; align-items:center; justify-content:space-between; width:100%; }
.nav.scrolled{ background:var(--ivory); color:var(--ink); box-shadow:var(--shadow); }
.nav-logo{ display:flex; align-items:center; gap:0; font-family:var(--serif); font-size:23px; letter-spacing:.04em; }
.nav-logo img,.nav-logo svg{ height:44px; width:auto; display:inline-block; flex-shrink:0; }
/* nav 심볼 png — 투명 nav(홈 hero 위)는 흰색 반전, solid(서브·스크롤)는 원색 */
body.home .nav:not(.scrolled) .nav-logo .symbol{ filter:brightness(0) invert(1); }
.nav-menu{ display:flex; align-items:center; gap:var(--s8); }
.nav-link{ font-family:var(--sans); font-size:14px; letter-spacing:.02em; position:relative; padding-block:6px; transition:color .2s var(--ease); }
.nav-link::after{ content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--coral); transition:width .25s var(--ease); }
.nav-link:hover::after,.nav-link.active::after{ width:100%; }
.nav-link.active{ color:var(--coral); }
.nav-cta{ display:flex; align-items:center; gap:var(--s4); }
.nav-toggle{ display:none; width:44px; height:44px; flex-direction:column; justify-content:center; gap:5px; align-items:center; }
.nav-toggle{ position:relative; z-index:101; }
.nav-toggle span{ display:block; width:24px; height:2px; background:currentColor; transition:transform .3s var(--ease),opacity .3s var(--ease); }
/* 열림 상태: 햄버거 3선 → X (gap 5px + 막대 2px → 중심 이동 7px) */
.nav-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
/* mobile drawer */
.nav-drawer{
  position:fixed; inset:0; z-index:99; background:var(--cream); color:var(--ink);
  display:flex; flex-direction:column; justify-content:flex-start; gap:var(--s6);
  padding:calc(var(--nav-h) + var(--s12)) var(--gutter) calc(var(--s8) + env(safe-area-inset-bottom,0px));
  transform:translateX(100%); transition:transform .4s var(--ease); visibility:hidden;
}
.nav-drawer.open{ transform:translateX(0); visibility:visible; }
.nav-drawer a{ font-family:var(--serif); font-size:22px; }
.nav-drawer .drawer-cta{ margin-top:auto; display:flex; flex-direction:column; gap:var(--s3); }
/* drawer 열림: nav 바를 drawer와 같은 색으로 통일 → 햄버거 X가 자연스럽게 닫기 버튼 역할 */
body:has(.nav-drawer.open) .nav{ background:var(--cream); box-shadow:none; color:var(--ink); }
body:has(.nav-drawer.open) .nav .nav-logo .symbol{ filter:none; }
@media (max-width:1024px){
  .nav-menu,.nav-cta{ display:none; }
  .nav-toggle{ display:flex; }
}
/* 서브 페이지(홈 외): nav 항상 solid + 본문 상단 여백(고정 nav 아래로) */
body.sub-page{ padding-top:var(--nav-h); }
body.sub-page .nav{ background:var(--ivory); color:var(--ink); box-shadow:var(--shadow); }
.nav-link[aria-current="page"]{ color:var(--coral); }
.nav-link[aria-current="page"]::after{ width:100%; }
/* 서브 페이지 미니 헤더 */
.page-hero{ padding-block:clamp(48px,7vw,88px) clamp(24px,4vw,48px); text-align:center; background:var(--cream); }
.page-hero .label{ display:inline-block; margin-bottom:var(--s4); }
.page-hero h1{ font-size:clamp(36px,6vw,68px); }
.page-hero .lead{ margin:var(--s4) auto 0; }

/* ---------- hero (component-guide §2) ---------- */
.hero{ position:relative; min-height:100vh; display:flex; align-items:flex-end; color:var(--ivory); overflow:hidden; }
@media (max-width:768px){ .hero{ min-height:88vh; } }
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img,.hero-media video{ width:100%; height:100%; object-fit:cover; }
/* Hero 캐러셀 — 캡슐 → 바레 → 필라테스 자동 크로스페이드 (18s, 3장 6s씩) */
.hero-media .hero-slide{ position:absolute; inset:0; opacity:0; animation:heroFade 18s infinite var(--ease); }
.hero-media .hero-slide:nth-child(1){ animation-delay:0s; }
.hero-media .hero-slide:nth-child(2){ animation-delay:6s; }
.hero-media .hero-slide:nth-child(3){ animation-delay:12s; }
@keyframes heroFade{ 0%{opacity:0} 3%{opacity:1} 30%{opacity:1} 35%{opacity:0} 100%{opacity:0} }
@media (prefers-reduced-motion:reduce){ .hero-media .hero-slide{ animation:none; } .hero-media .hero-slide:nth-child(1){ opacity:1; } }
.hero-overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(43,37,34,.18) 0%,rgba(43,37,34,.32) 45%,rgba(43,37,34,.55) 100%); }
.hero-inner{ position:relative; z-index:2; width:100%; padding-block:var(--s24) var(--s16); }
.hero-wordmark{ font-family:var(--serif); font-size:clamp(56px,12vw,128px); letter-spacing:.06em; line-height:1; }
.hero-sub{ font-family:var(--serif); font-style:italic; font-size:clamp(20px,3vw,32px); color:var(--thermal); margin-top:var(--s3); }
.hero-tagline{ font-family:var(--serif); font-size:clamp(24px,4vw,40px); margin-top:var(--s6); line-height:1.2; }
.hero-cta{ display:flex; gap:var(--s4); margin-top:var(--s8); flex-wrap:wrap; }
.hero-scroll{ position:absolute; bottom:24px; left:50%; transform:translateX(-50%); z-index:2; font-size:12px; letter-spacing:.2em; text-transform:uppercase; opacity:.85; display:flex; flex-direction:column; align-items:center; gap:6px; }
.hero-scroll .chevron{ width:18px; height:18px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); animation:bob 1.8s var(--ease) infinite; }
@keyframes bob{ 0%,100%{ transform:rotate(45deg) translate(0,0); } 50%{ transform:rotate(45deg) translate(4px,4px); } }
@media (max-width:768px){ .hero-cta .btn{ width:100%; } .hero-scroll{ display:none; } }

/* ---------- card base ---------- */
.card{ background:var(--cream); border:1px solid var(--line); border-radius:var(--r-card); padding:var(--s8); transition:transform .25s var(--ease),box-shadow .25s var(--ease); }
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }

/* ---------- service card 3-in-1 (component-guide §5) ---------- */
.service-card{ background:transparent; text-align:center; }
.service-card .media{ aspect-ratio:4/5; border-radius:var(--r-img); overflow:hidden; background:var(--coral-mist); position:relative; }
.service-card .media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.service-card:hover .media img{ transform:scale(1.03); }
/* mini 캐러셀 — 카드 미디어 자동 순환 (2장 크로스페이드) */
.service-card .media.cycle img{ position:absolute; inset:0; opacity:0; animation:mediaCycle 9s infinite var(--ease); }
.service-card .media.cycle img:nth-child(2){ animation-delay:4.5s; }
@keyframes mediaCycle{ 0%{opacity:0} 6%{opacity:1} 44%{opacity:1} 50%{opacity:0} 100%{opacity:0} }
@media (prefers-reduced-motion: reduce){ .service-card .media.cycle img{ animation:none; } .service-card .media.cycle img:nth-child(1){ opacity:1; } .service-card .media.cycle img:nth-child(2){ display:none; } }
.service-card .icon{ width:auto; height:56px; padding:0; background:none; color:var(--coral); margin:var(--s6) auto var(--s2); display:block; }
.service-card .name{ font-family:var(--serif); font-size:28px; margin-top:var(--s4); transition:color .2s var(--ease); }
.service-card:hover .name{ color:var(--coral); }
.service-card .desc{ color:var(--graphite); font-size:15px; margin-top:var(--s2); }
.service-card .link{ margin-top:var(--s4); display:inline-flex; align-items:center; padding-block:10px; }

/* ---------- 카드 아이콘 — 폰트 밸런스에 맞춰 확대 + 중앙정렬 (아이콘 가진 카드만) ---------- */
.card > .ico, .card > .icon{ width:40px; height:40px; display:block; margin:0 auto var(--s2); }
.card:has(> .ico), .card:has(> .icon){ text-align:center; }
#trust .grid-3 > article{ text-align:center; }
#trust .grid-3 > article > .ico{ width:40px; height:40px; display:block; margin:var(--s6) auto var(--s2); }
.route-card > .ico{ width:36px; height:36px; }
.route-card:has(> .ico){ text-align:center; align-items:center; }

/* ---------- routing card (4분기) ---------- */
.route-card{ display:flex; flex-direction:column; gap:var(--s3); padding:var(--s8); background:var(--ivory); border:1px solid var(--line); border-radius:var(--r-card); transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease); }
.route-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--coral-mist); }
.route-card .route-num{ font-family:var(--serif); font-style:italic; font-size:20px; color:var(--coral); }
.route-card h3{ font-size:24px; }
.route-card p{ font-size:14px; color:var(--graphite); flex:1; }

/* ---------- cost / pricing table (component-guide §6) ---------- */
.cost-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s6); align-items:stretch; }
@media (max-width:768px){ .cost-grid{ grid-template-columns:1fr; } }
.cost-card{ background:var(--ivory); border:1px solid var(--line); border-radius:var(--r-card); padding:var(--s8); display:flex; flex-direction:column; transition:box-shadow .25s var(--ease),transform .25s var(--ease); }
.cost-card:hover{ box-shadow:var(--shadow-lg); }
.cost-card.featured{ border:2px solid var(--coral); position:relative; box-shadow:var(--shadow-lg); }
@media (min-width:769px){ .cost-card.featured{ transform:scale(1.04); } }
.cost-card .badge{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--coral); color:var(--ivory); font-size:12px; font-weight:600; letter-spacing:.1em; padding:5px 16px; border-radius:var(--r-pill); }
.cost-card .tier-name{ font-family:var(--serif); font-size:24px; }
.cost-card .tier-meta{ font-size:13px; color:var(--graphite); margin-top:2px; }
.cost-card .price{ font-family:var(--serif); font-size:40px; color:var(--ink); margin-block:var(--s4) var(--s2); line-height:1; }
.cost-card .price small{ font-size:15px; color:var(--graphite); font-family:var(--sans); }
.cost-rows{ margin-top:var(--s4); border-top:1px solid var(--line); }
.cost-row{ display:flex; align-items:center; gap:var(--s3); padding-block:var(--s3); border-bottom:1px solid var(--line); font-size:14px; }
.cost-row .ico{ color:var(--sage); flex:none; }
.cost-row .amt{ margin-left:auto; font-weight:500; color:var(--ink); }
.cost-card .cost-cta{ margin-top:var(--s6); }
.cost-note{ font-size:12px; color:var(--graphite); margin-top:var(--s4); }

/* ---------- 창업비용 비교 테이블 ---------- */
.cost-table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-card); background:var(--ivory); }
.cost-table{ width:100%; border-collapse:collapse; font-size:15px; min-width:600px; }
.cost-table th,.cost-table td{ padding:14px 18px; text-align:right; border-bottom:1px solid var(--line); }
.cost-table th:first-child,.cost-table td:first-child{ text-align:left; color:var(--graphite); }
.cost-table thead th{ font-family:var(--sans); font-weight:600; font-size:13px; vertical-align:bottom; }
.cost-table thead .tier-h{ font-family:var(--serif); font-size:21px; font-weight:400; color:var(--ink); display:block; }
.cost-table thead .tier-sub{ font-size:12px; color:var(--graphite); font-weight:400; }
.cost-table .featured-col{ background:var(--coral-mist); }
.cost-table thead .featured-col .tier-h{ color:var(--coral); }
.cost-table .badge-inline{ display:inline-block; background:var(--coral); color:var(--ivory); font-size:11px; font-weight:600; padding:3px 10px; border-radius:var(--r-pill); margin-bottom:6px; }
.cost-table .total-row td{ font-family:var(--serif); font-size:20px; color:var(--ink); border-bottom:none; border-top:2px solid var(--ink); padding-top:16px; }
.cost-table .total-row td:first-child{ font-family:var(--sans); font-size:14px; font-weight:600; color:var(--ink); }
.cost-table tbody tr:last-child td{ border-bottom:none; }

/* ---------- tier card (앰버서더/B2C·B2B) (component-guide §7) ---------- */
.tier-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s6); align-items:stretch; }
@media (max-width:768px){ .tier-grid{ grid-template-columns:1fr; } }
.tier-card{ background:var(--cream); border:1px solid var(--line); border-radius:var(--r-card); padding:0; overflow:hidden; display:flex; flex-direction:column; transition:transform .25s var(--ease),box-shadow .25s var(--ease); }
.tier-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.tier-card .accent{ height:4px; background:var(--thermal); }
.tier-card .tier-body{ padding:var(--s8); display:flex; flex-direction:column; flex:1; }
.tier-card .tier-name{ font-family:var(--serif); font-size:24px; }
.tier-card .tier-for{ font-size:13px; color:var(--graphite); margin-top:var(--s1); }
.tier-card ul{ margin-top:var(--s6); display:flex; flex-direction:column; gap:var(--s3); flex:1; }
.tier-card li{ display:flex; gap:var(--s3); font-size:14px; line-height:1.5; }
.tier-card li .check{ color:var(--sage); flex:none; margin-top:2px; }
.tier-card .tier-cta{ margin-top:var(--s6); }
.tier-card.featured{ background:var(--coral); color:var(--ivory); }
.tier-card.featured .accent{ background:var(--ivory); }
.tier-card.featured .tier-for{ color:rgba(255,253,248,.8); }
.tier-card.featured li .check{ color:var(--ivory); }
.tier-card.featured .btn-secondary{ color:var(--ivory); border-color:rgba(255,253,248,.7); }
.tier-card.featured .btn-secondary:hover{ background:var(--ivory); color:var(--coral); }

/* ---------- product card (기기 판매) (component-guide §8) ---------- */
.product-card{ background:var(--ivory); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; display:flex; flex-direction:column; transition:transform .25s var(--ease),box-shadow .25s var(--ease); }
.product-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.product-card .pimg{ aspect-ratio:1/1; background:var(--ivory); display:flex; align-items:center; justify-content:center; overflow:hidden; border-bottom:1px solid var(--line); }
.product-card .pimg img{ width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease); }
.product-card:hover .pimg img{ transform:scale(1.04); }
.product-card .pbody{ padding:var(--s6); display:flex; flex-direction:column; gap:var(--s2); flex:1; }
.product-card .pname{ font-family:var(--serif); font-size:20px; }
.product-card .pkey{ font-size:13px; color:var(--sage); letter-spacing:.01em; }
.product-card .pprice{ font-family:var(--serif); font-size:24px; color:var(--coral); margin-top:var(--s2); }
.product-card .pprice small{ font-family:var(--sans); font-size:13px; color:var(--graphite); }
.product-card .pcta{ margin-top:auto; padding-top:var(--s4); display:flex; gap:var(--s3); flex-wrap:wrap; }

/* ---------- stat / trust (component-guide §10) ---------- */
.stat-bar{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s6); }
@media (max-width:768px){ .stat-bar{ grid-template-columns:repeat(2,1fr); } }
.stat{ text-align:center; }
.stat .num{ font-family:var(--serif); font-size:clamp(32px,5vw,44px); color:var(--ink); line-height:1; }
.stat .lbl{ font-size:13px; color:var(--graphite); margin-top:var(--s2); }
.testimonial{ background:var(--ivory); border:1px solid var(--line); border-radius:var(--r-card); padding:var(--s8); }
.testimonial .quote{ font-family:var(--serif); font-style:italic; font-size:18px; line-height:1.5; color:var(--ink); }
.testimonial .who{ font-size:13px; color:var(--graphite); margin-top:var(--s4); }

/* ---------- process steps ---------- */
.process{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--s6); counter-reset:step; }
@media (max-width:1024px){ .process{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .process{ grid-template-columns:1fr; } }
.process-step{ position:relative; padding-top:var(--s8); }
.process-step::before{ counter-increment:step; content:counter(step,decimal-leading-zero); font-family:var(--serif); font-style:italic; font-size:28px; color:var(--coral); position:absolute; top:0; left:0; }
.process-step h4{ font-size:16px; font-weight:600; margin-top:var(--s3); margin-bottom:var(--s2); }
.process-step p{ font-size:14px; color:var(--graphite); }

/* ---------- form (component-guide §9) ---------- */
.form{ background:var(--ivory); border:1px solid var(--line); border-radius:var(--r-card); padding:clamp(24px,4vw,48px); }
.form-row{ display:grid; gap:var(--s4); }
.form-row.cols-2{ grid-template-columns:1fr 1fr; }
.form-row.cols-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:640px){ .form-row.cols-2,.form-row.cols-3{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:var(--s2); margin-bottom:var(--s4); }
.field label{ font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--graphite); }
.field input,.field select,.field textarea{
  font-family:var(--sans); font-size:15px; color:var(--ink);
  height:48px; padding:0 16px; border:1px solid var(--line); border-radius:8px; background:var(--ivory);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease); width:100%;
}
.field textarea{ height:auto; padding:14px 16px; min-height:120px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--coral); box-shadow:0 0 0 3px rgba(182,80,62,.12); }
.radio-group,.check-group{ display:flex; flex-wrap:wrap; gap:var(--s3); }
.radio-pill{ display:inline-flex; align-items:center; gap:var(--s2); padding:11px 16px; min-height:44px; border:1px solid var(--line); border-radius:var(--r-pill); font-size:14px; cursor:pointer; transition:all .2s var(--ease); }
.radio-pill input{ accent-color:var(--coral); width:16px; height:16px; }
.radio-pill:has(input:checked){ border-color:var(--coral); background:var(--coral-mist); color:var(--ink); }
.consent{ display:flex; align-items:flex-start; gap:var(--s2); font-size:13px; color:var(--graphite); margin-block:var(--s4); }
.consent input{ accent-color:var(--coral); width:18px; height:18px; margin-top:1px; flex:none; }
.form-note{ font-size:13px; color:var(--sage); margin-top:var(--s2); }
/* 방문 상담 안내 — 방문 상담 선택 시 입력 폼 대신 전화 예약 안내로 치환 (스크롤 단축) */
.visit-overlay{ display:none; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:var(--cream); border:1px solid var(--line); border-radius:var(--r-card); padding:var(--s12) var(--s5); }
.form.visit-mode .visit-overlay{ display:flex; }
.form.visit-mode .form-fields{ display:none; }
.visit-overlay-inner{ display:flex; flex-direction:column; align-items:center; gap:var(--s4); max-width:32ch; }
.visit-overlay svg{ color:var(--coral); }
.visit-overlay h3{ margin:0; }
.visit-overlay p{ margin:0; line-height:1.7; }

/* ---------- FAQ accordion ---------- */
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; text-align:left; display:flex; justify-content:space-between; align-items:center; gap:var(--s4); padding:var(--s6) 0; font-family:var(--serif); font-size:19px; color:var(--ink); }
.faq-q .pm{ flex:none; width:22px; height:22px; position:relative; transition:transform .3s var(--ease); }
.faq-q .pm::before,.faq-q .pm::after{ content:''; position:absolute; background:var(--coral); border-radius:2px; }
.faq-q .pm::before{ left:0; top:10px; width:22px; height:2px; }
.faq-q .pm::after{ left:10px; top:0; width:2px; height:22px; transition:transform .3s var(--ease); }
.faq-item.open .pm::after{ transform:scaleY(0); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.faq-a-inner{ padding-bottom:var(--s6); color:var(--graphite); font-size:15px; line-height:1.65; }
.faq-link{ color:var(--coral); text-decoration:underline; text-underline-offset:2px; }
.faq-link:hover{ opacity:.8; }

/* ---------- fixed CTA bar (component-guide §11) ---------- */
.cta-bar{ position:fixed; bottom:0; left:0; right:0; z-index:90; height:56px; display:none; background:var(--ivory); border-top:1px solid var(--line); box-shadow:var(--shadow-up); transform:translateY(100%); transition:transform .35s var(--ease); }
.cta-bar.show{ transform:translateY(0); }
.cta-bar a{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:12px; letter-spacing:.02em; color:var(--ink); border-right:1px solid var(--line); }
.cta-bar a:last-child{ border-right:none; }
.cta-bar a svg{ width:20px; height:20px; }
.cta-bar a.accent{ background:var(--coral); color:var(--ivory); }
@media (max-width:1024px){ .cta-bar{ display:flex; } body{ padding-bottom:56px; } }
/* desktop floating */
.float-cta{ position:fixed; bottom:28px; right:28px; z-index:90; display:flex; align-items:center; gap:8px; padding:14px 22px; background:var(--coral); color:var(--ivory); border-radius:var(--r-pill); box-shadow:var(--shadow-lg); font-size:15px; font-weight:500; transition:background .2s var(--ease),transform .2s var(--ease); }
.float-cta:hover{ background:var(--thermal); transform:translateY(-2px); }
@media (max-width:1024px){ .float-cta{ display:none; } }

/* ---------- footer (component-guide §12) ---------- */
.footer{ background:var(--graphite-ink); color:rgba(255,253,248,.78); padding-block:var(--s24) var(--s12); }
.footer a{ color:rgba(255,253,248,.78); transition:color .2s var(--ease); }
.footer a:hover{ color:var(--ivory); }
.footer-top{ display:grid; grid-template-columns:1.5fr 1fr 1.1fr; gap:var(--s8); }
@media (max-width:900px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-top{ grid-template-columns:1fr; } }
.footer-brand .flogo{ font-family:var(--serif); font-size:24px; letter-spacing:.06em; color:var(--ivory); }
.footer-brand .fslogan{ font-family:var(--serif); font-style:italic; color:var(--thermal); margin-top:var(--s2); }
.footer-col h5{ font-size:13px; text-transform:uppercase; letter-spacing:.12em; color:var(--ivory); margin-bottom:var(--s4); }
.footer-col li{ margin-bottom:var(--s2); font-size:14px; }
.footer-col li a{ display:block; padding-block:8px; }
.footer-sns{ display:flex; gap:var(--s4); margin-top:var(--s4); }
.footer-sns a{ width:40px; height:40px; border:1px solid rgba(255,253,248,.25); border-radius:var(--r-pill); display:flex; align-items:center; justify-content:center; }
.footer-sns a:hover{ border-color:var(--ivory); }
.footer-bottom{ margin-top:var(--s16); padding-top:var(--s8); border-top:1px solid rgba(255,253,248,.15); font-size:12px; line-height:1.7; color:rgba(255,253,248,.68); }
.footer-bottom .compliance{ margin-top:var(--s3); }
.footer-legal-links{ margin-bottom:var(--s4); font-size:13px; }
.footer-legal-links a{ color:rgba(255,253,248,.9); }
.footer-legal-links a:hover{ color:var(--ivory); text-decoration:underline; }
.footer-biz li{ margin-bottom:6px; }
/* 약관·개인정보처리방침 legal 페이지 */
.legal-body{ max-width:820px; }
.legal-body p,.legal-body li{ color:var(--graphite); }
.legal-body ol,.legal-body ul{ padding-left:1.4em; margin-top:var(--s3); }
.legal-body li{ margin-bottom:var(--s2); }
.legal-body .cost-table{ width:100%; border-collapse:collapse; margin-top:var(--s4); font-size:13.5px; }
.legal-body .cost-table th,.legal-body .cost-table td{ text-align:left; padding:10px 14px; border:1px solid var(--line); vertical-align:top; line-height:1.6; color:var(--graphite); }
.legal-body .cost-table th{ font-weight:600; color:var(--graphite-ink); background:var(--coral-mist); }
/* 앰버서더 티어 — 플랫폼별 지원 기준 칩 */
.tier-platforms{ margin-top:var(--s3); }
.tier-platforms .tp-label{ display:block; font-size:11px; letter-spacing:.02em; color:var(--graphite); margin-bottom:6px; }
.tier-platforms .tp-list{ display:flex; flex-wrap:wrap; gap:6px; }
.tier-platforms .tp-list span{ font-size:12px; padding:3px 9px; border-radius:var(--r-pill); background:var(--coral-mist); color:var(--graphite-ink); border:1px solid var(--line); white-space:nowrap; }
.tier-platforms .tp-list b{ color:var(--coral); font-weight:600; }
.tier-platforms.on-dark .tp-label{ color:rgba(255,253,248,.72); }
.tier-platforms.on-dark .tp-list span{ background:rgba(255,253,248,.12); color:var(--ivory); border-color:rgba(255,253,248,.22); }
.tier-platforms.on-dark .tp-list b{ color:var(--thermal); }
/* 지역 탭 (locations) — CSS show/hide 방식이라 숨김 카드도 HTML에 존재 → SEO 인덱싱 유지 */
.region-tab-nav{ display:flex; gap:var(--s2); justify-content:center; flex-wrap:wrap; margin-bottom:var(--s8); }
.region-tab{ padding:10px 26px; border:1px solid var(--line); border-radius:var(--r-pill); background:transparent; color:var(--graphite); font-size:15px; font-family:inherit; cursor:pointer; transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease); }
.region-tab:hover{ border-color:var(--coral); color:var(--coral); }
.region-tab.is-active{ background:var(--coral); border-color:var(--coral); color:var(--ivory); }
.region-panel[hidden]{ display:none; }
@media (max-width:560px){ .region-tab{ padding:9px 18px; font-size:14px; } }

/* ---------- scroll reveal (DESIGN.md §5) ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease),transform .6s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal-stagger>*{ opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease),transform .6s var(--ease); }
.reveal-stagger.in>*{ opacity:1; transform:none; }
.reveal-stagger.in>*:nth-child(2){ transition-delay:.08s; }
.reveal-stagger.in>*:nth-child(3){ transition-delay:.16s; }
.reveal-stagger.in>*:nth-child(4){ transition-delay:.24s; }
@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition-duration:.01ms!important; }
  .reveal,.reveal-stagger>*{ opacity:1; transform:none; }
}

/* ---------- editorial split (text+image 교차) ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; }
.split.reverse>.split-media{ order:2; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; } .split.reverse>.split-media{ order:0; } }
.split-media{ border-radius:var(--r-img); overflow:hidden; aspect-ratio:4/5; background:var(--coral-mist); }
.split-media img{ width:100%; height:100%; object-fit:cover; }

/* ---------- misc utilities ---------- */
.divider{ height:1px; background:var(--line); border:none; margin-block:var(--s12); }
.pill-tag{ display:inline-block; padding:5px 14px; border-radius:var(--r-pill); background:var(--coral-mist); color:#8D3D2D; font-size:12px; font-weight:600; letter-spacing:.02em; }
.example-tag{ font-size:12px; color:var(--graphite); font-style:italic; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.skip-link{ position:absolute; top:8px; left:8px; z-index:200; background:var(--coral); color:var(--ivory); padding:10px 18px; border-radius:var(--r-btn); font-size:14px; font-weight:500; transform:translateY(-200%); transition:transform .2s var(--ease); }
.skip-link:focus{ transform:translateY(0); }

/* ============================================================
   AI 실사 이미지 레이아웃 (이미지 삽입 전용) — 기존 토큰/모션 재사용
   ============================================================ */
/* 16:9 와이드 앵커 밴드 (에디토리얼 호흡) */
.image-band{ border-radius:var(--r-card); overflow:hidden; aspect-ratio:16/9; background:var(--coral-mist); margin-block:var(--s12); }
.image-band img{ width:100%; height:100%; object-fit:cover; }
.image-band.cinematic{ aspect-ratio:21/9; }
@media (max-width:768px){ .image-band.cinematic{ aspect-ratio:16/9; } }

/* 바레 동작 세로 캐러셀 (scroll-snap, 세로 포트레이트 전용) */
.barre-carousel{ display:flex; gap:var(--s6); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:var(--s4); margin-inline:calc(var(--gutter)*-1); padding-inline:var(--gutter); -webkit-overflow-scrolling:touch; }
.barre-slide{ flex:0 0 clamp(210px,24vw,290px); scroll-snap-align:start; }
.barre-slide .media{ aspect-ratio:3/4; border-radius:var(--r-img); overflow:hidden; background:var(--coral-mist); transition:transform .3s var(--ease); }
.barre-slide .media img{ width:100%; height:100%; object-fit:cover; }
.barre-slide:hover .media{ transform:translateY(-4px); }
.barre-slide .cap{ font-family:var(--serif); font-style:italic; font-size:15px; color:var(--graphite); margin-top:var(--s3); text-align:center; }

/* 바레 동작 에디토리얼 갤러리 (균일 4열 + 사인물 감성 문구 카드 인터리브) */
.barre-editorial{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4); }
.barre-editorial figure{ margin:0; position:relative; aspect-ratio:3/4; border-radius:var(--r-img); overflow:hidden; background:var(--coral-mist); }
.barre-editorial figure img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.barre-editorial figure:hover img{ transform:scale(1.05); }
.barre-editorial figcaption{ position:absolute; left:0; right:0; bottom:0; padding:var(--s6) var(--s3) var(--s3); background:linear-gradient(transparent,rgba(43,37,34,.6)); color:var(--ivory); font-size:11px; letter-spacing:.16em; text-transform:uppercase; text-align:center; opacity:0; transition:opacity .3s var(--ease); }
.barre-editorial figure:hover figcaption{ opacity:1; }
.barre-editorial .quote{ aspect-ratio:3/4; border-radius:var(--r-img); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:var(--s6); }
.barre-editorial .quote.coral{ background:var(--coral); color:var(--ivory); }
.barre-editorial .quote.sage{ background:var(--sage); color:var(--ivory); }
.barre-editorial .quote.cream{ background:var(--cream); color:var(--graphite); border:1px solid var(--line); }
.barre-editorial .quote .en{ font-family:var(--serif); font-style:italic; font-size:clamp(18px,1.5vw,23px); line-height:1.3; }
.barre-editorial .quote .kr{ font-size:13px; margin-top:var(--s3); opacity:.9; line-height:1.55; }
@media (max-width:900px){ .barre-editorial{ grid-template-columns:repeat(2,1fr); } }

/* BI/CI — 로고 시스템 + 컬러 팔레트 */
.bi-logos{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s6); margin-bottom:var(--s12); }
.bi-logos figure{ margin:0; border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; background:var(--ivory); }
.bi-logos figure img{ width:100%; aspect-ratio:1/1; object-fit:contain; padding:var(--s8); background:var(--ivory); }
.bi-logos figure.on-coral img{ background:var(--coral); }
.bi-logos figcaption{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--graphite); text-align:center; padding:var(--s3); border-top:1px solid var(--line); }
@media (max-width:768px){ .bi-logos{ grid-template-columns:1fr; } }
.bi-palette{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--s3); }
.bi-palette .swatch{ aspect-ratio:4/5; border-radius:var(--r-img); padding:var(--s4); display:flex; flex-direction:column; justify-content:flex-end; gap:2px; }
.bi-palette .swatch span{ font-family:var(--serif); font-size:14px; line-height:1.2; }
.bi-palette .swatch small{ font-size:11px; opacity:.85; letter-spacing:.04em; }
@media (max-width:768px){ .bi-palette{ grid-template-columns:repeat(2,1fr); } }

/* 매장 공간 갤러리 — row 고정 높이로 이미지 height 정렬, object-fit:cover 크롭 */
.store-gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:clamp(280px,26vw,380px) clamp(200px,20vw,260px);
  gap:var(--s4);
}
.store-gallery figure{ margin:0; border-radius:var(--r-card); overflow:hidden; position:relative; background:var(--coral-mist); }
.store-gallery figure img{ width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .4s var(--ease); }
.store-gallery figure:hover img{ transform:scale(1.03); }
.store-gallery figcaption{ position:absolute; left:var(--s4); bottom:var(--s4); background:rgba(43,37,34,.55); color:var(--ivory); font-size:13px; padding:4px 12px; border-radius:var(--r-pill); opacity:0; transform:translateY(6px); transition:opacity .3s var(--ease),transform .3s var(--ease); }
.store-gallery figure:hover figcaption{ opacity:1; transform:none; }
.store-gallery .span-2{ grid-column:span 2; }
/* ar-* 클래스는 grid-template-rows가 높이를 제어하므로 aspect-ratio 무력화 */
.store-gallery .ar-16-9,.store-gallery .ar-3-2,.store-gallery .ar-portrait{ aspect-ratio:unset; }
@media (max-width:768px){
  .store-gallery{
    grid-template-columns:1fr 1fr;
    grid-template-rows:clamp(160px,42vw,210px) clamp(130px,34vw,170px) clamp(130px,34vw,170px);
    gap:var(--s3);
  }
  .store-gallery .span-2{ grid-column:span 2; }
  .store-gallery figcaption{ opacity:1; transform:none; }
}

/* 사인물 3-up 스트립 (16:9 보존 — 레터링 크롭 방지) */
.sign-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s6); }
.sign-strip figure{ margin:0; border-radius:var(--r-card); overflow:hidden; background:var(--coral-mist); }
.sign-strip figure img{ width:100%; aspect-ratio:16/9; object-fit:cover; transition:transform .3s var(--ease); }
.sign-strip figure:hover img{ transform:scale(1.02); }
.sign-strip figcaption{ font-size:13px; color:var(--graphite); padding:var(--s3); text-align:center; }
@media (max-width:768px){ .sign-strip{ grid-template-columns:repeat(2,1fr); gap:var(--s3); } }

/* ============ 런칭 이벤트 모달 (친구 추천) ============ */
.event-modal{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:var(--s4); background:rgba(43,37,34,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); opacity:0; visibility:hidden; transition:opacity .4s var(--ease),visibility .4s; }
.event-modal.open{ opacity:1; visibility:visible; }
.event-card{ position:relative; width:min(440px,100%); background:var(--ivory); border-radius:var(--r-card); overflow:hidden; box-shadow:0 30px 80px rgba(43,37,34,.32); transform:translateY(24px) scale(.97); transition:transform .45s var(--ease); max-height:92vh; overflow-y:auto; }
.event-modal.open .event-card{ transform:none; }
.event-close{ position:absolute; top:12px; right:14px; z-index:2; width:36px; height:36px; border:none; border-radius:var(--r-pill); background:rgba(255,253,248,.9); color:var(--graphite); font-size:24px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; }
.event-close:hover{ background:#fff; }
.event-media{ position:relative; aspect-ratio:3/2; background:var(--coral-mist); }
.event-media img{ width:100%; height:100%; object-fit:cover; }
.event-badge{ position:absolute; top:14px; left:14px; background:var(--coral); color:var(--ivory); font-size:11px; font-weight:600; letter-spacing:.12em; padding:6px 12px; border-radius:var(--r-pill); }
.event-body{ padding:var(--s6) var(--s6) var(--s6); text-align:center; }
.event-title{ font-family:var(--serif); font-size:26px; margin-top:var(--s2); }
.event-desc{ font-size:14px; color:var(--graphite); margin-top:var(--s3); line-height:1.65; }
.event-perks{ list-style:none; padding:0; margin:var(--s6) 0 0; display:flex; flex-direction:column; gap:var(--s3); }
.event-perks li{ display:flex; align-items:center; gap:var(--s4); text-align:left; background:var(--cream); border:1px solid var(--line); border-radius:var(--r-img); padding:var(--s3) var(--s4); font-size:13px; line-height:1.45; }
.event-perks .perk-ico{ font-size:24px; flex-shrink:0; }
.event-perks b{ color:var(--coral); font-size:14px; }
.event-cta{ margin-top:var(--s6); }
.event-dismiss{ display:flex; align-items:center; justify-content:center; min-height:44px; margin:var(--s2) auto 0; padding-inline:var(--s4); background:none; border:none; color:var(--graphite); opacity:.55; font-size:13px; cursor:pointer; text-decoration:underline; }
.event-dismiss:hover{ opacity:.8; }
@media (max-width:480px){
  .event-modal{ padding:var(--s3); }
  .event-media{ aspect-ratio:unset; height:140px; }
  .event-media img{ object-position:top center; }
  .event-badge{ top:10px; left:10px; font-size:10px; padding:4px 10px; }
  .event-body{ padding:var(--s4) var(--s4) var(--s3); text-align:left; }
  .event-title{ font-size:20px; margin-top:var(--s1); }
  .event-desc{ font-size:13px; margin-top:var(--s2); line-height:1.55; }
  .event-perks{ margin-top:var(--s3); gap:var(--s2); }
  .event-perks li{ padding:var(--s2) var(--s3); font-size:12px; }
  .event-perks .perk-ico{ font-size:20px; }
  .event-cta{ margin-top:var(--s4); }
  .event-dismiss{ min-height:36px; margin-top:0; font-size:12px; }
}

/* ============================================================
   📱 모바일 UX 최적화 (converge: 5관점 분석 → 우선순위 액션)
   ============================================================ */

/* P0-3 · P1-9: iOS 자동줌 방지(input 16px) + 본문 가독성 */
.field input,.field select,.field textarea{ font-size:16px; }
@media (max-width:768px){
  body{ font-size:16px; }
  .cost-row,.tier-card li,.route-card p{ font-size:15px; }
}

/* P1-4: lead 텍스트벽 해소 (모바일 행폭 42ch) */
@media (max-width:768px){
  .lead{ font-size:15.5px; line-height:1.7; max-width:42ch; margin-inline:auto; }
}

/* P1-6: 모바일 수직 리듬 압축 (긴 페이지 단축) */
@media (max-width:768px){
  .section{ padding-block:clamp(40px,9vw,56px); }
  .section-header{ margin-bottom:var(--s12); }
  .divider{ margin-block:var(--s8); }
  .image-band{ margin-block:var(--s8); }
}

/* P0-2: 고정 CTA바 safe-area + 모달/드로어 열림 시 숨김 */
@media (max-width:1024px){
  .cta-bar{ height:calc(56px + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); }
  body{ padding-bottom:calc(56px + env(safe-area-inset-bottom)); }
  body:has(.event-modal.open) .cta-bar,
  body:has(.nav-drawer.open) .cta-bar{ transform:translateY(100%); }
}
#contact .form{ margin-bottom:var(--s8); }
.store-soon-note{ display:none; } /* 데스크톱: 준비중 매장은 카드로 표시, 안내줄 숨김 */

/* 창업비용 테이블 → 모바일: 선택된 등급만 깔끔한 2열 리스트로 (카드 박스 제거) */
@media (max-width:768px){
  /* 준비중 매장(번동·중계점) 카드 숨기고 1줄 안내로 압축 — 스크롤 단축 */
  #contact .store-soon{ display:none !important; } /* 인라인 display:flex 우선순위 극복 */
  .store-soon-note{ display:block; text-align:center; font-size:14px; color:var(--graphite); line-height:1.6; margin-top:calc(-1 * var(--s6)); margin-bottom:var(--s8); }
  .cost-table-wrap{ border:none; background:transparent; overflow:visible; box-shadow:none; }
  .cost-table{ min-width:0; }
  .cost-table thead{ display:none; }
  /* row = 심플 2열 flex, 박스 없음 */
  .cost-table tr{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--s3); border:none; border-bottom:1px solid var(--line); border-radius:0; background:transparent; padding:var(--s4) 0; margin-bottom:0; }
  /* total-row 직전 행 border-bottom 제거 — 이중선 방지 */
  .cost-table tr:has(+ tr.total-row){ border-bottom:none; }
  .cost-table tr.total-row{ border-top:2px solid var(--ink); border-bottom:none; margin-top:var(--s2); }
  /* td 자체의 border-top(데스크톱 규칙 잔존)·padding 제거 — tr 두꺼운 보더와 중복 방지 */
  .cost-table tr.total-row td{ border-top:none; padding-top:0; }
  .cost-table tr.self-row{ background:transparent; border-bottom:1px solid var(--line); }
  .cost-table tr.self-row:last-child{ border-bottom:none; }
  /* td 리셋 — 모두 인라인 블록 */
  .cost-table td{ display:block; padding:0; border:none; background:transparent !important; }
  .cost-table td::before{ display:none !important; }
  /* 항목명 (첫 번째 td) */
  .cost-table td:first-child{ font-family:var(--sans); font-size:14px; color:var(--graphite); text-align:left; flex:1; min-width:0; }
  .cost-table tr.total-row td:first-child{ font-size:13px; font-weight:600; color:var(--ink); font-family:var(--sans); }
  .cost-table tr.self-row td:first-child{ font-size:12px; color:var(--graphite); font-family:var(--sans); }
  /* 비선택 등급 숨김 */
  .consult[data-tier="basic"] .ct-standard,
  .consult[data-tier="basic"] .ct-premium,
  .consult[data-tier="standard"] .ct-basic,
  .consult[data-tier="standard"] .ct-premium,
  .consult[data-tier="premium"] .ct-basic,
  .consult[data-tier="premium"] .ct-standard{ display:none !important; }
  /* 선택된 등급 금액 */
  .ct-basic,.ct-standard,.ct-premium{ font-size:15px; font-weight:600; color:var(--ink); text-align:right; white-space:nowrap; flex-shrink:0; }
  .cost-table tr.total-row .ct-basic,
  .cost-table tr.total-row .ct-standard,
  .cost-table tr.total-row .ct-premium{ font-family:var(--serif); font-size:19px; color:var(--coral); }
  .cost-table tr.self-row .ct-basic,
  .cost-table tr.self-row .ct-standard,
  .cost-table tr.self-row .ct-premium{ font-size:13px; font-weight:500; color:var(--sage); }
}

/* P1-5: 바레 갤러리 모바일 가로 캐러셀(스와이프, 길이 압축) + 캡션 상시 */
@media (max-width:768px){
  .barre-editorial{ display:flex; grid-template-columns:none; overflow-x:auto; scroll-snap-type:x mandatory; gap:var(--s3); margin-inline:calc(var(--gutter)*-1); padding:0 var(--gutter) var(--s4); -webkit-overflow-scrolling:touch; }
  .barre-editorial figure,.barre-editorial .quote{ flex:0 0 62%; scroll-snap-align:start; }
}
@media (hover:none){
  .barre-editorial figcaption,.store-gallery figcaption{ opacity:1; transform:none; }
}
.barre-editorial .quote .kr{ font-size:14px; }

/* P1-7: device 제품사진 잘림 방지 — contain 카드 */
.product-card .pimg.contain{ background:var(--cream); }
.product-card .pimg.contain img{ object-fit:contain; padding:var(--s6); }

/* P2: 카드 2열 · 제목 clamp · 터치타깃 44px · 푸터 대비 */
@media (max-width:768px){
  #routing .grid-4,#program .grid-4{ grid-template-columns:1fr 1fr; gap:var(--s4); }
  .service-card .name{ font-size:clamp(22px,6vw,28px); }
  .tier-card .tier-name,.cost-card .tier-name{ font-size:clamp(20px,5.5vw,24px); }
}
.event-close{ width:44px; height:44px; }
.footer-bottom{ color:rgba(255,253,248,.78); }

/* ============================================================
   📱 모바일 콘텐츠 플로우 리디자인 — 웹디자이너+브랜딩 convergence
   데스크탑 그리드 → 모바일 내러티브 흐름  (max-width: 768px)
   ============================================================ */

/* ── A. Experience: 가로 스크롤 캐러셀 + Glow(캡슐) 첫 번째 ── */
@media (max-width:768px){
  #experience .grid-3{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:var(--s4);
    margin-inline:calc(var(--gutter)*-1);
    padding:0 var(--gutter) var(--s6);
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  #experience .grid-3::-webkit-scrollbar{ display:none; }
  #experience .grid-3>.service-card{
    flex:0 0 78vw;
    scroll-snap-align:center;
    text-align:left;
    background:var(--ivory);
    border:1px solid var(--line);
    border-radius:var(--r-card);
    overflow:hidden;
    padding-bottom:var(--s5);
    transition:none;
  }
  #experience .grid-3>.service-card:hover{ transform:none; box-shadow:none; }
  #experience .grid-3>.service-card .media{ aspect-ratio:4/3; border-radius:0; width:100%; }
  #experience .grid-3>.service-card .icon{ margin:var(--s4) var(--s5) var(--s1); }
  #experience .grid-3>.service-card .name{ padding-inline:var(--s5); font-size:clamp(20px,5vw,24px); margin-top:0; }
  #experience .grid-3>.service-card .desc{ padding-inline:var(--s5); font-size:14px; margin-top:var(--s2); }
  #experience .grid-3>.service-card .link{ padding-inline:var(--s5); display:block; margin-top:var(--s3); }
  /* 브랜딩: Glow(캡슐) 카드를 캐러셀 첫 번째로 — CAPSULE 브랜드 코어 */
  #experience .grid-3>.service-card:nth-child(3){ order:-1; }
  /* peek 힌트 여백 */
  #experience .grid-3::after{ content:''; flex:0 0 8px; }
}

/* ── B. Routing: 2×2 컴팩트, 설명 숨김 ─────────────────────── */
@media (max-width:768px){
  #routing .route-card{ padding:var(--s5) var(--s4); min-height:80px; gap:var(--s2); }
  #routing .route-card .route-num{ font-size:15px; }
  #routing .route-card h3{ font-size:16px; line-height:1.25; }
  #routing .route-card p,
  #routing .route-card .btn-text{ display:none; }
}

/* ── C. Trust: 왼쪽 보더 텍스트 리스트 ─────────────────────── */
@media (max-width:768px){
  #trust .grid-3{ grid-template-columns:1fr; gap:0; }
  #trust .grid-3>article{
    text-align:left!important;
    padding:var(--s5) 0 var(--s5) var(--s5);
    border-left:3px solid var(--coral);
    border-bottom:1px solid var(--line);
  }
  #trust .grid-3>article:last-child{ border-bottom:none; }
  #trust .grid-3>article>.ico{ width:20px; height:20px; margin:0 var(--s2) 0 0; display:inline-block; vertical-align:middle; }
  #trust .grid-3>article>h3{ font-size:clamp(20px,5vw,24px); margin-top:var(--s3); line-height:1.2; }
  #trust .grid-3>article>p{ font-size:14px; margin-top:var(--s2); line-height:1.65; }
}

/* ── D. Franchise 차별점 카드: 미디어 오브젝트 (CSS Grid) ───── */
@media (max-width:768px){
  #franchise .grid-3>.card{
    display:grid;
    grid-template-columns:52px 1fr;
    grid-template-rows:auto auto;
    column-gap:var(--s4);
    row-gap:var(--s1);
    align-items:start;
    padding:var(--s5) 0;
    background:transparent!important;
    border:none!important;
    border-bottom:1px solid var(--line)!important;
    border-radius:0!important;
    box-shadow:none!important;
  }
  #franchise .grid-3>.card:hover{ transform:none!important; box-shadow:none!important; }
  #franchise .grid-3>.card:last-child{ border-bottom:none!important; }
  #franchise .grid-3>.card>.ico{
    grid-column:1; grid-row:1/3;
    width:48px; height:48px;
    padding:var(--s3);
    background:var(--coral-mist);
    border-radius:var(--r-img);
    color:var(--coral)!important;
    margin:0;
    align-self:start;
  }
  #franchise .grid-3>.card>h3{ grid-column:2; grid-row:1; font-size:18px; margin-top:0; line-height:1.3; text-align:left; }
  #franchise .grid-3>.card>p{ grid-column:2; grid-row:2; font-size:14px; text-align:left; line-height:1.6; }
}

/* ── E. Franchise 지원 섹션: 2열 컴팩트 ────────────────────── */
@media (max-width:768px){
  #franchise .grid-2{ grid-template-columns:1fr 1fr!important; gap:var(--s3); }
  #franchise .grid-2 .route-card{ padding:var(--s4) var(--s3); gap:var(--s2); }
  #franchise .grid-2 .route-card>.ico{ width:28px; height:28px; }
  #franchise .grid-2 .route-card h3{ font-size:14px; font-family:var(--sans); font-weight:600; line-height:1.3; }
  #franchise .grid-2 .route-card p,
  #franchise .grid-2 .route-card .btn-text{ display:none; }
}

/* ── F. Process 스텝: 수직 타임라인 (인라인 스타일 override) ── */
@media (max-width:768px){
  .process{ grid-template-columns:1fr!important; gap:0; padding-left:48px; position:relative; }
  .process::before{
    content:'';
    position:absolute;
    left:16px; top:24px; bottom:24px;
    width:2px;
    background:linear-gradient(to bottom, var(--coral) 0%, var(--coral-mist) 100%);
    border-radius:1px;
  }
  .process-step{ position:relative; padding:6px 0 var(--s6) 0; }
  .process-step:last-child{ padding-bottom:0; }
  .process-step::before{
    position:absolute;
    left:-48px; top:6px;
    width:34px; height:34px;
    background:var(--coral);
    color:var(--ivory);
    border-radius:50%;
    font-size:12px;
    font-style:normal;
    font-family:var(--sans);
    line-height:34px;
    text-align:center;
    box-shadow:0 0 0 3px var(--ivory),0 0 0 5px var(--coral-mist);
  }
  .process-step h4{ font-size:16px; font-weight:600; margin-bottom:var(--s2); line-height:1.3; }
  .process-step p{ font-size:14px; line-height:1.65; }
}

/* ── G. Tier Grid: featured 카드 맨 위로 ────────────────────── */
@media (max-width:768px){
  .tier-grid{ display:flex; flex-direction:column; gap:var(--s4); }
  .tier-card.featured{ order:-1; box-shadow:0 8px 32px rgba(182,80,62,.18); }
  .amb-pillars{ display:none!important; }
}

/* ── H. Program 4카드: 가로형 미디어 오브젝트 ───────────────── */
@media (max-width:768px){
  #program .grid-4{ display:flex; flex-direction:column; gap:var(--s3); }
  #program .grid-4>.service-card{
    display:grid;
    grid-template-columns:76px 1fr;
    grid-template-rows:auto auto;
    align-items:center;
    column-gap:var(--s4);
    text-align:left;
    background:var(--cream);
    border:1px solid var(--line);
    border-radius:var(--r-card);
    padding:var(--s3);
  }
  #program .grid-4>.service-card:hover{ transform:none!important; box-shadow:none!important; }
  #program .grid-4>.service-card .media{
    grid-column:1; grid-row:1/3;
    width:76px; height:76px;
    aspect-ratio:1/1;
    border-radius:var(--r-img);
    align-self:center;
  }
  #program .grid-4>.service-card .media img{
    width:76px; height:76px;
    object-fit:cover;
    border-radius:var(--r-img);
    transition:none;
  }
  #program .grid-4>.service-card .icon{ display:none; }
  #program .grid-4>.service-card .name{ grid-column:2; grid-row:1; font-size:17px; margin:0; padding:0; }
  #program .grid-4>.service-card .desc{
    grid-column:2; grid-row:2;
    font-size:13px; margin:var(--s1) 0 0; padding:0;
  }
}

/* ============================================================
   창업 투자 상담 (인터랙티브 선택형 — 매장 등급 × 시작 방식)
   ============================================================ */
.consult-panel{ background:var(--ivory); border:1px solid var(--line); border-radius:var(--r-card); padding:clamp(20px,3vw,32px); box-shadow:var(--shadow); }
.consult-seg-label{ font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--graphite); margin-bottom:var(--s3); }
.consult-seg-label .n{ font-family:var(--serif); font-style:italic; color:var(--coral); margin-right:6px; }
.consult-seg{ display:flex; gap:var(--s3); flex-wrap:wrap; }
.consult-seg + .consult-seg-label{ margin-top:var(--s6); }
.consult-seg button{ flex:1; min-width:150px; padding:14px 16px; border:1.5px solid var(--line); border-radius:var(--r-btn); background:var(--ivory); color:var(--graphite); font-family:var(--sans); font-weight:600; font-size:15px; text-align:center; line-height:1.4; min-height:56px; transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease); }
.consult-seg button .s{ display:block; font-size:12px; font-weight:400; opacity:.85; margin-top:3px; }
.consult-seg button:hover{ border-color:var(--coral-mist); }
.consult-seg button[aria-pressed="true"]{ border-color:var(--coral); background:var(--coral-mist); color:#8D3D2D; }
.consult-seg button[aria-pressed="true"] .s{ color:#8D3D2D; opacity:1; }
/* 투자 요약 3블록 */
.consult-sum{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:var(--s3); background:var(--cream); border:1px solid var(--line); border-radius:var(--r-card); padding:clamp(20px,3vw,28px); }
.consult-sum .blk{ text-align:center; min-width:0; }
.consult-sum .lbl{ font-size:12px; letter-spacing:.02em; color:var(--graphite); margin-bottom:8px; }
.consult-sum .amt{ font-family:var(--serif); font-size:clamp(18px,2.3vw,24px); color:var(--coral); line-height:1.1; white-space:nowrap; letter-spacing:-.01em; }
.consult-sum .amt.sage{ color:var(--sage); }
.consult-sum .sub{ font-size:12px; color:var(--graphite); margin-top:8px; }
.consult-sum .op{ font-family:var(--serif); font-size:20px; color:var(--graphite); flex:none; }
@media (max-width:768px){
  /* 등급/방식 버튼 — 3버튼 1행, 줄바꿈 없이 */
  .consult-seg{ flex-wrap:nowrap; }
  .consult-seg button{ min-width:0; flex:1; font-size:13px; padding:10px 8px; }
  .consult-seg button .s{ font-size:11px; }
  /* 투자 요약 3블록 — 수직 스택, 구분선 */
  .consult-sum{ grid-template-columns:1fr; gap:0; padding:var(--s4) var(--s6); }
  .consult-sum .op{ display:none; }
  .consult-sum .amt{ font-size:clamp(20px,5vw,26px); }
  .consult-sum .blk{ padding:var(--s4) 0; border-bottom:1px solid var(--line); text-align:left; }
  .consult-sum .blk:last-child{ border-bottom:none; }
  .consult-sum .lbl{ margin-bottom:var(--s2); }
}
/* 조건부 표시 (시작 방식) */
.for-std,.for-own{ display:none; }
.consult[data-opt="standard"] .for-std{ display:block; }
.consult[data-opt="owner"] .for-own{ display:block; }
/* 비교 테이블 — 선택 등급 동적 하이라이트 (데스크톱) */
@media (min-width:769px){
  .consult[data-tier="basic"] .ct-basic, .consult[data-tier="standard"] .ct-standard, .consult[data-tier="premium"] .ct-premium{ background:var(--coral-mist); }
  .consult[data-tier="basic"] thead .ct-basic .tier-h, .consult[data-tier="standard"] thead .ct-standard .tier-h, .consult[data-tier="premium"] thead .ct-premium .tier-h{ color:var(--coral); }
  .cost-table .self-row td{ font-size:13px; color:var(--graphite); }
  .cost-table .self-row td strong{ color:var(--ink); }
}
/* 비교 테이블 — 모바일: 선택한 등급만 깔끔한 2열 행 레이아웃 (정보 과밀·보더 끊김 방지) */
@media (max-width:768px){
  .consult[data-tier="basic"]   .cost-table td.ct-standard,
  .consult[data-tier="basic"]   .cost-table td.ct-premium,
  .consult[data-tier="standard"] .cost-table td.ct-basic,
  .consult[data-tier="standard"] .cost-table td.ct-premium,
  .consult[data-tier="premium"]  .cost-table td.ct-basic,
  .consult[data-tier="premium"]  .cost-table td.ct-standard{ display:none; }
  .consult .cost-table-wrap{ overflow:visible; }
  .consult .cost-table,
  .consult .cost-table tbody{ display:block; }
  .consult .cost-table tr{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s4); padding:13px 0; margin:0; border:none; border-bottom:1px solid var(--line); border-radius:0; background:transparent; }
  .consult .cost-table td{ display:block; padding:0; border:none; }
  .consult .cost-table td::before{ display:none; }
  .consult .cost-table td:first-child{ font-family:var(--sans); font-size:15px; color:var(--graphite); }
  .consult .cost-table td:not(:first-child){ font-weight:600; color:var(--ink); text-align:right; white-space:nowrap; }
  .consult .cost-table tr:has(+ tr.total-row){ border-bottom:none; }
  .consult .cost-table tr:last-child{ border-bottom:none; }
  .consult .cost-table tr.total-row{ border-top:2px solid var(--ink); border-bottom:none; margin-top:6px; padding-top:15px; }
  .consult .cost-table tr.total-row td{ font-family:var(--serif); font-size:18px; }
  .consult .cost-table tr.total-row td:not(:first-child){ color:var(--coral); }
  .consult .cost-table tr.self-row td:first-child{ font-size:13px; }
  .consult .cost-table tr.self-row td:not(:first-child){ color:var(--coral); }
}
/* 로열티 2단계 카드 */
.phase-grid{ display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:var(--s4); }
.phase-grid.single{ grid-template-columns:1fr; max-width:560px; }
@media (max-width:768px){ .phase-grid{ grid-template-columns:1fr; } }
.phase-card{ border-radius:var(--r-card); padding:var(--s8); color:var(--ivory); }
.phase-card.p1{ background:var(--coral); }
.phase-card.p2{ background:var(--sage); }
.phase-card .ph{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; opacity:.85; margin-bottom:var(--s3); }
.phase-card .pamt{ font-family:var(--serif); font-size:clamp(26px,3vw,32px); margin-bottom:var(--s4); line-height:1.1; }
.phase-card .pamt small{ font-family:var(--sans); font-size:15px; opacity:.9; }
.phase-card ul{ display:flex; flex-direction:column; gap:var(--s2); }
.phase-card li{ font-size:14px; line-height:1.5; padding-left:16px; position:relative; }
.phase-card li::before{ content:''; position:absolute; left:0; top:9px; width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.7; }
.phase-arrow{ display:flex; align-items:center; justify-content:center; color:var(--coral); }
@media (max-width:768px){ .phase-arrow{ transform:rotate(90deg); padding:var(--s2) 0; } }
/* 담보 하이라이트 카드 */
.secure-card{ display:flex; gap:var(--s6); align-items:center; flex-wrap:wrap; background:var(--cream); border:1px solid var(--line); border-radius:var(--r-card); padding:var(--s8); }
.secure-card .si{ flex:none; color:var(--coral); }
.secure-card .sx h3{ margin-bottom:var(--s2); }
.secure-card .sx p{ font-size:15px; color:var(--graphite); }
/* 오픈 지원 항목 */
.support-list{ background:var(--ivory); border:1px solid var(--line); border-radius:var(--r-card); padding:var(--s6) var(--s8); }
.support-item{ display:flex; gap:var(--s4); align-items:flex-start; padding:var(--s4) 0; border-bottom:1px solid var(--line); }
.support-item:last-child{ border-bottom:none; }
.support-item .si-ico{ color:var(--sage); flex:none; margin-top:3px; }
.support-item .si-tx b{ font-size:15px; color:var(--ink); }
.support-item .si-tx .si-badge{ font-size:11px; font-weight:600; color:#8D3D2D; background:var(--coral-mist); padding:1px 9px; border-radius:var(--r-pill); margin-left:6px; }
.support-item .si-tx p{ font-size:13px; color:var(--graphite); margin-top:2px; }
.promo-highlight{ background:var(--coral-mist); border-radius:var(--r-img); padding:var(--s4) var(--s6); font-size:14px; color:#8D3D2D; font-weight:600; margin-top:var(--s4); display:flex; gap:var(--s3); align-items:flex-start; }
.promo-highlight svg{ flex:none; margin-top:2px; }

/* ── franchise-consultation 모바일 최적화 ───────────────────────
   방향: 이미지(큰 숫자·색상 블록) 중심, 장문 텍스트는 숨기거나 축약
   ───────────────────────────────────────────────────────────── */
@media (max-width:768px){
  /* cost-row 금액 줄바꿈 방지 */
  .cost-row .amt{ white-space:nowrap; flex-shrink:0; }

  /* ① Investment 섹션 — lead 설명 숨김, 핵심 숫자+테이블만 */
  .consult .section-header > p.for-std,
  .consult .section-header > p.for-own{ display:none !important; }

  /* 선택된 방식의 자기자본 행만 표시 (중복 행 제거) */
  .consult[data-opt="standard"] .cost-table .self-row + .self-row{ display:none !important; }
  .consult[data-opt="owner"] .cost-table .self-row:not(.self-row + .self-row){ display:none !important; }

  /* ② cost-note (면책·고지·수익 설명) — 고지/설명 텍스트는 절대 크롭 금지, 전체 표시 */
  .cost-note{ display:block; overflow:visible; }

  /* ③ consult-sum — 숫자를 더 크고 에어리하게 */
  .consult-sum{ padding:var(--s6); }
  .consult-sum .amt{ font-size:clamp(22px,6vw,30px); }
  .consult-sum .lbl{ font-size:12px; letter-spacing:.03em; }

  /* ④ secure-card — 아이콘·패딩 조정 */
  .secure-card{ padding:var(--s6); gap:var(--s4); }
  .secure-card .si{ width:36px; height:36px; }
  .secure-card .sx h3{ font-size:18px; }
  .secure-card .sx p{ font-size:14px; }

  /* ⑤ phase-card — 패딩 적정화 */
  .phase-card{ padding:var(--s6); }
  .phase-card .pamt{ font-size:clamp(22px,5.5vw,28px); }

  /* ⑥ Why CAPSULE 4카드 → 2×2 컴팩트 */
  .consult .grid-4{ grid-template-columns:1fr 1fr; gap:var(--s3); }
  .consult .grid-4 > .card{ padding:var(--s5); }
  .consult .grid-4 > .card h3{ font-size:17px; margin-top:var(--s3) !important; }
  .consult .grid-4 > .card p.body-muted{ font-size:13px; }

  /* ⑦ 오픈 지원 첫 카드 패딩 */
  .consult .split > .card:first-child{ padding:var(--s5); }

  /* ⑧ 오픈 지원 두 번째 카드 내부 패딩 (inline style override) */
  .consult .split > .card:last-child > div:first-child{ padding:var(--s5) var(--s5) 0 !important; }
  .consult .split > .card:last-child .support-list{ padding:var(--s3) var(--s5) var(--s5) !important; }

  /* ⑨ 최하단 CTA 버튼 세로 스택 */
  .consult .text-center .btn.btn-secondary{ margin-left:0 !important; display:block; margin-top:var(--s3); }

  /* ⑩ page-hero lead 텍스트 축약 */
  .page-hero .lead{ font-size:14px; line-height:1.6; }

  /* ⑪ 섹션 헤더 margin-bottom 압축 (lead 숨김으로 생긴 여백 조정) */
  .consult .section-header{ margin-bottom:var(--s8); }
  .consult .section-header.center{ margin-bottom:var(--s8); }
}

/* ── franchise.html 모바일 개선 ──────────────────────────────────
   창업비용 tier 셀렉터 + 지원 카드 레이아웃 + cost-row 가독성
   ──────────────────────────────────────────────────────────── */

/* 데스크탑: fr-seg 숨김, fr-tier-desc 표시 */
.fr-seg{ display:none; }
.fr-tier-desc{ display:block; }

@media (max-width:768px){
  /* ① Tier 셀렉터 */
  .fr-seg{
    display:flex;
    border:1px solid var(--line);
    border-radius:var(--r-pill);
    overflow:hidden;
    margin-bottom:var(--s5);
  }
  .fr-seg button{
    flex:1; padding:10px 4px; font-size:12px; line-height:1.25;
    background:transparent; border:none; border-right:1px solid var(--line);
    color:var(--graphite); cursor:pointer; font-family:var(--sans);
    display:flex; flex-direction:column; align-items:center; gap:2px;
  }
  .fr-seg button:last-child{ border-right:none; }
  .fr-seg button[aria-pressed="true"]{ background:var(--ink); color:var(--ivory); }
  .fr-seg button .s{ font-size:10px; opacity:.75; }

  /* ② 비선택 등급 숨김 */
  .fr-invest[data-tier="basic"] .ct-standard,
  .fr-invest[data-tier="basic"] .ct-premium,
  .fr-invest[data-tier="standard"] .ct-basic,
  .fr-invest[data-tier="standard"] .ct-premium,
  .fr-invest[data-tier="premium"] .ct-basic,
  .fr-invest[data-tier="premium"] .ct-standard{ display:none !important; }

  /* ③ 선택 등급 값 스타일 */
  .fr-invest .ct-basic,
  .fr-invest .ct-standard,
  .fr-invest .ct-premium{
    font-size:15px; font-weight:600; color:var(--ink);
    text-align:right; white-space:nowrap; flex-shrink:0;
  }
  .fr-invest .cost-table tr.total-row .ct-basic,
  .fr-invest .cost-table tr.total-row .ct-standard,
  .fr-invest .cost-table tr.total-row .ct-premium{
    font-family:var(--serif); font-size:19px; color:var(--coral);
  }

  /* ④ 등급 설명 텍스트 → 셀렉터로 대체, 모바일 숨김 */
  .fr-tier-desc{ display:none; }

  /* ⑤ Support route-cards: 2열 → 1열 horizontal 레이아웃 + 설명 표시 */
  #franchise .grid-2{ grid-template-columns:1fr!important; gap:var(--s2); }
  #franchise .grid-2 .route-card{
    flex-direction:row; align-items:flex-start;
    padding:var(--s4) var(--s5); gap:var(--s4);
    border-radius:var(--r-card);
  }
  #franchise .grid-2 .route-card>.ico{ width:22px; height:22px; flex-shrink:0; margin-top:2px; }
  #franchise .grid-2 .route-card h3{ font-size:15px; font-family:var(--sans); font-weight:600; margin-bottom:var(--s1); }
  #franchise .grid-2 .route-card p{ display:block!important; font-size:13px; color:var(--graphite); }

  /* ⑥ Revenue model cost-row — 긴 라벨 가독성 */
  #franchise .split .cost-row{ font-size:13px; padding-block:var(--s2); align-items:flex-start; }
  #franchise .split .cost-row .amt{ white-space:nowrap; flex-shrink:0; font-size:14px; font-weight:600; }
}