/* 사이트 전체가 쓰는 단 하나의 스타일시트.
 *
 * 전에는 62장 HTML마다 <style>이 통째로 박혀 있었고, 그러다 일곱 갈래로 갈라졌다.
 * 같은 .data-table이 index에서는 왼쪽 정렬, 나머지 61장에서는 오른쪽 정렬인 식이었다.
 * 그래서 "여백 하나 고치자"가 62곳을 고치는 일이 됐고, 실제로 고치다 만 흔적이
 * 드리프트로 남아 있었다. 한 장으로 합치면서 갈라진 22곳은 한쪽으로 정했다.
 *
 * 여기에만 쓴다. 페이지 HTML에 <style>을 다시 넣지 말 것 - 그 순간 다시 갈라진다.
 */

:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --fg: #1a1a1a;
  --muted: #666;
  --card: #f5f5f7;
  --border: #e2e2e5;
  /* 오르내림. 이 사이트에서 가장 많이 읽히는 색인데(+18.4% 같은 작은 글씨가 전부
   * 이 색이다), 오래도록 흰 바탕에서 고른 값 하나를 카드 위에서도 다크에서도
   * 그대로 썼다. 재어 보니 카드 배경 위에서 라이트 4.02:1 · 다크 3.85:1로 둘 다
   * 본문 대비 기준(4.5:1)에 못 미쳤고, 다크에는 아예 재정의가 없었다.
   * 이제 테마마다 따로 고르고, 이 색이 놓이는 가장 어두운 바탕(--card,
   * --accent-weak) 위에서 4.5:1을 넘는 값으로 맞춘다. test/style.test.mjs가 잰다. */
  --up: #bd2f2f;
  --down: #1d4ed8;

  /* 브랜드색. manifest와 theme-color가 이 값인데 화면에는 한 번도 안 나왔다.
   * 데이터 안에는 절대 쓰지 않는다 - 표 안의 파랑은 이미 '하락'이라는 뜻을
   * 갖고 있어서, 같은 자리에 다른 뜻의 파랑을 놓으면 둘 다 못 읽는다.
   * 지금 어디에 있고 무엇을 골랐는지를 말하는 자리(1층·2층 탭, 칩, 초점,
   * 섹션 제목 밑줄)에만 쓴다. */
  --accent: #253e81;
  --accent-on: #ffffff;
  --accent-weak: #eef1f8;

  /* 글자 크기 축척. 전에는 0.65rem부터 1.4rem까지 스물두 단계가 섞여 있었다.
   * 열 살짜리 계단은 계층이 아니라 우연이라, 여덟 단으로 줄이고 바닥을 올렸다.
   * 0.78rem(12.5px)이 하한이다 - 한글은 그 아래로 내려가면 획이 뭉갠다.
   * --fs-field는 16px 미만이면 iOS Safari가 입력칸에 초점이 갈 때 화면을 확대한다. */
  --fs-xs: 0.78rem;
  --fs-sm: 0.85rem;
  --fs-md: 0.92rem;
  --fs-lg: 1rem;
  --fs-h2: 1.1rem;
  --fs-xl: 1.2rem;
  --fs-2xl: 1.35rem;
  --fs-h1: 1.45rem;
  /* 사다리 맨 윗단. 사이트 이름에만 쓰던 자리인데, 화면이 내놓는 '답'
   * 하나(전세 vs 월세의 월 실부담)도 같은 크기를 쓸 자격이 있어 이름을 일반화했다.
   * 단을 새로 만들지는 않았다 - 열 살짜리 계단으로 되돌아가는 길이 그것이다. */
  --fs-3xl: 1.7rem;
  --fs-field: 1rem;

  /* 손가락이 닿아야 하는 최소 크기. 알약 탭 30px, 아이콘 버튼 36px,
   * 뉴스 칩 26px이었다 - 셋 다 엄지 끝보다 작다. */
  /* 한 줄이 한글 마흔 자 안팎에서 끊기는 폭. 글은 여기까지만 늘어난다. */
  --prose: 46rem;
  --tap: 44px;
  --focus: var(--accent);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1115;
  --fg: #eaeaea;
  --muted: #9a9a9a;
  --card: #1a1d24;
  --border: #2a2d35;
  --accent: #8aa9f0;
  --accent-on: #0f1115;
  --accent-weak: #191f2c;
  --up: #f98b84;
  /* 액센트(#8aa9f0)와 같은 파랑 계열이면 "지금 어디에 있나"와 "내렸다"가 한 화면에서
   * 섞인다. 하늘색 쪽으로 밀어 두 파랑이 서로 다른 색으로 읽히게 했다. */
  --down: #62b8ff;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --fg: #1a1a1a;
  --muted: #666;
  --card: #f5f5f7;
  --border: #e2e2e5;
  --accent: #253e81;
  --accent-on: #ffffff;
  --accent-weak: #eef1f8;
  --up: #bd2f2f;
  --down: #1d4ed8;
}

[hidden] {
  display: none !important;
}

* {
  box-sizing: border-box;
}

input,
select,
textarea {
  font-family: inherit;
  font-size: var(--fs-field);
}

/* 한국어는 띄어쓰기에서만 줄을 바꾼다. 기본값은 글자 사이 어디서나 끊어, "30 / 억 1,230만원",
 * "13억 1,166 / 만원"처럼 돈이 한가운데서 갈라졌다(UIUX #46). 띄어쓰기 없는 긴 낱말은 넘치지 않게 끊는다. */
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 껍데기 폭.
 *
 * 오래도록 760px 하나였고 미디어쿼리는 560·520·480 셋뿐이었다 - 전부 아래쪽이다.
 * 모바일에서 좁아지는 규칙만 있고 넓어지는 규칙이 없어서, 1920px 모니터에서 화면의
 * 40%만 쓰고 나머지는 빈 칸이었다. 네이버 메인이 1280px, 다음이 1168px, 통계표를
 * 다루는 KOSIS가 1600px대를 쓴다.
 *
 * 넓히면서 <strong>글까지 같이 넓히지는 않는다.</strong> 728px에서 이미 한 줄이 한글
 * 46~54자로 편한 범위의 위쪽 끝인데, 껍데기를 따라 늘리면 80자가 되어 지금보다 나빠진다.
 * 폭을 쓰는 것은 표와 격자고, 산문은 --prose에 묶는다(아래 .prose 규칙). */
main {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}

@media (min-width: 1024px) {
  main {
    max-width: 1120px;
    padding: 28px 24px 72px;
  }
}

@media (min-width: 1440px) {
  main {
    max-width: 1280px;
  }
}

