:root { --brand:#2563eb; }
* { box-sizing: border-box; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif; color:#1f2933; background:#f4f6fb; }
.app-header { padding:14px 20px; background:#fff; border-bottom:1px solid #e5e9f0; display:flex; align-items:center; gap:12px; }
.app-header .brand-logo { width:42px; height:42px; border-radius:50%; flex:0 0 auto; }
.app-header h1 { margin:0; font-size:19px; font-weight:800; }

/* ---------- 첫 페이지 안내문 ---------- */
.notice { background:#fff; border:1px solid #e5e9f0; border-left:5px solid #d32f2f; border-radius:14px; padding:18px 20px; margin:6px 0 22px; line-height:1.65; color:#3e4c59; font-size:15px; }
.notice p { margin:0 0 10px; }
.notice-hi { font-size:17px; color:#1f2933; }
.notice strong { color:#d32f2f; }
.notice-cta { margin-top:14px; font-weight:700; color:#1f2933; }
.blog-links { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.blog-links a { display:inline-block; padding:8px 13px; border:1px solid #cbd2d9; border-radius:10px; background:#f8fafc; color:#2563eb; font-size:13px; font-weight:700; text-decoration:none; }
.blog-links a:hover { background:#eef2f7; }

/* 푸터 블로그 링크 */
.foot-blogs { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-bottom:8px; }
.foot-blogs a { color:#2563eb; font-size:13px; font-weight:700; text-decoration:none; }

/* ---------- 게이트 ---------- */
.gate, .viewer { max-width:880px; margin:0 auto; padding:20px; }
.gate-lead { color:#52606d; font-size:15px; margin:8px 0 20px; }
.gate-field { border:1px solid #e5e9f0; border-radius:14px; padding:14px 16px; margin:0 0 16px; background:#fff; }
.gate-field legend { font-weight:800; font-size:14px; padding:0 6px; color:#334e68; }
.chip-row { display:flex; flex-wrap:wrap; gap:8px; }
.chip { padding:9px 14px; border:1px solid #cbd2d9; border-radius:999px; background:#fff; font-size:14px; font-weight:700; cursor:pointer; }
.chip.is-active { background:var(--brand); border-color:var(--brand); color:#fff; }
.gate-input { width:100%; padding:11px 13px; margin-top:8px; border:1px solid #cbd2d9; border-radius:10px; font-size:15px; }
.gate-error { color:#d64545; font-size:13px; margin:8px 0 0; }
.primary-button { width:100%; padding:14px; border:0; border-radius:12px; background:var(--brand); color:#fff; font-size:16px; font-weight:800; cursor:pointer; }
.primary-button:disabled { background:#b8c2cf; cursor:not-allowed; }

/* ---------- 열람: 학교 칩 ---------- */
.school-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; position:sticky; top:0; background:#f4f6fb; padding:10px 0; z-index:5; }
.school-chips .chip.is-active { background:var(--chip-color,#2563eb); border-color:var(--chip-color,#2563eb); }

/* ---------- 열람: 아코디언 ---------- */
.acc-school { background:#fff; border:1px solid #e5e9f0; border-radius:16px; overflow:hidden; }
.acc-school-head { padding:14px 16px; font-weight:800; font-size:17px; color:#fff; background:var(--school-color,#2563eb); }
.acc-grade { border-top:1px solid #eef1f6; }
.acc-grade > summary { padding:13px 16px; font-weight:700; cursor:pointer; list-style:none; }
.acc-grade > summary::-webkit-details-marker { display:none; }
.acc-grade > summary::before { content:"▸"; margin-right:8px; color:#829ab1; }
.acc-grade[open] > summary::before { content:"▾"; }
.acc-grade-body { padding:0 16px 16px; }
.track-row { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 14px; }
.pj-legend { font-size:.72rem; font-weight:400; color:#667; white-space:nowrap; }
.pj-legend .lg { margin:0 2px 0 8px; }

/* ---------- 편제표 (v1 styles.css에서 복제) ---------- */
.track-btn{ border:1px solid #cdd6e0; background:#f4f6f9; border-radius:999px; padding:6px 12px; font-size:.82rem; font-weight:700; cursor:pointer; }
.track-btn.is-active{ background:#1f3b5c; color:#fff; border-color:#1f3b5c; }
.lg{ display:inline-block; width:13px; height:13px; border-radius:3px; vertical-align:middle; margin:0 2px 0 8px; border:1px solid #bbb;}
.lg-Y{ background:#f4a8a8;} .lg-G{ background:#bde3bf;} .lg-B{ background:#ffe082;}
.pj-grid{ display:grid; gap:6px; }
.pj-grid-2{ grid-template-columns:repeat(2,1fr); }
.pj-col{ display:flex; flex-direction:column; gap:4px; }
.pj-head{ background:#1f3b5c; color:#fff; text-align:center; font-weight:700; font-size:.82rem; padding:5px 4px; border-radius:5px; }
.pj-cell{ font-size:.82rem; text-align:center; padding:5px 4px; border-radius:5px; }
.pj-common{ background:#e4f1df; }
.pj-cell b{ color:#1f3b5c; }
.pj-empty{ background:#f2f2f2; color:#999; }
.pj-grp{ border:1px solid #d7deea; border-radius:7px; padding:5px; }
.pj-grp-label{ font-size:.74rem; font-weight:700; color:#1f3b5c; text-align:center; margin-bottom:3px; }
.pj-opt{ font-size:.8rem; text-align:center; padding:4px 3px; border-radius:4px; background:#f2f2f2; margin:2px 0; }
.pj-opt.hl-Y{ background:#f4a8a8; } .pj-opt.hl-G{ background:#bde3bf; } .pj-opt.hl-B{ background:#ffe082; }
.pj-opt.dim{ background:#f2f2f2; color:#999; }
@media (max-width:640px){ .pj-grid-2{ grid-template-columns:1fr; } }

/* ---------- 푸터 ---------- */
.brand-footer { max-width:880px; margin:24px auto; padding:0 20px; color:#829ab1; font-size:13px; text-align:center; }