:root{--bg:#eef1f5;--card:#fff;--ink:#1b2230;--sub:#5f6878;--line:#dde2ea;--soft:#f4f6f9;--top:#1d3a5f;--ac:#2b6fd6;--w:#2b5797;--x:#1e7145;--sel:#1a73e8;--selbg:rgba(26,115,232,.1);--grid:#e2e5ea;--head:#f3f4f7;--paper:#fff;--paperInk:#1b1b1b}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#14171d;--card:#1d2129;--ink:#e8ebf1;--sub:#a0a8b6;--line:#2e343f;--soft:#262b34;--top:#16263c;--grid:#2c313b;--head:#232831;--selbg:rgba(80,150,255,.18)}}
:root[data-theme=dark]{--bg:#14171d;--card:#1d2129;--ink:#e8ebf1;--sub:#a0a8b6;--line:#2e343f;--soft:#262b34;--top:#16263c;--grid:#2c313b;--head:#232831;--selbg:rgba(80,150,255,.18)}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;display:flex;flex-direction:column;word-break:keep-all;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
button,input,select,textarea{font:inherit;color:inherit}
.hide{display:none!important}
.muted{color:var(--sub);font-size:13px}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
svg .f{fill:currentColor;stroke:none}svg .f2{fill:currentColor;stroke:none;opacity:.35}svg .d{stroke-dasharray:2 2}
svg .t{fill:currentColor;stroke:none;font:700 8px sans-serif}

/* 상단 */
.top{display:flex;align-items:center;gap:8px;padding:8px 12px;padding-top:max(8px,env(safe-area-inset-top));background:var(--top);color:#fff;flex:none;min-height:52px}
.iconbtn{display:none;align-items:center;justify-content:center;width:36px;height:36px;border:0;border-radius:10px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;flex:none}
body.editing .iconbtn{display:flex}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:16px;flex:1;min-width:0;white-space:nowrap}
.logo{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;background:#fff;color:var(--top);font-weight:900;font-size:14px}
body.editing .brand{display:none}
.fname{flex:1;min-width:0;padding:6px 8px;border:1px solid transparent;border-radius:8px;background:transparent;color:#fff;font-size:15px;font-weight:600;text-overflow:ellipsis}
.fname:focus{outline:0;border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.08)}
.savestate{font-size:12px;opacity:.7;white-space:nowrap;flex:none}
.topbtns{display:flex;gap:6px;flex:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);cursor:pointer;font-weight:700;font-size:14px;white-space:nowrap}
.top .btn{background:#fff;border-color:#fff;color:var(--top)}
.btn.wide{width:100%;padding:12px}
main{flex:1;min-height:0;display:flex;flex-direction:column}

/* 처음 화면 */
.home{flex:1;overflow:auto;padding:20px 16px calc(28px + env(safe-area-inset-bottom))}
.homein{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.newrow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.newcard{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:18px 16px;border:1px solid var(--line);border-radius:16px;background:var(--card);cursor:pointer;text-align:left}
.newcard b{font-size:17px;margin-top:8px}.newcard small{color:var(--sub);font-size:13px}
.ficon{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;color:#fff;font-weight:900;font-size:18px;flex:none}
.ficon.w{background:var(--w)}.ficon.x{background:var(--x)}.ficon.t{background:#6b7280}
.openbtn{display:flex;align-items:center;gap:14px;padding:16px;border:2px dashed var(--line);border-radius:16px;background:var(--card);cursor:pointer}
.openbtn.over{border-color:var(--ac)}
.openbtn input{display:none}
.openbtn svg{width:30px;height:30px;color:var(--ac);flex:none}
.openbtn span{display:flex;flex-direction:column}.openbtn b{font-size:16px}.openbtn small{color:var(--sub);font-size:13px}
.sec{font-size:14px;color:var(--sub);margin:10px 2px 0;font-weight:700}
.recent{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.recent li{display:flex;align-items:center;gap:12px;padding:11px 12px;border-top:1px solid var(--line);cursor:pointer}
.recent li:first-child{border-top:0}
.recent .ficon{width:32px;height:32px;font-size:15px;border-radius:8px}
.recent .rn{flex:1;min-width:0}.recent .rn b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.recent .rn small{color:var(--sub);font-size:12px}
.recent .del{border:0;background:none;color:var(--sub);font-size:20px;padding:4px 8px;cursor:pointer}
.recent .none{color:var(--sub);font-size:14px;cursor:default;justify-content:center;padding:18px}
.note{text-align:center;margin-top:6px;line-height:1.7}

/* 도구줄 */
.pane{flex:1;min-height:0;display:flex;flex-direction:column}
.toolbar{display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--card);border-bottom:1px solid var(--line);flex:none;overflow-x:auto;scrollbar-width:none}
.toolbar::-webkit-scrollbar{display:none}
.grp{display:flex;align-items:center;gap:1px;flex:none;padding-right:6px;border-right:1px solid var(--line)}
.grp:last-child{border-right:0}
.grp button,.colorbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:0;border-radius:8px;background:none;cursor:pointer;font-size:16px;flex:none;color:var(--ink)}
.grp button:active,.grp button.on{background:var(--soft)}
.grp button.on{box-shadow:inset 0 0 0 1px var(--line)}
.sig{font-size:19px}
.toolbar select{height:36px;padding:0 6px;border:1px solid var(--line);border-radius:8px;background:var(--soft);flex:none;font-size:14px}
.colorbtn input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.colorbtn .cA{font-weight:700;line-height:1;margin-top:-6px}
.colorbtn svg{margin-top:-6px;width:18px;height:18px}
.colorbtn i{position:absolute;left:9px;right:9px;bottom:7px;height:4px;border-radius:2px}
.tablebar,.findbar{display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--soft);border-bottom:1px solid var(--line);flex:none;overflow-x:auto;scrollbar-width:none}
.findbar input{flex:1;min-width:110px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card)}
.chip{flex:none;padding:7px 11px;border:1px solid var(--line);border-radius:999px;background:var(--card);cursor:pointer;font-size:13px;font-weight:600;white-space:nowrap}
.chip.danger{color:#d6453d}
.chip.on{background:var(--ac);border-color:var(--ac);color:#fff}

/* Word 종이 */
.wscroll{flex:1;overflow:auto;padding:18px 0 calc(60px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}
.wpage{width:min(794px,calc(100% - 24px));min-height:min(1123px,calc(100vh - 140px));margin:0 auto;padding:72px 76px;background:var(--paper);color:var(--paperInk);box-shadow:0 1px 3px rgba(0,0,0,.12),0 6px 20px rgba(0,0,0,.06);border-radius:3px;outline:0;font-family:"Malgun Gothic","Apple SD Gothic Neo","Noto Sans KR",sans-serif;font-size:11pt;line-height:1.6;word-break:keep-all;overflow-wrap:anywhere;caret-color:var(--ac)}
.wpage p{margin:0 0 .45em}
.wpage h1{font-size:20pt;margin:.5em 0 .35em;line-height:1.3}.wpage h2{font-size:16pt;margin:.5em 0 .3em;line-height:1.35}.wpage h3{font-size:13pt;margin:.45em 0 .25em}
.wpage h4,.wpage h5,.wpage h6{font-size:11pt;margin:.4em 0 .2em}
.wpage ul,.wpage ol{margin:0 0 .45em;padding-left:1.8em}
.wpage table{border-collapse:collapse;width:100%;margin:.3em 0 .7em;table-layout:auto}
.wpage td,.wpage th{border:1px solid #9aa1ab;padding:4px 7px;vertical-align:top;min-width:30px}
.wpage td p,.wpage th p{margin:0}
.wpage img{max-width:100%;height:auto}
.wpage a{color:#1155cc}
.wpage hr{border:0;border-top:1px solid #bbb;margin:1em 0}
.wpage blockquote{margin:.4em 0;padding-left:1em;border-left:3px solid #ccd}
.wpage:empty:before{content:"여기에 입력하세요";color:#aaa}
.wpage img.picked{outline:2px solid var(--ac)}
@media (max-width:700px){
  .wscroll{padding:10px 0 calc(60px + env(safe-area-inset-bottom))}
  .wpage{width:calc(100% - 16px);padding:26px 20px;min-height:calc(100vh - 150px);font-size:12pt}
}
@media print{
  .top,.toolbar,.tablebar,.findbar,.toast{display:none!important}
  body,main,.pane,.wscroll{display:block;overflow:visible;background:#fff;padding:0;height:auto}
  .wpage{box-shadow:none;width:auto;min-height:0;padding:0;margin:0;color:#000}
  #home,#sheetPane{display:none!important}
}

/* Excel 격자 */
.fbar{display:flex;align-items:center;gap:6px;padding:5px 8px;background:var(--card);border-bottom:1px solid var(--line);flex:none}
.addr{min-width:54px;padding:6px 6px;border:1px solid var(--line);border-radius:7px;background:var(--soft);font-size:13px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums}
.fx{font-style:italic;color:var(--sub);font-weight:700;font-size:14px}
#sInput{flex:1;min-width:0;padding:7px 9px;border:1px solid var(--line);border-radius:7px;background:var(--soft);font-size:15px}
#sInput:focus{outline:0;border-color:var(--sel);background:var(--card)}
.okbtn{width:38px;height:34px;border:0;border-radius:7px;background:var(--sel);color:#fff;font-weight:800;cursor:pointer;flex:none}
.grid{position:relative;flex:1;min-height:0;overflow:auto;background:var(--card);outline:0;-webkit-overflow-scrolling:touch;font-family:"Malgun Gothic","Apple SD Gothic Neo","Noto Sans KR",sans-serif;font-size:13px}
.gsize{position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none}
.gcorner,.ghead,.gside{position:sticky;z-index:3;background:var(--head)}
.gcorner{top:0;left:0;z-index:5;border-right:1px solid var(--grid);border-bottom:1px solid var(--grid)}
.ghead{top:0;z-index:4}
.gside{left:0}
.hc,.sc{position:absolute;display:flex;align-items:center;justify-content:center;color:var(--sub);font-size:12px;border-right:1px solid var(--grid);border-bottom:1px solid var(--grid);user-select:none;background:var(--head)}
.hc.on,.sc.on{background:#dbe7fb;color:#1a4fa0;font-weight:700}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .hc.on,:root:not([data-theme=light]) .sc.on{background:#24395a;color:#cfe0ff}}
.hc .rs{position:absolute;right:-6px;top:0;bottom:0;width:12px;cursor:col-resize;z-index:2}
.gcells{position:absolute;top:0;left:0}
.c{position:absolute;padding:0 4px;border-right:1px solid var(--grid);border-bottom:1px solid var(--grid);overflow:hidden;white-space:nowrap;display:flex;align-items:center;line-height:1.25;background:var(--card)}
.c.wrap{white-space:pre-wrap;align-items:flex-start;word-break:break-all}
.c.va-t{align-items:flex-start}.c.va-m{align-items:center}.c.va-b{align-items:flex-end}
.c > span{flex:1;min-width:0;overflow:hidden;text-overflow:clip}
.c.ovf{overflow:visible;z-index:1}.c.ovf > span{overflow:visible}
.c.mg{z-index:1}
.selbox{position:absolute;border:2px solid var(--sel);background:var(--selbg);pointer-events:none;z-index:2}
.cur{position:absolute;border:2px solid var(--sel);pointer-events:none;z-index:2}
.cur .h{position:absolute;right:-5px;bottom:-5px;width:8px;height:8px;background:var(--sel);border:1px solid #fff}
.hit{position:absolute;outline:2px dashed #e8a200;pointer-events:none;z-index:2}
.ged{position:absolute;z-index:6;margin:0;padding:2px 4px;border:2px solid var(--sel);background:var(--card);color:var(--ink);resize:none;outline:0;font-size:13px;line-height:1.25;overflow:hidden;font-family:inherit;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.ged.parked{opacity:0;pointer-events:none;box-shadow:none;caret-color:transparent}
.sheets{display:flex;align-items:center;gap:6px;padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--line);flex:none}
.stabs{display:flex;gap:4px;overflow-x:auto;flex:1;min-width:0;scrollbar-width:none}
.stabs::-webkit-scrollbar{display:none}
.stabs button{flex:none;padding:6px 14px;border:1px solid transparent;border-radius:8px;background:none;cursor:pointer;color:var(--sub);font-weight:600;font-size:13px;white-space:nowrap}
.stabs button.on{background:var(--soft);border-color:var(--line);color:var(--x);box-shadow:inset 0 -2px 0 var(--x)}
.stat{font-size:12px;color:var(--sub);white-space:nowrap;flex:none;max-width:45%;overflow:hidden;text-overflow:ellipsis}

/* 저장 창·알림 */
.modal{position:fixed;inset:0;z-index:50;background:rgba(10,15,25,.45);display:flex;align-items:flex-end;justify-content:center}
@media (min-width:640px){.modal{align-items:center}}
.sheetbox{width:100%;max-width:440px;background:var(--card);border-radius:18px 18px 0 0;padding:18px 16px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px}
@media (min-width:640px){.sheetbox{border-radius:18px}}
.sheetbox h3{margin:0 0 2px;font-size:17px}
.savelist{display:flex;flex-direction:column;gap:8px}
.saveopt{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--soft);cursor:pointer;text-align:left}
.saveopt b{display:block;font-size:15px}.saveopt small{color:var(--sub);font-size:12px}
.saveopt .ficon{width:34px;height:34px;font-size:13px}
.toast{position:fixed;left:50%;bottom:calc(70px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;background:#1f2633;color:#fff;padding:10px 16px;border-radius:12px;font-size:14px;box-shadow:0 4px 16px rgba(0,0,0,.25);max-width:calc(100% - 32px);text-align:center}