/* calc.css - 레이아웃 정비 (사이드 서랍 방식) */

.calc-menu-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 70vh;
    gap: 1.5rem;
    padding-top: 0;
}

.calc-buttons {
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
    /* 아이템 간 간격 */
    align-items: center;
    justify-content: center;
}

.calc-menu-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    position: relative;
    cursor: pointer;
    z-index: 1;
    /* 기본 z-index */
    -webkit-tap-highlight-color: transparent;
}

/* 호버 시 버튼과 그 장식 요소들을 최상단으로 올림 */
.calc-menu-item:hover {
    z-index: 10;
}

/* HIF 수직 라인 끝 별 장식 */
#btn-hif::before {
    content: '✦';
    position: absolute;
    right: -45.5px;
    /* 중심을 왼쪽으로 이동 */
    top: calc(60% - 13px);
    font-size: 16px;
    color: #fff;
    /* 내부를 흰색으로 채움 */
    -webkit-text-stroke: 1px #ccc;
    /* 기본 테두리를 회색으로 설정 */
    transition: color 0.3s ease, -webkit-text-stroke-color 0.3s ease, transform 0.3s ease;
    /* 부드러운 색상 전환 추가 */
    pointer-events: none;
    /* 클릭 반응 제거 */
    z-index: 2;
}

/* 개별 버튼 우측 수직 라인 공통 설정 */
.calc-menu-item::after {
    content: '';
    position: absolute;
    right: -40px;
    width: 3px;
    /* 두께를 다시 3px로 복구 */
    background-size: 100% 200%;
    /* 배경을 2배 높이로 설정 */
    border-radius: 99px;
    transition: background-position 0.3s ease, background-color 0.3s ease;
    /* 위치만 이동하여 깜빡임 방지 및 색상 전환 추가 */
    pointer-events: none;
    /* 클릭 반응 제거 */
    z-index: 1;
}

/* HIF(맨 위): 위에서 아래로 차오름 (기본: 하단 회색, 호버: 상단 고유색) */
#btn-hif::after {
    top: 60%;
    bottom: -65%;
    /* 하단 길이를 65%로 재조정 */
    background-color: var(--idol-theme-color, #ff4d8d);
    background-image: linear-gradient(to bottom, transparent, #ccc 50%, #ccc 100%);
    background-position: 0 100%;
}

#btn-hif:hover::after {
    background-position: 0 0;
    background-color: #9575fb;
    /* 0.45초 대기 후 0.3초 동안 보라색으로 부드럽게 변함 (직선형) */
    transition: background-position 0.3s linear, background-color 0.3s linear 0.45s;
}

/* 하지메(가운데): 중간에서 위아래로 색이 번짐 (중앙 확장 방식 + 상하 그라데이션) */
#btn-hajime::after {
    top: -15%;
    bottom: -35%;
    background-color: #ccc;
    /* 상하 양끝은 회색, 중앙은 고유색인 대칭형 그라데이션 */
    background-image: linear-gradient(to bottom, #ccc, var(--idol-theme-color, #ff4d8d), #ccc);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 0%;
    transition: background-size 0.3s linear;
}

#btn-hajime:hover::after {
    background-size: 100% 100%;
    /* 호버 시 100%로 확장 */
}

/* 니아(맨 아래): 버튼 상단 위로 뻗어 올라가며 65% 지점(bottom: 35%)에서 멈춤 */
#btn-nia::after {
    top: -50%;
    /* 버튼 위로 길게 돌출 */
    bottom: 35%;
    /* 하단 35% 지점에서 끝남 */
    /* 0~50%는 회색, 50~100%는 고유색 그라데이션(to top) */
    background-image: linear-gradient(to top, var(--idol-theme-color, #ff4d8d), #ccc 50%, #ccc 100%);
    background-position: 0 0;
}

#btn-nia:hover::after {
    background-position: 0 100%;
    /* 호버 시 하단의 고유색 부분으로 이동 */
}

@keyframes hifStarAnim {
    0% {
        -webkit-text-stroke-color: #ccc;
        transform: scale(1);
    }

    40% {
        /* 0.4초 (40%): 고유색 변환 및 1.3배 확대 */
        -webkit-text-stroke-color: var(--idol-theme-color, #ff4d8d);
        transform: scale(1.3);
    }

    45% {
        /* 0.45초 (45%) 지점까지: 고유색 및 1.3배 유지 */
        -webkit-text-stroke-color: var(--idol-theme-color, #ff4d8d);
        transform: scale(1.3);
    }

    70% {
        /* 0.7초 (70%): 보라색으로 색상만 전환 (크기는 1.3배 유지) */
        -webkit-text-stroke-color: #9575fb;
        transform: scale(1.3);
    }

    100% {
        /* 1.0초 최종: 보라색 유지, 1.3배 유지 */
        -webkit-text-stroke-color: #9575fb;
        transform: scale(1.3);
    }
}

#btn-hif:hover::before {
    animation: hifStarAnim 1.0s forwards;
    transition: transform 0.3s ease;
}

#btn-hajime:hover::before,
#btn-nia:hover::before {
    -webkit-text-stroke-color: var(--idol-theme-color, #ff4d8d);
    transform: scale(1.3);
}

/* 하지메 수직 라인 중앙 별 장식 */
#btn-hajime::before {
    content: '✦';
    position: absolute;
    right: -45.5px;
    top: calc(60% - 13px);
    /* 커진 크기 반영 */
    font-size: 16px;
    color: #fff;
    -webkit-text-stroke: 1px #ccc;
    transition: color 0.3s ease, -webkit-text-stroke-color 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    /* 클릭 반응 제거 */
    z-index: 2;
}

/* NIA 수직 라인 끝 별 장식 */
#btn-nia::before {
    content: '✦';
    position: absolute;
    right: -45.5px;
    bottom: calc(35% - 13px);
    /* 커진 크기 반영 */
    font-size: 16px;
    color: #fff;
    -webkit-text-stroke: 1px #ccc;
    transition: color 0.3s ease, -webkit-text-stroke-color 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    /* 클릭 반응 제거 */
    z-index: 2;
}

.calc-menu-item.disabled {
    cursor: default;
    opacity: 0.6;
    pointer-events: none;
}

.calc-menu-item.disabled:hover {}

.calc-menu-item:active {}

.calc-menu-label {
    font-size: 1.1rem;
    font-weight: 900;
    font-style: normal;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-left: 10px;
    border-left: 4px solid var(--idol-theme-color, #ff4d8d);
    line-height: 1.2;
    margin-bottom: 2px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: border-left-color 0.3s linear;
}

#btn-hif:hover .calc-menu-label {
    border-left-color: #9575fb !important;
}

