/* ===========================
   テナント管理画面 共通レイアウト
   （operator_base.twig / operator_auth_base.twig で読み込み）
=========================== */

.operator-body {
    background-color: var(--color-bg);
}

/* ---------- ログイン・登録画面（operator_auth_base.twig） ---------- */

/* テナント専用ヘッダー（サイト本体の.headerとは別物。コイン残高等は表示せず、
   ログイン／テナント登録／ユーザーサイトへの導線のみのシンプルな帯） */
.operator-auth-header {
    background: #ffffff;
    border-bottom: 3px solid var(--color-gold);
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    height: 60px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}

.operator-auth-header__logo-link {
    display: flex;
    align-items: center;
    gap: 10px;
}

.operator-auth-header__logo {
    height: 34px;
    width: auto;
}

.operator-auth-header__tag {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-light);
    letter-spacing: 1px;
    border-left: 1px solid var(--color-border);
    padding-left: 10px;
}

.operator-auth-header__nav {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
}

.operator-auth-header__nav-item {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
    padding: 8px 14px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.operator-auth-header__nav-item:hover {
    background: var(--color-bg-light);
}
.operator-auth-header__nav-item--active {
    background: var(--color-primary);
    color: #ffffff;
}
.operator-auth-header__nav-item--muted {
    color: var(--color-text-light);
    font-weight: 400;
}

/* テナント専用フッターは共通の.footer系クラス（common.css）をそのまま流用しているため、
   ここでの追加スタイルは不要 */

.operator-auth-shell {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
}

@media (max-width: 480px) {
    .operator-auth-header {
        padding: 0 12px;
    }
    .operator-auth-header__tag {
        display: none;
    }
    .operator-auth-header__nav {
        gap: 2px;
    }
    .operator-auth-header__nav-item {
        padding: 6px 8px;
        font-size: 12px;
    }
}

/* ---------- 登録フォーム専用パーツ ---------- */
.auth-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding-top: 4px;
}
.auth-radio-group__option {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text);
}
.auth-radio-group__option input {
    width: auto;
}

.auth-hint {
    display: block;
    font-size: 11px;
    color: var(--color-text-light);
    margin-top: 4px;
    line-height: 1.5;
}

/* ---------- 対象年齢（20歳以上対象／アダルト商品）チェック（2026-08-23追加） ---------- */
.gacha-age-check {
    background: #fdecea;
    border: 1px solid #f5c2c0;
    border-radius: 8px;
    padding: 12px 14px 14px;
    margin-bottom: 16px;
}
.gacha-age-check .auth-form__group {
    margin-bottom: 8px;
}
.gacha-age-check .auth-form__group:last-of-type {
    margin-bottom: 4px;
}
.gacha-age-check__warning {
    font-size: 11px;
    font-weight: 700;
    color: #9c2b28;
    margin: 6px 0 0;
    line-height: 1.6;
}

/* ---------- ご利用プラン（カード型選択） ---------- */
.plan-explainer__notice {
    color: var(--color-danger, #c0392b);
    font-weight: 700;
    font-size: 13px;
    line-height: 1.8;
    margin: -6px 0 16px;
}

.plan-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 10px 0 16px;
}
.plan-card {
    position: relative;
    display: block;
    background: #ffffff;
    border: 2px solid var(--color-border);
    border-radius: 12px;
    padding: 16px 16px 12px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.plan-card:hover {
    border-color: var(--color-primary);
}
.plan-card--selected {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(255, 140, 0, 0.15);
}
.plan-card__radio {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
}
.plan-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), #FFB347);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 14px;
    margin-bottom: 10px;
}
.plan-card__name {
    font-size: 15px;
    font-weight: 900;
    color: var(--color-text);
    margin-bottom: 10px;
    padding-right: 24px;
}
.plan-card__row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    padding: 6px 0;
    color: var(--color-text);
}
.plan-card__row + .plan-card__row {
    border-top: 1px solid #f0f0f0;
}
.plan-card__row-label {
    color: var(--color-text-light);
    white-space: nowrap;
}
/* 「サイクル」の値（例：15日締め25日・末締め翌月10日入金）はプランによって長さが大きく異なり、
   ラベルと横並び（space-between）のままだと残り幅が狭すぎて1文字ずつ折り返されてしまう
   （2026-08-24、すずきP指摘：テナント登録画面での表示崩れ）。この行のみラベルを上・値を下に
   縦積みにして、値がカード幅いっぱいを使って自然に折り返せるようにする。 */
