/* ============================================================================
/test v3 — 워크벤치(지도 좌·패널 우)는 그대로 두고 패널(#panel)과 상단바의 시각만 다시 그린다.
2026-09-09. css/workbench.css(원본) 다음에 로드된다. 기능·문구·레이아웃 동작은 원본 그대로.
기준: templates/index.html 의 느낌(해 로고·따뜻한 강조색·둥근 카드·옅은 바탕) + 사진 시안에서 가져온 것:
· 큰 번호(01~05)의 장 머리, 03·04 만 진한 머리(남색·보라)
· 남색 KPI 띠 2×2 타일(아이콘·각주)
· 문제/확인 카드의 옅은 머리띠 + [아이콘][제목·알약][설명 전체폭][버튼 오른쪽] 한 줄 항목
· 접이식(아이콘·제목·건수·오른쪽 요약·˅)
· 03·04 의 지표 타일(아이콘·각주), 04 안내띠
가져오지 않은 것(이유는 각 자리 주석): 2열 페이지 격자(패널 폭 580~720 이라 불가) ·
'다음 확인사항 보기' 버튼(새 기능) · 판정표를 3행으로 접는 것(정보 손실) · 만원 단위 재표기 이외의 숫자 가공.
원칙(docs/design-pass-prompt.md): 글자 11px 이상 · AA 대비 · 흰 카드 · 알약 4종 한 모양 · 강한 대비는 KPI 띠 한 곳.
============================================================================ */
body.v3 {
--v3-bg:#F3F6FA; --v3-line:#E1E8F0; --v3-ink:#1B2A3A; --v3-navy:#14324F;
--v3-blue:#2B5DA8; --v3-blue-bg:#EAF2FB; --v3-r:12px;
--hint:#6B7784; --muted:#5D6D7E;
}
/* ── 상단바 — index.html 헤더의 느낌(흰 바탕·해 로고). 검색·예시·버튼 자리는 원본 그대로. ──────── */
body.v3 #topbar { background:#fff; border-bottom:1px solid var(--v3-line); box-shadow:0 1px 8px rgba(0,0,0,.06); color:var(--v3-ink); }
body.v3 #topbar .logo { display:flex; align-items:center; gap:9px; color:var(--v3-ink); font-size:inherit; }
body.v3 .logo-sun { width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#F5A623,#F8D06B);
display:flex; align-items:center; justify-content:center; font-size:16px; box-shadow:0 2px 8px rgba(245,166,35,.35); flex-shrink:0; }
body.v3 .logo-t { display:flex; flex-direction:column; line-height:1.15; }
body.v3 .logo-t b { font-size:15px; font-weight:800; }
body.v3 .logo-t small { font-size:10.5px; color:var(--muted); font-weight:600; }
body.v3 #addr { background:#F8F9FA; border:1.5px solid var(--v3-line); color:var(--v3-ink); }
body.v3 #addr:focus { border-color:#F5A623; box-shadow:0 0 0 3px rgba(245,166,35,.14); background:#fff; outline:none; }
body.v3 #goBtn { background:linear-gradient(135deg,#F5A623,#E8960A); color:#fff; border:none; }
body.v3 .ex-lab { color:var(--hint); }
body.v3 .ex-chip { border:1px solid var(--v3-line); background:#fff; color:var(--muted); }
body.v3 .ex-chip:hover { border-color:#F5A623; color:#B5700A; background:#FFF8E7; }
body.v3 #topact button { border:1px solid var(--v3-line); background:#fff; color:var(--muted); border-radius:20px; }
body.v3 #topact button:hover { border-color:#F5A623; color:#B5700A; background:#FFF8E7; }
/* ── 패널 바탕 ────────────────────────────────────────────────────────────── */
body.v3 #panel { background:var(--v3-bg); }
body.v3 .pane { padding:16px 16px 44px; }
body.v3 #p-can > .note { background:#fff; border:1px dashed var(--v3-line); border-radius:var(--v3-r); padding:22px; text-align:center; color:var(--muted); }
/* ── 요약(#vhead) — 사진 01 상단: 주소 상자 / 판정 배너 / 남색 KPI 2×2 ──────────── */
body.v3 #vhead { background:var(--v3-bg); border-bottom:1px solid var(--v3-line); box-shadow:none; padding:14px 16px 16px; }
body.v3 #vhead .addr { display:flex; align-items:center; gap:8px; margin:0 0 10px; padding:9px 13px; background:#fff; border:1px solid var(--v3-line);
border-radius:10px; font-size:var(--fs-label); font-weight:600; color:#3F5772; }
body.v3 #vhead .vh-fail { margin-bottom:10px; }
body.v3 #vhead .badge-lv { padding:16px 18px; border-width:1px; border-radius:var(--v3-r); align-items:flex-start; gap:12px; }
body.v3 #vhead .lv-cond { background:#FFF8E7; border-color:#F0D99A; }
body.v3 #vhead .lv-ok { background:#F1F8F2; border-color:#B9DEC1; }
body.v3 #vhead .lv-check { background:#EAF4FB; border-color:#AED6F1; }
body.v3 #vhead .lv-bad { background:#FDEDEC; border-color:#F2B8B1; }
body.v3 #vhead .lv-ico { font-size:28px; margin-top:2px; }
body.v3 #vhead .lv-name { font-size:20px; font-weight:900; letter-spacing:-.4px; line-height:1.35; }
body.v3 #vhead .lv-tag { display:inline-block; margin-left:8px; vertical-align:middle; padding:3px 9px; border-radius:999px; font-size:var(--fs-mini);
font-weight:800; background:rgba(255,255,255,.7); border:1px solid rgba(0,0,0,.08); }
body.v3 #vhead .lv-why { font-size:var(--fs-body); line-height:1.65; margin-top:5px; }
body.v3 .lv-facts { gap:6px; margin-top:9px; }
body.v3 .lv-fact { padding:3px 9px; font-size:var(--fs-mini); border-radius:999px; }
/* 도로 기준 안내(vh-basis) — 상자를 걷어 존재감을 낮춘다(2026-09-10 지적: 너무 크게 차지한다).
한 줄은 포기했다: 11px 로 줄여도 내용이 644px 인데 자리는 504px 뿐이고(실측 김제 하동 194, 패널 580px),
억지로 맞추려면 설명을 잘라야 하는데 기준 이름이 더 긴 지자체에서 어차피 다시 꺾인다.
문제는 줄 수가 아니라 무게였다 — 바로 위 판정 배너와 색 면으로 경쟁하고 있었다. 배경·테두리·버튼 상자를 없애고
기준 이름(b)만 진하게 남겨 눈이 먼저 데이터로 간다. 버튼의 margin-left:auto 도 뗐다 —
오른쪽 끝으로 밀면 글이 꺾일 때 버튼 혼자 한 줄을 차지했다. 이제 문장 끝에 붙는 글자 링크다. */
body.v3 .vh-basis { display:block; margin:8px 0 0; padding:0; background:none; border:0; border-radius:0;
font-size:var(--fs-mini); line-height:1.6; color:var(--hint); }
/* 지금 적용 중인 기준만 진하게 + 밑줄. 나머지는 회색 각주로 남겨 둔다 —
버튼을 눌러도 두 이름의 자리는 그대로이고 강조만 옮겨간다(자리 이동 제보의 두 번째 원인). */
body.v3 .vh-basis b { color:var(--muted); font-weight:600; }
body.v3 .vh-basis b.cur { color:var(--v3-ink); font-weight:700;
text-decoration:underline; text-decoration-color:var(--v3-green-line); text-underline-offset:3px; }
body.v3 .vh-basis button { margin:0 0 0 6px; border:0; background:none; padding:0; color:var(--v3-green-ink);
font-weight:700; font-size:var(--fs-mini); text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
body.v3 .vh-basis button::after { content:" →"; }
/* KPI — 남색 띠 하나(강한 대비는 한 곳만). 2×2 타일, 왼쪽에 아이콘. 사진에서 가져온 부분. */
body.v3 #kpis { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; padding:12px; border-radius:var(--v3-r);
background:linear-gradient(120deg,#0F2A45,#1B4F72); box-shadow:none; }
body.v3 .kpi { position:relative; min-width:0; padding:11px 12px 11px 50px !important; border:1px solid rgba(255,255,255,.14); border-radius:10px;
background:rgba(255,255,255,.06); box-shadow:none !important; text-align:left; display:block; flex:none; }
body.v3 .kpi + .kpi { box-shadow:none !important; }
body.v3 .kpi::before { position:absolute; left:12px; top:12px; width:28px; height:28px; border-radius:8px; display:flex; align-items:center;
justify-content:center; font-size:15px; background:rgba(255,255,255,.10); }
body.v3 .kpi:nth-of-type(2)::before { content:'⚡'; }
body.v3 .kpi:nth-of-type(3)::before { content:'📈'; }
body.v3 .kpi:nth-of-type(4)::before { content:'🧱'; }
body.v3 .kpi:nth-of-type(5)::before { content:'⏱'; }
body.v3 .kpi .k { font-size:var(--fs-label); color:#C6D6E6; line-height:1.4; justify-content:flex-start; flex-wrap:wrap; gap:6px; }
body.v3 .kpi .v { font-size:var(--fs-num); font-weight:900; line-height:1.3; margin-top:3px; letter-spacing:-.5px; white-space:normal; color:#fff; }
body.v3 .kpi .k-foot { margin-top:3px; font-size:var(--fs-mini); color:#C0D3E4; white-space:normal; line-height:1.5; }
body.v3 .kpi .k-if { font-size:var(--fs-mini); padding:1px 6px; }
/* ── 장(chapter) — 큰 번호 + 제목(사진). 머리는 원본대로 패널 안에서 sticky 로 붙는다. ─────── */
body.v3 .chap { margin:16px 0 0; background:#fff; border:1px solid var(--v3-line); border-radius:14px; box-shadow:0 2px 12px rgba(13,33,55,.05); }
body.v3 .chap:first-child { margin-top:0; }
body.v3 .chap-h { display:grid; grid-template-columns:auto minmax(0,1fr) auto; column-gap:12px; row-gap:1px; align-items:center;
padding:14px 18px 12px; background:#fff; border-bottom:1px solid var(--v3-line); border-radius:14px 14px 0 0; }
body.v3 .td-chapter-number { grid-column:1; grid-row:1/3; font-size:32px; font-weight:900; color:var(--v3-blue); letter-spacing:-1.2px; line-height:1; }
body.v3 .chap-ic { display:none; }
body.v3 .chap-tt { grid-column:2; grid-row:1; font-size:var(--fs-chap); font-weight:900; letter-spacing:-.5px; line-height:1.25; }
body.v3 .chap-n { grid-column:3; grid-row:1; margin:0; font-size:var(--fs-mini); font-weight:600; color:var(--hint); letter-spacing:0; }
body.v3 .chap-sum { grid-column:2; grid-row:2; flex-basis:auto; font-size:var(--fs-label); color:var(--muted); line-height:1.5; white-space:normal; }
body.v3 .chap-sum:empty { display:none; }
/* 02 요약은 사진처럼 알약(확인 필요 톤) */
body.v3 #chap-check .chap-sum { justify-self:start; background:#FFF3D6; color:#8A5A0B; border:1px solid #F0DFB5; border-radius:999px; padding:2px 10px; font-weight:700; margin-top:2px; }
/* 03·04 — 진한 머리(사진). 원본 장 아이콘(☀️·💰)을 오른쪽에 세운다. */
body.v3 #chap-plan > .chap-h { background:linear-gradient(110deg,#163657,#24496E); border-bottom:0; }
body.v3 #chap-biz > .chap-h { background:linear-gradient(110deg,#2D315B,#4F4B88); border-bottom:0; }
body.v3 #chap-plan > .chap-h .chap-tt, body.v3 #chap-biz > .chap-h .chap-tt,
body.v3 #chap-plan > .chap-h .chap-n, body.v3 #chap-biz > .chap-h .chap-n { color:#fff; }
body.v3 #chap-plan > .chap-h .td-chapter-number, body.v3 #chap-biz > .chap-h .td-chapter-number { color:#F4C34E; }
body.v3 #chap-plan > .chap-h .chap-sum, body.v3 #chap-biz > .chap-h .chap-sum { color:#C9D8E9; }
body.v3 #chap-plan > .chap-h .chap-ic, body.v3 #chap-biz > .chap-h .chap-ic { display:block; grid-column:3; grid-row:2; justify-self:end; font-size:24px; line-height:1; opacity:.9; }
body.v3 .chap-b { padding:14px 14px 18px; }
body.v3 .chap .sec-head { display:none; } /* 장 머리가 같은 말을 한다(원본도 제목·아이콘을 숨긴다) */
/* ── 카드 공통 ────────────────────────────────────────────────────────────── */
body.v3 .card { border:1px solid var(--v3-line); border-radius:var(--v3-r); padding:14px 15px; background:#fff; box-shadow:none; margin-top:12px; }
body.v3 .card > h3 { font-size:var(--fs-head); line-height:1.5; margin:0 0 10px; letter-spacing:-.3px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
body.v3 .two-col { grid-template-columns:minmax(0,1fr); gap:12px; margin-top:12px; }
/* 03 설비발전량의 두 쌍(일사량|계절별 일사량, 경사도·사면 방향|지형이 발전량에 주는 영향)만 2단(2026-09-10 사용자 요청,
그림으로 지목한 카드 넷). 다른 장의 .two-col 은 그대로 1단 — 사용자가 지목하지 않은 것은 손대지 않는다. */
body.v3 :is(#chap-plan-b, #p-plan) .two-col { grid-template-columns:repeat(2, minmax(0,1fr)); }
@media (max-width:640px) { body.v3 :is(#chap-plan-b, #p-plan) .two-col { grid-template-columns:minmax(0,1fr); } }
body.v3 .two-col > .card { margin:0; }
body.v3 :is(.t-note,.note,.warnbox) { font-size:var(--fs-label); line-height:1.75; border-radius:10px; padding:10px 12px; }
body.v3 .ev-chip { font-size:var(--fs-mini); border-radius:7px; padding:4px 9px; background:#fff; border:1px solid #D9E3EE; color:#3D5F86; line-height:1.4; cursor:pointer; }
body.v3 .ev-chip:hover { background:#F3F7FB; }
body.v3 .ev-chip.on { background:#EAF2FA; border-color:#B9CDE3; color:#153655; }
body.v3 .ev-box { padding:8px 11px; border-radius:8px; background:#F8FBFE; border-color:#D9E3EE; }
body.v3 .ev-k { color:#6B7784; }
/* 한전 계통연계 카드(#gridCard) — 조례 표에서 빼낸 상세의 새 집(2026-09-10).
.sd-why/.sd-act 는 원본 workbench.css 에서 `.sbt tr.sbt-det` 안으로 한정돼 있어
표 밖으로 나오는 순간 스타일이 사라진다 — 여기서 같은 값을 다시 준다. */
body.v3 #gridCard > h3 > .st { margin-left:auto; }
body.v3 #gridCard .sd-why { font-size:var(--fs-body); line-height:1.7; color:var(--v3-ink); }
body.v3 #gridCard .sd-act { margin-top:8px; font-size:var(--fs-body); line-height:1.65; color:#7E5109; }
/* 문제·확인 카드 — 사진: 옅게 칠한 머리띠(제목 + 건수) + 한 줄 항목 */
body.v3 .card.risk, body.v3 .card.todo { padding-top:0; overflow:hidden; }
body.v3 .card.risk > h3, body.v3 .card.todo > h3 { margin:0 -15px 6px; padding:11px 15px; border-bottom:1px solid; }
body.v3 .card.risk { border-color:#EFC9C9; } body.v3 .card.risk > h3 { background:#FDF1F1; color:#A33A3A; border-color:#F3D8D8; }
body.v3 .card.todo { border-color:#EEDDB5; } body.v3 .card.todo > h3 { background:#FFF8E8; color:#8A5F12; border-color:#F0E3C2; }
body.v3 .card.good { border-color:#CFE3D2; } body.v3 .card.good > h3 { color:#2E6B3E; }
/* 머리글 끝의 부가 알약(건수·시행일)은 회색으로 눕힌다. 단 판정 배지(.st)는 제외 —
.st 는 충족/확인 필요/기준 미충족/해당 없음 4색 체계라 회색으로 뭉개면 뜻이 사라진다
(이 규칙이 (0,4,3)이라 .st.st-bad (0,2,0)를 이겨 버린다). */
body.v3 .card > h3 > span:last-child:not(:first-child):not(.st) { font-size:var(--fs-mini); background:rgba(0,0,0,.06); color:inherit; border-radius:999px; padding:1px 8px; font-weight:800; }
body.v3 .todo-note { font-size:var(--fs-label); line-height:1.7; color:var(--muted); margin:6px 0 4px; }
body.v3 .fx-grid { grid-template-columns:minmax(0,1fr); gap:0; }
/* 한 항목 = [아이콘][제목 (알약)][여백][버튼] / [설명 전체 폭].
값(.fx-v)이 오른쪽에 떠서 설명과 폭을 나눠 쓰며 3줄로 찢어지던 문제(나주 동당리 25 '토지대장상 맹지이나 도로가 인접')를 없앤 배치. */
body.v3 .fx { display:grid; grid-template-columns:26px auto minmax(0,1fr) auto; grid-template-rows:auto auto auto; gap:3px 9px;
padding:11px 0; border-bottom:1px solid #EEF2F6 !important; align-items:center; }
body.v3 .fx:last-child { border-bottom:0 !important; }
body.v3 .fx-b { display:contents; }
body.v3 .fx-i { grid-column:1; grid-row:1/3; width:26px; font-size:19px; line-height:1.3; align-self:start; filter:saturate(.7); }
body.v3 .fx-b > b { grid-column:2; grid-row:1; font-size:var(--fs-body); line-height:1.5; }
body.v3 .fx-v { grid-column:3; grid-row:1; justify-self:start; max-width:100%; font-size:var(--fs-mini); font-weight:800; line-height:1.5;
padding:2px 9px; border-radius:8px; background:#EEF2F6; color:#3E5063; border:1px solid #E1E8F0; }
body.v3 .risk .fx-v { background:#FDECEA; color:#B03A2E; border-color:#F2C4BF; }
body.v3 .todo .fx-v { background:#FFF3D6; color:#8A5A0B; border-color:#F0DFB5; }
body.v3 .good .fx-v { background:#E7F3E9; color:#2E7D32; border-color:#CFE3D2; }
body.v3 .fx-d { grid-column:2/4; grid-row:2; font-size:var(--fs-label); line-height:1.65; margin:0; color:var(--muted); }
body.v3 .fx-ev { grid-column:4; grid-row:1/3; align-self:center; justify-self:end; margin:0; gap:5px; display:flex; flex-wrap:nowrap; }
body.v3 .fx-more { grid-column:2/4; grid-row:3; justify-self:start; font-size:var(--fs-mini); }
/* 근거 상자 — 행 아래 전폭(제목 칸부터 버튼 칸 끝까지). .fx-b 가 display:contents 라 상자가 곧 격자 항목이다.
예전에는 버튼 칸(.fx-ev) 안에 있어 [근거]와 [지도] 사이에 세로로 끼었다(제보 2026-09-12). */
body.v3 .fx-b > .ev-box { grid-column:2/5; grid-row:4; margin:3px 0 0; }
body.v3 .fx-bar { display:none; }
/* ── 접이식(td-fold / 원본 details.fold) — 사진: 아이콘 · 제목 · 건수 · 오른쪽 요약 · ˅ ── */
body.v3 .td-fold, body.v3 details.fold { margin-top:9px; border:1px solid var(--v3-line); border-radius:10px; background:#FBFDFF; overflow:clip; }
body.v3 .td-fold > summary, body.v3 details.fold > summary { display:flex; align-items:center; gap:9px; padding:11px 13px; font-size:var(--fs-body);
font-weight:700; list-style:none; cursor:pointer; color:#2F4A66; }
body.v3 .td-fold > summary::-webkit-details-marker, body.v3 details.fold > summary::-webkit-details-marker { display:none; }
body.v3 .td-fold > summary::after, body.v3 details.fold > summary::after { content:'⌄'; margin-left:auto; font-size:17px; color:#68829D; line-height:1; }
body.v3 .td-fold[open] > summary::after, body.v3 details.fold[open] > summary::after { content:'⌃'; }
body.v3 .td-fold > summary:hover, body.v3 details.fold > summary:hover { background:#F0F6FC; }
body.v3 .tf-ic { width:22px; text-align:center; font-size:14px; filter:saturate(.7); }
body.v3 .tf-n { font-size:var(--fs-mini); background:var(--v3-blue-bg); color:var(--v3-blue); border-radius:999px; padding:1px 8px; font-weight:800; }
body.v3 .tf-s { font-size:var(--fs-label); color:var(--hint); font-weight:600; margin-left:auto; }
body.v3 .td-fold > .card { margin:0; border:0; border-top:1px solid var(--v3-line); border-radius:0; padding:14px; background:#fff; }
body.v3 .td-fold > #lur-rec { padding:12px; margin:0; background:#fff; border-top:1px solid var(--v3-line); }
body.v3 details.fold > summary + * { padding:11px 13px; border-top:1px solid var(--v3-line); background:#fff; }
/* ── 02 토지 정보 3칸 / 기준 카드 / 계통 ───────────────────────────────────── */
/* 토지 정보 스펙 격자(.land-grid, workbench.css) — v3 는 선 색과 글자색만 맞춘다. 예전 타일(.td-land-metrics)은 없앴다. */
body.v3 .land-grid .lg-c { border-color:var(--v3-line); background:#F8FAFC; }
body.v3 .land-grid .lg-c b { color:var(--v3-ink); }
body.v3 .land-pnu { background:none !important; padding:0 !important; font-weight:600 !important; }
body.v3 .g3-wrap { gap:7px; margin-top:10px; }
body.v3 .g3 { min-width:0; border-radius:9px; padding:11px 8px; background:#F5F8FC; border-color:#DCE7F1; }
body.v3 .g3-bad { background:linear-gradient(125deg,#112E48,#21496D); color:#fff; border-color:#20486B; }
body.v3 .g3-bad :is(.g3-h,.g3-nm,.g3-kv) { color:#EDF5FC; }
body.v3 .g3-nm { font-size:15px; margin:5px 0; }
body.v3 .g3-h { font-size:var(--fs-mini); flex-wrap:wrap; gap:4px; }
body.v3 .g3-kv { font-size:var(--fs-mini); line-height:1.6; }
body.v3 .g3-kv b { font-size:var(--fs-body); }
body.v3 .g3-bad .g3-bar i { background:#E7B76B; }
body.v3 .sbt { font-size:var(--fs-label); }
body.v3 .sbt :is(td,th) { padding:9px 6px; line-height:1.55; }
body.v3 .sbt .st { font-size:var(--fs-mini); }
/* ── 기준 묶음(.sbt-sec 머리 + .sbt-sub 자식) ─────────────────────────────────
제보(2026-09-10): "이게 묶음인지 그냥 중간에 말인지 뭔지 모르겠다".
원래는 회색 띠 한 줄이었는데, 같은 회색 띠가 얼마 전까지 '절차·기반' 구간 머리로도 쓰여서
구분선으로 학습돼 있었다 — 아래 행을 거느린다는 신호가 아니라 위아래를 자르는 신호로 읽힌다.
그래서 세 가지를 바꿨다.
① 머리에 갯수를 달았다(JS) — "기준 2개"가 다음 몇 행이 자기 것인지 말한다.
② 머리의 아래 테두리를 없애 자식과 붙였다 — 선이 있으면 거기서 끊긴다.
③ 자식 행을 들여쓰고 세로 이음선을 그렸다. 이음선은 배경 그라디언트로 그린다 —
border-left 는 셀 경계에 붙어 저촉 행의 왼쪽 3px 붉은 띠(inset box-shadow)와 겹치고,
td 에 box-shadow 를 또 쓰면 그 붉은 띠를 덮어 버린다. x=13px 로 띄워 둘이 공존한다. */
body.v3 .sbt tr.sbt-sec td { background:var(--v3-green-bg); color:var(--v3-green-ink);
font-size:var(--fs-mini); font-weight:800; letter-spacing:.2px;
padding:7px 10px 6px; border-bottom:0; box-shadow:inset 3px 0 0 var(--v3-green); }
body.v3 .sbt tr.sbt-sec .sbt-secn { margin-left:7px; font-weight:700; color:var(--v3-green);
background:#fff; border:1px solid var(--v3-green-line); border-radius:999px; padding:1px 7px; }
/* 자식마다 세로 줄기 + 가로 가지를 단다 — 가지가 그 행을 가리켜야 어느 행이 매달렸는지 보인다
(2026-09-10 제보: "10호 이상·학교·어린이집에도 가로선이 나와야 하는 것 아닌가"). 막내만 세로가
중간에서 멈춰 ㄴ자로 닫힌다 — 묶음이 어디서 끝나는지가 보인다. 나머지는 ├ 모양으로 이어진다. */
body.v3 .sbt tr.sbt-sub > td:first-child { padding-left:28px;
background-image:linear-gradient(var(--v3-green-line),var(--v3-green-line)),
linear-gradient(var(--v3-green-line),var(--v3-green-line));
background-size:2px 100%, 9px 2px;
background-position:13px 0, 13px 50%; background-repeat:no-repeat; }
body.v3 .sbt tr.sbt-sub:not(:has(+ tr.sbt-sub)) > td:first-child { background-size:2px 50%, 9px 2px; }
/* ── 03·04 지표 타일(td-metrics) — 남색 타일에 아이콘·각주(사진) ─────────────────── */
body.v3 .td-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0 0 12px; }
body.v3 .td-metrics > div { position:relative; border:1px solid #244E75; background:linear-gradient(120deg,#112E49,#234B70); border-radius:11px;
padding:13px 12px 12px 52px; color:#fff; min-width:0; }
body.v3 .td-metrics > div::before { position:absolute; left:12px; top:13px; width:29px; height:29px; border-radius:9px; display:flex; align-items:center;
justify-content:center; font-size:15px; background:rgba(255,255,255,.10); }
body.v3 .td-plan > div:nth-child(1)::before { content:'⚙️'; } body.v3 .td-plan > div:nth-child(2)::before { content:'⚡'; }
body.v3 .td-biz > div:nth-child(1)::before { content:'💰'; } body.v3 .td-biz > div:nth-child(2)::before { content:'📅'; }
body.v3 .td-biz > div:nth-child(3)::before { content:'🔧'; } body.v3 .td-biz > div:nth-child(4)::before { content:'⏱'; }
body.v3 .td-metrics span { display:block; font-size:var(--fs-label); color:#CEDBE9; margin-bottom:4px; }
body.v3 .td-metrics strong { display:block; font-size:var(--fs-num); line-height:1.3; letter-spacing:-.4px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
body.v3 .td-metrics em { display:block; margin-top:4px; font-style:normal; font-size:var(--fs-mini); color:#B9CCDF; line-height:1.45; }
body.v3 .td-metric-note { display:none; } /* 각주가 타일 안(em)으로 들어갔다 */
body.v3 #chap-plan .chap-b > .card:first-of-type { margin-top:0; }
/* 04 안내띠 — flex 로 두면 가 별도 flex 항목이 되어 세로로 접힌다(실측). 흐름은 그대로, ⓘ 만 절대배치. */
body.v3 #chap-biz .chap-b > .warnbox { position:relative; padding-left:32px; background:#FFF8E7; border:1px solid #F0D99A; color:#6B4A0A; margin:0 0 12px; }
body.v3 #chap-biz .chap-b > .warnbox::before { content:'ⓘ'; position:absolute; left:12px; top:9px; font-weight:900; color:#B5700A; }
body.v3 .mgen-chartbox { height:220px; } body.v3 .cf-chartbox { height:210px; }
body.v3 .sc-wrap { overflow-x:auto; }
/* 시나리오 표(2026-09-14 시안 색): 머리 행 옅은 회색, 기준 열은 머리부터 끝까지 민트 띠, 순수익 행은 굵고 크게 + 위 두꺼운 선.
숫자는 남색·고정폭 숫자(tabular-nums)라 자릿수가 세로로 맞는다. '기준값' 알약은 띠가 이미 말하는 것이라 없다. */
body.v3 .sc.td-scenarios { width:100%; min-width:0; table-layout:fixed; font-size:13px; border-collapse:separate; border-spacing:0; }
body.v3 .td-scenarios :is(td,th) { padding:10px 8px; white-space:normal !important; text-align:right; line-height:1.5;
border-bottom:1px solid #E3E8EE; font-variant-numeric:tabular-nums; }
body.v3 .td-scenarios :is(td,th):first-child { width:31%; text-align:left; color:#3E5063; font-weight:700; }
body.v3 .td-scenarios thead th { background:#F3F6F9; color:#3E5063; font-weight:800; font-size:var(--fs-label);
border-bottom:2px solid #D5DCE4; padding-top:9px; padding-bottom:9px; }
body.v3 .td-scenarios thead th.base { background:#D6EFE5; color:#0F5E4A; }
body.v3 .td-scenarios thead th:first-child { border-top-left-radius:8px; }
body.v3 .td-scenarios thead th:last-child { border-top-right-radius:8px; }
body.v3 .td-scenarios td { color:#1F3A5F; }
body.v3 .td-scenarios td.base { background:#EAF7F1; color:#0F3D33; font-weight:800; }
body.v3 .td-scenarios tbody tr:nth-child(2) td + td { color:#B03A2E; }
body.v3 .td-scenarios tbody tr:nth-child(2) td.base { color:#9A2F24; }
body.v3 .td-scenarios tr.net td { font-weight:900; font-size:14px; border-top:2px solid #D5DCE4; background:#FAFBFC; }
body.v3 .td-scenarios tr.net td.base { background:#DDF1E8; }
body.v3 .td-scenarios tr.net td:first-child { color:#1F3A5F; }
body.v3 .td-scenarios tbody tr:last-child td { border-bottom:2px solid #D5DCE4; }
body.v3 .td-scenarios .sc-f { color:var(--hint); font-weight:500; white-space:normal; }
body.v3 .sc-capex { padding:12px 8px; border-bottom:1px solid #E3E8EE; }
body.v3 .sc-capex-v { color:#1F3A5F; font-size:14px; }
/* ── 폰(≤640px) — 항목은 세로로, KPI·타일은 1열 ──────────────────────────────── */
@media (max-width:640px) {
body.v3 .fx { grid-template-columns:26px minmax(0,1fr); }
body.v3 .fx-b > b { grid-column:2; } body.v3 .fx-v { grid-column:2; grid-row:2; }
body.v3 .fx-d { grid-column:2; grid-row:3; } body.v3 .fx-ev { grid-column:2; grid-row:4; justify-self:start; }
body.v3 .fx-more { grid-column:2; grid-row:5; }
body.v3 .fx-b > .ev-box { grid-column:2; grid-row:6; }
body.v3 #kpis, body.v3 .td-metrics { grid-template-columns:1fr; }
body.v3 .td-chapter-number { font-size:28px; }
body.v3 .logo-t small { display:none; }
}
/* ============================================================================
v3.1 (2026-09-09) — 팔레트를 남색에서 흰·초록으로. 사용자 검토 후 결정.
이유: 지도 도구가 이미 초록이라 남색 패널과 계열이 둘이었고, 600px 안에 어두운 덩어리가 4~5개 반복돼
강조가 무게가 됐다. 흰 바탕이면 상태색 3종(빨강·호박·초록)이 온전히 의미를 갖고, 큰 숫자는 색이 아니라
크기로 선다. 남는 악센트는 해 로고·주황 버튼뿐. 아래는 위 규칙을 덮어쓴다(같은 파일 안 순서로 이긴다).
============================================================================ */
body.v3 { --v3-green:#2D6A4F; --v3-green-ink:#1E5631; --v3-green-bg:#EAF4EE; --v3-green-line:#BFDCC9; --v3-blue:#2D6A4F; --v3-blue-bg:#EAF4EE; }
/* 장 머리 — 03·04 도 흰 머리, 번호는 초록 */
body.v3 #chap-plan > .chap-h, body.v3 #chap-biz > .chap-h { background:#fff; border-bottom:1px solid var(--v3-line); }
body.v3 #chap-plan > .chap-h .chap-tt, body.v3 #chap-biz > .chap-h .chap-tt { color:var(--v3-ink); }
body.v3 #chap-plan > .chap-h .chap-n, body.v3 #chap-biz > .chap-h .chap-n { color:var(--hint); }
body.v3 #chap-plan > .chap-h .chap-sum, body.v3 #chap-biz > .chap-h .chap-sum { color:var(--muted); }
body.v3 #chap-plan > .chap-h .td-chapter-number, body.v3 #chap-biz > .chap-h .td-chapter-number { color:var(--v3-green); }
body.v3 #chap-plan > .chap-h .chap-ic, body.v3 #chap-biz > .chap-h .chap-ic { opacity:.55; font-size:20px; }
body.v3 .td-chapter-number { color:var(--v3-green); }
body.v3 #chap-check .chap-sum { background:#FFF3D6; }
/* KPI — 흰 타일, 초록 숫자. 띠 바탕은 아주 옅은 초록으로 '요약 묶음'만 표시한다. */
body.v3 #kpis { background:var(--v3-green-bg); border:1px solid var(--v3-green-line); }
body.v3 .kpi { background:#fff; border:1px solid var(--v3-green-line); }
body.v3 .kpi::before { background:var(--v3-green-bg); }
body.v3 .kpi .k { color:var(--muted); }
body.v3 .kpi .v { color:var(--v3-green-ink); }
body.v3 .kpi .v-u { color:var(--muted); }
body.v3 .kpi .k-foot { color:var(--hint); }
body.v3 .kpi .k-foot b { color:var(--v3-ink); }
body.v3 .kpi .k-if { background:#FFF3D6; color:#8A5A0B; border-color:#F0DFB5; }
/* 03·04 지표 타일 — 같은 규칙 */
body.v3 .td-metrics > div { background:#fff; border:1px solid var(--v3-green-line); color:var(--v3-ink); }
body.v3 .td-metrics > div::before { background:var(--v3-green-bg); }
body.v3 .td-metrics span { color:var(--muted); }
body.v3 .td-metrics strong { color:var(--v3-green-ink); }
body.v3 .td-metrics em { color:var(--hint); }
/* 계통 3칸 — 병목 칸은 남색이 아니라 붉은 테두리로 */
body.v3 .g3 { background:#F8FAF9; border-color:var(--v3-line); }
body.v3 .g3-bad { background:#FFF5F4; border-color:#F2C4BF; color:var(--v3-ink); }
body.v3 .g3-bad :is(.g3-h,.g3-nm,.g3-kv) { color:var(--v3-ink); }
body.v3 .g3-bad .g3-bar i { background:#C0392B; }
/* 접이식 배지·토지 값 — 초록 계열로 */
body.v3 .tf-n { background:var(--v3-green-bg); color:var(--v3-green-ink); }
body.v3 .ev-chip { color:var(--v3-green-ink); border-color:var(--v3-green-line); }
body.v3 .td-fold > summary, body.v3 details.fold > summary { color:var(--v3-ink); }
/* 접이식이 연속으로 오면 한 묶음으로 잇는다(카드 3장이 따로 놀아 답답했다) */
body.v3 .td-fold + .td-fold, body.v3 .td-fold + details.fold, body.v3 details.fold + details.fold { margin-top:-1px; border-top-left-radius:0; border-top-right-radius:0; }
body.v3 :is(.td-fold, details.fold):has(+ .td-fold), body.v3 :is(.td-fold, details.fold):has(+ details.fold) { border-bottom-left-radius:0; border-bottom-right-radius:0; }
/* 띠지(세로 탭)도 지도 도구와 같은 초록 계열로 — 남색이 여기 하나만 남으면 더 튄다 */
body.v3 .rl { background:linear-gradient(105deg,#2F6E52 0%,#2D6A4F 55%,#245740 100%); color:#DCEBE2; border-color:rgba(255,255,255,.12); }
body.v3 .rl:hover { background:linear-gradient(105deg,#38805F 0%,#2F6E52 55%,#275C44 100%); color:#fff; }
/* 건물 범례 — 낱개 건물(주택·기타·대장 미등재)과 무리(주택 밀집·미등재 포함 밀집)를 가는 선으로 가른다.
.mt-leg 는 2열 격자라 다섯이 섞여 흐르면 '주택 밀집'이 건물 종류처럼 읽혔다(제보 2026-09-10).
무리는 이름이 길어 한 줄씩 통째로 쓴다. */
body.v3 #bldLeg .lg-div { grid-column:1/-1; width:auto; height:1px; border-radius:0;
background:var(--v3-line); margin:4px 0 3px; }
body.v3 #bldLeg .lg-wide { grid-column:1/-1; }
/* ── 탭 띠지(#rail)의 선택된 칸 — 데스크톱 ─────────────────────────────────────────
위에서 `body.v3 .rl` 로 배경을 초록으로 덮으면서 원본의 `.rl.on`(흰 배경 + 주황 왼쪽선)을
우선순위로 눌러 버렸다(0,2,1 > 0,2,0). 그 결과 선택된 칸이 나머지와 똑같이 보이고
굵기만 달랐다(제보 2026-09-10). 선택 칸은 원본 의도대로 패널과 같은 색으로 이어 붙여
'지금 이 장'이 자리로 읽히게 한다 — v3 패널은 흰색이 아니라 --v3-bg 라 그 색을 쓴다.
⚠ min-width 로 감싼다. 미디어쿼리는 우선순위를 올리지 않으므로, 감싸지 않으면 이 규칙이
파일 뒤에 있다는 이유만으로 폰(≤1000px)의 하단 탭 규칙까지 덮어쓴다.
⚠ 왼쪽 안쪽 여백은 기본 상태와 합이 같아야 한다(기본 border 1 + padding 5 = 6,
선택 border 3 + padding 3 = 6). 어긋나면 글자가 선택 순간 옆으로 튄다. */
@media (min-width:1001px) {
body.v3 .rl.on, body.v3 .rl.on:hover {
background:linear-gradient(105deg,#FFFFFF 0%, var(--v3-bg) 65%, var(--v3-bg) 100%);
color:var(--v3-ink); font-weight:800;
border-color:var(--v3-line); border-left:3px solid #F5A623;
padding-left:3px; margin-right:-1px;
box-shadow:-5px 4px 14px rgba(13,33,55,.22), -2px 2px 4px rgba(13,33,55,.14), inset 1px 1px 0 #fff; }
body.v3 .rl.on b { filter:none; } /* 어두운 바탕용 그림자는 밝은 칸에서 때가 낀 것처럼 보인다 */
}
/* ── 요약 KPI 를 한 줄 넷으로 (2026-09-10, 사용자 요청) ──────────────────────────────
2×2 는 시선이 두 번 꺾여 "확 들어오지 않는다"는 제보. 넷이 나란히 서야 '지표 띠' 하나로 읽힌다.
아이콘 상자는 뺐다 — 왼쪽 50px 는 2열일 때나 감당되지, 4열에서는 칸의 3분의 1이다.
(원본 워크벤치도 같은 이유로 라벨/값/각주 세 줄만 두고 아이콘 없이 넷을 세운다.)
폭 배분은 값의 길이를 따라 나눈다 — 균등하게 나누면 최소 폭(패널 580px)에서
'약 5,320만원'·'10,088만원/년' 이 두 줄로 꺾여 띠 높이가 늘고 다시 지저분해진다.
계산(패널 580 기준): 내부 528 − 간격 18 = 510 을 1 : 1.5 : 1.3 : 0.9 로 → 108 / 163 / 141 / 98px.
캡션은 flex-basis 100% 로 자기 줄을 지킨다(격자의 grid-column:1/-1 자리). */
body.v3 #kpis { display:flex; flex-wrap:wrap; gap:6px; padding:11px 10px; }
/* flex-basis 를 내용 폭(auto)으로 둔다 — 비율을 손으로 정하지 않는다.
실측(패널 580 · 김제 하동 194): 넷의 자연 폭 합 470px < 가용 494px 이라 아무것도 줄이지 않고 들어간다.
손으로 1:1.5:1.3:0.9 를 줬을 때는 '예상 순수익' 칸이 151px 로 필요한 161px 에 모자라
조건 알약('제한 해소 시')이 라벨 줄을 밀어 그 칸만 40px 높이가 됐고, 넷의 숫자 높이가 어긋나
한 줄로 만든 뜻이 없어졌다. 내용 폭 기준이면 값이 긴 필지·짧은 필지가 알아서 나뉘고,
정말 좁아지면 shrink 가 넓은 칸부터 줄인다. */
body.v3 .kpi { flex:1 1 auto; min-width:0; padding:10px 11px !important; }
body.v3 .kpi::before { display:none; }
/* 라벨 줄 높이를 고정한다 — 조건 알약(제한 해소 시)이 테두리·여백만큼 2px 더 높아서
그 칸의 숫자만 2px 내려앉았다(실측). 넷의 숫자가 같은 선에 서야 한 줄로 읽힌다. */
body.v3 .kpi .k { gap:4px; min-height:19px; align-items:center; }
body.v3 .kpi .v { margin-top:2px; letter-spacing:-.6px; }
/* ── 내 위치(#myLoc) — 폰 전용 ──────────────────────────────────────────────
현장에서 "지금 서 있는 이 땅"을 찍어 보는 버튼이다. 지도 앱의 그 자리·그 모양을 따른다:
오른쪽 아래, 원형, 흰 바탕에 과녁(◎). 범례 버튼(#lgToggle, bottom:32px·높이 34px) 바로 위.
⚠ 데스크톱에는 내지 않는다. PC 는 GPS 가 없어 Wi-Fi·IP 추정이라 오차가 수백 m~수 km 인데
필지는 한 변 수십 m 다 — 버튼이 있으면 "눌렀더니 엉뚱한 땅"이 된다. 없는 편이 정직하다.
⚠ 범례가 열리면(#lgToggle.on) 숨는다 — 범례 패널(bottom:66px)과 자리가 겹친다.
DOM 이 lgToggle → myLoc 순서라 형제 선택자로 처리한다(JS 없이). */
body.v3 #myLoc { position:absolute; right:8px; bottom:74px; z-index:8;
width:44px; height:44px; padding:0; border-radius:50%;
border:1px solid rgba(13,33,55,.18); background:rgba(255,255,255,.96);
box-shadow:0 2px 8px rgba(13,33,55,.22); cursor:pointer;
display:none; align-items:center; justify-content:center; }
body.v3 #myLoc .ml-ico { font-size:20px; line-height:1; color:var(--v3-green); }
body.v3 #myLoc:active { background:var(--v3-green-bg); }
body.v3 #lgToggle.on ~ #myLoc { display:none !important; }
/* 확인 띠가 뜨면 버튼이 그 위로 올라간다 — 둘 다 bottom:74px 이라 그냥 두면 띠가 버튼을 덮는다
(실측). 136px = 74 + 띠 높이 54 + 여백 8. 지도 앱에서 바텀시트가 올라올 때와 같은 동작. */
body.v3 #mapcol.geo-on #myLoc { bottom:136px; }
/* 찾는 중 — 과녁이 돈다. 첫 GPS 픽스는 몇 초 걸리므로 '눌린 것이 먹혔다'는 표시가 꼭 필요하다. */
body.v3 #myLoc.busy { pointer-events:none; opacity:.75; }
body.v3 #myLoc.busy .ml-ico { animation:mlSpin 1s linear infinite; }
@keyframes mlSpin { to { transform:rotate(360deg); } }
/* 확인 띠 — 주소를 읽고 사용자가 [이 위치 분석]을 눌러야 분석이 돈다 */
body.v3 #geoBar { position:absolute; left:8px; right:8px; bottom:74px; z-index:9;
display:flex; align-items:center; gap:8px; padding:9px 10px;
border:1px solid var(--v3-green-line); border-radius:12px; background:rgba(255,255,255,.97);
box-shadow:0 3px 12px rgba(13,33,55,.2); font-size:var(--fs-label); }
body.v3 #geoBar .gb-txt { flex:1; min-width:0; line-height:1.45; }
body.v3 #geoBar .gb-txt b { display:block; color:var(--v3-ink); font-weight:800;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.v3 #geoBar .gb-txt span { display:block; font-size:var(--fs-mini); color:var(--hint); }
body.v3 #geoBar #geoGo { flex:none; border:0; border-radius:9px; padding:8px 12px;
background:var(--v3-green); color:#fff; font-weight:800; font-size:var(--fs-label); cursor:pointer; }
body.v3 #geoBar .gb-x { flex:none; border:0; background:none; color:var(--hint);
font-size:14px; padding:4px 2px; cursor:pointer; }
@media (max-width:1000px) { body.v3 #myLoc { display:flex; } }
/* 데스크톱에서는 확인 띠도 함께 사라진다 — 폰에서 쓰던 창을 넓히면 띠만 남아 떠 있었다(실측). */
@media (min-width:1001px) { body.v3 #geoBar { display:none !important; } }
/* 햇빛마을 범례(#sunbar, 지도 왼쪽 아래)의 완화 조건 고지 — 호박색 왼줄로 '주의'임을 말한다.
#mapLegend 선택자는 예전 자리(오른쪽 범례 상자)의 흔적 — 다른 절이 .lg-note 를 쓰게 될 때를 위해 남긴다. */
body.v3 #mapLegend .lg-note, body.v3 #sunbar .lg-note { margin:3px 0 4px; padding:4px 7px; font-size:10px; line-height:1.45;
color:#6B5A2E; background:#FFF8E8; border-left:2px solid #D99A2B; border-radius:0 5px 5px 0; }
body.v3 #mapLegend .lg-note { margin-left:8px; margin-right:8px; font-size:9.5px; }
body.v3 #mapLegend .lg-note b, body.v3 #sunbar .lg-note b { color:#5A4210; }
/* 조건 줄 — 햇빛마을 팝업(.mi-cond). 토지이용계획 카드의 조건 줄은 .za-c(workbench.css)로 옮겨 갔다(2026-09-14). */
body.v3 .za { border-color:var(--v3-line); }
body.v3 .zrows, body.v3 .zr { border-color:var(--v3-line); }
body.v3 .za-n { color:var(--v3-ink); }
body.v3 .zc-call { background:var(--v3-green-bg); border-color:var(--v3-green-line); }
body.v3 .zc-call a { color:var(--v3-green-ink); border-color:var(--v3-green-ink); }
body.v3 .mi-cond { display:block; font-size:10px; color:#6B5A2E; margin:1px 0 4px; line-height:1.4; }
body.v3 #mapLegend .lg-note-q, body.v3 #sunbar .lg-note-q { background:#F4F7F5; border-left-color:var(--v3-green-line); color:var(--muted); }
/* ── 판단 기준 창 — 용어 사전과 같은 껍데기(#gloss 규칙을 #rules 에 그대로 준다) ── */
#rulesWrap { display:none; position:fixed; inset:0; z-index:60; background:rgba(13,33,55,.45); }
#rules { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
width:min(760px, 94vw); height:min(82vh, 780px); display:flex; flex-direction:column;
background:#fff; border-radius:14px; box-shadow:0 18px 60px rgba(0,0,0,.3); overflow:hidden; }
#rules .g-head { display:flex; align-items:center; gap:10px; padding:14px 18px 10px; border-bottom:1px solid var(--v3-line); }
#rules .g-head h3 { margin:0; font-size:15px; }
#rules .g-head input { flex:1; padding:7px 12px; font-size:12.5px; border:1px solid var(--v3-line); border-radius:16px; outline:none; }
#rules .g-head input:focus { border-color:var(--v3-green); }
#rules .g-x { border:none; background:none; font-size:18px; color:var(--hint); cursor:pointer; padding:2px 6px; }
#rules .g-body { overflow-y:auto; padding:8px 18px 16px; }
#rules .g-grp { font-size:12px; font-weight:800; color:var(--v3-ink); margin:16px 0 6px; padding:6px 10px; border-radius:8px; background:#F4F7F5; display:flex; align-items:center; gap:8px; }
#rules .g-grp .r-cnt { font-size:10.5px; font-weight:700; color:var(--hint); background:#fff; border:1px solid var(--v3-line); border-radius:999px; padding:0 7px; }
#rules .r-grp-block { background:#FDF1F1; color:#A33A3A; }
#rules .r-grp-review { background:#FFF8E8; color:#8A5F12; }
#rules .r-grp-ok { background:#EAF4EE; color:#1E5631; }
#rules .g-none { color:var(--hint); font-size:12px; padding:16px 0; text-align:center; }
#rules .r-note { display:flex; flex-direction:column; gap:6px; margin:6px 0 4px; padding:10px 12px; border-radius:10px;
background:#F8FAF9; border:1px solid var(--v3-line); font-size:11.5px; line-height:1.65; color:var(--muted); }
#rules .r-note b { color:var(--v3-ink); }
#rules .r-row { display:grid; grid-template-columns:minmax(150px, 34%) 1fr auto; gap:4px 12px; align-items:start;
padding:7px 4px; border-bottom:1px dashed var(--v3-line); font-size:12px; line-height:1.55; }
#rules .r-k b { color:var(--v3-ink); }
#rules .r-tag { display:inline-block; margin-left:5px; font-size:9.5px; font-weight:700; color:#A33A3A; background:#FDF1F1; border-radius:999px; padding:0 6px; vertical-align:1px; }
#rules .r-tag-d { color:#5B4B1E; background:#FFF8E8; }
#rules .r-tag-s { color:#1E5631; background:#EAF4EE; }
#rules .r-c { color:#6B5A2E; }
#rules .r-c i { color:var(--hint); }
#rules .r-gate { display:block; font-size:10.5px; color:var(--hint); margin-top:1px; }
#rules .r-b { font-size:11px; color:var(--muted); }
#rules .r-b summary { cursor:pointer; color:#3D5F86; font-weight:700; list-style:none; }
#rules .r-b summary::-webkit-details-marker { display:none; }
#rules .r-b[open] { grid-column:1 / -1; padding:4px 0 2px; }
@media (max-width:640px) { #rules .r-row { grid-template-columns:1fr; } #rules .r-b[open] { grid-column:auto; } }