/* --- 기본 설정 --- */

/* 구글 무료 폰트 (Noto Sans KR) */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;700&display=swap');

body {
    font-family: 'Noto Sans KR', sans-serif;
    background-color: #f0f2f5;
    margin: 0;
    padding: 0;
    color: #333;
}

/* --- 상단 헤더 --- */
header {
    background-color: #2c3e50;
    color: white;
    padding: 15px 20px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
header nav {
    font-size: 14px;
    color: #bdc3c7;
}
#player-name, #player-regression, #player-point {
    font-weight: bold;
    color: #ffffff;
}



/* --- 메인 콘텐츠 (좌우 분할) --- */
main {
    display: flex;
    justify-content: space-evenly;
    padding: 20px;
    gap: 20px; /* 섹션 사이 간격 */
}

/* --- 각 섹션 (마을, 던전) --- */
#town, #dungeon {
    background-color: #ffffff;
    border: 1px solid #dfe3e8;
    border-radius: 8px;
    padding: 20px;
    
    /* ❗️ [수정] 탭 전환 시 높이 차이로 인한 덜컥거림 방지 */
    min-height: 70vh; /* 화면 높이의 70%만큼 공간을 미리 확보 */
    box-sizing: border-box; /* 패딩 포함 높이 계산 */
    
    width: 100%; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    display: flex; 
    flex-direction: column; 
}

h2 {
    border-bottom: 2px solid #007bff;
    padding-bottom: 10px;
    color: #007bff;
    margin-top: 0;
    margin-bottom: 15px;
}

/* --- 버튼 --- */
button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 15px; /* 약간 작게 */
    margin: 5px;
    transition: background-color 0.2s;
}
button:hover:not(:disabled) { /* 비활성화 아닐 때만 호버 */
    background-color: #0056b3;
}
button:disabled { /* 비활성화 버튼 스타일 */
    background-color: #6c757d;
    cursor: not-allowed;
    opacity: 0.7;
}
button.disabled { /* 클래스로 비활성화 제어 시 */
     background-color: #6c757d; cursor: not-allowed; opacity: 0.7;
}

.button-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2열 그리드 */
    gap: 5px; /* 버튼 사이 간격 */
}
.button-grid button {
    width: 100%; /* 그리드 셀 채우기 */
    margin: 0; /* 그리드 gap 사용 */
    font-size: 13.5px; 
}


/* 특정 버튼 색상 */
#inventory-button { 
    background-color: #6c757d; 
    float: right; 
    padding: 3px 8px;
    font-size: 12px;
    margin: -3px 0 0 0;
}
#inventory-button:hover { background-color: #5a6268; }
#alchemy-button { background-color: #9b59b6; } /* 연금술 보라색 */
#alchemy-button:hover:not(:disabled) { background-color: #8e44ad; }


.collapsible-section {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    padding: 10px 15px;
    margin-bottom: 15px;
}
#player-status {
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    padding: 10px 15px;
}

.collapsible-section h3 {
    margin-top: 0; 
    margin-bottom: 10px; 
    color: #495057; 
    font-size: 1.1em;
    border-bottom: 1px solid #ced4da;
    padding-bottom: 8px;
    display: flex;
    align-items: center;
}

#player-status p { text-align: center; font-size: 14px; margin-bottom: 10px; }
#base-stats-list { list-style: none; padding: 0; margin: 0; }
#base-stats-list li { 
    margin-bottom: 5px; font-size: 14px; 
    cursor: pointer;
}
#base-stats-list li:hover {
    background-color: #dcdcdc;
}

.stat-up-btn { 
    background-color: #28a745;
    color: white;
    padding: 1px 5px;
    font-size: 11px;
    border-radius: 3px;
    margin-left: 5px;
    line-height: 1;
    vertical-align: middle;
}
.stat-up-btn:hover:not(:disabled) { background-color: #218838; }


/* 스탯 시뮬레이터 */
#stat-simulator {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px dashed #ccc;
}
#stat-simulator h4 { margin-top: 0; margin-bottom: 10px; font-size: 0.95em; color: #333; }
#stat-simulator select { padding: 5px; font-size: 13px; margin-right: 5px; }
#stat-simulator button { padding: 5px 10px; font-size: 13px; margin: 0; vertical-align: middle;}
#stat-simulator p { font-size: 14px; margin: 10px 0 0 0; font-weight: bold; color: #007bff; }


/* HP/MP 바 */
.status-bar {
    background-color: #ddd; border-radius: 5px; height: 18px;
    margin-bottom: 5px; position: relative; overflow: hidden;
}
.hp-bar { background-color: #e74c3c; height: 100%; border-radius: 5px; transition: width 0.3s ease; }
.mp-bar { background-color: #3498db; height: 100%; border-radius: 5px; transition: width 0.3s ease; }
.stamina-bar { background-color: #2ecc71; height: 100%; border-radius: 5px; transition: width 0.3s ease; }
.bar-text {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    font-size: 11px; font-weight: bold; color: white;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5); white-space: nowrap;
}


/* --- 인벤토리/장비 미리보기 --- */
.collapsible-content h4, #equipment-skills-content h3 { 
    margin-top: 10px; 
    margin-bottom: 5px; 
    color: #666; 
    font-size: 0.9em; 
}
.collapsible-content ul { 
    list-style: none; padding: 0; margin: 0; 
}
.collapsible-content li { 
    font-size: 14px; margin-bottom: 3px; color: #444; 
}
#player-skills-list { list-style-type: square; margin-left: 20px; }
#player-equipment-list li { font-style: italic; }

.item-description, .skill-description {
    display: block;
    font-size: 0.9em;
    color: #007bff;
    margin-left: 10px;
}


/* --- 장착 스킬 슬롯 --- */
#equipment-skills-content #equipped-skills {
    background-color: #e9ecef; border: 1px solid #ced4da; border-radius: 5px;
    padding: 10px 15px; 
    margin-top: 15px; 
}
#equipment-skills-content #equipment {
     padding-bottom: 10px;
     border-bottom: 1px dashed #ccc;
}

.equipment-grid-9 {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3열 그리드 */
    gap: 8px;
}
.equipment-grid-9 li {
    font-size: 14px;
    background: #f4f4f4;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #ddd;
}
.equipment-grid-9 li span.equipped-item {
    font-weight: bold;
    color: #0056b3;
}


#player-equipped-skills-list { list-style: none; padding: 0; margin: 0; text-align: center; }
#player-equipped-skills-list li {
    display: inline-block; background-color: #fff; border: 1px solid #ccc;
    padding: 5px 10px; margin: 5px; border-radius: 3px; cursor: pointer;
    display: block;
    text-align: left;
}
#player-equipped-skills-list li:hover { background-color: #f8d7da; color: #721c24; }
#player-equipped-skills-list li strong {
    color: #3498db;
    font-weight: bold;
}


/* --- 패시브 스킬 목록 (상태창 안) --- */
#passive-skills-list li {
    font-size: 13px; margin-bottom: 8px; padding-bottom: 8px;
    border-bottom: 1px dashed #ccc; line-height: 1.4;
    overflow: hidden; 
}
#passive-skills-list li:last-child { border-bottom: none; }
#passive-skills-list strong { color: #007bff; display: block; }
#passive-skills-list span { font-size: 0.9em; color: #6c757d; }
#passive-skills-list button {
    background-color: #ffc107; color: #333; padding: 3px 8px;
    font-size: 12px; float: right; margin-top: -20px; 
}
#passive-skills-list button:hover:not(:disabled) { background-color: #e0a800; }
#passive-skills-list button.disabled { background-color: #6c757d; color: #ccc; cursor: not-allowed; }

/* --- 전투 UI --- */
#dungeon { flex-grow: 1; } 
#stage-selection { margin-bottom: 20px; text-align: center;}
#stage-selection button { background-color: #6f42c1; width: 90%; }
#stage-selection button:hover { background-color: #5a32a3; }
#combat-info p { text-align: center; font-weight: bold; font-size: 1.1em; color: #dc3545; margin: 10px 0;}
#monster-status { border: 1px solid #eee; padding: 5px 10px; margin-bottom: 10px; background: #fff8f8; } 
#monster-display-list { 
    list-style: none; padding: 0; margin: 10px 0; 
}


#monster-display-list li {
    border: 1px solid #ccc; border-radius: 5px; padding: 10px; margin-bottom: 8px;
    background-color: #f8f9fa; cursor: pointer; transition: background-color 0.2s, border-color 0.2s;
    position: relative;
}
#monster-display-list li:hover { background-color: #e2e6ea; }
#monster-display-list li.targeted {
    border-color: #ffc107;
    border-width: 3px; 
    background-color: #fff9e6;
    box-shadow: 0 0 8px rgba(255, 193, 7, 0.8); 
}
.monster-name { font-weight: bold; display: block; margin-bottom: 5px; font-size: 1em; }
.monster-hp-bar-container { background-color: #e9ecef; height: 10px; border-radius: 3px; overflow: hidden; margin-bottom: 5px; }
.monster-hp-bar { background-color: #dc3545; height: 100%; width: 100%; transition: width 0.3s ease; }
.monster-hp-text { font-size: 0.8em; color: #6c757d; float: right; line-height: 10px; }
.monster-secret-status { font-size: 0.9em; color: #888; display: block; margin-top: 5px; font-family: monospace;}
.monster-specs, .monster-skills {
    font-size: 0.85em;
    color: #6c757d;
    display: block;
    margin-top: 3px;
}
.monster-skills {
    font-style: italic;
    color: #555;
}


/* 전투 입력 */
#battle-input h4 { margin-top: 15px; }


/* SBO 다이얼 UI */
#sbo-sliders-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 5px;
    background: #f4f4f4;
    border-radius: 5px;
    margin-bottom: 10px;
    height: 80px; 
    /* ❗️ [Task 5] 피격 이펙트를 위한 border, transition 추가 */
    border: 2px solid #f4f4f4;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.sbo-slider-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; 
    width: 60px; 
    height: 100%; 
    touch-action: none; 
}
.sbo-adjust-btn {
    font-size: 1.2em;
    font-weight: bold;
    color: #555;
    background: #dcdcdc;
    border: 1px solid #aaa;
    width: 30px;
    height: 25px;
    padding: 0;
    margin: 0;
    line-height: 25px;
    border-radius: 4px;
}
.sbo-adjust-btn:hover:not(:disabled) {
    background-color: #ccc;
}
.sbo-adjust-btn:disabled {
    background: #eee;
    color: #ccc;
    cursor: not-allowed;
}
.sbo-slider-wrapper .sbo-slider-value {
    font-size: 1.8em;
    font-weight: bold;
    color: #007bff;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border: 2px solid #007bff;
    background: #fff;
    border-radius: 50%;
    cursor: grab; 
    user-select: none;
    transition: background-color 0.2s, border-color 0.2s;
    margin: 0; 
}
.sbo-slider-wrapper:active .sbo-slider-value {
    cursor: grabbing; 
}
.sbo-slider-wrapper.strike-locked .sbo-slider-value {
    background: #d4edda;
    border-color: #28a745;
    color: #28a745;
    cursor: not-allowed;
}


/* SBO 결과창 */
#guess-result-display.sbo-result-box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: #2c3e50;
    border-radius: 5px;
    padding: 8px 0;
}
.sbo-result-light {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: #7f8c8d; 
    border: 2px solid #bdc3c7;
    font-weight: bold;
    color: white;
    font-size: 14px;
    line-height: 25px;
    text-align: center;
    transition: all 0.2s;
}
.sbo-result-light.strike {
    background-color: #2ecc71; 
    border-color: #fff;
    box-shadow: 0 0 10px #2ecc71;
}
.sbo-result-light.ball {
    background-color: #f1c40f; 
    border-color: #fff;
    box-shadow: 0 0 10px #f1c40f;
}
.sbo-result-light.out {
    background-color: #e74c3c; 
    border-color: #fff;
    box-shadow: 0 0 10px #e74c3c;
}
.sbo-result-light.all-strike {
    background-color: #3498db; 
    border-color: #fff;
    box-shadow: 0 0 15px #3498db;
    transform: scale(1.2);
}


.auto-btn.sbo-auto { background-color: #6c757d; }
.auto-btn.sbo-auto.active { background-color: #e67e22; }


/* --- 전투 로그 창 --- */
#battle-log {
    background-color: #1e1e1e; color: #bdc3c7; 
    font-family: 'Consolas', 'Courier New', monospace;
    height: 250px; 
    overflow-y: auto; padding: 15px; border-radius: 5px;
    margin-top: 15px; border: 1px solid #444; font-size: 13px;
}
#battle-log p { margin: 2px 0; }
#battle-log.player-hit {
    animation: shake 0.3s 1;
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}


/* --- 모달 (팝업창) 공통 스타일 --- */
.modal {
    display: none; position: fixed; z-index: 1000;
    left: 0; top: 0; width: 100%; height: 100%;
    overflow: auto; background-color: rgba(0,0,0,0.6);
}
.modal-content {
    background-color: #fefefe; margin: 10% auto; padding: 20px 30px;
    border: 1px solid #888; width: 60%; max-width: 600px;
    border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    position: relative;
}
.close-button {
    color: #aaa; position: absolute; top: 10px; right: 15px;
    font-size: 28px; font-weight: bold;
}
.close-button:hover, .close-button:focus { color: black; text-decoration: none; cursor: pointer; }
.modal h2 { margin-top: 0; }
.modal ul { list-style: none; padding: 0; }
.modal li {
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 10px;
    padding: 8px;
    border-bottom: 1px solid #eee;
    flex-wrap: wrap; 
}
.modal li:last-child {
    border-bottom: none;
}
.modal li button {
    margin-left: 15px; 
    flex-shrink: 0; 
}
.modal li .item-description,
.modal li .skill-description {
    width: 100%; 
    font-size: 0.9em;
    color: #007bff;
    margin-top: 5px;
    padding-left: 10px;
}
.modal li .item-info-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1; 
}
.modal li .item-info-wrapper strong {
    font-size: 1.1em;
}
.modal li .item-info-wrapper span {
    font-size: 0.9em;
    color: #555;
}


/* --- 인벤토리 모달 추가 스타일 --- */
.inventory-section { margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px dashed #ccc; }
.inventory-section:last-child { border-bottom: none; }
#modal-equipment-list li, 
#modal-skills-list li,
#modal-materials-list li,
#modal-consumables-list li,
.rune-list-in-modal li {
    cursor: pointer; margin-bottom: 8px; padding: 8px;
    border-radius: 4px; transition: background-color 0.2s;
    border-bottom: none; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; 
}

#modal-equipment-list li:hover, 
#modal-skills-list li:hover,
#modal-materials-list li:hover,
#modal-consumables-list li:hover,
.rune-list-in-modal li:hover { 
    background-color: #e9ecef; 
}

#modal-equipment-list li .item-info-wrapper,
#modal-materials-list li .item-info-wrapper,
#modal-consumables-list li .item-info-wrapper,
#modal-skills-list li .item-info-wrapper,
.rune-list-in-modal li .item-info-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding-right: 10px; 
    pointer-events: none; 
}
#modal-equipment-list li,
#modal-materials-list li,
#modal-consumables-list li,
.rune-list-in-modal li {
    cursor: pointer;
}
#modal-skills-list li {
    cursor: default;
}
#modal-skills-list li .item-info-wrapper {
    pointer-events: auto; 
}


.inventory-item-checkbox {
    margin-right: 10px;
    flex-shrink: 0;
    pointer-events: auto; 
}


#modal-equipment-list li .button-wrapper,
#modal-materials-list li .button-wrapper,
#modal-consumables-list li .button-wrapper,
#modal-skills-list li .button-wrapper,
.rune-list-in-modal li .button-wrapper {
    flex-shrink: 0; 
    display: flex;
    gap: 5px;
    flex-wrap: wrap; 
    pointer-events: auto; 
}
#modal-equipment-list li .button-wrapper button,
#modal-materials-list li .button-wrapper button,
#modal-consumables-list li .button-wrapper button,
#modal-skills-list li .button-wrapper button,
.rune-list-in-modal li .button-wrapper button {
    margin: 0;
    font-size: 0.9em;
    padding: 4px 8px;
}
.sell-material-btn, .sell-consumable-btn, .sell-equip-btn {
    background-color: #ffc107; 
    color: #333;
}
.sell-material-btn:hover:not(:disabled), 
.sell-consumable-btn:hover:not(:disabled), 
.sell-equip-btn:hover:not(:disabled) {
    background-color: #e0a800;
}

.inventory-pagination {
    text-align: center;
    margin-top: 10px;
}
.inventory-pagination button {
    padding: 3px 8px;
    font-size: 0.9em;
    margin: 0 5px;
}
.inventory-pagination span {
    font-size: 0.9em;
    color: #555;
    margin: 0 5px;
    display: inline-block;
    width: 60px;
}

.inventory-batch-actions {
    text-align: right;
    margin-top: 10px;
    border-top: 1px solid #eee;
    padding-top: 10px;
}

/* ❗️❗️ [신규] 2. 인벤토리 모달 헤더 및 속성 버튼 ❗️❗️ */
.modal-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px; /* (기존 h2의 margin-bottom) */
}
.modal-header-container h2 {
    margin: 0; /* (컨테이너가 마진을 대신) */
}
.properties-btn-group button {
    background-color: #17a2b8;
    color: white;
    font-size: 13px;
    padding: 5px 10px;
    margin: 0 0 0 5px;
}
.properties-btn-group button:hover {
    background-color: #138496;
}
/* ❗️❗️ [신규 끝] ❗️❗️ */


/* --- 클래스 선택 모달 --- */
#class-selection-list li { border-bottom: none; text-align: center; padding: 0;}
#class-selection-list button {
    width: 80%; margin-bottom: 10px; padding: 15px;
    font-size: 18px; background-color: #17a2b8; float: none; 
}
#class-selection-list button:hover { background-color: #138496; }
#class-selection-list span { 
    display: block; font-size: 0.9em; color: #6c757d;
    margin-top: -5px; margin-bottom: 15px;
}
/* --- 연금술 연구소 모달 --- */
#alchemy-passive-list li { 
    font-size: 14px; 
    border-bottom: 1px dashed #ccc;
    flex-direction: column; 
    align-items: flex-start; 
}
#alchemy-passive-list li:last-child { border-bottom: none; }
#alchemy-passive-list span { font-size: 0.9em; color: #6c757d; display: block; }
#alchemy-passive-list button { 
    font-size: 13px; 
    margin-left: 0; 
    margin-top: 8px; 
}


/* --- 스도쿠 모달 및 그리드 --- */
.sudoku-content { 
    width: 80%;
    max-width: 500px; 
    margin: 5% auto; 
    padding-bottom: 35px; 
}


#sudoku-grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr); 
    grid-template-rows: repeat(9, 1fr);    
    width: 360px; 
    height: 360px;
    margin: 20px auto;
    border: 3px solid #333; 
}

