/* 첫 화면·문서 보기 공용. 교사용 안내 화면과 같은 색(남색·청록·민트)과 글꼴을 쓴다. */
:root{--navy:#132a41;--teal:#176a69;--teal-d:#12595a;--mint:#c4e4da;--paper:#f3f5f6;--line:#d6dfe5;--text:#24394b;--muted:#5b6f7d;--sand:#e7d9b9;--sand-ink:#6c5021;--white:#fff;color-scheme:light}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--text);font:16px/1.75 'Noto Sans KR','Malgun Gothic','Apple SD Gothic Neo',Arial,sans-serif;word-break:keep-all;overflow-wrap:anywhere}
a{color:var(--teal)}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid #dfad4c;outline-offset:3px}
.topbar{background:var(--navy);color:var(--white);padding:14px max(16px,5vw);display:flex;justify-content:space-between;align-items:center;gap:14px}
.topbar a{color:var(--white);text-decoration:none}
.topbar b{font-size:13px;letter-spacing:1px}
.topbar nav{display:flex;gap:16px;font-size:13px}
.topbar nav a{color:var(--mint)}
.wrap{max-width:1120px;margin:0 auto;padding:28px max(16px,24px) 64px}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:2px;color:var(--teal)}
h1,h2,h3{text-wrap:balance}
h2{font-size:24px;line-height:1.45;margin:6px 0 18px;letter-spacing:-.5px}
.btn{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border:1px solid var(--line);border-radius:9px;background:var(--white);color:var(--navy);font-size:14px;font-weight:700;text-decoration:none}
.btn.primary{background:var(--teal);border-color:var(--teal);color:var(--white)}
.btn.primary:hover{background:var(--teal-d)}
.btn.ghost{background:transparent;color:var(--white);border-color:#ffffff55}
.note{font-size:13px;color:var(--muted)}
footer.site{border-top:1px solid var(--line);margin-top:40px;padding-top:18px;font-size:13px;color:var(--muted)}
@media(max-width:560px){.topbar nav a:not(:first-child){display:none}}
@media print{.topbar,.no-print{display:none!important}body{background:#fff}.wrap{padding:0;max-width:none}a{color:inherit;text-decoration:none}}