/* ─────────────────────────────────────────────────────────────
   system.css · 모든 페이지에서 맨 마지막에 불러오는 공통 규칙 (2026-11-10)
   페이지마다 따로 정한 스타일을 하나의 기준으로 맞춘다.

   색 지도 (색은 뜻이 있을 때만 쓴다)
   --forest  브랜드, 정규 프로그램, 행동 버튼
   --read    독해          --olive  어법          --slate  구문
   --voca    단어장(중립)  --nae    내신 프로그램
   그 밖의 면은 흰색, sage, cream 세 가지 배경으로만 나눈다.

   카드 규칙
   흰 바탕 위 카드 = 1px 선, 그림자 없음 / 색 바탕 위 카드 = 흰 면, 선과 그림자 없음
   그림자는 실물(교재 지면, 휴대폰 화면, 분석서)에만 쓴다.
   진한 카드는 흐름 안의 기준점(예: 내신의 '학교 시험')에만 쓴다.

   제목 세 단계: 큰 소제목 24px / 카드 제목 19px / 목록 제목 17px
   번호 한 가지: Pretendard 13px 굵게, 금색 글자, "01" 형식
   ───────────────────────────────────────────────────────────── */
:root { --read: #2c5240; --voca: #7a7163; --nae-t: #6b4d1c; }

/* ── 세로 리듬: 내용에 따라 세 가지 간격 ── */
.sec.tight { padding: 72px 0; }
.sec.loose { padding: 136px 0; }
@media (max-width: 860px) { .sec.tight { padding: 52px 0; } .sec.loose { padding: 88px 0; } }

/* ── 섹션 머리: 위아래로 쌓기(기본)와 좌우로 나누기 ── */
.sec-head.split { display: grid; grid-template-columns: 5fr 6fr; gap: 24px 64px; align-items: end; max-width: none; }
.sec-head.split .t-lead { margin-top: 0; max-width: 36em; }
@media (max-width: 860px) { .sec-head.split { grid-template-columns: 1fr; } }

/* ── 제목 세 단계 ── */
body .ctpanel h3, body .cyc h3, body .chg h3, body .lvpanel h3, body .month-detail h3,
body .lp > h3, body .subj2 h3, body .pg2 h3, body .spread .h-md, body h3.h-md { font-size: 24px; font-weight: 700; letter-spacing: -.03em; }
body .subjects .subj h3, body .pair h3, body .care-steps h3, body .hq h3, body .seminar h3,
body .news .lead-post h3, body .dtime b { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
body .set h3, body .belief h3, body .evout h3, body .talks h3, body .dsteps b, body .exam-pts b { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
@media (max-width: 860px) {
  body .ctpanel h3, body .cyc h3, body .chg h3, body .lvpanel h3, body .month-detail h3,
  body .lp > h3, body .subj2 h3, body .pg2 h3, body .spread .h-md, body h3.h-md { font-size: 21px; }
}

/* ── 번호 한 가지 ── */
body .no, body .dsteps .no, body .dring li .no { font-family: "Pretendard", sans-serif; font-size: 13px; font-weight: 800; color: var(--gold-t); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
body .flow li::before, body .exam-pts li::before, body .steps .n { font-family: "Pretendard", sans-serif; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ── 카드 두 종류 ── */
body .sec:not(.sage):not(.cream) :is(.month-detail, .ctbox, .cyc, .dsteps > li:not(.mark), .board, .subjects .subj, .dtime li) {
  background: #fff; border: 1px solid var(--line); box-shadow: none;
}
body :is(.sec.sage, .sec.cream) :is(.lvbox, .lp, .chg article, .talks article, .evout article, .dtime li, .subj2 article, .pair article, .sres, .schoolcard, .comm) {
  background: #fff; border: 0; box-shadow: none;
}
body .board { box-shadow: none; border: 1px solid var(--line); }
/* 기준이 없던 진한 카드는 보통 카드로 */
body .evout .on, body .talks article:first-child, body .dtime li.on { background: #fff; color: var(--ink); }
body .evout .on p, body .talks article:first-child p, body .dtime li.on p { color: var(--sub); }
body .evout .on .dic, body .dtime li.on .dic { background: var(--sage); color: var(--forest); }
body .dtime li.on small { color: var(--gold-t); }

/* ── 데이터는 카드 없이 바탕 위에 ── */
body .rmgrid { border: 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); border-radius: 0; padding: 16px 0 18px; }

/* ── 색 지도 적용 ── */
body .subj2 .c1 .top { background: var(--read); }
body .shelf i.r { background: var(--read); }
body .shelf i.v { background: var(--voca); }
body .vacbar { background: var(--sage); }
body .vacbar:hover { background: var(--sage-d); }
body .vacbar b { color: var(--forest); }
body .vacbar i { background: var(--forest); }
body .ops > div, body .ops .dk { background: var(--nae-l); }
body .ops b, body .ops .dk b { color: var(--nae-t); }
body .comm .st .dic { background: #4b5650; }
body .comm .pa .dic { background: var(--voca); }
body .comm .flows p.fr span { background: var(--sage); color: var(--forest); }
body .nextband.nae { background: var(--nae); }
body .nextband.nae:hover { background: #73541f; }

/* ── 대비 4.5:1 맞춤 ── */
body .subj2 .en { color: rgba(255,255,255,.88); }
body .subj2 .cnt { color: #fff; }
body .rmgrid .dec { color: var(--nae-t); }

/* ── 작은 글자는 12px 아래로 내리지 않음 ── */
@media (max-width: 860px) {
  body .bars7 .col span { font-size: 12px; letter-spacing: -.03em; }
  body .lvnames small, body .bars7 .tag { font-size: 12px; }
}
body .mphone .msg small, body .report .rp-tbl, body .rp-band small, body .rp-contact { font-size: max(12px, 1em); }

/* ── 터치 영역 44px ── */
.foot .fl a { min-height: 44px; display: inline-flex; align-items: center; }
body .abpick button { min-height: 44px; }

/* ── 모바일 연간표: 밀 수 있다는 신호 ── */
@media (max-width: 860px) {
  body .rm { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
}

/* ── 입체 책: 실제 표지 + 책등 + 종이 두께 (메인, 하위 페이지 공통) ── */
.b3 { --w: 170px; --d: 22px; position: relative; width: var(--w); aspect-ratio: 612 / 859; transform-style: preserve-3d; margin: 0; }
.b3 img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 2px 5px 5px 2px; transform: translateZ(calc(var(--d) / 2)); box-shadow: inset 3px 0 6px rgba(0,0,0,.12), 0 30px 50px -10px rgba(0,0,0,.55); backface-visibility: hidden; }
.b3 .sp { position: absolute; top: 0; left: 0; width: var(--d); height: 100%; background: linear-gradient(90deg, rgba(0,0,0,.25), rgba(255,255,255,.08) 40%, rgba(0,0,0,.15)), var(--sp); transform-origin: left; transform: rotateY(-90deg) translateX(calc(var(--d) / -2)); }
.b3 .pp { position: absolute; top: 3px; right: 0; width: var(--d); height: calc(100% - 6px); background: repeating-linear-gradient(90deg, #f4f0e6 0 2px, #e2dccd 2px 3px); transform-origin: right; transform: rotateY(90deg) translateX(calc(var(--d) / 2)); }

/* ── 하위 페이지 머리: 사진 + 진한 초록, 오른쪽에 실물 ── */
.subhead.photo { background: #10231a; color: #fff; padding: 84px 0 96px; }
.subhead.photo::before { content: ""; position: absolute; inset: 0; background: var(--ph) center / cover no-repeat; }
.subhead.photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16,35,26,.96) 0%, rgba(16,35,26,.9) 40%, rgba(16,35,26,.55) 70%, rgba(16,35,26,.35) 100%); }
.subhead.photo > * { position: relative; z-index: 1; }
.subhead.photo .crumb, .subhead.photo .crumb a { color: #b9c8bd; }
.subhead.photo .t-lead { color: #d5dfd8; }
.subhead.photo .h-xl { color: #fff; }
.subhead.photo .btn-forest { background: var(--gold-l); color: var(--forest-d); }
.subhead.photo .wrap { max-width: var(--wrap); }
.subhead.photo .wrap > :not(.adm) { max-width: 600px; }
.subhead .art2 { position: absolute; z-index: 1; right: max(40px, calc((100% - var(--wrap)) / 2 + 40px)); top: 50%; transform: translateY(-50%); width: 440px; height: 300px; perspective: 1200px; transform-style: preserve-3d; }
.art2 .b3 { position: absolute; }
.art2 .b3:nth-child(1) { --w: 150px; left: 0; top: 50px; transform: rotateY(26deg) rotateZ(-4deg); }
.art2 .b3:nth-child(2) { --w: 160px; left: 26%; top: 14px; transform: rotateY(20deg) rotateZ(-1deg); }
.art2 .b3:nth-child(3) { --w: 170px; left: 54%; top: 34px; transform: rotateY(14deg) rotateZ(3deg); }
.art2 .paper { position: absolute; width: 230px; border-radius: 4px; box-shadow: 0 30px 50px -10px rgba(0,0,0,.6); background: #fff; }
.art2 .paper:nth-child(1) { left: 30px; top: 20px; transform: rotate(-6deg); }
.art2 .paper:nth-child(2) { left: 190px; top: 0; transform: rotate(4deg); }
.art2 .phone { position: absolute; height: 300px; border-radius: 22px; box-shadow: 0 30px 50px -10px rgba(0,0,0,.6); }
.art2 .phone:nth-child(1) { left: 40px; top: 20px; transform: rotate(-6deg); }
.art2 .phone:nth-child(2) { left: 220px; top: -10px; transform: rotate(5deg); height: 320px; }
.subhead.photo .adm .dsteps > li { background: rgba(255,255,255,.96); border-color: transparent; }
.subhead.photo .adm .dsteps > li { color: var(--ink); } .subhead.photo .adm .dsteps p { color: var(--sub); }
@media (max-width: 1080px) { .subhead .art2 { display: none; } }
@media (max-width: 860px) { .subhead.photo { padding: 48px 0 56px; } }

/* ── 휴대폰 화면: 투명 PNG라 상자 그림자 대신 모양을 따라가는 그림자 ── */
img[src$="app-sms.png"], img[src$="app-question.png"] { background: none !important; box-shadow: none !important; border-radius: 0 !important; filter: drop-shadow(0 22px 28px rgba(20, 40, 29, .28)); }