/* 프랜차이즈 순위 · 브랜드 업종 안 순위 (tools/gen_franchise.py · 10-08) */
.rank-nav { margin-top: 12px; }
.chips-list a[aria-current="page"] { background: var(--blue); color: #fff; }
.chips-list a[aria-current="page"]:hover { color: #fff; }
.my-rank dd b { font-size: 1.15em; }
.my-rank dd .of { font-weight: 500; color: var(--text-2); font-size: 0.8em; margin-left: 2px; }
/* 읽는 법 목록 — calc.css 와 같은 모양 */
.how-list li { position: relative; padding-left: 14px; font-size: 15px; line-height: 1.7; color: var(--text-2); }
.how-list li + li { margin-top: 8px; }
.how-list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--teal); }
.how-list b { color: var(--text); }
/* 순위 범위 — 전체 · 외식 · 서비스 · 도소매 · 업종 고르기 (10-08) */
.scope-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.scope-bar .sb-l { font-size: 13px; font-weight: 700; color: var(--text-3); margin-right: 2px; }
.scope-bar a { padding: 5px 12px; border-radius: 8px; font-size: 14px; font-weight: 700; color: var(--text-2); border: 1px solid var(--line); background: #fff; }
.scope-bar a:hover { text-decoration: none; border-color: var(--blue); color: var(--blue); }
.scope-bar a[aria-current="page"] { background: var(--text); border-color: var(--text); color: #fff; }
.scope-bar select { padding: 5px 10px; border-radius: 8px; font: inherit; font-size: 14px; font-weight: 700; color: var(--text-2); border: 1px solid var(--line); background: #fff; }
.scope-bar select:has(option[selected]:not([value=""])) { background: var(--text); color: #fff; border-color: var(--text); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* 시도별 가맹점 평균매출 (#area · 10-08 A16) */
.abars { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 28px; }
.ab { position: relative; display: grid; grid-template-columns: 3em 1fr 6.5em 3.2em; align-items: center; gap: 8px; padding: 4px 0; font-size: 14px; }
.ab-b { height: 10px; background: #eef2f7; border-radius: 5px; overflow: hidden; }
.ab-b i { display: block; height: 100%; background: var(--blue); border-radius: 5px; }
.ab b { text-align: right; font-variant-numeric: tabular-nums; }
.ab small { text-align: right; font-size: 12px; }
.ab small.up { color: var(--blue); } .ab small.down { color: #c2410c; }
.ab:hover::after { content: attr(data-tip); position: absolute; right: 0; bottom: calc(100% - 2px); padding: 4px 8px; border-radius: 8px; background: #121a2b; color: #fff; font-size: 12px; white-space: nowrap; pointer-events: none; z-index: 2; }
@media (max-width: 720px) { .abars { grid-template-columns: 1fr; } }

/* 브랜드 찾기 (/franchise/brands/ · 업종 페이지 전체 목록 · 10-09) */
.fb-search { margin-top: 14px; }
.fb-search input { width: 100%; max-width: 560px; font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.fb-search input:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.fb-count { margin: 8px 0 0; font-size: 14px; }
.fb-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 18px; }
.fb-list li { padding: 6px 0; border-bottom: 1px dashed var(--line); }
.fb-list li a { font-weight: 700; }
.fb-list li .sub { display: block; font-size: 12.5px; color: var(--text-3); }
.fb-seg[hidden], .fb-list li[hidden] { display: none; }
.fb-go { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.fb-go input { flex: 1; min-width: 220px; font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.fb-go button { font: inherit; padding: 10px 16px; border: 0; border-radius: 10px; background: var(--blue); color: #fff; font-weight: 700; cursor: pointer; }

/* 동네 순위 첫 화면 카드 (10-09 · 표 줄바꿈이 제각각이라 카드로) */
.dr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.dr-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); color: var(--text); text-decoration: none; min-height: 120px; }
.dr-card:hover { border-color: var(--blue); text-decoration: none; }
.dr-card b { font-size: 16.5px; color: var(--blue); }
.dr-card span { font-size: 14px; color: var(--text-2); line-height: 1.55; flex: 1; }
.dr-card em { font-style: normal; font-size: 12.5px; color: var(--text-3); }

/* 업종별 순위 표 — 칸마다 1위 브랜드 (10-09 · 「보기」만으로는 무슨 칸인지 몰랐다) · 업종 칸은 옆으로 밀어도 남는다 */
.mx-t td.mx { min-width: 8.5em; max-width: 10em; }
.mx-t td.mx a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.mx-t td.mx .sub { display: block; font-size: 12px; }
.mx-t th:first-child, .mx-t td:first-child { position: sticky; left: 0; background: #fff; z-index: 1; }

/* 브랜드 찾기 개편 (10-09) — 업종 카드 · 결과 */
.fb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.fb-card { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
.fb-card-h { margin: 0 0 8px; font-weight: 800; font-size: 16px; }
.fb-card-h .sub { display: block; font-weight: 400; font-size: 12.5px; color: var(--text-3); }
.fb-card ol { margin: 0; padding-left: 1.3em; }
.fb-card li { padding: 3px 0; font-size: 14.5px; display: list-item; }
.fb-card li .muted { margin-left: 6px; font-size: 12.5px; }
.fb-all { display: inline-block; margin-top: 8px; font-size: 13.5px; font-weight: 700; }
.fb-res[hidden], .fb-segs[hidden] { display: none; }
.fb-wait .fb-segs { display: none; }

/* 업종별 1 · 2 · 3위 — 잣대 탭 (10-09 · 41 × 10 큰 표는 옆으로 밀어야 하고 내려가면 칸 이름이 사라졌다) */
.mxt > input { position: absolute; opacity: 0; pointer-events: none; }
.mxt-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.mxt-tabs label { padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 700; color: var(--text-2); cursor: pointer; }
.mxt-p { display: none; }
#mxr-close:checked ~ #mxp-close { display: block; } #mxr-close:checked ~ .mxt-tabs label[for="mxr-close"] { background: var(--blue); border-color: var(--blue); color: #fff; }
#mxr-close-high:checked ~ #mxp-close-high { display: block; } #mxr-close-high:checked ~ .mxt-tabs label[for="mxr-close-high"] { background: var(--blue); border-color: var(--blue); color: #fff; }
#mxr-sales:checked ~ #mxp-sales { display: block; } #mxr-sales:checked ~ .mxt-tabs label[for="mxr-sales"] { background: var(--blue); border-color: var(--blue); color: #fff; }
#mxr-sales-per-py:checked ~ #mxp-sales-per-py { display: block; } #mxr-sales-per-py:checked ~ .mxt-tabs label[for="mxr-sales-per-py"] { background: var(--blue); border-color: var(--blue); color: #fff; }
#mxr-cost:checked ~ #mxp-cost { display: block; } #mxr-cost:checked ~ .mxt-tabs label[for="mxr-cost"] { background: var(--blue); border-color: var(--blue); color: #fff; }
#mxr-cost-ratio:checked ~ #mxp-cost-ratio { display: block; } #mxr-cost-ratio:checked ~ .mxt-tabs label[for="mxr-cost-ratio"] { background: var(--blue); border-color: var(--blue); color: #fff; }
#mxr-growth:checked ~ #mxp-growth { display: block; } #mxr-growth:checked ~ .mxt-tabs label[for="mxr-growth"] { background: var(--blue); border-color: var(--blue); color: #fff; }
#mxr-tenure:checked ~ #mxp-tenure { display: block; } #mxr-tenure:checked ~ .mxt-tabs label[for="mxr-tenure"] { background: var(--blue); border-color: var(--blue); color: #fff; }
#mxr-ad-spend:checked ~ #mxp-ad-spend { display: block; } #mxr-ad-spend:checked ~ .mxt-tabs label[for="mxr-ad-spend"] { background: var(--blue); border-color: var(--blue); color: #fff; }
#mxr-size:checked ~ #mxp-size { display: block; } #mxr-size:checked ~ .mxt-tabs label[for="mxr-size"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.mxt-t td { vertical-align: top; } .mxt-t td a { font-weight: 700; } .mxt-t td .sub { display: block; font-size: 12.5px; }
.mxt-desc { margin: 4px 0 8px; }
@media (max-width: 720px) { .mxt-t th:nth-child(4), .mxt-t td:nth-child(4) { display: none; } }
.mxt-t thead th { position: sticky; top: 53px; background: #fff; z-index: 2; box-shadow: 0 1px 0 var(--line); }
/* 브랜드 「어느 동네에 많나」 (10-09 · brand_store) */
.fr-where { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 720px) { .fr-where { grid-template-columns: 1fr; } }
.fr-where .dur-h { margin: 4px 0 6px; font-size: 13.5px; font-weight: 700; color: var(--text-3); }
.fr-where .t { max-height: none; }
/* 브랜드 표지 「주요 상품」 — 정보공개서 (10-10) */
.cover-what { margin: 2px 0 4px; font-size: 16px; color: var(--text); } .cover-what b { margin-right: 6px; padding: 2px 8px; border-radius: 6px; background: var(--soft); font-size: 13px; color: var(--blue); } .cover-what .muted { font-size: 13px; }
/* 가맹본부 점검표 (10-11 · templates/pages/franchise_brand.html #hq) — 재무는 범위값이라 글자가 길다 */
#hq .tile dd.rng { font-size: 17px; line-height: 1.35; word-break: keep-all; }
#hq .neg { color: #c2410c; }
#hq .hq-h { margin: 18px 0 8px; font-size: 15.5px; font-weight: 800; }
#hq .hq-fin td, #hq .hq-fin th { white-space: nowrap; }
#hq .hq-aw { padding: 0; list-style: none; }
/* 법 위반 사실 — 건수 셋 · 색으로 구분하지 않는다 (27차) */
#hq .hq-law { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 6px; font-size: 15px; color: var(--text-2); }
#hq .hq-law b { color: var(--text); font-variant-numeric: tabular-nums; }
/* 수상 · 인증 목록 /franchise/awards/ · 본부 재무 안내 (10-12) */
.aw-y { margin: 18px 0 8px; font-size: 15.5px; font-weight: 800; }
.aw-y .muted { font-size: 13px; font-weight: 400; margin-left: 6px; }
#hq .hq-odd { background: var(--soft); border-radius: var(--r-s); padding: 10px 12px; }
/* 수상 · 인증 상자 (10-12 「눈에 안 띈다」) — 금빛 옅은 바탕 + 메달. 표지 칩 .chip.aw */
.aw-box { margin-top: 20px; padding: 16px 18px 14px; border: 1px solid #f0d58a; border-radius: 12px; background: #fffaeb; }
.aw-box .aw-t { padding-left: 34px; min-height: 26px; font-size: 16.5px; font-weight: 800; line-height: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h4l1 5-3 2zM17 2h-4l-1 5 3 2z' fill='%230b50c8'/%3E%3Ccircle cx='12' cy='15' r='7' fill='%23e8a400'/%3E%3Ccircle cx='12' cy='15' r='4.6' fill='%23ffd766'/%3E%3Cpath d='M12 11.6l1 2.2 2.4.3-1.8 1.6.5 2.4-2.1-1.2-2.1 1.2.5-2.4-1.8-1.6 2.4-.3z' fill='%23b47b00'/%3E%3C/svg%3E") no-repeat 0 0 / 26px 26px; }
.aw-box .aw-t span { margin-left: 6px; padding: 2px 9px; border-radius: 999px; background: #ffe7a3; color: #7a5200; font-size: 13px; }
#hq .aw-box .hq-aw { margin: 10px 0 8px; display: grid; gap: 8px; }
#hq .aw-box .hq-aw li { padding: 12px 14px; line-height: 1.5; border-radius: 10px; background: #fff; border: 1px solid #f3e2ae; }
#hq .aw-box .hq-aw li b { display: block; font-size: 16.5px; color: #5c3d00; }
#hq .aw-box .hq-aw li .muted { font-size: 13.5px; }
.aw-box .note { margin-top: 6px; }
.chip.aw { padding-left: 26px; background: #fff3cf url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h4l1 5-3 2zM17 2h-4l-1 5 3 2z' fill='%230b50c8'/%3E%3Ccircle cx='12' cy='15' r='7' fill='%23e8a400'/%3E%3Ccircle cx='12' cy='15' r='4.6' fill='%23ffd766'/%3E%3Cpath d='M12 11.6l1 2.2 2.4.3-1.8 1.6.5 2.4-2.1-1.2-2.1 1.2.5-2.4-1.8-1.6 2.4-.3z' fill='%23b47b00'/%3E%3C/svg%3E") no-repeat 7px 50% / 16px 16px; color: #7a5200; }
.chip.aw:hover { text-decoration: none; background-color: #ffe7a3; }
@media (min-width: 760px) { #hq .aw-box .hq-aw { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } }
/* 순위 첫 화면의 지표 × 업종 표 — 휴대폰에서 22px 넘쳤다 (10-13). 표만 옆으로 민다 */
.mxt-p { overflow-x: auto; -webkit-overflow-scrolling: touch; }