.sudoku-cell {
    width: 40px; 
    height: 40px;
    border: 1px solid #ccc; 
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    -moz-appearance: textfield;
    appearance: textfield;
}
.sudoku-cell::-webkit-outer-spin-button,
.sudoku-cell::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.sudoku-cell.fixed { 
    background-color: #e9ecef;
    color: #495057;
}
.sudoku-cell:disabled { 
    cursor: not-allowed;
}
.sudoku-cell.box-right { border-right: 2px solid #555; }
.sudoku-cell.box-bottom { border-bottom: 2px solid #555; }



.sudoku-controls {
    text-align: center;
    margin-top: 30px;
}
#sudoku-giveup-btn:hover { background-color: #c82333; }

.sudoku-cell.sudoku-cell-4x4 {
    width: 60px; 
    height: 60px;
    font-size: 28px; 
}


/* --- 웨이브 타이머 --- */
#wave-timer {
    text-align: center;
    font-size: 1.2em;
    min-height: 1.5em; 
}

/* --- 도망가기 버튼 --- */
#flee-button {
    width: calc(100% - 10px); 
    margin-top: 15px;
}
#flee-button:hover:not(:disabled) { background-color: #e0a800; }


/* --- 장비 장착 가능 알림 (Issue 1) --- */
@keyframes equip-flash {
    0% { box-shadow: 0 0 5px #2ecc71; border-color: #2ecc71; }
    50% { box-shadow: 0 0 15px #2ecc71; border-color: #27ae60; transform: scale(1.02); }
    100% { box-shadow: 0 0 5px #2ecc71; border-color: #2ecc71; }
}
.equip-available {
    animation: equip-flash 1.5s infinite;
    background-color: #e8f8f5 !important;
    cursor: pointer;
}

/* --- 상성표 모달 스타일 (Issue 10) --- */
/* ❗️ [수정] 상성표 모달 Z-Index 상향 (중첩 모달 대응) */
#affinity-modal {
    z-index: 100050; /* 기본 모달(1000)보다 높게 설정 */
}

#affinity-result-display {
    margin-top: 15px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #ddd;
    text-align: left;
}
.affinity-tag {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 15px;
    margin: 3px;
    font-size: 0.9em;
    font-weight: bold;
}
.tag-good { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.tag-bad { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

/* --- 스테이지 선택 모달 --- */
#stage-select-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding: 8px;
    border-bottom: 1px solid #eee;
    flex-wrap: nowrap; 
}
#stage-select-list button {
    background-color: #6f42c1;
    font-size: 16px;
    text-align: left;
    padding-left: 20px;
    margin: 0; 
    float: none;
    flex-grow: 1; 
}
#stage-select-list button:hover {
    background-color: #5a32a3;
}
#stage-select-list span {
    font-size: 0.9em;
    color: #6c757d;
    padding-left: 15px; 
    flex-shrink: 0; 
    white-space: nowrap; 
}

.stage-modal-content .modal-content {
    width: 80%;
    max-width: 700px; 
}


/* 스탯 2단 레이아웃 */
.stats-container {
    display: flex;
    justify-content: space-between; 
    gap: 15px; 
}
.stat-block {
    width: 48%; 
}
.stat-block h4 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 0.95em;
    color: #333;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
}
#derived-stats-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
}
#derived-stats-list li {
    margin-bottom: 5px;
}

#repeat-stage-btn:hover:not(:disabled) { background-color: #218838; }

.stage-button-wrapper {
    display: flex; 
    align-items: center; 
    flex-grow: 1; 
}
.stage-button-wrapper button { 
    flex-grow: 1; 
    margin: 0;
    text-align: left;
}
.stage-button-wrapper input[type="checkbox"] {
    margin-left: 10px; 
}
.stage-button-wrapper label {
    margin-left: 5px;
    font-size: 0.9em;
    color: #555;
    white-space: nowrap;
}


/* --- 반복 전투 타이머 --- */
#repeat-timer {
    font-size: 1em; 
    font-weight: bold;
    color: #28a745; 
    margin-top: 10px;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 5px;
    border: 1px solid #e9ecef;
}

/* 반복 전투 카운트다운 UI 스타일 */
#map-repeat-countdown {
    display: none; /* JS가 켬 */
    text-align: center; 
    font-size: 1.2em; 
    color: #dc3545; /* 취소(빨간색) */
    font-weight: bold;
    padding: 10px;
    background-color: #fff3f3; /* 빨간 배경 */
    border: 1px solid #dc3545;
    border-radius: 5px;
    cursor: pointer;
    margin: 10px 0;
}
#map-repeat-countdown:hover {
    background-color: #f8d7da; /* 마우스 오버 효과 */
}

/* 접기/펼치기 기능 */
.toggle-button {
    display: inline-block; 
    cursor: pointer;
    font-weight: bold;
    padding: 0 5px;
    border: 1px solid #ccc;
    background: #eee;
    border-radius: 4px;
    user-select: none; 
    margin-right: 10px; 
}
.toggle-button:hover {
    background: #ddd;
}
.collapsible-section.collapsed .collapsible-content {
    display: none;
}


/* 모든 스테이지 버튼 공통 스타일 */
#stage-select-list .stage-category-btn,
#stage-select-list .stage-group-btn {
    width: 80%;
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.1s ease;
}
#stage-select-list .select-stage-btn { 
    width: 80%;
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.1s ease;
}
#stage-select-list .stage-category-btn:hover,
#stage-select-list .stage-group-btn:hover {
    transform: scale(1.02);
}
#stage-select-list .select-stage-btn:hover { 
    transform: scale(1.02);
}
#stage-select-list .select-stage-btn {
    background-color: #6c757d; /* 기본 회색 */
}

#stage-select-list .btn-category-basic {
    background-color: #27ae60; 
}
#stage-select-list .btn-category-dungeon {
    background-color: #8e44ad;
}

#stage-select-list .btn-group-goblin {
    background-color: #16a085;
}
#stage-select-list .btn-group-sky {
    background-color: #2980b9;
}
#stage-select-list .btn-group-ocean {
    background-color: #2c3e50;
}
#stage-select-list .btn-group-mixed {
    background-color: #7f8c8d;
}
#stage-select-list .btn-group-orc {
    background-color: #a0522d; /* (Sienna Brown) */
}

/* ---------------------------------- */
/* 보물 고블린 스타일 */
/* ---------------------------------- */
#monster-display-list li.treasure-goblin {
    background-color: #fffbeb; 
    border: 2px dashed #f1c40f; 
    color: #c0392b; 
    box-shadow: 0 0 10px #f1c40f;
    animation: pulse-gold 1.5s infinite;
}
@keyframes pulse-gold {
    0% { box-shadow: 0 0 5px #f1c40f; }
    50% { box-shadow: 0 0 15px #f39c12; }
    100% { box-shadow: 0 0 5px #f1c40f; }
}

/* ---------------------------------- */
/* 플레이어 스킬 버튼 */
/* ---------------------------------- */
#player-skill-buttons {
    margin-bottom: 10px;
}
.skill-btn {
    padding: 8px 12px;
    margin: 0 5px;
    border: 1px solid #3498db;
    background-color: #ecf0f1;
    color: #3498db;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    min-width: 100px; 
}
.skill-btn:hover {
    background-color: #3498db;
    color: white;
}
.skill-btn:disabled {
    border-color: #95a5a6;
    background-color: #ecf0f1;
    color: #95a5a6;
    cursor: not-allowed;
    opacity: 0.7;
}


/* 모바일에서 Sticky 위치 보정 */
@media (max-width: 1024px) {
    #player-header-sticky {
        top: 0;
        margin: 0 auto 15px auto !important;
        width: 100%;
        max-width: 100%; /* 모바일은 꽉 차게 */
        border-radius: 0;
    }
}

/* ❗️ [모바일 스크롤 수정] */
/* ❗️ [Bug Fix] 모바일 스크롤 고정 문제 해결 (최종) */
@media (max-width: 768px) {
    /* 1. 전체 페이지 스크롤 강제 활성화 */
    html, body {
        height: auto !important;       /* 고정 높이 해제 (내용물만큼 늘어남) */
        min-height: 100% !important;   /* 최소 화면 꽉 참 */
        overflow-y: auto !important;   /* 세로 스크롤 허용 */
        -webkit-overflow-scrolling: touch; /* 부드러운 스크롤 */
        position: static !important;   /* 고정 위치 해제 */
    }

    /* 2. 메인 컨테이너가 늘어나도록 설정 */
    main {
        display: block !important;     /* 상하 배치 */
        height: auto !important;       /* 내부 크기에 맞춰 늘어남 */
        min-height: 100vh;             /* 최소 화면 높이 */
        overflow: visible !important;  /* 내부 스크롤 바 없애고 전체 스크롤에 맡김 */
        padding-bottom: 100px;         /* 하단 여백 */
    }

    /* 3. 타운/던전 섹션 (탭) */
    #town, #dungeon {
        /* ❌ display: block !important; << 이거 절대 금지 (탭 고장 원인) */
        
        /* ✅ 높이 제한을 풀어주는 핵심 설정 */
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
        
        /* Flex 레이아웃으로 인한 스크롤 버그 방지 (블록처럼 동작하게) */
        flex: none !important; 
        display: block; /* 기본은 블록 (JS가 none으로 바꾸면 숨겨짐) */
        
        padding-bottom: 50px;
    }
    
    /* 기본적으로 내용은 무조건 보임 */
    .group-content {
        display: block !important; 
    }

    /* 오직 'closed' 클래스가 붙었을 때만 숨김 */
    .town-group.closed .group-content {
        display: none !important;
    }
}

/* ========================================= */
/* 768px 이하 (태블릿 및 모바일) 최적화 */
/* ========================================= */
@media (max-width: 768px) {
    #player-status {
        background-color: #f4f4f4;
        border-bottom: 2px solid #ccc;
    }

   /* 1. 헤더 절대 고정 */
    #player-header-sticky {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 9999;
        margin: 0 !important;
        border-radius: 0;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        background-color: #f4f4f4;
        /* 헤더 높이가 대략 140px~150px 정도 됩니다 */
    }

    /* 2. 본문을 헤더 높이만큼 아래로 밀기 (겹침 방지) */
    main {
        display: block !important;
        height: auto !important;
        min-height: 100vh;
        overflow: visible !important;
        
        /* ❗️ 여기가 핵심: 헤더 높이만큼 패딩을 줘서 내용을 아래로 내립니다 */
        padding-top: 90px !important; 
        padding-bottom: 100px;
    }


    #player-header-sticky p {
        margin: 0 0 5px 0;
        text-align: center;
        font-size: 0.9em;
    }

    main {
        flex-direction: column;
        padding: 10px 5px; 
    }
    
    #town,
    #dungeon {
        width: auto; 
        max-width: none;
        padding: 15px 10px;
        margin: 0; 
    }

    #map-grid-container {
        /* 화면 너비에서 여백을 뺀 만큼 강제로 맞춤 */
        width: 90vw !important;
        height: 90vw !important; 
        max-width: 380px !important;
        max-height: 380px !important;
        margin: 10px auto !important;
        aspect-ratio: 1 / 1;
    }
    .map-cell {
        font-size: 0; /* 셀 내부 텍스트가 레이아웃 깨는 것 방지 */
    }
    /* 몬스터 스택 숫자 스타일 보정 */
    .map-stack-count {
        font-size: 12px !important;
        display: flex !important;
        justify-content: center;
        align-items: center;
    }

    /* SBO 다이얼 모바일 스타일 (높이 조정) */
    #sbo-sliders-container {
        height: 90px; 
    }

    .sbo-slider-wrapper .sbo-slider-value {
        font-size: 1.5em;
        width: 35px;
        height: 35px;
        line-height: 35px;
    }

    .stats-container {
        flex-direction: column; 
    }
    .stat-block {
        width: 100%;
        margin-right: 0;
        margin-bottom: 15px;
    }
    
    #town button,
    #dungeon button {
        padding: 8px;
        font-size: 0.9em;
    }
    
    .button-grid {
        grid-template-columns: repeat(2, 1fr); 
    }
    
    #map-auto-controls {
        display: flex !important; /* Grid 대신 Flex */
        flex-direction: row !important;
        flex-wrap: nowrap !important; /* 줄바꿈 절대 금지 */
        justify-content: space-between;
        gap: 3px; /* 간격 최소화 */
        width: 100%;
        box-sizing: border-box;
        
    }

    #map-auto-controls .auto-btn {
        flex: 1; 
        min-width: 0; 
        margin: 0 !important;
        padding: 4px 2px !important; /* 패딩을 줄여서 내부 공간 확보 */
        
        /* 텍스트 정렬 핵심 */
        display: inline-flex !important;
        flex-direction: column; /* 위아래 배치 */
        align-items: center;
        justify-content: center;
        
        font-size: 11px !important;
        line-height: 1.2 !important; /* 줄 간격 좁힘 */
        white-space: normal !important; /* 줄바꿈 허용 */
        height: 42px; /* 높이 고정 (선택사항, 레이아웃 안정화) */
    }


    #player-skill-buttons {
        display: flex;
        flex-wrap: wrap; 
        justify-content: space-between; 
        gap: 5px;
    }
    .skill-btn {
        flex-grow: 1;
        min-width: unset;
        font-size: 0.85em;
        margin: 0;
    }

    #monster-display-list li {
        padding: 8px;
        font-size: 0.9em;
    }
    
    /* SBO 다이얼 모바일 스타일 */
    .sbo-slider-wrapper .sbo-slider-value {
        font-size: 1.5em;
        width: 35px;
        height: 35px;
        line-height: 35px;
    }
    .sbo-adjust-btn {
        width: 28px;
        height: 22px;
        line-height: 22px;
        font-size: 1em;
    }


    header h1 {
        font-size: 1.5em;
    }
    nav {
        font-size: 0.8em;
    }

    /* ❗️ [신규] 모달 인벤토리 모바일 */
    .modal-content {
        width: 90%;
        margin: 10% auto;
        padding: 15px;
    }
    .modal li .button-wrapper {
        flex-basis: 100%; 
        margin-top: 10px; 
        justify-content: flex-end; 
    }
    .inventory-pagination span {
        width: auto; 
    }
}

/* ---------------------------------- */
/* 몬스터 목록 스크롤 */
/* ---------------------------------- */
#monster-display-list {
    max-height: 250px; 
    overflow-y: auto;  
    overflow-x: hidden; /* ❗️ [수정] 좌우 스크롤바 방지 */
    height: auto;      
    border: 1px solid #ddd;
    padding: 5px;
}


/* --- 몬스터 피격/사망 피드백 (수정) --- */
@keyframes monster-hit-flash {
    /* 평소엔 투명(원래 배경색) */
    0%, 100% { background-color: transparent; } 
    /* 맞으면 붉은 기운이 감돔 (너무 밝지 않게) */
    50% { background-color: rgba(231, 76, 60, 0.4); } 
}

@keyframes monster-hit-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    50% { transform: translateX(4px); }
    75% { transform: translateX(-4px); }
}
/* 몬스터 리스트 아이템(li)에 이 클래스가 붙으면 애니메이션 실행 */
#monster-display-list li.hit-animation {
    animation: monster-hit-flash 0.3s ease-out, monster-hit-shake 0.3s ease-in-out;
}
@keyframes monster-defeat-animation {
    0%, 100% { opacity: 0.6; background-color: #e9ecef; }
    10%, 70% { opacity: 1; background-color: #f8d7da; } 
    20%, 80% { opacity: 0.8; background-color: #f8f9fa; } 
    30%, 90% { opacity: 1; background-color: #f8d7da; } 
    40% { opacity: 0.8; background-color: #f8f9fa; } 
    60% { opacity: 1; background-color: #f8d7da; } 
}
#monster-display-list li.defeated {
    animation: monster-defeat-animation 0.5s 1 ease-out forwards;
    pointer-events: none;
    cursor: default;
}
/* 몬스터가 죽었을 때 (스르륵 사라짐) */
#monster-display-list li.is-dead {
    opacity: 0.5;
    filter: grayscale(100%);
    transition: all 0.5s;
    transform: scale(0.95);
}

/* ---------------------------------- */
/* 상점 모달 모바일 최적화 */
/* ---------------------------------- */
#shop-modal .modal-content {
    max-width: 90%; 
    padding: 15px;
}
#shop-item-list {
    list-style: none;
    padding: 0;
    margin: 15px 0;
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
}
#shop-item-list li {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column; 
    align-items: flex-start; 
    font-size: 0.9em;
}
#shop-item-list li strong {
    font-size: 1.1em;
    color: #333;
    margin-bottom: 5px;
}
#shop-item-list li span {
    color: #555;
    font-size: 0.85em;
    margin-bottom: 5px;
}
#shop-item-list li p {
    color: #777;
    font-size: 0.8em;
    margin: 0 0 10px 0;
}
#shop-item-list .buy-item-btn {
    width: 100%; 
    padding: 8px 12px;
    font-size: 0.9em;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}
#shop-item-list .buy-item-btn:hover:not(:disabled) {
    background-color: #218838;
}
#shop-item-list .buy-item-btn:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    #shop-modal h2 {
        font-size: 1.5em;
    }
    #shop-modal p {
        font-size: 0.9em;
    }
    #shop-item-list li {
        font-size: 0.8em;
    }
    #shop-item-list li strong {
        font-size: 1em;
    }
    #shop-item-list .buy-item-btn {
        font-size: 0.85em;
        padding: 6px 10px;
    }
}

/* --- 맵 탐험 시스템 (신규) --- */
#map-grid-container {
    background-color: #1e1e1e;
    border: 2px solid #555;
    
    /* ❗️ 데스크탑 기본 크기 */
    width: 400px;
    height: 400px;
    
    margin: 15px auto;
    display: none; /* JS로 제어 */
    box-sizing: border-box;
    position: relative; 
}
.map-cell {
    border: 1px solid #444; 
    box-sizing: border-box;
    position: relative; 
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #333; 
    transition: background-color 0.2s; 
    cursor: pointer; 
}
.map-cell:hover {
    outline: 1px solid #fff; 
}

/* ❗️ [신규] 시간의 균열 (포탈) 스타일 */
.map-cell.portal::before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle, #8e44ad 20%, #2c3e50 80%);
    box-shadow: 0 0 15px #9b59b6, inset 0 0 10px #000;
    z-index: 5;
    animation: portal-spin 3s infinite linear;
    cursor: pointer;
}

