/* 돌판해물짜장 창업모집 — 공통 스타일 v2 (패밀리 브랜드 사이트 톤: 진한 브랜드 바 · 꽉 찬 사진 · 붓글씨 헤드라인 · 하단 고정 문의 바) */

/* ── 폰트 ─────────────────────────────────────────── */
@font-face { font-family: 'Gmarket Sans'; font-weight: 700; font-display: swap; src: url('../fonts/GmarketSansBold.woff') format('woff'); }
@font-face { font-family: 'Gmarket Sans'; font-weight: 500; font-display: swap; src: url('../fonts/GmarketSansMedium.woff') format('woff'); }

/* ── 토큰 ─────────────────────────────────────────── */
:root {
  --green-900: #003A1E;
  --green-800: #06432A;
  --green-700: #0B4A2A;
  --green-600: #1A5C3A;
  --green-050: #E8F0EA;
  --red: #D80C12;
  --red-dark: #B80000;
  --red-050: #FBEAEA;
  --gold: #F3CF6A;
  --gold-2: #E2B64C;
  --gold-dark: #B08A2E;
  --gold-line: rgba(243,207,106,.5);
  --ivory: #F6F1E6;
  --cream: #FBF8F1;
  --white: #FFFFFF;
  --ink: #141414;
  --ink-2: #3A3A36;
  --muted: #6B6B63;
  --line: #E3DDD0;
  --line-dark: rgba(255,255,255,.16);
  --font-body: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-num: 'Gmarket Sans', var(--font-body);
  --font-brush: 'Black And White Picture', 'Gmarket Sans', var(--font-body);
  --radius: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(20,20,20,.05), 0 4px 14px rgba(20,20,20,.07);
  --shadow-md: 0 10px 30px rgba(20,20,20,.14);
  --gutter: 20px;
  --container: 1200px;
  --header-h: 60px;
  --bottom-h: 58px;           /* 모바일 하단 바 */
  --sec-y: clamp(64px, 5vw + 32px, 120px);
  --fs-hero: clamp(36px, 1.8rem + 3.2vw, 72px);
  --fs-h1: clamp(32px, 1.5rem + 2.4vw, 60px);
  --fs-h2: clamp(28px, 1.2rem + 1.8vw, 46px);
  --fs-h3: clamp(18px, 1rem + .5vw, 22px);
  --fs-lead: clamp(16px, .95rem + .3vw, 18px);
  --fs-stat: clamp(36px, 1.6rem + 1.8vw, 58px);
  --ease: cubic-bezier(.22,.61,.36,1);
}
@media (min-width: 720px) { :root { --gutter: 32px; --header-h: 70px; } }
@media (min-width: 960px) { :root { --bottom-h: 74px; } }
@media (min-width: 1200px) { :root { --gutter: 40px; --header-h: 80px; } }

