/* 종합 진단 섹션 [slice E] — 디자인 v2(README §11.4). 클래스 ca-diag- 접두사, 토큰은 app.css :root(--ca-*)
 * 골격·카드·간격은 layout.js(card2·bento·flow·subhead·foot)가 만들고, 여기서는 섹션 고유 요소만 다룬다. */

/* ── 팬 성향 대기 배너·스피너 ── */
.ca-diag-banner{display:flex;align-items:center;gap:10px;font-size:13px;line-height:1.5;color:#f7d08e}
.ca-diag-banner b{color:var(--ca-amber)}
.ca-diag-spin{flex:none;display:inline-block;width:12px;height:12px;border-radius:50%;border:2px solid rgba(245,176,65,.3);border-top-color:var(--ca-amber);animation:ca-diag-rot .8s linear infinite}
@keyframes ca-diag-rot{to{transform:rotate(360deg)}}
.ca-diag-pending{gap:6px}
.ca-diag-pending .ca-diag-spin{width:10px;height:10px}

/* 카드 머리글 아이콘(선 SVG) */
.ca-sec[data-sec="diagnosis"] .ca-card2-ico{color:var(--ca-txt2)}
.ca-sec[data-sec="diagnosis"] .ca-card2-ico svg{display:block}

/* ── 종합 점수 카드(5) ── */
.ca-diag-scoretop{display:grid;grid-template-columns:minmax(150px,210px) minmax(0,1fr);gap:16px;align-items:center}
.ca-diag-gauge{min-width:0}
.ca-diag-gauge .ca-chart{margin:0}
.ca-diag-gradebox{min-width:0;display:grid;gap:10px;align-content:center}
.ca-diag-grade-row{display:flex;align-items:center;gap:12px;min-width:0}
.ca-diag-grade{flex:none;width:48px;height:48px;border-radius:13px;border:2px solid;display:flex;align-items:center;justify-content:center;
  font-size:27px;font-weight:900;letter-spacing:-1px;background:rgba(0,0,0,.25)}
.ca-diag-grade-txt{min-width:0;display:grid;gap:2px}
.ca-diag-grade-txt b{font-size:16px;font-weight:800;color:var(--ca-txt);line-height:1.3}
.ca-diag-grade-txt span{font-size:12px;color:var(--ca-mut);line-height:1.4}
.ca-diag-chips{display:flex;flex-wrap:wrap;gap:6px}
.ca-diag-chips .ca-badge{max-width:100%;overflow:hidden;text-overflow:ellipsis}

/* 미니 통계 3칸 */
.ca-diag-ms{display:flex;flex-direction:column;gap:2px;padding:10px 12px}
.ca-diag-ms-l{font-size:11.5px;font-weight:600;color:var(--ca-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ca-diag-ms-v{font-size:19px;font-weight:800;letter-spacing:-.4px;line-height:1.25;color:var(--ca-txt);font-variant-numeric:tabular-nums}
.ca-diag-ms[data-tone="good"] .ca-diag-ms-v{color:var(--ca-good)}
.ca-diag-ms[data-tone="bad"] .ca-diag-ms-v{color:#ff8c8c}
.ca-diag-ms-s{margin-top:auto;font-size:11px;color:var(--ca-mut2);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 가장 먼저 손볼 3가지 */
.ca-diag-top3{display:grid;gap:6px;margin-top:auto}
.ca-diag-top3-h{font-size:12px;font-weight:700;color:var(--ca-txt2)}
.ca-diag-top3 ol{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.ca-diag-top3 .ca-diag-top3-a{display:flex;align-items:center;gap:9px;min-width:0;min-height:32px;padding:5px 10px;border-radius:8px;
  background:rgba(0,0,0,.18);border:1px solid var(--ca-line);text-decoration:none;color:var(--ca-txt);font-size:13px;transition:border-color .15s,background .15s}
.ca-diag-top3 .ca-diag-top3-a:hover{border-color:var(--ca-line2);background:rgba(255,255,255,.03)}
.ca-diag-top3-n{flex:none;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:850;border:1.5px solid var(--ca-cyan)}
.ca-diag-top3 li[data-sev="high"] .ca-diag-top3-n{border-color:var(--ca-bad);color:#ff9c9c}
.ca-diag-top3 li[data-sev="mid"] .ca-diag-top3-n{border-color:var(--ca-amber);color:var(--ca-amber)}
.ca-diag-top3-t{min-width:0;flex:1 1 auto;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca-diag-top3-area{flex:none;font-size:11.5px;color:var(--ca-mut)}
.ca-diag-gradelg{gap:4px 12px}
.ca-diag-gradelg .ca-legend2-item{font-variant-numeric:tabular-nums}

/* ── 차원 프로필(7) ── */
.ca-diag-profile .ca-switch{min-height:300px}

/* ── 차원 카드 3×3 (같은 행: 점수·요약·지표·바닥글 줄 맞춤 — subgrid) ── */
.ca-diag-dims{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ca-gap);align-items:stretch;min-width:0}
.ca-diag-dims > .ca-diag-nacard{grid-column:span var(--ca-diag-nacols,3)}
@supports (grid-template-rows:subgrid){
  .ca-diag-dims > .ca-diag-dim:not(.ca-diag-nacard){display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:12px}
  .ca-diag-dims > .ca-diag-dim:not(.ca-diag-nacard) > .ca-card2-body{display:contents}
  .ca-diag-dims > .ca-diag-dim:not(.ca-diag-nacard) > .ca-card2-head{margin-bottom:0}
  .ca-diag-dims > .ca-diag-dim:not(.ca-diag-nacard) > .ca-card2-foot{margin-top:0}
  .ca-diag-dims > .ca-diag-nacard{grid-row:span 5}
}
.ca-diag-dim{--st:var(--ca-line2)}
.ca-diag-dim::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;border-radius:var(--ca-card-r) var(--ca-card-r) 0 0;background:var(--st);opacity:.9}
.ca-diag-dim[data-status="good"]{--st:var(--ca-good)}
.ca-diag-dim[data-status="ok"]{--st:var(--ca-ok)}
.ca-diag-dim[data-status="bad"]{--st:var(--ca-bad)}
.ca-diag-dim.is-na{--st:var(--ca-mut2-deco);border-style:dashed;background:repeating-linear-gradient(135deg,rgba(255,255,255,.014) 0 10px,transparent 10px 20px),var(--ca-panel2)}
.ca-diag-dim .ca-card2-meta [data-tip]{cursor:help}
.ca-diag-dim-score{display:grid;gap:8px;min-width:0}
.ca-diag-dim-top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.ca-diag-dim-num{font-size:30px;font-weight:850;letter-spacing:-1px;line-height:1;color:var(--ca-mut2);font-variant-numeric:tabular-nums}
.ca-diag-dim-num small{font-size:12px;font-weight:600;color:var(--ca-mut2);margin-left:3px;letter-spacing:0}
/* 미니 불릿 */
.ca-diag-mb{position:relative;height:12px;border-radius:4px;background:rgba(255,255,255,.03);overflow:hidden;cursor:default}
.ca-diag-mb:focus-visible{outline:2px solid var(--ca-green);outline-offset:2px}
.ca-diag-mb-z{position:absolute;top:0;bottom:0}
.ca-diag-mb-bar{position:absolute;left:0;top:3px;height:6px;border-radius:0 3px 3px 0;transition:width .5s var(--ca-ease)}
.ca-diag-mb-t{position:absolute;top:0;bottom:0;width:2px;background:var(--ca-txt);border-radius:1px;opacity:.85}
.ca-diag-dim-sum{font-size:12.8px;line-height:1.6;color:var(--ca-txt2);word-break:keep-all;overflow-wrap:anywhere;margin:0}
/* 세부 지표(라벨 | 값 — 값은 오른쪽 정렬, 길면 줄바꿈). 데스크톱은 펼친 채 요약 줄을 숨기고, 휴대폰은 접어서 시작 */
.ca-diag-dim-more{min-width:0}
.ca-diag-dim-more > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;min-height:34px;padding:6px 0 4px;border-top:1px solid var(--ca-hair);font-size:12.3px;font-weight:600;color:var(--ca-mut)}
.ca-diag-dim-more > summary::-webkit-details-marker{display:none}
.ca-diag-dim-more > summary::after{content:"";width:6px;height:6px;margin-left:auto;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .15s}
.ca-diag-dim-more[open] > summary::after{transform:rotate(225deg) translateY(-1px)}
@media (min-width:761px){ .ca-diag-dim-more[open] > summary{display:none} }
.ca-diag-dim-kv{align-content:start}
.ca-diag-dim-kv .ca-kv-row{grid-template-columns:minmax(76px,46%) minmax(0,1fr);column-gap:12px;padding:6px 0;border-top:1px dashed rgba(255,255,255,.06)}
.ca-diag-dim-kv .ca-kv-row:first-child{border-top:1px solid var(--ca-hair);padding-top:8px}
.ca-diag-dim-kv dt{font-size:12.3px;line-height:18px;color:var(--ca-mut)}
.ca-diag-dim-kv dd{font-size:12.5px;line-height:18px;font-weight:650;white-space:normal;overflow-wrap:anywhere;word-break:keep-all}
.ca-diag-dim-kv .ca-kv-row[data-tone="bad"] dd{color:#ff9c9c}
.ca-diag-dim .ca-card2-foot{font-size:12px}
.ca-diag-seclink{font-size:12px}
/* 데이터 부족 요약 카드 */
.ca-diag-na{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--ca-diag-nacols,1),minmax(0,1fr));gap:10px 18px}
.ca-diag-na li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px;align-items:start;min-width:0}
.ca-diag-na-ico{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:6px;background:rgba(255,255,255,.04);color:var(--ca-mut)}
.ca-diag-na li div{min-width:0;display:grid;gap:1px}
.ca-diag-na li b{font-size:12.8px;font-weight:700;color:var(--ca-txt2)}
.ca-diag-na li span{font-size:12px;line-height:1.5;color:var(--ca-mut);word-break:keep-all;overflow-wrap:anywhere}

/* ── 개선 과제(8): 2열 카드, 같은 줄 두 카드는 제목·설명·실행·효과 줄 맞춤 ── */
.ca-diag-imps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;min-width:0}
.ca-diag-imp{--sev:var(--ca-cyan);position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;padding:14px 15px 13px;border-radius:10px;
  background:rgba(255,255,255,.022);border:1px solid var(--ca-line);scroll-margin-top:84px}
.ca-diag-imp::before{content:"";position:absolute;left:-1px;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--sev)}
.ca-diag-imp[data-sev="high"]{--sev:var(--ca-bad);background:linear-gradient(180deg,rgba(255,107,107,.055),transparent 90px),rgba(255,255,255,.022);border-color:rgba(255,107,107,.22)}
.ca-diag-imp[data-sev="mid"]{--sev:var(--ca-amber)}
.ca-diag-imp[hidden]{display:none !important}
.ca-diag-imp.is-wide{grid-column:1 / -1}
.ca-diag-imp:focus{outline:none}
.ca-diag-imp:focus-visible{outline:2px solid var(--ca-green);outline-offset:2px}
@supports (grid-template-rows:subgrid){
  .ca-diag-imp{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:10px}
}
.ca-diag-imp-head{display:grid;gap:7px;min-width:0;align-content:start}
.ca-diag-imp-tags{display:flex;align-items:center;gap:6px 8px;flex-wrap:wrap}
.ca-diag-imp-rank{flex:none;width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:850;font-size:12.5px;
  color:var(--ca-txt);background:rgba(255,255,255,.05);border:1.5px solid var(--sev)}
.ca-diag-imp-area{font-size:11.5px;color:var(--ca-txt2);padding:2px 8px;border-radius:6px;border:1px solid var(--ca-line2)}
.ca .ca-diag-imp-title{font-size:14.5px;font-weight:760;color:var(--ca-txt);line-height:1.45;word-break:keep-all;overflow-wrap:anywhere;margin:0}
.ca-diag-imp-detail{font-size:12.8px;line-height:1.62;color:var(--ca-txt2);word-break:keep-all;overflow-wrap:anywhere;margin:0}
.ca-diag-actions{list-style:none;margin:0;padding:0;display:grid;gap:5px;align-content:start}
.ca-diag-actions label,.ca-diag-quick label{display:flex;align-items:flex-start;gap:9px;cursor:pointer;min-height:30px}
.ca-diag-actions label{padding:6px 9px;border-radius:7px;background:var(--ca-inset);border:1px solid var(--ca-line);font-size:12.5px;line-height:1.5;color:var(--ca-txt);word-break:keep-all;overflow-wrap:anywhere}
.ca-diag-actions label:hover{border-color:rgba(0,255,163,.35)}
.ca-diag-actions input,.ca-diag-quick input{flex:none;width:16px;height:16px;margin:2px 0 0;cursor:pointer}
.ca-diag-actions input:checked + span{color:var(--ca-mut);text-decoration:line-through;text-decoration-color:rgba(255,255,255,.3)}
.ca-diag-imp-foot{display:grid;gap:8px;align-content:end;min-width:0}
.ca-diag-impact{font-size:12.3px;line-height:1.55;color:var(--ca-txt2);padding:7px 10px;border-radius:7px;background:rgba(0,255,163,.045);border:1px dashed rgba(0,255,163,.2);margin:0;word-break:keep-all;overflow-wrap:anywhere}
.ca-diag-impact b{color:var(--ca-green);font-weight:700}
.ca-diag-imp-foot .ca-diag-seclink{justify-self:end}
.ca-diag-more-row{display:flex;justify-content:center}
.ca-diag-more{min-width:180px}

/* 체크박스(다크 테마) */
.ca-diag-actions input,.ca-diag-quick input{appearance:none;-webkit-appearance:none;border:1.5px solid #5a5a6c;border-radius:4px;background:rgba(255,255,255,.03);display:inline-block;position:relative;transition:background .12s,border-color .12s}
.ca-diag-actions input:hover,.ca-diag-quick input:hover{border-color:var(--ca-green)}
.ca-diag-actions input:checked,.ca-diag-quick input:checked{background:var(--ca-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%2304140d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;border-color:var(--ca-green)}
.ca-diag-actions input:focus-visible,.ca-diag-quick input:focus-visible{outline:2px solid rgba(0,255,163,.5);outline-offset:2px}

/* ── 강점·바로 할 일(4) ── */
.ca-diag-str{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ca-diag-str li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;min-width:0}
.ca-diag-str-ico{display:flex;align-items:center;justify-content:center;width:22px;height:22px;color:var(--ca-good)}
.ca-diag-str b,.ca-diag-quick b{display:block;font-size:13.2px;font-weight:750;color:var(--ca-txt);margin-bottom:2px;line-height:1.4}
.ca-diag-str p,.ca-diag-quick p{font-size:12.3px;line-height:1.58;color:var(--ca-txt2);word-break:keep-all;overflow-wrap:anywhere;margin:0}
.ca-diag-str div,.ca-diag-quick label > div{min-width:0}
.ca-diag-quick{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ca-diag-quick label{padding:9px 10px;border-radius:8px;background:var(--ca-inset);border:1px solid var(--ca-line)}
.ca-diag-quick label:hover{border-color:rgba(245,176,65,.4)}
.ca-diag-quick-n{flex:none;width:20px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:var(--ca-amber);background:var(--ca-amber-soft)}
.ca-diag-quick input:checked ~ div b{color:var(--ca-mut);text-decoration:line-through}

/* ── 핵심 지표 불릿 목록(12) ── */
.ca-diag-kpis{align-items:stretch}
.ca-diag-kpi{display:flex;flex-direction:column;gap:8px;min-width:0;padding:12px 14px 12px;border-radius:10px;background:rgba(255,255,255,.02);border:1px solid var(--ca-line)}
@supports (grid-template-rows:subgrid){
  /* 같은 줄 두 지표: 트랙 높이·설명 시작 위치를 맞춘다 */
  .ca-diag-kpis > .ca-diag-kpi{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:8px}
}
.ca-diag-kpi-bl{display:flex;flex-direction:column;min-width:0}
.ca-diag-kpi-bl > .ca-bullets{flex:1 1 auto;gap:0;grid-template-rows:minmax(0,1fr)}
.ca-diag-kpi .ca-bl-row{grid-template-rows:auto 1fr;align-items:start}
.ca-diag-kpi .ca-bl-track{align-self:end}
/* 불릿 한 줄: [이름·상태 …… 값·기준] / [구간 트랙] (좁은 칸 배치를 항상 사용) */
.ca-diag-kpi .ca-bl-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l v" "t t";row-gap:8px;column-gap:12px}
.ca-diag-kpi .ca-bl-label{grid-area:l}
.ca-diag-kpi .ca-bl-val{grid-area:v;flex-direction:row;align-items:baseline;gap:7px}
.ca-diag-kpi .ca-bl-track{grid-area:t;height:16px}
.ca-diag-kpi .ca-bl-bar{top:5px;height:6px}
.ca-diag-kpi .ca-bl-label{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:10px;row-gap:2px}
.ca-diag-kpi .ca-bl-name{font-size:13px;font-weight:700;white-space:normal;overflow-wrap:anywhere;word-break:keep-all}
.ca-diag-kpi .ca-bl-sub{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:650;overflow:visible}
.ca-diag-kpi .ca-bl-sub::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ca-diag-kpi[data-status="good"] .ca-bl-sub{color:var(--ca-good)}
.ca-diag-kpi[data-status="ok"] .ca-bl-sub{color:var(--ca-amber)}
.ca-diag-kpi[data-status="bad"] .ca-bl-sub{color:#ff8c8c}
.ca-diag-kpi .ca-bl-val b{font-size:16px;font-weight:800;letter-spacing:-.3px}
.ca-diag-kpi[data-status="good"] .ca-bl-val b{color:var(--ca-good)}
.ca-diag-kpi[data-status="bad"] .ca-bl-val b{color:#ff8c8c}
/* 구간 색: up = 개선 필요 → 보통 → 양호 / down = 양호 → 보통 → 개선 필요 */
.ca-diag-kpi[data-dir="up"] .ca-bl-band:nth-child(1),.ca-diag-kpi[data-dir="down"] .ca-bl-band:nth-child(3){background:rgba(255,107,107,.17) !important}
.ca-diag-kpi .ca-bl-band:nth-child(2){background:rgba(245,176,65,.15) !important}
.ca-diag-kpi[data-dir="up"] .ca-bl-band:nth-child(3),.ca-diag-kpi[data-dir="down"] .ca-bl-band:nth-child(1){background:rgba(0,224,146,.14) !important}
.ca-diag-kpi-hint{font-size:11.8px;line-height:1.55;color:var(--ca-mut);margin:0;word-break:keep-all;overflow-wrap:anywhere}
.ca-diag-kpi-bench{color:var(--ca-txt2);font-weight:600}

/* ── 반응형 ── */
@media (max-width:1100px){
  .ca-diag-scoretop{grid-template-columns:minmax(140px,190px) minmax(0,1fr);gap:12px}
}
@media (max-width:760px){
  .ca-diag-dims{grid-template-columns:minmax(0,1fr)}
  .ca-diag-dims > .ca-diag-nacard{grid-column:auto}
  .ca-diag-na{grid-template-columns:minmax(0,1fr)}
  .ca-diag-scoretop{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:left}
  .ca-diag-gauge{width:100%;max-width:240px}
  .ca-diag-gradebox{width:100%}
  .ca-diag-imps{grid-template-columns:minmax(0,1fr)}
  .ca-diag-imp.is-wide{grid-column:auto}
  .ca-diag-dim-num{font-size:28px}
  .ca-diag-dim-more .ca-diag-dim-kv .ca-kv-row:first-child{border-top:0;padding-top:2px}
  .ca-diag-ms{padding:9px 10px}
  .ca-diag-ms-v{font-size:17px}
  .ca-diag-top3-area{display:none}
  /* 한 줄로 쌓이면 옆 카드 높이가 없으므로 목록을 전부 펼친다 */
  .ca-diag-side .ca-scrollbox.is-fill{flex:none;max-height:none;overflow:visible;-webkit-mask-image:none;mask-image:none}
  .ca-diag-profile .ca-switch{min-height:0}
}

/* ── 차원별 점수 '순위' 목록(휴대폰 폭·평가 차원 5개 미만): 같은 0~100 축 막대, 흰 눈금 = 양호 기준 70 ── */
.ca-diag-rank{list-style:none;margin:0;padding:0;display:grid;gap:11px;align-content:space-evenly;flex:1 1 auto}
.ca-diag-rank li{display:grid;grid-template-columns:22px minmax(84px,30%) minmax(0,1fr) 46px;align-items:center;gap:10px;min-width:0}
.ca-diag-rank-n{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:800;color:var(--ca-txt2);background:rgba(255,255,255,.05)}
.ca-diag-rank-l{min-width:0;font-size:13px;font-weight:650;color:var(--ca-txt);line-height:1.3}
.ca-diag-rank-l small{display:block;font-size:11px;font-weight:500;color:var(--ca-mut2)}
.ca-diag-rank-v{font-size:13.5px;font-weight:800;text-align:right;font-variant-numeric:tabular-nums}
.ca-diag-rank li.is-na{opacity:.5}
.ca-diag-rank li.is-na .ca-diag-rank-v{color:var(--ca-mut2)}
@media (max-width:760px){
  .ca-diag-rank li{grid-template-columns:20px minmax(0,1fr) 44px;row-gap:5px}
  .ca-diag-rank li > .ca-diag-mb{grid-column:2 / 4;grid-row:2}
}
/* 개선 과제 실행 방법·기대 효과 접기(휴대폰 폭) */
.ca-diag-imp-more{min-width:0}
.ca-diag-imp-more > summary{cursor:pointer;font-size:12.5px;font-weight:650;color:var(--ca-txt2);padding:7px 10px;border-radius:7px;background:var(--ca-inset);border:1px solid var(--ca-line);list-style-position:inside}
.ca-diag-imp-more[open] > summary{margin-bottom:8px}
.ca-diag-imp-more > .ca-diag-actions{margin-bottom:8px}