/**
 * UmamusumeWiki.com — 本番用スタイルシート (Production CSS)
 * ----------------------------------------------------------------------------
 * ・カラーパレット：Light (芝生＆土 × オフホワイト) ⇄ Dark (#0B1320 × #5BC0BE × #39FF14)
 * ・角丸ルール：親パネル・モーダル外枠 (12px〜14px) ／ 内部カード・枠・バッジ (0px) ／ ボタン類 (999px)
 * ・!important 不使用（セレクタ設計を整理済み）
 */
/* ============================================================================
       1. カラーパレット定義（ユッキー承認済み Light ⇄ Dark）
       ============================================================================ */
    :root {
      --bg: #F6F4F3;               /* 全体背景（オフホワイト） */
      --surface: #FFFFFF;          /* 親パネル面（純白） */
      --surface-alt: #EEF3EF;      /* 内部カード・テーブル背景 */
      --surface-turf: #E6F0DC;     /* 若草ミスト強調背景 */
      --border: #A6BEB0;           /* 内部境界線 */
      --border-strong: #85A392;    /* 主要枠線 */
      --text: #303030;             /* 本文・見出しチャコール */
      --text-heading: #003300;     /* 大見出しディープグリーン */
      --text-muted: #5D7563;       /* 補足セージグレー */
      --brand: #1F7A1F;            /* メイン芝生グリーン */
      --brand-deep: #003300;       /* ディープグリーン */
      --brand-light: #55883B;      /* ターフリーフ */
      --brand-soft: #C1E899;       /* ライムハイライト */
      --brand-bg: #E6F0DC;
      --brand-border: #85A392;
      --earth: #9A6735;            /* ダート・土ブラウン */
      --earth-deep: #663300;       /* ディープダートブラウン */
      --accent: #0284C7;
      --ad-bg: #FAF6F0;
      --ad-border: #85A392;
      --ad-text: #5D7563;
      --panel-top-line: #1F7A1F;   /* Darkと同じく1色（芝生グリーン #1F7A1F）に統一！上の茶色を撤去 */
      --panel-shadow: 0 6px 20px rgba(0, 51, 0, 0.06);
    }

    /* Dark Mode（全体背景 #0B1320、親パネル #0D1B2A、内部カード #1B263B / #1C2541、装飾 #5BC0BE、1点強調 #39FF14） */
    .viewport.theme-dark {
      --bg: #0B1320;               /* 全体背景（深淵ミッドナイトブルー） */
      --surface: #0D1B2A;          /* 親パネル面（ダークネイビー） */
      --surface-alt: #1B263B;      /* 内部カード面（スレートネイビー） */
      --surface-turf: #1C2541;     /* 強調ブロック面 */
      --border: #2F3E46;           /* 境界線（ダークスレート） */
      --border-strong: #5BC0BE;    /* サイバーティール枠線 */
      --text: #E0E1DD;             /* 本文プラチナホワイト */
      --text-heading: #FFFFFF;     /* 見出し純白 */
      --text-muted: #94A8B3;       /* 補足クールシルバー */
      --brand: #5BC0BE;            /* ダーク時のメインアクセントは上品なサイバーティール */
      --brand-deep: #0B1320;
      --brand-light: #39FF14;      /* ここぞの1点強調ネオン */
      --brand-soft: #1F7A1F;
      --brand-bg: #1C2541;
      --brand-border: #5BC0BE;
      --earth: #5BC0BE;
      --earth-deep: #2F3E46;
      --accent: #5BC0BE;
      --ad-bg: #141E30;
      --ad-border: #2F3E46;
      --ad-text: #94A8B3;
      --panel-top-line: #5BC0BE;
      --panel-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
    }

    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #141619;
      color: var(--text);
      line-height: 1.5;
    }
    h1, h2, h3, .brand-name, .panel-title {
      font-family: 'Outfit', 'Inter', sans-serif;
      letter-spacing: -0.01em;
    }

    /* SVGアイコン共通クラス */
    .ui-icon {
      width: 16px;
      height: 16px;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: square;
      stroke-linejoin: miter;
      fill: none;
      vertical-align: -3px;
      flex-shrink: 0;
      display: inline-block;
    }
    .ui-icon-lg {
      width: 22px;
      height: 22px;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: square;
      stroke-linejoin: miter;
      fill: none;
      display: inline-block;
    }

    /* ==================== 1. オーナー確認用トップツールバー ==================== */
    .owner-bar {
      position: sticky;
      top: 0;
      z-index: 2000;
      background: #090d16;
      color: #f8fafc;
      padding: 10px 20px;
      border-bottom: 2px solid #55883B;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      font-size: 12px;
    }
    .owner-bar-left {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 800;
    }
    .owner-pill {
      background: #C1E899;
      color: #003300;
      padding: 2px 10px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 900;
    }
    .owner-controls {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
    }

    /* ★ ルール適用：押わせるボタン類は「角丸ピル型 (999px)」にして視覚的に目立たせる */
    .ctrl-btn {
      background: var(--surface-alt);
      color: var(--text);
      border: 1.5px solid var(--border-strong);
      padding: 6px 14px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
      transition: 0.15s;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .owner-bar .ctrl-btn {
      background: #1B263B;
      color: #E0E1DD;
      border-color: #2F3E46;
    }
    .ctrl-btn:hover {
      border-color: var(--brand);
      background: var(--brand-bg);
    }
    .ctrl-btn.active {
      background: var(--brand);
      color: #FFFFFF;
      border-color: var(--brand-deep);
      font-weight: 900;
    }
    .viewport.theme-dark .ctrl-btn.active {
      background: #5BC0BE;
      color: #0B1320;
      border-color: #5BC0BE;
    }

    /* SEO タグ可視化バッジ (H1 / H2 / H3) — 内部ラベルなので角0px */
    .seo-tag {
      display: inline-block;
      font-family: monospace;
      font-size: 10px;
      font-weight: 900;
      padding: 1px 5px;
      border-radius: 0px;
      margin-right: 6px;
      vertical-align: middle;
    }
    .seo-h1 { background: #9A6735; color: #fff; }
    .seo-h2 { background: #1F7A1F; color: #fff; }
    .seo-h3 { background: #5D7563; color: #fff; }
    .hide-seo .seo-tag { display: none; }

    /* ==================== 2. ビューポート枠（全体背景 #F6F4F3 ⇄ #0B1320） ==================== */
    .stage {
      padding: 20px 12px 60px;
      display: flex;
      justify-content: center;
    }
    .viewport {
      background-color: var(--bg);
      color: var(--text);
      width: 1280px;
      max-width: 100%;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 25px 60px rgba(0,0,0,0.65);
      border: 2px solid #3f3f46;
      transition: width 0.25s ease, background-color 0.2s ease;
    }
    .viewport.sp {
      width: 390px;
      border: 8px solid #27272a;
      border-radius: 30px;
    }

    /* ==================== 3. サイト共通ヘッダー & グローバルナビ ==================== */
    .wiki-header {
      background-color: var(--surface);
      border-bottom: 2px solid var(--border);
      border-top: 4px solid var(--brand);
      position: sticky;
      top: 0;
      z-index: 100;
    }
    .wiki-header-top {
      padding: 12px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      border-bottom: 1px solid var(--border);
    }
    .sp .wiki-header-top {
      flex-direction: column;
      align-items: stretch;
      padding: 10px 14px;
      gap: 10px;
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      text-decoration: none;
      color: inherit;
    }
    /* 内部ロゴ枠：シャープな角 (0px) */
    .brand-logo {
      width: 46px;
      height: 46px;
      border: none;
      background: transparent;
      padding: 0;
      object-fit: contain;
      display: block;
    }
    .brand-name {
      font-size: 21px;
      font-weight: 900;
      letter-spacing: -0.02em;
      color: var(--text-heading);
    }
    .brand-name span { color: var(--brand); }
    .viewport.theme-dark .brand-name span { color: #39FF14; }
    .brand-sub {
      font-size: 11px;
      color: var(--text-muted);
      font-weight: 600;
    }
    .header-search-wrap {
      flex: 1;
      max-width: 420px;
      position: relative;
    }
    .sp .header-search-wrap { max-width: 100%; }
    /* 入力欄：シャープな角 (0px) */
    .header-search {
      width: 100%;
      padding: 9px 14px 9px 36px;
      border-radius: 0px;
      border: 1.5px solid var(--border-strong);
      background: var(--surface-alt);
      font-size: 13px;
      color: var(--text);
    }
    .header-search-icon {
      position: absolute;
      left: 11px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-muted);
      display: flex;
      align-items: center;
    }
    /* トグル外枠はピル型 (999px) */
    .server-toggle {
      display: inline-flex;
      background: var(--surface-alt);
      padding: 3px;
      border-radius: 999px;
      border: 1.5px solid var(--border-strong);
      font-size: 11px;
      font-weight: 800;
    }
    .srv-btn {
      padding: 5px 12px;
      border-radius: 999px;
      border: none;
      background: transparent;
      color: var(--text-muted);
      cursor: pointer;
      font-weight: 800;
      font-size: 11px;
    }
    .srv-btn.active {
      background: var(--brand);
      color: #FFFFFF;
    }
    .viewport.theme-dark .srv-btn.active {
      background: #5BC0BE;
      color: #0B1320;
    }

    /* グローバルナビ：横スクロールバー（スライダー）を完全廃止し、大きめアイコン＋コンパクト文字のグリッドで余裕をもって収める */
    .wiki-nav {
      display: grid;
      grid-template-columns: repeat(9, minmax(0, 1fr));
      gap: 4px;
      padding: 4px 20px 0;
      background: var(--surface);
      overflow: visible;
    }
    .nav-tab {
      padding: 8px 6px 9px;
      font-size: 11px;
      font-weight: 800;
      line-height: 1.2;
      color: var(--text-muted);
      text-align: center;
      text-decoration: none;
      border-bottom: 3px solid transparent;
      cursor: pointer;
      transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      min-width: 0;
    }
    .nav-tab .ui-icon {
      width: 20px;
      height: 20px;
      stroke-width: 2;
      vertical-align: middle;
    }
    .nav-tab span {
      display: block;
      max-width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .nav-tab:hover {
      color: var(--text-heading);
      background: var(--surface-alt);
    }
    .nav-tab.active {
      color: var(--brand);
      border-bottom-color: var(--brand);
      background: var(--brand-bg);
    }
    .nav-tab.deck-special {
      color: var(--earth-deep);
      background: var(--surface-turf);
    }
    .viewport.theme-dark .nav-tab.deck-special {
      color: #39FF14;
      background: var(--surface-turf);
    }
    .nav-tab.deck-special.active {
      color: var(--brand-deep);
      border-bottom-color: var(--earth);
      background: var(--surface-turf);
    }
    .viewport.theme-dark .nav-tab.deck-special.active {
      color: #39FF14;
      border-bottom-color: #39FF14;
      background: rgba(57, 255, 20, 0.1);
    }
    /* ブレイクポイント対応：中画面(1080px以下)ではパツパツにならないよう2段グリッドへ自動折り返し */
    @media (max-width: 1080px) {
      .wiki-nav {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        padding: 4px 14px 0;
      }
    }
    /* スマホ表示(.sp プレビューおよび 640px以下)では3列×3段でスライドなしにすっきり収める */
    .sp .wiki-nav {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      padding: 4px 8px 0;
      gap: 2px;
    }
    @media (max-width: 640px) {
      .wiki-nav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 4px 8px 0;
        gap: 2px;
      }
    }

    /* ==================== 4. 広告枠 (内部要素なのでシャープな角 0px ＋ 絵文字なし) ==================== */
    .ad-slot {
      background: var(--ad-bg);
      border: 1.5px dashed var(--ad-border);
      color: var(--ad-text);
      border-radius: 0px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-weight: 800;
      font-size: 12px;
      padding: 8px;
      letter-spacing: 0.02em;
    }
    .ad-slot small {
      font-size: 11px;
      font-weight: 600;
      color: var(--text-muted);
      margin-top: 2px;
    }

    .native-ad-card {
      background: var(--ad-bg);
      border: 1.5px dashed var(--ad-border);
      border-radius: 0px;
      padding: 12px;
      display: flex;
      align-items: center;
      gap: 14px;
      min-width: 0;
      color: var(--ad-text);
    }
    .native-ad-icon {
      width: 58px;
      height: 58px;
      border-radius: 0px;
      background: var(--surface-alt);
      border: 1.5px solid var(--ad-border);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      font-size: 11px;
      letter-spacing: 0.05em;
      flex-shrink: 0;
    }

    /* ==================== 5. 2カラム本体レイアウト ==================== */
    .layout-container {
      padding: 20px 24px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 300px;
      gap: 24px;
      align-items: start;
    }
    #mainView {
      min-width: 0;
      width: 100%;
    }
    .sp .layout-container {
      grid-template-columns: minmax(0, 1fr);
      padding: 12px;
    }
    .sp .right-rail { display: none; }
    /* 画面幅 768px 以下のスマートフォン表示時：1カラム化＆右カラムのsticky解除 */
    @media (max-width: 768px) {
      .layout-container {
        grid-template-columns: 1fr;
        padding: 12px;
      }
      .right-rail {
        position: static;
        width: 100%;
      }
    }

    /* ==================== 6. 親パネル（角丸 12px） vs 内部要素（角 0px） ==================== */
    /* ★ 親パネル外枠だけ角丸 (12px) */
    .panel {
      background-color: var(--surface);
      border: 1.5px solid var(--border-strong);
      border-top: 4px solid var(--panel-top-line);
      border-radius: 12px;
      padding: 18px 20px;
      margin-bottom: 20px;
      box-shadow: var(--panel-shadow);
      min-width: 0;
      overflow: hidden;
    }
    .sp .panel { padding: 14px; margin-bottom: 14px; }
    .panel-head {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      padding-bottom: 12px;
      margin-bottom: 14px;
      border-bottom: 1px solid var(--border);
    }
    .panel-title {
      font-size: 16px;
      font-weight: 900;
      margin: 0;
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--text-heading);
    }

    /* 内部のフィルターバー・セレクトボックス：すべてシャープな角 (0px) */
    .filter-bar {
      background: var(--surface-alt);
      border: 1px solid var(--border);
      border-left: 4px solid var(--brand);
      border-radius: 0px;
      padding: 12px;
      margin-bottom: 16px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
    }
    .filter-group {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 800;
      color: var(--text-muted);
    }
    .filter-select {
      padding: 6px 10px;
      border-radius: 0px;
      border: 1.5px solid var(--border-strong);
      background: var(--surface);
      font-size: 12px;
      font-weight: 700;
      color: var(--text);
      cursor: pointer;
    }
    .filter-count {
      margin-left: auto;
      font-size: 12px;
      font-weight: 800;
      color: var(--text-muted);
    }

    /* ★ 目立たせるアクションボタン（Moreボタン）：角丸ピル型 (999px) */
    .more-btn-wrap {
      margin-top: 18px;
      text-align: center;
    }
    .more-btn {
      background: var(--brand);
      color: #FFFFFF;
      border: 2px solid var(--brand-deep);
      padding: 11px 30px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 900;
      cursor: pointer;
      transition: 0.15s;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .viewport.theme-dark .more-btn {
      background: #1C2541;
      color: #39FF14;
      border-color: #39FF14;
    }
    .more-btn:hover {
      background: var(--brand-deep);
      color: var(--brand-soft);
    }

    /* 内部のラベル・バッジ：すべてシャープな角 (0px) */
    .badge {
      display: inline-flex;
      align-items: center;
      padding: 2px 7px;
      border-radius: 0px;
      font-size: 10px;
      font-weight: 800;
      white-space: nowrap;
      letter-spacing: 0.02em;
    }
    .badge-green { background: #E6F0DC; color: #003300; border: 1px solid #55883B; }
    .badge-amber { background: #E6F0DC; color: #1F7A1F; border: 1px solid #55883B; }
    .badge-blue { background: #EEF3EF; color: #303030; border: 1px solid #85A392; }
    .badge-purple { background: #F3E8FF; color: #581C87; border: 1px solid #A855F7; }
    .badge-rose { background: #FFE4E6; color: #9F1239; border: 1px solid #F43F5E; }
    .badge-gray { background: #E4E8E5; color: #303030; border: 1px solid #85A392; }

    .viewport.theme-dark .badge-green { background: rgba(57,255,20,0.12); color: #39FF14; border-color: #1F7A1F; }
    .viewport.theme-dark .badge-amber { background: rgba(91,192,190,0.15); color: #5BC0BE; border-color: #5BC0BE; }
    .viewport.theme-dark .badge-blue { background: #1C2541; color: #E0E1DD; border-color: #2F3E46; }
    .viewport.theme-dark .badge-gray { background: #0D1B2A; color: #94A8B3; border-color: #2F3E46; }

    .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
    .grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
    .sp .grid-2, .sp .grid-3 { grid-template-columns: minmax(0, 1fr); }
    .sp .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* ★ パネルの中に入るデータカード：すべてシャープな角 (0px) ＋ 左アクセントラインもグリーン1色に統一 */
    .item-card {
      border: 1.5px solid var(--border);
      border-left: 4px solid var(--brand);
      background: var(--surface-alt);
      border-radius: 0px;
      padding: 12px;
      transition: 0.15s;
      cursor: pointer;
      min-width: 0;
      overflow: hidden;
      color: var(--text);
    }
    .item-card:hover {
      border-color: var(--brand);
      border-left-color: var(--brand-deep);
      background: var(--surface);
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    .viewport.theme-dark .item-card:hover {
      background: #1C2541;
      border-color: #5BC0BE;
      border-left-color: #39FF14;
    }
    .item-card h3 {
      margin: 0;
      font-size: 15px;
      font-weight: 900;
      color: var(--text-heading);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    /* パネル内部のサムネイル画像もすべてシャープな角 (0px) に統一 */
    .item-card img,
    .mini-unit img,
    .set-frame img,
    .support-slot img,
    .picker-icon-card img {
      border-radius: 0px;
    }

    /* サブタブ：ボタンなので角丸ピル型 (999px) */
    .sub-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      background: var(--surface-alt);
      border: 1px solid var(--border);
      padding: 8px;
      border-radius: 0px;
      margin-bottom: 14px;
    }
    .sub-tab {
      padding: 7px 16px;
      border-radius: 999px;
      border: 1.5px solid var(--border-strong);
      background: var(--surface);
      color: var(--text);
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .sub-tab.active {
      background: var(--brand-deep);
      color: #C1E899;
      border-color: var(--brand-deep);
    }
    .viewport.theme-dark .sub-tab.active {
      background: #5BC0BE;
      color: #0B1320;
      border-color: #5BC0BE;
    }

    .deck-board-layout {
      display: grid;
      grid-template-columns: 210px minmax(0, 1fr);
      gap: 20px;
      align-items: center;
    }
    .sp .deck-board-layout {
      grid-template-columns: minmax(0, 1fr);
      gap: 14px;
    }
    .char-detail-h1 {
      margin: 0;
      font-size: 22px;
      font-weight: 900;
      line-height: 1.3;
      overflow-wrap: anywhere;
    }
    .char-detail-sub {
      font-size: 12px;
      line-height: 1.4;
      color: var(--text-muted);
      margin-top: 3px;
      overflow-wrap: anywhere;
    }
    .deck-grid-6 {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 10px;
    }
    .sp .deck-grid-6 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .slot-box-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    /* ★ 内部のキャラセット枠：シャープな角 (0px) */
    .set-frame {
      width: 190px;
      min-height: 180px;
      border: 2px solid var(--border-strong);
      border-top: 4px solid var(--brand);
      border-radius: 0px;
      background: var(--surface);
      color: var(--text);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
      position: relative;
      transition: 0.15s;
      text-align: center;
    }
    .set-frame.empty-frame {
      border: 2px dashed var(--border-strong);
      background: var(--surface-alt);
      color: var(--text-muted);
    }
    .set-frame img {
      width: 86px;
      height: 86px;
      object-fit: cover;
      border: 1.5px solid var(--border-strong);
      background: var(--surface-alt);
    }

    /* ★ ランク絞り込みボタン ([ALL] [SS] [S] [A] [B])：押わせるボタンなので角丸ピル型 (999px) */
    .tier-quick-btns {
      display: flex;
      gap: 4px;
      margin-top: 8px;
      justify-content: center;
      flex-wrap: wrap;
    }
    .tier-pill-btn {
      padding: 4px 11px;
      border-radius: 999px;
      border: 1.5px solid var(--border-strong);
      background: var(--surface);
      color: var(--text);
      font-size: 11px;
      font-weight: 900;
      cursor: pointer;
      transition: 0.12s;
    }
    .tier-pill-btn:hover, .tier-pill-btn.active {
      background: var(--brand-deep);
      color: #C1E899;
      border-color: var(--brand-deep);
    }
    .viewport.theme-dark .tier-pill-btn:hover,
    .viewport.theme-dark .tier-pill-btn.active {
      background: #5BC0BE;
      color: #0B1320;
      border-color: #5BC0BE;
    }

    .select-icon-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 8px;
      max-height: 320px;
      overflow-y: auto;
      padding: 4px;
    }
    .sp .select-icon-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    /* モーダル内部のカードアイテム：シャープな角 (0px) */
    .picker-icon-card {
      background: var(--surface);
      border: 1.5px solid var(--border);
      border-radius: 0px;
      padding: 8px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      cursor: pointer;
      transition: 0.12s;
      min-width: 0;
      color: var(--text);
    }
    .picker-icon-card:hover {
      border-color: var(--brand);
      background: var(--surface-turf);
    }
    .picker-icon-card.selected {
      border: 2px solid var(--brand);
      background: var(--surface-turf);
    }
    .picker-icon-card img {
      width: 52px;
      height: 52px;
      object-fit: cover;
      border: 1px solid var(--border-strong);
      background: var(--surface-alt);
    }

    /* ★ 画面中央に浮き出るPopUpモーダル：親ウインドウ外枠は角丸 (12px)、中身は角 (0px) */
    .popup-modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(11, 19, 32, 0.72);
      backdrop-filter: blur(3px);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .popup-modal-window {
      width: 100%;
      max-width: 800px;
      background: var(--surface);
      color: var(--text);
      border: 2px solid var(--border-strong);
      border-top: 5px solid var(--brand);
      border-radius: 12px;
      padding: 22px;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
      animation: popIn 0.15s ease-out;
    }
    @keyframes popIn {
      from { opacity: 0; transform: scale(0.96); }
      to { opacity: 1; transform: scale(1); }
    }

    /* ★ サポカ6枠：内部データ枠なのでシャープな角 (0px) */
    .support-slot {
      border: 1.5px solid var(--border-strong);
      border-top: 3px solid var(--brand);
      background: var(--surface);
      color: var(--text);
      border-radius: 0px;
      padding: 10px;
      text-align: center;
      position: relative;
      transition: 0.15s;
      min-width: 0;
      cursor: pointer;
    }
    .support-slot:hover {
      border-color: var(--earth);
      background: var(--surface-turf);
    }
    .support-slot.friend {
      border-top-color: var(--earth);
      background: var(--surface-alt);
    }
    .support-slot img {
      width: 62px;
      height: 62px;
      object-fit: cover;
      border: 1px solid var(--border-strong);
    }

    /* Tier表・適性表：内部テーブルなのでシャープな角 (0px) */
    .tier-row {
      display: grid;
      grid-template-columns: 72px minmax(0, 1fr);
      border: 1.5px solid var(--border-strong);
      border-radius: 0px;
      overflow: hidden;
      margin-bottom: 10px;
    }
    .tier-label {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      font-size: 20px;
    }
    .tier-items {
      padding: 12px;
      background: var(--surface);
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }
    .sp .tier-items {
      grid-template-columns: minmax(0, 1fr);
    }
    .mini-unit {
      display: flex;
      align-items: center;
      gap: 8px;
      border: 1px solid var(--border);
      background: var(--surface-alt);
      padding: 6px 10px;
      border-radius: 0px;
      min-width: 0;
      cursor: pointer;
      color: var(--text);
    }
    .mini-unit:hover { border-color: var(--brand); background: var(--surface-turf); }
    .mini-unit img {
      width: 40px;
      height: 40px;
      object-fit: cover;
      flex-shrink: 0;
    }

    .apt-grid {
      display: grid;
      grid-template-columns: 90px repeat(4, minmax(0, 1fr));
      border: 1.5px solid var(--border-strong);
      border-radius: 0px;
      overflow: hidden;
      font-size: 12px;
      margin-bottom: 8px;
    }
    .apt-cell {
      padding: 7px 8px;
      border-right: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      text-align: center;
      background: var(--surface);
      color: var(--text);
    }
    .apt-head {
      background: var(--surface-alt);
      font-weight: 800;
      color: var(--text-muted);
    }

    .wiki-footer {
      background: #0B1320;
      color: #94A8B3;
      padding: 28px 24px;
      font-size: 12px;
      border-top: 3px solid var(--earth);
    }
    .wiki-footer-bottom {
      max-width: 1200px;
      margin: 18px auto 0;
      padding-top: 16px;
      border-top: 1px solid rgba(148, 168, 179, 0.22);
      display: flex;
      flex-direction: column;
      gap: 8px;
      font-size: 11.5px;
      line-height: 1.55;
      color: #94A8B3;
    }
    .wiki-footer-nav {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      font-weight: 800;
    }
    .wiki-footer-nav a {
      color: #E0E1DD;
      text-decoration: none;
      transition: color 0.15s ease;
    }
    .wiki-footer-nav a:hover {
      color: #C1E899;
      text-decoration: underline;
    }
    .wiki-footer-sep {
      color: rgba(148, 168, 179, 0.45);
      user-select: none;
    }
    .wiki-footer-disclaimer {
      font-size: 11px;
      color: #7E93A0;
    }
    /* 法的・運営系静的ページ用 1カラムドキュメントレイアウト (max-width: 800px) */
    .layout-container.legal-doc-layout {
      grid-template-columns: minmax(0, 1fr);
      max-width: 800px;
      margin: 28px auto 44px;
      padding: 0 20px;
    }
    .layout-container.legal-doc-layout .right-rail,
    .viewport.legal-doc-page .ad-slot {
      display: none;
    }
    .panel.legal-doc-panel {
      padding: 32px 36px;
    }
    .sp .panel.legal-doc-panel {
      padding: 20px 16px;
    }
    .legal-doc-header {
      border-bottom: 2px solid var(--border);
      padding-bottom: 18px;
      margin-bottom: 24px;
    }
    .legal-doc-badge {
      display: inline-block;
      background: var(--surface-turf);
      color: var(--brand-deep);
      border: 1px solid var(--brand);
      font-size: 11px;
      font-weight: 800;
      padding: 3px 10px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      margin-bottom: 10px;
    }
    .viewport.theme-dark .legal-doc-badge {
      background: rgba(57, 255, 20, 0.12);
      color: #39FF14;
      border-color: #5BC0BE;
    }
    .legal-doc-h1 {
      font-size: 26px;
      font-weight: 900;
      color: var(--text-heading);
      margin: 0 0 8px;
      line-height: 1.28;
    }
    .legal-doc-meta {
      font-size: 12px;
      color: var(--text-muted);
      font-weight: 700;
    }
    .legal-doc-body {
      font-size: 14.5px;
      line-height: 1.78;
      color: var(--text);
    }
    .legal-doc-body h2 {
      font-size: 18px;
      font-weight: 900;
      color: var(--text-heading);
      border-left: 4px solid var(--brand);
      padding-left: 12px;
      margin: 28px 0 12px;
      line-height: 1.35;
    }
    .legal-doc-body h3 {
      font-size: 15px;
      font-weight: 800;
      color: var(--text-heading);
      margin: 18px 0 8px;
    }
    .legal-doc-body p {
      margin: 0 0 14px;
    }
    .legal-doc-body ul {
      margin: 0 0 16px;
      padding-left: 22px;
    }
    .legal-doc-body li {
      margin-bottom: 8px;
    }
    .legal-doc-body a {
      color: var(--brand-deep);
      font-weight: 700;
      text-decoration: underline;
    }
    .viewport.theme-dark .legal-doc-body a {
      color: #5BC0BE;
    }
    .legal-callout-box {
      background: var(--surface-alt);
      border: 1.5px solid var(--border-strong);
      border-left: 5px solid var(--brand);
      padding: 16px 20px;
      margin: 18px 0 22px;
      font-size: 14px;
      line-height: 1.7;
    }
    .contact-cta-wrap {
      margin: 20px 0 24px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 14px;
    }
    .contact-cta-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: var(--brand);
      color: #ffffff;
      border: 2px solid var(--brand-deep);
      border-radius: 999px;
      padding: 12px 26px;
      font-size: 14px;
      font-weight: 900;
      text-decoration: none;
      transition: background 0.15s ease, transform 0.12s ease;
    }
    .contact-cta-btn:hover {
      background: var(--brand-deep);
      color: #ffffff;
      transform: translateY(-1px);
      text-decoration: none;
    }
    .viewport.theme-dark .contact-cta-btn {
      background: #1C2541;
      color: #39FF14;
      border-color: #39FF14;
    }
    .contact-iframe-container {
      width: 100%;
      background: var(--surface-alt);
      border: 1.5px solid var(--border-strong);
      overflow: hidden;
      margin-top: 12px;
    }
    .contact-iframe-container iframe {
      width: 100%;
      height: 760px;
      border: 0;
      display: block;
    }
    .sp-anchor-ad { display: none; }
    .sp .sp-anchor-ad {
      display: flex;
      position: sticky;
      bottom: 0;
      z-index: 90;
      border-radius: 0;
    }

    
    /* ==================== オウンドメディア風 News & Event スタイル (パレット変数100%準拠・ ゼロ) ==================== */
    /* TOPページ：最新News 3件の3カラムグリッド */
    .news-editorial-grid-3 {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
      margin-bottom: 14px;
    }
    .sp .news-editorial-grid-3 {
      grid-template-columns: 1fr;
    }

    /* Newsカード本体（余計な枠線や背景色を排し、大判ビジュアル＋タイトル＋日付を美しく見せるオウンドメディア構成） */
    .news-editorial-card {
      display: flex;
      flex-direction: column;
      gap: 10px;
      cursor: pointer;
      text-decoration: none;
      color: var(--text);
      transition: transform 0.15s ease;
    }
    .news-editorial-card:hover {
      transform: translateY(-2px);
    }

    /* Newsの大型サムネイル枠（16:10 ワイド比率・パレット内の淡い背景と繊細な枠線のみ） */
    .news-editorial-thumb {
      width: 100%;
      aspect-ratio: 16 / 10;
      background: var(--surface-alt);
      border: 1px solid var(--border);
      overflow: hidden;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-color 0.15s ease;
    }
    .news-editorial-card:hover .news-editorial-thumb {
      border-color: var(--brand);
    }
    .news-editorial-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      display: block;
      transition: transform 0.25s ease;
    }
    /* 立ち絵系透過PNGの場合は上品に大きくトリミング配置 */
    .news-editorial-thumb img.thumb-stand {
      width: 82%;
      height: 135%;
      object-fit: contain;
      object-position: center top;
      margin-top: 18%;
    }
    .news-editorial-card:hover .news-editorial-thumb img {
      transform: scale(1.03);
    }

    /* サムネイル直下のタイトル＆日付・カテゴリ行（イントロ文なし） */
    .news-editorial-title {
      margin: 0;
      font-size: 14px;
      font-weight: 800;
      line-height: 1.42;
      color: var(--text-heading);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .news-editorial-card:hover .news-editorial-title {
      color: var(--brand);
    }
    .news-editorial-meta {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 700;
      color: var(--text-muted);
    }
    .news-meta-dot {
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--earth);
      display: inline-block;
      flex-shrink: 0;
    }

    /* News & Merch タブ一覧ページ用（BRUTUS / WHAT'S NEW 風の横並び大判サムネ＋タイトル＋日付リスト） */
    .news-archive-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 20px 24px;
    }
    .sp .news-archive-grid {
      grid-template-columns: 1fr;
    }
    .news-archive-item {
      display: grid;
      grid-template-columns: 168px minmax(0, 1fr);
      gap: 16px;
      align-items: center;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--border);
      cursor: pointer;
      color: var(--text);
      text-decoration: none;
      transition: transform 0.15s ease;
    }
    .sp .news-archive-item {
      grid-template-columns: 128px minmax(0, 1fr);
      gap: 12px;
    }
    .news-archive-item:hover {
      transform: translateY(-2px);
    }
    .news-archive-item .news-editorial-thumb {
      aspect-ratio: 4 / 3;
    }

    /* TOPページのイベント2枠用：従来より大きく見やすいワイドサムネイル */
    .event-card-body {
      display: flex;
      gap: 14px;
      align-items: center;
    }
    .sp .event-card-body {
      flex-direction: column;
      align-items: flex-start;
    }
    .event-wide-thumb {
      width: 148px;
      height: 86px;
      background: var(--surface-turf);
      border: 1.5px solid var(--border-strong);
      overflow: hidden;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .sp .event-wide-thumb {
      width: 100%;
      height: 110px;
    }
    .event-wide-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 20%;
      display: block;
    }
    .event-wide-thumb img.event-stand {
      width: 78%;
      height: 140%;
      object-fit: contain;
      object-position: center top;
      margin-top: 22%;
    }


    /* News個別記事ページ（英訳プレスリリース全文表示・パレット変数100%準拠） */
    .news-article-hero {
      width: 100%;
      max-height: 420px;
      background: var(--surface-alt);
      border: 1px solid var(--border);
      overflow: hidden;
      margin: 14px 0 18px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .news-article-hero img {
      width: 100%;
      height: auto;
      max-height: 420px;
      object-fit: cover;
      display: block;
    }
    .news-article-body {
      font-size: 14px;
      line-height: 1.75;
      color: var(--text);
    }
    .news-article-body h2 {
      font-size: 17px;
      font-weight: 900;
      color: var(--text-heading);
      border-left: 4px solid var(--brand);
      padding-left: 10px;
      margin: 22px 0 10px;
    }
    .news-article-body p {
      margin: 0 0 14px;
    }
    .news-spec-table {
      width: 100%;
      border-collapse: collapse;
      margin: 14px 0 18px;
      font-size: 13px;
      background: var(--surface-alt);
      border: 1px solid var(--border);
    }
    .news-spec-table th,
    .news-spec-table td {
      padding: 10px 14px;
      border-bottom: 1px solid var(--border);
      text-align: left;
      vertical-align: top;
    }
    .news-spec-table th {
      width: 28%;
      font-weight: 800;
      color: var(--text-heading);
      background: var(--surface-turf);
      border-right: 1px solid var(--border);
    }


    /* ==================== キャラ詳細：関連Newsミニ枠 ＆ リアル馬(2/3)＋フィギュア(1/3)グリッド (パレット変数準拠) ==================== */
    .char-related-news-panel {
      background: var(--surface);
      border: 1.5px solid var(--border-strong);
      border-radius: 14px;
      padding: 14px 18px;
      margin-bottom: 18px;
    }
    .char-related-news-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
      flex-wrap: wrap;
    }
    .char-related-news-title {
      font-size: 14px;
      font-weight: 900;
      color: var(--text-heading);
      margin: 0;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .char-related-news-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }
    .sp .char-related-news-grid {
      grid-template-columns: 1fr;
    }
    @media (max-width: 768px) {
      .char-related-news-grid {
        grid-template-columns: 1fr;
      }
    }
    .char-related-news-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      border: 1px solid var(--border);
      background: var(--surface-alt);
      color: var(--text);
      text-decoration: none;
      cursor: pointer;
      transition: border-color 0.15s ease, background 0.15s ease;
      min-width: 0;
    }
    .char-related-news-item:hover {
      border-color: var(--brand);
      background: var(--surface-turf);
    }
    .char-related-news-thumb {
      width: 68px;
      height: 44px;
      border: 1px solid var(--border);
      background: var(--surface);
      object-fit: cover;
      flex-shrink: 0;
    }
    .char-related-news-thumb.is-stand {
      object-fit: contain;
      padding: 2px;
    }
    .char-related-news-meta {
      min-width: 0;
      flex: 1;
    }
    .char-related-news-date {
      font-size: 10px;
      font-weight: 800;
      color: var(--text-muted);
      line-height: 1.2;
      margin-bottom: 2px;
    }
    .char-related-news-headline {
      font-size: 12px;
      font-weight: 800;
      color: var(--text-heading);
      line-height: 1.35;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .char-related-news-empty {
      font-size: 12px;
      font-weight: 700;
      color: var(--text-muted);
      padding: 6px 10px;
      background: var(--surface-alt);
      border: 1px dashed var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    /* リアル馬情報 (2/3 = 2fr) ＆ 公式フィギュア枠 (1/3 = 1fr) の2カラム比率グリッド */
    .lore-merch-grid {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 16px;
      align-items: stretch;
    }
    .sp .lore-merch-grid {
      grid-template-columns: 1fr;
    }
    @media (max-width: 820px) {
      .lore-merch-grid {
        grid-template-columns: 1fr;
      }
    }

    /* リアル馬カード内の左上写真枠（Wikipedia / Wikimedia Commons 出典付き）＋右テキスト横並び */
    .real-horse-body-flex {
      display: flex;
      gap: 16px;
      align-items: flex-start;
    }
    .sp .real-horse-body-flex {
      flex-direction: column;
    }
    @media (max-width: 600px) {
      .real-horse-body-flex {
        flex-direction: column;
      }
    }
    .horse-photo-box {
      width: 156px;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      border: 1px solid var(--border-strong);
      background: var(--surface-alt);
      overflow: hidden;
    }
    .sp .horse-photo-box {
      width: 100%;
      max-width: 240px;
    }
    .horse-photo-img-wrap {
      width: 100%;
      height: 122px;
      background: var(--surface);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      position: relative;
    }
    .horse-photo-img-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .horse-photo-credit {
      font-size: 9.5px;
      font-weight: 700;
      color: var(--text-muted);
      padding: 4px 6px;
      background: var(--surface-alt);
      border-top: 1px solid var(--border);
      line-height: 1.25;
      text-align: center;
    }
    .horse-photo-credit a {
      color: var(--brand);
      text-decoration: none;
      font-weight: 800;
    }
    .horse-photo-credit a:hover {
      text-decoration: underline;
    }

    /* 生没年・存命ステータスピル */
    .lifespan-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 3px 9px;
      border: 1px solid var(--border-strong);
      background: var(--surface-alt);
      font-size: 11px;
      font-weight: 900;
      color: var(--text-heading);
    }
    .lifespan-dot-alive {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--brand);
      display: inline-block;
    }
    .lifespan-dot-deceased {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--text-muted);
      display: inline-block;
    }

    /* 同一パネル内でしっかり目を引く「ベタ塗り背景＋US主流 Where to Buy 型」の横長PR枠 (.pr-showcase-card：高さを約2/3に引き締め) */
    .pr-showcase-card {
      position: relative;
      background: var(--brand-deep);
      color: #ffffff;
      border: 2px solid var(--earth);
      border-left: 6px solid var(--earth);
      border-radius: 8px;
      padding: 9px 14px;
      margin: 12px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: nowrap;
    }
    .sp .pr-showcase-card {
      flex-wrap: wrap;
    }
    @media (max-width: 860px) {
      .pr-showcase-card {
        flex-wrap: wrap;
      }
    }
    .pr-showcase-left {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
      flex: 1;
    }
    .pr-showcase-pr-badge {
      background: var(--earth);
      color: #ffffff;
      font-size: 9.5px;
      font-weight: 900;
      padding: 2px 6px;
      border-radius: 3px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      flex-shrink: 0;
    }
    .pr-showcase-title {
      font-size: 13.5px;
      font-weight: 900;
      color: #ffffff;
      line-height: 1.25;
      margin: 0;
      display: flex;
      align-items: center;
      gap: 7px;
      flex-wrap: wrap;
    }
    .pr-showcase-sub {
      font-size: 11px;
      color: var(--brand-soft);
      line-height: 1.3;
      margin: 0;
    }
    .pr-showcase-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: nowrap;
      flex-shrink: 0;
    }
    .sp .pr-showcase-actions {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
    /* USメディア主流の「Where to Buy」横長アクションボタン（高さを抑えて横1列にスッキリ収める） */
    .pr-buy-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding: 8px 12px;
      font-size: 11.5px;
      font-weight: 900;
      border-radius: 6px;
      text-decoration: none;
      cursor: pointer;
      white-space: nowrap;
      transition: transform 0.12s ease, opacity 0.12s ease;
    }
    .sp .pr-buy-btn {
      width: 100%;
      box-sizing: border-box;
    }
    .sp .pr-buy-btn-amazon {
      grid-column: 1 / -1;
    }
    .pr-buy-btn:hover {
      transform: translateY(-1px);
      opacity: 0.95;
    }
    .pr-buy-btn-amazon {
      background: var(--earth);
      color: #ffffff;
      border: 1.5px solid #ffffff;
    }
    .pr-buy-btn-store {
      background: #ffffff;
      color: var(--brand-deep);
      border: 1.5px solid var(--brand-soft);
    }
    .merch-sub-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

/* 右カラムの基本追従設定（PC表示時） */
.right-rail {
  position: sticky;
  top: 80px;
}

/* 本番フル画面表示用の調整（プレビュー用の黒い外枠ステージを解除） */
body.production-body {
  background-color: #F6F4F3;
  margin: 0;
}
body.production-body .stage {
  padding: 0;
  display: block;
}
body.production-body .viewport {
  width: 100%;
  max-width: 100%;
  border: none;
  border-radius: 0;
  box-shadow: none;
  min-height: 100vh;
}
body.production-body .wiki-header-top,
body.production-body .wiki-nav,
body.production-body .layout-container {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
}

/* ==================== 法的・運営系静的ページ用 1カラムドキュメントレイアウト (max-width: 800px) ==================== */
body.production-body .layout-container.legal-doc-layout,
.layout-container.legal-doc-layout {
  grid-template-columns: minmax(0, 1fr);
  max-width: 800px;
  margin: 28px auto 44px;
  padding: 0 20px;
}
.layout-container.legal-doc-layout .right-rail,
.viewport.legal-doc-page .ad-slot {
  display: none;
}
.panel.legal-doc-panel {
  padding: 32px 36px;
}
.legal-doc-header {
  border-bottom: 2px solid var(--border);
  padding-bottom: 18px;
  margin-bottom: 24px;
}
.legal-doc-badge {
  display: inline-block;
  background: var(--surface-turf);
  color: var(--brand-deep);
  border: 1px solid var(--brand);
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.viewport.theme-dark .legal-doc-badge {
  background: rgba(57, 255, 20, 0.12);
  color: #39FF14;
  border-color: #5BC0BE;
}
.legal-doc-h1 {
  font-size: 26px;
  font-weight: 900;
  color: var(--text-heading);
  margin: 0 0 8px;
  line-height: 1.28;
}
.legal-doc-meta {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 700;
}
.legal-doc-body {
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--text);
}
.legal-doc-body h2 {
  font-size: 18px;
  font-weight: 900;
  color: var(--text-heading);
  border-left: 4px solid var(--brand);
  padding-left: 12px;
  margin: 28px 0 12px;
  line-height: 1.35;
}
.legal-doc-body h3 {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-heading);
  margin: 18px 0 8px;
}
.legal-doc-body p {
  margin: 0 0 14px;
}
.legal-doc-body ul {
  margin: 0 0 16px;
  padding-left: 22px;
}
.legal-doc-body li {
  margin-bottom: 8px;
}
.legal-doc-body a {
  color: var(--brand-deep);
  font-weight: 700;
  text-decoration: underline;
}
.viewport.theme-dark .legal-doc-body a {
  color: #5BC0BE;
}
.legal-callout-box {
  background: var(--surface-alt);
  border: 1.5px solid var(--border-strong);
  border-left: 5px solid var(--brand);
  padding: 16px 20px;
  margin: 18px 0 22px;
  font-size: 14px;
  line-height: 1.7;
}
.contact-cta-wrap {
  margin: 20px 0 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.contact-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--brand);
  color: #ffffff;
  border: 2px solid var(--brand-deep);
  border-radius: 999px;
  padding: 12px 26px;
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.12s ease;
}
.contact-cta-btn:hover {
  background: var(--brand-deep);
  color: #ffffff;
  transform: translateY(-1px);
  text-decoration: none;
}
.viewport.theme-dark .contact-cta-btn {
  background: #1C2541;
  color: #39FF14;
  border-color: #39FF14;
}
.contact-iframe-container {
  width: 100%;
  background: var(--surface-alt);
  border: 1.5px solid var(--border-strong);
  overflow: hidden;
  margin-top: 12px;
}
.contact-iframe-container iframe {
  width: 100%;
  height: 760px;
  border: 0;
  display: block;
}

/* ==================== SP表示（768px以下）WF準拠レスポンシブ最適化 ==================== */
@media (max-width: 768px) {
  .wiki-header-top {
    flex-direction: column;
    align-items: stretch;
    padding: 10px 14px;
    gap: 10px;
  }
  .header-search-wrap {
    max-width: 100%;
  }
  .wiki-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 4px 8px 0;
    gap: 2px;
  }
  .layout-container {
    grid-template-columns: minmax(0, 1fr);
    padding: 10px;
    gap: 14px;
  }
  .right-rail {
    position: static;
    width: 100%;
  }
  .panel {
    padding: 12px;
    margin-bottom: 12px;
  }
  /* WF準拠：Strategy Wiki Directory (.grid-4) は2列、Popular Character Builds (.grid-2) 等は1列 */
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .grid-2,
  .grid-3,
  .tier-items,
  .news-editorial-grid-3,
  .news-archive-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .item-card,
  .native-ad-card {
    width: 100%;
    padding: 10px;
    min-width: 0;
    box-sizing: border-box;
  }
  .item-card h3 {
    font-size: 13.5px;
    line-height: 1.3;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
  }
  .grid-4 .item-card {
    padding: 9px 8px;
  }
  .grid-4 .item-card h3 {
    font-size: 12.5px;
  }
  .badge {
    font-size: 9.5px;
    padding: 2px 5px;
  }
  .apt-grid {
    grid-template-columns: 64px repeat(4, minmax(0, 1fr));
    font-size: 11px;
  }
  .apt-cell {
    padding: 6px 4px;
  }
  /* 1. キャラクター詳細ページ：アイコン横のテキスト見切れ防止 */
  .char-detail-hero-row {
    gap: 12px;
    min-width: 0;
    width: 100%;
    align-items: flex-start;
  }
  .char-detail-hero-row > img {
    width: 68px;
    height: 68px;
  }
  .char-detail-hero-text {
    min-width: 0;
    flex: 1;
  }
  .char-detail-h1 {
    font-size: clamp(15px, 4.2vw, 18px);
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .char-detail-sub {
    font-size: 11px;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  /* 2. PR枠内のアフィリエイトボタン：上段Amazon US 100%、下段Play-Asia & eBay 50%ずつ均等配置 */
  .pr-showcase-card {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .pr-showcase-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .pr-buy-btn {
    width: 100%;
    box-sizing: border-box;
  }
  .pr-buy-btn-amazon {
    grid-column: 1 / -1;
    width: 100%;
  }
  /* 3. デッキビルダー：Character枠（上段）とサポートカード6枠（下段：3列×2段）を縦積みに配置 */
  .deck-board-layout {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .slot-box-col {
    width: 100%;
  }
  .set-frame {
    width: 100%;
    max-width: 240px;
    margin: 0 auto;
    box-sizing: border-box;
  }
  .deck-grid-6 {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
  }
  .support-slot {
    padding: 8px 4px;
    min-width: 0;
  }
  .support-slot img {
    width: 50px;
    height: 50px;
  }
  /* サポートカード・キャラクター選択ポップアップモーダルのSP最適化 */
  .popup-modal-backdrop {
    padding: 10px;
  }
  .popup-modal-window {
    width: 92vw;
    max-width: 480px;
    margin: 0 auto;
    padding: 14px;
    box-sizing: border-box;
    max-height: 88vh;
    overflow-y: auto;
  }
  .modal-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .select-icon-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
  }
  .picker-icon-card {
    min-width: 0;
  }
  /* 4. 生成シェアカードプレビュー：SP幅で縦潰れしないよう 9/16 アスペクト比＆max-width:100%で美しく収める */
  .share-card-preview-box {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 9 / 16;
    padding: 14px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .share-card-preview-head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
  }
  .share-card-stat-box {
    width: 100%;
    padding: 8px 10px;
  }
  .share-card-stat-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    font-size: 11px;
    text-align: center;
  }
  .share-card-slots-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 10px;
  }
  .news-archive-item {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 12px;
  }
  .event-card-body {
    flex-direction: column;
    align-items: flex-start;
  }
  .event-wide-thumb {
    width: 100%;
    height: 110px;
  }
  /* 法的・運営系1カラムドキュメントページのSP最適化 */
  body.production-body .layout-container.legal-doc-layout,
  .layout-container.legal-doc-layout {
    margin: 14px auto 28px;
    padding: 0 12px;
  }
  .panel.legal-doc-panel {
    padding: 20px 16px;
  }
  .legal-doc-h1 {
    font-size: 21px;
  }
  .legal-doc-body {
    font-size: 14px;
  }
  .legal-doc-body h2 {
    font-size: 16px;
    margin: 22px 0 10px;
  }
  .legal-callout-box {
    padding: 14px 14px;
  }
  .contact-cta-btn {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }
  .contact-iframe-container iframe {
    height: 680px;
  }
}

/* フィルターバー・セレクト・モーダルボタンのレスポンシブ崩れ防止 */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
  padding: 10px 12px;
}
.filter-group {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--text-muted);
  min-width: 0;
  max-width: 100%;
}
.filter-group > span {
  white-space: nowrap;
  flex-shrink: 0;
}
.filter-select {
  padding: 5px 8px;
  font-size: 11.5px;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
}
.filter-count {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
}
.tier-quick-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px;
}
.modal-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
}
.select-icon-grid {
  max-height: 56vh;
  overflow-y: auto;
  padding-right: 4px;
}
@media (max-width: 900px) {
  .filter-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .filter-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
  }
  .filter-select {
    width: 100%;
  }
  .filter-count {
    grid-column: 1 / -1;
    margin-left: 0;
    text-align: right;
    padding-top: 2px;
  }
}
@media (max-width: 420px) {
  .filter-bar {
    grid-template-columns: 1fr;
  }
}