/* 웹 디자인 트렌드 견본 — 다크 섬. 견본 칸의 색은 다른 사이트의 화면을 '흉내 낸 그림'이라 사이트 토큰이 아니다
 * (래칫 상한 scripts/lib/theme-ratchet.test.js, 테마 시험 SKIP). 페이지 틀의 색은 assets/design-trends.css 에서 토큰으로만.
 * 정지 그림은 빌드가 그리고(scripts/lib/design-specimens.js), 움직임·조작은 assets/design-specimens.js 가 붙인다. */
.sp{position:relative;overflow:hidden;isolation:isolate;color:#f4f1ec}
.sp button:disabled,.sp-ctl :disabled{cursor:default}
.sp-pending{position:absolute;inset:0;background:repeating-linear-gradient(135deg,#0c0d10 0 10px,#111317 10px 20px)}
/* 화면 밖·숨은 탭 — 스크립트가 붙이는 is-idle 동안 CSS 움직임을 멈춘다 */
.sp.is-idle,.sp.is-idle *,.sp.is-idle *::before,.sp.is-idle *::after{animation-play-state:paused!important}
/* 정지 그림 위 캔버스 — 스크립트가 첫 프레임을 그리면(is-drawn) 정지 그림을 감춘다 */
.sp canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.sp .still{position:absolute;inset:0;width:100%;height:100%;display:block}
.sp.is-drawn .still{visibility:hidden}

/* ── 견본 아래 조절 막대·탭(카드 글 쪽) ─────────────────────────────── */
.sp-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:12px;font-size:13px}
.sp-ctl label{display:inline-flex;align-items:center;gap:8px}
.sp-ctl input[type=range]{width:min(140px,40vw);min-height:32px}
.sp-ctl button{font:inherit;font-size:13px;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid currentColor;background:transparent;color:inherit;opacity:.72;cursor:pointer}
.sp-ctl button[aria-pressed=true]{opacity:1;font-weight:600}

/* ── 유리 렌즈 ─────────────────────────────── */
.sp-pattern{position:absolute;inset:0;background:#0d1626;overflow:hidden}
.sp-pattern::before{content:"";position:absolute;inset:-10%;background:repeating-linear-gradient(118deg,#ff5a2e 0 14px,#0d1626 14px 38px),radial-gradient(circle at 70% 40%,#ffb338,transparent 55%);background-blend-mode:multiply;opacity:.9}
.sp-pattern::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.55) 1px,transparent 1.5px);background-size:16px 16px;opacity:.35}
.sp-pattern .t{position:absolute;left:8%;top:50%;transform:translateY(-50%);font:800 clamp(64px,12vw,170px)/.8 'Pretendard',sans-serif;letter-spacing:-.06em;color:#f6efe6;mix-blend-mode:screen}
.sp-pattern .t2{position:absolute;right:7%;bottom:12%;font:400 clamp(18px,2vw,26px)/1 'Instrument Serif',serif;color:#f6efe6;opacity:.8}
/* 스크립트가 없을 때도 렌즈 안 사본이 바깥 무늬와 맞도록 견본 상자 크기(cq)로 자리를 잡는다 — 스크립트가 돌면 px 로 덮어쓴다 */
.sp-lens{container-type:size}
.sp-lens-glass{--d:50cqmin;position:absolute;z-index:3;left:calc(62cqw - var(--d) / 2);top:calc(50cqh - var(--d) / 2);width:var(--d);height:var(--d);border-radius:50%;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.55),inset 0 2px 10px rgba(255,255,255,.35),inset 0 -8px 18px rgba(0,0,0,.25);cursor:grab;touch-action:none}
.sp-lens-glass:active{cursor:grabbing}
.sp-lens-glass .sp-pattern{inset:auto;width:100cqw;height:100cqh;left:calc(var(--d) / 2 - 62cqw);top:calc(var(--d) / 2 - 50cqh);transform-origin:62cqw 50cqh;transform:scale(1.22);filter:url(#sp-refract) brightness(1.35) saturate(1.1)}
.sp-lens-glass::after{content:"";position:absolute;inset:0;z-index:2;border-radius:50%;background:radial-gradient(70% 45% at 35% 18%,rgba(255,255,255,.45),transparent 60%),radial-gradient(80% 60% at 70% 95%,rgba(120,200,255,.18),transparent 70%);pointer-events:none}
.sp-lens-glass:focus-visible{outline:2px solid #ffd27a;outline-offset:3px}
.sp-defs{position:absolute;width:0;height:0;overflow:hidden}

/* ── 스프링 스위치 ─────────────────────────────── */
.sp-spring{display:grid;place-items:center;background:#16151a}
.sp-spring .track{z-index:6;appearance:none;border:0;padding:0;cursor:pointer;display:block;position:relative;width:min(70%,128px);aspect-ratio:2/1;border-radius:999px;background:#2a2830;box-shadow:inset 0 2px 6px rgba(0,0,0,.5);transition:background .25s}
.sp-spring .track:focus-visible{outline:2px solid #ffd27a;outline-offset:4px}
.sp-spring.is-on .track{background:#ff6a2a}
.sp-spring .knob{position:absolute;top:8%;left:4%;height:84%;aspect-ratio:1;border-radius:50%;background:#f7f3ee;box-shadow:0 4px 10px rgba(0,0,0,.35);transition:transform var(--dur,.6s) var(--ease,ease)}
.sp-spring.is-on .knob{transform:translateX(var(--travel,100%))}
.sp-spring .lbl{pointer-events:none;position:absolute;top:10px;left:12px;font:400 12px/1 'JetBrains Mono',monospace;color:#a29dab}
.sp-spring .lbl b{font-weight:400;color:#f4f1ec}
.sp-curve{position:absolute;inset:auto 10px 10px auto;width:46%;height:42%;pointer-events:none;overflow:visible}
.sp-curve .base{stroke:rgba(255,255,255,.18);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
.sp-curve .line{stroke:#ff7a3d;stroke-width:2;fill:none;vector-effect:non-scaling-stroke}

/* ── '119' 글자 효과 ─────────────────────────────── */
.sp-t119{display:grid;place-items:center;background:#0b0912;perspective:600px}
.sp-t119 .w{display:flex;gap:.06em;font:800 clamp(40px,5.4vw,78px)/1 'Space Grotesk','Pretendard',sans-serif;letter-spacing:-.02em}
.sp-t119 .w span{display:inline-block;color:#f2eefc}
.sp-t119:not([data-mode]) .w span,.sp-t119[data-mode=flap] .w span{background:linear-gradient(#24202f 0 49%,#16131e 51% 100%);padding:.06em .12em;border-radius:.08em;box-shadow:inset 0 -1px 0 #000;animation:sp-flap .7s cubic-bezier(.3,1.6,.5,1) both;transform-origin:50% 50%}
.sp-t119 .w span:nth-child(2){animation-delay:.12s}
.sp-t119 .w span:nth-child(3){animation-delay:.24s}
@keyframes sp-flap{0%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
.sp-t119[data-mode=neon] .w span{color:#ffe9f6;text-shadow:0 0 .06em #fff,0 0 .2em #ff4fb3,0 0 .5em #ff4fb3,0 0 1em #b14dff;animation:sp-flick 3.2s infinite steps(1)}
.sp-t119[data-mode=neon] .w span:nth-child(2){animation-delay:.9s}
@keyframes sp-flick{0%,100%{opacity:1}42%{opacity:.55}44%{opacity:1}46%{opacity:.7}48%{opacity:1}}
@property --sp-lvl{syntax:'<percentage>';inherits:false;initial-value:55%}
.sp-t119[data-mode=fill] .w span{color:transparent;-webkit-text-stroke:1.5px #9fd8ff;background:linear-gradient(transparent 0 var(--sp-lvl),#3aa6ff var(--sp-lvl));-webkit-background-clip:text;background-clip:text;animation:sp-fill 3s ease-in-out infinite alternate}
@keyframes sp-fill{from{--sp-lvl:85%}to{--sp-lvl:20%}}
.sp-t119 .m{position:absolute;left:12px;top:10px;font:400 12px/1 'JetBrains Mono',monospace;color:#a39cb8}

/* ── 빛이 지나가는 원 ─────────────────────────────── */
.sp-loader{display:grid;place-items:center;background:#08080a}
.sp-loader svg{width:min(78%,120px);height:auto;overflow:visible}
.sp-loader .beam{animation:sp-beam 2.4s cubic-bezier(.55,0,.45,1) infinite}
@keyframes sp-beam{from{transform:translateY(60px)}to{transform:translateY(-60px)}}

/* ── 함수로 칠한 빛 ─────────────────────────────── */
.sp-plasma{background:#1e0c28}
.sp-plasma .still{filter:blur(10px);transform:scale(1.12)}
.sp-plasma canvas{image-rendering:auto}
.sp-plasma .f{position:absolute;left:12px;top:10px;z-index:2;font:400 11px/1.3 'JetBrains Mono',monospace;color:rgba(255,236,220,.86)}
.sp-plasma .f b{font-weight:400}

/* ── 출동 경로 ─────────────────────────────── */
.sp-route{background:#0d141c}
.sp-route svg{width:100%;height:100%;display:block}
.sp-route .road{stroke:#22303d;stroke-width:6;fill:none}
.sp-route .lane{stroke:#18232e;stroke-width:2;fill:none}
.sp-route .path{stroke:#5cc8ff;stroke-width:4;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:sp-draw 5s ease-in-out infinite}
@keyframes sp-draw{0%{stroke-dashoffset:var(--len)}45%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:calc(var(--len) * -1)}}
.sp-route .pulse{fill:#ff5a2e;transform-box:fill-box;transform-origin:center;animation:sp-pulse 1.6s ease-out infinite}
@keyframes sp-pulse{from{transform:scale(1);opacity:.7}to{transform:scale(3.2);opacity:0}}
.sp-route .pin{fill:#ff5a2e;stroke:#0d141c;stroke-width:2}
.sp-route .pin-hit{fill:transparent;stroke:none}
.sp-route .pin-hit[role=button]{cursor:pointer}
.sp-route .pin-hit:focus-visible{outline:none;stroke:#ffd27a;stroke-width:3}
.sp-route .base{fill:#e9f2f8}
.sp-route .tip{font:600 12px 'Pretendard',sans-serif;fill:#e9f2f8}
.sp-route .pop rect{fill:#0d141c;stroke:#5cc8ff}
.sp-route .pop{opacity:0;transition:opacity .2s}
.sp-route .pop.is-open{opacity:1}

/* ── 궤도 ─────────────────────────────── */
.sp-orbit{display:grid;place-items:center;background:#050608}
.sp-orbit .sys{position:relative;width:min(92%,300px);aspect-ratio:2.2/1}
.sp-orbit .ring{position:absolute;left:50%;top:50%;border:1px solid rgba(255,255,255,.14);border-radius:50%;transform:translate(-50%,-50%) scaleY(.42)}
.sp-orbit .r1{width:40%;aspect-ratio:1}
.sp-orbit .r2{width:68%;aspect-ratio:1}
.sp-orbit .r3{width:96%;aspect-ratio:1}
.sp-orbit .core{position:absolute;left:50%;top:50%;width:9%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 35% 30%,#fff,#ffb338 45%,#ff5a2e 80%);box-shadow:0 0 30px rgba(255,140,60,.6)}
.sp-orbit .p{position:absolute;left:50%;top:50%;width:0;height:0}
.sp-orbit .p i{position:absolute;display:block;border-radius:50%;offset-path:var(--orb);offset-rotate:0deg;animation:sp-orb var(--t) linear infinite;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);background:var(--c);box-shadow:0 0 14px var(--c)}
.sp-orbit .p1 i{--c:#9fe7ff;--s:10px;--t:7s}
.sp-orbit .p2 i{--c:#c9ff5a;--s:14px;--t:11s;animation-delay:-4s}
.sp-orbit .p3 i{--c:#c79bff;--s:9px;--t:17s;animation-delay:-9s}
@keyframes sp-orb{from{offset-distance:0%}to{offset-distance:100%}}

/* ── 점구름 ─────────────────────────────── */
.sp-cloud{background:radial-gradient(120% 140% at 50% 120%,#0f2230,#030507 70%)}
.sp-cloud .still path{fill:none;stroke-linecap:round;stroke-width:2.2}
.sp-cloud .still .d0{stroke:rgba(150,212,255,.55)}
.sp-cloud .still .d1{stroke:rgba(196,232,255,.75)}
.sp-cloud .still .d2{stroke:rgba(244,252,255,.9)}

/* ── 사례 모티프: 부조 ─────────────────────────────── */
.mo-relief{--lx:-.7;--ly:-.7;position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:18px;background:#e8e2d8}
.mo-relief i{border-radius:6px;background:#ece6dc;box-shadow:calc(var(--lx) * -6px) calc(var(--ly) * -6px) 12px rgba(120,100,80,.35),calc(var(--lx) * 5px) calc(var(--ly) * 5px) 10px rgba(255,255,255,.9);transition:box-shadow .25s}
.mo-relief i:nth-child(3n){border-radius:50% 50% 6px 6px}
.mo-relief b{position:absolute;left:24px;bottom:22px;font:800 clamp(28px,3.4vw,46px)/1 'Pretendard',sans-serif;color:#e9e3d8;letter-spacing:-.03em;text-shadow:calc(var(--lx) * -2px) calc(var(--ly) * -2px) 3px rgba(110,90,70,.45),calc(var(--lx) * 2px) calc(var(--ly) * 2px) 2px #fff}

/* ── 사례 모티프: 지도와 소리 선택 ─────────────────────────────── */
.mo-map{position:absolute;inset:0;background:#0e0f12;overflow:hidden}
.mo-map .grid{position:absolute;inset:-40%;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:44px 44px;transform:perspective(600px) rotateX(55deg);animation:sp-pan 14s linear infinite}
@keyframes sp-pan{to{background-position:0 440px}}
.mo-map .spot{position:absolute;width:10px;height:10px;border-radius:50%;background:#c9ff5a;box-shadow:0 0 18px #c9ff5a}
.mo-map .gate{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;gap:10px;align-items:center}
.mo-map .gate button{font:600 14px 'Pretendard',sans-serif;min-height:44px;padding:0 20px;border-radius:999px;border:1px solid rgba(255,255,255,.4);background:rgba(10,10,12,.55);color:#f4f4f4;backdrop-filter:blur(8px);cursor:pointer}
.mo-map .gate button[aria-pressed=true]{background:#f4f4f4;color:#0e0f12}
.mo-map .gate button:focus-visible{outline:2px solid #ffd27a;outline-offset:3px}

/* ══ 레퍼런스 사이트 견본 — 디자인 영감·레퍼런스 ══ */
/* 물결 — 진행도 --sp-p(0~1). 정지 그림은 .65 */
@property --sp-p{syntax:'<number>';inherits:true;initial-value:.65}
.sp-waves{--sp-p:.65;background:radial-gradient(70% 60% at 50% 0%,#123a56,#05080d 70%)}
@supports (animation-timeline:view()){.sp-waves.is-scroll{animation:sp-wave-p linear both;animation-timeline:view();animation-range:cover 5% cover 95%}}
@keyframes sp-wave-p{from{--sp-p:0}to{--sp-p:1}}
.sp-waves .wv{position:absolute;inset:0;width:100%;height:100%}
.sp-waves .w1{fill:#0f6d8f;transform:translate(calc(var(--sp-p) * -120px),calc((1 - var(--sp-p)) * 60px))}
.sp-waves .w2{fill:#1795b8;opacity:.75;transform:translate(calc(var(--sp-p) * -70px),calc((1 - var(--sp-p)) * 90px))}
.sp-waves .w3{fill:#5fd1ef;opacity:.45;transform:translate(calc(var(--sp-p) * -30px),calc((1 - var(--sp-p)) * 120px))}
.sp-waves .ttl{position:absolute;inset:0;display:grid;place-items:center}
.sp-waves .ttl span{font:800 clamp(40px,7vw,84px)/1 'Pretendard',sans-serif;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px #9fe7ff;background:linear-gradient(to top,#7fe6ff 0 calc(var(--sp-p) * 100%),transparent 0);-webkit-background-clip:text;background-clip:text}
.sp-waves .m{position:absolute;left:12px;top:10px;font:400 12px/1 'JetBrains Mono',monospace;color:#8fc9dd}

/* 미니 격자 — 순검정 바탕, 캡처 대신 색면 */
.sp-minigrid{background:#000}
.mg{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr;gap:10px;padding:12px}
.mg-chips{display:flex;flex-wrap:wrap;gap:6px}
.mg-chips button{font:500 12px/1 'Pretendard',sans-serif;min-height:30px;padding:0 12px;border-radius:999px;border:0;background:#1d1d1f;color:#cfcfd4;cursor:pointer}
.mg-chips button[aria-pressed=true]{background:#f4f4f5;color:#000}
.mg-chips button:focus-visible{outline:2px solid #ffd27a;outline-offset:2px}
.mg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none;min-height:0}
.mg-grid li{display:grid;grid-template-rows:1fr auto auto;gap:2px;min-height:0;transition:opacity .3s,filter .3s}
.mg-grid li.is-dim{opacity:.18;filter:grayscale(1)}
.mg-grid i{border-radius:4px;min-height:28px}
.mg-c1{background:linear-gradient(135deg,#e9e4da,#cfc6b4)}
.mg-c2{background:linear-gradient(135deg,#1f2a44,#3b5b8c)}
.mg-c3{background:linear-gradient(135deg,#ff6a2a,#ffb338)}
.mg-c4{background:linear-gradient(135deg,#d7e4dd,#8fb5a2)}
.mg-c5{background:linear-gradient(135deg,#2b2b2e,#5a5a62)}
.mg-c6{background:linear-gradient(135deg,#c9d6ff,#7d8ee8)}
.mg-grid b{font:600 11px/1.3 'Pretendard',sans-serif;color:#f4f4f5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-grid span{font:400 10px/1.2 'Pretendard',sans-serif;color:#77777f}

/* 메이슨리 — 흰 바탕에 높이가 다른 카드 */
.sp-masonry{background:#f6f6f4}
.ms{position:absolute;inset:0;column-count:3;column-gap:8px;padding:10px;overflow:hidden}
.ms-card{break-inside:avoid;height:var(--h);margin-bottom:8px;border-radius:10px}
.ms-t1{background:linear-gradient(160deg,#ffd6c2,#ff7a50)}
.ms-t2{background:linear-gradient(160deg,#cfe8ff,#4b8fe0)}
.ms-t3{background:linear-gradient(160deg,#e8e2ff,#8b7ae0)}
.ms-t4{background:linear-gradient(160deg,#d9f5e4,#3fae78)}
.ms-t5{background:linear-gradient(160deg,#fff1c2,#e0b030)}
.ms-slides{position:relative;overflow:hidden;background:#111}
.ms-track{--i:0;display:flex;height:100%;transform:translateX(calc(var(--i) * -100%));transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.ms-s{flex:0 0 100%;display:grid;place-items:start;padding:8px;font:600 10px/1.2 'Pretendard',sans-serif;color:#fff}
.ms-dots{position:absolute;left:0;right:0;bottom:6px;display:flex;justify-content:center;gap:2px}
.ms-dots button{width:24px;height:24px;padding:0;border:0;background:transparent;cursor:pointer;position:relative}
.ms-dots button::before{content:"";position:absolute;inset:8px;border-radius:50%;background:rgba(255,255,255,.45)}
.ms-dots button[aria-pressed=true]::before{background:#fff}
.ms-dots button:focus-visible{outline:2px solid #ffd27a;outline-offset:-2px;border-radius:50%}

/* 분위기 토큰 — 색 값은 assets/design-specimens.js 의 MOODS 와 같다 */
.mt{--mt-bg:#0e1420;--mt-surface:#16202e;--mt-text:#e8eef6;--mt-accent:#ff7a3d;--mt-font:'Pretendard',sans-serif;--mt-r:14px;--mt-gap:16px;position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);grid-template-rows:auto 1fr;gap:10px;padding:12px;background:#0a0a0c}
.mt[data-mood=night]{--mt-bg:#0e1420;--mt-surface:#16202e;--mt-text:#e8eef6;--mt-accent:#ff7a3d;--mt-font:'Pretendard',sans-serif;--mt-r:14px;--mt-gap:16px}
.mt[data-mood=paper]{--mt-bg:#f5f1e8;--mt-surface:#fffdf7;--mt-text:#1f1d1a;--mt-accent:#1f5fbf;--mt-font:'Instrument Serif',serif;--mt-r:2px;--mt-gap:20px}
.mt[data-mood=neon]{--mt-bg:#0b0b0d;--mt-surface:#15161a;--mt-text:#f2ffe0;--mt-accent:#c9ff3a;--mt-font:'Space Grotesk','Pretendard',sans-serif;--mt-r:0px;--mt-gap:12px}
.mt-chips{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px}
.mt-chips button{font:500 12px/1 'Pretendard',sans-serif;min-height:30px;padding:0 12px;border-radius:999px;border:1px solid #3a3a42;background:transparent;color:#d9d9de;cursor:pointer}
.mt-chips button[aria-pressed=true]{background:#f4f4f5;color:#0a0a0c;border-color:#f4f4f5}
.mt-chips button:focus-visible{outline:2px solid #ffd27a;outline-offset:2px}
.mt-card{display:flex;flex-direction:column;gap:calc(var(--mt-gap) / 2);padding:var(--mt-gap);border-radius:var(--mt-r);background:var(--mt-bg);color:var(--mt-text);font-family:var(--mt-font);box-shadow:inset 0 0 0 1px rgba(127,127,127,.25);transition:background .3s,color .3s,border-radius .3s,padding .3s;min-height:0;overflow:hidden}
.mt-card b{font-size:16px;font-weight:700}
.mt-card p{margin:0;font-size:12px;line-height:1.5;opacity:.85}
.mt-btn{align-self:flex-start;margin-top:auto;padding:6px 12px;border-radius:var(--mt-r);background:var(--mt-accent);color:var(--mt-bg);font-size:12px;font-weight:700}
.mt-md{margin:0;padding:10px;border-radius:8px;background:#121216;color:#b9b9c2;font:400 10px/1.4 'JetBrains Mono',monospace;white-space:pre;overflow:hidden;min-height:0}
/* 좁은 견본에서도 규칙 글 열한 줄이 다 보이게 */
.sp-moodtokens{container-type:size}
@container (max-width:400px){.mt-md{font-size:8.5px;padding:8px}.mt-card p{font-size:11px}}
.mt-md mark{background:rgba(255,210,122,.22);color:#ffe2a8}

/* 선화 부품 — 가는 선 모눈 위 */
.sp-lineparts{background:#f7f5ef}
.lp{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:14px;background-image:linear-gradient(#e2ddd0 1px,transparent 1px),linear-gradient(90deg,#e2ddd0 1px,transparent 1px);background-size:18px 18px}
.lp-part{display:flex;flex-direction:column;gap:6px;min-width:0}
.lp-part button{display:grid;justify-items:center;gap:4px;padding:8px 4px;border:1px solid #cfc8b8;border-radius:10px;background:#fffdf8;color:#2d2a24;cursor:pointer}
.lp-part button[aria-expanded=true]{border-color:#2f6fd6;box-shadow:0 0 0 3px rgba(47,111,214,.18)}
.lp-part button:focus-visible{outline:2px solid #2f6fd6;outline-offset:2px}
.lp-part svg{width:100%;max-width:110px;height:auto;fill:none;stroke:#5d6b8a;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.lp-part svg .fill{fill:#bcd2f5}
.lp-part b{font:600 12px/1 'Pretendard',sans-serif}
.lp-tags{margin:0;padding:6px 8px;border-radius:8px;background:#2f6fd6;color:#fff;font:500 10.5px/1.45 'Pretendard',sans-serif}

/* 흐름 띠 — 가상 앱 화면 넷 */
.sp-flowstrip{background:#fafafa}
.fs{position:absolute;inset:0;display:grid;grid-template-rows:1fr auto;gap:8px;padding:12px}
.fs-strip{display:flex;align-items:center;justify-content:center;gap:14px;margin:0;padding:0;list-style:none;min-height:0}
.fs-phone{position:relative;display:grid;justify-items:center;gap:6px;opacity:.42;transform:scale(.9);transition:opacity .3s,transform .3s}
.fs-phone:not(:last-child)::after{content:"→";position:absolute;right:-13px;top:40%;font:600 12px/1 'Pretendard',sans-serif;color:#9a9aa2}
.fs-phone.is-on{opacity:1;transform:scale(1.06)}
.fs-scr{display:flex;flex-direction:column;gap:5px;width:58px;height:96px;padding:12px 7px 7px;border:2px solid #1c1c1e;border-radius:12px;background:#fff}
.fs-scr .l{height:5px;border-radius:3px;background:#d6d6dc}
.fs-scr .w8{width:80%}
.fs-scr .w6{width:60%}
.fs-scr .w5{width:50%}
.fs-scr .f{height:9px;border-radius:3px;border:1px solid #c4c4cc}
.fs-scr .f.s{width:60%}
.fs-scr .c{height:26px;border-radius:5px;background:#eef1ff}
.fs-scr .b{margin-top:auto;height:12px;border-radius:5px;background:#1c1c1e}
.fs-scr .ok{width:24px;height:24px;margin:10px auto 6px;border-radius:50%;background:#2fb06f}
.fs-phone span{font:600 10.5px/1 'Pretendard',sans-serif;color:#3a3a40}
.fs-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.fs-chips button{font:500 12px/1 'Pretendard',sans-serif;min-height:30px;padding:0 12px;border-radius:999px;border:1px solid #d0d0d6;background:#fff;color:#2a2a2e;cursor:pointer}
.fs-chips button[aria-pressed=true]{background:#1c1c1e;color:#fff;border-color:#1c1c1e}
.fs-chips button:focus-visible{outline:2px solid #2f6fd6;outline-offset:2px}

/* ══ 레퍼런스 사이트 견본 — AI 코딩·디자인 시스템 ══ */
.sp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sp-ctl-g{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
.sp-ctl-g>span{margin-right:2px;opacity:.8}

/* 규칙 글 — 강조색 값은 assets/design-specimens.js 의 DM 과 같다 */
.sp-designmd{background:#f2f1ee}
.dm{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;padding:12px}
.dm-src{display:flex;flex-direction:column;min-height:0;border-radius:10px;background:#16161a;overflow:hidden}
.dm-file{margin:0;padding:6px 10px;border-bottom:1px solid #2a2a30;font:600 11px/1.3 'JetBrains Mono',monospace;color:#c8c8d0}
.dm-text{margin:0;padding:8px 10px;font:400 10.5px/1.5 'JetBrains Mono',monospace;color:#b9e3c6;white-space:pre;overflow:hidden}
.dm-text mark{background:rgba(255,210,122,.25);color:#ffe2a8}
.dm-view{--dm-accent:#ff6a2a;--dm-r:8px;--dm-font:'Pretendard',sans-serif;display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:10px;background:#fff;box-shadow:0 1px 0 #e3e1dc,0 6px 18px rgba(0,0,0,.06);font-family:var(--dm-font);color:#1d1d20;min-height:0}
.dm-view[data-accent=ember]{--dm-accent:#ff6a2a}
.dm-view[data-accent=blue]{--dm-accent:#2f6fd6}
.dm-view[data-accent=green]{--dm-accent:#1f9d63}
.dm-view[data-r="0"]{--dm-r:0px}
.dm-view[data-r="8"]{--dm-r:8px}
.dm-view[data-r="16"]{--dm-r:16px}
.dm-view[data-font=serif]{--dm-font:'Instrument Serif',serif}
.dm-top{display:flex;gap:4px}
.dm-top i{width:16px;height:5px;border-radius:3px;background:#dcdad4}
.dm-title{font-size:16px;font-weight:700;align-self:flex-start;position:relative}
.dm-card{display:flex;flex-direction:column;gap:6px;padding:10px;border:1px solid #e3e1dc;border-radius:var(--dm-r);position:relative;transition:border-radius .3s}
.dm-f{height:12px;border:1px solid #d5d3cd;border-radius:calc(var(--dm-r) / 2)}
.dm-btn{align-self:flex-start;padding:6px 12px;border-radius:var(--dm-r);background:var(--dm-accent);color:#fff;font:700 12px/1 'Pretendard',sans-serif;position:relative;transition:background .3s,border-radius .3s}
/* 바뀐 요소 — 디자인 도구의 선택 상자 */
.dm-view .is-sel{outline:1.5px solid #18a058;outline-offset:3px}
.dm-view .is-sel::before,.dm-view .is-sel::after{content:"";position:absolute;width:6px;height:6px;background:#fff;border:1.5px solid #18a058}
.dm-view .is-sel::before{left:-7px;top:-7px}
.dm-view .is-sel::after{right:-7px;bottom:-7px}

/* 프롬프트 조립 — 줄 셋이 차례로 찍히고 블록 셋이 놓인 뒤 다시 처음부터(9초) */
.sp-promptwire{background:#f7f6f3}
.pw{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;padding:12px}
.pw-lines{margin:0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:8px;font:500 12px/1.45 'Pretendard',sans-serif;color:#1d1d20}
.pw-lines li::marker{font-family:'JetBrains Mono',monospace;color:#8a8a92}
.pw-frame{display:flex;flex-direction:column;gap:8px;padding:10px;border:1.5px dashed #c9c7c0;border-radius:10px;background:#fff}
.pw-b{border-radius:6px;background:#f0efeb}
.pw-b0{display:flex;align-items:center;gap:6px;padding:6px}
.pw-b0 i{width:20px;height:6px;border-radius:3px;background:#cfcdc6}
.pw-b0 .logo{width:14px;height:14px;border-radius:4px;background:#1d1d20;margin-right:auto}
.pw-b1{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px}
.pw-b1 span{display:flex;flex-direction:column;gap:5px}
.pw-b1 i{height:6px;border-radius:3px;background:#cfcdc6}
.pw-b1 .w9{width:90%}
.pw-b1 .w7{width:70%}
.pw-b1 .w8{width:80%}
.pw-b1 .form i{height:12px;border:1px solid #cfcdc6;background:#fff}
.pw-b2{display:flex;justify-content:flex-end;padding:6px}
.pw-b2 .btn{width:56px;height:16px;border-radius:5px;background:#1d1d20}
.pw-l0{animation:sp-pw-l0 9s steps(18) infinite}
.pw-l1{animation:sp-pw-l1 9s steps(20) infinite}
.pw-l2{animation:sp-pw-l2 9s steps(14) infinite}
.pw-b0{animation:sp-pw-b0 9s ease infinite}
.pw-b1{animation:sp-pw-b1 9s ease infinite}
.pw-b2{animation:sp-pw-b2 9s ease infinite}
@keyframes sp-pw-l0{0%,3%{clip-path:inset(0 100% 0 0)}17%,90%{clip-path:inset(0 0 0 0);opacity:1}97%,100%{opacity:0}}
@keyframes sp-pw-l1{0%,25%{clip-path:inset(0 100% 0 0)}40%,90%{clip-path:inset(0 0 0 0);opacity:1}97%,100%{opacity:0}}
@keyframes sp-pw-l2{0%,48%{clip-path:inset(0 100% 0 0)}60%,90%{clip-path:inset(0 0 0 0);opacity:1}97%,100%{opacity:0}}
@keyframes sp-pw-b0{0%,18%{opacity:0;transform:translateY(8px)}24%,90%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes sp-pw-b1{0%,41%{opacity:0;transform:translateY(8px)}47%,90%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes sp-pw-b2{0%,61%{opacity:0;transform:translateY(8px)}67%,90%{opacity:1;transform:none}97%,100%{opacity:0}}

/* 부품 선반과 터미널 */
.sp-cliprompt{background:#09090b}
.cp{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:10px;padding:12px}
.cp-shelf{display:flex;flex-direction:column;gap:6px;min-height:0}
.cp-card{display:grid;grid-template-columns:28px minmax(0,1fr);grid-template-rows:auto auto;column-gap:8px;align-items:center;padding:7px 8px;border-radius:9px;background:#141418;border:1px solid #232329}
.cp-art{grid-row:1/3;width:28px;height:28px;border-radius:7px}
.cp-a1{background:linear-gradient(135deg,#2b6df6,#7aa8ff)}
.cp-a2{background:linear-gradient(135deg,#1f9d63,#7ee2b0)}
.cp-a3{background:linear-gradient(135deg,#ff6a2a,#ffc06a)}
.cp-card b{font:600 11.5px/1.2 'Pretendard',sans-serif;color:#ececf1}
.cp-card button{justify-self:start;margin-top:3px;font:500 10.5px/1 'Pretendard',sans-serif;min-height:26px;padding:0 9px;border-radius:999px;border:0;background:#2b6df6;color:#fff;cursor:pointer}
.cp-card button:focus-visible{outline:2px solid #ffd27a;outline-offset:2px}
.cp-term{display:flex;flex-direction:column;border-radius:9px;background:#0f0f12;border:1px solid #26262c;min-height:0;overflow:hidden}
.cp-bar{display:flex;align-items:center;gap:4px;margin:0;padding:6px 8px;border-bottom:1px solid #222228}
.cp-bar i{width:7px;height:7px;border-radius:50%;background:#3a3a42}
.cp-bar span{margin-left:6px;font:400 10px/1 'JetBrains Mono',monospace;color:#7a7a84}
.cp-out{flex:1;margin:0;padding:8px;font:400 10.5px/1.6 'JetBrains Mono',monospace;color:#d6f5dd;white-space:pre-wrap;word-break:break-all;overflow:hidden}

/* ══ 레퍼런스 사이트 견본 — 바로 쓰는 UI 부품 ══ */
/* 테마 키트 — 무채색 변수 몇 개(밝음·어둠)와 모서리 하나 */
.sp-themekit{background:#0a0a0a}
.tk{--tk-r:10px;--tk-bg:#0a0a0a;--tk-card:#161616;--tk-text:#fafafa;--tk-muted:#a1a1a1;--tk-line:#2a2a2a;--tk-fill:#fafafa;--tk-on:#0a0a0a;position:absolute;inset:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:10px;background:var(--tk-bg);transition:background .3s}
.tk[data-tk-mode=light]{--tk-bg:#f4f4f5;--tk-card:#ffffff;--tk-text:#0a0a0a;--tk-muted:#6b6b6b;--tk-line:#e4e4e7;--tk-fill:#0a0a0a;--tk-on:#fafafa}
.tk-c{display:flex;flex-direction:column;justify-content:space-between;gap:6px;padding:9px;border-radius:var(--tk-r);border:1px solid var(--tk-line);background:var(--tk-card);color:var(--tk-text);min-height:0;transition:background .3s,border-color .3s,border-radius .2s}
.tk-l{font:500 11px/1.2 'Pretendard',sans-serif;color:var(--tk-muted)}
.tk-sw{position:relative;align-self:flex-start;width:38px;height:22px;padding:0;border:0;border-radius:999px;background:var(--tk-line);cursor:pointer;transition:background .2s}
.tk-sw[aria-checked=true]{background:var(--tk-fill)}
.tk-sw i{position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--tk-card);transition:transform .2s}
.tk-sw[aria-checked=true] i{transform:translateX(16px)}
.tk-sw:focus-visible,.tk-c input:focus-visible{outline:2px solid #ffd27a;outline-offset:2px}
.tk-c input[type=range]{width:100%;accent-color:var(--tk-fill);min-height:24px}
.tk-bars{display:flex;align-items:flex-end;gap:5px;height:44px}
.tk-bars i{flex:1;border-radius:calc(var(--tk-r) / 3) calc(var(--tk-r) / 3) 2px 2px;background:var(--tk-fill);opacity:.85}
.tk-row{display:flex;align-items:center;gap:6px}
.tk-btn{padding:5px 12px;border-radius:var(--tk-r);background:var(--tk-fill);color:var(--tk-on);font:600 11px/1 'Pretendard',sans-serif}
.tk-badge{padding:3px 8px;border-radius:999px;border:1px solid var(--tk-line);font:500 10px/1 'Pretendard',sans-serif;color:var(--tk-text)}

/* 원뿔 빛 — 위에서 빛이 열리고 제목이 떠오른다(7초 순환) */
@property --sp-cone{syntax:'<angle>';inherits:false;initial-value:50deg}
.sp-spotlight{background:#020205}
.sl{position:absolute;inset:0;overflow:hidden}
.sl-cone{position:absolute;left:50%;top:-6%;width:160%;height:110%;transform:translateX(-50%);background:conic-gradient(from calc(180deg - var(--sp-cone) / 2) at 50% 0%,transparent 0,rgba(104,190,255,.55) calc(var(--sp-cone) / 2),transparent var(--sp-cone));filter:blur(14px);opacity:.85;animation:sp-cone 7s ease-in-out infinite}
.sl-line{position:absolute;left:50%;top:6%;width:44%;height:2px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,#8fd3ff,transparent);box-shadow:0 0 18px #4fb2ff}
.sl-beam{position:absolute;width:1px;height:150%;top:-25%;background:linear-gradient(transparent,rgba(160,210,255,.65),transparent);transform:rotate(28deg);animation:sp-beam-x 7s linear infinite}
.sl-beam.b1{left:12%}
.sl-beam.b2{left:46%;animation-delay:-2.3s}
.sl-beam.b3{left:80%;animation-delay:-4.6s}
.sl-ttl{position:absolute;left:0;right:0;top:44%;text-align:center;font:800 clamp(24px,3.4vw,36px)/1.1 'Pretendard',sans-serif;letter-spacing:-.03em;color:#e9f4ff;animation:sp-sl-ttl 7s ease-out infinite}
@keyframes sp-cone{0%{--sp-cone:8deg;opacity:.2}25%,85%{--sp-cone:58deg;opacity:.85}100%{--sp-cone:8deg;opacity:.2}}
@keyframes sp-beam-x{from{translate:-60px 0}to{translate:60px 0}}
@keyframes sp-sl-ttl{0%,12%{opacity:0;transform:translateY(16px)}30%,85%{opacity:1;transform:none}100%{opacity:0}}

/* 궤도와 테두리 빛 */
.sp-orbitborder{background:#ffffff}
.ob{position:absolute;inset:8px;border-radius:12px;border:1px solid #e7e7ec;overflow:hidden;background:radial-gradient(60% 70% at 50% 50%,#f3f4ff,#fff 70%)}
.ob-ring{position:absolute;left:50%;top:50%;border:1px dashed #cfd2e6;border-radius:50%;transform:translate(-50%,-50%)}
.ob-ring.r70{width:140px;height:140px}
.ob-ring.r104{width:208px;height:208px}
.ob-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#111;color:#fff;font:800 13px/1 'Space Grotesk',sans-serif;box-shadow:0 6px 18px rgba(17,17,17,.2)}
.ob-p{position:absolute;left:50%;top:50%;width:0;height:0}
.ob-p i{position:absolute;display:block;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:5px;offset-path:var(--orb);offset-rotate:0deg;animation:sp-orb var(--t,10s) linear infinite}
.ob-p .o1{background:#7c6cff;--t:9s}
.ob-p .o2{background:#22b3ff;--t:9s;animation-delay:-3s}
.ob-p .o3{background:#ff8a3d;--t:9s;animation-delay:-6s}
.ob-p .o4{background:#16c79a;--t:15s;animation-direction:reverse}
.ob-p .o5{background:#ff5fa2;--t:15s;animation-direction:reverse;animation-delay:-7.5s}
.ob-beam{position:absolute;left:0;top:0;width:44px;height:3px;border-radius:2px;background:linear-gradient(90deg,transparent,#7c6cff,#22b3ff);offset-path:var(--orb,path("M 12 0 H 360 A 12 12 0 0 1 372 12 V 214 A 12 12 0 0 1 360 226 H 12 A 12 12 0 0 1 0 214 V 12 A 12 12 0 0 1 12 0 Z"));offset-rotate:auto;animation:sp-orb 6s linear infinite}

/* 카드 확대 */
.sp-morphcard{background:#141416}
.mc{position:absolute;inset:0;padding:14px}
.mc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;height:100%}
.mc-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:12px;border-radius:14px;border:1px solid #2a2a2e;background:#1c1c20;color:#f2f2f4;text-align:left;cursor:pointer}
.mc-card i{width:100%;flex:1;min-height:40px;border-radius:9px}
.mc-ext i,.mc-panel .mc-art{background:linear-gradient(140deg,#ff5a2e,#ffb338)}
.mc-hyd i{background:linear-gradient(140deg,#2f6fd6,#7cc4ff)}
.mc-card b{font:600 13px/1.2 'Pretendard',sans-serif}
.mc-card span{font:500 11px/1 'Pretendard',sans-serif;color:#a0a0a8}
.mc-card:focus-visible,.mc-close:focus-visible{outline:2px solid #ffd27a;outline-offset:2px}
.mc-panel{position:absolute;inset:14px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);grid-template-rows:auto 1fr auto;column-gap:14px;padding:14px;border-radius:16px;border:1px solid #33333a;background:#1e1e22;color:#f2f2f4}
.mc-panel[hidden]{display:none}
.mc-panel .mc-art{grid-row:1/4;border-radius:10px}
.mc-title{font:700 16px/1.2 'Pretendard',sans-serif}
.mc-text{margin:8px 0 0;font:400 12.5px/1.6 'Pretendard',sans-serif;color:#c9c9d0}
.mc-close{justify-self:start;font:600 12px/1 'Pretendard',sans-serif;min-height:32px;padding:0 14px;border-radius:999px;border:1px solid #44444c;background:transparent;color:#f2f2f4;cursor:pointer}

/* CSS 상태 — 스크립트 없이 올림·초점·누름 */
.sp-cssstates{background:#16161a}
.cs{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:12px}
.cs-tile{display:grid;grid-template-rows:1fr auto;justify-items:center;align-items:center;gap:6px;padding:10px 6px;border-radius:12px;background:#212127}
.cs-tile>span{font:500 10.5px/1.2 'Pretendard',sans-serif;color:#9a9aa6;text-align:center}
.cs-btn{font:700 13px/1 'Pretendard',sans-serif;padding:11px 16px;border-radius:12px;border:0;background:#7c5cff;color:#fff;box-shadow:0 4px 0 #4b33c9;cursor:pointer;transition:transform .12s,box-shadow .12s,background .2s}
.cs-btn:hover{background:#8d72ff}
.cs-btn:focus-visible{outline:3px solid #ffd27a;outline-offset:3px}
.cs-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #4b33c9}
.cs-sw{position:relative;display:inline-block;width:52px;height:30px;cursor:pointer}
.cs-sw input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.cs-sw i{position:absolute;inset:0;border-radius:999px;background:#3a3a44;transition:background .2s}
.cs-sw i::after{content:"";position:absolute;left:4px;top:4px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .2s cubic-bezier(.3,1.4,.5,1)}
.cs-sw input:checked+i{background:#22c55e}
.cs-sw input:checked+i::after{transform:translateX(22px)}
.cs-sw input:focus-visible+i{outline:3px solid #ffd27a;outline-offset:3px}
.cs-load{width:30px;height:30px;border-radius:50%;border:3px solid #3a3a44;border-top-color:#7c5cff;animation:sp-spin .9s linear infinite}
@keyframes sp-spin{to{transform:rotate(360deg)}}

/* 블록 바꾸기 — 블록마다 변형 둘 */
.sp-blockswap{background:#eaeaea}
.bs{position:absolute;inset:10px;display:grid;grid-template-rows:20px 1fr 54px 22px;gap:5px}
.bs-block{position:relative;overflow:hidden;padding:0;border:1px solid #d6d6d6;border-radius:8px;background:#fff;cursor:pointer}
.bs-block em{position:absolute;right:6px;top:4px;font:500 9.5px/1 'Pretendard',sans-serif;font-style:normal;color:#8a8a8a}
.bs-block:focus-visible{outline:2px solid #2f6fd6;outline-offset:2px}
.bs-v{position:absolute;inset:0;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.bs-block .v1{transform:translateX(100%)}
.bs-block[data-v="1"] .v0{transform:translateX(-100%)}
.bs-block[data-v="1"] .v1{transform:none}
.bs-head .v0{background:linear-gradient(90deg,#111 0 14px,transparent 14px) 8px 50%/100% 8px no-repeat,linear-gradient(90deg,#d4d4d4 0 70%,transparent 0) 70% 50%/40% 5px no-repeat}
.bs-head .v1{background:linear-gradient(90deg,#d4d4d4 0 50%,transparent 0) 50% 50%/40% 5px no-repeat,#111}
.bs-hero .v0{background:linear-gradient(#111,#111) 12px 30%/46% 9px no-repeat,linear-gradient(#cfcfcf,#cfcfcf) 12px 50%/36% 5px no-repeat,linear-gradient(#ff6a2a,#ff6a2a) 12px 70%/18% 12px no-repeat,linear-gradient(135deg,#ffd9c7,#ff8f63) right 10px center/36% 70% no-repeat}
.bs-hero .v1{background:linear-gradient(#fff,#fff) center 38%/52% 9px no-repeat,linear-gradient(#bcd4ff,#bcd4ff) center 56%/38% 5px no-repeat,linear-gradient(135deg,#1f3f8f,#2f6fd6)}
.bs-feat .v0{background:linear-gradient(#e9e9e9,#e9e9e9) 8% 50%/26% 60% no-repeat,linear-gradient(#e9e9e9,#e9e9e9) 50% 50%/26% 60% no-repeat,linear-gradient(#e9e9e9,#e9e9e9) 92% 50%/26% 60% no-repeat}
.bs-feat .v1{background:linear-gradient(#e9e9e9,#e9e9e9) 6% 50%/40% 70% no-repeat,linear-gradient(#111,#111) 70% 35%/40% 6px no-repeat,linear-gradient(#cfcfcf,#cfcfcf) 66% 60%/32% 5px no-repeat}
.bs-foot .v0{background:linear-gradient(90deg,#cfcfcf 0 60%,transparent 0) 10px 50%/40% 4px no-repeat,#f5f5f5}
.bs-foot .v1{background:linear-gradient(90deg,#555 0 60%,transparent 0) 50% 50%/30% 4px no-repeat,#111}

/* ══ 레퍼런스 사이트 견본 — 고급 시각 효과·애니메이션 ══ */
/* 거대한 낱말과 도크 */
.sp-bigword{background:#e9e9e6}
.bw{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr auto;justify-items:center;padding:12px}
.bw-chip{margin:0;padding:5px 10px;border-radius:999px;background:#fff;font:600 10.5px/1 'Pretendard',sans-serif;color:#1c1c1c}
.bw-word{align-self:center;font:800 clamp(48px,8vw,96px)/.9 'Pretendard',sans-serif;letter-spacing:-.07em;color:#111}
.bw-dock{display:flex;gap:4px;padding:5px;border-radius:14px;background:#141414;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.bw-dock a{display:grid;place-items:center;min-width:52px;min-height:36px;padding:0 10px;border-radius:10px;background:#242424;color:#f2f2f2;font:600 12px/1 'Pretendard',sans-serif;text-decoration:none;transition:min-width .25s cubic-bezier(.2,.8,.2,1),background .2s}
.bw-dock a:hover,.bw-dock a:focus-visible{min-width:86px;background:#3a3a3a}
.bw-dock a:focus-visible{outline:2px solid #ffd27a;outline-offset:2px}

/* 그라디언트 단추 — 흰 글자 대비는 세 색 모두 4.5:1 이상 */
@property --sp-g{syntax:'<percentage>';inherits:false;initial-value:30%}
.sp-gradbtn{background:#f8fafc}
.gb{position:absolute;inset:0;display:grid;grid-template-rows:1fr auto auto;justify-items:center;align-items:center;gap:6px;padding:12px}
.gb-btn{--gb1:#b93a0b;--gb2:#8f1d6b;--gb3:#3a2fb0;--sp-g:30%;padding:14px 26px;border:0;border-radius:12px;background:linear-gradient(90deg,var(--gb1),var(--gb2) var(--sp-g),var(--gb3));color:#fff;font:700 15px/1 'Pretendard',sans-serif;box-shadow:0 8px 20px rgba(58,47,176,.25);cursor:pointer;transition:--sp-g .5s ease,transform .15s}
.gb-btn:hover,.gb-btn:focus-visible{--sp-g:80%}
.gb-btn:active{transform:scale(.97)}
.gb-btn:focus-visible{outline:3px solid #1e293b;outline-offset:3px}
.gb-note{min-height:14px;font:600 11px/1.2 'Pretendard',sans-serif;color:#334155}
.gb-code{width:100%;margin:0;padding:8px 10px;border-radius:8px;background:#0f172a;color:#cbd5e1;font:400 9.5px/1.5 'JetBrains Mono',monospace;white-space:pre-wrap;word-break:break-all}

/* 광택 입체 아이콘 — 방사형 반사광과 안쪽 그림자만 */
.sp-glossicon{background:linear-gradient(135deg,#fff7ed,#fdf2f8 50%,#eef2ff)}
.gi{--rx:0deg;--ry:0deg;--g1:#ffb38a;--g2:#ff5a2e;--g3:#b9300a;position:absolute;inset:0;display:grid;grid-template-rows:1fr auto;justify-items:center;padding:12px;perspective:600px}
.gi[data-hue=blue]{--g1:#9cc9ff;--g2:#2f6fd6;--g3:#173f86}
.gi[data-hue=violet]{--g1:#c9b8ff;--g2:#7c5cff;--g3:#3d2a9e}
.gi-stage{position:relative;width:120px;height:130px;align-self:center;transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .15s}
.gi-drop{position:absolute;left:18px;top:6px;width:84px;height:84px;border-radius:50% 0 50% 50%;transform:rotate(-45deg);background:radial-gradient(circle at 30% 30%,var(--g1),var(--g2) 55%,var(--g3));box-shadow:inset -10px -12px 22px rgba(0,0,0,.28),inset 8px 8px 16px rgba(255,255,255,.35),0 14px 24px rgba(0,0,0,.18)}
.gi-hi{position:absolute;left:18px;top:30px;width:20px;height:30px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.95),rgba(255,255,255,0) 70%);transform:rotate(45deg)}
.gi-shadow{position:absolute;left:24px;bottom:4px;width:72px;height:12px;border-radius:50%;background:radial-gradient(rgba(0,0,0,.22),transparent 70%)}
.gi-swatches{display:flex;gap:6px}
.gi-swatches button{width:30px;height:30px;padding:0;border-radius:50%;border:2px solid transparent;background:transparent;cursor:pointer}
.gi-swatches button i{display:block;width:100%;height:100%;border-radius:50%}
.gi-swatches [data-hue=ember] i{background:#ff5a2e}
.gi-swatches [data-hue=blue] i{background:#2f6fd6}
.gi-swatches [data-hue=violet] i{background:#7c5cff}
.gi-swatches button[aria-pressed=true]{border-color:#1c1c1c}
.gi-swatches button:focus-visible{outline:2px solid #1c1c1c;outline-offset:2px}

/* 점 격자 물결 — 거리만큼 늦게 커졌다가 작아진다 */
.sp-ripple{background:#1d1c20}
.rp{position:absolute;inset:0;display:grid;place-items:center;padding:14px}
.rp-grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:10px;cursor:pointer;border-radius:8px}
.rp-grid:focus-visible{outline:2px solid #ffd27a;outline-offset:8px}
.rp-grid i{width:10px;height:10px;border-radius:50%;background:#5d5a66}
.rp-grid i.is-pick{background:#ff4b4b;box-shadow:0 0 0 3px rgba(255,75,75,.3)}
.rp-grid i.is-wave{animation:sp-rp .7s cubic-bezier(.3,1.5,.5,1) var(--delay,0ms) both}
@keyframes sp-rp{0%{transform:scale(1)}40%{transform:scale(1.9);background:#ff8a5c}100%{transform:scale(1)}}
.rp-m{position:absolute;left:12px;top:10px;font:400 12px/1 'JetBrains Mono',monospace;color:#8f8a9a}

/* ══ 사례 모티프 ══ */
/* Apple Liquid Glass — 렌즈 착색(투명도 막대). 막대가 있는 견본만 기본 착색 .2 */
.sp-lens-glass::before{content:"";position:absolute;inset:0;z-index:1;border-radius:50%;background:rgba(16,20,28,calc(var(--tint,0) * .9));pointer-events:none;transition:background .2s}
.sp-lens[data-opts*='"tint":true'] .sp-lens-glass{--tint:.2}
.sp-ctl-note{opacity:.75}

/* Dream with AI — 누르고 있기 */
.sp-holdbloom{background:#06050b}
.hb{--lv:0;position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:12px}
.hb-glow{position:absolute;left:50%;top:46%;width:60%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) scale(calc(.25 + var(--lv) * 1.5));background:radial-gradient(circle,rgba(255,214,170,.95),rgba(255,122,90,.55) 35%,rgba(120,80,255,.25) 60%,transparent 72%);opacity:calc(.25 + var(--lv) * .75);filter:blur(4px)}
.hb-stars{position:absolute;inset:0;background-image:radial-gradient(1px 1px at 12% 20%,#fff,transparent),radial-gradient(1px 1px at 80% 30%,#fff,transparent),radial-gradient(1px 1px at 30% 75%,#fff,transparent),radial-gradient(1px 1px at 66% 82%,#fff,transparent),radial-gradient(1px 1px at 90% 64%,#fff,transparent);opacity:calc(.2 + var(--lv) * .6)}
.hb-btn{position:relative;z-index:1;font:600 14px/1 'Pretendard',sans-serif;min-height:48px;padding:0 22px;border-radius:999px;border:1px solid rgba(255,255,255,.45);background:rgba(10,8,18,.55);color:#f6f2ff;backdrop-filter:blur(6px);cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}
.hb-btn:focus-visible{outline:2px solid #ffd27a;outline-offset:3px}
.hb-status{position:relative;z-index:1;margin:0;font:500 12px/1.3 'Pretendard',sans-serif;color:#cfc8e6}

/* Why Zero — 깊이가 다른 판(CSS 만) */
.sp-depthlayers{background:radial-gradient(80% 90% at 50% 40%,#151b2e,#05060b)}
.dl{position:absolute;inset:0;perspective:700px;transform-style:preserve-3d}
.dl-p{position:absolute;left:18%;right:18%;top:16%;bottom:16%;border-radius:14px;border:1px solid rgba(160,190,255,.35);background:rgba(90,120,220,.08);animation:sp-dl 10s ease-in-out infinite}
.dl-p.p1{transform:translateZ(-180px);animation-delay:0s}
.dl-p.p2{transform:translateZ(-110px);animation-delay:-2.5s;background:rgba(120,160,255,.10)}
.dl-p.p3{transform:translateZ(-40px);animation-delay:-5s;background:rgba(150,180,255,.12)}
.dl-p.p4{display:grid;place-items:end start;padding:10px;transform:translateZ(20px);animation-delay:-7.5s;background:rgba(190,210,255,.14)}
.dl-p.p4 b{font:600 12px/1 'Pretendard',sans-serif;color:#e4ebff}
@keyframes sp-dl{0%,100%{translate:0 0;rotate:y -6deg}50%{translate:0 -8px;rotate:y 6deg}}

/* EnduroSat — 임무 궤도 */
.sp-missionorbit{background:#04060d}
.mo{position:absolute;inset:0;display:grid;grid-template-rows:1fr auto;padding:10px}
.mo svg{width:100%;height:100%;overflow:visible}
.mo-planet{fill:#0f1f3a;stroke:#2e5fa8;stroke-width:1}
.mo-path{fill:none;stroke:#5a8bd8;stroke-width:1.5;stroke-dasharray:4 5}
.mo-dot{fill:#04060d;stroke:#9cc3ff;stroke-width:2}
.mo[data-step="0"] .d0,.mo[data-step="1"] .d1,.mo[data-step="2"] .d2{fill:#ffd27a;stroke:#ffd27a}
.mo-sat{transition:transform 1s cubic-bezier(.4,.1,.2,1)}
.mo-sat rect{fill:#e6eefc}
.mo-sat rect:first-child{fill:#ffd27a}
.mo-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.mo-chips button{font:500 12px/1 'Pretendard',sans-serif;min-height:30px;padding:0 12px;border-radius:999px;border:1px solid #2e4c7c;background:transparent;color:#cfe0ff;cursor:pointer}
.mo-chips button[aria-pressed=true]{background:#e6eefc;color:#04060d;border-color:#e6eefc}
.mo-chips button:focus-visible{outline:2px solid #ffd27a;outline-offset:2px}

/* Lando Norris — 두 색만. 상표 색 값을 그대로 쓰지 않고 비슷한 다른 값으로(규칙 문서) */
.sp-duotone{--dt-lime:#c4f53c;--dt-ink:#141417;background:var(--dt-ink)}
.dt{position:absolute;inset:0;overflow:hidden}
.dt-band{position:absolute;left:0;right:0;top:34%;height:34%;background:var(--dt-lime);transform-origin:left;animation:sp-dt-band 6s cubic-bezier(.7,0,.2,1) infinite}
.dt-word{position:absolute;left:8%;top:34%;height:34%;display:flex;align-items:center;font:900 clamp(28px,5vw,48px)/1 'Pretendard',sans-serif;letter-spacing:-.04em;color:var(--dt-ink);animation:sp-dt-word 6s cubic-bezier(.2,.8,.2,1) infinite}
.dt-tag{position:absolute;right:12px;bottom:10px;font:600 11px/1 'Space Grotesk','Pretendard',sans-serif;color:var(--dt-lime)}
@keyframes sp-dt-band{0%{transform:scaleX(0)}18%,82%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}
@keyframes sp-dt-word{0%,14%{transform:translateX(-30px);opacity:0}28%,82%{transform:none;opacity:1}100%{opacity:0}}

/* Material 3 Expressive — 모양이 바뀌는 단추와 8 단위 격자(CSS 만). 기본 팔레트 값을 쓰지 않는다 */
.sp-shapemorph{background:#f8f6fd}
.sm{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:12px}
.sm-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(79,70,165,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(79,70,165,.12) 1px,transparent 1px);background-size:8px 8px}
.sm-shape{position:relative;width:96px;height:96px;background:#4f46a5;border-radius:24px;animation:sp-sm 6s cubic-bezier(.3,1.3,.5,1) infinite}
.sm-chip{position:relative;padding:8px 16px;border-radius:999px;background:#dedaf4;color:#221d33;font:600 13px/1 'Pretendard',sans-serif}
.sm-note{position:absolute;right:12px;bottom:10px;font:500 11px/1 'Pretendard',sans-serif;color:#4f46a5}
@keyframes sp-sm{0%,15%{border-radius:24px;width:96px}33%,48%{border-radius:48px;width:150px}66%,82%{border-radius:50% 10% 50% 10%;width:96px}100%{border-radius:24px;width:96px}}

/* 공공 디자인 시스템 — 바뀐 부품 넷의 선 그림(상표·색을 흉내 내지 않는다) */
.sp-fourparts{background:#f6f7f8}
.fp{position:absolute;inset:0;padding:10px}
.fp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;height:100%}
.fp-part{display:grid;grid-template-rows:1fr auto auto;justify-items:center;gap:2px;padding:6px;border-radius:10px;border:1px solid #d9dde2;background:#fff;color:#22262b;cursor:pointer;transition:opacity .25s,border-color .25s}
.fp-part svg{width:100%;max-width:96px;height:100%;min-height:0;fill:none;stroke:#3b4652;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.fp-part svg .fill{fill:#3b4652}
.fp-part svg .t{fill:#3b4652;stroke:none;font:700 13px 'JetBrains Mono',monospace}
.fp-part b{font:700 11.5px/1.2 'Pretendard',sans-serif}
.fp-part span{font:500 10px/1 'Pretendard',sans-serif;color:#6b7480}
.fp.is-focus .fp-part{opacity:.35}
.fp.is-focus .fp-part[aria-pressed=true]{opacity:1;border-color:#3b4652}
.fp-part:focus-visible{outline:2px solid #3b4652;outline-offset:2px}

/* Web Almanac 'AI colors' — 흔한 보라·남색 그라디언트(#8b5cf6·#6366f1)와 기관 주 색 하나 */
.sp-aipurple{background:#f5f5f7}
.ap{position:absolute;inset:0;display:grid;grid-template-rows:1fr auto;gap:8px;padding:10px}
.ap-screen{display:flex;flex-direction:column;justify-content:center;gap:7px;padding:14px;border-radius:12px;background:linear-gradient(135deg,#8b5cf6,#6366f1);color:#fff;transition:background .4s}
.ap[data-look=agency] .ap-screen{background:#ffffff;color:#14213d;box-shadow:inset 0 0 0 1px #d9dce3}
.ap-top{width:34px;height:6px;border-radius:3px;background:rgba(255,255,255,.6)}
.ap[data-look=agency] .ap-top{background:#14213d}
.ap-screen b{font:800 18px/1.15 'Pretendard',sans-serif}
.ap-l{height:6px;width:70%;border-radius:3px;background:rgba(255,255,255,.55)}
.ap-l.s{width:50%}
.ap[data-look=agency] .ap-l{background:#c9ccd4}
.ap-cta{align-self:flex-start;margin-top:4px;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.95);color:#4c35c9;font:700 12px/1 'Pretendard',sans-serif}
.ap[data-look=agency] .ap-cta{border-radius:6px;background:#14213d;color:#fff}
.ap-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ap-cap{flex:1;margin:0;font:600 12px/1.3 'Pretendard',sans-serif;color:#2a2a30}
.ap-bar button{font:600 12px/1 'Pretendard',sans-serif;min-height:34px;padding:0 14px;border-radius:999px;border:1px solid #2a2a30;background:#fff;color:#2a2a30;cursor:pointer}
.ap-bar button[aria-pressed=true]{background:#2a2a30;color:#fff}
.ap-bar button:focus-visible{outline:2px solid #2a2a30;outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .sp *,.sp *::before,.sp *::after{animation:none!important;transition:none!important}
  .sp-route .path{stroke-dashoffset:0}
}