/* =====================================================================
   tlb-story.css : 리트바이블 상품상세 스토리형 템플릿 (2026-09-26, 면접 바이블 2027에서 출발)
   뿌리 클래스 .tlb-story 하나로 감싼 아임웹 조각 전용. 다른 CSS(tlb-product, tlb-jaso-temp)와 섞이지 않는다.

   테마: 대표색 하나(--tlb-accent)만 바꾸면 강조, 선, 칩, 옅은 면이 모두 따라 계산된다.
     1) 미리 만든 테마 클래스: <article class="tlb-story tlb-story--navy">
     2) 새 테마: 아래 테마 블록에 .tlb-story--이름 { --story-accent: #색; } 한 줄 추가
   --tlb-signal 은 문제, 경고, 막힌 순간에 쓰는 신호색이다. 대표색과 별개로 둔다.
   메달(금, 은, 동)과 붉은 체크 펜 색은 의미가 고정된 색이라 테마를 따르지 않는다.
   ===================================================================== */
/* 글꼴: 헤딩 SUITE, 본문 SUIT (정본 docs/CURRENT_WORKFLOW.md 0절). @import는 반드시 이 자리, 파일 맨 앞에 둔다. 규칙 뒤에 두면 브라우저가 무시해 SUITE가 안 불러와진다(2026-09-28 확인). */
@import url("https://cdn.jsdelivr.net/gh/sunn-us/SUITE/fonts/static/woff2/SUITE.css");
@import url("https://cdn.jsdelivr.net/gh/sun-typeface/SUIT@2/fonts/static/woff2/SUIT.css");
.tlb-story {
  --story-accent: #C9BBA0;
  --story-base: #0B0B0B;
  --story-signal: #E07A6A;
  --story-ink: color-mix(in oklab, var(--story-accent) 23.7%, #fff);
}
/* 테마 프리셋: 대표색만 지정한다 */
.tlb-story.tlb-story--sand { --story-accent: #C9BBA0; }
.tlb-story.tlb-story--navy { --story-accent: #8FA9D6; }
.tlb-story.tlb-story--violet { --story-accent: #B59BE0; }
.tlb-story.tlb-story--wine { --story-accent: #D69A9E; }
.tlb-story.tlb-story--forest { --story-accent: #9FC2A4; }
/* emerald (2026-09-28 Basic 2028, 대표 '컨셉색이 너무 연하다, Basic 색에 맞게 쨍하게'): 표지 띠 초록(#1D7659)을 어두운 바탕에서 보이게 밝힌 색. 글자색은 forest와 같은 톤을 유지한다 */
.tlb-story.tlb-story--emerald { --story-accent: #34C98B; --story-ink: color-mix(in oklab, #9FC2A4 23.7%, #fff); }

/* 아임웹 라이브 보정: 사이트와 편집기 기본 스타일을 이 템플릿 안에서 되돌린다 */
.tlb-story.tlb-story { line-height: var(--tlb-lh-compact); }
.tlb-story.tlb-story img { margin: 0; max-width: 100%; }
.tlb-story.tlb-story img.tlb9-cine-still { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .tlb-story.tlb-story img.tlb9-cine-still { display: block; } }
.tlb-story.tlb-story blockquote { padding: 0; border: 0; }
.tlb-story.tlb-story label { color: inherit; }
.tlb-story.tlb-story dt { font-weight: 400; }
.tlb-story.tlb-story h1 { margin: 0; }

.tlb-story, .tlb-story.tlb-story * {box-sizing: border-box;}
.tlb-story.tlb-story img {max-width: 100%;}
.tlb-story {--bg: color-mix(in oklab, var(--story-base) 76.8%, #000); --alt: color-mix(in oklab, var(--story-ink) 1.2%, var(--story-base)); --surf: var(--story-base); --ink: var(--story-ink); --sub: color-mix(in oklab, var(--story-ink) 70.4%, var(--story-base)); --faint: color-mix(in oklab, var(--story-ink) 46.9%, var(--story-base)); --navy: #000000; --pt: var(--story-accent); --ptSoft: color-mix(in oklab, var(--story-ink) 3.5%, var(--story-base)); --line: color-mix(in srgb, var(--story-ink) 10%, transparent); font-family: var(--tlb-font-body); color: var(--ink); background: var(--bg); margin: 0; padding: 0; width: 100%;}
.tlb-story {--bg: var(--story-base); --alt: color-mix(in oklab, var(--story-ink) 1.2%, var(--story-base)); --ink: var(--story-ink); --sub: color-mix(in oklab, var(--story-ink) 70.4%, var(--story-base)); --faint: color-mix(in oklab, var(--story-ink) 46.9%, var(--story-base)); --navy: #000000; --pt: var(--story-accent); --ptSoft: color-mix(in oklab, var(--story-ink) 3.5%, var(--story-base)); --line: color-mix(in srgb, var(--story-ink) 10%, transparent); --bad: oklch(from var(--story-signal) calc(l + 0.003) calc(c - 0.049) calc(h + 2.9)); --badSoft: color-mix(in oklab, var(--story-signal) 5.3%, var(--story-base)); font-family: var(--tlb-font-body); color: var(--ink); background: var(--bg);}
.tlb-story {--bg: color-mix(in oklab, var(--story-ink) 1.2%, var(--story-base)); --alt: color-mix(in oklab, var(--story-ink) 1.2%, var(--story-base)); --ink: var(--story-ink); --sub: color-mix(in oklab, var(--story-ink) 70.4%, var(--story-base)); --faint: color-mix(in oklab, var(--story-ink) 46.9%, var(--story-base)); --navy: #000000; --pt: var(--story-accent); --ptSoft: color-mix(in oklab, var(--story-ink) 3.5%, var(--story-base)); --line: color-mix(in srgb, var(--story-ink) 10%, transparent); --bad: oklch(from var(--story-signal) calc(l + 0.003) calc(c - 0.049) calc(h + 2.9)); --badSoft: color-mix(in oklab, var(--story-signal) 5.3%, var(--story-base)); font-family: var(--tlb-font-body); color: var(--ink); background: color-mix(in oklab, var(--story-ink) 1.2%, var(--story-base));}
.tlb-story {--tlb-canvas: color-mix(in oklab, var(--story-ink) 1.2%, var(--story-base)); --tlb-card-bg: var(--story-base); --tlb-ink: var(--story-ink); --tlb-sub: color-mix(in oklab, var(--story-ink) 85.3%, var(--story-base)); --tlb-faint: color-mix(in oklab, var(--story-ink) 70.4%, var(--story-base)); --tlb-navy: #000000; --tlb-blue: var(--story-accent); --tlb-gold: var(--story-accent); --tlb-gold-bg: color-mix(in oklab, var(--story-ink) 1.2%, var(--story-base)); --tlb-border: color-mix(in srgb, var(--story-ink) 16%, transparent); background: var(--tlb-canvas); color: var(--story-ink); font-family: var(--tlb-font-body); padding: 60px 24px 80px; max-width: 920px; margin: 0 auto; word-break: keep-all; -webkit-font-smoothing: antialiased;}
.tlb-story.tlb-story h1 {font-family: var(--tlb-font-head); letter-spacing: 0;}
.tlb-story {--tlb-bg: var(--story-base); --tlb-alt: color-mix(in oklab, var(--story-ink) 1.2%, var(--story-base)); --tlb-ink: var(--story-ink); --tlb-sub: color-mix(in oklab, var(--story-ink) 70.4%, var(--story-base)); --tlb-faint: color-mix(in oklab, var(--story-ink) 46.9%, var(--story-base)); --tlb-navy: #000000; --tlb-pt: var(--story-accent); --tlb-ptSoft: color-mix(in oklab, var(--story-ink) 3.5%, var(--story-base)); --tlb-line: color-mix(in srgb, var(--story-ink) 10%, transparent); font-family: var(--tlb-font-body); color: var(--story-ink); background: var(--tlb-bg);}
.tlb-story.tlb-story h1 {font-family: var(--tlb-font-head);}
.tlb-story.tlb-story p, .tlb-story.tlb-story li, .tlb-story.tlb-story span {font-family: var(--tlb-font-body);}
.tlb-story.tlb-story h1 {font-family: var(--tlb-font-head);}
.tlb-story.tlb-story p, .tlb-story.tlb-story li, .tlb-story.tlb-story span {font-family: var(--tlb-font-body);}
.tlb-story.tlb-story *, .tlb-story.tlb-story *::before, .tlb-story.tlb-story *::after {box-sizing: border-box;}
/* 헤딩 안의 span, b, strong, em, i는 헤딩 글꼴 SUITE를 따른다. 위의 "span은 SUIT" 일괄 규칙이 헤딩 속 글자(가격의 원, 정답 표기 등)를 SUIT로 바꾸던 문제를 막는다(2026-09-28). 헤딩 컴포넌트를 새로 만들면 이 목록에 더한다. */
.tlb-story.tlb-story :is(h1, h2, h3, .tlb9-big, .tlb9-mid, .tlb9-name, .tlb9-buy-price, .tlb9-buy-name, .tlb9-answer, .tlb9-moment-tit, .tlb9-letter-tit, .tlb9-chap-tit, .tlb9-line-tit, .tlb9-solve-tit, .tlb9-prob2-tit, .tlb9-flow5-tit, .tlb9-rank, .tlb9-eq-w, .tlb9-verdict-say, .tlb9-myths-no, .tlb9-rebut-tit, .tlb9-upd-tit) :is(span, b, strong, em, i) {font-family: var(--tlb-font-head);}
.tlb-story.tlb-story img {display: block; max-width: 100%; height: auto;}
.tlb-story.tlb-story a {color: inherit;}
@media (max-width: 768px) {
.tlb-story {padding: 40px 16px;}
}
.tlb-story {--bg: color-mix(in oklab, var(--story-base) 76.8%, #000); --alt: color-mix(in oklab, var(--story-ink) 1.2%, var(--story-base)); --surf: var(--story-base); --ink: var(--story-ink); --sub: color-mix(in oklab, var(--story-ink) 70.4%, var(--story-base)); --faint:color-mix(in oklab, var(--story-ink) 46.9%, var(--story-base)); --navy: #000000; --line: color-mix(in srgb, var(--story-ink) 10%, transparent); background: var(--bg); color: var(--ink); letter-spacing: var(--tlb-ls-body);}
.tlb-story.tlb-story i, .tlb-story.tlb-story em {font-style: normal;}
.tlb-story {max-width: none; margin: 0; padding: 0;}
.tlb-story ~ .tlb_common_section .tlb_toc_idx_clean.tlb-toc-word {font-size: var(--tlb-fs-read); line-height: var(--tlb-lh-read); white-space: nowrap;}
.tlb-story.tlb-story .tlb9 {padding: 104px 22px; text-align: center; background: var(--bg);}
.tlb-story.tlb-story .tlb9--alt {background: color-mix(in oklab, var(--story-accent) 4.3%, var(--story-base));}
.tlb-story.tlb-story .tlb9-in {max-width: 720px; margin: 0 auto;}
.tlb-story.tlb-story .tlb9-eyebrow {margin: 0 0 28px; font-size: var(--tlb-fs-body); line-height: var(--tlb-lh-text); color: var(--sub);}
.tlb-story.tlb-story .tlb9-big {margin: 0; font-family: var(--tlb-font-head); font-weight: 800; font-size: var(--tlb-fs-title); line-height: var(--tlb-lh-title); letter-spacing: var(--tlb-ls-head); color: var(--ink); word-break: keep-all;}
.tlb-story.tlb-story .tlb9-mid {margin: 0; font-family: var(--tlb-font-head); font-weight: 700; font-size: var(--tlb-fs-h3); line-height: var(--tlb-lh-head); letter-spacing: var(--tlb-ls-head); color: var(--ink); word-break: keep-all;}
.tlb-story.tlb-story .tlb9-hl {background: linear-gradient(transparent 60%, color-mix(in srgb, var(--story-accent) 42%, transparent) 60%); padding: 0 2px;}
.tlb-story.tlb-story .tlb9-p {margin: 22px auto 0; max-width: 560px; font-size: var(--tlb-fs-body); line-height: var(--tlb-lh-body); color: var(--sub); word-break: keep-all;}
.tlb-story.tlb-story .tlb9-small {margin: 18px 0 0; font-size: var(--tlb-fs-caption); color: var(--faint);}
.tlb-story.tlb-story .tlb9-problem {max-width: 600px; margin: 0 auto; padding: 30px 28px; text-align: left; background: var(--story-ink); color: color-mix(in oklab, var(--story-accent) 26.3%, #000); border-radius: 6px; font-size: var(--tlb-fs-body); line-height: var(--tlb-lh-body);}
.tlb-story.tlb-story .tlb9-problem b, .tlb-story.tlb-story .tlb9-problem strong {display: block; margin-top: 14px; font-family: var(--tlb-font-head); font-size: var(--tlb-fs-lead);}
.tlb-story.tlb-story .tlb9-author {width: 100%; max-width: 480px; margin: 36px auto 0; display: block; border-radius: 6px;}
.tlb-story.tlb-story .tlb9-big {font-weight: 600;}
.tlb-story.tlb-story .tlb9-hl {font-family: var(--tlb-font-head) !important; font-weight: 800;}
.tlb-story.tlb-story .tlb9-name {margin: 30px 0 0; font-family: var(--tlb-font-head); font-weight: 800; font-size: var(--tlb-fs-h2); color: var(--ink);}
.tlb-story.tlb-story .tlb9-bio {max-width: 560px; margin: 26px auto 0; text-align: left; font-size: var(--tlb-fs-body); line-height: var(--tlb-lh-body); color: var(--sub); word-break: keep-all;}
.tlb-story.tlb-story .tlb9-bullets {list-style: none; max-width: 520px; margin: 28px auto 0; padding: 0; text-align: left;}
.tlb-story.tlb-story .tlb9-bullets li {position: relative; padding: 7px 0 7px 18px; font-size: var(--tlb-fs-body); line-height: var(--tlb-lh-compact); color: var(--ink);}
.tlb-story.tlb-story .tlb9-bullets li::before {content: "-"; position: absolute; left: 0; color: var(--pt);}
.tlb-story.tlb-story .tlb9-bullets li b, .tlb-story.tlb-story .tlb9-bullets li strong {font-family: var(--tlb-font-head); font-weight: 800;}
.tlb-story.tlb-story .tlb9-line {list-style: none; max-width: 560px; margin: 48px auto 0; padding: 0; text-align: left;}
.tlb-story.tlb-story .tlb9-line li {position: relative; padding: 0 0 36px 34px;}
.tlb-story.tlb-story .tlb9-line li::before {content: ""; position: absolute; left: 4px; top: 7px; width: 11px; height: 11px; border-radius: 50%; background: var(--pt);}
.tlb-story.tlb-story .tlb9-line li::after {content: ""; position: absolute; left: 9px; top: 24px; bottom: 4px; width: 1px; background: color-mix(in srgb, var(--story-ink) 22%, transparent);}
.tlb-story.tlb-story .tlb9-line li:last-child {padding-bottom: 0;}
.tlb-story.tlb-story .tlb9-line li:last-child::after {display: none;}
.tlb-story.tlb-story .tlb9-line-tit {margin: 0 0 12px; font-family: var(--tlb-font-head); font-weight: 800; font-size: 20px; line-height: var(--tlb-lh-head); color: var(--ink);}
.tlb-story.tlb-story .tlb9-line-desc {margin: 0; font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-text); color: var(--sub); word-break: keep-all;}
.tlb-story.tlb-story .tlb9-spec {display: grid; grid-template-columns: 88px 1fr; max-width: 520px; margin: 36px auto 0; text-align: left; font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-ui);}
.tlb-story.tlb-story .tlb9-spec dt, .tlb-story.tlb-story .tlb9-spec dd {margin: 0; padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--story-ink) 12%, transparent);}
.tlb-story.tlb-story .tlb9-spec dt {color: var(--sub);}
.tlb-story.tlb-story .tlb9-spec dd {color: var(--ink);}
.tlb-story.tlb-story .tlb9-cases {max-width: 560px; margin: 52px auto 0; text-align: left;}
.tlb-story.tlb-story .tlb9-case {padding: 30px 4px; border-top: 1px solid color-mix(in srgb, var(--story-ink) 13%, transparent);}
.tlb-story.tlb-story .tlb9-case:last-child {border-bottom: 1px solid color-mix(in srgb, var(--story-ink) 13%, transparent);}
.tlb-story.tlb-story .tlb9-case-head {display: flex; flex-wrap: wrap; gap: 6px 22px; margin-bottom: 16px;}
.tlb-story.tlb-story .tlb9-case-head p {margin: 0; font-family: var(--tlb-font-head); font-weight: 700; font-size: var(--tlb-fs-body); color: var(--ink);}
.tlb-story.tlb-story .tlb9-case-head span {margin-right: 8px; font-family: var(--tlb-font-body); font-weight: 500; font-size: var(--tlb-fs-caption); color: var(--faint);}
.tlb-story.tlb-story .tlb9-case-res--up {color: var(--pt) !important;}
.tlb-story.tlb-story .tlb9-case blockquote {margin: 0; font-size: var(--tlb-fs-read); line-height: var(--tlb-lh-text); color: var(--sub); word-break: keep-all;}
.tlb-story.tlb-story .tlb9-case blockquote b, .tlb-story.tlb-story .tlb9-case blockquote strong {font-weight: 700; color: var(--ink);}
.tlb-story.tlb-story .tlb9-case-src {margin: 12px 0 0; font-size: var(--tlb-fs-caption); color: var(--faint);}
.tlb-story.tlb-story .tlb9-routine {list-style: none; max-width: 520px; margin: 0 auto 44px; padding: 0;}
.tlb-story.tlb-story .tlb9-routine li {padding: 13px 0; font-size: var(--tlb-fs-h5); font-weight: 500; color: var(--sub); border-bottom: 1px dashed color-mix(in srgb, var(--story-ink) 14%, transparent); word-break: keep-all;}
.tlb-story.tlb-story .tlb9-sched {max-width: 560px; margin: -40px auto 64px; padding: 16px 4px 18px; border-top: 1px solid color-mix(in srgb, var(--story-ink) 14%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--story-ink) 14%, transparent);}
.tlb-story.tlb-story .tlb9-sched-tit {margin: 0 0 12px; font-size: var(--tlb-fs-micro); font-weight: 700; color: var(--pt);}
.tlb-story.tlb-story .tlb9-sched-row {display: grid; grid-template-columns: repeat(3, 1fr);}
.tlb-story.tlb-story .tlb9-sched-row p {margin: 0; font-family: var(--tlb-font-head); font-weight: 700; font-size: clamp(15px, 4vw, 18px); color: var(--ink);}
.tlb-story.tlb-story .tlb9-sched-row span {display: block; margin-bottom: 4px; font-family: var(--tlb-font-body); font-weight: 500; font-size: var(--tlb-fs-micro); color: var(--sub);}
.tlb-story.tlb-story .tlb9-line--plain li {padding-left: 30px;}
.tlb-story.tlb-story .tlb9-line--plain .tlb9-line-tit {margin-bottom: 6px;}
.tlb-story.tlb-story .tlb9-tangle {display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 10px 16px; max-width: 560px; margin: 28px auto 40px;}
.tlb-story.tlb-story .tlb9-tangle-w {display: inline-block; font-family: var(--tlb-font-head); font-weight: 700; line-height: var(--tlb-lh-title); white-space: nowrap;}
.tlb-story.tlb-story .tlb9-tangle-w--0 {font-size: 21px; color: var(--ink); transform: rotate(-3deg);}
.tlb-story.tlb-story .tlb9-tangle-w--1 {font-size: var(--tlb-fs-small); color: var(--sub); transform: rotate(2deg);}
.tlb-story.tlb-story .tlb9-tangle-w--2 {font-size: var(--tlb-fs-lead); color: var(--pt); transform: rotate(-1deg);}
.tlb-story.tlb-story .tlb9-tangle-w--3 {font-size: var(--tlb-fs-meta); color: var(--faint); transform: rotate(3deg);}
.tlb-story.tlb-story .tlb9-points {max-width: 560px; margin: 48px auto 0;}
.tlb-story.tlb-story .tlb9-points p {margin: 0; padding: 26px 8px; border-top: 1px solid color-mix(in srgb, var(--story-accent) 35%, transparent); font-family: var(--tlb-font-head); font-weight: 800; font-size: var(--tlb-fs-h4); line-height: var(--tlb-lh-head); color: var(--pt); word-break: keep-all;}
.tlb-story.tlb-story .tlb9--spotlight {background: radial-gradient(ellipse 70% 42% at 50% 64%, color-mix(in srgb, var(--story-accent) 30%, transparent) 0%, color-mix(in srgb, var(--story-accent) 8%, transparent) 45%, color-mix(in oklab, var(--story-base) 85.9%, #000) 78%);}
.tlb-story.tlb-story .tlb9-contents {max-width: 560px; margin: 28px auto 40px;}
.tlb-story.tlb-story .tlb9-contents p {margin: 0; padding: 12px 0; font-family: var(--tlb-font-head); font-weight: 700; font-size: var(--tlb-fs-h4); line-height: var(--tlb-lh-head); color: var(--ink); word-break: keep-all;}
.tlb-story.tlb-story .tlb9-contents p + p {border-top: 1px solid color-mix(in srgb, var(--story-ink) 10%, transparent);}
.tlb-story.tlb-story .tlb9-spot {position: relative; margin: 52px auto 0; width: 70%; max-width: 330px;}
.tlb-story.tlb-story .tlb9-spot::after {content: ""; position: absolute; left: 6%; right: 6%; bottom: -26px; height: 26px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0,0,0,0.75), transparent 70%);}
.tlb-story.tlb-story .tlb9-spot-book {position: relative; z-index: 1; display: block; width: 100%; border-radius: 2px 6px 6px 2px; box-shadow: 0 30px 60px rgba(0,0,0,0.7), 0 0 80px color-mix(in srgb, var(--story-accent) 18%, transparent);}
.tlb-story.tlb-story .tlb9--spotlight .tlb9-name {margin-top: 48px;}
.tlb-story.tlb-story .tlb9-sched {margin: 56px auto 0 !important;}
.tlb-story.tlb-story .tlb9-sched-note {margin: 12px 0 0; font-size: var(--tlb-fs-micro); color: var(--faint);}
.tlb-story.tlb-story .tlb9-peep {width: 190px; height: 190px; margin: 44px auto 0; border-radius: 50%; background: var(--story-ink); overflow: hidden;}
.tlb-story.tlb-story .tlb9-peep img {display: block; width: 100%; height: auto; margin-top: 8px;}
@keyframes tlb9-tag {from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; }}
.tlb-story.tlb-story .tlb9-checks {list-style: none; max-width: 540px; margin: 44px auto 0; padding: 0; text-align: left;}
.tlb-story.tlb-story .tlb9-checks li {position: relative; display: flex; align-items: center; gap: 22px; padding: 22px 4px 22px 6px; border-top: 1px solid color-mix(in srgb, var(--story-ink) 12%, transparent); font-family: var(--tlb-font-head); font-weight: 700; font-size: var(--tlb-fs-h5); line-height: var(--tlb-lh-head); color: var(--ink); word-break: keep-all;}
.tlb-story.tlb-story .tlb9-checks li:last-child {border-bottom: 1px solid color-mix(in srgb, var(--story-ink) 12%, transparent);}
.tlb-story.tlb-story .tlb9-pen {position: absolute; left: -6px; top: -22px; width: 52px; height: 46px; overflow: visible; transform: rotate(-6deg);}
.tlb-story.tlb-story .tlb9-pen path {stroke-dasharray: 90; stroke-dashoffset: 0;}
@supports (animation-timeline: view()) {
.tlb-story.tlb-story .tlb9-checks li {view-timeline-name: --chk;}
.tlb-story.tlb-story .tlb9-pen path {animation: tlb9-pen linear both; animation-timeline: --chk; animation-range: entry 70% cover 40%;}
}
@keyframes tlb9-pen {from { stroke-dashoffset: 90; } to { stroke-dashoffset: 0; }}
.tlb-story.tlb-story .tlb9-pen {left: -8px; top: -32px; width: 66px; height: 58px;}
.tlb-story.tlb-story .tlb9-qa {position: relative; max-width: 600px; margin: 48px auto 0; text-align: left; counter-reset: qn;}
.tlb-story.tlb-story .tlb9-qa-who {margin: 0 0 8px 4px; font-size: var(--tlb-fs-micro); font-weight: 700; color: var(--pt);}
.tlb-story.tlb-story .tlb9-qa-who--r {margin: 34px 4px 8px 0; text-align: right;}
.tlb-story.tlb-story .tlb9-qa-q {position: relative; width: 80%; padding: 16px 18px; border-radius: 4px 18px 18px 18px; background: color-mix(in oklab, var(--story-accent) 19.3%, var(--story-base)); color: var(--ink); font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-compact); word-break: keep-all;}
.tlb-story.tlb-story .tlb9-qa-q::before {content: ""; position: absolute; left: -9px; top: 0; border-top: 12px solid color-mix(in oklab, var(--story-accent) 19.3%, var(--story-base)); border-left: 10px solid transparent;}
.tlb-story.tlb-story .tlb9-u {text-decoration: none; background: linear-gradient(var(--pt), var(--pt)) no-repeat 0 100% / 100% 2px; padding-bottom: 2px;}
@supports (animation-timeline: view()) {
.tlb-story.tlb-story .tlb9-u {animation: tlb9-ul linear both; animation-timeline: view(); animation-range: entry 70% cover 40%;}
}
@keyframes tlb9-ul {from { background-size: 0% 2px; } to { background-size: 100% 2px; }}
@media (min-width: 600px) {
.tlb-story.tlb-story .tlb9-qa {max-width: 540px;}
}
.tlb-story.tlb-story .tlb9-points > div {padding: 24px 8px; border-top: 1px solid color-mix(in srgb, var(--story-accent) 35%, transparent);}
.tlb-story.tlb-story .tlb9-points > div:last-child {border-bottom: 1px solid color-mix(in srgb, var(--story-accent) 35%, transparent);}
.tlb-story.tlb-story .tlb9-points > div p {margin: 0; padding: 0; border: 0 !important; font-family: var(--tlb-font-head); font-weight: 800; font-size: var(--tlb-fs-h4); line-height: var(--tlb-lh-head); color: var(--pt); word-break: keep-all;}
.tlb-story.tlb-story .tlb9-points > div span {display: block; margin-top: 10px; font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-compact); color: var(--sub); word-break: keep-all;}
.tlb-story.tlb-story .tlb9-p + .tlb9-p {margin-top: 16px;}
.tlb-story.tlb-story .tlb9-chat {max-width: 560px; margin: 44px auto 0; text-align: left;}
.tlb-story.tlb-story .tlb9-say {position: relative; width: 84%; margin: 0 0 12px; padding: 15px 18px; font-family: var(--tlb-font-head); font-weight: 400; font-size: var(--tlb-fs-body); line-height: var(--tlb-lh-compact); color: var(--ink); word-break: keep-all;}
.tlb-story.tlb-story .tlb9-say--l {background: color-mix(in oklab, var(--story-accent) 19.3%, var(--story-base)); border-radius: 4px 18px 18px 18px;}
.tlb-story.tlb-story .tlb9-say--l::before {content: ""; position: absolute; left: -9px; top: 0; border-top: 12px solid color-mix(in oklab, var(--story-accent) 19.3%, var(--story-base)); border-left: 10px solid transparent;}
.tlb-story.tlb-story .tlb9-say--r {margin-left: auto; background: color-mix(in oklab, var(--story-accent) 34%, #000); border: 1px solid color-mix(in srgb, var(--story-accent) 28%, transparent); border-radius: 18px 4px 18px 18px;}
.tlb-story.tlb-story .tlb9-say--r::before {content: ""; position: absolute; right: -10px; top: -1px; border-top: 12px solid color-mix(in oklab, var(--story-accent) 34%, #000); border-right: 10px solid transparent;}
.tlb-story.tlb-story .tlb9-qa-q {font-family: var(--tlb-font-head); font-weight: 400;}
.tlb-story.tlb-story .tlb9-moments {max-width: 540px; margin: 56px auto 28px; text-align: left;}
.tlb-story.tlb-story .tlb9-moment {padding: 34px 4px; border-top: 1px solid color-mix(in srgb, var(--story-signal) 25%, transparent);}
.tlb-story.tlb-story .tlb9-moment:last-child {border-bottom: 1px solid color-mix(in srgb, var(--story-signal) 25%, transparent);}
.tlb-story.tlb-story .tlb9-moment-cnt {margin: 0; font-family: var(--tlb-font-head); font-weight: 700; font-size: var(--tlb-fs-small); color: var(--story-signal);}
.tlb-story.tlb-story .tlb9-cnt {--num: var(--to); counter-reset: n var(--num); font-size: 44px; font-weight: 800; letter-spacing: var(--tlb-ls-head);}
.tlb-story.tlb-story .tlb9-cnt::after {content: counter(n);}
.tlb-story.tlb-story .tlb9-moment-bar {height: 3px; margin: 8px 0 18px; background: color-mix(in srgb, var(--story-signal) 15%, transparent);}
.tlb-story.tlb-story .tlb9-moment-bar span {display: block; height: 100%; width: var(--w); background: var(--story-signal);}
.tlb-story.tlb-story .tlb9-moment-tit {margin: 0 0 12px; font-family: var(--tlb-font-head); font-weight: 800; font-size: var(--tlb-fs-h4); line-height: var(--tlb-lh-title); color: var(--ink); word-break: keep-all;}
.tlb-story.tlb-story .tlb9-moment-q {margin: 0; font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-text); color: var(--sub); word-break: keep-all;}
@property --num {syntax: "<integer>"; initial-value: 0; inherits: false;}
@supports (animation-timeline: view()) {
.tlb-story.tlb-story .tlb9-moment {view-timeline-name: --mom;}
.tlb-story.tlb-story .tlb9-cnt {animation: tlb9-cnt linear both; animation-timeline: --mom; animation-range: entry 40% cover 40%;}
.tlb-story.tlb-story .tlb9-moment-bar span {animation: tlb9-bar linear both; animation-timeline: --mom; animation-range: entry 40% cover 40%;}
.tlb-story.tlb-story .tlb9-moment-tit {animation: tlb9-tag linear both; animation-timeline: --mom; animation-range: entry 50% cover 35%;}
.tlb-story.tlb-story .tlb9-moment-q {animation: tlb9-fade linear both; animation-timeline: --mom; animation-range: entry 70% cover 45%;}
}
@keyframes tlb9-cnt {from { --num: 0; } to { --num: var(--to); }}
@keyframes tlb9-bar {from { width: 0; } to { width: var(--w); }}
@keyframes tlb9-fade {from { opacity: 0; } to { opacity: 1; }}
.tlb-story.tlb-story .tlb9-u {font-weight: 700;}
@media (min-width: 600px) {
.tlb-story.tlb-story .tlb9-qa {max-width: 640px;}
.tlb-story.tlb-story .tlb9-qa {max-width: 760px;}
.tlb-story.tlb-story .tlb9-qa-q {width: 56%; margin-left: 12%;}
.tlb-story.tlb-story .tlb9-qa-who:first-child {margin-left: 12%;}
.tlb-story.tlb-story .tlb9-qa-who--r {width: 50%; margin: 34px auto 8px;}
}
@supports (anchor-name: --a) {
.tlb-story.tlb-story .tlb9-qa {--d: 16px; --g: 34px;}
}
@media (min-width: 600px) {
@supports (anchor-name: --a) {
.tlb-story.tlb-story .tlb9-qa {--d: 26px; --g: 56px;}
}
}
.tlb-story.tlb-story .tlb9-box2 {position: relative; flex: 0 0 34px; width: 34px; height: 30px;}
.tlb-story.tlb-story .tlb9-box2 .tlb9-pen {position: absolute; left: -8px; top: -26px; width: 62px; height: 56px; transform: none; overflow: visible;}
.tlb-story.tlb-story .tlb9-pen-mark {transform-origin: 20px 50px;}
@supports (animation-timeline: view()) {
.tlb-story.tlb-story .tlb9-pen-mark {animation: tlb9-stamp linear both; animation-timeline: --chk; animation-range: entry 70% cover 40%;}
}
@keyframes tlb9-stamp {0% { opacity: 0; transform: scale(.6) rotate(-8deg); clip-path: inset(0 100% 0 0); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }}
.tlb-story.tlb-story .tlb9-box2 {position: relative; flex: 0 0 34px; width: 34px; height: 30px;}
.tlb-story.tlb-story .tlb9-box2 .tlb9-pen {position: absolute; left: -8px; top: -26px; width: 62px; height: 56px; transform: none; overflow: visible;}
.tlb-story.tlb-story .tlb9-pen-mark {transform-origin: 20px 50px;}
@supports (animation-timeline: view()) {
.tlb-story.tlb-story .tlb9-pen-mark {animation: tlb9-stamp linear both; animation-timeline: --chk; animation-range: entry 70% cover 40%;}
}
@keyframes tlb9-stamp {0% { opacity: 0; clip-path: inset(0 100% 0 0); } 40% { opacity: 1; } 100% { opacity: 1; clip-path: inset(0 0 0 0); }}
.tlb-story.tlb-story .tlb9-bullets li {font-family: var(--tlb-font-head) !important;}
.tlb-story.tlb-story .tlb9-letter {max-width: 560px; margin: 48px auto 0; padding: 28px 24px; border-radius: 6px; background: var(--story-ink); text-align: left;}
.tlb-story.tlb-story .tlb9-letter-tit {margin: 0 0 12px; font-family: var(--tlb-font-head); font-weight: 800; font-size: var(--tlb-fs-body); color: oklch(from var(--story-accent) calc(l - 0.266) calc(c + 0.017) calc(h + 3.3));}
.tlb-story.tlb-story .tlb9-letter .tlb9-bio {margin: 0; color: color-mix(in oklab, var(--story-accent) 34%, #000) !important; font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-body);}
.tlb-story.tlb-story .tlb9-rvs {columns: 2; column-gap: 14px; max-width: 900px; margin: 44px auto 28px; text-align: left;}
@media (min-width: 900px) {
.tlb-story.tlb-story .tlb9-rvs {columns: 3;}
}
@media (max-width: 420px) {
.tlb-story.tlb-story .tlb9-rvs {columns: 1;}
}
.tlb-story.tlb-story .tlb9-rv {display: inline-block; width: 100%; margin: 0 0 22px; break-inside: avoid;}
.tlb-story.tlb-story .tlb9-rv blockquote {position: relative; margin: 0; padding: 18px 18px 16px; border-radius: 16px; background: var(--story-ink); color: color-mix(in oklab, var(--story-accent) 34%, #000); font-family: var(--tlb-font-head); font-weight: 400; font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-text); word-break: keep-all;}
.tlb-story.tlb-story .tlb9-rv blockquote b, .tlb-story.tlb-story .tlb9-rv blockquote strong {font-weight: 800; color: color-mix(in oklab, var(--story-accent) 24.6%, #000); background: linear-gradient(transparent 60%, rgba(214,59,42,0.18) 60%);}
.tlb-story.tlb-story .tlb9-rv--l blockquote {border-bottom-left-radius: 4px;}
.tlb-story.tlb-story .tlb9-rv--r blockquote {border-bottom-right-radius: 4px;}
.tlb-story.tlb-story .tlb9-rv--l blockquote::after {content: ""; position: absolute; left: 0; bottom: -10px; border-top: 10px solid var(--story-ink); border-right: 12px solid transparent;}
.tlb-story.tlb-story .tlb9-rv--r blockquote::after {content: ""; position: absolute; right: 0; bottom: -10px; border-top: 10px solid var(--story-ink); border-left: 12px solid transparent;}
.tlb-story.tlb-story .tlb9-faqs {max-width: 600px; margin: 40px auto 0; text-align: left;}
.tlb-story.tlb-story .tlb9-faq {border-top: 1px solid color-mix(in srgb, var(--story-ink) 13%, transparent);}
.tlb-story.tlb-story .tlb9-faq:last-child {border-bottom: 1px solid color-mix(in srgb, var(--story-ink) 13%, transparent);}
.tlb-story.tlb-story .tlb9-faq summary {position: relative; list-style: none; cursor: pointer; padding: 20px 40px 20px 4px; font-family: var(--tlb-font-head); font-weight: 700; font-size: var(--tlb-fs-body); line-height: var(--tlb-lh-ui); color: var(--ink); word-break: keep-all;}
.tlb-story.tlb-story .tlb9-faq summary::-webkit-details-marker {display: none;}
.tlb-story.tlb-story .tlb9-faq summary::after {content: "+"; position: absolute; right: 8px; top: 16px; font-size: 24px; font-weight: 400; color: var(--pt); transition: transform .2s;}
.tlb-story.tlb-story .tlb9-faq[open] summary::after {transform: rotate(45deg);}
.tlb-story.tlb-story .tlb9-faq p {margin: 0; padding: 0 8px 22px 4px; font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-body); color: var(--sub); word-break: keep-all;}
.tlb-story.tlb-story .tlb9-hl {background-repeat: no-repeat; background-position: 0 0; background-size: 100% 100%;}
@keyframes tlb9-rise {from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; }}
@keyframes tlb9-rise-s {from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; }}
@keyframes tlb9-from-l {from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; }}
@keyframes tlb9-from-r {from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; }}
@keyframes tlb9-hlsweep {from { background-size: 0% 100%; } to { background-size: 100% 100%; }}
@keyframes tlb9-book {from { opacity: 0; transform: translateY(60px) rotate(-3deg) scale(.94); } to { opacity: 1; transform: none; }}
@keyframes tlb9-scatter {from { opacity: 0; transform: translate(var(--tx, 0), var(--ty, 0)) rotate(var(--rot, 0deg)) scale(.8); }}
@keyframes tlb9-float {0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); }}
@media (prefers-reduced-motion: no-preference) {
.tlb-story.tlb-story .tlb9-peep img {animation: tlb9-float 4.5s ease-in-out infinite;}
.tlb-story.tlb-story .tlb9--hero .tlb9-eyebrow {animation: tlb9-rise .8s .1s cubic-bezier(.2,.7,.2,1) both;}
.tlb-story.tlb-story .tlb9--hero .tlb9-big {animation: tlb9-rise .9s .35s cubic-bezier(.2,.7,.2,1) both;}
.tlb-story.tlb-story .tlb9--hero .tlb9-hl {animation: tlb9-hlsweep .8s 1s ease-out both;}
.tlb-story.tlb-story .tlb9--hero .tlb9-sched {animation: tlb9-rise .9s 1.3s cubic-bezier(.2,.7,.2,1) both;}
@supports (animation-timeline: view()) {
.tlb-story.tlb-story .tlb9:not(.tlb9--hero) :is(.tlb9-big, .tlb9-mid, .tlb9-label, .tlb9-name) {animation: tlb9-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 70%;}
.tlb-story.tlb-story .tlb9:not(.tlb9--hero) .tlb9-hl {animation: tlb9-hlsweep linear both; animation-timeline: view(); animation-range: entry 60% cover 38%;}
.tlb-story.tlb-story .tlb9:not(.tlb9--hero) :is(.tlb9-p, .tlb9-small) {animation: tlb9-rise linear both; animation-timeline: view(); animation-range: entry 10% entry 90%;}
.tlb-story.tlb-story :is(.tlb9-routine li, .tlb9-ops > div, .tlb9-points > div, .tlb9-map-row, .tlb9-rows li, .tlb9-line li, .tlb9-faq, .tlb9-case, .tlb9-checks li) {animation: tlb9-from-l linear both; animation-timeline: view(); animation-range: entry 0% entry 80%;}
.tlb-story.tlb-story :is(.tlb9-problem, .tlb9-letter, .tlb9-author, .tlb9-rv, .tlb9-step, .tlb9-moment, .tlb9-tl, .tlb9-sched) {animation: tlb9-rise-s linear both; animation-timeline: view(); animation-range: entry 0% entry 75%;}
.tlb-story.tlb-story :is(.tlb9-say--l, .tlb9-qa-q) {animation: tlb9-from-l linear both; animation-timeline: view(); animation-range: entry 10% entry 80%;}
.tlb-story.tlb-story .tlb9-say--r {animation: tlb9-from-r linear both; animation-timeline: view(); animation-range: entry 10% entry 80%;}
.tlb-story.tlb-story .tlb9-spot-book {animation: tlb9-book linear both; animation-timeline: view(); animation-range: entry 0% cover 40%;}
.tlb-story.tlb-story .tlb9-peep {animation: tlb9-rise-s linear both; animation-timeline: view(); animation-range: entry 0% entry 70%;}
.tlb-story.tlb-story .tlb9-tangle-w {animation: tlb9-scatter linear both; animation-timeline: view(); animation-range: entry 20% cover 45%;}
.tlb-story.tlb-story .tlb9-tangle-w:nth-child(4n/**/+1) {--tx: -40px; --ty: -26px; --rot: -12deg;}
.tlb-story.tlb-story .tlb9-tangle-w:nth-child(4n/**/+2) {--tx: 36px; --ty: 20px; --rot: 10deg;}
.tlb-story.tlb-story .tlb9-tangle-w:nth-child(4n/**/+3) {--tx: -28px; --ty: 30px; --rot: 8deg;}
.tlb-story.tlb-story .tlb9-tangle-w:nth-child(4n) {--tx: 44px; --ty: -22px; --rot: -9deg;}
}
}
@media (prefers-reduced-motion: reduce) {
.tlb-story.tlb-story * {animation: none !important;}
}
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
.tlb-story.tlb-story :is(.tlb9-contents p, .tlb9-bullets li, .tlb9-schools > div) {animation: tlb9-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 80%;}
}
}
.tlb-story.tlb-story .tlb9-p {max-width: 30em; text-wrap: balance;}
.tlb-story.tlb-story .tlb9-small {max-width: 34em; margin-left: auto; margin-right: auto; text-wrap: balance;}
.tlb-story.tlb-story .tlb9-qa2 {display: grid; grid-template-columns: 1fr 64%; column-gap: 22px;}
.tlb-story.tlb-story .tlb9-qa2-row {display: contents;}
.tlb-story.tlb-story .tlb9-qa2-row:nth-child(1) > * {grid-row: 1;}
.tlb-story.tlb-story .tlb9-qa2-row:nth-child(2) > * {grid-row: 2;}
.tlb-story.tlb-story .tlb9-qa2-row:nth-child(3) > * {grid-row: 3;}
.tlb-story.tlb-story .tlb9-qa2-row:nth-child(4) > * {grid-row: 4;}
.tlb-story.tlb-story .tlb9-qa2-row:nth-child(5) > * {grid-row: 5;}
.tlb-story.tlb-story .tlb9-qa2-note {grid-column: 1; position: relative; align-self: start; margin: 7px 0 14px; padding: 8px 10px; border-radius: 8px; background: var(--story-ink); color: color-mix(in oklab, var(--story-accent) 24.6%, #000); font-size: var(--tlb-fs-micro); line-height: var(--tlb-lh-title); box-shadow: 0 6px 16px rgba(0,0,0,0.35); word-break: keep-all;}
.tlb-story.tlb-story .tlb9-qa2-row:first-child .tlb9-qa2-note {margin-top: 15px;}
.tlb-story.tlb-story .tlb9-qa2-note small {display: block; font-size: 10.5px; color: oklch(from var(--story-accent) calc(l - 0.209) calc(c + 0.013) calc(h + 3.6));}
.tlb-story.tlb-story .tlb9-qa2-note b, .tlb-story.tlb-story .tlb9-qa2-note strong {display: block; margin: 2px 0 3px; font-size: var(--tlb-fs-caption);}
.tlb-story.tlb-story .tlb9-qa2-note span {display: block; color: color-mix(in oklab, var(--story-accent) 55.6%, #000);}
.tlb-story.tlb-story .tlb9-qa2-note::after {content: ""; position: absolute; left: 100%; top: 18px; width: 22px; height: 1.5px; background: var(--pt);}
.tlb-story.tlb-story .tlb9-qa2-txt {grid-column: 2; position: relative; margin: 0; padding: 10px 18px; background: color-mix(in oklab, var(--story-accent) 34%, #000); border-left: 1px solid color-mix(in srgb, var(--story-accent) 28%, transparent); border-right: 1px solid color-mix(in srgb, var(--story-accent) 28%, transparent); font-family: var(--tlb-font-head); font-weight: 400; font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-read); color: var(--ink); word-break: keep-all;}
.tlb-story.tlb-story .tlb9-qa2-row:first-child .tlb9-qa2-txt {padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--story-accent) 28%, transparent); border-radius: 18px 4px 0 0;}
.tlb-story.tlb-story .tlb9-qa2-row:first-child .tlb9-qa2-txt::before {content: ""; position: absolute; right: -10px; top: -1px; border-top: 12px solid color-mix(in oklab, var(--story-accent) 34%, #000); border-right: 10px solid transparent;}
.tlb-story.tlb-story .tlb9-qa2-row:last-child .tlb9-qa2-txt {padding-bottom: 18px; border-bottom: 1px solid color-mix(in srgb, var(--story-accent) 28%, transparent); border-radius: 0 0 18px 18px;}
.tlb-story.tlb-story .tlb9-qa2 .tlb9-u {font-weight: 700;}
@media (min-width: 600px) {
.tlb-story.tlb-story .tlb9-qa2 {grid-template-columns: 1fr 48% 1fr; column-gap: 26px;}
.tlb-story.tlb-story .tlb9-qa2-row--r .tlb9-qa2-note {grid-column: 3;}
.tlb-story.tlb-story .tlb9-qa2-note::after {width: 26px;}
.tlb-story.tlb-story .tlb9-qa2-row--r .tlb9-qa2-note::after {left: auto; right: 100%;}
.tlb-story.tlb-story .tlb9-qa2-note {max-width: 190px;}
.tlb-story.tlb-story .tlb9-qa2-row--l .tlb9-qa2-note {justify-self: end;}
}
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
.tlb-story.tlb-story .tlb9-qa2-note {animation: tlb9-tag linear both; animation-timeline: view(); animation-range: entry 60% cover 40%;}
.tlb-story.tlb-story .tlb9-qa2-txt {animation: none;}
}
}
/* 크게 보기 체크박스는 화면에 고정: 글 끝에 둔 체크박스에 포커스가 가면 브라우저가 그 자리로 스크롤해 닫은 뒤 페이지 바닥에 남던 문제(2026-09-28 대표 제보) */
.tlb-story.tlb-story .tlb9-lb-toggle {position: fixed; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none;}
.tlb-story.tlb-story .tlb9-lb {display: none; position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center; padding: 18px; background: rgba(0,0,0,0.9); cursor: zoom-out;}
.tlb-story.tlb-story .tlb9-lb-toggle:checked + .tlb9-lb {display: flex;}
.tlb-story.tlb-story .tlb9-lb img {max-width: 100%; max-height: 90vh; border-radius: 4px; box-shadow: 0 20px 60px rgba(0,0,0,0.6);}
.tlb-story.tlb-story .tlb9-lb i, .tlb-story.tlb-story .tlb9-lb em {position: absolute; top: 14px; right: 18px; color: var(--story-ink); font-size: var(--tlb-fs-meta); font-style: normal;}
.tlb-story.tlb-story .tlb9-track {position: relative; display: grid; grid-template-columns: 1fr; gap: 0; max-width: 900px; margin: 48px auto 0; text-align: left;}
.tlb-story.tlb-story .tlb9-track-st {position: relative; padding: 0 0 26px 30px;}
.tlb-story.tlb-story .tlb9-track-st::before {content: ""; position: absolute; left: 4px; top: 6px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--pt); background: var(--story-base);}
.tlb-story.tlb-story .tlb9-track-st::after {content: ""; position: absolute; left: 10px; top: 24px; bottom: 2px; width: 1.5px; background: color-mix(in srgb, var(--story-accent) 35%, transparent);}
.tlb-story.tlb-story .tlb9-track-st:last-child::after {display: none;}
.tlb-story.tlb-story .tlb9-track-st--now::before {background: var(--pt); box-shadow: 0 0 0 6px color-mix(in srgb, var(--story-accent) 18%, transparent);}
.tlb-story.tlb-story .tlb9-track-st b, .tlb-story.tlb-story .tlb9-track-st strong {display: block; margin-bottom: 6px; font-family: var(--tlb-font-head); font-weight: 800; font-size: var(--tlb-fs-lead); color: var(--ink);}
.tlb-story.tlb-story .tlb9-track-st--now b, .tlb-story.tlb-story .tlb9-track-st--now strong {color: var(--pt);}
.tlb-story.tlb-story .tlb9-track-st span {display: block; font-size: var(--tlb-fs-meta); line-height: var(--tlb-lh-compact); color: var(--sub); word-break: keep-all;}
@media (min-width: 760px) {
.tlb-story.tlb-story .tlb9-track {grid-template-columns: repeat(4, 1fr); gap: 18px;}
.tlb-story.tlb-story .tlb9-track-st {padding: 34px 0 0;}
.tlb-story.tlb-story .tlb9-track-st::before {left: 0; top: 0;}
.tlb-story.tlb-story .tlb9-track-st::after {left: 20px; right: -14px; top: 7px; bottom: auto; width: auto; height: 1.5px;}
}
.tlb-story.tlb-story .tlb9-qlist {max-width: 520px; margin: 32px auto 8px; padding: 0; list-style: none; counter-reset: q; text-align: left;}
.tlb-story.tlb-story .tlb9-qlist li {counter-increment: q; display: grid; grid-template-columns: 30px 1fr; padding: 14px 4px; border-top: 1px solid color-mix(in srgb, var(--story-ink) 12%, transparent); font-family: var(--tlb-font-head); font-weight: 700; font-size: var(--tlb-fs-read); color: var(--ink); word-break: keep-all;}
.tlb-story.tlb-story .tlb9-qlist li:last-child {border-bottom: 1px solid color-mix(in srgb, var(--story-ink) 12%, transparent);}
.tlb-story.tlb-story .tlb9-qlist li::before {content: counter(q); color: var(--pt); font-weight: 800;}
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
.tlb-story.tlb-story :is(.tlb9-track-st, .tlb9-qlist li) {animation: tlb9-from-l linear both; animation-timeline: view(); animation-range: entry 0% entry 80%;}
}
}
.tlb-story.tlb-story .tlb9-chat .tlb9-say--r {font-size: var(--tlb-fs-h5); font-weight: 600; padding: 16px 20px;}
.tlb-story.tlb-story .tlb9-prob2 {width: 84%; margin: 10px 0 30px auto; padding: 16px 18px; border-radius: 10px; background: color-mix(in srgb, var(--story-signal) 10%, transparent); border: 1px solid color-mix(in srgb, var(--story-signal) 35%, transparent); text-align: left;}
.tlb-story.tlb-story .tlb9-prob2-tag {margin: 0 0 6px; font-size: var(--tlb-fs-micro); font-weight: 700; color: var(--story-signal);}
.tlb-story.tlb-story .tlb9-prob2-tit {margin: 0 0 6px; font-family: var(--tlb-font-head); font-weight: 800; font-size: var(--tlb-fs-read); color: color-mix(in oklab, var(--story-signal) 57.7%, #fff);}
.tlb-story.tlb-story .tlb9-prob2-txt {margin: 0; font-size: var(--tlb-fs-meta); line-height: var(--tlb-lh-text); color: var(--ink); word-break: keep-all;}
.tlb-story.tlb-story .tlb9-chat .tlb9-qa-who--r {margin-top: 18px;}
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
.tlb-story.tlb-story .tlb9:not(.tlb9--hero) :is(.tlb9-big, .tlb9-mid, .tlb9-label, .tlb9-name) {animation-range: entry 40% cover 38%;}
.tlb-story.tlb-story .tlb9:not(.tlb9--hero) .tlb9-hl {animation-range: cover 28% cover 48%;}
.tlb-story.tlb-story .tlb9:not(.tlb9--hero) :is(.tlb9-p, .tlb9-small) {animation-range: entry 60% cover 42%;}
.tlb-story.tlb-story :is(.tlb9-routine li, .tlb9-ops > div, .tlb9-points > div, .tlb9-map-row, .tlb9-rows li, .tlb9-line li, .tlb9-faq, .tlb9-case, .tlb9-checks li, .tlb9-track-st, .tlb9-qlist li, .tlb9-contents p, .tlb9-bullets li, .tlb9-schools > div) {animation-range: entry 50% cover 40%;}
.tlb-story.tlb-story :is(.tlb9-problem, .tlb9-letter, .tlb9-author, .tlb9-rv, .tlb9-step, .tlb9-moment, .tlb9-sched, .tlb9-peep) {animation-range: entry 30% cover 38%;}
.tlb-story.tlb-story :is(.tlb9-say--l, .tlb9-say--r, .tlb9-qa-q) {animation-range: entry 50% cover 40%;}
.tlb-story.tlb-story .tlb9-prob2 {animation: tlb9-rise linear both; animation-timeline: view(); animation-range: entry 70% cover 45%;}
.tlb-story.tlb-story .tlb9-spot-book {animation-range: entry 20% cover 50%;}
.tlb-story.tlb-story .tlb9-tangle-w {animation-range: entry 40% cover 50%;}
}
}
.tlb-story.tlb-story .tlb9 {letter-spacing: var(--tlb-ls-body);}
.tlb-story.tlb-story .tlb9 :is(.tlb9-big, .tlb9-mid, .tlb9-dday, .tlb9-name) {letter-spacing: var(--tlb-ls-head);}
.tlb-story.tlb-story .tlb9-p b, .tlb-story.tlb-story .tlb9-line-desc b, .tlb-story.tlb-story .tlb9-faq p b, .tlb-story.tlb-story .tlb9-p strong, .tlb-story.tlb-story .tlb9-line-desc strong, .tlb-story.tlb-story .tlb9-faq p strong {font-weight: 700; color: var(--ink);}
.tlb-story.tlb-story .tlb9-prob2-txt b, .tlb-story.tlb-story .tlb9-prob2-txt strong {font-weight: 700; color: color-mix(in oklab, var(--story-signal) 57.7%, #fff);}
.tlb-story.tlb-story .tlb9-moment-qs {display: grid; gap: 10px; margin-top: 4px;}
.tlb-story.tlb-story .tlb9-moment-qs .tlb9-moment-q {padding: 12px 14px; border-radius: 4px 14px 14px 14px; background: color-mix(in oklab, var(--story-accent) 12.1%, var(--story-base)); font-size: var(--tlb-fs-meta); line-height: var(--tlb-lh-compact);}
.tlb-story.tlb-story .tlb9-solves {max-width: 860px; margin: 48px auto 0; text-align: left;}
.tlb-story.tlb-story .tlb9-solve {display: grid; grid-template-columns: 1fr; gap: 18px; padding: 36px 0; border-top: 1px solid color-mix(in srgb, var(--story-ink) 12%, transparent);}
.tlb-story.tlb-story .tlb9-solve:last-child {border-bottom: 1px solid color-mix(in srgb, var(--story-ink) 12%, transparent);}
.tlb-story.tlb-story .tlb9-solve-pain {display: inline-block; margin: 0 0 10px; font-size: var(--tlb-fs-meta); font-weight: 700; color: var(--story-signal);}
.tlb-story.tlb-story .tlb9-solve-pain::before {content: "고민 "; font-weight: 800;}
.tlb-story.tlb-story .tlb9-solve-tit {margin: 0 0 12px; font-family: var(--tlb-font-head); font-weight: 800; font-size: var(--tlb-fs-h4); line-height: var(--tlb-lh-title); letter-spacing: var(--tlb-ls-head); color: var(--pt); word-break: keep-all;}
.tlb-story.tlb-story .tlb9-solve-desc {margin: 0 0 16px; font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-text); color: var(--ink); word-break: keep-all;}
.tlb-story.tlb-story .tlb9-solve-list {list-style: none; margin: 0; padding: 0;}
.tlb-story.tlb-story .tlb9-solve-list li {display: grid; grid-template-columns: 58px 1fr auto; gap: 8px; padding: 9px 0; border-top: 1px dashed color-mix(in srgb, var(--story-ink) 12%, transparent); font-size: var(--tlb-fs-meta); color: var(--ink);}
.tlb-story.tlb-story .tlb9-solve-list li span {color: var(--pt); font-weight: 700; font-size: var(--tlb-fs-caption);}
.tlb-story.tlb-story .tlb9-solve-img {display: block; position: relative; max-width: 300px; margin: 0 auto; padding: 12px; border-radius: 8px; background: color-mix(in oklab, var(--story-accent) 19.3%, var(--story-base)); cursor: zoom-in;}
.tlb-story.tlb-story .tlb9-solve-img img {display: block; width: 100%; border-radius: 3px;}
.tlb-story.tlb-story .tlb9-solve-img i, .tlb-story.tlb-story .tlb9-solve-img em {position: absolute; right: 20px; bottom: 20px; padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, color-mix(in oklab, var(--story-accent) 24.6%, #000) 80%, transparent); color: var(--story-ink); font-size: var(--tlb-fs-micro); font-style: normal;}
@media (min-width: 760px) {
.tlb-story.tlb-story .tlb9-solve {grid-template-columns: 1fr 240px; gap: 36px; align-items: start;}
.tlb-story.tlb-story .tlb9-solve-img {margin: 0;}
}
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
.tlb-story.tlb-story :is(.tlb9-solve-txt, .tlb9-solve-img) {animation: tlb9-rise linear both; animation-timeline: view(); animation-range: entry 30% cover 38%;}
}
}
.tlb-story.tlb-story .tlb9-qlist li {grid-template-columns: 22px 1fr;}
.tlb-story.tlb-story .tlb9-qlist li::before {content: ""; width: 7px; height: 7px; margin-top: 9px; border-radius: 50%; background: var(--pt);}
.tlb-story.tlb-story :is(.tlb9-qlist, .tlb9-checks, .tlb9-bullets, .tlb9-line) {width: fit-content; max-width: min(100%, 580px); margin-left: auto !important; margin-right: auto !important; padding-left: 14px; padding-right: 14px; box-sizing: border-box;}
@media (max-width: 759px) {
.tlb-story.tlb-story .tlb9-track {width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; padding: 0 10px; box-sizing: border-box;}
}
.tlb-story.tlb-story .tlb9-solve-pain::before {content: none;}
.tlb-story.tlb-story .tlb9-solve-pain {display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: var(--tlb-fs-small); color: color-mix(in oklab, var(--story-signal) 57.7%, #fff);}
.tlb-story.tlb-story .tlb9-solve-pain b, .tlb-story.tlb-story .tlb9-solve-pain strong {display: inline-block; padding: 2px 10px; border: 1px solid color-mix(in srgb, var(--story-signal) 60%, transparent); border-radius: 999px; font-size: var(--tlb-fs-micro); font-weight: 800; color: var(--story-signal);}
.tlb-story.tlb-story .tlb9-solve-list li {grid-template-columns: 64px 1fr;}
.tlb-story.tlb-story .tlb9-bullets {list-style: none; width: fit-content; max-width: min(100%, 520px); margin: 28px auto 0 !important; padding: 0 14px; text-align: left;}
.tlb-story.tlb-story .tlb9-bullets li {font-family: var(--tlb-font-body) !important; margin: 0; padding: 4px 0 4px 18px; line-height: var(--tlb-lh-ui); font-size: var(--tlb-fs-small);}
.tlb-story.tlb-story .tlb9-bullets li b, .tlb-story.tlb-story .tlb9-bullets li strong {font-family: var(--tlb-font-body) !important; font-weight: 700;}
.tlb-story.tlb-story .tlb9-letter {position: relative; max-width: 580px; margin: 52px auto 0; padding: 30px 26px 26px; border: 1px solid color-mix(in srgb, var(--story-accent) 45%, transparent); border-radius: 14px; background: transparent; text-align: left;}
.tlb-story.tlb-story .tlb9-letter::before {content: "“"; position: absolute; right: 22px; top: 6px; font-family: "SUITE", sans-serif; font-weight: 800; font-size: 88px; line-height: 1; color: color-mix(in srgb, var(--story-accent) 16%, transparent);}
.tlb-story.tlb-story .tlb9-letter-chip {display: inline-block; margin: 0 0 14px; padding: 3px 11px; border: 1px solid color-mix(in srgb, var(--story-accent) 55%, transparent); border-radius: 999px; font-size: var(--tlb-fs-micro); font-weight: 700; color: var(--pt);}
.tlb-story.tlb-story .tlb9-letter-tit {margin: 0 0 14px; font-family: var(--tlb-font-head); font-weight: 800; font-size: 20px; color: var(--ink);}
.tlb-story.tlb-story .tlb9-letter .tlb9-bio {margin: 0; color: var(--sub) !important; font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-read);}
.tlb-story.tlb-story .tlb9-letter-sign {margin: 22px 0 0; text-align: right; font-family: var(--tlb-font-head); font-weight: 700; font-size: var(--tlb-fs-small); color: var(--pt);}
.tlb-story.tlb-story .tlb9-letter-sign::before {content: ""; display: inline-block; width: 22px; height: 1px; margin-right: 10px; vertical-align: middle; background: color-mix(in srgb, var(--story-accent) 55%, transparent);}
.tlb-story.tlb-story .tlb9-rv blockquote {border-radius: 18px;}
.tlb-story.tlb-story .tlb9-rv--l blockquote {border-bottom-left-radius: 0;}
.tlb-story.tlb-story .tlb9-rv--r blockquote {border-bottom-right-radius: 0;}
.tlb-story.tlb-story .tlb9-rv--l blockquote::after {left: 0; bottom: -11px; border-top: 12px solid var(--story-ink); border-right: 14px solid transparent; border-left: 0;}
.tlb-story.tlb-story .tlb9-rv--r blockquote::after {right: 0; bottom: -11px; border-top: 12px solid var(--story-ink); border-left: 14px solid transparent; border-right: 0;}
.tlb-story.tlb-story .tlb9-rv {margin-bottom: 26px;}
.tlb-story, .tlb-story.tlb-story .tlb9 {overflow-x: clip;}
@media (min-width: 640px) {
.tlb-story.tlb-story .tlb9-solve {grid-template-columns: 1fr 210px; gap: 28px; align-items: start;}
.tlb-story.tlb-story .tlb9-solve-img {margin: 0;}
}
.tlb-story.tlb-story .tlb9-routine li {border-bottom-color: color-mix(in srgb, var(--story-ink) 34%, transparent);}
.tlb-story.tlb-story .tlb9-moment-head {display: flex; align-items: baseline; justify-content: space-between; gap: 12px;}
.tlb-story.tlb-story .tlb9-rank {display: inline-flex; align-items: center; gap: 7px; margin: 0; font-family: var(--tlb-font-head); font-weight: 800; font-size: 20px; letter-spacing: var(--tlb-ls-head); color: #D9B45A;}
.tlb-story.tlb-story .tlb9-crown {width: 24px; height: 18px; color: #D9B45A; flex: none; transform: translateY(-1px);}
.tlb-story.tlb-story .tlb9-moment-head .tlb9-moment-cnt {font-size: var(--tlb-fs-small);}
.tlb-story.tlb-story .tlb9-points > div > p, .tlb-story.tlb-story .tlb9-points > div > span {text-wrap: balance;}
.tlb-story.tlb-story .tlb9-qlist {width: fit-content; max-width: min(calc(100% - 56px), 460px); padding-left: 0; padding-right: 0;}
.tlb-story.tlb-story .tlb9-qlist li {padding: 14px 20px 14px 18px;}
.tlb-story.tlb-story .tlb9-qlist {max-width: min(calc(100% - 20px), 460px);}
.tlb-story.tlb-story .tlb9-qlist li {padding: 14px 16px 14px 18px; grid-template-columns: 20px 1fr; font-size: var(--tlb-fs-read);}
.tlb-story.tlb-story .tlb9-qlist li {text-wrap: balance;}
.tlb-story.tlb-story .tlb9-faq-link {display: inline-block; margin-top: 10px; font-weight: 700; color: var(--pt); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;}
.tlb-story.tlb-story .tlb9-faq-link {display: block; width: fit-content; margin-top: 12px;}
.tlb-story.tlb-story .tlb9--cine {position: relative; overflow: hidden; isolation: isolate; padding-top: 140px; padding-bottom: 140px;}
.tlb-story.tlb-story .tlb9-cine-img {display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0.62;}
.tlb-story.tlb-story .tlb9-cine::after {content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--story-base) 0%, color-mix(in srgb, var(--story-base) 35%, transparent) 26%, color-mix(in srgb, var(--story-base) 55%, transparent) 60%, var(--story-base) 100%), radial-gradient(ellipse at center, color-mix(in srgb, var(--story-base) 55%, transparent) 0%, color-mix(in srgb, var(--story-base) 0%, transparent) 70%);}
.tlb-story.tlb-story .tlb9-cine-body {position: relative;}
.tlb-story.tlb-story .tlb9-buy {margin: 44px auto 26px;}
.tlb-story.tlb-story .tlb9-buy-name {margin: 0; font-family: var(--tlb-font-head); font-weight: 600; font-size: var(--tlb-fs-h5); letter-spacing: var(--tlb-ls-head); color: var(--ink);}
.tlb-story.tlb-story .tlb9-buy-price {margin: 6px 0 0; font-family: var(--tlb-font-head); font-weight: 800; font-size: var(--tlb-fs-display); line-height: var(--tlb-lh-none); letter-spacing: var(--tlb-ls-head); color: var(--pt); font-variant-numeric: tabular-nums;}
.tlb-story.tlb-story .tlb9-buy-price span {margin-left: 4px; font-size: 0.42em; font-weight: 700; color: var(--ink);}
@media (prefers-reduced-motion: reduce) {
.tlb-story.tlb-story .tlb9-cine-img {display: none;}
}
.tlb-story.tlb-story .tlb9-cine-img {opacity: 0.9;}
.tlb-story.tlb-story .tlb9-cine::after {background: linear-gradient(180deg, var(--story-base) 0%, color-mix(in srgb, var(--story-base) 15%, transparent) 22%, color-mix(in srgb, var(--story-base) 30%, transparent) 55%, var(--story-base) 100%), radial-gradient(ellipse 60% 45% at center, color-mix(in srgb, var(--story-base) 60%, transparent) 0%, color-mix(in srgb, var(--story-base) 0%, transparent) 100%);}
.tlb-story.tlb-story .tlb9--cine .tlb9-p {color: var(--ink);}
.tlb-story.tlb-story .tlb9-crown {width: 30px; height: 24px; color: inherit; transform: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));}
.tlb-story.tlb-story .tlb9-rank {gap: 8px;}
.tlb-story.tlb-story .tlb9-rank--gold {color: #E8C35A;}
.tlb-story.tlb-story .tlb9-rank--silver {color: #D5D9DE;}
.tlb-story.tlb-story .tlb9-rank--bronze {color: #D0915A;}
.tlb-story.tlb-story .tlb9-crown {width: 38px; height: 30px;}
.tlb-story.tlb-story .tlb9-rank {font-size: 22px;}
.tlb-story.tlb-story .tlb9-moment-tit {text-wrap: balance;}
@keyframes tlb9-seg-y {from { transform: scaleY(0); } to { transform: scaleY(1); }}
@keyframes tlb9-seg-x {from { transform: scaleX(0); } to { transform: scaleX(1); }}
@keyframes tlb9-pulse {0%, 100% { transform: scale(1); box-shadow: 0 0 0 4px color-mix(in srgb, var(--story-accent) 30%, transparent), 0 0 0 0 color-mix(in srgb, var(--story-accent) 45%, transparent); } 50% { transform: scale(1.22); box-shadow: 0 0 0 7px color-mix(in srgb, var(--story-accent) 18%, transparent), 0 0 0 14px color-mix(in srgb, var(--story-accent) 0%, transparent); }}
.tlb-story.tlb-story .tlb9-track-st--now::before {animation: tlb9-pulse 1.6s ease-in-out infinite;}
@supports (animation-timeline: view()) {
.tlb-story.tlb-story :is(.tlb9-track-st, .tlb9-line li) {view-timeline-name: --seg;}
.tlb-story.tlb-story :is(.tlb9-track-st, .tlb9-line li)::after {transform-origin: top center; animation: tlb9-seg-y linear both; animation-timeline: --seg; animation-range: cover 30% cover 60%;}
@media (min-width: 760px) {
.tlb-story.tlb-story .tlb9-track-st::after {transform-origin: left center; animation-name: tlb9-seg-x; animation-range: entry 60% cover 50%;}
}
}
@media (prefers-reduced-motion: reduce) {
.tlb-story.tlb-story .tlb9-track-st--now::before, .tlb-story.tlb-story :is(.tlb9-track-st, .tlb9-line li)::after {animation: none;}
}
@supports (animation-timeline: view()) {
@media (min-width: 760px) {
.tlb-story.tlb-story .tlb9-track .tlb9-track-st::after {transform-origin: left center; animation-name: tlb9-seg-x; animation-range: entry 60% cover 50%;}
}
}
.tlb-story.tlb-story .tlb9-in :is(.tlb9-routine, .tlb9-contents, .tlb9-points, .tlb9-checks, .tlb9-qlist) {width: fit-content; max-width: min(calc(100% - 20px), 480px); margin-left: auto !important; margin-right: auto !important; padding-left: 0; padding-right: 0; box-sizing: border-box; border-bottom: 1px dashed color-mix(in srgb, var(--story-ink) 34%, transparent);}
.tlb-story.tlb-story .tlb9-in :is(.tlb9-routine > li, .tlb9-contents > p, .tlb9-points > div, .tlb9-checks > li, .tlb9-qlist > li) {border: 0; border-top: 1px dashed color-mix(in srgb, var(--story-ink) 34%, transparent); padding-left: 22px; padding-right: 22px;}
.tlb-story.tlb-story .tlb9-in .tlb9-qlist > li {padding-left: 18px; padding-right: 18px;}
.tlb-story.tlb-story .tlb9-in :is(.tlb9-routine > li, .tlb9-contents > p, .tlb9-points > div, .tlb9-checks > li, .tlb9-qlist > li):last-child {border-bottom: 0;}
.tlb-story.tlb-story .tlb9-in :is(.tlb9-contents > p, .tlb9-routine > li, .tlb9-checks > li) {text-wrap: balance;}
.tlb-story.tlb-story .tlb9-in .tlb9-checks > li {text-wrap: wrap;}
.tlb-story.tlb-story .tlb9-bookid {margin-top: 30px;}
.tlb-story.tlb-story .tlb9-bookid-logo {display: block; width: 92px; height: auto; margin: 0 auto 14px;}
.tlb-story.tlb-story .tlb9-bookid .tlb9-name {margin-top: 0;}
.tlb-story.tlb-story .tlb9-bookid-meta {margin: 6px 0 0; font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-ui); letter-spacing: var(--tlb-ls-body); color: var(--sub);}
.tlb-story.tlb-story .tlb9-bookid .tlb9-name + .tlb9-bookid-meta {margin-top: 12px;}
@media (min-width: 760px) {
.tlb-story ~ .tlb_common_section .tlb_stats_grid_wrapper:has(> :nth-child(2):last-child) {grid-template-columns: repeat(2, minmax(0, 1fr));}
}
.tlb-story.tlb-story .tlb9--hero .tlb9-cine-img {opacity: 0.75;}
.tlb-story.tlb-story .tlb9--cine .tlb9-cine, .tlb-story.tlb-story .tlb9--hero .tlb9-cine {background-image: none; background-color: var(--story-base);}
.tlb-story.tlb-story .tlb9--cine .tlb9-cine-img {opacity: 1;}
.tlb-story.tlb-story .tlb9--cine .tlb9-cine::after {background: linear-gradient(180deg, var(--story-base) 0%, color-mix(in srgb, var(--story-base) 62%, transparent) 20%, color-mix(in srgb, var(--story-base) 62%, transparent) 72%, var(--story-base) 100%), radial-gradient(ellipse 65% 50% at center, color-mix(in srgb, var(--story-base) 35%, transparent) 0%, color-mix(in srgb, var(--story-base) 0%, transparent) 100%);}
@media (prefers-reduced-motion: reduce) {
}
/* 배경 영상: 움직임 줄이기 설정에서는 영상 대신 같은 칸의 정지 장면(.tlb9-cine-still)을 보인다.
   영상과 정지 장면 주소는 상세 HTML에만 둔다. CSS에는 상품별 주소를 넣지 않는다. */
.tlb-story.tlb-story .tlb9-cine-still { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) {
  .tlb-story.tlb-story .tlb9-cine-img { display: none; }
  .tlb-story.tlb-story .tlb9-cine-still { display: block; }
}

/* 아이콘은 아임웹 편집기가 인라인 SVG를 지우기 때문에 images/story/*.svg 이미지로 부른다 */
.tlb-story.tlb-story .tlb9-crown { display: block; object-fit: contain; }
.tlb-story.tlb-story .tlb9-pen img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.tlb-story.tlb-story .tlb9-pen-checkimg { transform-origin: 25% 71%; }
@supports (animation-timeline: view()) {
  .tlb-story.tlb-story .tlb9-pen-checkimg { animation: tlb9-stamp linear both; animation-timeline: --chk; animation-range: entry 70% cover 40%; }
}
@media (prefers-reduced-motion: reduce) { .tlb-story.tlb-story .tlb9-pen-checkimg { animation: none; } }

/* 아임웹 편집기는 빈 span을 지운다. 카운터는 숫자를 화면 밖 글자로 넣고(읽기 도구용), 막대는 공백 한 칸을 넣는다 */
.tlb-story.tlb-story .tlb9-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tlb-story.tlb-story .tlb9-moment-bar span { font-size: 0; line-height: 0; }
/* 편집기가 크게 보기의 닫기 글자 <i>를 <em>으로 바꾼다 */
.tlb-story.tlb-story .tlb9-lb em { position: absolute; top: 14px; right: 18px; color: var(--story-ink); font-size: var(--tlb-fs-meta); font-style: normal; }

.tlb-story.tlb-story .tlb9--cine { position: relative; overflow: hidden; isolation: isolate; }
.tlb-story.tlb-story .tlb9-cine { position: absolute; inset: 0; z-index: -1; background-color: var(--story-base); }
.tlb-story.tlb-story .tlb9-cine > .fr-video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; }
.tlb-story.tlb-story .tlb9-cine video, .tlb-story.tlb-story .tlb9-cine-img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; margin: 0; }

.tlb-story.tlb-story .tlb9-spec dt, .tlb-story.tlb-story .tlb9-spec dd { line-height: var(--tlb-lh-ui); }

/* ---- 자소서형 컴포넌트 (2026-09-27): 빈 문서, 인용, 비용, 생각 말풍선, 첨삭지, 관점 선언, 지표 대조, 범위, 5단계, 워크시트, 기간, 적합 여부 ---- */
.tlb-story.tlb-story .tlb9-draft {max-width: 420px; margin: 34px auto 0; padding: 18px 20px 24px; text-align: left; background: color-mix(in oklab, var(--story-ink) 7%, var(--story-base)); border: 1px solid color-mix(in srgb, var(--story-ink) 16%, transparent); border-radius: 6px;}
.tlb-story.tlb-story .tlb9-draft-head {display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 18px; padding: 0 0 12px; border-bottom: 1px solid color-mix(in srgb, var(--story-ink) 12%, transparent); font-size: var(--tlb-fs-meta); color: var(--sub);}
.tlb-story.tlb-story .tlb9-draft-head :is(b, strong) {font-family: var(--tlb-font-head); font-weight: 700; font-size: var(--tlb-fs-small); color: var(--ink);}
.tlb-story.tlb-story .tlb9-draft-line {display: block; height: 1px; margin: 22px 0 0; background: color-mix(in srgb, var(--story-ink) 9%, transparent);}
.tlb-story.tlb-story .tlb9-caret {display: inline-block; width: 2px; height: 20px; vertical-align: -4px; background: var(--ink); animation: tlb9-caret 1.05s steps(1) infinite;}
@keyframes tlb9-caret {50% {opacity: 0;}}
.tlb-story.tlb-story .tlb9-pull {max-width: 520px; margin: 40px auto 0; padding: 28px 6px; border-top: 1px solid color-mix(in srgb, var(--story-accent) 40%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--story-accent) 40%, transparent);}
.tlb-story.tlb-story .tlb9-pull p {margin: 0; font-family: var(--tlb-font-head); font-weight: 700; font-size: var(--tlb-fs-h4); line-height: var(--tlb-lh-ui); color: var(--ink); word-break: keep-all; text-wrap: balance;}
.tlb-story.tlb-story .tlb9-pull small {display: block; margin-top: 14px; font-size: var(--tlb-fs-caption); color: var(--sub);}
.tlb-story.tlb-story .tlb9-cost {width: fit-content; min-width: min(100%, 360px); max-width: 100%; margin: 40px auto 0; padding: 0; list-style: none;}
.tlb-story.tlb-story .tlb9-cost li {display: flex; justify-content: space-between; align-items: baseline; gap: 28px; padding: 16px 4px; border-top: 1px dashed color-mix(in srgb, var(--story-ink) 30%, transparent); font-size: var(--tlb-fs-body); color: var(--sub); text-align: left;}
.tlb-story.tlb-story .tlb9-cost li :is(b, strong) {font-family: var(--tlb-font-head); font-weight: 800; font-size: var(--tlb-fs-h4); color: var(--ink); white-space: nowrap;}
.tlb-story.tlb-story .tlb9-cost li.tlb9-cost-need {border-top: 1px solid var(--pt); border-bottom: 1px solid var(--pt);}
.tlb-story.tlb-story .tlb9-cost li.tlb9-cost-need :is(b, strong) {color: var(--pt); font-size: var(--tlb-fs-h5); white-space: normal; text-align: right;}
.tlb-story.tlb-story .tlb9-thoughts {display: flex; flex-direction: column; gap: 12px; max-width: 420px; margin: 36px auto 8px;}
.tlb-story.tlb-story .tlb9-thoughts p {margin: 0; padding: 12px 16px; max-width: 86%; font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-ui); color: var(--ink); text-align: left; background: color-mix(in oklab, var(--story-ink) 9%, var(--story-base)); border-radius: 16px 16px 16px 3px; word-break: keep-all;}
.tlb-story.tlb-story .tlb9-thoughts p:nth-child(even) {align-self: flex-end; border-radius: 16px 16px 3px 16px;}
.tlb-story.tlb-story .tlb9-edit {max-width: 560px; margin: 36px auto 0; padding: 26px 22px 28px; text-align: left; background: #F4EFE4; color: #2A2723; border-radius: 3px;}
.tlb-story.tlb-story .tlb9-edit + .tlb9-edit {margin-top: 20px;}
.tlb-story.tlb-story .tlb9-edit-q {margin: 0 0 16px; padding: 0 0 14px; border-bottom: 1px solid #DDD4C2; font-size: var(--tlb-fs-meta); line-height: var(--tlb-lh-ui); color: #6F6452; word-break: keep-all;}
.tlb-story.tlb-story .tlb9-edit-q :is(b, strong) {display: block; margin-bottom: 4px; font-family: var(--tlb-font-head); font-weight: 700; font-size: var(--tlb-fs-caption); color: #8A7B60;}
.tlb-story.tlb-story .tlb9-edit-tag {margin: 18px 0 6px; font-family: var(--tlb-font-head); font-weight: 700; font-size: var(--tlb-fs-caption); color: #8A7B60;}
.tlb-story.tlb-story .tlb9-edit-del {margin: 0; font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-text); color: #8C8477; text-decoration: line-through; text-decoration-color: #C8503F; text-decoration-thickness: 1.5px; word-break: keep-all;}
.tlb-story.tlb-story .tlb9-edit-note {margin: 10px 0 0; font-weight: 600; font-size: var(--tlb-fs-meta); line-height: var(--tlb-lh-compact); color: #C8503F; word-break: keep-all;}
.tlb-story.tlb-story .tlb9-edit-new {margin: 0; font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-read); color: #2A2723; word-break: keep-all;}
.tlb-story.tlb-story .tlb9-edit-new .tlb9-ins {background: linear-gradient(transparent 58%, #E9D9A8 58%); padding: 0 1px;}
.tlb-story.tlb-story .tlb9-edit-new .tlb9-ins small {margin-left: 3px; font-family: var(--tlb-font-head); font-weight: 700; font-size: var(--tlb-fs-micro); color: #9A6A1C; vertical-align: 6px; white-space: nowrap;}
.tlb-story.tlb-story .tlb9-edit-sum {margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid #DDD4C2; font-weight: 600; font-size: var(--tlb-fs-meta); line-height: var(--tlb-lh-compact); color: #2A2723; word-break: keep-all;}
.tlb-story.tlb-story .tlb9-decl {max-width: 560px; margin: 0 auto; padding: 44px 26px; background: #16233A; border-radius: 4px;}
.tlb-story.tlb-story .tlb9-decl p {margin: 0; font-family: var(--tlb-font-head); font-weight: 800; font-size: var(--tlb-fs-h4); line-height: var(--tlb-lh-ui); color: #EEF1F6; word-break: keep-all; text-wrap: balance;}
.tlb-story.tlb-story .tlb9-decl p + p {margin-top: 18px; color: var(--pt);}
.tlb-story.tlb-story .tlb9-kpi {max-width: 560px; margin: 40px auto 0; text-align: left;}
.tlb-story.tlb-story .tlb9-kpi > div {padding: 22px 4px; border-top: 1px solid color-mix(in srgb, var(--story-accent) 32%, transparent);}
.tlb-story.tlb-story .tlb9-kpi > div:last-child {border-bottom: 1px solid color-mix(in srgb, var(--story-accent) 32%, transparent);}
.tlb-story.tlb-story .tlb9-kpi h3 {margin: 0 0 12px; font-family: var(--tlb-font-head); font-weight: 800; font-size: clamp(19px, 5vw, 22px); line-height: var(--tlb-lh-head); color: var(--pt);}
.tlb-story.tlb-story .tlb9-kpi p {display: grid; grid-template-columns: 4.2em 1fr; gap: 10px; margin: 6px 0 0; font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-compact); color: var(--ink); word-break: keep-all;}
.tlb-story.tlb-story .tlb9-kpi p span {font-size: var(--tlb-fs-caption); font-weight: 700; color: var(--sub); padding-top: 1px;}
.tlb-story.tlb-story .tlb9-kpi p.tlb9-kpi-no {color: var(--sub); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--story-signal) 80%, transparent);}
.tlb-story.tlb-story .tlb9-kpi p.tlb9-kpi-no span {text-decoration: none; display: inline-block;}
.tlb-story.tlb-story .tlb9-range {max-width: 480px; margin: 44px auto 0;}
.tlb-story.tlb-story .tlb9-range > div + div {margin-top: 36px;}
.tlb-story.tlb-story .tlb9-range-lab {margin: 0 0 14px; font-family: var(--tlb-font-head); font-weight: 700; font-size: var(--tlb-fs-small); color: var(--sub);}
.tlb-story.tlb-story .tlb9-range-bar {position: relative; height: 2px; margin: 0 6px; background: var(--pt);}
.tlb-story.tlb-story .tlb9-range-bar::before, .tlb-story.tlb-story .tlb9-range-bar::after {content: ""; position: absolute; top: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--pt);}
.tlb-story.tlb-story .tlb9-range-bar::before {left: -6px;}
.tlb-story.tlb-story .tlb9-range-bar::after {right: -6px;}
.tlb-story.tlb-story .tlb9-range-ends {display: flex; justify-content: space-between; margin-top: 14px; text-align: left;}
.tlb-story.tlb-story .tlb9-range-ends p {margin: 0; font-family: var(--tlb-font-head); font-weight: 800; font-size: var(--tlb-fs-h4); line-height: var(--tlb-lh-tight); color: var(--ink);}
.tlb-story.tlb-story .tlb9-range-ends p:last-child {text-align: right;}
.tlb-story.tlb-story .tlb9-range-ends small {display: block; margin-top: 6px; font-family: var(--tlb-font-body); font-weight: 500; font-size: var(--tlb-fs-caption); color: var(--sub);}
.tlb-story.tlb-story .tlb9-flow5 {max-width: 580px; margin: 40px auto 0; padding: 0; list-style: none; text-align: left;}
.tlb-story.tlb-story .tlb9-flow5 li {display: grid; grid-template-columns: 1fr 108px; gap: 18px; align-items: start; padding: 24px 0; border-top: 1px solid color-mix(in srgb, var(--story-ink) 14%, transparent);}
.tlb-story.tlb-story .tlb9-flow5 li:last-child {border-bottom: 1px solid color-mix(in srgb, var(--story-ink) 14%, transparent);}
.tlb-story.tlb-story .tlb9-flow5-no {margin: 0; font-family: var(--tlb-font-head); font-weight: 700; font-size: var(--tlb-fs-caption); color: var(--pt);}
.tlb-story.tlb-story .tlb9-flow5-tit {margin: 4px 0 8px; font-family: var(--tlb-font-head); font-weight: 800; font-size: var(--tlb-fs-h4); line-height: var(--tlb-lh-title); color: var(--ink); word-break: keep-all;}
.tlb-story.tlb-story .tlb9-flow5-desc {margin: 0; font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-text); color: var(--sub); word-break: keep-all;}
.tlb-story.tlb-story .tlb9-flow5-ch {margin: 10px 0 0; font-size: var(--tlb-fs-caption); line-height: var(--tlb-lh-compact); color: var(--pt); word-break: keep-all;}
.tlb-story.tlb-story .tlb9-flow5 label {display: block; cursor: zoom-in;}
.tlb-story.tlb-story .tlb9-flow5 label img {display: block; width: 100%; height: auto; margin: 0; border-radius: 2px; box-shadow: 0 6px 18px rgba(0,0,0,.45);}
.tlb-story.tlb-story .tlb9-sheets {max-width: 560px; margin: 40px auto 0; text-align: left;}
.tlb-story.tlb-story .tlb9-sheets > div {display: grid; grid-template-columns: 6.2em 1fr; gap: 14px; padding: 18px 2px; border-top: 1px solid color-mix(in srgb, var(--story-ink) 14%, transparent);}
.tlb-story.tlb-story .tlb9-sheets > div:last-child {border-bottom: 1px solid color-mix(in srgb, var(--story-ink) 14%, transparent);}
.tlb-story.tlb-story .tlb9-sheets h3 {margin: 0; font-family: var(--tlb-font-head); font-weight: 800; font-size: var(--tlb-fs-body); line-height: var(--tlb-lh-ui); color: var(--pt);}
.tlb-story.tlb-story .tlb9-sheets ul {margin: 0; padding: 0; list-style: none;}
.tlb-story.tlb-story .tlb9-sheets li {font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-ui); color: var(--ink); padding: 2px 0; word-break: keep-all;}
.tlb-story.tlb-story .tlb9-plan {max-width: 520px; margin: 40px auto 0; text-align: left;}
.tlb-story.tlb-story .tlb9-plan > div + div {margin-top: 26px;}
.tlb-story.tlb-story .tlb9-plan-head {display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 10px;}
.tlb-story.tlb-story .tlb9-plan-head :is(b, strong) {font-family: var(--tlb-font-head); font-weight: 800; font-size: var(--tlb-fs-h4); color: var(--ink);}
.tlb-story.tlb-story .tlb9-plan-head span {font-size: var(--tlb-fs-meta); color: var(--sub); text-align: right; word-break: keep-all;}
.tlb-story.tlb-story .tlb9-plan-bar {height: 10px; background: color-mix(in srgb, var(--story-ink) 10%, transparent); border-radius: 5px; overflow: hidden;}
.tlb-story.tlb-story .tlb9-plan-bar span {display: block; width: var(--w); height: 100%; background: var(--pt); border-radius: 5px;}
.tlb-story.tlb-story .tlb9-fit {max-width: 520px; margin: 40px auto 0; text-align: left;}
.tlb-story.tlb-story .tlb9-fit h3 {margin: 0 0 6px; font-family: var(--tlb-font-head); font-weight: 800; font-size: var(--tlb-fs-lead); color: var(--pt);}
.tlb-story.tlb-story .tlb9-fit div + div {margin-top: 36px;}
.tlb-story.tlb-story .tlb9-fit div + div h3 {color: var(--sub);}
.tlb-story.tlb-story .tlb9-fit ul {margin: 0; padding: 0; list-style: none;}
.tlb-story.tlb-story .tlb9-fit li {position: relative; padding: 14px 0 14px 30px; border-bottom: 1px dashed color-mix(in srgb, var(--story-ink) 26%, transparent); font-size: var(--tlb-fs-body); line-height: var(--tlb-lh-ui); color: var(--ink); word-break: keep-all;}
.tlb-story.tlb-story .tlb9-fit li::before {content: "○"; position: absolute; left: 2px; top: 13px; font-weight: 700; color: var(--pt);}
.tlb-story.tlb-story .tlb9-fit div + div li {color: var(--sub);}
.tlb-story.tlb-story .tlb9-fit div + div li::before {content: "×"; color: var(--story-signal);}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tlb-story.tlb-story .tlb9-plan-bar span {animation: tlb9-plangrow linear both; animation-timeline: view(); animation-range: entry 40% cover 45%;}
    .tlb-story.tlb-story :is(.tlb9-kpi > div, .tlb9-flow5 li, .tlb9-sheets > div, .tlb9-fit li, .tlb9-cost li, .tlb9-thoughts p) {animation: tlb9-rise linear both; animation-timeline: view(); animation-range: entry 10% cover 30%;}
  }
}
@keyframes tlb9-plangrow {from {width: 0;}}

/* ==== tlb-paper: 문서형 상세 템플릿 (2026-09-27 자소서 v3). 밝은 종이, 왼쪽 정렬, 본문 + 여백 메모 ==== */
.tlb-paper.tlb-paper {--pp-bg: #F6F2EA; --pp-ink: #1D2433; --pp-sub: #5A5F6B; --pp-navy: #1F3150; --pp-pen: #C8503F; --pp-rule: #D9D1C2; --pp-mark: #EBDDB0; --pp-card: #FFFDF8;
  display: block; margin: 0; padding: 0; background: var(--pp-bg); color: var(--pp-ink); font-family: var(--tlb-font-body); font-size: var(--tlb-fs-body); line-height: var(--tlb-lh-text); text-align: left; word-break: keep-all; -webkit-font-smoothing: antialiased;}
.tlb-paper.tlb-paper * {box-sizing: border-box;}
.tlb-paper.tlb-paper :is(h1, h2, h3, p, ul, ol, li, dl, dt, dd, figure, blockquote, table) {margin: 0; padding: 0; font-family: inherit; letter-spacing: normal; line-height: inherit; color: inherit; background: none; border: 0;}
.tlb-paper.tlb-paper img {display: block; max-width: 100%; height: auto; margin: 0;}
.tlb-paper.tlb-paper b, .tlb-paper.tlb-paper strong {font-weight: 700; color: var(--pp-ink);}
.tlb-paper.tlb-paper .pp-sec {padding: 72px 22px; border-top: 1px solid var(--pp-rule);}
.tlb-paper.tlb-paper .pp-sec:first-child {border-top: 0;}
.tlb-paper.tlb-paper .pp-in {max-width: 960px; margin: 0 auto;}
.tlb-paper.tlb-paper .pp-no {display: block; margin-bottom: 14px; font-family: var(--tlb-font-head); font-weight: 700; font-size: var(--tlb-fs-meta); color: var(--pp-pen);}
.tlb-paper.tlb-paper h2.pp-h {max-width: 640px; font-family: var(--tlb-font-head); font-weight: 800; font-size: var(--tlb-fs-h2); line-height: var(--tlb-lh-title); color: var(--pp-ink);}
.tlb-paper.tlb-paper .pp-lead {max-width: 640px; margin-top: 20px; font-size: var(--tlb-fs-read); line-height: var(--tlb-lh-body); color: var(--pp-sub);}
.tlb-paper.tlb-paper .pp-p {max-width: 640px; margin-top: 16px; font-size: var(--tlb-fs-body); line-height: var(--tlb-lh-body); color: var(--pp-sub);}
.tlb-paper.tlb-paper .pp-p b, .tlb-paper.tlb-paper .pp-lead b {color: var(--pp-ink);}
/* 본문 + 여백 메모 */
.tlb-paper.tlb-paper .pp-row {display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 36px;}
.tlb-paper.tlb-paper .pp-note {font-size: var(--tlb-fs-meta); line-height: var(--tlb-lh-compact); color: var(--pp-pen);}
.tlb-paper.tlb-paper .pp-note b {color: var(--pp-pen);}
.tlb-paper.tlb-paper .pp-note small {display: block; margin-bottom: 2px; font-family: var(--tlb-font-head); font-weight: 700; font-size: var(--tlb-fs-micro); color: var(--pp-sub);}
@media (min-width: 900px) {
  .tlb-paper.tlb-paper .pp-sec {padding: 96px 40px;}
  .tlb-paper.tlb-paper .pp-row {grid-template-columns: minmax(0, 640px) 240px; gap: 56px; align-items: start;}
  .tlb-paper.tlb-paper .pp-note {padding-top: 6px;}
}
/* 첫 화면 */
.tlb-paper.tlb-paper .pp-hero {display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center;}
.tlb-paper.tlb-paper .pp-kicker {font-family: var(--tlb-font-head); font-weight: 700; font-size: var(--tlb-fs-meta); color: var(--pp-navy);}
.tlb-paper.tlb-paper h1.pp-title {margin-top: 16px; font-family: var(--tlb-font-head); font-weight: 800; font-size: var(--tlb-fs-title); line-height: var(--tlb-lh-tight); color: var(--pp-ink);}
.tlb-paper.tlb-paper h1.pp-title span {color: var(--pp-navy); box-shadow: inset 0 -0.34em 0 var(--pp-mark);}
.tlb-paper.tlb-paper .pp-hero-cover {max-width: 300px; margin: 0 auto; filter: drop-shadow(0 18px 28px rgba(29,36,51,.22));}
.tlb-paper.tlb-paper .pp-sched {margin-top: 28px; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: var(--tlb-fs-meta); color: var(--pp-sub);}
.tlb-paper.tlb-paper .pp-sched b {margin-right: 6px; font-family: var(--tlb-font-head);}
@media (min-width: 900px) {.tlb-paper.tlb-paper .pp-hero {grid-template-columns: 1fr 320px; gap: 64px;} .tlb-paper.tlb-paper .pp-hero-cover {margin: 0;}}
/* 문서 표 */
.tlb-paper.tlb-paper .pp-table {width: 100%; max-width: 640px; margin-top: 28px; border-collapse: collapse; font-size: var(--tlb-fs-small);}
.tlb-paper.tlb-paper .pp-table th, .tlb-paper.tlb-paper .pp-table td {padding: 13px 8px; border-bottom: 1px solid var(--pp-rule); text-align: left; vertical-align: top; line-height: var(--tlb-lh-ui);}
.tlb-paper.tlb-paper .pp-table th {font-family: var(--tlb-font-head); font-weight: 700; font-size: var(--tlb-fs-caption); color: var(--pp-sub); border-bottom-color: var(--pp-ink);}
.tlb-paper.tlb-paper .pp-table td.pp-num {text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--pp-sub);}
.tlb-paper.tlb-paper .pp-table td.pp-strong {font-family: var(--tlb-font-head); font-weight: 700; color: var(--pp-ink); white-space: nowrap;}
.tlb-paper.tlb-paper .pp-table tr.pp-hit td {background: var(--pp-card);}
/* 원고지 */
.tlb-paper.tlb-paper .pp-sheet {max-width: 640px; padding: 26px 24px; background: var(--pp-card); border: 1px solid var(--pp-rule); box-shadow: 0 1px 0 var(--pp-rule), 0 12px 24px -18px rgba(29,36,51,.35);}
.tlb-paper.tlb-paper .pp-sheet-q {padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px dashed var(--pp-rule); font-size: var(--tlb-fs-meta); color: var(--pp-sub);}
.tlb-paper.tlb-paper .pp-sheet-q b {display: block; font-family: var(--tlb-font-head); font-size: var(--tlb-fs-caption); color: var(--pp-navy);}
.tlb-paper.tlb-paper .pp-sheet p {font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-read); color: var(--pp-ink);}
.tlb-paper.tlb-paper .pp-sheet .pp-strike {color: #8C8477; text-decoration: line-through; text-decoration-color: var(--pp-pen); text-decoration-thickness: 1.5px;}
.tlb-paper.tlb-paper .pp-sheet .pp-circ {border-bottom: 2px solid var(--pp-pen); padding-bottom: 1px;}
.tlb-paper.tlb-paper .pp-sheet .pp-add {box-shadow: inset 0 -0.45em 0 var(--pp-mark);}
.tlb-paper.tlb-paper .pp-sheet .pp-add small {margin-left: 3px; font-family: var(--tlb-font-head); font-weight: 700; font-size: var(--tlb-fs-micro); color: var(--pp-pen); vertical-align: 6px; white-space: nowrap;}
/* 단계 */
.tlb-paper.tlb-paper .pp-stage {margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--pp-rule);}
.tlb-paper.tlb-paper .pp-stage-h {font-family: var(--tlb-font-head); font-weight: 800; font-size: var(--tlb-fs-h4); line-height: var(--tlb-lh-head); color: var(--pp-ink);}
.tlb-paper.tlb-paper .pp-stage-h span {margin-right: 10px; color: var(--pp-pen);}
.tlb-paper.tlb-paper .pp-quote {margin-top: 14px; padding: 0; font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-body); color: var(--pp-ink);}
.tlb-paper.tlb-paper .pp-asks {margin-top: 14px; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px;}
.tlb-paper.tlb-paper .pp-asks li {padding: 10px 12px; font-size: var(--tlb-fs-meta); line-height: var(--tlb-lh-ui); color: var(--pp-ink); background: var(--pp-card); border: 1px dashed var(--pp-rule);}
.tlb-paper.tlb-paper .pp-chain {margin-top: 16px; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 0; counter-reset: pp;}
.tlb-paper.tlb-paper .pp-chain li {font-family: var(--tlb-font-head); font-weight: 700; font-size: var(--tlb-fs-meta); color: var(--pp-navy);}
.tlb-paper.tlb-paper .pp-chain li + li::before {content: "―"; margin: 0 8px; color: var(--pp-pen);}
/* 선언 */
.tlb-paper.tlb-paper .pp-decl {background: var(--pp-navy); color: #EEF1F6; border-top: 0;}
.tlb-paper.tlb-paper .pp-decl p {max-width: 720px; font-family: var(--tlb-font-head); font-weight: 800; font-size: var(--tlb-fs-h3); line-height: var(--tlb-lh-ui); color: #EEF1F6;}
.tlb-paper.tlb-paper .pp-decl p + p {margin-top: 14px; color: #E6C98A;}
.tlb-paper.tlb-paper .pp-decl .pp-p {margin-top: 26px; font-family: var(--tlb-font-body); font-weight: 400; font-size: var(--tlb-fs-body); color: #C3CAD8;}
/* 두 단 */
.tlb-paper.tlb-paper .pp-two {display: grid; grid-template-columns: 1fr; gap: 44px; margin-top: 36px;}
@media (min-width: 900px) {.tlb-paper.tlb-paper .pp-two {grid-template-columns: 1fr 1fr; gap: 56px;}}
.tlb-paper.tlb-paper .pp-sub-h {padding-bottom: 10px; border-bottom: 1px solid var(--pp-ink); font-family: var(--tlb-font-head); font-weight: 800; font-size: var(--tlb-fs-lead); color: var(--pp-ink);}
.tlb-paper.tlb-paper .pp-list {list-style: none;}
.tlb-paper.tlb-paper .pp-list li {padding: 12px 0; border-bottom: 1px solid var(--pp-rule); font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-compact); color: var(--pp-ink);}
.tlb-paper.tlb-paper .pp-list li small {display: block; font-size: var(--tlb-fs-caption); color: var(--pp-sub);}
.tlb-paper.tlb-paper .pp-list--no li {color: var(--pp-sub); text-decoration: line-through; text-decoration-color: rgba(200,80,63,.6);}
/* 지면 */
.tlb-paper.tlb-paper .pp-pages {display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; max-width: 640px;}
.tlb-paper.tlb-paper .pp-pages figure img {border: 1px solid var(--pp-rule); box-shadow: 0 10px 20px -14px rgba(29,36,51,.5);}
.tlb-paper.tlb-paper .pp-pages figcaption {margin-top: 8px; font-size: var(--tlb-fs-micro); line-height: var(--tlb-lh-head); color: var(--pp-sub);}
/* 저자 */
.tlb-paper.tlb-paper .pp-author {display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 32px; max-width: 880px;}
.tlb-paper.tlb-paper .pp-author img {width: 100%; max-width: 320px; border: 1px solid var(--pp-rule);}
.tlb-paper.tlb-paper .pp-author ul {list-style: none;}
.tlb-paper.tlb-paper .pp-author li {padding: 8px 0; border-bottom: 1px solid var(--pp-rule); font-size: var(--tlb-fs-small);}
@media (min-width: 900px) {.tlb-paper.tlb-paper .pp-author {grid-template-columns: 300px 1fr; gap: 48px;}}
/* 후기 */
.tlb-paper.tlb-paper .pp-reviews {display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 28px; max-width: 880px;}
.tlb-paper.tlb-paper .pp-reviews blockquote {padding: 18px 0; border-bottom: 1px solid var(--pp-rule); font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-text); color: var(--pp-ink);}
.tlb-paper.tlb-paper .pp-reviews blockquote small {display: block; margin-top: 6px; font-size: var(--tlb-fs-micro); color: var(--pp-sub);}
@media (min-width: 900px) {.tlb-paper.tlb-paper .pp-reviews {grid-template-columns: 1fr 1fr; column-gap: 48px;}}
/* 질문 */
.tlb-paper.tlb-paper .pp-qa {display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 28px; max-width: 880px;}
.tlb-paper.tlb-paper .pp-qa > div {padding: 20px 0; border-bottom: 1px solid var(--pp-rule);}
.tlb-paper.tlb-paper .pp-qa h3 {font-family: var(--tlb-font-head); font-weight: 800; font-size: var(--tlb-fs-read); line-height: var(--tlb-lh-ui); color: var(--pp-ink);}
.tlb-paper.tlb-paper .pp-qa p {margin-top: 8px; font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-text); color: var(--pp-sub);}
.tlb-paper.tlb-paper .pp-qa a {color: var(--pp-navy); font-weight: 700; text-decoration: underline; text-underline-offset: 3px;}
@media (min-width: 900px) {.tlb-paper.tlb-paper .pp-qa {grid-template-columns: 1fr 1fr; column-gap: 48px;}}
/* 마무리 */
.tlb-paper.tlb-paper .pp-end {display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center;}
.tlb-paper.tlb-paper .pp-end img {max-width: 220px; filter: drop-shadow(0 14px 22px rgba(29,36,51,.22));}
.tlb-paper.tlb-paper .pp-price {margin-top: 18px; font-family: var(--tlb-font-head); font-weight: 800; font-size: clamp(38px, 10vw, 52px); line-height: var(--tlb-lh-none); color: var(--pp-navy);}
.tlb-paper.tlb-paper .pp-price small {margin-left: 4px; font-size: 20px;}
.tlb-paper.tlb-paper .pp-meta {margin-top: 14px; font-size: var(--tlb-fs-meta); color: var(--pp-sub);}
@media (min-width: 900px) {.tlb-paper.tlb-paper .pp-end {grid-template-columns: 240px 1fr; gap: 56px;}}
.tlb-paper.tlb-paper .pp-table td.pp-x {color: #8C8477; text-decoration: line-through; text-decoration-color: rgba(200,80,63,.6);}
@media (max-width: 640px) {
  .tlb-paper.tlb-paper .pp-table--stack thead {display: none;}
  .tlb-paper.tlb-paper .pp-table--stack tr {display: block; padding: 14px 0; border-bottom: 1px solid var(--pp-rule);}
  .tlb-paper.tlb-paper .pp-table--stack td {display: block; padding: 3px 0; border: 0;}
  .tlb-paper.tlb-paper .pp-table--stack td.pp-strong {margin-bottom: 4px; font-size: var(--tlb-fs-body);}
}

/* ---- 자소서형 추가 (v4): 단계 머리, 네 칸 질문, 이어지는 사슬, 쪽 번호 목차 ---- */
.tlb-story.tlb-story .tlb9-stage-no {margin: 0 0 16px; font-family: var(--tlb-font-head); font-weight: 800; font-size: var(--tlb-fs-small); color: var(--pt);}
.tlb-story.tlb-story .tlb9-diag {max-width: 560px; margin: 30px auto 0; padding: 24px 22px; text-align: left; background: color-mix(in oklab, var(--story-ink) 6%, var(--story-base)); border: 1px solid color-mix(in srgb, var(--story-ink) 14%, transparent); border-radius: 4px;}
.tlb-story.tlb-story .tlb9-diag p {margin: 0; font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-body); color: var(--ink); word-break: keep-all;}
.tlb-story.tlb-story .tlb9-diag p + p {margin-top: 12px;}
.tlb-story.tlb-story .tlb9-diag small {display: block; margin-bottom: 8px; font-family: var(--tlb-font-head); font-weight: 700; font-size: var(--tlb-fs-micro); color: var(--pt);}
.tlb-story.tlb-story .tlb9-diag s {color: var(--sub); text-decoration-color: var(--story-signal); text-decoration-thickness: 1.5px;}
.tlb-story.tlb-story .tlb9-asks {display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 520px; margin: 26px auto 0; padding: 0; list-style: none;}
.tlb-story.tlb-story .tlb9-asks li {padding: 16px 12px; font-size: var(--tlb-fs-meta); line-height: var(--tlb-lh-ui); color: var(--ink); border: 1px dashed color-mix(in srgb, var(--story-ink) 30%, transparent); border-radius: 4px; word-break: keep-all;}
.tlb-story.tlb-story .tlb9-chain {display: flex; flex-direction: column; align-items: center; gap: 0; max-width: 360px; margin: 30px auto 0; padding: 0; list-style: none;}
.tlb-story.tlb-story .tlb9-chain li {width: 100%; padding: 12px 0; font-family: var(--tlb-font-head); font-weight: 700; font-size: var(--tlb-fs-read); color: var(--ink); text-align: center; border-top: 1px solid color-mix(in srgb, var(--story-ink) 14%, transparent);}
.tlb-story.tlb-story .tlb9-chain li:last-child {border-bottom: 1px solid color-mix(in srgb, var(--story-ink) 14%, transparent);}
.tlb-story.tlb-story .tlb9-chain li span {display: block; font-family: var(--tlb-font-body); font-weight: 400; font-size: var(--tlb-fs-caption); color: var(--sub);}
.tlb-story.tlb-story .tlb9-src {margin: 22px auto 0; font-size: var(--tlb-fs-caption); color: var(--pt);}
.tlb-story.tlb-story .tlb9-toc {width: 100%; max-width: 560px; margin: 36px auto 0; border-collapse: collapse; text-align: left;}
.tlb-story.tlb-story .tlb9-toc td {padding: 13px 6px; font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-ui); color: var(--ink); border-bottom: 1px solid color-mix(in srgb, var(--story-ink) 12%, transparent); vertical-align: top; word-break: keep-all;}
.tlb-story.tlb-story .tlb9-toc td:first-child {width: 4.4em; font-family: var(--tlb-font-head); font-weight: 800; color: var(--pt); white-space: nowrap;}
.tlb-story.tlb-story .tlb9-toc td:last-child {width: 3em; text-align: right; color: var(--sub); font-variant-numeric: tabular-nums;}
.tlb-story.tlb-story .tlb9-toc tr.is-hit td {background: color-mix(in oklab, var(--story-accent) 10%, var(--story-base));}
.tlb-story.tlb-story .tlb9-pages {display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 560px; margin: 30px auto 0;}
.tlb-story.tlb-story .tlb9-pages label {display: block; cursor: zoom-in;}
.tlb-story.tlb-story .tlb9-pages img {display: block; width: 100%; height: auto; margin: 0; border-radius: 2px; box-shadow: 0 8px 20px rgba(0,0,0,.45);}
.tlb-story.tlb-story .tlb9-pages small {display: block; margin-top: 8px; font-size: var(--tlb-fs-micro); line-height: var(--tlb-lh-head); color: var(--sub);}

/* ==== 자소서 v5 (2026-09-27): 표와 큰 지면 ==== */
.tlb-story.tlb-story .tlb9-tbl {width: 100%; max-width: 640px; margin: 36px auto 0; border-collapse: collapse; text-align: left;}
.tlb-story.tlb-story .tlb9-tbl th {padding: 0 10px 10px; font-family: var(--tlb-font-head); font-weight: 700; font-size: var(--tlb-fs-caption); color: var(--sub); border-bottom: 1px solid color-mix(in srgb, var(--story-ink) 22%, transparent); text-align: left;}
.tlb-story.tlb-story .tlb9-tbl td {padding: 15px 10px; font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-text); color: var(--ink); border-bottom: 1px solid color-mix(in srgb, var(--story-ink) 10%, transparent); vertical-align: top; word-break: keep-all;}
.tlb-story.tlb-story .tlb9-tbl td:first-child {font-family: var(--tlb-font-head); font-weight: 700; color: var(--pt);}
.tlb-story.tlb-story .tlb9-tbl td.is-sub {color: var(--sub); font-size: var(--tlb-fs-caption); white-space: nowrap;}
@media (max-width: 640px) {
  .tlb-story.tlb-story .tlb9-tbl thead {display: none;}
  .tlb-story.tlb-story .tlb9-tbl tr {display: block; padding: 16px 2px; border-bottom: 1px solid color-mix(in srgb, var(--story-ink) 12%, transparent);}
  .tlb-story.tlb-story .tlb9-tbl td {display: block; padding: 3px 0; border: 0;}
  .tlb-story.tlb-story .tlb9-tbl td[data-l]::before {content: attr(data-l); display: block; margin-bottom: 2px; font-family: "SUITE", sans-serif; font-weight: 700; font-size: 12px; color: var(--sub);}
  .tlb-story.tlb-story .tlb9-tbl td.is-sub {white-space: normal;}
}
.tlb-story.tlb-story .tlb9-pages--lg {grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; max-width: 640px;}
.tlb-story.tlb-story .tlb9-pages--lg small {margin-top: 12px; font-size: var(--tlb-fs-meta); line-height: var(--tlb-lh-compact); text-align: left;}
.tlb-story.tlb-story .tlb9-pages--one {grid-template-columns: minmax(0, 360px); justify-content: center;}

/* 자기소개서 v8: 승인 면접 컴포넌트 유지. 모든 보정은 .tlb-jaso 안에만 적용. */
.tlb-story.tlb-jaso :is(.tlb9-big, .tlb9-mid, .tlb9-solve-tit) {font-family: var(--tlb-font-head);}
.tlb-story.tlb-jaso :is(.tlb9-qa2-txt, .tlb9-say, .tlb9-faq p, blockquote) {font-family: var(--tlb-font-body);}
.tlb-story.tlb-jaso .tlb9-qa2-txt {text-align: left;}
.tlb-story.tlb-jaso :is(.tlb9-p, .tlb9-solve-desc, .tlb9-faq p) {font-kerning: normal; overflow-wrap: break-word;}
.tlb-story.tlb-jaso .tlb9-routine {margin-top: 42px; margin-bottom: 34px;}
.tlb-story.tlb-jaso .tlb-jaso-gap {margin-top: 42px;}
.tlb-story.tlb-jaso .tlb9-big + .tlb9-faqs {margin-top: 42px;}
.tlb-story.tlb-jaso .tlb-jaso-teaser {margin-top: 36px; font-size: 19px; border: 0;}
.tlb-story.tlb-jaso .tlb-jaso-manuscript {max-width: 600px; margin: 38px auto 0; padding: 30px 28px; background: var(--story-ink); color: #25231f; border-radius: 6px; text-align: left;}
.tlb-story.tlb-jaso .tlb-jaso-question {margin: 0; padding-bottom: 20px; border-bottom: 1px solid #d8d4cd; font-size: var(--tlb-fs-meta); line-height: var(--tlb-lh-text); color: #625c50;}
.tlb-story.tlb-jaso .tlb-jaso-label {margin: 22px 0 12px; font-size: var(--tlb-fs-caption); font-weight: 800; color: #6c614a;}
.tlb-story.tlb-jaso .tlb-jaso-manuscript blockquote {padding: 0; margin: 0; border: 0; font-size: var(--tlb-fs-read); line-height: var(--tlb-lh-read); letter-spacing: var(--tlb-ls-head); color: #25231f;}
.tlb-story.tlb-jaso .tlb-jaso-source {max-width: 640px; margin: 32px auto 0; text-align: left;}
.tlb-story.tlb-jaso .tlb-jaso-source > summary {padding: 17px 4px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--pt); font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-ui); cursor: pointer;}
.tlb-story.tlb-jaso .tlb-jaso-pull {max-width: 540px; margin: 38px auto 0; padding: 24px 12px; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 21px; line-height: var(--tlb-lh-compact); font-weight: 700; color: var(--pt);}
.tlb-story.tlb-jaso .tlb9-rv {margin-bottom: 34px;}
.tlb-story.tlb-jaso .tlb9-rvs {display: block; columns: 2; column-gap: 18px;}
.tlb-story.tlb-jaso .tlb9-rvs .tlb9-rv {margin: 0 0 28px;}
.tlb-story.tlb-jaso .tlb9-bookid-logo {width: 92px; height: auto;}
.tlb-story.tlb-jaso .tlb9-lb img {width: auto; height: auto; object-fit: contain;}
.tlb-story.tlb-jaso .tlb9-src {font-size: var(--tlb-fs-micro); color: var(--sub);}
.tlb-story.tlb-jaso .tlb9-pages small {color: var(--sub);}
.tlb-story.tlb-jaso .tlb-jaso-cta {display: flex; justify-content: center; align-items: center; gap: 22px; max-width: 420px; min-height: 60px; margin: 34px auto 0; padding: 16px 24px; background: var(--pt); color: #181612; font-family: var(--tlb-font-body); font-weight: 800; font-size: var(--tlb-fs-lead); line-height: var(--tlb-lh-ui); border-radius: 4px; text-decoration: none;}
.tlb-story.tlb-jaso .tlb-jaso-cta:hover {background: #ded3be;}
.tlb-story.tlb-jaso :is(a, summary):focus-visible {outline: 2px solid var(--pt); outline-offset: 5px;}
.tlb-story.tlb-jaso .tlb9-lb-toggle:focus-visible + label {outline: 2px solid var(--pt); outline-offset: -8px;}
@media (max-width: 599px) {
  .tlb-story.tlb-jaso .tlb-jaso-manuscript {padding: 24px 20px;}
  .tlb-story.tlb-jaso .tlb-jaso-manuscript blockquote {font-size: var(--tlb-fs-body);}
  .tlb-story.tlb-jaso .tlb9-qa2 {grid-template-columns: minmax(84px, 26%) minmax(0, 1fr); column-gap: 15px;}
  .tlb-story.tlb-jaso .tlb9-qa2-note {padding: 8px 7px;}
  .tlb-story.tlb-jaso .tlb9-qa2-note::after {width: 15px;}
  .tlb-story.tlb-jaso .tlb9-qa2-txt {padding-left: 12px; padding-right: 12px; font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-body);}
  .tlb-story.tlb-jaso .tlb-jaso-worksheets {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px;}
  .tlb-story.tlb-jaso .tlb-jaso-worksheets small {font-size: var(--tlb-fs-caption);}
  .tlb-story.tlb-jaso .tlb-jaso-teaser {font-size: var(--tlb-fs-read);}
  .tlb-story.tlb-jaso .tlb-jaso-cta {font-size: var(--tlb-fs-read);}
}
@media (max-width: 420px) {
  .tlb-story.tlb-jaso .tlb9-rvs {columns: 1;}
}

/* =====================================================================
   상세 공용 컴포넌트 추가분 (2026-09-28, The LEET BIBLE Basic 2028 상세에서 출발)
   대표 지시: 상세마다 새 CSS 파일을 만들지 않고 이 파일을 키운다. 색은 모두 테마 변수(--pt, --story-*)에서 계산된다.
   herobook(첫 화면 책), cta(받기 버튼), fall(단계별 속말 타임라인), dx(막연한 것과 구체적인 것 대비),
   upd(개정 전후 비교), vs(두 책 비교), order(교재 순서, 표지와 링크),
   next(다음 책 링크 줄), notice(주문 안내문), mid--gap(중간 제목 앞 넓은 간격)
   ===================================================================== */
/* =====================================================================
   Basic 2028 상세 전용 컴포넌트 (2026-09-28 시안). 배포 때 tlb-story.css 끝에 붙인다.
   면접 상세와 겹치지 않는 칸만 새로 만들었다. 색은 모두 테마 변수에서 계산한다.
   ===================================================================== */

/* 첫 화면 아래 책 한 줄 */
.tlb-story.tlb-story .tlb9-herobook {display: flex; align-items: center; justify-content: center; gap: 16px; margin: 34px auto 0; text-align: left;}
.tlb-story.tlb-story .tlb9-herobook img {width: 74px; height: auto; border-radius: 2px 4px 4px 2px; box-shadow: 0 12px 28px rgba(0,0,0,0.6);}
.tlb-story.tlb-story .tlb9-herobook p {margin: 0; font-size: var(--tlb-fs-meta); line-height: var(--tlb-lh-compact); color: var(--sub);}
.tlb-story.tlb-story .tlb9-herobook b {display: block; font-family: var(--tlb-font-head); font-weight: 700; font-size: var(--tlb-fs-small); color: var(--ink);}
.tlb-story.tlb-story .tlb9-herobook strong {font-family: var(--tlb-font-head); font-weight: 800; font-size: 22px; color: var(--pt);}
.tlb-story.tlb-story .tlb9-cta {display: block; width: min(100%, 340px); margin: 30px auto 0; padding: 16px 20px; border-radius: 8px; background: var(--pt); text-align: center; text-decoration: none; font-family: var(--tlb-font-head); font-weight: 800; font-size: var(--tlb-fs-read); letter-spacing: var(--tlb-ls-head); color: #0B0B0B !important;}

/* 2칸: 공부 기록장 */


/* 3칸: 점수가 오르지 않는 과정(속말 타임라인). 아래로 갈수록 점이 대표색에서 신호색으로 바뀐다 */
.tlb-story.tlb-story .tlb9-fall {list-style: none; width: min(100%, 520px); margin: 46px auto 0; padding: 0; text-align: left;}
.tlb-story.tlb-story .tlb9-fall li {position: relative; margin: 0; padding: 0 0 26px 30px; --dot: color-mix(in oklab, var(--story-signal) var(--mix, 0%), var(--story-accent));}
.tlb-story.tlb-story .tlb9-fall li:nth-child(2) {--mix: 20%;}
.tlb-story.tlb-story .tlb9-fall li:nth-child(3) {--mix: 40%;}
.tlb-story.tlb-story .tlb9-fall li:nth-child(4) {--mix: 60%;}
.tlb-story.tlb-story .tlb9-fall li:nth-child(5) {--mix: 80%;}
.tlb-story.tlb-story .tlb9-fall li:nth-child(n+6) {--mix: 100%;}
.tlb-story.tlb-story .tlb9-fall li::before {content: ""; position: absolute; left: 3px; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--dot);}
.tlb-story.tlb-story .tlb9-fall li::after {content: ""; position: absolute; left: 8px; top: 22px; bottom: 2px; width: 1px; background: color-mix(in srgb, var(--story-ink) 20%, transparent);}
.tlb-story.tlb-story .tlb9-fall li:last-child {padding-bottom: 0;}
.tlb-story.tlb-story .tlb9-fall li:last-child::after {display: none;}
.tlb-story.tlb-story .tlb9-fall-st {display: block; margin: 0 0 8px; font-family: var(--tlb-font-head); font-weight: 700; font-size: var(--tlb-fs-caption); color: var(--dot);}
.tlb-story.tlb-story .tlb9-fall-say {position: relative; margin: 0; padding: 13px 16px; border-radius: 4px 16px 16px 16px; background: color-mix(in oklab, var(--story-ink) 7%, var(--story-base)); font-family: var(--tlb-font-head); font-weight: 400; font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-compact); color: var(--ink); word-break: keep-all;}
.tlb-story.tlb-story .tlb9-fall-end {margin: 40px auto 0; max-width: 30em; font-family: var(--tlb-font-head); font-weight: 700; font-size: var(--tlb-fs-h5); line-height: var(--tlb-lh-ui); color: var(--ink); text-wrap: balance; word-break: keep-all;}

/* 4칸: 흔한 진단과 고칠 수 있는 진단 */
.tlb-story.tlb-story .tlb9-dx {display: grid; grid-template-columns: 1fr; gap: 14px; max-width: 640px; margin: 44px auto 0; text-align: left;}
.tlb-story.tlb-story .tlb9-dx-col {padding: 22px 20px 18px; border-radius: 10px;}
.tlb-story.tlb-story .tlb9-dx-col--vague {background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--story-ink) 14%, transparent);}
.tlb-story.tlb-story .tlb9-dx-col--vague li {color: var(--faint);}
.tlb-story.tlb-story .tlb9-dx-col--exact {background: color-mix(in oklab, var(--story-accent) 22%, var(--story-base)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--story-accent) 70%, transparent);}
.tlb-story.tlb-story .tlb9-dx-tit {margin: 0 0 10px; font-family: var(--tlb-font-head); font-weight: 800; font-size: var(--tlb-fs-meta); color: var(--sub);}
.tlb-story.tlb-story .tlb9-dx-col--exact .tlb9-dx-tit {color: var(--pt);}
.tlb-story.tlb-story .tlb9-dx ul {list-style: none; margin: 0; padding: 0;}
.tlb-story.tlb-story .tlb9-dx li {margin: 0; padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--story-ink) 9%, transparent); font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-ui); color: var(--sub); word-break: keep-all;}
.tlb-story.tlb-story .tlb9-dx li:first-child {border-top: 0;}
.tlb-story.tlb-story .tlb9-dx-col--exact li {font-family: var(--tlb-font-head); font-weight: 600; color: var(--ink);}
@media (min-width: 640px) {
  .tlb-story.tlb-story .tlb9-dx {grid-template-columns: 1fr 1fr; gap: 16px;}
}
@property --sec {syntax: "<integer>"; initial-value: 150; inherits: false;}
@keyframes tlb9-timer {from { transform: scaleX(1); background: var(--pt); } 80% { background: var(--pt); } to { transform: scaleX(0); background: var(--story-signal); }}
@keyframes tlb9-sec {from { --sec: 150; } to { --sec: 0; }}

/* 7칸: 판단표 */



/* 8칸: 표현은 달라도 같은 차원(대응 도식). 알약 대신 표 형태의 줄 {width: min(100%, 400px); margin: 44px auto 0; text-align: left;}


/* 11칸: Basic과 Principle (상) 비교 */
.tlb-story.tlb-story .tlb9-vs {max-width: 640px; margin: 44px auto 0; text-align: left;}
.tlb-story.tlb-story .tlb9-vs-head, .tlb-story.tlb-story .tlb9-vs-row {display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px;}
.tlb-story.tlb-story .tlb9-vs-head > div {padding: 0 0 14px; text-align: center;}
.tlb-story.tlb-story .tlb9-vs-head img {width: 100%; max-width: 150px; margin: 0 auto; border-radius: 8px;}
.tlb-story.tlb-story .tlb9-vs-head b {display: block; margin-top: 10px; font-family: var(--tlb-font-head); font-weight: 800; font-size: var(--tlb-fs-read); color: var(--ink);}
.tlb-story.tlb-story .tlb9-vs-head > div:last-child b {color: var(--pt);}
.tlb-story.tlb-story .tlb9-vs-row {padding: 14px 0; border-top: 1px solid color-mix(in srgb, var(--story-ink) 12%, transparent);}
.tlb-story.tlb-story .tlb9-vs-row:last-of-type {border-bottom: 1px solid color-mix(in srgb, var(--story-ink) 12%, transparent);}
.tlb-story.tlb-story .tlb9-vs-l {grid-column: 1 / -1; margin: 0 0 8px; font-family: var(--tlb-font-head); font-weight: 700; font-size: var(--tlb-fs-caption); color: var(--sub); text-align: center;}
.tlb-story.tlb-story .tlb9-vs-row p:not(.tlb9-vs-l) {margin: 0; padding: 13px 12px; border-radius: 8px; font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-ui); color: var(--sub); word-break: keep-all; background: color-mix(in oklab, var(--story-ink) 4%, var(--story-base));}
.tlb-story.tlb-story .tlb9-vs-row p:last-child {color: var(--ink); background: color-mix(in oklab, var(--story-accent) 14%, var(--story-base));}
.tlb-story.tlb-story .tlb9-vs-links {display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin: 26px auto 0;}
.tlb-story.tlb-story .tlb9-vs-links a, .tlb-story.tlb-story .tlb9-next a {font-family: var(--tlb-font-head); font-weight: 700; font-size: var(--tlb-fs-small); color: var(--pt); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;}
.tlb-story.tlb-story .tlb9-vs-links span {font-size: var(--tlb-fs-meta); color: var(--sub);}
.tlb-story.tlb-story .tlb9-vs-sub {max-width: 30em; margin: 26px auto 0; font-size: var(--tlb-fs-meta); line-height: var(--tlb-lh-text); color: var(--sub); text-wrap: balance; word-break: keep-all;}

/* 12칸: 후기 기록 카드 */



/* 13칸: 교재의 순서 (표지 목록) */
.tlb-story.tlb-story .tlb9-order {list-style: none; width: min(100%, 520px); margin: 44px auto 0; padding: 0; text-align: left;}
.tlb-story.tlb-story .tlb9-order li {display: grid; grid-template-columns: 84px 1fr; gap: 16px; align-items: center; margin: 0; padding: 14px 0; border-top: 1px dashed color-mix(in srgb, var(--story-ink) 34%, transparent);}
.tlb-story.tlb-story .tlb9-order li:last-child {border-bottom: 1px dashed color-mix(in srgb, var(--story-ink) 34%, transparent);}
.tlb-story.tlb-story .tlb9-order img {width: 84px; border-radius: 6px;}
.tlb-story.tlb-story .tlb9-order small {display: block; font-family: var(--tlb-font-head); font-weight: 700; font-size: var(--tlb-fs-micro); color: var(--pt);}
.tlb-story.tlb-story .tlb9-order :is(b, strong) {display: block; margin: 2px 0 4px; font-family: var(--tlb-font-head); font-weight: 800; font-size: var(--tlb-fs-read); color: var(--ink);}
.tlb-story.tlb-story .tlb9-order span {display: block; font-size: var(--tlb-fs-meta); line-height: var(--tlb-lh-ui); color: var(--sub); word-break: keep-all;}
.tlb-story.tlb-story .tlb9-order em {display: flex; gap: 16px; margin-top: 8px; font-style: normal;}
.tlb-story.tlb-story .tlb9-order em a {font-family: var(--tlb-font-head); font-weight: 700; font-size: var(--tlb-fs-meta); color: var(--pt); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;}
.tlb-story.tlb-story .tlb9-order li.is-now {padding: 16px 14px; border-radius: 10px; border-top-color: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--story-accent) 60%, transparent);}
.tlb-story.tlb-story .tlb9-order li.is-now + li {border-top-color: transparent;}
/* 교재 설명 전체를 새 창 링크로(2026-09-28 대표). 글자색은 그대로, 설명 줄에만 옅은 밑줄 */
.tlb-story.tlb-story .tlb9-order a.tlb9-order-go {display: block; color: inherit; text-decoration: none;}
.tlb-story.tlb-story .tlb9-order a.tlb9-order-go span {text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--story-ink) 28%, transparent); text-underline-offset: 4px; text-decoration-thickness: 1px;}
.tlb-story.tlb-story .tlb9-next {display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin: 26px auto 0; font-size: var(--tlb-fs-meta); color: var(--sub);}

