/* ============================================================
   じゅんねぇの人生攻略BOOK ｜ 共通デザインシステム
   ============================================================ */

:root {
  --serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "Songti SC", serif;
  --sans: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "YuGothic", "Noto Sans JP", system-ui, sans-serif;
  --latin: "Cormorant Garamond", "Baskerville", "Times New Roman", Georgia, serif;

  /* light — warm blush cream with plum bias */
  --bg:#FBF4F1; --bg-2:#F3E6E3; --surface:#FFFBF9; --surface-2:#FBF1EE;
  --ink:#2C2130; --ink-soft:#6C5A67; --ink-faint:#9A8792;
  --plum:#8B3A72; --plum-deep:#5E2A55; --rose:#D07F9E; --gold:#B8923F; --gold-soft:#D9BC7A;
  --line:rgba(94,42,85,0.14); --line-strong:rgba(94,42,85,0.24);
  --shadow:26px 40px 80px -40px rgba(70,30,64,0.34);
  --shadow-sm:0 14px 30px -18px rgba(70,30,64,0.40);

  /* semantic tints (light) — bg / border / text */
  --t-blue-bg:#EAF1FA;   --t-blue-bd:#B9D0EC;   --t-blue-ink:#2C5A8C;
  --t-green-bg:#E7F3EC;  --t-green-bd:#AFD8C1;  --t-green-ink:#2C6E4F;
  --t-pink-bg:#FCEAF1;   --t-pink-bd:#F2C0D3;   --t-pink-ink:#A83A6E;
  --t-purple-bg:#F2EAF8; --t-purple-bd:#D6BEEC; --t-purple-ink:#6B3FA0;
  --t-orange-bg:#FCEEE1; --t-orange-bd:#F3CFA6; --t-orange-ink:#A9611F;
  --t-red-bg:#FCE9E7;    --t-red-bd:#F2C0B8;    --t-red-ink:#B0402F;
  --t-yellow-bg:#FBF3DC; --t-yellow-bd:#EAD79B; --t-yellow-ink:#8A6A1E;
  --t-brown-bg:#F1E9E2;  --t-brown-bd:#D8C3AE;  --t-brown-ink:#7A5A3C;
  --t-gray-bg:#F3EFF2;   --t-gray-bd:#DAD0D8;   --t-gray-ink:#5A4E58;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:#1C1220; --bg-2:#251830; --surface:#2A1B31; --surface-2:#32213A;
    --ink:#F4E8EF; --ink-soft:#C7ADC1; --ink-faint:#9A809A;
    --plum:#D389B9; --plum-deep:#E7B6D6; --rose:#E8A6C0; --gold:#DBB968; --gold-soft:#E7CF97;
    --line:rgba(240,215,235,0.13); --line-strong:rgba(240,215,235,0.24);
    --shadow:26px 40px 90px -44px rgba(0,0,0,0.7);
    --shadow-sm:0 16px 34px -20px rgba(0,0,0,0.66);

    --t-blue-bg:#1E2A3C;   --t-blue-bd:#375777;   --t-blue-ink:#9EC2EC;
    --t-green-bg:#1B2E27;  --t-green-bd:#356B52;  --t-green-ink:#9AD8B7;
    --t-pink-bg:#331E2A;   --t-pink-bd:#7A3D5C;   --t-pink-ink:#EEA9C6;
    --t-purple-bg:#281B3A; --t-purple-bd:#5B3E86; --t-purple-ink:#C9A6ED;
    --t-orange-bg:#331F12; --t-orange-bd:#7A4E28; --t-orange-ink:#E7B384;
    --t-red-bg:#331A18;    --t-red-bd:#7A3B33;    --t-red-ink:#EDA79C;
    --t-yellow-bg:#2E2712; --t-yellow-bd:#6E5A22; --t-yellow-ink:#E3C878;
    --t-brown-bg:#2A2118;  --t-brown-bd:#5E4A36;  --t-brown-ink:#D6B892;
    --t-gray-bg:#271D2C;   --t-gray-bd:#4A3D49;   --t-gray-ink:#BCA9B8;
  }
}
:root[data-theme="dark"] {
  --bg:#1C1220; --bg-2:#251830; --surface:#2A1B31; --surface-2:#32213A;
  --ink:#F4E8EF; --ink-soft:#C7ADC1; --ink-faint:#9A809A;
  --plum:#D389B9; --plum-deep:#E7B6D6; --rose:#E8A6C0; --gold:#DBB968; --gold-soft:#E7CF97;
  --line:rgba(240,215,235,0.13); --line-strong:rgba(240,215,235,0.24);
  --shadow:26px 40px 90px -44px rgba(0,0,0,0.7); --shadow-sm:0 16px 34px -20px rgba(0,0,0,0.66);
  --t-blue-bg:#1E2A3C; --t-blue-bd:#375777; --t-blue-ink:#9EC2EC;
  --t-green-bg:#1B2E27; --t-green-bd:#356B52; --t-green-ink:#9AD8B7;
  --t-pink-bg:#331E2A; --t-pink-bd:#7A3D5C; --t-pink-ink:#EEA9C6;
  --t-purple-bg:#281B3A; --t-purple-bd:#5B3E86; --t-purple-ink:#C9A6ED;
  --t-orange-bg:#331F12; --t-orange-bd:#7A4E28; --t-orange-ink:#E7B384;
  --t-red-bg:#331A18; --t-red-bd:#7A3B33; --t-red-ink:#EDA79C;
  --t-yellow-bg:#2E2712; --t-yellow-bd:#6E5A22; --t-yellow-ink:#E3C878;
  --t-brown-bg:#2A2118; --t-brown-bd:#5E4A36; --t-brown-ink:#D6B892;
  --t-gray-bg:#271D2C; --t-gray-bd:#4A3D49; --t-gray-ink:#BCA9B8;
}
:root[data-theme="light"] {
  --bg:#FBF4F1; --bg-2:#F3E6E3; --surface:#FFFBF9; --surface-2:#FBF1EE;
  --ink:#2C2130; --ink-soft:#6C5A67; --ink-faint:#9A8792;
  --plum:#8B3A72; --plum-deep:#5E2A55; --rose:#D07F9E; --gold:#B8923F; --gold-soft:#D9BC7A;
  --line:rgba(94,42,85,0.14); --line-strong:rgba(94,42,85,0.24);
  --shadow:26px 40px 80px -40px rgba(70,30,64,0.34); --shadow-sm:0 14px 30px -18px rgba(70,30,64,0.40);
  --t-blue-bg:#EAF1FA; --t-blue-bd:#B9D0EC; --t-blue-ink:#2C5A8C;
  --t-green-bg:#E7F3EC; --t-green-bd:#AFD8C1; --t-green-ink:#2C6E4F;
  --t-pink-bg:#FCEAF1; --t-pink-bd:#F2C0D3; --t-pink-ink:#A83A6E;
  --t-purple-bg:#F2EAF8; --t-purple-bd:#D6BEEC; --t-purple-ink:#6B3FA0;
  --t-orange-bg:#FCEEE1; --t-orange-bd:#F3CFA6; --t-orange-ink:#A9611F;
  --t-red-bg:#FCE9E7; --t-red-bd:#F2C0B8; --t-red-ink:#B0402F;
  --t-yellow-bg:#FBF3DC; --t-yellow-bd:#EAD79B; --t-yellow-ink:#8A6A1E;
  --t-brown-bg:#F1E9E2; --t-brown-bd:#D8C3AE; --t-brown-ink:#7A5A3C;
  --t-gray-bg:#F3EFF2; --t-gray-bd:#DAD0D8; --t-gray-ink:#5A4E58;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.9;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  letter-spacing:0.01em; overflow-x:hidden;
}
.wrap { max-width:1080px; margin:0 auto; padding:0 24px; }
.narrow { max-width:760px; }
a { color:inherit; }
h1,h2,h3,h4 { font-family:var(--serif); font-weight:600; text-wrap:balance; line-height:1.5; margin:0; }
strong { font-weight:700; }

