/* 목록·버전 연혁·만드는 방식 공통 스타일. 작품 폴더의 페이지는 각자 스타일을 쓴다. */
:root{--paper:#F4EFE3;--card:#FFFDF8;--ink:#1F2E29;--line:#D9D2C0;--line2:#ECE6D8;--chip:#CFC6B0;--sub:#4E5B4D;--muted:#6B6450;--gold:#8A5A0C;--night:#13162A;--amber:#F2A93B;--pad:clamp(16px,4.4vw,64px)}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Noto Sans KR',system-ui,sans-serif;line-height:1.6}
a{color:inherit;text-decoration:none}
a:hover{color:var(--gold)}
button,select{font:inherit;color:inherit}
.serif{font-family:'Noto Serif KR',serif}
html[lang=en] .ko-only{display:none}
html[lang=ko] .en-only{display:none}
html[lang=en] p,html[lang=en] .d{word-break:normal}
p,.d{word-break:keep-all}

/* 머리글 */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px 40px;flex-wrap:wrap;padding:18px var(--pad);border-bottom:1px solid var(--line);background:var(--card)}
.top .left{display:flex;align-items:center;gap:16px 40px;flex-wrap:wrap;min-width:0}
.brand{font-size:13px;font-weight:700;letter-spacing:.16em;color:var(--gold)}
.nav{display:flex;gap:6px 28px;font-size:15px;overflow-x:auto;scrollbar-width:none}
.nav a{color:var(--sub);white-space:nowrap;padding:4px 0;border-bottom:2px solid transparent}
.nav a[aria-current=page]{color:var(--ink);font-weight:700;border-bottom-color:var(--ink)}
.top .right{display:flex;align-items:center;gap:16px;font-size:14px}
.top .right>a{color:var(--sub)}
.top .lang-tog{position:static;padding:0}
.sub-nav{display:flex;gap:8px;padding:14px var(--pad);border-bottom:1px solid var(--line);font-size:14px;overflow-x:auto}
.sub-nav a{padding:8px 16px;border-radius:999px;border:1px solid var(--chip);background:var(--card);white-space:nowrap}
.sub-nav a[aria-current=page]{background:var(--ink);border-color:var(--ink);color:var(--card);font-weight:700}

/* 공통 조각 */
.wrap{padding-left:var(--pad);padding-right:var(--pad)}
.page-h{padding-top:40px;display:flex;justify-content:space-between;align-items:flex-end;gap:16px 40px;flex-wrap:wrap}
.page-h h1{margin:0 0 10px;font-family:'Noto Serif KR',serif;font-size:clamp(28px,3.4vw,38px);letter-spacing:-.03em;line-height:1.25}
.page-h p{margin:0;font-size:16.5px;color:var(--sub);max-width:800px;line-height:1.75}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px}
.muted{color:var(--muted)}
.kicker{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--muted)}
.who{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.who.human{background:#F6E7C8;color:#6B4508}
.who.ai{background:#DCE8F1;color:#1D4260}
.who.code{background:#E4E0D4;color:var(--ink)}
.who.img{background:#F1DCE5;color:#6E2544}
.legend{display:flex;gap:8px;flex-wrap:wrap}
.legend .who{padding:4px 12px;font-size:12.5px}
.foot{margin-top:auto;padding:28px var(--pad);border-top:1px solid var(--line);font-size:13px;color:var(--muted);display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap}
.foot a{text-decoration:underline}
.shell{min-height:100vh;display:flex;flex-direction:column}
.arrow{display:flex;align-items:center;justify-content:center;color:var(--muted)}
.arrow svg{stroke:currentColor}
.stats-dark{display:flex;flex-direction:column;gap:14px;padding:22px;background:var(--night);color:#F3EBDA;border-radius:14px}
.stats-dark .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.stats-dark .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.stats-dark b.n{font-size:26px;color:var(--amber);display:block;line-height:1.3}
.stats-dark span.l{font-size:12.5px;color:#B7BCD0}
.stats-dark .note{font-size:12px;color:#9097B3;line-height:1.6}
.stats-dark a{font-size:13.5px;font-weight:700;color:var(--amber)}
[hidden]{display:none!important}