/* 14-2칸: 무료로 드리는 이유 (맺음말 원문) */


/* 16칸: 주문 안내문(원문) */
.tlb-story.tlb-story .tlb9-notice {max-width: 520px; margin: 34px auto 0; padding: 16px 18px; border-radius: 8px; background: rgba(0,0,0,0.45); text-align: left;}
.tlb-story.tlb-story .tlb9-notice p {margin: 0; font-size: var(--tlb-fs-caption); line-height: var(--tlb-lh-text); color: var(--ink); word-break: keep-all;}
.tlb-story.tlb-story .tlb9-notice p + p {margin-top: 8px;}
.tlb-story.tlb-story .tlb9-notice b {margin-right: 6px; font-family: var(--tlb-font-head); font-weight: 800; color: var(--pt);}

/* 스크롤 연출: 새 컴포넌트도 기존 칸과 같은 방식으로 */
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
.tlb-story.tlb-story :is(.tlb9-fall li, .tlb9-dx li, .tlb9-vs-row) {animation: tlb9-from-l linear both; animation-timeline: view(); animation-range: entry 50% cover 40%;}
.tlb-story.tlb-story :is(.tlb9-dx-col, .tlb9-order li) {animation: tlb9-rise-s linear both; animation-timeline: view(); animation-range: entry 30% cover 38%;}
}
}