@keyframes portal-spin {
    0% { transform: scale(0.8) rotate(0deg); opacity: 0.8; }
    50% { transform: scale(1.0) rotate(180deg); opacity: 1; box-shadow: 0 0 25px #8e44ad; }
    100% { transform: scale(0.8) rotate(360deg); opacity: 0.8; }
}


/* 맵 요소 (점) 스타일 */
.map-cell.player::before,
.map-cell.enemy::before,
.map-cell.treasure-goblin::before {
    content: '';
    display: block;
    position: absolute;
    /* ❗️ [Task 5] 몬스터 점 크기 60% -> 80%로 확대 */
    width: 80%; 
    height: 80%;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
    z-index: 1; 
    cursor: pointer; 
}
.map-cell.player::before {
    background-color: #3498db;
    border: 2px solid #ecf0f1;
    cursor: wait; 
}
.map-cell.enemy::before {
    background-color: #e74c3c;
    border: 2px solid #7f8c8d; 
    cursor: crosshair; 
}
.map-stack-count {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 1.1em;
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;
    z-index: 11; 
    pointer-events: none; 
}
/* ❗️ [Task 4] 몬스터 강함 표시 (다중 테두리) */
.map-cell.enemy.rank-0::before { /* 3 borders */
    border: 2px solid #f1c40f;
    box-shadow: 0 0 8px #f1c40f, 0 0 0 3px #f1c40f, 0 0 0 6px #e67e22; /* Inner glow, 2nd border, 3rd border */
    animation: pulse-rank-1 1.5s infinite;
}
.map-cell.enemy.rank-1::before { /* 2 borders */
    border: 2px solid #bdc3c7;
    box-shadow: 0 0 8px #bdc3c7, 0 0 0 3px #bdc3c7; /* Inner glow, 2nd border */
}
.map-cell.enemy.rank-2::before { /* 1 border (default + shadow) */
    border: 2px solid #cd7f32; 
    box-shadow: 0 0 8px #cd7f32;
}
@keyframes pulse-rank-1 {
    0% { box-shadow: 0 0 8px #f1c40f, 0 0 0 3px #f1c40f, 0 0 0 6px #e67e22; }
    50% { box-shadow: 0 0 18px #f39c12, 0 0 0 3px #f1c40f, 0 0 0 6px #f39c12; }
    100% { box-shadow: 0 0 8px #f1c40f, 0 0 0 3px #f1c40f, 0 0 0 6px #e67e22; }
}
.map-cell.treasure-goblin::before {
    background-color: #f1c40f; 
    border: 2px solid #ffffff; 
    z-index: 6; 
    animation: pulse-gold 1s infinite; 
}

/* 맵 지형지물 */
.map-cell.exit {
    background-color: #2ecc71;
    background-image: none !important; 
}
.map-cell.obstacle { background-color: #555; }
.map-cell.obstacle::after { content: '🪨'; font-size: 1.2em; } /* 바위 아이콘 */

@media (min-width: 500px) {
    .map-cell {
        font-size: 25px; 
    }
}
@keyframes blink-effect {
    0%, 100% { 
        background-color: #e74c3c; 
        border-color: #f1c40f;
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
    }
    50% { 
        background-color: #f1c40f; 
        border-color: #ffffff; 
        box-shadow: 0 0 20px #f1c40f, 0 0 25px #ffffff; 
    }
}
.map-cell.enemy.blinking::before,
.map-cell.treasure-goblin.blinking::before {
    animation: blink-effect 0.5s infinite; 
}

/* 맵 자동사냥 컨트롤 */
#map-auto-controls {
    text-align: center;
    margin-bottom: 10px;
    padding: 5px;
    background-color: #e9ecef;
    border-radius: 5px;
}
.auto-btn {
    font-size: 14px;
    padding: 8px 12px;
    background-color: #6c757d;
    margin: 2px;
}
.auto-btn.auto-hunt.active {
    background-color: #17a2b8;
    box-shadow: 0 0 8px #17a2b8;
}
.auto-btn.repeat-hunt.active {
    background-color: #28a745;
    box-shadow: 0 0 8px #28a745;
}
.auto-btn.sbo-auto.active {
    background-color: #e67e22; 
    box-shadow: 0 0 8px #e67e22;
}

/* 플레이어 카드 핸드 */
#player-hand-container {
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
}
.card-btn {
    padding: 8px 10px;
    margin: 0 5px;
    border: 1px solid #9b59b6; 
    background-color: #f5f0f7; 
    color: #9b59b6; 
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    min-width: 120px; 
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    transition: all 0.2s;
}
.card-btn:hover:not(:disabled) {
    background-color: #9b59b6;
    color: white;
    box-shadow: 0 2px 5px rgba(155,89,182,0.4);
}
.card-btn:disabled {
    border-color: #95a5a6;
    background-color: #ecf0f1;
    color: #95a5a6;
    cursor: not-allowed;
    opacity: 0.7;
}

/* 카드 뽑기 애니메이션 */
#card-animation-overlay {
    display: none; 
    padding: 20px 10px;
    background: #2c3e50; 
    color: #ecf0f1;
    font-size: 1.3em;
    font-weight: bold;
    text-align: center;
    margin: 10px 0;
    border-radius: 5px;
    border: 2px solid #34495e;
    animation: text-pulse 1.5s infinite;
}
#card-animation-text {
    font-size: 2em;
    font-weight: bold;
    color: white;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
}
@keyframes text-pulse {
    0% { opacity: 0.7; }
    50% { opacity: 1; }
    100% { opacity: 0.7; }
}
/* ❗️ [복구] 카드/스킬 컷신 임팩트 스타일 */
#card-animation-overlay.impact {
    background: rgba(241, 196, 15, 0.9) !important; /* #f1c40f (노랑) */
    color: #2c3e50 !important;
    border: 5px solid #f39c12;
    animation: impact-shake 0.3s cubic-bezier(.36,.07,.19,.97) both;
}

/* 전설 스타일 (추가 보너스) */
#card-animation-overlay.legendary-fire {
    background: rgba(192, 57, 43, 0.9) !important; /* 붉은색 */
    color: #fff !important;
    border: 5px solid #e74c3c;
    animation: impact-shake 0.5s infinite; /* 지속 흔들림 */
}

#card-animation-overlay.legendary-gold {
    background: rgba(241, 196, 15, 0.9) !important; /* 금색 */
    color: #fff !important;
    border: 5px solid #fff;
    box-shadow: 0 0 30px #f1c40f;
    animation: pulse-gold 1s infinite;
}
@keyframes impact-shake {
    10%, 90% { transform: translate3d(-2px, 0, 0); }
    20%, 80% { transform: translate3d(4px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-8px, 0, 0); }
    40%, 60% { transform: translate3d(8px, 0, 0); }
}
@keyframes pulse-gold {
    0% { transform: scale(1); box-shadow: 0 0 10px #f1c40f; }
    50% { transform: scale(1.05); box-shadow: 0 0 30px #f1c40f; }
    100% { transform: scale(1); box-shadow: 0 0 10px #f1c40f; }
}

/* 활성화된 카드 표시 */
#active-card-display {
    border: 2px dashed #9b59b6; 
    background: #fdfcff;
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
    text-align: center;
    display: none; 
}
#active-card-display strong {
    display: block;
    color: #9b59b6;
    font-size: 1.1em;
    margin-bottom: 5px;
}
#active-card-display span {
    font-size: 0.9em;
    color: #333;
}

/* 카드덱 관리 모달 */
#card-deck-modal li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px dashed #ccc;
}
#card-deck-modal .card-info-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
#card-deck-modal .card-info-wrapper strong {
    font-size: 1.1em;
    color: #9b59b6; 
}
#card-deck-modal .card-info-wrapper span {
    font-size: 0.9em;
    color: #555;
    margin-top: 3px;
}
#card-deck-modal .card-deck-btn {
    padding: 5px 10px;
    font-size: 0.9em;
    flex-shrink: 0;
    margin-left: 10px;
    background-color: #28a745; 
}
#card-deck-modal .card-deck-btn.remove {
    background-color: #dc3545; 
}


/* 대장간 모달 스탯 미리보기 */
.modal li .item-info-wrapper .item-stats-preview {
    font-size: 0.9em;
    color: #007bff; 
    font-weight: bold;
    margin: 3px 0 5px 0;
    padding: 0;
}


/* 공성무기 미니게임 모달 */
#siege-minigame-status {
    color: #007bff;
    font-size: 1.5em;
    margin: 10px 0;
}
#siege-minigame-status.fail {
    color: #dc3545; 
    animation: impact-shake 0.3s 1; 
}
#siege-minigame-weapon-name {
    color: #6c757d;
    font-style: italic;
    margin-top: -10px;
}
#toss-history-list {
    list-style: none;
    padding: 10px;
    border-radius: 5px;
}
#toss-history-list li {
    padding: 2px 0;
    border-bottom: 1px solid #eee;
}
#toss-history-list li.success {
    color: #28a745;
}
#toss-history-list li.fail {
    color: #dc3545;
}

/* SBO 드래그 앤 드롭 (스와이프) 시각 효과 */
.sbo-slider-wrapper.dragging-swap {
    opacity: 0.3; 
}
.sbo-slider-wrapper.drag-over {
    background-color: #cce5ff; 
    border: 2px dashed #007bff;
}

/* ---------------------------------- */
/* 경매장 모달 (신규) */
/* ---------------------------------- */
.auction-house-content {
    max-width: 700px; /* 일반 모달보다 넓게 */
}

/* 탭 네비게이션 */
.ah-tabs {
    display: flex;
    border-bottom: 2px solid #007bff;
    margin-bottom: 15px;
}
.ah-tab-btn {
    padding: 10px 15px;
    cursor: pointer;
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    border-bottom: none;
    margin: 0 5px -1px 0; /* (하단 테두리 겹침) */
    border-radius: 5px 5px 0 0;
    font-size: 14px;
    color: #555;
}
.ah-tab-btn.active {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}
.ah-tab-btn:hover:not(.active) {
    background-color: #ddd;
}
.ah-tab-btn:disabled { /* 등록 탭 비활성화 */
    background-color: #e9ecef;
    color: #999;
    cursor: not-allowed;
}

/* 탭 콘텐츠 */
.ah-tab-content {
    display: none; /* 기본 숨김 */
}
.ah-tab-content.active {
    display: block; /* 활성화된 탭만 표시 */
}

/* 아이템 리스트 (인벤토리와 유사) */
.ah-item-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #eee;
}
.ah-item-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #f0f0f0;
}
.ah-item-list li:hover {
    background-color: #f9f9f9;
}

/* 서버 공지 (등록 탭) */
.ah-server-notice {
    background-color: #fffbe6;
    border: 1px solid #ffe58f;
    padding: 15px;
    border-radius: 5px;
    text-align: center;
    color: #856404;
}

/* ---------------------------------- */
/* 아이템 속성 모달 (신규) */
/* ---------------------------------- */
.properties-content {
    max-width: 700px;
}
/* 탭 네비게이션 (경매장과 유사) */
.prop-tabs {
    display: flex;
    border-bottom: 2px solid #17a2b8;
    margin-bottom: 15px;
}
.prop-tab-btn {
    padding: 10px 15px;
    cursor: pointer;
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    border-bottom: none;
    margin: 0 5px -1px 0;
    border-radius: 5px 5px 0 0;
    font-size: 14px;
    color: #555;
}
.prop-tab-btn.active {
    background-color: #17a2b8;
    color: white;
    border-color: #17a2b8;
}
.prop-tab-btn:hover:not(.active) {
    background-color: #ddd;
}
/* 탭 콘텐츠 */
.prop-tab-content {
    display: none; 
}
.prop-tab-content.active {
    display: block; 
}
.prop-item-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #eee;
}
.prop-item-list li {
    display: flex;
    flex-direction: column; /* 세로 정렬 */
    align-items: flex-start; /* 좌측 정렬 */
    padding: 10px;
    border-bottom: 1px solid #f0f0f0;
}
.prop-item-list li strong {
    font-size: 1.1em;
    color: #17a2b8;
}
.prop-item-list li .prop-description {
    font-size: 0.9em;
    color: #333;
    margin-top: 5px;
}
.prop-item-list li .prop-bonus {
    font-size: 1em;
    font-weight: bold;
    color: #007bff;
    margin-top: 5px;
}

