/* 얼마에 샀어? 공통 스타일 */
  :root { --gain: #1f9d55; --loss: #d64545; --gain-bg: #e9f7ef; --gain-ink: #126b39; --loss-bg: #fdecec; --loss-ink: #a52a2a; --trade: #2f6fdf; --presale: #e8913a; --unknown: #b7bcc6; --ink: #1d2230; --muted: #6b7280; --line: #e5e7eb; }
  * { box-sizing: border-box; }
  body { margin: 0; font-family: -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; color: var(--ink); background: #fff; }
  body.map #app { display: flex; height: calc(100vh - 48px); }
  #map { flex: 1; }
  #panel { width: 400px; padding: 20px; overflow-y: auto; border-left: 1px solid var(--line); }
  .banner { font-size: 12px; background: #fff7e6; border: 1px solid #f5d9a8; padding: 6px 10px; border-radius: 6px; margin-bottom: 12px; }
  .search { position: relative; margin-bottom: 16px; }
  .search input { width: 100%; font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; }
  .results { position: absolute; z-index: 1000; left: 0; right: 0; background: #fff; border: 1px solid var(--line); border-radius: 6px; margin-top: 4px; max-height: 320px; overflow-y: auto; box-shadow: 0 4px 12px rgba(0,0,0,.08); }
  .results div { padding: 7px 10px; font-size: 13px; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; }
  .results div:hover, .results div.on { background: #f3f6fd; }
  .results small { color: var(--muted); white-space: nowrap; }
  h1 { font-size: 20px; margin: 0 0 4px; }
  .sub { color: var(--muted); font-size: 13px; margin-bottom: 12px; }
  .total { font-size: 32px; font-weight: 700; }
  .total small { font-size: 14px; font-weight: 400; color: var(--muted); }
  .legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; margin: 12px 0 8px; }
  .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; }
  .row { display: grid; grid-template-columns: 74px 1fr auto 80px; align-items: center; gap: 8px; font-size: 13px; margin: 4px 0; }
  .row.head { font-size: 11px; color: var(--muted); margin-top: 10px; }
  .share { display: inline-block; min-width: 44px; color: var(--ink); font-size: 12px; }
  .sec-title { font-size: 16px; font-weight: 700; margin: 20px 0 4px; }
  .sec-desc { font-size: 12px; color: var(--muted); line-height: 1.5; margin-bottom: 4px; }
  .unknown-row { border-top: 1px dashed var(--line); padding-top: 6px; margin-top: 8px; }
  .be { text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .be.gain { color: var(--gain); } .be.loss { color: var(--loss); }
  .pl { margin: 14px 0 6px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
  .pl small { color: var(--muted); }
  .pl-head { font-weight: 600; margin-bottom: 8px; }
  .pl-head small { font-weight: 400; }
  .seg { display: flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin-bottom: 10px; }
  .seg button { flex: 1; font: inherit; font-size: 12px; padding: 6px 4px; border: 0; border-left: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; white-space: nowrap; }
  .seg button:first-child { border-left: 0; }
  .seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }
  .pl-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat { border-radius: 6px; padding: 8px 10px; }
  .stat.gain { background: var(--gain-bg); color: var(--gain-ink); }
  .stat.loss { background: var(--loss-bg); color: var(--loss-ink); }
  .stat .lbl { font-size: 12px; font-weight: 600; }
  .stat .num { font-size: 26px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
  .stat .num small { font-size: 13px; font-weight: 400; color: inherit; margin-left: 2px; }
  .stat .pct { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .plbar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: #f3f4f6; margin: 10px 0 8px; }
  .plbar span { height: 100%; }
  .pl-foot { font-size: 12px; color: var(--muted); }
  .pl-tax { margin-top: 8px; padding: 6px 8px; border-radius: 4px; background: #f6f7f9; font-size: 12px; color: var(--ink); }
  .pl-tax b { font-weight: 600; }
  .pl-foot b { color: var(--ink); font-variant-numeric: tabular-nums; }
  .bar { display: flex; height: 14px; background: #f3f4f6; border-radius: 3px; overflow: hidden; }
  .bar span { height: 100%; }
  .n { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
  .note { font-size: 12px; color: var(--muted); margin-top: 16px; line-height: 1.5; }
  .pending { margin-top: 16px; padding: 12px; background: #f6f7f9; border-radius: 6px; font-size: 13px; color: var(--muted); }
  .pin { background: var(--ink); color: #fff; border-radius: 10px; padding: 2px 7px; font-size: 11px; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.3); transform: translate(-50%, -50%); display: inline-block; cursor: pointer; }
  .pin.pend { background: #9ca3af; }
  .pin.tr { background: #475569; }
  .basis { margin-top: 12px; padding: 8px 10px; border-left: 3px solid var(--presale); background: #fff7ed; font-size: 12px; line-height: 1.5; }
  .pin.sel { background: var(--trade); }
  .tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 4px; }
  .tabs button { font: inherit; font-size: 12px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); cursor: pointer; }
  .tabs button small { color: var(--muted); margin-left: 4px; }
  .tabs button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
  .tabs button[aria-selected="true"] small { color: #cfd3dc; }
  @media (max-width: 760px) {
    body.map #app { flex-direction: column; height: auto; }
    #map { height: 50vh; flex: none; }
    #panel { width: 100%; border-left: 0; border-top: 1px solid var(--line); padding: 16px; }
  }

  /* 공통 머리·바닥 */
  a { color: var(--trade); }
  .top { height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--line); background: #fff; }
  .brand { font-weight: 800; font-size: 17px; color: var(--ink); text-decoration: none; white-space: nowrap; }
  .top nav { display: flex; align-items: center; gap: 14px; font-size: 13px; overflow-x: auto; }
  .top nav a { color: var(--ink); text-decoration: none; white-space: nowrap; }
  #auth button { font: inherit; font-size: 12px; padding: 5px 10px; border-radius: 6px; border: 1px solid var(--line); background: #fff; cursor: pointer; white-space: nowrap; }
  #auth .who { font-size: 12px; color: var(--muted); margin-right: 6px; white-space: nowrap; }
  .foot { border-top: 1px solid var(--line); padding: 20px 16px 32px; font-size: 12px; color: var(--muted); line-height: 1.6; background: #fafafa; }
  .foot-gu { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 10px; }
  .foot-gu a { color: var(--muted); }
  /* 내용 페이지 */
  .content { max-width: 760px; margin: 0 auto; padding: 20px 16px 40px; }
  .content h1 { font-size: 26px; margin: 8px 0 6px; }
  .content h2 { font-size: 18px; margin: 28px 0 8px; }
  .crumb { font-size: 12px; color: var(--muted); }
  .crumb a { color: var(--muted); }
  .status-note { font-size: 13px; color: var(--muted); margin: 8px 0; }
  .summary-pl { font-size: 15px; margin: 10px 0; }
  .summary-pl b { color: var(--gain-ink); }
  .summary-pl small { color: var(--muted); font-size: 12px; }
  .markets { border-collapse: collapse; width: 100%; font-size: 14px; }
  .markets th, .markets td { text-align: left; padding: 7px 6px; border-bottom: 1px solid var(--line); font-weight: 400; }
  .markets td:nth-child(2) { font-weight: 700; font-variant-numeric: tabular-nums; }
  .markets small, .markets td:nth-child(3) { color: var(--muted); font-size: 12px; }
  .asof { font-size: 12px; color: var(--muted); margin-top: 16px; }
  .nearby, .apt-list, .gu-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 16px; font-size: 14px; }
  .apt-list { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .nearby small, .apt-list small, .gu-list small { color: var(--muted); font-size: 12px; margin-left: 4px; }
  .apt-list li { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid #f1f2f4; padding: 4px 0; }
  .prose { line-height: 1.7; font-size: 15px; }
  .intro-title { font-size: 20px; }
  .open-page { display: inline-block; margin-top: 6px; font-size: 13px; }
  /* 가입 안내 */
  .gate { margin-top: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #fffdf5; }
  .gate-title { font-weight: 700; font-size: 16px; margin-bottom: 6px; }
  .gate p { font-size: 13px; color: var(--ink); margin: 6px 0 10px; line-height: 1.5; }
  .gate label { display: flex; align-items: center; gap: 6px; font-size: 13px; margin: 6px 0; }
  .kakao { width: 100%; margin-top: 10px; padding: 12px; border: 0; border-radius: 8px; background: #FEE500; color: rgba(0,0,0,.85); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
  .kakao:disabled { opacity: .45; cursor: not-allowed; }
  .linklike { border: 0; background: none; color: var(--trade); font: inherit; font-size: 13px; cursor: pointer; padding: 0; text-decoration: underline; }
  .free-left { font-size: 12px; color: var(--muted); margin-top: 6px; }