/* ============================================================
   온반옥(溫飯屋) — 프리미엄 한식 프랜차이즈 가맹 모집
   공유 디자인 시스템. 근거: ui-ux-pro-max (Food&Beverage 레드·웜 / Luxury Premium 웜차콜+세리프).
   방향: 웜 아이보리 페이퍼 · 웜차콜 잉크 · 레드 단일 크로마 액센트 · 명조 세리프 헤드/숫자.
   모든 font-size는 :root 역할 토큰으로만. 상대경로. 클래스 접두어 없음(공유).
   ============================================================ */

:root{
  /* ── 팔레트 ── */
  --paper:#F7F1E7;        /* 웜 아이보리 (기본 배경) */
  --paper-2:#EFE5D5;      /* 살짝 깊은 패널 */
  --paper-3:#E7DBC6;      /* 더 깊은 웜 톤 */
  --ink:#1A1512;          /* 웜 니어블랙 (본문 제목) */
  --ink-soft:#4E453D;     /* 본문 */
  --ink-faint:#897C6F;    /* 캡션·보조 */
  --line:rgba(26,21,18,.14);
  --line-soft:rgba(26,21,18,.08);
  --red:#C1121F;          /* 단일 액센트 */
  --red-deep:#8E0D18;     /* hover/active */
  --red-tint:rgba(193,18,31,.09);
  --char:#211913;         /* 딥 차콜 밴드 배경 */
  --char-2:#2E241C;
  --on-char:#F3E9DA;      /* 차콜 위 텍스트 */
  --on-char-soft:#C6B6A2;
  --line-on-char:rgba(243,233,218,.14);

  /* ── 타입 스케일 (역할 토큰 · 간격 확보) ── */
  --fs-display:clamp(44px,7.4vw,88px);
  --fs-h1:clamp(33px,4.8vw,58px);
  --fs-h2:clamp(26px,3.4vw,40px);
  --fs-h3:clamp(19px,2vw,24px);
  --fs-lead:clamp(17px,1.5vw,20px);
  --fs-body:16px;
  --fs-sm:14px;
  --fs-cap:13px;
  --fs-over:12px;
  --fs-num:clamp(40px,5.4vw,68px);

  /* ── 폰트 (규칙: 한글 Pretendard · 영문/숫자 Sora) ── */
  --serif:'Sora','Pretendard',system-ui,sans-serif;
  --sans:'Sora','Pretendard','Pretendard Variable',system-ui,sans-serif;
  --num:'Sora','Pretendard',sans-serif;

  /* ── 형태 ── */
  --max:1200px;
  --gut:24px;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 1px 2px rgba(26,21,18,.06),0 8px 30px rgba(26,21,18,.09);
  --shadow-lg:0 2px 4px rgba(26,21,18,.07),0 24px 60px rgba(26,21,18,.14);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink-soft);
  font-family:var(--sans);font-size:var(--fs-body);line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ── 레이아웃 ── */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.band{padding:clamp(64px,9vw,120px) 0}
.band-alt{background:var(--paper-2)}
.band-3{background:var(--paper-3)}
.band-dark{background:var(--char);color:var(--on-char)}
.band-dark .lead,.band-dark p{color:var(--on-char-soft)}
.narrow{max-width:760px;margin-inline:auto}
.center{text-align:center}

/* ── 타이포 ── */
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);font-weight:800;
  line-height:1.14;letter-spacing:-.01em;margin:0;text-wrap:balance}
.band-dark h1,.band-dark h2,.band-dark h3,.band-dark h4{color:var(--on-char)}
/* 역할별 타이포 규칙: 메인카피 60 / 섹션명 40 / 서브카피 18, 자간 1px, 행간 1.3 */
.h-display{font-size:clamp(34px,6vw,60px);line-height:1.3;letter-spacing:1px}
.h1{font-size:var(--fs-h1)}
.h2{font-size:clamp(28px,4.4vw,40px);letter-spacing:1px}
.h3{font-size:var(--fs-h3);font-weight:700}
.lead{font-size:18px;line-height:1.3;letter-spacing:1px;color:var(--ink-soft);text-wrap:pretty}
.cap{font-size:var(--fs-cap);color:var(--ink-faint)}
.sm{font-size:var(--fs-sm)}

/* 섹션명 라벨(키커) — 규칙: 앞 장식선(짝대기) 제거 */
.overline{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);
  font-size:var(--fs-over);font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--red)}
.overline.center-line{justify-content:center}

.serif{font-family:var(--serif)}
.accent{color:var(--red)}
.mt-s{margin-top:12px}.mt-m{margin-top:20px}.mt-l{margin-top:36px}.mt-xl{margin-top:56px}

