@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;500;600&display=swap');
:root{font-family:Arial,'Noto Sans KR',sans-serif;color:#34372f;background:#eeeae1;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a,input{touch-action:manipulation}button{font:inherit;color:inherit;border:0;background:transparent;cursor:pointer}button:hover{color:#a35438}button:focus-visible,a:focus-visible{outline:2px solid #a35438;outline-offset:4px}header{height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 42px;border-bottom:1px solid #cfcbbf;position:relative;z-index:2}.brand{text-decoration:none;color:inherit;letter-spacing:4px;font-size:20px;font-weight:700}.brand span{font-size:9px;letter-spacing:2px;margin-left:20px;font-weight:400}.edition{font-size:11px;letter-spacing:2px;color:#74776c}header button{font-size:12px}main{position:relative;height:calc(100dvh - 126px);min-height:640px;overflow:hidden}.intro{position:absolute;left:44px;top:40px;z-index:1;pointer-events:none}.eyebrow{font-size:10px;letter-spacing:2px;color:#868a7a}h1{font-family:'Noto Serif KR',serif;font-weight:400;font-size:55px;letter-spacing:-3px;margin:17px 0 15px}h1 em{font-style:normal;color:#965e40}.intro p{font-size:14px;letter-spacing:1px}.note{font-size:11px;color:#85877b;margin-top:22px}#stage{position:absolute;inset:0;touch-action:none;cursor:ew-resize}canvas{display:block;width:100%;height:100%}#loading{position:absolute;top:50%;width:100%;text-align:center;font-size:13px}#labels{position:absolute;inset:0;pointer-events:none}.part{position:absolute;left:0;top:0;font-size:10px;letter-spacing:1px;padding:6px 9px;background:#f8f5edcf;border:1px solid #c7c7b8;border-radius:2px;white-space:nowrap}.part:before{content:'';position:absolute;width:1px;height:16px;background:#9d9c8b;bottom:-16px;left:50%}.readout{position:absolute;right:42px;top:46px;width:190px;pointer-events:none}.readout strong{display:block;font-family:Georgia,serif;font-size:60px;font-weight:400;margin:10px 0 0}.readout>span{font-size:11px;color:#7a7c6e}.rule{height:1px;background:#cecec0;margin:22px 0}#phaseName{font-size:13px}#phaseDesc{font-size:11px;line-height:1.8;color:#7c8072}.viewbar{position:absolute;bottom:150px;left:42px;display:flex;gap:8px;align-items:center}.viewbar button{font-size:11px;border:1px solid #c5c5b6;background:#f4f1e8bb;border-radius:20px;padding:8px 12px}.viewbar label{font-size:10px;color:#777b6c;margin-left:8px;display:flex;gap:4px;align-items:center}.dock{position:absolute;bottom:49px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:18px;padding:12px 16px;background:#f8f5edee;border:1px solid #fff;box-shadow:0 8px 32px #484b3610;border-radius:9px;white-space:nowrap;font-size:12px}.modes{display:flex;gap:3px}.modes button{padding:12px;border-radius:5px}.modes .active{background:#4c5948;color:white}.divider{height:27px;width:1px;background:#d6d5c8}.swatches{display:flex;gap:8px;align-items:center}.swatches span{font-size:10px;color:#878c7b;margin-right:5px}.swatch{background:var(--c);width:21px;height:21px;border-radius:50%;border:3px solid #f8f5ed;outline:1px solid transparent}.swatch.active{outline-color:#69715e}#auto.active{color:#9e493b}.hint{position:absolute;bottom:19px;width:100%;text-align:center;font-size:10px;letter-spacing:.5px;color:#7d8273;pointer-events:none}.hint span{color:#a1a493}footer{height:46px;padding:0 42px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #cecec1;font-size:10px;color:#7c8172}dialog{border:1px solid #dad7cb;border-radius:8px;max-width:580px;width:90%;max-height:85dvh;overflow:auto;background:#f7f3e9;padding:40px;color:#42483b;box-shadow:0 20px 100px #202a2840}dialog::backdrop{background:#343e3555;backdrop-filter:blur(4px)}.close{position:absolute;right:15px;top:10px;font-size:28px}h2{font-family:'Noto Serif KR',serif;font-size:25px;font-weight:500}dialog p{font-size:12px;line-height:1.9;color:#777d6d}dialog ol{padding-left:20px}dialog li{padding-left:6px;margin:18px 0;font-size:13px}dialog li p{margin:5px 0}dialog .fine{border-top:1px solid #ddd9cc;padding-top:16px;font-size:10px}dialog a{color:#8e573a;font-size:11px}@media(max-width:760px){header{height:60px;padding:0 18px}.brand span,.edition{display:none}main{height:calc(100dvh - 110px);min-height:650px}.intro{left:20px;top:24px}h1{font-size:37px;margin:12px 0}.intro p{font-size:12px}.note{display:none}.readout{right:18px;top:30px;width:90px}.readout .eyebrow{font-size:8px}.readout strong{font-size:39px}.readout>span{font-size:9px}.rule{margin:12px 0}#phaseName{font-size:11px}#phaseDesc{font-size:10px}.dock{gap:10px;padding:9px;bottom:58px;max-width:96%;flex-wrap:wrap;justify-content:center;width:440px}.dock .divider{display:none}.modes button{padding:9px}.viewbar{left:18px;bottom:172px;gap:4px}.viewbar button{padding:7px 9px}.viewbar label{margin-left:3px}.hint{bottom:22px;font-size:9px}.hint span{display:none}footer{height:50px;padding:9px 18px;display:block;font-size:8px;line-height:1.8}footer span{display:block}.part{font-size:8px;padding:4px 6px}}

.part[data-part]{pointer-events:auto;cursor:grab;transition:background .15s,border-color .15s}.part.hot,.part[data-part]:hover,.part[data-part]:focus-visible{background:#f5ddbd;border-color:#bd794e;color:#7b4328}.part[data-part]:active{cursor:grabbing}