/* WeeklyAPT 페이지 부품 — 시장 개요·단지 추적·주간 리포트 (chrome.css 다음에 불러온다) */
body{line-height:1.5}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
table{border-collapse:collapse;width:100%}

.xs{font-size:.75rem;line-height:1rem}
.sm{font-size:.875rem;line-height:1.25rem}
.badge{font-family:var(--mono);font-size:.75rem;line-height:1rem;font-weight:600;
  padding:.125rem .5rem;border-radius:.125rem;white-space:nowrap;display:inline-block}
.badge-up{color:#22c55e;background:#22c55e1f;border:1px solid #22c55e40}
.badge-down{color:#ef4444;background:#ef44441f;border:1px solid #ef444440}
.badge-neutral{color:#94a3b8;background:#94a3b81a;border:1px solid #94a3b833}
.fbtn:focus-visible,.rep-item:focus-visible,th[tabindex]:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

main.shell{padding-top:24px;padding-bottom:24px;flex:1}
.stack{display:flex;flex-direction:column;gap:24px}
.stack-sm{display:flex;flex-direction:column;gap:16px}
.card{background:#fff;border:1px solid var(--line);border-radius:4px;padding:1rem}
.card-t{font-family:var(--mono);font-size:.75rem;line-height:1rem;font-weight:600;color:var(--muted);
  letter-spacing:.05em;margin-bottom:1rem}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px}
.grid6{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}

.stat{background:#fff;border:1px solid var(--line);border-radius:4px;padding:1rem;box-shadow:0 1px 3px rgba(0,0,0,.04);min-width:0}
.stat .l{font-family:var(--mono);font-size:.75rem;line-height:1rem;color:var(--muted);letter-spacing:.05em;margin-bottom:.5rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat .v{font-family:var(--mono);font-weight:700;font-size:1.5rem;line-height:2rem;color:var(--ink);white-space:nowrap}
.stat .s{font-family:var(--mono);font-size:.75rem;line-height:1rem;color:var(--sub);margin-top:.25rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.sbar{display:flex;height:14px;border-radius:.125rem;overflow:hidden;background:var(--line)}
.sbar>div{height:100%}
.legend{display:flex;gap:16px;margin-top:.5rem;flex-wrap:wrap}
.legend .it{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.75rem;line-height:1rem;color:var(--muted)}
.legend .sw{width:8px;height:8px;border-radius:2px}
.legend .ln{width:16px;height:2px}
.legend b{font-weight:700}

/* 차트 */
.chart{position:relative;height:220px}
.chart svg{display:block;width:100%;height:100%;overflow:visible}
.chart text{font-family:var(--mono);font-size:10px;fill:var(--ink2)}
.tip{position:absolute;pointer-events:none;background:#fff;border:1px solid var(--line);border-radius:4px;
  box-shadow:0 4px 12px rgba(0,0,0,.08);padding:.75rem;font-family:var(--mono);font-size:.75rem;line-height:1rem;
  min-width:140px;z-index:5;display:none}
.tip .h{color:var(--muted);margin-bottom:6px}
.tip .r{display:flex;justify-content:space-between;gap:12px}
.tip .r b{color:var(--ink);font-weight:600}

/* 표 */
.tbl th{font-family:var(--mono);font-size:.75rem;line-height:1rem;color:var(--ink2);font-weight:500;text-align:left;
  padding-bottom:.5rem;white-space:nowrap;border-bottom:1px solid var(--line)}
.tbl td{padding:.5rem 0;font-size:.75rem;line-height:1rem;border-bottom:1px solid var(--line2);vertical-align:middle}
.tbl td+td,.tbl th+th{padding-left:8px}
.tbl tr:last-child td{border-bottom:0}
.hov tbody tr{transition:background .1s}
.hov tbody tr:hover{background:#2563eb0a}
.nm{color:var(--ink);font-weight:500}
.rg{color:var(--sub);font-family:var(--mono)}
.pr{color:var(--ink);font-family:var(--mono);font-weight:600}
.empty{color:var(--muted);font-family:var(--mono);font-size:.75rem;padding:.75rem 0}

.note{font-family:var(--mono);font-size:.75rem;line-height:1.1rem;padding:.75rem;border-radius:4px;color:var(--sub);
  background:rgba(251,191,36,.05);border:1px solid rgba(251,191,36,.15)}
.note b{color:var(--amber);font-weight:600}
.skel{color:var(--muted);font-family:var(--mono);font-size:.75rem}

@media (max-width:1180px){ .grid6{grid-template-columns:repeat(3,1fr)} }
@media (max-width:900px){ .grid2{grid-template-columns:1fr} }
@media (max-width:720px){
  main.shell{padding-top:16px}
  .grid6,.grid4{grid-template-columns:repeat(2,1fr)}
  .stat .v{font-size:1.25rem}
}