/* 치지직 채널 분석기 — 공통 디자인 토큰·컴포넌트 (모든 클래스 ca- 접두사) */
:root{
  --ca-bg:#15151b; --ca-panel:#1b1b23; --ca-panel2:#20202a; --ca-panel3:#262631; --ca-inset:#111117;
  --ca-line:#2a2a35; --ca-line2:#33333f;
  --ca-txt:#ececf1; --ca-txt2:#b9b9c6;
  /* 글자용 회색: 모든 패널 배경(#111117~#262631) 위에서 WCAG 4.5:1 이상 (mut 5.4~6.8, mut2 4.7~5.9) */
  --ca-mut:#9a9aa7; --ca-mut2:#8f8f9c;
  --ca-mut2-deco:#6c6c78;   /* 글자가 아닌 장식(점·구분선)용 어두운 회색 */
  --ca-green:#00ffa3; --ca-green2:#00d68a; --ca-green-soft:rgba(0,255,163,.12);
  --ca-pur:#9229f7; --ca-pur-soft:rgba(146,41,247,.16);
  --ca-amber:#f5b041; --ca-amber-soft:rgba(245,176,65,.14);
  --ca-cyan:#33c6e0; --ca-pink:#ff5aa5; --ca-red:#ff5d5d; --ca-red-soft:rgba(255,93,93,.14);
  --ca-blue:#5b8cff;
  --ca-good:#00e092; --ca-ok:#f5b041; --ca-bad:#ff6b6b;
  --ca-r:14px; --ca-r2:10px; --ca-r3:7px;
  --ca-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 10px 30px rgba(0,0,0,.25);
  --ca-maxw:1280px;
  /* v2 (README §11.2) — 간격·글자 크기·카드 규격 */
  --ca-gap:14px;                       /* 벤토 카드 사이 */
  --ca-flow-gap:16px;                  /* 섹션 안 블록(리드·KPI·행·각주) 사이 */
  --ca-card-r:12px; --ca-card-px:18px; --ca-card-py:16px;
  --ca-body-pad:20px;                  /* .ca-sec-body 안쪽 여백(각주 띠가 이 값만큼 바깥으로 붙는다) */
  --ca-fs-cap:11.5px; --ca-fs-sm:12.5px; --ca-fs-base:13.5px; --ca-fs-title:14px; --ca-fs-lead:15px; --ca-fs-kpi:24px;
  --ca-hair:rgba(255,255,255,.065);    /* 카드 안 구분선 */
  --ca-ease:cubic-bezier(.2,.7,.2,1);
}

.ca{max-width:var(--ca-maxw);margin:0 auto;padding:22px 18px 60px;color:var(--ca-txt);font-variant-numeric:tabular-nums;word-break:keep-all;overflow-wrap:break-word}
.ca *{box-sizing:border-box}
.ca a{color:inherit}
.ca a.ca-link{color:var(--ca-green);text-decoration:none}
.ca a.ca-link:hover{text-decoration:underline}
.ca button{font:inherit;color:inherit}
.ca img{max-width:100%}
.ca h1,.ca h2,.ca h3,.ca h4{margin:0;font-weight:700;letter-spacing:-.2px}
.ca p{margin:0}
.ca-mut{color:var(--ca-mut)}
.ca-small{font-size:12.5px}
.ca-num{font-variant-numeric:tabular-nums}
.ca-hidden{display:none !important}
.ca-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* 키보드 포커스 표시(마우스 클릭에는 안 보임) */
.ca :is(button,a,summary,[tabindex]):focus-visible{outline:2px solid var(--ca-green);outline-offset:2px}
.ca .ca-sec-title:focus{outline:none}
.ca .ca-sec-title:focus-visible{outline:2px solid var(--ca-green);outline-offset:3px;border-radius:4px}

/* ── 히어로·검색 ───────────────────────────────────────── */
.ca-hero{position:relative;background:
  radial-gradient(900px 260px at 12% -40%, rgba(0,255,163,.16), transparent 60%),
  radial-gradient(700px 260px at 100% 0%, rgba(146,41,247,.20), transparent 60%),
  var(--ca-panel);border:1px solid var(--ca-line);border-radius:18px;padding:26px 26px 20px;box-shadow:var(--ca-shadow);overflow:hidden}
