@charset "UTF-8";
/* ============================================================
   MIRADOKI DESIGN SYSTEM
   出典: login_stream24h_style.html / stream24h/style.css (WHITE POP THEME)
   役割: Bootstrap 5.3 の上に重ねて「見た目だけ」を新デザインへ置換する。
         既存 tpl のマークアップ構造(container / row / btn / form-control 等)を
         保ったまま適用できるよう、Bootstrap クラスへの上書きを含む。
   ============================================================ */

/* ------------------------------------------------------------
   1. デザイントークン
   ------------------------------------------------------------ */
:root {
  --cream: #fffdf7;
  --cream-2: #fff7df;
  --paper: rgba(255, 255, 255, .94);
  --ink: #53180e;
  --ink-2: #6a2112;
  --muted: #765d56;

  --orange: #ff6040;
  --orange-deep: #f45b20;
  --gold: #f59d24;
  --yellow: #f5ec43;
  --yellow-soft: #ffefad;
  --cyan: #68c5e0;
  --cyan-soft: #d9f4fa;
  --cyan-mid: #a5e4f2;

  --ok: #2f9e5f;
  --warn: #e0851b;
  --danger: #e0402a;

  --line: rgba(83, 24, 14, .19);
  --line-strong: rgba(83, 24, 14, .34);

  --radius-lg: 32px;
  --radius-md: 20px;
  --radius-sm: 12px;

  --shadow-cyan: 8px 9px 0 rgba(104, 197, 224, .42);
  --shadow-gold: 8px 9px 0 rgba(245, 157, 36, .34);
  --shadow-ink: 4px 5px 0 var(--ink);
  --shadow-ink-sm: 3px 4px 0 var(--ink);

  --header-h: 74px;
  --container: 1180px;

  --font: Inter, "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;

  --apple-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.37 1.43c0 1.14-.47 2.2-1.24 2.98-.9.9-2.05 1.42-3.08 1.34-.12-1.1.44-2.26 1.19-3 .84-.83 2.24-1.44 3.13-1.32zM20.5 17.1c-.5 1.14-.74 1.65-1.38 2.66-.9 1.4-2.16 3.15-3.73 3.16-1.39.01-1.75-.9-3.64-.89-1.89.01-2.28.91-3.67.9-1.57-.01-2.77-1.58-3.67-2.98-2.5-3.9-2.77-8.48-1.22-10.92 1.1-1.73 2.84-2.75 4.47-2.75 1.67 0 2.71.91 4.09.91 1.34 0 2.15-.91 4.08-.91 1.46 0 3 .79 4.1 2.16-3.6 1.97-3.02 7.1.57 8.66z'/%3E%3C/svg%3E");

  /* テーマ既定値(リスナー) */
  --accent: var(--cyan);
  --accent-soft: var(--cyan-soft);
  --accent-mid: var(--cyan-mid);
  --shadow-accent: var(--shadow-cyan);

  color-scheme: light;
}

/* リスナー系: シアンをアクセントに */
body.theme-listener {
  --accent: var(--cyan);
  --accent-soft: var(--cyan-soft);
  --accent-mid: var(--cyan-mid);
  --shadow-accent: var(--shadow-cyan);
}

/* 配信者系: ゴールド/オレンジをアクセントに */
body.theme-streamer {
  --accent: var(--gold);
  --accent-soft: var(--yellow-soft);
  --accent-mid: #ffd88a;
  --shadow-accent: var(--shadow-gold);
}

/* ------------------------------------------------------------
   2. ベース
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 20px); }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.8;
  /* 細かな水玉のテクスチャ + 斜めのストライプ + 色のにじみ を重ねて、
     装飾レイヤーが届かない中央部でも地の面が寂しくならないようにする */
  background:
    radial-gradient(circle, rgba(104, 197, 224, .16) 0 2px, transparent 2.6px) 0 0 / 26px 26px,
    repeating-linear-gradient(-38deg,
      rgba(245, 236, 67, .12) 0 3px, transparent 3px 26px),
    radial-gradient(circle at 12% 14%, rgba(104, 197, 224, .2), transparent 30rem),
    radial-gradient(circle at 88% 30%, rgba(245, 236, 67, .22), transparent 26rem),
    radial-gradient(circle at 8% 72%, rgba(255, 96, 64, .1), transparent 28rem),
    radial-gradient(circle at 94% 88%, rgba(104, 197, 224, .16), transparent 30rem),
    var(--cream);
  background-attachment: scroll, scroll, fixed, fixed, fixed, fixed, fixed;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.theme-streamer {
  background:
    radial-gradient(circle, rgba(245, 157, 36, .15) 0 2px, transparent 2.6px) 0 0 / 26px 26px,
    repeating-linear-gradient(-38deg,
      rgba(245, 236, 67, .14) 0 3px, transparent 3px 26px),
    radial-gradient(circle at 12% 14%, rgba(245, 157, 36, .2), transparent 30rem),
    radial-gradient(circle at 88% 30%, rgba(245, 236, 67, .24), transparent 26rem),
    radial-gradient(circle at 8% 72%, rgba(255, 96, 64, .12), transparent 28rem),
    radial-gradient(circle at 94% 88%, rgba(245, 157, 36, .16), transparent 30rem),
    var(--cream);
  background-attachment: scroll, scroll, fixed, fixed, fixed, fixed, fixed;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--orange-deep); }

