/* 부빅터 테마 v3 — 깔끔하고 신뢰감 있는 부동산 중개 사이트 톤
   도면(블루프린트) 컨셉 폐기: 격자 배경·크롭마크·모노폰트 장식 제거.
   화이트/라이트그레이 배경 + 네이비/골드 포인트 + 부드러운 그림자의 보수적인 스타일. */

:root {
  --navy: #1C3F5E;
  --navy-deep: #142E45;
  --navy-soft: #EAF0F5;
  --gold: #C9972F;
  --gold-soft: #FBF1DE;
  --paper: #F6F7F8;
  --card: #FFFFFF;
  --line: #E4E7EA;
  --line-strong: #D3D8DC;
  --ink: #1E2A33;
  --ink-soft: #5B6B75;
  --muted: #8A97A0;
  --radius: 10px;
  --radius-s: 6px;
  --shadow: 0 2px 10px rgba(30, 42, 51, 0.06);
  --shadow-hover: 0 10px 24px rgba(30, 42, 51, 0.10);

  /* A0(2026-10-09): 하드코딩 색 → 변수. 라이트 기본값만. 다크는 A 단계에서 추가. */
  --c-0056b3: #0056b3;
  --c-007bff: #007bff;
  --c-111: #111;
  --c-1E7B34: #1E7B34;
  --c-241a0d: #241a0d;
  --c-333: #333;
  --c-444: #444;
  --c-4A5560: #4A5560;
  --c-555: #555;
  --c-666: #666;
  --c-777: #777;
  --c-888: #888;
  --c-8A6300: #8A6300;
  --c-999: #999;
  --c-B3261E: #B3261E;
  --c-C9DCEC: #C9DCEC;
  --c-E6F4EA: #E6F4EA;
  --c-EAF1F6: #EAF1F6;
  --c-EEF1F4: #EEF1F4;
  --c-FCE8E6: #FCE8E6;
  --c-FFF4D6: #FFF4D6;
  --c-ccc: #ccc;
  --c-ddd: #ddd;
  --c-eee: #eee;
  --c-f0f0f0: #f0f0f0;
  --c-f9f9f9: #f9f9f9;
  --c-fff: #fff;
  --c-rgba0_0_0_0d1: rgba(0,0,0,0.1);
  --c-rgba0_0_0_0d2: rgba(0,0,0,0.2);
  --c-rgba0_0_0_0d3: rgba(0,0,0,0.3);
  --c-rgba0_0_0_d14: rgba(0,0,0,.14);
  --c-rgba0_0_0_d18: rgba(0,0,0,.18);
  --c-rgba0_s0_s0_s0d4: rgba(0, 0, 0, 0.4);
  --c-rgba0_s0_s0_sd2: rgba(0, 0, 0, .2);
  --c-rgba20_s46_s69_s0d92: rgba(20, 46, 69, 0.92);
  --c-rgba255_255_255_0d97: rgba(255,255,255,0.97);
  --c-rgba255_255_255_d18: rgba(255,255,255,.18);
  --c-rgba255_255_255_d2: rgba(255,255,255,.2);
  --c-rgba255_s255_s255_s0d08: rgba(255, 255, 255, 0.08);
  --c-rgba255_s255_s255_s0d14: rgba(255, 255, 255, 0.14);
  --c-rgba255_s255_s255_s0d15: rgba(255, 255, 255, 0.15);
  --c-rgba255_s255_s255_s0d18: rgba(255, 255, 255, 0.18);
  --c-rgba255_s255_s255_s0d28: rgba(255, 255, 255, 0.28);
  --c-rgba255_s255_s255_s0d75: rgba(255, 255, 255, 0.75);
  --c-rgba255_s255_s255_s0d95: rgba(255, 255, 255, 0.95);
  --c-rgba255_s255_s255_sd93: rgba(255, 255, 255, .93);
  --c-rgba255_s255_s255_sd96: rgba(255, 255, 255, .96);
  --c-rgba30_42_51_d14: rgba(30,42,51,.14);
  --c-rgba30_s42_s51_s0d02: rgba(30, 42, 51, 0.02);
  --c-rgba30_s42_s51_sd15: rgba(30, 42, 51, .15);
  --c-white: white;
  --gold-dark: #8a6420;
  --map-marker-bg: rgba(0, 123, 255, 0.7);
  --map-navy: rgb(22, 51, 69);
  --slider-connect: rgb(255, 105, 5);

  /* A0-view(2026-10-09): push_prompt.php·ai_widget.php 인라인 색 → 변수. 라이트 기본값만. 다크는 A 단계에서 추가. */
  --c-191919: #191919;
  --c-5B4A20: #5B4A20;
  --c-8A6420: #8A6420;
  --c-F1F3F5: #F1F3F5;
  --c-FEE500: #FEE500;
  --c-rgba30_42_51_d15: rgba(30,42,51,.15);
  --c-rgba255_255_255_d22: rgba(255,255,255,.22);
  --c-rgba255_255_255_d4: rgba(255,255,255,.4);

  /* 흰 섬 보완(2026-10-09, dark_fill). 뷰 인라인 색을 변수로 모은다. 라이트 기본값 = 원래 리터럴(라이트 외관 불변). 다크는 아래 A 블록에서 재정의. */
  --field-bg: #fff;                 /* 계산기 입력칸 배경 (tools) */
  --on-accent: #fff;                /* 남색 accent 카드 위 흰 버튼 (ai-sale) */
  --c-F8F9FA: #F8F9FA;              /* 추이 필터 박스·참고 박스 배경 */
  --c-F5F7F9: #F5F7F9;              /* 추이 표 헤더 배경 */
  --c-F5F8FC: #F5F8FC;              /* 추이 표 선택 행 배경 */
  --c-FAFAFA: #FAFAFA;              /* 추세 뱃지 '표본부족' 배경 */
  --c-F1F3F4: #F1F3F4;              /* 추세 뱃지 '보합' 배경 */
  --c-FDECEA: #FDECEA;              /* 추세 뱃지 '상승' 배경(붉은 틴트) */
  --c-E8F0FE: #E8F0FE;              /* 추세 뱃지 '하락' 배경(푸른 틴트) */
  --c-E3E7EA: #E3E7EA;              /* 추이 표 테두리 */
  --c-E3E8EC: #E3E8EC;              /* cta-bar 칸 구분선 */
  --c-CBD3D9: #CBD3D9;              /* cta-bar 상단 테두리 */
  --c-EDF0F2: #EDF0F2;              /* 차트 격자선 */
  --c-DDE3E7: #DDE3E7;              /* 거래량 바닥선 */
  --c-B9C4CC: #B9C4CC;              /* 0%·50% 기준선 */
  --c-5F6368: #5F6368;              /* 보조 회색 글자 */
  --c-6B7780: #6B7780;              /* 차트 안 설명 글자 */
  --c-16333F: #16333F;              /* 토글 버튼 글자(카드 위) */
  --c-1A56C5: #1A56C5;              /* 하락(파랑) 글자 */
  --c-C0392B: #C0392B;              /* 상승(빨강) 글자 */
  --c-2E6DA4: #2E6DA4;              /* 내림(파랑) 막대 */
  --chart-line: rgb(22,51,69);      /* 중위값 선·점·범례·RSI·표 링크 */
  --btn-navy: rgb(22,51,69);        /* 추이 필터 선택 버튼 배경 */
  --btn-active: #16333F;            /* yoy/rsi 열림 버튼 배경 */
  --chart-band: rgba(22,51,69,.13); /* 가운데 절반 범위 면 */
  --chart-band-10: rgba(22,51,69,.10);
  --chart-band-08: rgba(22,51,69,.08);
  --chart-halo: #FFFFFF;            /* 라벨 글자 흰 테두리 */
  --c-rgba255_255_255_d12: rgba(255,255,255,.12); /* accent 카드 위 반투명 흰 면(다크에서도 유지) */
}

