/* 생기부 점검 — 공통 스타일(2026-09 개편 시안 기준). 새 화면은 모두 이 파일을 쓴다. */
@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@700&family=IBM+Plex+Sans+KR:wght@400;500;600;700&display=swap');

:root{
  --ground:#F5F3EE; --card:#FFFFFF; --line:#E3DFD6; --line-2:#EDE9E1; --soft:#FAF8F4; --chip:#EFECE5;
  --ink:#1D1C1A; --ink-2:#3E3B35; --mute:#6B675F; --nav:#55524B;
  --accent:#0E5E57; --accent-ink:#08403B; --accent-soft:#E3EFEC;
  --ok:#1E6B3A; --ok-soft:#E4F2E8; --warn:#9A5B10; --warn-soft:#FBEFD9; --bad:#B8432F; --bad-soft:#FBE7E3;
  --c-spell:#F2C230; --c-sent:#F08C3A; --c-rule-book:#E0524F; --c-rule:#5B6B8C;
  --m-spell:#F7DC79; --m-sent:#F6B77F; --m-book:#EE9A98; --m-rule:#C3CBDD;
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ground); color:var(--ink); font-family:'IBM Plex Sans KR',-apple-system,'Apple SD Gothic Neo',sans-serif;
     line-height:1.55; -webkit-font-smoothing:antialiased}
a{color:var(--accent)} a:hover{color:var(--accent-ink)}
.serif{font-family:'Gowun Batang',serif}
.hidden{display:none !important}
.muted{color:var(--mute)} .small{font-size:12px}

/* 상단 막대 */
.topbar{height:64px; padding:0 40px; display:flex; align-items:center; gap:28px; background:var(--card); border-bottom:1px solid var(--line)}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.brand b{font-family:'Gowun Batang',serif; font-size:20px}
.school-chip{font-size:12px; font-weight:600; color:var(--accent); background:var(--accent-soft); border-radius:999px; padding:3px 10px; white-space:nowrap}
.nav{display:flex; gap:4px; flex-grow:1}
.nav a,.nav button{font:inherit; font-size:14px; color:var(--nav); text-decoration:none; padding:8px 12px; border-radius:8px; border:0; background:none; cursor:pointer}
.nav a.on{font-weight:600; color:var(--ink); background:var(--chip)}
.nav .badge{font-size:11px; font-weight:700; color:#fff; background:var(--bad); border-radius:999px; padding:1px 6px; margin-left:2px}
.who{font:inherit; font-size:13px; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:8px; padding:8px 12px; min-height:40px; cursor:pointer}

/* 본문 */
.page{max-width:1200px; margin:0 auto; padding:32px 40px 60px; display:flex; flex-direction:column; gap:22px}
h1.title{margin:0; font-family:'Gowun Batang',serif; font-size:30px}
.lead{margin:6px 0 0; font-size:14px; color:var(--mute)}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px}
.card h2{margin:0; font-size:16px}
.card-head{display:flex; justify-content:space-between; align-items:center; gap:12px}
.grid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:start}
.stack{display:flex; flex-direction:column; gap:12px}

/* 버튼 */
.btn{font:inherit; font-size:13px; font-weight:600; border-radius:8px; padding:9px 14px; min-height:38px; border:0; cursor:pointer;
     text-decoration:none; display:inline-flex; align-items:center; gap:6px; white-space:nowrap}
.btn-primary{background:var(--accent); color:#fff} .btn-primary:hover{background:var(--accent-ink); color:#fff}
.btn-soft{background:var(--accent-soft); color:var(--accent)}
.btn-line{background:var(--card); color:var(--ink); border:1px solid var(--line)}
.btn-dark{background:var(--ink); color:#fff}
.btn:disabled{opacity:.5; cursor:not-allowed}

/* 입력 */
label.field{display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; color:var(--ink-2)}
input.in,select.in{font:inherit; font-size:14px; font-weight:400; color:var(--ink); border:1px solid #D6D0C4; border-radius:10px; padding:11px 12px; background:#fff; width:100%}
input.in:focus,select.in:focus{outline:2px solid var(--accent-soft); border-color:var(--accent)}

/* 알림줄 */
.note{font-size:13px; border-radius:10px; padding:10px 12px}
.note.err{color:var(--bad); background:var(--bad-soft)}
.note.ok{color:var(--ok); background:var(--ok-soft)}
.note.warn{color:var(--warn); background:var(--warn-soft)}

/* 목록 행 */
.row{display:flex; align-items:center; gap:12px; border:1px solid var(--line-2); border-radius:10px; padding:10px 12px}
.row .grow{flex-grow:1; display:flex; flex-direction:column; min-width:0}
.pill{font-size:12px; font-weight:700; border-radius:999px; padding:2px 9px; white-space:nowrap}
.pill.ok{color:var(--ok); background:var(--ok-soft)} .pill.wait{color:var(--warn); background:var(--warn-soft)}
.pill.gray{color:var(--mute); background:var(--chip)} .pill.accent{color:var(--accent); background:var(--accent-soft)}

/* 가운데 카드(로그인·가입) */
.center{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px}
.auth{width:100%; max-width:440px; background:var(--card); border:1px solid var(--line); border-radius:20px; padding:32px 30px; display:flex; flex-direction:column; gap:16px}
.auth .brand{justify-content:center}

/* 공지·요청 창 */
dialog{border:1px solid var(--line); border-radius:16px; padding:22px; width:min(520px,92vw); color:var(--ink)}
dialog::backdrop{background:rgba(29,28,26,.35)}
.ann{border-bottom:1px solid var(--line-2); padding:10px 0; font-size:14px; white-space:pre-wrap}

@media (max-width:760px){
  /* 휴대폰: 윗줄(로고·계정) + 아랫줄(메뉴, 옆으로 밀어 보기) — 메뉴 글자가 세로로 깨지지 않게 */
  .topbar{height:auto; flex-wrap:wrap; padding:10px 16px 6px; gap:6px 10px}
  .brand, .brand b, .school-chip{white-space:nowrap}
  .who{margin-left:auto; white-space:nowrap}
  .nav{order:3; flex-basis:100%; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav a,.nav button{white-space:nowrap; flex:none}
  .page{padding:20px 16px 40px}
  .grid2{grid-template-columns:1fr}
  .nav a,.nav button{padding:8px 8px}
}

/* 글자처럼 보이는 작은 버튼(이름 고치기 등) */
.linkbtn{background:none; border:0; padding:0 0 0 6px; font:inherit; font-size:12px; font-weight:500; color:var(--accent); cursor:pointer}
.linkbtn:hover{text-decoration:underline}