/* style.css — 교사 앱 공통 스타일. 모든 색·크기·여백은 토큰으로만 쓴다.
 *
 * SPEC §11(인지 부하 줄이기) 기준 — 다른 뷰 담당도 이대로 따른다.
 *  글자: --fs-num 26 / --fs-title 19 / --fs-sub 15 / --fs-body 13 / --fs-cap 12  (레일 라벨만 --fs-rail 11)
 *        새 CSS 는 이 5종만 쓴다. 11px 이하 금지. 옛 이름(--fs-10 등)은 아래에서 5종으로 되돌려 놨다.
 *  여백: --sp-1 4 / --sp-2 8 / --sp-3 12 / --sp-4 16 / --sp-5 24 / --sp-6 32. 카드 안 14px+, 카드 사이 12px, 섹션 사이 24px
 *  색  : 카드는 흰 바탕 + 얇은 좌측 띠(3px)나 점으로 상태를 보이고, 큰 색면을 칠하지 않는다
 */
:root{
  --bg:#FBF3F1;--bg-side:#FDF8F6;--panel:#FFFFFF;--panel-tint:#FFF9F7;
  --line:#EBDAD6;--line-strong:#DBC3BE;--rule:#F0E3E0;
  --text:#2B2326;--text-2:#655A5E;--text-3:#8C7F83;
  --rail:#372C30;--rail-on:#4B3E43;--rail-text:#BDAFB3;--ink:#352B2F;--on-ink:#FFFFFF;
  --on-rail:#FFFFFF;--on-tone:#FFFFFF;--logo-bg:#FFFFFF;--logo-ink:#372C30;
  --accent:#C8506E;--accent-ink:#A93A57;--accent-soft:#FBE3E6;
  --good:#3F8F6B;--good-ink:#2C7454;--good-soft:#E3F2EA;
  --warn:#D98032;--warn-ink:#A85A14;--warn-soft:#FCEBD9;
  --bad:#C9384F;--bad-ink:#A82A40;--bad-soft:#FBE1E4;
  --info:#5B5FC7;--info-ink:#4548A8;--info-soft:#E8E9FA;
  --date:#8A63B5;--banner-bg:#FCE9C8;--banner-ink:#8A4B0F;
  --backdrop:rgba(43,35,38,.45);
  --c0:#C8506E;--c1:#5B5FC7;--c2:#3F8F6B;--c3:#D98032;--c4:#8A63B5;--c5:#2F8FA8;--c6:#A8783A;--c7:#6B7A8F;--c8:#B0487F;--c9:#7A9A3A;
  --r-sm:6px;--r-md:10px;--r-lg:14px;
  --sh-1:0 1px 2px rgba(60,30,35,.05);--sh-2:0 12px 40px rgba(60,30,35,.18);
  --font:"Pretendard Variable",Pretendard,"Noto Sans KR","Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif;
  /* 글자 크기 5종 + 레일 예외 */
  --fs-num:1.625rem;--fs-title:1.1875rem;--fs-sub:.9375rem;--fs-body:.8125rem;--fs-cap:.75rem;--fs-rail:.6875rem;
  /* 옛 이름 → 5종으로 되돌림(뷰가 주입한 CSS 호환용. 새 코드에는 쓰지 말 것) */
  --fs-10:var(--fs-cap);--fs-11:var(--fs-cap);--fs-12:var(--fs-cap);--fs-13:var(--fs-body);--fs-15:var(--fs-sub);--fs-20:var(--fs-title);--fs-26:var(--fs-num);
  /* 여백·줄 간격 */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--lh:1.6;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1E191B;--bg-side:#231D20;--panel:#2A2327;--panel-tint:#30282D;
    --line:#3D3338;--line-strong:#57494F;--rule:#342B30;
    --text:#F1E8EA;--text-2:#CBBEC2;--text-3:#9C8E93;
    --rail:#151113;--rail-on:#3A2F34;--rail-text:#A8999E;--ink:#EADFE2;--on-ink:#2B2326;
    --on-rail:#FFFFFF;--on-tone:#231D20;--logo-bg:#EADFE2;--logo-ink:#231D20;
    --accent:#E0708C;--accent-ink:#F2A0B4;--accent-soft:#4A2A33;
    --good:#5FB58D;--good-ink:#8AD0AE;--good-soft:#21392E;
    --warn:#E89A55;--warn-ink:#F3BC85;--warn-soft:#45301C;
    --bad:#E0607A;--bad-ink:#F29BAB;--bad-soft:#4A232B;
    --info:#8A8EE8;--info-ink:#B3B6F5;--info-soft:#2B2C52;
    --date:#B99AE0;--banner-bg:#4A3A1C;--banner-ink:#F3D9A0;
    --backdrop:rgba(0,0,0,.6);
    --c0:#E0708C;--c1:#8A8EE8;--c2:#5FB58D;--c3:#E89A55;--c4:#B99AE0;--c5:#5FB8D0;--c6:#CFA066;--c7:#9AA8BC;--c8:#D878A8;--c9:#A6C566;
    --sh-1:0 1px 2px rgba(0,0,0,.35);--sh-2:0 12px 40px rgba(0,0,0,.55);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#1E191B;--bg-side:#231D20;--panel:#2A2327;--panel-tint:#30282D;
  --line:#3D3338;--line-strong:#57494F;--rule:#342B30;
  --text:#F1E8EA;--text-2:#CBBEC2;--text-3:#9C8E93;
  --rail:#151113;--rail-on:#3A2F34;--rail-text:#A8999E;--ink:#EADFE2;--on-ink:#2B2326;
  --on-rail:#FFFFFF;--on-tone:#231D20;--logo-bg:#EADFE2;--logo-ink:#231D20;
  --accent:#E0708C;--accent-ink:#F2A0B4;--accent-soft:#4A2A33;
  --good:#5FB58D;--good-ink:#8AD0AE;--good-soft:#21392E;
  --warn:#E89A55;--warn-ink:#F3BC85;--warn-soft:#45301C;
  --bad:#E0607A;--bad-ink:#F29BAB;--bad-soft:#4A232B;
  --info:#8A8EE8;--info-ink:#B3B6F5;--info-soft:#2B2C52;
  --date:#B99AE0;--banner-bg:#4A3A1C;--banner-ink:#F3D9A0;
  --backdrop:rgba(0,0,0,.6);
  --c0:#E0708C;--c1:#8A8EE8;--c2:#5FB58D;--c3:#E89A55;--c4:#B99AE0;--c5:#5FB8D0;--c6:#CFA066;--c7:#9AA8BC;--c8:#D878A8;--c9:#A6C566;
  --sh-1:0 1px 2px rgba(0,0,0,.35);--sh-2:0 12px 40px rgba(0,0,0,.55);
  color-scheme:dark;
}

