/* ============================================================
   katoori.css — 까투리 전용 스타일 (딥크림슨 + 골드, 다크 프리미엄 무드)
   shared/css/tokens.css · base.css · components.css 만 참조한다.
   브레이크포인트: 48rem(768px) · 64rem(1024px) 두 개만 사용.
   모션 성격: --dur-fast/--dur-base 위주, --ease-out 강한 감속(스냅).

   목차
   1. 공통 뼈대 — 다크 컨텍스트 보조 유틸, 페이지 배너, 브레드크럼, 텍스처
   2. 홈 — 풀스크린 히어로(키네틱 타이포 + 세로쓰기 + 스탬프)
   3. 홈 — 신메뉴 이벤트 배너
   4. 홈 — 다크 무드 섹션(craft/dining) 공통
   5. 홈 — 인기메뉴 프리뷰 / 가맹 유도 밴드
   6. 메뉴 페이지
   7. 브랜드소개 페이지
   8. 소식 페이지
   9. 매장안내 페이지
   10. 가맹문의 페이지
   11. 푸터 + 하단 고정 CTA 보강
   ============================================================ */

/* ---------- 1. 공통 뼈대 ---------- */

/* 다크 배경 위 보조 유틸리티 컴포넌트(고스트 버튼 등)를 재해석하기 위한 스코프 클래스.
   components.css는 라이트 배경을 기본값으로 설계되어 있어, 다크 섹션 안에서만
   테두리/텍스트 색을 --dark-* 토큰으로 오버라이드한다(하드코딩 없이 토큰만 사용). */
.on-dark .btn--ghost {
  border-color: var(--dark-line);
  color: var(--dark-text);
}
@media (hover: hover) and (pointer: fine) {
  .on-dark .btn--ghost:hover {
    border-color: var(--sub);
    color: var(--sub);
  }
}
.on-dark .t-mute { color: var(--dark-text-mute); }

/* components.css의 .menu-card__media는 <span>(인라인)에 width/padding-bottom 트릭을
   적용하는데, 인라인 요소는 position:relative만으로는 블록화되지 않아 정사각 박스가
   찌그러진다(절대/고정 포지션이나 flex·grid 자식일 때만 자동 블록화됨). 공유 파일은
   수정 금지이므로 이 1줄만 로컬에서 안전하게 오버라이드한다. */
.menu-card__media { display: block; }

/* ---------- 정렬 전수 감사 보정 ----------
   base.css는 .container에만 margin-inline:auto를 주고 .container--wide/--narrow에는
   빠져 있다. 두 클래스가 .container 없이 단독으로 쓰이는 곳(푸터, 가맹문의 표·FAQ·문의
   폼, 브랜드소개 인사말·연혁 등 사이트 전역)마다 중앙 정렬 없이 좌측 0px에 달라붙는다.
   공유 파일 대신 로컬에서 누락된 한 줄만 보정한다. */
.container--wide,
.container--narrow {
  margin-inline: auto;
}

/* .site-header__inner도 같은 "width:100%가 컨테이너 거터 계산을 덮어쓰는" 패턴이다.
   container--wide와 결합돼 있지만 components.css의 width:100%가 나중에 로드되어
   거터 없이 뷰포트 끝까지 늘어난다(로고·CTA가 화면 모서리에 딱 붙음). data-theme
   스코프로 컴포넌트 파일 수정 없이 다른 .container--wide 콘텐츠와 동일한 좌우선에
   맞춘다. */
[data-theme="katoori"] .site-header__inner {
  padding-inline: max(var(--gutter), calc((100% - var(--container-wide)) / 2));
}

/* 헤더 CTA — 필 버튼 폐기, 브랜드색 텍스트 링크로 강등(실측: 굽네·푸라닭 모두 헤더
   전용 색채움 CTA 버튼 없음 — GNB 항목과 같은 텍스트 또는 색상 하나만 다르게).
   헤더가 다크(투명, 히어로 위)/라이트(스크롤 후 흰 배경) 두 상태를 오가므로, 상태별로
   대비가 확보되는 브랜드 컬러를 각각 선택한다(다크 배경 위 딥크림슨은 저대비이므로
   골드로 대체하고, 스크롤 후 흰 배경에서는 원래 브랜드색인 크림슨으로 전환). */
