:root{--ink:#3b2a2a;--paper:#fff7ec;--card:#fff;--sky:#8ecae6;--accent:#ff8fa3;--accent-ink:#fff;--muted:#3b2a2a9e;--radius:18px;--font:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif}*{box-sizing:border-box}html{background:var(--paper)}body{background:linear-gradient(180deg, var(--sky) 0, #cfe8f4 28svh, var(--paper) 46svh) no-repeat;background-size:100% 100svh;background-color:var(--paper);min-height:100%;color:var(--ink);font-family:var(--font);-webkit-text-size-adjust:100%;margin:0}#app{min-height:100svh;padding:calc(env(safe-area-inset-top,0px) + 16px) calc(env(safe-area-inset-right,0px) + 16px) calc(env(safe-area-inset-bottom,0px) + 24px) calc(env(safe-area-inset-left,0px) + 16px);max-width:1100px;margin:0 auto}.btn{background:var(--card);min-height:44px;color:var(--ink);font:inherit;cursor:pointer;border:0;border-radius:14px;justify-content:center;align-items:center;gap:6px;padding:0 18px;font-weight:700;text-decoration:none;display:inline-flex;box-shadow:0 3px #3b2a2a2e}.btn:active{transform:translateY(2px);box-shadow:0 1px #3b2a2a2e}.btn-primary{background:var(--accent);color:var(--accent-ink)}.view{transition:opacity .2s}.view[hidden]{display:none}.view.is-leaving{opacity:0}.hero{background:var(--card);border-radius:var(--radius);align-items:center;gap:18px;padding:14px;display:flex;box-shadow:0 10px 30px #3b2a2a1f}.hero-preview{touch-action:manipulation;cursor:pointer;background:radial-gradient(circle at 50% 40%,#fff 0%,#eaf6fb 70%);border-radius:50%;flex:none;width:150px;height:150px;overflow:hidden}.hero-preview.is-flat{border:4px solid var(--ink)}.hero-preview canvas{display:block;width:100%!important;height:100%!important}.hero-meta{flex-direction:column;gap:6px;min-width:0;display:flex}.hero-kicker{color:var(--muted);margin:0;font-size:13px;font-weight:600}.hero-name{word-break:keep-all;overflow-wrap:anywhere;margin:0;font-size:28px;line-height:1.1}.section-title{margin:28px 4px 12px;font-size:18px}.game-grid{grid-template-columns:1fr;gap:14px;display:grid}@media (min-width:600px){.game-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width:900px){.game-grid{grid-template-columns:repeat(3,1fr)}}@media (min-width:1200px){.game-grid{grid-template-columns:repeat(4,1fr)}}.game-card{background:var(--card);border-radius:var(--radius);color:inherit;gap:14px;min-height:120px;padding:12px;text-decoration:none;transition:transform .12s;display:flex;box-shadow:0 6px 18px #3b2a2a1a}.game-card:hover,.game-card:focus-visible{transform:translateY(-2px)}.game-thumb{border-radius:14px;flex:none;width:96px;height:96px;overflow:hidden}.game-thumb svg{width:100%;height:100%;display:block}.game-body{flex-direction:column;gap:4px;min-width:0;display:flex}.game-title{margin:0;font-size:18px}.game-tagline{margin:0;font-weight:600}.game-facts{color:var(--muted);margin:0;font-size:13px}.game-tags{flex-wrap:wrap;gap:6px;margin-top:4px;display:flex}.tag{color:#2a6f97;background:#eaf6fb;border-radius:999px;padding:3px 8px;font-size:12px;font-weight:700}.foot{text-align:center;color:var(--muted);margin:36px 0 0;font-size:13px}.customize{flex-direction:column;gap:14px;display:flex}@media (min-width:760px){.customize{flex-direction:row;align-items:flex-start}.customize-preview{flex:1;position:sticky;top:16px}.panel{flex:1}}.customize-preview{aspect-ratio:1;border-radius:var(--radius);background:radial-gradient(circle at 50% 35%,#fff 0%,#eef7fb 60%,#dcedf6 100%);width:100%;max-height:46svh;overflow:hidden;box-shadow:0 10px 30px #3b2a2a1f}.customize-preview canvas{display:block;width:100%!important;height:100%!important}.panel{background:var(--card);border-radius:var(--radius);flex-direction:column;gap:18px;padding:16px;display:flex;box-shadow:0 10px 30px #3b2a2a1f}.field{flex-direction:column;gap:8px;display:flex}.field-label{color:var(--muted);font-size:13px;font-weight:700}.name-input{min-height:48px;font:inherit;color:var(--ink);background:var(--paper);border:2px solid #3b2a2a26;border-radius:14px;padding:0 14px;font-size:18px;font-weight:700}.name-input:focus{border-color:var(--accent);outline:none}.chips{flex-wrap:wrap;gap:10px;display:flex}.chip{min-width:44px;min-height:44px;font:inherit;cursor:pointer;background:var(--paper);color:var(--ink);border:3px solid #0000;border-radius:14px;padding:0 12px;font-weight:700}.chip-color{width:44px;padding:0;box-shadow:inset 0 0 0 2px #3b2a2a14}.chip.is-on{border-color:var(--ink)}.actions{justify-content:flex-end;gap:10px;display:flex}.lab-head{align-items:center;gap:10px;display:flex}.lab-title{flex:1;margin:0;font-size:20px}.lab-hint{color:var(--muted);font-size:14px}.lab-slider{align-items:center;gap:10px;margin:8px 0;font-weight:700;display:flex}.lab-slider input{flex:1}.lab-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:16px;display:grid}.lab-btn{min-height:56px}.foot a{color:inherit}.update-banner{left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);background:var(--ink);color:#fff;z-index:100;border-radius:14px;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;display:flex;position:fixed;box-shadow:0 10px 30px #0000004d}