/*!
 * media-core design system (ZM-110/111)
 * 規範: docs/design/reference.html(承認済みデザイン案A)
 *
 * サイト側のカスタマイズ:
 *   :root { --mc-accent:#B35900; --mc-accent-ink:#8F4700; --mc-accent-soft:#FBEEE0; }
 *   :root[data-theme="dark"], @media(prefers-color-scheme:dark) 側も同様に3変数を上書き。
 *   これだけでヘッダー・CTA・ロゴ・スパークライン等の配色が一括で変わる。
 */

/* ---- トークン(ライト既定) ---- */
:root {
  --mc-ground: #FFFFFF;
  --mc-paper: #FFFFFF;
  --mc-ink: #16283F;
  --mc-ink-2: #4A5A70;
  --mc-ink-3: #8494A7;
  --mc-line: #DCE3EA;
  --mc-accent: #0B7285;
  --mc-accent-ink: #095C6B;
  --mc-accent-soft: #E6F4F6;
  --mc-up: #C2255C;
  --mc-down: #2B8A3E;
  --mc-warn-bg: #FFF4E6;
  --mc-warn-ink: #B35C00;
  --mc-gold: #B8860B;
  --mc-gold-bg: #FFF7E0;
  --mc-bar-track: #EDF1F5;
  --mc-chip: #EDF1F5;
  --mc-shadow: 0 1px 2px rgba(22,40,63,.06), 0 8px 24px -12px rgba(22,40,63,.18);
  --mc-font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", sans-serif;
}

/* ---- ダーク(OS設定) ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --mc-ground: #0F1722;
    --mc-paper: #16202E;
    --mc-ink: #E8EEF5;
    --mc-ink-2: #A9B7C6;
    --mc-ink-3: #6E7E90;
    --mc-line: #263446;
    --mc-accent: #3BC9DB;
    --mc-accent-ink: #66D9E8;
    --mc-accent-soft: #12303A;
    --mc-up: #F783AC;
    --mc-down: #69DB7C;
    --mc-warn-bg: #3A2A12;
    --mc-warn-ink: #FFC078;
    --mc-gold: #E5B94E;
    --mc-gold-bg: #33270D;
    --mc-bar-track: #1E2A3A;
    --mc-chip: #1E2A3A;
    --mc-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.5);
  }
}

/* ---- 明示指定(data-theme が OS 設定より優先) ---- */
:root[data-theme="dark"] {
  --mc-ground: #0F1722;
  --mc-paper: #16202E;
  --mc-ink: #E8EEF5;
  --mc-ink-2: #A9B7C6;
  --mc-ink-3: #6E7E90;
  --mc-line: #263446;
  --mc-accent: #3BC9DB;
  --mc-accent-ink: #66D9E8;
  --mc-accent-soft: #12303A;
  --mc-up: #F783AC;
  --mc-down: #69DB7C;
  --mc-warn-bg: #3A2A12;
  --mc-warn-ink: #FFC078;
  --mc-gold: #E5B94E;
  --mc-gold-bg: #33270D;
  --mc-bar-track: #1E2A3A;
  --mc-chip: #1E2A3A;
  --mc-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.5);
}
:root[data-theme="light"] {
  --mc-ground: #FFFFFF;
  --mc-paper: #FFFFFF;
  --mc-ink: #16283F;
  --mc-ink-2: #4A5A70;
  --mc-ink-3: #8494A7;
  --mc-line: #DCE3EA;
  --mc-accent: #0B7285;
  --mc-accent-ink: #095C6B;
  --mc-accent-soft: #E6F4F6;
  --mc-up: #C2255C;
  --mc-down: #2B8A3E;
  --mc-warn-bg: #FFF4E6;
  --mc-warn-ink: #B35C00;
  --mc-gold: #B8860B;
  --mc-gold-bg: #FFF7E0;
  --mc-bar-track: #EDF1F5;
  --mc-chip: #EDF1F5;
  --mc-shadow: 0 1px 2px rgba(22,40,63,.06), 0 8px 24px -12px rgba(22,40,63,.18);
}

