/* =========================================================
   macc.css – 魔命もふもふ（index専用 / シンプル・安定版・再構築）
   ========================================================= */

/* ---- 共通トークン ---- */
:root{
  --ink:#273144; --muted:#6b7280;
  --accent:#ec4899; --accent-ghost:#fce7f3;
  --border-pink:#f3c6e3; --border-pink-2:#ffd6e9;
  --radius:14px; --radius-input:10px; --radius-merit:8px;
}

/* ---- リセット・ベース ---- */
*{ box-sizing:border-box; }
html,body{ overflow-x:hidden; }
body{
  margin:18px; line-height:1.6; color:var(--ink); background:#fff;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
}
main,section,.grid,.kv,#log{ max-width:100%; }

/* ---- 見出し・レイアウト ---- */
h1,h2,h3,h4{ font-weight:bold; color:var(--accent); margin-bottom:.5em; }
h1{ font-size:1.7em; } h2{ font-size:1.3em; } h3{ font-size:1.1em; } h4{ font-size:1em; }

.container{
  max-width:1300px; margin:0 auto; padding:18px; background:#fff; border-radius:var(--radius);
  box-shadow:0 10px 26px rgba(236,72,153,.07);
}
.flex{ display:flex; gap:14px; } .flex-col{ flex-direction:column; }
.flex-row{ display:flex; flex-wrap:wrap; gap:24px; }
.flex-row>.grid{ flex:1 1 0; min-width:320px; max-width:600px; width:100%; }
.gap{ gap:14px; }

/* ---- セクション枠 ---- */
section.grid,
section[aria-labelledby="sec-equip"]>.grid{
  background:#fff; border:2px solid var(--border-pink-2); border-radius:14px;
  box-shadow:0 2px 8px rgba(236,72,153,.04); padding:0 0 10px 0; margin-bottom:18px;
}
section[aria-labelledby="sec-debug"]{ background:none; border:none; box-shadow:none; padding:0; margin-bottom:0; }

/* 見出し帯 */
section.grid{ position:relative; }
section.grid>h2{
  color:var(--accent); background:linear-gradient(90deg,#ffd6e9 0 100%,transparent 100%);
  padding:.5em 0 .5em 1em; border-left:5px solid var(--accent); border-radius:14px 14px 0 0;
  margin:0; width:100%; border-bottom:1.5px solid var(--border-pink-2);
}
section.grid h3{
  color:var(--accent); font-weight:bold; font-size:1.08em;
  background:linear-gradient(90deg,#ffeaf5 0 60%,transparent 100%);
  border-bottom:2px solid var(--border-pink-2); padding:.3em 0 .3em .8em; margin:0 0 .6em 0;
}

/* ---- フォーム：共通 ---- */
input[type="text"],
select{
  border:1.8px solid var(--border-pink); border-radius:var(--radius-input);
  background:#fff; color:var(--ink); padding:8px 10px; font-size:1em;
  transition:border-color .15s, box-shadow .15s; box-shadow:0 1px 0 rgba(0,0,0,.02) inset;
  outline:none; appearance:auto; -webkit-appearance:auto;
}

/* ★ 数字だけ入る input は幅固定（原則 120px）＆右寄せ */
input[type="number"]{
  border:1.8px solid var(--border-pink); border-radius:var(--radius-input);
  background:#fff; color:var(--ink); padding:8px 10px; font-size:1em;
  transition:border-color .15s, box-shadow .15s; box-shadow:0 1px 0 rgba(0,0,0,.02) inset;
  outline:none; appearance:auto; -webkit-appearance:auto;
  width:120px !important; min-width:120px !important; max-width:120px !important;
  text-align:right;
}

/* フォーカス/無効共通 */
input[type="number"]:focus, input[type="text"]:focus, select:focus{
  border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ghost);
}
input[type="number"]:disabled, input[type="text"]:disabled, select:disabled{
  background:#f3f3f3 !important; color:#aaa !important; cursor:not-allowed; border-color:#e5e7eb;
}

/* 読み取り専用の強調 */
input#gift_macc[readonly],
input.merit-macc[readonly],
input#roll_macc[readonly],
input#focus_macc[readonly],
input#master_skill_bonus[readonly]{
  background:#f7f7fa !important; color:#b197fc !important; font-weight:bold;
}

