:root{
  --sage:#A8C8B8; --dusty:#9DBFC8; --cream:#F5EFE0; --beige:#E8DCC4;
  --honey:#E8B976; --brown:#A87F5C; --ink:#5A4A3A; --ink-soft:#8A7460;
  --paper:#FBF8F0;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:"Hiragino Maru Gothic ProN","BIZ UDPGothic","Yu Gothic UI",system-ui,sans-serif;
  line-height:1.7;
}
a{color:var(--brown)}
.wrap{max-width:820px; margin:0 auto; padding:0 20px}

/* header */
header.site{padding:28px 20px 20px; text-align:center}
header.site .logo{font-size:1.15rem; font-weight:700; color:var(--brown); letter-spacing:.04em}
header.site .logo small{display:block; font-weight:400; color:var(--ink-soft); font-size:.72rem; letter-spacing:.12em; margin-top:2px}

/* hero */
.hero{text-align:center; padding:34px 20px 26px}
.hero h1{font-size:1.7rem; margin:.2em 0 .1em; line-height:1.4}
.hero .sub{color:var(--ink-soft); font-size:.95rem}
.hero .tagline{margin-top:14px; font-size:1rem; color:var(--brown)}

/* cards / episode list */
.eplist{display:grid; gap:16px; padding:10px 0 40px}
.epcard{
  display:block; background:var(--paper); border:1px solid var(--beige);
  border-radius:16px; padding:18px 20px; text-decoration:none; color:inherit;
  transition:transform .15s, box-shadow .15s;
}
.epcard:hover{transform:translateY(-2px); box-shadow:0 6px 18px rgba(90,74,58,.12)}
.epcard .num{font-size:.72rem; color:var(--honey); font-weight:700; letter-spacing:.1em}
.epcard h3{margin:.25em 0 .1em; font-size:1.15rem}
.epcard .en{color:var(--ink-soft); font-size:.85rem}

/* episode page */
.ep-head{text-align:center; padding:20px 20px 6px}
.ep-head h1{font-size:1.5rem; margin:.1em 0}
.ep-head .en{color:var(--ink-soft); font-size:.9rem}

/* YouTube player（動画がある時は上部固定、下のトランスクリプトを見ながら操作） */
.player-holder{ padding:8px 0 6px; background:var(--cream); }
.player-holder.has-video{ position:sticky; top:0; z-index:8; }
.player-holder.has-video #player{
  position:relative; width:100%; aspect-ratio:16/9;
  border-radius:14px; overflow:hidden; background:#000;
  box-shadow:0 4px 16px rgba(90,74,58,.18);
}
.player-holder.has-video #player iframe{width:100%; height:100%}
.player-note{
  display:none;
  text-align:center; font-size:.85rem; color:var(--brown);
  background:var(--paper); border:1px dashed var(--beige);
  border-radius:12px; padding:12px; margin:4px 0;
}
.player-note span{color:var(--ink-soft); font-size:.78rem}

