/* textbookPath.css — 수학선행 페이지 아래 '교재 진도 길' 카드 (2026-09-24)
   색: 채움·버튼 #1668C7 / 강조 글자 #1F7AE0 (브랜드 파랑 용도별 분리). 보라 없음. */

.tp-card {
    background:#fff; border-radius:24px; padding:28px 24px 24px; margin:56px 0 56px;   /* 앞뒤 카드와 붙어 보이지 않게 (2026-09-25) */
    border:1px solid #edf2f7; box-shadow:0 10px 30px rgba(0,0,0,0.03);
}
.tp-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:4px; }
.tp-title { font-size:1.05rem; font-weight:800; color:#0f172a; }
.tp-sub { font-size:0.85rem; color:#64748b; margin-bottom:8px; line-height:1.55; word-break:keep-all; }
.tp-char-btn {
    flex:none; border:1px solid #e2e8f0; background:#f8fafc; border-radius:999px;
    padding:5px 11px; font-size:0.8rem; font-weight:700; color:#475569; cursor:pointer;
}
.tp-char-btn:hover { border-color:#1668C7; color:#1668C7; }

/* ── 길 ─────────────────────────────────────── */
.tp-road-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -6px; padding:0 6px; }
.tp-road { position:relative; height:112px; margin:0 16px; }
.tp-road-line {
    position:absolute; left:0; right:0; top:58px; height:8px; border-radius:8px; background:#e2e8f0;
}
.tp-road-fill {
    position:absolute; left:0; top:58px; height:8px; border-radius:8px; background:#1668C7;
    transition:width .5s ease;
}
.tp-node { position:absolute; top:52px; transform:translateX(-50%); text-align:center; width:56px; }
.tp-node .dot {
    width:20px; height:20px; margin:0 auto; border-radius:50%;
    background:#fff; border:3px solid #cbd5e1;
}
.tp-node.passed .dot { border-color:#1668C7; background:#1668C7; }
.tp-node.next .dot { border-color:#1668C7; background:#fff; box-shadow:0 0 0 5px rgba(22,104,199,0.15); }
.tp-node .lbl { margin-top:6px; font-size:0.72rem; font-weight:700; color:#94a3b8; white-space:nowrap; }
.tp-node.passed .lbl, .tp-node.next .lbl { color:#1F7AE0; }
.tp-flag {
    position:absolute; top:6px; transform:translateX(-50%); text-align:center;
    font-size:0.68rem; font-weight:800; color:#b45309; white-space:nowrap;
}
.tp-flag .f { font-size:1.2rem; display:block; line-height:1.1; }
/* 이모지 동물(🐇🐢🐿️)은 왼쪽을 본다 — 깃발(오른쪽)을 보게 좌우를 뒤집는다 (2026-09-24 사용자 요청) */
.tp-char {
    position:absolute; top:22px; transform:translateX(-50%) scaleX(-1); font-size:1.7rem; line-height:1;
    transition:left .6s cubic-bezier(.34,1.4,.64,1); filter:drop-shadow(0 3px 4px rgba(0,0,0,0.15));
}
.tp-road-note {
    font-size:0.84rem; color:#334155; line-height:1.55; margin-top:12px; word-break:keep-all;
}
.tp-road-note > div + div { margin-top:4px; }
.tp-road-note b { color:#1F7AE0; }
.tp-road-note .muted { color:#94a3b8; font-size:0.8rem; }
.tp-levelup {
    display:inline-block; margin-top:8px; padding:8px 14px; border-radius:12px; border:none;
    background:#1668C7; color:#fff; font-weight:800; font-size:0.85rem; cursor:pointer;
}

/* ── 다음 마디까지(한 칸 확대) ───────────── */
.tp-seg { margin:4px 0 10px; }
.tp-seg-head { display:flex; justify-content:space-between; align-items:baseline; font-size:0.82rem; color:#475569; margin-bottom:6px; }
.tp-seg-head b { color:#1F7AE0; }
.tp-seg-head .left { color:#64748b; font-weight:600; }
.tp-seg-head .pc { font-weight:800; color:#1668C7; font-size:0.9rem; }
.tp-seg-track { position:relative; height:14px; border-radius:14px; background:#eef2f7; margin-top:30px; }
.tp-seg-cur { position:absolute; left:0; top:0; bottom:0; border-radius:14px 0 0 14px; background:#1668C7; transition:width .5s ease; }
.tp-seg-think { position:absolute; top:0; bottom:0; background:#7cc4ff; transition:left .5s ease, width .5s ease; }
.tp-seg-char { position:absolute; top:-24px; transform:translateX(-50%) scaleX(-1); font-size:1.25rem; line-height:1; transition:left .6s cubic-bezier(.34,1.4,.64,1); }
.tp-seg-legend { display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:7px; font-size:0.74rem; color:#64748b; }
.tp-seg-legend i { display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:4px; vertical-align:-1px; }
.tp-seg-legend i.c { background:#1668C7; } .tp-seg-legend i.t { background:#7cc4ff; }
.tp-seg-legend .muted { color:#94a3b8; }

/* ── 다음 한 걸음 ───────────────────────────── */
.tp-next {
    display:flex; align-items:center; gap:12px; margin-top:0;
    background:#eff6ff; border:1.5px solid #bfdbfe; border-radius:16px; padding:14px 16px;
}
.tp-next .ic { font-size:1.4rem; flex:none; }
.tp-next .txt { flex:1; min-width:0; font-size:0.9rem; color:#1e293b; line-height:1.5; word-break:keep-all; }
.tp-next .txt .k { font-size:0.75rem; font-weight:800; color:#1F7AE0; display:block; }
.tp-next .go {
    flex:none; border:none; border-radius:12px; padding:9px 14px;
    background:#1668C7; color:#fff; font-weight:800; font-size:0.85rem; cursor:pointer;
}

/* ── 책장 ───────────────────────────────────── */
.tp-shelf-head { display:flex; align-items:center; justify-content:space-between; margin:0 0 12px; }

/* ── 구역: 길 · 다음 한 걸음 · 내 책장 (2026-09-25 여백 정리) ── */
.tp-zone-road { padding-top:4px; }
.tp-zone-next { margin-top:32px; }
.tp-zone-shelf { margin-top:36px; padding-top:28px; border-top:1px solid #e2e8f0; }
.tp-shelf-head .t { font-size:0.95rem; font-weight:800; color:#0f172a; }
.tp-add-btn {
    border:1.5px dashed #93c5fd; background:#fff; color:#1668C7; border-radius:12px;
    padding:7px 12px; font-weight:800; font-size:0.85rem; cursor:pointer;
}
.tp-book { border:1px solid #e2e8f0; border-radius:16px; margin-bottom:10px; overflow:hidden; }
.tp-book-row { display:flex; align-items:center; gap:10px; padding:12px 14px; cursor:pointer; }
.tp-book-row .kind {
    flex:none; font-size:0.68rem; font-weight:800; border-radius:8px; padding:3px 7px;
    background:#f1f5f9; color:#475569;
}
.tp-book-row .kind.cur { background:#dbeafe; color:#1668C7; }
.tp-book-row .name { flex:1; min-width:0; font-size:0.9rem; font-weight:700; color:#1e293b; }
.tp-book-row .name small { display:block; font-weight:600; color:#94a3b8; font-size:0.76rem; }
.tp-book-row .cnt { flex:none; font-size:0.8rem; font-weight:800; color:#1F7AE0; }
.tp-book-row .chev { flex:none; color:#94a3b8; transition:transform .2s; }
.tp-book.open .tp-book-row .chev { transform:rotate(90deg); }
.tp-book-bar { height:5px; background:#f1f5f9; }
.tp-book-bar > div { height:5px; background:#1668C7; transition:width .4s; }
.tp-book.done .tp-book-bar > div { background:#16a34a; }
.tp-units { display:none; padding:6px 14px 12px; background:#fafcff; border-top:1px solid #eef2f7; }
.tp-book.open .tp-units { display:block; }
.tp-sec { font-size:0.75rem; font-weight:800; color:#64748b; margin:10px 0 4px; }
.tp-unit { display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px dashed #eef2f7; }
.tp-unit:last-child { border-bottom:none; }
.tp-unit input[type=checkbox] { width:20px; height:20px; flex:none; accent-color:#1668C7; cursor:pointer; }
.tp-unit .ut { flex:1; min-width:0; font-size:0.88rem; color:#334155; word-break:keep-all; }
.tp-unit.checked .ut { color:#94a3b8; }
.tp-unit .ud { flex:none; font-size:0.72rem; color:#94a3b8; }
.tp-review {
    flex:none; border:1px solid #e2e8f0; background:#fff; border-radius:10px; padding:2px 7px;
    font-size:0.72rem; font-weight:700; color:#94a3b8; cursor:pointer;
}
.tp-review.on { border-color:#fca5a5; background:#fef2f2; color:#b91c1c; }
/* 체크 직후 숙달 수준 묻기 (2026-10-03) */
.tp-ask { border:1.5px solid #bfdbfe; background:#f5f9ff; border-radius:14px; padding:12px; margin:4px 0 10px; }
.tp-ask .q { font-size:0.88rem; font-weight:800; color:#0f172a; margin-bottom:8px; word-break:keep-all; }
.tp-ask .q small { display:block; font-weight:600; color:#64748b; font-size:0.75rem; margin-top:2px; }
.tp-ask-opt {
    display:block; width:100%; text-align:left; border:1px solid #dbe4f0; background:#fff; border-radius:10px;
    padding:8px 11px; margin-top:6px; cursor:pointer;
}
.tp-ask-opt b { display:block; font-size:0.86rem; color:#1668C7; }
.tp-ask-opt span { display:block; font-size:0.75rem; color:#64748b; word-break:keep-all; }
.tp-ask-opt:hover { border-color:#1668C7; }
.tp-ask-later { display:block; margin:8px 0 0 auto; border:none; background:none; font-size:0.78rem; font-weight:700; color:#94a3b8; cursor:pointer; }
/* 🩹 다시 볼 단원 모아 보기 */
.tp-rv { border:1px solid #fecaca; background:#fff7f7; border-radius:16px; padding:12px 14px; margin-bottom:16px; }
.tp-rv-head { font-size:0.85rem; font-weight:800; color:#b91c1c; margin-bottom:6px; }
.tp-rv-row { display:flex; align-items:center; gap:10px; padding:7px 0; border-top:1px dashed #fde2e2; }
.tp-rv-row:first-of-type { border-top:none; }
.tp-rv-go {
    flex:1; min-width:0; text-align:left; border:none; background:none; padding:0; cursor:pointer;
    font-size:0.88rem; font-weight:700; color:#334155; word-break:keep-all;
}
.tp-rv-go small { display:block; font-size:0.72rem; font-weight:600; color:#94a3b8; }
.tp-rv-ok {
    flex:none; border:1px solid #e2e8f0; background:#fff; border-radius:10px; padding:5px 10px;
    font-size:0.76rem; font-weight:700; color:#475569; cursor:pointer;
}
.tp-unit.flash { background:#fef2f2; transition:background .3s; }
.tp-book-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:10px; }
.tp-book-actions button {
    border:1px solid #e2e8f0; background:#fff; border-radius:10px; padding:5px 10px;
    font-size:0.78rem; font-weight:700; color:#64748b; cursor:pointer;
}
.tp-empty-shelf { font-size:0.88rem; color:#64748b; background:#f8fafc; border-radius:14px; padding:14px 16px; line-height:1.6; }

/* ── 책 고르기 ───────────────────────────────── */
.tp-picker { border:1.5px solid #bfdbfe; border-radius:18px; padding:14px; margin-bottom:12px; background:#f8fbff; }
.tp-tabs { display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap; }
.tp-tab {
    border:1px solid #e2e8f0; background:#fff; border-radius:999px; padding:6px 12px;
    font-size:0.82rem; font-weight:700; color:#475569; cursor:pointer;
}
.tp-tab.on { background:#1668C7; border-color:#1668C7; color:#fff; }
.tp-lvl { margin-bottom:10px; }
.tp-lvl .lh { font-size:0.8rem; font-weight:800; color:#334155; margin-bottom:6px; }
.tp-lvl .lh .rec { color:#1F7AE0; margin-left:4px; }
.tp-lvl .lh .gr { color:#94a3b8; font-weight:600; margin-left:4px; }
.tp-vols { display:flex; flex-wrap:wrap; gap:6px; }
.tp-vol {
    border:1px solid #cbd5e1; background:#fff; border-radius:10px; padding:6px 10px;
    font-size:0.82rem; font-weight:700; color:#1e293b; cursor:pointer;
}
.tp-vol:hover { border-color:#1668C7; color:#1668C7; }
.tp-vol.have { background:#f1f5f9; color:#94a3b8; border-color:#e2e8f0; cursor:default; }
.tp-more { border:none; background:none; color:#1668C7; font-weight:800; font-size:0.82rem; padding:4px 0; cursor:pointer; }
.tp-picker-foot { display:flex; justify-content:flex-end; margin-top:6px; }
.tp-picker-foot button { border:none; background:none; color:#64748b; font-weight:700; font-size:0.82rem; cursor:pointer; }
.tp-guest-note { font-size:0.78rem; color:#94a3b8; margin-top:12px; }

@media (max-width:576px) {
    .tp-card { padding:22px 16px; }
    .tp-road { margin:0 12px; }
    .tp-node { width:36px; }
    .tp-node .dot { width:16px; height:16px; }
    .tp-node .lbl { font-size:0.62rem; letter-spacing:-0.3px; }
    .tp-flag { font-size:0.6rem; }
    .tp-char { font-size:1.45rem; }
}

/* ── 깃발의 근거 (과학진도 로드맵) ─────────── */
.tp-basis { margin-top:14px; border:1px solid #fde68a; background:#fffbeb; border-radius:14px; padding:9px 13px; }
.tp-basis summary { cursor:pointer; font-size:0.82rem; font-weight:800; color:#92400e; list-style:none; }
.tp-basis summary::-webkit-details-marker { display:none; }
.tp-basis summary::after { content:' ▸'; color:#b45309; }
.tp-basis[open] summary::after { content:' ▾'; }
.tp-basis-row { display:flex; gap:10px; margin-top:8px; font-size:0.8rem; color:#334155; line-height:1.55; word-break:keep-all; }
.tp-basis-row .k { flex:none; width:58px; font-weight:800; color:#b45309; }
.tp-sec .tp-school { display:block; margin-top:2px; font-weight:600; color:#1F7AE0; font-size:0.72rem; }
#pathArea, #sciPathArea { scroll-margin-top:84px; }   /* 사이드 메뉴 #링크로 올 때 위 고정 머리줄에 가리지 않게 */