/* 단지비교 — 디자인 토큰 (07 v2.2/v2.3) */
:root{
  /* APT:VS 팔레트 — 차갑고 대비 높은 라이트. 다크는 아래 [data-theme=dark] 에서 같은 이름으로 덮는다 */
  --paper:#F6F8FB; --card:#FFFFFF; --surface:#EEF2F7; --line:#E2E8F0; --line-soft:rgba(226,232,240,.6);
  --band:#0F1E3A; --band-dk:#0A1428;
  --accent:#2563EB; --accent-dk:#1D4ED8; --sub:#3B82F6;
  --ink:#172033; --ink-2:#3A465C; --ink-3:#5E6D82;   /* 흐린 글자도 AA(4.5:1) 를 넘긴다 — #64748B 는 바탕 #F6F8FB 위에서 4.47 이었다 */
  --tint:#DBEAFE; --tint-warm:#FFF1E0; --tint-ink:#172033;
  --up:#CE3A33; --up-lt:#FBD5D7; --down:#2563EB; --down-lt:#D6E3FB; --flat:#EEF2F7;   /* 작은 글씨(11~12px)로도 쓰여 AA(4.5:1) 를 넘겨 둔다 — 예전 #D9453D 는 4.31 이었다 */
  --shadow:rgba(23,32,51,.08); --shadow-lg:rgba(23,32,51,.22);
  --warn:#B45309;   /* 주의 글자 — 흰 카드 위 4.8:1 */
  --r-xs:8px; --r-sm:10px; --r-md:12px; --r-lg:12px; --r-xl:16px;
  --kr:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro KR","Apple SD Gothic Neo",
       "Pretendard Variable",Pretendard,"Noto Sans KR","Malgun Gothic",sans-serif;
  --mo:var(--kr);
  --s1:#E5484D; --s2:#2563EB; --s3:#F5A524;   /* 비교 계열색 (방향 아님) */
  --cm1:#16A34A; --cm2:#F59E0B; --cm3:#E07A3C; --cm4:#C0503C;   /* 통근 구간 30·60·90·그 이상 */
  color-scheme:light;
}
[data-theme="dark"]{
  --paper:#0B0F17; --card:#121826; --surface:#1A2233; --line:#263043; --line-soft:rgba(38,48,67,.75);
  --band:#182742; --band-dk:#0F1A30;
  --accent:#60A5FA; --accent-dk:#93C5FD; --sub:#7DB3FB;
  --ink:#E6EAF2; --ink-2:#A7B2C4; --ink-3:#8B95A7;
  --tint:#1B2B47; --tint-warm:#3A2E1E; --tint-ink:#E6EAF2;
  --up:#F0605A; --up-lt:#4A2326; --down:#6D9BFF; --down-lt:#1E3358; --flat:#1A2233;
  --shadow:rgba(0,0,0,.35); --shadow-lg:rgba(0,0,0,.55);
  --warn:#FBBF24;   /* 어두운 카드 위 약 10:1 — 예전 폴백 #B45309 는 3.53 이었다 */
  /* 어두운 배경에서 파랑·빨강이 가라앉는다 — 계열색과 구간색을 밝은 쪽으로 올린다 */
  --s1:#FF7B7F; --s2:#7DB3FB; --s3:#FFC14D;
  --cm1:#34D399; --cm2:#FBBF24; --cm3:#FB923C; --cm4:#FB7185;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--kr);font-size:15px;
  line-height:1.5;letter-spacing:-.011em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:var(--band);text-decoration:none}
