/* 프리텐다드를 레포에 담아 쓴다 — 이 앱은 밖으로 아무 요청도 보내지 않는다는 약속이 있고,
   산출물이 캡처 이미지라 맥에서 뽑든 윈도우에서 뽑든 글자가 같아야 한다. */

/* 등원 달력 — 화면.
 * 색은 흰 바탕과 짙은 잉크 둘로 간다. 회색 면을 깔지 않고 선과 굵기로 나눈다.
 * 달력 칸만 예외 — 파스텔 다섯 색은 팀장 문법이라 그대로 둔다.
 */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}

:root{
  --bg:#FFFFFF;
  --ink:#111111;
  --ink-70:rgba(17,17,17,.70);
  --ink-45:rgba(17,17,17,.45);
  --line:rgba(17,17,17,.13);
  --line-2:rgba(17,17,17,.28);
  --wash:rgba(17,17,17,.045);
  --wash-2:rgba(17,17,17,.08);
  --focus:#111111;
  --on-ink:#FFFFFF;

  --ahead:#EBC5F0; --ahead-t:#8B1AA0;
  --nae:#A8C4F5;   --nae-t:#0F2F8C;
  --back:#FBEBD2;  --back-t:#9A4A08;
  --exam:#FBDDDD;  --exam-t:#A81D1D;
  --reg:#EDF1F7;   --reg-t:#3B4757;
  --jin:#D8ECD9;   --jin-t:#1B5E2C;
  --tuk:#E7E1F7;   --tuk-t:#4F349B;
  --off:#F2F2F2;   --off-t:#8C8C8C;
  --etc:#EFEFEF;   --etc-t:#3D3D3D;
  --shift:#1D4ED8;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px;
  --bar-h:52px;
}

html{scrollbar-gutter:stable}

/* 손에 걸리는 브라우저 기본 동작을 막는다 —
   누르고 끌면 글자가 파랗게 잡히고, 빠르게 두 번 누르면 낱말이 통째로 잡힌다.
   글자를 복사할 일이 있는 곳(달력 머리·메모·프롬프트)은 그대로 둔다. */
