/* SkillLens 컴포넌트 스타일. 값은 tokens.css의 변수를 참조합니다. 부품마다 한 구역. */

/* ===== Base (sl 밖) ===== */
.c1{background:var(--chart-1)}
.c2{background:var(--chart-2)}
.c3{background:var(--chart-3)}
.c4{background:var(--chart-4)}
.c5{background:var(--chart-5)}
.c6{background:var(--chart-6)}

/* ===== Base ===== */
/* 출처: 8판 body(글자 -0.02em, 줄 1.5, 낱말 단위 줄바꿈, 숫자 고정폭), .card, svg.ic */
.sl{font-family:var(--font-sans);color:var(--ink);box-sizing:border-box;letter-spacing:-.02em;line-height:1.5;font-variant-numeric:tabular-nums;word-break:keep-all;overflow-wrap:break-word;line-break:strict}
.sl *,.sl *::before,.sl *::after{box-sizing:border-box}
:where(.sl) button{font:inherit;letter-spacing:inherit;cursor:pointer}
:where(.sl) a{color:inherit}
.sl h1,.sl h2,.sl h3{text-wrap:balance}
.sl p,.sl-card__note{text-wrap:pretty}
/* 체크 모양 마스크(8판 --mchk). 체크 상자, 둥근 표시, 로딩 단계에 씀 */
:root{--sl-mask-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.sl-canvas{background:var(--canvas)}
.sl-accent{color:var(--skill-blue-strong)}
.sl-nobr{white-space:nowrap}
.sl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sl-count{counter-reset:n var(--n)}
.sl-count::after{content:counter(n)}
.sl-vp{container-type:inline-size;container-name:vp}
.sl-display-pc{font:900 72px/76px var(--font-sans);letter-spacing:-4.6px;word-break:keep-all;text-wrap:balance;margin:0}
/* 카드(8판 .card): 흰 면 20, 안쪽 20, 테 링 + 옅은 그림자. 폰 16/14. 카드 안 카드와 틀 안 카드는 겉모양 없음 */
.sl-card{padding:var(--space-5);border:0;border-radius:var(--radius-lg);background:var(--surface-raised);box-shadow:0 0 0 1px var(--border),var(--shadow-card)}
.sl-card .sl-card,.sl-shell__card .sl-card,.sl-entry__panel .sl-card{padding:0;border-radius:0;background:transparent;box-shadow:none}
@media (max-width:767px){.sl-card{padding:var(--space-4);border-radius:var(--radius-tile)}}
@container vp (max-width:767px){.sl-card{padding:var(--space-4);border-radius:var(--radius-tile)}}
.sl-card__note{margin:var(--space-3) 0 0;font:400 13px/20px var(--font-sans);color:var(--ink-muted)}
.sl-card__note b{color:var(--ink);font-weight:600}
.sl-shell__card>.sl-card__note{margin-top:0}
.sl-card__note .sl-btn--link{font-size:inherit;min-height:0;padding:0}
/* 도구 줄(8판 .tool): 오른쪽 끝에 찾기 칸과 칩 */
.sl-tools{display:flex;justify-content:flex-end;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.sl-tools .sl-field--search{width:200px}
/* 아이콘(8판 svg.ic): Lucide 선 1.5 */
.sl-ico{width:var(--icon-md);height:var(--icon-md);stroke:currentColor;fill:none;stroke-width:var(--icon-stroke);stroke-linecap:round;stroke-linejoin:round;flex:none}
.sl-ico--sm{width:var(--icon-sm);height:var(--icon-sm)}
.sl-ico--lg{width:var(--icon-lg);height:var(--icon-lg)}
/* 상태 그림(StateGlyph) */
.sl-glyph{display:block;width:64px;height:64px}
.sl-glyph .a{fill:var(--skill-blue-tint);stroke:var(--skill-blue);stroke-width:1.5}
.sl-glyph .b{fill:var(--surface-raised);stroke:var(--optical-cyan);stroke-width:1.5}
.sl-glyph .ink{stroke:var(--ink);stroke-width:1.5;fill:none;stroke-linecap:round}
.sl-glyph .coral{stroke:var(--change-coral-strong);stroke-width:2;fill:none;stroke-linecap:round}
.sl-glyph .lime{display:none}
.sl-glyph .on{stroke:var(--on-accent);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.sl-glyph .muted{fill:var(--track);stroke:var(--border-strong);stroke-width:1.5}
.sl-glyph--searching .b{animation:sl-sweep 1800ms var(--ease-lens) infinite}
@media (prefers-reduced-motion: reduce){.sl-glyph--searching .b{animation:none}}

/* ===== Motion ===== */
/* 출처: 8판 slin(등장), .rvin 시차. 바꾼 점: 흐림 없음, 떠오름 16px → 12px(PM 위임, 앞 세션 판단) */
.sl-in{animation:sl-reveal var(--duration-reveal) var(--ease-scene) both}
.sl-stagger>*{animation:sl-reveal var(--duration-reveal) var(--ease-scene) both}
.sl-stagger>*:nth-child(2){animation-delay:calc(var(--duration-stagger)*1)}
.sl-stagger>*:nth-child(3){animation-delay:calc(var(--duration-stagger)*2)}
.sl-stagger>*:nth-child(4){animation-delay:calc(var(--duration-stagger)*3)}
.sl-stagger>*:nth-child(5){animation-delay:calc(var(--duration-stagger)*4)}
.sl-stagger>*:nth-child(6){animation-delay:calc(var(--duration-stagger)*5)}
.sl-stagger>*:nth-child(7){animation-delay:calc(var(--duration-stagger)*6)}
.sl-stagger>*:nth-child(n+8){animation-delay:calc(var(--duration-stagger)*7)}
.sl-delay-1{animation-delay:120ms}
.sl-delay-2{animation-delay:240ms}
.sl-delay-3{animation-delay:360ms}
.sl-delay-4{animation-delay:480ms}
.sl-delay-5{animation-delay:600ms}
/* 렌즈 마크 자리: scripts/sl-mark.js MARK()의 SVG를 넣는 틀 */
.sl-lens{display:inline-block;width:96px;height:96px;flex:none}
.sl-lens svg{display:block;width:100%;height:100%;overflow:visible}
.sl-lens--sm{width:72px;height:72px}
@media (prefers-reduced-motion: reduce){.sl *,.sl *::before,.sl *::after{animation:none !important;transition:none !important}}

/* ===== Button ===== */
/* 출처: 8판 .b(48, 둥글기 12, 안쪽 24, 700 16), 보드맞춤 1판(주 버튼 먹색, 보조 흰 면 + 테), 호버(화살표 3px), .b.fin 빛 스침, .lk 링크 */
.sl-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:var(--space-12);padding:0 var(--space-6);border:1px solid transparent;border-radius:var(--radius-md);font:700 16px/24px var(--font-sans);letter-spacing:inherit;white-space:nowrap;cursor:pointer;transition:transform var(--duration-release) var(--ease-scene),background-color var(--duration-release) var(--ease-scene),box-shadow var(--duration-release) var(--ease-scene)}
.sl-btn:active{transform:scale(.98);transition-duration:var(--duration-press)}
.sl-btn:focus-visible,.sl-btn.is-focus{outline:3px solid var(--focus-ring);outline-offset:2px}
.sl-btn--primary{background:var(--action);color:var(--on-action)}
.sl-btn--primary:active,.sl-btn--primary.is-pressed{background:var(--action-pressed)}
.sl-btn--secondary{background:var(--surface-raised);color:var(--ink);box-shadow:0 0 0 1px var(--border)}
.sl-btn--secondary:active,.sl-btn--secondary.is-pressed{background:var(--surface-pressed)}
.sl-btn:disabled,.sl-btn.is-disabled{opacity:.4;pointer-events:none;cursor:not-allowed}
.sl-btn--block{display:flex;width:100%}
.sl-btn--sm{height:36px;min-height:36px;padding:0 var(--space-3);font-size:13px;line-height:20px;font-weight:600}
.sl-btn--weak{display:none}
.sl-btn__arrow{display:inline-block;transition:transform var(--duration-release) var(--ease-spring)}
/* 링크(8판 .lk): 보라 글자용, 밑줄 3px 띄움, 14. 조용한 링크(.lk.q)는 회색 */
.sl-btn--link{height:auto;min-height:24px;padding:2px 0;border:0;background:none;color:var(--skill-blue-strong);font:400 14px/20px var(--font-sans);text-decoration:underline;text-underline-offset:3px}
.sl-btn--link.sl-btn--quiet{color:var(--ink-muted)}
.sl-btn--link.sl-btn--flush{padding-left:0}
/* 마지막 되돌릴 수 없는 행동에만 빛 스침(8판 .b.fin) */
.sl-btn--final{position:relative;overflow:hidden}
.sl-btn--final::before{content:"";position:absolute;top:0;bottom:0;left:-40%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-20deg);opacity:0}
@media (hover:hover) and (pointer:fine){
.sl-btn--primary:hover{background:var(--action-hover)}
.sl-btn--secondary:hover{box-shadow:0 0 0 1px var(--skill-blue),var(--shadow-hover)}
.sl-btn:hover .sl-btn__arrow{transform:translateX(3px)}
.sl-btn--link:hover{text-decoration-thickness:2px}
.sl-btn--final:hover::before{animation:sl-shine 700ms var(--ease-scene) both}
}
/* 쓰지 않는 SSO(제품에 없음, 결정 18). 남은 화면 호환용 */
.sl-btn--sso{justify-content:flex-start;gap:var(--space-3);padding-left:var(--space-4)}
.sl-btn--sso .sl-sso-ico{width:18px;height:18px;border-radius:4px;display:inline-grid;grid-template-columns:1fr 1fr;overflow:hidden}
.sl-btn--sso .sl-sso-ico i{display:block}

/* ===== Chip ===== */
/* 출처: 8판 .tag(안쪽 4 9, 13 600, 알약). 색 이름은 디자인 시스템 것을 두고 크기만 8판으로 */
.sl-chip{display:inline-flex;align-items:center;gap:var(--space-1);height:auto;padding:var(--space-1) 9px;border-radius:var(--radius-pill);font:600 13px/20px var(--font-sans);white-space:nowrap}
.sl-chip--brand{background:var(--skill-blue-tint);color:var(--skill-blue-strong)}
.sl-chip--neutral{background:var(--divider);color:var(--ink-muted)}
.sl-chip--level{padding:var(--space-0-5) var(--space-2);background:var(--skill-blue-tint);color:var(--skill-blue-strong)}
.sl-chip--kind{padding:var(--space-0-5) var(--space-2);background:var(--skill-blue-tint);color:var(--skill-blue-strong);font-size:12px;line-height:16px}
.sl-chip--success{background:var(--success-tint);color:var(--success)}
.sl-chip--warning{background:var(--warning-tint);color:var(--warning)}
.sl-chip--danger{background:var(--change-coral-tint);color:var(--change-coral-strong)}
.sl-chip--plain{padding-left:0;background:transparent;color:var(--ink-muted)}

/* ===== Tabs ===== */
/* 출처: 8판 .chip(필터 알약: 흰 면 + 테, 고르면 먹색, 안쪽 8 14, 13)과 .seg(바탕 위 흰 알약) */
.sl-tabs{display:flex;flex-wrap:wrap;gap:6px}
.sl-tab{display:inline-flex;align-items:center;gap:6px;height:auto;padding:var(--space-2) var(--space-3-5);border:1px solid transparent;border-radius:var(--radius-pill);background:var(--surface-raised);box-shadow:0 0 0 1px var(--border);color:var(--ink);font:400 13px/20px var(--font-sans);white-space:nowrap;flex:none;cursor:pointer;transition:background-color var(--duration-hover) var(--ease-scene),color var(--duration-hover) var(--ease-scene)}
.sl-tab[aria-selected="true"],.sl-tab[aria-pressed="true"]{background:var(--action);color:var(--on-action);box-shadow:none}
.sl-tab--soft{background:var(--skill-blue-tint);color:var(--skill-blue-strong);box-shadow:none}
.sl-tab--icon{width:36px;height:36px;padding:0;justify-content:center}
.sl-tab:focus-visible,.sl-tab.is-focus{outline:3px solid var(--focus-ring);outline-offset:2px}
.sl-tab:disabled,.sl-tab.is-disabled{opacity:.4;cursor:not-allowed}
.sl-tab__count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--radius-pill);background:var(--skill-blue);color:var(--on-skill-blue-strong);font:700 12px/16px var(--font-sans)}
.sl-tab__count.sl-in{animation:sl-pop var(--duration-release) var(--ease-spring) 300ms both}
@media (hover:hover) and (pointer:fine){.sl-tab:not([aria-selected="true"]):not([aria-pressed="true"]):not(:disabled):hover{background:var(--skill-blue-tint);color:var(--skill-blue-strong)}}
@media (max-width:767px){.sl-tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}}
/* 바탕 위 흰 알약(8판 .seg). sl-seg는 옛 이름(호환용) */
.sl-tabs--seg,.sl-seg{display:inline-flex;flex-wrap:nowrap;gap:var(--space-1);padding:var(--space-1);border-radius:var(--radius-pill);background:var(--canvas);width:max-content;align-self:flex-start}
.sl-tabs--seg .sl-tab,.sl-seg button{padding:9px 18px;border:0;border-radius:var(--radius-pill);background:none;box-shadow:none;color:var(--ink-muted);font:600 14px/20px var(--font-sans)}
.sl-tabs--seg .sl-tab[aria-selected="true"],.sl-seg button[aria-checked="true"]{background:var(--surface-raised);color:var(--ink);box-shadow:0 0 0 1px var(--border),var(--shadow-card)}

