@font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/assets/fonts/plexmono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/assets/fonts/plexmono-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
:root { --bg: #0A0A0A; --fg: #F2F2F2; --dim: #8C8C8C; --line: #2A2A2A; }
* { box-sizing: border-box; margin: 0; padding: 0; border-radius: 0; }
html { background: var(--bg); }
body { color: var(--fg); font-family: "Archivo", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.mono { font-family: "Plex Mono", monospace; font-weight: 500; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.dim { color: var(--dim); }
.logo { font-weight: 900; font-stretch: 125%; font-size: 20px; letter-spacing: -.02em; }
.ad { display: none; }   /* AdSense 자리: 승인 후 표시 */

/* ===== home ===== */
.top { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; }
.hero { padding: 40px 24px 56px; }
.hero h1 { font-weight: 900; font-stretch: 125%; font-size: clamp(56px, 13vw, 190px); line-height: .84; letter-spacing: -.045em; }
.hero h1 .o { -webkit-text-stroke: 2px var(--fg); color: transparent; }
.hero p { margin-top: 28px; font-size: 19px; line-height: 1.4; max-width: 30em; color: #CFCFCF; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tile { background: var(--bg); display: flex; flex-direction: column; }
.tile .media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #000; }
.tile video, .tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile .info { padding: 16px 18px 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); flex: 1; }
.tile h2 { font-weight: 900; font-stretch: 115%; font-size: 30px; line-height: 1; letter-spacing: -.02em; margin-top: 6px; }
.tile p { font-size: 14px; color: #D0D0D0; margin-top: 6px; max-width: 22em; line-height: 1.35; }
.play { flex: none; background: var(--fg); color: var(--bg); font-family: "Plex Mono", monospace; font-weight: 700; font-size: 13px; letter-spacing: .06em; padding: 12px 16px; }
.tile:hover .play { background: #FFE14D; }
.tile.soon { align-items: center; justify-content: center; color: var(--dim); min-height: 320px; }
.foot { display: flex; justify-content: space-between; padding: 22px 24px 30px; }
@media (max-width: 900px) { .grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .grid { grid-template-columns: 1fr; } .top .mono { display: none; } }

/* ===== toy page ===== */
body.toy { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
.toy .stage { position: relative; flex: 1; min-height: 0; }
.toy canvas { display: block; touch-action: none; }
.toy .hud { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; z-index: 3; }
.toy .hint { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; pointer-events: none; }
.toy .score { position: absolute; left: 0; right: 0; top: 54px; text-align: center; font-family: "Plex Mono", monospace; font-weight: 700; font-size: 18px; pointer-events: none; }
.dock { display: flex; border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.dock > * { flex: 1; display: flex; align-items: center; justify-content: center; height: 56px; border: 0; border-right: 1px solid var(--line); background: var(--bg); color: var(--fg); font-family: "Plex Mono", monospace; font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.dock > *:last-child { border-right: 0; }
.dock > .on, .dock > *:active { background: var(--fg); color: var(--bg); }
.dock input { display: none; }

/* render(video) mode */
.wm, .cap { display: none; }
body.render .hud, body.render .dock, body.render .hint, body.render .score { display: none; }
body.render { height: 1920px; }
body.render .wm { display: block; position: fixed; top: 270px; left: 0; right: 0; text-align: center; font-weight: 900; font-stretch: 125%; font-size: 40px; letter-spacing: -.02em; color: rgba(255,255,255,.85); z-index: 6; }
body.render .cap { display: flex; position: fixed; left: 0; right: 0; bottom: 470px; justify-content: center; z-index: 6; }
body.render .cap span { font-weight: 900; font-stretch: 125%; font-size: 76px; line-height: 1; letter-spacing: -.03em; text-align: center; padding: 0 50px; color: #fff; text-shadow: 0 4px 0 #000; }