.site-header__cta {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  padding-block: var(--sp-2);
  color: var(--sub);
}
.header--solid .site-header__cta { color: var(--point); }
@media (hover: hover) and (pointer: fine) {
  .site-header__cta:hover { text-decoration: underline; text-underline-offset: 0.25em; }
}

/* 다크 섹션 그레인 텍스처 — bg_texture.webp는 cover 단일 사용만 허용(타일링 금지, QA 경고) */
.bg-texture {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url("../shared/assets/img/katoori/bg_texture.webp") center / cover no-repeat;
  opacity: 0.12;
  pointer-events: none;
}

/* 섹션 경계 hairline(골드, 30% 투명도) — 생마차의 보더 정갈함을 얇은 라인 하나로 절제 재해석 */
.hairline-top { position: relative; }
.hairline-top::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--sub);
  opacity: 0.3;
}

/* 서브페이지 공통 다크 페이지 배너(풀스크린 히어로가 없는 5개 페이지 전용) */
.page-banner {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--dark-text);
  background: var(--dark-bg);
  /* 모바일 .site-header 실제 높이(4.5rem=72px)와 일치시킨다(구 4rem 값은 헤더가
     72px로 커지기 전 잔재 — 방치 시 배너 상단이 투명 헤더에 살짝 가려짐) */
  padding-top: calc(4.5rem + var(--sp-7));
  padding-bottom: var(--sp-7);
}
@media (min-width: 48rem) {
  .page-banner { padding-top: calc(var(--header-h) + var(--sp-8)); padding-bottom: var(--sp-8); }
}
/* .page-banner__inner는 마크업에서 "container page-banner__inner"로 한 요소에 결합된다.
   .container(base.css)가 만든 width:min(...)+margin-inline:auto 박스에 max-width로 폭을
   더 줄이면, auto 마진이 "컨테이너 좌측선"이 아니라 뷰포트 전체 기준으로 다시 중앙
   정렬을 계산해 콘텐츠가 화면 중앙(1440폭에서 x≈400)에 붕 떠버린다. width:100%로 그
   계산을 무효화하고, 다른 .container 섹션과 동일한 좌측 거터 공식을 padding으로 직접
   재현해 "컨테이너 좌측선" 정렬을 보장한다. */
.page-banner__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-left: max(var(--gutter), calc((100% - var(--container)) / 2));
  padding-right: var(--gutter);
}
.page-banner__inner > * { max-width: 40rem; }
.page-banner .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  margin-bottom: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--dark-text-mute);
}
.page-banner .breadcrumb a { color: var(--dark-text-mute); }
@media (hover: hover) and (pointer: fine) {
  .page-banner .breadcrumb a:hover { color: var(--sub); }
}
.page-banner h1 {
  margin-top: var(--sp-2);
  font-size: var(--fs-display);
  font-weight: var(--fw-extra);
}
.page-banner p { margin-top: var(--sp-4); color: var(--dark-text-mute); max-width: 34rem; }

/* 우측 여백의 "각인" — 골드 라인아트 모티프(motif_feather.webp)를 스크린 블렌드로 얹어
   빈 공간에 의도를 채운다(공통 원칙: 빈 공간엔 각인·모티프 등을 배치). 세로쓰기 스탬프가
   이미 있는 브랜드소개 배너에는 중복을 피해 붙이지 않는다(JS/HTML에서 선택 적용).
   원본 타일은 크림슨 바탕에 골드 선화가 그려진 불투명 이미지라, 그대로 얹으면 각인이
   아니라 붉은 사각 패치처럼 보인다. filter로 바탕색을 눌러 죽이고 사방으로 번지는
   radial mask를 써서 위/아래에 직선 경계가 생기지 않게 한다. */
