/* Money Basics lessons (การเงินพื้นฐาน hub) — shared by all 6 lessons. */
.mb {
  --mb-accent: #79bdf2; --mb-gold: #F7C548; --mb-up: #4DD2A0; --mb-down: #f0857a;
  --mb-pink: #FF6B9D; --mb-violet: #ad83ef; --mb-surface: #0b1120; --mb-line: rgba(255, 255, 255, .1);
  max-width: 860px; margin: 0 auto; padding: 0 2px;
  font-family: var(--font-body); font-size: 1.07rem; line-height: 1.95; color: #c4c9d8;
}
.mb p { margin: 0 0 1.1rem; }
.mb b, .mb strong { color: #f2f4fa; font-weight: 700; }
.mb h2, .mb h3 { font-family: var(--font-head); color: #fff; line-height: 1.5; }
.mb a { color: #9ccff6; }

.mb-series { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1.4rem; padding: 0; list-style: none; }
.mb-series a, .mb-series span { display: inline-flex; align-items: center; gap: .35rem; padding: .36rem .8rem; border: 1px solid var(--mb-line); border-radius: 999px; background: rgba(255, 255, 255, .03); color: #aab2c4; font-size: .84rem; text-decoration: none; transition: .2s; }
.mb-series a:hover { border-color: var(--mb-accent); color: #fff; }
.mb-series .is-here { border-color: var(--mb-accent); background: rgba(121, 189, 242, .14); color: #fff; font-weight: 700; }
.mb-series small { color: #6f7890; font-size: .72rem; }

.mb-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2.4rem; padding: 0; list-style: none; }
.mb-nav a { display: inline-block; padding: .4rem .9rem; border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; background: rgba(255, 255, 255, .03); color: #b6bbcc; font-size: .86rem; text-decoration: none; transition: .2s; }
.mb-nav a:hover { border-color: var(--mb-gold); color: var(--mb-gold); }

.mb-tldr { background: linear-gradient(160deg, rgba(121, 189, 242, .13), rgba(121, 189, 242, .02)); border: 1px solid rgba(121, 189, 242, .3); border-radius: 16px; padding: 1.4rem 1.6rem; margin: 0 0 3rem; }
.mb-tldr .k { font-family: var(--font-head); color: var(--mb-accent); font-weight: 700; font-size: .82rem; letter-spacing: .06em; margin: 0 0 .7rem; }
.mb-tldr ul { margin: 0; padding-left: 1.15rem; }
.mb-tldr li { margin: .45rem 0; color: #e9ebf3; }

.mb-sec { margin: 3.4rem 0 0; scroll-margin-top: 90px; }
.mb-sec .eyebrow { font-family: var(--font-head); font-size: .78rem; letter-spacing: .08em; color: var(--mb-gold); margin: 0 0 .45rem; }
.mb-sec h2 { font-size: 1.6rem; font-weight: 700; margin: 0 0 .9rem; letter-spacing: -.01em; }
.mb-sec h3 { font-size: 1.14rem; margin: 2rem 0 .7rem; }

.mb-box { background: rgba(255, 255, 255, .035); border: 1px solid var(--mb-line); border-left: 3px solid var(--bc, var(--mb-accent)); border-radius: 0 14px 14px 0; padding: 1.15rem 1.45rem; margin: 1.5rem 0; }
.mb-box p:last-child { margin: 0; }
.mb-box .t { display: block; font-family: var(--font-head); color: #fff; margin-bottom: .25rem; }
.mb-mean { background: rgba(247, 197, 72, .07); border: 1px dashed rgba(247, 197, 72, .4); border-radius: 12px; padding: .9rem 1.2rem; margin: 1.2rem 0; color: #efe2bd; font-size: 1rem; }
.mb-mean b { color: var(--mb-gold); }

/* cards */
.mb-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .9rem; margin: 1.5rem 0; }
.mb-card { position: relative; background: rgba(255, 255, 255, .035); border: 1px solid var(--mb-line); border-top: 3px solid var(--cc, var(--mb-accent)); border-radius: 14px; padding: 1.1rem 1.2rem; }
.mb-card .ic { display: block; font-size: 1.9rem; line-height: 1; margin-bottom: .55rem; }
.mb-card h3 { margin: 0 0 .35rem; font-size: 1.06rem; }
.mb-card p { margin: 0; font-size: .95rem; line-height: 1.75; }
.mb-card .ex { display: block; margin-top: .6rem; padding-top: .55rem; border-top: 1px solid var(--mb-line); color: var(--cc, var(--mb-accent)); font-size: .88rem; }
.mb-card .num { position: absolute; top: .8rem; right: .95rem; font-family: var(--font-head); font-weight: 800; color: rgba(255, 255, 255, .12); font-size: 1.6rem; }

/* figures */
.mb-fig { margin: 1.8rem 0 2rem; }
.mb-fig-head { margin-bottom: .7rem; border-left: 3px solid var(--hc, var(--mb-accent)); padding-left: .7rem; }
.mb-fig-head b { display: block; font-family: var(--font-head); font-size: 1rem; color: #fff; line-height: 1.5; }
.mb-fig-head span { display: block; font-size: .85rem; color: #9ba1b3; line-height: 1.6; }
.mb-plot { position: relative; background: var(--mb-surface); border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; padding: .9rem 1rem; }
.mb-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.mb-tag { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); background: rgba(11, 17, 32, .92); border: 1px solid var(--tc, rgba(255, 255, 255, .18)); border-radius: 6px; padding: .1rem .45rem; font-size: .76rem; line-height: 1.5; color: #e3e7f0; white-space: nowrap; pointer-events: none; }
.mb-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.3rem; margin-bottom: .8rem; }
.mb-key { display: inline-flex; align-items: center; gap: .45rem; font-size: .86rem; color: #aeb4c6; }
.mb-key i { width: 16px; height: 4px; border-radius: 2px; flex-shrink: 0; background: var(--kc); }
.mb-note { font-size: .92rem; line-height: 1.8; color: #9ba1b3; margin: .85rem .2rem 0; }
.mb-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin: 1.8rem 0 2rem; }
.mb-duo .mb-fig { margin: 0; }
.mb-good { --hc: var(--mb-up); } .mb-bad { --hc: var(--mb-down); }

/* flow + timeline (HTML diagrams) */
.mb-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: .5rem; margin: 1.4rem 0; }
.mb-step { flex: 1 1 130px; background: rgba(255, 255, 255, .04); border: 1px solid var(--mb-line); border-radius: 12px; padding: .8rem .85rem; text-align: center; font-size: .9rem; line-height: 1.6; color: #cfd4e0; }
.mb-step .ic { display: block; font-size: 1.7rem; line-height: 1.2; margin-bottom: .25rem; }
.mb-step b { display: block; color: #fff; font-size: .96rem; }
.mb-arrow { align-self: center; color: var(--mb-gold); font-size: 1.2rem; flex: 0 0 auto; }
.mb-timeline { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem; margin: 2rem 0 1rem; padding-top: 1.1rem; }
.mb-timeline::before { content: ''; position: absolute; left: 4%; right: 4%; top: 1.95rem; height: 2px; background: linear-gradient(90deg, var(--mb-violet), var(--mb-accent), var(--mb-up)); }
.mb-timeline.three { grid-template-columns: repeat(3, 1fr); }
.mb-tl { position: relative; text-align: center; font-size: .86rem; line-height: 1.6; color: #aeb4c6; }
.mb-tl .ic { position: relative; z-index: 1; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; margin: 0 auto .6rem; border: 2px solid var(--mb-accent); border-radius: 50%; background: var(--mb-surface); font-size: 1.45rem; }
.mb-tl b { display: block; color: #fff; font-size: .95rem; }

/* ladder / stairs */
.mb-ladder { display: grid; gap: .5rem; margin: 1.5rem 0; counter-reset: rung; }
.mb-rung { display: grid; grid-template-columns: auto 1fr; gap: .85rem; align-items: center; margin-left: calc(var(--i, 0) * 4%); background: rgba(255, 255, 255, .035); border: 1px solid var(--mb-line); border-left: 4px solid var(--rc, var(--mb-accent)); border-radius: 0 12px 12px 0; padding: .7rem 1rem; }
.mb-rung .ic { font-size: 1.5rem; }
.mb-rung b { display: block; color: #fff; }
.mb-rung span { display: block; font-size: .9rem; line-height: 1.6; color: #a6adbf; }

/* bars (HTML) */
.mb-bars { display: grid; gap: .55rem; margin: 1rem 0 .3rem; }
.mb-bar { display: grid; grid-template-columns: minmax(96px, 30%) 1fr auto; gap: .7rem; align-items: center; font-size: .9rem; color: #cfd4e0; }
.mb-bar .track { height: 18px; border-radius: 6px; background: rgba(255, 255, 255, .05); overflow: hidden; }
.mb-bar .fill { height: 100%; width: var(--w); border-radius: 6px; background: var(--bc, var(--mb-accent)); }
.mb-bar em { font-style: normal; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* tables */
.mb-table-wrap { overflow-x: auto; margin: 1.3rem 0; }
.mb-table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.mb-table.wide { min-width: 560px; }
.mb-table th { text-align: left; font-family: var(--font-head); color: var(--mb-accent); padding: .6rem .7rem; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.mb-table td { padding: .6rem .7rem; border-bottom: 1px solid var(--mb-line); vertical-align: top; line-height: 1.7; }
.mb-table td:first-child { color: #fff; font-weight: 600; }

/* do / don't */
.mb-do { display: grid; gap: .55rem; margin: 1.2rem 0; padding: 0; list-style: none; }
.mb-do li { display: flex; gap: .7rem; align-items: flex-start; background: rgba(255, 255, 255, .035); border: 1px solid var(--mb-line); border-radius: 12px; padding: .8rem 1rem; font-size: .96rem; line-height: 1.75; color: #dfe3ee; }
.mb-do li.no { border-color: rgba(240, 133, 122, .35); background: rgba(240, 133, 122, .06); }
.mb-do .m { flex-shrink: 0; font-size: 1.05rem; line-height: 1.7; }

/* interactive tool */
.mb-tool { background: linear-gradient(160deg, rgba(77, 210, 160, .1), rgba(255, 255, 255, .02)); border: 1px solid rgba(77, 210, 160, .3); border-radius: 16px; padding: 1.3rem 1.5rem; margin: 1.8rem 0; }
.mb-tool .k { font-family: var(--font-head); font-weight: 700; color: var(--mb-up); margin: 0 0 .8rem; }
.mb-tool-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.mb-tool label { display: grid; gap: .3rem; font-size: .88rem; color: #aeb4c6; }
.mb-tool input[type=number], .mb-tool select { width: 100%; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, .16); border-radius: 9px; padding: .6rem .7rem; background: #060c18; color: #fff; font: 600 1rem var(--font-body); color-scheme: dark; }
.mb-tool input[type=range] { width: 100%; accent-color: var(--mb-up); }
.mb-out { border-radius: 12px; background: rgba(6, 12, 24, .7); border: 1px solid var(--mb-line); padding: 1rem 1.1rem; font-size: 1rem; line-height: 1.8; color: #dfe3ee; }
.mb-out .big { display: block; font-family: var(--font-head); font-size: 1.7rem; font-weight: 800; color: var(--mb-up); line-height: 1.3; }
.mb-quiz { display: grid; gap: 1rem; }
.mb-quiz fieldset { border: 1px solid var(--mb-line); border-radius: 12px; padding: .8rem 1rem; margin: 0; }
.mb-quiz legend { padding: 0 .3rem; color: #fff; font-weight: 600; }
.mb-quiz label { display: flex; gap: .5rem; align-items: flex-start; padding: .25rem 0; font-size: .94rem; color: #cfd4e0; cursor: pointer; }

.mb-check { background: linear-gradient(160deg, rgba(247, 197, 72, .1), rgba(255, 255, 255, .02)); border: 1px solid rgba(247, 197, 72, .28); border-radius: 16px; padding: 1.4rem 1.7rem; margin: 1.4rem 0; }
.mb-check ol, .mb-check ul { margin: 0; padding-left: 1.3rem; }
.mb-check li { margin: .55rem 0; color: #e9ebf3; }
.mb-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: 2.6rem 0 0; border: 1px solid rgba(121, 189, 242, .35); border-radius: 14px; padding: 1.1rem 1.3rem; background: rgba(121, 189, 242, .07); }
.mb-next span { color: #aeb4c6; font-size: .92rem; }
.mb-next b { display: block; color: #fff; font-family: var(--font-head); font-size: 1.1rem; }
.mb-next a { display: inline-flex; align-items: center; gap: .4rem; border-radius: 10px; padding: .65rem 1.1rem; background: linear-gradient(110deg, #8fcaf5, #5aa6e6); color: #07111f; font: 800 .95rem var(--font-head); text-decoration: none; }
.mb-src { border-top: 1px solid var(--mb-line); margin-top: 3rem; padding-top: 1.2rem; font-size: .86rem; line-height: 1.85; color: #868c9e; }
.mb-src ul { margin: .5rem 0 0; padding-left: 1.1rem; }
.mb-src a { color: #9ccff6; word-break: break-word; }

@media (max-width: 760px) {
  .mb { font-size: 1rem; }
  .mb-duo { grid-template-columns: 1fr; }
  .mb-sec h2 { font-size: 1.35rem; }
  .mb-tag { font-size: .66rem; padding: .06rem .3rem; }
  .mb-timeline, .mb-timeline.three { grid-template-columns: 1fr; gap: .8rem; padding-top: 0; }
  .mb-timeline::before { left: 1.6rem; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: linear-gradient(180deg, var(--mb-violet), var(--mb-accent), var(--mb-up)); }
  .mb-tl { display: grid; grid-template-columns: auto 1fr; gap: .8rem; text-align: left; align-items: center; }
  .mb-tl .ic { margin: 0; }
  .mb-arrow { flex-basis: 100%; text-align: center; transform: rotate(90deg); }
  .mb-flow { flex-direction: column; }
  .mb-rung { margin-left: 0; }
  .mb-bar { grid-template-columns: 1fr auto; }
  .mb-bar .track { grid-column: 1 / -1; grid-row: 2; }
}

/* ============ v8 reading theme: hub colour · hero · sidebar TOC · photos ============ */
.mb { --mb-hub: var(--mb-accent); max-width: 1180px; font-size: 1.1rem; }
.kr-article-mb { --reading: 1180px; }
.kr-article-mb > .kr-crumb { max-width: 1180px; margin-left: auto; margin-right: auto; }

/* hero */
.kr-article-mb > .kr-hero { position: relative; isolation: isolate; max-width: 1180px; min-height: 300px; margin: 0 auto 2.6rem; padding: clamp(2.2rem, 5vw, 4rem) clamp(1.5rem, 5vw, 4.2rem); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; border: 1px solid color-mix(in srgb, var(--hub) 30%, transparent); border-radius: 28px;
  background: radial-gradient(ellipse 55% 95% at 85% 40%, color-mix(in srgb, var(--hub) 34%, transparent), transparent 70%), radial-gradient(ellipse 50% 70% at 0% 100%, color-mix(in srgb, var(--hub) 10%, transparent), transparent 70%), linear-gradient(160deg, #0d1426, #070b16); }
.kr-article-mb > .kr-hero::after { content: none; }
.kr-article-mb > .kr-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(color-mix(in srgb, var(--hub) 22%, transparent) 1px, transparent 1.4px); background-size: 22px 22px; mask-image: linear-gradient(100deg, transparent 35%, #000 95%); opacity: .55; }
.kr-article-mb > .kr-hero > .kr-hero-icon { position: absolute; right: clamp(1rem, 6vw, 5.5rem); top: 50%; transform: translateY(-50%) rotate(-8deg); z-index: -1; font-size: clamp(7rem, 16vw, 12.5rem); line-height: 1; filter: drop-shadow(0 20px 60px color-mix(in srgb, var(--hub) 45%, transparent)); opacity: .9; }
.kr-article-mb > .kr-hero > .kr-hero-art { position: absolute; inset: 0 0 0 auto; z-index: -1; width: min(72%, 900px); height: 100%; object-fit: cover; object-position: center right; mask-image: linear-gradient(90deg, transparent, #000 45%); }
.kr-hero.has-art { min-height: 380px; }
.kr-article-mb > .kr-hero .kr-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 .9rem; color: #c9cedb; font: 600 .86rem 'Outfit', 'Mitr', sans-serif; letter-spacing: .02em; }
.kr-article-mb > .kr-hero .kr-kicker span { padding: .28rem .75rem; border-radius: 999px; background: color-mix(in srgb, var(--hub) 18%, transparent); border: 1px solid color-mix(in srgb, var(--hub) 45%, transparent); color: var(--hub); font-weight: 700; }
.kr-article-mb > .kr-hero h1 { max-width: 14ch; margin: 0 0 .9rem; font-size: clamp(2.8rem, 7vw, 5.6rem); line-height: 1.05; text-shadow: 0 4px 30px rgba(0, 0, 0, .5); }
.kr-article-mb > .kr-hero .kr-lead { max-width: 34rem; color: #d4d8e4; font-size: clamp(1.05rem, 1.8vw, 1.28rem); }
.kr-article-mb > .kr-hero > .kr-hero-credit { position: absolute; z-index: 1; right: 1rem; bottom: .7rem; color: rgba(255, 255, 255, .45); font-size: .7rem; }

/* progress */
.mb-progress { position: fixed; left: 0; right: 0; top: 0; z-index: 1000; height: 3px; pointer-events: none; }
.mb-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--mb-hub), var(--mb-gold)); transform: scaleX(0); transform-origin: 0 50%; }

/* series chips pick up the hub colour */
.mb .mb-series { max-width: 1180px; }
.mb-series .is-here { border-color: var(--mb-hub); background: color-mix(in srgb, var(--mb-hub) 16%, transparent); }
.mb-series a:hover { border-color: var(--mb-hub); }

/* layout: sidebar TOC on wide screens — body overflow-x:hidden would make body the scroll box and kill sticky */
body:has(.kr-article-mb) { overflow-x: clip; overflow-y: visible; }
.mb-layout { display: block; }
.mb-main { min-width: 0; max-width: 800px; margin: 0 auto; }
.mb-toc-k { display: none; }
@media (min-width: 1100px) {
  .mb-layout { display: grid; grid-template-columns: 220px minmax(0, 800px); justify-content: center; gap: 3.2rem; align-items: start; }
  .mb-main { margin: 0; }
  .mb-toc { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow: auto; padding: 1.1rem 0 1.1rem 1rem; border-left: 1px solid var(--mb-line); }
  .mb-toc-k { display: block; margin: 0 0 .6rem; font: 700 .76rem 'Outfit', 'Mitr', sans-serif; letter-spacing: .12em; color: #7d859b; }
  .mb-toc .mb-nav { flex-direction: column; flex-wrap: nowrap; gap: .1rem; margin: 0; }
  .mb-toc .mb-nav a { display: block; position: relative; padding: .45rem .7rem; border: 0; border-radius: 8px; background: none; color: #8f97ab; font-size: .9rem; line-height: 1.5; }
  .mb-toc .mb-nav a::before { content: ''; position: absolute; left: calc(-1rem - 1px); top: .4rem; bottom: .4rem; width: 2px; border-radius: 2px; background: transparent; transition: .2s; }
  .mb-toc .mb-nav a:hover { color: #fff; background: rgba(255, 255, 255, .04); }
  .mb-toc .mb-nav a.is-on { color: #fff; background: color-mix(in srgb, var(--mb-hub) 12%, transparent); }
  .mb-toc .mb-nav a.is-on::before { background: var(--mb-hub); }
}

/* type + sections */
.mb-tldr { border-color: color-mix(in srgb, var(--mb-hub) 35%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--mb-hub) 14%, transparent), rgba(255, 255, 255, .015)); }
.mb-tldr .k { color: var(--mb-hub); }
.mb-sec { margin-top: 4.4rem; }
.mb-sec + .mb-sec { padding-top: 4.2rem; margin-top: 0; border-top: 1px solid rgba(255, 255, 255, .06); }
.mb-sec .eyebrow { display: inline-block; padding: .2rem .7rem; border-radius: 999px; background: rgba(247, 197, 72, .1); letter-spacing: .03em; }
.mb-sec h2 { font-size: clamp(1.6rem, 3vw, 2.05rem); line-height: 1.35; margin-bottom: 1.1rem; }
.mb-sec > p { max-width: 68ch; }

/* real photos */
.mb-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .9rem; margin: 2rem 0; }
.mb-gallery.one { grid-template-columns: 1fr; }
.mb-gallery.one .mb-photo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.mb-gallery.one .mb-photo figcaption { align-content: center; padding: 1.1rem 1.3rem; }
.mb-photo figcaption span b { color: #fff; font-family: inherit; font-size: inherit; }
.mb-photo { margin: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--mb-line); border-radius: 16px; background: var(--mb-surface); }
.mb-photo-frame { position: relative; aspect-ratio: 4 / 3; min-height: 0; overflow: hidden; background: #05080f; }
.mb-photo-frame img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.mb-photo-frame.contain { background: radial-gradient(circle at 50% 40%, #1a2236, #05080f); }
.mb-photo-frame.contain img { inset: .8rem; width: calc(100% - 1.6rem); height: calc(100% - 1.6rem); object-fit: contain; }
.mb-photo:hover .mb-photo-frame img { transform: scale(1.04); }
.mb-photo figcaption { display: grid; gap: .3rem; padding: .85rem 1rem 1rem; font-size: .88rem; line-height: 1.65; color: #aeb4c6; }
.mb-photo figcaption b { color: #fff; font-family: var(--font-head); font-size: .96rem; }
.mb-photo figcaption small { margin-top: .2rem; font-size: .72rem; color: #8f98ae; }
.mb-photo figcaption small a { color: inherit; text-decoration: underline dotted; }

@media (max-width: 760px) {
  .mb { font-size: 1.02rem; }
  .kr-article-mb > .kr-hero { min-height: 240px; border-radius: 20px; }
  .kr-article-mb > .kr-hero > .kr-hero-icon { top: 1.2rem; right: 1rem; transform: rotate(-8deg); font-size: 5.5rem; opacity: .55; }
  .kr-article-mb > .kr-hero > .kr-hero-art { width: 100%; opacity: .45; mask-image: linear-gradient(0deg, transparent, #000 70%); }
  .mb-gallery { grid-template-columns: 1fr; }
  .mb-gallery.one .mb-photo { grid-template-columns: 1fr; }
  .mb-sec + .mb-sec { padding-top: 3rem; }
}

/* balance-sheet towers: two stacks that must end at the same height */
.mb-bs { display: grid; grid-template-columns: 1fr auto 1fr; gap: .9rem; align-items: stretch; }
.mb-bs-col { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.mb-bs-h { display: flex; align-items: flex-end; justify-content: center; min-height: 2.9em; font-family: var(--font-head); font-size: .92rem; line-height: 1.4; color: #fff; text-align: center; }
.mb-bs-stack { display: flex; flex-direction: column; gap: 3px; height: 380px; }
.mb-bs-seg { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 26px; padding: 0 .7rem; border-radius: 6px; background: color-mix(in srgb, var(--sc) 30%, #0b1120); border-left: 4px solid var(--sc); font-size: .82rem; line-height: 1.3; color: #e6e9f2; overflow: hidden; }
.mb-bs-seg em { font-style: normal; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mb-bs-eq { align-self: center; font: 800 1.8rem var(--font-head); color: var(--mb-gold); }
@media (max-width: 760px) { .mb-bs-stack { height: 420px; } .mb-bs { gap: .4rem; } .mb-bs-seg { font-size: .72rem; padding: 0 .4rem; } .mb-bs-eq { font-size: 1.2rem; } }

/* ============ learner kit (v11): glossary · tap terms · guess · toys · sort game ============ */
.mb-gloss { margin: 0 0 2.6rem; padding: 1.3rem 1.4rem 1.4rem; border: 1px solid color-mix(in srgb, var(--mb-hub) 30%, transparent); border-radius: 18px; background: linear-gradient(160deg, color-mix(in srgb, var(--mb-hub) 10%, transparent), rgba(255, 255, 255, .015)); }
.mb-gloss .k { margin: 0 0 .9rem; font-family: var(--font-head); font-weight: 700; color: var(--mb-hub); }
.mb-gloss .k small { display: block; margin-top: .15rem; font-family: var(--font-body); font-weight: 400; font-size: .8rem; color: #8f97ab; }
.mb-gloss-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .7rem; }
.mb-gloss-item { padding: .8rem .9rem; border-radius: 12px; background: rgba(6, 12, 24, .55); border: 1px solid var(--mb-line); }
.mb-gloss-item b { display: block; font-family: var(--font-head); color: #fff; font-size: 1rem; }
.mb-gloss-item b i { font-style: normal; font-family: var(--font-body); font-weight: 400; font-size: .74rem; color: #7d859b; }
.mb-gloss-item p { margin: .3rem 0 0; font-size: .9rem; line-height: 1.65; color: #cfd4e0; }
.mb-gloss-item span { display: block; margin-top: .45rem; font-size: .82rem; line-height: 1.6; color: #9ba1b3; }

.mb-term { position: relative; display: inline; padding: 0; margin: 0; border: 0; border-bottom: 1.5px dashed var(--mb-hub); background: none; color: inherit; font: inherit; line-height: inherit; cursor: help; }
.mb-term:hover, .mb-term.is-open { color: #fff; background: color-mix(in srgb, var(--mb-hub) 14%, transparent); border-radius: 3px 3px 0 0; }
.mb-term:focus-visible { outline: 2px solid var(--mb-hub); outline-offset: 2px; }
.mb-tip { position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 30; width: max-content; max-width: min(280px, 80vw); transform: translateX(-50%); padding: .6rem .8rem; border: 1px solid color-mix(in srgb, var(--mb-hub) 60%, transparent); border-radius: 10px; background: #111a2e; box-shadow: 0 12px 30px rgba(0, 0, 0, .45); color: #e8ebf3; font-size: .86rem; font-weight: 400; line-height: 1.6; text-align: left; white-space: normal; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s; }
.mb-term:hover .mb-tip, .mb-term.is-open .mb-tip { opacity: 1; visibility: visible; }

.mb-guess { margin: 1.4rem 0 1.6rem; border: 1px dashed rgba(247, 197, 72, .5); border-radius: 14px; background: rgba(247, 197, 72, .06); }
.mb-guess summary { display: grid; gap: .35rem; padding: 1rem 1.2rem; list-style: none; cursor: pointer; }
.mb-guess summary::-webkit-details-marker { display: none; }
.mb-guess-k { font-family: var(--font-head); font-size: .8rem; color: var(--mb-gold); letter-spacing: .03em; }
.mb-guess summary b { color: #fff; font-family: var(--font-head); font-weight: 600; line-height: 1.55; }
.mb-guess-ch { font-size: .94rem; line-height: 1.8; color: #cfd4e0; }
.mb-guess-ch em { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-right: .3rem; border-radius: 50%; background: rgba(247, 197, 72, .18); color: var(--mb-gold); font-style: normal; font-size: .78rem; font-weight: 700; }
.mb-guess-cta { justify-self: start; margin-top: .2rem; padding: .3rem .8rem; border-radius: 999px; background: var(--mb-gold); color: #1a1406; font: 700 .8rem var(--font-head); }
.mb-guess[open] .mb-guess-cta { display: none; }
.mb-guess-a { padding: 0 1.2rem 1.1rem; color: #efe2bd; font-size: .98rem; line-height: 1.8; }

.mb-toy label b { color: #fff; font-family: var(--font-head); }
.mb-toy-msg { margin: .9rem 0 0; font-size: .95rem; line-height: 1.75; color: #dfe3ee; }
.mb-steps { margin: 0; padding-left: 1.3rem; display: grid; gap: .45rem; font-size: 1rem; line-height: 1.7; color: #dfe3ee; }
.mb-steps .big-inline, .mb-tool .big-inline { font-family: var(--font-head); font-size: 1.25rem; color: var(--mb-up); }
.mb-btns { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.mb-btns button, .mb-sort-btns button { min-height: 40px; padding: .5rem .85rem; border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px; background: rgba(6, 12, 24, .6); color: #e3e7f0; font: 600 .88rem var(--font-body); cursor: pointer; transition: .15s; }
.mb-btns button:hover, .mb-sort-btns button:hover { border-color: var(--mb-hub); color: #fff; }
.mb-btns button:active { transform: translateY(1px); }
.mb-btns button.ghost { background: none; color: #9ba1b3; }
.mb-toy .mb-bs-stack { transition: height .3s; }
.mb-toy .mb-bs-seg { transition: flex-grow .35s ease; }

.mb-sort { display: grid; gap: .55rem; }
.mb-sort-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem .8rem; align-items: center; padding: .7rem .9rem; border: 1px solid var(--mb-line); border-radius: 12px; background: rgba(255, 255, 255, .03); }
.mb-sort-q { color: #fff; font-weight: 600; }
.mb-sort-btns { display: flex; flex-wrap: wrap; gap: .35rem; }
.mb-sort-btns button { min-height: 36px; padding: .35rem .65rem; font-size: .82rem; }
.mb-sort-why { grid-column: 1 / -1; font-size: .86rem; line-height: 1.6; color: #aeb4c6; }
.mb-sort-why:empty { display: none; }
.mb-sort-row.is-right { border-color: rgba(77, 210, 160, .5); background: rgba(77, 210, 160, .07); }
.mb-sort-row.is-wrong { border-color: rgba(240, 133, 122, .5); background: rgba(240, 133, 122, .06); }
.mb-sort-row.is-right button.is-picked { border-color: var(--mb-up); background: rgba(77, 210, 160, .18); color: #fff; }
.mb-sort-row.is-wrong button.is-picked { border-color: var(--mb-down); background: rgba(240, 133, 122, .16); color: #fff; }

.mb-tag-real, .mb-tag-what { display: inline-block; margin-right: .35rem; padding: .05rem .5rem; border-radius: 999px; font: 700 .72rem var(--font-head); vertical-align: .1em; }
.mb-tag-real { background: rgba(77, 210, 160, .16); color: var(--mb-up); }
.mb-tag-what { background: rgba(247, 197, 72, .16); color: var(--mb-gold); }
.mb-fignotes { margin: .2rem 0 1.4rem; padding-left: 0; list-style: none; display: grid; gap: .35rem; font-size: .88rem; line-height: 1.7; color: #aeb4c6; }
.mb-fignotes b { color: #e8ebf3; }
.mb-more { margin: 1.2rem 0; border: 1px solid var(--mb-line); border-radius: 14px; background: rgba(255, 255, 255, .02); }
.mb-more > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem; padding: .9rem 1.1rem; cursor: pointer; color: #e8ebf3; font-weight: 600; list-style: none; }
.mb-more > summary::-webkit-details-marker { display: none; }
.mb-more > summary span { font-size: .78rem; font-weight: 400; color: #8f97ab; }
.mb-more[open] > summary { border-bottom: 1px solid var(--mb-line); }
.mb-more > :not(summary) { margin-left: 1.1rem; margin-right: 1.1rem; }
.mb-fignotes .mb-round { color: var(--mb-gold); }
.mb-bs-sec { flex: 0 0 auto; padding: .15rem .2rem; font: 700 .72rem var(--font-head); color: #9ba1b3; letter-spacing: .02em; }
.mb-bs-tall .mb-bs-stack { height: 560px; }
.mb-photo figcaption small { font-size: .7rem; }

@media (max-width: 760px) {
  .mb-tip { position: fixed; left: 12px; right: 12px; bottom: 16px; top: auto; width: auto; max-width: none; transform: none; font-size: .95rem; padding: .85rem 1rem; }
  .mb-sort-row { grid-template-columns: 1fr; }
  .mb-bs-tall .mb-bs-stack { height: 640px; }
  .mb-gloss { padding: 1rem; }
}

/* 🧰 lesson tools: under the TOC on wide screens, a card at the end of the lesson on phones */
.mb-tools ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .35rem; }
.mb-tools a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .55rem; padding: .55rem .7rem; border: 1px solid var(--mb-line); border-radius: 10px; background: rgba(255, 255, 255, .03); color: #cfd4e0; text-decoration: none; font-size: .86rem; line-height: 1.45; transition: .15s; }
.mb-tools a b { font-weight: 600; color: inherit; }
.mb-tools a i { font-style: normal; color: var(--mb-hub); }
.mb-tools a:hover, .mb-tools a:focus-visible { border-color: var(--mb-hub); color: #fff; background: color-mix(in srgb, var(--mb-hub) 10%, transparent); }
.mb-tools-side { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--mb-line); }
.mb-tools-side .mb-toc-k { display: block; }
.mb-tools-end { margin: 2.4rem 0 0; padding: 1.1rem 1.2rem 1.2rem; border: 1px solid color-mix(in srgb, var(--mb-hub) 35%, transparent); border-radius: 16px; background: color-mix(in srgb, var(--mb-hub) 7%, transparent); }
.mb-tools-end .mb-toc-k { display: block; margin: 0 0 .7rem; font: 700 .9rem 'Outfit', 'Mitr', sans-serif; color: var(--mb-hub); letter-spacing: .02em; }
.mb-tools-side { display: none; }
@media (min-width: 1100px) { .mb-tools-side { display: block; } .mb-tools-end { display: none; } }
@media (prefers-reduced-motion: reduce) { .mb *, .mb-photo-frame img { transition: none !important; animation: none !important; } }

/* technical lesson charts (2026-10-06) — SVG draws shapes only, labels live in HTML */
.te-chart { margin: .6rem 0; padding: .6rem; background: rgba(6,12,24,.6); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; }
.te-chart svg { display: block; width: 100%; height: 200px; }
.te-chart-real svg { height: 260px; }
@media (max-width: 760px) { .te-chart svg { height: 160px; } .te-chart-real svg { height: 200px; } }

/* options lesson (2026-10-09) — payoff toy: SVG draws the shape, labels are HTML tags on top */
.mb-btns button[aria-pressed="true"] { border-color: var(--mb-hub); background: color-mix(in srgb, var(--mb-hub) 20%, transparent); color: #fff; }
.op-pick { display: grid; gap: .1rem; }
.op-pick .mb-btns { margin-bottom: .6rem; }
.op-chart { margin: .6rem 0 0; padding: .6rem; background: rgba(6, 12, 24, .6); border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px; overflow: hidden; }
.op-plot { position: relative; }
.op-plot svg { display: block; width: 100%; height: 240px; }
.op-dot { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .22); pointer-events: none; }
.op-axis { display: flex; justify-content: space-between; margin-top: .3rem; font-size: .78rem; color: #8f97ab; font-variant-numeric: tabular-nums; }
.op-axis { position: relative; min-height: 1.3rem; }
.op-axis b { position: absolute; top: 0; transform: translateX(-50%); color: var(--mb-gold); font-weight: 600; white-space: nowrap; }
@media (max-width: 760px) { .op-plot svg { height: 200px; } }

/* Call and 0DTE: keep teaching groups distinct on the existing navy surface. */
.kr-article-mb:is(:has(#ca-start),:has(#zd-start)) :is(.mb-step,.mb-gloss-item,.mb-out,.mb-do li:not(.no)) { border-color: #405168; }

/* Give new macro cards visible boundaries on the dark lesson surface. */
.kr-article-mb:is(:has(#eg-start),:has(#es-start)) :is(.mb-step,.mb-gloss-item,.mb-out,.mb-do li:not(.no)){border-color:#405168}

.mb-hub-macro .mb-tool>label {display:block;margin-bottom:1rem}
.mb-hub-macro .mb-out {background:#0b1b2c;border:1px solid #637b93}
.mb-hub-macro .mb-calc-btn {display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.5rem .8rem;margin:.5rem 0;border:1px solid #637b93;border-radius:8px;background:#0b1b2c;color:#dfe3ee;font:600 .94rem var(--font-body);cursor:pointer}
.mb-hub-macro .mb-grid.three {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
@media(max-width:620px){.mb-hub-macro .mb-grid.three {grid-template-columns:1fr}}
.mb-hub-macro .mb-plot {border-color:#405168}

.mb-hub-macro .mb-yield-svg {display:block;width:100%;height:auto;max-width:560px;margin:.8rem auto}
.kr-article-mb:is(:has(#et-start),:has(#ey-start),:has(#ed-start)) :is(.mb-step,.mb-gloss-item,.mb-do li:not(.no)){border-color:#637b93}

.kr-article-mb:is(:has(#ecb-start),:has(#ead-start),:has(#eco-start)) :is(.mb-step,.mb-gloss-item,.mb-do li:not(.no)){border-color:#637b93}

.mb-hub-macro .mb-corr-scatter{display:block;width:100%;height:auto;max-width:200px;margin:.5rem auto}

.kr-article-mb:is(:has(#exf-start),:has(#ecm-start),:has(#ese-start)) :is(.mb-step,.mb-gloss-item,.mb-do li:not(.no)){border-color:#637b93}

.kr-article-mb:is(:has(#egf-start),:has(#etr-start),:has(#eth-start)) :is(.mb-step,.mb-gloss-item,.mb-do li:not(.no)){border-color:#637b93}

.kr-article-mb:is(:has(#edr-start),:has(#ecr-start),:has(#emt-start)) :is(.mb-step,.mb-gloss-item,.mb-do li:not(.no)){border-color:#637b93}

.kr-article-mb:has(#eyc-start) :is(.mb-step,.mb-gloss-item,.mb-do li:not(.no)){border-color:#637b93}

/* Macro starter vocabulary remains visible against the dark reading surface. */
.kr-article-mb:has(.mb-series a[href="/learn-node.html#ec_gdp"]) .mb-gloss-item{border-color:#637b93}
.kr-article-mb #eth-def > .mb-tip{border:1px solid #637b93;}

.kr-article-mb:is(:has(#sbk-start),:has(#sin-start)) :is(.mb-step,.mb-gloss-item,.mb-out,.mb-do li:not(.no)){border-color:#637b93}
#sbk-reset,#sin-reset{min-height:44px;min-width:44px}
.kr-article-mb:has(#aq-start) :is(.mb-step,.mb-gloss-item,.mb-out,.mb-do li:not(.no)){border-color:#637b93}
#aq-reset{min-width:44px;min-height:44px}
.kr-article-mb:has(#swc-start) :is(.mb-step,.mb-gloss-item,.mb-out,.mb-do li:not(.no)){border-color:#637b93}
#swc-reset{min-width:44px;min-height:44px;padding:.55rem .9rem;border:1px solid #8ba6c2;border-radius:10px;background:#142334;color:#f2f4fa;font:inherit;cursor:pointer}
#swc-reset:hover{background:#21374e}
#swc-reset:focus-visible{outline:3px solid #F7C548;outline-offset:3px}
.kr-article-mb:has(#srs-start) :is(.mb-step,.mb-gloss-item,.mb-out,.mb-do li:not(.no)){border-color:#637b93}
#srs-reset{min-width:44px;min-height:44px;padding:.55rem .9rem;border:1px solid #8ba6c2;border-radius:10px;background:#142334;color:#f2f4fa;font:inherit;cursor:pointer}
#srs-reset:hover{background:#21374e}
#srs-reset:focus-visible{outline:3px solid #F7C548;outline-offset:3px}
.kr-article-mb:is(:has(#sbm-start),:has(#sau-start)) :is(.mb-step,.mb-gloss-item,.mb-out,.mb-do li:not(.no)){border-color:#637b93}
#sbm-reset,#sau-reset{min-width:44px;min-height:44px;padding:.55rem .9rem;border:1px solid #8ba6c2;border-radius:10px;background:#142334;color:#f2f4fa;font:inherit;cursor:pointer}
#sbm-reset:hover,#sau-reset:hover{background:#21374e}
#sbm-reset:focus-visible,#sau-reset:focus-visible{outline:3px solid #F7C548;outline-offset:3px}
.kr-article-mb:is(:has(#srb-start),:has(#srw-start)) :is(.mb-step,.mb-gloss-item,.mb-out,.mb-do li:not(.no)){border-color:#637b93}
#srb-reset,#srw-reset{min-width:44px;min-height:44px;padding:.55rem .9rem;border:1px solid #8ba6c2;border-radius:10px;background:#142334;color:#f2f4fa;font:inherit;cursor:pointer}
#srb-reset:hover,#srw-reset:hover{background:#21374e}
#srb-reset:focus-visible,#srw-reset:focus-visible{outline:3px solid #F7C548;outline-offset:3px}
.kr-article-mb:is(:has(#sme-start),:has(#ag-what)) :is(.mb-step,.mb-gloss-item,.mb-out,.mb-do li:not(.no)){border-color:#637b93}
#sme-reset,#ag-reset{min-width:44px;min-height:44px;padding:.55rem .9rem;border:1px solid #8ba6c2;border-radius:10px;background:#142334;color:#f2f4fa;font:inherit;cursor:pointer}
#sme-reset:hover,#ag-reset:hover{background:#21374e}
#sme-reset:focus-visible,#ag-reset:focus-visible{outline:3px solid #F7C548;outline-offset:3px}
.kr-article-mb:is(:has(#ctl-start),:has(#cf-why)) :is(.mb-step,.mb-gloss-item,.mb-out,.mb-do li:not(.no)){border-color:#637b93}
#ctl-reset,#cf-reset{min-width:44px;min-height:44px;padding:.55rem .9rem;border:1px solid #8ba6c2;border-radius:10px;background:#142334;color:#f2f4fa;font:inherit;cursor:pointer}
#ctl-reset:hover,#cf-reset:hover{background:#21374e}
#ctl-reset:focus-visible,#cf-reset:focus-visible{outline:3px solid #F7C548;outline-offset:3px}
.kr-article-mb:is(:has(#eqm-start),:has(#sta-start)) :is(.mb-step,.mb-gloss-item,.mb-out,.mb-do li:not(.no)){border-color:#637b93}
#eqm-reset,#sta-reset{min-width:44px;min-height:44px;padding:.55rem .9rem;border:1px solid #8ba6c2;border-radius:10px;background:#142334;color:#f2f4fa;font:inherit;cursor:pointer}
#eqm-reset:hover,#sta-reset:hover{background:#21374e}
#eqm-reset:focus-visible,#sta-reset:focus-visible{outline:3px solid #F7C548;outline-offset:3px}
.kr-article-mb:is(:has(#at-why),:has(#sfn-start)) :is(.mb-step,.mb-gloss-item,.mb-out,.mb-do li:not(.no)){border-color:#637b93}
#at-reset,#sfn-reset{min-width:44px;min-height:44px;padding:.55rem .9rem;border:1px solid #8ba6c2;border-radius:10px;background:#142334;color:#f2f4fa;font:inherit;cursor:pointer}
#at-reset:hover,#sfn-reset:hover{background:#21374e}
#at-reset:focus-visible,#sfn-reset:focus-visible{outline:3px solid #F7C548;outline-offset:3px}
.kr-article-mb:is(:has(#is-what),:has(#bs-what)) :is(.mb-step,.mb-gloss-item,.mb-out,.mb-do li:not(.no)){border-color:#637b93}
#ise-reset,#bse-reset{min-width:44px;min-height:44px;padding:.55rem .9rem;border:1px solid #8ba6c2;border-radius:10px;background:#142334;color:#f2f4fa;font:inherit;cursor:pointer}
#ise-reset:hover,#bse-reset:hover{background:#21374e}
#ise-reset:focus-visible,#bse-reset:focus-visible{outline:3px solid #F7C548;outline-offset:3px}
.kr-article-mb:has(#rt-why) :is(.mb-step,.mb-gloss-item,.mb-out,.mb-do li:not(.no)){border-color:#637b93}
#rte-reset{min-width:44px;min-height:44px;padding:.55rem .9rem;border:1px solid #8ba6c2;border-radius:10px;background:#142334;color:#f2f4fa;font:inherit;cursor:pointer}
#rte-reset:hover{background:#21374e}
#rte-reset:focus-visible{outline:3px solid #F7C548;outline-offset:3px}