@import url('https://fonts.googleapis.com/css2?family=Jua&family=Noto+Sans+KR:wght@400;600;800;900&family=Noto+Serif+KR:wght@500;700&display=swap');
/* 레이아웃: 충무로딩 공통 헤더 → 한 화면 게임(로고·HUD / 산길 캔버스 / 조작 버튼) → 다른 게임 → 푸터 */
:root{
  --ink:#0d2028;--muted:#5c6a70;--mint:#00b4c9;--paper:#f5f0e5;--line:rgba(13,32,40,.2);--card:#fffdf8;
  --btn:#0d2028;--btn-ink:#f5f0e5;--accent:#ff5a5f;
  --p1:#ff5a5f;--p2:#ffc93c;--p3:#39c98a;--p4:#4a8dff;--outline:#0d2028;
  --display:"Jua","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --body:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);-webkit-tap-highlight-color:transparent}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

.site-header{height:80px;padding:0 clamp(20px,4vw,64px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid var(--line);background:rgba(245,240,229,.94);position:relative;z-index:10}
.site-header a{color:inherit;text-decoration:none}.brand{justify-self:start;line-height:0}.brand img{height:28px;width:auto}
.newsis-logo{position:absolute;left:50%;transform:translateX(-50%);line-height:0}.newsis-logo img{height:29px;width:auto}
.visual-newsis{grid-column:3;justify-self:end;font-size:11px;font-weight:900;letter-spacing:.08em}

.sg-main{display:flex;flex-direction:column;align-items:center;padding:0 16px 40px}
.app{width:100%;max-width:460px;height:calc(100svh - 80px);min-height:560px;max-height:920px;display:flex;flex-direction:column;gap:8px;padding-block:12px;
  -webkit-user-select:none;user-select:none}
.app header{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.title{display:flex;flex-direction:column;gap:4px;min-width:0}
.title small{font-size:10px;font-weight:900;color:var(--mint);letter-spacing:.16em}
.logo{font-family:var(--display);font-size:clamp(38px,11.5vw,48px);line-height:1;margin:0;font-weight:400;display:flex;gap:2px;white-space:nowrap;padding-top:4px}
.logo span{display:inline-block;-webkit-text-stroke:7px var(--outline);paint-order:stroke fill;text-shadow:0 4px 0 var(--outline)}
.logo span:nth-child(1){color:var(--p1);rotate:-7deg}
.logo span:nth-child(2){color:var(--p2);rotate:5deg;translate:0 2px}
.logo span:nth-child(3){color:var(--p3);rotate:-4deg;animation:pop 1.8s ease-in-out infinite}
.logo span:nth-child(4){color:var(--p4);rotate:7deg;animation:pop 1.8s ease-in-out .18s infinite}
@keyframes pop{0%,68%,100%{transform:none}78%{transform:translateY(-6px) scale(1.1)}88%{transform:translateY(1px) scale(.96)}}
.sub{font-family:var(--display);font-size:18px;line-height:1.25;margin:0;color:var(--ink);text-wrap:balance}
.sub em{font-style:normal;color:var(--p1)}
.hud{display:flex;gap:12px;align-self:flex-end;padding-bottom:4px;font-size:11px;color:var(--muted);text-align:right}
.hud b{display:block;color:var(--ink);font-size:17px;font-family:var(--display);font-weight:400;font-variant-numeric:tabular-nums}

.stage{flex:1;position:relative;min-height:0;border-radius:16px;overflow:hidden;background:#2b5f9a}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block}
.warn{position:absolute;left:12px;top:8px;max-width:30%;padding:6px 8px;border-radius:10px;background:#fff4e8;color:#8a2a12;
  font-family:var(--display);font-size:13px;line-height:1.2;text-align:center;box-shadow:0 2px 0 #8a2a12;pointer-events:none}

.pad{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pad button{height:52px;border:0;border-radius:14px;background:var(--btn);color:var(--btn-ink);font-size:20px;font-family:var(--display);touch-action:manipulation;cursor:pointer}
.pad button:active{transform:scale(.96)}
.pad button:focus-visible,.card button:focus-visible,.card a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.hint{font-size:11px;color:var(--muted);text-align:center;margin:0}
@media(pointer:coarse){.hint{display:none}}

.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(8,18,30,.55);padding:16px}
.card,.guide{word-break:keep-all}
.card{background:var(--card);color:var(--ink);border-radius:18px;padding:22px 20px;max-width:310px;width:100%;max-height:100%;overflow:auto;text-align:center;display:flex;flex-direction:column;gap:10px}
.card h2{font-family:var(--display);font-weight:400;font-size:26px;margin:0;text-wrap:balance}
.card p{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}
.card ol{margin:0;padding-left:1.2em;text-align:left;font-size:14px;line-height:1.6}
.card .big{font-family:var(--display);font-size:34px;color:var(--ink)}
.card .lead{font-family:var(--display);font-size:20px;color:var(--ink)}
.card .lead b{color:var(--accent);font-weight:400}
.card .logo{justify-content:center;font-size:54px}
.card .sub{font-size:19px}
.card button{height:48px;border:0;border-radius:12px;background:var(--accent);color:#fff;font-family:var(--display);font-size:19px;cursor:pointer}
.news-label{font-size:11px!important;font-weight:900;letter-spacing:.12em;color:var(--mint)!important;text-align:left}
.news{display:flex;flex-direction:column;gap:6px;text-align:left}
.news a{display:block;padding:8px 10px;border:1px solid var(--line);border-radius:10px;color:var(--ink);text-decoration:none;font-size:13px;line-height:1.4}
.news a:hover{background:#f3ece0}

.guide-link{font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}

.guide{width:100%;max-width:760px;margin-top:40px;padding-top:36px;border-top:1px solid var(--line)}
.guide-eyebrow{margin:0;color:var(--mint);font-size:10px;font-weight:900;letter-spacing:.18em}
.guide h2{margin:6px 0 24px;font:400 32px/1.2 var(--display);text-wrap:balance}
.guide h3{margin:0 0 8px;font:400 20px/1.3 var(--display)}
.guide p,.guide li{font-size:15px;line-height:1.7}
.guide p{margin:0 0 8px;max-width:62ch}
.guide b{font-weight:800}
.guide-steps{margin:0;padding:0;list-style:none;counter-reset:step;display:flex;flex-direction:column;gap:28px}
.guide-steps>li{counter-increment:step;display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px}
.guide-steps>li::before{content:counter(step);grid-row:1/99;width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font:400 18px/1 var(--display)}
.guide-steps>li>*{grid-column:2}
.guide-figs{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:10px}
.guide-figs figure{margin:0;display:flex;flex-direction:column;gap:6px}
.guide-figs figcaption{font-size:13px;color:var(--muted)}
.guide-figs .arrow{font:400 24px/1 var(--display);color:var(--muted)}
.ok{color:#118a55}.no{color:#c0392b}
.mini{display:grid;grid-template-columns:repeat(var(--cols),30px);gap:2px;padding:6px;border-radius:10px;background:#0b3140;width:max-content}
.mini i{width:30px;height:30px;border-radius:4px;background:rgba(255,255,255,.05) center/contain no-repeat}
.mini .r{background-image:url(./assets/red.png)}.mini .y{background-image:url(./assets/yellow.png)}
.mini .g{background-image:url(./assets/green.png)}.mini .b{background-image:url(./assets/blue.png)}
.guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:36px}
.guide-grid>div{padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--card);min-width:0}
.guide-grid ul{margin:0;padding-left:1.1em}
.guide-grid li{font-size:14px;line-height:1.65}
@media(max-width:760px){.guide-grid{grid-template-columns:1fr}.guide h2{font-size:27px}}

.coordinates{display:block;margin-top:24px;font:500 10px/1 monospace;letter-spacing:.08em;color:#5f5e5a}
.other-games,footer{background:#0c211d;color:#f5f0e5}
.other-games{padding:80px clamp(20px,6vw,110px);display:grid;grid-template-columns:.4fr 1fr;gap:40px}
.other-games p{color:var(--mint);font-size:10px;letter-spacing:.18em;font-weight:900}
.other-games h2{font:700 34px/1.3 "Noto Serif KR",serif}
.other-games nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.18)}
.other-games a{display:flex;flex-direction:column;gap:25px;background:#0c211d;color:inherit;text-decoration:none;padding:25px}
.other-games a:hover{background:#12362f}
.other-games span{color:var(--mint);font-size:10px}
footer{border-top:1px solid rgba(255,255,255,.18);padding:25px clamp(20px,6vw,110px);display:flex;justify-content:space-between;font-size:10px}
footer a{color:inherit;text-decoration:none}

@media(max-width:480px){
  .site-header{height:64px;padding:0 16px}.brand img{height:21px}.newsis-logo img{height:23px}.visual-newsis{font-size:9px}
  .app{height:calc(100svh - 64px)}
  .other-games{grid-template-columns:1fr}.other-games nav{grid-template-columns:repeat(2,1fr)}
  footer{gap:14px;flex-wrap:wrap}
}
@media(max-height:700px){
  .app{gap:6px;padding-block:8px}
  .logo{font-size:34px}.sub{font-size:16px}
  .pad button{height:46px}.hint{display:none}
  .card{padding:16px;gap:8px}.card .logo{font-size:42px}
}
@media(prefers-reduced-motion:reduce){.logo span{animation:none!important}.pad button:active{transform:none}}