:root{
  --ink:#16181a; --snow:#f4f4f0; --ground:#e4e4de; --gray:#b9b9b2; --dgray:#7d7d78;
  --green:#2e9e5b; --dgreen:#1d6e3e; --red:#d8383a;
  --font:'Galmuri11','Galmuri9','Noto Sans KR','Apple SD Gothic Neo',system-ui,monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:#1b1d1f;
  background-image:
    linear-gradient(45deg,#232628 25%,transparent 25%,transparent 75%,#232628 75%),
    linear-gradient(45deg,#232628 25%,transparent 25%,transparent 75%,#232628 75%);
  background-size:8px 8px; background-position:0 0,4px 4px;
  color:var(--ink); font-family:var(--font); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:none; font-smooth:never;
}
.desk{max-width:1000px;margin:0 auto;padding:18px 16px 40px;display:grid;gap:18px}

/* 맥 스타일 창 */
.win{background:var(--snow);border:2px solid var(--ink);box-shadow:5px 5px 0 #000, 5px 5px 0 1px var(--dgray)}
.bar{
  display:flex;align-items:center;gap:10px;height:26px;padding:0 8px;border-bottom:2px solid var(--ink);
  background:repeating-linear-gradient(0deg,var(--snow) 0 2px,var(--ink) 2px 3px);
}
.bar span{background:var(--snow);padding:0 8px;font-weight:700;letter-spacing:.02em}
.bar em{margin-left:auto;background:var(--snow);padding:0 6px;font-style:normal;color:var(--dgray);font-size:12px}
.close{width:14px;height:14px;border:2px solid var(--ink);background:var(--snow);display:inline-block;cursor:pointer}
.body{padding:14px 16px}

/* 상단 */
#hud-top .body{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center}
.q-title{font-size:12px;color:var(--dgray);margin-bottom:2px}
.q-big b{background:var(--ink);color:var(--snow);padding:1px 6px;margin-right:6px;font-size:12px}
.q-big span{font-size:16px;font-weight:700}
.sprints{display:flex;gap:6px}
.sp{width:34px;height:34px;border:2px solid var(--ink);background:var(--snow);display:grid;place-items:center;font-size:12px;position:relative}
.sp.now{outline:3px solid var(--ink);outline-offset:2px}
.sp.lit{background:var(--green);color:#fff}
.sp.broken{background:var(--red);color:#fff}
.sp.future{background:repeating-conic-gradient(var(--gray) 0 25%,var(--snow) 0 50%) 0 0/4px 4px;color:var(--ink)}
.sp.active{background:var(--snow)}
@media(max-width:640px){#hud-top .body{grid-template-columns:1fr}}

/* 무대 */
.stage .dock{display:flex;gap:10px;flex-wrap:wrap;padding:10px 12px;border-top:2px solid var(--ink);background:var(--ground)}
#scene{display:block;width:100%;height:auto;image-rendering:pixelated;image-rendering:crisp-edges;cursor:pointer;background:var(--ground)}

/* 버튼 */
.btn{
  font:inherit;cursor:pointer;background:var(--snow);color:var(--ink);padding:5px 12px;
  border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);
}
.btn:hover{background:var(--ink);color:var(--snow)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none;background:var(--ground);color:var(--ink)}
.btn.green{background:var(--green);color:#fff}
.btn.red{background:var(--red);color:#fff}
.btn.sm{padding:2px 8px;font-size:12px}

/* 스프린트 창 */
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.goal-title{font-size:18px;font-weight:700;margin:4px 0 8px}
.meta{color:var(--dgray);font-size:12px}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.chip{border:2px solid var(--ink);padding:3px 10px;background:var(--snow);display:flex;gap:8px;align-items:center}
.chip i{width:10px;height:10px;display:inline-block;border:2px solid var(--ink)}
.chip.ok i{background:var(--green)} .chip.fail i{background:var(--red)} .chip.wait i{background:var(--snow)}
.dither{height:14px;border:2px solid var(--ink);background:var(--snow);position:relative;overflow:hidden}
.dither>b{position:absolute;inset:0 auto 0 0;background:repeating-conic-gradient(var(--green) 0 25%,var(--snow) 0 50%) 0 0/4px 4px}
.note{background:var(--ground);border:2px dashed var(--dgray);padding:8px 10px;margin-top:10px;font-size:13px}

/* 모달 */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:grid;place-items:center;padding:16px;z-index:10}
.modal[hidden]{display:none}
.modal-win{width:min(560px,100%);max-height:88vh;overflow:auto}
.glist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.gitem{border:2px solid var(--ink);padding:8px 10px;display:grid;gap:4px;background:var(--snow)}
.gitem .top{display:flex;gap:8px;align-items:center}
.gitem .no{background:var(--ink);color:var(--snow);padding:0 6px;font-size:12px}
.gitem.lit{background:#e3f4ea} .gitem.broken{background:#f8dfdf}
.gitem input[type=text]{font:inherit;border:2px solid var(--ink);padding:3px 6px;width:100%;background:#fff}
.tag{font-size:11px;border:2px solid var(--ink);padding:0 5px}
.tag.lit{background:var(--green);color:#fff} .tag.broken{background:var(--red);color:#fff}
.sel{font:inherit;border:2px solid var(--ink);padding:2px 6px;background:#fff}
.foot{color:var(--dgray);font-size:12px;text-align:center}
.foot code{background:#000;color:#ddd;padding:1px 6px}
h4{margin:12px 0 6px;font-size:13px}
.tag{white-space:nowrap;flex-shrink:0}

/* ---- 추가: 세그먼트/입력/모달 넓게/집 내부 바/캘린더 ---- */
.btn.on{background:var(--ink);color:var(--snow)}
.seg{display:inline-flex;gap:6px}
input[type=text]{font:inherit;border:2px solid var(--ink);padding:3px 6px;background:#fff;color:var(--ink)}
.modal-win.wide{width:min(1040px,100%)}
.roombar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 12px;border-top:2px solid var(--ink);background:var(--snow)}
.roombar[hidden]{display:none}

.cal-head{margin-bottom:10px}
.cal-title{flex:1;min-width:0}
.cal-wrap{display:grid;grid-template-columns:190px 1fr;gap:12px;align-items:start}
@media(max-width:760px){.cal-wrap{grid-template-columns:1fr}}
.drawer{border:2px solid var(--ink);padding:8px;background:var(--ground);min-height:180px}
.drawer h4:first-child{margin-top:0}
.addbox{display:grid;gap:6px;margin-top:10px}
.addbox input{width:100%}
.board{overflow-x:auto}
.dow,.wrow{display:grid;gap:4px;min-width:640px}
.dow{grid-template-columns:repeat(5,1fr) repeat(2,var(--wk,1fr));text-align:center;color:var(--dgray);font-size:12px;margin-bottom:2px}
.wrow{margin-bottom:6px}
.wrow.open{grid-template-columns:repeat(7,1fr)}
.wrow.shut{grid-template-columns:repeat(5,1fr) repeat(2,54px)}
.dow:has(+ .wrow.shut){--wk:54px}
.cell{border:2px solid var(--ink);background:var(--snow);min-height:96px;padding:4px;display:flex;flex-direction:column;gap:3px}
.cell.wk{background:var(--ground)}
.cell.coll{min-height:96px}
.cell.today{outline:3px solid var(--ink);outline-offset:1px}
.cell.past{background:repeating-conic-gradient(var(--ground) 0 25%,var(--snow) 0 50%) 0 0/4px 4px}
.cell.ok{background:#e3f4ea}.cell.no{background:#f8dfdf}
.drawer.ok{background:#e3f4ea}.drawer.no{background:#f8dfdf}
.dh{display:flex;align-items:center;gap:4px;font-size:12px}
.dh .plus{margin-left:auto;font:inherit;border:0;background:none;cursor:pointer;padding:0 2px}
.dh .plus:hover{background:var(--ink);color:var(--snow)}
.dh .cnt{margin-left:auto;background:var(--ink);color:var(--snow);padding:0 4px;font-size:11px}
.dh .mk{color:var(--red)}
.card{display:flex;align-items:center;gap:3px;border:2px solid var(--ink);background:#fff;padding:1px 3px;font-size:12px;cursor:grab;margin-bottom:3px}
.card.spt{border-left-width:5px}
.card.done .tt{text-decoration:line-through;color:var(--dgray)}
.card.late{border-color:var(--red)}
.card.retro{background:#e3f4ea}
.card.sel{outline:3px solid var(--ink);outline-offset:1px}
.card.dragging{opacity:.4}
.card .tt{flex:1;min-width:0;word-break:break-all;cursor:pointer}
.card button{font:inherit;border:0;background:none;cursor:pointer;padding:0 2px;color:var(--ink)}
.card button:hover{background:var(--ink);color:var(--snow)}
.card .stbtn.on{color:var(--red)}
.card .xbtn{color:var(--dgray)}
.late-tag{font-style:normal;background:var(--red);color:#fff;padding:0 3px;font-size:10px}
.sbadge{font-style:normal;background:var(--ink);color:var(--snow);font-size:10px;padding:0 3px}
.rename,.addin{width:100%;font-size:12px;padding:1px 3px}
.mgrid{display:grid;gap:4px;overflow-x:auto}
.dow.m,.mrow{display:grid;grid-template-columns:150px repeat(7,1fr);gap:4px;min-width:700px}
.mrow{border:2px solid var(--ink);padding:3px;background:var(--snow)}
.mrow.sp-lit{background:#e3f4ea}.mrow.sp-broken{background:#f8dfdf}.mrow.sp-future{background:var(--ground)}
.mlab{font-size:12px;align-self:center}
.mcell{border:2px solid var(--ink);background:#fff;min-height:44px;padding:2px 4px;cursor:pointer;display:flex;flex-direction:column;font-size:12px}
.mcell.wk{background:var(--ground)}
.mcell.today{outline:3px solid var(--ink);outline-offset:1px}
.mcell:hover{background:var(--ink);color:var(--snow)}
.dots{margin-top:auto;font-size:11px;color:var(--green)}.dots.late{color:var(--red)}
.stage{position:relative}

.decos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:10px}
.deco{display:flex;flex-direction:column;gap:4px;text-align:left;padding:6px;background:var(--snow);border:2px solid var(--ink);cursor:pointer;font:inherit;color:inherit}
.deco.on{outline:3px solid var(--red)}
.deco img{width:100%;image-rendering:pixelated;border:2px solid var(--ink)}

.treegrid{display:grid;grid-template-columns:1.5fr 1fr;column-gap:16px;align-items:stretch}
@media(max-width:720px){.treegrid{grid-template-columns:1fr}}
.duo{display:flex;flex-wrap:wrap;gap:6px 18px;margin:6px 0 2px;font-size:13px}
.duo .who{font-weight:700;margin-right:2px}
.res{display:inline-block;padding:0 6px;border:2px solid var(--ink);font-size:12px;white-space:nowrap}
.res.ok{background:var(--green);color:#fff}.res.no{background:var(--red);color:#fff}
.ptitle{color:#555}.lock{opacity:.7}
.dt{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:13px}
.dt input{font:inherit;border:2px solid var(--ink);padding:2px 4px;background:#fff}
.treegrid h4{margin:6px 0 0}.treegrid .gitem{margin:0;align-content:start}
.treegrid{row-gap:8px}
.rw2{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}.rw2 .dt{margin-top:0}
.gitem .top input[type=text]{flex:1;min-width:0}

.auth{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:16px;background:#0b0d0f}
.auth-win{width:min(380px,100%)}
.auth-form{display:grid;gap:10px}.auth-form label{display:grid;gap:3px;font-size:13px}
.auth input[type=text],.auth input[type=password]{font:inherit;border:2px solid var(--ink);padding:6px 8px;background:#fff;width:100%}
.auth .err{background:#f8dfdf;border:2px solid var(--red);padding:4px 8px;font-size:13px}
.auth .code{font-size:32px;letter-spacing:6px;border:2px dashed var(--ink);padding:8px;text-align:center;background:#fff;user-select:all}
.auth h4{margin:12px 0 6px}