* { box-sizing: border-box; }

body {
  font-family: "Pretendard", "Apple SD Gothic Neo", sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.65;
  font-size: 17px;   /* 2026-10-08 기본 글자 크기(보통). 폰은 listing-map 의 11px 를 17px 로 올림과 함께 */
}
/* 개인별 글자 크기(기기에 저장, 설정 페이지에서 바꿈). html[data-fs] 는 header 의 이른 스크립트가 붙인다. */
html[data-fs="small"] body { font-size: 15px !important; }
html[data-fs="large"] body { font-size: 20px !important; }

.mono, .date, .badge { font-family: "IBM Plex Mono", ui-monospace, monospace; }

/* ---------- 헤더 ---------- */
.nav-bar {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 var(--c-rgba30_s42_s51_s0d02);
  position: sticky;
  top: 0;
  z-index: 100;
}
.logo a {
  color: var(--navy);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* 비트윈 로고: 판 안의 ㅂ(판 높이의 62%) 높이가 "부빅터" 글자 높이(약 33px)와 같도록 맞춤. top은 글자와 세로 중심 맞춤 */
.logo img { height: 54px; position: relative; top: 2px; }
.logo-text {
  font-size: 1.15em;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.category-nav li a {
  color: var(--ink-soft);
  font-weight: 600;
  border-bottom: 2px solid transparent;
  padding-bottom: 4px;
  transition: color .15s ease, border-color .15s ease;
}
.category-nav li a:hover {
  color: var(--navy);
  border-bottom-color: var(--gold);
}
.dropdown-menu {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-hover);
  overflow: hidden;
}
.dropdown-menu li a:hover { background-color: var(--navy-soft); }

/* ---------- 페이지 타이틀 ---------- */
.page-title {
  font-weight: 800;
  color: var(--navy);
  position: relative;
  padding-bottom: 14px;
}
.page-title::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 48px; height: 3px;
  border-radius: 2px;
  background: var(--gold);
}
.page-title a { color: inherit; text-decoration: none; }
.page-title a:hover { color: var(--gold-dark, #8a6420); }

/* ---------- 글 상세: 매각사례·사례분석 요약 정보(주소/면적/매매가) ---------- */
.case-fact-box {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 4px 0 18px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--navy-soft);
}
.case-fact-box__item { display: flex; align-items: baseline; gap: 8px; }
.case-fact-box__label { font-size: .82em; color: var(--navy); font-weight: 700; }
.case-fact-box__value { font-size: .95em; color: var(--ink, #1E2A33); font-weight: 600; }
.case-fact-box__value sup { font-size: .65em; vertical-align: super; line-height: 0; }

/* ---------- 글 상세: 이전글/다음글 ---------- */
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 24px auto 0;
  max-width: 946px;
}
.post-nav__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--card);
  text-decoration: none;
  min-width: 0;
}
.post-nav__item--next { text-align: right; align-items: flex-end; }
.post-nav__item:hover { border-color: var(--gold); background: var(--gold-soft); }
.post-nav__label { font-size: .78em; font-weight: 700; color: var(--navy); }
.post-nav__title {
  font-size: .9em;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
@media (max-width: 560px) {
  .post-nav { grid-template-columns: 1fr; }
  .post-nav__item--next { text-align: left; align-items: flex-start; }
}

/* ---------- 홈: 레이아웃 비율 (시안 A 기준 1.7 : 1) ---------- */
.flex-area .blog-area { flex: 1.7 1 0; background: transparent; padding: 0; }
.flex-area .side-area { flex: 1 1 0; }

/* ---------- 홈: 카테고리별 섹션 ---------- */
.home-section { margin-bottom: 36px; }
.home-section:last-child { margin-bottom: 0; }
.home-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--navy);
}
.home-section__head h2 {
  font-size: 1.15em;
  font-weight: 800;
  color: var(--navy);
  margin: 0;
}
.home-section__more {
  font-size: .85em;
  font-weight: 700;
  color: var(--gold);
  text-decoration: none;
  white-space: nowrap;
}
.home-section__more:hover { text-decoration: underline; }
.home-section__empty {
  color: var(--muted);
  font-size: .9em;
  padding: 20px;
  text-align: center;
  background: var(--card);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}

