/* 누비 9급 층 (2026-11-06 2판) — 리트 누비 CSS(style·editorial*·atrium) 위에 얹는다.
   색·글꼴·짜임은 리트 누비 그대로(아이보리·딥그린·금색, Noto Serif KR + Pretendard). 여기서는 두 가지만 한다.
   ① 고전 장식을 공무원 장식으로 바꾼다
        로제트 타일         → 무궁화 벽지 타일 (assets/art/p9_mugung_bg*.webp, 2026-11-07)
        조각상 줄           → 공무원이 일하는 장면 다섯 (assets/art/work/*)
        책장·명화           → 과목별 현대 사진 (과목 카드·과목 표지, subj/*)
        사진은 모두 위키미디어 커먼즈의 공공누리 제1유형·CC0·CC BY 자료를 리트 누비와 같은 점묘로 찍었다 (tools/fetch_art.py → make_art.py)
        라틴 표기(Liber)    → 제1과목·제1편 같은 공문서식 표기 (p9.js)
   ② 리트 누비에 없는 9급 교재 부품(이 절에서 가져갈 것·조문·잠깐 확인·헷갈리는 짝 등 상자, 영어 예문, 확인 문제·한 줄 과제 칸)을
      리트 누비 색 토큰(--a-*)으로 그린다.
   규칙: 카드·상자에 왼쪽 테두리만 주지 않는다. 네 면 테두리나 윗선으로 한다. */

/* ── ① 바탕 무늬: 로제트 → 무궁화 벽지 (리트 누비 atrium.css 의 같은 규칙을 덮는다) ──
   2026-11-07 사용자 결정. 국립산림과학원 무궁화 품종 DB '백단심' 사진 다섯 장에서 꽃·봉오리·잎을 따
   빅토리아 벽지처럼 크기·각도를 섞어 흩뿌린 1800px 타일(화면 900px, 11-07 1.5배로 키움). 색은 로제트 실측 세이지·아이보리.
   만드는 법: tools/make_mugung_bg.py. 출처: 산림청 국립산림과학원 산림과학지식서비스(출처 표시 시 자유 이용) */
html[data-variant="atrium"] body {
  background-image:
    radial-gradient(140% 100% at 50% 45%, transparent 60%, rgba(70,60,30,.09) 100%),
    linear-gradient(rgba(244,240,229,.15), rgba(244,240,229,.15)),
    url("../assets/art/p9_mugung_bg.webp") !important;
  background-size: auto, auto, 900px 900px !important;
}
html[data-variant="atrium"][data-theme="dark"] body {
  background-image:
    radial-gradient(140% 100% at 50% 45%, transparent 62%, rgba(0,0,0,.28) 100%),
    linear-gradient(rgba(18,17,15,.08), rgba(18,17,15,.08)),
    url("../assets/art/p9_mugung_bg_dark.webp") !important;
}
@media (prefers-color-scheme: dark) {
  html[data-variant="atrium"]:not([data-theme]) body {
    background-image:
      radial-gradient(140% 100% at 50% 45%, transparent 62%, rgba(0,0,0,.28) 100%),
      linear-gradient(rgba(18,17,15,.08), rgba(18,17,15,.08)),
      url("../assets/art/p9_mugung_bg_dark.webp") !important;
  }
}

/* 밝기에 따라 그림 둘 중 하나만 */
.p9-fig-art img.dark, .p9-cover img.dark { display: none; }
html[data-theme="dark"] .p9-fig-art img.light, html[data-theme="dark"] .p9-cover img.light { display: none; }
html[data-theme="dark"] .p9-fig-art img.dark, html[data-theme="dark"] .p9-cover img.dark { display: block; }


/* ── 조각상 줄 → 과목 그림 줄 ── */
.p9-figrow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; align-items: end; margin: 34px auto 6px; max-width: 1040px; }
.p9-fig { display: flex; flex-direction: column; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.p9-fig-art { display: block; width: 100%; max-width: 170px; aspect-ratio: 300 / 820; transition: transform .35s var(--a-slow, ease); }
.p9-fig-art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.p9-fig:hover .p9-fig-art { transform: translateY(-6px); }
.p9-fig .gtile { display: block; width: 100%; padding: 9px 6px; text-align: center; border-top: 1px solid var(--a-line-2); }
.p9-fig .gt-name { font-family: var(--a-serif); font-weight: 700; font-size: 15px; color: var(--a-deep); line-height: 1.35; }
.p9-fig .gt-pre { display: block; font-family: var(--ff-ui, "Pretendard Variable", sans-serif); font-weight: 600; font-size: 11.5px; color: var(--a-gold); letter-spacing: .04em; }
@media (max-width: 700px) {
  .p9-figrow { gap: 4px; margin-top: 22px; }
  .p9-fig .gt-name { font-size: 12.5px; }
  .p9-fig .gt-pre { font-size: 10.5px; }
}

/* ── 책장 → 조선 회화 (과목 카드 왼쪽) ── */
.p9-paint { height: 220px; padding: 10px 6px 0; border-bottom: 2px solid var(--a-deep); }
.p9-paint img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; display: block; }
.p9-paint img.dark { display: none; }
html[data-theme="dark"] .p9-paint img.light { display: none; }
html[data-theme="dark"] .p9-paint img.dark { display: block; }
.p9-parts { margin: 0; padding-left: 0; list-style: none; font-size: 14px; }
.p9-parts li { padding: 4px 0; border-top: 1px dotted var(--a-line-2); }
.p9-parts li:first-child { border-top: 0; }
.p9-parts b { color: var(--a-deep); margin-right: 4px; }
.p9-parts small { color: var(--a-ink-3); }

/* ── 과목 화면 표지: 명화 → 과목 그림 ── */
.at-book .cv .art.p9-cover { background: var(--a-sheet) !important; display: block; overflow: hidden; }
.at-book .cv .art.p9-cover img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; padding: 8px 6px 0; box-sizing: border-box; }
a.vol-cell { text-decoration: none; color: inherit; }

/* ── ② 책 읽기 본문 ── */
.p9-crumb { margin: 0 0 4px; font-size: 13px; color: var(--a-ink-3); font-family: "Pretendard Variable", sans-serif; }
.p9-body { font-size: var(--read-fs, 16.5px); }
.p9-body .para.ln { white-space: pre-line; }
.p9-body strong { color: var(--a-deep); }
.p9-body h4.p9-h3 { margin: 1.5em 0 .5em; font-family: var(--a-serif); font-size: 1.04em; color: var(--a-forest); }
.p9-body h5.p9-h4 { margin: 1.2em 0 .4em; font-size: .98em; color: var(--a-ink-2); }