.bar,.side,.palette,.sheet,.legend,.veil,.dlg-head,.dlg-foot,.sheet-head,.sheet-foot,
.lk-pop{-webkit-user-select:none;user-select:none}
.lk-pop input{-webkit-user-select:text;user-select:text}
.btn,.seg-opt,.chip,.mchip,.pchip,.th,.stu,.grp-head,.fchip,.dropzone{
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.cal{-webkit-user-select:none;user-select:none}
.cal td,.cal th{-webkit-user-drag:none;user-drag:none}
img{-webkit-user-drag:none}

/* 네모칸과 동그라미는 OS 기본 크기가 달라 줄 높이가 밀린다 — 못박아 둔다 */
input[type="checkbox"],input[type="radio"]{width:14px;height:14px;margin:0;flex:0 0 14px;
  accent-color:var(--ink)}

/* 칠하는 동안에는 화면 어디도 잡히지 않게 — 손이 카드 밖으로 나가도 마찬가지다 */
body.painting,body.painting *{-webkit-user-select:none !important;user-select:none !important;
  cursor:crosshair !important}
body.painting .cal td[data-d]{cursor:crosshair !important}
body{margin:0;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5;
     font-family:'Pretendard Variable',Pretendard,"Apple SD Gothic Neo","Malgun Gothic",
     system-ui,sans-serif;
     font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
:focus{outline:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
::selection{background:var(--ink);color:var(--on-ink,#fff)}

.boom{position:fixed;left:0;right:0;top:0;z-index:99;background:var(--ink);color:var(--on-ink,#fff);
      padding:9px 14px;font-size:12.5px;font-weight:700;line-height:1.5}

/* ── 버튼 ──────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;cursor:pointer;
     font:inherit;font-size:13px;font-weight:600;line-height:1.2;color:var(--ink);
     background:transparent;border:1px solid transparent;border-radius:var(--r-btn);padding:7px 12px;
     white-space:nowrap}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn-fill{background:var(--ink);color:var(--on-ink,#fff)}
.btn-fill:hover{filter:brightness(1.25)}
.btn-line{border-color:var(--line-2)}
.btn-line:hover{background:var(--wash)}
.btn-plain{color:var(--ink-70);padding:5px 6px;font-weight:600}
.btn-plain:hover{color:var(--ink);background:var(--wash)}
.btn-icon{width:30px;height:30px;padding:0;border-radius:var(--r-btn);font-size:15px;
     border-color:var(--line-2);color:var(--ink-70)}
.btn-icon:hover{background:var(--wash);color:var(--ink)}

/* 글자가 바뀌는 버튼은 두 글자를 겹쳐 두고 넓은 쪽으로 폭을 잡는다 —
   '날짜 고치기' ↔ '고치기 끝' 처럼 길이가 다르면 누를 때마다 옆이 밀린다 */
.swap{display:inline-grid}
.swap>span{grid-area:1/1;text-align:center}
.swap>.b,.swap[aria-pressed="true"]>.a{visibility:hidden}
.swap[aria-pressed="true"]>.b{visibility:visible}

/* ── 상단 바 ───────────────────────────────────────────── */
.bar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:var(--s3);
     height:var(--bar-h);padding:0 var(--s4);background:var(--bg);
     border-bottom:1px solid var(--line)}
.brand{font-size:15px;font-weight:800;letter-spacing:-.4px;white-space:nowrap}
.bar-files{display:flex;gap:6px;flex-wrap:wrap;min-width:0;overflow:hidden}
.bar-ctrls{display:flex;align-items:center;gap:var(--s3);margin-left:auto}
.fld{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-45);
     font-weight:700}
.fld>span{white-space:nowrap}
.pair{display:inline-flex;align-items:center;gap:4px}
.pair i{color:var(--ink-45);font-style:normal}
/* 세그먼트 — 숨은 radio 에 :has() 로 칠한다. 키보드 이동과 포커스가 공짜로 따라온다 */
.seg{display:inline-flex;border:var(--bw) solid var(--line-2);border-radius:var(--r-btn);overflow:hidden}
.seg-opt{display:inline-flex;align-items:center;padding:6px 11px;font-size:12.5px;
     font-weight:600;cursor:pointer;color:var(--ink);white-space:nowrap}
.seg-opt+.seg-opt{border-left:1px solid var(--line-2)}
.seg-opt input{position:absolute;opacity:0;width:0;height:0}
.seg-opt:has(input:checked){background:var(--ink);color:var(--on-ink,#fff);font-weight:700}
.no-has .seg-opt,.no-has .chip{border-bottom:2px solid transparent}
.no-has .seg-opt:active,.no-has .chip:active{background:var(--wash-2)}
.seg-opt:not(:has(input:checked)):hover{background:var(--wash)}
.seg-opt:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:-2px}

/* 켜고 끄는 칩 */
.chipset{display:inline-flex;gap:6px;min-width:62px}
.chip{display:inline-flex;align-items:center;padding:6px 11px;font-size:12.5px;font-weight:600;
     cursor:pointer;color:var(--ink);border:var(--bw) solid var(--line-2);border-radius:var(--r-btn);
     white-space:nowrap}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip:has(input:checked){background:var(--ink);color:var(--on-ink,#fff);border-color:var(--ink);font-weight:700}
.chip:not(:has(input:checked)):hover{background:var(--wash)}
.chip:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}

/* 기간 팝오버 */
.pop-wrap{position:relative}
.caret-dn{font-size:9px;color:var(--ink-45);margin-left:2px;flex:0 0 auto}
/* 기간 글자는 길이가 들쭉날쭉하다 — 자리를 미리 잡고 넘치면 줄인다 */
#rangeBtn{min-width:168px;justify-content:space-between}
.ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:190px}
.pop{position:absolute;top:calc(100% + 6px);right:0;z-index:40;width:300px;background:var(--bg);
     border:var(--bw-thick) solid var(--ink);border-radius:var(--r-card);padding:12px;
     box-shadow:var(--sh-pop)}
.pop-hint{margin:0 0 9px;font-size:11.5px;color:var(--ink-45);font-weight:600}
.mchips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:9px}
.mchip{border:1px solid var(--line-2);background:var(--bg);border-radius:7px;padding:5px 9px;
     font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;color:var(--ink)}
.mchip:hover{background:var(--wash)}
.mchip.in{background:var(--wash-2);border-color:var(--line-2)}
.mchip.end{background:var(--ink);color:var(--on-ink,#fff);border-color:var(--ink);font-weight:700}

.fchip{border:var(--bw) solid var(--line-2);color:var(--ink);font-size:12px;
       padding:4px 4px 4px 10px;border-radius:var(--r-btn);display:inline-flex;align-items:center;gap:5px;
       max-width:240px}
.fchip b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fchip small{color:var(--ink-45);font-size:11px;white-space:nowrap;font-weight:600}
.fchip button{background:none;border:0;color:var(--ink-45);font-size:14px;line-height:1;
       padding:1px 4px;cursor:pointer;border-radius:5px}
.fchip button:hover{background:var(--wash-2);color:var(--ink)}

/* ── 본문 ──────────────────────────────────────────────── */
.shell{display:flex;align-items:stretch;min-height:calc(100vh - var(--bar-h))}
body.blank .bar-files,body.blank #addFile,body.blank .bar-ctrls{display:none}
/* 파일이 없을 때도 명단 자리를 세워둔다 — 나중에 들어서면 캔버스가 통째로 밀린다(CLS) */
body.blank .side-top{opacity:.5;pointer-events:none}
.roster-empty{margin:0;padding:18px 14px;font-size:12px;color:var(--ink-45);line-height:1.7;
      font-weight:600}
.side{width:248px;flex:0 0 248px;border-right:1px solid var(--line);background:var(--bg);
      display:flex;flex-direction:column;position:sticky;top:var(--bar-h);
      height:calc(100vh - var(--bar-h))}
.side-top{padding:var(--s3);border-bottom:1px solid var(--line);display:flex;
      flex-direction:column;gap:var(--s2)}
#q{font:inherit;font-size:13px;width:100%;padding:8px 10px;border:1px solid var(--line-2);
   border-radius:8px;background:var(--bg);color:var(--ink)}
#q:focus{border-color:var(--ink)}
#q::-webkit-search-decoration,#q::-webkit-search-cancel-button{-webkit-appearance:none}
.side-sum{display:flex;align-items:center;justify-content:space-between;gap:6px;
      font-size:11.5px;color:var(--ink-45);font-weight:600;min-height:26px}
#pickCount{min-width:118px}
.roster{overflow:auto;padding:var(--s1) 0 var(--s4);flex:1}
.side-foot{padding:10px 14px;border-top:1px solid var(--line);font-size:11px;color:var(--ink-45);line-height:1.6}
.side-foot a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}
.side-foot a:hover{color:var(--ink)}

.grp+.grp{border-top:1px solid var(--line)}
.grp-head{display:flex;align-items:center;gap:7px;width:100%;background:none;border:0;
      padding:9px var(--s3);cursor:pointer;font:inherit;font-size:12.5px;font-weight:700;
      color:var(--ink);text-align:left}
.grp-head:hover{background:var(--wash)}
.grp-head .caret{color:var(--ink-45);font-size:9px;width:9px;flex:0 0 9px}
.grp-head .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grp-head .cnt{color:var(--ink-45);font-weight:700;font-size:11px;
      min-width:32px;text-align:right;flex:0 0 32px}
.grp-all{opacity:0;font-size:11px;font-weight:800;white-space:nowrap;
      border-bottom:1.5px solid var(--ink)}
.grp-head:hover .grp-all,.grp-head:focus-visible .grp-all{opacity:1}
.grp-body{padding-bottom:var(--s1)}
.stu{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;
     padding:6px var(--s3) 6px 29px;cursor:pointer;font:inherit;font-size:13px;
     color:var(--ink);text-align:left}
.stu:hover{background:var(--wash)}
.stu.on{background:var(--wash-2)}
.stu.on .nm{font-weight:800}
.stu .box{width:14px;height:14px;flex:0 0 14px;border:1.5px solid var(--line-2);border-radius:4px;
     display:grid;place-items:center;font-size:10px;color:var(--on-ink,#fff);line-height:1}
.stu.on .box{background:var(--ink);border-color:var(--ink)}
.stu .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stu .sub{color:var(--ink-45);font-size:11px;margin-left:auto;white-space:nowrap;font-weight:600}

/* ── 시작 화면 ─────────────────────────────────────────── */
.canvas{flex:1;min-width:0;padding:var(--s4) var(--s6) var(--s6)}
body.blank .canvas{display:grid;place-items:center;padding:var(--s6);
      min-height:calc(100vh - var(--bar-h))}
.start{width:min(560px,100%);text-align:center}

.dropzone{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;
      padding:46px 24px;background:var(--bg);border:var(--bw-thick) dashed var(--line-2);
      border-radius:var(--r-dlg);
      cursor:pointer;font:inherit;color:var(--ink);
      transition:border-color .12s,background .12s}
.dropzone:hover{border-color:var(--ink);background:var(--wash)}
.dropzone.over{border-color:var(--ink);background:var(--wash-2)}
.dropzone b{font-size:16px;font-weight:800;letter-spacing:-.3px}
.dropzone span{font-size:12.5px;color:var(--ink-45);font-weight:600}
.start-ai{margin-top:var(--s4);font-size:13px}
.fineprint{margin:var(--s6) 0 0;font-size:12px;color:var(--ink-45);line-height:1.7}

.err{margin:var(--s3) var(--s6) 0;border:1px solid var(--ink);border-left-width:3px;
     border-radius:8px;padding:10px 13px;font-size:13px;color:var(--ink);font-weight:600}

.veil{position:fixed;inset:0;z-index:50;display:grid;place-items:center;
      background:rgba(255,255,255,.82);backdrop-filter:blur(3px)}
.veil div{border:2px dashed var(--ink);border-radius:16px;padding:28px 44px;
      font-size:16px;font-weight:800;letter-spacing:-.3px}

/* ── 팔레트 ────────────────────────────────────────────── */
/* 하단 고정 — 문서 흐름에 끼면 달력이 아래로 밀려서 겨냥하던 칸이 달아난다 */
.palette .btn{min-width:96px}
.palette{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:40;
      display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center;
      padding:10px 14px;background:var(--bg);border:var(--bw-thick) solid var(--ink);
      border-radius:var(--r-card);box-shadow:var(--sh-pop);max-width:calc(100vw - 32px)}
.phint{font-size:11.5px;color:var(--ink-45);width:100%;font-weight:600;text-align:center}
.pchips{display:flex;gap:6px;flex-wrap:wrap}
.pchip{border:1px solid var(--line-2);background:var(--bg);border-radius:8px;padding:5px 10px;
      font-size:12.5px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
      color:var(--ink);font:inherit;font-weight:600}
.pchip:hover{background:var(--wash)}
.pchip.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);font-weight:800}
.pchip i{width:12px;height:12px;border-radius:4px;display:inline-block}

/* ── 범례·달력 ─────────────────────────────────────────── */
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;margin:0 0 var(--s4);
        padding-bottom:10px;border-bottom:1.5px solid var(--ink);min-height:31px;
        align-items:center}
.legend span{display:inline-flex;align-items:center;gap:6px;color:var(--ink-70);font-weight:600}
.dot{width:13px;height:13px;border-radius:4px;display:inline-block;position:relative}
.dot.ahead{background:var(--bg-ahead);box-shadow:var(--mk-ahead)}
.dot.nae  {background:var(--bg-nae);  box-shadow:var(--mk-nae)}
.dot.jin  {background:var(--bg-jin);  box-shadow:var(--mk-jin)}
.dot.back {background:var(--bg-back); box-shadow:var(--mk-back)}
.dot.tuk  {background:var(--bg-tuk);  box-shadow:var(--mk-tuk)}
.dot.exam {background:var(--bg-exam); box-shadow:var(--mk-exam)}
.dot.reg  {background:var(--bg-reg);  box-shadow:var(--mk-reg)}
.dot.off  {background:var(--bg-off);  box-shadow:var(--mk-off)}
.dot.etc  {background:var(--bg-etc);  box-shadow:var(--mk-etc)}
.legend .lg.off{opacity:.45}
.legend .lg.off .dot{filter:grayscale(.7)}

.grid{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start}
.card{border:var(--bw) solid var(--line);border-radius:var(--r-card);padding:12px 14px 11px;
      background:var(--bg);box-shadow:var(--sh-card)}
.card:hover{border-color:var(--line-2)}
.who{display:flex;align-items:baseline;gap:6px;margin-bottom:8px;font-size:13px;flex-wrap:wrap}
.who b{font-size:15px;font-weight:800;letter-spacing:-.2px}
.who .sch{color:var(--ink-45);font-size:12px;font-weight:600}
/* 시험 표기는 알약으로 — 글자색만 쓰면 프리셋에 따라 흰 바탕에 흰 글씨가 된다 */
.who .ex{background:var(--exam);color:var(--exam-t);font-weight:800;font-size:11.5px;
     padding:2px 7px;border-radius:20px;line-height:1.4}
.who .tc{margin-left:auto;color:var(--ink-45);font-size:11px;padding-left:14px;white-space:nowrap;
      font-weight:600}
.card .x{background:none;border:0;color:var(--ink-45);font-size:15px;line-height:1;padding:2px 4px;
      cursor:pointer;border-radius:6px;font-weight:400;margin-left:4px;opacity:0}
.card:hover .x,.card .x:focus-visible{opacity:1}
.card .x:hover{background:var(--wash-2);color:var(--ink)}
.months{display:flex;gap:11px;flex-wrap:wrap}
.cal{border-collapse:collapse;font-size:var(--cell-fs);
      table-layout:fixed;width:calc(var(--cell-w) * 7)}
.cal th,.cal td{width:var(--cell-w);height:var(--cell-h);text-align:center;padding:0}
.cal .mn{font-size:12.5px;font-weight:800;border-bottom:1px solid var(--line);height:21px}
.cal th.wk{color:var(--ink-45);font-weight:700}
.cal th.we{font-weight:700}
.cal th.sun{color:var(--sun)}
.cal th.sat{color:var(--sat)}
.cal tbody td.plain{color:var(--ink-70)}
td.out{background:none}

/* 칸 = 바탕색 + 겹쳐 얹는 표시. 둘 다 변수라 갈래마다 따로 정할 수 있다.
   바탕과 글자 변수는 평소엔 그 갈래 색이고, 표시를 '반전' 으로 두면 뒤집힌 값이 온다. */
.cal td.ahead,.cal td.nae,.cal td.jin,.cal td.back,.cal td.tuk,
.cal td.exam,.cal td.reg,.cal td.off,.cal td.etc{border-radius:var(--r-cell)}
td.ahead{background:var(--bg-ahead);color:var(--fg-ahead);box-shadow:var(--mk-ahead);font-weight:var(--fw-num)}
td.nae  {background:var(--bg-nae);  color:var(--fg-nae);  box-shadow:var(--mk-nae);  font-weight:var(--fw-num)}
td.back {background:var(--bg-back); color:var(--fg-back); box-shadow:var(--mk-back); font-weight:var(--fw-num)}
td.exam {background:var(--bg-exam); color:var(--fg-exam); box-shadow:var(--mk-exam); font-weight:var(--fw-num)}
td.reg  {background:var(--bg-reg);  color:var(--fg-reg);  box-shadow:var(--mk-reg);  font-weight:700}
td.jin  {background:var(--bg-jin);  color:var(--fg-jin);  box-shadow:var(--mk-jin);  font-weight:var(--fw-num)}
td.tuk  {background:var(--bg-tuk);  color:var(--fg-tuk);  box-shadow:var(--mk-tuk);  font-weight:var(--fw-num)}
td.off  {background:var(--bg-off);  color:var(--fg-off);  box-shadow:var(--mk-off);  font-weight:600}
td.etc  {background:var(--bg-etc);  color:var(--fg-etc);  box-shadow:var(--mk-etc);  font-weight:700}

/* 점 표시. 크기 0 이면 없는 것과 같다 — 규칙을 켜고 끄는 대신 크기를 준다 */
.cal td::after{content:'';position:absolute;top:2px;right:2px;border-radius:50%;
      width:0;height:0;pointer-events:none}
td.ahead::after{width:var(--dot-ahead);height:var(--dot-ahead);background:var(--dotc-ahead)}
td.nae::after  {width:var(--dot-nae);  height:var(--dot-nae);  background:var(--dotc-nae)}
td.jin::after  {width:var(--dot-jin);  height:var(--dot-jin);  background:var(--dotc-jin)}
td.back::after {width:var(--dot-back); height:var(--dot-back); background:var(--dotc-back)}
td.tuk::after  {width:var(--dot-tuk);  height:var(--dot-tuk);  background:var(--dotc-tuk)}
td.exam::after {width:var(--dot-exam); height:var(--dot-exam); background:var(--dotc-exam)}
td.reg::after  {width:var(--dot-reg);  height:var(--dot-reg);  background:var(--dotc-reg)}
td.off::after  {width:var(--dot-off);  height:var(--dot-off);  background:var(--dotc-off)}
td.etc::after  {width:var(--dot-etc);  height:var(--dot-etc);  background:var(--dotc-etc)}

/* 겹쳐 얹는 표시가 갈래 표시보다 뒤에 온다 — 한 칸에 둘이 겹치면 이쪽이 이긴다 */
td.shift{box-shadow:var(--mk-shift)}
td.shift::after{width:var(--dot-shift);height:var(--dot-shift);background:var(--shift)}
[data-shift-mark="invert"] td.shift{background:var(--shift);color:var(--on-shift)}

.foot{font-size:11.5px;color:var(--ink-70);margin-top:9px;line-height:1.5;font-weight:600}
.editing td[data-d]{cursor:pointer}
/* 손이 닿은 날짜 — 그 칸은 진하게, 다른 카드의 같은 날짜는 은은하게 줄을 세운다 */
.cal td.hi{outline:2px solid var(--ink-45);outline-offset:-1px;border-radius:var(--r-cell)}
.cal td[data-day]:hover{outline:2.5px solid var(--ink);outline-offset:-1px;
  border-radius:var(--r-cell);z-index:1}
.editing td[data-d]:hover{outline:2.5px solid var(--ink);outline-offset:-1px;border-radius:var(--r-cell)}
.editing.paint td[data-d]{cursor:crosshair}
.editing.move td[data-d]{cursor:grab}
.editing td.ghost{opacity:.55}
.editing td.drag{opacity:.35}
.editing td.dover{outline:2px dashed var(--ink);outline-offset:-2px;border-radius:6px}

/* ── 모달 ──────────────────────────────────────────────── */
.dlg-back{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:var(--s4);
      background:rgba(17,17,17,.55)}
.dlg{width:min(720px,100%);max-height:86vh;display:flex;flex-direction:column;background:var(--bg);
      border:var(--bw) solid var(--line-2);border-radius:var(--r-dlg);overflow:hidden;box-shadow:var(--sh-pop)}
.dlg-head{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) var(--s4) var(--s3)}
.dlg-title{font-size:17px;margin:0;flex:1;font-weight:800;letter-spacing:-.3px}
.dlg-body{padding:0 var(--s4) var(--s4);overflow:auto}
.dlg-lede{font-size:13px;color:var(--ink-70);margin:0 0 var(--s3);line-height:1.7}
#prompt{border:1px solid var(--line);border-radius:10px;padding:14px 16px;
      font-family:"SF Mono",Menlo,Consolas,monospace;font-size:12px;line-height:1.75;
      white-space:pre-wrap;margin:0;color:var(--ink)}
.dlg-foot{display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4);
      border-top:1px solid var(--line)}