header {
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

/* 폰에서는 단추 석 장이 머리글 전체의 폭을 가져가고 있었다. 단추는 위쪽 44px만
 * 쓰는데 flex 한 줄이라 그 아래 안내까지 반쪽 폭(약 200px)에 갇혔고, 세 줄이면
 * 될 것이 일곱 줄이 되어 390px 화면의 3분의 1을 먹었다. 단추를 띄워 두고 제목에만
 * 자리를 비켜 주면, 갱신 시각과 갱신 주기는 폭을 다 쓴다.
 * (float이 아니라 absolute인 것은 단추가 글 다음에 오기 때문이다 - 띄운 상자는
 * 앞선 블록보다 위로 못 올라가서 안내 아래로 내려가 버린다.) */
@media (max-width: 560px) {
  header {
    display: block;
    position: relative;
  }

  .header-actions {
    position: absolute;
    top: 0;
    right: 0;
  }

  /* 첫 화면은 제목이 곧 사이트 이름("집계")이라 짧다 - 단추 옆에 그대로 둔다. */
  header .wordmark {
    min-height: var(--tap);
    padding-right: 156px;
  }

  /* 나머지 예순한 장은 이름 줄이 따로 있고 제목이 길다("예금·적금·대출 금리 비교").
   * 이름 줄이 단추 높이를 대신 받아 주면 제목은 아래에서 폭을 다 쓴다. */
  header .brand {
    min-height: var(--tap);
    padding-right: 156px;
  }
}

h1 {
  font-size: var(--fs-h1);
  margin: 0 0 4px;
}

/* 이름은 '집계'다 - 살 집과 세는 일을 한 낱말로 읽는다. 마크는 그 이름을
 * 그대로 그린 것이다: 넉 대에 가로지르는 한 대, 다섯을 세는 획.
 * 그림 파일이 아니라 도형이라 팔레트를 따라가고 다크에서 안 뒤집힌다.
 * 액센트를 쓰는 자리 규칙("사이트가 자기 자신을 말하는 곳")에 정확히 맞는다. */
.wordmark,
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.wordmark::before,
.brand::before {
  content: "";
  flex-shrink: 0;
  width: 1.05em;
  height: 0.86em;
  background:
    linear-gradient(var(--accent), var(--accent)) 4% 50% / 11% 100% no-repeat,
    linear-gradient(var(--accent), var(--accent)) 32% 50% / 11% 100% no-repeat,
    linear-gradient(var(--accent), var(--accent)) 60% 50% / 11% 100% no-repeat,
    linear-gradient(var(--accent), var(--accent)) 88% 50% / 11% 100% no-repeat,
    linear-gradient(118deg, transparent 45%, var(--accent) 45%, var(--accent) 55%, transparent 55%);
}

.wordmark {
  font-size: var(--fs-3xl);
  letter-spacing: -0.01em;
  margin: 0 0 2px;
}

/* 자치구·예산대 예순두 장에는 사이트 이름이 한 번도 안 나왔다. 검색으로
 * 들어온 사람은 자기가 어디에 있는지 모른 채 표부터 보게 된다. */
.brand {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 6px;
}

.brand::before {
  width: 0.95em;
  height: 0.8em;
}

.tagline {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: var(--fs-sm);
}

.updated {
  color: var(--muted);
  font-size: var(--fs-sm);
}

.update-schedule {
  color: var(--muted);
  font-size: var(--fs-xs);
  margin-top: 2px;
}

.back-link {
  margin-top: 4px;
  color: var(--muted);
  font-size: var(--fs-sm);
  text-decoration: none;
}

.back-link:hover {
  text-decoration: underline;
}

.page-nav {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin: 0 0 20px;
}

.page-nav a {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: var(--fs-sm);
  color: var(--fg);
  text-decoration: none;
}

.sub-nav {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin: -8px 0 20px;
  padding-bottom: 2px;
}

/* 1층은 채운 알약, 2층은 테두리만. 전에는 2층이 그냥 회색 글씨라 누를 수 있는
 * 것으로 안 보였고, 그래서 오른쪽 끝의 검색·계산기가 아무도 안 가는 자리였다. */
.sub-nav a {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  font-size: var(--fs-sm);
  color: var(--muted);
  text-decoration: none;
}

.sub-nav a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.sub-nav a[aria-current="page"] {
  background: var(--card);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

/* 1층은 액센트로 채우고, 2층은 액센트 테두리만. 층이 색으로도 갈린다. */
.page-nav a.active,
.page-nav a[aria-current="page"] {
  background: var(--accent);
  color: var(--accent-on);
  border-color: var(--accent);
  font-weight: 600;
}

.header-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.lang-toggle {
  flex-shrink: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: var(--tap);
  height: var(--tap);
  font-size: var(--fs-h2);
  line-height: 1;
  cursor: pointer;
  color: var(--fg);
}

.content-notice {
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
  margin-top: 12px;
}

section {
  margin-bottom: 32px;
}

/* 읽는 것은 글이지 폭이 아니다.
 *
 * method.html이 오래전부터 .method-body에 같은 값을 쓰고 있었다 - "여기 실리는 것은
 * 표가 아니라 글이라 읽는 폭이 데이터 페이지와 달라야 한다". 껍데기가 넓어진 지금은
 * 그 규칙이 데이터 페이지의 문단에도 필요하다. 상자째 묶는 것은, 글만 좁히고 상자를
 * 늘리면 오른쪽이 통째로 빈 상자가 되기 때문이다. */
.lead,
.content-notice,
.district-summary,
.method-callout,
.budget-loan,
.budget-summary,
.budget-where,
.summary-meta,
#summary-box {
  max-width: var(--prose);
}

/* 글을 --prose로 묶고 나면 넓은 화면에서 그 옆이 통째로 빈다. 1440px에서 재 보면
 * 껍데기 1280px 가운데 520px(41%)이 아무것도 아닌 여백이었다 - 폭을 넓힌 이유가
 * 사라진 셈이다. 자치구 문단은 원래 서로 다른 이야기 두셋("얼마인가" / "무엇이
 * 팔리는가" / "갱신은 어떤가")이라 위아래로 쌓을 이유가 없다. 한 단이 --prose보다
 * 좁아지지 않는 선(30rem)에서만 갈라 놓는다 - 더 좁히면 한 줄이 스물몇 자가 되어
 * 읽는 폭을 지키려고 한 것이 도로아미타불이 된다. */
@media (min-width: 1024px) {
  #district-summary-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
    align-items: start;
    gap: 12px 20px;
  }

  #district-summary-section .district-facts {
    margin-top: 0;
  }
}

h2 {
  position: relative;
  font-size: var(--fs-h2);
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

/* 밑줄 왼쪽 끝만 액센트로 바꾼다. 예순두 장이 전부 흰 바탕에 회색 표라
 * 어디가 어디인지 구분이 안 됐는데, 섹션 머리가 눈에 걸리면 훑을 수 있다. */
h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 28px;
  height: 2px;
  background: var(--accent);
}

.change.up {
  color: var(--up);
}

.change.down {
  color: var(--down);
}

.live-badge {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--up);
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 1px 4px;
  margin-left: 4px;
  vertical-align: middle;
  cursor: default;
}

.table-wrap {
  overflow-x: auto;
  margin-top: 4px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  white-space: nowrap;
}

.data-table th,
.data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: right;
}

.data-table th {
  color: var(--muted);
  font-weight: 600;
  font-size: var(--fs-xs);
}

.data-table tbody tr:hover {
  background: var(--card);
}

.data-table .overall-row {
  background: var(--card);
  font-weight: 700;
}

.data-table .change {
  font-size: var(--fs-xs);
  margin-left: 4px;
}

.data-table .tx-count {
  color: var(--muted);
  font-size: var(--fs-xs);
  margin-left: 4px;
}

.data-table .low-sample {
  font-size: var(--fs-sm);
}

.realestate-table {
  white-space: normal;
}

.realestate-table td {
  vertical-align: top;
}