.box { margin: 1.4em 0; border: 1px solid var(--a-line-2); border-radius: var(--a-r-card, 5px); background: var(--a-sheet); font-size: .92em; line-height: 1.75; }
.box-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 15px; border-bottom: 1px solid var(--a-line); }
.box-tag { display: inline-block; padding: 1px 8px; border-radius: 3px; font: 700 12px/1.6 "Pretendard Variable", sans-serif; letter-spacing: .02em; background: rgba(var(--a-deep-rgb), .08); color: var(--a-deep); white-space: nowrap; }
.box-title { font-weight: 700; color: var(--a-ink); }
.box-b { padding: 11px 15px; }
.box-b p { margin: 0 0 .45em; }
.box-b p:last-child { margin-bottom: 0; }
.box .wip { margin-left: auto; font: 600 12px "Pretendard Variable", sans-serif; color: var(--a-gold); }
.rows { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); }
.rows dt { padding: 6px 14px 6px 0; font-weight: 700; color: var(--a-forest); border-top: 1px dotted var(--a-line-2); max-width: 13em; }
.rows dd { margin: 0; padding: 6px 0; border-top: 1px dotted var(--a-line-2); overflow-wrap: anywhere; }
.rows dt:first-of-type, .rows dd:first-of-type { border-top: 0; }
.rows .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .rows { grid-template-columns: minmax(0, 1fr); } .rows dt { padding-bottom: 0; } .rows dd { border-top: 0; padding-top: 2px; } .rows dd.full { border-top: 1px dotted var(--a-line-2); } }
.en { font-family: "Cormorant Garamond", var(--a-serif); font-size: 1.1em; font-weight: 600; }
.ko-sub { color: var(--a-ink-2); }