/* ---- ベース ---- */
*, *::before, *::after { box-sizing: border-box; }
body.mc-body {
  margin: 0;
  background: var(--mc-ground);
  color: var(--mc-ink);
  font-family: var(--mc-font);
  font-feature-settings: "palt";
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.mc-body a { color: inherit; text-decoration: none; }
.mc-wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.mc-num { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* ---- PR表記帯 ---- */
.mc-pr { background: var(--mc-chip); color: var(--mc-ink-2); font-size: 11px; padding: 6px 0; border-bottom: 1px solid var(--mc-line); }
.mc-pr .mc-wrap { display: flex; justify-content: space-between; gap: 12px; }

/* ---- ヘッダー ---- */
.mc-header { background: var(--mc-paper); border-bottom: 1px solid var(--mc-line); position: sticky; top: 0; z-index: 10; }
.mc-masthead { display: flex; align-items: center; gap: 28px; padding: 14px 0; }
.mc-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; letter-spacing: .01em; }
.mc-logo svg { flex: none; }
.mc-nav { display: flex; gap: 4px; margin-left: auto; font-size: 13.5px; font-weight: 600; }
.mc-nav a { padding: 8px 12px; border-radius: 6px; color: var(--mc-ink-2); }
.mc-nav a:hover, .mc-nav a:focus-visible { background: var(--mc-chip); color: var(--mc-ink); outline: none; }
.mc-nav a[aria-current] { color: var(--mc-accent-ink); background: var(--mc-accent-soft); }

/* ---- 更新ティッカー ---- */
.mc-ticker { border-bottom: 1px solid var(--mc-line); background: var(--mc-paper); }
.mc-ticker .mc-wrap { display: flex; gap: 18px; align-items: baseline; padding: 9px 20px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.mc-tk-label { font-size: 11px; font-weight: 800; color: var(--mc-accent-ink); letter-spacing: .08em; }
.mc-tk { font-size: 12.5px; color: var(--mc-ink-2); }
.mc-tk b { color: var(--mc-ink); font-weight: 700; }
.mc-tk .mc-delta-up { color: var(--mc-up); font-weight: 700; }
.mc-tk .mc-delta-down { color: var(--mc-down); font-weight: 700; }

/* ---- ヒーロー ---- */
.mc-hero { padding: 40px 0 28px; }
.mc-hero h1 { font-size: clamp(24px, 3.6vw, 34px); line-height: 1.35; margin: 0 0 10px; font-weight: 800; text-wrap: balance; }
.mc-hero h1 em { font-style: normal; color: var(--mc-accent-ink); background: linear-gradient(transparent 68%, var(--mc-accent-soft) 68%); }
.mc-hero .mc-lede { margin: 0; max-width: 36em; color: var(--mc-ink-2); font-size: 14.5px; }

/* ---- 調査時点バッジ ---- */
.mc-asof { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; padding: 6px 12px; border: 1px solid var(--mc-line); border-radius: 999px; background: var(--mc-paper); font-size: 12px; color: var(--mc-ink-2); }
.mc-asof .mc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mc-accent); animation: mc-pulse 2.4s infinite; }
@keyframes mc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .mc-asof .mc-dot { animation: none; } }

/* ---- セグメント切替 ---- */
.mc-segs { display: flex; gap: 8px; flex-wrap: wrap; margin: 22px 0 14px; }
.mc-seg { padding: 7px 14px; border-radius: 8px; border: 1px solid var(--mc-line); background: var(--mc-paper); font-size: 13px; font-weight: 600; color: var(--mc-ink-2); cursor: pointer; font-family: inherit; }
.mc-seg[aria-pressed="true"] { background: var(--mc-ink); color: var(--mc-paper); border-color: var(--mc-ink); }

