:root { --brand:#2563eb; --focus:#0b5cff; color-scheme: light; }
* { box-sizing: border-box; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif; color:#1f2933; background:#f4f6fb; }

/* ---------- 모바일 기본기 (2026-09-04) ----------
   학부모가 QR 로 폰에서 여는 앱이다. 칩을 연타하므로 더블탭 줌 지연을 없애고,
   탭 하이라이트를 정해 두고, 아이폰 노치·홈바 영역을 피한다. */
button, a, summary, input, label { touch-action: manipulation; }
html { -webkit-tap-highlight-color: rgba(37,99,235,.12); }

/* 키보드로 이동할 때 지금 어디인지 보이게. 없으면 탭 이동이 깜깜하다. */
:where(button, a, summary, input, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 6px;
}
.app-header { padding:14px 20px; background:#fff; border-bottom:1px solid #e5e9f0; display:flex; align-items:center; gap:12px; }
.app-header .brand-logo { height:38px; width:auto; max-width:170px; object-fit:contain; 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; }
/* 터치 타깃 44px — 학부모 손가락 기준. 9px 패딩이면 37px 밖에 안 나온다. */
.chip { min-height:44px; padding:10px 15px; 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-label { display:block; font-size:13px; font-weight:700; color:#52606d; margin-top:4px; }
.gate-input { width:100%; min-height:44px; padding:11px 13px; margin-top:8px; border:1px solid #cbd2d9; border-radius:10px; font-size:16px; }
.gate-error { color:#d64545; font-size:13px; margin:8px 0 0; }
.primary-button { width:100%; min-height:52px; padding:14px; border:0; border-radius:12px; background:var(--brand); color:#fff; font-size:16px; font-weight:800; cursor:pointer; white-space:nowrap; }
.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; padding-top:calc(10px + env(safe-area-inset-top)); }
.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 calc(12px + env(safe-area-inset-bottom)); color:#829ab1; font-size:13px; text-align:center; }
.gate, .viewer { padding-left:calc(20px + env(safe-area-inset-left)); padding-right:calc(20px + env(safe-area-inset-right)); }

/* 움직임을 줄여 달라는 설정을 존중한다 */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

.consent-field .req { color:#dc2626; font-size:13px; font-weight:700; }
.consent-row { display:flex; gap:9px; align-items:flex-start; cursor:pointer; font-size:14px; line-height:1.55; }
.consent-row input { margin-top:3px; width:18px; height:18px; flex:0 0 auto; accent-color:#0d9488; }
.consent-detail { margin-top:9px; font-size:13px; color:#52606d; }
.consent-detail summary { cursor:pointer; color:#0d9488; font-weight:600; }
.consent-detail ul { margin:8px 0 0; padding-left:18px; }
.consent-detail li { margin:3px 0; }

.consent-body { background:#f8fafc; border:1px solid #e5e9f0; border-radius:10px; padding:12px 14px; margin-bottom:12px; font-size:13px; line-height:1.65; color:#3e4c59; }
.consent-body p { margin:0 0 7px; }
.consent-body p:last-child { margin-bottom:0; }
.consent-row strong { color:#0d9488; }