/* 맛나감자탕 홈 전용 고급 디자인(TICKET_57, 오너 2026-10-29) — site/index.html 에만 연결(build.py). 다른 페이지는 site.css 그대로·움직임 없음. TICKET_63: franchise/ 도 연결.
   출처: TICKET_55/55b 시안(site/_build/premium/premium.css)의 홈 규칙 — 밝은 아이보리 테마(홈 외 쪽)는 쓰지 않음. 글꼴 Noto Serif KR 은 index.html <head> 의 Google Fonts 링크.
   팔레트: 바탕 먹밤색 #14110F · 교차 #1D1814 · 카드 #221C17 · 본문 크림 #F2EADF · 보조 #BFB2A2 · 포인트 주황 #FF9A2E(선·숫자·버튼·밑줄에만) · 구분선 rgba(242,234,223,.12)
   움직임은 home.js 가 html 에 .pm-motion 을 붙였을 때만(동작 줄이기 설정이면 안 붙음) — JS 없으면 모든 내용이 처음부터 보인다. */
:root {
  --pm-bg: #14110F; --pm-bg2: #1D1814; --pm-card: #221C17; --pm-card2: #2A221C;
  --pm-cream: #F2EADF; --pm-sub: #BFB2A2; --pm-acc: #FF9A2E; --pm-acc-tx: #FF9A2E; --pm-hair: rgba(242, 234, 223, .12);  /* --pm-acc = 선·막대·버튼 바탕, --pm-acc-tx = 주황 글자 */
  --pm-serif: "UfQ", "Noto Serif KR", "AppleMyungjo", "Batang", serif;  /* TICKET_71: 맨 앞 "UfQ" = 물음표(U+003F)만 고딕(site.css @font-face) */
  --pm-ease: cubic-bezier(.16, 1, .3, 1);
  /* site.css 토큰을 어두운 판으로 */
  --main: var(--pm-acc); --main-hover: #FFB05C; --main-tint: rgba(255, 154, 46, .12); --btn-ink: #14110F;
  --kicker: var(--pm-acc-tx); --ink: var(--pm-cream); --muted: var(--pm-sub); --soft: var(--pm-bg2); --line: var(--pm-hair);
  --head-bg: var(--pm-bg); --head-ink: var(--pm-cream);
}
html { background: var(--pm-bg); }
body { background: var(--pm-bg); color: var(--pm-cream); line-height: 1.8; }
::selection { background: var(--pm-acc); color: #14110F; }
a { color: var(--pm-cream); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--pm-cream); box-shadow: 0 0 0 6px rgba(255, 154, 46, .55); }

/* 제목 = 명조 */
h1, h2, .card h3, .stat b, .award-name, .award-years, .store-group, .hist-year h3, .menu-cards .name, .card.rs .tx .num { font-family: var(--pm-serif); }
.block h2, .page-head h1 { font-weight: 900; letter-spacing: -.035em; line-height: 1.3; }
.block h2 { font-size: clamp(28px, 3.2vw, 44px); }
.block h2::after { content: ""; display: block; width: 44px; height: 1px; margin-top: 22px; background: var(--pm-acc); }  /* 제목 아래 얇은 주황 선(장식) */
.answer { color: var(--pm-cream); font-weight: 500; font-size: 18px; margin-top: 22px; }
.src, .note, .lead, .crumbs ol, .crumbs a { color: var(--pm-sub); }