/* ===== OptionCard ===== */
/* 출처: 8판 .opt label, .pre label.ic, .it, .rd(둥근 표시), 호버 1px 떠오름 + 보라 링 */
.sl-option{display:flex;align-items:flex-start;gap:var(--space-3);width:100%;padding:var(--space-4);border:0;border-radius:var(--radius-tile);background:var(--surface-raised);box-shadow:0 0 0 1px var(--border),var(--shadow-card);text-align:left;color:var(--ink);font-family:var(--font-sans);cursor:pointer;transition:background-color var(--duration-release) var(--ease-scene),transform var(--duration-hover) var(--ease-scene),box-shadow var(--duration-hover) var(--ease-scene)}
.sl-option[aria-checked="true"]{background:var(--skill-blue-tint);box-shadow:inset 0 0 0 2px var(--skill-blue)}
.sl-option:active{background:var(--surface-pressed);transform:scale(.98);transition-duration:var(--duration-press)}
.sl-option:focus-visible,.sl-option.is-focus{outline:3px solid var(--focus-ring);outline-offset:2px}
.sl-option>span:not([class]),.sl-option__text{flex:1;min-width:0}
.sl-option__title{display:block;font:700 16px/24px var(--font-sans);letter-spacing:inherit}
.sl-option__desc{display:block;margin-top:var(--space-1);font:400 13px/1.45 var(--font-sans);color:var(--ink-muted)}
.sl-option__note{display:inline-block;margin-top:var(--space-2);font:400 13px/20px var(--font-sans);color:var(--skill-blue-strong)}
.sl-option .sl-tile{border-radius:var(--radius-sm)}
.sl-option[aria-checked="true"] .sl-tile{background:var(--surface-raised)}
.sl-option__icon{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:var(--radius-sm);background:var(--skill-blue-tint);color:var(--skill-blue-strong)}
/* 둥근 표시(8판 .rd): 22, 테 divider, 고르면 보라 + 흰 체크 */
.sl-option__radio{flex:none;display:grid;place-items:center;width:22px;height:22px;margin-left:auto;border-radius:50%;border:1.5px solid var(--divider);background:var(--surface-raised)}
.sl-option[aria-checked="true"] .sl-option__radio{background:var(--skill-blue);border-color:var(--skill-blue)}
.sl-option[aria-checked="true"] .sl-option__radio::after{content:"";width:12px;height:12px;background:var(--on-skill-blue-strong);-webkit-mask:var(--sl-mask-check) center/contain no-repeat;mask:var(--sl-mask-check) center/contain no-repeat}
.sl-option:disabled,.sl-option.is-disabled{background:var(--surface-sunken);color:var(--ink-subtle);box-shadow:none;cursor:not-allowed}
.sl-option.is-disabled .sl-option__desc{color:var(--ink-subtle)}
.sl-option.is-disabled .sl-tile{color:var(--ink-subtle);background:var(--track)}
.sl-options{display:grid;gap:var(--space-2-5)}
.sl-options--two{grid-template-columns:1fr 1fr}
@media (max-width:767px){.sl-options--two{grid-template-columns:1fr}}
@media (hover:hover) and (pointer:fine){.sl-option:hover:not([aria-checked="true"]):not(:disabled):not(.is-disabled){transform:translateY(-1px);box-shadow:0 0 0 1px var(--skill-blue),var(--shadow-hover)}}

/* ===== ListRow ===== */
/* 출처: 8판 .jl, .jr(줄 사이 선, 12 위아래, 칸 사이 16, 이름 600, 보조 13 회색, 호버 배경만), .ck(24, 둥글기 6), .grp(머리말 두 꼴), svg.ic.chev */
.sl-rows{display:flex;flex-direction:column}
.sl-row{display:flex;align-items:flex-start;gap:var(--space-4);min-height:0;margin:0 calc(var(--space-2) * -1);padding:var(--space-3) var(--space-2);border:0;border-bottom:1px solid var(--divider);border-radius:0;background:transparent;box-shadow:none;font:400 14px/21px var(--font-sans);color:var(--ink);flex-wrap:nowrap;transition:background-color var(--duration-hover) var(--ease-scene)}
.sl-row:last-child{border-bottom:0}
.sl-row>*:not(.sl-row__main){flex:none}
.sl-row--center{align-items:center}
.sl-row:active,.sl-row.is-pressed{background:var(--surface-pressed);transition-duration:var(--duration-press)}
.sl-row__main{flex:1 1 auto;min-width:0;font-weight:600;line-height:21px}
.sl-row__main small.sl-row__note{color:var(--ink)}
.sl-row__desc,.sl-row__main small{display:block;margin-top:var(--space-0-5);font:400 13px/1.5 var(--font-sans);color:var(--ink-muted)}
.sl-row__meta{font:400 13px/21px var(--font-sans);color:var(--ink-muted)}
.sl-row__end .sl-btn--link{min-height:0;padding:0;line-height:21px}
.sl-row__end,.sl-row__actions{display:flex;align-items:center;gap:var(--space-2-5);justify-content:flex-end;min-height:21px}
.sl-row--stack{flex-direction:column;align-items:stretch}
.sl-row__head{display:flex;align-items:center;gap:var(--space-3)}
.sl-row__sub{padding-left:40px;text-wrap:pretty}
.sl-row__level{display:inline-flex;align-items:center;gap:var(--space-1);font:400 13px/21px var(--font-sans);color:var(--ink-muted)}
.sl-row__chev{flex:none;width:16px;height:16px;color:var(--ink-muted)}
.sl-row.is-disabled{color:var(--ink-subtle);background:transparent}
/* AI 제안 행: 렌즈 점 + 한 줄, 행동은 링크 둘 */
.sl-row--ai{align-items:flex-start}
.sl-row__ai{display:flex;align-items:center;gap:6px;margin-top:var(--space-0-5);font:400 13px/20px var(--font-sans);color:var(--ink-muted)}
.sl-row--ai .sl-row__actions{justify-content:flex-start;margin-top:var(--space-2)}
.sl-lens-dot{display:inline-block;width:14px;height:14px;flex:none;background:url(../assets/Logo/skilllens-mark.svg) center/contain no-repeat}
@media (hover:hover) and (pointer:fine){.sl-row:hover{background:var(--surface-pressed)}}
/* 폰: 행 끝 링크는 다음 줄 왼쪽으로(8판 .ph .jr:has(.rt .lk)). 체크가 있으면 체크 다음 칸에 맞춤 */
@media (max-width:767px){.sl-row:has(.sl-row__end .sl-btn--link){flex-wrap:wrap}.sl-row:has(.sl-row__end .sl-btn--link) .sl-row__main{flex-basis:calc(100% - 40px)}.sl-row:has(.sl-row__end .sl-btn--link) .sl-row__end{width:100%;justify-content:flex-start;margin-top:calc(var(--space-2) * -1)}.sl-row:has(.sl-check):has(.sl-row__end .sl-btn--link) .sl-row__end{padding-left:40px}}
/* 체크 상자(8판 .ck): 24, 둥글기 6, 테 border-strong, 고르면 보라 + 흰 체크, 일부는 연보라 */
.sl-check{flex:none;display:grid;place-items:center;width:24px;height:24px;border:1.5px solid var(--border-strong);border-radius:var(--radius-xs);background:var(--surface-raised);color:var(--on-skill-blue-strong)}
.sl-check svg{width:14px;height:14px;transition:transform var(--duration-release) var(--ease-spring)}
.sl-check[aria-checked="false"] svg,.sl-check[aria-checked="mixed"] svg{transform:scale(0);position:absolute}
.sl-check[aria-checked="true"]{background:var(--skill-blue);border-color:var(--skill-blue)}
.sl-check[aria-checked="mixed"]{background:var(--skill-blue-tint);border-color:var(--skill-blue);color:var(--skill-blue-strong)}
.sl-check[aria-checked="mixed"]::after{content:"";width:10px;height:2px;border-radius:1px;background:currentColor}
.sl-check--round{border-radius:50%}
/* 아이콘 타일 */
.sl-tile{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:var(--radius-sm);background:var(--skill-blue-tint);color:var(--skill-blue-strong)}
.sl-tile--sm{width:28px;height:28px}
.sl-tile--orange{background:var(--tile-orange);color:var(--tile-orange-ink)}
.sl-tile--yellow{background:var(--tile-yellow);color:var(--tile-yellow-ink)}
.sl-tile--pink{background:var(--tile-pink);color:var(--tile-pink-ink)}
.sl-tile--red{background:var(--tile-red);color:var(--tile-red-ink)}
.sl-tile--violet{background:var(--tile-violet);color:var(--tile-violet-ink)}
.sl-tile--green{background:var(--tile-green);color:var(--tile-green-ink)}
.sl-tile--cyan{background:var(--tile-cyan);color:var(--tile-cyan-ink)}
.sl-tile--neutral{background:var(--track);color:var(--ink-muted)}
/* 묶음 머리말(8판 .grp.gl 보기용, .grp.gh 편집용) */
.sl-group{display:flex;align-items:center;padding:var(--space-4) 0 var(--space-0-5);font:600 13px/20px var(--font-sans);color:var(--ink-muted)}
.sl-group:first-child{padding-top:var(--space-2)}
.sl-group--edit{gap:var(--space-4);padding:var(--space-5) 0 var(--space-2);border-bottom:1px solid var(--divider);font-size:15px;color:var(--ink)}
.sl-group--edit b{font-weight:700}
.sl-group__count{margin-left:auto;font:500 13px/20px var(--font-sans);color:var(--ink-muted)}

/* ===== ProgressBar ===== */
/* 출처: 8판 .bar(8, 둥글기 4, 바탕 divider, 보라/산호/라임 칸) */
.sl-bar{display:flex;height:8px;overflow:hidden;border-radius:4px;background:var(--divider)}
.sl-bar>*{display:block;height:100%}
.sl-bar__seg--brand{background:var(--skill-blue)}
.sl-bar__seg--coral{background:var(--change-coral)}
.sl-bar__seg--lime{background:var(--focus-lime)}
.sl-bar__seg--success{background:var(--success-fill)}
.sl-bar__seg--warning{background:var(--warning-fill)}
.sl-bar>[style*="--w"]{animation:sl-bar 900ms var(--ease-scene) both}
.sl-bar-legend{display:flex;justify-content:space-between;gap:var(--space-4);margin-top:var(--space-2);font:400 13px/20px var(--font-sans);color:var(--ink-muted)}
.sl-dot{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%}
.sl-dot--brand{background:var(--skill-blue)}
.sl-dot--coral{background:var(--change-coral)}
.sl-dot--success{background:var(--success-fill)}
.sl-dot--warning{background:var(--warning-fill)}

/* ===== StepProgress ===== */
/* 출처: 8판 .stp(점 10, 선 2, 지나온 곳 보라, 지금 자리 렌즈 글라이드 14 + 연보라 링 4, 0.36초 / 폰 0.3초) */
.sl-steps__label{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2);font:600 13px/20px var(--font-sans);color:var(--ink-muted)}
.sl-steps__track{position:relative;display:flex;align-items:center;gap:0}
.sl-steps__dot{flex:none;display:block;width:10px;height:10px;border-radius:50%;background:var(--divider)}
.sl-steps__dot.is-done,.sl-steps__dot.is-current{background:var(--skill-blue)}
.sl-steps__line{flex:1;display:block;min-width:14px;height:2px;background:var(--divider)}
.sl-steps__line.is-done{background:var(--skill-blue)}
.sl-steps__fill{position:absolute;left:5px;top:50%;height:2px;margin-top:-1px;background:var(--skill-blue);transition:width var(--duration-step) var(--ease-lens)}
.sl-steps__glide{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--skill-blue);box-shadow:0 0 0 4px var(--skill-blue-tint);transition:left var(--duration-step) var(--ease-lens)}
.sl-steps__glide::after{content:"";position:absolute;inset:3px 1px 3px 6px;border-radius:50%;background:linear-gradient(160deg,#fff,var(--focus-lime));opacity:.9}
@media (max-width:767px){.sl-steps__glide,.sl-steps__fill{transition-duration:var(--duration-step-mobile)}}

/* ===== DropZone ===== */
.sl-drop{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-6) var(--space-4);background:var(--skill-blue-tint);border:1.5px dashed var(--border-strong);border-radius:var(--radius-lg);text-align:center;font-family:var(--font-sans)}
.sl-drop__icon{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-sm);background:var(--surface-raised);color:var(--skill-blue-strong)}
.sl-drop__title{font:500 13px/20px var(--font-sans);color:var(--ink-muted)}
.sl-drop__title b{color:var(--skill-blue-strong);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.sl-drop__hint{font:400 13px/20px var(--font-sans);color:var(--ink-muted)}
.sl-drop.is-active{border-style:solid;border-color:var(--skill-blue)}
.sl-file{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border:0;border-radius:var(--radius-md);background:var(--surface-raised);box-shadow:0 0 0 1px var(--border),var(--shadow-card)}
.sl-file__name{font:600 13px/20px var(--font-sans)}
.sl-file__size{font:400 13px/20px var(--font-sans);color:var(--ink-subtle)}

/* ===== ScoreStepper ===== */
/* 출처: 8판 .sld(막대 8, 손잡이 26 + 보라 테 7), .tk 눈금 13, .pm(48 둥근 더하기 빼기) */
.sl-score{display:flex;flex-direction:column;gap:var(--space-4);font-family:var(--font-sans)}
.sl-score__top{display:flex;align-items:center;justify-content:center;gap:var(--space-6)}
.sl-score__btn{display:grid;place-items:center;width:48px;height:48px;border:1.5px solid var(--border-strong);border-radius:50%;background:var(--surface-raised);color:var(--ink);font:400 22px/1 var(--font-sans);cursor:pointer;transition:transform var(--duration-release) var(--ease-scene),background-color var(--duration-release) var(--ease-scene)}
.sl-score__btn:active{transform:scale(.98);transition-duration:var(--duration-press)}
.sl-score__btn:focus-visible,.sl-score__btn.is-focus{outline:3px solid var(--focus-ring);outline-offset:2px}
.sl-score__value{min-width:96px;text-align:center;font:800 64px/1 var(--font-sans);letter-spacing:-.05em;color:var(--ink)}
.sl-score__value.is-tick{animation:sl-tick var(--duration-release) var(--ease-spring)}
.sl-score__unit{margin-left:var(--space-1);font:600 20px/28px var(--font-sans);letter-spacing:0}
.sl-score__slider{position:relative;height:8px;margin:var(--space-7) 6px var(--space-2)}
.sl-score__rail{position:absolute;inset:0;border-radius:4px;background:var(--divider)}
.sl-score__fill{position:absolute;left:0;top:0;height:100%;border-radius:4px;background:var(--skill-blue)}
.sl-score__thumb{position:absolute;top:50%;width:26px;height:26px;margin:0;border-radius:50%;background:var(--surface-raised);border:7px solid var(--skill-blue);transform:translate(-50%,-50%);box-shadow:var(--shadow-thumb)}
.sl-score__ticks{display:flex;justify-content:space-between;padding:0 6px;font:400 13px/20px var(--font-sans);color:var(--ink-muted)}
@media (max-width:767px){.sl-score__value{font-size:48px}}

/* ===== GlassFrame ===== */
/* 출처: 8판 .fpc .top/.band(유리 + 블러 20, 아래나 위 1px 선), .wm .lt(30 연보라 타일 + 마크 26) */
.sl-glass{background:var(--glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--border)}
.sl-topbar{display:flex;align-items:center;gap:var(--space-6);height:60px;padding:0 var(--space-5);border-radius:var(--radius-lg)}
.sl-topbar__brand{display:flex;align-items:center;gap:var(--space-2);font:800 16px/20px var(--font-sans);letter-spacing:-.6px;color:var(--ink)}
.sl-topbar__mark{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--skill-blue-tint) url(../assets/Logo/skilllens-mark.svg) center/26px 26px no-repeat;flex:none}
.sl-topbar__step{font:400 13px/20px var(--font-sans);color:var(--ink-muted)}
.sl-topbar__progress{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--space-3-5)}
.sl-topbar__progress .sl-steps{width:420px;max-width:100%}
.sl-topbar__progress .sl-steps__label{display:none}
.sl-topbar__end{display:flex;align-items:center;gap:var(--space-3-5);font:400 13px/20px var(--font-sans);color:var(--ink-muted)}
.sl-topbar__end .sl-btn--link{font-size:13px}
.sl-topbar__spacer{flex:1}
.sl-band{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);height:80px;padding:0 var(--space-7);border-radius:var(--radius-lg)}
.sl-band__reason{font:400 13px/20px var(--font-sans);color:var(--ink-muted)}

