/* ============================================================
   화목한감자탕 — 디자인 헌법 (Design Constitution)
   hwamok-base.css  ·  모든 페이지가 공유하는 단일 소스
   이 파일의 값이 곧 규격이다. 페이지에서 임의로 폰트 크기/여백을
   재정의하지 말 것. 변경이 필요하면 반드시 이 파일에서 바꾼다.
   ============================================================ */

/* ---------- 1. 토큰 (TOKENS) ---------- */
:root{
  /* 색 (고정) */
  --black:#140C07; --base:#1E120B; --card:#2B1A10; --line:#3A2A1E;
  --amber:#D9772A; --amber-hi:#E8924A; --red:#C0392B; --red-hi:#A8321F;
  --cream:#F4ECE0; --muted:#C9BBA6; --faint:rgba(201,187,166,.5);

  /* 글꼴 */
  --serif:'Nanum Myeongjo',serif;          /* 헤드라인 */
  --sans:'Noto Sans KR',sans-serif;        /* 본문 */
  --brush:'Gugi',cursive;                  /* 워드마크 전용 */

  /* 타입 스케일 — 크기는 전부 여기서만 정의 (clamp = 모바일~데스크탑 자동) */
  --fs-hero:    clamp(40px, 6.4vw, 84px);  /* 메인 히어로 (홈·브랜드·좋은뼈·가맹안내) */
  --fs-hero-sm: clamp(34px, 4.6vw, 58px);  /* 컴팩트 히어로 (메뉴·매장·FAQ·블로그·폼) */
  --fs-h2:      clamp(28px, 3.6vw, 44px);  /* 섹션 제목 */
  --fs-h3:      clamp(18px, 1.6vw, 22px);  /* 카드/소제목 */
  --fs-stat:    clamp(38px, 5vw, 64px);    /* 대형 숫자(27년·700+·1억 등) */
  --fs-stat-sm: clamp(28px, 3.3vw, 44px);  /* 중형 숫자(팩트바/그리드 — '최고등급' 등 텍스트 혼용 칸) */
  --fs-lead:    clamp(16.5px, 1.5vw, 19px);/* 도입문(리드) */
  --fs-body:    clamp(15px, 1.1vw, 16.5px);/* 본문 */
  --fs-sm:      13.5px;                     /* 캡션/보조 */
  --fs-eyebrow: 12.5px;                     /* 오버라인(섹션 라벨) */

  /* 행간(line-height) */
  --lh-hero:1.15; --lh-h2:1.2; --lh-h3:1.32; --lh-lead:1.7; --lh-body:1.8;

  /* 자간(letter-spacing) */
  --ls-hero:-.015em; --ls-h2:-.01em; --ls-tight:-.005em; --ls-eyebrow:.26em;

  /* 여백·레이아웃 */
  --maxw:1180px;                           /* 본문 컨테이너 최대폭 */
  --read:760px;                            /* 글(블로그 본문) 가독 폭 */
  --pad-x:clamp(20px, 4vw, 28px);          /* 좌우 여백: 모바일20 → 데스크탑28 */
  --section-y:clamp(76px, 9vw, 120px);     /* 섹션 상하 여백 */
  --radius:14px;
}

/* ---------- 2. 리셋 ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--base);color:var(--muted);
  font-family:var(--sans);font-weight:300;
  font-size:var(--fs-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block}

/* ---------- 3. 한글 줄바꿈 규칙 (★ 이미지1·2 문제의 해결) ---------- */
/* 한글은 '어절' 단위로 끊어야 한다. 글자 단위로 쪼개지는 것을 전역 차단 */
body,p,h1,h2,h3,h4,li,a,span,div,blockquote,figcaption,label{
  word-break:keep-all;
  overflow-wrap:break-word;
}
/* 헤드라인은 줄을 균형 있게(고아 글자 방지), 본문은 자연스럽게 */
h1,h2,h3,.t-hero,.t-hero-sm,.t-h2,.t-h3{text-wrap:balance}
p,li,.t-lead,.t-body{text-wrap:pretty}
/* 의도된 줄바꿈 헬퍼: 데스크탑/모바일에서 <br> 켜고 끄기 */
.br-pc{display:inline}.br-mo{display:none}
@media(max-width:768px){.br-pc{display:none}.br-mo{display:inline}}

