/* 이루리 센터 앱: 휴대폰은 한 줄 카드 + 아래 메뉴, PC는 왼쪽 메뉴 + 넓은 본문 + 오른쪽 상세 */
:root{
  --bg:#EEF3EC; --app:#F7FAF6; --surface:#FFFFFF; --ink:#1E2A21; --muted:#5E6D62; --line:#D9E2D5;
  --accent:#2E7A4C; --accent-ink:#FFFFFF; --accent-soft:#E2EFE5;
  --warn:#8A5D00; --warn-bg:#FBEFD2; --bad:#A6402A; --bad-bg:#F8E3DD; --info:#2D5F8A; --info-bg:#E2ECF5;
  --py-dev:#E0AE1E; --py-dev-bg:#FCF0C8; --py-edu:#3E9A5C; --py-edu-bg:#DDF0E3; --py-youth:#D66D93; --py-youth-bg:#FADFEA;
  --py-claim:#6FB3DD; --py-claim-bg:#DFF0FA; --py-after:#94C23E; --py-after-bg:#ECF6D8; --py-self:#3F72CC; --py-self-bg:#E0E9F9;
  --shadow:0 10px 30px rgba(30,42,33,.18);
  --f-display:"Gowun Dodum","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --f-body:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#0D120E; --app:#121813; --surface:#1A221C; --ink:#E6ECE5; --muted:#9AA89D; --line:#2B352E;
  --accent:#6BC38C; --accent-ink:#0E1A12; --accent-soft:#1D3124;
  --warn:#E9B94C; --warn-bg:#3A2D0F; --bad:#EE8A72; --bad-bg:#3A1F18; --info:#8DB8E0; --info-bg:#18283A;
  --py-dev:#E8BE45; --py-dev-bg:#3A3112; --py-edu:#5DBB7C; --py-edu-bg:#16301F; --py-youth:#E58DAE; --py-youth-bg:#3A1C28;
  --py-claim:#8CC7EA; --py-claim-bg:#162C3A; --py-after:#AAD35E; --py-after-bg:#25321A; --py-self:#7EA4EC; --py-self-bg:#18243C;
  --shadow:0 10px 30px rgba(0,0,0,.5); color-scheme:dark}}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5;
  padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{opacity:.45;cursor:default}
button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}

