/* =====================================================================
   열매일지 로그인 · 비밀번호 바꾸기 · 조교 관리 — 화면 모양 (auth.css)
   ㉙ 시안 · 10/16. 값(색·글자·간격·높이)은 모두 공통 tokens.css 변수만 씀.
   이 파일에는 :root를 두지 않음(공통 규칙). 새 색 없음.
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--t1);font-family:var(--font);font-size:var(--fs-b);
  line-height:var(--lh-base);font-weight:var(--fw-r);min-height:100vh;word-break:keep-all;overflow-wrap:anywhere;display:flex;flex-direction:column}
button,input,select{font:inherit;color:inherit}
a{color:var(--navy);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,p{margin:0}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:var(--r-s)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--s4);top:-60px;background:var(--navy-bg);color:#fff;padding:var(--s2) var(--s3);
  border-radius:var(--r-m);z-index:30;font-weight:var(--fw-m)}
.skip:focus{top:var(--s2)}
svg.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:var(--icon-stroke);
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- 머리띠(조교 화면 21판과 같은 틀) ---------- */
.top{position:sticky;top:0;z-index:10;background:var(--card);border-bottom:var(--bw) solid var(--line);
  height:60px;padding:0 20px;display:flex;align-items:center;gap:var(--s3);white-space:nowrap}
.logo{display:flex;align-items:center;gap:var(--s3);color:var(--t1)}
.logo:hover{text-decoration:none}
.logo i{width:30px;height:30px;border-radius:var(--r-l);background:var(--navy-bg);display:inline-flex;
  align-items:center;justify-content:center}
.logo i svg{width:16px;height:16px}
.logo b{font-weight:var(--fw-b);font-size:var(--fs-h3);letter-spacing:var(--ls-h)}
.spacer{flex:1}
.tabs{display:flex;align-self:stretch;margin-left:var(--s4)}
.tabs a{display:flex;align-items:center;padding:0 var(--s3);color:var(--t2);font-size:var(--fs-b);
  border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a:hover{color:var(--t1);text-decoration:none}
.tabs a[aria-current="page"]{color:var(--t1);font-weight:var(--fw-b);border-bottom-color:var(--navy)}
.hbtn{height:var(--h-ctl);padding:0 var(--s3);border:var(--bw) solid var(--line2);background:var(--card);
  border-radius:var(--r-m);display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:var(--fs-m);color:var(--t2)}
.hbtn:hover{color:var(--t1);border-color:var(--t3)}
.hbtn svg.i{width:18px;height:18px}
.who{font-size:var(--fs-m);color:var(--t2)}
.who b{color:var(--t1);font-weight:var(--fw-m)}
.save{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-s);color:var(--t3);min-width:84px}
.save i{width:7px;height:7px;border-radius:50%;background:var(--off);flex:none}
.save[data-s="idle"]{visibility:hidden}
.save[data-s="saving"] i{background:var(--navy);animation:pulse 1s infinite}
.save[data-s="saved"] i{background:var(--navy)}
.save[data-s="error"]{color:var(--warn)} .save[data-s="error"] i{background:var(--warn)}
@keyframes pulse{50%{opacity:.3}}

/* 연결 끊김 띠 */
.band{background:var(--warn-t);color:var(--warn);border-bottom:var(--bw) solid var(--line);
  padding:var(--s2) 20px;font-size:var(--fs-m);font-weight:var(--fw-m);display:flex;gap:var(--s2);align-items:flex-start}
.band svg.i{width:18px;height:18px;margin-top:1px}

/* ---------- 입력칸 · 단추 ---------- */
.field{margin-bottom:var(--s5)}
.field>label,.lbl{display:block;font-size:var(--fs-m);font-weight:var(--fw-m);color:var(--t1);margin-bottom:6px}
.inp{width:100%;height:var(--h-in);padding:0 var(--s3);border:var(--bw) solid var(--line2);border-radius:var(--r-m);
  background:var(--card);font-size:var(--fs-b);transition:border-color .12s}