img { max-width: 100%; }

button, input, select, textarea { font: inherit; }

::selection { color: var(--ink); background: var(--yellow); }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

h1, h2, h3, h4, h5 { font-weight: 900; letter-spacing: -.03em; line-height: 1.25; }

.text-muted { color: var(--muted) !important; }

hr { border-color: var(--line); opacity: 1; }

/* ------------------------------------------------------------
   3. サイトヘッダー(未ログイン系)
   ------------------------------------------------------------ */
.md-header {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, .9);
  border-bottom: 1px solid rgba(104, 197, 224, .18);
  box-shadow: 0 4px 0 rgba(104, 197, 224, .16);
  backdrop-filter: blur(14px);
}

body.theme-streamer .md-header {
  border-bottom-color: rgba(245, 157, 36, .22);
  box-shadow: 0 4px 0 rgba(245, 157, 36, .18);
}

.md-header-inner {
  width: min(var(--container), calc(100% - 40px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.md-brand { display: inline-flex; align-items: center; gap: 13px; }
.md-brand img { display: block; width: 138px; height: auto; }

.md-brand-tag {
  display: inline-flex;
  align-items: center;
  min-height: 29px;
  padding: 4px 12px;
  border: 2px solid var(--accent);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  font-size: .69rem;
  font-weight: 900;
  letter-spacing: .11em;
  line-height: 1;
  white-space: nowrap;
}

.md-header-actions { display: flex; align-items: center; gap: 10px; }

/* 戻る/サブ導線 */
.md-back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 18px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  background: var(--yellow);
  box-shadow: var(--shadow-ink-sm);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .08em;
  transition: transform .18s ease, box-shadow .18s ease;
}
.md-back-link:hover { color: var(--ink); transform: translate(-1px, -2px); box-shadow: 5px 6px 0 var(--ink); }
.md-back-link:active { transform: translate(2px, 3px); box-shadow: 1px 1px 0 var(--ink); }

/* ------------------------------------------------------------
   4. アプリナビ(ログイン後のグローバルナビ)
   ------------------------------------------------------------ */
.md-appnav {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, .92);
  border-bottom: 3px solid var(--ink);
  box-shadow: 0 5px 0 rgba(104, 197, 224, .28);
  backdrop-filter: blur(14px);
}
body.theme-streamer .md-appnav { box-shadow: 0 5px 0 rgba(245, 157, 36, .3); }

.md-appnav-inner {
  width: min(var(--container), calc(100% - 40px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
}

.md-appnav .md-brand img { width: 128px; }

.md-appnav-menu {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin-bottom: 0;
}

.md-appnav-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 62px;
  padding: 7px 10px;
  border: 2px solid transparent;
  border-radius: 14px;
  color: var(--ink);
  font-size: .63rem;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.2;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.md-appnav-link .md-appnav-icon { font-size: 1.35rem; line-height: 1; }
.md-appnav-link:hover { color: var(--ink); background: var(--accent-soft); transform: translateY(-2px); }
.md-appnav-link.is-active {
  border-color: var(--ink);
  background: var(--yellow);
  box-shadow: var(--shadow-ink-sm);
}

.md-appnav-user {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 14px 5px 5px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--shadow-ink-sm);
  font-size: .74rem;
  font-weight: 900;
}
.md-appnav-user img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  object-fit: cover;
  background: var(--cream-2);
}

/* ------------------------------------------------------------
   5. ページシェルと装飾
   ------------------------------------------------------------ */
.md-shell {
  --shell-pad: 20px;
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - var(--header-h) - 200px);
  padding: clamp(32px, 4.5vw, 64px) var(--shell-pad) 56px;
}

.md-container { width: min(var(--container), 100%); margin-inline: auto; }
.md-container-narrow { width: min(760px, 100%); margin-inline: auto; }
.md-container-form { width: min(560px, 100%); margin-inline: auto; }

.md-shape { position: absolute; z-index: -1; pointer-events: none; }
.md-shape-yellow {
  width: 112px; height: 38px; top: 26%; left: -36px;
  background: var(--yellow);
  border: 2px solid rgba(83, 24, 14, .18);
  transform: rotate(-12deg);
}
.md-shape-orange {
  width: 72px; height: 72px; right: 3vw; bottom: 94px;
  border: 12px solid rgba(255, 96, 64, .78);
  border-radius: 50%;
}

/* ------------------------------------------------------------
   5b. 背景装飾レイヤー
   stream24h の pop-background(放射する三角形 + ハーフトーンの水玉)を
   CSS で再現する。ビューポートではなく「ドキュメント全体」に敷くので、
   スクロールするたびに新しい装飾が現れる。位置は % 指定なので、
   短いページでは密に、長いページでは疎に自動で散る。
   build.py が全ページの <body> 直後に挿入する。
   ------------------------------------------------------------ */
body { position: relative; }

