/* 블로그킷 — 커팅 매트 테마
   mat: 공작용 커팅 매트 초록 / paper: 흰 종이 / ink: 잉크 / note: 포스트잇 노랑(포인트에만) */
:root{
  --mat:#1f5d47; --mat-deep:#174a38; --mat-line:rgba(255,255,255,.13); --mat-line-strong:rgba(255,255,255,.28);
  --paper:#ffffff; --bg:#eef1ef; --ink:#1c2420; --sub:#56625c; --mute:#8a948f; --line:#d5dcd8; --line-soft:#e6ebe8;
  --note:#ffd84a; --ok:#1f7a4d; --warn:#b45309;
  --accent:var(--mat); --accent-soft:#e3efe9;
  --r-lg:6px; --r:4px;
  --font:"IBM Plex Sans KR",system-ui,-apple-system,"Apple SD Gothic Neo",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font);color:var(--ink);background:var(--bg);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
::selection{background:var(--note);color:var(--ink)}
a{color:inherit}
:focus-visible{outline:2px solid var(--mat);outline-offset:2px}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- 상단바 ---------- */
.topnav{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:28px;padding:0 28px;height:56px}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);font-weight:700;font-size:17px;letter-spacing:-.3px}
.logo .mark{width:24px;height:24px;border-radius:3px;background:var(--mat);position:relative;font-size:0;
  background-image:linear-gradient(var(--mat-line-strong) 1px,transparent 1px),linear-gradient(90deg,var(--mat-line-strong) 1px,transparent 1px);background-size:6px 6px;background-position:-1px -1px}
