* { box-sizing: border-box; }
body { margin: 0; color: #202124; background: #fff; font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif; }
main, footer { width: min(760px, calc(100% - 24px)); margin-inline: auto; }
main { padding: 22px 0 18px; }
h1 { margin: 0 0 18px; font-size: 25px; }
fieldset { display: flex; gap: 14px; margin: 0 0 12px; padding: 9px 10px 11px; border: 1px solid #bbb; }
legend { padding: 0 4px; font-weight: 650; }
label { white-space: nowrap; }
button { padding: 5px 12px; border: 1px solid #777; border-radius: 0; background: #f3f3f3; color: #202124; font: inherit; cursor: pointer; }
a { color: #075fa8; }
table, td { margin: 0; padding: 0; border: 0; }
.puzzle-page { width: min(980px, calc(100% - 24px)); overflow-x: auto; }
.answer, .answer td { font-size: 20%; }
.separator { height: 5em; }
.num { width: 5em; height: 5em; border: 1px solid #aaa; vertical-align: top; }
.ver, .hor { position: relative; text-align: center; }
.ver span, .hor span { position: relative; z-index: 2; }
.ver::after { content: ""; position: absolute; left: 50%; top: 50%; border-top: 2em solid transparent; border-bottom: 2em solid transparent; border-left: 2em solid #ddd; transform: translate(-50%, -50%); }
.hor::after { content: ""; position: absolute; left: 50%; top: 50%; border-left: 2em solid transparent; border-right: 2em solid transparent; border-top: 2em solid #ddd; transform: translate(-50%, -50%); }
.nil { width: 2em; height: 2em; }
footer { padding: 8px 0 14px; border-top: 1px solid #ccc; color: #666; font-size: 13px; }
footer button { padding: 0; border: 0; background: transparent; color: inherit; text-decoration: underline; }
@media (max-width: 520px) { fieldset { flex-wrap: wrap; gap: 8px 12px; } }