.gmsg{font-size:12.5px;color:var(--ink);flex:1;font-weight:700}

.presets{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:var(--s4)}
.pre{border:1px solid var(--line-2);border-radius:10px;padding:9px 11px;cursor:pointer;
     background:var(--bg);font:inherit;text-align:left;min-width:132px}
.pre:hover{background:var(--wash)}
.pre.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.pre b{display:block;font-size:12.5px;font-weight:800;margin-bottom:5px}
.pre small{display:block;font-size:11px;color:var(--ink-45);font-weight:600;margin-top:5px}
.pre-strip{display:flex;gap:2px}
.pre-strip i{width:13px;height:13px;border-radius:3px;display:block}

.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.sw{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:10px;
    padding:8px 10px}
.sw-demo{width:34px;height:26px;border-radius:6px;display:grid;place-items:center;
    font-size:11.5px;font-weight:800;flex:0 0 34px}
.sw-name{font-size:12.5px;font-weight:700;flex:1;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap}
.sw input[type=color]{width:26px;height:26px;padding:0;border:1px solid var(--line-2);
    border-radius:6px;background:none;cursor:pointer}
.sw input[type=color]::-webkit-color-swatch-wrapper{padding:2px}
.sw input[type=color]::-webkit-color-swatch{border:0;border-radius:4px}

