/* =============================================================
   구남연구소 디자인 시스템 v1
   컨셉: "종이 위의 새벽 경매 전광판"
   - 새벽빛 종이(#F7F8F4) 위에 잉크 그린(#14241B) 보드 한 장
   - 명조 헤드라인(연구 보고서의 격) + Pretendard 데이터 활자
   - 등락: 한국 시장 관례 (빨강=상승, 파랑=하락)
   ============================================================= */

:root {
  /* 컬러 토큰 */
  --paper: #F7F8F4;        /* 바탕 종이 */
  --paper-raise: #FFFFFF;  /* 카드 표면 */
  --dawn: #E8EDE4;         /* 옅은 구분면 */
  --hairline: #D8DFD3;     /* 괘선 */
  --ink: #14241B;          /* 잉크 그린-블랙 (본문·보드 배경) */
  --ink-soft: #47554C;     /* 보조 텍스트 */
  --ink-mute: #7B877E;     /* 캡션 */
  --stem: #1F6B45;         /* 브랜드 그린 (주 액션) */
  --stem-deep: #14522F;
  --stem-tint: #E3EFE7;    /* 그린 배경 틴트 */
  --rise: #C23327;         /* 상승·경고 (도장 빨강) */
  --rise-tint: #F9E9E6;
  --fall: #2B5BA8;         /* 하락·정보 파랑 */
  --fall-tint: #E7EDF7;
  --board-ink: #0E1D14;    /* 전광판 패널 */
  --board-line: #24382C;   /* 전광판 괘선 */
  --board-text: #E9F2EA;   /* 전광판 밝은 글자 */
  --board-mute: #8FA695;   /* 전광판 보조 글자 */
  --board-rise: #FF8A75;   /* 전광판 위 상승(밝게 보정) */
  --board-fall: #8FB8FF;   /* 전광판 위 하락(밝게 보정) */
  --gold: #B98A2F;         /* 특급 배지 등 아주 절제된 포인트 */

  /* 타이포 */
  --serif: "Noto Serif KR", "Nanum Myeongjo", serif;
  --sans: "Pretendard Variable", Pretendard, -apple-system, "Malgun Gothic", sans-serif;

  /* 치수 */
  --radius: 10px;
  --radius-lg: 16px;
  --wrap: 1200px;
  --shadow: 0 1px 2px rgba(20,36,27,.05), 0 6px 24px -12px rgba(20,36,27,.12);
  --shadow-board: 0 2px 4px rgba(14,29,20,.25), 0 18px 44px -18px rgba(14,29,20,.45);
}

/* ---------- 베이스 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  font-size: 15px;
  letter-spacing: -0.01em;
}
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--stem); outline-offset: 2px; border-radius: 4px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }

.num { font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* ---------- 헤더 ---------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247,248,244,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.site-head .wrap {
  display: flex; align-items: center; gap: 20px;
  height: 58px;
}
.brand { display: flex; align-items: baseline; gap: 8px; flex-shrink: 0; }
.brand .brand-name {
  font-family: var(--serif); font-weight: 900; font-size: 20px;
  letter-spacing: 0.02em; color: var(--ink);
}
.brand .brand-sub {
  font-size: 10.5px; font-weight: 700; color: var(--stem);
  letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid var(--stem); padding: 1px 6px; border-radius: 3px;
}
.gnb { display: none; }
.head-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.btn-login {
  background: var(--ink); color: var(--paper); border: none;
  padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 700;
}
.btn-login:hover { background: var(--stem-deep); }
.user-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--stem-tint); color: var(--stem-deep);
  padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
}
.user-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--stem); }

/* PC 내비게이션 */
@media (min-width: 900px) {
  .gnb { display: flex; gap: 2px; }
  .gnb a {
    padding: 8px 13px; border-radius: 8px; font-size: 14px; font-weight: 600;
    color: var(--ink-soft);
  }
  .gnb a:hover { background: var(--dawn); color: var(--ink); }
  .gnb a.on { color: var(--stem-deep); background: var(--stem-tint); font-weight: 800; }
}

