@import"https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&family=Noto+Sans+Math&family=Noto+Serif+KR:wght@200..900&display=swap";:root{--pi-paper: #FAFBFC;--pi-paper-2: #F4F6F9;--pi-paper-3: #ECEFF3;--pi-rule: #E4E8EE;--pi-rule-2: #D4DAE3;--pi-paper-glass: rgba(250, 251, 252, .75);--pi-ink-900: #07254E;--pi-ink-700: #11468C;--pi-ink-500: #4F82C2;--pi-ink-300: #A8C2E2;--pi-ink-50: #F4F7FB;--pi-graphite-600: #1A1E26;--pi-graphite-500: #2C323C;--pi-graphite-400: #4F5663;--pi-graphite-300: #767D89;--instrument-border: var(--pi-graphite-300);--instrument-tick: var(--pi-graphite-300);--instrument-bg: var(--pi-paper-3);--instrument-grid: rgba(255, 255, 255, .24);--c-copper: #A75928;--c-copper-soft: #F2DECF;--c-moss: #506A47;--c-moss-soft: #E1E7DC;--font-sans: "Noto Sans KR", sans-serif;--font-serif: "Noto Sans KR", sans-serif;--font-math: "Noto Sans KR", sans-serif;--font-mono: "Noto Sans KR", sans-serif;--r-2: 4px;--r-3: 8px;--r-pill: 999px;--dur-base: .2s;--ease-out: cubic-bezier(.22, .61, .36, 1);--shadow-1: 0 1px 2px rgba(17, 70, 140, .06);--shadow-2: 0 4px 12px -2px rgba(17, 70, 140, .08)}html[data-theme=dark]{--pi-paper: #0E1117;--pi-paper-2: #1A1E26;--pi-paper-3: #2C323C;--pi-rule: #2C323C;--pi-rule-2: #4F5663;--pi-paper-glass: rgba(14, 17, 23, .85);--pi-ink-900: #E9EFF7;--pi-ink-700: #7AA3D5;--pi-ink-50: rgba(17, 70, 140, .15);--pi-graphite-600: #FAFBFC;--pi-graphite-500: #C8CDD5;--pi-graphite-400: #A2A8B3;--pi-graphite-300: #767D89;--instrument-border: var(--pi-graphite-400);--instrument-tick: var(--pi-graphite-400);--instrument-bg: var(--pi-paper-2);--instrument-grid: rgba(255, 255, 255, .16);--c-copper: #A75928;--c-copper-soft: #F2DECF;--c-moss: #506A47;--c-moss-soft: #E1E7DC;--shadow-1: 0 1px 2px rgba(0, 0, 0, .2);--shadow-2: 0 8px 24px -4px rgba(0, 0, 0, .3)}*{box-sizing:border-box;word-break:keep-all}body{margin:0;padding:0;background-color:var(--pi-paper);background-image:radial-gradient(circle at 50% 0%,rgba(17,70,140,.03),transparent 50%);color:var(--pi-graphite-500);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column;transition:background-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}html[data-theme=dark] body{background-image:radial-gradient(circle at 50% 0%,rgba(17,70,140,.06),transparent 60%)}header{position:sticky;top:0;z-index:100;border-bottom:1px solid var(--pi-rule);background:var(--pi-paper-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:16px 32px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 1px 10px #07254e05;transition:background-color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}header h1{margin:0;font-family:var(--font-serif);font-size:24px;font-weight:600;color:var(--pi-graphite-600);letter-spacing:-.02em}.logo-svg{transition:transform var(--dur-base) var(--ease-out)}header h1:hover .logo-svg{transform:rotate(15deg) scale(1.08)}.logo-svg .constellation-line{stroke:var(--c-copper);stroke-width:.6;stroke-linecap:round;stroke-linejoin:round;opacity:.55;transition:stroke var(--dur-base) var(--ease-out)}.logo-svg .star{fill:var(--c-copper);transition:fill var(--dur-base) var(--ease-out),filter var(--dur-base) var(--ease-out);filter:drop-shadow(0 0 2px rgba(167,89,40,.7))}html[data-theme=dark] .logo-svg .constellation-line{stroke:#ffffff73;opacity:.4}html[data-theme=dark] .logo-svg .star{fill:#fff;filter:drop-shadow(0 0 3px rgba(255,255,255,.95))}.today-date{font-family:var(--font-mono);font-size:13px;color:var(--pi-graphite-400);letter-spacing:.05em}.game-container{flex:1;max-width:1200px;width:100%;margin:0 auto;padding:32px var(--gutter, 24px);display:grid;grid-template-columns:1.2fr 1fr;grid-template-areas:"board difficulty" "board control";gap:32px 48px;align-items:start}@media (max-width: 900px){.game-container{grid-template-columns:1fr;grid-template-areas:"difficulty" "board" "control";gap:24px}}.board-section{grid-area:board;display:flex;flex-direction:column;align-items:center;gap:24px}.instrument-panel{position:relative;width:100%;max-width:480px;aspect-ratio:1 / 1;border-radius:50%;border:4px double var(--instrument-border);background:var(--instrument-bg);box-shadow:var(--shadow-2),inset 0 0 20px #11468c08;display:flex;justify-content:center;align-items:center;overflow:hidden;transition:border-color var(--dur-base) var(--ease-out),background-color var(--dur-base) var(--ease-out)}.instrument-panel:after{content:"";position:absolute;top:15px;left:15px;right:15px;bottom:15px;border-radius:50%;border:1.5px solid var(--pi-ink-700);opacity:0;pointer-events:none;transform:scale(.05);animation:radar-sweep 30s cubic-bezier(.15,.85,.35,1) infinite;z-index:5}@keyframes radar-sweep{0%{transform:scale(.05);opacity:0}1%{opacity:.85}10%{transform:scale(.98);opacity:0}to{transform:scale(.98);opacity:0}}canvas{width:100%;height:100%;display:block}.control-section{grid-area:control;display:flex;flex-direction:column;gap:24px}.difficulty-selector{grid-area:difficulty;display:flex;border:1px solid var(--pi-rule-2);border-radius:var(--r-2);overflow:hidden;background:var(--pi-paper-3);padding:3px}.diff-btn{flex:1;border:none;background:transparent;padding:8px 16px;font-family:var(--font-sans);font-size:13px;font-weight:500;color:var(--pi-graphite-400);cursor:pointer;border-radius:var(--r-2);transition:all var(--dur-base) var(--ease-out)}.diff-btn:hover{color:var(--pi-graphite-600)}.diff-btn.active{background:var(--pi-ink-700);color:var(--pi-paper)}.status-card{background:var(--pi-paper-2);border:1px solid var(--pi-rule);border-radius:var(--r-3);padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:16px;box-shadow:var(--shadow-1)}.status-item{display:flex;flex-direction:column;gap:6px}.status-label{font-size:11px;font-family:var(--font-mono);color:var(--pi-graphite-400);text-transform:uppercase;letter-spacing:.05em}.status-value{font-size:20px;font-weight:600;color:var(--pi-graphite-600);font-family:var(--font-serif)}.status-value.math{font-family:var(--font-mono)}.transformation-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.op-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px 8px;background:var(--pi-paper);border:1px solid var(--pi-rule-2);border-radius:var(--r-2);cursor:pointer;transition:all var(--dur-base) var(--ease-out)}.op-btn:hover:not(:disabled){border-color:var(--pi-ink-700);background:var(--pi-ink-50);box-shadow:var(--shadow-1)}.op-btn:disabled{opacity:.3;cursor:not-allowed}.op-btn svg{width:24px;height:24px;fill:none;stroke:var(--pi-ink-700);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}.op-btn span{font-size:11px;font-weight:500;color:var(--pi-graphite-500)}.action-buttons{display:flex;gap:12px}.ds-btn{flex:1;padding:14px 20px;font-family:var(--font-sans);font-size:14px;font-weight:500;border-radius:var(--r-2);border:1px solid var(--pi-rule-2);cursor:pointer;transition:all var(--dur-base) var(--ease-out)}.ds-btn.primary{background:var(--pi-ink-700);color:var(--pi-paper);border-color:var(--pi-ink-700)}.ds-btn.primary:hover:not(:disabled){background:var(--pi-ink-900);border-color:var(--pi-ink-900)}.ds-btn.secondary{background:var(--pi-paper);color:var(--pi-graphite-600)}.ds-btn.secondary:hover{background:var(--pi-paper-2)}.ds-btn:disabled{opacity:.5;cursor:not-allowed}.sequence-log{background:var(--pi-paper-3);border-radius:var(--r-2);padding:12px 16px;font-family:var(--font-mono);font-size:12px;color:var(--pi-graphite-400);white-space:nowrap;overflow-x:auto;min-height:42px;display:flex;align-items:center;gap:6px}.seq-item{background:var(--pi-paper);padding:4px 8px;border-radius:var(--r-2);border:1px solid var(--pi-rule);color:var(--pi-ink-700)}.ranking-section{background:var(--pi-paper);border:1px solid var(--pi-rule);border-radius:var(--r-3);padding:24px}.ranking-title{margin:0 0 16px;font-family:var(--font-serif);font-size:16px;font-weight:600;color:var(--pi-graphite-600);border-bottom:1px solid var(--pi-rule);padding-bottom:12px}.ranking-list{display:flex;flex-direction:column;gap:8px;max-height:200px;overflow-y:auto}.ranking-item{display:grid;grid-template-columns:40px 1fr auto;gap:8px;align-items:center;font-size:13px;padding:6px 12px;border-radius:var(--r-2);background:var(--pi-paper-2)}.rank-num{font-weight:700;color:var(--c-copper);font-family:var(--font-serif)}.rank-name{font-weight:500;color:var(--pi-graphite-600)}.rank-steps{text-align:right;font-family:var(--font-mono);color:var(--pi-ink-700);font-weight:600}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#07254e66;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:center;z-index:1000;opacity:0;pointer-events:none;transition:opacity var(--dur-base) var(--ease-out)}.modal-overlay.active{opacity:1;pointer-events:auto}.modal-content{background:var(--pi-paper);border:1px solid var(--pi-rule-2);border-radius:var(--r-3);padding:32px;width:90%;max-width:400px;box-shadow:var(--shadow-2);text-align:center;transform:translateY(20px);transition:transform var(--dur-base) var(--ease-out)}.modal-overlay.active .modal-content{transform:translateY(0)}.modal-content h2{font-family:var(--font-serif);font-size:22px;margin:0 0 12px;color:var(--pi-ink-700)}.modal-content p{font-size:14px;color:var(--pi-graphite-500);margin:0 0 24px;line-height:1.5}.modal-input{width:100%;padding:12px;border:1px solid var(--pi-rule-2);border-radius:var(--r-2);font-family:var(--font-sans);font-size:14px;margin-bottom:20px;text-align:center;outline:none}.modal-input:focus{border-color:var(--pi-ink-700);box-shadow:0 0 0 3px #11468c1a}.ranking-toggle-tabs{display:flex;border:1px solid var(--pi-rule-2);border-radius:var(--r-2);overflow:hidden;background:var(--pi-paper-3);padding:2px;margin-bottom:12px}.rank-tab-btn{flex:1;border:none;background:transparent;padding:6px 12px;font-family:var(--font-sans);font-size:12px;font-weight:500;color:var(--pi-graphite-400);cursor:pointer;border-radius:var(--r-2);transition:all var(--dur-base) var(--ease-out);text-align:center}.rank-tab-btn:hover{color:var(--pi-graphite-600)}.rank-tab-btn.active{background:var(--pi-paper);color:var(--pi-ink-700);box-shadow:var(--shadow-1);font-weight:600}.theme-toggle-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--pi-rule-2);background:var(--pi-paper-2);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:all var(--dur-base) var(--ease-out)}.theme-toggle-btn:hover{background:var(--pi-paper-3);border-color:var(--pi-ink-700);transform:scale(1.05)}.theme-toggle-btn svg{width:18px;height:18px;fill:none;stroke:var(--pi-ink-700);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--dur-base) var(--ease-out)}html[data-theme=dark] .status-card,html[data-theme=dark] .ranking-section,html[data-theme=dark] .op-btn{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 8px 32px #0000004d,inset 0 1px #ffffff08;border-color:#6366f140}html[data-theme=dark] .op-btn:hover:not(:disabled){box-shadow:0 0 15px #60a5fa33,inset 0 1px #ffffff14;border-color:var(--pi-ink-700)}.ds-card{background:var(--pi-paper-2);border-radius:var(--r-3);padding:24px;display:flex;flex-direction:column;gap:12px;box-sizing:border-box;transition:background-color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}.ds-card.bordered{border:1px solid var(--pi-rule-2)}.ds-card.shadowed{box-shadow:var(--shadow-2)}.ds-card .eb{font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--pi-ink-700)}.ds-card .h{font-family:var(--font-serif);font-weight:600;font-size:20px;color:var(--pi-graphite-600);letter-spacing:-.01em;line-height:1.3}.ds-card .b{font-family:var(--font-sans);font-size:13.5px;color:var(--pi-graphite-500);line-height:1.6}.ds-card .meta{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:16px;border-top:1px solid var(--pi-rule)}.ds-card .meta .when{font-family:var(--font-sans);font-size:11px;color:var(--pi-graphite-400)}.guide-modal-content{width:90%;max-width:520px;padding:28px!important;text-align:left;transform:translateY(20px);transition:transform var(--dur-base) var(--ease-out)}.modal-overlay.active .guide-modal-content{transform:translateY(0)}.guide-story-title{margin-top:4px;margin-bottom:16px}.guide-story-quote{font-family:var(--font-serif);font-size:14px;line-height:1.6;color:var(--pi-graphite-600);margin:0 0 16px;border-left:2px solid var(--pi-ink-700);padding-left:14px}.guide-rule-text{font-size:13.5px;line-height:1.6;color:var(--pi-graphite-500);margin-bottom:20px}.guide-rule-text strong{color:var(--pi-ink-700)}.guide-visual-container{display:flex;align-items:center;justify-content:center;gap:16px;margin:20px 0;background:var(--pi-paper-3);padding:16px;border-radius:var(--r-3, 8px);border:1px solid var(--pi-rule-2)}.guide-panel-box{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1}.panel-label{font-size:10.5px;font-weight:600;font-family:var(--font-sans);color:var(--pi-graphite-400)}.guide-svg{width:100%;max-width:110px;aspect-ratio:1 / 1;display:block;overflow:visible}.guide-arrow{font-size:24px;color:var(--pi-ink-700);font-weight:700}