/* ── 설정 시트 ─────────────────────────────────────────── */
.sheet{position:fixed;top:0;right:0;bottom:0;z-index:70;width:min(330px,92vw);
      background:var(--bg);border-left:var(--bw) solid var(--line-2);
      display:flex;flex-direction:column;box-shadow:var(--sh-pop)}
.sheet-head{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);
      border-bottom:var(--bw) solid var(--line)}
.sheet-title{font-size:15px;margin:0;flex:1;font-weight:var(--fw-bold);letter-spacing:-.3px}
.sheet-body{overflow:auto;padding:var(--s4);flex:1;display:flex;flex-direction:column;gap:var(--s6)}
.sheet-foot{display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4);
      border-top:var(--bw) solid var(--line)}
.grp-set h3{font-size:11.5px;margin:0 0 var(--s2);color:var(--ink-45);font-weight:800;
      letter-spacing:.04em}
.grp-set .row{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
      margin-bottom:var(--s2)}
.grp-set .row>span{font-size:12.5px;font-weight:600}
.sheet .seg-opt{padding:5px 9px;font-size:12px}
.themes{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.th{border:var(--bw) solid var(--line-2);border-radius:var(--r-btn);padding:8px;cursor:pointer;
      background:var(--bg);font:inherit;text-align:left}
.th:hover{background:var(--wash)}
.th.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.th b{display:block;font-size:12px;font-weight:800;margin-bottom:5px}
.th-strip{display:flex;gap:2px}
.th-strip i{width:100%;height:12px;border-radius:3px;display:block}

/* 달력 모양 — 설정에서 고른 값이 data 속성으로 온다 */
[data-cell-shape="circle"] .cal td{border-radius:999px}
[data-weekhead="off"] .cal thead tr:last-child{display:none}
[data-past="dim"] .cal td.past{opacity:.4}
[data-weekend="dim"] .cal td.we-day.plain{opacity:.4}
[data-weekend="color"] .cal td.we-day{color:#C4919B}

@media print{
  .bar,.side,.palette,.start,.err,.veil,.dlg-back,.card .x,.no-print{display:none !important}
  .canvas{padding:0}
  body{font-size:12px}
}

/* ── 갈래 이름·색 고르기 ─────────────────────────────────── */
.pchip-wrap{display:inline-flex;align-items:stretch;border:1px solid var(--line-2);
  border-radius:8px;overflow:hidden;background:var(--bg)}
.pchip-wrap.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.pchip-wrap .pchip{border:0;border-radius:0;box-shadow:none}
.pchip-wrap .pchip.on{box-shadow:none}
.pchip-set{border:0;border-left:1px solid var(--line);background:transparent;color:var(--ink-45);
  width:20px;padding:0;font-size:10px;line-height:1;cursor:pointer}
.pchip-set:hover{background:var(--wash-2);color:var(--ink)}

.legend .lg{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;
  color:inherit;font:inherit;padding:2px 4px;border-radius:6px;cursor:pointer}
.legend .lg:hover{background:var(--wash-2)}
.legend .lg-x{cursor:default}
.legend .lg-x:hover{background:transparent}

.lk-pop{position:fixed;z-index:60;background:var(--bg);color:var(--ink);
  border:var(--bw) solid var(--line-2);border-radius:var(--r-card);box-shadow:var(--sh-pop);
  padding:10px;width:236px}
.lk-lab{display:block;font-size:11px;color:var(--ink-45);margin:0 0 4px}
.lk-lab2{margin-top:10px}
.lk-in{width:100%;box-sizing:border-box;padding:6px 8px;font:inherit;font-size:13px;
  color:var(--ink);background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r-btn)}
.lk-in:focus{outline:2px solid var(--focus);outline-offset:1px}
.lk-seen{font-size:11px;color:var(--ink-45);margin-top:5px;line-height:1.4}
.lk-sw{display:flex;flex-direction:column;gap:3px}
.lk-row{display:flex;gap:3px}
.lk-c{width:23px;height:19px;border:1px solid rgba(0,0,0,.14);border-radius:4px;padding:0;cursor:pointer}
.lk-c:hover{transform:scale(1.12)}
.lk-c.on{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--ink)}
.lk-reset{margin-top:10px;width:100%;padding:5px;font:inherit;font-size:12px;cursor:pointer;
  color:var(--ink-70);background:var(--wash);border:1px solid var(--line);border-radius:var(--r-btn)}