/* --- Task 5: 전투 스킬 이펙트 (흔들림 + 색상) --- */
@keyframes shake-effect {
    0% { transform: translate(0, 0) rotate(0deg); }
    20% { transform: translate(-5px, 0) rotate(-5deg); }
    40% { transform: translate(5px, 0) rotate(5deg); }
    60% { transform: translate(-5px, 0) rotate(-5deg); }
    80% { transform: translate(5px, 0) rotate(5deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

.shake-animation {
    animation: shake-effect 0.5s ease-in-out;
}

/* ❗️ [Task 5] 속성별 피격 색상 (SBO 컨테이너용) */
.flash-fire { box-shadow: 0 0 15px #e74c3c !important; border-color: #e74c3c !important; }
.flash-water { box-shadow: 0 0 15px #3498db !important; border-color: #3498db !important; }
.flash-earth { box-shadow: 0 0 15px #2ecc71 !important; border-color: #2ecc71 !important; }
.flash-wind { box-shadow: 0 0 15px #f1c40f !important; border-color: #f1c40f !important; }
.flash-physical { box-shadow: 0 0 15px #95a5a6 !important; border-color: #95a5a6 !important; }

/* --- Task 7: 아이템 접두사 색상 --- */
.prefix-growth { color: #e67e22; font-weight: bold; } /* 성장: 주황 */
.prefix-set { color: #2ecc71; font-weight: bold; }    /* 세트: 초록 */
.prefix-runeword { color: #9b59b6; font-weight: bold; } /* 룬워드: 보라 */
.prefix-socket { color: #3498db; font-weight: bold; }   /* 소켓: 파랑 */

/* --- Task 6: 인벤토리 검색창 --- */
.inventory-search {
    width: 150px;
    padding: 5px;
    font-size: 12px;
    margin-left: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* --- Task 4: 상성 조회 모달 --- */
.affinity-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-top: 10px;
}
.affinity-table th, .affinity-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
}
.affinity-table th {
    background-color: #f2f2f2;
    color: #333;
}
.affinity-table .favorable { color: #27ae60; font-weight: bold; } /* 유리함 */
.affinity-table .unfavorable { color: #c0392b; font-weight: bold; } /* 불리함 */

/* ❗️ [Task 2] SBO 판정표 스킬 시전 스타일 */
.sbo-skill-cast {
    font-size: 1.1em;
    font-weight: bold;
    color: #9b59b6; /* 보라색 */
    animation: text-pulse 1s;
}


/* ❗️ [신규] 도플갱어 (보라색 점) 스타일 */
.map-cell.doppelganger::before {
    content: '';
    display: block;
    position: absolute;
    width: 80%; 
    height: 80%;
    border-radius: 50%;
    
    background-color: #8e44ad; /* 보라색 본체 */
    border: 2px solid #ffffff; /* 흰색 테두리 */
    box-shadow: 0 0 15px #9b59b6; /* 보라색 빛 */
    z-index: 6; 
    cursor: crosshair;
    animation: pulse-shadow 2s infinite;
}

@keyframes pulse-shadow {
    0% { box-shadow: 0 0 10px #9b59b6; transform: scale(1); }
    50% { box-shadow: 0 0 25px #8e44ad; transform: scale(1.1); }
    100% { box-shadow: 0 0 10px #9b59b6; transform: scale(1); }
}

/* ❗️ [신규] 스킬 제작소 탭 스타일 */
.skill-tabs {
    display: flex;
    border-bottom: 2px solid #007bff;
    margin-bottom: 15px;
}
.skill-tab-btn {
    padding: 10px 15px;
    cursor: pointer;
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    border-bottom: none;
    margin: 0 5px -1px 0;
    border-radius: 5px 5px 0 0;
    font-size: 14px;
    color: #555;
}
.skill-tab-btn.active {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}
.skill-tab-btn:hover:not(.active) {
    background-color: #ddd;
}
.skill-tab-content {
    display: none; /* 기본 숨김 */
}
.skill-tab-content.active {
    display: block; /* 활성화된 탭만 표시 */
}

/* ❗️ [신규] 마도서(Codex) UI 스타일 */
.codex-container {
    padding: 10px;
    background: #f8f9fa;
    border-radius: 5px;
}
.experiment-slots {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 15px;
    border: 2px dashed #ccc;
    background: #fff;
    border-radius: 5px;
}
.codex-slot {
    width: 50px;
    height: 50px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #aaa;
    cursor: pointer;
    position: relative;
}
.codex-slot.filled {
    background: #e8f6ff;
    border-color: #3498db;
    color: #333;
    font-size: 12px;
    padding: 5px;
    text-align: center;
    word-break: keep-all;
}
.codex-slot.filled:hover::after {
    content: 'X';
    position: absolute;
    top: -5px;
    right: -5px;
    background: #dc3545;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 12px;
    line-height: 18px;
    font-weight: bold;
}

.codex-lists {
    display: flex;
    gap: 15px;
    margin-top: 15px;
}
.codex-list {
    width: 50%;
}
.codex-list h4 {
    margin-top: 0;
    font-size: 1em;
}
.codex-item-list {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #fff;
    border: 1px solid #ddd;
    height: 120px;
    overflow-y: auto;
}
.codex-item-list li {
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9em;
}
.codex-item-list li:hover {
    background: #f4f4f4;
}
.codex-item-list li span {
    flex-grow: 1;
}
.codex-item-list button {
    padding: 3px 8px;
    font-size: 0.9em;
    flex-shrink: 0;
}

/* 의회 투표 UI */
.council-header { text-align: center; margin-bottom: 20px; border-bottom: 2px solid #6f42c1; padding-bottom: 10px; }
.council-section { margin-bottom: 20px; background: #f8f9fa; padding: 15px; border-radius: 8px; }
.vote-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
.vote-card { 
    display: flex; align-items: center; gap: 5px; 
    background: white; border: 1px solid #ddd; padding: 10px; border-radius: 5px; cursor: pointer; 
    transition: background 0.2s;
}
.vote-card:hover { background: #e9ecef; }
.vote-card input[type="radio"] { transform: scale(1.2); }

@media (max-width: 768px) {
    .vote-grid { grid-template-columns: repeat(2, 1fr); }
}


/* 분대(Squad) 모달 스타일 */
.squad-slot-item, .friend-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin-bottom: 8px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
}

.squad-info, .friend-info {
    display: flex;
    flex-direction: column;
}

.squad-role {
    font-size: 0.8em;
    color: #999;
    margin-bottom: 2px;
}

.squad-bonus {
    font-size: 0.85em;
    color: #2980b9;
    margin-top: 4px;
}

.dismiss-btn {
    background-color: #e74c3c;
    padding: 5px 10px;
    font-size: 0.9em;
}

.hire-btn {
    background-color: #2ecc71;
    padding: 5px 10px;
    font-size: 0.9em;
}

/* 전장의 안개 (미탐험 지역) */
.map-cell.fog {
    background-color: #000 !important; /* 완전 검은색 */
    border-color: #222 !important;
    cursor: default !important;
}

/* 안개 속에 있는 요소는 아이콘도 숨김 */
.map-cell.fog::before {
    display: none !important;
}

/* 안개 속 텍스트(스택 수 등) 숨김 */
.map-cell.fog span {
    display: none !important;
}

/* (선택) 반투명 안개 (가본 적은 있는데 현재 시야 밖) - 추후 구현 가능 */
.map-cell.shroud {
    filter: brightness(0.3) grayscale(100%);
}

/* 변이된 아이템 접두사 */
.prefix-curse { color: #c0392b; font-weight: bold; text-shadow: 1px 0 0 #000; } /* 저주: 피색 */
.prefix-chaos { color: #8e44ad; font-weight: bold; text-shadow: 1px 0 0 #000; } /* 혼돈: 보라색 */
.prefix-transcend { color: #f1c40f; font-weight: bold; text-shadow: 0 0 5px #f39c12; } /* 초월: 금색 */



/* --- 다마고치(Tamagotchi) 스타일 UI --- */

/* 1. 기기 본체 */
.tama-device {
    background-color: #f2f2f2; /* 밝은 회색 플라스틱 느낌 */
    border: 4px solid #333;
    border-radius: 30px 30px 10px 10px; /* 위는 둥글게, 아래는 약간 각지게 */
    padding: 20px;
    box-shadow: 5px 5px 0px #888;
    max-width: 400px;
    margin: 0 auto;
    font-family: 'Courier New', Courier, monospace; /* 픽셀 느낌 폰트 */
}

/* 2. 액정 화면 (게임보이 녹색) */
.tama-screen {
    background-color: #9bbc0f; /* 레트로 녹색 */
    border: 4px inset #555;
    border-radius: 10px;
    padding: 15px;
    color: #0f380f; /* 진한 녹색 글씨 */
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: relative;
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.2);
}

/* 3. 펫 캐릭터 (애니메이션) */
.tama-pet-sprite {
    font-size: 4em; /* 이모지 크게 */
    margin: 20px 0;
    filter: drop-shadow(2px 2px 0px rgba(15, 56, 15, 0.3));
    animation: tama-bounce 2s infinite ease-in-out;
    cursor: pointer;
}
.tama-pet-sprite:hover {
    transform: scale(1.1);
}

/* 둥실둥실 애니메이션 */
@keyframes tama-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* 4. 상태 표시줄 (하트, 밥그릇 등) */
.tama-stats {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 0.9em;
    font-weight: bold;
    border-top: 2px dashed #0f380f;
    padding-top: 5px;
}

/* 5. 버튼 스타일 (플라스틱 버튼 느낌) */
.tama-btn-group {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 15px;
}
.tama-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #333;
    background-color: #ffcc00; /* 노란 버튼 */
    box-shadow: 2px 2px 0px #333;
    font-size: 1.2em;
    cursor: pointer;
    transition: transform 0.1s;
}
.tama-btn:active {
    transform: translate(2px, 2px);
    box-shadow: none;
}
.tama-btn.feed { background-color: #ff6b6b; color: white; } /* 밥주기: 빨강 */
.tama-btn.status { background-color: #4ecdc4; color: white; } /* 상태: 청록 */

/* 6. 말풍선 */
.tama-bubble {
    background: #fff;
    border: 2px solid #0f380f;
    border-radius: 10px;
    padding: 5px 10px;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 0.8em;
    display: none; /* 기본 숨김 */
}

/* 먹이 목록 (레트로 스타일) */
.tama-feed-list {
    list-style: none;
    padding: 0;
    margin-top: 15px;
    border: 2px solid #333;
    border-radius: 5px;
    background: #fff;
    max-height: 120px;
    overflow-y: auto;
}
.tama-feed-list li {
    padding: 8px;
    border-bottom: 1px dashed #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tama-feed-list li:last-child { border-bottom: none; }


/* --- 모바일 스크롤 스냅 (자석 기능 최적화) --- */

html {
    /*scroll-snap-type: y proximity;
    /* 헤더(Sticky) 높이만큼 여유를 둠 (약 160px~180px 추정) */
    scroll-padding-top: 15px; 
}

/* 1. 맵 탐험 모드: [자동 사냥] 버튼이 상단에 붙음 */
#map-auto-controls {
    scroll-snap-align: start;
    /* 헤더 높이 + 약간의 여백 */
    scroll-margin-top: 60px; 
}

/* 2. 배틀 모드: [적 정보] 타이틀(h4)이 상단에 붙음 */
/* #combat-info 전체가 아니라 내부의 첫 번째 h4를 타겟팅 */
#combat-info h4:first-of-type {
    scroll-snap-align: start;
    scroll-margin-top: 90px; 
}

/* ❗️ [수정] 전투 화면 모바일 최적화 */
@media (max-width: 768px) {
    /* 불필요한 여백 제거 */
    #combat-info h4 {
        margin: 5px 0;
        font-size: 1em;
    }
    
    /* SBO 슬라이더 높이 축소 */
    #sbo-sliders-container {
        height: 70px;
        margin-bottom: 5px;
    }
    
    /* 몬스터 리스트 높이 제한 (스크롤) */
    #monster-display-list {
        max-height: 200px; /* 너무 길어지지 않게 제한 */
    }
    
    /* 공격 버튼이 화면에 들어오도록 마진 조정 */
    #battle-input {
        margin-top: 5px;
    }
}


/* --- 발견자의 딜레마 스타일 --- */
.dilemma-choices {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
}
.dilemma-card {
    flex: 1;
    border: 2px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    background-color: #f9f9f9;
    transition: transform 0.2s;
}
.dilemma-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.dilemma-card h3 {
    margin-top: 0;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
}
.choice-secret h3 { color: #e67e22; }
.choice-secret button { background-color: #e67e22; width: 100%; margin-top: 10px; }
.choice-publish h3 { color: #6f42c1; }
.choice-publish button { background-color: #6f42c1; width: 100%; margin-top: 10px; }

@media (max-width: 768px) {
    .dilemma-choices { flex-direction: column; }
}

/* --- 지하 투기장 (PvP) 스타일 --- */
.arena-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.arena-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    position: relative;
}
.arena-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-color: #c0392b;
}
.arena-card h4 {
    color: #333;
    margin: 10px 0;
}
.arena-card .class-icon {
    font-size: 2em;
    margin-bottom: 10px;
    display: block;
}
.arena-card .power-score {
    color: #e67e22;
    font-weight: bold;
    font-size: 0.9em;
}
.arena-card button {
    width: 100%;
    margin-top: 10px;
    background-color: #c0392b;
    font-size: 0.9em;
}

@media (max-width: 768px) {
    .arena-grid { grid-template-columns: 1fr; }
}

/* ❗️ [수정] 대장간 탭 가로 스크롤 적용 (줄바꿈 없이 스크롤) */
.forge-tabs {
    display: flex;
    overflow-x: auto; /* 내용이 넘치면 가로 스크롤 생성 */
    white-space: nowrap; /* 내부 요소 줄바꿈 방지 */
    gap: 5px;
    padding-bottom: 5px; /* 스크롤바와 내용 간격 */
    margin-bottom: 10px;
    -webkit-overflow-scrolling: touch; /* 모바일에서 부드러운 스크롤 */
    
    /* 스크롤바 디자인 (선택 사항 - 깔끔하게) */
    scrollbar-width: thin; 
    scrollbar-color: #ccc #f1f1f1;
}

/* 크롬, 사파리용 스크롤바 스타일 */
.forge-tabs::-webkit-scrollbar {
    height: 6px;
}
.forge-tabs::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
.forge-tabs::-webkit-scrollbar-thumb {
    background: #ccc; 
    border-radius: 3px;
}

.forge-tab-btn {
    flex: 0 0 auto; /* 버튼이 찌그러지지 않고 고정 크기 유지 */
}

/* --- 용병 소환소 (Gacha) 스타일 --- */
.shop-tabs {
    display: flex;
    border-bottom: 2px solid #e67e22;
    margin-bottom: 15px;
}
.shop-tab-btn {
    padding: 10px 20px;
    cursor: pointer;
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    border-bottom: none;
    margin: 0 5px -1px 0;
    border-radius: 5px 5px 0 0;
    font-weight: bold;
    color: #555;
}
.shop-tab-btn.active {
    background-color: #e67e22;
    color: white;
    border-color: #e67e22;
}

/* 소환 메인 화면 */
.gacha-container {
    text-align: center;
    padding: 20px;
    background: #fffbea;
    border-radius: 10px;
    border: 1px solid #f1c40f;
}
.summon-btn {
    background: linear-gradient(180deg, #f1c40f 0%, #e67e22 100%);
    color: white;
    font-size: 1.5em;
    padding: 15px 40px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 5px 0 #d35400;
    transition: transform 0.1s, box-shadow 0.1s;
    margin: 20px 0;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.summon-btn:active:not(:disabled) {
    transform: translateY(5px);
    box-shadow: none;
}
.summon-btn:disabled {
    background: #bdc3c7;
    box-shadow: none;
    cursor: not-allowed;
}

/* 소환 결과 카드 */
.gacha-result-card {
    margin-top: 20px;
    padding: 20px;
    border: 4px solid #333;
    border-radius: 10px;
    background: white;
    animation: gacha-pop 0.5s ease-out;
    display: none; /* JS로 표시 */
}

/* 등급별 스타일 */
.gacha-result-card.rank-S {
    border-color: #f1c40f;
    background: linear-gradient(135deg, #fff 0%, #fff9c4 100%);
    box-shadow: 0 0 20px #f1c40f;
}
.gacha-result-card.rank-S h3 { color: #d35400; text-shadow: 0 0 5px #f1c40f; }

.gacha-result-card.rank-A {
    border-color: #9b59b6;
    box-shadow: 0 0 15px #9b59b6;
}
.gacha-result-card.rank-A h3 { color: #8e44ad; }

.gacha-result-card.rank-B {
    border-color: #3498db;
}
.gacha-result-card.rank-B h3 { color: #2980b9; }

.gacha-result-card.rank-C {
    border-color: #95a5a6;
    background: #f4f4f4;
}
.gacha-result-card.rank-C h3 { color: #7f8c8d; }

/* 애니메이션 */
@keyframes gacha-pop {
    0% { transform: scale(0.5); opacity: 0; }
    70% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1.0); }
}
.shake-box {
    animation: shake-hard 0.5s infinite;
}
@keyframes shake-hard {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-5px, 5px) rotate(-5deg); }
    50% { transform: translate(5px, -5px) rotate(5deg); }
    75% { transform: translate(-5px, -5px) rotate(-5deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

/* --- 상태이상 (Status Effects) 스타일 --- */

/* 상태이상 아이콘 컨테이너 (체력바 위나 옆에 표시) */
.status-effect-container {
    display: flex;
    gap: 2px;
    margin-bottom: 2px;
    font-size: 12px;
    height: 16px; /* 높이 고정 */
}

/* 상태이상 아이콘 */
.status-icon {
    display: inline-block;
    padding: 1px 4px;
    border-radius: 3px;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
    animation: pulse-status 1.5s infinite;
}

.status-burn { background-color: #e74c3c; }   /* 화상: 빨강 */
.status-freeze { background-color: #3498db; } /* 빙결: 파랑 */
.status-poison { background-color: #9b59b6; } /* 중독: 보라 */
.status-stun { background-color: #f1c40f; color: #333; }   /* 기절: 노랑 */

@keyframes pulse-status {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* 피격 시 상태이상별 화면 깜빡임 효과 (combat.js와 연동) */
.flash-burn { box-shadow: inset 0 0 30px #e74c3c !important; }
.flash-freeze { box-shadow: inset 0 0 30px #3498db !important; }
.flash-poison { box-shadow: inset 0 0 30px #9b59b6 !important; }
.flash-stun { box-shadow: inset 0 0 30px #f1c40f !important; }


/* --- 무한의 탑 (Infinite Tower) 스타일 --- */

/* 무너진 바닥 (Void) */
.map-cell.void {
    background-color: #000 !important;
    border-color: #000 !important;
    background-image: none !important;
    cursor: default !important;
    animation: void-pulse 2s infinite;
}
.map-cell.void::after {
    content: '✖';
    color: #333;
    font-size: 10px;
}

/* 사신 (Reaper) */
.map-cell.reaper::before {
    content: '💀';
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
    font-size: 1.2em;
    z-index: 10;
    animation: float-ghost 1s infinite ease-in-out;
}

@keyframes void-pulse {
    0% { box-shadow: inset 0 0 10px #000; }
    50% { box-shadow: inset 0 0 30px #111; }
    100% { box-shadow: inset 0 0 10px #000; }
}
@keyframes float-ghost {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}


/* --- 잠긴 버튼 스타일 (Town Actions) --- */
.btn-locked {
    background-color: #95a5a6 !important; /* 회색 */
    color: #e0e0e0 !important;
    cursor: not-allowed; /* 마우스 커서 변경 (하지만 클릭은 됨) */
    opacity: 0.8;
    position: relative;
}
/* 잠긴 버튼 위에 자물쇠 아이콘 느낌 (선택사항) */
.btn-locked::after {
    content: '🔒'; 
    font-size: 12px;
    margin-left: 5px;
}


/* ❗️ [신규] 스킬 융합 리스트 스타일 */
#fusion-list li {
    display: flex;
    flex-direction: column;
    padding: 15px;
    border: 1px solid #ddd;
    margin-bottom: 10px;
    background-color: #fff;
    border-left: 4px solid #e67e22; /* 주황색 포인트 */
}

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

.fusion-materials {
    display: flex;
    gap: 10px;
    font-size: 0.9em;
    background-color: #f9f9f9;
    padding: 8px;
    border-radius: 4px;
}

.mat-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.mat-check {
    font-weight: bold;
}
.mat-check.ok { color: #2ecc71; }
.mat-check.no { color: #e74c3c; }

.fusion-btn {
    background: linear-gradient(45deg, #e67e22, #f1c40f);
    color: white;
    border: none;
    padding: 8px 15px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.fusion-btn:hover:not(:disabled) {
    transform: scale(1.05);
}
.fusion-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    box-shadow: none;
}


/* ❗️ [신규] 맵 기믹 스타일 */
.map-cell.chest {
    background-color: #f1c40f !important; /* 금색 */
    border: 2px solid #d35400 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    z-index: 5;
}
.map-cell.chest::after { content: '📦'; font-size: 1.5em; z-index:2; }

.map-cell.web {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border: 1px dashed #ccc !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
    opacity: 0.8;
}

/* 주시자 조준 효과 (위 코드에서 inline style로 처리했지만 클래스로 빼도 됨) */

/* ❗️ [신규] 추가 맵 기믹 스타일 */
.map-cell.acid {
    background-color: rgba(46, 204, 113, 0.3) !important; /* 녹색 액체 */
    border: 1px dashed #27ae60 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
}

/* 그림자 몬스터 (검은 안개 느낌) */
.map-cell.shadow-monster::before {
    background-color: #2d3436 !important;
    box-shadow: 0 0 10px #000 !important;
    border: 2px solid #636e72 !important;
    opacity: 0.9;
}

/* ❗️ [신규] 유산 상점 스타일 */
.legacy-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 0;
    list-style: none;
}

.legacy-item-card {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s, box-shadow 0.2s;
}

.legacy-item-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-color: #f1c40f;
}

.legacy-icon {
    font-size: 2em;
    margin-bottom: 10px;
    display: block;
    text-align: center;
}

.legacy-info h4 {
    margin: 0 0 5px 0;
    color: #2c3e50;
}

.legacy-level {
    color: #e67e22;
    font-weight: bold;
    font-size: 0.9em;
    margin-bottom: 5px;
    display: block;
}

.legacy-buy-btn {
    background-color: #2c3e50;
    color: #f1c40f;
    border: 1px solid #f1c40f;
    padding: 8px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    margin-top: 10px;
    width: 100%;
}
.legacy-buy-btn:hover:not(:disabled) {
    background-color: #34495e;
}
.legacy-buy-btn:disabled {
    background-color: #95a5a6;
    border-color: #7f8c8d;
    color: #ddd;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .legacy-grid { grid-template-columns: 1fr; }
}

/* ❗️ [신규] 전투 UI 최적화 */

/* 공격 버튼 상태 구분 (내 턴 vs 적 턴) */
#attack-button {
    transition: background-color 0.2s, transform 0.1s;
    font-weight: bold;
    font-size: 1.2em;
    padding: 15px;
    width: 100%; /* 모바일 꽉 차게 */
}
#attack-button:disabled {
    background-color: #95a5a6; /* 회색 (대기) */
    cursor: not-allowed;
    transform: none !important;
    opacity: 0.8;
}
#attack-button:not(:disabled) {
    background-color: #e74c3c; /* 붉은색 (공격 가능!) */
    box-shadow: 0 4px 0 #c0392b; /* 입체감 */
}
#attack-button:not(:disabled):active {
    box-shadow: 0 2px 0 #c0392b;
    transform: translateY(2px);
}

/* 몬스터 목록 아이템 소형화 (모바일 공간 확보) */
#monster-display-list li {
    padding: 8px 10px !important; /* 패딩 축소 */
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* 이름과 HP를 한 줄에 배치 */
.monster-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.monster-name { margin: 0 !important; font-size: 1em; }
.monster-hp-text { float: none !important; font-size: 0.85em; }

/* 스펙과 비밀번호를 한 줄에 배치 */
.monster-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85em;
    color: #555;
    background: #eee;
    padding: 2px 5px;
    border-radius: 3px;
}
.monster-secret-status { margin: 0 !important; font-family: monospace; font-weight: bold; color: #333; }

/* 인벤토리 바로가기 링크 스타일 */
.inventory-link {
    cursor: pointer;
    color: #3498db;
    text-decoration: underline;
}
.inventory-link:hover { color: #2980b9; }

/* ❗️ [신규] 메인 화면 인벤토리 요약 리스트 스타일 */
#inventory-section ul {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 8px;
    margin-bottom: 15px;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
#inventory-section h4 {
    margin-bottom: 5px;
    color: #2c3e50;
    border-left: 4px solid #007bff;
    padding-left: 8px;
}

/* ❗️ [신규] 모달 내부 아이템 리스트 레이아웃 (줄바꿈 방지) */
#inventory-modal li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap !important; /* 줄바꿈 강제 금지 */
    gap: 10px;
}

/* 텍스트 영역: 남은 공간 차지, 넘치면 말줄임 */
#inventory-modal .item-info-wrapper {
    flex: 1;
    min-width: 0; /* 텍스트 오버플로우 방지 필수 */
    padding-right: 5px;
}

/* 버튼 영역: 크기 고정, 줄바꿈 안 함 */
#inventory-modal .button-wrapper {
    flex-shrink: 0;
    white-space: nowrap;
    display: flex;
    gap: 5px;
}

/* ❗️ [수정] 모바일 인벤토리 UI 깨짐 방지 */
@media (max-width: 600px) {
    /* 모달 내부 리스트: 세로 배치로 변경 */
    #inventory-modal li {
        flex-direction: column; /* 위아래 배치 */
        align-items: stretch;   /* 가로 꽉 차게 */
        gap: 5px;
        padding: 10px;
        height: auto; /* 높이 자동 */
    }
    
    #inventory-modal .item-info-wrapper {
        width: 100%;
        padding-right: 0;
        white-space: normal; /* 텍스트 줄바꿈 허용 */
    }
    
    #inventory-modal .button-wrapper {
        width: 100%;
        justify-content: flex-end; /* 버튼 오른쪽 정렬 */
        margin-top: 5px;
        gap: 8px;
    }
    
    /* 버튼 크기 확보 */
    #inventory-modal button {
        padding: 8px 12px;
        font-size: 0.95em;
    }
}

/* ❗️ [신규] 인벤토리 필터 UI 스타일 */
.inv-filter-row {
    display: flex;
    gap: 5px;
    margin-top: 5px;
    flex-wrap: wrap;
}

.inv-filter-select {
    padding: 4px;
    font-size: 0.85em;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #fff;
}

.inv-filter-box {
    flex-direction: column; /* 모바일 대응을 위해 세로 정렬 기본 */
    align-items: flex-start !important; 
}

/* 검색창 줄 */
.inv-search-row {
    display: flex;
    width: 100%;
    gap: 10px;
    align-items: center;
}

@media (min-width: 600px) {
    /* PC에서는 가로 배치 */
    .inv-filter-box {
        flex-direction: row;
        align-items: center !important;
        justify-content: space-between;
    }
    .inv-filter-row {
        margin-top: 0;
    }
}




/* 2. 모바일 인벤토리 최적화 (5줄 -> 2줄 압축) */
@media (max-width: 768px) {
    /* 모달 리스트 아이템: Grid 레이아웃 적용 */
    #inventory-modal li {
        display: grid;
        /* [체크박스] [별] [아이템 정보(이름+설명)] */
        /* [           버튼 뭉치             ] */
        grid-template-columns: auto auto 1fr;
        grid-template-rows: auto auto;
        gap: 5px 8px; /* 가로 세로 간격 */
        padding: 8px 5px;
        align-items: center; /* 수직 중앙 정렬 */
    }

    /* 1. 체크박스 (왼쪽 상단) */
    .inventory-item-checkbox {
        grid-column: 1;
        grid-row: 1;
        margin: 0;
        transform: scale(1.2); /* 터치하기 쉽게 조금 키움 */
    }

    /* 2. 즐겨찾기 별 (체크박스 옆) */
    .fav-btn {
        grid-column: 2;
        grid-row: 1;
        padding: 0;
        margin: 0;
        line-height: 1;
    }

    /* 3. 아이템 정보 (이름 + 설명) - 우측 나머지 공간 전부 */
    .item-info-wrapper {
        grid-column: 3;
        grid-row: 1;
        width: 100%;
        /* 텍스트 줄바꿈 허용 */
        white-space: normal; 
        word-break: break-word;
        line-height: 1.3;
    }
    
    .item-info-wrapper strong {
        display: block; /* 이름은 한 줄 차지 */
        font-size: 1em;
        margin-bottom: 2px;
    }
    
    .item-info-wrapper .item-description {
        font-size: 0.85em;
        color: #7f8c8d;
    }

    /* 4. 버튼 그룹 (아래쪽 한 줄 통째로 사용) */
    .button-wrapper {
        grid-column: 1 / -1; /* 전체 너비 사용 */
        grid-row: 2;
        
        display: flex;
        justify-content: flex-end; /* 오른쪽 정렬 */
        gap: 5px;
        margin-top: 2px;
        border-top: 1px dashed #eee; /* 구분선 */
        padding-top: 5px;
    }

    /* 버튼 스타일 최적화 (터치 영역 확보) */
    .button-wrapper button {
        flex: 1; /* 버튼끼리 너비 균등 분배 (선택사항) */
        max-width: 80px; /* 너무 넓어지는 것 방지 */
        padding: 6px 0;
        font-size: 0.9em;
        margin: 0;
    }
}

/* ========================================= */
/* 🛠️ UI 레이아웃 긴급 수정 (PC/Mobile) */
/* ========================================= */

/* 1. PC 상단바 (몽당연필 탈출) */
/* main 태그가 Flexrow일 때 sticky바가 찌그러지는 현상 해결 */
main {
    flex-wrap: wrap; /* 내부 요소 줄바꿈 허용 */
    align-content: flex-start; /* 위쪽 정렬 */
}

#player-header-sticky {
    /* 기존 속성 덮어쓰기 */
    width: 100%;
    max-width: 800px; /* 메인 콘텐츠와 폭 맞춤 */
    margin: 0 auto 20px auto !important; /* 중앙 정렬 */
    left: 0;
    right: 0;
    /* 나머지 유지 */
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 10px 15px;
    box-sizing: border-box;
    border-radius: 0 0 8px 8px;
}

/* ❗️ [신규] 헤더 버튼 텍스트 스타일 */
.header-buttons button {
    display: flex;
    flex-direction: column; /* 아이콘 위, 텍스트 아래 */
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none;
}

.header-buttons .icon {
    font-size: 1.4em;
    line-height: 1;
}

.header-buttons .label {
    font-size: 10px; /* 아주 작게 */
    color: #555;
    font-weight: normal;
    white-space: nowrap;
}

/* ❗️ [신규] 던전 맵 컨트롤 버튼 한 줄 배치 */
#map-auto-controls {
    display: flex; /* Grid 대신 Flex 사용 */
    justify-content: space-between;
    gap: 5px;
    flex-wrap: nowrap; /* 줄바꿈 금지 */
}
#map-auto-controls .auto-btn {
    flex: 1; 
    min-width: 0; 
    margin: 0 !important;
    padding: 4px 2px !important; /* 패딩을 줄여서 내부 공간 확보 */
    
    /* 텍스트 정렬 핵심 */
    display: inline-flex !important;
    flex-direction: column; /* 위아래 배치 */
    align-items: center;
    justify-content: center;
    
    font-size: 11px !important;
    line-height: 1.2 !important; /* 줄 간격 좁힘 */
    white-space: normal !important; /* 줄바꿈 허용 */
    height: 42px; /* 높이 고정 (선택사항, 레이아웃 안정화) */
}
/* 버튼 내부 텍스트 미세 조정 */
#map-auto-controls .auto-btn div {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* 각 줄은 한 줄로 제한 */
}
/* ========================================= */
/* 🛠️ 스티키 헤더 모바일 최적화 패치 */
/* ========================================= */

/* 1. 헤더 레이아웃 (Flex) */
.sticky-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0 4px 0;
    width: 100%;
    overflow: hidden; /* 넘침 숨김 (안전장치) */
}

/* 2. 좌측 버튼 그룹 스타일 */
.header-buttons {
    display: flex;
    align-items: center;
    gap: 12px; /* PC 기본 간격 */
}

.header-buttons button {
    background: none;
    border: none;
    cursor: pointer;
    color: #333;
    padding: 0;
    margin: 0;
    line-height: 1;
    font-size: 1.5em; /* PC 기본 크기 */
}

/* 3. 우측 정보 그룹 스타일 */
.header-info-group {
    text-align: right;
    line-height: 1.2;
    white-space: nowrap;
    flex-shrink: 0; /* 찌그러짐 방지 */
}

.info-row-upper { font-size: 0.85em; }
.info-row-lower { font-size: 0.95em; font-weight: bold; color: #f1c40f; }

.level-text { font-weight: bold; color: #e67e22; margin-right: 2px; }
.exp-text { color: #95a5a6; font-size: 0.85em; }

#sticky-sp-container {
    background: #e74c3c; color: white;
    border-radius: 3px; padding: 0 3px; margin-left: 3px;
    font-size: 0.9em; font-weight: bold;
}

/* 📱 모바일 전용 조정 (화면폭 480px 이하) */
@media (max-width: 480px) {
    .header-buttons {
        gap: 5px; /* 간격 대폭 축소 (15px -> 5px) */
    }
    .header-buttons button {
        font-size: 1.25em; /* 아이콘 크기 축소 */
        padding: 2px; /* 터치 영역 확보 */
    }
    .sticky-header-row {
        gap: 5px; /* 좌우 그룹 사이 간격 최소화 */
    }
}

/* ❗️ [신규] 메인 탭 (마을/던전) 스타일 */
.main-nav-tabs {
    display: flex;
    justify-content: center;
    margin: 10px 0 20px 0;
    border-bottom: 2px solid #ddd;
    width: 100%;
}

.nav-tab-btn {
    flex: 1;
    max-width: 200px;
    padding: 12px 0;
    font-size: 1.1em;
    font-weight: bold;
    color: #555;
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    transition: all 0.2s;
}

.nav-tab-btn.active {
    background-color: #fff;
    color: #007bff;
    border-color: #007bff;
    border-bottom: 2px solid #fff; /* 밑줄 가리기 */
    margin-bottom: -2px;
}

.nav-tab-btn:hover:not(.active) {
    background-color: #e2e6ea;
}

/* 섹션 숨김 처리 */
.main-section {
    width: 100%;
    max-width: 800px; /* PC 중앙 정렬용 */
}

/* 헤더 버튼 아이콘+텍스트 스타일 */
.header-buttons button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
.header-buttons .icon { font-size: 1.4em; }
.header-buttons .label { font-size: 0.6em; color: #555; font-weight: normal; }

/* Sticky Content Wrapper (중앙 정렬) */
.header-content-wrapper {
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

/* PC 화면에서 메인 컨테이너 중앙 정렬 */
@media (min-width: 1024px) {
    main {
        flex-direction: column; /* 탭 방식이므로 세로 배치 */
        align-items: center;
    }
    #town, #dungeon {
        max-width: 800px; /* 너비 제한 */
    }
}


/* ❗️ [신규] 마을 버튼 그룹 스타일 */
.town-group {
    margin-bottom: 15px;
    border: 1px solid #eee;
    border-radius: 5px;
    overflow: hidden;
}
.group-header {
    margin: 0;
    padding: 8px 12px;
    background-color: #e9ecef;
    color: #495057;
    font-size: 0.95em;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.group-header:hover {
    background-color: #dee2e6;
}
.group-header::after {
    content: '▼';
    font-size: 0.8em;
    color: #888;
}
/* 닫혔을 때 */
.town-group.closed .group-content {
    display: none;
}
.town-group.closed .group-header::after {
    content: '▲'; /* 혹은 ▶ */
}

.group-content {
    padding: 10px;
    background-color: #fff;
}

/* 🛠️ [최적화] 스티키 헤더 모바일 전용 수정 */
@media (max-width: 480px) {
    .header-buttons {
        gap: 3px !important; /* 버튼 사이 간격 3px로 좁힘 */
    }
    
    .header-buttons .icon {
        font-size: 1.2em; /* 아이콘 약간 축소 */
    }
    .header-buttons .label {
        font-size: 9px; /* 텍스트 축소 */
    }
}

/* ❗️ [패치] 모바일/태블릿 환경(폭 1024px 이하)에서는 몰컴 모드 버튼 숨김 */
@media (max-width: 1024px) {
    #btn-boss-mode {
        display: none !important;
    }
}

/* ❗️ [신규] 대형 몬스터 (2x2) 스타일 */
.map-cell.giant-monster {
    background-color: #8e44ad; /* 보라색 배경 */
    border: none; /* 경계선 없애서 덩어리처럼 보이게 */
}
.map-cell.giant-monster::before {
    /* 기존 점(Dot) 제거하고 꽉 채움 */
    display: none; 
}

/* ❗️ [신규] 피버 모드 스타일 */
.fever-pulse {
    animation: fever-glow 0.5s infinite alternate;
}

@keyframes fever-glow {
    from { box-shadow: 0 0 5px #e74c3c; filter: brightness(1.0); }
    to { box-shadow: 0 0 15px #e74c3c; filter: brightness(1.5); }
}

/* ❗️ [수정] 스킬 컷신 오버레이 (공통) */
#skill-cutscene-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 9000;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    perspective: 1000px; /* 3D 효과용 */
}

/* 공통 텍스트 스타일 */
.cutscene-content {
    position: relative;
    text-align: center;
    color: white;
    text-shadow: 2px 2px 4px #000;
    z-index: 2;
}
.cutscene-bg {
    position: absolute;
    z-index: 1;
}

/* --- 스타일 1: ⚡ 슬래시 (Slash) - 날카롭게 지나감 --- */
.cutscene-style-slash .cutscene-bg {
    width: 100%; height: 150px;
    background: rgba(0,0,0,0.8);
    transform: skewY(-5deg);
    animation: slash-bg 0.4s cubic-bezier(0.23, 1, 0.32, 1) both;
}
.cutscene-style-slash .cutscene-content {
    transform: skewY(-5deg);
    animation: slash-text 0.5s 0.1s cubic-bezier(0.23, 1, 0.32, 1) both;
}

@keyframes slash-bg {
    0% { width: 0; left: -100%; opacity: 0; }
    100% { width: 100%; left: 0; opacity: 1; }
}
@keyframes slash-text {
    0% { transform: translateX(-200px) skewY(-5deg); opacity: 0; }
    100% { transform: translateX(0) skewY(-5deg); opacity: 1; }
}

/* --- 스타일 2: 💥 임팩트 (Impact) - 쿵! 하고 박힘 (치명타/중화기) --- */
.cutscene-style-impact .cutscene-bg {
    width: 100%; height: 300px;
    background: radial-gradient(circle, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 70%);
    animation: impact-bg 0.2s ease-out both;
}
.cutscene-style-impact .cutscene-content {
    animation: impact-text 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

@keyframes impact-bg {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes impact-text {
    0% { transform: scale(3); opacity: 0; }
    60% { transform: scale(0.9); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* --- 스타일 3: ✨ 매직 (Magic) - 은은하게 퍼짐 --- */
.cutscene-style-magic .cutscene-bg {
    width: 100%; height: 100%;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0) 100%);
    animation: magic-bg 1.5s ease-in-out both;
}
.cutscene-style-magic .cutscene-content {
    animation: magic-text 1.5s ease-in-out both;
}

@keyframes magic-bg {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes magic-text {
    0% { transform: translateY(20px); opacity: 0; filter: blur(5px); }
    20% { transform: translateY(0); opacity: 1; filter: blur(0); }
    80% { transform: translateY(0); opacity: 1; filter: blur(0); }
    100% { transform: translateY(-20px); opacity: 0; filter: blur(5px); }
}

/* --- ❗️ [신규] 전설 스타일: 황금빛 (Legendary Gold) --- */
/* 레온의 철옹성 등에 사용 */
.cutscene-style-legendary-gold .cutscene-bg {
    width: 100%; height: 100%;
    /* 황금빛 그라데이션 */
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.8) 0%, rgba(218, 165, 32, 0.9) 50%, rgba(0, 0, 0, 0.8) 100%);
    animation: legend-bg 1.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    border-top: 5px solid #fff;
    border-bottom: 5px solid #fff;
}
.cutscene-style-legendary-gold .cutscene-content {
    animation: legend-text 1.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    text-shadow: 0 0 10px #ffd700, 2px 2px 0 #000;
}

/* --- ❗️ [신규] 전설 스타일: 화염 (Legendary Fire) --- */
/* 소피아의 메테오 등에 사용 */
.cutscene-style-legendary-fire .cutscene-bg {
    width: 100%; height: 100%;
    background: radial-gradient(circle, rgba(255, 69, 0, 0.9) 20%, rgba(0, 0, 0, 0.9) 90%);
    animation: legend-bg 0.2s ease-in both; /* 쾅! 하고 등장 */
}
.cutscene-style-legendary-fire .cutscene-content {
    animation: impact-text 0.5s ease-out both; /* 글자도 쾅! */
    color: #ff4500;
    text-shadow: 0 0 20px #ff4500, 2px 2px 0 #fff;
}


@keyframes legend-bg {
    0% { transform: scaleY(0); opacity: 0; }
    100% { transform: scaleY(1); opacity: 1; }
}
@keyframes legend-text {
    0% { transform: scale(0.5); opacity: 0; letter-spacing: 10px; }
    50% { transform: scale(1.2); opacity: 1; letter-spacing: 0px; }
    100% { transform: scale(1.0); opacity: 1; }
}


/* --- ✨ 튜토리얼 하이라이트 (가이드) --- */
.tutorial-highlight {
    position: relative;
    z-index: 9100 !important; /* 오버레이보다 위에 */
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7) !important; /* 주변 어둡게 */
    border: 2px solid #f1c40f !important;
    animation: guide-pulse 1.5s infinite;
    pointer-events: auto !important;
}

@keyframes guide-pulse {
    0% { box-shadow: 0 0 0 0 rgba(241, 196, 15, 0.7), 0 0 0 9999px rgba(0, 0, 0, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(241, 196, 15, 0), 0 0 0 9999px rgba(0, 0, 0, 0.7); }
    100% { box-shadow: 0 0 0 0 rgba(241, 196, 15, 0), 0 0 0 9999px rgba(0, 0, 0, 0.7); }
}

/* ❗️ [신규] 피버 게이지 슬림화 (모바일/PC 공통 적용 추천) */
#fever-gauge-container .fever-bg {
    height: 6px !important; /* 높이 축소 (10px -> 6px) */
    margin: 3px 0 !important;
}
#fever-gauge-container .fever-text {
    font-size: 0.7em !important; /* 글자 크기 축소 */
    margin-top: -2px;
}

/* 📱 [신규] 모바일 전용 UI 압축 (폭 600px 이하) */
@media (max-width: 600px) {
    
    /* 1. 상단 스티키 헤더 다이어트 */
    #player-header-sticky {
        padding: 5px 10px !important; /* 패딩 축소 */
    }
    .header-buttons button {
        font-size: 1.2em !important; /* 아이콘 크기 축소 */
    }
    .header-buttons .label {
        display: none !important; /* 버튼 라벨 숨김 (공간 확보) */
    }
    .header-info-group div {
        font-size: 0.8em !important; /* 텍스트 크기 축소 */
    }
    
    /* 2. 상태바(HP/MP/STM) 얇게 만들기 */
    .status-bar {
        height: 10px !important; /* 높이 대폭 축소 (18px -> 10px) */
        margin-bottom: 2px !important;
    }
    .status-bar .bar-text {
        font-size: 9px !important; /* 바 내부 글자 축소 */
        line-height: 11px !important; /* 수직 정렬 보정 */
    }
    
    /* 3. 몬스터 리스트 높이 제한 (스크롤 유도하여 버튼 밀림 방지) */
    #monster-display-list {
        max-height: 180px !important; /* 목록 높이 강제 제한 */
    }
    
    /* 4. 전투 로그 높이 축소 */
    #battle-log {
        height: 100px !important; /* 로그 창 줄임 */
        font-size: 11px !important;
    }
}

/* --- 🎨 UI 업그레이드 (스타일 강화) --- */

/* 1. 아케이드 모달 (게임기 느낌) */
#arcade-modal .modal-content {
    background: #222;
    border: 4px solid #444;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8), inset 0 0 50px rgba(0,0,0,0.5);
    border-radius: 15px;
    overflow: hidden;
}

/* 2. NPC 화면 (판타지 다이얼로그) */
#arcade-npc-screen {
    background: linear-gradient(135deg, #2c3e50 0%, #000000 100%);
    color: #fff;
    font-family: 'Noto Sans KR', sans-serif;
}

#npc-portrait {
    font-size: 5em;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
    animation: floatIcon 3s infinite ease-in-out;
}

#npc-dialog {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid #555;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
    color: #ecf0f1;
    font-size: 1em;
    line-height: 1.6;
    padding: 20px;
    border-radius: 8px;
    position: relative;
}
/* 말풍선 꼬리 */
#npc-dialog::after {
    content: '';
    position: absolute;
    top: -10px; left: 50%;
    border-width: 0 10px 10px;
    border-style: solid;
    border-color: rgba(0,0,0,0.6) transparent;
    display: block;
    width: 0;
}

/* 3. 게임 캔버스 영역 (CRT 모니터 효과) */
#arcade-game-screen {
    position: relative;
    border: 4px inset #111;
    box-shadow: 0 0 15px rgba(0,0,0,0.8);
    background: #000;
}

#game-canvas {
    display: block;
    background: #111;
    
    box-shadow: inset 0 0 50px rgba(0,0,0,0.5); /* 비네팅 효과 */
}

/* 4. 버튼 스타일 강화 (3D 느낌) */
.button-grid button, #btn-arcade-start, #btn-arcade-close {
    border: none;
    border-bottom: 4px solid rgba(0,0,0,0.3);
    border-radius: 6px;
    transition: all 0.1s;
    font-weight: bold;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
}
.button-grid button:active, #btn-arcade-start:active, #btn-arcade-close:active {
    transform: translateY(3px);
    border-bottom: 1px solid rgba(0,0,0,0.3);
}

/* 5. 연금술 파이프 (빛나는 효과) */
@keyframes pipe-pulse {
    0% { box-shadow: 0 0 5px #3498db; }
    50% { box-shadow: 0 0 15px #3498db, 0 0 25px #2980b9; }
    100% { box-shadow: 0 0 5px #3498db; }
}

/* 플로팅 애니메이션 */
@keyframes floatIcon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* 생활력 게이지 (선택 사항) */
.vitality-display {
    font-size: 0.9em;
    color: #2ecc71;
    margin-bottom: 5px;
}


/* ❗️ [Bug Fix] 아케이드 모달 스크롤 고정 문제 해결 */
#arcade-modal .modal-content {
    /* 기존 overflow: hidden을 덮어씁니다 */
    overflow-y: auto !important; 
    /* 모바일에서 위아래 여유 공간 확보 */
    max-height: 85vh !important; 
    /* 부드러운 스크롤 */
    -webkit-overflow-scrolling: touch; 
}

/* 게임 캔버스 터치 시에만 스크롤 막기 (게임 조작 위해) */
#game-canvas {
    touch-action: none; /* 캔버스 내부 터치는 게임 조작으로만 인식 */
    display: block;     /* 하단 여백 제거 */
    margin: 0 auto;     /* 중앙 정렬 */
    max-width: 100%;
    height: auto;
    cursor: pointer !important; /* ✅ 마우스 커서 보이게 설정 */
}

/* 모달 내부 여백 조정 (스크롤 공간 확보) */
#arcade-npc-screen, #arcade-game-screen {
    padding-bottom: 20px;
}

/* 페이지 전체 스크롤 안전장치 */
html, body {
    min-height: 100%;
    height: auto;
    overflow-y: auto; 
}


/* [수정 4] 아케이드 모달 스크롤 활성화 */
#arcade-modal .modal-content {
    overflow-y: auto !important;   /* 내부 스크롤 허용 */
    max-height: 85vh !important;   /* 화면 밖으로 나가지 않게 제한 */
}


/* 1. [Fix] 상단 메뉴(Game Header)가 스티키바 위로 오도록 설정 */
#game-header {
    position: fixed; /* 절대 고정 */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10000; /* 스티키바(9999)보다 높게 */
    background-color: rgba(44, 62, 80, 0.95); /* 반투명 배경 */
    border-bottom: 1px solid #1a252f;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* 2. 펫 보관함 (가로 스크롤 그리드) */
.pet-storage-grid {
    display: flex;
    gap: 10px;
    overflow-x: auto; /* 가로 스크롤 */
    padding: 10px 5px;
    margin-top: 10px;
    background-color: #f0f0f0;
    border-radius: 8px;
    border: 1px solid #ccc;
    
    /* 부드러운 스크롤 */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* 펫 슬롯 카드 */
.pet-slot-card {
    flex: 0 0 90px; /* 너비 고정 (늘어나지 않음) */
    height: 110px;
    background: #fff;
    border: 2px solid #ddd;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: transform 0.1s, border-color 0.1s;
}

.pet-slot-card:hover {
    transform: translateY(-2px);
    border-color: #3498db;
}

.pet-slot-card.active-pet {
    border-color: #2ecc71;
    background-color: #e8f8f5;
    box-shadow: 0 0 5px #2ecc71;
}

.pet-slot-card.empty {
    background-color: #e9ecef;
    border: 2px dashed #bdc3c7;
    color: #bdc3c7;
}

.pet-slot-card.locked {
    background-color: #ddd;
    color: #888;
    cursor: not-allowed;
}

/* 펫 아이콘 */
.pet-slot-emoji {
    font-size: 2.5em;
    margin-bottom: 5px;
}
.pet-slot-name {
    font-size: 0.8em;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    padding: 0 5px;
}
.pet-slot-level {
    font-size: 0.7em;
    color: #666;
}

/* 확장 버튼 */
.btn-expand-storage {
    flex: 0 0 90px;
    height: 110px;
    background: #fff3cd;
    border: 2px dashed #f1c40f;
    border-radius: 8px;
    color: #856404;
    font-size: 0.8em;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}


/* --- 🃏 정보 카드 (Info Card) 모달 --- */
#info-card-modal {
    display: none;
    position: fixed; z-index: 11000; /* 최상위 */
    left: 0; top: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.85);
    backdrop-filter: blur(5px);
    align-items: center; justify-content: center;
    animation: fadeIn 0.2s ease-out;
}

.info-card {
    background: linear-gradient(135deg, #ffffff 0%, #f0f2f5 100%);
    width: 300px;
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
    overflow: hidden;
    position: relative;
    text-align: center;
    border: 4px solid #333;
    transform: scale(0.8);
    animation: cardPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* 카드 등급별 테두리 색상 */
.info-card.rank-common { border-color: #bdc3c7; }
.info-card.rank-rare { border-color: #3498db; box-shadow: 0 0 15px #3498db; }
.info-card.rank-epic { border-color: #9b59b6; box-shadow: 0 0 15px #9b59b6; }
.info-card.rank-legendary { border-color: #f1c40f; box-shadow: 0 0 20px #f1c40f; }

.card-header {
    padding: 15px;
    color: #fff;
    font-weight: bold;
    font-size: 1.2em;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.rank-common .card-header { background: #7f8c8d; }
.rank-rare .card-header { background: #2980b9; }
.rank-epic .card-header { background: #8e44ad; }
.rank-legendary .card-header { background: linear-gradient(45deg, #f1c40f, #e67e22); }

.card-image {
    font-size: 5em;
    margin: 20px 0;
    filter: drop-shadow(0 5px 5px rgba(0,0,0,0.2));
    animation: floatIcon 3s infinite ease-in-out;
}

.card-body {
    padding: 0 20px 20px 20px;
    text-align: left;
    font-size: 0.9em;
    color: #333;
}

.card-stat-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    border-bottom: 1px dashed #ccc;
    padding-bottom: 2px;
}

.card-desc {
    margin-top: 15px;
    font-style: italic;
    color: #666;
    font-size: 0.85em;
    background: #eee;
    padding: 10px;
    border-radius: 5px;
}

.card-close-btn {
    position: absolute;
    top: 10px; right: 10px;
    background: none; border: none;
    color: rgba(255,255,255,0.8);
    font-size: 1.5em;
    cursor: pointer;
}
.card-close-btn:hover { color: #fff; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes cardPop { to { transform: scale(1); } }


/* 맵 기믹 오브젝트 */
.map-cell.spring {
    background-color: #dff9fb; border: 2px solid #81ecec;
    animation: pulse-blue 2s infinite;
}
.map-cell.spring::after { content: '⛲'; font-size: 1.5em; }

.map-cell.altar {
    background-color: #2d3436;
    border-color: #d63031;
    color: #d63031;
}
.map-cell.merchant {
    background-color: #ffeaa7;
    border-color: #fdcb6e;
}

@keyframes pulse-blue {
    0% { box-shadow: 0 0 5px #81ecec; }
    50% { box-shadow: 0 0 15px #00cec9; }
    100% { box-shadow: 0 0 5px #81ecec; }
}


/* ❗️ [Bug Fix] 맵 타일 일그러짐 방지 (크기 고정) */
.map-cell {
    /* 셀 크기를 내용물에 의해 늘어나지 않게 고정 */
    overflow: hidden !important; 
    position: relative;
    
    /* 폰트 사이즈가 레이아웃을 밀지 않도록 초기화 */
    line-height: 1; 
}

/* ❗️ [수정] 보물상자 등 특수 아이콘 절대 위치로 변경 */
/* (기존 흐름(flow)에서 떼어내어 레이아웃 영향을 없앰) */
.map-cell.chest::after {
    content: '📦';
    font-size: 1.4em; /* 크기 미세 조정 */
    z-index: 5;
    
    /* 정중앙 고정 (Absolute Centering) */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* 클릭 통과 방지 (선택적) */
    pointer-events: none; 
}

/* 장애물(바위) 아이콘도 동일하게 처리 */
.map-cell.obstacle::after {
    content: '🪨';
    font-size: 1.2em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* 샘물 아이콘도 동일하게 처리 */
.map-cell.spring::after {
    content: '⛲';
    font-size: 1.4em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}


/* --- 💬 전투 말풍선 (Battle Bark) --- */
.battle-bark {
    position: absolute;
    background: #fff;
    border: 2px solid #333;
    border-radius: 15px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: bold;
    color: #333;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    z-index: 9999;
    pointer-events: none; /* 클릭 방해 X */
    white-space: nowrap;
    
    /* 애니메이션 */
    opacity: 0;
    transform: translateY(10px) scale(0.8);
    animation: barkPop 2.5s ease-in-out forwards;
}

/* 말풍선 꼬리 */
.battle-bark::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 20px;
    border-width: 6px 6px 0;
    border-style: solid;
    border-color: #333 transparent;
    display: block;
    width: 0;
}

@keyframes barkPop {
    0% { opacity: 0; transform: translateY(10px) scale(0.8); }
    10% { opacity: 1; transform: translateY(0) scale(1); }
    80% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-10px) scale(0.9); }
}

/* 무기 숙련도 리스트 */
.mastery-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mastery-item {
    padding: 8px 5px;
    border-bottom: 1px dashed #eee;
}

.mastery-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.9em;
    margin-bottom: 4px;
}

.mastery-bar-bg {
    width: 100%;
    height: 8px;
    background-color: #eee;
    border-radius: 4px;
    overflow: hidden;
}

.mastery-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #f1c40f, #e67e22);
    width: 0%;
    transition: width 0.5s ease-in-out;
}


/* --- 🏛️ 박물관 (Museum) --- */
.museum-tabs {
    display: flex;
    gap: 10px;
    border-bottom: 2px solid #34495e;
    margin-bottom: 15px;
}
.museum-tab-btn {
    flex: 1;
    padding: 10px;
    background: #ecf0f1;
    border: none;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    color: #7f8c8d;
    font-weight: bold;
}
.museum-tab-btn.active {
    background: #34495e;
    color: #fff;
}
.museum-tab-content {
    display: none;
    max-height: 60vh;
    overflow-y: auto;
}
.museum-tab-content.active {
    display: block;
}

/* 그리드 레이아웃 */
.museum-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
}

/* 트로피 카드 */
.trophy-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.1s;
}
.trophy-card:hover { transform: translateY(-3px); box-shadow: 0 5px 10px rgba(0,0,0,0.1); }
.trophy-icon { font-size: 2.5em; margin-bottom: 5px; }
.trophy-name { font-size: 0.8em; font-weight: bold; color: #333; }
.trophy-desc { display: none; } /* 툴팁으로 보여주거나 숨김 */

/* 도서관 카드 */
.library-card {
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 5px;
    padding: 10px;
    text-align: center;
}
.library-card.locked { opacity: 0.5; background: #ddd; }
.library-card.unlocked { cursor: pointer; border-color: #3498db; background: #e8f6ff; }
.lib-icon { font-size: 1.5em; margin-bottom: 5px; }
.lib-title { font-size: 0.75em; font-weight: bold; }
.lib-sub { font-size: 0.7em; color: #666; }

/* 명예의 전당 리스트 */
.history-list {
    list-style: none;
    padding: 0;
}
.history-item {
    background: linear-gradient(to right, #fff, #f0f0f0);
    border-left: 4px solid #f1c40f;
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 0 5px 5px 0;
    box-shadow: 0 2px 3px rgba(0,0,0,0.05);
}
.history-header {
    display: flex; justify-content: space-between; font-weight: bold; font-size: 0.9em;
    border-bottom: 1px solid #eee; padding-bottom: 5px; margin-bottom: 5px;
}
.history-rank { color: #f1c40f; }
.history-body {
    display: flex; justify-content: space-between; font-size: 0.85em; color: #555;
}
.history-footer {
    font-size: 0.75em; color: #999; text-align: right; margin-top: 5px;
}

/* --- 🌍 다이내믹 배경 (Dynamic Atmosphere) --- */
#dynamic-bg {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1; /* 콘텐츠 뒤로 */
    transition: background 1s ease;
    background: #f0f2f5; /* 기본 배경 */
}

/* 🌲 테마: 고블린 (숲) */
body[data-theme="goblin"] #dynamic-bg {
    background: linear-gradient(to bottom, #1a2a1a, #2c3e50);
    /* 나뭇잎 느낌의 패턴 추가 가능 */
}

/* 🔥 테마: 오크 (황무지/전쟁) */
body[data-theme="orc"] #dynamic-bg {
    background: linear-gradient(to bottom, #4a2c2c, #2c2c2c);
    animation: pulse-heat 5s infinite alternate;
}

/* 🏰 테마: 타워/던전 (어둠) */
body[data-theme="tower"], body[data-theme="dungeon"] {
    background-color: #000 !important; /* 배경색 강제 */
}
body[data-theme="tower"] #dynamic-bg {
    background: radial-gradient(circle at center, #2c3e50, #000);
}

/* 🌊 테마: 해양 (예정) */
body[data-theme="ocean"] #dynamic-bg {
    background: linear-gradient(to top, #001f3f, #003366);
}

/* --- 🩸 빈사 효과 (Low HP Vignette) --- */
#vignette-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 9000; /* UI보다는 뒤, 배경보다는 앞 */
    pointer-events: none; /* 클릭 통과 */
    box-shadow: inset 0 0 100px rgba(255, 0, 0, 0);
    transition: box-shadow 0.5s ease;
    display: none; /* 기본 숨김 */
}

/* 체력이 낮을 때 JS가 클래스를 붙임 */
#vignette-overlay.active {
    display: block;
    animation: heartbeat 1s infinite;
}

@keyframes pulse-heat {
    from { box-shadow: inset 0 0 50px rgba(255, 100, 0, 0.1); }
    to { box-shadow: inset 0 0 100px rgba(255, 50, 0, 0.3); }
}

@keyframes heartbeat {
    0% { box-shadow: inset 0 0 50px rgba(255, 0, 0, 0.3); }
    50% { box-shadow: inset 0 0 150px rgba(255, 0, 0, 0.6); }
    100% { box-shadow: inset 0 0 50px rgba(255, 0, 0, 0.3); }
}

/* style.css 맨 아래에 덮어씌우세요 */

/* ❗️ [Fix] 맵 타일 시인성 강화 */
.map-cell {
    position: relative;
    overflow: visible !important; /* 아이콘이 잘리지 않게 */
    font-family: "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

/* 탐지 범위 (빗금) - z-index를 낮춤 */
.map-cell.detected::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.1) 5px,
        rgba(0, 0, 0, 0.05) 5px,
        rgba(0, 0, 0, 0.05) 10px
    );
    z-index: 1; /* 가장 뒤 */
    pointer-events: none;
}

/* 특수 아이콘 공통 스타일 (z-index 높임) */
.map-cell::after {
    z-index: 10; /* 빗금보다 위 */
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.4em;
    line-height: 1;
    pointer-events: none;
}

/* 각 타일별 아이콘 지정 */
.map-cell.chest::after { content: '📦'; }
.map-cell.obstacle { background-color: #555; }
.map-cell.obstacle::after { content: '🪨'; }
.map-cell.web::after { content: '🕸️'; }
.map-cell.acid::after { content: '🧪'; }

/* ❗️ [복구] 신규 기믹 아이콘 */
.map-cell.spring { background-color: #dff9fb; border: 1px solid #81ecec; }
.map-cell.spring::after { content: '⛲'; font-size: 1.5rem !important;}

.map-cell.altar { background-color: #2d3436; border: 1px solid #d63031; }
.map-cell.altar::after { content: '⛩️'; }

.map-cell.merchant { background-color: #ffeaa7; border: 1px solid #fdcb6e; }
.map-cell.merchant::after { content: '🤠'; }

.map-cell {
    position: relative; /* 자식 요소들의 기준점 */
    overflow: visible !important; /* 아이콘 잘림 방지 */
    font-family: "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    z-index: 0;
}

/* 1. 탐지 범위 (빗금) - 가장 아래 */
.map-cell.detected::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* 빗금을 반투명하게 하여 뒤의 배경색이 보이도록 함 */
    background: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.1) 5px,
        rgba(0, 0, 0, 0.05) 5px,
        rgba(0, 0, 0, 0.05) 10px
    );
    z-index: 1; /* 아이콘보다 아래 */
    pointer-events: none;
}

/* 2. 특수 아이콘 공통 (상자, 바위, 제단 등) - 가장 위 */
.map-cell::after {
    z-index: 10; /* 빗금(1)보다 훨씬 위 */
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem !important; /* rem 단위 사용 */
    line-height: 1;
    pointer-events: none; /* 클릭 방해 금지 */
    text-shadow: 0 0 2px rgba(255,255,255,0.5); /* 잘 보이게 그림자 */
}

/* 각 타일별 아이콘 및 배경 */
/* (map.js에서 textContent를 쓰지 않고 CSS content로 처리) */

.map-cell.chest::after { content: '📦'; }

.map-cell.obstacle { background-color: #555; border: 1px solid #444; }
.map-cell.obstacle::after { content: '🪨'; }

.map-cell.web::after { content: '🕸️'; }

.map-cell.acid { background-color: #2ecc7133; } /* 연한 녹색 배경 */
.map-cell.acid::after { content: '🧪'; }

/* 3. 샘물 스타일 보강 */
.map-cell.spring {
    background-color: #dff9fb !important;
    border: 1px solid #81ecec !important;
    background-image: none !important;
}
.map-cell.spring::after {
    content: '⛲';
    font-size: 1.5rem !important; 
}

/* 4. 제단 스타일 보강 */
.map-cell.altar {
    background-color: #2d3436 !important;
    background-image: none !important;
}
.map-cell.altar::after {
    content: '⛩️';
    font-size: 1.5rem !important; 
}

.map-cell.merchant { background-color: #ffeaa7; border: 1px solid #fdcb6e; }
.map-cell.merchant::after { content: '🤠'; }

/* 플레이어 (파란 원) - 얘는 DOM 요소 스타일로 제어되지만 z-index 확인 */
.map-cell.player::before {
    z-index: 20; /* 아이콘보다 더 위 */
}

/* 1. 특수 타일에는 빗금(탐지 표시)을 아예 그리지 않음 */
/* (background-image를 none으로 강제하여 아이콘과 배경색만 보이게 함) */
.map-cell.chest, 
.map-cell.obstacle, 
.map-cell.web, 
.map-cell.acid, 
.map-cell.spring, 
.map-cell.altar, 
.map-cell.merchant, 
.map-cell.portal {
    background-image: none !important; 
    z-index: 10; /* 다른 일반 타일보다 무조건 위로 */
}

/* 2. 아이콘(::after)이 항상 최상단에 오도록 설정 */
.map-cell::after {
    z-index: 30 !important; 
    /* (기존 위치 설정이 있다면 유지, 없으면 아래 줄 추가) */
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}

/* 3. 장애물(바위) 배경색 및 테두리 강화 */
.map-cell.obstacle {
    background-color: #555 !important;
    border: 1px solid #888 !important;
}

/* 4. 보물상자 배경색 및 테두리 강화 */
.map-cell.chest {
    background-color: rgba(241, 196, 15, 0.3) !important; 
    border: 2px solid #f1c40f !important;
}
/* 바위 아이콘 강제 표시 */
.map-cell.obstacle::after {
    content: '🪨';
    font-size: 1.5rem !important;
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 20;
    display: block !important;
}

/* ❗️ [신규] 꾹 누르기(Charge) 애니메이션 */
.map-cell.charging::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(231, 76, 60, 0.5); /* 붉은색 차징 */
    transform: scale(0);
    border-radius: 50%;
    animation: charge-scale 0.5s forwards; /* 0.5초 동안 커짐 */
    z-index: 15;
}

@keyframes charge-scale {
    to { transform: scale(1); border-radius: 10%; }
}


/* 플레이어 상태이상 아이콘 컨테이너 (헤더 내) */
#player-status-icon-container {
    min-height: 24px; /* 아이콘 들어갈 공간 확보 */
}

.status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    margin: 0 2px;
    border: 1px solid rgba(255,255,255,0.5);
}


/* --- 🛡️ 방어 슬롯 머신 --- */
.slot-machine-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    background: #000;
    padding: 15px;
    border-radius: 10px;
    border: 4px solid #555;
    position: relative;
    overflow: hidden;
}

/* 저스트 가드 발동 시 테두리 효과 */
.slot-machine-container.just-guard-ready {
    border-color: #f1c40f;
    box-shadow: 0 0 15px #f1c40f;
    animation: pulse-gold 0.2s infinite; /* 매우 빠르게 깜빡임 */
}

.slot-reel {
    width: 60px;
    height: 80px;
    background: #fff;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5em;
    color: #333;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}

/* 릴 회전 애니메이션 (blur 효과) */
.slot-reel.spinning .icon {
    animation: spin-blur 0.1s infinite linear;
    filter: blur(2px);
}

@keyframes spin-blur {
    0% { transform: translateY(-10px); opacity: 0.5; }
    100% { transform: translateY(10px); opacity: 0.5; }
}

/* --- 👁️ 몬스터 살의 감지 (Intent) --- */
.monster-intent-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    background: #fff;
    border: 2px solid #333;
    border-radius: 50%;
    font-size: 14px;
    margin-right: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    animation: floatIcon 2s infinite ease-in-out;
}

/* 의도별 색상 */
.intent-attack { border-color: #e74c3c; color: #c0392b; } /* 공격 */
.intent-heavy { border-color: #e74c3c; background: #fadbd8; transform: scale(1.1); } /* 강공격 */
.intent-defend { border-color: #3498db; color: #2980b9; } /* 방어 */
.intent-buff { border-color: #f1c40f; color: #f39c12; }   /* 버프 */
.intent-debuff { border-color: #9b59b6; color: #8e44ad; } /* 디버프 */


/* ==========================================================================
   🌍 지형 연동 전투 (Terrain Synergy) - 테두리 점멸 효과
   - 빗금(탐지범위)과 아이콘은 그대로 유지됨
   - 테두리 색상으로 지형 속성을 표시
   ========================================================================== */

/* 1. 🌲 숲 (Forest) - 초록색 점멸 */
.map-cell.terrain-forest {
    border-width: 2px !important;
    animation: pulse-terrain-forest 3s infinite alternate;
}
@keyframes pulse-terrain-forest {
    from { border-color: #1e8449; box-shadow: inset 0 0 2px #1e8449; }
    to   { border-color: #2ecc71; box-shadow: inset 0 0 10px #2ecc71; }
}

/* 2. 🌊 물가 (Water) - 파란색 점멸 */
.map-cell.terrain-water {
    border-width: 2px !important;
    animation: pulse-terrain-water 3s infinite alternate;
}
@keyframes pulse-terrain-water {
    from { border-color: #2874a6; box-shadow: inset 0 0 2px #2874a6; }
    to   { border-color: #3498db; box-shadow: inset 0 0 10px #3498db; }
}

/* 3. 🌋 용암/황무지 (Lava) - 붉은색 점멸 */
.map-cell.terrain-lava {
    border-width: 2px !important;
    animation: pulse-terrain-lava 3s infinite alternate;
}
@keyframes pulse-terrain-lava {
    from { border-color: #b03a2e; box-shadow: inset 0 0 2px #b03a2e; }
    to   { border-color: #e74c3c; box-shadow: inset 0 0 10px #e74c3c; }
}

/* (참고: 일반 땅 'floor'는 효과 없음) */


/* ❗️ [Fix] 하이라이트 시인성 수정 (몬스터 점 가림 방지) */

/* 🎯 선택된 몬스터 본체 (타겟) */
.map-cell.highlighted-target {
    z-index: 100 !important;
    /* 테두리와 광채로 강조 (점은 건드리지 않음) */
    box-shadow: 0 0 0 2px #fff, 0 0 15px #f1c40f !important;
    animation: pulse-target 1s infinite;
}

/* 🎯 선택된 몬스터의 사거리 (범위) */
/* ::before를 쓰지 않고, 셀 자체에 내부 그림자(Tint)를 줘서 표시 */
.map-cell.highlighted-range {
    /* 노란색 반투명 틴트 */
    box-shadow: inset 0 0 0 100px rgba(241, 196, 15, 0.25) !important;
    border-color: rgba(241, 196, 15, 0.5) !important;
}



@keyframes pulse-target {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}


/* --- 👥 캐릭터 선택 화면 (반응형) --- */

/* 모달 컨텐츠 크기 조정 */
#char-select-modal .modal-content {
    width: 95%;        /* 모바일: 화면 꽉 차게 */
    max-width: 800px;  /* PC: 적당한 너비 */
    background-color: #2c3e50;
    border: 2px solid #f1c40f;
    padding: 20px;
    color: white;
    max-height: 90vh;  /* 화면 높이 넘어가면 스크롤 */
    overflow-y: auto;
}

/* 슬롯 리스트 그리드 레이아웃 */
#char-slot-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 기본: 3열 (가로) */
    gap: 15px;
    margin: 20px 0;
}

/* 개별 슬롯 카드 디자인 */
.char-slot-card {
    background: #34495e;
    border: 2px solid #444;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 220px; /* 높이 확보 */
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    position: relative;
}

.char-slot-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.5);
    border-color: #bdc3c7;
}

/* 캐릭터 정보 텍스트 */
.slot-avatar { font-size: 3.5em; margin-bottom: 10px; }
.slot-name { font-size: 1.2em; color: #f1c40f; font-weight: bold; margin-bottom: 5px; }
.slot-info { font-size: 0.9em; color: #ecf0f1; }
.slot-sub { font-size: 0.8em; color: #95a5a6; }

/* 버튼 스타일 */
.slot-btn {
    margin-top: 15px;
    padding: 8px 20px;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    width: 80%;
}
.btn-play { background-color: #2ecc71; color: white; }
.btn-create { background-color: #3498db; color: white; }


/* 📱 모바일 전용 스타일 (화면폭 768px 이하) */
@media (max-width: 768px) {
    /* 슬롯을 세로로 1줄씩 배치 */
    #char-slot-list {
        grid-template-columns: 1fr; 
    }

    /* 카드 높이를 줄이고 가로 배치 느낌으로 변경 (선택사항) */
    .char-slot-card {
        min-height: 120px;
        flex-direction: row; /* 가로로 정보 나열 */
        justify-content: space-between;
        padding: 15px;
        text-align: left;
    }

    /* 모바일에서 내부 요소 재배치 */
    .char-slot-card .slot-content-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        flex: 1;
        margin-left: 15px;
    }
    
    .slot-avatar { font-size: 2.5em; margin-bottom: 0; }
    .slot-btn { width: auto; padding: 8px 15px; margin-top: 0; }
}

/* --- ⚔️ 전투 화면 스와이퍼 (Battle Swiper) --- */

/* 탭 네비게이션 (점/글자) */
#battle-pagination .dot {
    font-size: 0.85em;
    font-weight: bold;
    color: #777;
    padding: 4px 10px;
    border-radius: 15px;
    background: #eee;
    cursor: pointer;
    transition: all 0.2s;
}
#battle-pagination .dot.active {
    background: #3498db;
    color: white;
    transform: scale(1.1);
}

/* 스킬 버튼 그리드 (2열) */
.grid-2-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}
.skill-btn {
    width: 100%;
    min-height: 50px; /* 터치 영역 확보 */
}

/* 슬라이드 애니메이션 */
.battle-slide {
    /* 내용물이 위쪽으로 정렬되도록 */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
}


/* ❗️ [Fix] 버튼 3분할 강제 정렬 */
#combat-action-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* 줄바꿈 절대 금지 */
    gap: 5px !important;
    width: 100% !important;
    box-sizing: border-box;
}

#combat-action-row button {
    margin: 0 !important; /* 여백 제거 (밀림 방지) */
    white-space: nowrap !important; /* 텍스트 줄바꿈 방지 */
    height: 50px !important; /* 높이 통일 */
    padding: 0 5px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 스킬 버튼 높이 축소 (슬라이드 공백 줄이기) */
.skill-btn {
    min-height: 40px !important; /* 기존 50px -> 40px */
    font-size: 0.85em !important;
    padding: 5px !important;
}

/* ❗️ [Fix] SBO 숫자판과 피버 게이지 밀착 */
#sbo-sliders-container {
    margin-bottom: 0 !important;
    padding-bottom: 2px !important; /* 아주 최소한의 간격만 남김 */
}

/* SBO 슬라이더 개별 요소 여백 축소 */
.sbo-slider-wrapper {
    margin-bottom: 0 !important;
}

/* style.css 추가 및 수정 */

/* ❗️ [Fix] 피버 게이지 여백 강제 */
#fever-gauge-container {
    margin-top: 20px !important; /* 숫자판과 확실히 띄움 */
    margin-bottom: 10px !important;
}

/* style.css 추가 및 수정 */

/* 1. 네비게이션 (얇은 막대) */
.nav-indicator {
    flex: 1;           /* 공간 균등 분할 */
    height: 4px;       /* 아주 얇게 */
    background: #444;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.3s;
}
.nav-indicator.active {
    background: #3498db; /* 활성 색상 */
    box-shadow: 0 0 5px #3498db;
}

/* style.css 수정 - 퀵슬롯 (Slim & Grid) */
/* 1. 컨테이너: 세로 정렬 (간격 좁게 유지) */
#quick-slot-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    width: 100% !important;
    margin-bottom: 10px !important;
    box-sizing: border-box;
}

/* 2. 버튼: 밝은 배경색 적용 */
.quick-slot-btn {
    width: 100% !important;
    height: 40px !important; /* 얇게 유지 */
    min-height: 40px !important;
    
    display: flex !important;
    justify-content: space-between !important; /* 양쪽 정렬 */
    align-items: center !important;
    
    /* ❗️ [색상 변경] 기존(#546e7a) -> 훨씬 밝은 회청색(#78909c) */
    background-color: #78909c !important; 
    border: 1px solid #b0bec5 !important; /* 테두리도 밝게 */
    border-radius: 4px !important;
    
    color: #fff !important; /* 흰색 글씨 */
    text-shadow: 0 1px 1px rgba(0,0,0,0.2) !important; /* 글씨 그림자로 가독성 확보 */
    
    padding: 0 10px !important;
    margin: 0 !important;
    cursor: pointer !important;
    box-shadow: 0 2px 3px rgba(0,0,0,0.15) !important;
}

/* 눌렀을 때 효과 */
.quick-slot-btn:active {
    transform: scale(0.98) !important;
    background-color: #607d8b !important; /* 누르면 약간 어두워짐 */
}

/* 비활성화 상태 */
.quick-slot-btn.disabled, .quick-slot-btn:disabled {
    opacity: 0.7 !important;
    cursor: not-allowed !important;
    background-color: #546e7a !important; /* 비활성은 약간 어둡게 */
}

/* 빈 슬롯 (구분을 위해 약간 어둡고 점선) */
.quick-slot-btn.empty {
    background-color: #37474f !important;
    border: 1px dashed #78909c !important;
    color: #cfd8dc !important; /* 글씨도 밝은 회색 */
    justify-content: center !important;
}

/* 3. 내부 요소 */
.qs-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qs-icon {
    font-size: 1.2rem !important;
    line-height: 1;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.2));
}

.qs-name {
    font-size: 0.9rem !important;
    font-weight: bold !important; /* 글씨 두께 보강 */
}

.qs-count {
    background: rgba(0,0,0,0.2) !important; /* 배경을 반투명 검정으로 */
    padding: 2px 8px !important;
    border-radius: 10px !important;
    font-size: 0.8rem !important;
    font-weight: bold !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
}


/* ❗️ [Fix] 맵 텍스트 선택 방지 (돌진 시 불편함 해결) */
#map-grid-container, .map-cell {
    user-select: none;
    -webkit-user-select: none; /* 사파리/크롬 */
    -moz-user-select: none;    /* 파이어폭스 */
    -ms-user-select: none;     /* IE */
    touch-action: manipulation; /* 더블탭 줌 방지 */
}

/* ❗️ [Fix] 몬스터 리스트 레이아웃 (버튼 밀림 방지) */
.monster-header-row {
    display: flex;
    align-items: center;
    width: 100%;
    overflow: hidden; /* 넘침 방지 */
}

/* 이름 영역: 남은 공간 차지, 넘치면 ... 처리 */
.monster-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0; /* flex item 축소 허용 */
}

/* 정보 버튼: 크기 고정 (찌그러짐 방지) */
.monster-info-btn {
    flex-shrink: 0; /* 절대 줄어들지 않음 */
    width: 24px;
    text-align: center;
    margin-left: 5px;
}

/* HP 텍스트: 크기 고정 */
.monster-hp-text {
    flex-shrink: 0;
    margin-left: 5px;
}


/* ❗️ [Final] 타격감 & 데미지 폰트 (기존 스타일 통합) */

/* 1. 플로팅 텍스트 컨테이너 */
.damage-floating {
    position: absolute;
    pointer-events: none;
    z-index: 9999;
    
    font-weight: 900;
    font-family: 'Impact', 'Arial Black', sans-serif; /* 두꺼운 폰트 */
    
    /* ❗️ [핵심] 글자 테두리 & 그림자 강화 */
    -webkit-text-stroke: 1px black; /* 글자 테두리 (크롬/사파리) */
    text-shadow: 
        2px 2px 0 #000, 
        -1px -1px 0 #000,  
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000; /* 사방으로 그림자를 넣어 테두리처럼 만듦 */
    
    /* ❗️ [핵심] 시간 1.5초로 연장 */
    animation: float-up-fade 1.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

/* 2. 데미지 타입별 스타일 */
/* 2. 데미지 타입별 색상 */

/* 일반 물리 (흰색 + 강렬한 대비) */
.dmg-physical { 
    color: #ffffff; 
    font-size: 1.8rem; /* 크기 키움 */
}

/* 치명타 (노랑 + 빨강 아우라) */
.dmg-critical { 
    color: #ffeb3b; 
    font-size: 2.5rem; /* 훨씬 크게 */
    text-shadow: 2px 2px 0 #c0392b; /* 빨간 그림자 */
    z-index: 10000;
}

/* 플레이어 피격 (붉은색) -> 플레이어가 맞을 땐 빨간 글씨가 국룰 */
.dmg-player-hit {
    color: #ff5252;
    font-size: 1.8rem;
}

/* 회복 (초록) */
.dmg-heal { color: #2ecc71; font-size: 1.8rem; }
/* 빗나감 (회색) */
.dmg-miss { color: #bdc3c7; font-size: 1.5rem; font-style: italic; }

/* 상태이상 */
.dmg-poison { color: #9b59b6; font-size: 1.5rem; }
.dmg-freeze { color: #3498db; font-size: 1.5rem; }


/* 3. 애니메이션 (천천히 올라감) */
@keyframes float-up-fade {
    0% { 
        transform: translateY(0) scale(0.5); 
        opacity: 0; 
    }
    15% { 
        transform: translateY(-20px) scale(1.2); /* 팍 튀어오름 */
        opacity: 1; 
    }
    80% {
        opacity: 1; /* 오랫동안 보임 */
    }
    100% { 
        transform: translateY(-60px) scale(1.0); 
        opacity: 0; 
    }
}

/* 4. 화면 흔들림 효과 (이전 코드 유지) */
.shake-effect {
    animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
    10%, 90% { transform: translate3d(-2px, 0, 0); }
    20%, 80% { transform: translate3d(4px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
    40%, 60% { transform: translate3d(6px, 0, 0); }
}


/* 3. SBO 상태이상 (실명/동결) */

/* 실명: 숫자가 흐려지고 물음표로 보임 */
.sbo-blind .sbo-value {
    color: transparent !important;
    text-shadow: 0 0 8px rgba(255,255,255,0.5);
    position: relative;
}
.sbo-blind .sbo-value::after {
    content: '?';
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    color: #95a5a6;
    font-size: 1.2em;
    text-shadow: none;
}

/* 동결: 슬라이더가 파랗게 얼어붙음 */
.sbo-frozen input[type=range] {
    filter: sepia(1) hue-rotate(180deg) saturate(2); /* 파란색 필터 */
    cursor: not-allowed;
    opacity: 0.7;
}
.sbo-frozen::before {
    content: '❄️';
    position: absolute;
    top: -10px; right: -5px;
    font-size: 1.2em;
    z-index: 10;
}


/* 1. 기본 흔들림 애니메이션 */
@keyframes shake-hard {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px) rotate(-2deg); }
    40% { transform: translateX(4px) rotate(2deg); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

.shake-animation {
    animation: shake-hard 0.4s ease-in-out;
}

/* 2. 속성별 플래시 색상 정의 */
/* 공통 동작: 배경색이 변했다가 돌아옴 */
li[class*="flash-"] {
    transition: background-color 0.1s;
}

/* 물리: 붉은색 */
.flash-physical { background-color: rgba(231, 76, 60, 0.5) !important; }

/* 화염/화상: 주황/빨강 */
.flash-fire, .flash-burn { background-color: rgba(230, 126, 34, 0.6) !important; box-shadow: inset 0 0 10px #e74c3c; }

/* 냉기/동결/물: 파란색 */
.flash-water, .flash-freeze { background-color: rgba(52, 152, 219, 0.6) !important; box-shadow: inset 0 0 10px #2980b9; }

/* 자연/대지/독: 초록/보라 */
.flash-earth, .flash-wind { background-color: rgba(46, 204, 113, 0.5) !important; }
.flash-poison { background-color: rgba(155, 89, 182, 0.6) !important; box-shadow: inset 0 0 10px #8e44ad; }

/* 기절/전기: 노란색 */
.flash-stun, .flash-magical { background-color: rgba(241, 196, 15, 0.5) !important; box-shadow: inset 0 0 10px #f39c12; }


/* ❗️ [Fix] 텍스트 선택(드래그) 방지 - UI 전체 적용 */

/* 1. 맵 그리드 및 몬스터 점 */
#map-grid-container, .map-cell {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

/* 2. 전투 정보창 (몬스터 리스트, 헤더) */
#combat-info, #monster-display-list li, .monster-header-row {
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* 3. SBO 결과 및 판정표 */
#guess-result-display, .sbo-history-item {
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* 4. 각종 버튼 및 슬라이더 */
button, input[type=range], .sbo-value {
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* 모바일 롱터치 시 돋보기/메뉴 뜨는 것 방지 (일부 브라우저) */
body {
    -webkit-touch-callout: none !important;
}


/* ❗️ [New] 몬스터 그로기(Groggy) 상태 시각화 */

/* 1. 그로기 상태 (황금색 강조 + 어지러움) */
li.groggy-state {
    border: 2px solid #f1c40f !important; /* 노란색 테두리 */
    background-color: rgba(241, 196, 15, 0.15) !important; /* 배경 살짝 노랗게 */
    box-shadow: 0 0 10px rgba(241, 196, 15, 0.5); /* 빛나는 효과 */
    
    /* 몽롱하게 흔들리는 애니메이션 */
    animation: groggy-wobble 2s infinite ease-in-out;
}

/* 2. 이름 옆에 아이콘 자동 추가 (CSS로 처리) */
li.groggy-state .monster-name::after {
    content: " 💫(BREAK!)";
    font-size: 0.8em;
    font-weight: bold;
    color: #f1c40f;
    margin-left: 5px;
    display: inline-block;
}

/* 3. 몽롱한 애니메이션 키프레임 */
@keyframes groggy-wobble {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-1deg); }
    75% { transform: rotate(1deg); }
}


/* ❗️ [Real Final] PC/모바일 고정 레이아웃 CSS */

/* 1. 기본 초기화 */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    
    overflow-x: hidden; /* 가로 스크롤 방지 */
}

body {
    max-width: 600px; /* PC 중앙 정렬 */
    margin: 0 auto;
    position: relative;
}

/* 2. 헤더 고정 (HP바) */
#player-header-sticky {
    position: fixed !important;
    top: 0;
    
    /* 중앙 정렬 보정 */
    left: 50%;
    transform: translateX(-50%);
    
    width: 100%;
    max-width: 600px;
    z-index: 10000;
    
    
    border-bottom: 1px solid #444;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    
    /* 높이는 자동이지만, 아래 패딩 계산을 위해 대략 130px~140px 예상 */
}

/* 1. 탭 스타일 변경 (고정 끔) */
#main-nav-tabs {
    position: relative !important; /* fixed -> relative 변경 */
    top: auto !important;
    left: auto !important;
    transform: none !important;
    
    width: 100%;
    max-width: 600px;
    margin: 0 auto 10px auto !important; /* 아래 여백 살짝 추가 */
    
    z-index: 10 !important; /* 헤더보다 낮아야 뒤로 들어감 */
    
    border-bottom: 2px solid #555;
    
    /* PC 중앙 정렬 보정 */
    display: flex;
    justify-content: center;
}

/* 2. 본문 여백 조절 */
#game-content-wrapper {
    /* 아까는 (헤더+탭) 높이인 190px이었지만, 
       이제는 (헤더) 높이인 약 140px 정도로 줄입니다. */
    /* ⚠️ 헤더가 탭을 가리면 이 숫자를 조금 더 늘리세요! */
    padding-top: 110px !important; 
    
    padding-bottom: 150px !important;
    min-height: 100vh;
    box-sizing: border-box;
}


/* 5. 하단 입력창 고정 */
#battle-input {
    /*position: fixed !important;*/
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 600px;
    z-index: 50;
    position: relative !important;
    
}

/* 흔들림 효과가 적용되어도 헤더는 영향받지 않음 */
.shake-effect {
    animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}


/* 던전 섹션 안에 잘못 들어있는 헤더 숨기기 */
#dungeon #dungeon-header {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 던전 섹션 자체를 바짝 당기기 */
#dungeon {
    margin-top: 0 !important;
    padding-top: 0 !important; /* wrapper가 이미 여백을 주므로 여긴 0이어야 함 */
}

/* 스테이지 선택창 맨 위 요소들의 마진 제거 */
#stage-selection, 
#stage-list,
#dungeon h3:first-child, /* 던전 안의 첫 번째 제목 */
#dungeon div:first-child {
    margin-top: 0 !important;
}


#player-header-sticky {
    /* 기존 속성 유지하되 아래 내용 확인 */
    position: fixed !important;
    top: 0 !important;
    z-index: 99999 !important; /* 최상단 유지 */
    
    /* ❗️ [핵심 1] 버튼 클릭이 안 되는 문제 해결 */
    pointer-events: auto !important; 
    
    /* ❗️ [핵심 2] 메뉴가 펼쳐질 때 잘리거나 뒤로 숨는 문제 해결 */
    overflow: visible !important; 
    height: auto !important;
    min-height: 50px; /* 최소 높이 보장 */
    
    
}

/* 혹시 메뉴가 별도의 레이어로 뜬다면 그것도 최상단으로 */
.header-content-wrapper, 
.header-buttons, 
.header-info-group {
    position: relative !important;
    z-index: 100000 !important; /* 헤더 배경보다 더 위 */
}


/* ❗️ [Fix] Z-Index 계급 정리 (모달 > 헤더 > 탭) */

/* 1. 최상위: 각종 모달창 (인벤토리, 퀘스트, 장비 등) */
.modal, 
.modal-overlay, 
#quest-modal, 
#inventory-modal, 
#equipment-modal,
.popup-container { /* 사용자님이 쓰시는 모달 클래스명 모두 포함 */
    z-index: 10000 !important; /* 무조건 제일 위 */
}

/* 2. 중간: 헤더 (HP바) */
#player-header-sticky {
    z-index: 500 !important; /* 모달보다는 아래 */
}

/* 3. 중간: 탭 버튼 (헤더 바로 아래) */
#main-nav-tabs {
    z-index: 490 !important; /* 헤더보다 살짝 아래 */
}

/* 4. 바닥: 하단 입력창 */
#battle-input {
    z-index: 50 !important; /* 헤더와 비슷하거나 살짝 위 */
}

/* ❗️ [Fix] 스테이지가 밑으로 가라앉는 문제 해결 (상단 정렬 강제) */

#game-content-wrapper {
    /* 1. Flexbox 설정 확인 */
    display: flex !important;
    flex-direction: column !important;
    
    /* ❗️ 핵심: 내용물을 무조건 위쪽(flex-start)으로 정렬 */
    /* 기존에 center나 space-between이 있었다면 이게 범인입니다 */
    justify-content: flex-start !important; 
    
    /* 가로로는 꽉 채우기 */
    align-items: stretch !important; 
    
    /* 여백 유지 */
    padding-top: 130px !important; 
    min-height: 100vh;
}

/* 2. 혹시 섹션 자체에 'margin-top: auto'가 있어서 바닥에 붙나 확인 */
#dungeon, #town {
    margin-top: 10px !important;
    margin-bottom: auto !important; /* 남은 공간은 아래에 둠 */
    flex: 0 0 auto !important; /* 억지로 늘어나지 않게 함 */
}

/* 탭 전환 시 숨겨진 섹션은 공간도 차지하지 않게 함 */
section[style*="display: none"] {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* ❗️ [Fix] PC vs 모바일 여백(Padding) 다르게 설정하기 */

/* 1. 기본 설정 (PC 기준 - 화면이 600px보다 클 때) */
#game-content-wrapper {
    /* PC에서는 헤더가 넓게 퍼지므로 높이가 얕을 수 있습니다 */
    padding-top: 180px !important; 
}
/* 탭 위치도 PC에 맞춤 */
#main-nav-tabs {
    top: 10px !important; /* 헤더 높이만큼 띄움 */
}


/* 2. 모바일 설정 (화면이 600px 이하일 때) */
@media (max-width: 600px) {
    
    #game-content-wrapper {
        /* 📱 모바일: 헤더가 좁아져서 두 줄이 되거나 하면 높이가 더 필요할 수 있음 */
        /* 상황에 맞춰 숫자를 조절하세요! */
        padding-top: 110px !important; 
    }

    /* 📱 모바일: 탭 위치도 같이 조절해야 함 */
    #main-nav-tabs {
        top: 20px !important; /* 본문 패딩이랑 비슷하게 맞춰주세요 */
    }
}


/* ❗️ [Fix] 전투 중 탭 숨기기 & 여백 자동 조절 */

/* body에 'in-gameplay' 클래스가 붙으면 탭만 깔끔하게 제거 */
body.in-gameplay #main-nav-tabs {
    display: none !important;
}

/* 탭이 사라지면서 생긴 빈 공간만큼 스테이지가 너무 올라가면 살짝 여백 줌 (선택사항) */



/* 1) 배틀 UI 소형화 (SBO, 피버, 아이콘) */
.slider-track {
    height: 8px !important; /* 더 얇게 */
}
.slider-handle {
    width: 16px !important;
    height: 16px !important;
    top: -4px !important;
}
#fever-gauge-container {
    height: 6px !important; 
    margin-bottom: 5px !important;
    margin-top: 5px !important;
}
.buff-icon {
    width: 18px !important; /* 아이콘 작게 */
    height: 18px !important;
    font-size: 10px !important;
}

/* 슬롯 컨테이너들 */
#quick-slot-container, #player-skill-buttons, #player-hand-container {
    z-index: 51 !important;
}

/* 10) 인벤토리 가로 스크롤 밀림 방지 (줄바꿈 강제) */
#inventory-scroll-area ul, 
.inventory-section-box ul {
    display: flex;
    flex-direction: column; /* 리스트 형태로 세로 정렬 */
    width: 100% !important;
    box-sizing: border-box;
    overflow-x: hidden !important;
}
/* 모달 내부 아이템 리스트 (가로 스크롤 방지) */
#inventory-modal li {
    width: 100%;
    box-sizing: border-box;
    white-space: normal; /* 텍스트 줄바꿈 허용 */
}



/* ❗️ [Fix] 모달 및 헤더 Z-Index 계급 정리 */

/* 1. 상성표 모달 (최상위 포식자) */
/* 의회 모달 위에서 열리므로 무조건 가장 높아야 합니다. */
#affinity-modal {
    z-index: 2147483647 !important; /* 32비트 정수 최댓값 (우주 끝까지) */
}


/* ❗️ [UI Fix] 배틀 화면 간격 및 판정표 최적화 */

/* 1. 피버 게이지와 판정표 사이 간격 삭제 */
#fever-gauge-container {
    margin-bottom: 2px !important; /* 아래 여백 최소화 */
}

/* 2. SBO 판정표(결과 박스) 크기 및 여백 축소 */
#guess-result-display.sbo-result-box {
    margin: 2px 5px 5px 5px !important; /* 위쪽 마진 최소화 */
    min-height: 30px !important; /* 높이 줄임 */
    padding: 4px 0 !important;
}

/* 3. 판정표 내부 전구(공/볼) 크기 축소 */
.sbo-result-light {
    width: 20px !important;  /* 기존 25px -> 20px */
    height: 20px !important;
    font-size: 12px !important;
    line-height: 18px !important; /* 수직 정렬 보정 */
    border-width: 1px !important;
}

/* 4. 배틀 입력창 전체 패딩 조절 */
#battle-input {
    padding-top: 0 !important; /* 상단 불필요한 여백 제거 */
}

/* 5. 슬라이더 컨테이너 높이 최적화 */
#sbo-sliders-container {
    height: 75px !important;
    margin-bottom: 0 !important;
}


#pet-interface-container {
    width: 100%;
    min-height: 400px; /* 최소 높이 확보 (내용이 없어도 공간 차지) */
    position: relative;
    z-index: 10; /* 내용물이 배경 뒤로 숨지 않게 */
    background-color: #f0f0f0; /* 배경색 지정해서 보이게 함 */
    border-radius: 8px;
    overflow: hidden; /* 자식 요소 튀어나옴 방지 */
}

/* 펫 이미지/이모지 강제 표시 */
.tama-pet-sprite {
    display: flex !important;
    justify-content: center;
    align-items: center;
    font-size: 5em;
    height: 150px;
}

/* 맵 하단 지형 정보창 드래그 방지 */
#map-terrain-info {
    user-select: none;           /* 표준 */
    -webkit-user-select: none;   /* 사파리/크롬 */
    -moz-user-select: none;      /* 파이어폭스 */
    -ms-user-select: none;       /* IE/엣지 */
    pointer-events: none;        /* (선택) 클릭 자체를 투과시키려면 추가 */
}

/* 맵 그리드 전체 드래그 방지 (꾹 눌러 이동할 때 쾌적함) */
#map-grid-container {
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation; /* 더블탭 확대 방지 등 터치 최적화 */
}

