/* [공통 변수 및 기본 스타일] */
:root {
    --primary-bg: #f8fafc;
    --card-bg: #ffffff;
    --text-main: #1e293b;
    --text-sub: #64748b;
    --accent-color: #3b82f6;
    --admin-accent: #ef4444;
    --border: #e2e8f0;
    --sidebar-width: 260px;
    --danger: #ef4444;
    --text-sub: #64748b;
}

body {
    margin: 0;
    display: flex; /* 사이드바와 컨텐츠를 가로로 배치 */
    min-height: 100vh;
    background-color: var(--primary-bg);
    font-family: 'Pretendard', sans-serif;
    color: var(--text-main);
}

/* [사이드바 스타일] */
.sidebar {
    width: var(--sidebar-width);
    background: var(--card-bg);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 30px 20px;
    position: fixed;
    height: 100vh;
    box-sizing: border-box;
}

.sidebar h2 {
    font-family: 'Montserrat';
    font-size: 1.2rem;
    margin-bottom: 40px;
    color: var(--admin-accent);
    letter-spacing: 2px;
}

.nav-menu {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.nav-item {
    padding: 14px 20px;
    text-decoration: none;
    color: var(--text-sub);
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

.nav-item:hover, .nav-item.active {
    background: #fff1f0;
    color: var(--admin-accent);
}

/* [메인 컨텐츠 영역] */
.main-content {
    margin-left: var(--sidebar-width);
    flex: 1;
    padding: 40px;
    box-sizing: border-box;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.admin-badge {
    background: var(--admin-accent);
    color: white;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: bold;
}

/* [통계 카드 그리드] */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.stat-card {
    background: var(--card-bg);
    padding: 25px;
    border-radius: 20px;
    border: 1px solid var(--border);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.stat-card p { margin: 0; font-size: 0.85rem; color: var(--text-sub); }
.stat-card h3 { margin: 10px 0 0 0; font-size: 1.8rem; color: var(--text-main); }

/* [데이터 테이블 스타일] */
.data-section {
    background: var(--card-bg);
    border-radius: 24px;
    border: 1px solid var(--border);
    padding: 25px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th {
    text-align: left;
    padding: 15px;
    border-bottom: 2px solid var(--primary-bg);
    color: var(--text-sub);
    font-size: 0.9rem;
}

td {
    padding: 18px 15px;
    border-bottom: 1px solid var(--primary-bg);
    font-size: 0.95rem;
}

.status-pill {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    background: #f1f5f9;
}

.btn-sm {
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: white;
    cursor: pointer;
    font-size: 0.8rem;
}

.btn-sm:hover { background: var(--primary-bg); }

/* 관리자용 푸터 스타일 */
.admin-footer {
    margin-top: 60px; /* 컨텐츠와 충분한 거리 확보 */
    padding-top: 30px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-sub);
    font-size: 0.8rem;
}

.admin-footer p {
    margin: 0;
    font-weight: 600;
    letter-spacing: 1px;
}

.footer-links {
    display: flex;
    align-items: center;
    gap: 15px;
}

.divider {
    color: var(--border);
}

/* 모바일 대응 (사이드바가 사라질 경우를 대비) */
@media (max-width: 768px) {
    .admin-footer {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}

/* 파티 선택 화면 전용 스타일 */
.party-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 30px;
}

.party-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 30px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 180px;
}

.party-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(238, 202, 202, 0.08);
    border-color: var(--admin-accent);
}

.party-card h3 { margin: 0 0 10px 0; font-size: 1.3rem; color: var(--text-main); }
.party-card p { margin: 0; color: var(--text-sub); font-size: 0.9rem; }

.party-meta {
    margin-top: 20px;
    display: flex;
    gap: 10px;
}

.tag {
    background: #f1f5f9;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-sub);
}

.add-card {
    border: 2px dashed var(--border);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-sub);
    font-weight: 600;
}
.add-card:hover {
    border-color: var(--admin-accent);
    color: var(--admin-accent);
    background: #fff1f0;
}

/* 팝업(모달) 스타일 */
.modal-overlay {
    display: none; /* 기본은 숨김 */
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}
/* active 클래스가 추가되면 화면에 표시 */
.modal-overlay.active {
    display: flex !important;
}
/* 핵심: .show 클래스가 추가되었을 때 보이게 함 */
.modal-overlay.show {
    display: flex !important;
}

.modal-box {
    background: white; padding: 40px; border-radius: 24px; width: 400px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}
.form-group { margin-bottom: 20px; text-align: left; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 0.9rem; }
.form-input { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 8px; box-sizing: border-box; }

/* 모든 모달 내 라벨 폰트 통일 */
.modal-box label {
    font-family: 'Pretendard', sans-serif; /* 본문 폰트로 통일 */
    font-weight: 600;                     /* 강조를 위해 약간 두껍게 */
    font-size: 0.85rem;
    color: var(--text-main);              /* 혹은 짙은 회색 계열 */
    margin-bottom: 6px;
    display: inline-block;
}

/* Montserrat을 써야 하는 숫자나 영문 라벨이 있다면 따로 지정 */
.modal-box .form-row label {
    font-family: 'Montserrat', 'Pretendard', sans-serif;
}

/* 모달 내 버튼 스타일 보강 */
.modal-box .menu-btn {
    padding: 15px 25px; /* 상하좌우 여백을 늘려 크기 확대 */
    font-size: 1rem;    /* 글자 크기 확대 */
    font-weight: 700;   /* 글자 두께 강조 */
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;       /* 기본 테두리 제거 */
}

/* 취소 버튼 (보조 버튼) */
.modal-box .menu-btn:first-child {
    background-color: #f1f5f9;
    color: #64748b;
}

.modal-box .menu-btn:first-child:hover {
    background-color: #e2e8f0;
}

/* 등록 버튼 (강조 버튼) */
.modal-box .menu-btn:last-child {
    background-color: var(--admin-accent);
    color: white;
}

.modal-box .menu-btn:last-child:hover {
    filter: brightness(0.9); /* 살짝 어둡게 해서 클릭 피드백 제공 */
    transform: translateY(-2px); /* 살짝 떠오르는 효과 */
}

/* 파티원 입력 줄 스타일 */
.member-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    align-items: center;
}
/* 비율 조정 */
.select-wrapper { flex: 2; }
.player-name-input { flex: 3; }

