.sim-main-layout {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    flex-wrap: nowrap !important;
    padding: 20px;
}
#sim-setting-btn:hover {
    transform: scale(1.1) rotate(15deg);
}
.sim-sub-layout {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    flex-wrap: nowrap !important;
    padding: 20px;
}
.character-image {
    flex: 0 0 auto;
    min-width: 250px;
    max-width: 400px;
    overflow: hidden;
    position: relative;
    transform: translateY(15px);
}

.character-image img {
    width: 600px;
    height: auto;
    display: block;
    margin-left: -25%;
    position: relative;
    z-index: 1;
}

.character-image::before {
    content: "";
    position: absolute;
    top: -45px;
    bottom: 0;
    left: -7%;
    width: 114%;
    height: 116%;
    z-index: 0;
    border-style: solid;
    border-width: 0px;
    border-image-source: url('../assets/Material/PackComent.webp');
    border-image-slice: 0 fill;
    border-image-repeat: stretch;
    pointer-events: none;
}

.character-detail {
    justify-content: center;
    position: relative;
    /* width: 140%; を削除または100%に、min-widthも適切に調整 */
    width: 100%;
    min-width: 450px; 
    height: 590px;
    transform: translateY(6.5%);
    border: none;
    pointer-events: auto;
    z-index: 2; /* グリッドより背面に配置 */
}
.character-detail::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-style: solid;
    border-width: 20px;
    border-image-source: url('assets/Material/PackComent.webp');
    border-image-slice: 20 fill;
    border-image-repeat: stretch;
    transform: translateZ(0);
    pointer-events: none;
}
.character-comp {
    justify-content: center;
    position: relative;
    width: 100%;
    min-width: 450px; 
    border: none;
    pointer-events: auto;
    z-index: 2; /* グリッドより背面に配置 */
}
.character-comp::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-style: solid;
    border-width: 20px;
    border-image-source: url('assets/Material/PackComent.webp');
    border-image-slice: 20 fill;
    border-image-repeat: stretch;
    transform: translateZ(0);
    pointer-events: none;
}

.tab-container {
    transform: translateY(-55%);
    display: flex;
    justify-content: center;
    border: 10px solid rgba(128, 0, 0, 0);
    position: relative;
    z-index: 50;
    pointer-events: auto;
}

.tab-button {
    width: 50%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'FOT-serif', serif;
    font-size: 1.4rem;
    letter-spacing: 0.2em;
    color: #201600;
    font-weight: bold;
    cursor: pointer;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-image-source: url('assets/Material/Tab01OFF.webp');
    border-image-slice: 0 fill;
    transition: background-image 0.2s;
    pointer-events: auto;
}

.tab-button.active {
    border-image-source: url('assets/Material/Tab01ON.webp');
    border-image-slice: 0 fill;
}

.tab-content {
    display: none !important;
    color: #201600;
}

.tab-content.active {
    align-items: center;
    width: 100%;
    display: flex !important;
    flex-direction: column;
    transform: translateY(-20px);
}

.character-detail-status {
    display: flex;
    justify-content: center;
    width: 100%;
}

.character-detail-status-value {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    border-bottom: 1px dashed #201600;
    padding: 2px 0;
    color: #201600;
    font-size: 1rem;
}

.character-detail-materials {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding: 10px 20px;
    height: 85%;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(3, 100px);
    row-gap: 15px;
    column-gap: 25px;
    grid-template-areas:
    "item1 .     item4"
    "item2 .     item5"
    "item3 item7 item6";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
}

.square {
    width: 90%;
    height: 90%;
    border-radius: 3px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s;
}
.square.is-level-locked img {
    filter: grayscale(100%) opacity(40%);
    background-color: rgba(0, 0, 0, 0.4);
}
.square:active {
    transform: scale(0.95);
}

.square img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.box1 { grid-area: item1; }
.box2 { grid-area: item2; }
.box3 { grid-area: item3; }
.box4 { grid-area: item4; }
.box5 { grid-area: item5; }
.box6 { grid-area: item6; }
.box7 { 
    grid-area: item7;
    width: 80px;
    height: 80px;
    cursor: default;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1000;
}

.modal-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    background-color: var(--color-bg);
    padding: 25px 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
    width: 500px;
    max-width: 95%;
    color: var(--color-text);
    max-height: 90vh;
    overflow-y: auto;
}

.text-left-content {
    text-align: left;
}