/* 모바일 상단 카테고리 탭 — 헤더에 붙는 가로 스크롤 필터칩 */
.top-tabs {
  display: flex; gap: 6px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 0 16px 10px;
  scrollbar-width: none;
}
.top-tabs::-webkit-scrollbar { display: none; }
.top-tabs a {
  flex-shrink: 0;
  padding: 7px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 700;
  color: var(--ink-soft);
  border: 1px solid var(--hairline); background: var(--paper-raise);
}
.top-tabs a.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@media (min-width: 900px) { .top-tabs { display: none; } }

/* ---------- 페이지 공통 ---------- */
.page-head { padding: 28px 0 6px; }
.eyebrow {
  font-size: 11.5px; font-weight: 800; letter-spacing: .18em;
  color: var(--stem); text-transform: uppercase; margin-bottom: 6px;
}
h1.page-title {
  font-family: var(--serif); font-weight: 900; font-size: 27px;
  line-height: 1.25; letter-spacing: -0.01em;
}
.page-desc { color: var(--ink-soft); font-size: 14px; margin-top: 8px; max-width: 640px; }
.section { margin: 30px 0; }
.section-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
h2.section-title { font-family: var(--serif); font-weight: 700; font-size: 19px; }
.section-note { font-size: 12.5px; color: var(--ink-mute); }
.more-link { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--stem-deep); }
.more-link:hover { text-decoration: underline; }

@media (min-width: 900px) {
  body { font-size: 15.5px; }
  .page-head { padding: 44px 0 10px; }
  h1.page-title { font-size: 36px; }
  .section { margin: 44px 0; }
  h2.section-title { font-size: 22px; }
}

/* ---------- 카드 ---------- */
.card {
  background: var(--paper-raise);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 18px;
}
.card + .card { margin-top: 12px; }
.card-title { font-weight: 800; font-size: 15px; margin-bottom: 8px; }
/* 링크 카드는 눌리는 물건처럼 */
a.card { display: block; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
a.card:hover {
  border-color: var(--stem); transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(20,36,27,.06), 0 16px 36px -14px rgba(20,36,27,.2);
}
.grid { display: grid; gap: 12px; }
.grid > * { min-width: 0; } /* 내부 테이블(min-width)이 그리드 셀을 벌리지 않게 */
@media (min-width: 700px)  { .grid.cols-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .grid.cols-2-1 { grid-template-columns: 2fr 1fr; } }

/* ---------- 전광판 (시그니처) ----------
   본문은 밝은 종이(가독성), 헤더 밴드만 잉크 그린으로 전광판 정체성 유지 */
.board {
  background: var(--paper-raise);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.board-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 13px 18px;
  background: var(--board-ink);
  color: var(--board-text);
}
.board-head .board-title {
  font-family: var(--serif); font-weight: 700; font-size: 15px; letter-spacing: .04em;
}
.badge-live {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 800; letter-spacing: .12em;
  color: var(--board-ink); background: var(--board-text);
  padding: 2px 8px; border-radius: 3px;
}
.badge-live .pulse {
  width: 6px; height: 6px; border-radius: 50%; background: var(--rise);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.board-head .board-date { margin-left: auto; font-size: 12px; color: var(--board-mute); }
.board-scroll { overflow-x: auto; }
table.board-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.board-table th {
  text-align: right; font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
  color: var(--ink-soft); background: var(--dawn);
  padding: 9px 14px; border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}
.board-table th:first-child { text-align: left; }
.board-table td {
  padding: 10px 14px; text-align: right; font-size: 14.5px;
  border-bottom: 1px solid #EEF1EA; white-space: nowrap;
}
.board-table tbody tr:hover td { background: #FBFCF9; }
.board-table tr:last-child td { border-bottom: none; }
.board-table td:first-child { text-align: left; }
.board-table .item-name { font-weight: 800; }
.board-table .item-sub { font-size: 11.5px; color: var(--ink-mute); display: block; }
.board-table .avg { font-weight: 800; font-size: 16px; }
.chg { font-weight: 700; }
.board-foot {
  padding: 10px 18px; font-size: 11px; color: var(--ink-mute);
  border-top: 1px solid var(--hairline); background: var(--dawn);
}

/* 종이 위 등락 색 */
.chg.up { color: var(--rise); }
.chg.down { color: var(--fall); }
.chg.flat { color: var(--ink-mute); }

/* ---------- 히어로 (홈) ---------- */
.hero { padding: 30px 0 8px; }
.hero-kicker {
  font-size: 12px; font-weight: 800; letter-spacing: .2em; color: var(--stem);
  text-transform: uppercase; margin-bottom: 10px;
}
.hero h1 {
  font-family: var(--serif); font-weight: 900;
  font-size: clamp(26px, 5.4vw, 44px);
  line-height: 1.3; letter-spacing: -0.015em;
  max-width: 720px;
}
.hero h1 .accent { color: var(--stem-deep); }
.hero-sub { margin-top: 12px; color: var(--ink-soft); font-size: 14.5px; max-width: 560px; }
@media (min-width: 900px) { .hero { padding: 52px 0 12px; } .hero-sub { font-size: 16px; } }

/* ---------- 상태 배지 ---------- */
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; }
.status .s-dot { width: 8px; height: 8px; border-radius: 50%; }
.status.open  { color: var(--stem-deep); } .status.open .s-dot { background: var(--stem); }
.status.close { color: var(--rise); }      .status.close .s-dot { background: var(--rise); }
.status.soon  { color: var(--gold); }      .status.soon .s-dot { background: var(--gold); }

/* ---------- 칩 필터 ---------- */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 10px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex-shrink: 0; border: 1px solid var(--hairline); background: var(--paper-raise);
  color: var(--ink-soft); padding: 7px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600;
}
.chip:hover { border-color: var(--stem); color: var(--stem-deep); }
.chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); font-weight: 700; }

