:root{
  --paper:#FBFAF7; --paper2:#FFFFFF; --ink:#171717; --ink2:#5A564E;
  --line:#DEDAD0; --line2:#EDEAE2; --accent:#B4442E;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:"Iowan Old Style","Apple Garamond",Georgia,"Nanum Myeongjo","Noto Serif KR",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; line-height:1.65; min-height:100vh;
}
body::before{ /* 종이 결 */
  content:""; position:fixed; inset:0; background-image:var(--grain);
  background-size:180px 180px; opacity:.5; pointer-events:none; z-index:1; mix-blend-mode:multiply;
}
body::after{ /* 외곽 비네트 */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:2;
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(0,0,0,0) 52%, rgba(66,58,46,.09) 82%, rgba(50,42,32,.17) 100%),
    linear-gradient(to bottom, rgba(60,52,40,.05), rgba(0,0,0,0) 12%, rgba(0,0,0,0) 88%, rgba(60,52,40,.06));
}
.wrap{position:relative; z-index:3; max-width:1240px; margin:0 auto; padding:0 22px 90px}

/* ── 머리 ── */
header{padding:56px 0 26px; border-bottom:1.5px solid var(--ink); margin-bottom:0}
.kicker{font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink2)}
h1{font-family:var(--serif); font-weight:400; font-size:clamp(34px,6.4vw,62px); line-height:1.02; margin:12px 0 6px; letter-spacing:-.02em}
h1 em{font-style:italic; color:var(--ink2)}
.sub{max-width:56ch; color:var(--ink2); font-size:15px; margin:14px 0 0}
.rulebar{display:flex; gap:18px; flex-wrap:wrap; font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  color:var(--ink2); border-top:1px solid var(--line); margin-top:22px; padding-top:10px}

/* ── 검색·카테고리 ── */
.tools{position:sticky; top:0; z-index:12; background:rgba(251,250,247,.93); backdrop-filter:blur(9px);
  border-bottom:1px solid var(--line); padding:14px 0 12px; margin-bottom:26px}
.searchrow{display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding-right:2px}
.search{flex:1 1 260px; display:flex; align-items:center; gap:9px; border:1.5px solid var(--ink);
  background:var(--paper2); padding:9px 13px}
.search input{flex:1; border:0; outline:0; background:transparent; font-family:var(--mono); font-size:14px; color:var(--ink)}
.search svg{flex:none; opacity:.5}
.count{font-family:var(--mono); font-size:12px; color:var(--ink2); white-space:nowrap; flex:none; margin-left:auto}
.cats{display:flex; gap:7px; flex-wrap:wrap; margin-top:11px}
.cat{font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; padding:5px 11px; border:1px solid var(--line);
  background:transparent; color:var(--ink2); cursor:pointer; transition:.13s; border-radius:0}
.cat:hover{border-color:var(--ink); color:var(--ink)}
.cat[aria-selected="true"]{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.cat b{font-weight:400; opacity:.55; margin-left:6px}

/* ── 격자 ── */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:20px}
.card{position:relative; background:var(--paper2); border:1px solid var(--line);
  box-shadow:0 1px 0 rgba(90,80,64,.06), 0 10px 22px -18px rgba(60,50,36,.5); cursor:pointer; transition:.15s}
