/* ===== リセット & 基本 ===== */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'Georgia', 'Yu Mincho', '游明朝', serif;
      background-color: #0a0a12;
      color: #d4c9a8;
      min-height: 100vh;
    }

    /* ===== 背景装飾 ===== */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background:
        radial-gradient(ellipse at 20% 50%, rgba(60, 30, 90, 0.4) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 50%, rgba(20, 50, 80, 0.4) 0%, transparent 60%);
      pointer-events: none;
      z-index: 0;
    }

    /* ===== ヘッダー ===== */
    header {
      position: relative;
      z-index: 1;
      text-align: center;
      padding: 40px 20px 20px;
      border-bottom: 1px solid rgba(180, 150, 80, 0.3);
    }

    header .site-title {
      font-size: 0.85rem;
      letter-spacing: 0.4em;
      color: #b49650;
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    header h1 {
      font-size: 2.2rem;
      letter-spacing: 0.2em;
      color: #f0e6c8;
      text-shadow: 0 0 30px rgba(180, 150, 80, 0.5);
    }

    /* ===== ナビゲーション（キャラ選択タブ） ===== */
    nav.char-nav {
      position: relative;
      z-index: 1;
      display: flex;
      justify-content: center;
      gap: 8px;
      padding: 24px 20px;
    }

    nav.char-nav button {
      background: transparent;
      border: 1px solid rgba(180, 150, 80, 0.4);
      color: #b49650;
      padding: 8px 24px;
      font-family: inherit;
      font-size: 0.85rem;
      letter-spacing: 0.15em;
      cursor: pointer;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }

    nav.char-nav button:hover,
    nav.char-nav button.active {
      background: rgba(180, 150, 80, 0.15);
      border-color: #b49650;
      color: #f0e6c8;
    }

    /* ===== メインコンテンツ ===== */
    main {
      position: relative;
      z-index: 1;
      max-width: 1100px;
      margin: 0 auto;
      padding: 20px 40px 80px;
    }

    /* ===== キャラクターカード ===== */
    .char-card {
      display: flex;
      align-items: stretch;
      gap: 0;
      border: 1px solid rgba(180, 150, 80, 0.25);
      background: rgba(10, 8, 20, 0.7);
      backdrop-filter: blur(6px);
    }

    /* 左: イラストエリア */
    .char-illust {
      flex: 0 0 420px;
      position: relative;
      overflow: hidden;
      background: linear-gradient(160deg, #1a1228 0%, #0d1520 100%);
      min-height: 600px;
    }

    .char-illust img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center;
      display: block;
    }

    /* 画像がない場合のプレースホルダー */
    .char-illust .placeholder {
      width: 100%;
      height: 100%;
      min-height: 600px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      color: rgba(180, 150, 80, 0.3);
      font-size: 0.8rem;
      letter-spacing: 0.2em;
    }

    .char-illust .placeholder svg {
      width: 80px;
      height: 80px;
      opacity: 0.3;
    }

    /* 左下グラデーションフェード */
    .char-illust::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 120px;
      background: linear-gradient(transparent, rgba(10, 8, 20, 0.8));
    }

    /* 右: 情報エリア */
    .char-info {
      flex: 1;
      padding: 50px 48px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 32px;
      border-left: 1px solid rgba(180, 150, 80, 0.2);
    }

    /* クラス/称号 */
    .char-class {
      font-size: 0.75rem;
      letter-spacing: 0.4em;
      color: #b49650;
      text-transform: uppercase;
    }

    /* キャラ名 */
    .char-name-block {
      border-left: 3px solid #b49650;
      padding-left: 20px;
    }

    .char-name-ja {
      font-size: 2.6rem;
      letter-spacing: 0.2em;
      color: #f0e6c8;
      text-shadow: 0 2px 20px rgba(180, 150, 80, 0.3);
      line-height: 1.1;
    }

    .char-name-en {
      font-size: 1rem;
      letter-spacing: 0.3em;
      color: #8a7a5a;
      margin-top: 6px;
    }

    /* ステータスグリッド */
    .char-stats {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px 32px;
    }

    .stat-item {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .stat-label {
      font-size: 0.7rem;
      letter-spacing: 0.3em;
      color: #b49650;
      text-transform: uppercase;
    }

    .stat-value {
      font-size: 1rem;
      color: #d4c9a8;
      letter-spacing: 0.05em;
    }

    /* 区切り線 */
    .divider {
      border: none;
      border-top: 1px solid rgba(180, 150, 80, 0.2);
    }

    /* キャラクター設定テキスト */
    .char-lore {
      font-size: 0.95rem;
      line-height: 2.0;
      color: #b0a888;
      letter-spacing: 0.05em;
    }

    /* 能力値バー */
    .char-abilities {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .ability-row {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .ability-name {
      font-size: 0.72rem;
      letter-spacing: 0.2em;
      color: #b49650;
      width: 60px;
      flex-shrink: 0;
    }

    .ability-bar-bg {
      flex: 1;
      height: 4px;
      background: rgba(180, 150, 80, 0.15);
      position: relative;
    }

    .ability-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, #6a4e20, #b49650);
      box-shadow: 0 0 8px rgba(180, 150, 80, 0.4);
    }

    .ability-val {
      font-size: 0.78rem;
      color: #8a7a5a;
      width: 28px;
      text-align: right;
      flex-shrink: 0;
    }

    /* ===== レスポンシブ ===== */
    @media (max-width: 800px) {
      main { padding: 20px 16px 60px; }

      .char-card { flex-direction: column; }

      .char-illust {
        flex: none;
        min-height: 360px;
      }

      .char-info {
        padding: 32px 24px;
        border-left: none;
        border-top: 1px solid rgba(180, 150, 80, 0.2);
      }

      .char-name-ja { font-size: 2rem; }
    }