.page-banner__motif { display: none; }
@media (min-width: 64rem) {
  .page-banner__motif {
    display: block;
    position: absolute;
    z-index: 1;
    right: -3rem;
    top: 50%;
    transform: translateY(-50%);
    width: 26rem;
    aspect-ratio: 1;
    background: url("../shared/assets/img/katoori/motif_feather.webp") center / 240px repeat;
    filter: saturate(0.5) brightness(0.55);
    opacity: 0.6;
    mix-blend-mode: screen;
    mask-image: radial-gradient(closest-side at 58% 50%, black 0%, transparent 100%);
    -webkit-mask-image: radial-gradient(closest-side at 58% 50%, black 0%, transparent 100%);
    pointer-events: none;
  }
}

/* 브랜드소개 페이지 배너 사이드 여백의 세로쓰기 스탬프
   (differentiation-brief 6장 4번 — 브랜드소개 지정 위치, hero-katoori__vertical과 동일한 유틸 재사용) */
.page-banner__vertical { display: none; }
@media (min-width: 64rem) {
  .page-banner__vertical {
    display: block;
    position: absolute;
    z-index: 2;
    right: var(--gutter);
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--sub);
  }
}

/* ---------- 2. 홈 — 풀스크린 히어로 ---------- */

.hero-katoori {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  color: var(--dark-text);
  background: var(--dark-bg);
  overflow: hidden;
}
.hero-katoori__media { position: absolute; inset: 0; z-index: 0; }
.hero-katoori__media img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-katoori__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, var(--dark-bg) 0%, transparent 42%),
    linear-gradient(to right, var(--dark-bg) 0%, transparent 46%);
  opacity: 0.92;
}
@media (max-width: 63.9375rem) {
  .hero-katoori__scrim {
    background:
      linear-gradient(to top, var(--dark-bg) 8%, transparent 55%),
      linear-gradient(to bottom, var(--dark-bg) 0%, transparent 30%);
  }
}

.hero-katoori__content {
  position: relative;
  z-index: 2;
  width: 100%;
  /* width:100%가 container--wide의 거터 계산을 무효화하므로 거터를 직접 확보 */
  padding-block: var(--sp-9) var(--sp-8);
  padding-inline: var(--gutter);
  max-width: calc(40rem + var(--gutter) * 2);
}
.hero-katoori__sub {
  margin-top: var(--sp-5);
  max-width: 30rem;
  font-size: var(--fs-lg);
  color: var(--dark-text-mute);
}
.hero-katoori__cta {
  margin-top: var(--sp-7);
}

/* 세로쓰기 슬로건 — 전통 간판 스탬프 포인트(사이트 전체에서 이 1곳에만 사용) */
.hero-katoori__vertical {
  display: none;
}
@media (min-width: 64rem) {
  .hero-katoori__vertical {
    display: block;
    position: absolute;
    z-index: 2;
    right: var(--gutter);
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--dark-text-mute);
  }
}

.hero-katoori__scroll-cue {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: var(--sp-5);
  transform: translateX(-50%);
  width: 1.5rem;
  height: 1.5rem;
  color: var(--dark-text-mute);
  animation: heroScrollCue 1.8s var(--ease-in-out) infinite;
}
@keyframes heroScrollCue {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.5; }
  50% { transform: translate(-50%, 8px); opacity: 1; }
}

/* ---------- 3. 홈 — 신메뉴 이벤트 배너 ---------- */

.banner-event {
  position: relative;
  background: var(--dark-bg);
}
.banner-event__media {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.banner-event__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 22% center;
}
.banner-event__content {
  position: relative;
  z-index: 1;
  padding: var(--sp-7) var(--gutter);
  color: var(--dark-text);
  display: grid;
  gap: var(--sp-3);
  justify-items: start;
}
.banner-event__content .badge { margin-bottom: var(--sp-1); }
.banner-event__content p { color: var(--dark-text-mute); max-width: 30rem; }
.banner-event__content .btn { margin-top: var(--sp-3); }