/* ---- ランキングカード ---- */
.mc-rank-card { background: var(--mc-paper); border: 1px solid var(--mc-line); border-radius: 12px; box-shadow: var(--mc-shadow); overflow: hidden; margin-bottom: 36px; }
.mc-rank-head { display: flex; align-items: baseline; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--mc-line); }
.mc-rank-head h2 { margin: 0; font-size: 17px; font-weight: 800; }
.mc-rank-head .mc-cond { font-size: 12px; color: var(--mc-ink-3); }
.mc-rows { overflow-x: auto; }
table.mc-rank { width: 100%; border-collapse: collapse; min-width: 760px; }
table.mc-rank th { font-size: 11px; color: var(--mc-ink-3); font-weight: 700; letter-spacing: .06em; text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--mc-line); }
table.mc-rank td { padding: 16px 14px; border-bottom: 1px solid var(--mc-line); vertical-align: middle; }
tr.mc-row:hover { background: color-mix(in srgb, var(--mc-chip) 55%, transparent); }
.mc-pos { font-weight: 800; font-size: 15px; color: var(--mc-ink-3); width: 2em; }
tr.mc-row:first-child .mc-pos { color: var(--mc-accent-ink); }
.mc-prov { font-weight: 700; font-size: 15px; }
.mc-prov small { display: block; font-weight: 500; color: var(--mc-ink-3); font-size: 11.5px; margin-top: 2px; }
.mc-price { white-space: nowrap; }
.mc-price .mc-yen { font-size: 24px; font-weight: 800; }
.mc-price .mc-unit { font-size: 11.5px; color: var(--mc-ink-3); margin-left: 2px; }
.mc-price .mc-basis { display: block; font-size: 11px; color: var(--mc-ink-3); }
.mc-cb { white-space: nowrap; font-size: 13px; }
.mc-cb b { font-size: 15px; }
.mc-chip-badge { display: inline-block; margin-left: 6px; font-size: 10.5px; padding: 2px 7px; border-radius: 999px; background: var(--mc-chip); color: var(--mc-ink-2); }
.mc-chip-badge.mc-warn { background: var(--mc-warn-bg); color: var(--mc-warn-ink); }
.mc-spark { display: block; }
.mc-delta { font-size: 11.5px; font-weight: 700; }
.mc-delta.mc-up { color: var(--mc-up); }
.mc-delta.mc-down { color: var(--mc-down); }
.mc-foot-note { padding: 12px 22px; font-size: 11.5px; color: var(--mc-ink-3); background: color-mix(in srgb, var(--mc-chip) 45%, transparent); }
details.mc-breakdown { font-size: 12px; color: var(--mc-ink-2); margin-top: 6px; white-space: normal; }
details.mc-breakdown summary { cursor: pointer; color: var(--mc-accent-ink); font-weight: 600; list-style: none; }
details.mc-breakdown summary::before { content: "▸ "; }
details[open].mc-breakdown summary::before { content: "▾ "; }
details.mc-breakdown > div { margin-top: 6px; padding: 10px 12px; background: var(--mc-chip); border-radius: 8px; line-height: 1.8; }

/* ---- CTA ---- */
.mc-cta { display: inline-block; padding: 11px 20px; border-radius: 9px; background: var(--mc-accent); color: #fff; font-size: 14px; font-weight: 800; white-space: nowrap; border: 1px solid transparent; }
.mc-cta:hover, .mc-cta:focus-visible { background: var(--mc-accent-ink); color: #fff; outline: none; }
:root[data-theme="dark"] .mc-cta { color: #fff; }
.mc-cta.mc-sub { background: transparent; color: var(--mc-accent-ink); border: 1px solid var(--mc-line); }
.mc-cta.mc-sub:hover, .mc-cta.mc-sub:focus-visible { background: var(--mc-accent-soft); color: var(--mc-accent-ink); }

/* ---- パネル / 2カラム ---- */
.mc-two-col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; margin-bottom: 48px; }
@media (max-width: 840px) { .mc-two-col { grid-template-columns: 1fr; } }
.mc-panel { background: var(--mc-paper); border: 1px solid var(--mc-line); border-radius: 12px; box-shadow: var(--mc-shadow); padding: 20px 22px; }
.mc-panel h3 { margin: 0 0 4px; font-size: 15.5px; font-weight: 800; }
.mc-panel .mc-sub { font-size: 12px; color: var(--mc-ink-3); margin-bottom: 14px; }

/* ---- 履歴リスト ---- */
.mc-hist { list-style: none; margin: 0; padding: 0; }
.mc-hist li { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--mc-line); font-size: 13px; align-items: baseline; }
.mc-hist li:last-child { border-bottom: none; }
.mc-hist time { flex: none; font-size: 11.5px; color: var(--mc-ink-3); width: 5.2em; }
.mc-hist .mc-chg-up { color: var(--mc-up); font-weight: 700; }
.mc-hist .mc-chg-down { color: var(--mc-down); font-weight: 700; }

/* ---- 乗換ペア行 ---- */
.mc-pair { display: flex; flex-direction: column; gap: 10px; }
.mc-pair-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--mc-line); border-radius: 10px; font-size: 13.5px; background: color-mix(in srgb, var(--mc-chip) 45%, transparent); }
.mc-pair-row .mc-arrow { color: var(--mc-ink-3); }
.mc-pair-row b.mc-save { margin-left: auto; color: var(--mc-down); font-size: 15px; white-space: nowrap; }
.mc-pair-row b.mc-save small { font-weight: 500; color: var(--mc-ink-3); font-size: 10.5px; display: block; text-align: right; }