.md-decor {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.md-decor > span { position: absolute; }

/* --- r: 放射する三角形 --- */
.md-decor .r {
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  background: var(--yellow);
  opacity: .55;
}
.md-decor .r.cy { background: var(--cyan); opacity: .45; }

.r1  { top: 1%;  left: -7%;  width: 30vw; height: 8vw;   transform: rotate(21deg); }
.r2  { top: 0;   left: -4%;  width: 20vw; height: 4.6vw; transform: rotate(44deg); background: var(--cyan); opacity: .45; }
.r3  { top: 4%;  right: -6%; width: 27vw; height: 7.4vw; transform: rotate(159deg); transform-origin: 100% 50%; }
.r4  { top: 12%; right: -8%; width: 19vw; height: 4.4vw; transform: rotate(197deg); transform-origin: 100% 50%; background: var(--cyan); opacity: .42; }
.r5  { top: 24%; left: -9%;  width: 22vw; height: 5.6vw; transform: rotate(-7deg); background: var(--cyan); opacity: .38; }
.r6  { top: 37%; right: -7%; width: 17vw; height: 4.2vw; transform: rotate(184deg); transform-origin: 100% 50%; opacity: .5; }
.r7  { top: 49%; left: -8%;  width: 24vw; height: 6vw;   transform: rotate(15deg); opacity: .48; }
.r8  { top: 57%; right: -9%; width: 21vw; height: 5.2vw; transform: rotate(170deg); transform-origin: 100% 50%; background: var(--cyan); opacity: .4; }
.r9  { top: 68%; left: -6%;  width: 18vw; height: 4.4vw; transform: rotate(-18deg); background: var(--cyan); opacity: .4; }
.r10 { top: 76%; right: -6%; width: 25vw; height: 6.4vw; transform: rotate(-166deg); transform-origin: 100% 50%; opacity: .5; }
.r11 { bottom: 8%;  left: -8%; width: 26vw; height: 6.8vw; transform: rotate(-25deg); }
.r12 { bottom: 1%;  left: -4%; width: 18vw; height: 4.2vw; transform: rotate(-48deg); background: var(--cyan); opacity: .4; }
.r13 { bottom: 4%;  right: -7%; width: 27vw; height: 7vw;  transform: rotate(-158deg); transform-origin: 100% 50%; background: var(--cyan); opacity: .42; }
.r14 { bottom: 16%; right: -9%; width: 20vw; height: 5vw;  transform: rotate(-198deg); transform-origin: 100% 50%; }

/* --- d: ハーフトーンの水玉クラスタ --- */
.md-decor .d {
  background-image: radial-gradient(circle, currentColor 0 3.6px, transparent 4.2px);
  background-size: 22px 22px;
  color: var(--cyan);
  -webkit-mask-image: radial-gradient(ellipse at 28% 50%, #000 6%, transparent 70%);
  mask-image: radial-gradient(ellipse at 28% 50%, #000 6%, transparent 70%);
  opacity: .7;
}
.d1 { top: 0;     left: 3%;   width: 30vw; height: 14vw; transform: rotate(20deg); }
.d2 { top: 7%;    right: 0;   width: 27vw; height: 12vw; transform: rotate(-16deg); }
.d3 { top: 30%;   left: -2%;  width: 22vw; height: 10vw; transform: rotate(-8deg); color: var(--yellow); }
.d4 { top: 52%;   right: -1%; width: 24vw; height: 11vw; transform: rotate(13deg); color: var(--yellow); }
.d5 { top: 72%;   left: 0;    width: 23vw; height: 10vw; transform: rotate(17deg); }
.d6 { bottom: 3%; left: 2%;   width: 26vw; height: 12vw; transform: rotate(-14deg); }
.d7 { bottom: 9%; right: 2%;  width: 21vw; height: 10vw; transform: rotate(15deg); color: var(--yellow); }

/* --- o: リング --- */
.md-decor .o { border-radius: 50%; border: 11px solid rgba(255, 96, 64, .5); }
.o1 { top: 18%; right: 4vw;  width: 68px; height: 68px; }
.o2 { top: 44%; left: 3vw;   width: 44px; height: 44px; border-width: 8px; border-color: rgba(104,197,224,.55); }
.o3 { top: 66%; right: 6vw;  width: 52px; height: 52px; border-width: 9px; border-color: rgba(245,157,36,.45); }
.o4 { bottom: 22%; left: 5vw; width: 34px; height: 34px; border-width: 7px; border-color: rgba(255,96,64,.42); }

/* --- b: 塗りの円 --- */
.md-decor .b { border-radius: 50%; }
.b1 { top: -6vw;    right: 15vw; width: 19vw; height: 19vw; background: var(--yellow);    opacity: .3; }
.b2 { top: 46%;     left: -7vw;  width: 15vw; height: 15vw; background: var(--cyan-soft); opacity: .55; }
.b3 { bottom: -7vw; left: 24vw;  width: 16vw; height: 16vw; background: var(--cyan-soft); opacity: .5; }

/* --- s: 四芒星 --- */
.md-decor .s {
  width: 24px; height: 24px;
  background: var(--orange);
  opacity: .5;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}
.s1 { top: 14%; left: 6vw;  }
.s2 { top: 33%; right: 8vw; width: 18px; height: 18px; background: var(--gold); }
.s3 { top: 55%; left: 4vw;  width: 15px; height: 15px; background: var(--cyan); opacity: .65; }
.s4 { top: 71%; right: 5vw; width: 21px; height: 21px; background: var(--gold); }
.s5 { bottom: 26%; left: 9vw; width: 16px; height: 16px; background: var(--cyan); opacity: .6; }
.s6 { bottom: 12%; right: 11vw; width: 19px; height: 19px; }

/* --- z: 斜めのストライプ片 --- */
.md-decor .z {
  height: 30px;
  border: 2px solid rgba(83, 24, 14, .16);
  background: var(--yellow);
  opacity: .5;
}
.z1 { top: 27%;    left: -30px;  width: 104px; transform: rotate(-12deg); }
.z2 { top: 61%;    right: -34px; width: 92px;  transform: rotate(10deg); background: var(--cyan-soft); }
.z3 { bottom: 34%; left: -26px;  width: 86px;  transform: rotate(-8deg); background: var(--cyan-soft); }

/* 配信者テーマ: 寒色を暖色へ振り替える */
body.theme-streamer .md-decor .r.cy,
body.theme-streamer .r2, body.theme-streamer .r4, body.theme-streamer .r8,
body.theme-streamer .r9, body.theme-streamer .r12, body.theme-streamer .r13 { background: var(--gold); }
body.theme-streamer .d1, body.theme-streamer .d2,
body.theme-streamer .d5, body.theme-streamer .d6 { color: var(--gold); }
body.theme-streamer .o2 { border-color: rgba(245, 157, 36, .55); }
body.theme-streamer .b2, body.theme-streamer .b3 { background: var(--yellow-soft); }
body.theme-streamer .s3, body.theme-streamer .s5 { background: var(--orange); }
body.theme-streamer .z2, body.theme-streamer .z3 { background: var(--yellow-soft); }

/* 画面が狭いときは間引いて、本文の邪魔をしないようにする */
@media (max-width: 767px) {
  .r4, .r5, .r6, .r8, .r9, .r14,
  .d3, .d4, .d5,
  .o1, .o3, .b1,
  .s2, .s4, .s6,
  .z1, .z2, .z3 { display: none; }
  .md-decor .r { opacity: .32 !important; }
  .md-decor .d { opacity: .45 !important; }
}

/* ------------------------------------------------------------
   6. ページ見出し
   ------------------------------------------------------------ */
.md-pagehead { margin-bottom: clamp(22px, 3vw, 36px); }

.md-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  color: var(--orange-deep);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.md-eyebrow::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 5px rgba(255, 96, 64, .12);
}

.md-pagetitle {
  margin: 0;
  font-size: clamp(1.75rem, 3.4vw, 2.65rem);
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: 1.1;
}
.md-pagetitle .accent {
  color: transparent;
  background: linear-gradient(95deg, var(--orange), var(--gold) 68%, var(--yellow));
  background-clip: text;
  -webkit-background-clip: text;
  filter: drop-shadow(2px 2px 0 rgba(83, 24, 14, .11));
}

.md-pagelead {
  max-width: 46em;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: .93rem;
  font-weight: 600;
  line-height: 1.85;
}

/* セクション見出し */
.md-section { margin-block: clamp(28px, 4vw, 52px); }
.md-section:first-child { margin-top: 0; }

.md-section-title {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 16px;
  font-size: 1.08rem;
  font-weight: 900;
  letter-spacing: -.02em;
}
.md-section-title::before {
  content: "";
  width: 14px; height: 14px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--yellow);
  flex: none;
}
.md-section-title .md-count {
  margin-left: auto;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .06em;
}

/* 連番ラベル(01/02...) */
.md-step-label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .04em;
}
.md-step-label::before {
  content: attr(data-step);
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  color: #fff;
  background: var(--orange);
  font-size: .61rem;
  letter-spacing: .04em;
  flex: none;
}
.md-step-label.is-alt::before { color: var(--ink); background: var(--yellow); }

