.book-experience {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 30px;
  box-shadow: var(--shadow);
  padding: clamp(20px, 4vw, 42px);
}
.book-header { display:flex; justify-content:space-between; align-items:start; gap:20px; }
.book-kicker { font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--green); font-weight:900; }
.book-header h2 { font-size:clamp(28px,4vw,44px); margin:8px 0 22px; }
.page-count { padding:8px 13px; border-radius:99px; background:var(--mint); font-weight:900; color:var(--green-dark); }
.book-experience .book-layout { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:15px; }
.book-experience .page-nav { width:48px; height:48px; border:0; border-radius:50%; background:var(--mint); color:var(--green-dark); font-size:25px; font-weight:900; cursor:pointer; }
.book-experience .page-nav:disabled { opacity:.3; cursor:not-allowed; }
.book-experience .book-page { display:grid; grid-template-columns:minmax(260px,1fr) minmax(270px,.9fr); gap:30px; align-items:center; height:auto; min-height:510px; border:2px solid #e0e7e2; border-radius:24px; padding:22px; background:#fff; overflow:hidden; }
.book-experience .book-page > img { width:100%; height:440px; object-fit:contain; border-radius:18px; background:#eef4ee; }
.reading-copy { text-align:center; }
.sound-label { display:inline-block; padding:7px 12px; border-radius:99px; background:#fff0bd; color:#765800; font-weight:900; }
.word-audio { display:block; width:100%; border:0; background:transparent; color:var(--navy); cursor:pointer; padding:16px 5px; }
.word-audio strong { display:block; font-size:clamp(54px,8vw,92px); line-height:1; }
.word-audio mark { background:none; color:var(--coral); text-decoration:underline; text-decoration-color:var(--sun); text-underline-offset:8px; }
.word-audio small { display:block; margin-top:18px; font-size:15px; color:#647188; }
.book-experience .phrase { font-size:24px; font-weight:900; color:var(--green-dark); margin:8px; }
.book-experience .sentence { font-size:clamp(21px,3vw,30px); line-height:1.35; color:var(--navy); }
.book-experience .guided-line { display:flex; align-items:baseline; justify-content:center; gap:10px; flex-wrap:wrap; }
.book-experience .line-label { display:inline-block; min-width:62px; padding:4px 8px; border-radius:999px; background:#eef8f1; color:var(--green-dark); font-size:11px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.page-status { display:inline-block; padding:10px 14px; border-radius:12px; background:#eef1ef; font-weight:800; }
.page-status.done { background:var(--mint); color:var(--green-dark); }
.book-progress { display:flex; justify-content:center; gap:9px; margin:18px 0 8px; }
.progress-dot { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:#e7ece8; font-weight:900; }
.progress-dot.active { outline:3px solid var(--sun); }
.progress-dot.done { background:var(--green); color:#fff; }
.book-completion { text-align:center; margin:12px 0 0; font-weight:900; color:var(--green-dark); }

@media (max-width:760px) {
  .book-experience { padding:16px; border-radius:20px; }
  .book-header h2 { font-size:28px; }
  .book-experience .book-layout { grid-template-columns:40px minmax(0,1fr) 40px; gap:5px; }
  .book-experience .page-nav { width:40px; height:40px; }
  .book-experience .book-page { grid-template-columns:1fr; gap:12px; padding:10px; min-height:0; }
  .book-experience .book-page > img { height:auto; aspect-ratio:2588/2625; }
  .word-audio strong { font-size:58px; }
  .word-audio small { font-size:13px; }
  .book-experience .phrase, .book-experience .sentence { font-size:20px; }
  .book-progress { gap:5px; }
  .progress-dot { width:29px; height:29px; }
}