: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-system,"Apple SD Gothic Neo",Pretendard,"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]{width:100%;background:var(--ink);color:#fff;padding:14px;font-size:15px;font-weight:700;margin-top:6px}
.gate-form button[type=submit]:hover{background:#000}
.gate-form button[type=submit]: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}
.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}
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}
.grid{display:grid;grid-template-columns:250px minmax(0,1fr);gap:26px;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}
.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:ui-monospace,SFMono-Regular,Menlo,monospace;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)}