/* ---- ラベル（KV） ---- */
.kv-row{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.kv-label{ min-width:160px; width:160px; text-align:left; font-weight:bold; color:var(--accent); display:inline-block; }
.kv-label.kv-label--normal, .kv-label--normal{ color:#273144 !important; font-weight:normal !important; }
.kv-row small{ font-size:.85em; color:#666; margin-left:8px; }
.kv-row label.margin-left-1em{ margin-left:1em; min-width:auto; }

/* 自動反映ラベルをピンクに */
.kv .kv-row label[for="gift_macc"],
.kv .kv-row label[for="roll_macc"],
.kv .kv-row label[for="focus_macc"]{ color:var(--accent) !important; font-weight:bold !important; }
.kv-label.kv-label--normal[for="master_skill_bonus"]{ color:#273144 !important; font-weight:normal !important; }

/* ---- プルダウン整列 ---- */
/* 基本：プルダウンは左寄せ（装備セットも同じ） */
select, select option{ text-align:left; }

/* メリポの値プルダウンだけ右寄せ表示 */
.merit-value, .merit-value option{ text-align:right !important; }

/* ---- メリットポイント ---- */
.merit-cute-box{
  background:#fff; border:2px solid var(--border-pink-2); border-radius:16px;
  padding:18px 18px 12px 18px; margin-bottom:18px;
  box-shadow:0 4px 16px rgba(236,72,153,.07); display:flex; flex-direction:column; gap:12px;
}
.merit-label{ font-weight:bold; color:var(--accent); min-width:90px; font-size:1.05em; }
.merit-label--normal{ color:#273144 !important; font-weight:normal !important; }
.merit-mult{ color:#b197fc; font-size:.95em; }
.merit-note{ color:#a3a3a3; font-size:.92em; margin-left:6px; }

/* メリポ行：ラベル/値(0-5)/説明 をきっちり整列 */
.merit-simple-row{
  display:grid; grid-template-columns:100px 68px 1fr; align-items:center; column-gap:10px;
}
.merit-simple-row .merit-label{ min-width:0 !important; width:auto !important; }
.merit-value{ width:68px !important; }
.merit-desc{ margin-left:0 !important; display:block; line-height:1.4; }

/* メリットポイント行：ラベル / 値(0-5=120px) / 説明 */
.merit-simple-row {
  display: grid !important;
  grid-template-columns: 100px 120px 1fr;
  align-items: center;
  column-gap: 10px;
}

/* 値(0-5)プルダウンは120pxに固定 */
.merit-value,
#merit_g1_value,
#merit_g2_value {
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
}

/* メリポ魔命（自動計算）の被り対策：幅120 + 右に余白 */
#merit_macc_total {
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
  margin-right: 8px;
}

/* 説明はテキスト（small）で出す */
.merit-desc {
  display: block;
  margin-left: 0 !important;
  line-height: 1.4;
  color: #666;
  font-size: 12px;
}

/* もし誤って説明用の<select>が残っていても見せない保険 */
.merit-simple-row select#merit_g1_desc,
.merit-simple-row select#merit_g2_desc {
  display: none !important;
}

/* ========== まず "select の幅120px" を撤回して標準は自動幅 ========== */
/* 既存にある
   select { ... width:120px; ... }
   .merit-simple-list select, .merit-cute-box select { ... width:120px; ... }
   を上書きします */
select {
  /* 文字が長いものは広がる。最小は120に確保 */
  width: auto !important;
  min-width: 120px !important;
  max-width: 100% !important;
}
.merit-simple-list select,
.merit-cute-box select {
  width: auto !important;
  min-width: 120px !important;
  max-width: 100% !important;
}

/* ========== 基本情報セクションの横位置をそろえる ========== */
/* ラベル160 / 入力120 / 注意書きフレキシブル の3列 */
section[aria-labelledby="sec-basic"] .kv-row {
  display: grid !important;
  grid-template-columns: 160px 120px 1fr;
  align-items: center;
  column-gap: 8px;
}

/* 数字inputは全体で120px固定（既存ルールを明示） */
input[type="number"],
#merit_macc_total {
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
}

/* ========== 短文の"数値系だけ"幅120pxに固定 ========== */
/* ※ 長文はここに入れないこと（食事・チャチャルン・風水+装備などは除外） */
#rdm_in_party,
#warlock_roll_die,
#phantom_roll_plus,
#jp_macc,
#merit_g1_value,
#merit_g2_value {
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
}

/* メリポ行：ラベル/値/説明の3列。値は120px、説明は折返し */
.merit-simple-row {
  display: grid !important;
  grid-template-columns: 100px 120px 1fr;
  align-items: center;
  column-gap: 10px;
}
.merit-value,
#merit_g1_value,
#merit_g2_value { /* 念押し */
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
}
.merit-desc {
  display: block;
  margin-left: 0 !important;
  line-height: 1.4;
  color: #666;
  font-size: 12px;
}
/* もし誤って説明用<select>が残っていても出さない保険 */
.merit-simple-row select#merit_g1_desc,
.merit-simple-row select#merit_g2_desc {
  display: none !important;
}

