:root{--color-ground:#bfd6f2;--color-window:#f1efe6;--color-card:#fff;--color-card-border:#9fb6d6;--color-text:#1b1b1b;--color-subtext:#6b7280;--color-accent:#e2557f;--color-title-from:#3d8bff;--color-title-mid:#1f66e6;--color-title-to:#0f52d4;--color-window-border:#0a3fae;--color-button-border:#2b5a9a;--color-notice-bg:#fff8d8;--color-notice-border:#e3c96a;--color-progress-from:#acedad;--color-progress-mid:#37b33b;--color-progress-to:#2c9a30;--font-body:"Nanum Gothic", system-ui, sans-serif;--font-hand:"Gaegu", cursive;--radius-window:12px;--radius-card:10px;--radius-button:6px;--tap-min:44px}*,:before,:after{box-sizing:border-box}html,body{background:var(--color-ground);color:var(--color-text);font-family:var(--font-body);-webkit-text-size-adjust:100%;margin:0}.xp-window{border:1px solid var(--color-window-border);border-radius:var(--radius-window) var(--radius-window) var(--radius-card) var(--radius-card);background:var(--color-window);overflow:hidden;box-shadow:0 10px 30px #0a286e40}.xp-titlebar{color:#fff;text-shadow:0 1px #00000059;background:linear-gradient(var(--color-title-from), var(--color-title-mid) 45%, var(--color-title-to));align-items:center;gap:7px;height:36px;padding:0 12px;font-size:14px;font-weight:700;display:flex}.xp-body{flex-direction:column;gap:10px;padding:12px;display:flex}.xp-card{background:var(--color-card);border:1px solid var(--color-card-border);border-radius:var(--radius-card);padding:14px}.xp-button{min-height:var(--tap-min);font:inherit;color:var(--color-text);border:1px solid var(--color-button-border);border-radius:var(--radius-button);cursor:pointer;background:linear-gradient(#fff,#e9eef6 60%,#d7e0ee);padding:0 14px;font-size:14px}