/* 2026-09-28 대표 피드백 반영: 점수가 그대로인 이유 목록, 첫 화면 수신 동의 한 줄 */


/* 2026-09-28 개정 칸: 새로 들어간 곳을 책 목차 제목 그대로 한 줄씩(표지 전후 비교는 대표 반려). 칩(tlb9-new)은 새 내용 표시용, 다른 칸 헤딩 위에도 쓴다(tlb9-newhead) */
.tlb-story.tlb-story .tlb9-new {display: inline-block; padding: 3px 8px 4px; border-radius: 3px; background: var(--pt); color: var(--story-base); font-family: var(--tlb-font-head); font-weight: 800; font-size: var(--tlb-fs-micro); line-height: var(--tlb-lh-title); vertical-align: 1px;}
.tlb-story.tlb-story .tlb9-newhead {margin: 0 0 18px; text-align: center;}
.tlb-story.tlb-story .tlb9-upd {list-style: none; max-width: min(calc(100% - 20px), 520px); margin: 44px auto 0; padding: 0; text-align: left; border-bottom: 1px dashed color-mix(in srgb, var(--story-ink) 34%, transparent);}
.tlb-story.tlb-story .tlb9-upd > li {padding: 22px 20px 24px; border-top: 1px dashed color-mix(in srgb, var(--story-ink) 34%, transparent);}
.tlb-story.tlb-story .tlb9-upd-where {display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--tlb-font-head); font-weight: 700; font-size: var(--tlb-fs-caption); color: var(--faint);}
.tlb-story.tlb-story .tlb9-upd-tit {margin: 12px 0 0; font-family: var(--tlb-font-head); font-weight: 700; font-size: var(--tlb-fs-h5); line-height: var(--tlb-lh-head); color: var(--ink); word-break: keep-all; text-wrap: balance;}
.tlb-story.tlb-story .tlb9-upd-desc {margin: 8px 0 0; font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-compact); color: var(--sub); word-break: keep-all;}
/* 책 미리보기 지면 두 쪽 나란히 */