/* ---------- 데이터 테이블 (종이) ---------- */
.table-scroll { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--paper-raise); box-shadow: var(--shadow); }
table.data { width: 100%; border-collapse: collapse; min-width: 640px; }
.data th {
  position: sticky; top: 0;
  background: var(--dawn); text-align: right; padding: 10px 14px;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--ink-soft);
  white-space: nowrap; border-bottom: 1px solid var(--hairline);
}
.data th:first-child { text-align: left; }
.data td {
  padding: 11px 14px; text-align: right; font-size: 14px;
  border-bottom: 1px solid #EEF1EA; white-space: nowrap;
}
.data tr:last-child td { border-bottom: none; }
.data td:first-child { text-align: left; }
.data tbody tr:hover { background: #FBFCF9; }

/* ---------- D-day ---------- */
.dday-list { display: flex; flex-direction: column; gap: 10px; }
.dday {
  display: flex; align-items: center; gap: 12px;
  background: var(--paper-raise); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 12px 14px;
}
.dday .d-num {
  font-family: var(--serif); font-weight: 900; font-size: 17px;
  color: var(--stem-deep); min-width: 52px;
}
.dday .d-num.urgent { color: var(--rise); }
.dday .d-body { min-width: 0; }
.dday .d-title { font-weight: 700; font-size: 14px; }
.dday .d-note { font-size: 12px; color: var(--ink-mute); }
.dday .d-date { margin-left: auto; font-size: 12px; color: var(--ink-mute); white-space: nowrap; }

/* ---------- 브리핑 ---------- */
.briefing { border-left: 3px solid var(--stem); padding-left: 14px; display: flex; flex-direction: column; gap: 10px; }
.briefing p { font-size: 14px; color: var(--ink-soft); }
.briefing p strong { color: var(--ink); }

/* ---------- 버튼 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 10px; font-weight: 700; font-size: 14.5px;
  padding: 12px 20px; border: 1px solid transparent;
  transition: background .15s ease;
}
.btn-primary { background: var(--stem); color: #fff; }
.btn-primary:hover { background: var(--stem-deep); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--board-ink); }
.btn-ghost { border-color: var(--hairline); background: var(--paper-raise); color: var(--ink); }
.btn-ghost:hover { border-color: var(--stem); color: var(--stem-deep); }
.btn-block { width: 100%; }

/* ---------- 회원 게이트 ---------- */
.gate { position: relative; }
.gate.locked .gate-content { filter: blur(7px); pointer-events: none; user-select: none; }
.gate-cover {
  position: absolute; inset: 0; z-index: 5;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 10px; padding: 24px;
  background: linear-gradient(180deg, rgba(247,248,244,.55), rgba(247,248,244,.88));
  border-radius: var(--radius-lg);
}
.gate.locked .gate-cover { display: flex; }
.gate-cover .g-icon { color: var(--stem-deep); }
.gate-cover .g-icon svg { width: 28px; height: 28px; stroke-width: 1.8; }
.gate-cover .g-title { font-family: var(--serif); font-weight: 700; font-size: 17px; }
.gate-cover .g-desc { font-size: 13px; color: var(--ink-soft); max-width: 320px; }

/* ---------- 시장 카드 ---------- */
.market-card .m-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.market-card .m-name { font-family: var(--serif); font-weight: 700; font-size: 17px; }
.market-card .m-org { font-size: 12px; color: var(--ink-mute); }
.market-card .m-status { margin-left: auto; }
.zone-row {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 8px 0; border-top: 1px solid #EEF1EA; font-size: 13.5px;
}
.zone-row .z-name { color: var(--ink-soft); display: inline-flex; align-items: center; gap: 7px; }
.z-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.z-dot.on { background: var(--stem); }
.z-dot.off { background: #C9CFC7; }
.zone-row .z-time { font-weight: 700; white-space: nowrap; }
.m-meta { margin-top: 10px; font-size: 12.5px; color: var(--ink-mute); display: flex; flex-direction: column; gap: 4px; }
.m-tips { margin-top: 10px; padding: 10px 12px; background: var(--stem-tint); border-radius: 8px; font-size: 12.5px; color: var(--stem-deep); }
.m-tips li { margin-left: 16px; }

/* ---------- 품종 카드 ---------- */
.variety-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.v-card {
  background: var(--paper-raise); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 12px; position: relative;
}
.v-card .v-swatch { width: 100%; height: 6px; border-radius: 3px; margin-bottom: 9px; }
.v-card .v-name { font-weight: 800; font-size: 14.5px; }
.v-card .v-pum { font-size: 11.5px; color: var(--ink-mute); }
.v-card .v-tag {
  display: inline-block; margin-top: 7px; font-size: 10.5px; font-weight: 700;
  color: var(--stem-deep); background: var(--stem-tint);
  padding: 2px 7px; border-radius: 4px;
}
.v-count { font-size: 12.5px; color: var(--ink-mute); }

/* 색상 스와치 */
.sw-적색 { background: #C0392B; } .sw-분홍 { background: #E4A0B0; }
.sw-황색 { background: #E4C24A; } .sw-백색 { background: #EDEAE2; border: 1px solid var(--hairline); }
.sw-주황 { background: #DD8544; } .sw-자주 { background: #8E4585; }
.sw-청색 { background: #5B7DB1; } .sw-그린 { background: #6C9A6E; }
.sw-혼합 { background: linear-gradient(90deg,#C0392B,#E4C24A,#5B7DB1); }
.sw-기타 { background: #CDD4CA; }

/* ---------- 시즌 캘린더 ---------- */
.season-card { border-left: 4px solid var(--hairline); }
.season-card.peak { border-left-color: var(--rise); }
.season-card.now { border-left-color: var(--stem); }
.season-card .s-month {
  font-family: var(--serif); font-weight: 900; font-size: 21px; color: var(--ink);
}
.season-card .s-title { font-weight: 800; font-size: 15px; margin-top: 2px; }
.season-card .s-badge {
  font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 4px;
  vertical-align: 2px; margin-left: 6px;
}
.s-badge.peak { background: var(--rise-tint); color: var(--rise); }
.s-badge.now { background: var(--stem-tint); color: var(--stem-deep); }
.season-card .s-events { font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; }
.season-card .s-items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.season-card .s-item {
  font-size: 11.5px; font-weight: 700; color: var(--ink-soft);
  background: var(--dawn); padding: 3px 9px; border-radius: 999px;
}
.season-card .s-impact { font-size: 13px; margin-top: 10px; color: var(--ink-soft); }
.season-card .s-tip {
  margin-top: 9px; font-size: 12.5px; color: var(--stem-deep);
  background: var(--stem-tint); padding: 9px 12px; border-radius: 8px;
}
.season-card .s-tip::before { content: "사입 메모 — "; font-weight: 800; }

/* ---------- 월간 달력 ---------- */
.cal-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 14px; }
.cal-nav .cal-title {
  font-family: var(--serif); font-weight: 900; font-size: 21px;
  min-width: 150px; text-align: center;
}
.cal-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--hairline); background: var(--paper-raise);
  color: var(--ink); font-size: 15px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.cal-btn:hover:not(:disabled) { border-color: var(--stem); color: var(--stem-deep); }
.cal-btn:disabled { opacity: .3; cursor: default; }

.cal {
  background: var(--paper-raise); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden;
}
.cal-week, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-week span {
  text-align: center; padding: 9px 0; font-size: 11px; font-weight: 800;
  letter-spacing: .08em; color: var(--ink-soft); background: var(--dawn);
}
.cal-week span:first-child { color: var(--rise); }
.cal-week span:last-child { color: var(--fall); }
.cal-cell {
  min-height: 58px; padding: 6px 5px 5px;
  border-top: 1px solid #EEF1EA; border-right: 1px solid #EEF1EA;
  position: relative;
}
.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell.out { background: #FBFCF9; }
.cal-cell.holiday { background: var(--rise-tint); }
.cal-d {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; border-radius: 50%;
  font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.cal-d.sun { color: var(--rise); }
.cal-d.sat { color: var(--fall); }
.cal-cell.today .cal-d { background: var(--ink); color: var(--paper); }
.cal-holiday-label {
  display: block; font-size: 9.5px; font-weight: 800; color: var(--rise);
  margin-top: 2px; letter-spacing: .04em;
}
.cal-dots { display: flex; gap: 3px; margin-top: 4px; flex-wrap: wrap; }
.cal-dot { width: 6px; height: 6px; border-radius: 50%; }
.dot-cut { background: var(--stem); }
.dot-orc { background: var(--gold); }
.dot-fol { background: var(--fall); }
.cal-evdot { width: 6px; height: 6px; background: var(--rise); border-radius: 1.5px; transform: rotate(45deg); }
.cal-ev {
  display: none; margin-top: 3px; padding: 1.5px 5px; border-radius: 4px;
  font-size: 10px; font-weight: 700; color: var(--stem-deep); background: var(--stem-tint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.cal-legend {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px;
  font-size: 11.5px; color: var(--ink-soft);
}
.cal-legend .lg { display: inline-flex; align-items: center; gap: 5px; }
@media (min-width: 900px) {
  .cal-cell { min-height: 96px; padding: 8px; }
  .cal-ev { display: block; }
  .cal-cell .cal-evdot { display: none; }
}

/* ---------- 차트 ---------- */
.chart-box { position: relative; }
.chart-box svg { display: block; width: 100%; height: auto; }
.chart-title-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.chart-legend { display: flex; gap: 14px; font-size: 12px; color: var(--ink-soft); margin-left: auto; }
.chart-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend .lg i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.chart-tip {
  position: absolute; pointer-events: none; z-index: 10;
  background: var(--ink); color: var(--paper);
  font-size: 12px; padding: 7px 10px; border-radius: 8px;
  box-shadow: var(--shadow-board);
  transform: translate(-50%, calc(-100% - 10px));
  white-space: nowrap; opacity: 0; transition: opacity .12s ease;
}
.chart-tip.show { opacity: 1; }
.chart-tip .t-label { color: #B7C4BA; font-size: 10.5px; }

/* ---------- 급등·급락 ---------- */
.mover-list .mover-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-top: 1px solid #EEF1EA;
}
.mover-list .mover-row:first-child { border-top: none; padding-top: 2px; }
.mover-rank { font-family: var(--serif); font-weight: 900; font-size: 14px; color: var(--ink-mute); width: 16px; }
.mover-pum { font-weight: 800; font-size: 14.5px; }
.mover-qty { font-size: 11px; color: var(--ink-mute); }
.mover-price { margin-left: auto; font-weight: 700; font-size: 14px; }
.mover-chg {
  min-width: 64px; text-align: center; padding: 4px 8px; border-radius: 7px;
  font-size: 12.5px; font-weight: 800;
}
.mover-chg.up { background: var(--rise-tint); color: var(--rise); }
.mover-chg.down { background: var(--fall-tint); color: var(--fall); }

/* ---------- "지금 사도 되나" 밴드 게이지 ---------- */
.gauge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.gauge { background: var(--paper-raise); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 14px; }
.gauge .gg-head { display: flex; align-items: center; gap: 8px; }
.gauge .gg-name { font-weight: 800; font-size: 15px; }
.gg-badge { margin-left: auto; font-size: 10.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.gg-badge.low  { background: var(--stem-tint); color: var(--stem-deep); }
.gg-badge.mid  { background: var(--dawn); color: var(--ink-soft); }
.gg-badge.high { background: var(--rise-tint); color: var(--rise); }
.gg-badge.off  { background: var(--dawn); color: var(--ink-mute); }
.gauge .gg-price { font-family: var(--serif); font-weight: 900; font-size: 21px; margin-top: 6px; }
.gauge .gg-price small { font-family: var(--sans); font-size: 11px; font-weight: 600; color: var(--ink-mute); }
.gg-band {
  position: relative; height: 8px; border-radius: 4px; margin: 12px 0 5px;
  background: linear-gradient(90deg, #D4E8D6 0%, #E9EDE4 45%, #F2E0DA 100%);
}
.gg-marker {
  position: absolute; top: -4px; width: 4px; height: 16px;
  background: var(--ink); border-radius: 2px; transform: translateX(-50%);
  box-shadow: 0 0 0 2px var(--paper-raise);
}
.gg-minmax { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-mute); }

/* ---------- 등급 스프레드 ---------- */
.spread-row { margin-top: 12px; }
.spread-row:first-of-type { margin-top: 6px; }
.spread-row .sp-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.spread-row .sp-lv { font-weight: 800; font-size: 13.5px; min-width: 34px; }
.spread-row .sp-save { font-size: 11.5px; font-weight: 700; color: var(--fall); }
.spread-row .sp-price { margin-left: auto; font-weight: 700; font-size: 13.5px; }
.spread-row .sp-qty { font-size: 11px; color: var(--ink-mute); }
.spread-row .sp-bar-wrap { height: 8px; background: var(--dawn); border-radius: 4px; overflow: hidden; }
.spread-row .sp-bar { height: 100%; background: var(--stem); border-radius: 4px; }
.spread-row:first-of-type .sp-bar { background: var(--ink); }

/* ---------- 판매가 계산기 ---------- */
.calc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.calc-field label { display: block; font-size: 11.5px; font-weight: 700; color: var(--ink-soft); margin-bottom: 4px; }
.calc-field input[type="number"] {
  width: 100%; padding: 9px 10px; border: 1px solid var(--hairline); border-radius: 8px;
  font-family: inherit; font-size: 14px; font-variant-numeric: tabular-nums;
  color: var(--ink); background: var(--paper-raise);
}
.calc-field input[type="number"]:focus { border-color: var(--stem); outline: none; }
.calc-slider { grid-column: 1 / -1; }
.calc-slider input[type="range"] { width: 100%; accent-color: var(--stem); }
.calc-slider .cs-labels { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-mute); }
.calc-out {
  background: var(--paper-raise); color: var(--ink);
  border: 1px solid var(--hairline); box-shadow: var(--shadow);
  border-radius: var(--radius-lg); padding: 14px 16px;
  display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline;
}
.calc-out .co-item { display: flex; flex-direction: column; }
.calc-out .co-label { font-size: 11px; color: var(--ink-mute); font-weight: 700; letter-spacing: .04em; }
.calc-out .co-value { font-family: var(--serif); font-weight: 900; font-size: 21px; }
.calc-out .co-value small { font-family: var(--sans); font-size: 11px; font-weight: 600; color: var(--ink-mute); }

/* 계산기 전용 페이지 */
.calc-layout { display: grid; gap: 14px; align-items: start; }
@media (min-width: 900px) {
  .calc-layout { grid-template-columns: 1.1fr 0.9fr; }
  .calc-sticky { position: sticky; top: 122px; }
}
.calc-out.vertical { flex-direction: column; align-items: stretch; gap: 0; padding: 6px 20px; }
.calc-out.vertical .co-item {
  flex-direction: row; align-items: baseline; justify-content: space-between;
  padding: 13px 0; border-bottom: 1px solid #EEF1EA;
}
.calc-out.vertical .co-item:last-child { border-bottom: none; }
.calc-out.vertical .co-item.hero-line {
  background: var(--stem-tint); border-radius: 10px;
  padding: 13px 14px; margin: 4px -14px; border-bottom: none;
}
.calc-out.vertical .co-item.hero-line .co-label { color: var(--stem-deep); font-weight: 800; }
.calc-out.vertical .co-item.hero-line .co-value { font-size: 30px; color: var(--stem-deep); }
.calc-out.vertical .co-label { font-size: 12px; }
.calc-out.vertical .co-value { font-size: 20px; }
.calc-src { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.calc-src .src-label { font-size: 12px; font-weight: 800; color: var(--ink-soft); flex-shrink: 0; }
.calc-formula {
  margin-top: 12px; padding: 11px 13px; background: var(--dawn); border-radius: 8px;
  font-size: 12px; color: var(--ink-soft); line-height: 1.7;
}

/* ---------- 최근 4주 스파크 ---------- */
.spark-strip {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--dawn); border-radius: 10px;
  margin-bottom: 14px; font-size: 12.5px; color: var(--ink-soft);
}
.spark-strip svg { display: block; flex-shrink: 0; }
.spark-strip .sp-label { font-weight: 800; color: var(--ink); }

/* ---------- 인사이트 스탯 ---------- */
.stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 900px) { .stat-row { grid-template-columns: repeat(4, 1fr); } }
.stat {
  background: var(--paper-raise); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 14px;
}
.stat .st-label { font-size: 11.5px; font-weight: 700; color: var(--ink-mute); letter-spacing: .04em; }
.stat .st-value { font-family: var(--serif); font-weight: 900; font-size: 22px; margin-top: 3px; }
.stat .st-sub { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }

/* ---------- 디렉토리 ---------- */
.dir-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--paper-raise); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 13px 15px;
}
.dir-row .d-cat {
  flex-shrink: 0; font-size: 10.5px; font-weight: 800; letter-spacing: .05em;
  color: var(--stem-deep); background: var(--stem-tint);
  padding: 3px 8px; border-radius: 4px; white-space: nowrap;
}
.dir-row .d-cat.sample { color: var(--ink-mute); background: var(--dawn); }
.dir-row .d-name { font-weight: 700; font-size: 14px; }
.dir-row .d-note { font-size: 12px; color: var(--ink-mute); }
.dir-row .d-tel {
  margin-left: auto; font-weight: 800; font-size: 14px; color: var(--stem-deep);
  white-space: nowrap;
}

/* ---------- 로그인 ---------- */
.login-panel { max-width: 420px; margin: 40px auto; }
.login-panel .card { padding: 32px 26px; text-align: center; }
.login-logo { font-family: var(--serif); font-weight: 900; font-size: 26px; margin-bottom: 4px; }
.login-desc { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 24px; }
.sso-note { margin-top: 16px; font-size: 12px; color: var(--ink-mute); }
.divider { display: flex; align-items: center; gap: 10px; margin: 18px 0; color: var(--ink-mute); font-size: 11.5px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }

/* ---------- 푸터 ---------- */
.site-foot {
  margin-top: 60px; border-top: 1px solid var(--hairline);
  padding: 28px 0 40px; font-size: 12.5px; color: var(--ink-mute);
}
.site-foot .f-brand { font-family: var(--serif); font-weight: 900; font-size: 16px; color: var(--ink); margin-bottom: 8px; }
.site-foot .f-links { display: flex; gap: 14px; margin: 10px 0; flex-wrap: wrap; }
.site-foot .f-links a { color: var(--ink-soft); font-weight: 600; }
.site-foot .f-links a:hover { color: var(--stem-deep); }
.site-foot .f-disclaimer {
  margin-top: 12px; padding: 10px 12px; background: var(--dawn);
  border-radius: 8px; font-size: 11.5px; line-height: 1.55;
}

/* ---------- 유틸 ---------- */
.hide { display: none !important; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.muted { color: var(--ink-mute); font-size: 12.5px; }

/* ---------- 사업자 전용 카테고리 안내 ---------- */
.member-wall {
  max-width: 460px; margin: 64px auto; padding: 40px 28px;
  background: var(--paper-raise); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  text-align: center;
}
.member-wall .mw-icon { color: var(--stem-deep); }
.member-wall .mw-icon svg { width: 34px; height: 34px; stroke-width: 1.6; }
.member-wall .mw-title { font-family: var(--serif); font-weight: 900; font-size: 22px; margin: 10px 0 8px; }
.member-wall .mw-desc { font-size: 13.5px; color: var(--ink-soft); line-height: 1.7; }
.member-wall .mw-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.mini-lock { width: 10px; height: 10px; opacity: .5; vertical-align: baseline; margin-left: 1px; }

/* ---------- 가격 마스킹 (비회원) ---------- */
.p-lock {
  display: inline-block; background: var(--stem-tint); color: var(--stem-deep);
  font-size: 10px; font-weight: 800; letter-spacing: .06em;
  padding: 2px 8px; border-radius: 6px; vertical-align: baseline;
  text-decoration: none; white-space: nowrap; line-height: 1.4;
}
.p-lock:hover { background: var(--stem); color: #fff; }

/* ---------- AI 시세전망 ---------- */
.conf { font-size: 10.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.conf.hi  { background: var(--stem-tint); color: var(--stem-deep); }
.conf.mid { background: var(--dawn); color: var(--ink-soft); }
.conf.lo  { background: var(--rise-tint); color: var(--rise); }
.fc-dir { font-weight: 800; white-space: nowrap; }
.fc-dir.up { color: var(--rise); }
.fc-dir.down { color: var(--fall); }
.fc-dir.flat { color: var(--ink-mute); }
.fc-dir.off { color: var(--ink-mute); font-weight: 600; }
.fc-headline {
  font-family: var(--serif); font-weight: 900; font-size: 19px;
  line-height: 1.4; margin: 2px 0 4px;
}
.fc-band-cell { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.fc-note {
  margin-top: 14px; padding: 12px 14px; background: var(--dawn);
  border-radius: 8px; font-size: 12px; line-height: 1.6; color: var(--ink-soft);
}
.fc-method li { font-size: 12.5px; color: var(--ink-soft); line-height: 1.65; margin: 6px 0 6px 18px; list-style: disc; }

/* ---------- 모션 ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
  .reveal.in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .badge-live .pulse { animation: none; }
  * { transition: none !important; }
}

/* ---------- 모바일 밀도 최적화 ---------- */
@media (max-width: 899px) {
  .site-head .wrap { height: 52px; }
  .brand .brand-name { font-size: 18px; }
  .btn-login { white-space: nowrap; padding: 7px 12px; font-size: 12.5px; }
  .user-chip { white-space: nowrap; font-size: 11.5px; padding: 5px 10px; }
}
@media (max-width: 480px) {
  .brand .brand-sub { display: none; } /* 좁은 화면에선 로고만 */
  .page-head { padding: 20px 0 4px; }
  h1.page-title { font-size: 23px; }
  .page-desc { font-size: 13.5px; }
  .section { margin: 26px 0; }
  .card { padding: 15px; border-radius: 14px; }
  .grid { gap: 10px; }
  .hero { padding: 22px 0 6px; }
  .hero-sub { font-size: 13.5px; }
  .stat { padding: 12px; }
  .stat .st-value { font-size: 19px; }
  .fc-headline { font-size: 16.5px; }
  .board-table td { padding: 8px 12px; font-size: 13.5px; }
  .board-head { padding: 12px 14px; }
  .board-foot { padding: 9px 14px; }
  .chart-legend { margin-left: 0; width: 100%; }
  .chip { padding: 8px 15px; }        /* 터치 타깃 확보 */
  .dday { padding: 11px 12px; }
  .site-foot { margin-top: 44px; padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
  /* 홈: 요약 브리핑을 전광판 위로 */
  .grid.cols-2-1 > :nth-child(2) { order: -1; }
}

/* ---------- 인쇄 ---------- */
@media print {
  .site-head, .btn, .gate-cover { display: none !important; }
  body { background: #fff; }
}