:root{
--ink:#14181d; --paper:#fff; --sub:#5f6672; --faint:#98a0ad; --line:#e3e6ea; --line2:#c9ced6;
--accent:#9d3427; --wash:#f6f7f8;
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none !important} /* .gate/.adm-gate 의 display:flex|grid 가 hidden 을 덮어쓰던 문제 */
html,body{height:100%}
body{font-family:"Apple SD Gothic Neo",-apple-system,"Malgun Gothic",sans-serif;
color:var(--ink);background:var(--paper);font-size:15px;line-height:1.62;-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
a{color:inherit}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.02em}
table{border-collapse:collapse;width:100%}
/* ================= 로그인 ================= */
.gate{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
@media(max-width:880px){.gate{grid-template-columns:1fr}}
.gate-left{background:var(--ink);color:#eef1f4;padding:clamp(28px,5vw,64px);display:flex;flex-direction:column}
.kicker{font-size:12px;letter-spacing:.14em;color:#8b95a3}
.brand{font-size:clamp(40px,7vw,68px);line-height:1.02;margin:14px 0 0;color:#fff}
.brand-sub{font-size:14px;color:#9aa4b2;margin-top:10px}
.gate-rule{height:1px;background:#2b323b;margin:26px 0 22px}
.dd{display:flex;align-items:baseline;gap:12px;margin-bottom:22px;flex-wrap:wrap}
.dd-label{font-size:12px;color:#8b95a3}
.dd-num{font-size:38px;line-height:1;color:#e8a598;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.dd-when{font-size:13px;color:#9aa4b2}
.sched{font-size:13px;color:#c3cad3}
.sched td{padding:6px 0;border-bottom:1px solid #262d36;vertical-align:top}
.sched td:first-child{width:96px;color:#8b95a3;font-variant-numeric:tabular-nums;white-space:nowrap}
.sched .more{color:#8b95a3;border:none}
.gate-foot{margin-top:auto;padding-top:26px;font-size:11.5px;color:#6d7784}
.gate-right{display:flex;align-items:center;justify-content:center;padding:clamp(28px,5vw,64px)}
.gate-form{width:min(360px,100%)}
.gate-form h2{font-size:22px}
.gate-form .hint{font-size:13px;color:var(--sub);margin:8px 0 30px}
.f{display:block;margin-bottom:20px}
.f span{display:block;font-size:12px;color:var(--faint);letter-spacing:.06em;margin-bottom:4px}
.f input,.f select{width:100%;border:none;border-bottom:1.5px solid var(--line2);padding:7px 2px;font-size:19px;background:transparent;outline:none;transition:border-color .15s;border-radius:0}
.f input:focus,.f select:focus{border-bottom-color:var(--accent)}
.gate-form button[type=submit],.gate-form #loginBtn,.gate-form #gateBtn{width:100%;background:var(--ink);color:#fff;padding:14px;font-size:15px;font-weight:700;margin-top:6px}
.gate-form button[type=submit]:hover,.gate-form #loginBtn:hover,.gate-form #gateBtn:hover{background:#000}
.gate-form button[type=submit]:disabled,.gate-form #loginBtn:disabled,.gate-form #gateBtn:disabled{opacity:.5}
.err{color:var(--accent);font-size:13px;margin-top:14px;line-height:1.55}
.back{display:inline-block;margin-top:26px;font-size:12.5px;color:var(--faint);text-decoration:none}
.back:hover{color:var(--accent)}
/* ================= 앱 ================= */
.top{display:flex;align-items:center;gap:18px;padding:14px clamp(16px,4vw,40px);background:var(--ink);color:#e8ecf1;flex-wrap:wrap}
.top .who b{font-size:16px;color:#fff}
.top .who span{font-size:12.5px;color:#98a4b3;margin-left:8px}
.top .next{margin-left:auto;font-size:12.5px;color:#98a4b3;display:flex;align-items:baseline;gap:8px}
.top .next b{font-size:19px;color:#e8a598;font-variant-numeric:tabular-nums}
.top button{font-size:12.5px;color:#98a4b3;padding:4px 2px}
.top button:hover{color:#fff}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);padding:0 clamp(16px,4vw,40px);
overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{padding:13px 14px 11px;font-size:14px;font-weight:600;color:var(--sub);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--ink);border-bottom-color:var(--accent)}
.tabs button i{font-style:normal;font-size:11.5px;color:var(--faint);margin-left:4px}
/* 탭이 화면보다 길 때 — 양옆에 세모와 옅은 그러데이션으로 「메뉴가 더 있다」를 알린다.
sticky 로 붙인 폭 0짜리 칸이라 탭 차례·줄 높이에는 영향이 없다. --tabpad 는 그 줄의 좌우 여백(그만큼 끌어당겨 화면 끝에 붙인다). */
.tabs{--tabpad:clamp(16px,4vw,40px);--tabgap:2px}
.subtabs{--tabpad:0px;--tabgap:2px}
.tab-edge{display:none;position:sticky;flex:0 0 0;width:0;align-self:stretch;z-index:3;opacity:0;pointer-events:none;transition:opacity .14s;
--edge:var(--accent);--edge-glow:rgba(157,52,39,.55);--edge-bg:#fff}
.tabs .tab-edge,.subtabs .tab-edge{display:block}
.tab-edge-l{left:0;margin-right:calc(-1 * var(--tabgap,0px))}
.tab-edge-r{right:0;margin-left:calc(-1 * var(--tabgap,0px))}
.tab-edge:before{content:"";position:absolute;top:0;bottom:0;width:58px}
/* 세모 — 눈에 들어오도록 크게(14px 높이) 잡고 가장자리에서 8px 안쪽으로 들여 발광까지 준다 */
.tab-edge:after{content:"";position:absolute;top:50%;margin-top:-8px;width:0;height:0;border:8px solid transparent;
filter:drop-shadow(0 0 3px var(--edge-glow)) drop-shadow(0 0 7px var(--edge-glow))}
.tab-edge-l:before{left:calc(-1 * var(--tabpad));background:linear-gradient(90deg,var(--edge-bg) 42%,rgba(255,255,255,0))}
.tab-edge-r:before{right:calc(-1 * var(--tabpad));background:linear-gradient(270deg,var(--edge-bg) 42%,rgba(255,255,255,0))}
.tab-edge-l:after{left:calc(12px - var(--tabpad));border-right-color:var(--edge);border-left-width:0}
.tab-edge-r:after{right:calc(12px - var(--tabpad));border-left-color:var(--edge);border-right-width:0}
.tabs.has-l .tab-edge-l,.tabs.has-r .tab-edge-r,
.subtabs.has-l .tab-edge-l,.subtabs.has-r .tab-edge-r,
.roster .r-items.has-l .tab-edge-l,.roster .r-items.has-r .tab-edge-r{opacity:1;pointer-events:auto;cursor:pointer}
@media (prefers-reduced-motion:reduce){.tab-edge{transition:none}}
@media print{.tab-edge{display:none!important}}
main{max-width:960px;margin:0 auto;padding:26px clamp(16px,4vw,40px) 90px}
.sec{margin-bottom:38px}
.sec-h{display:flex;align-items:baseline;gap:10px;padding-bottom:7px;border-bottom:2px solid var(--ink);margin-bottom:14px;flex-wrap:wrap}
.sec-h h2{font-size:17px}
.sec-h .note{font-size:12px;color:var(--faint);margin-left:auto}
.sub{color:var(--sub);font-size:13.5px}
.muted{color:var(--faint);font-size:12.5px}
.lead{font-size:14.5px;line-height:1.75}
ul.list{padding-left:17px}
ul.list li{margin-bottom:5px;line-height:1.7}
.kv{font-size:13.5px}
.kv td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.kv td:first-child{width:132px;color:var(--faint);font-size:12.5px;white-space:nowrap}
.kv tr:first-child td{border-top:1px solid var(--ink)}
.dl{display:flex;flex-wrap:wrap;gap:0 26px;font-size:13px;color:var(--sub)}
.dl b{color:var(--ink)}
/* 타임라인 */
.tl-wrap{margin:6px 0 20px}
.tl svg{width:100%;height:auto;display:block}
.tl-axis{stroke:var(--ink);stroke-width:1}
.tl-tick{stroke:var(--line2);stroke-width:1}
.tl-dot{fill:var(--accent)}
.tl-dot.second{fill:var(--ink)}
.tl-lbl{font-size:9.5px;fill:#42506b;font-family:inherit}
.tl-date{font-size:9px;fill:var(--faint);font-family:inherit}
.tl-today{stroke:var(--accent);stroke-width:1;stroke-dasharray:3 3}
/* 진행 막대 */
.bar{height:4px;background:var(--line);position:relative;margin:7px 0 4px}
.bar i{position:absolute;left:0;top:0;bottom:0;background:var(--ink);display:block}
.bar i.accent{background:var(--accent)}
/* 지원 학교 */
.pick{padding:20px 0;border-bottom:1px solid var(--line)}
.pick:first-of-type{border-top:1px solid var(--ink)}
.pick-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.pick-h .rank{font-size:11.5px;color:var(--faint);letter-spacing:.06em}
.pick-h h3{font-size:16.5px}
.pick-h .major{font-size:14px;color:var(--sub)}
.pick-h .dday{margin-left:auto;font-size:12.5px;color:var(--sub)}
.pick-h .dday b{color:var(--accent);font-size:15px;font-variant-numeric:tabular-nums}
.pick-adm{font-size:12.5px;color:var(--faint);margin-bottom:10px}
.qlist{font-size:13.5px;margin-top:12px}
.qlist li{margin-bottom:7px;line-height:1.65}
.qlist .src{font-size:11px;color:var(--faint);margin-left:5px}
.mini{font-size:12px;color:var(--accent);padding:2px 0;border-bottom:1px solid transparent}
.mini:hover{border-bottom-color:var(--accent)}
.pending{font-size:13px;color:var(--faint);padding:14px 0}
/* 질문·답변 */
.qfilter{display:flex;gap:2px;flex-wrap:wrap;margin-bottom:4px}
.qfilter button{font-size:12.5px;color:var(--sub);padding:5px 9px;border-bottom:2px solid transparent}
.qfilter button.on{color:var(--ink);border-bottom-color:var(--ink);font-weight:600}
.q{padding:20px 0;border-bottom:1px solid var(--line)}
.q:first-of-type{border-top:1px solid var(--ink)}
.q-h{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.q-n{font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums;min-width:20px}
.q-cat{font-size:11px;color:var(--accent);letter-spacing:.04em}
.q-t{flex:1 1 100%;font-size:15.5px;font-weight:600;line-height:1.55;margin-top:2px}
.q-meta{font-size:11.5px;color:var(--faint);margin-left:auto}
.q-hint{font-size:12.5px;color:var(--sub);margin-top:6px}
.q-body{margin-top:11px}
.q textarea{width:100%;min-height:104px;border:1px solid var(--line);padding:11px 13px;font-size:14px;line-height:1.75;resize:vertical;outline:none;background:#fff}
.q textarea:focus{border-color:var(--ink)}
.q-tools{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:12.5px;color:var(--sub)}
.q-time b{font-variant-numeric:tabular-nums;color:var(--ink)}
.q-time.over b{color:var(--accent)}
.q-gauge{width:130px;height:3px;background:var(--line);position:relative}
.q-gauge i{position:absolute;left:0;top:0;bottom:0;background:var(--ink)}
.q-gauge i.over{background:var(--accent)}
.q-act{margin-left:auto;display:flex;gap:12px;align-items:center}
.btn{font-size:12.5px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line2);padding:3px 1px}
.btn:hover{border-bottom-color:var(--ink)}
.btn.solid{background:var(--ink);color:#fff;border:none;padding:7px 14px}
.btn.solid:hover{background:#000}
.btn.ghost{color:var(--sub)}
.state{font-size:11.5px;color:var(--faint)}
.state.on{color:#2f7a5c}
.fb{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.fb-h{font-size:11.5px;font-weight:700;color:var(--accent);letter-spacing:.04em}
.fb-h.ai{color:var(--sub)}
.fb p{font-size:13.5px;line-height:1.75;white-space:pre-wrap;margin-top:3px}
.fb-at{font-size:11px;color:var(--faint);margin-top:3px}
/* 모의 면접 */
.modal{position:fixed;inset:0;background:rgba(8,10,13,.94);color:#eef1f4;display:flex;align-items:center;justify-content:center;padding:24px;z-index:60}
.modal-in{width:min(680px,100%);text-align:center}
.modal .stage{font-size:12px;letter-spacing:.14em;color:#8b95a3}
.modal .qq{font-size:clamp(20px,3.4vw,30px);line-height:1.45;font-weight:700;margin:20px 0 26px;color:#fff}
.modal .clock{font-size:56px;font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:1}
.modal .clock.warn{color:#e8a598}
.modal .mbar{height:2px;background:#2b323b;margin:20px 0 26px;position:relative}
.modal .mbar i{position:absolute;left:0;top:0;bottom:0;background:#e8a598}
.modal .acts{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.modal .acts button{font-size:13.5px;color:#c3cad3;border-bottom:1px solid #3a424d;padding:4px 2px}
.modal .acts button:hover{color:#fff;border-bottom-color:#fff}
.modal .acts button.primary{background:#fff;color:var(--ink);border:none;padding:10px 20px;font-weight:700}
/* 대화 */
.msg{margin-bottom:16px;max-width:78%}
.msg.me{margin-left:auto;text-align:right}
.msg .bubble{display:inline-block;text-align:left;padding:10px 14px;font-size:13.5px;line-height:1.7;white-space:pre-wrap;border:1px solid var(--line)}
.msg.me .bubble{background:var(--ink);color:#fff;border-color:var(--ink)}
.msg .meta{font-size:11px;color:var(--faint);margin-top:4px}
.send{display:flex;gap:10px;align-items:flex-end;margin-top:18px;border-top:1px solid var(--ink);padding-top:14px}
.send textarea{flex:1;min-height:70px;border:1px solid var(--line);padding:10px 12px;font-size:13.5px;resize:vertical;outline:none}
.send textarea:focus{border-color:var(--ink)}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--ink);color:#fff;font-size:13px;padding:10px 18px;z-index:70;opacity:0;transition:opacity .18s}
.toast.on{opacity:1}
@media print{.top,.tabs,.toast{display:none}}
/* ================= 교사 화면 ================= */
.adm-gate{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.adm-gate form{width:min(340px,100%)}
.adm-gate h1{font-size:20px}
.adm-gate p{font-size:13px;color:var(--sub);margin:8px 0 26px}
.adm-wrap{max-width:1180px;margin:0 auto;padding:0 clamp(14px,3vw,28px) 80px}
.adm-top{display:flex;align-items:center;gap:16px;padding:13px clamp(14px,3vw,28px);background:var(--ink);color:#e8ecf1;flex-wrap:wrap}
.adm-top b{color:#fff;font-size:15px}
.adm-top .stat{font-size:12.5px;color:#98a4b3}
.adm-top .stat em{font-style:normal;color:#e8a598;font-weight:700}
.adm-top .sp{margin-left:auto}
.adm-top a,.adm-top button{font-size:12.5px;color:#98a4b3;text-decoration:none}
.adm-top a:hover,.adm-top button:hover{color:#fff}
#pwBtn.on{color:#fff}
#pwBtn.must{color:#ffb3a7;font-weight:700}
#pwBtn i{font-style:normal;margin-left:3px}
.grid{display:grid;grid-template-columns:var(--rs,280px) 16px minmax(0,1fr);column-gap:8px;row-gap:0;align-items:start;margin-top:22px}
@media(max-width:860px){.grid{grid-template-columns:1fr}}
.roster{border-top:1px solid var(--ink);position:sticky;top:12px}
/* ── 학생 목록 접기 — 목록과 본문 사이 손잡이 ──────────────────────────
접으면 본문이 화면 전체를 쓴다. 피드백을 쓰거나 참고 자료를 옆에 펼칠 때를 위한 것 */
/* 목록을 display:none 으로 빼면 격자에서 빠져 손잡이·본문이 한 칸씩 밀린다 — 칸 구성을 함께 바꾼다 */
.grid.rs-off{grid-template-columns:16px minmax(0,1fr)}
.grid.rs-off>.roster{display:none}
.rs-handle{position:sticky;top:calc(var(--hdr,45px) + 10px);height:calc(100vh - var(--hdr,45px) - 24px);
display:flex;align-items:center;justify-content:center;align-self:start}
.rs-handle:before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--line);transition:background .14s}
.rs-handle:hover:before{background:var(--line2)}
.rs-handle button{position:relative;width:16px;height:46px;padding:0;border:1px solid var(--line);border-radius:8px;
background:#fff;color:var(--faint);cursor:pointer;display:flex;align-items:center;justify-content:center;
transition:border-color .14s,color .14s,box-shadow .14s}
.rs-handle button:hover{border-color:var(--ink);color:var(--ink);box-shadow:0 0 0 3px rgba(20,24,29,.05)}
.rs-handle button i{display:block;width:5px;height:5px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
transform:rotate(45deg);margin-left:2px}
.grid.rs-off .rs-handle button i{transform:rotate(-135deg);margin-left:-1px}
@media(max-width:860px){.rs-handle{display:none}}
.roster button{display:flex;width:100%;align-items:baseline;gap:8px;padding:9px 6px;border-bottom:1px solid var(--line);text-align:left;font-size:13.5px}
.roster button:hover{background:var(--wash)}
.roster button.on{background:var(--ink);color:#fff}
.roster button.on .r-sub{color:#b9c2cd}
.roster .r-nm{font-weight:600}
.roster .r-sub{font-size:11.5px;color:var(--faint);margin-left:auto;font-variant-numeric:tabular-nums}
.roster .r-wait{color:var(--accent);font-weight:700}
.roster button.on .r-wait{color:#e8a598}
.a-item{padding:18px 0;border-bottom:1px solid var(--line)}
.a-item:first-of-type{border-top:1px solid var(--ink)}
.a-q{font-size:14.5px;font-weight:600;line-height:1.5}
.a-meta{font-size:11.5px;color:var(--faint);margin-top:3px}
.a-body{font-size:13.5px;line-height:1.8;white-space:pre-wrap;margin:9px 0 0;padding:10px 12px;background:var(--wash)}
.a-none{font-size:12.5px;color:var(--faint);margin-top:8px}
.fb-edit{margin-top:10px}
.fb-edit textarea{width:100%;min-height:76px;border:1px solid var(--line);padding:9px 11px;font-size:13px;line-height:1.7;resize:vertical;outline:none}
.fb-edit textarea:focus{border-color:var(--ink)}
.fb-edit .row{display:flex;gap:12px;align-items:center;margin-top:7px;flex-wrap:wrap}
.tag{font-size:11px;color:var(--accent);letter-spacing:.04em}
.tag.wait{color:#b45309;font-weight:700}
.qadm{padding:12px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.qadm .row{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.qadm .row .sc{font-size:11.5px;color:var(--faint);min-width:76px}
.form-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px}
.form-row label{display:flex;flex-direction:column;gap:3px;font-size:11.5px;color:var(--faint)}
.form-row input,.form-row select,.form-row textarea{border:1px solid var(--line);padding:7px 9px;font-size:13.5px;outline:none;background:#fff}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{border-color:var(--ink)}
.form-row .grow{flex:1;min-width:220px}
.editor{width:100%;min-height:280px;border:1px solid var(--line);padding:12px 14px;font-size:13px;line-height:1.7;font-family:inherit;resize:vertical;outline:none}
.editor:focus{border-color:var(--ink)}
.talk{padding:16px 0;border-bottom:1px solid var(--line)}
.talk:first-of-type{border-top:1px solid var(--ink)}
.talk-h{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:8px}
.talk-h b{font-size:14.5px}
.talk-h .t{font-size:11.5px;color:var(--faint);margin-left:auto}
/* 교사 계정 */
.warnbar{border-top:1px solid #d8b48a;border-bottom:1px solid #d8b48a;padding:11px 0;margin:18px 0 0;font-size:13.5px;color:#7a4f16}
.warnbar b{color:#5c3a0c}
.pwbox{border-top:1px solid var(--ink);padding-top:14px;margin:18px 0 0}
.fb-by{font-size:11.5px;color:var(--faint);margin-bottom:2px}
.fb-other{margin-top:10px;padding:9px 11px;background:var(--wash);font-size:13px;line-height:1.7;white-space:pre-wrap}
.fb-other .who{font-size:11.5px;font-weight:700;color:var(--accent);display:block;margin-bottom:2px}
.warn-t{font-size:12px;color:var(--accent);line-height:1.55;display:inline-block;margin-top:2px}
.warnbox{font-size:13px;line-height:1.7;color:#7a2b1e;border-top:1px solid #e0c4bd;border-bottom:1px solid #e0c4bd;padding:9px 0;margin:0 0 10px}
.warnbox b{color:var(--accent)}
/* ================= v8: 아바타 · 달력 · 대학 카드 · 대화 ================= */
.av{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;flex-shrink:0;background:#e7eaee;color:#5f6672;font-weight:700;line-height:1}
.av img{width:100%;height:100%;object-fit:cover;display:block}
.av.none{border:1px solid var(--line)}
.top .me{display:flex;align-items:center;gap:9px}
.top .me-t{display:flex;flex-direction:column;line-height:1.25}
.top .me-t b{color:#fff;font-size:14.5px}
.top .me-t i{font-style:normal;font-size:11.5px;color:#98a4b3}
.top .me button{font-size:11.5px;color:#98a4b3;border:1px solid #333b46;padding:3px 8px;margin-left:2px}
.top .me button:hover{color:#fff;border-color:#5c6673}
.sub-h{font-size:14px;margin:18px 0 7px}
.list{padding-left:17px}
.list li{margin-bottom:5px;line-height:1.7}
/* 달력 */
/* ── 달력: 달마다 한 줄 — 왼쪽 달력, 오른쪽 그 달 일정. 넉 달이 세로로 이어진다 ── */
.cal-wrap{display:block}
.cal-row{display:grid;grid-template-columns:minmax(0,3fr) minmax(250px,2fr);gap:24px;padding:14px 0 20px;border-bottom:1px solid var(--line)}
.cal-row:last-child{border-bottom:0;padding-bottom:6px}
.cal-h{font-size:15px;font-weight:700;padding-bottom:6px;border-bottom:1px solid var(--ink);margin-bottom:6px}
.cal table{width:100%;table-layout:fixed;border-collapse:collapse}
.cal th{font-size:11.5px;font-weight:500;color:var(--faint);padding:5px 0}
.cal th.sun{color:#b45c4e}.cal th.sat{color:#4e6fb4}
.cal td{height:58px;text-align:left;vertical-align:top;padding:4px 4px 2px;position:relative;font-size:12.5px;color:#42506b;border-top:1px solid var(--line)}
.cal td.pad{color:transparent;border-top-color:transparent}
.cal td .d{display:inline-block;min-width:19px;line-height:19px}
.cal td.today .d{color:#d1342a;font-weight:800}
.cal td.has .d{font-weight:700;color:var(--ink)}
.cal td.hol .d{color:#b45c4e;font-weight:700}
.cal .dots{display:none;gap:2px;justify-content:center}
.cal .dots i{width:5px;height:5px;border-radius:50%;display:inline-block}
.cal .cls{display:block;margin-top:1px}
.cal .cl{display:block;font-style:normal;font-size:10.5px;line-height:1.35;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:none;border:0}
.cal .cl.k-me{color:var(--accent);font-weight:700}
.cal .cl.k-camp{color:var(--faint)}
.cal .cl.k-common{color:#6b7683}
.cal .cl.k-exam{color:var(--ink);font-weight:700}
.cal .cl.k-js{color:#4e6fb4}
.cal .cl.k-hol{color:#b45c4e}
.cal .cl.k-sch{color:#2f7c62}
.cal .cl.more{color:var(--faint)}
.cal-side{min-width:0}
.cal-side-h{font-size:15px;font-weight:700;padding-bottom:6px;border-bottom:1px solid var(--ink);margin-bottom:2px;display:flex;justify-content:space-between;align-items:baseline}
.cal-side-h span{font-weight:400;color:var(--faint);font-size:11.5px}
.cal-side-list{max-height:372px;overflow:auto}
.cal-side .ev-list{margin-top:0}
.cal-side .ev-list tr:first-child td{border-top:0}
.cal-side .cal-day{margin:8px 0 10px;border-top:0;padding:8px 10px 10px;border:1px solid var(--ink)}
.cal-day-x{margin-left:auto;font-size:12px;color:var(--faint);padding:0 2px}
.cal-day-x:hover{color:var(--ink)}
/* 종류 색은 점(i)에만 — 같은 클래스가 목록의 tr 에도 붙으므로 바탕색은 점에만 준다 */
i.k-me{background:var(--accent)}
i.k-camp{background:#fff;border:1px solid var(--accent)}
i.k-common{background:#8c96a3}
i.k-exam{background:var(--ink)}
i.k-js{background:#4e6fb4}
i.k-hol{background:#b45c4e}
i.k-sch{background:#2f7c62}
.ev-list tr.past td{color:var(--faint)}
.ev-list .ev-past{font-size:11px;color:var(--faint)}
.ev-list tr.k-hol .ev-t{color:#b45c4e}
.ev-list tr.k-sch .ev-t{color:#2f7c62}
.ev-list tr.k-exam .ev-t{font-weight:700}
.ev-list tr.ev-m td{border-top:1px solid var(--ink);border-bottom:0;font-weight:700;font-size:13px;padding:14px 8px 4px}
.ev-list tr.ev-m:first-child td{padding-top:0}
/* 일정 탭 안의 작은 탭 */
.sec-tabs{padding-bottom:0}
.cal-tabs{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:8px 0 0}
.cal-tabs button{padding:9px 12px 8px;font-size:13px;font-weight:600;color:var(--sub);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.cal-tabs button:hover{color:var(--ink)}
.cal-tabs button.on{color:var(--ink);border-bottom-color:var(--accent)}
.cal-tabs button i{font-style:normal;font-size:11px;color:var(--faint);margin-left:4px}
@media(max-width:860px){
.cal-row{grid-template-columns:1fr;gap:12px}
.cal td{height:40px;padding:3px 0 0;text-align:center;border-top:0}
.cal .cls{display:none}
.cal .dots{display:flex;position:absolute;left:0;right:0;bottom:2px}
.cal-side-list{max-height:none}
}
.cal-legend{display:flex;gap:16px;flex-wrap:wrap;margin:16px 0 4px;font-size:11.5px;color:var(--sub)}
.cal-legend span{display:inline-flex;align-items:center;gap:5px}
.cal-legend i{width:7px;height:7px;border-radius:50%;display:inline-block}
.ev-list{margin-top:10px;font-size:13px}
.ev-list td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.ev-list tr:first-child td{border-top:1px solid var(--ink)}
.ev-d{width:170px;color:var(--sub);white-space:nowrap}
.ev-t b{font-weight:600}
.ev-s{color:var(--faint);margin-left:6px;font-size:11.5px}
.ev-n{width:64px;text-align:right;color:var(--faint);font-variant-numeric:tabular-nums}
.ev-list tr.k-me{background:transparent}
.ev-list tr.k-me .ev-t{font-weight:700;color:var(--accent)}
/* 지망 대학 카드 */
.uv{padding:26px 0;border-bottom:1px solid var(--line)}
.uv:first-of-type{border-top:1px solid var(--ink)}
.uv-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.uv-rank{font-size:11px;color:var(--faint);letter-spacing:.06em}
.uv-h h3{font-size:18px}
.uv-major{font-size:14px;color:var(--sub)}
.uv-dd{margin-left:auto;font-size:12px;color:var(--sub);display:flex;align-items:baseline;gap:6px}
.uv-dd b{font-size:17px;color:var(--accent);font-variant-numeric:tabular-nums}
.uv-adm{font-size:12.5px;color:var(--faint);margin:2px 0 14px}
.flow{display:flex;align-items:stretch;gap:0;margin:0 0 12px;flex-wrap:wrap}
.fbox{border:1px solid var(--line);padding:9px 14px;min-width:150px}
.fbox.on{border-color:var(--ink)}
.fbox b{display:block;font-size:11px;color:var(--faint);letter-spacing:.04em}
.fbox span{display:block;font-size:13.5px;font-weight:600;margin-top:2px}
.fbox em{display:block;font-style:normal;font-size:11px;color:var(--sub);margin-top:2px}
.farrow{width:26px;position:relative;flex-shrink:0}
.farrow::before{content:"";position:absolute;top:50%;left:0;right:6px;height:1px;background:var(--line2)}
.farrow::after{content:"";position:absolute;top:50%;right:5px;width:6px;height:6px;border-top:1px solid var(--line2);border-right:1px solid var(--line2);transform:translateY(-50%) rotate(45deg)}
.ratio{margin:0 0 14px}
.ratio-bar{display:flex;height:26px;font-size:11.5px;font-weight:600}
.ratio-bar span{display:flex;align-items:center;justify-content:center;color:#fff;white-space:nowrap}
.ratio-bar .doc{background:#8c96a3}
.ratio-bar .prac{background:#6b7684}
.ratio-bar .iv{background:var(--accent)}
.ratio-n{font-size:12px;color:var(--sub);margin-top:5px}
.uv-kind,.uv-blind{font-size:13px;line-height:1.7;margin:0 0 8px;color:#31405a}
.uv-kind span,.uv-blind span{display:inline-block;min-width:64px;color:var(--faint);font-size:11.5px;margin-right:6px}
.facts{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--line);margin:10px 0 12px}
.facts>div{padding:8px 18px 8px 0;margin-right:18px;border-right:1px solid var(--line)}
.facts>div:last-child{border-right:none}
.facts span{display:block;font-size:11px;color:var(--faint)}
.facts b{font-size:13.5px}
.crit{margin:12px 0}
.crit-row{display:flex;align-items:center;gap:10px;font-size:12.5px;padding:3px 0}
.crit-n{width:38%;color:#31405a}
.crit-b{flex:1;height:6px;background:var(--line);position:relative}
.crit-b i{position:absolute;left:0;top:0;bottom:0;background:var(--ink);display:block}
.crit-w{width:46px;text-align:right;color:var(--sub);font-variant-numeric:tabular-nums}
.crit-d{font-size:11.5px;color:var(--faint);margin:0 0 6px 38%;padding-left:10px;line-height:1.55}
.qbox{margin-top:16px}
.qbox h4,.tips h4,.cmp h4{font-size:13px;margin-bottom:7px}
.qbox h4 span{color:var(--accent);margin-left:4px}
.qol{padding-left:20px;font-size:13.5px}
.qol li{margin-bottom:7px;line-height:1.65}
.qsrc{display:block;font-size:11px;color:var(--faint);margin-top:1px}
.tips{margin-top:14px}
.tips ul{padding-left:17px;font-size:13px}
.tips li{margin-bottom:5px;line-height:1.65}
.src{font-size:11.5px;color:var(--faint);margin-top:12px}
.src a{color:var(--accent)}
.cmp{margin-bottom:22px}
.cmp table{font-size:12.5px}
.cmp th{text-align:left;font-size:11px;color:var(--faint);font-weight:500;padding:4px 8px;border-bottom:1px solid var(--ink)}
.cmp td{padding:8px;border-bottom:1px solid var(--line);vertical-align:middle}
.cmp-m{color:var(--sub);font-size:11.5px}
.cmp-bar{width:150px;position:relative}
.cmp-bar i{display:inline-block;height:7px;background:var(--accent);vertical-align:middle}
.cmp-bar span{margin-left:6px;color:var(--sub);font-variant-numeric:tabular-nums}
.cmp-d{color:var(--faint)}
/* 대화 */
.talk-list{display:flex;flex-direction:column;gap:14px;margin:18px 0 20px;max-height:none}
.msg{display:flex;gap:10px;align-items:flex-start;max-width:82%}
.msg.me{margin-left:auto;flex-direction:row-reverse}
.msg-in{min-width:0}
.msg-h{font-size:11.5px;color:var(--faint);margin-bottom:3px;display:flex;gap:7px;align-items:baseline}
.msg.me .msg-h{justify-content:flex-end}
.bubble{border:1px solid var(--line);padding:10px 13px;font-size:13.5px;line-height:1.75;word-break:break-word}
.bubble b{font-weight:700}
.msg.me .bubble{background:var(--wash);border-color:var(--line2);color:var(--ink)}
.send-box{border-top:1px solid var(--ink);padding-top:14px}
.send-act{display:flex;justify-content:flex-end;margin-top:8px}
.rte-wrap{border:1px solid var(--line);background:#fff}
.rte-wrap:focus-within{border-color:var(--ink)}
.rte-bar{display:flex;align-items:center;gap:3px;padding:6px 9px;border-bottom:1px solid var(--line);background:var(--wash);flex-wrap:wrap}
.rte-bar button{font-size:12px;padding:3px 7px;color:var(--sub);line-height:1.4}
.rte-bar button:hover{background:#eceef1;color:var(--ink)}
.rte-bar .sw{width:20px;height:20px;padding:0;background:var(--c);border:1px solid rgba(0,0,0,.08)}
.rte-bar .sep{width:1px;height:14px;background:var(--line2);margin:0 4px}
.rte{min-height:96px;padding:11px 13px;font-size:14px;line-height:1.75;outline:none;word-break:break-word}
.rte.empty::before{content:attr(data-ph);color:#aab4c4;pointer-events:none}
.rte b{font-weight:700}
/* 교사: 학생 화면 */
.roster button{display:flex;align-items:center;gap:8px;width:100%;padding:8px 6px;border-bottom:1px solid var(--line);text-align:left;font-size:13.5px}
.roster .r-nm{display:flex;flex-direction:column;line-height:1.25;font-weight:600}
.roster .r-nm i{font-style:normal;font-size:11px;color:var(--faint);font-weight:400}
.roster button.on .r-nm i{color:#b9c2cd}
.roster .r-sub{margin-left:auto;font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.roster button.on .r-sub{color:#e8a598}
.stu-top{display:flex;align-items:center;gap:14px;padding-bottom:12px;border-bottom:2px solid var(--ink)}
.stu-top h2{font-size:20px}
/* 머리줄 피드백 바로가기 ‹ 1/3 › — 점 하나가 미피드백 문항 하나, 찬 점이 지금 자리 */
.fb-nav{display:inline-flex;align-items:center;gap:5px;margin-left:2px;padding:6px 10px;border:1px solid var(--line);font-size:12.5px;color:var(--sub);white-space:nowrap}
.fb-nav.done{color:#2f7c62;border-color:transparent;padding-left:4px}
.fb-nav .fb-l{font-size:11.5px;color:var(--faint);margin-right:2px;padding:0;cursor:pointer}
.fb-nav .fb-l:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.fb-nav .fb-a{font-size:20px;line-height:1;padding:0 5px;color:var(--ink);cursor:pointer}
.fb-nav .fb-a:hover{color:var(--accent)}
.fb-nav .fb-n{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);padding:0 2px;font-size:14px;cursor:pointer}
.fb-nav .fb-n i{font-style:normal;color:var(--faint);margin:0 2px;font-weight:400}
.fb-nav .fb-n:hover{color:var(--accent)}
.fb-nav .fb-ok{font-weight:700}
.fb-dots{display:inline-flex;gap:5px;margin-left:6px;max-width:150px;flex-wrap:wrap}
.fb-dot{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--accent);background:#fff;padding:0;cursor:pointer;transition:transform .1s}
.fb-dot.on{background:var(--accent)}
.fb-dot:hover{transform:scale(1.3)}
.ansq.fb-cur{outline:2px solid var(--accent);outline-offset:6px}
.cal-later-h{margin-top:22px}
@media(max-width:760px){.fb-nav .fb-l,.fb-dots{display:none}.fb-nav{padding:4px 6px}}
.stu-dd{margin-left:auto;text-align:right}
.stu-dd b{display:block;font-size:22px;color:var(--accent);font-variant-numeric:tabular-nums;line-height:1}
.stu-dd span{font-size:12px;color:var(--sub)}
.foldcal{margin-top:22px;font-size:13px}
.foldcal summary{cursor:pointer;color:var(--sub);font-weight:600}
.foldcal summary:hover{color:var(--accent)}
.thread{padding:20px 0;border-bottom:1px solid var(--line)}
.thread:first-of-type{border-top:1px solid var(--ink)}
.thread-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:6px}
.thread-h b{font-size:14.5px}
.thread-h .t{margin-left:auto;font-size:11.5px;color:var(--faint)}
.me-photo{display:flex;align-items:center;gap:16px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.me-photo .btn{margin-right:8px}
.adm-top #meName{display:inline-flex;align-items:center;gap:7px}
.adm-top #meName span{color:#e8ecf1}
/* 로그인 모드 전환 */
.mode{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:0 0 22px}
.mode button{flex:1;padding:9px 0 8px;font-size:14px;font-weight:600;color:var(--faint);border-bottom:2px solid transparent;margin-bottom:-1px}
.mode button:hover{color:var(--ink)}
.mode button.on{color:var(--ink);border-bottom-color:var(--accent)}
.gate-form .f select{width:100%;border:none;border-bottom:1.5px solid var(--line2);padding:7px 2px;font-size:19px;background:transparent;outline:none;border-radius:0}
.gate-form .f select:focus{border-bottom-color:var(--accent)}
/* 준비 중 안내 · 답안 · 피드백 · 하위 탭 */
.soon{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;margin:6px 0 2px}
.soon-h{font-size:13px;font-weight:700;color:var(--accent);margin-bottom:5px}
.soon p{font-size:13.5px;line-height:1.75;color:var(--sub);margin:0}
.qol.big li{margin-bottom:14px}
.qol.big b{font-size:14.5px;font-weight:600}
.q-univ{display:inline-block;min-width:66px;color:var(--accent);font-size:11.5px;font-weight:700}
.q-hint{display:block;font-size:12.5px;color:var(--sub);margin-top:3px}
.ansq{padding:16px 0 18px;margin-bottom:14px;border-bottom:1px solid var(--line)} /* 문항 사이를 살짝 띄운다 — 강조 테두리가 다음 문항에 겹치지 않게 */
.ansq:first-of-type{border-top:1px solid var(--ink)}
.ansq-q{font-size:14.5px;font-weight:600;line-height:1.55;display:flex;gap:8px}
.ansq-q span{flex-shrink:0;width:20px;height:20px;border-radius:50%;background:#eef1f5;color:var(--sub);font-size:11px;display:flex;align-items:center;justify-content:center;margin-top:2px}
.ansq textarea{width:100%;min-height:96px;overflow:hidden;border:1px solid var(--line);padding:10px 12px;font-size:14px;line-height:1.75;resize:vertical;outline:none;margin-top:9px}
.ansq textarea:focus{border-color:var(--ink)}
.ansq-t{display:flex;align-items:center;gap:12px;margin-top:7px;font-size:12.5px;color:var(--sub)}
.ansq-t b{color:var(--ink);font-variant-numeric:tabular-nums}
.ansq-t .over b{color:var(--accent)}
.ansq-t .btn{margin-left:auto}
.ansq-b{font-size:13.5px;line-height:1.8;white-space:pre-wrap;background:var(--wash);padding:10px 12px;margin-top:9px}
.ansq-none{font-size:12.5px;color:var(--faint);margin-top:8px}
.fbb{margin-top:10px;padding-top:9px;border-top:1px solid var(--line)}
.fbb-h{font-size:11.5px;font-weight:700;color:var(--accent)}
.fbb.ai .fbb-h{color:var(--sub)}
.fbb p{font-size:13.5px;line-height:1.75;white-space:pre-wrap;margin:3px 0 0}
.fbb-at{font-size:11px;color:var(--faint)}
.subtabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:0 0 18px;overflow-x:auto}
.subtabs button{padding:9px 12px 8px;font-size:13px;font-weight:600;color:var(--sub);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.subtabs button:hover{color:var(--ink)}
.subtabs button.on{color:var(--ink);border-bottom-color:var(--accent)}
.subtabs button i{font-style:normal;font-size:11px;color:var(--faint);margin-left:4px}
/* 대학 마크 · 선택 목록 · 입시 통계 */
.umark{display:inline-flex;align-items:center;justify-content:flex-start;overflow:hidden;flex-shrink:0}
.umark img{width:auto;object-fit:contain;display:block}
.umark.light{background:var(--ink);padding:3px 7px}
.umark.none{background:var(--wash);border:1px solid var(--line);justify-content:center;color:var(--sub);font-weight:700;letter-spacing:-.03em}
.uvpick{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}
.uvpick button{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);background:#fff;text-align:left;min-width:186px}
.uvpick button:hover{border-color:var(--line2)}
.uvpick button.on{border-color:var(--ink);background:var(--wash)}
.uvp-t{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.uvp-t b{font-size:13.5px}
.uvp-t i{font-style:normal;font-size:11px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px}
.uvp-d{margin-left:auto;font-size:11.5px;color:var(--sub);white-space:nowrap;font-variant-numeric:tabular-nums}
.uvpick button.on .uvp-d{color:var(--accent);font-weight:700}
.uv-h .umark{margin-right:4px}
.uv-h{flex-wrap:wrap}
.cmp-wrap{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.stats{margin-top:22px;padding-top:16px;border-top:1px solid var(--ink)}
.stats h4{font-size:13px;margin-bottom:10px}
.stats-grid{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start;margin-bottom:12px}
.st-card{border:1px solid var(--line);padding:10px 14px;min-width:130px}
.st-card.wide{min-width:300px}
.st-card>span{display:block;font-size:11px;color:var(--faint);margin-bottom:4px}
.st-card>b{font-size:20px;font-variant-numeric:tabular-nums;display:block}
.st-sub{display:block;font-style:normal;font-size:11px;color:var(--sub);line-height:1.5;margin-top:4px;max-width:190px}
.trend svg{width:100%;height:auto;max-width:340px;display:block}
.tr-grid{stroke:var(--line);stroke-width:1}
.tr-line{fill:none;stroke:var(--accent);stroke-width:1.6}
.tr-dot{fill:var(--accent)}
.tr-dot.other{fill:#fff;stroke:var(--line2);stroke-width:1.5}
.tr-k{font-size:8px;fill:var(--faint);text-anchor:middle;font-family:inherit}
.tr-v{font-size:9.5px;fill:var(--ink);text-anchor:middle;font-family:inherit;font-weight:600}
.tr-y{font-size:9px;fill:var(--faint);text-anchor:middle;font-family:inherit}
.trend-n{font-size:11px;color:var(--faint);margin-top:2px;line-height:1.5}
.compet{display:flex;flex-direction:column;gap:3px;min-width:120px}
.cp-row{display:flex;align-items:center;gap:6px;font-size:11.5px}
.cp-y{color:var(--faint);width:18px}
.cp-b{flex:1;height:7px;background:var(--line);position:relative;min-width:44px}
.cp-b i{position:absolute;left:0;top:0;bottom:0;background:var(--ink)}
.cp-v{color:var(--sub);font-variant-numeric:tabular-nums;width:38px;text-align:right}
.st-table{font-size:12px;margin-top:6px}
.st-table th{text-align:left;font-size:10.5px;color:var(--faint);font-weight:500;padding:4px 7px;border-bottom:1px solid var(--ink)}
.st-table td{padding:6px 7px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.st-src{font-variant-numeric:normal;color:var(--faint);font-size:11px}
.st-src a{color:var(--accent)}
.st-fill{font-size:12px;color:var(--sub);margin-top:8px}
/* 방과후 면접반 읽기 자료 */
.chnav{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:0 0 20px;overflow-x:auto}
.chnav button{padding:9px 15px 8px;font-size:13.5px;font-weight:600;color:var(--faint);white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
.chnav button:hover{color:var(--ink)}
.chnav button.on{color:var(--ink);border-bottom-color:var(--accent)}
.rd-h{font-size:21px;letter-spacing:-.03em;margin:0 0 18px}
.rd-body{max-width:760px}
.rd-body p{margin:0 0 13px;line-height:1.8;font-size:14.5px}
.rd-body h3{font-size:16px;margin:32px 0 12px;padding-bottom:6px;border-bottom:1px solid var(--ink)}
.rd-body h3:first-child{margin-top:0}
.rd-sub{font-size:13.5px;color:var(--sub);margin:20px 0 8px}
.rd-ul,.rd-ol{padding-left:19px;margin:0 0 14px}
.rd-ul li,.rd-ol li{margin-bottom:7px;line-height:1.75;font-size:14.5px}
.rd-ul{list-style:square}
.rd-q{border-left:none;padding:12px 0;margin:14px 0;font-size:15.5px;line-height:1.7;
border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);letter-spacing:-.02em}
.rd-tw{overflow-x:auto;margin:0 0 16px}
.rd-t{font-size:13.5px;min-width:420px}
.rd-t th{text-align:left;font-size:11.5px;color:var(--faint);font-weight:600;padding:6px 9px;border-bottom:1px solid var(--ink);white-space:nowrap}
.rd-t td{padding:9px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.65}
.rd-t .rd-k{font-weight:600;white-space:nowrap}
.rd-t3 td.rd-k{white-space:normal}
.rd-t3 th:first-child{width:80px}
.rd-box{border:1px solid var(--line);padding:15px 17px;margin:0 0 18px;background:var(--wash)}
.rd-box h4{font-size:13px;margin-bottom:9px}
.rd-box>*:last-child{margin-bottom:0}
.rd-box .rd-t{background:#fff}
.rd-act{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:14px 0;margin:22px 0 0}
.rd-act h4{font-size:13px;margin-bottom:9px}
.rd-act>*:last-child{margin-bottom:0}
.rd-ex{color:var(--sub);font-size:13px}
.rd-note{font-size:13px;color:var(--sub)}
.rd-src{font-size:12px;color:var(--faint);margin-top:22px;padding-top:10px;border-top:1px solid var(--line);line-height:1.7}
.rd-ql{list-style:none;padding:0;margin:0 0 16px;counter-reset:rq}
.rd-ql li{border-bottom:1px solid var(--line)}
.rd-ql label{display:flex;gap:10px;align-items:flex-start;padding:9px 2px;cursor:pointer;font-size:14px;line-height:1.65}
.rd-ql label:hover{background:var(--wash)}
.rd-ql input{margin-top:4px;flex-shrink:0;accent-color:var(--accent);width:14px;height:14px}
.rd-ql input:disabled{opacity:.35}
.rd-ql li span::before{counter-increment:rq;content:counter(rq) ". ";color:var(--faint)}
.rd-ql input:checked+span{color:var(--faint)}
.ql-c{font-size:11.5px;color:var(--faint);margin:0 0 4px !important;text-align:right;font-variant-numeric:tabular-nums}
.ql-c.done{color:var(--accent);font-weight:700}
.rd-move{display:flex;justify-content:space-between;margin-top:30px;padding-top:14px;border-top:1px solid var(--line)}
.rd-move button{font-size:13.5px;font-weight:600;color:var(--sub);padding:6px 0}
.rd-move button:hover{color:var(--accent)}
.st-fn{font-size:11.5px;color:var(--faint);line-height:1.65;margin-top:6px;padding-left:12px;text-indent:-12px}
.st-none{border-top:2px solid var(--accent);border-bottom:1px solid var(--line);
padding:11px 0 12px;margin:0 0 16px;font-size:13.5px;line-height:1.7;color:var(--ink)}
.st-none b{color:var(--accent)}
/* 선생님 메모 게시판 */
.memo-new{border:1px solid var(--line);padding:12px;margin-bottom:18px;background:var(--wash)}
.memo-new .rte-wrap{background:#fff}
.memo-pin{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--sub);margin-right:auto}
.memo-pin input{accent-color:var(--accent)}
.memo{border-top:1px solid var(--line);padding:14px 0}
.memo:first-of-type{border-top:1px solid var(--ink)}
.memo.pin{background:var(--wash);padding-left:12px;padding-right:12px}
.memo-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:7px}
.memo-h b{font-size:13.5px}
.memo-h .t{font-size:11.5px;color:var(--faint);margin-left:auto}
.memo-act{display:flex;gap:8px}
.memo-act button,.memo-r button{font-size:11.5px;color:var(--faint);text-decoration:underline;text-underline-offset:2px}
.memo-act button:hover,.memo-r button:hover{color:var(--accent)}
.memo-b{font-size:14px;line-height:1.75;word-break:break-word}
.memo-b b{font-weight:700}
.memo-open{font-size:12px;color:var(--faint);margin-top:8px}
.memo-open:hover{color:var(--accent)}
.memo-re{margin:10px 0 0;padding-left:14px;border-left:2px solid var(--line)}
.memo-r{display:flex;gap:8px;padding:7px 0}
.memo-r>div{flex:1;min-width:0}
.memo-rh{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.memo-rh b{font-size:12.5px}
.memo-rh .t{font-size:11px;color:var(--faint)}
.r-grp{margin-bottom:14px}
.r-gh{display:flex;align-items:baseline;gap:8px;font-size:11.5px;font-weight:700;color:var(--sub);
padding:0 4px 5px;border-bottom:1px solid var(--line);margin-bottom:4px}
.r-gh span{margin-left:auto;font-weight:500;color:var(--faint);font-size:11px}
.caution{font-size:13px;line-height:1.7;color:var(--sub);border-top:2px solid var(--accent);
border-bottom:1px solid var(--line);padding:10px 0 11px;margin:0 0 18px}
.caution b{color:var(--ink)}
.lb-short{display:none}
@media(max-width:640px){.lb-long{display:none}.lb-short{display:inline}}
/* ========== 휴대폰 (640px 이하) ========== */
@media(max-width:640px){
body{font-size:15px}
/* 로그인 */
.gate-left{padding:26px 20px 30px}
.gate-right{padding:26px 20px 40px}
.brand{font-size:30px}
.dd-num{font-size:34px}
.sched td{padding:7px 2px;font-size:12.5px}
.mode button{flex:1;padding:11px 0}
.f input,.f select{font-size:16px} /* iOS 확대 방지 */
/* 머리글 */
.top{gap:10px 14px;padding:12px 16px}
.top .next{margin-left:0;width:100%;order:3;gap:6px}
.adm-top{flex-wrap:wrap;gap:8px 12px;padding:12px 16px}
.adm-top .sp{display:none}
.adm-top .stat{width:100%;order:5;font-size:12px}
/* 탭 */
.tabs{padding:0 12px}
.tabs button{padding:12px 11px 10px;font-size:13.5px}
.subtabs button{padding:10px 10px 8px;font-size:12.5px}
main{padding:20px 16px 80px}
.adm-wrap{padding:18px 16px 70px}
.sec-h{gap:6px}
.sec-h h2{font-size:16px}
.sec-h .note{margin-left:0;width:100%;font-size:11.5px}
/* 지망 대학 고르기 — 한 줄에 하나, 누르기 쉽게 */
.uvpick{gap:6px}
.uvpick button{width:100%;min-width:0;padding:11px 12px}
.uvp-t i{max-width:none;flex:1}
/* 입시 결과 */
.stats-grid{gap:12px}
.st-card,.st-card.wide{min-width:0;width:100%}
.st-table{font-size:11.5px}
.st-table th,.st-table td{padding:5px 4px}
/* 대학 상세 */
.uv-h{gap:6px}
.uv-h h3{font-size:17px}
/* 명단 */
.roster{max-height:none;overflow:visible}
.roster button{padding:10px 8px}
/* 대화·메모 */
.msg{gap:8px}
.bubble{font-size:14px}
.rte-bar{flex-wrap:wrap;gap:2px;padding:5px 6px}
.rte-bar button{min-width:28px;min-height:28px}
.memo.pin{padding-left:10px;padding-right:10px}
.memo-h .t{margin-left:0;width:100%;order:9}
/* 읽기 자료 */
.rd-body p,.rd-ul li,.rd-ol li{font-size:14.5px}
.rd-h{font-size:19px}
.rd-box{padding:12px 13px}
.rd-ql label{padding:11px 2px}
.rd-ql input{width:17px;height:17px;margin-top:3px}
/* 표는 스스로 가로 스크롤 */
.kv,.st-table{display:block;overflow-x:auto;white-space:nowrap}
.kv td{white-space:normal;min-width:120px}
}
@media(max-width:400px){
.tabs button{padding:11px 8px 9px;font-size:13px}
.uvp-d{font-size:11px}
.rd-t{min-width:340px}
}
.uv-dd i{display:block;font-style:normal;font-size:11px;color:var(--faint);text-align:right;margin-top:1px}
/* 교사 일정: 담당 학생 강조 */
.cal-stu{display:inline-flex;align-items:baseline;gap:5px;margin:0 12px 5px 0;font-size:12.5px;color:var(--faint)}
.cal-stu i{font-style:normal;font-size:11.5px;color:var(--faint)}
.cal-stu.mine{color:var(--ink);font-weight:700}
.cal-stu.mine i{color:var(--sub);font-weight:400}
/* 면접이 아닌 고사(실기 등)는 붉게 — 일정표에서 면접과 섞이지 않게 */
.k-x{font-style:normal;color:var(--accent)}
.mine-key{color:var(--ink)}
.cal-ev.me{background:var(--ink);color:#fff}
/* 공지 게시판 (학생·교사 공용) */
/* 공지 왼쪽 · 팀 주간 계획표 오른쪽 고정 — 공지는 길게 내려가고 계획표는 화면에 붙어 따라온다 */
.post-wrap.has-side{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:28px;align-items:start}
.post-side{position:sticky;top:86px;max-height:calc(100vh - 100px);overflow:auto;border-left:1px solid var(--line);padding-left:20px}
.sp-team+.sp-team{margin-top:22px;padding-top:14px;border-top:2px solid var(--ink)}
.sp-h{display:flex;align-items:baseline;gap:8px;margin:0 0 8px;padding-bottom:6px;border-bottom:2px solid var(--ink)}
.sp-h b{font-size:15px}.sp-h span{font-size:11.5px;color:var(--faint)}
.sp-always,.sp-row{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px;line-height:1.6}
.sp-always{background:var(--wash);padding:8px 8px;border-bottom:0;margin-bottom:6px}
.sp-dl{font-size:11.5px;color:var(--sub);line-height:1.3;padding-top:2px}
.sp-dl b{display:block;font-size:12.5px;color:var(--ink)}.sp-dl i{font-style:normal;color:var(--faint);font-variant-numeric:tabular-nums}
.sp-dc{word-break:break-word;min-width:0}
.sp-wk{margin-top:12px}
.sp-wk-h{display:flex;align-items:baseline;gap:8px;margin:0 0 2px}
.sp-wk-h b{font-size:13px}.sp-wk-h i{font-style:normal;font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.sp-wk.now .sp-wk-h b{color:var(--accent)}
.sp-row.today{background:#fbefec}.sp-row.today .sp-dl b{color:var(--accent)}
.sp-row.past{color:var(--faint)}.sp-row.past .sp-dl b{color:var(--faint)}
.sp-none{font-size:12.5px;color:var(--faint);margin:4px 0 0}
@media(max-width:860px){.post-wrap.has-side{grid-template-columns:1fr;gap:18px}.post-side{position:static;max-height:none;border-left:0;padding:12px 0 8px;border-bottom:2px solid var(--ink);order:-1}}
.post{border-top:1px solid var(--line);padding:16px 0}
.post:first-of-type{border-top:1px solid var(--ink)}
.post.pin{background:var(--wash);padding:14px 14px 16px}
.post-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:8px}
.post-who{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.post-who b{font-size:13.5px}
.post-who i{font-style:normal;font-size:11.5px;color:var(--faint)}
.post-t{font-size:16px;margin:2px 0 7px;letter-spacing:-.02em}
.post-b{font-size:14.5px;line-height:1.8;word-break:break-word}
.post .tag{margin-left:auto}
.post.admin .memo-act{margin-left:auto}
/* 첨부 */
.atts{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.att{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);padding:7px 11px;
font-size:12.5px;background:#fff;max-width:100%}
.att:hover{border-color:var(--ink)}
.att i{font-style:normal;font-size:11px;color:var(--faint)}
.atts-img{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.att-img{display:flex;flex-direction:column;align-items:flex-start;gap:3px;border:1px solid var(--line);
padding:9px 12px;background:#fff;font-size:12.5px}
.att-img:hover{border-color:var(--ink)}
.att-ph{font-weight:700}
.att-img i{font-style:normal;font-size:11px;color:var(--faint);max-width:180px;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.atts-del{display:flex;flex-wrap:wrap;gap:8px;margin-top:7px}
.atts-del button{font-size:11.5px;color:var(--faint);text-decoration:underline;text-underline-offset:2px}
.atts-del button:hover{color:var(--accent)}
/* 첨부 고르기 */
.pend{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:9px;font-size:12.5px}
.pend-add{display:inline-block;border:1px solid var(--line2);padding:6px 12px;cursor:pointer;background:#fff}
.pend-add:hover{border-color:var(--ink)}
.pend-add input{display:none}
.pend-list{display:flex;flex-wrap:wrap;gap:6px}
.pend-i{display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid var(--line);padding:4px 8px;font-size:11.5px}
.pend-i i{font-style:normal;color:var(--faint)}
.pend-i button{color:var(--faint);font-size:13px;line-height:1}
.pend-i button:hover{color:var(--accent)}
.pend-hint{color:var(--faint);font-size:11px;margin-left:auto}
/* 접어 둔 편집 영역 */
.editbox{border-top:1px solid var(--line);margin-top:30px;padding-top:12px}
.editbox summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--sub);list-style:none}
.editbox summary::-webkit-details-marker{display:none}
.editbox summary::before{content:"▸ ";color:var(--faint)}
.editbox[open] summary::before{content:"▾ "}
.editbox summary:hover{color:var(--ink)}
/* 선생님 참고 자료 — 개념 사전 */
.rf-title{font-size:19px;letter-spacing:-.02em;margin:6px 0 4px}
.rf{max-width:780px}
.rf-lead{font-size:14px;line-height:1.8;color:var(--sub);padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:14px}
.rf-lead b{color:var(--ink)}
.rf-toc{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;margin-bottom:8px}
.rf-toc a{color:var(--sub);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line2)}
.rf-toc a:hover{color:var(--accent)}
.rf-item{border-top:1px solid var(--ink);padding:18px 0 8px;margin-top:14px}
.rf-item h3{font-size:15.5px;margin-bottom:6px}
.rf-item h4{font-size:12.5px;margin:16px 0 7px;color:var(--ink)}
.rf-src{font-size:12px;color:var(--faint);margin-bottom:10px}
.rf-did{font-size:13.5px;line-height:1.75;background:var(--wash);padding:10px 13px;margin-bottom:6px}
.rf-item p{font-size:13.5px;line-height:1.8;margin:0 0 10px}
.rf-item ul{padding-left:18px;margin:0 0 10px}
.rf-item li{font-size:13.5px;line-height:1.75;margin-bottom:6px}
.rf-t{font-size:12.5px;margin:8px 0 12px}
.rf-t th{text-align:left;font-size:11px;color:var(--faint);font-weight:600;padding:5px 8px;border-bottom:1px solid var(--ink)}
.rf-t td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.6}
.rf-t .rf-k{font-weight:700;white-space:nowrap}
.rf-svg{width:100%;max-width:420px;height:auto;display:block;margin:10px 0 12px;border:1px solid var(--line);padding:8px;box-sizing:border-box}
@media(max-width:640px){
.rf-toc{gap:4px 10px}
.rf-t{display:block;overflow-x:auto;white-space:nowrap}
.rf-t td{white-space:normal;min-width:110px}
}
.r-hb{display:block;font-style:normal;font-size:10.5px;color:var(--faint);line-height:1.3;font-variant-numeric:tabular-nums}
/* 참고 자료 — 확인 포인트 문답 블록 */
.rf-q{border:1px solid var(--line);border-left:none;border-right:none;padding:10px 2px 12px;margin:0 0 10px}
.rf-q + .rf-q{border-top:none;margin-top:-10px}
.rf-qq{font-weight:700;font-size:13.5px;margin-bottom:6px !important}
.rf-shallow{color:var(--sub);font-size:12.5px !important;margin-bottom:0 !important}
.rf-shallow b{color:var(--accent)}
/* 좁은 화면: 학생 목록이 본문과 겹치지 않게 (선언 순서 때문에 파일 끝에서 재정의) */
@media(max-width:860px){
.grid .roster{position:static;max-height:280px;overflow-y:auto;border-bottom:1px solid var(--ink)}
}
/* ═══════════ 탭 고정 + 시각 개선 (선언 순서상 파일 끝에서 재정의) ═══════════ */
/* 상단 탭: 스크롤해도 화면 위에 남는다 */
nav.tabs{position:sticky;top:0;z-index:40;background:#fff}
/* 선생님 화면 — 검은 줄과 메뉴를 한 덩어리로 붙여 두고, 아래로 내리면 함께 숨는다(위로 올리면 다시) */
.adm-head{position:sticky;top:0;z-index:60;background:#fff;transition:transform .14s linear;will-change:transform}
.adm-head nav.tabs{position:static;top:auto}
body.hdr-off .adm-head{transform:translateY(-100%)}
body.hdr-off{--hdr:0px}
@media (prefers-reduced-motion:reduce){.adm-head{transition:none}}
/* 교사 학생 화면의 서브탭: 머리 바로 아래에 겹쳐 고정(머리가 숨으면 맨 위로 올라온다) */
.subtabs{position:sticky;top:var(--hdr,45px);z-index:35;background:#fff;margin-top:0;padding-top:4px}
/* 선생님 화면의 학생 상세 — 이름 줄과 서브탭은 한 덩어리로 화면 위에 남는다(어느 문항을 보든 누구 답인지 보이게) */
.stu-head{position:sticky;top:var(--hdr,45px);z-index:36;background:#fff;padding-top:6px}
.stu-head .subtabs{position:static;top:auto;padding-top:4px}
@media(max-width:860px){.stu-head{position:static}.stu-head .subtabs{position:sticky;top:var(--hdr,41px)}}
@media(max-width:640px){.subtabs{top:var(--hdr,41px)}}
/* 선택된 탭: 밑줄에 더해 옅은 배경으로 지금 위치를 분명히 */
.tabs button{transition:background .12s,color .12s}
.tabs button.on{background:var(--wash)}
.tabs button i{background:var(--wash);padding:1px 6px;margin-left:6px;font-size:11px;color:var(--sub)}
.tabs button.on i{background:var(--accent);color:#fff}
.subtabs button{transition:background .12s,color .12s}
.subtabs button.on{background:var(--wash)}
.subtabs button i{background:var(--wash);padding:1px 5px;margin-left:5px;font-size:10.5px;color:var(--sub)}
.subtabs button.on i{background:var(--accent);color:#fff}
/* 학생 목록의 계열·팀 구분: 먹색 밴드로 또렷하게 */
.r-grp{margin-bottom:12px}
.r-gh{background:var(--ink);color:#fff;padding:5px 9px;margin-bottom:0;border-bottom:none;
font-size:11px;font-weight:700;letter-spacing:.03em}
.r-gh span{color:#98a4b3;font-weight:500}
.roster .r-grp button:first-of-type{border-top:none}
/* 지망 대학·참고자료 선택 카드: 선택된 것을 먹색으로 반전 */
.uvpick button{transition:background .12s,border-color .12s}
.uvpick button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.uvpick button.on .uvp-t i{color:#98a4b3}
.uvpick button.on .uvp-d{color:#e8a598}
.uvpick button.on .umark.none{background:#2a313a;border-color:#2a313a;color:#cdd4dd}
.uvpick button.on .umark.light{background:#2a313a}
/* 게시판 고정 글·중요 태그를 조금 더 분명히 */
.post.pin,.memo.pin{border-left:none;background:var(--wash)}
.tag{background:var(--ink);color:#fff;padding:2px 8px;font-size:10.5px;font-weight:700}
.tag.wait{background:var(--accent)}
/* 학생 목록: 넓은 화면에서도 목록 안에서 스스로 스크롤 — 페이지 스크롤과 분리 */
.grid .roster{position:sticky;top:calc(var(--hdr,45px) + 10px);max-height:calc(100vh - var(--hdr,45px) - 20px);overflow-y:auto}
@media(max-width:860px){
.grid .roster{position:static;max-height:300px;overflow-y:auto;border-bottom:1px solid var(--ink)}
}
/* 그룹 밴드가 목록 스크롤 안에서 살짝 붙어 따라오게 */
.roster .r-gh{position:sticky;top:0;z-index:5}
/* ═══ 선생님 참고자료 v2 — 시인성·원문 발췌·모범 답안 ═══ */
.rf-lead{color:#3a414b;font-size:14px}
.rf-item p{font-size:14px;color:var(--ink)}
.rf-item li{font-size:14px;color:var(--ink)}
.rf-did{font-size:14px;color:var(--ink)}
.rf-toc a{color:#3a414b}
.rf-glance{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:13.5px;border-top:2px solid var(--ink)}
.rf-glance th{width:104px;text-align:left;vertical-align:top;padding:8px 10px 8px 0;font-size:12.5px;color:var(--ink);border-bottom:1px solid var(--line);white-space:nowrap}
.rf-glance td{padding:8px 0;border-bottom:1px solid var(--line);line-height:1.7;color:var(--ink)}
.rf-glance td b{color:var(--accent)}
.rf-quote{position:relative;margin:8px 0 12px;padding:10px 12px 10px 36px;font-size:13.5px;line-height:1.85;color:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rf-quote::before{content:"❝";position:absolute;left:9px;top:8px;font-size:21px;color:var(--accent);line-height:1}
.rf-quote .rq-loc{display:block;font-size:12px;font-weight:800;color:var(--accent);margin-bottom:4px}
.rf-quote .rq-e{color:var(--sub)}
.rf-links{font-size:12.5px;color:#3a414b;margin:0 0 10px !important}
.rf-links b{color:var(--ink)}
.rf-links a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.rf-q{padding:12px 2px 14px}
.rf-qq{font-size:14px}
.rf-qq i{font-style:normal;font-weight:800;color:var(--accent);margin-right:7px}
.rf-why{font-size:13px !important;color:var(--ink);margin-bottom:9px !important;line-height:1.75 !important}
.rf-why b,.rf-tail b{color:var(--accent);font-size:11.5px;letter-spacing:.05em;margin-right:4px}
.rf-model{border:1px solid var(--ink);padding:11px 14px;margin:0 0 9px}
.rf-model .rm-l{display:block;font-size:11.5px;font-weight:800;letter-spacing:.05em;color:var(--accent);margin-bottom:5px}
.rf-model p{font-size:13.5px !important;line-height:1.85 !important;margin:0 !important;color:var(--ink)}
.rf-tail{font-size:13px !important;color:var(--ink);margin-bottom:0 !important;line-height:1.75 !important}
.rf-final{border-top:2px solid var(--ink);margin-top:18px;padding-top:14px}
.rf-final h3{font-size:15px;margin-bottom:8px}
.rf-final li{list-style:none;margin-bottom:7px}
.rf-final ul{padding-left:2px}
.rf-final li::before{content:"☐";margin-right:8px;color:var(--accent);font-weight:700}
/* ═══ 답안 댓글(선생님 코멘트) ═══ */
.cmts{margin-top:10px;border-left:2px solid var(--line);padding-left:12px}
.cmt{padding:7px 0;border-bottom:1px dashed var(--line)}
.cmt:last-child{border-bottom:0}
.cmt-h{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--ink)}
.cmt-h i{font-style:normal;font-weight:400;color:var(--sub);font-size:11.5px}
.cmt-h .cmt-del{margin-left:auto;border:0;background:none;color:var(--sub);font-size:11.5px;cursor:pointer;text-decoration:underline;text-underline-offset:2px;padding:0}
.cmt-h .cmt-del:hover{color:var(--accent)}
.cmt p{font-size:13px;line-height:1.75;margin-top:3px;white-space:pre-wrap}
.cmt-new{margin-top:10px}
.cmt-new textarea{width:100%;min-height:96px;border:1px solid var(--line);padding:10px 12px;font-size:13.5px;line-height:1.75;resize:vertical;outline:none;overflow:hidden}
.cmt-new textarea:focus{border-color:var(--ink)}
/* ═══ 질문·답안 인쇄 버튼 ═══ */
.sec-h .print-qa{font-size:12px;padding:4px 12px}
/* ═══ 학생 찾기(교사) ═══ */
.roster .r-find{border-bottom:2px solid var(--ink);padding:8px 6px 9px;background:#fff;position:sticky;top:0;z-index:6}
.roster .r-q{position:relative}
.roster .r-q input{width:100%;border:1px solid var(--line);padding:7px 26px 7px 9px;font-size:13px;outline:none;background:#fff}
.roster .r-q input:focus{border-color:var(--ink)}
.roster .r-q input::-webkit-search-cancel-button{display:none}
.roster .r-clr{position:absolute;right:4px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--sub);font-size:12px;cursor:pointer;padding:2px 4px}
.roster .r-clr:hover{color:var(--accent)}
.roster .r-modes{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}
.roster .r-modes button{width:auto;flex:none;display:inline-block;border:1px solid var(--line);background:#fff;padding:3px 8px;font-size:11.5px;color:var(--sub);cursor:pointer;border-bottom:1px solid var(--line)}
.roster .r-modes button:hover{border-color:var(--ink);color:var(--ink);background:#fff}
.roster .r-modes button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.roster .r-cnt{font-size:11.5px;color:var(--sub);margin-top:6px}
.roster .r-cnt span{color:var(--faint)}
.roster .r-none{padding:18px 6px;font-size:12.5px;color:var(--sub);line-height:1.7}
.roster .r-none span{color:var(--faint);font-size:11.5px}
.roster .r-gh.flat{background:var(--ink)}
.roster mark{background:#ffe9a8;color:inherit;padding:0 1px}
.roster button.on mark{background:#7a5c1e;color:#fff}
.roster .r-sub.due{color:var(--accent);font-weight:700}
.roster button.on .r-sub.due{color:#ffb3a3}
/* ═══ 사진 첨부 — 글과 함께 바로 보이게 ═══ */
.atts-img{display:flex;flex-wrap:wrap;gap:10px;margin-top:11px}
.att-fig{margin:0;max-width:100%;min-width:0}
.atts-img.many .att-fig{flex:1 1 220px;max-width:300px}
.att-fig .att-open{display:block;padding:0;border:1px solid var(--line);background:#fff;cursor:zoom-in;line-height:0;max-width:100%}
.att-fig .att-open:hover{border-color:var(--ink)}
.att-fig img{display:block;max-width:100%;max-height:380px;width:auto;height:auto;object-fit:contain}
.atts-img:not(.many) .att-fig img{max-width:min(100%,560px)}
.att-fig figcaption{font-size:11px;color:var(--faint);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:300px}
.att-load{display:inline-block;font-size:12px;color:var(--faint);border:1px dashed var(--line2);padding:12px 16px}
.att-load.err{color:var(--accent);border-color:var(--accent)}
.att-retry{color:var(--accent);text-decoration:underline;text-underline-offset:2px;font-size:12px;padding:0}
/* ═══ 학생: 지원 대학 조정 ═══ */
.pk-edit{margin-top:30px;padding-top:16px;border-top:2px solid var(--ink)}
.pk-edit h4{font-size:14px;margin-bottom:4px}
.pk-sub{font-size:13px;color:var(--sub);line-height:1.7;margin-bottom:12px}
.pk-t{font-size:13px;margin-bottom:14px}
.pk-t th{text-align:left;font-size:11px;color:var(--faint);font-weight:600;padding:5px 8px;border-bottom:1px solid var(--ink);white-space:nowrap}
.pk-t td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
.pk-t td:first-child{color:var(--faint);white-space:nowrap}
.pk-del{color:var(--sub);font-size:12px;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.pk-del:hover{color:var(--accent)}
.pk-add{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:8px}
.pk-add label{display:flex;flex-direction:column;gap:3px;font-size:11.5px;color:var(--faint);min-width:120px;flex:1 1 140px}
.pk-add label.pk-chk{flex:0 0 auto;flex-direction:row;align-items:center;gap:6px;font-size:12.5px;color:var(--sub);min-width:0;padding-bottom:8px}
.pk-add label.pk-chk input{accent-color:var(--accent)}
.pk-add input[type=text],.pk-add input:not([type]),.pk-add input[type=date]{border:none;border-bottom:1.5px solid var(--line2);padding:6px 2px;font-size:14px;outline:none;background:transparent;border-radius:0;width:100%}
.pk-add input:focus{border-bottom-color:var(--accent)}
.pk-add .btn.solid{flex:0 0 auto;padding:8px 18px;margin-bottom:2px}
@media(max-width:640px){.pk-t{display:block;overflow-x:auto;white-space:nowrap}.pk-t td{white-space:normal;min-width:80px}.pk-add label{flex:1 1 100%}}
/* 교사: 학생의 지원 대학 조정 내역 · 목록 표시 */
.r-chg{font-style:normal;color:var(--accent);font-size:12px;margin-left:5px;font-weight:700}
.roster button.on .r-chg{color:#ffb3a3}
.roster .r-modes button.has{border-color:var(--accent);color:var(--accent)}
.roster .r-modes button.has.on{background:var(--accent);color:#fff}
.chg-bar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0;margin:12px 0 4px;font-size:13px}
.chg-bar.pending{border-top:2px solid var(--accent)}
.chg-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-weight:700;margin-bottom:6px}
.chg-h .r-chg{margin-left:0}
.chg-h .btn{margin-left:auto}
.chg-h .muted{margin-left:auto}
.chg-bar ul{list-style:none;padding:0}
.chg-bar li{display:flex;gap:8px;align-items:baseline;padding:3px 0;font-size:12.5px;color:var(--ink)}
.chg-bar li b{color:var(--accent);min-width:28px}
.chg-bar li span{margin-left:auto;color:var(--faint);font-size:11.5px;white-space:nowrap}
/* ═══ 달력: 날짜를 누르면 그날 일정 ═══ */
.cal td.has{cursor:pointer}
.cal td.has:hover .d{text-decoration:underline;text-underline-offset:2px}
.cal td.sel .d{box-shadow:0 0 0 1.5px var(--accent);border-radius:50%;width:19px;height:19px;display:inline-flex;align-items:center;justify-content:center}
.cal-day{border-top:1px solid var(--ink);margin-top:14px;padding-top:9px;font-size:13px}
.cal-day-h{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
.cal-day-h b{font-size:13.5px}
.cal-day-h span{color:var(--faint);font-size:11.5px}
.cal-day ul{list-style:none;padding:0;margin:0}
.cal-day li{display:flex;align-items:baseline;gap:8px;padding:3px 0;border-bottom:1px solid var(--line)}
.cal-day li:last-child{border-bottom:none}
.cal-day li i{width:7px;height:7px;border-radius:50%;display:inline-block;flex-shrink:0}
.cal-day li em{font-style:normal;color:var(--faint);font-size:11.5px;margin-left:4px}
/* ═══ 예상 질문: 답안 작성 여부 ═══ */
.qol.big li.done b{color:var(--sub)}
.q-done{display:inline-block;font-size:11px;color:#2f7a5c;font-weight:700;margin-left:7px;white-space:nowrap}
.sec-h .note b{color:var(--accent)}
/* ═══ 답안 작성: 연습 타이머 ═══ */
.tm{font-size:12.5px;color:var(--sub);font-variant-numeric:tabular-nums;min-width:64px}
.tm.warn{color:var(--accent);font-weight:700}
/* ═══ 교사 목록: 학생별 답안 진행 ═══ */
/* D-day → new → 답안 세 줄. new 를 답안 줄에 붙이면 그 줄이 길어져 왼쪽 이름·학번이 접힌다 */
/* D-day 는 이름 줄에, 답안은 계열 줄에 눈높이가 맞도록 두 줄 사이를 벌린다(휴대폰 가로 목록은 아래에서 5px 로 다시 정한다) */
.roster .r-sub{display:flex;flex-direction:column;align-items:flex-end;gap:15px;line-height:1.2;white-space:nowrap;flex:0 0 auto}
.roster .r-dd{line-height:1.2}
.roster .r-nm{min-width:0}
.roster .r-hb{white-space:nowrap}
/* 학번 — 자리가 넉넉한 화면은 「3학년 10반 3번」, 휴대폰 칩에서는 숫자만 */
.roster .r-hb .hb-num{display:none}
.roster .r-sub .r-pg{font-style:normal;font-size:10.5px;color:var(--faint);font-weight:400}
.roster button.on .r-pg{color:#b9c2cd}
/* ═══ 분석 대기 표시 (학생·일반 교사) ═══ */
.pk-wait{font-size:13px;line-height:1.7;color:var(--ink);border-top:2px solid var(--ink);border-bottom:1px solid var(--line);padding:9px 0 10px;margin:0 0 16px}
.pk-wait b{color:var(--accent);margin-right:6px}
.r-wait{font-style:normal;font-size:10.5px;font-weight:700;color:var(--accent);margin-left:6px;white-space:nowrap}
.roster button.on .r-wait{color:#ffb3a3}
.chg-h .r-wait{margin-left:0;font-size:11.5px}
.chg-bar li em{font-style:normal;color:var(--sub);font-size:11.5px;margin-left:6px}
.uv .pending b{color:var(--accent)}
/* ═══ 질문의 출제 근거(학생 참고용 · 인쇄 제외) ═══ */
.q-basis{display:block;font-size:12.5px;color:var(--sub);line-height:1.6;margin-top:3px;padding-left:10px;border-left:2px solid var(--line2)}
.q-basis b{color:var(--ink)}
.ansq-basis{font-size:12.5px;color:var(--sub);line-height:1.6;margin:5px 0 0 28px;padding-left:10px;border-left:2px solid var(--line2)}
.ansq-basis b{color:var(--ink)}
/* ═══ 선생님 확인 포인트(답안 작성 탭 · 교사만) ═══ */
.tcheck{margin:8px 0 2px 28px;padding:8px 11px;background:var(--tint-teacher);font-size:13px;line-height:1.7}
.tcheck-l{display:block;font-size:11px;font-weight:800;letter-spacing:.04em;color:var(--accent);margin-bottom:2px}
.tcheck p{margin:0;white-space:pre-wrap}
/* ═══ 영역 구분용 파스텔 배경 — 색만으로 구분(테두리·그림자·둥근 모서리 없음) ═══ */
:root{--tint-list:#f2f5f8;--tint-table:#f7f5f0;--tint-student:#f3f7f4;--tint-teacher:#f8f4f1;--tint-wait:#fbf7ec;--tint-note:#f5f4f8;--tint-ref:#f4f0e8;--line-ref:#d8ceba}
/* 왼쪽 학생 목록 */
.grid .roster{background:var(--tint-list);padding:0 6px 10px}
.roster .r-find{background:var(--tint-list)}
.roster .r-q input{background:#fff}
.roster .r-modes button{background:#fff}
.roster button:hover{background:#e8edf3}
/* 표의 머리칸·라벨칸 */
.kv td:first-child,.rf-glance th,.pk-t th,.st-table th,.cmp th,.rf-t th,.ev-list td.ev-d,.chg-bar li b{background:var(--tint-table)}
.st-card,.fbox,.facts{background:var(--tint-table)}
.facts>div{border-right-color:#fff}
.cal-day{background:var(--tint-list);padding:9px 10px 6px}
.uvpick button{background:var(--tint-list)}
.uvpick button.on{background:var(--ink)}
/* 학생이 쓰는 영역 */
.ansq{background:var(--tint-student);padding:16px 12px}
.ansq-b,.ansq textarea{background:#fff}
.pk-edit{background:var(--tint-student);padding:14px 12px 10px}
.pk-add input{background:#fff}
/* 선생님만 보는 영역 */
.cmts{background:var(--tint-teacher);border-left:none;padding:6px 11px}
.cmt-new textarea,.cmt-new .rte-wrap{background:#fff}
.rf-model{background:var(--tint-teacher);border:none;padding:11px 14px}
.rf-quote{background:var(--tint-table);border:none;padding:10px 12px 10px 36px}
.rf-did{background:#fff}
.chg-bar{background:var(--tint-teacher);padding:10px 12px;border:none}
.chg-bar.pending{border-top:2px solid var(--accent)}
/* 대기·주의 */
.pk-wait,.soon,.warnbox,.st-none{background:var(--tint-wait);padding-left:12px;padding-right:12px}
.pending{background:var(--tint-wait);padding:10px 12px}
/* 게시판·메모 */
.memo-new,.send-box{background:var(--tint-note);padding:12px;border:none}
.memo.pin,.post.pin{background:var(--tint-note)}
.rte-wrap{background:#fff}
.talk-list .msg .bubble{background:#fff;color:var(--ink)}
/* 선생님 답변 — 앞선 규칙의 흰 글씨(color:#fff)가 남아 밝은 배경에서 안 보이던 것을 여기서 되돌린다 */
.msg.me .bubble{background:var(--tint-student);color:var(--ink);border-color:#cfdcd4}
/* ═══ 고양이 표식 — 항목 성격 구분용, 큰 제목(h2)과 분석 소제목에만 ═══ */
.sec-h h2[data-ico]::before{content:"";display:inline-block;width:22px;height:22px;margin-right:8px;vertical-align:-5px;
background-position:center;background-size:contain;background-repeat:no-repeat;opacity:.92}
.sec-h h2[data-ico="home"]::before{background-image:url(./susi-icons/home.png)}
.sec-h h2[data-ico="gpa"]::before{background-image:url(./susi-icons/gpa.png)}
.sec-h h2[data-ico="strength"]::before{background-image:url(./susi-icons/strength.png)}
.sec-h h2[data-ico="caution"]::before{background-image:url(./susi-icons/caution.png)}
.sec-h h2[data-ico="fit"]::before{background-image:url(./susi-icons/fit.png)}
.sec-h h2[data-ico="pool"]::before{background-image:url(./susi-icons/pool.png)}
.sec-h h2[data-ico="record"]::before{background-image:url(./susi-icons/record.png)}
.sec-h h2[data-ico="cases"]::before{background-image:url(./susi-icons/cases.png)}
.sub-h.ico-caution::before,.sub-h.ico-strength::before{content:"";display:inline-block;width:17px;height:17px;margin-right:6px;vertical-align:-3px;background-size:contain;background-repeat:no-repeat;opacity:.9}
.sub-h.ico-caution::before{background-image:url(./susi-icons/caution.png)}
.sub-h.ico-strength::before{background-image:url(./susi-icons/strength.png)}
.rf-final h3::before{content:"";display:inline-block;width:19px;height:19px;margin-right:7px;vertical-align:-4px;background:url(./susi-icons/caution.png) center/contain no-repeat}
@media print{.sec-h h2[data-ico]::before,.sub-h::before,.rf-final h3::before{display:none}}
/* ═══ 학생 목록 조작: 묶기 / 정렬 / 조건 — 순서와 조건을 분리 ═══ */
.roster .r-ctl{display:flex;align-items:center;gap:8px;margin-top:6px;min-height:22px}
.roster .r-ctl .r-lb{flex:0 0 26px;font-size:10.5px;color:var(--sub);letter-spacing:.04em}
.roster .r-ctl .r-modes{margin-top:0;flex:1;min-width:0}
.roster .r-modes .r-dir{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:700;border-color:var(--line2)}
.roster .r-modes .r-dir i{font-style:normal;font-weight:400;color:var(--sub);font-size:10.5px;margin-left:2px}
.roster .r-modes .r-dir:hover{color:var(--accent);border-color:var(--accent);background:#fff}
.roster .r-checks{display:flex;flex-wrap:wrap;gap:3px 12px;flex:1}
.roster .r-checks label{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--sub);cursor:pointer;white-space:nowrap}
.roster .r-checks label:hover{color:var(--ink)}
.roster .r-checks label.has{color:var(--accent)}
.roster .r-checks input{accent-color:var(--accent);width:13px;height:13px;margin:0}
.roster .r-checks label i{font-style:normal;font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.roster .r-checks label:has(input:checked){color:var(--ink);font-weight:700}
.roster .r-ctl-f{align-items:flex-start;margin-top:8px}
.roster .r-ctl-f .r-lb{padding-top:2px}
/* ═══ 지원 대학 조정 — 접이식(맨 위) ═══ */
.pk-fold{margin:0 0 16px;border-top:2px solid var(--ink)}
.pk-fold summary{cursor:pointer;list-style:none;padding:9px 2px;font-size:13.5px;font-weight:700;color:var(--ink)}
.pk-fold summary::-webkit-details-marker{display:none}
.pk-fold summary::before{content:"▸ ";color:var(--accent)}
.pk-fold[open] summary::before{content:"▾ "}
.pk-fold summary:hover{color:var(--accent)}
.pk-fold .pk-edit{margin-top:0;border-top:none;padding-top:8px}
.roster .r-modes button b{font-weight:700;margin-left:1px}
/* ═══ 학생 목록 조작 — 한 줄로 컴팩트하게 ═══ */
.roster .r-bar{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin-top:6px}
.roster .r-bar .r-modes{margin-top:0;gap:2px}
.roster .r-bar .r-modes button{padding:2px 7px;font-size:11px;line-height:1.5}
.roster .r-bar .r-modes button b{font-weight:800}
.roster .r-bar .r-checks{gap:2px 8px;flex:0 1 auto;margin-left:auto}
.roster .r-bar .r-checks label{font-size:10.5px;gap:3px}
.roster .r-bar .r-checks label i{margin-left:1px;padding:0 3px;background:#e6eaef;color:var(--sub);font-size:9.5px;line-height:1.5}
.roster .r-bar .r-checks label.has i{background:var(--accent);color:#fff}
.roster .r-bar .r-checks input{width:12px;height:12px}
.roster .r-bar .r-cnt{margin:0 0 0 auto;font-size:10.5px;color:var(--faint);flex-basis:100%;text-align:right;line-height:1.2}
.roster .r-find{padding:7px 6px 6px}
/* ═══ 휴대폰: 학생 목록 칸이 화면보다 넓어지던 문제 — 그리드 열이 내용 최소폭에 끌려 늘어나지 않게 ═══ */
@media(max-width:860px){
.grid{grid-template-columns:minmax(0,1fr)}
.grid>aside,.grid>section{min-width:0;max-width:100%}
.roster .r-find,.roster .r-bar,.roster .r-q{max-width:100%}
.roster .r-sub{white-space:normal}
.roster .r-bar .r-checks{margin-left:0;flex-basis:100%}
.roster .r-bar .r-cnt{flex-basis:auto;margin-left:auto}
}
@media(max-width:640px){
.cmp,.rf-glance,.chg-bar ul{overflow-x:auto;max-width:100%}
.rf-glance th{white-space:normal;width:76px}
.tcheck{margin-left:0}
.ansq-basis{margin-left:0}
.sec-h .print-qa{margin-left:0}
.pk-fold summary{font-size:13px}
.stu-top{flex-wrap:wrap}
.stu-dd{margin-left:auto}
}
/* 검색 지우기(✕) 버튼이 목록 버튼 규칙(width:100%)을 물려받아 왼쪽에 겹치던 문제 */
.roster .r-q .r-clr{width:auto;display:inline-block;left:auto;right:6px;padding:2px 5px;line-height:1}
.roster .r-name{display:block;white-space:nowrap}
/* 휴대폰 로그인 화면: 일정표는 3줄만 보이게 해서 로그인 칸이 멀리 내려가지 않게 */
@media(max-width:640px){
.gate-left{padding-bottom:18px}
.sched tr:nth-child(n+4):not(:last-child){display:none}
.gate-rule{margin:18px 0 14px}
.dd{margin-bottom:12px}
.gate-foot{padding-top:0;margin-top:8px}
}
.pk-fold summary i{font-style:normal;font-weight:400;font-size:11.5px;color:var(--sub);margin-left:8px}
/* ═══ 전국 면접 일정 — 권역은 배경색, 우리 학생은 진하게 ═══ */
:root{--z-sudo:#eef2f7;--z-chung:#f1f6f0;--z-yeong:#faf3ec;--z-ho:#f4f1f8;--z-gw:#f7f4ea}
.sch-ctl{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;margin:0 0 10px}
.sch-ctl .r-modes{display:flex;gap:2px;flex-wrap:wrap}
.sch-ctl .r-modes button{border:1px solid var(--line);background:#fff;padding:3px 9px;font-size:11.5px;color:var(--sub)}
.sch-ctl .r-modes button:hover{border-color:var(--ink);color:var(--ink)}
.sch-ctl .r-modes button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.sch-only{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--sub);cursor:pointer}
.sch-only input{accent-color:var(--accent);width:13px;height:13px;margin:0}
.sch-only:has(input:checked){color:var(--ink);font-weight:700}
.sch-cnt{margin-left:auto;font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.sch-wrap{overflow-x:auto;max-height:560px;overflow-y:auto;border-top:1px solid var(--ink)}
.sch-t{font-size:12.5px;min-width:600px}
.sch-t thead th{position:sticky;top:0;background:#fff;text-align:left;font-size:11px;color:var(--faint);font-weight:600;
padding:6px 8px;border-bottom:1px solid var(--ink);z-index:2;white-space:nowrap}
.sch-t td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.55}
.sch-t .sch-d{white-space:nowrap;font-variant-numeric:tabular-nums;width:132px;color:var(--ink)}
.sch-t .sch-d.dup{color:transparent}
.sch-t .sch-d i{font-style:normal;font-size:10.5px;color:var(--faint);margin-left:5px}
.sch-t .sch-r{width:44px;white-space:nowrap;text-align:center;font-size:11.5px;color:#3a414b}
.sch-t .sch-u{width:150px;font-weight:600}
.sch-t .sch-a{color:#3a414b}
.sch-t .sch-w{width:110px;font-size:11.5px;color:var(--accent);font-weight:700}
.z-sudo{background:var(--z-sudo)}.z-chung{background:var(--z-chung)}.z-yeong{background:var(--z-yeong)}
.z-ho{background:var(--z-ho)}.z-gw{background:var(--z-gw)}
.sch-t tr.sch-camp td{background:#fbf3f1}
.sch-t tr.sch-camp .sch-u{color:var(--accent)}
.sch-t tr.sch-mine td{background:#f7e9e5}
.sch-t tr.sch-mine .sch-u{color:var(--accent)}
.sch-t tr.sch-mine .sch-d{font-weight:700}
/* 달력: 그날 전국 면접 대학 수를 배경 농도로 */
.cal td.n1{background:#f5f6f8}.cal td.n2{background:#eceff3}.cal td.n3{background:#e0e6ec}
/* 오늘 — 검은 동그라미 대신 칸을 붉게 물들이고 은은한 글로우를 준다(면접 밀도 배경보다 우선) */
.cal td.today,.cal td.today.n1,.cal td.today.n2,.cal td.today.n3{background:#fdeceb;
box-shadow:inset 0 0 0 1.5px #d1342a;animation:cal-today 2.6s ease-in-out infinite}
@keyframes cal-today{0%,100%{box-shadow:inset 0 0 0 1.5px #d1342a,inset 0 0 0 0 rgba(209,52,42,0)}
50%{box-shadow:inset 0 0 0 1.5px #d1342a,inset 0 0 9px 1px rgba(209,52,42,.5)}}
@media(prefers-reduced-motion:reduce){.cal td.today{animation:none;
box-shadow:inset 0 0 0 1.5px #d1342a,inset 0 0 7px 0 rgba(209,52,42,.35)}}
/* 오늘 칸의 날짜는 일정이 있든 없든 붉게(뒤쪽 .cal td.has .d 보다 나중에 둔다) */
.cal td.today .d,.cal td.today.has .d{color:#d1342a;font-weight:800}
.cal-dens{display:inline-flex;align-items:center;gap:3px}
.cal-dens i{width:9px;height:9px;border-radius:0;display:inline-block;border:1px solid var(--line)}
.cal-dens .d1{background:#f5f6f8}.cal-dens .d2{background:#eceff3}.cal-dens .d3{background:#e0e6ec}
.cal-dens{margin-left:4px}
/* 날짜 상세의 전국 목록 */
.cal-day-h em{font-style:normal;font-size:11px;color:var(--faint);margin-left:auto}
.cal-nat{margin-top:8px;padding-top:7px;border-top:1px solid var(--line);font-size:12px}
.cal-nat p{display:flex;flex-wrap:wrap;gap:3px 7px;align-items:baseline;padding:4px 6px;margin:0 0 3px}
.cal-nat p b{font-size:11px;color:#3a414b;min-width:52px}
.cal-nat span{color:#3a414b}
.cal-nat span.on{color:var(--accent);font-weight:700}
.cal-nat span i{font-style:normal;font-size:10.5px;color:var(--accent);margin-left:3px}
@media(max-width:640px){
.sch-t{min-width:520px}
.sch-t .sch-d{width:100px}.sch-t .sch-u{width:110px}.sch-t .sch-w{width:78px}
.sch-cnt{margin-left:0}
}
/* 지역 칸의 권역 색은 캠프 행 배경보다 우선(선택자 우선순위로 해결) */
.sch-t td.sch-r.z-sudo{background:var(--z-sudo)}
.sch-t td.sch-r.z-chung{background:var(--z-chung)}
.sch-t td.sch-r.z-yeong{background:var(--z-yeong)}
.sch-t td.sch-r.z-ho{background:var(--z-ho)}
.sch-t td.sch-r.z-gw{background:var(--z-gw)}
.sch-t .sch-w b{display:block;color:var(--accent)}
.sch-t tr.sch-camp .sch-w{color:var(--sub);font-weight:400}
.sch-t tr.sch-mine .sch-w{color:var(--accent);font-weight:700}
/* 전국 면접 일정 — 대학 검색 */
.sch-find{position:relative;margin:10px 0 8px;max-width:420px}
.sch-find input{width:100%;padding:8px 30px 8px 11px;border:1px solid var(--line);border-radius:8px;
font-size:13px;font-family:inherit;background:#fff;-webkit-appearance:none}
.sch-find input:focus{outline:none;border-color:#98a3b4;box-shadow:0 0 0 2px rgba(20,24,29,.06)}
.sch-find input::-webkit-search-cancel-button{display:none}
.sch-qc{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:22px;height:22px;
border:0;background:none;color:#8b93a1;font-size:13px;line-height:1;cursor:pointer;padding:0}
.sch-qc:hover{color:#14181d}
@media(max-width:860px){.sch-find{max-width:none}}
/* 면접 정보 — 전형별 상세("이 전형에서 따로 챙길 것") */
.uv-extra{margin-top:14px}
.uv-extra>h4{font-size:13px;font-weight:700;color:var(--ink);margin:0 0 8px;
padding-bottom:5px;border-bottom:1px solid var(--line)}
.uvx{margin:0 0 11px;padding-left:11px;border-left:2px solid #dfe3e9}
.uvx.warn{border-left-color:#9d3427}
.uvx h5{font-size:12.5px;font-weight:700;color:var(--ink);margin:0 0 3px}
.uvx.warn h5{color:#9d3427}
.uvx p{font-size:12.5px;line-height:1.72;color:#3a414b;margin:0 0 5px}
.uvx p:last-child{margin-bottom:0}
@media(max-width:860px){.uvx{padding-left:9px}.uvx p{font-size:12.5px}}
/* 답안 댓글 — 선생님 프로필 사진 */
.cmt-h{display:flex;align-items:center;gap:6px}
.cmt-h .av{flex:0 0 auto}
/* 선생님 프로필 — 하얗게 빛나는 테두리(솔미의 파란 발광과 짝이 되게) */
.cmt-h .av,.post-h .av,.memo-h .av,.memo-r .av,.ml-by .av{
box-shadow:0 0 0 4px #fff,0 0 10px 4px #fff,0 0 20px 9px rgba(255,255,255,.9),0 1px 7px rgba(31,43,58,.3)}
.cmt-h b{font-weight:700}
.cmt-h i{font-style:normal;margin-left:auto;font-size:11px;color:#8b93a1}
.cmt-h .cmt-del{margin-left:8px}
/* 탭 알림 — 선생님 게시판 새 글 */
#tabs button i.hot{background:#9d3427;color:#fff;font-style:normal;font-weight:700;
font-size:10.5px;padding:1px 6px;border-radius:9px;margin-left:5px;vertical-align:1px;letter-spacing:-.2px}
#tabs button.on i.hot{background:#fff;color:#9d3427}
/* 선생님 참고 자료 — 인쇄 단추를 눈에 띄게 */
.sec-h .btn.ref-print{margin-left:auto;background:#9d3427;color:#fff;border-color:#9d3427;
font-weight:700;padding:7px 15px;box-shadow:0 1px 3px rgba(157,52,39,.28)}
.sec-h .btn.ref-print:hover{background:#87301f;border-color:#87301f}
.ref-tip{font-size:12px;color:#3a414b;line-height:1.7;margin:0 0 16px;
padding:9px 0 0;border-top:1px solid var(--line)}
.ref-tip b{color:#9d3427}
@media(max-width:860px){.sec-h .btn.ref-print{margin-left:0;width:100%;margin-top:8px}}
@media print{.ref-tip{display:none}}
/* 공지 반응 — 학생이 눌러서 표시 */
.rx{display:flex;gap:6px;align-items:center;margin-top:11px;padding-top:10px;border-top:1px solid var(--line);flex-wrap:wrap}
.rx-b{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border:1px solid var(--line);
border-radius:999px;background:#fff;font-size:13px;line-height:1;cursor:pointer;transition:.12s}
.rx-b:hover{background:#f4f6fa;border-color:#b9c3d2}
.rx-b.on{background:#fdeeea;border-color:#d9877a}
.rx-b i{font-style:normal;font-size:11.5px;font-weight:700;color:#5f6672;min-width:6px}
.rx-cat{width:16px;height:16px;display:block;object-fit:contain}
.rx-b.on i{color:#9d3427}
.rx.ro .rx-b{cursor:default;opacity:.85}
.rx.ro .rx-b:hover{background:#fff;border-color:var(--line)}
.rx.ro .rx-b.has{border-color:#d9877a}
@media print{.rx{display:none}}
/* 일정에 뜬 학생 이름 — 눌러서 그 학생 화면으로 */
.go-stu{border:0;background:none;padding:0;margin:0;font:inherit;color:inherit;
cursor:pointer;text-decoration:underline;text-decoration-color:#c9ced6;
text-underline-offset:2px;text-decoration-thickness:1px}
.go-stu:hover{color:#9d3427;text-decoration-color:#9d3427}
.sch-w .go-stu + .go-stu::before,.cal-nat i .go-stu + .go-stu::before{content:", ";text-decoration:none;color:#5f6672}
.cal-stu .go-stu{font-weight:inherit}
@media print{.go-stu{text-decoration:none}}
/* 탭이 화면보다 넓으면 마지막 탭이 잘려 안 보인다 — 좁은 화면에서는 줄을 바꿔 전부 보이게 한다 */
@media(max-width:760px){
.tabs{flex-wrap:nowrap;overflow-x:auto;row-gap:0}
.tabs button{flex:0 0 auto}
}
/* 학생 목록 — 대화 답변 대기 */
.r-name .r-talk{font-style:normal;font-size:10px;font-weight:700;margin-left:5px;padding:1px 5px;
border-radius:5px;background:#eef2f7;color:#3d5a80;vertical-align:1px}
/* 학생과의 대화 — 답변을 기다리는 것 표시 */
.thread.wait{box-shadow:inset 3px 0 0 #9d3427}
.thread-h .go-stu{font-weight:inherit;font-size:inherit}
/* 답안 댓글 — 고치기 */
.cmt-edit{margin-left:8px;border:0;background:none;padding:0;font-size:11.5px;color:#5f6672;cursor:pointer}
.cmt-edit:hover{color:#14181d;text-decoration:underline}
.cmt-ed{margin-top:6px}
.cmt-ed textarea{width:100%;min-height:96px;overflow:hidden;padding:8px 10px;border:1px solid var(--line);border-radius:8px;
font:inherit;font-size:13px;line-height:1.6;resize:vertical}
.cmt-ed textarea:focus{outline:none;border-color:#98a3b4}
.cmt-ed-act{display:flex;align-items:center;gap:6px;margin-top:6px}
.cmt-ed-act .state{font-size:11.5px;color:#8b93a1}
@media print{.cmt-edit,.cmt-ed{display:none}}
/* 대화 — 받는 선생님 고르기 */
.talk-to{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:9px}
.talk-to>span{font-size:12px;color:var(--sub);font-weight:600}
.talk-to-pick{display:flex;gap:6px;flex-wrap:wrap}
/* 받는 선생님 고르기 — 선생님 아이콘이 네모라 단추도 모서리만 살짝 깎은 네모. 고른 선생님은 그 선생님 색 테두리·옅은 바탕·확인 표시 */
.tt-b{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border:1.5px solid var(--line);
border-radius:5px;background:#fff;font-size:12.5px;cursor:pointer;transition:border-color .12s,background .12s,box-shadow .12s;
--tc:#2f7fd0;--tcbg:#eef4fb;--tcg2:rgba(47,127,208,.28)}
.tt-b:hover{border-color:var(--tc);background:#f7f9fc}
.tt-b.on{border-color:var(--tc);background:var(--tcbg);font-weight:700;box-shadow:0 0 0 2px var(--tcg2)}
.tt-b.on b::after{content:" ✓";color:var(--tc);font-size:11px}
.tt-b b{font-weight:inherit}
.msg-h em{font-style:normal;font-size:11px;color:#9d3427;background:#fdeeea;padding:1px 6px;border-radius:5px}
.talk-filter{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--sub);margin-bottom:12px;cursor:pointer}
.talk-filter i{font-style:normal;font-size:11px;font-weight:700;color:#9d3427}
@media(max-width:860px){.talk-to{gap:6px}.tt-b{font-size:12px}}
/* ── 읽고 참고만 하는 대학 공개 문항 ──
답안을 쓰는 자리(--tint-student)와 배경색·테두리로 확실히 구분한다. 입력창이 없다. */
.refwrap{margin-top:26px;background:var(--tint-ref);border-top:2px solid var(--line-ref);padding:16px 14px 14px}
.ref-h{margin:0;font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.ref-why{margin:8px 0 0;font-size:13px;line-height:1.65;color:var(--sub)}
.ref-g{margin-top:16px}
.ref-u{margin:0 0 6px;font-size:13px;font-weight:700;color:var(--ink);
border-bottom:1px solid var(--line-ref);padding-bottom:5px}
.ref-u i{font-style:normal;font-weight:400;color:var(--faint);font-size:12px;margin-left:6px}
.ref-ol{margin:0;padding-left:20px}
.ref-ol li{font-size:13.5px;line-height:1.7;padding:6px 0;color:var(--ink)}
.ref-ol li+li{border-top:1px solid #e8e0d0}
.ref-ol .qsrc{display:block;margin-top:3px;font-size:11.5px;color:var(--faint);line-height:1.5}
@media print{.refwrap{display:none}}
/* ── 선생님이 학생 문항을 빼고 더하기 ── */
.q-hidden .qol>li{position:relative;padding-right:60px}
/* ── 질문 편집(선생님 화면) — 문항 하나가 한 상자. 끌어서 차례를 바꾼다 ── */
.qol.q-sort{list-style:none;padding-left:0;counter-reset:qn}
.qol.q-sort>li.q-card{counter-increment:qn;position:relative;border:1px solid var(--line);background:#fff;
padding:12px 14px 12px 46px;margin:0 0 10px;transition:border-color .12s,box-shadow .12s}
.qol.q-sort>li.q-card:hover{border-color:var(--line2)}
.qol.q-sort>li.q-card:before{content:counter(qn);position:absolute;left:0;top:0;width:30px;height:100%;
display:flex;align-items:flex-start;justify-content:center;padding-top:13px;box-sizing:border-box;
font-size:11.5px;font-weight:700;color:var(--faint);background:var(--wash)}
.qol.q-sort>li.q-card.done{background:var(--tint-table,#fafbfc)}
/* 왼쪽 번호 띠 전체가 손잡이 — 넓게 잡히도록 */
.q-grip{position:absolute;left:0;top:0;width:30px;height:100%;display:flex;align-items:flex-end;
justify-content:center;padding-bottom:10px;box-sizing:border-box;color:var(--faint);font-size:13px;
line-height:1;cursor:grab;user-select:none}
.q-grip:hover{color:var(--ink);background:rgba(0,0,0,.04)}
.q-grip:active{cursor:grabbing}
.qol.q-sort>li.q-drag{opacity:.4}
.qol.q-sort>li.q-moved{border-color:var(--ink)}
.qe-tools{display:flex;align-items:center;gap:6px;margin-top:10px;padding-top:9px;border-top:1px solid var(--line)}
.q-mv{font-size:11px;line-height:1;color:var(--sub);background:#fff;border:1px solid #cfd3d9;padding:4px 8px;
cursor:pointer;font-family:inherit}
.q-mv:hover{color:var(--ink);border-color:var(--ink)}
.q-mv:disabled{opacity:.3;cursor:default}
.qol.q-sort .q-x{position:static;margin-left:auto;font-size:12px}
.qol.q-sort .qol.sub{margin-top:10px}
.q-ordstate{margin:0 0 8px;min-height:16px}
@media(max-width:640px){
.qol.q-sort>li.q-card{padding-left:38px}
.qol.q-sort>li.q-card:before{width:26px}
.q-grip{display:none}
.q-mv{padding:5px 10px;font-size:12px}
}
.q-x{position:absolute;right:0;top:9px;background:none;border:0;border-bottom:1px solid transparent;color:var(--faint);font-size:12px;cursor:pointer;padding:0;font:inherit;font-size:12px}
.q-x:hover{color:var(--accent);border-bottom-color:var(--accent)}
/* 선생님이 만든 문항 고치기·지우기 — 「빼기」 옆에 나란히, 지우기만 붉게 */
.q-e{background:none;border:0;border-bottom:1px solid transparent;color:var(--faint);font:inherit;font-size:12px;cursor:pointer;padding:0}
.q-e:hover{color:var(--ink);border-bottom-color:var(--ink)}
.q-e-del:hover{color:var(--accent);border-bottom-color:var(--accent)}
.qol.q-sort .q-x{margin-left:auto}
.qol.q-sort .q-e{margin-left:10px}
.qe-form{margin-top:10px;padding:10px 12px 12px;background:var(--wash);border-top:1px solid var(--line)}
.qe-l{display:block;font-size:11.5px;color:var(--sub);margin-bottom:8px}
.qe-l i{font-style:normal;color:var(--faint)}
.qe-form textarea{display:block;width:100%;font:inherit;font-size:13.5px;border:1px solid var(--line2);background:#fff;
padding:8px 10px;box-sizing:border-box;margin-top:4px;line-height:1.55;resize:vertical;color:var(--ink)}
.qe-form textarea:focus{border-color:var(--ink);outline:none}
.ansq-own{margin:2px 0 0;display:flex;gap:10px}
/* ── 답안 옆 참고 자료(선생님) ────────────────────────────────
확인 포인트·생기부 원문·개념 정리를 각각 다른 색 버튼으로 연다. 한 번에 하나만 열린다.
자리가 넉넉하면 답안·피드백 왼쪽, 자료 오른쪽. 좁아지면 자료가 질문 바로 밑으로 간다 */
.ansq-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:10px 0 14px 28px}
.ansq-tools .q-starbtn{margin-right:4px}
.ansq-tools .ansq-own+.ansq-own{margin-left:10px}
.ansq-own{display:flex;gap:10px;margin-left:auto}
.rf-tab{--rc:#5f6672;font:inherit;font-size:12px;line-height:1.55;cursor:pointer;padding:3px 11px;border-radius:999px;
border:1px solid var(--rc);color:var(--rc);background:#fff;transition:box-shadow .16s,background .16s,color .16s}
.rf-tab:hover{background:var(--rc);color:#fff;box-shadow:0 0 8px 0 color-mix(in srgb,var(--rc) 55%,transparent)}
.rf-tab.on{background:var(--rc);color:#fff;animation:rf-glow 2.4s ease-in-out infinite}
.rf-tab.off{opacity:.34;cursor:default;border-style:dashed}
.rf-tab.off:hover{background:#fff;color:var(--rc);box-shadow:none}
.rf-t1{--rc:#9a6b3f} /* 선생님 확인 포인트 — 따뜻한 갈색 */
.rf-t2{--rc:#9d3427} /* 생기부 기록 원문 — 인용 붉은색 */
.rf-t3{--rc:#2f7fd0} /* 관련 개념 정리 — 파랑 */
@keyframes rf-glow{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--rc) 0%,transparent)}
50%{box-shadow:0 0 9px 1px color-mix(in srgb,var(--rc) 60%,transparent)}}
@media(prefers-reduced-motion:reduce){.rf-tab.on{animation:none;box-shadow:0 0 7px 0 color-mix(in srgb,var(--rc) 45%,transparent)}}
.ansq-split{display:block}
.ansq-split.ref-open{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px;align-items:start}
.ansq-main{min-width:0}
/* 굵은 윗선 없이, 무엇을 보고 있는지는 옅은 바탕색으로만 알린다 */
.ansq-ref{--rc:#5f6672;min-width:0;border:1px solid color-mix(in srgb,var(--rc) 20%,#fff);border-radius:3px;
background:color-mix(in srgb,var(--rc) 5%,#fff);padding:13px 15px 15px;font-size:12.5px;line-height:1.72}
.ansq-ref:has(.rp-tcheck){--rc:#9a6b3f}
.ansq-ref:has(.rp-quote){--rc:#9d3427}
.ansq-ref:has(.rp-concept){--rc:#2f7fd0}
.rp-t{margin:0 0 10px;font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--rc)}
.rp-l{display:block;font-size:10.5px;font-weight:700;color:var(--sub);letter-spacing:.03em;margin-bottom:3px}
.rp-sel{display:block;margin:0 0 10px}
.rp-sel select{width:100%;font:inherit;font-size:12.5px;border:1px solid var(--line2);background:#fff;padding:5px 8px;color:var(--ink)}
.rp-sel select:focus{border-color:var(--rc);outline:none}
.rp-tcb{margin:0;line-height:1.78}
/* 자료가 길어도 답안 칸을 짓누르지 않게 — 안에서만 스크롤하고, 답안을 내려도 옆에 붙어 따라온다 */
.rp-body{max-height:min(420px,48vh);overflow-y:auto}
.rp-h{margin:11px 0 5px;font-size:11px;font-weight:700;color:var(--sub);letter-spacing:.03em}
.rp-none{margin:0;color:var(--faint)}
.ansq-ref .rf-quote{margin:0;font-size:12.5px;background:#fff}
.ansq-ref p{margin:0 0 7px}
.ansq-ref p:last-child{margin-bottom:0}
.ansq-split.ref-open .ansq-ref{position:sticky;top:12px}
/* 좁은 화면에서는 위아래로 — 자료를 질문 바로 밑에 두어 읽고 나서 답안·피드백으로 내려간다 */
@media(max-width:860px){.ansq-tools{margin-left:0}
.ansq-split.ref-open{display:flex;flex-direction:column}
.ansq-split.ref-open .ansq-ref{position:static;order:-1;margin-bottom:12px}}
@media print{.ansq-tools,.ansq-ref{display:none}.ansq-split.ref-open{display:block}}
.qe-note{margin:0 0 8px;font-size:11.5px;color:var(--accent);line-height:1.5}
.qe-form .ansq-t{display:flex;justify-content:flex-start;gap:8px;margin-top:2px}
.qe-form .ansq-t .btn{margin-left:0}
/* ── 학생 생기부 정리 탭(선생님 전용) — 원문을 갈래로 모아 본다 ── */
.srcv-toc{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 16px;padding:9px 12px;background:var(--wash);font-size:12px;color:var(--sub)}
.srcv-t b{color:var(--ink);font-weight:700}
.srcv-h{font-size:13px;font-weight:700;margin:22px 0 8px;padding-bottom:5px;border-bottom:1px solid var(--ink)}
.srcv-h i{font-style:normal;font-weight:500;color:var(--faint);font-size:11.5px;margin-left:5px}
.srcv-q{margin:0 0 10px}
.srcv-q-n{float:right;font-style:normal;font-size:11px;font-weight:500;color:var(--sub)}
.q-fix{font-style:normal;color:var(--faint)}
.q-tc{font-style:normal;color:var(--sub)}
.qol.sub{margin:8px 0 0;padding-left:16px;border-left:1px solid var(--line2);list-style:none}
.qol.sub>li{padding:6px 0 4px}
.qol.sub>li>b:before{content:"↳ ";color:var(--faint);font-weight:400}
.q-hidden{margin-top:20px;border-top:1px solid var(--line);padding-top:10px}
.q-hidden summary{cursor:pointer;font-size:13px;color:var(--sub);list-style:none}
.q-hidden summary::-webkit-details-marker{display:none}
.q-hidden summary:before{content:"▸ ";color:var(--faint)} .q-hidden[open] summary:before{content:"▾ "}
.q-hidden summary i{font-style:normal;color:var(--faint)}
.q-hidden .qol>li{color:var(--sub)} .q-hidden .qol>li b{font-weight:500}
.q-add{margin-top:24px;border-top:1px solid var(--line);padding-top:14px}
.q-add-h{margin:0 0 10px;font-size:14px;font-weight:700;color:var(--ink)}
.q-add-h i{font-style:normal;font-weight:400;color:var(--faint);font-size:12px;margin-left:8px}
.q-add label>span{display:block;font-size:12px;color:var(--sub);margin-bottom:4px}
.q-add label>span em{font-style:normal;color:var(--faint);margin-left:4px}
.q-add select,.q-add textarea{font:inherit;font-size:13.5px;border:1px solid var(--line2);background:#fff;padding:8px 10px;box-sizing:border-box;color:var(--ink)}
.q-add textarea{width:100%;resize:vertical;line-height:1.55}
.q-add select{min-width:150px}
.q-add-f{display:block;margin-top:10px}
.q-add-act{margin-top:10px;display:flex;gap:10px;align-items:center}
/* 탭 맨 위의 문항 추가 — 제목과 입력칸을 파랗게 해서 먼저 눈에 들어오게 한다 */
.q-add.q-add-top{margin:14px 0 20px;padding:13px 0 14px;border-top:2px solid #2f7fd0;border-bottom:1px solid var(--line)}
.q-add.q-add-top .q-add-h{font-size:15px;margin-bottom:9px;color:#14406f}
.q-add.q-add-top .q-add-h i{font-size:12.5px;color:var(--faint)}
.q-add.q-add-top textarea{border:1.5px solid #9dc4ee;min-height:52px}
.q-add.q-add-top textarea::placeholder{color:#8fa8c4}
.q-add.q-add-top textarea:focus{border-color:#2f7fd0}
.q-add.q-add-top .btn.solid{padding:8px 18px;font-size:13px}
/* 꼬리질문 — 부모 답안 안쪽에 얇은 선으로 들여서 */
.ansq.fq{margin:14px 0 0;padding:10px 0 4px 14px;border-left:1px solid var(--line2);background:transparent}
.ansq.fq .ansq-q span{color:var(--faint);min-width:0}
.fq-add{margin-top:10px}
.fq-btn{background:none;border:0;border-bottom:1px solid var(--line2);color:var(--sub);font:inherit;font-size:12.5px;cursor:pointer;padding:0 0 1px}
.fq-btn:hover{color:var(--accent);border-bottom-color:var(--accent)}
.fq-form textarea{width:100%;font:inherit;font-size:13.5px;border:1px solid var(--line2);background:#fff;padding:8px 10px;box-sizing:border-box;margin-top:8px;line-height:1.55;resize:vertical;color:var(--ink)}
/* 학생 목록 — 담당만 / 전체 */
.r-scope{display:inline-flex;flex-shrink:0;white-space:nowrap;margin-left:8px;border:1px solid var(--line2);background:#fff;align-self:center}
.r-scope button{background:#fff;border:0;border-right:1px solid var(--line2);font:inherit;font-size:12px;line-height:1.2;padding:3px 9px;color:var(--sub);cursor:pointer;white-space:nowrap}
.r-scope button:last-child{border-right:0}
.r-scope button.on{background:var(--ink);color:#fff}
/* ── 학생 목록 필터 줄 — 두 줄로 정리: [보기 · 정렬 · 인원] / [조건] ── */
.roster .r-bar{display:block;margin-top:8px}
.roster .r-row{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap}
.roster .r-row2{margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
.roster .r-bar .r-modes{margin-top:0;gap:0}
.roster .r-bar .r-modes button{border:0;border-right:1px solid var(--line2);padding:3px 9px}
.roster .r-bar .r-modes button:last-child{border-right:0}
.roster .r-bar .r-cnt{margin:0 0 0 auto;font-size:11.5px;color:var(--sub);white-space:nowrap}
.roster .r-checks{display:inline-flex;flex-wrap:wrap;gap:3px 12px;flex:1}
/* ── 학생 목록 도구 막대 — 보기·정렬은 밑줄 탭, 조건은 기호 토글 ── */
.roster .r-bar{display:block;margin-top:6px}
.roster .r-row{display:flex;align-items:flex-end;gap:0 10px;flex-wrap:wrap}
.roster .r-tabs{display:inline-flex;gap:0;border-bottom:1px solid var(--line)}
.roster .r-tabs button,.roster .r-bar .r-modes button{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;font:inherit;font-size:12px;line-height:1.2;padding:5px 9px 6px;color:var(--sub);cursor:pointer;white-space:nowrap;width:auto;flex:none}
.roster .r-tabs button:hover,.roster .r-bar .r-modes button:hover{color:var(--ink);background:none;border-color:transparent;border-bottom-color:var(--line2)}
.roster .r-tabs button.on,.roster .r-bar .r-modes button.on{color:var(--ink);font-weight:700;border-bottom-color:var(--accent);background:none}
.roster .r-bar .r-modes button b{font-weight:700;color:var(--accent);margin-left:2px}
.roster .r-sep{width:1px;height:16px;background:var(--line2);margin:0 2px 6px}
.roster .r-bar .r-cnt{margin:0 0 6px auto;font-size:11.5px;color:var(--sub);white-space:nowrap}
.roster .r-bar .r-cnt span{color:var(--faint)}
.roster .r-row2{margin-top:7px;gap:4px 6px;align-items:center}
.roster .r-tg{background:#fff;border:1px solid var(--line);font:inherit;font-size:11.5px;line-height:1.2;padding:3px 8px 3px 6px;color:var(--sub);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:5px;width:auto;flex:none}
.roster .r-tg i{font-style:normal;font-size:12px;color:var(--faint);line-height:1}
.roster .r-tg b{font-weight:700;font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.roster .r-tg:hover{border-color:var(--ink);color:var(--ink);background:#fff}
.roster .r-tg.has{color:var(--ink)} .roster .r-tg.has i,.roster .r-tg.has b{color:var(--accent)}
.roster .r-tg.on{background:var(--ink);border-color:var(--ink);color:#fff} .roster .r-tg.on i,.roster .r-tg.on b{color:#fff}
.roster .r-tabs button,.roster .r-bar .r-modes button{padding:4px 8px 5px;font-size:11.5px}
.roster .r-row2 .r-cnt{margin:0 0 0 auto;align-self:center}
.roster .r-bar .r-cnt{margin-bottom:0}
/* 250px 목록 칸에 맞춘 도구 막대 — 잘리지 않게 줄 단위로 */
.roster .r-bar{margin-top:5px;overflow:hidden}
.roster .r-row{gap:0 8px;flex-wrap:nowrap;min-width:0}
.roster .r-row+.r-row{margin-top:4px}
.roster .r-tabs{flex:0 1 auto;min-width:0;overflow:hidden}
.roster .r-tabs button,.roster .r-bar .r-modes button{padding:3px 7px 4px;font-size:11.5px}
.roster .r-row .r-cnt{margin:0 0 4px auto;font-size:11px;white-space:nowrap;flex:none}
.roster .r-row2{margin-top:6px;gap:4px;flex-wrap:wrap}
.roster .r-tg{padding:2px 6px 2px 5px;font-size:11px;gap:4px}
.roster .r-tg i{font-size:11px}
.roster .r-row2 .r-cnt{display:none}
/* ── 학생과의 대화 — 접힌 목록, 누르면 펼침 ── */
.threads{border-top:1px solid var(--ink)}
details.thread{border-bottom:1px solid var(--line);padding:0}
details.thread>summary.thread-h{list-style:none;display:flex;align-items:center;gap:10px;padding:10px 6px;cursor:pointer;margin:0}
details.thread>summary::-webkit-details-marker{display:none}
details.thread>summary:hover{background:var(--tint-list)}
details.thread[open]>summary.thread-h{background:var(--tint-list);border-bottom:1px solid var(--line)}
.th-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.th-main>b{font-size:14px} .th-main>.muted{font-size:11.5px;margin-left:6px}
.th-main .tag.wait{margin-left:8px}
.th-prev{font-size:12.5px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.th-prev .th-who{color:var(--faint)}
.th-r{display:flex;align-items:center;gap:8px;flex:none;color:var(--faint);font-size:11.5px}
.th-n{font-style:normal;font-variant-numeric:tabular-nums;min-width:18px;text-align:center;border:1px solid var(--line2);padding:0 5px;font-size:11px;color:var(--sub)}
.th-arrow{width:7px;height:7px;border-right:1.5px solid var(--faint);border-bottom:1.5px solid var(--faint);transform:rotate(45deg);margin:0 4px 3px 0;transition:transform .15s}
details.thread[open] .th-arrow{transform:rotate(-135deg);margin-bottom:-3px}
details.thread.wait>summary .th-main>b{color:var(--accent)}
.thread-body{padding:12px 6px 18px}
.th-go{margin:0 0 6px;font-size:12px}
.thread-body .talk-list{margin:10px 0 16px}
/* ── 임시저장 / 제출 · 답안 판(v1·v2…) ── */
.sub-st{margin:7px 0 0;font-size:12px;color:var(--sub);line-height:1.6}
.sub-st b{font-weight:700}
.sub-st .st-todo{color:var(--accent)}
.sub-st .st-done{color:#1f6f43}
/* 판 배지 — 답안은 검정, 그 답안에 달린 피드백은 같은 크기의 테두리 배지로 짝을 이룬다 */
.vb{display:inline-block;font-style:normal;font-size:11px;font-weight:700;line-height:1.5;
padding:1px 7px;letter-spacing:.02em;font-variant-numeric:tabular-nums;vertical-align:1px}
.ansq-rev{margin:0 0 8px;font-size:11.5px;color:var(--sub)}
.ansq-rev .vb{background:var(--ink);color:#fff;margin-right:5px}
.ansq-rev em{font-style:normal;color:var(--accent);font-weight:700}
.cmt-rev{margin-left:7px;border:1.5px solid var(--accent);color:var(--accent);background:#fff}
.sub-st .vb{background:var(--ink);color:#fff;margin-right:3px}
.sub-st .st-todo .vb{background:var(--accent)}
.ansq-t .btn.ghost[data-save]{font-weight:400}
.cmt-h{flex-wrap:wrap}
.cmt-rev{margin-left:7px;border:1.5px solid var(--accent);color:var(--accent);background:#fff;flex:none}
/* 게시판 감정 표시 — 인스타·페이스북 방식 */
.rx{margin-top:8px}
.rx-sum{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--sub);padding:2px 0 6px;border-bottom:1px solid var(--line)}
.rx-stack{display:inline-flex}
.rx-stack i{font-style:normal;font-size:14px;line-height:1;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#fff;border:1px solid var(--line);margin-left:-6px}
.rx-stack i:first-child{margin-left:0}
.rx-row{display:flex;align-items:center;gap:18px;padding-top:6px}
.rx-wrap{position:relative;display:inline-block}
.rx-btn,.rx-act{border:0;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--sub);cursor:pointer;padding:2px 0;display:inline-flex;align-items:center;gap:5px;line-height:1.4}
.rx-btn:hover,.rx-act:hover{color:var(--ink)}
.rx-btn.on{color:var(--accent)}
.rx-like{width:15px;height:15px;display:inline-block;background:currentColor;
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat}
.rx-bar{position:absolute;left:-6px;bottom:calc(100% + 6px);z-index:6;display:inline-flex;gap:2px;padding:4px 6px;background:#fff;border:1px solid var(--line);border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.12);white-space:nowrap;animation:rx-up .16s ease-out}
@keyframes rx-up{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.rx-bar button{border:0;background:none;font-size:24px;line-height:1;cursor:pointer;padding:3px 4px;transition:transform .12s}
.rx-bar button:hover{transform:scale(1.35) translateY(-3px)}
.rx-bar button.on{background:var(--wash);border-radius:50%}
.memo-r .rx{margin-top:4px}
.memo-r .rx-btn{font-size:12px}
/* 판 비교 — 지운 말은 흐린 취소선, 새로 쓴 말은 강조색 밑줄 */
.ansq-b.diff del{color:var(--faint);text-decoration:line-through;text-decoration-color:var(--faint)}
.ansq-b.diff ins{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:3px;color:var(--ink)}
.diff-key{margin:10px 0 0;padding-top:6px;border-top:1px solid var(--line);font-size:11.5px;color:var(--sub);white-space:normal}
.diff-key del{color:var(--faint)} .diff-key ins{text-decoration-color:var(--accent)}
.diff-btn{margin-left:2px}
/* 형광펜 — 본문 글자 배경에만 색을 쓴다 */
mark.hl{padding:1px 0;border-radius:2px;color:inherit}
mark.hl-y,.hl-c.hl-y,.hl-pen.hl-y{background:#fff1a8}
mark.hl-g,.hl-c.hl-g,.hl-pen.hl-g{background:#cdeec6}
mark.hl-p,.hl-c.hl-p,.hl-pen.hl-p{background:#ffd3de}
mark.hl-b,.hl-c.hl-b,.hl-pen.hl-b{background:#cfe4ff}
mark.hl-mine{cursor:pointer}
mark.hl-mine:hover{outline:1px solid var(--ink)}
.hl-c{display:inline-block;width:14px;height:14px;border:1px solid rgba(0,0,0,.18);vertical-align:-2px;margin-right:5px}
/* 펜 — 누르면 눌린 모양 */
.hl-pen{width:22px;height:22px;border:1px solid rgba(0,0,0,.18);border-radius:3px 3px 9px 9px;cursor:pointer;padding:0;margin-right:2px;position:relative;transition:transform .12s}
.hl-pen:hover{transform:translateY(-2px)}
.hl-pen[aria-pressed=true]{outline:2px solid var(--ink);outline-offset:2px;transform:translateY(-2px)}
.hl-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:9px;font-size:12px;color:var(--sub)}
.hl-l{font-weight:700;color:var(--ink);margin-right:2px}
.hl-hint{font-size:11.5px;color:var(--faint);margin-left:4px}
/* 펜 모드 — 드래그하는 동안 그 색으로 칠해지는 느낌 */
.hl-body.pen{cursor:url("data:image/svg+xml;utf8,") 3 21, text;user-select:text}
.hl-body.pen-y::selection,.hl-body.pen-y *::selection{background:#ffe95c;color:inherit}
.hl-body.pen-g::selection,.hl-body.pen-g *::selection{background:#a9e39c;color:inherit}
.hl-body.pen-p::selection,.hl-body.pen-p *::selection{background:#ffb3c6;color:inherit}
.hl-body.pen-b::selection,.hl-body.pen-b *::selection{background:#a9ccff;color:inherit}
.hl-body.pen mark.hl-mine{cursor:inherit}
/* 말풍선 */
.ansq{position:relative}
.hl-pop{position:absolute;z-index:8;width:420px;max-width:calc(100% - 8px);background:#fff;border:1px solid var(--line);box-shadow:0 6px 18px rgba(0,0,0,.12);padding:8px 10px;font-size:12px}
.hl-pop-row{display:flex;align-items:center;gap:4px}
.hl-pop-row+.hl-pop-row{margin-top:6px}
.hl-pop-l{color:var(--sub);font-size:11.5px;margin:0 2px 0 4px}
.hl-pop-l:first-child{margin-left:0}
.hl-pop-row button[data-mv]{border:1px solid var(--line);background:#fff;font-size:13px;line-height:1;width:24px;height:24px;cursor:pointer;padding:0}
.hl-pop-row button[data-mv]:hover{border-color:var(--ink)}
.hl-pop-x{margin-left:auto;border:0;background:none;font-size:18px;line-height:1;color:var(--sub);cursor:pointer;padding:0 4px}
.hl-pop-x:hover{color:var(--accent)}
.hl-pop input{flex:1;border:0;border-bottom:1px solid var(--line);font:inherit;font-size:12.5px;padding:3px 4px;outline:none;background:none}
.hl-pop input:focus{border-bottom-color:var(--ink)}
.hl-pop-note textarea{width:100%;border:1px solid var(--line);font:inherit;font-size:12.5px;line-height:1.7;
padding:6px 7px;outline:none;background:none;resize:none;overflow-y:auto;min-height:52px}
.hl-pop-note textarea:focus{border-color:var(--ink)}
.hl-pop-act{justify-content:flex-end;gap:10px}
.hl-pop-n{color:var(--faint);font-size:11px;margin-right:auto}
.hl-notes{list-style:none;padding:0;margin:8px 0 0;font-size:12.5px;line-height:1.7}
.hl-notes li{padding:1px 0;display:flex;gap:6px;align-items:baseline}
.hl-notes li>span{white-space:pre-wrap}
.hl-notes q,.ack-it q{quotes:"「" "」";font-weight:600}
.hl-notes q+span,.ack-it q+span{color:var(--sub)}
.ack-who{color:var(--faint);font-size:11.5px}
.hl-view{margin-top:9px;border:1px solid var(--line);padding:10px 12px}
.hl-h{font-size:12.5px;font-weight:700;margin:0 0 6px}
.hl-view .ansq-b{margin-top:0}
/* 반영 체크 */
.ack-form,.ack-view{margin-top:10px;border:1px solid var(--line);padding:10px 12px}
.ack-h{font-size:12.5px;font-weight:700;margin:0 0 6px}
.ack-ol{margin:0;padding-left:20px;font-size:12.5px;line-height:1.7}
.ack-ol li{padding:4px 0;border-top:1px dashed var(--line)}
.ack-ol li:first-child{border-top:0}
.ack-it{margin:0}
.ack-ch{margin:3px 0 0;display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:12.5px}
.ack-ch label{display:inline-flex;align-items:center;gap:4px;cursor:pointer}
.ack-ch input[type=radio]{accent-color:var(--accent)}
.ack-why{border:0;border-bottom:1px solid var(--line);background:none;font:inherit;font-size:12.5px;padding:2px 4px;flex:1;min-width:180px;outline:none}
.ack-why:focus{border-bottom-color:var(--ink)}
.ack-cmt{font-size:11px;font-weight:700;color:var(--sub);border:1px solid var(--line);padding:0 4px;margin-right:4px}
.ack-ul{list-style:none;padding:0;margin:0;font-size:12.5px;line-height:1.7}
.ack-ul li{padding:3px 0;border-top:1px dashed var(--line)}
.ack-ul li:first-child{border-top:0}
.ack-re{margin:0;font-size:12px}
.ack-form .ansq-t{margin-top:8px}
@media print{.hl-bar,.ack-form{display:none}}
/* 탭이 늘어도 한 줄 — 좁아지면 짧은 이름으로 */
.tabs button,.subtabs button{flex:0 0 auto}
@media(max-width:1180px){.subtabs .lb-long{display:none}.subtabs .lb-short{display:inline}.subtabs button{padding:9px 10px 8px}}
@media(max-width:960px){.tabs .lb-long{display:none}.tabs .lb-short{display:inline}.tabs button{padding:13px 11px 11px;font-size:13.5px}}
/* 추천 음악 — 목록 */
.ml{list-style:none;padding:0;margin:0}
.ml-i{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)}
.ml-i:first-child{border-top:1px solid var(--ink)}
.ml-i.on .ml-t b{color:var(--accent)}
.ml-play{flex:0 0 auto;width:34px;height:34px;border:1px solid var(--line);background:#fff;font-size:13px;line-height:1;cursor:pointer;color:var(--ink);margin-top:2px}
.ml-play:hover{border-color:var(--ink)}
.ml-i.on .ml-play{border-color:var(--accent);color:var(--accent)}
.ml-b{flex:1;min-width:0}
/* 제목과 한 줄 메시지를 같은 줄에 둔다 — 좁은 화면에서는 메시지가 아랫줄로 내려간다(세 줄) */
.ml-t{margin:0;font-size:14px;line-height:1.5;word-break:keep-all;display:flex;align-items:baseline;
gap:9px;flex-wrap:wrap}
.ml-t b{font-weight:700}
.ml-t>span:not(.ml-n){display:block;font-size:12px;color:var(--sub);margin-top:1px}
.ml-n{font-size:13px;line-height:1.6;color:var(--sub);min-width:0;overflow-wrap:anywhere}
.ml-by{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:5px 0 0;font-size:12px;color:var(--sub)}
.ml-by .av{flex:0 0 auto}
.ml-by i{font-style:normal;color:var(--faint)}
.ml-yt,.ml-del{font-size:12px;color:var(--faint);text-decoration:underline;text-underline-offset:2px;background:none;border:0;padding:0;cursor:pointer;font-family:inherit}
.ml-yt:hover,.ml-del:hover{color:var(--accent)}
/* 차례 바꾸기(총괄) — 왼쪽 손잡이로 끌거나 ▲▼ 로 한 칸씩 */
.ml-grip{flex:0 0 auto;width:16px;margin-top:9px;color:var(--faint);font-size:14px;line-height:1;cursor:grab;user-select:none;text-align:center}
.ml-grip:active{cursor:grabbing}
.ml-i.ml-dragging{opacity:.45}
.ml-mv{display:inline-flex;gap:3px;margin-left:8px}
.ml-up{font-size:11px;line-height:1;color:var(--sub);background:#fff;border:1px solid #cfd3d9;padding:4px 8px;cursor:pointer;font-family:inherit}
.ml-up:hover{color:var(--ink);border-color:var(--ink)}
.ml-up:disabled{opacity:.3;cursor:default}
.ml-i.ml-moved{background:var(--wash)}
.ml-ordstate{margin:0 0 6px;min-height:16px}
@media(max-width:640px){.ml-grip{display:none}.ml-up{padding:3px 8px;font-size:12px}}
.ml-form{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--line);margin-bottom:16px;background:var(--wash)}
.ml-form input{font:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--line);background:#fff;outline:none}
.ml-form input:focus{border-color:var(--ink)}
.ml-form .send-act{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin:0}
.ml-form .state{font-size:12.5px;color:var(--sub)}
/* 화면 아래 얇은 재생 줄 — 영상은 1px 로 숨기고 소리만, 탭을 옮겨도 남는다 */
#mdock{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:1px solid var(--ink)}
.md-frame{position:absolute;width:1px;height:1px;overflow:hidden;opacity:.01;pointer-events:none;left:0;bottom:0}
.md-frame iframe{width:1px;height:1px;border:0}
.md-bar{display:flex;align-items:center;gap:12px;max-width:1120px;margin:0 auto;padding:8px clamp(14px,3vw,28px);font-size:13px}
.md-ico{color:var(--accent);font-size:15px;flex:0 0 auto}
.md-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.md-t b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md-t i{font-style:normal;font-size:11.5px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md-ctl{display:flex;align-items:center;gap:2px;flex:0 0 auto}
.md-b{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:0;background:none;color:var(--ink);cursor:pointer;padding:0;border-radius:50%}
.md-b svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.md-b:hover{background:var(--wash)}
.md-b.md-main{width:38px;height:38px;border:1px solid var(--ink);margin:0 4px}
.md-b.md-main svg{width:20px;height:20px}
.md-b.on{color:var(--accent)}
.md-b[data-md="close"]{color:var(--sub);margin-left:6px}
.ml-play svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block;margin:auto}
.ml-play{display:inline-flex;align-items:center;justify-content:center}
@media(max-width:640px){.md-bar{gap:8px;padding:8px 12px}.md-b.md-many[data-md="shuffle"]{display:none}}
body.has-dock{padding-bottom:56px}
@media print{#mdock{display:none}}
/* 「중요」 표 — 제목 앞에, 붉은 바탕이 은은하게 반짝인다 */
.post-t{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.post .tag.hot,p.post-t .tag.hot{margin:0}
.tag.hot{background:#d1342a;color:#fff;font-size:10.5px;font-weight:700;padding:2px 8px;letter-spacing:.04em;line-height:1.6;
box-shadow:0 0 0 0 rgba(209,52,42,.55);animation:tag-glow 1.8s ease-in-out infinite}
@keyframes tag-glow{0%,100%{box-shadow:0 0 0 0 rgba(209,52,42,.0)}50%{box-shadow:0 0 10px 2px rgba(209,52,42,.55)}}
@media (prefers-reduced-motion:reduce){.tag.hot{animation:none;box-shadow:0 0 6px 1px rgba(209,52,42,.4)}}
@media print{.tag.hot{animation:none;box-shadow:none}}
.md-note{font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:1px 0}
body.has-dock{padding-bottom:76px}
.ml-edit .ml-form{margin:0;padding:12px;gap:6px}
.ml-edit label{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--sub)}
.ml-edit label input{flex:1;min-width:0}
.ml-edit .send-act button[data-mecancel]{border:0;background:none;font:inherit;font-size:13px;color:var(--sub);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
/* 면접 임박(D-14 안) — 네모 없이 글자만, 붉은 글로우가 은은하게 숨 쉰다 */
.roster .r-sub.due{animation:dd-glow 2.2s ease-in-out infinite}
.roster button.on .r-sub.due{animation:dd-glow-on 2.2s ease-in-out infinite}
@keyframes dd-glow{0%,100%{text-shadow:0 0 0 rgba(157,52,39,0)}50%{text-shadow:0 0 8px rgba(157,52,39,.55)}}
@keyframes dd-glow-on{0%,100%{text-shadow:0 0 0 rgba(255,179,163,0)}50%{text-shadow:0 0 8px rgba(255,179,163,.8)}}
@media (prefers-reduced-motion:reduce){.roster .r-sub.due,.roster button.on .r-sub.due{animation:none;text-shadow:0 0 6px rgba(157,52,39,.35)}}
/* 추천 음악 등록 — 머리줄 굵은 선 없이, 안내는 얇은 선 상자 하나 */
.sec-plain .sec-h{border-bottom:0;padding-bottom:4px;margin-bottom:12px}
.ml-guide{font-size:13px;line-height:1.7;color:var(--sub);border:1px solid var(--line);padding:10px 12px;margin:0 0 14px;background:var(--wash)}
.ml-guide b{color:var(--ink)}
/* 내 면접 정보 — 머리줄 선 하나만 남긴다: 조정 접기의 굵은 윗선을 없애고, 그 아래 참고 안내의 붉은 윗선도 없앤다 */
.pk-fold{border-top:0;border-bottom:1px solid var(--line);margin-bottom:0}
.pk-fold+.caution{border-top:0;margin-top:0}
/* ── D-day 표시 ── 남은 날에 따라 초록 → 올리브 → 주황 → 빨강으로 매일 조금씩 바뀐다(색은 camp_view.js 가 계산해 인라인으로 넣는다) */
/* 클래스 이름은 .dday — 로그인 화면의 .dd(가장 가까운 면접 줄, display:flex·margin-bottom:22px)와 겹치면 안 된다 */
.dday{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.dday-past{color:var(--faint);font-weight:700;text-shadow:none}
.roster button.on .dday{filter:brightness(1.7) saturate(1.15)} /* 고른 줄은 배경이 검어서 한 단계 밝게 */
.stu-dd .dday{font-size:15px}
.uv-dd .dday{font-size:13.5px;margin-right:6px}
@media print{.dday{text-shadow:none}}
/* ── 선생님 고유색 ── 네모난 프로필(테두리·번개는 내 정보에서 고른 색)과 그 색으로 물든 피드백 상자 */
.av-t{position:relative;display:inline-block;flex:0 0 auto;vertical-align:middle;overflow:visible;line-height:0}
.av-t img{width:100%;height:100%;object-fit:cover;display:block;border:2px solid var(--tc);box-sizing:border-box;
box-shadow:0 0 6px var(--tcg),0 0 13px var(--tcg2)}
/* 사진이 없으면 이름 두 글자 — 격자 가운데 정렬로 두어야 글자가 한쪽으로 쏠리지 않는다 */
.av-t.none{display:inline-grid;place-items:center;background:#eef0f3;border:2px solid var(--tc);
box-sizing:border-box;box-shadow:0 0 6px var(--tcg),0 0 13px var(--tcg2);line-height:1}
.av-t.none i{grid-area:1/1;width:100%;text-align:center;font-style:normal;font-weight:700;color:#4a5260;
line-height:1;letter-spacing:0;white-space:nowrap}
.cmts{background:none;border-left:none;padding:0;margin-top:10px}
.cmt.tcol{border:1px solid var(--tcln);background:var(--tcbg);padding:8px 11px 9px;margin-top:8px}
.cmt.tcol+.cmt.tcol{margin-top:8px}
.cmt.tcol:last-child{border-bottom:1px solid var(--tcln)}
/* 색은 상자 테두리·바탕에만 — 이름은 검은색, 「vN 피드백」은 어느 선생님이든 붉은색으로 통일 */
/* 아이콘·이름·판 표시를 같은 간격으로 두고, 글자의 실제 높이에 맞춰 세로를 맞춘다
(이름 상자는 줄높이 때문에 글자가 0.5px쯤 위로 뜨므로 그만큼 이름 쪽을 내린다) */
.cmt.tcol .cmt-h{gap:7px;align-items:center}
.cmt.tcol .cmt-h .cmt-rev{margin-left:0}
.cmt.tcol .cmt-h b{color:var(--ink);line-height:1;position:relative;top:.5px}
.cmt.tcol .cmt-h .av-t{align-self:center}
.cmt.tcol .cmt-rev{color:#c62828;border-color:#c62828;background:#fff}
/* 내 정보 — 색 고르기 */
.me-color{margin-top:22px;padding-top:14px;border-top:1px solid var(--line)}
.mc-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.mc-row input[type=color]{width:52px;height:34px;padding:0;border:1px solid var(--line);background:none;cursor:pointer}
.mc-row input[type=text]{width:96px;border:1px solid var(--line);padding:6px 8px;font-size:13px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.mc-prev{display:inline-flex;align-items:center;margin-left:2px}
.mc-demo{max-width:520px;margin-top:14px}
@media print{.av-t img,.av-t.none{box-shadow:none}.cmt.tcol{background:none}}
/* ── 솔미(AI 고양이 로봇) 피드백 — 선생님 댓글 아래, 파란 상자 ── */
.ai-fb{border:1px solid #9dc4ee;background:#f2f7fe;padding:12px 14px 10px;margin-top:12px;
box-shadow:0 0 0 1px rgba(47,127,208,.08)}
.ai-h{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:#1f4f8f;line-height:1}
.ai-h b{font-size:12px;color:#14406f;font-weight:700}
.ai-tag{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.04em;color:#fff;background:#2f7fd0;padding:3px 6px;line-height:1}
.ai-h .cmt-rev{color:#2f7fd0;border-color:#9dc4ee}
.ai-at{margin-left:auto;color:#6f8bad;font-size:11.5px}
.ai-del{background:none;border:0;padding:0;margin-left:10px;font:inherit;font-size:11.5px;color:#7f97b5;
text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.ai-del:hover{color:#9d3427}
/* 정사각형 프로필 + 푸른 발광 테두리 + 테두리를 따라 흐르는 번개 */
.ai-av{position:relative;width:30px;height:30px;flex:0 0 auto;display:block}
.ai-av img{width:100%;height:100%;object-fit:cover;display:block;border:1.5px solid #2f7fd0;box-sizing:border-box;
box-shadow:0 0 5px rgba(47,127,208,.7),0 0 10px rgba(120,190,255,.4)}
/* 테두리를 따라 흐르는 번개 — 막장카드게임 티어 아이콘(13강)과 같은 무늬.
색·굵기·자리는 camp_view.js 가 태그에 직접 적고 깜빡임도 거기서 매 프레임 그린다(여기서는 건드리지 않는다). */
.ai-body{margin-top:7px;font-size:13px;line-height:1.75;color:var(--ink);white-space:pre-wrap}
.ai-body p{margin:0 0 8px}
.ai-body b{color:#14406f}
.ai-note{margin:10px 0 0;padding-top:8px;border-top:1px solid #cfe0f5;font-size:11.5px;color:#c62828;font-weight:700}
@media print{.ai-fb{display:none}}
/* ── 솔미의 답변 가이드 탭 ── 이 탭만 푸른색으로 묶는다(다른 화면의 색과 섞이지 않게 .gd 안에서만) */
.tabs button[data-k="guide"],.subtabs button[data-k="guide"]{color:#2f7fd0}
.tabs button[data-k="guide"]:hover,.subtabs button[data-k="guide"]:hover{color:#14406f}
.tabs button[data-k="guide"].on,.subtabs button[data-k="guide"].on{color:#14406f;border-bottom-color:#2f7fd0}
.tabs button[data-k="guide"].on{background:#f2f7fe}
.gd{--gl:#9dc4ee;--gd:#2f7fd0;--gi:#14406f;--gbg:#f2f7fe}
.gd .sec-h h2{color:var(--gi)}
.gd-hero{border:1px solid var(--gl);background:var(--gbg);padding:13px 15px 14px;margin-top:12px}
.gd-h{display:flex;align-items:center;gap:6px;font-size:12px;color:#1f4f8f;line-height:1}
.gd-h b{font-size:12px;color:var(--gi);font-weight:700}
.gd-say-t{margin:9px 0 0;font-size:13.5px;line-height:1.8;color:var(--gi);font-weight:700}
/* 차례 */
.gd-toc{list-style:none;margin:14px 0 4px;padding:0;display:grid;grid-template-columns:1fr 1fr;
gap:2px 18px;font-size:12.5px;color:var(--sub);line-height:1.9}
.gd-toc li{display:flex;gap:7px;align-items:baseline;border-top:1px solid var(--line);padding-top:3px}
.gd-toc i{font-style:normal;color:var(--gd);font-weight:700;font-size:11px;min-width:13px;text-align:right}
@media(max-width:640px){.gd-toc{grid-template-columns:1fr}}
/* 한 절 */
.gd-sec{margin-top:24px;padding-top:14px;border-top:1px solid var(--gl)}
.gd-sec>h3{display:flex;gap:8px;align-items:baseline;margin:0 0 9px;font-size:14.5px;color:var(--gi);font-weight:700}
.gd-sec>h3 i{font-style:normal;font-size:11.5px;font-weight:800;color:var(--gd);letter-spacing:.06em}
.gd-say{display:flex;gap:9px;align-items:flex-start;background:var(--gbg);border:1px solid var(--gl);padding:9px 11px}
.gd-say .ai-av{width:22px;height:22px;margin-top:1px}
.gd-say p{margin:0;font-size:13px;line-height:1.8;color:var(--ink)}
/* 공통 질문을 통째로 만들어 본 묶음 */
.gd-q{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.gd-q:first-child{border-top:0;padding-top:0;margin-top:12px}
.gd-qh{margin:0;font-size:13.5px;font-weight:700;color:var(--gi);display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.gd-qh i{font-style:normal;font-size:11.5px;font-weight:800;color:var(--gd);letter-spacing:.04em}
.gd-qh em{font-style:normal;font-weight:400;font-size:11.5px;color:var(--sub);margin-left:auto}
.gd-t.ans th{width:126px;color:var(--gd);font-weight:700}
.gd-t.ans td{color:var(--ink)}
/* 예시 표 — 얇은 선만 */
table.gd-t{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:11px;table-layout:fixed;word-break:keep-all}
.gd-t th,.gd-t td{border-top:1px solid var(--line);padding:7px 9px 7px 0;vertical-align:top;line-height:1.75;text-align:left}
.gd-t th{width:120px;color:var(--sub);font-weight:700;white-space:normal}
.gd-t.wide th:first-child,.gd-t.wide td:first-child{width:196px}
.gd-t.g3 th,.gd-t.g3 td{width:auto}
.gd-t.g3 th:first-child,.gd-t.g3 td:first-child{width:132px}
.gd-t td b{color:var(--gi)}
.gd-t td+th{padding-left:9px}
.gd-bad{color:#9d3427}
.gd-good{color:#1a6b3c}
.gd-t th.gd-bad,.gd-t th.gd-good{font-weight:700}
.gd-svg{width:100%;max-width:560px;height:auto;display:block;margin:12px 0 2px;border:1px solid var(--line);
padding:8px;box-sizing:border-box;background:#fff}
.gd-note{margin:8px 0 0;font-size:12px;color:var(--sub);line-height:1.75}
/* 공식 자료에서 그대로 옮겨 온 인용 */
.gd-cite{margin:12px 0 0;padding:10px 0 9px;border-top:1px solid var(--gl);border-bottom:1px solid var(--gl)}
.gd-cq{margin:0 0 6px;font-size:12px;font-weight:700;color:var(--gd)}
.gd-cite q{display:block;font-size:13px;line-height:1.8;color:var(--ink);quotes:"「" "」"}
.gd-cite q+q{margin-top:6px}
.gd-cite p.gd-bad,.gd-cite p.gd-good{margin:4px 0 0;font-size:13px;line-height:1.8}
.gd-cite cite{display:block;margin-top:7px;font-size:11.5px;font-style:normal;color:var(--sub);line-height:1.7}
.gd-cite cite b{color:var(--gd)}
/* 출처 목록 */
.gd-refs{margin-top:26px;padding-top:14px;border-top:1px solid var(--gl)}
.gd-refs h3{margin:0 0 9px;font-size:13.5px;color:var(--gi)}
.gd-refs ol{list-style:none;margin:0;padding:0;font-size:12.5px;line-height:1.85}
.gd-refs li{display:flex;gap:7px;align-items:baseline;border-top:1px solid var(--line);padding:4px 0}
.gd-refs li:first-child{border-top:0}
.gd-refs i{font-style:normal;color:var(--gd);font-weight:700;font-size:11.5px;flex:0 0 auto}
.gd-refs a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;word-break:break-all}
.gd-refs a:hover{color:var(--gd)}
.gd-bye{margin-top:26px;padding:13px 15px 14px;border:1px solid var(--gl);background:var(--gbg)}
.gd-bye p{margin:9px 0 0;font-size:13.5px;line-height:1.85;color:var(--gi)}
@media(max-width:560px){.gd-t{font-size:12px}.gd-t th{width:92px}.gd-t.ans th{width:104px}.gd-qh em{margin-left:0}.gd-t.wide th:first-child,.gd-t.wide td:first-child{width:140px}}
@media print{.gd-hero,.gd-say{background:none}}
/* 완료 도장 — 답안 칸 안에 실제 도장처럼 */
.ansq-b.hl-body{position:relative;overflow:hidden} /* 칸 밖으로 걸친 도장은 잘려서 일부만 보인다 */
.stamp-slot{display:contents}
.stamp{position:absolute;width:clamp(60px,18%,96px);height:auto;transform:translate(-50%,-50%) rotate(var(--r,0deg));pointer-events:none;
opacity:.62;mix-blend-mode:multiply;filter:drop-shadow(0 1px 1px rgba(0,0,0,.12));user-select:none;z-index:2}
.stamp.stamp-mine{pointer-events:auto;cursor:pointer}
.stamp.stamp-mine:hover{opacity:1;filter:drop-shadow(0 0 4px rgba(157,52,39,.45))}
.stamp.stamp-press{animation:stamp-press .42s cubic-bezier(.2,1.4,.4,1) both}
@keyframes stamp-press{0%{transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(1.9);opacity:0}55%{transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(.94);opacity:.8}100%{transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(1);opacity:.62}}
.stamp-cursor{position:fixed;left:-999px;top:-999px;width:88px;height:auto;pointer-events:none;z-index:120;opacity:.7;
transform:translate(-50%,-50%) rotate(var(--r,0deg));filter:drop-shadow(0 3px 6px rgba(0,0,0,.25))}
body.stamping .ansq-b.hl-body{cursor:none;outline:1px dashed var(--accent);outline-offset:2px}
.stamp-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;font-size:12px;color:var(--sub)}
.stamp-pick{width:34px;height:34px;padding:2px;border:1px solid var(--line);background:#fff;border-radius:50%;cursor:pointer;transition:transform .12s}
.stamp-pick img{width:100%;height:100%;object-fit:contain;display:block}
.stamp-pick:hover{transform:translateY(-2px);border-color:var(--ink)}
.stamp-pick.on{outline:2px solid var(--accent);outline-offset:2px}
.stamp-line{margin:6px 0 0;font-size:12.5px;color:var(--sub)}
.stamp-line b{color:#2f7a5c;margin-right:4px}
.hl-view.stamped{border-color:#2f7a5c}
.q-done.q-stamp{color:#2f7a5c;border-color:#2f7a5c;margin-left:4px}
@media print{.stamp-bar,.stamp-cursor{display:none}}
/* 내 면접 정보 — 참고용 경고를 붉은 상자로, 은은한 글로우 */
.caution.caution-hot{display:block;position:relative;border:1.5px solid #c9302c;border-bottom:1.5px solid #c9302c;background:#fff;color:var(--ink);padding:11px 14px 11px 44px;margin:12px 0 18px;
font-size:13.5px;line-height:1.7;box-shadow:0 0 0 0 rgba(201,48,44,0);animation:caution-glow 2.6s ease-in-out infinite}
.pk-fold+.caution.caution-hot{border-top:1.5px solid #c9302c;margin-top:12px}
.caution.caution-hot b{color:#c9302c}
.ch-ico{position:absolute;left:14px;top:11px;width:20px;height:20px;border-radius:50%;background:#c9302c;color:#fff;font-weight:800;font-size:13px;line-height:20px;text-align:center;margin-top:calc((1.7em - 20px)/2)}
@keyframes caution-glow{0%,100%{box-shadow:0 0 0 0 rgba(201,48,44,0)}50%{box-shadow:0 0 14px 2px rgba(201,48,44,.38)}}
@media (prefers-reduced-motion:reduce){.caution.caution-hot{animation:none;box-shadow:0 0 10px 1px rgba(201,48,44,.3)}}
@media print{.caution.caution-hot{animation:none;box-shadow:none}}
/* 새 답안 표시 — 「답안 n/n」 앞에 작은 붉은 new 아이콘을 두고 글자도 붉게. 피드백을 달면 사라진다 */
.roster .r-sub .r-pg.fresh{color:#d1342a;font-weight:700}
.roster button.on .r-pg.fresh{color:#ffb3a3;font-weight:700}
/* 배지는 「답안 n/n」 바로 위 — D-day 와의 사이 여백 안에 띄워 줄 높이를 늘리지 않는다 */
.roster .r-sub .r-pg{position:relative}
.roster .r-pg .r-new{font-size:8px;padding:1px 3.5px;margin:0;letter-spacing:.03em;text-shadow:none;
position:absolute;right:0;bottom:100%;margin-bottom:1px}
.r-new{display:inline-block;font-style:normal;font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1;
color:#fff;background:#d1342a;padding:3px 6px 2px;border-radius:9px;margin-right:6px;vertical-align:1px;animation:new-glow 2s ease-in-out infinite}
.roster button.on .r-new{background:#ff6b5e}
@keyframes new-glow{0%,100%{box-shadow:0 0 0 0 rgba(209,52,42,0)}50%{box-shadow:0 0 7px 1px rgba(209,52,42,.6)}}
@media (prefers-reduced-motion:reduce){.r-new{animation:none;box-shadow:0 0 5px 1px rgba(209,52,42,.4)}}
/* 학생 화면 머리띠 — 맨 왼쪽 치즈냥이 + 캠프 이름, 얇은 세로 구분선, 그 다음 학생 정보 */
.top .top-brand{display:flex;align-items:center;gap:9px;color:#e8ecf1;user-select:none;flex:0 0 auto;margin:0;font-size:inherit;line-height:1.2}
.top .top-brand img{width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.top .top-brand span{display:flex;flex-direction:column;line-height:1.2}
.top .top-brand b{font-size:13.5px;font-weight:700;letter-spacing:-.01em;color:#fff}
.top .top-brand i{font-style:normal;font-size:10.5px;color:#98a4b3;letter-spacing:.02em}
.top .top-sep{display:inline-block;width:1px;height:26px;background:rgba(255,255,255,.22);flex:0 0 auto;margin:0 2px}
@media(max-width:820px){.top .top-brand span{display:none}.top .top-brand{gap:0}}
@media(max-width:560px){.top .top-brand,.top .top-sep{display:none}}
/* 답안 칸 단추 — 밑줄 대신 각자 다른 색의 작은 상자. 타이머는 예상 시간 옆, 임시 저장·제출은 맨 오른쪽 */
.ansq-t .btn.bx{margin-left:0;display:inline-flex;align-items:center;border:1px solid transparent;border-radius:4px;padding:5px 11px;font-size:12.5px;font-weight:600;line-height:1.3;transition:background .12s,border-color .12s,color .12s}
.ansq-t .btn.bx-timer{background:#f3f4f6;border-color:#d7dbe1;color:var(--ink)}
.ansq-t .btn.bx-timer:hover{background:#e9ebef;border-color:#b9c0c9}
.ansq-t .btn.bx-save{background:#eef3fa;border-color:#cbd8ea;color:#2c4a73}
.ansq-t .btn.bx-save:hover{background:#e2ebf7;border-color:#a9bfdc}
.ansq-t .btn.bx-submit{background:var(--ink);border-color:var(--ink);color:#fff}
.ansq-t .btn.bx-submit:hover{background:#2b3138;border-color:#2b3138}
.ansq-t .btn.bx:disabled{opacity:.55;cursor:default}
.ansq-t .tm{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:700}
.ansq-t .tm:empty{display:none}
.ansq-acts{display:inline-flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap}
.ansq-acts .btn{margin-left:0}
@media(max-width:640px){.ansq-t .btn.bx{padding:5px 9px;font-size:12px}.ansq-acts{gap:6px}}
/* 학생 머리띠 — 모든 덩어리를 세로 가운데에, 나가기는 상자 단추로 */
.top{align-items:center}
.top .top-brand,.top .me,.top .next{align-self:center}
.top .next{align-items:center;line-height:1.2}
.top .next b{line-height:1}
.top .me button{align-self:center;border-radius:4px;padding:5px 10px;line-height:1.2}
.top #logout{align-self:center;border:1px solid #5c6673;border-radius:4px;padding:6px 12px;color:#e8ecf1;font-size:12.5px;font-weight:600;line-height:1.2;background:transparent;transition:background .12s,border-color .12s}
.top #logout:hover{background:#2b3138;border-color:#98a4b3;color:#fff}
/* 추천 음악 — 설명 바로 아래 한 줄 명언. 장식 없이 양쪽 따옴표 그대로, 글자색만 따뜻한 회갈색 */
.ml-quote{margin:8px 0 20px;font-size:13px;line-height:1.7;color:#6b5f55}
.ml-quote em{font-style:normal;color:#2468b8;font-weight:600}
.ml-quote i{font-style:normal;font-size:12px;color:var(--faint);white-space:nowrap}
.sec .sub+.ml-quote{margin-top:6px}
/* 답안 판 탭 — v1 · v2 · 현재. 이전 판을 고르면 그 본문이 보이고 「현재와 비교」로 고친 자리를 본다 */
.vtabs{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin:6px 0 2px;font-size:12px}
.vtabs .vt{border:1px solid var(--line);background:#fff;color:var(--sub);font:inherit;font-size:12px;font-weight:700;padding:3px 9px;border-radius:3px;cursor:pointer;line-height:1.3;font-variant-numeric:tabular-nums}
.vtabs .vt:hover{border-color:var(--ink);color:var(--ink)}
.vtabs .vt.on{background:var(--ink);border-color:var(--ink);color:#fff}
.vtabs .vt i{font-style:normal;font-weight:400;font-size:10.5px;margin-left:4px;opacity:.8}
.vtabs .vt-cmp{margin-left:8px;border:0;background:none;font:inherit;font-size:12px;color:var(--accent);cursor:pointer;padding:3px 2px;text-decoration:underline;text-underline-offset:3px}
.vtabs .vt-cmp[aria-pressed=true]{color:var(--ink)}
.vtabs .vt-when{font-size:11.5px;color:var(--faint);margin-left:6px}
.vtabs .vt-when:empty{display:none}
.ansq-b.vold{white-space:pre-wrap;border-left:3px solid var(--line2);color:var(--sub)}
.ansq.viewing-old .hl-bar,.ansq.viewing-old .stamp-bar,.ansq.viewing-old [data-hlnotes]{display:none}
/* 판 나란히 비교 — 왼쪽 이전 판, 오른쪽 현재 판. 표시 없이 글만 */
.vside{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:9px}
.vside .vs-col{min-width:0}
.vside .vs-h{margin:0 0 6px;font-size:11.5px;color:var(--sub);display:flex;align-items:center;gap:6px}
.vside .ansq-b{margin-top:0;height:100%;white-space:pre-wrap;color:var(--sub);background:var(--wash)}
.vside .vs-cur .ansq-b{color:var(--ink);background:#fff;border:1px solid var(--line)}
@media(max-width:760px){.vside{grid-template-columns:1fr}}
.ansq.comparing .hl-bar,.ansq.comparing .stamp-bar,.ansq.comparing [data-hlnotes]{display:none}
/* 휴대폰에서는 도장·도장 고르기 단추를 글자 크기에 맞게 줄인다(넓은 화면 비율을 그대로 쓰면 답안 칸을 뒤덮는다) */
@media(max-width:640px){
.stamp{width:clamp(44px,15%,72px);opacity:.55}
.stamp-pick{width:26px;height:26px;padding:1px}
.stamp-bar{gap:6px;font-size:11.5px}
.stamp-cursor{width:64px}
.hl-pen{width:20px;height:20px}
.hl-bar{gap:5px;font-size:11.5px}
.hl-hint{display:none}
}
/* 도장 — 오른쪽·아래 기준 자리(anch): 그 점을 도장 중심으로. 크기는 화면과 무관하게 일정하게 */
.stamp{width:clamp(72px,18%,96px)}
.stamp.anch{transform:rotate(var(--r,0deg))}
.stamp.anch.stamp-press{animation-name:stamp-press-a}
@keyframes stamp-press-a{0%{transform:rotate(var(--r,0deg)) scale(1.9);opacity:0}55%{transform:rotate(var(--r,0deg)) scale(.94);opacity:.8}100%{transform:rotate(var(--r,0deg)) scale(1);opacity:.62}}
@media(max-width:640px){
.stamp{width:76px;opacity:.62}
.ansq-b.hl-body{padding-bottom:34px} /* 아래쪽 도장이 글을 덜 가리도록 칸 아래에 숨 쉴 자리 */
}
/* 학생과의 대화 — 소개 한 줄, 목록은 이름·학번 한 줄 + 미리보기 한 줄 */
.talk-intro{font-size:13px;color:var(--sub);margin:0 0 12px;line-height:1.7}
.th-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;line-height:1.3}
.th-top>b{font-size:14px}
.th-top>.muted{font-size:11.5px;margin-left:0}
.th-top .tag.wait{margin-left:2px}
details.thread>summary.thread-h{padding:8px 6px}
.th-main{gap:1px}
/* 학생 상세 — 머리 표(stu-top)·조정 표시 다음에 바로 탭. 안내 문장을 뺀 만큼 위 여백만 살짝 */
.stu-top+.subtabs,.chg-bar+.subtabs{margin-top:10px}
/* 내가 먼저 거는 대화 — 목록 위에 얇은 선으로 구분된 한 칸 */
.talk-new{border-top:1px solid var(--ink);border-bottom:1px solid var(--line);padding:0;margin:0 0 18px}
.talk-new .tn-h{margin:0;padding:11px 0;font-size:13px;font-weight:700;color:var(--ink);cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.talk-new .tn-h::-webkit-details-marker{display:none}
.talk-new .tn-h .tn-btn{display:inline-block;padding:6px 12px;border:1px solid var(--ink);color:var(--ink);font-size:12.5px}
.talk-new .tn-h .tn-btn::before{content:"+ ";color:var(--accent)}
.talk-new[open] .tn-h .tn-btn{background:var(--ink);color:#fff}
.talk-new[open] .tn-h .tn-btn::before{content:"– ";color:#fff}
.talk-new .tn-h i{font-style:normal;font-weight:400;font-size:12px;color:var(--faint)}
.talk-new .tn-h:hover .tn-btn{border-color:var(--accent);color:var(--accent)}
.talk-new[open] .tn-h:hover .tn-btn{color:#fff}
.talk-new[open] .tn-row{margin-top:2px}
.talk-new[open] .send-act{margin-bottom:12px}
.tn-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px;font-size:12.5px;color:var(--sub)}
.tn-row label{color:var(--ink)}
.tn-row select{font:inherit;font-size:13px;padding:5px 8px;border:1px solid var(--line);background:#fff;color:var(--ink);max-width:100%}
.tn-note{font-size:12px;color:var(--sub)}
@media(max-width:640px){.tn-row{gap:6px}.tn-note{flex:1 0 100%}}
/* 학생과의 대화 — 안 읽은 대화는 이름을 진하게 + new 표시 */
details.thread.unread>summary .th-top>b{color:var(--ink);font-weight:800}
.th-top .r-new{margin:0 2px;position:relative;top:-2px}
/* 선생님 게시판 안내 — 머리줄 선 하나만, 붉은 윗선 없음 */
.caution.caution-plain{border-top:0;border-bottom:0;padding-top:2px;margin-bottom:14px}
/* 선생님 화면 — 탭 막대와 첫 내용 사이 숨 쉴 여백 */
.adm-wrap{padding-top:26px}
@media(max-width:640px){.adm-wrap{padding-top:20px}}
.adm-wrap #panel>.grid{margin-top:0} /* 학생 탭은 이미 위 여백이 있었으니 겹치지 않게 */
/* 로그인 칸 — 왼쪽에 고양이 한 마리씩. 칸 이름은 위에, 고양이는 입력 줄과 같은 높이에 */
.gate-form .f.fc{display:grid;grid-template-columns:30px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;align-items:end}
.gate-form .f.fc>span{grid-column:2;grid-row:1}
.gate-form .f.fc>input,.gate-form .f.fc>select{grid-column:2;grid-row:2;min-width:0}
.gate-form .f.fc>.fi{grid-column:1;grid-row:2;align-self:center;width:30px;height:30px;background-size:contain;background-repeat:no-repeat;background-position:center;opacity:.95;filter:drop-shadow(0 1px 1px rgba(0,0,0,.12))}
.fi[data-ico="home"]{background-image:url(./susi-icons/home.png)}
.fi[data-ico="fit"]{background-image:url(./susi-icons/fit.png)}
.fi[data-ico="record"]{background-image:url(./susi-icons/record.png)}
.fi[data-ico="gpa"]{background-image:url(./susi-icons/gpa.png)}
.fi[data-ico="cases"]{background-image:url(./susi-icons/cases.png)}
.fi[data-ico="strength"]{background-image:url(./susi-icons/strength.png)}
.fi[data-ico="caution"]{background-image:url(./susi-icons/caution.png)}
.fi[data-ico="pool"]{background-image:url(./susi-icons/pool.png)}
/* ═══════════ 로그인 화면 — 왼쪽 캠프 정보(검정) · 가운데 사진 · 오른쪽 로그인 ═══════════ */
/* 검은 칸을 살짝 좁히고, 남은 폭은 사진 폭은 그대로 둔 채 오른쪽으로 흘려보낸다
— 사진은 그만큼 왼쪽으로 붙고, 로그인 칸도 가운데 정렬을 지키면서 조금 왼쪽으로 당겨진다 */
.gate{grid-template-columns:minmax(214px,0.52fr) minmax(0,0.91fr) minmax(0,1.62fr);background:#fff}
.gate-photo{position:relative;padding:0;background:#14181d;overflow:hidden;min-height:100vh}
.gate-bg{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center;
opacity:0;transition:opacity .45s ease;user-select:none;max-width:none}
.gate-bg.on{opacity:1}
/* 캠프 정보 — 검은 바탕에 밝은 글씨 */
.gate-left{background:#000;color:#eef1f4;padding:clamp(22px,2.1vw,34px) clamp(16px,1.5vw,26px);display:flex;flex-direction:column;justify-content:center}
.gate-left.no-bg{background:#000;color:#eef1f4}
.gate-left>.gate-rest{margin-top:22px}
.gate-left .kicker{color:#9aa4b2;font-weight:600;font-size:11.5px}
.gate-left .brand{color:#fff;font-size:clamp(30px,2.5vw,40px);white-space:nowrap;margin-top:8px}
.gate-left .brand-pre{display:none;font-style:normal}
.gate-left .brand-sub{color:#c3cad3;font-weight:600;font-size:13px;margin-top:7px}
.gate-left .gate-rule{background:#2b323b;margin:18px 0 16px}
.gate-left .dd{gap:8px;margin-bottom:16px}
.gate-left .dd-label{color:#9aa4b2;font-weight:700}
.gate-left .dd-num{color:#e8a598;font-size:32px}
.gate-left .dd-when{color:#c3cad3;font-weight:600;font-size:12.5px}
/* 왼쪽 판 맨 위 도메인 — 은은하게 */
.gate-domain{margin:0 0 12px;padding:0;font-size:11.5px;letter-spacing:.08em;color:#5f6976;font-variant-numeric:tabular-nums}
@media(max-width:760px){.gate-domain{margin-bottom:8px;font-size:10.5px}}
.gate-left .sched{color:#dfe4ea;font-weight:600;font-size:12.5px}
.gate-left .sched td{border-bottom:1px solid #262d36;padding:5px 0}
.gate-left .sched td:first-child{color:#9aa4b2;width:86px;white-space:nowrap}
/* 대학 이름은 가운데서 잘리지 않는다 — 자리가 모자라면 이름 통째로 다음 줄로 */
.gate-left .u1{display:inline-block;white-space:nowrap;font-weight:inherit}
.gate-left .usep{font-style:normal;color:#7c8492}
.gate-left .sched .more{color:#e8a598;font-weight:700}
/* PC 권장 안내 — 제목 바로 밑. 휴대폰에서도 첫 화면에서 바로 보이게 */
.gate-left .gate-foot{color:#9aa4b2;margin-top:10px;padding-top:0;border-top:0;font-size:11.5px}
.gate-left .gate-foot b{color:#fff;font-weight:700;text-shadow:0 0 7px rgba(255,255,255,.7)}
/* 로그인 칸 — 여유 있게 */
.gate-right{padding:clamp(28px,4vw,72px)}
.gate-form{width:min(420px,100%)}
/* 좁은 화면: 타이틀 → 사진 → 로그인 → 면접 정보 */
@media(max-width:980px){
.gate{grid-template-columns:1fr}
.gate-photo{order:2;min-height:0;height:52vh}
.gate-bg{height:100%;width:100%}
.gate-left{display:contents}
/* 휴대폰에서는 검은 띠를 두 줄로 — 「온양고 면접 캠프」와 PC 권장 안내만 */
.gate-left>.gate-hero{order:1;background:#000;padding:13px 18px 12px}
.gate-left>.gate-hero .gate-rule{display:none}
.gate-left>.gate-hero .kicker,.gate-left>.gate-hero .brand-sub{display:none}
.gate-left .brand-pre{display:inline}
.gate-right{order:3;padding:22px 20px 26px;background:#fff}
.gate-left>.gate-rest{order:4;background:#000;margin-top:0;padding:18px 20px 26px}
.gate-left .brand{font-size:23px;margin-top:0}
.gate-left .gate-foot{margin-top:5px;font-size:12px}
.gate-left .gate-rule{margin:14px 0 12px}
}
@media print{.gate-photo{display:none}}
/* ═══════════ 넓은 화면에서 좌우 빈 자리 줄이기 — 답답하지 않게 여백은 남긴다 ═══════════ */
/* 선생님 화면: 1180px 로 묶여 양옆이 비던 것을 화면 폭에 맞춰 넓힌다(아주 넓은 화면만 1720px 로 제한) */
.adm-wrap{max-width:min(1720px,96vw);padding-left:clamp(16px,2.4vw,40px);padding-right:clamp(16px,2.4vw,40px)}
/* 학생 목록은 조금 좁게, 본문이 더 넓게 */
.grid{--rs:248px;column-gap:clamp(9px,1.1vw,15px)}
@media(max-width:1180px){.grid{--rs:232px}}
/* 학생 화면 본문도 같은 리듬으로 — 글줄이 너무 길어지지 않게 1280px 까지만 */
main{max-width:min(1280px,94vw);padding-left:clamp(16px,3vw,40px);padding-right:clamp(16px,3vw,40px)}
/* 아래 재생 줄도 본문 폭에 맞춘다 */
.md-bar{max-width:min(1720px,96vw)}
@media(max-width:980px){
.adm-wrap{max-width:100%;padding-left:16px;padding-right:16px}
main{max-width:100%}
}
/* 학생 목록 묶음 머리글 — 「분야 · n명」 한 줄, 선생님 이름 한 줄 */
.roster .r-gh{display:block;line-height:1.35;padding:6px 9px 7px}
.roster .r-gh>b{display:flex;align-items:baseline;gap:6px;font-weight:700;font-size:11.5px}
.roster .r-gh>b>i{margin-left:auto;font-style:normal;font-weight:500;font-size:11px;opacity:.85;white-space:nowrap}
.roster .r-gh>span{display:block;margin:2px 0 0;font-weight:500;font-size:10.5px;color:#c3cad3;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.roster .r-gh.flat>span{color:#98a4b3}
/* ═══════════ 휴대폰 — 선생님 화면의 학생 목록을 위쪽 가로줄로 ═══════════ */
@media(max-width:860px){
.grid{grid-template-columns:1fr;gap:0}
.grid .roster{position:static;max-height:none;overflow:visible;background:var(--tint-list);
padding:8px 10px 10px;margin:0 0 16px;border-bottom:2px solid var(--ink)}
.roster .r-grp{margin-bottom:10px}
.roster .r-gh{position:static;border-radius:3px}
/* 학생은 옆으로 이어지는 칩 — 손가락으로 밀어 넘긴다 */
.roster .r-items{display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;padding:6px 2px 4px;
-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scrollbar-width:none;
overscroll-behavior-x:contain;touch-action:pan-x}
.roster .r-items::-webkit-scrollbar{display:none}
/* 칩 줄도 옆으로 더 있다는 표시를 붙인다 — 탭과 구분되게 파란 세모 */
.roster .r-items{--tabpad:2px;--tabgap:6px}
.roster .r-items .tab-edge{display:block;--edge:#2f7fd0;--edge-glow:rgba(47,127,208,.6);--edge-bg:var(--tint-list)}
.roster .r-items>button{flex:0 0 auto;width:auto;display:flex;align-items:center;gap:7px;
border:1px solid var(--line);border-radius:999px;background:#fff;padding:6px 12px 6px 7px;scroll-snap-align:start}
.roster .r-items>button.on{background:var(--ink);border-color:var(--ink)}
.roster .r-items>button .r-nm{flex-direction:row;align-items:baseline;gap:5px}
.roster .r-items>button .r-hb,.roster .r-items>button .r-nm i{font-size:10.5px}
/* 칩은 가로로 늘어서므로 계열은 빼고 학번은 숫자만 — 가로 길이를 줄인다 */
.roster .r-items>button .r-tr{display:none}
.roster .r-items>button .r-hb .hb-full{display:none}
.roster .r-items>button .r-hb .hb-num{display:inline}
.roster .r-items>button .r-sub{margin-left:6px;flex-direction:row;align-items:baseline;gap:5px;white-space:nowrap}
.roster .r-items>button .r-pg{font-size:10.5px}
/* 칩은 글자 위 여백이 6px 뿐이라 배지를 한 단계 작게 — 칩 높이(36px)는 그대로 둔다 */
.roster .r-items>button .r-pg .r-new{font-size:7px;padding:.5px 3px;margin-bottom:0}
.roster .r-items>button .av{width:22px;height:22px;flex:0 0 auto}
.roster .r-find{padding:0}
.roster .r-row2{margin-top:2px}
}
/* ═══════════ 탭 — 서류철 탭. 색은 쓰지 않고, 고른 탭은 아래 본문과 선 없이 이어진다 ═══════════ */
.tabs,.subtabs{overflow-y:hidden;overscroll-behavior-x:contain;overscroll-behavior-y:none;touch-action:pan-x}
.subtabs{-webkit-overflow-scrolling:touch;scrollbar-width:none}
.subtabs::-webkit-scrollbar{display:none}
.tabs,.subtabs{gap:3px;align-items:flex-end;flex-wrap:nowrap;border-bottom:0;background:#fff}
/* 안 고른 탭 — 뒤로 물러난 종이 */
.tabs button,.subtabs button{flex:0 0 auto;position:relative;z-index:1;margin-bottom:0;
border:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:8px 8px 0 0;
background:#f2f3f5;color:var(--sub);font-weight:600;transition:background .12s,color .12s}
.tabs button{padding:12px 15px 10px}
.subtabs button{padding:9px 13px 7px}
.tabs button:hover,.subtabs button:hover{background:#f8f9fa;color:var(--ink)}
/* 고른 탭 — 흰 종이가 앞으로 나오고, 아래 구분선을 덮어 본문과 한 장이 된다 */
/* 고른 탭 — 아래 선이 아예 없다(본문과 한 장) */
.tabs button.on,.subtabs button.on{z-index:3;background:#fff;color:var(--ink);font-weight:700;
border-color:var(--line);border-bottom:0;padding-top:14px;padding-bottom:11px}
.subtabs button.on{padding-top:11px;padding-bottom:8px}
.tabs button.on:hover,.subtabs button.on:hover{background:#fff}
.tabs button i,.subtabs button i{background:#e6e8ec;color:var(--sub)}
.tabs button.on i,.subtabs button.on i{background:var(--wash);color:var(--ink)}
.tabs button i.hot,.subtabs button i.hot{background:#9d3427;color:#fff}
/* 선생님 참고 자료 — 780px 로 묶여 오른쪽이 비던 것을 화면에 맞춘다(글줄이 너무 길지 않게 1040px 까지) */
.rf{max-width:min(1040px,100%)}
/* 도해 — 글줄 폭만큼 크게(원본 viewBox 420 기준 약 2배). 인쇄에서도 같은 크기 */
.rf-svg{max-width:min(860px,100%);padding:12px}
/* 선생님이 보는 학생 화면 — 「답변 확인 및 피드백」. 새 답안이 있으면 붉게(new), 없으면 초록 */
.subtabs button[data-k="ans"].hot{border-color:#d9877a;color:#9d3427;background:#fdf4f2;
animation:ans-glow 2.4s ease-in-out infinite}
.subtabs button[data-k="ans"].hot:hover{background:#fbe9e5;color:#9d3427}
.subtabs button[data-k="ans"].hot.on{background:#9d3427;border-color:#9d3427;color:#fff;animation:none;
box-shadow:0 0 10px 1px rgba(157,52,39,.45)}
.subtabs button[data-k="ans"].hot.on i{background:rgba(255,255,255,.22);color:#fff}
.subtabs button[data-k="ans"].hot i{background:#f6dfd9;color:#9d3427}
.subtabs button[data-k="ans"].hot.on .r-new{background:#ff6b5e}
.subtabs button[data-k="ans"] .r-new{margin-right:5px;vertical-align:1px;position:relative;top:-.6px}
@keyframes ans-glow{0%,100%{box-shadow:0 0 0 0 rgba(157,52,39,0)}50%{box-shadow:0 0 9px 1px rgba(157,52,39,.45)}}
@media (prefers-reduced-motion:reduce){.subtabs button[data-k="ans"].hot{animation:none;box-shadow:0 0 7px 1px rgba(157,52,39,.35)}}
/* 학생 화면 — 선생님이 새로 건 말이 있으면 「선생님과 대화」 탭을 같은 모양으로 강조 */
.tabs button.hot{border-color:#d9877a;color:#9d3427;background:#fdf4f2;
animation:ans-glow 2.4s ease-in-out infinite}
.tabs button.hot:hover{background:#fbe9e5;color:#9d3427}
.tabs button.hot.on{background:#9d3427;border-color:#9d3427;color:#fff;animation:none;
box-shadow:0 0 10px 1px rgba(157,52,39,.45)}
.tabs button.hot.on i{background:rgba(255,255,255,.22);color:#fff}
.tabs button.hot.on .r-new{background:#ff6b5e}
.tabs button.hot .r-new{margin-right:5px;vertical-align:1px;position:relative;top:-1px}
@media (prefers-reduced-motion:reduce){.tabs button.hot{animation:none;box-shadow:0 0 7px 1px rgba(157,52,39,.35)}}
/* 새 답안이 없을 때 — 다 봤다는 뜻의 초록 */
.subtabs button[data-k="ans"].calm{border-color:#9dbfa2;color:#2f6b3d;background:#f2f8f3}
.subtabs button[data-k="ans"].calm:hover{background:#e8f2ea;color:#2f6b3d}
.subtabs button[data-k="ans"].calm.on{background:#2f6b3d;border-color:#2f6b3d;color:#fff}
.subtabs button[data-k="ans"].calm.on i{background:rgba(255,255,255,.22);color:#fff}
.subtabs button[data-k="ans"].calm i{background:#dceadf;color:#2f6b3d}
/* 선생님 머리줄 — 새 답안이 있는 학생 수. 테두리 없이 숫자만 빛난다(0명이면 초록) */
.adm-top .stat .st-fresh{font-size:12px;color:#98a4b3}
.adm-top .stat .st-fresh b{font-size:12.5px;font-weight:700;color:#ff9d88;margin:0 1px;
text-shadow:0 0 8px rgba(255,157,136,.85);animation:stat-glow 2.2s ease-in-out infinite}
.adm-top .stat .st-fresh i{font-style:normal;margin-left:5px;color:#7f8a99}
.adm-top .stat .st-fresh.zero b{color:#7fd6a8;text-shadow:0 0 8px rgba(127,214,168,.8);animation:none}
/* 숫자를 누르면 첫 학생의 아직 피드백하지 않은 답변으로 간다 */
.adm-top .stat .st-fresh b[data-gofresh]{cursor:pointer;border-bottom:1px solid rgba(255,157,136,.6)}
.adm-top .stat .st-fresh b[data-gofresh]:hover{color:#fff;border-bottom-color:#fff}
/* 그 답변으로 내려갔을 때 잠깐 표시 */
.ansq.qflash{animation:qflash 2.2s ease-out 1}
@keyframes qflash{0%{box-shadow:0 0 0 3px rgba(209,52,42,.45)}70%{box-shadow:0 0 0 3px rgba(209,52,42,.2)}100%{box-shadow:0 0 0 3px rgba(209,52,42,0)}}
@media (prefers-reduced-motion:reduce){.ansq.qflash{animation:none;box-shadow:0 0 0 2px rgba(209,52,42,.35)}}
@keyframes stat-glow{0%,100%{text-shadow:0 0 3px rgba(255,157,136,.35)}50%{text-shadow:0 0 11px rgba(255,157,136,.95)}}
@media (prefers-reduced-motion:reduce){.adm-top .stat .st-fresh b{animation:none}}
/* ═══ 학생 문항 추가 · 다른 답안 · 선생님 중요 표시 · 진행률 고리 (2026-09-11) ═══ */
/* 별 도장 — 번호와 질문 첫머리 위에 손으로 그린 붉은 별을 겹쳐 찍는다. 클릭은 그대로 통과한다 */
.q-starimg{position:absolute;width:56px;height:auto;left:-14px;top:-18px;transform:rotate(-8deg);opacity:.88;mix-blend-mode:multiply;
pointer-events:none;z-index:2;filter:drop-shadow(0 0 3px rgba(200,50,31,.22))}
.qol.big>li,.qol.sub>li{position:relative}
.qol.big>li .q-starimg{left:-36px;top:-16px;width:54px}
.qol.q-sort>li.q-card .q-starimg{left:-10px;top:-12px;width:56px}
.ansq .q-starimg{left:-8px;top:0}
.ansq.fq .q-starimg{left:-4px;top:-8px;width:46px}
@media(max-width:640px){.q-starimg{width:44px}.qol.big>li .q-starimg{left:-27px;top:-12px;width:42px}.qol.q-sort>li.q-card .q-starimg{width:46px}}
@media print{.q-starimg{opacity:.9}}
.note-star{font-style:normal;color:#c8321f;font-weight:700}
/* 선생님 단추 — 누르면 붉게 빛나는 별 */
.q-starbtn{font:inherit;font-size:12px;line-height:1.3;padding:3px 10px 3px 8px;border:1px solid var(--line2);border-radius:999px;background:#fff;color:var(--sub);
cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:background .12s,border-color .12s,color .12s,box-shadow .2s}
.q-starbtn b{font-size:14px;line-height:1;color:var(--faint);font-weight:400}
.q-starbtn:hover,.q-starbtn:hover b{border-color:#c8321f;color:#c8321f}
.q-starbtn[aria-pressed=true]{background:#c8321f;border-color:#c8321f;color:#fff;animation:star-glow 2.4s ease-in-out infinite}
.q-starbtn[aria-pressed=true] b{color:#fff;text-shadow:0 0 6px rgba(255,255,255,.9)}
@keyframes star-glow{0%,100%{box-shadow:0 0 3px 0 rgba(200,50,31,.3)}50%{box-shadow:0 0 11px 2px rgba(200,50,31,.6)}}
@media (prefers-reduced-motion:reduce){.q-starbtn[aria-pressed=true]{animation:none;box-shadow:0 0 8px 1px rgba(200,50,31,.45)}}
.ansq-hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0 0 28px}
.ansq-hd .ansq-own{margin-left:0}
.qe-tools .q-starbtn{margin-right:4px}
.qe-tools.sq-tools{border-top:0;padding-top:0;margin-top:6px}
.sq-tools .ansq-own{margin:0}
/* 학생의 내 질문 추가 — 목록 아래, 선생님 「문항 추가」와 같은 틀이되 검은 선 */
.q-add.q-add-top.sq-add{border-top-color:var(--ink)}
.q-add.q-add-top.sq-add .q-add-h{color:var(--ink)}
.q-add.q-add-top.sq-add textarea{border-color:var(--line2)}
.q-add.q-add-top.sq-add textarea::placeholder{color:var(--faint)}
.q-add.q-add-top.sq-add textarea:focus{border-color:var(--ink);outline:none}
/* 질문 문장 맨 앞의 [중요 문항] — 붉은 글자만, 같은 줄에 이어서 */
.q-imp{font-style:normal;font-weight:800;color:#c8321f;letter-spacing:-.01em;white-space:nowrap}
.q-tail{font-style:normal;font-weight:800;color:#c8321f;letter-spacing:-.01em;white-space:nowrap}
.ansq-q .ansq-qt{font-style:normal;font-weight:inherit;min-width:0;flex:1 1 auto}
/* 다른 답안 — 탭 줄(판 탭과 같은 네모 단추), 제출 여부는 점으로 */
.avars{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:12px 0 2px 28px;font-size:12.5px}
.avr-l{font-size:11.5px;color:var(--faint);letter-spacing:.04em;margin-right:2px}
.avr-t{font:inherit;font-size:12.5px;font-weight:600;line-height:1.3;padding:5px 12px;border:1px solid var(--line2);border-radius:3px;background:#fff;color:var(--sub);
cursor:pointer;display:inline-flex;align-items:center;gap:7px;max-width:260px}
.avr-t:hover{border-color:var(--ink);color:var(--ink)}
.avr-t.on{background:var(--ink);border-color:var(--ink);color:#fff}
.avr-dot{width:7px;height:7px;border-radius:50%;background:var(--line2);flex:none}
.avr-dot.done{background:#2f7a5c}
.avr-t.on .avr-dot{background:rgba(255,255,255,.35)}
.avr-t.on .avr-dot.done{background:#7fd4a4}
.avr-dot.new,.avr-t.on .avr-dot.new{background:#d1342a;box-shadow:0 0 6px 1px rgba(209,52,42,.7)}
.avr-add{font:inherit;font-size:12.5px;line-height:1.3;padding:5px 11px;border:1px dashed var(--line2);border-radius:3px;background:transparent;color:var(--sub);cursor:pointer}
.avr-add:hover{border-color:var(--ink);border-style:solid;color:var(--ink)}
.avr-add-inline{margin-left:auto}
.avr-form{margin:10px 0 0 28px;padding:12px 14px 13px;background:var(--wash);border-top:1px solid var(--line)}
.avr-h{margin:0 0 9px;font-size:13.5px;font-weight:700}
.avr-h i{font-style:normal;font-weight:400;color:var(--faint);font-size:12px;margin-left:6px}
.avr-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:9px}
.avr-chip{font:inherit;font-size:12.5px;padding:4px 10px;border:1px solid var(--line2);border-radius:3px;background:#fff;color:var(--ink);cursor:pointer}
.avr-chip:hover,.avr-chip.on{border-color:var(--ink);background:var(--ink);color:#fff}
.avr-form input{font:inherit;font-size:13.5px;border:1px solid var(--line2);background:#fff;padding:7px 10px;width:100%;max-width:380px;box-sizing:border-box}
.avr-form input:focus{border-color:var(--ink);outline:none}
.avr-form .ansq-t .btn{margin-left:0}
.ansq-body[hidden]{display:none}
.vr-l{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 0 28px;font-size:12.5px;color:var(--sub)}
.vr-l b{color:var(--ink)}
.vr-l i{font-style:normal;color:var(--faint)}
.vr-l .q-e{margin-left:auto}
.vr-l .q-e+.q-e{margin-left:0}
.q-vars{font-style:normal;color:var(--sub)}
@media(max-width:860px){.avars,.avr-form,.vr-l,.ansq-hd{margin-left:0}}
@media print{.avars,.avr-form,.avr-add,.ansq-hd,.q-starbtn,.sq-add,.sq-tools{display:none}.ansq-body[hidden]{display:block}}
/* 진행률 고리 — 이름 옆. 제출한 몫은 초록 호, 쓰는 중인 몫은 연한 호로 이어진다 */
.ring{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto}
.ring svg{display:block}
.ring circle{fill:none;stroke-width:3.5}
.ring .ring-bg{stroke:rgba(255,255,255,.14)}
.ring .ring-draft{stroke:#98a4b3;stroke-opacity:.55;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dasharray .6s ease}
.ring .ring-sub{stroke:#5cc48a;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dasharray .6s ease}
.ring text{fill:#fff;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;font-family:inherit}
.ring.full .ring-sub{filter:drop-shadow(0 0 4px rgba(92,196,138,.9))}
.ring.full text{fill:#9fe6bd}
.ring.none .ring-bg{stroke-dasharray:2 3}
.ring-t{display:flex;flex-direction:column;line-height:1.25;font-size:11.5px;color:#98a4b3;white-space:nowrap}
.ring-t b{color:#fff;font-size:12.5px}
.ring-t i{font-style:normal}
.top .me .ring{margin-left:4px}
@media(max-width:640px){.top .me .ring{gap:6px}.top .me .ring svg{width:34px;height:34px}.ring-t{font-size:11px}.ring-t b{font-size:12px}}
@media(max-width:480px){.top .me .ring-t{display:none}} /* 좁은 휴대폰에서는 고리만 — 숫자는 고리 안 %와 길게 누르면 뜨는 설명으로 */
/* 선생님이 보는 학생 머리(흰 바탕) */
.stu-top .ring{margin-left:6px}
.stu-top .ring .ring-bg{stroke:var(--line)}
.stu-top .ring .ring-draft{stroke:#c9ced6;stroke-opacity:1}
.stu-top .ring .ring-sub{stroke:#2f7a5c}
.stu-top .ring text{fill:var(--ink)}
.stu-top .ring.full text{fill:#2f7a5c}
.stu-top .ring-t{color:var(--sub)}
.stu-top .ring-t b{color:var(--ink)}
@media print{.ring{display:none}}
/* ═══ 담당 현황 탭 (2026-09-11) — 내 팀 학생의 임박 면접·준비 상태·답변 상태 + 팀 공유 메모 ═══ */
.tb-sec-h{align-items:center;gap:14px}
.tb-sec-h .tb-tt{margin-left:4px}
.tb-sec-h select[data-teamsel]{font:inherit;font-size:13px;padding:5px 8px;border:1px solid var(--line2);background:#fff;margin-left:auto}
.tb-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 4px}
.tb-tt{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;color:var(--sub)}
.tb-tt .av-t{margin-right:2px}
.tb-head select{font:inherit;font-size:13px;padding:5px 8px;border:1px solid var(--line2);background:#fff;margin-left:auto}
/* 숫자 타일 — 얇은 선으로만 나누고, 누르면 아래 표의 조건이 된다 */
.tb-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--ink);border-bottom:1px solid var(--line);margin:12px 0 20px}
.tb-tile{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px 11px;background:none;border:0;border-right:1px solid var(--line);
font:inherit;text-align:left;cursor:pointer;color:var(--ink);min-width:0;transition:background .12s}
.tb-tile:last-child{border-right:0}
.tb-tile b{font-size:22px;line-height:1.1;font-variant-numeric:tabular-nums}
.tb-tile b.hot{color:#d1342a}
.tb-tile span{font-size:12.5px;color:var(--sub);white-space:nowrap}
.tb-tile i{font-style:normal;font-size:11.5px;color:var(--faint);min-height:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tb-tile:hover{background:var(--wash)}
.tb-tile.on{background:var(--ink);color:#fff}
.tb-tile.on span,.tb-tile.on i{color:#c9d1db}
.tb-tile.on b.hot{color:#ff8a7a}
.tb-tile.static{cursor:default}
.tb-tile.static:hover{background:none}
/* 8주 레인 */
.tb-lanes{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));border-top:1px solid var(--ink);margin:6px 0 4px}
.tb-lane{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px 7px 10px;min-height:96px;min-width:0}
.tb-lane:last-child{border-right:0}
.tb-lane.now{background:var(--wash)}
.tb-lane-h{font-size:12px;font-weight:700;color:var(--ink);margin-bottom:7px;display:flex;flex-direction:column;gap:1px}
.tb-lane-h i{font-style:normal;font-weight:400;font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.tb-ev{display:block;width:100%;text-align:left;font:inherit;font-size:12px;line-height:1.35;padding:4px 6px 5px;margin:0 0 4px;border:1px solid var(--line);background:#fff;
cursor:pointer;color:var(--ink);border-radius:2px;min-width:0;transition:border-color .12s}
.tb-ev:hover{border-color:var(--ink)}
.tb-ev b{display:block;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;color:rgb(var(--u,95,102,114))}
.tb-ev i{display:block;font-style:normal;font-size:11px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-none{font-size:12px;color:var(--line2)}
.tb-later{font-size:12.5px;color:var(--sub);margin:8px 0 0;line-height:1.8}
.tb-later .go-stu{font:inherit;font-size:12.5px;color:var(--ink);background:none;border:0;padding:0;border-bottom:1px solid var(--line2);cursor:pointer}
.tb-later .go-stu:hover{border-bottom-color:var(--ink)}
/* 표 */
.tb-sort{display:flex;gap:2px;align-items:center;margin:0 0 6px;font-size:12px;color:var(--faint)}
.tb-sort span{margin-right:6px}
.tb-sort button{font:inherit;font-size:12.5px;padding:4px 9px;border:0;border-bottom:2px solid transparent;background:none;color:var(--sub);cursor:pointer}
.tb-sort button.on{color:var(--ink);border-bottom-color:var(--ink);font-weight:700}
.tb-table{width:100%;border-collapse:collapse;font-size:13px}
.tb-table th{text-align:left;font-size:11.5px;font-weight:600;color:var(--faint);padding:6px 8px;border-top:1px solid var(--ink);border-bottom:1px solid var(--line);letter-spacing:.02em;white-space:nowrap}
.tb-table td{padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5}
.tb-table tr.urgent .tb-name{color:#b4271a}
.tb-name{font:inherit;font-size:13.5px;font-weight:700;color:var(--ink);background:none;border:0;padding:0;cursor:pointer;border-bottom:1px solid transparent}
.tb-name:hover{border-bottom-color:var(--ink)}
.tb-sub{display:block;font-style:normal;font-size:11.5px;color:var(--faint);margin-top:2px}
.tb-sub b{color:var(--ink)}
.tb-flag{display:inline-block;font-style:normal;font-size:10.5px;font-weight:700;color:#b45309;margin-left:6px;vertical-align:1px}
.tb-flag.chg{color:#d1342a}
.tb-bar{height:5px;background:var(--line);position:relative;width:100%;max-width:180px;margin-top:5px}
.tb-bar i{position:absolute;left:0;top:0;bottom:0;display:block}
.tb-bar i.draft{background:#c9ced6}
.tb-bar i.sub{background:#2f7a5c;z-index:1}
.tb-table b.hot{color:#d1342a;font-variant-numeric:tabular-nums}
.tb-table .r-new{margin-right:5px}
.tb-table .dday{font-size:13px}
/* 팀 메모 */
.tb-memo .rte{min-height:150px}
.tb-memo-act{align-items:center;gap:10px}
.tb-memo-act .state{margin-right:auto;font-size:12px;color:var(--faint)}
.tb-memo-act .state.on{color:#2f7a5c}
.tb-memo-act .state.bad{color:var(--accent)}
.tb-stale{border-top:2px solid var(--accent);border-bottom:1px solid var(--line);padding:9px 0;margin:0 0 10px;font-size:13px;color:var(--ink);display:flex;gap:10px;align-items:center;flex-wrap:wrap;line-height:1.6}
.tb-stale b{color:var(--accent)}
.tb-stale .btn{margin-left:auto}
.tb-stale .btn+.btn{margin-left:0}
.tm-flash{color:#2f7a5c;font-weight:700}
@media(max-width:1100px){.tb-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}.tb-tile:nth-child(3n){border-right:0}.tb-tile:nth-child(n+4){border-top:1px solid var(--line)}}
@media(max-width:860px){
.tb-lanes{grid-template-columns:repeat(4,minmax(0,1fr))}.tb-lane:nth-child(4){border-right:0}
.tb-table th:nth-child(6),.tb-table td:nth-child(6){display:none}
.tb-head select{margin-left:0}
}
@media(max-width:640px){
.tb-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.tb-tile:nth-child(3n){border-right:1px solid var(--line)}.tb-tile:nth-child(2n){border-right:0}.tb-tile:nth-child(n+3){border-top:1px solid var(--line)}
.tb-lanes{grid-template-columns:repeat(2,minmax(0,1fr))}.tb-lane:nth-child(4){border-right:1px solid var(--line)}.tb-lane:nth-child(2n){border-right:0}
.tb-table th:nth-child(3),.tb-table td:nth-child(3){display:none}.tb-table{font-size:12.5px}.tb-table td{padding:8px 6px}
}
@media print{.tb-tile,.tb-sort,.tb-memo-act,.tb-stale{display:none}}
/* ═══ 담당 현황 v2 — 왼쪽 면접 일정(날짜순) · 오른쪽 주간 계획표 ═══ */
.tb-tiles.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.tb-tiles.four .tb-tile:nth-child(3n){border-right:1px solid var(--line)}
.tb-tiles.four .tb-tile:nth-child(n+4){border-top:0}
.tb-tiles.four .tb-tile:last-child{border-right:0}
.tb-cols{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:28px;align-items:start;margin-top:6px}
.tb-col{min-width:0}
.tb-col-h{display:flex;align-items:baseline;gap:8px;border-bottom:2px solid var(--ink);padding-bottom:6px;margin:0 0 8px}
.tb-col-h h3{font-size:15px;margin:0}
.tb-col-h .note{font-size:11.5px;color:var(--faint);margin-left:auto;text-align:right}
/* 왼쪽 — 날짜 묶음 */
.tb-day{padding:8px 0 5px;border-bottom:1px solid var(--line)}
.tb-day-h{display:flex;align-items:baseline;gap:8px;margin:0 0 3px}
.tb-day-h b{font-size:13.5px}
.tb-day-h i{font-style:normal;font-size:12px;font-weight:700;color:var(--sub);font-variant-numeric:tabular-nums}
.tb-day.hot .tb-day-h i{color:#d1342a}
.tb-day-h span{font-size:11.5px;color:var(--faint);margin-left:auto}
.tb-row{display:grid;grid-template-columns:minmax(70px,auto) minmax(0,1fr) auto;gap:10px;align-items:center;width:calc(100% + 12px);text-align:left;font:inherit;
background:none;border:0;padding:5px 6px;margin:0 -6px;cursor:pointer;color:var(--ink);border-radius:3px}
.tb-row:hover{background:var(--wash)}
.tb-who b{display:block;font-size:13.5px;font-weight:700;line-height:1.3}
.tb-who i{display:block;font-style:normal;font-size:11px;color:var(--faint);line-height:1.3}
.tb-where{font-size:12.5px;color:var(--sub);min-width:0;line-height:1.35}
.tb-where b{color:var(--ink);font-weight:600}
.tb-where i{display:block;font-style:normal;font-size:11px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 누르면 펼침 — 잘린 전형·고사·기간 글을 줄바꿈해 다 보인다 */
.tb-row.open{align-items:flex-start}
.tb-row.open .tb-where{white-space:normal}
.tb-row.open .tb-where i{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.45;margin-top:2px}
.tb-prep{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--sub);white-space:nowrap;font-variant-numeric:tabular-nums}
.tb-prep .tb-bar{width:54px;margin:0;flex:none;display:inline-block;height:5px}
.tb-prep b{color:var(--ink)}
.tb-new{font-style:normal;font-weight:800;color:#d1342a;font-size:10.5px;letter-spacing:.03em}
.tb-stamp{font-style:normal;color:#2f7a5c;font-size:11px}
.tb-prep .tb-flag{margin-left:0}
/* 오른쪽 — 주간 계획 */
.tb-wk{padding:9px 0 9px;border-bottom:1px solid var(--line)}
.tb-wk.now{background:var(--wash);margin:0 -8px;padding-left:8px;padding-right:8px}
.tb-wk-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.tb-wk-h b{font-size:13px}
.tb-wk-h i{font-style:normal;font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.tb-wk-n{font-size:11.5px;color:var(--sub);margin-left:auto}
.tb-wk-ev{display:flex;flex-wrap:wrap;gap:4px;flex:1 1 100%}
.tb-wk-ev:empty{display:none}
.tb-chip{font:inherit;font-size:11.5px;line-height:1.3;padding:2px 7px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;border-radius:2px}
.tb-chip:hover{border-color:var(--ink)}
.tb-chip b{color:rgb(var(--u,95,102,114));font-variant-numeric:tabular-nums;font-weight:700}
.tb-wk.empty .tb-wk-h b,.tb-wk.empty .tb-wk-h i{color:var(--faint)}
.tb-plan{width:100%;box-sizing:border-box;font:inherit;font-size:13px;line-height:1.6;padding:7px 9px;border:1px solid var(--line2);background:#fff;resize:none;min-height:36px;overflow:hidden;display:block}
.tb-plan:focus{border-color:var(--ink);outline:none}
.tb-wk.empty .tb-plan{border-style:dashed}
.tb-wk.empty .tb-plan:focus{border-style:solid}
.tb-wk-m{font-size:11px;color:var(--faint);margin-top:3px;min-height:14px}
.tp-note{font-size:12px;color:var(--sub);line-height:1.7;margin:0 0 10px;padding-left:18px}
.tp-note li{margin:0}
.tb-wk-m .tm-flash{color:#2f7a5c;font-weight:700}
.tb-wk-m .bad{color:var(--accent);font-weight:700}
.tb-stale.sm{font-size:12px;padding:6px 0;margin:4px 0 0;gap:8px}
.tb-stale.sm .btn{margin-left:auto}
.tb-always{margin-top:16px;border-top:2px solid var(--ink)}
.tb-more{margin-top:26px;border-top:1px solid var(--ink);padding-top:8px}
.tb-more summary{cursor:pointer;font-size:13.5px;font-weight:700;color:var(--ink);padding:4px 0}
.tb-more summary b{color:var(--accent)}
.tb-more summary::marker{color:var(--faint)}
.tb-more .tb-sort{margin-top:10px}
@media(max-width:1100px){.tb-tiles.four{grid-template-columns:repeat(4,minmax(0,1fr))}.tb-tiles.four .tb-tile:nth-child(n+4){border-top:0}}
@media(max-width:900px){.tb-cols{grid-template-columns:1fr;gap:22px}}
@media(max-width:640px){
.tb-tiles.four{grid-template-columns:repeat(2,minmax(0,1fr))}.tb-tiles.four .tb-tile:nth-child(2n){border-right:0}.tb-tiles.four .tb-tile:nth-child(n+3){border-top:1px solid var(--line)}
.tb-row{grid-template-columns:minmax(64px,auto) minmax(0,1fr)}.tb-prep{grid-column:1/-1;padding-left:0}
}
/* ═══ 팀별 현황 v3 — 면접 일정은 좁게, 팀별 주간 계획표는 넓게 · 주마다 「주간 전체」 한 줄 + 월~금 ═══ */
.tb-cols{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:24px}
.tb-row{grid-template-columns:minmax(64px,auto) minmax(0,1fr) auto;gap:8px}
.tb-prep .tb-bar{width:44px}
/* 한 주 상자 */
.tp-wk{border:1px solid var(--line);background:#fff;margin:0 0 12px}
.tp-wk-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:9px 12px;border-bottom:1px solid var(--line);background:var(--wash);list-style:none}
.tp-wk-h::-webkit-details-marker{display:none}
.tp-wk-h b{font-size:14px}
.tp-wk-h i{font-style:normal;font-size:12px;color:var(--sub);font-variant-numeric:tabular-nums}
.tp-n{font-size:11.5px;font-weight:700;color:#b4271a}
.tp-fill{font-size:11.5px;color:var(--faint);margin-left:auto}
/* 넓게 펼친 두 주 — 가까운 주는 따뜻한 빛, 그다음 주는 푸른 빛 */
.tp-wk.live.first{border-color:#e6bfb7;box-shadow:0 0 0 1px rgba(209,52,42,.06),0 2px 10px rgba(209,52,42,.07)}
.tp-wk.live.first>.tp-wk-h{background:#fbefec;border-bottom-color:#efd3cd}
.tp-wk.live.first>.tp-wk-h b{color:#b4271a}
.tp-wk.live:not(.first){border-color:#c3d5ec}
.tp-wk.live:not(.first)>.tp-wk-h{background:#edf3fb;border-bottom-color:#d3e0f1}
.tp-wk.live:not(.first)>.tp-wk-h b{color:#1f4e8c}
/* 접어 둔 주 */
.tp-wk.fold>.tp-wk-h{cursor:pointer;border-bottom-color:transparent}
.tp-wk.fold[open]>.tp-wk-h{border-bottom-color:var(--line)}
.tp-wk.fold>.tp-wk-h:hover{background:#eef0f2}
.tp-tog{width:8px;height:8px;border-right:1.5px solid var(--sub);border-bottom:1.5px solid var(--sub);transform:rotate(-45deg);margin-left:6px;align-self:center;transition:transform .15s}
.tp-wk.fold[open] .tp-tog{transform:rotate(45deg)}
.tp-wk.fold.gone{opacity:.6}
/* 한 줄 — 왼쪽 요일 칸, 오른쪽 입력 */
.tp-day{display:grid;grid-template-columns:62px minmax(0,1fr);border-top:1px solid var(--line)}
.tp-days>.tp-day:first-child{border-top:0}
.tp-dl{--dc:#5f6672;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:1px;padding:9px 4px 8px;
background:color-mix(in srgb,var(--dc) 7%,#fff);border-right:1px solid color-mix(in srgb,var(--dc) 18%,#fff)}
.tp-dl b{font-size:14px;font-weight:800;color:var(--dc);line-height:1.2}
.tp-dl i{font-style:normal;font-size:11px;color:var(--sub);font-variant-numeric:tabular-nums}
.tp-dl em{font-style:normal;font-size:10px;font-weight:800;color:#fff;background:#d1342a;padding:1px 5px;border-radius:8px;margin-top:2px}
.tp-d0 .tp-dl{--dc:#9c7c17}.tp-d1 .tp-dl{--dc:#b4561d}.tp-d2 .tp-dl{--dc:#2f7a5c}.tp-d3 .tp-dl{--dc:#7a4fb0}.tp-d4 .tp-dl{--dc:#b43a5a}
.tp-all .tp-dl{--dc:#5f6672;background:#e9ecf0;border-right-color:#d5dae1}
.tp-all .tp-dl b{color:var(--ink);font-size:13px}
.tp-all .tp-dl i{color:var(--sub)}
.tp-all{background:#fcfcfd}
/* 선생님 메모 칸 — 학생에게 안 가는 칸이라 옅은 파랑으로 구분 */
.tp-tm{background:#eef4fb}
.tp-tm .tp-dl{--dc:#2f6fb0;background:#dfeafa;border-right:1px solid #c9d9f0}
.tp-tm .tp-dl b{color:#2f6fb0;font-size:12px}
.tp-tm .tp-dl i{color:#5b83b8}
.tp-tm .tb-plan{background:transparent}
.tp-tm .tb-plan.tp-in{min-height:44px}
.tp-tm .tb-plan.tp-in.big{min-height:66px}
.tp-wkend .tp-dl{--dc:#98a0ad}
/* 요일 칸 맨 위 한 줄 — 그날의 공휴일(붉게)·학사 일정(초록) */
.tp-cal{display:flex;flex-wrap:wrap;gap:2px 12px;font-size:11.5px;line-height:1.5;margin:3px 7px 1px}
.tp-cal i{font-style:normal}
.tp-cal .hol{color:#b45c4e;font-weight:700}
.tp-cal .sch{color:#2f7c62}
.tp-day.hol .tp-dl b{color:#b45c4e}
.tp-dc{padding:6px 10px 6px 10px;min-width:0}
.tp-day.today{background:#fff6f4;box-shadow:inset 0 0 0 1.5px rgba(209,52,42,.55),inset 0 0 14px rgba(209,52,42,.12)}
.tp-day.past .tp-dl{opacity:.55}
.tp-day.past .tp-in{color:var(--sub)}
/* 입력 — 칸 안에서는 테두리 없이, 올려 두면 점선, 쓰는 중이면 실선. 길어지면 저절로 늘어난다 */
.tb-plan.tp-in{border:1px dashed transparent;background:transparent;min-height:30px;padding:5px 7px;font-size:13px;line-height:1.65;border-radius:2px}
.tb-plan.tp-in:hover{border-color:var(--line2)}
.tb-plan.tp-in:focus{border:1px solid var(--ink);background:#fff;outline:none}
.tb-plan.tp-in.big{min-height:50px}
.tp-all .tb-plan.tp-in.big{min-height:44px}
.tp-in::placeholder{color:#b3bac5}
.tp-dc .tb-wk-m{margin:1px 0 0 7px;min-height:0}
.tp-dc .tb-wk-m:empty{display:none}
/* 그날 면접 */
.tp-evs{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin:1px 0 3px}
.tp-ev{font:inherit;font-size:11.5px;line-height:1.3;padding:2px 7px 2px 3px;border:1px solid color-mix(in srgb,rgb(var(--u,95,102,114)) 35%,#fff);background:#fff;color:var(--ink);cursor:pointer;border-radius:3px;display:inline-flex;align-items:center;gap:5px}
.tp-ev b{font-size:10px;font-weight:800;color:#fff;background:rgb(var(--u,95,102,114));padding:1px 4px;border-radius:2px}
.tp-ev:hover{border-color:rgb(var(--u,95,102,114))}
.tp-when{font-size:11px;color:var(--sub);font-variant-numeric:tabular-nums;margin-left:2px}
@media(max-width:900px){.tb-cols{grid-template-columns:1fr}}
@media(max-width:640px){.tp-day{grid-template-columns:48px minmax(0,1fr)}.tp-dc{padding:5px 6px}}
@media print{.tp-wk.fold:not([open]) .tp-days{display:none}}
/* ═══ 팀별 현황 v4 — 일정 줄 정렬·학생 사진 · 주간 계획 서식 칸 ═══ */
.tb-row{grid-template-columns:26px minmax(66px,78px) minmax(0,1fr) 152px;gap:9px;align-items:center}
.tb-row .av{flex:0 0 auto}
.tb-who b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-who i{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-prep{display:grid;grid-template-columns:56px 44px 42px;gap:6px;align-items:center;justify-items:end}
.tb-flags{display:flex;align-items:center;gap:4px;justify-content:flex-end;overflow:hidden;white-space:nowrap;font-style:normal}
.tb-flags i{font-style:normal;font-size:10px;line-height:1.4}
.tb-flags .tb-new{font-weight:800;color:#d1342a}
.tb-flags .tb-stamp{color:#2f7a5c}
.tb-flags .tb-flag{color:#b45309;margin:0}
.tb-num{font-variant-numeric:tabular-nums;white-space:nowrap}
.tb-prep .tb-bar{width:44px;margin:0}
@media(max-width:640px){
.tb-row{grid-template-columns:24px minmax(60px,72px) minmax(0,1fr)}
.tb-prep{grid-column:1/-1;justify-content:end;justify-items:end}
}
/* 주간 계획 — 서식 쓰는 칸(contenteditable) */
.tb-plan.tp-in{display:block;white-space:pre-wrap;word-break:break-word;cursor:text}
.tb-plan.tp-in.empty::before{content:attr(data-ph);color:#b3bac5;pointer-events:none}
.tb-plan.tp-in b{font-weight:700}
.tb-plan.tp-in u{text-underline-offset:2px}
/* 초점이 갈 때만 나타나는 서식 줄 — 한 줄, 22px */
.tp-bar{display:flex;align-items:center;gap:2px;margin:2px 0 3px;padding:2px 4px;background:var(--wash);border:1px solid var(--line);border-radius:3px;width:max-content}
.tp-bar button{font:inherit;font-size:12px;line-height:1;padding:3px 6px;border:0;background:none;color:var(--sub);cursor:pointer;border-radius:2px}
.tp-bar button:hover{background:#e6e9ed;color:var(--ink)}
.tp-bar .sw{width:14px;height:14px;padding:0;background:var(--c);border:1px solid rgba(0,0,0,.15);border-radius:2px}
.tp-bar .sw:hover{outline:1px solid var(--ink);outline-offset:1px}
.tp-bar .sep{width:1px;height:12px;background:var(--line2);margin:0 3px}
@media print{.tp-bar{display:none}}
/* ═══ 다른 버전 답안 — 학교 목록을 미리 보여 주지 않고, 한 줄로 이름을 적어 만든다 ═══ */
.avars.one{margin-top:8px}
.avars.one:has(.avr-form[hidden]){display:none}
.avr-t{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avr-form{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.avr-form input{font:inherit;font-size:12.5px;border:1px solid var(--line2);background:#fff;padding:4px 8px;width:min(320px,60vw);box-sizing:border-box}
.avr-form input:focus{border-color:var(--ink);outline:none}
.avr-form .btn{margin-left:0}
.avr-form .state{font-size:11.5px}
@media(max-width:640px){.avr-form input{width:100%}.avr-t{max-width:120px}}
/* ═══ 학생 목록 접기 손잡이 — 눈에 띄게(2026-09-12) ═══ */
.rs-handle:before{width:2px;background:var(--line2);margin-left:-1px}
.rs-handle:hover:before{background:var(--accent)}
.rs-handle button{width:22px;height:60px;border:1.5px solid var(--line2);border-radius:11px;background:#fff;color:var(--sub);
box-shadow:0 1px 3px rgba(20,24,29,.12)}
.rs-handle button:before{content:"";position:absolute;inset:-10px -14px} /* 손이 잘 닿도록 누를 수 있는 자리를 넓힌다 */
.rs-handle button i{width:7px;height:7px;border-left-width:2px;border-bottom-width:2px}
.rs-handle button:hover{border-color:var(--accent);color:var(--accent);background:#fdf6f4;
box-shadow:0 0 0 4px rgba(157,52,39,.12),0 1px 4px rgba(157,52,39,.25)}
.rs-handle button:active{background:#f8ebe8}
.rs-handle button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* 접어 둔 동안에는 손잡이가 늘 보이게 — 다시 펴는 곳을 못 찾는 일이 없도록 */
.grid.rs-off .rs-handle:before{background:var(--accent);opacity:.45}
.grid.rs-off .rs-handle button{border-color:var(--accent);color:var(--accent)}
/* ---- 2026-09-13 학생 화면 ---- */
/* 답안 작성 탭 — 파란 글자에 은은한 빛. 배지는 아직 제출하지 않은 문항 수 */
.tabs button[data-k="ans"]{color:#2468b8;text-shadow:0 0 9px rgba(36,104,184,.38)}
.tabs button[data-k="ans"]:hover{color:#1b56a0;text-shadow:0 0 11px rgba(36,104,184,.5)}
.tabs button[data-k="ans"].on{color:#1b56a0;border-bottom-color:#2468b8;background:#eef4fb}
.tabs button[data-k="ans"] i{background:#2468b8;color:#fff;box-shadow:0 0 8px rgba(36,104,184,.6)}
.tabs button[data-k="ans"].on i{background:#1b56a0;box-shadow:0 0 10px rgba(27,86,160,.7)}
/* 지원 대학 조정 마감 표시 */
.pk-fold summary .pk-dl{font-style:normal;font-weight:600;font-size:12.5px;color:var(--sub);margin-left:10px;white-space:nowrap}
.pk-fold summary .pk-dl .dday{font-size:12.5px}
.pk-dl-note{font-size:12.5px;font-weight:600;color:#9d3427;margin:-4px 0 12px}
.pk-closed{margin:0 0 16px;padding:10px 2px;border-top:2px solid var(--ink);font-size:13.5px;color:var(--sub)}
/* 머리띠 「받은 피드백」 — 답안 고리와 같은 고리를 단추로 감싼다. 받은 전체는 붉은 호, 처리한 몫은 초록 호, 남은 것이 있으면 아래 줄이 붉은 글씨 */
.top .me .fbk{display:inline-flex;align-items:center;margin-left:4px;padding:0;background:none;border:0;border-radius:0;color:inherit;cursor:pointer;text-align:left;font:inherit;line-height:1.25}
.top .me .fbk:hover{border-color:transparent}
.top .me .fbk:hover .ring-t b{text-decoration:underline}
.ring.fbring .ring-left{stroke:#e0574a;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;filter:drop-shadow(0 0 3px rgba(224,87,74,.7));transition:stroke-dasharray .6s ease}
.ring.fbring.fb-left text{fill:#ff8a7a}
.ring.fbring.fb-left .ring-t i{color:#ff8a7a;font-weight:700}
.ring.fbring.full text,.ring.fbring.full .ring-t i{fill:#9fe6bd;color:#9fe6bd}
/* 선생님 공지 — 제목 줄 밑선(sec-h)과 첫 글의 윗선이 겹쳐 두 줄로 보이던 것. 첫 글의 윗선을 뺀다 */
.sec-h ~ .post:first-of-type,.post-main .post:first-of-type{border-top:0}
@media(max-width:480px){.top .me .fbk .ring-t{display:none}}
/* 탭 글씨와 옆 숫자 배지를 세로 가운데로 — 배지가 글자 밑으로 처지지 않게 단추를 flex 로 */
.tabs button{display:inline-flex;align-items:center;gap:6px}
.tabs button i{margin-left:0;line-height:1.45;padding:1px 6px}
.tabs button .r-new{margin-right:0}
.tabs button:disabled{opacity:.55;cursor:default}
/* 흰 바탕 가운데 「불러오는 중」 — 학생·교사 공용. 고양이, 작은 이름표, 굵은 한 줄, 천천히 바뀌는 한 줄, 얇은 진행선 */
.wait-screen{display:none;position:fixed;inset:0;z-index:50;background:#fff;flex-direction:column;align-items:center;justify-content:center;
gap:8px;color:#1b1f24;text-align:center;padding:24px;transition:opacity .4s ease}
.wait-screen.show{display:flex}
.wait-screen.out{opacity:0;pointer-events:none}
.wait-screen img{width:68px;height:68px;margin-bottom:10px;animation:ho-bob 1.7s ease-in-out infinite}
.wait-screen .ho-k{font-size:11.5px;letter-spacing:.16em;color:#8a94a3}
.wait-screen .ho-t{font-size:17px;font-weight:700;letter-spacing:-.01em;margin-top:2px}
.wait-screen .ho-s{font-size:13px;color:#5f6672;min-height:1.6em;transition:opacity .3s}
.wait-screen .ho-s.fade{opacity:0}
.wait-screen .ho-bar{width:180px;height:2px;background:#e3e6ea;position:relative;overflow:hidden;margin-top:16px}
.wait-screen .ho-bar::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:40%;background:#1b1f24;animation:ho-slide 1.25s cubic-bezier(.4,0,.2,1) infinite}
@keyframes ho-slide{to{left:100%}}
@keyframes ho-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.wait-screen img,.wait-screen .ho-bar::after{animation:none}}
/* 로그인 화면 — 목록 첫 줄이 가장 가까운 면접. 대학 이름이 흰빛으로 크게 숨 쉰다 */
.gate-left .sched tr.near td{color:#fff}
.gate-left .near-u{color:#fff;text-shadow:0 0 8px rgba(255,255,255,.7);animation:near-glow 2.4s ease-in-out infinite}
@keyframes near-glow{0%,100%{text-shadow:0 0 2px rgba(255,255,255,.3)}50%{text-shadow:0 0 14px rgba(255,255,255,1),0 0 32px rgba(255,255,255,.7)}}
@media (prefers-reduced-motion:reduce){.gate-left .near-u{animation:none;text-shadow:0 0 10px rgba(255,255,255,.8)}}
/* 왼쪽 판 맨 아래 만든 이 — 작은 고양이와 글자를 세로 가운데로 */
.gate-maker{display:flex;align-items:center;gap:8px;margin:auto 0 0;padding-top:22px;font-size:11px;line-height:1;letter-spacing:.04em;color:#5f6976}
.gate-maker img{width:22px;height:22px;border-radius:50%;opacity:.8;flex:0 0 auto;display:block}
.gate-maker span{display:block;line-height:1}
@media(max-width:760px){.gate-maker{margin-top:10px;padding-top:0;font-size:10px}.gate-maker img{width:18px;height:18px}}
/* 교사 머리줄 새로고침 — 「새 답변 학생」 뒤에 동그란 화살표 두 개 + 「새로고침」. 받는 동안 화살표가 돌고, 끝나면 그 자리 글이 「새로 불러왔습니다」로 바뀐다 */
.adm-top #reload{display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 6px;margin-left:-6px;border-radius:14px;font-size:12px;color:#98a4b3;line-height:1;transition:color .12s,background .12s}
.adm-top #reload:hover{color:#fff;background:#2b3138}
.adm-top #reload svg{width:15px;height:15px;display:block;flex:0 0 auto}
.adm-top #reload.spin{color:#fff;cursor:default}
.adm-top #reload.spin svg{animation:reload-spin .9s linear infinite}
.adm-top #reload.done{color:#7fd6a8}
.adm-top #reload.fail{color:#ff9d88}
@keyframes reload-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.adm-top #reload.spin svg{animation:none;opacity:.6}}
@media(max-width:640px){.adm-top .stat{width:auto}.adm-top #reload{order:5;margin-left:0}}
/* 팀별 주간 계획표의 오늘 줄 — 요일 칸까지 한 상자로 붉은 테두리를 두르고 은은하게 박동한다(안쪽 그림자는 요일 칸 배경에 가려 왼쪽이 비어 보였다) */
.tp-day.today{position:relative;z-index:1;background:#fff6f4;box-shadow:0 0 0 1.5px rgba(209,52,42,.85),0 0 8px 0 rgba(209,52,42,.3);animation:tp-today 2.6s ease-in-out infinite}
.tp-day.today .tp-dl{background:#fdeceb;border-right-color:#efc4bd}
@keyframes tp-today{0%,100%{box-shadow:0 0 0 1.5px rgba(209,52,42,.85),0 0 6px 0 rgba(209,52,42,.22)}50%{box-shadow:0 0 0 1.5px rgba(209,52,42,1),0 0 18px 4px rgba(209,52,42,.5)}}
@media (prefers-reduced-motion:reduce){.tp-day.today{animation:none;box-shadow:0 0 0 1.5px rgba(209,52,42,.9),0 0 10px 2px rgba(209,52,42,.4)}}
/* 문항 묶음 머리줄(2026-09-14) — 얇은 윗선과 작은 제목만. 상자·색 바 없음 */
.qol li.q-grp{display:block;list-style:none;margin:24px 0 8px -20px;padding:10px 0 0;border-top:1px solid var(--line);font-size:12.5px;color:var(--sub);line-height:1.5}
.qol li.q-grp:first-child{margin-top:0;border-top:0;padding-top:0}
.qol li.q-grp b{font-size:13.5px;font-weight:800;color:var(--ink);margin-right:8px}
.qol li.q-grp i{font-style:normal;color:var(--faint);font-size:12px}
.qol li.q-grp small{display:block;font-size:12px;color:var(--faint)}
.qol.q-sort>li.q-grp{margin-left:0;border:0;border-top:1px solid var(--line);background:none;padding:10px 0 0;box-shadow:none}
.qol.q-sort>li.q-grp:first-child{border-top:0;padding-top:0}
.qol.q-sort>li.q-grp:before{content:none}
.ans-grp{margin:34px 0 2px;padding-top:12px;border-top:2px solid var(--ink);font-size:13px;color:var(--sub)}
.ans-grp:first-of-type{margin-top:4px}
.ans-grp b{font-size:14.5px;font-weight:800;color:var(--ink);margin-right:8px}
.ans-grp i{font-style:normal;color:var(--faint);font-size:12px}
.q-gr{font-style:normal;font-size:11.5px;font-weight:700;color:#6b7684;margin-right:6px;letter-spacing:.02em;white-space:nowrap}
@media print{.q-grp,.ans-grp{page-break-after:avoid}}
/* 묶음 접기·목차·이번 면접 우선(2026-09-14) */
.q-grp,.ans-grp{cursor:pointer;user-select:none}
.qol li.q-grp b::before,.ans-grp b::before{content:"▾ ";font-size:11px;color:var(--faint)}
.qol li.q-grp.fold b::before,.ans-grp.fold b::before{content:"▸ "}
.q-toc{margin:0 0 14px;font-size:12.5px;color:var(--sub);line-height:2}
.q-toc a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line2);cursor:pointer;white-space:nowrap}
.q-toc a:hover{border-bottom-color:var(--ink)}
.q-toc a i{font-style:normal;color:var(--faint);margin-left:3px;font-size:11.5px;font-variant-numeric:tabular-nums}
.q-toc .q-tocsep{margin:0 7px;color:var(--faint)}
.q-view{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px;font-size:12.5px;color:var(--sub);line-height:1.6}
.q-view .q-vb{font-size:12px;font-weight:700;color:var(--ink);border:1px solid var(--line2);padding:4px 10px;border-radius:4px;background:#fff;white-space:nowrap}
.q-view .q-vb:hover{border-color:var(--ink)}
.q-view .q-vb.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.roster .r-sub .r-pg .r-gap{color:#9d3427;font-weight:600}
/* 문항 추가 칸의 묶음·학년·과목 고르기 — 한 줄, 글자 크기만 작게 */
.q-area{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:0 0 8px;font-size:12.5px;color:var(--sub)}
.q-area label{display:inline-flex;align-items:center;gap:6px}
.q-area select,.q-area input{font-size:12.5px;padding:4px 6px;border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--ink)}
.q-area input{width:120px}
/* 꼬리 질문(선생님이 답변을 읽고 이어 묻는 질문) — 기본 질문과 바로 구분되게 옅은 붉은 바탕(2026-09-14) */
.qol.sub{border-left:2px solid #e3a49a;padding-left:12px}
.qol.sub>li{background:#fdf1ee;padding:8px 10px 6px;margin:6px 0 0;border-radius:3px}
.qol.q-sort .qol.sub>li{background:#fdf1ee}
.ansq.fq{background:#fdf1ee;border-left:2px solid #e3a49a;padding:12px 12px 8px 14px;border-radius:3px}
.ansq.fq .ansq-q span{color:#b45c4e}
.ansq.fq textarea[data-ans],.ansq.fq .rte,.ansq.fq .cmt-new textarea{background:#fff}
/* ── 선생님 댓글 작은 편집기(2026-09-15) — 도구줄은 글을 쓰는 동안만 아래에 한 줄 ── */
.rte-wrap.rte-cmt{border:1px solid var(--line);background:#fff}
.rte-wrap.rte-cmt:focus-within{border-color:var(--ink)}
.rte-wrap.rte-cmt .rte{min-height:96px;padding:10px 12px;font-size:13.5px;line-height:1.75;color:var(--ink)}
.rte-mini{display:none;align-items:center;gap:2px;padding:4px 8px;border-top:1px solid var(--line);background:var(--wash)}
.rte-wrap.rte-cmt:focus-within .rte-mini,.rte-wrap.rte-cmt.has-text .rte-mini{display:flex}
.rte-mini button{font-size:12px;line-height:1.4;padding:2px 6px;color:var(--sub)}
.rte-mini button:hover{background:#eceef1;color:var(--ink)}
.rte-mini .sw{width:14px;height:14px;padding:0;margin:0 3px;background:var(--c);border:1px solid rgba(0,0,0,.08)}
.rte-mini i{margin-left:auto;font-style:normal;font-size:11px;color:var(--faint)}
.cmt-b.rich{white-space:normal}
.cmt-b.rich div{min-height:1.2em}
.cmt-b u{text-underline-offset:2px}
.cmt-ed .rte-wrap.rte-cmt{margin-top:4px}
@media(max-width:640px){.rte-mini button{min-width:28px;min-height:28px}.rte-mini .sw{width:18px;height:18px}.rte-mini i{display:none}}
/* 학생 탭 줄 끝의 새로고침(2026-09-16) — 선생님 화면 것과 같은 모양, 밝은 바탕용 색 */
.tabs .tab-reload{margin-left:auto;display:inline-flex;align-items:center;gap:5px;padding:12px 10px 10px 8px;font-size:12px;font-weight:600;color:var(--faint);border-bottom:2px solid transparent;transition:color .12s}
.tabs .tab-reload:hover{color:var(--ink);background:none}
.tabs .tab-reload svg{width:15px;height:15px;display:block;flex:0 0 auto}
.tabs .tab-reload.spin{color:var(--ink);cursor:default}
.tabs .tab-reload.spin svg{animation:reload-spin .9s linear infinite}
.tabs .tab-reload.done{color:#2f8f5b}
.tabs .tab-reload.fail{color:var(--accent)}
@media (prefers-reduced-motion:reduce){.tabs .tab-reload.spin svg{animation:none;opacity:.6}}
@media(max-width:640px){.tabs .tab-reload span{display:none}.tabs .tab-reload{padding:11px 8px}}
/* 학생용 제출 판 비교(2026-09-16) — 답안 칸 위: 왼쪽 고른 제출 판, 오른쪽 지금 쓰는 글(지운 말 취소선·새 말 밑줄) */
.vtabs.vt-stu{margin:12px 0 4px}
.vtabs .vt-l{font-size:11.5px;color:var(--faint);margin-right:2px}
.vside.vs-live{margin:0 0 10px}
.vside.vs-live .ansq-b{max-height:360px;overflow:auto;font-size:13.5px;line-height:1.75}
.vside.vs-live .vs-cur .ansq-b.diff{white-space:pre-wrap}
.vside.vs-live .vs-same{color:var(--faint);font-size:12.5px}
.vside.vs-live .vs-h del{color:var(--faint);text-decoration:line-through}
.vside.vs-live .vs-h ins{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:3px;color:var(--ink)}
/* 내 생기부 정리·메모(2026-09-16) — 보기 바꾸기 줄, 기록마다 ＋ 메모, 메모 줄(종류·글·상태·삭제), 답안 옆 원문 칸의 내 메모 */
.rec-sw{display:flex;gap:18px;margin:0 0 16px;border-bottom:1px solid var(--line)}
.rec-sw button{padding:8px 2px 9px;font-size:13.5px;font-weight:600;color:var(--sub);border-bottom:2px solid transparent;margin-bottom:-1px}
.rec-sw button:hover{color:var(--ink)} .rec-sw button.on{color:var(--ink);border-bottom-color:var(--accent)}
.rec-sw button i{font-style:normal;font-size:11.5px;color:var(--faint);margin-left:5px}
.srcv-toc .sn-sum{margin-left:auto}
.sn-filter{border:0;background:none;font:inherit;font-size:12px;color:var(--accent);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:0}
.sn-filter.on{color:var(--ink)}
.sn-list.sn-only .sn-item:not(.has-notes){display:none}
.sn-list.sn-only .srcv-h{display:none}
.sn-row{display:flex;align-items:center;gap:10px;margin-top:8px;min-width:0}
.sn-add{border:0;background:none;font:inherit;font-size:12px;font-weight:700;color:var(--sub);cursor:pointer;padding:2px 0;white-space:nowrap}
.sn-add:hover,.sn-add.on{color:var(--ink)}
.sn-add i{font-style:normal;font-weight:500;color:var(--accent);margin-left:6px}
.sn-add i:empty{display:none}
.sn-peek{font-size:12px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sn-item.has-notes .rq-loc:after{content:"메모";font-size:10.5px;font-weight:600;color:var(--sub);margin-left:8px}
.sn-box{margin-top:8px;border-top:1px dashed var(--line2)}
.sn-note{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;padding:9px 0 7px;border-bottom:1px solid var(--line)}
.sn-note select{font:inherit;font-size:11.5px;color:var(--sub);border:0;border-bottom:1px solid var(--line);background:none;padding:2px 0;align-self:start;cursor:pointer}
.sn-note textarea{width:100%;min-height:44px;resize:none;border:0;border-bottom:1px solid var(--line);background:none;font:inherit;font-size:13px;line-height:1.7;padding:2px 0 4px;color:var(--ink)}
.sn-note textarea:focus{outline:none;border-bottom-color:var(--ink)}
.sn-note.sn-new textarea{color:var(--ink)} .sn-note.sn-new textarea::placeholder{color:var(--faint)}
.sn-meta{grid-column:2;display:flex;align-items:center;gap:12px;font-size:11px;color:var(--faint)}
.sn-meta i{font-style:normal} .sn-meta i:empty{display:none}
.sn-meta button{border:0;background:none;font:inherit;font-size:11px;color:var(--faint);cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:2px;margin-left:auto}
.sn-meta button:hover{color:var(--accent)}
.sn-pane{margin-top:8px;padding-top:6px;border-top:1px dashed var(--line2);font-size:12.5px}
.sn-pane-h{margin:0 0 4px;display:flex;align-items:center;gap:8px;font-weight:700;color:var(--sub)}
.sn-pane-h i{font-style:normal;font-weight:500;color:var(--accent)}
.sn-pane-h button{margin-left:auto;border:0;background:none;font:inherit;font-size:11.5px;color:var(--accent);text-decoration:underline;text-underline-offset:2px;cursor:pointer;padding:0}
.sn-pane ul{list-style:none;margin:0;padding:0} .sn-pane li{padding:3px 0;border-top:1px solid var(--line);white-space:pre-wrap}
.sn-pane li b{font-weight:600;color:var(--sub);margin-right:6px;font-size:11px}
@media(max-width:640px){.sn-note{grid-template-columns:1fr}.sn-meta{grid-column:1}.sn-peek{display:none}}
/* 완료 도장과 글씨(2026-09-16) — 도장 그림은 글씨 아래에 깔고(z-index -1, 칸을 격리해 배경 위에는 남게), 도장이 있는 칸의 글씨에는 옅은 흰 테두리를 둔다.
도장의 투명도·곱하기 혼합은 그대로. 형광펜 표시는 곱하기로 섞어 도장이 비쳐 보이게. 찍은 선생님이 눌러 지우는 자리는 글씨 위 투명한 칸 */
.ansq-b.hl-body{isolation:isolate}
.ansq-b.hl-body .stamp{z-index:-1}
.stamp-hit{position:absolute;width:clamp(60px,18%,96px);aspect-ratio:1/1;transform:translate(-50%,-50%) rotate(var(--r,0deg));z-index:3;cursor:pointer;border-radius:50%}
.stamp-hit:hover + .stamp{opacity:1;filter:drop-shadow(0 0 4px rgba(157,52,39,.45))}
.ansq-b.hl-body.has-stamp,.ansq-b.hl-body:has(.stamp){text-shadow:0 0 1px #fff,0 0 2px #fff,0 0 3px #fff,0 0 5px rgba(255,255,255,.9)}
.ansq-b.hl-body.has-stamp mark.hl,.ansq-b.hl-body:has(.stamp) mark.hl{mix-blend-mode:multiply}
@media(max-width:640px){.stamp-hit{width:clamp(44px,15%,72px)}}
@media print{.ansq-b.hl-body .stamp{z-index:-1}.stamp-hit{display:none}}