/* 한칸정육 — 동네 정육점 디자인 샘플 (디코랩)
   구성: 냉장 진열장 칸 + 가격표 꽂이. 섹션 하나 = 진열장 한 칸, 섹션 제목 = 칸 앞에 꽂힌 가격표.
   색은 가게 실물에서: 흰 타일 벽, 매직 잉크, 등급 판정 도장 보라, 시장 POP 노랑, 냉장 진열장 찬 조명, 스테인리스, 초록 칸막이(바란), 칠판 */
:root {
  --color-tile: #F5F4EF;      /* 배경 — 흰 타일 벽 */
  --color-grout: #E5E2D9;     /* 타일 줄눈 */
  --color-ink: #24222A;       /* 본문 글자·선 — 매직 잉크 */
  --color-muted: #5C5965;
  --color-chill: #4E6470;     /* theme-color — 냉장 진열장 스테인리스 그늘의 청회색 (가게 도장·로고·안내 강조) */
  --color-pop-deep: #F5D320;  /* 주 버튼 hover */
  --color-pop: #FFE45C;       /* 주 버튼(전화 주문) — 시장 POP 가격표 노랑 */
  --color-card: #FFFDF6;      /* 흰 가격표·메모지 */
  --color-cold: #EEF4F4;      /* 진열장 안 — 찬 조명 */
  --color-cold-dim: #DCE2E3;  /* 불 꺼진 진열장 */
  --color-steel: #B9C0C6;     /* 스테인리스 */
  --color-steel-dark: #8B949B;
  --color-baran: #3F9A58;     /* 초록 칸막이(바란) */
  --color-board: #26332B;     /* 칠판 */
  --color-wood: #9C7650;      /* 칠판 나무틀 */
  --color-chalk: #F1EFE6;
  --color-chalk-yellow: #F2D76A;
  --color-lean: #CF736B;      /* 그림 속 살코기 */
  --color-fat: #F7EBDD;       /* 그림 속 지방 */

  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui,
          "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-hand: "East Sea Dokdo", var(--font);   /* 시장 가격표 손글씨 — 같은 px 에서 작게 보여 크게 쓴다 */

  --fs-h1: clamp(3.1rem, 2rem + 4.4vw, 5.8rem);
  --fs-h2: clamp(2.7rem, 2.1rem + 2.4vw, 3.9rem);
  --fs-h3: 1.2rem;
  --fs-body: 1.0625rem;
  --fs-small: .875rem;

  --header-h: 62px;
  --gutter: 18px;
  --bay-pad: clamp(16px, 3vw, 36px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 14px); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--color-ink);
  background-color: var(--color-tile);
  /* 흰 타일 줄눈 (가로로 긴 타일) */
  background-image: linear-gradient(var(--color-grout) 1.5px, transparent 1.5px), linear-gradient(90deg, var(--color-grout) 1.5px, transparent 1.5px);
  background-size: 72px 36px;
  word-break: keep-all;
  overflow-wrap: anywhere;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { line-height: 1.25; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
em, i { font-style: normal; }
[hidden] { display: none !important; }
.nowrap { white-space: nowrap; }
.br-pc { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.container { width: min(1200px, 100% - var(--gutter) * 2); margin-inline: auto; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--color-ink); color: #fff; border-radius: 8px; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--color-chill); outline-offset: 3px; }

/* 실제 정보 자리 */
.ph { display: inline-block; padding: 0 .4em; border: 1.5px dashed currentColor; border-radius: 5px; opacity: .85; font-size: .92em; line-height: 1.6; }

/* 샘플 안내 띠 */
.sample-banner { background: var(--color-ink); color: #E8E6EE; font-size: var(--fs-small); line-height: 1.55; }
.sample-banner__inner { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; }
.sample-banner__tag { flex: none; padding: 1px 8px; border-radius: 4px; background: var(--color-pop); color: var(--color-ink); font-weight: 700; font-size: .78rem; }
.sample-banner a { color: var(--color-pop); font-weight: 600; }

/* 헤더 — backdrop-filter 를 쓰지 않는다(스크롤 후 모바일 메뉴가 헤더 높이로 잘리는 문제) */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--color-tile); border-bottom: 3px solid var(--color-ink); }
.site-header__inner { display: flex; align-items: center; gap: 12px; height: var(--header-h); }
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; margin-right: auto; }
.logo svg { width: 38px; height: 38px; transform: rotate(-8deg); }
.logo b { font-family: var(--font-hand); font-weight: 400; font-size: 2.2rem; line-height: 1; letter-spacing: 0; }
.gnb { display: flex; align-items: center; gap: 2px; }
.gnb a { position: relative; padding: 6px 10px; text-decoration: none; font-weight: 600; font-size: .95rem; border-radius: 4px; transition: background-color .18s ease; }
.gnb a:not(.gnb__cta):hover { background: #ECE9E1; }
.gnb a.is-active:not(.gnb__cta) { background: var(--color-pop); box-shadow: inset 0 0 0 2px var(--color-ink); }
.gnb__cta { margin-left: 8px; background: var(--color-pop); color: var(--color-ink) !important; box-shadow: inset 0 0 0 2.5px var(--color-ink); padding: 8px 16px !important; border-radius: 6px !important; }
.gnb__cta:hover { background: var(--color-pop-deep) !important; }
.header-tel { display: none; width: 44px; height: 44px; border-radius: 8px; place-items: center; color: var(--color-ink); background: var(--color-pop); border: 2.5px solid var(--color-ink); }
.header-tel svg { width: 20px; height: 20px; }
.menu-toggle { display: none; width: 44px; height: 44px; border: 0; background: none; padding: 0; cursor: pointer; position: relative; }
.menu-toggle__bar, .menu-toggle__bar::before, .menu-toggle__bar::after { position: absolute; left: 10px; width: 24px; height: 2.5px; border-radius: 2px; background: var(--color-ink); content: ""; transition: transform .25s, opacity .2s; }
.menu-toggle__bar { top: 21px; }
.menu-toggle__bar::before { left: 0; top: -7px; }
.menu-toggle__bar::after { left: 0; top: 7px; }
.site-header.is-open .menu-toggle__bar { background: transparent; }
.site-header.is-open .menu-toggle__bar::before { transform: translateY(7px) rotate(45deg); }
.site-header.is-open .menu-toggle__bar::after { transform: translateY(-7px) rotate(-45deg); }

/* 버튼 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 22px; border-radius: 8px; font-weight: 700; font-size: 1.02rem; line-height: 1.3; text-decoration: none; border: 2.5px solid var(--color-ink); cursor: pointer; font-family: inherit; transition: transform .18s ease, background-color .18s ease; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
.btn--call { background: var(--color-pop); color: var(--color-ink); }
.btn--call:hover { background: var(--color-pop-deep); }
.btn--line { background: var(--color-card); color: var(--color-ink); }
.btn--line:hover { background: var(--color-pop); }
.btn--line-dark { background: var(--color-card); color: var(--color-ink); }
.btn--line-dark:hover { background: #ECE9E1; }

/* ---------- 가격표 (꽂이 집게 + 카드) ---------- */
.ptag { position: relative; display: grid; gap: 1px; padding: 8px 12px 9px; background: var(--color-card); border: 2px solid var(--color-ink); border-radius: 4px; text-align: left; line-height: 1.3; box-shadow: 0 3px 0 rgba(36,34,42,.18); }
.ptag::before { /* 가격표 꽂이 집게 */
  content: ""; position: absolute; left: 50%; top: -11px; width: 26px; height: 14px; margin-left: -13px;
  background: linear-gradient(#DCE1E5, var(--color-steel)); border: 2px solid var(--color-ink); border-radius: 4px 4px 2px 2px; }
.ptag__name { font-family: var(--font-hand); font-size: 2rem; line-height: 1; }
.ptag__use { font-size: .78rem; font-weight: 600; color: var(--color-muted); }
.ptag__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; margin-top: 4px; padding-top: 4px; border-top: 1.5px dashed rgba(36,34,42,.35); font-family: var(--font-hand); font-size: 2.1rem; line-height: 1; font-variant-numeric: tabular-nums; }
.ptag__price small { font-family: var(--font); font-size: .7rem; font-weight: 700; color: var(--color-muted); }
.ptag__price i { font-family: var(--font); font-size: .82rem; font-weight: 700; }
.ptag--pop { background: var(--color-pop); }
.ptag__price { flex-wrap: nowrap; white-space: nowrap; }
@media (max-width: 899px) {
  .case__bay a { grid-template-columns: minmax(0, .85fr) minmax(0, 1.2fr); }
  .ptag--case .ptag__name { font-size: 1.75rem; }
  .ptag--case .ptag__price { font-size: 1.85rem; }
}

/* ---------- 1. 히어로: 가게 벽 + 진열장 ---------- */
.hero { padding: 22px 0 clamp(40px, 6vw, 72px); }
.hero__grid { display: grid; gap: 26px; }
.hero__copy { order: 1; }
.case { order: 2; }
.board { order: 3; }
.hero__kicker { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 10px; padding: 3px 10px; background: var(--color-card); border: 2px solid var(--color-ink); border-radius: 4px; font-weight: 700; font-size: .9rem; transform: rotate(-1deg); }
.hero__kicker span { padding: 0 7px; border-radius: 3px; background: var(--color-chill); color: #fff; font-size: .82rem; }
.hero__title { font-family: var(--font-hand); font-weight: 400; font-size: var(--fs-h1); line-height: 1.02; letter-spacing: 0; margin-bottom: 14px; }
.hero__lead { max-width: 30em; color: #3E3B46; margin-bottom: 20px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* 오늘의 추천 칠판 */
.board { position: relative; background: var(--color-board); color: var(--color-chalk); border: 10px solid var(--color-wood); border-radius: 8px; padding: 18px 20px 20px; box-shadow: inset 0 0 0 2px rgba(0,0,0,.25); }
.board__date { font-family: var(--font-hand); font-size: 2.4rem; line-height: 1; color: var(--color-chalk-yellow); margin-bottom: 10px; }
.board__list { list-style: none; margin: 0 0 12px; padding: 0; }
.board__list li { padding: 7px 0; border-bottom: 1.5px dashed rgba(241,239,230,.28); line-height: 1.5; font-size: .98rem; color: rgba(241,239,230,.9); }
.board__list b { display: block; font-family: var(--font-hand); font-weight: 400; font-size: 1.9rem; line-height: 1.05; color: var(--color-chalk); }
.board__list em { display: inline-block; margin-left: 4px; color: var(--color-chalk-yellow); font-weight: 600; }
.board__foot { font-size: .8rem; color: rgba(241,239,230,.72); padding-right: 96px; }
.board__doodle { position: absolute; right: 12px; bottom: 10px; width: 96px; height: auto; }

/* 진열장 */
.case { position: relative; border: 3px solid var(--color-ink); border-radius: 12px; background: var(--color-steel); overflow: hidden; }
.case__rail { position: relative; height: 22px; background: linear-gradient(#DDE2E6, var(--color-steel) 60%, var(--color-steel-dark)); border-bottom: 2.5px solid var(--color-ink); }
.case__led, .bay__led { position: absolute; left: 3%; right: 3%; bottom: -6px; height: 5px; border-radius: 3px; background: #FFFEF4; z-index: 2; }
/* LED 아래로 번지는 찬 빛 — 레일 전체 폭, 내용 아래에 깔린다 */
.case__rail::after, .bay__rail::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 80px; background: linear-gradient(rgba(255,255,248,.75), rgba(255,255,248,0)); pointer-events: none; transition: opacity .4s ease .35s; }
.case__bays { list-style: none; margin: 0; padding: 0; display: grid; background: var(--color-cold); }
.case__bay { position: relative; }
.case__bay + .case__bay { border-top: 6px solid var(--color-steel); box-shadow: inset 0 2px 0 var(--color-ink); }
.case__bay a { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: 12px; padding: 16px 14px 14px; text-decoration: none; color: inherit; }
.case__meat { width: 100%; height: auto; max-width: 150px; justify-self: center; position: relative; z-index: 1; }
.case__bay .ptag { transform: rotate(-2deg); transition: transform .3s cubic-bezier(.3,1.5,.5,1); z-index: 3; }
.case__bay:nth-child(even) .ptag { transform: rotate(1.5deg); }
.case__bay a:hover .ptag, .case__bay a:focus-visible .ptag { transform: rotate(0) translateY(-3px); }
.case__bay a:focus-visible { outline-offset: -6px; }
.case::after { /* 유리 반사 */
  content: ""; position: absolute; top: 24px; right: 0; width: min(46%, 420px); height: 100%; pointer-events: none; z-index: 4;
  background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.42) 38%, rgba(255,255,255,0) 46%, rgba(255,255,255,0) 56%, rgba(255,255,255,.22) 60%, rgba(255,255,255,0) 66%); }
.case__base { position: relative; height: 34px; border-top: 2.5px solid var(--color-ink); background: repeating-linear-gradient(90deg, var(--color-steel-dark) 0 3px, var(--color-steel) 3px 14px); display: grid; place-items: center; }
.case__base span { padding: 0 10px 0 22px; background: var(--color-ink); color: #DDEFE4; font-size: .74rem; font-weight: 700; border-radius: 3px; position: relative; }
.case__base span::before { content: ""; position: absolute; left: 8px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #6EE08F; }

/* ---------- 진열장 한 칸 = 섹션 ---------- */
.section { padding: clamp(40px, 5.5vw, 68px) 0; }
.bay { position: relative; background: var(--color-cold); border: 3px solid var(--color-ink); border-radius: 12px; padding: 0 var(--bay-pad); transition: background-color .5s ease; }
.bay::before { /* 유리 반사 */
  content: ""; position: absolute; top: 24px; right: 0; width: min(36%, 360px); height: min(70%, 520px); pointer-events: none; z-index: 0; border-radius: 0 10px 0 0;
  background: linear-gradient(120deg, rgba(255,255,255,0) 32%, rgba(255,255,255,.5) 40%, rgba(255,255,255,0) 48%); }
.bay > * { position: relative; z-index: 1; }
.bay__rail { margin: 0 calc(var(--bay-pad) * -1); height: 24px; border-radius: 9px 9px 0 0; background: linear-gradient(#DDE2E6, var(--color-steel) 60%, var(--color-steel-dark)); border-bottom: 2.5px solid var(--color-ink); }
.bay > .bay__head { z-index: 3; }
.bay__lip { margin: 32px calc(var(--bay-pad) * -1) 0; height: 18px; border-radius: 0 0 9px 9px; background: linear-gradient(var(--color-steel-dark), var(--color-steel) 40%, #DDE2E6); border-top: 2.5px solid var(--color-ink); }
.bay__head { display: grid; gap: 22px; align-items: end; }
.bay__tag { position: relative; justify-self: start; margin-top: -14px; z-index: 3; padding: 10px 18px 12px; background: var(--color-card); border: 2.5px solid var(--color-ink); border-radius: 5px; box-shadow: 0 4px 0 rgba(36,34,42,.2); transform: rotate(-2deg); transform-origin: 30px 0; }
.bay__tag::before { /* 꽂이 집게 */
  content: ""; position: absolute; left: 28px; top: -16px; width: 34px; height: 18px; background: linear-gradient(#DCE1E5, var(--color-steel)); border: 2.5px solid var(--color-ink); border-radius: 5px 5px 2px 2px; }
.bay__tag--alt { background: var(--color-card); }
.bay__tag--pop { background: var(--color-pop); }
.bay__grade { font-size: .8rem; font-weight: 700; color: #4A4752; padding-bottom: 4px; border-bottom: 1.5px dashed rgba(36,34,42,.4); }
.bay__tag h2 { font-family: var(--font-hand); font-weight: 400; font-size: var(--fs-h2); line-height: 1; letter-spacing: 0; padding: 8px 0 4px; }
.bay__price { font-family: var(--font-hand); font-size: 1.9rem; line-height: 1; padding-top: 6px; border-top: 1.5px dashed rgba(36,34,42,.4); font-variant-numeric: tabular-nums; }
.bay__price small { font-family: var(--font); font-size: .74rem; font-weight: 700; color: var(--color-muted); }
.bay__lead { max-width: 36em; color: #3E3B46; }

/* 불 켜기 — 보이는 상태가 기본, has-motion 일 때만 꺼 두었다 켠다 */
.has-motion .bay:not(.is-lit) { background-color: var(--color-cold-dim); }
.has-motion .bay:not(.is-lit) .bay__led { opacity: .25; }
.has-motion .bay:not(.is-lit) .bay__rail::after { opacity: 0; }
.has-motion .bay:not(.is-lit) .bay__tag { transform: rotate(-9deg); }
.has-motion .bay.is-lit .bay__led { animation: flicker .7s steps(1, end) both; }
.has-motion .bay.is-lit .bay__tag { transition: transform .8s cubic-bezier(.3,1.7,.45,1) .25s; }
@keyframes flicker { 0% { opacity: .25; } 20% { opacity: 1; } 32% { opacity: .35; } 46% { opacity: 1; } 56% { opacity: .55; } 64%, 100% { opacity: 1; } }
.has-motion [data-hero-item] { opacity: 0; transform: translateY(16px); }
.has-motion .is-ready [data-hero-item] { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.has-motion .is-ready [data-hero-item]:nth-child(2) { transition-delay: .08s; }
.has-motion .is-ready [data-hero-item]:nth-child(3) { transition-delay: .16s; }
.has-motion .is-ready [data-hero-item]:nth-child(4) { transition-delay: .24s; }
.has-motion .hero.is-ready .case .case__led { animation: flicker .8s steps(1, end) .5s both; }

/* 트레이 (흰 법랑 + 초록 칸막이) */
.tray { list-style: none; margin: 30px 0 0; padding: 26px 14px 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 14px; background: #FDFDFB; border: 2.5px solid var(--color-ink); border-radius: 10px; position: relative; }
.tray::before { content: ""; position: absolute; left: 10px; right: 10px; top: 6px; height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12'%3E%3Cpath d='M0 12 7 0l7 12z' fill='%233F9A58'/%3E%3C/svg%3E") repeat-x left bottom / 14px 12px; }
.cut { display: grid; justify-items: center; align-content: start; }
.cut > svg { width: 100%; max-width: 170px; height: auto; }
.cut .ptag { margin-top: 2px; width: 100%; max-width: 190px; transform: rotate(-1.5deg); }
.cut:nth-child(even) .ptag { transform: rotate(1.5deg); }
.cut--note { grid-column: 1 / -1; align-content: center; }
.memo-card { position: relative; max-width: 26em; padding: 14px 18px; background: #FFF7C9; border: 2px solid var(--color-ink); border-radius: 3px; font-size: .98rem; transform: rotate(-1deg); }
.memo-card::before { content: ""; position: absolute; left: 50%; top: -10px; width: 70px; height: 18px; margin-left: -35px; background: rgba(185,192,198,.75); transform: rotate(3deg); }
.memo-card b { font-family: var(--font-hand); font-weight: 400; font-size: 1.6rem; line-height: 1; }

/* ---------- 4. 부위 찾기 ---------- */
.picker { display: grid; gap: 18px; }
.picker__group { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.picker__group legend, .picker__label { width: 100%; margin-bottom: 6px; font-weight: 800; font-size: .95rem; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 16px; border-radius: 6px; border: 2px solid var(--color-ink); background: var(--color-card); font-weight: 700; font-size: 1rem; transition: background-color .18s, color .18s; }
.chip input:checked + span { background: var(--color-ink); color: var(--color-pop); }
.chip input:focus-visible + span { outline: 3px solid var(--color-chill); outline-offset: 2px; }
.chip:hover input:not(:checked) + span { background: #FFF6BF; }
.stepper { display: inline-flex; align-items: center; border: 2px solid var(--color-ink); border-radius: 6px; background: var(--color-card); }
.stepper button { width: 48px; height: 46px; border: 0; background: none; font: inherit; font-size: 1.5rem; font-weight: 700; color: var(--color-ink); cursor: pointer; }
.stepper button:hover { background: #FFF6BF; }
.stepper button:disabled { color: #B8B5BE; cursor: default; background: none; }
.stepper output { min-width: 3.2em; text-align: center; font-family: var(--font-hand); font-size: 2.1rem; line-height: 1; border-inline: 2px solid var(--color-ink); padding: 4px 6px; }

.finder__grid { display: grid; gap: 24px; margin-top: 30px; }
.finder__left { display: grid; gap: 22px; align-content: start; }
.finder__grid > * { min-width: 0; }
.maps { display: grid; gap: 14px; align-content: start; }
.map { margin: 0; padding: 8px 10px 6px; background: #FDFDFB; border: 2.5px solid var(--color-ink); border-radius: 10px; transition: opacity .3s ease; }
.map figcaption { font-family: var(--font-hand); font-size: 1.8rem; line-height: 1.1; }
.map.is-dim { opacity: .45; }
.map__svg { width: 100%; height: auto; }
.map__head { fill: #EDE8DF; stroke: var(--color-ink); stroke-width: 2.5; stroke-linejoin: round; }
.map__eye { fill: var(--color-ink); }
.map__tail { fill: none; stroke: var(--color-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cut-area { fill: #EDE8DF; stroke: #fff; stroke-width: 2.5; stroke-dasharray: 7 4; transition: fill-opacity .3s ease; }
.map[data-animal="beef"] .cut-area.is-on { fill: url(#marble-beef); }
.map[data-animal="pork"] .cut-area.is-on { fill: url(#marble-pork); }
.cut-area.is-on.is-anim { animation: litup .6s ease both; }
@keyframes litup { from { opacity: .25; } to { opacity: 1; } }
.map__outline { fill: none; stroke: var(--color-ink); stroke-width: 3; stroke-linejoin: round; }
.map__labels text { font-family: var(--font); font-size: 16px; font-weight: 700; fill: #8A8692; text-anchor: middle; paint-order: stroke; stroke: #FDFDFB; stroke-width: 4px; stroke-linejoin: round; }
.map__labels text.sm { font-size: 13px; }
.map__labels text.is-on { fill: var(--color-ink); font-weight: 800; font-size: 18px; }
.map__labels text.sm.is-on { font-size: 14px; }
.maps__hint { font-size: .8rem; color: var(--color-muted); }

.memo__paper { position: relative; background: var(--color-card); border: 2.5px solid var(--color-ink); border-radius: 4px; padding: 20px 20px 18px; box-shadow: 0 4px 0 rgba(36,34,42,.18); }
.memo__paper::after { /* 가게 도장 */
  content: "한칸"; position: absolute; right: 16px; top: 14px; width: 54px; height: 54px; display: grid; place-items: center; border: 3px solid var(--color-chill); border-radius: 50%; color: var(--color-chill); font-weight: 800; font-size: .95rem; transform: rotate(-12deg); opacity: .85; }
.memo__label { font-size: .8rem; font-weight: 800; color: var(--color-muted); }
.memo__title { font-family: var(--font-hand); font-size: 2.3rem; line-height: 1.05; margin: 2px 64px 10px 0; }
.memo__cuts { list-style: none; margin: 0 0 12px; padding: 0; }
.memo__cuts li { padding: 6px 0; border-bottom: 1.5px dashed rgba(36,34,42,.25); font-size: .95rem; line-height: 1.55; color: #3E3B46; }
.memo__cuts b { color: var(--color-ink); margin-right: 6px; font-size: 1.02rem; }
.memo__amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-bottom: 12px; }
.memo__g { font-family: var(--font-hand); font-size: 4.2rem; line-height: .95; font-variant-numeric: tabular-nums; }
.memo__g small { font-size: 2rem; margin-left: 2px; }
.memo__calc { font-size: .88rem; font-weight: 600; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.memo__trim { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: center; padding: 10px 0; border-block: 1.5px dashed rgba(36,34,42,.25); margin-bottom: 12px; }
.memo__trim dl { margin: 0; display: grid; gap: 4px; }
.memo__trim dt { font-size: .78rem; font-weight: 800; color: var(--color-muted); }
.memo__trim dd { margin: 0; font-weight: 700; line-height: 1.45; }
.grain { width: 100%; height: auto; }
.grain__slab { fill: var(--color-lean); stroke: var(--color-ink); stroke-width: 3; }
.grain[data-animal="pork"] .grain__slab { fill: #E6A093; }
.grain__lines { fill: none; stroke: var(--color-fat); stroke-width: 2.2; stroke-linecap: round; }
.grain__across, .grain__with, .grain__cube, .grain__block { display: none; fill: none; stroke: var(--color-ink); stroke-width: 2.6; stroke-dasharray: 7 5; stroke-linecap: round; }
.grain__block { stroke-dasharray: none; stroke-width: 3.4; stroke: #F3EEDF; }
.grain[data-mode="across"] .grain__across, .grain[data-mode="with"] .grain__with, .grain[data-mode="cube"] .grain__cube, .grain[data-mode="block"] .grain__block { display: inline; }
.memo__say { margin-bottom: 14px; padding: 10px 14px; background: #EDF1F3; border-left: 4px solid var(--color-chill); border-radius: 0 6px 6px 0; }
.memo__say span { display: block; font-size: .78rem; font-weight: 800; color: var(--color-chill); }
.memo__say q { font-weight: 700; quotes: "“" "”"; }
.memo__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.memo__note { font-size: .8rem; color: var(--color-muted); line-height: 1.6; }

/* ---------- 5. 손질·포장 ---------- */
.ruler { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px 18px; padding: 18px 16px 0; background: #FDFDFB; border: 2.5px solid var(--color-ink); border-radius: 10px; position: relative; overflow: hidden; }
.ruler::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; border-top: 2.5px solid var(--color-ink);
  background: repeating-linear-gradient(90deg, var(--color-ink) 0 1.5px, transparent 1.5px 6px) top left / 100% 6px no-repeat, repeating-linear-gradient(90deg, var(--color-ink) 0 2px, transparent 2px 30px) top left / 100% 11px no-repeat, var(--color-pop); }
.ruler__item { display: grid; justify-items: start; align-content: end; gap: 2px; min-width: 70px; padding-bottom: 24px; }
.ruler__slice { display: block; width: calc(var(--mm) * var(--mmpx, 3px) + 5px); height: 104px; border: 2.5px solid var(--color-ink); border-radius: 3px; margin-bottom: 6px;
  background: linear-gradient(var(--color-fat) 0 16%, var(--color-lean) 16% 58%, var(--color-fat) 58% 64%, var(--color-lean) 64%); }
.ruler__item--block .ruler__slice { border-radius: 8px; }
.ruler__item b { font-family: var(--font-hand); font-weight: 400; font-size: 1.9rem; line-height: 1; }
.ruler__item > span:last-child { font-size: .82rem; font-weight: 600; color: var(--color-muted); }
.trim__grid { display: grid; gap: 22px; margin-top: 24px; }
.slip { background: var(--color-card); border: 2.5px solid var(--color-ink); border-radius: 4px; padding: 20px; }
.slip h3 { font-size: var(--fs-h3); margin-bottom: 8px; }
.slip__list { list-style: none; margin: 0; padding: 0; }
.slip__list li { position: relative; padding: 9px 0 9px 32px; border-bottom: 1.5px dashed rgba(36,34,42,.25); line-height: 1.55; color: #3E3B46; font-size: .97rem; }
.slip__list li:last-child { border-bottom: 0; }
.slip__list li::before { content: ""; position: absolute; left: 0; top: 11px; width: 20px; height: 20px; border: 2px solid var(--color-ink); border-radius: 3px; background: #fff; }
.slip__list li::after { content: ""; position: absolute; left: 6px; top: 13px; width: 7px; height: 12px; border: solid var(--color-chill); border-width: 0 3px 3px 0; transform: rotate(40deg); }
.slip__list b { display: block; color: var(--color-ink); }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 4px; }
.steps li { counter-increment: step; position: relative; padding: 8px 0 14px 58px; line-height: 1.6; color: #3E3B46; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 4px; width: 42px; height: 42px; display: grid; place-items: center; border: 2.5px solid var(--color-ink); border-radius: 50%; background: var(--color-pop); font-family: var(--font-hand); font-size: 1.9rem; line-height: 1; color: var(--color-ink); }
.steps li:not(:last-child)::after { content: ""; position: absolute; left: 20px; top: 48px; bottom: -6px; border-left: 2.5px dashed rgba(36,34,42,.4); }
.steps b { display: block; font-size: 1.08rem; color: var(--color-ink); }

/* ---------- 6. 선물 세트 ---------- */
.gifts { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; align-items: end; }
.gift { display: grid; justify-items: center; gap: 4px; }
.gift > svg { width: 100%; height: auto; }
.gift--l > svg { max-width: 300px; }
.gift--m > svg { max-width: 230px; }
.gift--s > svg { max-width: 170px; }
.gift__tag { width: 100%; padding: 10px 12px; background: var(--color-card); border: 2px solid var(--color-ink); border-radius: 4px; box-shadow: 0 3px 0 rgba(36,34,42,.18); transform: rotate(-1deg); }
.gift:nth-child(even) .gift__tag { transform: rotate(1deg); }
.gift__tag h3 { font-size: 1.02rem; }
.gift__tag p { font-size: .82rem; color: var(--color-muted); line-height: 1.5; }
.gift__tag .gift__price { white-space: nowrap; font-family: var(--font-hand); font-size: clamp(1.8rem, 1.5rem + 1vw, 2.2rem); line-height: 1; color: var(--color-ink); margin-top: 4px; font-variant-numeric: tabular-nums; }
.gift__price i { font-family: var(--font); font-size: .74rem; font-weight: 700; color: var(--color-muted); margin-left: 3px; }
.gift__info { margin-top: 24px; display: grid; gap: 8px; padding: 16px 18px; background: #FDFDFB; border: 2px solid var(--color-ink); border-radius: 8px; }
.gift__info b { display: block; }

/* ---------- 7. FAQ ---------- */
.faq__list { margin-top: 26px; background: #FDFDFB; border: 2.5px solid var(--color-ink); border-radius: 10px; padding: 0 18px; }
.qa + .qa { border-top: 1.5px dashed rgba(36,34,42,.3); }
.qa h3 { font-size: 1.06rem; }
.qa button { width: 100%; display: flex; justify-content: space-between; gap: 16px; align-items: center; text-align: left; padding: 18px 2px; border: 0; background: none; font: inherit; font-weight: 700; color: inherit; cursor: pointer; line-height: 1.45; }
.qa button::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 5px; border: 2px solid var(--color-ink); background: linear-gradient(var(--color-ink), var(--color-ink)) center / 12px 2.5px no-repeat, linear-gradient(var(--color-ink), var(--color-ink)) center / 2.5px 12px no-repeat; transition: transform .25s ease, background-color .2s; }
.qa button[aria-expanded="true"]::after { transform: rotate(45deg); background-color: var(--color-pop); }
.qa__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.qa__panel > div { overflow: hidden; min-height: 0; }
.qa__panel p { padding: 0 2px 18px; color: #4A4752; }
.qa h3:has(button[aria-expanded="true"]) + .qa__panel { grid-template-rows: 1fr; }

/* ---------- 8. 오시는 길 ---------- */
.visit__grid { display: grid; gap: 26px; margin-top: 26px; align-items: start; }
.hours { width: 100%; border-collapse: collapse; margin-bottom: 18px; background: #FDFDFB; border: 2.5px solid var(--color-ink); font-variant-numeric: tabular-nums; }
.hours th, .hours td { padding: 11px 14px; border-bottom: 1.5px dashed rgba(36,34,42,.25); text-align: left; }
.hours th { width: 7.5em; font-weight: 700; }
.hours td { font-weight: 600; }
.hours tr.is-today { background: var(--color-pop); }
.hours tr.is-today th::after { content: "오늘"; margin-left: 8px; padding: 1px 7px; border-radius: 3px; background: var(--color-ink); color: var(--color-pop); font-size: .72rem; vertical-align: 2px; }
.info { margin: 0 0 20px; }
.info div { display: grid; grid-template-columns: 6em 1fr; gap: 10px; padding: 9px 0; border-bottom: 1.5px solid rgba(36,34,42,.15); }
.info dt { font-weight: 700; }
.info dd { margin: 0; color: #4A4752; }
.visit__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.market-map svg { width: 100%; height: auto; border: 2.5px solid var(--color-ink); border-radius: 10px; background: #FBFAF6; }
.mm__shop { font: 400 34px var(--font-hand); fill: var(--color-ink); }
.mm__shop2 { font: 400 28px var(--font-hand); fill: var(--color-ink); }
.mm__label { font: 400 34px var(--font-hand); fill: #6E6A77; }
.mm__gate { font: 700 13px var(--font); fill: #fff; }
.mm__p { font: 800 32px var(--font); fill: #fff; }
.mm__small { font: 600 14px var(--font); fill: var(--color-ink); }
.mm__bus { font: 700 10px var(--font); fill: #fff; }

/* 푸터 */
.site-footer { background: var(--color-ink); color: #C9C6D1; font-size: var(--fs-small); padding: 40px 0 calc(40px + 64px + env(safe-area-inset-bottom)); }
.site-footer__inner { display: grid; gap: 18px; }
.site-footer__logo { font-family: var(--font-hand); font-size: 2.2rem; line-height: 1; color: #fff; margin-bottom: 10px; }
.site-footer__biz { line-height: 1.95; }
.site-footer__links { margin-top: 10px; display: flex; gap: 16px; }
.site-footer__links .strong { font-weight: 800; color: #fff; }
.site-footer__credit a { color: var(--color-pop); }

/* 모바일 하단 고정 바 */
.quickbar { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1.3fr 1fr 1fr; background: var(--color-card); border-top: 3px solid var(--color-ink); padding-bottom: env(safe-area-inset-bottom); }
.quickbar a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 58px; text-decoration: none; font-weight: 700; font-size: .95rem; }
.quickbar a + a { border-left: 1.5px solid rgba(36,34,42,.2); }
.quickbar svg { width: 20px; height: 20px; }
.quickbar__cta { background: var(--color-pop); color: var(--color-ink); }
body.nav-open .quickbar { visibility: hidden; }

/* 모바일 메뉴 */
@media (max-width: 1079px) {
  .header-tel { display: grid; }
  .menu-toggle { display: block; }
  .gnb { position: fixed; z-index: 45; left: 0; right: 0; top: var(--menu-top, var(--header-h)); bottom: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 12px var(--gutter) 40px; background: var(--color-tile); overflow-y: auto; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease, visibility 0s .2s; }
  .site-header.is-open .gnb { visibility: visible; opacity: 1; transform: none; transition: opacity .2s ease, transform .2s ease; }
  .gnb a { padding: 14px 10px; font-size: 1.1rem; border-radius: 0; border-bottom: 1.5px solid rgba(36,34,42,.15); }
  .gnb__cta { margin: 18px 0 0; text-align: center; }
}

@media (max-width: 719px) {
  .map.is-dim { display: none; }
  .hero__actions .btn { flex: 1 1 100%; }
}

@media (min-width: 720px) {
  :root { --gutter: 24px; }
  .tray { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 30px 22px 22px; gap: 34px 20px; }
  .cut--note { grid-column: span 2; }
  .gifts { grid-template-columns: 1.45fr 1.1fr 1.1fr .85fr; gap: 20px; }
  .gift__info { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .gift__info b { display: block; }
  .maps { grid-template-columns: 1fr 1fr; }
  .maps__hint { grid-column: 1 / -1; }
  .trim__grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .site-footer__inner { grid-template-columns: 1fr auto; align-items: end; }
  .picker { grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; gap: 18px 28px; }
  .picker__group--dish { grid-column: 1 / -1; }
  .picker__group--animal, .picker__group--people { grid-column: auto; }
}

@media (min-width: 900px) {
  .case__bays { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .case__bay + .case__bay { border-top: 0; border-left: 7px solid var(--color-steel); box-shadow: inset 2px 0 0 var(--color-ink); }
  .case__bay a { grid-template-columns: 1fr; justify-items: center; padding: 22px 14px 18px; gap: 10px; height: 100%; align-content: space-between; }
  .case__meat { max-width: 160px; }
  .case__bay .ptag { width: 100%; max-width: 200px; }
  .bay__head { grid-template-columns: auto minmax(0, 1fr); gap: 36px; }
  .bay__lead { padding-bottom: 6px; }
  .ruler { --mmpx: 4.5px; justify-content: space-between; padding: 24px 32px 0; }
}

@media (min-width: 1080px) {
  :root { --header-h: 74px; }
  .quickbar { display: none; }
  .site-footer { padding-bottom: 40px; }
  .br-pc { display: inline; }
  .hero { padding-top: 34px; }
  .hero__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-areas: "copy board" "case case"; column-gap: 48px; row-gap: 34px; align-items: center; }
  .hero__copy { grid-area: copy; }
  .board { grid-area: board; transform: rotate(1.2deg); }
  .case { grid-area: case; }
  .finder__grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 28px; align-items: start; }
  .memo { position: sticky; top: calc(var(--header-h) + 18px); }
  .visit__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* 동작 줄이기 — 마지막 안전망. 3단계(색·투명도 피드백)는 다시 살린다 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .case__bay a:hover .ptag { transform: none; }
  .chip span, .map, .cut-area, .qa__panel, .gnb a { transition-duration: .2s !important; }
}