.toolbar{
  background:var(--cream);
  border-bottom:1px solid var(--beige); padding:10px 0; margin-bottom:6px;
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
}
.toolbar button{
  font:inherit; font-size:.82rem; padding:6px 13px; border-radius:20px;
  border:1px solid var(--brown); background:transparent; color:var(--brown);
  cursor:pointer; transition:all .12s;
}
.toolbar button.on{background:var(--brown); color:#fff}
.toolbar .sep{width:1px; background:var(--beige); margin:0 2px}

.hint{text-align:center; font-size:.78rem; color:var(--ink-soft); margin:2px 0 14px}

/* transcript */
.script{padding-bottom:60px}
.cue{
  padding:12px 14px; border-radius:12px; cursor:pointer;
  border:1px solid transparent; transition:background .12s, border-color .12s;
}
.cue:hover{background:var(--paper)}
.cue.playing{background:#fff; border-color:var(--honey); box-shadow:0 2px 12px rgba(232,185,118,.25)}
.cue .spoken{font-size:1.28rem; line-height:2.2}
.cue .spoken ruby rt{font-size:.5em; color:var(--ink-soft); font-weight:400}
.cue .written{font-size:.98rem; color:var(--brown); margin-top:3px}
.cue .written::before{content:"書"; color:var(--honey); font-size:.72em; border:1px solid var(--honey); border-radius:4px; padding:0 3px; margin-right:7px; vertical-align:2px}
.cue .en{font-size:.9rem; color:var(--ink-soft); font-style:italic; margin-top:2px}
.cue .play-dot{float:right; color:var(--sage); font-size:.9rem; opacity:0; transition:opacity .12s}
.cue:hover .play-dot{opacity:1}

/* ホバー辞書：japanese.io式（下線なし・ホバーで緑ハイライト） */
.cue .spoken .word{
  cursor:pointer; border-radius:3px; transition:background .1s;
}
.cue .spoken .word:hover{background:rgba(168,200,184,.45)}
.wordpop .wp-pos{color:var(--ink-soft); font-size:.72rem; font-style:italic; margin-top:2px}
.wordpop .wp-say{
  margin-left:auto; font-size:1rem; border:none; background:var(--cream);
  border-radius:50%; width:32px; height:32px; cursor:pointer; line-height:1;
}
.wordpop .wp-say:hover{background:var(--sage)}

.wordpop{
  display:none; position:absolute; z-index:30; max-width:280px;
  background:#fff; border:1px solid var(--beige); border-radius:12px;
  box-shadow:0 6px 22px rgba(90,74,58,.22); padding:12px 14px;
}
.wordpop .wp-head{display:flex; align-items:baseline; gap:4px; flex-wrap:wrap}
.wordpop .wp-w{font-size:1.35rem; font-weight:700}
.wordpop .wp-r{color:var(--ink-soft); font-size:.82rem}
.wordpop .wp-lv{background:var(--sage); color:#fff; font-size:.66rem; border-radius:4px; padding:1px 6px; margin-left:2px}
.wordpop .wp-g{margin-top:5px; color:var(--ink); font-size:.95rem; line-height:1.5}

/* hide layers */
body.hide-furi rt{display:none}
body.hide-written .written{display:none}
body.hide-en .en{display:none}

/* vocab box */
.vocab{background:var(--paper); border:1px solid var(--beige); border-radius:16px; padding:16px 20px; margin:20px 0}
.vocab h2{font-size:1rem; margin:.1em 0 .5em; color:var(--brown)}
.vocab ul{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.vocab li{font-size:.95rem}
.vocab .w{font-weight:700; font-size:1.1rem}
.vocab .r{color:var(--ink-soft); font-size:.8rem; margin-left:4px}
.vocab .lv{background:var(--sage); color:#fff; font-size:.68rem; border-radius:4px; padding:1px 6px; margin-left:6px}
.vocab .en{color:var(--ink-soft)}

/* loop controls */
.loopbar{
  position:fixed; left:50%; transform:translateX(-50%); bottom:18px;
  background:var(--ink); color:#fff; border-radius:30px; padding:10px 18px;
  display:none; gap:14px; align-items:center; box-shadow:0 6px 22px rgba(0,0,0,.25); z-index:20;
}
.loopbar.show{display:flex}
.loopbar button{background:none; border:none; color:#fff; font:inherit; cursor:pointer; font-size:.9rem}
.loopbar .lp{font-size:1.3rem}
.loopbar .rep.on{color:var(--honey)}
.loopbar .spd{border:1px solid rgba(255,255,255,.4); border-radius:14px; padding:2px 9px; font-size:.8rem}

footer{text-align:center; padding:30px 20px 50px; color:var(--ink-soft); font-size:.78rem}
footer a{color:var(--ink-soft)}

@media(max-width:600px){
  .cue .spoken{font-size:1.1rem; line-height:2}
  .hero h1{font-size:1.35rem}
}
@media print{
  .toolbar,.loopbar,.hint,.play-dot,header.site .logo small{display:none}
  body{background:#fff}
  .cue{break-inside:avoid; page-break-inside:avoid}
}