/* (선택) 게임 전체 텍스트 드래그 방지 (모바일 앱 느낌) */
/* 필요한 부분만 골라서 적용하세요 */
.no-select {
    user-select: none;
    -webkit-user-select: none;
}

/* ==========================================================================
   ❗️ [Final UI Polish] 터치 방지 / 모바일 최적화 / PC 정렬
   ========================================================================== */

/* 1. 전투 로그 텍스트 드래그(블록) 방지 */
#battle-log, #battle-log p {
    user-select: none !important;
    -webkit-user-select: none !important; /* 사파리/크롬 */
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    
    /* 터치 시 파란색 하이라이트 제거 */
    -webkit-tap-highlight-color: transparent;
}

/* 2. 좁은 모바일 화면 (폭 400px 이하) 대응: 버튼/텍스트 다이어트 */
@media (max-width: 400px) {
    /* 전투 버튼 (공격/방어/필살기) 크기 줄임 */
    #combat-action-row button {
        font-size: 0.9em !important;
        padding: 10px 5px !important; /* 패딩 축소 */
        min-width: auto !important;   /* 고정 너비 해제 */
    }

    /* SBO 슬라이더 더 얇게 */
    .sbo-slider-wrapper {
        margin-bottom: 2px !important;
        padding: 2px !important;
    }
    .sbo-range {
        height: 15px !important; /* 터치 영역은 유지하되 시각적으로 줄임 */
    }
    .sbo-value {
        font-size: 1em !important;
    }
    
    /* 상단 탭 버튼 (마을/던전) 글자 줄임 */
    .nav-tab-btn {
        font-size: 0.9em !important;
        padding: 8px !important;
    }
    
    /* 퀵슬롯 아이콘 크기 조절 */
    .quick-slot-btn {
        font-size: 0.8em !important;
        padding: 5px !important;
    }
}