.menu-badge {
    font-size: 0.8rem;
    padding: 2px 10px;
    border-radius: 4px;
    color: white;
    font-style: normal;
    font-weight: 900;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.badge-legend {
    background: linear-gradient(135deg, #9282ff 0%, #82d1ff 33%, #fe69fe 66%, #fdacff 100%);
    /* 사용자 지정 4색 레전드 그라데이션 */
}

.badge-master {
    background: linear-gradient(135deg, #ff31af 0%, #ffb93c 100%);
    /* 사용자 지정 마스터 그라데이션 */
}

.calc-menu-img {
    width: 380px;
    height: auto;
    transition: filter 0.2s, border-color 0.2s, box-shadow 0.2s;

    /* [수정] 우측 상단과 좌측 하단만 둥글게 (대각선 대칭) - 더 샤프한 25px로 조정 */
    border-radius: 0 25px 0 25px;
    border: 3px solid var(--idol-theme-color, #ff4d8d);
    /* 최종 3px로 테두리 강조 조정 */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    filter: none;
    transition: transform 0.3s ease, filter 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    pointer-events: none;
}

.calc-menu-item:hover .calc-menu-img {
    transform: scale(1.03);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
    /* !important 추가로 개별 설정 덮어쓰기 */
    /* 이미지만 확대 */
}

/* HIF 버튼 전용 호버 테두리 색상 (왼쪽에서 밀려오는 슬라이드 효과) */
#btn-hif .calc-menu-img {
    border-color: transparent !important;
    background-image:
        linear-gradient(225deg, #67c7d3, #189cfa, #3d64fb, #9575fb, #5960fb),
        linear-gradient(var(--idol-theme-color, #ff4d8d), var(--idol-theme-color, #ff4d8d)) !important;
    background-origin: border-box !important;
    background-clip: border-box !important;
    background-repeat: no-repeat !important;
    background-size: 0% 100%, 100% 100% !important;
    background-position: left center, left center !important;
    transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease !important;
}

#btn-hif:hover .calc-menu-img {
    background-size: 100% 100%, 100% 100% !important;
    transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease, background-size 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.calc-menu-item:active .calc-menu-img {
    transform: scale(0.98);
    /* 클릭 시 이미지만 축소 */
}

@media (max-width: 768px) {
    .calc-menu-img {
        width: 260px;
    }

    .calc-menu-label {
        font-size: 0.9rem;
    }

    /* 모바일에서 개별 장식 라인 위치 조정 및 항상 고유색 표시 */
    .calc-menu-item::after {
        right: -20px;
        width: 2px;
    }

    /* 모바일에서는 호버 상태의 스타일을 기본으로 적용하고, 그라데이션 없이 100% 고유색으로 채움 */
    #btn-hif::after,
    #btn-hajime::after,
    #btn-nia::after {
        background-image: none !important;
        background-color: var(--idol-theme-color, #ff4d8d) !important;
    }

    /* 별 장식도 항상 고유색 표시 */
    #btn-hif::before,
    #btn-hajime::before,
    #btn-nia::before {
        color: #fff !important;
        -webkit-text-stroke: 1px var(--idol-theme-color, #ff4d8d) !important;
        right: -24.5px;
    }

    #btn-hif::before {
        top: calc(60% - 10px);
        font-size: 13px;
    }

    #btn-hajime::before {
        top: calc(60% - 10px);
        font-size: 13px;
    }

    #btn-nia::before {
        bottom: calc(35% - 10px);
        font-size: 13px;
    }
}

.calc-menu-img:active {
    transform: scale(0.98);
}

@media (max-width: 768px) {
    .calc-menu-img {
        width: 260px;
        /* 모바일에서도 큼직하게 확대 */
    }
}

/* ★★★ 레이아웃 핵심 ★★★ */

/* 1. 기본 (모바일): 세로 배치, 패널은 사이드 서랍 형태 */
.calc-container {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    position: relative;
}

.calc-main-wrapper {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* 서포트 카드 패널 (모바일 기본: 왼쪽 사이드 서랍) */
.calc-side-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 85%;
    max-width: 400px;
    height: 100vh;
    height: 100dvh;
    /* 최신 브라우저 대응 (Dynamic Viewport Height) */
    background: white;
    border-right: 1px solid #ddd;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    z-index: 20000;
    /* 오버레이(19999)보다 높게 설정 */
    overflow: hidden;

    /* 하단 안전 영역 확보 */
    padding-bottom: env(safe-area-inset-bottom, 20px);

    /* 애니메이션 설정 */
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 비활성화 카드 기본 숨김 (6번째 슬롯 선택 시 또는 이미 선택된 경우에만 보이게) */
.calc-side-panel .side-card-item.is-disabled-card {
    display: none;
}

.calc-side-panel.is-selecting-sixth .side-card-item.is-disabled-card,
.calc-side-panel .side-card-item.is-disabled-card.selected {
    display: block;
    opacity: 0.8;
}

.calc-side-panel.open {
    transform: translateX(0);
}

/* 배경 오버레이 */
.panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 19999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.panel-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

/* 2. PC/태블릿 (769px 이상): 가로 2열 배치 (패널 좌측 고정) */
@media (min-width: 769px) {
    .calc-container {
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        max-width: 1050px;
        gap: 20px;
    }

    .calc-main-wrapper {
        width: 440px;
        flex-shrink: 0;
    }

    .calc-side-panel {
        position: sticky !important;
        top: 20px;
        left: auto;
        right: auto;
        flex: 1 !important;
        width: auto !important;
        min-width: 250px !important;
        max-width: 560px !important;
        height: 75vh !important;
        z-index: 100 !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
        order: -1;
        border-radius: 15px;
        border: 1px solid #ddd;

        /* PC에서도 토글(열고 닫기)이 가능하도록 수정 */
        display: none !important;
        transform: none !important;
    }

    .calc-side-panel.open {
        display: flex !important;
    }

    .panel-overlay {
        display: none !important;
    }

    .activity-counter {
        grid-template-columns: repeat(6, 1fr) !important;
    }
}

/* --- 내부 요소 스타일 --- */

.selected-support-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    width: 100%;
    margin-bottom: 1rem;
    background: white;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid #ddd;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    align-items: flex-start;
}



.p-item-slot {
    position: relative;
    width: 50px;
    height: auto;
    aspect-ratio: 1 / 1;
    background: white;
    border: 1px dashed #ddd;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.p-item-slot:hover {
    border-color: #bbb;
    background: #fdfdfd;
}

.p-item-slot img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: contain;
}

.p-item-placeholder {
    color: #ccc;
    font-size: 1.5rem;
    font-weight: bold;
}

.p-item-tooltip {
    padding: 12px;
    background: white;
    border: 1px solid #ff4d8d;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    z-index: 2000;
}

.selected-card-slot {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
}

.slot-frame {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.05);
    border: 1px dashed #ccc;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.selected-card-slot.filled .slot-frame {
    border: none;
    background: white;
}

.card-slot-remove {
    position: absolute;
    top: -6px;
    left: -6px;
    width: 18px;
    height: 18px;
    background: #ff4d4d;
    color: white;
    border-radius: 50%;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: bold;
    z-index: 100;
    line-height: 1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border: 1px solid white;
}

.card-slot-remove:hover {
    background: #ff0000;
    transform: scale(1.1);
}

.card-opt-row {
    margin-bottom: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 3px;
    /* 행 사이 간격 */
}

.opt-line {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 18px;
    /* 고정 높이 설정 */
}

.opt-check-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.62rem;
    /* 폰트 소폭 축소하여 공간 확보 */
    color: #555;
    cursor: pointer;
    background: #fff;
    padding: 1px 6px;
    border: 1px solid #eee;
    border-radius: 10px;
    transition: all 0.2s;
    white-space: nowrap;
}

.opt-check-label:hover {
    border-color: #bbb;
    background: #fdfdfd;
}

.card-opt-check,
.card-event-check {
    width: 12px;
    height: 12px;
    margin: 0 !important;
    cursor: pointer;
    accent-color: #ff4d8d;
}

@media (max-width: 768px) {
    .opt-check-label {
        font-size: 0.55rem !important;
        padding: 1px 2px !important;
        gap: 1px !important;
    }

    .card-opt-check,
    .card-event-check {
        width: 9px !important;
        height: 9px !important;
    }

    .card-slot-check {
        width: 14px !important;
        height: 14px !important;
        top: 1px !important;
        right: 1px !important;
    }

    .card-opt-row {
        gap: 5px !important;
        margin-bottom: 4px !important;
    }

    .opt-line {
        height: 16px !important;
        /* 고정 높이 유지하여 빈 슬롯과 정렬 맞춤 */
    }
}



.card-item-counter {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    /* 테두리와의 간격 확보 */
    background: rgba(255, 77, 141, 0.1);
    border-radius: 4px;
    padding: 2px 4px;
}

.card-counter-btn {
    width: 18px;
    height: 18px;
    background: #ff4d8d;
    color: white;
    border: none;
    border-radius: 2px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.card-counter-val {
    font-size: 11px;
    font-weight: bold;
    min-width: 14px;
    text-align: center;
    color: #ff4d8d;
}

.card-slot-check {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    z-index: 10;
    margin: 0;
    opacity: 0.85;
    accent-color: #ff4d8d;
}

.selected-card-slot img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border-radius: 8px 8px 0 0;
}

