:root{
  --bg:#f4f6f9; --panel:#fff; --line:#d5dae2; --line2:#e9edf2;
  --text:#161b22; --muted:#5c6774; --accent:#2563eb; --accent-soft:#e8f0fe;
  --radius:7px;
  --shadow:0 1px 2px rgba(20,30,50,.06);
}
*{box-sizing:border-box}
html,body{height:100%}
@supports (height:100dvh){ html,body{height:100dvh} }
body{
  margin:0; background:var(--bg); color:var(--text);
  font:15px/1.5 "Segoe UI","Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif;
  display:flex; flex-direction:column; overflow:hidden;
}
button,input,select{font:inherit; color:inherit}

/* ── 기본 버튼: 항상 테두리와 배경이 보이게 ── */
button{
  background:var(--panel); border:1px solid #c3cad4; border-radius:var(--radius);
  padding:7px 14px; cursor:pointer; font-weight:600; box-shadow:var(--shadow);
  white-space:nowrap;
}
button:hover{background:#f0f3f8; border-color:#9aa5b4}
button:active{transform:translateY(1px)}
button:disabled{
  opacity:.4; cursor:default; background:var(--panel); border-color:var(--line);
  color:var(--muted); box-shadow:none;
}
button:disabled:hover{background:var(--panel); border-color:var(--line)}
button:disabled:active{transform:none}
.seg button:disabled{background:transparent}
button.primary{background:var(--accent); border-color:var(--accent); color:#fff}
button.primary:hover{background:#1d4fd8; border-color:#1d4fd8}
button.accent{color:var(--accent); border-color:#a7c1f7; background:var(--accent-soft)}
button.accent .keycap{border-color:#a7c1f7; background:#fff; color:var(--accent)}
button.accent:hover{background:#d8e5fd; border-color:var(--accent)}
button.quiet{color:var(--muted); background:transparent; border-color:transparent; box-shadow:none; font-weight:500}
button.quiet:hover{background:#e6eaf0; color:var(--text)}
button.big{padding:9px 18px; font-size:15px}
button.big .ico{margin-right:4px}
input[type=text],input[type=week],select{
  background:#fff; border:1px solid #c3cad4; border-radius:var(--radius);
  padding:6px 9px; box-shadow:var(--shadow);
}
.sep{width:1px; height:26px; background:var(--line); margin:0 2px}
.spacer{flex:1}

/* ── 헤더 ── */
header{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:10px 16px; background:var(--panel); border-bottom:1px solid var(--line);
}
header h1{font-size:16px; margin:0 6px 0 0; font-weight:800; letter-spacing:-.3px}
.group{display:flex; align-items:center; gap:6px}
.glabel{font-size:12px; font-weight:700; color:var(--muted); letter-spacing:.2px}
.autoinfo{font-size:12px; color:#8a94a3; margin-left:2px}

/* ── 레이아웃 ── */
main{flex:1; display:flex; min-height:0}
aside{
  width:292px; flex:none; background:var(--panel); border-right:1px solid var(--line);
  display:flex; flex-direction:column; min-height:0;
}
.side-h{
  padding:11px 14px 7px; font-weight:800; font-size:12px; color:var(--muted);
  letter-spacing:.6px; text-transform:uppercase; border-top:1px solid var(--line2);
}
aside .side-h:first-child{border-top:none}
.side-body{overflow:auto; padding:0 8px; min-height:40px}
aside button.add .keycap{margin-left:4px}
/* 글리프만 키우고 줄 높이는 그대로 두기 위해 transform을 쓴다 */
/* 글리프만 키우고 줄 높이는 건드리지 않는다 (전각 + 는 세로 여백을 만들어 쓰지 않음) */
.plus{
  display:inline-block; height:1.3em; line-height:1.3em; vertical-align:middle;
  transform:scale(1.55); transform-origin:center; font-weight:800; margin:0 8px 0 3px;
}
aside button.add:hover .plus, .chip.add:hover .plus, .rtab.add:hover .plus{color:var(--accent)}
aside button.add{
  line-height:1.25; margin:8px 12px 12px; padding:9px; border-style:dashed; border-color:#b6c0cd;
  color:var(--muted); background:#fbfcfe; box-shadow:none;
}
aside button.add:hover{color:var(--accent); border-color:var(--accent); background:var(--accent-soft)}

/* ── 프로젝트 목록 ── */
.proj{
  display:flex; align-items:center; gap:8px; padding:8px 9px; border-radius:var(--radius);
  cursor:pointer; border:1px solid transparent; margin-bottom:2px;
}
.proj:hover{background:#f1f4f8}
.proj.sel{background:var(--accent-soft); border-color:#a7c1f7}
.keycap{
  flex:none; width:22px; height:22px; border:1px solid #c3cad4; border-bottom-width:2.5px;
  border-radius:5px; background:#f7f9fc; color:var(--muted);
  font:700 12px/20px ui-monospace,"Consolas",monospace; text-align:center;
}
.proj.sel .keycap{border-color:#9dbcf5; background:#fff; color:var(--accent)}
.keycap.empty{opacity:0; border:none}
.keycap.sm.inv{background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.5); color:#fff}
.keycap.sm{
  display:inline-block; width:auto; height:auto; min-width:19px; padding:0 5px;
  line-height:17px; font-size:11px; vertical-align:1px;
}
.proj .sw{
  width:24px; height:24px; border-radius:6px; border:1px solid rgba(0,0,0,.2);
  flex:none; cursor:pointer; padding:0; box-shadow:none;
}
.proj .sw:hover{outline:2px solid var(--accent); outline-offset:1px}
.proj .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600}
.proj .cnt{color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums}
.proj input.nm{border:1px solid var(--accent); padding:2px 6px}
svg.i{width:17px; height:17px; stroke:currentColor; fill:currentColor; vertical-align:-3px}
.seg svg.i,button.rowbtn svg.i{fill:none}
button.rowbtn{
  border:none; background:transparent; box-shadow:none; color:#98a2b1;
  padding:3px 5px; border-radius:5px; opacity:0; line-height:0;
}
.proj:hover .rowbtn,.rackitem:hover .rowbtn,.proj.sel .rowbtn,.rackitem.sel .rowbtn{opacity:1}
button.rowbtn:hover{background:#e2e8f1; color:var(--text)}
button.rowbtn.danger:hover{background:#fde8ea; color:#c0304a}

/* ── 렉 목록 ── */
.rackitem{
  display:flex; align-items:center; gap:8px; padding:9px; border-radius:var(--radius);
  cursor:pointer; border:1px solid transparent; margin-bottom:2px; font-weight:600;
}
.rackitem:hover{background:#f1f4f8}
.rackitem.sel{background:#eaeef4; border-color:#c3cad4}
.rackitem .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rackitem .used{font-size:12px; color:var(--muted); font-weight:500; font-variant-numeric:tabular-nums}

/* ── 편집 영역 ── */
section.editor{flex:1; display:flex; flex-direction:column; min-width:0; min-height:0; position:relative}

/* 현재 주차가 비었을 때만 뜨는 안내 액션 */
.weekprompt{
  position:absolute; left:50%; bottom:60px; transform:translateX(-50%); z-index:10;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:14px 18px; box-shadow:0 8px 28px rgba(20,30,50,.18); max-width:calc(100% - 48px);
}
.weekprompt[hidden]{display:none}
.wp-msg{font-size:15px; color:var(--muted); margin-right:2px}
.wp-msg strong{color:var(--text); font-size:16px}
.toolbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 16px; border-bottom:1px solid var(--line); background:var(--panel);
}
.curproj{
  display:flex; align-items:center; gap:8px; padding:5px 12px 5px 8px;
  border:1px solid var(--line); border-radius:20px; background:#f7f9fc; font-weight:700;
}
.curproj .dot{width:18px; height:18px; border-radius:5px; border:1px solid rgba(0,0,0,.25); background:#fff}
.curproj.erasing{border-color:#e8a4ae; background:#fdf0f2; color:#a52b3d}
.curproj.erasing .dot{background:repeating-linear-gradient(45deg,#fff,#fff 3px,#f3b5bd 3px,#f3b5bd 6px)}
.seg{display:flex; box-shadow:var(--shadow); border-radius:var(--radius)}
.seg button{box-shadow:none; border-radius:0; display:flex; align-items:center; gap:6px}
.seg button.on .keycap{background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.5); color:#fff}
.seg button:first-child{border-radius:var(--radius) 0 0 var(--radius)}
.seg button:last-child{border-radius:0 var(--radius) var(--radius) 0; margin-left:-1px}
.seg button.on{background:var(--accent); border-color:var(--accent); color:#fff; z-index:1}
button.toggle.on{background:var(--accent); border-color:var(--accent); color:#fff}

.canvas-wrap{
  flex:1; overflow:auto; padding:24px;
  display:flex; flex-wrap:wrap; gap:22px; align-content:flex-start; justify-content:flex-start;
}
.tips{
  display:flex; gap:22px; flex-wrap:wrap; padding:9px 16px;
  border-top:1px solid var(--line); background:var(--panel); font-size:13px; color:var(--muted);
}
.tip b{color:var(--text); font-weight:700; margin-right:5px}

/* ── 렉 그리드 ── */
.rack{
  position:relative; background:var(--panel); border:1px solid var(--line);
  border-radius:10px; padding:12px 16px 16px; box-shadow:0 2px 8px rgba(20,30,50,.07);
}
.rack.active{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft),0 2px 8px rgba(20,30,50,.09)}
.rhead{display:flex; align-items:center; gap:9px; margin-bottom:10px}
.rhead .title{font-weight:800; font-size:16px; cursor:text}
.rhead .used{font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; font-weight:600}
.rhead .spacer{flex:1}
button.mini{
  padding:4px 9px; font-size:12.5px; font-weight:600; color:var(--muted);
  border-color:#dde3ea; background:#fafbfd; box-shadow:none; opacity:.75;
}
.rack:hover button.mini{opacity:1}
button.mini:hover{background:var(--accent-soft); color:var(--accent); border-color:#a7c1f7}
button.mini.danger:hover{background:#fde8ea; color:#c0304a; border-color:#f0b8c0}

.gridbox{position:relative}
table.grid{border-collapse:collapse; user-select:none; touch-action:none}
table.grid th{
  font-weight:700; color:var(--muted); font-size:13px; text-align:center;
  width:24px; height:24px; padding:0;
}
table.grid td{
  width:48px; height:42px; padding:0; border:1px solid #c2c9d3; background:#fff;
  position:relative; cursor:var(--brush-cursor, crosshair);
}
table.grid td.on::after{content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(0,0,0,.09)}
/* 커서 아래 칸에 칠해질 색을 미리 보여준다 */
table.grid td:hover::before{
  content:""; position:absolute; inset:2px; border-radius:3px;
  background:var(--brush-color,#999); opacity:.5;
}
body.erasing table.grid td:hover::before{
  background:repeating-linear-gradient(45deg,#fff,#fff 4px,#f3b5bd 4px,#f3b5bd 8px); opacity:.9;
}

.labels{position:absolute; pointer-events:none}
/* 라벨은 텍스트 도구일 때만 잡힌다. 그래야 라벨이 덮은 칸도 칠할 수 있다 */
.lbl{
  position:absolute; pointer-events:none; touch-action:none; transform:translate(-50%,-50%);
  background:rgba(255,255,255,.95); border:2px solid #888; border-radius:6px;
  padding:3px 9px; font-size:13px; font-weight:700; white-space:nowrap; cursor:move;
  box-shadow:0 2px 5px rgba(0,0,0,.2); max-width:220px; overflow:hidden; text-overflow:ellipsis;
}
.lbl.sel{outline:2px solid var(--accent); outline-offset:2px}
body.tool-text .lbl{pointer-events:auto}
.lbl.dragging{opacity:.9; box-shadow:0 6px 16px rgba(0,0,0,.28)}
table.grid td.drop{box-shadow:inset 0 0 0 3px var(--accent)}

/* ── 전체 현황 모달 ── */
.modal{
  position:fixed; inset:0; background:rgba(15,20,28,.6); display:none;
  align-items:stretch; justify-content:center; z-index:50; padding:22px;
}
.modal.open{display:flex}
.modal .box{
  background:var(--bg); border-radius:12px; width:100%; max-width:1440px;
  display:flex; flex-direction:column; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.modal .bar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 16px; background:var(--panel); border-bottom:1px solid var(--line);
}
.modal .bar strong{font-size:16px}
.modal .body{
  flex:1; overflow:auto; padding:20px; background:#e6eaef; text-align:center;
}
button.iconbtn{display:flex; align-items:center; gap:7px}
button.iconbtn.quiet2{color:var(--muted)}
button.iconbtn:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}
button.iconbtn svg.i{fill:none}
.modal .body canvas{background:#fff; max-width:100%; height:auto; box-shadow:0 4px 22px rgba(0,0,0,.35)}
label.chk{display:flex; align-items:center; gap:6px; color:var(--text); cursor:pointer; font-size:14px}
label.chk input{width:16px; height:16px}

.exlabel{
  align-self:center; font-size:12px; font-weight:800; color:var(--muted);
  letter-spacing:.6px; text-transform:uppercase;
}

.toast{
  position:fixed; left:50%; bottom:32px; transform:translateX(-50%);
  background:#161b22; color:#fff; padding:11px 20px; border-radius:22px; font-size:14px;
  font-weight:600; opacity:0; transition:opacity .18s; pointer-events:none; z-index:99;
  box-shadow:0 6px 20px rgba(0,0,0,.3);
}
.toast.show{opacity:1}


/* ══════════════════════════════════════════
   모바일 (≤820px)
   ══════════════════════════════════════════ */
.onlymobile{display:none}
.backdrop{display:none}
.racktabs, .palette{display:none}

@media (max-width:820px){
  body{font-size:14px}
  .onlymobile{display:flex}
  .nomobile{display:none}

  /* 헤더: 꼭 필요한 것만 */
  header{gap:8px; padding:8px 10px}
  header h1{display:none}
  header .group{gap:5px}
  header .glabel, .autoinfo, #weekJump, header .group.files, header .sep{display:none}
  header button{padding:7px 10px}
  /* 한 줄에 들어가도록 주차 입력을 좁게 */
  #weekInput{width:118px; padding:5px 4px; font-size:13px}
  header{flex-wrap:nowrap}
  header .spacer{display:none}
  #btnOverview{flex:none; margin-left:auto; padding:8px 10px}
  #btnOverview .ico{display:none}
  #btnMenu{padding:7px 9px; line-height:0}
  #btnOverview .keycap{display:none}
  #btnOverview{padding:8px 12px; font-size:14px}

  /* 사이드바는 서랍으로 */
  aside{
    position:fixed; inset:0 auto 0 0; z-index:40; width:min(320px,86vw);
    transform:translateX(-102%); transition:transform .22s ease;
    box-shadow:0 0 40px rgba(0,0,0,.28);
  }
  body.side-open aside{transform:none}
  .side-top{
    display:flex; align-items:center; gap:8px; padding:12px 14px;
    border-bottom:1px solid var(--line); font-size:15px;
  }
  .backdrop{
    display:block; position:fixed; inset:0; z-index:39; background:rgba(15,20,28,.45);
    opacity:0; pointer-events:none; transition:opacity .22s;
  }
  body.side-open .backdrop{opacity:1; pointer-events:auto}

  .side-files{
    display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--line); margin-top:auto;
  }
  .side-files button{flex:1}

  /* 렉 탭 */
  .racktabs{
    display:flex; align-items:center; gap:6px; padding:5px 10px; overflow-x:auto;
    background:var(--panel); border-bottom:1px solid var(--line); flex:none;
    -webkit-overflow-scrolling:touch;
  }
  /* 가로 스크롤바가 줄 높이를 잡아먹지 않도록 숨긴다 */
  .racktabs, .palette{scrollbar-width:none}
  .racktabs::-webkit-scrollbar, .palette::-webkit-scrollbar{display:none}
  .rtab{
    display:flex; align-items:center; gap:6px; padding:5px 12px; border-radius:16px; line-height:1.3;
    font-weight:700; white-space:nowrap; box-shadow:none;
  }
  .rtab .used{font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums}
  .rtab.sel{background:var(--accent); border-color:var(--accent); color:#fff}
  .rtab.sel .used{color:rgba(255,255,255,.8)}
  .rtab.add{border-style:dashed; color:var(--muted)}

  /* 한 번에 렉 하나 */
  .canvas-wrap{padding:10px; gap:10px; justify-content:center; overscroll-behavior:contain}
  .rack{padding:8px 10px 10px; border-radius:8px; box-shadow:none; width:100%}
  .rack:not(.active){display:none}
  .rack.active{border-color:var(--line); box-shadow:none}
  .rhead .title{font-size:15px}
  /* 행 라벨 열은 좁게 고정하고 남은 폭을 케이지가 나눠 갖는다 */
  table.grid{width:100%; table-layout:fixed}
  table.grid th{width:auto; height:20px; font-size:11px}
  table.grid tr > *:first-child{width:26px}
  table.grid td{width:auto; height:min(11.5vw,48px)}
  .lbl{font-size:11px; padding:2px 6px; max-width:150px}

  /* 프로젝트 팔레트 */
  .palette{
    display:flex; align-items:center; gap:7px; padding:5px 10px; overflow-x:auto; flex:none;
    background:var(--panel); border-top:1px solid var(--line); -webkit-overflow-scrolling:touch;
  }
  .chip{
    display:flex; align-items:center; gap:6px; padding:5px 11px; border-radius:16px; line-height:1.3;
    white-space:nowrap; font-weight:600; box-shadow:none;
  }
  .chip .sw{width:16px; height:16px; border-radius:5px; border:1px solid rgba(0,0,0,.2); flex:none}
  .chip .keycap{display:none}
  .chip.sel{border-color:var(--accent); background:var(--accent-soft); color:var(--accent)}
  .chip.add{border-style:dashed; color:var(--muted)}

  /* 도구는 하단 바로 */
  .toolbar{
    order:9; border-top:1px solid var(--line); border-bottom:none;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom));
    gap:8px; justify-content:space-between;
  }
  section.editor{display:flex; flex-direction:column}
  .toolbar .curproj{display:none}
  .toolbar .sep, .tips{display:none}
  .toolbar .seg button{padding:9px 12px}
  .toolbar .seg .keycap{display:none}
  .toolbar #btnUndo, .toolbar #btnRedo{font-size:0; padding:9px 11px}
  .toolbar #btnUndo svg, .toolbar #btnRedo svg{width:19px; height:19px}

  /* 전체 현황 */
  .modal{padding:0}
  .modal .box{border-radius:0}
  .modal .bar{padding:9px 10px; gap:7px}
  .modal .bar strong{font-size:14px; width:100%}
  .modal .bar .sep{display:none}
  .modal .body{padding:10px}
  .exlabel{display:none}
  button.iconbtn{padding:7px 10px; font-size:13px}
  .weekprompt{bottom:16px; padding:10px 12px; gap:8px}
  .wp-msg{font-size:13px; width:100%; text-align:center}
}