/* ===== Top ===== */
/* 출처: 8판 .kick(13 회색 600, 아래 8), .h1(작업 28, 온보딩 40/48 800 -1.6, 폰 28/34), .tx.s(16 회색, 위 6, 폰 14), .h1 .ac */
.sl-top{display:flex;flex-direction:column;gap:0;padding:var(--space-6) 0 var(--space-5)}
.sl-top--flush{padding:0}
.sl-top__eyebrow{margin:0 0 var(--space-2);font:600 13px/20px var(--font-sans);letter-spacing:0;color:var(--ink-muted)}
.sl-top__title{margin:0;font:800 28px/34px var(--font-sans);letter-spacing:-1px;color:var(--ink);text-wrap:balance}
.sl-top--lg .sl-top__title{font-size:40px;line-height:48px;letter-spacing:-1.6px}
.sl-top__desc{margin:6px 0 0;font:400 16px/24px var(--font-sans);color:var(--ink-muted);text-wrap:pretty}
@media (max-width:767px){.sl-top--lg .sl-top__title{font-size:28px;line-height:34px;letter-spacing:-1px}.sl-top__desc{font-size:14px;line-height:21px}}
@container vp (max-width:767px){.sl-top--lg .sl-top__title{font-size:28px;line-height:34px;letter-spacing:-1px}.sl-top__desc{font-size:14px;line-height:21px}}

/* ===== BottomCTA ===== */
/* 출처: 8판 .fph .band(폰 아래 고정 띠: 유리, 위 1px 선, 12 20 20, 주 버튼 56 전체 폭, 이유 13 가운데) */
.sl-cta{position:sticky;bottom:0;display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3) var(--space-5) var(--space-5);border-top:1px solid var(--border);background:var(--glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.sl-cta .sl-btn{width:100%;height:var(--space-14)}
.sl-cta__row{display:flex;gap:var(--space-2)}
.sl-cta__row .sl-btn{width:auto}
.sl-cta__row .sl-btn--secondary{flex:0 0 auto;min-width:88px}
.sl-cta__row .sl-btn--primary{flex:1 1 auto}
.sl-cta__reason{text-align:center;font:400 13px/20px var(--font-sans);color:var(--on-glass-muted)}
.sl-cta__link{text-align:center}
@media (max-width:767px){.sl-cta{position:fixed;left:0;right:0;bottom:0;z-index:20}}

/* ===== TextField ===== */
/* 출처: 8판 .lbl(13 회색, 400), .inp(56, 바탕 canvas, 둥글기 12, 안쪽 16, 테 1.5 투명), 입력 묶음(라벨과 칸 6, 묶음 20, 마지막 칸과 주 버튼 20), .agree, .inp.srch */
.sl-field{display:flex;flex-direction:column;gap:var(--space-label)}
.sl-field__label{font:400 13px/20px var(--font-sans);color:var(--ink-muted)}
.sl-field__box{display:flex;align-items:center;gap:var(--space-2);height:var(--space-14);padding:0 var(--space-4);background:var(--canvas);border:1.5px solid transparent;border-radius:var(--radius-md);transition:border-color var(--duration-release) var(--ease-scene),background-color var(--duration-release) var(--ease-scene)}
.sl-field__input{flex:1;min-width:0;border:0;outline:0;background:none;font:400 16px/24px var(--font-sans);letter-spacing:inherit;color:var(--ink)}
.sl-field__input::placeholder{color:var(--ink-subtle)}
.sl-field__suffix{font:400 14px/20px var(--font-sans);color:var(--ink-subtle)}
.sl-field__box .sl-ico{color:var(--ink-muted)}
.sl-field__box .sl-done{margin-left:auto}
.sl-field--area .sl-field__box{height:auto;min-height:88px;padding:var(--space-3) var(--space-3-5);align-items:flex-start}
.sl-field--search .sl-field__box{height:40px;padding:0 var(--space-3)}
.sl-field.is-focus .sl-field__box,.sl-field__box:focus-within{background:var(--surface-raised);border-color:var(--skill-blue-strong)}
.sl-field.is-error .sl-field__box{background:var(--surface-raised);border-color:var(--danger)}
.sl-field__help{font:400 13px/20px var(--font-sans);color:var(--ink-muted)}
.sl-field__help--ok{color:var(--success)}
.sl-field.is-error .sl-field__help{color:var(--danger)}
.sl-field.is-disabled .sl-field__box{background:var(--track)}
.sl-field.is-disabled .sl-field__input,.sl-field.is-disabled .sl-field__label{color:var(--ink-subtle)}
.sl-field__reveal{flex:none;min-width:40px;height:40px;margin-right:calc(var(--space-2) * -1);border:0;background:none;font:500 13px/20px var(--font-sans);color:var(--ink-muted);cursor:pointer}
.sl-field__clear{flex:none;display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:50%;background:var(--divider);color:var(--ink-muted);font:400 18px/1 var(--font-sans)}
/* 입력 묶음: 묶음 사이 20, 마지막 칸과 주 버튼 20 */
.sl-form{display:flex;flex-direction:column;gap:var(--space-group)}
.sl-form>.sl-btn--primary,.sl-form>.sl-cta{margin-top:0}
.sl-form>.sl-btn--primary{width:100%}
/* 동의 줄(8판 .agrees, .agree): 체크 24 + 10 + 글 14. 문서 이름 낱말에 밑줄 */
.sl-agrees{display:flex;flex-direction:column;gap:var(--space-2-5)}
.sl-agree{display:flex;align-items:center;gap:var(--space-2-5);font:400 14px/20px var(--font-sans);color:var(--ink);cursor:pointer}
.sl-agree__doc{display:inline-block;min-height:24px;margin:-2px 0;padding:2px 0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* ===== StatRow ===== */
/* 출처: 8판 .nums(보드맞춤: 칸 사이 1px 선 표, 둥글기 12), 칸 안 14 16, 라벨 13 회색 위 + 숫자 28 800 아래, 보라와 산호 숫자, .nfil(숫자 칸이 곧 필터: 고른 칸 보라 링 2 + 연보라) */
.sl-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;overflow:hidden;border:1px solid var(--divider);border-radius:var(--radius-md);background:var(--divider)}
.sl-stats--4{grid-template-columns:repeat(4,1fr)}
.sl-stat{display:flex;flex-direction:column;gap:0;min-width:0;padding:var(--space-3-5) var(--space-4);border:0;border-radius:0;background:var(--surface-raised);box-shadow:none;transition:transform var(--duration-hover) var(--ease-scene),box-shadow var(--duration-hover) var(--ease-scene)}
.sl-stat__label{display:block;margin-bottom:var(--space-1);font:400 13px/1.5 var(--font-sans);color:var(--ink-muted)}
.sl-stat__value{display:block;font:800 28px/32px var(--font-sans);letter-spacing:-.04em;color:var(--ink)}
.sl-stat--accent .sl-stat__value{color:var(--skill-blue)}
.sl-stat--attention .sl-stat__value{color:var(--change-coral-strong)}
.sl-stats--filter .sl-stat{cursor:pointer;text-align:left;font:inherit}
.sl-stats--filter .sl-stat[aria-pressed="true"],.sl-stats--filter .sl-stat[aria-selected="true"]{background:var(--skill-blue-tint);box-shadow:inset 0 0 0 2px var(--skill-blue)}
.sl-stats--filter .sl-stat:focus-visible{outline:3px solid var(--focus-ring);outline-offset:-3px}
@media (hover:hover) and (pointer:fine){.sl-stat:hover{transform:translateY(-1px);box-shadow:var(--shadow-hover)}}
@media (max-width:767px){.sl-stat{padding:var(--space-2-5) var(--space-3)}.sl-stat__value{font-size:20px}.sl-stats--4{grid-template-columns:1fr 1fr}}
@container vp (max-width:767px){.sl-stat{padding:var(--space-2-5) var(--space-3)}.sl-stat__value{font-size:20px}.sl-stats--4{grid-template-columns:1fr 1fr}}

/* ===== SummaryCard ===== */
/* 출처: 8판 .sum(마침 요약: canvas 바탕, 둥글기 16, 줄마다 12 16 + 흰 선, 이름 회색 왼쪽, 값 오른쪽), .ai/.note 꼴의 목록 요약은 아래 */
.sl-summary{padding:var(--space-3-5) var(--space-4);border-radius:var(--radius-tile);background:var(--skill-blue-tint);font:400 14px/21px var(--font-sans);color:var(--ink)}
.sl-summary__title{margin:0 0 var(--space-1);font:600 13px/20px var(--font-sans);color:var(--skill-blue-strong)}
.sl-summary__list{display:flex;flex-direction:column;gap:var(--space-1);margin:0;padding:0;list-style:none}
.sl-summary__list li{position:relative;padding-left:14px;font:400 14px/21px var(--font-sans);color:var(--ink)}
.sl-summary__list li::before{content:"";position:absolute;left:2px;top:8px;width:5px;height:5px;border-radius:50%;background:var(--skill-blue)}
.sl-summary--rows{padding:0;border-radius:var(--radius-dialog);background:var(--canvas)}
.sl-summary__row{display:flex;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--surface-raised)}
.sl-summary__row:last-child{border-bottom:0}
.sl-summary__row>span{flex:none;color:var(--ink-muted)}
.sl-summary__row>b{text-align:right;font-weight:700}

/* ===== EmptyState ===== */
.sl-empty{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:var(--space-8) var(--space-5);text-align:center;border:0;border-radius:var(--radius-lg);background:var(--surface-raised);box-shadow:0 0 0 1px var(--border),var(--shadow-card)}
.sl-empty__lens{position:relative;width:56px;height:56px;opacity:.9}
.sl-empty__lens i{position:absolute;top:6px;width:36px;height:44px;border-radius:50%;transform:rotate(28deg)}
.sl-empty__lens i:first-child{left:2px;background:var(--skill-blue-tint);box-shadow:inset 0 0 0 1.5px var(--skill-blue)}
.sl-empty__lens i:last-child{left:16px;background:var(--surface-raised);box-shadow:inset 0 0 0 1.5px var(--optical-cyan)}
.sl-empty__title{font:700 16px/24px var(--font-sans);color:var(--ink)}
.sl-empty__desc{max-width:280px;font:400 14px/21px var(--font-sans);color:var(--ink-muted)}

/* ===== LoadingSteps ===== */
/* 출처: 8판 .load(가운데, 사이 16), .lens(128 둥글기 36 연보라 그라데이션 판 + MARK('loop') 100), .steps(최대 420, 14, 동그라미 20), .dots(점 셋 1초). 바꾼 점: 끝난 단계 동그라미는 라임이 아니라 보라(결정 44) */
.sl-loading{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-6) 0 var(--space-2);text-align:center}
.sl-loading__lens{display:grid;place-items:center;width:128px;height:128px;border-radius:36px;background:linear-gradient(160deg,#e6e8ff,#d3d7ff)}
.sl-loading__lens svg{width:100px;height:100px}
.sl-loading__title{font:800 20px/28px var(--font-sans);color:var(--ink)}
.sl-loading__steps{display:flex;flex-direction:column;gap:var(--space-2);width:100%;max-width:420px;text-align:left}
.sl-loading__step{display:flex;align-items:center;gap:var(--space-2-5);font:400 14px/21px var(--font-sans);color:var(--ink-muted)}
.sl-loading__step.is-done{color:var(--ink)}
.sl-loading__step.is-current{color:var(--ink);font-weight:600}
.sl-loading__step>i{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--divider);font:600 13px/1 var(--font-sans);font-style:normal}
.sl-loading__step.is-done>i{background:var(--skill-blue);border-color:var(--skill-blue);color:var(--on-skill-blue-strong)}
.sl-loading__step.is-done>i::after{content:"";width:12px;height:12px;background:currentColor;-webkit-mask:var(--sl-mask-check) center/contain no-repeat;mask:var(--sl-mask-check) center/contain no-repeat}
.sl-loading__step.is-current>i{border-color:var(--skill-blue);color:var(--skill-blue)}
.sl-loading__step .sl-done{width:20px;height:20px}
.sl-loading__step .sl-steps__dot{width:20px;height:20px;border:1.5px solid var(--divider);background:transparent}
.sl-loading__step .sl-steps__dot.is-current{border-color:var(--skill-blue);background:transparent;box-shadow:none}
.sl-loading__dots{display:inline-flex;gap:6px}
.sl-loading__dots span{width:8px;height:8px;border-radius:50%;background:var(--skill-blue);animation:sl-dot 1s ease-in-out infinite}
.sl-loading__dots span:nth-child(2){animation-delay:.15s}
.sl-loading__dots span:nth-child(3){animation-delay:.3s}
.sl-loading__note{font:400 13px/20px var(--font-sans);color:var(--ink-muted)}
@media (max-width:767px){.sl-loading__lens{width:104px;height:104px;border-radius:30px}.sl-loading__lens svg{width:80px;height:80px}}

/* ===== Completion ===== */
/* 출처: 8판 .done(입구와 같은 틀, 제목 36/44, 흰 78% 카드 + 요약 .sum + 버튼 둘 .donebtns), .wowlk/.wowr(회사 조회 차례 목록: 둥근 체크, 지금 줄 보라 링, 남은 줄 회색, 오른쪽 결과). 완료 표시는 보라(결정 44) */
.sl-done{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--skill-blue);color:var(--on-skill-blue-strong);box-shadow:none}
.sl-done.sl-in{animation:sl-pop var(--duration-release) var(--ease-spring) both}
.sl-done-actions{display:flex;align-items:center;gap:var(--space-3)}
.sl-done-actions .sl-btn,.sl-entry__panel .sl-done-actions .sl-btn{width:auto}
@media (max-width:767px){.sl-done-actions{flex-direction:column;align-items:stretch;gap:var(--space-2)}.sl-done-actions .sl-btn{width:100%;height:var(--space-14)}}
/* 차례 목록(8판 .wowlk) */
.sl-done-list{display:flex;flex-direction:column;gap:var(--space-1);padding:2px 0}
.sl-done-list__row{display:flex;align-items:center;gap:var(--space-3);min-height:38px;font:600 15px/22px var(--font-sans);color:var(--ink)}
.sl-done-list__row .sl-check{border-radius:50%}
.sl-done-list__row.is-pending{color:var(--ink-muted);font-weight:500}
.sl-done-list__row.is-current .sl-check{border-color:var(--skill-blue);box-shadow:0 0 0 3px var(--skill-blue-tint)}
.sl-done-list__result{margin-left:auto;padding-left:var(--space-3);font:500 13px/20px var(--font-sans);color:var(--ink-muted);white-space:nowrap;animation:sl-reveal 420ms var(--ease-scene) both}
@media (max-width:767px){.sl-done-list__row{min-height:34px;font-size:14px}.sl-done-list__result{white-space:normal;text-align:right}}
/* 옛 가운데 마침 화면(호환). 새 화면은 Entry의 sl-entry--done을 씀 */
.sl-done-screen{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4);padding:var(--space-8) var(--space-5) var(--space-6);text-align:left;border-radius:var(--radius-xl)}
.sl-done-screen__title{margin:0;font:800 36px/44px var(--font-sans);letter-spacing:-1.4px;color:var(--ink)}
.sl-done-screen__desc{margin:0;font:400 16px/24px var(--font-sans);color:var(--ink-muted)}
.sl-done-screen__actions{display:flex;gap:var(--space-3);margin-top:var(--space-2)}

