@charset "utf-8";
/* ==========================================================================
   AIPM 공용 스타일 — 설계도(blueprint) 톤
   원본 prompt-generator-v2_2.html 의 토큰을 계승한다.
   ========================================================================== */

:root{
  --bg:#ECEFF3; --paper:#FFFFFF; --ink:#101B2D; --ink-soft:rgba(16,27,45,.62);
  --line:#D8DEE6; --line-strong:#B9C2CE; --accent:#FF4D00; --accent-soft:rgba(255,77,0,.08);
  --ok:#0E7A4D; --warn:#B4690E; --danger:#C0392B; --radius:10px;
  --mono:'IBM Plex Mono','SF Mono','Consolas',monospace;
  --sans:'Pretendard Variable',Pretendard,-apple-system,'Noto Sans KR',sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.aipm{
  font-family:var(--sans);background:var(--bg);
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:32px 32px;color:var(--ink);line-height:1.6;min-height:100vh;padding-bottom:80px;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}

/* ---------- 헤더 ---------- */
.ap-header{border-bottom:2px solid var(--ink);background:var(--paper);position:sticky;top:0;z-index:50}
.ap-header-inner{max-width:1360px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ap-brand{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.ap-brand .mark{font-family:var(--mono);font-size:11px;letter-spacing:.18em;background:var(--ink);color:#fff;padding:4px 8px}
.ap-brand h1{font-size:17px;font-weight:800}
.ap-brand .ver{font-family:var(--mono);font-size:11px;color:var(--accent);font-weight:600}
.ap-nav{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.ap-nav a{font-size:13px;padding:7px 12px;border-radius:8px;color:var(--ink-soft);font-weight:600}
.ap-nav a:hover{background:var(--bg);color:var(--ink)}
.ap-nav a.on{background:var(--ink);color:#fff}
.ap-nav .sep{width:1px;height:16px;background:var(--line-strong);margin:0 4px}

/* ---------- 레이아웃 ---------- */
.ap-main{max-width:1360px;margin:0 auto;padding:28px 24px}
.ap-narrow{max-width:900px}
.ap-grid-2{display:grid;gap:24px}
@media(min-width:1100px){.ap-grid-2{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:start}}

/* ---------- 페이지 타이틀 ---------- */
.ap-page-h{margin-bottom:22px}
.ap-page-h .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--accent);font-weight:600}
.ap-page-h h2{font-size:26px;font-weight:800;margin-top:6px;letter-spacing:-.02em}
.ap-page-h p{font-size:13.5px;color:var(--ink-soft);margin-top:8px;max-width:70ch}

/* ---------- 패널 ---------- */
.ap-panel{background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden;margin-bottom:20px}
.ap-panel-h{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.ap-panel-h .no{font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:.1em}
.ap-panel-h h3{font-size:15px;font-weight:700}
.ap-panel-h .right{margin-left:auto;font-size:12px;color:var(--ink-soft);font-family:var(--mono)}
.ap-panel-b{padding:18px}

/* ---------- 폼 ---------- */
.ap-field{margin-bottom:16px}
.ap-field label{display:block;font-size:12px;font-weight:700;margin-bottom:6px}
.ap-field label .opt{color:var(--ink-soft);font-weight:400}
.ap-field input[type=text],.ap-field input[type=password],.ap-field input[type=email],
.ap-field input[type=number],.ap-field textarea,.ap-field select{
  width:100%;border:1px solid var(--line-strong);border-radius:8px;padding:10px 12px;
  font-size:14px;background:#FBFCFD;color:var(--ink);
}
.ap-field input:focus,.ap-field textarea:focus,.ap-field select:focus{
  outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)
}
.ap-field textarea{resize:vertical;min-height:70px}
.ap-grid2{display:grid;gap:12px}
@media(min-width:640px){.ap-grid2{grid-template-columns:1fr 1fr}}
.ap-hint{font-size:11px;color:var(--ink-soft);margin-top:6px}

/* ---------- 칩 ---------- */
.ap-chips{display:flex;flex-wrap:wrap;gap:8px}
.ap-chip{border:1px solid var(--line-strong);border-radius:999px;padding:7px 14px;font-size:13px;
  cursor:pointer;background:#FBFCFD;user-select:none;transition:.15s}
.ap-chip:hover{border-color:var(--ink)}
.ap-chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.ap-chip.req{cursor:not-allowed;opacity:.92}

/* ---------- 버튼 ---------- */
.ap-btn{border:0;border-radius:8px;padding:11px 18px;font-size:14px;font-weight:700;cursor:pointer;
  transition:.15s;display:inline-block;text-align:center}
.ap-btn-primary{background:var(--accent);color:#fff}
.ap-btn-primary:hover{background:#E04400}
.ap-btn-dark{background:var(--ink);color:#fff}
.ap-btn-dark:hover{background:#000}
.ap-btn-ghost{background:#fff;border:1px solid var(--line-strong);color:var(--ink)}
.ap-btn-ghost:hover{border-color:var(--ink)}
.ap-btn-danger{background:var(--danger);color:#fff}
.ap-btn-big{width:100%;padding:15px;font-size:15px}
.ap-btn-sm{padding:7px 12px;font-size:12.5px}
.ap-btn:disabled{opacity:.5;cursor:not-allowed}
.ap-btn-row{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- 알림 ---------- */
.ap-alert{padding:12px 14px;border-radius:8px;font-size:13px;margin-bottom:16px;border:1px solid}
.ap-alert-warn{border-color:var(--warn);background:#FFF8EC;color:var(--warn)}
.ap-alert-ok{border-color:var(--ok);background:#EDF7F1;color:var(--ok)}
.ap-alert-err{border-color:var(--danger);background:#FDEDEC;color:var(--danger)}
.ap-alert-info{border-color:var(--line-strong);background:#F7F9FB;color:var(--ink-soft)}

/* ---------- 테이블 ---------- */
.ap-table-wrap{overflow-x:auto}
.ap-table{width:100%;border-collapse:collapse;font-size:13px}
.ap-table th,.ap-table td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.ap-table th{font-size:11.5px;letter-spacing:.05em;color:var(--ink-soft);background:#F7F9FB;font-weight:700;white-space:nowrap}
.ap-table tr:hover td{background:#FBFCFD}
.ap-table .num{font-family:var(--mono);font-size:12px}
.ap-empty{padding:40px 20px;text-align:center;color:var(--ink-soft);font-size:13.5px}

/* ---------- 배지 ---------- */
.ap-badge{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  padding:3px 7px;border-radius:4px;background:var(--ink);color:#fff;font-weight:600}
.ap-badge-accent{background:var(--accent)}
.ap-badge-ok{background:var(--ok)}
.ap-badge-warn{background:var(--warn)}
.ap-badge-muted{background:var(--line-strong);color:var(--ink)}

/* ---------- 코드 출력 ---------- */
.ap-out{
  font-family:var(--mono);font-size:12px;line-height:1.7;white-space:pre-wrap;word-break:break-all;
  padding:18px;max-height:70vh;overflow:auto;background:#0F1720;color:#D7E0EA;margin:0;
  border:0;width:100%;display:block;resize:vertical;
}
.ap-out:empty::before{content:attr(data-placeholder);color:#5B6B7C}

/* ---------- 생성기: 프리셋 카드 ---------- */
.ap-presets{display:grid;gap:12px}
@media(min-width:640px){.ap-presets{grid-template-columns:1fr 1fr}}
.ap-preset{border:1px solid var(--line-strong);border-radius:10px;padding:14px;cursor:pointer;
  background:#FBFCFD;position:relative;transition:.15s}
.ap-preset:hover{border-color:var(--ink)}
.ap-preset.on{border:2px solid var(--accent);background:var(--accent-soft);padding:13px}
.ap-preset .p-id{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--accent)}
.ap-preset h4{font-size:14px;margin:4px 0 2px;font-weight:700}
.ap-preset .p-tag{font-size:11.5px;color:var(--ink-soft);line-height:1.45}
.ap-sw{display:flex;gap:4px;margin-top:10px}
.ap-sw i{width:20px;height:20px;border-radius:5px;border:1px solid rgba(0,0,0,.12)}
.ap-preset .reco{position:absolute;top:10px;right:10px;font-family:var(--mono);font-size:9px;
  letter-spacing:.1em;background:var(--ok);color:#fff;padding:3px 7px;border-radius:4px;display:none}
.ap-preset.is-reco .reco{display:block}

/* ---------- 생성기: 경고 박스 ---------- */
.ap-inline-warn{display:none;margin-top:10px;padding:10px 12px;border:1px solid var(--warn);
  border-radius:8px;background:#FFF8EC;color:var(--warn);font-size:12px;line-height:1.55}
.ap-inline-warn.show{display:block}

/* ---------- 생성기: 변주 옵션 ---------- */
.ap-variants{display:none;margin-top:14px;border-top:1px dashed var(--line-strong);padding-top:14px}
.ap-variants.show{display:block}

/* ---------- 출력 패널 / 탭 ---------- */
.ap-out-panel{position:static}
@media(min-width:1100px){.ap-out-panel{position:sticky;top:84px}}
.ap-out-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.ap-out-actions .meta{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-soft)}
.ap-tabs{display:flex;gap:0;border-bottom:1px solid var(--line);background:#F7F9FB}
.ap-tab{border:0;background:transparent;padding:11px 18px;font-size:13px;font-weight:700;
  cursor:pointer;color:var(--ink-soft);border-bottom:2px solid transparent}
.ap-tab:hover{color:var(--ink)}
.ap-tab.on{color:var(--ink);border-bottom-color:var(--accent);background:var(--paper)}
.ap-saved{font-family:var(--mono);font-size:11px;color:var(--ok);padding:0 18px 12px}

/* ---------- 생성 버튼 (하단 고정) ---------- */
.ap-sticky-gen{position:sticky;bottom:0;background:linear-gradient(transparent,var(--bg) 30%);padding:14px 0 0;z-index:10}

/* ---------- 토스트 ---------- */
.ap-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:#fff;padding:11px 20px;border-radius:999px;font-size:13px;
  opacity:0;pointer-events:none;transition:.25s;z-index:99}
.ap-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- 푸터 ---------- */
.ap-footer{border-top:1px solid var(--line-strong);margin-top:40px;padding:24px;background:var(--paper)}
.ap-footer-inner{max-width:1360px;margin:0 auto;font-family:var(--mono);font-size:10.5px;
  color:var(--ink-soft);letter-spacing:.06em;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ---------- 페이지네이션 ---------- */
.ap-paging{display:flex;gap:6px;justify-content:center;margin-top:20px;flex-wrap:wrap}
.ap-paging a,.ap-paging strong{padding:7px 12px;border:1px solid var(--line-strong);border-radius:6px;
  font-size:13px;background:#fff;font-family:var(--mono)}
.ap-paging strong{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- 포트폴리오 카드 그리드 ---------- */
.ap-pf-grid{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:640px){.ap-pf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.ap-pf-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ap-pf-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line-strong);
  border-radius:var(--radius);overflow:hidden;transition:.15s}
.ap-pf-card:hover{border-color:var(--ink);transform:translateY(-2px)}
.ap-pf-thumb{position:relative;background:#E4E9EF;aspect-ratio:8/5;overflow:hidden}
.ap-pf-thumb img{width:100%;height:100%;object-fit:cover}
.ap-pf-noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,#E4E9EF,#E4E9EF 10px,#DCE2E9 10px,#DCE2E9 20px)}
.ap-pf-noimg span{font-family:var(--mono);font-size:13px;letter-spacing:.2em;color:var(--ink-soft)}
.ap-pf-swatch{position:absolute;left:0;bottom:0;display:flex;width:100%;height:6px}
.ap-pf-swatch i{flex:1}
.ap-pf-body{padding:15px 16px 17px;display:flex;flex-direction:column;gap:7px;flex:1}
.ap-pf-meta{display:flex;gap:6px;flex-wrap:wrap}
.ap-pf-body h3{font-size:16px;font-weight:800;letter-spacing:-.01em;line-height:1.35}
.ap-pf-brand{font-size:12.5px;color:var(--ink-soft);font-weight:600}
.ap-pf-sig{font-size:12.5px;color:var(--ink-soft);line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ap-pf-more{margin-top:auto;padding-top:8px;font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;color:var(--accent);font-weight:600}

/* ---------- 아코디언 ---------- */
.ap-acc{border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden;background:var(--paper)}
.ap-acc>summary{padding:14px 18px;cursor:pointer;font-size:14px;font-weight:700;list-style:none;
  display:flex;align-items:center;gap:10px}
.ap-acc>summary::-webkit-details-marker{display:none}
.ap-acc>summary::after{content:'열기';margin-left:auto;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;color:var(--accent)}
.ap-acc[open]>summary::after{content:'닫기'}
.ap-acc[open]>summary{border-bottom:1px solid var(--line)}

/* ---------- 팔레트 스와치 (상세) ---------- */
.ap-pal{display:flex;flex-wrap:wrap;gap:10px}
.ap-pal-item{border:1px solid var(--line);border-radius:8px;overflow:hidden;width:104px;background:#fff}
.ap-pal-item .sw{height:44px}
.ap-pal-item .tx{padding:6px 8px;font-family:var(--mono);font-size:10px;line-height:1.5;color:var(--ink-soft)}
.ap-pal-item .tx b{display:block;color:var(--ink);font-size:10.5px}

/* ---------- 접근성 ---------- */
.sound_only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---------- 명세서 맛보기 (비구매자) ----------
   원문은 판매 상품이므로 앞부분만 노출하고 아래를 페이드로 덮는다. */
.ap-spec-teaser{position:relative}
.ap-spec-teaser .ap-out{max-height:340px;overflow:hidden;margin:0}
.ap-spec-fade{
  position:absolute;left:0;right:0;bottom:0;height:170px;pointer-events:none;
  background:linear-gradient(180deg,rgba(15,23,32,0) 0%,rgba(15,23,32,.86) 62%,#0F1720 100%);
}

/* ---------- 생성기 입력 세팅 패널 ---------- */
.ap-setting > summary{font-weight:700}
.ap-set-b{padding:16px 18px 18px}
.ap-set-table th{
  width:132px;white-space:nowrap;vertical-align:top;
  color:var(--ink-soft);font-weight:600;background:#F7F9FB;
}
.ap-set-table td{font-size:13.5px;line-height:1.7;word-break:break-word}
@media(max-width:560px){
  .ap-set-table th{width:96px;font-size:11px;letter-spacing:0}
  .ap-set-table td{font-size:12.5px}
}

/* ---------- 프리셋 카드 썸네일 ---------- */
.ap-preset .p-shot{
  margin:-14px -14px 12px;border-radius:9px 9px 0 0;overflow:hidden;
  position:relative;background:var(--bg);
}
.ap-preset.on .p-shot{margin:-13px -13px 12px}
.ap-preset .p-shot img{
  width:100%;aspect-ratio:8/5;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.ap-preset:hover .p-shot img{transform:scale(1.04)}
.p-shot-cap{
  position:absolute;left:8px;bottom:8px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  background:rgba(16,27,45,.78);color:#fff;padding:3px 7px;border-radius:3px;
}

/* ---------- 포트폴리오에서 불러온 안내 ---------- */
.ap-from-pf{display:flex;gap:14px;align-items:flex-start}
.from-pf-shot{flex:0 0 auto;width:110px;border-radius:6px;overflow:hidden;display:block}
.from-pf-shot img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.from-pf-txt{flex:1;min-width:0}
.from-pf-link{display:inline-block;margin-top:8px;font-weight:700;text-decoration:underline}
@media(max-width:560px){
  .ap-from-pf{flex-direction:column}
  .from-pf-shot{width:100%;max-width:180px}
}
.ap-set-multi{white-space:pre-line;font-family:var(--mono);font-size:11.5px;line-height:1.9;color:var(--ink-soft)}

/* ---------- 인터랙션 카드 (기능별 예제 + 필요 이미지) ---------- */
.ap-fx-grid{display:grid;gap:10px}
@media(min-width:640px){.ap-fx-grid{grid-template-columns:1fr 1fr}}
.ap-fx{
  display:flex;gap:0;border:1px solid var(--line-strong);border-radius:9px;
  background:#FBFCFD;cursor:pointer;overflow:hidden;transition:.15s;
}
.ap-fx:hover{border-color:var(--ink)}
.ap-fx.on{border:2px solid var(--accent);background:rgba(255,77,0,.10);
  box-shadow:0 0 0 3px rgba(255,77,0,.15)}
.ap-fx.on .fx-name::before{
  content:"✓";display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;background:var(--accent);color:#fff;
  font-size:10px;font-weight:700;margin-right:2px;flex:0 0 auto;
}
.fx-shot{flex:0 0 84px;background:var(--bg);overflow:hidden}
.fx-shot img{width:100%;height:100%;object-fit:cover;display:block}
.fx-body{flex:1;min-width:0;padding:11px 13px}
.fx-name{font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.fx-w{font-family:var(--mono);font-size:9.5px;padding:2px 5px;border-radius:3px;font-weight:600}
.fx-w-l{background:rgba(14,122,77,.12);color:var(--ok)}
.fx-w-m{background:rgba(180,105,14,.14);color:var(--warn)}
.fx-w-h{background:rgba(192,57,43,.12);color:var(--danger)}
.fx-what{font-size:11.5px;color:var(--ink-soft);line-height:1.55;margin-top:5px}
.fx-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:7px}
.fx-img{font-family:var(--mono);font-size:10px;color:var(--accent);font-weight:600}
.fx-img-none{color:var(--ink-soft);font-weight:400}
.fx-demo{font-size:10.5px;color:var(--ink);text-decoration:underline;font-weight:600}
.fx-demo:hover{color:var(--accent)}
@media(max-width:480px){.fx-shot{flex-basis:64px}}

/* ==========================================================================
   효과 미리보기 페이지 (fx.php)
   ========================================================================== */
.fxp-grid{display:grid;gap:22px}
@media(min-width:900px){.fxp-grid{grid-template-columns:1fr 1fr}}
.fxp{background:var(--paper);border:1px solid var(--line-strong);border-radius:10px;padding:18px;overflow:hidden}
.fxp-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.fxp-h h3{font-size:16px;font-weight:800}
.fxp-what{font-size:12.5px;color:var(--ink-soft);margin-top:6px}
.fxp-stage{
  position:relative;margin:14px 0 10px;border-radius:8px;overflow:hidden;
  background:var(--bg);min-height:190px;display:flex;flex-direction:column;
}
.fxp-hint{font-size:11px;color:var(--ink-soft);text-align:center;padding:8px 10px;
  background:#F7F9FB;border-top:1px solid var(--line)}
.fxp-none{font-size:12px;color:var(--ink-soft)}
.fxp-spec{margin-top:8px;font-size:12px}
.fxp-spec th{width:88px;font-size:11px;background:#F7F9FB;color:var(--ink-soft)}
.fxp-spec td{font-size:11.5px;line-height:1.6}
.fxp-spec td.mono{font-family:var(--mono);font-size:10.5px}
.fxp-real{margin-top:10px;font-size:12px}
.fxp-real a{text-decoration:underline;font-weight:700;color:var(--accent)}

.d-center{flex:1;display:grid;place-items:center;min-height:190px}
.fxp-stage img{display:block;width:100%;height:100%;object-fit:cover}

/* 패럴랙스 / 줌 */
.d-parallax,.d-zoom{height:190px;overflow:hidden}
.d-parallax img,.d-zoom img{will-change:transform;transition:transform .12s linear}

/* 마그네틱 */
.btn-magnet{display:inline-flex;padding:14px 26px;border-radius:5px;background:var(--accent);
  color:#fff;font-weight:800;font-size:14px;will-change:transform}

/* 커스텀 커서 */
.d-cursor{position:relative;height:190px;cursor:none;overflow:hidden}
.d-cur{position:absolute;left:0;top:0;width:26px;height:26px;margin:-13px 0 0 -13px;
  border-radius:50%;border:1.5px solid var(--accent);background:rgba(255,77,0,.14);
  display:grid;place-items:center;pointer-events:none;opacity:0;transition:width .25s,height .25s,margin .25s,opacity .2s}
.d-cursor.is-in .d-cur{opacity:1;width:74px;height:74px;margin:-37px 0 0 -37px;background:rgba(255,77,0,.9);border-color:transparent}
.d-cur i{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:#fff;opacity:0;transition:opacity .2s;font-style:normal}
.d-cursor.is-in .d-cur i{opacity:1}

/* 3D 틸트 */
.d-tilt{width:180px;height:130px;border-radius:8px;overflow:hidden;position:relative;
  transition:transform .35s cubic-bezier(.16,1,.3,1);box-shadow:0 10px 30px rgba(16,27,45,.18)}
.d-tilt b{position:absolute;left:10px;bottom:8px;color:#fff;font-size:12px;
  text-shadow:0 1px 6px rgba(0,0,0,.6)}

/* 비포&애프터 */
.d-ba{position:relative;height:190px;overflow:hidden;user-select:none}
.d-ba img{position:absolute;inset:0}
.ba-before{position:absolute;inset:0;width:50%;overflow:hidden;border-right:2px solid #fff}
.ba-before img{width:auto;min-width:100%}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;width:34px;margin-left:-17px;
  cursor:ew-resize;display:grid;place-items:center;z-index:3}
.ba-handle i{width:34px;height:34px;border-radius:50%;background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.3);position:relative;display:block}
.ba-handle i::before{content:"◀ ▶";position:absolute;inset:0;display:grid;place-items:center;
  font-size:9px;color:var(--ink)}
.ba-tag{position:absolute;top:9px;font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  background:rgba(16,27,45,.72);color:#fff;padding:3px 7px;border-radius:3px;z-index:2}
.ba-tag-l{left:9px} .ba-tag-r{right:9px}

/* 가로 드래그 스트립 */
.d-strip{overflow-x:auto;overflow-y:hidden;height:190px;cursor:grab;scrollbar-width:none}
.d-strip::-webkit-scrollbar{display:none}
.d-strip.is-drag{cursor:grabbing}
.strip-track{display:flex;gap:8px;padding:16px;height:100%}
.strip-card{flex:0 0 150px;border-radius:6px;overflow:hidden;background:#fff}

/* 마퀴 */
.d-marquee{height:190px;display:grid;place-items:center;overflow:hidden;background:var(--ink)}
.mq{display:flex;gap:18px;white-space:nowrap;animation:mqf 14s linear infinite;align-items:center}
.mq span{font-size:22px;font-weight:800;color:#fff}
.mq b{color:var(--accent);font-size:13px}
@keyframes mqf{to{transform:translateX(-50%)}}

/* 듀오톤 호버 */
.d-duo{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:16px;height:190px}
.d-duo figure{border-radius:6px;overflow:hidden}
.d-duo img{filter:grayscale(1) contrast(1.1);transition:filter .45s}
.d-duo figure:hover img{filter:grayscale(0) contrast(1)}

/* 비디오 배경 */
.d-video{position:relative;height:190px;overflow:hidden}
.d-video img{filter:brightness(.62)}
.d-play{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:34px;opacity:.9}
.d-vlabel{position:absolute;left:10px;bottom:10px;font-size:9px;letter-spacing:.1em;
  background:rgba(16,27,45,.7);color:#fff;padding:4px 8px;border-radius:3px}

/* SVG 라인 드로잉 */
.d-draw{height:190px;display:grid;place-items:center;padding:20px}
.d-draw svg{width:100%;height:110px}

/* 이미지 시퀀스 */
.d-seq{position:relative;height:190px;overflow:hidden}
.d-seq .seq-f{position:absolute;inset:0;opacity:0;transition:opacity .12s}
.d-seq .seq-f.on{opacity:1}
.seq-idx{position:absolute;right:10px;bottom:10px;font-size:10px;letter-spacing:.1em;
  background:rgba(16,27,45,.74);color:#fff;padding:4px 8px;border-radius:3px;z-index:2}
.seq-idx b{color:var(--accent)}

/* ───────── 2026-08 추가 효과 미리보기 ───────── */

/* 13. 스크롤 속도 기울기 */
.d-skew{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px;height:190px}
.d-skew .sk-card{margin:0;overflow:hidden;border-radius:6px;will-change:transform}
.d-skew .sk-card img{height:100%}

/* 14. 커서 근접 확대 그리드 */
.d-prox{display:grid;grid-template-columns:repeat(12,1fr);gap:10px;padding:22px 16px;
  height:190px;align-content:center;justify-items:center}
.d-prox .px-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);
  opacity:.55;transition:transform .28s cubic-bezier(.2,.8,.3,1);will-change:transform}

/* 15. 글자 스크램블 */
.d-scr{height:190px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.d-scr .scr-num{font-family:var(--mono,monospace);font-size:46px;font-weight:700;color:var(--ink);
  letter-spacing:.04em;margin:0;font-variant-numeric:tabular-nums}
.d-scr .scr-lab{font-family:var(--mono,monospace);font-size:12px;letter-spacing:.28em;
  color:var(--accent);margin:0}

/* 16. 커서 추적 이미지 프리뷰 */
.d-peek{position:relative;height:190px;display:flex;align-items:center;padding:0 22px;overflow:hidden}
.d-peek .pk-list{list-style:none;margin:0;padding:0;position:relative;z-index:2}
.d-peek .pk-item{font-size:17px;font-weight:600;padding:7px 0;color:var(--ink);cursor:pointer;
  transition:opacity .25s,transform .25s}
.d-peek.is-peek .pk-item{opacity:.35}
.d-peek.is-peek .pk-item:hover{opacity:1;transform:translateX(8px)}
.d-peek .pk-img{position:absolute;left:50%;top:50%;width:170px;height:118px;object-fit:cover;
  border-radius:6px;opacity:0;transform:translate(-50%,-50%) scale(.9);pointer-events:none;z-index:1;
  transition:opacity .3s,scale .3s}
.d-peek.is-peek .pk-img{opacity:1}

/* 17. 카드 스택 */
.d-stack{position:relative;height:190px;padding:14px;display:grid;
  grid-template-columns:repeat(3,1fr);gap:8px;align-items:center}
.d-stack .st-card{position:relative;margin:0;height:150px;overflow:hidden;border-radius:6px;
  will-change:transform,filter}
.d-stack .st-no{position:absolute;left:8px;top:8px;font-size:10px;letter-spacing:.1em;
  background:rgba(16,27,45,.74);color:#fff;padding:3px 7px;border-radius:3px}

/* 18. 벤토 갤러리 */
.d-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:56px;gap:6px;padding:12px;height:190px}
.d-bento .bn-tile{margin:0;overflow:hidden;border-radius:5px;opacity:0;will-change:transform,opacity}
.d-bento .b-lg{grid-column:span 2;grid-row:span 2}
.d-bento .b-md{grid-column:span 2}
.d-bento .b-sm{grid-column:span 1}

/* 19. 필터 재배치 */
.d-flip{padding:12px;height:190px;display:flex;flex-direction:column;gap:8px}
.d-flip .fl-btns{display:flex;gap:6px;flex:0 0 auto}
.d-flip .fl-b{font-size:11px;padding:4px 12px;border:1px solid var(--line);background:#fff;
  border-radius:999px;cursor:pointer;color:var(--ink-soft)}
.d-flip .fl-b.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.d-flip .fl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;flex:1 1 auto;min-height:0}
.d-flip .fl-card{margin:0;overflow:hidden;border-radius:5px;will-change:transform}
.d-flip .fl-card.is-off{display:none}

/* 20. 도형 모핑 */
.d-morph{height:190px;display:flex;align-items:center;justify-content:center;color:var(--accent)}

/* 비디오 배경 — 실제 영상 재생 */
.d-video video{display:block;width:100%;height:190px;object-fit:cover;filter:brightness(.72)}

/* 21. 커서 트레일 */
.d-trail{position:relative;height:190px;overflow:hidden;background:var(--ink,#101B2D);cursor:crosshair}
.d-trail .tr-dot{position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;
  background:var(--accent);transform:scale(0);pointer-events:none;will-change:transform}
.d-trail .tr-hint{position:absolute;inset:0;display:grid;place-items:center;margin:0;
  font-size:10px;letter-spacing:.24em;color:rgba(255,255,255,.5);transition:opacity .3s}
.d-trail.is-on .tr-hint{opacity:0}

/* 22. 롤링 텍스트 */
.d-roll{height:190px;display:grid;place-items:center}
.d-roll .rl-btn{display:inline-block;background:var(--ink);color:#fff;padding:14px 30px;
  border-radius:999px;font-weight:700;font-size:14px;overflow:hidden;text-decoration:none}
.d-roll .rl-in{display:block;position:relative;overflow:hidden;height:1.25em}
.d-roll .rl-in em{display:block;font-style:normal;line-height:1.25em;
  transition:transform .42s cubic-bezier(.3,0,.2,1)}
.d-roll .rl-btn:hover .rl-in em,.d-roll .rl-btn.is-roll .rl-in em{transform:translateY(-1.25em)}

/* 23. 스태거 등장 */
.d-stag{height:190px;display:grid;place-items:center;padding:0 22px}
.d-stag ul{list-style:none;margin:0;padding:0;width:100%;max-width:280px}
.d-stag li{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:13px;color:var(--ink);
  opacity:0;transform:translateY(14px);transition:opacity .45s,transform .45s}
.d-stag li.on{opacity:1;transform:none}
.d-stag .sg-b{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:0 0 auto}

/* 24. 아코디언 */
.d-acc{height:190px;overflow:auto;padding:10px 14px}
.d-acc .ac-item{border-bottom:1px solid var(--line)}
.d-acc .ac-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:none;border:0;padding:11px 0;font-size:12.5px;font-weight:600;color:var(--ink);
  text-align:left;cursor:pointer}
.d-acc .ac-q i{font-style:normal;color:var(--accent);transition:transform .3s;flex:0 0 auto}
.d-acc .ac-item.on .ac-q i{transform:rotate(45deg)}
.d-acc .ac-a{height:0;overflow:hidden;transition:height .42s cubic-bezier(.4,0,.2,1)}
.d-acc .ac-a p{margin:0 0 11px;font-size:12px;line-height:1.6;color:var(--ink-soft)}

/* 25. 방향 인식 헤더 */
.d-dirh{position:relative;height:190px;overflow:hidden}
.d-dirh .dh-bar{position:absolute;left:0;right:0;top:0;z-index:2;display:flex;
  justify-content:space-between;align-items:center;padding:11px 16px;font-size:11px;
  letter-spacing:.14em;font-weight:700;color:var(--ink);background:transparent;
  transition:transform .34s ease,background .3s}
.d-dirh .dh-bar.is-solid{background:rgba(255,255,255,.94);box-shadow:0 1px 0 var(--line)}
.d-dirh .dh-bar.is-hide{transform:translateY(-100%)}
.d-dirh .dh-body{height:190px;overflow:auto;padding:52px 16px 30px}
.d-dirh .dh-body p{margin:0 0 26px;font-size:12px;color:var(--ink-soft)}
.d-dirh .dh-sp{height:60px}

/* 26. 텍스트 마스킹 리빌 */
.d-mask{height:190px;display:flex;flex-direction:column;justify-content:center;padding:0 24px;gap:2px}
.d-mask .mk-l{margin:0;overflow:hidden}
.d-mask .mk-l span{display:block;font-size:clamp(18px,2.4vw,26px);font-weight:700;color:var(--ink);
  transform:translateY(105%);transition:transform .85s cubic-bezier(.16,1,.3,1)}
.d-mask .mk-l span.on{transform:none}

/* 27. 무한 루프 패널 */
.d-loop{height:190px;overflow:hidden;display:flex;align-items:center}
.d-loop .lp-track{display:flex;gap:8px;will-change:transform}
.d-loop .lp-card{margin:0;flex:0 0 150px;height:110px;overflow:hidden;border-radius:6px}

/* 28. 스와이프 슬라이더 */
.d-swipe{position:relative;height:190px;overflow:hidden;cursor:grab}
.d-swipe:active{cursor:grabbing}
.d-swipe .sw-track{display:flex;height:158px;will-change:transform}
.d-swipe .sw-slide{margin:0;flex:0 0 100%;height:158px;overflow:hidden}
.d-swipe .sw-dots{position:absolute;left:0;right:0;bottom:8px;display:flex;gap:6px;justify-content:center}
.d-swipe .sw-dot{width:6px;height:6px;border-radius:50%;background:var(--line);cursor:pointer}
.d-swipe .sw-dot.on{background:var(--accent);width:16px;border-radius:3px}

/* 29. 갤러리 모달 확대 */
.d-modal{position:relative;height:190px;overflow:hidden}
.d-modal .md-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:12px;height:100%}
.d-modal .md-th{margin:0;overflow:hidden;border-radius:5px;cursor:pointer}
.d-modal .md-th.is-open{position:absolute;left:12%;top:8%;width:76%;height:84%;z-index:3;
  border-radius:8px;box-shadow:0 18px 50px rgba(0,0,0,.4)}
.d-modal .md-back{position:absolute;inset:0;background:rgba(10,16,26,.72);opacity:0;
  pointer-events:none;transition:opacity .35s;z-index:2}
.d-modal.is-modal .md-back{opacity:1;pointer-events:auto}
.d-modal .md-close{position:absolute;right:12px;top:10px;font-size:11px;color:#fff;cursor:pointer}

/* 30. 곡선 페이지 전환 */
.d-curve{position:relative;height:190px;display:grid;place-items:center;overflow:hidden;background:var(--bg)}
.d-curve .cv-btn{position:relative;z-index:2;background:var(--ink);color:#fff;border:0;
  padding:10px 22px;border-radius:999px;font-size:12px;font-weight:700;cursor:pointer}
.d-curve .cv-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.d-curve .cv-path{fill:var(--accent);transition:d .38s cubic-bezier(.4,0,.2,1)}

/* 31. 경로 따라 이동 */
.d-path{height:190px;display:grid;place-items:center;color:var(--accent);padding:0 10px}
.d-path svg{width:100%;max-width:330px;height:auto}

/* 32. 파티클 캔버스 */
.d-part{height:190px;overflow:hidden;background:linear-gradient(180deg,#16233A,#0B1220)}
.d-part .pt-cv{display:block;width:100%;height:190px}

/* 33. 스크롤 스크럽 비디오 (scroll-world 엔진) */
.d-scrub{position:relative;height:190px;overflow:hidden;background:#0B1220}
.d-scrub .sv-v{display:block;width:100%;height:190px;object-fit:cover}
.d-scrub .sv-bar{position:absolute;left:0;right:0;bottom:0;height:3px;
  background:rgba(255,255,255,.16)}
.d-scrub .sv-fill{display:block;height:100%;width:0;background:var(--accent)}

/* 커서 브러시 인물 전환 — before 는 항상 보이는 바탕, after 는 캔버스가 오려 그린다.
   ⚠ after 를 화면에 직접 보이게 하면(opacity>0) 리빌할 대상이 그냥 보여버린다.
   캔버스는 JS가 그리기 전까지 완전 투명이라, JS가 죽어도 before 만 보일 뿐 빈 칸이 되지 않는다. */
.d-brush{position:relative;height:190px;overflow:hidden;background:#0B1220;cursor:crosshair}
.d-brush .br-before{position:absolute;inset:0}
.d-brush .br-after{position:absolute;inset:0;opacity:0}
.d-brush .br-c{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

@media (max-width:640px){
  .d-prox{grid-template-columns:repeat(8,1fr)}
  .d-peek .pk-img{display:none}
  .d-skew,.d-stack{grid-template-columns:repeat(2,1fr)}
  .d-modal .md-grid{grid-template-columns:repeat(2,1fr)}
  .d-loop .lp-card{flex-basis:120px}
}

@media (prefers-reduced-motion:reduce){
  .mq{animation:none}
  .fxp-stage img{transform:none !important}
  .d-skew .sk-card,.d-prox .px-dot,.d-stack .st-card{transform:none !important}
  .d-bento .bn-tile{opacity:1 !important;transform:none !important}
}