/* 수저 등급 섹션 (sec-spoon.js) — 모든 클래스 ca-spoon- 접두사. 색은 계급마다 --sp-c(대표색)·--sp-c1/--sp-c2(그라데이션)·--sp-t1/--sp-t2(글자 금속색) */

/* ── 엠블럼 공통 ── */
.ca-spoon-emb{display:block;flex:none;overflow:visible}
.ca-spoon-shine{transform:translateX(-90px);animation:ca-spoon-shine 6.5s cubic-bezier(.45,.05,.3,1) 1.1s infinite}
@keyframes ca-spoon-shine{0%{transform:translateX(-90px)}26%,100%{transform:translateX(110px)}}
.ca-spoon-twinkle{transform-box:fill-box;transform-origin:center;animation:ca-spoon-tw 3.6s ease-in-out infinite}
.ca-spoon-twinkle:nth-of-type(2n){animation-delay:1.3s}
@keyframes ca-spoon-tw{0%,100%{opacity:.95;transform:scale(1)}50%{opacity:.35;transform:scale(.6)}}

/* ── 작은 배지(채널 개요 헤더·내비 칩) ── */
.ca-spoon-badge{display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:2px 9px 2px 3px;border-radius:999px;border:1px solid color-mix(in srgb,var(--sp-c,#888) 45%,transparent);background:color-mix(in srgb,var(--sp-c,#888) 13%,rgba(255,255,255,.02));font-size:12px;font-weight:700;line-height:20px;color:var(--ca-txt);white-space:nowrap;vertical-align:middle;cursor:default}
.ca-spoon-badge-t{overflow:hidden;text-overflow:ellipsis;min-width:0}
.ca-spoon-badge-sp{font-weight:600;color:var(--ca-txt2);font-size:11.5px}
.ca-spoon-badge-p{font-size:10.5px;font-weight:700;color:var(--ca-amber);padding:0 5px;border-radius:5px;background:var(--ca-amber-soft);line-height:16px}

/* ── 히어로 ── */
.ca-spoon-hero{position:relative;isolation:isolate;overflow:hidden;border-radius:16px;padding:16px 22px 22px;
  border:1px solid var(--ca-line);border-color:color-mix(in srgb,var(--sp-c) 34%,var(--ca-line));
  background:var(--ca-panel2);
  background:
    radial-gradient(440px 330px at 140px 58%,color-mix(in srgb,var(--sp-c) 24%,transparent),transparent 72%),
    radial-gradient(600px 220px at 100% 0%,color-mix(in srgb,var(--sp-c2) 9%,transparent),transparent 70%),
    linear-gradient(118deg,color-mix(in srgb,var(--sp-c1) 26%,var(--ca-panel2)) 0%,var(--ca-panel2) 44%,#18181f 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 18px 40px -24px color-mix(in srgb,var(--sp-c) 45%,transparent)}
/* 은은한 사선 빛줄기(장식) */
.ca-spoon-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(118deg,transparent 0 46px,rgba(255,255,255,.018) 46px 47px)}
.ca-spoon-hero.is-apex{border-color:color-mix(in srgb,var(--sp-c) 55%,var(--ca-line))}
.ca-spoon-hero-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:32px;margin-bottom:6px}
.ca-spoon-who{display:flex;align-items:center;gap:8px;min-width:0;font-size:13px;color:var(--ca-txt2)}
.ca-spoon-who img,.ca-spoon-who .ca-ava{border:1px solid rgba(255,255,255,.12)}
.ca-spoon-who-n{font-weight:650;color:var(--ca-txt);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca-spoon-who-d{flex:none;color:var(--ca-mut);font-size:12px}
.ca .ca-spoon-share{flex:none;gap:6px;background:rgba(255,255,255,.04)}
.ca-spoon-hero-grid{display:grid;grid-template-columns:232px minmax(0,1fr) 272px;align-items:center;gap:8px 30px}

/* 엠블럼 무대 */
.ca-spoon-stage{position:relative;display:flex;align-items:center;justify-content:center;width:232px;height:236px}
.ca-spoon-stage::before{content:"";position:absolute;left:50%;top:50%;width:210px;height:210px;margin:-105px 0 0 -105px;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--sp-c) 22%,transparent),transparent 72%);pointer-events:none}
.ca-spoon-stage::after{content:"";position:absolute;left:50%;bottom:10px;width:150px;height:22px;margin-left:-75px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.5),transparent);pointer-events:none;z-index:-1}
.ca-spoon-stage-in{position:relative;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
.ca-spoon-hero.is-apex .ca-spoon-stage-in{filter:drop-shadow(0 0 22px color-mix(in srgb,var(--sp-c) 55%,transparent)) drop-shadow(0 10px 18px rgba(0,0,0,.45))}
/* 첫 표시 1회: 엠블럼이 떠오르며 빛이 한 번 퍼진다 */
.ca-spoon-hero.is-reveal .ca-spoon-stage-in{animation:ca-spoon-pop .8s var(--ca-ease) both}
.ca-spoon-hero.is-reveal .ca-spoon-stage::before{animation:ca-spoon-flash 1.1s ease-out both}
@keyframes ca-spoon-pop{0%{opacity:0;transform:translateY(10px) scale(.82)}60%{opacity:1;transform:translateY(0) scale(1.04)}100%{transform:none}}
@keyframes ca-spoon-flash{0%{transform:scale(.4);opacity:0}35%{opacity:1}100%{transform:scale(1);opacity:1}}

/* 계급 정보 */
.ca-spoon-main{min-width:0;display:flex;flex-direction:column;gap:12px}
.ca .ca-spoon-name{display:flex;align-items:flex-end;flex-wrap:wrap;gap:4px 14px;margin:0;font-size:40px;font-weight:850;line-height:1.08;letter-spacing:-1.2px}
.ca-spoon-name-t{color:var(--sp-t2);background:linear-gradient(180deg,var(--sp-t1) 8%,var(--sp-t2) 92%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ca-spoon-namebox{display:grid;gap:6px;min-width:0}
.ca-spoon-motto{margin:0;font-size:13px;line-height:1.5;color:color-mix(in srgb,var(--sp-t1,#fff) 55%,var(--ca-txt2));text-wrap:pretty}
.ca-spoon-name-d{display:inline-flex;align-items:center;height:.86em;margin-bottom:.1em}
.ca-spoon-numeral{display:block;height:100%;width:auto;filter:drop-shadow(0 1px 0 rgba(0,0,0,.4))}
.ca-spoon-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.ca-spoon-rt{display:inline-flex;align-items:baseline;gap:2px;padding:3px 10px;border-radius:7px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);font-size:12.5px;color:var(--ca-txt2);cursor:help}
.ca-spoon-rt b{font-size:14px;font-weight:800;color:var(--ca-txt);margin-left:3px}
.ca-spoon-rt span{color:var(--ca-mut);font-size:12px}
.ca-spoon-chip{font-size:12px;font-weight:600;color:var(--ca-txt2);padding:4px 9px;border-radius:7px;background:rgba(255,255,255,.04)}
.ca-spoon-chip.is-prov{color:var(--ca-amber);background:var(--ca-amber-soft)}
.ca-spoon-conf{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:650;padding:4px 9px;border-radius:7px;background:rgba(255,255,255,.04);color:var(--ca-txt2);cursor:help}
.ca-spoon-conf-bars{display:inline-flex;align-items:flex-end;gap:2px;height:11px}
.ca-spoon-conf-bars i{width:3px;border-radius:1px;background:rgba(255,255,255,.16)}
.ca-spoon-conf-bars i:nth-child(1){height:5px}.ca-spoon-conf-bars i:nth-child(2){height:8px}.ca-spoon-conf-bars i:nth-child(3){height:11px}
.ca-spoon-conf[data-tone="good"] .is-on{background:var(--ca-good)}
.ca-spoon-conf[data-tone="warn"] .is-on{background:var(--ca-amber)}
.ca-spoon-conf[data-tone="bad"] .is-on{background:var(--ca-bad)}

/* SP 진행 막대 */
.ca-spoon-sp{display:grid;gap:7px;max-width:560px}
.ca-spoon-sp-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ca-spoon-sp-v{font-size:13px;font-weight:700;color:var(--ca-txt2)}
.ca-spoon-sp-v b{font-size:22px;font-weight:850;color:var(--ca-txt);letter-spacing:-.5px}
.ca-spoon-sp-next{font-size:12.5px;color:var(--ca-mut)}
.ca-spoon-sp-next b{color:var(--ca-txt);font-weight:700}
.ca-spoon-sp-next.is-lock{display:inline-flex;align-items:center;gap:5px;color:#c9b6ff}
.ca-spoon-sp-row{display:flex;align-items:center;gap:10px}
.ca-spoon-sp-track{position:relative;flex:1;height:12px;border-radius:7px;background:rgba(0,0,0,.35);box-shadow:0 0 0 1px rgba(255,255,255,.07) inset;overflow:hidden}
.ca-spoon-sp-fill{position:absolute;left:0;top:0;bottom:0;border-radius:7px;background:linear-gradient(90deg,var(--sp-c1),var(--sp-c) 70%,var(--sp-c2));box-shadow:0 0 12px color-mix(in srgb,var(--sp-c) 55%,transparent);transition:width 1s var(--ca-ease) .25s}
.ca-spoon-sp-fill::after{content:"";position:absolute;right:0;top:1px;bottom:1px;width:3px;border-radius:2px;background:rgba(255,255,255,.85)}
.ca-spoon-sp-tick{position:absolute;top:3px;bottom:3px;width:1px;background:rgba(255,255,255,.12)}
.ca-spoon-sp-preview{flex:none;opacity:.9}
.ca-spoon-sp-sub{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ca-mut);line-height:1.5}
.ca-spoon-sp-sub.is-lock{color:#e9c27a}
.ca-spoon-ico{flex:none}
.ca-spoon-headline{font-size:14.5px;line-height:1.7;color:var(--ca-txt2);max-width:62ch;text-wrap:pretty}
.ca-spoon-headline b{color:var(--ca-txt);font-weight:700}

/* 배치고사·승급 대기 */
.ca-spoon-banner{display:grid;gap:5px;padding:11px 14px;border-radius:10px;font-size:12.5px;line-height:1.55;color:var(--ca-txt2);max-width:620px}
.ca-spoon-banner[data-kind="placement"]{background:rgba(245,176,65,.07);border:1px solid rgba(245,176,65,.28)}
.ca-spoon-banner[data-kind="gate"]{background:rgba(155,92,255,.08);border:1px solid rgba(155,92,255,.32)}
.ca-spoon-banner-h{display:flex;align-items:center;flex-wrap:wrap;gap:6px 9px}
.ca-spoon-banner-h b{font-size:13px;color:var(--ca-txt)}
.ca-spoon-banner[data-kind="placement"] .ca-spoon-banner-h .ca-spoon-ico{color:var(--ca-amber)}
.ca-spoon-banner[data-kind="gate"] .ca-spoon-banner-h .ca-spoon-ico{color:#c58bff}
.ca-spoon-banner-m{font-size:12px;color:var(--ca-mut)}
.ca-spoon-banner ul{margin:0;padding:0 0 0 16px;display:grid;gap:2px;color:var(--ca-mut)}
.ca-spoon-pips{display:inline-flex;gap:4px}
.ca-spoon-pips i{width:11px;height:11px;border-radius:50%;border:1.5px solid rgba(245,176,65,.55);background:transparent}
.ca-spoon-pips i.is-on{background:var(--ca-amber);border-color:var(--ca-amber);box-shadow:0 0 8px rgba(245,176,65,.5)}

/* 백분위·분포 */
.ca-spoon-pct{align-self:stretch;display:flex;flex-direction:column;gap:6px;padding:14px 16px 12px;border-radius:12px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.06);min-width:0}
.ca-spoon-pct-l{font-size:12.5px;color:var(--ca-mut)}
.ca-spoon-pct-v{font-size:15px;font-weight:700;color:var(--ca-txt2);line-height:1.2}
.ca-spoon-pct-v b{font-size:30px;font-weight:850;color:var(--ca-txt);letter-spacing:-.8px;margin:0 1px}
.ca-spoon-pct-v span{font-size:15px;color:var(--ca-txt)}
.ca-spoon-pct-v.is-na{font-size:13.5px;font-weight:600}
.ca-spoon-dist{flex:1;display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:3px;align-items:end;min-height:96px;margin-top:6px}
.ca-spoon-dist-col{display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;min-width:0}
.ca-spoon-dist-bar{position:relative;flex:1;width:100%;min-height:54px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;border-bottom:1px solid rgba(255,255,255,.1)}
.ca-spoon-dist-bar i{display:block;width:72%;max-width:16px;border-radius:3px 3px 0 0;background:color-mix(in srgb,var(--sp-c) 55%,transparent)}
.ca-spoon-dist-col.is-me .ca-spoon-dist-bar i{background:var(--sp-c);box-shadow:0 0 10px color-mix(in srgb,var(--sp-c) 60%,transparent)}
.ca-spoon-dist-me{font-size:10.5px;font-weight:800;line-height:15px;padding:0 5px;border-radius:5px;background:var(--sp-c);color:#0b0b10;white-space:nowrap}
.ca-spoon-dist-col .ca-spoon-emb{opacity:.85}
.ca-spoon-dist-col.is-me .ca-spoon-emb{opacity:1}
.ca-spoon-pct-n{font-size:11.5px;line-height:1.5;color:var(--ca-mut2);margin-top:4px}

/* ── 레이팅 구성 ── */
.ca-spoon-compo{display:grid;gap:8px;padding:22px 0 0}
.ca-spoon-stack{position:relative;display:flex;height:30px;border-radius:8px;background:rgba(0,0,0,.28);box-shadow:0 0 0 1px rgba(255,255,255,.06) inset}
.ca-spoon-stack-seg{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;background:var(--pc);border-right:2px solid var(--ca-panel2);color:#0b0b10;font-size:12px;font-weight:750;white-space:nowrap;overflow:hidden}
.ca-spoon-stack-seg:first-child{border-radius:8px 0 0 8px}
.ca-spoon-stack-seg span{padding:0 6px;overflow:hidden}
.ca-spoon-stack-seg.is-tight span{visibility:hidden}
.ca-spoon-stack-mark{position:absolute;top:-24px;bottom:-36px;width:0;border-left:2px solid #fff;pointer-events:none;z-index:2}
.ca-spoon-stack-mark b{position:absolute;top:0;left:0;transform:translateX(-50%);font-size:12px;font-weight:800;line-height:18px;padding:0 6px;border-radius:5px;background:#fff;color:#0b0b10;white-space:nowrap}
.ca-spoon-bands{display:flex;height:22px;border-radius:6px;overflow:hidden;margin-top:6px}
.ca-spoon-band{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;border-right:1px solid var(--ca-panel2)}
.ca-spoon-band:last-child{border-right:0}
.ca-spoon-band i{position:absolute;inset:0;background:var(--sp-c);opacity:.28}
.ca-spoon-band.is-me i{opacity:.95}
.ca-spoon-band span{position:relative;font-size:11px;font-weight:650;color:var(--ca-txt);white-space:nowrap;padding:0 2px}
.ca-spoon-band.is-me span{color:#0b0b10;font-weight:800}
.ca-spoon-band.is-tight span{visibility:hidden}
.ca-spoon-scale{position:relative;height:16px}
.ca-spoon-scale span{position:absolute;top:0;transform:translateX(-50%);font-size:10.5px;color:var(--ca-mut2)}
.ca-spoon-scale span:first-child{transform:none}
.ca-spoon-scale span:last-child{transform:translateX(-100%)}
.ca-spoon-lg{display:inline-flex;align-items:center;gap:6px}
.ca-spoon-lg i{width:9px;height:9px;border-radius:3px}

/* ── 세 축 카드 ── */
.ca-spoon-pillar{border-top:2px solid var(--pc)}
.ca-spoon-pillar-top{display:flex;align-items:center;gap:14px}
.ca-spoon-ring{flex:none}
.ca-spoon-ring-v{fill:var(--ca-txt);font-size:17px;font-weight:850;font-family:inherit}
.ca-spoon-pillar-v{display:flex;align-items:baseline;gap:2px}
.ca-spoon-pillar-v b{font-size:28px;font-weight:850;letter-spacing:-.6px;color:var(--ca-txt)}
.ca-spoon-pillar-v span{font-size:13px;color:var(--ca-mut)}
.ca-spoon-pillar-c{font-size:12.5px;color:var(--pc);font-weight:650}
.ca-spoon-pillar-d{font-size:12.5px;line-height:1.6;color:var(--ca-mut)}
.ca-spoon-parts{display:grid;gap:7px}
.ca-spoon-part{display:grid;grid-template-columns:minmax(84px,40%) minmax(0,1fr) 26px;align-items:center;gap:8px;font-size:12.5px}
.ca-spoon-part-l{display:flex;align-items:center;gap:5px;color:var(--ca-txt2);min-width:0;white-space:nowrap}
.ca-spoon-part-l > span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.ca-spoon-part-l em{font-style:normal;font-size:10.5px;font-weight:700;color:var(--ca-mut);padding:0 4px;border-radius:4px;border:1px solid var(--ca-line2);line-height:15px}
.ca-spoon-part-tr{height:7px;border-radius:4px;background:rgba(255,255,255,.06);overflow:hidden}
.ca-spoon-part-tr i{display:block;height:100%;border-radius:4px}
.ca-spoon-part b{text-align:right;font-weight:750}
.ca-spoon-metrics{margin-top:auto;padding-top:10px;border-top:1px solid var(--ca-hair)}
.ca-spoon-metrics .ca-kv-row{grid-template-columns:minmax(0,1fr) minmax(0,auto)}
.ca-spoon-metrics dd{white-space:normal;word-break:keep-all;overflow-wrap:normal;max-width:none}

/* ── 사다리 ── */
.ca-spoon-ladder{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;margin:0 calc(-1 * var(--ca-card-px));padding:0 var(--ca-card-px)}
.ca-spoon-ladder:focus-visible{outline:2px solid var(--ca-green);outline-offset:-2px;border-radius:8px}
.ca-spoon-track{list-style:none;margin:0;padding:30px 0 2px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;min-width:max-content}
.ca-spoon-grp{display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:0}
.ca-spoon-grp.is-apex{min-width:62px}
.ca-spoon-steps{display:flex;align-items:flex-end;justify-content:center;gap:2px}
.ca-spoon-step{position:relative;display:flex;flex-direction:column;align-items:center;width:35px;cursor:default}
.ca-spoon-step .ca-spoon-emb{position:relative;z-index:1;margin-bottom:-6px}
.ca-spoon-step-bar{display:block;width:26px;height:var(--bh);border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,color-mix(in srgb,var(--sp-c) 50%,transparent),color-mix(in srgb,var(--sp-c) 12%,transparent))}
.ca-spoon-step-d{margin-top:5px;font-size:10.5px;font-weight:700;color:var(--ca-mut);line-height:1}
.ca-spoon-step.is-next .ca-spoon-emb{opacity:.5;filter:grayscale(.55)}
.ca-spoon-step.is-next .ca-spoon-step-bar{background:rgba(255,255,255,.05)}
.ca-spoon-step.is-cur{width:56px}
.ca-spoon-step.is-cur .ca-spoon-emb{filter:drop-shadow(0 0 10px color-mix(in srgb,var(--sp-c) 70%,transparent))}
.ca-spoon-step.is-cur .ca-spoon-step-bar{width:40px;background:linear-gradient(180deg,var(--sp-c),color-mix(in srgb,var(--sp-c) 30%,transparent));box-shadow:0 0 16px color-mix(in srgb,var(--sp-c) 45%,transparent)}
.ca-spoon-step.is-cur .ca-spoon-step-d{color:var(--ca-txt)}
.ca-spoon-pin{position:absolute;top:-24px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:800;line-height:18px;padding:0 7px;border-radius:6px;background:var(--sp-c);color:#0b0b10;white-space:nowrap;z-index:2}
.ca-spoon-pin::after{content:"";position:absolute;left:50%;bottom:-4px;margin-left:-4px;border:4px solid transparent;border-bottom:0;border-top-color:var(--sp-c)}
.ca-spoon-grp-l{display:flex;flex-direction:column;align-items:center;gap:1px;padding-top:7px;border-top:2px solid color-mix(in srgb,var(--sp-c) 55%,transparent);text-align:center}
.ca-spoon-grp-l b{font-size:11.5px;font-weight:700;color:var(--ca-txt);white-space:nowrap;line-height:1.35}
.ca-spoon-grp-l span{font-size:10.5px;color:var(--ca-mut2)}
.ca-spoon-grp.is-apex .ca-spoon-grp-l b{white-space:normal;max-width:64px;word-break:keep-all}

/* ── 승급 과제 ── */
.ca-spoon-tips{list-style:none;margin:0;padding:0;display:grid}
.ca-spoon-tip{display:grid;grid-template-columns:76px minmax(0,1fr) 230px;align-items:center;gap:6px 18px;padding:14px 0;border-top:1px solid var(--ca-hair)}
.ca-spoon-tip:first-child{border-top:0;padding-top:2px}
.ca-spoon-tip:last-child{padding-bottom:0}
.ca-spoon-tip-gain{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;width:68px;height:60px;border-radius:12px;background:rgba(0,224,146,.08);border:1px solid rgba(0,224,146,.25);color:var(--ca-good)}
.ca-spoon-tip-gain b{font-size:21px;font-weight:850;letter-spacing:-.5px;line-height:1.1}
.ca-spoon-tip-gain span{font-size:11px;font-weight:700;color:color-mix(in srgb,var(--ca-good) 70%,var(--ca-txt2))}
.ca-spoon-tip.is-gate .ca-spoon-tip-gain{background:rgba(155,92,255,.1);border-color:rgba(155,92,255,.35);color:#c58bff}
.ca-spoon-tip.is-gate .ca-spoon-tip-gain span{color:#b9a3f0}
.ca-spoon-tip-main{min-width:0;display:grid;gap:4px}
.ca-spoon-tip-h{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}
.ca .ca-spoon-tip-h h4{font-size:14px;font-weight:700;line-height:1.45;color:var(--ca-txt);margin:0}
.ca-spoon-tip-d{font-size:12.5px;line-height:1.6;color:var(--ca-mut)}
.ca-spoon-tip-a{display:flex;align-items:baseline;gap:8px;font-size:12.5px;line-height:1.6;color:var(--ca-txt2)}
.ca-spoon-tip-a span{flex:none;font-size:11px;font-weight:700;color:var(--ca-green);padding:0 6px;border-radius:5px;background:var(--ca-green-soft);line-height:18px}
.ca-spoon-tip-proj{display:grid;gap:6px;min-width:0}
.ca-spoon-tip-tr{position:relative;height:8px;border-radius:5px;background:rgba(255,255,255,.06)}
.ca-spoon-tip-tr i{position:absolute;top:0;bottom:0;border-radius:5px}
.ca-spoon-tip-tr i.is-now{left:0;background:color-mix(in srgb,var(--sp-c,#888) 55%,rgba(255,255,255,.25))}
.ca-spoon-tip-tr i.is-gain{background:repeating-linear-gradient(135deg,var(--ca-good) 0 4px,color-mix(in srgb,var(--ca-good) 55%,transparent) 4px 7px);border-radius:0 5px 5px 0}
.ca-spoon-tip-up{position:absolute;right:0;top:-19px;font-size:10.5px;font-weight:800;color:#0b0b10;background:var(--ca-good);padding:0 5px;border-radius:4px;line-height:15px}
.ca-spoon-tip-up.is-cond{background:#b9a3f0}
.ca-spoon-tip-proj p{font-size:12px;line-height:1.5;color:var(--ca-mut)}
.ca-spoon-tip-proj b{color:var(--ca-txt);font-weight:700}

/* ── 반응형 ── */
@media (max-width:1100px){
  .ca-spoon-hero-grid{grid-template-columns:200px minmax(0,1fr)}
  .ca-spoon-stage{width:200px;height:210px}
  .ca-spoon-stage-in .ca-spoon-emb{width:196px;height:196px}
  .ca-spoon-pct{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:20px;align-items:start}
  .ca-spoon-pct-l,.ca-spoon-pct-v,.ca-spoon-pct-n{grid-column:1}
  .ca-spoon-dist{grid-column:2;grid-row:1 / span 3;margin-top:0;min-height:88px}
  .ca-spoon-tip{grid-template-columns:72px minmax(0,1fr)}
  .ca-spoon-tip-proj{grid-column:2}
}
@media (max-width:760px){
  .ca-spoon-hero{padding:12px 14px 16px;border-radius:14px}
  .ca-spoon-hero-top{margin-bottom:0}
  .ca-spoon-who-d{display:none}
  .ca-spoon-hero-grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .ca-spoon-stage{width:100%;height:178px}
  .ca-spoon-stage::before{width:176px;height:176px;margin:-88px 0 0 -88px}
  .ca-spoon-stage-in .ca-spoon-emb{width:168px;height:168px}
  .ca-spoon-main{align-items:center;text-align:center}
  .ca .ca-spoon-name{justify-content:center;font-size:32px}
  .ca-spoon-motto{font-size:12.5px}
  .ca-spoon-chips{justify-content:center}
  .ca-spoon-sp{width:100%}
  .ca-spoon-sp-top{justify-content:space-between;text-align:left}
  .ca-spoon-sp-sub{justify-content:center;text-align:left}
  .ca-spoon-banner{text-align:left;width:100%}
  .ca-spoon-pct{display:flex}
  .ca-spoon-dist{min-height:84px}
  .ca-spoon-compo{padding-top:24px}
  .ca-spoon-tip{grid-template-columns:60px minmax(0,1fr);gap:8px 12px}
  .ca-spoon-tip-gain{width:58px;height:54px;align-self:start}
  .ca-spoon-tip-gain b{font-size:18px}
  .ca-spoon-tip-proj{grid-column:1 / -1}
}
@media (prefers-reduced-motion:reduce){
  .ca-spoon-shine{display:none}
  .ca-spoon-twinkle{animation:none}
  .ca-spoon-hero.is-reveal .ca-spoon-stage-in,.ca-spoon-hero.is-reveal .ca-spoon-stage::before{animation:none}
  .ca-spoon-sp-fill{transition:none}
}

/* 2026-10-17 QA: 백분위 아래쪽 채널('출발선')·막대가 많은 축(성장 역량 9개)은 넓은 카드에서 2열 */
.ca-spoon-pct-v.is-start{display:flex;flex-direction:column;gap:2px}
.ca-spoon-pct-v.is-start .ca-spoon-pct-s{font-size:12.5px;font-weight:600;color:var(--ca-mut)}
@media (min-width:761px){
  /* 칸마다 [이름 … 점수] 아래에 막대 — 2열이라도 막대 폭이 충분하다 */
  .ca-spoon-parts.is-many{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 18px}
  .ca-spoon-parts.is-many .ca-spoon-part{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l v" "t t";gap:4px 6px;font-size:12px}
  .ca-spoon-parts.is-many .ca-spoon-part-l{grid-area:l}
  .ca-spoon-parts.is-many .ca-spoon-part-tr{grid-area:t;height:6px}
  .ca-spoon-parts.is-many .ca-spoon-part > b{grid-area:v;white-space:nowrap}
}