.plan-card__row--cycle {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.plan-card__row--cycle .plan-card__row-label {
    font-size: 11px;
}
.plan-card__row--cycle > span:last-child {
    line-height: 1.5;
}

.plan-pending-notice {
    background: #fff9f0;
    border: 1px solid #f0d9b0;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
    font-size: 13px;
}
.plan-pending-notice p {
    margin-bottom: 10px;
}

@media (max-width: 600px) {
    .plan-cards {
        grid-template-columns: 1fr;
    }
}

.auth-form__section-title {
    font-size: 13px;
    font-weight: 900;
    color: var(--color-text);
    margin: 24px 0 10px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

/* ---------- 管理画面レイアウト（operator_base.twig） ---------- */
.operator-layout {
    display: flex;
    min-height: 100vh;
}

.operator-sidebar {
    width: 220px;
    flex-shrink: 0;
    background: #23262f;
    color: #ffffff;
    display: flex;
    flex-direction: column;
}

.operator-sidebar__brand {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 18px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.operator-sidebar__logo {
    height: 28px;
    width: auto;
}

.operator-sidebar__tag {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.6);
    letter-spacing: 1px;
}

.operator-sidebar__nav {
    flex: 1;
    padding: 12px 0;
    display: flex;
    flex-direction: column;
}

.operator-sidebar__link {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 700;
    color: rgba(255,255,255,0.75);
    border-left: 3px solid transparent;
    transition: background 0.15s, color 0.15s;
}

.operator-sidebar__link:hover {
    background: rgba(255,255,255,0.06);
    color: #ffffff;
}

.operator-sidebar__link--active {
    background: rgba(255,140,0,0.14);
    border-left-color: var(--color-primary);
    color: #ffffff;
}

.operator-sidebar__foot {
    padding: 16px 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.operator-sidebar__logout {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,0.6);
}
.operator-sidebar__logout:hover {
    color: #ffffff;
}

.operator-drawer-overlay {
    display: none;
}

.operator-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.operator-topbar {
    height: 56px;
    flex-shrink: 0;
    background: #ffffff;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 12px;
}

.operator-topbar__menu-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}
.operator-topbar__menu-btn span {
    display: block;
    height: 2px;
    background: var(--color-text);
    border-radius: 1px;
}

.operator-topbar__title {
    font-size: 15px;
    font-weight: 900;
    color: var(--color-text);
}

.operator-topbar__account {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.operator-topbar__name {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
}

.operator-content {
    flex: 1;
    padding: 24px 20px 60px;
}

/* ---------- ダッシュボード ---------- */
.operator-dashboard__title {
    font-size: 18px;
    font-weight: 900;
    margin-bottom: 20px;
    color: var(--color-text);
}

.operator-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 32px;
}

.operator-announcements {
    background: #fff9f0;
    border: 1px solid #f0d9b0;
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 24px;
}
.operator-announcements__title {
    font-size: 13px;
    font-weight: 900;
    color: #b05e00;
    margin-bottom: 10px;
}
.operator-announcement {
    border-left: 3px solid var(--color-primary);
    padding: 4px 0 4px 12px;
}
.operator-announcement + .operator-announcement {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f0e0c5;
}
.operator-announcement__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 4px;
}
.operator-announcement__body {
    font-size: 13px;
    color: var(--color-text);
    white-space: pre-line;
    line-height: 1.6;
    margin-bottom: 6px;
}
.operator-announcement__date {
    font-size: 11px;
    color: var(--color-text-light);
}

.operator-card {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    padding: 16px;
    margin-bottom: 20px;
}

.operator-card__label {
    font-size: 12px;
    color: var(--color-text-light);
    margin-bottom: 8px;
}

.operator-card__value {
    font-size: 16px;
    font-weight: 900;
    color: var(--color-text);
}

.operator-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
}
.operator-badge--active {
    background: #e6f7ec;
    color: #1a7a3c;
}
.operator-badge--warn {
    background: #fff4e0;
    color: #b05e00;
}
.operator-badge--muted {
    background: #f0f0f0;
    color: var(--color-text-light);
}

/* ---------- 準備中ページ共通 ---------- */
.operator-empty-state {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    padding: 60px 20px;
    text-align: center;
}
.operator-empty-state__title {
    font-size: 16px;
    font-weight: 900;
    color: var(--color-text);
    margin-bottom: 8px;
}
.operator-empty-state__text {
    font-size: 13px;
    color: var(--color-text-light);
}

/* ---------- 店舗設定（operator/store） ---------- */
.operator-notice {
    background: #e6f7ec;
    color: #1a7a3c;
    border: 1px solid #b9e6c9;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 16px;
}

.store-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
}

.store-tabs__btn {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-light);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.store-tabs__btn:hover {
    color: var(--color-text);
}
.store-tabs__btn--active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.store-tab-panel {
    display: none;
}
.store-tab-panel.is-active {
    display: block;
}

.operator-card--form {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    padding: 24px 20px;
    max-width: 640px;
    margin-bottom: 20px;
}