@media (min-width: 64rem) {
  .banner-event__media { position: absolute; inset: 0; aspect-ratio: auto; }
  /* 접근성: 데스크탑에서는 텍스트가 사진 위에 스크림 없이 직접 얹혀 사진 내용에 따라
     대비가 보장되지 않았다. mood-section__scrim과 동일한 방식(다크 토큰 그라데이션)으로
     텍스트가 앉는 우측에만 스크림을 넣어 --dark-text/--dark-text-mute 대비를 항상 확보한다. */
  .banner-event__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to left, var(--dark-bg) 8%, transparent 60%);
    opacity: 0.85;
  }
  .banner-event__content {
    margin-left: auto;
    width: min(30rem, 46%);
    min-height: 28rem;
    justify-content: center;
    padding: var(--sp-8) var(--gutter);
    background: none;
  }
}

/* ---------- 4. 홈 — 다크 무드 섹션(craft / dining) 공통 ---------- */

.mood-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--dark-text);
  background: var(--dark-bg);
}
.mood-section__media {
  position: absolute;
  inset: -8% 0;
  z-index: 0;
  will-change: transform;
}
.mood-section__media img { width: 100%; height: 100%; object-fit: cover; }
.mood-section__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* 모바일: 본문이 전체 폭을 차지하므로 상하 비네트로만 사진 무드를 살린다 */
  background: linear-gradient(to bottom, var(--dark-bg) 0%, transparent 32%, transparent 62%, var(--dark-bg) 100%);
  opacity: 0.74;
}
@media (min-width: 48rem) {
  .mood-section__scrim {
    /* 데스크탑: 텍스트가 앉는 쪽(기본 좌측)만 짙게, 반대쪽은 옅게 남겨 사진을 살린다 */
    background:
      linear-gradient(to bottom, var(--dark-bg) 0%, transparent 26%),
      linear-gradient(to right, var(--dark-bg) 6%, transparent 62%);
    opacity: 0.8;
  }
  .mood-section--right .mood-section__scrim {
    background:
      linear-gradient(to bottom, var(--dark-bg) 0%, transparent 26%),
      linear-gradient(to left, var(--dark-bg) 6%, transparent 62%);
  }
}
.mood-section__content {
  position: relative;
  z-index: 2;
  max-width: 34rem;
}
.mood-section__content > * + * { margin-top: var(--sp-4); }
.mood-section__content .btn { margin-top: var(--sp-6); }
.mood-section--right .mood-section__content { margin-left: auto; text-align: right; }

/* ---------- 5. 홈 — 인기메뉴 프리뷰 / 가맹 유도 밴드 ---------- */

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-7);
}
.section-head p.t-mute { margin-top: var(--sp-3); max-width: 32rem; }

.franchise-cta__inner {
  display: grid;
  gap: var(--sp-7);
}
@media (min-width: 64rem) {
  .franchise-cta__inner {
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
    gap: var(--sp-9);
  }
}
.franchise-cta__text p.t-mute { margin-top: var(--sp-4); max-width: 34rem; }
.franchise-cta__text .btn { margin-top: var(--sp-6); }

/* 가맹 통계 3단 구조 — 라벨(작게) → 기준시점(더 작게·뮤트) → 숫자(크게, 브랜드색,
   G마켓산스). 모바일은 auto-fit 대신 1열로 고정해 큰 숫자가 좁은 칸에서 줄바꿈되며
   흐트러지지 않게 한다(30rem 미만 2열+고아 1열 조합 방지). */