/* ---------- 기본 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%}
html[data-large="1"]{font-size:17.6px}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:var(--fs-body);line-height:var(--lh);overflow-x:hidden}
#app{height:100vh;height:100dvh}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed}
h1,h2,h3,p,ul{margin:0}
ul{padding-left:18px}
a{color:var(--info-ink)}
small{font-size:var(--fs-cap)}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--info);outline-offset:2px}
.rail :focus-visible,.tabbar :focus-visible,.stu-row.is-sel:focus-visible,.rate :focus-visible,.btn--primary:focus-visible{outline-color:var(--on-rail);box-shadow:0 0 0 4px var(--info)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:4px}
::-webkit-scrollbar-track{background:transparent}
.num{font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:-.01em}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.muted{color:var(--text-2)}
.boot-msg{max-width:520px;margin:0 auto;padding:48px 16px;color:var(--text-2)}
.boot-msg strong{display:block;color:var(--text);font-size:var(--fs-sub);margin-bottom:var(--sp-2)}
.boot-msg p{margin-top:var(--sp-2)}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--on-ink);padding:8px 12px;border-radius:0 0 8px 0}
.skip-link:focus{left:0}

/* 상태 색 묶음: 컴포넌트는 --t/--t-ink/--t-soft 만 읽는다. 큰 면적에는 쓰지 않는다(§11.4) */
.tone-now,.tone-danger,.tone-error{--t:var(--bad);--t-ink:var(--bad-ink);--t-soft:var(--bad-soft)}
.tone-week,.tone-warn{--t:var(--warn);--t-ink:var(--warn-ink);--t-soft:var(--warn-soft)}
.tone-watch,.tone-info{--t:var(--info);--t-ink:var(--info-ink);--t-soft:var(--info-soft)}
.tone-ok{--t:var(--good);--t-ink:var(--good-ink);--t-soft:var(--good-soft)}
.tone-accent{--t:var(--accent);--t-ink:var(--accent-ink);--t-soft:var(--accent-soft)}
.tone-muted{--t:var(--line-strong);--t-ink:var(--text-2);--t-soft:var(--rule)}
.cat-0{--t:var(--c0)}.cat-1{--t:var(--c1)}.cat-2{--t:var(--c2)}.cat-3{--t:var(--c3)}.cat-4{--t:var(--c4)}
.cat-5{--t:var(--c5)}.cat-6{--t:var(--c6)}.cat-7{--t:var(--c7)}.cat-8{--t:var(--c8)}.cat-9{--t:var(--c9)}
.t-ok{color:var(--good-ink)}.t-warn{color:var(--warn-ink)}.t-danger{color:var(--bad-ink)}.t-info{color:var(--info-ink)}.t-muted{color:var(--text-2)}

