/* section_profit 수익률 공개 · section_store 매장안내 · section09 본사 — 레퍼 코코스키 1920 px → calc(N * var(--u)) (1600 기준으로 환산) */
:root {
  --pf-ink: rgba(0, 0, 0, .6);  /* 레퍼: 어두운 사진 바탕 위 반투명 검정 박스 */
  --pf-line: var(--red-txt);    /* 레퍼 #ffaa11 테두리 → 우리 포인트 */
  --pf-cost: #e9e1d4;           /* 도넛: 식자재 = 한지색 */
  --pf-etc: #4a4440;            /* 도넛: 나머지 운영비 */
  --st-line: #d9d4ca;
}

/* ---------- section_profit 수익률 공개 (레퍼: 박스 1400×540, 테두리 2px, 위 도넛+표 / 아래 글+원형 사진+맥박 원) ---------- */
#section_profit { padding: calc(130 * var(--u)) 0 calc(120 * var(--u)); }
/* 배경: 먹 단색 (10-14 장부 줄·외곽 글자 반려) */
#section_profit { overflow: hidden; }
.pf_wrap { width: calc(1400 * var(--u)); margin: calc(80 * var(--u)) auto 0; }
.pf_box { display: flex; align-items: center; height: calc(540 * var(--u)); background: var(--pf-ink); border: 2px solid var(--pf-line); color: #fff; letter-spacing: -.04em; }
.pf_box + .pf_box { margin-top: calc(36 * var(--u)); }

.pf_chart { position: relative; width: calc(400 * var(--u)); margin-left: calc(190 * var(--u)); }
.pf_donut { display: block; width: 100%; rotate: -90deg; }
.pf_donut circle { fill: none; stroke-width: 70; }
.pf_donut .track { stroke: #2a2522; }
.pf_donut .seg { stroke-linecap: butt; }
.pf_center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.pf_center span { font-size: calc(17 * var(--u)); color: #a9a29a; font-weight: 600; }
.pf_center b { margin-top: calc(4 * var(--u)); font-size: calc(40 * var(--u)); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.pf_center small { margin-left: calc(3 * var(--u)); font-size: .42em; font-weight: 600; }
.pf_count { font-style: normal; font-variant-numeric: tabular-nums; }
.pf_donut .seg_net { stroke: var(--red-txt); stroke-width: 84; }
.pf_donut .seg_cost { stroke: var(--pf-cost); }
.pf_donut .seg_etc { stroke: var(--pf-etc); }
.pf_lb::after { content: ''; position: absolute; top: 50%; width: calc(6 * var(--u)); aspect-ratio: 1; margin-top: calc(-3 * var(--u)); border-radius: 50%; background: #d8d3cc; }
.lb_cost::after { left: calc(100% + 48 * var(--u)); }
.lb_etc::after { right: calc(100% + 46 * var(--u)); }
.pf_stamp { position: absolute; left: calc(-90 * var(--u)); top: calc(30 * var(--u)); text-align: center; }
.pf_stamp .name { font-size: calc(24 * var(--u)); font-weight: 700; }
.pf_stamp .data { display: inline-block; margin-top: calc(5 * var(--u)); padding: calc(5 * var(--u)) calc(12 * var(--u)); background: var(--red-txt); font-size: calc(48 * var(--u)); font-weight: 800; line-height: 1; }
.pf_stamp .data span { font-size: .45em; font-weight: 600; }
.pf_lb { position: absolute; font-size: calc(17 * var(--u)); font-weight: 500; color: #d8d3cc; white-space: nowrap; }
.pf_lb::before { content: ''; position: absolute; top: 50%; width: calc(60 * var(--u)); border-top: 1px dotted #8a8480; }
.lb_cost { right: calc(330 * var(--u)); bottom: calc(10 * var(--u)); }
.lb_cost::before { left: 100%; margin-left: calc(8 * var(--u)); width: calc(40 * var(--u)); }
.lb_etc { left: calc(420 * var(--u)); top: calc(150 * var(--u)); }
.lb_etc::before { right: 100%; margin-right: calc(8 * var(--u)); width: calc(40 * var(--u)); }

.pf_tbl_wrap { width: calc(530 * var(--u)); margin-left: auto; margin-right: calc(80 * var(--u)); }
.pf_table th { white-space: nowrap; }
.pf_basis { margin-bottom: calc(14 * var(--u)); text-align: right; font-size: calc(16 * var(--u)); color: #a9a29a; }
.pf_basis b { color: #fff; font-weight: 700; }
.pf_table { width: 100%; border-collapse: collapse; font-size: calc(21 * var(--u)); }
.pf_table th, .pf_table td { height: calc(60 * var(--u)); padding: 0 calc(30 * var(--u)); border-bottom: 1px solid #3a3431; text-align: left; font-weight: 500; }
.pf_table td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf_table td + td { width: calc(150 * var(--u)); color: #d8d3cc; }
.pf_table .sum th, .pf_table .sum td { color: #fff; font-weight: 700; background: rgba(255, 255, 255, .04); }
.pf_table thead th { border-top: 1px solid #fff; border-bottom-color: #fff; font-weight: 700; }
.pf_table thead th + th { text-align: right; }
.pf_table tfoot td + td { color: #fff; }
.pf_table tfoot th, .pf_table tfoot td { background: var(--red-txt); border: 0; font-size: calc(24 * var(--u)); font-weight: 800; }

@keyframes pfRing { to { rotate: 360deg; } }
.pf_note { margin-top: calc(24 * var(--u)); font-size: calc(16 * var(--u)); color: #a9a29a; }

/* ---------- section_store 매장안내 (레퍼: 지도 1630×760, 왼쪽 위 340 패널 = 검색 + 목록) ---------- */
#section_store { padding: calc(120 * var(--u)) 0; }
.st_box { position: relative; width: calc(1400 * var(--u)); height: calc(700 * var(--u)); margin: calc(70 * var(--u)) auto 0; background: #f6f2ea; box-shadow: var(--shadow-card); }
.st_panel { position: absolute; left: calc(50 * var(--u)); top: calc(50 * var(--u)); bottom: calc(50 * var(--u)); z-index: 2; width: calc(360 * var(--u)); display: flex; flex-direction: column; background: #fff; box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(30, 10, 5, .12); }
.st_search { position: relative; display: block; padding: calc(16 * var(--u)); background: var(--red); }
.st_search input { width: 100%; height: calc(50 * var(--u)); padding: 0 calc(46 * var(--u)) 0 calc(14 * var(--u)); border: 0; border-radius: 0; font: inherit; font-size: calc(17 * var(--u)); color: var(--ink); outline: 0; }
.st_search i { position: absolute; right: calc(30 * var(--u)); top: 50%; translate: 0 -50%; font-size: calc(26 * var(--u)); color: #888; }
.st_list { flex: 1; overflow-y: auto; list-style: none; padding: 0 calc(26 * var(--u)); overscroll-behavior: contain; }
.st_list button { display: block; width: 100%; padding: calc(22 * var(--u)) calc(4 * var(--u)); border: 0; border-bottom: 1px solid var(--st-line); background: none; text-align: left; font: inherit; color: var(--ink); cursor: pointer; transition: background-color .2s ease; }
.st_list button:hover, .st_list button.on { background: #f6f2ea; }
.st_list b { font-size: calc(19 * var(--u)); font-weight: 800; letter-spacing: -.03em; }
.st_list em { margin-left: calc(8 * var(--u)); padding: calc(2 * var(--u)) calc(8 * var(--u)); background: var(--red); color: #fff; font-size: calc(13 * var(--u)); font-style: normal; font-weight: 700; vertical-align: middle; }
.st_list span { display: block; margin-top: calc(6 * var(--u)); font-size: calc(16 * var(--u)); color: #6b6661; }
.st_list .empty { padding: calc(30 * var(--u)) 0; font-size: calc(16 * var(--u)); color: #888; }
.st_map { position: absolute; inset: 0 0 0 calc(410 * var(--u)); overflow: hidden; }
#st_svg { width: 100%; height: 100%; }
.st_pin { cursor: pointer; }
.st_pin path { fill: var(--red); stroke: #fff; stroke-width: 1.5; }
.st_pin circle { fill: #fff; }
.st_pin text { font-size: 13px; font-weight: 800; fill: var(--ink); paint-order: stroke; stroke: #f6f2ea; stroke-width: 4px; letter-spacing: -.03em; opacity: 0; transition: opacity .2s ease; }
.st_pin:hover text, .st_pin.on text { opacity: 1; }   /* 매장이 촘촘해 고른 곳·올린 곳 이름만 */
.st_pin.on path { fill: var(--ink); }
.st_pin.left text { text-anchor: end; }   /* 옆 핀과 이름이 겹치는 매장 */
.st_all { position: absolute; right: calc(24 * var(--u)); top: calc(24 * var(--u)); padding: calc(10 * var(--u)) calc(16 * var(--u)); border: 1px solid var(--st-line); background: #fff; font: inherit; font-size: calc(15 * var(--u)); font-weight: 600; color: var(--ink); cursor: pointer; transition: transform 160ms ease-out; }
.st_all:active { transform: scale(.97); }
.st_note { margin-top: calc(24 * var(--u)); text-align: center; font-size: calc(16 * var(--u)); color: #6b6661; }

/* ---------- section09 본사 (레퍼: 380×440 테두리 박스 3, 간격 30, 제목 아래 160 비우고 목록 — 빈 칸엔 아이콘) ---------- */
#section09 { padding: calc(120 * var(--u)) 0 calc(140 * var(--u)); }
/* 배경: 먹 바탕 위 할매 엠블럼 선화를 크게 — 「할매가 곁에 있다」, 스크롤 따라 천천히 올라옴 */
#section09 { overflow: hidden; }
.sec > .s09_bg { position: absolute; right: calc(-60 * var(--u)); bottom: calc(-120 * var(--u)); z-index: 0; width: calc(820 * var(--u)); opacity: .07; pointer-events: none; }
.s09_bg img { width: 100%; }
#section09::after { content: ''; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(transparent, rgba(142, 42, 23, .28)); pointer-events: none; }
.s09_box { display: flex; justify-content: center; gap: calc(30 * var(--u)); margin-top: calc(90 * var(--u)); list-style: none; }
.s09_box > li { width: calc(380 * var(--u)); height: calc(440 * var(--u)); padding: calc(60 * var(--u)) calc(46 * var(--u)); border: 1px solid #9e9b9a; color: #fff; letter-spacing: -.04em; transition: border-color .3s ease, background-color .3s ease; }
.s09_box > li:hover { border-color: var(--red-txt); background: rgba(20, 17, 16, .55); }
.s09_box .tit { font-size: calc(30 * var(--u)); font-weight: 700; line-height: 1.2; }
.s09_box i { display: block; margin: calc(36 * var(--u)) 0 calc(40 * var(--u)); font-size: calc(64 * var(--u)); color: var(--red-txt); }
.s09_box ul { list-style: none; }
.s09_box ul li { position: relative; padding-left: calc(14 * var(--u)); font-size: calc(18 * var(--u)); line-height: calc(30 * var(--u)); }
.s09_box ul li::before { content: '·'; position: absolute; left: 0; }

@media (max-width: 768px) {
  .pf_wrap { width: 92%; }
  .pf_box { flex-direction: column; height: auto; padding: calc(70 * var(--u)) calc(40 * var(--u)); }
  .pf_chart { width: calc(440 * var(--u)); margin: 0 auto; }
  .pf_stamp { left: calc(-40 * var(--u)); top: 0; }
  .pf_stamp .name { font-size: calc(26 * var(--u)); }
  .pf_stamp .data { font-size: calc(52 * var(--u)); }
  .pf_lb { display: none; }   /* 모바일은 바로 아래 표가 같은 내용 */
  .pf_tbl_wrap { width: 100%; margin: calc(80 * var(--u)) 0 0; }
  .pf_basis { font-size: calc(22 * var(--u)); }
  .pf_table { font-size: calc(24 * var(--u)); }
  .pf_table td + td { width: auto; }
  .pf_center span { font-size: calc(20 * var(--u)); }
  .pf_center b { font-size: calc(44 * var(--u)); }
  .pf_table th, .pf_table td { height: calc(70 * var(--u)); padding: 0 calc(14 * var(--u)); }
  .pf_table tfoot th, .pf_table tfoot td { font-size: calc(28 * var(--u)); }
  .pf_note { font-size: calc(22 * var(--u)); text-align: center; }

  .st_box { display: flex; flex-direction: column; width: 100%; height: auto; box-shadow: none; background: none; }
  .st_panel { display: contents; }   /* 레퍼 모바일 순서: 검색 → 지도 → 목록 */
  .st_search { order: 1; }
  .st_map { order: 2; }
  .st_list { order: 3; }
  .st_search { padding: calc(24 * var(--u)) calc(30 * var(--u)); }
  .st_search input { height: calc(80 * var(--u)); font-size: calc(28 * var(--u)); padding-left: calc(24 * var(--u)); }
  .st_search i { right: calc(54 * var(--u)); font-size: calc(40 * var(--u)); }
  .st_map { position: relative; inset: auto; height: calc(700 * var(--u)); background: #f6f2ea; }
  .st_list { max-height: calc(620 * var(--u)); margin-top: calc(30 * var(--u)); padding: 0 calc(30 * var(--u)); }
  .st_list li + li { margin-top: calc(16 * var(--u)); }
  .st_list button { padding: calc(30 * var(--u)) calc(30 * var(--u)); border: 0; background: #fff; }
  .st_list b { font-size: calc(30 * var(--u)); }
  .st_list em { font-size: calc(20 * var(--u)); }
  .st_list span { font-size: calc(24 * var(--u)); }
  .st_all { font-size: calc(22 * var(--u)); }
  .st_note { font-size: calc(22 * var(--u)); padding: 0 calc(30 * var(--u)); }

  .sec > .s09_bg { width: calc(640 * var(--u)); right: calc(-160 * var(--u)); bottom: auto; top: calc(260 * var(--u)); }
  .s09_box { flex-direction: column; align-items: center; gap: calc(30 * var(--u)); margin-top: calc(80 * var(--u)); }
  .s09_box > li { width: 80%; height: auto; padding: calc(50 * var(--u)) calc(50 * var(--u)); }
  .s09_box .tit { font-size: calc(36 * var(--u)); }
  .s09_box i { margin: calc(24 * var(--u)) 0; font-size: calc(70 * var(--u)); }
  .s09_box ul li { padding-left: calc(18 * var(--u)); font-size: calc(26 * var(--u)); line-height: calc(42 * var(--u)); }
}