/* ===== BottomSheet ===== */
/* 출처: 8판 .sheet(PC 오른쪽 520 전체 높이, 왼쪽 선 + 그림자, 안쪽 24 사이 16 / 폰 아래 72% 위 둥글기 18), .scrim(먹색 35%), .ft(버튼 오른쪽, 사이 10) */
.sl-scrim{position:absolute;inset:0;z-index:40;background:var(--scrim);animation:sl-scrim-in var(--duration-sheet) linear both}
.sl-sheet{position:absolute;left:0;right:0;bottom:0;z-index:50;display:flex;flex-direction:column;gap:var(--space-4);max-height:88%;padding:var(--space-6);overflow:hidden;border-top:1px solid var(--border);border-radius:var(--radius-sheet-phone) var(--radius-sheet-phone) 0 0;background:var(--surface-overlay);box-shadow:var(--shadow-sheet);animation:sl-sheet-up var(--duration-sheet) var(--ease-scene) both}
.sl-sheet--side{left:auto;top:0;width:520px;max-height:none;border-top:0;border-left:1px solid var(--border);border-radius:0;box-shadow:var(--shadow-sheet-side);animation-name:sl-sheet-in}
.sl-sheet.is-closing{transform:translateY(100%);transition:transform var(--duration-sheet) var(--ease-out-view)}
.sl-sheet__handle{position:relative;width:36px;height:4px;margin:calc(var(--space-3) * -1) auto 0;border-radius:var(--radius-pill);background:var(--divider)}
.sl-sheet__handle::before{content:"";position:absolute;left:50%;top:50%;width:64px;height:44px;transform:translate(-50%,-50%)}
.sl-sheet--side .sl-sheet__handle{display:none}
.sl-sheet__head{padding:0}
.sl-sheet__title{margin:var(--space-1) 0 0;font:700 20px/28px var(--font-sans);letter-spacing:-.4px;color:var(--ink);text-wrap:balance}
.sl-sheet__desc{margin:var(--space-1) 0 0;font:400 14px/21px var(--font-sans);color:var(--ink-muted)}
.sl-sheet__search{padding:0}
.sl-sheet__body{flex:1;display:flex;flex-direction:column;gap:var(--space-2);min-height:0;margin:0 calc(var(--space-6) * -1);padding:0 var(--space-6);overflow:auto}
.sl-sheet__body--flush{padding-top:0}
.sl-sheet__foot,.sl-sheet .sl-cta{position:static;display:flex;flex-direction:row;justify-content:flex-end;gap:var(--space-2-5);margin-top:auto;padding:0;border:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.sl-sheet .sl-cta .sl-btn{width:auto;height:var(--space-12)}
@media (max-width:767px){.sl-sheet--side{left:0;top:auto;width:auto;height:72%;border-left:0;border-top:1px solid var(--border);border-radius:var(--radius-sheet-phone) var(--radius-sheet-phone) 0 0;animation-name:sl-sheet-up}}

/* ===== Dialog ===== */
/* 출처: 8판 .dlg(가운데 위 40%, 440, 둥글기 16, 안쪽 24, 사이 12, 제목 20, 버튼 오른쪽 사이 10 위 8). 폰은 좌우 20 */
.sl-dialog{position:absolute;left:50%;top:40%;z-index:50;display:flex;flex-direction:column;gap:var(--space-3);width:min(440px,calc(100% - 40px));padding:var(--space-6);border-radius:var(--radius-dialog);background:var(--surface-overlay);box-shadow:var(--shadow-dialog);transform:translate(-50%,-50%);animation:sl-dialog-in var(--duration-sheet) var(--ease-scene) both}
.sl-dialog__title{margin:0;font:700 20px/28px var(--font-sans);letter-spacing:-.4px;color:var(--ink);text-wrap:balance}
.sl-dialog__desc{margin:0;font:400 14px/21px var(--font-sans);color:var(--ink-muted);text-wrap:pretty}
.sl-dialog__actions{display:flex;justify-content:flex-end;gap:var(--space-2-5);margin-top:var(--space-2)}
.sl-dialog__actions .sl-btn{height:var(--space-12)}
.sl-dialog--danger .sl-btn--primary{background:var(--danger);color:var(--on-danger)}

/* ===== DataTable ===== */
/* 출처: 8판 .tb2(카드 안 표: 14, 머리 13 회색 600 + 8 10, 칸 10, 줄 사이 divider, 숫자 오른쪽, 호버 배경만) */
.sl-table{width:100%;border-collapse:collapse;border-spacing:0;background:transparent;font:400 14px/21px var(--font-sans);color:var(--ink)}
.sl-table th{padding:var(--space-2) var(--space-2-5);border-bottom:1px solid var(--divider);background:transparent;text-align:left;font:600 13px/20px var(--font-sans);color:var(--ink-muted);white-space:nowrap}
.sl-table td{height:auto;padding:var(--space-2-5);border-bottom:1px solid var(--divider);vertical-align:top}
.sl-table tr:last-child td{border-bottom:0}
.sl-table td.num,.sl-table th.num{text-align:right;white-space:nowrap}
.sl-table tr.is-selected td{background:var(--skill-blue-tint)}
.sl-table tr.is-attention td{background:var(--change-coral-tint)}
.sl-table .sl-check{display:inline-grid;vertical-align:middle}
.sl-table__sel{width:40px}
.sl-table__email{color:var(--ink-muted)}
.sl-table__actions{display:flex;gap:var(--space-2-5);justify-content:flex-end}
.sl-table__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-2-5) 0;font:400 13px/20px var(--font-sans);color:var(--ink-muted)}
@media (hover:hover) and (pointer:fine){.sl-table tbody tr:hover td{background:var(--surface-pressed)}}
@container vp (max-width:767px){.sl-table{display:none}}
@container vp (min-width:768px){.sl-table{display:table}}

/* ===== Toast ===== */
/* 출처: 8판 .toast(먹색, 둥글기 12, 12 18, 14, 아래 104 가운데), .tb(되돌리기: 연보라 700) */
.sl-toast{position:absolute;left:50%;bottom:104px;z-index:60;display:flex;align-items:center;gap:var(--space-3-5);max-width:calc(100% - 32px);padding:var(--space-3) 18px;white-space:nowrap;transform:translateX(-50%);border-radius:var(--radius-md);background:var(--action);color:var(--on-action);font:400 14px/1.4 var(--font-sans);text-align:center;box-shadow:var(--shadow-sheet);animation:sl-toast-in var(--duration-release) var(--ease-scene) both}
.sl-toast .sl-done{flex:none;width:20px;height:20px}
.sl-toast__action{padding:0;border:0;background:none;color:var(--on-action-accent);font:inherit;font-weight:700;cursor:pointer}

/* ===== Skeleton ===== */
.sl-skel{border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--track) 25%,var(--surface-pressed) 50%,var(--track) 75%);background-size:200% 100%;animation:sl-shimmer 1400ms linear infinite}
.sl-skel--row{height:56px;border-radius:var(--radius-md)}
.sl-skel--text{height:14px;width:60%}
.sl-skel--title{height:22px;width:70%}
@media (prefers-reduced-motion: reduce){.sl-skel{animation:none !important;transition:none !important}}

/* ===== ChartColors ===== */
.sl-chart{display:flex;flex-direction:column;gap:var(--space-3)}
.sl-chart__bars{display:flex;align-items:flex-end;gap:var(--space-2);height:120px}
.sl-chart__bar{flex:1;border-radius:6px 6px 2px 2px;box-shadow:inset 0 0 0 1px var(--chart-ring)}
.sl-chart__legend{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);font:500 12px/16px var(--font-sans);color:var(--ink-muted)}
.sl-chart__legend i{display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:3px;vertical-align:-1px;box-shadow:inset 0 0 0 1px var(--chart-ring)}
.sl-chart__scale{display:flex;gap:2px;height:20px;border-radius:6px;overflow:hidden}
.sl-chart__scale i{flex:1}