.lk-reset:hover{background:var(--wash-2);color:var(--ink)}
#opRegT,#opOffT{display:inline-block;min-width:3.4em;text-align:center}
.lk-prev{display:flex;gap:4px;justify-content:center;padding:5px 0 10px;margin:0 0 9px;
  border-bottom:1px solid var(--line)}
.lk-day{width:var(--cell-w);height:var(--cell-h);display:grid;place-items:center;
  font-size:var(--cell-fs);font-weight:var(--fw-num);border-radius:var(--r-cell);position:relative}
.lk-day.plain{color:var(--ink-70)}
.lk-day.ahead{background:var(--bg-ahead);color:var(--fg-ahead);box-shadow:var(--mk-ahead)}
.lk-day.nae{background:var(--bg-nae);color:var(--fg-nae);box-shadow:var(--mk-nae)}
.lk-day.jin{background:var(--bg-jin);color:var(--fg-jin);box-shadow:var(--mk-jin)}
.lk-day.back{background:var(--bg-back);color:var(--fg-back);box-shadow:var(--mk-back)}
.lk-day.tuk{background:var(--bg-tuk);color:var(--fg-tuk);box-shadow:var(--mk-tuk)}
.lk-day.exam{background:var(--bg-exam);color:var(--fg-exam);box-shadow:var(--mk-exam)}
.lk-day.reg{background:var(--bg-reg);color:var(--fg-reg);box-shadow:var(--mk-reg)}
.lk-day.off{background:var(--bg-off);color:var(--fg-off);box-shadow:var(--mk-off)}
.lk-day.etc{background:var(--bg-etc);color:var(--fg-etc);box-shadow:var(--mk-etc)}
.lk-marks{display:flex;flex-wrap:wrap;gap:4px}
.lk-mk{flex:1 1 auto;padding:5px 7px;font:inherit;font-size:11.5px;cursor:pointer;white-space:nowrap;
  color:var(--ink-70);background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r-btn)}