a:hover{text-decoration:underline}
.num,.mono{font-family:var(--mo);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
/* 값·표·요약은 숫자 폭을 고정한다 — 자리가 흔들리면 세로로 견주기 어렵다 */
table,.picto,.gdl,.lc-price,.cc,.gv,.fcount,.tbl,.navcnt,.cntnote,.dbody,.facts{
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.wrap{max-width:1200px;margin:0 auto;padding:0 16px}
/* 헤더 */
.site-head{background:var(--card);border-bottom:2px solid var(--band)}
.site-head .wrap{display:flex;align-items:center;gap:18px;height:64px}
.site-head .brand{font-weight:700;font-size:17px;color:var(--band-dk);letter-spacing:-.01em}
.site-head .tag{color:var(--ink-3);font-size:13px}
.site-head nav{margin-left:auto;display:flex;gap:8px;font-size:14px}
/* 검색 */
.search{position:relative}
.search input{width:100%;height:44px;border:1px solid var(--line);border-radius:var(--r-sm);padding:0 14px;font:inherit;background:var(--card);color:var(--ink)}
/* 검색 상자는 자기 테두리에 초점을 그린다. 비교 슬롯(.sel)은 상자 전체가 필드라 :focus-within 이 맡는다 */
.search:not(.sel) input:focus{outline:2px solid var(--sub);border-color:var(--sub)}
.sel input:focus,.sel input:focus-visible{outline:none;box-shadow:none}
.search .ac{position:absolute;left:0;right:0;top:calc(100% + 4px);background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);z-index:30;max-height:320px;overflow:auto;box-shadow:0 8px 24px var(--shadow)}
.search .ac div{padding:9px 14px;cursor:pointer;display:flex;justify-content:space-between;gap:10px}
.search .ac div:hover,.search .ac div.on{background:var(--surface)}
.search .ac small{color:var(--ink-3)}
/* 카드 */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.card>.band{background:var(--band);color:#fff;padding:10px 18px;display:flex;align-items:center;gap:12px;font-weight:700;font-size:15px}
.card>.band .note{margin-left:auto;font-weight:400;font-size:12px;opacity:.85}
.card>.body{padding:18px}
.capture-card{margin:18px 0}
.capture-card .band button{background:transparent;border:1px solid rgba(255,255,255,.55);color:#fff;border-radius:var(--r-xs);padding:4px 10px;font:inherit;font-size:12px;cursor:pointer}
.capture-card .band button:hover{background:rgba(255,255,255,.12)}
.capture-card .runner{display:flex;justify-content:space-between;gap:12px;padding:8px 18px;border-top:1px solid var(--line);color:var(--ink-3);font-size:12px;background:var(--paper)}
.capture-card .runner b{color:var(--band-dk);font-weight:700}
body.capturing .capture-card{width:1200px;max-width:none}
body.capturing .capture-card .band button{display:none}
/* 대표 카드 */
.repcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.repcard{border-radius:var(--r-md);overflow:hidden;position:relative;aspect-ratio:16/9;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:18px;min-height:190px}
.repcard svg{position:absolute;inset:0;width:100%;height:100%}
.repcard .t{position:relative;z-index:1}
.repcard .t .nm{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.25;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.repcard .t .sub{font-size:13px;opacity:.92;margin-top:4px}
.repcard .t .chip{display:inline-block;margin-bottom:8px}
.repcard .chip{display:inline-block;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.5);border-radius:999px;padding:2px 10px;font-size:12px}
.repcard .sgg{position:absolute;top:14px;left:18px;z-index:1;font-size:12px;opacity:.9}
.repcard .corner{position:absolute;top:12px;right:12px;z-index:1;display:flex;align-items:center;gap:7px}
.repcard .series{width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 2.5px rgba(255,255,255,.9);flex:0 0 auto}
.repcard .corner .chip{margin:0}
/* 픽토그램 그리드 */
.picto{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.picto.p4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.picto,.picto.p4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.picto .it{background:var(--surface);border-radius:var(--r-sm);padding:12px 14px}
.picto .it .k{font-size:12px;color:var(--ink-3)}
.picto .it .v{font-size:22px;overflow-wrap:anywhere;font-weight:600;letter-spacing:-.022em;margin-top:2px;letter-spacing:-.01em}
.picto .it .v small{font-size:12px;font-weight:400;color:var(--ink-3);margin-left:4px}
/* 점수 막대 */
.scores{display:grid;grid-template-columns:1fr;gap:10px}
.srow{display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:center}
.srow .k{font-size:13px;color:var(--ink);font-weight:600}
.srow .k small{display:block;color:var(--ink-3);font-weight:400;font-size:12px}
.bars{display:flex;flex-direction:column;gap:4px}
.mgroup{padding:6px 0 8px;border-bottom:1px dashed var(--line)}
.mgroup:last-child{border-bottom:0}
.mgroup .mt{font-size:12px;color:var(--ink-3);margin-bottom:4px}
.bar{display:grid;grid-template-columns:22px 1fr 150px;gap:8px;align-items:center;font-size:13px}
.bar .dot{width:14px;height:14px;border-radius:4px}
.bar .tr{height:16px;background:var(--surface);border-radius:6px;overflow:hidden;position:relative}
.bar .tr i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:var(--accent)}
.bar .val{color:var(--ink);text-align:right;white-space:nowrap}
.bar .val small{color:var(--ink-3);margin-left:4px}
.bar.none .tr i{width:0}.bar.none .val{color:var(--ink-3)}
/* 표 */
table.spec{width:100%;border-collapse:collapse;font-size:15px}
table.spec th,table.spec td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
table.spec th{background:var(--band);color:#fff;font-weight:700;text-align:right}
table.spec th:first-child,table.spec td:first-child{text-align:left}
table.spec td:first-child{color:var(--ink);font-weight:600}
table.spec td.diff{color:var(--ink-3);font-size:12px}
table.spec tr.sec td{background:var(--surface);color:var(--band-dk);font-weight:700;text-align:left;font-size:12px;letter-spacing:.02em}
.tscroll{overflow-x:auto}
/* 통근 막대 */
.commute{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.commute .dst{background:var(--surface);border-radius:var(--r-sm);padding:12px 14px}
.commute .dst .k{font-size:13px;font-weight:700;color:var(--band-dk);margin-bottom:6px}
.commute .bar{grid-template-columns:18px 1fr 96px}
/* 요약 */
.summary p{margin:0 0 8px}
.summary .lead{font-weight:700;color:var(--band-dk)}
.summary .foot{color:var(--ink-3);font-size:12px;margin-top:10px}
/* 지도 */
.map{height:360px;border-radius:var(--r-sm);overflow:hidden;background:var(--surface)}
.map.small{height:190px}

/* 고른 칸이 제 모양으로 칠해지게 — 예전에는 바깥 테두리만 둥글어 가운데 칸의 색이
   반원으로 잘려 보였다. 칸마다 둥글게 칠하고, 바깥은 여백을 준다. */
.toggle{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--card)}
.toggle button{border:0;background:transparent;border-radius:999px;padding:7px 14px;font:inherit;font-size:13px;
  font-weight:600;line-height:1.2;white-space:nowrap;cursor:pointer;color:var(--ink-3)}
.toggle button:hover{color:var(--ink);background:var(--surface)}
.toggle button.on{background:var(--band);color:#fff}
.toggle button.on:hover{background:var(--band)}
.toggle button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.btn{display:inline-flex;align-items:center;background:var(--band);color:#fff;border:0;border-radius:var(--r-sm);padding:10px 16px;font:inherit;font-weight:700;cursor:pointer}
.btn.ghost{background:transparent;color:var(--band);border:1px solid var(--band)}
.btn:hover{filter:brightness(1.08)}
/* 페이지 */
.hero{padding:34px 0 18px}
.hero h1{margin:0 0 6px;font-size:26px;letter-spacing:-.02em;color:var(--band-dk)}
.hero p{margin:0;color:var(--ink-3)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:820px){.grid2,.grid3{grid-template-columns:1fr}.srow{grid-template-columns:1fr}.bar{grid-template-columns:22px 1fr 120px}}
/* 모바일 — 좁은 폭에서 겹치거나 잘리던 것들 */
@media (max-width:560px){
  .site-head .tag{display:none}                        /* 로고·링크와 3줄로 뭉개짐 */
  .band{flex-wrap:wrap;row-gap:6px}
  .band .note{font-size:12px}
  .toggle button{padding:6px 11px;white-space:nowrap}   /* '84㎡' 가 두 줄로 쪼개짐 */
  .bar{grid-template-columns:18px 1fr;row-gap:2px}      /* 값을 막대 아래로 */
  .bar .val{grid-column:2;text-align:left;white-space:normal}
  .commute .bar{grid-template-columns:18px 1fr}
}
.foot{margin:40px 0 30px;color:var(--ink-3);font-size:12px;border-top:1px solid var(--line);padding-top:14px}
.flags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.flags span{background:var(--surface);color:var(--ink-3);border-radius:999px;padding:2px 10px;font-size:12px}
.muted{color:var(--ink-3)}
.legend:not([hidden]){display:flex}
.legend{gap:14px;font-size:12px;color:var(--ink-3);margin-top:8px;flex-wrap:wrap}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-2px;margin-right:4px}
.empty{padding:40px;text-align:center;color:var(--ink-3)}
.provisional{color:var(--ink-3);font-size:12px}
.na{color:var(--ink-3);font-weight:500;font-size:15px}
.empty small{display:block;margin-top:6px;font-size:12px}

/* ---- 아이콘 */
.ic{width:19px;height:19px;flex:0 0 auto;vertical-align:-4px;color:var(--sub)}
.ic.sm{width:15px;height:15px;vertical-align:-3px;margin-right:5px}
.card>.band .ic{color:rgba(255,255,255,.85);margin-right:2px}
.picto .it .k{display:flex;align-items:center}
.picto .it .k .ic{color:var(--sub)}
.btn .ic{color:currentColor;margin-right:7px}

/* ---- 카드에 강조 스트립 (v2.3 §2-C: accent = 카드 상단 스트립) */
.card{position:relative}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent);z-index:2}

/* ---- 히어로 */
.hero .crumb{display:flex;align-items:center;font-size:13px}
.hero .crumb .dim{color:var(--ink-3);opacity:.75}
.hero h1{margin:6px 0 0;font-size:30px;letter-spacing:-.02em;line-height:1.15;color:var(--band-dk)}
.hero .lead{color:var(--ink-3);font-size:15px;margin:8px 0 0}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chips .chip{background:var(--surface);border:1px solid var(--line);color:var(--ink);
  border-radius:999px;padding:3px 11px;font-size:13px;font-weight:600}
.chips .chip.warn{background:var(--tint-warm);border-color:var(--line);color:var(--accent-dk)}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.btn.ghost{background:var(--card);color:var(--band);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--sub);background:var(--surface);text-decoration:none}
.h2ic{display:flex;align-items:center;gap:8px;margin:28px 0 10px;font-size:17px;color:var(--band-dk)}
.h2ic .ic{color:var(--accent-dk)}

/* ========== 애플 제품비교 화면 참고 — 브라우징은 가볍게, 캡처 카드는 블로그 시리즈 유지 ========== */
/* 카드: 어두운 밴드는 캡처(블로그 이미지)에만. 화면에서는 얇은 구분선 + 밝은 헤더 */
.card{box-shadow:0 1px 2px var(--shadow)}
.card::before{display:none}
.capture-card::before{display:block}
.card>.band{background:var(--card);color:var(--band-dk);border-bottom:1px solid var(--line);
  padding:15px 20px;font-size:15px;letter-spacing:-.01em}
.card>.band .note{color:var(--ink-3);opacity:1}
.card>.band .ic{color:var(--accent-dk)}
.capture-card>.band{background:var(--band);color:#fff;border-bottom:0}
.capture-card>.band .ic{color:rgba(255,255,255,.85)}
.capture-card>.band .note{color:rgba(255,255,255,.88)}
.card>.body{padding:22px 20px}

/* 히어로: 여백과 위계 */
.hero{padding:52px 0 22px}
.hero h1{font-size:30px;line-height:1.1;letter-spacing:-.028em;font-weight:700}
.hero>p{font-size:15px;max-width:62ch;line-height:1.6}
.sec-lead{color:var(--ink-3);font-size:15px;margin:-2px 0 18px}
.fine{font-size:13px;margin-top:18px;max-width:78ch}

/* 기준 설명 — 축마다 한 행. 열(축·지표·출처)과 행 높이가 어긋나지 않게 그리드로 고정 */
.about{margin-top:44px}
.axes{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.arow{display:grid;grid-template-columns:170px minmax(0,1fr) 230px;gap:20px;align-items:center;
  padding:14px 20px;border-top:1px solid var(--line-soft)}
.arow:first-child{border-top:0}
.arow.head{background:var(--surface);color:var(--ink-3);font-size:12px;font-weight:700;letter-spacing:.06em;padding:9px 20px}
.arow .ax{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:700;color:var(--band-dk)}
.arow .ax-ic{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:9px;background:var(--surface);flex:0 0 auto}
.arow .ax-ic .ic{width:17px;height:17px;color:var(--band)}
.arow .mets{display:flex;flex-wrap:wrap;gap:8px}
.arow .met{display:inline-flex;align-items:center;gap:7px;background:var(--surface);
  border-radius:999px;padding:5px 6px 5px 13px;font-size:13px}
.arow .met small{color:var(--ink-3);font-size:12px}
.arow .src{color:var(--ink-3);font-size:13px;text-align:right}
@media (max-width:820px){
  .arow{grid-template-columns:1fr;gap:9px;padding:16px 16px}
  .arow.head{display:none}
  .arow .src{text-align:left}
}
.badge{display:inline-block;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700;white-space:nowrap}
.b-percentile{background:var(--tint);color:var(--band)}
.b-band{background:var(--tint-warm);color:var(--accent-dk)}
.b-raw{background:var(--surface);color:var(--ink-3)}
.badge-legend{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px;font-size:13px;color:var(--ink-3)}
.badge-legend b{margin-right:6px}

/* 스펙 표 — 애플 비교표: 값은 크게, 라벨은 조용히, 격자 대신 얇은 선 */
table.spec{font-size:15px}
table.spec th{background:transparent;color:var(--band-dk);border-bottom:2px solid var(--line);
  font-size:13px;padding:10px;position:sticky;top:0;z-index:3}
table.spec thead th{background:var(--card)}
table.spec td{padding:14px 10px;border-bottom:1px solid var(--line-soft)}
table.spec td:first-child{color:var(--ink-3);font-weight:500;font-size:13px}
table.spec td.num{font-size:17px;font-weight:600;letter-spacing:-.02em}
table.spec tr.sec td{background:transparent;color:var(--ink-3);font-size:12px;font-weight:700;
  letter-spacing:.06em;padding:26px 10px 6px;border-bottom:0}
table.spec td.diff{font-size:13px}

/* ========== 비교 선택 — 애플 제품비교: 선택기와 미리보기가 같은 열 그리드 ========== */
.slots{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:16px;margin-top:8px}
.slot{display:flex;flex-direction:column;gap:12px;min-width:0}
.sel{position:relative;display:flex;align-items:center;gap:8px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:0 12px;height:52px}
.sel:focus-within{border-color:var(--sub);box-shadow:0 0 0 3px rgba(110,155,176,.18)}
.sel .mark{width:11px;height:11px;border-radius:50%;background:var(--line);flex:0 0 auto}
.slot.filled .sel .mark.s0{background:var(--s1)}
.slot.filled .sel .mark.s1{background:var(--s2)}
.slot.filled .sel .mark.s2{background:var(--s3)}
.sel input{flex:1;min-width:0;height:100%;border:0;background:transparent;font:inherit;
  font-size:15px;font-weight:600;color:var(--ink);outline:0;padding:0}
.sel input::placeholder{color:var(--ink-3);font-weight:400}
.sel .chev{color:var(--ink-3);flex:0 0 auto}
.sel .clear{border:0;background:transparent;padding:2px;cursor:pointer;color:var(--ink-3);
  flex:0 0 auto}
.sel .clear:not([hidden]){display:inline-flex}
.sel .clear:hover{color:var(--ink)}
.sel .ac{top:54px}
.slotcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:12px;min-height:266px;display:flex;flex-direction:column;gap:10px;flex:1}
.slotcard .ph{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;color:var(--ink-3);font-size:13px;border:1px dashed var(--line);border-radius:var(--r-md)}
.slotcard .ph .ic{width:26px;height:26px;color:var(--line)}
.slotcard .mini .repcard{min-height:0;aspect-ratio:16/10;padding:14px}
.slotcard .mini .repcard .t .nm{font-size:17px}
.slotcard .mini .repcard .t .sub{font-size:12px}
.slotcard .quick{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0}
.slotcard .quick div{background:var(--surface);border-radius:var(--r-xs);padding:8px 10px;min-width:0}
.slotcard .quick dt{color:var(--ink-3);font-size:12px}
.slotcard .quick dd{margin:2px 0 0;font-size:15px;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slotcard .mini-link{font-size:13px;color:var(--band);align-self:flex-start}
.cmpbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin:18px 0 6px;padding:12px 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm)}
.cmpbar .cb-l{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-3);font-weight:600}
@media (max-width:900px){
  .slots{grid-template-columns:1fr 1fr}
  .slot:nth-child(3){grid-column:1/-1}
}
@media (max-width:560px){
  .slots{grid-template-columns:1fr}
  .slot:nth-child(3){grid-column:auto}
  .slotcard{min-height:0}
}
/* 대표 카드 — 브랜드 워드마크(로고 이미지가 아니라 이름 조판) */
.repcard .chiprow{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.repcard .chip.brandmark{border:0;color:#fff;font-weight:800;letter-spacing:-.01em;
  padding:3px 11px;box-shadow:0 1px 3px rgba(15,33,41,.28)}
.repcard .t .nm{text-shadow:0 1px 3px rgba(15,33,41,.4)}
.repcard .t .sub{text-shadow:0 1px 2px rgba(15,33,41,.35)}
.repcard .sgg{text-shadow:0 1px 2px rgba(15,33,41,.35)}
.repcard .chip:not(.brandmark){background:rgba(15,33,41,.42);border-color:rgba(255,255,255,.45);
  backdrop-filter:saturate(120%) blur(2px)}
.repcard.tier-new .chip:not(.brandmark){color:#16262D;background:rgba(255,255,255,.92);
  border-color:rgba(255,255,255,.95);text-shadow:none;font-weight:700}
.repcard.tier-new .sgg{color:#16262D;text-shadow:0 1px 2px rgba(255,255,255,.6)}
.repcard .chip.brandlogo{background:rgba(255,255,255,.94);border-color:rgba(255,255,255,.95);
  padding:5px 10px;display:inline-flex;align-items:center;box-shadow:0 1px 3px rgba(15,33,41,.25)}
.repcard .chip.brandlogo img{height:15px;width:auto;max-width:96px;display:block}
/* ---- 비교 블록 — 애플 제품비교: 지표명은 위에 한 번, 값은 각 열에 크게 가운데 */
.cmp{--gap:14px}

.clabel{text-align:center;font-size:13px;color:var(--ink-3);margin-bottom:10px}

.cc{text-align:center;min-width:0}
.cc .v{font-size:26px;font-weight:600;letter-spacing:-.026em;line-height:1.15}
.cc .v small{font-size:13px;font-weight:500;color:var(--ink-3);margin-left:3px}
.cc .tr{height:6px;border-radius:3px;background:var(--surface);overflow:hidden;margin:10px auto 5px;max-width:180px}
.cc .tr i{display:block;height:100%;border-radius:3px}
.cc .pt{font-size:12px;color:var(--ink-3)}
.cc.none .v{font-size:15px;font-weight:600;color:var(--ink-3)}
.cc.none .tr{opacity:.5}
.mnote{margin:16px 0 0;font-size:13px;color:var(--ink-3);text-align:center}
@media (max-width:640px){
  .cmp{--gap:10px}
  .cc .v{font-size:17px}

}

.cc .sub{font-size:12px;color:var(--ink-3);margin-top:3px}
/* ---- 조건으로 찾기 */
.finder{margin-top:14px}
.fbtn{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:9px 16px;font:inherit;font-size:13px;font-weight:600;color:var(--band);cursor:pointer}
.fbtn:hover{border-color:var(--sub);background:var(--surface)}
.fbtn[aria-expanded="true"]{background:var(--band);color:#fff;border-color:var(--band)}
.fbtn[aria-expanded="true"] .ic{color:#fff}
.fpanel{margin-top:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px}
.frow{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end}
.frow label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--ink-3);font-weight:600}
.frow select{height:40px;border:1px solid var(--line);border-radius:var(--r-xs);background:var(--card);
  font:inherit;font-size:15px;color:var(--ink);padding:0 10px;min-width:150px}
.frow select:focus{outline:2px solid var(--sub);border-color:var(--sub)}
.frow label.chk{flex-direction:row;align-items:center;gap:7px;font-size:13px;color:var(--ink);height:40px}
.fcount{margin:14px 0 8px;font-size:13px;color:var(--ink-3)}
.fcount b{color:var(--band-dk);font-size:15px}
.flist{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:8px;
  max-height:330px;overflow-y:auto;padding-right:4px}
.fitem{text-align:left;background:var(--surface);border:1px solid transparent;border-radius:var(--r-sm);
  padding:10px 12px;cursor:pointer;font:inherit;display:flex;flex-direction:column;gap:2px;min-width:0}
.fitem:hover{border-color:var(--sub);background:var(--card)}
.fitem.picked{border-color:var(--band);background:var(--tint)}
.fitem .fn{font-size:15px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fitem .fm{font-size:12px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fempty{padding:24px;text-align:center;color:var(--ink-3);font-size:13px}
@media (max-width:560px){.frow select{min-width:0;width:100%}.frow label{flex:1 1 100%}}
.frow + .frow{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft)}
.frow select:disabled{background:var(--surface);color:var(--ink-3);cursor:not-allowed}
.frow label:has(select:disabled),.frow label:has(input:disabled){opacity:.7}
.flock{color:var(--accent-dk);font-size:12px;font-weight:600}
.freset{margin-left:auto;align-self:flex-end;height:40px;background:transparent;border:1px solid var(--line);
  border-radius:var(--r-xs);padding:0 14px;font:inherit;font-size:13px;color:var(--ink-3);cursor:pointer}
.freset:hover{border-color:var(--sub);color:var(--band)}
.repcard .chip.builder{background:rgba(255,255,255,.92);border-color:rgba(255,255,255,.95);color:#16262D;
  font-weight:700;font-size:12px;text-shadow:none;box-shadow:0 1px 3px rgba(15,33,41,.25)}

/* ========== 브랜드 — 나란히 ========== */
.site-head .brand{display:inline-flex;align-items:center;gap:8px;color:var(--band-dk);text-decoration:none}
.site-head .brand .mark{width:26px;height:26px;color:var(--band)}
.site-head .brand .wordmark{font-size:17px;font-weight:700;letter-spacing:-.03em}
/* 상단 내비게이션 — 글자만 두면 눌리는 것인지 모른다. 버튼으로 */
.site-head nav a{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid var(--line);
  border-radius:999px;background:var(--card);color:var(--ink-2);font-weight:600;text-decoration:none;
  transition:border-color .12s,background .12s,color .12s}
.site-head nav a:hover{border-color:var(--band);background:var(--surface);color:var(--band);text-decoration:none}
.site-head nav a .ic{width:16px;height:16px;stroke-width:2.1}
/* 현재 화면 버튼 — 호버·포커스에서도 글자색이 배경에 묻히지 않게 함께 고정한다 */
.site-head nav a.on,
.site-head nav a.on:hover,
.site-head nav a.on:focus-visible{background:var(--band);border-color:var(--band);color:#fff}
[data-theme="dark"] .site-head nav a{background:transparent;border-color:var(--line);color:var(--ink-2)}
[data-theme="dark"] .site-head nav a:hover{background:var(--surface);border-color:var(--accent);color:var(--accent)}
[data-theme="dark"] .site-head nav a.on,
[data-theme="dark"] .site-head nav a.on:hover,
[data-theme="dark"] .site-head nav a.on:focus-visible{background:var(--accent);border-color:var(--accent);color:#0B0F17}
.foot .fbrand{margin-bottom:8px;color:var(--band-dk)}
.btn.sm{padding:7px 12px;font-size:13px;border-radius:10px}

/* 바로가기 칩 — 항상 한 줄. 넘치면 옆으로 밀어 본다 */
.quickwrap{position:relative;margin:14px 0 0}
.quick{display:flex;flex-wrap:nowrap;gap:8px;margin:0;overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none;padding:2px 0}
.quick::-webkit-scrollbar{display:none}
.quick .qchip{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start}
/* 양 끝 흐림과 화살표 — 밀 수 있을 때만 나타난다 */
.quickwrap::before,.quickwrap::after{content:"";position:absolute;top:0;bottom:0;width:56px;pointer-events:none;
  opacity:0;transition:opacity .18s;z-index:1}
.quickwrap::before{left:0;background:linear-gradient(90deg,var(--bg) 26%,transparent)}
.quickwrap::after{right:0;background:linear-gradient(270deg,var(--bg) 26%,transparent)}
.quickwrap.has-prev::before,.quickwrap.has-next::after{opacity:1}
.qnav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:30px;height:30px;padding:0;
  display:none;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%;
  background:var(--card);color:var(--ink-2);cursor:pointer;box-shadow:0 2px 8px rgba(15,23,42,.12)}
.qnav svg{width:16px;height:16px;display:block}
.qnav:hover{color:var(--ink);border-color:var(--ink-3)}
.qnav.prev{left:-2px}
.qnav.next{right:-2px}
.quickwrap.has-prev .qnav.prev,.quickwrap.has-next .qnav.next{display:flex}
[data-theme="dark"] .qnav{box-shadow:0 2px 8px rgba(0,0,0,.5)}
@media (hover:none){.qnav{display:none!important}}   /* 폰은 손가락으로 밀면 된다 */
.qchip{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-size:13px;color:var(--ink);font-weight:500}
.qchip:hover{border-color:var(--sub);text-decoration:none;background:var(--surface)}
.search.big{margin-top:6px}
.search.big label{display:flex;align-items:center;font-size:13px;color:var(--ink-3);margin-bottom:6px}
.fpanel.list{margin-top:14px}

/* ---- 단지 찾기 목록 */
.ltop{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:16px 0 10px}
.ltop .fcount{margin:0}
.lsort{font-size:13px;color:var(--ink-3);display:flex;align-items:center;gap:8px}
.lsort select{height:34px;border:1px solid var(--line);border-radius:10px;background:var(--card);font:inherit;font-size:13px;padding:0 10px}
.lgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.lcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.lcard .lc-img{display:block}
.lcard .lc-img .repcard{min-height:0;aspect-ratio:16/10;padding:12px;border-radius:0}
.lcard .lc-img .repcard .t .nm{font-size:15px}
.lcard .lc-img .repcard .t .sub{font-size:12px}
.lcard .lc-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.lcard .lc-name{font-weight:700;font-size:15px;color:var(--ink);letter-spacing:-.01em}
.lcard .lc-loc{font-size:13px;color:var(--ink-3)}
.lcard .lc-facts{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.lcard .lc-facts span{background:var(--surface);border-radius:8px;padding:3px 8px;font-size:12px;color:var(--ink)}
.lcard .lc-act{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:8px}
.lcard .lc-act .lnk{font-size:13px}
.lcard .fitem.picked{background:var(--band);color:#fff;border-color:var(--band)}
.pager{display:flex;justify-content:center;align-items:center;gap:6px;margin:22px 0 6px;flex-wrap:wrap}
.pager .pg{min-width:36px;height:36px;border:1px solid var(--line);border-radius:10px;background:var(--card);font:inherit;font-size:13px;cursor:pointer;color:var(--ink)}
.pager .pg.on{background:var(--band);color:#fff;border-color:var(--band);font-weight:700}
.pager .pg:disabled{opacity:.4;cursor:default}
.pager .gap{color:var(--ink-3);padding:0 2px}
.tray{position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px 16px;pointer-events:none}

.tray .btn{margin-left:auto;background:var(--card);color:var(--band-dk)}
@media (max-width:1000px){.lgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px){.lgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.site-head .tag{display:none}}
@media (max-width:460px){.lgrid{grid-template-columns:1fr}}
/* 대표 카드 — 실사 이미지가 있을 때 */
.repcard.photo img.art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.repcard.photo .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,33,41,.05) 35%,rgba(15,33,41,.72) 100%)}
.repcard.photo .sgg,.repcard.photo .chip:not(.brandmark):not(.brandlogo):not(.builder){color:#fff;background:rgba(15,33,41,.42);text-shadow:0 1px 2px rgba(15,33,41,.35)}

/* ========== APT:VS 워드마크 · 테마 토글 ========== */
.site-head .brand .wm{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:24px;letter-spacing:-.02em;color:var(--band-dk)}
.site-head .brand .wm-b{color:var(--accent)}
.wm-colon{display:inline-flex;flex-direction:column;gap:5px;margin:0 1px}
.wm-colon i{display:block;width:7px;height:7px;border-radius:2px;background:var(--accent)}
.wm-colon i+i{background:var(--band-dk)}
[data-theme="dark"] .site-head .brand .wm{color:var(--ink)}
[data-theme="dark"] .wm-colon i+i{background:var(--ink)}
.theme-toggle{border:1px solid var(--line);background:var(--card);color:var(--ink-3);width:34px;height:34px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;margin-left:6px;padding:0}
.theme-toggle:hover{color:var(--accent);border-color:var(--sub)}
.theme-toggle svg{width:17px;height:17px}
.theme-toggle .moon{display:none}
[data-theme="dark"] .theme-toggle .sun{display:none}
[data-theme="dark"] .theme-toggle .moon{display:block}
.site-head{border-bottom-color:var(--line)}

.btn{background:var(--accent);color:var(--on-accent)}
.btn:hover{filter:brightness(1.06)}
.btn.ghost{background:var(--card);color:var(--accent);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--sub);background:var(--tint)}
.hero h1,.h2ic,.arow .ax,.axis h3,.lcard .lc-name,.card>.band{color:var(--ink)}
.h2ic .ic,.card>.band .ic{color:var(--accent)}
.b-percentile{background:var(--tint);color:var(--accent-dk)}
.b-band{background:var(--tint-warm);color:#B4650F}
.chips .chip.warn{background:var(--tint-warm);color:#B4650F;border-color:var(--line)}
.flock{color:#B4650F}
.arow .ax-ic .ic,.axis .ax-ic .ic{color:var(--accent)}
.cmp .cc .tr{background:var(--surface)}
.picto .it .k .ic,.ic{color:var(--sub)}

[data-theme="dark"] .tray .btn{background:var(--accent);color:var(--on-accent)}
[data-theme="dark"] .capture-card>.band{background:var(--band)}
[data-theme="dark"] .capture-card .runner{background:var(--surface)}
[data-theme="dark"] .repcard .chip.brandlogo,[data-theme="dark"] .repcard .chip.builder,
[data-theme="dark"] .repcard.tier-new .chip:not(.brandmark){background:rgba(255,255,255,.92);color:#16262D}
[data-theme="dark"] .search input,[data-theme="dark"] .frow select,[data-theme="dark"] .lsort select,[data-theme="dark"] .sel{background:var(--card);color:var(--ink);border-color:var(--line)}
[data-theme="dark"] .search .ac{background:var(--card);border-color:var(--line)}
[data-theme="dark"] .empty{color:var(--ink-3)}
[data-theme="dark"] .leaflet-tile{filter:brightness(.62) invert(1) contrast(2.6) hue-rotate(200deg) saturate(.35) brightness(.72)}
[data-theme="dark"] .leaflet-container{background:#0B0F17}
[data-theme="dark"] .leaflet-control-attribution{background:rgba(18,24,38,.8);color:var(--ink-3)}
[data-theme="dark"] .lbl{background:var(--card);color:var(--ink);border-color:var(--line)}
[data-theme="dark"] .picto .it .v,.picto .it .v{color:var(--ink)}
[data-theme="dark"] .fitem{background:var(--surface)}
[data-theme="dark"] .fitem:hover{background:var(--card)}
[data-theme="dark"] .qchip{background:var(--card)}
[data-theme="dark"] .pager .pg{background:var(--card);color:var(--ink)}
[data-theme="dark"] .pager .pg.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
[data-theme="dark"] .sel .clear{color:var(--ink-3)}
[data-theme="dark"] .slotcard .ph{border-color:var(--line)}
[data-theme="dark"] .slotcard .ph .ic{color:var(--line)}
/* 다크 보정 — 어두운 배경에서 안 보이던 것들 */
.dst .k,.srow .k,.foot .fbrand,.mk,.clabel{color:var(--ink)}
.foot .fbrand{color:var(--ink)}
[data-theme="dark"] .bar .dot{opacity:.9}
[data-theme="dark"] .dst{background:var(--surface)}
[data-theme="dark"] .capture-card .runner b{color:var(--ink)}

[data-theme="dark"] .mrow.head{background:var(--card)}
[data-theme="dark"] .toggle{background:var(--card);border-color:var(--line)}
[data-theme="dark"] .toggle button.on{background:var(--accent)}
[data-theme="dark"] table.spec thead th{background:var(--card)}
.capture-card>.band,.capture-card>.band .nm{color:#fff}
.capture-card>.band .ic{color:rgba(255,255,255,.85)}

/* ========== 한눈에 보기 — 축별 그룹 카드 (축 고유색) ========== */
:root{--ax-scale:#3D5BFF;--ax-parking:#0EA5A4;--ax-station:#7C5CFF;--ax-commute:#F59E0B;--ax-redev:#16A34A;--ax-price:#E5484D}
.grid2.top{align-items:stretch}
.grid2.top .card{display:flex;flex-direction:column}
.grid2.top .card>.body{flex:1;display:flex;flex-direction:column}
.grid2.top .repcard{flex:1;min-height:300px;aspect-ratio:auto}
.map-body .map{flex:1;min-height:300px;height:auto}
.map-cap{font-size:13px;margin-top:8px}

.sec-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.sec-head h2{margin:0;font-size:17px;display:flex;align-items:center;gap:8px;color:var(--ink)}
.sec-head h2 .ic{color:var(--accent)}
.sec-head .note{font-size:13px;color:var(--ink-3)}
.ggrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}

.gbar .tr{height:7px;border-radius:4px;background:var(--surface);overflow:hidden}
.gbar .tr i{display:block;height:100%;border-radius:4px}
.gbar .pt{display:block;font-size:12px;color:var(--ink-3);margin-top:5px}
.gbar .pt b{color:var(--ink);font-weight:700}
.gbar.none .pt{color:var(--ink-3)}
.gf{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.gf li{display:flex;justify-content:space-between;gap:10px;font-size:13px;border-top:1px solid var(--line-soft);padding-top:5px}
.gf li span{color:var(--ink-3)}
.gf li b{font-weight:600;color:var(--ink);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gf.cml li{display:grid;grid-template-columns:58px 18px 1fr 52px;align-items:center;gap:8px;padding-top:7px}
.gf.cml .tr{height:6px;border-radius:3px;background:var(--surface);overflow:hidden}
.gf.cml .tr i{display:block;height:100%;border-radius:3px}
.gf.cml li.none b{color:var(--ink-3)}
/* 상세 스펙 표 */
/* 상세 스펙 — 항목명 왼쪽, 값 오른쪽의 스펙표. 거래내역의 .drow 격자와 섞이지 않게 .dgrid 안에서 다시 정의한다 */
.dgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 36px}
.dgrid .drow{display:grid;grid-template-columns:minmax(96px,34%) minmax(0,1fr);align-items:baseline;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:13px;white-space:normal}
.dgrid .drow .dk{color:var(--ink-3);word-break:keep-all;text-align:left;justify-content:flex-start}
.dgrid .drow .dv{font-weight:600;text-align:right;min-width:0;overflow:visible;text-overflow:clip;white-space:normal;
  word-break:keep-all;overflow-wrap:anywhere;justify-content:flex-end}
.dgrid .drow .dv small{font-weight:400;color:var(--ink-3);margin-left:3px}
.dgrid .drow .na{font-weight:500;color:var(--ink-3)}
/* 카카오맵 마커 */
.kmk{display:flex;align-items:center;gap:5px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:3px 9px 3px 5px;
  font-size:12px;font-weight:700;color:var(--ink);box-shadow:0 2px 8px var(--shadow-lg);white-space:nowrap}
.kmk .kdot{width:10px;height:10px;border-radius:50%;display:inline-block}
@media (max-width:1000px){.ggrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ggrid{grid-template-columns:1fr}.dgrid{grid-template-columns:1fr}
}

/* ========== 정보 위계 — ① 가격 ② 핵심 ③ 상세(접힘) ========== */
.tier1{display:flex;align-items:baseline;gap:10px;margin:26px 0 10px;font-size:17px;letter-spacing:-.02em;color:var(--ink)}
.tier1 span{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;background:var(--accent);color:var(--on-accent);font-size:13px;font-weight:800}
.tier1 small{font-size:13px;color:var(--ink-3);font-weight:500}
.hero-empty{padding:26px 18px;text-align:center;color:var(--ink-3);font-size:15px;background:var(--surface);border-radius:var(--r-md);margin-top:14px}

.pc{text-align:center;padding:6px 8px 0;border-top:3px solid var(--s);}
.pc .pv{font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1.1;color:var(--ink)}
.pc .pv small{font-size:13px;font-weight:500;color:var(--ink-3);margin-left:5px;letter-spacing:0}
.pc .pv.na{font-size:15px;font-weight:500;color:var(--ink-3);padding:8px 0}
.pf{list-style:none;margin:12px 0 0;padding:0;text-align:left}
.pf li{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:6px 0;border-top:1px solid var(--line-soft)}
.pf li span{color:var(--ink-3)}
.pf li b{font-weight:600}
.chg.up{color:var(--up)}.chg.down{color:var(--down)}
.pchart{margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.pchart-h{font-size:13px;color:var(--ink-3);margin-bottom:8px}

.fold{margin:10px 0;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);overflow:hidden}
.fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 18px;user-select:none}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary .ft{font-weight:700;color:var(--ink)}
.fold>summary .fn{color:var(--ink-3);font-size:13px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fold>summary .fchev{font-size:13px;color:var(--accent);font-weight:600;white-space:nowrap}
.fold>summary .fchev::after{content:" ▾"}
.fold[open]>summary{border-bottom:1px solid var(--line)}
.fold[open]>summary .fchev{color:var(--ink-3)}
.fold[open]>summary .fchev::after{content:" ▴"}
.fold .fbody{padding:12px}
.fold .fbody .capture-card{margin:0 0 12px}
.fold .fbody .capture-card:last-child{margin-bottom:0}
.fold .fbody .card{border:0;box-shadow:none}

/* ---- 비교 블록 — 왼쪽 좁은 라벨 열 + 값 열. 라벨은 조용히, 값은 크게, 구분은 선과 여백으로 */
.cmp{--lab:98px}

.hero-empty{grid-column:1/-1}
@media (max-width:760px){
  .cmp{--lab:1fr}

}

/* 지하철 노선 배지 · 역세권 셀 */
/* 노선 배지 — 바탕은 비우고 테두리에만 노선색.
   글자에 노선색을 그대로 쓰면 12px 에서 4.5:1 을 못 넘는 노선이 많다 —
   밝은 화면에서는 검정 쪽으로 눌러 쓰고, 어두운 화면에서는 흰 쪽으로 띄워 쓴다. */
.lb{display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;
  border:1.5px solid var(--lc,var(--line));background:transparent;
  color:color-mix(in srgb,var(--lc,var(--ink-2)) 60%,#000);   /* 72% 는 옅은 노선(9호선 금색)에서 3.98:1 이었다 */
  font-size:12px;font-weight:800;letter-spacing:-.01em;white-space:nowrap}
[data-theme="dark"] .lb{color:color-mix(in srgb,var(--lc,var(--ink-2)) 58%,#fff)}
.lbs{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-bottom:6px}

.cc.st .v{font-size:22px}
.cc.st .pt b{color:var(--ink);font-weight:700}

/* ========== 타이포 스케일·줄간격 (12·13·15·17·20·22·26·30) ========== */
html,body{line-height:1.55}
h1,h2,h3,.tier1,.sec-head h2,.hero h1{line-height:1.25}
.hero h1{font-size:30px;letter-spacing:-.025em}
.hero>p,.lead{line-height:1.6}
.pc .pv,.cc .v,.picto .it .v,.cc.st .v{line-height:1.15}

.pc .pv{font-size:30px}
.cc .v{font-size:22px}

.cc.st .v{font-size:20px}
.picto .it .v{font-size:20px}
.repcard .t .nm{font-size:20px;line-height:1.25}
.site-head .brand .wm{font-size:24px}
.tier1{font-size:17px}
.axis h3{font-size:15px}
.card>.band{font-size:15px}
small,.pt,.note,.muted,.fine,.gf li,.pf li,.drow,.gbar .pt,.lc-facts span,.fm{line-height:1.45}
.gf li,.pf li,.drow{padding-top:7px;padding-bottom:7px}

/* ---- 핵심 비교 셀 — 값 / 막대 슬롯 / 캡션 3줄 고정. 배지는 값과 같은 줄 */
.cc.k{display:grid;grid-template-rows:30px 14px 20px;align-items:center;justify-items:center;row-gap:0;padding:2px 0}
.cc.k .v{font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1;display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap}
.cc.k .v small{font-size:13px;font-weight:500;color:var(--ink-3);letter-spacing:0;margin:0}
.cc.k .v .lb{align-self:center;margin-right:2px;font-size:11px;padding:2px 8px}
.cc.k .tr{width:min(180px,80%);height:6px;margin:0;border-radius:3px;background:var(--surface);overflow:hidden;align-self:center}
.cc.k .tr.off{visibility:hidden}
.cc.k .pt{font-size:13px;line-height:1;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cc.k .pt b{color:var(--ink);font-weight:600}
.cc.k.none .v{font-size:15px;font-weight:500;color:var(--ink-3)}

/* ---- 핵심 비교 셀 4줄 템플릿: 태그 / 값 / 막대 슬롯 / 캡션 — 모든 행 같은 높이 */
.cc.k{grid-template-rows:22px 30px 14px 20px;padding:0}
.cc.k .tag{display:flex;align-items:center;justify-content:center;gap:4px;min-height:22px}
.cc.k .tag:empty{visibility:hidden}
.ktag{display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;
  background:var(--surface);color:var(--ink)}
.ktag.warn{background:var(--tint-warm);color:#B4650F}
.cc.k .tag .lb{font-size:12px;padding:2px 9px}
.cc.k .v .lb{display:none}

/* '＋N' 더보기 — 11px 작은 글씨라 강조색 그대로는 4.5:1 을 못 넘는다. 색은 유지하고 눌러 쓴다 */
.stblock .more{position:absolute;top:2px;right:8px;font-size:11px;font-weight:700;
  color:color-mix(in srgb,var(--accent) 74%,#000);
  background:var(--tint);border-radius:999px;padding:1px 7px}
.stblock{display:block;width:100%;text-align:left;border:0;background:transparent;font:inherit;color:inherit;cursor:pointer;padding:0;position:relative;border-radius:10px}
.stblock:hover{background:var(--surface)}
.stblock .more{top:0;right:0}

/* 팝업 */
.pop-ov{position:fixed;inset:0;background:rgba(10,15,25,.45);display:none;align-items:center;justify-content:center;z-index:100;padding:20px}
.pop-ov.on{display:flex}
.pop{background:var(--card);color:var(--ink);border-radius:12px;width:min(520px,100%);max-height:85vh;overflow:auto;box-shadow:0 24px 60px var(--shadow-lg)}
.pop-h{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 12px;border-bottom:1px solid var(--line)}
.pop-t{font-size:17px;font-weight:700}
.pop-x{border:0;background:var(--surface);width:32px;height:32px;border-radius:50%;font-size:18px;cursor:pointer;color:var(--ink)}
.pop-b{padding:10px 18px 18px}
.stl{list-style:none;margin:0;padding:0}
.stl li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line-soft)}
.stl li.main{background:var(--tint);border-radius:12px;padding:12px 10px;border-bottom:0;margin-bottom:4px}
.stl li:last-child{border-bottom:0}
.stl .sl{display:flex;gap:4px;min-width:64px}
.stl .sn{font-size:17px;font-weight:700}
.stl .sn small{margin-left:8px;font-size:12px;color:var(--accent);font-weight:700}
.stl .sd{font-size:13px;color:var(--ink-3);text-align:right;display:flex;flex-direction:column;gap:2px}
.stl .sd b{color:var(--ink);font-size:15px}
.stl li.none{display:block;text-align:center;color:var(--ink-3);padding:24px}
.pop-note{margin:12px 0 0;font-size:12px;color:var(--ink-3)}

/* ---- 핵심 비교 셀 — 쓰는 슬롯만, 요소 간격 5px 일정. 한 행 안의 셀은 같은 슬롯이라 정렬 유지 */
.cc.k{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;grid-template-rows:none;padding:2px 0}

/* 높이를 못 박으면 두 줄짜리 알약이 아랫줄 글자를 덮는다 — 최소 높이로 둔다 */
.cc.k .tag{min-height:20px;display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap}
.cc.k .v{height:28px;line-height:28px}
.cc.k .tr{height:6px;margin:1px 0}
.cc.k .pt{height:16px;line-height:16px}

/* 컨소시엄 표기 — 대표 브랜드 + 작은 태그 */
.chip.consortium{display:inline-flex;align-items:center;gap:6px}
.chip .co{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.02em;color:var(--on-accent);background:var(--accent);border-radius:5px;padding:1px 5px;line-height:1.3}
.chip.brandlogo .co{margin-left:2px}
/* 정사각 마크(디에이치 등)는 가로형 로고보다 키워야 같은 존재감 */
.repcard .chip.brandlogo img[src$="theh.svg"]{height:22px}

/* ---- 대표 카드 상단: 준공년도 + 위치. 박스 대신 위쪽 그라데이션으로 가독성 */
.repcard .sgg{display:flex;align-items:baseline;gap:9px;background:none!important;padding:0;font-size:12px;color:rgba(255,255,255,.92);
  text-shadow:0 1px 2px rgba(15,33,41,.45)}
.repcard .sgg .yr{font-size:17px;font-weight:800;letter-spacing:-.02em;color:#fff;line-height:1}
.repcard .sgg .yr small{font-size:11px;font-weight:600;margin-left:3px;opacity:.85}
.repcard.tier-new:not(.photo) .sgg{color:#16262D;text-shadow:0 1px 2px rgba(255,255,255,.7)}
.repcard.tier-new:not(.photo) .sgg .yr{color:#16262D}
.repcard.photo .scrim{background:linear-gradient(180deg,rgba(15,33,41,.55) 0%,rgba(15,33,41,0) 30%,rgba(15,33,41,0) 52%,rgba(15,33,41,.74) 100%)}
.repcard .chiprow:empty{display:none}
.repcard .sgg{max-width:calc(100% - 150px)}
.repcard .sgg span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* 상단 왼쪽: 준공년도 / 위치 두 줄 — 오른쪽 로고 칩과 겹치지 않는다 */
.repcard .sgg{flex-direction:column;align-items:flex-start;gap:3px;max-width:calc(100% - 118px);white-space:nowrap}
.repcard .sgg .yr{white-space:nowrap}
.repcard .sgg span{display:block;max-width:100%}
/* 상단 주소 한 줄(박스 없음) · 준공연도 칩은 단지명 위 */
.repcard .sgg{flex-direction:row;display:block;max-width:calc(100% - 118px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}
.repcard .chip.yr{font-weight:700}
/* 컨소시엄 — 참여사 브랜드 로고 나열 */
.chip.brandlogo.multi img{height:12px;max-width:54px;margin-right:2px}
.chip.brandlogo.multi img[src$="theh.svg"],.chip.brandlogo.multi img[src$="epyeonhan.png"]{height:16px}
.repcard:has(.chip.multi) .sgg{max-width:calc(100% - 175px)}
.chip.brandlogo.multi{padding:4px 8px}
.chip.brandlogo.multi img{max-width:44px;height:11px}
.chip.brandlogo.multi .co{font-size:9.5px;padding:1px 4px}
/* 컨소시엄 칩: [컨소시엄] 대표 로고/시공사명 */
.chip.consortium{gap:6px}
.chip.consortium .co{margin:0}
.chip.consortium img{height:13px;max-width:70px}
.repcard:has(.chip.consortium) .sgg{max-width:calc(100% - 150px)}
/* 로고 크기 80% 로 */
.repcard .chip.brandlogo img{height:12px;max-width:78px}
.repcard .chip.brandlogo{padding:4px 9px}
.chip.consortium img{height:11px;max-width:60px}
.repcard .chip.brandlogo img[src$="theh.svg"]{height:18px}
.chip.brandlogo.multi img[src$="theh.svg"],.chip.brandlogo.multi img[src$="epyeonhan.png"]{height:13px}

/* 1위 표기 / 차이 표기 */
.cc .pt b.top{color:var(--accent-dk);font-weight:700}
.cc .pt b.gap{color:var(--ink);font-weight:600}
.cc.k .pt b.top,.cc.k .pt b.gap{font-weight:700}
.picto.p5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:980px){.picto.p5{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 접근성 — 본문 바로가기 (탭으로 들어오면 나타난다) */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:var(--on-accent);padding:10px 16px;border-radius:0 0 10px 0;font-weight:700}
.skip:focus{left:0;text-decoration:none}
:focus-visible{outline:3px solid var(--sub);outline-offset:2px;border-radius:6px}

/* ---- 최근 본 단지 */
#recent{margin-top:26px}
.rlist{display:flex;flex-wrap:wrap;gap:8px}
.ritem{display:inline-flex;flex-direction:column;gap:2px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:9px 14px;min-width:0}
.ritem:hover{border-color:var(--sub);text-decoration:none;background:var(--surface)}
.ritem b{font-size:13px;font-weight:700;color:var(--ink)}
.ritem span{font-size:12px;color:var(--ink-3)}
.ritem.clear{border-style:dashed;color:var(--ink-3);cursor:pointer;font:inherit;font-size:12px;align-items:center;justify-content:center}
/* ---- 토스트 */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,12px);background:var(--band-dk);color:#fff;
  padding:11px 18px;border-radius:999px;font-size:13.5px;font-weight:600;opacity:0;pointer-events:none;
  transition:opacity .18s,transform .18s;z-index:120;box-shadow:0 10px 30px var(--shadow-lg)}
.toast.on{opacity:1;transform:translate(-50%,0)}
/* ---- 목록 로딩 스켈레톤 */
.skeleton{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:16px}
.sk-card{height:270px;border-radius:var(--r-lg);background:linear-gradient(100deg,var(--surface) 30%,var(--card) 50%,var(--surface) 70%);
  background-size:200% 100%;animation:sk 1.2s infinite}
@keyframes sk{from{background-position:200% 0}to{background-position:-200% 0}}
@media (max-width:1000px){.skeleton{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px){.skeleton{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- 데이터 현황 */
.dstat{margin-top:30px}
.dstat-list{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:6px 18px}
.drow2{display:grid;grid-template-columns:150px 1fr 46px minmax(0,260px);align-items:center;gap:14px;
  padding:11px 0;border-top:1px solid var(--line-soft);font-size:13px}
.drow2:first-child{border-top:0}
.drow2 .dl{font-weight:600;color:var(--ink)}
.drow2 .db{height:7px;border-radius:4px;background:var(--surface);overflow:hidden}
.drow2 .db i{display:block;height:100%;border-radius:4px;background:var(--accent)}
.drow2 .db i.ok{background:#16A34A}
.drow2 .db i.mid{background:#F59E0B}
.drow2 .db i.low{background:var(--ink-3)}
.drow2 .dn{text-align:right;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.drow2 .ds{color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:760px){.drow2{grid-template-columns:1fr 60px;gap:6px 10px}.drow2 .db{grid-column:1/-1;order:3}.drow2 .ds{grid-column:1/-1;order:4}}

/* ---- 모바일 터치 타깃 (권장 44px) */
@media (max-width:760px){
  .site-head .brand{min-height:44px;display:inline-flex;align-items:center}
  .site-head nav a{min-height:44px;display:inline-flex;align-items:center;padding:0 12px}
  .theme-toggle{width:44px;height:44px}
  .lcard .lc-name{display:inline-flex;align-items:center;min-height:44px}
  .lcard .lc-act .lnk,.lcard .lc-act .btn{min-height:44px;display:inline-flex;align-items:center}
  .sel .clear{width:40px;height:40px;justify-content:center}
  .sel{height:56px}
  .qchip,.fitem{min-height:44px;display:inline-flex;align-items:center}
  .fitem{flex-direction:column;justify-content:center;align-items:flex-start}
  .pop-x{width:44px;height:44px}
  .ritem{min-height:44px;justify-content:center}
  .pager .pg{min-width:44px;height:44px}
}
@media (max-width:760px){
  .capture-card .band button.png{min-height:40px;padding:8px 14px}
  .slotcard .mini-link{min-height:44px;display:inline-flex;align-items:center}
  .repcard .series,.chip{min-height:0}
}
/* 모바일 헤더 — 내비가 줄바꿈되지 않게 */
@media (max-width:760px){
  .site-head .wrap{gap:10px;height:auto;padding-top:8px;padding-bottom:8px}
  .site-head nav{gap:12px;flex-wrap:nowrap}
  .site-head nav a{white-space:nowrap;font-size:13px}
  .site-head .brand .wm{font-size:21px}
}
@media (max-width:400px){
  .site-head nav{gap:9px}
  .site-head nav a{font-size:12.5px}
  .theme-toggle{width:38px;height:38px;margin-left:2px}
}
/* 목록 카드 — 이름과 평당가 */
.lc-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0}
.lc-head .lc-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lc-price{white-space:nowrap;color:var(--ink)}
.lc-price b{font-size:15px;font-weight:700;letter-spacing:-.02em}
.lc-price small{font-size:11px;color:var(--ink-3);margin-left:2px}

.ce-lead{color:var(--ink-3);font-size:14px;margin:0 0 14px}
.ce-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.ce-card{display:flex;flex-direction:column;gap:4px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:16px 18px;min-width:0}
.ce-card:hover{border-color:var(--sub);background:var(--surface);text-decoration:none}
.ce-card b{font-size:15px;color:var(--ink)}
.ce-card span{font-size:12.5px;color:var(--ink-3)}
.ce-card em{font-style:normal;font-size:12.5px;color:var(--accent-dk);margin-top:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ce-tip{margin:16px 0 0;font-size:12.5px;color:var(--ink-3)}
.ce-tip b{background:var(--surface);border-radius:5px;padding:1px 6px;font-weight:700;color:var(--ink)}
.gnote{font-size:11.5px;color:var(--ink-3);margin-top:6px}

/* ---- 실거래 추이: 왼쪽 차트 · 오른쪽 거래내역 */
.tsplit{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px;align-items:start}
.tspane{min-width:0}
.tsh{display:flex;align-items:baseline;gap:8px;margin:0 0 10px;font-size:13px;font-weight:700;color:var(--ink-2);
  letter-spacing:.02em}
.tsh .fine{font-weight:500}
.tsbox{position:relative;height:252px}
.legend i.dash{height:2px;width:16px;border-radius:0;opacity:.75;
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 5px,transparent 5px 9px);mask:repeating-linear-gradient(90deg,#000 0 5px,transparent 5px 9px)}
.deals{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--card)}
.dhead,.drow{display:grid;grid-template-columns:1fr .95fr 1fr 76px 1.05fr;align-items:center;gap:8px;padding:8px 14px;
  font-size:13px;font-variant-numeric:tabular-nums}
.dhead{background:var(--surface);color:var(--ink-3);font-size:12px;font-weight:600;letter-spacing:.02em}
.dbody{max-height:212px;overflow-y:auto;overscroll-behavior:contain}
.drow{border-top:1px solid var(--line-soft)}
.drow:first-child{border-top:0}
.drow .dd{color:var(--ink-2)}
.drow .da,.drow .df{color:var(--ink-3)}
.drow .dp{text-align:right;font-weight:700;color:var(--ink)}
.drow .dp em{margin-left:6px;padding:1px 5px;border-radius:4px;background:var(--surface);color:var(--ink-3);
  font-style:normal;font-size:11px;font-weight:600}
.drow.cx .dp{color:var(--ink-3);text-decoration:line-through;font-weight:600}
@media (max-width:860px){.tsplit{grid-template-columns:1fr;gap:20px}.dbody{max-height:260px}}

/* ---- 관리자 (admin.html) */
.stat-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:18px}
.stat-strip .sitem{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px}
.stat-strip .sitem .k{display:block;font-size:12px;color:var(--ink-3);margin-bottom:5px}
.stat-strip .sitem b{font-size:22px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.gradebars .drow2{grid-template-columns:64px 1fr 46px minmax(0,120px)}
.sfilter{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.sfilter input{flex:0 1 260px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);font:inherit;font-size:13px}
.tbl-wrap{max-height:420px;overflow:auto;border:1px solid var(--line);border-radius:var(--r-md)}
.tbl{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.tbl thead th{position:sticky;top:0;z-index:1;background:var(--surface);color:var(--ink-3);font-size:12px;
  font-weight:600;text-align:left;padding:9px 12px;cursor:pointer;white-space:nowrap}
.tbl thead th.num,.tbl td.num{text-align:right}
.tbl tbody th{text-align:left;font-weight:600;padding:8px 12px;color:var(--ink)}
.tbl tbody td{padding:8px 12px;color:var(--ink-2)}
.tbl tbody tr{border-top:1px solid var(--line-soft)}
.tbl td small{display:inline-block;margin-left:6px;color:var(--ink-3);font-size:11px;min-width:30px}
.flaglist{display:flex;flex-wrap:wrap;gap:8px}
.flaglist .chip{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border:1px solid var(--line);
  border-radius:999px;background:var(--surface);font-size:12px;color:var(--ink-2)}
.flaglist .chip b{font-variant-numeric:tabular-nums;color:var(--ink)}

.pdl{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--card)}
.pdl .dhead,.pdl .drow{grid-template-columns:50px 44px minmax(0,1fr) auto;gap:5px;white-space:nowrap;padding:6px 8px;font-size:12px}
.pdl .dbody{max-height:236px}
.pdl.none{min-height:120px;display:flex;align-items:center;justify-content:center}
.pdl .empty{padding:0;font-size:13px;color:var(--ink-3)}
.pdl-n{padding:6px 10px;border-top:1px solid var(--line-soft);font-size:11px;color:var(--ink-3);text-align:right}

.adm-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:22px 0 16px;padding:4px;background:var(--surface);border-radius:var(--r-md);width:fit-content}
.adm-tabs button{padding:7px 13px;border:0;border-radius:8px;background:none;color:var(--ink-2);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.adm-tabs button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.stat-strip .sitem b small{font-size:12px;color:var(--ink-3);font-weight:500;margin-left:4px}
.stat-strip .good{color:#16A34A}
.stat-strip .bad{color:var(--up)}
.tbl-wrap.tall{max-height:520px}
.tbl th .code{display:block;font-size:11px;color:var(--ink-3);font-weight:500;font-family:ui-monospace,Menlo,Consolas,monospace}
.tbl tr.click{cursor:copy}
.tbl tr.click:hover{background:var(--surface)}
.tbl a{color:var(--accent);text-decoration:none}
.flaglist button.chip{cursor:pointer;font:inherit;font-size:12px}
.flaglist .chip.on{background:var(--ink);color:var(--card);border-color:var(--ink)}
.flaglist .chip.on b{color:var(--card)}
.logbox{margin:0;padding:14px 16px;background:var(--surface);border-radius:var(--r-md);font:12px/1.55 ui-monospace,Menlo,Consolas,monospace;
  color:var(--ink-2);white-space:pre-wrap;word-break:break-all;max-height:520px;overflow:auto}
.viewer .vhead{font-size:14px;margin-bottom:10px}
.viewer .vhead a{color:var(--accent);text-decoration:none;margin-left:6px}
.viewer .vgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.viewer h4{margin:0 0 6px;font-size:12px;color:var(--ink-3);font-weight:600}
.viewer pre{margin:0;padding:12px;background:var(--surface);border-radius:var(--r-md);font:11.5px/1.5 ui-monospace,Menlo,Consolas,monospace;
  color:var(--ink-2);white-space:pre-wrap;word-break:break-all;max-height:520px;overflow:auto}
@media (max-width:760px){.viewer .vgrid{grid-template-columns:1fr}}

/* ---- 실거래 타입(전용면적) 필터 */
.types{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 14px}
.types .tl{font-size:12px;font-weight:600;color:var(--ink-3);margin-right:4px}
.tchip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--line);border-radius:999px;
  background:var(--card);color:var(--ink-2);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;font-variant-numeric:tabular-nums}
.tchip b{font-weight:500;color:var(--ink-3)}
.tchip:hover{border-color:var(--ink-3)}
.tchip.on{background:var(--ink);color:var(--card);border-color:var(--ink)}
.tchip.on b{color:var(--card);opacity:.75}

/* ---- 거래 꼬리표 · 비교 목록 상단(타입 선택) · 기간 칩 */
.drow .dp em.direct{background:color-mix(in srgb,var(--down) 12%,transparent);color:var(--down)}
.drow .dp em.odd{background:color-mix(in srgb,#F59E0B 18%,transparent);color:#B45309}
[data-theme="dark"] .drow .dp em.odd{color:#FBBF24}
.drow .dp{display:flex;justify-content:flex-end;align-items:center;gap:6px}
.drow .dp em{margin-left:0}
.pdl-top{padding:7px 10px;border-bottom:1px solid var(--line-soft);background:var(--card)}
.tsel{font:inherit;font-size:12px;color:var(--ink-2);border:1px solid var(--line);border-radius:6px;padding:3px 6px;background:var(--surface);max-width:100%}
.tsel.one{border:0;background:none;padding:3px 0;color:var(--ink-3)}
.types.col{margin:8px 0 0;gap:4px}
.types.col .tchip{padding:3px 8px;font-size:11.5px}

/* ---- 비교 행 — 라벨(구분자)과 값(내용)의 경계. 라벨은 배경 없는 좌측 레일, 값은 카드 한 장 */
.cmp{--rail-gap:10px}

/* ---- 접속 현황 막대 (조회 = 옅은 막대, 방문자 = 진한 막대) */
.vbars{display:flex;align-items:flex-end;justify-content:flex-start;gap:6px;height:170px;padding:6px 2px 0;overflow-x:auto}
.vbar{position:relative;flex:1 1 22px;max-width:44px;min-width:20px;height:100%;display:flex;align-items:flex-end;justify-content:center}
.vbar i,.vbar u{position:absolute;bottom:20px;width:100%;border-radius:3px 3px 0 0}
.vbar i{background:color-mix(in srgb,var(--accent) 28%,transparent)}
.vbar u{width:52%;background:var(--accent)}
.vbar span{position:absolute;bottom:0;font-size:10.5px;color:var(--ink-3);white-space:nowrap}
#vpaths .db{display:block;height:7px;border-radius:4px;background:var(--surface);overflow:hidden;min-width:80px}
#vpaths .db i{display:block;height:100%;background:var(--accent);border-radius:4px}

/* 비교 목록 — 좁은 열에서 잘리지 않게 */
.pdl .drow .dp{gap:4px}
.pdl .drow .dp em{padding:0 4px;font-size:10.5px;line-height:16px}
.pdl .drow .df{overflow:hidden;text-overflow:ellipsis}

/* 거래내역 네 열을 고르게 — 계약일·전용·동층은 왼쪽, 금액만 오른쪽 */
.dhead span:last-child,.drow .dp{justify-content:flex-end;text-align:right}
.dhead span{overflow:hidden;text-overflow:ellipsis}
.drow .da,.drow .df{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.legend i.dot{width:11px;height:11px;border-radius:50%;background:rgba(15,23,42,.42);border:1px solid rgba(255,255,255,.9)}
[data-theme="dark"] .legend i.dot{background:rgba(226,232,240,.5);border-color:rgba(15,23,42,.8)}

/* 거래내역 열 정렬 — 계약일 왼쪽 · 전용 오른쪽(숫자) · 동·층 가운데 · 금액 오른쪽. 헤더도 같은 정렬 */
.dhead span:nth-child(2),.drow .da{text-align:right}
.dhead span:nth-child(3),.drow .df{text-align:center;justify-content:center}
.pdl .dhead,.pdl .drow{grid-template-columns:.9fr .7fr 1.05fr 46px 1fr;gap:4px}
.pdl .dhead span:nth-child(2),.pdl .drow .da{text-align:right}
.pdl .dhead span:nth-child(3),.pdl .drow .df{text-align:center;justify-content:center}

/* 태그(해제·직거래·이상)는 금액과 같은 칸을 쓰면 금액이 행마다 밀린다 — 열을 따로 둔다 */
.dhead span:last-child,.drow .dt{display:flex;justify-content:flex-start;gap:3px;text-align:left}
.drow .dp{justify-content:flex-end;text-align:right}
.drow .dt em{margin:0;padding:1px 5px;border-radius:4px;background:var(--surface);color:var(--ink-3);
  font-style:normal;font-size:11px;font-weight:600;white-space:nowrap}
.drow .dt em.direct{background:color-mix(in srgb,var(--down) 12%,transparent);color:var(--down)}
.drow .dt em.odd{background:color-mix(in srgb,#F59E0B 18%,transparent);color:#B45309}
[data-theme="dark"] .drow .dt em.odd{color:#FBBF24}
.pdl .drow .dt{gap:2px}
.pdl .drow .dt em{padding:0 3px;font-size:10px;line-height:15px}
.pdl .drow .dt{flex-wrap:nowrap;overflow:hidden}

/* 거래내역 — 네 열 모두 가운데 정렬, 꼬리표는 금액 바로 앞 열 */
.dhead span,.drow>span{text-align:center;justify-content:center}
.dhead span:nth-child(2),.drow .da,
.dhead span:nth-child(3),.drow .df,
.dhead span:last-child,.drow .dp{text-align:center;justify-content:center}
.drow .dt{display:flex;justify-content:flex-end;gap:3px;overflow:hidden}
.pdl .drow .dt{justify-content:center}

/* 헤더와 행이 같은 스크롤 영역을 쓰게 한다 — 스크롤바가 행 쪽 폭만 줄여 열이 어긋나던 문제 */
.deals{max-height:252px;overflow-y:auto;overscroll-behavior:contain}
.deals .dbody{max-height:none;overflow:visible}
.deals .dhead{position:sticky;top:0;z-index:2}
.pdl .dbody{max-height:none;overflow:visible}
.pdl>div:not(.pdl-top):not(.pdl-n){}
.pdl-scroll{max-height:236px;overflow-y:auto;overscroll-behavior:contain}
.pdl-scroll .dhead{position:sticky;top:0;z-index:2}

/* 직주근접 — 막대 앞 이동수단 아이콘 (지하철 / 버스로 역까지) */
.ic.xs{width:14px;height:14px;vertical-align:-2px}
.gf.cml .cmi{display:flex;align-items:center;justify-content:center;color:var(--ink-3)}
.gf.cml .cmi.off{opacity:.35}
.gf.cml li b small{font-size:11px;font-weight:500;color:var(--ink-3);margin-left:2px}
.gnote .ic.xs{margin:0 1px 0 4px;color:var(--ink-3)}

/* GBD·CBD 는 줄임말이라 아래에 기준역을 함께 적는다 */
.gf.cml .cmk{display:flex;flex-direction:column;line-height:1.15;gap:1px}
.gf.cml .cmk i{font-style:normal;font-size:12.5px;font-weight:700;color:var(--ink-2);letter-spacing:.01em}
.gf.cml .cmk em{font-style:normal;font-size:10.5px;color:var(--ink-3);white-space:nowrap}

/* 실거래 연결이 추정인 경우의 주의 — 등급 문자 대신 뜻이 통하는 말로 */
.muted.fine.warn{color:var(--ink-2);background:color-mix(in srgb,#F59E0B 12%,transparent);
  border-left:3px solid #F59E0B;border-radius:4px;padding:7px 10px}
.muted.fine.warn b{color:var(--ink);font-weight:700}
.warnv{color:#B45309;font-weight:700}
[data-theme="dark"] .warnv{color:#FBBF24}

/* 꼬리표가 두 개 붙는 행도 잘리지 않게 — 줄바꿈을 허용하고 글자를 조금 줄인다 */
.drow .dt{flex-wrap:wrap;row-gap:2px}
.pdl .drow .dt{flex-wrap:wrap;row-gap:1px;overflow:visible}
.pdl .drow .dt em{padding:0 3px;font-size:9.5px;line-height:14px}

/* ---- 미매칭 검수 */
.rvbar{margin-bottom:14px}
.rvb{display:flex;height:8px;border-radius:5px;background:var(--surface);overflow:hidden;margin-bottom:7px}
.rvb i{display:block;height:100%}
.rvb i.ok{background:#16A34A}
.rvb i.mid{background:#F59E0B}
.rvn{font-size:13px;color:var(--ink-2)}
.rvn b{color:var(--ink);font-variant-numeric:tabular-nums}
.rvchk{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2)}
.rvlist{display:flex;flex-direction:column;gap:10px;max-height:640px;overflow-y:auto;padding-right:4px}
.rvitem{border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;background:var(--card)}
.rvitem.done{border-color:color-mix(in srgb,#16A34A 45%,var(--line));background:color-mix(in srgb,#16A34A 5%,var(--card))}
.rvitem.skip{opacity:.62}
.rvh{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.rvh a{font-size:14px;font-weight:700;color:var(--ink);text-decoration:none}
.rvh .rvm{font-size:12px;color:var(--ink-3)}
.rvh .rvn2{margin-left:auto;font-size:12px;color:var(--accent);text-decoration:none}
.rvtag{font-size:11px;font-weight:700;color:var(--ink-3);background:var(--surface);border-radius:4px;padding:2px 6px}
.rvtag.ok{color:#16A34A;background:color-mix(in srgb,#16A34A 12%,transparent)}
.rvcs{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.rvc{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border:1px solid var(--line);border-radius:8px;
  background:var(--surface);color:var(--ink);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.rvc:hover{border-color:var(--accent);color:var(--accent)}
.rvc b{font-weight:500;color:var(--ink-3);font-variant-numeric:tabular-nums}
.rvc i{font-style:normal;font-size:11px;color:var(--ink-3);background:var(--card);border-radius:4px;padding:0 4px}
.rvc.skip{color:var(--ink-3);font-weight:500}
.rvfree{display:inline-flex;gap:4px;align-items:center}
.rvfree input{width:130px;padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:var(--card);
  color:var(--ink);font:inherit;font-size:12px}

.pdl .dhead,.pdl .drow{padding:6px 7px;font-size:12.5px}
.pdl-top{padding:6px 8px}
.pdl-n{padding:5px 8px}

/* 네 권역 통근 목록 */
.cmlist{list-style:none;margin:10px 0 0;padding:8px 0 0;border-top:1px solid var(--line-soft);display:flex;flex-direction:column;gap:4px}
.cmlist li{display:grid;grid-template-columns:34px minmax(0,1fr) 8px auto;align-items:center;gap:7px;font-size:12px;color:var(--ink-3);white-space:nowrap}
.cmlist li span{font-weight:700;color:var(--ink-2)}
.cmlist li em{font-style:normal;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmlist li b{font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums}
.cmlist li.on span,.cmlist li.on b{color:var(--ink)}
.cmlist li.on{background:color-mix(in srgb,var(--surface) 70%,transparent);border-radius:5px;padding:2px 4px;margin:-2px -4px}

.cmp{--rail-gap:8px}
.pdl .dhead,.pdl .drow{padding:6px 6px}

.picto.p6{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:1100px){.picto.p6{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.picto.p6{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 사실 정보(거래일·동층·면적)는 비교 판정과 줄을 나눈다 — 판정은 색과 굵기로, 사실은 옅게 */
.cc .fact{margin-top:4px;padding-top:4px;border-top:1px solid var(--line-soft);
  font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;line-height:1.4}

/* 부가 설명은 줄바꿈으로 — 한 줄에 이어 붙이면 읽기 어렵다 */
.cc .fact,.cc .sub{line-height:1.5}
.cc .fact br,.cc .sub br{content:""}

/* 타일 부가 설명도 줄을 바꿔 붙인다 (값 옆에 이어 붙이면 단어가 잘린다) */
.picto .it .v small{display:block;margin:3px 0 0;font-size:11.5px;line-height:1.45;color:var(--ink-3);word-break:keep-all}
.picto .it .k{word-break:keep-all}

/* 저층(3층 이하) — 값이 낮게 형성되는 이유를 알려 주는 표시 */
.drow .dt em.low{background:color-mix(in srgb,var(--ink-3) 14%,transparent);color:var(--ink-2)}

/* 스펙표는 거래내역 행 규칙(격자·가운데 정렬)을 물려받지 않는다 */
.dgrid .drow>span{text-align:inherit;justify-content:inherit}
.dgrid .dcol{min-width:0}

.sumname{padding:12px 14px 10px;font-size:15px;font-weight:700;color:var(--ink);border-bottom:1px solid var(--line-soft)}
.sumname small{display:block;margin-top:2px;font-size:11.5px;font-weight:500;color:var(--ink-3)}

.sumsrc{margin-top:10px;font-size:11.5px;color:var(--ink-3)}

.rp-n{font-size:13px;font-weight:700;color:var(--ink)}
.rp-v{font-size:17px;font-weight:700;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.rp-g{grid-column:2;font-size:11px;color:var(--ink-3);text-align:right}
.rp-e{grid-column:1/-1;font-size:12px;color:var(--ink-3);line-height:1.5}
.rp-a{grid-column:1/-1;font-size:12px;color:var(--accent);text-decoration:none;justify-self:start}

/* 통근 막대 — 120분 절대 기준. 눈금이 있는 트랙으로 보이게 옅은 구분선을 깐다 */
.tr.abs{position:relative;background:var(--surface)}
.tr.abs::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent calc(25% - 1px),var(--line) calc(25% - 1px),var(--line) 25%,
    transparent 25%,transparent calc(50% - 1px),var(--line) calc(50% - 1px),var(--line) 50%,
    transparent 50%,transparent calc(75% - 1px),var(--line) calc(75% - 1px),var(--line) 75%,transparent 75%)}
.cmlegend{display:flex;flex-wrap:wrap;gap:10px 14px;margin-top:10px;font-size:11.5px;color:var(--ink-3)}
.cmlegend span{display:inline-flex;align-items:center;gap:5px}
.cmlegend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.cmlegend .cmscale{margin-left:auto;color:var(--ink-3)}
.gf.cml li{grid-template-columns:46px 14px minmax(0,1fr) 8px 44px;gap:6px}
.cmdot{width:8px;height:8px;border-radius:50%;display:block}

/* 펼쳐진 접이식은 '접기' 로 읽히게 */
.fold[open]>summary .fchev{font-size:0}
.fold[open]>summary .fchev::after{content:"접기 ▴";font-size:13px}

/* 직주근접 줄의 분 표시는 줄이지 않는다 */
.gf.cml li b{overflow:visible;text-overflow:clip;white-space:nowrap;text-align:right}
.gf.cml li b small{font-size:10.5px;margin-left:1px}

/* 권역 목록은 한 줄로 — 권역 · 기준역 · 색점 · 분 */
.cmlist li em{min-width:0;overflow:hidden;text-overflow:ellipsis}
.cmlist li b{text-align:right}
.mini-acts{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.mini-link.naver{color:var(--ink-3)}
.mini-link.naver:hover{color:var(--accent)}
.rp-links{grid-column:1/-1;display:flex;gap:14px}
.rp-links a{font-size:12px;color:var(--accent);text-decoration:none}
.lc-act .lnk + .lnk{margin-left:10px;color:var(--ink-3)}

/* 첫 화면 설명 — 단어 중간에서 끊기지 않게, 줄 길이를 고르게 */
.hero p{word-break:keep-all;overflow-wrap:break-word;text-wrap:balance;max-width:82ch}
.hero h1{word-break:keep-all;text-wrap:balance}

/* 첫 화면의 조건 찾기 · 각주로 내린 기준 설명 */
.home-find{margin-top:26px}
.home-find .h2ic .note{margin-left:10px;font-size:12.5px;font-weight:500;color:var(--ink-3)}

.notes{margin:0;padding:0}
/* 항목명과 설명은 같은 기준선에서 시작한다 — 행 높이·글줄 간격을 맞춘다 */
.notes>div{display:grid;grid-template-columns:120px minmax(0,1fr);column-gap:24px;align-items:start;
  padding:14px 0;border-top:1px solid var(--line-soft)}
.notes>div:first-child{border-top:0;padding-top:6px}
.notes>div:last-child{padding-bottom:6px}
.notes dt{margin:0;font-size:12.5px;line-height:1.75;font-weight:700;color:var(--ink-2);word-break:keep-all}
.notes dd{margin:0;font-size:12.5px;line-height:1.75;color:var(--ink-3);word-break:keep-all;max-width:96ch}
.notesrc{margin:16px 0 0;padding-top:12px;border-top:1px solid var(--line-soft);
  font-size:11.5px;line-height:1.7;color:var(--ink-3);word-break:keep-all}
@media (max-width:640px){

  .notes>div{grid-template-columns:1fr;row-gap:4px}
}

/* 빈 슬롯에는 색점을 두지 않는다 — 단지를 고르면 그 자리에 계열색이 들어온다 */
.slot:not(.filled) .sel .mark{display:none}
.sel .mark{transition:background .15s}

/* 슬롯별 면적 선택 — 단지마다 다른 평형으로 견줄 수 있다 */
.slot-area{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:10px 0 2px}
.slot-area .sa-l{font-size:11.5px;color:var(--ink-3);margin-right:2px}
.sa-chip{padding:4px 9px;border:1px solid var(--line);border-radius:999px;background:var(--card);
  color:var(--ink-3);font:inherit;font-size:11.5px;font-weight:600;cursor:pointer}
.sa-chip:hover{border-color:var(--ink-3);color:var(--ink)}
.sa-chip.on{background:var(--band);border-color:var(--band);color:#fff}
[data-theme="dark"] .sa-chip.on{background:var(--accent);border-color:var(--accent);color:#0B0F17}

/* 단지 내 면적 비교 표 */
.tbl.intra tbody tr{cursor:pointer}
.tbl.intra tbody tr:hover{background:var(--surface)}
.tbl.intra tbody tr.cur{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.tbl.intra tbody tr.cur th{color:var(--accent)}
.tbl.intra td.top{font-weight:700;color:var(--ink)}
.tbl.intra td.na{color:var(--ink-3)}
.tbl.intra th[scope="row"]{white-space:nowrap;font-weight:700}

.mixmsg{margin:0;font-size:12.5px;line-height:1.6;color:var(--ink-2)}
.mixmsg b{color:var(--ink);font-weight:700}

/* 단지 내 면적 비교 — 헤더와 값의 정렬을 같게, 숫자는 오른쪽 */
.tbl.intra th[scope="row"]{text-align:left;white-space:nowrap;font-weight:700;padding-left:12px}
.tbl.intra thead th{padding:9px 12px}
.tbl.intra tbody td{padding:10px 12px;font-variant-numeric:tabular-nums}
.tbl.intra td small{display:block;margin-top:2px;font-size:10.5px;color:var(--ink-3);font-weight:500}
.tbl.intra td.na{color:var(--ink-3)}
.tbl.intra td.top{font-weight:700;color:var(--ink)}

/* 표는 가운데 정렬을 기본으로 — 항목명만 왼쪽 (헤더와 값의 정렬을 같게) */
.tbl.intra thead th,.tbl.intra tbody td{text-align:center}
.tbl.intra thead th:first-child,.tbl.intra tbody th[scope="row"]{text-align:left}
.tbl.intra td small{display:block;margin-top:2px;font-size:10.5px;color:var(--ink-3);font-weight:500;text-align:center}
.tbl.intra.diff td.base{background:color-mix(in srgb,var(--accent) 7%,transparent);font-weight:700}
.tbl.intra.diff td small.up{color:var(--up)}
.tbl.intra.diff td small.down{color:var(--down)}
.tbl.intra.diff tbody td b{font-weight:700;color:var(--ink)}
.tbl.intra.diff thead th{white-space:nowrap}

/* 타입 비교 — 타입명 아래 밴드 표시 */
.tbl.intra tbody th[scope="row"] small{display:block;margin-top:2px;font-size:10.5px;color:var(--ink-3);font-weight:500}

/* 타입 비교 — 값 아래 기준 대비 차이 */
.tbl.intra td small.up{color:var(--up)}
.tbl.intra td small.down{color:var(--down)}
.tbl.intra tbody tr.cur td small{color:var(--accent);font-weight:600}

/* 카드 머리 아이콘 — 작고 가늘어 잘 보이지 않았다 */
.card>.band .ic{width:20px;height:20px;stroke-width:2.1}
.card>.band>.ic:first-child{margin-right:2px}

/* 평형 줄에 마우스를 올렸을 때 보여주는 타입 목록 */
.typetip{position:absolute;z-index:80;min-width:212px;max-width:320px;padding:10px 12px;border:1px solid var(--line);
  border-radius:10px;background:var(--card);box-shadow:0 10px 28px rgba(15,23,42,.16);font-size:12px;line-height:1.5;pointer-events:none}
.typetip b{display:block;margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid var(--line);font-size:11.5px;color:var(--ink-2);font-weight:700}
.typetip i{display:block;margin-top:6px;font-style:normal;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.typetip i:first-of-type{margin-top:0}
.typetip em{display:inline-block;margin-left:4px;padding:0 5px;border-radius:5px;background:color-mix(in srgb,var(--accent) 14%,transparent);
  color:var(--accent);font-style:normal;font-size:10px;font-weight:700;vertical-align:1px}
.typetip span{display:block;color:var(--ink-3);font-variant-numeric:tabular-nums}
[data-theme="dark"] .typetip{box-shadow:0 10px 28px rgba(0,0,0,.5)}

/* 평형이 열둘까지 늘어나는 표는 안쪽에서 자르지 않는다 */
.tbl-wrap.free{max-height:none}

/* 줄바꿈은 뜻이 바뀌는 자리에서만 — '29㎡'·'2개월'·'실거래 추이' 가 글자 단위로 쪼개지지 않게 */
body{word-break:keep-all;overflow-wrap:break-word}
.card>.band{white-space:nowrap}
.card>.band .note{white-space:normal}

/* 평형 버튼 — 열둘까지 늘어난다. 좁은 화면에서는 옆으로 밀어 본다 */
.toggle.wrap{max-width:100%;overflow-x:auto;scrollbar-width:none}
.toggle.wrap::-webkit-scrollbar{display:none}
.toggle.wrap button{padding:7px 12px}
.types .toggle{vertical-align:middle}
.types .tl{white-space:nowrap}

/* 조작 줄 — 라벨과 버튼을 한 줄에. 빈 곳에 맞춰 가운데로 밀리지 않게 margin 을 모두 0 으로 둥다 */
.ctlrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin:0 0 12px}
.ctlrow .grp{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0;margin:0}
.ctlrow .grp>*{margin:0}
.ctlrow .tl{flex:0 0 auto;font-size:12px;font-weight:600;color:var(--ink-3);white-space:nowrap;margin:0 2px 0 0}
.ctlrow .toggle{margin:0;flex:0 1 auto}
.ctlrow .grp[hidden]{display:none}

/* 카드 아래 동작 줄 — 버튼이 '비교에 / 담기' 처럼 쪼개지지 않게. 자리가 모자라면 항목 단위로 줄을 바꾼다 */
.lcard .lc-act{flex-wrap:wrap;row-gap:6px}
.lcard .lc-act>*{white-space:nowrap}

/* ---- 앱 껍데기 — html.app-shell 일 때만. 웹사이트 방문자 화면은 예전 그대로다 ---- */
.tabbar{display:none}
.app-shell .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:saturate(1.4) blur(12px);
  border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.app-shell .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:56px;padding:7px 2px 6px;text-decoration:none;color:var(--ink-3);font-size:11px;font-weight:600;
  position:relative;-webkit-tap-highlight-color:transparent}
.app-shell .tabbar a .ic{width:22px;height:22px;stroke-width:1.9;color:inherit}
.app-shell .tabbar a.on{color:var(--accent)}
.app-shell .tabbar a.on .ic{stroke-width:2.2}
.app-shell .tabbar a:active{background:var(--surface)}
.app-shell .tabbar .tbn{position:absolute;top:5px;left:calc(50% + 6px);min-width:16px;height:16px;padding:0 4px;
  border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:10px;font-weight:700;font-style:normal;
  line-height:16px;text-align:center}
.app-shell body,.app-shell .foot{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
.app-shell .tray{bottom:calc(62px + env(safe-area-inset-bottom))}
.app-shell .site-head .tag{display:none}
.app-shell .site-head nav a[data-nav]{display:none}       /* 이동은 하단 탭이 맡는다 */
.app-shell .foot .fbrand{display:none}
/* 손가락으로 누를 수 있는 크기 */
@media (max-width:760px){
  .app-shell .tchip,.app-shell .toggle button,.app-shell .pg,.app-shell .btn.sm{min-height:38px}
  .app-shell .types .tchip,.app-shell .ctlrow .tchip{padding:8px 12px}
  .app-shell .ctlrow .toggle button{padding:9px 14px}
  .app-shell select,.app-shell input[type=text],.app-shell input[type=search]{min-height:44px}
  .app-shell .lcard .lc-act .fitem{min-height:38px}
}

/* ---- 더보기 목록 ---- */
.mlist{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--card)}
.mrow{display:grid;grid-template-columns:22px minmax(0,auto) 1fr 18px;align-items:center;gap:12px;
  padding:15px 16px;border:0;border-bottom:1px solid var(--line-soft);background:transparent;
  font:inherit;text-align:left;text-decoration:none;color:var(--ink);cursor:pointer;width:100%}
.mrow:last-child{border-bottom:0}
.mrow:hover{background:var(--surface)}
.mrow .ic{color:var(--sub)}
.mrow b{font-weight:700;font-size:14px;white-space:nowrap}
.mrow span{color:var(--ink-3);font-size:13px;text-align:right}
.mrow .chev{color:var(--ink-3);transform:rotate(-90deg)}
.mine-cta{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}

/* ---- 지도 화면 ---- */
.mapwrap{position:relative;margin:10px 0 0}
.mapbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:10px}
.mapbar .search{flex:1 1 260px;min-width:0}
.mfilters{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.mfilters select{min-height:38px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;
  background:var(--card);color:var(--ink);font:inherit;font-size:13px}
.mfilters .mcount{font-size:13px;font-weight:700;color:var(--ink-2);white-space:nowrap}
.bigmap{height:min(72vh,760px);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.mcl{background:0;border:0}
.mcl i{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;
  background:rgba(61,91,255,.86);color:#fff;font-style:normal;font-size:12px;font-weight:700;
  box-shadow:0 2px 10px rgba(15,23,42,.28)}

/* 지도에서 고른 단지 — 아래에서 올라오는 카드 */
.msheet{position:absolute;left:12px;right:12px;bottom:12px;z-index:20;padding:14px 16px 12px;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);
  box-shadow:0 12px 34px rgba(15,23,42,.2)}
.msheet .ms-x{position:absolute;top:8px;right:8px;width:32px;height:32px;display:flex;align-items:center;
  justify-content:center;border:0;border-radius:50%;background:transparent;color:var(--ink-3);cursor:pointer}
.msheet .ms-x:hover{background:var(--surface)}
.ms-head{display:flex;align-items:baseline;gap:10px;padding-right:30px}
.ms-name{font-size:16px;font-weight:700;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.ms-pp{margin-left:auto;font-size:12px;color:var(--ink-3);white-space:nowrap}
.ms-pp b{font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}
.ms-loc{margin-top:2px;font-size:13px;color:var(--ink-3)}
.msheet .lc-facts{margin-top:8px}
.ms-act{display:flex;gap:8px;margin-top:12px}
.ms-act .btn{flex:1;justify-content:center}
.ms-act .picked{background:var(--band);color:#fff;border-color:var(--band)}
[data-theme="dark"] .msheet{box-shadow:0 12px 34px rgba(0,0,0,.55)}
@media (max-width:760px){
  .bigmap{height:calc(100vh - 300px);min-height:380px}
  .mapbar{gap:6px}
  .mfilters select{font-size:12px;padding:6px 8px}
}

/* ---- 즐겨찾기 별 ---- */
.favb{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);
  background:var(--card);color:var(--ink-3);border-radius:999px;cursor:pointer;font:inherit;padding:0;
  width:36px;height:36px;-webkit-tap-highlight-color:transparent}
.favb .ic{width:19px;height:19px}
.favb:hover{color:var(--ink);border-color:var(--ink-3)}
.favb.on{color:#E8A317;border-color:#E8A317}
.favb.on .ic{fill:#E8A317;stroke:#E8A317}
.favb.btn{width:auto;height:auto;padding:10px 14px;font-weight:700;color:var(--band);border-color:var(--band)}
.favb.btn.on{color:#B57A05;border-color:#E8A317;background:color-mix(in srgb,#E8A317 12%,transparent)}
.favb.btn .ic{width:17px;height:17px}
.lcard .lc-img{position:relative;display:block}
.lcard .lc-fav{position:absolute;right:10px;bottom:10px;z-index:2;
  background:color-mix(in srgb,var(--card) 78%,transparent);backdrop-filter:blur(6px);border-color:transparent;
  box-shadow:0 2px 8px rgba(15,23,42,.18)}
.lcard .lc-fav:not(.on){color:#fff}
.ms-act .favb{flex:0 0 auto}
[data-theme="dark"] .lcard .lc-fav{background:color-mix(in srgb,var(--card) 70%,transparent)}

/* 앱 — 세부 조건 접기 */
.app-shell .frow.fold{display:none}
.app-shell .frow.fold.open{display:flex}
.app-shell .fmore{display:block;width:100%;margin:10px 0 0;padding:11px 14px;border:1px solid var(--line);
  border-radius:999px;background:var(--card);color:var(--band);font:inherit;font-weight:700;font-size:13px;cursor:pointer}
.app-shell .fmore:active{background:var(--surface)}

/* 앱 — 비어 있는 비교 칸은 카드 자리를 차지하지 않게 줄인다 */
@media (max-width:760px){
  .app-shell .slot:not(.filled) .slotcard{min-height:0;padding:0;border:0;background:0}
  .app-shell .slot:not(.filled) .slotcard .ph{min-height:52px;font-size:12px}
  .app-shell .slot{gap:6px}
}

/* ---- 고르기 화면의 아래 고정 바 ---- */
.pickbar{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;width:min(1168px,calc(100% - 32px));
  z-index:40;display:flex;align-items:center;gap:14px;
  padding:12px 16px;border:1px solid var(--line);border-top-color:var(--line);border-radius:var(--r-lg);
  background:color-mix(in srgb,var(--card) 94%,transparent);backdrop-filter:saturate(1.4) blur(10px);
  box-shadow:0 -6px 22px rgba(15,23,42,.08)}
.pickbar.ready{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.pickbar .pb-n{flex:1;min-width:0;font-size:13px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pickbar .pb-n b{color:var(--ink);font-weight:700;margin-right:6px}
.pickbar .pb-n span{color:var(--ink)}
.pickbar .pb-n i{font-style:normal;color:var(--ink-3);margin:0 5px}
.pickbar .btn{flex:0 0 auto;white-space:nowrap}
.pickbar .btn.off{background:var(--surface);color:var(--ink-3);cursor:default;pointer-events:none}
[data-theme="dark"] .pickbar{box-shadow:0 -6px 22px rgba(0,0,0,.4)}
.app-shell .pickbar{bottom:calc(66px + env(safe-area-inset-bottom))}
body.has-pickbar{padding-bottom:96px}
.app-shell body.has-pickbar{padding-bottom:150px}

#cfind.on{background:var(--band);color:#fff;border-color:var(--band)}

/* ================= 폰 — 비교는 칸이 아니라 줄로 =================
   393px 에 3열을 밀어 넣으면 '10.8억' 이 '10.' '8억' 으로 쪼개진다.
   지표 하나를 머리로 두고, 단지를 한 줄씩 놓는다:
     [● 단지명 ......... 값 단위]
                          차이 */
@media (max-width:620px){

  /* 구획 이동 — 위에 붙어 따라온다 */
  /* 구획 탭은 한 가지 양식을 쓴다 (아래) */

  /* 한 줄 = 단지 하나. 어느 지표든 뼈대가 같다
       1행: [● 단지명]            [값 단위]
       2행: [그 단지의 사실]       [비교 판정]
       3행: [막대]                                       */
  .app-shell .cc{display:grid;grid-template-columns:minmax(0,1fr) auto;
    align-items:baseline;column-gap:12px;row-gap:0;text-align:left;padding:12px 13px 11px;
    border:1px solid var(--line);border-radius:12px;background:var(--card)}
  .app-shell .cc.none{background:var(--surface);border-style:dashed}
  .app-shell .cc.best{border-color:color-mix(in srgb,var(--accent) 42%,var(--line));
    background:color-mix(in srgb,var(--accent) 5%,var(--card))}

  .app-shell .cc .v{grid-area:1/2;justify-self:end;white-space:nowrap;
    font-size:21px;font-weight:700;line-height:1.25;letter-spacing:-.022em;
    font-variant-numeric:tabular-nums;color:var(--ink)}
  .app-shell .cc .v small{font-size:11.5px;font-weight:500;color:var(--ink-3);margin-left:3px}
  .app-shell .cc .v.na{font-size:13px;font-weight:500;color:var(--ink-3)}
  .app-shell .cc .v.txt{font-size:15px;font-weight:700}

  /* 3행 — 막대 */
  .app-shell .cc .tr{grid-area:3/1/auto/-1;max-width:none;margin:8px 0 1px;height:5px}

  /* 지표 이름은 줄 위에 */
  .app-shell .clabel{text-align:left;font-size:14.5px;font-weight:700;color:var(--ink);margin-bottom:9px}
  .app-shell .clabel small{font-size:12px;color:var(--ink-3);font-weight:500;padding-left:0}

}

/* 폰 — 표는 칸을 눈이지 않고 줄로 쌓는다. 어떤 표도 페이지를 옆으로 밀지 않게 한다 */
@media (max-width:620px){
  .app-shell .summary,.app-shell .gapwrap{max-width:100%;overflow-x:auto}

  /* 그 밖의 표들은 적어도 제 자리 안에서 움직이게 */
  .app-shell .tbl{font-size:13px}
  .app-shell .tbl-wrap{max-width:100%;overflow:auto}
}

/* 폰 — 기준 면적 줄: 자리가 모자라면 줄을 나누고, 버튼 줄은 옆으로 밀어 본다 */
@media (max-width:620px){
  .app-shell .cmpbar{flex-wrap:wrap;row-gap:10px;align-items:stretch}
  .app-shell .cmpbar .cb-l{display:flex;align-items:center;gap:8px;width:100%;min-width:0}
  .app-shell .cmpbar .toggle{flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
  .app-shell .cmpbar .toggle::-webkit-scrollbar{display:none}
  .app-shell .cmpbar>.btn{width:100%;justify-content:center}
}

/* 폰 — 라벨 열(98px)을 옆에 두면 값이 260px 안으로 몰린다. 라벨을 위로 올린다 */
@media (max-width:620px){
  .app-shell .cmp{--lab:0px}

}

/* ================= 폰 — 조건은 칩 한 줄, 고르는 것은 아래에서 올라오는 판 ================= */
.app-shell .frow.as-hidden{display:none}
.app-shell .fchips{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding:2px 0 4px;margin:0 0 12px}
.app-shell .fchips::-webkit-scrollbar{display:none}
.app-shell .fchip{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;min-height:38px;
  padding:8px 13px;border:1px solid var(--line);border-radius:999px;background:var(--card);
  color:var(--ink-2);font:inherit;font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.app-shell .fchip svg{width:13px;height:13px;opacity:.5}
.app-shell .fchip.on{background:var(--band);border-color:var(--band);color:#fff}
.app-shell .fchip.on svg{opacity:.8}
.app-shell .fchip.cnt{background:var(--ink);border-color:var(--ink);color:var(--card)}
.app-shell .fpanel{padding:0;border:0;background:0}
.app-shell .fpanel .ltop{margin-top:2px}

/* 올라오는 판 */
body.sheet-open{overflow:hidden}
.fsheet{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-end}
.fsheet .fs-dim{position:absolute;inset:0;background:rgba(9,13,20,.5);backdrop-filter:blur(2px)}
.fsheet .fs-box{position:relative;width:100%;max-height:82vh;display:flex;flex-direction:column;
  background:var(--card);border-radius:12px 20px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.35);
  animation:fsUp .22s ease-out;padding-bottom:env(safe-area-inset-bottom)}
@keyframes fsUp{from{transform:translateY(18px);opacity:.6}to{transform:none;opacity:1}}
.fsheet .fs-h{display:flex;align-items:center;gap:10px;padding:16px 18px 12px;border-bottom:1px solid var(--line)}
.fsheet .fs-h b{flex:1;font-size:16px}
.fsheet .fs-x{width:34px;height:34px;border:0;border-radius:50%;background:var(--surface);color:var(--ink-3);
  font-size:15px;cursor:pointer}
.fsheet .fs-b{overflow:auto;padding:8px 12px 16px;-webkit-overflow-scrolling:touch}
.fsheet .fs-list{display:flex;flex-direction:column}
.fsheet .fs-opt{display:flex;align-items:center;min-height:50px;padding:12px 14px;border:0;border-radius:12px;
  background:transparent;color:var(--ink);font:inherit;font-size:15px;text-align:left;cursor:pointer}
.fsheet .fs-opt:active{background:var(--surface)}
.fsheet .fs-opt.on{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);font-weight:700}
.fsheet .fs-opt.on::after{content:"✓";margin-left:auto;font-weight:700}
.fsheet .fs-all{padding:6px 6px 0}
.fsheet .fs-all .frow{flex-direction:column;align-items:stretch;gap:12px;margin-bottom:14px}
.fsheet .fs-all .frow label{gap:6px}
.fsheet .fs-all select{width:100%;min-height:46px;font-size:15px}
.fsheet .fs-all .freset{display:none}
.fsheet .fs-act{display:flex;gap:8px;padding:12px 6px 4px;border-top:1px solid var(--line);margin-top:6px}
.fsheet .fs-act .btn{flex:1;justify-content:center;min-height:48px}

/* 폰 — 목록은 큰 사진 카드가 아니라 한 줄짜리로. 한 화면에 네댓 곳이 들어온다 */
@media (max-width:620px){
  .app-shell .lgrid{grid-template-columns:1fr;gap:9px}
  .app-shell .lcard{flex-direction:row;align-items:stretch;border-radius:12px}
  .app-shell .lcard .lc-img{flex:0 0 112px;align-self:stretch}
  .app-shell .lcard .lc-img>a{display:block;height:100%}
  .app-shell .lcard .lc-img .repcard{aspect-ratio:auto;height:100%;min-height:112px;border-radius:0;padding:0}
  /* 작은 사진 위의 글자는 읽히지 않는다 — 사진만 남긴다 */
  .app-shell .lcard .lc-img .repcard .t,
  .app-shell .lcard .lc-img .repcard .sgg,
  .app-shell .lcard .lc-img .repcard .corner,
  .app-shell .lcard .lc-img .repcard .scrim{display:none}
  .app-shell .lcard .lc-fav{right:6px;bottom:6px;width:32px;height:32px}
  .app-shell .lcard .lc-fav .ic{width:17px;height:17px}
  .app-shell .lcard .lc-body{padding:10px 12px 10px 13px;gap:4px}
  .app-shell .lcard .lc-head{align-items:baseline;gap:8px}
  .app-shell .lcard .lc-name{font-size:14.5px;line-height:1.3}
  .app-shell .lcard .lc-price{white-space:nowrap}
  .app-shell .lcard .lc-price b{font-size:14px}
  .app-shell .lcard .lc-loc{font-size:12.5px}
  .app-shell .lcard .lc-facts{gap:4px}
  .app-shell .lcard .lc-facts span{font-size:11.5px;padding:2px 7px}
  .app-shell .lcard .lc-facts span:nth-child(n+5){display:none}   /* 넉 줄이면 충분하다 */
  .app-shell .lcard .lc-act{padding-top:6px;gap:6px}
  .app-shell .lcard .lc-act .fitem{min-height:34px;padding:6px 11px;font-size:12.5px}
  .app-shell .lcard .lc-act .lnk{font-size:12.5px}
  .app-shell .lcard .lc-act .lnk:last-child{display:none}         /* 네이버는 단지 페이지에서 */
}

/* 폰 — 머리글과 정렬 줄을 줄인다. 폰에서 첫 화면은 '검색과 결과' 여야 한다 */
@media (max-width:620px){
  .app-shell .hero{padding:16px 0 8px}
  .app-shell .hero h1{font-size:21px;margin-bottom:3px}
  .app-shell .hero p{font-size:13px;line-height:1.5}
  .app-shell .search.big label,.app-shell .search label{font-size:12.5px}
  .app-shell .ltop{display:flex;align-items:center;gap:10px;margin:2px 0 10px}
  .app-shell .ltop .fcount{flex:1;min-width:0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .app-shell .ltop .lsort{flex:0 0 auto;font-size:0}
  .app-shell .ltop .lsort select{min-height:36px;font-size:12.5px;padding:5px 8px;border-radius:999px}
  /* 12px 미만은 폰에서 읽기 어렵다 — 바닥을 올린다 */
  .app-shell .fine,.app-shell .muted.fine,.app-shell small,.app-shell .note,
  .app-shell .cc .pt,.app-shell .clabel small,.app-shell .lc-facts span{font-size:12px}
  .app-shell .tbl small{font-size:11.5px}
}

/* ---- 폰 — 고른 단지는 위에 가로 띠로. 큰 카드 셋이 2,100px 을 먹으면 비교가 안 보인다 ---- */

/* 사실 줄의 구분점 */

/* 앱 · 단지 상세 — 표를 폰 폭에 맞추고 잔글씨를 읽을 수 있는 크기로 */
@media (max-width:620px){
  /* 평형 비교표는 아홉 칸이라 폰에서 옆으로 밀린다 — 앞의 네 칸만 두고 나머지는 표 아래에 편다 */
  .app-shell .tbl.intra.fixed{min-width:0;width:100%}
  .app-shell .tbl.intra col:nth-child(1){width:34%}
  .app-shell .tbl.intra col:nth-child(2){width:22%}
  .app-shell .tbl.intra col:nth-child(3){width:22%}
  .app-shell .tbl.intra col:nth-child(4){width:22%}
  .app-shell .tbl.intra col:nth-child(n+5){width:0}
  .app-shell .tbl.intra thead th:nth-child(n+5),
  .app-shell .tbl.intra tbody tr>*:nth-child(n+5){display:none}
  .app-shell .tbl.intra thead th{padding:8px 6px;font-size:12px;white-space:normal;word-break:keep-all}
  .app-shell .tbl.intra tbody td{padding:9px 6px}
  .app-shell .tbl.intra th[scope="row"]{padding-left:10px}
  .app-shell .tbl.intra tbody th[scope="row"] small,
  .app-shell .tbl.intra td small{font-size:12px;margin-top:3px;line-height:1.35}
  .app-shell .tbl.intra tbody th[scope="row"] small{white-space:normal;word-break:keep-all}
  .app-shell .tbl-wrap.free{overflow-x:visible}
  .app-shell .intra-note{display:none}

  /* 감춘 칸은 고른 평형에 한해 아래에서 보여준다 */
  .app-shell .intra-rest{display:grid;grid-template-columns:1fr;gap:1px;
    margin:10px 12px 2px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:10px;overflow:hidden}
  .app-shell .intra-rest .ir-h{grid-column:1/-1;background:var(--surface);
    padding:7px 11px;font-size:12px;font-weight:700;color:var(--ink-2)}
  .app-shell .intra-rest>div:not(.ir-h){display:flex;align-items:baseline;justify-content:space-between;
    gap:8px;background:var(--card);padding:9px 11px}
  .app-shell .intra-rest dt{font-size:12.5px;color:var(--ink-3)}
  .app-shell .intra-rest dd{margin:0;font-size:14px;font-weight:700;
    font-variant-numeric:tabular-nums;white-space:nowrap}
  .app-shell .intra-rest dd i{font-style:normal;font-size:12px;font-weight:500;color:var(--ink-3);margin-left:3px}

  /* 단지 머리글 · 주 동작 한 줄, 보조 셋은 나란히 */
  .app-shell .cta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .app-shell .cta>.btn:first-child{grid-column:1/-1;min-height:46px;font-size:15px}
  .app-shell .cta>#fav-apt{display:contents}
  .app-shell .cta .btn.ghost,.app-shell .cta .favb{min-height:42px;justify-content:center;
    gap:5px;font-size:13px;padding:0 6px;white-space:nowrap}
  .app-shell .cta .favb{border:1px solid var(--line);border-radius:999px;background:var(--card);
    display:inline-flex;align-items:center;font-weight:600}

  /* 거래내역 · 빈 태그 칸이 76px을 먹고 면적이 잘렸다 */
  .app-shell .deals .dhead,.app-shell .deals .drow{grid-template-columns:58px 54px 44px auto minmax(50px,1fr);
    gap:5px;padding:8px 10px}
  .app-shell .deals .da{overflow:visible;text-overflow:clip}
  .app-shell .deals .dp{white-space:nowrap}

  /* 남은 잔글씨 */
  .app-shell .drow .dp em,.app-shell .drow .dt em,.app-shell .picto .it .v small,.app-shell .stblock .more,.app-shell .cmlegend,.app-shell .cmlegend span,.app-shell .gnote,.app-shell .vbar span,.app-shell .gf.cml .cmk em,.app-shell .gf.cml li b small,.app-shell .cmlist li em,.app-shell .chip .co,.app-shell .tbl td small,.app-shell .pdl-n{font-size:12px;line-height:1.4}
  .app-shell .drow .dt em,.app-shell .drow .dp em{line-height:18px;padding:0 5px}
}

/* 평형 비교표 열 폭 · 안내 문구는 웹/앱 하나만 */
.tbl.intra col:nth-child(1){width:14%}
.tbl.intra col:nth-child(2){width:10%}
.tbl.intra col:nth-child(3){width:12%}
.tbl.intra col:nth-child(4){width:11%}
.tbl.intra col:nth-child(5){width:12%}
.tbl.intra col:nth-child(6){width:11%}
.tbl.intra col:nth-child(7){width:10%}
.tbl.intra col:nth-child(8){width:11%}
.tbl.intra col:nth-child(9){width:9%}
.only-web,.only-app{font-style:normal}
.only-app{display:none}
.app-shell .only-web{display:none}
.app-shell .only-app{display:inline}
@media (max-width:620px){
  .app-shell .tbl.intra col:nth-child(1){width:34%}
  .app-shell .tbl.intra col:nth-child(2){width:22%}
  .app-shell .tbl.intra col:nth-child(3){width:22%}
  .app-shell .tbl.intra col:nth-child(4){width:22%}
  .app-shell .tbl.intra col:nth-child(n+5){width:0}
}

/* 바닥글 링크 — 폰에서는 탭바가 가리지 않게 위로 띄운다 */
.foot .flinks{margin-top:8px}
.foot .flinks a{color:var(--accent);font-weight:600;text-decoration:none}
.foot .flinks a:hover{text-decoration:underline}

/* 평형표의 '나머지 값'은 칸을 감춘 폰에서만 쓸모가 있다 —
   아홉 칸이 다 보이는 폭에서는 같은 값을 두 번 늘어놓는 셈이라 그리지 않는다 */
.intra-rest{display:none}

/* 브랜드는 여러 개 고를 수 있다 — 한 줄짜리 목록은 못 고르니 몇 줄 보이게 두고, 고른 개수를 라벨에 적는다 */
label.multi{align-items:stretch}
label.multi .mn{font-style:normal;color:var(--accent);font-weight:700;margin-left:4px}
label.multi select[multiple]{height:auto;min-height:96px;padding:4px;overflow-y:auto;
  background-image:none;line-height:1.9}
label.multi select[multiple] option{padding:3px 8px;border-radius:6px}
label.multi select[multiple] option:checked{background:var(--accent);color:var(--on-accent)}
@media (max-width:620px){
  .app-shell label.multi select[multiple]{min-height:112px;font-size:13px}
  .app-shell label.multi select[multiple] option{padding:6px 8px;min-height:32px}
}

/* 검색 드롭다운 — 입력창 '아래' 에 붙이고(위 top:46px 은 라벨이 있는 첫 화면에서 입력창을 덮었다),
   드롭다운을 담은 카드는 overflow 를 풀어 목록이 카드 밑단에서 잘리지 않게 한다 */
.card:has(> .body .search), .card:has(.search){overflow:visible}
.search .ac{z-index:60}

/* 바닥 시트 다중 선택 — 켜진 항목을 뚜렷이, 아래 '모두 해제 · 결과 보기' 줄 */
.fs-list.multi .fs-opt.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.fs-list.multi .fs-opt.on::after{content:" ✓";font-weight:700}

/* 브랜드 선택판 — 기본 다중선택 목록상자 대신 칩을 눌러 켜고 끈다 */
label.multi{position:relative}
label.multi .bpick-btn{width:100%;text-align:left;min-height:40px;padding:0 34px 0 12px;border:1px solid var(--line);
  border-radius:10px;background:var(--card);color:var(--ink);font:inherit;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
label.multi .bpick-btn::after{content:"";position:absolute;right:14px;top:50%;width:7px;height:7px;
  border-right:1.6px solid var(--ink-3);border-bottom:1.6px solid var(--ink-3);transform:translateY(-70%) rotate(45deg)}
label.multi .bpick{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:70;background:var(--card);
  border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px var(--shadow);padding:10px;min-width:280px}
label.multi .bpick .fs-list{display:flex;flex-wrap:wrap;gap:6px;max-height:240px;overflow:auto;padding:2px}
label.multi .bpick .fs-opt{padding:6px 11px;border:1px solid var(--line);border-radius:999px;background:var(--card);
  font-size:13px;cursor:pointer;color:var(--ink)}
label.multi .bpick .fs-opt.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
label.multi .bpick .fs-act{display:flex;justify-content:space-between;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line-soft)}
label.multi select[multiple]{display:none}

/* 비교 — 공통 면적이 없는 아파트는 가까운 면적으로 대신 보여준다는 표시 */
.sa-chip.auto{border-style:dashed}
.sa-chip.auto small{margin-left:3px;font-size:10.5px;font-weight:500;opacity:.85}

/* 생활 카드 — 걸어갈 만한 곳 표시 */
.gf .wk{font-style:normal;color:var(--accent);font-weight:600;margin-left:4px;white-space:nowrap}

.gdl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 14px;margin:0;font-size:13px;line-height:1.45}
/* 줄을 감싼 <div> 는 격자에 끼어들지 않게 — 안 그러면 줄들이 두 칸에 번갈아 들어가 한 칸이 세로로 눌린다 */
.gdl>div{display:contents}
.gdl dt{color:var(--ink-3);white-space:nowrap}
.gdl dd{margin:0;word-break:keep-all}
.gdl dd b{font-weight:700;font-variant-numeric:tabular-nums}
.gdl dd small{color:var(--ink-3);font-weight:500}
@media (max-width:620px){
  .app-shell .gdl{grid-template-columns:1fr;gap:4px 0}
  .app-shell .gdl dt{font-size:12px;margin-top:6px}

}

/* 임대 아파트 표시 — 비교 제외, 정책 유형 칩 */
.rent-tag{font-size:12.5px;font-weight:600;color:var(--ink-3);padding:6px 10px;border:1px dashed var(--line);border-radius:999px}
.rent-mini{font-style:normal;font-size:11.5px;font-weight:700;color:#fff;background:var(--ink-3);border-radius:4px;padding:1px 5px;margin-left:5px;vertical-align:1px}
.btn.rent-note{background:var(--surface);color:var(--ink-3);border:1px dashed var(--line);cursor:default}
.chip.rent{background:#FEF3C7;color:#92400E;border-color:#FDE68A;font-weight:700}
[data-theme="dark"] .chip.rent{background:#3B2F0B;color:#FCD34D;border-color:#5B4A12}

/* 상세 패널 — 이름·개수는 지도 버튼. 링크처럼 보이되 줄 안에 붙는다 */
.lnkbtn{background:none;border:0;padding:0;margin:0;font:inherit;color:var(--accent);cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
.lnkbtn .ic-map{font-style:normal;font-size:11px;font-weight:700;color:var(--on-accent);background:var(--accent);border-radius:4px;padding:1px 5px;margin-left:3px;vertical-align:1px}
.pop-map{height:min(52vh,420px);border-radius:10px;overflow:hidden;background:var(--surface);margin-bottom:10px}
.pop-map.off{display:flex;align-items:center;justify-content:center;color:var(--ink-3);font-size:13px;height:60px}
.pop-list{margin:0;padding:0 0 0 20px;font-size:13px;line-height:1.5;max-height:32vh;overflow:auto;scrollbar-gutter:stable}
.pop-list li{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid var(--line-soft);cursor:pointer}
.pop-list li b{font-weight:600;word-break:keep-all}
.pop-list li span{color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.pop-list li.main b{color:var(--accent)}
.pin-home{background:var(--accent);color:var(--on-accent);font-size:12px;font-weight:700;padding:3px 8px;border-radius:999px;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.pin-lbl{background:#fff;color:#111;font-size:12px;padding:3px 8px;border-radius:8px;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.2);border:1px solid #ddd}
.pin-lbl em{font-style:normal;color:#666;margin-left:4px}
@media (max-width:620px){ .app-shell .pop-map{height:46vh} }

@media (max-width:620px){
  .app-shell .cmpbar{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
  .app-shell .cmpbar .cb-l{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px}
  /* 가로로 밀리는 면적 단추 — min-width:0 이 없으면 줄이 줄어들지 않아 '공유' 단추 위를 덮는다 */
  .app-shell .cmpbar .cb-l{overflow:hidden}
  .app-shell .cmpbar .cb-l .toggle{min-width:0;overflow-x:auto;scrollbar-width:none}
  .app-shell .cmpbar .cb-l .toggle::-webkit-scrollbar{display:none}
  .app-shell .cmpbar #share{flex:0 0 auto;width:auto;min-height:38px;padding:0 12px}

}

/* 상세 패널 — 줄 끝의 '지도' 버튼. 이름은 평범한 글자로 두고 누를 곳을 또렷하게 */
.gdl dd{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.gdl dd .rowtxt{min-width:0;word-break:keep-all}
.mapbtn{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;min-height:32px;padding:0 10px;
  border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--accent);
  font:inherit;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;align-self:center}
.mapbtn svg{width:13px;height:13px}
.mapbtn:hover{background:color-mix(in srgb,var(--accent) 10%,var(--card));border-color:var(--accent)}
.mapbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:620px){
  .app-shell .gdl dd{gap:8px}
  .app-shell .mapbtn{min-height:36px;padding:0 12px;font-size:12.5px}
}

/* 카드 아래 줄 — '비교에 담기' 와 링크 둘이 세 줄로 갈라지던 것. 링크는 한 덩어리로 붙여 둔다 */
.lcard .lc-act{flex-wrap:nowrap;gap:6px}
.lcard .lc-act .lnk{white-space:nowrap;font-size:12.5px}
.lcard .lc-act .lnk + .lnk{margin-left:6px}
@media (max-width:620px){
  .app-shell .lcard .lc-act{flex-wrap:wrap;row-gap:6px}
  .app-shell .lcard .lc-act .btn{flex:1 1 100%}
}

/* 주변 — 역세권·학군·의료·생활 한 줄 탭. 정렬은 위의 .gdl 격자를 그대로 쓴다 */

/* 알약 모양이던 옛 탭 — 카드에 붙는 한 가지 양식(.tabcard)으로 바뀌었다. 아래 한 곳에서만 그린다. */
.acamix{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.acamix b{font-size:12.5px;color:var(--ink-3);font-weight:600;margin-right:2px}
.acamix span{display:inline-flex;align-items:baseline;gap:4px;padding:3px 9px;border:1px solid var(--line);
  border-radius:999px;font-size:12.5px;font-variant-numeric:tabular-nums}
.acamix span i{font-style:normal;color:var(--ink-3)}
@media (max-width:620px){
  .app-shell .nb-tab{min-height:40px;padding:0 13px;font-size:13px}
  .app-shell .acamix span{font-size:12px}
}

/* 재건축 — 사업 단계가 있으면 띠로 */
.rb-stage{display:inline-block;padding:6px 12px;border-radius:8px;background:color-mix(in srgb,var(--accent) 12%,transparent);
  color:var(--accent);font-weight:700;font-size:13.5px;margin-bottom:12px}

/* 지도에 얹는 주변 시설 핀 — 아파트 핀보다 작고 조용하게 */
.kmk.sm{transform:scale(.82);opacity:.95}
.kmk.sm .klbl{font-weight:500}

/* 평형 비교 — 접힌 카드 안에서 자리를 덜 차지하게 */
#intra .fold{margin-top:6px}
#intra .tbl.intra{font-size:13.5px}
#intra .tbl.intra thead th{font-size:12.5px}

/* 헤더 '비교' 에 담은 개수 */
.site-head nav a .navcnt{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;
  margin-left:5px;padding:0 5px;border-radius:999px;background:var(--accent);color:var(--on-accent);
  font-style:normal;font-size:11.5px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.site-head nav a.on .navcnt{background:#fff;color:var(--ink)}

/* 지도 총수 각주 — 목록과 수가 다른 이유 (겹치지 않게 한 칸 띄운다) */
.cntnote{display:inline-block;margin-left:6px;font-size:11.5px;font-weight:500;color:var(--muted);white-space:nowrap}

/* 조건 묶음 — 생활 줄은 앞 줄과 사이를 띄워 어디까지가 한 묶음인지 보이게 한다 */
.frow.life{margin-top:4px;padding-top:14px;border-top:1px solid var(--line)}
.frow.life::before{content:"생활";position:absolute;margin-top:-26px;font-size:12px;font-weight:700;color:var(--ink-3)}
.frow.life{position:relative}

/* ---- 한눈에 탭 — 갈래마다 핵심 한 줄을 앞세운다 */
.nb-lead{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:0 0 12px;
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.nb-lead b{font-size:22px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.nb-lead small{font-size:13px;color:var(--ink-3);font-weight:500}
@media (max-width:620px){
  .nb-lead{margin-bottom:10px;padding-bottom:10px}
  .nb-lead b{font-size:19px}
  .nb-lead small{font-size:12.5px}
}

/* ---- 설명 툴팁 — 올려도, 눌러도 (폰은 눌러서) */
.tipbox{position:fixed;z-index:120;padding:9px 12px;border-radius:var(--r-xs);
  background:var(--band);color:#fff;font-size:12.5px;line-height:1.5;font-weight:500;
  box-shadow:0 6px 20px var(--shadow-lg);pointer-events:none;word-break:keep-all;white-space:normal}
.tipbox::after{content:"";position:absolute;left:50%;margin-left:-5px;border:5px solid transparent;
  border-top-color:var(--band);bottom:-10px}
.tipbox.below::after{bottom:auto;top:-10px;border-top-color:transparent;border-bottom-color:var(--band)}
/* 값 옆에 붙는 작은 물음표 자리 — 글자와 붙지 않게 한 칸 띄운다 */
.tipmark{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;
  margin-left:5px;padding:0;flex:0 0 auto;vertical-align:1px;
  border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink-3);
  font:inherit;font-size:10px;font-weight:800;font-style:normal;line-height:1;cursor:help}
.tipmark:hover,.tipmark:focus-visible{border-color:var(--accent);color:var(--accent);background:var(--tint)}
[data-tip]:not(.tipmark){cursor:help;text-decoration:underline dotted var(--line);text-underline-offset:3px}
@media (max-width:620px){
  .tipbox{font-size:13px;padding:10px 13px}
  .tipmark{width:17px;height:17px;font-size:11px}       /* 손가락으로 누를 수 있게 조금 크게 */
}

/* ---- 비교 구획 탭 — 폰·데스크톱 같은 모양. 누른 구획만 보여 준다 */
/* 옛 알약 구획 탭 규칙은 아래 '탭 한 가지 양식' 으로 대체했다 */
.nb-tabs{display:flex;gap:0;width:100%}
.nb-tab{flex:1 1 0;min-width:0;position:relative;min-height:46px;padding:0 8px;
  border:0;border-radius:0;background:var(--surface);color:var(--ink-3);
  font:inherit;font-size:13.5px;font-weight:600;letter-spacing:-.015em;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 고른 탭 머리 위에 카테고리 색 띠 — 카드 윗변과 탭이 한 몸으로 보인다 */
.nb-tab::before{content:"";position:absolute;left:0;right:0;top:0;
  height:3px;background:transparent}
.nb-tab+.nb-tab::after{content:"";position:absolute;
  left:0;top:11px;bottom:11px;width:1px;background:var(--line)}
.nb-tab:hover{color:var(--ink);background:color-mix(in srgb,var(--surface) 60%,var(--card))}
/* 글자는 축색을 66% 로 눌러 쓴다 — 계열색 그대로는 흰 바탕에서 4.5:1 을 못 넘는 색이 있다.
   띠(::before)는 원래 색 그대로라 계열은 그대로 읽힌다. */
.nb-tab.on{background:var(--card);
  color:color-mix(in srgb,var(--ax,var(--accent)) 66%,#000)}
.nb-tab.on::before{background:var(--ax,var(--accent))}
.nb-tab.on::after{display:none}
.nb-tab.on+.nb-tab::after{display:none}
.nb-tab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;z-index:1}

@media (max-width:620px){
  .app-shell .tabcard .tabnote{padding:8px 12px 0;font-size:11.5px}
  .app-shell .nb-tab{min-height:44px;padding:0 4px;font-size:12.5px;letter-spacing:-.03em}

}

/* 탭 카드 — 탭 줄이 카드 윗머리가 된다 */
.tabcard{overflow:hidden}
.tabcard .tabhead{display:block;border-bottom:1px solid var(--line)}
/* 안내 글은 탭 줄 아래 — 탭이 폭을 다 쓰므로 옆에 두면 탭이 좁아진다 */
.tabcard .tabnote{display:block;padding:8px 16px 0;font-size:12px;color:var(--ink-3)}
.tabcard .body{padding-top:14px}

/* ---- 주변 카드 — 내용과 지도를 반반. 탭을 누르면 옆 지도의 핀이 바뀐다 */
/* 내용과 지도가 같은 높이로 — 한쪽만 짧으면 그만큼이 빈 자리로 남는다 */
/* 내용과 지도가 같은 밑단을 쓴다 — 각주(범례·지도 설명)가 같은 줄에 서야 읽기 쉽다.
   내용이 짧으면 지도보다 위에서 끝나도 되지만, 넘쳐서는 안 된다. */
.nb-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:1fr auto;gap:12px 18px;align-items:stretch}
.nb-split>.nb-body{grid-column:1;grid-row:1;min-width:0}
.nb-split>.nb-map{grid-column:2;grid-row:1;min-width:0}
.nb-split .nb-foot{grid-row:2;align-self:end;margin:0;padding-top:10px;border-top:1px solid var(--line-soft)}
.nb-split>.nb-body .nb-foot{grid-column:1}
.nb-body>.nb-foot{margin-top:12px}
.nb-split .nb-map{display:flex;flex-direction:column;min-height:340px}
.nb-split .nb-map .map{flex:1 1 auto;min-height:260px;border-radius:var(--r-xs);overflow:hidden}
.nb-split .map-cap{margin-top:8px;font-size:12px;line-height:1.5}
/* 단지 요약 — 사진 옆 칸. 위 큰 줄은 주변 탭의 핵심 한 줄과 같은 모양 */
#summary .nb-lead{margin-bottom:10px;padding-bottom:10px}
@media (max-width:900px){
  .nb-split{grid-template-columns:minmax(0,1fr);gap:14px}
  /* 1단으로 바꿀 때 자식의 자리 지정을 반드시 함께 푼다.
     grid-column:2 가 남으면 없는 열을 새로 만들고(암묵 열), 그 열이 폭을 다 먹어
     본문 칸이 0px 이 된다 — 글자가 한 자씩 세로로 쏟아지던 원인. */
  .nb-split>.nb-body,.nb-split>.nb-map,.nb-split .nb-foot,.nb-split>.nb-body .nb-foot{
    grid-column:1;grid-row:auto}
  .nb-split .nb-map{position:static;order:-1}          /* 좁으면 지도를 먼저 */
  .nb-split .nb-map .map{min-height:240px}
  .nb-split .nb-foot{align-self:auto}
}

/* ---- 지도 핀 — 갈래마다 색과 한 글자. 색을 못 가려도 글자로 알 수 있다 */
/* 핀 — 배경을 한 겹 눌러 흰 글자가 묻히지 않게 (지하철 노선 배지와 같은 방식) */
.kmk .kdot{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;
  border-radius:999px;color:#fff;font-size:10px;font-weight:800;line-height:1;
  box-shadow:inset 0 0 0 999px rgba(0,0,0,.12),0 0 0 2px #fff,0 1px 3px rgba(0,0,0,.3)}
.kmk.named .klbl{margin-left:4px}
/* 지도 아래 범례 */
.maplegend{display:flex;flex-wrap:wrap;gap:5px 10px;margin-top:8px}
.mlg{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-3);white-space:nowrap}
.mlg i{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex:0 0 auto;
  border-radius:999px;color:#fff;font-style:normal;font-size:9.5px;font-weight:800;line-height:1}

/* 지도 핀을 누르면 뜨는 이름 — 한 번에 하나만 (이름표를 다 적으면 글자가 겹친다) */
.kname{display:flex;flex-direction:column;gap:1px;padding:6px 10px;border-radius:var(--r-xs);
  background:var(--band);color:#fff;white-space:nowrap;box-shadow:0 4px 14px var(--shadow-lg)}
.kname b{font-size:12.5px;font-weight:700}
.kname small{font-size:11px;opacity:.8}
.kmk .kdot{cursor:pointer}

/* ---- 정보 줄 한 가지 양식 — 라벨 · 값 · 사실 · 막대 -----------------------
   어느 화면(단지 요약·역세권·학군·의료·마트·상권·공공시설)에서든 같은 자리에서
   같은 것을 읽는다. 막대는 절대 기준이 있는 값에만 그린다. */
/* 라벨 칸 폭을 하나로 못박아, 어느 줄이든 값이 같은 자리에서 시작하게 한다 */
.speclist,.cmblock{--lab:132px}
.speclist{display:flex;flex-direction:column}
.specrow{display:grid;grid-template-columns:var(--lab) minmax(0,1fr) auto;
  grid-template-areas:"k v m" "k f f" "k b b";align-items:baseline;gap:2px 14px;
  padding:11px 0;border-top:1px solid var(--line-soft)}
.sr-m{grid-area:m;align-self:center}
.speclist>.specrow:first-child{border-top:0;padding-top:2px}
.sr-k{grid-area:k;display:flex;align-items:center;flex-wrap:wrap;gap:0 2px;
  font-size:12.5px;font-weight:600;color:var(--ink-3);line-height:1.5;word-break:keep-all}
.sr-v{grid-area:v;font-size:15px;line-height:1.45;font-variant-numeric:tabular-nums;min-width:0}
.sr-v b{font-weight:700;letter-spacing:-.01em}
.sr-v small{margin-left:3px;font-size:12.5px;font-weight:600;color:var(--ink-3)}
.sr-v .na{font-style:normal;font-size:13.5px;font-weight:500;color:var(--ink-3)}
.sr-f{grid-area:f;font-size:12.5px;line-height:1.5;color:var(--ink-3);word-break:keep-all}
.sr-bar{grid-area:b;height:5px;margin-top:5px;border-radius:999px;background:var(--surface);overflow:hidden}
.sr-bar i{display:block;height:100%;border-radius:999px}
/* 더 볼 수 있는 줄 — 올리거나 누르면 그 갈래를 모아서 본다 */
/* 더보기 — 줄 오른쪽 끝. 이 표시 위에서만 상세가 열린다
   (줄 전체를 단추로 두면 지나가기만 해도 창이 뜨고, 라벨 칸에 넣으면 줄이 깨진다) */
.sr-more{display:inline-flex;align-items:center;gap:3px;padding:4px 10px 4px 8px;
  border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink-3);
  font:inherit;font-size:11.5px;font-weight:700;line-height:1.5;cursor:pointer;white-space:nowrap}
.sr-more i{font-style:normal;font-size:12px;font-weight:800;line-height:1}
.sr-more:hover,.sr-more:focus-visible{border-color:var(--accent);color:var(--accent);background:var(--tint);outline:none}
.sr-more:focus-visible{box-shadow:0 0 0 2px var(--tint)}
/* 라벨 뒤 '＋' 장식은 뺀다 — 옆에 '＋상세' 버튼이 이미 있고, 좁은 화면에서는 따로 줄바꿈돼 부스러기처럼 보였다 */
@media (max-width:620px){
  .speclist,.cmblock{--lab:92px}
  /* 폰은 폭이 좁다 — 더보기를 값 옆에 두면 값과 겹친다. 사실 줄 아래로 내린다. */
  .specrow{grid-template-columns:var(--lab) minmax(0,1fr);
    grid-template-areas:"k v" "k f" "k m" "k b";gap:2px 10px;padding:10px 0}
  .sr-m{grid-area:m;justify-self:start;margin-top:4px}
  .sr-v{font-size:14.5px}
  .sr-k,.sr-f{font-size:12px}
}

/* 줄 안의 보조 사실 */
.sf{color:var(--ink-3)}

/* 대표 카드·단지 요약 사이 간격(18px)만큼 아래 탭 카드도 띄운다 */
.grid2.top + .card.tabcard{margin-top:18px}
@media (max-width:820px){.grid2.top + .card.tabcard{margin-top:14px}}

/* 지도 모서리 설명 표시 — 문장을 머리글에 두면 탭 자리를 빼앗는다 */
.nb-split .mapwrap{position:relative;flex:1 1 auto;display:flex;min-height:260px}
.nb-split .mapwrap .map{flex:1 1 auto;min-height:260px}
.mapinfo{position:absolute;right:10px;top:10px;z-index:5;display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;padding:0;border:1px solid var(--line);border-radius:999px;
  background:var(--card);color:var(--ink-3);font:inherit;font-size:12px;font-weight:800;font-style:normal;
  line-height:1;cursor:help;box-shadow:0 1px 4px var(--shadow)}
.mapinfo:hover,.mapinfo:focus-visible{border-color:var(--accent);color:var(--accent);background:var(--tint)}

/* 값 자리에 들어가는 작은 알약 묶음 (면적대별 세대수 · 평형 타입) */
.tchips{display:flex;flex-wrap:wrap;gap:4px 6px}
.tchip2{display:inline-flex;align-items:baseline;gap:4px;padding:3px 9px;border:1px solid var(--line);
  border-radius:999px;background:var(--card);font-size:12.5px;font-weight:700;line-height:1.5;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.tchip2 i{font-style:normal;font-size:11.5px;font-weight:600;color:var(--ink-3)}

/* 학원가·상권 — 점이 아니라 구역. 원 가운데에 이름과 개수 */
.kzone{display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 10px;border-radius:999px;
  background:var(--card);border:2px solid var(--zc,var(--accent));white-space:nowrap;
  box-shadow:0 2px 8px var(--shadow)}
.kzone b{font-size:12px;font-weight:800;color:color-mix(in srgb,var(--zc,var(--accent)) 72%,#000)}
.kzone span{font-size:11px;font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums}

#rg-cbd{min-width:140px}
@media (max-width:620px){#rg-cbd{flex:1 1 100%}}

/* 같은 갈래 단추는 한 줄에. 한 줄에 안 들어가면 위아래 개수가 비슷하게 두 줄로 */
.tchips{display:grid;grid-auto-rows:auto;gap:5px 6px;grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
.tchips.n1{grid-template-columns:max-content}
.tchips.n2{grid-template-columns:repeat(2,minmax(0,max-content))}
.tchips.n3{grid-template-columns:repeat(3,minmax(0,max-content))}
.tchips.n4{grid-template-columns:repeat(4,minmax(0,max-content))}
@media (max-width:900px){
  .tchips.n3,.tchips.n4{grid-template-columns:repeat(2,minmax(0,1fr))}   /* 4개면 2+2 */
}
.tchip2{justify-content:center}
/* 평형 타입 전부 보기 — 창 안에서도 같은 단추 */
.typegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px;margin:2px 0 10px}

/* ---- 업무지구까지 — 비교 화면의 '직주근접' 과 같은 모양 */
.cmblock{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.cm-h{display:flex;align-items:center;margin-bottom:8px;font-size:12.5px;font-weight:700;color:var(--ink-3)}

/* ---- 업무지구까지 — 다른 탭과 같은 줄 기준선, 값 자리에만 막대 */
.cmblock{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.cm-h{display:flex;align-items:center;margin-bottom:4px;font-size:12.5px;font-weight:700;color:var(--ink-3)}
.specrow.cmr{grid-template-columns:var(--lab) minmax(0,1fr)}
.specrow.cmr .sr-v .bar{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:8px;align-items:center}
.specrow.cmr .bar .dot{width:10px;height:10px;border-radius:3px}
.specrow.cmr .bar .tr{height:9px;border-radius:999px;background:var(--surface);overflow:hidden}
.specrow.cmr .bar .tr i{display:block;height:100%;border-radius:999px}
/* 값 칸은 폭을 고정한다 — auto 로 두면 '38분' 과 '128분' 의 폭이 달라 막대 길이가 줄마다 달라진다.
   막대는 120분을 가득 찬 길이로 보는 자라서, 자가 줄마다 다르면 견주는 뜻이 사라진다. */
.specrow.cmr .bar .val{white-space:nowrap;text-align:right;width:58px}
.specrow.cmr .bar .val b{font-weight:800}
.specrow.cmr .bar .val small{margin-left:2px;font-size:12px;font-weight:600;color:var(--ink-3)}
.specrow.cmr .bar.none .tr{background:var(--surface)}
/* 업무지구 알약 — 바탕은 비우고 테두리에만 색. 업무지구마다 색이 다르다.
   라벨 칸 안에서는 가운데에 세운다 — 칸 오른쪽이 비어 왼쪽에 붙으면 치우쳐 보인다. */
.specrow.cmr .sr-k{flex-direction:column;align-items:center;justify-content:center;gap:4px}
.cm-chip{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:0 14px;
  border:1.5px solid var(--cc,var(--line));border-radius:999px;background:transparent;
  color:color-mix(in srgb,var(--cc,var(--ink-2)) 74%,#000);
  font-size:14px;font-weight:800;letter-spacing:-.01em;line-height:1;white-space:nowrap}
[data-theme="dark"] .cm-chip{color:color-mix(in srgb,var(--cc,var(--ink-2)) 56%,#fff)}
.specrow.cmr .cm-top{font-style:normal;font-size:11px;font-weight:800;
  color:color-mix(in srgb,var(--cm1) 72%,#000)}
@media (max-width:620px){
  .specrow.cmr .sr-v .bar{grid-template-columns:10px minmax(0,1fr) auto;gap:6px}
  /* 좁은 화면용 .bar .val{grid-column:2} 규칙이 값을 2번 칸으로 밀어 막대 아래 줄로 떨어뜨렸다.
     통근 줄은 점·막대·값이 한 줄에 서야 하므로 마지막 칸으로 되돌린다. */
  .specrow.cmr .bar .val{grid-column:3;width:52px;text-align:right;white-space:nowrap}
  .cm-chip{min-height:26px;padding:0 11px;font-size:13px}
}

/* 값 옆 단위가 '· 도보 5분' 처럼 길어질 때 — 값보다 작게 두어 숫자가 먼저 읽히게 */
.sr-v small{font-weight:600}

/* 지도 칸 — 각주가 먼저(왼쪽 머리글과 같은 자리), 그 아래 구분선에서 지도가 시작한다.
   왼쪽 머리글(.nb-lead)과 같은 여백·구분선을 써야 두 칸의 첫 줄이 같은 선에서 만난다. */
.nb-split .nb-body{display:flex;flex-direction:column}
.nb-split .nb-body .nb-foot{margin-top:auto}
.nb-split .nb-map{display:flex;flex-direction:column}
/* 왼쪽 머리글과 같은 높이에서 구분선이 그어지도록 — 높이는 JS 가 맞춰 준다(syncTop) */
.nb-map .map-top{display:flex;align-items:flex-end;justify-content:space-between;gap:8px 16px;
  flex-wrap:wrap;margin:0 0 2px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.nb-map .map-top .maplegend{margin:0;flex:1 1 auto;min-width:0}
.nb-map .map-top .map-cap{margin:0;flex:0 1 auto;text-align:right;font-size:12px;line-height:1.5}
@media (max-width:900px){
  /* 좁으면 지도가 위로 올라간다(order:-1) — 그때 지도 각주는 지도 아래로 내린다.
     위에 두면 왼쪽 머리글과 같은 자리에 겹친다. */
  .nb-map .map-top{order:2;margin:10px 0 0;padding:10px 0 0;
    border-top:1px solid var(--line);border-bottom:0}
  .nb-map .map-top .map-cap{text-align:left}
}

/* ---- 지도 위 단지 표 — 이름(굵게) 위, 세대수·준공연도 아래.
   바탕색은 세대수 구간 셋 (옅은 쪽 → 짙은 쪽). 흰 글씨로 4.5:1 을 넘긴다. */
/* 단지명 줄만 세대수 구간 색, 아래 줄은 흰 바탕 — 두 정보가 눈에 갈린다 */
.mtag{display:inline-flex;flex-direction:column;align-items:stretch;
  border-radius:var(--r-xs);overflow:hidden;background:var(--card);
  border:1px solid var(--mc,#2563EB);white-space:nowrap;
  box-shadow:0 2px 8px rgba(15,23,42,.28);position:relative}
.mtag::after{content:"";position:absolute;left:50%;bottom:-6px;margin-left:-5px;
  border:5px solid transparent;border-top-color:var(--mc,#2563EB);border-bottom:0}
.mtag b{padding:4px 10px;background:var(--mc,#2563EB);color:#fff;
  font-size:12.5px;font-weight:800;letter-spacing:-.02em;line-height:1.3;text-align:center}
.mtag span{padding:3px 10px 4px;color:var(--ink);
  font-size:11.5px;font-weight:700;line-height:1.3;text-align:center;font-variant-numeric:tabular-nums}
@media (max-width:620px){
  .mtag b{padding:3px 8px;font-size:11.5px}
  .mtag span{padding:2px 8px 3px;font-size:10.5px}
}
/* 리플릿 대체 지도에서는 말풍선 껍데기를 없애고 표만 보인다 */
.leaflet-tooltip.mtag-wrap{background:transparent;border:0;box-shadow:none;padding:0}
.leaflet-tooltip.mtag-wrap::before{display:none}

/* ================================================================
   앱 화면(620px 이하) 비교 셀 — 자리 바로잡기

   셀은 2열 격자다.  1행 [이름 | 값] · 2행 [사실 | 판정] · 3행 [막대]
   그런데 네 업무지구 표(.cmlist)가 2행 왼쪽 칸에 갇혀 172px 로 쪼그라들었다.
   표는 한 줄에 네 칸(지구·역·점·분)을 세우는 물건이라, 칸 전체를 써야 세로선이 선다.

   '＋N' 배지는 절대배치라 오른쪽 끝 값(역 이름) 위에 그대로 얹혔다.
   앱에서는 흐름 안으로 되돌려 사실 줄에 함께 놓는다 — 겹칠 자리가 없어진다.
   ================================================================ */
@media (max-width:620px){

  /* '＋N' 배지 — 역 이름은 1행 오른쪽 끝이라 위쪽 오른편은 이미 글자가 있다.
     2행 오른편(판정 자리)은 역 칸에서 늘 비어 있으므로 그리로 내린다.
     선택자에 주의: 요소가 'cc k stcell' 이라 .cc .stcell(자손)이 아니라 .cc.stcell(같은 요소)다. */
  .app-shell .stblock .more{top:auto;bottom:10px;right:10px}
}

/* 요약 줄 아래 갈래 알약 — 덩어리 수만으로는 뜻이 안 서는 갈래(학원·상권)에 붙인다.
   바탕은 비우고 테두리에만 색. 숫자는 이름보다 굵게 두어 먼저 읽히게 한다. */
.nb-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:-4px 0 12px}
.nch-l{font-size:12px;font-weight:600;color:var(--ink-3);margin-right:2px}
.nchip{display:inline-flex;align-items:center;gap:5px;min-height:26px;padding:0 11px;
  border:1.5px solid var(--cc,var(--line));border-radius:999px;background:transparent;
  color:color-mix(in srgb,var(--cc,var(--ink-2)) 74%,#000);
  font-size:12.5px;font-weight:600;line-height:1;white-space:nowrap}
.nchip b{font-size:13.5px;font-weight:800;font-variant-numeric:tabular-nums}
[data-theme="dark"] .nchip{color:color-mix(in srgb,var(--cc,var(--ink-2)) 56%,#fff)}
@media (max-width:620px){
  .nb-chips{gap:5px;margin:-2px 0 10px}
  .nchip{min-height:24px;padding:0 9px;font-size:12px}
  .nchip b{font-size:12.5px}
}

/* 상세 목록 — 이름 / 노선·갈래 / 거리 / 소요시간 / 네이버.
   다섯 칸을 같은 격자에 세워 줄마다 값이 같은 자리에 오게 한다.
   이름과 거리만으로는 그다음에 할 일이 없어, 바깥 지도로 이어 주는 칸을 둔다.
   이름은 길 수 있어 남는 폭을 모두 이름 칸이 갖고, 거리 · 소요시간 · 네이버는 가운데 정렬이 되는 폭 안에서
   오른쪽에 붙여 한 묶음으로 둔다(사용자 2026-09-13). 거리·소요시간은 머리글과 값을 칸 가운데에 맞춘다.
   학군·상권·공공시설 상세 표(.mtbl)도 같은 기준이다. */
.pl-head,.pop-list li{display:grid;
  grid-template-columns:minmax(0,1fr) 74px 62px 62px 72px;
  align-items:center;column-gap:6px}
.pl-head.nox,.pop-list.nox li{grid-template-columns:minmax(0,1fr) 62px 62px 72px}
.pl-head{padding:8px 0 6px 20px;font-size:11.5px;font-weight:700;color:var(--ink-3);
  letter-spacing:.01em;border-bottom:1px solid var(--line);
  /* 목록(.pop-list)이 길어 스크롤바가 생기면 줄만 그 폭(윈도 15px)만큼 좁아져 머리글 가운데가 값보다 오른쪽으로 밀렸다(사용자).
     머리글에도 같은 스크롤바 자리를 비워 두어 열이 늘 같은 자리에 오게 한다 */
  overflow:hidden;scrollbar-gutter:stable}
.pl-head span:nth-last-child(2),.pl-head span:nth-last-child(3){text-align:center}
.pl-head span:last-child{min-width:64px}
.pop-list li .pl-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 노선이 둘이면 옆으로 늘리지 않고 아래로 접는다 — 이름 칸을 깎아 먹지 않게 */
.pop-list li .pl-x{min-width:0;display:flex;flex-wrap:wrap;gap:3px;justify-content:flex-start}
.pop-list li .pl-x .lb{padding:1px 6px;font-size:11px}
.pop-list li .pl-d,.pop-list li .pl-w{text-align:center;white-space:nowrap;
  font-variant-numeric:tabular-nums;color:var(--ink-2)}
.pop-list li .pl-w.far{color:var(--ink-3)}
.pop-list li .pl-k{font-style:normal;padding:1px 7px;border-radius:999px;
  border:1px solid var(--line);font-size:11px;font-weight:700;color:var(--ink-3);white-space:nowrap}
.pop-list li .pl-nv{justify-self:start;padding:3px 9px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);
  font-size:11.5px;font-weight:700;color:var(--ink-2);white-space:nowrap;text-decoration:none}
.pop-list li .pl-nv:hover,.pop-list li .pl-nv:focus-visible{
  border-color:var(--accent);color:var(--accent);background:var(--tint);outline:none}
@media (max-width:620px){
  .pl-head,.pop-list li{grid-template-columns:minmax(0,1fr) 58px 50px 52px 36px;column-gap:4px}
  .pl-head.nox,.pop-list.nox li{grid-template-columns:minmax(0,1fr) 50px 52px 36px}
  .pl-head{padding:7px 0 5px 20px;font-size:11px}
  .pl-head span:last-child{min-width:34px}
  .pop-list li .pl-d,.pop-list li .pl-w{font-size:12px}
  /* 좁은 화면에서는 '네이버' 글자를 빼고 화살표만 둔다 — 그만큼 이름 칸이 넓어진다.
     읽어 주는 이름은 aria-label 이 갖고 있어 뜻이 사라지지 않는다. */
  .pop-list li .pl-nv{font-size:0;padding:5px 0;text-align:center;width:34px}
  .pop-list li .pl-nv::after{content:"↗";font-size:13px;font-weight:700}
}

/* ================================================================
   아파트 화면 윗부분 줄이기 — 첫 화면에서 아래 내용이 더 보이게

   사진 카드는 띠를 없앴으니 안쪽 여백도 사진에 맞춰 줄인다.
   버튼 넷은 앱에서 첫 화면의 3분의 1을 차지하고 있었다 — 높이와 글씨를 줄인다.
   ================================================================ */
.repwrap>.body{padding:10px}
@media (max-width:620px){
  .app-shell .repwrap>.body{padding:8px}
  /* 사진이 세로로 길면 그만큼 아래가 밀린다 — 앱에서는 높이를 묶는다 */
  .app-shell .repwrap .repcard{max-height:230px}
  .app-shell .repwrap .repcard .art,.app-shell .repwrap .repcard svg{object-fit:cover}

  /* 버튼 넷 — 낮고 좁게. 누를 수 있는 크기(44px)는 지킨다 */
  .app-shell .hero .cta{gap:6px}
  .app-shell .hero .cta .btn{min-height:40px;padding:0 12px;font-size:13px;border-radius:10px}
  .app-shell .hero .cta .btn .ic{width:16px;height:16px}

  /* 머리말도 한 겹 줄인다 */
  .app-shell .hero{padding-top:14px}
  .app-shell .hero h1{font-size:22px;margin:2px 0 6px}
  .app-shell .hero .lead{margin:6px 0 10px;font-size:12.5px}
  .app-shell .hero .chips{gap:5px}

  /* 아파트 정보 띠의 출처 글귀는 맨 아래 출처 줄이 이미 말한다 */
  .app-shell .grid2.top .card>.band .note{display:none}
  .app-shell .grid2.top .card>.body{padding:10px 12px}
  .app-shell .grid2.top .specrow{padding:9px 0}
}

/* ================================================================
   웹 — 아파트 정보를 두 칸으로, 사진은 거기에 맞춰 줄인다

   윗칸이 화면의 605px 을 먹어 직주근접·학군이 한참 아래로 밀려 있었다.
   높이를 정하는 건 사진이 아니라 정보 카드다(사진은 flex:1 로 늘어난다).
   그래서 정보를 두 칸으로 접으면 사진도 함께 줄어든다.
   ================================================================ */
@media (min-width:900px){
  /* 사진은 한 장이면 뜻이 전해진다 — 절반을 내주지 않고 정보 칸에 넘긴다.
     사진 높이는 정보 칸을 따라가므로, 폭과 높이가 함께 줄어 자리를 크게 아낀다. */
  .grid2.top{grid-template-columns:minmax(0,38fr) minmax(0,62fr)}

  /* 라벨을 값 왼쪽에 두면 한 칸에 132px 을 먼저 떼어 줘야 해, 두 칸으로 나누면 값이 접힌다.
     이 칸에서만 라벨을 값 위로 올린다 — 폭이 절반이면 되므로 세 칸까지 들어간다.
     (줄 구조는 칸 안에서 서로 같으므로 기준선은 그대로 선다) */
  #summary .speclist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    column-gap:22px;row-gap:0}
  #summary .speclist>.specrow{display:block;padding:10px 0;
    border-top:1px solid var(--line-soft)}
  /* 평형 타입은 알약이 여럿이라 한 칸에 안 든다 — 맨 위에서 세 칸을 쓴다 */
  #summary .speclist>.specrow[data-more="__types"]{order:-1;grid-column:1/-1;
    display:grid;grid-template-columns:var(--lab) minmax(0,1fr) auto;
    grid-template-areas:"k v m" "k f f"}
  #summary .speclist>.specrow .sr-k{font-size:11.5px;font-weight:600;color:var(--ink-3);
    letter-spacing:.01em}
  #summary .speclist>.specrow .sr-v{margin-top:2px;font-size:15px}
  #summary .speclist>.specrow .sr-f{margin-top:2px;font-size:11.5px;line-height:1.45}
  /* 사진은 정보 칸 높이를 따라간다 — 바닥값만 낮춰 더 줄어들 수 있게 */
  .grid2.top .repcard{min-height:220px}
}

/* ================================================================
   1차 개편 — 축 카드 · 장부형 줄 · 알약 토글
   비교/상세/홈이 모두 이 한 벌을 쓴다. 축이 달라도 줄의 뼈대는 하나다.
   (docs/design_handoff_aptvs_compare_home/작업지시서.md 1단계)
   ================================================================ */

/* 가로 스크롤러 — 스크롤바는 감춘다 (.quick / .liferow 와 같은 처리)
   지시서의 이름은 .xs 인데, 아이콘 크기 클래스 .ic.xs 와 겹쳐 .hx 로 바꿨다 */
.hx{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.hx::-webkit-scrollbar{display:none}

/* 알약 토글 — 조건 칩 · 축 칩 · 보조 동작 */
.pill{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;
  border:1px solid var(--line);border-radius:999px;background:var(--card);
  color:var(--ink-3);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.pill:hover{border-color:var(--sub);color:var(--ink)}
.pill[aria-pressed="true"]{border-width:1.5px;font-weight:700}
.pill:focus-visible{outline:2px solid var(--sub);outline-offset:2px}

/* 장부형 줄 — [라벨 · 막대 · 값]. 라벨 칸은 72px 고정이라 어느 카드에서도 값이 같은 자리에 온다.
   라벨 칸에 overflow:hidden 을 반드시 걸어야 한다 — 없으면 nowrap 라벨이 트랙 밖으로
   글자를 그려 막대와의 9px 간격 리듬이 깨진다. */
.lrow{display:grid;grid-template-columns:72px minmax(0,1fr) 52px;align-items:center;gap:9px;height:24px}
.lrow>*{min-width:0}
.lrow>:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ldot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.lnm{display:flex;align-items:center;gap:6px;min-width:0;font-size:12px;font-weight:700;color:var(--ink-2)}
.lnm b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.lval{text-align:right;font-size:14px;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink-2)}
.lval.best{color:var(--ink)}
.lval small{font-size:11px;font-weight:500;color:var(--ink-3);margin-left:2px}
.trk{height:8px;border-radius:4px;background:var(--surface);overflow:hidden}
.trk i{display:block;height:100%;border-radius:4px}

/* 사실 줄 */
.kv{display:grid;grid-template-columns:56px minmax(0,1fr);gap:4px 10px;
  margin:10px 0 0;padding-top:9px;border-top:1px dashed var(--line);
  font-size:11.5px;line-height:1.45}
.kv dt{color:var(--ink-3);margin:0}
.kv dd{color:var(--ink-2);margin:0;word-break:keep-all}

/* 축 카드 — 머리는 반드시 2줄 고정. 한 줄로 두면 판정이 긴 카드만 줄바꿈돼
   같은 행 카드끼리 막대 기준선이 어긋난다. */
.axcard{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--ax);
  border-radius:12px;padding:11px 13px 12px;min-width:0}
.axcard .ah{margin-bottom:9px}
.axcard .ah-t{display:flex;align-items:baseline;gap:8px;min-height:19px}
.axcard .ah-t h3{margin:0;font-size:13.5px;font-weight:700;color:var(--ink);
  letter-spacing:-.01em;white-space:nowrap}
.axcard .ah-v{margin-left:auto;font-size:11px;font-weight:700;color:var(--ax-fg);white-space:nowrap}
.axcard .ah-s{min-height:16px;font-size:11px;line-height:16px;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.axcard .rows{display:flex;flex-direction:column;gap:5px}
.axcard .note{margin:10px 0 0;padding-top:9px;border-top:1px dashed var(--line);
  font-size:11.5px;line-height:1.45;color:var(--ink-3)}

/* 묶음 막대 — 하위 항목이 여럿인 축 (직주근접 4권역 · 생활 갈래) */
.axcard .gwrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px}
.axcard .grp>.gh{display:flex;align-items:baseline;gap:6px;margin-bottom:4px}
.axcard .grp>.gh b{font-size:12px;font-weight:800;color:var(--ink-2)}
.axcard .grp>.gh small{font-size:11px;color:var(--ink-3);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.axcard .grow{display:grid;grid-template-columns:minmax(0,1fr) 48px;align-items:center;gap:8px;height:20px}
.axcard .grow .gv{text-align:right;font-size:13px;font-weight:700;
  font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink-2)}
.axcard .grow .gv.best{color:var(--ink)}

/* 표형 축 카드 (연식·재건축 · 가격) */
.axcard .atbl{display:grid;gap:0;font-size:12px}
.axcard .atbl>span{padding:6px 0;border-top:1px solid var(--line-soft)}
.axcard .atbl>span:nth-child(-n+3){border-top:0}
.axcard .atbl .tk{color:var(--ink-3);font-weight:600}
.axcard .atbl .tv{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.axcard .atbl .tv.na{color:var(--ink-3);font-weight:500}

/* 12열 축 격자 */
.axgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}
.ax4{grid-column:span 4}
.ax6{grid-column:span 6}
.ax8{grid-column:span 8}
@media (max-width:900px){
  .axgrid>.axcard{grid-column:span 12}
  .axcard .gwrap{grid-template-columns:minmax(0,1fr)}
}

/* 판세 띠 — 축마다 어느 단지가 앞서는지 한 줄. 점은 앞선 단지의 계열색이다
   (카드 윗변의 축색과 다르다 — 여기서 축색을 쓰면 이 띠가 있을 이유가 없어진다). */
.vstrip{display:flex;align-items:stretch;background:var(--card);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;margin-bottom:12px}
.vstrip>.vl{flex:0 0 auto;display:flex;align-items:center;padding:0 14px;background:var(--surface);
  font-size:11.5px;font-weight:800;color:var(--ink-3);letter-spacing:.04em}
.vstrip>.vi{flex:1;min-width:0;padding:8px 12px;border-left:1px solid var(--line-soft)}
.vstrip>.vi small{display:block;font-size:11px;color:var(--ink-3);font-weight:700}
.vstrip>.vi b{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--ink)}

/* 비교 담기 트레이 — 헤더 아래 고정 */
.tray2{display:flex;align-items:center;gap:10px;padding:9px 20px;
  border-top:1px solid var(--line-soft);background:var(--surface)}
.tray2>.tl{font-size:11.5px;font-weight:800;color:var(--ink-3);letter-spacing:.04em;white-space:nowrap}
.tray2>.ti{display:flex;gap:6px;flex:1;min-width:0}
.tray2 .titem{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;height:30px;
  padding:0 6px 0 11px;border:1px solid var(--line);border-radius:999px;background:var(--card)}
.tray2 .titem b{font-size:12.5px;font-weight:700;color:var(--ink)}
.tray2 .titem button{width:20px;height:20px;border:0;border-radius:50%;background:var(--surface);
  color:var(--ink-3);font-size:11px;line-height:1;cursor:pointer}
.tray2 .tempty{font-size:12px;color:var(--ink-3);align-self:center}
.tray2 .tgo{flex:0 0 auto;display:inline-flex;align-items:center;height:32px;padding:0 15px;
  border:0;border-radius:10px;background:var(--accent);color:var(--on-accent);
  font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.tray2 .tgo:disabled{background:var(--surface);color:var(--ink-3);cursor:default}

/* 담기 버튼 */
.pickb{height:32px;padding:0 12px;border:1px solid var(--line);border-radius:999px;
  background:var(--card);color:var(--accent);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.pickb.on{background:var(--band);border-color:var(--band);color:#fff}

/* range — 커스텀 div 막대를 쓰지 않는다 (키보드·스크린리더가 사라진다) */
.rg{-webkit-appearance:none;appearance:none;width:100%;height:18px;background:transparent;cursor:pointer}
.rg::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:var(--surface)}
.rg::-moz-range-track{height:6px;border-radius:3px;background:var(--surface)}
.rg::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-6px;width:18px;height:18px;
  border-radius:50%;background:var(--card);border:2px solid var(--accent);
  box-shadow:0 1px 4px rgba(15,23,42,.2)}
.rg::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--card);
  border:2px solid var(--accent)}
.rg:focus-visible{outline:2px solid var(--sub);outline-offset:3px;border-radius:999px}
.rgscale{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-3);margin-top:2px}

/* 조건 패널 */
.fp{display:flex;flex-direction:column;background:var(--card);border-left:1px solid var(--line);min-height:0}
.fp>.fph{display:flex;align-items:baseline;gap:8px;padding:14px 18px 12px;border-bottom:1px solid var(--line)}
.fp>.fph b{font-size:15px;font-weight:700;color:var(--ink)}
.fp>.fpb{flex:1;min-height:0;overflow-y:auto;padding:14px 18px 18px;
  display:flex;flex-direction:column;gap:18px}
.fp>.fpf{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:12px 18px;
  border-top:1px solid var(--line);background:var(--card)}
.fp .fgl{font-size:11.5px;font-weight:800;letter-spacing:.04em}
.fp .fgh{display:flex;align-items:baseline;gap:8px;margin-bottom:7px}
.fp .fgv{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.fp .fsep{height:1px;background:var(--line-soft)}
.fp .sel2{height:38px;border:1px solid var(--line);border-radius:10px;background:var(--card);
  color:var(--ink);font:inherit;font-size:13px;padding:0 9px;min-width:0}

/* 홈 — 지도 + 조건 2열 */
.home2{display:grid;grid-template-columns:minmax(0,1fr) 372px;height:calc(100vh - 102px);min-height:640px}
.home2>.hmap{position:relative;overflow:hidden;min-height:520px;background:var(--surface)}
@media (max-width:900px){ .home2{grid-template-columns:minmax(0,1fr);height:auto} }

/* 상세 머리의 큰 담기 단추 — 담긴 상태는 트레이·지도의 .pickb.on 과 같은 색을 쓴다 */
.btn[data-pick][aria-pressed="true"]{background:var(--band);color:#fff}

/* ---- 3단계 곁 규칙 — 비교 카드 */
.ax12{grid-column:span 12}
/* 표 카드 머리 칸 — 어느 열이 어느 단지인지. 세 곳이면 열이 넷이라 첫 줄 선을 하나 더 지운다 */
.axcard .atbl.c4>span:nth-child(4){border-top:0}
.axcard .atbl .th{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;min-width:0;
  color:var(--ink-2);font-weight:700}
.axcard .atbl .th b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.axcard .atbl .th .slot-area{display:flex;gap:3px;flex-basis:100%}
/* 축 칩 줄 머리 · 차이만 보기 켜짐 */
.axl{font-size:11.5px;font-weight:800;color:var(--ink-3);letter-spacing:.04em}
.pill.sm{height:30px;font-size:12px}
.pill.diff[aria-pressed="true"]{border-color:var(--accent);color:var(--accent-dk)}
/* 접어 둔 축 줄 */
.axmore{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:12px;padding:10px 14px;
  background:var(--card);border:1px solid var(--line);border-radius:12px}
.axmore .am-l{font-size:12px;font-weight:700;color:var(--ink-3)}
.axmore .am-n{font-size:12px;color:var(--ink-3)}
.axmore .am-r{margin-left:auto;font-size:11px;color:var(--ink-3)}
/* 두 곳 미만 빈 상태 (지시서 3-10) */
.cmpneed{margin:24px 0;padding:40px 20px;text-align:center;background:var(--card);
  border:1px dashed var(--line);border-radius:14px}
.cmpneed>b{display:block;font-size:16px;color:var(--ink);margin-bottom:6px}
.cmpneed>span{font-size:13.5px;color:var(--ink-3)}
.cmpneed .cn-act{display:flex;justify-content:center;gap:8px;margin-top:16px}
.cmpneed .cn-act .pill{height:40px}

/* ================================================================
   비교 개편 (사용자 2026-09-13) — 1 아파트 요약 3열 → 2 가격 비교 → 3 판세 → 4 축 카드
   ================================================================ */
.cmp-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:18px 0 8px}
.cmp-h h2{margin:0;font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.cmp-h span{font-size:11.5px;color:var(--ink-3)}
#out>.cmp-h:first-child{margin-top:4px}
/* 1 아파트 요약 — 아파트마다 한 열. 윗변 색이 비교 계열색(아래 카드의 점 색과 같다) */
.csum{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:12px;align-items:stretch}
.cs-card{display:flex;flex-direction:column;gap:10px;min-width:0;background:var(--card);border:1px solid var(--line);
  border-top:3px solid var(--sc);border-radius:12px;padding:10px}
.cs-art{display:block;color:inherit;text-decoration:none;border-radius:9px}
.cs-art:focus-visible{outline:2px solid var(--sub);outline-offset:2px}
.cs-card .repcard{aspect-ratio:16/10;min-height:0;padding:12px;border-radius:9px}
.cs-card .repcard .t .nm{font-size:16px;line-height:1.25}
.cs-card .repcard .t .sub{font-size:11.5px}
.cs-kv{display:grid;grid-template-columns:66px minmax(0,1fr);gap:5px 8px;margin:0;font-size:12.5px;line-height:1.4}
.cs-kv dt{margin:0;color:var(--ink-3);font-weight:600}
.cs-kv dd{margin:0;min-width:0;color:var(--ink);font-weight:700;word-break:keep-all;font-variant-numeric:tabular-nums}
.cs-kv dd small,.cs-rb dd small{font-weight:500;color:var(--ink-3)}
.cs-kv .na,.cs-rb .na{color:var(--ink-3);font-weight:500;font-size:inherit;letter-spacing:inherit}   /* 전역 .na 글자 크기가 칸보다 커지지 않게 */
/* 준공 30년이 지난 곳 — 재건축 칸을 글자색으로 띄운다 */
.cs-rb{margin-top:auto;padding:9px 10px;border-radius:9px;
  background:color-mix(in srgb,var(--ax-redev) 8%,var(--card));border:1px solid color-mix(in srgb,var(--ax-redev) 34%,var(--line))}
.cs-rbh{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin-bottom:6px;font-size:13px;font-weight:800;color:var(--axf-redev)}
.cs-rbh small{font-size:11px;font-weight:600}
.cs-rb dl{display:grid;grid-template-columns:66px minmax(0,1fr);gap:4px 8px;margin:0;font-size:12px;line-height:1.4}
.cs-rb dt{margin:0;color:var(--axf-redev);font-weight:600}
.cs-rb dd{margin:0;min-width:0;color:var(--axf-redev);font-weight:700;word-break:keep-all}
.cs-rbl{display:inline-block;margin-top:7px;font-size:11.5px;font-weight:700;color:var(--axf-redev);text-decoration:none}
.cs-rbl:hover,.cs-rbl:focus-visible{text-decoration:underline}
/* 2 가격 비교 — 라벨 열 + 아파트 열. 칸 안은 값 / 판정 / 사실 순으로 줄을 나눈다 */
.cprice{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--ax-price);border-radius:12px;padding:6px 13px 12px}
.cp-tbl{display:grid;grid-template-columns:78px repeat(var(--n,3),minmax(0,1fr));column-gap:12px}
.cp-tbl>*{min-width:0;padding:9px 0;border-top:1px solid var(--line-soft)}
.cp-tbl>.cp-hd{border-top:0;padding:6px 0 7px}
.cp-tbl .tk{font-size:12px;font-weight:600;color:var(--ink-3)}
.cp-tbl .th{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.cp-tbl .th b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-tbl .th .slot-area{display:flex;gap:3px;flex-basis:100%}
.pv{display:flex;flex-direction:column;gap:2px}
.pv .v{font-size:15px;font-weight:800;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.pv .v.na{font-size:12px;font-weight:500;letter-spacing:0;color:var(--ink-3)}
.pv .pt{display:flex;flex-wrap:wrap;gap:0 6px;font-size:11.5px;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums}
.pv .pt b{font-weight:800;color:var(--ink)}
.pv .pt b.lo{color:var(--down)}
.pv .pt b.hi{color:var(--up)}
.pv .fact{margin-top:1px;padding-top:3px;border-top:1px dashed var(--line-soft);font-size:11px;line-height:1.4;color:var(--ink-3)}
.cprice .note{margin:8px 0 0;padding-top:8px;border-top:1px dashed var(--line);font-size:11.5px;line-height:1.45;color:var(--ink-3)}
/* 비교 화면 상세 창 — 아파트마다 탭. 내용은 아파트 페이지 상세와 같다 (static/detail.js) */
.cmp-h .ahm{margin-left:auto}
.cdet-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line-soft)}
.cdet-tab{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%;height:32px;padding:0 12px;
  border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink-2);
  font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cdet-tab.on{border-color:var(--sc);color:var(--ink);box-shadow:inset 0 -3px 0 var(--sc)}
.cdet-tab:focus-visible{outline:2px solid var(--sub);outline-offset:2px}
/* 3 판세 뒤 축 칩 줄 */
.axchips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:16px 0 12px}
/* 4 축 카드 — 줄 끝에 앞선 곳과의 차이 (최단 · +4분) */
.lrow.g{grid-template-columns:72px minmax(0,1fr) 52px 46px}
.axcard .grow.g{grid-template-columns:minmax(0,1fr) 48px 46px}
.lgap{font-size:11px;font-weight:700;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.lgap.best{color:var(--ax-fg,var(--ink))}
@media (max-width:620px){
  .csum{gap:6px}
  .cs-card{gap:7px;padding:6px;border-radius:10px}
  .cs-card .repcard{aspect-ratio:1/1;padding:7px}
  .cs-card .repcard .t .nm{font-size:12px}
  .cs-card .repcard .t .sub,.cs-card .repcard .corner,.cs-card .repcard .chiprow{display:none}
  .cs-card .repcard .sgg{max-width:100%;font-size:10px}
  .cs-kv,.cs-rb dl{grid-template-columns:minmax(0,1fr);gap:0;font-size:11.5px}
  .cs-kv dt,.cs-rb dt{margin-top:6px;font-size:10.5px}
  .cs-kv dt:first-child,.cs-rb dt:first-child{margin-top:0}
  .cs-rb{padding:6px 7px}
  .cs-rbh{font-size:12px}
  .cp-tbl{grid-template-columns:50px repeat(var(--n,3),minmax(0,1fr));column-gap:6px}
  .pv .v{font-size:13px}
  .pv .pt,.pv .fact{font-size:10.5px}
  .lrow.g{grid-template-columns:62px minmax(0,1fr) 46px 40px;gap:6px}
  .axcard .grow.g{grid-template-columns:minmax(0,1fr) 46px 40px}
}

/* ================================================================
   2차 — 폰(620px 이하) 가독성 (사용자 2026-09-13 · 미리보기 먼저)
   ================================================================ */
.csum-m,.cmp-legend,.cp-tbl .th .cp-band,.pc-types .pc-tl{display:none}
@media (max-width:620px){
  /* 비교 요약 — 세로 카드 세 장 대신 항목 한 줄 · 값 세 칸 */
  .csum{display:none}
  .csum-m{display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 10px 2px}
  .cm-heads,.cm-vals{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:8px}
  .cm-h{display:flex;flex-direction:column;gap:6px;min-width:0;padding-bottom:8px;border-bottom:3px solid var(--sc);color:var(--ink);text-decoration:none}
  .cm-h .repcard{aspect-ratio:4/3;min-height:0;padding:0;border-radius:8px}
  .cm-h .repcard .t,.cm-h .repcard .sgg,.cm-h .repcard .corner{display:none}
  .cm-h b{font-size:13.5px;font-weight:800;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cm-row{padding:9px 0;border-top:1px solid var(--line-soft)}
  .cm-heads+.cm-row{border-top:0}
  .cm-k{margin-bottom:4px;font-size:12px;font-weight:700;color:var(--ink-3)}
  .cm-v{min-width:0;font-size:14px;font-weight:700;line-height:1.35;color:var(--ink);word-break:keep-all;font-variant-numeric:tabular-nums}
  .cm-v small{display:block;margin-top:1px;font-size:12px;font-weight:500;color:var(--ink-3)}
  .cm-v .na{font-weight:500;color:var(--ink-3)}
  .cm-v .cm-rb{color:var(--axf-redev)}
  .cm-v .cm-rbl{display:inline-block;margin-top:3px;font-size:12px;font-weight:700;color:var(--axf-redev);text-decoration:none}
  /* 색 범례 — 스크롤해도 위에 붙어 어느 색이 어느 아파트인지 보인다 */
  .cmp-legend{display:flex;gap:12px;position:sticky;top:0;z-index:6;margin:0 0 10px;padding:8px 10px;
    background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 4px 12px rgba(15,23,42,.08);
    overflow-x:auto;scrollbar-width:none}
  .cmp-legend::-webkit-scrollbar{display:none}
  .cmp-legend span{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--ink-2);white-space:nowrap}
  /* 가격 표 머리 — 아파트별 면적 칩은 줄이 쌓여 접고, 고른 면적만 적는다 (공통 면적 버튼은 위 줄에 있다) */
  .cp-tbl .th .slot-area{display:none}
  .cp-tbl .th .cp-band{display:block;flex-basis:100%;font-size:12px;font-weight:500;color:var(--ink-3)}
  .cp-tbl .th b{font-size:13px}
  .pv .v{font-size:14.5px}
  .pv .pt,.pv .fact{font-size:12px}
  /* 막대 줄 — 이름 · 값 · 차이를 한 줄에, 막대는 아래 한 줄 전체 (이름이 '올림픽…' 으로 잘리지 않게) */
  .lrow.g{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"n v g" "t t t";height:auto;row-gap:5px;column-gap:8px;padding:3px 0}
  .lrow.g>.lnm{grid-area:n}
  .lrow.g>.trk{grid-area:t}
  .lrow.g>.lval{grid-area:v}
  .lrow.g>.lgap{grid-area:g;min-width:44px;text-align:right}
  .lgap,.axcard .ah-s,.axcard .note,.axcard .kv{font-size:12px}
  .axcard .grow.g .gv{font-size:13.5px}

  /* 아파트 페이지 — 담기 · 네이버 · 즐겨찾기 · 공유를 한 줄로 (2×2 큰 칸이 첫 화면을 차지했다) */
  .app-shell .apthead .ah-act{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:6px}
  .app-shell .apthead .ah-act .btn,.app-shell .apthead .ah-act .pill{height:42px;padding:0 6px;font-size:12.5px;white-space:nowrap}
  /* 가격 카드 표 — 타입별 최고가는 줄 아래로 (네 번째 칸은 잘려 보였다) */
  .pc-tbl .tr{grid-template-columns:minmax(0,1fr) 86px 92px!important;min-width:0!important}
  .pc-tbl .tr.th>span:last-child{display:none}
  .pc-tbl .pc-types{grid-column:1 / -1;padding-top:2px}
  .pc-types .pc-tl{display:inline;margin-right:5px;font-style:normal;font-weight:700;color:var(--ink-3)}
}

/* ================================================================
   3단계 보정 — 겹침·잘림
   ================================================================ */
/* 데스크톱 — '차이 있는 항목만' 을 URL 복사 옆으로 (줄이 space-between 이라 가운데에 떴다) */
.cmpbar .pill.diff{margin-left:auto}

@media (max-width:620px){
  /* 판세 띠 — 두 칸씩 접는다. 다섯 칸을 한 줄에 두면 가장 좁은 칸이 61px 까지 줄어 글자가 겹쳤다 */
  .vstrip{flex-wrap:wrap}
  .vstrip>.vl{flex:1 1 100%;padding:6px 12px}
  .vstrip>.vi{flex:1 1 calc(50% - 1px);border-left:0;border-top:1px solid var(--line-soft)}
  /* 칸 사이 선은 왼쪽 칸에 긋는다. .vl 도 span 이라 짝수번째가 왼쪽 칸이다. 혼자 한 줄인 마지막 칸은 뺀다 */
  .vstrip>.vi:nth-of-type(even):not(:last-child){border-right:1px solid var(--line-soft)}
  /* 점이 혼자 한 줄을 차지하지 않게 — 줄바꿈은 글자 안에서만 */
  .vstrip>.vi b{flex-wrap:nowrap;align-items:flex-start}
  .vstrip>.vi b .ldot{margin-top:6px}

  /* 면적 줄 — 옛 폰 규칙은 한 줄 고정이었다(항목이 둘이던 때). 면적은 한 줄 전부, 알약 둘은 아랫줄 양끝 */
  .app-shell .cmpbar{flex-wrap:wrap;row-gap:10px}
  .app-shell .cmpbar .cb-l{flex:1 1 100%;overflow:visible;white-space:nowrap}
  .app-shell .cmpbar .cb-l .toggle{flex:0 1 auto;min-width:0;max-width:100%}   /* 버튼 하나 옆에 빈 알약이 길게 남지 않게 — 제 폭만 */
  .app-shell .cmpbar .pill.diff{margin-left:0}
  .app-shell .cmpbar #share{margin-left:auto}

  /* 트레이 — 폰에서는 머리글을 빼 두 곳 이름이 버튼 밑에 잘리지 않게 */
  .app-shell .tray2{padding:8px 12px;gap:8px}
  .app-shell .tray2>.tl{display:none}
}

/* ================================================================
   4단계 — 아파트 상세: 머리 한 줄 + [사진 | 축 카드]
   비교 화면과 같은 줄 규칙(.axcard · .lrow · .kv)을 쓴다.
   ================================================================ */
.apthead{padding:14px 0 14px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.apthead .ah-crumb{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--ink-3)}
.apthead .ah-crumb .dim{opacity:.85}
.apthead .ah-row{display:flex;align-items:flex-end;gap:10px 14px;flex-wrap:wrap;margin-top:8px}
.apthead .ah-main{min-width:0}
.apthead h1{margin:0 0 6px;font-size:24px;font-weight:700;letter-spacing:-.025em;line-height:1.2;color:var(--ink)}
.apthead .chips{margin-top:0;gap:5px}
.apthead .chips .chip{padding:2px 10px;font-size:12px;font-weight:600;color:var(--ink-2)}
.apthead .ah-act{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.apthead .ah-act .btn{height:40px;padding:0 16px;font-size:13.5px}
.apthead .ah-act .pill{height:40px}
.apthead .ah-act .favb.pill{width:auto;padding:0 12px}   /* .favb 의 36px 정사각 폭이 남아 글자가 잘렸다 */
.aptgrid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;align-items:start}
.aptside{display:flex;flex-direction:column;gap:10px;min-width:0}
.aptside{gap:12px}
.aptside .repcard{aspect-ratio:auto;min-height:340px;border-radius:12px;border:1px solid var(--line)}
.aptside .repcard.photo img.art{filter:saturate(.88)}
.photo-note{margin:0;font-size:11px;line-height:1.5;color:var(--ink-3)}
@media (max-width:900px){ .aptside .repcard{min-height:220px} }
.kv dd.na{color:var(--ink-3);font-weight:500;font-size:inherit}
@media (max-width:900px){ .aptgrid{grid-template-columns:minmax(0,1fr)} }

/* 아파트 정보 카드 */
.ai-lead{display:flex;align-items:baseline;gap:6px 10px;flex-wrap:wrap;padding-bottom:11px;border-bottom:1px solid var(--line)}
.ai-lead>b{font-size:22px;font-weight:800;letter-spacing:-.025em;color:var(--ink);font-variant-numeric:tabular-nums}
.ai-lead>small{font-size:12px;color:var(--ink-3);margin-left:-4px}
.ai-lead .ai-sub{font-size:12.5px;color:var(--ink-2)}
.ai-lead .ai-bands{margin-left:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ai-lead .ai-bl{font-size:11px;font-weight:700;color:var(--ink-3)}
.ai-types{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px}
.ai-types .ai-tl{flex:0 0 72px;font-size:12px;font-weight:700;color:var(--ink-2)}
.lrow.ai-park{grid-template-columns:72px minmax(0,1fr) 84px;height:26px;margin:10px 0 2px}
.lrow.ai-park>:first-child{font-size:12px;font-weight:700;color:var(--ink-2)}
.infogrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px 18px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.infogrid .ig-g{min-width:0}
.infogrid .ig-h{margin-bottom:5px;font-size:11px;font-weight:800;color:var(--ink-3);letter-spacing:.04em}
.infogrid .kv{grid-template-columns:minmax(0,1fr) auto;gap:0;margin:0;padding:0;border:0}
.infogrid .kv dt,.infogrid .kv dd{padding:4px 0;border-top:1px solid var(--line-soft)}
.infogrid .kv dt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.infogrid .kv dd{text-align:right;font-weight:700;color:var(--ink)}
.infogrid .kv dd.na{font-weight:500;color:var(--ink-3);font-size:inherit}
@media (max-width:1200px){ .infogrid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:820px){ .infogrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
.chiprow2{display:flex;align-items:baseline;gap:6px 8px;flex-wrap:wrap;margin-top:10px;padding-top:9px;border-top:1px dashed var(--line)}
.chiprow2 .cr-l{font-size:11px;font-weight:800;color:var(--ink-3);letter-spacing:.04em}
.chiprow2 .cr-c{display:inline-flex;align-items:baseline;gap:5px;padding:2px 8px;border-radius:7px;background:var(--surface);
  font-size:11.5px;font-weight:600;color:var(--ink-2)}
.chiprow2 .cr-c b{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}

/* 역세권 · 직주근접 — 상세에서만 큰 수치 하나(도보 n분) */
.bigval{display:flex;align-items:baseline;gap:7px;margin-bottom:9px}
.bigval b{font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.bigval span{font-size:12.5px;color:var(--ink-3)}
.lrow.st{grid-template-columns:90px minmax(0,1fr) 48px;height:22px}
.lrow.st>:first-child{font-size:12px;font-weight:600;color:var(--ink-2)}
.lrow .lv{text-align:right;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.lrow.cm{grid-template-columns:72px minmax(0,1fr) 56px;height:28px}
.lrow .lsub{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.lrow .lsub b{font-size:12px;font-weight:800;color:var(--ink-2)}
.lrow .lsub em{font-style:normal;font-size:11px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 학군 — 초·중·고·학원가 네 칸 */
.d4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:1200px){ .d4{grid-template-columns:repeat(2,minmax(0,1fr))} }
.schb{min-width:0;padding:9px 11px;border:1px solid var(--line);border-radius:10px}
.schb .sb-h{display:flex;align-items:baseline;gap:6px;margin-bottom:5px}
.schb .sb-h b{font-size:12px;font-weight:800;color:var(--ax-fg)}
.schb .sb-h small{min-width:0;font-size:11px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.schb .sb-n{font-size:13.5px;font-weight:700;letter-spacing:-.01em;line-height:1.3;color:var(--ink);word-break:keep-all}
.schb .trk{display:block;margin:6px 0 4px}
.schb .sb-d{margin-top:4px;font-size:12.5px;font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums}
.schb .sb-t{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.schb .sb-t span{padding:2px 7px;border-radius:7px;background:var(--surface);font-size:11px;font-weight:600;color:var(--ink-2)}

/* 생활 편의 — 두 칸 타일 */
.d2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px}
@media (max-width:900px){ .d2{grid-template-columns:minmax(0,1fr)} }
.ltile{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"k v" "n c" "b b";align-items:baseline;gap:2px 10px;
  padding:8px 0 9px;border-top:1px solid var(--line-soft)}
.ltile>*{min-width:0}
.lt-k{grid-area:k;font-size:12px;font-weight:700;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lt-v{grid-area:v;text-align:right;font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.lt-v small{font-size:11px;font-weight:500;color:var(--ink-3)}
.lt-n{grid-area:n;font-size:12.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lt-c{grid-area:c;text-align:right;font-size:11px;color:var(--ink-3);white-space:nowrap}
.lt-b{grid-area:b;margin-top:5px;height:6px}

/* 가격 — 연결 상태 */
.pstate{padding:14px;border-radius:10px;background:var(--surface);font-size:12.5px;line-height:1.6;color:var(--ink-2)}
.pstate b{display:block;margin-bottom:3px;font-size:13px;color:var(--ink)}
.pstate a{font-weight:700;white-space:nowrap}

/* ================================================================
   5단계 — 홈: 지도 + 조건 패널
   ================================================================ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:root{--axf-station:#4B32C3;--axf-commute:#9A5B00;--axf-redev:#12703A;--axf-parking:#0A6E6D;--axf-price:#B03A33}
.home-main{max-width:none;padding:0}
.home2{height:calc(100vh - 117px)}                      /* 헤더 66 + 트레이 51 — 102 로 두면 15px 가 화면 밖으로 밀렸다 */
.hm-canvas{position:absolute;inset:0}
.hm-off{display:flex;align-items:center;justify-content:center;height:100%;padding:20px;text-align:center;font-size:13px;color:var(--ink-3)}
.hm-top{position:absolute;left:16px;top:16px;z-index:6;width:min(352px,calc(100% - 32px))}
.hm-search input{height:46px;border-radius:999px;padding:0 18px;border-color:transparent;font-size:14px;box-shadow:0 6px 20px rgba(15,23,42,.16)}
.hm-qwrap{margin:9px 0 0}
.hm-qwrap::before,.hm-qwrap::after{display:none}
.hm-quick{gap:6px;padding:2px 2px 8px}
.hm-quick .pill{flex:0 0 auto;scroll-snap-align:start;box-shadow:0 2px 8px rgba(15,23,42,.10)}
.hm-quick .pill i{font-style:normal;font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums}
.hm-quick .pill[aria-pressed="true"]{border-color:var(--accent);color:var(--accent-dk)}
.hm-quick .pill[aria-pressed="true"] i{color:var(--accent-dk)}
.hm-quick .pill[aria-disabled="true"]{color:var(--ink-3);cursor:default;box-shadow:none}
.hm-qwrap .qnav{top:calc(50% - 3px)}
.hm-zoom{position:absolute;right:16px;top:16px;z-index:6;display:flex;flex-direction:column;gap:6px}
.hm-zoom button{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;
  border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink-2);
  font:inherit;font-size:17px;font-weight:700;cursor:pointer;box-shadow:0 2px 8px rgba(15,23,42,.14)}
.hm-zoom button[data-zoom="me"]{color:var(--accent)}
.hm-zoom .ic{width:18px;height:18px;margin:0}
.hm-bottom{position:absolute;left:16px;right:16px;bottom:14px;z-index:5;pointer-events:none}
.hm-bottom>*{pointer-events:auto}
.hm-badges{display:flex;align-items:center;gap:8px;margin-bottom:9px;flex-wrap:wrap;width:max-content;max-width:100%}
.hm-cnt{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 12px;border-radius:999px;
  background:var(--band-dk);color:#fff;font-size:12.5px;font-weight:700;white-space:nowrap;box-shadow:0 4px 14px rgba(15,23,42,.28)}
.hm-cnt b{font-variant-numeric:tabular-nums}
.hm-cnt small{font-size:12px;font-weight:600;color:#fff}
.hm-legend{display:inline-flex;align-items:center;gap:9px;height:30px;padding:0 12px;border-radius:999px;
  background:var(--card);border:1px solid var(--line);font-size:11.5px;color:var(--ink-3);font-weight:600;box-shadow:0 2px 8px rgba(15,23,42,.12)}
.hm-legend span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.hm-legend i{width:9px;height:9px;border-radius:3px}
.hm-fbtn{display:none}
.hm-strip{display:flex;gap:9px;padding-bottom:2px}
.hm-card{flex:0 0 272px;display:flex;gap:11px;padding:10px;min-width:0;background:var(--card);
  border:1px solid var(--line);border-radius:12px;box-shadow:0 4px 16px rgba(15,23,42,.14)}
.hm-card.on{border-color:var(--accent)}
.hm-card.focus{outline:2px solid var(--sub);outline-offset:-2px}
.hc-ph{flex:0 0 74px;height:74px;border-radius:9px;background:var(--surface) center/cover no-repeat;filter:saturate(.85)}
.hc-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.hc-n{font-size:13.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none}
.hc-m{font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-f{display:flex;align-items:center;flex-wrap:wrap;gap:4px 5px;margin-top:auto;min-width:0}
.hc-f i{font-style:normal;background:var(--surface);border-radius:7px;padding:2px 7px;font-size:11px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.hc-f .pickb{margin-left:auto;height:26px;padding:0 10px;font-size:11.5px;flex:0 0 auto}
.hc-rent,.hc-out{margin-left:auto;font-style:normal;font-size:11px;font-weight:600;color:var(--ink-3);white-space:nowrap}
.hm-empty{max-width:100%;padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:12px;
  font-size:12.5px;color:var(--ink-2);box-shadow:0 4px 16px rgba(15,23,42,.14)}
.fp>.fph .pill{margin-left:auto;height:28px;font-size:11.5px}
.fp .fp-sel3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.fp .fp-sel4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.fp .fp-seg{display:flex;gap:2px;padding:3px;margin-bottom:9px;border:1px solid var(--line);border-radius:999px}
.fp .fp-seg button{flex:1;height:30px;border:0;border-radius:999px;background:transparent;color:var(--ink-3);
  font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.fp .fp-seg button[aria-pressed="true"]{background:var(--band);color:#fff}
.fp .rgscale.abs{position:relative;display:block;height:15px}
.fp .rgscale.abs span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.fp .rgscale.abs span:first-child{left:0;transform:none}
.fp .rgscale.abs span:last-child{right:0;transform:none}
.fp .fp-lg{display:flex;flex-direction:column;gap:9px}
.fp .fp-lgh{margin-bottom:5px;font-size:11px;font-weight:700;color:var(--ink-3)}
.fp .fp-lgp{display:flex;flex-wrap:wrap;gap:6px}
.fp .fp-lgp .pill[aria-pressed="true"]{background:color-mix(in srgb,var(--ax-parking) var(--axmix,10%),var(--card));
  border:1.5px solid var(--ax-parking);color:var(--axf-parking)}
.fp .fp-note{margin:8px 0 0;font-size:11px;line-height:1.45;color:var(--ink-3)}
.fp .fp-x{display:flex;flex-wrap:wrap;gap:6px}
.fp .fp-chk{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.fp .fpf-n{min-width:0;font-size:12.5px;color:var(--ink-3)}
.fp .fpf-n b{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.fp .fpf-n b.big{font-size:16px;font-weight:800}
.fp .fpf-go{margin-left:auto;display:inline-flex;align-items:center;height:38px;padding:0 15px;border-radius:10px;
  background:var(--accent);color:var(--on-accent);font-size:13.5px;font-weight:700;white-space:nowrap;text-decoration:none}
.fp .fpf-close{display:none}
@media (max-width:900px){
  .home2>.fp{border-left:0;border-top:1px solid var(--line)}
  .home2>.fp>.fpb{overflow:visible}
}
.lfchip{margin-left:8px;vertical-align:middle}
#to-map{margin-top:10px}

/* ================================================================
   6단계 — 폰 (620px 이하 app-shell) · 터치 타깃 44px
   ================================================================ */
@media (max-width:760px){
  .pill{min-height:44px}
  .pickb{min-height:44px}
  .rg{height:44px}
  /* 카드 안 작은 담기 · 트레이 ✕ 는 모양을 키우지 않고 누르는 자리만 44px 로 넓힌다 */
  .hc-f .pickb,.tray2 .titem button{position:relative;min-height:0}
  .hc-f .pickb::after{content:"";position:absolute;left:0;right:0;top:-9px;bottom:-9px}   /* 옆으로 넓히면 보이지 않는 칸이 버튼 폭을 넘어 넘침으로 잡힌다 */
  .tray2 .titem button::after{content:"";position:absolute;inset:-12px}
  .fp .sel2{height:44px}
  .fp .fp-seg button{height:38px}
}
@media (max-width:620px){
  .app-shell .home2{display:block;height:auto;min-height:0}
  .app-shell .home2>.hmap{height:calc(100svh - 182px);min-height:460px}
  .app-shell .home2>.fp{display:none}
  .app-shell .hm-top{left:12px;right:60px;top:12px;width:auto}
  .app-shell .hm-zoom{right:12px;top:12px}
  .app-shell .hm-zoom button{width:40px;height:40px}
  .app-shell .hm-bottom{left:12px;right:12px;bottom:12px}
  .app-shell .hm-badges{width:100%;flex-wrap:nowrap}
  .app-shell .hm-legend{display:none}
  .app-shell .hm-fbtn{display:inline-flex;margin-left:auto;color:var(--ink);font-weight:700;box-shadow:0 2px 8px rgba(15,23,42,.14)}
  .app-shell .hm-strip{scroll-snap-type:x mandatory}
  .app-shell .hm-card{flex:0 0 90%;scroll-snap-align:start}
  /* 12px 미만 글자를 쓰지 않는다 */
  .app-shell .hc-m,.app-shell .hc-f i,.app-shell .hc-rent,.app-shell .hc-out,.app-shell .hm-quick .pill,
  .app-shell .fp .fgl,.app-shell .fp .rgscale,.app-shell .fp .fp-lgh,.app-shell .fp .fp-note,.app-shell .fp #fv-lf{font-size:12px!important}
  /* 상세 머리 버튼 넷 — 한 줄에 셋, 한 줄에 하나로 흩어지지 않게 두 칸씩 */
  .app-shell .apthead .ah-act{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;margin-left:0}
  .app-shell .apthead .ah-act>*{width:100%;justify-content:center}
  .app-shell .apthead .ah-act .btn{height:44px}          /* 알약(44px)과 한 줄 높이를 맞춘다 — 40 이면 첫 칸만 2px 떠 보였다 */
  .app-shell .hc-f .pickb,.app-shell .fp>.fph .pill{font-size:12px}
}
/* 폰 — 바닥 시트로 올린 조건 패널 */
.hm-sheet .fs-box{max-height:88vh}
.hm-sheet .fs-b{display:flex;flex-direction:column;flex:1;min-height:0;padding:0;overflow:hidden}
.hm-sheet .fp{display:flex;flex:1;min-height:0;width:100%;border:0;border-radius:12px 20px 0 0}
.hm-sheet .fp>.fpb{overflow-y:auto}
.hm-sheet .fpf{flex-wrap:wrap;row-gap:8px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
.hm-sheet .fpf-n{flex:1 1 100%}
.hm-sheet .fpf-close{display:inline-flex}

/* ================================================================
   7단계 — 어두운 화면
   ================================================================ */
:root{--axmix:10%}
[data-theme="dark"]{
  --axmix:18%;                                          /* 축색 10% 칩 바탕은 어두운 카드 위에서 거의 안 보인다 */
  /* 밝은 바탕용 짙은 축 글자색은 어두운 카드 위에서 대비 2:1 — 축색을 흰색 쪽으로 섞어 쓴다 */
  --axf-station:color-mix(in srgb,var(--ax-station) 72%,#fff);
  --axf-commute:color-mix(in srgb,var(--ax-commute) 80%,#fff);
  --axf-redev:color-mix(in srgb,var(--ax-redev) 72%,#fff);
  --axf-parking:color-mix(in srgb,var(--ax-parking) 72%,#fff);
  --axf-price:color-mix(in srgb,var(--ax-price) 72%,#fff);
}
[data-theme="dark"] .hm-search input,[data-theme="dark"] .hm-quick .pill,[data-theme="dark"] .hm-zoom button,
[data-theme="dark"] .hm-card,[data-theme="dark"] .hm-legend,[data-theme="dark"] .hm-empty,
[data-theme="dark"] .hm-cnt,[data-theme="dark"] .app-shell .hm-fbtn{box-shadow:0 4px 16px rgba(0,0,0,.5)}

/* 7단계 — 어두운 화면 대비 (어두운 화면 QA 에서 찾은 것) */
:root{--on-accent:#fff}
[data-theme="dark"]{--on-accent:var(--paper)}          /* 밝은 파랑(#60A5FA) 위 흰 글자 2.54:1 → 짙은 글자 약 7.7:1 */
[data-theme="dark"] .toggle button.on{color:var(--on-accent)}
:where([data-theme="dark"]) a{color:var(--accent-dk)}  /* 기본 링크색 --band 는 어두운 카드 위 1.2:1. 클래스로 색을 정한 링크는 그대로 */
[data-theme="dark"] .fcount b{color:var(--ink)}
[data-theme="dark"] .site-head nav a.on .navcnt{color:var(--band-dk)}
[data-theme="dark"] .nb-tab.on{color:color-mix(in srgb,var(--ax,var(--accent)) 60%,#fff)}   /* 축색을 검정 쪽으로 누른 밝은 화면 규칙은 어두운 카드 위 2.18:1 */

/* ================================================================
   2차 — 폰 지역·조건 버튼 · 비교 저장 · 상세 창
   ================================================================ */
.hm-ctl{display:none}
.fp .fp-dist{margin-top:10px}
.fp .fp-dist .fgh{margin-bottom:4px}
@media (max-width:620px){
  .app-shell .hm-ctl{display:flex;gap:6px;margin-top:9px}
  .app-shell .hm-ctl .pill{min-width:0;color:var(--ink);font-weight:700;box-shadow:0 2px 8px rgba(15,23,42,.14)}
  .app-shell .hm-ctl #hm-rbtn{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis}
  .app-shell .hm-ctl .hm-fbtn{margin-left:0;flex:0 0 auto}
  .app-shell .fp .fp-dist .fp-lgh{font-size:12px}
}
[data-theme="dark"] .app-shell .hm-ctl .pill{box-shadow:0 4px 16px rgba(0,0,0,.5)}
.pill.savecmp[aria-pressed="true"]{border-color:var(--accent);color:var(--accent-dk)}
.scmp-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.scmp-list li{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:10px 14px;border-top:1px solid var(--line-soft)}
.scmp-list li:first-child{border-top:0}
.scmp-list .sc-n{flex:1 1 220px;min-width:0;font-weight:700;color:var(--ink)}
.scmp-list .sc-d,.scmp-list .sc-x{font-size:12px;color:var(--ink-3)}
.pop-list li .pl-nv.none{visibility:hidden}
.pop-back{margin:0 0 10px}
/* 상세 창 — 카드 머리의 '상세' 버튼에서 연다 */
.pop.wide{width:min(780px,100%)}
.ahm{margin-left:8px;flex:0 0 auto;height:24px;padding:0 10px;border:1px solid var(--line);border-radius:999px;
  background:var(--card);color:var(--ink-2);font:inherit;font-size:11.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.ahm:hover{border-color:var(--ax,var(--accent));color:var(--ink)}
.ahm:focus-visible{outline:2px solid var(--sub);outline-offset:2px}
@media (max-width:760px){ .ahm{position:relative;font-size:12px} .ahm::after{content:"";position:absolute;left:-4px;right:-4px;top:-10px;bottom:-10px} }
.msec{padding:12px 0 6px;border-top:1px solid var(--line)}
.msec:first-child{border-top:0;padding-top:2px}
.msec h4{margin:0 0 4px;font-size:12px;font-weight:800;color:var(--ink-3);letter-spacing:.04em}
.mdrow{display:grid;grid-template-columns:128px minmax(0,1fr);gap:2px 12px;padding:7px 0;border-top:1px solid var(--line-soft);font-size:13px;line-height:1.5}
.msec h4 + .mdrow{border-top:0}
.mdrow .mdk{color:var(--ink-3);font-weight:600;word-break:keep-all}
.mdrow .mdv{min-width:0;color:var(--ink);font-weight:600;word-break:keep-all}
.mdrow .mdv .na{font-style:normal;font-weight:500;color:var(--ink-3)}
.mdrow .mdn{grid-column:2;font-size:12px;line-height:1.45;color:var(--ink-3);word-break:keep-all}
.mact{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 2px}
.mtypes{display:flex;flex-wrap:wrap;gap:6px}
.mtbl{overflow-x:auto;font-size:13px}
.mtbl .tr{display:grid;grid-template-columns:var(--cols);column-gap:6px;align-items:center;min-width:var(--minw,0);
  padding:7px 0;border-top:1px solid var(--line-soft)}
.mtbl .tr.th{border-top:0;padding-top:2px;font-size:11.5px;font-weight:700;color:var(--ink-3)}
.mtbl .tr>*{min-width:0}
.mtbl .num{text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums}   /* 숫자 칸은 머리글과 값을 가운데로 (사용자) */
.mtbl .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mtbl .sub{display:block;font-size:11.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mtbl .na{color:var(--ink-3);font-weight:500}
.mtbl .best{font-weight:800;color:var(--ink)}
.mtbl .pill.sm{height:26px;padding:0 9px;font-size:11.5px}
/* 아파트 정보 · 가격 카드 — 최근 실거래 한 줄 + 평형별 최근 거래·최고가·타입별 최고가 (사용자 2026-09-13) */
.pc-lead{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin:2px 0 6px}
.pc-lead .pc-l{font-size:12px;font-weight:600;color:var(--ink-3)}
.pc-lead b{font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.pc-lead small{font-size:12px;color:var(--ink-3)}
.pc-tbl .num{font-weight:700;color:var(--ink)}
.pc-tbl .num .sub{font-weight:500}
.pc-types{min-width:0;font-size:12px;line-height:1.55;color:var(--ink-2);word-break:keep-all;font-variant-numeric:tabular-nums}
.pc-types i{font-style:normal;color:var(--ink-3)}
.pc-types .sep{color:var(--ink-3)}   /* --line 은 글자로 쓰면 대비 1.23 — 구분점도 글자라 읽히는 색으로 */
.pc-types .na{font-style:normal;color:var(--ink-3)}
.pc-note{margin:6px 0 0;font-size:12px;line-height:1.5;color:var(--ink-3)}
@media (max-width:620px){
  .mdrow{grid-template-columns:100px minmax(0,1fr)}
  .mtbl .sub,.mtbl .tr.th{font-size:12px}
  .app-shell .mtbl .pill.sm{min-height:0}
}

/* 생활 편의 묶음 머리의 기준 ('의료 도보 15분') */
.fp .fp-lgh em{margin-left:6px;font-style:normal;font-weight:600;color:var(--ink-3)}
@media (max-width:620px){ .app-shell .fp .fp-lgh em{font-size:12px} }

/* home (map page) - header spans the full width like the map below it. Web only; phones use the app-shell header */
@media (min-width:621px){
  .page-home .site-head .wrap{max-width:none;padding-left:20px;padding-right:20px}
}

/* 지도 단지 표 맨 위 — 대표 면적 최근 실거래가. 가격 글자가 면적보다 15% 크고 굵다 (13.2 / 11.5 · 폰 12.1 / 10.5) */
/*   순서는 단지명 → 가격 → 세대수·준공 (사용자) — 가격 줄은 이름 띠 바로 아래, 세대 줄은 가격에 붙여 둔다 */
.mtag .mt-p + span{padding-top:1px}
.mtag .mt-p{display:flex;align-items:baseline;justify-content:center;gap:4px;padding:4px 10px 0;
  font-style:normal;color:var(--ink);line-height:1.25;font-variant-numeric:tabular-nums}
.mtag .mt-p strong{font-size:13.2px;font-weight:800;letter-spacing:-.02em}
.mtag .mt-p small{font-size:11.5px;font-weight:600;color:var(--ink-2)}
@media (max-width:620px){ .mtag .mt-p{padding:3px 8px 0} .mtag .mt-p + span{padding-top:1px} .mtag .mt-p strong{font-size:12.1px} .mtag .mt-p small{font-size:10.5px} }

/* 홈 빠른 조건 — 가로로 밀던 알약 줄 대신 한 면에 다 보이는 3열 격자 (사용자). 접으면 한 줄 */
/*   칸 사이 틈으로 지도 글자·단지 표가 비쳐 겹쳐 보였다 — 격자 전체를 한 판 위에 올린다 */
.hm-qwrap .hm-quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;overflow:visible;padding:6px;scroll-snap-type:none;
  background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 4px 14px rgba(15,23,42,.16)}
.hm-qwrap .hm-quick:not(.closed) .pill{box-shadow:none}
/*   칸마다 한 줄 — 이름과 곳수가 줄바꿈되지 않는다 (사용자). 데스크톱은 격자 폭을 넓혀 칸을 키운다 */
.hm-qwrap .hm-quick .pill{height:36px;min-height:0;min-width:0;padding:0 8px;border-radius:10px;justify-content:space-between;gap:4px;
  white-space:nowrap;line-height:1;text-align:left}
.hm-qwrap .hm-quick .pill i{flex:0 0 auto;font-size:11px}
@media (min-width:621px){ .hm-top{width:min(420px,calc(100% - 32px))} }
/*   폰은 오른쪽 확대 단추 자리만큼 좁다 — 칸 안 여백·글자를 줄여 360px 폭에서도 한 줄 */
@media (max-width:620px){
  .app-shell .hm-qwrap .hm-quick{gap:5px;padding:5px}
  .app-shell .hm-qwrap .hm-quick .pill{padding:0 6px;gap:3px;font-size:11.5px!important}
  .app-shell .hm-qwrap .hm-quick .pill i{font-size:10.5px}
}

/* 지도 단지 표를 누르면 그 위에 뜨는 단지 카드 (아래 띠 카드와 같은 모양) — 꼬리가 표를 가리킨다 */
.hm-pop{pointer-events:none}
.hm-pop-in{pointer-events:auto;position:relative;width:300px;max-width:calc(100vw - 48px);filter:drop-shadow(0 8px 18px rgba(15,23,42,.30))}
.hm-pop-in .hm-card{width:100%;box-sizing:border-box;box-shadow:none;border-color:var(--accent)}
.hm-pop-in .hm-card.focus{outline:none}
.hm-pop-in::after{content:"";position:absolute;left:50%;bottom:-7px;margin-left:-7px;border:7px solid transparent;border-bottom:0;border-top-color:var(--accent)}
@media (max-width:620px){ .hm-pop-in{width:min(300px,calc(100vw - 40px))} }

/* 담은 뒤 비교하기 — 카드 띠 바로 위(배지 줄 끝) · 지도 카드 바로 위 (사용자) */
.hm-cmp[hidden],.hm-pop-cmp[hidden]{display:none}
.hm-cmp{display:inline-flex;flex:0 0 auto}
.hm-cmpgo{display:inline-flex;align-items:center;height:30px;padding:0 14px;border-radius:999px;background:var(--accent);color:var(--on-accent,#fff);
  font-size:12.5px;font-weight:800;text-decoration:none;white-space:nowrap;box-shadow:0 4px 12px rgba(61,91,255,.35)}
.hm-cmpgo:hover{filter:brightness(1.06)}
.hm-cmpgo:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.hm-cmphint{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;background:var(--card);color:var(--ink-2);
  font-size:12px;font-weight:700;white-space:nowrap;box-shadow:0 2px 8px rgba(15,23,42,.14)}
.hm-pop-cmp{display:flex;justify-content:center;margin-bottom:6px}
.hm-pop-cmp .hm-cmpgo,.hm-pop-cmp .hm-cmphint{height:28px;font-size:12px}
@media (max-width:620px){
  .app-shell .hm-cmp{margin-left:auto}
  .app-shell .hm-badges.has-cmp .hm-cnt .cnt-l,.app-shell .hm-badges.has-cmp .hm-cnt small{display:none}   /* 폰 한 줄: 'N곳' + 비교하기 */
}

/* 홈 조건 패널 — 아파트 조건 칩 (연식 5년 구간 · 전용면적 · 브랜드, 여러 개 고름). 칸 폭은 격자로 맞춘다 */
.fp .fp-chips{display:grid;gap:6px}
.fp .fp-chips.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.fp .fp-chips.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fp .fp-chip{height:32px;min-width:0;padding:0 6px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink-2);
  font:inherit;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.fp .fp-chip.w2{grid-column:span 2}
.fp .fp-chip[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--card));color:var(--accent-dk)}
.fp .fp-bbtn{display:flex;align-items:center;justify-content:space-between;width:100%;height:34px;padding:0 10px;border:1px solid var(--line);
  border-radius:8px;background:var(--card);color:var(--ink);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.fp .fp-bbtn i{font-style:normal;color:var(--ink-3)}
.fp .fp-bbtn[aria-expanded="true"] i{transform:rotate(180deg)}
.fp .fp-bbox{margin-top:6px;padding:6px;border:1px solid var(--line-soft);border-radius:10px;background:var(--surface)}
.fp .fp-bbox .fp-chips{max-height:196px;overflow:auto}
.fp .fp-bclear{margin-top:6px}

/* 단지 상세 — 사진 아래 따라오는 요약 · 이야기 (사용자). 줄 높이만큼 늘어난 왼쪽 칸 안에서 맨 끝 칸이 따라온다 */
.aptside{align-self:stretch}
.side-follow{position:sticky;top:16px;display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 32px);min-height:0}   /* 머리글은 따라오지 않는다 */
.sidesum,.cmty{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.sidesum{flex:0 0 auto}
.ss-h,.cm-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 8px;font-size:13.5px;color:var(--ink)}
.ss-kv{display:grid;grid-template-columns:64px minmax(0,1fr);gap:5px 8px;margin:0;font-size:12.5px;line-height:1.45}
.ss-kv dt{color:var(--ink-3);font-weight:600}
.ss-kv dd{margin:0;color:var(--ink);min-width:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.ss-kv dd b{font-size:14px;font-weight:800}
.ss-kv .na{color:var(--ink-3);font-weight:500}
.ss-act{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ss-act .pickb{height:28px;padding:0 10px;font-size:12px}
.cmty{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.cmty[hidden]{display:none}                                 /* 이야기 API 가 없으면 빈 테두리도 보이지 않게 */
.cm-n{font-size:12px;color:var(--ink-3);font-weight:600}
.cm-rule{margin:0 0 8px;font-size:11px;line-height:1.5;color:var(--ink-3)}
.cm-form{display:flex;flex-direction:column;gap:6px;flex:0 0 auto}
.cm-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}
.cm-form input,.cm-form textarea,.cm-delf input{width:100%;box-sizing:border-box;min-width:0;border:1px solid var(--line);border-radius:8px;
  background:var(--bg);color:var(--ink);font:inherit;font-size:12.5px;padding:6px 8px}
.cm-form textarea{resize:vertical;min-height:62px;line-height:1.45}
.cm-foot{display:flex;align-items:center;gap:8px}
.cm-cnt{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums;flex:0 0 auto}
.cm-msg{flex:1 1 auto;min-width:0;font-size:11.5px;color:var(--ink-2)}
.cm-msg.bad,.cm-anote.bad{color:var(--warn,#B45309)}
.cm-send{flex:0 0 auto}
.cm-empty{margin:10px 0 0;font-size:12px;color:var(--ink-3)}
.cm-list{list-style:none;margin:8px 0 0;padding:0;overflow:auto;min-height:0;flex:1 1 auto;display:flex;flex-direction:column}
.cm-item{padding:9px 0;border-top:1px solid var(--line)}
.cm-meta{display:flex;align-items:baseline;gap:8px;font-size:12px}
.cm-meta b{color:var(--ink);font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-meta time{color:var(--ink-3);font-size:11px;flex:0 0 auto}
.cm-text{margin:3px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
.cm-act{display:flex;align-items:center;gap:10px;margin-top:4px}
.cm-a{background:none;border:0;padding:0;font:inherit;font-size:11px;color:var(--ink-3);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.cm-a:disabled{cursor:default;text-decoration:none}
.cm-anote{font-size:11px;color:var(--ink-3)}
.cm-delf{display:flex;gap:6px;margin-top:6px}
.cm-more{align-self:center;margin-top:8px;flex:0 0 auto}
.cmty-slot:empty{display:none}
/* 재건축 카드 — 사업명 · 유형 · 출처 (서울 정비사업 정보몽땅 · 인천시 정비사업 현황) */
.rb-src{margin:4px 0 10px;font-size:12.5px;line-height:1.5;color:var(--ink-2);overflow-wrap:anywhere}
.rb-src small{color:var(--ink-3)}
@media (max-width:900px){
  .aptside{align-self:auto}
  .side-follow{position:static;max-height:none}
  .sidesum{display:none}                                   /* 폰·좁은 화면은 머리 줄에 같은 값이 있다 */
  .cmty-slot{margin:18px 0 0}
  .cmty-slot .cmty .cm-list{overflow:visible}
}
.hm-qwrap .hm-quick .qtoggle{justify-content:center;color:var(--ink-3);font-weight:700}
.hm-qwrap .hm-quick.closed{display:flex;padding:0 0 2px;background:none;border:0;box-shadow:none}
.hm-qwrap .hm-quick.closed .qtoggle{min-height:32px;color:var(--ink);box-shadow:0 2px 8px rgba(15,23,42,.10)}

/* 방문자 수 — 하단 맨 끝에 아주 작게 (운영자 확인용, 2026-09-14). 숫자만 — 누가 왔는지는 모으지 않는다 */
.foot .fvisit{margin-top:8px;font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.foot .fvisit:not([hidden]){display:flex;flex-wrap:wrap;column-gap:14px;row-gap:2px}   /* 방문자 · 방문 횟수 두 덩어리 — 좁으면 덩어리째 줄바꿈 */

/* 폰 목록 카드 잘림 (2026-09-14) — 본문이 이름·가격 한 줄 글자 폭만큼 늘어나 카드 오른쪽(가격 단위·담기 버튼)이 잘리던 것.
   본문은 사진 옆 남은 폭까지만, 이름과 가격이 한 줄에 안 들어가면 가격을 이름 아래 줄로 내린다 */
.lcard .lc-body{min-width:0}
.app-shell .lcard .lc-head{flex-wrap:wrap;row-gap:0}
.app-shell .lcard .lc-head .lc-name{max-width:100%}
.app-shell .ltop .fcount .fc-pg{display:none}
@media (max-width:379px){.app-shell .ltop .fcount .fc-lbl{display:none}}   /* 아주 좁은 폰은 '6,686곳 · 1 / 279' 만 */

/* ---- V2 (2026-09-16) — 새 화면 전용 여백 스케일. 기존 규칙은 바꾸지 않고 새 컴포넌트만 이 값을 쓴다 ---- */
:root{--v2-xs:4px;--v2-sm:6px;--v2-md:10px;--v2-lg:14px;--v2-sec:28px}
.app-shell{--v2-lg:9px}
/* 단지 4 정비사업 — 사업 카드와 참고지표 카드 두 장 */
.rb-cards{display:grid;gap:var(--v2-lg)}

/* 직접 복사 창 — 자동 복사가 막힌 브라우저 (V2 공유) */
.cbx-lead{margin:0 0 var(--v2-md);font-size:13px;line-height:1.5;color:var(--ink-2)}
.cbx{display:flex;gap:var(--v2-sm);align-items:center}
.cbx-in{flex:1;min-width:0;height:40px;border:1px solid var(--line);border-radius:var(--r-sm);padding:0 10px;font:inherit;font-size:13px;background:var(--card);color:var(--ink)}
.cbx-in:focus{outline:2px solid var(--sub);border-color:var(--sub)}
.cbx-msg{margin:var(--v2-sm) 0 0;min-height:1.4em;font-size:12px;color:var(--ink-3)}

/* ---- 조건으로 찾기(FIND) — 다섯 걸음 + 결과 다섯 곳 (V2, 2026-09-16).
   새 여백은 V2 토큰만 쓴다. 기존 카드·단추 모양은 그대로 따른다 ---- */
.fd{margin:var(--v2-lg) 0 0}
.fd-bar{height:4px;border-radius:999px;background:var(--surface);overflow:hidden}
.fd-bar i{display:block;height:100%;background:var(--accent);border-radius:999px;transition:width .18s ease-out}
.fd-steps{display:flex;flex-wrap:wrap;gap:var(--v2-sm);margin-top:var(--v2-md)}
.fd-sn{height:30px;padding:0 10px;border:1px solid var(--line);border-radius:999px;background:var(--card);
  color:var(--ink-3);font:inherit;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
.fd-sn.done{color:var(--ink-2)}
.fd-sn.on{border-color:var(--accent);color:var(--accent-dk);font-weight:700}
.fd-sn:disabled{opacity:.5;cursor:default}
.fd-sn:focus-visible{outline:2px solid var(--sub);outline-offset:2px}
.fd-body{margin-top:var(--v2-lg)}
.fd-q{margin:0 0 var(--v2-sm);font-size:20px;line-height:1.35;letter-spacing:-.02em;color:var(--ink)}
.fd-note{margin:0 0 var(--v2-md);font-size:12.5px;line-height:1.6;color:var(--ink-3);word-break:keep-all}
.fd-sub{margin:var(--v2-lg) 0 var(--v2-sm);font-size:13px;font-weight:700;color:var(--ink)}
.fd-sub small{margin-left:6px;font-size:12px;font-weight:600;color:var(--ink-3)}
.fd-opts{display:grid;gap:var(--v2-md)}
.fd-opts.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.fd-opts.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fd-opts.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.fd-opt{position:relative;display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:56px;
  padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);
  color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.fd-opt b{font-size:14px;font-weight:700;line-height:1.35;word-break:keep-all}
.fd-opt small{font-size:12px;line-height:1.4;color:var(--ink-3);word-break:keep-all}
.fd-opt:hover{border-color:var(--sub)}
.fd-opt.on{border-color:var(--accent);border-width:1.5px;padding:9px 11px;background:color-mix(in srgb,var(--accent) 7%,var(--card))}
.fd-opt.on b{color:var(--accent-dk)}
.fd-opt:focus-visible{outline:2px solid var(--sub);outline-offset:2px}
.fd-no{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:999px;background:var(--accent);color:var(--on-accent);
  font-size:11px;font-weight:700;font-style:normal;line-height:1}
.fd-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--v2-md)}
.fd-lab{display:flex;flex-direction:column;gap:var(--v2-xs);font-size:12.5px;font-weight:600;color:var(--ink-3)}
.fd-g{margin-top:var(--v2-lg)}
.fd-gh{margin-bottom:var(--v2-xs);font-size:12.5px;font-weight:700;color:var(--ink-3)}
.fd-tri{display:flex;align-items:center;gap:var(--v2-md);padding:var(--v2-md) 0;border-top:1px solid var(--line)}
.fd-tl{flex:1 1 auto;min-width:0}
.fd-tl b{display:block;font-size:13.5px;font-weight:700;color:var(--ink)}
.fd-tl small{display:block;margin-top:1px;font-size:12px;line-height:1.45;color:var(--ink-3);word-break:keep-all}
.fd-seg{display:flex;flex:0 0 auto;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.fd-seg button{min-height:38px;padding:0 12px;border:0;background:var(--card);color:var(--ink-3);
  font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.fd-seg button+button{border-left:1px solid var(--line)}
.fd-seg button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);font-weight:700}
.fd-seg button:focus-visible{outline:2px solid var(--sub);outline-offset:-2px}
.fd-nav{position:sticky;bottom:0;z-index:20;display:flex;align-items:center;gap:var(--v2-md);
  margin-top:var(--v2-lg);padding:var(--v2-md) 0;background:var(--paper);border-top:1px solid var(--line)}
.fd-nav .btn{min-height:44px}
.fd-nav .btn:disabled{opacity:.45;cursor:default}
.fd-cnt{flex:1 1 auto;min-width:0;text-align:center;font-size:12.5px;color:var(--ink-3);font-weight:600}
.fd-cnt b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}
/* 결과 */
.fd-sumbar{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--v2-md);flex-wrap:wrap}
.fd-sum{display:flex;flex-wrap:wrap;gap:var(--v2-sm);flex:1 1 260px;min-width:0}
.fd-sum .pill{cursor:default}
.fd-rh{margin:var(--v2-sec) 0 var(--v2-sm);font-size:18px;letter-spacing:-.02em;color:var(--ink)}
.fd-cards{display:grid;gap:var(--v2-lg);margin-top:var(--v2-md)}
.fd-card{display:grid;grid-template-columns:184px minmax(0,1fr);gap:var(--v2-lg);padding:var(--v2-lg);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg)}
.fd-img{position:relative;border-radius:var(--r-md);overflow:hidden}
.fd-cb{min-width:0}
.fd-name{display:inline-block;font-size:16px;font-weight:800;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.fd-name:hover{color:var(--accent-dk);text-decoration:underline;text-underline-offset:3px}
.fd-loc{margin-top:2px;font-size:12.5px;color:var(--ink-3)}
.fd-why,.fd-chk{margin-top:var(--v2-md)}
.fd-wl,.fd-cl{display:inline-block;margin-bottom:var(--v2-xs);font-size:11.5px;font-weight:700;color:var(--ink-3)}
.fd-cl{color:var(--warn,#B45309)}
.fd-why ul,.fd-chk ul{margin:0;padding-left:17px;font-size:13px;line-height:1.6;color:var(--ink-2)}
.fd-why li+li,.fd-chk li+li{margin-top:2px}
.fd-act{display:flex;align-items:center;gap:var(--v2-md);margin-top:var(--v2-md)}
.fd-pick.picked{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.fd-empty{margin-top:var(--v2-lg);padding:var(--v2-sec) var(--v2-lg);text-align:center;
  background:var(--surface);border-radius:var(--r-md)}
.fd-empty b{display:block;margin-bottom:var(--v2-sm);font-size:15px;color:var(--ink)}
.fd-loose{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--v2-sm)}
.fd-loose .pill b{margin-left:4px;color:var(--ink);font-variant-numeric:tabular-nums}
.fd-foot{margin-top:var(--v2-sec);padding-top:var(--v2-lg);border-top:1px solid var(--line)}
.fd-foot .btn{min-height:44px;margin-bottom:var(--v2-md)}
/* 홈·목록 입구 */
.fd-entry{margin-top:var(--v2-sm)}
.hm-top .fd-entry{display:inline-flex;box-shadow:0 2px 8px rgba(15,23,42,.14);background:var(--card);color:var(--ink);font-weight:700}
[data-theme="dark"] .hm-top .fd-entry{box-shadow:0 4px 16px rgba(0,0,0,.5)}
/* 폰 — 한 화면에 물음 하나, 단추는 아래에 붙인다 (탭바 높이만큼 띄운다) */
@media (max-width:620px){
  .app-shell .fd-q{font-size:17px}
  .app-shell .fd-opts.c3,.app-shell .fd-opts.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app-shell .fd-two{grid-template-columns:1fr}
  .app-shell .fd-tri{flex-direction:column;align-items:stretch;gap:var(--v2-sm)}
  .app-shell .fd-seg{width:100%}
  .app-shell .fd-seg button{flex:1 1 0;min-height:40px;padding:0 6px}
  .app-shell .fd-nav{bottom:calc(58px + env(safe-area-inset-bottom));padding:var(--v2-sm) 0;gap:var(--v2-sm)}
  .app-shell .fd-nav .btn{padding:10px 12px;font-size:13.5px}
  .app-shell .fd-cnt{font-size:12px}
  .app-shell .fd-card{grid-template-columns:1fr;gap:var(--v2-md);padding:var(--v2-md)}
  .app-shell .fd-name{font-size:15px}
  .app-shell .fd-why ul,.app-shell .fd-chk ul{font-size:12.5px}
}

/* 비교 위치 지도 — 판세 다음 · 축 카드 앞 (V2 결정 5, 2026-09-16) */
.cmap{height:clamp(300px,54vh,470px);margin-top:var(--v2-md);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.cmap .empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--v2-xs);
  height:100%;margin:0;text-align:center;font-size:13px;color:var(--ink-3)}
.cmap-na{margin:var(--v2-sm) 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-3)}
.app-shell .cmap{height:clamp(260px,46vh,380px)}

/* FIND 직장 직접 찾기 (V2 P1-2, 2026-09-16) */
.fd-jobs{display:flex;flex-wrap:wrap;gap:var(--v2-sm);margin-bottom:var(--v2-md)}
.fd-job{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 10px;border:1.5px solid var(--accent);
  border-radius:999px;background:color-mix(in srgb,var(--accent) 8%,var(--card));color:var(--accent-dk);
  font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.fd-job i{font-style:normal;font-size:12px;color:var(--ink-3)}
.fd-find{display:flex;gap:var(--v2-sm)}
.fd-find input{flex:1 1 auto;min-width:0;height:44px;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:0 12px;font:inherit;font-size:14px;background:var(--card);color:var(--ink)}
.fd-find input:focus{outline:2px solid var(--sub);border-color:var(--sub)}
.fd-find .btn{flex:0 0 auto;min-height:44px}
.fd-hits{display:grid;gap:var(--v2-xs);margin-top:var(--v2-sm)}
.fd-hit{display:flex;flex-direction:column;gap:1px;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--card);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.fd-hit b{font-size:13.5px;font-weight:700}
.fd-hit small{font-size:12px;color:var(--ink-3)}
.fd-hit:hover{border-color:var(--sub)}
.fd-busy{display:flex;align-items:center;gap:var(--v2-sm);margin:var(--v2-md) 0 0;font-size:13px;color:var(--ink-3)}

/* INSIGHT — 조건 모음 · 시장 기록 (V2 P2-1/2, 2026-09-16) */
.ins-grid{gap:var(--v2-lg)}
.ins-card{text-decoration:none;color:inherit;display:block}
.ins-card:hover{border-color:var(--sub)}
.ins-card .body{padding:var(--v2-lg)}
.ins-card b{display:block;font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.ins-lead{margin-top:var(--v2-xs);font-size:12.5px;line-height:1.55;color:var(--ink-3);word-break:keep-all}
.ins-note{margin:var(--v2-md) 0 0;font-size:12.5px;line-height:1.6;color:var(--ink-3);word-break:keep-all}
.ins-who{margin:0 0 var(--v2-md);font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.ins-kv{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--v2-sm) var(--v2-md);margin:0}
.ins-kv dt{font-size:12.5px;font-weight:700;color:var(--ink-3)}
.ins-kv dd{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink);word-break:keep-all}
.ins-act{display:flex;align-items:center;gap:var(--v2-md);margin-top:var(--v2-lg);flex-wrap:wrap}
.ins-act .btn{min-height:44px}
.mk-tbl .na{color:var(--ink-3)}
.mk-tbl .num{font-variant-numeric:tabular-nums}
.mk-bar{display:block;height:8px;min-width:60px;border-radius:999px;background:var(--surface);overflow:hidden}
.mk-bar i{display:block;height:100%;border-radius:999px;background:var(--accent)}
.mk-note{padding:var(--v2-md) 0;border-top:1px solid var(--line)}
.mk-note:first-child{border-top:0;padding-top:0}
.mk-note b{font-size:14px;font-weight:700;color:var(--ink)}
.mk-note p{margin:var(--v2-xs) 0 0;font-size:13.5px;line-height:1.65;color:var(--ink-2);white-space:pre-wrap}
.mk-src{margin-top:var(--v2-sm);font-size:12px;color:var(--ink-3)}
@media (max-width:620px){
  .app-shell .ins-kv{grid-template-columns:84px minmax(0,1fr)}
  .app-shell .mk-bar{min-width:40px}
}

/* 홈 첫인상 (2026-09-16 사용자) — '나에게 맞는 아파트는?' 을 지도 위 한 줄로,
   목적 조건은 '조건으로 좁히기' 안으로, 폰에서는 지도를 넓게 */
.hm-ctl{display:flex;gap:var(--v2-sm);margin-top:var(--v2-sm);flex-wrap:wrap}
.hm-ctl .fd-entry{background:var(--band);color:#fff;border-color:transparent;font-weight:700;
  box-shadow:0 4px 14px rgba(15,23,42,.24)}
.hm-ctl .fd-entry:hover{color:#fff;filter:brightness(1.08)}
.hm-ctl .fd-entry .ic{color:#fff}
.hm-ctl #hm-rbtn{display:none}                         /* 지역·조건 단추는 폰에서만 */
.app-shell .hm-ctl{gap:var(--v2-sm);margin-top:var(--v2-sm)}
.app-shell .hm-ctl #hm-rbtn{display:inline-flex}
.app-shell .hm-search input{height:44px}
.app-shell .hm-ctl .pill{height:34px}
.app-shell .hm-bottom{bottom:10px}
.app-shell .hm-badges{margin-bottom:6px}
.hm-see{color:var(--ink);font-weight:700;box-shadow:0 2px 8px rgba(15,23,42,.14)}
[data-theme="dark"] .hm-see{box-shadow:0 4px 16px rgba(0,0,0,.5)}
/* 목적으로 찾기 — 조건 패널 안 두 칸 격자. 곳수는 지금 조건에서 센 값이다 */
#fp-purpose{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--v2-sm)}
#fp-purpose .pill{justify-content:space-between;height:34px;min-width:0;gap:4px;padding:0 10px;
  color:var(--ink);font-size:12px}
#fp-purpose .pill i{flex:0 0 auto;font-style:normal;font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums}
#fp-purpose .pill[aria-pressed="true"]{border-color:var(--accent);color:var(--accent-dk)}
#fp-purpose .pill[aria-pressed="true"] i{color:var(--accent-dk)}
#fp-purpose .pill[aria-disabled="true"]{color:var(--ink-3);cursor:default;box-shadow:none}

/* 폰 첫 화면 — 지도를 가리는 자리를 줄인다 (2026-09-16 사용자) */
.app-shell .hm-top{top:8px}
.app-shell .hm-search input{height:42px}
.app-shell .hm-ctl{margin-top:5px;flex-wrap:nowrap}
.app-shell .hm-ctl .pill{height:32px;padding:0 10px}
.app-shell .hm-ctl .fd-entry{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-shell .hm-ctl #hm-rbtn,.app-shell .hm-ctl .hm-fbtn{flex:0 0 auto}
.app-shell .hm-bottom{bottom:8px}
.app-shell .hm-badges{margin-bottom:4px}
.app-shell .hm-cnt{height:28px}

/* 숨김 표시가 먹게 — .tray2 · .hm-strip 은 display:flex 라 hidden 속성(브라우저 기본 규칙)을 덮어썼다 (2026-09-16) */
.tray2[hidden],.hm-strip[hidden]{display:none}
.app-shell .hm-see{height:30px}

/* 폰 홈 첫 화면 — 지도가 화면의 7할을 넘게 (2026-09-16 사용자).
   머리글 줄(로고·밝기)은 홈에서만 접는다 — 이동은 하단 탭, 밝기는 '더보기 › 화면 밝기' 에 그대로 있다.
   담은 곳이 생기면 그 자리에 비교 트레이가 다시 나타난다(트레이는 머리글 안에 있다) */
.app-shell .page-home .site-head{border-bottom:0;background:transparent}
.app-shell .page-home .site-head .wrap{display:none}
.app-shell .page-home .site-head .tray2{border-top:0;border-bottom:2px solid var(--band)}
.app-shell .page-home .hm-top{top:calc(8px + env(safe-area-inset-top))}

/* 비교 지도 점 — 이름·가격·세대수 표가 지도를 덮어 위치를 못 보던 자리를 대신한다 (2026-09-17 사용자) */
.mdot{display:block;width:16px;height:16px;border-radius:50%;background:var(--mc,#2563EB);
  border:2.5px solid #fff;box-shadow:0 1px 5px rgba(15,23,42,.45)}
[data-theme="dark"] .mdot{border-color:#0B0F17;box-shadow:0 1px 5px rgba(0,0,0,.6)}
.app-shell .mdot{width:14px;height:14px;border-width:2px}

/* 입구 알약 글자색 — 폰 규칙(.app-shell .hm-ctl .pill{color:var(--ink)})이 뒤에 온 흰 글자를 눌러
   남색 바탕에 남색 글자(1.06:1)가 됐다. 아이콘만 보이고 글자가 사라진다 (2026-09-17) */
.app-shell .hm-ctl .pill.fd-entry{color:#fff}
.app-shell .hm-ctl .pill.fd-entry .ic{color:#fff}

/* 폰 지도 위·아래 줄 맞춤 (2026-09-17 사용자)
   ① 입구 알약에 붙어 있던 위 여백(--v2-sm) 탓에 지역·조건보다 6px 내려가 밑단이 어긋났다 — 줄 안에서는 가운데로 맞춘다
   ② 아래 줄은 곳수 알약(28px)에 높이를 맞추고, '이 지역 보기' 가 화면 밖으로 밀리지 않게 줄인다 */
.hm-ctl{align-items:center}
.hm-ctl .fd-entry{margin-top:0}
.app-shell .hm-badges{width:100%;flex-wrap:nowrap;align-items:center;gap:6px}
.app-shell .hm-cnt{flex:0 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.app-shell .hm-see{height:28px;flex:0 0 auto;padding:0 10px;font-size:12px}

/* 단일 평형 단지의 면적 — 고를 게 없으니 단추가 아니라 사실 한 줄로 (2026-09-17 사용자) */
.sa-one{display:inline-flex;align-items:center;padding:4px 9px;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);color:var(--ink-2);font-size:12px;font-weight:700;white-space:nowrap}
/* FIND 요약 줄 — 조건 바꾸기 · 조건 지우기 */
.fd-sumact{display:inline-flex;align-items:center;gap:var(--v2-sm);flex:0 0 auto}
.fd-clear{color:var(--ink-2)}

/* 목록 머리의 입구 링크 — 표시(fd-entry)를 붙이면서 위 여백 규칙까지 따라왔다.
   옆 '지도로 보기' 와 밑단이 어긋나지 않게 줄 안에서는 여백을 없앤다 (2026-09-17) */
.hero .fd-entry{margin-top:0}

/* '이 지역 보기' 높이 — 다른 규칙의 min-height(손가락 크기 44px)가 height 를 이겨 28px 로 안 내려갔다.
   곳수 알약과 밑단을 맞추되, 누르는 자리는 보이지 않는 칸으로 넓혀 둔다 (2026-09-17 사용자) */
.app-shell .hm-see{min-height:0;position:relative}
.app-shell .hm-see::after{content:"";position:absolute;left:0;right:0;top:-8px;bottom:-8px}

/* 조건 그룹 접기 머리 — 눌러서 펴고 접는다 (2026-09-17 사용자) */
.fp .fgh-btn{width:100%;padding:0;border:0;background:transparent;font:inherit;text-align:left;cursor:pointer}
.fp .fgh-btn .fgx{margin-left:6px;font-size:11px;color:var(--ink-3);transition:transform .15s}
.fp .fgh-btn[aria-expanded="false"] .fgx{display:inline-block;transform:rotate(-90deg)}
.fp .fp-chips[hidden]{display:none}
/* 공유 창 — 키가 필요 없는 곳으로 바로 보내기 */
.sns-row{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.sns{display:inline-flex;align-items:center;height:34px;padding:0 13px;border:1px solid var(--line);border-radius:999px;
  background:var(--card);color:var(--ink-2);font-size:12.5px;font-weight:700;text-decoration:none}
.sns:hover{border-color:var(--accent);color:var(--accent)}
/* 목록 — 직장까지 재는 동안 */
.fbusy{padding:18px 4px;color:var(--ink-3);font-size:13px}

/* 목적으로 찾기 접기 — id 규칙(#fp-purpose{display:grid})이 클래스 규칙을 이겨 hidden 이 안 먹었다.
   같은 무게로 눌러 준다 (2026-09-17) */
#fp-purpose[hidden]{display:none}

/* ================================================================
   추천 카드 사진 속 글자 · 폰 상세/비교 정렬 (2026-09-18 사용자)

   ① 사진 칸(184px)보다 대표 카드가 338px 로 그려져 이름이 칸을 136px 넘고,
      .fd-img{overflow:hidden} 이 그걸 잘라내고 있었다. 목록·슬롯에는 있던
      min-height 예외가 추천 카드에만 빠져 있었다.
   ② 이름에 줄 수 제한이 없어 길이에 따라 1~3줄로 제각각이었다 — 두 줄까지 쓰고
      넘치면 말줄임. 낱말 중간에서 끊지 않는다(keep-all).                        */
/* 사진 크기는 건드리지 않는다 — 칸(.fd-img)을 그대로 꽉 채운다. 줄인 것은 글자와 배치뿐 (2026-09-19 사용자) */
.fd-img .repcard{min-height:0;aspect-ratio:auto;width:100%;height:100%;padding:12px}
.fd-img .repcard .t .nm{font-size:16px;line-height:1.3;word-break:keep-all;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fd-img .repcard .t .sub{font-size:11.5px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-img .repcard .sgg{top:10px;left:12px;font-size:11px;right:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fd-img .repcard .chiprow{margin-bottom:6px}
.fd-img .repcard .chip{font-size:11px;padding:1px 8px}
/* 폰에서는 사진 칸이 한 줄 전체라 조금 키운다 */
@media (max-width:620px){
  /* 폰은 사진 칸이 한 줄 전체다 — 칸 자체에 예전 비율(3:2)을 줘 사진 크기를 그대로 지킨다 */
  .app-shell .fd-img{aspect-ratio:3/2}
  .app-shell .fd-img .repcard{aspect-ratio:auto;padding:14px}
  .app-shell .fd-img .repcard .t .nm{font-size:18px}
  .app-shell .fd-img .repcard .t .sub{font-size:12px}
}
/* 대표 카드 어디서든 이름은 두 줄까지 — 카드마다 글 높이가 달라 보이던 것을 맞춘다 */
.repcard .t .nm{word-break:keep-all;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ③ '상세' 단추 — 높이 24px 에 줄 높이가 없어 글자가 세로로 10px 잘렸다 */
.ahm{display:inline-flex;align-items:center;justify-content:center;height:26px;line-height:1}
@media (max-width:620px){
  /* ④ 거래내역 '동·층' 칸이 44px 라 '316동 35층' 이 잘렸다 — 칸을 넓히고 글자를 줄인다 */
  /* 거래내역 동·층 칸이 44px 로 고정돼 '316동 35층'(59px)이 잘렸다. '30층' 같은 짧은 값만 맞았던 것.
     앞선 폰 규칙(.app-shell .deals .drow)이 더 강해 같은 무게로 덮어쓴다 — 동·층은 최소 62px 로 늘리고,
     대개 비어 있는 꼬리표 칸은 필요할 때만 자리를 쓴다 (2026-09-18 사용자) */
  .app-shell .deals .dhead,.app-shell .deals .drow{grid-template-columns:54px 48px minmax(62px,1fr) auto minmax(50px,1fr);
    gap:4px;padding:8px 10px}
  .app-shell .deals .drow .df,.app-shell .deals .dhead span:nth-child(3){font-size:12px}
  .app-shell .deals .drow .dt{min-width:0}
  /* ⑤ 축 줄 끝의 차이값(+1.3km)이 칸을 넘었다 */
  .app-shell .lrow.g>.lgap{min-width:52px}
  .app-shell .axcard .grow.g{grid-template-columns:minmax(0,1fr) 46px 52px}
  /* ⑥ 접이 제목의 요약 글자 — 한 줄 말줄임이라 폰에서 잘려 보인다. 조금 줄여 더 담는다 */
  .app-shell .fold>summary{gap:8px;padding:12px 14px}
  .app-shell .fold>summary .fn{font-size:12px}
  /* ⑦ 비교 머리 줄 — 규칙이 두 곳에서 엇갈려 한 칸만 윗줄로 튀고 알약 높이가 44·38 로 섞였다 */
  .app-shell .cmpbar{flex-wrap:nowrap;align-items:center;row-gap:0}
  .app-shell .cmpbar .pill,.app-shell .cmpbar .pill.sm{height:40px;min-height:0}
  .app-shell .cmpbar .cb-l{align-items:center}
  /* ⑧ 축 칩 줄 — 라벨(18px)과 알약(44px)의 중심이 어긋났다 */
  .app-shell .axchips{align-items:center;row-gap:8px}
  .app-shell .axchips .axl{display:inline-flex;align-items:center;height:40px}
  .app-shell .axchips .pill{height:40px;min-height:0}
}

/* 접이 제목 옆 요약('평당가 · 최고가 · 최저가') — 폰에서 한 줄 말줄임이라 28px 이 잘려 나갔다.
   두 줄까지 흘려 담고, 그래도 넘치면 말줄임 (2026-09-18 사용자) */
@media (max-width:620px){
  .app-shell .fold>summary{align-items:flex-start}
  .app-shell .fold>summary .ft{flex:0 0 auto;padding-top:1px}
  .app-shell .fold>summary .fn{white-space:normal;word-break:keep-all;line-height:1.35;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .app-shell .fold>summary .fchev{align-self:center}
}

/* 카드 속 주소는 구 단위까지만 — 좁은 칸에서 '평택시 만호리'처럼 동까지 넣으면 잘린다.
   동은 상세 화면의 큰 카드에서만 보인다 (2026-09-19 사용자) */
.fd-img .repcard .sgg .dg,
.lcard .lc-img .repcard .sgg .dg,
.slotcard .mini .repcard .sgg .dg{display:none}
/* 브랜드 표시는 8할 크기로 — 사진 위에서 너무 크게 잡고 있었다 */
.fd-img .repcard .corner .chip{font-size:9px;padding:2px 8px}
.fd-img .repcard .corner .chip.brandlogo img{height:12px;max-width:76px}
.fd-img .repcard .corner .chip.brandlogo img[src$="theh.svg"]{height:18px}

/* ================================================================
   폰 화면 정리 — 요약표 정렬 · 업무지구 제목/배지 · 버튼 높이 (2026-09-19 사용자)      */
@media (max-width:620px){
  /* ① 비교 요약표 — 머리줄(아파트 이름)과 값줄이 서로 다른 격자를 써서 세로선이 어긋났다.
     같은 격자를 쓰게 하고(라벨 64px + 단지 수만큼 균등), 값 칸 폭을 78px → 130px 남짓으로 넓힌다 */
  .app-shell .csum-m{--lab:64px}
  .app-shell .csum-m .cm-heads,
  .app-shell .csum-m .cm-row{display:grid;grid-template-columns:var(--lab) repeat(var(--n,3),minmax(0,1fr));
    gap:8px;align-items:center}
  .app-shell .csum-m .cm-heads::before{content:""}      /* 머리줄의 라벨 자리 — 이름 칸이 값 칸과 맞는다 */
  .app-shell .csum-m .cm-vals{display:contents}         /* 값들을 줄 격자의 칸으로 올린다 */
  .app-shell .csum-m .cm-k{margin:0;align-self:center;word-break:keep-all}
  .app-shell .csum-m .cm-v{font-size:13.5px}
  .app-shell .csum-m .cm-v small{font-size:11.5px}

  /* ② 업무지구 제목 — 비교 화면의 .cm-h(세로 배치) 규칙과 이름이 겹쳐 ⓘ 가 아래로 내려갔다 */
  .app-shell .cmblock .cm-h{display:flex;flex-direction:row;align-items:center;gap:6px;
    padding-bottom:0;border-bottom:0;font-size:13px;font-weight:800;color:var(--ink-3)}
  /* 배지와 라벨 칸을 줄여 막대를 길게 — 막대 140px → 185px 안팎 */
  .app-shell .specrow.cmr{--lab:62px}
  .app-shell .cm-chip{min-height:22px;padding:0 8px;font-size:11.5px;border-width:1.2px}
  .app-shell .specrow.cmr .sr-v .bar{grid-template-columns:8px minmax(0,1fr) auto;gap:5px}
  .app-shell .specrow.cmr .bar .dot{width:8px;height:8px}
  .app-shell .specrow.cmr .cm-top{font-size:10.5px}

  /* ③ 버튼 높이 — 상세·비교 화면에서만 세 단계로 고른다(주요 40 · 보조 34 · 줄 안 작은 것 26).
     '평면 · 네이버 부동산' 만 44px 로 튀던 것이 여기서 잡힌다. 홈 화면 단추는 건드리지 않는다 */
  .app-shell .page-apt .btn,.app-shell .page-apt a.pill,.app-shell .page-apt button.pill,
  .app-shell .page-compare .btn,.app-shell .page-compare a.pill,.app-shell .page-compare button.pill{
    height:40px;min-height:0;padding:0 14px;font-size:13px}
  .app-shell .page-apt .pill.sm,.app-shell .page-compare .pill.sm,
  .app-shell .page-apt .mini-link,.app-shell .page-compare .mini-link{height:34px;min-height:0;padding:0 11px;font-size:12.5px}
  .app-shell .page-apt .toggle button,.app-shell .page-compare .toggle button{height:34px;min-height:0;padding:0 11px}
  .app-shell .page-apt .toggle,.app-shell .page-compare .toggle{padding:2px}
}

/* 폰 — 주제별 접기. 제목을 누르면 그 주제만 펼쳐진다 (2026-09-19 사용자) */
@media (max-width:620px){
  .app-shell .fold-head{display:flex;align-items:center;gap:8px;cursor:pointer;
    margin:14px 0 0;padding:12px 12px;border:1px solid var(--line);border-radius:12px;
    background:var(--card);box-shadow:0 1px 3px rgba(15,23,42,.06)}
  .app-shell .fold-head .fold-x{margin-left:auto;width:9px;height:9px;flex:0 0 auto;
    border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
    transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s}
  .app-shell .fold-head[aria-expanded="true"] .fold-x{transform:rotate(-135deg) translate(-2px,-2px)}
  .app-shell .fold-head:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .app-shell .fold-body{margin-top:10px}
  .app-shell .fold-body[hidden]{display:none}
  /* 비교 화면 제목 줄은 설명이 붙어 있어 두 줄로 흐른다 */
  .app-shell .cmp-h.fold-head{flex-wrap:wrap;row-gap:2px}
  .app-shell .cmp-h.fold-head h2{margin:0;font-size:15px}
  .app-shell .cmp-h.fold-head span{flex-basis:100%;font-size:11.5px;color:var(--ink-3);line-height:1.4}
  .app-shell .cmp-h.fold-head .fold-x{order:2}
  /* 상단 액션 줄 — '비교에 담기' 만 44px 로 튀어 네 단추 높이가 어긋났다 */
  .app-shell .page-apt .apthead .ah-act .btn,
  .app-shell .page-apt .apthead .ah-act .pill{height:40px;min-height:0}
}

/* 카드 제목 줄을 접기 머리로 쓸 때 — 카드 머리는 색 띠라 테두리를 덧대지 않는다 (2026-09-19) */
@media (max-width:620px){
  .app-shell .card>.band.fold-head{margin:0;border:0;border-radius:0;box-shadow:none;cursor:pointer}
  .app-shell .card>.band.fold-head .fold-x{border-color:currentColor;opacity:.8}
  .app-shell .card>.band.fold-head+.fold-body{margin-top:0}
}

/* 카드 안 소제목을 접기 머리로 쓸 때 — 판을 덧대지 않고 글자 줄로만 (2026-09-19) */
@media (max-width:620px){
  .app-shell .cmblock>.cm-h.fold-head{margin:0;padding:8px 0;border:0;border-radius:0;
    background:transparent;box-shadow:none}
  .app-shell .cmblock>.cm-h.fold-head .fold-x{width:8px;height:8px}
}

/* 업무지구 표기 — 한글명(주) 위, 영문 약어(보조) 아래. 두 줄 모두 가운데 (2026-09-19 사용자).
   색·글꼴·모서리는 기존 알약 규칙을 그대로 쓴다 */
.cm-chip.two{flex-direction:column;gap:0;min-height:34px;padding:3px 10px;line-height:1.15}
.cm-chip.two b{font-size:13px;font-weight:800;letter-spacing:-.01em}
.cm-chip.two small{font-size:10px;font-weight:700;opacity:.8;letter-spacing:.02em}
.cbd2{display:inline-flex;flex-direction:column;align-items:center;line-height:1.15}
.cbd2 b{font-weight:800}
.cbd2 small{font-size:10px;font-weight:700;opacity:.8;color:var(--ink-3)}
@media (max-width:620px){
  .app-shell .cm-chip.two{min-height:30px;padding:2px 8px}
  .app-shell .cm-chip.two b{font-size:12px}
  .app-shell .cm-chip.two small{font-size:9.5px}
}

/* 축 카드 제목을 접기 머리로 — 카드 안이라 판을 덧대지 않는다 (2026-09-19) */
@media (max-width:620px){
  .app-shell .axcard>.ah.fold-head{margin:0;padding:2px 0 6px;border:0;border-radius:0;
    background:transparent;box-shadow:none;display:block;cursor:pointer}
  .app-shell .axcard>.ah.fold-head .fold-x{position:absolute;right:0;top:6px}
  .app-shell .axcard>.ah.fold-head{position:relative;padding-right:18px}
  .app-shell .axcard>.ah.fold-head+.fold-body{margin-top:2px}
}

/* 내 직장까지 — 기존 카드·알약 규칙을 그대로 쓴다 (2026-09-19 사용자) */
.cmblock.myjob{margin-top:10px;padding-top:10px;border-top:1px solid var(--line-soft)}
.mj-empty{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mj-empty p{margin:0;font-size:12.5px;color:var(--ink-3);flex:1 1 200px}
.mj-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:4px 0}
.mj-n{flex:1 1 120px;min-width:0;font-size:13.5px;font-weight:700;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mj-v{font-variant-numeric:tabular-nums;color:var(--ink)}
.mj-v b{font-size:18px;font-weight:800;letter-spacing:-.01em}
.mj-v small{margin-left:2px;font-size:11.5px;font-weight:600;color:var(--ink-3)}
.mj-busy,.mj-na{font-size:12.5px;color:var(--ink-3)}
.mj-find{display:flex;gap:6px;align-items:center;margin:6px 0}
.mj-find input{flex:1 1 auto;min-width:0;height:38px;padding:0 10px;border:1px solid var(--line);
  border-radius:10px;background:var(--card);color:var(--ink);font:inherit;font-size:13px}
.mj-hits{display:flex;flex-direction:column;gap:6px}
.mj-hit{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 10px;
  border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);
  font:inherit;text-align:left;cursor:pointer}
.mj-hit b{font-size:13px;font-weight:700}
.mj-hit small{font-size:11.5px;color:var(--ink-3)}
.mj-err{color:var(--warn)}
@media (max-width:620px){
  .app-shell .mj-v b{font-size:17px}
  .app-shell .mj-find input{height:36px}
}

/* 폰 가독성 — 11px 로 떨어지던 보조 글자(타일 라벨·막대 제목·단위·표 머리)를 11.5px 로 올리고
   줄 간격을 조금 넓힌다. 본문 값은 건드리지 않는다(줄바꿈이 깨진다) (2026-09-19 사용자) */
@media (max-width:620px){
  .app-shell .page-apt .lt-c,
  .app-shell .page-apt .sb-t>span,
  .app-shell .page-apt .lt-v small,
  .app-shell .page-apt .lval small,
  .app-shell .page-apt .ig-h,
  .app-shell .page-apt .lsub em,
  .app-shell .page-apt .sb-h small,
  .app-shell .page-apt .chiprow2 .cr-l,
  .app-shell .page-apt .ah-v,
  .app-shell .page-apt .photo-note{font-size:11.5px;line-height:1.45}
  .app-shell .page-apt .sr-f,.app-shell .page-apt .gnote{line-height:1.5}
  .app-shell .page-apt .speclist>.specrow{padding-top:12px;padding-bottom:12px}
}

/* 업무지구 배지 — 알약 안에는 한글명만, 영문 약어는 알약 바로 아래 (2026-09-19 사용자).
   알약 선은 조금 굵게(1.5 → 2px). 색·모서리·글꼴은 기존 규칙 그대로 */
.cm-chipwrap{display:inline-flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.cm-chipwrap .cm-chip{border-width:2px;padding:0 11px;min-height:26px;font-size:13px}
.cm-abbr{font-size:10.5px;font-weight:800;letter-spacing:.03em;line-height:1;
  color:color-mix(in srgb,var(--cc,var(--ink-3)) 70%,#000)}
[data-theme="dark"] .cm-abbr{color:color-mix(in srgb,var(--cc,var(--ink-3)) 55%,#fff)}
.specrow.cmr .sr-k{flex-direction:column;align-items:center;gap:3px}
@media (max-width:620px){
  .app-shell .cm-chipwrap .cm-chip{min-height:24px;padding:0 9px;font-size:12.5px;border-width:2px}
  .app-shell .cm-abbr{font-size:10px}
}

/* 단지 이야기 모아보기 — 단지별 묶음 카드 (2026-09-19 사용자).
   기존 카드·알약 규칙을 그대로 쓴다 */
.st-count{margin-left:6px;font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.st-wrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.st-card{display:flex;flex-direction:column;gap:8px;padding:14px 16px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg)}
.st-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;text-decoration:none;color:var(--ink)}
.st-h:hover .st-n{color:var(--accent-dk);text-decoration:underline;text-underline-offset:3px}
.st-n{font-size:15px;font-weight:800;letter-spacing:-.01em;min-width:0;word-break:keep-all}
.st-c{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--ink-3);white-space:nowrap}
.st-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.st-list li{padding-top:8px;border-top:1px solid var(--line-soft)}
.st-list li:first-child{padding-top:0;border-top:0}
.st-nick{display:inline-block;font-size:11.5px;font-weight:700;color:var(--ink-3)}
.st-body{margin:2px 0 1px;font-size:13.5px;line-height:1.55;color:var(--ink);white-space:pre-wrap;word-break:break-word;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.st-when{font-size:11px;color:var(--ink-3)}
.st-more{align-self:flex-start;font-size:12.5px;font-weight:700;color:var(--band);text-decoration:none}
.st-more:hover{text-decoration:underline;text-underline-offset:3px}
.st-empty{grid-column:1/-1;padding:28px 10px;text-align:center;color:var(--ink-3);font-size:13.5px}
.st-foot{display:flex;justify-content:center;margin-top:18px}
@media (max-width:620px){
  .app-shell .st-wrap{grid-template-columns:1fr;gap:10px}
  .app-shell .st-card{padding:12px 13px;border-radius:12px}
  .app-shell .st-n{font-size:14px}
  .app-shell .st-body{font-size:13px}
}