/* Base for the original WPF screen (frmmain.xaml: FontSize 12) and the few built-in WPF controls drawn in JS. */
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#434343}
body{font:12px 'Malgun Gothic','맑은 고딕','Segoe UI',sans-serif;color:#000;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#app.loading{display:grid;place-items:center;height:100%;color:#aaa;font-size:14px}
.frm-main{height:100dvh;width:100vw;border:1px solid #000}
.x-grid,.x-stack,.x-wrap{min-width:0;min-height:0}
/* WPF Grid children overlap in declaration order; give them the same paint order as positioned boxes. */
.x-grid>*{position:relative}
.x-nohit,.x-nohit *{pointer-events:none!important}
.combo,.color-picker,.lect-list,.canvas-host,.x-menuitem,.x-submenu,.tool-button{pointer-events:auto}
.x-menu{z-index:100}
.x-noscroll{scrollbar-width:none}.x-noscroll::-webkit-scrollbar{display:none}
.x-shape{display:block}
.x-image{display:block;max-width:none}
.x-image:not([src]){visibility:hidden}
.x-text{line-height:1.33}/* WPF TextBlock/Label default line height (Segoe UI line spacing 1.33) */

/* Menu (style/menustyle.xaml mnuItems_Style, 2.388): #EBEBEB text on #3b3b3b, highlighted = #3D26A0DA fill + #26A0DA border,
   disabled #707070; submenu rows 22px (icon column 22 + 13, header, 30, gesture, 20); popup border #1B1B1C, padding 2. */
.x-menu{align-items:stretch;padding-left:0}
.x-menu>.x-menuitem{position:relative;display:flex;align-items:center;padding:6px 10px 3px;border:1px solid transparent;color:#EBEBEB;cursor:default}
.x-menu>.x-menuitem>.x-menuhead>.x-menuicon{display:none}
.x-menu>.x-menuitem:hover,.x-menu>.x-menuitem.open{background:#26A0DA3D;border-color:#26A0DA}
.x-menu>.x-menuitem.disabled{color:#707070}
.x-menu>.x-menuitem.disabled:hover{background:#0000000A;border-color:#00000021}
.x-menuhead{display:flex;align-items:center;white-space:nowrap;width:100%}
.x-submenu{display:none;position:absolute;left:-1px;top:100%;z-index:50;min-width:190px;padding:2px;background:#3b3b3b;border:1px solid #1B1B1C;box-shadow:2px 2px 4px #0006}
.x-menuitem.open>.x-submenu{display:block}
.x-submenu .x-menuitem{position:relative;height:22px;padding:0 20px 0 0;display:flex;align-items:center;color:#EBEBEB;border:1px solid transparent}
.x-submenu .x-menuitem>.x-menuhead>.x-menuicon{flex:0 0 22px;margin-right:13px}
.x-submenu .x-menuitem:hover{background:#26A0DA3D;border-color:#26A0DA}
.x-submenu .x-menuitem.has-sub:hover{background:transparent}
.x-submenu .x-menuitem.has-sub::after{content:'';position:absolute;right:9px;border:3.5px solid transparent;border-left:4px solid #EBEBEB;border-right:0}
.x-submenu .x-menuitem.has-sub:hover>.x-submenu{display:block;left:calc(100% - 2px);top:-3px}
.x-submenu .x-menuitem.checked>.x-menuhead>.x-menuicon::before{content:'✓';font-size:12px;color:#EBEBEB}
.x-submenu .x-menuitem.checked>.x-menuhead>.x-menuicon.x-image{display:none}
.x-submenu .x-menuitem.disabled{color:#707070}
.x-submenu .x-menuitem.disabled:hover{background:#0000000A;border-color:#00000021}
.x-menuicon{width:22px;height:16px;display:grid;place-items:center}
.x-menuicon.x-image{width:12px;height:12px;padding:2px 5px;box-sizing:content-box;object-fit:contain}
.x-separator{height:1px;margin:2px 0 2px 30px;background:#D7D7D7}

/* Splitters (GridSplitter template) */
.x-splitter{cursor:ew-resize}

/* ctlComboBox (ComboBoxToggleButton + #1E1E3C drop-down) */
.combo{position:relative;display:flex;align-items:center;border:1px solid #000;border-radius:3px;cursor:pointer;font-weight:bold}
.combo-value{flex:1;padding:0 3px;overflow:hidden;white-space:nowrap}
.combo-arrow{width:12px;height:100%;display:grid;place-items:center}
.combo-arrow::before{content:'';border:4px solid transparent;border-top:4px solid var(--arrow,#000);border-bottom:0;margin-top:1px}
.combo-list{display:none;position:absolute;left:-1px;top:100%;min-width:calc(100% + 2px);z-index:60;background:#1E1E3C;border:1px solid #fff;border-radius:0 0 4px 4px;max-height:320px;overflow:auto;color:#fff}
.combo.open .combo-list{display:block}
.combo-item{padding:1px 4px;font-weight:normal}
.combo-item:hover{background:#3d3d7a}

/* SmallColorPicker */
.color-picker{position:relative;height:20px;display:flex;align-items:center;border:1px solid #707070;background:linear-gradient(#f2f2f2,#dcdcdc);border-radius:2px;cursor:pointer}
.color-swatch{width:12px;height:12px;margin:0 4px;border:1px solid #000}
.color-picker .combo-arrow{margin-left:auto;--arrow:#444}
.color-list{display:none;position:absolute;left:0;top:100%;z-index:60;width:160px;padding:2px;background:#fff;border:1px solid #888;flex-wrap:wrap}
.color-list span{width:16px;height:16px;margin:1px 1px;border:1px solid #000}
.color-picker.open .color-list{display:flex}

/* Left page list (LectList ListBox #575757 + LectList_Img) */
.lect-list{background:#575757;overflow-y:auto;overflow-x:hidden;padding:0 3px 0 0;scrollbar-width:thin;scrollbar-color:#2e2e2e transparent}
.lect-item{position:relative;margin:2px 0;aspect-ratio:1600/1100;border:1px solid transparent}
.lect-item.selected{background:rgba(38,160,218,.33);border-color:#26A0DA}
.lect-shadow{position:absolute;inset:9px 0 2px 7px;background:#2e2e2e;border-radius:2px;display:none}
.lect-item.selected .lect-shadow{display:block}
.lect-pic{position:absolute;inset:6px 4px 6px 4px;background:#fff;border:1px solid #1e1e1e}
.lect-item.selected .lect-pic{border-color:#000}
.lect-pic svg,.lect-thumb{display:block;width:100%;height:100%}
.lect-no{position:absolute;left:0;top:12px;width:27px;height:18px;display:grid;place-items:center;background:#fff;border:1px solid rgba(30,30,60,.98);font:bold 11px Gulim,'Malgun Gothic',sans-serif;color:#000}
.lect-item.selected .lect-no{background:#32ff32}

/* Drawing surface (MainWindow) */
.canvas-host{position:relative;overflow:hidden;background:#ebebeb;display:grid;place-items:center;min-width:0;min-height:0}
.canvas-host.scroll{overflow:auto;place-items:start}
.sheet{position:relative;margin:10px;background:#fff}
.paper{display:block;width:100%;height:100%;touch-action:none}
.text-box{display:none;position:absolute;min-width:160px;min-height:1.6em;padding:0;margin:0;border:2px dashed #000;background:transparent;/* 2.388 style TextBox_InkCanvas: 4-4 dashed black frame, transparent */font-family:'Malgun Gothic',sans-serif;line-height:1.3;resize:both;outline:none;field-sizing:content;-webkit-user-select:text;user-select:text}
.toast{position:absolute;left:50%;bottom:52px;transform:translateX(-50%);padding:8px 14px;border-radius:10px;background:#000c;color:#fff;font-size:13px;opacity:0;transition:opacity .2s;pointer-events:none;white-space:nowrap}
.toast.show{opacity:1}
.tool-button{cursor:default}/* toolBarButton keeps the arrow cursor */
.paper .fx{pointer-events:none}
.watermark{position:absolute;left:10px;right:10px;bottom:43px;z-index:6;pointer-events:none;white-space:pre;overflow:hidden}
.sound-icon{cursor:pointer}
.sound-player{grid-row:1/span 1!important;grid-column:1/span 1!important;place-self:end end!important;width:290px;margin:0 12px 48px 0!important;z-index:30}
.sound-player .x-slider{width:100%;accent-color:#2eff00}
.lect-item.drop-top{box-shadow:0 -2px 0 #fff}
.lect-item.drop-bottom{box-shadow:0 2px 0 #000}
/* WPF default ContextMenu look (LectList mnuContextMenu) */
.ctx-menu{position:fixed;z-index:200;min-width:180px;padding:2px;background:#f0f0f0;border:1px solid #979797;box-shadow:2px 2px 3px #0005;font-size:12px}
.ctx-item{padding:4px 24px 4px 28px;cursor:default}
.ctx-item:hover{background:#d5e7f8;outline:1px solid #7ab0e5}
.ctx-sep{height:1px;margin:3px 2px 3px 28px;background:#d7d7d7}
/* Popup windows (popup/*.xaml) and the standard WPF controls they use */
.dlg-overlay{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:rgba(0,0,0,.25)}
.dlg-window{background:#f0f0f0;box-shadow:0 8px 30px rgba(0,0,0,.45);max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:hidden;color:#000}
/* WPF ProgressBar (Aero): grey track, green fill */
.x-progress{appearance:none;-webkit-appearance:none;border:1px solid #bcbcbc;background:#e6e6e6;border-radius:0}
.x-progress::-webkit-progress-bar{background:#e6e6e6}
.x-progress::-webkit-progress-value{background:#06b025}
.x-progress::-moz-progress-bar{background:#06b025}
.x-input{font:inherit;font-size:12px;height:22px;padding:1px 4px;border:1px solid #abadb3;background:#fff;color:#000;min-width:0}
.x-input:focus{outline:none;border-color:#3399ff}
.x-listbox{background:#fff;border:1px solid #828790;overflow-y:auto;font-size:12px}
.x-listitem{padding:1px 4px;white-space:nowrap;cursor:default}
.x-listitem:hover{background:#e5f3fb}
.x-listitem.selected{background:#3399ff;color:#fff}
.x-check{display:inline-flex;align-items:center;gap:4px;font-size:12px;white-space:nowrap}
.x-combo{display:grid}
.x-combo .x-input{width:100%}
.x-button{font:inherit;font-size:12px;border:1px solid #707070;border-radius:2px;background:linear-gradient(#f2f2f2,#dddddd);color:#000;cursor:pointer}
.x-button:hover{border-color:#3c7fb1;background:linear-gradient(#eaf6fd,#bee6fd)}
.x-button:active{background:linear-gradient(#c4e5f6,#98d1ef)}
.x-groupbox{margin:0;padding:0 6px 6px;border:1px solid #d5dfe5;border-radius:3px;font-size:12px}
.x-groupbox legend{padding:0 3px}
textarea.x-input,input.x-input:disabled{background:#f4f4f4}
/* Start screen (mainBaseButton) centred in the canvas area, over the hidden page */
.start-screen{grid-row:1/span 1!important;grid-column:1/span 1!important;place-self:center!important}
.start-screen [data-name^=grd]:hover img{filter:brightness(1.06)}
[data-name=canvasGrd]{background:#ececec}/* LectPageInfo.canvasBg default */
/* 화면 캡쳐 / 카메라 (full-screen popups) and the floating 캠 window */
.dlg-window.dlg-fullscreen{width:100vw!important;height:100dvh!important;max-width:none;max-height:none;box-shadow:none;background:#000}
.cam-preview{grid-area:1/1/span 1/span 1;width:100%;height:100%;object-fit:contain;background:#4c4c4c}
.cam-window{position:absolute;left:10px;top:10px;width:240px;height:180px;z-index:20;background:#000;border:2px solid #333;box-shadow:0 3px 10px #0007;cursor:move;touch-action:none}
.cam-window video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.cam-close{position:absolute;right:2px;top:2px;width:22px;height:22px;border:0;border-radius:3px;background:#0008;color:#fff;font-size:16px;line-height:1;cursor:pointer}
.cam-grip{position:absolute;right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 50%,#fff8 50%)}

.x-textarea{height:auto;align-self:stretch;justify-self:stretch;width:auto;padding:10px;resize:none;font:inherit;white-space:pre-wrap;overflow:auto;box-sizing:border-box}

.win-chrome{flex:none;height:30px;display:flex;align-items:center;justify-content:space-between;padding-left:10px;background:#fff;color:#000;font:12px 'Malgun Gothic',sans-serif;border-bottom:1px solid #e5e5e5}
.win-chrome button{width:46px;height:30px;border:0;background:transparent;font-size:13px;cursor:pointer}
.win-chrome button:hover{background:#e81123;color:#fff}

/* phone width: the menu bar wraps instead of pushing 설정·로그인·도움말 off-screen */
@media (max-width:699px){.x-menu{flex-wrap:wrap;height:auto!important}
 .uc-bottomToolbar [data-name="iconPanel"]{overflow-x:auto;width:100%;min-width:0;box-sizing:border-box;overflow-y:hidden;scrollbar-width:thin}/* the bottom toolbar row scrolls sideways instead of losing buttons */}
/* a folded page list (width 0) must not spill its page number / + button over the page */
[data-name="LeftArea"]{overflow:hidden}

/* 마우스 커서 '사용 안 함' (cursorType icon03): Module1._mainForm.Cursor = None for the whole window */
.no-cursor,.no-cursor *{cursor:none!important}
.ctx-item.disabled{color:#a0a0a0}
.ctx-item.disabled:hover{background:none;outline:none}