.modal-content img {
    max-width: 200px;
    max-height: 200px;
    border-radius: 4px;
    margin-bottom: 3px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.close-btn {
    padding: 7px 24px;
    border: none;
    background-color: #666;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.3rem;
    transition: background 0.2s;
}
#btn-reset-equipment:disabled,
#btn-confirm-equipment:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}
.close-btn:hover {
    background-color: #555;
}

.sim-section-title {
    font-size: 14px;
    font-weight: bold;
    color: var(--color-text);
    margin: 15px 0 6px 0;
    padding-left: 8px;
}

.sim-icon-container {
    display: flex;
    gap: 12px;
    justify-content: flex-start;
    flex-wrap: wrap;
    background: rgba(0, 0, 0, 0.04);
    padding: 10px;
    border-radius: 6px;
    min-height: 75px;
}

.sim-icon-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    width: 66px;
    transition: transform 0.15s ease;
}

.sim-icon-box:hover {
    transform: scale(1.05);
}

.sim-icon-box img {
    width: 54px;
    height: 54px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.sim-icon-box span {
    font-size: 11px;
    font-weight: bold;
    color: var(--color-text);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.sim-icon-box.is-active img {
    box-shadow: 0 0 20px rgb(0 0 0);
}

.rune-slot.is-active img {
    box-shadow: 0 0 20px rgb(0 0 0);
    border-radius: 45px
}

.sim-icon-box.is-active span {
    color: #ff0000;
}

.sim-level-row {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-top: 8px;
}

.sim-level-row select {
    flex: 1;
    padding: 8px;
    font-size: 15px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background-color: var(--color-selected-bg);
    color: var(--color-text);
}

.sim-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.sim-input-row label {
    font-size: 14px;
    font-weight: bold;
    color: var(--color-text);
    width: 70px;
}

.sim-input-row input[type="number"] {
    flex: 1;
    padding: 8px;
    font-size: 15px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background-color: var(--color-selected-bg);
    color: var(--color-text);
}

.sim-god-row {
    gap: 20px;
}

.sim-god-col {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.sim-god-col label {
    width: auto;
    white-space: nowrap;
}

.confirm-btn {
    width: 50%;
    margin-top: 0;
    background-color: #b38c44;
    font-weight: bold;
    white-space: nowrap;
}

.confirm-btn:hover {
    background-color: #c06d00;
}

.material-section {
    width: 100%;
    margin-bottom: 3px;
}

.material-section-title {
    font-size: 1.1rem;
    font-weight: bold;
    padding-left: 8px;
    margin-bottom: 10px;
    color: #201600;
    text-align: left;
}

.material-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.material-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.05);
    padding: 6px 12px;
    border-radius: 6px;
}

.material-item img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.material-name {
    font-size: 0.95rem;
    color: var(--color-text);
    font-weight: bold;
}

.gear-name {
    color: var(--color-bg);
    font-size: 1.1rem;
    align-content: center;
    font-weight: bold;
    margin-bottom: 10px;
    transform: translateX(-20px);
    background-image: url(assets/Material/BaseHeader.webp);
    background-repeat: no-repeat;
    background-size: cover;
    width: 300px;
    height: 23px;
}
.gear-name-s {
    color: var(--color-text);
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 10px;
}
.gear-name-min {
    color: var(--color-text);
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 10px;
}
.gear-value {
    display: grid;
    color: var(--color-text);
    font-size: 1rem;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 12px;
    margin-bottom: 8px;
}
.gear-value-s {
    display: grid;
    color: var(--color-text);
    font-size: 1rem;
    grid-template-columns: repeat(1, 1fr);
    gap: 6px 12px;
    width: 50%;
    margin-bottom: 8px;
}
.exclusive-value {
    font-size: 1rem;
}
.chara-value {
    display: grid;
    font-size: 1rem;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 15px;
    margin-bottom: 8px;
}
.chara-border {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dashed #201600;
}
.gear-null {
    color:#666;
}
.sim-gear-status-item {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dashed #201600;
    padding-bottom: 2px;
}
.sim-gear-status-item span {
    color: #28a745;
    font-weight: bold;
}

.material-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 5px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    width: 100%;
}

.material-grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    transition: background 0.2s;
}

.material-grid-item img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin-bottom: 6px;
}

.material-grid-name {
    font-size: 0.75rem;
    color: #201600;
    font-weight: bold;
    line-height: 1.2;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 2.4em;
}