.tlb-story.tlb-story .tlb9-letter .tlb9-bio + .tlb9-bio {margin-top: 14px;}
.tlb-story.tlb-story .tlb9-mid--gap {margin-top: 64px;}
/* 기본 세로 간격 (2026-09-28): 위쪽 여백이 0이라 헤딩이나 본문 바로 뒤에 오면 붙던 컴포넌트. 값은 기존 라이브(89)와 자소서 후보에서 쓰던 간격 그대로라 기존 화면은 바뀌지 않는다. 인라인 margin-top이나 전용 간격 클래스(tlb-jaso-gap, tlb9-mid--gap 등 이름에 -gap이 든 것)가 있으면 그것이 우선한다 */
.tlb-story.tlb-story .tlb9-in > * + .tlb9-routine:not([class*="-gap"]) {margin-top: 42px;}
.tlb-story.tlb-story .tlb9-in > * + .tlb9-mid:not([class*="-gap"]) {margin-top: 40px;}
.tlb-story.tlb-story .tlb9-in > * + .tlb9-problem:not([class*="-gap"]) {margin-top: 36px;}
.tlb-story.tlb-story .tlb9-in > * + .tlb9-qa2:not([class*="-gap"]) {margin-top: 42px;}

/* ==== 2026-09-28 자소서 v9에서 만든 범용 부품. 색은 테마 변수에서만 계산한다 ====
   tlb9-branch: 한 활동에서 갈라지는 문항별 문장 / tlb9-sbars: 학교별 문항 분량 막대 / tlb9-qa2--prose: 긴 원고 왼쪽 정렬 */
