:root { --blue: #2673f0; --yellow: #ffd43b; --yellow-active: #f5c400; --line: #aeb6c2; }
* { box-sizing: border-box; box-shadow: none !important; text-shadow: none !important; }
html, body { min-height: 100%; margin: 0; }
body { background: #fff; color: #20242a; font-family: Pretendard, "Noto Sans KR", system-ui, sans-serif; }
.grid-maker-page { display: grid; min-height: calc(100dvh - 56px); place-items: center; padding: 28px 20px; }
.grid-maker { width: min(100%, 330px); }
.grid-maker-board { display: grid; width: 100%; aspect-ratio: 3 / 2; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.grid-maker-cell { min-width: 0; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; background: #fff; cursor: pointer; }
.grid-maker-cell.is-filled { background: var(--yellow); }
.grid-maker-cell:not(:disabled):active { background: #dbe8ff; }
.grid-maker-cell.is-filled:not(:disabled):active { background: var(--yellow-active); }
.grid-maker-cell:focus-visible { position: relative; outline: 3px solid #174ea6; outline-offset: -4px; }
.grid-maker-cell:disabled { cursor: default; opacity: 1; }
.grid-maker-data { display: block; overflow-wrap: anywhere; margin-top: 20px; color: #5f6875; font-size: 16px; font-weight: 700; text-align: center; }
.grid-maker-actions { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.grid-maker-copy,
.grid-maker-list-copy { min-height: 48px; border: 0; border-radius: 999px; background: var(--blue); color: #fff; padding: 0 20px; font: inherit; font-weight: 800; cursor: pointer; }
.grid-maker-copy:active,
.grid-maker-list-copy:active { background: #155fd1; }
.grid-maker-list { margin: 20px 0 0; padding-left: 36px; color: #5f6875; font-size: 14px; font-weight: 700; line-height: 1.8; }
.grid-maker-list:empty { display: none; }