/* ---- テーブル ---- */
table{ width:600px; border-collapse:collapse; table-layout:fixed; }
th,td{ word-break:break-word; }
.table{
  width:100%; border-collapse:collapse; margin-bottom:1.5em; background:#fff;
  border-radius:var(--radius); overflow:hidden; box-shadow:0 2px 8px rgba(236,72,153,.05);
}
.table th,.table td{ padding:8px 10px; border-bottom:1px solid var(--border-pink-2); text-align:left; }
.table th{ background:var(--accent-ghost); color:var(--accent); font-weight:bold; }
.table tr:last-child td{ border-bottom:none; }
td.num, th.num{ text-align:right; }
th.k, td.k, .num.k{ color:var(--accent) !important; font-weight:bold; background:#fff0fa; }
#log{ white-space:pre-wrap; overflow-wrap:anywhere; }

/* ---- 装備・結果 ---- */
.equipment-section{ margin-bottom:0; }
.equipment-section>div{ padding-bottom:0; }
.equipment-setup{ margin-bottom:10px; }
.equipment-set-select{ width:300px; text-align:left; }

.equipment-table th.slot{ width:60px; text-align:center; }
.equipment-table th.name{ width:300px; }
.equipment-table th.macc-skill,
.equipment-table th.macc,
.equipment-table th.aug-macc{ width:80px; text-align:center; }
.equipment-table td.slot{ text-align:center; padding:6px 4px; vertical-align:middle; }
.equipment-table td.total-skill,
.equipment-table td.total-macc,
.equipment-table td.total-aug{ text-align:center; padding:4px 2px; vertical-align:middle; }
.equipment-table td.total-name{ text-align:center; padding:8px 10px; color:var(--accent); font-weight:bold; }

/* 装備テーブル：数値欄だけは 65px で固定（例外） */
.equipment-table input[type="number"]{
  width:65px !important; min-width:65px !important; max-width:65px !important;
  padding:3px 4px !important; text-align:right !important; margin:0 auto !important; display:block !important;
  border:1.5px solid var(--border-pink) !important; border-radius:6px !important; background:#fff !important; color:var(--ink) !important;
  font-size:.85em !important; font-weight:normal !important; outline:none !important;
}
.equipment-table tbody td:nth-child(3),
.equipment-table tbody td:nth-child(4),
.equipment-table tbody td:nth-child(5){ text-align:center; padding:4px 2px; vertical-align:middle; }
.equipment-table tbody td:nth-child(1){ text-align:center; padding:6px 4px; vertical-align:middle; font-weight:normal; }

#equipment-total-row{ border-top:2px solid var(--border-pink-2) !important; }
#equipment-total-row input[type="number"]{
  background:#f7f7fa !important; color:var(--accent) !important; font-weight:bold !important;
  border-color:var(--accent) !important; text-align:right !important;
}

.result-section{ margin-top:0; }
.margin-left-1em{ margin-left:1em; }
.accent-label{ color:var(--accent) !important; font-weight:bold !important; }
.reset-section{ text-align:center; margin:20px 0; }