/* ---------- 레이아웃 ---------- */
.app-shell{display:flex;flex-direction:column;height:100%;min-height:0;position:relative;overflow:hidden}
.app{flex:1;min-height:0;display:grid;grid-template-columns:64px 200px minmax(0,1fr) 264px}
.app-shell.no-side .app{grid-template-columns:64px 200px minmax(0,1fr)}
.app-shell.no-list .app{grid-template-columns:64px minmax(0,1fr) 264px}
.app-shell.no-list.no-side .app{grid-template-columns:64px minmax(0,1fr)}
.app-shell.no-side .side-col,.app-shell.no-list .list-col{display:none}
.footnote{flex:none;padding:3px 12px;font-size:var(--fs-cap);color:var(--text-2);background:var(--bg-side);border-top:1px solid var(--line);text-align:center}

.rail{background:var(--rail);color:var(--rail-text);padding:12px 6px;display:flex;flex-direction:column;align-items:center;gap:2px;overflow-y:auto;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail-logo{flex:none;width:34px;height:34px;border-radius:9px;background:var(--logo-bg);color:var(--logo-ink);display:grid;place-items:center;font-weight:800;font-size:var(--fs-sub);margin-bottom:var(--sp-2)}
.rail-item,.tab-item{position:relative;flex:none;width:52px;height:48px;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:inherit;text-decoration:none;background:none;border:0;padding:0}
.rail-item:hover,.tab-item:hover{background:var(--rail-on);color:var(--on-rail)}
.rail-item.is-on,.tab-item.is-on{background:var(--rail-on);color:var(--on-rail)}
.rail-item.is-pending{opacity:.55}
.rail-label{font-size:var(--fs-rail);line-height:1.1;white-space:nowrap}
.rail-bottom{margin-top:auto}
.rail-badge{position:absolute;top:3px;right:5px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--accent);color:var(--on-tone);font-size:var(--fs-rail);line-height:16px;text-align:center}
.tabbar{display:none}

.list-col{background:var(--bg-side);border-right:1px solid var(--line);padding:14px 8px;overflow-y:auto;min-width:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.list-head{display:flex;align-items:baseline;justify-content:space-between;padding:0 4px}
.list-title{font-size:var(--fs-sub);font-weight:700}
.list-head small{font-size:var(--fs-cap);color:var(--text-2)}
.list-close{display:none}
.list-search{height:32px;font-size:var(--fs-body)}
.list-filter{display:flex;background:var(--rule);padding:3px;border-radius:8px;gap:0}
.filter-btn{flex:1;min-width:0;height:26px;border:0;background:none;border-radius:6px;font-size:var(--fs-cap);font-weight:600;color:var(--text-2);padding:0 2px;white-space:nowrap}
.filter-btn.is-on{background:var(--panel);color:var(--text);box-shadow:var(--sh-1)}
.list-group{font-size:var(--fs-cap);color:var(--text-2);margin:14px 4px 6px}
.list-rows .list-group:first-child{margin-top:4px}
.list-empty{font-size:var(--fs-cap);color:var(--text-2);padding:8px 4px}
.stu-row{width:100%;height:34px;margin-bottom:2px;border:0;background:none;border-radius:8px;padding:0 8px;display:grid;grid-template-columns:12px auto auto 1fr auto;align-items:center;gap:6px;text-align:left;min-width:0}
.stu-row b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stu-row small{color:var(--text-2);font-weight:400;white-space:nowrap}
.stu-row .badge{background:none;padding:0;color:var(--text-2)}
.stu-row:hover{background:color-mix(in srgb,var(--accent-soft) 50%,transparent)}
.stu-row.is-sel{background:var(--ink);color:var(--on-ink)}
.stu-row.is-sel small,.stu-row.is-sel .badge{color:var(--on-ink);opacity:.72}
.stu-row.is-sel .dot{color:var(--on-ink)}
.dot{display:inline-grid;place-items:center;width:12px;font-size:var(--fs-cap);line-height:1;color:var(--t,var(--info))}

.main-col{min-width:0;overflow-y:auto;outline:none;background:var(--bg)}
.head{position:sticky;top:0;z-index:5;min-height:56px;padding:6px 20px;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);background:var(--bg);border-bottom:1px solid var(--line)}
.head-left,.head-right{display:flex;align-items:center;gap:var(--sp-2);min-width:0}
.head-right{flex:none}
.head-student{display:flex;align-items:center;gap:var(--sp-2);min-width:0;flex-wrap:wrap}
.head-name{font-size:var(--fs-title);font-weight:700;white-space:nowrap}
.head-meta{color:var(--text-2);font-size:var(--fs-cap)}
.head-pick,.head-stats{display:none}
.head-bell{position:relative}
.head-user small{font-weight:400;color:var(--text-2)}
.main-body{padding:var(--sp-4) 20px 48px;display:flex;flex-direction:column;gap:var(--sp-5);min-width:0}
.side-col{border-left:1px solid var(--line);background:var(--bg);overflow-y:auto;min-width:0}
.side-body{padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-5)}
.side-close{display:none}

