*{box-sizing:border-box}body{font:14px/1.5 'Noto Sans KR',system-ui,sans-serif;margin:0 auto;max-width:1220px;color:#172033;background:#f5f6f8;display:flex;flex-direction:column;min-height:100vh}
header{height:64px;display:flex;align-items:center;gap:24px;padding:0 24px;background:white}
main{padding:32px;order:2}h2{font-size:24px;font-weight:500;margin:0}p{margin:8px 0;color:#687386}
button,input,select{font:inherit;border:1px solid #dfe3ea;border-radius:8px;background:white;color:#172033;padding:8px 16px}
button{min-height:48px;cursor:pointer}button:disabled{opacity:.5;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #1769e0;outline-offset:2px}
.primary{background:#1769e0;color:white;border-color:#1769e0}.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.navigation{display:flex;gap:16px;align-items:center;justify-content:space-between}.navigation .row{flex-shrink:0}.navigation p{margin:0}
.strip{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:16px;margin:16px 0}
.glyph{min-height:76px;padding:8px}.glyph span{display:block;font-size:22px}.glyph small{display:inline-block;font-size:12px;margin-top:4px}.glyph.state-unwritten{background:#f5f6f8;border-color:#dfe3ea;color:#687386}.glyph.state-writing,.glyph.state-candidate{background:#fff8ec;border-color:#df9a2d}.glyph.state-writing small,.glyph.state-candidate small{color:#86560c}.glyph.state-selected{background:#edf5ff;border-color:#1769e0}.glyph.state-selected small{color:#1769e0}.glyph.current{box-shadow:inset 0 -3px #172033}.glyph-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px}.glyph-legend .unwritten{color:#687386}.glyph-legend .writing{color:#86560c}.glyph-legend .selected{color:#1769e0}
.work{display:grid;grid-template-columns:minmax(0,616fr) minmax(280px,516fr);gap:24px;margin:16px 0}
.paper,.settings{background:white;border-radius:14px;padding:24px}.paper{min-width:0;padding-left:56px;padding-right:56px;position:relative;align-self:start}
#pad{display:block;margin:0 auto;width:384px;max-width:100%;height:auto;aspect-ratio:1;background:white;touch-action:none;user-select:none}
#x-axis{position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(384px,calc(100% - 112px));display:flex;justify-content:space-between;font-size:12px;color:#687386}#y-axis{position:absolute;top:24px;bottom:24px;left:max(8px,calc((100% - 384px)/2 - 57px));display:flex;flex-direction:column;justify-content:space-between;font-size:12px;color:#687386}.paper>p{position:absolute;left:50%;transform:translateX(-50%);width:min(384px,calc(100% - 112px));bottom:0;margin:0;font-size:12px}
.settings label{display:block;margin-bottom:16px}.settings input,.settings select{display:block;width:100%;margin-top:8px}.settings .row label{flex:1}.settings button{width:100%}
.actions{display:flex;gap:8px;flex-wrap:wrap}.actions .primary{flex:1;min-width:220px}
#ink-status{min-height:42px}#ink-target{font-weight:500}.notice{font-size:12px}#retry-panel{margin:16px 0}#retry-panel button[hidden]{display:none}
details#pairing{order:1;margin:16px 32px;padding:16px;border:1px solid #dfe3ea;border-radius:14px;background:white}body[data-connected=true] #pairing{order:3}summary{cursor:pointer}
footer{order:4;text-align:center;min-height:56px;padding:8px;color:#687386;font-size:12px;margin-top:auto}
dialog{width:min(1120px,95vw);max-height:90vh;border:1px solid #dfe3ea;border-radius:14px;padding:24px;background:white;color:#172033}dialog::backdrop{background:#17203355}dialog[hidden]{display:none}dialog[open]{overflow:auto}dialog:not(:defined)[open]{display:block;position:fixed;inset:5vh 2.5vw;margin:auto;z-index:10}
#glyph-results{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;margin:16px 0}#glyph-query{width:100%;margin:8px 0 0}.filter-row{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}.filter-row button{min-width:136px}.active-filter{border-color:#1769e0;color:#1769e0;background:#edf4ff}#list-close{flex:1}
@media(max-width:900px){main{padding:16px}.navigation{align-items:flex-start;flex-direction:column}.strip{gap:8px}.work{grid-template-columns:1fr;gap:16px}.paper{padding:24px 42px}#x-axis{width:min(384px,calc(100% - 84px))}#y-axis{left:max(8px,calc((100% - 384px)/2 - 57px))}.paper>p{width:min(384px,calc(100% - 84px));font-size:10px}details#pairing{margin:16px}}
@media(max-width:640px){.work{grid-template-columns:1fr}.strip,#glyph-results{grid-template-columns:repeat(4,minmax(0,1fr))}.settings{padding:16px}.navigation .row{flex-wrap:wrap}.actions button{flex:1}main{padding:12px}header{padding:0 16px;gap:16px}}
.candidate-panel{background:white;border-radius:14px;padding:16px;margin-top:24px;display:grid;grid-template-columns:170px minmax(0,1fr) 270px;gap:16px;align-items:start}.candidate-panel h3{font-size:18px;font-weight:500;margin:0}.candidate-panel p{font-size:12px}.candidate-cards{display:flex;gap:16px;min-width:0}.candidate-card{height:160px;min-width:0;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px;border:1px solid #dfe3ea;border-radius:8px;background:white}.candidate-card canvas{width:96px;height:96px;max-width:100%;display:block}.candidate-card small{font-size:12px;color:#687386}.candidate-card.used{border:2px solid #1769e0}.candidate-card.picked{outline:2px dashed #172033;outline-offset:2px}.candidate-actions{display:flex;flex-direction:column;gap:8px}.candidate-actions button{width:100%}#candidate-dialog{width:min(760px,95vw);padding:32px}#candidate-dialog h2{margin-bottom:16px}#candidate-dialog .candidate-cards{margin:16px 0}#candidate-dialog .row{margin-top:16px}#candidate-notice{font-size:12px;min-height:36px}.candidate-pages{margin-top:16px}.candidate-pages button{padding:8px;min-height:40px}.candidate-panel button[hidden]{display:none}
@media(max-width:1000px){.candidate-panel{grid-template-columns:1fr}.candidate-panel .candidate-cards{justify-content:flex-start}.candidate-card{max-width:220px}.candidate-actions{flex-direction:row;flex-wrap:wrap}.candidate-actions button{width:auto;flex:1;min-width:136px}}@media(max-width:640px){#candidate-dialog{padding:16px}.candidate-cards{gap:8px}.candidate-card{padding:4px;font-size:12px}.candidate-card small{font-size:10px}.candidate-card canvas{width:80px;height:80px}}