.side-card-item.selected {
    border: 2px solid transparent;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
    z-index: 50;
}

.side-card-item.selected .card-bonus-overlay {
    background: transparent;
}

.stat-header {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%;
    margin-bottom: 1rem;
    border-radius: 12px;
    border: 2px solid #ff4d8d;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.stat-header-top-bar {
    position: relative;
    width: 100%;
    padding: 6px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    background: transparent !important;
}

.stat-header-content {
    width: 100%;
    padding: 0.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: white;
}

.stat-detail-toggle-bar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 2px 0 4px;
    /* 패딩을 대폭 줄여서 공백 제거 */
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.2s;
}

.stat-detail-toggle-bar:hover {
    opacity: 1;
}

.toggle-label {
    font-size: 10px;
    /* 브라우저 최소 크기 고정 */
    font-weight: 800;
    color: #888;
    letter-spacing: 0;
    user-select: none;
    display: inline-block;
    transform: scale(0.65);
    /* 6.5px 크기로 강제 축소 */
    transform-origin: center;
    margin: 0 -12px;
    /* 투명한 빈 공간을 음수 마진으로 제거하여 경계선을 끌어당김 */
}

.toggle-arrow {
    font-size: 0.6rem;
    color: #888;
    transform: scale(0.8);
    margin-left: -2px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 768px) {
    .stat-detail-toggle-bar {
        gap: 4px;
        /* 모바일에서 간격 확보 */
    }

    .toggle-label {
        transform: scale(0.8);
        /* 0.65에서 0.8로 상향 */
        margin: 0 -8px;
        /* 커진 만큼 음수 마진도 살짝 조정 */
    }

    .toggle-arrow {
        margin-left: 2px;
        /* 화살표와 글자 사이 간격 추가 */
    }
}

.toggle-line {
    flex: 1;
    height: 1px;
    background: #eee;
}

.toggle-arrow {
    font-size: 0.6rem;
    color: #888;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}

.stat-detail-toggle-bar.active .toggle-arrow {
    transform: rotate(180deg);
}

.stat-detail-area {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin 0.3s ease-out;
    /* 마진도 함께 부드럽게 트랜지션 */
    max-height: 100px;
    opacity: 1;
    margin-top: -4px;
}

.stat-detail-area.collapsed {
    max-height: 0 !important;
    opacity: 0 !important;
    margin-top: -8px !important;
    /* 부모의 gap 공간을 위로 당겨서 제거 */
    margin-bottom: -4px !important;
    /* 하단 여백도 바짝 당김 */
    padding: 0 !important;
    pointer-events: none;
}

.bonus-bar-container {
    position: relative;
    width: 12px;
    height: 36px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
    overflow: visible;
    /* 점이 컨테이너 경계에 걸쳐도 보이게 */
    margin-bottom: 6px;
    display: flex;
    flex-direction: column-reverse;
}

.bonus-bar {
    width: 100%;
    height: 0%;
    background: var(--idol-color, #ff4d8d);
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.sp-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #fff;
    border: 1.5px solid #888;
    /* JS에서 색상 변경됨 */
    border-radius: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
    /* 중심점 맞춤 */
    transition: bottom 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
}

.sp-percent-label {
    font-size: 0.55rem;
}

@media (max-width: 768px) {
    .sp-percent-label {
        font-size: 10px;
        /* 브라우저 최소 크기 고정 */
        display: inline-block;
        transform: scale(0.8);
        /* 0.6에서 0.8로 상향 */
        transform-origin: center top;
        margin-top: -1px;
        /* 스케일 변경에 따라 마진 미세 조정 */
    }
}

.stat-header-title {
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
}

.stat-header-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(calc(-50% - 1px));
    height: 22px;
    /* 18px * 1.2 */
    object-fit: contain;
}

.stat-header-icon.hif-icon,
.stat-header-icon.nia-icon {
    width: 44px;
    /* 36px * 1.2 */
}

.stat-header-icon.nia-icon {
    transform: translateY(calc(-50% - 1px));
}

.total-stats-sum {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    background: #ff4d8d;
    border-radius: 15px;
    color: white;
    font-weight: bold;
    font-size: 0.8rem;
    box-shadow: 0 2px 6px rgba(255, 77, 141, 0.2);
    margin-bottom: 15px;
}

.stat-info-btn {
    width: 14px;
    height: 14px;
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: 2px;
    font-family: serif;
    font-weight: bold;
}

.stat-info-btn:hover {
    background: rgba(255, 255, 255, 0.4);
}

.sum-label {
    font-size: 0.55rem;
    opacity: 0.8;
    letter-spacing: 0.1px;
}

#total-stats-sum-value {
    font-size: 0.95rem;
}

#total-stats-sum-value.is-overflow {
    color: #ffffff;
}

.total-overflow-text {
    font-size: 0.68rem;
    font-weight: 800;
    color: inherit;
    margin-left: 0;
}

.stat-items-row {
    display: flex;
    justify-content: space-around;
    width: 100%;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 70px;
}

.stat-item span {
    font-size: 0.8rem;
    font-weight: bold;
    color: #ff4d8d;
    /* 보너스 느낌을 주기 위해 분홍색 적용 */
    margin-top: 10px;
    /* 아이콘과의 간격 증가 */
}

.sp-percent-label {
    font-size: 0.65rem !important;
    color: #666 !important;
    margin-top: 2px !important;
    font-weight: normal !important;
    text-align: center;
}

.stat-item img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    transition: all 0.3s;
    --ring-color: #ff4d8d;
    /* 기본값 */
}

/* 속성별 색상 정의 */
.stat-item.item-vocal img {
    --ring-color: rgb(252, 63, 162);
}

.stat-item.item-dance img {
    --ring-color: rgb(70, 164, 243);
}

.stat-item.item-visual img {
    --ring-color: rgb(252, 199, 94);
}

/* 2순위: 단일 원 */
.stat-item.rank-2 img {
    box-shadow: 0 0 0 2px var(--ring-color);
}

/* 1순위: 이중 원 */
.stat-item.rank-1 img {
    box-shadow: 0 0 0 2px var(--ring-color), 0 0 0 4px white, 0 0 0 6px var(--ring-color);
}

.stat-item span {
    font-size: 0.8rem;
    font-weight: bold;
    color: #555;
}

