/* ==========================================================================
   삼우물산 — 3단계 홈 대시보드(pg-terminal) 시안 적용 (2026-08-12)

   [적용 방식] CSS 전용. JS·onclick·id·data-* 는 한 글자도 안 건드린다.
   index.html 의 pg-terminal div 에 class="ds" 한 개만 추가했고,
   위젯을 그리는 buildHome()·tmw* 렌더 함수는 원본 그대로다.
   따라서 화면에 뜨는 모든 수치는 기존 코드가 계산한 값 그대로다.

   [스코프] 모든 규칙이 '#pg-terminal.ds' 로 시작한다.
   같은 .tm-* 클래스를 쓰는 위젯 갤러리(pg-widgets)는 영향 0 —
   갤러리는 사장님 화면 순서 목록에 없어 이번 회차 대상이 아니다.

   [시안 대비 의도적으로 안 만든 것] — "없는 기능 새로 만들지 마라"
   드롭존 · 검색바(⌘K) · 시계 · 아바타 · 크럼브 · 위젯 리사이즈 핸들.
   현재 홈에 없는 기능이라 모양만 흉내 내면 눌러도 안 되는 가짜가 된다.

   [시안에 없지만 지운 적 없는 것] — "있는 기능 빼지 마라"
   위젯 ✕(홈에서 제거) 버튼 · 위젯 추가·관리 · 오늘 요약 발송. 전부 유지.

   [색] 카드·배경·테두리·글자는 토큰으로 교체.
   숫자에 붙은 의미색(받을돈 amber·긴급 red·정상 green 등)은 렌더 함수가
   인라인으로 지정하는 값이라 그대로 둔다 — 덮으면 의미가 사라진다.
   ========================================================================== */

/* ── 페이지 바탕 ─────────────────────────────────────────────────── */
#pg-terminal.ds{ background:var(--surface); }
#pg-terminal.ds .tm-wrap{ padding:22px 24px 44px; gap:16px; font-family:var(--font-ui); }

/* ── 상단 인사줄 (제목·부제·버튼) ────────────────────────────────── */
#pg-terminal.ds .tm-bar{ gap:12px; margin-bottom:2px; }
#pg-terminal.ds .tm-bar .ttl{
  font-family:var(--font-display); font-size:var(--fs-24); font-weight:800;
  letter-spacing:-0.015em; color:var(--text-1); }
#pg-terminal.ds .tm-bar .sub{ font-size:var(--fs-13); color:var(--text-3); }

/* 버튼 2개 — 시안 btn-secondary / btn-ghost 결. class 는 그대로 두고 모양만 맞춤 */
#pg-terminal.ds .tm-addbtn{
  background:var(--surface-card); border:var(--bd); color:var(--text-1);
  border-radius:var(--r-2); font-size:var(--fs-13); font-weight:600;
  padding:0 14px; min-height:36px; }   /* CLAUDE.md UI 규칙 3: 버튼 36px 이상 */
#pg-terminal.ds .tm-addbtn:hover{ background:var(--surface-sunk); border-color:var(--text-4); }
/* '오늘 요약 발송' 은 인라인 style 로 초록을 박고 있어 같은 자리에서만 되돌린다 */
#pg-terminal.ds .tm-bar .tm-addbtn[style]{
  background:var(--surface-card)!important; border-color:var(--hairline)!important; }
#pg-terminal.ds .tm-bar .tm-addbtn[style]:hover{
  background:var(--accent-soft)!important; border-color:var(--accent)!important; color:var(--accent)!important; }

/* ── 위젯 격자 ───────────────────────────────────────────────────── */
#pg-terminal.ds .tm-grid{ gap:16px; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); }

/* ── 위젯 카드 ───────────────────────────────────────────────────── */
#pg-terminal.ds .tm-panel{
  background:var(--surface-card); border:var(--bd-soft); border-radius:var(--r-4);
  padding:20px; gap:10px; min-height:200px; box-shadow:var(--shadow-1); }
#pg-terminal.ds .tm-h{ gap:9px; margin-bottom:2px; }
#pg-terminal.ds .tm-h .t{
  font-size:var(--fs-15); font-weight:700; letter-spacing:-0.01em; color:var(--text-1); }
#pg-terminal.ds .tm-h .more{ font-size:var(--fs-12); font-weight:600; color:var(--accent); }
#pg-terminal.ds .tm-h .more:hover{ color:var(--accent-deep); }