.realestate-search,
.news-search {
  margin: 10px 0 4px;
}

.realestate-search input,
.news-search input {
  width: 100%;
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: var(--fs-field);
}

ul.news-list {
  max-width: var(--prose);
  list-style: none;
  margin: 0;
  padding: 0;
}

.news-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.news-item:last-child {
  border-bottom: none;
}

.news-item a {
  color: var(--fg);
  text-decoration: none;
  font-size: var(--fs-lg);
}

.news-item a:hover {
  text-decoration: underline;
}

.news-meta {
  color: var(--muted);
  font-size: var(--fs-xs);
  margin-top: 2px;
}

.news-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.news-chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  background: var(--card);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: var(--fs-xs);
  font-family: inherit;
  cursor: pointer;
}

.news-chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on);
}

.news-chip-count {
  opacity: 0.7;
  margin-left: 4px;
}

.news-preview {
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.45;
  margin-top: 3px;
}

.news-context {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.news-item .context-chip {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  max-width: 100%;
  gap: 2px 6px;
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  font-size: var(--fs-xs);
  text-decoration: none;
}

.news-item .context-chip:hover {
  border-color: var(--muted);
  text-decoration: none;
}

.context-label {
  color: var(--muted);
}

.context-value {
  color: var(--fg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.context-note {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

.news-item.read > a {
  color: var(--muted);
}

.news-dupes {
  margin-top: 4px;
  font-size: var(--fs-xs);
}

.news-dupes summary {
  cursor: pointer;
  color: var(--muted);
  list-style: none;
}

.news-dupes summary::-webkit-details-marker {
  display: none;
}

.news-dupes summary::before {
  content: "▸ ";
}

.news-dupes[open] summary::before {
  content: "▾ ";
}

.news-dupes ul {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}

.news-dupes li {
  margin-top: 3px;
}

.news-dupes a {
  color: var(--muted);
  text-decoration: none;
}

.news-dupes a:hover {
  text-decoration: underline;
}

.news-empty {
  color: var(--muted);
  font-size: var(--fs-sm);
  padding: 10px 0;
}

.archive-link {
  display: inline-block;
  margin-top: 10px;
  color: var(--muted);
  font-size: var(--fs-sm);
  text-decoration: none;
}

.archive-link:hover {
  text-decoration: underline;
}

.placeholder {
  color: var(--muted);
  font-size: var(--fs-md);
  background: var(--card);
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 16px;
}

#summary-box {
  color: var(--fg);
  font-size: var(--fs-lg);
}

.realestate-table th.sortable {
  padding: 0;
}

.realestate-table th.sortable button {
  font: inherit;
  color: inherit;
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: right;
  white-space: nowrap;
}

.realestate-table th.sortable:first-child button {
  text-align: left;
}

.realestate-table th.sortable button:hover {
  color: var(--fg);
}

.realestate-table th.sorted button {
  color: var(--fg);
  font-weight: 700;
}

.load-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 20px;
  font-size: var(--fs-md);
}

.load-error button {
  font: inherit;
  background: var(--fg);
  color: var(--bg);
  border: 0;
  border-radius: 8px;
  padding: 6px 14px;
  cursor: pointer;
}

.summary-fallback-note {
  color: var(--muted);
  font-size: var(--fs-xs);
  margin-top: 10px;
}

.summary-highlights {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.summary-section-label {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--muted);
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}

.summary-highlight {
  margin-bottom: 12px;
}

.summary-highlight:last-child {
  margin-bottom: 0;
}

.summary-highlight a {
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--fg);
  text-decoration: none;
}

.summary-highlight a:hover {
  text-decoration: underline;
}

.summary-highlight-text {
  font-size: var(--fs-lg);
  line-height: 1.65;
  margin-top: 3px;
}

.summary-category {
  margin-bottom: 14px;
}

.summary-category:last-child {
  margin-bottom: 0;
}

.summary-category-label {
  font-weight: 600;
  font-size: var(--fs-sm);
  margin-bottom: 2px;
}

.summary-category-line {
  font-size: var(--fs-lg);
  line-height: 1.65;
}

.summary-links {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}

.summary-links li {
  font-size: var(--fs-sm);
  margin-top: 4px;
}

.summary-links a {
  color: var(--fg);
  text-decoration: none;
}

.summary-links a:hover {
  text-decoration: underline;
}

.summary-link-source {
  color: var(--muted);
}

.summary-plain-label {
  font-weight: 600;
}

.summary-meta {
  display: block;
  color: var(--muted);
  font-size: var(--fs-xs);
  margin-top: 10px;
}

.error {
  color: var(--muted);
  font-size: var(--fs-md);
}

.history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.history-more {
  grid-column: 1 / -1;
}

.history-more summary {
  cursor: pointer;
  color: var(--muted);
  font-size: var(--fs-sm);
  padding: 6px 0;
  list-style: none;
}

.history-more summary::-webkit-details-marker {
  display: none;
}

.history-more summary::before {
  content: "▸ ";
}

.history-more[open] summary::before {
  content: "▾ ";
}

.history-grid-nested {
  margin-top: 8px;
}

.realestate-history-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.realestate-history-controls select {
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: var(--fs-field);
}

.history-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}


.history-card .label {
  color: var(--muted);
  font-size: var(--fs-xs);
  margin-bottom: 6px;
}