/* ---------- 홈: 부동산 뉴스 하이라이트 (최신 1건, 사진 없이 텍스트만) ---------- */
.news-highlight {
  display: block;
  text-decoration: none;
}
.news-highlight h3 { margin: 0 0 8px; color: var(--ink); font-weight: 700; font-size: 1.05em; }
.news-highlight .excerpt {
  margin: 0 0 8px;
  color: var(--ink-soft);
  font-size: .92em;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-highlight .date { color: var(--muted); font-size: .85em; }

/* ---------- 홈: 블로그 카드 (가로형, 썸네일 좌 / 본문 우) ---------- */
.flex-area .blog-area ul {
  flex-direction: column;
  gap: 12px;
}
.flex-area .blog-area ul li {
  width: 100% !important;
  display: flex;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  box-sizing: border-box;
  box-shadow: var(--shadow);
  transition: box-shadow .2s ease, transform .2s ease;
}
.flex-area .blog-area ul li:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}
.flex-area .blog-area ul li a {
  display: flex;
  gap: 14px;
  width: 100%;
}
.flex-area .blog-area ul li .thumb {
  flex: 0 0 120px;
  width: 120px;
  height: 90px;
  border-radius: var(--radius-s);
  overflow: hidden;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-area .blog-area ul li .thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.flex-area .blog-area ul li .info { margin-top: 0; flex: 1; min-width: 0; }
.flex-area .blog-area ul li .info h3 {
  color: var(--ink);
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.flex-area .blog-area ul li .info .date { color: var(--muted); font-size: .85em; }

@media (max-width: 767px) {
  .flex-area .blog-area ul li .thumb { flex-basis: 96px; width: 96px; height: 72px; }
}

/* 빌딩매매 사례분석: 목록 카드처럼 요약 문구를 제목 아래에 보여준다 */
.flex-area .blog-area .info .excerpt {
  margin: 4px 0 6px;
  font-size: .88em;
  line-height: 1.5;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 빌딩매매 사례분석: 건물 사진이 세로로 긴 경우가 많아 3:4 세로형 썸네일 박스를 사용 */
.flex-area .blog-area .home-section--cases ul li .thumb {
  flex-basis: 90px;
  width: 90px;
  height: 120px;
}
@media (max-width: 767px) {
  .flex-area .blog-area .home-section--cases ul li .thumb { flex-basis: 68px; width: 68px; height: 90px; }
}

/* ---------- 홈: 사이드 카드 ---------- */
.flex-area .side-area { display: flex; flex-direction: column; gap: 16px; }
.side-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
}
.side-card.side-card--accent {
  background: linear-gradient(155deg, var(--navy), var(--navy-deep));
  border-color: var(--navy);
  color: var(--c-EAF1F6);
}
.side-card .side-card__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--navy);
  text-transform: uppercase;
}
.side-card--accent .side-card__eyebrow { color: var(--c-C9DCEC); }
.side-card h3 {
  margin: 10px 0 8px;
  font-size: 1.08em;
  font-weight: 800;
  color: var(--ink);
}
.side-card--accent h3 { color: var(--c-fff); }
.side-card p { font-size: .92em; color: var(--ink-soft); margin: 0 0 16px; }
.side-card--accent p { color: var(--c-C9DCEC); }
.side-card__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.side-card__actions a {
  flex: 1 1 auto;
  text-align: center;
  padding: 11px 12px;
  font-size: .9em;
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius-s);
}
.side-card--accent .side-card__actions a {
  background: var(--gold);
  color: var(--c-241a0d);
}
.side-card--accent .side-card__actions a:hover { filter: brightness(1.06); }
.side-card__phone {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 16px;
  padding: 12px 14px;
  background: var(--c-rgba255_s255_s255_s0d08);
  border: 1px solid var(--c-rgba255_s255_s255_s0d18);
  border-radius: var(--radius-s);
  text-decoration: none;
}
.side-card__phone-name { font-size: 1.05em; color: var(--c-C9DCEC); font-weight: 700; }
.side-card__phone-number { font-size: 1.2em; font-weight: 800; color: var(--gold); letter-spacing: .01em; }
.side-card__phone:hover { background: var(--c-rgba255_s255_s255_s0d14); }
.side-card:not(.side-card--accent) .side-card__actions a {
  background: var(--navy-soft);
  color: var(--navy);
}
.side-card:not(.side-card--accent) .side-card__actions a:hover { background: var(--gold-soft); color: var(--navy-deep); }

/* ---------- 블로그 리스트/필터 ---------- */
.filters select, .filters input {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  background: var(--card);
  color: var(--ink);
}
.filters button {
  background: var(--navy);
  border-radius: var(--radius-s);
}
.filters button:hover { background: var(--navy-deep); }

.blog-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px;
}
.blog-item:hover { box-shadow: var(--shadow-hover); }

/* 아티클 상세 페이지: 관리자 에디터(760px)와 동일한 폭으로 맞춰 편집 화면과 실제 화면의 이미지 비율이 일치하도록 함 */
.blog-item:has(> .blog-content) {
  max-width: 946px;
  margin: 0 auto;
}
.blog-item h3 a { color: var(--ink); text-decoration: none; }
.blog-item .category_link {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--navy);
  background: var(--navy-soft);
  padding: 3px 10px;
  border-radius: 999px;
  text-decoration: none;
}

/* ---------- 매매사례(지도) 리스트 ---------- */
.badge { background: var(--navy); border-radius: 999px; }
.listing-title { color: var(--ink); font-weight: 700; }
.search-btn { background: var(--navy); border-radius: 0 var(--radius-s) var(--radius-s) 0; }
.search-btn:hover { background: var(--navy-deep); }
.map-filter-toggle { background: var(--navy); border-radius: var(--radius-s); box-shadow: var(--shadow); }

.search-section { background: var(--card); }
.search-bar {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-s) var(--radius-s) 0 0;
}
.search-bar input, .search-bar > span {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s) 0 0 var(--radius-s);
  background: var(--paper);
  color: var(--ink);
}

.map-filter-panel {
  background: var(--c-rgba255_255_255_0d97);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px var(--c-rgba30_42_51_d14);
}
.filter-btn {
  background: var(--card);
  color: var(--navy);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
}
.filter-title { color: var(--navy); }

.button-checkbox, .button-radio {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-soft);
}
input[type="checkbox"]:checked + .button-checkbox,
input[type="radio"]:checked + .button-radio {
  background-color: var(--navy);
  color: var(--c-fff);
  border-color: var(--navy);
}
.noUi-connect { background: var(--gold) !important; }