/* ── 리셋 ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; position: relative; font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: var(--ink); background: var(--white); word-break: keep-all; overflow-wrap: anywhere; padding-bottom: var(--bottom-h); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
strong { font-weight: 700; }
small { font-size: .85em; }
em { font-style: normal; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
::selection { background: var(--gold); color: var(--green-900); }
mark.todo { background: #FFF2B3; color: #7A5A00; padding: 0 .3em; border-radius: 4px; font-size: .88em; font-weight: 600; }
.on-dark mark.todo { background: rgba(243,207,106,.22); color: var(--gold); }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: 8px 12px; z-index: 1000; }
.skip:focus { left: 8px; top: 8px; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.ico-check, .ico-arrow, .ico-phone { width: 1em; height: 1em; flex: none; vertical-align: -.12em; }

/* ── 등장 애니메이션 (JS가 .is-in 추가) ───────────── */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-stagger > * { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-stagger.is-in > * { opacity: 1; transform: none; }
.reveal-stagger.is-in > :nth-child(2) { transition-delay: .08s; }
.reveal-stagger.is-in > :nth-child(3) { transition-delay: .16s; }
.reveal-stagger.is-in > :nth-child(4) { transition-delay: .24s; }
.reveal-stagger.is-in > :nth-child(5) { transition-delay: .32s; }
.reveal-stagger.is-in > :nth-child(6) { transition-delay: .40s; }
.reveal-stagger.is-in > :nth-child(n+7) { transition-delay: .48s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── 타이포 ───────────────────────────────────────── */
.brush, .sec-title, .hero-title, .page-title { font-family: var(--font-brush); font-weight: 400; line-height: 1.18; letter-spacing: 0; }
.num, .stat-value, .price, .display { font-family: var(--font-num); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.sec-title { font-size: var(--fs-h2); color: var(--green-900); }
.sec-title .accent { color: var(--red); }
.on-dark .sec-title { color: #fff; }
.on-dark .sec-title .accent { color: var(--gold); }
.gold-text { background: linear-gradient(180deg, #FBE7A3 0%, var(--gold) 45%, #C99A2E 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sec-lead { margin-top: 14px; color: var(--ink-2); font-size: var(--fs-lead); max-width: 640px; line-height: 1.75; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-num); font-weight: 700; font-size: 14px; letter-spacing: .04em; color: var(--red); margin-bottom: 14px; }
.eyebrow::before, .eyebrow.center::after { content: ''; width: 26px; height: 2px; background: currentColor; }
.eyebrow.center { justify-content: center; }
.on-dark { color: #fff; }
.on-dark .eyebrow { color: var(--gold); }
.on-dark .sec-lead { color: rgba(255,255,255,.84); }
.sec-head { margin-bottom: clamp(28px, 3vw, 52px); }
.sec-head.center { text-align: center; }
.sec-head.center .sec-lead { margin-left: auto; margin-right: auto; }
.sec-head.row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
.sec-head.row .sec-lead { margin-top: 10px; }

/* ── 섹션 ─────────────────────────────────────────── */
.sec { padding: var(--sec-y) 0; position: relative; }
.sec-cream { background: var(--cream); }
.sec-ivory { background: var(--ivory); }
.sec-green { background: var(--green-900); color: #fff; }
.sec-tight { padding: calc(var(--sec-y) * .6) 0; }
/* 사진 배경 섹션 (--bg 로 이미지 지정) */
.sec-photo { background: #0B1F14; color: #fff; isolation: isolate; overflow: hidden; }
.sec-photo::before { content: ''; position: absolute; inset: 0; z-index: -2; background-image: var(--bg, none); background-size: cover; background-position: center; transform: scale(1.03); }
.sec-photo::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,30,15,.86) 0%, rgba(0,30,15,.74) 50%, rgba(0,30,15,.9) 100%); }
.sec-photo.is-light::after { background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(251,248,241,.92)); }
.sec-photo.is-light { color: var(--ink); }
/* 간판 모티프: 금색 가는 테두리 프레임 */
.frame-gold { position: relative; }
.frame-gold::before { content: ''; position: absolute; inset: 14px; border: 1px solid var(--gold-line); border-radius: 6px; pointer-events: none; z-index: 1; }
@media (min-width: 960px) { .frame-gold::before { inset: 22px; } }
.sec > .frame { position: absolute; inset: 14px; border: 1px solid var(--gold-line); border-radius: 6px; pointer-events: none; z-index: 1; }
@media (min-width: 960px) { .sec > .frame { inset: 22px; } }

/* ── 버튼 ─────────────────────────────────────────── */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 26px; border-radius: 999px; font-weight: 700; font-size: 16px; line-height: 1.2; border: 2px solid transparent; transition: background-color .2s, color .2s, border-color .2s, transform .15s var(--ease), box-shadow .2s; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
.btn .ico-arrow { transition: transform .2s var(--ease); }
.btn:hover .ico-arrow { transform: translateX(3px); }
.btn-red { background: var(--red); color: #fff; border-color: var(--red); box-shadow: 0 8px 22px rgba(216,12,18,.32); }
.btn-red:hover { background: var(--red-dark); border-color: var(--red-dark); }
.btn-gold { background: linear-gradient(180deg, #F8DC8A, var(--gold-2)); color: var(--green-900); border-color: transparent; box-shadow: 0 8px 22px rgba(0,0,0,.25); }
.btn-gold:hover { background: linear-gradient(180deg, #FBE7A3, var(--gold)); }
.btn-green { background: var(--green-900); color: #fff; border-color: var(--green-900); }
.btn-green:hover { background: var(--green-700); }
.btn-outline-white { color: #fff; border-color: rgba(255,255,255,.6); backdrop-filter: blur(4px); }
.btn-outline-white:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.btn-outline-green { color: var(--green-900); border-color: var(--green-900); }
.btn-outline-green:hover { background: var(--green-900); color: #fff; }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: 15px; }
.btn-lg { min-height: 60px; font-size: 17px; padding: 0 34px; }
.btn-block { width: 100%; }
.link-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--green-900); font-size: 15px; }
.link-more .ico-arrow { transition: transform .2s var(--ease); }
.link-more:hover .ico-arrow { transform: translateX(4px); }
.link-more:hover { color: var(--red); }
.on-dark .link-more { color: var(--gold); }

/* ── 헤더 (진한 브랜드 바) ─────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--green-900); color: #fff; border-bottom: 1px solid rgba(243,207,106,.35); transition: box-shadow .25s, transform .3s var(--ease); }
.site-header.scrolled { box-shadow: 0 8px 28px rgba(0,0,0,.25); }
.site-header.is-hidden { transform: translateY(-100%); }
.header-in { display: flex; align-items: center; height: var(--header-h); gap: 16px; }
.logo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo img { width: 42px; height: 42px; transition: transform .3s var(--ease); }
.logo:hover img { transform: rotate(-6deg) scale(1.04); }
.logo-text { display: flex; flex-direction: column; line-height: 1.05; }
.logo-name { font-family: var(--font-num); font-weight: 700; font-size: 20px; color: #fff; letter-spacing: -.01em; }
.logo-sub { font-size: 11px; color: var(--gold); letter-spacing: .06em; margin-top: 3px; }
.nav { display: none; }
.header-cta { display: none; }
.menu-btn { margin-left: auto; width: 44px; height: 44px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; border-radius: 10px; }
.menu-btn span { width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: transform .25s var(--ease), opacity .2s; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.drawer { position: absolute; left: 0; right: 0; top: var(--header-h); background: var(--green-800); color: #fff; border-bottom: 1px solid var(--gold-line); box-shadow: 0 16px 32px rgba(0,0,0,.3); padding: 8px var(--gutter) 22px; animation: drawer-in .25s var(--ease); }
@keyframes drawer-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.drawer nav a { display: flex; justify-content: space-between; align-items: center; padding: 15px 4px; border-bottom: 1px solid var(--line-dark); font-weight: 600; font-size: 17px; }
.drawer nav a[aria-current="page"] { color: var(--gold); }
.drawer nav a .ico-arrow { color: var(--gold); }
.drawer-foot { padding-top: 16px; }
.drawer-foot .btn { width: 100%; }
@media (min-width: 880px) {
  .logo img { width: 48px; height: 48px; }
  .logo-name { font-size: 22px; }
  .nav { display: flex; gap: 2px; margin-left: 24px; }
  .nav a { position: relative; padding: 8px 13px; font-weight: 600; font-size: 16px; color: rgba(255,255,255,.88); transition: color .2s; }
  .nav a::after { content: ''; position: absolute; left: 13px; right: 13px; bottom: 2px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
  .nav a:hover { color: #fff; }
  .nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
  .nav a[aria-current="page"] { color: var(--gold); }
  .header-cta { display: flex; align-items: center; gap: 12px; margin-left: auto; }
  .header-phone { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-num); font-weight: 700; font-size: 20px; color: #fff; }
  .header-phone .ico-phone { color: var(--gold); font-size: 18px; }
  .header-phone span small { font-family: var(--font-body); font-weight: 600; font-size: 14px; color: rgba(255,255,255,.75); margin-right: 6px; }
  .menu-btn, .drawer { display: none !important; }
}
@media (min-width: 1200px) { .nav { gap: 6px; margin-left: 40px; } .nav a { padding: 8px 15px; font-size: 17px; } .header-phone { font-size: 22px; } }

/* ── 히어로 (꽉 찬 사진) ───────────────────────────── */
.hero { position: relative; color: #fff; isolation: isolate; overflow: hidden; background: #0B1F14; }
.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; transform: scale(1.06); animation: hero-zoom 14s var(--ease) forwards; }
@keyframes hero-zoom { to { transform: scale(1); } }
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, rgba(0,34,18,.94) 0%, rgba(0,34,18,.82) 45%, rgba(0,34,18,.35) 100%),
  linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,0) 30%, rgba(0,24,12,.85) 100%); }
.hero-in { position: relative; padding: clamp(56px, 8vw, 120px) 0 clamp(72px, 9vw, 140px); display: grid; gap: 28px; }
.hero-lockup { width: clamp(150px, 12vw + 70px, 230px); margin-bottom: 22px; filter: drop-shadow(0 12px 28px rgba(0,0,0,.5)); }
.hero-kw { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-num); font-weight: 700; font-size: clamp(14px, .7rem + .5vw, 18px); color: var(--gold); letter-spacing: .06em; margin-bottom: 18px; }
.hero-kw::before { content: ''; width: 28px; height: 2px; background: var(--gold); }
.hero-title { font-size: var(--fs-hero); color: #fff; text-shadow: 0 6px 30px rgba(0,0,0,.45); }
.hero-title .line2 { display: block; }
.hero-title .accent { color: var(--gold); }
.hero-lead { margin-top: 22px; font-size: var(--fs-lead); color: rgba(255,255,255,.86); max-width: 560px; text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-actions .btn { flex: 1 1 160px; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.hero-facts li { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--gold-line); border-radius: 999px; background: rgba(0,0,0,.25); backdrop-filter: blur(4px); font-size: 14px; color: rgba(255,255,255,.9); }
.hero-facts b { font-family: var(--font-num); color: var(--gold); font-size: 17px; }
@media (min-width: 720px) {
  .hero-in { grid-template-columns: minmax(0, 640px) 1fr; }
  .hero-actions .btn { flex: 0 0 auto; min-width: 190px; }
}
@media (min-width: 1200px) { .hero-in { padding-top: 120px; padding-bottom: 150px; } }

/* 히어로 아래 겹치는 숫자 띠 */
.stats { position: relative; z-index: 2; margin-top: -40px; }
.stats-card { background: var(--green-900); color: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); border: 1px solid var(--gold-line); overflow: hidden; }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.stat { padding: 22px 10px 20px; text-align: center; border-bottom: 1px solid var(--line-dark); }
.stat:nth-child(odd) { border-right: 1px solid var(--line-dark); }
.stat:nth-last-child(-n+2) { border-bottom: 0; }
.stat-value { font-size: var(--fs-stat); color: var(--gold); line-height: 1; }
.stat-value small { font-family: var(--font-num); font-size: .38em; font-weight: 700; color: #fff; margin-left: 2px; }
.stat-label { margin-top: 10px; font-weight: 700; font-size: 14px; color: rgba(255,255,255,.85); }
.stat-note { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 2px; }
.stat.stat-hq .stat-value { color: #fff; }
@media (min-width: 720px) {
  .stats { margin-top: -48px; }
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .stat { border-right: 1px solid var(--line-dark); padding: 28px 12px 24px; }
  .stat:nth-child(3n) { border-right: 0; }
  .stat:nth-last-child(-n+3) { border-bottom: 0; }
}
@media (min-width: 1100px) {
  .stats-grid { grid-template-columns: repeat(6, 1fr); }
  .stat { border-bottom: 0 !important; border-right: 1px solid var(--line-dark) !important; padding: 34px 10px 30px; }
  .stat:last-child { border-right: 0 !important; }
  .stat-label { font-size: 15px; margin-top: 12px; }
}
.stats.inline { margin-top: 0; }

/* ── 우측 플로팅 버튼 (데스크톱) ─────────────────── */
.side-float { display: none; }
@media (min-width: 960px) {
  .side-float { display: flex; flex-direction: column; gap: 10px; position: fixed; right: 18px; bottom: calc(var(--bottom-h) + 18px); z-index: 95; }
  .side-float a { width: 88px; height: 88px; border-radius: 16px; overflow: hidden; position: relative; display: flex; align-items: flex-end; justify-content: center; color: #fff; font-weight: 700; font-size: 13px; box-shadow: 0 10px 24px rgba(0,0,0,.28); border: 2px solid var(--gold); transition: transform .25s var(--ease), box-shadow .25s; }
  .side-float a:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.34); }
  .side-float img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .side-float span { position: relative; width: 100%; padding: 5px 0 6px; text-align: center; background: rgba(0,42,22,.88); }
  .side-float .sf-call { background: var(--red); flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
  .side-float .sf-call .ico-phone { font-size: 30px; color: #fff; }
  .side-float .sf-call span { background: transparent; padding: 0; }
}

/* ── 하단 고정 바 ─────────────────────────────────── */
.quick-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--green-900); color: #fff; border-top: 2px solid var(--gold); box-shadow: 0 -8px 28px rgba(0,0,0,.25); padding-bottom: env(safe-area-inset-bottom); }
.qb-mobile { display: grid; grid-template-columns: 1fr 1fr; height: var(--bottom-h); }
.qb-mobile a { display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-num); font-weight: 700; font-size: 17px; color: #fff; }
.qb-mobile .ico-phone { font-size: 18px; color: var(--gold); }
.qb-mobile .mb-inquiry { background: var(--red); }
.qb-desktop { display: none; }
@media (min-width: 960px) {
  .qb-mobile { display: none; }
  .qb-desktop { display: flex; align-items: center; gap: 14px; height: var(--bottom-h); }
  .qb-phone { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; margin-right: 6px; }
  .qb-phone span { font-weight: 700; font-size: 15px; color: rgba(255,255,255,.85); }
  .qb-phone b { font-family: var(--font-num); font-size: 26px; color: var(--gold); letter-spacing: .01em; }
  .qb-form { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
  .qb-form input, .qb-form select { height: 44px; padding: 0 12px; border: 1px solid rgba(255,255,255,.25); border-radius: 8px; background: #fff; color: var(--ink); font-size: 14px; min-width: 0; }
  .qb-form input:focus, .qb-form select:focus { outline: 2px solid var(--gold); outline-offset: 0; }
  .qb-form select { appearance: none; -webkit-appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%23141414' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; flex: 0 0 120px; }
  .qb-form .qb-name { flex: 1 1 120px; }
  .qb-form .qb-phone-in { flex: 1 1 150px; }
  .qb-agree { display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255,255,255,.85); white-space: nowrap; line-height: 1.3; }
  .qb-agree input { accent-color: var(--gold); width: 16px; height: 16px; margin: 0; }
  .qb-agree a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
  .qb-form .btn { min-height: 44px; padding: 0 22px; font-size: 15px; flex: none; }
  .qb-msg { font-size: 13px; font-weight: 600; color: var(--gold); white-space: nowrap; }
  .qb-msg.is-error { color: #FF9A9A; }
}
@media (min-width: 1200px) { .qb-desktop { gap: 18px; } .qb-form { gap: 10px; } .qb-form select { flex-basis: 140px; } }

/* ── 강점 6 (사진 배경 위 패널) ───────────────────── */
.strength-grid { display: grid; gap: 14px; }
.strength { position: relative; padding: 26px 22px 24px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-lg); backdrop-filter: blur(6px); transition: transform .3s var(--ease), border-color .3s, background-color .3s; }
.strength:hover { transform: translateY(-4px); border-color: var(--gold-line); background: rgba(255,255,255,.1); }
.strength .num { display: block; font-size: 15px; color: var(--gold); letter-spacing: .1em; margin-bottom: 12px; }
.strength h3 { font-family: var(--font-num); font-weight: 700; font-size: clamp(18px, 1rem + .5vw, 22px); line-height: 1.3; color: #fff; }
.strength p { margin-top: 10px; color: rgba(255,255,255,.82); font-size: 15px; }
.strength .link-more { margin-top: 14px; }
@media (min-width: 640px) { .strength-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (min-width: 960px) { .strength-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } .strength { padding: 32px 28px 28px; } }
.supports { margin-top: clamp(28px, 4vw, 48px); border: 1px solid var(--gold-line); border-radius: var(--radius-lg); padding: 22px 22px; background: rgba(0,0,0,.25); }
.supports-title { font-family: var(--font-num); font-weight: 700; font-size: 16px; color: var(--gold); margin-bottom: 12px; }
.supports ul { display: grid; gap: 10px; }
.supports li { display: flex; gap: 10px; align-items: center; font-weight: 600; font-size: 15px; }
.supports .ico-check { color: var(--gold); font-size: 18px; }
@media (min-width: 720px) { .supports ul { grid-template-columns: repeat(2, 1fr); gap: 10px 24px; } }
@media (min-width: 1100px) {
  .supports { display: flex; align-items: center; gap: 36px; padding: 26px 40px; }
  .supports-title { margin: 0; white-space: nowrap; padding-right: 28px; border-right: 1px solid var(--line-dark); }
  .supports ul { grid-template-columns: repeat(5, auto); gap: 24px; }
}

/* ── 창업비용 티저 (큰 숫자) ──────────────────────── */
.cost-teaser { text-align: center; }
.cost-teaser .big-line { font-family: var(--font-brush); font-size: var(--fs-h2); color: var(--green-900); line-height: 1.2; }
.cost-teaser .big-line .money { font-family: var(--font-num); font-weight: 700; color: var(--red); font-size: 1.25em; letter-spacing: -.02em; padding: 0 .1em; }
.cost-teaser .big-line .money small { font-family: var(--font-num); font-weight: 700; font-size: .42em; color: var(--green-900); letter-spacing: 0; }
.cost-teaser .sub { margin-top: 10px; color: var(--muted); font-size: 14px; }
.zero-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.zero-chips li { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); font-weight: 700; font-size: 15px; }
.zero-chips b { font-family: var(--font-num); color: var(--red); font-size: 20px; }
.cost-teaser .btn { margin-top: 30px; }

/* ── VS 비교 ──────────────────────────────────────── */
.vs-wrap { position: relative; display: grid; gap: 18px; margin-top: 8px; }
.vs-panel { position: relative; border-radius: var(--radius-lg); padding: 28px 22px 26px; backdrop-filter: blur(6px); }
.vs-panel.them { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); }
.vs-panel.us { background: rgba(216,12,18,.82); border: 1px solid rgba(255,255,255,.25); box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.vs-panel h3 { font-family: var(--font-num); font-weight: 700; font-size: clamp(20px, 1rem + 1vw, 28px); text-align: center; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.3); }
.vs-panel.us h3 { color: var(--gold); }
.vs-panel ul { margin-top: 6px; }
.vs-panel li { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 13px 0; border-bottom: 1px dashed rgba(255,255,255,.25); font-size: 15px; }
.vs-panel li:last-child { border-bottom: 0; }
.vs-panel li .k { color: rgba(255,255,255,.75); font-size: 13px; }
.vs-panel li .v { font-family: var(--font-num); font-weight: 700; font-size: 17px; text-align: right; }
.vs-panel.them li .v { color: rgba(255,255,255,.85); font-family: var(--font-body); font-weight: 600; font-size: 15px; }
.vs-panel.us li .v { color: #fff; }
.vs-badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; background: var(--gold); color: var(--red); display: flex; align-items: center; justify-content: center; font-family: var(--font-num); font-weight: 700; font-size: 24px; box-shadow: 0 10px 24px rgba(0,0,0,.35); z-index: 2; border: 3px solid #fff; }
@media (max-width: 719px) { .vs-badge { top: auto; bottom: calc(50% - 32px); left: 50%; } .vs-wrap { gap: 54px; } .vs-badge { top: 50%; } }
@media (min-width: 720px) { .vs-wrap { grid-template-columns: 1fr 1fr; gap: 28px; } .vs-panel { padding: 34px 30px 30px; } .vs-badge { width: 80px; height: 80px; font-size: 30px; } }
@media (min-width: 1100px) { .vs-wrap { gap: 48px; } .vs-panel { padding: 40px 40px 36px; } }

/* ── 메뉴 미리보기 ─────────────────────────────────── */
.menu-scroll { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px var(--gutter) 16px; margin: 0 calc(-1 * var(--gutter)); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.menu-scroll::-webkit-scrollbar { display: none; }
.menu-card { flex: 0 0 min(74vw, 260px); scroll-snap-align: start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s; }
.menu-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.menu-card .ph { aspect-ratio: 4 / 3; background: var(--ivory); overflow: hidden; }
.menu-card .ph img, .menu-card .ph .photo-missing { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.menu-card:hover .ph img { transform: scale(1.06); }
.menu-card-body { padding: 14px 16px 16px; }
.menu-card h3 { font-size: 16px; font-weight: 700; line-height: 1.35; }
.menu-card .price { color: var(--red); font-size: 19px; margin-top: 6px; }
.menu-card .price small { font-size: 12px; color: var(--muted); font-family: var(--font-body); font-weight: 500; }
.scroll-hint { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin-top: 2px; }
.scroll-hint::before { content: ''; width: 36px; height: 1px; background: var(--muted); }
.tag { display: inline-block; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; vertical-align: middle; margin-right: 5px; line-height: 1.6; letter-spacing: .02em; }
.tag-green { background: var(--green-900); }
.tag-gold { background: var(--gold); color: var(--green-900); }
@media (min-width: 720px) { .menu-scroll { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; overflow: visible; margin: 0; padding: 0; } .menu-card { flex: auto; } .scroll-hint { display: none; } }
@media (min-width: 1100px) { .menu-scroll { grid-template-columns: repeat(6, 1fr); gap: 16px; } .menu-card-body { padding: 12px 14px 14px; } }
.sec-foot { margin-top: clamp(24px, 3vw, 40px); text-align: center; }
.photo-missing { display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(45deg, #EFE9DC 0 10px, #F6F1E6 10px 20px); color: var(--muted); font-size: 13px; font-weight: 600; min-height: 120px; border-radius: var(--radius); }

/* ── 매장 컨셉 갤러리 ─────────────────────────────── */
.gallery { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px var(--gutter) 16px; margin: 0 calc(-1 * var(--gutter)); scrollbar-width: none; }
.gallery::-webkit-scrollbar { display: none; }
.gallery figure { flex: 0 0 min(80vw, 360px); scroll-snap-align: start; position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--gold-line); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.gallery figure:hover img { transform: scale(1.05); }
.gallery figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 16px 14px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.75)); color: #fff; }
.gallery figcaption .num { font-size: 12px; color: var(--gold); letter-spacing: .1em; display: block; }
.gallery figcaption b { font-family: var(--font-num); font-weight: 700; font-size: 17px; display: block; margin-top: 2px; }
@media (min-width: 960px) { .gallery { display: grid; grid-template-columns: repeat(4, 1fr); overflow: visible; margin: 0; padding: 0; gap: 18px; } .gallery figure { flex: auto; aspect-ratio: 3 / 4; } }

/* ── 본사·패밀리 ──────────────────────────────────── */
.family-grid { display: grid; gap: 32px; }
.big-num { font-family: var(--font-num); font-weight: 700; font-size: clamp(72px, 7vw + 30px, 150px); line-height: .95; color: var(--gold); letter-spacing: -.03em; display: flex; align-items: baseline; gap: 6px; }
.big-num small { font-family: var(--font-num); font-weight: 700; font-size: .26em; color: #fff; letter-spacing: 0; }
.family-photo { position: relative; }
.family-photo::before { content: ''; position: absolute; inset: -10px; border: 1px solid var(--gold-line); border-radius: calc(var(--radius-lg) + 8px); pointer-events: none; }
.family-photo img { border-radius: var(--radius-lg); width: 100%; box-shadow: 0 24px 48px rgba(0,0,0,.4); }
.family-photo figcaption { margin-top: 18px; font-size: 12px; color: rgba(255,255,255,.55); }
.family-brands { display: grid; gap: 10px; margin-top: 26px; }
.family-brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border: 1px solid var(--line-dark); border-radius: var(--radius); background: rgba(255,255,255,.05); transition: border-color .25s, background-color .25s, transform .25s var(--ease); }
a.family-brand:hover { border-color: var(--gold); background: rgba(243,207,106,.1); transform: translateY(-2px); }
.family-brand strong { font-family: var(--font-num); font-weight: 700; font-size: 18px; }
.family-brand small { display: block; font-size: 13px; color: rgba(255,255,255,.7); margin-top: 2px; }
.family-brand .ico-arrow { color: var(--gold); font-size: 20px; }
.family-brand.is-current { border-color: var(--gold); background: rgba(243,207,106,.12); }
.family-brand.is-current strong { color: var(--gold); }
.hq-line { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 22px; font-size: 14px; color: rgba(255,255,255,.72); }
.hq-line b { color: #fff; }
@media (min-width: 640px) { .family-brands { grid-template-columns: repeat(3, 1fr); gap: 12px; } .family-brand { flex-direction: column; align-items: flex-start; padding: 18px; } .family-brand .ico-arrow { align-self: flex-end; } }
@media (min-width: 960px) { .family-grid { grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; } }

/* ── 문의 폼 ──────────────────────────────────────── */
.sec-inquiry { background: var(--ivory); position: relative; overflow: hidden; }
.sec-inquiry::before { content: ''; position: absolute; right: -120px; top: -120px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(243,207,106,.35), transparent 65%); pointer-events: none; }
.inquiry-in { display: grid; gap: 28px; position: relative; }
.inquiry-phone { display: flex; flex-direction: column; gap: 4px; margin-top: 22px; padding: 18px 20px; background: var(--green-900); color: #fff; border: 1px solid var(--gold-line); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s; }
.inquiry-phone:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.inquiry-phone-label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.8); }
.inquiry-phone-label .ico-phone { color: var(--gold); }
.inquiry-phone strong { font-family: var(--font-num); font-size: clamp(28px, 2vw + 16px, 38px); color: var(--gold); line-height: 1.1; }
.inquiry-hours { margin-top: 10px; font-size: 14px; color: var(--muted); }
.inquiry-form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px 20px 22px; display: grid; gap: 16px; box-shadow: var(--shadow-sm); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field-row { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; min-width: 0; border: 0; padding: 0; margin: 0; }
.field label, .field legend { font-weight: 700; font-size: 14px; }
.field label em { color: var(--red); font-size: 12px; margin-left: 4px; }
.field .opt { color: var(--muted); font-weight: 500; font-size: 12px; margin-left: 4px; }
.field input[type="text"], .field input[type="tel"], .field select, .field textarea { width: 100%; min-height: 50px; padding: 10px 14px; border: 1px solid #CFC8B8; border-radius: 10px; background: #fff; font-size: 16px; transition: border-color .2s, box-shadow .2s; }
.field textarea { min-height: 92px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--green-900); box-shadow: 0 0 0 3px rgba(0,58,30,.12); }
.field input[aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 3px rgba(216,12,18,.12); }
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%23141414' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.radio-row { display: flex; gap: 8px; }
.radio-row label { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border: 1px solid #CFC8B8; border-radius: 10px; font-weight: 600; font-size: 15px; cursor: pointer; transition: border-color .2s, background-color .2s; }
.radio-row label:hover { border-color: var(--green-900); }
.radio-row label:has(input:checked) { border-color: var(--green-900); background: var(--green-050); color: var(--green-900); }
.radio-row input { accent-color: var(--green-900); margin: 0; }
.agree { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.agree input { margin: 3px 0 0; accent-color: var(--green-900); flex: none; width: 18px; height: 18px; }
.agree a { color: var(--green-900); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.form-msg { font-size: 14px; font-weight: 600; min-height: 1em; }
.form-msg.is-error { color: var(--red); }
.form-msg.is-ok { color: var(--green-900); }
.form-done { background: #fff; border: 2px solid var(--green-900); border-radius: var(--radius-lg); padding: 40px 24px; text-align: center; animation: pop-in .4s var(--ease); }
@keyframes pop-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.form-done .ico-check { width: 48px; height: 48px; color: var(--green-900); }
.form-done h3 { font-family: var(--font-num); font-weight: 700; font-size: 22px; margin-top: 12px; color: var(--green-900); }
.form-done p { margin-top: 8px; color: var(--ink-2); }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) {
  .inquiry-in { grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
  .inquiry-form { padding: 34px 34px 30px; gap: 18px; }
}
.page-contact .sec-inquiry { border-top: 0; }

/* ── 푸터 ─────────────────────────────────────────── */
.site-footer { background: #002A16; color: rgba(255,255,255,.78); padding: clamp(40px, 5vw, 64px) 0 32px; font-size: 14px; border-top: 3px solid var(--gold); }
.footer-in { display: grid; gap: 26px; }
.footer-brand { display: flex; align-items: center; gap: 14px; }
.footer-brand img { width: 56px; height: 56px; }
.footer-brand strong { display: block; font-family: var(--font-num); font-weight: 700; font-size: 18px; color: #fff; }
.footer-brand span { font-size: 13px; }
.footer-info { display: grid; gap: 6px; }
.footer-info div { display: flex; gap: 10px; }
.footer-info dt { flex: none; width: 100px; color: rgba(255,255,255,.5); }
.footer-info dd a { color: #fff; font-weight: 700; }
.footer-info mark.todo { background: rgba(243,207,106,.22); color: var(--gold); }
.footer-family { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.footer-label { color: rgba(255,255,255,.5); margin-right: 4px; }
.footer-family a, .footer-family span { padding: 7px 14px; border: 1px solid var(--line-dark); border-radius: 999px; color: #fff; font-weight: 600; font-size: 13px; transition: border-color .2s, background-color .2s; }
.footer-family a small, .footer-family span small { color: rgba(255,255,255,.6); font-weight: 400; }
.footer-family a:hover { border-color: var(--gold); background: rgba(243,207,106,.08); }
.footer-bottom { border-top: 1px solid var(--line-dark); padding-top: 18px; display: grid; gap: 8px; font-size: 13px; }
.footer-bottom nav { display: flex; gap: 16px; }
.footer-bottom nav a { color: #fff; font-weight: 600; }
@media (min-width: 880px) {
  .footer-in { grid-template-columns: 1fr 1fr; }
  .footer-family { grid-column: 1 / -1; }
  .footer-bottom { grid-column: 1 / -1; grid-template-columns: auto 1fr; align-items: center; }
  .footer-bottom p { text-align: right; }
}

/* ── 서브 페이지 머리 (꽉 찬 사진) ──────────────────── */
.page-head { background: #0B1F14; color: #fff; padding: clamp(56px, 8vw, 120px) 0 clamp(56px, 8vw, 120px); position: relative; overflow: hidden; isolation: isolate; }
.page-head::before { content: ''; position: absolute; inset: 0; z-index: -2; background-image: var(--head-bg, none); background-size: cover; background-position: center; transform: scale(1.04); }
.page-head::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0,34,18,.94) 0%, rgba(0,34,18,.8) 50%, rgba(0,34,18,.5) 100%), linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,24,12,.7)); }
.page-head .container { position: relative; }
.page-title { font-size: var(--fs-h1); text-shadow: 0 6px 28px rgba(0,0,0,.45); }
.page-head .sec-lead { color: rgba(255,255,255,.86); }
.page-head .frame { position: absolute; inset: 14px; border: 1px solid var(--gold-line); border-radius: 8px; pointer-events: none; }
@media (min-width: 960px) { .page-head .frame { inset: 22px; } }

/* ── 표 (모바일은 카드형) ──────────────────────────── */
.tbl-wrap { width: 100%; }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.tbl th, .tbl td { padding: 15px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl thead th { background: var(--green-900); color: #fff; font-family: var(--font-num); font-weight: 700; font-size: 15px; border-bottom: 2px solid var(--gold); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:nth-child(even) td { background: var(--cream); }
.tbl .val { font-family: var(--font-num); font-weight: 700; color: var(--red); font-size: 17px; white-space: nowrap; }
.tbl .val.is-zero { font-size: 21px; }
.tbl .note { font-size: 13px; color: var(--muted); font-weight: 400; font-family: var(--font-body); display: block; margin-top: 2px; }
.tbl .item { font-weight: 700; }
@media (max-width: 719px) {
  .tbl-cards thead { position: absolute; left: -9999px; }
  .tbl-cards, .tbl-cards tbody, .tbl-cards tr, .tbl-cards td { display: block; }
  .tbl-cards tr { border-bottom: 1px solid var(--line); padding: 14px 16px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; }
  .tbl-cards tr:last-child { border-bottom: 0; }
  .tbl-cards td { padding: 0 !important; border: 0; background: transparent !important; }
  .tbl-cards td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 2px; }
  .tbl-cards td.item::before { display: none; }
  .tbl-cards td.item { grid-column: 1 / -1; }
  .tbl-two tr { grid-template-columns: 1fr auto; }
  .tbl-two td.item { grid-column: auto; }
  .tbl-two td.val::before { display: none; }
  .tbl-compare tr { grid-template-columns: 1fr 1fr; }
  .tbl-compare td.us { background: var(--green-050) !important; border-radius: 8px; padding: 8px 10px !important; }
  .tbl-compare td.other { padding: 8px 10px !important; }
}
@media (min-width: 720px) {
  .tbl th, .tbl td { padding: 17px 22px; }
  .tbl .val { text-align: right; font-size: 18px; }
  .tbl thead th.val, .tbl thead th.r { text-align: right; }
  .tbl-compare th.us, .tbl-compare td.us { background: var(--green-050) !important; }
  .tbl-compare thead th.us { background: var(--green-700) !important; }
  .tbl-compare td.us, .tbl-compare td.other { text-align: center; }
  .tbl-compare th.c { text-align: center; }
}
.tbl-compare td.us { font-family: var(--font-num); font-weight: 700; color: var(--green-900); font-size: 16px; }
.tbl-compare td.other { color: var(--muted); }
.ox { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-family: var(--font-num); font-weight: 700; font-size: 14px; margin-right: 6px; vertical-align: middle; }
.ox-o { background: var(--green-900); color: #fff; }
.ox-x { background: #ddd; color: #666; }

/* ── 창업비용 요약 ─────────────────────────────────── */
.cost-summary { display: grid; gap: 14px; margin-top: clamp(24px, 3vw, 36px); }
.cost-sum { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--green-900); color: #fff; padding: 26px 24px; min-height: 170px; display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; }
.cost-sum img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .32; z-index: -1; transition: transform .8s var(--ease); }
.cost-sum:hover img { transform: scale(1.04); }
.cost-sum::after { content: ''; position: absolute; inset: 10px; border: 1px solid var(--gold-line); border-radius: 12px; pointer-events: none; }
.cost-sum .label { font-family: var(--font-num); font-weight: 700; font-size: 15px; color: var(--gold); }
.cost-sum .num { font-size: clamp(40px, 3vw + 20px, 60px); line-height: 1.1; margin-top: 6px; }
.cost-sum .num small { font-family: var(--font-body); font-weight: 600; font-size: 16px; margin-left: 4px; color: rgba(255,255,255,.85); }
.cost-note { margin-top: 14px; font-size: 13px; color: var(--muted); }
@media (min-width: 640px) { .cost-summary { grid-template-columns: 1fr 1fr; gap: 20px; } .cost-sum { padding: 32px 30px; min-height: 210px; } }

/* ── 원가 구조 ────────────────────────────────────── */
.rate-hero { display: grid; gap: 20px; align-items: center; background: var(--green-900); color: #fff; border-radius: var(--radius-lg); padding: 30px 24px; position: relative; overflow: hidden; }
.rate-hero::after { content: ''; position: absolute; inset: 10px; border: 1px solid var(--gold-line); border-radius: 12px; pointer-events: none; }
.rate-hero .num { font-size: clamp(64px, 6vw + 30px, 120px); color: var(--gold); line-height: 1; }
.rate-hero .num small { font-size: .3em; font-family: var(--font-num); color: #fff; margin-left: 4px; }
.rate-hero .rate-label { font-family: var(--font-num); font-weight: 700; font-size: 16px; margin-top: 6px; }
.rate-hero p { color: rgba(255,255,255,.85); font-size: 15px; }
.sauce-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sauce { border-radius: var(--radius); overflow: hidden; background: #fff; border: 1px solid var(--line); }
.sauce .ph { aspect-ratio: 1; overflow: hidden; }
.sauce .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.sauce:hover .ph img { transform: scale(1.05); }
.sauce figcaption { padding: 10px 12px; font-weight: 700; font-size: 14px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 8px; }
.sauce figcaption .tag { font-size: 10px; padding: 2px 6px; white-space: nowrap; }
.split { display: grid; gap: 20px; margin-top: 24px; }
.split-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px 22px; box-shadow: var(--shadow-sm); }
.split-card.is-red { border-top: 4px solid var(--red); }
.split-card.is-green { border-top: 4px solid var(--green-900); }
.split-card h3 { font-family: var(--font-num); font-weight: 700; font-size: 20px; color: var(--green-900); }
.split-card h3 .tag { vertical-align: 2px; font-family: var(--font-body); }
.split-card > p { margin-top: 8px; color: var(--ink-2); font-size: 15px; }
.split-card .sauce-grid { margin-top: 16px; }
.check-list { display: grid; gap: 9px; margin-top: 16px; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; font-size: 15px; }
.check-list .ico-check { color: var(--red); font-size: 20px; margin-top: 2px; }
.on-dark .check-list .ico-check { color: var(--gold); }
.chip-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip-list li { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-weight: 600; font-size: 14px; background: var(--cream); }
.on-dark .chip-list li { border-color: var(--gold-line); background: rgba(255,255,255,.06); }
.point-grid { display: grid; gap: 12px; margin-top: 24px; }
.point { padding: 20px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: transform .25s var(--ease), box-shadow .25s; }
.point:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.point h4 { font-family: var(--font-num); font-weight: 700; font-size: 16px; color: var(--green-900); }
.point p { margin-top: 4px; font-size: 14px; color: var(--ink-2); }
.point .num { font-size: 13px; color: var(--gold-dark); margin-bottom: 8px; letter-spacing: .1em; }
.on-dark .point { background: rgba(255,255,255,.07); border-color: var(--line-dark); backdrop-filter: blur(4px); }
.on-dark .point h4 { color: #fff; }
.on-dark .point p { color: rgba(255,255,255,.8); }
.on-dark .point .num { color: var(--gold); }
@media (min-width: 640px) { .point-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) {
  .rate-hero { grid-template-columns: auto 1fr; gap: 48px; padding: 44px 52px; }
  .split { grid-template-columns: 1fr 1fr; gap: 24px; }
  .split-card { padding: 32px 30px; }
  .point-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
}
.point-grid.cols-3 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .point-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }

/* ── 시그니처 ─────────────────────────────────────── */
.sig { display: grid; gap: 28px; }
.sig-photo { position: relative; }
.sig-photo::before { content: ''; position: absolute; inset: -10px; border: 1px solid rgba(176,138,46,.45); border-radius: calc(var(--radius-lg) + 8px); pointer-events: none; }
.sig-photo img { border-radius: var(--radius-lg); width: 100%; box-shadow: var(--shadow-md); }
.sig-head .tag { font-size: 13px; padding: 4px 10px; }
.sig h2 { margin-top: 12px; }
.sig .price-line { margin-top: 12px; display: flex; align-items: baseline; gap: 8px; }
.sig .price-line .num { font-size: clamp(36px, 2.5vw + 20px, 52px); color: var(--red); }
.sig .price-line small { font-size: 14px; color: var(--muted); font-weight: 600; }
.sig .quote { margin-top: 18px; font-family: var(--font-brush); font-size: clamp(22px, 1rem + 1vw, 28px); color: var(--green-900); }
.sig .copy { margin-top: 8px; color: var(--ink-2); }
.sig .notice { margin-top: 18px; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--red-050); border-left: 3px solid var(--red); font-size: 14px; color: var(--red-dark); font-weight: 600; border-radius: 0 8px 8px 0; }
.sig-points { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.sig-points li { padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.sig-points b { display: block; font-family: var(--font-num); font-weight: 700; font-size: 15px; color: var(--green-900); }
.sig-points span { font-size: 13px; color: var(--ink-2); }
@media (min-width: 960px) { .sig { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } }

/* ── 메뉴 목록 ────────────────────────────────────── */
.menu-cat { margin-top: clamp(36px, 4vw, 56px); }
.menu-cat:first-child { margin-top: 0; }
.menu-cat-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; border-bottom: 2px solid var(--green-900); padding-bottom: 10px; margin-bottom: 18px; }
.menu-cat-head h3 { font-family: var(--font-num); font-weight: 700; font-size: clamp(20px, 1rem + .8vw, 24px); color: var(--green-900); }
.menu-cat-head p { color: var(--muted); font-size: 14px; }
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.menu-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s; }
.menu-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.menu-item .ph { aspect-ratio: 4 / 3; background: var(--ivory); overflow: hidden; }
.menu-item .ph img, .menu-item .ph .photo-missing { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform .7s var(--ease); }
.menu-item:hover .ph img { transform: scale(1.06); }
.menu-item .body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 2px; }
.menu-item h4 { font-size: 15px; font-weight: 700; }
.menu-item .price { color: var(--red); font-size: 17px; }
.menu-item .price small { font-size: 12px; color: var(--muted); font-family: var(--font-body); font-weight: 500; }
.menu-cat .menu-lines { margin-top: 12px; }
.menu-lines { display: grid; grid-template-columns: 1fr; gap: 0 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 16px; }
.menu-lines li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--line); font-size: 15px; font-weight: 600; }
.menu-lines li .price { color: var(--red); white-space: nowrap; }
.menu-lines li .price small { font-family: var(--font-body); color: var(--muted); font-weight: 500; }
.menu-lines li:last-child { border-bottom: 0; }
.menu-note { margin-top: 16px; font-size: 13px; color: var(--muted); }
@media (min-width: 640px) { .menu-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } .menu-lines { grid-template-columns: 1fr 1fr; } .menu-lines li:nth-last-child(-n+2) { border-bottom: 0; } }
@media (min-width: 1100px) { .menu-grid { grid-template-columns: repeat(4, 1fr); } .menu-lines { grid-template-columns: repeat(3, 1fr); } .menu-lines li:nth-last-child(-n+3) { border-bottom: 0; } }

/* ── 브랜드 스토리·컨셉 ─────────────────────────────── */
.story { display: grid; gap: 28px; }
.story-text p { margin-top: 14px; color: var(--ink-2); font-size: var(--fs-lead); line-height: 1.8; }
.story-text p:first-of-type { margin-top: 0; }
.story-photo { position: relative; }
.story-photo::before { content: ''; position: absolute; inset: -10px; border: 1px solid rgba(176,138,46,.45); border-radius: calc(var(--radius-lg) + 8px); pointer-events: none; }
.story-photo img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.story-photo figcaption { margin-top: 18px; font-size: 12px; color: var(--muted); }
.story-badge { display: flex; align-items: center; gap: 14px; margin-top: 24px; padding: 16px 18px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); }
.story-badge img { width: 56px; height: 56px; }
.story-badge b { display: block; font-family: var(--font-num); font-weight: 700; font-size: 16px; color: var(--green-900); }
.story-badge span { font-size: 13px; color: var(--muted); }
@media (min-width: 960px) { .story { grid-template-columns: 1.1fr .9fr; gap: 72px; align-items: center; } }
.concept { display: grid; gap: 20px; padding: clamp(28px, 4vw, 56px) 0; border-top: 1px solid var(--line); }
.concept:last-child { border-bottom: 1px solid var(--line); }
.concept-photo { overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.concept-photo img { width: 100%; transition: transform .8s var(--ease); }
.concept:hover .concept-photo img { transform: scale(1.03); }
.concept .num { font-size: 15px; color: var(--gold-dark); letter-spacing: .1em; }
.concept h3 { font-family: var(--font-num); font-weight: 700; font-size: clamp(22px, 1rem + 1.2vw, 30px); color: var(--green-900); margin-top: 8px; }
.concept h3 small { display: block; font-family: var(--font-body); font-weight: 500; font-size: 12px; color: var(--muted); letter-spacing: .12em; margin-top: 6px; }
.concept > div > p { margin-top: 12px; color: var(--ink-2); font-size: 15px; }
.concept .check-list { margin-top: 16px; }
@media (min-width: 720px) { .concept { grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .concept:nth-child(even) .concept-photo { order: 2; } }
@media (min-width: 1100px) { .concept { gap: 64px; } }

/* ── 창업혜택 ─────────────────────────────────────── */
.benefit-zero { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.benefit-zero li { position: relative; background: var(--green-900); color: #fff; border-radius: var(--radius-lg); padding: 26px 16px; text-align: center; overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s; }
.benefit-zero li::after { content: ''; position: absolute; inset: 8px; border: 1px solid var(--gold-line); border-radius: 14px; pointer-events: none; }
.benefit-zero li:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.benefit-zero .num { font-size: clamp(40px, 3vw + 18px, 60px); color: var(--gold); line-height: 1; }
.benefit-zero b { display: block; margin-top: 10px; font-family: var(--font-num); font-weight: 700; font-size: 15px; }
.benefit-zero p { margin-top: 4px; font-size: 13px; color: rgba(255,255,255,.75); }
.benefit-list { display: grid; gap: 12px; margin-top: 14px; }
.benefit-list li { display: flex; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; transition: transform .25s var(--ease), box-shadow .25s; }
.benefit-list li:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.benefit-list .num { font-size: 18px; color: var(--gold-dark); flex: none; width: 32px; padding-top: 4px; }
.benefit-list b { font-family: var(--font-num); font-weight: 700; font-size: 16px; color: var(--green-900); }
.benefit-list p { margin-top: 4px; font-size: 14px; color: var(--ink-2); }
@media (min-width: 640px) { .benefit-zero { grid-template-columns: repeat(4, 1fr); gap: 16px; } .benefit-list { grid-template-columns: 1fr 1fr; gap: 16px; } }
.region-cond { display: grid; gap: 14px; margin-top: 28px; }
.cond { position: relative; background: rgba(255,255,255,.07); border: 1px solid var(--line-dark); border-radius: var(--radius-lg); padding: 24px 22px; overflow: hidden; backdrop-filter: blur(4px); }
.cond::after { content: ''; position: absolute; inset: 8px; border: 1px solid var(--gold-line); border-radius: 14px; pointer-events: none; }
.cond .tag { background: var(--red); font-size: 13px; padding: 4px 10px; }
.cond h3 { font-family: var(--font-num); font-weight: 700; font-size: clamp(20px, 1rem + .8vw, 26px); margin-top: 12px; color: var(--gold); }
.cond p { margin-top: 8px; color: rgba(255,255,255,.85); font-size: 15px; }
.region-support { margin-top: 28px; }
.region-support h3 { font-family: var(--font-num); font-weight: 700; font-size: 17px; color: var(--gold); margin-bottom: 12px; }
.region-support ul { display: grid; gap: 10px; }
.region-support li { padding: 16px; border: 1px solid var(--line-dark); border-radius: var(--radius); background: rgba(0,0,0,.2); transition: border-color .25s, background-color .25s; }
.region-support li:hover { border-color: var(--gold-line); background: rgba(255,255,255,.06); }
.region-support b { display: block; font-size: 15px; }
.region-support span { font-size: 13px; color: rgba(255,255,255,.75); }
@media (min-width: 640px) { .region-cond { grid-template-columns: 1fr 1fr; gap: 20px; } .region-support ul { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .region-support ul { grid-template-columns: repeat(5, 1fr); } }
.event-box { position: relative; border: 2px solid var(--red); border-radius: var(--radius-lg); background: #fff; padding: 26px 22px; box-shadow: var(--shadow-sm); }
.event-box .tag { font-size: 13px; padding: 4px 10px; }
.event-box h2 { margin-top: 12px; }
.event-meta { display: grid; gap: 6px; margin-top: 14px; font-weight: 600; font-size: 15px; }
.event-meta dt { color: var(--muted); font-size: 13px; }
.event-box .check-list { margin-top: 18px; }
@media (min-width: 640px) { .event-box { padding: 34px; } .event-meta { grid-template-columns: auto 1fr; gap: 6px 16px; align-items: baseline; } }

/* ── CTA 띠 ───────────────────────────────────────── */
.cta-band { background: var(--red); color: #fff; padding: clamp(28px, 3vw, 44px) 0; position: relative; overflow: hidden; }
.cta-band::before { content: ''; position: absolute; right: -80px; top: -80px; width: 280px; height: 280px; border-radius: 50%; background: rgba(255,255,255,.08); pointer-events: none; }
.cta-band .container { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; position: relative; }
.cta-band p { font-family: var(--font-num); font-weight: 700; font-size: clamp(20px, 1rem + 1vw, 26px); }
.cta-band .btn { background: #fff; color: var(--red); border-color: #fff; box-shadow: none; }
.cta-band .btn:hover { background: var(--ivory); }
@media (min-width: 640px) { .cta-band .container { flex-direction: row; align-items: center; justify-content: space-between; } }

/* ── 개인정보처리방침 ──────────────────────────────── */
.prose { max-width: 760px; }
.prose h2 { font-family: var(--font-num); font-weight: 700; font-size: 20px; color: var(--green-900); margin-top: 36px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { margin-top: 10px; color: var(--ink-2); font-size: 15px; }
.prose ul { list-style: disc; padding-left: 20px; }
.prose table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.prose th { background: var(--cream); }

/* ── 매출 성과 (숫자 롤링) ────────────────────────── */
.sales { text-align: center; background: #fff; position: relative; overflow: hidden; }
.sales::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 40% at 50% 100%, rgba(243,207,106,.22), transparent 70%); pointer-events: none; }
.sales .container { position: relative; }
.sales .sec-lead { margin-left: auto; margin-right: auto; }
.odo-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin-top: clamp(24px, 3vw, 40px); }
.odo-label { font-family: var(--font-num); font-weight: 700; color: var(--red); font-size: clamp(15px, .8rem + .5vw, 20px); line-height: 1.25; text-align: right; }
.odo { display: inline-flex; align-items: center; gap: 4px; --odo-h: clamp(46px, 9vw, 86px); --odo-w: clamp(30px, 6.2vw, 60px); }
.odo-d { width: var(--odo-w); height: var(--odo-h); background: var(--red); color: #fff; border-radius: 8px; overflow: hidden; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), 0 6px 14px rgba(216,12,18,.25); font-family: var(--font-num); font-weight: 700; font-size: calc(var(--odo-h) * .66); }
.odo-col { display: flex; flex-direction: column; transition: transform 1.8s cubic-bezier(.16,.84,.3,1); will-change: transform; }
.odo-col span { height: var(--odo-h); display: flex; align-items: center; justify-content: center; line-height: 1; }
.odo-sep { font-family: var(--font-num); font-weight: 700; font-size: calc(var(--odo-h) * .6); color: var(--ink); align-self: flex-end; padding-bottom: 6px; margin: 0 -2px; }
.odo-unit { font-weight: 700; font-size: clamp(15px, .8rem + .5vw, 20px); color: var(--ink-2); align-self: flex-end; padding-bottom: 8px; }
.sales-note { margin-top: 18px; font-size: 13px; color: var(--muted); }
@media (min-width: 720px) { .odo { gap: 6px; } }

/* ── 수익률 비교 (아치 패널) ────────────────────────── */
.profit { background: var(--cream); position: relative; overflow: hidden; }
.profit::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,58,30,.035) 0 1px, transparent 1px 14px); pointer-events: none; }
.profit .container { position: relative; }
.profit-wrap { display: grid; gap: 22px; max-width: 860px; margin: 0 auto; }
.profit-card { border-radius: 160px 160px 18px 18px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.profit-head { padding: 44px 20px 54px; text-align: center; color: #fff; }
.profit-card.them .profit-head { background: linear-gradient(180deg, #A9A9A9, #8E8E8E); }
.profit-card.us .profit-head { background: linear-gradient(180deg, var(--green-700), var(--green-900)); }
.profit-head h3 { font-family: var(--font-num); font-weight: 700; font-size: clamp(20px, 1rem + 1vw, 26px); }
.profit-head .margin { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin-top: 6px; }
.profit-head .margin span { font-weight: 700; font-size: 14px; opacity: .9; }
.profit-head .margin b { font-family: var(--font-num); font-size: clamp(36px, 2rem + 1.6vw, 54px); line-height: 1; }
.profit-card.us .profit-head .margin b { color: var(--gold); }
.profit-photo { width: min(62%, 220px); margin: -40px auto 0; border-radius: 50%; overflow: hidden; border: 4px solid #fff; box-shadow: var(--shadow-md); aspect-ratio: 1; position: relative; z-index: 1; }
.profit-photo img { width: 100%; height: 100%; object-fit: cover; }
.profit-card.them .profit-photo img { filter: grayscale(1) contrast(.95); }
.profit-rows { padding: 18px 20px 8px; flex: 1; }
.profit-rows li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.profit-rows li:last-child { border-bottom: 0; }
.profit-rows li.total { font-weight: 700; }
.profit-rows .k { color: var(--ink-2); }
.profit-rows .a { font-family: var(--font-num); font-weight: 700; color: var(--ink); }
.profit-rows .p { color: var(--muted); font-size: 13px; min-width: 44px; text-align: right; }
.profit-foot { padding: 16px 20px; color: #fff; text-align: center; display: flex; align-items: baseline; justify-content: center; gap: 10px; }
.profit-card.them .profit-foot { background: #8E8E8E; }
.profit-card.us .profit-foot { background: var(--red); }
.profit-foot span { font-weight: 700; font-size: 14px; }
.profit-foot b { font-family: var(--font-num); font-size: clamp(24px, 1.2rem + 1.2vw, 34px); line-height: 1; }
.profit-note { text-align: center; margin-top: 18px; font-size: 13px; color: var(--muted); }
@media (min-width: 720px) { .profit-wrap { grid-template-columns: 1fr 1fr; gap: 28px; } .profit-card.us { transform: translateY(-14px); box-shadow: var(--shadow-md); } .profit-rows { padding: 22px 26px 10px; } .profit-rows li { font-size: 15px; } }
/* ── v2.1: 배너 슬라이더 · 말풍선 · 버튼 효과 · 사진 섹션 가독성 ── */
/* 사진 섹션: 더 어둡게, 패널 더 불투명하게 */
.sec-photo::after { background: linear-gradient(180deg, rgba(0,28,14,.9) 0%, rgba(0,28,14,.8) 50%, rgba(0,28,14,.92) 100%); }
.strength { background: rgba(0,26,13,.64); border-color: rgba(243,207,106,.28); }
.strength:hover { background: rgba(0,26,13,.78); }
.strength p { color: rgba(255,255,255,.9); }
.supports { background: rgba(0,26,13,.6); }
.vs-panel.them { background: rgba(0,0,0,.42); }

/* 배너 슬라이더 */
.hero-slider .hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1.1s var(--ease), visibility 0s 1.1s; }
.hero-slider .hero-slide.is-active { position: relative; opacity: 1; visibility: visible; transition: opacity 1.1s var(--ease), visibility 0s; z-index: 1; }
.hero-slide .hero-bg video, .hero-slide .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.hero-slide.is-active .hero-bg img { animation: hero-zoom 9s var(--ease) forwards; }
.hero-slide .hero-text > * { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.hero-slide.is-active .hero-text > * { opacity: 1; transform: none; }
.hero-slide.is-active .hero-text > :nth-child(2) { transition-delay: .12s; }
.hero-slide.is-active .hero-text > :nth-child(3) { transition-delay: .24s; }
.hero-slide.is-active .hero-text > :nth-child(4) { transition-delay: .36s; }
.hero-slide.is-active .hero-text > :nth-child(5) { transition-delay: .48s; }
.hero-slide.is-active .hero-text > :nth-child(6) { transition-delay: .6s; }
.hero-ctrl { position: absolute; left: 0; right: 0; bottom: 56px; z-index: 3; display: flex; justify-content: center; align-items: center; gap: 10px; pointer-events: none; }
.hero-dot { pointer-events: auto; width: 34px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.35); transition: background-color .3s, width .3s; }
.hero-dot.is-active { background: var(--gold); width: 52px; }
.hero-arrow { display: none; }
@media (min-width: 960px) {
  .hero-ctrl { bottom: 64px; }
  .hero-arrow { display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); color: #fff; background: rgba(0,0,0,.25); backdrop-filter: blur(4px); z-index: 3; transition: background-color .2s, border-color .2s; }
  .hero-arrow:hover { background: rgba(0,0,0,.45); border-color: var(--gold); color: var(--gold); }
  .hero-arrow.prev { left: 22px; } .hero-arrow.next { right: 22px; }
  .hero-arrow svg { width: 20px; height: 20px; }
}

/* 창업비용 티저: 매장 사진 + 떠다니는 말풍선 */
.teaser-visual { position: relative; max-width: 920px; margin: clamp(28px, 4vw, 44px) auto 0; }
.teaser-visual img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.teaser-visual .bubble { position: absolute; background: #fff; color: var(--ink); border-radius: 999px; padding: 10px 18px; font-weight: 800; font-size: clamp(13px, .7rem + .4vw, 17px); box-shadow: 0 10px 26px rgba(0,0,0,.18); border: 1px solid var(--line); animation: bob 3.2s ease-in-out infinite; white-space: nowrap; }
.teaser-visual .bubble::after { content: ''; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; background: #fff; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: translateX(-50%) rotate(45deg); }
.teaser-visual .bubble:nth-child(2) { left: 4%; top: 12%; }
.teaser-visual .bubble:nth-child(3) { right: 4%; top: 22%; animation-delay: .6s; }
.teaser-visual .bubble:nth-child(4) { left: 50%; transform: translateX(-50%); bottom: 14%; animation-name: bob-c; animation-delay: 1.1s; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes bob-c { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -8px); } }

/* 버튼 효과: 빛 쓸고 지나가기 · 커졌다 작아지기 */
.btn-shine { overflow: hidden; isolation: isolate; }
.btn-shine::after { content: ''; position: absolute; top: -60%; left: -80%; width: 50%; height: 220%; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%); transform: skewX(-20deg); animation: shine 3.4s ease-in-out infinite; pointer-events: none; }
@keyframes shine { 0% { left: -80%; } 55%, 100% { left: 160%; } }
.btn-pulse { animation: pulse-scale 2.4s ease-in-out infinite; }
.btn-pulse::before { content: ''; position: absolute; inset: -3px; border-radius: inherit; border: 2px solid currentColor; opacity: 0; animation: pulse-ring 2.4s ease-out infinite; pointer-events: none; }
@keyframes pulse-scale { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes pulse-ring { 0% { transform: scale(.96); opacity: .55; } 100% { transform: scale(1.22); opacity: 0; } }
.side-float .sf-call { animation: pulse-scale 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .btn-shine::after, .btn-pulse, .btn-pulse::before, .side-float .sf-call, .teaser-visual .bubble, .hero-slide.is-active .hero-bg img { animation: none !important; } }

/* ── v2.2: 배너 오버레이는 슬라이드 안에서 · 모바일 가독성 · 티저 사진 비율 ── */
.hero-slider::after { display: none; }
.hero-slider .hero-slide::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  linear-gradient(90deg, rgba(0,34,18,.95) 0%, rgba(0,34,18,.84) 40%, rgba(0,34,18,.36) 100%),
  linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,0) 30%, rgba(0,24,12,.9) 100%); }
@media (max-width: 719px) {
  .hero-slider .hero-slide::after { background: linear-gradient(180deg, rgba(0,34,18,.62) 0%, rgba(0,34,18,.8) 42%, rgba(0,28,14,.95) 100%); }
  .hero-slide .hero-bg img, .hero-slide .hero-bg video { object-position: 62% 50%; }
  .teaser-visual img { aspect-ratio: 4 / 3; object-fit: cover; }
}
.teaser-visual img { aspect-ratio: 16 / 6; object-fit: cover; }

/* 영상이 재생되기 전까지는 포스터 사진을 보여준다 */
.hero-video { position: absolute; inset: 0; opacity: 0; transition: opacity .8s var(--ease); }
.hero-video.is-playing { opacity: 1; }
.hero-video.is-playing + .hero-poster { opacity: 0; }
.hero-poster { transition: opacity .8s var(--ease); }

/* ── v3: 명조 제목 폰트 · 떠 있는 둥근 헤더 · 큰 스크롤 효과 · 질감 · 장식 컷아웃 · 패럴랙스 ── */
:root {
  --font-brush: 'Noto Serif KR', 'Nanum Myeongjo', 'Apple SD Gothic Neo', serif;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --header-h: 70px;
}
@media (min-width: 720px) { :root { --header-h: 80px; } }
@media (min-width: 1200px) { :root { --header-h: 86px; } }

/* 제목: Noto Serif KR 900 (로고의 '돌판해물짜장' 느낌) */
.brush, .sec-title, .hero-title, .page-title, .cost-teaser .big-line, .sig .quote { font-family: var(--font-brush); font-weight: 900; letter-spacing: -.015em; line-height: 1.25; }
.sig .quote { font-weight: 700; }
.hero-title { line-height: 1.2; }

/* 떠 있는 둥근 헤더 */
.site-header { background: transparent; border-bottom: 0; box-shadow: none; padding: 10px var(--gutter) 0; pointer-events: none; margin-bottom: calc(-1 * var(--header-h)); }
.site-header.scrolled { box-shadow: none; }
.site-header.is-hidden { transform: translateY(-120%); }
.header-in { pointer-events: auto; max-width: var(--container); margin: 0 auto; height: 60px; padding: 0 8px 0 10px; background: rgba(0,58,30,.9); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border: 1px solid rgba(243,207,106,.42); border-radius: 999px; box-shadow: 0 10px 30px rgba(0,0,0,.26); transition: box-shadow .25s, background-color .25s; }
.site-header.scrolled .header-in { background: rgba(0,48,25,.96); box-shadow: 0 14px 36px rgba(0,0,0,.36); }
.menu-btn { margin-right: 2px; }
.drawer { pointer-events: auto; left: var(--gutter); right: var(--gutter); top: calc(100% + 6px); border-radius: 22px; border: 1px solid var(--gold-line); }
@media (min-width: 720px) { .site-header { padding-top: 14px; } .header-in { height: 66px; padding: 0 12px 0 14px; } }
@media (min-width: 1200px) { .header-in { height: 72px; padding: 0 14px 0 18px; } }
.hero-in { padding-top: calc(var(--header-h) + clamp(36px, 6vw, 88px)); }
.page-head { padding-top: calc(var(--header-h) + clamp(32px, 6vw, 84px)); }
.hero.frame-gold::before, .page-head .frame { top: calc(var(--header-h) + 4px); }

/* 스크롤 등장: 크게, 방향 있게 */
.reveal { opacity: 0; transform: translateY(64px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.reveal.from-left { transform: translateX(-90px); }
.reveal.from-right { transform: translateX(90px); }
.reveal.zoom { transform: scale(.86); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-stagger > * { opacity: 0; transform: translateY(56px) scale(.94); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal-stagger.is-in > * { opacity: 1; transform: none; }
.reveal-stagger.is-in > :nth-child(2) { transition-delay: .12s; }
.reveal-stagger.is-in > :nth-child(3) { transition-delay: .24s; }
.reveal-stagger.is-in > :nth-child(4) { transition-delay: .36s; }
.reveal-stagger.is-in > :nth-child(5) { transition-delay: .48s; }
.reveal-stagger.is-in > :nth-child(6) { transition-delay: .6s; }
.reveal-stagger.is-in > :nth-child(7) { transition-delay: .72s; }
.reveal-stagger.is-in > :nth-child(n+8) { transition-delay: .84s; }
.reveal-stagger.pop > * { transform: scale(.4); transition: opacity .6s var(--ease-out), transform .7s cubic-bezier(.34, 1.56, .64, 1); }
.reveal-stagger.alt > :nth-child(odd) { transform: translateX(-80px); }
.reveal-stagger.alt > :nth-child(even) { transform: translateX(80px); }
.reveal-stagger.alt.is-in > * { transform: none; }
/* 제목은 왼쪽에서 닦아내듯, 작은 문구의 선은 자라나고, 설명은 뒤따라 */
.reveal .sec-title, .reveal .big-line, .reveal .page-title { clip-path: inset(-12% 100% -12% -2%); transition: clip-path 1.1s var(--ease-out) .1s; }
.reveal.is-in .sec-title, .reveal.is-in .big-line, .reveal.is-in .page-title { clip-path: inset(-12% -2% -12% -2%); }
.reveal .eyebrow::before, .reveal .eyebrow::after { transform: scaleX(0); transition: transform .8s var(--ease-out) .2s; }
.reveal .eyebrow::before { transform-origin: right; }
.reveal .eyebrow::after { transform-origin: left; }
.reveal.is-in .eyebrow::before, .reveal.is-in .eyebrow::after { transform: scaleX(1); }
.reveal .sec-lead, .reveal .sub { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease-out) .45s, transform .8s var(--ease-out) .45s; }
.reveal.is-in .sec-lead, .reveal.is-in .sub { opacity: 1; transform: none; }
/* VS 패널: 양쪽에서 들어오고 배지는 튀어나옴 */
.vs-wrap.reveal { opacity: 1; transform: none; }
.vs-wrap.reveal .vs-panel { opacity: 0; transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.vs-wrap.reveal .vs-panel.them { transform: translateX(-90px); }
.vs-wrap.reveal .vs-panel.us { transform: translateX(90px); }
.vs-wrap.reveal .vs-badge { transform: translate(-50%, -50%) scale(0) rotate(-40deg); transition: transform .8s cubic-bezier(.34, 1.56, .64, 1) .6s; }
.vs-wrap.reveal.is-in .vs-panel { opacity: 1; transform: none; }
.vs-wrap.reveal.is-in .vs-badge { transform: translate(-50%, -50%); }
/* 매장 컨셉(브랜드 페이지): 사진과 글이 양쪽에서 */
.concept.reveal { opacity: 1; transform: none; }
.concept.reveal .concept-photo, .concept.reveal > div { opacity: 0; transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.concept.reveal .concept-photo { transform: translateX(-80px); }
.concept.reveal > div { transform: translateX(80px); transition-delay: .15s; }
.concept.reveal:nth-child(even) .concept-photo { transform: translateX(80px); }
.concept.reveal:nth-child(even) > div { transform: translateX(-80px); }
.concept.reveal.is-in .concept-photo, .concept.reveal.is-in > div { opacity: 1; transform: none; }
/* 창업비용 말풍선: 사진이 뜬 뒤 차례로 톡톡 */
.teaser-visual .bubble { opacity: 0; animation: none; }
.teaser-visual.is-in .bubble:nth-child(2) { animation: bubble-pop .6s cubic-bezier(.34, 1.56, .64, 1) .5s both, bob 3.2s ease-in-out 1.1s infinite; }
.teaser-visual.is-in .bubble:nth-child(3) { animation: bubble-pop .6s cubic-bezier(.34, 1.56, .64, 1) .75s both, bob 3.2s ease-in-out 1.35s infinite; }
.teaser-visual.is-in .bubble:nth-child(4) { animation: bubble-pop-c .6s cubic-bezier(.34, 1.56, .64, 1) 1s both, bob-c 3.2s ease-in-out 1.6s infinite; }
@keyframes bubble-pop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes bubble-pop-c { from { opacity: 0; transform: translateX(-50%) scale(.3); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
/* 배너 글자도 더 크게 움직이게 */
.hero-slide .hero-text > * { transform: translateY(36px); transition-duration: 1s; }
.hero-slide .hero-text > .hero-lockup { transform: translateY(24px) scale(.9); }
.hero-slide.is-active .hero-text > .hero-lockup { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > *, .vs-wrap.reveal .vs-panel, .vs-wrap.reveal .vs-badge, .concept.reveal .concept-photo, .concept.reveal > div, .reveal .sec-lead, .reveal .sub { opacity: 1 !important; transform: none !important; transition: none !important; }
  .reveal .sec-title, .reveal .big-line, .reveal .page-title { clip-path: none !important; }
  .reveal .eyebrow::before, .reveal .eyebrow::after { transform: none !important; }
  .teaser-visual .bubble { opacity: 1 !important; }
}

/* 질감: 한지 느낌의 미세한 노이즈 (밝은 섹션) */
.sec-cream, .sec-ivory, .cost-teaser, .sales, .sec-inquiry {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .12 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* 수익률 섹션: 물결 무늬 + 질감 */
.profit { background-color: var(--cream); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='80' viewBox='0 0 400 80'%3E%3Cpath d='M0 40C66 0 133 0 200 40S333 80 400 40' fill='none' stroke='%23B08A2E' stroke-opacity='.14' stroke-width='1.2'/%3E%3C/svg%3E"); background-size: 400px 80px; }
.profit::before { background: linear-gradient(180deg, var(--cream) 0%, rgba(251,248,241,0) 35%, rgba(251,248,241,0) 70%, var(--cream) 100%); }
.cost-teaser { overflow: hidden; }
.cost-teaser::before { content: ''; position: absolute; left: 50%; top: 0; width: 900px; height: 300px; transform: translateX(-50%); background: radial-gradient(50% 60% at 50% 0%, rgba(216,12,18,.07), transparent 70%); pointer-events: none; }

/* 장식 컷아웃 (넓은 화면에서만) */
.deco { display: none; }
@media (min-width: 960px) {
  .deco { display: block; position: absolute; z-index: 0; pointer-events: none; width: clamp(180px, 17vw, 300px); height: auto; filter: drop-shadow(0 18px 30px rgba(0,0,0,.3)); transform: translateY(var(--dy, 0px)); animation: deco-float 7s ease-in-out infinite; }
  .deco-tr { right: -2%; top: 4%; rotate: -12deg; }
  .deco-bl { left: -3%; bottom: 3%; rotate: 8deg; }
  .deco-br { right: -3%; bottom: 4%; rotate: -8deg; }
  .deco-tl { left: -2%; top: 5%; rotate: 10deg; }
  .sales .container, .cost-teaser .container, .profit .container, .sec-cream .container { position: relative; z-index: 1; }
}
@keyframes deco-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -16px; } }

/* 패럴랙스: 사진 배경 섹션 */
.sec-photo::before, .page-head::before { transform: translateY(var(--py, 0px)) scale(1.18); will-change: transform; }
@media (prefers-reduced-motion: reduce) { .deco { animation: none; transform: none; } .sec-photo::before, .page-head::before { transform: none; } }

/* 가로 넘침 방지: 좌우에서 들어오는 등장 효과·장식이 화면 밖으로 나가도 가로 스크롤이 생기지 않게 (clip은 sticky를 깨지 않음) */
html, body { overflow-x: clip; }
.sec, .page-head, .sec-inquiry { overflow-x: clip; }
/* pop·alt 등장 효과: 보인 뒤에는 원래 크기·위치로 (우선순위 보정) */
.reveal-stagger.pop.is-in > *, .reveal-stagger.alt.is-in > * { transform: none; opacity: 1; }

/* ══ v4: 섹션별 배경(사진·한지·크라프트·비단) · 양쪽 여백 중식풍 장식 · 버튼/브랜드 카드 디자인 ══ */
.sec > .container { position: relative; z-index: 1; }

/* ── 섹션 배경: 사진 레이어 (.has-bg + .sec-bg) ── */
.has-bg { position: relative; isolation: isolate; overflow: hidden; }
.sec-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.sec-bg img { width: 100%; height: 100%; object-fit: cover; transform: translateY(var(--py, 0px)) scale(1.14); will-change: transform; }
.sec-bg::after { content: ''; position: absolute; inset: 0; }
/* 불꽃 사진 + 어둡게 (매출 성과) */
.bg-fire { background: #140904; color: #fff; }
.bg-fire .sec-bg::after { background: radial-gradient(70% 62% at 50% 52%, rgba(40,10,0,.5), rgba(12,4,0,.88) 72%), linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,.25) 38%, rgba(0,0,0,.8)); }
.sales.bg-fire::before { background: radial-gradient(60% 42% at 50% 100%, rgba(255,120,30,.3), transparent 70%); }
.on-dark .odo-sep, .on-dark .odo-unit { color: #fff; }
.on-dark .odo-label { color: var(--gold); }
.on-dark .sales-note { color: rgba(255,255,255,.62); }
.on-dark .odo-d { box-shadow: inset 0 -3px 0 rgba(0,0,0,.25), 0 0 0 1px rgba(255,205,130,.45), 0 12px 28px rgba(216,12,18,.5); }
/* 흐린 매장 사진 (창업비용) */
.bg-fade .sec-bg img { filter: grayscale(.3) sepia(.12); }
.bg-fade .sec-bg::after { background: linear-gradient(180deg, rgba(251,248,241,.9) 0%, rgba(251,248,241,.8) 45%, rgba(251,248,241,.94) 100%); }

/* ── 종이·비단 질감 ── */
.tex-hanji, .sec-cream, .sec-inquiry { background-color: #FFFFFF; background-image: url("../img/tex/hanji.webp"); background-size: 1100px auto; background-repeat: repeat; }
.sec-cream { background-color: #E8E6DF; background-blend-mode: multiply; }
.sec-inquiry { background-color: #F7EBD8; background-blend-mode: multiply; }
.tex-kraft { background-color: #FFFFFF; background-image: url("../img/tex/kraft.webp"); background-size: 1000px auto; }
.profit.tex-kraft { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='80' viewBox='0 0 400 80'%3E%3Cpath d='M0 40C66 0 133 0 200 40S333 80 400 40' fill='none' stroke='%23FFFFFF' stroke-opacity='.32' stroke-width='1.4'/%3E%3C/svg%3E"), url("../img/tex/kraft.webp"); background-size: 400px 80px, 1000px auto; }
.profit.tex-kraft::before { display: none; }
.sec-green { background-color: var(--green-900); background-image: linear-gradient(rgba(0,52,27,.45), rgba(0,40,20,.6)), url("../img/tex/silk-green.webp"); background-size: auto, 760px auto; }

/* 가운데 정렬 제목 위 금색 엠블럼 */
.sec-head.center::before, .sales > .container::before, .cost-teaser > .container::before { content: ''; display: block; width: 44px; height: 44px; margin: 0 auto 12px; background: url("../img/logo-gold.webp") center / contain no-repeat; filter: drop-shadow(0 2px 4px rgba(120,80,0,.25)); }

/* ── 양쪽 여백 장식 (orn.js) ── */
.orn { display: none; }
@media (min-width: 1400px) {
  .orn { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
  .orn-side { position: absolute; top: 0; bottom: 0; width: calc((100% - 1120px) / 2 - 12px); container-type: inline-size; }
  .orn-l { left: 0; }
  .orn-r { right: 0; }
}
/* 홍등·매듭 */
.o-lantern { position: absolute; top: 0; left: var(--x); width: calc(var(--w, 24) * 1cqi); min-width: 32px; max-width: 112px; transform-origin: 50% 0; rotate: calc(var(--a, 3deg) * -1); animation: o-sway var(--d, 4s) ease-in-out var(--dl, 0s) infinite alternate; }
.o-lantern::before { content: ''; display: block; width: 2px; height: var(--len, 80px); margin: 0 auto; background: linear-gradient(180deg, rgba(176,138,46,.15), rgba(176,138,46,.95)); }
.o-lbody { position: relative; display: block; }
.o-lbody img { position: relative; z-index: 1; width: 100%; height: auto; display: block; filter: drop-shadow(0 12px 16px rgba(110,0,0,.3)); }
.o-lbody::before { content: ''; position: absolute; left: 50%; top: 52%; width: 240%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(255,110,50,.32) 0%, rgba(255,110,50,.1) 40%, transparent 68%); animation: o-glow 2.6s ease-in-out infinite alternate; }
.orn.is-dark .o-lbody::before { background: radial-gradient(circle, rgba(255,120,40,.6) 0%, rgba(255,90,30,.2) 42%, transparent 70%); }
.o-knot .o-lbody::before { display: none; }
@keyframes o-sway { to { rotate: var(--a, 3deg); } }
@keyframes o-glow { from { opacity: .5; scale: .9; } to { opacity: 1; scale: 1.08; } }
/* 매화 가지 */
.o-plum { position: absolute; top: -12px; width: min(118cqi, 440px); height: auto; animation: o-plum 6.5s ease-in-out infinite alternate; filter: drop-shadow(0 8px 14px rgba(0,0,0,.12)); }
.orn-l .o-plum { left: -10cqi; transform-origin: 0 0; }
.orn-r .o-plum { right: -10cqi; transform-origin: 100% 0; }
@keyframes o-plum { from { rotate: -1.3deg; } to { rotate: 1.5deg; } }
/* 금색 상운 */
.o-cloud { position: absolute; top: var(--y); left: var(--x); width: calc(var(--w, 60) * 1cqi); max-width: 300px; height: auto; opacity: var(--o, .75); animation: o-drift var(--d, 12s) ease-in-out var(--dl, 0s) infinite alternate; }
.orn.is-dark .o-cloud { opacity: calc(var(--o, .75) * .55); }
@keyframes o-drift { from { translate: -9cqi 0; } to { translate: 9cqi -8px; } }
/* 아주 큰 흐린 붓글씨 한자 */
.o-han { position: absolute; top: var(--y, 8%); left: 50%; translate: -50% 0; rotate: var(--rot, -4deg); font-family: 'Ma Shan Zheng', var(--font-brush); font-size: clamp(140px, 86cqi, 340px); line-height: 1; color: rgba(45,32,18,.075); white-space: nowrap; opacity: 0; scale: .9; transition: opacity 1.6s var(--ease-out), scale 1.8s var(--ease-out); animation: o-hanfloat 11s ease-in-out infinite alternate; }
.orn.is-dark .o-han { color: rgba(255,226,170,.075); }
.tex-kraft .o-han { color: rgba(80,45,10,.11); }
.orn.orn-seen .o-han { opacity: 1; scale: 1; }
@keyframes o-hanfloat { from { margin-top: -10px; } to { margin-top: 12px; } }
/* 떨어지는 매화 꽃잎 · 올라가는 불티 */
.o-fallbox { position: absolute; inset: 0; }
.o-fall, .o-rise { position: absolute; top: 0; left: var(--x); width: 1px; height: 100%; }
.o-fall { animation: o-fall var(--d, 16s) linear var(--dl, 0s) infinite; }
.o-rise { animation: o-rise var(--d, 9s) linear var(--dl, 0s) infinite; }
.o-fall > span, .o-rise > span { position: absolute; left: 0; animation: o-swayx var(--sd, 3s) ease-in-out infinite alternate; }
.o-fall > span { bottom: 0; }
.o-rise > span { top: 0; }
.o-fall i { display: block; width: var(--sz, 16px); aspect-ratio: 1; background: center / contain no-repeat; animation: o-spin var(--rd, 6s) linear infinite; }
.o-fall i.pf { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='%23E2475C'%3E%3Ccircle cx='20' cy='9.5' r='8'/%3E%3Ccircle cx='30' cy='16.8' r='8'/%3E%3Ccircle cx='26.2' cy='28.5' r='8'/%3E%3Ccircle cx='13.8' cy='28.5' r='8'/%3E%3Ccircle cx='10' cy='16.8' r='8'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='5.5' fill='%23F7D46B'/%3E%3Cg fill='%23B8323F'%3E%3Ccircle cx='20' cy='14' r='1.3'/%3E%3Ccircle cx='25.5' cy='18.2' r='1.3'/%3E%3Ccircle cx='23.4' cy='24.8' r='1.3'/%3E%3Ccircle cx='16.6' cy='24.8' r='1.3'/%3E%3Ccircle cx='14.5' cy='18.2' r='1.3'/%3E%3C/g%3E%3C/svg%3E"); }
.o-fall i.pt { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 3c9 7 11 19 0 34C9 22 11 10 20 3z' fill='%23EE6A7B'/%3E%3Cpath d='M20 8v24' stroke='%23C9475A' stroke-width='1' opacity='.5'/%3E%3C/svg%3E"); }
.o-rise i { display: block; width: var(--sz, 5px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #FFF4CC 0%, #FFC14F 38%, rgba(255,110,20,0) 72%); box-shadow: 0 0 12px 3px rgba(255,140,40,.55); }
@keyframes o-fall { 0% { translate: 0 -100%; opacity: 0; } 6% { opacity: .95; } 90% { opacity: .9; } 100% { translate: 0 0; opacity: 0; } }
@keyframes o-rise { 0% { translate: 0 100%; opacity: 0; } 8% { opacity: 1; } 70% { opacity: .85; } 100% { translate: 0 14%; opacity: 0; } }
@keyframes o-swayx { from { translate: calc(var(--sx, 16px) * -1) 0; } to { translate: var(--sx, 16px) 0; } }
@keyframes o-spin { to { rotate: 360deg; } }
/* 세로 문구 + 낙관 */
.o-vtext { position: absolute; top: var(--y, 10%); left: 50%; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.o-seal { display: grid; place-items: center; width: clamp(36px, 13cqi, 54px); aspect-ratio: 1; background: var(--red); color: #fff; border-radius: 6px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.42), 0 6px 14px rgba(216,12,18,.3); writing-mode: vertical-rl; font-family: var(--font-brush); font-weight: 900; font-size: clamp(11px, 4.4cqi, 17px); line-height: 1.05; rotate: -6deg; opacity: 0; scale: .3; transition: opacity .5s var(--ease-out), scale .7s cubic-bezier(.34,1.56,.64,1); }
.o-chars { writing-mode: vertical-rl; font-family: var(--font-brush); font-weight: 700; font-size: clamp(20px, 10cqi, 40px); line-height: 1; letter-spacing: .3em; color: var(--gold-dark); }
.orn.is-dark .o-chars { color: var(--gold); }
.o-chars i { font-style: normal; display: inline-block; opacity: 0; translate: 0 -16px; transition: opacity .7s var(--ease-out), translate .7s var(--ease-out); transition-delay: calc(var(--i, 0) * 75ms + .25s); }
.o-chars i.sp { inline-size: .55em; }
.o-vline { width: 1px; height: clamp(60px, 34cqi, 150px); background: linear-gradient(180deg, var(--gold-dark), transparent); scale: 1 0; transform-origin: top; transition: scale 1.4s var(--ease-out) 1.2s; }
.orn.orn-seen .o-seal { opacity: 1; scale: 1; }
.orn.orn-seen .o-chars i { opacity: 1; translate: 0 0; }
.orn.orn-seen .o-vline { scale: 1 1; }
/* 회문(回紋) 띠 */
.o-fret { position: absolute; top: 7%; bottom: 7%; width: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 16V2h12v12H6V6h4v4' fill='none' stroke='%23B08A2E' stroke-width='1.6'/%3E%3C/svg%3E") repeat-y center top / 16px 16px; opacity: .55; clip-path: inset(0 0 100% 0); transition: clip-path 2s var(--ease-out) .2s; }
.orn-l .o-fret { right: 4px; }
.orn-r .o-fret { left: 4px; }
.orn.is-dark .o-fret { opacity: .35; }
.orn.orn-seen .o-fret { clip-path: inset(0 0 0 0); }
/* 안 보일 땐 멈춤 · 모션 줄이기 */
.orn:not(.orn-on) *, .orn:not(.orn-on) *::before { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .orn *, .orn *::before { animation: none !important; transition: none !important; }
  .o-fallbox { display: none; }
  .o-chars i, .o-seal, .o-han { opacity: 1 !important; translate: none; scale: none !important; }
  .o-han { translate: -50% 0; }
  .o-vline { scale: 1 1 !important; } .o-fret { clip-path: none !important; }
}

/* ── 버튼 v4: 금색 안쪽 테두리 · 화살표 원 · 채워지는 외곽 버튼 ── */
.btn { font-weight: 800; }
.btn-red { background: linear-gradient(180deg, #EC2A22 0%, #C70D12 100%); border-color: transparent; outline: 1px solid rgba(255,224,150,.6); outline-offset: -5px; box-shadow: 0 10px 26px rgba(216,12,18,.34), inset 0 1px 0 rgba(255,255,255,.28); }
.btn-red:hover { background: linear-gradient(180deg, #F2382F 0%, #B30A0E 100%); border-color: transparent; }
.btn-gold { background: linear-gradient(180deg, #FCEBB0 0%, #F0CD6C 46%, #D7A93F 54%, #F2D57E 100%); color: var(--green-900); outline: 1px solid rgba(110,70,0,.35); outline-offset: -5px; box-shadow: 0 8px 22px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.75); }
.btn-gold:hover { background: linear-gradient(180deg, #FFF1C4 0%, #F5D77E 46%, #DDB24C 54%, #F6DD8E 100%); }
.btn-outline-white { background: rgba(0,0,0,.2); }
.btn .ico-arrow { width: 26px; height: 26px; padding: 6px; border-radius: 50%; background: rgba(255,255,255,.22); margin-right: -10px; }
.btn-gold .ico-arrow { background: rgba(0,58,30,.14); }
.btn-outline-green { background: linear-gradient(var(--green-900), var(--green-900)) no-repeat left center / 0% 100%; transition: background-size .45s var(--ease-out), color .3s, transform .15s; }
.btn-outline-green:hover { background: linear-gradient(var(--green-900), var(--green-900)) no-repeat left center / 100% 100%; color: #fff; }
.btn-outline-green .ico-arrow { background: rgba(0,58,30,.12); }
.btn-outline-green:hover .ico-arrow { background: rgba(255,255,255,.22); }
/* "~보기" 링크 → 작은 알약 버튼 */
.link-more { padding: 6px 7px 6px 15px; border-radius: 999px; border: 1px solid rgba(0,58,30,.35); background: rgba(255,255,255,.5); font-size: 14px; gap: 10px; transition: background-color .25s, color .25s, border-color .25s; }
.link-more .ico-arrow { width: 24px; height: 24px; padding: 6px; border-radius: 50%; background: var(--green-900); color: #fff; }
.link-more:hover { background: var(--green-900); color: #fff; border-color: var(--green-900); }
.link-more:hover .ico-arrow { background: #fff; color: var(--green-900); }
.on-dark .link-more { border-color: rgba(243,207,106,.5); background: rgba(0,0,0,.25); color: var(--gold); }
.on-dark .link-more .ico-arrow { background: var(--gold); color: var(--green-900); }
.on-dark .link-more:hover { background: var(--gold); color: var(--green-900); border-color: var(--gold); }
.on-dark .link-more:hover .ico-arrow { background: var(--green-900); color: var(--gold); }

/* 강점 카드: 금색 모서리 장식이 호버하면 테두리 전체로 */
.strength::before, .strength::after { content: ''; position: absolute; width: 24px; height: 24px; border: 2px solid var(--gold); pointer-events: none; transition: width .45s var(--ease-out), height .45s var(--ease-out), opacity .3s; opacity: .85; }
.strength::before { top: 9px; left: 9px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.strength::after { bottom: 9px; right: 9px; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }
.strength:hover::before, .strength:hover::after { width: calc(100% - 18px); height: calc(100% - 18px); opacity: 1; }

/* ── 패밀리 브랜드 카드 ── */
.family-brands { display: grid; gap: 14px; margin-top: 28px; }
.brand-card { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; isolation: isolate; color: #fff; background: #0B1F14; box-shadow: 0 14px 30px rgba(0,0,0,.35); transition: transform .35s var(--ease-out), box-shadow .35s; }
.brand-card .bc-img, .brand-card .photo-missing { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .9s var(--ease-out); border-radius: 0; min-height: 0; }
.brand-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,0) 15%, rgba(0,22,11,.55) 55%, rgba(0,18,9,.94) 100%); }
.brand-card::after { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(243,207,106,.55); border-radius: 12px; pointer-events: none; transition: inset .35s var(--ease-out), border-color .35s; }
.bc-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px 20px; display: grid; gap: 6px; }
.bc-type { justify-self: start; padding: 3px 10px; border-radius: 999px; background: rgba(243,207,106,.18); border: 1px solid rgba(243,207,106,.55); color: var(--gold); font-size: 12px; font-weight: 700; }
.brand-card strong { font-family: var(--font-brush); font-weight: 900; font-size: clamp(22px, 1rem + 1vw, 28px); line-height: 1.2; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.bc-cta { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: rgba(255,255,255,.88); }
.bc-go { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--green-900); transition: transform .35s var(--ease-out), background-color .3s; }
.bc-go svg { width: 14px; height: 14px; }
.bc-badge { position: absolute; top: 16px; left: 16px; padding: 5px 10px; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .08em; border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,.35); animation: pulse-scale 2.6s ease-in-out infinite; }
a.brand-card:hover { transform: translateY(-6px); box-shadow: 0 24px 46px rgba(0,0,0,.45); }
a.brand-card:hover .bc-img { transform: scale(1.08); }
a.brand-card:hover::after { inset: 5px; border-color: var(--gold); }
a.brand-card:hover .bc-go { transform: translateX(4px); background: #fff; }
.brand-card.is-current::after { border: 2px solid var(--gold); }
@media (min-width: 640px) { .family-brands { grid-template-columns: repeat(3, 1fr); gap: 14px; } .brand-card { aspect-ratio: 4 / 5; } .bc-body { padding: 16px 16px 18px; } }
@media (prefers-reduced-motion: reduce) { .bc-badge { animation: none; } }

.tex-kraft { background-image: linear-gradient(rgba(255,251,242,.38), rgba(255,251,242,.38)), url("../img/tex/kraft.webp"); }
.profit.tex-kraft { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='80' viewBox='0 0 400 80'%3E%3Cpath d='M0 40C66 0 133 0 200 40S333 80 400 40' fill='none' stroke='%23FFFFFF' stroke-opacity='.34' stroke-width='1.4'/%3E%3C/svg%3E"), linear-gradient(rgba(255,251,242,.38), rgba(255,251,242,.38)), url("../img/tex/kraft.webp"); background-size: 400px 80px, auto, 1000px auto; }

/* v4.1 보정: 세로 문구는 섹션 높이에 맞춰 크기 조절 · 브랜드 카드 이름 줄바꿈 방지 · 불꽃 배경 밝게 */
@media (min-width: 1400px) { .orn-side { container-type: size; } }
.o-chars { font-size: clamp(16px, min(9cqi, 3.3cqh), 30px); letter-spacing: .16em; }
.o-seal { width: clamp(34px, min(12cqi, 5cqh), 50px); }
.o-vline { height: clamp(40px, 12cqh, 140px); }
.o-han { font-size: clamp(120px, min(86cqi, 46cqh), 340px); }
.brand-card strong { font-size: clamp(18px, .9rem + .5vw, 23px); white-space: nowrap; overflow-wrap: normal; letter-spacing: -.02em; }
.bc-badge { left: auto; right: 14px; top: 14px; }
.bg-fire .sec-bg::after { background: radial-gradient(70% 62% at 50% 52%, rgba(40,10,0,.3), rgba(12,4,0,.72) 74%), linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.1) 40%, rgba(0,0,0,.62)); }
.bg-fire .sec-bg img { filter: saturate(1.15) brightness(1.08); }
/* 배경이 따로 없는 흰 섹션도 한지 질감으로 (섹션마다 느낌 있게) */
main .sec:not(.sec-cream):not(.sec-ivory):not(.sec-green):not(.sec-photo):not(.has-bg):not(.tex-kraft):not(.tex-hanji):not(.sec-inquiry):not(.sales):not(.cost-teaser) { background-color: #FFFFFF; background-image: url("../img/tex/hanji.webp"); background-size: 1100px auto; }

/* ══ v5: 모바일 개선 ══ */
/* 히어로 좌우 여백 복구 (padding 단축 속성이 .container 여백을 지우고 있었음) */
.hero-in { padding-left: var(--gutter); padding-right: var(--gutter); }

/* 배너 점: 보이는 막대는 그대로, 누르는 영역은 넓게 */
.hero-dot { position: relative; width: 42px; height: 26px; background: none !important; }
.hero-dot::before { content: ''; position: absolute; left: 4px; right: 4px; top: 11px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.4); transition: background-color .3s; }
.hero-dot.is-active { width: 60px; }
.hero-dot.is-active::before { background: var(--gold); }

/* 터치 영역 · 글자 크기 */
.link-more { min-height: 40px; }
.agree input { width: 22px; height: 22px; margin-top: 0; }
.footer-family a { min-height: 44px; display: inline-flex; align-items: center; gap: 4px; }
.footer-bottom nav a { display: inline-block; padding: 10px 0; }
.scroller-progress { display: none; }

@media (max-width: 719px) {
  .logo-sub { font-size: 11.5px; }
  .tag { font-size: 12px; }
  .sauce figcaption .tag { font-size: 11px; }
  .bc-badge { font-size: 12px; }
  .footer-family a small { font-size: 12px; }
  mark.todo { font-size: 12px; }

  /* 히어로 */
  .hero-in { padding-top: calc(var(--header-h) + 26px); padding-bottom: 70px; gap: 0; }
  .hero-lockup { width: 116px; margin-bottom: 12px; }
  .hero-kw { font-size: 12.5px; margin-bottom: 12px; letter-spacing: .02em; }
  .hero-kw::before { width: 18px; }
  .hero-title { font-size: clamp(31px, 9vw, 40px); }
  .hero-lead { font-size: 15px; margin-top: 14px; line-height: 1.7; }
  .hero-actions { margin-top: 22px; gap: 10px; flex-wrap: nowrap; }
  .hero-actions .btn { flex: 1 1 0; min-width: 0; padding: 0 12px; min-height: 54px; font-size: 16px; }
  .hero-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
  .hero-facts li { flex-direction: column; justify-content: center; gap: 2px; padding: 10px 4px; border-radius: 12px; font-size: 11.5px; line-height: 1.3; text-align: center; }
  .hero-facts b { font-size: 18px; }
  .hero-ctrl { bottom: 26px; }
  .hero-slide .hero-bg video, .hero-slide .hero-bg img { object-position: 50% 50%; }

  /* 매출 숫자판: 라벨은 위, 숫자와 '원'은 한 줄 */
  .odo-line { gap: 10px 6px; }
  .odo-label { flex-basis: 100%; text-align: center; }
  .odo-label br { display: none; }
  .odo { --odo-w: min(28px, calc((100vw - 2 * var(--gutter) - 64px) / 9)); --odo-h: 48px; gap: 3px; }
  .odo-sep { margin: 0 -1px; }
  .odo-unit { padding-bottom: 4px; }

  /* 창업비용 사진: 4:3 으로, 말풍선 안 겹치게 */
  .teaser-visual img { aspect-ratio: 4 / 3; object-position: 22% center; }
  .teaser-visual .bubble { font-size: 12.5px; padding: 8px 12px; }
  .teaser-visual .bubble:nth-child(2) { left: 3%; top: 7%; }
  .teaser-visual .bubble:nth-child(3) { right: 3%; left: auto; top: 38%; }
  .teaser-visual .bubble:nth-child(4) { bottom: 8%; }
  .zero-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .zero-chips li { justify-content: center; padding: 12px 10px; }

  /* 가로로 넘기는 목록 아래 진행 막대 */
  .scroller-progress { display: block; height: 3px; margin: 2px 0 0; border-radius: 2px; background: rgba(0,58,30,.12); overflow: hidden; }
  .scroller-progress i { display: block; height: 100%; width: 30%; border-radius: 2px; background: var(--green-900); transform-origin: left; transition: width .15s linear; }
  .on-dark .scroller-progress { background: rgba(255,255,255,.16); }
  .on-dark .scroller-progress i { background: var(--gold); }

  /* 매장 컨셉 갤러리 */
  .gallery figure { flex-basis: 78vw; }

  /* 패밀리 브랜드 카드 낮게 */
  .brand-card { aspect-ratio: 16 / 8; }

  /* 하단 고정 바: 창업문의 빛 효과 */
  .qb-mobile .mb-inquiry { position: relative; overflow: hidden; background: linear-gradient(180deg, #EC2A22, #C70D12); gap: 6px; }
  .qb-mobile .mb-inquiry::after { content: ''; position: absolute; top: -60%; left: -80%; width: 45%; height: 220%; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.45) 50%, transparent 80%); transform: skewX(-20deg); animation: shine 3.6s ease-in-out infinite; }
  .qb-mobile .mb-inquiry .ico-arrow { width: 22px; height: 22px; padding: 5px; border-radius: 50%; background: rgba(255,255,255,.22); }
}

/* 강점 카드: 휴대폰에서는 옆으로 넘기기 */
.strength-hint { display: none; }
@media (max-width: 639px) {
  .strength-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding: 4px var(--gutter) 14px; margin: 0 calc(-1 * var(--gutter)); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .strength-grid::-webkit-scrollbar { display: none; }
  .strength { flex: 0 0 82%; scroll-snap-align: center; }
  .strength-hint { display: flex; color: rgba(255,255,255,.7); }
  .strength-hint::before { background: rgba(255,255,255,.7); }
}

/* 수익률: 휴대폰에서는 한 표로 비교 */
.profit-m { display: none; }
@media (max-width: 719px) {
  .profit-wrap { display: none; }
  .profit-m { display: block; }
}
.pm-heads { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 8px; }
.pm-head { border-radius: 90px 90px 14px 14px; padding: 22px 8px 14px; text-align: center; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 6px; box-shadow: var(--shadow-sm); }
.pm-head.them { background: linear-gradient(180deg, #ABABAB, #8E8E8E); }
.pm-head.us { background: linear-gradient(180deg, var(--green-700), var(--green-900)); box-shadow: var(--shadow-md); }
.pm-head img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; }
.pm-head.them img { filter: grayscale(1); }
.pm-label { font-family: var(--font-num); font-weight: 700; font-size: 14px; line-height: 1.25; }
.pm-margin { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.pm-margin small { font-size: 11.5px; opacity: .9; margin-bottom: 4px; }
.pm-margin b { font-family: var(--font-num); font-size: 30px; }
.pm-head.us .pm-margin b { color: var(--gold); }
.pm-vs { align-self: center; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--red); font-family: var(--font-num); font-weight: 700; font-size: 15px; border: 2px solid #fff; box-shadow: 0 6px 14px rgba(0,0,0,.2); }
.pm-table { width: 100%; margin-top: 12px; border-collapse: separate; border-spacing: 0; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-sm); font-size: 13px; }
.pm-table th, .pm-table td { padding: 11px 8px; border-bottom: 1px dashed var(--line); vertical-align: middle; }
.pm-table tbody th { text-align: left; font-weight: 600; color: var(--ink-2); width: 32%; padding-left: 14px; }
.pm-table td { text-align: right; font-family: var(--font-num); font-weight: 700; white-space: nowrap; }
.pm-table td small { display: block; font-family: var(--font-body); font-weight: 500; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.pm-table td.them { color: #777; }
.pm-table td.us { color: var(--green-900); background: var(--green-050); padding-right: 14px; }
.pm-table tbody tr:last-child th, .pm-table tbody tr:last-child td { border-bottom: 0; }
.pm-table tfoot th, .pm-table tfoot td { border-bottom: 0; padding-top: 14px; padding-bottom: 14px; }
.pm-table tfoot th { background: #8E8E8E; color: #fff; text-align: left; padding-left: 14px; font-family: var(--font-num); font-size: 13px; }
.pm-table tfoot td.them { background: #8E8E8E; color: #fff; font-size: 14px; }
.pm-table tfoot td.us { background: var(--red); color: #fff; font-size: 16px; }

/* 타사 비교: 휴대폰에서는 한 표로 */
.vs-m { display: none; }
@media (max-width: 719px) {
  .vs-wrap { display: none; }
  .vs-m { display: block; }
}
.vm-table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 16px; overflow: hidden; background: rgba(0,0,0,.42); border: 1px solid rgba(243,207,106,.35); backdrop-filter: blur(6px); font-size: 13.5px; }
.vm-table th, .vm-table td { padding: 12px 8px; border-bottom: 1px dashed rgba(255,255,255,.18); vertical-align: middle; }
.vm-table thead th { font-family: var(--font-num); font-weight: 700; font-size: 13px; line-height: 1.3; padding-top: 14px; padding-bottom: 14px; border-bottom: 1px solid rgba(243,207,106,.45); }
.vm-table thead th.them { color: rgba(255,255,255,.8); text-align: center; }
.vm-table thead th.us { background: var(--red); color: var(--gold); text-align: center; font-size: 14px; }
.vm-table thead th.vs { width: 28%; }
.vm-table thead th.vs span { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--gold); color: var(--red); font-size: 14px; border: 2px solid #fff; }
.vm-table tbody th { text-align: left; color: rgba(255,255,255,.75); font-weight: 600; font-size: 13px; padding-left: 14px; }
.vm-table td { text-align: center; }
.vm-table td.them { color: rgba(255,255,255,.7); font-size: 12.5px; }
.vm-table td.us { background: rgba(216,12,18,.82); color: #fff; font-family: var(--font-num); font-weight: 700; }
.vm-table tbody tr:last-child th, .vm-table tbody tr:last-child td { border-bottom: 0; }

/* 휴대폰·태블릿용 장식 (orn.js .orn-mob): 큰 흐린 한자 + 꽃잎/불티 몇 개 */
.orn-mob { display: none; }
@media (max-width: 1399px) {
  .orn { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
  .orn-side { display: none; }
  .orn-mob { display: block; position: absolute; inset: 0; }
}
.om-han { position: absolute; top: 14px; right: -5vw; font-family: 'Ma Shan Zheng', var(--font-brush); font-size: min(46vw, 240px); line-height: 1; color: rgba(45,32,18,.06); rotate: var(--rot, -6deg); opacity: 0; transition: opacity 1.4s var(--ease-out); }
.orn.is-dark .om-han { color: rgba(255,226,170,.07); }
.tex-kraft .om-han { color: rgba(80,45,10,.1); }
.orn.orn-seen .om-han { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .om-han { opacity: 1; } }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* v5.1 모바일 보정 */
@media (max-width: 719px) {
  /* 배너 점이 숫자 카드에 가리지 않게 */
  .hero-in { padding-bottom: 96px; }
  .hero-ctrl { bottom: 52px; }
  /* 메뉴가 홀수 개면 마지막 칸은 가로로 길게 */
  .menu-grid > .menu-item:last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: 44% 1fr; align-items: center; }
  .menu-grid > .menu-item:last-child:nth-child(odd) .ph { aspect-ratio: 4 / 3; height: 100%; }
  .menu-grid > .menu-item:last-child:nth-child(odd) .body { padding: 14px 16px; }
}
/* 휴대폰 꽃잎·불티는 양쪽 가장자리로만, 글자 위로 지나가지 않게 */
.orn-mob .o-fall, .orn-mob .o-rise { opacity: .7; }
.orn-mob .o-fall:nth-child(odd), .orn-mob .o-rise:nth-child(odd) { left: calc(var(--x) * .1); }
.orn-mob .o-fall:nth-child(even), .orn-mob .o-rise:nth-child(even) { left: calc(90% + var(--x) * .08); }
.orn-mob .o-fall i { width: calc(var(--sz, 16px) * .8); }

/* ── 상생 약속 (매출 성과 자리, 2026-10-28) ── */
.together .sec-bg img { object-position: 70% 50%; }
.together-grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
.together .sec-lead { color: rgba(255,255,255,.82); }
.together-list { list-style: none; margin: clamp(22px, 3vw, 34px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.together-list li { padding: clamp(14px, 1.6vw, 20px); border: 1px solid var(--gold-line); border-radius: var(--radius); background: rgba(12,6,2,.55); backdrop-filter: blur(3px); }
.together-list .v { display: block; font-family: var(--font-num); font-weight: 700; color: var(--gold); font-size: clamp(30px, 1.4rem + 2vw, 46px); line-height: 1.05; }
.together-list b { display: block; margin-top: 6px; font-size: clamp(15px, .85rem + .3vw, 18px); color: #fff; }
.together-list p { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.72); }
.together-photo { margin: 0; justify-self: center; width: min(100%, 420px); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--gold-line); box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.together-photo img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 20%; }
@media (min-width: 960px) { .together-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr); } }
@media (max-width: 719px) {
  .together-list p { font-size: 13px; }
  .together-photo { width: min(78%, 280px); }
  .together-photo img { aspect-ratio: 4 / 5; }
}
.sig .serve { margin: 6px 0 0; font-weight: 700; color: var(--ink-2); }
.region-example { margin: 0 0 18px; max-width: 760px; padding: 16px 20px; border-left: 3px solid var(--gold); background: rgba(0,0,0,.18); color: rgba(255,255,255,.88); line-height: 1.7; }
.region-note { margin: 10px 0 0; font-size: 14px; color: rgba(255,255,255,.7); }
.hq-chef { margin: 0 0 22px; max-width: 320px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--gold-line); }
.hq-chef img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; }

/* ══ 임팩트 모션 (2026-10-28) ═══════════════════════════════
   제목 마스크 등장 · 배너 문구 순차 등장 · 키워드 띠 · 스크롤 확대 · 카드 조명 · 스크롤 진행 막대 */

/* 제목: 아래 마스크 안에서 밀려 올라오며 드러남 */
.reveal .sec-title, .reveal .big-line, .reveal .page-title {
  clip-path: inset(100% -4% -12% -4%); transform: translateY(.45em);
  transition: clip-path .9s var(--ease-out) .1s, transform .9s var(--ease-out) .1s;
}
.reveal.is-in .sec-title, .reveal.is-in .big-line, .reveal.is-in .page-title { clip-path: inset(-12% -4% -12% -4%); transform: none; }

/* 메인 배너: 슬라이드가 바뀔 때마다 문구가 위에서부터 차례로 등장 */
@keyframes hero-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes hero-mask { from { clip-path: inset(100% -6% -14% -6%); transform: translateY(.4em); } to { clip-path: inset(-90% -6% -14% -6%); transform: none; } }
.hero-slide.is-active .hero-lockup { animation: hero-rise .7s var(--ease-out) both; }
.hero-slide.is-active .hero-kw { animation: hero-rise .7s var(--ease-out) .08s both; }
.hero-slide.is-active .hero-title { animation: hero-mask .9s var(--ease-out) .14s both; }
.hero-slide.is-active .hero-lead { animation: hero-rise .7s var(--ease-out) .32s both; }
.hero-slide.is-active .hero-actions { animation: hero-rise .7s var(--ease-out) .42s both; }
.hero-slide.is-active .hero-facts { animation: hero-rise .7s var(--ease-out) .52s both; }

/* 키워드 띠: 빨간 띠와 초록 띠가 엇갈려 기울어진 채 흐름 */
.mq { position: relative; overflow: hidden; padding: clamp(26px, 3vw, 40px) 0; background: var(--green-900); isolation: isolate; display: grid; }
.mq-row { position: relative; width: 108%; margin-left: -4%; overflow: hidden; padding: clamp(10px, 1.1vw, 16px) 0; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.mq-a { background: var(--red); color: #fff; transform: rotate(-2.2deg); z-index: 2; border-top: 2px solid var(--gold); border-bottom: 2px solid var(--gold); }
.mq-b { background: var(--gold); color: var(--green-900); transform: rotate(1.6deg); z-index: 1; margin-bottom: clamp(-18px, -1.2vw, -8px); }
.mq-track { display: flex; width: max-content; align-items: center; will-change: transform; }
.mq-dup { display: contents; }
.mq-track span, .mq-track i { flex: none; }
.mq-track span { font-family: var(--font-brush); font-weight: 900; font-size: clamp(20px, 1rem + 1.6vw, 38px); line-height: 1.2; white-space: nowrap; padding: 0 clamp(14px, 1.6vw, 26px); }
.mq-track i { font-style: normal; color: var(--gold); font-size: clamp(14px, .7rem + .6vw, 22px); }
.mq-b .mq-track i { color: var(--red); }
.mq-a .mq-track i { color: var(--gold); }
.mq-b .mq-track span { font-size: clamp(16px, .85rem + 1.1vw, 28px); }

/* 스크롤 확대: 화면 가운데로 올수록 사진이 커짐 (main.js 가 transform 지정) */
[data-scrub] img { transform-origin: 50% 60%; will-change: transform; }

/* 카드 조명: 마우스를 따라 금빛이 비침 (마우스 환경만) */
.spot { position: relative; isolation: isolate; overflow: hidden; }
.spot-glow { position: absolute; left: 0; top: 0; width: 320px; height: 320px; margin: -160px 0 0 -160px; border-radius: 50%; background: radial-gradient(closest-side, rgba(243,207,106,.26), rgba(243,207,106,.08) 55%, transparent); pointer-events: none; opacity: 0; z-index: -1; transition: opacity .3s ease; }
@media (hover: hover) and (pointer: fine) { .spot:hover > .spot-glow { opacity: 1; } }

/* 스크롤 진행 막대 */
.scroll-prog { position: fixed; left: 0; top: 0; z-index: 200; width: 100%; height: 3px; background: linear-gradient(90deg, var(--gold-2), var(--gold)); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal .sec-title, .reveal .big-line, .reveal .page-title { clip-path: none; transform: none; transition: none; }
  .hero-slide.is-active .hero-lockup, .hero-slide.is-active .hero-kw, .hero-slide.is-active .hero-title, .hero-slide.is-active .hero-lead, .hero-slide.is-active .hero-actions, .hero-slide.is-active .hero-facts { animation: none; }
  [data-scrub] img { transform: none !important; }
  .scroll-prog { display: none; }
}

/* ── 배너 강조: 작은 제목 + 0원 강조선 + 금메달 (2026-10-28) ── */
.hero-title.is-sm { font-size: calc(var(--fs-hero) * .74); margin-top: 1.25em; }
.em-mark { position: relative; display: inline-block; margin-left: .12em; color: var(--gold); font-size: 1.5em; line-height: 1; }
.em-txt { position: relative; z-index: 1; background: linear-gradient(100deg, #F0C75A 0%, #FFE08A 30%, #FFFBEA 46%, #FFE08A 58%, #E2B64C 100%); background-size: 260% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 rgba(60,30,0,.35)) drop-shadow(0 8px 20px rgba(0,0,0,.45)); }
.em-rays { position: absolute; left: 50%; top: 50%; width: 2.5em; height: auto; overflow: visible; transform: translate(-50%, -76.9%); pointer-events: none; filter: drop-shadow(0 0 5px rgba(243,207,106,.5)); }
.em-ray { transform-box: fill-box; transform-origin: 50% 100%; }
.em-glow { position: absolute; left: 50%; top: 50%; width: 1.9em; height: 1.4em; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(243,207,106,.32), rgba(243,207,106,0)); pointer-events: none; }
.hero-badge { position: relative; margin: 0; justify-self: center; align-self: center; width: clamp(220px, 28vw, 420px); aspect-ratio: 1; }
.hero-badge img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.hb-sparks { transform: scale(1.25); opacity: .9; }
.hb-medal { filter: drop-shadow(0 24px 40px rgba(0,0,0,.55)); }
@keyframes em-ray-in { from { opacity: 0; scale: 1 0; } to { opacity: 1; scale: 1 1; } }
@keyframes em-ray-beat { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes em-shine { 0%, 55% { background-position: 100% 0; } 85%, 100% { background-position: 0 0; } }
@keyframes em-glow { 0%, 100% { opacity: .7; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); } }
@keyframes hb-in { from { opacity: 0; transform: translateY(30px) rotate(-8deg) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes hb-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes hb-spin { to { transform: scale(1.25) rotate(360deg); } }
.hero-slide.is-active .em-ray { animation: em-ray-in .45s var(--ease-out) calc(.8s + var(--i) * .07s) both, em-ray-beat 2.4s ease-in-out calc(1.6s + var(--i) * .15s) infinite; }
.hero-slide.is-active .em-txt { animation: em-shine 3.6s ease-in-out 1s infinite; }
.hero-slide.is-active .em-glow { animation: em-glow 2.4s ease-in-out 1.2s infinite; }
.hero-slide.is-active .hb-medal { animation: hb-in .9s var(--ease-out) .3s both, hb-float 4s ease-in-out 1.2s infinite; }
.hero-slide.is-active .hb-sparks { animation: hb-spin 40s linear infinite; }
@media (max-width: 719px) {
  .hero-badge { position: absolute; right: var(--gutter); top: 78px; width: 108px; }
  .em-mark { font-size: 1.4em; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide.is-active .em-ray, .hero-slide.is-active .em-txt, .hero-slide.is-active .em-glow, .hero-slide.is-active .hb-medal, .hero-slide.is-active .hb-sparks { animation: none; }
}

/* ── 실제 매장: CCTV 바둑판 띠 (2026-10-29) ── */
main .sec.realstore { position: relative; padding: 0; background: #070504 !important; overflow: hidden; } /* 1127행 한지 배경 규칙보다 우선 */
.cctv-wall { display: grid; gap: 6px; padding: 6px 0; transform: rotate(-3deg) scale(1.08); }
.cctv-row { overflow: hidden; }
.cctv-track { display: flex; gap: 6px; width: max-content; animation: cctv-flow var(--dur, 80s) linear infinite; }
.cctv-row[data-rev] .cctv-track { animation-direction: reverse; }
.cctv-track img { display: block; flex: none; width: clamp(120px, 11vw, 180px); height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; filter: saturate(.9) contrast(1.05); }
@keyframes cctv-flow { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 3px)); } }
.realstore-shade { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 55%, rgba(7,5,4,.6) 100%), repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 3px); }
@media (max-width: 959px) {
  .cctv-wall { gap: 4px; transform: rotate(-3deg) scale(1.15); }
  .cctv-track { gap: 4px; }
  .cctv-track img { width: 104px; }
  @keyframes cctv-flow { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 2px)); } }
}
@media (prefers-reduced-motion: reduce) { .cctv-track, .realstore-cap .rec { animation: none; } }

/* 배너 수상 메달 캡션 */
.hb-cap { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 6px; white-space: nowrap; font-size: 12px; color: rgba(255,255,255,.78); text-shadow: 0 1px 6px rgba(0,0,0,.6); }
@media (max-width: 719px) { .hb-cap { display: none; } }

/* ── 브랜드 소개: 수상 (2026-10-29) ── */
main .sec.awards { background: radial-gradient(ellipse 60% 70% at 72% 50%, rgba(243,207,106,.14), transparent 70%), #0d0a08 !important; }
.awards-grid { display: grid; gap: clamp(32px, 4vw, 64px); align-items: center; }
.awards-text .sec-lead { color: rgba(255,255,255,.8); }
.awards-cert { margin: 24px 0 0; width: min(100%, 260px); border: 1px solid var(--gold-line); border-radius: 6px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.awards-cert img { display: block; width: 100%; height: auto; }
.awards-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 2vw, 28px); align-items: end; }
.awards-row img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 30px rgba(0,0,0,.55)); }
.awards-row li:nth-child(2) { margin-bottom: 12%; }
@media (min-width: 960px) { .awards-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); } }

/* ══ 첫 화면 임팩트 (2026-10-29) ══════════════════════════ */
/* 인트로: 로고 + 금색 선 → 위로 걷힘 (방문당 한 번, sessionStorage) */
.intro { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 45%, #0e3a24 0%, #04140b 60%, #020805 100%); pointer-events: none; animation: intro-out .8s cubic-bezier(.7,0,.2,1) 1.45s both; }
.no-intro .intro { display: none; }
.intro-in { display: grid; justify-items: center; gap: 14px; }
.intro img { width: clamp(120px, 14vw, 180px); height: auto; animation: intro-logo .9s cubic-bezier(.2,.9,.25,1.15) .1s both; filter: drop-shadow(0 10px 30px rgba(0,0,0,.5)); }
.intro-line { display: block; width: clamp(160px, 22vw, 300px); height: 2px; background: linear-gradient(90deg, transparent, #F3CF6A 30%, #FFF6D2 50%, #F3CF6A 70%, transparent); transform: scaleX(0); animation: intro-line .7s var(--ease-out) .6s both; box-shadow: 0 0 14px rgba(243,207,106,.7); }
.intro-sub { margin: 0; font-size: clamp(13px, .8rem + .2vw, 15px); letter-spacing: .32em; color: rgba(243,207,106,.9); animation: hero-rise .6s var(--ease-out) .85s both; }
@keyframes intro-logo { from { opacity: 0; transform: scale(1.5); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0) drop-shadow(0 10px 30px rgba(0,0,0,.5)); } }
@keyframes intro-line { to { transform: scaleX(1); } }
@keyframes intro-out { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
/* 인트로가 걷힌 뒤 배너 문구 등장 */
.intro-on .hero-slide.is-active .hero-lockup { animation-delay: 1.7s; }
.intro-on .hero-slide.is-active .hero-kw { animation-delay: 1.85s; }
.intro-on .hero-slide.is-active .hero-title { animation-delay: 1.95s; }
.intro-on .hero-slide.is-active .hero-lead { animation-delay: 2.15s; }
.intro-on .hero-slide.is-active .hero-actions { animation-delay: 2.25s; }
.intro-on .hero-slide.is-active .hero-facts { animation-delay: 2.35s; }
.intro-on .hero-slide.is-active .em-ray { animation-delay: calc(2.5s + var(--i) * .07s), calc(3.3s + var(--i) * .15s); }

/* 로고: 도장 찍듯 내려앉음 */
@keyframes hero-stamp { 0% { opacity: 0; transform: scale(1.6) rotate(-6deg); } 60% { opacity: 1; transform: scale(.94) rotate(1deg); } 100% { opacity: 1; transform: none; } }
.hero-slide.is-active .hero-lockup { animation-name: hero-stamp; animation-duration: .75s; }

/* 배너 불티 */
.hero-embers { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hero-embers i { position: absolute; left: var(--x); bottom: -10px; width: var(--s); height: var(--s); border-radius: 50%; background: radial-gradient(circle, #FFE7A0 0%, #FF8A1F 55%, rgba(255,80,0,0) 70%); box-shadow: 0 0 8px 2px rgba(255,140,40,.55); opacity: 0; animation: ember-rise var(--d) linear var(--dl) infinite; }
@keyframes ember-rise { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: .9; } 70% { opacity: .6; } 100% { opacity: 0; transform: translate(40px, -78vh); } }

/* 0원 반짝이 */
.em-spark { position: absolute; z-index: 2; width: .22em; height: .22em; background: #FFF6D2; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 4px #F3CF6A); opacity: 0; animation: em-twinkle 2.2s ease-in-out infinite; }
.em-spark.s1 { right: -.12em; top: .02em; animation-delay: 1.2s; }
.em-spark.s2 { left: -.16em; top: .38em; width: .15em; height: .15em; animation-delay: 1.9s; }
.em-spark.s3 { right: .26em; bottom: -.02em; width: .13em; height: .13em; animation-delay: 2.6s; }
@keyframes em-twinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 45% { opacity: 1; transform: scale(1) rotate(45deg); } 70% { opacity: 0; transform: scale(.4) rotate(90deg); } }

/* 숫자 띠: 금테 + 금속 숫자 + 0원 칸 붉은 빛 */
.stats-card { position: relative; background: radial-gradient(130% 160% at 50% -30%, #11603a 0%, #003A1E 50%, #002515 100%); border: 1px solid rgba(243,207,106,.75); box-shadow: 0 26px 60px rgba(0,0,0,.32), inset 0 0 0 5px rgba(0,37,21,.9), inset 0 0 0 6px rgba(243,207,106,.32); }
.stats-card::after { content: ''; position: absolute; top: 0; bottom: 0; left: -30%; width: 22%; background: linear-gradient(100deg, transparent, rgba(255,240,190,.13), transparent); transform: skewX(-18deg); animation: stats-sweep 6s ease-in-out 2s infinite; pointer-events: none; }
@keyframes stats-sweep { 0% { left: -30%; } 40%, 100% { left: 130%; } }
.stat { position: relative; border-color: rgba(243,207,106,.18) !important; }
.stat-value .count { background: linear-gradient(180deg, #FFF3C4 0%, #F3CF6A 48%, #D9A93E 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(0,0,0,.25)) drop-shadow(0 0 16px rgba(243,207,106,.25)); }
.stat.stat-hq .stat-value .count { background: linear-gradient(180deg, #fff 0%, #f1ece0 100%); -webkit-background-clip: text; background-clip: text; }
.stat-value small { color: #fff; }
.stat-label { color: #fff; }
.stat-zero { background: radial-gradient(ellipse 60% 55% at 50% 36%, rgba(235,28,36,.55) 0%, rgba(235,28,36,.2) 45%, transparent 75%); }
.hero-slide .hero-in { z-index: 2; }
.stat-zero .stat-value { font-size: calc(var(--fs-stat) * 1.12); }
.stat-zero .stat-value .count { filter: drop-shadow(0 2px 0 rgba(0,0,0,.3)) drop-shadow(0 0 22px rgba(243,207,106,.45)); }
@media (hover: hover) { .stat { transition: background-color .3s; } .stat:hover { background-color: rgba(243,207,106,.06); } }
@media (prefers-reduced-motion: reduce) { .intro { display: none; } .hero-embers, .em-spark, .stats-card::after { display: none; } }

/* 메뉴: 사진 없는 메뉴는 '그 외 메뉴' 꼬리표 한 줄 (가격 삭제 후, 2026-10-29) */
.menu-more { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; }
.menu-more-label { margin: 0; font-size: 13px; font-weight: 700; color: var(--red); letter-spacing: .02em; }
.menu-more-label::after { content: ''; display: inline-block; width: 18px; height: 1px; margin-left: 10px; vertical-align: middle; background: var(--gold-dark); }
.menu-more ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.menu-more li { padding: 7px 14px; border: 1px solid var(--gold-line); border-radius: 6px; background: rgba(255,255,255,.7); font-size: 14px; font-weight: 600; color: var(--green-900); }

/* ── 실시간 상담 알림 (왼쪽 아래 팝업) ───────────────── */
.live-toast { position: fixed; left: 12px; bottom: calc(var(--bottom-h) + 12px + env(safe-area-inset-bottom)); z-index: 96; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 12px; background: rgba(12,26,18,.94); color: #fff; border: 1px solid rgba(243,207,106,.55); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.35); pointer-events: none; opacity: 0; transform: translateY(14px) scale(.96); transition: opacity .35s var(--ease), transform .45s var(--ease); }
.live-toast.is-on { opacity: 1; transform: none; animation: lt-flash 1.4s ease-in-out .4s 2; }
.lt-dot { position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 10px rgba(255,59,48,.9); animation: lt-blink 1s steps(2, jump-none) infinite; }
.lt-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(255,59,48,.6); animation: lt-ring 1.4s ease-out infinite; }
.lt-body { display: flex; align-items: baseline; gap: 6px; font-size: 14px; line-height: 1.3; white-space: nowrap; }
.lt-place { font-weight: 800; color: var(--gold); }
.lt-state { font-weight: 600; }
.lt-live { flex: none; font: 800 10px/1 var(--font-num, sans-serif); letter-spacing: .08em; padding: 4px 6px; border-radius: 4px; background: var(--red); color: #fff; animation: lt-blink 1s steps(2, jump-none) infinite; }
@keyframes lt-blink { 50% { opacity: .25; } }
@keyframes lt-ring { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
@keyframes lt-flash { 0%, 100% { border-color: rgba(243,207,106,.55); box-shadow: 0 12px 30px rgba(0,0,0,.35); } 50% { border-color: #f3cf6a; box-shadow: 0 12px 30px rgba(0,0,0,.35), 0 0 0 3px rgba(243,207,106,.25), 0 0 22px rgba(243,207,106,.45); } }
@media (min-width: 960px) { .live-toast { left: 18px; bottom: calc(var(--bottom-h) + 18px); padding: 13px 18px 13px 15px; gap: 12px; } .lt-body { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .live-toast.is-on, .lt-dot, .lt-dot::after, .lt-live { animation: none !important; } }