/* 본가왕뼈감자탕 가맹 홈페이지 — 공통 틀
   기준: 브이웍스 시안(1920px). PC는 시안과 같게, 768px 이하는 한 줄로 내려오는 휴대폰 배치.
   색은 시안에서 뽑은 값. 구역 전용 색은 .sNN { --x: … } 로 구역 안에서만 정의한다. */
:root {
  --c-green: #00532f;
  --c-green-deep: #022f1b;
  --c-green-dark: #08321f;
  --c-bar: #014127;
  --c-gold: #e2c878;
  --c-gold-light: #f3e3a6;
  --c-gold-deep: #b8913a;
  --c-cream: #f9f2d6;
  --c-cream-2: #faf5e2;
  --c-khaki: #dbc87b;
  --c-khaki-light: #e9d78d;
  --c-black: #111111;
  --c-footer: #070707;
  --c-ink: #1a1a1a;
  --c-white: #ffffff;
  --c-gray: #6b6b6b;

  --f-display: "Noto Serif KR", "Batang", serif;
  --f-body: "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;

  --wrap: 1440px;
  --gutter: 20px;
  --bar-h: 64px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: anywhere;
  padding-bottom: var(--bar-h);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }

.sec { position: relative; overflow: hidden; }
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.disp { font-family: var(--f-display); font-weight: 900; letter-spacing: -0.02em; line-height: 1.25; text-wrap: balance; }
.num { font-family: var(--f-body); font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.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; }

@media (max-width: 768px) {
  body { font-size: 15px; }
  :root { --bar-h: 58px; }
}

/* ---------- 움직임: 내용은 처음부터 보이고, 화면에 들어오면(.in) 살짝 움직인다 ---------- */
@keyframes rise { from { transform: translateY(28px); } to { transform: none; } }
@keyframes pop { 0% { transform: scale(.82); } 70% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes slideL { from { transform: translateX(-60px); } to { transform: none; } }
@keyframes slideR { from { transform: translateX(80px); } to { transform: none; } }
.js [data-anim="rise"].in { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
.js [data-anim="pop"].in { animation: pop .6s ease-out both; }
.js [data-anim="slideL"].in { animation: slideL .8s cubic-bezier(.2,.7,.2,1) both; }
.js [data-anim="slideR"].in { animation: slideR .9s cubic-bezier(.2,.7,.2,1) both; }

/* ---------- 검토 표시 (시안 확인용, 실제 오픈 전 base.js 의 REVIEW 를 false 로) ----------
   data-add="출처"   : 브이웍스에 없던 추가 블록 (초록 점선)
   data-note="내용"  : 본사 확인·오류 수정·손봄이 필요한 곳 (주황 꼬리표)
   data-stop="내용"  : 근거 받기 전 게시 금지 (빨강 꼬리표)
   data-hf="계획"    : 힉스필드로 만들 자리 (보라 꼬리표) */
.review [data-add] { outline: 3px dashed #1f9d55; outline-offset: -3px; position: relative; }
.review [data-add]::before { content: "추가 · " attr(data-add); position: absolute; z-index: 40; top: 6px; left: 6px; max-width: calc(100% - 12px); background: #1f9d55; color: #fff; font: 700 12px/1.4 var(--f-body); padding: 3px 8px; border-radius: 4px; pointer-events: none; }
.review [data-note], .review [data-stop], .review [data-hf] { position: relative; }
.review [data-note]::after, .review [data-stop]::after, .review [data-hf]::after { position: absolute; z-index: 41; right: 0; bottom: 100%; transform: translateY(-2px); font: 700 11px/1.35 var(--f-body); padding: 2px 7px; border-radius: 4px; white-space: normal; width: max-content; max-width: 260px; text-align: left; letter-spacing: 0; text-shadow: none; pointer-events: none; }
.review [data-note]::after { content: "확인 · " attr(data-note); background: #f2c14e; color: #3a2a00; }
.review [data-stop]::after { content: "게시 금지 · " attr(data-stop); background: #c62828; color: #fff; }
.review [data-hf]::after { content: "힉스필드 · " attr(data-hf); background: #6d3fc0; color: #fff; }
.review-toggle { position: fixed; z-index: 100; right: max(12px, env(safe-area-inset-right, 0px)); top: max(12px, env(safe-area-inset-top, 0px)); font: 700 13px/1 var(--f-body); background: #1a1a1a; color: #fff; border: 2px solid #f2c14e; border-radius: 999px; padding: 9px 14px; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.review-toggle:focus-visible { outline: 3px solid #f2c14e; outline-offset: 2px; }
@media (max-width: 1024px) {
  .review-toggle { top: auto; right: auto; left: max(10px, env(safe-area-inset-left, 0px)); bottom: calc(var(--bar-h) + 10px + env(safe-area-inset-bottom, 0px)); font-size: 12px; padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}