/* inline text colors */
.c-pink{color:var(--t-pink-ink);font-weight:600;}
.c-blue{color:var(--t-blue-ink);font-weight:600;}
.c-green{color:var(--t-green-ink);font-weight:600;}
.c-purple{color:var(--t-purple-ink);font-weight:600;}
.c-red{color:var(--t-red-ink);font-weight:600;}
.c-yellow{color:var(--t-yellow-ink);font-weight:600;}
.hl{background:linear-gradient(transparent 60%, rgba(216,182,122,0.5) 60%);padding:0 2px;}

/* eyebrow / kicker */
.eyebrow{font-family:var(--latin);font-style:italic;font-size:0.95rem;letter-spacing:0.14em;color:var(--plum);margin:0 0 0.6em;}
.kicker{font-size:0.72rem;letter-spacing:0.34em;text-transform:uppercase;color:var(--gold);font-weight:700;}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:999px;text-decoration:none;font-weight:700;font-size:0.98rem;letter-spacing:0.04em;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .25s;}
.btn .arw{transition:transform .25s;}
.btn:hover .arw{transform:translateX(4px);}
.btn-primary{background:linear-gradient(135deg,#E7B7D3 0%,#C97CB0 52%,#A9518F 100%);color:#3A1533;box-shadow:0 18px 34px -14px rgba(169,81,143,0.7);}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 24px 44px -14px rgba(169,81,143,0.8);}
.btn-ghost{background:rgba(255,248,252,0.06);color:#F6E7F0;border:1px solid rgba(246,231,240,0.34);}
.btn-ghost:hover{transform:translateY(-3px);background:rgba(255,248,252,0.12);}

/* ---------- theme toggle ---------- */
.toggle{position:fixed;top:18px;right:18px;z-index:50;width:42px;height:42px;border-radius:50%;cursor:pointer;border:1px solid rgba(246,231,240,0.4);background:rgba(44,20,48,0.5);color:#F6E7F0;font-size:1.1rem;backdrop-filter:blur(8px);display:grid;place-items:center;transition:transform .3s,background .3s;}
.toggle:hover{transform:rotate(18deg) scale(1.06);}

/* ---------- reveal ---------- */
.js-rv .rv{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1);}
.js-rv .rv.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.js-rv .rv{opacity:1;transform:none;}}

/* ============================================================
   LANDING (index)
   ============================================================ */
.floral-hero{position:relative;color:#F6E7F0;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(120% 90% at 82% 8%, rgba(203,101,163,0.42) 0%, rgba(203,101,163,0) 46%),
    radial-gradient(120% 120% at 12% 96%, rgba(196,140,58,0.30) 0%, rgba(196,140,58,0) 42%),
    linear-gradient(158deg,#3A1B3B 0%,#562450 30%,#4A1E45 62%,#2C1330 100%);}
.floral-hero::before{content:"";position:absolute;inset:-10%;background-image:var(--floral);background-size:300px 300px;opacity:0.16;mix-blend-mode:screen;z-index:-1;animation:drift 90s linear infinite;}
.floral-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 52% at 50% 46%, rgba(30,12,30,0.55) 0%, rgba(30,12,30,0) 72%);}
@keyframes drift{to{background-position:300px 300px;}}
@media (prefers-reduced-motion:reduce){.floral-hero::before{animation:none;}}

.hero-inner{max-width:1080px;margin:0 auto;padding:112px 24px 124px;display:grid;gap:28px;justify-items:center;text-align:center;}
.brandline{display:inline-flex;align-items:center;gap:14px;font-family:var(--latin);font-style:italic;letter-spacing:0.12em;color:#EFC7DE;font-size:1rem;}
.brandline .rule{width:46px;height:1px;background:linear-gradient(90deg,transparent,#E8B6D2);}
.brandline .rule.r{background:linear-gradient(90deg,#E8B6D2,transparent);}
.hero-inner h1{font-size:clamp(2.9rem,8.5vw,5.4rem);line-height:1.24;letter-spacing:0.02em;color:#FCEFF7;text-shadow:0 2px 30px rgba(30,10,28,0.4);}
.hero-inner h1 .accent{color:var(--gold-soft);}
.hero-inner .lead{max-width:30ch;font-size:clamp(1.05rem,2.6vw,1.3rem);color:#F0D9E8;line-height:2;margin:0;}
.hero-inner .sub{color:#D9AFCB;font-size:0.98rem;letter-spacing:0.04em;}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:8px;}
.hero-badge{margin-top:18px;display:inline-flex;align-items:center;gap:12px;font-size:0.8rem;letter-spacing:0.14em;color:#E7C4DC;text-transform:uppercase;font-family:var(--latin);font-style:italic;}
.dot{width:5px;height:5px;border-radius:50%;background:var(--gold-soft);}
.hero-wave{display:block;width:100%;height:70px;margin-top:-1px;}

section.block{padding:88px 0;position:relative;}
.sec-head{text-align:center;margin-bottom:50px;display:grid;gap:14px;justify-items:center;}
.sec-head h2{font-size:clamp(1.7rem,4.5vw,2.5rem);color:var(--ink);letter-spacing:0.03em;}
.sec-head p{margin:0;color:var(--ink-soft);max-width:42ch;}

.letter{background:var(--surface);border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow);padding:clamp(34px,6vw,64px);position:relative;overflow:hidden;}
.letter::before{content:"💌";position:absolute;top:-18px;right:-6px;font-size:8rem;opacity:0.06;transform:rotate(-12deg);}
.letter .eyebrow,.letter h2{text-align:center;}
.letter h2{font-size:clamp(1.5rem,4vw,2.1rem);margin-bottom:26px;color:var(--ink);}
.letter p{color:var(--ink);}
.pains{list-style:none;padding:0;margin:24px 0;display:grid;gap:12px;}
.pains li{display:flex;align-items:center;gap:14px;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:15px 20px;color:var(--ink);font-size:1.02rem;}
.pains li::before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--rose);box-shadow:0 0 0 4px rgba(208,127,158,0.18);}
.promise{margin-top:28px;text-align:center;font-family:var(--serif);font-size:clamp(1.2rem,3.4vw,1.7rem);line-height:1.8;color:var(--plum-deep);}
.vow{margin-top:30px;padding:22px 26px;border-radius:16px;background:linear-gradient(135deg,rgba(139,58,114,0.10),rgba(184,146,63,0.10));border:1px dashed var(--line-strong);text-align:center;color:var(--ink);}
.vow strong{color:var(--plum);}

.howto{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center;}
.howto .card{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:34px 32px;box-shadow:var(--shadow-sm);}
.howto h3{font-size:1.3rem;color:var(--plum);margin-bottom:12px;display:flex;align-items:center;gap:12px;}
.howto p{color:var(--ink-soft);margin:0 0 14px;}
.stairs{display:grid;margin-top:6px;}
.stair{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line);}
.stair:last-child{border-bottom:none;}
.stair .n{font-family:var(--latin);font-style:italic;font-size:1.5rem;color:var(--gold);width:2.2ch;}
.stair .t b{color:var(--plum);font-weight:600;}
.side-note{background:linear-gradient(160deg,var(--surface) 0%,var(--surface-2) 100%);border:1px solid var(--line);border-radius:22px;padding:32px;box-shadow:var(--shadow-sm);}
.side-note .big{font-family:var(--serif);font-size:1.45rem;line-height:1.8;color:var(--ink);margin:0;}
.side-note .big em{font-style:normal;color:var(--plum);}
.side-note .cap{margin:14px 0 0;color:var(--ink-soft);font-size:0.96rem;}

.levels{display:grid;gap:26px;}
.lv{display:grid;grid-template-columns:132px 1fr;background:var(--surface);border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:var(--shadow-sm);text-decoration:none;color:inherit;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s;}
.lv:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--line-strong);}
.lv-rail{position:relative;display:grid;place-items:center;gap:4px;padding:30px 10px;color:#fff;text-align:center;background:var(--rail);}
.lv-rail .num{font-family:var(--latin);font-style:italic;font-size:3.4rem;line-height:1;color:#fff;text-shadow:0 3px 16px rgba(0,0,0,0.25);}
.lv-rail .lab{font-size:0.64rem;letter-spacing:0.28em;text-transform:uppercase;opacity:0.86;font-weight:700;}
.lv-rail .ico{font-size:1.5rem;margin-top:6px;}
.lv-body{padding:28px 30px;display:grid;gap:12px;align-content:start;}
.lv-body h3{font-size:1.4rem;color:var(--ink);}
.lv-body .oneline{color:var(--plum);font-family:var(--serif);font-size:1.05rem;}
.lv-learn{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px;}
.chip{font-size:0.82rem;color:var(--ink-soft);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:6px 13px;line-height:1.5;}
.lv-more{margin-top:6px;display:inline-flex;align-items:center;gap:8px;color:var(--plum);font-weight:700;font-size:0.95rem;}
.lv-more .arw{transition:transform .25s;}
.lv:hover .lv-more .arw{transform:translateX(4px);}
.lv1 .lv-rail{--rail:linear-gradient(160deg,#4E7CB0,#2F5A8C);}
.lv2 .lv-rail{--rail:linear-gradient(160deg,#5AA07E,#2F7355);}
.lv3 .lv-rail{--rail:linear-gradient(160deg,#C97CA0,#9C3F72);}
.lv4 .lv-rail{--rail:linear-gradient(160deg,#9B6FBE,#5E3B8C);}
.lv5 .lv-rail{--rail:linear-gradient(120deg,#E08A5B,#D0568A 55%,#7A4FB0);}

.closing{color:#F6E7F0;text-align:center;position:relative;overflow:hidden;
  background:
    radial-gradient(110% 90% at 20% 10%, rgba(203,101,163,0.4) 0%, rgba(203,101,163,0) 48%),
    radial-gradient(120% 120% at 90% 100%, rgba(196,140,58,0.3) 0%, rgba(196,140,58,0) 44%),
    linear-gradient(150deg,#3A1B3B,#4A1E45 55%,#2C1330);}
.closing::before{content:"";position:absolute;inset:-10%;background-image:var(--floral);background-size:300px 300px;opacity:0.14;mix-blend-mode:screen;z-index:0;}
.closing .wrap{position:relative;z-index:1;padding:92px 24px 96px;}
.closing .lips{font-size:2.4rem;}
.closing h2{color:#FCEFF7;font-size:clamp(1.7rem,4.6vw,2.6rem);margin:16px 0 18px;line-height:1.6;}
.closing p{color:#EBCFE1;max-width:34ch;margin:0 auto 28px;line-height:2;}
.closing .signature{font-family:var(--latin);font-style:italic;font-size:1.5rem;color:var(--gold-soft);margin-top:32px;}
.closing .signature small{display:block;font-family:var(--sans);font-style:normal;font-size:0.72rem;letter-spacing:0.28em;text-transform:uppercase;color:#D9AFCB;margin-top:6px;}

footer.foot{background:var(--bg-2);color:var(--ink-soft);text-align:center;padding:40px 24px;font-size:0.86rem;}
footer.foot .em{color:var(--plum);font-family:var(--serif);}

/* ============================================================
   LESSON PAGES (level 1-5)
   ============================================================ */
.lesson-hero{position:relative;color:#fff;overflow:hidden;isolation:isolate;background:var(--lv-grad,linear-gradient(155deg,#5E2A55,#2C1330));}
.lesson-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 60% at 50% 40%, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0) 72%);}
.lesson-hero .inner{max-width:860px;margin:0 auto;padding:70px 24px 84px;text-align:center;display:grid;gap:16px;justify-items:center;}
.crumb{display:inline-flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;font-size:0.82rem;color:rgba(255,255,255,0.82);letter-spacing:0.03em;}
.crumb a{color:rgba(255,255,255,0.9);text-decoration:none;border-bottom:1px solid rgba(255,255,255,0.35);padding-bottom:1px;}
.crumb a:hover{color:#fff;}
.lesson-hero .lvtag{font-family:var(--latin);font-style:italic;letter-spacing:0.14em;font-size:1.05rem;color:rgba(255,255,255,0.92);}
.lesson-hero .bigico{font-size:3rem;line-height:1;filter:drop-shadow(0 4px 12px rgba(0,0,0,0.25));}
.lesson-hero h1{font-size:clamp(2rem,6vw,3.2rem);color:#fff;letter-spacing:0.02em;}
.lesson-hero .tagline{max-width:32ch;color:rgba(255,255,255,0.92);font-size:1.05rem;line-height:1.9;margin:0;}
.lesson-wave{display:block;width:100%;height:60px;margin-top:-1px;}

.lesson{max-width:760px;margin:0 auto;padding:64px 24px 40px;}
.lesson > * + *{margin-top:22px;}
.lesson h2{font-size:clamp(1.5rem,4.2vw,2rem);color:var(--ink);margin-top:56px;padding-bottom:10px;border-bottom:2px solid var(--line);letter-spacing:0.02em;}
.lesson h2:first-child{margin-top:0;}
.lesson h3{font-size:1.2rem;color:var(--plum);margin-top:30px;}
.lesson h4{font-size:1.05rem;color:var(--ink);margin-top:22px;}
.lesson p{color:var(--ink);margin:0;}
.lesson blockquote{margin:0;padding:16px 24px;border-left:4px solid var(--plum);background:var(--surface-2);border-radius:0 12px 12px 0;font-family:var(--serif);font-size:1.12rem;color:var(--plum-deep);line-height:1.8;}

/* eyebrow chapter marker */
.chapmark{display:flex;align-items:center;gap:14px;margin-top:56px;}
.chapmark .cnum{font-family:var(--latin);font-style:italic;font-size:2.6rem;line-height:1;color:var(--lv-accent,var(--plum));min-width:1.4em;}
.chapmark .cttl{font-family:var(--serif);font-size:clamp(1.4rem,4vw,1.9rem);color:var(--ink);}
.chapmark + *{margin-top:20px;}

/* callouts (tinted cards) */
.cal{border-radius:16px;padding:20px 22px;border:1px solid var(--t-gray-bd);background:var(--t-gray-bg);color:var(--ink);display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;line-height:1.85;}
.cal .ci{font-size:1.3rem;line-height:1.5;}
.cal > div > * + *{margin-top:8px;}
.cal.b-blue{background:var(--t-blue-bg);border-color:var(--t-blue-bd);}
.cal.b-green{background:var(--t-green-bg);border-color:var(--t-green-bd);}
.cal.b-pink{background:var(--t-pink-bg);border-color:var(--t-pink-bd);}
.cal.b-purple{background:var(--t-purple-bg);border-color:var(--t-purple-bd);}
.cal.b-orange{background:var(--t-orange-bg);border-color:var(--t-orange-bd);}
.cal.b-red{background:var(--t-red-bg);border-color:var(--t-red-bd);}
.cal.b-yellow{background:var(--t-yellow-bg);border-color:var(--t-yellow-bd);}
.cal.b-brown{background:var(--t-brown-bg);border-color:var(--t-brown-bd);}
.cal strong{color:var(--ink);}

/* goal callout (lesson intro) */
.goal{border-radius:18px;padding:26px 28px;background:linear-gradient(150deg,var(--t-gray-bg),var(--surface));border:1px solid var(--line-strong);box-shadow:var(--shadow-sm);}
.goal .lbl{font-size:0.72rem;letter-spacing:0.28em;text-transform:uppercase;color:var(--lv-accent,var(--plum));font-weight:700;}
.goal p{margin:10px 0 0;font-size:1.06rem;color:var(--ink);line-height:1.9;}

/* mini TOC */
.toc{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px 26px;}
.toc .lbl{font-weight:700;color:var(--plum);display:block;margin-bottom:10px;}
.toc ol{margin:0;padding-left:1.3em;color:var(--ink-soft);display:grid;gap:6px;}
.toc a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;}
.toc a:hover{border-color:var(--line-strong);color:var(--plum);}

/* data tables */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);}
table.data{border-collapse:collapse;width:100%;min-width:460px;font-size:0.95rem;background:var(--surface);}
table.data th,table.data td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.7;}
table.data thead th{background:var(--plum);color:#fff;font-family:var(--sans);font-weight:700;font-size:0.9rem;position:sticky;top:0;}
table.data tbody tr:last-child td{border-bottom:none;}
table.data tbody tr:nth-child(even){background:var(--surface-2);}
table.data td.col-pink{background:var(--t-pink-bg);}
table.data td.col-blue{background:var(--t-blue-bg);}
table.data td.col-green{background:var(--t-green-bg);}
table.data td.col-red{background:var(--t-red-bg);}
table.data td.col-gray{background:var(--t-gray-bg);}
.tbl-hint{font-size:0.8rem;color:var(--ink-faint);margin:8px 2px 0;}

/* toggles */
details.tg{border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden;}
details.tg + details.tg{margin-top:12px;}
details.tg > summary{cursor:pointer;list-style:none;padding:16px 20px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:12px;background:var(--surface-2);}
details.tg > summary::-webkit-details-marker{display:none;}
details.tg > summary::before{content:"▶";color:var(--plum);font-size:0.8rem;transition:transform .25s;}
details.tg[open] > summary::before{transform:rotate(90deg);}
details.tg .tgbody{padding:18px 22px;line-height:1.85;color:var(--ink);}
details.tg .tgbody > * + *{margin-top:8px;}
details.tg.b-blue > summary{background:var(--t-blue-bg);}
details.tg.b-green > summary{background:var(--t-green-bg);}
details.tg.b-purple > summary{background:var(--t-purple-bg);}
details.tg.b-yellow > summary{background:var(--t-yellow-bg);}

/* checklist */
ul.check{list-style:none;padding:0;margin:0;display:grid;gap:10px;}
ul.check li{position:relative;padding:12px 16px 12px 48px;background:var(--surface);border:1px solid var(--line);border-radius:12px;color:var(--ink);line-height:1.7;}
ul.check li::before{content:"";position:absolute;left:16px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:6px;border:2px solid var(--plum);background:transparent;}
ul.check li::after{content:"✓";position:absolute;left:20px;top:50%;transform:translateY(-50%);color:var(--plum);font-size:0.8rem;font-weight:900;opacity:0.28;}
ul.check.warn li::before{border-color:var(--t-red-ink);}
ul.check.warn li::after{content:"!";color:var(--t-red-ink);opacity:0.5;}

/* plain bullet list inside callouts */
.cal ul, .tgbody ul{margin:6px 0 0;padding-left:1.2em;}
.cal ul li, .tgbody ul li{margin:3px 0;}

/* numbered dashboard list */
ol.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;gap:10px;}
ol.steps li{position:relative;padding:12px 16px 12px 52px;background:var(--surface);border:1px solid var(--line);border-radius:12px;line-height:1.7;}
ol.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:14px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;background:var(--lv-accent,var(--plum));color:#fff;display:grid;place-items:center;font-family:var(--latin);font-style:italic;font-size:1rem;}

/* columns */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.cols .cal{grid-template-columns:auto 1fr;}

/* feedback CTA (links to Notion form) */
.feedback{margin-top:40px;border-radius:20px;padding:30px 30px;text-align:center;background:linear-gradient(150deg,var(--t-pink-bg),var(--surface));border:1px solid var(--t-pink-bd);box-shadow:var(--shadow-sm);}
.feedback .fi{font-size:1.8rem;}
.feedback h3{color:var(--ink);margin:8px 0 8px;font-size:1.25rem;}
.feedback p{color:var(--ink-soft);margin:0 auto 18px;max-width:40ch;font-size:0.98rem;}
.feedback .note{font-size:0.8rem;color:var(--ink-faint);margin-top:14px;}

/* prev / next nav */
.pager{max-width:760px;margin:10px auto 0;padding:0 24px 70px;display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch;}
.pager a{text-decoration:none;border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:var(--surface);color:var(--ink);display:flex;flex-direction:column;gap:3px;transition:transform .25s,border-color .25s,box-shadow .25s;}
.pager a:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:var(--shadow-sm);}
.pager a.next{text-align:right;}
.pager a.home{align-items:center;justify-content:center;flex-direction:row;gap:8px;font-weight:700;color:var(--plum);}
.pager .dir{font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-faint);}
.pager .ttl{font-weight:700;font-size:0.95rem;}
.pager a.disabled{opacity:0.4;pointer-events:none;}

/* ---------- responsive ---------- */
@media (max-width:860px){ .howto{grid-template-columns:1fr;} }
@media (max-width:640px){
  body{font-size:16px;}
  .lv{grid-template-columns:1fr;}
  .lv-rail{padding:20px;}
  .lv-rail .num{font-size:2.6rem;}
  .lv-body{padding:24px;}
  section.block{padding:64px 0;}
  .hero-inner{padding:90px 22px 100px;}
  .lesson{padding:48px 20px 36px;}
  .cols{grid-template-columns:1fr;}
  .pager{grid-template-columns:1fr;}
  .pager a.next{text-align:left;}
}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px;}