/* ---------- 4. 레이아웃 ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x)}
.read{max-width:var(--read);margin:0 auto;padding:0 var(--pad-x)}
.section{padding:var(--section-y) 0}

/* ---------- 5. 타이포 클래스 (역할별 — 페이지는 이 클래스만 쓴다) ---------- */
.eyebrow{font-family:var(--sans);font-weight:500;font-size:var(--fs-eyebrow);
  letter-spacing:var(--ls-eyebrow);line-height:1;color:var(--amber)}
.t-hero{font-family:var(--serif);font-weight:800;color:var(--cream);
  font-size:var(--fs-hero);line-height:var(--lh-hero);letter-spacing:var(--ls-hero)}
.t-hero-sm{font-family:var(--serif);font-weight:800;color:var(--cream);
  font-size:var(--fs-hero-sm);line-height:var(--lh-hero);letter-spacing:var(--ls-hero)}
.t-h2{font-family:var(--serif);font-weight:800;color:var(--cream);
  font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2)}
.t-h3{font-family:var(--serif);font-weight:700;color:var(--cream);
  font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-tight)}
.t-stat{font-family:var(--serif);font-weight:800;color:var(--amber);
  font-size:var(--fs-stat);line-height:1}
.t-stat-sm{font-family:var(--serif);font-weight:800;color:var(--amber);
  font-size:var(--fs-stat-sm);line-height:1}
.t-lead{font-family:var(--sans);font-weight:400;color:var(--muted);
  font-size:var(--fs-lead);line-height:var(--lh-lead)}
.t-body{font-family:var(--sans);font-weight:300;color:var(--muted);
  font-size:var(--fs-body);line-height:var(--lh-body)}
.t-sm{font-size:var(--fs-sm);line-height:1.6;color:var(--muted)}

/* 강조(하이라이트): 크기·굵기는 그대로, 색만 바꿔 리듬 유지 (★ 절대 크기 키우지 말 것) */
.hl{color:var(--amber)}
.hl-red{color:var(--red-hi)}
.k-cream{color:var(--cream)}
.br-mark{color:var(--faint);font-weight:400}   /* [ ] 같은 괄호 장식 */

/* ---------- 6. 공통 컴포넌트 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-weight:500;font-size:15px;padding:16px 32px;
  border-radius:5px;transition:.25s;cursor:pointer;border:1.5px solid transparent}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-hi);transform:translateY(-2px)}
.btn-amber{background:var(--amber);color:var(--black)}
.btn-amber:hover{background:var(--amber-hi);transform:translateY(-2px)}
.btn-ghost{border-color:rgba(244,236,224,.4);color:var(--cream)}
.btn-ghost:hover{border-color:var(--cream);background:rgba(244,236,224,.07)}

.seal{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  background:var(--red);color:#fff;font-family:var(--serif);font-weight:800;font-size:19px;border-radius:7px}

/* 이미지 플레이스홀더 박스 */
.ph{position:relative;overflow:hidden;
  background:radial-gradient(ellipse 70% 70% at 50% 40%,rgba(217,119,42,.26),transparent 62%),linear-gradient(160deg,#311d10,#160d07)}
.ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,12,7,.12),rgba(20,12,7,.5))}
.phcap{position:absolute;z-index:2;left:50%;bottom:11px;transform:translateX(-50%);
  font-size:10px;font-style:italic;color:rgba(244,236,224,.6);white-space:nowrap}