/* ---- ラジオ ---- */
.skill-type-option{ display:inline-flex; align-items:center; margin-right:15px; color:var(--ink); cursor:pointer; }
.skill-type-option input[type="radio"]{ margin-right:5px; width:auto; min-width:auto; cursor:pointer; }
.skill-type-option:hover{ color:var(--accent); }

/* ---- レスポンシブ ---- */
@media (max-width:900px){
  .flex-row{ flex-direction:column; gap:16px; }
  .flex-row>.grid{ max-width:100%; min-width:0; }
}
@media (max-width:700px){
  .container{ padding:8px; }
  .merit-cute-box{ padding:10px 6px 8px 6px; }
  .table th,.table td{ padding:6px 4px; }
}

/* ========== 入力欄の右寄せ統一 ========== */
/* 数字入力欄は右寄せ（既存） */
input[type="number"] {
  text-align: right !important;
}

/* 数値系セレクトボックスも右寄せに統一 */
#rdm_in_party,
#warlock_roll_die,
#phantom_roll_plus,
#jp_macc,
#merit_g1_value,
#merit_g2_value,
.merit-value {
  text-align: right !important;
}

/* 長いテキストのセレクトは左寄せで可読性を保持 */
#jobMain,
#food_select,
#chacharoon_select,
#scholar_grimoire,
.equipment-set-select {
  text-align: left !important;
}

/* テキスト入力欄（装備名など）は左寄せのまま */
input[type="text"] {
  text-align: left !important;
}

/* ========== セレクトボックスの幅調整（テキスト長に応じて） ========== */
/* 長いテキストのセレクトは内容に応じて幅調整 */
#jobMain {
  width: auto !important;
  min-width: 120px !important;
  max-width: 200px !important;
}

#food_select,
#chacharoon_select {
  width: auto !important;
  min-width: 200px !important;
  max-width: 300px !important;
}

#scholar_grimoire {
  width: auto !important;
  min-width: 150px !important;
  max-width: 200px !important;
}

.equipment-set-select {
  width: auto !important;
  min-width: 250px !important;
  max-width: 350px !important;
}

/* 風水魔法+装備は中間的な幅 */
#geomancy_plus {
  width: auto !important;
  min-width: 160px !important;
  max-width: 250px !important;
  text-align: left !important;
}

/* ========== 要望対応 ========== */

/* 1) ファントムロール+装備（長文）→ 幅を広く、左寄せのまま */
#phantom_roll_plus {
  width: 260px !important;     /* お好みで 240~320 に調整可 */
  min-width: 240px !important;
  max-width: 360px !important;
  text-align: left !important;       /* 長文なので左寄せ維持 */
  text-align-last: left !important;
}

/* 2) 「魔法命中率アップ」の数字（JP魔命）→ 右寄せ＋幅120で固定 */
#jp_macc {
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
  text-align: right !important;
  text-align-last: right !important;
  direction: ltr !important;
}
#jp_macc option { text-align: right !important; }

/* 3) ジョブも右寄せ（幅は自動のまま・切れ防止） */
#jobMain {
  text-align: right !important;
  text-align-last: right !important;
  direction: ltr !important;
}
#jobMain option { text-align: right !important; }

/* 補強：メリポ値(0–5)のプルダウンも数字欄と同じ幅120・右寄せ */
#merit_g1_value,
#merit_g2_value {
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
  text-align: right !important;
  text-align-last: right !important;
  direction: ltr !important;
}
#merit_g1_value option,
#merit_g2_value option { text-align: right !important; }

/* ========== 重複の整理：既存の重複定義を統合 ========== */
/* 以下の既存部分を削除して統合済み：
   - メリポ行の定義（重複していた .merit-simple-row）
   - ファントムロール+の設定（上記で更新済み）
   - JP魔命の設定（上記で更新済み）
*/

/* ========== なし／ありプルダウンの統一 ========== */
/* なし／ありプルダウンをほかと揃えて統一 */
#roll_enabled,
#geomancy_enabled {
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
  text-align: left !important;         /* 文言なので左寄せ */
  text-align-last: left !important;
}

/* （参考）数字系は右寄せの統一を維持 */
#jp_macc,
#merit_g1_value,
#merit_g2_value {
  width: 120px !important;
  text-align: right !important;
  text-align-last: right !important;
  direction: ltr !important;
}