.card:hover{border-color:var(--ink); transform:translateY(-2px)}
.stage{position:relative; aspect-ratio:1/1; overflow:hidden; background:#FDFCF8}
.stage canvas{display:block; width:100%; height:100%}
.stage::before{content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background-image:var(--grain); background-size:180px 180px; opacity:.55; mix-blend-mode:multiply}
.stage::after{content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:radial-gradient(78% 70% at 50% 46%, rgba(0,0,0,0) 58%, rgba(70,60,46,.10) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.idtag{position:absolute; top:8px; left:9px; font-family:var(--mono); font-size:10px; letter-spacing:.08em;
  color:var(--ink2); background:rgba(255,255,255,.7); padding:1px 5px; z-index:2}
.meta{padding:12px 13px 14px; border-top:1px solid var(--line2)}
.en{font-family:var(--mono); font-size:12.5px; font-weight:500; letter-spacing:-.01em; line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.ko{font-size:13.5px; color:var(--ink2); margin-top:4px}
.chips{display:flex; gap:5px; margin-top:9px; flex-wrap:wrap}
.chip{font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; color:var(--ink2);
  border:1px solid var(--line); padding:1px 5px}

/* ── 상세 ── */
.modal{position:fixed; inset:0; z-index:60; display:none; align-items:center; justify-content:center; padding:20px}
.modal.on{display:flex}
.veil{position:absolute; inset:0; background:rgba(40,34,26,.42); backdrop-filter:blur(3px)}
.sheet{position:relative; background:var(--paper2); border:1.5px solid var(--ink); max-width:900px; width:100%;
  max-height:92vh; overflow:auto; box-shadow:0 30px 70px -30px rgba(40,32,20,.7)}
.sheet .body{display:grid; grid-template-columns:1fr 1fr; gap:0}
@media(max-width:720px){.sheet .body{grid-template-columns:1fr}}
.bigstage{position:relative; aspect-ratio:1/1; border-right:1px solid var(--line2); background:#FDFCF8}
.bigstage canvas{display:block; width:100%; height:100%}
.bigstage::before{content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background-image:var(--grain); background-size:180px 180px; opacity:.5; mix-blend-mode:multiply}
.bigstage::after{content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:radial-gradient(76% 68% at 50% 46%, rgba(0,0,0,0) 56%, rgba(70,60,46,.11) 100%)}
.info{padding:22px 24px 26px}
.info h2{font-family:var(--mono); font-size:16px; font-weight:600; margin:0 0 2px; line-height:1.35}
.info .kotitle{font-family:var(--serif); font-size:24px; margin:2px 0 12px}
.info p{font-size:14.5px; color:#3B372F; margin:0 0 14px}
.kv{font-family:var(--mono); font-size:11.5px; color:var(--ink2); border-top:1px solid var(--line2); padding-top:10px; margin-top:4px}
.kv div{display:flex; justify-content:space-between; gap:16px; padding:2px 0}
.kv div span:last-child{text-align:right}
.prompt{border:1.5px dashed var(--line); background:#FCFBF8; padding:11px 12px; margin:14px 0 10px}
.prompt .lbl{font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--ink2); text-transform:uppercase}
.prompt .val{font-family:var(--mono); font-size:13.5px; margin-top:5px; line-height:1.5; word-break:break-word}
.prompt .note{font-size:11.5px; color:var(--ink2); margin-top:7px; line-height:1.5}
.btns{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
button.act{font-family:var(--mono); font-size:12px; padding:8px 13px; border:1.5px solid var(--ink);
  background:var(--ink); color:var(--paper); cursor:pointer}
button.act.ghost{background:transparent; color:var(--ink)}
button.act:hover{opacity:.86}
.ctl{display:flex; gap:14px; align-items:center; flex-wrap:wrap; font-family:var(--mono); font-size:11px;
  color:var(--ink2); border-top:1px solid var(--line2); margin-top:16px; padding-top:12px}
.ctl label{display:flex; gap:7px; align-items:center}
.ctl input[type=range]{width:96px; accent-color:var(--ink)}
.x{position:absolute; top:10px; right:12px; z-index:3; border:0; background:transparent; font-size:22px;
  cursor:pointer; color:var(--ink2); line-height:1}
a.src{color:var(--accent); text-decoration:none; border-bottom:1px solid currentColor; font-family:var(--mono); font-size:11.5px}

/* ── 꼬리 ── */
footer{margin-top:64px; border-top:1.5px solid var(--ink); padding-top:20px; font-size:13px; color:var(--ink2)}
footer h3{font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink); margin:0 0 10px}
footer p{margin:0 0 10px; max-width:74ch}
footer .cite{font-family:var(--mono); font-size:11.5px; background:#F4F1EA; border-left:2px solid var(--ink);
  padding:10px 12px; margin:12px 0; white-space:pre-line}
footer a{color:var(--accent)}
.empty{padding:60px 0; text-align:center; color:var(--ink2); font-family:var(--mono); font-size:13px}

/* ── 상단 이동 ── */
.nav{display:flex; gap:16px; align-items:baseline; justify-content:space-between; flex-wrap:wrap}
.nav a{font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); text-decoration:none; border-bottom:1.5px solid var(--ink); padding-bottom:2px}
.nav a:hover{color:var(--accent); border-color:var(--accent)}

/* ── 사용방법 ── */
.guide{max-width:74ch}
.guide h2{font-family:var(--serif); font-weight:400; font-size:clamp(22px,3.4vw,30px); margin:44px 0 10px;
  border-top:1px solid var(--line); padding-top:22px; letter-spacing:-.01em}
.guide h3{font-family:var(--mono); font-size:13px; font-weight:600; margin:24px 0 6px}
.guide p{font-size:15px; margin:0 0 13px; color:#3B372F}
.guide ul{padding-left:19px; margin:0 0 14px}
.guide li{font-size:14.5px; margin-bottom:7px; color:#3B372F}
.guide code{font-family:var(--mono); font-size:12.5px; background:#F2EFE8; padding:1px 5px}
.step{display:flex; gap:14px; align-items:baseline; margin-top:30px}
.step .num{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--accent);
  border:1px solid var(--accent); padding:2px 7px; flex:none}
.warn{border-left:2px solid var(--accent); background:#FBF6F4; padding:12px 14px; margin:14px 0; font-size:14px}
.warn b{color:var(--accent)}
pre.prompt-box{font-family:var(--mono); font-size:11.5px; line-height:1.62; background:#FAF8F3;
  border:1px solid var(--line); padding:18px 16px; overflow-x:auto; white-space:pre; max-height:520px;
  overflow-y:auto; margin:0}
.promptwrap{margin:16px 0 8px; position:relative}
.copybar{display:flex; gap:8px; align-items:center; margin-bottom:9px; flex-wrap:wrap}
.tiny{font-family:var(--mono); font-size:11px; color:var(--ink2)}
table.spec{width:100%; border-collapse:collapse; font-size:13.5px; margin:12px 0 18px}
table.spec th,table.spec td{border-bottom:1px solid var(--line2); padding:8px 6px; text-align:left; vertical-align:top}
table.spec th{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink2)}
table.spec td:first-child{font-family:var(--mono); font-size:12.5px; white-space:nowrap}

.more{display:block; width:100%; margin:26px 0 0; padding:15px; font-family:var(--mono); font-size:13px;
  border:1.5px solid var(--ink); background:transparent; color:var(--ink); cursor:pointer; letter-spacing:.04em}
.more:hover{background:var(--ink); color:var(--paper)}