/* 스크롤 등장 */
.reveal{opacity:0;transform:translateY(28px);transition:.9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* CTA 보조 일러스트 (장식 — 카피 위, 절제된 크기) */
.cta-illust{display:block;margin:0 auto clamp(16px,3vw,28px);height:clamp(140px,18vw,180px);width:auto;max-width:90%}

/* ---------- 7. 내비게이션 (전 페이지 공통) ---------- */
nav{position:fixed;inset:0 0 auto 0;z-index:50;transition:.3s;padding:14px 0}
nav.solid{background:rgba(20,12,7,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:10px 0}
.nav-in{display:flex;align-items:center;justify-content:space-between}
.nav-brand{display:flex;align-items:center;gap:12px}
.nav-brand .wm{font-family:var(--brush);font-size:25px;color:var(--cream)}
.nav-logo{height:48px;width:auto;display:block}
nav.solid .nav-logo{height:40px}        /* 스크롤 시 살짝 축소 */
.nav-links{display:flex;align-items:center;gap:24px}
.nav-links a{font-size:15.5px;font-weight:500;letter-spacing:.01em;color:#D8CCBA;transition:.2s;white-space:nowrap}
.nav-links a:hover,.nav-links a.on{color:#F4ECE0}
.nav-links a.on{font-weight:700}
.nav-cta{padding:10px 22px;font-size:14px}
.burger{display:none;font-size:24px;background:none;border:none;color:var(--cream);cursor:pointer}

/* ---------- 8. 푸터 (전 페이지 공통) ---------- */
footer{background:var(--black);border-top:1px solid var(--line);padding:62px 0 38px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;margin-bottom:38px}
.foot-wm{font-family:var(--brush);font-size:27px;color:var(--cream);margin-bottom:14px}
.foot-logo{height:46px;width:auto;margin-bottom:14px}
.foot-grid p{font-size:14px;color:var(--muted);margin-bottom:5px}
.foot-col h4{font-size:12.5px;font-weight:500;letter-spacing:.1em;color:var(--amber);margin-bottom:15px}
.foot-col a{display:block;font-size:14px;color:var(--muted);margin-bottom:9px;transition:.2s}
.foot-col a:hover{color:var(--cream)}
.foot-bottom{border-top:1px solid var(--line);padding-top:22px;font-size:12.5px;color:var(--faint)}

/* ---------- 9. 플로팅 가맹문의 (전 페이지 공통) ---------- */
.float-cta{position:fixed;right:26px;bottom:26px;z-index:60;background:var(--red);color:#fff;
  padding:15px 24px;border-radius:50px;font-weight:500;font-size:15px;
  box-shadow:0 10px 30px rgba(192,57,43,.4);transition:.25s;display:flex;align-items:center;gap:8px}
.float-cta:hover{background:var(--red-hi);transform:translateY(-3px)}

/* ---------- 10. 반응형 공통 (768px = 모바일 분기) ---------- */
/* nav 전용 보조 분기: 표준 7개 항목이라 900px부터 햄버거로 전환(헌법 §3.4 그리드별 보조 분기 예외). 기본 모바일 분기 768은 유지 */
@media(max-width:900px){
  .nav-links{display:none}
  .burger{display:block}
  nav.open .nav-links{display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;top:100%;left:0;right:0;background:rgba(20,12,7,.97);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);padding:8px var(--pad-x) 16px}
  nav.open .nav-links a{padding:13px 2px;font-size:16px;border-bottom:1px solid rgba(58,42,30,.5)}
  nav.open .nav-links a:last-child{border-bottom:none}
  nav.open .nav-links .nav-cta{margin-top:12px;justify-content:center}
}
@media(max-width:768px){
  .foot-grid{grid-template-columns:1fr}
  .float-cta{left:18px;right:18px;bottom:16px;justify-content:center;border-radius:10px}
  .nav-logo{height:38px}
}

/* ---------- 11. 접근성 ---------- */
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  *{animation:none !important}
}