.listing-item { border-bottom: 1px solid var(--line); }
.listing-item .listing-thumbnail { border-radius: var(--radius-s); overflow: hidden; }
.listing-type { color: var(--gold); font-weight: 700; }
.listing-sub, .listing-address, .listing-desc { color: var(--ink-soft); }

/* ---------- 매매사례 상세 페이지 ---------- */
.listing-area .img-area { background: var(--card); border-radius: var(--radius); overflow: hidden; }
.swiper-pagination-bullet-active { background: var(--gold) !important; }
.swiper-button-next, .swiper-button-prev { color: var(--navy) !important; }
.listing-area .listing-address { font-size: 1.02em; color: var(--ink-soft); margin: 4px 0; }

/* ---------- 블로그 상세(아티클) ---------- */
.btn-group { margin: 24px auto; text-align: center; }
.btn-type01 {
  display: inline-block;
  background: var(--navy);
  color: var(--c-fff) !important;
  font-size: .92em;
  font-weight: 700;
  padding: 10px 26px;
  border-radius: var(--radius-s);
}
.btn-type01:hover { background: var(--navy-deep); }

.blog-content { margin-top: 1.6em; color: var(--ink); font-size: 1.02em; line-height: 1.85; }
.blog-content h1, .blog-content h2, .blog-content h3 { color: var(--navy); font-weight: 800; margin: 1.4em 0 .6em; }
.blog-content p { margin: 0 0 1em; }
.blog-content img { display: block; max-width: 100%; width: 32em; height: auto; margin: 1em auto; border-radius: var(--radius-s); border: 1px solid var(--line); }
/* em만 있는 문단 = 작은 안내문(출처·주의 문구). 가운데 정렬은 이미지 바로 아래 설명문에만(2026-10-01, 본문 안내문이 가운데로 묶여 편집기에서 못 바꾸던 문제) */
.blog-content p:has(> em:only-child) {
  font-size: .85em;
  font-style: italic;
  color: var(--muted);
  margin-bottom: 1.4em;
}
.blog-content p:has(> img) + p:has(> em:only-child) {
  text-align: center;
  margin-top: -0.6em;
}
/* 편집기(Quill)에서 고른 문단 정렬은 위 규칙보다 우선한다(2026-10-01) */
.blog-content .ql-align-center { text-align: center !important; }
.blog-content .ql-align-right { text-align: right !important; }
.blog-content .ql-align-justify { text-align: justify !important; }
/* initialize.css의 전역 list-style:none 리셋 때문에 본문 목록에 불릿/번호가 안 보이던 문제를 복원 */
.blog-content ul { list-style: disc; padding-left: 1.4em; margin: 0 0 1em; }
.blog-content ol { list-style: decimal; padding-left: 1.4em; margin: 0 0 1em; }
.blog-content li { margin-bottom: 4px; }
.blog-content li > ul, .blog-content li > ol { margin-top: 4px; margin-bottom: 0; }
.blog-content li > ul { list-style: circle; }
.blog-content a { color: var(--navy); }

/* ---------- 폼(매각/매입/기타문의): 시장분석 글 본문과 같은 폭으로 맞춤 ---------- */
.inquiry-body .container-padding {
  max-width: 946px;
  margin: 0 auto;
}
.sell-container {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.sell-form label {
  color: var(--ink);
  font-weight: 700;
  font-size: .93em;
}
.sell-form input[type="text"],
.sell-form input[type="number"],
.sell-form textarea,
.form-control {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  background: var(--card);
  color: var(--ink);
  font-family: inherit;
}
.sell-form input:focus,
.sell-form textarea:focus,
.form-control:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px var(--navy-soft);
}
.btn, .sell-form button, button[type="submit"] {
  display: inline-block;
  background: var(--navy);
  color: var(--c-fff);
  border: none;
  padding: 12px 24px;
  font-weight: 700;
  border-radius: var(--radius-s);
  cursor: pointer;
  transition: background .15s ease;
}
.btn:hover, .sell-form button:hover, button[type="submit"]:hover { background: var(--navy-deep); }

/* ---------- 푸터 ---------- */
footer {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .85em;
  background: var(--card);
}
.biz-info { padding-top: 18px; padding-bottom: 18px; }
.biz-info__row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 0 0 6px;
}
.biz-info__row span:not(:last-child)::after {
  content: "·";
  margin-left: 14px;
  color: var(--line-strong);
}
.biz-info__addr { margin: 0 0 10px; color: var(--muted); }
/* 사업자 정보를 3줄로 묶은 뒤, 마지막 줄(처리방침·저작권)은 한 단계 연하게 둔다. */
.biz-info__row--sub {
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 0;
}

/* ---------- 상세검색 패널 (실거래정보 목록) ---------- */
.adv-search-btn {
  padding: 10px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--card);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.adv-search-btn:hover { border-color: var(--navy); }
.adv-search-btn.is-open { background: var(--navy); border-color: var(--navy); color: var(--c-fff); }
.adv-search-btn__count {
  display: inline-block;
  margin-left: 6px;
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--c-fff);
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}
.adv-search-panel {
  margin: -8px 0 20px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--navy-soft);
}
/* 칸마다 내용에 맞는 폭만 쓰게 한다. 1fr로 늘리면 선택지가 짧은 "주소 확정"·"정렬"까지
   화면 폭만큼 늘어나 바가 쓸데없이 길어 보인다. */
.adv-search-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
}
.adv-search-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink-soft);
}
/* 라벨 없는 칸(초기화·건수)의 높이를 맞추려고 빈 줄을 넣어 두었는데, 금액 칸이 늘면서
   두 칸이 다음 줄로 밀려 빈 줄이 그대로 여백으로 남았다. 칸들은 어차피 아래끝으로
   정렬되므로 빈 줄 없이도 높이가 맞는다(2026-09-21). */
.adv-search-field__spacer { display: none; }
.adv-search-field__controls { display: flex; gap: 8px; }
.adv-search-field__controls select {
  flex: 0 0 auto;
  width: 150px;
  padding: 9px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--card);
  font-family: inherit;
  font-size: 14px;
}
.adv-search-field--narrow .adv-search-field__controls select { width: 130px; }
#monthFilter { width: 110px; }
.adv-search-count { margin-left: auto; text-align: right; }
.adv-search-result {
  display: inline-block;
  padding: 9px 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}