/* ------------------------------------------------------------
   7. カード / パネル
   ------------------------------------------------------------ */
.md-card {
  position: relative;
  padding: clamp(20px, 3vw, 32px);
  border: 3px solid var(--ink);
  border-radius: var(--radius-md);
  background: var(--paper);
  box-shadow: var(--shadow-accent);
}

.md-card-lg { border-radius: var(--radius-lg); padding: clamp(26px, 4vw, 44px); }

.md-card-flat {
  padding: clamp(16px, 2.4vw, 24px);
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: none;
}

.md-card-soft {
  padding: clamp(16px, 2.4vw, 24px);
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .6);
}

.md-card-title {
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: -.02em;
}

.md-card-note { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.75; }

/* カード右上のラベル */
.md-card-ribbon {
  position: absolute;
  top: -17px;
  right: 26px;
  padding: 7px 18px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--accent-soft);
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .18em;
}

/* 円形スタンプ */
.md-stamp {
  position: absolute;
  z-index: 4;
  right: 24px;
  top: 25px;
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  border: 3px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
  background: var(--yellow);
  box-shadow: 5px 6px 0 var(--orange);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .12em;
  line-height: 1.35;
  text-align: center;
  transform: rotate(9deg);
}
.md-stamp strong { display: block; font-size: 1.75rem; letter-spacing: -.04em; line-height: .9; }