.franchise-cta__stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
@media (min-width: 30rem) {
  .franchise-cta__stats { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
}
.franchise-cta__stats > div {
  padding: var(--sp-5);
  background: var(--card-bg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.franchise-cta__stats dt {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text);
}
/* 접근성: --ink-mute 3.69:1 → 4.5:1 미달 보정 */
.franchise-cta__stat-note {
  font-weight: var(--fw-regular);
  color: color-mix(in srgb, var(--ink-mute) 80%, var(--ink) 20%);
}
.franchise-cta__stats dd {
  margin-top: 0.4em;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.8125rem); /* ~45px급(실측 굽네 fs45 벤치마크) */
  font-weight: var(--fw-bold); /* GmarketSans 최대 700 — 800 사용 금지 */
  color: var(--point);
  font-variant-numeric: tabular-nums;
}
.franchise-cta__stats dd span {
  margin-left: 0.2em;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  /* 접근성: --ink-mute 3.69:1 → 4.5:1 미달 보정 */
  color: color-mix(in srgb, var(--ink-mute) 80%, var(--ink) 20%);
}

/* ---------- 6. 메뉴 페이지 ---------- */

.menu-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-7);
}
/* 공유 .tabs는 width:fit-content(다크 캡슐)가 기본값인데, flex:1 1 auto를 주면 부모의
   남은 공간을 캡슐 자체가 전부 삼켜 오른쪽에 긴 여백이 붙어버린다(캡슐 형태 훼손 금지
   대상이므로 .tabs/.tab 자체는 건드리지 않고 부모 컨텍스트에서만 grow를 끈다). 비워둔
   우측 공간에는 표시 중인 메뉴 개수를 채운다. */
.menu-toolbar .tabs { flex: 0 0 auto; margin: 0; }
.menu-toolbar__count {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-overline);
  color: color-mix(in srgb, var(--ink-mute) 80%, var(--ink) 20%);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.menu-toolbar__count strong { color: var(--point); font-weight: var(--fw-bold); }

/* 메뉴 카드: 사진-정보 경계에 골드 헤어라인 + 가격 우정렬(tabular-nums, 세미볼드).
   components.css 기본값은 이름/가격이 세로로 쌓이는 좌측 정렬 그리드였다. */
.menu-card__body {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  border-top: 1px solid color-mix(in srgb, var(--sub) 45%, transparent);
}
.menu-card__name { flex: 1 1 auto; min-width: 0; }
.menu-card__price {
  flex: 0 0 auto;
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

/* 메뉴 상세 모달 사이드 여백의 세로쓰기 스탬프
   (differentiation-brief 6장 4번 — 모달 지정 위치. .modal__dialog는 max-width:40rem으로
   가운데 정렬되므로, 그 바깥 여백이 확보되는 64rem 이상에서만 노출) */
.modal__vertical { display: none; }
@media (min-width: 64rem) {
  .modal__vertical {
    display: block;
    position: absolute;
    z-index: 1;
    left: calc(100% + var(--sp-6));
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--dark-text-mute);
    text-shadow: 0 1px 8px var(--ink);
    white-space: nowrap;
  }
}

.menu-delivery-note {
  margin-top: var(--sp-8);
  padding: var(--sp-5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  /* 접근성: --ink-mute 3.69:1 → 4.5:1 미달 보정 */
  color: color-mix(in srgb, var(--ink-mute) 80%, var(--ink) 20%);
  text-align: center;
}

/* ---------- 7. 브랜드소개 페이지 ---------- */

.greeting {
  position: relative;
  display: grid;
  gap: var(--sp-5);
  padding: var(--sp-7);
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.greeting__mark {
  width: 2.5rem;
  height: 2rem;
  color: var(--sub);
}
.greeting__quote {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  font-weight: var(--fw-medium);
}
.greeting__by {
  font-size: var(--fs-sm);
  /* 접근성: --ink-mute 3.69:1 → 4.5:1 미달 보정 */
  color: color-mix(in srgb, var(--ink-mute) 80%, var(--ink) 20%);
}
.greeting__by strong { color: var(--text); font-weight: var(--fw-semibold); }

.story-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
.story-card {
  padding: var(--sp-6);
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--sp-4);
}
/* 파스텔 원형 아이콘칩 폐기(실측 벤치마크 어디에도 없는 패턴) — 이미 있던 번호를
   큰 G마켓산스 숫자로 승격해 그 자리를 대신한다 */
.story-card__num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 2vw, 2.8125rem); /* ~45px급 */
  font-weight: var(--fw-bold); /* GmarketSans 최대 700 — 800 사용 금지 */
  line-height: 1;
  color: var(--point);
  font-variant-numeric: tabular-nums;
}
.story-card p { color: var(--ink-soft); }

