/* ═══════════════════════════════════════════════
   main-page.css — 전국 현황 메인 페이지
   (main.css 변수 사용, card.css 의 .card 재사용)
   ═══════════════════════════════════════════════ */

/* ── 히어로 ── */
.hero { background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #f0fdf4 100%);
        padding: 48px 20px 40px; text-align: center; border-bottom: 1px solid #e2e8f0; }
.hero-inner { max-width: 640px; margin: 0 auto; }
h1.hero-title { font-size: 28px; font-weight: 800; color: #1e40af; margin: 0 0 8px; letter-spacing: -.5px; }
.hero-desc { font-size: 15px; color: #475569; margin: 0 0 24px; line-height: 1.5; }
.hero-search { position: relative; margin-bottom: 16px; }
.hero-search-input { width: 100%; padding: 14px 20px; font-size: 16px; border: 1px solid #cbd5e1;
                     border-radius: 12px; background: #fff; color: #0f172a;
                     outline: none; box-sizing: border-box; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.hero-search-input::placeholder { color: #94a3b8; }
.hero-search-input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
.hero-search-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 200;
                        background: #fff; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.15);
                        margin-top: 4px; max-height: 280px; overflow-y: auto; list-style: none; padding: 0; }
.hero-search-dropdown li { padding: 10px 12px; cursor: pointer; border-bottom: 1px solid #eee; font-size: 14px; color: #333; }
.hero-search-dropdown li:last-child { border-bottom: none; }
.hero-search-dropdown li.selected,
.hero-search-dropdown li:hover { background: #f5f5f5; }
.hero-search-dropdown li .search-type { font-size: 11px; color: #888; background: #eee;
                                         padding: 2px 6px; border-radius: 10px; margin-right: 6px; }
.hero-search-dropdown li .highlight { color: #1a73e8; font-weight: 700; }
.hero-search-dropdown li.empty-result { color: #999; cursor: default; }
.hero-search-dropdown li.empty-result:hover { background: transparent; }
.hero-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.hero-tags-label { font-size: 13px; color: #64748b; font-weight: 600;
                   display: flex; align-items: center; margin-right: 4px; }
.hero-tag { font-size: 13px; color: #1e40af; background: #fff;
            border: 1px solid #bfdbfe; border-radius: 20px; padding: 4px 14px;
            text-decoration: none; font-weight: 600; transition: all .15s; }
.hero-tag:hover { background: #eff6ff; border-color: #3b82f6; color: #1d4ed8; }

@media (max-width: 768px) {
    .hero { padding: 32px 16px 28px; }
    .hero-title { font-size: 24px; }
    .hero-desc { font-size: 14px; margin-bottom: 18px; }
    .hero-search-input { padding: 12px 16px; font-size: 15px; }
}
@media (max-width: 580px) {
    .hero { padding: 24px 12px 20px; }
    .hero-title { font-size: 20px; }
    .hero-desc { font-size: 13px; }
    .hero-tag { font-size: 12px; padding: 3px 10px; }
}

/* ── KPI 스트립 ── */
.strip { background: #0f2744; padding: 10px 20px; position: sticky; top: 61px; z-index: 100; }
.si-wrap { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; flex-wrap: wrap; }
.si { display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
      padding: 2px 20px; border-right: 1px solid rgba(255,255,255,.18); }
.si:first-child { padding-left: 0; }
.si:last-of-type { border-right: none; }
.si-lbl  { font-size: 11px; color: rgba(255,255,255,.65); font-weight: 600; letter-spacing: .2px; }
.si-row  { display: flex; align-items: baseline; gap: 4px; }
.si-val  { font-size: 18px; font-weight: 800; color: #fff; line-height: 1.1; }
.si-unit { font-size: 12px; color: rgba(255,255,255,.6); }
.si-d    { font-size: 11px; font-weight: 700; padding: 1px 5px; border-radius: 3px; }
.sd-bad  { background: rgba(239,68,68,.22); color: #fca5a5; }
.sd-dwn  { background: rgba(59,130,246,.25); color: #93c5fd; }
.sd-neu  { background: rgba(255,255,255,.1);  color: rgba(255,255,255,.65); }
.strip-dt { margin-left: auto; font-size: 12px; color: rgba(255,255,255,.5); }

/* ── 월 네비게이션 ── */
.mn-nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.mn-btn { font-size: 13px; color: #fff; padding: 3px 10px; border-radius: 4px;
          background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.25);
          text-decoration: none; line-height: 1.5; cursor: pointer; }
.mn-btn:hover { background: rgba(255,255,255,.32); border-color: rgba(255,255,255,.4); }
.mn-dis { color: rgba(255,255,255,.22); background: transparent; border-color: rgba(255,255,255,.1); cursor: default; }
.mn-cur { font-size: 13px; font-weight: 700; color: #fff; padding: 0 6px; letter-spacing: -.2px; }
.mn-select { font-size: 13px; font-weight: 700; color: #fff; background: rgba(255,255,255,.15);
             border: 1px solid rgba(255,255,255,.25); border-radius: 4px; padding: 3px 8px;
             cursor: pointer; outline: none; letter-spacing: -.2px; }
.mn-select option { color: #0f172a; background: #fff; }

/* ── 레이아웃 ── */
.mp-wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.mgrid   { display: grid; grid-template-columns: 1fr 280px; gap: 12px; padding: 12px 0 48px; }
@media (max-width: 960px) { .mgrid { grid-template-columns: 1fr; } }

/* ── 카드 헤더 (card.css 의 .card 사용, 헤더/바디만 추가) ── */
.ch  { padding: 8px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
.ct  { font-size: 15px; font-weight: 800; letter-spacing: -.3px; }
.cs  { font-size: 13px; color: var(--text-faint); }
.cm  { font-size: 13px; color: var(--primary); font-weight: 600; margin-left: auto; }

/* ── 시도 종합 테이블 ── */
.dt { width: 100%; border-collapse: collapse; font-size: 14px; }
.dt th { padding: 9px 8px; background: var(--bg); color: var(--text-faint); font-size: 13px; font-weight: 700;
         border-bottom: 2px solid var(--border); white-space: nowrap; text-align: right; }
.dt th:first-child { text-align: left; padding-left: 14px; }
.dt td { padding: 9px 8px; border-bottom: 1px solid var(--border); white-space: nowrap;
         vertical-align: middle; text-align: right; font-variant-numeric: tabular-nums; }
.dt tr:last-child td { border-bottom: none; }
.dt tr:hover td { background: #f0f9ff; cursor: pointer; }
.dt td:first-child { text-align: left; font-weight: 700; padding-left: 14px; }

/* PM2.5 강도별 색상 */
.pa { color: #16a34a; font-weight: 700; } /* ≤15 좋음 */
.pb { color: #3b82f6; font-weight: 700; } /* 16~24 보통 하 */
.pc { color: #0891b2; font-weight: 700; } /* 24~30 보통 중 */
.pd { color: #d97706; font-weight: 700; } /* 30~35 보통 상 */
.pe { color: #dc2626; font-weight: 700; } /* ≥36 나쁨 */

/* 전월 대비 화살표 */
.du { font-size: 12px; color: #dc2626; font-weight: 600; margin-left: 2px; }
.dd { font-size: 12px; color: #2563eb; font-weight: 600; margin-left: 2px; }

/* ── 테이블 반응형 ── */
@media (max-width: 960px) {
    .dt-env { display: none; } /* 기온, 강수 숨김 */
    .dt th, .dt td { padding: 8px 6px; font-size: 13px; }
    .dt td:first-child, .dt th:first-child { white-space: normal; } /* 첫 열 줄바꿈 허용 */
}
@media (max-width: 580px) {
    .dt th, .dt td { padding: 6px 4px; font-size: 12px; }
    .dt th:first-child, .dt td:first-child { padding-left: 8px; }
    .dt td, .dt th { white-space: normal; } /* 전체 줄바꿈 허용 */
}

/* ── 링크 ── */
.link { color: #2563eb; text-decoration: none; font-weight: inherit; }
.link:hover { color: #1d4ed8; text-decoration: underline; }
a.link.pa, a.link.pb, a.link.pc, a.link.pd, a.link.pe { text-decoration: none; }
a.link.pa:hover, a.link.pb:hover, a.link.pc:hover, a.link.pd:hover, a.link.pe:hover { text-decoration: underline; }
a.br-lbl.link { color: #2563eb; }
a.br-lbl.link:hover { color: #1d4ed8; }

/* ── 배지 ── */
.bdg   { display: inline-block; padding: 1px 5px; border-radius: 7px; font-size: 12px; font-weight: 700; }
.b-gd  { background: #dcfce7; color: #15803d; }
.b-nm  { background: #dbeafe; color: #1d4ed8; }
.b-bd  { background: #fef3c7; color: #92400e; }

/* ── 랭킹 4격자 ── */
.r4 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 14px; }
@media (max-width: 580px) { .r4 { grid-template-columns: 1fr; } }
.rb-hd  { font-size: 13px; font-weight: 700; padding: 6px 10px; border-radius: 6px 6px 0 0;
          border: 1px solid; border-bottom: none; }
.rb-gd  { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.rb-bd  { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.rb-bl  { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.rb-pr  { background: #faf5ff; color: #6d28d9; border-color: #e9d5ff; }
.rtbl   { width: 100%; border-collapse: collapse; border: 1px solid var(--border);
          border-radius: 0 0 6px 6px; overflow: hidden; }
.rtbl td { padding: 5px 8px; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: middle; }
.rtbl tr:last-child td { border-bottom: none; }
.rtbl tr:hover td { background: var(--bg); }
.rn   { font-size: 12px; font-weight: 800; color: var(--text-faint); width: 16px; text-align: center; }
.g1   { color: #f59e0b; }
.g2   { color: #94a3b8; }
.g3   { color: #b45309; }
.rname { font-weight: 600; }
.rpar  { font-size: 12px; color: var(--text-faint); display: block; margin-top: 1px; }
.rval  { font-weight: 700; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── 사이드바 위젯 ── */
.sw { background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
      margin-bottom: 8px; overflow: hidden; }
.sw:last-child { margin-bottom: 0; }
.swh { padding: 7px 12px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 6px; }
.swt { font-size: 14px; font-weight: 800; }
.sws { font-size: 13px; color: var(--text-faint); }

/* 날씨 이벤트 카드 */
.ev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px 12px; }
.ev-card { background: var(--bg); border-radius: 6px; padding: 8px 10px; border: 1px solid var(--border); }
.ev-lbl  { font-size: 12px; color: var(--text-faint); font-weight: 600; margin-bottom: 3px; }
.ev-val  { font-size: 22px; font-weight: 800; line-height: 1; }
.ev-unit { font-size: 13px; color: var(--text-faint); margin-left: 2px; font-weight: 400; }
.ev-sub  { font-size: 12px; color: var(--text-faint); margin-top: 3px; }
.ev-note { font-size: 13px; color: var(--text-muted); padding: 4px 12px 8px;
           border-top: 1px solid var(--border); background: var(--bg); text-align: center; }

/* 사이드바 섹션 레이블 */
.slbl { font-size: 13px; font-weight: 700; color: var(--text-faint); padding: 4px 12px 3px;
        background: var(--bg); border-top: 1px solid var(--border); letter-spacing: .3px; }

/* 미니 테이블 */
.mt { width: 100%; border-collapse: collapse; font-size: 14px; }
.mt td { padding: 5px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.mt tr:last-child td { border-bottom: none; }
.mt td.r { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.mt tr:hover td { background: var(--bg); }

/* 바 지시자 */
.br-item  { display: flex; align-items: center; gap: 6px; padding: 3px 12px; }
.br-lbl   { min-width: 44px; width: auto; font-size: 13px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.br-track { flex: 1; background: var(--bg); border-radius: 2px; height: 6px; overflow: hidden; }
.br-fill  { height: 100%; border-radius: 2px; }
.br-num   { width: 48px; font-size: 13px; font-weight: 700; text-align: right; flex-shrink: 0; }

/* 차트 래퍼 */
.ch-wrap { padding: 10px 12px; }
.ch-wrap canvas { display: block; }

/* 각주 */
.fn { font-size: 12px; color: var(--text-faint); padding: 4px 12px 8px; text-align: right;
      border-top: 1px solid var(--border); margin-top: 4px; }

/* ── PM2.5 일별 달력 셀 ── */
.cal-grid { display: grid; grid-template-columns: repeat(10,1fr); gap: 5px; padding: 12px 14px; }
.cal-cell { border-radius: 6px; padding: 6px 4px 5px; display: flex; flex-direction: column;
            align-items: center; gap: 1px; border: 1px solid transparent; }
.cal-day  { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.cal-val  { font-size: 14px; font-weight: 800; }
.cal-good  { background: #dcfce7; border-color: #bbf7d0; } .cal-good  .cal-val { color: #15803d; }
.cal-norm  { background: #dbeafe; border-color: #bfdbfe; } .cal-norm  .cal-val { color: #1d4ed8; }
.cal-bad   { background: #fef3c7; border-color: #fde68a; } .cal-bad   .cal-val { color: #b45309; }
.cal-vbad  { background: #fee2e2; border-color: #fecaca; } .cal-vbad  .cal-val { color: #991b1b; }

/* ── 섹션 구분선 ── */
.sec-sep { font-size: 12px; font-weight: 700; color: var(--text-faint); letter-spacing: .5px;
           padding: 16px 0 8px; border-top: 1px solid var(--border); margin-top: 4px; }

/* ── 그룹 헤더 ── */
.grp-hd { display: flex; align-items: center; gap: 12px; margin: 36px 0 16px; }
.grp-hd:first-child { margin-top: 24px; }
.grp-bar   { width: 4px; border-radius: 2px; flex-shrink: 0; align-self: stretch; min-height: 36px; }
.grp-title { font-size: 18px; font-weight: 800; color: var(--text-muted); line-height: 1.2; }
.grp-desc  { font-size: 13px; color: var(--text-faint); margin-top: 3px; }

/* ── 반응형 그리드 레이아웃 ── */
.flex-col       { display: flex; flex-direction: column; }
.flex-col-gap   { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.sidebar        { display: flex; flex-direction: column; height: 100%; gap: 8px; }
.card-flex      { display: flex; flex-direction: column; }
.card-flex-auto { display: flex; flex-direction: column; height: auto; }
.card-flex-1    { flex: 1; min-height: 0; display: flex; flex-direction: column; height: auto; }

.grid-2col      { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; align-items: stretch; }
.grid-2col-start { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; align-items: start; }
.grid-3col-start { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 10px; align-items: stretch; }
.grid-3col-start > .card { display: flex; flex-direction: column; }
.grid-3col-start > .card > .dt { flex: 1; }
.grid-2col-bar  { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; padding: 10px 0 6px; }
.grid-3col      { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.grid-season    { display: grid; grid-template-columns: 1fr 1px 1fr 3fr; gap: 0; padding: 0 0 4px; }
.grid-renewal   { display: grid; grid-template-columns: 1fr auto; gap: 0; flex: 1; }

.hm-wrap   { padding: 10px 20px 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hm-grid   { display: grid; grid-template-columns: 44px repeat(12,1fr); gap: 4px; margin-bottom: 4px; }
.hm-cell   { border-radius: 5px; height: 40px; display: flex; align-items: center; justify-content: center; }
.hm-lbl    { font-size: 12px; font-weight: 700; }
.hm-year   { font-size: 11px; font-weight: 700; color: var(--text-sub); display: flex; align-items: center; }
.hm-month  { text-align: center; font-size: 10px; color: var(--text-faint); font-weight: 600; }
.hm-legend { display: flex; gap: 14px; margin-top: 10px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.hm-legend-item { display: flex; align-items: center; gap: 5px; }
.hm-legend-box  { width: 16px; height: 16px; border-radius: 3px; display: inline-block; }
.hm-legend-txt  { font-size: 12px; color: #475569; }

.trend-row  { display: flex; gap: 5px; }
.trend-card { flex: 1; background: #f8fafc; border-radius: 7px; padding: 8px 4px; text-align: center; border: 1px solid #e2e8f0; }

.renewal-header { border-bottom: 1px solid var(--border); }
.renewal-header-item { padding: 12px 0; text-align: center; border-right: 1px solid var(--border); }
.renewal-bar-area { padding: 12px 14px; border-right: 1px solid var(--border);
                    display: flex; flex-direction: column; justify-content: center; }

.rent-summary { display: flex; border-top: 1px solid var(--border); }
.rent-summary-item { flex: 1; text-align: center; padding: 14px 0; }
.rent-summary-item + .rent-summary-item { border-left: 1px solid var(--border); }

@media (max-width: 768px) {
    .grid-2col, .grid-2col-start, .grid-3col-start { grid-template-columns: 1fr; }
    .grid-2col-bar  { grid-template-columns: 1fr; }
    .grid-season    { grid-template-columns: 1fr 1fr; }
    .grid-season > :nth-child(2) { display: none; } /* 구분선 숨김 */
    .grid-season > :nth-child(4) { grid-column: 1 / -1; } /* 추이 full-width */
    .sidebar   { height: auto; }
    .flex-col-gap { height: auto; }
    .si-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
    .si { padding: 4px 0; border-right: none; }
    .si:first-child { padding-left: 0; }
    .si-val { font-size: 15px; }
    .si-lbl { font-size: 10px; }
    .si-d  { font-size: 10px; }
    .mn-nav { grid-column: 1 / -1; justify-content: center; margin-left: 0; margin-top: 2px; }
    .hm-wrap { padding: 10px 12px 14px; }
    .hm-grid { grid-template-columns: 32px repeat(12,1fr); gap: 2px; min-width: 500px; }
    .hm-cell { height: 32px; }
    .hm-lbl  { font-size: 10px; }
    .hm-year { font-size: 10px; }
    .mp-wrap { padding: 0 10px; }
    .ch { flex-wrap: wrap; }
    .ct { font-size: 14px; }
    .cs { font-size: 12px; }
}
@media (max-width: 580px) {
    .si-wrap { gap: 4px 8px; }
    .si-val { font-size: 14px; }
    .si-unit { font-size: 10px; }
    .si-lbl { font-size: 9px; }
    .strip { padding: 8px 12px; }
    .grid-3col  { grid-template-columns: 1fr; }
    .renewal-header-item { border-right: none; border-bottom: 1px solid var(--border); }
    .renewal-header-item:last-child { border-bottom: none; }
    .renewal-bar-area { border-right: none; border-bottom: 1px solid var(--border); }
    .grid-season { grid-template-columns: 1fr; }
    .grid-season > :nth-child(2) { display: none; }
    .grid-season > :nth-child(3),
    .grid-season > :nth-child(4) { grid-column: 1 / -1; }
    .hm-grid { grid-template-columns: 28px repeat(12,1fr); gap: 1px; min-width: 420px; }
    .hm-cell { height: 28px; }
    .hm-lbl  { font-size: 8px; }
    .hm-month { font-size: 9px; }
    .trend-row { flex-wrap: wrap; }
    .trend-card { flex: 1 1 45%; min-width: 0; }
    .trend-card div[style*="font-size:15px"] { font-size: 13px !important; }
    .rent-summary { flex-wrap: wrap; }
    .rent-summary-item { flex: 1 1 33%; min-width: 0; }
    .grid-renewal { grid-template-columns: 1fr; }
    .ev-grid { grid-template-columns: 1fr 1fr; gap: 4px; padding: 8px 10px; }
    .ev-val { font-size: 18px; }
    .grp-title { font-size: 16px; }
    .grp-desc { font-size: 12px; }
    .dt th { font-size: 12px; padding: 7px 6px; }
    .dt td { font-size: 13px; padding: 7px 6px; }
    .br-lbl { font-size: 12px; }
}

/* ── 매매 시장 온도계 반응형 ── */
@media (max-width: 580px) {
    .grid-season > div { padding: 10px 12px !important; }
    .grid-season div[style*="font-size:40px"] { font-size: 28px !important; }
    .grid-season div[style*="font-size:15px"] { font-size: 13px !important; }
}

/* ── 미구현 플레이스홀더 ── */
.step-todo {
    background: var(--bg);
    border: 2px dashed var(--border);
    border-radius: 8px;
    padding: 28px 20px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-faint);
    margin-bottom: 10px;
    letter-spacing: .3px;
}

/* ── 매매 시장 요약 카드 (상세는 /trade) ── */
.summary-card {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    padding: 18px 22px;
    margin-bottom: 10px;
}
.summary-card-hd {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px; gap: 12px; flex-wrap: wrap;
}
.summary-card-title { font-size: 16px; font-weight: 800; color: #1e40af; }
.summary-card-cta {
    background: #1d4ed8; color: #fff; font-size: 13px; font-weight: 700;
    padding: 6px 14px; border-radius: 6px; text-decoration: none; white-space: nowrap;
}
.summary-card-cta:hover { background: #1e40af; }
.summary-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
.summary-item { display: flex; flex-direction: column; gap: 4px; }
.summary-item-lbl { font-size: 12px; color: #64748b; font-weight: 600; }
.summary-item-val { font-size: 22px; font-weight: 800; color: #1e293b; line-height: 1.1; }
.summary-item-sub { font-size: 12px; color: #475569; font-weight: 600; }
.summary-item-up { color: #dc2626; }
.summary-item-dn { color: #2563eb; }

@media (max-width: 768px) {
    .summary-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
}
@media (max-width: 580px) {
    .summary-grid { grid-template-columns: 1fr; }
    .summary-item-val { font-size: 18px; }
}

/* ── LIVE / 날짜 배지 ────────────────────────────────────────────── */
.live-badge {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    color: #fff;
    background: linear-gradient(90deg, #f97316, #ea580c);
    padding: 2px 7px;
    border-radius: 4px;
    vertical-align: middle;
    line-height: 1.6;
}
.ym-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: #1e40af;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    padding: 1px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

/* ── 일별 거래 동향 ───────────────────────────────────────────────── */
.dp-pulse-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.dp-pulse-item { padding: 16px 16px 18px; border-right: 1px solid var(--border, #e2e8f0); }
.dp-pulse-item:last-child { border-right: none; }

.dp-type { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 10px; display: flex; align-items: center; gap: 5px; }
.dp-dot  { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dp-dot-trade  { background: #2563eb; }
.dp-dot-jeonse { background: #0891b2; }
.dp-dot-wolse  { background: #7c3aed; }
.dp-dot-ban    { background: #d97706; }
.dp-lbl-trade  { color: #2563eb; }
.dp-lbl-jeonse { color: #0891b2; }
.dp-lbl-wolse  { color: #7c3aed; }
.dp-lbl-ban    { color: #d97706; }

.dp-block { margin-bottom: 10px; }
.dp-block-lbl { font-size: 10px; color: #94a3b8; font-weight: 600; letter-spacing: .3px; margin-bottom: 3px; }
.dp-main-row  { display: flex; align-items: baseline; gap: 4px; }
.dp-main-val  { font-size: 24px; font-weight: 800; color: var(--text-main, #0f172a); line-height: 1; }
.dp-main-unit { font-size: 12px; color: #64748b; }
.dp-sub-row   { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 12px; color: #64748b; }

.dp-delta     { font-size: 11px; font-weight: 700; padding: 1px 5px; border-radius: 3px; white-space: nowrap; }
.dp-delta-up  { background: #fee2e2; color: #dc2626; }
.dp-delta-dn  { background: #dbeafe; color: #1d4ed8; }
.dp-delta-neu { background: #f1f5f9; color: #64748b; }

.dp-divider   { border: none; border-top: 1px dashed var(--border, #e2e8f0); margin: 10px 0; }
.dp-stat-row  { display: flex; justify-content: space-between; align-items: center; font-size: 12px; margin-bottom: 5px; }
.dp-stat-row:last-child { margin-bottom: 0; }
.dp-stat-lbl  { color: #64748b; }
.dp-stat-val  { font-weight: 700; color: #475569; }

@media (max-width: 720px) {
    .dp-pulse-grid { grid-template-columns: repeat(2, 1fr); }
    .dp-pulse-item:nth-child(2) { border-right: none; }
    .dp-pulse-item:nth-child(1),
    .dp-pulse-item:nth-child(2) { border-bottom: 1px solid var(--border, #e2e8f0); }
}