.lk-mk:hover{background:var(--wash)}
.lk-mk.on{color:var(--ink);border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);font-weight:700}
.seg-wrap{flex-wrap:wrap}
.prev-row{display:flex;gap:5px;margin:0 0 8px}
.note{font-size:11.5px;color:var(--ink-45);line-height:1.5;margin:0 0 9px}

/* 범례 아이콘과 창 안의 미리보기 칸도 고른 모양 그대로 보여준다 */
.dot.mk{background:var(--nae);box-shadow:var(--mk-shift);position:relative}
.dot.mk::after{content:'';position:absolute;top:-1px;right:-1px;border-radius:50%;
      width:var(--dot-shift);height:var(--dot-shift);background:var(--shift)}
[data-shift-mark="invert"] .dot.mk{background:var(--shift)}
.lk-day.shift{box-shadow:var(--mk-shift)}
.lk-day.shift::after{content:'';position:absolute;top:2px;right:2px;border-radius:50%;
      width:var(--dot-shift);height:var(--dot-shift);background:var(--shift)}
[data-shift-mark="invert"] .lk-day.shift{background:var(--shift);color:var(--on-shift)}

/* 창 안 미리보기 — 무엇을 보는 중인지 이름을 붙인다 */
.lk-cap{font-size:10.5px;color:var(--ink-45);text-align:center;letter-spacing:.02em}
.lk-sw-row{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:12.5px;font-weight:600;padding:7px 8px;margin:0 0 9px;
  background:var(--wash);border-radius:var(--r-btn);cursor:pointer}

