@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');
:root{--bg:#f5f6f8;--ink:#182b36;--muted:#849097;--green:#16816b;--line:#e5eaec}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px 'DM Sans','Noto Sans KR',sans-serif}header{height:78px;background:white;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 5%}.brand{display:flex;gap:12px;align-items:center;font-size:23px;font-weight:700;color:var(--green);text-decoration:none;letter-spacing:2px}.brand span{font-size:17px;color:var(--ink)}.brand .light{color:#9aa5ab;font-weight:400}.connection{font-size:12px;color:var(--green)}.connection:before{content:'●';margin-right:8px}main{max-width:1480px;margin:auto;padding:42px 4% 20px}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:34px}.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:700;color:#8b969e;margin:0 0 12px}h1{font-size:32px;letter-spacing:-1.5px;margin:0 0 12px;font-weight:700}h1 span{color:var(--green)}.subtitle{color:#7b8790;font-size:13px;margin:0}.version{font-size:10px;letter-spacing:1px;color:#8e989e}.version b{padding:6px;background:#e8ecee;border-radius:4px;margin-left:8px}.workspace{display:grid;grid-template-columns:245px minmax(330px,1fr) 260px;gap:20px;align-items:start}.panel{background:white;border:1px solid var(--line);border-radius:12px;padding:24px;box-shadow:0 4px 20px #25373c03}.section-title{display:flex;align-items:center;gap:10px;margin-bottom:25px}.section-title>span{font-size:11px;color:var(--green);background:#e9f5f0;padding:5px 7px;border-radius:4px}h2{font-size:15px;margin:0;font-weight:600}label{display:block;font-size:11px;font-weight:500;margin:18px 0 9px;color:#64717a}input,select,button{font:inherit}input[type=number],select{width:100%;border:1px solid #dde3e6;border-radius:6px;padding:10px;background:#fcfdfd;color:var(--ink);font-size:12px}button{border:1px solid #dfe5e7;border-radius:6px;background:white;color:#51636b;cursor:pointer;padding:11px 6px;font-size:12px;transition:background .15s}button:hover{background:#edf5f2}button:disabled{opacity:.4;cursor:not-allowed}.controls button{width:100%;margin-top:10px}.primary{background:var(--green);border-color:var(--green);color:white}.primary:hover{background:#106e5a}.dark{background:#203e42;border-color:#203e42}.ghost{border:0;color:#7f8d94}.row{display:flex;gap:9px}.row>*{flex:1;min-width:0}.hint{font-size:10px;color:#95a0a5;line-height:1.9;margin:10px 0}hr{border:0;border-top:1px solid var(--line);margin:25px 0}.speed-label{display:flex;justify-content:space-between}output{color:var(--green)}input[type=range]{width:100%;accent-color:var(--green)}.engine{display:flex;gap:9px;background:#f4f8f7;padding:12px;border-radius:6px;margin-top:22px;font-size:10px}.dot{width:6px;height:6px;border-radius:50%;background:var(--green);margin-top:5px;flex-shrink:0}.engine strong{font-weight:500}.engine p{color:#8b989c;line-height:1.8;margin:7px 0 0}.board-panel{padding:26px 30px}.board-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.board-heading h2{font-size:20px}.badge{font-size:11px;background:#edf6f1;color:var(--green);padding:7px 12px;border-radius:20px}#board{display:grid;grid-template-columns:repeat(var(--n,9),1fr);border:2px solid #50676f;border-radius:4px;overflow:hidden;aspect-ratio:1;width:100%}.cell{border:0;border-radius:0;padding:0;border-right:1px solid #dce4e5;border-bottom:1px solid #dce4e5;font-size:clamp(16px,2vw,26px);font-weight:500;color:#198570;position:relative;background:#fff}.cell.clue{color:#293d48;background:#f6f8f9;font-weight:700}.cell.peer{background:#eef6f3}.cell.selected{background:#d3ece2;box-shadow:inset 0 0 0 2px var(--green)}.cell.current{background:#e5f1ce}.cell.conflict{background:#ffe5e2;color:#bf5046}.cell.box-right{border-right:2px solid #75898e}.cell.box-bottom{border-bottom:2px solid #75898e}#board.large .cell{font-size:16px}.board-footer{display:flex;justify-content:center;gap:18px;font-size:10px;color:#87949a;margin:19px 0 26px}.legend{display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:5px}.given{background:#516773}.filled{background:var(--green)}.active{background:#bad08e}.keypad{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}.keypad button{width:34px;height:37px;padding:0;font-size:14px}.keyboard-hint{font-size:10px;text-align:center;color:#9aa4a9;margin-top:15px}#notice{background:#f5f8f7;border-radius:6px;padding:13px;font-size:11px;line-height:1.7;color:#6f8385;margin-top:22px;min-height:43px}.completion>span{display:flex;justify-content:space-between;font-size:11px;color:#869399}.completion b{color:var(--green);font-weight:500}.track{height:5px;background:#edf1f1;margin:12px 0 26px;border-radius:4px;overflow:hidden}#progress-bar{height:100%;background:var(--green);transition:width .2s}.stats{display:grid;grid-template-columns:1fr 1fr;gap:25px 10px}.stats span{display:block;font-size:10px;color:#87959b;margin-bottom:8px}.stats strong{font-size:26px;font-weight:500}.stats small{font-size:12px;color:#94a0a7;margin-left:3px}.activity{height:238px;overflow:auto}.activity p{font-size:10px;line-height:1.8;border-left:2px solid #d9eae2;padding:4px 0 4px 10px;margin:0 0 10px;color:#788c92}.activity .empty{border:0;text-align:center;margin-top:70px;color:#a0a9ae}.activity b{color:var(--green);font-weight:500}.note{background:#f7f9fa;padding:14px;border-radius:7px;font-size:10px;margin-top:22px}.note strong{font-weight:600}.note p{line-height:1.9;color:#8b989d;margin-bottom:0}footer{display:flex;justify-content:space-between;margin-top:34px;font-size:10px;color:#a0aaaf}footer span:first-child{letter-spacing:2px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #36a48c;outline-offset:2px}@media(min-width:1400px){.workspace{grid-template-columns:260px minmax(330px,1fr) 280px}}@media(max-width:1050px){.workspace{grid-template-columns:220px 1fr}.insights{grid-column:1/-1}.insights .stats{grid-template-columns:repeat(4,1fr)}.activity{height:130px}.version{display:none}}@media(max-width:650px){header{height:60px}main{padding:25px 16px}h1{font-size:25px}.workspace{display:flex;flex-direction:column}.panel{width:100%}.board-panel{order:-1;padding:20px}.intro{margin-bottom:25px}.controls{padding:20px}.cell{font-size:22px}footer span:nth-child(2){display:none}.subtitle{font-size:11px}.board-footer{gap:12px}}
.quantum-lab{margin-bottom:22px;border-top:3px solid #16816b;padding:25px 30px}.quantum-heading{display:flex;justify-content:space-between;align-items:center;gap:15px}.quantum-heading h2{font-size:21px}.q-flow{display:flex;gap:10px;margin:22px 0 15px}.q-flow span{flex:1;padding:12px;border:1px solid #dbeae4;background:#f1f8f5;border-radius:6px;font-size:12px;color:#29725f}.q-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px}.q-toolbar p{font-size:12px;color:#657d83}.q-toolbar>div{min-width:220px}.q-toolbar label{margin:0 0 5px}.circuit-scroll{overflow-x:auto;background:#f7fafb;border:1px solid #e3ebed;border-radius:8px;margin-top:16px;min-height:120px}.circuit-scroll svg{display:block;font-family:'DM Sans',sans-serif}.q-empty{text-align:center;color:#7e999a;padding:16px;font-family:monospace;font-size:20px}.q-empty small{font:11px 'Noto Sans KR',sans-serif}.q-results{display:grid;grid-template-columns:1fr 1fr;gap:35px;margin:22px 0}.q-results h3{font-size:12px;font-weight:600;margin:0 0 13px}.q-results h3 small{font-weight:400;color:#899b9e}.encoding-grid{display:flex;flex-wrap:wrap;gap:7px;align-content:start}.encoding-chip{font-size:11px;border:1px solid #dfe9e6;border-radius:5px;padding:9px;background:#fff}.encoding-chip small{display:block;color:#8b999c;margin-top:4px}.encoding-chip.invalid{background:#fff5f2;color:#af7969}.encoding-chip.chosen{border-color:#16816b;background:#e9f6ef}.q-placeholder{font-size:11px;color:#92a0a6}.hist-row{display:grid;grid-template-columns:105px 1fr 70px;align-items:center;gap:8px;font-size:11px;margin-bottom:7px}.hist-track{height:15px;border-radius:3px;background:#edf2f2;overflow:hidden}.hist-bar{height:100%;background:#459f89;min-width:0;transition:width .2s}.hist-row.invalid .hist-bar{background:#d49b88}.hist-row.chosen{font-weight:700;color:#147861}.q-decision{background:#e9f5ef;border-left:3px solid #16816b;padding:14px;font-size:12px;line-height:1.8}.q-caption{font-size:10px;color:#849599;line-height:1.8;margin-bottom:0}#q-phase.running{background:#e5efff;color:#4267b0}#quantum-info{overflow-wrap:anywhere}@media(max-width:650px){.quantum-lab{padding:18px}.quantum-heading h2{font-size:17px}.q-flow{flex-direction:column;gap:5px}.q-flow span{padding:8px;font-size:11px}.q-toolbar{align-items:stretch;flex-direction:column;gap:7px}.q-results{grid-template-columns:1fr;gap:20px}.quantum-heading{align-items:start}.quantum-heading .badge{flex-shrink:0}}
.q-gate-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:10px;color:#839498}.q-gate-legend b{background:#edf2f6;color:#426b80;padding:3px 6px;border-radius:3px;margin-left:8px}.q-gate-legend b:first-child{margin-left:0}
.q-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin:20px 0;padding:18px;background:#f1f7f5;border-radius:8px}.q-metrics span{display:block;font-size:11px;color:#7a9192;margin-bottom:8px}.q-metrics strong{font-size:29px;font-weight:600;color:#167862}.q-metrics small{font-size:12px;font-weight:400}.q-block-map{display:flex;flex-wrap:wrap;gap:5px;max-height:130px;overflow:auto}.q-block-map button{font-size:10px;padding:7px}.q-block-map small{color:#889c9f}.q-block-map .chosen{background:#dceddf;border-color:#6fb799}.q-detail-toolbar{display:flex;align-items:center;gap:8px;margin-top:16px}.q-detail-toolbar label{margin:0;white-space:nowrap}.q-detail-toolbar select{max-width:280px}.q-detail-toolbar button{padding:7px 12px}.q-detail-toolbar span{font-size:10px;white-space:nowrap}.q-global-title{font-size:12px}.q-global-title small{font-size:10px;color:#8b989f;font-weight:400}.global-count{display:grid;grid-template-columns:minmax(0,1fr) 70px 140px;gap:10px;font-size:11px;padding:8px 10px;background:#f6f9f9;border-bottom:1px solid #e7eeeb}.global-count code{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.global-count b{color:#568772;font-size:10px;font-weight:500}#q-global-counts{margin-bottom:18px}.q-results>div{min-width:0}#q-histogram{max-height:230px;overflow:auto}.encoding-grid{max-height:230px;overflow:auto}.board-scroll{overflow:auto;max-height:690px}.cell.quantum-block{background:#dcefe8;box-shadow:inset 0 0 0 1px #52a48b}#board.large .cell{font-size:16px}#board.xl{min-width:720px}#board.xl .cell{font-size:12px}.controls{max-height:1000px;overflow:auto}.board-panel{min-width:0}@media(max-width:650px){.q-metrics{grid-template-columns:1fr 1fr;padding:12px}.q-metrics strong{font-size:25px}.q-detail-toolbar{flex-wrap:wrap}.q-detail-toolbar label{width:100%}.q-detail-toolbar select{max-width:165px}.q-global-title small{display:block;margin-top:4px}.global-count{grid-template-columns:minmax(0,1fr) 35px}.global-count b{grid-column:1/-1}#board.large{min-width:430px}.controls{max-height:none}#board.xl{min-width:720px}.board-scroll{max-height:500px}}
.q-top-controls{display:flex;gap:7px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.q-top-controls button{font-size:11px;padding:8px 10px}@media(max-width:650px){.quantum-heading{flex-direction:column}.q-top-controls{justify-content:flex-start}}