.history-stats {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.history-current {
  font-size: var(--fs-xl);
  font-weight: 700;
}

.history-minmax {
  color: var(--muted);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.history-chart {
  position: relative;
}

.history-card svg {
  display: block;
  width: 100%;
  margin-top: 6px;
}

/* 금리 화면의 카드는 글 아래에 추이선 한 줄이 붙는 꼴이다. 상품명 길이에 따라 카드
 * 높이가 제각각이라 선이 카드마다 다른 높이에 떠 있었다 - 바닥에 붙여 넉 장의 선을
 * 같은 줄에서 견줄 수 있게 한다. 추이 화면의 그래프는 .history-chart 안에 있어
 * 여기 걸리지 않는다. */
.history-card > svg {
  margin-top: auto;
  padding-top: 8px;
}

.history-card .grid {
  stroke: var(--border);
  stroke-width: 1;
}

.history-card .axis {
  fill: var(--muted);
  font-size: var(--fs-sm);
}

.history-card .axis.y {
  text-anchor: end;
}

.history-card .axis.x {
  text-anchor: middle;
}

.history-card .marker-line {
  stroke: var(--muted);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.history-card .marker-dot {
  fill: var(--fg);
}

.chart-tip {
  position: fixed;
  z-index: 20;
  padding: 6px 9px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg);
  font-size: var(--fs-xs);
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.chart-tip .tip-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* 하루를 짚으면 같은 격자의 그래프가 모두 그날에 찍힌다. 말풍선도 그만큼 길어지므로 한 줄에 이름과 값을 좌우로 벌리고,
긴 이름은 잘라 낸다. */ .chart-tip {
  max-width: min(340px, calc(100vw - 16px));
}

.chart-tip .tip-date {
  color: var(--muted);
  margin-bottom: 3px;
}

.chart-tip .tip-row {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: baseline;
}

.chart-tip .tip-row .tip-label {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

.chart-tip .tip-row.here .tip-label {
  color: var(--fg);
}

.archive-date-jump {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 16px;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.archive-date-jump input,
.archive-date-jump button {
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: var(--fs-field);
}

.archive-date-jump button {
  cursor: pointer;
}

.site-footer {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: var(--fs-sm);
}

.site-footer a {
  color: var(--muted);
  font-size: var(--fs-sm);
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

.icon-toggle {
  flex-shrink: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: var(--tap);
  height: var(--tap);
  font-size: var(--fs-h2);
  line-height: 1;
  cursor: pointer;
  color: var(--fg);
}

.summary-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: var(--fs-md);
}

.summary-box p {
  margin: 0 0 8px;
}

.summary-box p:last-child {
  margin-bottom: 0;
}

.summary-note {
  color: var(--muted);
  font-size: var(--fs-xs);
  margin-top: 10px;
}

.empty {
  color: var(--muted);
  font-size: var(--fs-md);
}

.empty button {
  font: inherit;
  background: var(--fg);
  color: var(--bg);
  border: 0;
  border-radius: 8px;
  padding: 4px 12px;
  margin-left: 8px;
  cursor: pointer;
}

.overall-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.overall-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}

.overall-card .label {
  color: var(--muted);
  font-size: var(--fs-xs);
  letter-spacing: 0.03em;
}

.overall-card .value {
  font-size: var(--fs-2xl);
  font-weight: 700;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
  /* "13,777만원 / 월 64만원"처럼 두 사실이 한 값에 들어 있는 칸이 있다. 좁은 화면에서
   * 그냥 흘리면 마지막 줄에 "64만원"만 남아 고아가 된다. */
  text-wrap: balance;
}

.overall-card .sub {
  color: var(--muted);
  font-size: var(--fs-xs);
  margin-top: 2px;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.controls label {
  font-size: var(--fs-sm);
  color: var(--muted);
}

.controls select {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 9px;
  font-size: var(--fs-field);
  font-family: inherit;
}

.district-summary {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0;
  font-size: var(--fs-md);
  line-height: 1.65;
}

/* 시세 문장 아래에 붙는 두 번째 카드. 위 문단이 "얼마인가"라면 이쪽은 "무엇이 팔리는가"라,
한 문단으로 이어 붙이지 않고 칸을 나눈다. */ .district-facts {
  margin-top: 10px;
}

.district-facts:empty {
  display: none;
}

/* 한 주를 짚으면 같은 축을 쓰는 그래프가 모두 그 주에 찍힌다. 말풍선도 그만큼 길어지므로 한 줄에 이름과 값을 좌우로 벌리고,
긴 이름은 잘라 낸다 — 전세가율은 이름만 스무 자가 넘어서 그대로 두면 말풍선이 화면을 가로지른다. */ .chart-tip {
  max-width: min(340px, calc(100vw - 16px));
}

.trend-meta {
  color: var(--muted);
  font-size: var(--fs-xs);
  margin-top: 10px;
}

.district-links-heading {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin: 18px 0 8px;
  font-weight: 600;
}

.district-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: var(--fs-sm);
}

/* 줄 단위 링크 목록은 손가락 크기(--tap)로(UIUX #50). 글 속 링크 높이가 20~25px이었다. */
.district-links a,
.section-links a,
.card-links a,
.back-link,
.method-callout a,
.budget-nav a,
.archive-link,
.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}

.district-links a {
  color: var(--muted);
  text-decoration: none;
}

.district-links a:hover {
  text-decoration: underline;
}

.district-links a[aria-current="page"] {
  color: var(--fg);
  font-weight: 600;
}

.data-table th:first-child,
.data-table td:first-child {
  text-align: left;
}

.price-strong {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.count {
  color: var(--muted);
  font-size: var(--fs-xs);
}

.change {
  font-size: var(--fs-xs);
}

.ratio {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* "표본이 모자라면 모자란다고 적는다"가 이 사이트가 파는 것인데(DIRECTION.md 1부),
 * 정작 화면에서는 가장 작고 흐린 각주로 적혀 있었다 - 기울임 한 겹이 전부였고,
 * 한글 기울임은 합성 이탤릭이라 읽기만 나빠진다. 빈 칸이 상품이므로 빈 칸처럼
 * 보이게 한다: 빗금 친 작은 칸 하나를 앞에 세워 "빠뜨린 값"이 아니라 "세어 봤고
 * 모자랐다"로 읽히게 했다. 이 사이트에서 액센트 말고 강조를 쓰는 유일한 자리다. */
.low-sample {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.low-sample::before {
  content: "";
  flex-shrink: 0;
  width: 13px;
  height: 0.9em;
  border: 1px solid var(--border);
  border-radius: 2px;
  background-image: repeating-linear-gradient(-45deg, var(--border) 0 1px, transparent 1px 4px);
}

/* 표 안 링크(자치구 이름 등). 전에는 밑줄이 --border 점선(흰 바탕 대비 1.29:1)이라 링크로 안 보였고, 누르는
 * 자리도 글자 높이(25px)뿐이었다(UIUX #50). 표 안의 파랑은 이미 '하락'이라 액센트색은 쓰지 않고(아래 검사),
 * --muted 실선 밑줄로 보이게 한다. 인라인 위아래 여백으로 누르는 자리만 넓힌다 - 줄 높이는 그대로. */
.data-table td a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--muted);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  padding: 10px 0;
}

.data-table td a:hover {
  text-decoration-thickness: 2px;
}

.prev-tag {
  display: inline-block;
  padding: 0 5px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  font-size: var(--fs-xs);
  vertical-align: middle;
}

/* "그래서 매달 얼마". 거래 목록 뒤에 오지만 목록의 일부는 아니라 자기 바닥을 갖는다. */
.budget-loan {
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--fg);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.budget-summary {
  font-size: var(--fs-lg);
  line-height: 1.6;
}

.budget-summary strong {
  font-variant-numeric: tabular-nums;
}

.budget-districts {
  color: var(--muted);
  font-size: var(--fs-sm);
  margin-top: 4px;
}

.budget-deals {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  gap: 6px;
}

@media (min-width: 1024px) {
  .budget-deals {
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  }
}

.budget-deal {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
}

.budget-deal .place {
  font-weight: 600;
}

.budget-deal .spec,
.budget-deal .when {
  color: var(--muted);
  font-size: var(--fs-sm);
}

.budget-deal .price {
  margin-left: auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.budget-empty {
  color: var(--muted);
  font-size: var(--fs-md);
}

.budget-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

/* 예산 칩 줄(UIUX #43). 열여덟 개를 모바일 여섯 칸 세 줄, 넓으면 아홉 칸 두 줄. */
.budget-chips {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 14px;
}

@media (min-width: 720px) {
  .budget-chips {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
}

.budget-chips a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: var(--fs-sm);
  color: var(--fg);
  text-decoration: none;
}

.budget-chips a[aria-current="page"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on);
  font-weight: 700;
}

/* 예산대의 "한눈에" — 이 장이 내놓는 답이라 답 크기(--fs-xl)를 쓴다. 문장의 주어(무엇의 값인가)를 값 앞에 둔다. */
.budget-answers {
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  background: var(--accent-weak);
}

/* 따로 크기를 주지 않은 h3는 브라우저 기본(1.17em = 18.72px)이라 축척 밖이었다(UIUX #54). */
main h3 {
  font-size: var(--fs-lg);
}

.budget-answers h3 {
  margin: 0 0 8px;
  font-size: var(--fs-sm);
  color: var(--muted);
  font-weight: 600;
}

.budget-answers ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.budget-answers li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
}

.budget-answers .answer-label {
  font-size: var(--fs-sm);
  color: var(--muted);
}

.budget-answers .answer-value {
  font-size: var(--fs-xl);
  font-weight: 700;
}

.budget-answers .answer-text {
  font-size: var(--fs-lg);
  font-weight: 600;
}

.budget-answers .answer-note {
  flex-basis: 100%;
  font-size: var(--fs-xs);
  color: var(--muted);
}

.budget-answers .answer-more {
  margin: 10px 0 0;
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* 표가 보여주는 것 옆에 붙는 문단. 시세 페이지의 관찰 카드와 같은 모양으로 둔다 — 둘 다 "표만 봐서는 놓치는 것"을 적는 자리라 생김새가 같아야 읽는 쪽이 헷갈리지 않는다. */ .rates-facts {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 12px;
  font-size: var(--fs-md);
  line-height: 1.65;
}

.rates-facts:empty {
  display: none;
}

.tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin-bottom: 16px;
  padding-bottom: 2px;
}

.tab {
  flex-shrink: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: var(--fs-sm);
  cursor: pointer;
  color: var(--fg);
}

.tab[aria-selected="true"] {
  /* 1층 내비의 '지금 여기'는 액센트인데 상품군 탭만 검정이었다. 같은 뜻을 가진
   * 자리가 화면마다 다른 색이면 그건 두 가지 뜻으로 읽힌다. */
  background: var(--accent);
  color: var(--accent-on);
  border-color: var(--accent);
  font-weight: 600;
}

.controls select,
.controls input[type="number"],
.controls input[type="search"] {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: var(--fs-field);
  font-family: inherit;
}

.controls input[type="search"] {
  flex: 1;
  min-width: 140px;
}

.sector-filter {
  display: flex;
  gap: 10px;
  align-items: center;
}

.amount-field {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.amount-field input {
  width: 130px;
  text-align: right;
}

.amount-unit {
  font-size: var(--fs-sm);
  color: var(--muted);
}

.sector-filter label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.empty-row button {
  font: inherit;
  background: var(--fg);
  color: var(--bg);
  border: 0;
  border-radius: 8px;
  padding: 4px 12px;
  margin-left: 8px;
  cursor: pointer;
}

.show-more {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.show-more button {
  font: inherit;
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: var(--fs-sm);
  cursor: pointer;
}

.show-more button:hover {
  border-color: var(--muted);
}

.shown-count {
  color: var(--muted);
  font-size: var(--fs-sm);
}

.rate-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 14px;
  font-size: var(--fs-sm);
}

.rate-links a {
  color: var(--muted);
}

.rate-links a[aria-current="page"] {
  color: var(--fg);
  font-weight: 600;
}

.data-table th.sortable {
  padding: 0;
}

.data-table th.sortable button {
  font: inherit;
  color: inherit;
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: right;
  white-space: nowrap;
}

.data-table th.sortable button:hover {
  color: var(--fg);
}

.data-table th.sorted button {
  color: var(--fg);
  font-weight: 700;
}

.rate-strong {
  font-weight: 600;
  color: var(--up);
}

.rate-low {
  font-weight: 600;
  color: var(--down);
}

.net-interest {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.product-name {
  white-space: normal;
  word-break: keep-all;
}

.product-company {
  font-size: var(--fs-xs);
  color: var(--muted);
}

.sector-tag {
  display: inline-block;
  font-size: var(--fs-xs);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 4px;
  margin-left: 4px;
  color: var(--muted);
  vertical-align: middle;
}

.detail-toggle {
  background: none;
  border: none;
  padding: 0;
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--fs-xs);
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
}

.detail-row td {
  white-space: normal;
  text-align: left;
  background: var(--card);
  font-size: var(--fs-xs);
  color: var(--muted);
  word-break: keep-all;
}

.detail-row dt {
  font-weight: 600;
  margin-top: 6px;
}

.detail-row dd {
  margin: 0;
}

.detail-row dl {
  margin: 0;
}

.history-card .value {
  font-size: var(--fs-h2);
  font-weight: 600;
  margin-top: 2px;
}

.history-card .sub {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-top: 2px;
  white-space: normal;
  word-break: keep-all;
}

.placeholder,
.error {
  color: var(--muted);
  font-size: var(--fs-sm);
}

.empty-row td {
  text-align: center;
  color: var(--muted);
}

.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}

.stat-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  text-decoration: none;
}

.stat-card:hover {
  border-color: var(--accent);
  text-decoration: none;
}

.stat-label {
  color: var(--muted);
  font-size: var(--fs-xs);
}

.stat-value {
  color: var(--fg);
  font-weight: 700;
  font-size: var(--fs-xl);
  font-variant-numeric: tabular-nums;
}

.stat-sub {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

.stat-note {
  color: var(--muted);
  font-size: var(--fs-xs);
  margin-top: 8px;
}

.search-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 16px;
}

.search-field {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-field label,
.search-field .field-label {
  font-size: var(--fs-sm);
  color: var(--muted);
  /* 칩 묶음이 옆에서 자리를 다 가져가면 "면/적"처럼 한 글자씩 꺾였다(PO 검토 #33). */
  flex-shrink: 0;
  white-space: nowrap;
}

.search-field select,
.search-field input[type="text"] {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: var(--fs-field);
  font-family: inherit;
  max-width: 12rem;
}

.search-field input[type="text"] {
  width: 8.5rem;
}

.search-field input[type="checkbox"] {
  margin: 0;
}

.search-field.toggle label {
  cursor: pointer;
}

.budget-deal .tag {
  font-size: var(--fs-xs);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 6px;
}

.search-loading {
  color: var(--muted);
  font-size: var(--fs-md);
}

.budget-more {
  margin-top: 12px;
  font-size: var(--fs-sm);
}

.budget-more a {
  color: var(--fg);
}

.search-field select,
.search-field input[type="number"] {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: var(--fs-field);
  font-family: inherit;
  max-width: 12rem;
}

.search-field input[type="number"] {
  width: 6rem;
}

/* 이 화면은 집계가 계산으로 답을 내놓는 유일한 자리다(DIRECTION.md의 해자 1 - 실거래에
 * 금리를 자동으로 물리는 교차점). 그런데 판정도, 이긴 쪽도, 진 쪽도 전부 같은 회색
 * 상자였다: 답이 어느 것인지 화면이 말해 주지 않았다. 강조는 여기 한 곳에만 쓴다.
 *
 * 폭도 묶는다. 1280px에서 두 카드가 각각 830px이 되면 237만원과 268만원이 화면
 * 양 끝에 떨어져, 나란히 놓고 견주라고 만든 화면에서 견줄 수가 없다. */
.verdict,
.options {
  max-width: 64rem;
}

.verdict {
  font-size: var(--fs-lg);
  line-height: 1.6;
  padding: 14px 16px 14px 18px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 0 12px 12px 0;
  background: var(--card);
  margin-bottom: 16px;
}

.verdict strong {
  font-size: var(--fs-2xl);
}

.verdict .sub {
  display: block;
  color: var(--muted);
  font-size: var(--fs-sm);
  margin-top: 6px;
}

.options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.option {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--card);
}

.option.win {
  border-color: var(--accent);
  background: var(--accent-weak);
}

/* 이긴 쪽의 값만 액센트로. 두 값의 크기는 같아야 견줄 수 있으므로 색만 바꾼다. */
.option.win .cost {
  color: var(--accent);
}

.option .name {
  font-weight: 600;
  margin-bottom: 2px;
}

.option .terms {
  color: var(--muted);
  font-size: var(--fs-sm);
  margin-bottom: 10px;
}

.option .cost {
  font-size: var(--fs-3xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.option .cost-label {
  color: var(--muted);
  font-size: var(--fs-sm);
}

.option .rows {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.option .rows li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 1px 0;
}

.option .rows span {
  font-variant-numeric: tabular-nums;
}

.option .infeasible {
  color: var(--fg);
  font-size: var(--fs-sm);
  margin-top: 10px;
}

.rate-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.rate-table th,
.rate-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  text-align: right;
}

.rate-table th:first-child,
.rate-table td:first-child {
  text-align: left;
}

.rate-table thead th {
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}

/* 전망 표의 첫 열은 "도심권", "3개월 뒤"처럼 짧다. 좁은 화면에서 한 글자씩 꺾이면
 * 행 높이가 두 배가 되어 숫자를 가로로 따라가기 어렵다. */
.outlook-table td:first-child {
  white-space: nowrap;
}

/* 지표 이름은 길다("전세가율(KB 지수비) 12개월 변화 (+1개월)"). 한 줄로 두면 숫자 열이 화면 밖으로
 * 밀려 정작 오차가 안 보인다. 이름은 줄을 바꾸고 숫자 열이 자리를 갖게 한다. */
.indicator-table td:first-child {
  min-width: 8.5em;
  white-space: normal;
}

/* 전망 표처럼 한 칸에 값과 그 값의 범위(또는 표본 수)를 같이 싣는 자리. 범위를 옆에
 * 붙이면 좁은 화면에서 값보다 범위가 먼저 눈에 들어온다. */
.rate-table td .sub {
  display: block;
  color: var(--muted);
  font-size: var(--fs-xs);
  margin-top: 2px;
  white-space: nowrap;
}

.rate-table td {
  font-variant-numeric: tabular-nums;
}

.rate-table tbody tr.spot td {
  font-weight: 700;
}

.table-scroll {
  overflow-x: auto;
}

.lead {
  font-size: var(--fs-lg);
  line-height: 1.65;
  margin: 0 0 16px;
}

/* 이 페이지에만 있는 것. 여기 실리는 것은 표가 아니라 글이라,
읽는 폭과 줄 간격이 데이터 페이지와 달라야 한다. */ .method-body {
  max-width: var(--prose);
}

.method-body h2 {
  margin: 28px 0 8px;
  font-size: var(--fs-h2);
}

.method-body h2:first-of-type {
  margin-top: 8px;
}

.method-body p {
  margin: 0 0 10px;
  line-height: 1.75;
}

.method-body .lead {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  line-height: 1.7;
}

.method-body ul {
  margin: 0 0 10px;
  padding-left: 1.1rem;
  line-height: 1.75;
}

.method-body li {
  margin-bottom: 4px;
}

.method-body dl {
  margin: 0 0 10px;
}

.method-body dt {
  font-weight: 600;
  margin-top: 10px;
}

.method-body dd {
  margin: 2px 0 0;
  line-height: 1.7;
  color: var(--muted);
}

.method-body code {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.85em;
}

[data-lang] {
  display: none;
}

[data-lang].on {
  display: block;
}

/* 표와 카드의 숫자는 자릿수를 세로로 맞춘다. 비례폭 숫자로는 5,211만원과
 * 11,227만원의 만 자리가 어긋나 눈이 열을 못 따라간다. 이 사이트는 그 비교가
 * 전부라, 숫자가 나오는 자리에는 전부 고정폭 숫자를 쓴다. */
.data-table td,
.data-table .change,
.data-table .tx-count,
.change,
.count,
.history-current,
.history-minmax,
.history-card .value,
.history-card .sub,
.overall-card .sub,
.summary-meta {
  font-variant-numeric: tabular-nums;
}

/* 크게 적히는 값은 이 화면들의 주어다. 라벨과 같은 얼굴·같은 자간으로 두면 둘이
 * 한 덩어리로 읽혀서, 정작 보러 온 숫자가 설명문에 묻힌다. 큰 자리에서만 자간을
 * 좁혀(한글 제목이 아니라 숫자가 뭉치도록) 값이 먼저 눈에 걸리게 한다. */
.overall-card .value,
.stat-value,
.history-current,
.history-card .value,
.option .cost,
.verdict strong,
.price-strong {
  letter-spacing: -0.015em;
}

/* 추이선. 마지막 확정값이 첫 값보다 높으면 --up, 아니면 --down. 색을 그리는 쪽이
 * 아니라 팔레트가 갖고 있어야 테마를 바꿀 때 같이 따라온다. */
.history-card .spark.up {
  stroke: var(--up);
}

.history-card .spark.down {
  stroke: var(--down);
}

.history-card .spark.flat {
  stroke: var(--muted);
}

.history-card .spark-dot.up {
  fill: var(--up);
}

.history-card .spark-dot.down {
  fill: var(--down);
}

/* 그래프 양 끝의 날짜. 가운데 정렬이라 마지막 눈금이 그림 밖으로 4~5px 나가
 * 잘려 있었다("8/24"의 오른쪽 획이 사라진다). 끝의 둘만 안쪽으로 붙인다. */
.history-card .axis.x.first {
  text-anchor: start;
}

.history-card .axis.x.last {
  text-anchor: end;
}

/* 가로로 넘치는 내비게이션의 양 끝 페이드. docs/nav.js가 넘칠 때만, 그리고 그
 * 방향에 남은 것이 있을 때만 클래스를 붙인다 - 늘 켜 두면 끝까지 민 뒤에도
 * 더 있다고 거짓말을 한다. 스크립트가 없으면 페이드가 없을 뿐 잘리지는 않는다. */
.page-nav,
.sub-nav {
  scrollbar-width: none;
}

.page-nav::-webkit-scrollbar,
.sub-nav::-webkit-scrollbar {
  display: none;
}

.page-nav.scroll-end:not(.scroll-start),
.sub-nav.scroll-end:not(.scroll-start) {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
}

.page-nav.scroll-start:not(.scroll-end),
.sub-nav.scroll-start:not(.scroll-end) {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 36px);
  mask-image: linear-gradient(to right, transparent, #000 36px);
}

.page-nav.scroll-start.scroll-end,
.sub-nav.scroll-start.scroll-end {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
}

/* 섹션 안에서 다른 화면으로 보내는 줄. 1층을 넷으로 묶어 둔 대신, 그 섹션을
 * 보고 있는 사람에게 이어지는 도구를 여기서 준다. */
.section-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 10px;
  font-size: var(--fs-sm);
}

.section-links a {
  color: var(--muted);
  text-decoration: none;
}

/* .back-link이 혼자 4px 내려가 있어 같은 줄의 다른 링크와 밑줄이 어긋난다. */
.section-links .back-link {
  margin-top: 0;
}

.section-links a:hover {
  color: var(--fg);
  text-decoration: underline;
}

/* 나머지 누르는 것들. 엄지 끝이 닿는 최소 크기를 한곳에서 준다.
 * 표 머리글의 정렬 버튼은 뺐다 - 열 너비만큼 넓어서 면적은 충분한데,
 * 44px을 주면 모든 표의 머리글이 그만큼 두꺼워진다. */
.show-more button,
.load-error button,
.empty button,
.empty-row button,
.archive-date-jump button,
.detail-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
}

.archive-date-jump input,
.controls select,
.controls input,
.search-field select,
.search-field input[type="text"],
.search-field input[type="number"],
.realestate-search input,
.news-search input,
.realestate-history-controls select,
.amount-field input {
  min-height: var(--tap);
}

/* 초점 테두리. 전에는 시세 표 정렬 버튼 두 곳에만 있었고, 나머지는 키보드로
 * 훑을 때 지금 어디에 있는지 알 수 없었다. :focus-visible이라 마우스로 누를
 * 때는 안 뜬다. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* 화면에서는 안 보이고 스크린리더만 읽는다. 걸러낸 결과가 몇 건인지는
 * 눈으로 보면 알지만 소리로는 아무 말도 없었다. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 1층·2층을 합쳐 링크 열한 개를 지나야 본문이다. 키보드로 오는 사람에게
 * 건너뛸 길을 준다. 초점이 가기 전에는 화면 밖에 있다. */
.skip-link {
  position: absolute;
  left: 8px;
  top: -100px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 6px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--fg);
  font-size: var(--fs-sm);
  text-decoration: none;
}