/* ── 버튼 (3상태) ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-size:var(--fs-sm);font-weight:700;line-height:1;
  padding:15px 26px;border-radius:var(--radius-sm);border:1.5px solid transparent;
  cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease),
  border-color .2s var(--ease),transform .12s var(--ease),box-shadow .2s var(--ease);
  will-change:transform}
.btn svg{width:17px;height:17px}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 6px 18px rgba(193,18,31,.28)}
.btn-primary:hover{background:var(--red-deep);transform:translateY(-2px);box-shadow:0 10px 26px rgba(193,18,31,.34)}
.btn-primary:focus-visible{outline:none;box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--red)}
.btn-primary:active{transform:translateY(0) scale(.985)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-line:hover{border-color:var(--ink);background:rgba(26,21,18,.04)}
.btn-line:focus-visible{outline:none;box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--ink)}
.btn-line:active{transform:scale(.985)}
.band-dark .btn-line{color:var(--on-char);border-color:var(--line-on-char)}
.band-dark .btn-line:hover{border-color:var(--on-char);background:rgba(243,233,218,.06)}
.btn-lg{padding:18px 34px;font-size:var(--fs-body)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.btn-row.center{justify-content:center}

/* ── 신뢰 pill ── */
.pill{display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
  background:rgba(243,233,218,.08);border:1px solid var(--line-on-char);
  border-radius:999px;padding:10px 20px;font-size:var(--fs-cap);color:var(--on-char-soft)}
.pill .dot{width:4px;height:4px;border-radius:50%;background:var(--red)}
.pill b{color:var(--on-char);font-weight:700}
.band:not(.band-dark) .pill{background:#fff;border-color:var(--line);color:var(--ink-faint)}
.band:not(.band-dark) .pill b{color:var(--ink)}

/* ── 통계 ── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden}
.stat{background:var(--paper);padding:30px 22px;text-align:center}
.band-dark .stats{background:var(--line-on-char);border-color:var(--line-on-char)}
.band-dark .stat{background:var(--char)}
.stat-num{font-family:var(--num);font-size:var(--fs-num);color:var(--ink);
  line-height:1;font-weight:800;font-feature-settings:"tnum" 1;letter-spacing:-.01em;white-space:nowrap}
.band-dark .stat-num{color:var(--on-char)}
.stat-num .u{font-size:.42em;color:var(--red);margin-left:3px;font-weight:800}
.stat-label{font-family:var(--sans);font-size:var(--fs-cap);color:var(--ink-faint);
  margin-top:12px;letter-spacing:.02em}
.band-dark .stat-label{color:var(--on-char-soft)}

/* ── 카드 ── */
.grid{display:grid;gap:22px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:30px;box-shadow:var(--shadow);transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card .num-tag{font-family:var(--num);font-size:var(--fs-h3);color:var(--red);font-weight:800}
.card h3{margin-top:14px}
.card p{margin:10px 0 0;font-size:var(--fs-sm);color:var(--ink-soft)}
.icon-badge{width:48px;height:48px;border-radius:12px;background:var(--red-tint);
  display:grid;place-items:center;color:var(--red)}
.icon-badge svg{width:24px;height:24px}

/* ── 이미지 프롬프트 슬롯 (실제 이미지 대신 들어갈 이미지 설명 표시) ── */
.imgslot{position:relative;border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(150deg,#2A211A,#1B1410);color:var(--on-char-soft);
  border:1px solid var(--line-on-char);display:flex;flex-direction:column;
  justify-content:flex-end;padding:22px;min-height:220px;isolation:isolate}
.imgslot::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:radial-gradient(circle at 1px 1px,rgba(243,233,218,.10) 1px,transparent 0);
  background-size:22px 22px}
.imgslot .slot-top{position:absolute;top:16px;left:18px;right:18px;display:flex;
  align-items:center;justify-content:space-between;gap:10px}
.imgslot .slot-ico{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-over);
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--on-char-soft)}
.imgslot .slot-ico svg{width:16px;height:16px;color:var(--red)}
.imgslot .slot-file{font-family:var(--num);font-size:var(--fs-cap);color:var(--on-char);
  background:rgba(193,18,31,.9);padding:3px 10px;border-radius:6px;font-feature-settings:"tnum" 1}
.imgslot .slot-desc{font-size:var(--fs-sm);line-height:1.5;color:var(--on-char);max-width:44ch}
.imgslot .slot-ratio{font-size:var(--fs-cap);color:var(--on-char-soft);margin-top:6px}
.imgslot.tall{min-height:420px}
.imgslot.hero{min-height:clamp(360px,52vh,560px)}
.imgslot.wide{min-height:300px}