.popover{position:absolute;top:60px;right:16px;z-index:30;width:320px;max-width:calc(100% - 24px);max-height:70%;overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-2);padding:8px}
.pop-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:6px 8px 8px}
.pop-item{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);width:100%;padding:8px;border:0;border-top:1px solid var(--rule);background:none;text-align:left}
.pop-item--btn:hover{background:var(--panel-tint)}
.pop-sub{display:block;color:var(--text-2)}
.pop-empty{padding:12px 8px}
.pop-foot{padding:8px;border-top:1px solid var(--rule);font-size:var(--fs-body)}
.pop-menu{display:flex;flex-direction:column}
.pop-menu>button{height:36px;border:0;border-top:1px solid var(--rule);background:none;text-align:left;padding:0 8px}
.pop-menu>button:hover:not(:disabled){background:var(--panel-tint)}
.pop-menu>button:disabled{color:var(--text-3)}
.pop-theme{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:8px;border-top:1px solid var(--rule)}

.banners{flex:none}
.banner{min-height:28px;padding:4px 12px;display:flex;align-items:center;justify-content:center;gap:var(--sp-2);font-size:var(--fs-cap);font-weight:600;background:var(--banner-bg);color:var(--banner-ink);border-bottom:1px solid var(--line)}
.banner--info{background:var(--info-soft);color:var(--info-ink)}
.banner-text{min-width:0;overflow-wrap:anywhere}
.banner-btn,.banner-x{border:1px solid currentColor;background:none;color:inherit;border-radius:6px;font-size:var(--fs-cap);font-weight:700;padding:1px 8px;min-height:22px}
.banner-x{border:0;padding:0 4px}

.auth{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-4);padding:24px 16px;overflow-y:auto}
.auth-card{width:100%;max-width:440px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:24px;display:flex;flex-direction:column;gap:var(--sp-3)}
.auth-card h1{font-size:var(--fs-title)}
.auth-logo{background:var(--rail);color:var(--on-rail);margin:0}
.auth-foot{max-width:440px;text-align:center;font-size:var(--fs-cap);color:var(--text-2)}

