/* ============================================================
   Findable — 장인 데모(craft demos): 버튼·모션 라이브 위젯
   findable.css + showcase.js(.mag/.ripple/.tilt 등)와 함께 사용
   ============================================================ */

/* 데모 무대 공통 */
.craft{margin:26px 0;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,4vw,40px);position:relative;overflow:hidden}
.craft .clab{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--signal);margin-bottom:6px}
.craft h3{font-size:1.2rem;margin:0 0 4px}
.craft .cdesc{color:var(--mut);font-size:.9rem;margin:0 0 20px}
.craft .hint{margin-top:16px;font-size:.8rem;color:var(--mut);font-family:var(--mono)}
.btnlab{display:flex;flex-wrap:wrap;gap:16px;align-items:center}

/* 기본 데모 버튼 베이스 */
.db{display:inline-flex;align-items:center;gap:.55em;font-weight:700;font-size:.97rem;padding:14px 24px;
  border-radius:var(--r-pill);border:0;cursor:pointer;color:var(--paper);background:var(--ink-3);position:relative;
  font-family:inherit;transition:transform .25s var(--ease)}
.db svg{width:18px;height:18px}

/* ── 그라데이션 버튼 — 그라데이션 색이 '제자리에서' 부드럽게 호흡(hue 회전) ──
   밴드/라인 이동 0. filter:hue-rotate라 전 브라우저 동작(의존성 없음). */
@keyframes ghue{0%,100%{filter:hue-rotate(0deg)}50%{filter:hue-rotate(40deg)}}

/* 1. 그라데이션 보더 — 보더 그라데이션 색이 제자리에서 호흡 */
.b-grad{background:linear-gradient(var(--ink-2),var(--ink-2)) padding-box,
  linear-gradient(135deg,var(--signal),var(--signal-2)) border-box;border:2px solid transparent;color:var(--paper);
  animation:ghue 7s ease-in-out infinite;transition:color .3s var(--ease),transform .25s var(--ease)}
.b-grad:hover{color:var(--signal);transform:translateY(-2px)}

/* 2. 그라데이션 채움(쿨) — 채움 색이 제자리에서 호흡 */
.b-shine,.b-morph{background:linear-gradient(135deg,var(--signal),var(--signal-2));color:var(--signal-ink);
  animation:ghue 7s ease-in-out infinite;transition:transform .25s var(--ease),box-shadow .3s var(--ease)}
.b-shine:hover,.b-morph:hover{transform:translateY(-2px);box-shadow:0 16px 50px -14px rgba(124,139,255,.5)}

