/* Layout: one shared time column with the two rooms side by side, like the paper sheet; edit bar docks at the bottom for the admin */
:root{
  --bg:#f5f6f4; --paper:#ffffff; --ink:#1d2321; --muted:#68716d; --line:#d9ddda; --band:#eceeec;
  --band-room:#c9d8f6; --band-room-ink:#1f3d7a; --drum-room:#d3e8cc; --drum-room-ink:#2b5a22;
  --accent:#d0562b; --sel:#1d2321;
  --lesson:#fbcf9f; --lesson-ink:#7a3410; /* '수업' 칸 */
  --ok:#2f8f46; /* 확인 버튼 */
  --band-line:#6f95e6; --drum-line:#6fb55e; /* 선택 테두리 */
  --f-body:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --f-mono:"Pretendard Variable",Pretendard,-apple-system,system-ui,sans-serif; /* 시간·숫자도 Pretendard (tabular-nums로 자리 맞춤) */
  --name-size:16px; /* 예약자 이름 글씨 크기 (모든 칸 동일) */
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#141716; --paper:#1c201f; --ink:#e8ebe9; --muted:#9aa39f; --line:#2f3533; --band:#242928;
  --band-room:#26375c; --band-room-ink:#c6d6fb; --drum-room:#2a4426; --drum-room-ink:#cfe8c6;
  --accent:#f0784c; --sel:#e8ebe9; --lesson:#6b3a17; --lesson-ink:#ffdcbc; --ok:#3aa457; --band-line:#7ea2f0; --drum-line:#7fc76d; color-scheme:dark}}
*{box-sizing:border-box}
html{padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.45;-webkit-text-size-adjust:100%}
[hidden]{display:none!important}
.wrap{max-width:760px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:24px 8px}
header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 16px;margin-bottom:16px}
.eyebrow{font-size:12px;letter-spacing:.08em;color:var(--muted);font-weight:500}
h1{font-size:clamp(22px,5vw,28px);margin:2px 0 0;font-weight:700;text-wrap:balance;letter-spacing:-.01em}
.date{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px;color:var(--muted);font-size:14px}
.date b{color:var(--ink);font-weight:500}
.chip{font-size:12px;padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.live{display:inline-flex;align-items:center;gap:5px}
.live::before{content:"";width:7px;height:7px;border-radius:50%;background:#3b9c4a}
.live.off::before{background:var(--muted)}
.tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
button{font:inherit;color:inherit;cursor:pointer}
.btn{border:1px solid var(--line);background:var(--paper);border-radius:8px;padding:8px 14px;font-weight:500;font-size:14px}
.btn.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.link{border:0;background:none;padding:4px 0;color:var(--muted);text-decoration:underline;font-weight:400;font-size:13px}
.btn:focus-visible,.cell:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn[disabled]{opacity:.5;cursor:default}
.admin-tag{font-size:12px;color:var(--accent);font-weight:700}
.sheet{background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:visible;display:grid;width:fit-content;max-width:100%;grid-template-columns:auto minmax(0,200px) minmax(0,200px);grid-template-rows:auto;grid-auto-rows:44px}
/* 둥근 모서리는 모서리 칸에서 직접 (채우기 동그라미가 표 밖으로 나와도 잘리지 않게) */
.sheet > :nth-child(1){border-top-left-radius:11px}
.sheet > :nth-child(3){border-top-right-radius:11px}
.sheet > :nth-last-child(3){border-bottom-left-radius:11px}
.sheet > :last-child{border-bottom-right-radius:11px}
.h{padding:12px 8px;text-align:center;font-weight:700;font-size:15px;border-bottom:1px solid var(--line)}
.h.t{font-weight:500;font-size:12px;color:var(--muted);letter-spacing:.06em}
.h.band{background:var(--band-room);color:var(--band-room-ink)}
.h.drum{background:var(--drum-room);color:var(--drum-room-ink);border-left:1px solid var(--line)}
.time{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:17px;font-weight:500;padding:0 14px;display:flex;align-items:center;gap:6px;border-top:1px solid var(--line);min-height:44px;white-space:nowrap;position:relative}
.time.alt{background:var(--band)}
.time.hour{border-top-color:var(--muted)}
.time.now::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent)}
.now-tag{font-family:var(--f-body);font-size:11px;font-weight:700;color:var(--accent)}
.cell{border:0;border-top:1px solid var(--line);border-left:1px solid var(--line);background:transparent;min-height:44px;padding:4px 8px;text-align:center;font-size:var(--name-size);font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:default}
.cell.hour{border-top-color:var(--muted)}
.cell.b.on{background:var(--band-room);color:var(--band-room-ink)}
.cell.d.on{background:var(--drum-room);color:var(--drum-room-ink)}
.cell.on.lesson{background:var(--lesson);color:var(--lesson-ink)}
.editing .cell{cursor:default}
.editing .cell:hover{box-shadow:inset 0 0 0 1px var(--muted)}
.cell.sel{box-shadow:inset 0 0 0 3px var(--sel)!important}
.cell.rsel{box-shadow:inset 0 0 0 2px var(--accent)!important;background-image:linear-gradient(color-mix(in srgb,var(--accent) 14%,transparent),color-mix(in srgb,var(--accent) 14%,transparent))}
.cell{touch-action:manipulation;-webkit-user-select:none;user-select:none}
.cell.quick{cursor:default}
.cell.quick:hover{box-shadow:inset 0 0 0 1px var(--muted)}
.cell.inline{padding:3px;display:flex;align-items:center;gap:3px}
.cell.inline input{width:100%;min-width:0;font:inherit;font-size:var(--name-size);font-weight:500;text-align:center;border:2px solid var(--accent);border-radius:6px;background:var(--paper);color:var(--ink);padding:2px 4px;height:36px;line-height:1}
.cell.inline input:focus{outline:none}
/* 칸만 선택된 상태: 엑셀처럼 테두리만 (합주실 파랑, 드럼연습실 초록) */
.cell.inline.selmode.b{box-shadow:inset 0 0 0 3px var(--band-line)}
.cell.inline.selmode.d{box-shadow:inset 0 0 0 3px var(--drum-line)}
.cell.inline.selmode input{caret-color:transparent;cursor:default;border-color:transparent;background:transparent;color:inherit}
.cell.inline.selmode input::selection{background:transparent;color:inherit}
.cell.inline.selmode .acts,.cell.inline.selmode .keyhint{display:none!important}
.ext-btn{flex:none;height:36px;border:1px solid var(--accent);background:var(--paper);color:var(--accent);border-radius:6px;padding:0 6px;font-size:12px;font-weight:700;line-height:1;white-space:nowrap;touch-action:manipulation}
.ext-btn:active{background:var(--accent);color:var(--paper)}
.ok-btn{flex:none;height:36px;border:1px solid var(--ok);background:var(--ok);color:#fff;border-radius:6px;padding:0 7px;font-size:12px;font-weight:700;line-height:1;white-space:nowrap;touch-action:manipulation}
.ok-btn:active{filter:brightness(.9)}
.acts{display:flex;gap:3px;flex:none}
.keyhint{display:none}
@media (hover:hover) and (pointer:fine){
  .cell.inline{position:relative;overflow:visible;z-index:6}
  .keyhint{display:flex;gap:10px;position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);white-space:nowrap;padding:8px 14px;background:var(--ink);color:var(--paper);border-radius:10px;font-size:12px;font-weight:400;box-shadow:0 6px 16px rgba(0,0,0,.18);pointer-events:none;z-index:19}
  .keyhint.top{bottom:auto;top:calc(16px + env(safe-area-inset-top,0px))}
  body:has(.keyhint:not(.top)) .toast{bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  .ok-btn,.ext-btn{position:relative}
  .ok-btn[data-tip]:hover::after,.ext-btn[data-tip]:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);right:0;white-space:nowrap;padding:5px 9px;border-radius:6px;background:var(--ink);color:var(--paper);font-size:12px;font-weight:500;box-shadow:0 4px 12px rgba(0,0,0,.18);pointer-events:none;z-index:30}
  .keyhint kbd{font-family:var(--f-mono);font-size:11px;padding:1px 5px;border-radius:4px;background:color-mix(in srgb,var(--paper) 18%,transparent)}
}
@media (max-width:600px){
  .cell.inline{position:relative;overflow:visible;z-index:6}
  .acts{position:absolute;top:calc(100% - 2px);right:3px;padding:4px;background:var(--paper);border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,.15)}
  .acts.up{top:auto;bottom:calc(100% - 2px)}
}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:10px;font-size:14px;z-index:20;box-shadow:0 6px 20px rgba(0,0,0,.2);pointer-events:none}
.toast.has-action{pointer-events:auto;display:flex;align-items:center;gap:12px}
.toast-btn{border:0;background:none;color:var(--accent);font-weight:700;font-size:14px;padding:4px 0;white-space:nowrap;text-decoration:underline}
.cell.preview{outline:2px dashed var(--accent);outline-offset:-3px;display:flex;align-items:center;justify-content:center}
.note{margin-top:12px;color:var(--muted);font-size:13px}
.foot{max-width:760px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:8px calc(24px + env(safe-area-inset-bottom,0px));display:flex;justify-content:flex-end}
.ver{font-family:var(--f-mono);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
body.has-bar .foot{padding-bottom:150px}
.notice{margin:0 0 12px;padding:10px 12px;border:1px dashed var(--line);border-radius:8px;color:var(--muted);font-size:14px}
.notice.warn{border-color:var(--accent);color:var(--ink)}
.login{margin-top:16px;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--paper);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.login p{margin:0;flex-basis:100%;font-size:13px;color:var(--muted)}
input[type=email],input[type=password],.bar input{flex:1 1 180px;min-width:0;font:inherit;font-size:16px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink)}
.bar{position:fixed;left:0;right:0;bottom:0;background:var(--paper);border-top:1px solid var(--line);padding-top:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));z-index:5;box-shadow:0 -6px 20px rgba(0,0,0,.08)}
.bar-in{max-width:760px;margin:0 auto;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bar .hint{flex-basis:100%;font-size:13px;color:var(--muted)}
.bar .spacer{flex:1 1 0}
.status{font-size:13px;color:var(--accent)}
@media (max-width:420px){.time{padding:0 8px;font-size:15px}.cell{padding:4px 4px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* admin: 요일 탭 */
.daytabs{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:12px}
.daytab{border:1px solid var(--line);background:var(--paper);border-radius:8px;padding:8px 0 6px;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.daytab .dname{font-weight:700;font-size:15px}
.daytab .dcount{font-family:var(--f-mono);font-size:11px;color:var(--accent);min-height:14px}
.daytab.today .dname{color:var(--accent)}
.daytab.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.daytab.on .dname,.daytab.on .dcount{color:var(--paper)}
.daytab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lessons-sheet .cell{cursor:default}
.lessons-sheet .cell:hover{box-shadow:inset 0 0 0 1px var(--muted)}
.admin-foot{margin-top:16px}
a.btn{color:var(--ink);text-decoration:none;display:inline-block}
a.btn.link{color:var(--muted);text-decoration:underline}
.login-err{color:var(--accent)!important}
/* 채우기 핸들 (엑셀) */
.fill-handle{position:absolute;right:-6px;bottom:-6px;width:12px;height:12px;border-radius:50%;border:2px solid var(--paper);cursor:crosshair;z-index:8;touch-action:none}
.cell.b .fill-handle{background:var(--band-line)}
.cell.d .fill-handle{background:var(--drum-line)}
.cell.b.fillsel{outline:2px dashed var(--band-line);outline-offset:-3px}
.cell.d.fillsel{outline:2px dashed var(--drum-line);outline-offset:-3px}
body.filling,body.filling *{cursor:crosshair!important;user-select:none}
/* admin: 메뉴 탭 */
.menutabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px}
.menutab{border:0;background:none;padding:10px 14px;font-size:15px;font-weight:500;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-1px}
.menutab.on{color:var(--ink);font-weight:700;border-bottom-color:var(--ink)}
.menutab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.pwform{display:flex;flex-direction:column;gap:8px;max-width:360px}
.pwform input{flex:none;font:inherit;font-size:16px;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink)}
.pwform .btn{align-self:flex-start}
.pwform p{margin:0;font-size:13px}
.lessons-sheet .cell.pv-on{background:var(--lesson);color:var(--lesson-ink);outline:2px dashed var(--accent);outline-offset:-3px}
.lessons-sheet .cell.pv-off{background:var(--paper)!important;color:var(--muted)!important;outline:2px dashed var(--muted);outline-offset:-3px}
.lessons-sheet .cell.pv-off .nm{text-decoration:line-through}
.titleline{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.clock{font-family:var(--f-mono);font-size:clamp(15px,3.6vw,18px);font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.memo{margin:12px 0 0;font-size:14px;color:var(--muted)}
.menutotal{margin-left:auto;align-self:center;font-size:16px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums;padding:0 4px}
.titleline .chip.live{align-self:center}
.sheet.lessons-sheet{width:auto;grid-template-columns:auto 1fr 1fr} /* 관리자: 요일 탭(월~일) 너비까지 */
/* 홈: 제목 줄을 표 너비에 맞춤 (실시간 표시가 표 오른쪽 끝에) */
.wrap.home{display:grid;justify-content:center} /* 표 너비에 맞춰 화면 가운데 */
body:has(.wrap.home) .foot{max-width:calc(var(--home-w, 760px) + 32px)}
.wrap.home > *{min-width:0}
.wrap.home header{align-items:flex-end}
.wrap.home header .tools{margin-left:auto;padding-bottom:4px}
/* 시간 글자와 "지금"을 위아래 가운데로 딱 맞춤 */
.time > span{line-height:1;display:inline-flex;align-items:center}
.now-tag{line-height:1}
/* admin: 정기 수업 저장/취소 */
.lesson-acts{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin:-4px 0 12px}
.lesson-acts .dirty{font-size:13px;color:var(--accent);font-weight:500;margin-right:4px}
.btn.save-btn{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.save-btn[disabled],.lesson-acts .btn[disabled]{opacity:.4}