@font-face{font-family:"GmarketSans";font-weight:300;font-style:normal;font-display:swap;src:url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff')}
@font-face{font-family:"GmarketSans";font-weight:500;font-style:normal;font-display:swap;src:url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff')}
@font-face{font-family:"GmarketSans";font-weight:700;font-style:normal;font-display:swap;src:url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff')}
:root{--bg:#11122b;--panel:#1b1d44;--panel2:#23265a;--line:#3a3f86;--edge:#0a0b1e;--text:#e8e9ff;--muted:#9ea4de;--gold:#ffcf5c;--ok:#4cc489;--bad:#ff6b5e;
  --f-body:"GmarketSans","Apple SD Gothic Neo","Noto Sans KR",sans-serif;--f-px:"GmarketSans","Apple SD Gothic Neo","Noto Sans KR",sans-serif;color-scheme:dark}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--bg);color:var(--text);font:500 15px/1.45 var(--f-body);-webkit-text-size-adjust:100%;
  padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  display:flex;align-items:center;justify-content:center}
.gate{width:100%;max-width:1020px}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.brand img{image-rendering:pixelated;width:40px;height:40px}
.brand h1{margin:0;font:26px/1.1 var(--f-px);color:var(--gold);font-weight:700}
.brand p{margin:2px 0 0;color:var(--muted);font-size:14px}
.steps{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;align-items:stretch}
.step{position:relative;background:var(--panel);border-radius:4px;box-shadow:0 0 0 2px var(--edge),inset 0 0 0 2px var(--line);padding:16px;display:flex;flex-direction:column;gap:6px;min-width:0}
.step+.step::before{content:"→";position:absolute;left:-14px;top:50%;width:14px;margin-top:-10px;text-align:center;color:var(--gold);font:16px var(--f-px)}
.step h2{margin:0 0 6px;font:17px/1.2 var(--f-px);color:var(--gold);font-weight:700;display:flex;align-items:center;gap:8px}
.step h2 span{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--gold);color:#1b1400;font-size:14px}
.hint{margin:-2px 0 4px;font-size:13px;color:var(--muted)}
label{font-size:13px;color:var(--muted);margin-top:6px}
input:not([type=checkbox]){width:100%;min-height:48px;border:0;border-radius:4px;background:#14163a;color:var(--text);font:16px var(--f-body);padding:10px 12px;box-shadow:inset 0 0 0 2px var(--line)}
input:focus-visible,button:focus-visible,.keep:focus-within{outline:2px solid var(--gold);outline-offset:2px}
.row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:6px}
.count{font-size:13px;color:var(--muted)}
.mini{min-height:44px;min-width:44px;padding:6px 12px;border:0;border-radius:4px;background:var(--panel2);color:var(--text);font:14px var(--f-body);cursor:pointer;box-shadow:0 0 0 2px var(--edge),inset 0 0 0 2px var(--line)}
.mini:hover{background:#2d3170}
.pat{width:100%;max-width:300px;aspect-ratio:1;margin:0 auto;background:#14163a;border-radius:6px;touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer;box-shadow:inset 0 0 0 2px #0e1030}
.pat .ring{fill:transparent;stroke:#2c3070;stroke-width:2}
.pat .dot{fill:#6b72c8}
.pat g.on .ring{stroke:var(--gold);fill:rgba(255,207,92,.12)}
.pat g.on .dot{fill:var(--gold)}
.pat polyline,.pat line{stroke:var(--gold);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;fill:none;opacity:.85}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;max-width:300px;margin:0 auto}
.pad button{aspect-ratio:1;min-height:64px;border:0;border-radius:8px;background:var(--panel2);cursor:pointer;box-shadow:0 0 0 2px var(--edge),inset 0 0 0 2px var(--line);transition:background .12s,transform .12s}
.pad button:hover{background:#2d3170}
.pad button.hit{background:var(--gold);transform:scale(.94)}
.foot{grid-column:1/-1;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.go{min-height:52px;padding:10px 36px;border:0;border-radius:4px;background:#4650c8;color:#fff;font:700 18px var(--f-px);cursor:pointer;box-shadow:0 0 0 2px var(--edge),inset 0 0 0 2px #7a84ff}
.go:hover{background:#5560e0}.go[disabled]{opacity:.5;cursor:default}
.msg{margin:0;font-size:15px;min-height:1.4em;flex:1;min-width:200px}
.msg.err{color:var(--bad)}.msg.info{color:var(--muted)}
.keep{display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;font-size:15px;color:var(--text);margin:0}
.keep input{appearance:auto;-webkit-appearance:checkbox;width:24px;height:24px;min-height:0;margin:0;padding:0;accent-color:var(--gold);flex:none;cursor:pointer}
.keep span{display:flex;flex-direction:column;line-height:1.25}
.keep small{font-size:12px;color:var(--muted)}
/* 바형 폰(≤599px): 세 칸을 위아래로, 패턴·버튼은 크게 */
@media (max-width:599px){
  body{align-items:flex-start}
  .steps{grid-template-columns:1fr;gap:22px}
  .step+.step::before{content:"↓";left:50%;top:-21px;margin:0 0 0 -7px;width:14px;height:16px}
  .foot{flex-direction:column;align-items:stretch;gap:12px}
  .go{width:100%;min-height:56px}
  .brand h1{font-size:22px}
  .msg{min-width:0}
}
/* 폴드 펼친 화면(600~719px): 2칸 + 1칸 */
@media (min-width:600px) and (max-width:719px){
  .steps{grid-template-columns:1fr 1fr}
  .step:nth-child(3){grid-column:1/-1}
  .step:nth-child(3)::before{content:"↓";left:50%;top:-17px;margin:0 0 0 -7px;width:14px;height:16px}
  .step:nth-child(3) .pad,.step:nth-child(3) .pat{max-width:260px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}