/* ==================================================================
   TARO-BUILD-20 — 中2단계(첫 화면 아래) 블록 + 유료 배지 보강
   style.css / build18.css 는 다른 세션이 만지므로 이 파일에 둔다.
   index.html 에서 build18.css 다음(마지막)에 링크.
   ================================================================== */

/* ① 리딩 예시 */
.example-box{margin:44px 0 0;padding-top:26px;border-top:1px solid var(--line)}
.example-cards{display:flex;gap:8px;margin:0 0 10px}
.example-card{margin:0;flex:0 0 auto;width:clamp(74px,22vw,104px);aspect-ratio:2/3;
  border-radius:8px;overflow:hidden;border:1px solid rgba(191,147,78,.34);background:#0b0805}
.example-card img{width:100%;height:100%;object-fit:cover;display:block}
.example-q{margin:0 0 8px;font-size:12.5px;color:var(--ink-dim);letter-spacing:.02em}
.example-oneline{margin:0 0 8px;font-family:var(--font-title);font-size:clamp(15px,3.9vw,18px);
  line-height:1.5;color:var(--ink)}
.example-para{margin:0;font-size:13.5px;line-height:1.7;color:var(--ink-dim);text-wrap:pretty}

/* ② 덱 소개 — 가로 넘기기 */
.deck-intro{margin:40px 0 0;padding-top:26px;border-top:1px solid var(--line)}
.deck-strip{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;
  padding:2px 0 10px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 94%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 94%,transparent 100%)}
.deck-strip::-webkit-scrollbar{display:none}
.deck-card{margin:0;flex:0 0 auto;width:clamp(112px,32vw,150px);aspect-ratio:2/3;
  border-radius:9px;overflow:hidden;border:1px solid rgba(191,147,78,.34);background:#0b0805;
  scroll-snap-align:start}
.deck-card img{width:100%;height:100%;object-fit:cover;display:block}
.deck-desc{margin:10px 0 0;font-size:13px;line-height:1.65;color:var(--ink-dim)}

/* 기록 블록은 덱 소개 아래로 내려왔으므로 간격만 맞춘다 */
.history-box{margin-top:40px}

/* RTL: 잘림 힌트를 왼쪽으로 */
body[dir="rtl"] .deck-strip{
  -webkit-mask-image:linear-gradient(270deg,#000 0,#000 94%,transparent 100%);
  mask-image:linear-gradient(270deg,#000 0,#000 94%,transparent 100%);
}

@media (min-width:641px){
  .example-card{width:112px}
  .deck-card{width:168px}
  .example-para{font-size:14px}
}

/* 유료 배지 (스프레드 칩 안) */
#spreads .chip-paid{
  display:inline-block;margin-left:6px;padding:1px 6px;border-radius:999px;
  font-style:normal;font-size:9.5px;letter-spacing:.06em;line-height:1.5;
  color:#1a1712;background:var(--gold-soft);vertical-align:1px;font-weight:600;
}