/* =====================================================================
 * my-items.css — マイアイテム（所持サポートアイテムの登録）共通スタイル
 *   究極デート率計算機 (#content-date-calc-v2) と デートシミュ (#date-sim-root)
 *   の両方で同じ見た目にするため、両スコープに同じ定義を当てる。
 *   ※ member.css / date-sim.css より後に読み込むこと（上書きするため）。
 * ===================================================================== */

/* --- 「マイアイテム」ボタン（サポートアイテム行の右） --- */
#content-date-calc-v2 .row-label.row-label-act,
#date-sim-root .row-label.row-label-act {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
#content-date-calc-v2 .myitem-manage-btn,
#date-sim-root .myitem-manage-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1.2px solid #ffb6cf;
    background: #fff;
    color: #e0599a;
    font-size: 0.7rem;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    line-height: 1.5;
}
#content-date-calc-v2 .myitem-manage-btn:active,
#date-sim-root .myitem-manage-btn:active { transform: scale(.96); }
#content-date-calc-v2 .myitem-count,
#date-sim-root .myitem-count {
    display: inline-block; min-width: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #fd79a8; color: #fff;
    font-size: 0.62rem; font-weight: 800; text-align: center;
}

/* --- 未解放スロットに保持されているアイテム（消さずに残す） --- */
#content-date-calc-v2 .dc-slot.locked::after,
#date-sim-root .dc-slot.locked::after { position: relative; z-index: 2; }
#content-date-calc-v2 .dc-slot.locked .slot-img,
#date-sim-root .dc-slot.locked .slot-img { opacity: .3; filter: grayscale(.5); }
#content-date-calc-v2 .dc-slot.locked[title],
#date-sim-root .dc-slot.locked[title] { pointer-events: auto; }
#content-date-calc-v2 .slot-hold,
#date-sim-root .slot-hold {
    position: absolute; left: 2px; right: 2px; bottom: 2px; z-index: 2;
    background: rgba(120,90,105,.92); color: #fff;
    font-size: 8px; font-weight: 800; text-align: center;
    padding: 1px 0; border-radius: 4px; letter-spacing: .02em;
}
/* マイアイテム登録済みのスロットに付く印 */
#content-date-calc-v2 .slot-reg,
#date-sim-root .slot-reg {
    position: absolute; bottom: 2px; left: 2px; z-index: 2;
    width: 15px; height: 15px; border-radius: 4px;
    background: rgba(253,121,168,.92); color: #fff;
    font-size: 8px;
    display: flex; align-items: center; justify-content: center;
}

/* --- モーダル内のマイアイテム一覧 --- */
#content-date-calc-v2 .myitem-list,
#date-sim-root .myitem-list { display: flex; flex-direction: column; gap: 7px; }
#content-date-calc-v2 .myitem-row,
#date-sim-root .myitem-row {
    display: flex; align-items: stretch; gap: 6px;
    border: 1.5px solid #ffe1ed;
    border-radius: 9px;
    background: #fff;
    overflow: hidden;
}
#content-date-calc-v2 .myitem-row.current,
#date-sim-root .myitem-row.current { border-color: #fd79a8; background: #fff8fc; }
#content-date-calc-v2 .myitem-row.used,
#date-sim-root .myitem-row.used { opacity: .5; }
#content-date-calc-v2 .myitem-row .mi-hit,
#date-sim-root .myitem-row .mi-hit {
    flex: 1 1 auto; min-width: 0;
    display: flex; align-items: center; gap: 9px;
    padding: 7px 4px 7px 7px;
    cursor: pointer;
}
#content-date-calc-v2 .myitem-row.used .mi-hit,
#date-sim-root .myitem-row.used .mi-hit { cursor: not-allowed; }
#content-date-calc-v2 .myitem-row .mi-hit:focus-visible,
#date-sim-root .myitem-row .mi-hit:focus-visible { outline: 2px solid #fd79a8; outline-offset: -2px; }
#content-date-calc-v2 .mi-img,
#date-sim-root .mi-img {
    width: 42px; height: 42px; flex: 0 0 42px;
    border-radius: 7px; object-fit: cover;
    border: 1.5px solid #ffd1e0; background: #fff8fc;
}
#content-date-calc-v2 .mi-main,
#date-sim-root .mi-main { min-width: 0; flex: 1 1 auto; }
#content-date-calc-v2 .mi-name,
#date-sim-root .mi-name {
    font-size: 0.8rem; font-weight: 800; color: #9a7080;
    display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