.inapp{background:var(--warn-bg);color:var(--warn);font-size:13.5px;padding:10px max(16px,env(safe-area-inset-left,0px));display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.inapp button{border:1px solid currentColor;background:transparent;border-radius:999px;padding:3px 12px;font-weight:600}
.boot{padding:40px;text-align:center;color:var(--muted)}

.app{max-width:430px;margin:0 auto;height:100%;background:var(--app);display:flex;flex-direction:column;position:relative;overflow:hidden}
@media (min-width:600px) and (max-width:899px){ body{padding-block:20px} .app{height:calc(100% - 40px);max-height:920px;border-radius:28px;box-shadow:var(--shadow);border:1px solid var(--line)} }

.demo{background:var(--info-bg);color:var(--info);font-size:12.5px;padding:7px 16px;font-weight:600}
header.top{padding:12px 16px 8px;display:flex;flex-direction:column;gap:2px}
.who{font-size:12.5px;color:var(--muted)}
.dayrow{display:flex;align-items:center;gap:6px}
.date{font-family:var(--f-display);font-weight:400;font-size:23px;line-height:1.2;margin:0;flex:1;text-align:center}
.nav{border:1px solid var(--line);background:var(--surface);border-radius:10px;width:36px;height:36px;font-size:20px;line-height:1}
.today{border:0;background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:4px 12px;font-weight:600;font-size:13px}
.count{font-family:var(--f-mono);font-size:12.5px;color:var(--muted);text-align:right}

main#main{flex:1;min-height:0;overflow-y:auto;padding:0 16px 150px;display:flex;flex-direction:column;gap:10px}
main#main.loading{opacity:.5}
.legend{display:flex;flex-wrap:wrap;gap:5px;margin:2px 0 2px}
.empty{color:var(--muted);text-align:center;padding:48px 12px;font-size:14.5px;line-height:1.7}

.slot{display:grid;grid-template-columns:52px 1fr;gap:10px}
.tcol{font-family:var(--f-mono);font-size:13px;color:var(--muted);padding-top:12px;text-align:right}
.tcol .end{display:block;font-size:11px;opacity:.7}
.card{background:var(--surface);border:1px solid var(--line);border-left-width:6px;border-radius:14px;padding:11px 12px;display:flex;flex-direction:column;gap:6px;text-align:left;width:100%;min-width:0}
.card.now{box-shadow:0 0 0 2px var(--accent-soft);border-top-color:var(--accent);border-right-color:var(--accent);border-bottom-color:var(--accent)}
.row{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.member{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;border-top:1px dashed var(--line)}
.member:first-of-type{border-top:0;padding-top:0}
.mleft{min-width:0}
.mright{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.kid{font-weight:600;font-size:16px}
.meta{font-size:12.5px;color:var(--muted);margin:0}
.chips{display:flex;gap:5px;flex-wrap:wrap}
.chip{font-size:11.5px;font-weight:600;padding:1px 8px;border-radius:999px;white-space:nowrap;background:var(--accent-soft);color:var(--accent)}
.chip.grey{background:var(--line);color:var(--muted)} .chip.warn{background:var(--warn-bg);color:var(--warn)}
.chip.bad{background:var(--bad-bg);color:var(--bad)} .chip.info{background:var(--info-bg);color:var(--info)}
.pay{font-size:11.5px;font-weight:700;padding:1px 8px;border-radius:999px;white-space:nowrap;color:var(--ink);display:inline-flex;align-items:center;gap:5px}
.pay::before{content:"";width:8px;height:8px;border-radius:50%}
.pay.dev{background:var(--py-dev-bg)} .pay.dev::before{background:var(--py-dev)}
.pay.edu{background:var(--py-edu-bg)} .pay.edu::before{background:var(--py-edu)}
.pay.youth{background:var(--py-youth-bg)} .pay.youth::before{background:var(--py-youth)}
.pay.claim{background:var(--py-claim-bg)} .pay.claim::before{background:var(--py-claim)}
.pay.after{background:var(--py-after-bg)} .pay.after::before{background:var(--py-after)}
.pay.self{background:var(--py-self-bg)} .pay.self::before{background:var(--py-self)}
.papers{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.p{font-size:11px;padding:0 6px;border-radius:4px;border:1px solid var(--line);color:var(--muted)}
.p.on{background:var(--accent-soft);border-color:transparent;color:var(--accent)} .p.miss{border-color:var(--warn);color:var(--warn)}
.nowline{height:0;border-top:2px solid var(--bad);position:relative;margin:2px 0 2px 62px}
.nowline span{position:absolute;left:-62px;top:-9px;font-family:var(--f-mono);font-size:11px;color:var(--bad);background:var(--app);padding-right:4px}

.bulk{position:absolute;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom,0px));padding:10px 16px;background:linear-gradient(to top,var(--app) 70%,transparent)}
.btn{display:block;width:100%;border:0;border-radius:12px;padding:13px;font-weight:700;background:var(--accent);color:var(--accent-ink);text-align:center}
.btn.quiet{background:var(--line);color:var(--ink)} .btn.danger{background:var(--bad);color:#fff}
.link{border:0;background:transparent;color:var(--accent);font-weight:600;padding:6px;align-self:center}

nav.tabs{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(3,1fr);background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
nav.tabs button{border:0;background:transparent;padding:9px 0 10px;font-size:12px;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:2px}
nav.tabs svg{width:22px;height:22px}
nav.tabs button[aria-selected="true"]{color:var(--accent);font-weight:600}

/* 시트 */
.scrim{position:fixed;inset:0;background:rgba(10,20,12,.4);display:flex;align-items:flex-end;justify-content:center;z-index:20}
.sheet{background:var(--surface);width:100%;max-width:430px;border-radius:20px 20px 0 0;padding:8px 16px calc(18px + env(safe-area-inset-bottom,0px));max-height:90%;overflow-y:auto;display:flex;flex-direction:column;gap:12px;position:relative;animation:up .2s ease-out}
@keyframes up{from{transform:translateY(30px);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.sheet{animation:none}}
.grab{width:40px;height:4px;border-radius:2px;background:var(--line);margin:4px auto 2px}
.x{position:absolute;top:10px;right:12px;border:0;background:var(--app);border-radius:999px;width:32px;height:32px;font-size:18px;line-height:1}
.sheet > .row{padding-right:40px}
.sheet h3{margin:0;font-family:var(--f-display);font-weight:400;font-size:21px;padding-right:40px}
.opts{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.opt{border:1.5px solid var(--line);background:var(--app);border-radius:12px;padding:10px;text-align:left;display:flex;flex-direction:column;gap:1px}
.opt b{font-size:14.5px} .opt span{font-size:11.5px;color:var(--muted)}
.opt[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.opt.wide{grid-column:1/-1}
.detail{display:flex;flex-direction:column;gap:10px}
.toggles{display:flex;gap:8px;flex-wrap:wrap}
.tg{border:1.5px solid var(--line);background:var(--app);border-radius:999px;padding:6px 14px;font-weight:600;font-size:14px}
.tg[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.notice{border-radius:10px;padding:9px 12px;font-size:13.5px}
.notice.ok{background:var(--accent-soft);color:var(--accent)} .notice.warn{background:var(--warn-bg);color:var(--warn)}
.notice.info{background:var(--info-bg);color:var(--info)} .notice.bad{background:var(--bad-bg);color:var(--bad)}
.lbl{font-size:12.5px;color:var(--muted);font-weight:600}
.check{display:flex;gap:10px;align-items:center;font-size:14px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--app)}
.check input{width:20px;height:20px;accent-color:var(--accent)}
.list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.list li{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px;padding:8px 10px;border-radius:8px;background:var(--app)}
.rowbtn{all:unset;cursor:pointer;display:flex;justify-content:space-between;width:100%}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(140px + env(safe-area-inset-bottom,0px));width:min(400px,calc(100% - 32px));background:var(--ink);color:var(--app);border-radius:12px;padding:11px 14px;font-size:14px;z-index:30;box-shadow:var(--shadow)}
.toast.err{background:var(--bad);color:#fff}

/* 로그인 */
.login{flex:1;overflow-y:auto;padding:48px max(20px,env(safe-area-inset-left,0px)) 32px;display:flex;flex-direction:column;gap:18px}
.brand{display:flex;gap:14px;align-items:center}
.brand h1{font-family:var(--f-display);font-weight:400;font-size:28px;margin:0}
.eyebrow{font-size:12.5px;color:var(--accent);font-weight:700;letter-spacing:.04em}
.card-form{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:8px}
.card-form label{font-size:13px;font-weight:600;color:var(--muted)}
.card-form input{font:inherit;font-size:16px;border:1px solid var(--line);background:var(--app);color:var(--ink);border-radius:10px;padding:11px 12px}
.formmsg{min-height:1.4em;margin:2px 0;font-size:13.5px;color:var(--bad)}
.errcode{margin:-4px 0 4px;font-family:var(--f-mono);font-size:11px;color:var(--muted);word-break:break-all;min-height:0}
.toast{white-space:pre-line}
.hint{font-size:13px;color:var(--muted);margin:0}

/* PC */
@media (min-width:900px){
  body{padding-block:0}
  .app{max-width:none;border-radius:0;box-shadow:none;border:0;display:grid;grid-template-columns:220px minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);grid-template-areas:"demo demo" "nav head" "nav main"}
  .demo{grid-area:demo} header.top{grid-area:head;padding:22px 40px 10px;max-width:1280px;width:100%}
  main#main{grid-area:main;padding:0 40px 110px;max-width:1280px;width:100%}
  .date{font-size:28px;text-align:left;flex:0 1 auto}
  nav.tabs{grid-area:nav;position:static;display:flex;flex-direction:column;gap:4px;padding:18px 12px;border-top:0;border-right:1px solid var(--line)}
  nav.tabs button{flex-direction:row;justify-content:flex-start;gap:10px;padding:10px 12px;border-radius:10px;font-size:14.5px}
  nav.tabs button[aria-selected="true"]{background:var(--accent-soft)}
  .bulk{left:220px;right:auto;width:min(1280px,calc(100% - 220px));bottom:0;padding:14px 40px 18px}
  .slot{grid-template-columns:64px 1fr} .card{padding:13px 16px}
  .scrim{justify-content:flex-end;align-items:stretch}
  .sheet{max-width:460px;max-height:100%;height:100%;border-radius:0;animation:none;box-shadow:var(--shadow)}
  .grab{display:none}
  .login{max-width:440px;margin:0 auto;width:100%;justify-content:center}
  .app:has(.login){display:flex}
}

/* 원장·행정 화면 */
.date.plain{text-align:left}
.groups{display:flex;flex-direction:column;gap:14px}
.group{display:flex;flex-direction:column;gap:8px}
.ghead{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:6px 2px 2px;border-bottom:1px solid var(--line)}
.ghead b{font-size:15.5px}
.warntext{color:var(--warn);font-weight:700}
.sec{font-family:var(--f-display);font-weight:400;font-size:19px;margin:14px 0 0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
table.grid{border-collapse:collapse;width:100%;font-size:13px;font-variant-numeric:tabular-nums}
table.grid th,table.grid td{padding:7px 9px;border-bottom:1px solid var(--line);text-align:center;white-space:nowrap}
table.grid thead th{font-size:11.5px;color:var(--muted);font-weight:600;background:var(--app)}
table.grid tbody th,table.grid tfoot th{text-align:left;font-weight:600;position:sticky;left:0;background:var(--surface)}
table.grid tfoot td,table.grid tfoot th{font-weight:700;border-bottom:0}
.stack{display:flex;flex-direction:column;gap:8px}
@media (min-width:900px){
  .groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));align-items:start}
  .stack{max-width:420px}
}
main#main > *{flex-shrink:0}
.whorow{display:flex;justify-content:space-between;align-items:center;gap:8px}
.out{border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:999px;padding:2px 10px;font-size:12px;font-weight:600}