:root{
  --paper:#F1F3F9; --card:#FFFFFF; --ink:#191E36; --muted:#5B6382; --line:#DDE1EF;
  --accent:#2F3C7E; --accent-soft:#E6E9F8; --star:#B07818; --star-soft:#F8EDD6;
  --ok:#2C6B4F; --warn:#8E5312; --shadow:0 1px 2px rgba(25,30,54,.06);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0F1220; --card:#191D2E; --ink:#E8EAF5; --muted:#98A0BE; --line:#2A3048;
    --accent:#A3B2F2; --accent-soft:#222847; --star:#E8B45F; --star-soft:#2C2517;
    --ok:#7CC29D; --warn:#DDA55F; --shadow:none; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0F1220; --card:#191D2E; --ink:#E8EAF5; --muted:#98A0BE; --line:#2A3048;
  --accent:#A3B2F2; --accent-soft:#222847; --star:#E8B45F; --star-soft:#2C2517;
  --ok:#7CC29D; --warn:#DDA55F; --shadow:none; color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:"Noto Sans KR","Apple SD Gothic Neo",system-ui,sans-serif;
  font-size:15px; line-height:1.7; -webkit-text-size-adjust:100%;
}
.wrap{max-width:880px; margin:0 auto; padding-inline:20px; padding-block:36px 80px}
h1,h2,h3{font-family:"Gowun Batang","Noto Sans KR",serif; font-weight:700; text-wrap:balance; margin:0}
h1{font-size:2.05rem; line-height:1.3; letter-spacing:-.01em}
h2{font-size:1.3rem; margin-bottom:4px}
.eyebrow{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:700}
.sub{color:var(--muted); margin-top:10px; max-width:62ch}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}

/* header */
header.hd{border-bottom:2px solid var(--ink); padding-bottom:22px}
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:2px 22px; margin-top:22px}
.fact{padding:10px 0; border-top:1px solid var(--line)}
.fact dt{font-size:.72rem; letter-spacing:.12em; color:var(--muted); font-weight:700; text-transform:uppercase}
.fact dd{margin:2px 0 0; font-weight:500}

/* toolbar */
.bar{position:sticky; top:0; z-index:20; background:var(--paper); display:flex; flex-wrap:wrap; gap:8px; align-items:center;
     padding-block:10px; margin-bottom:4px; border-bottom:1px solid var(--line)}
button{font:inherit; font-size:.85rem; font-weight:500; cursor:pointer; border:1px solid var(--line);
       background:var(--card); color:var(--ink); border-radius:7px; padding:6px 13px}
button:hover{border-color:var(--accent); color:var(--accent)}
button.primary{background:var(--accent); border-color:var(--accent); color:var(--card)}
button.primary:hover{opacity:.88; color:var(--card)}
button:focus-visible,[contenteditable]:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.status{font-size:.8rem; color:var(--muted); margin-left:auto}

section{margin-top:44px}
.shead{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:18px}
.shead .note{font-size:.82rem; color:var(--muted)}