.adv-search-reset {
  padding: 9px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--card);
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.adv-search-reset:hover { border-color: var(--navy); color: var(--navy); }

/* 이미 본 글: 방문한 링크처럼 한 단계 죽여 아직 안 본 글이 눈에 먼저 들어오게 한다.
   기록은 그 사람 브라우저에만 남는다(assets/js/visited.js). */
.blog-list-item.is-visited .info h3 { color: var(--muted); }
.blog-list-item.is-visited .info .excerpt { color: var(--muted); }
.blog-list-item.is-visited .thumb img { opacity: .7; }
.blog-list-item.is-visited .info h3::after {
  content: "읽음";
  display: inline-block;
  margin-left: 8px;
  padding: 0 7px;
  font-size: .72em;
  font-weight: 600;
  line-height: 1.6;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  vertical-align: middle;
}

/* ---------- 블로그 목록 카드 (썸네일 포함) ---------- */
.blog-list-item a { display: flex; gap: 16px; text-decoration: none; align-items: flex-start; }
.blog-list-item .thumb {
  flex: 0 0 140px;
  width: 140px;
  height: 100px;
  border-radius: var(--radius-s);
  overflow: hidden;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
}
.blog-list-item .thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.blog-list-item .info { flex: 1; min-width: 0; }
.blog-list-item .info h3 { margin: 0 0 6px; font-size: 1.05em; font-weight: 700; color: var(--ink); }
.blog-list-item .info p { margin: 0; font-size: .88em; color: var(--muted); }
.blog-list-item .info .excerpt {
  margin: 0 0 8px;
  font-size: .92em;
  line-height: 1.5;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 560px) {
  .blog-list-item .thumb { flex-basis: 96px; width: 96px; height: 72px; }
}

/* 실거래정보처럼 썸네일·부가정보 없이 제목+한 줄 요약만 있는 목록은 카드를 더 얇게 */
.blog-list-item--compact { padding: 12px 18px; }
.blog-list-item--compact .info h3 { margin-bottom: 3px; font-size: 1em; }
.blog-list-item--compact .info .excerpt { -webkit-line-clamp: 1; }

/* 실거래정보: 지번이 정확히 확인됐는지(초록)/동 단위까지만인지(빨강)/새로 등록됐는지(노랑) 오른쪽에 표시 */
.realtrade-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
  align-self: center;
}
.realtrade-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: .8em;
  font-weight: 700;
  white-space: nowrap;
}
.realtrade-badge--matched { background: var(--c-E6F4EA); color: var(--c-1E7B34); }
.realtrade-badge--pending { background: var(--c-FCE8E6); color: var(--c-B3261E); }
.realtrade-badge--new { background: var(--c-FFF4D6); color: var(--c-8A6300); }
@media (max-width: 560px) {
  .realtrade-badge { font-size: .75em; padding: 3px 9px; }
}

/* 빌딩매매 사례분석 글 목록: 3:4 세로형 썸네일 박스 */
#blogContainer.blog-list--portrait .thumb {
  flex-basis: 105px;
  width: 105px;
  height: 140px;
}
@media (max-width: 560px) {
  #blogContainer.blog-list--portrait .thumb { flex-basis: 72px; width: 72px; height: 96px; }
}

@media (max-width: 767px) {
  .side-card__actions a { flex: 1 1 100%; }
}

/* 블로그 본문 이미지 라이트박스 */
.img-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--c-rgba20_s46_s69_s0d92);
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
.img-lightbox.is-open { display: flex; }
.img-lightbox__stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.img-lightbox__img {
  max-width: 92vw;
  max-height: 92vh;
  object-fit: contain;
  box-shadow: 0 10px 40px var(--c-rgba0_s0_s0_s0d4);
  transition: transform 0.06s linear;
  touch-action: none;
  user-select: none;
}
.img-lightbox__close {
  position: absolute;
  top: 20px;
  right: 28px;
  color: var(--c-fff);
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.img-lightbox__hint {
  position: absolute;
  top: 24px;
  left: 28px;
  color: var(--c-rgba255_s255_s255_s0d75);
  font-size: 13px;
  z-index: 2;
}
@media (max-width: 767px) {
  .img-lightbox__hint { display: none; }
}
.img-lightbox__zoom-controls {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}
.img-lightbox__zoom-btn {
  min-width: 44px;
  height: 40px;
  padding: 0 12px;
  border: none;
  border-radius: 20px;
  background: var(--c-rgba255_s255_s255_s0d15);
  color: var(--c-fff);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.img-lightbox__zoom-btn:hover { background: var(--c-rgba255_s255_s255_s0d28); }

/* 실거래정보 상세의 작은 지도(2026-09-21). 오른쪽에 띄워 본문이 왼쪽을 채우게 한다.
   폰에서는 띄우지 않고 가로 전체로 펼친다. */
.detail-map {
  position: relative;
  float: right;
  width: 370px;
  height: 340px;
  margin: 14px 0 14px 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--c-EEF1F4);
}
.detail-map__canvas { width: 100%; height: 100%; }
.detail-map__bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--c-rgba255_s255_s255_sd93);
  font-size: 12px;
  color: var(--ink-soft);
}
.detail-map__addr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-map__btn {
  padding: 4px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--card);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.detail-map__btn:hover { border-color: var(--navy); }
/* 지도가 카드 밖으로 삐져나오지 않게 한다(본문이 지도보다 짧을 때). */
.blog-item::after { content: ""; display: block; clear: both; }
/* 본문 맨 끝의 출처 문구는 지도 옆에 끼지 않게 지도 아래로 내려 가로로 펼친다. */
.detail-map ~ .blog-content > p:last-child { clear: both; padding-top: 6px; }
@media (max-width: 820px) {
  .detail-map { float: none; width: 100%; height: 230px; margin: 14px 0; }
}


