:root{--paper:oklch(97% .012 85);--paper-2:oklch(94% .016 82);--ink:oklch(22% .01 60);--ink-2:oklch(45% .012 60);--rule:oklch(82% .015 75);--seal:oklch(52% .19 27);--focus:oklch(55% .17 250);--card:oklch(99% .006 85)}
@media(prefers-color-scheme:dark){:root{--paper:oklch(20% .01 60);--paper-2:oklch(25% .012 60);--ink:oklch(92% .012 85);--ink-2:oklch(74% .012 75);--rule:oklch(36% .01 60);--seal:oklch(64% .17 27);--focus:oklch(68% .14 250);--card:oklch(23% .011 60)}}
*{box-sizing:border-box}html,body{overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 "Pretendard Variable","Apple SD Gothic Neo","Malgun Gothic",sans-serif;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
header{padding:10px 20px;border-bottom:1px solid var(--rule)}header a{font:900 1.3rem "Noto Serif KR",ui-serif,serif;color:var(--ink);text-decoration:none;letter-spacing:-.04em}
header a b{display:inline-block;background:var(--seal);color:var(--paper);font:800 .6em sans-serif;padding:2px 5px;margin-right:6px;transform:rotate(-6deg)}
main{max-width:820px;margin:0 auto;padding:16px 20px 48px}main.wide{max-width:1080px}
h1{font:900 clamp(1.5rem,4.6vw,2.2rem)/1.2 "Noto Serif KR",ui-serif,serif;letter-spacing:-.04em;margin:.4em 0 .3em}h2{font-size:1.15rem;margin:1.8em 0 .5em;border-bottom:2px solid var(--ink);padding-bottom:4px}
a{color:var(--ink)}a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
nav{font-size:13px;color:var(--ink-2)}.sub{color:var(--ink-2);font-size:14px}
.btns{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.cta{display:inline-block;padding:9px 15px;background:var(--ink);color:var(--paper);text-decoration:none;border-radius:2px;font-weight:700;font-size:14px}.cta.alt{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:14px 0}.stats div{background:var(--card);border:1px solid var(--rule);padding:10px 12px;font-size:13px;color:var(--ink-2)}.stats b{display:block;font:900 1.6rem/1.2 "Noto Serif KR",serif;color:var(--seal)}
/* 생성 썸네일 */
.th,.hero-th{--bg:oklch(92% .05 var(--h));--fg:oklch(40% .13 var(--h));background-color:var(--bg);color:var(--fg)}
@media(prefers-color-scheme:dark){.th,.hero-th{--bg:oklch(30% .06 var(--h));--fg:oklch(82% .11 var(--h))}}
.p0{background-image:radial-gradient(circle,color-mix(in oklch,var(--fg) 22%,transparent) 1.5px,transparent 2px);background-size:12px 12px}
.p1{background-image:repeating-linear-gradient(45deg,color-mix(in oklch,var(--fg) 14%,transparent) 0 2px,transparent 2px 10px)}
.p2{background-image:repeating-radial-gradient(circle at 80% 20%,color-mix(in oklch,var(--fg) 16%,transparent) 0 2px,transparent 2px 14px)}
.th{flex:none;width:56px;height:56px;border-radius:6px;display:grid;place-items:center;border:1px solid color-mix(in oklch,var(--fg) 30%,transparent)}.th .ic{width:34px;height:34px}
.hero-th{position:relative;display:flex;align-items:center;gap:18px;min-height:150px;padding:18px 20px;border-radius:8px;border:1px solid color-mix(in oklch,var(--fg) 30%,transparent);margin:10px 0 14px;overflow:hidden}
.ic.big{flex:none;width:96px;height:96px}.hero-cap{display:flex;flex-direction:column;gap:2px;min-width:0}.hero-cap span{font-size:13px;font-weight:700;letter-spacing:.08em}.hero-cap b{font:900 clamp(1.1rem,3.4vw,1.5rem)/1.3 "Noto Serif KR",serif;color:var(--ink)}
.stamp{position:absolute;right:14px;top:12px;text-align:center;font-size:12px;line-height:1.1;color:var(--seal);border:2.5px solid var(--seal);border-radius:50%;width:66px;height:66px;display:grid;place-content:center;transform:rotate(-10deg);background:color-mix(in oklch,var(--paper) 70%,transparent)}.stamp em{font:900 1.35rem/1 "Noto Serif KR",serif;font-style:normal}
/* 카드 */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;list-style:none;padding:0;margin:10px 0}
.card{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--rule);border-radius:6px;padding:10px;text-decoration:none;min-width:0}.card:hover{border-color:var(--ink)}
.card div{min-width:0}.card b{display:block;line-height:1.3}.card small{display:block;color:var(--ink-2);font-size:12.5px;line-height:1.4}
.card .n{margin-left:auto;flex:none;font:900 1.15rem "Noto Serif KR",serif;color:var(--seal);text-align:right}.card .n i{display:block;font:600 11px sans-serif;color:var(--ink-2);font-style:normal}
.bar{display:flex;align-items:center;gap:8px;font-size:14px;margin:4px 0}.bar a,.bar span.l{min-width:7.5em}.bar i{display:block;height:1em;background:var(--seal);border-radius:0 3px 3px 0}
.cat{display:flex;align-items:center;gap:8px;font-size:14px;margin:4px 0}.cat .th{width:30px;height:30px;border-radius:4px}.cat .th .ic{width:20px;height:20px}.cat span.l{min-width:3.5em}.cat i{display:block;height:1em;background:var(--ink-2);opacity:.6;border-radius:0 3px 3px 0}
.menu{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;margin:0}.menu div{background:var(--card);border:1px solid var(--rule);padding:10px 12px;border-radius:6px}.menu dt{font-size:12px;color:var(--ink-2);font-weight:700}.menu dd{margin:2px 0 0}
.mon{display:block;width:100%;height:auto}.mon text{font:600 13px sans-serif;fill:var(--ink-2)}.mon text.v{fill:var(--ink);font-weight:800}.mon rect{fill:var(--seal)}
.cols{columns:2 200px;list-style:none;padding:0}.thin li{color:var(--ink-2)}ul{padding-left:1.1em}li{margin:2px 0}
.photo{display:block;position:relative;border-radius:8px;overflow:hidden;border:1px solid var(--rule)}.photo img{display:block;width:100%;height:auto}.photo span{position:absolute;left:10px;bottom:10px;background:var(--ink);color:var(--paper);font-size:13px;font-weight:700;padding:5px 10px;border-radius:2px}
.hero{display:grid;gap:16px}.lead{font-size:1.05rem;max-width:42em}
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 2px}.tabs label{padding:7px 13px;border:1.5px solid var(--ink);border-radius:2px;font-weight:700;font-size:14px;cursor:pointer;min-height:40px;display:inline-flex;align-items:center}
.tabs input{position:absolute;opacity:0;pointer-events:none}.tabs input:checked+label{background:var(--ink);color:var(--paper)}.tabs input:focus-visible+label{outline:2px solid var(--focus);outline-offset:2px}
.rk2{display:none}.rkw:has(#rk2:checked) .rk1{display:none}.rkw:has(#rk2:checked) .rk2{display:block}.rk .sub{margin:4px 0 0}