/* PRE:AI 컴포넌트 킷 — 개편안 A-3 (12종) · 신규 클래스 k- 프리픽스만
   정답지: assets/preai-mockup-v4-white-tide.html · 모션 3종만(flow/blink/카운트업) */

/* ── #1 사이드바 4실 트리 ── */
.k-side{width:216px;flex-shrink:0;background:var(--s1);border-right:1px solid var(--border);
  padding:20px 8px 20px 14px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.k-logo{font-size:17px;font-weight:900;letter-spacing:-.02em;padding:0 12px 4px;color:var(--t1)}
.k-logo b{color:var(--room-grow)}
.k-ws{font-size:10px;color:var(--t3);padding:0 12px 12px}
.k-sec{font-size:9px;font-weight:900;letter-spacing:.14em;color:var(--t3);padding:12px 12px 5px}
.k-nv{display:flex;align-items:center;padding:8px 12px;font-size:12px;font-weight:800;color:var(--t1);
  border-left:2px solid transparent;margin:1px 0;border-radius:0 8px 8px 0;cursor:pointer;
  transition:background var(--dur-fast) var(--ease);white-space:nowrap}
.k-nv:hover{background:var(--s2)}
.k-nv .k-dot{width:6px;height:6px;border-radius:50%;margin-right:9px;box-shadow:0 0 6px currentColor;flex:none}
.k-nv.k-sub{padding:6px 12px 6px 33px;font-size:11.5px;font-weight:500;color:var(--t2)}
.k-nv.k-sub2{padding:5px 12px 5px 46px;font-size:11px;font-weight:500;color:var(--t3)}
.k-nv.k-on{background:linear-gradient(90deg,var(--s2),transparent);color:var(--t1);font-weight:800}
.k-nv.k-on.k-g{border-left-color:var(--room-grow)}
.k-nv.k-on.k-s{border-left-color:var(--room-sell)}
.k-nv.k-on.k-m{border-left-color:var(--room-make)}
.k-nv.k-on.k-v{border-left-color:var(--room-value)}
.k-nv.k-on.k-b{border-left-color:var(--t2)}
.k-nv.k-lock{opacity:.4}
.k-grp-body{overflow:hidden}
.k-grp.k-closed .k-grp-body{display:none}
.k-caret{margin-left:auto;font-size:9px;color:var(--t3);transition:transform var(--dur-fast) var(--ease)}
.k-grp.k-closed .k-caret{transform:rotate(-90deg)}
.k-hr{border-top:1px solid var(--border);margin:12px 12px 6px}
.k-badge{font-size:8.5px;font-weight:900;border-radius:var(--r-chip);padding:1px 6px;margin-left:6px;vertical-align:1px}
.k-badge.k-new{color:#fff;background:var(--room-grow)}
.k-badge.k-soon{color:var(--t2);border:1px solid var(--border-s)}

/* ── #2 페이지 헤더 (브레드크럼+실 칩) ── */
.k-crumb{font-size:10px;font-weight:900;letter-spacing:.1em;color:var(--t3)}
.k-crumb .k-room{border:1px solid;border-radius:var(--r-chip);padding:2px 9px;margin-right:8px}
.k-h1{font-size:22px;font-weight:900;letter-spacing:-.03em;margin-top:5px;color:var(--t1)}
.k-h1 small{font-size:12px;font-weight:500;color:var(--t3);margin-left:10px}

/* ── #3 KPI 카드 ── */
.k-kpi{background:var(--s1);border:1px solid var(--border);border-radius:var(--r-card);
  padding:16px 18px;position:relative;overflow:hidden;box-shadow:var(--shadow-card)}
.k-kpi.k-hero{border-color:rgba(36,56,232,.40);box-shadow:var(--shadow-hero)}
.k-kpi .k-l{font-size:11px;color:var(--t2)}
.k-kpi .k-v{font-size:31px;font-weight:900;letter-spacing:-.03em;margin-top:3px;font-variant-numeric:tabular-nums}
.k-kpi.k-hero .k-v{font-size:40px}
.k-delta{display:inline-block;font-size:11px;font-weight:800;border-radius:var(--r-chip);padding:2px 8px;margin-top:6px}
.k-delta.k-up{color:var(--ok);background:rgba(31,138,87,.12)}
.k-delta.k-dn{color:var(--danger);background:rgba(214,69,60,.10)}
.k-delta.k-wn{color:var(--warn);background:rgba(182,122,23,.12)}
.k-spark{position:absolute;right:14px;bottom:12px;opacity:.9}

/* ── #4 실 스트립 카드 (KPI + 상단 실 보더) ── */
.k-strip{border-top:3px solid var(--border);transition:transform var(--dur-fast) var(--ease)}
.k-strip:hover{transform:translateY(-2px)}
.k-strip.k-make{border-top-color:var(--room-make)}
.k-strip.k-grow{border-top-color:var(--room-grow)}
.k-strip.k-sell{border-top-color:var(--room-sell)}
.k-strip.k-value{border-top-color:var(--room-value)}

/* ── #5 상태 배지 ── */
.k-st{font-size:9.5px;font-weight:900;border-radius:var(--r-chip);padding:2px 8px}
.k-st.k-ok{color:var(--ok);background:rgba(31,138,87,.12)}
.k-st.k-warn{color:var(--warn);background:rgba(182,122,23,.12)}
.k-st.k-act{color:var(--danger);background:rgba(214,69,60,.10);animation:k-blink 1.6s infinite}
.k-st.k-lockc{color:var(--t3);border:1px solid var(--border)}

/* ── #6 데이터 테이블 ── */
.k-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.k-tbl th{position:sticky;top:0;background:var(--s1);font-size:10.5px;letter-spacing:.06em;
  color:var(--t3);text-align:left;padding:9px 12px;border-bottom:1px solid var(--border)}
.k-tbl td{padding:9px 12px;border-bottom:1px solid var(--border)}
.k-tbl tr:hover td{background:var(--s2)}
.k-tbl .k-num{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}

/* ── #7 피드 카드 (실 칩+지표→델타→해석→CTA) ── */
.k-feed{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--border)}
.k-feed:last-child{border:none}
.k-chip{flex:none;font-size:9px;font-weight:900;border:1px solid;border-radius:var(--r-chip);padding:2px 8px;margin-top:2px}
.k-chip.k-make{color:var(--room-make);border-color:var(--room-make)}
.k-chip.k-grow{color:var(--room-grow);border-color:var(--room-grow)}
.k-chip.k-sell{color:var(--room-sell);border-color:var(--room-sell)}
.k-chip.k-value{color:var(--room-value);border-color:var(--room-value)}
.k-feed.k-cross{border-left:3px solid var(--room-value);padding-left:10px;border-radius:6px 0 0 6px}
.k-feed .k-tt{font-size:12.5px;font-weight:800;color:var(--t1)}
.k-feed .k-dd{font-size:11.5px;color:var(--t2);margin-top:1px}

/* ── #8 탭 (언더라인·실 컬러) ── */
.k-tabs{display:flex;gap:2px;border-bottom:1px solid var(--border)}
.k-tab{padding:8px 14px;font-size:12.5px;font-weight:800;color:var(--t2);cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.k-tab.k-on{color:var(--t1);border-bottom-color:var(--room-grow)}
.k-tab .k-cnt{font-size:9.5px;font-weight:900;background:var(--s2);border-radius:var(--r-chip);padding:1px 6px;margin-left:5px}

/* ── #9 버튼 (btn 레거시 재활용 + k-btn 사이즈) ── */
.k-btn-sm{font-size:10.5px;padding:6px 12px}

/* ── #10 모달·잠금 카드 ── */
.k-ovl{position:fixed;inset:0;background:rgba(11,31,51,.28);backdrop-filter:blur(2px);z-index:60;
  display:none;align-items:center;justify-content:center}
.k-ovl.k-open{display:flex}
.k-modal{width:380px;background:var(--s1);border:1px solid var(--border);border-radius:18px;
  padding:24px 26px;box-shadow:0 20px 60px rgba(11,31,51,.18)}
.k-modal .k-mt{font-size:16px;font-weight:900}
.k-modal .k-md{font-size:12.5px;color:var(--t2);margin-top:8px;line-height:1.65}
.k-modal .k-me{font-size:11px;color:var(--t3);margin-top:10px}

/* ── #11 게이지·진행률 ── */
.k-track{height:7px;border-radius:var(--r-chip);background:var(--s2);overflow:hidden}
.k-track i{display:block;height:100%;border-radius:var(--r-chip);transition:width 1.1s var(--ease)}

/* ── #12 스켈레톤·엠티 ── */
.k-skel{background:linear-gradient(90deg,var(--s2) 25%,var(--s3) 50%,var(--s2) 75%);
  background-size:200% 100%;animation:k-shimmer 1.4s infinite;border-radius:8px}
@keyframes k-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.k-empty{text-align:center;padding:34px 20px;color:var(--t3);font-size:12.5px}
.k-empty b{display:block;font-size:13.5px;color:var(--t2);margin-bottom:4px}

/* ── 시그니처 모션 (허용 3종만) ── */
@keyframes k-blink{0%,100%{opacity:1}50%{opacity:.35}}
.k-live{font-size:10px;font-weight:900;letter-spacing:.14em;color:var(--room-grow)}
.k-live::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--room-grow);margin-right:7px;vertical-align:1px;animation:k-blink 1.6s infinite}
@keyframes k-flow{0%{background-position:200% 0}100%{background-position:0 0}}
.k-flowline{height:3px;border-radius:var(--r-chip);
  background:linear-gradient(90deg,var(--room-make),var(--room-grow) 35%,var(--room-sell) 70%,var(--room-value));
  background-size:200% 100%;animation:k-flow 4s linear infinite}

/* 햄버거 토글 — 데스크톱 숨김, 모바일에서만 노출 */
.k-navtoggle{display:none;align-items:center;justify-content:center;width:40px;height:40px;flex:none;
  margin-right:10px;border:1px solid var(--border);border-radius:10px;background:var(--surface);
  font-size:18px;line-height:1;cursor:pointer;color:var(--t1)}
.k-navback{display:none}
/* 모바일 — 사이드바를 오프캔버스 드로어로: 햄버거(☰)로 토글, 배경 탭하면 닫힘 */
@media(max-width:1000px){
  .k-side{position:fixed;top:0;left:0;z-index:120;height:100vh;transform:translateX(-100%);
    transition:transform .25s var(--ease);box-shadow:6px 0 30px rgba(0,0,0,.22)}
  body.k-navopen .k-side{transform:translateX(0)}
  .k-navtoggle{display:inline-flex}
  body.k-navopen .k-navback{display:block;position:fixed;inset:0;z-index:110;background:rgba(11,31,51,.42)}
}