/* ===== Shell ===== */
/* 출처: 8판 .fpc(PC: 위 60 + 가운데 한 칸 880 흰 카드 둥글기 24 안쪽 32 사이 24 + 아래 띠 80), .fph(폰: 위 56, 흰 본문 20 20 24 사이 16, 아래 고정 띠, 본문만 스크롤) */
.sl-shell{display:flex;flex-direction:column;min-height:100dvh;background:var(--canvas)}
.sl-shell__top{flex:none;display:flex;align-items:center;gap:var(--space-6);height:60px;padding:0 var(--space-18);border:0;border-bottom:1px solid var(--border);border-radius:0;background:var(--glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.sl-shell__back{flex:none;display:none;place-items:center;width:28px;height:28px;border:0;background:none;color:var(--ink);font-size:20px}
.sl-shell__main{flex:1;display:flex;justify-content:center;align-items:flex-start;padding:var(--space-8) var(--space-7)}
.sl-shell__card{display:flex;flex-direction:column;gap:var(--space-6);width:100%;max-width:var(--layout-card-max);padding:var(--space-8);border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--surface-raised);box-shadow:var(--shadow-card)}
.sl-shell__card--reading{max-width:var(--layout-content-reading)}
.sl-shell__bottom{position:sticky;bottom:0;flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);height:80px;padding:0 max(var(--space-7),calc((100% - var(--layout-card-max)) / 2));border:0;border-top:1px solid var(--border);border-radius:0;background:var(--glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.sl-shell__bottom .sl-band__reason{margin-left:auto}
.sl-shell__bottom .sl-btn{height:var(--space-12)}
.sl-shell__bottom .sl-btn--primary{min-width:128px}
@media (max-width:767px){
.sl-shell{background:var(--surface-raised)}
.sl-shell__top{gap:var(--space-3);height:56px;padding:0 var(--space-5)}
.sl-shell__back{display:grid}
.sl-shell__top .sl-topbar__brand,.sl-shell__top .sl-topbar__end{display:none}
.sl-shell__main{padding:0}
.sl-shell__card{gap:var(--space-4);max-width:none;padding:var(--space-5) var(--space-5) var(--space-6);border:0;border-radius:0;box-shadow:none}
.sl-shell__bottom{position:fixed;left:0;right:0;bottom:0;z-index:20;height:auto;flex-direction:column;align-items:stretch;gap:var(--space-2);padding:var(--space-3) var(--space-5) var(--space-5)}
.sl-shell__bottom .sl-btn--secondary{display:none}
.sl-shell__bottom .sl-btn{width:100%;height:var(--space-14)}
.sl-shell__bottom .sl-band__reason{order:-1;margin:0;text-align:center;color:var(--on-glass-muted)}
.sl-shell__main{padding-bottom:calc(var(--space-14) + var(--space-8) + env(safe-area-inset-bottom))}
}
@container vp (max-width:767px){
.sl-shell{background:var(--surface-raised)}
.sl-shell__top{gap:var(--space-3);height:56px;padding:0 var(--space-5)}
.sl-shell__back{display:grid}
.sl-shell__top .sl-topbar__brand,.sl-shell__top .sl-topbar__end{display:none}
.sl-shell__main{padding:0}
.sl-shell__card{gap:var(--space-4);max-width:none;padding:var(--space-5) var(--space-5) var(--space-6);border:0;border-radius:0;box-shadow:none}
.sl-shell__bottom{height:auto;flex-direction:column;align-items:stretch;gap:var(--space-2);padding:var(--space-3) var(--space-5) var(--space-5)}
.sl-shell__bottom .sl-btn--secondary{display:none}
.sl-shell__bottom .sl-btn{width:100%;height:var(--space-14)}
.sl-shell__bottom .sl-band__reason{order:-1;margin:0;text-align:center;color:var(--on-glass-muted)}
}
@media (min-width:768px) and (max-width:1023px){.sl-shell__top{padding:0 var(--space-6)}}

/* ===== Flow ===== */
/* 출처: 8판 .pg-fw/.pg-bk(단계 이동: 옆으로 24px 밀며 들어옴 0.36초, 폰 0.3초). 바꾼 점: 흐림 없음(PM 위임) */
.sl-stage{position:relative;overflow:hidden}
.sl-page{position:absolute;inset:0;display:flex;flex-direction:column}
.sl-page[hidden]{display:none}
.sl-page.is-enter{animation:sl-page-in var(--duration-step) var(--ease-scene) both}
.sl-page.is-enter-back{animation:sl-page-back-in var(--duration-step) var(--ease-scene) both}
.sl-page.is-exit,.sl-page.is-exit-back{animation:sl-page-out calc(var(--duration-step) / 2) var(--ease-out-view) both;pointer-events:none}
.sl-stage .body{padding-bottom:calc(var(--space-14) + var(--space-4))}
@media (max-width:767px){.sl-page.is-enter,.sl-page.is-enter-back,.sl-page.is-exit,.sl-page.is-exit-back{animation-duration:var(--duration-step-mobile)}}

/* ===== Entry ===== */
/* 출처: 8판 login~0, setpw, .ent(빛 이미지 바탕, 큰 렌즈 오른쪽 500 + 커서 기울기 12도), .ecol(560, 위 168 고정선), 큰 워드마크 72(폰 56), 한 줄 "스킬을 보는 눈", 유리 카드 440(흰 62% + 블러 18 + 둥글기 24 + 안쪽 32), 링크 한 줄 .lrow, 폰(렌즈 120 가운데 위 80, 본문 위 168, 제목만 가운데). SSO 없음 */
.sl-entry{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:900px;overflow:hidden;background:var(--ambient-base);color:var(--ink);container:entry/inline-size}
.sl-entry::before{content:"";position:absolute;inset:-32px;z-index:-1;pointer-events:none;background:url(../assets/Ambient/entry-light.webp) center/cover no-repeat}
.sl-entry__lens{position:absolute;z-index:1;right:9%;top:50%;width:500px;height:500px;margin-top:-260px;pointer-events:none;transform:perspective(1000px) rotateY(calc((var(--mx,.5) - .5) * 12deg)) rotateX(calc((.5 - var(--my,.5)) * 12deg));transition:transform 600ms var(--ease-scene)}
.sl-entry__lens svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(var(--shadow-lens))}
.sl-entry__top{position:relative;z-index:2;display:flex;align-items:center;height:60px;padding:0 var(--space-18)}
.sl-entry__top .sl-topbar__mark{display:none}
.sl-entry:has(.sl-wordmark--xl)>.sl-entry__top .sl-wordmark{visibility:hidden}
.sl-entry__work{position:relative;z-index:2;flex:1;display:flex;justify-content:flex-start;align-items:flex-start;padding:var(--space-10) var(--space-18)}
.sl-entry__col{display:flex;flex-direction:column;gap:var(--space-7);width:560px;max-width:100%;margin-top:68px}
.sl-entry__title{margin:0;font:800 56px/66px var(--font-sans);letter-spacing:-2.2px;color:var(--ink);text-wrap:balance}
.sl-entry__desc{margin:var(--space-3) 0 0;font:400 16px/24px var(--font-sans);color:var(--on-glass-muted)}
.sl-entry__panel{display:flex;flex-direction:column;gap:var(--space-6);width:440px;max-width:100%;padding:var(--space-8);border:1px solid var(--glass-card-edge);border-radius:var(--radius-xl);background:var(--glass-card);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:var(--shadow-glass-card)}
/* 마침(8판 .done): 제목 36/44, 카드는 흰 78% + 먹색 8% 테 */
.sl-entry--done .sl-entry__title{font-size:36px;line-height:44px;letter-spacing:-1.4px}
.sl-entry--done .sl-entry__desc{color:var(--ink-muted)}
.sl-entry--done .sl-entry__panel{background:rgba(255,255,255,.78);border-color:rgba(17,18,24,.08)}
.sl-entry--done::before{background-position:left center}
/* 빛 바탕(입구, 마침만): 8판 .ent의 빛 이미지. 다른 틀에서 쓸 때 */
.sl-ambient{position:relative;isolation:isolate;overflow:hidden;background:var(--ambient-base)}
.sl-ambient::before{content:"";position:absolute;inset:-32px;z-index:-1;pointer-events:none;background:url(../assets/Ambient/entry-light.webp) center/cover no-repeat}
/* 큰 워드마크(8판 .wm, .wmxl): i, l, l 크기 계단 1, 1.07, 1.15. 한 색 */
.sl-wordmark{display:inline-flex;align-items:center;gap:var(--space-2);font-weight:800;font-size:16px;letter-spacing:-.6px;color:inherit}
.sl-wordmark__text{display:inline-flex;align-items:baseline}
.sl-wordmark .r1{font-size:1em}
.sl-wordmark .r2{font-size:1.07em}
.sl-wordmark .r3{font-size:1.15em}
.sl-wordmark .r1,.sl-wordmark .r2,.sl-wordmark .r3{display:inline-block;line-height:1}
.sl-wordmark--xl{display:block;font-size:72px;line-height:1;letter-spacing:-.04em}
.sl-wordmark--xl .sl-wordmark__text{display:inline}
/* 바뀌는 한 줄: 숫자만 한 번 올라감 */
.sl-rotline{margin:var(--space-3) 0 0;min-height:24px;font:400 16px/24px var(--font-sans);color:var(--on-glass-muted)}
.sl-rotline b{font-weight:800;color:inherit;font-variant-numeric:tabular-nums}
/* 카드 안 입력 묶음: 라벨과 칸 6, 묶음 사이 20, 마지막 칸과 주 버튼 20 */
.sl-entry__panel .sl-btn--primary{width:100%;justify-content:center}
/* 로그인 아래 링크 한 줄(8판 .lrow): 왼쪽 비밀번호 찾기 14 먹색, 오른쪽 약관 둘 13 회색, 넘치면 약관이 다음 줄 오른쪽 */
.sl-linkrow{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;column-gap:var(--space-link-pair);row-gap:var(--space-1);margin-top:calc(var(--space-3) - var(--space-group))}
.sl-linkrow a,.sl-linkrow button{display:inline-block;min-height:24px;margin:0;padding:2px 0;border:0;background:none;line-height:20px;text-align:left;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.sl-linkrow__main{font:400 14px/20px var(--font-sans);color:var(--ink)}
.sl-linkrow__legal{display:inline-flex;gap:var(--space-link-pair);margin-left:auto}
.sl-linkrow__legal a,.sl-linkrow__legal button{font:400 13px/20px var(--font-sans);color:var(--ink-muted)}
@media (prefers-reduced-motion: reduce){.sl-entry__lens{transform:none}}
/* 폰(8판 .ph .ent) */
@container entry (max-width:767px){
.sl-entry__lens{left:50%;right:auto;top:80px;width:120px;height:120px;margin:0 0 0 -60px;transform:none}
.sl-entry__top{height:56px;padding:0 var(--space-5)}
.sl-entry__work{padding:168px var(--space-5) var(--space-6)}
.sl-entry__col{gap:var(--space-4);width:100%;margin-top:0}
.sl-entry__head{text-align:center}
.sl-entry__title{font-size:36px;line-height:44px;letter-spacing:-1.4px}
.sl-wordmark--xl{font-size:56px;margin-top:6px}
.sl-rotline,.sl-entry__desc{margin-top:var(--space-2);font-size:14px;line-height:21px;min-height:0}
.sl-entry__panel{width:100%;padding:var(--space-4);border:0;border-radius:var(--radius-tile);background:rgba(255,255,255,.92);box-shadow:0 0 0 1px var(--border),var(--shadow-card);text-align:left}
.sl-entry--done .sl-entry__head{text-align:left}
}

/* ===== NightPanel ===== */
/* 출처: 8판 login2(밤색 입구: 남색 그라데이션 바탕, 흰 카드 440 둥글기 20 안쪽 28, 제목 흰 글자, 부제 흰 72%) */
.sl-panel--night{position:relative;overflow:hidden;border-radius:var(--radius-xl);background:var(--night);color:var(--on-night)}
.sl-panel--night .sl-eyebrow,.sl-panel--night .sl-night__eyebrow{color:var(--on-night-muted)}
.sl-panel--night .sl-night__muted,.sl-panel--night p{color:var(--on-night-muted)}
[data-theme="dark"] .sl-panel--night{box-shadow:0 0 0 1px var(--border-strong)}
.sl-night__eyebrow{font:700 12px/16px var(--font-sans);letter-spacing:1.2px;text-transform:uppercase}
.sl-night__mark{position:absolute;right:-60px;bottom:-150px;width:400px;height:400px;pointer-events:none}
.sl-panel--night .mode[aria-pressed="true"],.sl-night__mode[aria-pressed="true"]{transform:translateX(8px);transition:transform 250ms var(--ease-scene)}
.sl-entry--night{background:linear-gradient(172deg,#1b2140 0%,#161b38 40%,#0f1328 100%);color:var(--on-night)}
.sl-entry--night::before{display:none}
.sl-entry--night .sl-entry__top{display:none}
.sl-entry--night .sl-entry__work{align-items:center;padding-top:var(--space-18)}
.sl-entry--night .sl-entry__col{gap:var(--space-6);margin-top:0}
.sl-entry--night .sl-entry__title{color:var(--on-night);font-size:44px;line-height:52px;letter-spacing:-1.7px}
.sl-entry--night .sl-entry__desc,.sl-entry--night .sl-rotline{color:rgba(255,255,255,.72);font-size:17px}
.sl-entry--night .sl-entry__panel{gap:0;padding:28px;border:0;border-radius:var(--radius-lg);background:var(--surface-raised);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 24px 60px rgba(0,0,0,.42)}

/* ===== EntryPC ===== */
/* EntryPC는 Entry와 같은 클래스(sl-entry)를 PC 폭에서 쓴다. 옛 좌우 분할(sl-entry-pc)은 8판에 없어 호환용으로만 남김 */
.sl-entry-pc{display:grid;grid-template-columns:1.1fr .9fr;min-height:720px;background:var(--canvas)}
.sl-entry-pc__story{display:flex;flex-direction:column;padding:40px 48px;border-radius:0}
.sl-entry-pc__form{display:grid;place-items:center;padding:var(--space-8)}
.sl-entry-pc__card{width:min(420px,100%)}
@media (max-width:1023px){.sl-entry-pc{grid-template-columns:1fr}.sl-entry-pc__story{display:none}}

/* ===== Combobox ===== */
.sl-combo{position:relative}
.sl-combo__list{position:absolute;left:0;right:0;top:calc(100% + var(--space-2));z-index:2;max-height:280px;overflow:auto;padding:var(--space-2);background:var(--surface-overlay);border-radius:var(--radius-md);box-shadow:0 0 0 1px var(--border),var(--shadow-sheet)}
.sl-combo__item{display:flex;align-items:center;gap:var(--space-3);min-height:48px;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);cursor:pointer;font:500 15px/22px var(--font-sans);color:var(--ink)}
.sl-combo__item[aria-selected="true"],.sl-combo__item:hover{background:var(--skill-blue-tint)}
.sl-combo__item mark{background:none;color:var(--skill-blue-strong);font-weight:700}
.sl-combo__meta{margin-left:auto;font:400 12px/16px var(--font-sans);color:var(--ink-subtle);white-space:nowrap}
.sl-combo__source{padding:var(--space-2) var(--space-3) var(--space-1);font:500 12px/16px var(--font-sans);color:var(--ink-muted)}
.sl-combo__empty{padding:var(--space-4) var(--space-3);font:400 14px/20px var(--font-sans);color:var(--ink-muted)}
.sl-combo__empty b{display:block;color:var(--ink);font-weight:700;margin-bottom:2px}
.sl-combo__alias{margin-left:var(--space-2);font:400 12px/16px var(--font-sans);color:var(--ink-muted)}

/* ===== DatePicker ===== */
.sl-date{display:flex;flex-direction:column;gap:var(--space-3)}
.sl-date__chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.sl-date__chip{height:36px;padding:0 var(--space-3);border:0;border-radius:var(--radius-pill);background:var(--track);color:var(--ink);font:600 13px/20px var(--font-sans);cursor:pointer;box-shadow:0 0 0 1px var(--border)}
.sl-date__chip[aria-pressed="true"]{background:var(--skill-blue-strong);color:var(--on-skill-blue-strong);box-shadow:none}
.sl-date__chip small{display:block;font:400 11px/14px var(--font-sans);opacity:.8}
.sl-cal{padding:var(--space-3);background:var(--surface-overlay);border-radius:var(--radius-md);box-shadow:0 0 0 1px var(--border),var(--shadow-card)}
.sl-cal__head{display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-1) var(--space-2);font:700 15px/22px var(--font-sans);color:var(--ink)}
.sl-cal__nav{display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:var(--radius-sm);background:none;color:var(--ink-muted);cursor:pointer}
.sl-cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.sl-cal__dow{text-align:center;font:600 11px/16px var(--font-sans);color:var(--ink-subtle);padding-bottom:4px}
.sl-cal__day{display:grid;place-items:center;height:36px;border:0;border-radius:var(--radius-sm);background:none;font:500 14px/20px var(--font-sans);color:var(--ink);cursor:pointer;font-variant-numeric:tabular-nums}
.sl-cal__day:hover{background:var(--skill-blue-tint)}
.sl-cal__day.is-past{color:var(--ink-subtle);cursor:not-allowed;opacity:.55}
.sl-cal__day.is-today{box-shadow:inset 0 0 0 1.5px var(--skill-blue)}
.sl-cal__day[aria-selected="true"]{background:var(--skill-blue-strong);color:var(--on-skill-blue-strong)}
.sl-cal__day.is-suggested{background:var(--skill-blue-tint)}
.sl-date__hint{font:400 13px/20px var(--font-sans);color:var(--ink-muted)}
.sl-cal--bare{box-shadow:none;padding:0;background:none}

/* ===== LevelPicker ===== */
.sl-level{display:inline-flex;gap:4px;padding:3px;background:var(--track);border-radius:var(--radius-pill)}
.sl-level__btn{min-width:36px;height:30px;padding:0 var(--space-2);border:0;border-radius:var(--radius-pill);background:none;color:var(--ink-muted);font:600 13px/20px var(--font-sans);cursor:pointer}
.sl-level__btn[aria-checked="true"]{background:var(--surface-raised);color:var(--skill-blue-strong);box-shadow:0 0 0 1px var(--border),var(--shadow-card)}
.sl-level__desc{margin-top:var(--space-2);font:400 13px/20px var(--font-sans);color:var(--ink-muted)}
.sl-level__desc b{color:var(--ink);font-weight:700}
.sl-level-list{display:flex;flex-direction:column;gap:var(--space-2)}
.sl-level-row{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--surface-raised);box-shadow:0 0 0 1px var(--border);cursor:pointer}
.sl-level-row__n{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--track);font:800 15px/20px var(--font-sans);color:var(--ink-muted)}
.sl-level-row[aria-checked="true"]{background:var(--skill-blue-tint);box-shadow:0 0 0 1px var(--skill-blue)}
.sl-level-row[aria-checked="true"] .sl-level-row__n{background:var(--skill-blue-strong);color:var(--on-skill-blue-strong)}
.sl-level-row__t{font:700 15px/22px var(--font-sans);color:var(--ink)}
.sl-level-row__d{font:400 14px/21px var(--font-sans);color:var(--ink)}
.sl-lvl{display:inline-flex;align-items:center;gap:var(--space-2);font-variant-numeric:tabular-nums}
.sl-lvl__steps{display:inline-flex;gap:3px}
.sl-lvl__steps i{width:10px;height:10px;border-radius:3px;background:var(--surface-pressed)}
.sl-lvl__steps i.on{background:var(--skill-blue)}
.sl-lvl--gap .sl-lvl__steps i.on{background:var(--change-coral)}
.sl-lvl__num{font:600 12px/16px var(--font-sans);color:var(--ink-muted);min-width:22px}

/* ===== Pagination ===== */
.sl-pager{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);font:400 13px/20px var(--font-sans);color:var(--ink-muted)}
.sl-pager__count b{color:var(--ink);font-weight:600}
.sl-pager__nav{display:flex;align-items:center;gap:4px}
.sl-pager__btn{display:grid;place-items:center;min-width:36px;height:36px;padding:0 var(--space-2);border:0;border-radius:var(--radius-sm);background:none;color:var(--ink);font:600 13px/20px var(--font-sans);cursor:pointer;font-variant-numeric:tabular-nums}
.sl-pager__btn:hover{background:var(--surface-pressed)}
.sl-pager__btn[aria-current="page"]{background:var(--action);color:var(--on-action)}
.sl-pager__btn:disabled{color:var(--ink-subtle);cursor:not-allowed}
.sl-pager__gap{min-width:24px;text-align:center;color:var(--ink-subtle)}
.sl-pager__btn--arrow{box-shadow:0 0 0 1px var(--border);background:var(--surface-raised)}
@media (max-width:767px){.sl-pager__num,.sl-pager__gap{display:none}}
.sl-pager--bare{padding-left:0;padding-right:0}
@container vp (min-width:768px) and (max-width:1023px){.sl-pager__num,.sl-pager__gap{display:inline-grid}}
@container vp (max-width:767px){.sl-pager__num,.sl-pager__gap{display:none}}
.sl-pager__btn--arrow:first-child .sl-ico{transform:rotate(90deg)}
.sl-pager__btn--arrow:last-child .sl-ico{transform:rotate(-90deg)}