/* ---------- 컴포넌트 ---------- */
.stack{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}
.row{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;min-width:0}
.cols-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
.cols-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1);padding:14px 16px;min-width:0}
.is-click{cursor:pointer}
.is-click:hover{background:var(--panel-tint)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 14px;border-radius:8px;border:1px solid var(--line-strong);background:var(--panel);font-size:var(--fs-body);font-weight:700;white-space:nowrap}
.btn:hover:not(:disabled){background:var(--panel-tint)}
.btn--primary{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.btn--primary:hover:not(:disabled){background:var(--ink);opacity:.9}
.btn--danger{background:var(--panel);border-color:var(--bad);color:var(--bad-ink)}
.btn--danger:hover:not(:disabled){background:var(--bad-soft)}
.btn--small{height:28px;padding:0 10px;font-size:var(--fs-cap)}
.btn--block{width:100%}
.btn.is-on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.btn:disabled{background:var(--line-strong);border-color:var(--line-strong);color:var(--panel);opacity:.8}
.icon-btn{display:inline-grid;place-items:center;width:30px;height:30px;border:0;border-radius:8px;background:none;color:var(--text-2);font-size:var(--fs-body)}
.icon-btn:hover{background:var(--rule);color:var(--text)}
.push-left{margin-right:auto}

.badge{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:5px;font-size:var(--fs-cap);font-weight:700;white-space:nowrap;background:var(--t-soft,var(--rule));color:var(--t-ink,var(--text-2))}
.tag{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:5px;font-size:var(--fs-cap);font-weight:700;background:var(--t-soft,var(--accent-soft));color:var(--t-ink,var(--accent-ink))}
.chip{display:inline-flex;align-items:center;gap:4px;height:26px;max-width:100%;padding:0 10px;border-radius:13px;border:1px solid transparent;background:var(--t-soft,var(--accent-soft));color:var(--t-ink,var(--accent-ink));font-size:var(--fs-cap);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
button.chip:hover:not(:disabled){border-color:var(--t,var(--accent))}
.chip.is-on{background:var(--ink);color:var(--on-ink)}
.chip--sm{height:22px;padding:0 8px;border-radius:11px}
.chip-x{border:0;background:none;color:inherit;padding:0 2px;font-size:var(--fs-body);line-height:1}
.chips,.multi{display:flex;flex-wrap:wrap;gap:6px}

/* 칩 한 줄 (ui.chipRow) — 넘치면 +N */
.chiprow{display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:nowrap;overflow:hidden}
.chiprow--wrap{flex-wrap:wrap;overflow:visible}
.chiprow>*{flex:none}
.chiprow-more{font-size:var(--fs-cap);font-weight:700;color:var(--text-2)}

/* 숫자 한 줄 (ui.statRow) — 큰 카드 여러 개 대신 */
.statrow{display:flex;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1);overflow:hidden;min-width:0}
.statrow-item{flex:1 1 120px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;padding:10px 14px;border:0;border-left:1px solid var(--rule);background:none;color:inherit;text-align:left}
.statrow-item:first-child{border-left:0}
button.statrow-item:hover{background:var(--panel-tint)}
.statrow-item.is-on{background:var(--panel-tint);box-shadow:inset 3px 0 0 var(--t,var(--accent))}
.statrow-v{font-size:var(--fs-num);line-height:1.15;color:var(--t-ink,var(--text))}
.statrow-l{font-size:var(--fs-cap);color:var(--text-2);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* 접기 (ui.disclosure) — 한 줄 요약만 보이고 누르면 상세 */
.disc{min-width:0}
.disc>summary{display:flex;align-items:center;gap:6px;min-height:24px;padding:2px 0;list-style:none;cursor:pointer;color:var(--text-2);font-size:var(--fs-cap);font-weight:600;border-radius:var(--r-sm)}
.disc>summary::-webkit-details-marker{display:none}
.disc>summary::before{content:'\25B8';color:var(--text-3);transition:transform .12s}
.disc[open]>summary::before{transform:rotate(90deg)}
.disc>summary:hover{color:var(--text)}
.disc-body{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-1) 0 var(--sp-2) 14px;font-size:var(--fs-body);color:var(--text-2);min-width:0;overflow-wrap:anywhere}

.seg{display:inline-flex;max-width:100%;overflow-x:auto;background:var(--rule);padding:3px;border-radius:8px;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg button{flex:none;height:28px;padding:0 12px;border:0;border-radius:6px;background:none;font-size:var(--fs-body);font-weight:600;color:var(--text-2);white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.seg button[aria-selected="true"]{background:var(--panel);color:var(--text);box-shadow:var(--sh-1)}
.seg-count{font-size:var(--fs-cap);color:var(--accent-ink)}

.input,.tags{width:100%;min-height:34px;padding:6px 10px;border:1px solid var(--line-strong);border-radius:8px;background:var(--panel);color:var(--text)}
textarea.input{resize:vertical;line-height:1.5}
.input::placeholder,.tags-input::placeholder,.memo textarea::placeholder{color:var(--text-3)}
.input:disabled{background:var(--rule);color:var(--text-2)}
.form{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--sp-3)}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field--full{grid-column:span 12}.field--half{grid-column:span 6}.field--third{grid-column:span 4}.field--quarter{grid-column:span 3}
.field-label{font-size:var(--fs-cap);font-weight:600;color:var(--text-2);display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.field-hint{color:var(--text-2)}
.field-error{color:var(--bad-ink);font-weight:600}
.field-error:empty{display:none}
.field-static{padding:6px 0;overflow-wrap:anywhere}
.has-error .input,.has-error .tags{border-color:var(--bad)}
.req{color:var(--bad-ink)}
.check{display:flex;align-items:center;gap:var(--sp-2);min-height:34px;font-weight:600}
.check input{width:18px;height:18px;accent-color:var(--accent)}
.tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tags-list{display:contents}
.tags-input{flex:1;min-width:90px;border:0;background:none;outline-offset:4px;padding:2px 0}
.score{display:flex;flex-wrap:wrap;align-items:center;gap:3px}
.score button[role="radio"]{width:28px;height:28px;border-radius:6px;border:1px solid var(--line-strong);background:var(--panel);font-size:var(--fs-cap);font-weight:600;color:var(--text-2);padding:0}
.score button.on{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.score button.on.best{background:var(--good);border-color:var(--good);color:var(--on-tone)}
.score .skip{border:0;background:none;font-size:var(--fs-cap);color:var(--text-2);margin-left:6px;text-decoration:underline}
.form-error:empty{display:none}

.table-wrap{width:100%;overflow-x:auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1)}
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-body)}
.tbl th{position:sticky;top:0;text-align:left;font-size:var(--fs-cap);font-weight:700;color:var(--text-2);background:var(--panel-tint);padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:8px 10px;border-bottom:1px solid var(--rule);vertical-align:middle;overflow-wrap:anywhere}
.tbl tr:last-child td{border-bottom:0}
.tbl--compact th,.tbl--compact td{padding:6px 8px}
.tbl .al-right{text-align:right}.tbl .al-center{text-align:center}
.tbl tr.is-click:hover td{background:var(--panel-tint)}
.tbl-empty td{color:var(--text-2);text-align:center;padding:18px 10px}

.stat{display:flex;flex-direction:column;gap:2px;text-align:left;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--t,var(--line));border-radius:var(--r-md);box-shadow:var(--sh-1);padding:14px 16px;min-width:0}
button.stat:hover{background:var(--panel-tint)}
.stat-label{font-size:var(--fs-cap);color:var(--text-2);font-weight:600}
.stat-value{font-size:var(--fs-num);line-height:1.15;color:var(--t-ink,var(--text))}
.stat-sub{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-2)}