/* 이 절에서 가져갈 것 — 리트 누비 '장 첫머리 길잡이' 자리. 딥그린 머리 */
.box.goal { border: 1px solid rgba(var(--a-deep-rgb), .35); }
.box.goal .box-h { background: var(--a-deep); border-bottom: 0; border-radius: 4px 4px 0 0; }
.box.goal .box-tag { background: transparent; color: var(--a-ivory); padding: 0; font-size: 13px; }
.box.goal ol { margin: 0; padding: 12px 16px 12px 2.3em; }
.box.goal li { margin: 0 0 .4em; }
.box.goal li::marker { color: var(--a-gold); font-weight: 700; }
html[data-theme="dark"] .box.goal .box-tag { color: #12110f; }
/* 외우기·정리 */
.box.memo { border-top: 3px solid var(--a-gold); }
.box.memo .box-tag { background: var(--a-gold-line); color: var(--a-gold); }
.box.sum { border: 1px solid rgba(var(--a-deep-rgb), .4); background: rgba(var(--a-deep-rgb), .03); }
/* 조문 — 법령집 */
.box.law { font-family: var(--a-serif); }
.box.law .box-h { font-family: "Pretendard Variable", sans-serif; }
.box.law .box-tag::before { content: "§ "; }
.box.law .art { display: block; margin: 0 0 .45em; }
.box.law .art b { color: var(--a-deep); margin-right: .45em; font-family: "Pretendard Variable", sans-serif; }
.box.src { font-family: var(--a-serif); background: var(--a-cream); }
/* 헷갈리는 짝·흔한 오해 */
.box.pair .box-tag { background: var(--a-gold-line); color: var(--a-gold); }
.box.myth .box-tag { background: rgba(160,60,40,.1); color: #9a3b26; }
.box.myth dt.no { color: #9a3b26; }
.box.myth dt.no::before { content: "✕ "; }
.box.myth dt.yes { color: var(--a-deep); }
.box.myth dt.yes::before { content: "✓ "; }
html[data-theme="dark"] .box.myth .box-tag, html[data-theme="dark"] .box.myth dt.no { color: #e09a85; }
/* 연결 */
.box.link { background: transparent; border-style: dashed; }
.box.link ul { margin: 0; padding: 0; list-style: none; }
.box.link li { padding: 2px 0 2px 1.2em; text-indent: -1.2em; color: var(--a-ink-2); }
.box.link li::before { content: "→ "; color: var(--a-gold); }
/* 표 */
.box.tbl .box-b { padding: 0; overflow-x: auto; }
.box.tbl table { width: 100%; border-collapse: collapse; }
.box.tbl th, .box.tbl td { padding: 8px 14px; border-top: 1px solid var(--a-line); text-align: left; vertical-align: top; }
.box.tbl th { width: 34%; background: rgba(var(--a-deep-rgb), .04); color: var(--a-forest); }
.box.tbl tr:first-child th, .box.tbl tr:first-child td { border-top: 0; }
/* 잠깐 확인 */
.box.check { border: 1px solid rgba(var(--a-deep-rgb), .45); }
.box.check .box-tag { background: var(--a-deep); color: var(--a-ivory); }
.check-q p { margin: 0 0 .4em; }
.check-a { margin-top: 10px; padding: 10px 12px; background: rgba(var(--a-deep-rgb), .06); border-radius: 4px; }
.check-a[hidden] { display: none; }
.check-btn { margin-top: 8px; padding: 5px 13px; border: 1px solid var(--a-line-3); border-radius: var(--a-r-cta, 5px); background: var(--a-sheet); color: var(--a-deep); font: 700 13px "Pretendard Variable", sans-serif; cursor: pointer; }
.check-btn:hover { background: rgba(var(--a-deep-rgb), .06); }
/* 심화 */
.box.deep { border-style: dashed; }
.box.deep > summary { list-style: none; cursor: pointer; }
.box.deep > summary::-webkit-details-marker { display: none; }
/* 그림·영상 들어갈 곳 */
.box.slot { border: 1.5px dashed var(--a-line-3); background: repeating-linear-gradient(45deg, transparent 0 10px, rgba(var(--a-deep-rgb), .025) 10px 20px), var(--a-sheet); }
.box.slot .box-h { border-bottom-style: dashed; }
.box.slot .box-tag { background: transparent; border: 1px solid var(--a-line-3); }
.box.slot .box-b { color: var(--a-ink-3); font-size: .95em; }
/* 영어 예문 */
.ex { margin: 1.1em 0; padding: 12px 16px; border: 1px solid var(--a-line); border-radius: 5px; background: var(--a-cream); font-size: .93em; line-height: 1.7; }
.ex .l { display: block; }
.ex .l.en { font-family: "Cormorant Garamond", var(--a-serif); font-size: 1.16em; font-weight: 600; color: var(--a-deep); }
.ex .l.ko { color: var(--a-ink-2); }
.ex .l.ar { color: var(--a-ink-3); font-size: .9em; margin-top: 4px; }

/* 절 끝: 확인 문제 칸 */
.p9-end-h { margin-top: 2.2em; }
.quiz-slot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px; border: 1.5px dashed var(--a-line-3); border-radius: 6px; color: var(--a-ink-3); }
.quiz-slot .q { padding: 12px 14px; border: 1px dashed var(--a-line-2); border-radius: 4px; background: var(--a-sheet); font-size: 14px; }
.quiz-slot .q b { display: block; color: var(--a-forest); margin-bottom: 6px; }
.quiz-slot .q i { display: block; height: 7px; margin: 7px 0; background: var(--a-line); border-radius: 2px; }
.quiz-slot p { grid-column: 1 / -1; margin: 0; font-size: 14px; }
@media (max-width: 560px) { .quiz-slot { grid-template-columns: 1fr; } }

/* 내 기록 */
.p9-me-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto 52px; align-items: center; gap: 14px; padding: 12px 4px; border-top: 1px solid var(--a-line); text-decoration: none; color: inherit; }
.p9-me-row:first-child { border-top: 0; }
.p9-me-row b { color: var(--a-deep); font-family: var(--a-serif); }
.p9-me-row .kv { text-align: right; }
.p9-me-bar { position: relative; height: 9px; background: rgba(var(--a-deep-rgb), .06); border-radius: 5px; overflow: hidden; }
.p9-me-bar .r { position: absolute; inset: 0 auto 0 0; background: repeating-linear-gradient(45deg, rgba(var(--a-deep-rgb), .16) 0 4px, transparent 4px 8px); }
.p9-me-bar .d { position: absolute; inset: 0 auto 0 0; background: var(--a-deep); }
@media (max-width: 600px) { .p9-me-row { grid-template-columns: 1fr auto; } .p9-me-bar { grid-column: 1 / -1; grid-row: 2; } }
.empty { padding: 60px 20px; text-align: center; color: var(--a-ink-3); }

/* 알림 */
.p9-toast { position: fixed; left: 50%; bottom: 28px; z-index: 120; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; padding: 11px 18px; border-radius: 10px; background: var(--a-deep); color: var(--a-ivory); font: 600 14.5px "Pretendard Variable", sans-serif; box-shadow: var(--a-sh-float); transition: .25s; }
.p9-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* 시험 드롭다운 단추 둘째 줄 — 리트 누비 atrium.css 는 '법학적성시험'을 CSS 로 박아 두었다 */
html[data-variant="atrium"] .topbar .exam-cur::after { content: "공무원 공채"; }
/* 단추 글자 '9급'·'일반행정' — 리트 누비는 'LEET' 라 라틴 글꼴(Cormorant)을 쓰는데, 이 글꼴은 숫자가 옛 모양이라 '9'가 줄 아래로 처졌다
   (2026-11-06 사용자). 우리말 명조로 바꾸고 숫자는 줄에 맞춘다 */
html[data-variant="atrium"] .topbar .exam-cur { font-family: var(--a-serif); font-variant-numeric: lining-nums; letter-spacing: .02em;
  font-size: 15px; padding-top: 9px; padding-bottom: 9px; line-height: 21px; }   /* 리트 누비 'LEET'(라틴 17px) 단추와 높이 41px·글자 무게를 맞춘다 — 한글 17px 은 크고 무거웠다 (2026-11-07 사용자) */

/* 라틴 머리글 → 9급 표기. 리트 누비 atrium.css 는 화면마다 라틴 이름표(NUBI · Liber, Ordo …)를 CSS 로 단다(고전 컨셉).
   9급은 공문서처럼 우리말 이름표로 바꾼다. 글꼴·크기는 리트 누비 그대로 둔다 */
html[data-variant="atrium"] body[data-route="course"] h1.page::before { content: "NUBI · 과목"; }
html[data-variant="atrium"] body[data-route="me"] h1.page::before { content: "NUBI · 기록"; }
html[data-variant="atrium"] body[data-route="pilot"] h1.page::before { content: "NUBI · 점검"; }
html[data-variant="atrium"] .vp-steps::before { content: "목차"; }
/* 표지 이름표의 '제1과목' — 라틴 글꼴(Cormorant)은 숫자 1을 점처럼 그려서 우리말 글꼴로 */
html[data-variant="atrium"] .at-book .lab small { font-family: var(--a-serif) !important; letter-spacing: .12em; }
html[data-variant="atrium"] .at-sfoot .sf-cap { font-family: var(--a-serif) !important; font-style: normal !important; letter-spacing: .12em; }

/* 직렬 드롭다운 — 시험 드롭다운과 같은 모양, 둘째 줄 글자만 '직렬' */
html[data-variant="atrium"] .topbar .p9-track-menu .exam-cur::after { content: "직렬"; }
html[data-variant="atrium"] .topbar > .p9-track-menu { margin-top: -4px; }
.p9-track-menu .exam-list button span:empty { display: none; }
/* 홈 머리의 직렬 한 줄 */
.p9-track-line { margin: 12px auto 0; text-align: center; font-size: 13.5px; color: var(--a-ink-2); font-family: "Pretendard Variable", sans-serif; }
.p9-track-line b { color: var(--a-deep); }
.p9-track-menu .exam-list b { white-space: nowrap; }



/* ── 과목 카드 책장 — 리트 누비 책장(.bs-*) 그대로. 책등이 <a> 라 밑줄·글자색만 걷는다 ── */
.p9-shelf a.bs-spine { text-decoration: none; color: inherit; }

/* ── 과목 화면 오른쪽 표지 — 지금 편 한 권 (딥그린 천 표지에 금박 글자) ── */
.at-book .cv.p9-partcv .art.p9-cover { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 18px 14px; text-align: center;
  background: var(--a-deep) !important; color: var(--a-ivory); box-shadow: inset 0 0 0 6px var(--a-deep), inset 0 0 0 7px rgba(201,168,98,.55); }
.p9-cv-n { font: 600 12px var(--a-serif); letter-spacing: .2em; color: var(--a-gold); }
.p9-cv-orn { font-size: 15px; color: var(--a-gold); line-height: 1; }
.p9-cv-t { font: 700 16px/1.45 var(--a-serif); word-break: keep-all; color: #f3eee1; }
html[data-theme="dark"] .at-book .cv.p9-partcv .art.p9-cover { background: #1d2b24 !important; }

/* ── 홈 과목 한 덩어리 (2026-11-07 사용자: 상자 다섯 겹이 따로 놀았다 → 판 하나) ──
   판 하나 안에: 과목 탭(밑줄 탭) → 과목 머리 → 편 카드 → 누른 편의 장 줄. 칸 나눔은 선으로만 한다 */
.p9-course { margin: 6px 0 14px; background: var(--a-sheet); border: 1px solid var(--a-line); border-radius: 14px; box-shadow: var(--a-sh-paper, 0 1px 2px rgba(0,0,0,.04)); overflow: hidden; }
/* 과목 탭 — 분절 단추 (2026-11-07 사용자: 밑줄 탭은 누를 수 있어 안 보이고, 카드 단추는 지저분했다)
   우묵한 알약 하나 안에 다섯 칸. 고른 칸만 딥그린으로 채워 튀어나오고, 나머지는 올리면 바탕이 깔린다 */
.p9-ctabs { padding: 16px 20px; border-bottom: 1px solid var(--a-line); }
.p9-ctabs-in { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 5px; border-radius: 999px;
  background: rgba(var(--a-deep-rgb), .07); box-shadow: inset 0 1px 3px rgba(0,40,24,.12); }
.p9-ct { padding: 11px 8px; border: 0; border-radius: 999px; background: none; cursor: pointer; white-space: nowrap;
  font: 700 15.5px var(--a-serif); color: var(--a-ink-2); transition: background .15s, color .15s; }
.p9-ct:hover { background: rgba(255,255,255,.75); color: var(--a-deep); }
.p9-ct:focus-visible { outline: 2px solid var(--a-gold); outline-offset: 1px; }
.p9-ct.on { background: var(--a-deep); color: var(--a-ivory); cursor: default; box-shadow: 0 3px 8px -2px rgba(0,40,24,.45); }
html[data-theme="dark"] .p9-ct:hover { background: rgba(255,255,255,.08); }
html[data-theme="dark"] .p9-ct.on { background: #2f6b4f; }
.p9-chead { position: relative; display: flex; flex-direction: column; gap: 18px; min-height: 236px; padding: 30px 32px 26px; overflow: hidden;
  background: linear-gradient(90deg, var(--a-sheet) 0 46%, rgba(var(--a-deep-rgb), .04) 100%); }
/* 오른쪽 건물 하프톤 — 머리 높이에 맞춰 오른쪽 반을 채우고, 글 쪽으로 갈수록 투명하게 풀린다 */
.p9-chead-art { position: absolute; top: 0; right: 0; bottom: 0; width: 52%; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38%); mask-image: linear-gradient(90deg, transparent 0, #000 38%); }
.p9-chead-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; display: block; }
.p9-chead-art img.dark { display: none; }
html[data-theme="dark"] .p9-chead-art img.light { display: none; }
html[data-theme="dark"] .p9-chead-art img.dark { display: block; }
.p9-chead-t, .p9-chead-go { position: relative; max-width: 54%; }
.p9-kick { display: block; font: 600 12.5px var(--a-serif); letter-spacing: .16em; color: var(--a-gold); }
.p9-chead h2 { margin: 6px 0 8px; font: 900 42px/1.15 var(--a-serif); color: var(--a-deep); }
.p9-chead-t p { margin: 0; font-size: 15px; color: var(--a-ink-2); }
.p9-chead-go { display: flex; align-items: center; gap: 16px; }
.p9-cprog { flex: 1; display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: var(--a-ink-3); max-width: 220px; }
.p9-cprog b { color: var(--a-deep); font-size: 15px; }
.p9-chead-go .btn { padding: 12px 22px; border-radius: 999px; font-size: 15px; white-space: nowrap; }
/* 편 카드 */
.p9-path { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 18px 24px 20px; border-top: 1px solid var(--a-line); background: rgba(var(--a-deep-rgb), .03); }
.p9-pc { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px 13px 13px; text-align: left; cursor: pointer; font: inherit; color: var(--a-ink);
  background: var(--a-sheet); border: 1px solid var(--a-line-2); border-radius: 10px; transition: border-color .15s, box-shadow .15s, transform .15s; }
.p9-pc:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,40,24,.07); }
.p9-pc-k { font: 600 11px var(--a-serif); letter-spacing: .14em; color: var(--a-ink-3); }
.p9-pc-name { font: 700 15.5px/1.4 var(--a-serif); word-break: keep-all; min-height: 2.8em; }
.p9-pc-m { font-size: 12px; color: var(--a-ink-3); margin-bottom: 4px; }
.p9-pc.cur::before { content: ""; position: absolute; top: 13px; right: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--a-gold); }
.p9-pc.on { border-color: var(--a-deep); box-shadow: 0 0 0 2px rgba(var(--a-deep-rgb), .14); }
.p9-pc.on .p9-pc-k { color: var(--a-gold); }
.p9-pc.on .p9-pc-name { color: var(--a-deep); }
.p9-pbar { display: block; height: 4px; border-radius: 2px; background: rgba(var(--a-deep-rgb), .09); overflow: hidden; }
.p9-pbar i { display: block; height: 100%; background: var(--a-deep); }
/* 편 한 문장 — 누른 편의 장 줄 위. 편 이름은 작은 머리글, 문장은 명조로 크게 */
.p9-chwrap { border-top: 1px solid var(--a-line); }
.p9-plead { margin: 0; padding: 20px 30px 4px; font: 500 17px/1.6 var(--a-serif); color: var(--a-deep); word-break: keep-all; }
.p9-plead span { display: block; margin-bottom: 4px; font: 600 12px var(--a-serif); letter-spacing: .14em; color: var(--a-gold); }
.p9-plead + .p9-chs { border-top: 0 !important; }
/* 편 기출 — 편 문장 밑. 네 면 옅은 금색 테두리 상자 (2026-11-07 사용자: 한쪽만 강조 테두리는 쓰지 않는다) */
.p9-pgi { display: flex; gap: 14px; align-items: baseline; margin: 12px 30px 4px; padding: 12px 16px; border: 1px solid var(--a-gold-line); border-radius: 8px; background: rgba(156,126,69,.06); }
.p9-pgi b { flex: none; font: 700 12px var(--a-serif); letter-spacing: .12em; color: var(--a-gold); }
.p9-pgi p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--a-ink-2); word-break: keep-all; }
.p9-pgi + .p9-chs { border-top: 0 !important; }
html[data-theme="dark"] .p9-pgi { background: rgba(217,192,138,.08); }
/* 장 한 문장 — 장 이름 바로 밑, 점 줄 위 */
.p9-course .p9-chs a { padding: 10px 8px 11px; }
.p9-chd { grid-column: 1 / -1; margin: -1px 0 3px; font-size: 13px; line-height: 1.55; color: var(--a-ink-2); word-break: keep-all; }
.p9-course .p9-chs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 22px; margin: 0; padding: 14px 22px 20px; border-top: 1px solid var(--a-line); }
/* 장 줄 — 장 이름 · 읽은 수/절 수, 아래에 절마다 점 */
.p9-chs { list-style: none; margin: 0; padding: 6px 8px 10px; }
.p9-chs a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 7px 8px; border-radius: 6px; text-decoration: none; color: var(--a-ink); }
.p9-chs a:hover { background: rgba(var(--a-deep-rgb), .05); }
.p9-chn { font-size: 13.5px; font-weight: 600; color: var(--a-forest); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p9-chc { font-size: 12px; color: var(--a-ink-3); font-variant-numeric: tabular-nums; }
.p9-dots { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; }
.p9-dots i { width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; }
.p9-dots i.rd { background: var(--a-deep); }
.p9-dots i.op { border: 1.5px solid rgba(var(--a-deep-rgb), .55); }
.p9-dots i.nx { border: 2px solid var(--a-gold); }
.p9-dots i.lk { background: rgba(var(--a-deep-rgb), .12); }
@media (max-width: 760px) {
  .p9-ctabs { padding: 12px 12px; overflow-x: auto; scrollbar-width: none; }
  .p9-ctabs::-webkit-scrollbar { display: none; }
  .p9-ctabs-in { display: flex; width: max-content; min-width: 100%; }
  .p9-ct { flex: 1 0 auto; padding: 10px 14px; font-size: 14px; }
  .p9-chead { padding: 22px 18px 18px; min-height: 0; }
  .p9-plead { padding: 16px 18px 2px; font-size: 15.5px; }
  .p9-pgi { flex-direction: column; gap: 4px; margin: 10px 16px 2px; }
  .p9-chead h2 { font-size: 30px; }
  .p9-chead-art { width: 60%; opacity: .55; }
  .p9-chead-t, .p9-chead-go { max-width: none; }
  .p9-chead-go { flex-wrap: wrap; }
  .p9-path { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px 12px 16px; gap: 8px; }
  .p9-course .p9-chs { grid-template-columns: minmax(0, 1fr); padding: 10px 10px 14px; }
}

/* 직렬 드롭다운 목록 — 열린 직렬 줄은 과목 다섯 개(국어 · 영어 …)가 길어 직렬 이름과 겹쳤다 (2026-11-06 사용자).
   직렬 이름과 '지금 여기'를 윗줄에, 과목은 아랫줄에 따로 놓는다 */
.p9-track-menu .exam-list button { flex-wrap: wrap; row-gap: 3px; }
.p9-track-menu .exam-list button b { flex: 1 1 auto; margin: 0 !important; }
.p9-track-menu .exam-list button small { order: 2; margin-left: auto; }
.p9-track-menu .exam-list button span { order: 3; flex: 1 0 100%; margin: 0 !important; text-align: left; white-space: normal; font-size: 12px; line-height: 1.5; color: var(--a-ink-3); }

/* 아래 독이 켜졌을 때 가릴 몫(104px, 폰 72px)을 body 바닥이 아니라 푸터 안쪽에 둔다.
   리트 누비 atrium.css 는 body 에 padding-bottom 을 줘서 푸터 아래로 바탕색 빈 띠가 생겼다 (2026-11-07 사용자) */
html[data-variant="atrium"] body.at-dock-on { padding-bottom: 0 !important; }
html[data-variant="atrium"] body.at-dock-on .site-footer { padding-bottom: calc(24px + 104px) !important; }
@media (max-width: 600px) { html[data-variant="atrium"] body.at-dock-on .site-footer { padding-bottom: calc(24px + 72px) !important; } }

/* 확인 문제 (2026-11-08) — 네 면 테두리 카드. 왼쪽 강조 줄은 쓰지 않는다 */
.qz-lead { margin: 0 0 12px; color: var(--a-ink-3); font-size: 15px; }
.qz-score { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; margin: 0 0 14px; padding: 12px 14px; border: 1px solid rgba(var(--a-deep-rgb), .45); border-radius: 6px; background: var(--a-sheet); }
.qz-score b { color: var(--a-deep); font-size: 16px; }
.qz-item { margin: 0 0 14px; padding: 14px 16px 16px; border: 1px solid var(--a-line-2); border-radius: 6px; background: var(--a-sheet); }
.qz-item.ok { border-color: rgba(var(--a-deep-rgb), .5); }
.qz-item.ng { border-color: #b4553f; }
.qz-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.qz-head b { color: var(--a-forest); font-size: 14px; }
.qz-tag { padding: 1px 7px; border: 1px solid var(--a-line-3); border-radius: 3px; font-size: 12px; color: var(--a-ink-3); }
.qz-res { margin-left: auto; font-size: 13px; font-weight: 700; }
.qz-item.ok .qz-res { color: var(--a-deep); }
.qz-item.ng .qz-res { color: #a3432e; }
.qz-ask { margin: 0 0 8px; font-weight: 600; }
.qz-stmt { margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--a-line); border-radius: 4px; background: var(--a-cream); }
.qz-pass { margin: 0 0 10px; padding: 12px 14px; border: 1px solid var(--a-line-2); border-radius: 4px; background: var(--a-sheet); white-space: pre-wrap; line-height: 1.75; }
.qz-pass u, .qz-o u { text-underline-offset: 3px; }
.qz-opts { display: grid; gap: 6px; }
.qz-opts.ox { grid-template-columns: repeat(2, minmax(0, 120px)); }
.qz-opt { display: flex; gap: 8px; align-items: flex-start; width: 100%; padding: 8px 11px; border: 1px solid var(--a-line-2); border-radius: 5px; background: var(--a-sheet); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.qz-opts.ox .qz-opt { justify-content: center; font-weight: 700; font-size: 17px; }
.qz-opt:hover:not(:disabled) { border-color: var(--a-forest); }
.qz-opt.pick { border-color: var(--a-deep); background: rgba(var(--a-deep-rgb), .07); }
.qz-opt:disabled { cursor: default; }
.qz-opt.ans { border-color: var(--a-deep); background: rgba(var(--a-deep-rgb), .1); }
.qz-opt.miss { border-color: #b4553f; background: rgba(180, 85, 63, .08); }
.qz-k { flex: none; font-weight: 700; color: var(--a-forest); }
.qz-exp { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--a-line); font-size: 15px; }
.qz-exp p { margin: 0 0 6px; }
.qz-exp ul { margin: 0 0 8px; padding-left: 1.2em; }
.qz-exp li { margin: 0 0 4px; }
.qz-wk { font-weight: 700; color: var(--a-ink-3); font-size: 13.5px; }
.qz-flash { animation: qzflash 2.2s ease-out; }
@keyframes qzflash { 0%, 30% { background: rgba(var(--a-deep-rgb), .14); } 100% { background: transparent; } }
.qz-blank { display: inline-block; width: 6em; border-bottom: 1.5px solid currentColor; vertical-align: baseline; }

/* ── 진도 상자 · 연습 문제 화면 · 이제 공부할 절 · 과목 OT (2026-11-08) ── */
/* 진도 상자 (2026-11-08 다시 짬 4: 3판은 너무 간단하다 → 경로·진도 줄, 막대, 이전 | 단계 | 다음 세 칸. 칸 사이는 세로줄만) */
.wh { margin: 6px 0 22px; padding: 16px 20px 14px; border: 1px solid var(--a-line-2); border-radius: var(--a-r-panel); background: var(--a-sheet); }
.wh svg { width: 13px; height: 13px; flex: none; }
.wh-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.wh-path { font-size: 14px; line-height: 1.55; color: var(--a-ink-2); }
.wh-path i { margin: 0 2px; font-style: normal; color: var(--a-ink-3); }
.wh-path b { font-weight: 700; color: var(--a-deep); }
.wh-pos { font-size: 13px; color: var(--a-ink-3); white-space: nowrap; }
.wh-pos b { font-weight: 700; color: var(--a-deep); }
.wh-track { position: relative; height: 5px; margin: 12px 6px 14px; border-radius: 3px; background: rgba(var(--a-deep-rgb), .09); }
.wh-track i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--a-deep); }
.wh-track em { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border: 2.5px solid var(--a-deep); border-radius: 50%; background: var(--a-sheet); }
.wh-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; border-top: 1px solid var(--a-line); }
.wh-nav, .wh-mid { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 12px 4px 2px; color: inherit; text-decoration: none; }
.wh-mid { align-items: center; justify-content: center; padding: 12px 22px 2px; border-left: 1px solid var(--a-line); border-right: 1px solid var(--a-line); }
.wh-mid .wh-steps { margin: 0; }
.wh-prev { padding-right: 18px; }
.wh-next { padding-left: 18px; text-align: right; align-items: flex-end; }
.wh-nk { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; color: var(--a-forest); }
.wh-nc { font-size: 12px; color: var(--a-gold); }
.wh-nt { font-size: 14.5px; line-height: 1.45; color: var(--a-ink); }
.wh-nn { font-size: 12.5px; line-height: 1.5; color: var(--a-ink-3); }
a.wh-nav:hover .wh-nt { color: var(--a-deep); text-decoration: underline; text-underline-offset: 3px; }
a.wh-nav:focus-visible { outline: 2px solid var(--a-deep); outline-offset: 2px; border-radius: 3px; }
.wh-nav.is-lock .wh-nk, .wh-nav.is-lock .wh-nt { color: var(--a-ink-3); }
@media (max-width: 640px) {
  .wh { padding: 14px 14px 12px; }
  .wh-row { grid-template-columns: 1fr 1fr; }
  .wh-mid { grid-column: 1 / -1; order: -1; flex-direction: row; justify-content: space-between; padding: 10px 2px; border: 0; border-bottom: 1px solid var(--a-line); }
  .wh-prev { padding-right: 10px; border-right: 1px solid var(--a-line); }
  .wh-next { padding-left: 10px; }
}