#content-date-calc-v2 .mi-rar,
#date-sim-root .mi-rar { color: #e0599a; font-size: 0.66rem; font-weight: 800; }
#content-date-calc-v2 .mi-flag,
#date-sim-root .mi-flag {
    font-size: 0.6rem; font-weight: 800; padding: 1px 6px; border-radius: 999px;
}
#content-date-calc-v2 .mi-flag.mi-used,
#date-sim-root .mi-flag.mi-used { background: #eee2e8; color: #8c6c7d; }
#content-date-calc-v2 .mi-flag.mi-cur,
#date-sim-root .mi-flag.mi-cur  { background: #fd79a8; color: #fff; }
#content-date-calc-v2 .mi-subs,
#date-sim-root .mi-subs { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
#content-date-calc-v2 .mi-chip,
#date-sim-root .mi-chip {
    font-size: 0.62rem; font-weight: 700; line-height: 1.5;
    padding: 1px 6px; border-radius: 999px;
    background: #fff2f7; color: #d1548c; border: 1px solid #ffd1e0;
}
#content-date-calc-v2 .mi-chip.mi-chip-none,
#date-sim-root .mi-chip.mi-chip-none { background: #f5f1f3; color: #ab99a2; border-color: #e8dde2; }
/* 計算機では使わない種別のチップ（デートシミュ専用の効果） */
#content-date-calc-v2 .mi-chip.mi-chip-sim,
#date-sim-root .mi-chip.mi-chip-sim { background: #f2f4ff; color: #6b74b8; border-color: #d8ddf7; }
#content-date-calc-v2 .mi-acts,
#date-sim-root .mi-acts {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    padding: 5px 6px; background: #fff8fc; border-left: 1px solid #ffe1ed;
}
#content-date-calc-v2 .mi-btn,
#date-sim-root .mi-btn {
    width: 26px; height: 24px;
    border: 1.2px solid #ffd1e0; border-radius: 6px;
    background: #fff; color: #e0599a;
    font-size: 0.68rem; cursor: pointer; font-family: inherit;
    display: flex; align-items: center; justify-content: center;
}
#content-date-calc-v2 .mi-btn.mi-del,
#date-sim-root .mi-btn.mi-del { color: #c96a7f; }
#content-date-calc-v2 .mi-btn:active,
#date-sim-root .mi-btn:active { transform: scale(.94); }
#content-date-calc-v2 .myitem-empty,
#date-sim-root .myitem-empty { text-align: center; padding: 26px 16px; color: #b09aa4; }
#content-date-calc-v2 .myitem-empty i,
#date-sim-root .myitem-empty i { font-size: 1.9rem; color: #ffd1e0; }
#content-date-calc-v2 .myitem-empty .mie-h,
#date-sim-root .myitem-empty .mie-h { font-size: 0.84rem; font-weight: 800; color: #9a7080; margin: 10px 0 6px; }
#content-date-calc-v2 .myitem-empty .mie-sub,
#date-sim-root .myitem-empty .mie-sub { font-size: 0.72rem; line-height: 1.6; margin: 0; }

/* --- 「マイアイテムに登録する」チェック --- */
#content-date-calc-v2 .item-reg-wrap,
#date-sim-root .item-reg-wrap {
    display: flex; align-items: flex-start; gap: 8px;
    margin-top: 12px; padding: 9px 11px;
    background: #fff8fc; border: 1px solid #ffd1e0; border-radius: 8px;
    cursor: pointer;
}
#content-date-calc-v2 .item-reg-wrap.hidden,
#date-sim-root .item-reg-wrap.hidden { display: none; }
#content-date-calc-v2 .item-reg-wrap input,
#date-sim-root .item-reg-wrap input { width: 16px; height: 16px; margin-top: 1px; accent-color: #fd79a8; flex: 0 0 auto; }
#content-date-calc-v2 .item-reg-wrap span,
#date-sim-root .item-reg-wrap span { font-size: 0.78rem; font-weight: 700; color: #9a7080; line-height: 1.45; }
#content-date-calc-v2 .item-reg-wrap small,
#date-sim-root .item-reg-wrap small { display: block; font-size: 0.66rem; font-weight: 600; color: #b09aa4; margin-top: 2px; }

/* --- 戻るボタン（サブ能力入力フェーズ） --- */
#content-date-calc-v2 .modal-foot,
#date-sim-root .modal-foot { gap: 8px; flex-wrap: wrap; }
#content-date-calc-v2 .btn-sub,
#date-sim-root .btn-sub {
    background: #fff; color: #b0899a;
    border: 1.5px solid #ffd1e0; border-radius: 999px;
    padding: 10px 18px; font-size: 0.82rem; font-weight: 800;
    cursor: pointer; font-family: inherit;
}
#content-date-calc-v2 .btn-sub:active,
#date-sim-root .btn-sub:active { transform: scale(.96); }

/* サブ能力の行（デートシミュ側は .sub-row / 計算機は .item-sub-row） */
#date-sim-root .sub-row optgroup,
#content-date-calc-v2 .item-sub-row optgroup { font-size: 0.74rem; }