/* ===== DataTablePhone ===== */
.sl-rowcard{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4);background:var(--surface-raised);border-radius:var(--radius-md);box-shadow:0 0 0 1px var(--border),var(--shadow-card)}
.sl-rowcard__head{display:flex;align-items:flex-start;gap:var(--space-3)}
.sl-rowcard__name{font:700 15px/22px var(--font-sans);color:var(--ink)}
.sl-rowcard__email{font:400 13px/18px var(--font-sans);color:var(--ink-muted)}
.sl-rowcard__status{margin-left:auto}
.sl-rowcard__facts{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3);font:400 13px/20px var(--font-sans);color:var(--ink-muted)}
.sl-rowcard__facts b{color:var(--ink);font-weight:500}
.sl-rowcard__actions{display:flex;gap:var(--space-2);margin-top:var(--space-1)}
.sl-rowcard__actions .sl-btn{flex:1}
.sl-rowcard.is-selected{background:var(--skill-blue-tint);box-shadow:0 0 0 1px var(--skill-blue)}
.sl-rowcard.is-attention{background:var(--change-coral-tint)}
.sl-rowcards{display:flex;flex-direction:column;gap:var(--space-2)}
.sl-rowcards__bar{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-1);font:500 13px/20px var(--font-sans);color:var(--ink-muted)}
@container vp (max-width:767px){.sl-rowcards{display:flex}}
@container vp (min-width:768px){.sl-rowcards{display:none}}

/* ===== AdminShell ===== */
.sl-admin{display:grid;grid-template-columns:var(--layout-nav-w) 1fr;grid-template-rows:60px 1fr;min-height:100dvh;background:var(--surface-sunken)}
.sl-admin__nav{grid-row:1 / span 2;display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-4) var(--space-3);background:var(--surface-raised);box-shadow:1px 0 0 var(--border)}
.sl-admin__brand{display:flex;align-items:center;gap:var(--space-2);height:44px;padding:0 var(--space-3);margin-bottom:var(--space-3);font:800 16px/20px var(--font-sans);letter-spacing:-0.8px;color:var(--ink)}
.sl-admin__item{display:flex;align-items:center;gap:var(--space-3);height:40px;padding:0 var(--space-3);border-radius:var(--radius-sm);color:var(--ink-muted);font:500 14px/20px var(--font-sans);text-decoration:none;white-space:nowrap;overflow:hidden}
.sl-admin__item .sl-ico{color:inherit}
.sl-admin__item[aria-current="page"]{background:var(--skill-blue-tint);color:var(--skill-blue-strong);font-weight:600}
.sl-admin__item:hover{background:var(--surface-pressed)}
.sl-admin__group{margin-top:var(--space-4);padding:0 var(--space-3) var(--space-1);font:600 11px/16px var(--font-sans);letter-spacing:.6px;color:var(--ink-subtle);text-transform:uppercase}
.sl-admin__top{display:flex;align-items:center;gap:var(--space-4);padding:0 var(--layout-page-px-pc);background:var(--surface);box-shadow:0 1px 0 var(--border)}
.sl-admin__crumb{font:500 13px/20px var(--font-sans);color:var(--ink-muted)}
.sl-admin__crumb b{color:var(--ink);font-weight:600}
.sl-admin__spacer{flex:1}
.sl-admin__main{padding:var(--space-6) var(--layout-page-px-pc) var(--space-10, 40px)}
.sl-admin__content{max-width:var(--layout-content-max)}
.sl-admin__head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-5)}
.sl-admin__head .sl-top{padding:0}
.sl-admin__actions{display:flex;gap:var(--space-2)}
.sl-admin__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--space-4)}
.sl-col-4{grid-column:span 4}
.sl-col-6{grid-column:span 6}
.sl-col-8{grid-column:span 8}
.sl-col-12{grid-column:span 12}
.sl-admin .sl-row{min-height:var(--layout-row-h-dense);padding:var(--space-2) var(--space-3)}
.sl-admin .sl-table td{height:var(--layout-row-h-dense);padding:var(--space-2) var(--space-3)}
.sl-admin .sl-btn{height:40px}
.sl-admin .sl-btn--sm{height:32px;min-height:32px}
.sl-admin .sl-stat{padding:var(--space-3) var(--space-4)}
@media (min-width:768px) and (max-width:1023px){.sl-admin{grid-template-columns:var(--layout-nav-w-rail) 1fr}}
@media (min-width:768px) and (max-width:1023px){.sl-admin__nav{padding:var(--space-4) var(--space-2);align-items:center}}
@media (min-width:768px) and (max-width:1023px){.sl-admin__brand span,.sl-admin__item span,.sl-admin__group{display:none}}
@media (min-width:768px) and (max-width:1023px){.sl-admin__item{width:44px;justify-content:center;padding:0}}
@media (min-width:768px) and (max-width:1023px){.sl-admin__top,.sl-admin__main{padding-left:var(--layout-page-px-tablet);padding-right:var(--layout-page-px-tablet)}}
@media (min-width:768px) and (max-width:1023px){.sl-admin .sl-row{min-height:var(--layout-row-h-touch)}}
@media (min-width:768px) and (max-width:1023px){.sl-admin .sl-table td{height:52px}}
@media (min-width:768px) and (max-width:1023px){.sl-admin .sl-btn{height:48px}}
@media (min-width:768px) and (max-width:1023px){.sl-col-4{grid-column:span 6}}
@media (min-width:768px) and (max-width:1023px){.sl-col-8{grid-column:span 12}}
@media (max-width:767px){.sl-admin{grid-template-columns:1fr;grid-template-rows:56px 1fr 64px}}
@media (max-width:767px){.sl-admin__nav{grid-row:3;grid-column:1;flex-direction:row;justify-content:space-around;align-items:center;padding:0 var(--space-2);box-shadow:0 -1px 0 var(--border);position:sticky;bottom:0}}
@media (max-width:767px){.sl-admin__brand,.sl-admin__group,.sl-admin__item span{display:none}}
@media (max-width:767px){.sl-admin__item{flex-direction:column;gap:2px;height:56px;padding:0;min-width:56px;justify-content:center}}
@media (max-width:767px){.sl-admin__item--more{display:flex}}
@media (max-width:767px){.sl-admin__top,.sl-admin__main{padding-left:var(--layout-page-px-phone);padding-right:var(--layout-page-px-phone)}}
@media (max-width:767px){.sl-admin__head{flex-direction:column;align-items:stretch}}
@media (max-width:767px){.sl-admin__actions .sl-btn{flex:1}}
@media (max-width:767px){.sl-col-4,.sl-col-6,.sl-col-8{grid-column:span 12}}
@media (max-width:767px){.sl-admin .sl-row{min-height:var(--layout-row-h-touch)}}
@media (max-width:767px){.sl-admin .sl-btn{height:48px}}
@container vp (min-width:768px) and (max-width:1023px){.sl-admin{grid-template-columns:var(--layout-nav-w-rail) 1fr}}
@container vp (min-width:768px) and (max-width:1023px){.sl-admin__nav{padding:var(--space-4) var(--space-2);align-items:center}}
@container vp (min-width:768px) and (max-width:1023px){.sl-admin__brand span,.sl-admin__item span,.sl-admin__group{display:none}}
@container vp (min-width:768px) and (max-width:1023px){.sl-admin__item{width:44px;justify-content:center;padding:0}}
@container vp (min-width:768px) and (max-width:1023px){.sl-admin__top,.sl-admin__main{padding-left:var(--layout-page-px-tablet);padding-right:var(--layout-page-px-tablet)}}
@container vp (min-width:768px) and (max-width:1023px){.sl-admin .sl-row{min-height:var(--layout-row-h-touch)}}
@container vp (min-width:768px) and (max-width:1023px){.sl-admin .sl-table td{height:52px}}
@container vp (min-width:768px) and (max-width:1023px){.sl-admin .sl-btn{height:48px}}
@container vp (min-width:768px) and (max-width:1023px){.sl-col-4{grid-column:span 6}}
@container vp (min-width:768px) and (max-width:1023px){.sl-col-8{grid-column:span 12}}
@container vp (max-width:767px){.sl-admin{grid-template-columns:1fr;grid-template-rows:56px 1fr 64px}}
@container vp (max-width:767px){.sl-admin__nav{grid-row:3;grid-column:1;flex-direction:row;justify-content:space-around;align-items:center;padding:0 var(--space-2);box-shadow:0 -1px 0 var(--border);position:sticky;bottom:0}}
@container vp (max-width:767px){.sl-admin__brand,.sl-admin__group,.sl-admin__item span{display:none}}
@container vp (max-width:767px){.sl-admin__item{flex-direction:column;gap:2px;height:56px;padding:0;min-width:56px;justify-content:center}}
@container vp (max-width:767px){.sl-admin__top,.sl-admin__main{padding-left:var(--layout-page-px-phone);padding-right:var(--layout-page-px-phone)}}
@container vp (max-width:767px){.sl-admin__head{flex-direction:column;align-items:stretch}}
@container vp (max-width:767px){.sl-admin__actions .sl-btn{flex:1}}
@container vp (max-width:767px){.sl-col-4,.sl-col-6,.sl-col-8{grid-column:span 12}}
@container vp (max-width:767px){.sl-admin .sl-row{min-height:var(--layout-row-h-touch)}}
@container vp (max-width:767px){.sl-admin .sl-btn{height:48px}}
.sl-admin__top .sl-field{flex:0 1 320px}
.sl-admin__top .sl-field__box{height:40px}
@media (max-width:767px){.sl-admin__crumb,.sl-admin__top .sl-topbar__step{display:none}}
@media (max-width:767px){.sl-admin__top .sl-field{flex:1 1 auto}}
@media (max-width:767px){.sl-admin__actions{display:grid;grid-template-columns:1fr 1fr}}
@media (max-width:767px){.sl-admin__grid{gap:var(--space-3)}}
@container vp (max-width:767px){.sl-admin__crumb,.sl-admin__top .sl-topbar__step{display:none}}
@container vp (max-width:767px){.sl-admin__top .sl-field{flex:1 1 auto}}
@container vp (max-width:767px){.sl-admin__actions{display:grid;grid-template-columns:1fr 1fr}}
@container vp (max-width:767px){.sl-admin__grid{gap:var(--space-3)}}
.sl-admin__item{position:relative;height:36px;border-radius:var(--radius-sm)}
.sl-admin__item[aria-current="page"]::before{content:"";position:absolute;left:0;top:50%;width:6px;height:18px;margin-top:-9px;border-radius:3px;background:var(--skill-blue)}
.sl-admin__kbd{margin-left:auto;font:500 11px/16px var(--font-sans);color:var(--ink-subtle);padding:0 6px;border-radius:4px;box-shadow:0 0 0 1px var(--border)}
.sl-admin__item:not(:hover) .sl-admin__kbd{opacity:0}
.sl-cmdk{display:flex;align-items:center;gap:var(--space-2);height:36px;padding:0 var(--space-3);border-radius:var(--radius-sm);background:var(--surface-sunken);color:var(--ink-subtle);font:400 13px/20px var(--font-sans);box-shadow:0 0 0 1px var(--border);min-width:280px;cursor:pointer}
.sl-cmdk kbd{margin-left:auto;font:500 11px/16px var(--font-sans);color:var(--ink-subtle);padding:0 6px;border-radius:4px;background:var(--surface-raised);box-shadow:0 0 0 1px var(--border)}
.sl-admin__head{margin-bottom:var(--space-3)}
.sl-views{display:flex;align-items:center;gap:var(--space-1);margin-bottom:var(--space-3);box-shadow:inset 0 -1px 0 var(--border)}
.sl-views__tab{height:36px;padding:0 var(--space-3);border:0;background:none;color:var(--ink-muted);font:500 13px/20px var(--font-sans);cursor:pointer;position:relative}
.sl-views__tab[aria-selected="true"]{color:var(--ink);font-weight:600}
.sl-views__tab[aria-selected="true"]::after{content:"";position:absolute;left:var(--space-3);right:var(--space-3);bottom:0;height:2px;border-radius:1px;background:var(--skill-blue)}
.sl-views__tab .sl-tab__count{margin-left:6px;vertical-align:1px}
.sl-views__add{margin-left:auto;color:var(--ink-subtle)}
.sl-toolbar{display:flex;align-items:center;gap:var(--space-2);min-height:44px;padding:var(--space-1) 0}
.sl-filter{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 var(--space-2) 0 var(--space-3);border-radius:var(--radius-pill);background:var(--skill-blue-tint);color:var(--skill-blue-strong);font:500 12px/16px var(--font-sans)}
.sl-filter b{font-weight:700}
.sl-filter__x{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:none;border:0;color:inherit;cursor:pointer}
.sl-filter--add{background:none;color:var(--ink-muted);box-shadow:0 0 0 1px var(--border);cursor:pointer}
.sl-toolbar__sort{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 var(--space-2);border:0;background:none;color:var(--ink-muted);font:500 12px/16px var(--font-sans);cursor:pointer}
.sl-toolbar__density{display:inline-flex;gap:2px;padding:2px;border-radius:var(--radius-sm);box-shadow:0 0 0 1px var(--border)}
.sl-toolbar__density button{width:28px;height:24px;border:0;border-radius:4px;background:none;color:var(--ink-subtle);cursor:pointer;display:grid;place-items:center}
.sl-toolbar__density button[aria-pressed="true"]{background:var(--surface-pressed);color:var(--ink)}
.sl-bulk{display:flex;align-items:center;gap:var(--space-3);min-height:44px;padding:0 var(--space-3);border-radius:var(--radius-sm);background:var(--skill-blue-tint);color:var(--ink);font:600 13px/20px var(--font-sans)}
.sl-bulk__count{color:var(--skill-blue-strong)}
.sl-bulk__actions{display:flex;gap:var(--space-2);margin-left:var(--space-2)}
.sl-bulk__danger{margin-left:auto}
.sl-bulk .sl-btn--sm{height:30px;min-height:30px}
.sl-grid{border-radius:0;box-shadow:inset 0 1px 0 var(--border),inset 0 -1px 0 var(--border);background:var(--surface);width:100%;border-collapse:separate;border-spacing:0;font:400 13px/18px var(--font-sans);color:var(--ink)}
.sl-grid th{position:sticky;top:0;z-index:1;height:36px;padding:0 var(--space-3);text-align:left;font:500 12px/16px var(--font-sans);color:var(--ink-muted);background:var(--surface);box-shadow:inset 0 -1px 0 var(--border);white-space:nowrap}
.sl-grid td{height:40px;padding:0 var(--space-3);box-shadow:inset 0 -1px 0 var(--border);vertical-align:middle}
.sl-grid--compact td{height:36px}
.sl-grid tr:hover td{background:var(--surface-sunken)}
.sl-grid tr.is-selected td{background:var(--skill-blue-tint)}
.sl-grid tr.is-attention td{background:var(--change-coral-tint)}
.sl-grid .num{text-align:right;font-variant-numeric:tabular-nums}
.sl-grid .sel{width:36px;padding-right:0}
.sl-grid .sel .sl-check{width:18px;height:18px;border-radius:5px;opacity:.55}
.sl-grid .sel .sl-check[aria-checked="true"],.sl-grid .sel .sl-check[aria-checked="mixed"],.sl-grid tr:hover .sel .sl-check{opacity:1}
.sl-grid .sel .sl-check svg{width:12px;height:12px}
.sl-grid .name{font-weight:500}
.sl-grid .sub{color:var(--ink-muted);font-size:12px}
.sl-grid .tail{width:40px;text-align:right}
.sl-grid__menu{display:inline-grid;place-items:center;width:28px;height:28px;border:0;border-radius:6px;background:none;color:var(--ink-subtle);cursor:pointer}
.sl-grid__menu:hover{background:var(--surface-pressed);color:var(--ink)}
.sl-grid tfoot td{position:sticky;bottom:0;height:36px;background:var(--surface);font:500 12px/16px var(--font-sans);color:var(--ink-muted);box-shadow:inset 0 1px 0 var(--border)}
.sl-grid tfoot .num{color:var(--ink)}
.sl-grid .sl-chip{height:22px;padding:0 var(--space-2);font-size:11px}
.sl-grid__link{color:var(--skill-blue-strong);text-decoration:none}
.sl-grid__link:hover{text-decoration:underline;text-underline-offset:3px}
.sl-drawer{position:absolute;top:0;right:0;bottom:0;width:440px;background:var(--surface-overlay);box-shadow:-1px 0 0 var(--border),var(--shadow-sheet);display:flex;flex-direction:column}
.sl-drawer__head{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);box-shadow:inset 0 -1px 0 var(--border)}
.sl-drawer__title{font:700 16px/22px var(--font-sans);letter-spacing:-0.3px;color:var(--ink)}
.sl-drawer__body{flex:1;overflow:auto;padding:var(--space-4) var(--space-5)}
.sl-props{display:grid;grid-template-columns:120px 1fr;row-gap:var(--space-2);column-gap:var(--space-3);font:400 13px/20px var(--font-sans)}
.sl-props dt{color:var(--ink-muted)}
.sl-props dd{margin:0;color:var(--ink)}
.sl-props dd.is-empty{color:var(--ink-subtle);font-style:italic}
.sl-admin__main{padding:var(--space-5) var(--layout-page-px-pc) var(--space-8)}
.sl-grid tr.is-focus td{background:var(--skill-blue-tint)}
.sl-grid tr.is-focus td:first-child{box-shadow:inset 3px 0 0 var(--focus-lime),inset 0 -1px 0 var(--border)}
.sl-admin__body{display:grid;grid-template-columns:minmax(0,1fr) auto;min-height:0}
.sl-admin__body .sl-admin__main{min-width:0;grid-column:1;grid-row:1}
.sl-admin__body .sl-drawer{position:relative;inset:auto;grid-row:1;grid-column:2}
.sl-admin__main--bare{padding-bottom:0}
.sl-views__scroll{overflow-x:auto;scrollbar-width:none}
@media (min-width:768px) and (max-width:1023px){.sl-drawer{width:360px}}
@media (min-width:768px) and (max-width:1023px){.sl-cmdk{min-width:0;width:40px;padding:0;justify-content:center}}
@media (min-width:768px) and (max-width:1023px){.sl-cmdk span,.sl-cmdk kbd{display:none}}
@media (min-width:768px) and (max-width:1023px){.sl-admin__kbd{display:none}}
@container vp (min-width:768px) and (max-width:1023px){.sl-drawer{width:360px}}
@container vp (min-width:768px) and (max-width:1023px){.sl-cmdk{min-width:0;width:40px;padding:0;justify-content:center}}
@container vp (min-width:768px) and (max-width:1023px){.sl-cmdk span,.sl-cmdk kbd{display:none}}
@container vp (min-width:768px) and (max-width:1023px){.sl-admin__kbd{display:none}}
@media (max-width:767px){.sl-grid{display:none}}
@media (max-width:767px){.sl-drawer{position:fixed;inset:auto 0 0 0;width:auto;max-height:80vh;border-radius:var(--radius-lg) var(--radius-lg) 0 0}}
@media (max-width:767px){.sl-cmdk{min-width:0;flex:1}}
@media (max-width:767px){.sl-cmdk kbd,.sl-admin__kbd{display:none}}
@media (max-width:767px){.sl-toolbar{flex-wrap:wrap}}
@media (max-width:767px){.sl-toolbar__density{display:none}}
@media (max-width:767px){.sl-views{overflow-x:auto;scrollbar-width:none}}
@media (max-width:767px){.sl-views__tab{white-space:nowrap}}
@container vp (max-width:767px){.sl-grid{display:none}}
@container vp (max-width:767px){.sl-drawer{position:absolute;inset:auto 0 0 0;width:auto;max-height:80%;border-radius:var(--radius-lg) var(--radius-lg) 0 0}}
@container vp (max-width:767px){.sl-cmdk{min-width:0;flex:1}}
@container vp (max-width:767px){.sl-cmdk kbd,.sl-admin__kbd{display:none}}
@container vp (max-width:767px){.sl-toolbar{flex-wrap:wrap}}
@container vp (max-width:767px){.sl-toolbar__density{display:none}}
@container vp (max-width:767px){.sl-views{overflow-x:auto;scrollbar-width:none}}
@container vp (max-width:767px){.sl-views__tab{white-space:nowrap}}
.sl-drawer{width:400px}
.sl-admin__body .sl-admin__main{padding-left:var(--space-6);padding-right:var(--space-6)}
.sl-grid td,.sl-grid th{white-space:nowrap}
.sl-grid td:nth-child(2){white-space:normal;min-width:160px}
.sl-admin__head .sl-top__title{font-size:28px;line-height:36px;letter-spacing:-1px}
.sl-admin__head .sl-top__desc{margin-top:2px}
.sl-admin__actions .sl-btn{white-space:nowrap}
.sl-cmdk span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-admin__menu,.sl-admin__ptitle,.sl-admin__guide{display:none}
.sl-admin__guide{font:500 13px/20px var(--font-sans);color:var(--skill-blue-strong);text-decoration:none}
.sl-admin__ptitle{font:700 16px/22px var(--font-sans);letter-spacing:-0.3px;color:var(--ink)}
@media (max-width:767px){.sl-admin{grid-template-rows:56px 1fr}}
@media (max-width:767px){.sl-admin__nav{display:none}}
@media (max-width:767px){.sl-admin__menu,.sl-admin__ptitle,.sl-admin__guide{display:inline-flex}}
@media (max-width:767px){.sl-admin__menu{width:40px;padding:0}}
@media (max-width:767px){.sl-admin__top{gap:var(--space-3)}}
@media (max-width:767px){.sl-admin__top .sl-cmdk{flex:0 0 40px;width:40px;padding:0;justify-content:center}}
@media (max-width:767px){.sl-admin__top .sl-cmdk span{display:none}}
@media (max-width:767px){.sl-admin__top .sl-btn[aria-label="알림"]{display:none}}
@media (max-width:767px){.sl-admin__head .sl-admin__actions{position:fixed;left:0;right:0;bottom:0;display:flex;padding:var(--space-3) var(--space-4) var(--space-4);background:var(--surface);box-shadow:0 -1px 0 var(--border)}}
@media (max-width:767px){.sl-admin__head .sl-admin__actions .sl-btn--secondary{display:none}}
@media (max-width:767px){.sl-admin__head .sl-admin__actions .sl-btn{height:var(--space-14);width:100%}}
@media (max-width:767px){.sl-admin__main{padding-bottom:calc(var(--space-14) + var(--space-8))}}
@container vp (max-width:767px){.sl-admin{grid-template-rows:56px 1fr}}
@container vp (max-width:767px){.sl-admin__nav{display:none}}
@container vp (max-width:767px){.sl-admin__menu,.sl-admin__ptitle,.sl-admin__guide{display:inline-flex}}
@container vp (max-width:767px){.sl-admin__menu{width:40px;padding:0}}
@container vp (max-width:767px){.sl-admin__top{gap:var(--space-3)}}
@container vp (max-width:767px){.sl-admin__top .sl-cmdk{flex:0 0 40px;width:40px;padding:0;justify-content:center}}
@container vp (max-width:767px){.sl-admin__top .sl-cmdk span{display:none}}
@container vp (max-width:767px){.sl-admin__top .sl-btn[aria-label="알림"]{display:none}}
@container vp (max-width:767px){.sl-admin__head .sl-admin__actions{position:absolute;left:0;right:0;bottom:0;display:flex;padding:var(--space-3) var(--space-4) var(--space-4);background:var(--surface);box-shadow:0 -1px 0 var(--border)}}
@container vp (max-width:767px){.sl-admin__head .sl-admin__actions .sl-btn--secondary{display:none}}
@container vp (max-width:767px){.sl-admin__head .sl-admin__actions .sl-btn{height:var(--space-14);width:100%}}
@container vp (max-width:767px){.sl-admin__main{padding-bottom:calc(var(--space-14) + var(--space-8))}}
@media (max-width:767px){.sl-admin__body .sl-drawer{position:fixed;inset:auto 0 0 0;grid-column:1;grid-row:1;width:auto;max-height:80vh;z-index:2}}
@media (max-width:767px){.sl-admin__body .sl-admin__main{padding-left:var(--layout-page-px-phone);padding-right:var(--layout-page-px-phone)}}
@container vp (max-width:767px){.sl-admin__body .sl-drawer{position:absolute;inset:auto 0 0 0;grid-column:1;grid-row:1;width:auto;max-height:80%;z-index:2}}
@container vp (max-width:767px){.sl-admin__body .sl-admin__main{padding-left:var(--layout-page-px-phone);padding-right:var(--layout-page-px-phone)}}
.sl-grid th{height:40px}
.sl-grid--compact th{height:36px}
.sl-grid th.sortable{cursor:pointer}
.sl-grid th .sl-grid__sort{display:inline-block;width:12px;height:12px;margin-left:4px;vertical-align:-1px;opacity:0;transition:opacity var(--duration-fast,120ms)}
.sl-grid th.sortable:hover .sl-grid__sort{opacity:.5}
.sl-grid th.is-sorted{color:var(--ink)}
.sl-grid th.is-sorted .sl-grid__sort{opacity:1}
.sl-grid th.is-sorted[aria-sort="ascending"] .sl-grid__sort{transform:rotate(180deg)}
.sl-grid.is-bulk .sl-grid__menu{opacity:.35;pointer-events:none}
.sl-bulk__all{font:500 13px/20px var(--font-sans);color:var(--skill-blue-strong);background:none;border:0;cursor:pointer;padding:0}
.sl-drawer__title{text-wrap:balance}
.sl-admin__body{grid-column:2;grid-row:2}
@media (max-width:767px){.sl-admin__body{grid-template-columns:1fr;grid-column:1;grid-row:2}}
@container vp (max-width:767px){.sl-admin__body{grid-template-columns:1fr;grid-column:1;grid-row:2}}
@media (max-width:767px){.sl-views{overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);padding-right:40px}}
@media (max-width:767px){.sl-views::-webkit-scrollbar{display:none}}
@media (max-width:767px){.sl-views__add{margin-left:var(--space-2)}}
@container vp (max-width:767px){.sl-views{overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);padding-right:40px}}
@container vp (max-width:767px){.sl-views::-webkit-scrollbar{display:none}}
@container vp (max-width:767px){.sl-views__add{margin-left:var(--space-2)}}