.plan-type-selector {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    width: 100%;
    margin-bottom: 1rem;
    background: white;
    padding: 0.6rem;
    border-radius: 0 0 12px 12px;
    /* 상단 라운드 제거해 위 칸과 결합 */
    border: 1px solid #ddd;
    border-top: none;
    /* 위 박스와 겹치는 테두리 제거 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.plan-type-btn {
    width: 40px;
    height: 40px;
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.4;
    background: transparent;
}

.plan-type-btn.active {
    opacity: 1;
    border-color: transparent;
    filter: drop-shadow(0 0 2px var(--idol-color, #ff4d8d)) drop-shadow(0 0 2px var(--idol-color, #ff4d8d));
    transform: scale(1.1);
}

.plan-type-btn img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.idol-selector-grid {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    width: 100%;
    padding: 10px 5px;
    margin-top: 12px;
    margin-bottom: 0;
    background: white;
    border-radius: 12px 12px 0 0;
    border: 1px solid #ddd;
    border-bottom: 1px solid #eee;
    -ms-overflow-style: none;
    scrollbar-width: none;
    box-shadow: none;
}

.idol-selector-grid::-webkit-scrollbar {
    display: none;
}

.idol-sel-item {
    flex: 0 0 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #eee;
    background: white;
    transition: all 0.2s;
    user-select: none;
}

.idol-sel-item.active {
    border-color: var(--idol-color, #ff4d8d);
    border-width: 2px !important;
    transform: scale(1.1);
    box-shadow: 0 0 5px var(--idol-color-shadow, rgba(255, 77, 141, 0.4));
}

.idol-sel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.activity-counter {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* 내부 요소들 사이의 간격 제거 */
    width: 100%;
    background: white;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid #ddd;
    margin-bottom: 1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.activity-grid {
    display: grid;
    width: 100%;
    margin-top: 0;
    border-top: 1px solid #ddd;
    /* 상단 선 */
    border-left: 1px solid #ddd;
    /* 좌측 선 */
    border-radius: 8px;
    overflow: hidden;
}

/* 보컬/댄스/비주얼 레슨 전용 (3열) */
.base-lessons-grid {
    grid-template-columns: repeat(3, 1fr);
    border-radius: 8px 8px 0 0;
    /* 위쪽만 라운드 */
}

/* 나머지 활동 전용 (5열) */
.other-activities-grid {
    grid-template-columns: repeat(5, 1fr);
    border-top: none;
    border-radius: 0 0 8px 8px;
    /* 아래쪽만 라운드 */
    margin-top: 0 !important;
    /* 강제로 여백 제거 */
}

.other-activities-grid .main-count {
    font-size: 0.75rem;
}

/* 5열 격자 세로 길이 축소 */
.other-activities-grid .activity-cell {
    padding: 4px 8px;
    /* 6px -> 4px로 상하 여백 축소 */
}

.activity-cell {
    background: #fff;
    padding: 6px 8px;
    display: grid;
    /* 그리드 레이아웃으로 변경 */
    grid-template-columns: 18px 1fr;
    /* 아이콘 18px 고정, 나머지는 숫자 영역 */
    align-items: center;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.activity-cell-count {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 숫자 영역 내에서 가운데 정렬 */
    gap: 2px;
    width: 100%;
}

.activity-mini-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block;
}

.activity-cell-count {
    display: flex;
    align-items: center;
    gap: 2px;
}

.main-count {
    font-size: 0.85rem;
    font-weight: bold;
    color: #333;
}

.active-cell .main-count {
    color: #ff4d8d;
}

/* 보컬/댄스/비주얼 속성 색상 및 아이콘 크기 적용 */
.activity-lessonvo,
.activity-lessondan,
.activity-lessonvi {
    grid-template-columns: 20px 1fr !important;
    /* 아이콘 공간 살짝 확대 */
}

.activity-lessonvo .activity-mini-icon,
.activity-lessondan .activity-mini-icon,
.activity-lessonvi .activity-mini-icon {
    width: 20px !important;
    height: 20px !important;
}

.activity-lessonvo {
    background: rgba(255, 77, 141, 0.08) !important;
}

.activity-lessonvo .main-count {
    color: #ff4d8d !important;
}

.activity-lessondan {
    background: rgba(70, 164, 243, 0.08) !important;
}

.activity-lessondan .main-count {
    color: #46a4f3 !important;
}

.activity-lessonvi {
    background: rgba(252, 199, 94, 0.12) !important;
    /* 노란색은 좀 더 짙게 */
}

.activity-lessonvi .main-count {
    color: #fcc75e !important;
}

.sp-sub-count {
    font-size: 0.65rem;
    font-weight: normal;
    margin-left: 2px;
    opacity: 0.8;
}



.empty-cell {
    opacity: 0.3;
}

.active-cell {
    background: rgba(255, 77, 141, 0.02);
}


.unified-plan-board {
    background: white;
    border-radius: 0 0 15px 15px;
    padding: 0.5rem 0.5rem;
    width: 100%;
    border: 1px solid #ddd;
    border-top: none; /* 헤더와 완전 밀착 연결을 위해 상단 보더 제거 */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 2rem;
    position: relative;
}


.week-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.5rem 0.8rem;
    position: relative;
}

/* 행 단위 세로선 세그먼트 */
.week-row::before {
    content: '';
    position: absolute;
    bottom: -26px;
    /* 가로 경계선(bottom: 0)을 중심으로 위아래 26px씩 */
    left: 5%;
    width: 2px;
    height: 52px;
    background: #e8e8e8;
    pointer-events: none;
    z-index: 1;
}

.week-row:last-child::before {
    display: none;
}



/* 세로선 중앙 마름모 장식 */
.week-diamond {
    position: absolute;
    left: calc(5% + 1px);
    top: 50%;
    transform: translate(-50%, calc(-50% - 1px));
    font-size: 18px;
    color: #ccc;
    z-index: 2;
    pointer-events: none;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.week-row:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 5%;
    right: 5%;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1) 2px, transparent 2px);
    background-size: 8px 2px;
    background-repeat: repeat-x;
    background-position: bottom;
    height: 2px;
    pointer-events: none;
}

.week-row.hif-reset-boundary::after {
    background-image: none;
    background: rgba(0, 0, 0, 0.1);
}

/* --- Idol Options Row (Base) --- */
.idol-options-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0.2rem 1rem;
    gap: 12px;
    width: 100%;
    margin-bottom: 0;
    background: white;
    border-radius: 0;
    border: 1px solid #ddd;
    border-top: none;
    border-bottom: 1px solid #eee;
    box-shadow: none;
    box-sizing: border-box;
    position: relative;
}

.plan-type-btns-group {
    display: flex;
    gap: 0.8rem;
    align-items: center;
}

.talent-bloom-info-btn {
    position: absolute;
    right: 10px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: #f8f9fa;
    color: #666;
    font-size: 9px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-family: serif;
}

.idol-opt-divider {
    width: 1px;
    height: 28px;
    background-color: #ddd;
    flex-shrink: 0;
}

.plan-type-btns-group {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 26px;
    /* 세로선과 i 버튼 사이 정중앙을 맞추기 위한 여백 */
}