.skip-link:focus-visible {
  top: 8px;
}

/* 첫 화면에서 "이 숫자를 왜 믿어도 되는가"를 말하는 자리. 전에는 이 내용이
 * 푸터 링크 한 줄로만 있었는데, 이 사이트가 대형 부동산 앱과 다른 점이
 * 사실상 이것 하나뿐이라 아무도 안 보는 자리에 둘 것이 아니었다.
 *
 * 데이터 앞을 막지 않도록 두 문장으로 묶는다. 왼쪽 액센트 막대는 데이터가
 * 아니라 사이트가 자기 자신에 대해 말하는 자리라는 표시다 - 표 안에는
 * 여전히 액센트를 쓰지 않는다. */
/* 상자 모양은 역할마다 하나다(UIUX #47). 왼쪽 액센트 막대 + 옅은 파랑 판이 방법 안내·핵심 답·단지 카드에
 * 다 쓰여, 어느 것이 이 화면의 답인지 모양으로 가려지지 않았다.
 *   답   — 막대 + 큰 글씨(.budget-answers, 전세 vs 월세 답 카드). 화면당 몇 개뿐.
 *   안내 — 막대·판 없이 회색 작은 글씨 + "방법 →"(.method-callout). 데이터 앞에 두는 자리는 그대로.
 *   카드·근거 — 테두리만(.complex-card, .budget-loan). */