/* 홈에서 제거(✕) — 평소엔 조용하고 올렸을 때만 위험색 */
#pg-terminal.ds .tm-rm{
  width:24px; height:24px; border-radius:var(--r-2);
  background:transparent; border:1px solid transparent; color:var(--text-3); }
#pg-terminal.ds .tm-rm:hover{
  background:var(--st-urgent-bg); border-color:transparent; color:var(--st-urgent); }

/* ── 핵심 지표 스트립 (strip 위젯) ───────────────────────────────── */
#pg-terminal.ds .tm-strip{ gap:12px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
#pg-terminal.ds .tm-stat{
  background:var(--surface-card); border:var(--bd-soft); border-radius:var(--r-4);
  padding:16px 18px; box-shadow:var(--shadow-1); transition:border-color .15s,background .15s; }
#pg-terminal.ds .tm-stat:hover{ border-color:var(--accent); background:var(--surface-sunk); }
#pg-terminal.ds .tm-stat .l{
  font-size:var(--fs-11); font-weight:600; letter-spacing:.06em; color:var(--text-3); }
#pg-terminal.ds .tm-stat .v{
  font-family:var(--font-numeric); font-variant-numeric:tabular-nums;
  font-size:26px; font-weight:700; margin-top:5px; }
#pg-terminal.ds .tm-stat .d{ font-size:var(--fs-11); color:var(--text-3); margin-top:3px; }

/* ── 기간 전환 토글 (매출 추세 일별/주별/월별) ───────────────────── */
#pg-terminal.ds .tm-tg{ gap:6px; }
#pg-terminal.ds .tm-tg button{
  background:transparent; border:var(--bd); color:var(--text-2);
  font-size:var(--fs-12); font-weight:600; padding:5px 11px; border-radius:var(--r-2); }
#pg-terminal.ds .tm-tg button:hover{ background:var(--surface-sunk); color:var(--text-1); }
#pg-terminal.ds .tm-tg button.on{
  background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }

/* ── 목록 행 ─────────────────────────────────────────────────────── */
#pg-terminal.ds .tm-kv{
  font-size:var(--fs-13); padding:8px 2px; border-bottom:1px solid var(--hairline-soft); }
#pg-terminal.ds .tm-kv .k{ color:var(--text-2); }
#pg-terminal.ds .tm-kv .vv{ font-family:var(--font-numeric); color:var(--text-1); }

#pg-terminal.ds .tm-rrow{
  padding:9px 8px; margin:0 -8px; border-radius:var(--r-2);
  border-bottom:1px solid var(--hairline-soft); }
#pg-terminal.ds .tm-rrow:hover{ background:var(--surface-sunk); }
#pg-terminal.ds .tm-rrow .nm{ font-size:var(--fs-13); font-weight:500; color:var(--text-1); }
#pg-terminal.ds .tm-rrow .tm-ago{
  font-family:var(--font-numeric); font-size:var(--fs-11); color:var(--text-3); }

/* ── 카드 하단 요약 수치 ─────────────────────────────────────────── */
#pg-terminal.ds .tm-foot{ gap:8px 20px; margin-top:8px; }
#pg-terminal.ds .tm-foot .fc .fl{
  font-size:var(--fs-11); font-weight:600; letter-spacing:.08em; color:var(--text-3); }
#pg-terminal.ds .tm-foot .fc .fv{
  font-family:var(--font-numeric); font-variant-numeric:tabular-nums;
  font-size:20px; font-weight:700; color:var(--text-1); margin-top:3px; }
#pg-terminal.ds .tm-bignum{ font-family:var(--font-numeric); color:var(--text-1); }

/* ── 범례 · 빈 상태 · 외부 API 안내 ──────────────────────────────── */
#pg-terminal.ds .tm-legend span{ font-size:var(--fs-11); color:var(--text-3); }
#pg-terminal.ds .tm-empty{ font-size:var(--fs-13); color:var(--text-3); line-height:1.65; }
#pg-terminal.ds .tm-empty b{ color:var(--accent); }
#pg-terminal.ds .tm-api{ font-size:var(--fs-13); color:var(--text-3); line-height:1.7; }
#pg-terminal.ds .tm-api .badge{
  background:var(--st-info-bg); border:var(--bd-soft); color:var(--text-2);
  font-size:var(--fs-10); font-weight:700; border-radius:var(--r-2); padding:3px 9px; }

