/* 와싸다 모니터 — 대시보드 스타일
   app.py의 인라인 f-string HTML에서 분리한 단일 스타일시트. */

/* 색은 이 서비스가 다루는 물건 — 빈티지 하이파이 기기 — 에서 가져왔다.
   바탕은 앰프 전면 패널의 따뜻한 블랙, 강조는 매킨토시 미터의 글로우 블루,
   가격 판정(저렴/적정/비쌈)은 리시버 피크 레벨 미터의 초록-앰버-레드 스케일.
   레벨이 오를수록 위험해지는 그 구조가 가격 판정과 그대로 맞아떨어진다.
   초록·앰버·레드는 판정 전용이다. 거래구분 배지가 같은 색을 쓰면 신호가
   흐려지므로 파랑/중립으로 분리했다. */
:root {
  --bg: #14110F;
  --bg-elev: #1C1815;
  --panel: #201B18;
  --panel-hi: #2A2421;
  --line: #3B322C;
  --line-soft: #ffffff12;

  --text: #F0EAE2;
  --text-dim: #A99E92;
  --text-faint: #7A6F65;

  --acc: #4C9EFF;
  --acc-dim: #2C6DB8;

  --ok: #2FE07A;
  --warn: #FFB627;
  --bad: #FF4D4D;

  --buy: #7FBFFF;
  --buy-bg: #14375f;
  --sell: #C4B6A6;
  --sell-bg: #3B322C;
  --report: #FF8A80;
  --report-bg: #5E2320;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  --shadow: 0 1px 2px #0006, 0 4px 16px #0004;
  --font: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 상단 네비 ---------- */

.nav {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
  flex-wrap: wrap;
}

.nav__brand {
  color: var(--acc);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.nav__links { display: flex; gap: var(--sp-4); }

.nav__links a {
  color: var(--text-dim);
  text-decoration: none;
  padding: 2px 0;
  border-bottom: 2px solid transparent;
}
.nav__links a:hover { color: var(--text); }
.nav__links a[aria-current="page"] {
  color: var(--text);
  border-bottom-color: var(--acc);
}

.nav__search { margin-left: auto; display: flex; gap: var(--sp-2); }
.nav__search input { width: 210px; }

.nav__host {
  color: var(--text-faint);
  font-size: 12px;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .nav { gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
  .nav__search { margin-left: 0; width: 100%; }
  .nav__search input { width: 100%; }
  .nav__host { display: none; }
}

/* ---------- 레이아웃 ---------- */

.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-4) 80px;
}

.page-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.page-head h1 { margin: 0; font-size: 20px; font-weight: 650; }
.page-head .sub { color: var(--text-dim); font-size: 13px; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-4);
}
.panel > h2, .panel > h3 { margin-top: 0; }

.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  flex-wrap: wrap;
}

h2 { font-size: 17px; font-weight: 650; margin: 0 0 var(--sp-3); }
h3 { font-size: 14px; font-weight: 650; color: var(--acc); margin: 0 0 var(--sp-3); letter-spacing: .01em; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } }

/* ---------- 통계 카드 ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: inherit;
  text-decoration: none;
  transition: border-color .12s, background .12s;
}
a.card:hover {
  background: var(--panel-hi);
  text-decoration: none;
}
a.card:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* 카드별 성격을 왼쪽 테두리 색으로 구분한다. */
.card--today { border-left-color: var(--acc); }
.card--cheap { border-left-color: var(--ok); }
.card--onsale { border-left-color: var(--text-faint); }
.card--risky { border-left-color: var(--bad); }