/* ------------------------------------------------------------
   8. ボタン (Bootstrap .btn を上書き)
   ------------------------------------------------------------ */
.btn,
.md-btn {
  --bs-btn-focus-box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 9px 22px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  background: #fff;
  box-shadow: var(--shadow-ink-sm);
  font-size: .87rem;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.3;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn:hover,
.md-btn:hover { color: var(--ink); transform: translate(-1px, -2px); box-shadow: 5px 6px 0 var(--ink); }
.btn:active,
.md-btn:active { transform: translate(2px, 3px); box-shadow: 1px 1px 0 var(--ink); }

.btn-primary,
.md-btn-primary {
  color: var(--ink) !important;
  background: var(--yellow) !important;
  border-color: var(--ink) !important;
}
.btn-primary:hover,
.md-btn-primary:hover { background: #fff36a !important; border-color: var(--ink) !important; }

.btn-secondary,
.md-btn-ghost {
  color: var(--ink) !important;
  background: #fff !important;
  border-color: var(--ink) !important;
}

.btn-outline-primary {
  color: var(--ink) !important;
  background: var(--accent-soft) !important;
  border-color: var(--ink) !important;
}
.btn-outline-primary:hover { background: var(--accent-mid) !important; }

.btn-outline-light, .btn-light {
  color: var(--ink) !important;
  background: #fff !important;
  border-color: var(--ink) !important;
}

.btn-danger, .md-btn-danger {
  color: #fff !important;
  background: var(--danger) !important;
  border-color: var(--ink) !important;
}

.btn-success { color: #fff !important; background: var(--ok) !important; border-color: var(--ink) !important; }
.btn-warning { color: var(--ink) !important; background: var(--gold) !important; border-color: var(--ink) !important; }

/* 主要CTA(申し込み・購入・配信開始など) */
.md-btn-cta {
  min-height: 54px;
  padding: 12px 30px;
  color: var(--ink) !important;
  background: linear-gradient(110deg, #ff8b3d, var(--gold) 56%, var(--yellow)) !important;
  border-color: var(--ink) !important;
  box-shadow: var(--shadow-ink);
  font-size: .96rem;
}

.btn-sm, .md-btn-sm {
  min-height: 36px;
  padding: 5px 15px;
  border-radius: 999px;
  font-size: .76rem;
  box-shadow: 2px 3px 0 var(--ink);
}
.btn-sm:hover { box-shadow: 3px 4px 0 var(--ink); }

.btn-lg { min-height: 54px; padding: 12px 32px; font-size: 1rem; }

.btn-block, .md-btn-block { width: 100%; }

.btn:disabled, .btn.disabled, .md-btn.is-disabled {
  color: var(--muted) !important;
  background: #efe9e2 !important;
  border-color: var(--line-strong) !important;
  box-shadow: none;
  transform: none;
  opacity: 1;
  cursor: not-allowed;
}

/* SNS等の外部プロバイダボタン */
.md-provider {
  position: relative;
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 50px;
  border: 2px solid var(--ink);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: #fff;
  box-shadow: none;
  font-size: .86rem;
  font-weight: 900;
  transition: transform .16s ease, box-shadow .16s ease;
}
.md-provider:hover { color: var(--ink); transform: translateY(-2px); box-shadow: 0 4px 0 rgba(83, 24, 14, .2); }
.md-provider .md-provider-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, .95);
  transform: translateY(-50%);
  overflow: hidden;
  font-size: .74rem;
  font-weight: 900;
}
.md-provider .md-provider-icon img { width: 24px; height: 24px; object-fit: contain; }
.md-provider.is-line { background: #53d769; }
/* line_32.png は白抜きロゴ。既定の白いアイコン地の上では見えなくなるため、
   地を透過させてボタンの緑に白ロゴを乗せる */
.md-provider.is-line .md-provider-icon { background: transparent; }
.md-provider.is-yahoo { color: #fff; background: var(--orange); }
.md-provider.is-yahoo .md-provider-icon { color: #e60033; font-size: 1rem; letter-spacing: -.08em; }
.md-provider.is-apple { color: #fff; background: var(--ink); }
/* Apple はSDKがボタンを描画するため画像素材がない。
   アイコン枠が空の白い四角にならないよう、地を透過してマークを描く */
.md-provider.is-apple .md-provider-icon {
  color: #fff;
  background: transparent;
  font-size: 1rem;
}
.md-provider.is-apple .md-provider-icon:empty::before {
  content: "";
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--apple-mark) center / contain no-repeat;
  mask: var(--apple-mark) center / contain no-repeat;
}
.md-provider.is-google { border-color: var(--line); }

/* ------------------------------------------------------------
   9. フォーム
   ------------------------------------------------------------ */
.md-field { margin-bottom: 16px; }

.form-label, .md-label {
  display: block;
  margin: 0 0 7px;
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .02em;
}

/* .md-label の子孫に限定するとチェックボックスのラベル内で効かないため、
   バッジ単体で成立させる */
.md-req, .md-opt {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .08em;
  vertical-align: middle;
}
.md-req { color: #fff; background: var(--orange); }
.md-opt { color: var(--muted); background: transparent; border: 1px solid var(--line-strong); }

.form-control, .form-select, .md-input, textarea.form-control {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: #fff;
  box-shadow: none;
  outline: none;
  font-size: .92rem;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.form-control:focus, .form-select:focus, .md-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(104, 197, 224, .22);
  color: var(--ink);
  background: #fff;
}
body.theme-streamer .form-control:focus,
body.theme-streamer .form-select:focus,
body.theme-streamer .md-input:focus { box-shadow: 0 0 0 4px rgba(245, 157, 36, .22); }

.form-control::placeholder, .md-input::placeholder { color: rgba(118, 93, 86, .62); }

textarea.form-control { min-height: 120px; line-height: 1.7; }

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2353180e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 15px;
  padding-right: 40px;
  appearance: none;
}

.form-text, .md-help { color: var(--muted); font-size: .76rem; line-height: 1.65; }

.input-group { display: flex; align-items: stretch; }
.input-group > .form-control, .input-group > .form-select { border-radius: var(--radius-sm); }
.input-group > :not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -2px; }
.input-group > :not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

.input-group-text {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: var(--cream-2);
  font-size: .82rem;
  font-weight: 800;
  white-space: nowrap;
}

/* チェック / ラジオ */
.form-check { min-height: auto; padding-left: 0; margin-bottom: 8px; }
.form-check-input {
  width: 22px; height: 22px;
  margin: 0 9px 0 0;
  border: 2px solid var(--ink);
  background-color: #fff;
  vertical-align: -5px;
  cursor: pointer;
}
.form-check-input:checked { background-color: var(--orange); border-color: var(--ink); }
.form-check-input:focus { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(104, 197, 224, .25); }
.form-check-label { font-size: .88rem; font-weight: 700; cursor: pointer; }

/* 選択式カード(ラジオをカードで表現) */
.md-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.md-choice:hover { border-color: var(--accent); transform: translateY(-1px); }
.md-choice.is-selected {
  border-color: var(--ink);
  background: var(--yellow-soft);
  box-shadow: var(--shadow-ink-sm);
}

/* 区切り(OR) */
.md-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  margin: 24px 0 20px;
  color: var(--muted);
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .16em;
}
.md-divider::before, .md-divider::after {
  content: "";
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 13px);
}

/* ------------------------------------------------------------
   10. テーブル
   ------------------------------------------------------------ */
.md-table-wrap {
  overflow-x: auto;
  border: 3px solid var(--ink);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-accent);
}

.table, .md-table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--ink);
  font-size: .87rem;
  vertical-align: middle;
}