/* ==== A2 部品(ZM-119) ==== */

/* ---- ヒーロー(2カラム: 本文 + アート) ---- */
.mc-hero-grid { padding: 34px 0 10px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; align-items: center; }
@media (max-width: 760px) { .mc-hero-grid { grid-template-columns: 1fr; } .mc-hero-art { display: none; } }
.mc-hero-grid h1 { font-size: clamp(23px, 3.4vw, 32px); line-height: 1.35; margin: 0 0 10px; font-weight: 800; text-wrap: balance; }
.mc-hero-grid h1 em { font-style: normal; color: var(--mc-accent-ink); background: linear-gradient(transparent 68%, var(--mc-accent-soft) 68%); }
.mc-hero-grid .mc-lede { margin: 0; max-width: 34em; color: var(--mc-ink-2); font-size: 14px; }
.mc-hero-art svg { width: 100%; height: auto; display: block; }

/* ---- クイック導線 ---- */
.mc-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 22px 0 30px; }
@media (max-width: 760px) { .mc-quick { grid-template-columns: repeat(2, 1fr); } }
.mc-q-card { display: flex; align-items: center; gap: 12px; background: var(--mc-paper); border: 1px solid var(--mc-line); border-radius: 12px; padding: 14px; box-shadow: var(--mc-shadow); font-weight: 700; font-size: 13.5px; }
.mc-q-card:hover, .mc-q-card:focus-visible { border-color: var(--mc-accent); outline: none; }
.mc-q-ico { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--mc-accent-soft); display: grid; place-items: center; }
.mc-q-card small { display: block; font-weight: 500; color: var(--mc-ink-3); font-size: 11px; }

/* ---- セクション見出し ---- */
.mc-sec-head { display: flex; align-items: baseline; gap: 14px; margin: 8px 0 14px; }
.mc-sec-head h2 { margin: 0; font-size: 19px; font-weight: 800; }
.mc-sec-head .mc-cond { font-size: 12px; color: var(--mc-ink-3); }