/* --- Mobile Optimizations (up to 768px) --- */
@media (max-width: 768px) {
    .plan-type-btns-group {
        gap: 0.4rem !important;
    }

    .plan-icon-wrapper {
        width: 40px !important;
        height: 40px !important;
    }

    .icon-outer-container.large-container,
    .plan-icon-wrapper.large-icon {
        width: 80px !important;
        height: 50px !important;
    }

    .plan-type-btn {
        width: 34px !important;
        height: 34px !important;
    }

    .plan-type-btn img {
        width: 22px !important;
        height: 22px !important;
    }

    .plan-type-btn.active {
        /* 그림자를 1.5px로 축소하고 2겹 중첩하여 진하게 표시 */
        filter: drop-shadow(0 0 1.5px var(--idol-color, #ff4d8d)) drop-shadow(0 0 1.5px var(--idol-color, #ff4d8d)) !important;
    }

    .plan-icons-container {
        gap: 0.25rem !important;
    }

    .main-label-text {
        font-size: 0.5rem !important;
        bottom: -2px !important;
        right: -2px !important;
    }

    .sp-badge {
        font-size: 0.55rem !important;
        padding: 1px 3px !important;
        top: -5px !important;
        right: -5px !important;
    }

    .unified-plan-board {
        padding: 0.4rem 0.25rem !important;
    }

    .week-row {
        padding: 0.4rem 0.1rem 0.75rem !important;
        gap: 0 !important;
    }

    .week-header {
        min-width: 20px !important;
        padding: 0 !important;
        margin: 0 !important;
        margin-left: -8px !important;
        /* 더 강하게 왼쪽으로 밀착 */
        display: flex !important;
        justify-content: flex-start !important;
        border: none !important;
        /* 빨간 테두리 제거 */
    }

    .week-label {
        font-size: 0.7rem !important;
        margin: 0 !important;
        padding: 0 !important;
        display: inline-block !important;
        text-align: left !important;
    }

    .week-diamond {
        font-size: 12px !important;
        width: auto !important;
        height: auto !important;
        transform: translate(-50%, -50%) !important;
    }

    .week-row::before {
        height: 42px !important;
        bottom: -21px !important;
    }

    .week-num {
        font-size: 0.95rem !important;
    }

    .week-label small {
        font-size: 0.6rem !important;
        margin: 0 1px;
        opacity: 0.8;
    }

    /* 모바일 표 글씨 크기 조절 */
    .activity-grid .main-count {
        font-size: 0.75rem !important;
    }

    .other-activities-grid .main-count {
        font-size: 0.65rem !important;
    }

    .sp-sub-count {
        font-size: 0.55rem !important;
    }

    .header-kyouka-btn {
        height: 22px !important;
        top: 38px !important;
        /* 모바일에서도 아래로 팍 내림 */
        right: 6px !important;
    }

    .idol-sel-item {
        flex: 0 0 36px !important;
        height: 36px !important;
    }
}

.week-header {
    min-width: 65px !important;
    padding-left: 35px !important;
    user-select: none;
}

.week-label {
    font-weight: bold;
    color: #666;
    font-size: 0.85rem;
    white-space: nowrap;
    transform: translateY(2px);
}

.week-num {
    font-size: 1.2rem;
}

.week-label small {
    font-size: 0.7rem;
    margin: 0 2px;
    opacity: 0.8;
    font-weight: normal;
}

.plan-icons-container {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.icon-outer-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-outer-container.large-container {
    width: 100px;
    height: 60px;
}

.plan-icon-wrapper {
    width: 54px;
    height: 54px;
    padding: 2px;
    border-radius: 10px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    background: #fdfdfd;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    position: relative;
}

.sp-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ff4d8d;
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    z-index: 100;
    pointer-events: none;
    line-height: 1;
}

.main-label-text {
    position: absolute;
    bottom: -5px;
    right: -5px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 0.65rem;
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 4px;
    pointer-events: none;
    z-index: 10;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.info-i-btn {
    position: absolute;
    top: 50%;
    right: -10px;
    width: 18px;
    height: 18px;
    background: #9c27b0;
    color: white;
    border-radius: 50%;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    cursor: pointer;
    z-index: 30;
    font-family: serif;
    border: 1.5px solid white;
    transform: translateY(-50%);
    transition: transform 0.2s, background 0.2s;
}

.info-i-btn:hover {
    background: #7b1fa2;
    transform: translateY(-50%) scale(1.2);
}

.info-i-btn:active {
    transform: translateY(-50%) scale(0.9);
}

.calc-tooltip.stat-graph-tooltip {
    min-width: 180px !important;
    padding: 18px 15px 10px !important;
    border-width: 2px !important;
    border-style: solid !important;
    background: white !important;
    border-radius: 12px !important;
}

.calc-tooltip.stat-graph-tooltip .graph-container {
    display: flex;
    flex-direction: column;
    height: 100px;
    margin-bottom: 0;
}

.graph-bars-area {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    flex: 1;
    padding: 0 10px;
    gap: 15px;
}

.graph-baseline {
    height: 2px;
    background: #333;
    margin: 0 5px;
}

.graph-vals-area {
    display: flex;
    justify-content: space-around;
    padding: 0 10px;
    gap: 15px;
    margin-top: 4px;
}

.graph-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    height: 100%;
}

.graph-val-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.calc-tooltip.stat-graph-tooltip .graph-bar-bg {
    width: 32px;
    flex: 1;
    background: #eee;
    overflow: visible;
    position: relative;
    display: flex;
    align-items: flex-end;
}

.calc-tooltip.stat-graph-tooltip .graph-bar-fill {
    width: 100%;
    transition: height 0.3s ease;
    background: #9c27b0;
}

.graph-val {
    font-size: 0.75rem;
    font-weight: bold;
    margin-top: 4px;
}

.graph-icon {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.graph-icon img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: drop-shadow(1px 0 0 white) drop-shadow(-1px 0 0 white) drop-shadow(0 1px 0 white) drop-shadow(0 -1px 0 white);
}

.plan-icon-wrapper.large-icon {
    width: 100px;
    height: 60px;
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
}

.plan-icon-wrapper.large-icon:hover {
    background: transparent;
    transform: scale(1.05);
}

.plan-icon-wrapper.large-icon.active {
    background: transparent;
    border: none;
    box-shadow: none;
    /* 그림자를 2겹으로 중첩하여 더 진하게 표시 */
    filter: drop-shadow(0 0 2px var(--idol-color, #ff4d8d)) drop-shadow(0 0 2px var(--idol-color, #ff4d8d)) !important;
}

.plan-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.calc-actions {
    display: flex;
    gap: 1rem;
    width: 100%;
    justify-content: center;
    padding-bottom: 2rem;
}

.calc-actions.top {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
    padding-bottom: 0.5rem;
    padding-top: 0.2rem;
    width: 100%;
}

.calc-btn {
    background-color: #ff4d8d;
    color: white !important;
    border: none;
    padding: 0 10px;
    font-size: 0.75rem;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
    height: 27px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

#btn-run-calc {
    min-width: 110px !important;
    /* 계산 버튼만 2배 너비 적용 */
}

.calc-btn:hover {
    background-color: #e91e63;
}

.calc-btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

.back-btn {
    background-color: #f8f9fa;
    color: #333 !important;
    border: 1px solid #ddd;
    padding: 4px 6px;
    font-size: 0.75rem;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    min-width: unset !important;
    width: auto !important;
    margin-left: auto !important;
    /* 오른쪽 끝으로 밀기 */
}

.side-panel-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 8px 10px;
    background: white;
    border-bottom: 1px solid #eee;
    gap: 8px;
}

.panel-tab-item {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.panel-tab-item:not(:last-of-type)::after {
    content: "";
    position: absolute;
    right: -4px;
    top: 20%;
    height: 60%;
    width: 1px;
    background: #eee;
}

.panel-tab-item img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    opacity: 0.8;
}

.side-panel-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 15px 10px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-content: flex-start;
    position: relative;
    min-height: 200px;
    padding-bottom: 80px;
    /* 모바일 하단바/주소창 대비 여백 추가 */
}

/* 스피너 스타일 */
.calc-spinner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 99;
    display: flex;
    justify-content: center;
    align-items: center;
}

.calc-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #ff4d8d;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.side-panel-column {
    display: flex;
    flex-direction: column;
    gap: clamp(2px, 1vw, 10px);
}

.side-card-item {
    position: relative;
    display: flex;
    flex-direction: column;
    aspect-ratio: 16 / 9;
    width: 100%;
    border: 1px solid #eee;
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.side-card-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--idol-color-shadow, rgba(255, 77, 141, 0.3));
}

.card-bonus-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    padding: 3px 3px;
    pointer-events: none;
    color: white;
    font-weight: bold;
    z-index: 15;
    /* 아이콘(10)보다는 높고 별(25)보다는 낮음 */
}

.bonus-val {
    font-size: 1.0rem;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.7);
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1.1;
}

/* SP 레슨 발생률 업 강조 색상 (배경색 변경) */
.bonus-val.sp-vocal {
    background-color: #ff4d8d !important;
    color: white !important;
}

.bonus-val.sp-dance {
    background-color: #46a4f3 !important;
    color: white !important;
}

.bonus-val.sp-visual {
    background-color: #fcc75e !important;
    color: white !important;
}

@media (max-width: 768px) {
    .bonus-val {
        font-size: 0.7rem;
        padding: 1px 4px;
    }
}

.bonus-percent {
    font-size: 0.8rem;
    color: #ffeb3b;
}

.side-card-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.info-btn {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 18px;
    height: 18px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    font-family: serif;
    z-index: 30;
    /* 막과 별보다 위에 배치 */
    cursor: pointer;
    transition: background 0.2s;
}

.side-card-overlay-icon {
    position: absolute !important;
    bottom: 3px !important;
    left: 3px !important;
    width: 22px !important;
    height: 22px !important;
    object-fit: contain !important;
    z-index: 10 !important;
    pointer-events: none;
    filter: none;
}

