:root{
  --wb1:#54599F;
  --wb2:#77BD4A;
  --wb3:#19A6F8;
  --wb1-soft:#EDEDF7;
  --wb2-soft:#EEF8E7;
  --wb3-soft:#E7F5FE;
  --accent:#E8483F;
  --ink:#2B2640;
  --sub:#7A7690;
  --cream:#FFFDF8;
  --card:#FFFFFF;
  --line:#ECE9F2;
  --radius:20px;
  --shadow:0 12px 32px -14px rgba(43,38,64,0.28);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--cream);color:var(--ink);font-family:'Zen Maru Gothic','Noto Sans JP',sans-serif;-webkit-font-smoothing:antialiased;}


/* ---------- Header ---------- */
.site-header{background:#fff;border-bottom:1px solid var(--line);padding:14px 24px;}
.header-inner{max-width:1160px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;}
.brand img{height:56px;display:block;}

/* ---------- INDEX VIEW ---------- */
#view-index{max-width:1160px;margin:0 auto;padding:36px 24px 90px;}
.index-hero{padding:6px 8px 30px;}
.index-hero h1{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:30px;margin:0 0 8px;}
.index-hero p.lead{margin:0 0 22px;color:var(--sub);font-size:14.5px;line-height:1.8;max-width:640px;}
.search-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.search-box{flex:1;min-width:220px;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:11px 18px;box-shadow:var(--shadow);}
.search-box input{border:none;background:transparent;outline:none;font-size:14px;width:100%;font-family:inherit;color:var(--ink);}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 16px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;}