.ca-hero-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ca-logo-mark{flex:none;width:38px;height:38px;border-radius:11px;background:#0b0b0f;border:1px solid rgba(0,255,163,.45);display:flex;align-items:center;justify-content:center;color:var(--ca-green);font-weight:800;font-size:19px;box-shadow:0 0 18px rgba(0,255,163,.18)}
.ca-hero h1{font-size:24px}
.ca-hero h1 em{font-style:normal;color:var(--ca-green)}
.ca-hero-sub{color:var(--ca-txt2);font-size:14px;margin-top:6px}
.ca-hero-sub b{color:var(--ca-txt);font-weight:700}
/* 검색 없이 쓸 수 있는 계산기 바로 가기(빈 프레임에서 계산기가 화면 아래에 있어도 찾을 수 있게) */
.ca a.ca-hero-calc{display:inline-flex;align-items:center;gap:9px;margin-top:12px;padding:8px 14px 8px 11px;min-height:40px;border-radius:10px;border:1px solid rgba(245,176,65,.38);background:rgba(245,176,65,.08);color:var(--ca-txt);font-size:13.5px;text-decoration:none;transition:background .15s,border-color .15s;max-width:100%}
.ca a.ca-hero-calc:hover{background:rgba(245,176,65,.15);border-color:rgba(245,176,65,.6)}
.ca-hero-calc svg{width:18px;height:18px;flex:none;color:var(--ca-amber)}
.ca-hero-calc b{color:var(--ca-amber);font-weight:750}
.ca-hero-calc-arr{color:var(--ca-amber);font-weight:800}
.ca-search{display:flex;gap:10px;margin-top:18px;position:relative}
.ca-search-box{flex:1;display:flex;align-items:center;gap:10px;background:var(--ca-inset);border:1px solid var(--ca-line2);border-radius:12px;padding:0 14px;min-height:52px;transition:border-color .15s, box-shadow .15s}
.ca-search-box:focus-within{border-color:rgba(0,255,163,.6);box-shadow:0 0 0 3px rgba(0,255,163,.12)}
.ca-search-box svg{flex:none;opacity:.6}
.ca-search input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--ca-txt);font-size:16px;padding:14px 0}
.ca-search input::placeholder{color:var(--ca-mut2)}
.ca-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--ca-line2);background:var(--ca-panel2);color:var(--ca-txt);border-radius:10px;padding:9px 14px;min-height:40px;font-size:14px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,transform .05s;white-space:nowrap}
.ca-btn:hover{background:var(--ca-panel3);border-color:#40404d}
.ca-btn:active{transform:translateY(1px)}
.ca-btn:disabled{opacity:.5;cursor:not-allowed}
.ca-btn-primary,.ca .ca-btn-primary{background:var(--ca-green);border-color:var(--ca-green);color:#04140d;font-weight:800;text-decoration:none}
.ca-btn-primary:hover,.ca .ca-btn-primary:hover{background:#3dffb8;border-color:#3dffb8;color:#04140d}
.ca a.ca-btn{text-decoration:none}
/* `.ca button{font:inherit}`(0,1,1) 보다 구체적이어야 크기가 적용된다 */
.ca-btn-lg,.ca .ca-btn-lg{min-height:52px;padding:0 22px;font-size:15.5px;border-radius:12px}
.ca-btn-sm,.ca .ca-btn-sm{min-height:32px;padding:5px 10px;font-size:12.5px;border-radius:8px}
.ca-hints{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;font-size:12.5px;color:var(--ca-mut)}
.ca-hints code{background:rgba(255,255,255,.05);border:1px solid var(--ca-line);border-radius:6px;padding:2px 7px;color:var(--ca-txt2);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px}
.ca-recent{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.ca-recent:empty{display:none}
.ca-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ca-line2);background:rgba(255,255,255,.03);border-radius:999px;padding:5px 11px;font-size:12.5px;color:var(--ca-txt2);cursor:pointer;min-height:30px}
.ca-chip:hover{border-color:rgba(0,255,163,.5);color:var(--ca-txt)}
.ca-chip img{width:18px;height:18px;border-radius:50%;object-fit:cover}

/* 후보 선택 */
.ca-cands{margin-top:14px;background:var(--ca-inset);border:1px solid var(--ca-line2);border-radius:12px;overflow:hidden}
.ca-cands-head{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;font-size:13px;color:var(--ca-txt2);border-bottom:1px solid var(--ca-line)}
.ca-cand{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--ca-line);padding:11px 14px;cursor:pointer;min-height:56px}
.ca-cand:last-child{border-bottom:0}
.ca-cand:hover{background:rgba(0,255,163,.06);outline:0}
.ca .ca-cand:focus-visible{background:rgba(0,255,163,.10);outline:2px solid var(--ca-green);outline-offset:-2px}
.ca-cand img,.ca-cand .ca-ava{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;background:var(--ca-panel3)}
.ca-cand-name{font-weight:700;display:flex;align-items:center;gap:6px}
.ca-cand-sub{font-size:12.5px;color:var(--ca-mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60vw}
.ca-cand .ca-right{margin-left:auto;text-align:right;font-size:12.5px;color:var(--ca-txt2);flex:none}

/* ── 섹션 내비 ─────────────────────────────────────────── */
.ca-nav{position:sticky;top:0;z-index:30;margin:16px -18px 0;padding:10px 18px;background:rgba(21,21,27,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.ca-nav.is-stuck{border-bottom-color:var(--ca-line)}
/* 바 = [채널 칩(고정, 스크롤 밖)] [섹션 링크(가로 스크롤 — 넘치면 양 끝 페이드·‹ › 버튼)] */
.ca-nav-bar{display:flex;align-items:center;gap:0;padding:4px;background:rgba(255,255,255,.022);border:1px solid var(--ca-line);border-radius:12px;min-width:0}
.ca-nav-scroller{position:relative;flex:1 1 0;min-width:0;display:flex}
.ca-nav-inner{display:flex;align-items:center;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1 1 auto;min-width:0;overscroll-behavior-x:contain}
.ca-nav-inner::-webkit-scrollbar{display:none}
.ca-nav-scroller::before,.ca-nav-scroller::after{content:"";position:absolute;top:0;bottom:0;width:44px;pointer-events:none;opacity:0;transition:opacity .15s;z-index:1}
.ca-nav-scroller::before{left:0;background:linear-gradient(90deg,#1c1c23 30%,rgba(28,28,35,0))}
.ca-nav-scroller::after{right:0;background:linear-gradient(270deg,#1c1c23 30%,rgba(28,28,35,0))}
.ca-nav-scroller.can-prev::before,.ca-nav-scroller.can-next::after{opacity:1}
.ca .ca-nav-arrow{position:absolute;top:50%;z-index:2;display:none;align-items:center;justify-content:center;width:26px;height:26px;margin-top:-13px;padding:0;border-radius:50%;border:1px solid var(--ca-line2);background:var(--ca-panel3);color:var(--ca-txt);font-size:17px;font-weight:700;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.ca .ca-nav-arrow:hover{border-color:rgba(0,255,163,.5);color:var(--ca-green)}
.ca-nav-arrow.is-prev{left:2px}
.ca-nav-arrow.is-next{right:2px}
.ca-nav-scroller.can-prev .ca-nav-arrow.is-prev,.ca-nav-scroller.can-next .ca-nav-arrow.is-next{display:inline-flex}
.ca-nav-ch{display:none;align-items:center;gap:8px;padding:0 10px 0 6px;margin-right:4px;border-right:1px solid var(--ca-line);flex:none;max-width:46%;min-height:30px;overflow:hidden}
.ca-nav-ch.is-on{display:flex}
.ca-nav-ch img,.ca-nav-ch .ca-ava{width:24px !important;height:24px !important;border-radius:50%;object-fit:cover;flex:none}
.ca-nav-ch b{font-size:13px;max-width:120px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca-nav-ch > .ca-badge{flex:none}
.ca-nav-ch > .ca-spoon-badge{flex:0 1 auto;min-width:0}
.ca-nav a{flex:none;display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-size:13px;font-weight:550;color:var(--ca-txt2);padding:0 10px;border-radius:8px;border:1px solid transparent;min-height:32px;transition:background .15s,color .15s;white-space:nowrap}
.ca-nav a:hover{background:rgba(255,255,255,.05);color:var(--ca-txt)}
.ca-nav a.is-active{background:var(--ca-panel3);border-color:var(--ca-line2);color:var(--ca-txt)}
.ca-dot{width:7px;height:7px;border-radius:50%;background:var(--ca-line2);flex:none}
.ca-dot[data-s="loading"]{background:var(--ca-amber);animation:ca-pulse 1s infinite}
.ca-dot[data-s="done"]{background:var(--ca-green)}
.ca-dot[data-s="error"]{background:var(--ca-red)}
.ca-dot[data-s="skip"]{background:var(--ca-mut2-deco)}
.ca-dot[data-s="live"]{background:#ff3b3b;animation:ca-pulse 1s infinite}
@keyframes ca-pulse{50%{opacity:.35}}

/* ── 섹션 프레임 ─────────────────────────────────────────
 * 머리글 = [아이콘 36] [제목·설명] [상태 알약] 3열 그리드, 세로 가운데 정렬. 모바일은 상태 알약이 설명 아래로 내려간다. */
.ca-secs{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin-top:18px}
.ca-sec{background:var(--ca-panel);border:1px solid var(--ca-line);border-radius:var(--ca-r);box-shadow:var(--ca-shadow);scroll-margin-top:72px;min-width:0}
.ca-sec-head{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;column-gap:14px;row-gap:8px;padding:16px var(--ca-body-pad);min-height:72px;border-bottom:1px solid var(--ca-line);background:linear-gradient(180deg,rgba(255,255,255,.018),transparent);border-radius:var(--ca-r) var(--ca-r) 0 0}
.ca-sec-head > div:nth-child(2){min-width:0}
.ca-sec-icon{width:36px;height:36px;flex:none;border-radius:10px;background:linear-gradient(180deg,#2b2b37,#22222c);border:1px solid var(--ca-line2);box-shadow:0 1px 0 rgba(255,255,255,.05) inset;display:flex;align-items:center;justify-content:center;font-size:17px;color:var(--ca-green)}
.ca-sec-icon svg{width:18px;height:18px;display:block}
.ca-sec-title{font-size:17px;font-weight:750;line-height:1.3;letter-spacing:-.3px}
.ca-sec-desc{font-size:12.5px;color:var(--ca-mut);margin-top:3px;line-height:1.45}
/* 상태 알약: 글자가 길면 말줄임(전체 문구는 title 속성) */
.ca-sec-status{justify-self:end;display:inline-block;max-width:min(42vw,380px);height:28px;line-height:26px;padding:0 11px 0 10px;border-radius:999px;border:1px solid var(--ca-line2);background:rgba(255,255,255,.03);font-size:12px;font-weight:600;color:var(--ca-txt2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.ca-sec-status:empty{display:none}
.ca-sec-status::before{content:"";display:inline-block;vertical-align:middle;width:7px;height:7px;margin:-2px 7px 0 0;border-radius:50%;background:var(--ca-mut2-deco)}
.ca-sec-status[data-s="loading"]{color:var(--ca-amber);border-color:rgba(245,176,65,.32);background:rgba(245,176,65,.07)}
.ca-sec-status[data-s="loading"]::before{background:var(--ca-amber);animation:ca-pulse 1s infinite}
.ca-sec-status[data-s="done"]{color:var(--ca-txt2)}
.ca-sec-status[data-s="done"]::before{background:var(--ca-green)}
.ca-sec-status[data-s="error"]{color:#ff9a9a;border-color:rgba(255,93,93,.35);background:var(--ca-red-soft)}
.ca-sec-status[data-s="error"]::before{background:var(--ca-red)}
.ca-sec-status[data-s="skip"]{color:var(--ca-mut)}
.ca-sec-status[data-s="live"]{color:#ff9c9c;font-weight:700;border-color:rgba(255,59,59,.4);background:rgba(255,59,59,.1)}
.ca-sec-status[data-s="live"]::before{width:8px;height:8px;background:#ff3b3b;animation:ca-pulse 1.2s infinite}
.ca-sec-body{padding:var(--ca-body-pad);min-width:0}
.ca-progress{height:3px;background:var(--ca-line);border-radius:3px;overflow:hidden;margin:calc(-1 * var(--ca-body-pad)) calc(-1 * var(--ca-body-pad)) 16px}
.ca-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--ca-green),var(--ca-cyan));width:0;transition:width .3s}

/* 빈 프레임·스켈레톤 (v2: 벤토 칸 그대로 — 데이터가 와도 자리가 크게 바뀌지 않는다) */
.ca-ph{display:grid;gap:var(--ca-gap)}
.ca-ph-row{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:12px}
.ca-ph-box{height:var(--h,74px);border-radius:var(--ca-card-r);background:linear-gradient(90deg,rgba(255,255,255,.03),rgba(255,255,255,.05),rgba(255,255,255,.03));background-size:200% 100%;border:1px dashed rgba(255,255,255,.065)}
.is-loading .ca-ph-box{animation:ca-shimmer 1.3s linear infinite;border-style:solid;border-color:transparent}
@keyframes ca-shimmer{to{background-position:-200% 0}}
.ca-ph-msg{font-size:13px;color:var(--ca-mut2);text-align:center;padding:4px 0 2px}
/* 검색 전(main.is-idle): 채널 섹션은 머리글 띠 한 줄만 — 검색 없이 쓰는 계산기가 9화면 아래에 묻히지 않게 */
.ca.is-idle .ca-secs{gap:10px}
.ca.is-idle .ca-sec:not([data-sec="calc"]) > .ca-sec-body{display:none}
.ca.is-idle .ca-sec:not([data-sec="calc"]) > .ca-sec-head{border-bottom:0;border-radius:var(--ca-r);min-height:0;padding-top:12px;padding-bottom:12px}
.ca.is-idle .ca-sec:not([data-sec="calc"]) .ca-sec-icon{opacity:.75}
.ca.is-idle .ca-sec:not([data-sec="calc"]) .ca-sec-status{color:var(--ca-mut)}
.ca.is-idle #sec-calc{margin-top:8px}

/* ── 공통 컴포넌트 ─────────────────────────────────────── */
.ca-grid{display:grid;gap:14px;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr))}
.ca-grid-3{--cols:3}.ca-grid-4{--cols:4}.ca-grid-2{--cols:2}
.ca-stack{display:grid;gap:14px}
.ca-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ca-card{background:var(--ca-panel2);border:1px solid var(--ca-line);border-radius:var(--ca-r2);padding:14px 16px;min-width:0}
.ca-card-title{font-size:13.5px;font-weight:700;color:var(--ca-txt);display:flex;align-items:center;gap:8px;margin-bottom:10px}
.ca-card-title .ca-sub{margin-left:auto;font-weight:500;font-size:12px;color:var(--ca-mut)}
.ca-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.ca-kpi{background:var(--ca-panel2);border:1px solid var(--ca-line);border-radius:var(--ca-r2);padding:12px 14px;min-width:0}
.ca-kpi-label{font-size:12px;color:var(--ca-mut)}
.ca-kpi-value{font-size:22px;font-weight:800;margin-top:3px;letter-spacing:-.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ca-kpi-sub{font-size:11.5px;color:var(--ca-mut);margin-top:2px}
.ca-kpi[data-tone="good"] .ca-kpi-value{color:var(--ca-good)}
.ca-kpi[data-tone="bad"] .ca-kpi-value{color:var(--ca-bad)}
.ca-kpi[data-tone="warn"] .ca-kpi-value{color:var(--ca-ok)}
.ca-kpi[data-tone="accent"] .ca-kpi-value{color:var(--ca-green)}
.ca-badge{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:650;padding:3px 8px;border-radius:6px;background:rgba(255,255,255,.06);color:var(--ca-txt2);white-space:nowrap}
.ca-badge[data-tone="good"]{background:rgba(0,224,146,.13);color:var(--ca-good)}
.ca-badge[data-tone="bad"]{background:var(--ca-red-soft);color:#ff8c8c}
.ca-badge[data-tone="warn"]{background:var(--ca-amber-soft);color:var(--ca-amber)}
.ca-badge[data-tone="accent"]{background:var(--ca-green-soft);color:var(--ca-green)}
.ca-badge[data-tone="pur"]{background:var(--ca-pur-soft);color:#c58bff}
.ca-badge[data-tone="live"]{background:#ff3b3b;color:#fff}
.ca-empty{padding:20px;text-align:center;color:var(--ca-mut);font-size:13px;background:rgba(255,255,255,.02);border:1px dashed var(--ca-line2);border-radius:var(--ca-r2)}
.ca-note{font-size:12px;color:var(--ca-mut);line-height:1.6;margin-top:8px}
.ca-note::before{content:"ⓘ ";color:var(--ca-mut2)}
.ca-error{padding:16px;border-radius:var(--ca-r2);background:var(--ca-red-soft);border:1px solid rgba(255,93,93,.3);color:#ffb3b3;font-size:13.5px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ca-divider{height:1px;background:var(--ca-line);margin:14px 0}
.ca-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ca-list li{min-width:0}

/* 테이블 */
.ca-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--ca-line);border-radius:var(--ca-r2)}
.ca-table{width:100%;border-collapse:collapse;font-size:13px;min-width:520px}
.ca-table th{position:sticky;top:0;background:var(--ca-panel3);color:var(--ca-mut);font-weight:600;text-align:left;padding:9px 12px;white-space:nowrap;font-size:12px}
.ca-table td{padding:9px 12px;border-top:1px solid var(--ca-line);vertical-align:middle}
.ca-table tr:hover td{background:rgba(255,255,255,.02)}
.ca-table .r{text-align:right;white-space:nowrap}
.ca-table .ca-ell{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 랭킹 리스트 */
.ca-rank{display:grid;gap:6px}
.ca-rank-item{display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;background:rgba(255,255,255,.02);font-size:13px}
.ca-rank-item b{font-weight:800;color:var(--ca-mut);text-align:center}
.ca-rank-item:nth-child(1) b{color:#ffd56b}.ca-rank-item:nth-child(2) b{color:#d8dbe6}.ca-rank-item:nth-child(3) b{color:#e0a46b}
.ca-rank-item .ca-ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca-rank-item .ca-v{font-weight:700;white-space:nowrap}

/* ── 차트 ─────────────────────────────────────────────── */
.ca-chart{width:100%;min-width:0;position:relative}
.ca-chart svg{display:block;width:100%;height:auto;overflow:visible}
.ca-chart text{fill:var(--ca-mut);font-size:10.5px;font-family:inherit}
.ca-chart .ca-grid-line{stroke:var(--ca-line);stroke-width:1}
.ca-chart .ca-axis-label{fill:var(--ca-mut2);font-size:10px}
.ca-chart [data-tip]{cursor:default}
.ca-chart [data-tip]:hover{opacity:.82}
.ca-hbars{display:grid;gap:8px}
.ca-hbar{display:grid;grid-template-columns:minmax(70px,32%) minmax(0,1fr) auto;align-items:center;gap:10px;font-size:12.5px}
.ca-hbar-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ca-txt2)}
.ca-hbar-track{height:10px;background:rgba(255,255,255,.05);border-radius:5px;overflow:hidden}
.ca-hbar-fill{display:block;height:100%;border-radius:5px;background:var(--ca-green)}
.ca-hbar-val{font-weight:700;white-space:nowrap;color:var(--ca-txt);font-size:12.5px}
.ca-hbar-sub{display:block;font-size:11px;color:var(--ca-mut);font-weight:500}
.ca-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--ca-txt2);margin-top:10px}
.ca-legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.ca-heat{display:grid;grid-template-columns:28px repeat(24,minmax(0,1fr));gap:2px;font-size:10px;color:var(--ca-mut)}
.ca-heat-cell{aspect-ratio:1/1;border-radius:3px;background:rgba(255,255,255,.04);min-height:9px}
.ca-heat-row-label{display:flex;align-items:center;justify-content:flex-end;padding-right:5px}
.ca-heat-col-label{text-align:center;font-size:9.5px;color:var(--ca-mut2)}
.ca-meter{display:grid;gap:5px}
.ca-meter-top{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ca-txt2)}
.ca-meter-top b{color:var(--ca-txt)}
.ca-meter-track{height:8px;border-radius:4px;background:rgba(255,255,255,.06);overflow:hidden}
.ca-meter-fill{height:100%;border-radius:4px}

.ca-donut{display:grid;justify-items:center;gap:4px}
.ca-donut .ca-legend{justify-content:center}
.ca-words{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;line-height:1.35}
.ca-word{font-weight:700;white-space:nowrap}
.ca-img-ph{background:var(--ca-panel3);border-radius:8px;min-height:24px}

/* 툴팁 */
.ca-tip{position:fixed;z-index:9999;pointer-events:none;background:#0d0d12;border:1px solid var(--ca-line2);color:var(--ca-txt);font-size:12px;line-height:1.45;padding:7px 10px;border-radius:8px;max-width:280px;white-space:pre-line;box-shadow:0 8px 24px rgba(0,0,0,.4);opacity:0;transform:translateY(4px);transition:opacity .08s,transform .08s}
.ca-tip.is-on{opacity:1;transform:none}

/* 토스트 */
.ca-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:9998;background:#0d0d12;border:1px solid var(--ca-line2);color:var(--ca-txt);padding:10px 16px;border-radius:10px;font-size:13.5px;box-shadow:0 10px 30px rgba(0,0,0,.45);max-width:calc(100vw - 32px)}

/* ═════════════════════════════════════════════════════════════════════════
 * 디자인 시스템 v2 (README §11.2) — layout.js 헬퍼가 만드는 클래스. 옛 클래스(.ca-card·.ca-kpis·.ca-grid…)는 위에 그대로 둔다.
 * ═════════════════════════════════════════════════════════════════════════ */

/* 한국어 줄바꿈: 어절 단위(단어 중간에서 끊지 않음), 긴 URL 등은 어디서든 끊어 넘침 방지 */
/* (.ca 루트가 keep-all + break-word 를 상속시키고, 아래 글 블록은 좁은 칸에서 넘치지 않게 anywhere) */
.ca-lead,.ca-card2-title-text,.ca-card2-desc,.ca-card2-text,.ca-subhead-title,.ca-subhead-desc,.ca-sec-desc,.ca-hero-sub,.ca-foot,.ca-kv dt,.ca-kv-sub,.ca-tile,.ca-empty,
.ca-card2-foot,.ca-card2-foot *,.ca-kpi2-sub,.ca-ov-rules-text,.ca-lv-off-sum,.ca-support-muted,.ca-clips-title,.ca-categories-nolives,.ca-empty-hint,.ca-fn-note{word-break:keep-all;overflow-wrap:anywhere}

/* 섹션 안 세로 흐름: 리드 → KPI → 행들 → 각주. 블록 사이 간격을 한 값으로 고정 */
.ca-flow{display:flex;flex-direction:column;gap:var(--ca-flow-gap);min-width:0}
.ca-flow > *{min-width:0}
.ca-flow > .ca-subhead:not(:first-child){margin-top:10px}

/* ── 12열 벤토 그리드 ──
 * 카드마다 .ca-span-N. 같은 행 카드는 높이가 같다(stretch). 행 span 합 12 는 layout.bento() 가 보장(빈칸이면 마지막 카드를 늘림).
 * ≤1100px: bento() 가 행 단위로 계산한 --ca-tspan(없으면 3~6→6, 7~11→12) / ≤760px: 전부 12(--ca-mspan 로 예외). */
.ca-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--ca-gap);align-items:stretch;min-width:0}
.ca-bento > *{grid-column:span 12;min-width:0}
.ca-span-2{grid-column:span 2}.ca-span-3{grid-column:span 3}.ca-span-4{grid-column:span 4}.ca-span-5{grid-column:span 5}
.ca-span-6{grid-column:span 6}.ca-span-7{grid-column:span 7}.ca-span-8{grid-column:span 8}.ca-span-9{grid-column:span 9}
.ca-span-10{grid-column:span 10}.ca-span-11{grid-column:span 11}.ca-span-12{grid-column:span 12}
/* 한 칸에 카드 여러 장을 세로로(높이는 옆 카드에 맞춰 나눠 가짐) */
.ca-bento-col{display:flex;flex-direction:column;gap:var(--ca-gap);min-width:0}
.ca-bento-col > *{flex:1 1 auto;min-width:0}

/* 같은 폭 칸 그리드(카드 안 타일·목록용). --ca-gc 데스크톱 / --ca-gct 태블릿 / --ca-gcm 모바일 */
.ca-grid2{display:grid;gap:var(--ca-g2gap,12px);grid-template-columns:repeat(var(--ca-gc,2),minmax(0,1fr));align-items:stretch;min-width:0}
.ca-grid2 > *{min-width:0}
.ca-grid2.is-auto{grid-template-columns:repeat(auto-fill,minmax(min(var(--ca-gmin,220px),100%),1fr))}

/* ── 카드 해부도: 머리글(제목 좌 · 메타/토글 우) → 본문(flex:1) → 바닥글(바닥 고정) ── */
.ca-card2{position:relative;display:flex;flex-direction:column;min-width:0;background:linear-gradient(180deg,rgba(255,255,255,.014),transparent 96px),var(--ca-panel2);border:1px solid var(--ca-line);border-radius:var(--ca-card-r);padding:var(--ca-card-py) var(--ca-card-px)}
/* 머리글: 1줄 = [제목 ……… 메타](같은 줄 고정 — 메타는 최대 50%·말줄임, 제목은 줄바꿈) · 토글 / 2줄 = 설명(전체 폭).
 * 토글이 안 들어가면(제목줄 최소 220px) 토글만 다음 줄로. 모바일은 토글이 설명 아래. */
.ca-card2-head{display:flex;align-items:flex-start;flex-wrap:wrap;column-gap:12px;row-gap:6px;min-height:32px;margin-bottom:12px}
.ca-card2-bar{flex:1 1 220px;min-width:0;display:flex;align-items:flex-start;gap:12px}
.ca .ca-card2-title{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;margin:0;font-size:var(--ca-fs-title);font-weight:700;line-height:22px;color:var(--ca-txt);letter-spacing:-.15px}
.ca-card2-title-text{min-width:0}
.ca-card2-descs{flex:1 0 100%;order:5;min-width:0;margin-top:-4px}
.ca-card2-descs > .ca-card2-desc:first-child{margin-top:0}
.ca-card2-title > .ca-badge{font-size:11px;padding:2px 7px}
.ca-card2-ico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;background:rgba(255,255,255,.05);font-size:13px;line-height:1}
.ca-card2-desc{font-size:12.5px;line-height:1.5;color:var(--ca-mut);margin-top:2px}
.ca-card2-meta{flex:0 1 auto;min-width:0;max-width:50%;margin-left:auto;font-size:12px;line-height:22px;color:var(--ca-mut2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
.ca-card2-actions{flex:0 1 auto;display:flex;align-items:center;gap:6px;margin:-3px 0;max-width:100%;min-width:0}
.ca-card2-body{flex:1 1 auto;display:flex;flex-direction:column;gap:12px;min-width:0;min-height:0}
.ca-card2-body > *{min-width:0}
.ca-card2-text{font-size:13px;line-height:1.65;color:var(--ca-txt2)}
.ca-card2.is-fill > .ca-card2-body{justify-content:center}
.ca-card2-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:14px;padding-top:11px;border-top:1px solid var(--ca-hair);font-size:12px;line-height:1.55;color:var(--ca-mut)}
.ca-card2-foot > .ca-legend2{margin:0}
/* 본문을 카드 가장자리까지(표·목록): 좌우·아래 여백을 없애고 표 테두리는 위 한 줄만 */
.ca-card2.is-flush{padding-bottom:0}
.ca-card2.is-flush > .ca-card2-body{margin:0 calc(-1 * var(--ca-card-px))}
.ca-card2.is-flush > .ca-card2-foot{margin-top:0;padding:11px var(--ca-card-px) 13px;margin-left:calc(-1 * var(--ca-card-px));margin-right:calc(-1 * var(--ca-card-px))}
.ca-card2.is-flush > .ca-card2-body > .ca-table-wrap{border:0;border-top:1px solid var(--ca-line);border-radius:0}
.ca-card2.is-flush > .ca-card2-body:last-child > .ca-table-wrap:last-child{border-radius:0 0 var(--ca-card-r) var(--ca-card-r)}
/* 열이 적은 표: 최소 폭(520px) 없이 카드 폭에 맞춤 — ui.table(...) 결과에 classList.add('is-fit') */
.ca-table-wrap.is-fit .ca-table{min-width:0}
.ca-card2.is-flush .ca-table th:first-child,.ca-card2.is-flush .ca-table td:first-child{padding-left:var(--ca-card-px)}
.ca-card2.is-flush .ca-table th:last-child,.ca-card2.is-flush .ca-table td:last-child{padding-right:var(--ca-card-px)}
/* 톤: 테두리·윗부분 빛만 바뀐다 */
.ca-card2[data-tone="accent"],.ca-card2[data-tone="good"]{border-color:rgba(0,255,163,.26);background:linear-gradient(180deg,rgba(0,255,163,.055),transparent 120px),var(--ca-panel2)}
.ca-card2[data-tone="pur"]{border-color:rgba(155,92,255,.32);background:linear-gradient(180deg,rgba(155,92,255,.08),transparent 120px),var(--ca-panel2)}
.ca-card2[data-tone="warn"]{border-color:rgba(245,176,65,.3);background:linear-gradient(180deg,rgba(245,176,65,.06),transparent 120px),var(--ca-panel2)}
.ca-card2[data-tone="bad"]{border-color:rgba(255,93,93,.32);background:linear-gradient(180deg,rgba(255,93,93,.06),transparent 120px),var(--ca-panel2)}
.ca-card2[data-tone="live"]{border-color:rgba(255,59,59,.38);background:linear-gradient(180deg,rgba(255,59,59,.07),transparent 120px),var(--ca-panel2)}
.ca-card2.is-inset{background:var(--ca-inset)}
/* 카드 안 빈 상태: 남는 높이를 채우고 가운데 */
.ca-card2-body > .ca-empty,.ca-plot > .ca-empty,.ca-plot > .ca-chart > .ca-empty{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:120px}
.ca-empty-ico{font-size:20px;opacity:.7;line-height:1}
.ca-empty-hint{font-size:12px;color:var(--ca-mut2)}

/* 차트 자리: 남는 높이를 채우고 차트는 세로 가운데 */
.ca-plot{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;min-width:0;min-height:var(--ca-plot-min,0px)}
.ca-plot > .ca-chart{width:100%}
.ca-plot.is-top{justify-content:flex-start}

/* 작은 상자(카드 안 항목) */
.ca-tile{min-width:0;background:rgba(255,255,255,.025);border:1px solid var(--ca-line);border-radius:10px;padding:12px 14px}
.ca-tile[data-tone="good"],.ca-tile[data-tone="accent"]{border-color:rgba(0,255,163,.22);background:rgba(0,255,163,.045)}
.ca-tile[data-tone="warn"]{border-color:rgba(245,176,65,.26);background:rgba(245,176,65,.05)}
.ca-tile[data-tone="bad"]{border-color:rgba(255,93,93,.28);background:rgba(255,93,93,.05)}
.ca-tile[data-tone="pur"]{border-color:rgba(155,92,255,.3);background:rgba(155,92,255,.06)}

/* ── KPI 줄: 데스크톱 --ca-kc(기본 6)·태블릿 --ca-kct(3)·모바일 --ca-kcm(2) 칸, 같은 높이. 마지막 칸이 남는 열을 채운다 ── */
.ca-kpis2{display:grid;grid-template-columns:repeat(var(--ca-kc,6),minmax(0,1fr));gap:10px;align-items:stretch;min-width:0}
.ca-kpis2 > .is-last{grid-column:span var(--ca-kl,1)}
.ca-kpi2{position:relative;display:flex;flex-direction:column;min-width:0;min-height:100px;padding:13px 15px 12px;background:linear-gradient(180deg,rgba(255,255,255,.016),transparent 60px),var(--ca-panel2);border:1px solid var(--ca-line);border-radius:var(--ca-card-r)}
.ca-kpi2-top{display:flex;align-items:center;gap:6px;min-height:20px;min-width:0}
.ca-kpi2-label{min-width:0;font-size:12px;font-weight:600;color:var(--ca-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ca .ca-kpi2-info{flex:none;display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;padding:0;border-radius:50%;border:1px solid var(--ca-line2);background:transparent;color:var(--ca-mut2);font-size:9.5px;font-weight:800;font-style:normal;line-height:1;cursor:help}
.ca .ca-kpi2-info:hover{color:var(--ca-txt);border-color:var(--ca-mut2-deco)}
.ca-kpi2-top > .ca-delta{margin-left:auto}
.ca-kpi2-value{margin-top:7px;font-size:var(--ca-fs-kpi);font-weight:800;line-height:1.15;letter-spacing:-.6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ca-txt);font-variant-numeric:tabular-nums}
.ca-unit{font-size:.54em;font-weight:650;letter-spacing:0;color:var(--ca-mut);margin-left:3px}
.ca-kpi2-mid{display:flex;align-items:flex-end;gap:10px;min-width:0;margin-top:7px}
.ca-kpi2-mid > .ca-kpi2-value{margin-top:0;flex:0 1 auto;min-width:0}
.ca-kpi2-spark{flex:1 1 48px;min-width:40px;max-width:58%;height:26px;margin-bottom:3px}
.ca-kpi2-spark .ca-chart,.ca-kpi2-spark svg{height:26px}
.ca-kpi2-sub{margin-top:auto;padding-top:6px;font-size:var(--ca-fs-cap);line-height:1.45;color:var(--ca-mut);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* 값이 이름(카테고리 등)인 KPI: 말줄임 대신 작은 글자 2줄 */
.ca-kpi2.is-text .ca-kpi2-value{font-size:16px;font-weight:750;line-height:1.3;letter-spacing:-.25px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all;overflow-wrap:anywhere}
.ca-kpi2[data-tone="good"] .ca-kpi2-value{color:var(--ca-good)}
.ca-kpi2[data-tone="accent"] .ca-kpi2-value{color:var(--ca-green)}
.ca-kpi2[data-tone="warn"] .ca-kpi2-value{color:var(--ca-ok)}
.ca-kpi2[data-tone="bad"] .ca-kpi2-value{color:var(--ca-bad)}
.ca-kpi2[data-tone="pur"] .ca-kpi2-value{color:#c58bff}
.ca-kpi2[data-tone="cyan"] .ca-kpi2-value{color:var(--ca-cyan)}
.ca-kpi2[data-tone="live"]{border-color:rgba(255,59,59,.38)}
.ca-kpi2[data-tone="live"] .ca-kpi2-value{color:#ff8c8c}
/* 증감 배지 */
.ca-delta{flex:none;display:inline-flex;align-items:center;gap:3px;height:20px;padding:0 6px;border-radius:6px;font-size:11px;font-weight:700;line-height:1;white-space:nowrap;background:rgba(255,255,255,.06);color:var(--ca-txt2);font-variant-numeric:tabular-nums}
.ca-delta[data-tone="good"]{background:rgba(0,224,146,.13);color:var(--ca-good)}
.ca-delta[data-tone="bad"]{background:var(--ca-red-soft);color:#ff8c8c}
.ca-delta[data-tone="warn"]{background:var(--ca-amber-soft);color:var(--ca-amber)}
.ca-delta-arr{font-size:8.5px}

/* ── 리드 문장(섹션 요약, 핵심 수치 강조) ── */
.ca-lead{font-size:var(--ca-fs-lead);line-height:1.7;color:var(--ca-txt2);letter-spacing:-.15px;text-wrap:pretty;margin:0}
.ca-lead b{color:var(--ca-txt);font-weight:700}
.ca-lead b[data-tone="good"],.ca-lead b[data-tone="accent"]{color:var(--ca-green)}
.ca-lead b[data-tone="warn"]{color:var(--ca-amber)}
.ca-lead b[data-tone="bad"]{color:#ff8c8c}
.ca-lead b[data-tone="pur"]{color:#c58bff}
.ca-lead b[data-tone="cyan"]{color:var(--ca-cyan)}
.ca-lead.is-boxed{padding:14px 16px;border-radius:var(--ca-card-r);background:rgba(255,255,255,.022);border:1px solid var(--ca-line)}

/* ── 소제목(섹션 안 묶음) ── */
.ca-subhead{display:flex;align-items:flex-end;flex-wrap:wrap;gap:6px 16px;min-width:0}
.ca-subhead-main{flex:1 1 260px;min-width:0}
.ca .ca-subhead-title{display:flex;align-items:center;gap:9px;margin:0;font-size:15px;font-weight:750;line-height:22px;letter-spacing:-.2px}
.ca-subhead-title::before{content:"";flex:none;width:3px;height:15px;border-radius:2px;background:var(--ca-green)}
.ca-subhead[data-tone="pur"] .ca-subhead-title::before{background:#9b5cff}
.ca-subhead[data-tone="cyan"] .ca-subhead-title::before{background:var(--ca-cyan)}
.ca-subhead[data-tone="warn"] .ca-subhead-title::before{background:var(--ca-amber)}
.ca-subhead-desc{font-size:12.5px;line-height:1.5;color:var(--ca-mut);margin-top:2px;padding-left:12px}
.ca-subhead-meta{flex:none;max-width:100%;font-size:12px;line-height:22px;color:var(--ca-mut2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── 스크롤 상자: 최대 높이 + 아래 페이드(끝까지 내리면 사라짐) ── */
.ca-scrollbox{position:relative;max-height:var(--ca-sb-h,320px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#3a3a47 transparent;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 34px),transparent);border-radius:4px}
.ca-scrollbox::-webkit-scrollbar{width:6px;height:6px}
.ca-scrollbox::-webkit-scrollbar-thumb{background:#3a3a47;border-radius:3px}
.ca-scrollbox.is-end,.ca-scrollbox.is-static{-webkit-mask-image:none;mask-image:none}
/* fill: 같은 행 옆 카드 높이에 맞춰 늘어남(최소 --ca-sb-min) */
.ca-scrollbox.is-fill{flex:1 1 0;max-height:none;min-height:var(--ca-sb-min,160px)}

/* ── 세그먼트 토글 ── */
.ca-seg{display:inline-flex;align-items:center;gap:2px;padding:3px;max-width:100%;overflow-x:auto;scrollbar-width:none;background:var(--ca-inset);border:1px solid var(--ca-line2);border-radius:9px;vertical-align:middle}
.ca-seg::-webkit-scrollbar{display:none}
.ca .ca-seg-btn{position:relative;flex:none;display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 11px;border:0;border-radius:6px;background:transparent;color:var(--ca-mut);font-size:12.5px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s}
.ca .ca-seg-btn:hover{color:var(--ca-txt)}
.ca .ca-seg-btn[aria-pressed="true"]{background:var(--ca-panel3);color:var(--ca-txt);box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 1px 3px rgba(0,0,0,.45)}
.ca .ca-seg-btn:focus-visible{outline-offset:-2px}
.ca-seg.is-sm .ca-seg-btn{height:22px;padding:0 9px;font-size:12px}
.ca-switch{position:relative;display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.ca-switch-view{display:flex;flex-direction:column;gap:12px;flex:1 1 auto;min-width:0}
.ca-switch-view[hidden]{display:none}

/* ── 범례 ── */
.ca-legend2{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font-size:12px;line-height:1.4;color:var(--ca-txt2);min-width:0}
.ca-legend2.is-center{justify-content:center}
.ca-legend2.is-col{flex-direction:column;align-items:stretch;gap:7px}
.ca-legend2-item{display:inline-flex;align-items:center;gap:7px;min-width:0}
.ca-legend2.is-col .ca-legend2-item{display:flex}
.ca-legend2-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca-legend2-val{margin-left:4px;color:var(--ca-txt);font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.ca-legend2.is-col .ca-legend2-val{margin-left:auto;padding-left:12px}
.ca-legend2-sw{flex:none;width:10px;height:10px;border-radius:3px;background:var(--ca-green)}
.ca-legend2-sw[data-shape="dot"]{border-radius:50%}
.ca-legend2-sw[data-shape="line"]{width:14px;height:3px;border-radius:2px}
.ca-legend2-sw[data-shape="dash"]{width:14px;height:0;border-top:2px dashed;background:none !important;border-radius:0}
.ca-legend2-sw[data-shape="tick"]{width:2px;height:12px;border-radius:1px}

/* ── 키·값 목록(설정·리듬 지표 등) ── */
.ca-kv{display:grid;margin:0;min-width:0}
.ca-kv-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:16px;padding:10px 0;border-top:1px solid var(--ca-hair)}
.ca-kv-row:first-child{border-top:0;padding-top:0}
.ca-kv-row:last-child{padding-bottom:0}
.ca-kv dt{min-width:0;font-size:13px;line-height:20px;color:var(--ca-txt2)}
.ca-kv dd{margin:0;min-width:0;font-size:13.5px;line-height:20px;font-weight:700;color:var(--ca-txt);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.ca-kv dd .ca-unit{font-size:12px;margin-left:2px}
.ca-kv-sub{white-space:normal}
.ca-kv dd > .ca-badge{vertical-align:1px}
.ca-kv-desc,.ca-kv-sub{display:block;font-size:var(--ca-fs-cap);line-height:1.5;font-weight:500;color:var(--ca-mut);margin-top:2px}
.ca-kv-row[data-tone="good"] dd{color:var(--ca-good)}
.ca-kv-row[data-tone="warn"] dd{color:var(--ca-amber)}
.ca-kv-row[data-tone="bad"] dd{color:#ff8c8c}
.ca-kv-row[data-tone="accent"] dd{color:var(--ca-green)}
.ca-kv.is-compact .ca-kv-row{padding:7px 0}
.ca-kv.is-compact .ca-kv-row:first-child{padding-top:0}

/* ── 접기 ── */
.ca-collapse{min-width:0;background:var(--ca-panel2);border:1px solid var(--ca-line);border-radius:var(--ca-card-r)}
.ca-collapse > summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:50px;padding:12px var(--ca-card-px);cursor:pointer;border-radius:var(--ca-card-r);font-size:var(--ca-fs-title);font-weight:700}
.ca-collapse > summary::-webkit-details-marker{display:none}
.ca-collapse > summary:hover{background:rgba(255,255,255,.02)}
.ca-collapse-title{min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca-collapse-meta{flex:none;font-size:12px;font-weight:500;color:var(--ca-mut2)}
.ca-collapse-chev{flex:none;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:rgba(255,255,255,.04);color:var(--ca-mut);transition:transform .2s var(--ca-ease)}
.ca-collapse[open] > summary .ca-collapse-chev{transform:rotate(180deg)}
.ca-collapse[open] > summary{border-bottom:1px solid var(--ca-line);border-radius:var(--ca-card-r) var(--ca-card-r) 0 0}
.ca-collapse-body{padding:var(--ca-card-py) var(--ca-card-px)}

/* ── 섹션 각주 띠: 섹션 맨 아래에 붙는 출처·표본·해석 안내 ── */
.ca-foot{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;border:1px solid var(--ca-line);border-radius:var(--ca-card-r);background:rgba(255,255,255,.015);font-size:12px;line-height:1.65;color:var(--ca-mut);min-width:0}
.ca-foot-ico{flex:none;width:16px;height:16px;margin-top:2px;border-radius:50%;border:1px solid var(--ca-mut2-deco);color:var(--ca-mut2);font-size:10px;font-weight:800;font-style:normal;line-height:14px;text-align:center}
.ca-foot-list{list-style:none;margin:0;padding:0;display:grid;gap:3px;min-width:0}
.ca-foot-list li{min-width:0}
.ca-sec-body > .ca-foot:last-child,.ca-sec-body > .ca-flow:last-child > .ca-foot:last-child{margin:4px calc(-1 * var(--ca-body-pad)) calc(-1 * var(--ca-body-pad));padding:13px var(--ca-body-pad) 14px;border:0;border-top:1px solid var(--ca-line);border-radius:0 0 calc(var(--ca-r) - 1px) calc(var(--ca-r) - 1px)}

/* ── 반응형 ───────────────────────────────────────────── */
@media (max-width:1100px){
  .ca-grid-4{--cols:2}
  .ca-grid-3{--cols:2}
  .ca-bento > .ca-span-2,.ca-bento > .ca-span-3,.ca-bento > .ca-span-4,.ca-bento > .ca-span-5,.ca-bento > .ca-span-6{grid-column:span var(--ca-tspan,6)}
  .ca-bento > .ca-span-7,.ca-bento > .ca-span-8,.ca-bento > .ca-span-9,.ca-bento > .ca-span-10,.ca-bento > .ca-span-11{grid-column:span var(--ca-tspan,12)}
  .ca-kpis2{grid-template-columns:repeat(var(--ca-kct,3),minmax(0,1fr))}
  .ca-kpis2 > .is-last{grid-column:span var(--ca-klt,1)}
  .ca-grid2{grid-template-columns:repeat(var(--ca-gct,var(--ca-gc,2)),minmax(0,1fr))}
}
@media (max-width:760px){
  .ca{padding:14px 12px 48px;--ca-body-pad:14px;--ca-gap:12px;--ca-flow-gap:14px;--ca-card-px:14px;--ca-card-py:14px;--ca-fs-kpi:21px;--ca-fs-lead:14.5px}
  .ca-hero{padding:18px 16px 16px;border-radius:14px}
  .ca-hero h1{font-size:20px}
  .ca-hero-top{flex-wrap:nowrap;align-items:flex-start}
  .ca-hero-top > div:last-child{min-width:0}
  .ca-logo-mark{width:34px;height:34px;border-radius:10px;font-size:17px}
  .ca-search{flex-direction:column}
  .ca-btn-lg{width:100%}
  .ca-nav{margin:12px -12px 0;padding:8px 12px}
  /* 좁은 화면: 채널 칩은 아바타+수저 배지만(이름은 title) — 링크 자리를 남긴다 */
  .ca-nav-ch{gap:6px;padding:0 8px 0 4px;max-width:52%}
  .ca-nav-ch b{display:none}
  .ca-nav-ch .ca-spoon-badge-p{display:none}
  .ca-nav-scroller::before,.ca-nav-scroller::after{width:34px}
  .ca a.ca-hero-calc{font-size:13px;width:100%}
  .ca.is-idle .ca-secs{gap:8px}
  .ca.is-idle .ca-sec:not([data-sec="calc"]) .ca-sec-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .ca-grid,.ca-grid-2,.ca-grid-3,.ca-grid-4{--cols:1}
  .ca-sec-head{grid-template-columns:32px minmax(0,1fr);column-gap:12px;padding:14px var(--ca-body-pad);min-height:0}
  .ca-sec-icon{width:32px;height:32px;border-radius:9px}
  .ca-sec-icon svg{width:16px;height:16px}
  .ca-sec-title{font-size:16px}
  .ca-sec-status{grid-column:2;justify-self:start;max-width:100%}
  .ca-progress{margin:calc(-1 * var(--ca-body-pad)) calc(-1 * var(--ca-body-pad)) 12px}
  .ca-ph-row{--n:1 !important}
  .ca-ph .is-sub,.ca-ph .ca-kpis2 > :nth-child(n+5){display:none}
  .ca-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ca-kpi-value{font-size:19px}
  .ca-bento > *,.ca-bento > [class*="ca-span-"]{grid-column:span var(--ca-mspan,12)}
  .ca-kpis2{grid-template-columns:repeat(var(--ca-kcm,2),minmax(0,1fr));gap:8px}
  .ca-kpis2 > .is-last{grid-column:span var(--ca-klm,1)}
  .ca-kpi2{min-height:92px;padding:12px 13px 11px}
  .ca-grid2{grid-template-columns:repeat(var(--ca-gcm,1),minmax(0,1fr))}
  .ca-card2-head{margin-bottom:10px}
  /* 카드 메타: 터치 화면엔 툴팁이 없으니 말줄임 대신 오른쪽 정렬 두 줄까지('보라 배경 = 주말' 같은 범례가 잘리지 않게) */
  .ca-card2-meta{white-space:normal;overflow:visible;line-height:16px;padding-top:3px;max-width:56%}
  .ca-card2-actions{order:6;margin:2px 0 0;flex-basis:100%}
  /* 소제목 메타: 혼자 한 줄로 떨어져 맥락을 잃지 않게 설명 아래 작은 칩으로 */
  .ca-subhead{gap:6px 10px}
  .ca-subhead-meta{white-space:normal;margin-left:12px;padding:0 9px;border-radius:999px;background:rgba(255,255,255,.045);border:1px solid var(--ca-hair);font-size:11.5px;line-height:20px}
}
/* 아주 좁은 휴대폰(≤374px, 예: 360px): KPI 라벨이 1~2px 차이로 말줄임되지 않게 글자·여백만 살짝 줄인다 */
@media (max-width:374px){
  .ca-kpi2{padding-left:12px;padding-right:12px}
  .ca-kpi2-top{gap:5px}
  .ca-kpi2-label{font-size:11.5px;letter-spacing:-.2px}
  .ca-kpi2-top > .ca-delta{padding:0 4px;gap:2px;font-size:10.5px}
  /* 값 옆 미니 추이: 값('12.9만명')이 말줄임되기 전에 추이 그림이 먼저 줄어든다 */
  .ca-kpi2-mid:has(> .ca-kpi2-spark) > .ca-kpi2-value{flex:none}
  .ca-kpi2-spark{min-width:20px}
}
/* 터치 기기: 누르는 대상 최소 40px (README §6) */
@media (pointer:coarse){
  .ca-btn-sm,.ca .ca-btn-sm,.ca-chip,.ca .ca-chip,.ca-nav a{min-height:40px}
  /* 터치 화면은 밀어서 넘기므로 ‹ › 버튼 대신 페이드만(좁은 내비에서 링크 자리를 가리지 않게) */
  .ca-nav-scroller.can-prev .ca-nav-arrow.is-prev,.ca-nav-scroller.can-next .ca-nav-arrow.is-next{display:none}
  .ca .ca-sec summary{min-height:40px}
  /* 표·본문 안 작은 링크: 배치·말줄임은 그대로 두고 투명한 가상 요소로 누르는 영역만 위아래로 넓힌다 */
  .ca a.ca-link{position:relative}
  .ca a.ca-link::after{content:"";position:absolute;left:-4px;right:-4px;top:-13px;bottom:-13px}
  .ca-table td{padding-top:12px;padding-bottom:12px}
  /* 세그먼트 버튼: 모양은 그대로, 누르는 영역만 위아래 40px 로 */
  .ca .ca-seg-btn{height:34px}
  .ca .ca-seg-btn::after{content:"";position:absolute;left:0;right:0;top:-3px;bottom:-3px}
  .ca .ca-kpi2-info{position:relative}
  .ca .ca-kpi2-info::after{content:"";position:absolute;inset:-12px}
}
@media (prefers-reduced-motion:reduce){
  .ca *,.ca *::before,.ca *::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* 데이터 처리 방식 안내(히어로 하단) */
.ca-privacy{margin-top:14px;padding:10px 14px;border:1px solid var(--ca-line2);border-radius:10px;background:rgba(255,255,255,.025);font-size:12.5px;line-height:1.65;color:var(--ca-txt2)}
.ca-privacy-lead{display:flex;gap:9px;align-items:flex-start;margin:0}
.ca-privacy-lead b{color:var(--ca-txt)}
.ca-privacy-ic{flex:none;width:17px;height:17px;margin-top:2px;border-radius:50%;background:var(--ca-green);color:#04140d;font:800 11px/17px Georgia,serif;text-align:center}
.ca-privacy-more{margin-top:6px;padding-left:26px}
.ca-privacy-more summary{cursor:pointer;color:var(--ca-green);font-weight:600;min-height:32px;display:inline-flex;align-items:center;list-style-position:inside}
.ca-privacy-more summary:focus-visible{outline:2px solid var(--ca-green);outline-offset:2px;border-radius:4px}
.ca-privacy-more ul{margin:6px 0 2px;padding-left:18px;display:grid;gap:6px}
.ca-privacy-more ul ul{margin-top:6px;gap:4px}
.ca-privacy-more li b{color:var(--ca-txt)}
@media (max-width:760px){.ca-privacy{font-size:12px;padding:9px 12px}.ca-privacy-more{padding-left:0}}

/* 관리자 열람 띠(README §15.5) */
.ca-admin-bar{display:flex;gap:10px;align-items:flex-start;margin-top:18px;padding:12px 14px;border:1px solid rgba(245,176,65,.45);border-radius:12px;background:var(--ca-amber-soft);color:var(--ca-txt);font-size:13.5px;line-height:1.55}
.ca-admin-bar[hidden]{display:none}
.ca-admin-bar > b{flex:none;color:var(--ca-amber);font-weight:750}
@media (max-width:640px){.ca-admin-bar{flex-direction:column;gap:4px}}