/* 계산기 전용 별 스타일 */
.calc-card-stars {
    position: absolute !important;
    bottom: 3px !important;
    right: 3px !important;
    display: flex !important;
    gap: 1px !important;
    z-index: 25 !important;
    /* 막(15)보다 위로 올림 */
    pointer-events: none !important;
}

.calc-card-star {
    width: 10px !important;
    height: 10px !important;
    object-fit: contain !important;
    content: url('../icons/flowerback.webp') !important;
    opacity: 1 !important;
    filter: none !important;
}

@media (min-width: 769px) {
    .calc-card-star {
        width: 14px !important;
        height: 14px !important;
    }
}

.calc-card-star.active {
    content: url('../icons/flower.webp') !important;
    filter: none !important;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    /* JS에서 flex로 변경 */
    justify-content: center;
    align-items: center;
    z-index: 30000;
    transition: none !important;
}

.modal-content {
    background: white;
    padding: 20px;
    border-radius: 12px;
    width: 90%;
    max-width: 450px;
    position: relative;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}


.calc-tooltip {
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ff4d8d;
    border-radius: 8px;
    padding: 10px;
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: auto;
    transform: translate(10px, -50%);
}

.tooltip-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    color: #333;
}

.tooltip-option input[type="checkbox"] {
    cursor: pointer;
    accent-color: #ff4d8d;
    width: 16px;
    height: 16px;
    margin: 0;
}

.hif-test-stat-input {
    appearance: textfield;
    -moz-appearance: textfield;
}

.hif-test-stat-input::-webkit-outer-spin-button,
.hif-test-stat-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.counter-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.cnt-btn {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid #ddd;
    background: #f8f9fa;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.1rem;
    line-height: 1;
    color: #333;
}

.cnt-btn:hover {
    background: #eee;
}

.cnt-btn-icon {
    width: 10px;
    height: 10px;
    object-fit: contain;
    display: block;
}

.cnt-val {
    min-width: 18px;
    text-align: center;
    font-weight: bold;
    font-size: 0.95rem;
    color: #ff4d8d;
}

.p-item-check-txt {
    font-size: 0.65rem;
    font-weight: bold;
    color: #777;
}

@media (max-width: 768px) {
    .calc-actions.top {
        justify-content: flex-start !important;
        gap: 8px !important;
    }

    .back-btn {
        margin-left: auto !important;
    }

    .p-item-container {
        gap: 6px;
        padding: 8px;
    }

    .p-item-slot {
        width: 45px;
    }

    .card-item-counter {
        gap: 2px;
        margin-top: 2px;
        padding: 1px 2px;
    }

    .opt-check-label span {
        font-size: 0.45rem !important;
    }

    .card-counter-btn {
        width: 12px !important;
        height: 12px !important;
        font-size: 8px !important;
    }

    .card-counter-val {
        font-size: 8px !important;
        min-width: 8px !important;
    }

    .plan-icon-wrapper {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        max-width: 42px !important;
        max-height: 42px !important;
        aspect-ratio: 1 / 1 !important;
        flex-shrink: 0 !important;
    }

    .plan-icon-wrapper.large-icon {
        width: 75px !important;
        height: 45px !important;
        min-width: 75px !important;
        min-height: 45px !important;
        aspect-ratio: auto !important;
        flex-shrink: 0 !important;
    }

    .calc-btn,
    .back-btn {
        padding: 0 4px;
        font-size: 0.6rem;
        width: auto;
        min-width: 45px;
        height: 19px;
        text-align: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .info-btn {
        width: 14px;
        height: 14px;
        font-size: 9px;
        top: 3px;
        left: 3px;
    }

    .calc-tooltip {
        padding: 5px !important;
        gap: 4px !important;
        border-radius: 6px !important;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08) !important;
    }

    .tooltip-option {
        gap: 4px !important;
        font-size: 0.65rem !important;
    }

    .tooltip-option input[type="checkbox"] {
        width: 12px !important;
        height: 12px !important;
    }

    .counter-controls {
        gap: 3px !important;
    }

    .cnt-btn {
        width: 18px !important;
        height: 18px !important;
        font-size: 0.85rem !important;
    }

    .hif-test-stat-input {
        font-size: 0.65rem !important;
        padding: 3px 4px !important;
    }

    /* 토글 버튼 크기 축소 (재조정: 20px -> 22px) */
    .sr-toggle-item,
    .talent-toggle-item {
        width: 22px !important;
        height: 22px !important;
    }

    .sr-toggle-item img,
    .talent-toggle-item img,
    .talent-toggle-item div[style*="mask-image"] {
        width: 16px !important;
        height: 16px !important;
    }

    /* 모바일 간격 축소 */
    .idol-options-row {
        gap: 9px !important;
        padding: 0.2rem 0.5rem !important;
    }

    .plan-type-btns-group {
        gap: 0.4rem !important;
    }

    /* 모바일 전용 삭제 버튼 크기 축소 */
    .card-slot-remove {
        width: 14px !important;
        height: 14px !important;
        top: -5px !important;
        left: -5px !important;
    }

    .card-slot-remove .cnt-btn-icon {
        width: 8px !important;
        height: 8px !important;
    }

    /* 모바일 전용 체크박스 크기 축소 */
    .card-slot-check {
        width: 13px !important;
        height: 13px !important;
    }

    /* 모바일 전용 서포트 카드 스탯 합계 축소 */
    #total-vocal,
    #total-dance,
    #total-visual {
        font-size: 0.6rem !important;
    }
}

/* Skill Adjustment Modal Styles */
@media (max-width: 768px) {
    .stat-header-icon {
        height: 18px !important;
    }

    .stat-header-icon.hif-icon,
    .stat-header-icon.nia-icon {
        width: 35px !important;
    }

    .board-title-icon {
        height: 18px !important;
        width: 35px !important;
    }
}

/* Skill Adjustment Modal Styles */
.tune-card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 5px;
    flex: 1;
    overflow-y: auto;
}

@media (min-width: 769px) {
    .tune-card-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 12px;
    }
}

.tune-card-group-box {
    grid-column: span 2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding: 6px;
    background: rgba(156, 39, 176, 0.08);
    border: 2px solid rgba(156, 39, 176, 0.2);
    border-radius: 12px;
}

.tune-card-item {
    cursor: pointer;
    transition: transform 0.1s;
    position: relative;
    width: 100%;
}

.tune-card-item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid #eee;
    background: #fdfdfd;
    display: block;
    opacity: 0.6;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.tune-card-item.selected img {
    border-color: #9c27b0;
    border-width: 3px;
    box-shadow: 0 4px 12px rgba(156, 39, 176, 0.3);
    opacity: 1;
}

.tune-card-item:hover img {
    transform: translateY(-3px);
    opacity: 0.9;
}

.tune-card-item.selected:hover img {
    opacity: 1;
    transform: translateY(-3px);
}

.tune-card-item:active {
    transform: scale(0.92);
}

.card-count-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #9c27b0;
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    z-index: 10;
    pointer-events: none;
}

.card-reset-btn {
    position: absolute;
    top: -5px;
    left: -5px;
    background: #ff4d4d;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    line-height: 1;
}

.other-tune-btn {
    white-space: nowrap;
}

/* Distributor Styles */
.enhance-item-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: white;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid rgba(255, 77, 141, 0.1);
    min-width: 100px;
    /* PC 데스크탑 기본 최소 너비 설정 */
}

.dist-label {
    white-space: nowrap;
    font-weight: bold;
    font-size: 0.8rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    width: 100%;
    text-align: center;
    padding-bottom: 2px;
}

.counter-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.dist-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.7rem;
    align-items: center;
    width: 100%;
}

.dist-unit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #666;
    width: 100%;
}

.dist-btn {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    border: 1px solid #ddd;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    line-height: 1;
    padding: 0;
    transition: all 0.2s;
}

.dist-btn:hover {
    background: #f0f0f0;
    border-color: #ff4d8d;
    color: #ff4d8d;
}

.dist-val {
    min-width: 10px;
    text-align: center;
    font-weight: bold;
    color: #ff4d8d;
}