/* 파일끼리 겹친 학생 알림 — 오류가 아니라 알려주는 말이라 색을 달리한다 */
.clash{margin:var(--s3) var(--s6) 0;padding:9px 12px;font-size:12.5px;line-height:1.5;
  background:var(--wash);color:var(--ink-70);border:1px solid var(--line-2);
  border-radius:var(--r-btn);display:flex;align-items:center;gap:8px}
.clash b{color:var(--ink);font-weight:700}
.clash-x{margin-left:auto;border:0;background:none;color:var(--ink-45);font-size:15px;
  line-height:1;padding:2px 4px;cursor:pointer;border-radius:6px}
.clash-x:hover{background:var(--wash-2);color:var(--ink)}

/* 칸을 누르면 뜨는 메뉴 — 고치는 중이 아닐 때 무엇을 할지 묻는다 */
td[data-day]{cursor:pointer}
.editing td[data-day]{cursor:inherit}
td.aim{outline:2.5px solid var(--ink);outline-offset:-1px;border-radius:var(--r-cell)}
/* 메모가 있는 칸은 왼쪽 아래를 접어둔다 — 점 표시와 자리가 겹치지 않게 */
.cal td.memo::before{content:'';position:absolute;left:1px;bottom:1px;width:0;height:0;
  border-left:5px solid var(--ink-45);border-top:5px solid transparent;pointer-events:none}
