/* money(금고지기) 생성 대기 맛보기 화면. 공용 카드(.cli-card…)는 saju-chart.css, 여기서는 금고 색과 장부 영상만. */
.keeper-teaser{--keeper-ink:#f5ead0;--keeper-soft:#c9b78f;--keeper-accent:#f3cf6b;--keeper-line:#5a4718;background:#161208}
.keeper-teaser .cli-card{background:#221a0c;border-color:var(--keeper-line);color:var(--keeper-ink)}
.keeper-teaser .cli-teaser-status,.keeper-teaser .cli-teaser-note,.keeper-teaser .cli-teaser-hint{color:var(--keeper-soft)}
.keeper-teaser .cli-person-head small,.keeper-teaser .cli-traits small,.keeper-teaser .cli-traits div+div small{color:var(--keeper-accent)}
.keeper-teaser .cli-traits div{background:#ffffff08}
.keeper-teaser .cli-el-summary{border-top-color:var(--keeper-line)}
/* 장부를 넘기는 영상 */
.keeper-ledger{background:#0f0b05}
.keeper-ledger-art{position:relative;overflow:hidden;background:#0f0b05}
.keeper-ledger-art video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
/* 모든 페이지 맨 위 금고지기 대사 줄(cli-preview.js .cli-teaser-bar). 첫 페이지에선 장부 영상 바로 아래에 붙는다. */
.keeper-teaser .cli-teaser-bar{margin:0;padding:16px 22px 8px;border:0;border-radius:0;background:transparent;text-align:left}
.keeper-teaser .cli-teaser-bar small{letter-spacing:.14em;color:var(--keeper-accent)}
.keeper-teaser .cli-teaser-bar p{font-size:15px;line-height:1.8;color:var(--keeper-ink)}
.keeper-teaser .cli-teaser-bar .cli-teaser-status{text-align:left}
.keeper-teaser .result-page-dots>span{background:#4a3a14}.keeper-teaser .result-page-dots>.active{background:var(--keeper-accent)}
.keeper-teaser .episode-navigation button{border-color:var(--keeper-line);background:#221a0c;color:var(--keeper-ink)}
.keeper-teaser .episode-navigation .next{background:var(--keeper-accent);border-color:var(--keeper-accent);color:#2a1d04}
.keeper-teaser .episode-navigation .next:disabled{opacity:.55}
/* 카드 4개(돈의 그릇·들어오는 길·인생의 흐름·금고를 지키는 법) */
.keeper-kicker{display:block;margin-bottom:6px;font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--keeper-accent)}
.keeper-card h3{margin:16px 0 8px;font-size:13px;font-weight:700;color:var(--keeper-accent)}
.keeper-teaser .cli-card-note{display:block;margin-top:12px;font-size:12px;line-height:1.6;color:var(--keeper-soft)}
.keeper-year-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.keeper-year-list li{display:grid;grid-template-columns:auto auto;align-items:baseline;column-gap:8px;padding:10px 12px;border-radius:12px;background:#ffffff08;border:1px solid var(--keeper-line)}
.keeper-year-list li strong{font-size:14px;color:var(--keeper-ink)}
.keeper-year-list li small{font-size:11px;font-weight:700;color:var(--keeper-accent)}
.keeper-year-list li.is-down{border-style:dashed;background:transparent}
.keeper-year-list li.is-down small,.keeper-year-list li.is-mid small{color:var(--keeper-soft)}
.keeper-year-list li span{grid-column:1/-1;font-size:13px;line-height:1.6;color:var(--keeper-soft)}
.keeper-month-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.keeper-month-grid div{padding:0 12px 12px;border-radius:12px;background:#ffffff08;border:1px solid var(--keeper-line)}
.keeper-month-grid div+div{border-style:dashed;background:transparent}
.keeper-month-grid h3{margin:12px 0 6px}
.keeper-month-grid p{margin:0;font-size:13px;line-height:1.7;color:var(--keeper-ink)}
@media (max-width:420px){.keeper-month-grid{grid-template-columns:1fr}}
.keeper-rule{margin:14px 0 0;padding:12px 14px;border-radius:12px;border:1px dashed var(--keeper-accent);font-size:15px;line-height:1.5;font-weight:700;color:var(--keeper-accent)}
.keeper-rule small{display:block;margin-bottom:4px;font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--keeper-soft)}

/* 본편 읽기 쉼표(.read-break.is-keeper)의 금고 색은 saju-chart.css에서 정한다. */