.counter-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.06), transparent);
    margin: 15px 0;
    /* 위아래 여백을 15px로 늘림 */
}

.class-attr-badge {
    position: absolute;
    top: -8px;
    left: -8px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    pointer-events: none;
}

@media (max-width: 480px) {
    .extra-text-counts {
        gap: 8px !important;
        /* 전체 간격 축소 */
    }

    .counter-column {
        gap: 8px !important;
    }

    .enhance-item-content.compact-dist {
        padding: 1px 3px !important;
        min-width: 80px !important;
        /* 65px -> 80px로 확대 */
        gap: 1px !important;
    }

    .enhance-item-content.compact-dist .dist-label {
        font-size: 0.65rem !important;
        /* 0.54rem -> 0.65rem로 확대 */
        padding-bottom: 2px !important;
    }

    .enhance-item-content.compact-dist .dist-group {
        gap: 1.5px !important;
        font-size: 0.6rem !important;
        /* 0.52rem -> 0.6rem로 확대 */
    }

    .enhance-item-content.compact-dist .dist-unit {
        gap: 1px !important;
    }

    .enhance-item-content.compact-dist .dist-btn {
        width: 10px !important;
        height: 10px !important;
        font-size: 0.5rem !important;
        border-radius: 1px !important;
    }

    .enhance-item-content.compact-dist .other-tune-btn {
        width: 85% !important;
        /* 가로 너비 축소 */
        height: 16px !important;
        font-size: 0.5rem !important;
        margin: 4px auto 6px !important;
        /* 2px -> 6px로 하단 여백 추가 확대 */
        display: block !important;
        border-radius: 2px !important;
    }

    .counter-count {
        font-size: 0.68rem !important;
        /* 0.72rem -> 0.68rem로 소폭 축소하여 라벨과 밸런스 조정 */
    }

    .main-counts {
        gap: 4px !important;
    }

    .counter-item img {
        width: 20px !important;
        height: 20px !important;
    }

    .counter-divider {
        margin: 12px 0 !important;
    }
}

.class-attr-badge img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

/* 모바일 대응 */
@media (max-width: 480px) {
    .class-attr-badge {
        width: 18px;
        height: 18px;
        top: -5px;
        left: -5px;
    }

    .class-attr-badge img {
        width: 18px;
        height: 18px;
    }
}

/* 아이돌 선택 보조 설명 및 보드 타이틀 (상단 탭 형태) */
.idol-selection-info {
    font-size: 0.65rem;
    color: #888;
    background: #fff;
    border: 1px solid #ddd;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    padding: 4px 12px;
    margin: 0 0 0 8px;
    width: fit-content;
    letter-spacing: 0.03em;
    position: relative;
    z-index: 1;
}

.header-kyouka-btn {
    position: absolute;
    top: 45px;
    /* 사용자가 지정한 45px로 하향 조정 */
    right: 10px;
    height: 32px;
    z-index: 50;
}

.header-kyouka-btn img {
    height: 100%;
}

.board-title-tab {
    font-size: 0.7rem;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.05em;
    white-space: nowrap;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.board-title-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    height: 22px;
    width: 44px;
    object-fit: contain;
}

.board-title-icon.nia-icon {
    transform: translateY(calc(-50% - 1px));
}

.board-title-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    margin-top: 1rem;
    width: 100%;
    background: #f5f6f8;
    border: 1px solid #e0e3e8;
    border-radius: 8px 8px 0 0;
    padding: 10px 12px;
    box-sizing: border-box;
}

.board-reset-btn {
    appearance: none;
    border: 1px solid #d7dbe2;
    background: #fff;
    color: #555;
    border-radius: 999px;
    padding: 2px 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.2;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    margin-right: 0;
    flex-shrink: 0;
}

.board-reset-btn:hover {
    background: #f5f7fa;
    border-color: #c7ccd4;
    color: #333;
}

.kyouka-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    height: 24px;
    /* 헤더 우측 상단에 맞춰 크기 소폭 조정 */
    display: flex;
    align-items: center;
    transition: transform 0.2s;
}

.kyouka-btn img {
    height: 100%;
    width: auto;
    border-radius: 4px;
    filter: grayscale(100%) opacity(0.6) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
    /* 범위 축소, 색 농도 복구 */
    transition: all 0.3s ease;
}

.kyouka-btn:hover img {
    filter: grayscale(50%) opacity(0.8) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.kyouka-btn.active img {
    filter: grayscale(0%) opacity(1);
    /* 활성 시 컬러 복구, 그림자 제거 */
}

.kyouka-btn.active:hover img {
    transform: scale(1.05);
}

/* 6th slot dynamic colors */
.sixth-slot .card-opt-check,
.sixth-slot .card-event-check,
.sixth-slot .card-slot-check {
    accent-color: #8FDDBA !important;
}

.sixth-slot .card-slot-remove,
.sixth-slot .card-counter-btn {
    background: #8FDDBA !important;
}

.sixth-slot .card-slot-remove:hover,
.sixth-slot .card-counter-btn:hover {
    background: #7eccab !important;
}

.sixth-slot .card-item-counter {
    background: #8FDDBA !important;
}

.sixth-slot .card-counter-val {
    color: white !important;
}

.sixth-slot .card-counter-btn {
    background: white !important;
    color: #8FDDBA !important;
}

.sixth-slot .card-counter-btn:hover {
    background: #f0f0f0 !important;
    color: #8FDDBA !important;
}

.sixth-slot .card-item-counter {
    background: rgba(143, 221, 186, 0.25) !important;
}

.sixth-slot .card-counter-val {
    color: #333 !important;
}

.sixth-slot .card-counter-btn {
    background: #8FDDBA !important;
    color: white !important;
}

.sixth-slot .card-counter-btn:hover {
    background: #7eccab !important;
    color: white !important;
}

/* PC에서 사이드바 스크롤바 정렬 맞춤 */
@media (min-width: 769px) {
    .side-panel-tabs {
        padding-right: 24px !important;
        /* 스크롤바 너비만큼 강제로 여백 추가 */
    }
}

.sixth-slot .slot-frame {
    border-color: #8FDDBA;
    background: rgba(143, 221, 186, 0.2);
}

.rental-bg-text {
    font-size: 10px;
    font-weight: bold;
    color: #8FDDBA;
    opacity: 0.8;
    letter-spacing: 0.5px;
    pointer-events: none;
    user-select: none;
}

.support-bg-text {
    font-size: 8px;
    font-weight: bold;
    color: #bbb;
    opacity: 0.65;
    letter-spacing: 0.5px;
    pointer-events: none;
    user-select: none;
}

@media (max-width: 768px) {
    .rental-bg-text {
        font-size: 6px;
    }

    .support-bg-text {
        font-size: 5px;
    }
}

.sixth-slot .card-slot-remove {
    color: #333 !important;
}

/* SR 전용 아이콘 토글 스타일 */
.sr-toggle-item {
    width: 27px;
    height: 27px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.4;
    transition: all 0.2s;
    background: transparent;
    border: 2px solid transparent;
    border-radius: 50%;
}

.sr-toggle-item.active {
    opacity: 1;
    border-color: #fcc75e;
    transform: scale(1.1);
}

.sr-toggle-item img {
    width: 21px;
    height: 21px;
    object-fit: contain;
}

/* 재능개화 아이콘 토글 스타일 */
.talent-toggle-item {
    width: 27px;
    height: 27px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.4;
    transition: all 0.2s;
    background: transparent;
    border: 2px solid transparent;
    border-radius: 50%;
}

.talent-toggle-item.active {
    opacity: 1;
    border-color: #ff4d8d;
    transform: scale(1.1);
}

.talent-toggle-item.disabled {
    opacity: 0.5 !important;
    pointer-events: none;
    cursor: not-allowed;
}

.talent-toggle-item.disabled div {
    background-color: #ccc !important;
}

#hif-prima-toggle.active {
    border-color: #46a4f3 !important;
}