/* 設定フォームは項目数が多く情報密度が高いため、行ごとに罫線を入れて見やすくする。
   auth.css（ログイン・登録フォーム用）の.auth-form__group等を再利用しつつ、
   この.operator-card--form配下でだけ罫線・文字サイズを上書きする */
.operator-card--form .auth-form__group {
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--color-border);
}
.operator-card--form .auth-form__group label {
    font-size: 12px;
    margin-bottom: 8px;
}
.operator-card--form .auth-required {
    display: inline-block;
}
.operator-card--form .auth-form__group input[type="text"],
.operator-card--form .auth-form__group input[type="email"],
.operator-card--form .auth-form__group input[type="password"],
.operator-card--form .auth-form__group input[type="tel"],
.operator-card--form .auth-form__group input[type="url"] {
    font-size: 13px;
    padding: 9px 12px;
}
.operator-card--form .auth-form__group input:disabled {
    background: var(--color-bg-light);
    color: var(--color-text-light);
}
.operator-card--form .auth-hint {
    font-size: 11px;
}
.operator-card--form .auth-card__text {
    font-size: 12px;
}
.operator-card--form .auth-radio-group__option {
    font-size: 12px;
}
.operator-card--form .auth-form__group--checkbox {
    border-bottom: none;
    padding-bottom: 0;
}
.operator-card--form .auth-form__section-title {
    font-size: 12px;
}

/* ---------- SNSリンク（テナントページ管理）: 動画URLの複数行入力 ---------- */
.sns-video-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}
.sns-video-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.sns-video-row input[type="url"] {
    flex: 1;
    min-width: 0;
}
.sns-video-row__remove {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: #ffffff;
    color: var(--color-text-light);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
.sns-video-row__remove:hover {
    background: #fdeaea;
    border-color: #e08080;
    color: #cc0000;
}
.sns-video-add {
    font-size: 13px;
    padding: 8px 14px;
}
.sns-video-add:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.tokusho-preview {
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 12px 0 20px;
}
.tokusho-preview__row {
    display: flex;
    gap: 12px;
    padding: 6px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--color-border);
}
.tokusho-preview__row:last-child {
    border-bottom: none;
}
.tokusho-preview__label {
    flex: 0 0 130px;
    font-weight: 700;
    color: var(--color-text-light);
}

/* ---------- 発送管理（operator/shipments） ---------- */
.shipment-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.shipment-card {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    padding: 16px 18px;
}

.shipment-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--color-text-light);
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
}
.shipment-card__count {
    font-weight: 700;
    color: var(--color-text);
}

.shipment-card__address {
    margin-bottom: 12px;
}
.shipment-card__address-name {
    font-size: 14px;
    font-weight: 900;
    color: var(--color-text);
    margin-bottom: 4px;
}
.shipment-card__address-detail {
    font-size: 12px;
    color: var(--color-text-light);
    line-height: 1.6;
}

.shipment-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: var(--color-bg-light);
    border-radius: 8px;
    margin-bottom: 14px;
}

.shipment-item {
    display: flex;
    align-items: center;
    gap: 10px;
}
.shipment-item__img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    flex-shrink: 0;
}
.shipment-item__info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
}
.shipment-item__name {
    font-weight: 700;
    color: var(--color-text);
}
.shipment-item__gacha {
    color: var(--color-text-light);
}

.rarity-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 900;
    color: #ffffff;
    line-height: 1.6;
}
.rarity-badge--ur { background: var(--color-ur); }
.rarity-badge--ssr { background: var(--color-ssr); }
.rarity-badge--sr { background: var(--color-sr); }
.rarity-badge--r { background: var(--color-r); }
.rarity-badge--n { background: var(--color-n); }

.shipment-card__action .btn {
    width: 100%;
}

.shipment-card__status-note {
    font-size: 12px;
    color: var(--color-text-light);
    text-align: right;
}

/* ---------- 送料「任意」パターン：送料案内フォーム（2026-09-07追加） ---------- */
.shipping-quote-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--color-border);
}
.shipping-quote-form__packages {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.shipping-quote-form__package {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: var(--color-bg-light);
    border-radius: 8px;
}
.shipping-quote-form__package label {
    font-size: 12px;
    color: var(--color-text-light);
}
.shipping-quote-form__package select,
.shipping-quote-form__package input {
    padding: 6px 8px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
}
.shipment-card__status-note ul {
    margin: 6px 0 0;
    padding-left: 18px;
    text-align: left;
}

/* 2026-09-07追加：配送区分（特殊配送／クール便／通常）表示（すずきP指示） */
.shipment-card__quote-category {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-light);
    padding-top: 8px;
}