.rec{min-height:32px;display:grid;grid-template-columns:minmax(44px,auto) 1fr minmax(44px,auto);align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:0 12px}
.rec-label{font-size:var(--fs-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
.rec-right{text-align:right;color:var(--t-ink,var(--text))}
.bar{display:block;height:4px;border-radius:2px;background:var(--rule);overflow:hidden}
.bar i{display:block;height:100%;border-radius:2px;background:var(--t,var(--accent))}

.rate{display:grid;grid-template-columns:72px 1fr;align-items:center;gap:var(--sp-2);background:var(--rail);color:var(--on-rail);border-radius:var(--r-md);padding:14px 18px}
.rate b{font-size:var(--fs-num);color:var(--on-rail)}
.rate .track{height:4px;border-radius:2px;background:color-mix(in srgb,var(--on-rail) 18%,transparent);overflow:hidden}
.rate .track i{display:block;height:100%;background:var(--on-rail)}
.rate small{display:block;margin-top:6px;color:color-mix(in srgb,var(--on-rail) 75%,transparent)}

.grid8-wrap{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.grid8{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.grid8-empty{grid-column:1/-1;background:var(--panel);padding:18px;margin:0}
.cell{background:var(--panel);padding:14px 16px;min-height:140px;display:flex;flex-direction:column;gap:4px;min-width:0}
.cell header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:4px}
.cell .d{color:var(--date);font-size:var(--fs-body);text-decoration:underline;text-underline-offset:3px}
.cell p{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px;font-size:var(--fs-body)}
.cell p small{color:var(--text-2)}
.cell .rng{color:var(--info-ink);font-weight:700}
.cell footer{margin-top:auto;padding-top:6px;border-top:1px dashed var(--line-strong);font-size:var(--fs-cap);font-style:italic;color:var(--text-2)}
.grid8-foot{padding:8px 16px;border-top:1px solid var(--line);text-align:right;font-size:var(--fs-cap);color:var(--text-2)}

.sec{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
.sec-head{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.sec-head h3{font-size:var(--fs-sub);font-weight:700;display:inline-flex;align-items:center;gap:6px}
.sec-hint{color:var(--text-2)}
.sec-actions{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.sec-toggle{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:2px 4px 2px 0;border-radius:6px}
.sec-caret{display:inline-block;color:var(--text-2);transition:transform .12s}
.sec-toggle[aria-expanded="true"] .sec-caret{transform:rotate(90deg)}
.sec-body{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}
.sec--sensitive{border:1px dashed var(--warn);border-radius:var(--r-md);padding:10px 12px;background:var(--panel-tint)}
/* 테두리 없는 가벼운 섹션(§11.3 상자 줄이기): 제목은 작은 라벨, 직계 카드는 상자를 벗는다 */
.sec--plain>.sec-head h3{font-size:var(--fs-cap);font-weight:700;color:var(--text-2)}
.sec--plain>.sec-body>.card{border:0;box-shadow:none;background:none;padding:0}
.is-masked .sensitive-body,.hr-masked .modal .sensitive-body{filter:blur(7px);user-select:none;pointer-events:none}

.empty{border:1px dashed var(--line-strong);border-radius:var(--r-md);padding:22px 16px;text-align:center;color:var(--text-2);display:flex;flex-direction:column;align-items:center;gap:10px}
/* 안내는 흰 카드 + 얇은 좌측 띠. 색은 글리프와 띠에만 */
.notice{display:flex;gap:10px;padding:12px 14px;border-radius:var(--r-md);border:1px solid var(--line);border-left:3px solid var(--t,var(--info));background:var(--panel);color:var(--text)}
.notice--error{--t:var(--bad);--t-ink:var(--bad-ink);--t-soft:var(--bad-soft)}
.notice--warn{--t:var(--warn);--t-ink:var(--warn-ink);--t-soft:var(--warn-soft)}
.notice--ok{--t:var(--good);--t-ink:var(--good-ink);--t-soft:var(--good-soft)}
.notice--info{--t:var(--info);--t-ink:var(--info-ink);--t-soft:var(--info-soft)}
.notice-g{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--t);color:var(--on-tone);font-size:var(--fs-cap);font-weight:800}
.notice-main{min-width:0;display:flex;flex-direction:column;gap:4px;overflow-wrap:anywhere}
.notice-main strong{color:var(--t-ink)}
.notice-fix{font-size:var(--fs-body)}

.memo{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1);padding:14px 16px;display:flex;flex-direction:column;gap:var(--sp-2)}
.memo textarea{width:100%;border:0;resize:vertical;padding:0;line-height:26px;background:repeating-linear-gradient(transparent 0 25px,var(--rule) 25px 26px);background-attachment:local;color:var(--text)}
.add-row{width:100%;height:38px;border:1px dashed var(--line-strong);border-radius:var(--r-md);background:none;color:var(--text-2);font-size:var(--fs-cap)}
.add-row:hover{background:var(--panel-tint)}

.toasts{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:var(--sp-2);align-items:center;width:max-content;max-width:calc(100vw - 24px);pointer-events:none}
.toast{pointer-events:auto;display:flex;gap:var(--sp-2);align-items:flex-start;max-width:520px;padding:10px 14px;border-radius:var(--r-md);background:var(--rail);color:var(--on-rail);box-shadow:var(--sh-2);font-size:var(--fs-body);cursor:pointer;overflow-wrap:anywhere}
.toast-g{flex:none;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:var(--fs-cap);font-weight:800;background:var(--good);color:var(--on-tone)}
.toast--warn .toast-g{background:var(--warn)}
.toast--error .toast-g{background:var(--bad)}

.modal-backdrop{position:fixed;inset:0;z-index:60;background:var(--backdrop);display:flex;align-items:center;justify-content:center;padding:16px}
.modal{width:100%;max-width:560px;max-height:90%;display:flex;flex-direction:column;background:var(--bg);border-radius:var(--r-lg);box-shadow:var(--sh-2);outline:none}
.modal--wide{max-width:1040px}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:14px 16px 10px 20px}
.modal-head h2{font-size:var(--fs-sub);font-weight:700}
.modal-body{padding:4px 20px 16px;overflow-y:auto;min-height:0}
.modal-foot{display:flex;justify-content:flex-end;gap:var(--sp-2);flex-wrap:wrap;padding:12px 20px;border-top:1px solid var(--line)}
.confirm-msg{white-space:pre-wrap;overflow-wrap:anywhere}
.more-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-2)}
.more-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 4px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--panel);color:var(--text);text-decoration:none;font-size:var(--fs-cap);font-weight:600}
.more-item.is-on{background:var(--ink);color:var(--on-ink)}