.reforge-lock-btn {
    width: 24px;
    height: 24px;
    background: url('assets/Material/CheckBox.webp') no-repeat center/contain;
    border: none;
    position: relative;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.reforge-lock-btn.is-locked::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url('assets/Material/CheckBox_Lock.webp') no-repeat center/contain;
}

.sim-reforge-row.is-locked-row label,
.sim-reforge-row.is-locked-row span{
    color: #28a745 !important;
}
.rune-slot {
    position: relative;
    width: 64px;
    height: 64px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rune-slot.is-active-slot {
    border-radius: 45px;
    box-shadow: 0 0 8px rgb(0 0 0);
}

.rune-selector-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    width: 54px;
}

.rune-selector-item img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    border: 1px solid #777;
    border-radius: 4px;
    background: rgba(0,0,0,0.2);
}

.rune-selector-item span {
    font-size: 10px;
    text-align: center;
    margin-top: 2px;
    white-space: nowrap;
}

.rune-selector-item.is-disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.rune-remove-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #6c2a2a;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    border: 1px solid #9f3a3a;
    border-radius: 4px;
    width: 42px;
    height: 42px;
    margin: 0px 5px 15px 5px;
    cursor: pointer;
}
.rune-remove-btn:hover {
    background: #9f3a3a;
}

.select-rune {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.rune-lv-badge {
    position: absolute;
    bottom: -15px;
    right: 11px;
    font-size: 15px;
    font-weight: bold;
    color: #fff;
    background: rgba(0,0,0,0.6);
    padding: 0 4px;
    border-radius: 3px;
    display: none;
}

.sim-rune-slots {
    display: flex;
    gap: 25px;
    margin: 0px 14%;
    justify-content: flex-start;
    margin-bottom: 18px;
}
body.modal-open {
    overflow: hidden !important;
}
body.modal-open #setting-modal-overlay {
    display: block;
}
.sim-reforge-container {
    transition: opacity 0.2s ease;
}
#chara-modal {
    display: none;
    flex-direction: column; /* flex-flow: wrap から変更し、内部の配置を縦並びに安定させる */
    position: fixed;
    top: 50%;
    left: 50% !important;
    width: 80%;
    max-height: 550px;
    background: var(--color-bg);
    border-radius: 8px;
    border: 1px solid var(--text);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    padding: 20px;
    overflow-y: auto;
    z-index: 1001;
}
#selected-chara-name {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 5px;
}
/* モーダルの外側（背景）をクリックできるように、背景用の擬似要素、またはオーバーレイを設定 */
#chara-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* 外側を少し暗くする */
    z-index: 1000; /* 通常のコンテンツより上、モーダルより下 */
    display: none;
}
#chara-list img {
    pointer-events: auto;
}
.el-wrapper {
    position: relative;
    border: 2px solid transparent !important;
    border-radius: 4px;
    padding: 2px !important;
}

.check-mark {
    position: absolute !important;
    bottom: 0px !important;
    right: -5px !important;
    width: 30px !important;
    height: 30px !important;
    display: none;
    z-index: 10;
}

/* =========================================================
   共通ユーティリティクラス（インラインstyleから移行）
   ========================================================= */

/* フォーム系の共通入力欄 (61箇所 / モーダル内 number/text input) */
.sim-input-std {
    width: 100%;
    padding: 4px;
    text-align: center;
    border-radius: 4px;
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid #555;
}

/* テキスト中央寄せ + 余白バリエーション */
.u-tac { text-align: center; }
.u-tac-mb10 { text-align: center; margin-bottom: 10px; }
.u-tac-mb12 { text-align: center; margin-bottom: 12px; }
.u-tac-mb15 { text-align: center; margin-bottom: 15px; }
.u-tac-mb15-fs18 { text-align: center; margin-bottom: 20px; font-size: 1.8rem; }
.u-tac-mb15-fs1 { text-align: center; margin-bottom: 15px; font-size: 1rem; }
.u-tac-mt15 { text-align: center; margin-top: 15px; }
.u-tac-w100-mt15 { text-align: center; width: 100%; margin-top: 15px; }

/* 幅指定のみのユーティリティ */
.u-mr10 { margin-right: 10px; }
.u-mr12 { margin-right: 12px; }
.u-w40 { width: 40px; }
.u-w50 { width: 50px; }
.u-w45pct { width: 45%; }
.u-w35-right { width: 35px; text-align: right; }
.u-flex1 { flex: 1; }