/* =========================================================================
   A. 다크/라이트 테마 (2026-10-09). A0(색 변수화) 토대 위에 다크 팔레트를 올린다.
   - 기본=라이트: data-theme='light'(및 이론상 속성 미설정) 는 위 :root 라이트값 그대로(외관 변화 0).
   - '어둡게' = :root[data-theme="dark"], '시스템' = :root[data-theme="system"] + OS 다크(@media).
   - header/settings 가 data-theme 를 늘 셋 중 하나(light/dark/system)로 붙인다. 속성 없는 상태는 안 만든다.
     → 속성 미설정(JS 완전 실패)이어도 어떤 다크 규칙도 안 걸려 기본 라이트. 배포·되돌리기 순서 무관(Fable MEDIUM-1).
   - 다크 값은 아래 --dk-* 에 한 번만 적고 두 조건은 참조만 한다(값 중복 없음).
   - --c-fff/--c-white(흰색)은 '네이비/골드 위 흰 글자'로 쓰여 그대로 밝게 둔다.
     흰 '배경'으로 쓰인 off-map 면만 아래에서 다크 면으로 덮는다(지도 카카오 타일은 항상 라이트).
   ========================================================================= */
:root {
  --dk-paper:#0f151b;
  --dk-card:#1a222c;
  --dk-navy:#4674a0;
  --dk-navy-deep:#345d85;
  --dk-navy-soft:#1a2733;
  /* 본문 링크 전용(다크): --dk-navy 는 '네이비 버튼 배경 + 흰 글자'(흰/네이비 4.92 AA)에도 쓰여
     그대로 밝히면 버튼 대비가 깨진다. 본문 링크만 더 밝은 네이비로 분리해 card/paper 위 AA(≥4.5) 확보.
     #6a95bf: card(#1a222c) 5.09 / paper(#0f151b) 5.83 (Fable MEDIUM). 라이트 링크(var(--navy))는 불변 */
  --dk-link:#6a95bf;
  --dk-gold:#d9a94a;
  --dk-gold-soft:#2a2416;
  --dk-gold-dark:#e0b35a;
  --dk-ink:#e8edf2;
  --dk-ink-soft:#aeb9c2;
  --dk-muted:#8792a0;
  --dk-line:#2a3542;
  --dk-line-strong:#3a4654;
  --dk-shadow:0 2px 10px rgba(0,0,0,.45);
  --dk-shadow-hover:0 10px 24px rgba(0,0,0,.6);
  --dk-c-111:#e8edf2;
  --dk-c-333:#d4dbe2;
  --dk-c-444:#ccd4dc;
  --dk-c-4A5560:#b7c1cb;
  --dk-c-555:#c3ccd4;
  --dk-c-666:#b2bcc5;
  --dk-c-777:#a7b2bc;
  --dk-c-888:#9aa5af;
  --dk-c-999:#8f9aa4;
  --dk-c-f9f9f9:#161d25;
  --dk-c-f0f0f0:#212b35;
  --dk-c-eee:#2a3542;
  --dk-c-ddd:#2f3b47;
  --dk-c-ccc:#3a4654;
  --dk-c-EEF1F4:#1c252f;
  --dk-c-F1F3F5:#222c36;
  --dk-c-EAF1F6:#dbe6f0;
  --dk-c-C9DCEC:#bcd3e8;
  --dk-c-E6F4EA:#10301d;
  --dk-c-1E7B34:#5fd389;
  --dk-c-FCE8E6:#3a1613;
  --dk-c-B3261E:#f08a82;
  --dk-c-FFF4D6:#332b12;
  --dk-c-8A6300:#e0b857;
  --dk-c-8A6420:#e0b35a;
  --dk-c-5B4A20:#d9b968;
  --dk-c-rgba30_42_51_d14:rgba(0,0,0,.5);
  --dk-c-rgba30_42_51_d15:rgba(0,0,0,.5);
  --dk-c-rgba30_s42_s51_s0d02:rgba(0,0,0,.3);
  --dk-c-rgba30_s42_s51_sd15:rgba(0,0,0,.5);
  --dk-c-rgba255_255_255_0d97:rgba(26,34,44,.97);
  --dk-c-rgba255_s255_s255_sd93:rgba(22,30,40,.93);
  --dk-c-rgba255_s255_s255_sd96:rgba(24,32,42,.96);
  --dk-c-rgba255_s255_s255_s0d95:rgba(24,32,42,.95);

  /* 흰 섬 보완(2026-10-09, dark_fill) 다크값. 라이트 면→다크 면, 투명해지는 선/글자→밝게(본문 AA≥4.5). */
  --dk-field-bg:#222c36;
  --dk-on-accent:#e9eef3;           /* accent 카드 위 흰 버튼: 눈부신 순백 대신 옅은 흰. navy 글자(대형·굵게) 대비 AA(대형 3:1) */
  --dk-c-F8F9FA:#161d25;
  --dk-c-F5F7F9:#1c252f;
  --dk-c-F5F8FC:#1b2b3a;
  --dk-c-FAFAFA:#161d25;
  --dk-c-F1F3F4:#222c36;
  --dk-c-FDECEA:#3a1613;
  --dk-c-E8F0FE:#16233a;
  --dk-c-E3E7EA:#2a3542;
  --dk-c-E3E8EC:#2a3542;
  --dk-c-CBD3D9:#3a4654;
  --dk-c-EDF0F2:#2a3542;
  --dk-c-DDE3E7:#2a3542;
  --dk-c-B9C4CC:#3a4654;
  --dk-c-5F6368:#a7b2bc;            /* card 위 4.7 */
  --dk-c-6B7780:#aeb9c2;            /* card 위 5.3 */
  --dk-c-16333F:#cfe0ec;
  --dk-c-1A56C5:#7aa7e0;
  --dk-c-C0392B:#e8897f;
  --dk-c-2E6DA4:#6ea3d4;
  --dk-chart-line:#6a95bf;          /* card/paper 위 선·점·링크 */
  --dk-btn-navy:#345d85;            /* 선택 알약: 다크 카드 위에서도 또렷, 흰 글자 대비 확보 */
  --dk-btn-active:#345d85;
  --dk-chart-band:rgba(106,149,191,.22);
  --dk-chart-band-10:rgba(106,149,191,.18);
  --dk-chart-band-08:rgba(106,149,191,.16);
  --dk-chart-halo:#1a222c;          /* 라벨 테두리를 카드색으로(밝은 글자가 뜨게) */
}

/* color-scheme: 라이트 기본 / 다크 둘(입력창·스크롤바가 선택 테마를 따르게. 반쪽 다크 얼룩 방지, Fable MEDIUM-1) */
:root, :root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root[data-theme="system"] { color-scheme: dark; } }