/* 머리줄: 반투명 먹색 + 흐림, 홈 첫 화면 위에서는 투명 */
.site-header { background: rgba(20, 17, 15, .78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--pm-hair); transition: background .5s ease, border-color .5s ease; }
.nav-wrap { min-height: 76px; transition: min-height .5s var(--pm-ease); }
.site-nav a { color: var(--pm-cream); font-weight: 600; letter-spacing: .02em; }
.pm-scrolled .nav-wrap { min-height: 60px; }
.pm-js body:has(.hero-full) .site-header { margin-bottom: -77px; }
.pm-js:not(.pm-scrolled) body:has(.hero-full) .site-header { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav-toggle { border: 1px solid rgba(242, 234, 223, .4); color: var(--pm-cream); }

/* 페이지 머리 */
.page-top { background: radial-gradient(120% 140% at 85% 0%, #2B2119 0%, var(--pm-bg2) 55%, var(--pm-bg) 100%); border-bottom: 1px solid var(--pm-hair); }
.page-head { padding: 72px 20px 80px; }
.page-head h1 { font-size: clamp(36px, 3vw + 22px, 64px); }
.eyebrow { background: transparent; color: var(--pm-acc-tx); border: 1px solid rgba(255, 154, 46, .6); font-weight: 700; letter-spacing: .06em; }

/* 첫 화면: 꽉 찬 사진 + 느린 확대 + 아래 짙은 그라데이션 */
.hero-full { min-height: 100vh; min-height: 100svh; background: var(--pm-bg); align-items: flex-end; }
.hero-bg img { object-position: 62% 50%; transform-origin: 60% 50%; }
.hero-bg::after { background: linear-gradient(180deg, rgba(20, 17, 15, .55) 0%, rgba(20, 17, 15, 0) 22%, rgba(20, 17, 15, .35) 55%, rgba(20, 17, 15, .96) 100%), linear-gradient(90deg, rgba(20, 17, 15, .92) 0%, rgba(20, 17, 15, .78) 38%, rgba(20, 17, 15, .2) 70%, rgba(20, 17, 15, 0) 100%); }
.hero-tx { padding-top: 160px; padding-bottom: 120px; }
.hero-tx h1 { font-size: clamp(52px, 5vw + 20px, 104px); font-weight: 900; letter-spacing: -.04em; line-height: 1.05; color: var(--pm-cream); }
.hero-tx .slogan-lockup { color: var(--pm-cream); margin-top: 18px; }
.hero-tx .lead { color: #E4DACD; font-size: 19px; margin-top: 18px; }
.proof { margin-top: 30px; gap: 10px; }
.proof a { background: rgba(20, 17, 15, .45); border: 1px solid rgba(242, 234, 223, .28); color: var(--pm-cream); font-weight: 600; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.proof a::before { width: 6px; height: 6px; }
.proof a:hover { background: rgba(20, 17, 15, .7); border-color: var(--pm-acc); }
.btns { margin-top: 36px; }
.hero-full::after { content: ""; position: absolute; left: 50%; bottom: 28px; width: 1px; height: 56px; background: linear-gradient(180deg, rgba(242, 234, 223, 0), rgba(242, 234, 223, .7)); }  /* 스크롤 유도 얇은 선(장식) */

/* 버튼 */
.btn { padding: 15px 30px; font-weight: 700; letter-spacing: .02em; transition: box-shadow .5s ease, background .3s ease, transform .3s ease, border-color .3s ease; }
.btn-main { background: var(--pm-acc); color: #14110F; }
.btn-main:hover { background: #FFA947; box-shadow: 0 0 0 6px rgba(255, 154, 46, .14), 0 10px 40px rgba(255, 154, 46, .45); transform: translateY(-1px); }
.btn-sub, .btn-line, .hero-tx .btn-sub { background: transparent; color: var(--pm-cream); border: 1px solid rgba(242, 234, 223, .75); }
.btn-sub:hover, .btn-line:hover, .hero-tx .btn-sub:hover { background: rgba(242, 234, 223, .08); border-color: var(--pm-cream); }

/* 절 — 넉넉한 여백, 교차 바탕 */
.block { padding: 120px 0; background: var(--pm-bg); }
.block.alt { background: var(--pm-bg2); }

/* 카드 */
.card, .stat, .faq .q, .award-hl, .greeting, .notice { background: var(--pm-card); border: 1px solid var(--pm-hair); box-shadow: none; }
.card { border-radius: 4px; transition: border-color .6s ease, transform .6s var(--pm-ease); }
.card:hover { border-color: rgba(255, 154, 46, .45); }
.card .ph { position: relative; overflow: hidden; background: #1A1512; }
.card .ph img { transition: transform 1.4s var(--pm-ease), filter 1.4s ease; }
.card .ph::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 100%, rgba(255, 154, 46, .28), rgba(255, 154, 46, 0) 60%); opacity: 0; transition: opacity 1s ease; pointer-events: none; }
.card:hover .ph img { transform: scale(1.06); filter: saturate(1.08); }
.card:hover .ph::after { opacity: 1; }
.card .tx { padding: 22px 24px 26px; }
.card h3 { font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.card .tx p { color: var(--pm-sub); }
.card.rs .tx .num { width: auto; height: auto; background: none; color: var(--pm-acc-tx); font-size: 30px; font-weight: 600; margin-bottom: 6px; border-radius: 0; }
.card.mc .tx { text-align: center; }
.grid { gap: 28px; margin-top: 48px; }

/* 숫자 카드 */
.stats { margin-top: 48px; gap: 0; border-top: 1px solid var(--pm-hair); border-bottom: 1px solid var(--pm-hair); }
.stat { background: transparent; border: 0; border-radius: 0; padding: 40px 28px; }
.stat + .stat { border-left: 1px solid var(--pm-hair); }
.stat b { font-size: clamp(34px, 3.4vw, 54px); font-weight: 900; color: var(--pm-acc-tx); letter-spacing: -.03em; line-height: 1.15; }
.stat span { color: var(--pm-sub); font-size: 15px; margin-top: 12px; }
.stat b span { display: inline; margin: 0; font-size: inherit; color: inherit; }  /* 큰 숫자 안의 줄바꿈 표시·카운트업 칸은 설명 글 모양을 받지 않게 */

/* 메뉴 사진 그리드 — 사진 위주로 크게 */
.menu-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 48px; }
.menu-cards .card { background: transparent; border: 0; }
.menu-cards .ph.photo { border-radius: 4px; }
.menu-cards .name { padding: 18px 8px 4px; font-size: 20px; font-weight: 700; color: var(--pm-cream); }

/* 표·정보칸 */
.tbl-wrap, .facts { border: 1px solid var(--pm-hair); border-radius: 4px; }
table, .facts { background: var(--pm-card); }
thead th, .facts dt { background: var(--pm-card2); color: var(--pm-cream); }
th, td, .facts dt, .facts dd { border-bottom-color: var(--pm-hair); }
.kw-bar { height: 6px; background: rgba(242, 234, 223, .08); }
.kw-bar i { background: linear-gradient(90deg, #B8561A 0%, var(--pm-acc) 100%); box-shadow: 0 0 14px rgba(255, 154, 46, .35); }
.kw-tbl .kw-n { color: var(--pm-cream); font-family: var(--pm-serif); font-size: 17px; }

/* 지역·매장 */
.regions a { background: transparent; border: 1px solid var(--pm-hair); color: var(--pm-cream); font-weight: 600; transition: border-color .4s ease, background .4s ease; }
.regions a:hover { border-color: var(--pm-acc); background: rgba(255, 154, 46, .08); }
.regions b { background: transparent; color: var(--pm-acc-tx); padding: 0 2px; }
.store-card { border-top: 2px solid var(--pm-acc); }
.store-card h3 a, .store-group a { color: var(--pm-cream); }
.store-card h3 a:hover { color: var(--pm-acc-tx); }
.store-group { font-size: 26px; margin-top: 56px; }
.store-group a { border-bottom: 1px solid var(--pm-acc); }
.acts a { border-color: var(--pm-hair); color: var(--pm-cream); }
.acts a:hover { border-color: var(--pm-acc); }

/* 연혁·수상 */
.hist-year h3 { font-size: 30px; font-weight: 700; border-bottom: 1px solid var(--pm-acc); }
.hist li, .plain li { border-bottom-color: var(--pm-hair); }
.award-hl { border-left: 2px solid var(--pm-acc); border-radius: 4px; }
.award-years { color: var(--pm-acc-tx); }
.photo, .photo.sign, .photo.award-img { border-radius: 4px; }

/* FAQ — 질문 앞 얇은 주황 선, JS 있으면 부드럽게 열고 닫음 */
.faq { gap: 0; margin-top: 48px; border-top: 1px solid var(--pm-hair); }
.faq .q { background: transparent; border: 0; border-bottom: 1px solid var(--pm-hair); border-radius: 0; padding: 26px 4px; }
.faq h3 { font-size: 19px; font-weight: 700; display: flex; gap: 16px; align-items: baseline; }
.faq h3::before { content: ""; flex: none; width: 20px; height: 1px; background: var(--pm-acc); transform: translateY(-5px); }
.faq p { color: var(--pm-sub); margin-top: 10px; padding-left: 36px; }
.pm-acc h3 { margin: 0; }
.pm-acc .pm-qbtn { all: unset; box-sizing: border-box; cursor: pointer; display: flex; gap: 16px; align-items: baseline; width: 100%; font: inherit; color: inherit; }
.pm-acc .pm-qbtn::after { content: ""; margin-left: auto; flex: none; width: 10px; height: 10px; border-right: 1px solid var(--pm-cream); border-bottom: 1px solid var(--pm-cream); transform: translateY(-4px) rotate(45deg); transition: transform .5s var(--pm-ease); }
.pm-acc .q.open .pm-qbtn::after { transform: translateY(0) rotate(-135deg); }
.pm-acc .pm-qbtn:focus-visible { outline: 2px solid var(--pm-cream); outline-offset: 6px; border-radius: 2px; }
.pm-acc h3::before { display: none; }
.pm-acc .pm-qbtn::before { content: ""; flex: none; width: 20px; height: 1px; background: var(--pm-acc); transform: translateY(-5px); }
.pm-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--pm-ease); }
.pm-a > div { overflow: hidden; }
.q.open .pm-a { grid-template-rows: 1fr; }

/* 바닥글 — 먹색, 슬로건 크게 명조 */
.site-footer { background: #0E0C0A; border-top: 1px solid var(--pm-hair); padding: 96px 0 56px; color: var(--pm-sub); }
.site-footer .wrap > * { max-width: none; }
.site-footer .slogan-lockup { font-size: clamp(28px, 3.6vw, 52px); font-weight: 900; color: var(--pm-cream); margin-top: 28px; }
.site-footer .slogan-lockup span + span, .hero-tx .slogan-lockup span + span { color: var(--pm-acc); text-decoration-color: rgba(255, 154, 46, .55); text-decoration-thickness: 1px; text-underline-offset: .22em; }
.foot-links { margin-top: 32px; font-weight: 500; }
.site-footer a { color: var(--pm-cream); }
.updated { color: #A89C8E; }

/* ── 움직임(.pm-motion 일 때만) ── */
@keyframes pm-zoom { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes pm-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes pm-cue { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.pm-motion .hero-bg img { animation: pm-zoom 12s var(--pm-ease) both; }
.pm-motion .hero-tx > * { animation: pm-rise 1.1s var(--pm-ease) both; }
.pm-motion .hero-tx > :nth-child(1) { animation-delay: .2s; }
.pm-motion .hero-tx > :nth-child(2) { animation-delay: .35s; }
.pm-motion .hero-tx > :nth-child(3) { animation-delay: .5s; }
.pm-motion .hero-tx > :nth-child(4) { animation-delay: .65s; }
.pm-motion .hero-tx > :nth-child(5) { animation-delay: .8s; }
.pm-motion .hero-full::after { animation: pm-cue 2.4s ease-in-out 1.6s infinite both; }
.pm-motion .pm-hide { opacity: 0; transform: translateY(32px); }
.pm-motion .pm-hide.pm-in { opacity: 1; transform: none; transition: opacity 1.1s ease, transform 1.1s var(--pm-ease); }
.pm-motion .pm-hide.pm-grid > * { opacity: 0; transform: translateY(24px); }
.pm-motion .pm-hide.pm-grid.pm-in > * { opacity: 1; transform: none; transition: opacity 1s ease, transform 1s var(--pm-ease), border-color .6s ease; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .pm-hide, .pm-hide > * { opacity: 1 !important; transform: none !important; }
}

/* ── 휴대폰 ── */
@media (max-width: 900px) { .menu-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (max-width: 760px) {
  .block { padding: 72px 0; }
  .grid, .menu-cards, .stats, .faq { margin-top: 32px; }
  .js .site-nav { background: rgba(20, 17, 15, .97); border-bottom: 1px solid var(--pm-hair); }
  .js .site-nav a { border-bottom-color: var(--pm-hair); }
  .hero-full { min-height: 0; }
  .hero-bg { position: relative; overflow: hidden; }
  .hero-bg img { aspect-ratio: 4 / 5; }
  .hero-bg::after { display: block; background: linear-gradient(180deg, rgba(20, 17, 15, .7) 0%, rgba(20, 17, 15, 0) 26%, rgba(20, 17, 15, 0) 60%, var(--pm-bg) 100%); }
  .hero-tx { padding-top: 8px; padding-bottom: 72px; }
  .hero-tx h1 { font-size: clamp(44px, 13vw, 60px); }
  .hero-full::after { display: none; }
  .page-head { padding: 48px 20px 56px; }
  .stat + .stat { border-left: 0; border-top: 1px solid var(--pm-hair); }
  .stat { padding: 28px 4px; }
  .site-footer { padding: 72px 0 48px; }
  .card .tx { padding: 16px 16px 20px; }
  .card.rs .tx .num { font-size: 24px; }
  .faq p { padding-left: 0; }
}
@media (max-width: 600px) { .menu-cards { gap: 14px; } .menu-cards .name { font-size: 16px; padding-top: 12px; } }
/* 특허 번호처럼 긴 숫자 카드는 한 단계 작게 */
.stat b:has(.nw), .stat:nth-child(3) b { font-size: clamp(28px, 2.4vw, 38px); }
@media (max-width: 420px) { .site-footer .slogan-lockup { font-size: 23px; } }  /* 슬로건 구절은 줄 안 바뀜(nowrap) — 360 폭에 맞춤 */

/* ── TICKET_55b(오너 2026-10-26) ── */
/* 첫 화면 h1 '맛나감자탕' = 로고 이미지(글자는 HTML 그대로 — 화면에서만 크기 0, AI·검색·낭독은 글자를 읽음, 로고는 CSS 배경이라 중복 낭독 없음) */
/* TICKET_57 리뷰 반영(P3): 글자는 화면 낭독용(sr-only 방식)으로 두고 로고는 부모 칸(.hero-tx::before)에 — 고대비(forced-colors)에서는 로고 대신 글자를 보임 */
.hero-tx h1 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.hero-tx::before { content: ""; display: block; width: clamp(260px, 30vw, 440px); aspect-ratio: 579 / 176; background: url(../img/logo-white.png) left center / contain no-repeat; }
.pm-motion .hero-tx::before { animation: pm-rise 1.1s var(--pm-ease) .2s both; }
@media (max-width: 760px) { .hero-tx::before { width: min(300px, 78vw); } }
@media (forced-colors: active) {
  .hero-tx::before { display: none; }
  .hero-tx h1 { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; }
}
/* 슬로건 = 본 사이트처럼 Pretendard 굵은 글씨(명조 아님) */
.slogan-lockup { font-family: var(--font); font-weight: 900; letter-spacing: -.02em; }
/* TICKET_60(오너 2026-10-29): 홈 바닥글 = 본사 감자탕 사진(photo/footer-home.jpg, 장식 — CSS 배경·alt 없음) + 첫 화면 같은 먹색 덮개.
   글자 칸(--foot-tx = 글자 시작 + 820px) 아래 덮개는 .9 이상 → 사진이 흰색이어도 크림·보조 글씨 4.5:1(check.py 계산), 그 뒤로 사진이 드러남. 휴대폰은 사진 위·글자 아래(덮개 .95). 사진 못 불러오면 먹색 단색 */
.site-footer { --foot-tx: calc(max(20px, 50% - 540px) + 820px); background: linear-gradient(90deg, rgba(14, 12, 10, .95) 0%, rgba(14, 12, 10, .9) var(--foot-tx), rgba(14, 12, 10, .55) calc(var(--foot-tx) + 18%), rgba(14, 12, 10, .2) 100%), url(../img/photo/footer-home.jpg) right 62% / cover no-repeat, #0E0C0A; }
.site-footer .wrap > * { max-width: 820px; }
@media (max-width: 760px) {
  .site-footer { background: linear-gradient(180deg, rgba(14, 12, 10, .15) 0, rgba(14, 12, 10, .65) 130px, rgba(14, 12, 10, .95) 210px), url(../img/photo/footer-home.jpg) center top / 100% auto no-repeat, #0E0C0A; padding-top: 220px; }
}
/* ── TICKET_63(오너 2026-10-29): franchise/ — 홈과 같은 검정 화면·움직임 ── */
/* 첫 화면 h1 은 로고 대신 글자 그대로 */
.fr-hero .hero-tx h1 { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; font-size: clamp(40px, 3.6vw + 18px, 84px); }
.fr-hero .hero-tx::before { display: none; }
.fr-hero .hero-bg img { object-position: 50% 60%; }
.fr-hero .hero-tx { padding-bottom: clamp(160px, 24vh, 260px); }  /* TICKET_66(오너): franchise 첫 화면 글자를 위로 */
.fr-hero .hero-bg::after { background: linear-gradient(180deg, rgba(20, 17, 15, .5) 0%, rgba(20, 17, 15, 0) 20%, rgba(20, 17, 15, .18) 60%, rgba(20, 17, 15, .93) 100%), linear-gradient(90deg, rgba(20, 17, 15, .87) 0%, rgba(20, 17, 15, .64) 35%, rgba(20, 17, 15, .1) 64%, rgba(20, 17, 15, 0) 100%); }  /* TICKET_64b(오너): 어두운 정도 = 홈 막과 TICKET_64 얇은 막의 중간 */
/* 이유 카드 01~06 — PC 3열: 평균 매출(02)은 2열×2줄(01·03 옆), 04~06 한 줄 · 태블릿 2열: 01·02 한 줄 전체 */
.fr-reasons { list-style: none; padding: 0; margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.fr-reasons .fr-sales { grid-column: 2 / span 2; grid-row: 1 / span 2; }
.fr-reasons .fr-cover { grid-column: 1 / span 2; grid-row: 2 / span 2; }  /* TICKET_77: 그림 든 카드 04 = 왼쪽 2칸×2줄 — 05·06 은 오른쪽에 위아래로 · 2026-11-03: 02 그래프 삭제로 둘째 줄부터 */
.fr-cover .tx { display: grid; grid-template-columns: minmax(0, 1fr) 250px; column-gap: 48px; align-content: start; }
.fr-cover .tx > :not(.fr-map) { grid-column: 1; justify-self: start; }
.fr-cover .tx > .fr-map { grid-column: 2; grid-row: 1 / span 4; margin: 0; align-self: center; }
/* 평균 매출 막대그래프: 길이 = 값 ÷ 가장 큰 값(0부터, build.py) · 움직임은 .pm-motion 일 때만(JS 없음·동작 줄이기면 최종 길이) */
.fr-chart { margin: 28px 0 0; max-width: 820px; }
.fr-chart ul { list-style: none; padding: 0; display: grid; gap: 14px; }
.fr-chart li { display: grid; grid-template-columns: 52px minmax(0, 1fr) 9.5em; align-items: center; gap: 14px; }
.fr-chart .y { color: var(--pm-sub); font-variant-numeric: tabular-nums; }
.fr-chart .bar { height: 14px; background: rgba(242, 234, 223, .08); border-radius: 2px; overflow: hidden; }
.fr-chart .bar i { display: block; height: 100%; background: linear-gradient(90deg, #B8561A 0%, var(--pm-acc) 100%); transform-origin: left center; }
.fr-chart b { color: var(--pm-cream); font-family: var(--pm-serif); font-size: 18px; font-weight: 700; text-align: right; white-space: nowrap; }
.card .tx p.fr-hl { margin-top: 14px; font-family: var(--pm-serif); font-size: clamp(20px, 1.4vw + 12px, 28px); font-weight: 700; line-height: 1.45; color: var(--pm-acc-tx); }  /* ②-보정 강조 한 줄 */
.fr-chart figcaption { margin-bottom: 16px; font-weight: 700; color: var(--pm-cream); }
.fr-sales .src { margin-top: 18px; font-size: 13px; max-width: 820px; }
/* 개설 순서 8단계 — PC 4열 · 휴대폰 1열, 번호는 CSS 숫자(01~08) */
.fr-steps { list-style: none; padding: 0; margin-top: 48px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; counter-reset: st; }
.fr-steps li { counter-increment: st; padding: 26px 0 28px; border-top: 1px solid var(--pm-hair); }
.fr-steps li::before { content: counter(st, decimal-leading-zero); display: block; font-family: var(--pm-serif); color: var(--pm-acc-tx); font-size: 28px; font-weight: 600; line-height: 1.2; }
.fr-steps b { display: block; font-size: 19px; margin-top: 10px; color: var(--pm-cream); }
.fr-steps span { display: block; margin-top: 6px; font-size: 15px; color: var(--pm-sub); }
.pm-motion .fr-chart .bar i { transition: transform 1.8s var(--pm-ease); }
.pm-motion .fr-chart:not(.fr-go) .bar i { transform: scaleX(0); }
/* TICKET_77: 카드 04 남한 단순화 그림 — 윤곽(옅은 크림)·범위 원(주황 은은하게)·핀(주황)·이름표(크림). 움직임은 화면에 들어올 때 한 번(.fr-go), 동작 줄이기·JS 없음이면 최종 모습 */
.fr-map { margin: 26px auto 0; max-width: 250px; }
.fr-map svg { display: block; width: 100%; height: auto; overflow: visible; }
.fr-map .land { fill: rgba(242, 234, 223, .07); stroke: rgba(242, 234, 223, .4); stroke-width: 1; stroke-linejoin: round; }
.fr-map .rng { fill: url(#frRng); }
.fr-map .drop path { fill: var(--pm-acc); }
.fr-map .drop circle { fill: #14110F; }
.fr-map text { fill: var(--pm-cream); font-size: 14px; font-weight: 700; paint-order: stroke; stroke: #14110F; stroke-width: 4px; stroke-linejoin: round; }
.fr-map figcaption { margin-top: 10px; font-size: 12px; color: var(--pm-sub); text-align: center; }
.pm-motion .fr-map .rng { transform-box: fill-box; transform-origin: center; transition: transform 1.6s var(--pm-ease), opacity 1.6s var(--pm-ease); }
.pm-motion .fr-map .drop { transition: transform .8s cubic-bezier(.3, 1.45, .5, 1), opacity .35s ease-out; }
.pm-motion .fr-map .pin-br .drop { transition-delay: .3s; }
.pm-motion .fr-map .rng { transition-delay: .5s; }
.pm-motion .fr-map .rng-br { transition-delay: .8s; }
.pm-motion .fr-map:not(.fr-go) .rng { transform: scale(.15); opacity: 0; }
.pm-motion .fr-map:not(.fr-go) .drop { transform: translateY(-46px); opacity: 0; }
@media (max-width: 900px) { .fr-reasons, .fr-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fr-reasons > :first-child, .fr-reasons .fr-sales, .fr-reasons .fr-cover { grid-column: 1 / -1; grid-row: auto; } .fr-cover .tx { grid-template-columns: minmax(0, 1fr) 220px; column-gap: 32px; } }
@media (max-width: 760px) {
  .fr-hero .hero-tx h1 { font-size: clamp(34px, 10vw, 48px); }
  .fr-hero .hero-tx { padding-bottom: 72px; }
  .fr-hero .hero-bg img { object-position: 76% 50%; }  /* TICKET_64b: 휴대폰 세로 자르기에서 음식 가운데로 */
  .fr-hero .hero-bg::after { background: linear-gradient(180deg, rgba(20, 17, 15, .5) 0%, rgba(20, 17, 15, 0) 22%, rgba(20, 17, 15, 0) 65%, var(--pm-bg) 100%); }  /* TICKET_64: 휴대폰은 사진 아래에 글자 — 아래쪽만 바탕색으로 */
  .fr-reasons, .fr-steps { grid-template-columns: 1fr; margin-top: 32px; }
  .fr-reasons { gap: 16px; }
  .fr-reasons .fr-sales { grid-column: auto; }
  .fr-reasons .fr-cover { grid-column: auto; }
  .fr-cover .tx { display: block; }
  .fr-cover .tx > .fr-map { margin: 26px auto 0; max-width: 240px; }
  .fr-steps li { padding: 20px 0 22px; }
  .fr-chart li { grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; }
  .fr-chart b { grid-column: 2; text-align: left; font-size: 16px; }
}