@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

:root {
  --bg: #F4F6F8;
  --surface: #FFFFFF;
  --border: #E1E6EB;
  --text: #16233A;
  --text-muted: #4A5A6E;
  --accent-pos: #0F6E5C;
  --accent-neg: #B23B3B;
  --price-up: #C23B3B;   /* 국내 증시 관행: 상승 = 빨강 */
  --price-down: #3B73D1; /* 국내 증시 관행: 하락 = 파랑 */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

h1, h2, h3 { margin: 0; line-height: 1.3; font-weight: 800; letter-spacing: -0.02em; }

.page {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 20px 80px;
}

/* 표가 많은 페이지(트리플크라운, 스크리너 등)는 더 넓게 써요 */
.page.wide {
  max-width: 1180px;
}

/* 상단 네비게이션 */
.site-nav {
  display: flex;
  gap: 20px;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.site-nav a {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--text);
}

/* 국내증시 홈 대시보드 */
.dashboard-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin: 8px 0 22px;
  padding: 34px 36px 38px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 85% 10%, rgba(117, 218, 191, 0.22), transparent 28%),
    linear-gradient(120deg, #102f3a 0%, #174f55 58%, #17665e 100%);
  box-shadow: 0 12px 30px rgba(16, 47, 58, 0.16);
}

.dashboard-hero::after {
  position: absolute;
  right: -70px;
  bottom: -110px;
  width: 280px;
  height: 280px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  content: "";
  box-shadow: 0 0 0 26px rgba(255, 255, 255, 0.035), 0 0 0 52px rgba(255, 255, 255, 0.025);
}

.dashboard-hero > * {
  position: relative;
  z-index: 1;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--accent-pos);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.dashboard-title {
  margin: 0;
  color: #fff;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.dashboard-sub {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
}

.dashboard-primary-link {
  flex: 0 0 auto;
  padding: 12px 16px;
  border-radius: 8px;
  background: #d8f5e9;
  color: #0d5549;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}

.dashboard-primary-link:hover {
  background: #fff;
  transform: translateY(-2px);
}

.market-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 40px;
}

.summary-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 126px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(22, 35, 58, 0.04);
}

.summary-card::after {
  position: absolute;
  right: -18px;
  bottom: -30px;
  width: 86px;
  height: 86px;
  border: 16px solid rgba(15, 110, 92, 0.07);
  border-radius: 50%;
  content: "";
}