.cmenu{position:fixed;z-index:62;background:var(--bg);color:var(--ink);width:212px;padding:7px;
  border:var(--bw) solid var(--line-2);border-radius:var(--r-card);box-shadow:var(--sh-pop);
  -webkit-user-select:none;user-select:none}
.cmenu input{-webkit-user-select:text;user-select:text}
.cmenu-head{font-size:11.5px;color:var(--ink-45);padding:3px 5px 7px;display:flex;
  align-items:center;gap:6px;flex-wrap:wrap}
.cmenu-now{padding:1px 6px;border-radius:999px;font-size:11px;font-weight:700}
.cmenu-now.ahead{background:var(--bg-ahead);color:var(--fg-ahead)}
.cmenu-now.nae{background:var(--bg-nae);color:var(--fg-nae)}
.cmenu-now.jin{background:var(--bg-jin);color:var(--fg-jin)}
.cmenu-now.back{background:var(--bg-back);color:var(--fg-back)}
.cmenu-now.tuk{background:var(--bg-tuk);color:var(--fg-tuk)}
.cmenu-now.exam{background:var(--bg-exam);color:var(--fg-exam)}
.cmenu-now.reg{background:var(--bg-reg);color:var(--fg-reg)}
.cmenu-now.off{background:var(--bg-off);color:var(--fg-off)}
.cmenu-now.etc{background:var(--bg-etc);color:var(--fg-etc)}
.cmenu-b{display:block;width:100%;text-align:left;padding:7px 9px;font:inherit;font-size:13px;
  font-weight:600;color:var(--ink);background:none;border:0;border-radius:var(--r-btn);cursor:pointer}
.cmenu-b:hover{background:var(--wash-2)}
.cmenu-row{display:flex;gap:5px;margin-top:5px}
.cmenu-row .cmenu-b{text-align:center;background:var(--wash);border:1px solid var(--line)}
.cmenu-in{width:100%;box-sizing:border-box;padding:7px 9px;font:inherit;font-size:13px;
  color:var(--ink);background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r-btn)}
.cmenu-in:focus{outline:2px solid var(--focus);outline-offset:1px}
.cmenu-memo{font-size:11.5px;color:var(--ink-70);padding:6px 9px 3px;line-height:1.5;
  border-top:1px solid var(--line);margin-top:5px}
.cmenu-kinds{display:flex;flex-wrap:wrap;gap:4px;padding:0 2px 7px}
.cmenu-k{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;font:inherit;font-size:12px;
  font-weight:600;color:var(--ink);background:var(--bg);border:1px solid var(--line-2);
  border-radius:var(--r-btn);cursor:pointer}
.cmenu-k:hover{background:var(--wash-2)}
.cmenu-k.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.cmenu-k .dot{width:10px;height:10px;border-radius:3px}