/* 다크 적용(값은 --dk-* 참조). 셀렉터만 두 조건으로 나눠 적는다 */
:root[data-theme="dark"] {
  --paper:var(--dk-paper);
  --card:var(--dk-card);
  --navy:var(--dk-navy);
  --navy-deep:var(--dk-navy-deep);
  --navy-soft:var(--dk-navy-soft);
  --gold:var(--dk-gold);
  --gold-soft:var(--dk-gold-soft);
  --gold-dark:var(--dk-gold-dark);
  --ink:var(--dk-ink);
  --ink-soft:var(--dk-ink-soft);
  --muted:var(--dk-muted);
  --line:var(--dk-line);
  --line-strong:var(--dk-line-strong);
  --shadow:var(--dk-shadow);
  --shadow-hover:var(--dk-shadow-hover);
  --c-111:var(--dk-c-111);
  --c-333:var(--dk-c-333);
  --c-444:var(--dk-c-444);
  --c-4A5560:var(--dk-c-4A5560);
  --c-555:var(--dk-c-555);
  --c-666:var(--dk-c-666);
  --c-777:var(--dk-c-777);
  --c-888:var(--dk-c-888);
  --c-999:var(--dk-c-999);
  --c-f9f9f9:var(--dk-c-f9f9f9);
  --c-f0f0f0:var(--dk-c-f0f0f0);
  --c-eee:var(--dk-c-eee);
  --c-ddd:var(--dk-c-ddd);
  --c-ccc:var(--dk-c-ccc);
  --c-EEF1F4:var(--dk-c-EEF1F4);
  --c-F1F3F5:var(--dk-c-F1F3F5);
  --c-EAF1F6:var(--dk-c-EAF1F6);
  --c-C9DCEC:var(--dk-c-C9DCEC);
  --c-E6F4EA:var(--dk-c-E6F4EA);
  --c-1E7B34:var(--dk-c-1E7B34);
  --c-FCE8E6:var(--dk-c-FCE8E6);
  --c-B3261E:var(--dk-c-B3261E);
  --c-FFF4D6:var(--dk-c-FFF4D6);
  --c-8A6300:var(--dk-c-8A6300);
  --c-8A6420:var(--dk-c-8A6420);
  --c-5B4A20:var(--dk-c-5B4A20);
  --c-rgba30_42_51_d14:var(--dk-c-rgba30_42_51_d14);
  --c-rgba30_42_51_d15:var(--dk-c-rgba30_42_51_d15);
  --c-rgba30_s42_s51_s0d02:var(--dk-c-rgba30_s42_s51_s0d02);
  --c-rgba30_s42_s51_sd15:var(--dk-c-rgba30_s42_s51_sd15);
  --c-rgba255_255_255_0d97:var(--dk-c-rgba255_255_255_0d97);
  --c-rgba255_s255_s255_sd93:var(--dk-c-rgba255_s255_s255_sd93);
  --c-rgba255_s255_s255_sd96:var(--dk-c-rgba255_s255_s255_sd96);
  --c-rgba255_s255_s255_s0d95:var(--dk-c-rgba255_s255_s255_s0d95);
  --field-bg:var(--dk-field-bg);
  --on-accent:var(--dk-on-accent);
  --c-F8F9FA:var(--dk-c-F8F9FA);
  --c-F5F7F9:var(--dk-c-F5F7F9);
  --c-F5F8FC:var(--dk-c-F5F8FC);
  --c-FAFAFA:var(--dk-c-FAFAFA);
  --c-F1F3F4:var(--dk-c-F1F3F4);
  --c-FDECEA:var(--dk-c-FDECEA);
  --c-E8F0FE:var(--dk-c-E8F0FE);
  --c-E3E7EA:var(--dk-c-E3E7EA);
  --c-E3E8EC:var(--dk-c-E3E8EC);
  --c-CBD3D9:var(--dk-c-CBD3D9);
  --c-EDF0F2:var(--dk-c-EDF0F2);
  --c-DDE3E7:var(--dk-c-DDE3E7);
  --c-B9C4CC:var(--dk-c-B9C4CC);
  --c-5F6368:var(--dk-c-5F6368);
  --c-6B7780:var(--dk-c-6B7780);
  --c-16333F:var(--dk-c-16333F);
  --c-1A56C5:var(--dk-c-1A56C5);
  --c-C0392B:var(--dk-c-C0392B);
  --c-2E6DA4:var(--dk-c-2E6DA4);
  --chart-line:var(--dk-chart-line);
  --btn-navy:var(--dk-btn-navy);
  --btn-active:var(--dk-btn-active);
  --chart-band:var(--dk-chart-band);
  --chart-band-10:var(--dk-chart-band-10);
  --chart-band-08:var(--dk-chart-band-08);
  --chart-halo:var(--dk-chart-halo);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --paper:var(--dk-paper);
    --card:var(--dk-card);
    --navy:var(--dk-navy);
    --navy-deep:var(--dk-navy-deep);
    --navy-soft:var(--dk-navy-soft);
    --gold:var(--dk-gold);
    --gold-soft:var(--dk-gold-soft);
    --gold-dark:var(--dk-gold-dark);
    --ink:var(--dk-ink);
    --ink-soft:var(--dk-ink-soft);
    --muted:var(--dk-muted);
    --line:var(--dk-line);
    --line-strong:var(--dk-line-strong);
    --shadow:var(--dk-shadow);
    --shadow-hover:var(--dk-shadow-hover);
    --c-111:var(--dk-c-111);
    --c-333:var(--dk-c-333);
    --c-444:var(--dk-c-444);
    --c-4A5560:var(--dk-c-4A5560);
    --c-555:var(--dk-c-555);
    --c-666:var(--dk-c-666);
    --c-777:var(--dk-c-777);
    --c-888:var(--dk-c-888);
    --c-999:var(--dk-c-999);
    --c-f9f9f9:var(--dk-c-f9f9f9);
    --c-f0f0f0:var(--dk-c-f0f0f0);
    --c-eee:var(--dk-c-eee);
    --c-ddd:var(--dk-c-ddd);
    --c-ccc:var(--dk-c-ccc);
    --c-EEF1F4:var(--dk-c-EEF1F4);
    --c-F1F3F5:var(--dk-c-F1F3F5);
    --c-EAF1F6:var(--dk-c-EAF1F6);
    --c-C9DCEC:var(--dk-c-C9DCEC);
    --c-E6F4EA:var(--dk-c-E6F4EA);
    --c-1E7B34:var(--dk-c-1E7B34);
    --c-FCE8E6:var(--dk-c-FCE8E6);
    --c-B3261E:var(--dk-c-B3261E);
    --c-FFF4D6:var(--dk-c-FFF4D6);
    --c-8A6300:var(--dk-c-8A6300);
    --c-8A6420:var(--dk-c-8A6420);
    --c-5B4A20:var(--dk-c-5B4A20);
    --c-rgba30_42_51_d14:var(--dk-c-rgba30_42_51_d14);
    --c-rgba30_42_51_d15:var(--dk-c-rgba30_42_51_d15);
    --c-rgba30_s42_s51_s0d02:var(--dk-c-rgba30_s42_s51_s0d02);
    --c-rgba30_s42_s51_sd15:var(--dk-c-rgba30_s42_s51_sd15);
    --c-rgba255_255_255_0d97:var(--dk-c-rgba255_255_255_0d97);
    --c-rgba255_s255_s255_sd93:var(--dk-c-rgba255_s255_s255_sd93);
    --c-rgba255_s255_s255_sd96:var(--dk-c-rgba255_s255_s255_sd96);
    --c-rgba255_s255_s255_s0d95:var(--dk-c-rgba255_s255_s255_s0d95);
    --field-bg:var(--dk-field-bg);
    --on-accent:var(--dk-on-accent);
    --c-F8F9FA:var(--dk-c-F8F9FA);
    --c-F5F7F9:var(--dk-c-F5F7F9);
    --c-F5F8FC:var(--dk-c-F5F8FC);
    --c-FAFAFA:var(--dk-c-FAFAFA);
    --c-F1F3F4:var(--dk-c-F1F3F4);
    --c-FDECEA:var(--dk-c-FDECEA);
    --c-E8F0FE:var(--dk-c-E8F0FE);
    --c-E3E7EA:var(--dk-c-E3E7EA);
    --c-E3E8EC:var(--dk-c-E3E8EC);
    --c-CBD3D9:var(--dk-c-CBD3D9);
    --c-EDF0F2:var(--dk-c-EDF0F2);
    --c-DDE3E7:var(--dk-c-DDE3E7);
    --c-B9C4CC:var(--dk-c-B9C4CC);
    --c-5F6368:var(--dk-c-5F6368);
    --c-6B7780:var(--dk-c-6B7780);
    --c-16333F:var(--dk-c-16333F);
    --c-1A56C5:var(--dk-c-1A56C5);
    --c-C0392B:var(--dk-c-C0392B);
    --c-2E6DA4:var(--dk-c-2E6DA4);
    --chart-line:var(--dk-chart-line);
    --btn-navy:var(--dk-btn-navy);
    --btn-active:var(--dk-btn-active);
    --chart-band:var(--dk-chart-band);
    --chart-band-10:var(--dk-chart-band-10);
    --chart-band-08:var(--dk-chart-band-08);
    --chart-halo:var(--dk-chart-halo);
  }
}

