/* 가맹백서 공통 토큰·그래프·표 — pc.css / m.css 가 그 위에 레이아웃을 얹는다.
   색 규칙: 브랜드 레드 = 늘어남(▲) · 블루 = 줄어듦(▼)·종료/해지 · 범위값은 레드 띠. 폐점을 빨강으로 칠하지 않는다. */
:root{
  --ground:#F7F4F4; --surface:#FFFFFF; --sunken:#F2EDED; --hover:#FBF3F4;
  --ink:#1D1718; --ink-2:#4A4244; --muted:#7A7072; --line:#E8E0E1; --grid:#EFE9EA;
  --red:#D7263D; --red-ink:#B81D31; --red-soft:#FBE3E6; --red-band:rgba(215,38,61,.2);
  --blue:#2F5F95; --blue-soft:#E3ECF6;
  --seq1:#FCE4E7; --seq2:#F6B3BC; --seq3:#EC7382; --seq4:#D7263D; --seq5:#9E1426;
  --shadow:0 1px 2px rgba(60,20,25,.05),0 4px 14px rgba(60,20,25,.04);
  --display:"Black Han Sans","IBM Plex Sans KR",system-ui,sans-serif;
  --body:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --ground:#141011; --surface:#1E191A; --sunken:#262021; --hover:#2A2123;
  --ink:#F3ECED; --ink-2:#CFC5C7; --muted:#9A8F91; --line:#342C2E; --grid:#2A2324;
  --red:#E8434F; --red-ink:#FF7A83; --red-soft:#3A1C20; --red-band:rgba(232,67,79,.3);
  --blue:#5E8FCC; --blue-soft:#1C2838;
  --seq1:#3A1C20; --seq2:#6B2530; --seq3:#A0303F; --seq4:#E8434F; --seq5:#FF9AA1;
  --shadow:none; color-scheme:dark;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:15px/1.6 var(--body);word-break:keep-all}
a{color:inherit}
h1,h2,h3{margin:0;text-wrap:balance;line-height:1.3}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.up{color:var(--red-ink)} .down{color:var(--blue)} .flat{color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:3px;border-radius:999px;padding:1px 9px;font-size:12px;font-weight:600;white-space:nowrap}
.chip.up{background:var(--red-soft)} .chip.down{background:var(--blue-soft)} .chip.flat{background:var(--sunken)}

/* 그래프 */
svg.chart{display:block;width:100%;height:auto;overflow:visible}
svg.chart text{fill:var(--muted);font:11px var(--mono)}
svg.chart text.g-k{font-family:var(--body);fill:var(--ink-2);font-size:12px}
svg.chart a text.g-k{fill:var(--ink);text-decoration:underline;text-decoration-color:var(--line)}
svg.chart text.g-val{fill:var(--ink);font-weight:600}
svg.chart text.g-mute-t{fill:var(--muted);font-family:var(--body)}
svg.chart .g-grid{stroke:var(--grid);stroke-width:1}
svg.chart .g-base{stroke:var(--line);stroke-width:1}
svg.chart .g-ref{stroke:var(--ink-2);stroke-width:1.2;stroke-dasharray:3 3}
svg.chart .g-main{fill:var(--red)}
svg.chart .g-soft{fill-opacity:.8}
svg.chart .g-down{fill:var(--blue)}
svg.chart .g-band{fill:var(--red-band)}
svg.chart .g-hatch{stroke:var(--red);stroke-width:2}
svg.chart .g-pend{fill:url(#hatch)}
svg.chart .g-line{fill:none;stroke:var(--red);stroke-width:2}
svg.chart .g-dot{fill:var(--red);stroke:var(--surface);stroke-width:2}
svg.chart .g-range{fill:var(--red-band);stroke:var(--red);stroke-width:1.5}
svg.chart .g-seq1{fill:var(--seq1);stroke:var(--line)} svg.chart .g-seq2{fill:var(--seq2)} svg.chart .g-seq3{fill:var(--seq3)}
svg.chart .g-seq4{fill:var(--seq4)} svg.chart .g-seq5{fill:var(--seq5)}
svg.chart [data-tip]:hover{opacity:.8}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--ink-2);margin:0 0 4px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.legend .l-main{background:var(--red)} .legend .l-down{background:var(--blue)} .legend .l-band{background:var(--red-band);border:1.5px solid var(--red)}
#tip{position:fixed;z-index:50;pointer-events:none;background:var(--ink);color:var(--surface);font:12px/1.45 var(--body);padding:6px 9px;border-radius:8px;white-space:pre;opacity:0;transition:opacity .08s}

/* 표 */
.tbl-wrap{overflow-x:auto}
table.t{border-collapse:collapse;width:100%;font-size:14px}
table.t th{font-size:12px;font-weight:600;color:var(--muted);text-align:right;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
table.t td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap;font-family:var(--mono);font-variant-numeric:tabular-nums}
table.t th:first-child,table.t td:first-child,table.t th.l,table.t td.l{text-align:left;font-family:var(--body)}
table.t td.rk{color:var(--muted);width:2.5em}
table.t tr:hover td{background:var(--hover)}
table.t a{text-decoration:none;font-weight:600}
table.t a:hover{color:var(--red-ink)}
details.raw{margin-top:8px;font-size:13px}
details.raw summary{cursor:pointer;color:var(--muted);width:max-content}
.src{font-size:12px;color:var(--muted)}
.src a{color:var(--muted)}
.empty{color:var(--muted);font-size:14px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* 가맹 조건 — 요약 사실 · 라벨/값 목록 · 조건 표 */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:0}
.facts div{background:var(--sunken);border-radius:12px;padding:10px 12px}
.facts dt{font-size:12px;color:var(--muted)}
.facts dd{margin:2px 0 0;font-weight:700;font-size:16px}
.trust{display:flex;flex-wrap:wrap;gap:6px 14px;margin:10px 0 0;font-size:13px;color:var(--ink-2)}
.kv{margin:0;display:grid;gap:0}
.kv div{display:grid;grid-template-columns:180px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.kv div:last-child{border-bottom:0}
.kv dt{color:var(--muted);font-size:13px}
.kv dd{margin:0;white-space:pre-line}
table.tt td{white-space:pre-line;vertical-align:top;font-family:var(--body);min-width:90px}
table.tt td:first-child{font-weight:600}
.tcards{display:grid;gap:8px}
.tcard{margin:0;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.tcard .first dd{font-weight:700;margin:0 0 4px}
.tcard div:not(.first){display:grid;grid-template-columns:84px 1fr;gap:8px;font-size:13px;padding:3px 0}
.tcard dt{color:var(--muted)}
.tcard dd{margin:0;white-space:pre-line}
@media (max-width:560px){.kv div{grid-template-columns:1fr;gap:2px}}