/* ---------- テナントページ管理（operator/page） ---------- */
.tenant-page-banner-preview {
    margin-bottom: 12px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--color-border);
}
.tenant-page-banner-preview img {
    width: 100%;
    display: block;
}
.tenant-page-logo-preview {
    display: inline-block;
    margin-bottom: 12px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-light);
}
.tenant-page-logo-preview img {
    max-height: 60px;
    max-width: 240px;
    display: block;
}
.tenant-page-info-card {
    margin-top: 16px;
}
.tenant-page-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}
.tenant-page-actions__copied {
    font-size: 12px;
    font-weight: 700;
    color: #1a7a3c;
}

/* ---------- ガチャ管理（operator/gacha） 2026-08-22 ---------- */
.btn--sm {
    padding: 6px 16px;
    font-size: 12px;
}
.btn--danger {
    background: #ffffff;
    border: 1px solid #d9534f;
    color: #d9534f;
    border-radius: 20px;
    padding: 8px 20px;
    font-weight: 700;
    cursor: pointer;
}
.btn--danger:hover {
    background: #d9534f;
    color: #ffffff;
}

/* 2026-08-30追加：ガチャ公開ロック（法的要件対応）。公開ボタン・警告文・ロック済み通知 */
.gacha-publish-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
}
.gacha-publish-warning__text {
    font-size: 13px;
    font-weight: 700;
    color: #9c2b28;
    line-height: 1.7;
    margin: 0 0 14px;
}
.gacha-publish-locked-notice {
    padding: 14px 16px;
    background: #f5f5f5;
    border-radius: 8px;
    color: #666;
    font-size: 13px;
    font-weight: 700;
}

.operator-notice--error {
    background: #fdecea;
    border: 1px solid #f5c2c0;
    color: #9c2b28;
}
.operator-notice--error ul {
    margin: 0;
    padding-left: 18px;
}

.gacha-list-actions {
    margin-bottom: 16px;
}

.gacha-slot-status {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 14px;
}

.gacha-slot-status__label {
    color: #666;
}

.gacha-slot-status__value {
    font-weight: 600;
}

.gacha-slot-status__cta {
    margin-left: 4px;
}

.gacha-manage-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.gacha-manage-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    padding: 16px 18px;
}
.gacha-manage-card__title {
    font-weight: 900;
    font-size: 16px;
    margin-bottom: 6px;
}
.gacha-manage-card__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--color-text-light);
}
.gacha-manage-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.gacha-share-btn__copied {
    font-size: 12px;
    font-weight: 700;
    color: #1a7a3c;
}

/* ---------- 精算 ---------- */
.operator-page-lead {
    font-size: 13px;
    color: var(--color-text-light);
    margin-bottom: 16px;
}
.operator-page-lead a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 700;
}
.operator-page-lead a:hover {
    text-decoration: underline;
}

.operator-section-title {
    font-size: 15px;
    font-weight: 900;
    color: var(--color-text);
    margin: 28px 0 12px;
}

.settlement-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.settlement-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    padding: 16px 18px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s;
}
.settlement-card:hover {
    border-color: var(--color-primary);
}
.settlement-card__title {
    font-weight: 900;
    font-size: 16px;
    margin-bottom: 6px;
}
.settlement-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--color-text-light);
}
.settlement-card__arrow {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary);
    white-space: nowrap;
}

.settlement-summary {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    padding: 20px 22px;
    margin-bottom: 8px;
}
.settlement-summary__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 900;
    margin-bottom: 16px;
}
.settlement-summary__grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.settlement-summary__row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
}
.settlement-summary__row--total {
    border-bottom: none;
    border-top: 2px solid var(--color-border);
    margin-top: 4px;
    padding-top: 12px;
    font-size: 17px;
    font-weight: 900;
}
.settlement-summary__label {
    color: var(--color-text-light);
}
.settlement-summary__row--total .settlement-summary__label {
    color: var(--color-text);
}
.settlement-summary__value {
    font-weight: 700;
}
.settlement-summary__value--minus {
    color: var(--color-danger, #c0392b);
}
.settlement-summary__value--plus {
    color: #1a7a3c;
}
.settlement-summary__note {
    margin-top: 14px;
    font-size: 12px;
    color: var(--color-text-light);
}

.settlement-table-wrap {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    padding: 16px 18px;
    margin-bottom: 14px;
    overflow-x: auto;
}
.settlement-table__gacha-name {
    font-weight: 900;
    font-size: 14px;
    margin-bottom: 10px;
}
.settlement-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    white-space: nowrap;
}
.settlement-table th {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 2px solid var(--color-border);
    color: var(--color-text-light);
    font-weight: 700;
}
.settlement-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #f0f0f0;
}
.settlement-table__num {
    text-align: right;
}

