:root{--ink:#17253f;--sub:#8190ab;--line:#e6eaf1;--blue:#3165e9;--rail:#122036;--rail-accent:#1a304f;--green:#24d4a7}
*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:system-ui,-apple-system,"Noto Sans KR","Malgun Gothic",Arial,sans-serif;color:var(--ink)}body{background:#eff2f7}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid #75a3ff;outline-offset:2px}
.app{height:100dvh;min-height:560px;display:flex;flex-direction:column}
.app-header{height:70px;min-height:70px;background:#fff;border-bottom:1px solid #e0e5ed;display:flex;align-items:center;justify-content:space-between;padding:0 25px;gap:16px;position:relative;z-index:2}
.brand-lockup{display:flex;align-items:center;gap:12px;min-width:0}.brand-k{background:#214bc6;color:#fff;font-weight:950;border-radius:11px;display:grid;place-items:center;width:40px;height:40px;font-size:23px;letter-spacing:-1px}.brand-lockup>div:last-child{display:flex;flex-direction:column;gap:3px;min-width:0}.brand-lockup span{font-size:10px;font-weight:850;letter-spacing:1.65px;color:#8b98ae}.brand-lockup strong{font-size:17px;letter-spacing:-.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-actions{display:flex;align-items:center;gap:11px}.sync-status{font-size:11px;color:#566780;display:flex;align-items:center;gap:7px;white-space:nowrap}.sync-status i{display:inline-block;width:7px;height:7px;background:#d6a347;border-radius:50%}.sync-status.connected i{background:#1ec79b;box-shadow:0 0 0 3px #1ec79b20}.outline-action{border:1px solid #dce3ef;background:#fff;color:#435773;font-size:11px;font-weight:800;padding:9px 12px;border-radius:8px;white-space:nowrap}.outline-action:hover{background:#f2f6ff}
.app-grid{min-height:0;flex:1;display:grid;grid-template-columns:244px minmax(0,1fr)}
.device-rail{background:var(--rail);color:#fff;display:flex;flex-direction:column;min-height:0;padding:25px 14px 14px}.rail-top{padding:0 12px 15px}.rail-top small,.rail-lesson small{display:block;font-size:10px;color:#7190ca;letter-spacing:1.7px;font-weight:900}.rail-top h1{font-size:18px;line-height:1.5;margin:10px 0 8px;letter-spacing:-.6px}.rail-top p{font-size:11px;color:#9daec7;line-height:1.8;margin:0}
.device-list{display:flex;flex-direction:column;gap:7px}.device-option{text-align:left;width:100%;border:1px solid transparent;border-radius:11px;background:transparent;color:#a4b3cd;padding:12px 11px;display:flex;align-items:center;gap:12px;min-height:61px}.device-option:hover{background:#1a2d49}.device-option.active{background:#223a60;border-color:#3e65a2;color:#fff;box-shadow:inset 0 0 0 1px #3e65a234}.device-ico{font-size:23px;min-width:26px;line-height:1;text-align:center;color:#9cbbf3}.device-name{display:flex;flex:1;flex-direction:column;gap:5px}.device-name strong{font-size:12px}.device-name small{font-size:10px;color:#829cbf}.device-check{color:#51e5b9;font-size:13px;visibility:hidden}.active .device-check{visibility:visible}
.rail-lesson{background:#1b2d49;border:1px solid #283e5e;border-radius:12px;padding:16px 13px;margin:22px 0 0}.rail-lesson strong{display:block;color:#e8f0ff;font-size:12px;line-height:1.7;margin:11px 0 7px;word-break:keep-all}.rail-lesson span{font-size:10px;color:#6e94d0}.rail-note{display:flex;gap:9px;margin-top:16px;padding:8px 8px 0}.rail-note>span{color:#6fd3ab;font-size:16px}.rail-note p{font-size:11px;line-height:1.8;color:#9aaecb;margin:0}.rail-bottom{margin-top:auto;font-size:9px;color:#647c9f;padding:15px 10px 0;letter-spacing:.6px}
.view-panel{display:flex;flex-direction:column;min-height:0;min-width:0;background:#f0f3f8}.view-toolbar{height:62px;min-height:62px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 25px;gap:12px}.toolbar-title{display:flex;align-items:center;gap:13px}.toolbar-title strong{font-size:11px;letter-spacing:1.4px;color:#304260;white-space:nowrap}.toolbar-title>span{font-size:11px;color:#8a96aa;white-space:nowrap}.live-pulse{display:inline-block;width:6px;height:6px;border-radius:50%;background:#25c99c;margin-left:3px;vertical-align:middle}.toolbar-controls{display:flex;align-items:center;gap:7px}.toolbar-btn,.zoom-btn{font-size:11px;color:#586c86;font-weight:800;border-radius:8px;border:1px solid #dfe5ee;background:white;padding:9px 11px;white-space:nowrap}.toolbar-btn.active{background:#edf3ff;border-color:#c7d9ff;color:#285fce}.zoom-btn{font-size:15px;min-width:30px;padding:5px 9px}.zoom-label{font-size:11px;color:#7d8ca2;min-width:42px;text-align:center;white-space:nowrap}
.canvas{min-height:0;flex:1;overflow:auto;display:flex;justify-content:flex-start;align-items:flex-start;padding:25px;background-color:#eef1f6;background-image:radial-gradient(#d6deea 1px,transparent 1px);background-size:22px 22px}
.scaled-bounds{position:relative;margin:auto;flex:none}.browser-shell{position:absolute;left:0;top:0;transform-origin:top left;background:white;border-radius:14px;overflow:hidden;border:1px solid #dce3eb;box-shadow:0 20px 65px #263d5e32,0 3px 15px #22334c1b}.browser-chrome{height:40px;display:flex;align-items:center;gap:18px;background:#f9fafc;border-bottom:1px solid #e7ebf1;padding:0 15px;white-space:nowrap}.traffic{display:inline-flex;gap:5px}.traffic i{display:inline-block;width:9px;height:9px;border-radius:50%;background:#f19b8e}.traffic i:nth-child(2){background:#f4c875}.traffic i:nth-child(3){background:#76d6ad}.page-address{font-size:11px;color:#8e9db2;background:#f0f3f8;border:1px solid #e8ecf3;border-radius:6px;padding:5px 13px;min-width:150px;flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis}.preview-clock{font-size:10px;color:#9cabbe;font-weight:800;letter-spacing:1px}#renderFrame{display:block;border:0;background:#fff;width:100%}
.view-footer{min-height:43px;background:#fff;border-top:1px solid #e0e5ed;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 20px;color:#7f8da5;font-size:10px}.view-footer>div{display:flex;align-items:center;gap:8px}.footer-dot{background:#2bc49a;display:inline-block;width:6px;height:6px;border-radius:50%}.footer-separator{height:12px;width:1px;background:#d9deea;margin:0 5px}
@media(max-width:990px){.app-grid{grid-template-columns:180px minmax(0,1fr)}.device-rail{padding:18px 9px}.rail-top{padding:0 8px 10px}.rail-top h1{font-size:15px}.device-option{padding:9px 7px;gap:7px}.rail-lesson{padding:12px}.header-actions{gap:5px}.view-toolbar{padding:0 12px}.toolbar-controls{gap:4px}.canvas{padding:16px}}
@media(max-width:740px){.app{height:100dvh;min-height:530px}.app-header{height:60px;min-height:60px;padding:0 12px}.brand-k{width:33px;height:33px;font-size:18px}.brand-lockup span{font-size:8px;letter-spacing:1px}.brand-lockup strong{font-size:13px}.sync-status{display:none}.close-action{display:none}.app-grid{display:flex;flex-direction:column}.device-rail{flex:none;padding:8px 10px}.rail-top,.rail-lesson,.rail-note,.rail-bottom{display:none}.device-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.device-option{min-width:0;min-height:48px;justify-content:center;padding:5px;gap:5px}.device-ico{font-size:16px;min-width:auto}.device-name strong{font-size:10px;white-space:nowrap}.device-name small{display:none}.device-check{display:none}.view-toolbar{height:52px;min-height:52px;padding:0 10px}.toolbar-title{gap:6px}.toolbar-title strong{font-size:10px}.toolbar-title>span{font-size:9px}.toolbar-btn{font-size:10px;padding:6px}.zoom-btn{min-width:23px;padding:4px;font-size:13px}.zoom-label{min-width:31px;font-size:9px}.canvas{padding:10px}.view-footer{padding:7px 10px}.view-footer>div:last-child{display:none}}