/* ===== StatusBadge ===== */
/* 출처: 8판 .tag와 .mk(13 600 알약, 안쪽 4 9). 톤은 다섯(기본, 진행, 확인 필요, 끝남, 멈춤) + 앞 모양. 8판 꼬리표는 이 톤에 대응(README). 라임 채움은 쓰지 않음 */
.sl-status{display:inline-flex;align-items:center;gap:6px;padding:var(--space-1) 9px;border-radius:var(--radius-pill);background:var(--divider);font:600 13px/20px var(--font-sans);color:#3f443f;white-space:nowrap}
.sl-status i{width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor}
.sl-status svg{width:12px;height:12px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sl-status--active{background:var(--skill-blue-tint);color:var(--skill-blue-strong)}
.sl-status--active i{background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
.sl-status--attention{background:var(--change-coral-tint);color:var(--change-coral-strong)}
.sl-status--attention i{background:currentColor}
.sl-status--done{background:var(--success-tint);color:var(--success)}
.sl-status--done i{width:10px;height:6px;border-radius:0;box-shadow:none;border:solid currentColor;border-width:0 0 2px 2px;transform:rotate(-45deg) translate(1px,-1px)}
.sl-status--paused{background:var(--divider);color:var(--ink-muted)}
.sl-status--paused i{width:8px;height:2px;border-radius:1px;background:currentColor;box-shadow:none}

/* ===== Banner ===== */
/* 출처: 8판 .note(연보라 바탕 둥글기 12, 14 16, 14, 굵은 글자 보라), .note.g(회색), .note.w(산호 옅은 바탕), .ai(렌지 안내: 둥글기 14, 머리 13 보라 600 + 렌즈 점) */
.sl-banner{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3-5) var(--space-4);border-radius:var(--radius-md);background:var(--skill-blue-tint);font:400 14px/21px var(--font-sans);color:var(--ink)}
.sl-banner b{font-weight:700;color:var(--skill-blue-strong)}
.sl-banner>.sl-btn{flex:none;margin-left:auto}
.sl-banner--muted{background:var(--canvas);color:var(--ink-muted)}
.sl-banner--muted b{color:var(--ink)}
.sl-banner--warn,.sl-banner--attention{background:var(--change-coral-tint)}
.sl-banner--warn b,.sl-banner--attention b{color:var(--change-coral-strong)}
.sl-banner--done{background:var(--success-tint)}
.sl-banner--done b{color:var(--success)}
.sl-banner--locked{background:var(--surface-raised);box-shadow:0 0 0 1px var(--border)}
.sl-banner--locked b{color:var(--ink)}
.sl-banner--ai{display:block;border-radius:var(--radius-tile)}
.sl-banner__head{display:flex;align-items:center;gap:6px;margin-bottom:var(--space-1);font:600 13px/20px var(--font-sans);color:var(--skill-blue-strong)}
.sl-banner__foot{margin-top:6px;font:400 13px/20px var(--font-sans);color:var(--ink-muted)}

/* ===== Menu ===== */
.sl-menu{display:flex;flex-direction:column;min-width:180px;padding:6px;border-radius:var(--radius-md);background:var(--surface-overlay);box-shadow:0 0 0 1px var(--border),var(--shadow-sheet)}
.sl-menu__item{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:36px;padding:0 10px;border:0;border-radius:var(--radius-sm);background:none;font:500 13px/20px var(--font-sans);color:var(--ink);text-align:left;cursor:pointer}
.sl-menu__item:hover{background:var(--surface-pressed)}
.sl-menu__item small{font-size:12px;color:var(--ink-subtle)}
.sl-menu__item[aria-disabled="true"]{color:var(--ink-subtle);cursor:not-allowed}
.sl-menu__item--danger{color:var(--danger)}
.sl-menu__sep{border:0;height:1px;margin:4px 0;background:var(--border)}
.sl-menu{width:max-content;align-self:flex-start}


/* ===== Delta ===== */
.sl-delta{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--radius-sm);background:var(--surface-sunken);font:600 12px/16px var(--font-sans);color:var(--ink-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.sl-delta--short{background:var(--change-coral-tint);color:var(--change-coral-strong)}
.sl-delta--met{background:var(--success-tint);color:var(--success)}
.sl-delta--up{color:var(--success)}
.sl-delta--down{color:var(--change-coral-strong)}

/* ===== ScoreBreakdown ===== */
.sl-score-break{display:flex;flex-direction:column;gap:10px;max-width:420px;padding:var(--space-5);border-radius:var(--radius-lg);background:var(--surface-raised);box-shadow:0 0 0 1px var(--border),var(--shadow-card)}
.sl-score-break__head{display:flex;align-items:center;gap:var(--space-4);margin-bottom:6px;font:400 14px/20px var(--font-sans);color:var(--ink-muted)}
.sl-score-break__head small{font-size:12px;color:var(--ink-subtle)}
.sl-score-break__total{font:800 48px/1 var(--font-sans);letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.sl-score-break__row{display:grid;grid-template-columns:110px 1fr 56px;align-items:center;gap:var(--space-3);font:400 13px/20px var(--font-sans);color:var(--ink)}
.sl-score-break__row i{--v:0;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--skill-blue) calc(var(--v)*100%),var(--track) 0)}
.sl-score-break__row i.p50{--v:.5}
.sl-score-break__row i.p60{--v:.6}
.sl-score-break__row i.p74{--v:.74}
.sl-score-break__row em{font-style:normal;text-align:right;color:var(--ink-muted);font-variant-numeric:tabular-nums}

/* ===== Heatmap ===== */
/* 단색 순차(chart-seq), 칸 안 숫자 늘, 미달은 모서리 표시, 데이터 없음은 회색 빗금 + 대시, 5명 미만은 잠금 + "인원 부족", 가진 사람 0명(공백스킬)은 산호 테(P4) */
.sl-heat{border-collapse:separate;border-spacing:3px;font:400 13px/18px var(--font-sans);color:var(--ink)}
.sl-heat th{padding:6px 10px;font-weight:600;color:var(--ink-muted);text-align:left;white-space:nowrap}
.sl-heat thead th{text-align:center}
.sl-heat td{position:relative;min-width:72px;height:36px;padding:0 8px;border-radius:6px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums;background:var(--chart-seq-1)}
.sl-heat td.l2{background:var(--chart-seq-2)}
.sl-heat td.l3{background:var(--chart-seq-3)}
.sl-heat td.l4{background:var(--chart-seq-6);color:#fff}
.sl-heat td.l5{background:var(--chart-seq-7);color:#fff}
.sl-heat td.is-short::after{content:"";position:absolute;top:0;right:0;border-style:solid;border-width:0 10px 10px 0;border-color:transparent var(--change-coral-strong) transparent transparent;border-top-right-radius:6px}
.sl-heat td.is-few{background:var(--surface-sunken);font-weight:500;font-size:12px;color:var(--ink-muted)}
.sl-heat td.is-few svg{width:12px;height:12px;margin-right:3px;vertical-align:-1px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sl-heat td.is-none{background:repeating-linear-gradient(135deg,var(--surface-sunken) 0 4px,var(--track) 4px 8px);font-weight:500;color:var(--ink-muted)}
.sl-heat td.is-zero{background:var(--surface-raised);box-shadow:inset 0 0 0 1.5px var(--change-coral-strong);color:var(--change-coral-strong);cursor:pointer}
.sl-heat td[aria-selected="true"]{outline:3px solid var(--focus-ring);outline-offset:1px}
.sl-heat:focus-visible{outline:3px solid var(--focus-ring);outline-offset:4px;border-radius:var(--radius-md)}

/* ===== Legend ===== */
.sl-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font:400 12px/16px var(--font-sans);color:var(--ink-muted)}
.sl-legend span{display:inline-flex;align-items:center;gap:6px}
.sl-legend i{display:inline-block;width:14px;height:14px;border-radius:3px}
.sl-legend__ramp i{width:56px;background:linear-gradient(90deg,var(--chart-seq-1),var(--chart-seq-3),var(--chart-seq-6),var(--chart-seq-7))}
.sl-legend__short{background:linear-gradient(225deg,var(--change-coral-strong) 40%,var(--chart-seq-2) 40%)}
.sl-legend__few{background:var(--surface-sunken);box-shadow:inset 0 0 0 1px var(--border)}
.sl-legend__zero{background:var(--surface-raised);box-shadow:inset 0 0 0 1.5px var(--change-coral-strong)}
.sl-legend__none{background:repeating-linear-gradient(135deg,var(--surface-sunken) 0 3px,var(--track) 3px 6px)}

/* ===== SkillChip ===== */
.sl-skillchip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 4px 0 12px;border-radius:var(--radius-pill);background:var(--surface-raised);box-shadow:0 0 0 1px var(--border);font:500 14px/20px var(--font-sans);color:var(--ink)}
.sl-skillchip__name{padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer}
.sl-skillchip em{font-style:normal;font-size:12px;color:var(--ink-subtle)}
.sl-skillchip small{padding:0 6px;border-radius:var(--radius-pill);background:var(--skill-blue-tint);font:600 11px/18px var(--font-sans);color:var(--skill-blue-strong)}
.sl-skillchip__act{display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:50%;background:none;font:400 18px/1 var(--font-sans);color:var(--ink-muted);cursor:pointer}
.sl-skillchip__act:hover{background:var(--surface-pressed)}
.sl-skillchip.is-out{background:var(--surface-sunken);box-shadow:none;color:var(--ink-muted)}
.sl-skillchip.is-out small{background:var(--track);color:var(--ink-muted)}
@media (max-width:767px){.sl-skillchip{min-height:40px}}
@media (max-width:767px){.sl-skillchip__act{width:36px;height:36px}}

/* ===== SkillDetail ===== */
.sl-detail{display:flex;flex-direction:column;gap:var(--space-3);max-width:400px;padding:var(--space-5);border-radius:var(--radius-lg);background:var(--surface-raised);box-shadow:0 0 0 1px var(--border),var(--shadow-sheet)}
.sl-detail h3{display:flex;align-items:center;gap:var(--space-2);margin:0;font:700 20px/28px var(--font-sans);color:var(--ink)}
.sl-detail__def{margin:0;font:400 14px/22px var(--font-sans);color:var(--ink-muted)}
.sl-detail__lv b{display:block;margin-bottom:6px;font:700 14px/20px var(--font-sans)}
.sl-diff{display:grid;grid-template-columns:36px 1fr;gap:4px 8px;padding:10px 12px;border-radius:var(--radius-sm);background:var(--surface-sunken);font:400 13px/20px var(--font-sans);color:var(--ink)}
.sl-diff span{font-size:12px;color:var(--ink-subtle)}
.sl-diff p{margin:0}
.sl-diff strong{font-weight:700;background:var(--skill-blue-tint)}

/* ===== ReviewPanel ===== */
/* 0.17 시험: 실무자가 고른 레벨은 잠긴 글(바꾸는 입력 없음), 관리자 행동은 바뀐 것마다 반영과 미반영, 끝에 검토완료뿐(P3). 수정 전후는 세 칸 */
.sl-review{display:flex;flex-direction:column;gap:var(--space-4);max-width:560px;padding:var(--space-6);border-radius:var(--radius-lg);background:var(--surface-raised);box-shadow:0 0 0 1px var(--border),var(--shadow-sheet)}
.sl-review__head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);font:400 13px/20px var(--font-sans);color:var(--ink-muted)}
.sl-review__head b{font:700 20px/28px var(--font-sans);color:var(--ink)}
.sl-review__item{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3) 0;border-bottom:1px solid var(--divider);font:400 14px/21px var(--font-sans);color:var(--ink)}
.sl-review__item:has(+ .sl-review__foot){border-bottom:0}
.sl-review__title{display:flex;align-items:center;gap:var(--space-2);font-weight:600}
.sl-review__lock{display:inline-flex;align-items:center;gap:4px;margin-left:auto;font:400 13px/20px var(--font-sans);color:var(--ink-muted)}
.sl-review__lock b{color:var(--ink);font-weight:700}
.sl-review__lock svg{width:14px;height:14px}
.sl-review__diff{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}
.sl-review__col{padding:var(--space-2-5) var(--space-3);border-radius:var(--radius-md);background:var(--canvas);font:400 13px/20px var(--font-sans);color:var(--ink)}
.sl-review__col small{display:block;margin-bottom:2px;font:600 12px/16px var(--font-sans);color:var(--ink-muted)}
.sl-review__col .is-same{color:var(--ink-subtle)}
.sl-review__col ins{text-decoration:underline;text-decoration-color:var(--skill-blue);text-underline-offset:3px;background:var(--skill-blue-tint)}
.sl-review__col del{color:var(--ink-muted)}
.sl-review__acts{display:flex;align-items:center;gap:var(--space-2);justify-content:flex-end}
.sl-review__acts .sl-btn--link{margin-right:auto}
.sl-review__item.is-done .sl-review__acts{justify-content:flex-start}
.sl-review__foot{display:flex;justify-content:flex-end;gap:var(--space-2);padding-top:var(--space-2);border-top:1px solid var(--divider)}
@media (max-width:767px){.sl-review__diff{grid-template-columns:1fr}}
@container vp (max-width:767px){.sl-review__diff{grid-template-columns:1fr}}