/* ── 스텝 / 타임라인 ── */
.step{display:flex;gap:22px;align-items:flex-start;padding:26px 0;border-top:1px solid var(--line-soft)}
.step:first-child{border-top:0}
.step-n{flex:0 0 auto;font-family:var(--num);font-size:var(--fs-h2);color:var(--red);
  font-weight:800;line-height:1;width:64px;font-feature-settings:"tnum" 1}
.step-b h3{margin:0}
.step-b p{margin:8px 0 0;font-size:var(--fs-sm)}

/* ── 표 (수익성/비용) ── */
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-sm);
  background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.tbl caption{caption-side:top;text-align:left;font-family:var(--serif);color:var(--ink);
  font-size:var(--fs-h3);font-weight:700;margin-bottom:14px}
.tbl th,.tbl td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line-soft)}
.tbl thead th{background:var(--char);color:var(--on-char);font-weight:700;font-size:var(--fs-cap);
  letter-spacing:.04em}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl td.num,.tbl th.num{text-align:right;font-family:var(--num);font-feature-settings:"tnum" 1;
  color:var(--ink);font-weight:700}
.tbl tr.total td{background:var(--red-tint);color:var(--ink);font-weight:800}
.tbl tr.total td.num{color:var(--red);font-size:var(--fs-body)}

/* ── 폼 ── */
.form{background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:clamp(24px,4vw,44px);box-shadow:var(--shadow-lg)}
.field{margin-bottom:20px}
.field label{display:block;font-size:var(--fs-sm);font-weight:700;color:var(--ink);margin-bottom:8px}
.field label .req{color:var(--red);margin-left:3px}
.field input,.field select,.field textarea{width:100%;font-family:var(--sans);font-size:16px;
  color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:var(--radius-sm);
  padding:14px 16px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red);
  box-shadow:0 0 0 3px var(--red-tint)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;inset:0}
.chip span{display:inline-block;padding:10px 16px;border:1.5px solid var(--line);border-radius:999px;
  font-size:var(--fs-sm);color:var(--ink-soft);transition:all .18s var(--ease)}
.chip input:checked+span{background:var(--red);color:#fff;border-color:var(--red)}
.chip input:focus-visible+span{box-shadow:0 0 0 3px var(--red-tint)}

/* ── 토스트 ── */
.toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:var(--paper);padding:15px 26px;border-radius:12px;
  font-size:var(--fs-sm);font-weight:600;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease);z-index:120;display:flex;align-items:center;gap:10px}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast svg{width:18px;height:18px;color:#6ee7a8}

/* ── 헤더 ── */
.site{position:sticky;top:0;z-index:100;background:rgba(247,241,231,.86);
  backdrop-filter:saturate(150%) blur(12px);border-bottom:1px solid var(--line-soft)}
.site .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{font-family:var(--serif);font-size:20px;font-weight:800;color:var(--ink);letter-spacing:.02em}
.brand .mark{color:var(--red)}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-size:var(--fs-sm);font-weight:600;color:var(--ink-soft);position:relative;padding:4px 0}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--ink)}
.nav-links a.active::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:2px;background:var(--red)}
.nav-cta{display:flex;align-items:center;gap:14px}
.burger{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:10px;
  background:transparent;cursor:pointer;place-items:center;color:var(--ink)}
.burger svg{width:22px;height:22px}

/* ── 히어로 ── */
.hero{position:relative;overflow:hidden;background:var(--char);color:var(--on-char)}
.hero-img{position:absolute;inset:0;z-index:0}
/* 음식은 이미지 좌측 → 텍스트 우측 배치, 오버레이 다크를 우측(텍스트 뒤)에 */
.hero-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(20,15,11,.05) 0%,rgba(20,15,11,.16) 32%,rgba(20,15,11,.66) 50%,rgba(20,15,11,.94) 74%,rgba(20,15,11,.97) 100%)}
.hero .wrap{position:relative;z-index:2;padding-top:clamp(70px,10vw,120px);padding-bottom:clamp(70px,10vw,120px)}
.hero-inner{max-width:620px;margin-left:auto}
@media (max-width:760px){
  .hero-img::after{background:linear-gradient(180deg,rgba(20,15,11,.5) 0%,rgba(20,15,11,.82) 100%)}
  .hero-inner{margin-left:0}
}
.hero h1{color:var(--on-char)}
.hero .lead{color:var(--on-char-soft)}