.method-callout {
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  background: none;
}

.method-callout p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.method-callout a {
  margin-top: 2px;
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}

.method-callout a:hover {
  text-decoration: underline;
}

/* 무엇을 알고 싶은지로 들어가는 입구.
 *
 * 1층 탭 넷은 우리가 데이터를 어디서 받는지의 목록이다 - 다이제스트·뉴스·시세·금리.
 * 사용자의 질문은 그렇게 생기지 않았다. 이미 계산해 둔 답이 여럿인데(전환율, 갱신
 * 격차, 해제율, 세후 이자) 그게 어느 페이지에 있는지 알 방법이 없었다.
 *
 * 1층과 헷갈리지 않게 채우지도 테두리를 두르지도 않는다 - 물음표가 달린 글줄이다. */
/* 첫 화면의 중심이다. 1층 탭 넷은 우리가 데이터를 어디서 받는지의 목록이지
 * 온 사람이 묻는 것의 목록이 아니다 - 이미 계산해 둔 답(전환율·갱신 격차·
 * 해제율·세후 이자)이 어느 화면에 있는지 알 방법이 여기 말고는 없다.
 *
 * 전에는 한 줄로 접어 가로로 밀게 했는데, 그러면 여섯 중 뒤의 셋이 안 보인다.
 * 사이트에서 제일 눌려야 하는 자리를 스크롤 뒤에 감춰 두고 있었다. 격자로
 * 펴면 여섯이 두 줄에 다 들어오고, 세로로 먹는 자리는 시세표를 다섯 행으로
 * 접어 번 자리 안이다. */