/* 2b. 그라데이션 채움(웜) — 다른 팔레트, 살짝 다른 속도 */
.b-rotate{background:linear-gradient(135deg,#ff9b6e,#ff5fa8);color:#190f14;
  animation:ghue 9s ease-in-out infinite;transition:transform .25s var(--ease),box-shadow .3s var(--ease)}
.b-rotate:hover{transform:translateY(-2px);box-shadow:0 16px 50px -14px rgba(255,150,120,.45)}

/* 2c. 그라데이션 글로우(라디얼) — 라디얼 색이 제자리에서 호흡 */
.b-bloom{background:radial-gradient(120% 120% at 50% 32%,var(--signal-2),var(--signal));color:var(--signal-ink);
  animation:ghue 11s ease-in-out infinite;transition:transform .25s var(--ease),box-shadow .3s var(--ease)}
.b-bloom:hover{transform:translateY(-2px);box-shadow:0 16px 50px -14px rgba(124,139,255,.5)}

@media (prefers-reduced-motion:reduce){.b-grad,.b-shine,.b-morph,.b-rotate,.b-bloom{animation:none;filter:none}}

/* 3. 리퀴드 필 */
.b-liquid{border:1px solid var(--signal);color:var(--signal);background:transparent;overflow:hidden;z-index:0}
.b-liquid::before{content:"";position:absolute;inset:0;background:var(--signal);transform:translateY(100%);transition:transform .35s var(--ease);z-index:-1}
.b-liquid:hover{color:var(--signal-ink)}
.b-liquid:hover::before{transform:translateY(0)}

/* 4. 3D 프레스 */
.b-press{background:var(--signal);color:var(--signal-ink);box-shadow:0 6px 0 #1f8d77;transform:translateY(0)}
.b-press:hover{transform:translateY(-1px);box-shadow:0 7px 0 #1f8d77}
.b-press:active{transform:translateY(5px);box-shadow:0 1px 0 #1f8d77}

/* 5. 네온 펄스 */
.b-neon{background:transparent;border:1.5px solid var(--signal);color:var(--signal);animation:neon 2s ease-in-out infinite}
@keyframes neon{0%,100%{box-shadow:0 0 4px rgba(63,230,192,.5),inset 0 0 4px rgba(63,230,192,.2)}50%{box-shadow:0 0 18px rgba(63,230,192,.9),inset 0 0 10px rgba(63,230,192,.4)}}
.b-neon:hover{background:rgba(63,230,192,.1)}

/* 6. 애로우 슬라이드 */
.b-arrow{background:var(--ink-3);color:var(--paper);padding-right:46px}
.b-arrow svg{position:absolute;right:18px;transition:transform .3s var(--ease)}
.b-arrow:hover{padding-right:54px;background:#1a2027}
.b-arrow:hover svg{transform:translateX(4px);color:var(--signal)}

/* 7. 아이콘 → 텍스트 확장 */
.b-expand{background:var(--signal);color:var(--signal-ink);padding:14px;overflow:hidden}
.b-expand .tx{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .4s var(--ease),margin .4s var(--ease);margin-left:0}
.b-expand:hover .tx{max-width:160px;margin-left:8px}

/* 8. 모프 → 로딩 → 완료 (JS) */
.b-morph{background:var(--signal);color:var(--signal-ink);min-width:150px;justify-content:center;transition:min-width .4s var(--ease),background .3s,border-radius .3s}
.b-morph.loading{min-width:52px;width:52px;padding:14px;color:transparent;pointer-events:none}
.b-morph.loading::after{content:"";position:absolute;width:18px;height:18px;border:2px solid rgba(10,12,16,.3);border-top-color:var(--signal-ink);border-radius:50%;animation:spin .7s linear infinite}
.b-morph.done{background:#2bbf9a;color:var(--signal-ink)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================================================
   모션 데모
   ============================================================ */
.motionlab{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.motionlab{grid-template-columns:1fr}}
.mbox{background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r);padding:22px;min-height:130px;display:flex;flex-direction:column;justify-content:center;gap:10px;overflow:hidden;position:relative}
.mbox .mt{font-family:var(--mono);font-size:.72rem;color:var(--signal)}

/* 스태거 */
.m-stagger{display:flex;gap:8px;flex-wrap:wrap}
.m-stagger .chip{padding:8px 14px;border-radius:var(--r-pill);background:var(--ink);border:1px solid var(--line);font-size:.85rem;
  opacity:0;transform:translateY(14px) scale(.9);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.m-stagger.in .chip{opacity:1;transform:none}
.m-stagger.in .chip:nth-child(1){transition-delay:.05s}.m-stagger.in .chip:nth-child(2){transition-delay:.12s}
.m-stagger.in .chip:nth-child(3){transition-delay:.19s}.m-stagger.in .chip:nth-child(4){transition-delay:.26s}
.m-stagger.in .chip:nth-child(5){transition-delay:.33s}.m-stagger.in .chip:nth-child(6){transition-delay:.40s}

/* 텍스트 워드 리빌 */
.m-textreveal{font-size:1.3rem;font-weight:700;line-height:1.4}
.m-textreveal .w{display:inline-block;overflow:hidden;vertical-align:bottom}
.m-textreveal .w i{display:inline-block;transform:translateY(110%);transition:transform .6s var(--ease);font-style:normal}
.m-textreveal.in .w i{transform:none}
.m-textreveal.in .w:nth-child(2) i{transition-delay:.06s}.m-textreveal.in .w:nth-child(3) i{transition-delay:.12s}
.m-textreveal.in .w:nth-child(4) i{transition-delay:.18s}.m-textreveal.in .w:nth-child(5) i{transition-delay:.24s}
.m-textreveal.in .w:nth-child(6) i{transition-delay:.30s}.m-textreveal.in .w:nth-child(7) i{transition-delay:.36s}

/* 패럴럭스 */
.m-parallax{position:relative;height:150px}
.m-parallax .layer{position:absolute;border-radius:12px;will-change:transform}
.m-parallax .l1{inset:auto 10% 10px 10%;height:60px;background:linear-gradient(135deg,#13202b,#10211e);border:1px solid var(--line)}
.m-parallax .l2{left:24%;top:18px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--signal),#1f8d77);opacity:.9}
.m-parallax .l3{right:18%;top:10px;width:46px;height:46px;border-radius:10px;background:var(--signal-2);opacity:.85}

/* 스프링 호버 */
.m-spring{align-self:flex-start;padding:12px 18px;border-radius:12px;background:var(--signal);color:var(--signal-ink);font-weight:700;cursor:pointer;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.m-spring:hover{transform:scale(1.12) rotate(-2deg)}

/* 마퀴 */
.m-marquee{overflow:hidden;white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.m-marquee .track{display:inline-flex;gap:18px;animation:marq 14s linear infinite}
.m-marquee .track span{font-family:var(--mono);font-size:.9rem;color:var(--paper-2)}
@keyframes marq{to{transform:translateX(-50%)}}

/* 스크롤 스크럽 바 */
.m-scrub{height:10px;border-radius:99px;background:var(--ink);overflow:hidden}
.m-scrub .fill{height:100%;width:0;background:linear-gradient(90deg,var(--signal),var(--signal-2));border-radius:99px}

@media(prefers-reduced-motion:reduce){
  .b-grad,.b-neon,.m-marquee .track{animation:none}
  .m-stagger .chip,.m-textreveal .w i{opacity:1;transform:none}
}

/* ============================================================
   타입 플레이그라운드 / 테마 전환 / 대비 검사기 / 멀티스텝 폼
   ============================================================ */
/* 타입 플레이그라운드 */
.typelab{display:grid;grid-template-columns:230px 1fr;gap:24px;align-items:center}
@media(max-width:640px){.typelab{grid-template-columns:1fr}}
.tl-controls{display:flex;flex-direction:column;gap:14px}
.tl-controls label{display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-size:.74rem;color:var(--mut);text-transform:uppercase;letter-spacing:.08em}
.tl-controls input[type=range]{width:100%;accent-color:var(--signal)}
.tl-specimen{margin:0;color:var(--paper);font-weight:760;transition:none}

/* 테마 전환 */
.themelab{border-radius:var(--r-lg);padding:26px;border:1px solid var(--line)}
.themelab[data-theme=dark]{--c-bg:#0a0c10;--c-fg:#eef2f3;--c-mut:#7c8794;--c-ac:#3fe6c0;--c-acfg:#0a0c10}
.themelab[data-theme=light]{--c-bg:#f4f6f7;--c-fg:#12161d;--c-mut:#5a6470;--c-ac:#0f9d82;--c-acfg:#ffffff}
.themelab[data-theme=accent]{--c-bg:#10211e;--c-fg:#eafff8;--c-mut:#79b8aa;--c-ac:#3fe6c0;--c-acfg:#06231c}
.themelab{background:var(--c-bg);transition:background .3s}
.themelab .tl-card .tl-ey{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--c-ac)}
.themelab .tl-card h4{color:var(--c-fg);font-size:1.4rem;margin:8px 0 0}
.themelab .tl-card p{color:var(--c-mut);margin:8px 0 16px;font-size:.92rem}
.themelab .tl-btn{background:var(--c-ac);color:var(--c-acfg);border:0;border-radius:var(--r-pill);padding:10px 18px;font-weight:700;cursor:pointer;font-family:inherit}
.theme-switch{display:flex;gap:8px;margin-top:16px}
.theme-switch button{padding:8px 16px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--ink-3);color:var(--paper-2);font-weight:600;cursor:pointer;font-family:inherit;font-size:.85rem}
.theme-switch button.on{background:var(--signal);color:var(--signal-ink);border-color:var(--signal)}

/* 대비 검사기 */
.contrastlab{display:grid;grid-template-columns:1fr 240px;gap:20px;align-items:stretch}
@media(max-width:640px){.contrastlab{grid-template-columns:1fr}}
.cc-preview{border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:1.7rem;font-weight:700;min-height:140px;border:1px solid var(--line)}
.cc-ctrl{display:flex;flex-direction:column;gap:12px}
.cc-ctrl label{display:flex;justify-content:space-between;align-items:center;gap:10px;font-family:var(--mono);font-size:.78rem;color:var(--mut)}
.cc-ctrl input[type=color]{width:48px;height:32px;border:1px solid var(--line);border-radius:8px;background:none;cursor:pointer}
.cc-out{margin-top:4px;font-family:var(--mono);font-size:.9rem;color:var(--paper);background:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:12px;line-height:1.7}
.cc-out b{font-size:1.3rem;color:var(--signal)}
.cc-badge{display:inline-block;margin-right:6px;margin-top:6px;padding:3px 9px;border-radius:var(--r-pill);font-size:.72rem;font-weight:700}
.cc-badge.pass{background:rgba(63,230,192,.15);color:var(--signal);border:1px solid var(--signal)}
.cc-badge.fail{background:rgba(255,122,122,.12);color:#ff7a7a;border:1px solid #ff7a7a}

/* 멀티스텝 폼 (데모) */
.msform{max-width:520px}
.ms-prog{height:6px;background:var(--ink);border-radius:99px;overflow:hidden;margin-bottom:22px}
.ms-bar{height:100%;width:33%;background:linear-gradient(90deg,var(--signal),var(--signal-2));border-radius:99px;transition:width .4s var(--ease)}
.ms-step .field{margin-bottom:14px}
.ms-step label{display:block;font-size:.85rem;font-weight:700;margin-bottom:6px}
.ms-step input,.ms-step textarea{width:100%;background:var(--ink);border:1px solid var(--line);border-radius:10px;color:var(--paper);padding:12px;font-family:inherit;font-size:.95rem}
.ms-step input:focus,.ms-step textarea:focus{outline:none;border-color:var(--signal)}
.ms-step .err{color:#ff7a7a;font-size:.8rem;margin-top:5px;display:none}
.ms-step.invalid .err{display:block}
.ms-step .chips{display:flex;gap:8px;flex-wrap:wrap}
.ms-step .chips label{display:inline-block;padding:8px 14px;border:1px solid var(--line);border-radius:var(--r-pill);font-weight:600;cursor:pointer;margin:0}
.ms-step .chips input{position:absolute;opacity:0}
.ms-step .chips input:checked+span{color:var(--signal-ink)}
.ms-step .chips label:has(input:checked){background:var(--signal);border-color:var(--signal);color:var(--signal-ink)}
.ms-nav{display:flex;justify-content:space-between;gap:10px;margin-top:8px}
.ms-prev,.ms-next{padding:12px 22px;border-radius:var(--r-pill);font-weight:700;cursor:pointer;border:1px solid var(--line);font-family:inherit}
.ms-prev{background:transparent;color:var(--paper-2)}
.ms-next{background:var(--signal);color:var(--signal-ink);border-color:var(--signal)}
.ms-done{text-align:center;padding:30px 10px}
.ms-done .ok{width:54px;height:54px;border-radius:50%;background:rgba(63,230,192,.12);border:1px solid var(--signal);display:grid;place-items:center;margin:0 auto 14px;color:var(--signal);font-size:1.6rem}

/* 마이크로카피 토글 */
.copylab .cl-card{background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:14px;transition:border-color .3s}
.copylab[data-mode=good] .cl-card{border-color:rgba(63,230,192,.35)}
.cl-empty{padding:22px;border:1px dashed var(--line);border-radius:10px;text-align:center;color:var(--mut);font-size:.92rem}
.cl-btn{align-self:flex-start;background:var(--signal);color:var(--signal-ink);border:0;border-radius:var(--r-pill);padding:12px 22px;font-weight:700;cursor:pointer;font-family:inherit}
.cl-err{color:#ff7a7a;font-size:.88rem}
.copy-switch{display:flex;gap:8px;margin-top:14px}
.copy-switch button{padding:8px 16px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--ink-3);color:var(--paper-2);font-weight:600;cursor:pointer;font-family:inherit;font-size:.85rem}
.copy-switch button.on{background:var(--signal);color:var(--signal-ink);border-color:var(--signal)}

/* 그리드 오버레이 */
.gridlab{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.gl-frame{position:relative;width:100%;max-width:900px;border:1px solid var(--line);border-radius:var(--r);padding:18px;background:var(--ink);overflow:hidden;transition:width .15s linear}
.gl-grid{position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,rgba(63,230,192,.14) 0 1px,transparent 1px calc(100%/6));opacity:0;pointer-events:none;transition:opacity .25s}
.gridlab.show-grid .gl-grid{opacity:1}
.gl-row{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;position:relative}
.gl-frame.narrow .gl-row{grid-template-columns:1fr}
.gl-box{background:linear-gradient(135deg,#13202b,#10211e);border:1px solid var(--line);border-radius:10px;min-height:74px;display:grid;place-items:center;font-weight:700;color:var(--paper-2)}
.gl-box.big{color:var(--signal)}
.gl-ctrl{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.gl-toggle{padding:9px 16px;border-radius:var(--r-pill);border:1px solid var(--signal);background:transparent;color:var(--signal);font-weight:700;cursor:pointer;font-family:inherit;font-size:.85rem}
.gridlab.show-grid .gl-toggle{background:var(--signal);color:var(--signal-ink)}
.gl-ctrl label{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.76rem;color:var(--mut)}
.gl-ctrl input[type=range]{accent-color:var(--signal)}
.gl-w{font-family:var(--mono);font-size:.76rem;color:var(--signal)}

/* 로딩 / 스켈레톤 */
.loadlab{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.loadlab .ll-card{background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;gap:16px;width:100%;max-width:460px}
.ll-thumb{width:88px;height:88px;border-radius:10px;flex:0 0 auto}
.ll-thumb-real{width:88px;height:88px;border-radius:10px;flex:0 0 auto;background:radial-gradient(circle at 30% 30%,var(--signal),#1f8d77)}
.ll-lines{flex:1;display:flex;flex-direction:column;gap:10px;justify-content:center}
.ll-line{height:13px;border-radius:6px}
.ll-line.w70{width:70%}.ll-line.w45{width:45%}.ll-line.w90{width:90%}
.skel{background:linear-gradient(90deg,#1a1f26 25%,#26303a 37%,#1a1f26 63%);background-size:400% 100%;animation:shimmer 1.4s ease infinite}
@keyframes shimmer{to{background-position:-200% 0}}
.ll-real-txt b{color:var(--paper);font-size:1.05rem}
.ll-real-txt p{color:var(--paper-2);font-size:.88rem;margin-top:6px}
.loadlab .skel{display:block}
.loadlab.loaded .skel{display:none}
.loadlab [data-real]{display:none}
.loadlab.loaded [data-real]{display:block}
.ll-reload{padding:10px 18px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--ink-3);color:var(--paper);font-weight:700;cursor:pointer;font-family:inherit;font-size:.85rem}
@media(prefers-reduced-motion:reduce){.skel{animation:none}}

/* ============================================================
   합작(collaboration) — 여러 장인이 함께 만든 라이브 모듈
   ============================================================ */
.collab{display:grid;grid-template-columns:1.25fr .9fr;gap:26px;margin:28px 0;align-items:center}
@media(max-width:760px){.collab{grid-template-columns:1fr}}
.collab-card{position:relative;background:linear-gradient(150deg,#10211e,#0d1722 55%,#0a0c10);border:1px solid rgba(63,230,192,.32);border-radius:var(--r-lg);padding:clamp(26px,4vw,38px);overflow:hidden}
.collab-card::before{content:"";position:absolute;width:60%;height:120%;right:-15%;top:-30%;background:radial-gradient(closest-side,rgba(63,230,192,.16),transparent 70%);pointer-events:none}
.cc-badge2{position:absolute;top:16px;right:18px;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--signal);border:1px solid rgba(63,230,192,.4);border-radius:var(--r-pill);padding:4px 10px}
.cc-h{font-size:clamp(1.6rem,4.2vw,2.5rem);font-weight:800;line-height:1.16;margin:0;letter-spacing:-.02em;color:var(--paper)}
.cc-h .sg{color:var(--signal)}
.cc-sub{color:var(--paper-2);margin:12px 0 0;font-size:.98rem}
.cc-feats{margin-top:18px}
.cf-form{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap;align-items:center}
.cf-input{flex:1;min-width:190px;background:var(--ink);border:1px solid var(--line);border-radius:var(--r-pill);padding:13px 18px;color:var(--paper);font-family:inherit;font-size:.95rem;transition:border-color .2s}
.cf-input:focus{outline:none;border-color:var(--signal)}
.cf-input.invalid{border-color:#ff7a7a}
.cf-msg{width:100%;color:var(--signal);font-weight:700;font-size:.95rem;margin-top:4px}
.cf-help{color:var(--mut);font-size:.76rem;margin-top:12px}
.collab-legend{list-style:none;margin:0;padding:0;counter-reset:lg;display:flex;flex-direction:column;gap:11px}
.collab-legend .lg-t{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-bottom:4px}
.collab-legend li{counter-increment:lg;position:relative;padding-left:36px;font-size:.92rem;line-height:1.4}
.collab-legend li::before{content:counter(lg);position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;background:rgba(63,230,192,.12);border:1px solid var(--signal);color:var(--signal);font-family:var(--mono);font-size:.76rem;display:grid;place-items:center}
.collab-legend a{color:var(--paper-2)}
.collab-legend a:hover{color:var(--signal)}
.collab-legend b{color:var(--paper);font-weight:700}

/* 블러업 프로그레시브 로딩(이미지) */
.bulab{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.bu-img{width:100%;max-width:440px;height:220px;border-radius:var(--r);position:relative;overflow:hidden;
  background:linear-gradient(135deg,#1f8d77,#3fe6c0 38%,#7c8bff);filter:blur(16px) saturate(1.5);transform:scale(1.06);transition:filter .9s ease,transform .9s ease}
.bu-img::after{content:"운정 신도시 · 데모 이미지";position:absolute;left:16px;bottom:14px;font-size:.8rem;color:rgba(10,12,16,.7);font-weight:700}
.bulab.loaded .bu-img{filter:none;transform:none}
.bu-size{font-family:var(--mono);font-size:.78rem;color:var(--mut)}
.bulab.loaded .bu-size .now{color:var(--signal)}
.bu-reload{padding:10px 18px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--ink-3);color:var(--paper);font-weight:700;cursor:pointer;font-family:inherit;font-size:.85rem}

/* 애니메이션 아이콘 */
.iconlab{display:flex;flex-wrap:wrap;gap:14px}
.icn{display:flex;flex-direction:column;align-items:center;gap:9px;padding:18px 20px;background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r);min-width:96px;transition:border-color .3s}
.icn:hover{border-color:rgba(63,230,192,.4)}
.icn svg{width:30px;height:30px;stroke:var(--signal);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.icn span{font-size:.76rem;color:var(--paper-2)}
.icn-check svg path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .6s var(--ease)}
.icn-check:hover svg path{stroke-dashoffset:0}
.icn-arrow:hover svg{transform:translateX(5px)}
.icn-plus:hover svg{transform:rotate(90deg)}
.icn-heart:hover svg{animation:hb .6s ease}
@keyframes hb{0%,100%{transform:scale(1)}30%{transform:scale(1.28)}}
.icn-bell:hover svg{animation:bell .6s ease}
@keyframes bell{0%,100%{transform:rotate(0)}20%{transform:rotate(14deg)}40%{transform:rotate(-12deg)}60%{transform:rotate(8deg)}80%{transform:rotate(-4deg)}}
@media(prefers-reduced-motion:reduce){.icn svg,.icn-check svg path{animation:none!important;transition:none!important;stroke-dashoffset:0}}

/* 정보구조(IA) 트리 */
.iatree{font-family:var(--mono);font-size:.9rem;background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}
.iatree details details{margin-left:14px;border-left:1px solid var(--line);padding-left:14px;margin-top:4px}
.iatree summary{cursor:pointer;padding:6px 0;color:var(--paper);list-style:none;display:flex;align-items:center;gap:8px;font-weight:700}
.iatree summary::-webkit-details-marker{display:none}
.iatree summary::before{content:"▸";color:var(--signal);transition:transform .2s;display:inline-block}
.iatree details[open]>summary::before{transform:rotate(90deg)}
.iatree ul{list-style:none;margin:2px 0 4px 14px;padding-left:14px;border-left:1px solid var(--line)}
.iatree li{padding:3px 0;color:var(--paper-2);font-weight:400}
.iatree li::before{content:"– ";color:var(--mut)}

/* SERP 미리보기 */
.serplab{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
@media(max-width:640px){.serplab{grid-template-columns:1fr}}
.serp-prev{background:#fff;border-radius:10px;padding:16px 18px}
.serp-url{color:#202124;font-size:.8rem}
.serp-title{color:#1a0dab;font-size:1.15rem;line-height:1.3;margin:3px 0;font-weight:500}
.serp-desc{color:#4d5156;font-size:.86rem;line-height:1.5}
.serp-ctrl{display:flex;flex-direction:column;gap:6px}
.serp-ctrl label{display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-size:.74rem;color:var(--mut);text-transform:uppercase;letter-spacing:.06em}
.serp-ctrl input,.serp-ctrl textarea{background:var(--ink);border:1px solid var(--line);border-radius:8px;color:var(--paper);padding:10px 12px;font-family:inherit;font-size:.92rem}
.serp-ctrl textarea{min-height:70px;resize:vertical}
.serp-meter{font-family:var(--mono);font-size:.74rem;margin:0 0 10px;color:var(--mut)}
.serp-meter b.ok{color:var(--signal)}.serp-meter b.warn{color:#ffb454}.serp-meter b.bad{color:#ff7a7a}

/* 코드 복사 */
.codebox{background:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:16px;font-family:var(--mono);font-size:.78rem;color:var(--paper-2);overflow-x:auto;white-space:pre;line-height:1.65;margin:0;max-width:100%}
@media(max-width:640px){.codebox{overflow-x:hidden;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}}
.copybtn{margin-top:10px;padding:9px 16px;border-radius:var(--r-pill);border:1px solid var(--signal);background:transparent;color:var(--signal);font-weight:700;cursor:pointer;font-family:inherit;font-size:.85rem}
.copybtn.done{background:var(--signal);color:var(--signal-ink)}

/* answer-block 빌더 */
.ablab{display:flex;flex-direction:column;gap:12px}
.ablab textarea{width:100%;min-height:120px;background:var(--ink);border:1px solid var(--line);border-radius:var(--r);color:var(--paper);padding:14px;font-family:inherit;font-size:.96rem;line-height:1.6}
.ablab textarea:focus{outline:none;border-color:var(--signal)}
.ab-out{font-family:var(--mono);font-size:.84rem;color:var(--paper-2);display:flex;gap:18px;align-items:baseline;flex-wrap:wrap}
.ab-out .big{font-size:1.5rem;font-weight:800;color:var(--signal)}
.ab-out .v.ok{color:var(--signal)}.ab-out .v.warn{color:#ffb454}
.ab-sample{align-self:flex-start;padding:8px 14px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--ink-3);color:var(--paper-2);font-weight:600;cursor:pointer;font-family:inherit;font-size:.82rem}

/* 접근성 포커스 데모 */
.a11y-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.a11y-el{padding:11px 18px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--ink-3);color:var(--paper);font-weight:600;cursor:pointer;font-family:inherit;font-size:.9rem;text-decoration:none;transition:box-shadow .15s}
.a11y-el:focus,.a11y-el.focusing{outline:none;box-shadow:0 0 0 3px var(--signal)}
.a11ylab.nofocus .a11y-el:focus,.a11ylab.nofocus .a11y-el.focusing{box-shadow:none}
.a11y-ctrl{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.a11y-next{padding:10px 18px;border-radius:var(--r-pill);border:1px solid var(--signal);background:var(--signal);color:var(--signal-ink);font-weight:700;cursor:pointer;font-family:inherit;font-size:.85rem}
.a11y-toggle{display:flex;gap:7px;align-items:center;font-size:.86rem;color:var(--paper-2);cursor:pointer}

/* 성능 — 페이지 용량 시각화 */
.weightlab{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.wt-row{display:grid;grid-template-columns:64px 1fr 48px;gap:12px;align-items:center}
.wt-name{color:var(--paper-2);font-family:var(--mono);font-size:.76rem}
.wt-track{background:var(--ink);border-radius:99px;height:16px;overflow:hidden}
.wt-bar{height:100%;background:linear-gradient(90deg,var(--signal),var(--signal-2));border-radius:99px;width:0;transition:width .7s var(--ease)}
.wt-val{font-family:var(--mono);font-size:.74rem;color:var(--mut);text-align:right}
.wt-total{font-family:var(--mono);font-size:.9rem;color:var(--paper);margin-top:4px;padding-top:12px;border-top:1px solid var(--line)}
.wt-total b{color:var(--signal);font-size:1.25rem}
.wt-toggle{padding:10px 18px;border-radius:var(--r-pill);border:1px solid var(--signal);background:transparent;color:var(--signal);font-weight:700;cursor:pointer;font-family:inherit;font-size:.85rem}
.weightlab[data-mode=after] ~ .wt-toggle{background:var(--signal);color:var(--signal-ink)}

/* 운영 — 체크 가능 런칭 체크리스트 */
.checklab{display:flex;flex-direction:column;gap:8px}
.ck-prog{height:8px;background:var(--ink);border-radius:99px;overflow:hidden}
.ck-bar{height:100%;width:0;background:linear-gradient(90deg,var(--signal),var(--signal-2));border-radius:99px;transition:width .4s var(--ease)}
.ck-count{font-family:var(--mono);font-size:.85rem;color:var(--signal);margin:4px 0 8px}
.ck-item{display:flex;gap:11px;align-items:center;font-size:.92rem;color:var(--paper-2);cursor:pointer;padding:7px 0;border-bottom:1px solid var(--line)}
.ck-item:last-child{border-bottom:0}
.ck-item input{width:18px;height:18px;accent-color:var(--signal);flex:0 0 auto}
.ck-item:has(input:checked){color:var(--paper)}
.ck-item:has(input:checked) .ck-tx{text-decoration:line-through;text-decoration-color:var(--signal);opacity:.7}

/* PM — 전체 적용 작품(풀 모듈) */
.pmwork{position:relative;overflow:hidden;border:1px solid rgba(63,230,192,.32);border-radius:var(--r-lg);background:linear-gradient(160deg,#10211e,#0b1016 58%,#0a0c10);padding:clamp(26px,4vw,46px);margin:28px 0}
.pmwork .pm-inner{position:relative;z-index:1}
.pm-h{font-size:clamp(1.8rem,5vw,3rem);font-weight:800;line-height:1.12;margin:0;letter-spacing:-.02em;color:var(--paper)}
.pm-h .sg{color:var(--signal)}
.pm-sub{color:var(--paper-2);margin:14px 0 0;max-width:50ch;font-size:1rem}
.pm-chips{margin-top:18px}
.pmwork .hero-actions{margin-top:22px}
.pm-cards{margin-top:26px}
.pmwork .stats{margin-top:28px;text-align:left}
.pmwork .stat .num{font-size:clamp(2rem,5vw,2.8rem)}
.pmwork .cf-form{margin-top:26px;max-width:500px}
.pmwork .cf-help{margin-top:10px}

/* === 레벨업 위젯 10종 === */
/* 1. A/B 헤드라인 */
.abhead{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.abhead{grid-template-columns:1fr}}
.abh-card{background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r);padding:20px;transition:border-color .3s,box-shadow .3s}
.abh-card.win{border-color:var(--signal);box-shadow:var(--glow)}
.abh-tag{font-family:var(--mono);font-size:.72rem;color:var(--signal);margin-bottom:8px}
.abh-card p{color:var(--paper);font-weight:700;font-size:1.05rem;line-height:1.35}
.abh-switch{display:flex;gap:8px;align-items:center;margin-top:14px;flex-wrap:wrap}
.abh-switch button{padding:9px 16px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--ink-3);color:var(--paper-2);font-weight:600;cursor:pointer;font-family:inherit;font-size:.85rem}
.abh-msg{font-size:.85rem;color:var(--signal)}
/* 2. 팔레트 생성기 */
.palgen label{display:flex;gap:10px;align-items:center;font-family:var(--mono);font-size:.78rem;color:var(--mut)}
.palgen input[type=color]{width:46px;height:32px;border:1px solid var(--line);border-radius:8px;background:none;cursor:pointer}
.pal-row{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.pal-sw{flex:1;min-width:70px;height:80px;border-radius:10px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;font-family:var(--mono);font-size:.68rem;color:rgba(0,0,0,.55);font-weight:700}
/* 3. 버튼 상태 머신 */
.btnstate{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.bs-demo{padding:13px 26px;border-radius:var(--r-pill);border:0;background:var(--signal);color:var(--signal-ink);font-weight:700;font-family:inherit;font-size:.97rem;min-width:130px;cursor:pointer;transition:all .25s}
.bs-demo.bs-hover{filter:brightness(1.12);transform:translateY(-2px);box-shadow:var(--glow)}
.bs-demo.bs-loading{color:transparent;position:relative;pointer-events:none}
.bs-demo.bs-loading::after{content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;border:2px solid rgba(10,12,16,.3);border-top-color:var(--signal-ink);border-radius:50%;animation:spin .7s linear infinite}
.bs-demo.bs-success{background:#2bbf9a}
.bs-demo.bs-error{background:#e2574c;color:#fff}
.bs-steps{display:flex;gap:8px;flex-wrap:wrap}
.bs-steps button{padding:7px 13px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--ink-3);color:var(--paper-2);font-weight:600;cursor:pointer;font-family:inherit;font-size:.8rem}
.bs-steps button.on{background:var(--signal);color:var(--signal-ink);border-color:var(--signal)}
/* 4. 이징 비교 */
.easelab{display:flex;flex-direction:column;gap:14px}
.ease-track{display:flex;align-items:center;gap:14px}
.ease-track .rail{flex:1;height:4px;background:var(--ink);border-radius:99px;position:relative}
.ease-track b{font-family:var(--mono);font-size:.74rem;color:var(--mut);width:78px}
.ease-dot{position:absolute;top:50%;left:0;width:16px;height:16px;border-radius:50%;background:var(--signal);transform:translate(0,-50%)}
.easelab.go .e-linear{transform:translate(calc(100% * 12),-50%);transition:transform 1.1s linear}
.easelab.go .e-out{transform:translate(calc(100% * 12),-50%);transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.easelab.go .e-spring{transform:translate(calc(100% * 12),-50%);transition:transform 1.1s cubic-bezier(.34,1.56,.64,1)}
.ease-run{align-self:flex-start;padding:9px 18px;border-radius:var(--r-pill);border:1px solid var(--signal);background:var(--signal);color:var(--signal-ink);font-weight:700;cursor:pointer;font-family:inherit;font-size:.85rem}
/* 5. 모듈러 스케일 */
.scalelab label{display:flex;gap:10px;align-items:center;font-family:var(--mono);font-size:.76rem;color:var(--mut)}
.scalelab input[type=range]{accent-color:var(--signal)}
.sc-val{color:var(--signal)}
.sc-prev{margin-top:16px;display:flex;flex-direction:column;gap:6px}
.sc-l{color:var(--paper);font-weight:760;line-height:1.1}
.sc-l[data-step="0"]{color:var(--paper-2);font-weight:400}
/* 6. 전환 퍼널 */
.funnellab{display:flex;flex-direction:column;gap:12px;margin-bottom:14px}
.fn-row{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:center}
.fn-row>span{font-family:var(--mono);font-size:.76rem;color:var(--paper-2)}
.fn-track{background:var(--ink);border-radius:8px;overflow:hidden;height:30px}
.fn-bar{height:100%;width:0;background:linear-gradient(90deg,var(--signal),var(--signal-2));border-radius:8px;transition:width .7s var(--ease);display:flex;align-items:center;justify-content:flex-end;padding-right:8px;font-family:var(--mono);font-size:.72rem;color:var(--signal-ink);font-weight:700}
.fn-toggle{padding:9px 18px;border-radius:var(--r-pill);border:1px solid var(--signal);background:transparent;color:var(--signal);font-weight:700;cursor:pointer;font-family:inherit;font-size:.85rem}
.funnellab[data-mode=after] ~ .fn-toggle{background:var(--signal);color:var(--signal-ink)}
/* 7. 미니 대시보드 */
.dash-bars{display:flex;gap:8px;align-items:flex-end;height:120px}
.dash-bars i{flex:1;background:linear-gradient(180deg,var(--signal),#1f8d77);border-radius:6px 6px 0 0;height:0;transition:height .8s var(--ease)}
.dashlab.in .dash-bars i{height:var(--h)}
.dash-stat{margin-top:14px;font-family:var(--mono);font-size:.85rem;color:var(--paper-2)}
.dash-stat .big{font-size:1.6rem;font-weight:800;color:var(--signal)}
/* 8. 디바이스 리사이저 */
.devlab{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.dev-frame{width:100%;max-width:1000px;border:1px solid var(--line);border-radius:var(--r);padding:14px;background:var(--ink);transition:width .15s linear}
.dev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.dev-frame.t .dev-grid{grid-template-columns:repeat(2,1fr)}
.dev-frame.m .dev-grid{grid-template-columns:1fr}
.dev-grid span{background:linear-gradient(135deg,#13202b,#10211e);border:1px solid var(--line);border-radius:8px;min-height:54px;display:grid;place-items:center;color:var(--paper-2);font-weight:700}
.devlab label{display:flex;gap:10px;align-items:center;font-family:var(--mono);font-size:.76rem;color:var(--mut)}
.dev-bp{color:var(--signal);font-weight:700}
/* 9. 스마트 검증 */
.vallab input{width:100%;max-width:420px;background:var(--ink);border:1px solid var(--line);border-radius:var(--r-pill);color:var(--paper);padding:13px 18px;font-family:inherit;font-size:.95rem;transition:border-color .2s}
.vallab input.ok{border-color:var(--signal)}.vallab input.bad{border-color:#ff7a7a}
.val-msg{margin-top:10px;font-family:var(--mono);font-size:.84rem;color:var(--mut)}
.val-msg.ok{color:var(--signal)}.val-msg.bad{color:#ff7a7a}
/* 10. 신뢰 점수 */
.trustlab{display:flex;flex-direction:column;gap:8px}
.ts-score{font-family:var(--mono);font-size:.9rem;color:var(--paper);margin-bottom:6px}
.ts-score b{font-size:1.8rem;color:var(--signal)}
.ts-prog{height:8px;background:var(--ink);border-radius:99px;overflow:hidden;margin-bottom:8px}
.ts-fill{height:100%;width:0;background:linear-gradient(90deg,var(--signal),var(--signal-2));transition:width .4s var(--ease)}
.ts-item{display:flex;gap:11px;align-items:center;font-size:.92rem;color:var(--paper-2);cursor:pointer;padding:6px 0}
.ts-item input{width:18px;height:18px;accent-color:var(--signal)}
.ts-item:has(input:checked){color:var(--paper)}

/* === 합작 2 + 숨은 노하우 위젯 === */
/* 요금 모듈 */
.pricelab .pl-toggle{display:inline-flex;gap:4px;background:var(--ink);border:1px solid var(--line);border-radius:99px;padding:4px;margin-bottom:20px}
.pl-toggle button{padding:8px 16px;border:0;border-radius:99px;background:transparent;color:var(--paper-2);font-weight:700;cursor:pointer;font-family:inherit;font-size:.85rem}
.pl-toggle button.on{background:var(--signal);color:var(--signal-ink)}
.pl-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:680px){.pl-cards{grid-template-columns:1fr}}
.pl-card{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;display:flex;flex-direction:column;position:relative}
.pl-card.feat{border-color:var(--signal);box-shadow:var(--glow)}
.pl-card.feat::after{content:"추천";position:absolute;top:-11px;left:22px;background:var(--signal);color:var(--signal-ink);font-size:.72rem;font-weight:800;padding:4px 11px;border-radius:99px;font-family:var(--mono)}
.pl-name{font-weight:800;font-size:1.1rem}
.pl-price{margin:10px 0 14px;font-family:var(--mono);color:var(--paper-2);font-size:.86rem;min-height:38px}
.pl-price .disc{color:var(--signal);font-weight:700}
.pl-card ul{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-direction:column;gap:7px;font-size:.85rem;color:var(--paper-2)}
.pl-card li::before{content:"✓ ";color:var(--signal)}
.pl-card .db{margin-top:auto;justify-content:center}
/* 인터랙티브 탭 */
.tablab .tab-nav{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:18px;flex-wrap:wrap}
.tab-nav button{padding:10px 16px;border:0;background:transparent;color:var(--paper-2);font-weight:700;cursor:pointer;font-family:inherit;border-bottom:2px solid transparent;margin-bottom:-1px;font-size:.9rem}
.tab-nav button.on{color:var(--signal);border-bottom-color:var(--signal)}
.tab-panel{color:var(--paper-2);line-height:1.7;font-size:.95rem;animation:fadein .35s var(--ease)}
.tab-panel h4{color:var(--paper);font-size:1.15rem;margin:0 0 8px}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* :has() 데모 */
.haslab{display:flex;flex-direction:column;gap:12px}
.has-card{display:flex;gap:12px;align-items:center;padding:18px;border:1px solid var(--line);border-radius:var(--r);background:var(--ink-3);cursor:pointer;transition:border-color .3s,background .3s,box-shadow .3s}
.has-card input{width:18px;height:18px;accent-color:var(--signal)}
.has-card span{color:var(--paper)}
.has-card:has(input:checked){border-color:var(--signal);background:linear-gradient(135deg,#10211e,var(--ink-3));box-shadow:var(--glow)}
.has-card:has(input:checked) span::after{content:" — 부모 카드가 바뀌었습니다 ✓";color:var(--signal);font-weight:700}
.has-note{font-family:var(--mono);font-size:.78rem;color:var(--mut)}
/* 시스템 폰트 vs 웹폰트 시뮬 */
.fontlab .ft-sample{font-size:clamp(1.3rem,3.4vw,2rem);font-weight:800;color:var(--paper);margin:0 0 16px;transition:filter .25s,opacity .25s,letter-spacing .25s}
.fontlab.loading .ft-sample{filter:blur(5px);opacity:.45;letter-spacing:.06em}
.ft-ctrl{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.ft-sim{padding:9px 16px;border-radius:99px;border:1px solid var(--signal);background:transparent;color:var(--signal);font-weight:700;cursor:pointer;font-family:inherit;font-size:.85rem}
.ft-note{font-family:var(--mono);font-size:.76rem;color:var(--mut)}

/* === GEO 자가진단 도구 === */
.geocheck{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:start;margin:24px 0}
@media(max-width:820px){.geocheck{grid-template-columns:1fr}}
.gc-url{margin-bottom:18px}
.gc-url label{display:block;font-size:.8rem;font-weight:700;margin-bottom:7px;color:var(--paper)}
.gc-url input{width:100%;background:var(--ink);border:1px solid var(--line);border-radius:var(--r-pill);color:var(--paper);padding:12px 18px;font-family:inherit;font-size:.95rem}
.gc-url input:focus{outline:none;border-color:var(--signal)}
.gc-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.gc-links a{font-family:var(--mono);font-size:.74rem;color:var(--signal);border:1px solid rgba(63,230,192,.4);border-radius:99px;padding:5px 11px}
.gc-links a.off{color:var(--mut);border-color:var(--line);pointer-events:none}
.gc-cat{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--signal);margin:16px 0 4px}
.gc-cat:first-child{margin-top:0}
.gc-q{display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--line);cursor:pointer;font-size:.92rem;color:var(--paper-2)}
.gc-q input{width:18px;height:18px;accent-color:var(--signal);margin-top:2px;flex:0 0 auto}
.gc-q:has(input:checked){color:var(--paper)}
.gc-panel{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;text-align:center;position:sticky;top:80px}
.gc-ringwrap{position:relative;width:140px;height:140px;margin:0 auto}
.gc-ring{transform:rotate(-90deg);width:140px;height:140px}
.gc-track{fill:none;stroke:var(--ink);stroke-width:10}
.gc-prog{fill:none;stroke:var(--signal);stroke-width:10;stroke-linecap:round;stroke-dasharray:327;stroke-dashoffset:327;transition:stroke-dashoffset .6s var(--ease)}
.gc-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:2.4rem;font-weight:800;color:var(--paper);line-height:1}
.gc-num small{font-size:.8rem;color:var(--mut);font-weight:600}
.gc-grade{margin-top:14px;display:inline-block;padding:5px 16px;border-radius:99px;font-weight:800;font-family:var(--mono);font-size:.85rem;border:1px solid var(--line);color:var(--mut)}
.gc-grade.a{background:var(--signal);color:var(--signal-ink);border-color:var(--signal)}
.gc-grade.b{border-color:var(--signal);color:var(--signal)}
.gc-grade.c{border-color:#ffb454;color:#ffb454}
.gc-grade.d{border-color:#ff7a7a;color:#ff7a7a}
.gc-msg{margin-top:12px;color:var(--paper-2);font-size:.9rem;line-height:1.6}
.gc-improve{margin-top:14px;text-align:left;display:flex;flex-direction:column;gap:5px}
.gc-improve .imp{display:flex;gap:8px;color:var(--mut);font-size:.82rem}
.gc-improve .imp::before{content:"→";color:var(--signal);flex:0 0 auto}

/* === 견적기·필터·플립·토스트 === */
/* 인터랙티브 견적기 */
.estcalc{display:flex;flex-direction:column;gap:18px}
.ec-field .ec-top{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.78rem;color:var(--paper-2);margin-bottom:7px}
.ec-field .ec-top b{color:var(--signal)}
.estcalc input[type=range]{width:100%;accent-color:var(--signal)}
.ec-out{margin-top:6px;padding-top:16px;border-top:1px solid var(--line)}
.ec-tier{font-size:1.5rem;font-weight:800;color:var(--signal)}
.ec-bar{height:10px;background:var(--ink);border-radius:99px;overflow:hidden;margin:12px 0}
.ec-fill{height:100%;width:0;background:linear-gradient(90deg,var(--signal),var(--signal-2));border-radius:99px;transition:width .5s var(--ease)}
.ec-note{font-size:.84rem;color:var(--mut);line-height:1.6}
/* 라이브 필터 */
.filterlab input{width:100%;background:var(--ink);border:1px solid var(--line);border-radius:var(--r-pill);color:var(--paper);padding:12px 18px;font-family:inherit;font-size:.95rem}
.filterlab input:focus{outline:none;border-color:var(--signal)}
.fl-list{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.fl-item{padding:10px 16px;border:1px solid var(--line);border-radius:var(--r-pill);font-size:.88rem;color:var(--paper-2);transition:border-color .2s,color .2s}
.fl-item.hide{display:none}
.fl-empty{color:var(--mut);font-family:var(--mono);font-size:.82rem;margin-top:12px}
/* 플립 카드 */
.flipgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:600px){.flipgrid{grid-template-columns:1fr}}
.flipcard{perspective:900px;height:130px;cursor:pointer;border-radius:var(--r)}
.fc-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s var(--ease)}
.flipcard:hover .fc-inner,.flipcard:focus .fc-inner,.flipcard:focus-visible .fc-inner,.flipcard.flipped .fc-inner{transform:rotateY(180deg)}
.fc-front,.fc-back{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:var(--r);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:16px;text-align:center;border:1px solid var(--line)}
.fc-front{background:var(--ink-3);color:var(--paper);font-weight:700}
.fc-front .fc-k{font-family:var(--mono);font-size:.72rem;color:var(--signal)}
.fc-back{background:linear-gradient(135deg,#10211e,var(--ink-3));color:var(--paper-2);font-size:.88rem;transform:rotateY(180deg)}
@media(prefers-reduced-motion:reduce){.fc-inner{transition:none}}
/* 토스트 */
.toastlab{display:flex;flex-direction:column;gap:14px}
.to-row{display:flex;gap:10px;flex-wrap:wrap}
.to-btn{padding:11px 20px;border-radius:var(--r-pill);border:1px solid var(--signal);background:var(--signal);color:var(--signal-ink);font-weight:700;cursor:pointer;font-family:inherit;font-size:.9rem}
.to-btn.err{background:transparent;color:#ff7a7a;border-color:#ff7a7a}
.to-stack{display:flex;flex-direction:column;gap:8px;min-height:8px}
.toast{padding:12px 16px;border-radius:var(--r);background:var(--ink-3);border:1px solid var(--signal);color:var(--paper);font-size:.9rem;display:flex;gap:10px;align-items:center;box-shadow:var(--shadow);animation:toastin .3s var(--ease);max-width:340px}
.toast.err{border-color:#ff7a7a}
.toast .tic{color:var(--signal);font-weight:800}
.toast.err .tic{color:#ff7a7a}
.toast.out{animation:toastout .3s var(--ease) forwards}
@keyframes toastin{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@keyframes toastout{to{opacity:0;transform:translateX(-16px)}}

/* === 최신 브라우저 기술 위젯 === */
/* View Transitions */
.vtlab{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.vt-stage{font-size:clamp(1.5rem,4.5vw,2.4rem);font-weight:800;color:var(--signal);min-height:1.4em;view-transition-name:vtstage}
::view-transition-old(vtstage),::view-transition-new(vtstage){animation-duration:.5s}
.vt-btn{padding:10px 20px;border-radius:var(--r-pill);border:1px solid var(--signal);background:var(--signal);color:var(--signal-ink);font-weight:700;cursor:pointer;font-family:inherit;font-size:.88rem}
.vt-note{font-family:var(--mono);font-size:.74rem;color:var(--mut)}
/* Container Queries */
.cqlab{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.cq-frame{container-type:inline-size;width:100%;max-width:640px;border:1px solid var(--line);border-radius:var(--r);padding:16px;background:var(--ink);transition:width .15s linear}
.cq-card{display:flex;gap:16px;align-items:center;background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.cq-ic{font-size:2rem;color:var(--signal);flex:0 0 auto}
.cq-card b{color:var(--paper)}
.cq-card p{color:var(--paper-2);font-size:.86rem;margin-top:4px}
@container (max-width:400px){.cq-card{flex-direction:column;text-align:center;gap:8px}}
.cqlab label{font-family:var(--mono);font-size:.76rem;color:var(--mut);width:100%}
.cqlab input[type=range]{accent-color:var(--signal)}
/* Scroll-driven animation */
.sdlab .sd-track{height:14px;background:var(--ink);border-radius:99px;overflow:hidden;margin:10px 0}
.sdlab .sd-bar{height:100%;background:linear-gradient(90deg,var(--signal),var(--signal-2));transform:scaleX(0);transform-origin:left}
@supports (animation-timeline:view()){.sdlab .sd-bar{animation:sdfill linear both;animation-timeline:view();animation-range:entry 0% cover 55%}}
@supports not (animation-timeline:view()){.sdlab .sd-bar{transform:scaleX(1)}}
@keyframes sdfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.sd-note{font-family:var(--mono);font-size:.74rem;color:var(--mut)}
/* INP / 반응성 */
.inplab{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.inp-row{display:flex;gap:10px;flex-wrap:wrap}
.inp-btn{padding:11px 18px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--ink-3);color:var(--paper);font-weight:700;cursor:pointer;font-family:inherit;font-size:.86rem}
.inp-btn.heavy{border-color:#ffb454;color:#ffb454}
.inp-out{font-family:var(--mono);font-size:.88rem;color:var(--paper-2);min-height:1.4em}
.inp-out b{font-size:1.2rem}
.inp-out b.ok{color:var(--signal)}.inp-out b.warn{color:#ffb454}.inp-out b.bad{color:#ff7a7a}

/* combo-hero 데모 폴리시 */
.hero-demo{position:relative;overflow:hidden;border-radius:var(--r-lg,16px);padding:38px 26px;min-height:220px;display:flex;align-items:center;background:linear-gradient(140deg,var(--ink-2,#10151c),var(--ink,#0b0f14))}
.hero-demo>canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.5;z-index:0}
.hero-demo-in{position:relative;z-index:1;display:grid;gap:14px;max-width:560px}
.hero-demo-h{font-size:clamp(1.4rem,3.4vw,2.1rem);font-weight:850;line-height:1.18;letter-spacing:-.02em}
.hero-demo-sub{color:var(--mut,#9aa6b2);font-size:1rem;max-width:46ch}
.hero-demo-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.hero-demo .answer-card{margin-top:6px}