.card__val {
  font-size: 22px;
  font-weight: 680;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.card--cheap .card__val { color: var(--ok); }
.card--risky .card__val { color: var(--bad); }
.card__label { color: var(--text-dim); font-size: 12px; }

/* ---------- 표 ---------- */

.table-scroll { overflow-x: auto; margin: 0 calc(-1 * var(--sp-5)); padding: 0 var(--sp-5); }

table { width: 100%; border-collapse: collapse; font-size: 13px; }

th {
  text-align: left;
  color: var(--text-dim);
  font-weight: 500;
  font-size: 12px;
  padding: var(--sp-2);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  position: sticky;
  top: 0;
  background: var(--panel);
  z-index: 1;
}

td {
  padding: var(--sp-2);
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}

tbody tr:hover td { background: #ffffff0a; }
tbody tr:last-child td { border-bottom: 0; }

.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.t-title { min-width: 220px; }
.empty { color: var(--text-faint); text-align: center; padding: var(--sp-5) !important; }

tr.is-rec td { background: #2FE07A14; }
tr.is-rec:hover td { background: #2FE07A24; }

/* 저렴 판정은 훑어볼 때 가장 먼저 눈에 들어와야 한다. 추천 판매자 강조가
   배경색을 쓰므로 겹치지 않도록 왼쪽 테두리로 구분한다. */
tr.is-cheap td:first-child { box-shadow: inset 3px 0 0 var(--ok); }

/* ---------- 매물 표: 좁은 화면에서 카드로 ---------- */

/* 컬럼이 7개라 폰에서는 가로 스크롤 없이 읽을 수 없다. 행을 카드로 바꿔
   제목·가격을 앞세우고, 상세 페이지에서 다시 볼 수 있는 모델키는 숨긴다. */
@media (max-width: 720px) {
  .table-scroll--cards { overflow-x: visible; margin: 0; padding: 0; }

  .listings, .listings tbody, .listings tr, .listings td { display: block; }
  .listings thead { display: none; }

  .listings tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px var(--sp-3);
    align-items: baseline;
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--sp-3);
    margin-bottom: var(--sp-2);
  }
  .listings td { border: 0; padding: 0; }

  /* DOM 순서(게시일이 첫 칸)를 그대로 두면 날짜가 카드 맨 위에 온다.
     제목 → 가격·판정 → 판매자·위험 → 게시일 순으로 다시 앉힌다. */
  .listings .c-title { grid-area: 1 / 1 / 2 / 3; font-size: 14px; line-height: 1.45; }
  .listings .c-price {
    grid-area: 2 / 1 / 3 / 2;
    text-align: left;
    font-size: 16px;
    font-weight: 680;
  }
  .listings .c-fair { grid-area: 2 / 2 / 3 / 3; text-align: right; }
  .listings .c-seller {
    grid-area: 3 / 1 / 4 / 2;
    color: var(--text-dim);
    font-size: 12px;
  }
  .listings .c-risk { grid-area: 3 / 2 / 4 / 3; text-align: right; }
  .listings .c-date { grid-area: 4 / 1 / 5 / 3; font-size: 11px; }
  .listings .c-model { display: none; }

  /* 빈 결과 행은 카드 격자를 쓰지 않는다. */
  .listings tr.is-empty { display: block; background: none; border: 0; padding: 0; }
  .listings .empty { padding: var(--sp-5) 0 !important; }

  /* 데스크톱의 행 강조를 카드 테두리로 옮긴다. */
  .listings tr.is-rec { background: #2FE07A14; }
  .listings tr.is-rec td { background: none; }
  .listings tr.is-cheap { border-left: 3px solid var(--ok); }
  .listings tr.is-cheap td:first-child { box-shadow: none; }
}

/* ---------- 링크·타이포 ---------- */

a { color: var(--acc); text-decoration: none; }
a:hover { text-decoration: underline; }

small, .dim { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.mono { font-family: var(--mono); font-size: 12px; }

/* ---------- 배지 ---------- */

.badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  vertical-align: middle;
}
.badge--buy { background: var(--buy-bg); color: var(--buy); }
.badge--sell { background: var(--sell-bg); color: var(--sell); }
.badge--report { background: var(--report-bg); color: var(--report); }

.lbl {
  display: inline-block;
  padding: 1px 7px;
  margin-left: var(--sp-1);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  vertical-align: middle;
}

.credit {
  display: inline-block;
  min-width: 26px;
  text-align: center;
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.credit--hi { background: #17512F; color: #7FE8A8; }
.credit--mid { background: #5A400F; color: var(--warn); }
.credit--lo { background: #5E2320; color: var(--report); }
.credit--na { background: var(--line); color: var(--text-faint); }

/* 판정·위험 신호는 LED처럼 발광시킨다. 표를 훑을 때 가장 먼저 걸려야 하는
   정보라서, 페이지에서 빛나는 요소는 여기로 제한한다. */
/* 실거래 근거 없이 호가로만 낸 판정. 판정 자체를 지우기보다 신뢰도를 함께
   보여준다. 전체 모델의 96%가 여기 해당한다. */
.est {
  margin-left: 4px;
  padding: 0 5px;
  border: 1px solid var(--line);
  border-radius: 20px;
  font-size: 10px;
  color: var(--text-faint);
  white-space: nowrap;
  vertical-align: middle;
}

.risk {
  color: var(--bad);
  font-weight: 700;
  white-space: nowrap;
  text-shadow: 0 0 8px #FF4D4D66;
}
.rec-star { filter: drop-shadow(0 0 4px #2FE07Aaa); }

ul.risk-list { margin: var(--sp-2) 0; padding-left: 18px; color: var(--report); }

/* ---------- 폼 ---------- */

input, select, textarea {
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 7px 10px;
  font-size: 13px;
  font-family: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--acc-dim);
  outline-offset: 1px;
  border-color: var(--acc-dim);
}
input::placeholder { color: var(--text-faint); }

button, .btn {
  background: var(--acc);
  color: #0A2440;
  border: 0;
  border-radius: var(--r-sm);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 650;
  font-family: inherit;
  cursor: pointer;
}
button:hover, .btn:hover { filter: brightness(1.08); }
button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

button.ghost {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--line);
}
button.ghost:hover { color: var(--text); border-color: var(--acc-dim); }

.form-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.form-row input[type="text"], .form-row input:not([type]) { flex: 1; min-width: 200px; }

/* ---------- 접이식 통계 (모바일) ---------- */

/* 넓은 화면에서는 접는 장치가 보일 이유가 없다. 기존 화면 그대로 둔다. */
.fold__head { display: none; }

@media (max-width: 720px) {
  .fold__head {
    display: block;
    list-style: none;
    cursor: pointer;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-4);
    color: var(--acc);
    font-size: 14px;
    font-weight: 650;
  }
  .fold__head::-webkit-details-marker { display: none; }
  .fold__head::after { content: " ▾"; color: var(--text-faint); }
  .fold[open] .fold__head::after { content: " ▴"; }
}

/* ---------- 검색 필터 바 ---------- */

.filters { display: flex; flex-direction: column; gap: var(--sp-3); }

.filters__row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.filters__q { flex: 1; min-width: 220px; }

.filters__field {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
}
.filters__field select { padding: 6px 8px; }

.filters__range { display: flex; align-items: center; gap: var(--sp-2); }
.filters__range input { width: 78px; }

.filters__check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  cursor: pointer;
}
.filters__check input { accent-color: var(--acc); cursor: pointer; }
.filters__check:hover { color: var(--text); }

.filters__reset { font-size: 12px; color: var(--text-faint); }
.filters__reset:hover { color: var(--acc); }

@media (max-width: 720px) {
  .filters__row { gap: var(--sp-2); }
  /* 입력칸이 패널 밖으로 잘리지 않게 축소를 허용한다(min-width 기본값이 auto라
     flex 항목이 콘텐츠 폭 아래로 줄지 않는다). */
  .filters__field--price { width: 100%; min-width: 0; }
  .filters__range { flex: 1; min-width: 0; }
  .filters__range input { flex: 1; width: auto; min-width: 0; }
}

/* ---------- 도움말 아코디언 ---------- */

.howto { margin: var(--sp-2) 0 var(--sp-3); font-size: 12.5px; color: var(--text-dim); }
.howto summary { cursor: pointer; color: var(--acc); user-select: none; }
.howto summary:hover { text-decoration: underline; }
.howto .box {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-2);
  line-height: 1.75;
  background: #ffffff04;
}
.howto b.k { color: var(--text); }

/* ---------- 모달 ---------- */

.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: #000a;
  backdrop-filter: blur(2px);
  z-index: 50;
  align-items: flex-start;
  justify-content: center;
  padding: 40px var(--sp-4);
  overflow-y: auto;
}
.modal.is-open { display: flex; }

.modal__box {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 720px;
  padding: var(--sp-5);
  position: relative;
}

.modal__close {
  position: absolute;
  top: 10px;
  right: 14px;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 22px;
  line-height: 1;
  background: none;
  border: 0;
  padding: 4px 8px;
}
.modal__close:hover { color: var(--text); }

.lbl-btn {
  display: inline-block;
  margin: 2px;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 11px;
  cursor: pointer;
  border: 1px dashed var(--line);
  color: var(--text-dim);
}
.lbl-btn:hover { color: var(--text); border-color: var(--acc); }
.lbl-x { margin-left: 5px; cursor: pointer; opacity: .6; }
.lbl-x:hover { opacity: 1; color: #fff; }

/* ---------- 차트 ---------- */

.chart { position: relative; width: 100%; }
.chart canvas { max-width: 100%; }

/* ---------- 유틸 ---------- */

.hidden { display: none !important; }
.stack > * + * { margin-top: var(--sp-3); }
.body-text {
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--sp-3);
  max-height: 420px;
  overflow-y: auto;
  font-size: 13px;
}

/* ---------- 사기·분쟁 연락처 ---------- */

.fcards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--sp-3);
  /* 지목 이력이 열 건인 카드가 한 행 전체를 늘려 옆 카드에 빈칸이 생긴다. */
  align-items: start;
}
.fcard {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--sp-3);
}
/* 근거가 제시된 건만 눈에 띄게 한다. 주장 단계까지 빨갛게 칠하면
   전부 같은 무게로 보여 구분이 사라진다. */
.fcard--conf { border-left-color: var(--bad); }
.fcard__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.fcard__key { font-size: 15px; font-weight: 650; }
.fcard__cnt { color: var(--text-dim); font-size: 12px; margin-left: auto; }
.fcard__alt { color: var(--text-dim); font-size: 12px; margin-top: var(--sp-1); }

.frefs { list-style: none; margin: var(--sp-2) 0 0; padding: 0; font-size: 12.5px; }
.frefs li + li { margin-top: 2px; }
/* 제목을 flex 항목으로 두면 좁은 화면에서 줄바꿈되지 않고 카드 밖으로
   밀려나간다. 블록으로 흘려보내고 날짜만 앞에 붙인다. */
.frefs a {
  display: block;
  color: var(--text-dim);
  text-decoration: none;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.frefs a:hover { color: var(--text); }
.frefs__d {
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  margin-right: var(--sp-2);
}

@media (max-width: 720px) {
  .fcards { grid-template-columns: 1fr; }
}