.inp::placeholder{color:var(--t3)}
.inp:hover{border-color:var(--t3)}
.inp:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 1px var(--navy)}
.inp[aria-invalid="true"]{border-color:var(--warn)}
.inp[aria-invalid="true"]:focus{box-shadow:0 0 0 1px var(--warn)}
.inp[readonly]{background:var(--tint);color:var(--t2)}
.inp:disabled{background:var(--tint);color:var(--t3);border-color:var(--line)}
.pw{position:relative}
.pw .inp{padding-right:52px}
.eye{position:absolute;right:4px;top:4px;width:36px;height:36px;border:0;background:none;border-radius:var(--r-s);
  color:var(--t3);display:flex;align-items:center;justify-content:center;cursor:pointer}
.eye:hover{color:var(--t1);background:var(--tint)}
.eye .off{display:none} .eye[aria-pressed="true"] .on{display:none} .eye[aria-pressed="true"] .off{display:block}
.msg{font-size:var(--fs-m);margin-top:6px;color:var(--t2);display:flex;gap:6px;align-items:flex-start}
.msg:empty{display:none}
.msg.err{color:var(--warn)}
.msg svg.i{width:16px;height:16px;margin-top:2px}
.hint{font-size:var(--fs-m);color:var(--t3);margin-top:6px}

.check{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:var(--fs-b)}
.check input{appearance:none;-webkit-appearance:none;margin:2px 0 0;width:20px;height:20px;flex:none;
  border:1.5px solid var(--line2);border-radius:var(--r-s);background:var(--card);display:grid;place-content:center;cursor:pointer}
.check input:checked{background:var(--navy-bg);border-color:var(--navy-bg)}
.check input:checked::after{content:"";width:10px;height:6px;border:2px solid #fff;border-top:0;border-right:0;
  transform:translateY(-1px) rotate(-45deg)}
.check input:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