.table > thead th, .md-table > thead th {
  padding: 13px 16px;
  border-bottom: 3px solid var(--ink);
  color: var(--ink);
  background: var(--accent-soft);
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .08em;
  white-space: nowrap;
}

.table > tbody td, .md-table > tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  background: transparent;
  font-weight: 600;
}

.table > tbody th, .md-table > tbody th {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--cream-2);
  font-size: .82rem;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
  vertical-align: middle;
}

.table > tbody tr:last-child td, .md-table > tbody tr:last-child td,
.table > tbody tr:last-child th, .md-table > tbody tr:last-child th { border-bottom: none; }
.table > tbody tr:nth-child(even) td, .md-table > tbody tr:nth-child(even) td { background: rgba(255, 253, 247, .8); }
.table-hover > tbody tr:hover td { background: var(--cream-2); }

.md-num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* 金額の増減。Bootstrap の `.table > :not(caption) > * > *` が td へ直接 color を
   当ててくるため、詳細度で上回る形で書く */
.md-num-neg, .table > tbody > tr > td.md-num-neg, .table > tbody > tr > th.md-num-neg {
  color: var(--danger);
  font-weight: 900;
}
.md-num-pos, .table > tbody > tr > td.md-num-pos, .table > tbody > tr > th.md-num-pos {
  color: var(--ok);
  font-weight: 900;
}

/* ------------------------------------------------------------
   11. バッジ / チップ / ステータス
   ------------------------------------------------------------ */
.md-chip, .badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 4px 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  background: #fff;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .06em;
  white-space: nowrap;
}
.md-chip-yellow, .badge.bg-warning { background: var(--yellow); }
.md-chip-cyan, .badge.bg-info { background: var(--cyan-soft); }
.md-chip-orange, .badge.bg-danger { color: #fff; background: var(--orange); }
.md-chip-ink, .badge.bg-dark { color: var(--cream); background: var(--ink); }
.md-chip-green, .badge.bg-success { color: #fff; background: var(--ok); }
.md-chip-mute, .badge.bg-secondary { color: var(--muted); background: #f1ece6; border-color: var(--line-strong); }

/* 配信中バッジ(点滅ドット付き) */
.md-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 4px 13px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  color: #fff;
  background: var(--orange);
  font-size: .69rem;
  font-weight: 900;
  letter-spacing: .12em;
}
.md-live::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  animation: md-blink 1.4s ease-in-out infinite;
}
@keyframes md-blink { 50% { opacity: .25; } }

/* コイン表示 */
.md-coin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.md-coin img, .coin-icon { width: 22px; height: 22px; object-fit: contain; vertical-align: -4px; }

/* ------------------------------------------------------------
   12. リスト / メディア
   ------------------------------------------------------------ */
.md-list { display: grid; gap: 12px; padding: 0; margin: 0; list-style: none; }

.md-listitem {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.md-listitem:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-ink-sm); }
.md-listitem-body { flex: 1; min-width: 0; }
.md-listitem-title { margin: 0 0 2px; font-size: .93rem; font-weight: 900; }
.md-listitem-meta { margin: 0; color: var(--muted); font-size: .76rem; }