.modal-input, .modal-select {
    font-family: 'Pretendard', sans-serif;
    font-size: 0.95rem;
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box; /* 패딩이 너비에 영향을 주지 않도록 설정 */
}

/* 추가 버튼 */
.btn-add-row {
    width: 100%;
    padding: 10px;
    background-color: #f0f2f5;
    border: 2px dashed #ccc;
    border-radius: 6px;
    color: #555;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-add-row:hover { background-color: #e4e6e9; border-color: #999; }

/* 삭제 버튼 (빨간 휴지통) */
.btn-remove-row {
    flex: 0 0 40px;
    height: 40px;
    background-color: #ffebeb;
    color: #ff4d4d;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
}
.btn-remove-row:hover { background-color: #ffadad; color: white; }

/* 날짜 선택창 전체 스타일링 */
.form-group input[type="datetime-local"] {
    width: 100%;
    padding: 10px 15px;
    margin-top: 5px;
    border: 1px solid #ddd;
    border-radius: 8px; /* 둥근 모서리 */
    font-size: 1rem;
    font-family: 'Pretendard', sans-serif; /* 폰트 설정 */
    color: #333;
    background-color: #fff;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
}

/* 포커스 되었을 때 (클릭 시) 강조 효과 */
.form-group input[type="datetime-local"]:focus {
    border-color: #6c5ce7; /* 포인트 컬러 (보라색 계열 추천) */
    box-shadow: 0 0 5px rgba(108, 92, 231, 0.3);
}

/* 1. 공통 입력창 스타일 (높이와 둥근 모서리 통일) */
input[type="text"], 
input[type="datetime-local"], 
select {
    width: 100%;
    height: 45px; /* 높이를 명시적으로 통일 */
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box; /* 패딩이 높이에 영향을 주지 않도록 설정 */
}

/* 2. 레이블 간격 넓히기 */
.form-group label {
    display: block;
    margin-bottom: 8px;
    /*margin-top: 16px;  위쪽 요소와의 간격 확보 */
    font-weight: 600;
    color: #1f2937;
}

/* 3. 파티원 추가 영역 (가로 배치 정렬) */
.member-row {
    display: flex;
    gap: 8px; /* 입력창 사이 간격 */
    align-items: center;
    margin-bottom: 10px;
}

.member-row select {
    flex: 1; /* 캐릭터 선택창 비율 */
}

.member-row input {
    flex: 2; /* 이름 입력창을 더 넓게 */
}

/* 헤더 배치 설정 */
.content-header {
    display: flex;
    justify-content: space-between; /* 제목은 왼쪽, 버튼은 오른쪽 */
    align-items: center;            /* 세로 중앙 정렬 */
    margin-bottom: 30px;
}

/* 버튼 디자인 공통화 */
.menu-btn.btn-accent {
    background-color: var(--admin-accent); /* 기존 레드/오렌지 포인트 컬러 */
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap; /* 텍스트 줄바꿈 방지 */
    height: fit-content; /* 내용에 맞게 높이 조절 */
}

.menu-btn.btn-accent:hover {
    background-color: #e63946; /* 조금 더 진한 색으로 변경 */
    transform: translateY(-2px); /* 살짝 떠오르는 효과 */
    box-shadow: 0 4px 12px rgba(230, 57, 70, 0.3);
}

.btn-secondary {
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); /* 부드러운 애니메이션 */
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-secondary:hover {
    background-color: #c5c4c4 !important; /* 더 진한 빨강 */
    transform: translateY(-2px); /* 살짝 위로 이동 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 그림자 강화 */
    filter: brightness(1.1); /* 전체적으로 10% 더 밝게 */
}

/* 기본 상태 */
.btn-accent {
    background-color: #ff4d4d; /* 현재 사용 중인 빨간색 */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: bold;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); /* 부드러운 애니메이션 */
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Hover 상태: 색상 변경 + 약간 위로 떠오르는 효과 */
.btn-accent:hover {
    background-color: #ff3333 !important; /* 더 진한 빨강 */
    transform: translateY(-2px); /* 살짝 위로 이동 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 그림자 강화 */
    filter: brightness(1.1); /* 전체적으로 10% 더 밝게 */
}

/* Active 상태: 버튼을 실제로 클릭했을 때 눌리는 효과 */
.btn-accent:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    filter: brightness(0.9);
}

.btn-accent:hover .icon-class {
    transform: rotate(90deg); /* 플러스 아이콘이라면 살짝 회전시키는 센스 */
    transition: transform 0.2s;
}

/* 1. 테이블 컨테이너 수정 */
.content-card {
    max-height: 650px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0 !important;   /* 컨테이너 내부의 모든 패딩 제거 (핵심) */
    background: #fff;
}

/* 2. 테이블 레이아웃 최적화 */
.data-table {
    width: 100%;
    border-collapse: collapse; /* 테두리 겹침 방지 */
    margin: 0;                 /* 테이블 자체 마진 제거 */
}

/* 3. 헤더 고정 위치 재설정 */
.data-table thead th {
    position: sticky;
    top: -1px;      /* 0 대신 -1px을 주면 상단 테두리 틈을 더 확실히 메울 수 있습니다 */
    z-index: 10;
    
    background-color: #f1f5f9;
    border-bottom: 2px solid #cbd5e1;
    color: #334155;
    padding: 15px;
    font-weight: 800;
}

/* 스크롤 시 그림자 효과를 주어 붕 떠 있는 느낌 추가 (선택 사항) */
.content-card::-webkit-scrollbar {
    width: 8px;
}
.content-card::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.data-table th {
    background-color: #f1f5f9; /* 헤더 배경을 살짝 어둡게 */
    color: #334155;            /* 글자색을 진한 회색으로 */
    font-weight: 700;
    border-bottom: 2px solid #e2e8f0;
}

.data-table td {
    color: #1e293b;            /* 본문 글자색을 명확하게 */
    border-bottom: 1px solid #f1f5f9;
    padding: 15px;
}

/* 모달 내 textarea 스타일 */
textarea.modal-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    resize: vertical; /* 높이 조절 가능 */
    /*min-height: 120px;*/
    font-family: inherit;
    line-height: 1.6;
}

/* 모달 내 버튼 공통 스타일 */
.modal-actions {
    display: flex;
    gap: 12px;
    width: 100%; /* 부모 너비 꽉 채우기 */
}

.modal-actions .menu-btn {
    flex: 1;           /* ★ 중요: 모든 버튼이 동일한 비율(1:1)을 가짐 */
    padding: 14px 0;   /* 높이 통일 */
    font-size: 15px;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    text-align: center;
}

/* 취소 버튼 디자인 (차별화) */
.btn-secondary {
    background-color: #f1f5f9;
    color: #64748b;
}

.btn-secondary:hover {
    background-color: #e2e8f0;
}

/* 저장 버튼 디자인 */
.btn-accent {
    background-color: var(--admin-accent);
    color: white;
}

/* 텍스트가 너무 흐릿할 경우를 대비한 공통 색상 */
.header-title h1 {
    color: #0f172a !important;
}

.header-title p {
    color: #64748b !important;
}

/* 데이터 없을 때 문구 스타일 */
.empty-msg {
    text-align: center;
    padding: 80px 0;
    color: #94a3b8;
    font-size :smaller;
}

.empty-msg-icon {
    font-size: 40px;
    margin-bottom: 10px;
    display: block;
}

/* 텍스트가 너무 길 때 말줄임 처리 (Goal Summary 등) */
.text-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

input[readonly] {
    background-color: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
    border: 1px solid #e2e8f0;
}

/* 테이블 내 미니 이미지 컨테이너 */
.item-thumb-container {
    width: 40px;
    height: 40px;
    background-color: #f8fafc;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
}

/* 이미지 스타일 */
.item-mini-img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 이미지 비율 유지하며 꽉 채움 */
}