.btn{height:var(--h-btn);padding:0 var(--s5);border-radius:var(--r-m);border:var(--bw) solid var(--line2);
  background:var(--card);color:var(--t1);font-size:var(--fs-b);font-weight:var(--fw-m);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.btn:hover{border-color:var(--t3)}
.btn.primary{background:var(--navy-bg);border-color:var(--navy-bg);color:#fff}
.btn.primary:hover{filter:brightness(.9)}
:root[data-theme="dark"] .btn.primary:hover{filter:brightness(1.15)}
.btn.danger{background:var(--warn);border-color:var(--warn);color:var(--card)}
.btn.danger:hover{filter:brightness(.92)}
.btn.block{width:100%}
.btn[disabled],.btn[aria-busy="true"]{opacity:.55;cursor:default;filter:none}
.btn.s{height:var(--h-btn-s);padding:0 var(--s3);font-size:var(--fs-m);border-radius:var(--r-m)}
.btn svg.i{width:18px;height:18px}
.link{background:none;border:0;padding:0;color:var(--navy);cursor:pointer;font-size:inherit}
.link:hover{text-decoration:underline;text-underline-offset:3px}

/* 상자 알림(폼 위) */
.alert{display:flex;gap:var(--s2);align-items:flex-start;padding:var(--s3) var(--s4);border-radius:var(--r-m);
  background:var(--warn-t);color:var(--warn);font-size:var(--fs-m);line-height:var(--lh-base);margin-bottom:var(--s4)}
.alert b{font-weight:var(--fw-m)}
.alert svg.i{width:18px;height:18px;margin-top:1px}
.alert.ok{background:var(--navy-t);color:var(--navy)}
.alert .t2{color:var(--t1)}

/* ---------- 로그인 · 비밀번호 바꾸기 ---------- */
.auth{flex:1;width:100%;max-width:880px;margin:0 auto;padding:clamp(40px,11vh,120px) var(--s5) var(--s7)}
.auth-grid{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:72px;align-items:start}
.ttl{display:flex;align-items:baseline;gap:var(--s3);margin-bottom:var(--s6);flex-wrap:wrap}
.ttl h1{font-size:var(--fs-h2);font-weight:var(--fw-b);letter-spacing:var(--ls-h);line-height:var(--lh-tight)}
.ttl .meta{font-size:var(--fs-m);color:var(--t3)}
.lead{font-size:var(--fs-b);color:var(--t2);line-height:var(--lh-loose);margin:calc(-1 * var(--s4)) 0 var(--s6);max-width:38em}
.keep{margin:calc(-1 * var(--s1)) 0 var(--s5)}
.keep .hint{margin-left:30px}
.sublink{margin-top:var(--s5);font-size:var(--fs-m);color:var(--t3)}
.auth-help{border-left:var(--bw) solid var(--line);padding-left:var(--s6);margin-top:72px}
.auth-help h2{font-size:var(--fs-b);font-weight:var(--fw-m);color:var(--t1);margin-bottom:6px}
.auth-help p{font-size:var(--fs-m);color:var(--t2);line-height:var(--lh-loose);max-width:30em}
.auth-help p+h2{margin-top:var(--s5)}

.rules{list-style:none;margin:var(--s2) 0 0;padding:0;font-size:var(--fs-m);color:var(--t3)}
.rules li{display:flex;gap:6px;align-items:flex-start;line-height:var(--lh-base)}
.rules li+li{margin-top:2px}
.rules svg.i{width:16px;height:16px;margin-top:2px}
.rules .ok{display:none}
.rules li[data-s="ok"]{color:var(--navy)} .rules li[data-s="ok"] .ok{display:block} .rules li[data-s="ok"] .no{display:none}
.rules li[data-s="bad"]{color:var(--warn)}
.done{padding:var(--s5) 0 0}
.done h2{font-size:var(--fs-h3);font-weight:var(--fw-b);margin-bottom:var(--s2)}
.done p{color:var(--t2);margin-bottom:var(--s5)}

/* ---------- 조교 관리 ---------- */
.page{flex:1;width:100%;max-width:calc(var(--content) + 2 * var(--s6));margin:0 auto;padding:var(--s6) var(--s6) var(--s7)}
.phead{display:flex;align-items:flex-end;gap:var(--s4);padding-bottom:var(--s5);border-bottom:var(--bw) solid var(--line)}
.phead .ttl{margin:0}
.bar{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) 0}
.seg{display:inline-flex;border:var(--bw) solid var(--line2);border-radius:var(--r-m);overflow:hidden;background:var(--card)}
.seg button{height:var(--h-ctl);padding:0 var(--s4);border:0;background:none;cursor:pointer;font-size:var(--fs-m);color:var(--t2);
  display:inline-flex;align-items:baseline;gap:6px;padding-top:9px}
.seg button+button{border-left:var(--bw) solid var(--line2)}
.seg button[aria-pressed="true"]{background:var(--navy-t);color:var(--navy);font-weight:var(--fw-m)}
.seg b{font-weight:var(--fw-m);font-feature-settings:var(--num-table)}
.bar .note{font-size:var(--fs-m);color:var(--t3);margin-left:auto}

table.staff{width:100%;border-collapse:collapse;font-size:var(--fs-b)}
.staff th{font-size:var(--fs-s);font-weight:var(--fw-r);color:var(--t3);text-align:left;vertical-align:bottom;
  padding:0 var(--s3) var(--s2);border-bottom:var(--bw) solid var(--line2);line-height:var(--lh-base);white-space:nowrap}
.staff th a{display:block;font-size:var(--fs-s)}
.staff td{padding:0 var(--s3);height:60px;border-bottom:var(--bw) solid var(--line);vertical-align:baseline;white-space:nowrap;
  padding-top:19px}
.staff tr:hover td{background:var(--tint)}
.staff .num{text-align:right;font-feature-settings:var(--num-table)}
.staff th.num{text-align:right}
.staff .id{color:var(--t2);font-feature-settings:var(--num-table)}
.staff .sub{color:var(--t3);font-size:var(--fs-m)}
.staff .act{text-align:right;padding-top:13px}
.staff .act .btn+.btn{margin-left:6px}
.staff tr.cut td:not(.act):not(.log){color:var(--t3)}
.staff tr.cut .nm b{color:var(--t2)}
.nm{display:inline-flex;align-items:baseline;gap:var(--s2)}
.nm b{font-weight:var(--fw-m)}
.pen{border:0;background:none;color:var(--t3);cursor:pointer;padding:0;width:24px;height:24px;border-radius:var(--r-s);
  align-self:center;display:inline-flex;align-items:center;justify-content:center}
.pen:hover{color:var(--t1);background:var(--bg2)}
.pen svg.i{width:16px;height:16px}
.tag{font-size:var(--fs-xs);font-weight:var(--fw-m);color:var(--navy);border:var(--bw) solid var(--navy-t2);background:var(--navy-t);
  border-radius:var(--r-s);padding:1px 6px;line-height:1.5}
.st{display:inline-flex;align-items:baseline;gap:6px}
.st i{width:8px;height:8px;border-radius:50%;background:var(--navy);flex:none;align-self:center}
.st.cut i{background:none;border:1.5px solid var(--off)}
.staff .log a,.mrow .log{font-size:var(--fs-m)}
.empty{padding:var(--s7) 0;text-align:left;border-bottom:var(--bw) solid var(--line)}
.empty h2{font-size:var(--fs-h3);font-weight:var(--fw-b);margin-bottom:6px}
.empty p{color:var(--t2);margin-bottom:var(--s4)}
.foot{margin-top:var(--s5);font-size:var(--fs-m);color:var(--t3);line-height:var(--lh-loose);max-width:60em}
.foot b{color:var(--t2);font-weight:var(--fw-m)}

/* 폰 목록 */
.mlist{display:none;list-style:none;margin:0;padding:0}
.mrow{border-bottom:var(--bw) solid var(--line);padding:var(--s4) 0}
.mrow .r1{display:flex;align-items:baseline;gap:var(--s2)}
.mrow .r1 .st{margin-left:auto;font-size:var(--fs-m)}
.mrow dl{margin:var(--s2) 0 0;display:grid;grid-template-columns:auto 1fr;gap:2px var(--s3);font-size:var(--fs-m)}
.mrow dt{color:var(--t3)} .mrow dd{margin:0;color:var(--t1);font-feature-settings:var(--num-table)}
.mrow .r3{display:flex;gap:var(--s2);margin-top:var(--s3);align-items:center}
.mrow .r3 .log{margin-left:auto}
.mrow.cut .nm b,.mrow.cut dd{color:var(--t3)}

/* ---------- 창(대화 상자) · 서랍 ---------- */
dialog{border:var(--bw) solid var(--line2);border-radius:var(--r-l);background:var(--card);color:var(--t1);padding:0;
  width:min(460px,calc(100vw - 32px));max-height:calc(100vh - 32px)}
dialog::backdrop{background:rgba(20,22,28,.45)}
:root[data-theme="dark"] dialog::backdrop{background:rgba(0,0,0,.62)}
.dlg-b{padding:var(--s5) var(--s5) var(--s4)}
.dlg h2{font-size:var(--fs-h3);font-weight:var(--fw-b);line-height:var(--lh-tight);margin-bottom:var(--s3)}
.dlg p{color:var(--t2);font-size:var(--fs-b);line-height:var(--lh-loose)}
.dlg p+p{margin-top:var(--s2)}
.dlg ul{margin:var(--s2) 0 0;padding-left:1.1em;color:var(--t2);line-height:var(--lh-loose)}
.dlg .field:last-child{margin-bottom:0}
.dlg-f{display:flex;justify-content:flex-end;gap:var(--s2);padding:var(--s4) var(--s5) var(--s5)}
.secret{width:100%;margin:var(--s4) 0;border:var(--bw) solid var(--line2);border-radius:var(--r-m);border-spacing:0;border-collapse:separate}
.secret th{width:1%;white-space:nowrap;text-align:left;font-weight:var(--fw-r);font-size:var(--fs-m);color:var(--t3);
  padding:var(--s3) var(--s4);border-bottom:var(--bw) solid var(--line);vertical-align:baseline}
.secret td{padding:var(--s3) var(--s4) var(--s3) 0;border-bottom:var(--bw) solid var(--line);vertical-align:baseline}
.secret tr:last-child th,.secret tr:last-child td{border-bottom:0}
.secret td.cp{text-align:right;width:1%;white-space:nowrap}
.secret .v{font-size:var(--fs-b);font-weight:var(--fw-m);font-feature-settings:var(--num-table)}
.secret .pwv{font-size:var(--fs-h2);font-weight:var(--fw-b);letter-spacing:.06em;font-feature-settings:var(--num-table);user-select:all;white-space:nowrap}
.warnline{display:flex;gap:var(--s2);align-items:flex-start;font-size:var(--fs-m);color:var(--warn);line-height:var(--lh-base)}
.warnline svg.i{width:16px;height:16px;margin-top:2px}

dialog.drawer{margin:0 0 0 auto;height:100vh;max-height:100vh;width:min(420px,100vw);border-radius:0;border-width:0 0 0 1px;
  display:flex;flex-direction:column}
dialog.drawer:not([open]){display:none}
.dr-h{display:flex;align-items:baseline;gap:var(--s3);padding:var(--s5) var(--s5) var(--s4);border-bottom:var(--bw) solid var(--line)}
.dr-h h2{font-size:var(--fs-h3);font-weight:var(--fw-b)}
.dr-h .meta{font-size:var(--fs-m);color:var(--t3)}
.dr-h .x{margin-left:auto;align-self:center}
.x{width:36px;height:36px;border:0;background:none;border-radius:var(--r-m);color:var(--t2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.x:hover{background:var(--tint);color:var(--t1)}
.logl{list-style:none;margin:0;padding:var(--s2) var(--s5);overflow:auto;flex:1}
.logl li{padding:var(--s3) 0;border-bottom:var(--bw) solid var(--line)}
.logl .w{font-size:var(--fs-b);font-weight:var(--fw-m)}
.logl .m{font-size:var(--fs-s);color:var(--t3);margin-top:2px;font-feature-settings:var(--num-table)}
.dr-f{padding:var(--s4) var(--s5);border-top:var(--bw) solid var(--line);font-size:var(--fs-m)}

/* ---------- 2판: 아이디 없는 줄 · 시급 바꾸기 · 그만둠 ---------- */
.st.none i{background:none;border:1.5px dashed var(--off)}
.st .sub{margin-left:2px}
.wg{display:inline-flex;align-items:baseline;gap:var(--s1)}
.wg .pen{margin-right:-4px}
.staff td .nx{display:block;font-size:var(--fs-s);color:var(--t3);line-height:var(--lh-base);margin-top:-1px}
.mrow dl:has(.pen){align-items:baseline}
.mrow dd .pen{vertical-align:middle;margin:-4px 0 -4px 2px}
.staff .act .btn.go,.mrow .btn.go{color:var(--navy);border-color:var(--navy-t2)}

dialog.wide{width:min(580px,calc(100vw - 32px))}
/* 긴 창: 본문만 스크롤 · 단추 줄은 아래에 붙어 있음 */
dialog.wide[open]{display:flex;flex-direction:column;overflow:hidden}
dialog.wide>form{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
dialog.wide .dlg-b{overflow:auto;min-height:0;flex:1 1 auto}
dialog.wide .dlg-f{flex:none;border-top:var(--bw) solid var(--line);padding-top:var(--s4)}
.dlg .lbl-opt{font-weight:var(--fw-r);color:var(--t3);margin-left:6px}
.dlg .sec{font-size:var(--fs-m);font-weight:var(--fw-m);color:var(--t1);margin:var(--s5) 0 var(--s1);padding-top:var(--s4);border-top:var(--bw) solid var(--line)}
.dlg p.hint,.dlg p.msg{font-size:var(--fs-m);line-height:var(--lh-base)}
.dlg p.hint{color:var(--t3)}
.dlg p.msg.err{color:var(--warn)}
.dlg .field p.hint+p.hint{margin-top:2px}
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 var(--s4)}
.row2 .field{margin-bottom:var(--s2)}
.unit{position:relative}
.unit .inp{padding-right:40px;text-align:right;font-feature-settings:var(--num-table)}
.unit>span{position:absolute;right:var(--s3);top:0;line-height:var(--h-in);color:var(--t3);font-size:var(--fs-b);pointer-events:none}
.wnote{margin:0 0 var(--s4)}
.wnote p+p{margin-top:2px}

.hist{list-style:none;margin:0;padding:0}
.hist li{padding:var(--s2) 0;border-bottom:var(--bw) solid var(--line)}
.hist li:last-child{border-bottom:0}
.hist .l1{display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap}
.hist .amt{font-weight:var(--fw-m);font-feature-settings:var(--num-table);min-width:72px;text-align:right}
.hist .fr{color:var(--t2);font-size:var(--fs-m);font-feature-settings:var(--num-table)}
.hist .m{margin-left:auto;font-size:var(--fs-s);color:var(--t3);font-feature-settings:var(--num-table)}
.hist .nt{font-size:var(--fs-s);color:var(--t3);margin:2px 0 0 calc(72px + var(--s2))}
.hist .tag.plan{color:var(--t2);border-color:var(--line2);background:var(--tint)}

.step{padding:var(--s4) 0 0;margin-top:var(--s4);border-top:var(--bw) solid var(--line)}
.step h3{display:flex;align-items:baseline;gap:var(--s2);font-size:var(--fs-b);font-weight:var(--fw-m);margin-bottom:var(--s3)}
.step h3 .n{font-size:var(--fs-m);color:var(--t3);font-feature-settings:var(--num-table);width:16px}
.step h3 .meta{margin-left:auto;font-size:var(--fs-m);font-weight:var(--fw-r);color:var(--t3)}
.step h3 .meta.ok{color:var(--navy)}
.nosteps .step{border-top:0;margin-top:0;padding-top:0}
.nosteps .step h3{display:none}
.step .field{margin-bottom:var(--s3)}
.step .field .inp[type=date]{max-width:220px}
.step ul{margin-top:0}
.step-go{display:flex;justify-content:flex-end;margin-top:var(--s3)}
.step[aria-disabled="true"] h3{color:var(--t3)}

.hand{border:var(--bw) solid var(--line2);border-radius:var(--r-m);padding:var(--s3) var(--s3) var(--s3) var(--s4)}
.hand+.hand{margin-top:var(--s2)}
.hand[aria-invalid="true"]{border-color:var(--warn)}
.hh{display:flex;align-items:baseline;gap:var(--s2)}
.hh b{font-weight:var(--fw-m)}
.hh .sub,.kids .sub{font-size:var(--fs-m);color:var(--t3);font-feature-settings:var(--num-table)}
.hh .spacer{flex:1}
.sel{width:200px;height:var(--h-ctl);padding:0 var(--s2);font-size:var(--fs-m);flex:none}
.sel[aria-invalid="true"]{border-color:var(--warn)}
.hand .one{font-size:var(--fs-m);margin-top:var(--s1)}
.dlg .kids,.dlg .moved,.dlg .hist{padding-left:0}
.kids{list-style:none;margin:var(--s2) 0 0;padding:0;border-top:var(--bw) solid var(--line)}
.kids li{display:flex;align-items:baseline;gap:var(--s2);padding:6px 0 0}
.kids li .spacer{flex:1}
.moved{margin:0;padding:0;list-style:none}
.moved li{display:flex;gap:var(--s2);align-items:baseline;font-size:var(--fs-b);color:var(--t2);line-height:var(--lh-loose)}
.moved li svg.i{width:16px;height:16px;color:var(--navy);align-self:center}

fieldset.choice{border:0;margin:var(--s4) 0 0;padding:0}
.radio{display:flex;gap:10px;align-items:flex-start;padding:var(--s3) var(--s4);border:var(--bw) solid var(--line2);border-radius:var(--r-m);cursor:pointer}
.radio+.radio{margin-top:var(--s2)}
.radio:has(input:checked){border-color:var(--navy);background:var(--navy-t)}
.radio input{appearance:none;-webkit-appearance:none;margin:3px 0 0;width:18px;height:18px;flex:none;border:1.5px solid var(--line2);
  border-radius:50%;background:var(--card);cursor:pointer;display:grid;place-content:center}
.radio input:checked{border-color:var(--navy-bg)}
.radio input:checked::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--navy-bg)}
.radio input:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.radio b{display:block;font-weight:var(--fw-m);color:var(--t1)}
.radio .hint{display:block;margin-top:2px}

/* ---------- 알림(토스트) ---------- */
.toast{position:fixed;left:50%;bottom:var(--s6);transform:translate(-50%,8px);opacity:0;pointer-events:none;
  background:var(--t1);color:var(--bg);font-size:var(--fs-m);font-weight:var(--fw-m);padding:10px var(--s4);border-radius:var(--r-m);
  transition:opacity .16s,transform .16s;z-index:40;max-width:calc(100vw - 32px)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.err{background:var(--warn);color:var(--card)}

/* ---------- 시연 상자(52: 통째로 지움) ---------- */
.demo{position:fixed;right:var(--s4);bottom:var(--s4);z-index:20;font-size:var(--fs-m)}
.demo summary{list-style:none;cursor:pointer;height:var(--h-btn-s);padding:0 var(--s3);border:var(--bw) dashed var(--line2);
  border-radius:var(--r-m);background:var(--card);color:var(--t3);display:inline-flex;align-items:center;float:right}
.demo summary::-webkit-details-marker{display:none}
.demo[open] summary{color:var(--t1)}
.demo .box{clear:both;margin-bottom:var(--s2);width:290px;background:var(--card);border:var(--bw) dashed var(--line2);
  border-radius:var(--r-l);padding:var(--s4);color:var(--t2);position:absolute;right:0;bottom:calc(var(--h-btn-s) + 8px)}
.demo .box h3{font-size:var(--fs-m);font-weight:var(--fw-m);color:var(--t1);margin-bottom:var(--s2)}
.demo .box table{border-collapse:collapse;width:100%;font-size:var(--fs-s);margin-bottom:var(--s3)}
.demo .box td{padding:2px 0;vertical-align:baseline}
.demo .box td:first-child{color:var(--t1);font-weight:var(--fw-m);padding-right:var(--s2)}
.demo .box label{display:flex;gap:var(--s2);align-items:center;margin-top:6px;cursor:pointer}
.demo .box .btn{margin-top:var(--s3)}

/* 그림 찍을 때(?shot) 시연 상자 숨김 */
.shot .demo{display:none}

/* ---------- 폭 ---------- */
@media (max-width:1100px){ .tabs a{padding:0 10px} }
@media (max-width:860px){
  .auth-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .auth-help{border-left:0;border-top:var(--bw) solid var(--line);padding:var(--s5) 0 0;margin-top:var(--s6)}
  .tabs{display:none}
  table.staff{display:none} .mlist{display:block}
  .bar .note{display:none}
}
@media (max-width:600px){
  .top{height:54px;padding:0 var(--s4);gap:var(--s2)}
  .hbtn span.t{display:none}
  .hbtn{width:var(--h-ctl);padding:0;justify-content:center}
  .who{display:none}
  .save{min-width:0}
  .save span{display:none}
  .auth{padding:var(--s6) var(--s4) var(--s7)}
  .page{padding:var(--s5) var(--s4) var(--s7)}
  .phead .ttl{flex-direction:column;gap:2px}
  .seg{display:flex;width:100%} .seg button{flex:1;justify-content:center}
  dialog:not(.drawer){width:calc(100vw - 24px)}
  .dlg-b{padding:var(--s5) var(--s4) var(--s3)} .dlg-f{padding:var(--s3) var(--s4) var(--s4)}
  .dlg-f .btn{flex:1}
  .secret .pwv{font-size:var(--fs-num);letter-spacing:.04em}
  .secret th,.secret td{padding-left:var(--s3)}
  .row2{grid-template-columns:minmax(0,1fr)}
  dialog.wide .dlg-f{padding-top:var(--s3)}
  .hh{flex-wrap:wrap} .hh .spacer{display:none} .hh .sel{width:100%;margin-top:var(--s1)}
  .hand{padding:var(--s3)}
  .kids .sel{width:auto;flex:1 1 150px;min-width:0;max-width:200px}
  .step .field .inp[type=date]{max-width:none}
  .step-go .btn{width:100%}
  .hist .m{margin-left:calc(72px + var(--s2));flex-basis:100%}
  .demo{right:var(--s3);bottom:var(--s3)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}