/* close-btn系サブバリエーション（幅auto・小さめpadding） */
.close-btn-sm {
    width: auto;
    padding: 6px 10px;
    font-size: 0.8rem;
}
.close-btn-sm-14 {
    width: auto;
    padding: 6px 14px;
    font-size: 0.8rem;
}
.close-btn-sm-16 {
    width: auto;
    padding: 6px 16px;
    font-size: 0.8rem;
}

/* close-btn 背景色バリエーション */
.close-btn-purple { background-color: #6f42c1; }
.close-btn-green { background-color: #28a745; }
.close-btn-red { background-color: #dc3545; }
.close-btn-gold { background-color: #b38c44; }
.close-btn-blue { background-color: #007bff; }
.close-btn-gold-mr8 { background-color: #b38c44; margin-right: 8px; }

/* テーブル風グリッド入力行（アルカナ入力など） */
.sim-arcana-input-row {
    padding: 8px;
    width: 12%;
    font-size: 0.9rem !important;
}
.sim-arcana-input-row-11 {
    padding: 8px;
    width: 11%;
    font-size: 0.9rem !important;
}
.sim-arcana-input-row-16 {
    padding: 8px;
    width: 16%;
    font-size: 0.9rem !important;
}

/* アコーディオン見出し（管理モーダル共通） */
.sim-accordion-header {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-bottom: 2px solid #555;
    padding-bottom: 8px;
    margin-bottom: 10px;
}
.sim-accordion-title {
    font-size: 1.4rem;
    font-weight: bold;
    width: 350px;
}
.sim-accordion-toggle {
    font-size: 1.4rem;
    font-weight: bold;
    padding: 0 10px;
}

/* 見出しテキスト（左寄せ大文字） */
.u-title-left { font-size: 1.6rem; text-align: left; }

/* グリッドレイアウト（4カラム行） */
.sim-grid-4col {
    display: grid;
    grid-template-columns: 1.5fr 4.9fr 2.1fr 1.5fr;
    align-items: center;
    font-size: 1.4rem;
    width: 100%;
}

/* フレックスラップ中央寄せ行 */
.sim-flex-wrap-center-mb10 {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
.sim-flex-center-gap10 {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* サムネイル画像（管理モーダル用） */
.sim-thumb-96 {
    width: 96px;
    height: 96px;
    border-radius: 6px;
}
.sim-thumb-96-plain {
    width: 96px;
    height: 96px;
}
.sim-thumb-76 {
    width: 76px;
    height: 76px;
    border-radius: 6px;
    display: block;
    margin: 0 auto 6px;
    object-fit: cover;
}

/* 太字・中央寄せの小見出し */
.u-bold-sm-center {
    font-weight: bold;
    font-size: 0.9rem;
    text-align: center;
}

/* display制御ユーティリティ（インライン記述の置換用） */
.u-hidden { display: none; }
.u-block { display: block; }
.u-block-scrollx { display: block; overflow-x: auto; }

/* 「新規追加」系カード（キャラ管理・共有コード管理などの追加ボタン） */
.sim-add-card {
    width: 130px;
    text-align: center;
    cursor: pointer;
    background: var(--color-bg);
    border-radius: 8px;
    padding: 12px 8px;
    border: 2px dashed #999;
}

/* select/inputの小型バリエーション（数値入力） */
.sim-input-lv {
    padding: 6px;
    font-size: 1.3rem;
    border-radius: 4px;
    background: var(--color-bg);
    color: #201600;
    border: 1px solid #555;
    width: 60px;
    text-align: center;
}
.sim-input-lv-100 {
    padding: 6px;
    font-size: 1.3rem;
    border-radius: 4px;
    background: var(--color-bg);
    color: #201600;
    border: 1px solid #555;
    width: 100px;
    text-align: center;
    justify-self: end;
}
.sim-input-selected-bg {
    padding: 4px;
    border-radius: 4px;
    background: var(--color-selected-bg);
    color: var(--color-text);
    border: 1px solid #555;
}
.sim-input-selected-bg-80 {
    padding: 4px;
    border-radius: 4px;
    background: var(--color-selected-bg);
    color: var(--color-text);
    border: 1px solid #555;
    width: 80px;
}
.sim-input-selected-bg-60 {
    padding: 4px;
    border-radius: 4px;
    background: var(--color-selected-bg);
    color: var(--color-text);
    border: 1px solid #555;
    width: 60px;
}

/* その他の頻出単発ユーティリティ */
.u-minh80 { min-height: 80px; }
.u-mb12 { margin-bottom: 12px; }
.u-bold-mb6-201600 { font-weight: bold; margin-bottom: 6px; color: #201600; }
.u-bold-mb4 { font-weight: bold; margin-bottom: 4px; }
.u-ellipsis-201600 {
    font-size: 0.8rem;
    min-height: 1.2em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #201600;
}
.u-fs085 { font-size: 0.85rem; }
.sim-grid-2col-9em {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 15px;
    font-size: 0.9em;
    width: 90%;
}
.sim-flex-wrap-center-mb10-alt {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 10px;
}
.sim-flex-wrap-gap6-center-mb12 {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-bottom: 12px;
}

/* 汎用モーダル（共有コード発行/使用など） */
.sim-generic-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    max-width: 90%;
    background: var(--color-bg);
    border: 1px solid #201600;
    border-radius: 8px;
    padding: 20px;
    z-index: 2301;
    color: var(--color-text);
}
.sim-generic-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2300;
}

/* 管理系モーダル共通（z-index/width/max-heightはCSS変数で個別指定）
   使い方: <div class="sim-mgr-modal" style="--modal-z: 2101; --modal-w: 480px;">
   z-index列は各モーダルで固有のためインラインで --modal-z のみ残す運用とする */
.sim-mgr-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--modal-z, 2000);
}
.sim-mgr-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--modal-w, 480px);
    max-width: var(--modal-mw, 92%);
    max-height: 85vh;
    overflow-y: auto;
    background: var(--color-bg);
    border: 1px solid #201600;
    border-radius: 8px;
    padding: 20px;
    z-index: calc(var(--modal-z, 2000) + 1);
    color: var(--color-text);
}

.sim-flex-gap10-mb10-h60-center {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    height: 60px;
    justify-content: center;
}
.sim-flex-gap10-center-mb12 {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.sim-flex-col-gap5-mb25 {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 25px;
}
.u-border-bottom-bold {
    border-bottom: 1px solid #777;
    font-weight: bold;
}
.sim-selected-bg-panel {
    background: var(--color-selected-bg);
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 15px;
    display: none;
}
.u-selfcenter-fs085-201600 {
    align-self: center;
    font-size: 0.85rem;
    color: #201600;
}

/* 説明文（モーダル内、201600系トーン） */
.u-desc-201600 {
    text-align: center;
    font-size: 0.85rem;
    color: #201600;
    margin-bottom: 8px;
}
.u-desc-opacity-201600 {
    font-size: 0.9rem;
    opacity: 0.85;
    text-align: center;
    margin-bottom: 15px;
    color: #201600;
}
.u-desc-opacity2-201600 {
    font-size: 0.95rem;
    opacity: 0.8;
    margin-bottom: 12px;
    color: #201600;
}
.u-empty-note-201600 {
    display: none;
    text-align: center;
    color: #201600;
    opacity: 0.7;
    margin-bottom: 10px;
}
.u-empty-note-gray {
    display: none;
    text-align: center;
    color: #aaa;
    margin-bottom: 10px;
}

/* アクションボタン系（テーブル内 小型ボタン） */
.sim-action-btn-green {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
}
.sim-action-btn-blue {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
}

/* close-btn 追加バリエーション（幅・padding・フォントサイズ違い） */
.close-btn-flex1 { background-color: #28a745; flex: 1; }
.close-btn-purple-flex1 { background-color: #6f42c1; flex: 1; }
.close-btn-gold-flex1 { background-color: #b38c44; flex: 1; }
.close-btn-w50 { background-color: #666; width: 50%; }
.close-btn-w50-purple { background-color: #6f42c1; width: 50%; }
.close-btn-w50-cyan { background-color: #17a2b8; width: 50%; }
.close-btn-cyan-sm { background-color: #17a2b8; width: auto; padding: 6px 16px; font-size: 0.85rem; }
.close-btn-green-sm-85 { background-color: #28a745; width: auto; padding: 6px 16px; font-size: 0.85rem; }
.close-btn-green-sm-14 { background-color: #28a745; width: auto; padding: 6px 14px; font-size: 0.8rem; }
.close-btn-gray-w18 { background-color: #666; width: auto; padding: 6px 18px; }

/* フレックス行の追加バリエーション（gap/wrap/justify系） */
.sim-flex-gap6-wrap-center { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; justify-content: center; }
.sim-flex-gap10-wrap { display: flex; flex-wrap: wrap; gap: 10px; }
.sim-flex-gap10-wrap-center { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.sim-flex-col-gap8-mb10 { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.sim-flex-col-gap15-mb25 { display: flex; flex-direction: column; gap: 15px; margin-bottom: 25px; }

/* 汎用パネル（薄い背景＋角丸） */
.sim-subtle-panel { background: rgba(0, 0, 0, 0.04); padding: 12px; border-radius: 6px; }
.sim-subtle-panel-col { background: rgba(0, 0, 0, 0.04); padding: 12px; border-radius: 6px; display: flex; flex-direction: column; gap: 10px; }
.sim-subtle-panel-mb10 { background: rgba(0, 0, 0, 0.04); padding: 10px; border-radius: 6px; margin-bottom: 10px; }
.sim-selected-bg-panel-visible { background: var(--color-selected-bg); padding: 10px; border-radius: 6px; margin-bottom: 15px; }

/* =========================================================
   残りの単発インラインstyle群のクラス化（第4弾）
   ========================================================= */

/* 入力欄フォーム系（幅バリエーション） */
.sim-input-plain {
    padding: 5px;
    border-radius: 4px;
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid #555;
}
.sim-input-plain-selected {
    padding: 5px;
    border-radius: 4px;
    background: var(--color-selected-bg);
    color: var(--color-text);
    border: 1px solid #555;
}
.sim-input-w55 {
    width: 55px;
    padding: 4px;
    border-radius: 4px;
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid #555;
}
.sim-input-w70 {
    width: 70px;
    padding: 4px;
    border-radius: 4px;
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid #555;
}
.sim-input-w70pct-mt5 {
    width: 70%;
    padding: 6px;
    margin-top: 5px;
    border-radius: 4px;
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid #555;
}
.sim-input-w150 {
    width: 150px;
    padding: 5px;
    border-radius: 4px;
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid #555;
}
.sim-input-w130-upper {
    width: 130px;
    padding: 5px;
    border-radius: 4px;
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid #555;
    text-transform: uppercase;
}
.sim-input-w220-plain {
    padding: 6px;
    border-radius: 4px;
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid #555;
    width: 220px;
}
.sim-input-w220-selected {
    width: 220px;
    padding: 6px;
    border-radius: 4px;
    background: var(--color-selected-bg);
    color: var(--color-text);
    border: 1px solid #555;
}
.sim-input-code-200 {
    width: 200px;
    padding: 8px;
    font-size: 1.3rem;
    text-align: center;
    letter-spacing: 2px;
    border-radius: 4px;
    background: var(--color-selected-bg);
    color: var(--color-text);
    border: 1px solid #555;
}
.sim-input-code-200-upper {
    width: 200px;
    padding: 8px;
    font-size: 1.3rem;
    text-align: center;
    letter-spacing: 2px;
    border-radius: 4px;
    background: var(--color-selected-bg);
    color: var(--color-text);
    border: 1px solid #555;
    text-transform: uppercase;
}

/* ボタン系 */
.u-btn-w-auto-28 { width: auto; padding: 8px 28px; }
.close-btn-w60pct-bold { background-color: #b38c44; font-weight: bold; width: 60%; }
.close-btn-w20-sm { background-color: #b38c44; flex: 1; font-size: 0.8rem; width: 20%; }
.close-btn-green-sm2-85 { background-color: #28a745; width: auto; padding: 5px 14px; font-size: 0.85rem; }
.close-btn-gray-sm2-85 { background-color: #666; width: auto; padding: 5px 14px; font-size: 0.85rem; }
.close-btn-blue-plain { background-color: #007bff; }
.sim-action-btn-green-lg {
    background-color: #28a745;
    color: #fff;
    padding: 5px 15px;
    font-size: 1.4rem;
}
.sim-action-btn-green-md {
    background-color: #28a745;
    color: #fff;
    padding: 5px 15px;
    font-size: 1.2rem;
}
.sim-action-btn-green-float {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    margin-right: 10px;
    position: absolute;
    transform: translateX(300px);
}

/* テキスト・見出し系 */
.u-color-201600 { color: #201600; }
.u-fs085-mt6-201600 { font-size: 0.85rem; margin-top: 6px; color: #201600; opacity: 0.8; }
.u-fs08-201600-tac { font-size: 0.8rem; color: #201600; margin-bottom: 8px; text-align: center; }
.u-fs08-ml6 { font-size: 0.8rem; margin-left: 6px; }
.u-fs09-ccc { font-size: 0.9rem; color: #ccc; }
.u-fs12-mb8 { font-size: 1.2rem; margin-bottom: 8px; }
.u-title-fs16-201600 { font-size: 1.6rem; font-weight: bold; color: #201600; }
.u-fs12-bold-mb5 { font-size: 12px; font-weight: bold; margin-bottom: 5px; color: var(--color-text); }
.u-fs1-tac { font-size: 1rem; text-align: center; }
.u-fs12 { font-size: 1.2rem; }
.u-bold-fs09 { font-weight: bold; font-size: 0.9rem; }
.u-mb20-fs11 { margin-bottom: 20px; font-size: 1.1rem; }
.u-ml10-fs09-ccc { margin-left: 10px; font-size: 0.9rem; color: #ccc; }
.u-margin-15pct-fs13 { margin: 0 15% 0 15%; font-size: 1.3rem; }
.u-maxw100 { max-width: 100px; }
.u-minh-auto-mb8-gap8 { min-height: auto; margin-bottom: 8px; gap: 8px; }
.u-mb10 { margin-bottom: 10px; }
.u-mb15 { margin-bottom: 15px; }

/* グリッド系 */
.sim-grid-column-span2-header {
    grid-column: span 2;
    margin: 5px 0;
    padding-top: 5px;
}
.sim-grid-column-span2-title {
    grid-column: span 2;
    padding-top: 5px;
    font-size: 1.2rem;
}
.sim-grid-4col-editable {
    display: grid;
    grid-template-columns: 0fr 10fr 0fr 0fr;
    align-items: center;
    width: 100%;
}
.sim-grid-4col-labeled {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 6px 10px;
    align-items: center;
    margin-bottom: 15px;
    min-width: 460px;
}
.sim-grid-2col-15gap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.sim-grid-center { display: grid; justify-content: center; }

/* フレックス行の追加バリエーション */
.sim-flex-center-gap20-wrap-mb15 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}
.sim-flex-wrap-gap10-center-mb12 {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}
.sim-flex-gap10-panel {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    color: var(--color-text);
    background: var(--color-selected-bg);
    border-radius: 6px;
    padding: 10px;
}
.sim-flex-gap10-center-mb10 { display: flex; gap: 10px; justify-content: center; margin-bottom: 10px; }
.sim-flex-gap10-center-mb15 { display: flex; gap: 10px; justify-content: center; margin-bottom: 15px; }
.sim-flex-gap10-wrap-mb12-center {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
    justify-content: center;
}
.sim-flex-gap3-wrap-center-alt { display: flex; gap: 3px; flex-wrap: wrap; align-items: center; justify-content: center; }
.sim-flex-gap3-wrap { display: flex; gap: 3px; flex-wrap: wrap; align-items: center; }
.sim-flex-gap5-end { display: flex; gap: 5px; align-items: center; justify-self: end; }
.u-tac-mb12-flex-gap8-wrap {
    text-align: center;
    margin-bottom: 12px;
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}
.u-tar-mt5 { text-align: right; margin-top: 5px; }
.sim-flex-right-mt15-gap10 {
    margin-top: 15px;
    text-align: right;
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* 表示制御（display:noneを含む個別ケース） */
.u-hidden-border-top {
    display: none;
    border-top: 1px solid #555;
    padding-top: 10px;
    margin-top: 5px;
}
.u-hidden-mt10-tar {
    display: none;
    margin-top: 10px;
    text-align: right;
    justify-content: center;
    gap: 10px;
}
.u-hidden-scrollx { display: none; overflow-x: auto; }
.u-hidden-scrollx-mb15 { display: none; overflow-x: auto; margin-bottom: 15px; }
.u-hidden-selected-panel {
    display: none;
    background: var(--color-selected-bg);
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 12px;
}
.u-hidden-cyan-note {
    display: none;
    text-align: center;
    font-size: 0.8rem;
    color: #17a2b8;
    margin-bottom: 10px;
}
.u-hidden-flex-wrap-gap6-mb15 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-bottom: 15px;
}

/* 旧式モーダル（chara-modal相当の単発モーダル・レガシー） */
.sim-legacy-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}
.sim-legacy-modal {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 700px;
    max-width: 90%;
    background: var(--color-bg);
    border-radius: 8px;
    border: 1px solid #201600;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    padding: 25px;
    z-index: 1001;
    color: #201600;
}
.sim-legacy-modal-overlay-2000 {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.5);
    z-index: 2000;
}
.sim-legacy-modal-2001 {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    max-width: 90%;
    background: var(--color-bg);
    border: 1px solid #201600;
    border-radius: 8px;
    padding: 20px;
    z-index: 2001;
    color: var(--color-text);
}

/* 編成編集バナー（固定表示） */
.sim-party-edit-banner {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2600;
    background: #6f42c1;
    color: #fff;
    padding: 10px 12px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* コード発行系テキスト強調 */
.u-desc-mb12-opacity {
    text-align: center;
    font-size: 0.85rem;
    margin-bottom: 12px;
    color: var(--color-text);
    opacity: 0.85;
}
.u-status-tac-mt6 {
    text-align: center;
    font-size: 0.8rem;
    margin-top: 6px;
    min-height: 1em;
}
.u-tac-mb10-fs1 { text-align: center; margin-bottom: 10px; font-size: 1rem; }

/* テーブル */
.sim-table-700 { width: 100%; border-collapse: collapse; text-align: center; min-width: 700px; }
.sim-table-600 { width: 100%; border-collapse: collapse; text-align: center; min-width: 600px; }
.u-w100-tac { width: 100%; text-align: center; }
.u-w100-tac-mt10 { width: 100%; text-align: center; margin-top: 10px; }
.sim-dashed-box-hidden {
    width: 100%;
    display: none;
    margin-bottom: 20px;
    padding: 10px;
    background: var(--color-bg);
    border-radius: 6px;
    border: 1px dashed #201600;
}

/* Header/固定要素まわり（ヘッダー内の設定ボタンなど） */
.u-content-relative-maxw { position: relative; width: max-content; padding-bottom: 20px; }
.u-abs-translate300-flex { position: absolute; transform: translateX(300px); display: flex; gap: 8px; }
.sim-settings-icon-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 64px;
    height: 64px;
    z-index: 30;
    cursor: pointer;
    transition: transform 0.2s;
    pointer-events: auto;
}
.sim-version-badge-alt {
    position: absolute;
    top: 5px;
    left: 75px;
    z-index: 30;
    padding: 4px 10px;
    font-size: 0.85rem;
    border-radius: 4px;
    background-color: #444;
    color: #fff;
    border: 1px solid #666;
    cursor: pointer;
}
.sim-version-badge {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 30;
    padding: 4px 10px;
    font-size: 0.85rem;
    border-radius: 4px;
    background-color: #28a745;
    color: #fff;
    border: 1px solid #666;
    cursor: pointer;
}
.sim-unequip-all-btn {
    position: absolute;
    bottom: 5px;
    right: 5px;
    z-index: 30;
    padding: 6px 10px;
    font-size: 0.8rem;
    border-radius: 4px;
    background-color: #a33;
    color: #fff;
    border: 1px solid #666;
    cursor: pointer;
}
.sim-main-bg-img {
    height: 600px;
    object-fit: cover;
    background-position: center;
    background-size: cover;
}
.sim-character-comp-fixed { width: 800px; min-height: 100px; padding: 20px; color: #201600; }

/* その他単発 */
.u-cursor-pointer-translateY60 { cursor: pointer; transform: translateY(60px); }
.u-overflowx-hidden { overflow-x: hidden !important; }
.sim-input-lv-100-disabled {
    opacity: 0.5;
    padding: 6px;
    font-size: 1.3rem;
    border-radius: 4px;
    background: var(--color-bg);
    color: #201600;
    border: 1px solid #555;
    width: 100px;
    text-align: center;
    justify-self: end;
}
.sim-arcana-input-row-18 { padding: 8px; width: 18%; font-size: 0.9rem !important; }
.u-border-top-555 { border-color: #555; margin: 15px 0; }
.u-block-margin10pct { display: block; margin: 0 10%; }
.compare-view-toggle-btn {
    padding: 7px 22px;
    margin: 0 4px;
    border-radius: 4px;
    border: 1px solid #666;
    background: var(--color-selected-bg);
    color: var(--color-text);
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.15s, color 0.15s;
}
.compare-view-toggle-btn.active {
    background-color: #b38c44;
    border-color: #b38c44;
    color: #fff;
    font-weight: bold;
}
.compare-slot-box {
    transition: border-color 0.15s;
}
.compare-slot-box:hover {
    border-color: #b38c44 !important;
}