/* =====================================================================
   세린앤코 · T-C Noir — 어두운 관제형 · 64px 아이콘 메뉴 · 둥근 카드(10px) · 형광 강조색
   T-B(카드·표 구조) 위에 색과 글꼴, 메뉴 모양만 바꿉니다.
   ===================================================================== */
.t-c {
  --paper: #111214; --card: #1b1d20; --th: #17191c; --line: #2c2f34; --line-2: #24262a; --hi: var(--ac-soft);
  --ink: #e9eae6; --mute: #8b8e94; --faint: #6f737a; --body2: #c9cbc6; --deep: #2c2f34; --on-deep: #e9eae6; --on-ac: #111214; --seg: #1b1d20;
  --ok: #6fd39a; --ok-bg: #16301f; --warn: #f0c452; --warn-bg: #3a3016; --risk: #ff7a59; --risk-bg: #3d1f17; --stop: #9aa0a8; --stop-bg: #2a2d31;
  --serif: "Pretendard", -apple-system, sans-serif; --display: "Pretendard", sans-serif; --font: "Pretendard", -apple-system, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
  --radius: 10px; --chart-grid: #24262a; --chart-text: #8b8e94; color-scheme: dark;
}
body.t-c { background: var(--paper); color: var(--ink); font-size: 12.5px; }
.t-c a { color: inherit; } .t-c a:hover { color: var(--ac); }
.t-c ::selection { background: var(--ac); color: #111214; }

/* ------------------------------------------------------------ 64px 레일 메뉴 */
.t-c .b-shell { grid-template-columns: 64px minmax(0, 1fr); }
.c-rail { background: #0b0c0d; border-right: 1px solid var(--line-2); display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 0; position: sticky; top: 0; height: 100vh; z-index: 30; }
.c-logo { width: 34px; height: 34px; border-radius: 9px; background: var(--ac); color: #111214 !important; display: flex; align-items: center;
  justify-content: center; font-weight: 800; font-size: 14px; margin-bottom: 12px; }
.c-sys { font-family: var(--mono); font-size: 9px; color: #5c5f65; margin: 2px 0; }
.c-it { width: 48px; padding: 7px 0; border-radius: 8px; color: var(--mute); display: flex; flex-direction: column; align-items: center;
  background: none; border: 0; cursor: pointer; font: inherit; }
.c-it b { font-size: 11px; font-weight: 600; } .c-it:hover { background: #1b1d20; color: var(--ink); }
.c-it.on { background: #24262a; color: var(--ac) !important; }
.c-div { width: 28px; height: 1px; background: var(--line-2); margin: 6px 0; }
.c-more { position: relative; margin-top: auto; }
.c-pop { left: 56px; right: auto !important; top: auto !important; bottom: 0; }

/* ------------------------------------------------------------ 상단 바 */
.t-c .b-top { height: 52px; background: var(--paper); border-bottom-color: var(--line-2); padding: 0 24px; }
.t-c .b-seg { background: var(--card); border-radius: 8px; padding: 3px; border: 0; }
.t-c .b-seg a, .t-c .b-seg span { border-radius: 6px; }
.t-c .b-seg a.on { background: #2c2f34; color: var(--ac); box-shadow: none; }
.t-c .b-brands a.on { background: #2c2f34; color: var(--ink); } .t-c .b-brands a i { border-radius: 50%; }
.t-c .b-skins a.on { background: #2c2f34; color: var(--ink); }
.t-c .b-crumb { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.t-c .b-search input { background: var(--card); border-color: var(--line); color: var(--ink); border-radius: 8px; }
.t-c .b-av { border-radius: 8px; background: #24262a; color: var(--ac); font-weight: 700; }
.t-c .a-chips .db-chip { border-radius: 50%; width: 14px; height: 14px; }
.t-c .a-pop { background: var(--card); border-color: var(--line); color: var(--ink); }
.t-c .a-pop a:hover, .t-c .a-pop button:hover { color: var(--ac); }
.t-c .a-main { padding: 20px 24px 28px; }

/* ------------------------------------------------------------ 카드 · 반경 · 밀도 */
.t-c .a-grid { gap: 14px; margin-bottom: 14px; }
.t-c .a-grid > section, .t-c .a-grid > div > section, .t-c .a-kpi, .t-c .a-act, .t-c .a-tbl-wrap, .t-c .a-notes, .t-c .card,
.t-c .m-run-hero, .t-c .m-run-hero + section, .t-c .m-tag-g, .t-c .m-col, .t-c .m-box, .t-c .a-book-l, .t-c .a-book-r,
.t-c .m-po-main > section, .t-c .m-po-2 > section { border-radius: 10px; border-color: var(--line); }
.t-c .a-sec-h { border-bottom-color: var(--line-2); }
.t-c .a-kpi .v { font-weight: 500; }
.t-c .a-tbl td, .t-c .tbl td { height: 36px; border-bottom-color: var(--line-2); }
.t-c .a-tbl th, .t-c .tbl th { background: var(--th); border-bottom-color: var(--line); }
.t-c .a-tbl tbody tr:hover td { background: #202226; }
.t-c .a-tbl a.a-no { color: var(--ac); }

/* ------------------------------------------------------------ 버튼 · 입력 */
.t-c .a-btn, .t-c .btn { border-radius: 8px; background: var(--card); border-color: var(--line); color: var(--ink); }
.t-c .a-btn:hover { border-color: var(--body2); color: var(--ink); }
.t-c .a-btn-ac, .t-c .btn-primary { background: var(--ac); border-color: var(--ac); color: #111214; font-weight: 600; }
.t-c .a-btn-ac:hover { color: #111214; }
.t-c .a-btn-danger { background: transparent; color: var(--risk); border-color: var(--risk); }
.t-c .a-in, .t-c .a-sel, .t-c .fld, .t-c textarea, .t-c select, .t-c input[type=date], .t-c input[type=number], .t-c input[type=text] {
  background-color: var(--card); color: var(--ink); border-color: var(--line); border-radius: 8px; }
.t-c .a-sel option { background: var(--card); }
.t-c .a-chip { background: var(--ac-soft); color: var(--ac); border-radius: 6px; }
.t-c .a-period a { color: var(--mute); } .t-c .a-period a.on { background: var(--ac); color: #111214; }
.t-c .a-tabs a.on { color: var(--ac); border-bottom-color: var(--ac); }
.t-c .a-bulk { background: var(--card); color: var(--mute); border-radius: 10px; } .t-c .a-bulk.on { background: var(--ac-soft); color: var(--ink); }
.t-c .a-bulk-acts .danger { color: var(--risk); }
.t-c .a-pages a, .t-c .a-pages span { color: var(--body2); } .t-c .a-pages .cur { color: #111214; } .t-c .a-pages .dis { color: #4a4d52; }
.t-c .a-pages select { background: var(--card); color: var(--ink); border-color: var(--line); }
.t-c .a-chk { accent-color: var(--ac); }

/* ------------------------------------------------------------ 배지 · 상태 */
.t-c .badge { color: var(--body2); border-color: var(--body2); background: transparent; }
.t-c .badge.tone-green { background: var(--body2); color: #111214; border-color: var(--body2); }
.t-c .badge.tone-red, .t-c .badge.tone-rose { color: var(--risk); border-color: var(--risk); }
.t-c .a-tier.black { background: #e9eae6; color: #111214; border-color: #e9eae6; }
.t-c .a-tier.gold { background: #e2c27a; color: #111214; border-color: #e2c27a; }   /* GOLD 대비 보정 */
.t-c .a-tier.silver { background: #9aa0a8; color: #111214; border-color: #9aa0a8; }
.t-c .a-tier.member { color: var(--mute); border-color: var(--line); }

/* ------------------------------------------------------------ 토스트 · 팝업 */
.t-c .a-toast { background: #24262a; border: 1px solid var(--line); border-left: 3px solid var(--ac); color: var(--ink); border-radius: 10px; }
.t-c .a-toast.error { border-left-color: var(--risk); } .t-c .a-toast.warning { border-left-color: var(--warn); }
.t-c .a-modal { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; }
.t-c .a-modal::backdrop { background: rgba(0, 0, 0, .6); }
.t-c .a-modal textarea { background: var(--paper); color: var(--ink); }
.t-c #a-modal-desc .box { background: var(--paper); border-color: var(--line); color: var(--ink); }
.t-c .a-chiprow button { background: var(--paper); color: var(--body2); border-color: var(--line); }

/* ------------------------------------------------------------ Today · 차트 */
.t-c .a-bar-row .b { background: #24262a; } .t-c .a-bar-row .b i { background: var(--body2); } .t-c .a-bar-row .b i.on { background: var(--ac); }
.t-c .a-best .bar, .t-c .a-brand-row .tg i { background: #24262a; }
.t-c .a-best .bar i { background: var(--ac); }
.t-c .a-store li.low { background: var(--risk-bg); }
.t-c .a-kpi .bar { background: #24262a; } .t-c .a-kpi .bar i { background: var(--ac); }
.t-c .a-act { border-left-color: var(--line); } .t-c .a-act.risk { border-left-color: var(--risk); }
.t-c .chart-box canvas { filter: none; }

/* ------------------------------------------------------------ CRM */
.t-c .a-ini { background: #24262a; border-color: var(--line); color: var(--body2); }
.t-c .a-crow .cta { background: transparent; color: var(--ink); border-color: var(--line); }
.t-c .a-ev .dt { border-color: var(--line); } .t-c .a-mini { background: #24262a; }
.t-c .a-vtier > a { border-color: var(--line); }
.t-c .a-vtier > a.black { background: #e9eae6; color: #111214; } .t-c .a-vtier > a.black .m { color: #4a4d52; }
.t-c .a-vtier > a.gold { background: #2e2817; color: var(--ink); } .t-c .a-vtier > a.silver { background: #23262a; color: var(--ink); }
.t-c .a-tc.on { background: #24262a; } .t-c .a-tc:hover { background: #202226; }
.t-c .a-closet .ph, .t-c .a-look .ph { background: repeating-linear-gradient(135deg, #202226 0 6px, #1b1d20 6px 12px); border-color: var(--line); color: var(--faint); }
.t-c .a-fit { background: var(--th); } .t-c .a-dates div { border-bottom-color: var(--line); }
.t-c .a-tags span { background: var(--th); border-color: var(--line); }
.t-c .a-idx a { background: #24262a; color: var(--mute); }
.t-c .a-salon th { border-bottom-color: var(--line); } .t-c .a-salon .bk { background: #24262a; color: var(--ink); }
.t-c .a-salon .free { border-color: var(--line); color: #4a4d52; }
.t-c .a-msg { background: var(--th); border-color: var(--line); }
.t-c .a-steps div { border-top-color: #2c2f34; } .t-c .a-steps div.done { border-top-color: var(--body2); }
.t-c .a-funnel i { background: var(--body2); } .t-c .a-funnel div:last-child i { background: var(--ac); }

/* ------------------------------------------------------------ 메타포 화면 */
.t-c .m-ev.drop { background: var(--body2); color: #111214; } .t-c .m-ev.markdown { background: var(--ac); color: #111214; }
.t-c .m-ev.off { background: repeating-linear-gradient(90deg, var(--body2) 0 2px, transparent 2px 4px); color: var(--ink); }
.t-c .m-ev.off span { background: var(--card); } .t-c .m-ev.retail { background: #2c2f34; color: var(--body2); }
.t-c .m-legend i.drop { background: var(--body2); } .t-c .m-legend i.markdown { background: var(--ac); }
.t-c .m-lane { background: repeating-linear-gradient(90deg, transparent 0 calc(3.45% - 1px), #202226 calc(3.45% - 1px) 3.45%); }
.t-c .m-today { border-left-color: var(--ac); } .t-c .m-today-wrap b { background: var(--ac); color: #111214; }
.t-c .m-cat .b { background: #24262a; } .t-c .m-cat .b i { background: var(--body2); } .t-c .m-cat .b i.low { background: var(--risk); }
.t-c .m-cat .b em { background: var(--ac); }
.t-c .a-grid > section.m-signal { background: var(--card); border-color: var(--ac); color: var(--ink); }
.t-c .m-signal .k, .t-c .m-signal .s { color: var(--mute); } .t-c .m-signal .big { color: var(--ac); }
.t-c .m-sig-btn, .t-c .m-issue { background: var(--ac); color: #111214; border-radius: 8px; }
.t-c .m-card { background: var(--card); border-color: var(--line); border-radius: 10px; }
.t-c .m-card .sk { background: repeating-linear-gradient(0deg, transparent 0 9px, #202226 9px 10px); border-color: var(--line); color: var(--faint); }
.t-c .m-card .flag { color: #111214; } .t-c .m-card .tg { border-top-color: var(--line-2); }
.t-c .m-dlv { background: var(--card); } .t-c .m-dlv a { color: var(--body2); } .t-c .m-dlv a.on { color: #111214; }
.t-c .m-ls-r { background: var(--card); } .t-c .m-ls-h { border-bottom-color: var(--line); }
.t-c .m-mx { border-top-color: var(--line); } .t-c .m-mx td { border-top-color: var(--line-2); } .t-c .m-mx td.risk a { color: #111214; }
.t-c .m-mx td.risk { background: var(--risk); }
.t-c .m-cost, .t-c .m-cost i, .t-c .m-spec, .t-c .m-cw > div { border-color: var(--line); }
.t-c .m-spec div { border-right-color: var(--line); }
.t-c .m-cost-l i { border-color: var(--line); }
.t-c .m-tag { background: var(--th); color: var(--ink); border-color: var(--line); border-left-color: var(--risk); }
.t-c .m-tag.on, .t-c .m-tag:hover { background: var(--ac-soft); border-color: var(--ac); }
.t-c .m-chip { background: var(--card); color: var(--ink); border-color: var(--line); } .t-c .m-chip.on { border-color: var(--ac); }
.t-c .m-grid .l1, .t-c .m-leg .l1 { background: #2c2f34; color: var(--body2); }
.t-c .m-grid .l2, .t-c .m-leg .l2 { background: #5c6068; color: #e9eae6; }
.t-c .m-grid .l3, .t-c .m-leg .l3 { background: #c9cbc6; color: #111214; }
.t-c .m-grid .z, .t-c .m-leg .z { background: var(--risk-bg); color: var(--risk); }
.t-c .m-grid tr.wh .h { outline-color: var(--faint); }
.t-c .m-curve { border-bottom-color: var(--line); } .t-c .m-curve i { background: #3a3d42; } .t-c .m-curve i.o { background: var(--ac); }
.t-c .m-move { border-top-color: var(--line); } .t-c .m-move i { color: var(--ac); }
.t-c .m-scard { background: var(--th); border-color: var(--line-2); } .t-c .m-scard p { color: var(--mute); }
.t-c .m-col .h { border-bottom-color: var(--line-2); }
.t-c .m-fit div { background: var(--th); } .t-c .m-fit span { color: var(--mute); }
.t-c .m-cap i { background: repeating-linear-gradient(90deg, #24262a 0 6px, transparent 6px 9px); } .t-c .m-cap i b { background: var(--body2); }
.t-c .m-cap i b.risk { background: var(--risk); } .t-c .m-cap i b.ok { background: var(--ok); }
.t-c .m-lines th { border-color: var(--line); } .t-c .m-lines td { border-bottom-color: var(--line-2); }
.t-c .m-lines .cc, .t-c .m-lines input.q { background: var(--paper); border-color: var(--line); color: var(--ink); }
.t-c .m-costin i { background: #24262a; } .t-c .m-costin b { background: var(--ac); }
.t-c .m-drop { background: var(--paper); border-color: #3a3d42; color: var(--mute); }
.t-c .m-files li { background: var(--th); border-color: var(--line); }
.t-c .m-po-foot { background: var(--card); border-top-color: var(--line); }
.t-c .m-po-steps a { border-bottom-color: var(--line-2); } .t-c .m-po-note { background: var(--card); border-color: var(--line); }
.t-c .m-bom li { border-bottom-color: var(--line-2); }

@media (max-width: 1100px) {
  .t-c .b-shell { grid-template-columns: 1fr; }
  .c-rail { position: fixed; left: -70px; transition: left .2s; } .c-rail.open { left: 0; }
}