.summary-label, .summary-note { color: var(--text-muted); font-size: 12px; }
.summary-value { font-family: "SFMono-Regular", Consolas, monospace; font-size: 29px; font-weight: 800; letter-spacing: -0.02em; }
.summary-value small { margin-left: 3px; font-family: inherit; font-size: 13px; font-weight: 400; }
.summary-note { margin-top: auto; font-weight: 500; }
.summary-note a { color: inherit; text-decoration: none; }
.summary-note a:hover { color: var(--text); }
.summary-value.caution { color: #b06b16; font-size: 21px; }
.summary-value.down { color: var(--accent-neg); }
.summary-value.price-up { color: var(--price-up); }
.summary-value.price-down { color: var(--price-down); }
.market-summary-card { border-top: 3px solid #e09a45; background: linear-gradient(145deg, var(--soft-orange), #FFFFFF 65%); }

.summary-label { display: flex; align-items: center; font-weight: 600; }
.market-summary-card::after { border-color: rgba(224, 154, 69, 0.12); }
.live-updated { color: var(--text-muted); font-size: 12px; }

/* 대시보드 "시장의 흐름, 한눈에" */
.flow-source { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.flow-source.is-live { background: #FDECEC; color: var(--price-up); }
.flow-source.is-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--price-up); animation: flow-pulse 1.6s ease-in-out infinite; }
.flow-source.is-db { background: #EEF2F6; color: var(--text-muted); }
@keyframes flow-pulse { 50% { opacity: 0.25; } }
.flow-stamp { color: var(--text-muted); font-size: 11px; font-weight: 500; }
.flow-index .flow-stamp { flex-basis: 100%; font-family: inherit; }
.flow-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; }
.flow-card { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 4px 12px rgba(22, 35, 58, 0.04); }
.flow-card-total { order: -1; background: linear-gradient(145deg, #F6F8FB, #FFFFFF 70%); }
.flow-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.flow-card-head strong { font-size: 16px; font-weight: 800; }
.flow-card-head span { color: var(--text-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; }
.flow-index { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.flow-index b { font-family: "SFMono-Regular", Consolas, monospace; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.flow-index span { font-family: "SFMono-Regular", Consolas, monospace; font-size: 13px; font-weight: 700; }
.flow-index-empty b, .flow-index-empty span { color: var(--text-muted); }
.flow-verdict { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; }
.flow-bar { display: flex; height: 8px; overflow: hidden; border-radius: 4px; background: #EEF2F6; }
.flow-bar i { display: block; height: 100%; }
.flow-bar-up { background: var(--price-up); }
.flow-bar-flat { background: #C9D1DB; }
.flow-bar-down { background: var(--price-down); }
.flow-counts { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--text-muted); font-size: 13px; font-weight: 600; }
.flow-counts b { font-family: "SFMono-Regular", Consolas, monospace; font-weight: 800; }
.flow-foot { color: var(--text-muted); font-size: 11.5px; }
.flow-foot a { color: inherit; text-decoration: none; }
.flow-foot a:hover { color: var(--text); }

/* 급등락 TOP10 칸은 거래량 지도 칸 높이에 맞춰요. height: 0 + min-height: 100%로
   TOP10 칸이 줄 높이 계산에서 빠지게 해서, 지도 칸이 정한 높이 안에 10개 행을 고르게 나눠 담아요 */
.flow-panels { display: grid; grid-template-columns: 5fr 7fr; gap: 14px; align-items: stretch; margin-bottom: 22px; }
.flow-panel-movers { height: 0; min-height: 100%; }
.flow-panel-movers .flow-movers:not([hidden]) { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.flow-panel-movers .flow-movers li { flex: 1; min-height: 0; padding: 0; overflow: hidden; }
.flow-panel-movers .flow-movers a { line-height: 1.2; }
.flow-panel { display: flex; flex-direction: column; min-width: 0; padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 4px 12px rgba(22, 35, 58, 0.04); }
.flow-panel-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.flow-panel-head h3 { margin: 0 auto 0 0; font-size: 17px; }
.flow-toggle { display: inline-flex; padding: 3px; border-radius: 8px; background: #EEF2F6; }
.flow-toggle button { padding: 5px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text-muted); cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; }
.flow-toggle button:hover { color: var(--text); transform: none; filter: none; }
.flow-toggle button.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(22, 35, 58, 0.12); }
.flow-movers { margin: 0; padding: 0; list-style: none; }
.flow-movers li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto 76px; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.flow-movers li:last-child { border-bottom: 0; }
.flow-movers li.flow-empty { display: block; color: var(--text-muted); font-size: 13px; }
.flow-rank { color: var(--text-muted); font-family: "SFMono-Regular", Consolas, monospace; font-weight: 800; }
.flow-movers a { overflow: hidden; color: var(--text); font-weight: 700; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.flow-movers a:hover { text-decoration: underline; }
.flow-movers a small { display: block; color: var(--text-muted); font-size: 11px; font-weight: 500; }
.flow-price, .flow-chg { font-family: "SFMono-Regular", Consolas, monospace; font-weight: 700; text-align: right; }
.flow-more { align-self: flex-start; margin-top: auto; padding-top: 10px; color: var(--text-muted); font-size: 12.5px; font-weight: 700; text-decoration: none; }
.flow-more:hover { color: var(--text); }
.flow-map { position: relative; height: 380px; overflow: hidden; border-radius: 10px; background: #1B222C; }
.flow-tile { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15em; padding: 4px; overflow: hidden; border: 2px solid #1B222C; border-radius: 6px; color: #fff; text-align: center; text-decoration: none; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); transition: filter 0.12s ease; }
.flow-tile strong { max-width: 100%; overflow: hidden; font-size: 1em; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; text-overflow: ellipsis; white-space: nowrap; }
.flow-tile span { font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.86em; font-weight: 700; opacity: 0.95; }
.flow-tile-small span { display: none; }
.flow-tile-tiny strong, .flow-tile-tiny span { display: none; }
.flow-tile:hover { z-index: 1; filter: brightness(1.15); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85); }
.flow-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px; color: var(--text-muted); font-size: 11.5px; font-weight: 700; }
.flow-legend-scale { display: inline-flex; gap: 2px; }
.flow-legend-scale i { display: block; width: 18px; height: 10px; border-radius: 2px; }
.flow-legend em { margin-left: auto; font-style: normal; font-weight: 500; }
.flow-panel-sub { margin-left: 4px; color: var(--text-muted); font-size: 12px; font-weight: 700; }
.flow-sectors-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 10px; }
.flow-sectors-head h3 { margin: 0; font-size: 17px; }
.flow-sectors-head p { margin: 0; color: var(--text-muted); font-size: 12px; }
.flow-sectors { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.flow-sector { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 13px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; color: var(--text); text-decoration: none; transition: border-color 0.15s ease, transform 0.15s ease; }
.flow-sector:hover { border-color: var(--text-muted); transform: translateY(-2px); }
.flow-sector > span { color: var(--text-muted); font-size: 10.5px; font-weight: 700; }
.flow-sector strong { overflow: hidden; font-size: 14px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.flow-sector b { font-family: "SFMono-Regular", Consolas, monospace; font-size: 19px; font-weight: 800; }
.flow-sector small { color: var(--text-muted); font-size: 11px; }

@media (max-width: 900px) {
  .flow-panels { grid-template-columns: 1fr; }
  /* 위아래로 쌓이는 좁은 화면에서는 높이를 맞출 필요가 없어서 목록이 원래 높이대로 보여요 */
  .flow-panel-movers { height: auto; min-height: 0; }
  .flow-panel-movers .flow-movers li { flex: none; padding: 9px 0; }
  /* 좁은 화면에서는 옆으로 밀지 않아도 6개가 다 보이게 3칸 × 2줄로 접어요 */
  .flow-sectors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .flow-cards { grid-template-columns: repeat(2, 1fr); }
  .flow-map { height: 300px; }
}
@media (max-width: 480px) {
  .flow-cards { grid-template-columns: 1fr; }
  .flow-sectors { gap: 6px; }
  .flow-sector { gap: 2px; padding: 10px 8px; }
  .flow-sector > span { display: none; }
  .flow-sector strong { font-size: 12.5px; line-height: 1.25; white-space: normal; word-break: keep-all; }
  .flow-sector b { font-size: 15px; }
  .flow-sector small { font-size: 10px; }
  .flow-movers li { grid-template-columns: 20px minmax(0, 1fr) 68px; }
  .flow-price { display: none; }
}
.data-note, .data-fallback { margin: -4px 0 14px; color: var(--text-muted); font-size: 13px; line-height: 1.6; }
.data-fallback { padding: 18px; background: var(--surface); border: 1px dashed var(--border); border-radius: 10px; }
.breadth-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.breadth-card { display: flex; flex-direction: column; gap: 9px; padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.breadth-card > strong { font-size: 13px; color: var(--text-muted); }
.breadth-ratio { font-family: "SFMono-Regular", Consolas, monospace; font-size: 26px; font-weight: 700; }
.breadth-counts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-family: "SFMono-Regular", Consolas, monospace; font-size: 12px; }
.breadth-counts em { font-style: normal; font-weight: 700; }
.breadth-counts small { color: var(--text-muted); }

.risk-result { margin-bottom: 20px; padding: 28px; border: 1px solid var(--border); border-radius: 12px; }
.risk-result strong { display: block; margin: 8px 0; font-size: 30px; }
.risk-result p { margin: 0; color: var(--text-muted); font-size: 13px; }
.risk-kicker { color: var(--text-muted); font-size: 12px; }
.risk-normal { background: #eaf7f2; border-color: #b7dfd4; }
.risk-normal strong { color: var(--accent-pos); }
.risk-caution { background: #fff7e8; border-color: #f0d49b; }
.risk-caution strong { color: #b06b16; }
.risk-panic { background: #fff0f0; border-color: #edbcbc; }
.risk-panic strong { color: var(--accent-neg); }
.risk-rules { display: grid; gap: 12px; padding: 0; margin: 0; list-style: none; }
.risk-rules li { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border); font-size: 13px; }
.risk-rules li:last-child { padding-bottom: 0; border-bottom: 0; }
.risk-rules span { color: var(--text-muted); }

.dashboard-section { margin-bottom: 42px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 14px; }
.section-heading h2 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -0.025em; }
.section-heading > a { color: var(--text-muted); font-size: 12px; text-decoration: none; }
.section-heading > a:hover { color: var(--text); }
.tool-search { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; color: var(--text-muted); font-size: 12px; }
.tool-search input { flex: 1; max-width: 360px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); font: inherit; }
.tool-search-empty { padding: 24px; color: var(--text-muted); text-align: center; background: var(--surface); border: 1px dashed var(--border); border-radius: 10px; }

/* 이용약관 등 법적 고지 페이지의 목록 */
.legal-list { margin: 8px 0 0; padding-left: 20px; color: var(--text-muted); font-size: 13px; line-height: 1.7; }

/* 대시보드 맨 아래 "소개" 줄 - 다른 분류처럼 카드로 꾸미지 않고 조용한 텍스트 링크로만 */
.site-info-row { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--border); }
.site-info-row a { padding: 4px 0; color: var(--text-muted); font-size: 12.5px; font-weight: 500; text-decoration: none; }
.site-info-row a:hover { color: var(--text); text-decoration: underline; }

.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tool-card { display: flex; flex-direction: column; min-height: 190px; padding: 20px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; text-decoration: none; box-shadow: 0 4px 12px rgba(22, 35, 58, 0.035); transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; }
.tool-card:hover { border-color: var(--accent-pos); transform: translateY(-2px); }
.tool-card:hover { box-shadow: 0 10px 22px rgba(22, 35, 58, 0.08); }
.tool-card-featured { background: linear-gradient(145deg, #e5f7f1 0%, #f6fbf8 100%); border-color: #b7dfd4; }
.tool-card:nth-child(2) { border-top: 3px solid #4d8fe8; }
.tool-card:nth-child(3) { border-top: 3px solid #8c6dde; }
.tool-card:nth-child(4) { border-top: 3px solid #e09a45; }
.tool-card:nth-child(5) { border-top: 3px solid #dc6b83; }
.tool-kicker { margin-bottom: 12px; color: var(--accent-pos); font-size: 11px; font-weight: 800; letter-spacing: 0.03em; }
.tool-card strong { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.tool-card p { flex: 1; margin: 9px 0 16px; color: var(--text-muted); font-size: 13.5px; line-height: 1.6; }
.tool-action { color: var(--accent-pos); font-size: 12px; font-weight: 800; }

@media (max-width: 760px) {
  .dashboard-hero { display: block; padding: 28px 24px 30px; }
  .dashboard-primary-link { display: inline-block; margin-top: 20px; }
  .dashboard-title { font-size: 26px; }
  .market-summary-grid { grid-template-columns: repeat(2, 1fr); }
  .tool-grid { grid-template-columns: repeat(2, 1fr); }
  .breadth-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .market-summary-grid, .tool-grid { grid-template-columns: 1fr; }
  .risk-rules li { display: block; }
  .risk-rules span { display: block; margin-top: 4px; }
}

/* 목록 페이지로 돌아가는 링크 */
.back-link {
  display: inline-block;
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
}

.back-link:hover {
  color: var(--text);
}

/* 관심 종목 리스트 페이지 */
.list-header {
  margin-bottom: 24px;
}

.list-title {
  margin: 0;
  font-size: 23px;
  font-weight: 800;
}

.list-sub {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

.list-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s ease;
}

.list-item:hover {
  border-color: var(--accent-pos);
}

.list-item-top {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.list-item-code {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  color: var(--text-muted);
}

.list-item-name {
  font-size: 15px;
  font-weight: 600;
}

.list-item-bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.list-item-price {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 16px;
  font-weight: 700;
}

.list-item-price .won {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 1px;
}

.list-item-change {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.list-item-change.up { color: var(--accent-pos); }
.list-item-change.down { color: var(--accent-neg); }
.list-item-change.price-up { color: var(--price-up); }
.list-item-change.price-down { color: var(--price-down); }
.watchlist-add-card { margin-bottom: 14px; }
.watchlist-add-form { display: flex; gap: 8px; }
.watchlist-add-form input { flex: 1; min-width: 0; }
.watchlist-add-form .stock-search-wrap { flex: 1; min-width: 0; }

/* 종목 자동완성·초성검색 드롭다운 - stock-search.js가 붙여줘요 */
.stock-search-wrap { position: relative; width: 100%; }
.stock-search-wrap input { width: 100%; }
.stock-search-list {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 260px;
  margin: 0;
  padding: 6px;
  list-style: none;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(22, 35, 58, 0.14);
}
.stock-search-list li {
  padding: 9px 10px;
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}
.stock-search-list li:hover,
.stock-search-list li.active {
  background: var(--page-soft, var(--soft-blue));
  color: var(--page-accent, var(--accent-blue));
}
.watchlist-add-form button, .watchlist-remove-form button { border: 0; border-radius: 6px; background: var(--text); color: #fff; cursor: pointer; font: inherit; font-size: 12px; padding: 9px 14px; }
.watchlist-remove-form button { background: transparent; color: var(--text-muted); padding: 4px 0 4px 8px; }
.watchlist-remove-form button:hover { color: var(--accent-neg); }
.quick-add-form button { border: 0; border-radius: 6px; background: var(--accent-pos); color: #fff; cursor: pointer; font: inherit; font-size: 12px; padding: 7px 12px; white-space: nowrap; }
.quick-add-form button:hover { filter: brightness(1.08); }

/* 헤더 */
.hero {
  margin-bottom: 32px;
}

.hero-id {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.hero-code {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 14px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.hero-name {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
}

.hero-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 12px;
}

.price {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.price .won {
  font-size: 20px;
  font-weight: 400;
  margin-left: 2px;
  color: var(--text-muted);
}

.change {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted);
}

.change.up { color: var(--accent-pos); }
.change.down { color: var(--accent-neg); }
.change.price-up { color: var(--price-up); }
.change.price-down { color: var(--price-down); }

/* 범용 강조 색상 - 어떤 요소에든 up/down 클래스를 붙이면 적용돼요.
   (좋음/나쁨 같은 일반적인 의미용이에요 - 예: 저평가 PER, F-Score, 시장 정상/공황 상태) */
.up { color: var(--accent-pos); }
.down { color: var(--accent-neg); }
.warn { color: #b06b16; }
.up.strong, .warn.strong { font-weight: 700; }

/* 가격·수익률 등락 전용 색상 - 국내 증시 관행대로 상승은 빨강, 하락은 파랑이에요.
   PER·F-Score처럼 방향성이 없는 "좋음/나쁨" 지표는 위의 up/down을 그대로 써요. */
.price-up { color: var(--price-up); }
.price-down { color: var(--price-down); }
.price-up.strong, .price-down.strong { font-weight: 700; }

.hero-date {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}

.naver-link {
  margin-left: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(3, 199, 90, 0.12);
  color: #03994a;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.naver-link:hover {
  background: rgba(3, 199, 90, 0.2);
}

/* 카드 */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(22, 35, 58, 0.05), 0 1px 2px rgba(22, 35, 58, 0.03);
}

.card-title {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-muted);
}

canvas {
  width: 100%;
  height: auto;
  display: block;
}

/* 표 */
.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.45;
}

th, td {
  text-align: right;
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

th:first-child, td:first-child {
  text-align: left;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;
  color: var(--text-muted);
}

th {
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  border-bottom: 1px solid var(--border);
}

/* 클릭해서 정렬할 수 있는 헤더 - sortable-table.js가 붙여줘요 */
th.sortable-th {
  cursor: pointer;
  user-select: none;
}

th.sortable-th:hover {
  color: var(--text);
}

th.sortable-th::after {
  content: "⇅";
  margin-left: 5px;
  font-size: 10px;
  opacity: 0.35;
}

th.sortable-th:hover::after {
  opacity: 0.7;
}

th.sortable-th.sort-asc::after,
th.sortable-th.sort-desc::after {
  color: var(--page-accent, var(--accent-blue));
  opacity: 1;
}

th.sortable-th.sort-asc::after {
  content: "▲";
}

th.sortable-th.sort-desc::after {
  content: "▼";
}

tbody tr:nth-child(even) {
  background: rgba(22, 35, 58, 0.015);
}

tbody tr:hover {
  background: rgba(15, 110, 92, 0.05);
}

.close-cell {
  font-weight: 600;
}

/* 뉴스 섹션 */
.news-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

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

.news-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.news-list a {
  color: var(--text);
  font-size: 14px;
  text-decoration: none;
  line-height: 1.5;
}

.news-list a:hover {
  color: var(--accent-pos);
}

.news-empty {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

/* 재무지표 섹션 */
.fundamental-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.fundamental-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fundamental-label {
  font-size: 12px;
  color: var(--text-muted);
}

.fundamental-value {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 17px;
  font-weight: 700;
}

.fundamental-value .unit {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 1px;
}

.fundamental-note {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
}

.valuation-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-pos);
  text-decoration: none;
}

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

/* 계산기 입력 폼 */
.calc-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.calc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.calc-field span {
  font-size: 12px;
  color: var(--text-muted);
}

.calc-field input,
.calc-field select {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
}

.calc-field input:focus,
.calc-field select:focus {
  outline: none;
  border-color: var(--accent-pos);
}

@media (max-width: 480px) {
  .calc-form {
    grid-template-columns: 1fr;
  }
}

.calc-form-wide {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 800px) {
  .calc-form-wide {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .calc-form-wide {
    grid-template-columns: 1fr;
  }
}

/* 트리플크라운 전략 설명 카드 */
.strategy-intro {
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
}

.strategy-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

.strategy-pillar {
  border: 1px solid var(--border);
  border-top: 3px solid var(--border);
  border-radius: 10px;
  padding: 18px 14px;
  text-align: center;
}

.pillar-value {
  background: rgba(37, 99, 235, 0.06);
  border-top-color: #2563EB;
}

.pillar-supply {
  background: rgba(124, 58, 237, 0.06);
  border-top-color: #7C3AED;
}

.pillar-chart {
  background: rgba(217, 119, 6, 0.06);
  border-top-color: #D97706;
}

.pillar-icon {
  font-size: 30px;
  display: block;
  margin-bottom: 8px;
}

.pillar-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
}

.pillar-value .pillar-title { color: #2563EB; }
.pillar-supply .pillar-title { color: #7C3AED; }
.pillar-chart .pillar-title { color: #D97706; }

.pillar-desc {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

.strategy-caveat {
  margin: 0;
  padding: 12px 14px;
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg);
  border-left: 3px solid var(--accent-neg);
  border-radius: 6px;
}

@media (max-width: 480px) {
  .strategy-pillars {
    grid-template-columns: 1fr;
  }
}

/* 현재가 옆 등락률 배지 */
.price-change {
  display: inline-block;
  margin-left: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}

.price-change.up { color: var(--accent-pos); }
.price-change.down { color: var(--accent-neg); }
.price-change.price-up { color: var(--price-up); }
.price-change.price-down { color: var(--price-down); }

/* 종합점수 배지 */
.score-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.score-badge.score-high { background: var(--accent-pos); }
.score-badge.score-mid { background: #D97706; }
.score-badge.score-low { background: var(--text-muted); }

.score-verdict {
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-muted);
}

/* 트리플크라운 결과 표 전용 색상 */
.stock-link,
.tc-name {
  color: #2563EB;
  font-weight: 600;
  text-decoration: none;
}

.stock-link:hover,
.tc-name:hover {
  text-decoration: underline;
}

.tc-price {
  color: var(--text);
  font-weight: 600;
}

.tc-net-buy {
  color: var(--accent-neg);
  font-weight: 700;
}

/* 3박자 스크리너 - 추천 종목이 10개보다 적을 때 이유 안내 */
.tc-shortfall { margin-bottom: 14px; padding: 12px 14px; border-left: 3px solid #D99A2B; border-radius: 6px; background: #FFF8EC; font-size: 13px; }
.tc-shortfall strong { display: block; margin-bottom: 4px; font-size: 14px; }
.tc-shortfall ul { margin: 0; padding-left: 18px; color: var(--text-muted); line-height: 1.65; }

/* 용어 설명 목록 */
.glossary {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.glossary-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.glossary-term {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.glossary-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* 조건 실행 버튼 */
.run-button {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding: 12px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--accent-pos);
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.run-button:hover {
  opacity: 0.9;
}

.run-button:disabled,
.run-button.is-loading {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 실시간 검색창 */
.search-box {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
}

.search-box:focus {
  outline: none;
  border-color: var(--accent-pos);
}

/* 공통 가독성 테마 */
:root {
  --accent-blue: #3B73D1;
  --accent-purple: #7957C7;
  --accent-orange: #D4872C;
  --soft-blue: #EEF4FF;
  --soft-purple: #F4F0FF;
  --soft-orange: #FFF6E9;
  --accent-brown: #9C6436;  /* 부동산 영역 대표 색 */
  --soft-brown: #F7EEE6;
}

/* 페이지별 섹션 색 - 상단 메뉴에서 클릭한 분류 색(파랑/초록/보라/주황/회색)이
   히어로·카드·버튼·표 안까지 그대로 이어지게 해요. 어느 섹션에 들어와 있는지
   한눈에 보이도록. app.py의 page_theme(현재 페이지가 속한 메뉴 그룹 색)로 정해져요. */
.page-theme-blue   { --page-accent: var(--accent-blue);   --page-soft: var(--soft-blue); }
.page-theme-green  { --page-accent: var(--accent-pos);    --page-soft: #E7F6F1; }
.page-theme-purple { --page-accent: var(--accent-purple); --page-soft: var(--soft-purple); }
.page-theme-orange { --page-accent: var(--accent-orange); --page-soft: var(--soft-orange); }
.page-theme-gray   { --page-accent: #5B6B7C;               --page-soft: #EEF1F4; }
.page-theme-brown  { --page-accent: var(--accent-brown);  --page-soft: var(--soft-brown); }

body {
  background:
    radial-gradient(circle at 0% 0%, rgba(69, 129, 218, 0.05), transparent 28rem),
    var(--bg);
}

.site-nav {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  padding: 10px 0 16px;
}

.site-nav a {
  padding: 5px 2px;
  transition: color 0.15s ease;
}

.site-nav > a:first-child {
  color: var(--accent-pos);
}

.back-link {
  color: var(--accent-blue);
  font-weight: 600;
}

.back-link:hover {
  color: var(--accent-pos);
}

.list-header {
  position: relative;
  padding: 8px 0 10px 18px;
  border-left: 4px solid var(--page-accent, var(--accent-blue));
}

.list-header .eyebrow {
  color: var(--page-accent, var(--accent-blue));
}

.list-title {
  color: #122746;
  font-size: 30px;
  letter-spacing: -0.045em;
}

.list-sub {
  line-height: 1.6;
}

.hero {
  position: relative;
  padding: 16px 20px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--page-accent, var(--accent-blue)) 9%, white),
    color-mix(in srgb, var(--page-accent, var(--accent-blue)) 3%, white));
  border: 1px solid color-mix(in srgb, var(--page-accent, var(--accent-blue)) 24%, white);
}

.hero-code {
  color: var(--page-accent, var(--accent-blue));
  font-weight: 700;
}

.hero-name {
  color: #122746;
}

.hero-date {
  color: #60738B;
}

.card {
  border-color: #DCE4ED;
  box-shadow: 0 6px 18px rgba(31, 55, 84, 0.055);
}

.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #314B68;
}

.card-title::before {
  display: inline-block;
  width: 4px;
  height: 16px;
  border-radius: 4px;
  background: var(--page-accent, var(--accent-blue));
  content: "";
}

.calc-form {
  gap: 14px;
}

.calc-field span {
  color: #415A75;
  font-weight: 600;
}

input,
select,
.calc-field input,
.calc-field select {
  min-height: 40px;
  border: 1px solid #CBD8E6;
  border-radius: 8px;
  background: #FBFDFF;
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

input:focus,
select:focus,
.calc-field input:focus,
.calc-field select:focus {
  outline: none;
  border-color: var(--page-accent, var(--accent-blue));
  background: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--page-accent, var(--accent-blue)) 14%, transparent);
}

button,
.run-button,
.form-submit {
  transition: transform 0.15s ease, filter 0.15s ease;
}

button:hover,
.run-button:hover,
.form-submit:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
}

.form-submit,
.run-button {
  background: linear-gradient(135deg, var(--page-accent, var(--accent-blue)), color-mix(in srgb, var(--page-accent, var(--accent-blue)) 72%, black));
  box-shadow: 0 5px 12px color-mix(in srgb, var(--page-accent, var(--accent-blue)) 35%, transparent);
}

.fundamental-item {
  padding: 13px 14px;
  border-radius: 8px;
  background: linear-gradient(145deg, #F7FAFD, #EEF4FA);
}

.fundamental-label {
  color: #60738B;
}

.fundamental-value {
  color: #183552;
}

table thead {
  background: var(--page-soft, #EEF4FB);
}

th {
  color: var(--text-muted);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.02em;
}

tbody tr:nth-child(even) {
  background: rgba(59, 115, 209, 0.025);
}

tbody tr:hover {
  background: #EEF5FF;
}

.stock-link,
.valuation-link {
  color: var(--page-accent, var(--accent-blue));
  font-weight: 700;
}

.stock-link:hover,
.valuation-link:hover {
  color: var(--accent-pos);
}

.list-item {
  border-left: 4px solid color-mix(in srgb, var(--page-accent, var(--accent-blue)) 32%, white);
  box-shadow: 0 4px 12px rgba(31, 55, 84, 0.035);
}

.list-item:hover {
  border-color: var(--page-accent, var(--accent-blue));
  background: color-mix(in srgb, var(--page-accent, var(--accent-blue)) 4%, white);
}

.list-item-code {
  color: var(--page-accent, var(--accent-blue));
  font-weight: 700;
}

.data-note,
.fundamental-note {
  line-height: 1.55;
}

.tool-card:nth-child(2) {
  background: linear-gradient(145deg, #F1F6FF, #FFFFFF);
}

.tool-card:nth-child(3) {
  background: linear-gradient(145deg, #F6F2FF, #FFFFFF);
}

.tool-card:nth-child(4) {
  background: linear-gradient(145deg, #FFF8EE, #FFFFFF);
}

.tool-card:nth-child(5) {
  background: linear-gradient(145deg, #FFF2F5, #FFFFFF);
}

.breadth-card:nth-child(1) {
  border-top: 3px solid var(--accent-blue);
  background: linear-gradient(145deg, #F1F6FF, #FFFFFF);
}

.breadth-card:nth-child(2) {
  border-top: 3px solid var(--accent-purple);
  background: linear-gradient(145deg, #F7F3FF, #FFFFFF);
}

.watchlist-add-card {
  border-top: 3px solid var(--accent-pos);
}

.watchlist-add-form button {
  background: linear-gradient(135deg, #15836D, #0F6E5C);
}

.search-box,
.tool-search input {
  background: rgba(255, 255, 255, 0.9);
  border-color: #CBD8E6;
}

/* 맨 위 영역 탭 - 홈 · 국내증시 · 부동산, 오른쪽에 공통 "소개" 메뉴 */
.area-nav { position: relative; z-index: 40; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.area-tab { padding: 8px 15px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-muted); font-size: 14px; font-weight: 800; text-decoration: none; transition: color 0.15s ease, border-color 0.15s ease; }
.area-tab:hover { border-color: var(--text-muted); color: var(--text); }
.area-tab.active { border-color: transparent; color: #fff; }
.area-home.active { background: var(--text); }
/* 사이트 이름 "아(파트) 주(식) 머니(money) 갤러리" - 괄호 속 글자는 작게 해서 "아주머니 갤러리"가 먼저 읽히게 해요 */
.brand-title small { font-size: 0.68em; font-weight: 600; opacity: 0.75; }
.area-stock.active { background: var(--accent-pos); }
.area-realestate.active { background: var(--accent-brown); }
.area-info { margin-left: auto; }
.area-info .nav-menu { right: 0; left: auto; border-radius: 10px 0 10px 10px; }
.area-nav .nav-menu a { display: flex; align-items: center; padding: 10px 11px; border-radius: 6px; color: var(--text); font-size: 14px; font-weight: 500; text-decoration: none; }
.area-nav .nav-menu a:hover, .area-nav .nav-menu a.current { background: #F2F6FB; color: var(--group-color); }
.site-nav.site-nav-stock > .nav-home { color: var(--accent-pos); }
.site-nav.site-nav-realestate > .nav-home { color: var(--accent-brown); }

/* 통합 홈 - 국내증시와 부동산 요약을 나란히 */
.home-hero { background: radial-gradient(circle at 85% 10%, rgba(255, 214, 170, 0.22), transparent 30%), linear-gradient(120deg, #102f3a 0%, #174f55 55%, #6b4a2e 100%); }
.home-areas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 36px; }
.home-area { --area-color: var(--accent-pos); display: flex; flex-direction: column; gap: 14px; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--area-color); border-radius: 14px; box-shadow: 0 4px 12px rgba(22, 35, 58, 0.04); }
.home-area-realestate { --area-color: var(--accent-brown); }
.home-area-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.home-area-head h2 { margin: 0; font-size: 22px; }
.home-area-head .eyebrow { color: var(--area-color); }
.home-index-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.home-index { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 10px; background: #F6F8FB; }
.home-index span { color: var(--text-muted); font-size: 12px; font-weight: 700; }
.home-index b { font-family: "SFMono-Regular", Consolas, monospace; font-size: 22px; font-weight: 800; }
.home-index em { font-family: "SFMono-Regular", Consolas, monospace; font-size: 12.5px; font-style: normal; font-weight: 700; }
.home-breadth { display: flex; flex-direction: column; gap: 8px; }
.home-movers h3 { margin: 0 0 6px; font-size: 14px; }
.home-movers ol { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.home-movers li { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.home-movers a { color: var(--text); font-weight: 700; text-decoration: none; }
.home-movers span { font-family: "SFMono-Regular", Consolas, monospace; font-weight: 700; }
.home-placeholder { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 16px; border: 1px dashed #D8C3AE; border-radius: 10px; background: var(--soft-brown); }
.home-placeholder strong { font-size: 15px; }
.home-placeholder p { margin: 0; color: var(--text-muted); font-size: 13px; }
.home-placeholder ul { margin: 4px 0 0; padding-left: 18px; color: var(--text-muted); font-size: 13px; line-height: 1.7; }
.home-area-cta { align-self: flex-start; margin-top: auto; padding: 10px 16px; border-radius: 8px; background: var(--area-color); color: #fff; font-size: 13.5px; font-weight: 800; text-decoration: none; }
.home-area-cta:hover { filter: brightness(1.08); }
.home-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.home-quick-link { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 13.5px; font-weight: 700; text-decoration: none; }
.home-quick-stock:hover { border-color: var(--accent-pos); }
.home-quick-realestate:hover { border-color: var(--accent-brown); }
.realestate-planned li { margin-bottom: 4px; }

/* 홈 부동산 보드 - 오늘의 국평 신고가 브리핑. '높은 가격'과 '가격 상승' TOP 10을 나란히 두고,
   두 보드는 같은 줄에서 같은 높이로 늘어나요. */
.home-areas { align-items: stretch; }
.flow-source.is-sample { background: #FFF1D6; color: #9A5D14; }
/* 부동산 보드는 국내증시 보드와 같은 틀(숫자 칸 2개 → 우세 판정·막대 → TOP5 한 줄 목록)이라 높이가 같아요 */
.home-index b small { margin-left: 2px; font-size: 13px; font-weight: 600; }
.home-area-realestate .home-index { background: var(--soft-brown); }
.home-area-realestate .home-index em { font-family: inherit; font-weight: 600; color: var(--text-muted); }
.home-movers h3 small { margin-left: 4px; color: var(--text-muted); font-size: 11.5px; font-weight: 500; }
.re-movers li { align-items: baseline; }
.re-mover-name { display: flex; flex: 1; align-items: baseline; gap: 6px; min-width: 0; }
.re-mover-name b { flex: none; font-weight: 700; }
.re-mover-name small { overflow: hidden; color: var(--text-muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.re-movers .re-mover-price { flex: none; font-family: "SFMono-Regular", Consolas, monospace; font-weight: 700; white-space: nowrap; }
.re-mover-price em { margin-left: 4px; font-style: normal; }

/* 아파트 매매 실거래가 페이지 */
.re-sample-banner { margin: 0 0 16px; padding: 12px 14px; border: 1px solid #F0D3A8; border-radius: 10px; background: #FFF6E6; color: #7A4A12; font-size: 13px; line-height: 1.6; }
.apt-filter { display: flex; flex-wrap: wrap; gap: 10px; }
.apt-filter .calc-field { flex: 1 1 180px; }
.apt-search { display: flex; gap: 8px; margin-top: 14px; }
.apt-search input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; }
.apt-search .run-button { flex: none; width: auto; margin: 0; padding: 10px 16px; }
.apt-search-results { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.apt-search-results li { display: flex; align-items: baseline; gap: 6px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px; font-size: 13px; }
.apt-search-results a { color: var(--text); font-weight: 700; text-decoration: none; }
.apt-search-results a:hover { color: var(--accent-brown); }
.apt-search-results small { color: var(--text-muted); font-size: 11.5px; }
.apt-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.apt-stat { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border: 1px solid var(--border); border-top: 3px solid var(--accent-brown); border-radius: 12px; background: var(--surface); }
.apt-stat > span { color: var(--text-muted); font-size: 12.5px; font-weight: 700; }
.apt-stat b { font-size: 22px; font-weight: 800; }
.apt-stat b small { margin-left: 2px; font-size: 13px; font-weight: 600; }
.apt-stat > small { color: var(--text-muted); font-size: 12px; }
.apt-stat em { font-style: normal; font-weight: 700; }
.apt-series-1 { --series: #9C6436; }
.apt-series-2 { --series: #2F6FD6; }
.apt-series-3 { --series: #15836D; }
.apt-size-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 14px; }
.apt-size { padding: 12px; border: 1px solid var(--border); border-radius: 10px; }
.apt-size strong { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.apt-size strong i { width: 10px; height: 10px; border-radius: 50%; background: var(--series); }
.apt-size strong small { color: var(--text-muted); font-size: 11.5px; font-weight: 500; }
.apt-size dl { display: flex; justify-content: space-between; gap: 6px; margin: 8px 0 0; }
.apt-size dt { color: var(--text-muted); font-size: 11.5px; }
.apt-size dd { margin: 0; font-size: 14px; font-weight: 800; }
.apt-size dd small { color: var(--text-muted); font-size: 11px; font-weight: 500; }
.apt-chart { display: block; width: 100%; height: auto; }
.apt-chart .apt-grid { stroke: #E6EAF0; stroke-width: 1; }
.apt-chart text { fill: var(--text-muted); font-size: 11px; }
.apt-chart polyline { fill: none; stroke: var(--series); stroke-width: 2.5; stroke-linejoin: round; }
.apt-chart circle { fill: var(--series); fill-opacity: 0.35; }
.apt-chart circle:hover { fill-opacity: 1; }
.apt-legend { margin: 6px 0 0; color: var(--text-muted); font-size: 12px; }
.m-apt td { white-space: nowrap; }
.m-apt tr.is-cancelled td { color: var(--text-muted); text-decoration: line-through; }
.m-apt tr.is-cancelled .apt-badge { text-decoration: none; }
.apt-badge { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: #EEF1F5; color: var(--text-muted); font-size: 10.5px; font-weight: 700; vertical-align: middle; }
.apt-badge-high { background: #FDE8E8; color: #D93A3A; }
.apt-area { display: block; color: var(--text-muted); font-size: 11px; }
.apt-price { font-weight: 800; }
.apt-price small { display: block; font-size: 11px; }
.re-updated { margin: 0 0 16px; color: var(--text-muted); font-size: 12.5px; font-weight: 600; }

/* 부동산 대시보드 - 국내증시 대시보드와 같은 틀에 갈색 계열 */
.realestate-hero { background: radial-gradient(circle at 85% 10%, rgba(255, 214, 170, 0.25), transparent 32%), linear-gradient(120deg, #3b2616 0%, #6b4a2e 55%, #9C6436 100%); }
.flow-index b .re-unit { margin-left: 2px; font-family: inherit; font-size: 14px; font-weight: 700; }
.flow-index .re-index-label { font-family: inherit; color: var(--text-muted); font-weight: 600; }
.re-mover-plain { overflow: hidden; color: var(--text); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.re-mover-plain small { display: block; color: var(--text-muted); font-size: 11px; font-weight: 500; }
.flow-map:not(:has(.flow-tile)) { display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 13px; }
/* 부동산 대시보드 - 오늘의 신고가 브리핑 (높은 가격 · 가격 상승 TOP 10을 나란히) */
/* 신고가 브리핑과 거래량 지도를 거의 반반으로 나누되, 지도를 조금 더 넓게(10:11) 둬요 */
.re-flow-panels { grid-template-columns: 10fr 11fr; }
/* 거래량 지도는 옆 신고가 브리핑 높이만큼 칸을 꽉 채워요 (좁은 화면에서 위아래로 쌓이면 원래 높이) */
.re-flow-panels .flow-map { flex: 1; height: auto; min-height: 380px; }
/* 부동산 거래량 지도 - 밝은 바탕에 파스텔 칸, 진한 글씨로 부드럽고 잘 읽히게 */
.re-flow-panels .flow-map { background: #fff; }
.re-flow-panels .flow-tile { gap: 0.2em; border: 3px solid #fff; border-radius: 10px; color: #1F2733; text-shadow: none; }
.re-flow-panels .flow-tile strong { font-weight: 800; }
.re-flow-panels .flow-tile .re-tile-count { font-family: inherit; font-size: 0.78em; font-weight: 600; opacity: 0.75; }
.re-flow-panels .flow-tile em { font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.86em; font-style: normal; font-weight: 800; }
.re-flow-panels .re-tile-up { color: #B42318; }
/* 같은 크기 칸을 거래 많은 순으로 채우는 격자 - 옆 브리핑 높이에 맞춰 칸 높이가 늘어나요 */
/* 실제 위치대로 놓은 같은 크기 칸 - 오른 지역만 빨갛게 볼록, 나머지는 이름만 있는 납작한 칸 */
.re-flow-panels .re-grid-map { display: grid; flex: none; height: auto; min-height: 0; gap: 4px; padding: 6px 2px 8px; overflow: visible; background: #fff; }
.re-grid-map .flow-tile { position: static; min-width: 0; gap: 0; padding: 1px; line-height: 1.15; border: 0; border-radius: 7px; font-size: 11px; transition: transform 0.12s ease, box-shadow 0.12s ease; }
.re-grid-roomy .flow-tile { font-size: 13px; }
.re-grid-map .flow-tile strong { font-size: 1em; font-weight: 700; letter-spacing: -0.03em; }
.re-grid-map .re-tile-plain { background: #F1F3F6; color: #8A93A0; }
.re-grid-map .re-tile-plain strong { font-weight: 600; }
.re-grid-map .re-tile-rise { z-index: 1; background: linear-gradient(180deg, #F08A80 0%, #D9453B 100%); color: #fff; box-shadow: 0 3px 0 #A8281F, 0 6px 10px rgba(168, 40, 31, 0.28); transform: translateY(-3px); }
.re-grid-map .re-tile-rise strong { font-weight: 800; }
.re-grid-map .re-tile-rise em { color: #fff; font-family: inherit; font-size: 0.92em; font-weight: 800; letter-spacing: -0.02em; opacity: 1; }
.re-grid-map .re-tile-rise:hover { filter: none; transform: translateY(-5px); box-shadow: 0 5px 0 #A8281F, 0 9px 14px rgba(168, 40, 31, 0.32); }
.re-grid-map .re-tile-plain:hover { filter: none; background: #E6E9EE; box-shadow: none; }
.re-legend-item { display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
.re-legend-rise { display: inline-block; width: 16px; height: 12px; border-radius: 3px; background: linear-gradient(180deg, #F08A80, #D9453B); box-shadow: 0 2px 0 #A8281F; }
.re-grid-map .flow-tile strong { font-size: 1em; }
.re-flow-panels .flow-tile:hover { filter: brightness(0.97); box-shadow: inset 0 0 0 2px rgba(31, 39, 51, 0.45); }
.re-legend-scale { gap: 3px; }
.re-legend-scale span { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 22px; }
.re-legend-scale i { width: 22px !important; height: 10px; border-radius: 3px; }
.re-legend-scale small { min-height: 1em; color: var(--text-muted); font-size: 10px; font-weight: 600; }
.re-brief-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.re-brief-card { min-width: 0; padding: 10px 10px 4px; border: 1px solid var(--border); border-radius: 10px; }
.re-brief-card h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 14px; }
.re-brief-card h4::before { content: ""; width: 3px; height: 14px; border-radius: 2px; background: var(--brief-color); }
.re-brief-high { --brief-color: #D93A3A; }
.re-brief-rise { --brief-color: #2F6FD6; }
.re-brief-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; font-size: 12.5px; }
.re-brief-table th { padding: 4px 3px; border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: 11px; font-weight: 600; text-align: right; }
.re-brief-table th:first-child { width: 2.4em; text-align: center; }
.re-brief-table th:last-child { width: 5.6em; }
.re-brief-table th.left { text-align: left; }
.re-brief-table td { padding: 6px 3px; border-bottom: 1px solid #F0F2F5; vertical-align: middle; }
.re-brief-table tbody tr:nth-child(even) { background: transparent; }
.re-brief-table tr:last-child td { border-bottom: none; }
.re-brief-table td a { display: block; min-width: 0; color: inherit; text-decoration: none; }
.re-brief-table td a:hover b { text-decoration: underline; }
.re-brief-table td b, .re-brief-table td small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.re-brief-table td b { color: var(--text); font-size: 13px; }
/* 단지 이름은 자르지 않고, 아주 긴 이름은 두 줄로 넘겨서 끝까지 보여줘요 */
.re-brief-table td a b { overflow: visible; line-height: 1.3; white-space: normal; word-break: break-all; }
.re-brief-table td small { margin-top: 1px; color: var(--text-muted); font-size: 11px; }
.re-brief-rank { color: var(--text-muted); font-family: "SFMono-Regular", Consolas, monospace; font-weight: 700; text-align: center; }
.re-brief-price { text-align: right; font-variant-numeric: tabular-nums; }
.re-brief-price b, .re-brief-price small { overflow: visible !important; text-overflow: clip !important; }
.re-brief-price b { font-weight: 800; }
.re-brief-price small { font-size: 11.5px !important; font-weight: 700; }
.re-brief-high .re-brief-price b { color: #D93A3A; }
.re-brief-high .re-brief-price small { color: var(--text); }
.re-brief-rise .re-brief-price small { color: #D93A3A; }
@media (max-width: 900px) {
  .re-flow-panels { grid-template-columns: 1fr; }
  .re-flow-panels .flow-map { flex: none; height: auto; min-height: 0; }
}
@media (max-width: 480px) {
  .re-brief-grid { grid-template-columns: 1fr; }
}

/* 데이터 출처 - 모든 데이터 화면 아래에 작게 */
.data-source { margin: 8px 2px 0; color: var(--text-muted); font-size: 11px; line-height: 1.5; text-align: right; opacity: 0.85; }
.home-area .data-source { margin-top: -6px; }

/* 최근 신고가 거래 - 기간·조건 검색 */
.nh-period { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.nh-period .calc-field { flex: 0 1 180px; }
.nh-tilde { padding-bottom: 12px; color: var(--text-muted); font-weight: 700; }
.nh-presets { margin-top: 10px; }
.nh-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.4fr) auto; align-items: end; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.nh-filters .run-button { width: auto; margin: 0; padding: 11px 18px; white-space: nowrap; }
.re-nodata { margin: 12px 0 0; color: var(--text-muted); font-size: 12px; line-height: 1.7; }
.re-nodata strong { margin-right: 6px; color: var(--text); }

@media (max-width: 760px) {
  .home-areas { grid-template-columns: 1fr; }
  .apt-summary { grid-template-columns: 1fr 1fr; }
  .nh-filters { grid-template-columns: 1fr 1fr; }
  .nh-filters .nh-query { grid-column: 1 / -1; }
  .nh-filters .run-button { grid-column: 1 / -1; width: 100%; }
  .nh-period .calc-field { flex: 1 1 130px; }
  .nh-period .calc-field:first-child { flex-basis: 100%; }
  .nh-tilde { display: none; }
}
@media (max-width: 480px) {
  .area-tab { padding: 7px 11px; font-size: 13px; }
  .home-area { padding: 16px 14px; }
  .home-index b { font-size: 18px; }
  .home-movers li { font-size: 13px; }
  .re-mover-name small { font-size: 11px; }
}

/* 상단 메뉴 - 비슷한 도구끼리 묶은 드롭다운 */
.site-nav {
  position: relative;
  z-index: 30;
  gap: 4px;
  margin: 0 0 26px;
  padding: 8px 10px;
  border-bottom: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(22, 35, 58, 0.045);
}
.site-nav > .nav-home { margin-right: 10px; font-size: 14px; }
.nav-group { position: relative; --group-color: var(--accent-blue); }
.nav-green { --group-color: var(--accent-pos); }
.nav-purple { --group-color: var(--accent-purple); }
.nav-orange { --group-color: var(--accent-orange); }
.nav-gray { --group-color: #5B6B7C; }
.nav-brown { --group-color: var(--accent-brown); }
.nav-group-label { display: flex; align-items: center; gap: 5px; padding: 8px 12px; border: 0; border-radius: 7px; background: transparent; color: var(--text-muted); cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; }
.nav-group-label i { font-size: 10px; font-style: normal; opacity: 0.6; }
.nav-group-label:hover { transform: none; }
.nav-group:hover .nav-group-label, .nav-group.open .nav-group-label { background: #EEF3F9; color: var(--text); }
.nav-group.active .nav-group-label { color: var(--group-color); box-shadow: inset 0 -2px 0 var(--group-color); border-radius: 7px 7px 0 0; }
.nav-menu { position: absolute; top: 100%; left: 0; display: none; flex-direction: column; min-width: 210px; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--group-color); border-radius: 0 10px 10px 10px; box-shadow: 0 12px 28px rgba(22, 35, 58, 0.14); }
.nav-group:hover .nav-menu, .nav-group:focus-within .nav-menu, .nav-group.open .nav-menu { display: flex; }
.site-nav .nav-menu a { display: flex; align-items: center; padding: 10px 11px; border-radius: 6px; color: var(--text); font-size: 14px; font-weight: 500; }
.site-nav .nav-menu a:hover { background: #F2F6FB; color: var(--group-color); }
.site-nav .nav-menu a.current { background: #F2F6FB; color: var(--group-color); font-weight: 700; }
.nav-icon { margin-right: 7px; }
.nav-group-label .nav-icon { margin-right: 6px; }

/* 대시보드 - 분류별 도구 묶음 */
.tool-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.tool-toolbar .tool-search { margin: 0; }
.tool-jump { display: flex; flex-wrap: wrap; gap: 8px; }
.tool-jump a { padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 12px; font-weight: 600; text-decoration: none; }
.tool-jump a small { margin-left: 3px; color: var(--text-muted); font-weight: 400; }
.tool-jump a:hover { border-color: currentColor; }
.tool-jump-blue { color: var(--accent-blue) !important; }
.tool-jump-green { color: var(--accent-pos) !important; }
.tool-jump-purple { color: var(--accent-purple) !important; }
.tool-jump-orange { color: #9a5d14 !important; }
.tool-jump-gray { color: #5B6B7C !important; }
.tool-jump-brown { color: var(--accent-brown) !important; }
.tool-group { --group-color: var(--accent-blue); --group-soft: var(--soft-blue); margin-bottom: 30px; scroll-margin-top: 20px; }
.tool-group-green { --group-color: var(--accent-pos); --group-soft: #E7F6F1; }
.tool-group-purple { --group-color: var(--accent-purple); --group-soft: var(--soft-purple); }
.tool-group-orange { --group-color: var(--accent-orange); --group-soft: var(--soft-orange); }
.tool-group-gray { --group-color: #5B6B7C; --group-soft: #EEF1F4; }
.tool-group-brown { --group-color: var(--accent-brown); --group-soft: var(--soft-brown); }
.tool-group-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 12px; padding: 10px 14px; border-left: 4px solid var(--group-color); border-radius: 0 8px 8px 0; background: var(--group-soft); }
.tool-group-eyebrow { color: var(--group-color); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; }
.tool-group-heading h3 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.tool-group-heading p { margin: 0; color: var(--text-muted); font-size: 12px; }
/* 분류 색이 카드마다 달라지던 순번 색 대신, 같은 분류는 같은 색으로 맞춰요 */
.tool-group .tool-card, .tool-group .tool-card:nth-child(n) { border-top: 3px solid var(--group-color); background: linear-gradient(145deg, var(--group-soft), #FFFFFF 70%); }
.tool-group .tool-card.tool-card-featured:nth-child(n) { background: linear-gradient(145deg, #d9f2e9 0%, #f6fbf8 100%); }
.tool-group .tool-kicker, .tool-group .tool-action { color: var(--group-color); }
.tool-group .tool-card:hover { border-color: var(--group-color); }
.tool-group .tool-card { min-height: 170px; }
.tool-icon { margin-right: 5px; }
.tool-badge, .nav-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--accent-neg); color: #fff; font-size: 9px; font-weight: 800; letter-spacing: 0.03em; vertical-align: middle; }

/* 대시보드 - "지금 이럴 때" 상황별 추천 섹션 */
.scenario-section { margin-bottom: 40px; }
.scenario-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.scenario-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px; border: 1px solid var(--border); border-top: 3px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: 0 4px 12px rgba(22, 35, 58, 0.04); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.scenario-card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(22, 35, 58, 0.08); }
.scenario-icon { font-size: 26px; line-height: 1; }
/* 도구 카드 제목(.tool-card strong)과 같은 크기·굵기로 맞춰요 */
.scenario-title { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; word-break: keep-all; }
.scenario-desc { margin: 0; color: var(--text-muted); font-size: 12.5px; line-height: 1.5; }
.scenario-links { display: flex; flex-wrap: wrap; gap: 5px 10px; margin-top: auto; padding-top: 10px; }
.scenario-links a { color: var(--scenario-color, var(--text)); font-size: 12px; font-weight: 700; text-decoration: none; }
.scenario-links a:hover { text-decoration: underline; }
.scenario-red { --scenario-color: var(--accent-neg); border-top-color: var(--accent-neg); background: linear-gradient(145deg, #FDEDED, #FFFFFF 65%); }
.scenario-green { --scenario-color: var(--accent-pos); border-top-color: var(--accent-pos); background: linear-gradient(145deg, #E7F6F1, #FFFFFF 65%); }
.scenario-purple { --scenario-color: var(--accent-purple); border-top-color: var(--accent-purple); background: linear-gradient(145deg, var(--soft-purple), #FFFFFF 65%); }
.scenario-orange { --scenario-color: var(--accent-orange); border-top-color: var(--accent-orange); background: linear-gradient(145deg, var(--soft-orange), #FFFFFF 65%); }

@media (max-width: 900px) {
  .scenario-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .scenario-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .nav-menu { position: static; min-width: 0; margin-top: 4px; border-radius: 10px; box-shadow: none; }
  .nav-group:hover .nav-menu, .nav-group:focus-within .nav-menu { display: none; }
  .nav-group.open { flex-basis: 100%; }
  .nav-group.open .nav-menu { display: flex; }
}

/* 새 메뉴 공통 - 탭처럼 쓰는 필터 알약 버튼 */
th.left, td.left { text-align: left; }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-row-sub { margin-top: 12px; }
.pill { padding: 9px 15px; border: 1px solid #CBD8E6; border-radius: 999px; background: #FBFDFF; color: #415A75; font-size: 14px; font-weight: 600; text-decoration: none; transition: border-color 0.15s ease, background 0.15s ease; }
.pill:hover { border-color: var(--page-accent, var(--accent-blue)); color: var(--page-accent, var(--accent-blue)); }
.pill.active { border-color: var(--page-accent, var(--accent-blue)); background: var(--page-accent, var(--accent-blue)); color: #fff; }
.pill-sm { padding: 6px 12px; font-size: 13px; }
.pill-caution { border-color: #edbcbc; color: var(--accent-neg); }
.pill-caution.active { border-color: var(--accent-neg); background: var(--accent-neg); color: #fff; }

/* 종목 상세 - 네이버 증권 차트·투자정보 */
.stock-chart-tabs { flex-wrap: wrap; margin-bottom: 12px; }
.stock-chart { display: block; width: 100%; max-width: 760px; height: auto; margin: 0 auto; border-radius: 8px; }
.stock-info-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.stock-info { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 8px; background: linear-gradient(145deg, #F7FAFD, #EEF4FA); }
.stock-info span { color: var(--text-muted); font-size: 11.5px; font-weight: 600; }
.stock-info b { font-family: "SFMono-Regular", Consolas, monospace; font-size: 14px; font-weight: 800; white-space: nowrap; }
.stock-consensus { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-top: 14px; padding: 12px 14px; border-left: 3px solid var(--page-accent, var(--accent-blue)); border-radius: 6px; background: var(--page-soft, var(--soft-blue)); font-size: 13.5px; }
.stock-consensus-label { font-weight: 800; }
.stock-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 12px 0 0; }
.stock-links .valuation-link { margin-top: 0; }

@media (max-width: 900px) {
  .stock-info-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 따끈따끈 신규 상장 종목 */
.ipo-today-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ipo-today-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--border); border-top: 3px solid var(--price-up); border-radius: 10px; background: linear-gradient(145deg, #FFF3F2, #FFFFFF 65%); }
.ipo-today-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 16px; font-weight: 800; }
.ipo-badge { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--price-up); color: #fff; font-size: 11px; font-weight: 800; }
.ipo-today-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.ipo-today-price b { font-family: "SFMono-Regular", Consolas, monospace; font-size: 24px; font-weight: 800; }
.ipo-today-price > span { font-family: "SFMono-Regular", Consolas, monospace; font-size: 15px; font-weight: 800; }
.ipo-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 0; }
.ipo-facts div { display: flex; flex-direction: column; }
.ipo-facts dt { color: var(--text-muted); font-size: 11px; font-weight: 700; }
.ipo-facts dd { margin: 0; font-family: "SFMono-Regular", Consolas, monospace; font-size: 13.5px; font-weight: 700; }
.ipo-dday { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #EEF2F6; color: var(--text); font-family: "SFMono-Regular", Consolas, monospace; font-size: 12px; font-weight: 800; }
.ipo-dday.is-soon { background: var(--price-up); color: #fff; }

/* AI 종목 진단 */
.diag-form { display: flex; gap: 10px; }
.diag-form .stock-search-wrap { flex: 1; min-width: 0; }
.diag-submit { grid-column: auto; margin-top: 0; padding: 10px 20px; white-space: nowrap; }
.diag-error { margin: 10px 0 0; font-size: 13px; }
.diag-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; border-top: 3px solid var(--page-accent, var(--accent-blue)); background: linear-gradient(135deg, color-mix(in srgb, var(--page-accent, var(--accent-blue)) 8%, white), #FFFFFF 70%); }
.diag-hero-main { display: flex; flex-direction: column; gap: 4px; }
.diag-name { margin: 0; font-size: 26px; }
.diag-name .stock-link { color: var(--text); }
.diag-price { color: var(--text-muted); font-size: 14px; font-weight: 600; }
.diag-hero-score { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.diag-score-label { color: var(--text-muted); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; }
.diag-score { font-family: "SFMono-Regular", Consolas, monospace; font-size: 52px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.diag-score small { margin-left: 3px; color: var(--text-muted); font-size: 18px; font-weight: 600; }
.diag-verdict { padding: 4px 12px; border-radius: 999px; background: #EEF2F6; font-size: 14px; font-weight: 800; }
.diag-verdict.up { background: #E3F4EE; }
.diag-verdict.warn { background: #FFF3DF; }
.diag-verdict.down { background: #FDE8E8; }
.diag-bars { display: flex; flex-direction: column; gap: 12px; }
.diag-bar-row { display: grid; grid-template-columns: 110px 1fr 60px; align-items: center; gap: 12px; }
.diag-bar-label { font-size: 14px; font-weight: 700; }
.diag-bar { height: 12px; border-radius: 6px; background: #EEF2F6; overflow: hidden; }
.diag-bar i { display: block; height: 100%; border-radius: 6px; }
.diag-bar-high { background: var(--accent-pos); }
.diag-bar-mid { background: #D99A2B; }
.diag-bar-low { background: var(--accent-neg); }
.diag-bar-row em { font-family: "SFMono-Regular", Consolas, monospace; font-size: 16px; font-style: normal; font-weight: 800; text-align: right; }
.diag-bar-row em small { color: var(--text-muted); font-size: 11px; font-weight: 500; }
.diag-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; align-items: start; }
.diag-grid { margin-top: 14px; }
.diag-warning { margin: 0 0 20px; border-left-color: #D99A2B; background: #FFF8EC; }

@media (max-width: 760px) {
  .diag-columns { grid-template-columns: 1fr; }
  .diag-hero-score { align-items: flex-start; }
  .diag-form { flex-direction: column; }
}

/* 섹터 히트맵 */
.heat-legend { display: flex; align-items: center; gap: 4px; margin-top: 14px; color: var(--text-muted); font-size: 11px; }
.heat-legend i { width: 28px; height: 10px; border-radius: 2px; }
.heat-legend span { margin: 0 4px; }
.heat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; align-items: start; }
.heat-tile { border: 1px solid rgba(22, 35, 58, 0.08); border-radius: 10px; color: var(--text); }
.heat-tile summary { display: flex; flex-direction: column; gap: 4px; padding: 14px; cursor: pointer; list-style: none; }
.heat-tile summary::-webkit-details-marker { display: none; }
.heat-tile[open] { grid-column: span 2; }
.heat-dark { color: #fff; }
.heat-name { font-size: 14px; font-weight: 700; }
.heat-change { font-family: "SFMono-Regular", Consolas, monospace; font-size: 22px; }
.heat-meta, .heat-leader { font-size: 12px; opacity: 0.9; }
.heat-stocks { margin: 0; padding: 10px 14px 14px; list-style: none; background: rgba(255, 255, 255, 0.94); border-radius: 0 0 10px 10px; color: var(--text); }
.heat-stocks li { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.heat-stocks li:last-child { border-bottom: 0; }
.heat-stocks a { color: var(--page-accent, var(--accent-blue)); font-weight: 600; text-decoration: none; }
.heat-stocks span { font-family: "SFMono-Regular", Consolas, monospace; }
.heat-more { color: var(--text-muted); font-size: 12px; }

/* 외인·기관 수급 */
.supply-combined { margin-bottom: 8px; }
.supply-combined-title { margin: 24px 0 4px; font-size: 17px; font-weight: 700; color: var(--text); }
.supply-combined .supply-combined-title { margin-top: 0; }
.supply-combined-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.supply-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.supply-column-title { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: var(--text); }

@media (max-width: 760px) {
  .supply-combined-grid { grid-template-columns: 1fr; }
  .supply-columns { grid-template-columns: 1fr; }
}

/* 종목 비교 */
.compare-form { grid-template-columns: 3fr 1fr; align-items: end; }
.compare-slots { grid-column: 1 / 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.compare-slot span { display: flex; align-items: center; }
.compare-slot.has-error input { border-color: var(--accent-neg); background: #fff5f5; }
.slot-error { margin-top: 4px; color: var(--accent-neg); font-size: 11px; line-height: 1.4; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 12px; font-size: 13px; font-weight: 600; }
.chart-legend i, .legend-dot { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; }

@media (max-width: 760px) {
  .compare-slots { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .compare-slots { grid-template-columns: 1fr; }
}

/* 포트폴리오 */
.portfolio-summary { grid-template-columns: repeat(4, 1fr); margin-bottom: 20px; }
.portfolio-summary .summary-value { font-size: 22px; }
.weight-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 14px; }
.weight-heading { margin: 0 0 10px; color: var(--text-muted); font-size: 12px; font-weight: 700; }
.weight-row { display: grid; grid-template-columns: 112px 1fr 56px; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 14px; }
.weight-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.weight-row em { font-family: "SFMono-Regular", Consolas, monospace; font-style: normal; text-align: right; }
.weight-bar { height: 10px; border-radius: 5px; background: #EEF2F6; overflow: hidden; }
.weight-bar i { display: block; height: 100%; background: var(--page-accent, var(--accent-blue)); }
.weight-bar-alt i { background: var(--accent-purple); }

/* 공시 피드 */
.disclosure-list { margin: 0; padding: 0; list-style: none; }
.disclosure-list li { display: grid; grid-template-columns: 92px 76px 116px 1fr auto; align-items: center; gap: 12px; padding: 13px 6px; border-bottom: 1px solid var(--border); font-size: 14px; }
.disclosure-list li:last-child { border-bottom: 0; }
.disclosure-list li.is-caution { background: #fff5f5; }
.disclosure-date, .disclosure-filer { color: var(--text-muted); font-family: "SFMono-Regular", Consolas, monospace; font-size: 13px; }
.disclosure-stock { color: var(--page-accent, var(--accent-blue)); font-weight: 700; text-decoration: none; }
.disclosure-title { color: var(--text); text-decoration: none; }
.disclosure-title:hover { color: var(--accent-pos); text-decoration: underline; }
.tag { justify-self: start; padding: 3px 8px; border-radius: 999px; background: #EEF2F6; color: var(--text-muted); font-size: 11px; font-weight: 700; }
.tag-caution { background: #fde8e8; color: var(--accent-neg); }
.tag-dividend { background: #e3f4ee; color: var(--accent-pos); }
.tag-earnings { background: var(--soft-blue); color: var(--accent-blue); }
.tag-buyback { background: var(--soft-purple); color: var(--accent-purple); }
.tag-deal { background: var(--soft-orange); color: #9a5d14; }

/* 배당 캘린더 */
.month-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 10px; }
.month-cell { display: flex; flex-direction: column; gap: 4px; min-height: 96px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.month-cell.has-dividend { background: linear-gradient(145deg, #e5f7f1, #ffffff); border-color: #b7dfd4; }
.month-cell.is-current { box-shadow: 0 0 0 2px var(--page-accent, var(--accent-blue)); }
.month-label { color: var(--text-muted); font-size: 12px; font-weight: 700; }
.month-stock { color: var(--accent-pos); font-size: 12px; font-weight: 600; }
.month-empty { color: #b5c0cc; font-size: 12px; }

/* 배당 우량주 표 안의 배당월 칩 - 이번 달이면 강조돼요 */
.month-chip { display: inline-block; margin: 1px 3px 1px 0; padding: 2px 7px; border-radius: 999px; background: #EEF2F6; color: var(--text-muted); font-family: "Pretendard", sans-serif; font-size: 11px; font-weight: 600; white-space: nowrap; }
.month-chip.is-now { background: var(--accent-pos); color: #fff; }

@media (max-width: 760px) {
  .portfolio-summary { grid-template-columns: repeat(2, 1fr); }
  .weight-columns { grid-template-columns: 1fr; }
  .month-grid { grid-template-columns: repeat(3, 1fr); }
  .compare-form { grid-template-columns: 1fr; }
  .heat-tile[open] { grid-column: auto; }
  .disclosure-list li { grid-template-columns: auto 1fr; gap: 4px 10px; }
  .disclosure-title { grid-column: 1 / -1; }
  .disclosure-filer { display: none; }
}

@media (max-width: 480px) {
  .fundamental-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .list-title {
    font-size: 25px;
  }

  .hero-name {
    font-size: 24px;
  }

  .hero {
    padding: 14px;
  }
}

/* 휴대폰 - 옆으로 밀지 않고 한 화면에 들어오도록 여백·글씨·칸 크기를 줄여요 */
@media (max-width: 480px) {
  .page { padding: 18px 12px 56px; }
  .site-nav { margin-bottom: 18px; padding: 6px; }
  .nav-group-label { padding: 6px 8px; font-size: 13px; }
  .site-nav > .nav-home { margin-right: 4px; font-size: 13px; }

  .list-header { margin-bottom: 16px; padding: 4px 0 6px 12px; }
  .list-sub { font-size: 13px; }
  .card { margin-bottom: 14px; padding: 14px 12px; }
  .card-title { margin-bottom: 12px; font-size: 15px; }
  .pill { padding: 7px 11px; font-size: 13px; }
  .pill-sm { padding: 5px 9px; font-size: 12px; }
  .fundamental-item { padding: 10px; }
  .fundamental-value { font-size: 15px; }
  .price { font-size: 34px; }

  table { font-size: 12.5px; }
  th { font-size: 11.5px; letter-spacing: 0; }
  th, td { padding: 8px 5px; }
  th.sortable-th::after { margin-left: 2px; }
  /* 종목명은 칸이 좁으면 줄바꿈해서 표 전체 폭을 줄여요 */
  .stock-link, .tc-name { white-space: normal; word-break: keep-all; }

  /* 칸이 많은 표는 휴대폰에서 덜 중요한 열을 숨겨요 (PC에서는 모두 보여요) */
  .m-screener :is(th, td):is(:nth-child(2), :nth-child(5), :nth-child(6), :nth-child(7), :nth-child(9)),
  .m-movers :is(th, td):is(:nth-child(3), :nth-child(6), :nth-child(8)),
  .m-week52 :is(th, td):is(:nth-child(3), :nth-child(6), :nth-child(8)),
  .m-compare :is(th, td):is(:nth-child(4), :nth-child(7), :nth-child(8)),
  .m-insider :is(th, td):is(:nth-child(4), :nth-child(7), :nth-child(8)),
  .m-portfolio :is(th, td):is(:nth-child(2), :nth-child(4), :nth-child(6), :nth-child(9), :nth-child(10)),
  .m-value :is(th, td):is(:nth-child(2), :nth-child(6), :nth-child(7)),
  .m-daily :is(th, td):is(:nth-child(2), :nth-child(6)),
  .m-pincer :is(th, td):nth-child(3),
  .m-quant :is(th, td):nth-child(3),
  .m-quant-magic :is(th, td):is(:nth-child(7), :nth-child(8)),
  .m-div-top20 :is(th, td):is(:nth-child(5), :nth-child(6)),
  .m-div-mine :is(th, td):nth-child(3),
  .m-ipo :is(th, td):is(:nth-child(5), :nth-child(7)),
  .m-trend :is(th, td):is(:nth-child(2), :nth-child(6)),
  .m-apt :is(th, td):is(:nth-child(3), :nth-child(7), :nth-child(8)),
  .m-regions :is(th, td):nth-child(3),
  .m-newhigh :is(th, td):is(:nth-child(4), :nth-child(6)),
  .m-surge-complex :is(th, td):nth-child(2) { display: none; }
  .stock-info { padding: 8px; }
  .stock-info b { font-size: 12.5px; white-space: normal; word-break: keep-all; }

  .section-heading { flex-wrap: wrap; gap: 6px; }
  .flow-source { white-space: normal; }
  .dashboard-hero { margin-bottom: 18px; padding: 22px 18px 24px; }
  .dashboard-title { font-size: 24px; }
  .dashboard-section { margin-bottom: 30px; }
  .section-heading h2 { font-size: 19px; }
  .flow-panel { padding: 14px 12px; }
  .flow-panel-head h3 { flex-basis: 100%; }
  .flow-movers li { gap: 8px; padding: 8px 0; font-size: 13px; }

  /* 시장의 흐름 - 전체 카드를 맨 위 한 줄로 두고, 코스피·코스닥은 그 아래 2열로 나란히 */
  .flow-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .flow-card-total { grid-column: 1 / -1; order: -1; }
  .flow-card { gap: 6px; padding: 12px 10px; }
  .flow-card-head strong { font-size: 14px; }
  .flow-card-head span { font-size: 9.5px; letter-spacing: 0.02em; }
  .flow-index { gap: 2px 6px; }
  .flow-index b { font-size: 18px; }
  .flow-index span { font-size: 11px; }
  .flow-verdict { font-size: 20px; }
  .flow-counts { gap: 2px 8px; font-size: 11px; }
  .flow-card-total .flow-counts { font-size: 12.5px; }
  .flow-foot { font-size: 10.5px; }

  /* 지금 이럴 때 - 한 줄에 2개 */
  .scenario-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .scenario-card { gap: 4px; padding: 12px 10px; }
  .scenario-icon { font-size: 20px; }
  .scenario-title { font-size: 14px; line-height: 1.3; }
  .scenario-desc { font-size: 11px; }
  .scenario-links { gap: 3px 8px; padding-top: 6px; }
  .scenario-links a { font-size: 11px; }

  /* 국내증시 분석 도구 - 한 줄에 2개, 설명은 3줄까지만 */
  .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tool-group .tool-card { min-height: 0; padding: 12px 10px; }
  .tool-kicker { margin-bottom: 6px; font-size: 10px; }
  .tool-card strong { font-size: 14px; line-height: 1.3; word-break: keep-all; }
  .tool-card p { display: -webkit-box; margin: 4px 0 8px; overflow: hidden; font-size: 11.5px; line-height: 1.45; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
  .tool-action { font-size: 11px; }

  .diag-bar-row { grid-template-columns: 76px 1fr 46px; gap: 8px; }
  .diag-bar-label { font-size: 13px; }
  .diag-score { font-size: 42px; }
  .diag-name { font-size: 22px; }
}

/* ===== 모바일 정리 (2026-10-02 전체 점검) ===== */
/* 입력칸·선택칸이 긴 옵션 글자 때문에 화면 밖으로 늘어나지 않게 해요 */
.calc-field { min-width: 0; }
.calc-field > select, .calc-field > input { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
select { max-width: 100%; text-overflow: ellipsis; }

@media (max-width: 480px) {
  /* 표는 가로로 밀리지 않게 - 글자 칸(종목명·단지명·지역)은 줄바꿈하고 칸 간격을 좁혀요 */
  table { font-size: 12px; }
  th, td { padding: 7px 4px; }
  th { font-size: 11px; white-space: normal; word-break: keep-all; }
  td.left { white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
  td small, td .apt-area { white-space: normal; }
}