.wh-steps { display: flex; align-items: center; margin: 6px 0 0; padding: 0; list-style: none; }
.wh-steps li { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--a-ink-3); }
.wh-steps li + li::before { content: ""; width: 20px; margin: 0 8px; border-top: 1px solid var(--a-line-3); }
.wh-steps li.ok + li::before { border-top-color: var(--a-deep); }
.wh-steps i { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--a-line-3); border-radius: 50%; font: 700 11px/1 var(--a-serif); font-style: normal; color: var(--a-ink-3); background: var(--a-sheet); }
.wh-steps i svg { width: 12px; height: 12px; }
.wh-steps li.on { color: var(--a-deep); font-weight: 700; }
.wh-steps li.on i { border-color: var(--a-deep); background: var(--a-deep); color: var(--a-sheet); }
.wh-steps li.ok { color: var(--a-forest); }
.wh-steps li.ok i { border-color: var(--a-deep); color: var(--a-deep); }

/* 이제 공부할 절 (2026-11-08 다시 짬: 번호 도장 + 제목·단계 + 버튼, 안내는 아래 한 줄) */
.p9-next { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px 20px; margin: 16px 0 0; padding: 18px 22px 0; border: 1px solid rgba(var(--a-deep-rgb), .3); border-radius: var(--a-r-panel); background: linear-gradient(180deg, var(--a-white), var(--a-sheet)); box-shadow: var(--a-sh-card); overflow: hidden; }
.p9-next svg { width: 15px; height: 15px; flex: none; }
.p9-next-seal { display: grid; place-items: center; align-content: center; width: 64px; height: 64px; border: 1.5px solid var(--a-deep); border-radius: 50%; background: var(--a-sheet); box-shadow: inset 0 0 0 4px var(--a-sheet), inset 0 0 0 5px rgba(var(--a-deep-rgb), .25); color: var(--a-deep); }
.p9-next-seal b { font: 800 22px/1 var(--a-serif); }
.p9-next-seal small { margin-top: 2px; font-size: 10.5px; letter-spacing: .02em; color: var(--a-forest); }
.p9-next-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.p9-next-k { font-size: 12.5px; font-weight: 700; letter-spacing: .05em; color: var(--a-forest); }
.p9-next-t > b { font: 800 21px/1.35 var(--a-serif); color: var(--a-deep); }
.p9-next-m { font-size: 13.5px; color: var(--a-ink-3); }
.p9-next .wh-steps { margin-top: 8px; }
.p9-next-go { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.p9-next-n { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 2px -22px 0; padding: 11px 22px; border-top: 1px solid var(--a-line); background: rgba(var(--a-deep-rgb), .035); font-size: 13px; line-height: 1.5; color: var(--a-ink-3); }
.p9-chead + .p9-next { margin: 18px 24px 2px; }
@media (max-width: 760px) {
  .p9-next { grid-template-columns: auto minmax(0, 1fr); padding: 16px 16px 0; gap: 12px 14px; }
  .p9-chead + .p9-next { margin: 14px 12px 2px; }
  .p9-next-seal { width: 52px; height: 52px; }
  .p9-next-seal b { font-size: 18px; }
  .p9-next-t > b { font-size: 18px; }
  .p9-next-go { grid-column: 1 / -1; justify-content: center; }
  .p9-next-n { margin: 0 -16px; padding: 10px 16px; }
}
.p9-time { margin: 0 0 18px; font-size: 14px; color: var(--a-ink-3); }
.p9-go { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--a-line-2); }
.p9-go-t { margin: 0 0 10px; font-size: 15px; color: var(--a-ink-2); }
.p9-pk { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 700; letter-spacing: .04em; color: var(--a-forest); }
.p9-ot-goal { margin: 0; padding: 14px 18px 14px 34px; }
.p9-ot-goal li { margin: 6px 0; font-size: 15px; line-height: 1.6; color: var(--a-ink-2); }
.p9-ot-step { margin: 0; padding: 6px 18px; list-style: none; counter-reset: ots; }
.p9-ot-step li { counter-increment: ots; display: grid; grid-template-columns: 30px 92px 1fr; align-items: baseline; gap: 6px; padding: 10px 0; border-top: 1px solid var(--a-line); font-size: 15px; line-height: 1.6; color: var(--a-ink-2); }
.p9-ot-step li:first-child { border-top: 0; }
.p9-ot-step li::before { content: counter(ots); font: 800 18px var(--a-serif); color: var(--a-gold); }
.p9-ot-step b { color: var(--a-deep); }
@media (max-width: 600px) { .p9-ot-step li { grid-template-columns: 26px 1fr; } .p9-ot-step li span { grid-column: 2; } }
.p9-ot-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.p9-ot-part { margin: 0; padding: 14px 16px; }
.p9-ot-part.on { border-color: rgba(var(--a-deep-rgb), .5); }
.p9-ot-ph { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.p9-ot-ph span { font-size: 12.5px; color: var(--a-ink-3); }
.p9-ot-ph b { font: 800 18px var(--a-serif); color: var(--a-deep); }
.p9-ot-ph em { margin-left: auto; font-style: normal; font-size: 12.5px; color: var(--a-ink-3); }
.p9-ot-part p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--a-ink-2); }