.tlb-story.tlb-story .tlb9-cards {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; max-width: 540px; margin: 44px auto 0; padding: 0 4px; list-style: none;}
.tlb-story.tlb-story .tlb9-cards li {margin: 0; padding: 12px 14px 18px; text-align: center; color: color-mix(in oklab, var(--story-accent) 24%, #000); background: repeating-linear-gradient(to bottom, transparent 0 25px, color-mix(in srgb, var(--story-accent) 22%, transparent) 25px 26px) 0 38px / 100% calc(100% - 38px) no-repeat, var(--story-ink); border-radius: 2px; box-shadow: 0 12px 24px rgba(0, 0, 0, .5); transform: rotate(var(--tlb9-r, 0deg)) translateY(var(--tlb9-y, 0px));}
.tlb-story.tlb-story .tlb9-cards li:nth-child(4n+1) {--tlb9-r: -2.4deg;}
.tlb-story.tlb-story .tlb9-cards li:nth-child(4n+2) {--tlb9-r: 1.8deg; --tlb9-y: 10px;}
.tlb-story.tlb-story .tlb9-cards li:nth-child(4n+3) {--tlb9-r: 1.1deg; --tlb9-y: -6px;}
.tlb-story.tlb-story .tlb9-cards li:nth-child(4n) {--tlb9-r: -1.4deg; --tlb9-y: 6px;}
.tlb-story.tlb-story .tlb9-cards small {display: block; margin: 0 0 10px; font-size: var(--tlb-fs-micro); font-weight: 600; line-height: var(--tlb-lh-head); color: color-mix(in oklab, var(--story-accent) 45%, #333);}
.tlb-story.tlb-story .tlb9-cards b {display: block; font-family: var(--tlb-font-head); font-weight: 700; font-size: var(--tlb-fs-body); line-height: var(--tlb-lh-compact); word-break: keep-all;}
@media (min-width: 640px) {
  .tlb-story.tlb-story .tlb9-cards {grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 18px; max-width: 620px;}
  .tlb-story.tlb-story .tlb9-cards b {font-size: var(--tlb-fs-read);}
}

.tlb-story.tlb-story .tlb9-unsaid {max-width: 500px; margin: 44px auto 0; text-align: left;}
.tlb-story.tlb-story .tlb9-unsaid-cap {margin: 0 0 12px; font-size: var(--tlb-fs-caption); font-weight: 600; color: var(--sub);}
.tlb-story.tlb-story .tlb9-unsaid-notes {display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none;}
.tlb-story.tlb-story .tlb9-unsaid-notes li {align-self: flex-start; max-width: 88%; margin: 0; padding: 9px 13px; font-size: var(--tlb-fs-meta); line-height: var(--tlb-lh-ui); color: var(--faint); border: 1px dashed color-mix(in srgb, var(--story-ink) 28%, transparent); border-radius: 3px; word-break: keep-all;}
.tlb-story.tlb-story .tlb9-unsaid-notes li:nth-child(even) {align-self: flex-end;}
.tlb-story.tlb-story .tlb9-unsaid-box {margin: 30px 0 0; padding: 16px 20px 26px; background: var(--story-ink); color: color-mix(in oklab, var(--story-accent) 24%, #000); border-radius: 4px; box-shadow: 0 14px 30px rgba(0, 0, 0, .5);}
.tlb-story.tlb-story .tlb9-unsaid-head {display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 16px; padding: 0 0 10px; border-bottom: 1px solid color-mix(in srgb, var(--story-accent) 30%, transparent); font-size: var(--tlb-fs-caption); color: color-mix(in oklab, var(--story-accent) 45%, #333);}
.tlb-story.tlb-story .tlb9-unsaid-head :is(b, strong) {font-family: var(--tlb-font-head); font-weight: 700; font-size: var(--tlb-fs-meta); color: color-mix(in oklab, var(--story-accent) 24%, #000);}
.tlb-story.tlb-story .tlb9-unsaid-text {margin: 0; font-size: var(--tlb-fs-read); line-height: var(--tlb-lh-body); word-break: keep-all;}


.tlb-story.tlb-story .tlb9-branch {max-width: 580px; margin: 44px auto 0;}
.tlb-story.tlb-story .tlb9-branch-root {display: inline-block; margin: 0; padding: 12px 20px; font-family: var(--tlb-font-head); font-weight: 700; font-size: var(--tlb-fs-body); line-height: var(--tlb-lh-ui); color: color-mix(in oklab, var(--story-accent) 24%, #000); background: var(--story-ink); border-radius: 3px;}
.tlb-story.tlb-story .tlb9-branch-list {position: relative; margin: 0; padding: 30px 0 0; list-style: none; text-align: left;}
.tlb-story.tlb-story .tlb9-branch-list::before {content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 30px; background: color-mix(in srgb, var(--story-accent) 60%, transparent);}
.tlb-story.tlb-story .tlb9-branch-list li {margin: 0; padding: 20px 2px 22px; border-top: 1px solid color-mix(in srgb, var(--story-accent) 30%, transparent);}
.tlb-story.tlb-story .tlb9-branch-list li:last-child {border-bottom: 1px solid color-mix(in srgb, var(--story-accent) 30%, transparent);}
.tlb-story.tlb-story .tlb9-branch-q {margin: 0 0 8px; font-family: var(--tlb-font-head); font-weight: 700; font-size: var(--tlb-fs-small); color: var(--pt);}
.tlb-story.tlb-story .tlb9-branch-s {margin: 0; font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-body); color: var(--sub); word-break: keep-all;}
.tlb-story.tlb-story .tlb9-branch-s mark {padding: 0 1px; color: var(--ink); background: linear-gradient(transparent 58%, color-mix(in srgb, var(--story-accent) 40%, transparent) 58%);}

.tlb-story.tlb-story .tlb9-sbars {max-width: 600px; margin: 44px auto 0; padding: 0; list-style: none; text-align: left;}
.tlb-story.tlb-story .tlb9-sbars > li {margin: 0; padding: 18px 0 20px; border-top: 1px solid color-mix(in srgb, var(--story-ink) 12%, transparent);}
.tlb-story.tlb-story .tlb9-sbars > li:last-child {border-bottom: 1px solid color-mix(in srgb, var(--story-ink) 12%, transparent);}
.tlb-story.tlb-story .tlb9-sbars-head {display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 10px;}
.tlb-story.tlb-story .tlb9-sbars-head :is(b, strong) {font-family: var(--tlb-font-head); font-weight: 800; font-size: var(--tlb-fs-read); color: var(--ink);}
.tlb-story.tlb-story .tlb9-sbars-head span {font-size: var(--tlb-fs-caption); color: var(--sub); white-space: nowrap;}
.tlb-story.tlb-story .tlb9-sbars-bar {display: flex; gap: 3px; width: var(--w, 100%); height: 22px;}
.tlb-story.tlb-story .tlb9-sbars-bar > span {flex: var(--g, 1) 1 0; min-width: 6px; background: color-mix(in oklab, var(--story-accent) 78%, var(--story-base)); border-radius: 1px;}
.tlb-story.tlb-story .tlb9-sbars-bar > span:nth-child(even) {background: color-mix(in oklab, var(--story-accent) 48%, var(--story-base));}
.tlb-story.tlb-story .tlb9-sbars-items {margin: 10px 0 0; font-size: var(--tlb-fs-caption); line-height: var(--tlb-lh-text); color: var(--sub); word-break: keep-all;}
.tlb-story.tlb-story .tlb9-sbars-note {margin: 6px 0 0; font-size: var(--tlb-fs-meta); line-height: var(--tlb-lh-compact); color: var(--ink); word-break: keep-all;}

.tlb-story.tlb-story .tlb9-qa2--prose .tlb9-qa2-txt {text-align: left;}

/* tlb9-redpen (2026-09-28 자소서 v9): 빨간 펜 첨삭. 테마를 따르는 어두운 면에 문제 구절은 물결 밑줄로 표시한다. 줄을 긋지 않아 문장이 그대로 읽힌다 */
.tlb-story.tlb-story .tlb9-redpen {max-width: 560px; margin: 36px auto 0; padding: 18px 22px 22px; text-align: left; background: color-mix(in oklab, var(--story-ink) 6%, var(--story-base)); border: 1px solid color-mix(in srgb, var(--story-ink) 14%, transparent); border-radius: 4px;}
.tlb-story.tlb-story .tlb9-redpen + .tlb9-redpen {margin-top: 16px;}
.tlb-story.tlb-story .tlb9-redpen-q {margin: 0 0 14px; padding: 0 0 12px; border-bottom: 1px solid color-mix(in srgb, var(--story-ink) 12%, transparent); font-size: var(--tlb-fs-meta); line-height: var(--tlb-lh-compact); color: var(--sub); word-break: keep-all;}
.tlb-story.tlb-story .tlb9-redpen-q :is(b, strong) {display: block; margin-bottom: 4px; font-family: var(--tlb-font-head); font-weight: 700; font-size: var(--tlb-fs-caption); color: var(--pt);}
.tlb-story.tlb-story .tlb9-redpen-s {margin: 0; font-size: var(--tlb-fs-read); line-height: var(--tlb-lh-read); color: var(--ink); word-break: keep-all;}
.tlb-story.tlb-story :is(.tlb9-redpen-s mark, .tlb9-redpen-s--all) {padding: 0; color: inherit; background: none; text-decoration: underline wavy var(--story-signal); text-decoration-thickness: 1.5px; text-underline-offset: 6px; text-decoration-skip-ink: none;}
.tlb-story.tlb-story .tlb9-redpen-tit {margin: 16px 0 6px; font-family: var(--tlb-font-head); font-weight: 700; font-size: var(--tlb-fs-body); line-height: var(--tlb-lh-ui); color: var(--story-signal);}
.tlb-story.tlb-story .tlb9-redpen-note {margin: 0; font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-text); color: var(--sub); word-break: keep-all;}
.tlb-story.tlb-story .tlb9-redpen-note :is(b, strong) {font-weight: 700; color: var(--ink);}

/* 컨셉색 선택형 (2026-09-28 자소서 v9): 면접 바이블에서 신호색(빨강)으로 칠한 장식을 대표색 계산으로 바꾼다. 순위 막대 없이 고민만 늘어놓는 칸, 후기 형광 칠에 쓴다. 뜻이 있는 빨강(첨삭, 빠진 칸, 고민 딱지)은 그대로 둔다 */
.tlb-story.tlb-story .tlb9-moments--theme .tlb9-moment {border-top-color: color-mix(in srgb, var(--story-accent) 30%, transparent);}
.tlb-story.tlb-story .tlb9-moments--theme .tlb9-moment:last-child {border-bottom-color: color-mix(in srgb, var(--story-accent) 30%, transparent);}
.tlb-story.tlb-story .tlb9-rvs--theme .tlb9-rv blockquote :is(b, strong) {background: linear-gradient(transparent 60%, color-mix(in srgb, var(--story-accent) 45%, transparent) 60%);}

/* tlb9-lead (2026-09-28 자소서 v9): 칸의 결론 한 줄. 헤딩 글꼴이 아니라 본문 글꼴(SUIT)로 크게 쓰고, 굵기는 500과 강조 700만 쓴다 */
.tlb-story.tlb-story .tlb9-lead {max-width: 560px; margin: 40px auto 0; font-family: var(--tlb-font-body); font-weight: 500; font-size: var(--tlb-fs-h5); line-height: var(--tlb-lh-text); color: var(--ink); word-break: keep-all;}
.tlb-story.tlb-story .tlb9-lead :is(b, strong) {font-family: var(--tlb-font-body); font-weight: 700;}

/* 목록형 장치는 내용 폭만큼 가운데에 둔다(SSOT 3절). 선언과 근거 목록이 넓은 화면에서 왼쪽에 쏠리던 문제 (2026-09-28) */
.tlb-story.tlb-story .tlb9-kpi {width: fit-content; max-width: min(100%, 560px); margin-left: auto; margin-right: auto;}

/* 글꼴 역할 바로잡기 (2026-09-28): 원고 옆 해설(qa2)은 원고 본문이 SUIT, 강조(해설 라벨과 밑줄 구절)가 SUITE다. 면접 상세에서도 반대로 나오던 것을 고친다 */
.tlb-story.tlb-story .tlb9-qa2-txt {font-family: var(--tlb-font-body);}
.tlb-story.tlb-story .tlb9-qa2-txt .tlb9-u {font-family: var(--tlb-font-head); font-weight: 700;}
.tlb-story.tlb-story .tlb9-qa2-note :is(b, strong) {font-family: var(--tlb-font-head); font-weight: 700;}

/* 짧은 항목 목록이 가운데 좁게 몰리지 않게 최소 폭을 둔다 (2026-09-28) */
.tlb-story.tlb-story .tlb9-qlist {min-width: min(100%, 340px);}

/* tlb9-docs (2026-09-28 자소서 v9): 지면 이미지와 제목, 쓰는 법 한 줄. 폰 2열, 넓은 화면 4열 */
.tlb-story.tlb-story .tlb9-docs {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 16px; max-width: 560px; margin: 44px auto 0;}
.tlb-story.tlb-story .tlb9-docs figure {margin: 0; text-align: center;}
.tlb-story.tlb-story .tlb9-docs label {display: block; cursor: zoom-in;}
.tlb-story.tlb-story .tlb9-docs img {display: block; width: 100%; height: auto; margin: 0; border-radius: 2px; box-shadow: 0 10px 24px rgba(0, 0, 0, .5);}
.tlb-story.tlb-story .tlb9-docs figcaption {margin-top: 14px;}
.tlb-story.tlb-story .tlb9-docs figcaption :is(b, strong) {display: block; font-family: var(--tlb-font-head); font-weight: 700; font-size: var(--tlb-fs-body); line-height: var(--tlb-lh-head); color: var(--ink);}
.tlb-story.tlb-story .tlb9-docs figcaption span {display: block; margin-top: 6px; font-size: var(--tlb-fs-caption); line-height: var(--tlb-lh-compact); color: var(--sub); word-break: keep-all;}
@media (min-width: 760px) {
  .tlb-story.tlb-story .tlb9-docs {grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 18px; max-width: 720px;}
}
.tlb-story.tlb-story .tlb9-checks .tlb9-checks-t {display: block;}

/* tlb-story--motion (2026-09-28, 페이지 단위로 켜는 설정): 글은 화면에 들어오는 동안 다 진해지게 끝내 읽기를 막지 않고,
   움직임은 대표 장치에 모은다. 움직임 줄이기 설정에서는 위쪽 공통 규칙이 모든 애니메이션을 끈다 */
@keyframes tlb9-m-rise {from {opacity: 0; transform: translateY(40px);} to {opacity: 1; transform: none;}}
@keyframes tlb9-m-fade {from {opacity: 0; transform: translateY(16px);} to {opacity: 1; transform: none;}}
@keyframes tlb9-m-pop {from {opacity: 0; transform: translateY(14px) scale(.92);} to {opacity: 1; transform: none;}}
@keyframes tlb9-m-deal {from {opacity: 0; transform: translateY(-70px) rotate(calc(var(--tlb9-r, 0deg) * 5)) scale(.9);} to {opacity: 1; transform: rotate(var(--tlb9-r, 0deg)) translateY(var(--tlb9-y, 0px));}}
@keyframes tlb9-m-ink {from {text-decoration-color: transparent;} to {text-decoration-color: var(--story-signal);}}
@keyframes tlb9-m-strike {from {text-decoration-color: transparent;} to {text-decoration-color: color-mix(in srgb, var(--story-signal) 80%, transparent);}}
@keyframes tlb9-m-grow-x {from {transform: scaleX(0);} to {transform: scaleX(1);}}
@keyframes tlb9-m-grow-y {from {transform: scaleY(0);} to {transform: scaleY(1);}}
@keyframes tlb9-m-left {from {opacity: 0; transform: translateX(-28px);} to {opacity: 1; transform: none;}}
.tlb-story.tlb-story--motion .tlb9:not(.tlb9--hero) :is(.tlb9-big, .tlb9-mid, .tlb9-name) {animation: tlb9-m-rise linear both; animation-timeline: view(); animation-range: entry 5% entry 70%;}
.tlb-story.tlb-story--motion .tlb9:not(.tlb9--hero) .tlb9-hl {animation: tlb9-hlsweep linear both; animation-timeline: view(); animation-range: entry 70% cover 32%;}
.tlb-story.tlb-story--motion .tlb9:not(.tlb9--hero) :is(.tlb9-p, .tlb9-small, .tlb9-lead) {animation: tlb9-m-fade linear both; animation-timeline: view(); animation-range: entry 0% entry 60%;}
.tlb-story.tlb-story--motion .tlb9--hero .tlb9-draft {animation: tlb9-m-fade .8s .9s cubic-bezier(.2, .7, .2, 1) both;}
.tlb-story.tlb-story--motion .tlb9--hero .tlb9-thoughts p {animation: tlb9-m-pop .6s cubic-bezier(.2, .8, .2, 1.2) both;}
.tlb-story.tlb-story--motion .tlb9--hero .tlb9-thoughts p:nth-child(1) {animation-delay: 1.5s;}
.tlb-story.tlb-story--motion .tlb9--hero .tlb9-thoughts p:nth-child(2) {animation-delay: 2.1s;}
.tlb-story.tlb-story--motion .tlb9--hero .tlb9-thoughts p:nth-child(3) {animation-delay: 2.7s;}
.tlb-story.tlb-story--motion .tlb9-cards li {animation: tlb9-m-deal linear both; animation-timeline: view(); animation-range: entry 0% entry 90%;}
.tlb-story.tlb-story--motion .tlb9-cards li:nth-child(even) {animation-range: entry 15% entry 100%;}
.tlb-story.tlb-story--motion :is(.tlb9-unsaid-notes li, .tlb9-moment, .tlb9-kpi > div, .tlb9-branch-list li, .tlb9-sbars > li, .tlb9-docs figure) {animation: tlb9-m-fade linear both; animation-timeline: view(); animation-range: entry 0% entry 70%;}
.tlb-story.tlb-story--motion :is(.tlb9-unsaid-box, .tlb9-redpen) {animation: tlb9-m-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 55%;}
.tlb-story.tlb-story--motion :is(.tlb9-redpen-s--all, .tlb9-redpen-s mark) {animation: tlb9-m-ink linear both; animation-timeline: view(); animation-range: entry 80% cover 40%;}
.tlb-story.tlb-story--motion .tlb9-redpen-tit {animation: tlb9-tag linear both; animation-timeline: view(); animation-range: entry 60% cover 35%;}
.tlb-story.tlb-story--motion .tlb9-kpi p.tlb9-kpi-no {animation: tlb9-m-strike linear both; animation-timeline: view(); animation-range: entry 90% cover 40%;}
.tlb-story.tlb-story--motion .tlb9-sbars-bar > span {transform-origin: left center; animation: tlb9-m-grow-x linear both; animation-timeline: view(); animation-range: entry 40% cover 35%;}
.tlb-story.tlb-story--motion .tlb9-branch-list::before {transform-origin: top center; animation: tlb9-m-grow-y linear both; animation-timeline: view(); animation-range: entry 10% entry 60%;}
.tlb-story.tlb-story--motion .tlb9-branch-list li {animation-name: tlb9-m-left;}
.tlb-story.tlb-story--motion .tlb9-plan-bar span {animation-range: entry 30% cover 30%;}


/* tlb9-voices (2026-09-28 자소서 v9): 고민 하나에 수험생 말풍선 여럿. 단체 대화방처럼 좌우로 번갈아 놓고, 스크롤하면 차례로 뜬다 */
.tlb-story.tlb-story .tlb9-voices {max-width: 500px; margin: 48px auto 0;}
.tlb-story.tlb-story .tlb9-voice {padding: 38px 0 40px; border-top: 1px solid color-mix(in srgb, var(--story-accent) 30%, transparent);}
.tlb-story.tlb-story .tlb9-voice:last-child {border-bottom: 1px solid color-mix(in srgb, var(--story-accent) 30%, transparent);}
.tlb-story.tlb-story .tlb9-voice-tit {margin: 0 0 22px; font-family: var(--tlb-font-head); font-weight: 700; font-size: var(--tlb-fs-h4); line-height: var(--tlb-lh-head); color: var(--ink); text-align: center; word-break: keep-all; text-wrap: balance;}
.tlb-story.tlb-story .tlb9-voice-qs {display: flex; flex-direction: column; gap: 10px;}
.tlb-story.tlb-story .tlb9-voice-qs p {align-self: flex-start; max-width: 86%; margin: 0; padding: 12px 16px; font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-compact); color: var(--ink); text-align: left; background: color-mix(in oklab, var(--story-ink) 10%, var(--story-base)); border-radius: 18px 18px 18px 4px; word-break: keep-all;}
.tlb-story.tlb-story .tlb9-voice-qs p:nth-child(even) {align-self: flex-end; background: color-mix(in oklab, var(--story-accent) 24%, var(--story-base)); border-radius: 18px 18px 4px 18px;}
.tlb-story.tlb-story--motion .tlb9-voice-qs p {animation: tlb9-m-pop linear both; animation-timeline: view(); animation-range: entry 0% entry 70%;}
.tlb-story.tlb-story--motion .tlb9-voice-qs p:nth-child(2) {animation-range: entry 15% entry 85%;}
.tlb-story.tlb-story--motion .tlb9-voice-qs p:nth-child(3) {animation-range: entry 30% entry 100%;}
.tlb-story.tlb-story--motion .tlb9-voice-tit {animation: tlb9-m-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%;}

/* 선언과 근거 목록: 구분선이 글보다 넓게 뻗도록 컨테이너 폭과 좌우 안쪽 여백을 둔다 (2026-09-28 대표 재요청) */
.tlb-story.tlb-story .tlb9-kpi {width: min(100%, 600px); max-width: none;}
.tlb-story.tlb-story .tlb9-kpi > div {padding: 24px 32px;}
@media (max-width: 480px) {.tlb-story.tlb-story .tlb9-kpi > div {padding: 22px 12px;}}

/* 고민 말풍선: 대화처럼 양끝에 붙이지 않고 가운데에서 좌우로 조금씩 엇갈리게 놓는다 */
.tlb-story.tlb-story .tlb9-voice-qs {align-items: center;}
.tlb-story.tlb-story .tlb9-voice-qs p, .tlb-story.tlb-story .tlb9-voice-qs p:nth-child(even) {align-self: center; max-width: 84%; text-align: center; border-radius: 16px;}
.tlb-story.tlb-story .tlb9-voice-qs p:nth-child(odd) {margin-right: 44px;}
.tlb-story.tlb-story .tlb9-voice-qs p:nth-child(even) {margin-left: 44px;}
@media (max-width: 480px) {
  .tlb-story.tlb-story .tlb9-voice-qs p:nth-child(odd) {margin-right: 28px;}
  .tlb-story.tlb-story .tlb9-voice-qs p:nth-child(even) {margin-left: 28px;}
}

/* 모션 강화 2단계 (tlb-story--motion): 이동 거리와 크기 변화를 키워 스크롤할 때 확실히 보이게 한다. 글은 화면 아래쪽에서 다 진해진다 */
@keyframes tlb9-m2-rise {from {opacity: 0; transform: translateY(72px) scale(.96);} to {opacity: 1; transform: none;}}
@keyframes tlb9-m2-fade {from {opacity: 0; transform: translateY(34px);} to {opacity: 1; transform: none;}}
@keyframes tlb9-m2-pop {0% {opacity: 0; transform: translateY(36px) scale(.8);} 70% {opacity: 1; transform: translateY(-4px) scale(1.04);} 100% {opacity: 1; transform: none;}}
@keyframes tlb9-m2-deal {from {opacity: 0; transform: translateY(-130px) rotate(calc(var(--tlb9-r, 0deg) * 9)) scale(.8);} to {opacity: 1; transform: rotate(var(--tlb9-r, 0deg)) translateY(var(--tlb9-y, 0px));}}
@keyframes tlb9-m2-left {from {opacity: 0; transform: translateX(-56px);} to {opacity: 1; transform: none;}}
.tlb-story.tlb-story--motion .tlb9--hero .tlb9-big {animation: tlb9-m2-rise 1s .25s cubic-bezier(.2, .7, .2, 1) both;}
.tlb-story.tlb-story--motion .tlb9:not(.tlb9--hero) :is(.tlb9-big, .tlb9-mid, .tlb9-name) {animation-name: tlb9-m2-rise; animation-range: entry 0% entry 60%;}
.tlb-story.tlb-story--motion .tlb9:not(.tlb9--hero) :is(.tlb9-p, .tlb9-small, .tlb9-lead) {animation-name: tlb9-m2-fade; animation-range: entry 0% entry 55%;}
.tlb-story.tlb-story--motion :is(.tlb9-unsaid-notes li, .tlb9-moment, .tlb9-kpi > div, .tlb9-sbars > li, .tlb9-docs figure, .tlb9-voice-tit) {animation-name: tlb9-m2-fade;}
.tlb-story.tlb-story--motion :is(.tlb9-unsaid-box, .tlb9-redpen) {animation-name: tlb9-m2-rise;}
.tlb-story.tlb-story--motion .tlb9-voice-qs p {animation-name: tlb9-m2-pop;}
.tlb-story.tlb-story--motion .tlb9-cards li {animation-name: tlb9-m2-deal;}
.tlb-story.tlb-story--motion .tlb9-branch-list li {animation-name: tlb9-m2-left;}
.tlb-story.tlb-story--motion :is(.tlb9-routine li, .tlb9-checks li, .tlb9-qlist li, .tlb9-faq, .tlb9-bullets li) {animation: tlb9-m2-left linear both; animation-timeline: view(); animation-range: entry 0% entry 70%;}
.tlb-story.tlb-story--motion :is(.tlb9-solve-txt, .tlb9-solve-img, .tlb9-rv, .tlb9-letter, .tlb9-author, .tlb9-qa2-row) {animation: tlb9-m2-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%;}
/* Basic 2028 부품 (2026-09-28 대표 '전체적으로 애니메이션 적절히'): 반박 상자, 개정 칸, 다음 교재 목록, 이어지는 사고, 책 표지와 이름이 화면에 들어오며 떠오른다 */
.tlb-story.tlb-story--motion :is(.tlb9-rebut > li, .tlb9-upd > li, .tlb9-order > li, .tlb9-track-st, .tlb9-spot, .tlb9-bookid) {animation: tlb9-m2-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 55%;}

/* tlb9-myths (2026-09-28 Basic 2028): 수험생이 들어 온 속설을 대리석 무늬를 입힌 둥근 칩으로 늘어놓고, 그 아래 '이 모든 말은 다 틀렸습니다'로 크게 부정한다.
   부정 문구가 화면에 들어오면 칩마다 붉은 선이 차례로 그어지고 칩이 흐려진 뒤 문구가 떠오른다. 스크롤은 스위치(--tlb9-denied)만 켜고 동작은 시간 기준.
   위로 되돌리면 선이 걷히고 칩이 다시 밝아진다. 지원하지 않거나 움직임 줄이기면 처음부터 선이 그어진 상태. 칩 무늬는 목록에 --tlb9-myths-img로 넣는다.
   속설에 대한 답은 뒤 칸 tlb9-rebut에서 하나씩 한다 (대표 9/28 밤 '깨지는 판 대신 둥근 칩, 크게 부정, 반박은 뒤 칸') */
.tlb-story.tlb-story .tlb9-myths {margin: 40px auto 0; timeline-scope: --tlb9myths;}
.tlb-story.tlb-story .tlb9-myths-list {list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 30px;}
/* 교차 배치 (2026-09-29 대표 '지금 배치가 너무 일렬, 살짝 교차배치'): 칩 폭은 같게 두고(9/28 '칩 폭 동일하게') 홀수는 왼쪽, 짝수는 오른쪽으로 비껴 놓는다. 비껴 놓는 폭은 목록 폭의 8% */
.tlb-story.tlb-story .tlb9-myths-list {width: min(100%, 440px); margin: 0 auto; align-items: stretch;}
.tlb-story.tlb-story .tlb9-myths-list > li {position: relative; margin: 0; width: 86%; box-sizing: border-box; padding: 14px 20px 15px; border-radius: 18px; font-family: var(--tlb-font-head); font-weight: 700; font-size: clamp(15px, 4.2vw, 18px); line-height: var(--tlb-lh-head); color: var(--story-ink); text-align: center; word-break: keep-all; text-shadow: 0 1px 0 rgba(0, 0, 0, .5); background: linear-gradient(rgba(0, 0, 0, .16), rgba(0, 0, 0, .34)), var(--tlb9-myths-img, none) 30% 35% / cover no-repeat, color-mix(in oklab, var(--story-accent) 26%, var(--story-base)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); opacity: .7;}
.tlb-story.tlb-story .tlb9-myths-list > li:nth-child(even) {background-position: center, 75% 65%, center;}
.tlb-story.tlb-story .tlb9-myths-list > li:nth-child(odd) {align-self: flex-start;}
.tlb-story.tlb-story .tlb9-myths-list > li:nth-child(even) {align-self: flex-end;}
/* 말풍선 (2026-09-29 대표 '동그란 칩 말고 말풍선 형태로 좌우 꼬리로'): 홀수는 왼쪽 아래, 짝수는 오른쪽 아래로 꼬리가 나와 두 사람이 주고받는 대화처럼 보인다. 꼬리는 칩 전체 평균색(대표색 12%에 글자색 5%를 섞은 색, srgb로 섞어야 초록이 살아난다)으로 채운다. 칩 배경을 물려받으면 무늬가 작게 줄어 어두운 얼룩이 된다.
   취소선은 글자(span.tlb9-myths-t) 뒤 배경 띠로 그어서, 두 줄로 넘어가는 말풍선도 줄마다 그어진다 */
.tlb-story.tlb-story .tlb9-myths-list > li::before {content: ""; position: absolute; bottom: -15px; width: 28px; height: 18px; background: color-mix(in srgb, var(--story-accent) 12%, color-mix(in srgb, var(--story-ink) 5%, var(--story-base))); pointer-events: none;}
.tlb-story.tlb-story .tlb9-myths-list > li:nth-child(odd)::before {left: 26px; clip-path: polygon(0 0, 100% 0, 8% 100%);}
.tlb-story.tlb-story .tlb9-myths-list > li:nth-child(even)::before {right: 26px; clip-path: polygon(0 0, 100% 0, 92% 100%);}
.tlb-story.tlb-story .tlb9-myths-t {background: linear-gradient(var(--story-signal), var(--story-signal)) 0 56% / 100% 3px no-repeat;}
.tlb-story.tlb-story .tlb9-myths-no {margin: 34px 0 0; font-family: var(--tlb-font-head); font-weight: 800; font-size: clamp(30px, 8.6vw, 44px); line-height: var(--tlb-lh-tight); color: var(--ink); text-align: center; word-break: keep-all;}
.tlb-story.tlb-story .tlb9-myths-no > span {color: var(--pt);}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tlb-story.tlb-story .tlb9-myths {animation: tlb9-myths-trig linear both; animation-timeline: --tlb9myths; animation-range: entry 0% entry 100%;}
    @keyframes tlb9-myths-trig {from {--tlb9-denied: 0;} to {--tlb9-denied: 1;}}
    .tlb-story.tlb-story .tlb9-myths-no {view-timeline: --tlb9myths block; animation: tlb9-myths-no-out .3s ease-out both;}
    .tlb-story.tlb-story .tlb9-myths-list > li {animation: tlb9-myths-li-back .4s ease-out both;}
    .tlb-story.tlb-story .tlb9-myths-t {animation: tlb9-myths-strike-back .3s ease-out both;}
    @container style(--tlb9-denied: 1) {
      .tlb-story.tlb-story .tlb9-myths-list > li {animation: tlb9-myths-li-dim .45s ease-out both;}
      .tlb-story.tlb-story .tlb9-myths-t {animation: tlb9-myths-strike .5s cubic-bezier(.3, .7, .4, 1) both;}
      .tlb-story.tlb-story .tlb9-myths-list > li:nth-child(2), .tlb-story.tlb-story .tlb9-myths-list > li:nth-child(2) .tlb9-myths-t {animation-delay: 0.12s;}
      .tlb-story.tlb-story .tlb9-myths-list > li:nth-child(3), .tlb-story.tlb-story .tlb9-myths-list > li:nth-child(3) .tlb9-myths-t {animation-delay: 0.24s;}
      .tlb-story.tlb-story .tlb9-myths-list > li:nth-child(4), .tlb-story.tlb-story .tlb9-myths-list > li:nth-child(4) .tlb9-myths-t {animation-delay: 0.36s;}
      .tlb-story.tlb-story .tlb9-myths-list > li:nth-child(5), .tlb-story.tlb-story .tlb9-myths-list > li:nth-child(5) .tlb9-myths-t {animation-delay: 0.48s;}
      .tlb-story.tlb-story .tlb9-myths-list > li:nth-child(6), .tlb-story.tlb-story .tlb9-myths-list > li:nth-child(6) .tlb9-myths-t {animation-delay: 0.6s;}
      .tlb-story.tlb-story .tlb9-myths-list > li:nth-child(7), .tlb-story.tlb-story .tlb9-myths-list > li:nth-child(7) .tlb9-myths-t {animation-delay: 0.72s;}
      .tlb-story.tlb-story .tlb9-myths-list > li:nth-child(8), .tlb-story.tlb-story .tlb9-myths-list > li:nth-child(8) .tlb9-myths-t {animation-delay: 0.84s;}
      .tlb-story.tlb-story .tlb9-myths-list > li:nth-child(9), .tlb-story.tlb-story .tlb9-myths-list > li:nth-child(9) .tlb9-myths-t {animation-delay: 0.96s;}
      .tlb-story.tlb-story .tlb9-myths-no {animation: tlb9-myths-no-in .55s cubic-bezier(.2, .8, .3, 1.25) calc(.25s + var(--tlb9-myths-n, 6) * .12s) both;}
    }
    @keyframes tlb9-myths-strike {from {background-size: 0% 3px;} to {background-size: 100% 3px;}}
    @keyframes tlb9-myths-strike-back {from {background-size: 100% 3px;} to {background-size: 0% 3px;}}
    @keyframes tlb9-myths-li-dim {from {opacity: 1; filter: none;} to {opacity: .7; filter: grayscale(.45);}}
    @keyframes tlb9-myths-li-back {from {opacity: .7; filter: grayscale(.45);} to {opacity: 1; filter: none;}}
    @keyframes tlb9-myths-no-in {from {opacity: 0; transform: scale(.86);} to {opacity: 1; transform: none;}}
    @keyframes tlb9-myths-no-out {from {opacity: 1;} to {opacity: 0;}}
  }
}
/* tlb9--cue (2026-09-28 Basic 2028 첫 화면, 대표 '여기 텍스트들도 같이 애니메이션'): 아임웹 상세는 구매 영역 아래에서 시작해서, 불러올 때 재생하는 첫 화면 애니메이션은 방문자가 내려오기 전에 끝난다.
   칸(section.tlb9--cue)이 35% 보이면 스위치 --tlb9-cue가 켜져 작은 제목, 헤딩, 강조 띠가 떠오르고, 55% 보이면(첫 문단이 거의 다 보이는 자리) --tlb9-cue-p가 켜져 문단 줄(tlb9-ln)이 한 줄씩 떠오른다.
   문단 줄은 문단마다 시작 시각(--tlb9-cue-at)에서 0.12초 간격. 두 스위치가 한꺼번에 켜져도(빨리 내리거나 칸이 처음부터 보일 때) 헤딩 다음에 문단이 오도록 시작 시각을 0.45초 뒤로 둔다.
   숨김은 스위치가 0일 때만 걸어서, 스타일 쿼리나 스크롤 타임라인을 지원하지 않는 브라우저와 움직임 줄이기에서는 처음부터 보인다.
   스위치는 칸 자체에 단다. 영상 때문에 칸이 overflow: hidden이라 칸 안쪽 요소의 view()는 칸을 스크롤 기준으로 잡아 늘 켜진 상태가 된다 */
.tlb-story.tlb-story .tlb9-ln {display: block;}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tlb-story.tlb-story .tlb9--cue {animation: tlb9-cue-trig linear both, tlb9-cue-trig-p linear both; animation-timeline: view(), view(); animation-range: entry 20% entry 50%, entry 45% entry 65%;}
    @keyframes tlb9-cue-trig {from {--tlb9-cue: 0;} to {--tlb9-cue: 1;}}
    @keyframes tlb9-cue-trig-p {from {--tlb9-cue-p: 0;} to {--tlb9-cue-p: 1;}}
    .tlb-story.tlb-story .tlb9--cue .tlb9-p {--tlb9-cue-at: .45s;}
    .tlb-story.tlb-story .tlb9--cue .tlb9-p ~ .tlb9-p {--tlb9-cue-at: .95s;}
    .tlb-story.tlb-story .tlb9--cue .tlb9-ln:nth-child(2) {--tlb9-k: 1;}
    .tlb-story.tlb-story .tlb9--cue .tlb9-ln:nth-child(3) {--tlb9-k: 2;}
    .tlb-story.tlb-story .tlb9--cue .tlb9-ln:nth-child(4) {--tlb9-k: 3;}
    .tlb-story.tlb-story .tlb9--cue .tlb9-ln:nth-child(5) {--tlb9-k: 4;}
    .tlb-story.tlb-story .tlb9--cue .tlb9-ln:nth-child(6) {--tlb9-k: 5;}
    @container style(--tlb9-cue: 0) {
      .tlb-story.tlb-story .tlb9--hero.tlb9--cue :is(.tlb9-eyebrow, .tlb9-big) {animation: none; opacity: 0;}
      .tlb-story.tlb-story .tlb9--hero.tlb9--cue .tlb9-hl {animation: none; background-size: 0% 100%;}
    }
    @container style(--tlb9-cue: 1) {
      .tlb-story.tlb-story .tlb9--hero.tlb9--cue .tlb9-eyebrow {animation: tlb9-rise .7s cubic-bezier(.2, .7, .2, 1) both;}
      .tlb-story.tlb-story .tlb9--hero.tlb9--cue .tlb9-big {animation: tlb9-m2-rise .95s .15s cubic-bezier(.2, .7, .2, 1) both;}
      .tlb-story.tlb-story .tlb9--hero.tlb9--cue .tlb9-hl {animation: tlb9-hlsweep .8s .8s ease-out both;}
    }
    @container style(--tlb9-cue-p: 0) {
      .tlb-story.tlb-story .tlb9--hero.tlb9--cue .tlb9-ln {animation: none; opacity: 0;}
    }
    @container style(--tlb9-cue-p: 1) {
      .tlb-story.tlb-story .tlb9--hero.tlb9--cue .tlb9-ln {animation: tlb9-m-fade .6s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--tlb9-cue-at, .45s) + var(--tlb9-k, 0) * .12s);}
    }
  }
}
/* tlb9-rebut (2026-09-28 Basic 2028): 앞의 속설을 하나씩 반박하는 상자 목록. 맨 위 '속설' 표시와 취소선 그은 속설, 답 제목, 문장마다 줄을 나눈 해설(핵심 구절 흰색 굵게) */
.tlb-story.tlb-story .tlb9-rebut {list-style: none; width: min(100%, 560px); margin: 44px auto 0; padding: 0; display: grid; gap: 30px; text-align: center;}
.tlb-story.tlb-story .tlb9-rebut > li {position: relative; margin: 0; box-sizing: border-box; padding: 32px 24px 34px; background: radial-gradient(85% 50% at 50% 0%, color-mix(in srgb, var(--story-accent) 17%, transparent), transparent 72%), color-mix(in oklab, var(--story-ink) 4%, var(--story-base)); border: 1px solid color-mix(in srgb, var(--story-accent) 20%, transparent); border-radius: 6px; box-shadow: var(--tlb9-rebut-glow);
  --tlb9-rebut-glow: 0 -16px 44px -24px color-mix(in srgb, var(--story-accent) 80%, transparent);}
.tlb-story.tlb-story .tlb9-rebut > li::before {content: ""; position: absolute; top: -1px; left: 14%; right: 14%; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--story-accent) 45%, #fff) 50%, transparent); box-shadow: 0 0 14px 1px color-mix(in srgb, var(--story-accent) 55%, transparent); pointer-events: none;}
/* 위에서 비추는 빛(대표 9/28 밤 '테두리 뒤로 네온 같은 뒷그라데이션', 시안 셋 중 B 선택. 시안 _temp/pdp-basic-2028/build/glow_options.html): 윗변 가운데 가는 빛줄기(::before, 대표색을 흰색 쪽으로 밝힌 색)와 위로 새는 빛(--tlb9-rebut-glow), 상자 안쪽 위를 은은하게 밝히는 타원. 모션 문서에서는 상자가 떠오른 뒤 위로 새는 빛이 차오른다 */
@keyframes tlb9-rebut-glow {from {box-shadow: 0 0 0 -24px transparent;} to {box-shadow: var(--tlb9-rebut-glow);}}
.tlb-story.tlb-story--motion .tlb9-rebut > li {animation: tlb9-m2-rise linear both, tlb9-rebut-glow linear both; animation-timeline: view(), view(); animation-range: entry 0% entry 55%, entry 45% cover 45%;}
.tlb-story.tlb-story .tlb9-rebut-myth {margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; font-size: clamp(16px, 4.4vw, 18px); line-height: var(--tlb-lh-head); word-break: keep-all;}
.tlb-story.tlb-story .tlb9-rebut-tag {display: inline-block; padding: 2px 8px 3px; border: 1px solid color-mix(in srgb, var(--story-signal) 70%, transparent); border-radius: 3px; font-family: var(--tlb-font-head); font-weight: 700; font-size: var(--tlb-fs-micro); line-height: var(--tlb-lh-title); color: color-mix(in srgb, var(--story-signal) 85%, var(--story-ink));}
.tlb-story.tlb-story .tlb9-rebut-q {color: var(--sub); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--story-signal) 80%, transparent); text-decoration-thickness: 2px;}
.tlb-story.tlb-story .tlb9-rebut-tit {margin: 16px 0 0; font-family: var(--tlb-font-head); font-weight: 700; font-size: var(--tlb-fs-h4); line-height: var(--tlb-lh-title); color: var(--ink); word-break: keep-all;}
.tlb-story.tlb-story .tlb9-rebut-desc {margin: 16px 0 0; font-size: var(--tlb-fs-read); line-height: var(--tlb-lh-text); color: var(--sub); word-break: keep-all; text-wrap: pretty;}
.tlb-story.tlb-story .tlb9-rebut-desc > span {display: block;}
.tlb-story.tlb-story .tlb9-rebut-desc > span + span {margin-top: 10px;}
.tlb-story.tlb-story .tlb9-rebut-desc :is(b, strong) {font-family: var(--tlb-font-body); font-weight: 700; color: var(--ink);}

/* 편집기 대비와 말풍선 여백 (2026-09-28 자소서 v9 반영 전): 아임웹 편집기가 <b>를 <strong>으로 바꾸고 <mark>를 지울 수 있어 짝 선택자와 span 표시(tlb9-mk)를 둔다.
   두 줄로 꺾이는 말풍선은 줄 길이를 고르게 나눠 좌우 여백이 같게 보이게 한다 */
.tlb-story.tlb-story .tlb9-cards strong {display: block; font-family: var(--tlb-font-head); font-weight: 700; font-size: var(--tlb-fs-body); line-height: var(--tlb-lh-compact); word-break: keep-all;}
@media (min-width: 640px) {.tlb-story.tlb-story .tlb9-cards strong {font-size: var(--tlb-fs-read);}}
.tlb-story.tlb-story .tlb9-branch-s .tlb9-mk {padding: 0 1px; color: var(--ink); background: linear-gradient(transparent 58%, color-mix(in srgb, var(--story-accent) 40%, transparent) 58%);}
.tlb-story.tlb-story .tlb9-redpen-s .tlb9-mk {padding: 0; color: inherit; background: none; text-decoration: underline wavy var(--story-signal); text-decoration-thickness: 1.5px; text-underline-offset: 6px; text-decoration-skip-ink: none;}
.tlb-story.tlb-story--motion .tlb9-redpen-s .tlb9-mk {animation: tlb9-m-ink linear both; animation-timeline: view(); animation-range: entry 80% cover 40%;}
.tlb-story.tlb-story .tlb9-voice-qs p {padding: 12px 18px; text-wrap: balance;}

/* 말풍선은 원고에서 뜻대로 줄을 나눠 상자 폭이 글에 맞게 한다. 좁은 폰에서는 엇갈림 폭을 줄여 저절로 꺾이지 않게 한다 */
.tlb-story.tlb-story .tlb9-voice-qs p {max-width: calc(100% - 44px);}
@media (max-width: 480px) {
  .tlb-story.tlb-story .tlb9-voice-qs p {max-width: calc(100% - 14px); padding: 11px 16px; font-size: var(--tlb-fs-meta);}
  .tlb-story.tlb-story .tlb9-voice-qs p:nth-child(odd) {margin-right: 14px;}
  .tlb-story.tlb-story .tlb9-voice-qs p:nth-child(even) {margin-left: 14px;}
}

/* 워크시트 설명은 편집기가 지울 수 있는 figcaption 대신 div(tlb9-docs-cap)로 둔다 */
.tlb-story.tlb-story .tlb9-docs .tlb9-docs-cap {margin-top: 14px;}
.tlb-story.tlb-story .tlb9-docs .tlb9-docs-cap :is(b, strong) {display: block; font-family: var(--tlb-font-head); font-weight: 700; font-size: var(--tlb-fs-body); line-height: var(--tlb-lh-head); color: var(--ink);}
.tlb-story.tlb-story .tlb9-docs .tlb9-docs-cap span {display: block; margin-top: 6px; font-size: var(--tlb-fs-caption); line-height: var(--tlb-lh-compact); color: var(--sub); word-break: keep-all;}

/* tlb-story--glow (2026-09-29 Basic 2028, 대표 '선 들어가 있는 상자에 네온 백그라운드 다 적용'): 반박 상자(tlb9-rebut)의 '위에서 비추는 빛'을 테두리 있는 다른 상자에도 입힌다.
   문서에 tlb-story--glow를 켠 페이지에서만 동작한다(면접, 자소서 상세는 그대로). 대상: 지금 이 책 카드(tlb9-order li.is-now), 안내 상자(tlb9-diag), 책 원문 인용 상자(tlb9-letter--quote).
   윗변 가운데 가는 빛줄기(대표색을 흰색 쪽으로 밝힌 색), 위로 새는 빛(--tlb9-glow), 상자 안쪽 위 타원 밝기. 인용 상자는 ::before를 큰 따옴표가 쓰고 있어 빛줄기를 ::after에 둔다 */
.tlb-story.tlb-story--glow :is(.tlb9-order li.is-now, .tlb9-diag, .tlb9-letter--quote) {position: relative; --tlb9-glow: 0 -16px 44px -24px color-mix(in srgb, var(--story-accent) 80%, transparent);}
.tlb-story.tlb-story--glow .tlb9-order li.is-now {box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--story-accent) 60%, transparent), var(--tlb9-glow); background: radial-gradient(85% 60% at 50% 0%, color-mix(in srgb, var(--story-accent) 14%, transparent), transparent 72%);}
.tlb-story.tlb-story--glow .tlb9-diag {border-color: color-mix(in srgb, var(--story-accent) 20%, transparent); border-radius: 6px; box-shadow: var(--tlb9-glow); background: radial-gradient(85% 50% at 50% 0%, color-mix(in srgb, var(--story-accent) 14%, transparent), transparent 72%), color-mix(in oklab, var(--story-ink) 6%, var(--story-base));}
.tlb-story.tlb-story--glow .tlb9-letter--quote {box-shadow: var(--tlb9-glow); background: radial-gradient(85% 35% at 50% 0%, color-mix(in srgb, var(--story-accent) 12%, transparent), transparent 72%);}
.tlb-story.tlb-story--glow :is(.tlb9-order li.is-now, .tlb9-diag)::before, .tlb-story.tlb-story--glow .tlb9-letter--quote::after {content: ""; position: absolute; top: -1px; left: 14%; right: 14%; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--story-accent) 45%, #fff) 50%, transparent); box-shadow: 0 0 14px 1px color-mix(in srgb, var(--story-accent) 55%, transparent); pointer-events: none;}
.tlb-story.tlb-story--glow .tlb9-order li.is-now::before {top: 0;}

