/* p/p.css — 2117 학부모 앱. 토큰 = design2117(assistant.css와 같은 --a-* 값: 베이지 배경·크림 카드·네이비 잉크·골드 포인트·KoPubWorldBatang). */
:root {
  --a-bg: linear-gradient(165deg, #d6cdc3, #cec3b4 55%, #c6bbae);
  --a-ink: #18233f; --a-sub: #6a5f4d; --a-muted: #9a8f7d;
  --a-gold: #f0c14b; --a-gold-2: #d99e1f; --a-card: #fffdfa; --a-border: #e6dfd1; --a-line: #f0eadd;
  --a-danger: #b91c1c; --a-ok: #1f9d63;
  --a-cream: #faf5e8;   /* 크림 틴트(안내 상자) — 동의 뷰가 쓴다. 기존 규칙의 같은 값 #faf5e8 은 그대로 둔다 */
  --a-shadow: 0 6px 18px rgba(90, 74, 48, .08);
  --a-font: var(--font-ui, 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif);
}
* { box-sizing: border-box; }
html { background: #d6cdc3; }
body { margin: 0; min-height: 100svh; background: var(--a-bg); background-attachment: fixed; color: var(--a-ink); font-family: var(--a-font); font-size: 16px; line-height: 1.45; word-break: keep-all; overflow-wrap: anywhere; }
[hidden] { display: none !important; }
#boot { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #d6cdc3; color: var(--a-sub); z-index: 60; }

/* 상단바 */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; padding: 10px 12px; padding-top: calc(10px + env(safe-area-inset-top)); background: rgba(214, 205, 195, .92); backdrop-filter: blur(6px); border-bottom: 1px solid var(--a-border); }
.topbar-logo { width: 36px; height: 36px; border-radius: 10px; background: #fff; display: block; }
.topbar-title { font-size: 18px; margin: 0; font-weight: 700; white-space: nowrap; }
.topbar-sp { flex: 1; }
.tb-btn { font: inherit; font-size: 15px; color: var(--a-ink); background: var(--a-card); border: 1px solid var(--a-border); border-radius: 999px; padding: 6px 12px; min-height: 44px; cursor: pointer; white-space: nowrap; }

/* 자녀 세그먼트(오늘 탭 [전체] + 아이 이름 — 알약 줄) */
.kids { max-width: 620px; margin: 0 auto; padding: 10px 12px 0; }
.pc-seg { display: flex; gap: 8px; overflow-x: auto; }
.pc-seg-b { flex: none; font: inherit; font-size: 14px; min-height: 40px; padding: 6px 16px; border-radius: 999px; border: 1px solid var(--a-border); background: var(--a-card); color: var(--a-sub); cursor: pointer; white-space: nowrap; }
.pc-seg-b.on { background: var(--a-ink); border-color: var(--a-ink); color: #fff; font-weight: 700; }

/* 본문 */
.main-view { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
.view { max-width: 620px; margin: 0 auto; padding: 12px 12px 24px; transition: opacity .15s; }
.view.busy { opacity: .45; pointer-events: none; }
.card { background: var(--a-card); border: 1px solid var(--a-border); border-radius: 16px; padding: 14px 16px; margin-bottom: 10px; box-shadow: var(--a-shadow); }
/* 카드 머리 한 양식(2026-10-11 2차) — 제목 + 오른쪽 보조글/칩/화살표 · 네 탭 모두 같은 간격·반경·테두리 */
.ch { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; min-height: 28px; }
.ch h3 { margin: 0; font-size: 16px; font-weight: 700; }
.ch .r { display: flex; align-items: center; gap: 8px; min-width: 0; }
.aux { font-size: 12px; color: var(--a-sub); text-align: right; }
.sh { margin: 12px 0 4px; font-size: 12px; font-weight: 700; color: var(--a-sub); }
.sh.first { margin-top: 0; }
.pc-spd-card .sh b { color: var(--a-ink); }
.sh.pay-sh { margin-top: 14px; }
.sub { color: var(--a-sub); font-size: 12px; }
.chip { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.chip.ok { background: #e6f2e8; color: var(--pc-green); }
.chip.warn { background: #faf3df; color: #7a5a00; border: 1px solid #ecdca6; }
.chip.bad { background: #fbeaea; color: var(--a-danger); }
.chip.mute { background: var(--a-line); color: var(--a-sub); }
.mth { margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--a-line); color: var(--a-sub); font-size: 12px; font-weight: 600; }
.pc-chev { flex: none; font-style: normal; font-size: 22px; line-height: 1; color: var(--a-sub); }
.pc-pill { flex: none; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--a-border); background: var(--a-card); color: var(--a-ink); font-size: 14px; white-space: nowrap; }
/* 눌러서 이동하는 카드(오늘 속도·학교 시험·티어 요약) */
.pc-go { cursor: pointer; }
.pc-go:focus-visible, .cell:focus-visible, .pc-sum:focus-visible, button.pc-pay:focus-visible { outline: 2px solid var(--a-ink); outline-offset: 2px; }
/* 칸(타일) — 오늘 한눈에 · 월 요약 · 점수 */
.cells { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); }
.cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 0 4px; border: 0; border-left: 1px solid var(--a-line); background: none; font: inherit; color: inherit; text-align: center; }
.cell:first-child { border-left: 0; }
button.cell { cursor: pointer; border-radius: 10px; }
.cell .l { font-size: 12px; color: var(--a-sub); }
.cell .v { font-size: 20px; font-weight: 700; line-height: 1.3; }
.cell .v small { margin-left: 1px; font-size: 12px; font-weight: 600; color: var(--a-sub); }
.cell .v small.blk { display: block; margin: -2px 0 0; }
.cell .v.ok { color: var(--pc-green); }
.cell .v.warn { color: #7a5a00; }
.cell .v.bad { color: var(--a-danger); }
.cell .v.mute { color: var(--a-muted); }
.empty { padding: 10px 0; color: var(--a-muted); font-size: 14px; }
.hint { text-align: center; color: var(--a-sub); font-size: 13px; margin: 12px 4px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 15px; margin: 0; }
.kv dt { color: var(--a-sub); }
.kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.kv dd.bad { color: var(--a-danger); }
.strong { font-weight: 700; color: var(--a-ink); }

/* 목록 */
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--a-line); font-size: 14px; }
.list li:first-child { padding-top: 0; }
.list li:last-child { border-bottom: 0; padding-bottom: 0; }
.list .r { flex: none; text-align: right; font-weight: 700; font-size: 15px; }
.list .sub { display: block; font-weight: 400; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 달력 — 등원 = 초록 · 시험 기간 = 금색 띠(예정) */
.nav { display: flex; gap: 6px; }
.mbtn { font: inherit; font-size: 20px; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--a-border); background: #fff; color: var(--a-ink); cursor: pointer; }
.mbtn:disabled { opacity: .3; cursor: default; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal .wd { text-align: center; font-size: 12px; color: var(--a-sub); padding: 2px 0; }
.day { font: inherit; display: flex; flex-direction: column; align-items: center; min-height: 54px; padding: 4px 0; border-radius: 10px; border: 2px solid transparent; background: none; color: var(--a-ink); cursor: pointer; }
.day .d { font-size: 14px; }
.day .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--pc-green); margin: 3px 0 1px; }
.day .m { font-size: 12px; color: var(--a-sub); white-space: nowrap; font-variant-numeric: tabular-nums; }
.day.att { background: #e6f2e8; }
.day.future:not(.ex):not(.plan) { opacity: .38; }
.day.sel { outline: 2px solid var(--a-ink); outline-offset: -2px; }
.day.today .d { font-weight: 700; text-decoration: underline; }
.day.ex { background: #faf3df; border-color: #ecdca6; border-width: 2px 0; border-radius: 0; margin-right: -3px; }
.day.ex.s { border-left-width: 2px; border-radius: 10px 0 0 10px; }
.day.ex.e { border-right-width: 2px; border-radius: 0 10px 10px 0; margin-right: 0; }
.day.ex .m { color: #7a5a00; font-weight: 700; }
.day.ex.att .m { color: var(--a-sub); font-weight: 400; }
/* 범례 */
.pc-lg { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 6px; font-size: 12px; color: var(--a-sub); }
.pc-lg i { display: inline-block; width: 14px; height: 0; margin-right: 4px; border-top: 3px solid; border-radius: 2px; vertical-align: middle; }
.pc-lg i.fast { border-color: var(--pc-green); }
.pc-lg i.slow { border-color: #b8860b; }
.pc-lg i.flat { border-color: var(--a-muted); }
.pc-lg i.dash { border-top: 2px dashed #514738; }
.pc-lg i.sq { width: 10px; height: 10px; border: 0; }
.pc-lg i.sq.ok { background: var(--pc-green); }
.pc-lg i.sq.gold { background: var(--pc-gold); }

/* 하단 탭바 */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; max-width: 620px; margin: 0 auto; display: flex; background: var(--a-card); border-top: 1px solid var(--a-border); padding-bottom: env(safe-area-inset-bottom); }
.tab { flex: 1; font: inherit; font-size: 14px; background: none; border: 0; padding: 10px 2px 8px; min-height: 56px; color: var(--a-sub); position: relative; cursor: pointer; }
.tab.active { color: var(--a-ink); font-weight: 700; }
.tab.active::after { content: ''; position: absolute; left: 25%; right: 25%; top: 0; height: 3px; background: var(--a-gold-2); border-radius: 0 0 3px 3px; }

/* 로그인·가입 폼 */
.auth-wrap { max-width: 420px; margin: 0 auto; padding: calc(40px + env(safe-area-inset-top)) 16px 32px; }
.brand { text-align: center; margin-bottom: 18px; }
.brand img { width: 64px; height: 64px; border-radius: 16px; background: #fff; box-shadow: var(--a-shadow); }
.brand h1 { margin: 10px 0 0; font-size: 22px; }
.brand p { margin: 4px 0 0; color: var(--a-sub); font-size: 14px; }
.field { display: block; margin: 10px 0; font-size: 14px; color: var(--a-sub); }
.field input { display: block; width: 100%; margin-top: 4px; font: inherit; font-size: 16px; padding: 11px 12px; border: 1px solid var(--a-border); border-radius: 13px; background: #fff; color: var(--a-ink); }
.btn { font: inherit; font-size: 16px; width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 13px; border: 1px solid var(--a-gold-2); background: linear-gradient(#f0c14b, #d99e1f); color: #241a04; font-weight: 700; cursor: pointer; margin-top: 8px; }
.btn:disabled { opacity: .6; cursor: default; }
.err { color: var(--a-danger); font-size: 14px; min-height: 20px; margin-top: 8px; white-space: pre-line; }
.note { color: var(--a-sub); font-size: 13px; margin-top: 14px; text-align: center; }
.note a { color: var(--a-ink); }

/* 마케팅 수신 동의 */
.consent-box { margin: 12px 0 4px; padding: 12px 14px; border: 1px solid var(--a-border); border-radius: 13px; background: #faf5e8; font-size: 14px; }
.card.consent-box { margin: 0 0 10px; padding: 14px 16px; }
.consent-t { display: block; font-size: 15px; color: var(--a-ink); margin-bottom: 6px; }
.consent-list { margin: 0 0 10px; padding-left: 18px; color: var(--a-sub); font-size: 13px; }
.consent-list li { margin: 3px 0; }
.consent-chk { display: flex; gap: 8px; align-items: flex-start; color: var(--a-ink); font-weight: 700; cursor: pointer; }
.consent-chk input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--a-gold-2); }
.btn-sub { background: var(--a-card); border-color: var(--a-border); color: var(--a-sub); font-weight: 400; }
/* 앱 이용 동의 뷰(2026-10-26 — 마케팅 수신 + 학원 이용 동의서, 시안 _sian/p_consent.html) */
.ag-t { margin: 0 0 4px; font-size: 20px; font-weight: 700; }
.ag-lead { margin: 0 0 12px; font-size: 14px; line-height: 1.55; color: var(--a-sub); }
.ag-lead-s { margin-bottom: 4px; }
.ag-kids { margin: 0 0 12px; padding: 10px 14px; background: var(--a-cream); border: 1px solid var(--a-border); border-radius: 13px; }
.ag-kids b { display: block; font-size: 15px; }
.ag-kids span { display: block; margin-top: 2px; font-size: 12px; color: var(--a-sub); }
.ag-all { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px; margin: 0 0 4px; border: 1px solid var(--a-gold-2); border-radius: 13px; background: var(--a-card); font-size: 16px; font-weight: 700; cursor: pointer; }
.ag-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 16px 0 2px; }
.ag-h h3 { margin: 0; font-size: 15px; font-weight: 700; }
.ag-h .sub { text-align: right; }
.ag-item { border-bottom: 1px solid var(--a-line); }
.ag-item:last-of-type { border-bottom: 0; }
.ag-row { display: flex; align-items: flex-start; gap: 6px; }
.ag-lab { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; cursor: pointer; }
.ag-lab-plain { cursor: default; }
.ag-lab input, .ag-all input, .ag-radio input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--a-gold-2); }
.ag-all input { margin: 0; }
.ag-b { display: block; min-width: 0; }
.ag-nm { display: block; font-size: 15px; font-weight: 700; line-height: 1.4; }
.ag-nm .chip { margin-left: 6px; padding: 0 8px; font-size: 12px; vertical-align: 1px; }
.ag-ds { display: block; margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--a-sub); }
.ag-more { flex: none; font: inherit; font-size: 13px; min-height: 44px; padding: 0 6px 0 8px; border: 0; background: none; color: var(--a-sub); text-decoration: underline; cursor: pointer; white-space: nowrap; }
.ag-more[aria-expanded="true"] { color: var(--a-ink); font-weight: 700; }
.ag-det { margin: 0 0 10px 30px; padding: 10px 12px; background: var(--a-cream); border: 1px solid var(--a-border); border-radius: 13px; font-size: 13px; line-height: 1.6; color: var(--a-sub); }
.ag-det b { color: var(--a-ink); }
.ag-det .consent-list { margin: 0; }
.ag-radios { display: grid; gap: 6px; margin: 0 0 10px 30px; }
.ag-radio { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--a-border); border-radius: 13px; background: var(--a-card); cursor: pointer; }
.ag-radio .rn { display: block; font-size: 14px; font-weight: 700; }
.ag-radio .rd { display: block; margin-top: 1px; font-size: 12px; color: var(--a-sub); }
.ag-radio:has(input:checked) { border-color: var(--a-gold-2); background: var(--a-cream); }
.ag-sign .field { margin: 6px 0 8px; }
.ag-sign .field .req { color: var(--a-danger); }
.ag-sign .field small { display: block; margin-top: 4px; font-size: 12px; color: var(--a-sub); }
.ag-btns { margin-top: 14px; }
.jn-agree { margin: 16px 0 4px; padding-top: 14px; border-top: 1px solid var(--a-line); }   /* 가입 화면 동의 묶음 */

/* 토스트 */
.toast { position: fixed; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(20px); width: max-content; max-width: calc(100vw - 24px); background: var(--a-ink); color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 14px; text-align: center; opacity: 0; pointer-events: none; transition: .2s; z-index: 50; }
.toast.show { opacity: 1; transform: translateX(-50%); }

/* 설정 시트 */
.sheet { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; justify-content: flex-end; background: rgba(24, 35, 63, .45); }
.sheet-panel { width: 100%; max-width: 620px; margin: 0 auto; background: var(--a-card); border-radius: 16px 16px 0 0; padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 24px rgba(24, 35, 63, .18); animation: sheet-up .2s ease-out; }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
.sheet-t { font-size: 20px; margin: 0 0 6px; }
.sheet-item { display: block; width: 100%; font: inherit; font-size: 17px; text-align: left; min-height: 52px; padding: 12px 4px; background: none; border: 0; border-bottom: 1px solid var(--a-line); color: var(--a-ink); cursor: pointer; }

/* 첫 사용 튜토리얼 */
.tour { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(24, 35, 63, .55); }
.tour-card { width: 100%; max-width: 420px; background: var(--a-card); border: 1px solid var(--a-border); border-radius: 16px; padding: 22px 20px 18px; box-shadow: 0 12px 32px rgba(24, 35, 63, .25); }
.tour-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 14px; }
.tour-dot { width: 28px; height: 28px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; background: var(--a-line); color: var(--a-sub); }
.tour-dot.on { background: var(--a-ink); color: var(--a-gold); }
.tour-t { font-size: 22px; margin: 0 0 10px; text-align: center; }
.tour-b { font-size: 17px; line-height: 1.6; margin: 0 0 18px; }
.tour-btns { display: flex; gap: 8px; }
.tour-btns .btn { margin-top: 0; }

/* 탭 첫 진입 한 줄 안내 */
.tip { display: flex; align-items: center; gap: 4px; margin-bottom: 10px; padding: 2px 2px 2px 14px; background: #faf5e8; border: 1px solid var(--a-border); border-radius: 13px; font-size: 16px; }
.tip-t { flex: 1; padding: 8px 0; }
.tip-x { flex: none; font: inherit; font-size: 22px; line-height: 1; width: 44px; height: 44px; border: 0; background: none; color: var(--a-sub); cursor: pointer; }

@media (max-width: 380px) { .tile-v { font-size: 17px; } .topbar-title { font-size: 16px; } }
/* 관리자 미리보기 띠(p.js previewMode — 학부모에게는 안 보인다) */
.pv-band { padding: 6px 12px; padding-top: calc(6px + env(safe-area-inset-top)); background: #7a5a00; color: #fff; font-size: 13px; font-weight: 700; text-align: center; }
.pv-band:not([hidden]) + .topbar { padding-top: 10px; }

/* ── 학부모 앱 학생 카드 · 학원비 띠 · 오늘 속도 · 전체 보기 (2026-10-11, /p/card.js) — 글씨는 모두 12px 이상 ── */
:root { --pc-gold: #e6b137; --pc-gold-tint: rgba(230, 177, 55, .18); --pc-green: #187a43; }
/* 학원비 납부일 띠 — 한 줄, 누르면 수납 탭 */
.pc-pay { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; margin: 0 0 10px; padding: 8px 14px; border-radius: 14px; border: 1px solid var(--a-border); font: inherit; text-align: left; color: #1b2a52; background: #faf3df; cursor: pointer; }
.pc-pay-bt { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.pc-pay-plain { cursor: default; }
.pc-pay-nm { flex: none; max-width: 7em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; }
.pc-pay-t { font-size: 16px; font-weight: 700; }
.pc-pay-s { margin-left: auto; font-size: 14px; font-variant-numeric: tabular-nums; }
.pc-pay-before { border-color: #ecdca6; }
.pc-pay-today { background: var(--pc-gold); border-color: #c99416; color: #241a04; }
.pc-pay-over { background: #fbeaea; border-color: #e8b4b4; color: var(--a-danger); }
.pc-pay-paid { background: none; border-color: transparent; box-shadow: none; color: var(--pc-green); }
.pc-pay-paid .pc-pay-t { font-size: 13px; }
/* 학생 카드 */
.pc-card { padding: 14px 16px 12px; }
.pc-gh { margin: 12px 0 4px; font-size: 12px; font-weight: 700; color: var(--a-sub); }
.pc-tier { display: flex; align-items: center; gap: 12px; }
.pc-emb { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pc-emb img { display: block; max-width: none; }
.pc-tier-main { display: flex; flex-direction: column; min-width: 0; }
.pc-tier-name { font-size: 22px; font-weight: 800; line-height: 1.25; }
.pc-sum { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px 10px 16px; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.pc-sum-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pc-sum .pc-tier-name { font-size: 18px; }
.pc-tier-pts { font-size: 14px; color: var(--a-sub); }
.pc-tbar { height: 8px; margin: 10px 0 4px; border-radius: 999px; background: var(--a-line); overflow: hidden; }
.pc-tbar-f { display: block; height: 100%; border-radius: 999px; }
.pc-tnext { font-size: 13px; color: var(--a-sub); }
.pc-tnote { margin: 4px 0 0; font-size: 12px; color: var(--a-sub); }
/* 최근 10일 꺾은선 — 대시보드 hub-g-* 와 같은 모양(글씨만 12px 이상) */
.pc-g10 { display: block; width: 100%; padding-top: 2px; }
.pc-g-plot { position: relative; display: block; height: 46px; margin: 0 14px; }
.pc-g-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pc-g-area { fill: var(--pc-gold-tint); }
.pc-g-line { fill: none; stroke: var(--pc-gold); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pc-g-base { stroke: #d9cfba; stroke-width: 1; }
.pc-g-dot { position: absolute; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--pc-gold); transform: translate(-50%, -50%); box-shadow: 0 0 0 1.5px var(--a-card); }
.pc-g-dot.t-in { width: 10px; height: 10px; background: var(--pc-green); }
.pc-g-dot.t-out { width: 10px; height: 10px; background: var(--a-card); border: 2px solid var(--a-sub); box-shadow: none; }
.pc-g-box { position: absolute; top: -3px; height: 66px; width: 11.111%; transform: translateX(-50%); border-radius: 6px; }
.pc-g-box.y { background: rgba(31, 39, 64, .08); }
.pc-g-box.t-in { background: rgba(24, 122, 67, .12); }
.pc-g-box.t-out { background: rgba(230, 177, 55, .20); }
.pc-g-n { position: absolute; display: block; transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 700; line-height: 12px; color: #514738; -webkit-text-stroke: 3px var(--a-card); paint-order: stroke fill; font-variant-numeric: tabular-nums; }
.pc-g-n.zero { font-weight: 500; color: var(--a-sub); }
.pc-g-n.t-in, .pc-g-n.y, .pc-g-n.yz, .pc-g-n.t-out { font-size: 13px; font-weight: 800; line-height: 13px; color: var(--a-ink); }
.pc-g-n.t-in { color: var(--pc-green); }
.pc-g-n.yz { color: var(--a-danger); }
.pc-g-empty { position: absolute; left: 0; right: 0; top: 4px; text-align: center; font-size: 13px; color: var(--a-sub); }
.pc-g-days { position: relative; display: block; height: 16px; margin: 0 14px; }
.pc-g-d { position: absolute; top: 1px; transform: translateX(-50%); font-size: 12px; line-height: 14px; color: var(--a-sub); white-space: nowrap; }
.pc-g-d.t, .pc-g-d.y { font-weight: 800; color: var(--a-ink); }
/* 지금 푸는 교재 */
.pc-bk { padding: 6px 0; }
.pc-bk-t { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.pc-bk-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-xb { flex: none; padding: 0 7px; border-radius: 999px; background: #faf3df; border: 1px solid #ecdca6; color: #7a5a00; font-size: 12px; font-weight: 700; }
.pc-bk-bar { display: block; height: 8px; margin-top: 4px; border-radius: 999px; background: var(--a-line); overflow: hidden; }
.pc-bk-f { display: block; height: 100%; border-radius: 999px; }
.pc-bk-n { flex: none; font-size: 13px; color: var(--a-sub); }
/* 오늘 속도 */
.pc-spd-svg, .pc-ag-svg { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
.pc-spd-gl { stroke: var(--a-line); stroke-width: 1; }
.pc-spd-xl, .pc-spd-yl { font-size: 12.5px; fill: var(--a-sub); }
.pc-spd-o { fill: none; stroke: #b9b2a3; stroke-width: 1; opacity: .65; stroke-linejoin: round; }
.pc-spd-m { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.pc-spd-nm { font-size: 12.5px; font-weight: 700; }
.pc-spd-legend, .pc-spd-note, .pc-g-note { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--a-sub); }
/* 우리 아이 개인 그래프 — monitor.html _flowGraph 양식 */
.pc-fl-svg { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
.pc-fl-svg text { font-size: 12.5px; fill: var(--a-sub); font-family: inherit; }
.pc-fl-grid, .pc-fl-base { stroke: #d9cfba; stroke-width: 1; }
.pc-fl-bt { font-weight: 700; }
.pc-fl-ref { stroke: #514738; stroke-width: 1.4; stroke-dasharray: 2.5 3; opacity: .85; }
.pc-fl-seg { stroke-width: 2.4; stroke-linecap: round; }
.pc-fl-seg.fast { stroke: var(--pc-green); }
.pc-fl-seg.slow { stroke: #b8860b; }
.pc-fl-seg.flat { stroke: var(--a-muted); }
.pc-fl-dot.fast { fill: var(--pc-green); }
.pc-fl-dot.slow { fill: #b8860b; }
.pc-fl-dot.flat { fill: var(--a-muted); }
.pc-fl-svg text.pc-fl-acc { font-size: 14px; font-weight: 800; fill: var(--a-ink); }
.pc-fl-svg text.pc-fl-tx.ink { font-weight: 700; fill: var(--a-ink); }
.pc-spd-wait { margin: 6px 0 0; font-size: 13px; color: var(--a-sub); }
/* 전체 보기 */
.pc-all-t { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-height: 34px; padding: 2px 0; }
.pc-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.pc-all-nm { max-width: 8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.pc-all-t .pc-tier-name { font-size: 15px; }
.pc-all-t .pc-tier-pts { margin-left: auto; font-size: 13px; white-space: nowrap; }
.pc-all-msg { font-size: 13px; color: var(--a-sub); }
.pc-ag { max-width: 420px; margin: 0 auto; }
.pc-ag-base { stroke: #d9cfba; stroke-width: 1; }
.pc-ag-l { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.pc-ag-nm { font-size: 12.5px; font-weight: 700; }
.pc-ag-days { position: relative; height: 16px; }
.pc-all-hide { margin-top: 4px; }
.pc-ag-days .pc-g-d.t, .pc-ag-days .pc-g-d.y { letter-spacing: -.08em; }
/* 오늘 탭 홈(2026-10-12) — 등원 전 안내 · 날짜별 기록 「더 보기」 */
.pc-away-t { margin: 0; font-size: 16px; font-weight: 700; }
.pc-away-s { margin: 4px 0 0; font-size: 14px; color: var(--a-sub); }
.pc-g-note { margin: 8px 0 0; }
.pc-more { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--a-line); text-align: right; font-size: 14px; font-weight: 700; color: var(--a-sub); }
/* 오늘의 복습 시트(2026-10-11 2차) — 설정 시트(.sheet)와 같은 틀 */
.rv-panel { max-height: 82svh; overflow-y: auto; padding-top: 8px; }
.rv-grab { width: 40px; height: 4px; margin: 0 auto 10px; border-radius: 4px; background: var(--a-border); }
.pc-x { flex: none; width: 44px; height: 44px; margin: -8px -8px -8px 0; border-radius: 999px; border: 1px solid var(--a-border); background: var(--a-card); color: var(--a-sub); font: inherit; font-size: 18px; cursor: pointer; }
.pc-prog { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.pc-prog-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--a-line); overflow: hidden; }
.pc-prog-bar i { display: block; height: 100%; border-radius: 999px; background: var(--pc-green); }
.pc-prog b { font-size: 18px; }
.pc-rv-sub { margin-bottom: 8px; }
.pc-rv { list-style: none; margin: 0; padding: 0; }
.pc-rv li { display: grid; grid-template-columns: 1.6em 1fr auto; align-items: center; gap: 8px; padding: 8px 6px; border-bottom: 1px solid var(--a-line); font-size: 14px; }
.pc-rv li:last-child { border-bottom: 0; }
.pc-rv li.wrong { background: #fbeaea; border-radius: 10px; border-bottom-color: transparent; }
.pc-rv .no { text-align: center; font-size: 12px; color: var(--a-sub); }
.pc-rv .bk-n { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-rv .bk-n small { margin-left: 6px; font-size: 12px; color: var(--a-sub); }
.view { font-variant-numeric: tabular-nums; }

/* 시험 리포트(2026-10-12, 설계서 §11) — 홈 「새 시험 리포트」 · 학습 탭 목록 · 「전체」 줄 · 리포트 시트 */
.pc-xr-new { border-color: #e8b4b4; }
.pc-xr-badge { flex: none; display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--a-danger); color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; }
.pc-xr-row { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; margin: 0; padding: 8px 0; font: inherit; color: inherit; text-align: left; background: none; border: 0; cursor: pointer; }
.pc-xr-row + .pc-xr-row { border-top: 1px solid var(--a-line); }
.pc-xr-row:focus-visible { outline: 2px solid var(--a-ink); outline-offset: 2px; border-radius: 8px; }
.pc-xr-nm { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; }
.pc-xr-sc { flex: none; font-size: 13px; color: var(--a-sub); white-space: nowrap; }
.pc-xr-sc strong { font-size: 17px; color: var(--a-ink); }
.pc-xr-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--a-danger); }
.pc-xr-dot.off { background: transparent; }
.pc-xr-more { margin-top: 6px; }
.pc-xr-all .pc-all-nm { flex: none; max-width: 6em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-xr-all .pc-xr-nm { font-weight: 600; font-size: 14px; }
/* 리포트 시트 = js/examreport2117.js 의 .er-view(전체 화면) — 색 토큰 --h-* 를 학원 팔레트(위 :root)로 */
.xr-sheet { --h-bg: #f6f3ee; --h-ink: var(--a-ink); --h-card: var(--a-card); --h-line: var(--a-border); --h-line-soft: var(--a-line); --h-t3: var(--a-sub); --h-t4: var(--a-muted); --h-gold: var(--a-gold-2); --h-navy: var(--a-ink); --h-shadow: var(--a-shadow); }
.xr-sheet .er-empty .sub { display: inline-block; margin-top: 6px; }

/* 시험 리포트 알림(푸시, 설계서 §11.3) — 설정 시트 줄 · 홈 안내 띠 */
.pc-push { padding: 12px 4px 14px; border-bottom: 1px solid var(--a-line); }
.pc-push-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pc-push-t { font-size: 17px; }
.pc-push-n { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--a-sub); }
.pc-push-btn { margin-top: 10px; }
.pc-push-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }   /* 앱 안 화면 — [크롬으로 열기] [주소 복사] */
.pc-push-acts .pc-push-btn { flex: 1 1 140px; width: auto; margin-top: 0; }
.pc-pushband { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; }
.pc-pushband-t { flex: 1; min-width: 0; margin: 0; font-size: 14px; line-height: 1.45; }
.pc-pushband-go { flex: none; min-height: 44px; padding: 0 14px; font: inherit; font-size: 14px; font-weight: 700; color: #241a04; background: linear-gradient(#f0c14b, #d99e1f); border: 1px solid var(--a-gold-2); border-radius: 999px; cursor: pointer; }
.pc-pushband-x { flex: none; width: 44px; min-height: 44px; font: inherit; font-size: 22px; line-height: 1; color: var(--a-sub); background: none; border: 0; cursor: pointer; }
.pc-pushband-in { flex-wrap: wrap; align-items: flex-start; padding-bottom: 12px; }   /* 앱 안 화면 안내 — 글 | × / [크롬으로 열기] */
.pc-pushband-in .pc-pushband-t { flex-basis: calc(100% - 60px); padding-top: 4px; }

/* 결석·지각 알리기 · 자동 질문(2026-10-13, 설계서 §12) — 금색 = 예정 */
.pc-plan-btn { margin: 0 0 10px; }
.pc-plan-now { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding: 6px 8px 6px 12px; border-radius: 12px; background: #faf3df; border: 1px solid #ecdca6; color: #7a5a00; }
.pc-plan-t { min-width: 0; font-size: 15px; font-weight: 700; }
.pc-plan-x { flex: none; min-height: 44px; padding: 0 16px; font: inherit; font-size: 14px; font-weight: 700; color: #7a5a00; background: var(--a-card); border: 1px solid #ecdca6; border-radius: 999px; cursor: pointer; }
.pc-plan-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.pc-plan-row .pc-plan-x { margin-left: auto; }
.pc-plan-allcard { padding-bottom: 6px; }
.day.plan { background: #faf3df; border-color: #ecdca6; }
.day.plan .m { color: #7a5a00; font-weight: 700; white-space: normal; text-align: center; line-height: 1.2; }
.pl-sheet .ch { margin-bottom: 12px; }
.pc-pl-kids { display: flex; gap: 8px; margin-bottom: 12px; overflow-x: auto; }
.pc-pl-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pc-pl-opt { font: inherit; font-size: 16px; min-height: 52px; padding: 8px 10px; border-radius: 13px; border: 1px solid var(--a-border); background: var(--a-card); color: var(--a-ink); cursor: pointer; }
.pc-pl-opt.on { background: var(--a-ink); border-color: var(--a-ink); color: #fff; font-weight: 700; }
.pc-pl-opt:disabled { opacity: .4; cursor: default; }
.pc-pl-note { margin: 8px 0 0; font-size: 13px; color: var(--a-sub); }
.pc-pl-note.pv { text-align: center; font-weight: 700; color: #7a5a00; }
.pc-pl-date { display: block; margin-top: 10px; font-size: 14px; color: var(--a-sub); }
.pc-pl-date input { display: block; width: 100%; margin-top: 4px; font: inherit; font-size: 16px; padding: 11px 12px; border: 1px solid var(--a-border); border-radius: 13px; background: #fff; color: var(--a-ink); }
.pc-pl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-pl-chip { font: inherit; font-size: 14px; min-height: 44px; padding: 6px 16px; border-radius: 999px; border: 1px solid var(--a-border); background: var(--a-card); color: var(--a-sub); cursor: pointer; }
.pc-pl-chip.on { background: #faf3df; border-color: var(--a-gold-2); color: #7a5a00; font-weight: 700; }
.pc-pl-done { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 4px 0 8px; padding: 18px 14px; border-radius: 14px; background: #e6f2e8; color: var(--pc-green); text-align: center; }
.pc-pl-done.off { background: var(--a-line); color: var(--a-sub); }
.pc-pl-done-t { font-size: 17px; }
.pc-ask { border-color: #ecdca6; scroll-margin-top: 70px; }
.pc-ask:focus { outline: none; }
.pc-ask-q { margin: 0 0 6px; font-size: 17px; font-weight: 700; line-height: 1.5; }
.pc-ask-b { display: grid; gap: 8px; }
.pc-ask-b .btn { margin: 0; }
.pc-ask-done { margin: 0; font-size: 16px; font-weight: 700; color: var(--pc-green); }

/* 대화(2026-10-13, 설계서 §13) — 학부모 오른쪽 금색 · 선생님 왼쪽 흰색 · 입력창은 탭바 위에 붙는다. 글씨는 모두 12px 이상 */
.tab-badge { position: absolute; top: 6px; left: calc(50% + 10px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--a-danger); color: #fff; font-size: 12px; font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.ch-wrap { display: flex; flex-direction: column; min-height: calc(100svh - 190px); }
.ch-head { padding: 2px 2px 0; }
.ch-to { display: block; font-size: 17px; font-weight: 700; line-height: 1.4; }
.ch-note { margin: 2px 2px 10px; font-size: 13px; color: var(--a-sub); }
.ch-list { flex: 1; display: flex; flex-direction: column; gap: 10px; padding-bottom: 12px; }
.ch-empty { margin: auto; padding: 24px 12px; text-align: center; font-size: 14px; line-height: 1.6; color: var(--a-sub); }
.ch-empty p { margin: 0 0 8px; }
.ch-more { align-self: center; font: inherit; font-size: 14px; min-height: 44px; padding: 6px 18px; border-radius: 999px; border: 1px solid var(--a-border); background: var(--a-card); color: var(--a-sub); cursor: pointer; }
.ch-day { text-align: center; margin: 4px 0 -2px; }
.ch-day span { display: inline-block; padding: 2px 12px; border-radius: 999px; background: rgba(24, 35, 63, .08); font-size: 12px; color: var(--a-sub); }
.ch-m { display: flex; flex-direction: column; max-width: 84%; }
.ch-teacher { align-self: flex-start; align-items: flex-start; }
.ch-parent { align-self: flex-end; align-items: flex-end; }
.ch-meta { display: flex; gap: 6px; align-items: baseline; margin: 0 4px 2px; font-size: 12px; color: var(--a-sub); }
.ch-nm { font-weight: 700; }
.ch-b { padding: 9px 13px; border-radius: 16px; font-size: 15px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
.ch-teacher .ch-b { background: #fff; border: 1px solid var(--a-border); border-top-left-radius: 4px; }
.ch-parent .ch-b { background: #f6e4ae; border: 1px solid #e2c57a; border-top-right-radius: 4px; color: #241a04; }
.ch-m.sending .ch-b { opacity: .6; }
.ch-m.failed .ch-b { border-color: var(--a-danger); }
.ch-fail { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 8px; margin-top: 4px; font-size: 13px; color: var(--a-danger); }
.ch-fb { font: inherit; font-size: 14px; font-weight: 700; min-height: 44px; padding: 4px 14px; border-radius: 999px; border: 1px solid var(--a-danger); background: var(--a-card); color: var(--a-danger); cursor: pointer; }
.ch-fb.sub, .ch-empty .ch-fb { border-color: var(--a-border); color: var(--a-sub); }
.ch-form { position: sticky; bottom: calc(64px + env(safe-area-inset-bottom)); display: flex; align-items: flex-end; gap: 8px; padding: 8px; border: 1px solid var(--a-border); border-radius: 18px; background: var(--a-card); box-shadow: var(--a-shadow); }
.ch-ta { flex: 1; min-width: 0; display: block; font: inherit; font-size: 16px; line-height: 1.45; min-height: 44px; max-height: 132px; padding: 9px 12px; border: 1px solid var(--a-border); border-radius: 14px; background: #fff; color: var(--a-ink); resize: none; }
.ch-ta:disabled { background: var(--a-line); }
.ch-ta::placeholder { color: var(--a-sub); }
.ch-send { flex: none; font: inherit; font-size: 15px; font-weight: 700; min-height: 44px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--a-gold-2); background: linear-gradient(#f0c14b, #d99e1f); color: #241a04; cursor: pointer; }
.ch-send:disabled { opacity: .5; cursor: default; }
.ch-title { padding: 22px 18px 18px; text-align: center; }
.ch-title-q { margin: 0 0 8px; font-size: 20px; line-height: 1.4; }
.ch-title-s { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--a-sub); }
.ch-title-b { display: grid; gap: 8px; }
.ch-title-opt { font: inherit; font-size: 17px; font-weight: 700; min-height: 52px; padding: 8px 12px; border-radius: 13px; border: 1px solid var(--a-gold-2); background: linear-gradient(#f0c14b, #d99e1f); color: #241a04; cursor: pointer; }
.ch-title-opt:disabled { opacity: .5; cursor: default; }

/* 오늘 엄마랑 3문제(2026-10-13, 설계서 §14) — 홈 카드 · 「전체」 줄 · 시트(문제 하나씩) */
.pc-rcpt { margin-left: 8px; font-size: 13px; font-weight: 600; color: var(--a-ink); text-decoration: underline; }
.pc-rcpt.off { color: var(--a-sub); text-decoration: none; font-weight: 500; }
.pc-xp-main { margin: 0; font-size: 15px; line-height: 1.55; word-break: keep-all; }
.pc-xp-sub { margin: 6px 0 0; font-size: 13px; color: var(--a-sub); }
/* 시험 대비 하루 목표 3일 바(2026-10-20, 설계서 §15.5) — 앱 전용 바(두께 30px · 안 왼쪽 일 숫자 · 안 오른쪽 「푼/목표 · %」). 숫자는 판 없이 남색 굵은 글자 + 흰 테두리 text-shadow, 빈 길은 연회색. 글씨 12px 이상 */
:root { --pc-bar-ink: #18233f; --pc-bar-halo: 0 0 1px #fff, 0 0 2px #fff, 0 0 3px rgba(255, 255, 255, .95), 0 0 5px rgba(255, 255, 255, .7); --pc-track: #ece6dc; --pc-track-edge: #e2d9c8; }
#xp-card { scroll-margin-top: 72px; }   /* 띠를 눌러 이동할 때 고정 상단바 밑으로 안 가려지게 */
.pc-xp-rows { display: grid; gap: 8px; }
.pc-xp-bar { position: relative; height: 30px; border-radius: 9px; overflow: hidden; display: flex; background: var(--pc-track); box-shadow: inset 0 0 0 1px var(--pc-track-edge); }
.pc-xp-bar > i { display: block; flex: none; height: 100%; box-shadow: inset -1px 0 0 rgba(255, 255, 255, .6); }
.pc-xp-bar > i:last-of-type { box-shadow: none; }
.pc-xp-in { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 10px; pointer-events: none; }
.pc-xp-in span { color: var(--pc-bar-ink); font-size: 14px; font-weight: 800; line-height: 30px; text-shadow: var(--pc-bar-halo); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-xp-in .pc-xp-d { min-width: 22px; font-size: 15px; }
.pc-xp-bks { display: grid; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--a-line); }
.pc-xp-bk { display: grid; grid-template-columns: 44px minmax(0, 1fr) 108px; gap: 8px; align-items: center; font-size: 12px; }
.pc-xp-bn { white-space: nowrap; color: var(--a-sub); font-weight: 700; }
.pc-xp-bt { display: block; height: 8px; border-radius: 4px; overflow: hidden; background: #ece6dc; box-shadow: inset 0 0 0 1px var(--a-border); }
.pc-xp-bt i { display: block; height: 100%; }
.pc-xp-bp { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--a-sub); }
.pc-xp-ph { margin: 12px 0 0; font-size: 14px; font-weight: 700; color: var(--a-sub); }
.pc-xp-auto { margin: 4px 0 0; font-size: 13px; font-weight: 700; color: var(--a-ink); font-variant-numeric: tabular-nums; }
.pc-nudge { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; margin: 0 0 10px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--a-danger); background: var(--a-danger); color: #fff; font: inherit; font-size: 15px; font-weight: 700; line-height: 1.4; text-align: left; cursor: pointer; }
.pc-nudge:focus-visible { outline: 2px solid var(--a-ink); outline-offset: 2px; }
.pc-nudge-t { flex: 1; min-width: 0; }
.pc-nudge-ar { flex: none; font-style: normal; font-size: 18px; line-height: 1; }
.pc-nudge-done { margin: 0 0 10px; padding: 6px 14px; border-radius: 999px; background: #e6f2e8; color: var(--pc-green); font-size: 13px; font-weight: 700; text-align: center; }
.pc-xp-all { display: block; width: 100%; margin: 0; padding: 8px 0; font: inherit; color: inherit; text-align: left; background: none; border: 0; cursor: pointer; }
.pc-xp-all + .pc-xp-all { border-top: 1px solid var(--a-line); }
.pc-xp-all:focus-visible { outline: 2px solid var(--a-ink); outline-offset: 2px; border-radius: 8px; }
.pc-xp-al1 { display: grid; grid-template-columns: auto 5em minmax(0, 1fr); gap: 8px; align-items: center; }
.pc-xp-al1 .pc-all-nm { max-width: 5em; }
.pc-xp-al2 { display: block; margin-top: 4px; font-size: 13px; font-weight: 700; line-height: 1.4; }
.pc-xp-al2.bad { color: var(--a-danger); }
.pc-xp-al2.ok { color: var(--pc-green); }
.pc-mom { padding: 6px 12px; }
.pc-mom-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; margin: 0; padding: 6px 0; font: inherit; color: inherit; text-align: left; background: none; border: 0; cursor: pointer; }
.pc-mom-row:focus-visible { outline: 2px solid var(--a-ink); outline-offset: 2px; border-radius: 8px; }
.pc-mom-pips { flex: none; display: flex; gap: 5px; }
.pc-mom-pips i, .pc-mom-dots i { display: block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--a-gold-2); background: var(--a-card); }
.pc-mom-pips i.on { background: var(--pc-green); border-color: var(--pc-green); }
.pc-mom-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pc-mom-t { font-size: 16px; }
.pc-mom-s { font-size: 14px; color: var(--a-sub); }
.pc-mom-tg { display: block; font-size: 13px; font-weight: 500; color: var(--a-sub); }   /* 함께한 날(2026-10-24) — 카드·「전체」 줄 둘째 줄 */
.pc-mom.done { background: #f2faf4; border-color: #bfe0c8; }
.pc-mom.done .pc-mom-t { color: var(--pc-green); }
.pc-mom-all.done .pc-xr-nm { color: var(--pc-green); }
.mom-panel { max-height: 92svh; }
.pc-mom-kid { margin: -4px 0 6px; }
.pc-mom-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.pc-mom-pg { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pc-mom-pg b { font-size: 18px; }
.pc-mom-dots { display: flex; gap: 6px; }
.pc-mom-dots i { width: 10px; height: 10px; border-width: 1.5px; }
.pc-mom-dots i.cur { background: var(--a-ink); border-color: var(--a-ink); }
.pc-mom-dots i[data-d] { border-color: var(--pc-green); }
.pc-mom-dots i[data-d].cur { background: var(--pc-green); }
.pc-mom-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 8px; }
.pc-mom-lb { font-size: 15px; font-weight: 700; min-width: 0; }
.pc-mom-fig { min-height: 96px; border: 1px solid var(--a-border); border-radius: 12px; background: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.pc-mom-fig img, .pc-mom-sol img { display: block; width: 100%; height: auto; }
.pc-mom-fig.dk, .pc-mom-sol.dk { background: #000; border-color: #000; }
.pc-mom-fig.lt { background: #fff; }
.pc-mom-fig.html { display: block; }
.pc-mom-fig .bq, .pc-mom-sol .bq { color: #e9eef5; font-size: 16px; line-height: 1.7; padding: 14px 16px; }
.pc-mom-fig.lt .bq, .pc-mom-sol.lt .bq { color: #18233f; }
.pc-mom-fig .bq p, .pc-mom-sol .bq p { margin: 6px 0; }
.pc-mom-fig .bq b, .pc-mom-sol.dk .bq b { color: #fff; }
.pc-mom-fig.lt .bq b, .pc-mom-sol.lt .bq b { color: inherit; }
.pc-mom-fig svg, .pc-mom-sol svg { max-width: 100%; height: auto; }
.pc-mom-fig .pc-mom-ch { padding-top: 0; }
.pc-mom-fig .pc-mom-ch div { margin: 4px 0; }
.pc-mom-ld { padding: 14px; font-size: 14px; color: var(--a-sub); }
.pc-mom-fig .pc-mom-ld { color: var(--a-sub); }
.pc-mom-ptbox { margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: #faf3df; border: 1px solid #ecdca6; color: #7a5a00; }
.pc-mom-ptbox .pc-mom-ptt { display: block; font-size: 14px; }
.pc-mom-pp { margin: 6px 0 0; font-size: 16px; font-weight: 700; color: var(--a-ink); }
.pc-mom-ask { margin: 8px 0 0; font-size: 15px; color: var(--a-ink); }
.pc-mom-ai { margin: 8px 0 0; font-size: 12px; color: var(--a-sub); }
.pc-mom-ptbox.load .pc-mom-ld { display: block; padding: 6px 0 0; font-size: 12px; color: #7a5a00; }
.pc-mom-sk { display: block; height: 14px; margin-top: 8px; border-radius: 7px; background: linear-gradient(90deg, #f0e3b6, #f8efd0, #f0e3b6); background-size: 200% 100%; animation: mom-sk 1.2s linear infinite; }
.pc-mom-sk.s { width: 60%; }
@keyframes mom-sk { from { background-position: 200% 0; } to { background-position: 0 0; } }
.pc-mom-solb { margin-top: 10px; }
.pc-mom-sol { margin-top: 8px; border: 1px solid var(--a-border); border-radius: 12px; background: #fff; overflow-x: auto; }
.pc-mom-sol[hidden] { display: none; }
.pc-mom-sol.dk { border-color: #000; }
.pc-mom-ok.done { background: #e6f2e8; border-color: #bfe0c8; color: var(--pc-green); opacity: 1; }
.pc-mom-body .katex { font-size: 1.05em; }
.pc-mom-body .katex-display { overflow-x: auto; overflow-y: hidden; }

/* 링크 모양 큰 버튼(join.html 막다른 길 · 설치 안내) + 가입 막다른 길 문구 */
a.btn { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.dead-t { font-size: 20px; font-weight: 700; margin: 2px 0 8px; }
.dead-m { font-size: 16px; line-height: 1.6; color: var(--a-sub); margin: 0 0 8px; }

/* 설치 도우미(p/install.js, 2026-10-17) — 바탕화면 아이콘 안내창 · 카톡 탈출창 · 작은 띠. 학부모 연령대에 맞게 글씨·버튼 크게 */
.inst { position: fixed; inset: 0; z-index: 75; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(24, 35, 63, .55); overflow-y: auto; }
.inst.inst-esc { z-index: 90; background: rgba(24, 35, 63, .8); }
.inst-card { width: 100%; max-width: 420px; max-height: 100%; overflow-y: auto; background: var(--a-card); border: 1px solid var(--a-border); border-radius: 16px; padding: 22px 20px 18px; box-shadow: 0 12px 32px rgba(24, 35, 63, .25); }
.inst-t { font-size: 22px; margin: 0 0 10px; text-align: center; }
.inst-lead { font-size: 17px; line-height: 1.6; margin: 0 0 14px; }
.inst-steps { list-style: none; margin: 0 0 14px; padding: 0; }
.inst-steps li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--a-line); font-size: 18px; line-height: 1.5; }
.inst-steps li:last-child { border-bottom: 0; }
.inst-n { flex: none; width: 30px; height: 30px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; background: var(--a-ink); color: var(--a-gold); }
.inst-note { font-size: 15px; line-height: 1.6; color: var(--a-sub); background: #faf5e8; border: 1px solid var(--a-border); border-radius: 13px; padding: 10px 12px; margin: 0 0 12px; }
.inst-go { min-height: 56px; font-size: 19px; margin-top: 4px; }
.inst-go + .inst-note { margin-top: 12px; }
.inst-card .btn-sub { min-height: 50px; font-size: 16px; }
.inst-band { display: flex; align-items: center; gap: 8px; max-width: 620px; margin: 8px auto 0; padding: 4px 6px 4px 14px; background: #faf5e8; border: 1px solid var(--a-border); border-radius: 13px; font-size: 15px; }
.inst-band-t { flex: 1; padding: 6px 0; line-height: 1.4; }
.inst-band-b { flex: none; font: inherit; font-size: 15px; font-weight: 700; min-height: 44px; padding: 6px 16px; border-radius: 999px; border: 1px solid var(--a-gold-2); background: linear-gradient(#f0c14b, #d99e1f); color: #241a04; cursor: pointer; }
.inst-esc-bar { position: sticky; top: 0; z-index: 80; display: flex; align-items: flex-start; gap: 4px; padding: 10px 6px 10px 14px; padding-top: calc(10px + env(safe-area-inset-top)); background: #faf5e8; border-bottom: 1px solid var(--a-border); font-size: 15px; line-height: 1.5; }
.inst-esc-t { flex: 1; }
.inst-esc-x { flex: none; font: inherit; font-size: 22px; line-height: 1; width: 44px; height: 44px; border: 0; background: none; color: var(--a-sub); cursor: pointer; }