:root { --main:#1d4ed8; --main-dark:#1e3a8a; --bg:#f6f8fc; --text:#1f2937; --sub:#6b7280; --line:#e5e7eb; --ok:#059669; --warn:#d97706; --bad:#dc2626; }
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",sans-serif; color:var(--text); line-height:1.7; word-break:keep-all; background:#fff; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }
.wrap { max-width:1040px; margin:0 auto; padding:0 20px; }

/* 머리말 */
header.top { position:sticky; top:0; background:#fff; border-bottom:1px solid var(--line); z-index:10; }
header.top .wrap { display:flex; align-items:center; justify-content:space-between; height:64px; gap:12px; }
.brand { display:flex; align-items:center; gap:10px; }
.brand img { width:38px; height:38px; }
.brand b { font-size:19px; font-weight:800; color:var(--main-dark); }
.brand small { font-size:13px; color:var(--sub); margin-left:2px; }
nav.top a { margin-left:20px; font-size:15px; color:var(--sub); }
nav.top a:hover { color:var(--main); }
.login-link { border:1px solid var(--line); padding:7px 14px; border-radius:8px; font-size:14px; color:var(--main-dark); font-weight:700; margin-left:20px; }
.login-link:hover { border-color:var(--main); }

/* 버튼 */
.btn { display:inline-block; background:var(--main); color:#fff; font-weight:700; padding:13px 26px; border-radius:10px; font-size:16px; border:none; }
.btn:hover { background:var(--main-dark); }
.btn.ghost { background:#fff; color:var(--main); border:2px solid var(--main); }
.btn.small { padding:7px 14px; font-size:14px; border-radius:8px; }
.btn.ok { background:var(--ok); } .btn.bad { background:#fff; color:var(--bad); border:1px solid var(--bad); }
.btn:disabled { opacity:.5; cursor:default; }

/* 첫 화면 */
.hero { background:linear-gradient(135deg,#1e3a8a 0%,#2563eb 100%); color:#fff; padding:86px 0 78px; }
.hero h1 { font-size:40px; line-height:1.35; font-weight:800; margin-bottom:18px; }
.hero p { font-size:18px; opacity:.92; margin-bottom:32px; }
.hero .btn { background:#fff; color:var(--main-dark); margin:0 10px 10px 0; }
.hero .btn.ghost { background:transparent; color:#fff; border-color:#fff; }
.badges { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px; }
.badges span { background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); padding:6px 14px; border-radius:999px; font-size:14px; }
section { padding:78px 0; }
section.gray { background:var(--bg); }
.sec-title { font-size:30px; font-weight:800; margin-bottom:10px; }
.sec-sub { color:var(--sub); margin-bottom:38px; font-size:17px; }
.grid { display:grid; gap:20px; }
.g3 { grid-template-columns:repeat(3,1fr); }
.g2 { grid-template-columns:repeat(2,1fr); }
.card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px; }
.card .num { display:inline-block; width:36px; height:36px; line-height:36px; text-align:center; border-radius:50%; background:#dbeafe; color:var(--main); font-weight:800; margin-bottom:12px; }
.card h3 { font-size:19px; margin-bottom:8px; }
.card p { color:var(--sub); font-size:15.5px; }
.report-list li { list-style:none; padding:13px 0 13px 30px; border-bottom:1px dashed var(--line); position:relative; }
.report-list li:last-child { border-bottom:none; }
.report-list li:before { content:"✓"; position:absolute; left:4px; color:var(--main); font-weight:800; }
.report-list b { display:block; }
.report-list span { color:var(--sub); font-size:15px; }
.year { font-size:20px; font-weight:800; color:var(--main-dark); margin:8px 0 14px; }
.result { display:flex; justify-content:space-between; align-items:center; gap:10px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:15px 20px; margin-bottom:10px; }
.result .school { font-weight:700; white-space:nowrap; }
.result .score { color:var(--main); font-weight:800; text-align:right; }
.cta { background:var(--main-dark); color:#fff; text-align:center; }
.cta h2 { font-size:30px; margin-bottom:12px; }
.cta p { opacity:.9; margin-bottom:28px; font-size:17px; }
.cta .btn { background:#fff; color:var(--main-dark); font-size:20px; padding:15px 34px; }
.info dt { font-weight:700; margin-top:14px; }
.info dt:first-child { margin-top:0; }
.info dd { color:var(--sub); }
footer.foot { padding:28px 0; font-size:14px; color:var(--sub); text-align:center; border-top:1px solid var(--line); }
.call-fab { display:none; }

/* 로그인·가입 */
.auth-wrap { min-height:calc(100vh - 64px); background:var(--bg); display:flex; align-items:center; justify-content:center; padding:40px 16px; }
.auth-box { background:#fff; border:1px solid var(--line); border-radius:18px; padding:34px 30px; width:100%; max-width:420px; }
.auth-box h1 { font-size:24px; margin-bottom:6px; }
.auth-box .desc { color:var(--sub); font-size:14.5px; margin-bottom:22px; }
.tabs { display:flex; border-bottom:2px solid var(--line); margin-bottom:22px; }
.tabs button { flex:1; background:none; border:none; padding:10px 0; font-size:16px; color:var(--sub); font-weight:700; border-bottom:3px solid transparent; margin-bottom:-2px; }
.tabs button.on { color:var(--main-dark); border-bottom-color:var(--main); }
label.f { display:block; font-size:14px; font-weight:700; margin:14px 0 6px; }
input.f { width:100%; padding:12px 14px; border:1px solid #d1d5db; border-radius:10px; font-size:16px; font-family:inherit; }
input.f:focus { outline:none; border-color:var(--main); box-shadow:0 0 0 3px #dbeafe; }
.auth-box .btn { width:100%; margin-top:22px; }
.msg { margin-top:16px; padding:12px 14px; border-radius:10px; font-size:14.5px; display:none; }
.msg.show { display:block; }
.msg.err { background:#fef2f2; color:var(--bad); }
.msg.ok { background:#ecfdf5; color:var(--ok); }
.msg.info { background:#eff6ff; color:var(--main-dark); }
.hint { font-size:13px; color:var(--sub); margin-top:6px; }

/* 선생님 화면 */
.app-head { background:#fff; border-bottom:1px solid var(--line); }
.app-head .wrap { max-width:1200px; display:flex; align-items:center; justify-content:space-between; height:60px; gap:12px; }
.who { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--sub); }
.who b { color:var(--text); }
.role-tag { font-size:12px; padding:2px 8px; border-radius:999px; background:#dbeafe; color:var(--main-dark); font-weight:700; }
.menu { background:#fff; border-bottom:1px solid var(--line); }
.menu .wrap { max-width:1200px; display:flex; gap:4px; overflow-x:auto; }
.menu button { background:none; border:none; padding:14px 18px; font-size:15.5px; font-weight:700; color:var(--sub); border-bottom:3px solid transparent; white-space:nowrap; }
.menu button.on { color:var(--main-dark); border-bottom-color:var(--main); }
.menu button .cnt { display:inline-block; min-width:20px; padding:0 6px; margin-left:6px; border-radius:999px; background:var(--bad); color:#fff; font-size:12px; line-height:20px; }
.app-main { background:var(--bg); min-height:calc(100vh - 112px); padding:30px 0 60px; }
.app-main .wrap { max-width:1200px; }
.panel { background:#fff; border:1px solid var(--line); border-radius:16px; padding:28px; }
.panel h2 { font-size:22px; margin-bottom:6px; }
.panel .lead { color:var(--sub); margin-bottom:18px; }
.empty { border:2px dashed var(--line); border-radius:14px; padding:44px 20px; text-align:center; color:var(--sub); }
.empty b { display:block; color:var(--text); font-size:17px; margin-bottom:6px; }
.plan li { margin-left:20px; color:var(--sub); font-size:15px; }
.center-box { max-width:520px; margin:60px auto; text-align:center; }
.center-box .icon { font-size:46px; margin-bottom:10px; }
.center-box h1 { font-size:24px; margin-bottom:10px; }
.center-box p { color:var(--sub); margin-bottom:8px; }
table.list { width:100%; border-collapse:collapse; font-size:15px; }
table.list th, table.list td { padding:12px 10px; border-bottom:1px solid var(--line); text-align:left; }
table.list th { color:var(--sub); font-weight:700; font-size:14px; background:#fafafa; }
.st { font-size:13px; font-weight:700; padding:2px 10px; border-radius:999px; }
.st.pending { background:#fef3c7; color:var(--warn); }
.st.approved { background:#d1fae5; color:var(--ok); }
.st.rejected { background:#fee2e2; color:var(--bad); }
.loading { text-align:center; color:var(--sub); padding:80px 0; }

@media (max-width:820px) {
  nav.top .anchor { display:none; }
  .hero { padding:58px 0; }
  .hero h1 { font-size:29px; }
  .g3, .g2 { grid-template-columns:1fr; }
  section { padding:54px 0; }
  .sec-title { font-size:25px; }
  .call-fab { display:block; position:fixed; left:16px; right:16px; bottom:16px; text-align:center; background:var(--main); color:#fff; font-weight:800; padding:15px; border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,.2); z-index:20; }
  footer.foot { padding-bottom:90px; }
  .brand small { display:none; }
  .who .email { display:none; }
}