/* Readability fixes shared by the data pages. */
.main-content { min-width: 0; }
.dashboard-card, .change-2col > *, .dash-graph { min-width: 0; box-sizing: border-box; }
.change-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.app-layout input[type="number"] {
    background: var(--input-bg) !important; color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}
.research-intro { padding: 20px 28px; gap: 24px; margin-bottom: 20px; }
.research-intro h2 { font-size: clamp(23px, 2vw, 28px); margin: 8px 0; }
.research-intro h2 br { display: none; }
.research-intro h2 span::before { content: ' '; }
.research-index { display: flex; gap: 16px; padding-left: 20px; }
.research-index > div { display: flex; flex-direction: column; padding: 0; flex: 1; }
.research-index > div + div { border-top: 0; }
.research-index small { display: none; }
.hp-filters > summary { cursor: pointer; color: var(--text-primary); font-size: 15px; font-weight: 700; }
.hp-filters > summary small { display: block; color: var(--text-secondary); margin: 8px 0; font-size: 13px; font-weight: 500; }
.hp-filters[open] > summary { margin-bottom: 20px; }
.hp-readable-card { border: 1px solid var(--border-color); border-radius: 16px; background: var(--surface-color); min-width: 0; overflow: hidden; }
.hp-readable-card > div:first-child { border: 0 !important; border-radius: 0 !important; }
#high-price-cards > .hp-readable-card { padding: 0 !important; }
.hp-readable-card span[style*="font-size: 10"], .hp-readable-card span[style*="font-size: 11"],
.hp-readable-card div[style*="font-size: 9"], .hp-readable-card div[style*="font-size: 10"],
.hp-readable-card div[style*="font-size: 11"], .hp-readable-card div[style*="font-size: 12"] { font-size: 13px !important; line-height: 1.55 !important; }
.hp-card-details { padding: 0 20px 18px; }
.hp-card-details > summary { padding: 12px 0; border-top: 1px solid var(--border-color); color: var(--accent-color); cursor: pointer; font-size: 14px; font-weight: 700; }
.hp-card-details .hp-bottom-blocks { flex-direction: column; margin-top: 12px !important; }
.hp-card-details .hp-bottom-blocks div { -webkit-line-clamp: unset !important; overflow: visible !important; white-space: normal !important; }
.hp-card-details .hp-bottom-blocks > div { padding: 12px !important; }
.hp-price-lines > div > div { flex-wrap: wrap; gap: 8px !important; }
.hp-price-lines > div > div > div { flex-wrap: wrap; justify-content: flex-end; }
.hp-price-main { font-size: 21px !important; font-variant-numeric: tabular-nums; }
.hp-price-lines { font-variant-numeric: tabular-nums; }
.hp-readable-card [style*="color: white"], .hp-readable-card [style*="color: rgb(255, 255, 255)"] { color: #172520 !important; }
@media (min-width: 769px) {
    .main-content { padding-top: calc(32px + var(--submenu-space, 0px)); }
    .hp-filters:not([open]) > :not(summary) { display: none; }
}
@media (max-width: 1100px) and (min-width: 769px) {
    #high-price-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 768px) {
    .change-2col { grid-template-columns: minmax(0, 1fr); }
    .main-content, #main-content-area, #main-content-area > div { width: 100%; min-width: 0; }
    .dash-graph { width: 100%; max-width: 100%; }
    .research-intro { padding: 18px 20px; gap: 12px; }
    .research-intro p, .research-index { display: none; }
    .research-intro h2 { font-size: 23px; }
    .hp-summary { gap: 8px !important; margin-bottom: 12px !important; }
    .hp-summary > div { flex: 1 1 100% !important; min-width: 0 !important; padding: 10px 14px !important; gap: 12px !important; }
    .hp-summary > div > div:first-child { width: 30px !important; height: 30px !important; font-size: 17px !important; flex-shrink: 0; }
    .hp-summary > div > div:last-child { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
    .hp-summary [id] { font-size: 16px !important; text-align: right; overflow-wrap: anywhere; }
    .hp-filters { padding: 16px !important; }
    .hp-filter-fields > div { min-width: 0 !important; width: 100%; flex: 1 1 100% !important; }
    .hp-filter-fields input { box-sizing: border-box; max-width: 100%; }
    .hp-filter-fields .dash-dropdown { min-width: 0 !important; width: 100%; }
    .hp-readable-card { width: 100%; box-sizing: border-box; }
}

/* ── 연식별 가격 변동 · 단지 팝업의 '계산 근거' 말풍선 ──────────────────────────
   1·3·6개월 변동률 카드(<details>)를 누르면 어느 달과 어느 달을 비교했는지 펼쳐진다.
   기본 <details> 삼각형 마커는 카드 모양을 망가뜨리므로 숨긴다(사파리는 별도 규칙 필요). */
.ms-calc > summary { list-style: none; cursor: pointer; border-radius: 10px; transition: background .15s; }
.ms-calc > summary::-webkit-details-marker { display: none; }
.ms-calc > summary::marker { content: ""; }
.ms-calc > summary:hover { background: rgba(110, 168, 254, 0.10); }
.ms-calc[open] > summary { background: rgba(110, 168, 254, 0.16); }