/* 질문 한 줄에 한 칸. 폰에서 두 칸으로 놓으면 "재계약이 새로 구하는 것보다 싼가"
 * 같은 줄이 반으로 접혀, 여덟 개가 전부 두 줄짜리 누더기가 된다. 여기는 화면으로
 * 가는 입구 목록이라 한 줄에 한 질문이 그대로 읽히는 편이 낫다. */
/* 질문 입구는 장면별 세 묶음이다(UIUX #44). 한 줄씩 열하나를 세우면 모바일에서 "예산" 질문이
 * 첫 화면 밖(868px)으로 밀렸고, 사는 사람·세 사는 사람·옮기는 사람의 질문이 섞여 있었다.
 * 묶음 안에서 모바일은 두 칸, 넓으면 묶음 셋이 나란히 선다. 가로 스크롤은 여전히 쓰지 않는다. */
.question-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 0 0 24px;
}

@media (min-width: 1024px) {
  .question-nav {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

.question-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-content: start;
}

@media (min-width: 1024px) {
  .question-group:not(:first-child) {
    grid-template-columns: minmax(0, 1fr);
  }
}

.question-group-title {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--muted);
}

.question-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: var(--tap);
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--accent-weak);
  font-size: var(--fs-sm);
  line-height: 1.35;
  color: var(--fg);
  text-decoration: none;
}

.question-nav a::after {
  content: "\2192";
  flex-shrink: 0;
  color: var(--accent);
  font-weight: 700;
}

.question-nav a:hover {
  border-color: var(--accent);
}

.question-heading {
  margin-top: 0;
}

/* 무엇을 넣어도 받는 검색창.
 *
 * 자치구·단지·예산·화면을 한 입구로 모은다. 전에는 첫 화면의 지역 검색과 금리
 * 화면의 상품 검색이 따로 있었고, '실거래 검색' 화면에는 정작 검색창이 없었다. */
.site-search {
  position: relative;
  margin: 0 0 12px;
}

.site-search input {
  width: 100%;
  min-height: var(--tap);
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--fg);
  font-size: var(--fs-field);
}

.site-search input:focus {
  border-color: var(--accent);
}

/* 목록은 아래 내용 위로 떠야 한다. 자리를 차지하면 글자를 칠 때마다 화면이 밀린다. */
.site-search-results {
  position: absolute;
  z-index: 25;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  max-height: 60vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
}

.site-search-results a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--tap);
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--fg);
  font-size: var(--fs-sm);
  text-decoration: none;
}

.site-search-results a:last-child {
  border-bottom: 0;
}

.site-search-results a:hover,
.site-search-results a[aria-selected="true"] {
  background: var(--card);
}

.site-search-results .where {
  flex-shrink: 0;
  color: var(--muted);
  font-size: var(--fs-xs);
}

