:root {
  --bg: #f7f7f8; --panel: #fff; --ink: #16181d; --muted: #6b7280;
  --line: #e5e7eb; --accent: #1d4ed8; --up: #b91c1c; --down: #1d4ed8;
  --warn: #b45309; --bad: #b91c1c;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #101215; --panel: #181b20; --ink: #e8eaed; --muted: #9aa1ad;
          --line: #2a2f37; --accent: #7aa2ff; --up: #f87171; --down: #7aa2ff; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  /* 한국어를 글자 단위로 끊으면 '청/계/포/레/스/트'가 된다. 낱말 경계에서만 끊는다.
     좁은 칸에서 열이 눌리는 대신 표가 넓어져 감싼 상자가 가로로 흐른다. */
  word-break: keep-all; }
main { max-width: 1180px; margin: 0 auto; padding: 20px 16px 60px; }
h1 { font-size: 22px; margin: 6px 0 4px; }
h2 { font-size: 16px; margin: 0 0 12px; }
h3 { font-size: 14px; margin: 18px 0 8px; }
a { color: var(--accent); }

/* 좁은 화면에서 이름·로그아웃이 탭을 밀어내지 않고 아랫줄로 내려가게 한다. */
.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 12px 16px;
  background: var(--panel); border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; text-decoration: none; color: var(--ink); }
.topbar nav { display: flex; gap: 14px; }
.topbar nav a { text-decoration: none; color: var(--muted); padding: 4px 2px; white-space: nowrap; }
.topbar nav a.on { color: var(--ink); border-bottom: 2px solid var(--accent); }

footer { max-width: 1180px; margin: 0 auto; padding: 0 16px 30px; color: var(--muted); font-size: 12px; }

.summary { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; margin: 16px 0 20px; }
/* KPI 칸은 서로 높이를 맞추지만, 그 줄에 섞인 버튼까지 늘어나면 덩어리로 보인다. */
.summary > .button { align-self: center; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 16px; min-width: 150px; display: flex; flex-direction: column; gap: 2px; }
.kpi .label { font-size: 12px; color: var(--muted); }
.kpi .value { font-size: 21px; font-variant-numeric: tabular-nums; }
/* 등수 옆의 '상위 %'. 같은 줄에 두되 큰 숫자를 밀어내지 않게 작게 쓴다. */
.kpi .value .share { font-size: 13px; color: var(--muted); }
.kpi .sub { font-size: 12px; color: var(--muted); }
.up { color: var(--up); } .down { color: var(--down); }

/* 열이 많은 표는 본문 전체가 아니라 표 안에서만 옆으로 흐르게 한다. */
.table-wrap { overflow-x: auto; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 16px; margin: 0 0 18px; overflow-x: auto; }
.card.center { text-align: center; padding: 40px 16px; }
.card.bad { border-color: var(--bad); }
.two-col { display: grid; gap: 16px; }

table.grid { width: 100%; border-collapse: collapse; font-size: 14px; }
table.grid th, table.grid td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.grid th { font-size: 12px; color: var(--muted); font-weight: 600; white-space: nowrap; }
table.grid td.num, table.grid th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.compact th, table.compact td { padding: 6px 8px; }
.muted { color: var(--muted); font-size: 12px; }
.note { color: var(--muted); font-size: 12.5px; margin: 10px 0 0; }
.error { color: var(--bad); }

.tag { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); }
.tag.warn { color: var(--warn); border-color: var(--warn); }
.tag.bad { color: var(--bad); border-color: var(--bad); }

button, .button { font: inherit; padding: 7px 14px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink); text-decoration: none; display: inline-block; }
button:hover { border-color: var(--accent); }
button[disabled] { opacity: .5; cursor: not-allowed; }
.button.primary, button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
button.link { border: 0; background: none; padding: 2px 4px; color: var(--accent); }
button.link.danger { color: var(--bad); }
/* 표 안의 '매도'는 링크지만 옆의 '삭제' 버튼과 같은 줄에 같은 크기로 서야 한다. */
a.link { padding: 2px 4px; color: var(--accent); }

form.stack { display: flex; flex-direction: column; gap: 14px; }
/* 단계 상자. <fieldset>+<legend>를 쓰면 제목이 테두리 위에 걸쳐 그려져
   박스를 벗어난 것처럼 보이고, float으로 우회하면 아래 내용을 덮어
   클릭을 가로챈다. 그래서 평범한 상자와 제목으로 그린다. */