.ci-block {
  display: grid;
  gap: var(--sp-7);
}
@media (min-width: 48rem) {
  .ci-block { grid-template-columns: 1fr 1fr; align-items: start; }
}
.ci-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
}
.ci-swatch {
  display: grid;
  gap: var(--sp-2);
  justify-items: center;
  text-align: center;
  width: 8rem;
}
.ci-swatch__color {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.ci-swatch__color--point { background: var(--point); }
.ci-swatch__color--sub { background: var(--sub); }
.ci-swatch__color--motif {
  background-image: url("../shared/assets/img/katoori/motif_feather.webp");
  background-repeat: repeat;
  background-size: 130px 130px;
}
/* 접근성: --ink-mute 3.69:1 → 4.5:1 미달 보정 */
.ci-swatch__label { font-size: var(--fs-xs); color: color-mix(in srgb, var(--ink-mute) 80%, var(--ink) 20%); line-height: var(--lh-snug); }

.ci-rules {
  padding: var(--sp-6);
  background: var(--sub-tint);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--sp-2);
}
.ci-rules h3 { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.ci-rules ul { display: grid; gap: var(--sp-2); }
.ci-rules li {
  position: relative;
  padding-left: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}
.ci-rules li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--point);
}

/* ---------- 8. 소식 페이지 ---------- */

.board-panel { display: grid; gap: var(--sp-2); }
.board-list { margin-top: var(--sp-2); }
.board-detail {
  padding: var(--sp-7) 0;
}
.board-detail__body {
  margin-top: var(--sp-5);
  display: grid;
  gap: var(--sp-4);
  color: var(--ink-soft);
  line-height: var(--lh-body);
}
.board-detail [data-board-back] { margin-bottom: var(--sp-5); }
.board-detail__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

/* ---------- 9. 매장안내 페이지 ---------- */

.store-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}
.store-toolbar .tabs { flex: 1 1 20rem; margin: 0; }
/* QA #8 fix: 지역 탭 7개가 모바일에서 줄바꿈되면 마지막 탭("경상")만 다음 줄에 고립되어
   보였다. wrap 대신 가로 스크럽 탭바로 전환해 항상 한 줄을 유지한다(기능은 기존과 동일). */
@media (max-width: 47.9375rem) {
  .store-toolbar .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--sp-2);
  }
  .store-toolbar .tabs .tab { scroll-snap-align: start; }
}
.store-search {
  position: relative;
  flex: 0 1 18rem;
  min-width: 12rem;
  display: flex;
  align-items: center;
}
.store-search svg {
  position: absolute;
  left: 0.85rem;
  width: 1.1rem; height: 1.1rem;
  color: var(--ink-mute);
  pointer-events: none;
}
.store-search input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.7rem 1rem 0.7rem 2.6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--paper);
  font-size: var(--fs-sm);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.store-search input:focus-visible {
  border-color: var(--point);
  outline: none;
  box-shadow: 0 0 0 3px var(--point-tint);
}

.store-map {
  margin-bottom: var(--sp-7);
  aspect-ratio: 16 / 7;
  border-radius: var(--radius-md);
  background: var(--sub-tint);
  display: grid;
  place-items: center;
  /* 접근성: --ink-mute 3.69:1 → 4.5:1 미달 보정 */
  color: color-mix(in srgb, var(--ink-mute) 80%, var(--ink) 20%);
  font-size: var(--fs-sm);
  overflow: hidden;
}
/* class 선택자(.store-map)가 UA 스타일시트의 [hidden]{display:none}보다 상세도가 높아
   카카오맵 키가 없을 때 stores.js/마크업이 붙이는 hidden 속성이 무시되는 문제를 방지 */
.store-map[hidden] { display: none; }