.md-thumb {
  flex: none;
  width: 76px; height: 76px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  object-fit: cover;
  background: var(--cream-2);
}
.md-thumb-wide { width: 132px; height: 76px; }

.md-avatar {
  flex: none;
  width: 46px; height: 46px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  object-fit: cover;
  background: var(--cream-2);
}
.md-avatar-lg { width: 84px; height: 84px; border-width: 3px; }

/* グリッド */
.md-grid { display: grid; gap: clamp(14px, 2vw, 22px); }
.md-grid-2 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.md-grid-3 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.md-grid-4 { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

/* 配信カード */
.md-streamcard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-accent);
  transition: transform .18s ease, box-shadow .18s ease;
}
.md-streamcard:hover { transform: translate(-2px, -3px); box-shadow: 11px 12px 0 rgba(104, 197, 224, .42); }
.md-streamcard-visual { position: relative; aspect-ratio: 16 / 9; background: var(--cream-2); }
.md-streamcard-visual img { width: 100%; height: 100%; object-fit: cover; }
.md-streamcard-visual .md-live,
.md-streamcard-visual .md-chip { position: absolute; top: 10px; left: 10px; }
.md-streamcard-body { padding: 15px 17px 18px; }
.md-streamcard-title {
  margin: 0 0 8px;
  font-size: .95rem;
  font-weight: 900;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.md-streamcard-meta { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: .77rem; font-weight: 700; }

/* 統計タイル */
.md-stats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.md-stat {
  padding: 16px 18px;
  border: 3px solid var(--ink);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-ink-sm);
}
.md-stat-label { margin: 0 0 4px; color: var(--muted); font-size: .71rem; font-weight: 900; letter-spacing: .1em; }
.md-stat-value { margin: 0; font-size: 1.7rem; font-weight: 900; letter-spacing: -.04em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.md-stat-value small { font-size: .8rem; font-weight: 800; }
.md-stat:nth-child(4n+1) { background: var(--yellow-soft); }
.md-stat:nth-child(4n+2) { background: var(--cyan-soft); }
.md-stat:nth-child(4n+3) { background: #ffe3d8; }

/* 図版（キャプション付き） */
.md-figure {
  margin: 0;
  padding: clamp(12px, 1.8vw, 18px);
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
}
.md-figure img { display: block; width: 100%; border-radius: var(--radius-sm); }
.md-figure figcaption {
  margin-top: 10px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.7;
  text-align: center;
}
.md-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }

/* 16:9 の埋め込み枠（YouTube 等） */
.md-video {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: var(--radius-md);
  background: var(--ink);
  box-shadow: var(--shadow-accent);
}
.md-video iframe, .md-video video { display: block; width: 100%; height: 100%; border: 0; }

/* 読み物向けの中間幅（1180 と 760 のあいだ） */
.md-container-mid { width: min(900px, 100%); margin-inline: auto; }

/* 本文テキスト（md-card-note より少し大きく濃い、読ませるための段落） */
.md-prose { margin: 0 0 14px; color: var(--ink-2); font-size: .9rem; font-weight: 600; line-height: 1.95; }
.md-prose:last-child { margin-bottom: 0; }

/* md-card-soft をリンクとして使うとき（既定は inline） */
a.md-card-soft, a.md-card-flat, a.md-card { display: block; color: inherit; }

/* ------------------------------------------------------------
   13. 通知 / 空状態
   ------------------------------------------------------------ */
/* テキストを分断しないよう flex ではなく position で組む
   (flex にすると日本語のテキストノードが個別のフレックスアイテムになり折り返しが壊れる) */
.md-alert, .alert {
  position: relative;
  padding: 14px 18px 14px 48px;
  border: 2px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--yellow-soft);
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.7;
}
.md-alert::before {
  content: "!";
  position: absolute;
  left: 16px;
  top: 15px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff;
  background: var(--orange);
  font-size: .75rem;
  font-weight: 900;
}
.md-alert-error, .alert-danger { background: #ffe1da; }
.md-alert-error::before { background: var(--danger); }
.md-alert-ok, .alert-success { background: #ddf3e5; }
.md-alert-ok::before { content: "✓"; background: var(--ok); }
.md-alert-info, .alert-info, .alert-primary { background: var(--cyan-soft); }
.md-alert-info::before { content: "i"; background: var(--cyan); }

.md-empty {
  display: grid;
  place-items: center;
  gap: 12px;
  padding: 46px 24px;
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .55);
  text-align: center;
}
.md-empty img { width: 96px; opacity: .85; }
.md-empty p { margin: 0; color: var(--muted); font-size: .87rem; font-weight: 700; }

/* ------------------------------------------------------------
   14. タブ / ページ送り
   ------------------------------------------------------------ */
.md-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0 0 20px;
  list-style: none;
}
.md-tab {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 7px 18px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  background: #fff;
  font-size: .8rem;
  font-weight: 900;
}
.md-tab.is-active { background: var(--yellow); box-shadow: var(--shadow-ink-sm); }

