/* ========================================================================
 * palette.css — 아파트스쿱 통합 색 정본
 *   색은 이 파일에서만 정한다. scoopframe-tokens.css(프레임워크 공용)는 건드리지 않고
 *   캐스케이드로 덮고, assets/real/app.css 는 :root 색 정의를 갖지 않는다 —
 *   두 곳에 값이 남으면 조용히 갈라진다.
 *   로드 순서: scoopframe-tokens.css → scoopframe.css → (이 파일, site-theme.css 상단
 *              @import 로 앞세움) → site-theme.css 나머지
 *              실거래 화면은 (이 파일) → app.css
 *   다크는 시안이 주지 않아 real 의 기존 다크 값을 정본으로 채택했다.
 * ======================================================================== */

:root {
  /* ── 시안 정본 ───────────────────────────────────────────── */
  /* 잉크 */
  --ink:            #14181f;
  --ink-2:          #5b6472;
  --ink-3:          #6b7482;
  --muted:          #98a0ad;
  --faint:          #a8afba;
  /* 마이크로 레이블 최저 대비. 이보다 밝은 색은 장식 전용 */
  --micro:          #7c8494;

  /* 선 — 면(카드) 대신 선과 여백으로 구분한다 */
  --rule-strong:    #14181f;
  --rule:           #e2e6ec;
  --rule-soft:      #eceff3;
  --fill:           #f1f3f6;

  /* 면 — 배경은 흰색 한 겹. 사이드바만 다르다 */
  --surface:        #ffffff;
  --sidebar:        #fbfbfc;
  --active:         #eef2f7;

  /* 악센트 — 차트 선·활성 내비 바·링크 hover 에만 */
  --accent:         #3d7bd6;
  --accent-hover:   #2c63b4;
  --up:             #1a8a66;
  --down:           #c9534f;

  /* 차트 보조 */
  --chart-mid:      #9db6dd;
  --chart-soft:     #d7dde5;
  --chart-faint:    #dfe4ea;
  --chart-base:     #c7ced8;

  /* 청약 섹션 */
  --sub-accent:     #c08a3e;
  --sub-fg:         #8a6d2e;
  --sub-fill:       #f6f1e4;
  --sub-soft:       #dcd3bc;
  --sub-soft-2:     #e4e1d8;

  /* 스크롤바 — 페이지·사이드바·표 공통 */
  --scrollbar:       #d3d9e1;
  --scrollbar-hover: #b3bcc9;

  /* ── 별칭: 청약 셸(scoopframe) 이 쓰는 이름 ────────────────
     scoopframe-tokens.css 의 sky hue 를 여기서 덮는다. */
  --bg:                  var(--surface);
  --bg-elevated:         var(--sidebar);
  --bg-panel:            var(--surface);
  --bg-inset:            var(--fill);
  --card-bg:             var(--surface);
  /* 기존에 어디에도 정의돼 있지 않던 토큰 — 여기서 닫는다 */
  --card-bg-muted:       var(--sidebar);
  --text:                var(--ink);
  --text-secondary:      var(--ink-2);
  --text-muted:          var(--ink-3);
  --text-faint:          var(--faint);
  --border-subtle:       var(--rule-soft);
  --border:              var(--rule);
  --border-strong:       var(--muted);
  --border-soft:         var(--rule-soft);
  --brand-accent:        var(--accent);
  --brand-accent-2:      var(--accent-hover);
  --brand-accent-soft:   rgba(61, 123, 214, 0.06);
  --brand-accent-strong: var(--accent-hover);
  --bg-tint-cool:        var(--fill);
  --bg-tint-warm:        var(--sub-fill);
  /* semantic(성공·위험)은 시세 방향(--up/--down)과 다른 개념이라 별칭으로 묶지 않는다.
     묶었더니 청약 셸이 --up 을 '경쟁률 상승=빨강' 으로 재정의해서 --success 가 빨강,
     --danger 가 파랑으로 뒤집혔다(자격 진단·점수 계산기 결과 패널이 그 색을 읽는다). */
  --success:             #1a8a66;
  --success-soft:        rgba(26, 138, 102, 0.12);
  --danger:              #c9534f;
  --danger-soft:         rgba(201, 83, 79, 0.12);
  /* 그림자 없음 — 시안 규칙. 토큰을 지우면 참조부가 무효값이 되므로 none 으로 못 박는다 */
  --shadow:              none;
  --shadow-soft:         none;
  --shadow-md:           none;
  --shadow-lg:           none;

  /* ── 별칭: 실거래 셸(app.css) 이 쓰는 이름 ─────────────────
     canvas(#eef1f5) 는 폐기하고 흰색 한 겹으로 모은다. */
  --canvas:         var(--surface);
  --surface-2:      var(--sidebar);
  --sunk:           var(--fill);
  --line:           var(--rule);
  --line-2:         var(--rule);
  --accent-2:       var(--accent-hover);
  --accent-soft:    rgba(61, 123, 214, 0.08);
  --accent-dim:     rgba(61, 123, 214, 0.08);
  --accent-fg:      var(--surface);
  --up-soft:        rgba(26, 138, 102, 0.12);
  --down-soft:      rgba(201, 83, 79, 0.12);
  --card:           var(--surface);
  --card2:          var(--sidebar);
  --card-grad:      var(--sidebar);
  --border2:        var(--rule);
  --muted2:         var(--ink-2);
  --blue:           var(--accent);
  --input-bg:       var(--fill);

  /* 출처·기준일 배지 — 청약 섹션 톤을 빌려 쓴다 */
  --badge-bg:       var(--sub-fill);
  --badge-line:     var(--sub-soft);
  --badge-fg:       var(--sub-fg);
  /* 시안에 없는 값. 청약 셸의 semantic warn 을 정본으로 삼는다 */
  --warn:           #d97706;

  /* 차트 SVG 색(테마 인지) — chartTheme() 이 읽는다 */
  --c-grid:         var(--rule-soft);
  --c-grid-strong:  var(--rule);
  --c-axis:         var(--muted);
  --c-axis-strong:  var(--ink-2);
  --c-avg:          var(--chart-base);
  --c-halo:         var(--surface);
  --c-frame:        var(--rule);
  --c-crosshair:    var(--ink-2);
  --c-budget:       var(--warn);
  --c-tip-bg:       var(--surface);
  --c-tip-sub:      var(--muted);

  /* 관심단지 5계열. 시안이 계열 팔레트를 주지 않아 기존 값을 유지한다 */
  --s1: #3d7bd6; --s2: #e0872f; --s3: #7a5bd0; --s4: #17976b; --s5: #3f7a74;
  --s-a: var(--s1); --s-b: var(--s2); --s-c: var(--s3); --s-d: var(--s4); --s-e: var(--s5);
  /* 구 평균 전용(관심단지 색과 구분되는 뮤트 톤) */
  --a-a: #a8b3c4; --a-b: #c9ab8c; --a-c: #b0a3cc; --a-d: #8fb8a8; --a-e: #93aeac;

  /* ── 청약 섹션 고유 ─────────────────────────────────────────
     site-theme.css 의 :root 에서 옮겨 왔다 — 색 정의가 두 파일에 있으면 갈라진다.
     D-day 배지는 남은 기간을 색으로 가리는 의미색이라 이름을 유지한다. */
  --dday-soon:      #dc2626;
  --dday-soon-bg:   rgba(220, 38, 38, 0.12);
  --dday-near:      #b45309;
  --dday-near-bg:   rgba(180, 83, 9, 0.12);
  --dday-far:       #64748b;
  --dday-far-bg:    rgba(100, 116, 139, 0.08);
  --dday-spsply:    #7c3aed;
  --dday-spsply-bg: rgba(124, 58, 237, 0.10);
  --surface-hover:  rgba(0, 0, 0, 0.04);
  --warn-fg:        #fff;
  --accent-bg:      rgba(14, 116, 144, 0.08);
  --bg-overlay:     rgba(15, 23, 42, 0.04);
  --brand-glow:     rgba(37, 99, 235, 0.15);
  --brand-ink:      #0f172a;

  /* 색이 아닌 것 — 여기 두는 이유는 site-theme :root 를 비우기 위해서다.
     라이트/다크 값 차이가 없어(트랜지션 곡선은 테마 무관) 다크 블록에 짝을 두지 않는다. */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

:root[data-theme="dark"] {
  --ink:            #e8edf5;
  --ink-2:          #aab6c8;
  --ink-3:          #98a4b6;
  --muted:          #78849a;
  --faint:          #5f6b7e;
  --micro:          #8b97a9;

  --rule-strong:    #e8edf5;
  --rule:           #253248;
  --rule-soft:      #1e2939;
  --fill:           #1a2331;

  --surface:        #121824;
  --sidebar:        #0f1520;
  --active:         #1c2738;

  --accent:         #5b93e0;
  --accent-hover:   #8ab4ec;
  --up:             #35b98a;
  --down:           #e8686b;

  --chart-mid:      #4a6d9e;
  --chart-soft:     #2b3a52;
  --chart-faint:    #253248;
  --chart-base:     #4d5c76;

  --sub-accent:     #d8a95c;
  --sub-fg:         #e0b57a;
  --sub-fill:       #221d12;
  --sub-soft:       #3a3324;
  --sub-soft-2:     #2e2a22;

  --scrollbar:       #33425c;
  --scrollbar-hover: #4d5c76;

  /* 별칭 중 라이트와 관계가 달라지는 것만 다시 적는다 */
  /* scoopframe-tokens.css 의 [data-theme="dark"][data-hue="sky"] 는 (0,2,0) 이라
     palette 의 :root (0,1,0) 를 specificity 로 이긴다 — 캐스케이드 순서로는 못 덮는다.
     :root[data-theme="dark"] 도 (0,2,0) 이라 동점이 되고, palette 가 나중에 로드돼 이긴다. */
  --brand-accent:        var(--accent);
  --brand-accent-2:      var(--accent-hover);
  --brand-accent-strong: var(--accent-hover);
  --brand-accent-soft:   rgba(91, 147, 224, 0.16);
  --accent-soft:         rgba(91, 147, 224, 0.16);
  --accent-dim:          rgba(91, 147, 224, 0.16);
  --accent-fg:           #0f1520;
  /* 라이트에서 리터럴로 못 박았으니 다크도 짝을 맞춘다 — soft 만 덮으면 글자색은
     라이트 초록인데 배경 틴트는 다크 초록이 되어 어긋난다. */
  --success:             #35b98a;
  --success-soft:        rgba(53, 185, 138, 0.16);
  --danger:              #e8686b;
  --danger-soft:         rgba(232, 104, 107, 0.16);
  --up-soft:             rgba(53, 185, 138, 0.16);
  --down-soft:           rgba(201, 83, 79, 0.16);
  --border-strong:       var(--muted);
  --warn:                #e8a05a;
  --input-bg:            var(--fill);

  --s1: #5b93e0; --s2: #e8a05a; --s3: #a68ce0; --s4: #35b98a; --s5: #5fada6;
  --a-a: #8b96a8; --a-b: #b09274; --a-c: #9083b4; --a-d: #6f9d8c; --a-e: #5f8d8a;

  /* ── 청약 섹션 고유(다크) — site-theme.css [data-theme="dark"] 짝.
     --brand-ink 는 다크 오버라이드가 없었다(로고 마크는 다크에서도 동일 잉크). */
  --dday-soon:      #ff6b6b;
  --dday-soon-bg:   rgba(255, 107, 107, 0.18);
  --dday-near:      #fcd34d;
  --dday-near-bg:   rgba(252, 211, 77, 0.12);
  --dday-far:       #94a3b8;
  --dday-far-bg:    rgba(148, 163, 184, 0.10);
  --dday-spsply:    #c4b5fd;
  --dday-spsply-bg: rgba(196, 181, 253, 0.15);
  --surface-hover:  rgba(255, 255, 255, 0.07);
  --warn-fg:        #1e293b;
  --accent-bg:      rgba(34, 211, 238, 0.10);
  --bg-overlay:     rgba(255, 255, 255, 0.04);
  --brand-glow:     rgba(96, 165, 250, 0.22);
}