.settlement-rarity {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 900;
    color: #ffffff;
}
.settlement-rarity--UR  { background: linear-gradient(135deg, #FF4500, #FF6B00); }
.settlement-rarity--SSR { background: linear-gradient(135deg, #FF8C00, #FFD700); }
.settlement-rarity--SR  { background: linear-gradient(135deg, #CC44CC, #FF88FF); }
.settlement-rarity--R   { background: linear-gradient(135deg, #2288FF, #44AAFF); }
.settlement-rarity--N   { background: linear-gradient(135deg, #88AACC, #AACCEE); }

/* ---------- 明細/精算：ハブ画面・仮精算・レポート共通（2026-08-23追加） ---------- */
.operator-page-lead--between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.report-hub-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 8px;
}
.report-hub-card {
    display: block;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    padding: 16px 18px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.report-hub-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 10px rgba(0,0,0,0.10);
}
.report-hub-card--accent {
    border-color: var(--color-primary);
    background: #fff8ef;
}
.report-hub-card__title {
    font-weight: 900;
    font-size: 15px;
    margin-bottom: 6px;
}
.report-hub-card__desc {
    font-size: 12px;
    color: var(--color-text-light);
    line-height: 1.5;
}

.settlement-provisional-notice {
    background: #fff4e0;
    border: 1px solid #e5a300;
    color: #7a4d00;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 14px;
}

.settlement-summary__row--sub {
    padding-left: 16px;
    font-size: 13px;
}
.settlement-summary__row--sub .settlement-summary__label {
    color: var(--color-text-light);
}
.settlement-summary__row--sub .settlement-summary__value {
    font-weight: 400;
}

.report-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
}
.report-tabs__item {
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-light);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}
.report-tabs__item--active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.report-filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 14px;
}
.report-filter-form__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--color-text-light);
}
.report-filter-form__field input {
    padding: 7px 10px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 13px;
}
.report-filter-form__checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-text);
}

.report-download-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.report-bucket {
    margin-bottom: 18px;
}
.report-bucket__label {
    font-weight: 900;
    font-size: 14px;
    margin-bottom: 8px;
    border-left: 4px solid var(--color-primary);
    padding-left: 8px;
}

.summary-table-wrap {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    padding: 16px 18px;
    margin-bottom: 14px;
    overflow-x: auto;
}
.summary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    white-space: nowrap;
}
.summary-table th, .summary-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #f0f0f0;
}
.summary-table th {
    border-bottom: 2px solid var(--color-border);
    color: var(--color-text-light);
    font-weight: 700;
    text-align: left;
}
.summary-table__subject {
    text-align: left;
    font-weight: 700;
    white-space: nowrap;
}
.summary-table__sub-row .summary-table__subject,
.summary-table__sub-row td {
    color: var(--color-text-light);
    font-weight: 400;
    font-size: 12px;
}
.summary-table__highlight-row td {
    background: #fff8ef;
    font-weight: 900;
}
.summary-table__total-col {
    background: #f7f7f7;
    font-weight: 900;
}
.summary-table__nodata {
    color: #bbb;
}

@media (max-width: 700px) {
    .report-hub-grid {
        grid-template-columns: 1fr;
    }
}

.gacha-step-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--color-border);
}
.gacha-step-nav__link {
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-light);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}
.gacha-step-nav__link--active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.gacha-prob-sum {
    padding: 10px 16px;
    border-radius: 8px;
    background: #eefbf1;
    border: 1px solid #b9e6c4;
    color: #1a7a3c;
    font-weight: 700;
    margin-bottom: 16px;
}
.gacha-prob-sum--warn {
    background: #fff6e5;
    border-color: #f0d38a;
    color: #8a6416;
}
.gacha-prob-sum__note {
    font-weight: 400;
    font-size: 12px;
    margin-left: 8px;
}
.gacha-prob-sum__note--ok {
    font-weight: 700;
}
.gacha-prob-sum__remain {
    margin-left: 12px;
    font-weight: 400;
    font-size: 13px;
    opacity: 0.85;
}

.gacha-item-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}
.gacha-item-card {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    padding: 14px 16px;
}
.gacha-item-card__main {
    display: flex;
    align-items: center;
    gap: 12px;
}
.gacha-item-card__img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    flex-shrink: 0;
}
.gacha-item-card__img--empty {
    background: var(--color-bg-light);
}
.gacha-item-card__info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.gacha-item-card__name {
    font-weight: 700;
}
.gacha-item-card__sub {
    width: 100%;
    font-size: 12px;
    color: var(--color-text-light);
}
.gacha-item-card__actions {
    margin-top: 10px;
    display: flex;
    gap: 8px;
}
.gacha-item-edit-form {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--color-border);
}