/* 검색에서 고른 단지의 평형별 값.
 *
 * 목록은 "얼마에 팔렸나"에는 답하지만 "이 단지 전세가율이 얼마냐"에는 답하지 않는다.
 * 이 카드의 값어치는 숫자가 아니라 그 숫자를 낼 수 있었는지까지 보이는 데 있다 -
 * 한쪽 신고가 세 건이 안 되는 평형은 값 대신 "신고 1건"이라고 적힌다. */
.complex-card {
  margin: 0 0 20px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
}

.complex-card h2 {
  margin: 0 0 10px;
  padding-bottom: 6px;
  font-size: var(--fs-h2);
}

.complex-card .table-wrap {
  margin-top: 0;
}

.complex-card .data-table {
  background: transparent;
}

/* 카드 표는 열이 일곱이고 머리글이 "실제 최고 신고 (고치기 전)"처럼 길다. 머리글까지 한 줄로 두면
 * 1280px에서도 106px 넘쳐 마지막 열이 아무 신호 없이 잘렸다(UIUX #42). 값은 그대로 한 줄, 머리글만 접는다. */
.complex-card .data-table th {
  white-space: normal;
  word-break: keep-all;
  vertical-align: bottom;
}

.complex-card .data-table th,
.complex-card .data-table td {
  padding-left: 8px;
  padding-right: 8px;
}

.complex-card .content-notice {
  margin-top: 10px;
}

/* 선택지가 서넛뿐인 조건은 칩으로 고른다.
 *
 * 셀렉트로 두면 고르는 데 세 번을 눌러야 하고, 무엇이 켜져 있는지 보려면 칸을
 * 하나씩 읽어야 한다. 칩은 한 번에 눌리고 켜진 것이 그대로 보인다. 지역(25개)과
 * 예산(29개)은 셀렉트로 남겼다 - 칩이 언제나 나은 것이 아니라 선택지가 적을 때 낫다. */
.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 4px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--muted);
  font-family: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}

.chip:hover {
  border-color: var(--accent);
  color: var(--fg);
}

.chip[aria-checked="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on);
  font-weight: 600;
}

.field-label {
  display: block;
  color: var(--muted);
  font-size: var(--fs-xs);
  margin-bottom: 4px;
}

#reset-filters {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 4px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--fg);
  font-family: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}

#reset-filters:hover {
  border-color: var(--accent);
}

/* 못 찾았을 때. 드롭다운이 그냥 사라지면 검색이 고장 난 건지, 잘못 친 건지,
 * 그런 게 없는 건지 알 수 없다 - 셋 중 무엇이든 막다른 길이다. */
.site-search-miss {
  padding: 12px 14px;
}

.site-search-miss p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.site-search-miss .miss-head {
  font-weight: 600;
  margin-bottom: 4px;
}

.site-search-miss .miss-head::after {
  content: " — 찾지 못했습니다";
  color: var(--muted);
  font-weight: 400;
}

.site-search-miss .miss-can {
  color: var(--muted);
}

.site-search-miss .miss-cannot {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: var(--fs-xs);
}

.history-card svg[role="img"] { height: auto; touch-action: none; margin-top: 0; }
.content-notice.page-notice { margin: -12px 0 20px; }

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1115;
    --fg: #eaeaea;
    --muted: #9a9a9a;
    --card: #1a1d24;
    --border: #2a2d35;
    --accent: #8aa9f0;
    --accent-on: #0f1115;
    --accent-weak: #191f2c;
    --up: #f98b84;
    --down: #62b8ff;
  }
}

@media (max-width: 520px) {
  .options {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .data-table {
    white-space: normal;
  }

  .data-table thead {
    display: none;
  }

  .data-table tr {
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
  }

  .data-table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    border: 0;
    padding: 3px 0;
    text-align: right;
  }

  .data-table td:first-child {
    font-weight: 600;
    font-size: var(--fs-lg);
    padding-bottom: 6px;
  }

  .data-table td[data-label]::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: var(--fs-xs);
    text-align: left;
    flex-shrink: 0;
  }

  .data-table td:empty {
    display: none;
  }

  .data-table tbody tr {
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
  }

  .data-table tr.detail-row td {
    display: block;
    text-align: left;
  }
}

/* 단지로 묶어 본 결과가 비었을 때 "이 조건을 풀면 n곳". 빈 화면에서 다음 걸음을 준다. */
.group-relax {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: var(--fs-sm);
}

/* 예산 장 끝의 "매물을 보러 가기 전에" 링크 묶음과 단지 카드 아래 링크(PO 검토 #33). */
.budget-more-links ul {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: var(--fs-sm);
}

.budget-more-links li {
  margin: 4px 0;
}

.card-links {
  margin: 8px 0 0;
  font-size: var(--fs-sm);
}

/* 좁은 화면에서 전망·갈아타기 표의 마지막 열이 화면 밖으로 밀렸다(PO 검토 #33). 보조 숫자는 줄을 바꾸고
 * 칸 안쪽 여백을 줄여, 판정·조사 열이 넘겨 보지 않아도 보이게 한다. */
.indicator-table td .sub {
  white-space: normal;
}

@media (max-width: 480px) {
  .outlook-table th,
  .outlook-table td,
  .indicator-table th,
  .indicator-table td {
    padding: 6px 4px;
  }
}

.indicator-table thead th,
.indicator-table .low-sample {
  white-space: normal;
}

/* 근거 표를 접어 두는 자리(UIUX #53). 결론은 접힌 것 위에 한 줄로 이미 있다. */
details.fold > summary {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  cursor: pointer;
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* 갈아타기: 두 구를 한 줄에 "[구] → [구]", 답 한 줄은 그 바로 밑 큰 글씨(UIUX #52). */
.switch-pick {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 8px;
  max-width: 32rem;
}

.switch-pick label {
  display: block;
  margin-bottom: 4px;
  font-size: var(--fs-xs);
  color: var(--muted);
}

.switch-pick select {
  width: 100%;
  min-height: var(--tap);
}

.switch-arrow {
  padding-bottom: 10px;
  color: var(--accent);
  font-weight: 700;
}

.switch-answer {
  margin: 14px 0 6px;
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.4;
}

.switch-answer:empty {
  display: none;
}

/* 단지 카드: 칸마다 큰 값 하나 + 회색 보조 줄(UIUX #51). */
.complex-price-table .sub {
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--muted);
  white-space: normal;
}

.complex-price-table .as-filed .sub {
  margin-top: 0;
}

/* 폰에서 표가 카드로 바뀌면 칸마다 "라벨 — 값" 한 줄인데, 단지 카드 칸은 큰 값 + 보조 줄이 여럿이라
 * 옆으로 늘어서면 글자가 세로로 꺾였다. 이 표만 라벨을 위에, 값과 보조 줄을 아래로 쌓는다(UIUX #51). */
@media (max-width: 560px) {
  .complex-price-table td[data-label] {
    display: block;
    text-align: left;
    padding: 4px 0;
  }

  .complex-price-table td[data-label]::before {
    display: block;
    margin-bottom: 2px;
  }

  .complex-price-table .as-filed .sub {
    display: inline;
  }

  .complex-price-table .as-filed .sub + .sub::before {
    content: " · ";
  }
}