.step { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px;
  background: var(--panel); }
.step > h2 { font-size: 13px; font-weight: 600; color: var(--muted); margin: 0 0 10px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 6px 0; }
.row label { font-size: 13px; color: var(--muted); }
.row label.check { color: var(--ink); display: inline-flex; gap: 5px; align-items: center; }
input, select { font: inherit; padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--bg); color: var(--ink); }
input[type="search"] { min-width: 220px; }

.results { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; max-height: 320px; overflow-y: auto; }
.results button { text-align: left; width: 100%; }
.results button.picked { border-color: var(--accent); background: var(--bg); }

.topbar .who { margin-left: auto; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.login { max-width: 420px; margin: 60px auto; }
.login h1 { font-size: 20px; margin-bottom: 6px; }
.verdict { background: var(--panel); border: 1px solid var(--line); border-left-width: 4px;
  border-radius: 10px; padding: 14px 16px; margin: 16px 0 18px; }
.verdict .headline { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.verdict .detail { margin: 0; color: var(--muted); font-size: 14px; }
.verdict.good { border-left-color: var(--up); }
.verdict.bad { border-left-color: var(--down); }
.verdict.neutral, .verdict.unknown { border-left-color: var(--line); }
table.grid td.region { color: var(--muted); font-size: 13px; white-space: nowrap; }
ul.legend { list-style: none; margin: 4px 0 10px; padding: 0; display: flex;
  flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--muted); }
ul.legend li { display: flex; align-items: center; gap: 6px; }
ul.legend strong { color: var(--ink); font-weight: 600; }
.swatch { width: 16px; height: 10px; border-radius: 2px; flex: none; display: inline-block; }
.swatch.mine { height: 3px; background: var(--accent); }
.swatch.peer { height: 0; border-top: 3px dashed var(--muted); border-radius: 0; }
.swatch.band { background: rgba(120,140,180,.30); }
.swatch.ahead { background: rgba(29,78,216,.30); }
.swatch.behind { background: rgba(185,28,28,.30); }
@media (prefers-color-scheme: dark) {
  .swatch.ahead { background: rgba(122,162,255,.40); }
  .swatch.behind { background: rgba(248,113,113,.38); }
}
.memo { background: var(--panel); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0;
  padding: 8px 12px; margin: 8px 0 16px; font-size: 14px; }
.crumbs { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.crumbs a { color: var(--muted); }
dl.meta { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: 14px; }
.only-narrow { display: none; }
dl.meta dt { color: var(--muted); font-size: 13px; }
dl.meta dd { margin: 0; }
canvas { max-width: 100%; height: auto; margin-bottom: 12px; }
@media (max-width: 700px) {
  .kpi { min-width: 120px; flex: 1 1 40%; }
  input[type="search"] { min-width: 140px; }

  /* 열이 열 개인 표를 폰에서 그대로 두면, 폭이 고정된 숫자 열들에 밀려 유일하게
     늘어날 수 있는 첫 열(단지명)이 한 글자 폭까지 눌린다. 가로 스크롤로 미루면
     손익·순위를 보려고 매번 옆으로 밀어야 한다. 그래서 한 줄을 한 장의 카드로 접고
     각 값 앞에 원래 열 이름을 붙인다(헤더는 감춘다). */
  table.grid.stacked,
  table.grid.stacked tbody,
  table.grid.stacked tr,
  table.grid.stacked td { display: block; width: auto; }
  table.grid.stacked thead { display: none; }
  table.grid.stacked tr { border: 1px solid var(--line); border-radius: 10px;
    background: var(--panel); padding: 10px 12px; margin: 0 0 10px; }
  table.grid.stacked td { border: 0; padding: 2px 0; text-align: right;
    display: flex; gap: 12px; align-items: baseline; justify-content: space-between; }
  table.grid.stacked td[data-label]::before { content: attr(data-label);
    color: var(--muted); font-size: 12px; font-weight: 600; text-align: left; flex: none; }
  /* 첫 칸은 이름이다. 카드 제목이라 이름표 없이 한 줄을 통째로 쓴다. */
  table.grid.stacked td:first-child { display: block; text-align: left;
    font-size: 15px; padding-bottom: 6px; }
  table.grid.stacked td:first-child .muted { display: block; }
  table.grid.stacked td.actions { justify-content: flex-end; padding-top: 8px; gap: 8px; }
  /* 카드가 이미 테두리를 가지므로 감싼 상자의 스크롤은 필요 없다. */
  .table-wrap { overflow-x: visible; }

  /* 시점별 표는 열이 열한 개인데 전부 숫자다. 카드로 접으면 시점 하나가 열한 줄이
     되어 훨씬 길어진다. 가로 스크롤을 두되 시점 열을 고정해 옆으로 밀어도 어느
     시점인지 잃지 않게 한다(스크롤 상자는 감싼 .card다). */
  table.grid.scroll-x th:first-child,
  table.grid.scroll-x td:first-child { position: sticky; left: 0; z-index: 1;
    background: var(--panel); box-shadow: 1px 0 0 var(--line);
    /* 날짜는 하이픈에서 끊긴다. keep-all로는 못 막아 따로 붙여 둔다. */
    white-space: nowrap; }

  /* 레이블이 길면 max-content 열이 값을 눌러 두 글자마다 줄이 바뀐다. 세로로 쌓는다. */
  dl.meta { grid-template-columns: 1fr; gap: 0; }
  dl.meta dt { margin-top: 10px; }
  dl.meta dt:first-child { margin-top: 0; }

  .only-narrow { display: block; }
}

/* 가격대별 1등 격자 */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; border-radius: 0; padding: 5px 12px; background: var(--panel); }
.seg button.on { background: var(--accent); color: #fff; }

.grid-wrap { margin: 16px 0; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); overflow: auto; max-height: 78vh; }
table.heatgrid { border-collapse: separate; border-spacing: 0; font-size: 12px; }
table.heatgrid th, table.heatgrid td {
  border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
table.heatgrid .rowhead { position: sticky; left: 0; z-index: 2; background: var(--panel);
  min-width: 76px; padding: 6px 8px; text-align: left; white-space: nowrap;
  font-weight: 600; font-variant-numeric: tabular-nums; }
table.heatgrid thead .rowhead { z-index: 3; top: 0; }
table.heatgrid .colhead { position: sticky; top: 0; z-index: 1; background: var(--panel);
  min-width: 138px; padding: 6px 8px; text-align: left; font-weight: 400; }
.chead-title { font-size: 13px; font-weight: 600; }
table.heatgrid .colhead.pending { min-width: 52px; max-width: 52px; padding: 6px 4px; }
.colhead.pending .chead-title { font-size: 11px; font-weight: 400; color: var(--muted); }
.chead-sub { font-size: 11px; color: var(--muted); }
.chead-sub.warn { color: var(--warn); }

td.cell { min-width: 138px; max-width: 152px; padding: 5px 8px; vertical-align: top; cursor: pointer; }
.cline { display: flex; align-items: baseline; gap: 5px; }
.cline > :first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cname { font-size: 12px; }
.cmeta, .cprice { font-size: 10.5px; color: var(--muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.cprice { font-variant-numeric: tabular-nums; }
.cpnl { font-size: 13px; font-variant-numeric: tabular-nums; }
/* 여러 칸을 먹은 단지 표시. 짚으면 같은 단지 칸이 전부 테두리로 살아난다. */
.crepeat { margin-left: auto; flex: none; font-size: 10px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 0 4px; }
td.cell.linked { box-shadow: inset 0 0 0 2px var(--muted); }
td.cell.picked, td.cell.linked.picked { box-shadow: inset 0 0 0 2px var(--accent); }
td.cell:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
td.cell.pending { min-width: 52px; max-width: 52px; cursor: default;
  background: repeating-linear-gradient(
    45deg, transparent, transparent 5px, var(--line) 5px, var(--line) 6px); }
.cname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cprice { color: var(--muted); font-variant-numeric: tabular-nums; }
.cret { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cempty { color: var(--muted); }

/* 색은 클래스로만 만든다 — CSP가 style-src 'self'라 인라인 스타일은 먹지 않는다. */
.heat.p1 { background: color-mix(in srgb, var(--up)  8%, transparent); }
.heat.p2 { background: color-mix(in srgb, var(--up) 16%, transparent); }
.heat.p3 { background: color-mix(in srgb, var(--up) 25%, transparent); }
.heat.p4 { background: color-mix(in srgb, var(--up) 34%, transparent); }
.heat.p5 { background: color-mix(in srgb, var(--up) 43%, transparent); }
.heat.p6 { background: color-mix(in srgb, var(--up) 52%, transparent); }
.heat.n1 { background: color-mix(in srgb, var(--down) 10%, transparent); }
.heat.n2 { background: color-mix(in srgb, var(--down) 20%, transparent); }
.heat.n3 { background: color-mix(in srgb, var(--down) 30%, transparent); }
.heat.n4 { background: color-mix(in srgb, var(--down) 40%, transparent); }
.heat.n5 { background: color-mix(in srgb, var(--down) 50%, transparent); }
.heat.n6 { background: color-mix(in srgb, var(--down) 60%, transparent); }
.swatch.heat { width: 18px; height: 12px; border: 1px solid var(--line); }

/* '내 기록'을 '추적 중'과 '정리한 기록' 두 덩어리로 나눈다. 제목이 표 위에
   바로 붙으면 어느 표가 무엇인지 읽히지 않아 위쪽 여백을 넉넉히 준다. */
.section-title { font-size: 15px; margin: 26px 0 8px; }
.section-title .muted { font-weight: 400; }
/* 끝난 기록은 지금 결정에 쓰이지 않는다. 한 단계 물러나 보이게 한다. */
table.grid.closed { opacity: .88; }
/* 방법론상 짚어야 하는 안내. 경고는 아니지만 흘려보내면 안 되는 문장이다. */
.note.warn { color: var(--warn); }

/* 매도 폼은 상세 화면 아래쪽에 있다. 위에서 바로 갈 수 있게 하고, 도착하면
   어디로 온 것인지 보이게 테두리를 준다. 스크롤이 제목에 딱 붙지 않게 여백도 둔다. */
.actions { margin: 10px 0 18px; }
#exit { scroll-margin-top: 16px; }
.card:target { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(29, 78, 216, .12); }
@media (prefers-color-scheme: dark) {
  .card:target { box-shadow: 0 0 0 2px rgba(122, 162, 255, .18); }
}

/* ── 입력 폼 (새 기록·매도) ──
   이름표를 칸 위에 둔다. 한 줄에 이름표와 칸을 번갈아 늘어놓으면 어느 이름표가
   어느 칸 것인지 읽히지 않는다. 폰에서는 한 열, 넓으면 두세 열로 흐른다. */
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px 18px; margin: 8px 0; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field > label { font-size: 13px; color: var(--muted); }
.field > label .req { color: var(--warn); font-size: 11px; margin-left: 4px; }
.field > label .opt { font-size: 11px; margin-left: 4px; }
.field > label.check, .field .checks label.check { color: var(--ink); display: inline-flex;
  gap: 5px; align-items: center; font-size: 13px; }
.field .checks { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.field input[type="text"], .field input[type="number"], .field select { width: 100%; }
.field .hint { font-size: 12px; color: var(--muted); }
.field.wide { grid-column: 1 / -1; }

.date-field { display: flex; gap: 6px; position: relative; }
.date-field input[type="text"] { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; }
.date-field .cal { flex: none; padding: 6px 10px; white-space: nowrap; }
/* 달력은 숨긴 date 입력의 것만 빌려 쓴다. showPicker가 없는 브라우저에서는 드러낸다. */
.date-field .date-picker { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px;
  opacity: 0; pointer-events: none; border: 0; padding: 0; }
.date-field .date-picker.shown { position: static; width: auto; height: auto; opacity: 1;
  pointer-events: auto; border: 1px solid var(--line); padding: 6px 9px; }

.money-field { display: flex; align-items: center; gap: 6px; }
.money-field input { flex: 1; min-width: 0; }
.money-field .unit { font-size: 13px; color: var(--muted); flex: none; }

/* 판 단지 정보는 체크했을 때만 열리는 상자다. 나머지 칸과 한 덩어리로 보이지 않게 한다. */
.subbox { border: 1px dashed var(--line); border-radius: 8px; padding: 10px 12px; margin: 12px 0; }
.subbox > .check { font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
.subbox .note { margin: 6px 0 4px; }

details.advanced { margin: 12px 0; }
details.advanced summary { cursor: pointer; font-size: 14px; }
details.advanced .fields { margin-top: 10px; }
.submit-row { margin-top: 14px; }