.gacha-item-gallery {
    margin-top: 14px;
}
.gacha-item-gallery__title {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-light);
    margin-bottom: 8px;
}
.gacha-item-gallery__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.gacha-item-gallery__thumb {
    position: relative;
    width: 64px;
    height: 64px;
}
.gacha-item-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--color-border);
}
.gacha-item-gallery__remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #d9534f;
    color: #ffffff;
    border: none;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}
.gacha-item-gallery__add {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gacha-next-step {
    margin-top: 20px;
}

.gacha-use-simulator-cta {
    margin-bottom: 20px;
}

.gacha-stage-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.gacha-stage-row__label {
    font-weight: 700;
    min-width: 70px;
}
.gacha-stage-row select,
.gacha-stage-row input {
    max-width: 140px;
}

.gacha-preset-slots {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.gacha-preset-slot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
}
.gacha-preset-slot:last-child {
    border-bottom: none;
}
.gacha-preset-slot__label {
    flex: 1;
    min-width: 160px;
    font-size: 13px;
}

.gacha-sim-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}
.gacha-sim-table th,
.gacha-sim-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    font-size: 13px;
}
.gacha-sim-table input {
    width: 100px;
    padding: 6px 8px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
}
.gacha-sim-error {
    color: #9c2b28;
    font-weight: 700;
    margin-top: 10px;
}
.gacha-sim-spins {
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.9;
}

/* ---------- SP対応 ---------- */
@media (max-width: 768px) {
    .operator-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 78%;
        max-width: 280px;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 1200;
    }
    .operator-sidebar.is-open {
        transform: translateX(0);
    }
    .operator-drawer-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: 1100;
    }
    .operator-drawer-overlay.is-open {
        opacity: 1;
        pointer-events: auto;
    }
    .operator-topbar__menu-btn {
        display: flex;
    }
    .operator-content {
        padding: 18px 14px 50px;
    }
    .operator-card--form {
        padding: 18px 14px;
        max-width: 100%;
    }
    .store-tabs__btn {
        padding: 8px 10px;
        font-size: 12px;
    }
    .tokusho-preview__row {
        flex-direction: column;
        gap: 2px;
    }
    .tokusho-preview__label {
        flex: none;
    }
    .gacha-manage-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .gacha-sim-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    .gacha-step-nav {
        overflow-x: auto;
        flex-wrap: nowrap;
    }
    .gacha-sim-rarity-row__head {
        flex-wrap: wrap;
    }
    .gacha-method-choice {
        grid-template-columns: 1fr;
    }
}

/* ---------- 2026-08-22 レアリティ確率化・シミュレーター独立化 追加分 ---------- */

.gacha-rarity-prob-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
}
.gacha-rarity-prob-form__row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
}
.gacha-rarity-prob-form__row input {
    width: 100px;
}
.gacha-rarity-prob-form button {
    height: 40px;
}