.chart{display:block;width:100%;max-width:100%;overflow:visible}
.chart--radar{width:auto;margin:0 auto}
.chart text{font-family:var(--font);font-size:var(--fs-cap);fill:var(--text-2)}
.chart .chart-val{fill:var(--text);font-weight:700}
.chart .chart-empty{font-size:var(--fs-cap)}
.chart-grid{stroke:var(--line);stroke-width:1}
.chart-ring{fill:none;stroke:var(--line);stroke-width:1}
.chart-line{fill:none;stroke:var(--t,var(--accent));stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart-dot{fill:var(--t,var(--accent));stroke:var(--panel);stroke-width:1.5}
.chart-bar{fill:var(--t,var(--accent))}
.chart-track{fill:var(--rule)}
.chart-area{fill:var(--accent);fill-opacity:.18;stroke:var(--accent);stroke-width:2;stroke-linejoin:round}
.stacked{display:flex;flex-direction:column;gap:var(--sp-2)}
.stacked-bar{display:flex;height:22px;border-radius:6px;overflow:hidden;background:var(--rule)}
.stacked-bar i{display:grid;place-items:center;min-width:2px;background:var(--t,var(--accent));color:var(--on-tone);font-style:normal;font-size:var(--fs-cap);font-weight:700;overflow:hidden;white-space:nowrap;border-right:1px solid var(--panel)}
.stacked-legend{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:4px 12px;font-size:var(--fs-cap);color:var(--text-2)}
.stacked-legend li{display:inline-flex;align-items:center;gap:4px}
.swatch{width:10px;height:10px;border-radius:2px;background:var(--t,var(--accent))}

/* 오늘 화면 — 학생 줄(흰 카드 + 얇은 좌측 띠). 이름 한 번, 칩 최대 3개, 근거는 접는다 */
.pcard{display:flex;flex-direction:column;gap:var(--sp-1);min-height:46px;text-align:left;width:100%;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--t,var(--line));border-radius:var(--r-md);box-shadow:var(--sh-1);padding:12px 14px;min-width:0}
.pcard+.pcard{margin-top:var(--sp-3)}
button.pcard:hover{background:var(--panel-tint)}
.pcard-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.pcard-name{border:0;background:none;padding:0;color:inherit;font-size:var(--fs-title);font-weight:700;text-align:left;white-space:nowrap}
.pcard-name:hover{text-decoration:underline}
.pcard-why{font-size:var(--fs-body);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pcard ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:2px;font-size:var(--fs-body)}
.pcard li small{color:var(--text-2)}
.heat td,.heat th{text-align:center}
.heat td:first-child,.heat th:first-child{text-align:left;white-space:nowrap}
.heat-cell{display:inline-block;min-width:34px;padding:2px 6px;border-radius:4px;background:var(--t-soft,transparent);color:var(--t-ink,var(--text-2));font-weight:700;font-variant-numeric:tabular-nums}
.link-btn{border:0;background:none;padding:0;color:var(--info-ink);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.dday-row{display:grid;grid-template-columns:56px 1fr;gap:var(--sp-2);align-items:baseline;padding:6px 0;border-top:1px solid var(--rule);font-size:var(--fs-body)}
.dday-row:first-child{border-top:0}
.dday-row b{color:var(--accent-ink)}

/* ---------- 반응형 ---------- */
@media (max-width:1100px){
  .app,.app-shell.no-side .app{grid-template-columns:56px 184px minmax(0,1fr)}
  .app-shell.no-list .app,.app-shell.no-list.no-side .app{grid-template-columns:56px minmax(0,1fr)}
  .rail-item{width:46px}
  .head-stats{display:inline-flex}
  .side-col{display:block;position:absolute;top:0;right:0;bottom:0;z-index:20;width:300px;max-width:90%;background:var(--bg);box-shadow:var(--sh-2);transform:translateX(105%);transition:transform .18s ease;visibility:hidden}
  .side-col.is-open{transform:none;visibility:visible}
  .side-close{display:inline-grid;margin:8px 8px 0 auto}
  .grid8{grid-template-columns:repeat(2,1fr)}
  .cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .app,.app-shell.no-side .app,.app-shell.no-list .app,.app-shell.no-list.no-side .app{grid-template-columns:minmax(0,1fr)}
  .rail{display:none}
  .tabbar{flex:none;display:flex;justify-content:space-around;align-items:center;height:56px;background:var(--rail);color:var(--rail-text);padding:0 4px}
  .tab-item{flex:1;max-width:72px;height:48px}
  .list-col,.app-shell.no-list .list-col{display:none;position:absolute;inset:0;z-index:25;padding:14px 12px}
  .list-col.is-open{display:flex}
  .list-close{display:inline-grid}
  .stu-row{height:44px}
  .filter-btn{height:34px}
  .list-search{height:40px}
  .head{padding:6px 12px;flex-wrap:wrap}
  .head-pick{display:inline-flex}
  .head-name{font-size:var(--fs-sub)}
  .head-meta{display:none}
  .head-user small{display:none}
  .main-body{padding:var(--sp-3) var(--sp-3) 32px;gap:var(--sp-5)}
  .grid8,.cols-2,.cols-3{grid-template-columns:minmax(0,1fr)}
  .statrow-item{flex:1 1 40%;padding:8px 12px}
  .pcard-name{font-size:var(--fs-sub)}
  .btn,.input,.icon-btn{min-height:40px}
  .btn--small{min-height:36px}
  .score button{width:40px;height:40px}
  .form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .field--full,.field--half,.field--third{grid-column:span 2}
  .field--quarter{grid-column:span 1}
  .modal-backdrop{padding:0;align-items:flex-end}
  .modal,.modal--wide{max-width:100%;max-height:92%;border-radius:var(--r-lg) var(--r-lg) 0 0}
  .popover{top:56px;right:8px}
  .more-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* ---------- 인쇄 (종이는 토큰이 아니라 실제 흑백으로 고정한다) ---------- */
.print-area{display:none}
@media print{
  html,body,#app{height:auto!important;overflow:visible!important;background:#fff!important;color:#000}
  .rail,.tabbar,.list-col,.head,.side-col,.banners,.footnote,.toasts,.popover,.modal-backdrop,.skip-link,.no-print{display:none!important}
  .app-shell,.app,.main-col{display:block!important;height:auto!important;overflow:visible!important}
  .main-body{padding:0}
  body.printing>*:not(.print-area){display:none!important}
  .print-area{display:block!important;padding:0;font-size:11pt;color:#000}
  .print-area h1{font-size:15pt;margin-bottom:10pt}
  .print-area .btn,.print-area .icon-btn,.print-area .sec-actions,.print-area .add-row{display:none!important}
  .print-area .sensitive-body{display:none!important}
  .print-foot{margin-top:14pt;font-size:9pt;color:#444}
  .card,.stat,.table-wrap,.notice,.memo,.pcard,.grid8-wrap,.statrow{box-shadow:none!important;break-inside:avoid}
  /* 흑백 인쇄에서도 구분되도록 상태는 테두리 굵기·글리프로 남긴다 */
  .badge,.chip,.tag,.heat-cell{border:1px solid #000;background:none!important;color:#000!important}
  .disc[open]>summary::before{transform:none}
  .disc-body{display:flex!important}
  .rate{background:none!important;color:#000!important;border:1px solid #000}
  .rate b,.rate small{color:#000!important}
  .rate .track{background:#ccc!important}.rate .track i{background:#000!important}
  a{color:#000;text-decoration:none}
}