/* ── CTA 밴드 ── */
.cta-band{background:var(--red);color:#fff;text-align:center}
.cta-band h2{color:#fff}
.cta-band .lead{color:rgba(255,255,255,.9)}
.cta-band .btn-primary{background:#fff;color:var(--red);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.cta-band .btn-primary:hover{background:var(--paper);color:var(--red-deep)}
.cta-band .btn-line{color:#fff;border-color:rgba(255,255,255,.5)}
.cta-band .btn-line:hover{border-color:#fff;background:rgba(255,255,255,.1)}

/* ── 푸터 ── */
.foot{background:var(--char-2);color:var(--on-char-soft);padding:56px 0 40px}
.foot .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
.foot .brand{color:var(--on-char)}
.foot a{color:var(--on-char-soft)}.foot a:hover{color:var(--on-char)}
.foot h4{font-family:var(--sans);font-size:var(--fs-cap);letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-char);margin:0 0 14px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:var(--fs-sm)}
.foot .legal{grid-column:1/-1;border-top:1px solid var(--line-on-char);margin-top:12px;padding-top:22px;
  font-size:var(--fs-cap);color:var(--on-char-soft);line-height:1.7}
.foot .disc{color:#b98;font-size:var(--fs-cap)}

/* ── 리빌 애니메이션 (블러업) ── */
.fi{opacity:0;transform:translateY(24px);filter:blur(8px);
  transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease)}
.fi.on{opacity:1;transform:none;filter:none}
.fi.d1{transition-delay:.09s}.fi.d2{transition-delay:.18s}.fi.d3{transition-delay:.27s}.fi.d4{transition-delay:.36s}

/* ── 프리미엄 FX ─────────────────────────────────────────────── */
/* 스크롤 진행바 */
.scroll-prog{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--red),#E0483F);box-shadow:0 0 12px rgba(193,18,31,.5);
  transition:width .1s linear}

/* 헤더 스크롤 축소 */
.site{transition:height .3s var(--ease),background-color .3s var(--ease),box-shadow .3s var(--ease)}
.site.scrolled{background:rgba(247,241,231,.95);box-shadow:0 4px 24px rgba(26,21,18,.09)}
.site.scrolled .wrap{height:56px}
.site .wrap{transition:height .3s var(--ease)}

/* 타이핑 로테이터 캐럿 */
.typer-caret{display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;
  background:currentColor;animation:caret-blink 1s steps(2) infinite}
@keyframes caret-blink{0%,50%{opacity:1}50.1%,100%{opacity:0}}

/* 마스크 리빌(헤딩) — 줄 단위 슬라이드업 */
.mask-reveal{overflow:hidden}
.mask-reveal > *{display:inline-block;transform:translateY(115%);opacity:0;
  transition:transform .9s var(--ease),opacity .9s var(--ease)}
.mask-reveal.on > *{transform:none;opacity:1}

/* 마그네틱 버튼 / 카드 틸트: JS가 transform 조작 */
.btn{will-change:transform}
.tilt{transform-style:preserve-3d;transition:transform .25s var(--ease)}

/* 스탯 롤링 숫자: JS가 값 갱신, 살짝 팝 */
.stat-num.rolled{animation:num-pop .5s var(--ease)}
@keyframes num-pop{0%{transform:scale(.96)}60%{transform:scale(1.03)}100%{transform:scale(1)}}

/* 마퀴(롤링 리본) */
.marquee{background:var(--char);color:var(--on-char-soft);overflow:hidden;
  border-block:1px solid var(--line-on-char);padding:14px 0}
.marquee-track{display:flex;align-items:center;width:max-content;
  animation:marquee 30s linear infinite;will-change:transform}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{font-size:var(--fs-h3);font-weight:600;white-space:nowrap;padding:0 26px;letter-spacing:.5px}
.marquee span.sep{color:var(--red);padding:0 2px;font-weight:800}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media (prefers-reduced-motion:reduce){
  .fi{opacity:1;transform:none;filter:none;transition:none}
  .mask-reveal > *{transform:none;opacity:1}
  .scroll-prog,.typer-caret{display:none}
  .tilt{transform:none !important}
  .marquee-track{animation:none;transform:translateX(0)}
}

/* ── 섹션 헤더 ── */
.sec-head{max-width:640px;margin-bottom:clamp(36px,5vw,60px)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head .h2{margin-top:16px}
.sec-head .lead{margin-top:16px}

/* ── 반응형 ── */
@media (max-width:900px){
  .foot .wrap{grid-template-columns:1fr 1fr}
  .g-4{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .nav-links,.nav-cta .btn{display:none}
  .burger{display:grid}
  .site .wrap{height:60px}
  .nav-open .nav-links{display:flex;position:absolute;top:60px;left:0;right:0;flex-direction:column;
    align-items:flex-start;gap:0;background:var(--paper);border-bottom:1px solid var(--line);padding:8px 0}
  .nav-open .nav-links a{padding:14px var(--gut);width:100%}
  .g-2,.g-3{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .foot .wrap{grid-template-columns:1fr}
  .step{gap:14px}.step-n{width:44px;font-size:var(--fs-h3)}
}
@media (max-width:480px){
  .stats{grid-template-columns:1fr}
  .g-4{grid-template-columns:1fr}
}