/* ── [수정] 태블릿 폭에서 위젯 제목이 17px 로 눌려 잘리던 문제 ────────
   원인: 격자가 1칸인 폭인데도 .tm-panel.wide 가 'span 2' 를 유지해서
   빈 암시(implicit) 칸이 생기고, 그 칸에 놓인 카드가 짜부라진다.
   기존 페이지 CSS 는 760px 이하에서만 wide 를 풀어줘서 761~1000px 이 뚫려 있었다
   (내 변경 이전에도 동일 — 768px 에서 '받을돈 Top 거래처'·'재고 현황'·
    '시세·환율·유가'·'최근 카톡 주문' 4개가 잘렸다).
   2칸이 실제로 들어가는 폭(사이드바 240 + 여백 48 + 340×2 + gap 16 ≒ 984px)
   아래에서는 wide 를 풀어 한 칸을 통째로 쓰게 한다. */
@media (max-width:1000px){
  #pg-terminal.ds .tm-panel.wide{ grid-column:auto; }
}
/* 제목은 그래도 우선 보이게 — 줄임표는 정말 자리가 없을 때만 */
#pg-terminal.ds .tm-h .t{ flex:1 1 auto; }

/* ── 좁은 화면 (사장님 360px 최소 보장) ──────────────────────────── */
@media (max-width:640px){
  #pg-terminal.ds .tm-wrap{ padding:16px 12px 36px; gap:12px; }
  #pg-terminal.ds .tm-bar .ttl{ font-size:var(--fs-18); }
  #pg-terminal.ds .tm-bar .tm-addbtn{ flex:1 1 auto; justify-content:center; }
  #pg-terminal.ds .tm-grid{ grid-template-columns:1fr; gap:12px; }
  #pg-terminal.ds .tm-panel{ padding:16px 14px; }
  #pg-terminal.ds .tm-strip{ grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; }
  #pg-terminal.ds .tm-stat{ padding:13px 14px; }
  #pg-terminal.ds .tm-stat .v{ font-size:21px; }
  #pg-terminal.ds .tm-foot .fc .fv{ font-size:17px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   [3단계 홈 — UI-SPEC 01-home 대조] (2026-08-14)
   위젯 내용은 JS 렌더가 인라인 색으로 찍는다. index.html 은 다른 세션이
   작업 중이라 미접촉 — 속성 매칭 CSS 로만 정렬한다(전부 #pg-terminal.ds 스코프).

   시안과의 차이 목록과 처리:
   · 매출 추세 막대가 앰버 그라데이션        → accent 파랑 그라데이션
   · KPI 값이 항목마다 색색(앰버·초록·보라)  → §4: 숫자는 text-1, 긴급만 urgent
   · 신호등/막대/도넛이 구팔레트(#52C785 등) → 상태 4색(#4ADE80·#F97316·#EF4458·#5B8BF7)
   · 회색 라벨 5종(#9DB0E8·#7C8AB8 …)      → text-3 통일
   · 우상단 가이드 버튼 앰버 틴트            → ghost
   시안에 있지만 만들지 않은 것(기능 신설 금지): 인사말 히어로("오늘 처리할 일
   6건"은 새 데이터 가공), 파일 드롭존, 검색바·시계·아바타.
   ══════════════════════════════════════════════════════════════════════════ */

/* 매출 추세 — 앰버 막대 → accent */
#pg-terminal.ds [style*="linear-gradient(180deg,#F0B146"]{
  background:linear-gradient(180deg,var(--accent),rgba(91,139,247,.18))!important; }

/* 인라인 글자색 → 스펙 팔레트 (값 라벨·증감·안내문) */
#pg-terminal.ds [style*="color:#F0B146"]{ color:var(--accent)!important; }
#pg-terminal.ds [style*="color:#52C785"]{ color:var(--st-done)!important; }
#pg-terminal.ds [style*="color:#EF4458"]{ color:var(--st-urgent)!important; }
#pg-terminal.ds [style*="color:#3B82F6"]{ color:var(--st-progress)!important; }
#pg-terminal.ds [style*="color:#A77CF4"]{ color:var(--text-1)!important; }
#pg-terminal.ds [style*="color:#9DB0E8"],
#pg-terminal.ds [style*="color:#7C8AB8"],
#pg-terminal.ds [style*="color:#8A93B0"],
#pg-terminal.ds [style*="color:#6F789A"],
#pg-terminal.ds [style*="color:#A8B2D0"]{ color:var(--text-3)!important; }

/* KPI 스트립 §4 — 숫자는 text-1, 긴급/위험만 상태색 (위 규칙보다 뒤 = 이김) */
#pg-terminal.ds .tm-stat .v{ color:var(--text-1)!important; }
#pg-terminal.ds .tm-stat .v[style*="#EF4458"]{ color:var(--st-urgent)!important; }

/* SVG 차트(도넛·가로막대) — 구팔레트 fill/stroke → 상태 4색 */
#pg-terminal.ds [fill="#52C785"]{ fill:var(--st-done)!important; }
#pg-terminal.ds [fill="#F0B146"]{ fill:var(--st-todo)!important; }
#pg-terminal.ds [fill="#3B82F6"]{ fill:var(--st-progress)!important; }
#pg-terminal.ds [stroke="#52C785"]{ stroke:var(--st-done)!important; }
#pg-terminal.ds [stroke="#F0B146"]{ stroke:var(--st-todo)!important; }
#pg-terminal.ds [stroke="#3B82F6"]{ stroke:var(--st-progress)!important; }

/* 범례 색점 (i 태그 인라인 background) */
#pg-terminal.ds .tm-legend [style*="background:#52C785"]{ background:var(--st-done)!important; }
#pg-terminal.ds .tm-legend [style*="background:#F0B146"]{ background:var(--st-todo)!important; }
#pg-terminal.ds .tm-legend [style*="background:#EF4458"]{ background:var(--st-urgent)!important; }
#pg-terminal.ds .tm-legend [style*="background:#3B82F6"]{ background:var(--st-progress)!important; }


/* ══════════════════════════════════════════════════════════════════════════
   [R1 히어로·드롭존] 시안 01-home 레이아웃 (2026-08-17)
   ══════════════════════════════════════════════════════════════════════════ */
#pg-terminal.ds .hero-bar{ align-items:flex-end; margin-bottom:6px; }
#pg-terminal.ds .hero-left{ min-width:0; }
#pg-terminal.ds .hero-eyebrow{
  font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--accent);
  text-transform:uppercase; }
#pg-terminal.ds .hero-h1{
  font-size:clamp(20px,2.4vw,27px); font-weight:800; letter-spacing:-.02em;
  color:var(--text-1); margin:6px 0 4px; line-height:1.25; }
#pg-terminal.ds .hero-sub{ font-size:13px; color:var(--text-2); margin:0; }
#pg-terminal.ds .hero-sub .hero-warn{ color:var(--st-urgent); font-weight:700; }
#pg-terminal.ds .hero-sub .hero-good{ color:var(--st-done); font-weight:700; }
#pg-terminal.ds .hero-sub .hero-det{ color:var(--text-3); font-size:12px; }
#pg-terminal.ds .hero-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end; }
#pg-terminal.ds .tm-addbtn.ghost{ background:transparent; border-color:transparent; color:var(--text-2); }
#pg-terminal.ds .tm-addbtn.ghost:hover{ background:var(--surface-sunk); color:var(--text-1); }

#pg-terminal.ds .hero-drop{
  display:flex; align-items:center; gap:14px; cursor:pointer;
  border:1.5px dashed var(--hairline); border-radius:var(--r-4);
  padding:13px 18px; margin-bottom:4px; transition:border-color .15s,background .15s; }
#pg-terminal.ds .hero-drop:hover{ border-color:var(--accent); background:var(--surface-sunk); }
#pg-terminal.ds .hero-drop .hd-ic{ font-size:18px; color:var(--text-3); flex-shrink:0; }
#pg-terminal.ds .hero-drop .hd-tx{ min-width:0; }
#pg-terminal.ds .hero-drop .hd-t{ font-size:13px; font-weight:700; color:var(--text-1); }
#pg-terminal.ds .hero-drop .hd-s{ font-size:11px; color:var(--text-3); margin-top:2px; }
#pg-terminal.ds .hero-drop .hd-hint{
  margin-left:auto; font-size:11px; color:var(--text-3); white-space:nowrap; flex-shrink:0; }
#pg-terminal.ds .tmo-h{
  font-size:10px; font-weight:700; letter-spacing:.06em; color:var(--text-3);
  text-transform:uppercase; }
@media (max-width:760px){
  #pg-terminal.ds .hero-drop .hd-hint{ display:none; }
  #pg-terminal.ds .hero-h1{ font-size:19px; }
}