:root{
  --bg:#15171c; --bg2:#1b1e25; --panel:#1f232b; --panel2:#262b34;
  --line:#2e333d; --line2:#3a4150;
  --txt:#e7e9ee; --txt2:#9aa3b0; --txt3:#6b7280;
  --accent:#4a9eff; --accent2:#6db8ff; --accentdim:rgba(74,158,255,0.12);
  --good:#5dcaa5; --warn:#efb24a; --danger:#e86a6a;
  --r:9px; --r2:12px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--txt);
  font:13px/1.5 -apple-system,'Segoe UI','Malgun Gothic',sans-serif;-webkit-font-smoothing:antialiased;user-select:none}
button{font-family:inherit;cursor:pointer}

/* ───── 상단 바 ───── */
.topbar{height:52px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 14px;background:var(--bg2);border-bottom:1px solid var(--line);position:fixed;top:0;left:0;right:0;z-index:50}
.tb-left{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.tb-center{display:flex;align-items:center;gap:4px;flex-shrink:0}
.tb-right{display:flex;align-items:center;gap:6px;flex:1;justify-content:flex-end}
.home{display:flex;align-items:center;gap:5px;color:var(--txt2);text-decoration:none;font-size:11.5px;font-weight:600;
  padding:5px 9px;border-radius:7px;background:var(--accentdim);border:1px solid rgba(74,158,255,0.2);white-space:nowrap;transition:.15s}
.home:hover{color:var(--accent2);border-color:var(--accent)}
.logo{display:none}  /* 작업공간 상단바에선 숨김(허브 .hub-logo 로 노출) — 가운데 줌 컨트롤과 겹침 방지 */
@media(max-width:1150px){.logo,.home span{display:none}}

.modes{display:flex;gap:4px;margin-left:8px;background:var(--panel);padding:3px;border-radius:10px;border:1px solid var(--line)}
.mtab{background:none;border:none;color:var(--txt2);font-size:12.5px;font-weight:600;padding:7px 13px;border-radius:7px;white-space:nowrap;transition:.12s}
.mtab:hover{color:var(--txt);background:var(--panel2)}
.mtab.active{background:var(--accent);color:#fff}
.mtab.soon{opacity:.5;cursor:default}
.mtab.soon:hover{background:none;color:var(--txt2)}

.zbtn{background:none;border:none;color:var(--txt2);font-size:14px;width:26px;height:26px;border-radius:6px;transition:.1s;white-space:nowrap;flex-shrink:0}
.zbtn:hover{background:var(--panel2);color:var(--txt)}
#btnZoomFit{width:auto;padding:0 9px;font-size:12.5px}
#zoomLabel{color:var(--txt);font-size:12px;min-width:40px;text-align:center}
.imgsize{color:var(--txt3);font-size:11px;margin-left:6px;white-space:nowrap}

.tbtn{background:none;border:1px solid transparent;color:var(--txt2);font-size:12.5px;font-weight:500;padding:6px 11px;border-radius:7px;white-space:nowrap;transition:.12s}
.tbtn:hover{background:var(--panel2);color:var(--txt)}
.tbtn:disabled{opacity:.3;cursor:not-allowed}
.tbtn.accent{background:var(--accent);color:#fff;font-weight:600}
.tbtn.accent:hover{background:var(--accent2)}
.sep{width:1px;height:20px;background:var(--line);margin:0 2px}
.export-wrap{display:flex;align-items:center;gap:0}
.mini-sel{background:var(--panel);color:var(--txt2);border:1px solid var(--line);border-right:none;border-radius:7px 0 0 7px;padding:6px 6px;font-size:11.5px;height:32px}
.export-wrap .accent{border-radius:0 7px 7px 0}

/* ───── 본문 ───── */
.main{position:fixed;top:52px;left:0;right:0;bottom:0;display:flex}
.canvas-area{flex:1;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:#0e0f12;
  background-image:linear-gradient(45deg,#16181d 25%,transparent 25%),linear-gradient(-45deg,#16181d 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#16181d 75%),linear-gradient(-45deg,transparent 75%,#16181d 75%);
  background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0}
.canvas-area.drag-over{outline:2px solid var(--accent);outline-offset:-3px}
.canvas-area.cur-fix{cursor:crosshair}
.canvas-area.cur-hand{cursor:grab}
.canvas-area.cur-eye{cursor:crosshair}
.canvas-area.cur-cross{cursor:crosshair}

/* welcome */
.welcome{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.wb{display:flex;flex-direction:column;align-items:center;gap:13px;text-align:center;max-width:400px;padding:42px 40px;
  background:rgba(31,35,43,.9);border:2px dashed var(--line2);border-radius:16px;backdrop-filter:blur(3px)}
.wb:hover{border-color:var(--accent)}
.wb h2{font-size:17px;font-weight:600}
.wb p{color:var(--txt2);font-size:13px}
.wb p b{color:var(--accent2)}
.hint{color:var(--txt3)!important;font-size:11.5px!important}
.btn-primary{background:var(--accent);color:#fff;border:none;font-size:14px;font-weight:600;padding:11px 26px;border-radius:9px;transition:.12s}
.btn-primary:hover{background:var(--accent2)}

/* canvas */
.cvs-outer{position:relative;width:100%;height:100%;overflow:hidden}
.cvs-wrap{position:absolute;top:0;left:0;line-height:0;box-shadow:0 10px 50px rgba(0,0,0,.6);transform-origin:0 0}
.cvs-wrap img{display:block;max-width:none}
.cvs-wrap canvas{position:absolute;inset:0}

.hint-toast{position:absolute;top:16px;left:50%;transform:translateX(-50%);background:rgba(74,158,255,0.92);color:#fff;
  font-size:12.5px;font-weight:600;padding:8px 16px;border-radius:20px;pointer-events:none;opacity:0;transition:opacity .3s;z-index:5}
.hint-toast.show{opacity:1}
.hint-toast b{font-weight:800}

.eyedrop-ind{position:fixed;top:60px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;
  font-size:12px;font-weight:600;padding:7px 15px;border-radius:18px;z-index:60}

/* ───── 우측 패널 ───── */
.rpanel{width:300px;flex-shrink:0;background:var(--panel);border-left:1px solid var(--line);overflow-y:auto;padding:12px}
.rpanel::-webkit-scrollbar{width:9px}.rpanel::-webkit-scrollbar-thumb{background:var(--line2);border-radius:5px}
.psec{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r2);padding:13px;margin-bottom:11px}
.psec.tip{background:var(--accentdim);border-color:rgba(74,158,255,0.22);color:var(--txt2);font-size:11.5px;line-height:1.6}
.psec.tip b{color:var(--accent2)}
.hint-lg{color:var(--txt3);text-align:center;font-size:12.5px;line-height:1.8;padding:30px 14px}
.plabel{font-size:12px;font-weight:700;color:var(--txt);margin-bottom:9px;display:flex;align-items:center;justify-content:space-between}
.count{display:inline-block;background:var(--accentdim);color:var(--accent2);font-size:11px;padding:1px 8px;border-radius:10px;margin-left:4px}

/* 글자 목록 */
.layer-list{display:flex;flex-direction:column;gap:5px;max-height:200px;overflow-y:auto}
.ll-empty{color:var(--txt3);font-size:11.5px;text-align:center;padding:14px 6px}
.ll-item{display:flex;align-items:center;gap:8px;padding:7px 9px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;font-size:12px;transition:.1s}
.ll-item:hover{border-color:var(--line2)}
.ll-item.sel{border-color:var(--accent);background:var(--accentdim)}
.ll-item .ll-txt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--txt)}
.ll-item .ll-del{color:var(--txt3);font-size:14px;line-height:1}
.ll-item .ll-del:hover{color:var(--danger)}
.ll-item .ll-up,.ll-item .ll-dn{color:var(--txt3);font-size:10px;line-height:1;width:16px;flex:0 0 auto}
.ll-item .ll-up:hover,.ll-item .ll-dn:hover{color:var(--accent)}

/* 편집 컨트롤 */
.txt-area{width:100%;background:var(--panel2);border:1px solid var(--line2);border-radius:8px;color:var(--txt);
  font-size:14px;padding:9px 11px;resize:vertical;font-family:inherit;margin-bottom:11px}
.txt-area:focus{outline:none;border-color:var(--accent)}
.row{margin-bottom:11px}
.row label{display:block;color:var(--txt2);font-size:11.5px;margin-bottom:5px}
.row.two{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.row.inline{display:flex;align-items:center;gap:8px}
.sel,.num{width:100%;background:var(--panel2);border:1px solid var(--line2);border-radius:7px;color:var(--txt);font-size:12.5px;padding:7px 9px}
.sel:focus,.num:focus{outline:none;border-color:var(--accent)}
.num{text-align:center}
input[type=range]{width:100%;accent-color:var(--accent)}

/* 입력 + 슬라이더 한 줄 */
.srow{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.srow>label{flex:0 0 40px;color:var(--txt2);font-size:11.5px;margin:0}
.snum{flex:0 0 50px;background:var(--panel2);border:1px solid var(--line2);border-radius:6px;color:var(--txt);font-size:12px;padding:5px 4px;text-align:center}
.snum:focus{outline:none;border-color:var(--accent)}
.srng{flex:1;min-width:0;accent-color:var(--accent)}
.sunit{flex:0 0 auto;color:var(--txt3);font-size:11px;width:12px}

/* 크기 바꾸기 패널 */
.pdesc{color:var(--txt3);font-size:11px;line-height:1.6;margin-bottom:8px}
.sublabel{display:block;color:var(--txt2);font-size:11.5px;font-weight:600;margin:11px 0 6px}
.info-box{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 11px;font-size:12px;color:var(--txt2);margin-bottom:8px;font-family:monospace}
.info-box.accent{background:var(--accentdim);border-color:rgba(74,158,255,0.25);color:var(--accent2)}
.res-btns{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.rbtn{background:var(--panel2);border:1px solid var(--line2);color:var(--txt2);font-size:12.5px;font-weight:600;padding:8px 0;border-radius:7px;transition:.1s}
.rbtn:hover{color:var(--txt);border-color:var(--accent)}
.rbtn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.rbtn-wide{grid-column:span 4}
.snum2{flex:1;min-width:0;background:var(--panel2);border:1px solid var(--line2);border-radius:6px;color:var(--txt);font-size:12.5px;padding:6px 9px}
.snum2:focus{outline:none;border-color:var(--accent)}
.rz-custom-row{display:flex;align-items:center;gap:8px;margin-top:12px}
.rz-x{color:var(--txt3);font-size:13px;flex:0 0 auto}
#pResize .res-btns{margin-bottom:2px}
#rzPreview{margin-top:12px}
#pResize .sublabel{margin-top:16px}
.bc-link{color:var(--accent);text-decoration:none;font-size:11.5px}
.bc-link:hover{color:var(--accent2);text-decoration:underline}
.eng-btns{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ebtn{background:var(--panel2);border:1px solid var(--line2);color:var(--txt2);font-size:11.5px;font-weight:600;padding:9px 6px;border-radius:7px;transition:.1s;line-height:1.3}
.ebtn:hover{color:var(--txt);border-color:var(--accent)}
.ebtn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.bg-modes{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-bottom:10px}
.bgmode{background:var(--panel2);border:1px solid var(--line2);color:var(--txt2);font-size:12.5px;font-weight:600;padding:9px 4px;border-radius:7px;transition:.1s}
.bgmode:hover{color:var(--txt);border-color:var(--accent)}
.bgmode.active{background:var(--accent);color:#fff;border-color:var(--accent)}

.rowhead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px}
.rowhead>span{color:var(--txt2);font-size:11.5px}
.chk-inline{display:inline-flex;align-items:center;gap:5px;color:var(--txt2);font-size:11px;cursor:pointer;margin:0;-webkit-user-select:none;user-select:none}
.chk-inline input{cursor:pointer;margin:0;accent-color:var(--accent)}
.color-row{display:flex;gap:10px}
.cc{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1;position:relative}
.cc.cc-off{opacity:.4}
.cc.cc-off input[type=color]{pointer-events:none}
.cc.cc-off .eye{display:none}
.cc input[type=color]{width:100%;height:32px;border:1px solid var(--line2);border-radius:7px;background:var(--panel2);padding:2px;cursor:pointer}
.cc small{color:var(--txt3);font-size:10.5px}
/* 스포이드(⊙) = 색 스와치 우상단에 작은 오버레이 버튼 (레이아웃 밀지 않음) */
.cc .eye{position:absolute;top:2px;right:2px;width:20px;height:20px;min-width:0;padding:0;font-size:12px;line-height:1;background:var(--panel);border:1px solid var(--line2);border-radius:5px;color:var(--txt2);opacity:.92}
.cc .eye:hover{color:var(--accent);border-color:var(--accent);opacity:1}
.eye{display:inline-flex;align-items:center;justify-content:center;width:34px;height:32px;flex:0 0 auto;background:var(--panel2);border:1px solid var(--line2);border-radius:7px;color:var(--txt2);cursor:pointer;transition:.1s}
.eye:hover{color:var(--accent);border-color:var(--accent)}
.eye svg{width:15px;height:15px;display:block}

.style-row{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.sbtn{background:var(--panel2);border:1px solid var(--line2);color:var(--txt2);font-size:13px;min-width:30px;height:30px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;transition:.1s}
.sbtn:hover{color:var(--txt);border-color:var(--accent)}
.sbtn.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.vsep{width:1px;height:18px;background:var(--line2);margin:0 2px}

.adv{margin-top:4px;border-top:1px solid var(--line);padding-top:10px}
.adv summary{color:var(--txt2);font-size:11.5px;cursor:pointer;margin-bottom:9px;list-style:none}
.adv summary::-webkit-details-marker{display:none}
.adv summary::before{content:'▸ ';color:var(--accent)}
.adv[open] summary::before{content:'▾ '}

.act{width:100%;background:var(--panel2);border:1px solid var(--line2);color:var(--txt2);font-size:12.5px;font-weight:500;padding:9px;border-radius:8px;margin-top:8px;transition:.1s}
.act:hover{color:var(--txt)}
.act.danger{color:var(--danger);border-color:rgba(232,106,106,0.3)}
.act.danger:hover{background:rgba(232,106,106,0.12)}

/* 로딩 */
.loading{position:fixed;inset:0;background:rgba(10,11,13,.72);display:flex;align-items:center;justify-content:center;z-index:100}
.lbox{display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--txt)}
.spin{width:38px;height:38px;border:3px solid var(--line2);border-top-color:var(--accent);border-radius:50%;animation:sp 0.8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ───────── 레벨 1 · 메인 허브 ───────── */
#hub{display:none}
body.hub-open #hub{display:flex;flex-direction:column}
body.hub-open .topbar,body.hub-open .main{display:none}
#btnHub{display:none}
body:not(.hub-open) #btnHub{display:inline-block;color:var(--accent);font-weight:600}
#hub{position:fixed;inset:0;background:var(--bg);overflow:auto;z-index:100}
.hub-top{display:flex;align-items:center;gap:12px;height:46px;padding:0 16px;background:var(--bg2);border-bottom:1px solid var(--line);flex-shrink:0}
.hub-logo{color:var(--accent);font-weight:700;font-size:14px;white-space:nowrap}
.hub-top-right{margin-left:auto;display:flex;gap:6px}
.hub-body{flex:1;display:flex;flex-direction:column;gap:26px;max-width:920px;width:100%;margin:0 auto;padding:38px 24px 24px}
.hub-h{color:var(--txt);font-size:15px;font-weight:700;margin-bottom:14px}
.hub-zone1 .hub-h{font-size:17px}
.hub-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.hub-card{display:flex;flex-direction:column;align-items:flex-start;gap:7px;text-align:left;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 18px;cursor:pointer;transition:.14s}
.hub-card:hover{border-color:var(--accent);background:var(--panel2);transform:translateY(-2px)}
.hub-card .hc-ico{font-size:30px;line-height:1}
.hub-card .hc-title{color:var(--txt);font-size:16px;font-weight:700}
.hub-card .hc-sub{color:var(--txt2);font-size:12px;line-height:1.5}
/* 우선순위 크기 차등: 글자(최대) > 크기 > 배경 > 직접(최소·연하게) */
.hc-fix{grid-column:1 / -1;background:linear-gradient(135deg,var(--accentdim),var(--panel));border-color:rgba(74,158,255,0.32)}
.hc-fix .hc-ico{font-size:36px}
.hc-fix .hc-title{font-size:19px;color:var(--accent2)}
.hc-fix .hc-sub{font-size:13px}
.hc-expert{opacity:.85}
.hub-zone2{border-top:1px solid var(--line);padding-top:22px}
.hub-zone2 .hub-h{color:var(--txt2);font-size:14px}
.hub-cards-auto{grid-template-columns:1fr 1fr 1fr}
.hub-card.auto{padding:15px 14px;background:var(--bg2);cursor:default}
.hub-card.auto .hc-ico{font-size:22px}
.hub-card.auto .hc-title{font-size:13.5px;color:var(--txt2)}
.hub-card.soon{opacity:.55}
.hub-card.soon:hover{border-color:var(--line);background:var(--bg2);transform:none}
.hub-foot{flex-shrink:0;text-align:center;color:var(--txt3);font-size:11px;padding:14px;border-top:1px solid var(--line)}
@media(max-width:760px){.hub-cards,.hub-cards-auto{grid-template-columns:1fr}.hc-fix{grid-column:auto}}
.hub-card.auto:not(.soon){cursor:pointer}
.hub-card.auto:not(.soon):hover{border-color:var(--accent);background:var(--panel2);transform:translateY(-2px)}

/* ───────── 일괄 변환 모달 ───────── */
.bc-modal{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(2px);z-index:200;display:flex;align-items:center;justify-content:center;padding:18px}
.bc-box{background:var(--panel);border:1px solid var(--line2);border-radius:16px;width:100%;max-width:480px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden}
.bc-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px;border-bottom:1px solid var(--line);font-weight:700;color:var(--txt);font-size:13.5px}
.bc-x{background:none;border:none;color:var(--txt2);font-size:15px;width:28px;height:28px;border-radius:7px}
.bc-x:hover{background:var(--panel2);color:var(--txt)}
.bc-body{padding:16px;overflow:auto;display:flex;flex-direction:column;gap:14px}
.bc-drop{border:2px dashed var(--line2);border-radius:12px;padding:22px 16px;text-align:center;color:var(--txt2);font-size:13px;transition:.12s}
.bc-drop.over{border-color:var(--accent);background:var(--accentdim);color:var(--accent2)}
.bc-drop-ico{font-size:30px;margin-bottom:6px}
.bc-hint{color:var(--txt3);font-size:11.5px;margin-top:8px}
.bc-list{max-height:150px;overflow:auto;border:1px solid var(--line);border-radius:9px;background:var(--bg2)}
.bc-frow{display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid var(--line);font-size:12px}
.bc-frow:last-child{border-bottom:none}
.bc-fname{flex:1;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bc-fsize{color:var(--txt3);font-size:11px;flex-shrink:0}
.bc-fx{background:none;border:none;color:var(--txt3);font-size:12px;width:18px;flex-shrink:0}
.bc-fx:hover{color:var(--accent)}
.bc-listfoot{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;font-size:11px;color:var(--txt2)}
.bc-clear{background:none;border:1px solid var(--line2);color:var(--txt2);font-size:10.5px;padding:3px 8px;border-radius:6px}
.bc-clear:hover{border-color:var(--accent);color:var(--txt)}
.bc-opts{display:flex;flex-direction:column;gap:9px}
.bc-seg{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
#bcFmtSeg{grid-template-columns:repeat(3,1fr)}
.bc-ai{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--txt2);cursor:pointer;line-height:1.4}
.bc-ai input{width:15px;height:15px;accent-color:var(--accent);flex:0 0 auto}
.bc-ai-note{color:var(--txt2);font-size:11px;line-height:1.6;background:var(--bg2);border:1px solid var(--line2);border-radius:8px;padding:8px 10px}
.bc-note{color:var(--txt3);font-size:11px;line-height:1.5}
.bc-prog{height:8px;border-radius:5px;background:var(--bg2);overflow:hidden}
.bc-prog-fill{height:100%;width:0;background:var(--accent);transition:width .2s}
.bc-prog-msg{color:var(--txt2);font-size:12px;min-height:16px;text-align:center}
.bc-foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--line)}