/* 추가 팁: 슬롯별 배지 스타일 */
.slot-badge {
    background-color: #f1f5f9;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}

/* 모달 내 공통 입력창 스타일 */
.modal-select {
    width: 100%;
    padding: 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    background-color: white;
    cursor: pointer;
}

.modal-input:focus, .modal-select:focus {
    outline: none;
    border-color: var(--admin-accent);
    box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.1);
}

/* 텍스트 요약 처리 (최대 2줄까지 표시 후 말줄임) */
.text-summary {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 보여줄 줄 수 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.9rem;
    color: var(--text-sub);
    max-width: 400px; /* 적절한 너비 제한 */
}

/* After Effect 태그 스타일 */
.tag {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}
.tag-remove { background: #fee2e2; color: #ef4444; }
.tag-return { background: #dcfce7; color: #22c55e; }
.tag-stay { background: #f1f5f9; color: #64748b; }

.text-semibold { font-weight: 600; color: var(--text-main); }

.filter-group {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.filter-btn {
    padding: 8px 16px;
    border: 1px solid var(--border);
    background: white;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-sub);
    cursor: pointer;
    transition: all 0.2s;
}

.filter-btn:hover {
    background: #f1f5f9;
}

.filter-btn.active {
    background: var(--admin-accent);
    color: white;
    border-color: var(--admin-accent);
}

/* 아이템 그리드 컨테이너 */
.item-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 25px;
    margin-top: 30px;
}

/* 개별 아이템 카드 */
.item-master-card {
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.item-master-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
}

/* 이미지 박스 수정 */
.card-image-box {
    position: relative;
    width: 100%;
    height: 200px;         /* 높이를 살짝 키워 여유 공간 확보 */
    background: #f8fafc;
    display: flex;
    align-items: center;   /* 중앙 정렬 */
    justify-content: center;
    overflow: hidden;
    padding-top: 35px;     /* 타이틀 바 두께만큼 상단 패딩 추가 (핵심) */
    box-sizing: border-box;
}

/* 타이틀 바 스타일 유지 및 미세 조정 */
.item-card-title-bar, .item-no-title-tag {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 32px;          /* 높이 고정 */
    background: rgba(30, 41, 59, 0.9);
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12px;
    z-index: 2;
    box-sizing: border-box;
}

/* 이미지 크기 자동 조절 */
.card-image-box img {
    max-width: 90%;
    max-height: 90%;       /* 패딩을 제외한 영역 내에서 최대 크기 */
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* 카드 상단 타이틀 바 (번호 + 이름) */
.item-card-title-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(30, 41, 59, 0.85); /* 짙은 네이비 배경 */
    color: #ffffff;
    padding: 7px 12px;
    display: flex;
    justify-content: space-between; /* 번호는 왼쪽, 이름은 오른쪽 정렬 */
    align-items: center;
    z-index: 2;
    box-sizing: border-box;
}

.item-card-title-bar .it-no {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

.item-card-title-bar .it-name {
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 70%; /* 이름이 너무 길면 말줄임 */
}

/* 이미지 바로 위에 타이틀처럼 붙는 태그 */
.item-no-title-tag {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;        /* 가로 전체를 채워 타이틀바 느낌 강조 */
    padding: 6px 0;
    background: rgba(30, 41, 59, 0.8); /* 짙은 네이비/블랙 계열 */
    color: #ffffff;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 2px;
    z-index: 2;
}

/* 아이템 정보 영역 */
.card-info-content {
    padding: 15px;
    flex-grow: 1;
}

.item-name-tag {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: #1e293b;
}

.item-meta-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    font-size: 0.85rem;
}

.cost-text {
    color: #d97706; /* 골드 색상 */
    font-weight: 800;
}

.slot-text {
    color: #64748b;
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
}

.item-desc-text {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 10px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 카드 하단 버튼 영역 */
.card-action-footer {
    padding: 12px;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
    display: flex;
    gap: 8px;
}

.card-action-footer button {
    flex: 1;
}

/* 비어있는 상태 컨테이너 */
.empty-state-container {
    padding: 100px 20px;
    text-align: center;
    background: #ffffff;
    border: 2px dashed #e2e8f0;
    border-radius: 20px;
    margin-top: 20px;
}

/* 아이콘 애니메이션 (살짝 둥둥 뜨는 효과) */
.empty-icon {
    font-size: 4rem;
    margin-bottom: 20px;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.empty-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 12px;
}

.empty-desc {
    font-size: 1rem;
    color: #64748b;
    line-height: 1.6;
}

/* 아이템 카드 그리드 보정 */
.item-grid-container {
    display: grid;
    /* 최소 220px 너비를 보장하며 자동으로 채움 */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 25px;
    margin-top: 30px;
}

.split-modal {
    max-width: 900px !important; /* 넓은 레이아웃 확보 */
}

.modal-body-split {
    display: flex;
    gap: 30px;
    margin-top: 20px;
}

.preview-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f8fafc;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.form-section {
    flex: 1.5;
}

/* admin.css 또는 스타일 섹션 */
.form-section label {
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    color: #475569;         /* 가독성 좋은 짙은 회색 */
    margin-bottom: 8px;
    display: block;
    
    /* 찌그러짐 방지를 위한 핵심 설정 */
    line-height: 1.2;       /* 행간 확보 */
    letter-spacing: -0.01em; /* 자간을 아주 미세하게 좁혀 가독성 향상 */
    white-space: nowrap;    /* 텍스트 줄바꿈 방지 */
    transform: none !important; /* 혹시 모를 왜곡 효과 제거 */
}

.form-row {
    display: flex;
    gap: 20px;              /* 입력칸 사이 간격 확대 */
    margin-bottom: 18px;    /* 행 사이 간격 확대 */
    align-items: flex-start;
}

.form-group {
    margin-bottom: 18px;    /* 단독 입력행 간격 */
}

/* 프리뷰용 카드 크기 조절 */
.preview-card {
    width: 240px;
    pointer-events: none; /* 클릭 방지 */
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* 1. 상단 정렬을 위한 부모 컨테이너 설정 */
.perk-management-container {
    display: flex;
    gap: 30px;            /* 좌우 간격 */
    align-items: flex-start; /* 핵심: 자식 요소들을 상단(Y=0)에 정렬 */
    margin-top: 20px;     /* 필터 버튼과의 간격 */
    width: 100%;
}

/* 2. 좌측 캐릭터 선택창 초기화 */
.class-selector {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 0 !important;  /* 기존에 들어있을지 모르는 마진 제거 */
    padding: 0;
    width: 220px;          /* 고정 너비 */
}

/* 3. 우측 노트 컨테이너 초기화 */
.perk-notebook-container {
    flex: 1;               /* 남은 공간 모두 차지 */
    margin: 0 !important;  /* 핵심: 상단 마진을 0으로 하여 좌측과 맞춤 */
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.03);
    /* 이미지 image_85e886.png 처럼 연한 점무늬 유지 */
    background-image: radial-gradient(#f1f5f9 1.5px, transparent 1.5px);
    background-size: 20px 20px;
}

/* 3. 특혜 리스트 섹션 (우측) */
.perk-list-section {
    flex: 1;            /* 남은 공간을 모두 차지 */
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    overflow: hidden;   /* 테이블 테두리 둥글게 유지 */
    margin-top: 0;      /* 좌측 카드와 상단 라인 일치 */
}

/* 개별 캐릭터 카드 */
.class-item {
    display: flex;
    flex-direction: column; /* 세로 배치로 변경하여 이미지를 크게 강조 */
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: #fff;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* 마우스 호버 및 활성화 상태 */
.class-item:hover {
    transform: translateX(5px);
    border-color: #cbd5e1;
}

.class-item.active {
    border-color: #f43f5e; /* 포인트 컬러 */
    background: #fff1f2;
    box-shadow: 0 10px 15px -3px rgba(244, 63, 94, 0.2);
}

/* 캐릭터 이미지 래퍼 및 이미지 크기 */
.class-img-wrapper {
    width: 80px;  /* 이미지 크기를 32px에서 80px로 확대 */
    height: 80px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border-radius: 50%; /* 동그란 프레임 */
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.class-item.active .class-img-wrapper {
    background: #fff;
    border-color: #fecdd3;
}

.class-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지가 프레임에 꽉 차게 */
    transition: transform 0.3s ease;
}

.class-item.active img {
    transform: scale(1.1); /* 활성화 시 미세하게 확대 */
}

/* 캐릭터 이름 */
.class-name {
    font-size: 1.1rem;
    font-weight: 800;
    color: #1e293b;
    font-family: 'Pretendard', sans-serif;
}

.class-item.active .class-name {
    color: #e11d48;
}

/* 4. 테이블 내부 정렬 보정 */
.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th, .data-table td {
    padding: 18px 20px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle; /* 텍스트와 박스 세로 중앙 정렬 */
}

.data-table thead th {
    background-color: #f8fafc;
    font-weight: 800;
    color: #475569;
    text-align: left;
}

/* 특혜 설명 텍스트 스타일 */
.perk-desc {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #334155;
    font-weight: 500;
}

.perk-icon {
    width: 1.2em;
    height: 1.2em;
    vertical-align: middle;
    margin: 0 3px;
    display: inline-block;

    /* [핵심] SVG 선명도 개선 속성 */
    image-rendering: -webkit-optimize-contrast; /* 크롬, 사파리에서 대비 최적화 */
    image-rendering: crisp-edges;              /* 픽셀 경계를 선명하게 */
    shape-rendering: geometricPrecision;       /* 도형 렌더링 정밀도 향상 */
    
    /* 미세한 흐림 방지 */
    backface-visibility: hidden;
    transform: translateZ(0); 
}

/* 2. 테이블: 행 간격 최적화 및 줄노트 라인 */
.perk-notebook-table {
    width: 100%;
    border-collapse: separate; /* 라운드 효과 유지를 위해 separate */
    border-spacing: 0;
    margin-top : 0;
}

.perk-notebook-table thead th {
    background: #f8fafc;
    color: #475569;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    padding: 15px;
    border-bottom: 2px solid #1e293b; /* 헤더 아래 굵은 선 */
}

.perk-notebook-table tbody td {
    padding: 14px 15px; /* 행 높이 미세 조정 */
    border-bottom: 1px solid #f1f5f9; /* 연한 노트 줄선 */
    vertical-align: middle;
}

/* 3. SVG 아이콘: 절대 흐려지지 않는 '쨍함' 부여 */
.perk-icon {
    width: 1.25em;
    height: 1.25em;
    vertical-align: -0.25em; /* 글자 아래 기준선에 맞춤 */
    margin: 0 4px;
    display: inline-block;
    
    /* 브라우저가 SVG를 이미지로 인식할 때 발생하는 뭉개짐 방지 */
    image-rendering: -webkit-optimize-contrast; 
    image-rendering: crisp-edges;
    shape-rendering: geometricPrecision;
    
    /* 미세한 픽셀 보정 */
    transform: translateZ(0); 
}

/* 4. 번호(No.) 칸 Montserrat 폰트 강조 */
.perk-notebook-table td:first-child {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: #94a3b8;
    font-size: 0.85rem;
}

/* 노트에 적은 듯한 느낌을 주는 폰트 스타일 (선택사항) */
.perk-desc-text {
    font-weight: 500;
    letter-spacing: -0.3px;
}

/* 체크박스(Ticks) 정렬 */
.tick-preview {
    display: flex;
    gap: 4px;
}

.tick-box {
    width: 16px;
    height: 16px;
    border: 1.5px solid #6b7280;
    border-radius: 3px;
    background: #fff;
}

/* [Toast 중앙 배치 강제 스타일] */
#custom-toast.toast-container {
    position: fixed !important;
    /* 화면의 정중앙 좌표 설정 */
    top: 50% !important;
    left: 50% !important;
    /* 중앙 정렬 유지 + 처음엔 살짝 작게(scale) 설정 */
    transform: translate(-50%, -50%) scale(0.8) !important; 
    
    z-index: 999999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important; /* 탄력 있는 효과 */
    pointer-events: none;
}

/* 활성화 상태: 중앙에서 선명하게 나타남 */
#custom-toast.toast-container.show {
    opacity: 1 !important;
    visibility: visible !important;
    /* 원래 크기로 돌아오며 중앙에 고정 */
    transform: translate(-50%, -50%) scale(1) !important;
}

/* 알림 박스 디자인 (중앙용으로 가독성 강화) */
#custom-toast .toast-box.warning {
    background: rgba(30, 41, 59, 0.95) !important; /* 짙은 네이비 반투명 */
    color: #ffffff !important;
    border: none !important;
    padding: 20px 40px !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3) !important;
    display: flex !important;
    flex-direction: column !important; /* 아이콘과 텍스트 세로 배치 */
    align-items: center !important;
    gap: 15px !important;
    min-width: 280px !important;
    text-align: center !important;
}

#custom-toast .toast-icon {
    font-size: 2.5rem !important; /* 아이콘을 크게 키움 */
}