/* 3. PC 버전 헤더 중앙 정렬 강제 (PC 화면에서만) */
@media (min-width: 601px) {
    #player-header-sticky {
        /* 화면 왼쪽 끝(0)이 아니라, 화면 정중앙(50%)에서 시작 */
        left: 50% !important;
        
        /* 자기 크기의 절반만큼 왼쪽으로 이동 -> 결과적으로 정중앙 위치 */
        transform: translateX(-50%) !important;
        
        /* 폭은 게임 화면 최대폭에 맞춤 */
        width: 100% !important;
        max-width: 600px !important;
        
        /* 위치 고정 속성 재확인 */
        position: fixed !important;
        top: 0 !important;
        margin: 0 !important; /* 마진 초기화 */
    }
}

/* 모바일에서도 헤더가 왼쪽으로 쏠리지 않게 안전장치 (전체 적용) */
#player-header-sticky {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: 600px !important;
}

.pulse-button {
    animation: pulse-gold 1.5s infinite;
}
@keyframes pulse-gold {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(241, 196, 15, 0.7); }
    70% { transform: scale(1.02); box-shadow: 0 0 0 10px rgba(241, 196, 15, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(241, 196, 15, 0); }
}

/* 대화 선택지 버튼 스타일 강화 */
.dialogue-choice-btn {
    width: 100%;
    padding: 12px;
    margin-bottom: 8px;
    text-align: left;
    
    /* ❗️ 배경은 흰색, 글자는 검은색으로 강제 지정 */
    background-color: #ffffff !important; 
    color: #333333 !important;
    
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    transition: background-color 0.2s, transform 0.1s;
}

/* 마우스 올렸을 때 */
.dialogue-choice-btn:hover {
    background-color: #e6f7ff !important; /* 연한 파랑 */
    border-color: #1890ff !important;
    transform: translateX(5px); /* 살짝 오른쪽 이동 효과 */
}

/* 대화 텍스트 박스 */
.dialogue-text-box {
    background-color: #f9f9f9 !important;
    color: #333 !important;
    border: 1px solid #ddd;
}

/* 대화 텍스트 박스 */
.dialogue-text-box {
    background-color: #f9f9f9 !important;
    color: #222 !important; /* 진한 회색 */
}

/* 대화 선택지 버튼 */
.dialogue-choice-btn {
    background-color: #fff !important;
    color: #000 !important; /* 완전 검정 */
    border: 1px solid #ccc;
}