body{margin:0}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}

/* Zestloom — 먹색 Z와 주황 실. 히어로는 베틀처럼 엮인 실, 게임·소식·소개·문의 */
:root{
  --bg:#FAF7F2; --surface:#ffffff; --ink:#1F1B2D; --muted:#655e6e; --line:#e8e2d8;
  --thread:#EA580C; --thread-deep:#c2410c; --cell:#f1ece3; --zest:#1F1B2D;
  --display:"Bricolage Grotesque","IBM Plex Sans KR","Apple SD Gothic Neo",system-ui,sans-serif;
  --body:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#1F1B2D; --surface:#28233a; --ink:#FAF7F2; --muted:#aaa3b8; --line:#363049;
  --thread:#FB923C; --thread-deep:#FB923C; --cell:#2b2640; --zest:#FB923C; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#1F1B2D; --surface:#28233a; --ink:#FAF7F2; --muted:#aaa3b8; --line:#363049;
  --thread:#FB923C; --thread-deep:#FB923C; --cell:#2b2640; --zest:#FB923C; color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:16px/1.7 var(--body);word-break:keep-all}
.wrap{max-width:1040px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
a{color:inherit}
/* 줄바꿈: 문장은 줄을 나눠 시작, 의미 덩어리(.w)는 가능하면 한 줄에 */
p,dd{text-wrap:pretty}
.w{display:inline-block}
.sn{display:block}
h1,h2,h3{font-family:var(--display);font-weight:700;text-wrap:balance;margin:0;line-height:1.25}
.eyebrow{font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* nav */
nav{display:flex;justify-content:space-between;align-items:center;padding-block:20px;gap:16px;flex-wrap:wrap}
.mark{display:flex;align-items:center;gap:8px;text-decoration:none;font:400 22px/1 var(--display);letter-spacing:-.02em;color:var(--ink)}
.mark b{font-weight:800;color:var(--zest)}
.mark svg{width:36px;height:36px;margin:-3px -2px}
nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0;font-size:15px}
nav ul a{text-decoration:none;color:var(--muted)}
nav ul a:hover{color:var(--ink)}

/* hero */
.hero{position:relative;border-bottom:1px solid var(--line);overflow:hidden}
#field{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero .wrap{position:relative;padding-block:72px 84px;pointer-events:none}
.hero h1{font-size:clamp(60px,14vw,140px);letter-spacing:-.045em;line-height:.95;font-weight:400}
.hero h1 b{font-weight:800;color:var(--zest)}
.hero h1 .lab{display:block;margin:14px 0 0 .06em;font:500 clamp(15px,2.2vw,22px)/1 var(--body);letter-spacing:.55em;color:var(--muted)}
.mark .lab{font:600 10px/1 var(--body);letter-spacing:.3em;color:var(--muted);margin-left:7px;vertical-align:2px}
.hero .read{margin-top:10px;font:500 13px var(--mono);color:var(--muted);letter-spacing:.06em}
.hero p.lede{margin:28px 0 0;max-width:30em;font-size:clamp(17px,2.4vw,20px);background:color-mix(in srgb,var(--bg) 82%,transparent);display:inline-block;padding:4px 0}

/* games */
section{padding-block:72px}
.head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.head h2{font-size:clamp(28px,4vw,38px)}
.game{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:36px;align-items:center;padding-block:32px;border-top:1px solid var(--line)}
.game:last-child{border-bottom:1px solid var(--line)}
.board{aspect-ratio:1;max-width:100%;background:var(--surface);border:1px solid var(--line);border-radius:20px;display:grid;place-items:center;padding:18px}
.board svg{width:100%;height:auto}
.game h3{font-size:clamp(26px,3.6vw,34px)}
.game h3 small{display:block;font:500 13px var(--mono);color:var(--muted);letter-spacing:.06em;margin-top:6px}
.game p{margin:14px 0 0;max-width:34em;color:var(--ink)}
.facts{display:flex;flex-wrap:wrap;gap:8px 18px;margin:18px 0 0;padding:0;list-style:none;font-size:14px;color:var(--muted)}
.facts b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.pill{display:inline-flex;align-items:center;gap:7px;font:500 12px var(--mono);letter-spacing:.06em;padding:6px 11px;border-radius:999px;border:1px solid var(--line);color:var(--muted);margin-top:16px}
.pill i{width:8px;height:8px;border-radius:50%;background:var(--thread);box-shadow:0 0 0 3px color-mix(in srgb,var(--thread) 25%,transparent)}
.pill.idea i{background:var(--muted);box-shadow:none}
.next{margin:28px 0 0;color:var(--muted);font-size:15px}
.mood{margin:14px 0 0;font-size:15px;color:var(--muted);font-style:italic;max-width:34em}
.mood b{font-style:normal;font-weight:600;color:var(--ink)}

/* studio */
.studio{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:48px;align-items:start}
.studio h2{font-size:clamp(28px,4vw,38px)}
.eq{font:400 clamp(40px,7vw,64px)/1.1 var(--display);letter-spacing:-.03em;margin-top:20px}
.eq b{font-weight:800;color:var(--zest)}
.eq i{font-style:normal;color:var(--thread)}
.studio-text p{margin:0 0 16px;max-width:36em}
.studio-text dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 20px;margin:24px 0 0;font-size:15px}
.studio-text dt{font:500 12px/1.9 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.studio-text dd{margin:0}

/* contact */
.contact{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.contact .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-block:44px}
.contact h2{font-size:clamp(24px,3.4vw,30px)}
.mail{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mail code{font:500 clamp(15px,2.4vw,18px) var(--mono);user-select:all;word-break:break-all}
.copy{border:1px solid var(--thread-deep);background:transparent;color:var(--ink);font:600 14px var(--body);padding:8px 16px;border-radius:999px;cursor:pointer}
.copy:hover{background:var(--thread);border-color:var(--thread);color:#fff}
.studio-text dl dt{white-space:nowrap}
button:focus-visible,a:focus-visible{outline:3px solid var(--thread);outline-offset:3px}

footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:28px 40px;font-size:13px;color:var(--muted)}
footer ul{display:flex;gap:18px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
footer a{color:var(--muted)}

@media (max-width:680px){
  nav ul{gap:16px}
  .game,.studio{grid-template-columns:1fr;gap:22px}
  .board{max-width:240px}
  .hero .wrap{padding-block:48px 60px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* news list */
.news{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.news li{border-bottom:1px solid var(--line)}
.news a{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:4px 20px;padding-block:18px;text-decoration:none}
.news time{font:500 13px/1.9 var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.news strong{font:700 clamp(18px,2.4vw,21px)/1.4 var(--display)}
.news span{grid-column:2;color:var(--muted);font-size:15px}
.news a:hover strong{color:var(--thread-deep)}
.more{display:inline-block;margin-top:18px;font-size:15px;color:var(--muted)}
.empty{color:var(--muted)}
/* post */
.post{max-width:680px;margin:0 auto;padding-block:56px 72px}
.post .meta{font:500 13px var(--mono);color:var(--muted);letter-spacing:.04em}
.post h1{font-size:clamp(30px,5vw,44px);margin:12px 0 28px}
.post .body{font-size:17px;line-height:1.85}
.post .body h2{font-size:24px;margin:40px 0 12px}
.post .body h3{font-size:20px;margin:28px 0 8px}
.post .body p{margin:0 0 18px;text-wrap:pretty}
.post .body img{border-radius:12px;border:1px solid var(--line)}
.post .body a{color:var(--thread-deep)}
.post .body blockquote{margin:0 0 18px;padding:4px 0 4px 18px;border-left:3px solid var(--thread);color:var(--muted)}
.post .body code{font:500 .9em var(--mono);background:var(--surface);border:1px solid var(--line);padding:1px 5px;border-radius:5px}
.post .body pre{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px;overflow-x:auto}
.post .body pre code{border:0;padding:0}
.back{display:inline-block;margin-top:40px;color:var(--muted);font-size:15px}
@media (max-width:680px){.news a{grid-template-columns:1fr}.news span{grid-column:1}}