:root{
  --bg:#F3F6FB; --card:#FFFFFF; --ink:#1E2944; --muted:#4D5770; --line:#DCE3EF;
  --blue:#2D59C8; --blue-soft:#E3EBFB; --gold:#B7860B; --gold-soft:#FBF1D6;
  --red:#C2575F; --red-soft:#FBE4E5; --yellow:#A88400; --yellow-soft:#FFF3B8;
  --green:#2E8B57; --green-soft:#DDF3E6; --orange:#C8661E; --orange-soft:#FDE6D3;
  --c1:#F2C200; --c1-soft:#FFF6CC; --c1t:#6E5400; --c2:#2D59C8; --c2-soft:#E3EBFB; --c2t:#2D59C8; --c3:#7048E8; --c3-soft:#EDE7FF; --c3t:#7048E8;
  --f-display:"Jua","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --f-body:"Jua","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --f-num:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --f-hand:"Nanum Pen Script",cursive;
  --r:16px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#121827; --card:#1A2234; --ink:#EEF2FA; --muted:#BCC5DA; --line:#2C3650;
  --blue:#7FA2F5; --blue-soft:#24325A; --gold:#E7B95C; --gold-soft:#3D3118;
  --red:#EE9AA0; --red-soft:#43232A; --yellow:#F2D45C; --yellow-soft:#3D3512;
  --green:#6FD39A; --green-soft:#173A28; --orange:#F4A060; --orange-soft:#45291A;
  --c1:#F5D34A; --c1-soft:#3D3410; --c1t:#F5D34A; --c2:#7FA2F5; --c2-soft:#24325A; --c2t:#7FA2F5; --c3:#B197FC; --c3-soft:#2E2350; --c3t:#B197FC; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#121827; --card:#1A2234; --ink:#EEF2FA; --muted:#BCC5DA; --line:#2C3650;
  --blue:#7FA2F5; --blue-soft:#24325A; --gold:#E7B95C; --gold-soft:#3D3118;
  --red:#EE9AA0; --red-soft:#43232A; --yellow:#F2D45C; --yellow-soft:#3D3512;
  --green:#6FD39A; --green-soft:#173A28; --orange:#F4A060; --orange-soft:#45291A;
  --c1:#F5D34A; --c1-soft:#3D3410; --c1t:#F5D34A; --c2:#7FA2F5; --c2-soft:#24325A; --c2t:#7FA2F5; --c3:#B197FC; --c3-soft:#2E2350; --c3t:#B197FC; color-scheme:dark}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.55}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums}
.wrap{max-width:760px;margin:0 auto;padding:16px 16px 56px;display:flex;flex-direction:column;gap:14px}
.brand{display:flex;flex-direction:column;align-items:center;line-height:1.1;margin-top:4px}
.bname{font-family:var(--f-display);font-size:18px;letter-spacing:.02em;color:var(--blue)}
.bsig{font-family:var(--f-hand);font-size:22px;color:var(--gold)}
h1{font-family:var(--f-display);font-weight:400;font-size:30px;margin:0;line-height:1.15}
h2{font-family:var(--f-display);font-weight:400;font-size:21px;margin:0}
h3{font-family:var(--f-display);font-weight:400;font-size:17px;margin:0;color:var(--muted)}
.motto{font-family:var(--f-hand);font-size:24px;color:var(--blue);margin:0}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:12px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row.between{justify-content:space-between}
.grow{flex:1;min-width:0}
.muted{color:var(--muted)}
.small{font-size:13.5px}
.center{text-align:center}
.btn{border:0;background:var(--blue);color:#fff;border-radius:12px;padding:10px 16px;font-size:16px;line-height:1.2}
.btn.big{padding:14px 20px;font-size:19px;border-radius:14px}
.btn.ghost{background:transparent;color:var(--blue);border:1.5px solid var(--line)}
.btn.soft{background:var(--blue-soft);color:var(--blue)}
.btn.danger{background:var(--red-soft);color:var(--red)}
.btn.green{background:var(--green);color:#fff}
.btn:disabled{opacity:.5;cursor:default}
.btn.sm{padding:6px 10px;font-size:14px;border-radius:10px}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=date],input[type=number],select,textarea{
  width:100%;border:1.5px solid var(--line);background:var(--bg);border-radius:12px;padding:10px 12px;font-size:16px}
textarea{min-height:80px;resize:vertical}
label.f{display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--muted)}
.seg{display:inline-flex;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}
.seg button{border:0;background:transparent;color:var(--muted);border-radius:999px;padding:6px 12px;font-size:14.5px}
.seg button[aria-pressed="true"]{background:var(--blue);color:#fff}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto}
.tabs button{border:0;background:none;padding:10px 12px;font-size:16px;color:var(--muted);border-bottom:3px solid transparent;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--blue);border-bottom-color:var(--blue)}
.chip{display:inline-block;font-size:13.5px;padding:2px 10px;border-radius:999px;background:var(--cs,var(--blue-soft));color:var(--cct,var(--blue))}
.chip.r3{background:var(--green-soft);color:var(--green)}
.chip.r2{background:var(--yellow-soft);color:var(--yellow)}
.chip.r1{background:var(--red-soft);color:var(--red)}
.t-성실{--cc:var(--c1);--cs:var(--c1-soft);--cct:var(--c1t)}
.t-꾸준{--cc:var(--c2);--cs:var(--c2-soft);--cct:var(--c2t)}
.t-탁월{--cc:var(--c3);--cs:var(--c3-soft);--cct:var(--c3t)}
.kids{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.kid{border:1px solid var(--line);border-left:5px solid var(--cc,var(--blue));background:var(--card);border-radius:14px;padding:12px;text-align:left;display:flex;flex-direction:column;gap:4px;color:var(--ink)}
.kid[aria-pressed="true"]{background:var(--cs,var(--blue-soft))}
.kid .nm{font-family:var(--f-display);font-size:20px}
.kid .meta{font-size:13.5px;color:var(--muted)}
.stat{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat div{background:var(--bg);border-radius:12px;padding:10px;text-align:center}
.stat b{display:block;font-family:var(--f-display);font-weight:400;font-size:24px}
.stat span{font-size:13.5px;color:var(--muted)}
.item{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px dashed var(--line)}
.item:first-child{border-top:0}
.stamp{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;font-family:var(--f-hand);font-size:17px;line-height:1;border:2px dashed var(--line);color:var(--muted);background:transparent}
.stamp.done{border:2.5px solid var(--green);color:var(--green);transform:rotate(-8deg)}
.rate{display:flex;gap:4px;flex-wrap:wrap}
.rate button{font-size:14px;padding:4px 10px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);color:var(--muted)}
.rate button.sel{background:var(--gold-soft);color:var(--gold);border-color:transparent}
.rate button.sel.r3{background:var(--green-soft);color:var(--green)}
.rate button.sel.r2{background:var(--yellow-soft);color:var(--yellow)}
.rate button.sel.r1{background:var(--red-soft);color:var(--red)}
.rate button.sel.a출석{background:var(--green-soft);color:var(--green)}
.rate button.sel.a지각{background:var(--yellow-soft);color:var(--yellow)}
.rate button.sel.a결석{background:var(--red-soft);color:var(--red)}
.rate button.sel.a수업없음{background:var(--blue-soft);color:var(--blue)}
.dots{display:flex;gap:6px;flex-wrap:wrap}
.dot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:12px;background:var(--bg);color:var(--muted);border:1px solid var(--line)}
.dot.ok{background:var(--green-soft);color:var(--green);border-color:transparent}
.dot.late{background:var(--yellow-soft);color:var(--yellow);border-color:transparent}
.dot.no{background:var(--red-soft);color:var(--red);border-color:transparent}
.dot.off{opacity:.45}
.notice{background:var(--gold-soft);border-radius:14px;padding:12px 14px;white-space:pre-wrap}
.notice b{font-family:var(--f-display);font-weight:400;color:var(--gold);font-size:14px;display:block;margin-bottom:2px}
.praise{background:linear-gradient(135deg,#ffe3ec,#fff4f7);border:2px solid #ff8fb1;border-radius:16px;padding:12px 14px;color:#2d3a8c}
.praise .t{font-family:var(--f-hand);font-size:24px;line-height:1.25}
.pinpad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:280px;margin:0 auto}
.pinpad button{border:1px solid var(--line);background:var(--card);border-radius:14px;padding:14px 0;font-size:22px;font-family:var(--f-num)}
.pinbox{display:flex;gap:10px;justify-content:center;margin:6px 0}
.pinbox i{width:16px;height:16px;border-radius:50%;border:2px solid var(--line);display:block}
.pinbox i.on{background:var(--blue);border-color:var(--blue)}
.err{color:var(--red);font-size:14.5px;margin:0}
.ok{color:var(--green);font-size:14.5px;margin:0}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--card);padding:10px 16px;border-radius:999px;font-size:15px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:50}
.toast.show{opacity:1}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips button{border:1.5px solid var(--orange);background:var(--orange-soft);color:var(--orange);border-radius:999px;padding:4px 11px;font-size:14px}
table{border-collapse:collapse;width:100%}
th,td{padding:8px 6px;text-align:left;border-bottom:1px solid var(--line);font-size:14.5px}
th{color:var(--muted);font-weight:400}
.tbl{overflow-x:auto}
details>summary{cursor:pointer;color:var(--blue);font-family:var(--f-display)}
.bar{height:8px;border-radius:4px;background:var(--bg);overflow:hidden;flex:1}
.bar i{display:block;height:100%;background:var(--cc,var(--blue));border-radius:4px}
.hw-title{flex:1;min-width:0}
.hw-title s{color:var(--muted)}
.foot{font-size:13px;color:var(--muted);text-align:center}
.splash{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;gap:6px}
@media (max-width:420px){ .stat b{font-size:20px} h1{font-size:26px} }