.store-list {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
}
.store-card__body { display: grid; gap: var(--sp-3); padding: var(--sp-5); }
.store-card__body > .badge { justify-self: start; }
.store-card__addr { font-size: var(--fs-sm); color: var(--ink-soft); }
.store-card__meta { display: grid; gap: 0.35rem; margin-top: var(--sp-1); }
.store-card__meta div { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-xs); }
/* 접근성: --ink-mute 3.69:1 → 4.5:1 미달 보정 */
.store-card__meta dt { color: color-mix(in srgb, var(--ink-mute) 80%, var(--ink) 20%); }
.store-card__meta dd a { color: var(--point); font-weight: var(--fw-semibold); }

.store-empty {
  padding: var(--sp-8) 0;
  text-align: center;
  /* 접근성: --ink-mute 3.69:1 → 4.5:1 미달 보정 */
  color: color-mix(in srgb, var(--ink-mute) 80%, var(--ink) 20%);
}

/* ---------- 10. 가맹문의 페이지 ---------- */

/* 창업비용: 이전에는 container--narrow 단독 컬럼이라 넓은 화면에서 우측이 통째로 비었다.
   좌측 표 + 우측 "한눈에 보기" 골드 헤어라인 요약 카드의 2컬럼으로 균형을 맞춘다(수치는
   이미 홈 franchise-cta__stats·수익구조 섹션과 동일한 값을 재사용해 사이트 전역에서
   일관되게 강조). */
.cost-layout { display: grid; gap: var(--sp-7); }
@media (min-width: 64rem) {
  .cost-layout { grid-template-columns: 1.35fr 1fr; align-items: start; gap: var(--sp-9); }
}
.cost-layout__table { min-width: 0; }
/* 가맹 핵심 요약 — 흰 라운드 카드(AI 대시보드 패턴) 폐기.
   가맹 브로슈어식 다크 명판: 라벨 좌 · 수치 우 한 줄, 수치는 절대 줄바꿈 금지 */
.cost-layout__aside {
  align-self: start;
  padding: var(--sp-6);
  background: var(--dark-bg);
  color: var(--dark-text);
  border-radius: var(--radius-md);
  border-top: 3px solid var(--sub);
}
/* 카드 킥커 — t-overline(영문 대문자 관용) 대신 한글 라벨 전용 스타일.
   섹션 오버라인 세트(라벨+큰 제목 반복)와 달리 이 카드에 딸린 유일한 라벨이라
   골드 컬러 + 살짝의 자간만 남겨 절제된 킥커로 사용한다. */
.cost-layout__aside-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-overline);
  color: var(--sub);
}
.cost-highlights { display: grid; margin-top: var(--sp-3); }
.cost-highlights > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-top: 1px solid var(--dark-line);
}
.cost-highlights > div:first-child { border-top: 0; }
/* 라벨(위) → 기준시점(작게) → 숫자(크게, 우측) 3단 구조 — 숫자는 여전히 줄바꿈 금지 */
.cost-highlights dt {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  font-size: var(--fs-sm);
  color: var(--dark-text-mute);
}
.cost-highlights__note {
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
}
.cost-highlights dd {
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--dark-text);
  font-variant-numeric: tabular-nums;
}
.cost-highlights dd span {
  margin-left: 0.15em;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--dark-text-mute);
}

.cost-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-md);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.cost-table th, .cost-table td {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.cost-table thead th {
  background: var(--sub-tint);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-overline);
  /* 접근성: --ink-mute 3.69:1 → 4.5:1 미달 보정 */
  color: color-mix(in srgb, var(--ink-mute) 80%, var(--ink) 20%);
  font-weight: var(--fw-semibold);
}
.cost-table td { text-align: right; font-variant-numeric: tabular-nums; }
.cost-table tfoot th, .cost-table tfoot td {
  border-bottom: none;
  font-weight: var(--fw-extra);
  color: var(--point);
  font-size: var(--fs-lg);
}