/* ---- ランキングカード(A2 カード型) ---- */
.mc-rank-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.mc-r-card { position: relative; display: grid; grid-template-columns: 64px 200px 1fr auto; gap: 18px; align-items: center; background: var(--mc-paper); border: 1px solid var(--mc-line); border-radius: 14px; padding: 20px 22px; box-shadow: var(--mc-shadow); }
@media (max-width: 860px) {
  .mc-r-card { grid-template-columns: 48px 1fr; grid-template-areas: "m brand" "m body" "m side"; }
  .mc-r-medal { grid-area: m; } .mc-r-brand { grid-area: brand; } .mc-r-body { grid-area: body; } .mc-r-side { grid-area: side; justify-items: start; }
}
.mc-r-card.mc-first { border-color: color-mix(in srgb, var(--mc-gold) 45%, var(--mc-line)); }
.mc-ribbon { position: absolute; top: -11px; left: 18px; background: var(--mc-gold); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .06em; padding: 3px 12px; border-radius: 999px; }
.mc-r-medal { display: grid; place-items: center; }
.mc-medal { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 20px; color: #fff; background: var(--mc-ink-3); }
.mc-medal.mc-m1 { background: radial-gradient(circle at 30% 25%, #F5D061, var(--mc-gold)); box-shadow: 0 2px 8px rgba(184,134,11,.45); }
.mc-medal.mc-m2 { background: radial-gradient(circle at 30% 25%, #D7DEE6, #9AA7B4); }
.mc-medal.mc-m3 { background: radial-gradient(circle at 30% 25%, #E2B08B, #B0724A); }
.mc-medal small { font-size: 9px; display: block; line-height: 1; margin-top: 1px; font-weight: 600; }

/* ---- ブランドプレート ---- */
.mc-brandplate { display: flex; flex-direction: column; gap: 8px; }
.mc-bp { display: inline-flex; align-items: center; justify-content: center; height: 46px; border-radius: 8px; font-weight: 800; font-size: 17px; letter-spacing: .02em; color: #fff; padding: 0 14px; background: var(--mc-ink-3); }
.mc-bp img { max-height: 30px; max-width: 140px; display: block; }
.mc-bp.mc-mini { height: 30px; border-radius: 6px; font-size: 12px; padding: 0 9px; font-weight: 700; }

/* ---- 特徴チップ ---- */
.mc-feat { display: flex; flex-wrap: wrap; gap: 5px; }
.mc-f-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: var(--mc-chip); color: var(--mc-ink-2); }

/* ---- 価格ブロック / 相対バー ---- */
.mc-r-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mc-pricebar { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.mc-p-big { white-space: nowrap; }
.mc-p-big .mc-lbl { font-size: 11px; color: var(--mc-ink-3); display: block; font-weight: 700; }
.mc-p-big .mc-yen { font-size: 32px; font-weight: 800; color: var(--mc-accent-ink); }
.mc-p-big .mc-unit { font-size: 12px; color: var(--mc-ink-3); }
.mc-bar { flex: 1 1 220px; min-width: 180px; }
.mc-bar .mc-track { height: 14px; border-radius: 7px; background: var(--mc-bar-track); overflow: hidden; display: block; }
.mc-bar .mc-fill { height: 100%; border-radius: 7px; background: linear-gradient(90deg, var(--mc-accent), color-mix(in srgb, var(--mc-accent) 55%, var(--mc-accent-soft))); display: block; }
.mc-bar .mc-scale { display: flex; justify-content: space-between; font-size: 10px; color: var(--mc-ink-3); margin-top: 3px; }
.mc-cbline { display: flex; align-items: center; gap: 10px; font-size: 13px; flex-wrap: wrap; }
.mc-cbline .mc-cb-amount { font-weight: 800; font-size: 16px; }
.mc-cbline .mc-cond-chip { font-size: 10.5px; padding: 2px 8px; border-radius: 999px; background: var(--mc-accent-soft); color: var(--mc-accent-ink); font-weight: 700; }
.mc-cbline .mc-delta { font-size: 11.5px; font-weight: 700; }
.mc-cbline .mc-delta.mc-flat { color: var(--mc-ink-3); }

/* ---- カード右側(スパーク+CTA) ---- */
.mc-r-side { display: grid; gap: 8px; justify-items: stretch; text-align: center; }
.mc-spark-cap { font-size: 10.5px; color: var(--mc-ink-3); }
.mc-note { font-size: 11.5px; color: var(--mc-ink-3); margin: 10px 0 40px; }

/* ---- フッター ---- */
.mc-footer { border-top: 1px solid var(--mc-line); background: var(--mc-paper); margin-top: 20px; }
.mc-foot { display: flex; flex-wrap: wrap; gap: 8px 26px; padding: 26px 0; font-size: 12.5px; color: var(--mc-ink-2); }
.mc-copyright { padding: 0 0 26px; font-size: 11.5px; color: var(--mc-ink-3); }