/* ===== Disclosure ===== */
.sl-disclosure{border-radius:var(--radius-md);background:var(--surface-raised);box-shadow:0 0 0 1px var(--border)}
.sl-disclosure summary{display:flex;align-items:center;min-height:44px;padding:0 var(--space-4);font:600 14px/20px var(--font-sans);color:var(--ink);cursor:pointer;list-style:none}
.sl-disclosure summary::after{content:"";margin-left:auto;width:8px;height:8px;border:solid var(--ink-muted);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.sl-disclosure[open] summary::after{transform:rotate(-135deg)}
.sl-disclosure p{margin:0;padding:0 var(--space-4) var(--space-4);font:400 13px/20px var(--font-sans);color:var(--ink-muted)}
.sl-tip{position:relative;padding:0;border:0;background:none;font:inherit;color:inherit;text-decoration:underline dotted;text-underline-offset:3px;cursor:help}
.sl-tip span{display:none;position:absolute;left:0;top:calc(100% + 6px);z-index:30;width:240px;padding:10px 12px;border-radius:var(--radius-sm);background:var(--ink);font:400 12px/18px var(--font-sans);color:var(--on-action);text-align:left;text-decoration:none}
.sl-tip:focus span,.sl-tip:hover span{display:block}
.sl-tipline{margin:0;font:400 14px/20px var(--font-sans);color:var(--ink)}

/* ===== AskRenji ===== */
/* 0.17 시험: 렌지는 범위와 이유만. 본인 선택(흰 카드, 보라 링)과 렌지 참고(바탕색 상자, 렌즈 점)를 모양으로 나눔(P3) */
.sl-ask{display:inline-flex;align-items:center;gap:var(--space-2);width:max-content;align-self:flex-start;min-height:36px;padding:0 var(--space-3-5) 0 var(--space-2-5);border:0;border-radius:var(--radius-pill);background:var(--skill-blue-tint);font:600 13px/20px var(--font-sans);color:var(--skill-blue-strong);cursor:pointer}
.sl-ask__lens{width:16px;height:16px;flex:none;background:url(../assets/Logo/skilllens-mark.svg) center/contain no-repeat}
.sl-ask__answer{padding:var(--space-3-5) var(--space-4);border-radius:var(--radius-tile);background:var(--canvas);font:400 14px/21px var(--font-sans);color:var(--ink)}
.sl-ask__head{display:flex;align-items:center;gap:6px;margin-bottom:var(--space-1);font:600 13px/20px var(--font-sans);color:var(--skill-blue-strong)}
.sl-ask__range{font-weight:800;font-variant-numeric:tabular-nums}
.sl-ask__answer p{margin:0}
.sl-ask__answer b{font-weight:700}
.sl-ask__foot{margin-top:6px;font:400 13px/20px var(--font-sans);color:var(--ink-muted)}

/* ===== Composer ===== */
.sl-composer{display:flex;flex-direction:column;gap:var(--space-4);max-width:440px;padding:var(--space-5);border-radius:var(--radius-lg);background:var(--surface-raised);box-shadow:0 0 0 1px var(--border),var(--shadow-sheet)}
.sl-composer__to{display:flex;flex-direction:column;gap:2px;font:400 13px/20px var(--font-sans);color:var(--ink-muted)}
.sl-composer__to b{font:700 16px/24px var(--font-sans);color:var(--ink)}
.sl-composer__preview{padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--surface-sunken);font:400 14px/22px var(--font-sans);color:var(--ink)}
.sl-composer__preview small{font-size:12px;color:var(--ink-subtle)}
.sl-composer__preview p{margin:4px 0 0}

/* ===== Keyframes ===== */
/* 등장: 아래 12px, 흐림 없음. 단계 이동: 옆 24px, 흐림 없음(8판 pgfw, pgbk에서 흐림만 뺌) */
@keyframes sl-reveal{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes sl-page-in{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes sl-page-back-in{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
@keyframes sl-page-out{from{opacity:1}to{opacity:0}}
@keyframes sl-pop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes sl-sheet-up{from{transform:translateY(100%)}to{transform:none}}
@keyframes sl-sheet-in{from{transform:translateX(100%)}to{transform:none}}
@keyframes sl-scrim-in{from{opacity:0}to{opacity:1}}
@keyframes sl-dialog-in{from{opacity:0;transform:translate(-50%,calc(-50% + 12px))}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes sl-toast-in{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes sl-bar{from{width:0}to{width:var(--w)}}
@keyframes sl-shine{from{left:-40%;opacity:1}to{left:120%;opacity:1}}
@keyframes sl-shimmer{from{background-position:-200% 0}to{background-position:200% 0}}
@keyframes sl-tick{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes sl-dot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-5px)}}
@keyframes sl-sweep{0%,100%{transform:translateX(-8px)}50%{transform:translateX(8px)}}
@keyframes sl-breathe{0%,100%{transform:scale(1)}50%{transform:translate3d(1.5%,-1.5%,0) scale(1.04)}}
@keyframes sl-glow{from{opacity:0}to{opacity:1}}
@keyframes sl-spin-step{to{transform:rotate(360deg)}}


/* ===== SaveStatus ===== */
/* 0.17 시험(외부 탐색 반영): 자기진단 저장 상태 한 줄. 바꾼 뒤 1~2초에 저장, 다음 스킬로 갈 때 바로 저장. 저장 전에는 완료로 보이지 않음 */
.sl-save{display:inline-flex;align-items:center;gap:6px;font:400 13px/20px var(--font-sans);color:var(--ink-muted);font-variant-numeric:tabular-nums}
.sl-save svg{width:14px;height:14px}
.sl-save.is-saving svg{animation:sl-spin-step 1s steps(8) infinite}
.sl-save.is-error{color:var(--danger)}
.sl-save.is-error .sl-btn--link{color:var(--danger);font-size:13px}