/* timeline */
.day{margin-top:34px}
.daytag{display:inline-flex; align-items:baseline; gap:10px; padding:5px 0 7px; border-bottom:1px solid var(--ink); width:100%}
.daytag b{font-family:"Gowun Batang",serif; font-size:1.15rem}
.daytag span{color:var(--muted); font-size:.85rem}
.tl{margin-top:6px}
.row{display:grid; grid-template-columns:64px 1fr; gap:0 18px; position:relative; padding:13px 0; border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row .t{color:var(--muted); font-size:.88rem; padding-top:1px}
.row .body{min-width:0}
.row .ttl{font-weight:500}
.row .meta{font-size:.83rem; color:var(--muted); margin-top:2px}
.row.key{background:var(--accent-soft); margin-inline:-14px; padding-inline:14px; border-radius:8px; border-bottom-color:transparent}
.row.key .t{color:var(--accent); font-weight:700}
.row.key .ttl{font-family:"Gowun Batang",serif; font-size:1.12rem; font-weight:700}
.row.star{background:var(--star-soft); margin-inline:-14px; padding-inline:14px; border-radius:8px; border-bottom-color:transparent}
.row.star .t{color:var(--star); font-weight:700}
.tag{display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.06em; padding:2px 7px; border-radius:999px; vertical-align:2px; margin-left:7px}
.tag.must{background:var(--accent); color:var(--card)}
.tag.check{background:transparent; color:var(--warn); border:1px solid var(--warn)}
.tag.move{background:transparent; color:var(--muted); border:1px solid var(--line)}

/* lists */
.list{display:flex; flex-direction:column}
.item{display:grid; grid-template-columns:22px 1fr; gap:0 10px; padding:8px 0; border-bottom:1px solid var(--line); align-items:start}
.item:last-child{border-bottom:0}
.chk{width:17px; height:17px; margin-top:5px; border:1.5px solid var(--muted); border-radius:5px; cursor:pointer; background:transparent; padding:0; flex:none}
.chk:hover{border-color:var(--accent)}
.item.done .chk{background:var(--ok); border-color:var(--ok); position:relative}
.item.done .chk::after{content:"✓"; color:#fff; font-size:12px; position:absolute; inset:0; display:grid; place-items:center; line-height:1}
.item.done .txt{color:var(--muted); text-decoration:line-through}
.item .sub2{display:block; font-size:.83rem; color:var(--muted)}
.grp{font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:700; margin:20px 0 4px}
.grp:first-child{margin-top:0}

/* table-ish */
.grid3{display:grid; grid-template-columns:1fr 1fr 1.4fr; gap:0 16px}
.grid3 .hrow{font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:700; padding-bottom:6px; border-bottom:1px solid var(--ink)}
.grid3 .c{padding:9px 0; border-bottom:1px solid var(--line); min-width:0; overflow-wrap:anywhere}
.money{text-align:right}

/* callouts */
.panel{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:18px 20px; box-shadow:var(--shadow)}
.panel + .panel{margin-top:12px}
.panel h3{font-size:1rem; margin-bottom:6px}
.panel p{margin:0; color:var(--muted); font-size:.9rem}
.rules{margin:0; padding-left:1.1em; color:var(--muted); font-size:.9rem}
.rules li{margin:3px 0}
.links{display:flex; flex-wrap:wrap; gap:8px 14px; font-size:.86rem; margin-top:10px}
.links a{color:var(--accent)}

/* editing */
.ed{border-radius:3px}
[contenteditable="true"].ed:hover{background:var(--accent-soft)}
[contenteditable="true"].ed:empty::before{content:"입력"; color:var(--muted); opacity:.6}
.del{position:absolute; right:-6px; top:10px; opacity:0; border:0; background:transparent; color:var(--muted); padding:2px 6px; font-size:1rem; line-height:1}
.row:hover .del,.item:hover .del{opacity:1}
.item{position:relative}
.add{margin-top:10px; font-size:.82rem; color:var(--muted); border-style:dashed}
footer{margin-top:56px; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:.82rem}

@media (max-width:560px){
  .wrap{padding-block:26px 60px}
  h1{font-size:1.6rem}
  .row{grid-template-columns:1fr; gap:2px}
  .row .t{font-weight:700; color:var(--ink)}
  .grid3{grid-template-columns:1fr 1fr; }
  .grid3 .c:nth-child(3n){grid-column:1/-1; padding-top:0; border-top:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}
@media print{
  body{background:#fff; color:#000; font-size:11pt}
  .bar,.del,.add,button{display:none!important}
  .wrap{max-width:none; padding:0}
  section{break-inside:avoid; margin-top:22px}
  .row.key,.row.star{background:transparent; border:1px solid #999}
}

/* ── 서버판 추가 스타일 ─────────────────────────────── */
.item{position:relative}
.tabs{display:flex; gap:6px; flex-wrap:wrap}
.tabs button[aria-selected="true"]{background:var(--accent); border-color:var(--accent); color:var(--card)}
.hist{display:grid; grid-template-columns:auto 1fr auto; gap:0 14px; align-items:center}
.hist .hc{padding:10px 0; border-bottom:1px solid var(--line); min-width:0; overflow-wrap:anywhere}
.hist .when{font-size:.82rem}
.hist .who{font-weight:500}
.hist .who span{display:block; font-size:.83rem; color:var(--muted); font-weight:400}
.hist .act{display:flex; gap:6px; justify-content:flex-end}
.hist .act button{padding:4px 10px; font-size:.78rem}
.hist .now{font-size:.68rem; font-weight:700; letter-spacing:.06em; padding:2px 7px; border-radius:999px; background:var(--accent); color:var(--card)}
.filerow{display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line)}
.filerow:last-child{border-bottom:0}
.filerow .fn{font-weight:500; overflow-wrap:anywhere}
.filerow .fm{font-size:.82rem; color:var(--muted)}
.drop{margin-top:12px; border:1.5px dashed var(--line); border-radius:10px; padding:16px; text-align:center; color:var(--muted); font-size:.86rem}
.drop.on{border-color:var(--accent); color:var(--accent)}
dialog{border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink); padding:22px; max-width:min(420px,92vw); box-shadow:0 12px 40px rgba(10,14,30,.28)}
dialog::backdrop{background:rgba(10,14,30,.45)}
dialog h3{font-size:1.05rem; margin-bottom:10px}
dialog label{display:block; font-size:.8rem; color:var(--muted); font-weight:700; letter-spacing:.06em; margin:12px 0 4px}
dialog input{width:100%; font:inherit; font-size:.92rem; padding:8px 10px; border:1px solid var(--line); border-radius:7px; background:var(--paper); color:var(--ink)}
dialog .drow{display:flex; gap:8px; justify-content:flex-end; margin-top:18px}
dialog .err{color:#C0392B; font-size:.83rem; margin-top:10px; min-height:1.2em}
.banner{margin-top:14px; padding:10px 14px; border-radius:8px; background:var(--star-soft); color:var(--star); font-size:.86rem; font-weight:500;
        display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.banner button{padding:4px 10px; font-size:.78rem}
.ro .del,.ro .add{display:none!important}
@media (max-width:560px){ .hist{grid-template-columns:1fr auto} .hist .when{grid-column:1/-1; color:var(--muted)} }
@media print{ .tabs,.drop,.banner,dialog{display:none!important} }

.btnlink{display:inline-block; font-size:.85rem; font-weight:500; text-decoration:none;
  border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:7px; padding:6px 13px; white-space:nowrap}
.btnlink:hover{border-color:var(--accent); color:var(--accent)}
.hist .who .now{display:inline-block; width:auto; vertical-align:1px}

/* 엑셀 뷰어 — 표를 엑셀처럼 보고 고친다 */
#viewer{margin-top:16px; border:1px solid var(--line); border-radius:10px; background:var(--card); overflow:hidden}
.vhead{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px;
  border-bottom:1px solid var(--line); flex-wrap:wrap}
.vhead b{font-family:"Gowun Batang",serif; font-size:1rem}
.vact{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.vnote{font-size:.8rem; color:var(--muted)}
.vtabs{padding:10px 16px 0}
.filerow .fbtn{display:flex; gap:6px; align-items:center; white-space:nowrap}

.sheetbox{overflow:auto; max-height:min(70vh,620px); overscroll-behavior:contain; border-top:1px solid var(--line)}
/* sticky 는 스크롤 컨테이너의 안쪽 여백을 무시하고 붙는다 — 여기에 좌우 패딩을 주면
   가로로 스크롤할 때 고정된 행머리가 패딩 자리를 파고들어 왼쪽이 어긋나 보인다. 그래서 0. */
table.sheet{border-collapse:separate; border-spacing:0; table-layout:fixed; font-size:.84rem; background:var(--card)}
table.sheet th,table.sheet td{border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:5px 8px; text-align:left; vertical-align:top; overflow-wrap:anywhere}
/* 칸 안쪽 래퍼. <td> 에 높이를 주면 내용 높이가 최소값이 돼서 행을 줄일 수 없다.
   래퍼에 높이를 주고 넘치는 건 잘라야 엑셀처럼 행 높이가 그대로 먹는다. */
table.sheet td{padding:0}
table.sheet td .cc{padding:5px 8px; overflow:hidden; height:var(--rh, auto)}

/* 열머리(A·B·C) · 행머리(1·2·3) — 스크롤해도 붙어 있는다 */
table.sheet colgroup col.gut{width:44px}
table.sheet thead th{position:sticky; top:0; z-index:2; background:var(--accent-soft); color:var(--accent);
  font-weight:700; text-align:center; font-size:.72rem; letter-spacing:.04em; white-space:nowrap;
  border-top:1px solid var(--line)}
table.sheet th.rh{position:sticky; left:0; z-index:1; background:var(--accent-soft); color:var(--accent);
  font-weight:600; text-align:center; font-size:.72rem; white-space:nowrap;
  box-shadow:1px 0 0 var(--line)}
table.sheet th.corner{position:sticky; left:0; top:0; z-index:3; box-shadow:1px 0 0 var(--line)}
table.sheet tbody tr:nth-child(even) td{background:color-mix(in srgb, var(--paper) 55%, transparent)}
table.sheet td.num{text-align:right; font-variant-numeric:tabular-nums}
table.sheet td.fx{background:color-mix(in srgb, var(--star-soft) 70%, transparent)}
table.sheet td.chg{background:color-mix(in srgb, var(--ok) 16%, transparent);
  box-shadow:inset 2px 0 0 var(--ok)}
table.sheet.live td{cursor:text}
table.sheet.live .cc:focus{outline:2px solid var(--accent); outline-offset:-2px;
  background:var(--card); white-space:pre-wrap; overflow-wrap:break-word;
  overflow:auto}                                        /* 잘려 있어도 고칠 땐 안에서 스크롤된다 */

/* 끌어서 열 너비 · 행 높이 조정 */
.grip{position:absolute; touch-action:none; border-radius:2px}
.grip:hover,.grip:active{background:var(--accent)}
th.ch .cgrip{top:0; right:-4px; width:8px; height:100%; cursor:col-resize}
th.rh .rgrip{left:0; bottom:-4px; height:8px; width:100%; cursor:row-resize}
body.rz-col,body.rz-col *{cursor:col-resize!important; user-select:none}
body.rz-row,body.rz-row *{cursor:row-resize!important; user-select:none}