/* tlb-story--midview (2026-09-29 Basic 2028, 대표 '헤딩 강조나 애니메이션이 왜 뒤에 갈수록 안 나와'): 스크롤 연동 애니메이션이 요소가 화면 맨 아래로 들어오는 동안(entry 구간) 끝나서,
   읽는 눈이 있는 화면 가운데에 오면 이미 멈춰 있었다. 앞쪽 칸은 시간 기준 장치(첫 화면, 속설 칩, 말풍선, 반박 상자 빛)가 많아 움직임이 보였고 뒤쪽 칸은 그렇지 않았다.
   이 표시를 켠 문서에서는 구간을 cover로 옮긴다. 헤딩은 화면 아래 90%에서 63% 사이를 지나며 떠오르고, 강조 띠는 헤딩이 화면 65%에서 50%를 지날 때 그어진다.
   문단, 목록, 카드, 상자도 화면 아래 90%에서 55% 사이에서 움직인다. 첫 화면(tlb9--hero), 속설 칩, 말풍선은 그대로 */
.tlb-story.tlb-story--midview .tlb9:not(.tlb9--hero) :is(.tlb9-big, .tlb9-mid, .tlb9-name) {animation-range: cover 10% cover 32%;}
.tlb-story.tlb-story--midview .tlb9:not(.tlb9--hero) .tlb9-hl {animation-range: cover 30% cover 46%;}
.tlb-story.tlb-story--midview .tlb9:not(.tlb9--hero) :is(.tlb9-p, .tlb9-small, .tlb9-lead) {animation-range: cover 8% cover 30%;}
.tlb-story.tlb-story--midview :is(.tlb9-routine li, .tlb9-checks li, .tlb9-qlist li, .tlb9-faq, .tlb9-bullets li, .tlb9-solve-txt, .tlb9-solve-img, .tlb9-rv, .tlb9-letter, .tlb9-author, .tlb9-qa2-row, .tlb9-upd > li, .tlb9-order > li, .tlb9-track-st, .tlb9-spot, .tlb9-bookid) {animation-range: cover 5% cover 28%;}
.tlb-story.tlb-story--midview .tlb9-rebut > li {animation-range: cover 5% cover 28%, cover 22% cover 45%;}

/* 자소서 상세 v10 (2026-09-29, 대표 'Basic 다 끝나가니 자소서도 업데이트'): Basic 2028에서 고친 움직임 시점 두 가지를 자소서 부품에도 적용한다.
   1) tlb-story--midview를 켠 문서에서는 자소서 부품(고민 말풍선, 카드, 말하지 않은 것 상자, 빨간 펜, 선언과 근거, 갈라지는 문항, 학교별 막대, 마감 계획, 워크시트, 목차)도
      화면 아래쪽 95%에서 70% 사이를 지나며 떠오른다. 물결 밑줄, 형광 칠, 취소선, 막대처럼 긋는 효과는 부품이 떠오른 뒤 화면 가운데 부근(72%에서 52%)에서 그어진다.
      헤딩, 문단, 공용 목록은 위쪽 midview 규칙이 맡는다.
   2) 첫 화면에 tlb9--cue를 달면 빈 입력창과 생각 말풍선도 칸이 보일 때 재생한다. 불러올 때 재생하면 구매 영역과 후기 요약을 내려오기 전에 끝난다.
   선택자는 기존 tlb-story--motion 규칙과 같은 세기로 맞춰 뒤에 두는 것으로 이긴다. 체크 도장(tlb9-pen-checkimg)은 Basic 2028도 midview로 쓰고 있어 건드리지 않는다 */
.tlb-story.tlb-story--midview :is(.tlb9-kpi > div, .tlb9-docs figure, .tlb9-unsaid-notes li, .tlb9-sbars > li, .tlb9-branch-list li, .tlb9-voice-tit, .tlb9-unsaid-box, .tlb9-redpen, .tlb9-contents p) {animation-range: cover 5% cover 28%;}
.tlb-story.tlb-story--midview .tlb9-cards li {animation-range: cover 4% cover 30%;}
.tlb-story.tlb-story--midview .tlb9-cards li:nth-child(even) {animation-range: cover 10% cover 36%;}
.tlb-story.tlb-story--midview .tlb9-voice-qs p {animation-range: cover 5% cover 25%;}
.tlb-story.tlb-story--midview .tlb9-voice-qs p:nth-child(2) {animation-range: cover 12% cover 32%;}
.tlb-story.tlb-story--midview .tlb9-voice-qs p:nth-child(3) {animation-range: cover 19% cover 39%;}
.tlb-story.tlb-story--midview .tlb9-branch-list::before {animation-range: cover 5% cover 34%;}
.tlb-story.tlb-story--midview :is(.tlb9-redpen-s--all, .tlb9-redpen-s mark) {animation-range: cover 28% cover 48%;}
.tlb-story.tlb-story--midview .tlb9-redpen-s .tlb9-mk {animation-range: cover 28% cover 48%;}
.tlb-story.tlb-story--midview .tlb9-kpi p.tlb9-kpi-no {animation-range: cover 28% cover 48%;}
.tlb-story.tlb-story--midview :is(.tlb9-redpen-tit, .tlb9-qa2-note) {animation-range: cover 18% cover 40%;}
.tlb-story.tlb-story--midview .tlb9-u {animation-range: cover 24% cover 46%;}
.tlb-story.tlb-story--midview .tlb9-sbars-bar > span {animation-range: cover 14% cover 40%;}
.tlb-story.tlb-story--midview .tlb9-plan-bar span {animation-range: cover 12% cover 40%;}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @container style(--tlb9-cue: 0) {
      .tlb-story.tlb-story .tlb9--hero.tlb9--cue :is(.tlb9-draft, .tlb9-thoughts p) {animation: none; opacity: 0;}
    }
    @container style(--tlb9-cue: 1) {
      .tlb-story.tlb-story .tlb9--hero.tlb9--cue .tlb9-draft {animation: tlb9-m-fade .8s 1s cubic-bezier(.2, .7, .2, 1) both;}
      .tlb-story.tlb-story .tlb9--hero.tlb9--cue .tlb9-thoughts p {animation: tlb9-m-pop .6s cubic-bezier(.2, .8, .2, 1.2) both;}
      .tlb-story.tlb-story .tlb9--hero.tlb9--cue .tlb9-thoughts p:nth-child(1) {animation-delay: 1.5s;}
      .tlb-story.tlb-story .tlb9--hero.tlb9--cue .tlb9-thoughts p:nth-child(2) {animation-delay: 2s;}
      .tlb-story.tlb-story .tlb9--hero.tlb9--cue .tlb9-thoughts p:nth-child(3) {animation-delay: 2.5s;}
    }
  }
}
/* tlb-story--early (2026-09-29 Basic 2028, 대표 '애니메이션이 등장하는 게 여전히 좀 늦은 느낌'): midview는 구간을 cover의 퍼센트로 잡아서, 요소가 클수록 늦게 끝난다.
   라이브 390x844에서 재 보니 요소 윗변이 화면 60~72% 높이까지 올라와야 완전히 나타났다(스크롤을 화면의 3분의 1쯤 한 뒤). 밀려 올라오는 거리도 72px로 커서 글이 아래에 눌려 있는 채로 늦게 떠 보였다.
   이 표시를 켠 문서(Basic 2028 하나)에서는 구간을 스크롤 거리(px)로 잡는다: 요소 윗변이 화면 아래 끝에 닿는 순간 시작해 140~160px 안에 끝나므로 윗변이 화면 80% 높이에 오면 다 나타난다.
   강조 띠는 헤딩이 자리 잡은 뒤(70에서 220px) 그어지고, 밀려 올라오는 거리는 28px(문단은 18px)로 줄인다. 속설 칩 취소선과 첫 화면 문단처럼 시간으로 재생하는 것도 시작을 앞당긴다.
   midview 뒤에 두고 세기를 같게 맞춰 이긴다. 자소서 상세(88)는 이 표시를 켜지 않아 그대로다 */
@keyframes tlb9-ea-rise {from {opacity: 0; transform: translateY(28px);} to {opacity: 1; transform: none;}}
@keyframes tlb9-ea-fade {from {opacity: 0; transform: translateY(18px);} to {opacity: 1; transform: none;}}
@keyframes tlb9-ea-left {from {opacity: 0; transform: translateX(-24px);} to {opacity: 1; transform: none;}}
.tlb-story.tlb-story--early .tlb9:not(.tlb9--hero) :is(.tlb9-big, .tlb9-mid, .tlb9-name) {animation-name: tlb9-ea-rise; animation-range: cover 0px cover 150px;}
.tlb-story.tlb-story--early .tlb9:not(.tlb9--hero) .tlb9-hl {animation-range: cover 70px cover 220px;}
.tlb-story.tlb-story--early .tlb9:not(.tlb9--hero) :is(.tlb9-p, .tlb9-small, .tlb9-lead) {animation-name: tlb9-ea-fade; animation-range: cover 0px cover 140px;}
.tlb-story.tlb-story--early :is(.tlb9-routine li, .tlb9-checks li, .tlb9-qlist li, .tlb9-faq, .tlb9-bullets li) {animation-name: tlb9-ea-left; animation-range: cover 0px cover 140px;}
.tlb-story.tlb-story--early :is(.tlb9-solve-txt, .tlb9-solve-img, .tlb9-rv, .tlb9-letter, .tlb9-author, .tlb9-upd > li, .tlb9-order > li, .tlb9-track-st, .tlb9-spot, .tlb9-bookid) {animation-name: tlb9-ea-rise; animation-range: cover 0px cover 160px;}
.tlb-story.tlb-story--early .tlb9-rebut > li {animation-name: tlb9-ea-rise, tlb9-rebut-glow; animation-range: cover 0px cover 160px, cover 120px cover 300px;}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tlb-story.tlb-story--early .tlb9-myths {animation-range: entry 0% entry 60%;}
    .tlb-story.tlb-story--early .tlb9--cue {animation-range: entry 8% entry 38%, entry 28% entry 50%;}
    .tlb-story.tlb-story--early .tlb9--cue .tlb9-p {--tlb9-cue-at: .25s;}
    .tlb-story.tlb-story--early .tlb9--cue .tlb9-p ~ .tlb9-p {--tlb9-cue-at: .6s;}
    @container style(--tlb9-denied: 1) {
      .tlb-story.tlb-story--early .tlb9-myths-t {animation-duration: .4s;}
      .tlb-story.tlb-story--early .tlb9-myths-list > li:nth-child(2), .tlb-story.tlb-story--early .tlb9-myths-list > li:nth-child(2) .tlb9-myths-t {animation-delay: .08s;}
      .tlb-story.tlb-story--early .tlb9-myths-list > li:nth-child(3), .tlb-story.tlb-story--early .tlb9-myths-list > li:nth-child(3) .tlb9-myths-t {animation-delay: .16s;}
      .tlb-story.tlb-story--early .tlb9-myths-list > li:nth-child(4), .tlb-story.tlb-story--early .tlb9-myths-list > li:nth-child(4) .tlb9-myths-t {animation-delay: .24s;}
      .tlb-story.tlb-story--early .tlb9-myths-list > li:nth-child(5), .tlb-story.tlb-story--early .tlb9-myths-list > li:nth-child(5) .tlb9-myths-t {animation-delay: .32s;}
      .tlb-story.tlb-story--early .tlb9-myths-list > li:nth-child(6), .tlb-story.tlb-story--early .tlb9-myths-list > li:nth-child(6) .tlb9-myths-t {animation-delay: .4s;}
      .tlb-story.tlb-story--early .tlb9-myths-no {animation: tlb9-myths-no-in .45s cubic-bezier(.2, .8, .3, 1.25) calc(.2s + var(--tlb9-myths-n, 6) * .08s) both;}
    }
    @container style(--tlb9-cue: 1) {
      .tlb-story.tlb-story--early .tlb9--hero.tlb9--cue .tlb9-big {animation: tlb9-m2-rise .75s .05s cubic-bezier(.2, .7, .2, 1) both;}
      .tlb-story.tlb-story--early .tlb9--hero.tlb9--cue .tlb9-hl {animation: tlb9-hlsweep .7s .45s ease-out both;}
    }
  }
}

/* tlb-story--seq (2026-09-29 Basic 2028, 대표 '전부 깨부숴 드립니다에 나오는 강조 애니메이션이 밑에선 왜 똑같이 안 나오냐, 본문도, 텍스트 애니메이션도, 밑에도 동일하게'): 첫 화면은 제목이 줄마다 뜨고 강조 띠가 그어지고 본문이 한 줄씩 나오는데,
   아래 칸은 제목 블록이 통째로 떠오르고 본문이 한 덩어리로 흐려질 뿐이라 연출이 달랐다. 이 표시를 켠 문서(Basic 2028 하나)에서는 첫 화면 밖 모든 칸에 같은 연출을 준다.
   제목(tlb9-big), 본문(tlb9-p), 강조 문장(tlb9-mid), 반박 상자 설명(tlb9-rebut-desc)이 각자 화면에 들어오는 순간(아래 끝에서 60px 안쪽) 스위치 --tlb9-seq를 켜고,
   안쪽 줄(tlb9-hln 제목 줄, tlb9-ln 본문 줄, 설명 문장)이 차례로 나온다. 강조 띠(tlb9-hl)는 제목 줄이 뜬 뒤 그어진다. 스크롤은 스위치만 켜고 재생은 시간 기준이다(첫 화면 tlb9--cue와 같은 방식).
   스위치가 0일 때만 줄을 숨겨서 지원하지 않는 브라우저와 움직임 줄이기에서는 처음부터 보인다. 첫 화면(tlb9--hero)은 자기 규칙이 있어 제외. 줄 감싸기는 빌더(linewrap)가 한다 */
.tlb-story.tlb-story .tlb9-hln {display: block;}
@keyframes tlb9-seq-flip {from {--tlb9-seq: 0;} to {--tlb9-seq: 1;}}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tlb-story.tlb-story--seq .tlb9:not(.tlb9--hero) :is(.tlb9-big, .tlb9-p, .tlb9-mid, .tlb9-rebut-desc) {animation: tlb9-seq-flip linear both; animation-timeline: view(); animation-range: cover 30px cover 90px;}
    .tlb-story.tlb-story--seq .tlb9:not(.tlb9--hero) :is(.tlb9-ln, .tlb9-hln, .tlb9-rebut-desc > span):nth-child(2) {--tlb9-k: 1;}
    .tlb-story.tlb-story--seq .tlb9:not(.tlb9--hero) :is(.tlb9-ln, .tlb9-hln, .tlb9-rebut-desc > span):nth-child(3) {--tlb9-k: 2;}
    .tlb-story.tlb-story--seq .tlb9:not(.tlb9--hero) :is(.tlb9-ln, .tlb9-hln, .tlb9-rebut-desc > span):nth-child(4) {--tlb9-k: 3;}
    .tlb-story.tlb-story--seq .tlb9:not(.tlb9--hero) :is(.tlb9-ln, .tlb9-hln, .tlb9-rebut-desc > span):nth-child(5) {--tlb9-k: 4;}
    .tlb-story.tlb-story--seq .tlb9:not(.tlb9--hero) :is(.tlb9-ln, .tlb9-hln, .tlb9-rebut-desc > span):nth-child(6) {--tlb9-k: 5;}
    @container style(--tlb9-seq: 0) {
      .tlb-story.tlb-story--seq .tlb9:not(.tlb9--hero) :is(.tlb9-ln, .tlb9-hln, .tlb9-rebut-desc > span) {animation: none; opacity: 0;}
      .tlb-story.tlb-story--seq .tlb9:not(.tlb9--hero) .tlb9-hl {animation: none; background-size: 0% 100%;}
    }
    @container style(--tlb9-seq: 1) {
      .tlb-story.tlb-story--seq .tlb9:not(.tlb9--hero) .tlb9-hln {animation: tlb9-ea-rise .6s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--tlb9-k, 0) * .09s);}
      .tlb-story.tlb-story--seq .tlb9:not(.tlb9--hero) :is(.tlb9-ln, .tlb9-rebut-desc > span) {animation: tlb9-m-fade .55s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--tlb9-k, 0) * .11s);}
      .tlb-story.tlb-story--seq .tlb9:not(.tlb9--hero) .tlb9-hl {animation: tlb9-hlsweep .7s .35s ease-out both;}
    }
  }
}

/* tlb9-voices 고민 말풍선 정리 (2026-09-29 자소서 v11, 대표 "자소서 어렵다 말풍선 디자인만 고쳐줘, 줄바꿈도 이상하고"): tlb9-voices는 자소서(상품 88)만 쓴다.
   앞의 세 겹 말풍선 규칙(양끝 대화형, 가운데 정렬, 폰 여백)을 이 블록이 한 번에 덮는다.
   1) 줄바꿈: 넓은 화면에서 짧은 말을 두세 줄로 쪼개던 강제 줄바꿈을 없앴다. 원고의 `|` 자리는 좁은 화면에서만 꺾일 수 있는 뜻의 경계이고,
      그 사이 띄어쓰기는 빌더가 붙는 공백(&nbsp;)으로 묶어 뜻 중간에서 꺾이지 않는다. 문장이 바뀌는 `||` 자리만 늘 끊는다. 320px처럼 한 토막도 들어가지 않는 화면은 overflow-wrap으로 넘치지 않게만 한다.
   2) 모양: 모서리가 모두 같던 회색 상자를 말풍선으로. 말하는 쪽 아래 모서리만 뾰족하게 둔다.
   3) 배치: 양끝에 붙이지 않고 가운데 축에서 좌우로 엇갈린다. 엇갈림 폭을 넓혀(넓은 화면 96px, 폰 40px) 교차로 읽히게 한다.
   4) 글자: 상자 안은 왼쪽 정렬, 본문 글꼴 SUIT 16px(폰 15px). 색은 테마 변수에서만 계산한다 */
.tlb-story.tlb-story .tlb9-voice-qs {align-items: center; gap: 12px;}
.tlb-story.tlb-story .tlb9-voice-qs p,
.tlb-story.tlb-story .tlb9-voice-qs p:nth-child(even) {align-self: center; box-sizing: border-box; max-width: calc(100% - 96px); margin: 0; padding: 13px 18px 14px; font-family: var(--tlb-font-body); font-weight: 400; font-size: var(--tlb-fs-body); line-height: var(--tlb-lh-ui); color: var(--ink); text-align: left; word-break: keep-all; overflow-wrap: anywhere; text-wrap: pretty;}
.tlb-story.tlb-story .tlb9-voice-qs p:nth-child(odd) {margin-right: 96px; background: color-mix(in oklab, var(--story-ink) 11%, var(--story-base)); border-radius: 20px 20px 20px 6px;}
.tlb-story.tlb-story .tlb9-voice-qs p:nth-child(even) {margin-left: 96px; background: color-mix(in oklab, var(--story-accent) 28%, var(--story-base)); border-radius: 20px 20px 6px 20px;}
@media (max-width: 480px) {
  .tlb-story.tlb-story .tlb9-voice-qs p,
  .tlb-story.tlb-story .tlb9-voice-qs p:nth-child(even) {max-width: calc(100% - 40px); padding: 11px 15px 12px; font-size: var(--tlb-fs-small);}
  .tlb-story.tlb-story .tlb9-voice-qs p:nth-child(odd) {margin-right: 40px;}
  .tlb-story.tlb-story .tlb9-voice-qs p:nth-child(even) {margin-left: 40px;}
}

/* ---- 교재 핵심 정보 상자 tlb9-brief (2026-10-05, 대표 확정. 콜로소 '클래스 상세 정보' 방식). 상세 맨 위에 단독으로 놓는다.
   <article class="tlb-story tlb-story--교재테마"><div class="tlb9-brief">왼쪽 tlb9-brief-l(제목, 아이콘 목록) / 오른쪽 tlb9-brief-r(샘플, 다른 형식, 패키지) / tlb9-brief-note</div></article>
   오른쪽에 넣을 것이 없으면 tlb9-brief--one. 아이콘은 images/story/brief/*.svg. 꺾쇠는 CSS로 그린다(아임웹 편집기가 빈 태그를 지운다). ---- */