.md-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}
.md-pager-info { color: var(--muted); font-size: .78rem; font-weight: 900; letter-spacing: .06em; }

/* ------------------------------------------------------------
   15. マーキー
   ------------------------------------------------------------ */
.md-marquee {
  position: relative;
  z-index: 2;
  /* md-shell の左右パディング分だけ外へ広げて全幅にする。
     固定値にすると余白が変わるブレークポイントで横スクロールが出る */
  width: calc(100% + var(--shell-pad, 20px) * 2);
  margin: 56px calc(var(--shell-pad, 20px) * -1) 0;
  padding: 11px 0;
  color: var(--ink);
  background: var(--yellow);
  border-block: 2px solid var(--ink);
  overflow: hidden;
  transform: rotate(-1deg);
}
.md-marquee-track {
  display: flex;
  width: max-content;
  gap: 24px;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .16em;
  white-space: nowrap;
  animation: md-marquee 24s linear infinite;
}
.md-marquee-track span::after { content: "✦"; margin-left: 24px; color: var(--orange); }
@keyframes md-marquee { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------
   16. フッター
   ------------------------------------------------------------ */
.md-footer {
  position: relative;
  padding: 27px 20px 34px;
  color: var(--cream);
  background: var(--ink);
}
.md-footer-inner {
  width: min(var(--container), 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
}
.md-footer-links { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.md-footer-links a { color: var(--cream); font-size: .72rem; font-weight: 800; opacity: .78; }
.md-footer-links a:hover { color: var(--cream); opacity: 1; text-decoration: underline; }
.md-footer-logo { width: 240px; opacity: .95; }
.md-copyright { margin: 0; font-size: .67rem; font-weight: 800; letter-spacing: .08em; white-space: nowrap; opacity: .65; }

/* ------------------------------------------------------------
   17. 既存カスタムクラスの読み替え
   (tpl 側のマークアップを保ったまま新デザインを当てるための互換層)
   ------------------------------------------------------------ */
.wbox {
  padding: clamp(18px, 2.6vw, 26px);
  border: 3px solid var(--ink);
  border-radius: var(--radius-md);
  background: var(--paper);
  box-shadow: var(--shadow-accent);
}
.gr-box {
  padding: clamp(16px, 2.2vw, 22px);
  margin: 18px 0;
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
}
.section-card {
  padding: clamp(18px, 2.6vw, 26px);
  border: 3px solid var(--ink);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-ink-sm);
}
.status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 11px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  font-size: .69rem;
  font-weight: 900;
}
.page-header {
  margin-bottom: 14px;
  padding: 0 0 10px;
  border-bottom: 3px solid var(--ink);
  font-size: 1.05rem;
  font-weight: 900;
}
.page-body { margin: 0; }
.wbr { word-break: keep-all; overflow-wrap: break-word; }

/* ------------------------------------------------------------
   18. レスポンシブ
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .md-footer-inner { flex-direction: column; align-items: flex-start; }
  .md-copyright { white-space: normal; }
}

@media (max-width: 767px) {
  body { line-height: 1.75; }
  .md-shell { --shell-pad: 14px; padding: 26px var(--shell-pad) 40px; }
  .md-header-inner, .md-appnav-inner { width: min(100% - 26px, var(--container)); }
  .md-brand img { width: 112px; }
  .md-brand-tag { display: none; }
  .md-back-link { min-height: 38px; padding: 7px 14px; font-size: .66rem; }

  .md-appnav { min-height: 62px; }
  .md-appnav-menu { gap: 2px; }
  .md-appnav-link { min-width: 52px; padding: 6px 6px; font-size: .56rem; }
  .md-appnav-user { padding: 4px 10px 4px 4px; font-size: .68rem; }
  .md-appnav-user span { display: none; }

  .md-card, .wbox, .section-card { border-radius: 20px; box-shadow: 6px 7px 0 rgba(104, 197, 224, .38); }
  .md-card-lg { border-radius: 24px; padding: 28px 20px; }
  .md-stamp { width: 74px; height: 74px; right: 15px; top: 16px; font-size: .51rem; box-shadow: 4px 4px 0 var(--orange); }
  .md-stamp strong { font-size: 1.22rem; }

  .md-provider { padding-inline: 45px 18px; }
  .md-thumb { width: 62px; height: 62px; }
  .md-thumb-wide { width: 104px; height: 60px; }
  .md-table-wrap { border-radius: 16px; }
  .table, .md-table { font-size: .81rem; }
  .table > thead th, .table > tbody td { padding: 10px 12px; }
  .md-stat-value { font-size: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ------------------------------------------------------------
   19. 印刷
   ------------------------------------------------------------ */
@media print {
  .md-header, .md-appnav, .md-marquee, .md-shell::before, .md-shell::after { display: none !important; }
  body { background: #fff; }
}