#custom-toast #toast-message {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

/* 모달 헤더 디자인 */
.modal-header {
    margin-bottom: 30px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 20px;
}

.modal-header h2 {
    font-size: 1.5rem;
    color: #0f172a;
    margin: 0 0 8px 0;
}

.modal-header p {
    color: #64748b;
    font-size: 0.9rem;
    margin: 0;
}

/* 입력 폼 그리드 및 스타일 */
.flex-1 { flex: 1; }

.modal-input:read-only, .modal-select:disabled {
    background-color: #f8fafc !important;
    color: #94a3b8;
    border-color: #e2e8f0;
    cursor: not-allowed;
}

/* 폼 행(Row) 배치 */
.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 5px;
}

/* 체크박스 컨테이너 */
.tick-preview {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* 개별 체크박스 스타일 */
.tick-box {
    width: 18px;
    height: 18px;
    border: 2px solid #cbd5e1; /* 부드러운 회색 테두리 */
    border-radius: 4px;        /* 약간 둥근 모서리 */
    background-color: #fff;
    transition: all 0.2s ease;
}

/* (선택 사항) 체크된 상태를 미리 보고 싶을 때를 위한 스타일 */
.tick-box.checked {
    background-color: #f43f5e; /* 포인트 레드 컬러 */
    border-color: #f43f5e;
    position: relative;
}

.tick-box.checked::after {
    content: '✓';
    color: white;
    font-size: 12px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 시나리오 관리 전용 스타일 */
.scenario-notebook-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* 고정 너비 레이아웃 활성화 */
    margin-top: 0;
}

.scenario-notebook-table th {
    background: #f8fafc;
    padding: 12px 15px;
    border-bottom: 2px solid #1e293b;
    font-size: 0.85rem;
    color: #475569;
}

.scenario-notebook-table td {
    padding: 14px 15px; /* 행 간격 최적화 */
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    /* 텍스트가 너무 길면 말줄임표 처리 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 제목 칸을 더 굵고 선명하게 */
.scen-title-cell {
    font-weight: 700;
    color: #1e293b;
    font-size: 0.95rem;
}

/* 데이터가 없을 때의 흐릿한 처리 */
.scen-empty-text {
    color: #cbd5e1;
    font-size: 0.8rem;
    font-style: italic;
}

/* 2. Actions 버튼 정렬 (Edit, Delete 가로 배치) */
.action-buttons {
    display: flex;
    gap: 8px;           /* 버튼 사이 간격 */
    justify-content: flex-start;
    align-items: center;
}

/* 3. 테이블 너비 재조정 (Actions 칸을 조금 더 넓게) */
.scenario-notebook-table .col-no { width: 70px; }
.scenario-notebook-table .col-title { width: auto; }
.scenario-notebook-table .col-goal { width: 18%; }
.scenario-notebook-table .col-reward { width: 18%; }
.scenario-notebook-table .col-actions { width: 150px; } /* 버튼 두 개가 들어갈 충분한 공간 */

/* 4. 버튼 스타일 미세 조정 */
.btn-delete {
    background-color: transparent;
    border: 1px solid #ef4444;
    color: #ef4444;
}

.btn-delete:hover {
    background-color: #ef4444;
    color: white;
}

/* 게임 타입별 뱃지 스타일 */
[class^="badge-"] {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
}

.badge-jotl { background: #fee2e2; color: #f43f5e; border: 1px solid #fecaca; } /* Red */
.badge-gh { background: #fef3c7; color: #d97706; border: 1px solid #fde68a; }   /* Orange/Yellow */
.badge-fh { background: #e0f2fe; color: #0284c7; border: 1px solid #bae6fd; }   /* Blue */

.party-row {
    cursor: pointer;
    transition: background 0.2s;
}

.party-row:hover {
    background-color: #f8fafc;
}

/* 타이틀 셀 정렬 */
.title-with-audio {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 촌스럽지 않은 커스텀 오디오 버튼 */
.audio-mini-btn {
    width: 26px;
    height: 26px;
    border-radius: 6px; /* 살짝 각진 둥근 사각형 */
    border: 1px solid #e2e8f0;
    background: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* 호버 시 JotL 레드 포인트 컬러 적용 */
.audio-mini-btn:hover {
    background: #f43f5e;
    border-color: #f43f5e;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(244, 63, 94, 0.2);
}

/* 아이콘 스타일 (SVG나 아이콘 폰트 대신 텍스트로 깔끔하게) */
.audio-icon {
    font-size: 10px;
    color: #94a3b8;
    transition: color 0.2s;
    line-height: 1;
}

.audio-mini-btn:hover .audio-icon {
    color: #ffffff; /* 호버 시 아이콘 흰색으로 */
}

/* 재생 중일 때의 상태 (JS에서 클래스 토글) */
.audio-mini-btn.is-playing {
    background: #1e293b;
    border-color: #1e293b;
    animation: pulse-red 2s infinite;
}

.audio-mini-btn.is-playing .audio-icon {
    color: #ffffff;
}

@keyframes pulse-red {
    0% { box-shadow: 0 0 0 0 rgba(30, 41, 59, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(30, 41, 59, 0); }
    100% { box-shadow: 0 0 0 0 rgba(30, 41, 59, 0); }
}

/* 메인 행 스타일 */
.scen-main-row { cursor: pointer; transition: background 0.2s; }
.scen-main-row:hover { background: #f8fafc; }

/* 상세 영역 컨테이너 */
.step-list-container {
    padding: 20px;
    background: #f1f5f9;
    border-radius: 8px;
    margin: 10px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}

/* 개별 스텝 아이템 */
.step-item {
    display: flex;
    gap: 20px;
    padding: 15px;
    background: white;
    border-radius: 10px;
    margin-bottom: 12px;
    border: 1px solid #e2e8f0;
}

.step-audio-part { flex-shrink: 0; }
.step-content-part { flex-grow: 1; }

.audio-play-btn {
    padding: 8px 15px;
    background: #1e293b;
    color: white;
    border-radius: 6px;
    border: none;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.step-title-text { display: block; margin-bottom: 5px; color: #be123c; font-size: 0.9rem; }
.step-script-text { font-size: 0.95rem; line-height: 1.6; color: #334155; margin: 0; }

/* 게임 구분 배지 */
.game-badge {
    font-size: 0.7rem;
    padding: 2px 5px;
    background: #e2e8f0;
    border-radius: 4px;
    color: #475569;
}

/* 스텝 입력 카드 외곽 */
.step-input-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    transition: all 0.2s ease;
}

/* 스텝 헤더 (숫자 배지와 삭제 버튼) */
.step-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.step-number-badge {
    background: #1e293b;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
}

.btn-step-delete {
    background: none;
    border: none;
    color: #ef4444;
    font-size: 0.8rem;
    cursor: pointer;
    text-decoration: underline;
}

.detail-container-cell {
    background-color: #f8fafc;
    padding: 0 !important; /* 내부 여백 제거 */
}

.step-summary-table-wrapper {
    padding: 15px 30px;
}

/* 1. 아코디언 행 전체 배경 및 여백 보정 */
.scen-detail-row {
    background-color: #fcfdfe; /* 메인 리스트와 차별화된 아주 밝은 하늘색 톤 */
}

.detail-container-cell {
    padding: 15px 40px 25px 40px !important; /* 좌우 여백을 넓혀서 안쪽으로 들여쓰기 효과 */
}

/* 2. 상세 단계 테이블 디자인 */
.step-mini-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9rem;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); /* 부드러운 그림자 추가 */
    margin-top : 0px;
}

.step-mini-table tr:last-child {
    border-bottom: none;
}

.step-mini-table tr {
    border-bottom: 1px solid #f1f5f9;
    transition: background-color 0.2s;
}

.step-mini-table tr:hover {
    background-color: #f8fafc; /* 각 스텝 행에 호버 효과 */
}

.step-mini-table td {
    padding: 16px 20px;
    vertical-align: middle;
}

/* 3. 컬럼별 스타일 */
.step-id-col { 
    width: 80px; 
    font-weight: 800; 
    color: #be123c; 
    font-family: 'Montserrat', sans-serif;
    letter-spacing: -0.5px;
}

.step-title-col { 
    width: 140px; 
    font-weight: 600;
    color: #1e293b;
}

.step-preview-col { 
    color: #64748b; 
    font-size: 0.85rem; 
    line-height: 1.5;
    max-width: 400px;
}

.step-action-col { 
    width: 140px; 
    text-align: right; 
}

/* 4. 세련된 상세 읽기 버튼 (Ghost Style) */
.btn-open-player {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-open-player:hover {
    border-color: #be123c;
    color: #be123c;
    background: #fff1f2; /* 브랜드 컬러의 아주 밝은 톤 */
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(190, 18, 60, 0.1);
}

.btn-open-player:active {
    transform: translateY(0);
}

/* 플레이어 모달 전용 박스 */
.player-box {
    min-width: 800px;
    border-radius: 20px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    border: none;
}

/* 팝업 헤더: Crimson 그라데이션 포인트 */
.player-header {
    padding: 20px 25px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.player-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #1e293b;
    font-weight: 800;
}

/* 세련된 X 버튼 (둥근 배경 호버 효과) */
.player-header .close-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    border: none;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.player-header .close-btn:hover {
    background: #cbd5e1;
    color: #1e293b;
    transform: rotate(90deg);
}

/* 스크립트 본문 영역 */
.player-body {
    padding: 25px;
    background: #fff;
}

.full-script-content {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #334155;
    background: #f1f5f9;
    padding: 20px;
    border-radius: 12px;
    max-height: 450px;
    overflow-y: auto;
    white-space: pre-line; /* 줄바꿈 유지 */
}

/* 푸터 및 재생 컨트롤러 */
.player-footer {
    padding: 0px 25px 10px 25px;
    background: #fff;
}

/* Crimson 메인 재생 버튼 */
.player-main-btn {
    width: 100%;
    height: 50px;
    background: #be123c; /* Crimson Red */
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(190, 18, 60, 0.2);
}

.player-main-btn:hover {
    background: #9f1239;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(190, 18, 60, 0.3);
}

.player-main-btn span {
    font-size: 1.2rem;
}

/* 프로그레스 바 디자인 */
.audio-controls {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.progress-bar-bg {
    width: 100%;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: #be123c;
    width: 0%;
    transition: width 0.1s linear;
}

.party-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    padding: 20px 0;
}

/* 카드 기본 디자인 업그레이드 */
.party-card {
    position: relative;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 160px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
    overflow: hidden;
}

/* 기본 배지 공통 스타일 수정 */
.game-badge {
    position: absolute;
    top: 0;
    right: 0;
    padding: 6px 14px;
    font-size: 0.7rem;
    font-weight: 800;
    color: white; /* 글자는 흰색으로 통일 */
    border-bottom-left-radius: 12px;
    letter-spacing: 0.5px;
    box-shadow: -2px 2px 5px rgba(0,0,0,0.1);
}

.party-card h3 {
    margin: 10px 0 5px 0;
    font-size: 1.25rem;
    color: #1e293b;
}

.party-date {
    font-size: 0.8rem;
    color: var(--text-sub);
}

/* 삭제 버튼 (평소엔 투명했다가 호버 시 등장) */
.btn-card-delete {
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: #fff1f2;
    color: var(--danger);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.2s;
}

.party-card:hover .btn-card-delete {
    opacity: 1;
}

.btn-card-delete:hover {
    background: var(--danger);
    color: white;
}

/* 새 파티 추가 카드 커스텀 */
.add-card {
    border: 2px dashed #cbd5e1;
    background: transparent;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    color: #94a3b8;
}

/* Jaws of the Lion (노란색/오렌지 계열) */
.badge-jotl {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

/* Gloomhaven (갈색/브론즈 계열) */
.badge-gh {
    background: linear-gradient(135deg, #92400e, #78350f);
}

/* Frosthaven (파란색/시안 계열) */
.badge-fh {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
}

/* 카드 호버 시 배지도 살짝 반응하게 */
.party-card:hover .game-badge {
    filter: brightness(1.1);
}

.card-stats {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #f1f5f9;
}

.stat { display: flex; flex-direction: column; gap: 4px; }
.stat-label { font-size: 0.6rem; color: #94a3b8; font-weight: 800; letter-spacing: 0.5px; }
.stat-value { font-size: 0.9rem; font-weight: 700; color: #334155; }

.mini-class-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    margin-right: 4px;
    background: #e2e8f0; /* 기본색 */
}

/* 클래스별 커스텀 컬러 (예시) */
.tag-redguard { background: #fee2e2; color: #991b1b; }
.tag-hatchet { background: #fef3c7; color: #92400e; }
.tag-voidwarden { background: #f3e8ff; color: #6b21a8; }
.tag-demolitionist { background: #dcfce7; color: #166534; }

.member-list {
    margin: 12px 0;
}

.member-label {
    font-size: 0.6rem;
    font-weight: 800;
    color: #94a3b8;
    display: block;
    margin-bottom: 4px;
}

.player-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.player-tag {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 100px; /* 알약 모양 */
    font-weight: 500;
}

/* 카드 통계 부분 간격 조정 */
.card-stats {
    margin-top: auto; /* 내용이 적어도 통계는 항상 아래쪽으로 */
    display: flex;
    gap: 20px;
    padding-top: 15px;
    border-top: 1px solid #f1f5f9;
}

/* 게임 타입별 태그 스타일 */
.tag-game {
    background-color: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
    font-size: 11px;
}

/* 텍스트가 너무 길 때 말줄임표 처리 */
.text-summary {
    max-width: 400px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #64748b;
    font-size: 0.9rem;
}

/* 테이블 내 아이콘 중앙 정렬 */
.data-table td {
    vertical-align: middle;
}
.intro-box { 
    background: white; padding: 10px; border-radius: 8px; 
    margin-bottom: 15px; border: 1px solid #e2e8f0; font-size: 0.9rem;
}

.content-item {
    background: white; border-radius: 6px; padding: 12px;
    margin-bottom: 10px; border: 1px solid #e2e8f0;
}

/* 카테고리별 왼쪽 선 색상 부여 */
.category-option_a { border-left: 5px solid #3b82f6; } /* 파랑 */
.category-option_b { border-left: 5px solid #10b981; } /* 초록 */
.category-cond_a, .category-cond_b { border-left: 5px solid #f59e0b; } /* 주황 */

.category-badge {
    font-size: 0.7rem; font-weight: bold; background: #eee;
    padding: 2px 6px; border-radius: 4px; margin-right: 10px;
}

.audio-path { font-family: monospace; font-size: 0.75rem; color: #64748b; }
.content-body { margin-top: 8px; font-size: 0.95rem; line-height: 1.5; }

/* 요약 텍스트 스타일 */
.summary-cell {
    color: #64748b;
    font-size: 0.85rem;
    max-width: 400px; /* 적절한 너비 제한 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 제목 셀 너비 확보 */
.title-cell {
    color: #1e293b;
    white-space: normal; /* 제목은 두 줄까지 허용해도 괜찮음 */
    word-break: keep-all;
}

/* 아코디언 내부 전체 설명 텍스트 */
.full-description {
    line-height: 1.6;
    white-space: pre-wrap; /* 줄바꿈 그대로 표시 */
    color: #334155;
}

/* 마스터 행의 높이를 조금 넉넉히 */
.master-row td {
    padding: 12px 8px;
    vertical-align: middle;
}

/* 재생 아이콘 효과 */
.play-icon:hover {
    filter: drop-shadow(0 0 5px #be123c);
    transform: scale(1.2);
    transition: all 0.2s;
}

/* 상세 리스트 내 작은 재생 버튼 */
.btn-play-sm {
    background: #4f46e5;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 11px;
    cursor: pointer;
    margin-right: 10px;
}

.btn-play-sm:hover {
    background: #4338ca;
}

/* 재생 중인 버튼 스타일 */
.playing {
    color: #be123c !important;
    font-weight: bold;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.btn-play-sm.playing {
    background-color: #be123c; /* 정지 버튼 느낌의 빨간색 */
}