.gacha-sim-rarity-row {
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
}
.gacha-sim-rarity-row:last-child {
    border-bottom: none;
}
.gacha-sim-rarity-row__head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
}
.gacha-sim-rarity-row__head label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}
.gacha-sim-rarity-row__head input {
    width: 90px;
    padding: 6px 8px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
}
.gacha-sim-rarity-row__costs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.gacha-sim-cost-slot {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
}
.gacha-sim-cost-slot__label {
    color: var(--color-text-muted, #888);
}
.gacha-sim-cost-slot input {
    width: 80px;
    padding: 4px 6px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
}

.gacha-method-choice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.gacha-method-choice__card {
    display: block;
    padding: 24px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface, #fff);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.gacha-method-choice__card:hover {
    border-color: var(--color-primary, #c9a15a);
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.gacha-method-choice__title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
}
.gacha-method-choice__desc {
    font-size: 13px;
    line-height: 1.7;
    color: var(--color-text-muted, #666);
}

/* ==================== アバターPOPUP選択（2026-08-22追加） ==================== */

.avatar-picker-trigger {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface, #fff);
}
.avatar-picker-trigger__thumb {
    width: 64px;
    height: 64px;
    flex: 0 0 auto;
    border-radius: 8px;
    background: var(--color-bg-subtle, #f4f4f4);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 12px;
    color: var(--color-text-muted, #888);
}
.avatar-picker-trigger__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.avatar-picker-trigger__info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.avatar-picker-trigger__buttons {
    display: flex;
    gap: 8px;
}

.avatar-picker-modal,
.avatar-zoom-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.avatar-picker-modal__backdrop,
.avatar-zoom-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}
.avatar-picker-modal__panel {
    position: relative;
    width: min(720px, 92vw);
    max-height: 86vh;
    overflow-y: auto;
    background: var(--color-surface, #fff);
    border-radius: 12px;
    padding: 20px;
}
.avatar-picker-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.avatar-picker-modal__close {
    border: none;
    background: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text-muted, #666);
}
.avatar-picker-modal__option-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}
.avatar-picker-fullpack {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 13px;
    background: var(--color-bg-subtle, #f7f2e8);
    padding: 8px 12px;
    border-radius: 8px;
}
.avatar-picker-fullpack__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.avatar-picker-fullpack__note {
    font-size: 11px;
    color: var(--color-danger, #c0392b);
}
.avatar-picker-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.avatar-picker-tabs__btn {
    padding: 6px 12px;
    font-size: 13px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface, #fff);
    cursor: pointer;
}
.avatar-picker-tabs__btn--active {
    background: var(--color-primary, #c9a15a);
    color: #fff;
    border-color: var(--color-primary, #c9a15a);
}
.avatar-picker-pack-notice {
    font-size: 12px;
    color: var(--color-text-muted, #888);
    margin-bottom: 10px;
}
.avatar-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 12px;
}
.avatar-picker-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}
.avatar-picker-cell__thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    padding: 0;
    background: var(--color-bg-subtle, #f4f4f4);
    cursor: zoom-in;
}
.avatar-picker-cell__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.avatar-picker-cell--locked .avatar-picker-cell__thumb img {
    opacity: 0.4;
    filter: grayscale(60%);
}
.avatar-picker-cell__lock {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
}
.avatar-picker-cell__name {
    font-size: 12px;
    line-height: 1.4;
    word-break: break-all;
}
.avatar-picker-cell__select,
.avatar-picker-unlock-btn {
    width: 100%;
}

.avatar-picker-cell--selected .avatar-picker-cell__thumb {
    border-color: var(--color-primary, #c9a15a);
    box-shadow: 0 0 0 2px var(--color-primary, #c9a15a);
}

/* 演出（エフェクト）ピッカー：2026-08-24追加。アバターピッカーの見た目を流用しつつ、
   サムネイルが動画プレビュー（<video>）になる点だけ追加でスタイルする */
.avatar-picker-trigger__thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.avatar-picker-cell__thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.avatar-picker-cell--locked .avatar-picker-cell__thumb video {
    opacity: 0.4;
    filter: grayscale(60%);
}
.effect-picker-cell__thumb {
    cursor: pointer;
}
.effect-picker-cell__thumb--none {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--color-text-muted, #888);
}

.avatar-zoom-modal__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background: var(--color-surface, #fff);
    border-radius: 12px;
    padding: 20px;
    max-width: 90vw;
    max-height: 90vh;
}
.avatar-zoom-modal__panel img {
    max-width: 70vw;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 8px;
}

/* 2026-08-26修正：Square本実装後は「準備中」注意書きではなく、店舗設定の契約管理タブへの
   案内リンクとして使うため、警告色ではなく通常の案内文の色にした */
.avatar-coming-soon-note {
    display: inline-block;
    margin-left: 8px;
    font-size: 12px;
    color: var(--color-text-muted, #6b7280);
}

.avatar-coming-soon-note a {
    color: var(--color-primary, #d97706);
    text-decoration: underline;
}

/* ==================== アバター契約管理タブ（2026-08-22追加） ==================== */

.avatar-contract-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--color-border);
}
.avatar-contract-row:last-child {
    border-bottom: none;
}
.avatar-contract-row--full {
    background: var(--color-bg-subtle, #f7f2e8);
    border-radius: 8px;
    padding: 14px 12px;
    margin-bottom: 8px;
    border-bottom: none;
}
.avatar-contract-row__label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font-size: 14px;
    font-weight: 600;
}
.avatar-contract-row__note {
    font-size: 11px;
    font-weight: 400;
    color: var(--color-danger, #c0392b);
}
.avatar-contract-row__price {
    font-size: 12px;
    font-weight: 400;
    color: var(--color-text-muted, #888);
}
.avatar-contract-row__status {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--color-bg-subtle, #eee);
    color: var(--color-text-muted, #666);
}
.avatar-contract-row__status--active {
    background: #e4f4e8;
    color: #2e7d4f;
}
/* 2026-08-25追加：Square本実装で「解約する」ボタンをフォームで出すようになったため */
.avatar-contract-row__cancel-form {
    display: inline-flex;
    margin: 0;
}

@media (max-width: 600px) {
    .avatar-picker-modal__panel {
        padding: 14px;
    }
    .avatar-picker-grid {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    }
}

/* ==================== 使い方マニュアル（operator/manual、2026-08-27追加） ==================== */

/* サイドバー最下部のマニュアルリンクだけ、業務機能群（ガチャ管理〜フォロワーへの通知）と
   視覚的に区別するため上に区切り線を入れる */
.operator-sidebar__link--manual {
    margin-top: auto;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.operator-manual {
    max-width: 900px;
}

.operator-manual__intro {
    font-size: 13px;
    line-height: 1.8;
    color: var(--color-text-light);
    margin-bottom: 20px;
}

.operator-manual__toc {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    padding: 18px 20px;
    margin-bottom: 32px;
}
.operator-manual__toc-title {
    font-size: 13px;
    font-weight: 900;
    color: var(--color-text);
    margin-bottom: 10px;
}
.operator-manual__toc-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.operator-manual__toc-list a {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
}
.operator-manual__toc-list a:hover {
    text-decoration: underline;
}
.operator-manual__toc-sub {
    margin: 2px 0 4px 14px;
    font-size: 12px;
    font-weight: 400;
}
.operator-manual__toc-sub a {
    color: var(--color-text-light);
    font-weight: 400;
}

.operator-manual__section {
    margin-bottom: 44px;
    padding-top: 8px;
    scroll-margin-top: 16px;
}
.operator-manual__section-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 17px;
    font-weight: 900;
    color: var(--color-text);
    margin-bottom: 6px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-primary);
}
.operator-manual__section-title small {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-light);
}
.operator-manual__section-lead {
    font-size: 13px;
    line-height: 1.8;
    color: var(--color-text);
    margin: 14px 0;
}

.operator-manual__subsection {
    margin: 24px 0;
}
.operator-manual__subsection-title {
    font-size: 14px;
    font-weight: 900;
    color: var(--color-text);
    margin-bottom: 8px;
    padding-left: 10px;
    border-left: 4px solid var(--color-primary);
}

.operator-manual__steps {
    margin: 10px 0 16px;
    padding-left: 22px;
    font-size: 13px;
    line-height: 1.9;
    color: var(--color-text);
}
.operator-manual__steps li {
    margin-bottom: 4px;
}

.operator-manual__fields {
    margin: 10px 0 16px;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.9;
    color: var(--color-text);
}
.operator-manual__fields li {
    margin-bottom: 6px;
}
.operator-manual__fields b {
    font-weight: 900;
}

.operator-manual__note {
    background: #fff9f0;
    border: 1px solid #f0d9b0;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 14px 0;
    font-size: 12px;
    line-height: 1.8;
    color: #7a5200;
}
.operator-manual__note strong {
    color: #b05e00;
}
.operator-manual__note--danger {
    background: #fdecea;
    border-color: #f5c2c0;
    color: #9c2b28;
}
.operator-manual__note--danger strong {
    color: #9c2b28;
}

.operator-manual__shot {
    margin: 14px 0 18px;
}
.operator-manual__shot img {
    width: 100%;
    max-width: 720px;
    display: block;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.operator-manual__shot-caption {
    font-size: 11px;
    color: var(--color-text-light);
    margin-top: 6px;
}

.operator-manual__shot-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 14px 0 18px;
}
.operator-manual__shot-row .operator-manual__shot {
    flex: 1 1 320px;
    margin: 0;
    min-width: 0;
}
.operator-manual__shot-row .operator-manual__shot img {
    max-width: 100%;
}

.operator-manual__back-to-top {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-light);
    text-decoration: none;
    margin-top: 4px;
}
.operator-manual__back-to-top:hover {
    color: var(--color-primary);
}

@media (max-width: 600px) {
    .operator-manual__toc-list {
        grid-template-columns: 1fr;
    }
    .operator-manual__shot-row {
        flex-direction: column;
    }
}

/* 2026-09-07追加：ガチャ送料パターン「送料参考料金表」（すずきP指示） */
.gacha-rate-reference {
    margin: 8px 0 20px;
    padding: 12px 14px;
    border: 1px solid var(--color-border, #ddd);
    border-radius: 6px;
    background: #fafafa;
}
.gacha-rate-reference > summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 13px;
}
.gacha-rate-reference__size {
    margin-top: 14px;
}
.gacha-rate-reference__size h4 {
    font-size: 12px;
    margin: 0 0 6px;
}
.gacha-rate-reference__scroll {
    overflow-x: auto;
}
.gacha-rate-reference__table {
    border-collapse: collapse;
    font-size: 11px;
    white-space: nowrap;
}
.gacha-rate-reference__table th,
.gacha-rate-reference__table td {
    border: 1px solid var(--color-border, #ddd);
    padding: 3px 6px;
    text-align: right;
}
.gacha-rate-reference__table thead th {
    text-align: center;
    background: #f0f0f0;
}
.gacha-rate-reference__table tbody th {
    text-align: left;
    background: #f0f0f0;
    white-space: nowrap;
}
/* 2026-09-07追加：送料参考料金表のクール便セクション（通常運賃＋クール追加料金）を視覚的に区別 */
.gacha-rate-reference__size--cool h4 {
    color: #0d6efd;
}
.gacha-rate-reference__size--cool .gacha-rate-reference__table td {
    background: #eef6ff;
}