/* 본문 링크(다크 전용): --navy(=--dk-navy #4674a0) 는 card/paper 위 3.26~3.73 로 AA 미달.
   --dk-navy 자체는 네이비 버튼 배경이라 못 밝힌다 → 본문 링크만 --dk-link(#6a95bf, ≥4.5)로.
   라이트에서는 이 규칙이 없으므로 .blog-content a 는 var(--navy) 그대로(불변). (Fable MEDIUM) */
:root[data-theme="dark"] .blog-content a { color: var(--dk-link); }
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] .blog-content a { color: var(--dk-link); }
}

/* 떠 있는 불투명 '흰' 면 보정(off-map). 지도 위 면은 라이트 타일과 맞춰 그대로 둔다 */
:root[data-theme="dark"] #bbg-push,
:root[data-theme="dark"] #bbg-a2hs,
:root[data-theme="dark"] .offcanvas-menu,
:root[data-theme="dark"] .aiw-tabs button.on,
:root[data-theme="dark"] .aiw-form,
:root[data-theme="dark"] .aiw-hist,
:root[data-theme="dark"] .aiw-hist-item,
:root[data-theme="dark"] .aiw-hist-foot,
:root[data-theme="dark"] .bp-pop { background: var(--card); }
:root[data-theme="dark"] .aiw-bar.open .aiw-fab { background: var(--navy-deep); }
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] #bbg-push,
  :root[data-theme="system"] #bbg-a2hs,
  :root[data-theme="system"] .offcanvas-menu,
  :root[data-theme="system"] .aiw-tabs button.on,
  :root[data-theme="system"] .aiw-form,
  :root[data-theme="system"] .aiw-hist,
  :root[data-theme="system"] .aiw-hist-item,
  :root[data-theme="system"] .aiw-hist-foot,
  :root[data-theme="system"] .bp-pop { background: var(--card); }
  :root[data-theme="system"] .aiw-bar.open .aiw-fab { background: var(--navy-deep); }
}

/* AI 매각 버튼(다크 전용): 라이트는 bg #fff·글자 navy(#1C3F5E, 9.36 AA) 그대로 불변.
   다크는 accent 카드 위 옅은흰 버튼(--on-accent #e9eef3) 위 글자가 --navy(=--dk-navy #4674a0)라
   대비 4.22 로 AA(4.5) 미달 → 다크에서만 글자를 --dk-navy-deep(#345d85)로 더 진하게.
   버튼 배경(#e9eef3)은 그대로 둬 흰 섬·눈부심을 늘리지 않음. 글자/#e9eef3 대비 5.90(AA 통과).
   main.php 인라인 규칙(.side-card--accent .side-card__actions--ai a.ai-sale, 특이도 0,3,1)보다
   특이도 높음(:root[data-theme] 포함 0,5,1). 라이트엔 이 규칙이 없어 불변. (LOW-1 2026-10-09) */
:root[data-theme="dark"] .side-card--accent .side-card__actions--ai a.ai-sale { color: var(--dk-navy-deep); }
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] .side-card--accent .side-card__actions--ai a.ai-sale { color: var(--dk-navy-deep); }
}