/**
 * Veil Tokyo
 * Page Specific Styles
 */

/* ==========================================================================
   1. FRONT PAGE SPECIFIC UTILITIES & LAYOUT TUNING
   ========================================================================== */

/* 全幅・幅指定クラス */
.w-full {
    width: 100%;
}

.max-w-320 {
    width: 320px;
}

.grid-col-all {
    grid-column: 1 / -1;
}

/* マージン・余白ユーティリティクラス (8px Grid 準拠) */
.mb-8 {
    margin-bottom: var(--space-8);
}

.mb-12 {
    margin-bottom: var(--space-12);
}

.mb-16 {
    margin-bottom: var(--space-16);
}

.mb-24 {
    margin-bottom: var(--space-24);
}

.mb-40 {
    margin-bottom: var(--space-40);
}

.mt-12 {
    margin-top: var(--space-12);
}

.mt-16 {
    margin-top: var(--space-16);
}

.mt-auto {
    margin-top: auto;
}

.ml-4 {
    margin-left: 4px;
}

.pt-16 {
    padding-top: var(--space-16);
}

.py-32 {
    padding-top: var(--space-32);
    padding-bottom: var(--space-32);
}

/* テキスト・配置ユーティリティ */
.text-center {
    text-align: center;
}

.flex-center-gap-16 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-16);
    flex-wrap: wrap;
}

.flex-between-center {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-gap-8 {
    display: flex;
    gap: var(--space-8);
    flex-wrap: wrap;
}

.flex-baseline-gap-8 {
    display: flex;
    align-items: baseline;
    gap: var(--space-8);
}

/* 透過度指定 */
.opacity-60 {
    opacity: 0.6;
}

/* 洗練コンパクトボタングループスタイル */
.load-more-btn-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-16);
    flex-wrap: wrap;
    margin-top: var(--space-8);
    width: 100%;
}

.load-more-btn-group .btn {
    min-width: 240px;
    padding: 0 var(--space-24);
    white-space: nowrap;
}

/* スマホ表示時(576px以下)でのダブルボタン縦積みレスポンシブ最適化 */
@media (max-width: 576px) {
    .flex-center-gap-16 {
        flex-direction: column;
        gap: var(--space-12);
        width: 100%;
    }

    .flex-center-gap-16 .btn,
    .flex-center-gap-16 .flex-1 {
        width: 100%;
        flex: none;
    }

    .load-more-btn-group {
        flex-direction: column;
        gap: var(--space-12);
        width: 100%;
    }

    .load-more-btn-group .btn {
        width: 100%;
        max-width: 340px;
        min-width: 0;
    }
}

/* ==========================================================================
   2. LAST CALL SECTION SPECIFIC TUNING (Refined Ver.)
   ========================================================================== */
.lc-badge-fixed {
    position: relative;
    top: 0;
    left: 0;
    margin-bottom: var(--space-8);
    border-color: var(--accent-gold);
    color: var(--accent-gold);
    font-family: var(--font-jp);
    font-weight: 500;
}

.lc-badge-time {
    font-family: var(--font-num);
    font-size: 14px;
}

.lc-badge-sub {
    font-size: 11px;
    margin-left: 4px;
}

.lc-tag-gold {
    background-color: var(--accent-gold);
    color: var(--bg-base);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    display: inline-block;
    font-family: var(--font-jp);
}

.lc-tag-outline {
    background-color: transparent;
    border: 1px solid var(--accent-gold);
    color: var(--accent-gold);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    display: inline-block;
    font-family: var(--font-jp);
}

.lc-cast-name-text {
    font-size: 18px;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-8);
    font-weight: 500;
}

.slogan-wrap-mb {
    margin-bottom: var(--space-8);
}

.cast-slogan-reset {
    margin-bottom: 0;
    min-height: auto;
    display: -webkit-box;
    display: box;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

/* 📍 待機エリア高視認性独立バッジ (PC・タブレット時は顔写真左上へぴったりアタッチ) */
.lc-standby-badge {
    position: absolute;
    top: var(--space-8);
    left: var(--space-8);
    right: auto;
    transform: none;
    background-color: rgba(14, 21, 36, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--accent-gold);
    color: var(--accent-gold);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    z-index: 5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* カード左上にステータスバッジスタックが存在する場合、待機場所バッジは写真右上に自動シフトして被りを完全防止 */
.cast-card .cast-badges-stack + .cast-img-wrap .lc-standby-badge,
.cast-card .cast-badges-stack ~ .cast-img-wrap .lc-standby-badge {
    top: var(--space-8);
    right: var(--space-8);
    left: auto;
    transform: none;
}

/* 左上ステータスバッジスタック（LAST CALL赤バッジ＋即案内OKバッジの縦並び配置） */
.cast-badges-stack {
    position: absolute;
    top: var(--space-8);
    left: var(--space-8);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    pointer-events: none;
}

/* 全幅出発エリア案内バナー (割引バナーの上) */
.lc-dispatch-info-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: var(--space-8);
    margin-bottom: 2px;
    padding: 6px var(--space-12);
    background-color: rgba(14, 21, 36, 0.7);
    border: 1px solid var(--border-thin);
    border-radius: var(--radius-sm);
    box-sizing: border-box;
    text-align: center;
}

.lc-dispatch-info-text {
    font-size: 11px;
    color: var(--accent-gold);
    letter-spacing: 0.5px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* エレガントな割引料金表示バナー */
.lc-price-discount-wrap {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--space-8);
    margin-top: var(--space-8);
    padding: 6px var(--space-12);
    background: linear-gradient(135deg, rgba(194, 155, 83, 0.12) 0%, rgba(14, 21, 36, 0.8) 100%);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-sm);
    width: 100%;
    box-sizing: border-box;
}

.lc-discount-label {
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 1px;
    font-weight: 500;
}

.lc-discount-num {
    font-family: var(--font-num);
    font-size: 24px;
    font-weight: 700;
    color: var(--accent-gold);
    letter-spacing: 1px;
    line-height: 1;
}

.lc-discount-unit {
    font-family: var(--font-en);
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-gold);
    letter-spacing: 1px;
}

/* スマホ表示時でのレスポンシブ補強調整 */
@media (max-width: 576px) {
    .lc-price-discount-wrap {
        justify-content: center;
        margin: var(--space-8) auto 0;
    }

    .flex-gap-8 {
        justify-content: flex-start;
        flex-wrap: nowrap;
    }

    .lc-cast-name-text {
        text-align: left;
    }
}

/* ==========================================================================
   3. NOW ON SALE & CAST CARDS SPECIFIC TUNING
   ========================================================================== */
.badge-instant {
    border-color: #10B981;
    color: #10B981;
    top: 8px;
    left: 8px;
}

.badge-gold {
    border-color: var(--accent-gold);
    color: var(--accent-gold);
    top: 8px;
    left: 8px;
}

.cast-stats-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
    background-color: var(--bg-base);
    padding: var(--space-16);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-thin);
    margin-bottom: var(--space-16);
    text-align: center;
}

/* ==========================================================================
   4. DIARY & REVIEWS & RECRUIT SPECIFIC TUNING
   ========================================================================== */
.diary-card-body {
    padding: var(--space-24);
}

.empty-message-text {
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    padding: var(--space-32) 0;
}