/* 본문 문단 호버 색 끔 (2026-11-08 사용자: 누를 것도 없는데 누를 수 있는 것처럼 보인다). 리트 누비 style.css 의 .book .para:hover 를 9급에서만 지운다 */
.book .para:hover { background: transparent !important; }
.book .para { cursor: auto; }   /* 리트 누비 style.css 의 cursor:pointer — 9급 문단은 누를 것이 없다 (2026-11-08 사용자) */

/* ── 채팅 (2026-11-08) — 리트 누비 web/css/service.css 의 .cb-* 를 그대로 옮겼다(아트리움 덧칠은 atrium.css 에 이미 있다) ── */
.cb-btn { position: fixed; right: 22px; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 840; display: flex; align-items: center; gap: 8px;
  border: none; border-radius: 999px; padding: 12px 20px 12px 16px; background: var(--ewha); color: var(--paper); font-size: 14.5px; letter-spacing: .02em; cursor: pointer;
  box-shadow: 0 6px 18px rgba(var(--ewha-rgb), .22); }
.cb-btn .cb-ico { width: 22px; height: 22px; flex: none; }
.cb-btn .cb-dot { position: absolute; top: -6px; right: -4px; border: 2px solid var(--paper); }
/* 관리자·개발단 화면에는 예전 '피드백' 단추도 오른쪽 아래에 뜬다 — 대화 단추 위로 올린다 */
body.has-cb .fb-btn { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
.cb-btn:hover { background: var(--ewha-deep); }
.cb-btn[hidden] { display: none; }
.cb-dot { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #c4572a; color: #fff; font-size: 11px; line-height: 18px; text-align: center; display: inline-block; }
.cb-dot[hidden] { display: none; }
body.has-cb .to-top { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
body.typing .cb-btn, body.demo-shot .cb-btn, body.demo-shot .cb-panel { display: none !important; }

.cb-panel { position: fixed; right: 22px; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 870; display: flex; flex-direction: column;
  width: 380px; max-width: calc(100vw - 28px); height: 640px; max-height: calc(100vh - 110px);
  background: var(--paper); border: 1px solid var(--ewha); box-shadow: 0 10px 30px rgba(var(--ewha-rgb), .18); }
.cb-panel[hidden], .cb-view[hidden] { display: none; }
.cb-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.cb-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--paper-white); }
.cb-head b { font-size: 15px; }
.cb-head small { display: block; font-size: 11.5px; color: var(--ink-soft); font-weight: normal; margin-top: 1px; }
.cb-head .cb-right { margin-left: auto; font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.cb-x, .cb-back { border: none; background: none; color: var(--ink); font-size: 18px; line-height: 1; padding: 0 2px; cursor: pointer; }
.cb-back { font-size: 22px; margin-right: -2px; }

.cb-rooms { flex: none; }
.cb-room { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border: none; border-bottom: 1px solid var(--line-soft);
  background: none; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.cb-room:hover { background: rgba(var(--ewha-rgb), .05); }
.cb-room.on { background: rgba(var(--ewha-rgb), .08); }
.cb-ava { flex: none; width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; border: 1px solid var(--ewha); color: var(--ewha); background: var(--paper-white); }
.cb-ava.t { background: var(--ewha); color: var(--paper); }
.cb-room-main { flex: 1; min-width: 0; }
.cb-room-main b { display: block; font-size: 14.5px; }
.cb-room-main span { display: block; font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
.cb-room-side { flex: none; text-align: right; font-size: 11.5px; color: var(--ink-soft); }
.cb-room-side .cb-dot { margin-top: 5px; }
.cb-rooms-note { padding: 14px; font-size: 12.5px; line-height: 1.75; color: var(--ink-soft); }
.cb-empty { margin: auto; padding: 20px; font-size: 13px; color: var(--ink-soft); text-align: center; line-height: 1.7; }

.cb-scroll { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.cb-day { align-self: center; font-size: 11.5px; color: var(--ink-soft); padding: 2px 10px; border: 1px solid var(--line-soft); border-radius: 999px; }
.cb-msg { display: flex; align-items: flex-end; gap: 6px; }
.cb-msg.me { justify-content: flex-end; }
.cb-msg .cb-who { font-size: 11.5px; color: var(--ink-soft); margin: 0 0 3px 2px; }
.cb-b { max-width: 78%; padding: 9px 12px; font-size: 14px; line-height: 1.75; border: 1px solid var(--line); background: var(--paper-white); color: var(--ink);
  white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; }
.cb-msg.me .cb-b { background: var(--ewha); color: var(--paper); border-color: var(--ewha); }
.cb-msg.cb-wait .cb-b { color: var(--ink-soft); }
.cb-time { flex: none; font-size: 10.5px; color: var(--ink-soft); line-height: 1.4; text-align: right; }
.cb-msg:not(.me) .cb-time { text-align: left; }
.cb-stack { display: flex; flex-direction: column; max-width: 78%; }
.cb-stack .cb-b { max-width: none; }
.cb-msg.memo .cb-b { background: var(--field); border-style: dashed; color: var(--ink); }
.cb-msg.memo .cb-who { color: #c4572a; }
.cb-input { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--paper-white); }
.cb-input textarea { flex: 1; min-height: 0; height: 44px; resize: none; line-height: 1.5; font-size: 14px; padding: 8px 10px; }
.cb-foot { padding: 7px 14px 10px; font-size: 11.5px; line-height: 1.6; color: var(--ink-soft); background: var(--paper-white); }
  background: var(--paper-white); color: var(--ink); font-size: 14px; cursor: pointer; box-shadow: 0 6px 18px rgba(var(--ewha-rgb), .16); max-width: calc(100vw - 32px); }
@media (max-width: 900px) { .cb-btn { right: 14px; } }
@media (max-width: 560px) {
  .cb-btn { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); padding: 10px 16px 10px 13px; font-size: 13.5px; }
  body.has-cb .fb-btn { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  body.has-cb .to-top { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .cb-panel { left: 0; right: 0; bottom: 0; width: auto; max-width: none; height: 82vh; max-height: none; border-width: 1px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px); }
  .cb-toast { top: 60px; }
}
.cb-lockico { font-style: normal; margin-left: 5px; color: var(--ink-soft); }
.cb-lockico svg { vertical-align: -1px; }
.cb-locknote { padding: 10px 14px 12px; border-top: 1px solid var(--line); background: var(--paper-white); font-size: 12.5px; line-height: 1.7; color: var(--ink-soft); }
.cb-locknote .btn { margin-top: 6px; }
.cb-locknote[hidden] { display: none; }
.cb-input[hidden], .cb-foot[hidden] { display: none; }
.cb-msg .cb-ava { flex: none; display: flex; align-items: center; justify-content: center; border: 1px solid var(--a-line-3); background: var(--a-sheet); color: var(--a-deep); }
.cb-msg .cb-ava.t { background: var(--a-deep); color: var(--a-sheet); }
.cb-room .cb-ava { border: 1px solid var(--a-line-3); background: var(--a-sheet); color: var(--a-deep); font-weight: 700; }
.cb-room .cb-ava.t { background: var(--a-deep); color: var(--a-sheet); }
.cb-room { cursor: pointer; text-align: left; font: inherit; color: var(--a-ink); }

/* ── 채점 피드백 · 내 기록 · 오답 모음 · 피드백 · 가이드 (2026-11-08) ── */
.p9-fbk { margin: 12px 0 4px; padding: 14px 16px; border: 1px solid var(--a-line-2); border-radius: 6px; background: var(--a-sheet); }
.p9-fbk-t { margin: 0 0 8px; font-weight: 700; color: var(--a-deep); }
.p9-fbk > .p9-fbk-t:only-child { margin: 0; }
.p9-fbk-l { margin: 0 0 10px; padding: 0; list-style: none; }
.p9-fbk-l li { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 8px 0; border-top: 1px solid var(--a-line); }
.p9-fbk-l li:first-child { border-top: 0; padding-top: 0; }
.p9-fbk-l b { color: var(--a-ink); }
.p9-fbk-l span { font-size: 13px; color: var(--a-ink-3); align-self: center; }
.p9-fbk-l p { grid-column: 1 / -1; margin: 0; font-size: 14px; line-height: 1.6; color: var(--a-ink-2); }
.p9-fbk .btn-row { margin: 0; }
.p9-me-pct { font-size: 14px; font-weight: 700; color: var(--a-deep); text-align: right; }
.p9-trap-row { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 4px 14px; padding: 12px 0; border-top: 1px solid var(--a-line); }
.p9-trap-row:first-child { border-top: 0; padding-top: 2px; }
.p9-trap-row b { font-size: 14.5px; color: var(--a-ink); }
.p9-trap-row p { grid-column: 2 / -1; margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--a-ink-3); }
.p9-trap-bar { height: 6px; border-radius: 3px; background: rgba(var(--a-deep-rgb), .09); overflow: hidden; }
.p9-trap-bar i { display: block; height: 100%; border-radius: 3px; background: var(--a-gold); }
.p9-trap > .kv { margin: 10px 0 0; }
.p9-wrong-c { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.p9-wrong-c p { flex: 1 1 260px; margin: 0; }
.p9-recent ul { margin: 0; padding: 0; list-style: none; }
.p9-recent li + li { border-top: 1px solid var(--a-line); }
.p9-recent a { display: flex; flex-direction: column; gap: 2px; padding: 11px 2px; color: var(--a-ink); text-decoration: none; }
.p9-recent li:first-child a { padding-top: 2px; }
.p9-recent li:last-child a { padding-bottom: 2px; }
.p9-recent a b { font-size: 15px; line-height: 1.5; }
.p9-recent a:hover b { color: var(--a-deep); text-decoration: underline; text-underline-offset: 3px; }
.p9-fb-line { font-size: 13.5px; color: var(--a-ink-2); }
.p9-cal { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 5px; max-width: 460px; margin-bottom: 10px; }
.p9-cal i { aspect-ratio: 1; border-radius: 4px; background: rgba(var(--a-deep-rgb), .07); }
.p9-cal i.on { background: var(--a-deep); }
.p9-cal i.today { box-shadow: 0 0 0 1.5px var(--a-gold); }
.p9-op textarea { width: 100%; min-height: 96px; margin: 10px 0 0; }
.p9-op-kind { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--a-ink-2); }
.p9-op-kind label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.p9-op-list { margin: 6px 0 0; padding: 0; list-style: none; }
.p9-op-list li { padding: 10px 0; border-top: 1px solid var(--a-line); }
.p9-op-list p { margin: 4px 0 0; white-space: pre-wrap; font-size: 14px; color: var(--a-ink); }
.p9-guide .guide-sec { margin-bottom: 14px; }
.p9-guide .guide-sec h2 { margin: 0 0 10px; font: 700 18px/1.4 var(--a-serif); color: var(--a-deep); }
.p9-guide-ol { margin: 0 0 10px; padding-left: 1.3em; }
.p9-guide-ol li { margin: 0 0 8px; font-size: 14.5px; line-height: 1.75; color: var(--a-ink); }
.p9-guide-ol b { margin-right: 6px; color: var(--a-deep); }
.p9-guide-t { width: 100%; border-collapse: collapse; font-size: 14px; }
.p9-guide-t th, .p9-guide-t td { padding: 9px 10px; border-top: 1px solid var(--a-line); text-align: left; vertical-align: top; line-height: 1.6; }
.p9-guide-t th { width: 110px; white-space: nowrap; color: var(--a-deep); }
@media (max-width: 600px) {
  .p9-me-row { grid-template-columns: 1fr auto 44px; }
  .p9-me-row .p9-me-bar { grid-column: 1 / -1; grid-row: 2; }
  .p9-trap-row { grid-template-columns: 1fr auto; }
  .p9-trap-row .p9-trap-bar { grid-column: 1 / -1; grid-row: 2; }
  .p9-trap-row p { grid-column: 1 / -1; }
  .p9-cal { gap: 4px; }
}
/* 내 기록·피드백·오답 모음 소제목 위 '목차' 머리글은 목차 화면용이라 뺀다. 내 기록 숫자 칸 셋은 한 줄로 (2026-11-08) */
html[data-variant="atrium"] body:is([data-route="me"], [data-route="feedback"]) .vp-steps::before { content: none; }
html[data-variant="atrium"] body:is([data-route="me"], [data-route="feedback"]) .vp-steps { margin-top: 26px !important; font-size: 19px !important; }
@media (min-width: 701px) { html[data-variant="atrium"] body[data-route="me"] .rd-cells { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cb-head .cb-x { margin-left: auto; }

/* 본문 그림 — 상자·꼬리표 없이 그림만, 제목은 아래 캡션 (2026-11-08 사용자: 그림 박스와 제목이 너무 노골적이다) */
.p9-fig { margin: 22px 0 26px; }
.p9-fig svg { display: block; width: 100%; height: auto; }
.p9-fig figcaption { margin-top: 8px; font-size: 13.5px; line-height: 1.5; text-align: center; color: var(--a-ink-3); }