.revenue-stats { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.revenue-stat {
  padding: var(--sp-6);
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.revenue-stat__value {
  font-size: var(--fs-display);
  font-weight: var(--fw-extra);
  color: var(--point);
  font-variant-numeric: tabular-nums;
}
/* 접근성: --ink-mute 3.69:1 → 4.5:1 미달 보정 */
.revenue-stat__value span { font-size: var(--fs-md); font-weight: var(--fw-medium); color: color-mix(in srgb, var(--ink-mute) 80%, var(--ink) 20%); margin-left: 0.3em; }
.revenue-stat__label { margin-top: var(--sp-2); color: var(--ink-soft); font-size: var(--fs-sm); }

.support-card { padding: var(--sp-6); display: grid; gap: var(--sp-4); }
/* 파스텔 원형 아이콘칩 폐기(실측 벤치마크 어디에도 없는 패턴) — 큰 G마켓산스
   번호(01~06)로 대체해 굽네 프로세스 스텝과 같은 "숫자로 강조" 원칙을 따른다 */
.support-card__num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 2vw, 2.8125rem); /* ~45px급 */
  font-weight: var(--fw-bold); /* GmarketSans 최대 700 — 800 사용 금지 */
  line-height: 1;
  color: var(--point);
  font-variant-numeric: tabular-nums;
}
.support-card h3 { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
/* 접근성: --ink-mute 3.69:1 → 4.5:1 미달 보정 */
.support-card p { font-size: var(--fs-sm); color: color-mix(in srgb, var(--ink-mute) 80%, var(--ink) 20%); }

.faq-list { display: grid; gap: var(--sp-3); }
.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  background: var(--card-bg);
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  font-weight: var(--fw-semibold);
  min-height: 2.75rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 1.25rem;
  font-weight: var(--fw-regular);
  color: var(--point);
  transition: transform var(--dur-fast) var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item__answer {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: var(--fs-sm);
}
.faq-item__answer .btn--text { margin-top: var(--sp-2); }

/* 모바일 .site-header 실제 높이(4.5rem)에 맞춘 앵커 스크롤 오프셋 —
   var(--header-h)만 쓰면 데스크탑 96px 기준으로 고정되어 모바일에서 여백이 붕 뜬다 */
.contact-section { scroll-margin-top: calc(4.5rem + var(--sp-5)); }
@media (min-width: 48rem) {
  .contact-section { scroll-margin-top: calc(var(--header-h) + var(--sp-5)); }
}
.contact-form-wrap {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding: var(--sp-7);
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* ---------- 11. 푸터 + 하단 고정 CTA 보강 ---------- */

.site-footer {
  background: var(--dark-bg);
  color: var(--dark-text-mute);
}
.site-footer__top {
  padding-block: var(--sp-8);
  display: grid;
  gap: var(--sp-7);
}
@media (min-width: 48rem) {
  .site-footer__top { grid-template-columns: 1.2fr repeat(2, 1fr); gap: var(--sp-8); }
}
.site-footer__brand { display: grid; gap: var(--sp-3); }
.site-footer__logo {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--dark-text);
}
.site-footer__tagline { font-size: var(--fs-sm); }
.site-footer__cross {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
}
.site-footer__cross a { color: var(--sub); font-weight: var(--fw-semibold); }
@media (hover: hover) and (pointer: fine) {
  .site-footer__cross a:hover { text-decoration: underline; }
}

.site-footer__nav h3, .site-footer__biz h3 {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-overline);
  color: var(--dark-text-mute);
  margin-bottom: var(--sp-4);
}
.site-footer__nav ul { display: grid; gap: var(--sp-3); }
.site-footer__nav a { font-size: var(--fs-sm); color: var(--dark-text); }
@media (hover: hover) and (pointer: fine) {
  .site-footer__nav a:hover { color: var(--sub); }
}

.site-footer__biz { font-size: var(--fs-xs); line-height: var(--lh-body); display: grid; gap: 0.3em; }

.site-footer__bottom {
  padding-block: var(--sp-5);
  border-top: 1px solid var(--dark-line);
  font-size: var(--fs-xs);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: space-between;
}