.wb-section{margin-top:34px;border-radius:24px;padding:26px 26px 30px;}
.wb-section.wb1{background:var(--wb1-soft);}
.wb-section.wb2{background:var(--wb2-soft);}
.wb-section.wb3{background:var(--wb3-soft);}
.wb-head{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap;}
.wb-badge{font-family:'Baloo 2',sans-serif;font-weight:800;color:#fff;border-radius:12px;padding:8px 16px;font-size:15px;box-shadow:var(--shadow);transform:rotate(-2deg);}
.wb1 .wb-badge{background:var(--wb1);}
.wb2 .wb-badge{background:var(--wb2);}
.wb3 .wb-badge{background:var(--wb3);}
.wb-head h2{font-family:'Baloo 2',sans-serif;font-size:19px;margin:0;}
.wb-head .age{font-size:12px;color:var(--sub);background:#fff;padding:4px 12px;border-radius:999px;border:1px solid var(--line);}
.wb-head .new-tag{font-size:11px;font-weight:800;color:#fff;background:var(--accent);padding:4px 10px;border-radius:999px;letter-spacing:.03em;}

.unit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;}
.unit-card{background:#fff;border-radius:16px;padding:16px;box-shadow:0 6px 18px -12px rgba(43,38,64,.25);text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:10px;transition:transform .15s ease, box-shadow .15s ease;}
.unit-card:hover{transform:translateY(-4px) rotate(-.5deg);box-shadow:var(--shadow);}
.unit-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
/* ---- inverted style: white bg, colored border+text ---- */
.unit-num{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:27px;color:#fff;width:54px;height:54px;border-radius:15px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transform:rotate(-6deg);box-shadow:0 4px 10px -4px rgba(43,38,64,.4);line-height:1;}
.letter-tiles{display:flex;gap:8px;flex-wrap:wrap;}
.tile{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:21px;padding:5px 14px;border-radius:10px;background:#fff;border:2.5px solid;transform:rotate(4deg);line-height:1.2;}
.tile:nth-child(2n){transform:rotate(-5deg);}
.tile:nth-child(3n){transform:rotate(2deg);}
.unit-card h3{font-size:16.5px;margin:0;font-weight:500;line-height:1.6;}
.chant-lines{display:flex;flex-direction:column;gap:6px;}
.chant-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;font-size:14.5px;line-height:1.65;}
.chant-line .chant-icon{font-size:14px;flex-shrink:0;}
.chant-line .chant-letters{font-family:'Baloo 2',sans-serif;font-weight:700;color:var(--ink);flex-shrink:0;}
.chant-line .chant-sentence{color:var(--sub);font-style:italic;}
.unit-meta{display:flex;gap:12px;font-size:11px;color:var(--sub);margin-top:auto;padding-top:8px;border-top:1px dashed var(--line);flex-wrap:wrap;}


/* ---------- UNIT VIEW (shared) ---------- */
.unit-view{max-width:900px;margin:0 auto;padding:36px 24px 100px;}
.mini-trail{display:flex;align-items:center;gap:6px;margin-bottom:20px;}
.mini-trail .seg{flex:1;height:6px;border-radius:4px;background:var(--line);}
.mini-trail .seg.on{}
.mini-trail .lbl{font-size:11px;color:var(--sub);white-space:nowrap;}

.unit-hero{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:28px 30px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;border-top:6px solid;}
.unit-hero-badge{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:32px;color:#fff;width:78px;height:78px;border-radius:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transform:rotate(-4deg);box-shadow:0 6px 16px -6px rgba(43,38,64,.4);}
.unit-hero-info .crumb{font-size:12px;color:var(--sub);margin-bottom:4px;}
.unit-hero-info h1{font-family:'Baloo 2',sans-serif;font-size:24px;margin:0 0 8px;}
.unit-hero-info .letters{display:flex;gap:8px;flex-wrap:wrap;}
.letters .letter-big{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:26px;background:#fff;padding:7px 18px;border-radius:13px;border:2.5px solid;line-height:1.2;}

.section-nav{position:sticky;top:52px;z-index:20;display:flex;gap:8px;background:rgba(255,253,248,.94);backdrop-filter:blur(6px);padding:12px 0;margin-top:20px;border-bottom:1px solid var(--line);flex-wrap:wrap;}
.section-nav a{font-size:13.5px;font-weight:600;color:var(--ink);text-decoration:none;padding:8px 16px;border-radius:999px;background:#fff;border:1px solid var(--line);}

.lesson-section{margin-top:40px;}
.lesson-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.lesson-head .dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.lesson-head h2{font-family:'Baloo 2',sans-serif;font-size:19px;margin:0;}
.lesson-head p{margin:2px 0 0;font-size:13px;color:var(--sub);}
.lesson-note{font-size:12px;color:var(--sub);background:#F7F5FB;border:1px dashed var(--line);border-radius:10px;padding:8px 14px;margin:0 0 18px;}

.media-card{background:#fff;border-radius:16px;border:1px solid var(--line);box-shadow:0 4px 14px -8px rgba(43,38,64,.15);overflow:hidden;}
.media-thumb{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;position:relative;}
.media-thumb .play{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;}
.media-body{padding:14px 16px;}
.media-body .label{font-size:12px;color:var(--sub);margin:0 0 3px;}
.media-body .title{font-size:14.5px;font-weight:500;margin:0;}

.words-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;}
.chants-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;}
.chant-card .letter-tag{position:absolute;top:10px;left:10px;background:rgba(255,255,255,.9);font-family:'Baloo 2',sans-serif;font-weight:800;font-size:12.5px;padding:2px 10px;border-radius:8px;}

.books-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;}
.book-card{background:#fff;border-radius:14px;border:1px solid var(--line);padding:12px;}
.book-cover{aspect-ratio:16/9;border-radius:10px;background:linear-gradient(160deg,var(--wb3),#79cdf4);margin-bottom:10px;display:flex;align-items:center;justify-content:center;font-size:24px;}
.book-card .title{font-size:12.5px;font-weight:500;margin:0 0 8px;line-height:1.5;}
.book-card a{font-size:12px;color:var(--wb1);font-weight:700;text-decoration:none;}

.unit-footer-nav{margin-top:56px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.footer-nav-btn{flex:1;min-width:150px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 18px;text-decoration:none;color:var(--ink);}
.footer-nav-btn .dir{font-size:11px;color:var(--sub);}
.footer-nav-btn .lbl{font-size:14px;font-weight:600;margin-top:2px;}
.footer-nav-btn.next{text-align:right;}

.hidden{display:none;}
@media(max-width:640px){.index-hero{padding:6px 4px 20px;}.unit-hero{padding:22px 20px;}}