/* 교재 컨셉색 테마(_data/products/catalog.json core_color) */
.tlb-story.tlb-story--principle-sang { --story-accent: #4A86E8; }
.tlb-story.tlb-story--principle-ha { --story-accent: #962DE3; }
.tlb-story.tlb-story--practice { --story-accent: #E85D3A; }
.tlb-story.tlb-story--final { --story-accent: #C62828; }
.tlb-story.tlb-story--background { --story-accent: #2E7D32; }
.tlb-story.tlb-story .tlb9-brief {--br-acc: var(--story-accent); --br-accl: color-mix(in srgb, var(--story-accent) 55%, #fff); background: #000; color: #fff;}
.tlb-story.tlb-story .tlb9-brief-in {display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); gap: 0 48px; max-width: 900px; margin: 0 auto; padding: 44px 40px 36px; text-align: left;}
.tlb-story.tlb-story .tlb9-brief-in::before {content: ""; grid-column: 2; grid-row: 1; background: rgba(255, 255, 255, 0.16);}
.tlb-story.tlb-story .tlb9-brief--one .tlb9-brief-in {grid-template-columns: minmax(0, 1fr);}
.tlb-story.tlb-story .tlb9-brief--one .tlb9-brief-in::before {display: none;}
.tlb-story.tlb-story .tlb9-brief-l {grid-column: 1; grid-row: 1;}
.tlb-story.tlb-story .tlb9-brief-r {grid-column: 3; grid-row: 1; align-self: center; display: flex; flex-direction: column;}
.tlb-story.tlb-story .tlb9-brief-h {margin: 0; font-family: var(--tlb-font-head); font-weight: 500; font-size: var(--tlb-fs-h3); line-height: var(--tlb-lh-title); letter-spacing: var(--tlb-ls-head); color: #E3E7ED;}
.tlb-story.tlb-story .tlb9-brief-h span {font-family: inherit;}
.tlb-story.tlb-story .tlb9-brief-kw {font-weight: 700; color: #fff;}
.tlb-story.tlb-story .tlb9-brief-kind {padding: 0 1px; background: linear-gradient(transparent 74%, color-mix(in srgb, var(--br-acc) 75%, transparent) 74%);}
.tlb-story.tlb-story .tlb9-brief-list {margin: 26px 0 0; padding: 0; list-style: none;}
.tlb-story.tlb-story .tlb9-brief-list li {display: flex; align-items: center; gap: 12px; padding: 6px 0; font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-ui); color: #D3D8DF;}
.tlb-story.tlb-story .tlb9-brief-list li strong {font-weight: 700; color: #fff;}
.tlb-story.tlb-story .tlb9-brief-list img {flex: none; width: 18px; height: 18px; margin: 0; opacity: 0.9;}
.tlb-story.tlb-story .tlb9-brief-row {display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); color: #fff; text-decoration: none; font-family: var(--tlb-font-head); font-weight: 700; font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-head);}
.tlb-story.tlb-story .tlb9-brief-r > .tlb9-brief-row:first-child {padding-top: 2px;}
.tlb-story.tlb-story .tlb9-brief-v {display: inline-flex; align-items: center; color: var(--br-accl); white-space: nowrap; font-family: var(--tlb-font-head);}
.tlb-story.tlb-story .tlb9-brief-v::after, .tlb-story.tlb-story .tlb9-brief-pkg-price::after {content: ""; width: 7px; height: 7px; margin-left: 8px; border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor; transform: rotate(45deg);}
.tlb-story.tlb-story a.tlb9-brief-row:hover .tlb9-brief-v {text-decoration: underline; text-underline-offset: 4px;}
.tlb-story.tlb-story .tlb9-brief-pkg {display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 22px; padding: 22px 24px 20px; border-radius: 6px; background: color-mix(in srgb, var(--br-acc) 22%, #000); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--br-acc) 55%, transparent); color: #fff; text-decoration: none;}
.tlb-story.tlb-story .tlb9-brief-r > .tlb9-brief-pkg:first-child {margin-top: 0;}
.tlb-story.tlb-story .tlb9-brief-pkg-top {display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;}
.tlb-story.tlb-story .tlb9-brief-pkg-h {font-family: var(--tlb-font-head); font-weight: 800; font-size: var(--tlb-fs-h5); line-height: var(--tlb-lh-head);}
.tlb-story.tlb-story .tlb9-brief-pkg-p {font-size: var(--tlb-fs-caption); line-height: var(--tlb-lh-ui); color: #C3C9D2;}
.tlb-story.tlb-story .tlb9-brief-pkg-price {display: flex; align-items: center; gap: 8px; margin-top: 10px; white-space: nowrap;}
.tlb-story.tlb-story .tlb9-brief-pkg-price s {font-size: var(--tlb-fs-caption); color: #8A929C;}
.tlb-story.tlb-story .tlb9-brief-pkg-price strong {font-family: var(--tlb-font-head); font-weight: 800; font-size: var(--tlb-fs-h5); line-height: var(--tlb-lh-none);}
.tlb-story.tlb-story a.tlb9-brief-pkg:hover .tlb9-brief-pkg-h {text-decoration: underline; text-underline-offset: 4px;}
.tlb-story.tlb-story .tlb9-brief a:focus-visible {outline: 2px solid var(--br-accl); outline-offset: 3px;}
.tlb-story.tlb-story .tlb9-brief-note {grid-column: 1 / -1; grid-row: 2; margin: 26px 0 0; font-size: var(--tlb-fs-caption); line-height: var(--tlb-lh-compact); color: #8A929C;}
/* Post-LEET 상자 컨셉색(2026-10-06 대표). 88, 89 상자는 상세 본문 테마(navy, sand)를 따라가 파랑, 밝은 모래색이 됐다.
   상자만 브랜드 정본(BRAND_DESIGN_SSOT.md) 색으로 고친다: 자소서 #746039, 면접 #55473F. 상세 본문 테마는 그대로 둔다. */
.tlb-story.tlb-story--navy .tlb9-brief {--br-acc: #746039; --br-accl: color-mix(in srgb, #746039 45%, #fff);}
.tlb-story.tlb-story--sand .tlb9-brief {--br-acc: #55473F; --br-accl: color-mix(in srgb, #55473F 35%, #fff);}
.tlb-story.tlb-story:is(.tlb-story--navy, .tlb-story--sand) .tlb9-brief-kind {background: linear-gradient(transparent 74%, var(--br-acc) 74%);}
/* 칩: 흰 글씨 SUIT 볼드, 그라데이션 바탕. 글자 세로 중앙은 2026-10-05 확대 캡처 픽셀 측정(2배 9:9, 3배 13:14, 4배 18:18)으로 위쪽 0.25px를 정했다. 공용 부품 후보, tlb-core.css가 다른 세션 미배포 변경을 갖고 있어 우선 여기에 둔다. */
.tlb-story.tlb-story .tlb-chip {box-sizing: border-box; display: inline-flex; align-items: center; height: 20px; padding: 0.25px 7px 0; border-radius: 4px; color: #fff; font-family: var(--tlb-font-body); font-weight: 700; font-size: var(--tlb-fs-micro); line-height: var(--tlb-lh-none); letter-spacing: var(--tlb-ls-none); white-space: nowrap;}
.tlb-story.tlb-story .tlb-chip--off {background: linear-gradient(135deg, #FF5A4E 0%, #E5193B 100%);}
.tlb-story.tlb-story .tlb-chip--theme {background: linear-gradient(135deg, color-mix(in srgb, var(--story-accent) 70%, #fff) 0%, var(--story-accent) 55%, color-mix(in srgb, var(--story-accent) 80%, #000) 100%);}
@media (max-width: 720px) {
  .tlb-story.tlb-story .tlb9-brief-in {grid-template-columns: minmax(0, 1fr); gap: 0; padding: 30px 20px 26px;}
  .tlb-story.tlb-story .tlb9-brief-in::before {grid-column: 1; grid-row: 2; height: 1px; margin: 22px 0 18px;}
  .tlb-story.tlb-story .tlb9-brief-r {grid-column: 1; grid-row: 3;}
  .tlb-story.tlb-story .tlb9-brief-note {grid-row: 4; margin-top: 18px;}
  .tlb-story.tlb-story .tlb9-brief--one .tlb9-brief-note {grid-row: 2;}
  .tlb-story.tlb-story .tlb9-brief-h {font-size: var(--tlb-fs-h2);}
  .tlb-story.tlb-story .tlb9-brief-list {margin-top: 16px;}
  .tlb-story.tlb-story .tlb9-brief-list li {padding: 5px 0;}
  .tlb-story.tlb-story .tlb9-brief-pkg {padding: 20px 20px 18px;}
  .tlb-story.tlb-story .tlb9-brief-pkg-top {flex-direction: column-reverse; align-items: flex-start; gap: 8px;}
}

/* ---- 정렬 회귀 보정 (2026-10-05, 대표 "라이브도 바로 고쳐줘"). tlb-core.css b09ba695가 :where(.tlb-story ...) 뿌리에 text-align-last: left를 상속시켜,
   가운데 정렬 칸(.tlb9)의 줄이 왼쪽에 붙었다(라이브 89 계측: 줄마다 왼쪽 여백 0). 이야기형 칸 안에서는 마지막 줄 정렬을 text-align을 따르게 돌린다. ---- */
.tlb-story.tlb-story .tlb9 {text-align-last: auto;}


/* 트레이닝캠프 코스 상세 (2026-10-08 tc-content-codex) */
.tlb-story.tlb-story--lime{--story-accent:#C2F707}

/* 휴대폰 화면 */
.tlb-story.tlb-tc-wrapper .tlb-tc-day-panel{width:min(100%,300px);margin:44px auto 0;padding:20px 18px 18px;border:1px solid color-mix(in srgb,var(--story-ink) 18%,transparent);border-radius:28px;background:color-mix(in oklab,var(--story-ink) 4%,var(--story-base));text-align:left}
.tlb-story.tlb-tc-wrapper .tlb-tc-day-panel-bar{display:flex;align-items:baseline;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid color-mix(in srgb,var(--story-ink) 14%,transparent)}
.tlb-story.tlb-tc-wrapper .tlb-tc-day-panel-bar span{font-family:var(--tlb-font-head);font-size:var(--tlb-fs-caption);color:var(--sub)}
.tlb-story.tlb-tc-wrapper .tlb-tc-day-panel-bar b{font-family:var(--tlb-font-head);font-size:var(--tlb-fs-h5);font-weight:var(--tlb-fw-bold);color:var(--ink)}
.tlb-story.tlb-tc-wrapper .tlb-tc-day-panel-list{margin:6px 0 0;padding:0;list-style:none}
.tlb-story.tlb-tc-wrapper .tlb-tc-day-panel-list li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:center;margin:0;padding:13px 0;border-bottom:1px solid color-mix(in srgb,var(--story-ink) 10%,transparent)}
.tlb-story.tlb-tc-wrapper .tlb-tc-day-panel-list i{position:relative;display:block;width:20px;height:20px;border:2px solid color-mix(in srgb,var(--story-ink) 34%,transparent);border-radius:50%;animation:tlb-tc-chk 8s infinite}
.tlb-story.tlb-tc-wrapper .tlb-tc-day-panel-list i::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:9px;border:solid var(--story-base);border-width:0 2px 2px 0;transform:rotate(45deg);opacity:0;animation:tlb-tc-ck 8s infinite}
.tlb-story.tlb-tc-wrapper .tlb-tc-day-panel-list li:nth-child(2) i, .tlb-story.tlb-tc-wrapper .tlb-tc-day-panel-list li:nth-child(2) i::after{animation-delay:1.2s}
.tlb-story.tlb-tc-wrapper .tlb-tc-day-panel-list li:nth-child(3) i, .tlb-story.tlb-tc-wrapper .tlb-tc-day-panel-list li:nth-child(3) i::after{animation-delay:2.4s}
.tlb-story.tlb-tc-wrapper .tlb-tc-day-panel-list p{margin:0;font-family:var(--tlb-font-head);font-size:var(--tlb-fs-small);font-weight:var(--tlb-fw-bold);line-height:var(--tlb-lh-ui);color:var(--ink)}
.tlb-story.tlb-tc-wrapper .tlb-tc-day-panel-list small{display:block;margin-top:2px;font-size:var(--tlb-fs-caption);line-height:var(--tlb-lh-ui);color:var(--sub)}
.tlb-story.tlb-tc-wrapper .tlb-tc-day-panel-btn{margin-top:16px;padding:14px 0;border-radius:6px;background:color-mix(in srgb,var(--story-ink) 12%,transparent);font-family:var(--tlb-font-head);font-size:var(--tlb-fs-body);font-weight:var(--tlb-fw-bold);text-align:center;color:var(--sub);animation:tlb-tc-btn 8s infinite}
.tlb-story.tlb-tc-wrapper .tlb-tc-day-panel-note{margin:10px 0 0;font-size:var(--tlb-fs-micro);text-align:center;color:var(--faint)}

/* 6주 달력 */
.tlb-story.tlb-tc-wrapper .tlb-tc-calendar{width:min(100%,420px);margin:44px auto 0;text-align:left}
.tlb-story.tlb-tc-wrapper .tlb-tc-calendar-r{display:grid;grid-template-columns:56px repeat(5,1fr);gap:10px;align-items:center;padding:7px 0}
.tlb-story.tlb-tc-wrapper .tlb-tc-calendar-r b{font-family:var(--tlb-font-head);font-size:var(--tlb-fs-caption);font-weight:var(--tlb-fw-bold);color:var(--sub)}
.tlb-story.tlb-tc-wrapper .tlb-tc-calendar-r i{display:block;aspect-ratio:1;border-radius:50%;background:color-mix(in srgb,var(--story-ink) 14%,transparent);animation:tlb-tc-dot 12s infinite}
.tlb-story.tlb-tc-wrapper .tlb-tc-calendar-r:nth-child(2){--rd:1.2s}
.tlb-story.tlb-tc-wrapper .tlb-tc-calendar-r:nth-child(3){--rd:2.4s}
.tlb-story.tlb-tc-wrapper .tlb-tc-calendar-r:nth-child(4){--rd:3.6s}
.tlb-story.tlb-tc-wrapper .tlb-tc-calendar-r:nth-child(5){--rd:4.8s}
.tlb-story.tlb-tc-wrapper .tlb-tc-calendar-r:nth-child(6){--rd:6s}
.tlb-story.tlb-tc-wrapper .tlb-tc-calendar-r i{animation-delay:var(--rd,0s)}
.tlb-story.tlb-tc-wrapper .tlb-tc-calendar-r i:nth-child(3){animation-delay:calc(var(--rd,0s) + .2s)}
.tlb-story.tlb-tc-wrapper .tlb-tc-calendar-r i:nth-child(4){animation-delay:calc(var(--rd,0s) + .4s)}
.tlb-story.tlb-tc-wrapper .tlb-tc-calendar-r i:nth-child(5){animation-delay:calc(var(--rd,0s) + .6s)}
.tlb-story.tlb-tc-wrapper .tlb-tc-calendar-r i:nth-child(6){animation-delay:calc(var(--rd,0s) + .8s)}
.tlb-story.tlb-tc-wrapper .tlb-tc-calendar-cap{display:flex;justify-content:space-between;margin:14px 0 0 66px;font-size:var(--tlb-fs-caption);color:var(--sub)}

/* 한 주 띠 */
.tlb-story.tlb-tc-wrapper .tlb-tc-week{display:grid;gap:8px;width:min(100%,640px);margin:44px auto 0;padding:0;list-style:none;text-align:left}
.tlb-story.tlb-tc-wrapper .tlb-tc-week--5{grid-template-columns:repeat(5,1fr)}
.tlb-story.tlb-tc-wrapper .tlb-tc-week--6{grid-template-columns:repeat(6,1fr)}
.tlb-story.tlb-tc-wrapper .tlb-tc-week li{margin:0;padding:14px 10px;border:1px solid color-mix(in srgb,var(--story-ink) 16%,transparent);border-radius:6px;font-size:var(--tlb-fs-caption);font-weight:var(--tlb-fw-bold);line-height:var(--tlb-lh-ui);color:var(--ink);animation:tlb-tc-wk 8s infinite}
.tlb-story.tlb-tc-wrapper .tlb-tc-week li b{display:block;margin-bottom:6px;font-family:var(--tlb-font-head);font-size:var(--tlb-fs-h5);font-weight:var(--tlb-fw-bold)}
.tlb-story.tlb-tc-wrapper .tlb-tc-week li:nth-child(2){animation-delay:1.2s}
.tlb-story.tlb-tc-wrapper .tlb-tc-week li:nth-child(3){animation-delay:2.4s}
.tlb-story.tlb-tc-wrapper .tlb-tc-week li:nth-child(4){animation-delay:3.6s}
.tlb-story.tlb-tc-wrapper .tlb-tc-week li:nth-child(5){animation-delay:4.8s}
.tlb-story.tlb-tc-wrapper .tlb-tc-week li:nth-child(6){animation-delay:6s}
.tlb-story.tlb-tc-wrapper .tlb-tc-week-add{width:min(100%,640px);margin:10px auto 0;padding:12px 16px;border-radius:6px;background:color-mix(in srgb,var(--story-accent) 12%,transparent);font-size:var(--tlb-fs-small);font-weight:var(--tlb-fw-bold);text-align:left;color:var(--ink)}

/* 리뷰노트 양식 */
.tlb-story.tlb-tc-wrapper .tlb-tc-review-form{width:min(100%,520px);margin:44px auto 0;padding:22px 20px;border-radius:6px;background:color-mix(in oklab,var(--story-ink) 5%,var(--story-base));border:1px solid color-mix(in srgb,var(--story-ink) 14%,transparent);text-align:left}
.tlb-story.tlb-tc-wrapper .tlb-tc-review-form-t{margin:0 0 14px;font-family:var(--tlb-font-head);font-size:var(--tlb-fs-small);font-weight:var(--tlb-fw-bold);color:var(--story-accent)}
.tlb-story.tlb-tc-wrapper .tlb-tc-review-form-r{display:grid;grid-template-columns:68px minmax(0,1fr);gap:12px;align-items:start;padding:11px 0;border-top:1px solid color-mix(in srgb,var(--story-ink) 10%,transparent)}
.tlb-story.tlb-tc-wrapper .tlb-tc-review-form-r span{font-family:var(--tlb-font-head);font-size:var(--tlb-fs-caption);font-weight:var(--tlb-fw-bold);color:var(--sub)}
.tlb-story.tlb-tc-wrapper .tlb-tc-review-form-r p{margin:0;font-size:var(--tlb-fs-small);line-height:var(--tlb-lh-text);color:var(--ink);animation:tlb-tc-t1 8s steps(20,end) infinite}
.tlb-story.tlb-tc-wrapper .tlb-tc-review-form-r:nth-of-type(2) p{animation-name:tlb-tc-t2}
.tlb-story.tlb-tc-wrapper .tlb-tc-review-form-r:nth-of-type(3) p{animation-name:tlb-tc-t3}
.tlb-story.tlb-tc-wrapper .tlb-tc-review-form-r:last-of-type p{animation-name:tlb-tc-t4;font-weight:var(--tlb-fw-bold);color:var(--story-accent)}
.tlb-story.tlb-tc-wrapper .tlb-tc-review-form-cap{margin:12px 0 0;font-size:var(--tlb-fs-micro);color:var(--faint)}

/* 50분 */
.tlb-story.tlb-tc-wrapper .tlb-tc-set-time{width:min(100%,520px);margin:44px auto 0;text-align:center}
.tlb-story.tlb-tc-wrapper .tlb-tc-set-time-n{margin:0;font-family:var(--tlb-font-head);font-size:var(--tlb-fs-display);font-weight:var(--tlb-fw-bold);line-height:var(--tlb-lh-none);color:var(--story-accent)}
.tlb-story.tlb-tc-wrapper .tlb-tc-set-time-b{display:flex;height:40px;margin-top:22px;border-radius:6px;overflow:hidden;background:color-mix(in srgb,var(--story-ink) 10%,transparent)}
.tlb-story.tlb-tc-wrapper .tlb-tc-set-time-b span{font-family:var(--tlb-font-head);display:flex;align-items:center;justify-content:center;font-size:var(--tlb-fs-caption);font-weight:var(--tlb-fw-bold);color:var(--story-base)}
.tlb-story.tlb-tc-wrapper .tlb-tc-set-time-1{flex:0 0 40%;background:var(--story-accent);animation:tlb-tc-s1 8s infinite}
.tlb-story.tlb-tc-wrapper .tlb-tc-set-time-2{flex:0 0 60%;background:color-mix(in oklab,var(--story-accent) 70%,var(--story-base));animation:tlb-tc-s2 8s infinite}
.tlb-story.tlb-tc-wrapper .tlb-tc-set-time-l{display:flex;margin-top:10px;font-size:var(--tlb-fs-caption);color:var(--sub);text-align:left}
.tlb-story.tlb-tc-wrapper .tlb-tc-set-time-l span:first-child{flex:0 0 40%}

/* 큰 인용 */
.tlb-story.tlb-tc-wrapper .tlb-tc-review-pull{width:min(100%,720px);margin:56px auto 0;padding:28px 0 0;border-top:1px solid color-mix(in srgb,var(--story-accent) 60%,transparent);text-align:left}
.tlb-story.tlb-tc-wrapper .tlb-tc-review-pull blockquote{margin:0;padding:0;font-family:var(--tlb-font-body);font-size:var(--tlb-fs-lead);font-weight:var(--tlb-fw-regular);line-height:var(--tlb-lh-text);letter-spacing:var(--tlb-ls-body);color:var(--ink);border:0}
.tlb-story.tlb-tc-wrapper .tlb-tc-review-pull blockquote b{font-weight:var(--tlb-fw-bold);background:linear-gradient(transparent 62%,color-mix(in srgb,var(--story-accent) 34%,transparent) 0)}
.tlb-story.tlb-tc-wrapper .tlb-tc-review-pull .tlb-tc-review-credit{margin-top:16px;font-size:var(--tlb-fs-meta);color:var(--sub)}
.tlb-story.tlb-tc-wrapper .tlb-tc-review-pull--s blockquote{font-size:var(--tlb-fs-h5)}
.tlb-story.tlb-tc-wrapper .tlb-tc-review-pulls{display:grid;gap:0 40px;grid-template-columns:repeat(2,minmax(0,1fr));width:min(100%,900px);margin:0 auto;text-align:left}
.tlb-story.tlb-tc-wrapper .tlb-tc-review-pulls .tlb-tc-review-pull{width:100%}

/* 대비 */
.tlb-story.tlb-tc-wrapper .tlb-tc-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:min(100%,760px);margin:44px auto 0;text-align:left}
.tlb-story.tlb-tc-wrapper .tlb-tc-comparison>div{padding:26px 24px;border-radius:6px}
.tlb-story.tlb-tc-wrapper .tlb-tc-comparison-a{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--story-ink) 16%,transparent)}
.tlb-story.tlb-tc-wrapper .tlb-tc-comparison-b{background:color-mix(in oklab,var(--story-accent) 16%,var(--story-base));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--story-accent) 70%,transparent)}
.tlb-story.tlb-tc-wrapper .tlb-tc-comparison p{margin:0 0 14px;font-family:var(--tlb-font-head);font-size:var(--tlb-fs-small);font-weight:var(--tlb-fw-bold);color:var(--sub)}
.tlb-story.tlb-tc-wrapper .tlb-tc-comparison-b p{color:var(--story-accent)}
.tlb-story.tlb-tc-wrapper .tlb-tc-comparison ul{margin:0;padding:0;list-style:none}
.tlb-story.tlb-tc-wrapper .tlb-tc-comparison li{margin:0;padding:12px 0;border-top:1px solid color-mix(in srgb,var(--story-ink) 10%,transparent);font-size:var(--tlb-fs-body);line-height:var(--tlb-lh-text);color:var(--faint)}
.tlb-story.tlb-tc-wrapper .tlb-tc-comparison-b li{color:var(--ink)}

/* 후기 출처 줄 */
.tlb-story.tlb-tc-wrapper .tlb9-rv figcaption{margin-top:10px;font-size:var(--tlb-fs-caption);color:var(--sub)}

@keyframes tlb-tc-chk{0%,8%{background:transparent;border-color:color-mix(in srgb,var(--story-ink) 34%,transparent)}12%,90%{background:var(--story-accent);border-color:var(--story-accent)}100%{background:transparent;border-color:color-mix(in srgb,var(--story-ink) 34%,transparent)}}
@keyframes tlb-tc-ck{0%,8%{opacity:0}12%,90%{opacity:1}100%{opacity:0}}
@keyframes tlb-tc-btn{0%,50%{background:color-mix(in srgb,var(--story-ink) 12%,transparent);color:var(--sub)}56%,90%{background:var(--story-accent);color:var(--story-base)}100%{background:color-mix(in srgb,var(--story-ink) 12%,transparent);color:var(--sub)}}
@keyframes tlb-tc-dot{0%,6%{background:color-mix(in srgb,var(--story-ink) 14%,transparent)}10%,88%{background:var(--story-accent)}100%{background:color-mix(in srgb,var(--story-ink) 14%,transparent)}}
@keyframes tlb-tc-wk{0%,14%{background:var(--story-accent);border-color:var(--story-accent);color:var(--story-base)}15%,100%{background:transparent;border-color:color-mix(in srgb,var(--story-ink) 16%,transparent);color:var(--ink)}}
@keyframes tlb-tc-t1{0%{clip-path:inset(0 100% 0 0)}14%,92%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
@keyframes tlb-tc-t2{0%,16%{clip-path:inset(0 100% 0 0)}30%,92%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
@keyframes tlb-tc-t3{0%,32%{clip-path:inset(0 100% 0 0)}46%,92%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
@keyframes tlb-tc-t4{0%,48%{clip-path:inset(0 100% 0 0)}64%,92%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
@keyframes tlb-tc-s1{0%{clip-path:inset(0 100% 0 0)}40%,100%{clip-path:inset(0 0 0 0)}}
@keyframes tlb-tc-s2{0%,40%{clip-path:inset(0 100% 0 0)}90%,100%{clip-path:inset(0 0 0 0)}}

@media (max-width:760px){
.tlb-story.tlb-tc-wrapper .tlb-tc-review-pulls, .tlb-story.tlb-tc-wrapper .tlb-tc-comparison{grid-template-columns:1fr}
.tlb-story.tlb-tc-wrapper .tlb-tc-week--6{grid-template-columns:repeat(3,1fr)}
.tlb-story.tlb-tc-wrapper .tlb-tc-week li{padding:12px 8px}
.tlb-story.tlb-tc-wrapper .tlb-tc-review-pull blockquote{font-size:var(--tlb-fs-h5)}
}
@media (prefers-reduced-motion:reduce){
.tlb-story.tlb-tc-wrapper .tlb-tc-day-panel-list i, .tlb-story.tlb-tc-wrapper .tlb-tc-day-panel-list i::after, .tlb-story.tlb-tc-wrapper .tlb-tc-day-panel-btn, .tlb-story.tlb-tc-wrapper .tlb-tc-calendar-r i, .tlb-story.tlb-tc-wrapper .tlb-tc-week li, .tlb-story.tlb-tc-wrapper .tlb-tc-review-form-r p, .tlb-story.tlb-tc-wrapper .tlb-tc-set-time-b span{animation:none!important}
.tlb-story.tlb-tc-wrapper .tlb-tc-day-panel-list i{background:var(--story-accent);border-color:var(--story-accent)}
.tlb-story.tlb-tc-wrapper .tlb-tc-day-panel-list i::after{opacity:1}
.tlb-story.tlb-tc-wrapper .tlb-tc-day-panel-btn{background:var(--story-accent);color:var(--story-base)}
.tlb-story.tlb-tc-wrapper .tlb-tc-calendar-r i{background:var(--story-accent)}
}

/* 트레이닝캠프 내용 검수 보정: 본문과 구매 전 안내의 대비, 모바일 칸 여백 */
.tlb-story.tlb-tc-wrapper :is(.tlb9-p, .tlb9-points span, .tlb9-line-desc),
.tlb-story.tlb-tc-wrapper .tlb9-moment-qs .tlb9-moment-q {
  color: color-mix(in oklab, var(--story-ink) 85.3%, var(--story-base));
}
.tlb-story.tlb-tc-wrapper .tlb9-small {font-size: var(--tlb-fs-small); color: var(--sub);}
.tlb-story.tlb-tc-wrapper .tlb-tc-day-panel-note {margin-top: 14px; color: var(--sub);}
@media (max-width: 640px) {
  .tlb-story.tlb-tc-wrapper .tlb9:not(.tlb9--hero):not(.tlb9--cine) {padding-block: 80px;}
}

/* 트레이닝 캠프 강조색 (2026-10-08): 원래 반만 걸치는 형태 유지, 채움색만 불투명 연두 */
.tlb-story.tlb-tc-wrapper.tlb-story--tc { --story-accent: #C2F707; }
.tlb-story.tlb-tc-wrapper.tlb-story--tc .tlb9-hl {
  background-image: linear-gradient(transparent 60%, var(--story-accent) 60%);
}

/* 트레이닝캠프 전용 강조 면 (2026-10-08): 면과 글자색을 같은 진행률로 표시, 제목 등장 연출 상속 */
@property --tlb-tc-highlight-progress {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
.tlb-story.tlb-tc-wrapper.tlb-story--tc.tlb-tc-highlight-solid .tlb9-hl {
  background-image:
    linear-gradient(to right, var(--story-base) var(--tlb-tc-highlight-progress), var(--story-ink) var(--tlb-tc-highlight-progress)),
    linear-gradient(var(--story-accent), var(--story-accent));
  background-size: 100% 100%, var(--tlb-tc-highlight-progress) 100%;
  -webkit-background-clip: text, border-box;
  background-clip: text, border-box;
  color: transparent;
}
@keyframes tlb-tc-highlight-sweep {
  from { --tlb-tc-highlight-progress: 0%; }
  to { --tlb-tc-highlight-progress: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  .tlb-story.tlb-tc-wrapper.tlb-story--tc.tlb-tc-highlight-solid .tlb9-hl {
    animation-name: tlb-tc-highlight-sweep;
  }
}

/* Training Camp 판매 흐름 v7 · 2026-10-09 tc-sales-codex
   새 구도는 시안의 tlb-tc-sales 안에 한정한다. 기존 TC 연두와 제목 연출을 상속한다. */
.tlb-story.tlb-tc-sales {max-width: 980px; margin-inline: auto;}
.tlb-story.tlb-tc-sales .tlb-tc-sales-logo {width: min(58%, 310px); margin: 0 auto 28px;}
.tlb-story.tlb-tc-sales .tlb-tc-sales-course {margin-bottom: 28px; color: var(--sub);}
.tlb-story.tlb-tc-sales .tlb9-sched {margin-top: 36px !important;}
.tlb-story.tlb-tc-sales .tlb9-sched-row p {font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-ui);}
.tlb-story.tlb-tc-sales .tlb-tc-sales-actions {display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 18px 28px; margin-top: 32px;}
.tlb-story.tlb-tc-sales .tlb-tc-sales-actions .tlb9-cta {margin: 0; background: var(--story-accent); color: var(--story-base); border-color: var(--story-accent);}
.tlb-story.tlb-tc-sales .tlb-tc-sales-link {font-family: var(--tlb-font-body); font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-ui); color: var(--ink); text-underline-offset: 5px;}
.tlb-story.tlb-tc-sales :is(.tlb-tc-study-path, .tlb-tc-paired-sets) {margin: 44px auto 0; max-width: 720px; text-align: left;}
.tlb-story.tlb-tc-sales .tlb-tc-study-path {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;}
.tlb-story.tlb-tc-sales .tlb-tc-study-path > div {border-top: 2px solid var(--story-accent); padding-top: 22px;}
.tlb-story.tlb-tc-sales .tlb-tc-study-path .tlb9-mid {font-size: var(--tlb-fs-h4);}
.tlb-story.tlb-tc-sales .tlb-tc-study-path p {margin: 16px 0 0; font-size: var(--tlb-fs-body); line-height: var(--tlb-lh-text); color: var(--sub);}
.tlb-story.tlb-tc-sales .tlb-tc-paired-source {margin: 0; padding: 22px 24px; color: var(--story-base); background: var(--story-accent); font-size: var(--tlb-fs-lead); line-height: var(--tlb-lh-text);}
.tlb-story.tlb-tc-sales .tlb-tc-paired-source :is(b, strong) {color: inherit;}
.tlb-story.tlb-tc-sales .tlb-tc-paired-columns {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; padding: 30px 24px; border-bottom: 1px solid var(--line);}
.tlb-story.tlb-tc-sales .tlb-tc-paired-columns .tlb9-mid {font-size: var(--tlb-fs-h4);}
.tlb-story.tlb-tc-sales .tlb-tc-paired-columns p {margin: 14px 0 0; font-size: var(--tlb-fs-body); line-height: var(--tlb-lh-text); color: var(--sub);}
.tlb-story.tlb-tc-sales .tlb-tc-paired-caption {margin: 20px 0 0; font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-text); color: var(--sub);}
.tlb-story.tlb-tc-sales .tlb-tc-offer-spec {max-width: 640px; grid-template-columns: 104px minmax(0, 1fr); gap: 0 16px;}
.tlb-story.tlb-tc-sales .tlb-tc-offer-spec :is(dt, dd) {font-size: var(--tlb-fs-body); line-height: var(--tlb-lh-text); padding-block: 18px;}
.tlb-story.tlb-tc-sales .tlb9-faq p {line-height: var(--tlb-lh-text);}
.tlb-story.tlb-tc-sales .tlb-tc-set-time > .tlb9-small:first-child {margin: 0 0 14px;}
.tlb-story.tlb-tc-sales .tlb9-pages--one img {width: 100%;}
.tlb-story.tlb-tc-sales .tlb-tc-quiz-sample {max-width: 640px; margin: 38px auto 0; text-align: left;}
.tlb-story.tlb-tc-sales .tlb-tc-material-pair {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 32px;}
.tlb-story.tlb-tc-sales .tlb-tc-material-pair .tlb9-p, .tlb-story.tlb-tc-sales .tlb-tc-quiz-sample .tlb9-p {margin: 0 0 12px; text-align: left;}
.tlb-story.tlb-tc-sales .tlb-tc-material-sample {padding: 24px; background: var(--story-ink); color: var(--story-base); font-family: var(--tlb-font-body); font-size: var(--tlb-fs-body); line-height: var(--tlb-lh-text);}
.tlb-story.tlb-tc-sales .tlb-tc-material-sample :is(p, li) {margin: 0; color: inherit; font-size: var(--tlb-fs-body); line-height: var(--tlb-lh-text);}
.tlb-story.tlb-tc-sales .tlb-tc-material-sample p + p {margin-top: 20px; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--story-base) 20%, transparent);}
.tlb-story.tlb-tc-sales .tlb-tc-material-sample ul {list-style: none; margin: 22px 0 0; padding: 0;}
.tlb-story.tlb-tc-sales .tlb-tc-material-sample li + li {margin-top: 14px;}
.tlb-story.tlb-tc-sales :is(.tlb-tc-quiz-sample, .tlb-tc-material-pair) .tlb-tc-sales-link {display: inline-block; margin-top: 16px;}
@media (max-width: 640px) {
  .tlb-story.tlb-tc-sales .tlb-tc-sales-logo {width: 68%; max-width: 250px;}
  .tlb-story.tlb-tc-sales .tlb-tc-sales-course {margin-bottom: 22px;}
  .tlb-story.tlb-tc-sales .tlb-tc-study-path {grid-template-columns: 1fr; gap: 26px;}
  .tlb-story.tlb-tc-sales .tlb-tc-study-path > div {padding-top: 18px;}
  .tlb-story.tlb-tc-sales .tlb-tc-study-path p {margin-top: 10px;}
  .tlb-story.tlb-tc-sales .tlb-tc-paired-source {padding: 20px;}
  .tlb-story.tlb-tc-sales .tlb-tc-paired-columns {grid-template-columns: 1fr; gap: 28px; padding: 26px 20px;}
  .tlb-story.tlb-tc-sales .tlb-tc-paired-columns > div + div {border-top: 1px solid var(--line); padding-top: 26px;}
  .tlb-story.tlb-tc-sales .tlb-tc-offer-spec {grid-template-columns: 1fr; gap: 0;}
  .tlb-story.tlb-tc-sales .tlb-tc-offer-spec dt {padding-bottom: 6px; color: var(--story-accent);}
  .tlb-story.tlb-tc-sales .tlb-tc-offer-spec dd {padding-top: 0; border-top: 0;}
  .tlb-story.tlb-tc-sales .tlb-tc-week--5 {grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px;}
  .tlb-story.tlb-tc-sales .tlb-tc-week--6 {grid-template-columns: repeat(2, minmax(0, 1fr));}
  .tlb-story.tlb-tc-sales .tlb-tc-material-pair {grid-template-columns: 1fr; gap: 32px;}
  .tlb-story.tlb-tc-sales .tlb-tc-material-sample {padding: 22px 20px;}
}

/* Training Camp v8 · 2026-10-09 tc-summary-codex
   최상단은 짧은 프로그램 요약 하나. 운영 설명은 하단 펼침 안내로 분리한다. */
.tlb-story.tlb-tc-brief .tlb-tc-summary-first {padding: 48px 22px 64px;}
.tlb-story.tlb-tc-brief .tlb-tc-program-summary {border: 1px solid var(--story-accent); padding: 32px 36px; text-align: left; background: var(--story-base);}
.tlb-story.tlb-tc-brief .tlb-tc-summary-brand {display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid var(--line);}
.tlb-story.tlb-tc-brief .tlb-tc-summary-brand img {width: 180px;}
.tlb-story.tlb-tc-brief .tlb-tc-summary-brand p {margin: 0; font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-ui); color: var(--sub);}
.tlb-story.tlb-tc-brief .tlb-tc-summary-course {margin-top: 28px; color: var(--story-accent);}
.tlb-story.tlb-tc-brief .tlb-tc-summary-description {margin-top: 16px; font-size: var(--tlb-fs-h4); line-height: var(--tlb-lh-head);}
.tlb-story.tlb-tc-brief .tlb-tc-summary-facts {display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 18px 22px; margin: 28px 0 0; font-size: var(--tlb-fs-body); line-height: var(--tlb-lh-text);}
.tlb-story.tlb-tc-brief .tlb-tc-summary-facts :is(dt, dd) {margin: 0;}
.tlb-story.tlb-tc-brief .tlb-tc-summary-facts dt {color: var(--sub);}
.tlb-story.tlb-tc-brief .tlb-tc-summary-facts dd {color: var(--ink);}
.tlb-story.tlb-tc-brief .tlb-tc-summary-links {display: flex; flex-wrap: wrap; gap: 24px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line);}
.tlb-story.tlb-tc-brief .tlb-tc-summary-links .tlb-tc-sales-link {margin: 0;}
.tlb-story.tlb-tc-brief .tlb-tc-purchase-details {margin-top: 38px;}
.tlb-story.tlb-tc-brief .tlb-tc-detail-list {margin: 0; padding: 8px 0 24px; text-align: left;}
.tlb-story.tlb-tc-brief .tlb-tc-detail-list dt {margin: 20px 0 6px; color: var(--story-accent); font-size: var(--tlb-fs-body); line-height: var(--tlb-lh-text);}
.tlb-story.tlb-tc-brief .tlb-tc-detail-list dd {margin: 0; color: var(--sub); font-size: var(--tlb-fs-body); line-height: var(--tlb-lh-text);}
.tlb-story.tlb-tc-brief .tlb-tc-decision-pair {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; margin-top: 44px; text-align: left;}
.tlb-story.tlb-tc-brief .tlb-tc-decision-pair > div {border-top: 2px solid var(--story-accent); padding-top: 22px;}
.tlb-story.tlb-tc-brief .tlb-tc-decision-pair .tlb9-mid {font-size: var(--tlb-fs-h4);}
.tlb-story.tlb-tc-brief .tlb-tc-decision-pair p {margin: 14px 0 0; color: var(--sub); font-size: var(--tlb-fs-body); line-height: var(--tlb-lh-text);}
@media (max-width: 640px) {
  .tlb-story.tlb-tc-brief .tlb-tc-summary-first {padding: 28px 20px 44px;}
  .tlb-story.tlb-tc-brief .tlb-tc-program-summary {padding: 24px;}
  .tlb-story.tlb-tc-brief .tlb-tc-summary-brand {display: block; padding-bottom: 20px;}
  .tlb-story.tlb-tc-brief .tlb-tc-summary-brand img {width: 150px;}
  .tlb-story.tlb-tc-brief .tlb-tc-summary-brand p {margin-top: 12px;}
  .tlb-story.tlb-tc-brief .tlb-tc-summary-facts {grid-template-columns: 1fr; gap: 8px; margin-top: 24px;}
  .tlb-story.tlb-tc-brief .tlb-tc-summary-facts dt:not(:first-child) {margin-top: 12px;}
  .tlb-story.tlb-tc-brief .tlb-tc-summary-links {gap: 18px;}
  .tlb-story.tlb-tc-brief .tlb-tc-decision-pair {grid-template-columns: 1fr; gap: 28px;}
}

/* Training Camp v9 · 2026-10-09 tc-restore-codex
   기존 히어로/본문은 유지. 히어로 다음 요약 칸에만 적용한다. */
.tlb-story.tlb-tc-wrapper.tlb-tc-sales .tlb9.tlb-tc-summary-section {padding-block: 56px;}
.tlb-story.tlb-tc-sales .tlb-tc-course-summary {padding: 30px 32px; border: 1px solid var(--story-accent); background: var(--alt); text-align: left;}
.tlb-story.tlb-tc-sales .tlb-tc-summary-rows {display: grid; grid-template-columns: 102px minmax(0, 1fr); gap: 18px 24px; margin: 28px 0 0; font-size: var(--tlb-fs-body); line-height: var(--tlb-lh-text);}
.tlb-story.tlb-tc-sales .tlb-tc-summary-rows :is(dt, dd) {margin: 0;}
.tlb-story.tlb-tc-sales .tlb-tc-summary-rows dt {color: var(--sub);}
.tlb-story.tlb-tc-sales .tlb-tc-summary-rows dd {color: var(--ink);}
.tlb-story.tlb-tc-sales .tlb-tc-course-summary > .tlb9-small {padding-top: 20px; border-top: 1px solid var(--line);}
@media (max-width: 640px) {
  .tlb-story.tlb-tc-wrapper.tlb-tc-sales .tlb9.tlb-tc-summary-section {padding-block: 40px;}
  .tlb-story.tlb-tc-sales .tlb-tc-course-summary {padding: 24px;}
  .tlb-story.tlb-tc-sales .tlb-tc-summary-rows {grid-template-columns: 1fr; gap: 6px;}
  .tlb-story.tlb-tc-sales .tlb-tc-summary-rows dt:not(:first-child) {margin-top: 12px;}
}

/* Training Camp v10 · 2026-10-09 tc-benefits-codex
   사용자 요청: 비용 없이 실제 제공 자료와 학습 혜택을 칩으로 요약. 기존 hero/본문 보존. */
.tlb-story.tlb-tc-sales .tlb-tc-provision-summary {padding: 32px; border-top: 3px solid var(--story-accent); background: var(--alt); text-align: left;}
.tlb-story.tlb-tc-sales .tlb-tc-provision-heading {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;}
.tlb-story.tlb-tc-sales .tlb-tc-benefit-group {margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line);}
.tlb-story.tlb-tc-sales .tlb-tc-benefit-group > .tlb9-mid {font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-ui); color: var(--sub);}
.tlb-story.tlb-tc-sales .tlb-tc-benefit-chips {display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 16px 0 0; padding: 0;}
.tlb-story.tlb-tc-sales .tlb-tc-benefit-chip {display: inline-flex; align-items: center; max-width: 100%; margin: 0; padding: 9px 13px; border: 1px solid var(--sub); border-radius: 4px; background: var(--story-base); color: var(--ink); font-family: var(--tlb-font-head); font-size: var(--tlb-fs-small); font-weight: var(--tlb-fw-bold); line-height: var(--tlb-lh-ui); letter-spacing: var(--tlb-ls-head); word-break: keep-all; overflow-wrap: anywhere;}
.tlb-story.tlb-tc-sales .tlb-tc-benefit-chips--primary .tlb-tc-benefit-chip {border-color: var(--story-accent); background: var(--story-accent); color: var(--story-base);}
.tlb-story.tlb-tc-sales .tlb-tc-period-chip {padding: 6px 10px; color: var(--sub);}
.tlb-story.tlb-tc-sales .tlb-tc-benefit-note {margin: 16px 0 0; color: var(--sub); line-height: var(--tlb-lh-text);}
@media (max-width: 640px) {
  .tlb-story.tlb-tc-sales .tlb-tc-provision-summary {padding: 26px 22px;}
  .tlb-story.tlb-tc-sales .tlb-tc-provision-heading {display: block;}
  .tlb-story.tlb-tc-sales .tlb-tc-period-chip {margin-top: 14px;}
  .tlb-story.tlb-tc-sales .tlb-tc-benefit-chips {gap: 8px;}
}

/* Training Camp v11 (2026-10-10 tc-rewrite-claude)
   트레이닝 캠프 코스 상세 v11(Principle, Practice A/B/C, Final A/B). 칸과 장치는 위쪽 story 부품(tlb9-*)을 그대로 쓰고,
   여기에는 원고가 요구한 응용분만 둔다. 모든 선택자는 .tlb-story.tlb-tc-wrapper 안으로 한정해 89, 88, Basic, Principle 상세에 닿지 않는다.
   Codex tlb-tc-* 부품은 쓰지 않는다. 글자 서식은 core 토큰, 색은 테마 변수만 쓴다(그림자 검정 제외). 원본 조각: pdp/_temp/tc-rewrite-20261010/build.py */

/* 옛 TC 랜딩 규칙(tlb-landing.css의 .tlb-tc-wrapper details/summary)이 story FAQ를 카드로 바꾸던 것을 story 모양으로 되돌린다 */
.tlb-story.tlb-tc-wrapper .tlb9-faq {margin: 0; border-radius: 0; background: transparent; overflow: visible;}
.tlb-story.tlb-tc-wrapper .tlb9-faq summary {display: block;}
.tlb-story.tlb-tc-wrapper .tlb9-faq[open] summary {color: var(--ink);}

/* 기수 안내 상자: 제목이 상자 왼쪽 단보다 길어 '본 코스는' 뒤에서 줄을 바꾼다(Practice 원고 메모의 줄바꿈 자리, 세 코스 공통) */
.tlb-story.tlb-tc-wrapper .tlb9-tc-brief-lead {display: block; font-family: inherit;}
/* 링크 줄 이름은 줄(a)이 정한 헤딩 글꼴을 따른다. story의 'span은 SUIT' 일괄 규칙이 이름만 SUIT로 바꾸던 것을 이 상세 안에서 되돌린다 */
.tlb-story.tlb-tc-wrapper .tlb9-brief-row > span {font-family: var(--tlb-font-head);}

/* 체크 목록에 설명 줄을 붙인 항목(Principle 대상 칸) */
.tlb-story.tlb-tc-wrapper .tlb9-tc-check {display: block; font-family: var(--tlb-font-head);}
.tlb-story.tlb-tc-wrapper .tlb9-tc-check .tlb9-checks-t {font-family: var(--tlb-font-head);}
.tlb-story.tlb-tc-wrapper .tlb9-tc-check-d {display: block; margin-top: 6px; font-family: var(--tlb-font-body); font-weight: var(--tlb-fw-regular); font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-text); letter-spacing: var(--tlb-ls-body); color: var(--sub);}

/* 하루 화면(Principle 하루 칸). 화면 예시 모형 */
.tlb-story.tlb-tc-wrapper .tlb9-tc-app {width: min(100%, 320px); margin: 48px auto 0; padding: 20px 18px 18px; border: 1px solid color-mix(in srgb, var(--story-ink) 18%, transparent); border-radius: 28px; background: color-mix(in oklab, var(--story-ink) 4%, var(--story-base)); text-align: left;}
.tlb-story.tlb-tc-wrapper .tlb9-tc-app-bar {display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid color-mix(in srgb, var(--story-ink) 14%, transparent);}
.tlb-story.tlb-tc-wrapper .tlb9-tc-app-bar > span {font-family: var(--tlb-font-head); font-weight: var(--tlb-fw-semibold); font-size: var(--tlb-fs-caption); color: var(--sub);}
.tlb-story.tlb-tc-wrapper .tlb9-tc-app-bar > :is(b, strong) {font-family: var(--tlb-font-head); font-weight: var(--tlb-fw-heavy); font-size: var(--tlb-fs-h5); line-height: var(--tlb-lh-title); color: var(--ink);}
.tlb-story.tlb-tc-wrapper .tlb9-tc-app-list {margin: 6px 0 0; padding: 0; list-style: none;}
.tlb-story.tlb-tc-wrapper .tlb9-tc-app-list li {display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: center; margin: 0; padding: 13px 0; border-bottom: 1px solid color-mix(in srgb, var(--story-ink) 10%, transparent);}
.tlb-story.tlb-tc-wrapper .tlb9-tc-app-chk {position: relative; display: block; width: 20px; height: 20px; border: 2px solid var(--story-accent); border-radius: 50%; background: var(--story-accent); font-size: 0; line-height: 0; color: transparent;}
.tlb-story.tlb-tc-wrapper .tlb9-tc-app-chk::after {content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 9px; border: solid var(--story-base); border-width: 0 2px 2px 0; transform: rotate(45deg);}
.tlb-story.tlb-tc-wrapper .tlb9-tc-app-list p {margin: 0; font-family: var(--tlb-font-head); font-weight: var(--tlb-fw-bold); font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-ui); color: var(--ink);}
.tlb-story.tlb-tc-wrapper .tlb9-tc-app-list small {display: block; margin-top: 2px; font-family: var(--tlb-font-body); font-size: var(--tlb-fs-caption); line-height: var(--tlb-lh-ui); color: var(--sub);}
.tlb-story.tlb-tc-wrapper .tlb9-tc-app-btn {margin-top: 16px; padding: 14px 0; border-radius: 6px; background: var(--story-accent); font-family: var(--tlb-font-head); font-weight: var(--tlb-fw-heavy); font-size: var(--tlb-fs-body); line-height: var(--tlb-lh-ui); text-align: center; color: var(--story-base);}
.tlb-story.tlb-tc-wrapper .tlb9-tc-app-note {margin: 12px 0 0; font-family: var(--tlb-font-body); font-size: var(--tlb-fs-micro); line-height: var(--tlb-lh-ui); text-align: center; color: var(--sub);}

/* 한 주 띠(Practice 5칸, Final 6칸). 폰에서는 요일과 할 일을 한 줄씩 세운다 */
.tlb-story.tlb-tc-wrapper .tlb9-tc-wk {display: grid; gap: 8px; width: min(100%, 660px); margin: 48px auto 0; padding: 0; list-style: none; text-align: left;}
.tlb-story.tlb-tc-wrapper .tlb9-tc-wk--5 {grid-template-columns: repeat(5, minmax(0, 1fr));}
.tlb-story.tlb-tc-wrapper .tlb9-tc-wk--6 {grid-template-columns: repeat(6, minmax(0, 1fr));}
.tlb-story.tlb-tc-wrapper .tlb9-tc-wk > li {margin: 0; padding: 14px 12px 16px; border: 1px solid color-mix(in srgb, var(--story-ink) 16%, transparent); border-radius: 6px; font-family: var(--tlb-font-body); font-weight: var(--tlb-fw-semibold); font-size: var(--tlb-fs-caption); line-height: var(--tlb-lh-ui); color: var(--ink); word-break: keep-all;}
.tlb-story.tlb-tc-wrapper .tlb9-tc-wk > li > :is(b, strong) {display: block; margin-bottom: 8px; font-family: var(--tlb-font-head); font-weight: var(--tlb-fw-heavy); font-size: var(--tlb-fs-h5); line-height: var(--tlb-lh-title); color: var(--pt);}
.tlb-story.tlb-tc-wrapper .tlb9-tc-wk-add {width: min(100%, 660px); margin: 10px auto 0; padding: 13px 16px; border-radius: 6px; background: color-mix(in srgb, var(--story-accent) 12%, transparent); font-family: var(--tlb-font-body); font-weight: var(--tlb-fw-semibold); font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-compact); text-align: left; color: var(--ink); word-break: keep-all;}
@media (max-width: 600px) {
  .tlb-story.tlb-tc-wrapper :is(.tlb9-tc-wk--5, .tlb9-tc-wk--6) {grid-template-columns: minmax(0, 1fr); gap: 6px; width: min(100%, 420px);}
  .tlb-story.tlb-tc-wrapper .tlb9-tc-wk > li {display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 10px; padding: 11px 14px; font-size: var(--tlb-fs-small);}
  .tlb-story.tlb-tc-wrapper .tlb9-tc-wk > li > :is(b, strong) {margin: 0;}
  .tlb-story.tlb-tc-wrapper .tlb9-tc-wk-add {width: min(100%, 420px);}
}

/* 리뷰노트 양식 모형(Principle 4줄, Final 6줄). 마지막 줄은 강조색 */
.tlb-story.tlb-tc-wrapper .tlb9-tc-note {width: min(100%, 560px); margin: 48px auto 0; padding: 22px 22px 18px; border: 1px solid color-mix(in srgb, var(--story-ink) 14%, transparent); border-radius: 8px; background: color-mix(in oklab, var(--story-ink) 5%, var(--story-base)); text-align: left;}
.tlb-story.tlb-tc-wrapper .tlb9-tc-note-t {margin: 0 0 14px; font-family: var(--tlb-font-head); font-weight: var(--tlb-fw-heavy); font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-ui); color: var(--pt);}
.tlb-story.tlb-tc-wrapper .tlb9-tc-note-r {display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: start; padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--story-ink) 10%, transparent);}
.tlb-story.tlb-tc-wrapper .tlb9-tc-note--wide .tlb9-tc-note-r {grid-template-columns: 150px minmax(0, 1fr);}
.tlb-story.tlb-tc-wrapper .tlb9-tc-note-k {font-family: var(--tlb-font-head); font-weight: var(--tlb-fw-bold); font-size: var(--tlb-fs-caption); line-height: var(--tlb-lh-compact); color: var(--sub); word-break: keep-all;}
.tlb-story.tlb-tc-wrapper .tlb9-tc-note-r p {margin: 0; font-family: var(--tlb-font-body); font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-compact); color: var(--ink); word-break: keep-all;}
.tlb-story.tlb-tc-wrapper .tlb9-tc-note-r:last-of-type p {font-weight: var(--tlb-fw-bold); color: var(--pt);}
.tlb-story.tlb-tc-wrapper .tlb9-tc-note-cap {margin: 12px 0 0; font-family: var(--tlb-font-body); font-size: var(--tlb-fs-micro); line-height: var(--tlb-lh-ui); color: var(--sub);}
@media (max-width: 480px) {
  .tlb-story.tlb-tc-wrapper .tlb9-tc-note {padding: 20px 18px 16px;}
  .tlb-story.tlb-tc-wrapper .tlb9-tc-note--wide .tlb9-tc-note-r {grid-template-columns: minmax(0, 1fr); gap: 4px;}
}

/* 50분 세트 막대(Final 첫 화면) */
.tlb-story.tlb-tc-wrapper .tlb9-tc-clock {width: min(100%, 480px); margin: 40px auto 0;}
.tlb-story.tlb-tc-wrapper .tlb9-tc-clock-n {margin: 0; font-family: var(--tlb-font-head); font-weight: var(--tlb-fw-heavy); font-size: var(--tlb-fs-display); line-height: var(--tlb-lh-none); letter-spacing: var(--tlb-ls-head); color: var(--pt); font-variant-numeric: tabular-nums;}
.tlb-story.tlb-tc-wrapper .tlb9-tc-clock-b {display: flex; height: 40px; margin-top: 22px; border-radius: 6px; overflow: clip; background: color-mix(in srgb, var(--story-ink) 10%, transparent);}
.tlb-story.tlb-tc-wrapper .tlb9-tc-clock-b > span {display: flex; align-items: center; justify-content: center; font-family: var(--tlb-font-head); font-weight: var(--tlb-fw-bold); font-size: var(--tlb-fs-caption); line-height: var(--tlb-lh-none); color: var(--story-base); white-space: nowrap;}
.tlb-story.tlb-tc-wrapper .tlb9-tc-clock-1 {flex: 0 0 40%; background: var(--story-accent);}
.tlb-story.tlb-tc-wrapper .tlb9-tc-clock-2 {flex: 0 0 60%; background: color-mix(in oklab, var(--story-accent) 70%, var(--story-base));}
.tlb-story.tlb-tc-wrapper .tlb9-tc-clock-l {display: flex; margin-top: 10px; font-size: var(--tlb-fs-caption); line-height: var(--tlb-lh-ui); text-align: left; color: var(--sub);}
.tlb-story.tlb-tc-wrapper .tlb9-tc-clock-l > span {flex: 0 0 60%;}
.tlb-story.tlb-tc-wrapper .tlb9-tc-clock-l > span:first-child {flex: 0 0 40%;}

/* 큰 인용 하나(후기 원문). 본문 글꼴 */
.tlb-story.tlb-tc-wrapper .tlb9-tc-bq {width: min(100%, 620px); margin: 52px auto 0; padding: 26px 0 0; border-top: 1px solid color-mix(in srgb, var(--story-accent) 60%, transparent); text-align: left;}
.tlb-story.tlb-tc-wrapper .tlb9-tc-bq blockquote {margin: 0; padding: 0; border: 0; font-family: var(--tlb-font-body); font-weight: var(--tlb-fw-medium); font-size: var(--tlb-fs-lead); line-height: var(--tlb-lh-text); letter-spacing: var(--tlb-ls-body); color: var(--ink); word-break: keep-all;}
.tlb-story.tlb-tc-wrapper .tlb9-tc-bq blockquote :is(b, strong) {font-weight: var(--tlb-fw-bold); background: linear-gradient(transparent 62%, color-mix(in srgb, var(--story-accent) 34%, transparent) 0);}
.tlb-story.tlb-tc-wrapper .tlb9-tc-bq + .tlb9-small {margin-top: 26px;}

/* 후기가 다섯 이하면 세 단 중 한 단이 비거나 짧아 왼쪽, 위로 쏠린다(넷: 셋째 단 빔, 다섯: 오른쪽 아래 빔, VISUAL_QA F3). 두 단으로 가운데 둔다 */
@media (min-width: 421px) {
  .tlb-story.tlb-tc-wrapper .tlb9-tc-rvs--two {columns: 2; max-width: 680px;}
}

/* 지면 두 쪽 나란히(tlb9-pages--two, SSOT 5절에 이름만 있던 것). 폰에서는 한 쪽씩 세운다.
   tlb9-tc-pages--stack: 가로로 긴 문항 자른 그림 두 장은 넓은 화면에서도 위아래로 둔다 */
.tlb-story.tlb-tc-wrapper .tlb9-pages--two {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; width: min(100%, 760px); max-width: none; margin: 48px auto 0;}
.tlb-story.tlb-tc-wrapper .tlb9-pages--two > div {min-width: 0;}
.tlb-story.tlb-tc-wrapper .tlb9-pages--two small {margin-top: 12px; font-family: var(--tlb-font-head); font-weight: var(--tlb-fw-bold); font-size: var(--tlb-fs-meta); line-height: var(--tlb-lh-compact); text-align: center; color: var(--ink);}
.tlb-story.tlb-tc-wrapper .tlb9-tc-pages--stack {grid-template-columns: minmax(0, 1fr); width: min(100%, 640px);}
.tlb-story.tlb-tc-wrapper .tlb9-tc-pages--stack img {padding: 14px 16px; background: #fff;}
@media (max-width: 600px) {
  .tlb-story.tlb-tc-wrapper .tlb9-pages--two {grid-template-columns: minmax(0, 1fr); width: min(100%, 420px);}
  .tlb-story.tlb-tc-wrapper .tlb9-tc-pages--stack img {padding: 10px 10px;}
}

/* 지면 한 장(tlb9-docs--one) */
.tlb-story.tlb-tc-wrapper .tlb9-docs--one {grid-template-columns: minmax(0, 1fr); width: min(100%, 600px); max-width: none;}
.tlb-story.tlb-tc-wrapper .tlb9-docs--one img {padding: 16px 18px; background: #fff;}
@media (max-width: 600px) {
  .tlb-story.tlb-tc-wrapper .tlb9-docs--one img {padding: 10px 10px;}
}

/* 받는 자료 목록(tlb9-contents 응용, Practice 해설과 요약본 칸): 항목 이름(헤딩 글꼴 p) 아래 설명 한 줄(본문 글꼴 div). 한 헤딩 안에 두 글꼴을 섞지 않게 형제로 둔다 */
.tlb-story.tlb-tc-wrapper .tlb9-tc-contents {margin-top: 44px; margin-bottom: 0;}
.tlb-story.tlb-tc-wrapper .tlb9-in .tlb9-tc-contents > p {padding-top: 16px; padding-bottom: 4px;}
.tlb-story.tlb-tc-wrapper .tlb9-tc-contents-d {padding: 0 22px 16px; font-family: var(--tlb-font-body); font-weight: var(--tlb-fw-regular); font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-compact); letter-spacing: var(--tlb-ls-body); color: var(--sub); word-break: keep-all; text-wrap: balance;}

/* 유형별로 적을 것(tlb9-solves 응용, Final 보류, 버림, 도전 칸): 지면 그림 없이 글만이라 한 단으로 둔다 */
.tlb-story.tlb-tc-wrapper .tlb9-tc-solves {max-width: 560px; margin-top: 44px;}
.tlb-story.tlb-tc-wrapper .tlb9-tc-solves .tlb9-solve {grid-template-columns: minmax(0, 1fr); padding: 28px 4px;}
.tlb-story.tlb-tc-wrapper .tlb9-tc-solves .tlb9-solve-tit {margin: 0 0 10px; font-size: var(--tlb-fs-h5);}
.tlb-story.tlb-tc-wrapper .tlb9-tc-solves .tlb9-solve-desc {margin: 0; color: var(--sub);}

/* 다른 코스 줄(tlb9-next 응용): 코스 이름, 한 줄 설명, 보기 */
.tlb-story.tlb-tc-wrapper .tlb9-tc-next {display: block; width: min(100%, 560px); margin: 44px auto 0; border-top: 1px dashed color-mix(in srgb, var(--story-ink) 34%, transparent); text-align: left;}
.tlb-story.tlb-tc-wrapper a.tlb9-tc-next-row {display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 18px; align-items: center; padding: 20px 8px; border-bottom: 1px dashed color-mix(in srgb, var(--story-ink) 34%, transparent); color: var(--ink); text-decoration: none;}
.tlb-story.tlb-tc-wrapper .tlb9-tc-next-name {grid-column: 1; font-family: var(--tlb-font-head); font-weight: var(--tlb-fw-heavy); font-size: var(--tlb-fs-h5); line-height: var(--tlb-lh-title); color: var(--ink);}
.tlb-story.tlb-tc-wrapper .tlb9-tc-next-desc {grid-column: 1; font-family: var(--tlb-font-body); font-size: var(--tlb-fs-meta); line-height: var(--tlb-lh-compact); color: var(--sub); word-break: keep-all;}
.tlb-story.tlb-tc-wrapper .tlb9-tc-next-go {grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; font-family: var(--tlb-font-head); font-weight: var(--tlb-fw-bold); font-size: var(--tlb-fs-small); color: var(--pt); white-space: nowrap;}
.tlb-story.tlb-tc-wrapper .tlb9-tc-next-go::after {content: ""; width: 7px; height: 7px; margin-left: 8px; border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor; transform: rotate(45deg);}
.tlb-story.tlb-tc-wrapper a.tlb9-tc-next-row:hover .tlb9-tc-next-go {text-decoration: underline; text-underline-offset: 4px;}

/* 고민 말풍선(tlb9-voices): 고민마다 말풍선이 하나라 칸 단위로 좌우를 번갈아 둔다 */
.tlb-story.tlb-tc-wrapper .tlb9-voice:nth-child(even) .tlb9-voice-qs p {margin-left: 96px; margin-right: 0; background: color-mix(in oklab, var(--story-accent) 28%, var(--story-base)); border-radius: 20px 20px 6px 20px;}
@media (max-width: 480px) {
  .tlb-story.tlb-tc-wrapper .tlb9-voice:nth-child(even) .tlb9-voice-qs p {margin-left: 40px;}
}

/* 줄바꿈 묶음: '리트바이블(The LEET BIBLE)' 뒤 조사가 홀로 다음 줄로 떨어지지 않게 한다 */
.tlb-story.tlb-tc-wrapper .tlb9-tc-nw {white-space: nowrap; font-family: inherit;}

/* 마무리 가격 아래 단위 한 줄 */
.tlb-story.tlb-tc-wrapper .tlb9-tc-buy-unit {margin: 12px 0 0; font-family: var(--tlb-font-body); font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-ui); color: color-mix(in oklab, var(--story-ink) 85%, var(--story-base));}

/* 칸 안 한 줄 일정(Principle 30일 진도): 세 칸이 폰에서 좁아 글자를 한 단 줄인다 */
.tlb-story.tlb-tc-wrapper .tlb9-tc-sched .tlb9-sched-row {gap: 0 12px;}
@media (max-width: 480px) {
  .tlb-story.tlb-tc-wrapper .tlb9-tc-sched .tlb9-sched-row {grid-template-columns: minmax(0, .7fr) minmax(0, 1fr) minmax(0, 1.5fr); gap: 0 8px;}
  .tlb-story.tlb-tc-wrapper .tlb9-tc-sched .tlb9-sched-row p {font-size: var(--tlb-fs-small); line-height: var(--tlb-lh-ui);}
}

/* 움직임(tlb-story--motion, 스크롤 연동): 새 장치도 다른 칸처럼 화면에 들어오며 떠오른다. 하루 화면은 체크가 차례로 찍힌다 */
@keyframes tlb9-tc-chk {from {background: transparent; border-color: color-mix(in srgb, var(--story-ink) 34%, transparent);} to {background: var(--story-accent); border-color: var(--story-accent);}}
@keyframes tlb9-tc-btn {from {background: color-mix(in srgb, var(--story-ink) 12%, transparent); color: var(--sub);} to {background: var(--story-accent); color: var(--story-base);}}
@keyframes tlb9-tc-grow {from {clip-path: inset(0 100% 0 0);} to {clip-path: inset(0 0 0 0);}}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tlb-story.tlb-tc-wrapper.tlb-story--motion :is(.tlb9-tc-wk > li, .tlb9-tc-note-r, a.tlb9-tc-next-row, .tlb9-pages--two > div, .tlb9-tc-bq, .tlb9-tc-wk-add, .tlb9-tc-contents-d, .tlb9-tc-solves .tlb9-solve) {animation: tlb9-ea-rise linear both; animation-timeline: view(); animation-range: cover 0px cover 160px;}
    .tlb-story.tlb-tc-wrapper.tlb-story--motion .tlb9-tc-wk > li:nth-child(2) {animation-range: cover 20px cover 180px;}
    .tlb-story.tlb-tc-wrapper.tlb-story--motion .tlb9-tc-wk > li:nth-child(3) {animation-range: cover 40px cover 200px;}
    .tlb-story.tlb-tc-wrapper.tlb-story--motion .tlb9-tc-wk > li:nth-child(4) {animation-range: cover 60px cover 220px;}
    .tlb-story.tlb-tc-wrapper.tlb-story--motion .tlb9-tc-wk > li:nth-child(5) {animation-range: cover 80px cover 240px;}
    .tlb-story.tlb-tc-wrapper.tlb-story--motion .tlb9-tc-wk > li:nth-child(6) {animation-range: cover 100px cover 260px;}
    .tlb-story.tlb-tc-wrapper.tlb-story--motion .tlb9-tc-app {view-timeline-name: --tlb9tcapp;}
    .tlb-story.tlb-tc-wrapper.tlb-story--motion .tlb9-tc-app-chk {animation: tlb9-tc-chk linear both; animation-timeline: --tlb9tcapp; animation-range: cover 18% cover 26%;}
    .tlb-story.tlb-tc-wrapper.tlb-story--motion .tlb9-tc-app-chk::after {animation: tlb9-fade linear both; animation-timeline: --tlb9tcapp; animation-range: cover 22% cover 26%;}
    .tlb-story.tlb-tc-wrapper.tlb-story--motion .tlb9-tc-app-list li:nth-child(2) .tlb9-tc-app-chk {animation-range: cover 26% cover 34%;}
    .tlb-story.tlb-tc-wrapper.tlb-story--motion .tlb9-tc-app-list li:nth-child(2) .tlb9-tc-app-chk::after {animation-range: cover 30% cover 34%;}
    .tlb-story.tlb-tc-wrapper.tlb-story--motion .tlb9-tc-app-list li:nth-child(3) .tlb9-tc-app-chk {animation-range: cover 34% cover 42%;}
    .tlb-story.tlb-tc-wrapper.tlb-story--motion .tlb9-tc-app-list li:nth-child(3) .tlb9-tc-app-chk::after {animation-range: cover 38% cover 42%;}
    .tlb-story.tlb-tc-wrapper.tlb-story--motion .tlb9-tc-app-btn {animation: tlb9-tc-btn linear both; animation-timeline: --tlb9tcapp; animation-range: cover 42% cover 50%;}
  }
}
/* 화면 검수 수정 (2026-10-10 VISUAL_QA B1, F1, F2)
   B1 50분 막대: 막대가 첫 화면(tlb9--cine, overflow hidden) 안에 있어 스크롤 연동(view())의 기준 상자가 칸 자신이 되고 진행률이 20%에서 멈췄다.
      막대 상자는 overflow: clip으로 두고(위), 움직임은 첫 화면 제목과 같은 cue 스위치(시간 기준)로 재생한다. 스위치가 켜지기 전에는 막대를 비워 둔다.
   F1 긴 목록: story 공통 구간(entry 50% cover 40% 등)은 항목이 화면 아래에서 400px쯤 올라와야 다 나타나, 9행 점수 목록 아래쪽이 읽는 동안 흐렸다.
      TC 상세에서는 항목이 화면에 다 들어오는 순간(entry 100%) 나타남이 끝나게 한다. 체크 펜도 같은 기준. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @container style(--tlb9-cue: 0) {
      .tlb-story.tlb-tc-wrapper.tlb-story--motion .tlb9--cue .tlb9-tc-clock-b > span {clip-path: inset(0 100% 0 0);}
    }
    @container style(--tlb9-cue: 1) {
      .tlb-story.tlb-tc-wrapper.tlb-story--motion .tlb9--cue .tlb9-tc-clock-1 {animation: tlb9-tc-grow .7s 1.1s cubic-bezier(.2, .7, .2, 1) both;}
      .tlb-story.tlb-tc-wrapper.tlb-story--motion .tlb9--cue .tlb9-tc-clock-2 {animation: tlb9-tc-grow .9s 1.7s cubic-bezier(.2, .7, .2, 1) both;}
    }
    .tlb-story.tlb-tc-wrapper.tlb-story--motion :is(.tlb9-points > div, .tlb9-line li, .tlb9-checks li, .tlb9-dx li, .tlb9-dx-col, .tlb9-fall li, .tlb9-faq, .tlb9-contents > p, .tlb9-tc-contents-d, .tlb9-tc-solves .tlb9-solve, .tlb9-tc-note-r, .tlb9-tc-wk > li, .tlb9-tc-wk-add, a.tlb9-tc-next-row, .tlb9-voice-qs p, .tlb9-rv) {animation-range: entry 0% entry 100%;}
    .tlb-story.tlb-tc-wrapper.tlb-story--motion .tlb9-checks :is(.tlb9-pen-checkimg, .tlb9-pen path) {animation-range: entry 0% entry 100%;}
  }
}
/* F2 크게 보기 표시: 면접 상세 지면(tlb9-solve-img)의 '눌러서 크게 보기' 칩을 지면 견본에도 같은 모양으로 단다 */
.tlb-story.tlb-tc-wrapper :is(.tlb9-pages, .tlb9-docs) label {position: relative;}
/* 글자가 그림 끝까지 차는 문항 자른 그림과 퀴즈 지면은 칩이 글자를 덮지 않게 흰 바탕 아래에 칩 자리를 둔다 */
.tlb-story.tlb-tc-wrapper :is(.tlb9-tc-pages--stack, .tlb9-docs--one) img {padding-bottom: 46px;}
.tlb-story.tlb-tc-wrapper :is(.tlb9-pages, .tlb9-docs) label em {position: absolute; right: 10px; bottom: 10px; padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, color-mix(in oklab, var(--story-accent) 24.6%, #000) 80%, transparent); color: var(--story-ink); font-family: var(--tlb-font-body); font-size: var(--tlb-fs-micro); line-height: var(--tlb-lh-ui); font-style: normal; pointer-events: none;}

/* 연두 강조 면(tlb-tc-highlight-solid, 2026-10-08 승인)과 Basic식 줄 연출(seq, cue)을 함께 쓸 때: 스위치가 켜지기 전에도 이름이 같은 sweep 애니메이션(길이 0)이
   이미 끝난 상태라, 스위치가 켜져 길이만 바뀌면 다시 재생되지 않고 면이 처음부터 꽉 차 있었다(2026-10-10 화면 확인). 켜질 때 이름을 바꿔 처음부터 다시 그리게 한다 */
@keyframes tlb9-tc-hl-seq {from {--tlb-tc-highlight-progress: 0%;} to {--tlb-tc-highlight-progress: 100%;}}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @container style(--tlb9-seq: 1) {
      .tlb-story.tlb-tc-wrapper.tlb-tc-highlight-solid.tlb-story--seq .tlb9:not(.tlb9--hero) .tlb9-hl {animation-name: tlb9-tc-hl-seq;}
    }
    @container style(--tlb9-cue: 1) {
      .tlb-story.tlb-tc-wrapper.tlb-tc-highlight-solid.tlb-story--motion .tlb9--hero.tlb9--cue .tlb9-hl {animation-name: tlb9-tc-hl-seq;}
    }
  }
}