#hif-prima-toggle {
    opacity: 1 !important;
    /* 선택 안 되어 있을 때도 투명해지지 않게 설정 */
}

.talent-toggle-item img {
    width: 19px;
    height: 19px;
    object-fit: contain;
}

/* HIF UI Layout & Mobile Responsiveness */
.hif-stats-container {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 6px;
    margin-bottom: 8px;
    padding: 12px 8px 8px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fdfdfd;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    box-sizing: border-box;
}

.hif-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1;
}

.hif-stat-divider {
    width: 1px;
    height: 36px;
    background-color: #eee;
    margin: 0 12px;
}

.hif-stat-divider.full-width {
    width: 100%;
    height: 1px;
    margin: 10px 0 8px;
}

.hif-stat-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.hif-stat-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.hif-bonus-vals {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    line-height: 1.15;
    font-size: 0.65rem;
    font-weight: bold;

}

.hif-stat-controls {
    display: flex;
    margin: 0;
    justify-content: center;
    background: #f8f9fa;
    border: 1px solid;
    border-radius: 4px;
    overflow: hidden;
    height: 20px;
}

.hif-stat-controls .cnt-btn {
    width: 20px;
    border: none;
    background: white;
    cursor: pointer;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hif-stat-controls .cnt-val {
    width: 24px;
    text-align: center;
    font-size: 0.8rem;
    line-height: 20px;
    background: white;
    font-weight: bold;
}

.hif-param-limit-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.hif-param-limit-top {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 6px;
}

.hif-param-limit-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #555;
    white-space: nowrap;
    text-align: center;
}

.hif-param-limit-controls {
    flex-shrink: 0;
}

.hif-param-limit-top .hif-bonus-vals {
    font-size: 0.75rem;
}

/* Mobile responsive for HIF UI */
@media (max-width: 768px) {
    .hif-stats-container {
        padding: 12px 4px 6px;
    }

    .hif-stat-divider {
        margin: 0 6px;
    }

    .hif-stat-divider.full-width {
        margin: 8px 0 6px;
    }

    .hif-stat-top {
        gap: 4px;
    }

    .hif-stat-img {
        width: 20px;
        height: 20px;
    }

    .hif-bonus-vals {
        font-size: 0.55rem;
        line-height: 1.1;
    }

    .hif-stat-controls {
        height: 16px;
    }

    .hif-stat-controls .cnt-btn {
        width: 18px;
        font-size: 0.85rem;
    }

    .hif-stat-controls .cnt-val {
        width: 20px;
        font-size: 0.65rem;
        line-height: 16px;
    }

    .hif-param-limit-item {
        gap: 8px;
    }

    .hif-param-limit-title {
        font-size: 0.68rem;
    }

    .hif-param-limit-top .hif-bonus-vals {
        font-size: 0.62rem;
    }

    /* 토탈 스탯 우측 강화월간 이미지 버튼 크기 축소 */
    img[alt="Kyouka"] {
        width: 50px !important;
        height: auto !important;
        margin-left: 5px !important;
        cursor: pointer;
    }
}

.stat-detail-header-icon {
    width: 22px;
    height: 22px;
    vertical-align: middle;
}

@media (max-width: 768px) {
    .stat-detail-header-icon {
        width: 16px;
        height: 16px;
    }
}

/* 화면 우측 하단 고정 플로팅 버튼 */
.floating-skill-btn {
    display: flex;
    position: fixed;
    bottom: 160px;
    right: 40px;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background-color: var(--idol-color, #ff4d8d);
    border: 3px solid white;
    box-shadow: 0 4px 15px var(--idol-color-shadow, rgba(255, 77, 141, 0.4)), inset 0 0 0 2px rgba(255, 255, 255, 0.5);
    cursor: pointer;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.floating-skill-btn img {
    width: 25px;
    height: 25px;
    filter: invert(1);
}

.floating-skill-btn:hover {
    transform: scale(1.1);
}

@media (min-width: 769px) {
    .floating-skill-btn {
        display: flex;
    }
}

@media (max-width: 768px) {
    .floating-skill-btn {
        display: none !important;
    }
}

body:not(:has(.unified-plan-board)) .floating-skill-btn {
    display: none !important;
}

/* 프리미엄 HTML 기반 커스텀 툴팁 */
.tooltip-header {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 800;
    color: #ffffff;
    padding-bottom: 3px;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    font-family: 'Inter', sans-serif;
}

.floating-tooltip {
    position: absolute;
    bottom: 115%;
    left: 50%; /* 기준점을 중앙으로 */
    margin-left: -45px; /* min-width 90px의 절반만큼 왼쪽으로 밀어 고정 */
    transform: translateY(10px);
    background: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    padding: 8px 15px 8px 12px;
    border-radius: 14px;
    font-size: 0.9rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: max-content;
    min-width: 90px;
    white-space: nowrap;
    border: none;
    isolation: isolate;
    z-index: 10000;
}

.floating-skill-btn:hover .floating-tooltip {
    opacity: 1;
    transform: translateY(0);
}

.tooltip-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 0;
}

.tooltip-label {
    width: 20px;
    display: flex;
    justify-content: center;
}

.tooltip-label img {
    width: 18px !important;
    height: 18px !important;
    filter: none !important;
    opacity: 1 !important;
    /* 이미지 투명도 강제 고정 */
}

.tooltip-val {
    flex: 1;
    text-align: center;
    font-weight: 900;
    /* 더 두껍게 */
    font-family: 'Inter', 'Pretendard', sans-serif;
    font-variant-numeric: tabular-nums;
}

/* 색상 채도 강화 */
.tooltip-val.vo {
    color: #ff3b8d;
}

.tooltip-val.da {
    color: #3b9fff;
}

.tooltip-val.vi {
    color: #ffc23b;
}

.floating-skill-btn:hover .floating-tooltip {
    opacity: 1;
    transform: translateY(0);
}
#preset-preview::-webkit-scrollbar { display: none; }

.hif-eval-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(calc(-50% - 1px));
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 0.65rem;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    z-index: 10;
}

@media (max-width: 768px) {
    .hif-eval-btn {
        right: 6px;
        padding: 2px 5px;
        font-size: 0.52rem;
        border-radius: 3px;
    }
}

/* HIF 평가 모달 내 숫자 입력창의 스핀 버튼(위아래 삼각형 화살표) 제거 */
#hif-eval-modal input::-webkit-outer-spin-button,
#hif-eval-modal input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#hif-eval-modal input[type="number"] {
    -moz-appearance: textfield;
}

/* 모바일 전용: HIF 평가 계산 모달을 더욱 컴팩트하게 최적화 */
@media (max-width: 768px) {
    #hif-eval-modal .stat-detail-modal-content {
        padding: 12px 14px !important;
        max-width: 92% !important;
        width: 280px !important;
        border-radius: 10px !important;
    }
    #hif-eval-modal h3 {
        margin-top: 0;
        margin-bottom: 10px !important;
        font-size: 0.95rem !important;
        padding-bottom: 6px !important;
    }
    #hif-eval-modal .stat-detail-close {
        top: 6px !important;
        right: 10px !important;
        font-size: 20px !important;
    }
    #hif-eval-modal div[style*="display: flex"][style*="flex-direction: column"] {
        gap: 8px !important; /* 입력 그룹 간 격차 축소 */
    }
    #hif-eval-modal label {
        font-size: 0.72rem !important;
    }
    #hif-eval-modal input {
        padding: 5px 8px !important;
        font-size: 0.8rem !important;
        border-radius: 6px !important;
    }
    #hif-eval-modal div[style*="margin-top: 10px"] {
        margin-top: 4px !important;
        padding: 8px 12px !important;
        border-radius: 8px !important;
    }
    #btn-close-hif-eval {
        margin-top: 10px !important;
        padding: 6px !important;
        font-size: 0.78rem !important;
        border-radius: 6px !important;
    }
}