/* Keepdesk 오피스 스튜디오 — 사이트 토큰(--bg, --panel, --line, --ink, --brand …)을 그대로 써서 다크 모드도 따라간다. 단색만. */
:root{ --oa-stage:#e8ebf1; --oa-rail:68px; --oa-panel:316px; --oa-top:52px; --oa-ink-soft:#8a93a8 }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --oa-stage:#070a12; --oa-ink-soft:#6f7a94 } }

/* ── 시작 화면(검색에 보이는 부분) ── */
.ol{padding:8px 0 24px}
.ol-hero{display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; padding:40px 0 28px}
.ol-kicker{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--brand-ink); background:var(--brand-soft); padding:5px 12px; border-radius:999px}
.ol-hero h1{font-size:clamp(34px,4.6vw,54px); line-height:1.12; letter-spacing:-.035em; margin:16px 0 14px}
.ol-hero h1 em{font-style:normal; color:var(--brand)}
.ol-hero p.sub{font-size:17.5px; color:var(--ink-2); margin:0 0 24px; max-width:34em; word-break:keep-all}
.ol-cta{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.ol-open{display:inline-flex; align-items:center; gap:10px; height:52px; padding:0 24px; border-radius:14px; border:0; background:var(--brand); color:#fff; font:inherit; font-size:16.5px; font-weight:750; cursor:pointer}
.ol-open:hover{background:var(--brand-ink)}
.ol-cta .muted{font-size:13.5px; color:var(--ink-3)}
.ol-fmts{display:flex; flex-wrap:wrap; gap:6px; margin-top:22px}
.ol-fmts button{border:1px solid var(--line); background:var(--panel); color:var(--ink-2); font:inherit; font-size:12.5px; font-weight:700; padding:6px 11px; border-radius:8px; cursor:pointer; letter-spacing:.02em}
.ol-fmts button:hover{border-color:var(--brand); color:var(--brand-ink)}
/* 미리보기: 실제 스튜디오 화면을 줄여 그린 틀 */
.ol-shot{border-radius:16px; border:1px solid var(--line); background:var(--panel); box-shadow:var(--pop); overflow:hidden; aspect-ratio:16/11; display:grid; grid-template-rows:30px 1fr 18px}
.ol-shot .t{display:flex; align-items:center; gap:6px; padding:0 10px; border-bottom:1px solid var(--line)}
.ol-shot .t i{width:14px; height:14px; border-radius:4px; background:var(--brand)} .ol-shot .t b{width:64px; height:7px; border-radius:4px; background:var(--line)} .ol-shot .t u{margin-left:auto; width:46px; height:14px; border-radius:5px; background:var(--brand)}
.ol-shot .m{display:grid; grid-template-columns:30px 1fr 88px; min-height:0}
.ol-shot .r{border-right:1px solid var(--line); display:flex; flex-direction:column; align-items:center; gap:7px; padding-top:9px}
.ol-shot .r i{width:14px; height:14px; border-radius:4px; background:var(--line)} .ol-shot .r i:nth-child(3){background:var(--brand)}
.ol-shot .c{background:var(--oa-stage); display:grid; place-items:center; padding:14px}
.ol-shot .pg{width:62%; aspect-ratio:1/1.35; background:#fff; border-radius:3px; box-shadow:0 2px 8px rgba(11,22,51,.12); position:relative; padding:12% 10%}
.ol-shot .pg s{display:block; height:5px; border-radius:3px; background:#e3e7f1; margin-bottom:6px; text-decoration:none} .ol-shot .pg s:nth-child(2){width:80%} .ol-shot .pg s:nth-child(4){width:60%}
.ol-shot .pg em{position:absolute; left:14%; top:44%; width:52%; height:16px; border:2px solid #e5484d; border-radius:4px}
.ol-shot .pg q{position:absolute; left:18%; top:66%; width:40%; height:10px; background:#111318; border-radius:2px}
.ol-shot .p{border-left:1px solid var(--line); padding:9px 8px; display:flex; flex-direction:column; gap:7px}
.ol-shot .p i{height:8px; border-radius:4px; background:var(--line)} .ol-shot .p i:first-child{width:60%} .ol-shot .p u{height:26px; border-radius:6px; background:var(--panel-2); border:1px solid var(--line)}
.ol-shot .s{border-top:1px solid var(--line); background:var(--panel-2)}
.ol-feats{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:12px 0 8px}
.ol-feat{padding:20px; border-radius:16px; background:var(--panel); border:1px solid var(--line)}
.ol-feat .ic{width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:var(--brand-soft); color:var(--brand); margin-bottom:12px}
.ol-feat h3{margin:0 0 6px; font-size:16.5px; letter-spacing:-.02em} .ol-feat p{margin:0; font-size:14px; color:var(--ink-2); line-height:1.6; word-break:keep-all}
.ol-feat .ol-event{display:flex; align-items:center; gap:10px; padding:14px 18px; border-radius:14px; background:var(--panel); border:1px dashed var(--brand); color:var(--ink-2); font-size:14.5px; margin:18px 0}
.ol-event b{color:var(--ink)}
@media (max-width:860px){ .ol-hero{grid-template-columns:1fr; gap:24px; padding-top:20px} .ol-feats{grid-template-columns:1fr} .ol-shot{display:none} }

/* ── 앱 틀 ── */
html.oa-on, html.oa-on body{overflow:hidden; height:100%}
.oa{position:fixed; inset:0; z-index:950; display:grid; grid-template-rows:var(--oa-top) auto 1fr 30px; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:14px; line-height:1.45; letter-spacing:-.01em}
.oa[hidden]{display:none!important}
.oa button{font:inherit; color:inherit}
.oa-top{display:flex; align-items:center; gap:6px; padding:0 10px 0 12px; background:var(--panel); border-bottom:1px solid var(--line); min-width:0}
.oa-brand{display:flex; align-items:center; gap:9px; color:var(--ink); text-decoration:none!important; padding-right:10px; margin-right:4px; border-right:1px solid var(--line); height:28px; flex:none}
.oa-logo{width:28px; height:28px; flex:none; display:block}
.oa-bn{font-weight:800; font-size:14.5px; white-space:nowrap; letter-spacing:-.02em} .oa-bn em{font-style:normal; font-weight:650; color:var(--brand)}
.oa-tabs{display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; min-width:0; flex:0 1 auto}
.oa-tabs::-webkit-scrollbar{display:none}
.oa-tab{display:flex; align-items:center; gap:7px; height:34px; padding:0 6px 0 9px; border-radius:9px; cursor:pointer; color:var(--ink-2); max-width:240px; flex:none; border:1px solid transparent}
.oa-tab:hover{background:var(--panel-2)}
.oa-tab.on{background:var(--panel-2); border-color:var(--line); color:var(--ink)}
.oa-tk{font-size:10px; font-weight:800; letter-spacing:.04em; padding:2px 5px; border-radius:5px; background:var(--line); color:var(--ink-2)}
.oa-tab.on .oa-tk{background:var(--brand); color:#fff}
.oa-tn{font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.oa-tx{width:22px; height:22px; border:0; background:none; border-radius:6px; display:grid; place-items:center; color:var(--ink-3); cursor:pointer; flex:none}
.oa-tx:hover{background:var(--line); color:var(--ink)}
.oa-sp{flex:1}
.oa-ib{height:34px; min-width:34px; padding:0 8px; border:0; background:none; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; gap:6px; color:var(--ink-2); cursor:pointer; flex:none}
.oa-ib span{font-size:13px; font-weight:650}
.oa-ib:hover:not(:disabled){background:var(--panel-2); color:var(--ink)}
.oa-ib:disabled{opacity:.35; cursor:default}
.oa-ptoggle{display:none}
.oa-exw{position:relative; flex:none}
.oa-export{height:34px; padding:0 14px 0 11px; border:0; border-radius:9px; background:var(--brand); color:#fff!important; display:inline-flex; align-items:center; gap:7px; font-weight:700!important; font-size:13.5px!important; cursor:pointer; margin:0 4px}
.oa-export:hover{background:var(--brand-ink)}
.oa-menu{position:absolute; right:4px; top:42px; width:280px; background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:var(--pop); padding:6px; z-index:5}
.oa-menu button{display:flex; flex-direction:column; align-items:flex-start; gap:1px; width:100%; text-align:left; border:0; background:none; padding:9px 11px; border-radius:8px; cursor:pointer}
.oa-menu button:hover{background:var(--panel-2)}
.oa-menu b{font-size:13.5px; font-weight:700; display:flex; align-items:center; gap:6px} .oa-menu small{font-size:12px; color:var(--ink-3)}
.oa-event{display:flex; align-items:center; gap:8px; padding:7px 14px; background:var(--brand-soft); color:var(--brand-ink); font-size:13px; border-bottom:1px solid var(--line)}
.oa-event[hidden]{display:none}
.oa-event b{font-weight:800}
.oa-event button{margin-left:auto; border:0; background:none; color:inherit; width:24px; height:24px; border-radius:6px; display:grid; place-items:center; cursor:pointer}
.oa-pro{display:inline-flex; align-items:center; height:16px; padding:0 5px; border-radius:4px; background:var(--ink); color:var(--panel); font-size:9.5px; font-weight:850; letter-spacing:.06em; margin-left:6px; line-height:1; cursor:help}
.oa-body{display:grid; grid-template-columns:var(--oa-rail) 1fr var(--oa-panel); min-height:0}
.oa-rail{background:var(--panel); border-right:1px solid var(--line); display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 0; overflow-y:auto; scrollbar-width:none}
.oa-tool{position:relative; width:56px; min-height:52px; border:0; background:none; border-radius:10px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--ink-2); cursor:pointer; padding:5px 2px}
.oa-tool span{font-size:10.5px; font-weight:600; line-height:1.15; text-align:center; word-break:keep-all}
.oa-tool:hover{background:var(--panel-2); color:var(--ink)}
.oa-tool.on{background:var(--brand-soft); color:var(--brand-ink)}
.oa-dot{position:absolute; top:7px; right:10px; width:6px; height:6px; border-radius:50%; background:var(--ink)}
.oa-sep{width:28px; height:1px; background:var(--line); margin:5px 0; flex:none}
.oa-stage{position:relative; background:var(--oa-stage); min-width:0; min-height:0; overflow:hidden}
.oa-stage > div:not(.oa-busy):not(.oa-drop){position:absolute; inset:0}
.oa-stage > div[hidden]{display:none!important}
.oa-busy{position:absolute; inset:0; z-index:20; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:color-mix(in srgb, var(--oa-stage) 70%, transparent); font-size:13.5px; font-weight:600; color:var(--ink-2)}
.oa-busy i{width:30px; height:30px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--brand); animation:oaspin .8s linear infinite}
@keyframes oaspin{to{transform:rotate(360deg)}}
.oa-drop{position:absolute; inset:12px; z-index:21; border:2px dashed var(--brand); border-radius:16px; display:grid; place-items:center; background:color-mix(in srgb, var(--brand-soft) 80%, transparent); font-weight:750; color:var(--brand-ink); pointer-events:none}
.oa-panel{background:var(--panel); border-left:1px solid var(--line); display:flex; flex-direction:column; min-height:0}
.oa-ptabs{display:flex; gap:2px; padding:8px 10px 0; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none; flex:none}
.oa-ptabs button{border:0; background:none; padding:8px 10px 9px; font-size:13px; font-weight:650; color:var(--ink-3); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap}
.oa-ptabs button:hover{color:var(--ink)}
.oa-ptabs button.on{color:var(--ink); border-bottom-color:var(--ink)}
.oa-pbody{overflow-y:auto; flex:1; min-height:0}
.oa-pp{padding:4px 16px 24px}
.oa-sec{padding:14px 0; border-bottom:1px solid var(--line-2); display:flex; flex-direction:column; gap:9px}
.oa-sec:last-child{border-bottom:0}
.oa-sec h4{margin:0 0 2px; font-size:12px; font-weight:750; color:var(--ink-3); letter-spacing:.01em; display:flex; align-items:center}
.oa-note{margin:0; font-size:12.5px; color:var(--ink-3); line-height:1.55; word-break:keep-all}
.oa-btn{height:34px; padding:0 12px; border-radius:9px; border:1px solid var(--line); background:var(--panel); display:inline-flex; align-items:center; justify-content:center; gap:7px; font-size:13px!important; font-weight:650!important; cursor:pointer; color:var(--ink)!important; white-space:nowrap}
.oa-btn:hover{border-color:var(--ink-3)}
.oa-btn.pri{background:var(--ink); border-color:var(--ink); color:var(--panel)!important}
.oa-btn.pri:hover{opacity:.9}
.oa-btn.wide{width:100%}
.oa-btn.sm{height:28px; padding:0 8px; font-size:12px!important}
.oa-row2{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.oa-grid2{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.oa-grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:6px}
.oa-ibx{height:38px; border:1px solid var(--line); border-radius:9px; background:var(--panel); display:grid; place-items:center; cursor:pointer; color:var(--ink-2)}
.oa-ibx:hover{border-color:var(--ink-3); color:var(--ink)}
.mir svg,.oa-ibx.mir svg,button.mir svg{transform:scaleX(-1)}
.oa-in{height:34px; width:100%; border:1px solid var(--line); border-radius:9px; background:var(--panel); color:var(--ink); font:inherit; font-size:13.5px; padding:0 10px}
.oa-in:focus{outline:2px solid var(--brand); outline-offset:-1px; border-color:transparent}
.oa-sl{display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--ink-2)}
.oa-sl span{display:flex; justify-content:space-between} .oa-sl b{font-variant-numeric:tabular-nums; color:var(--ink); font-weight:650}
.oa-sl input{width:100%; accent-color:var(--brand)}
.oa-chk{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2); cursor:pointer}
.oa-chk input{width:16px; height:16px; accent-color:var(--brand)}
.oa-sw{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.oa-sw button,.oa-padc button{width:26px; height:26px; border-radius:50%; background:var(--c); border:1px solid rgba(11,22,51,.18); cursor:pointer; padding:0}
.oa-sw button.on,.oa-padc button.on{box-shadow:0 0 0 2px var(--panel), 0 0 0 4px var(--brand)}
.oa-padc [data-tp]{background:conic-gradient(#ccd 0 25%, #fff 0 50%, #ccd 0 75%, #fff 0) 0 0/10px 10px}
.oa-swc{width:26px; height:26px; border-radius:50%; background:var(--c); border:1px dashed var(--ink-3); position:relative; overflow:hidden; cursor:pointer}
.oa-swc input{position:absolute; inset:0; opacity:0; cursor:pointer}
.oa-padc{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-3)}
.oa-seg{display:flex; background:var(--panel-2); border:1px solid var(--line); border-radius:9px; padding:2px; gap:2px}
.oa-seg button{flex:1; border:0; background:none; border-radius:7px; padding:6px 8px; font-size:12.5px; font-weight:650; color:var(--ink-2); cursor:pointer; white-space:nowrap}
.oa-seg button.on{background:var(--panel); color:var(--ink); box-shadow:0 1px 2px rgba(11,22,51,.12)}
.oa-wh{display:flex; align-items:center; gap:8px} .oa-wh label{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-3); flex:1} .oa-wh span{color:var(--ink-3)}
.oa-list{display:flex; flex-direction:column; gap:2px}
.oa-list button{display:grid; grid-template-columns:30px 1fr auto; align-items:center; gap:10px; border:0; background:none; border-radius:9px; padding:7px 8px; cursor:pointer; text-align:left}
.oa-list button:hover{background:var(--panel-2)}
.oa-list b{font-size:13px; font-weight:650} .oa-list small{font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.oa-ar{justify-self:center; height:20px; aspect-ratio:var(--r); max-width:28px; border:1.5px solid var(--ink-3); border-radius:3px}
.oa-card{display:flex; align-items:flex-start; gap:12px; width:100%; text-align:left; border:1px solid var(--line); background:var(--panel); border-radius:12px; padding:12px; cursor:pointer}
.oa-card:hover{border-color:var(--brand); background:var(--brand-soft)}
.oa-card b{display:flex; align-items:center; font-size:13.5px; font-weight:700} .oa-card small{display:block; font-size:12px; color:var(--ink-3); margin-top:2px; line-height:1.45}
.oa-ci{width:36px; height:36px; border-radius:10px; background:var(--panel-2); display:grid; place-items:center; color:var(--ink); flex:none}
.oa-ok{display:flex; align-items:center; gap:6px; margin:0; font-size:13px; font-weight:650; color:var(--ok)} .oa-err{margin:0; font-size:12.5px; color:var(--warn)}
.oa-status{display:flex; align-items:center; gap:14px; padding:0 12px; background:var(--panel); border-top:1px solid var(--line); font-size:12px; color:var(--ink-3); min-width:0}
.oa-lock{display:inline-flex; align-items:center; gap:5px; color:var(--mint-ink); font-weight:650; white-space:nowrap}
.oa-info{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums}
.oa-zoom{display:inline-flex; align-items:center; gap:2px}
.oa-zoom[hidden]{display:none}
.oa-zoom button{width:24px; height:22px; border:0; background:none; border-radius:5px; display:grid; place-items:center; color:var(--ink-3); cursor:pointer}
.oa-zoom button:hover{background:var(--panel-2); color:var(--ink)}
.oa-zoom b{min-width:42px; text-align:center; font-weight:650; color:var(--ink-2); font-variant-numeric:tabular-nums}
.oa-toast{position:fixed; left:50%; bottom:46px; transform:translate(-50%,12px); background:var(--ink); color:var(--panel); padding:9px 16px; border-radius:10px; font-size:13px; font-weight:600; opacity:0; pointer-events:none; transition:.2s; z-index:30; max-width:80vw}
.oa-toast.on{opacity:1; transform:translate(-50%,0)}
.oa-modal{position:fixed; inset:0; z-index:40; background:rgba(11,15,26,.45); display:grid; place-items:center; padding:16px}
.oa-mbox{background:var(--panel); border-radius:16px; padding:20px; width:min(560px,100%); box-shadow:var(--pop); display:flex; flex-direction:column; gap:12px}
.oa-mbox h3{margin:0; font-size:16px}
.oa-mbox canvas{width:100%; aspect-ratio:900/360; border:1px dashed var(--line); border-radius:12px; background:#fff; touch-action:none; cursor:crosshair}
.oa-mbox .oa-row2{grid-template-columns:auto auto 1fr} .oa-mbox [data-ok]{justify-self:end}

/* 계산기 판 */
.oc-row{display:grid; grid-template-columns:1fr; gap:6px}
.oc-out{font-size:26px; font-weight:750; text-align:right; font-variant-numeric:tabular-nums; letter-spacing:-.02em; padding:2px 2px 0; word-break:break-all}
.oc-out.err{color:var(--ink-3)}
.oc-keys{display:grid; grid-template-columns:repeat(4,1fr); gap:5px}
.oc-keys button{height:36px; border:1px solid var(--line); background:var(--panel); border-radius:8px; font-size:15px!important; font-weight:650!important; cursor:pointer; font-variant-numeric:tabular-nums}
.oc-keys button:hover{background:var(--panel-2)}
.oc-keys .op{background:var(--panel-2)} .oc-keys .cl{color:var(--warn)!important} .oc-keys [data-k="="]{background:var(--ink); color:var(--panel)!important; border-color:var(--ink)}
.oc-hist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; max-height:150px; overflow:auto}
.oc-hist li{display:flex; justify-content:space-between; gap:10px; font-size:12.5px; padding:5px 6px; border-radius:6px; cursor:pointer; color:var(--ink-3)}
.oc-hist li:hover{background:var(--panel-2)} .oc-hist b{color:var(--ink); font-variant-numeric:tabular-nums}
.oc-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px; align-items:end}
.oc-grid label{display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--ink-3)}
.oc-seg{display:flex; flex-direction:column; gap:3px}
.oc-seg button{border:1px solid var(--line); background:var(--panel); border-radius:7px; font-size:11.5px!important; padding:4px 6px; cursor:pointer; color:var(--ink-3)!important}
.oc-seg button.on{border-color:var(--ink); color:var(--ink)!important; font-weight:700!important}
.oc-dl{display:grid; grid-template-columns:auto 1fr; gap:5px 12px; margin:0; font-size:13px}
.oc-dl dt{color:var(--ink-3)} .oc-dl dd{margin:0; text-align:right; font-variant-numeric:tabular-nums; font-weight:600; word-break:break-all}

/* ── 이미지 편집기 ── */
.oe-img canvas.oe-cv{position:absolute; inset:0; touch-action:none}
.oe-txt{position:absolute; z-index:3; min-width:120px; background:transparent; border:1.5px dashed var(--brand); border-radius:4px; padding:0; margin:0; font-weight:700; font-family:-apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Malgun Gothic", sans-serif; resize:none; overflow:hidden; outline:0; field-sizing:content}
.oe-cropbar{position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:4; display:flex; align-items:center; gap:8px; padding:8px 10px; background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:var(--pop); font-size:12.5px; color:var(--ink-3); max-width:calc(100% - 24px); overflow-x:auto}
.oe-cropbar[hidden]{display:none}
.oe-cropbar > span{white-space:nowrap}
/* ── PDF 편집기 ── */
.oe-pdf{overflow:auto}
.op-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:22px 18px; padding:26px; align-content:start}
.op-grid[hidden]{display:none}
.op-card{display:flex; flex-direction:column; gap:8px; cursor:pointer; border-radius:10px; padding:8px; border:2px solid transparent; user-select:none}
.op-card:hover{background:color-mix(in srgb, var(--panel) 60%, transparent)}
.op-card.on{border-color:var(--brand); background:var(--panel)}
.op-card.drag{opacity:.4} .op-card.over{border-style:dashed; border-color:var(--brand)}
.op-th{aspect-ratio:1/1.3; display:grid; place-items:center}
.op-th img{max-width:100%; max-height:100%; background:#fff; box-shadow:0 1px 3px rgba(11,22,51,.18), 0 6px 16px -8px rgba(11,22,51,.25); border-radius:2px}
.op-ft{display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--ink-3); min-height:24px}
.op-acts{display:flex; gap:1px; opacity:0; transition:opacity .15s}
.op-card:hover .op-acts,.op-card.on .op-acts{opacity:1}
.op-acts button{width:24px; height:24px; border:0; background:none; border-radius:6px; display:grid; place-items:center; color:var(--ink-3); cursor:pointer}
.op-acts button:hover{background:var(--panel-2); color:var(--ink)}
.op-one{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; overflow:auto; padding:24px 24px 70px}
.op-one[hidden]{display:none}
.op-canvas{position:relative; box-shadow:0 1px 3px rgba(11,22,51,.2), 0 12px 32px -12px rgba(11,22,51,.3); background:#fff; margin:auto}
.op-canvas canvas{display:block} .op-canvas .op-ov{position:absolute; left:0; top:0; touch-action:none; cursor:crosshair}
.op-canvas .oe-txt{font-weight:600}
.op-nav{position:fixed; bottom:44px; left:calc(var(--oa-rail) + (100vw - var(--oa-rail) - var(--oa-panel)) / 2); transform:translateX(-50%); display:flex; align-items:center; gap:4px; background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:4px; box-shadow:var(--pop); z-index:3}
.op-nav button{width:30px; height:30px; border:0; background:none; border-radius:50%; display:grid; place-items:center; cursor:pointer; color:var(--ink-2)}
.op-nav button:hover{background:var(--panel-2)} .op-nav b{font-size:12.5px; min-width:56px; text-align:center; font-variant-numeric:tabular-nums}
.op-drop{display:none; align-items:center; justify-content:center; gap:6px; margin:0 26px 30px; padding:14px; border:1.5px dashed var(--line); border-radius:12px; font-size:13px; color:var(--ink-3)}
.oe-pdf.op-g .op-drop{display:flex}
/* ── 표 편집기 ── */
.oe-sheet{display:flex; flex-direction:column; background:var(--panel)}
.os-bar{display:flex; align-items:center; gap:8px; height:38px; padding:0 10px; border-bottom:1px solid var(--line); flex:none}
.os-addr{min-width:78px; font-size:12.5px; font-weight:700; color:var(--ink-2); font-variant-numeric:tabular-nums}
.os-fx{font-style:italic; font-weight:700; color:var(--ink-3); font-size:13px; font-family:Georgia,serif}
.os-input{flex:1; height:28px; border:1px solid var(--line); border-radius:7px; padding:0 8px; font:inherit; font-size:13px; background:var(--panel); color:var(--ink); font-family:var(--mono)}
.os-tabs{display:flex; gap:2px; padding:4px 8px 0; border-bottom:1px solid var(--line); flex:none; overflow-x:auto}
.os-tabs[hidden]{display:none}
.os-tabs button{border:0; background:none; padding:6px 12px; font-size:12.5px; font-weight:650; color:var(--ink-3); border-radius:7px 7px 0 0; cursor:pointer}
.os-tabs button.on{background:var(--oa-stage); color:var(--ink)}
.os-scroll{position:relative; flex:1; overflow:auto; outline:0; min-height:0}
.os-space{position:absolute; left:0; top:0; pointer-events:none}
.os-view{position:absolute; left:0; top:0; font-size:13px}
.os-c,.os-ch,.os-rh,.os-corner{position:absolute; height:30px; line-height:29px; padding:0 8px; border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:var(--panel); cursor:cell; box-sizing:border-box}
.os-c.n{text-align:right; font-variant-numeric:tabular-nums}
.os-c.h{font-weight:700; background:var(--panel-2)}
.os-c.s{background:var(--brand-soft)}
.os-c.f{box-shadow:inset 0 0 0 2px var(--brand); z-index:1}
.os-ch{z-index:3; text-align:center; font-size:11.5px; font-weight:700; color:var(--ink-3); background:var(--panel-2); cursor:s-resize}
.os-rh{z-index:2; width:52px; text-align:center; font-size:11.5px; color:var(--ink-3); background:var(--panel-2); cursor:e-resize; font-variant-numeric:tabular-nums}
.os-ch.on,.os-rh.on{background:var(--brand-soft); color:var(--brand-ink)}
.os-corner{z-index:4; width:52px; background:var(--panel-2)}
.os-edit{position:absolute; z-index:5; height:30px; border:2px solid var(--brand); padding:0 7px; font:inherit; font-size:13px; background:var(--panel); color:var(--ink); outline:0; box-shadow:var(--pop)}
.os-stats{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.os-stats div{padding:8px 10px; border-radius:9px; background:var(--panel-2); display:flex; flex-direction:column; gap:1px}
.os-stats span{font-size:11.5px; color:var(--ink-3)} .os-stats b{font-size:14px; font-variant-numeric:tabular-nums; word-break:break-all}
.os-stats .big b{font-size:19px; letter-spacing:-.02em}
/* ── 글 편집기 ── */
.oe-text{display:flex; justify-content:center; overflow:auto; padding:28px 20px}
.ot-area{width:min(860px,100%); min-height:calc(100% - 4px); border:1px solid var(--line); border-radius:6px; background:var(--panel); color:var(--ink); padding:40px 48px; font:inherit; font-size:15.5px; line-height:1.8; resize:none; outline:0; box-shadow:0 1px 3px rgba(11,22,51,.08); field-sizing:content}
/* ── HWP 문서 ── */
.oe-doc{overflow:auto}
.od-pages{display:flex; flex-direction:column; align-items:center; gap:22px; padding:28px 20px 60px; --z:1}
.od-sheet{background:#fff; box-shadow:0 1px 3px rgba(11,22,51,.2), 0 12px 32px -12px rgba(11,22,51,.3); line-height:0}
.od-sheet svg{width:calc(794px * var(--z)); max-width:none; height:auto}
.od-plain{background:var(--panel); padding:32px; max-width:860px; white-space:pre-wrap; font:inherit; line-height:1.8}

/* ── 휴대폰·좁은 화면 ── */
@media (max-width:860px){
  .oa{grid-template-rows:var(--oa-top) auto 1fr 60px 26px}
  .oa-bn,.oa-add span,.oa-export span{display:none}
  .oa-brand{padding-right:6px; margin-right:0} .oa-tabs{flex:1 1 auto} .oa-tab{padding:0 4px 0 6px} .oa-tab:not(.on) .oa-tn{display:none} .oa-tab.on .oa-tn{max-width:92px}
  .oa-event{font-size:12px; padding:6px 10px} .oa-event span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .oa-undo,.oa-redo{min-width:30px; padding:0 4px}
  .oa-export{padding:0 10px}
  .oa-ptoggle{display:inline-flex}
  .oa-body{grid-template-columns:1fr; grid-row:3}
  .oa-rail{position:fixed; left:0; right:0; bottom:26px; height:60px; flex-direction:row; justify-content:flex-start; padding:4px 6px; border-right:0; border-top:1px solid var(--line); overflow-x:auto; overflow-y:hidden; z-index:6}
  .oa-tool{width:58px; min-height:50px; flex:none}
  .oa-sep{width:1px; height:28px; margin:0 3px}
  .oa-panel{position:fixed; left:0; right:0; bottom:86px; height:min(58vh,520px); border-left:0; border-top:1px solid var(--line); border-radius:16px 16px 0 0; box-shadow:0 -12px 32px -12px rgba(11,22,51,.3); transform:translateY(calc(100% + 90px)); transition:transform .22s ease; z-index:7}
  .oa.oa-pshow .oa-panel{transform:none}
  .oa.oa-pshow .oa-ptoggle{background:var(--brand-soft); color:var(--brand-ink)}
  .oa-status{grid-row:5; gap:8px} .oa-lock{font-size:0} .oa-lock svg{width:14px}
  .op-nav{left:50%; bottom:98px}
  .op-grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); padding:16px; gap:14px 10px}
  .op-acts{opacity:1}
  .ot-area{padding:24px 18px}
  .oe-cropbar{bottom:12px}
}
.oa-mrow{display:flex; align-items:center; gap:4px} .oa-mrow input{width:16px; height:16px; accent-color:var(--brand); flex:none; margin-left:6px} .oa-mrow button{flex:1}
.oa-btn.on{border-color:var(--brand); color:var(--brand-ink)!important; background:var(--brand-soft)}
.oa-sw button,.oa-padc button{width:24px; height:24px} .oa-swc{width:24px; height:24px}

/* ── PRO 배지: 남색 바탕 + 금색 별 + 금색 글자 ── */
.oa-pro{display:inline-flex; align-items:center; gap:3px; height:17px; padding:0 6px 0 5px; border-radius:5px; background:#1b2340; color:#f2c14e; font-size:9.5px; font-weight:850; letter-spacing:.09em; margin-left:6px; line-height:1; cursor:help; box-shadow:inset 0 0 0 1px rgba(242,193,78,.35); vertical-align:middle; flex:none}
.oa-pro svg{width:8px; height:8px; fill:#f2c14e}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oa-pro{background:#2a3150} }
.oa-event .oa-pro{margin:0 4px 0 0}
.oa-dot{background:#f2c14e; box-shadow:0 0 0 2px var(--panel)}
.ol-feat .oa-pro{vertical-align:2px}
/* ── 새로 만들기·도구 버튼 ── */
.oa-nw{position:relative; flex:none}
.oa-newmenu{left:0; right:auto; width:250px}
.oa-menu b svg{flex:none; color:var(--ink-3)}
.oa-msep{display:block; height:1px; background:var(--line); margin:4px 6px}
.oa-toolsbtn{border:1px solid var(--line)!important}
/* ── 도구 모음 서랍 ── */
.oa-drawer{position:fixed; inset:0; z-index:25; background:rgba(11,15,26,.35); display:flex; justify-content:flex-start}
.oa-drawer[hidden]{display:none}
.oa-dbox{width:min(460px,100%); height:100%; background:var(--panel); box-shadow:var(--pop); display:flex; flex-direction:column; animation:oadr .18s ease-out}
@keyframes oadr{from{transform:translateX(-24px); opacity:0}}
.oa-dhead{display:flex; align-items:center; justify-content:space-between; padding:14px 14px 6px 18px} .oa-dhead b{font-size:16px}
.oa-dsearch{display:flex; align-items:center; gap:8px; margin:6px 16px 8px; padding:0 12px; height:40px; border:1px solid var(--line); border-radius:11px; color:var(--ink-3)}
.oa-dsearch input{flex:1; border:0; outline:0; background:none; font:inherit; font-size:14px; color:var(--ink)}
.oa-dlist{flex:1; overflow-y:auto; padding:4px 16px 24px}
.oa-dlist h4{margin:14px 2px 8px; font-size:12px; color:var(--ink-3); font-weight:750}
.oa-tcs{display:flex; flex-direction:column; gap:4px}
.oa-tc{display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:10px; width:100%; text-align:left; border:1px solid transparent; background:none; border-radius:10px; padding:8px; cursor:pointer}
.oa-tc:hover{background:var(--panel-2); border-color:var(--line)}
.oa-tc .ic{width:34px; height:34px; border-radius:9px; background:var(--brand-soft); color:var(--brand); display:grid; place-items:center}
.oa-tc .ic svg{width:18px; height:18px}
.oa-tc b{display:block; font-size:13.5px; font-weight:700} .oa-tc small{display:block; font-size:12px; color:var(--ink-3); line-height:1.4; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.oa-tc em{font-style:normal; font-size:10.5px; font-weight:750; color:var(--brand-ink); background:var(--brand-soft); padding:3px 7px; border-radius:999px; white-space:nowrap}
.oa-pp .oa-tc small{white-space:normal}
/* ── 도구 탭(틀) ── */
.oa.oa-toolmode .oa-body{grid-template-columns:1fr}
.oa.oa-toolmode .oa-rail,.oa.oa-toolmode .oa-panel{display:none}
.oa.oa-toolmode .oa-undo,.oa.oa-toolmode .oa-redo,.oa.oa-toolmode .oa-ptoggle{visibility:hidden}
.oe-tool{background:var(--bg)} .oe-tool iframe{width:100%; height:100%; border:0; display:block; background:var(--bg)}
.oa-tab.tl .oa-tk{background:var(--mint-soft); color:var(--mint-ink)} .oa-tab.tl.on .oa-tk{background:var(--mint-ink); color:#fff}
.oa-snack{position:fixed; left:50%; bottom:46px; transform:translateX(-50%); z-index:31; display:flex; align-items:center; gap:10px; background:var(--ink); color:var(--panel); padding:8px 8px 8px 16px; border-radius:12px; box-shadow:var(--pop); font-size:13px; max-width:calc(100vw - 24px)}
.oa-snack[hidden]{display:none}
.oa-snack span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.oa-snack button{border:0; border-radius:8px; background:var(--brand); color:#fff!important; font-weight:700!important; padding:7px 12px; cursor:pointer; white-space:nowrap}
.oa-snack .oa-sx{background:none; padding:4px; display:grid; place-items:center; opacity:.7}
/* ── 프레젠테이션 편집기 ── */
.oe-ppt{display:grid; grid-template-columns:180px 1fr}
.pp-list{overflow-y:auto; padding:14px 12px 30px; display:flex; flex-direction:column; gap:12px; border-right:1px solid var(--line); background:var(--panel)}
.pp-th{display:grid; grid-template-columns:18px 1fr; gap:6px; align-items:start; border:0; background:none; padding:0; cursor:pointer; text-align:left}
.pp-th b{font-size:11px; color:var(--ink-3); font-weight:700; padding-top:2px; text-align:right}
.pp-th canvas{width:100%; height:auto; border-radius:4px; box-shadow:0 0 0 1px var(--line); background:#fff}
.pp-th.on canvas{box-shadow:0 0 0 2.5px var(--brand)}
.pp-main{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:auto; padding:20px}
.pp-slide{position:relative; box-shadow:0 1px 3px rgba(11,22,51,.2), 0 16px 40px -16px rgba(11,22,51,.35); outline:0; flex:none; user-select:none}
.pp-el{position:absolute; box-sizing:border-box; cursor:move}
.pp-el:hover{box-shadow:0 0 0 1px rgba(36,87,230,.5)}
.pp-el.on{box-shadow:0 0 0 2px var(--brand)}
.pp-el img{width:100%; height:100%; object-fit:fill; display:block; pointer-events:none}
.pp-el i{position:absolute; width:10px; height:10px; background:#fff; border:2px solid var(--brand); border-radius:3px; z-index:2}
.pp-el i[data-h="nw"]{left:-6px; top:-6px; cursor:nwse-resize} .pp-el i[data-h="ne"]{right:-6px; top:-6px; cursor:nesw-resize} .pp-el i[data-h="sw"]{left:-6px; bottom:-6px; cursor:nesw-resize} .pp-el i[data-h="se"]{right:-6px; bottom:-6px; cursor:nwse-resize}
.pp-tx{width:100%; height:100%; padding:.1in; box-sizing:border-box; line-height:1.2; white-space:pre-wrap; word-break:keep-all; overflow-wrap:anywhere; font-family:-apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Malgun Gothic", sans-serif; outline:0}
.pp-tx[contenteditable="true"]{cursor:text; user-select:text; background:rgba(255,255,255,.35)}
.pp-hint{margin:12px 0 0; font-size:12px; color:var(--ink-3)}
.oa-sw button.none{background:var(--panel); position:relative; overflow:hidden} .oa-sw button.none::after{content:""; position:absolute; left:50%; top:-2px; bottom:-2px; width:2px; background:#e5484d; transform:rotate(45deg)}
/* ── 문서 편집기 ── */
.oe-doc{display:flex; flex-direction:column}
.od-bar{display:flex; align-items:center; gap:2px; padding:6px 10px; background:var(--panel); border-bottom:1px solid var(--line); flex:none; overflow-x:auto; scrollbar-width:none}
.od-bar[hidden]{display:none}
.od-bar button{min-width:34px; height:32px; border:0; background:none; border-radius:7px; font-size:13.5px; font-weight:650; color:var(--ink-2); cursor:pointer; padding:0 8px; white-space:nowrap}
.od-bar button:hover{background:var(--panel-2); color:var(--ink)}
.od-bar i{width:1px; height:20px; background:var(--line); margin:0 4px; flex:none}
.od-edit{flex:1; overflow:auto; padding:28px 20px 60px; display:flex; justify-content:center}
.od-edit[hidden]{display:none}
.od-page{--z:1; width:calc(794px * var(--z)); min-height:calc(1123px * var(--z)); box-sizing:border-box; padding:calc(76px * var(--z)) calc(80px * var(--z)); background:#fff; color:#111; box-shadow:0 1px 3px rgba(11,22,51,.2), 0 12px 32px -12px rgba(11,22,51,.3); outline:0; font-size:calc(15px * var(--z)); line-height:1.75; font-family:-apple-system, "Apple SD Gothic Neo", "Pretendard", "Malgun Gothic", sans-serif; flex:none}
.od-page h1{font-size:1.9em; margin:.2em 0 .5em} .od-page h2{font-size:1.5em; margin:.8em 0 .4em} .od-page h3{font-size:1.2em; margin:.8em 0 .3em}
.od-page p{margin:0 0 .6em} .od-page img{max-width:100%; height:auto}
.od-page table{border-collapse:collapse; width:100%; margin:.6em 0} .od-page td,.od-page th{border:1px solid #9aa0ad; padding:.35em .5em; min-width:2em; vertical-align:top}
.od-pages[hidden]{display:none}
.od-empty{margin:40px auto; color:var(--ink-3)}
@media (max-width:860px){ .oe-ppt{grid-template-columns:1fr; grid-template-rows:96px 1fr} .pp-list{flex-direction:row; overflow-x:auto; overflow-y:hidden; border-right:0; border-bottom:1px solid var(--line); padding:10px} .pp-th{width:120px; flex:none} .od-page{width:100%; padding:28px 20px; min-height:0} .oa-toolsbtn span{display:none} .oa-dbox{width:100%} }
.ol-new{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:18px}
.ol-new span{font-size:12.5px; font-weight:750; color:var(--ink-3); margin-right:4px}
.ol-new button{height:34px; padding:0 13px; border-radius:9px; border:1px solid var(--line); background:var(--panel); font:inherit; font-size:13px; font-weight:700; color:var(--ink); cursor:pointer; display:inline-flex; align-items:center; gap:6px}
.ol-new button:hover{border-color:var(--brand); color:var(--brand-ink)}
.ol-new button.tl{background:var(--ink); color:var(--panel); border-color:var(--ink)} .ol-new .ic svg{width:15px; height:15px}