.logo .mark::after{content:"";position:absolute;inset:6px;border:2px solid #fff;border-radius:1px}
.logo b{font-weight:700;color:inherit}
.navlinks{display:flex;gap:2px;margin-left:auto;height:100%}
.navlinks a{display:flex;align-items:center;color:var(--sub);text-decoration:none;font-size:14px;padding:0 12px;border-bottom:2px solid transparent;margin-bottom:-1px}
.navlinks a:hover{color:var(--ink)}
.navlinks a.on{color:var(--ink);font-weight:600;border-bottom-color:var(--ink)}
@media (max-width:640px){.topnav{padding:0 14px;gap:10px}.navlinks a{padding:0 8px;font-size:13px}.nav-hide-m{display:none!important}}

/* ---------- 기본 부품 ---------- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px}
.btn{appearance:none;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:var(--r);padding:9px 14px;font:inherit;font-size:14px;font-weight:500;cursor:pointer}
.btn:hover{border-color:var(--ink)}
.btn.primary{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
.btn.primary:hover{background:#000}
.btn.sm{padding:6px 10px;font-size:13px}
.btn.block{width:100%;padding:12px}
.btn.big{padding:15px 30px;font-size:17px}
.btn:disabled{opacity:.4;cursor:default}
.btn:disabled:hover{border-color:var(--line)}
.btn.primary:disabled:hover{background:var(--ink);border-color:var(--ink)}
.grow{flex:1}
.row{display:flex;align-items:center;gap:10px;margin:9px 0}
.row label,.lbl{min-width:68px;color:var(--sub);font-size:13px}
.seg{display:flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;flex:1;flex-wrap:wrap;background:var(--paper)}
.seg button{flex:1;border:0;border-left:1px solid var(--line);background:transparent;padding:7px 6px;font:inherit;font-size:13px;cursor:pointer;color:var(--sub);white-space:nowrap}
.seg button:first-child{border-left:0}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--ink);color:#fff;font-weight:600}
input[type=range]{flex:1;accent-color:var(--mat)}
input[type=color]{width:36px;height:30px;border:1px solid var(--line);border-radius:var(--r);padding:2px;background:#fff;cursor:pointer}
select,textarea,input[type=text],input[type=number]{font:inherit;border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;background:#fff;color:var(--ink)}
select{flex:1}
textarea{width:100%;resize:vertical;min-height:62px;font-size:15px}
select:focus,textarea:focus,input:focus{outline:none;border-color:var(--mat);box-shadow:0 0 0 3px var(--accent-soft)}
.val{min-width:36px;text-align:right;color:var(--sub);font-size:12px;font-variant-numeric:tabular-nums}
.hint{color:var(--mute);font-size:12.5px;margin:6px 0 0}
.chk{display:flex;align-items:center;gap:6px;color:var(--sub);font-size:13px;cursor:pointer;margin:6px 0}
.chk input{accent-color:var(--mat)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(16px);background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r);font-size:13.5px;opacity:0;transition:.2s;pointer-events:none;z-index:60;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* 커팅 매트 질감 (메인 상단, 사진 놓는 자리) */
.mat{background-color:var(--mat);color:#fff;
  background-image:
    linear-gradient(var(--mat-line-strong) 1px,transparent 1px),linear-gradient(90deg,var(--mat-line-strong) 1px,transparent 1px),
    linear-gradient(var(--mat-line) 1px,transparent 1px),linear-gradient(90deg,var(--mat-line) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;background-position:-1px -1px}

/* ---------- 메인 ---------- */
.home-hero{position:relative;padding:64px 28px 120px}
.home-hero .in{max-width:1120px;margin:0 auto}
.home-hero h1{margin:0;font-size:clamp(30px,5vw,54px);font-weight:700;letter-spacing:-.04em;line-height:1.15;max-width:15em}
.home-hero p{margin:18px 0 0;font-size:clamp(15px,1.6vw,18px);color:rgba(255,255,255,.82);max-width:34em}
.home-hero .ruler{position:absolute;left:28px;right:28px;bottom:76px;max-width:1120px;margin:0 auto;display:flex;justify-content:space-between;font-size:11px;color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums}
.crop{position:absolute;width:22px;height:22px;border-color:rgba(255,255,255,.7);border-style:solid;border-width:0}
.crop.tl{top:22px;left:22px;border-top-width:2px;border-left-width:2px}
.crop.tr{top:22px;right:22px;border-top-width:2px;border-right-width:2px}
.crop.bl{bottom:22px;left:22px;border-bottom-width:2px;border-left-width:2px}
.crop.br{bottom:22px;right:22px;border-bottom-width:2px;border-right-width:2px}
@media (max-width:640px){.home-hero{padding:40px 18px 96px}.home-hero .ruler{display:none}.crop{display:none}}

.toolboard{max-width:1120px;margin:-72px auto 0;position:relative;padding:0 28px}
@media (max-width:640px){.toolboard{padding:0 12px;margin-top:-64px}}
.filters{display:flex;gap:2px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;background:var(--paper);border:1px solid var(--line);border-bottom:0;border-radius:var(--r-lg) var(--r-lg) 0 0;padding:0 10px}
.filters button{flex:none;border:0;background:none;font:inherit;font-size:14px;color:var(--sub);padding:14px 12px 12px;cursor:pointer;border-bottom:3px solid transparent}
.filters button:hover{color:var(--ink)}
.filters button.on{color:var(--ink);font-weight:600;border-bottom-color:var(--note)}
.tgrid{display:grid;grid-template-columns:repeat(4,1fr);background:var(--paper);gap:0;border:solid var(--line);border-width:1px 0 0 1px;border-radius:0 0 var(--r-lg) var(--r-lg);overflow:hidden}
.tcard{position:relative;background:var(--paper);padding:24px 22px 26px;text-decoration:none;color:var(--ink);display:block;min-height:176px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.tcard:hover{background:#f7faf8}
.tcard:hover h3{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.tcard .ic{width:36px;height:36px;display:grid;place-items:center;margin-bottom:16px;color:var(--mat) !important;background:none !important;border:1.5px solid currentColor;border-radius:var(--r)}
.tcard .ic svg{width:20px;height:20px}
.tcard h3{margin:0 0 6px;font-size:17px;font-weight:600;letter-spacing:-.02em}
.tcard p{margin:0;color:var(--sub);font-size:13.5px;line-height:1.6}
.tcard .badge{display:inline-block;vertical-align:3px;margin-left:8px;background:var(--note);color:var(--ink);font-size:11px;font-weight:600;padding:1px 6px;border-radius:2px;letter-spacing:0}
.tcard.ask{background:#f6f8f7;grid-column:span 3;display:flex;flex-direction:column;justify-content:center}
.tcard.ask h3{font-size:16px}
.tcard.feature{grid-column:span 2;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center}
.tcard.feature .demo{aspect-ratio:16/9;display:grid;grid-template-columns:1fr 1fr;gap:4px;background:#fff;position:relative;border:1px solid var(--line)}
.tcard.feature .demo i{display:block}
.tcard.feature .demo i:first-child{background:#c9d6cf}
.tcard.feature .demo i:nth-child(2){background:#9fb5aa}
.tcard.feature .demo b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--ink);color:#fff;font-weight:600;font-size:14px;padding:5px 12px;white-space:nowrap}
.tcard[hidden]{display:none}
@media (max-width:980px){.tgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.tgrid{grid-template-columns:repeat(2,1fr)}.tcard.ask{grid-column:1/-1}.tcard.feature{grid-template-columns:1fr}.tcard.feature .demo{display:none}}
@media (max-width:420px){.tcard{padding:16px 14px 18px;min-height:0}.tcard h3{font-size:15px}.tcard p{font-size:12.5px}}

.section{max-width:1120px;margin:0 auto;padding:0 28px}
@media (max-width:640px){.section{padding:0 14px}}
.section-title{display:flex;align-items:baseline;justify-content:space-between;margin:64px 0 4px;gap:12px}
.section-title h2{margin:0;font-size:22px;font-weight:700;letter-spacing:-.03em}
.section-title a{font-size:14px;color:var(--sub);text-decoration:underline;text-underline-offset:3px}

/* 가이드 목록: 카드 대신 줄 목록 */
.guide-list{border-top:2px solid var(--ink)}
.guide-row{display:grid;grid-template-columns:1fr 2fr;gap:24px;padding:20px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.guide-row h3{margin:0;font-size:17px;font-weight:600;letter-spacing:-.02em;line-height:1.45}
.guide-row p{margin:0;color:var(--sub);font-size:14.5px}
.guide-row:hover h3{text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){.guide-row{grid-template-columns:1fr;gap:4px}}

.facts{display:grid;grid-template-columns:repeat(3,1fr);margin-top:56px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts div{padding:22px 24px 22px 0}
.facts div+div{padding-left:24px;border-left:1px solid var(--line)}
.facts b{display:block;font-size:15px;margin-bottom:4px}
.facts p{margin:0;color:var(--sub);font-size:14px}
@media (max-width:720px){.facts{grid-template-columns:1fr}.facts div+div{padding-left:0;border-left:0;border-top:1px solid var(--line)}}
.about-note{max-width:44em;margin:40px 0 0;color:var(--sub);font-size:15px;line-height:1.85}
.about-note b{color:var(--ink)}

/* ---------- 바닥글 ---------- */
.site-footer{border-top:1px solid var(--line);background:var(--paper);margin-top:72px;padding:32px 28px 36px;color:var(--sub);font-size:13px}
.site-footer .in{max-width:1120px;margin:0 auto;display:flex;flex-wrap:wrap;gap:18px 40px;justify-content:space-between}
.site-footer .brand{font-weight:700;color:var(--ink);font-size:15px;margin-bottom:6px}
.site-footer .brand b{font-weight:700}
.site-footer p{margin:0;max-width:380px}
.site-footer nav{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:flex-start}
.site-footer nav a{text-decoration:none;color:var(--sub)}
.site-footer nav a:hover{color:var(--ink);text-decoration:underline}
.site-footer .copy{width:100%;font-size:12px;color:var(--mute)}

/* ---------- 도구 페이지 ---------- */
.tool-head{max-width:1120px;margin:0 auto;padding:36px 28px 22px}
.tool-head h1{margin:0;font-size:clamp(26px,3.6vw,36px);font-weight:700;letter-spacing:-.035em}
.tool-head p{margin:8px 0 0;color:var(--sub);font-size:16px;max-width:40em}
@media (max-width:640px){.tool-head{padding:26px 14px 16px}}
.tool-wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;max-width:1120px;margin:0 auto;padding:0 28px;align-items:start}
@media (max-width:880px){.tool-wrap{grid-template-columns:1fr;padding:0 12px}}
.tool-side{position:sticky;top:72px;display:flex;flex-direction:column;gap:4px}
.tool-side h2{margin:0 0 4px;font-size:15px;font-weight:600}
.tool-side input[type=number],.tool-side input[type=text]{width:100%;min-width:0}
.dropzone{border-radius:var(--r-lg);min-height:320px;display:grid;place-items:center;text-align:center;padding:30px 16px;color:#fff;transition:background-color .15s}
.dropzone.over{background-color:var(--mat-deep)}
.dropzone p{color:rgba(255,255,255,.85);margin:16px 0 0;font-size:14.5px}
.dropzone .hint{color:rgba(255,255,255,.65)}
.dropzone .btn.primary{background:#fff;color:var(--ink);border-color:#fff}
.dropzone .btn.primary:hover{background:var(--note);border-color:var(--note)}
.dropzone.has-files{min-height:0;padding:12px}
.dropzone.has-files .dz-big{display:none}
.dropzone .dz-small{display:none}
.dropzone.has-files .dz-small{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;color:rgba(255,255,255,.8);font-size:13px}
.dropzone .dz-small .btn{background:#fff;border-color:#fff}
.file-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-top:14px}
.fcard{position:relative;border:1px solid var(--line);border-radius:var(--r);padding:10px;background:#fff;display:flex;flex-direction:column;gap:6px}
.fcard.done{border-color:#9cc7b1;box-shadow:inset 0 3px 0 var(--ok)}
.fthumb{aspect-ratio:1;border-radius:2px;overflow:hidden;background:repeating-conic-gradient(#e9ecea 0% 25%,#f8f9f8 0% 50%) 50%/16px 16px;display:grid;place-items:center}
.fthumb img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .2s}
.fname{font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fsize{font-size:12px;color:var(--sub);line-height:1.5;font-variant-numeric:tabular-nums}
.fsize .dim{color:var(--mute)}
.save{color:var(--ok);font-weight:600}.save.up{color:var(--warn)}
.fx{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:2px;border:0;background:rgba(28,36,32,.7);color:#fff;cursor:pointer;z-index:2;line-height:1}
.editor-stage{display:flex;justify-content:center;background:repeating-conic-gradient(#e2e7e4 0% 25%,#f3f5f4 0% 50%) 50%/22px 22px;border-radius:var(--r);padding:10px;margin-top:12px}
.editor-stage canvas{max-width:100%;max-height:70vh;touch-action:none;display:block}
.pos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;flex:1}
.pos-grid button{border:0;border-left:1px solid var(--line);border-top:1px solid var(--line);background:#fff;height:32px;cursor:pointer;font-size:13px;color:var(--sub)}
.pos-grid button:nth-child(3n+1){border-left:0}
.pos-grid button:nth-child(-n+3){border-top:0}
.pos-grid button.on{background:var(--ink);color:#fff}
.pos-grid button.wide{grid-column:span 3;border-left:0}
.counter-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--line);gap:1px}
.stat{background:#fff;padding:14px 16px}
.stat b{display:block;font-size:26px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat span{color:var(--sub);font-size:12.5px}
.stat.main{background:var(--mat);color:#fff}
.stat.main span{color:rgba(255,255,255,.75)}
textarea.big{min-height:360px;font-size:16px;line-height:1.8}

.tool-guide{max-width:1120px;margin:48px auto 0;padding:0 28px}
@media (max-width:640px){.tool-guide{padding:0 12px}}
.tool-guide .cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:820px){.tool-guide .cols{grid-template-columns:1fr}}
.tool-guide .card h2{font-size:17px;margin:0 0 10px;font-weight:700}
.tool-guide ol,.tool-guide ul{margin:0;padding-left:20px;color:#36403b;line-height:1.85}
.tool-guide .tgrid{border-radius:var(--r-lg)}
.faq details{border-bottom:1px solid var(--line-soft);padding:12px 0}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;font-weight:600;font-size:14.5px}
.faq p{margin:8px 0 0;color:#36403b;line-height:1.8;font-size:14.5px}

/* ---------- 글 (가이드·정책) ---------- */
.article{max-width:720px;margin:0 auto;padding:44px 24px 0}
.crumb{font-size:13px;color:var(--sub);margin-bottom:16px;display:flex;gap:8px}
.crumb a{text-decoration:none;color:var(--sub)}
.crumb a:hover{text-decoration:underline}
.crumb span{color:var(--mute)}
.article h1{font-size:clamp(26px,4vw,36px);font-weight:700;letter-spacing:-.035em;line-height:1.3;margin:0 0 10px}
.article .meta{color:var(--mute);font-size:13px;margin-bottom:30px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.article .lead{font-size:17.5px;color:#2d3632;line-height:1.85;margin:0 0 28px}
.article h2{font-size:21px;font-weight:700;letter-spacing:-.025em;margin:44px 0 12px}
.article h3{font-size:17px;margin:26px 0 8px}
.article p,.article li{font-size:16px;line-height:1.9;color:#28312d}
.article ul,.article ol{padding-left:22px}
.article li{margin:4px 0}
.article table{width:100%;border-collapse:collapse;margin:16px 0;font-size:15px;background:#fff}
.article th,.article td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.article th{background:#f4f6f5;font-weight:600}
.tipbox{background:#fffbe6;border:1px solid #f0dc8a;border-radius:var(--r);padding:14px 18px;margin:24px 0;color:#4a3f12}
.tipbox p{margin:0;color:inherit}
.ex{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:16px 0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.ex div{padding:12px 14px;font-size:15px;background:#fff}
.ex .bad{color:var(--sub);border-right:1px solid var(--line)}
.ex .good{color:var(--ink);font-weight:500}
.ex b{display:block;font-size:12px;margin-bottom:4px;font-weight:600}
.ex .bad b{color:var(--mute)}
.ex .good b{color:var(--ok)}
.article-cta{margin:44px 0 0;border-top:2px solid var(--ink);padding:22px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.article-cta p{margin:0;color:var(--sub)}
.cta{display:inline-block;background:var(--ink);color:#fff;text-decoration:none;font-weight:600;padding:12px 22px;border-radius:var(--r);font-size:15px}
.cta:hover{background:#000}
.related{margin-top:20px}
.related h2{font-size:16px;margin:0 0 6px}
.related a{display:block;padding:11px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.related a:hover{text-decoration:underline;text-underline-offset:3px}
.legal h2{font-size:18px;margin:34px 0 8px}
.legal p,.legal li{font-size:15px}
.contact-box{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;padding:22px 24px}
.contact-box h2{margin:0 0 6px!important;font-size:15px!important;color:var(--sub)}
.page-hero{text-align:center;padding:90px 20px}
.page-hero h1{margin:0 0 10px;font-size:32px;letter-spacing:-.03em}
.page-hero p{color:var(--sub);margin:0 0 22px}

/* ---------- 썸네일 메이커 ---------- */
.thumb-head{max-width:1400px;margin:0 auto;padding:30px 28px 6px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.thumb-head h1{margin:0;font-size:clamp(24px,3.2vw,32px);font-weight:700;letter-spacing:-.035em}
.thumb-head p{margin:0;color:var(--sub);font-size:14.5px}
.app{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;padding:14px 28px 0;align-items:start;max-width:1400px;margin:0 auto}
@media (max-width:920px){.app{grid-template-columns:1fr;padding:10px 12px 0}.thumb-head{padding:22px 14px 4px}}
.stage{position:sticky;top:68px}
@media (max-width:920px){.stage{position:static}}
.canvas-wrap{display:flex;justify-content:center;align-items:center;border-radius:var(--r);padding:16px;min-height:240px}
canvas#cv{max-width:100%;max-height:66vh;display:block;box-shadow:0 2px 0 rgba(0,0,0,.2);touch-action:none;cursor:grab;background:#fff}
canvas#cv:active{cursor:grabbing}
.paste-zone{margin-top:12px;border:1px dashed #9db4a8;background:#f6faf8;border-radius:var(--r);padding:12px;text-align:center;color:var(--sub);outline:none;min-height:46px;cursor:text;font-size:14px}
.paste-zone b{color:var(--ink)}
.paste-zone:focus{border-color:var(--mat);border-style:solid}
.paste-zone img{display:none}
.stage-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.panel{display:flex;flex-direction:column;gap:12px}
.sec h2{font-size:14.5px;margin:0 0 8px;font-weight:600;display:flex;align-items:center;gap:8px}
.sec h2 .n{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:2px;background:var(--ink);color:#fff;font-size:11px;font-weight:600}
.slots{display:flex;gap:8px;flex-wrap:wrap}
.slot{width:58px;height:58px;border-radius:var(--r);border:1px solid var(--line);background:#f1f3f2 center/cover no-repeat;display:grid;place-items:center;color:var(--mute);font-weight:600;cursor:pointer;position:relative;touch-action:none;user-select:none;-webkit-user-select:none}
.slot.on{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink)}
.slot .k{position:absolute;left:4px;top:2px;font-size:11px;color:#fff;text-shadow:0 0 3px #000}
.slot.empty .k{color:var(--mute);text-shadow:none}
.slot.dragging{opacity:.35}
.slot.drop{box-shadow:0 0 0 3px var(--note);border-color:var(--ink)}
.slot.ghost{position:fixed;z-index:70;pointer-events:none;transform:scale(1.08) rotate(-3deg);box-shadow:0 10px 24px rgba(0,0,0,.25);margin:0}
.presets{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.preset{border:1px solid var(--line);border-radius:var(--r);height:40px;cursor:pointer;display:grid;place-items:center;font-size:14px;background:#888;overflow:hidden;font-family:"Black Han Sans"}
details.tips{margin-top:12px;color:var(--sub);font-size:13px}
details.tips summary{cursor:pointer;font-weight:600;color:var(--ink)}
details.tips li{margin:3px 0}
.modal{position:fixed;inset:0;background:rgba(20,26,23,.6);display:none;align-items:center;justify-content:center;padding:16px;z-index:50}
.modal.show{display:flex}
.modal .box{background:#fff;border-radius:var(--r-lg);padding:16px;max-width:720px;width:100%;max-height:92vh;overflow:auto}
.modal img{max-width:100%;max-height:60vh;display:block;margin:0 auto 12px}