* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 3840×2160 @ 150% = 2560×1440 기준, 비율 유지 축소(Scale to Fit) + 레터박스 */
/* PC/모바일 UI 크기 변수 분리 (유지보수용) */
:root {
    --game-width: 2560;
    --game-height: 1440;
    /* PC 전용 (desktop-ui 또는 min-width: 769px) */
    --pc-bottom-bar-height: 120px;
    --pc-touch-min: 28px;
}

html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

body {
    font-family: 'Malgun Gothic', '맑은 고딕', sans-serif;
    background: #000;
    color: #fff;
}

.letterbox {
    position: fixed;
    inset: 0;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.scale-wrapper {
    position: relative;
    flex-shrink: 0;
    transform-origin: center center;
    /* width/height는 JS에서 scale 적용해 설정 */
}

.container {
    width: calc(var(--game-width) * 1px);
    height: calc(var(--game-height) * 1px);
    position: relative;
    overflow: hidden;
    transform-origin: 0 0;
}

.screen {
    display: none;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.screen.active {
    display: block;
}

/* 게임 화면 활성 시 로비 UI 완전 제거 (이동 중·전투 중 포함 겹침 방지) */
body.game-view #lobbyScreen,
body.game-view .lobby-screen,
body.game-view [id^="lobby"],
body.game-view .lobby-container {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/* 배 이동 중·전투 중 캐릭터 선택창(접속/삭제) 절대 비노출 */
body[data-ship-or-battle] #lobbyScreen,
body[data-ship-or-battle] .lobby-actions {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ========== 캐릭터 선택(로비) 화면 - 리니지 스타일 ========== */
.lobby-screen {
    padding: 0;
    border-radius: 0;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    background: #0c0a08;
}

.lobby-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse 80% 60% at 50% 40%, rgba(40, 25, 15, 0.9) 0%, transparent 50%),
        linear-gradient(180deg, #1a1510 0%, #0d0b09 50%, #080606 100%);
    box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.8);
}

.lobby-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L30 60M0 30L60 30' stroke='%23ffd700' stroke-opacity='0.03' stroke-width='0.5' fill='none'/%3E%3C/svg%3E");
    pointer-events: none;
}

.lobby-container {
    position: relative;
    z-index: 1;
    padding: 24px;
    max-width: 1200px;
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lobby-title {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 32px;
    color: #ffd700;
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.6), 0 2px 4px rgba(0,0,0,0.8);
    margin-bottom: 20px;
    letter-spacing: 0.1em;
    -webkit-text-stroke: 1px rgba(0,0,0,0.5);
}

.lobby-layout {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    flex: 1;
    width: 100%;
    max-width: 900px;
}

/* 우측: 캐릭터 리스트 (세로 카드) */
.lobby-character-list-wrap {
    flex-shrink: 0;
    width: 220px;
    background: linear-gradient(180deg, rgba(30, 25, 20, 0.95) 0%, rgba(15, 12, 10, 0.98) 100%);
    border: 2px solid #c0c0c0;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 
        0 0 0 1px rgba(255, 215, 0, 0.2),
        inset 0 0 30px rgba(0, 0, 0, 0.5),
        0 4px 20px rgba(0, 0, 0, 0.6);
}

.lobby-list-header {
    font-family: 'Georgia', serif;
    font-size: 16px;
    color: #ffd700;
    text-align: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.4);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

.lobby-character-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 360px;
    overflow-y: auto;
}

.lobby-character-card {
    background: linear-gradient(180deg, rgba(50, 40, 30, 0.9) 0%, rgba(25, 20, 15, 0.95) 100%);
    border: 1px solid #8b7355;
    border-radius: 6px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

.lobby-character-card:hover {
    border-color: #ffd700;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.3);
    background: linear-gradient(180deg, rgba(60, 48, 35, 0.95) 0%, rgba(35, 28, 20, 0.98) 100%);
}

.lobby-character-card.selected {
    border-color: #ffd700;
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.5), inset 0 0 20px rgba(255, 215, 0, 0.08);
    background: linear-gradient(180deg, rgba(70, 55, 40, 0.95) 0%, rgba(40, 32, 24, 0.98) 100%);
}

.lobby-character-card .card-name {
    font-weight: bold;
    color: #ffd700;
    font-size: 14px;
    display: block;
    margin-bottom: 4px;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.3);
}

.lobby-character-card .card-detail {
    font-size: 12px;
    color: #c0c0c0;
}

/* 중앙: 선택한 캐릭터 초상화 */
.lobby-preview-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

.lobby-preview-frame {
    width: 280px;
    height: 340px;
    background: linear-gradient(180deg, rgba(20, 18, 15, 0.95) 0%, rgba(10, 8, 6, 0.98) 100%);
    border: 3px solid #c0c0c0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 0 0 1px rgba(255, 215, 0, 0.15),
        inset 0 0 40px rgba(0, 0, 0, 0.6),
        0 8px 32px rgba(0, 0, 0, 0.5);
    margin-bottom: 16px;
}

.lobby-portrait {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.lobby-no-selection {
    font-family: 'Georgia', serif;
    color: #6b5b4f;
    font-size: 16px;
}

.lobby-selected-info {
    font-family: 'Georgia', serif;
    color: #ffd700;
    font-size: 15px;
    margin-bottom: 16px;
    text-align: center;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}

.lobby-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.lobby-btn-enter {
    padding: 12px 28px;
    font-size: 16px;
    font-weight: bold;
    color: #1a1a1a;
    background: linear-gradient(180deg, #ffd700 0%, #b8860b 50%, #8b6914 100%);
    border: 2px solid #ffd700;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
    transition: all 0.2s;
}

.lobby-btn-enter:hover:not(:disabled) {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
    filter: brightness(1.1);
}

.lobby-btn-enter:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.lobby-btn-delete {
    padding: 12px 20px;
    font-size: 14px;
    color: #c0c0c0;
    background: rgba(60, 50, 45, 0.9);
    border: 2px solid #8b7355;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.lobby-btn-delete:hover:not(:disabled) {
    border-color: #a0522d;
    color: #e0a080;
}

.lobby-btn-delete:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.lobby-btn-create {
    width: 100%;
    margin-top: 12px;
    padding: 10px;
    font-size: 14px;
    color: #ffd700;
    background: rgba(40, 35, 28, 0.9);
    border: 1px solid #8b7355;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.lobby-btn-create:hover {
    border-color: #ffd700;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.lobby-btn-logout {
    margin-top: 16px;
    padding: 8px 20px;
    font-size: 13px;
    color: #a0a0a0;
    background: transparent;
    border: 1px solid #555;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.lobby-btn-logout:hover {
    color: #fff;
    border-color: #777;
}

/* 삭제 확인 모달 (로비) */
.lobby-delete-modal-content {
    background: linear-gradient(180deg, rgba(30, 25, 20, 0.98) 0%, rgba(18, 15, 12, 0.99) 100%);
    border: 2px solid #c0c0c0;
    box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.2);
}

.lobby-delete-modal .modal-header h2 {
    color: #ffd700;
}

.lobby-delete-confirm-text {
    color: #e0e0e0;
    font-size: 16px;
    margin-bottom: 8px;
}

.lobby-delete-name-hint {
    color: #c0a060;
    font-size: 14px;
}

.modal-btn-danger {
    background: linear-gradient(180deg, #8b0000 0%, #5c0000 100%);
    border-color: #a0522d;
    color: #ffcccb;
}

.modal-btn-danger:hover {
    background: linear-gradient(180deg, #a52a2a 0%, #6b0000 100%);
    box-shadow: 0 0 12px rgba(160, 82, 45, 0.4);
}

/* 캐릭터 생성 화면 스타일 */
.character-creation-screen {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0f0f0f 100%);
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

.character-creation-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(255, 215, 0, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(255, 215, 0, 0.03) 0%, transparent 50%);
    pointer-events: none;
}

.character-creation-container {
    display: flex;
    gap: 40px;
    padding: 40px;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* 좌측: 스탯 정보 창 */
.stats-panel {
    flex: 1;
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid #ffd700;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 
        0 0 20px rgba(255, 215, 0, 0.3),
        inset 0 0 30px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
}

.panel-header {
    text-align: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(255, 215, 0, 0.3);
}

.panel-header h2 {
    color: #ffd700;
    font-size: 28px;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    margin: 0;
    font-family: 'Malgun Gothic', '맑은 고딕', sans-serif;
}

.character-basic-info {
    margin-bottom: 30px;
}

.character-basic-info .form-group {
    margin-bottom: 0;
}

.character-basic-info label {
    display: block;
    color: #ffd700;
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 16px;
    font-family: 'Malgun Gothic', '맑은 고딕', sans-serif;
}

.lineage-input {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #8b6f47;
    border-radius: 5px;
    background: rgba(20, 20, 20, 0.9);
    color: #fff;
    font-size: 16px;
    font-family: 'Malgun Gothic', '맑은 고딕', sans-serif;
    transition: all 0.3s;
}

.lineage-input:focus {
    outline: none;
    border-color: #ffd700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
    background: rgba(30, 30, 30, 0.9);
}

.stats-allocation-panel h3 {
    color: #ffd700;
    font-size: 20px;
    margin-bottom: 20px;
    text-align: center;
    font-family: 'Malgun Gothic', '맑은 고딕', sans-serif;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.stats-container-lineage {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.stat-item-lineage {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    background: rgba(20, 20, 20, 0.6);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 5px;
    transition: all 0.3s;
}

.stat-item-lineage:hover {
    background: rgba(30, 30, 30, 0.8);
    border-color: rgba(255, 215, 0, 0.6);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
}

.stat-item-lineage label {
    font-weight: bold;
    color: #ffd700;
    min-width: 120px;
    font-size: 16px;
    font-family: 'Malgun Gothic', '맑은 고딕', sans-serif;
}

.stat-controls-lineage {
    display: flex;
    align-items: center;
    gap: 15px;
}

.stat-controls-lineage button {
    width: 35px;
    height: 35px;
    border: 2px solid #8b6f47;
    border-radius: 5px;
    background: linear-gradient(to bottom, #4a4a4a 0%, #2a2a2a 100%);
    color: #ffd700;
    cursor: pointer;
    font-weight: bold;
    font-size: 18px;
    transition: all 0.2s;
    font-family: 'Malgun Gothic', '맑은 고딕', sans-serif;
}

.stat-controls-lineage button:hover:not(:disabled) {
    background: linear-gradient(to bottom, #6a6a6a 0%, #4a4a4a 100%);
    border-color: #ffd700;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
    transform: scale(1.1);
}

.stat-controls-lineage button:active:not(:disabled) {
    transform: scale(0.95);
}

.stat-controls-lineage button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.stat-controls-lineage input {
    width: 80px;
    padding: 8px;
    text-align: center;
    border: 2px solid #8b6f47;
    border-radius: 5px;
    background: rgba(10, 10, 10, 0.9);
    color: #ffd700;
    font-size: 18px;
    font-weight: bold;
    font-family: 'Malgun Gothic', '맑은 고딕', sans-serif;
    transition: all 0.3s;
}

.stat-controls-lineage input:focus {
    outline: none;
    border-color: #ffd700;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

/* 수치 변경 애니메이션 */
@keyframes statChange {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); color: #fff; }
    100% { transform: scale(1); }
}

.stat-value-changed {
    animation: statChange 0.3s ease;
}

.points-info-lineage {
    display: flex;
    justify-content: space-around;
    padding: 20px;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(255, 215, 0, 0.4);
    border-radius: 8px;
    margin-top: 20px;
}

.points-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.points-label {
    color: #ccc;
    font-size: 14px;
    font-family: 'Malgun Gothic', '맑은 고딕', sans-serif;
}

.points-value {
    color: #ffd700;
    font-size: 32px;
    font-weight: bold;
    font-family: 'Malgun Gothic', '맑은 고딕', sans-serif;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    transition: all 0.3s;
}

/* 우측: 캐릭터 이미지 패널 */
.character-image-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.character-image-wrapper {
    position: relative;
    width: 400px;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.character-image-glow {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(255, 215, 0, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    animation: glowPulse 3s ease-in-out infinite;
    z-index: 1;
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.1); }
}

.character-image {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    z-index: 2;
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.3));
    transition: all 0.3s;
}

.character-image-shadow {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 30px;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.6) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
}

.character-info-display {
    margin-top: 30px;
    text-align: center;
}

.selected-class {
    color: #ffd700;
    font-size: 24px;
    font-weight: bold;
    font-family: 'Malgun Gothic', '맑은 고딕', sans-serif;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    padding: 15px 30px;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(255, 215, 0, 0.4);
    border-radius: 8px;
}

/* 하단: 클래스 및 성별 선택 */
.selection-panel {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    padding: 30px 40px;
    background: rgba(0, 0, 0, 0.7);
    border-top: 2px solid rgba(255, 215, 0, 0.3);
    position: relative;
    z-index: 1;
}

.class-selection,
.gender-selection {
    flex: 1;
    text-align: center;
}

.class-selection h3,
.gender-selection h3 {
    color: #ffd700;
    font-size: 20px;
    margin-bottom: 20px;
    font-family: 'Malgun Gothic', '맑은 고딕', sans-serif;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.class-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

.class-btn {
    padding: 12px 25px;
    border: 2px solid #8b6f47;
    border-radius: 5px;
    background: linear-gradient(to bottom, #3a3a3a 0%, #1a1a1a 100%);
    color: #ccc;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    font-family: 'Malgun Gothic', '맑은 고딕', sans-serif;
}

.class-btn:hover {
    background: linear-gradient(to bottom, #5a5a5a 0%, #3a3a3a 100%);
    border-color: #ffd700;
    color: #ffd700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
    transform: translateY(-2px);
}

.class-btn.active {
    background: linear-gradient(to bottom, #ffd700 0%, #ccaa00 100%);
    border-color: #ffd700;
    color: #000;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
    font-weight: bold;
}

.gender-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.gender-btn {
    padding: 15px 40px;
    border: 2px solid #8b6f47;
    border-radius: 5px;
    background: linear-gradient(to bottom, #3a3a3a 0%, #1a1a1a 100%);
    color: #ccc;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    font-family: 'Malgun Gothic', '맑은 고딕', sans-serif;
    min-width: 120px;
}

.gender-btn:hover {
    background: linear-gradient(to bottom, #5a5a5a 0%, #3a3a3a 100%);
    border-color: #ffd700;
    color: #ffd700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
    transform: translateY(-2px);
}

.gender-btn.active {
    background: linear-gradient(to bottom, #ffd700 0%, #ccaa00 100%);
    border-color: #ffd700;
    color: #000;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}

/* 캐릭터 생성 버튼 */
.create-button-container {
    text-align: center;
    padding: 30px;
    position: relative;
    z-index: 1;
}

.btn-create-character {
    position: relative;
    padding: 20px 60px;
    border: 3px solid #ffd700;
    border-radius: 8px;
    background: linear-gradient(to bottom, #ffd700 0%, #ccaa00 100%);
    color: #000;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer !important;
    transition: all 0.3s;
    font-family: 'Malgun Gothic', '맑은 고딕', sans-serif;
    overflow: hidden;
    box-shadow: 
        0 0 30px rgba(255, 215, 0, 0.5),
        inset 0 2px 10px rgba(255, 255, 255, 0.3);
    z-index: 1000;
    pointer-events: auto !important;
}

.btn-create-character::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.btn-create-character:hover:not(:disabled)::before {
    left: 100%;
}

.btn-create-character:hover:not(:disabled) {
    background: linear-gradient(to bottom, #ffed4e 0%, #ffd700 100%);
    box-shadow: 
        0 0 40px rgba(255, 215, 0, 0.8),
        inset 0 2px 10px rgba(255, 255, 255, 0.4);
    transform: translateY(-3px) scale(1.05);
}

.btn-create-character:active:not(:disabled) {
    transform: translateY(-1px) scale(1.02);
}

.btn-create-character:disabled {
    background: linear-gradient(to bottom, #666 0%, #444 100%);
    border-color: #666;
    color: #999;
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.5;
}

.btn-text {
    position: relative;
    z-index: 1;
}

.btn-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.6) 0%, transparent 70%);
    border-radius: 50%;
    transition: width 0.3s, height 0.3s;
}

.btn-create-character:hover:not(:disabled) .btn-glow {
    width: 200px;
    height: 200px;
}

/* 반응형 대응 */
@media (max-width: 1200px) {
    .character-creation-container {
        flex-direction: column;
        align-items: center;
    }
    
    .stats-panel,
    .character-image-panel {
        width: 100%;
        max-width: 600px;
    }
    
    .character-image-wrapper {
        width: 300px;
        height: 400px;
    }
}

h1 {
    text-align: center;
    margin-bottom: 30px;
    color: #ffd700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

h2, h3 {
    color: #ffd700;
    margin-bottom: 15px;
}

.character-form {
    max-width: 600px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #ccc;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 10px;
    border: 2px solid #444;
    border-radius: 5px;
    background: #222;
    color: #fff;
    font-size: 16px;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: #ffd700;
}

.class-info {
    background: #1a1a1a;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
    border-left: 4px solid #ffd700;
}

.class-info h4 {
    color: #ffd700;
    margin-bottom: 10px;
}

.class-info .stat-line {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid #333;
}

.class-info .stat-line:last-child {
    border-bottom: none;
}

.stats-allocation {
    margin-top: 30px;
    padding: 20px;
    background: #1a1a1a;
    border-radius: 5px;
}

.stats-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 15px;
}

.stat-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background: #222;
    border-radius: 5px;
}

.stat-item label {
    font-weight: bold;
    color: #ccc;
    min-width: 80px;
}

.stat-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stat-controls button {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 3px;
    background: #444;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.2s;
}

.stat-controls button:hover:not(:disabled) {
    background: #555;
}

.stat-controls button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.stat-controls input {
    width: 60px;
    padding: 5px;
    text-align: center;
    border: 2px solid #444;
    border-radius: 3px;
    background: #111;
    color: #fff;
}

.points-info {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background: #222;
    border-radius: 5px;
    margin-top: 15px;
}

.points-info strong {
    color: #ffd700;
    font-size: 18px;
}

.btn {
    padding: 12px 30px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 20px;
}

.btn-primary {
    background: #ffd700;
    color: #000;
    width: 100%;
}

.btn-primary:hover:not(:disabled) {
    background: #ffed4e;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(255, 215, 0, 0.3);
}

.btn-primary:disabled {
    background: #666;
    cursor: not-allowed;
    opacity: 0.5;
}

.btn-action {
    background: #4CAF50;
    color: #fff;
    padding: 15px 30px;
    font-size: 18px;
    margin: 10px;
}

.btn-action:hover:not(:disabled) {
    background: #45a049;
    transform: scale(1.05);
}

.btn-action:disabled {
    background: #666;
    cursor: not-allowed;
    opacity: 0.5;
}

.result-message {
    margin-top: 15px;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
}

.result-message.success {
    background: #4CAF50;
    color: #fff;
}

.result-message.error {
    background: #f44336;
    color: #fff;
}

/* 게임 화면 */
.game-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #444;
}

.character-info {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 10px;
}

.character-info span {
    color: #ccc;
    font-size: 14px;
}

.character-info strong {
    color: #ffd700;
}

/* 장비 및 내 정보 창 (좌측 하단) */
.equipment_window {
    background-image: url('/images/ui/equipment_window.jpg');
    background-size: 100% 100%;
    width: 450px;
    height: 650px;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    display: none; /* 초기엔 숨김 */
}

/* 닫기 영역 (우측 상단 클릭 가능 영역) */
.equipment-close-area {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index: 1001;
}

/* 내정보 창 안 장비 칸 (전체 영역 위치: left/top 수정 시 11칸 전체 이동) */
.equipment-slots-inner {
    position: absolute;
    left: 12px;
    top: 12px;
    width: 260px;
    height: 180px;
    z-index: 10;
}
.equip-slot-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.equip-slot-label {
    display: none; /* 장비 슬롯 텍스트 라벨 제거 - 아이콘+강화수치만 표시 */
    font-size: 11px;
    color: #FFD700;
    text-shadow: 1px 1px 1px #000;
}
.equip-slot {
    width: 60px;
    height: 60px;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,215,0,0.5);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 내정보 각 장비 슬롯 안의 아이템 이미지 (95px에서 40% 축소 → 약 57px) */
.equip-slot-img {
    width: 57px;
    height: 57px;
    max-width: 57px;
    max-height: 57px;
    object-fit: contain;
}
/* 장비 강화 수치 뱃지 (+N) */
.equip-slot-enhance {
    position: absolute;
    right: 2px;
    bottom: 2px;
    font-size: 11px;
    font-weight: bold;
    color: #ffd700;
    text-shadow: 0 0 1px #000, 0 1px 2px #000;
    pointer-events: none;
}
.equip-slot {
    position: relative;
}

/* 장비 칸 개별 위치 (내정보 창) - 각 left/top 값만 수정하면 됨. 확인: http://localhost:3001 접속 후 내정보 버튼 클릭 */
.equipment-slots-inner {
    position: relative;
}
.equipment-slots-inner .equip-slot-wrap[data-slot="main_hand"] {
    position: absolute;
    left: 157px;
    top: 329px;
}
.equipment-slots-inner .equip-slot-wrap[data-slot="off_hand"] {
    position: absolute;
    left: 367px;
    top: 275px;
}
.equipment-slots-inner .equip-slot-wrap[data-slot="armor"] {
    position: absolute;
    left: 275px;
    top: 187px;
}
.equipment-slots-inner .equip-slot-wrap[data-slot="cloak"] {
    position: absolute;
    left: 333px;
    top: 187px; 
}
.equipment-slots-inner .equip-slot-wrap[data-slot="necklace"] {
    position: absolute;
    left: 266px !important;
    top: 110px;
}
.equipment-slots-inner .equip-slot-wrap[data-slot="ring1"] {
    position: absolute;
    left: 150px;
    top: 260px;
}
.equipment-slots-inner .equip-slot-wrap[data-slot="ring2"] {
    position: absolute;
    left: 366px;
    top: 343px;
}
.equipment-slots-inner .equip-slot-wrap[data-slot="belt"] {
    position: absolute;
    left: 294px;
    top: 252px;
}
.equipment-slots-inner .equip-slot-wrap[data-slot="boots"] {
    position: absolute;
    left: 360px;
    top: 512px;
}
.equipment-slots-inner .equip-slot-wrap[data-slot="gloves"] {
    position: absolute;
    left: 214px;
    top: 304px;
}
.equipment-slots-inner .equip-slot-wrap[data-slot="helm"] {
    position: absolute;
    left: 327px;
    top: 70px;
}
.equipment-slots-inner .equip-slot-wrap[data-slot="tshirt"] {
    position: absolute;
    left: 215px;
    top: 187px;
}

/* 스탯 텍스트 스타일 (공통) */
.equipment_window span {
    position: absolute;
    color: #FFD700;
    font-weight: bold;
    font-size: 14px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}

/* 각 스탯 위치 (이미지에 맞춰 조정 필요) */
.stat-level {
    left: 150px;
    top: 80px;
}

.stat-hp {
    left: 150px;
    top: 120px;
}

.stat-mp {
    left: 150px;
    top: 160px;
}

.stat-ac {
    left: 150px;
    top: 200px;
}

.stat-pk {
    left: 150px;
    top: 240px;
}

.stat-str {
    left: 150px;
    top: 300px;
}

.stat-dex {
    left: 150px;
    top: 340px;
}

.stat-con {
    left: 150px;
    top: 380px;
}

.stat-int {
    left: 300px;
    top: 300px;
}

.stat-wis {
    left: 300px;
    top: 340px;
}

.stat-cha {
    left: 300px;
    top: 380px;
}

.stat-gr {
    left: 150px;
    top: 450px;
}

.stat-wr {
    left: 150px;
    top: 490px;
}

.stat-fr {
    left: 300px;
    top: 450px;
}

.stat-mr {
    left: 400px;
    top: 470px;
}

.stat-er {
    left: 300px;
    top: 490px;
}

.stat-mb {
    left: 300px;
    top: 560px;
}

/* 장비창 옆 캐릭터 이미지 */
.equipment-character-image {
    position: absolute;
    left: 450px; /* 장비창 오른쪽 옆 */
    top: 0;
    width: 200px;
    height: 300px;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid #FFD700;
    border-radius: 8px;
    padding: 10px;
}

.equipment-character-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
}

/* 인벤토리 창 (리니지풍) */
.inventory-window-lineage {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.inventory-window-lineage .inventory-window-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    pointer-events: auto;
}
.inventory-window-lineage .inventory-window-frame {
    position: relative;
    width: 420px;
    max-width: 92vw;
    max-height: 85vh;
    background: linear-gradient(180deg, rgba(45, 35, 25, 0.98) 0%, rgba(25, 18, 12, 0.99) 100%);
    border: 3px solid #8b7355;
    border-radius: 12px;
    box-shadow:
        inset 0 0 60px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 215, 0, 0.2),
        0 8px 32px rgba(0, 0, 0, 0.8);
    pointer-events: auto;
    display: flex;
    flex-direction: column;
}
.inventory-window-lineage .inventory-window-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(180deg, rgba(80, 60, 40, 0.9) 0%, rgba(50, 38, 28, 0.95) 100%);
    border-bottom: 2px solid #ffd700;
    border-radius: 10px 10px 0 0;
}
.inventory-window-lineage .inventory-window-title {
    font-family: Georgia, 'Malgun Gothic', serif;
    font-size: 18px;
    font-weight: bold;
    color: #ffd700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.5), 0 1px 2px rgba(0,0,0,0.8);
}
.inventory-window-lineage .inventory-window-close {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #8b7355;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.5);
    color: #ffd700;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s;
}
.inventory-window-lineage .inventory-window-close:hover {
    background: rgba(255, 215, 0, 0.2);
    border-color: #ffd700;
}
.inventory-window-lineage .inventory-window-footer {
    padding: 8px 16px;
    font-size: 11px;
    color: #b8a080;
    text-align: center;
    border-top: 1px solid #5a4a35;
    border-radius: 0 0 10px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
}
.inventory-trash-zone {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: rgba(0,0,0,0.4);
    border: 1px solid #5a4a35;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    pointer-events: auto;
    position: relative;
    z-index: 100;
}
.inventory-trash-zone:hover {
    background: rgba(139,0,0,0.3);
    border-color: #8b4513;
}
.inventory-trash-zone.inventory-trash-drag-over {
    background: rgba(139,0,0,0.5);
    border-color: #ff6b6b;
}
.discard-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.discard-confirm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    cursor: pointer;
}
.discard-confirm-frame {
    position: relative;
    z-index: 1;
    padding: 20px;
    min-width: 260px;
}
.discard-confirm-message {
    margin: 0 0 8px;
    font-size: 14px;
    color: #e8dcc4;
}
.discard-confirm-item {
    margin: 0 0 16px;
    font-size: 12px;
    color: #b8a080;
}
.discard-confirm-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.discard-confirm-buttons .modal-btn {
    padding: 6px 14px;
}

/* 인벤토리 닫기 (기존 ID 호환) */
#closeInventoryArea.inventory-window-close {
    cursor: pointer;
}

/* 마법 창: tier 1~10 필터 */
.skill-window-inner {
    position: absolute;
    top: 60px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    overflow: auto;
}
.skill-tier-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.skill-tier-btn {
    padding: 6px 12px;
    background: rgba(0,0,0,0.5);
    border: 1px solid #8b6f47;
    color: #e8dcc4;
    cursor: pointer;
    border-radius: 4px;
}
.skill-tier-btn:hover, .skill-tier-btn.active {
    border-color: #ffd700;
    background: rgba(255,215,0,0.15);
}
.skill-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.skill-item {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(139,111,71,0.5);
    color: #e8dcc4;
    display: flex;
    align-items: center;
    gap: 10px;
}
.skill-item .skill-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}
.skill-item .skill-name { font-weight: bold; }
.skill-item .skill-meta { color: #aaa; font-size: 0.9em; margin-left: 8px; }

/* 인벤토리 그리드 (리니지풍) */
.inventory-grid-lineage,
.inventory-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(10, 1fr);
    gap: 6px;
    padding: 16px;
    flex: 1;
    min-height: 0;
    overflow: auto;
}
.inventory-window-lineage .inventory-grid-lineage {
    padding: 16px;
}

.inventory-slot {
    aspect-ratio: 1;
    min-width: 0;
    min-height: 0;
    background: linear-gradient(180deg, rgba(30, 22, 15, 0.95) 0%, rgba(15, 10, 8, 0.98) 100%);
    border: 2px solid #6b5344;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}
.inventory-slot:hover {
    border-color: #ffd700;
    background: linear-gradient(180deg, rgba(60, 48, 32, 0.95) 0%, rgba(40, 32, 22, 0.98) 100%);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.35), inset 0 1px 2px rgba(0,0,0,0.4);
}
.inventory-slot.has-item {
    border-color: #a08050;
    background: linear-gradient(180deg, rgba(50, 40, 28, 0.95) 0%, rgba(28, 22, 15, 0.98) 100%);
}
.inventory-slot.has-item:hover {
    border-color: #ffd700;
}
.inventory-slot.inventory-dragging {
    opacity: 0.6;
}
.inventory-slot.inventory-drag-over {
    border-color: #4ade80;
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.5);
}
.inventory-slot.selected-arrow {
    border: 2px solid #4ade80;
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.5);
}
/* 인벤토리·장비 아이템 이미지: 원래 크기(57px) */
.inventory-slot img,
.inventory-slot .item-icon {
    width: 57px;
    height: 57px;
    max-width: 57px;
    max-height: 57px;
    object-fit: contain;
    position: relative;
    z-index: 1;
}
.inventory-slot-qty {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    padding: 2px 4px;
    font-size: 11px;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    background: rgba(0, 0, 0, 0.75);
    border-radius: 4px;
    text-align: center;
    text-shadow: 0 0 2px #000, 0 1px 2px #000;
    z-index: 10;
    pointer-events: none;
}
/* 강화 수치 +N 뱃지: 이미지 하단 중앙 */
.inventory-slot-enhance {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: bold;
    color: #ffd700;
    text-shadow: 0 0 2px #000, 0 1px 2px #000;
    pointer-events: none;
    z-index: 10;
}
/* 장착됨 뱃지: 이미지 앞에 보이도록 z-index 높게 */
.inventory-slot-equipped {
    position: absolute;
    top: 2px;
    left: 2px;
    font-size: 9px;
    font-weight: bold;
    color: #ffd700;
    background: rgba(0, 0, 0, 0.7);
    padding: 1px 4px;
    border-radius: 2px;
    text-shadow: 0 0 1px #000;
    pointer-events: none;
    z-index: 10;
}

/* ========== 하단 통합 바 (리니지 정통 스타일) ========== */
/* 좌측 하단 마법 퀵슬롯 (습득 마법만 아이콘, 턴/쿨타임 적용) */
.magic-quickslot {
    position: fixed;
    bottom: 124px;
    left: 8px;
    z-index: 100;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid #8b6f47;
    border-radius: 8px;
    padding: 6px 8px;
    min-width: 52px;
}
.magic-quickslot-label {
    font-size: 10px;
    color: #ffd700;
    margin-bottom: 4px;
    text-align: center;
}
.magic-quickslot-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 120px;
    justify-content: center;
}
.magic-quickslot-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #8b6f47;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.6);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.magic-quickslot-btn:hover:not(:disabled) {
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.15);
}
.magic-quickslot-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    filter: grayscale(0.8);
}
.magic-quickslot-btn img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}
.magic-cooldown-hint {
    font-size: 9px;
    color: #ff6b6b;
    margin-top: 4px;
    text-align: center;
}

/* ========== 좌측 하단: 파티 HUD (본인 HP/MP 바 바로 위, 항상 표시) — 1.5배 크기 ========== */
.party-status-hud {
    position: fixed;
    bottom: 124px; /* 스테이터스 바(120px) 바로 위 + 4px 여백 */
    left: 8px;
    z-index: 1000;
    width: 210px;   /* 140 * 1.5 */
    max-height: 270px; /* 180 * 1.5 */
    overflow-y: auto;
    background: linear-gradient(180deg, rgba(20, 18, 12, 0.95) 0%, rgba(10, 8, 6, 0.98) 100%);
    border: 1px solid #8b6f47;
    border-radius: 6px;
    padding: 9px 12px; /* 6*1.5, 8*1.5 */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
.party-status-hud-title {
    font-size: 15px; /* 10 * 1.5 */
    color: #ffd700;
    font-weight: bold;
    margin-bottom: 9px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.3);
    text-align: center;
}
.party-status-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.party-status-entry {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 6px 9px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid #6b5344;
    border-radius: 4px;
    font-size: 15px; /* 10 * 1.5 */
}
.party-status-entry .party-entry-name {
    color: #e0e0e0;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.party-status-entry .party-entry-bars {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.party-status-entry .party-hp-bar-wrap,
.party-status-entry .party-mp-bar-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px; /* 8 * 1.5 */
    color: #aaa;
}
.party-status-entry .party-num-text {
    font-size: 1.05rem; /* 0.7 * 1.5 */
    color: #ccc;
    min-width: 2.5em;
    text-align: right;
}
.party-status-entry .party-hp-bar,
.party-status-entry .party-mp-bar {
    flex: 1;
    min-width: 0;
    height: 9px; /* 6 * 1.5 */
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid #5a4a3a;
    border-radius: 2px;
    overflow: hidden;
}
.party-status-entry .party-hp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #cc2222 0%, #aa0000 100%);
    transition: width 0.25s ease;
}
.party-leave-btn {
    margin-top: 9px;
    padding: 6px 12px;
    font-size: 1.05rem;
    background: #4a5568;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.party-leave-btn:hover {
    background: #2d3748;
}

.party-status-entry .party-mp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #2266cc 0%, #0044aa 100%);
    transition: width 0.25s ease;
}

.party-total-row {
    border-top: 1px solid rgba(255,255,255,0.3);
    margin-top: 6px;
    padding-top: 6px;
}
.party-total-row .party-entry-name {
    font-weight: bold;
}
.party-total-text {
    font-size: 1.05rem;
    margin-left: 6px;
}

/* ========== 중앙 몬스터 뷰 (전투 시 화면 정중앙) ========== */
.battle-monster-view {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 500;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.battle-monster-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    max-width: 90%;
}
/* 2마리 이상: 중앙 양옆(가로) 배치 */
.battle-monster-list.battle-monster-list-horizontal {
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: center;
    gap: 24px;
}
.battle-monster-list .monster-slot {
    position: relative;
    width: 640px;
    height: 720px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: visible;
}
.battle-monster-list.battle-monster-list-horizontal .monster-slot {
    width: 640px;
    height: 720px;
    overflow: visible;
}
/* 4~5마리: 슬롯 축소하여 화면에 맞춤 */
.battle-monster-list.battle-monster-list-many .monster-slot {
    width: 280px;
    height: 360px;
}
.battle-monster-list.battle-monster-list-many .monster-slot img.monster-img {
    min-width: 180px;
    min-height: 200px;
}
.battle-monster-list .monster-slot-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 100%;
    overflow: visible;
}
/* 몬스터 1마리·2마리+ 공통: 이미지 → 이름 → HP바 (이미지 바로 하단) */
.battle-monster-list:not(.battle-monster-list-horizontal) .monster-slot-inner {
    justify-content: flex-start;
    padding-top: 5%;
}
.battle-monster-list:not(.battle-monster-list-horizontal) .monster-slot {
    align-items: center;
}
.battle-monster-list .monster-slot img.monster-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    min-width: 380px;
    min-height: 420px;
    transition: opacity 0.5s ease, transform 0.1s ease;
}
.battle-monster-list.battle-monster-list-horizontal .monster-slot img.monster-img {
    min-width: 380px;
    min-height: 420px;
}
.battle-monster-list .monster-name-level {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 3px #000, 0 1px 4px #000, 0 2px 6px #000;
    margin-top: 6px;
    margin-bottom: 4px;
    position: relative;
    z-index: 10;
    flex-shrink: 0;
    opacity: 1;
    visibility: visible;
}
.battle-monster-list .monster-hp-bar {
    width: 100%;
    max-width: 280px;
    height: 24px;
    margin-top: 8px;
    flex-shrink: 0;
    opacity: 1;
    visibility: visible;
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid #6b5344;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
/* 몬스터 이미지 바로 하단에 이름·HP바 표시 (1마리/2마리+ 동일) */
.battle-monster-list .monster-hp-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, #8b2020, #cc4444);
    border-radius: 4px;
    transition: width 0.2s ease;
}
.battle-monster-list .monster-hp-bar-text {
    position: relative;
    z-index: 1;
    width: 100%;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 2px #000, 0 1px 2px #000;
}
/* 몬스터 슬롯 공격 버튼 (이미지·HP바 하단, 리니지 스타일) */
.battle-monster-list .monster-attack-btn-wrap {
    margin-top: 10px;
    flex-shrink: 0;
    pointer-events: auto;
}
.battle-monster-list .monster-attack-btn {
    pointer-events: auto;
    padding: 8px 18px;
    font-size: 14px;
    min-height: 32px;
    line-height: 1.2;
    border-radius: 6px;
    border: 2px solid #c9a227;
    background: linear-gradient(180deg, rgba(80, 60, 35, 0.95) 0%, rgba(50, 38, 22, 0.98) 100%);
    color: #ffd700;
    cursor: pointer;
    font-weight: bold;
    font-family: 'Malgun Gothic', '맑은 고딕', sans-serif;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.2s;
}
.battle-monster-list .monster-attack-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, rgba(100, 75, 45, 0.98) 0%, rgba(65, 50, 30, 1) 100%);
    border-color: #e6c84a;
    color: #fff;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
}
.battle-monster-list .monster-attack-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(0.4);
}
.battle-monster-list .monster-slot img.monster-img.shake {
    animation: monster-shake 0.3s ease-in-out;
}
/* 제자리·크기 유지: translateY, scale은 CSS 변수로 보존 (피격 시 이미지 크기 변화 방지). 단일 몬스터는 64px(하단 10% 내림) */
@keyframes monster-shake {
    0%, 100% { transform: translateX(0) translateY(var(--monster-translate-y, 64px)) scale(var(--monster-scale, 1.2)); }
    20% { transform: translateX(-6px) translateY(var(--monster-translate-y, 64px)) scale(var(--monster-scale, 1.2)); }
    40% { transform: translateX(6px) translateY(var(--monster-translate-y, 64px)) scale(var(--monster-scale, 1.2)); }
    60% { transform: translateX(-4px) translateY(var(--monster-translate-y, 64px)) scale(var(--monster-scale, 1.2)); }
    80% { transform: translateX(4px) translateY(var(--monster-translate-y, 64px)) scale(var(--monster-scale, 1.2)); }
}
.battle-monster-list .monster-slot.pvp-opponent-slot .pvp-opponent-avatar {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
    border-radius: 50%;
    margin-bottom: 8px;
}
.battle-monster-list .monster-slot.pvp-opponent-slot .pvp-opponent-icon {
    font-size: 48px;
}
.battle-monster-list .monster-slot.pvp-opponent-slot .pvp-opponent-name {
    font-size: 1.1rem;
    font-weight: bold;
    color: #e53e3e;
    margin-bottom: 4px;
}

.battle-monster-list .monster-slot img.monster-img.fade-out {
    animation: monster-fade-out 0.6s ease forwards;
}
@keyframes monster-fade-out {
    to { opacity: 0; transform: scale(0.8); }
}

/* 공격 이펙트: 몬스터 이미지와 같은 위치에 겹쳐 표시 */
.battle-monster-list .monster-slot .attack-hit-effect {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    object-fit: contain;
    z-index: 50;
    pointer-events: none;
}

/* ========== 사망 시 '마을로 돌아간다' 오버레이 ========== */
.death-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}
.death-overlay-inner {
    text-align: center;
    padding: 32px;
    background: linear-gradient(180deg, #2a1f1a 0%, #1a1210 100%);
    border: 2px solid #8b6914;
    border-radius: 12px;
    box-shadow: 0 0 24px rgba(139, 105, 20, 0.4);
}
.death-overlay-text {
    font-size: 22px;
    font-weight: bold;
    color: #FFD700;
    text-shadow: 1px 1px 2px #000;
    margin: 0 0 24px 0;
}
.death-respawn-btn {
    padding: 12px 28px;
    font-size: 16px;
    font-weight: bold;
    color: #1a1210;
    background: linear-gradient(180deg, #FFD700 0%, #b8860b 100%);
    border: 2px solid #8b6914;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.death-respawn-btn:hover {
    background: linear-gradient(180deg, #ffe44d 0%, #daa520 100%);
}

/* ========== 레벨업 이펙트 ========== */
.level-up-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    pointer-events: none;
}
.level-up-inner {
    text-align: center;
}
.level-up-text {
    font-size: clamp(2rem, 8vw, 4rem);
    font-weight: bold;
    color: #ffd700;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.9), 0 0 40px rgba(255, 200, 0, 0.6);
    animation: level-up-pop 1.2s ease-out forwards;
    display: inline-block;
}
@keyframes level-up-pop {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }
    50% {
        transform: scale(1.15);
        opacity: 1;
    }
    70% {
        transform: scale(0.95);
    }
    85% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
.level-up-overlay.level-up-flash {
    animation: level-up-bg-flash 1.5s ease-out forwards;
}
@keyframes level-up-bg-flash {
    0% {
        background: rgba(255, 215, 0, 0.25);
    }
    30% {
        background: rgba(255, 215, 0, 0.08);
    }
    100% {
        background: transparent;
    }
}

/* ========== 캐릭터 피격 이펙트 ========== */
.hit-effect-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
    background: transparent;
    opacity: 0;
}
.hit-effect-overlay.hit-flash {
    animation: hit-flash 0.4s ease-out forwards;
}
@keyframes hit-flash {
    0% {
        background: rgba(180, 0, 0, 0.45);
        opacity: 1;
    }
    50% {
        background: rgba(200, 0, 0, 0.2);
        opacity: 0.6;
    }
    100% {
        background: transparent;
        opacity: 0;
    }
}

/* ========== 드랍 아이템 연출 (몬스터 위치에서 위로 솟구침) ========== */
.battle-drop-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 105;
    pointer-events: none;
    text-align: center;
}
.battle-drop-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-bottom: 8px;
}
.battle-drop-list .drop-item {
    animation: drop-rise 1.2s ease-out forwards;
    opacity: 0;
}
.battle-drop-list .drop-item img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}
.battle-drop-message {
    color: #ffd700;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
    animation: drop-rise 1s ease-out 0.2s forwards;
    opacity: 0;
}
@keyframes drop-rise {
    0% { opacity: 0; transform: translateY(0) scale(0.5); }
    30% { opacity: 1; transform: translateY(-30px) scale(1.1); }
    100% { opacity: 1; transform: translateY(-80px) scale(1); }
}

/* ========== 하단: 채팅창·전투 UI (스테이터스 바 바로 위) ========== */
.battle-chat-row {
    position: fixed;
    bottom: 115px;
    left: 0;
    right: 0;
    height: 260px;
    display: flex;
    align-items: flex-end;
    z-index: 999;
    padding: 0 12px;
    box-sizing: border-box;
}
.left-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    flex-shrink: 0;
    margin-right: 10px;
}
.battle-control-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    align-content: center;
    width: 140px;
    min-width: 140px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid #ffd700;
    border-radius: 8px;
}
.battle-control-panel .battle-action-btn {
    padding: 6px 10px;
    font-size: 11px;
}
/* 채팅창: 화면 정중앙 고정, 가로폭 50% (스테이터스 바 바로 위) */
.battle-chat-row .chat-window {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 50%;
    min-width: 280px;
    max-width: none;
    height: 260px;
    flex: none;
}
/* 파티/펫 HUD: 전투 시에만 표시 (비전투 시 숨김) — 1.5배 크기 */
.party-hud-container {
    display: none;
    flex-direction: column;
    gap: 9px;
    min-width: 210px;   /* 140 * 1.5 */
    max-height: 210px;   /* 140 * 1.5 */
    overflow-y: auto;
    padding: 12px;
    background: rgba(0, 0, 0, 0.72);
    border: 1px solid #8b6f47;
    border-radius: 8px;
    box-sizing: border-box;
}
.party-hud-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.party-hud-slot {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 6px 9px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    border: 1px solid #5a4a30;
    font-size: 15px; /* 10 * 1.5 */
    color: #e8d4a0;
}
.party-hud-slot .party-hud-name {
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px; /* 120 * 1.5 */
}
.party-hud-slot .party-hud-bars {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.party-hud-slot .party-hud-hp,
.party-hud-slot .party-hud-mp {
    height: 9px; /* 6 * 1.5 */
    min-width: 120px; /* 80 * 1.5 */
    background: rgba(0, 0, 0, 0.6);
    border-radius: 2px;
    overflow: hidden;
}
.party-hud-slot .party-hud-hp,
.party-hud-slot .party-hud-mp {
    display: flex;
    align-items: center;
    gap: 6px;
}
.party-hud-slot .party-hud-num {
    font-size: 0.975rem; /* 0.65 * 1.5 */
    color: #ccc;
    min-width: 2.2em;
}
.party-hud-slot .party-hud-hp .fill {
    height: 100%;
    flex: 1;
    min-width: 0;
    background: linear-gradient(90deg, #cc2222, #ff4444);
    border-radius: 2px;
    transition: width 0.15s ease;
}
.party-hud-slot .party-hud-mp .fill {
    height: 100%;
    flex: 1;
    min-width: 0;
    background: linear-gradient(90deg, #2244aa, #4488ff);
    border-radius: 2px;
    transition: width 0.15s ease;
}

/* ========== 상시 노출: 내 정보·인벤토리·마법 버튼 + 최하단 HP/MP 바 (비전투/전투 모두 표시) ========== */
/* #statusBar, #partyStatusHud는 기본 display 유지 (항상 표시) */

/* ========== 전투 시에만 숨김: 이동 가능한 장소 가이드 ========== */
/* 배 항해 중에도 이동 가능한 장소 UI 숨김 */
body[data-ship-or-battle] #mapNavigation {
    display: none !important;
}
body.battle-mode #mapNavigation,
body.battle-mode #equipment_window,
body.battle-mode .game-ui-overlay {
    display: none !important;
}
/* 버프 HUD는 전투 중에도 좌측상단에 표시 (battle-mode에서 숨기지 않음) */
body.battle-mode #inventory_window {
    display: none !important;
}
body.battle-mode #inventory_window.inventory-open-in-battle {
    display: flex !important;
    z-index: 1100;
}
body.battle-mode .map-background {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
body.battle-mode .battle-chat-row {
    bottom: 115px;
    left: 0;
    right: 0;
    height: 280px;
    align-items: stretch;
    padding: 12px 16px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.6) 40%, transparent 100%);
}
body.battle-mode .battle-chat-row .left-panel.battle-status-panel {
    flex-direction: column-reverse;
    justify-content: flex-end;
    min-width: 200px;
    max-width: 220px;
    margin-right: 12px;
}
/* 전투 시에도 파티는 좌측 하단(본인 HP바 위) partyStatusHud만 사용, battle-row 내 파티 컨테이너 숨김 */
body.battle-mode .party-hud-container {
    display: none !important;
}
body.battle-mode .battle-chat-row .chat-window.battle-chat-center {
    bottom: 0;
    width: 50%;
    min-width: 280px;
    max-width: none;
    height: 280px;
}
body.battle-mode .battle-chat-row .right-panel.battle-action-panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 420px;
    margin-left: 2px;
    gap: 0;
    position: fixed;
    right: 12px;
    bottom: 130px;
    z-index: 1000;
    cursor: default;
}
.battle-action-drag-handle {
    height: 24px;
    cursor: grab;
    display: none;
    align-items: center;
    justify-content: center;
    color: #ffd700;
    font-size: 14px;
    letter-spacing: 2px;
    user-select: none;
    -webkit-user-select: none;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 6px 6px 0 0;
    flex-shrink: 0;
}
.battle-action-drag-handle:active {
    cursor: grabbing;
}
body.battle-mode .battle-action-drag-handle {
    display: flex;
}
.battle-action-content {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 8px;
}
body.battle-mode .battle-action-panel .battle-action-content #battleControlPanel,
body.battle-mode .battle-action-panel .battle-action-content #battleQuickSlots {
    flex-shrink: 0;
}
body.battle-mode .battle-control-panel {
    width: 300px;
    min-width: 300px;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 16px;
}
body.battle-mode .battle-control-panel .battle-action-btn {
    width: 100%;
    padding: 20px 24px;
    font-size: 22px;
}

/* 전투 퀵슬롯 패널 (별도 드래그 가능) */
.battle-quickslots-draggable {
    display: none;
    position: relative;
}
.battle-quickslots-drag-handle {
    height: 24px;
    cursor: grab;
    display: none;
    align-items: center;
    justify-content: center;
    color: #ffd700;
    font-size: 14px;
    letter-spacing: 2px;
    user-select: none;
    -webkit-user-select: none;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 6px 6px 0 0;
    flex-shrink: 0;
}
.battle-quickslots-drag-handle:active {
    cursor: grabbing;
}
body.battle-mode .battle-quickslots-draggable {
    display: flex;
    flex-direction: column;
    position: fixed;
    right: 360px;
    bottom: 130px;
    z-index: 1000;
    cursor: default;
}
body.battle-mode .battle-quickslots-drag-handle {
    display: flex;
}

/* 전투 퀵슬롯 (공격 UI 오른편, 리니지 스타일) */
.battle-quickslots {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid #ffd700;
    border-radius: 8px;
    min-width: 90px;
}
.quickslot-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.quickslot-label {
    font-size: 10px;
    color: #ffd700;
    font-weight: bold;
    text-align: center;
}
.quickslot-row {
    display: flex;
    gap: 6px;
    justify-content: center;
}
.quickslot-slot {
    width: 40px;
    height: 40px;
    border: 1px solid #8b6f47;
    border-radius: 6px;
    background: rgba(20, 18, 12, 0.9);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.quickslot-slot:hover {
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.1);
}
.quickslot-slot:empty .quickslot-icon,
.quickslot-slot .quickslot-icon:empty {
    width: 32px;
    height: 32px;
    background: rgba(80, 70, 50, 0.5);
    border-radius: 4px;
}
.quickslot-slot .quickslot-icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}
.quickslot-slot .quickslot-item-count {
    position: absolute;
    bottom: 2px;
    right: 2px;
    font-size: 10px;
    font-weight: bold;
    color: #ffd700;
    text-shadow: 0 0 2px #000, 0 1px 2px #000;
    line-height: 1;
}
.quickslot-unregister {
    display: none !important;
}
body.battle-mode .battle-action-panel {
    flex-direction: row;
    gap: 16px;
}
body.battle-mode .battle-quickslots {
    display: flex !important;
    flex-shrink: 0;
    order: 1;
}
body.battle-mode .battle-control-panel {
    order: 0;
}
/* (중복 HP바 제거됨: 최하단 스테이터스 바의 HP/MP만 사용) */
.battle-hpmp-bar .battle-hpmp-bars {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.battle-hpmp-bar .hp-bar-container,
.battle-hpmp-bar .mp-bar-container {
    display: flex;
    align-items: center;
    gap: 6px;
}
.battle-hpmp-bar .hp-bar-label,
.battle-hpmp-bar .mp-bar-label {
    color: #ffd700;
    font-size: 11px;
    min-width: 24px;
}
.battle-hpmp-bar .hp-bar,
.battle-hpmp-bar .mp-bar {
    flex: 1;
    height: 18px;
    min-width: 80px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #8b6f47;
}
.battle-hpmp-bar .hp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #8b2020, #cc4444);
    border-radius: 3px;
    transition: width 0.2s ease;
}
.battle-hpmp-bar .mp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #2a4a8a, #4488dd);
    border-radius: 3px;
    transition: width 0.2s ease;
}
.battle-hpmp-bar .hp-bar-text,
.battle-hpmp-bar .mp-bar-text {
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    min-width: 44px;
    text-align: right;
}
.battle-hpmp-bar .turn-status {
    margin-top: 6px;
    font-size: 11px;
    color: #7fff7f;
    text-align: center;
}

/* ========== 배 항해 연출 (선착장 → 글루디오, 4분 좌→우 이동) ========== */
.ship-sailing-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 90;
    overflow: hidden;
}
.ship-overlay-ship {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) translateX(0);
    width: 180px;
    height: 100px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 240s linear; /* 4분 = 240초 */
}
.ship-overlay-ship.ship-sail-end {
    transform: translateY(-50%) translateX(calc(100% - 180px));
}

/* ========== 5대 전투 액션 버튼 (전투 시 하단 바 / 전투 패널용) ========== */
.battle-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
    margin-left: 4px;
}
.battle-action-btn {
    padding: 6px 12px;
    font-size: 12px;
    min-height: 28px;
    line-height: 1.2;
    border-radius: 6px;
    border: 1px solid #ffd700;
    background: linear-gradient(180deg, rgba(60, 50, 35, 0.9) 0%, rgba(35, 28, 20, 0.95) 100%);
    color: #ffd700;
    cursor: pointer;
    font-weight: bold;
    font-family: 'Malgun Gothic', '맑은 고딕', sans-serif;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    transition: all 0.2s;
}
.battle-action-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, rgba(80, 65, 45, 0.95) 0%, rgba(50, 40, 28, 0.98) 100%);
    border-color: #ffed4a;
    color: #fff;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}
.battle-action-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    filter: grayscale(0.5);
}

.bottom-bar {
    --bottom-bar-height: 120px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: var(--bottom-bar-height);
    box-sizing: border-box;
    background: linear-gradient(to top, rgba(15, 12, 8, 0.96) 0%, rgba(35, 28, 18, 0.94) 100%);
    border-top: 3px solid #ffd700;
    border-left: 2px solid #ffd700;
    border-right: 2px solid #ffd700;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    z-index: 1001;
    display: flex;
    align-items: center;
    padding: 10px 14px;
    gap: 12px;
    overflow: hidden;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 215, 0, 0.3);
    backdrop-filter: blur(8px);
}

/* 가장 좌측: 내 정보 / 인벤토리 버튼 (1.5배 확대) */
.bottom-bar-buttons {
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex-shrink: 0;
    margin-right: 6px;
}

.bottom-bar .menu-btn {
    padding: 9px 18px;
    font-size: 18px;
    min-height: 42px;
    line-height: 1.2;
    border-radius: 9px;
    border: 1px solid #ffd700;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* LV/AC/성향/무게/배고픔 (1.5배 확대) */
.bottom-bar .status-icons {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 144px;
    min-width: 210px;
    flex-shrink: 0;
}

.bottom-bar .status-icon {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #8b6f47;
    border-radius: 5px;
    font-size: 14px;
    line-height: 1.1;
    min-height: 18px;
    box-sizing: border-box;
}

.bottom-bar .status-icon-label {
    color: #ffd700;
    font-weight: bold;
    min-width: 42px;
    text-shadow: 0 0 4px rgba(255, 215, 0, 0.4);
}

.bottom-bar .status-icon-value {
    color: #fff;
    font-weight: bold;
    flex: 1;
    text-align: right;
    min-width: 0;
}

/* 무게/배고픔 인라인 게이지 (1.5배 확대) */
.status-gauge-inline {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    flex: 1;
}

.status-gauge-inline .status-gauge-bar {
    flex: 1;
    min-width: 36px;
    height: 12px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid #8b6f47;
    border-radius: 3px;
    position: relative;
    overflow: hidden;
}

.status-gauge-inline .status-gauge-fill {
    height: 100%;
    background: linear-gradient(to right, #4a9eff 0%, #2d7fff 100%);
    transition: width 0.3s ease;
    border-radius: 3px;
}

.status-gauge-inline .status-gauge-fill.hungry {
    background: linear-gradient(to right, #ff6b6b 0%, #ff4444 100%);
}

.status-gauge-inline .status-gauge-fill.exp-fill {
    background: linear-gradient(to right, #ffd700 0%, #ffaa00 100%);
}

.status-gauge-inline .status-gauge-text {
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    min-width: 33px;
    text-align: right;
}

/* 기존 게이지 컨테이너/바 (다른 곳에서 사용 시) */
.status-gauge-container {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 5px;
}

.status-gauge-bar {
    flex: 1;
    height: 10px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid #8b6f47;
    border-radius: 3px;
    position: relative;
    overflow: hidden;
}

.status-gauge-fill {
    height: 100%;
    background: linear-gradient(to right, #4a9eff 0%, #2d7fff 100%);
    transition: width 0.3s ease;
    border-radius: 3px;
}

.status-gauge-fill.hungry {
    background: linear-gradient(to right, #ff6b6b 0%, #ff4444 100%);
}

.status-gauge-text {
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    min-width: 28px;
    text-align: right;
}

/* HP/MP 바 + 마법/턴 UI 래퍼 (HP바 1.5배 확대, 마법·턴은 오른쪽) */
.bottom-bar .hpmp-magic-wrap {
    flex: 1;
    min-width: 0;
    max-width: 840px;
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 0 12px;
}
.bottom-bar .hpmp-magic-wrap .hpmp-bars {
    flex: 1;
    min-width: 0;
    max-width: 780px;
    margin: 0;
}
.bottom-bar .bottom-bar-right-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    margin-left: auto;
}
.bottom-bar .magic-btn-wrap {
    position: relative;
    flex-shrink: 0;
}
.bottom-bar .magic-btn-wrap .menu-btn {
    padding: 14px 27px;
    font-size: 21px;
    min-height: 63px;
    line-height: 1.2;
    border-radius: 12px;
    border: 1px solid #ffd700;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
/* 마법 팝업: 버튼 바로 위에 표시 */
.magic-popup {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 6px;
    min-width: 160px;
    max-width: 240px;
    max-height: 200px;
    overflow-y: auto;
    background: linear-gradient(180deg, rgba(20, 18, 12, 0.98) 0%, rgba(10, 8, 6, 0.98) 100%);
    border: 1px solid #ffd700;
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    z-index: 1000;
}
.magic-popup-title {
    font-size: 11px;
    color: #ffd700;
    margin-bottom: 6px;
    text-align: center;
    border-bottom: 1px solid #8b6f47;
    padding-bottom: 4px;
}
.magic-popup-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}
.magic-popup-list .magic-popup-skill {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #8b6f47;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.6);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.magic-popup-list .magic-popup-skill:hover:not(:disabled) {
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.15);
}
.magic-popup-list .magic-popup-skill:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    filter: grayscale(0.8);
}
.magic-popup-list .magic-popup-skill img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}
/* 전투 중 마법 팝업: 전투 패널(채팅 왼쪽) 위에 표시 */
.magic-popup.in-battle {
    position: absolute;
    left: 20px;
    bottom: 270px;
}

/* 마법 창 (리니지 스타일) - 인벤토리 창 미사용, 고급스러운 스크롤/테두리 */
.magic-window-lineage {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.magic-window-lineage[style*="display: flex"] {
    pointer-events: auto;
}
.magic-window-lineage .magic-window-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(2px);
}
.magic-window-lineage .magic-window-frame {
    position: relative;
    width: min(420px, 92vw);
    max-height: 85vh;
    background: linear-gradient(180deg, #2a1f14 0%, #1a120a 100%);
    border: 3px solid #8b6914;
    border-radius: 8px;
    box-shadow:
        inset 0 0 40px rgba(139, 105, 20, 0.15),
        0 0 0 1px rgba(255, 215, 0, 0.2),
        0 12px 40px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.magic-window-lineage .magic-window-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(180deg, #4a3520 0%, #2a1f14 100%);
    border-bottom: 2px solid #8b6914;
}
.magic-window-lineage .magic-window-title {
    font-size: 18px;
    font-weight: bold;
    color: #e8d4a0;
    text-shadow: 0 0 8px rgba(232, 212, 160, 0.4);
    letter-spacing: 0.05em;
}
.magic-window-lineage .magic-window-close {
    width: 32px;
    height: 32px;
    border: 1px solid #8b6914;
    background: rgba(0, 0, 0, 0.4);
    color: #e8d4a0;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}
.magic-window-lineage .magic-window-close:hover {
    background: rgba(139, 105, 20, 0.4);
    color: #fff;
}
.magic-window-lineage .magic-window-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 10px 12px 6px;
    background: rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid #5a4a30;
}
.magic-window-lineage .magic-window-tabs button {
    min-width: 44px;
    padding: 8px 10px;
    border: 1px solid #6b5a3a;
    background: linear-gradient(180deg, #3d3220 0%, #2a2218 100%);
    color: #c4a86a;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.magic-window-lineage .magic-window-tabs button:hover {
    background: linear-gradient(180deg, #4a3d28 0%, #3a2e1c 100%);
    color: #e8d4a0;
    border-color: #8b6914;
}
.magic-window-lineage .magic-window-tabs button.active {
    background: linear-gradient(180deg, #5a4a28 0%, #4a3a18 100%);
    border-color: #b8860b;
    color: #ffd700;
    box-shadow: inset 0 0 12px rgba(184, 134, 11, 0.3);
}
.magic-window-lineage .magic-window-list-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    min-height: 200px;
    max-height: 50vh;
}
.magic-window-lineage .magic-window-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}
.magic-window-lineage .magic-window-list li {
    margin: 0;
    padding: 0;
}
.magic-window-lineage .magic-window-list .magic-spell-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 10px 8px;
    border: 1px solid #6b5a3a;
    background: linear-gradient(180deg, #3a3020 0%, #2a2218 100%);
    color: #e8d4a0;
    font-size: 12px;
    text-align: center;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.magic-window-lineage .magic-window-list .magic-spell-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, #4a3d28 0%, #3a2e1c 100%);
    border-color: #8b6914;
    box-shadow: 0 0 12px rgba(184, 134, 11, 0.25);
}
.magic-window-lineage .magic-window-list .magic-spell-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    filter: grayscale(0.5);
}
.magic-window-lineage .magic-window-list .magic-spell-btn img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}
.magic-window-lineage .magic-window-footer {
    padding: 8px 12px;
    font-size: 11px;
    color: #8b7355;
    text-align: center;
    border-top: 1px solid #5a4a30;
    background: rgba(0, 0, 0, 0.2);
}

/* 마법서 사용 확인 모달 (리니지 스타일) */
.skillbook-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 9100;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}
.skillbook-confirm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(3px);
}
.skillbook-confirm-frame {
    position: relative;
    width: min(380px, 92vw);
    background: linear-gradient(180deg, #2a1f14 0%, #1a120a 100%);
    border: 3px solid #8b6914;
    border-radius: 10px;
    box-shadow:
        inset 0 0 50px rgba(139, 105, 20, 0.12),
        0 0 0 1px rgba(255, 215, 0, 0.25),
        0 12px 48px rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.skillbook-confirm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: linear-gradient(180deg, #4a3520 0%, #2a1f14 100%);
    border-bottom: 2px solid #ffd700;
}
.skillbook-confirm-title {
    font-size: 18px;
    font-weight: bold;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    letter-spacing: 0.08em;
}
.skillbook-confirm-close {
    width: 34px;
    height: 34px;
    border: 1px solid #8b6914;
    background: rgba(0, 0, 0, 0.5);
    color: #e8d4a0;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    padding: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.skillbook-confirm-close:hover {
    background: rgba(139, 105, 20, 0.4);
    color: #ffd700;
    border-color: #ffd700;
}
.skillbook-confirm-body {
    padding: 24px 20px;
    text-align: center;
}
.skillbook-confirm-message {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #e8d4a0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.skillbook-confirm-item,
.skillbook-confirm-skill {
    color: #ffd700;
    font-weight: bold;
}
.skillbook-confirm-footer {
    display: flex;
    gap: 12px;
    justify-content: center;
    padding: 16px 20px 20px;
    border-top: 1px solid #5a4a30;
    background: rgba(0, 0, 0, 0.25);
}
.skillbook-confirm-btn {
    min-width: 100px;
    padding: 10px 20px;
    border: 2px solid #8b6914;
    background: linear-gradient(180deg, #5a4525 0%, #3d2e18 100%);
    color: #e8d4a0;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.skillbook-confirm-btn:hover {
    background: linear-gradient(180deg, #6a5535 0%, #4d3e28 100%);
    border-color: #ffd700;
    color: #ffd700;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.3);
}
.skillbook-confirm-use {
    border-color: #b8860b;
    background: linear-gradient(180deg, #6a5525 0%, #4a3a18 100%);
    color: #ffd700;
}
.skillbook-confirm-use:hover {
    background: linear-gradient(180deg, #7a6535 0%, #5a4a28 100%);
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.4);
}

.skill-window-message {
    margin: 12px 16px;
    color: #c4a86a;
    font-size: 14px;
    text-align: center;
}

/* HP/MP 바 (하단 바 내부, 1.5배 확대) - hpmp-magic-wrap 내부용 */
.bottom-bar .hpmp-bars {
    flex: 1;
    min-width: 0;
    max-width: 780px;
    display: flex;
    gap: 15px;
    align-items: center;
    margin: 0 12px;
}

.bottom-bar .hp-bar-container,
.bottom-bar .mp-bar-container {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.bottom-bar .hp-bar-label,
.bottom-bar .mp-bar-label {
    color: #ffd700;
    font-weight: bold;
    font-size: 18px;
    min-width: 36px;
    text-shadow: 0 0 4px rgba(255, 215, 0, 0.5);
}

.bottom-bar .hp-bar,
.bottom-bar .mp-bar {
    flex: 1;
    height: 30px;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid #8b6f47;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* 게임 화면 등 다른 영역에서 쓰는 HP/MP (유지) */
.hpmp-bars {
    width: 60%;
    max-width: 800px;
    display: flex;
    gap: 15px;
    align-items: center;
}

.hp-bar-container,
.mp-bar-container {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.hp-bar-label,
.mp-bar-label {
    color: #ffd700;
    font-weight: bold;
    font-size: 14px;
    min-width: 30px;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}

.hp-bar,
.mp-bar {
    flex: 1;
    height: 25px;
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid #8b6f47;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
}

.hp-bar-fill {
    height: 100%;
    background: linear-gradient(to right, #ff4444 0%, #cc0000 100%);
    transition: width 0.3s ease;
    box-shadow: 0 0 10px rgba(255, 68, 68, 0.6);
}

.mp-bar-fill {
    height: 100%;
    background: linear-gradient(to right, #4a9eff 0%, #2d7fff 100%);
    transition: width 0.3s ease;
    box-shadow: 0 0 10px rgba(74, 158, 255, 0.6);
}

.bottom-bar .hp-bar-text,
.bottom-bar .mp-bar-text {
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    min-width: 72px;
    text-align: right;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.hp-bar-text,
.mp-bar-text {
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    min-width: 70px;
    text-align: right;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* 턴 상태 표시 (하단 바 오른쪽, 마법 버튼 옆) */
.bottom-bar .turn-status {
    color: #b0b0b0;
    font-size: 14px;
    margin: 0;
    flex-shrink: 0;
    max-width: 200px;
    min-height: 24px;
}
.turn-status {
    color: #b0b0b0;
    font-size: 12px;
    margin-left: 15px;
    min-height: 18px;
}
.turn-status.countdown {
    color: #7fff7f;
}

/* 채팅창: 화면 정중앙, 가로폭 50% */
.chat-window {
    position: absolute;
    bottom: 145px;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    min-width: 280px;
    max-width: none;
    height: 260px;
    background: rgba(0, 0, 0, 0.88);
    border: 2px solid #ffd700;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    z-index: 999;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 215, 0, 0.25);
    backdrop-filter: blur(10px);
}

/* 채팅 탭 버튼 */
.chat-tabs {
    display: flex;
    border-bottom: 1px solid #ffd700;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px 10px 0 0;
}

.chat-tab {
    flex: 1;
    padding: 8px 15px;
    background: rgba(0, 0, 0, 0.3);
    border: none;
    border-right: 1px solid #8b6f47;
    color: #ccc;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Malgun Gothic', '맑은 고딕', sans-serif;
}

.chat-tab:last-child {
    border-right: none;
}

.chat-tab:hover {
    background: rgba(255, 215, 0, 0.1);
    color: #ffd700;
}

.chat-tab.active {
    background: rgba(255, 215, 0, 0.2);
    color: #ffd700;
    border-bottom: 2px solid #ffd700;
    box-shadow: inset 0 -2px 0 #ffd700;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    color: #fff;
    font-size: 14px;
    line-height: 1.5;
    min-height: 0; /* flexbox에서 스크롤 작동을 위해 필요 */
}

.chat-messages::-webkit-scrollbar {
    width: 8px;
}

.chat-messages::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: #ffd700;
    border-radius: 4px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
    background: #ffed4e;
}

.chat-message {
    margin-bottom: 5px;
    word-wrap: break-word;
}

.chat-message.system {
    color: #ff69b4;
    font-style: italic;
}

.chat-message.normal {
    color: #fff;
}

.chat-message.whisper {
    color: #ffd700;
    font-style: italic;
}

.chat-message.guild {
    color: #00ff00;
}

.chat-message.shop {
    color: #ffd700;
    font-weight: 500;
}

.chat-message .username {
    color: #ffd700;
    font-weight: bold;
    margin-right: 5px;
}

.chat-drop-item-icon {
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
}
.chat-drop-item-icon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.chat-input-container {
    display: flex;
    padding: 10px;
    border-top: 1px solid #ffd700;
    background: rgba(0, 0, 0, 0.5);
}

.chat-input {
    flex: 1;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid #8b6f47;
    border-radius: 5px;
    color: #fff;
    font-size: 14px;
    outline: none;
}

.chat-input:focus {
    border-color: #ffd700;
    background: rgba(255, 255, 255, 0.15);
}

.chat-input::placeholder {
    color: #999;
}

.chat-send-btn {
    padding: 8px 20px;
    margin-left: 10px;
    background: linear-gradient(135deg, #8B4513 0%, #654321 100%);
    border: 2px solid #FFD700;
    border-radius: 5px;
    color: #FFD700;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.chat-send-btn:hover {
    background: linear-gradient(135deg, #A0522D 0%, #8B4513 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(255, 215, 0, 0.3);
}

.chat-send-btn:active {
    transform: translateY(0);
}

/* 하단 바 밖에서 쓰는 메뉴 버튼 (기본 스타일) */
.menu-btn {
    padding: 10px 18px;
    background: linear-gradient(135deg, #8B4513 0%, #654321 100%);
    border: 2px solid #FFD700;
    border-radius: 6px;
    color: #FFD700;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.menu-btn:hover {
    background: linear-gradient(135deg, #A0522D 0%, #8B4513 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7);
}

.menu-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* stats-display 제거됨 - 장비창으로 통합 */

/* 게임 화면 - 맵 배경 */
.game-screen {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 0;
    background: #000;
    display: none;
}

.game-screen.active {
    display: block;
}

.fullscreen-btn {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 10001;
    padding: 6px 10px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.85);
    color: #ffd700;
    border: 1px solid #8b6f47;
    border-radius: 4px;
    cursor: pointer;
    pointer-events: auto;
}
.fullscreen-btn:hover {
    background: rgba(0, 0, 0, 0.95);
}

.map-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center 25%;
    background-repeat: no-repeat;
    z-index: 0;
    transition: opacity 0.8s ease;
}

/* 이동 중 연출: 미세 흔들림 + 블러 */
.map-background.walking {
    animation: map-walking-shake 0.4s ease-in-out infinite;
    filter: blur(1px);
}
@keyframes map-walking-shake {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(1px, -1px); }
    50% { transform: translate(-1px, 1px); }
    75% { transform: translate(1px, 1px); }
}

/* 이동 중 오버레이 (진행 바 + 메시지) */
.walking-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 5000;
    pointer-events: none;
}
.walking-overlay .walking-message {
    color: #ffd700;
    font-size: 20px;
    margin-bottom: 16px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
}
.walking-overlay .walking-progress-wrap {
    width: 80%;
    max-width: 400px;
    height: 24px;
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid #8b6f47;
    border-radius: 8px;
    overflow: hidden;
}
.walking-overlay .walking-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #8b6f47, #ffd700);
    transition: width 0.2s linear;
}

/* 좌측 상단: 버프 아이콘 (전투 중에도 표시, 호버 시 남은 시간 툴팁) */
.buff-hud {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 100;
    pointer-events: none;
}
.buff-hud .buff-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 280px;
}
.buff-hud .buff-icon-wrap {
    pointer-events: auto;
    position: relative;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid #8b6f47;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.buff-hud .buff-icon-wrap img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}
.buff-hud .buff-icon-wrap .buff-tooltip {
    visibility: hidden;
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 8px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid #ffd700;
    border-radius: 6px;
    color: #fff;
    font-size: 12px;
    white-space: nowrap;
    z-index: 20;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
.buff-hud .buff-icon-wrap:hover .buff-tooltip {
    visibility: visible;
}

.game-ui-overlay {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    background: rgba(0, 0, 0, 0.5);
    padding: 15px 20px;
    border-bottom-left-radius: 10px;
    border: 2px solid #8b6f47;
    border-top: none;
    border-right: none;
}

.game-header h2 {
    color: #ffd700;
    margin: 0 0 5px 0;
    font-size: 18px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.character-info {
    display: flex;
    gap: 15px;
    font-size: 13px;
    color: #ccc;
}

.character-info span {
    color: #fff;
}

.character-info strong {
    color: #ffd700;
}

.zone-recommended-level {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #a0d468;
}

/* 맵 이동 버튼 영역 (상단으로 이동) */
.map-navigation {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 1200px;
    background: rgba(0, 0, 0, 0.85);
    border: 2px solid #ffd700;
    border-radius: 10px;
    padding: 20px;
    z-index: 100;
    box-shadow: 
        0 0 20px rgba(255, 215, 0, 0.4),
        inset 0 0 30px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
}

.navigation-title {
    color: #ffd700;
    font-size: 18px;
    margin-bottom: 15px;
    text-align: center;
    font-family: 'Malgun Gothic', '맑은 고딕', sans-serif;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.colosseum-schedule-info {
    color: #e8d4a0;
    font-size: 13px;
    margin-bottom: 12px;
    padding: 8px 12px;
    background: rgba(139, 111, 71, 0.3);
    border-radius: 6px;
    text-align: center;
}

.location-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.location-btn {
    padding: 12px 20px;
    border: 2px solid #8b6f47;
    border-radius: 5px;
    background: linear-gradient(to bottom, rgba(60, 50, 30, 0.8) 0%, rgba(20, 15, 10, 0.9) 100%);
    color: #ccc;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    font-family: 'Malgun Gothic', '맑은 고딕', sans-serif;
    position: relative;
    overflow: hidden;
}

.location-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.2), transparent);
    transition: left 0.5s;
}

.location-btn:hover {
    background: linear-gradient(to bottom, rgba(80, 70, 50, 0.9) 0%, rgba(40, 35, 25, 0.95) 100%);
    border-color: #ffd700;
    color: #ffd700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
    transform: translateY(-2px);
}

.location-btn:hover::before {
    left: 100%;
}

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

.location-btn .npc-name {
    color: #ffff00;
    font-weight: bold;
}

.location-btn .npc-name.quest {
    color: #90ee90;
}

.location-btn.explore-btn {
    border-color: #b8860b;
    color: #ffd700;
}
.location-btn.explore-btn:hover {
    border-color: #ffd700;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
}

/* 같은 지역 플레이어 목록 */
.zone-players-section {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(139, 111, 71, 0.5);
}
.zone-players-title {
    font-size: 14px;
    color: #c4a574;
    margin-bottom: 8px;
}
.zone-players-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.zone-player-btn {
    padding: 6px 12px;
    background: linear-gradient(to bottom, rgba(80, 60, 40, 0.8) 0%, rgba(50, 35, 25, 0.9) 100%);
    border: 1px solid #8b6f47;
    border-radius: 4px;
    color: #e8d5b5;
    cursor: pointer;
    font-size: 13px;
}
.zone-player-btn:hover {
    border-color: #b8860b;
    color: #ffd700;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}
.zone-players-empty {
    color: #8b7355;
    font-size: 13px;
}
.player-interaction-modal .player-interaction-buttons {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

/* 훈련장 허수아비 타격 버튼 (강조색) */
.location-btn.hit-dummy-btn {
    border-color: #cd853f;
    background: linear-gradient(to bottom, rgba(80, 60, 40, 0.9) 0%, rgba(50, 35, 25, 0.95) 100%);
    color: #ffb347;
}
.location-btn.hit-dummy-btn:hover {
    border-color: #ff8c00;
    color: #ffa500;
    box-shadow: 0 0 14px rgba(255, 140, 0, 0.5);
}

/* 허수아비 타격 시 맵 배경 흔들림 연출 */
.map-background.dummy-shake {
    animation: dummy-shake 0.35s ease-out;
}
@keyframes dummy-shake {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-4px); }
    30% { transform: translateX(4px); }
    45% { transform: translateX(-3px); }
    60% { transform: translateX(3px); }
    75% { transform: translateX(-2px); }
}

/* 기억의 장소 선택 모달 (축복받은 순간이동 주문서) */
.teleport-place-select-modal .teleport-place-desc {
    color: #5c4033;
    font-size: 14px;
    margin-bottom: 16px;
    font-family: 'Nanum Myeongjo', '명조', serif;
}
.teleport-place-select-modal .teleport-place-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
}
.teleport-place-select-modal .teleport-place-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.teleport-place-select-modal .teleport-place-btn {
    flex: 1;
    text-align: left;
    padding: 10px 14px;
    background: linear-gradient(to bottom, rgba(80, 60, 40, 0.85) 0%, rgba(50, 35, 25, 0.9) 100%);
    border: 2px solid #8b6f47;
    color: #e8d5b7;
    font-family: 'Nanum Myeongjo', '명조', serif;
}
.teleport-place-select-modal .teleport-place-btn:hover {
    border-color: #c4a574;
    background: linear-gradient(to bottom, rgba(100, 75, 50, 0.9) 0%, rgba(70, 50, 35, 0.95) 100%);
    color: #f5e6c8;
}
.teleport-place-select-modal .teleport-place-delete-btn {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    min-width: 24px;
    padding: 0;
    font-size: 16px;
    line-height: 1;
    border-radius: 4px;
    border: 1px solid #8b6f47;
    background: rgba(80, 50, 30, 0.8);
    color: #c4a574;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.teleport-place-select-modal .teleport-place-delete-btn:hover {
    background: rgba(120, 60, 40, 0.9);
    color: #e8a080;
    border-color: #a05050;
}

/* 텔레포트 확인 모달 */
.teleport-modal {
    background: linear-gradient(to bottom, #d2b48c 0%, #c4a574 50%, #b8956a 100%);
    border: 4px solid #8b6f47;
    border-radius: 8px;
    box-shadow: 
        0 15px 50px rgba(0, 0, 0, 0.6),
        inset 0 0 60px rgba(139, 111, 71, 0.15);
    width: 90%;
    max-width: 400px;
    padding: 30px;
    position: relative;
    font-family: 'Nanum Myeongjo', '명조', serif;
}

.teleport-info {
    text-align: center;
    margin-bottom: 25px;
}

.teleport-info h3 {
    color: #5a4a2a;
    font-size: 20px;
    margin-bottom: 15px;
}

.teleport-info p {
    color: #3a2a1a;
    font-size: 16px;
    line-height: 1.8;
}

.teleport-cost {
    color: #ffd700;
    font-weight: bold;
    font-size: 18px;
}

/* 로그인 화면: Flexbox 반응형, 리니지 클래식 스타일 */
#loginScreen {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    background-color: #111;
    background-image: url('/images/ui/log_in.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 0;
    overflow: auto;
}
#loginScreen.active,
.login-screen-flex.active {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.login-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    padding: 24px 16px;
    box-sizing: border-box;
}

.login-box {
    max-width: 400px;
    width: 90%;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid #8b6508;
    border-radius: 8px;
    padding: 32px 24px;
    box-sizing: border-box;
}

.login-input-area {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.login-input {
    background: rgba(20, 18, 15, 0.9) !important;
    border: 1px solid #8b6508 !important;
    outline: none !important;
    color: #e8dcc4;
    font-size: 16px;
    padding: 12px 16px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 4px;
    cursor: text;
}

.login-input::placeholder {
    color: rgba(232, 220, 196, 0.5);
}

.login-input:focus {
    border-color: #b8860b !important;
    box-shadow: 0 0 0 1px #b8860b;
}

.login-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.login-btn {
    background: linear-gradient(180deg, #6b5344 0%, #5a4a3a 50%, #4a3a2a 100%);
    border: 2px solid #8b6508;
    color: #e8dcc4;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    padding: 12px 32px;
    min-width: 100px;
    min-height: 44px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.2s;
}

.login-btn:hover {
    background: linear-gradient(180deg, #7b6354 0%, #6a5a4a 50%, #5a4a3a 100%);
    border-color: #b8860b;
    box-shadow: 0 2px 8px rgba(184, 134, 11, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.login-btn:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.login-copyright {
    margin-top: 32px;
    font-size: 12px;
    color: #888;
    line-height: 1.6;
    text-align: center;
    max-width: 400px;
}

/* 회원가입 모달 */
.modal-overlay {
    display: none !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.modal-overlay.active {
    display: flex !important;
}

.parchment-modal {
    background: linear-gradient(to bottom, #d2b48c 0%, #c4a574 50%, #b8956a 100%);
    border: 4px solid #8b6f47;
    border-radius: 8px;
    box-shadow: 
        0 15px 50px rgba(0, 0, 0, 0.6),
        inset 0 0 60px rgba(139, 111, 71, 0.15),
        inset 0 2px 10px rgba(255, 255, 255, 0.3);
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    padding: 35px;
    font-family: 'Nanum Myeongjo', '명조', serif;
}

.parchment-modal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(139, 111, 71, 0.03) 2px,
            rgba(139, 111, 71, 0.03) 4px
        );
    pointer-events: none;
    border-radius: 10px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #8b6f47;
    position: relative;
    z-index: 1;
}

.modal-header h2 {
    color: #5a4a2a;
    margin: 0;
    font-size: 24px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.modal-close {
    background: transparent;
    border: none;
    font-size: 32px;
    color: #8b6f47;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 30px;
    height: 30px;
    transition: color 0.3s;
}

.modal-close:hover {
    color: #5a4a2a;
}

/* NPC 상점 모달 (게렝 마법서 구매) */
.npc-shop-modal h3 { margin: 0 0 12px; color: #5a4a2a; font-size: 18px; }
.npc-shop-modal .btn-close-modal,
.npc-shop-modal .btn-buy-item {
    padding: 8px 16px;
    margin-top: 10px;
    border: 2px solid #8b6f47;
    border-radius: 4px;
    background: linear-gradient(to bottom, #e8d5b5, #c4a574);
    color: #5a4a2a;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    pointer-events: auto;
    z-index: 1001;
}
.npc-shop-modal .btn-close-modal:hover,
.npc-shop-modal .btn-buy-item:hover {
    background: linear-gradient(to bottom, #f0e0c0, #d4b884);
    border-color: #6b5537;
}
.npc-shop-modal .npc-shop-items { position: relative; z-index: 1; }
.npc-shop-item-row .shop-item-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 8px;
}
.npc-shop-item-row .shop-item-info {
    display: flex;
    align-items: center;
    flex: 1;
}

/* ========== 경매장 (리니지 스타일) ========== */
.auction-modal-lineage {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}
.auction-modal-lineage .auction-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(3px);
}
.auction-modal-lineage .auction-modal-frame {
    position: relative;
    width: min(480px, 94vw);
    max-height: 85vh;
    background: linear-gradient(180deg, #2a1f14 0%, #1a120a 100%);
    border: 3px solid #8b6914;
    border-radius: 10px;
    box-shadow:
        inset 0 0 50px rgba(139, 105, 20, 0.12),
        0 0 0 1px rgba(255, 215, 0, 0.25),
        0 12px 48px rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.auction-modal-lineage .auction-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: linear-gradient(180deg, #4a3520 0%, #2a1f14 100%);
    border-bottom: 2px solid #ffd700;
}
.auction-modal-lineage .auction-modal-title {
    font-size: 20px;
    font-weight: bold;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    letter-spacing: 0.08em;
}
.auction-modal-lineage .auction-modal-close {
    width: 34px;
    height: 34px;
    border: 1px solid #8b6914;
    background: rgba(0, 0, 0, 0.5);
    color: #e8d4a0;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    padding: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.auction-modal-lineage .auction-modal-close:hover {
    background: rgba(139, 105, 20, 0.4);
    color: #ffd700;
    border-color: #ffd700;
}
.auction-modal-lineage .auction-modal-body {
    padding: 14px;
    overflow-y: auto;
    flex: 1;
    min-height: 200px;
}
.auction-modal-lineage .auction-modal-actions {
    margin-bottom: 12px;
}
.auction-modal-lineage .auction-btn-lineage {
    padding: 10px 20px;
    border: 2px solid #8b6914;
    background: linear-gradient(180deg, #5a4525 0%, #3d2e18 100%);
    color: #e8d4a0;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
}
.auction-modal-lineage .auction-btn-lineage:hover {
    background: linear-gradient(180deg, #6a5535 0%, #4d3e28 100%);
    border-color: #ffd700;
    color: #ffd700;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.3);
}
.auction-listings-lineage {
    max-height: 340px;
    overflow-y: auto;
    border: 1px solid #5a4a30;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.35);
    padding: 6px;
}
.auction-empty-lineage {
    padding: 24px;
    text-align: center;
    color: #a08060;
    font-size: 15px;
}
.auction-listing-row-lineage {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    margin-bottom: 6px;
    background: linear-gradient(180deg, rgba(60, 48, 32, 0.8) 0%, rgba(40, 32, 22, 0.9) 100%);
    border: 1px solid #6b5a3a;
    border-radius: 6px;
    gap: 12px;
}
.auction-listing-row-lineage:last-child { margin-bottom: 0; }
.auction-listing-row-lineage .auction-row-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.auction-listing-row-lineage .auction-row-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
}
.auction-listing-row-lineage .auction-row-text {
    color: #e8d4a0;
    font-size: 14px;
    flex-shrink: 0;
}
.auction-listing-row-lineage .auction-row-price {
    color: #ffd700;
    font-weight: bold;
    font-size: 13px;
    margin-left: 4px;
}
.auction-listing-row-lineage .auction-row-seller {
    color: #a09070;
    font-size: 12px;
    margin-left: auto;
}
.auction-listing-row-lineage .auction-row-btns {
    display: flex;
    gap: 6px;
}
.auction-listing-row-lineage .auction-btn-buy {
    background: linear-gradient(180deg, #3a5020 0%, #2a3510 100%);
    border-color: #5a7a30;
}
.auction-listing-row-lineage .auction-btn-buy:hover {
    background: linear-gradient(180deg, #4a6030 0%, #3a4520 100%);
    border-color: #7aaa40;
}
.auction-listing-row-lineage .auction-btn-withdraw {
    background: linear-gradient(180deg, #503a20 0%, #352510 100%);
    border-color: #7a5a30;
}
.auction-register-lineage {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
}
.auction-register-lineage .auction-register-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
}
.auction-register-lineage .auction-register-frame {
    position: relative;
    width: min(420px, 92vw);
    max-height: 90vh;
    background: linear-gradient(180deg, #2a1f14 0%, #1a120a 100%);
    border: 3px solid #8b6914;
    border-radius: 10px;
    box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.2), 0 16px 56px rgba(0, 0, 0, 0.75);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.auction-register-lineage .auction-register-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(180deg, #4a3520 0%, #2a1f14 100%);
    border-bottom: 2px solid #ffd700;
}
.auction-register-lineage .auction-register-title {
    font-size: 18px;
    font-weight: bold;
    color: #ffd700;
}
.auction-register-lineage .auction-register-body {
    padding: 16px;
    overflow-y: auto;
}
.auction-register-lineage .auction-register-hint {
    font-size: 12px;
    color: #a09070;
    margin: 0 0 12px;
}
.auction-register-lineage .auction-register-list {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid #5a4a30;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.3);
    padding: 6px;
    margin-bottom: 12px;
}
.auction-register-item-lineage {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 6px;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 6px;
    background: rgba(50, 40, 28, 0.6);
    transition: all 0.2s;
}
.auction-register-item-lineage:last-child { margin-bottom: 0; }
.auction-register-item-lineage:hover {
    background: rgba(70, 58, 42, 0.8);
    border-color: #6b5a3a;
}
.auction-register-item-lineage.selected {
    border-color: #ffd700;
    background: rgba(80, 65, 45, 0.9);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.25);
}
.auction-register-item-lineage img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}
.auction-register-lineage .auction-register-price-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.auction-register-lineage .auction-register-price-row label {
    color: #e8d4a0;
    font-size: 14px;
}
.auction-register-lineage .auction-price-input {
    width: 120px;
    padding: 8px 12px;
    border: 2px solid #6b5a3a;
    border-radius: 4px;
    background: rgba(30, 25, 18, 0.95);
    color: #e8d4a0;
    font-size: 15px;
}
.auction-register-lineage .auction-register-btns {
    display: flex;
    gap: 10px;
}
.auction-register-lineage .auction-btn-cancel {
    background: linear-gradient(180deg, #4a3030 0%, #2a2020 100%);
    border-color: #6b4040;
}

/* 수량 입력 모달 */
.quantity-input-modal {
    z-index: 10001;
}
.quantity-input-modal .quantity-input-content {
    min-width: 280px;
}
.quantity-input-modal .quantity-input-message {
    margin: 10px 0;
    color: #3d3228;
}
.quantity-input-modal .quantity-input-row {
    margin: 12px 0;
}
.quantity-input-modal .quantity-input-field {
    width: 100%;
    padding: 10px 12px;
    font-size: 16px;
    border: 2px solid #8b6f47;
    border-radius: 4px;
    background: rgba(255,255,255,0.9);
    color: #333;
}
.quantity-input-modal .quantity-input-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 16px;
}

.modal-body {
    position: relative;
    z-index: 1;
}

.modal-form-group {
    margin-bottom: 20px;
}

.modal-form-group label {
    display: block;
    color: #5a4a2a;
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 16px;
}

.modal-input {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #8b6f47;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.8);
    color: #3a2a1a;
    font-size: 16px;
    font-family: 'Malgun Gothic', '맑은 고딕', sans-serif;
    outline: none;
    transition: all 0.3s;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.modal-input:focus {
    background: rgba(255, 255, 255, 0.95);
    border-color: #6b5537;
    box-shadow: 
        0 0 8px rgba(139, 111, 71, 0.4),
        inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.modal-result {
    margin-top: 15px;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
    min-height: 20px;
}

.modal-result.success {
    background: rgba(76, 175, 80, 0.4);
    color: #1b5e20;
    border: 2px solid #4caf50;
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

.modal-result.error {
    background: rgba(244, 67, 54, 0.4);
    color: #b71c1c;
    border: 2px solid #f44336;
    box-shadow: 0 2px 8px rgba(244, 67, 54, 0.3);
}

.modal-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 2px solid #8b6f47;
    position: relative;
    z-index: 1;
}

.modal-btn {
    padding: 12px 35px;
    border: 2px solid #8b6f47;
    border-radius: 4px;
    background: linear-gradient(to bottom, #d4a574 0%, #c49564 100%);
    color: #3a2a1a;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Malgun Gothic', '맑은 고딕', sans-serif;
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 3px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

.modal-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s;
    pointer-events: none; /* 클릭이 버튼에 전달되도록 */
}

.modal-btn:hover {
    background: linear-gradient(to bottom, #c49564 0%, #b58554 100%);
    transform: translateY(-2px);
    box-shadow: 
        0 5px 12px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    border-color: #6b5537;
}

.modal-btn:active {
    transform: translateY(0) scale(0.98);
}

.modal-btn:active::before {
    width: 300px;
    height: 300px;
}

.modal-btn-cancel {
    background: linear-gradient(to bottom, rgba(139, 111, 71, 0.4) 0%, rgba(107, 85, 55, 0.5) 100%);
    border-color: #6b5537;
}

.modal-btn-cancel:hover {
    background: linear-gradient(to bottom, rgba(139, 111, 71, 0.6) 0%, rgba(107, 85, 55, 0.7) 100%);
    border-color: #5a4a2a;
}

/* 아이템 장착/탈착 액션 팝업 */
#itemActionPopup {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10001;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
#itemActionPopup.active {
    display: flex;
    pointer-events: auto;
}
.item-action-popup-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    cursor: default;
}
.item-action-popup-content {
    position: relative;
    z-index: 1;
    background: linear-gradient(to bottom, #d2b48c 0%, #c4a574 50%, #b8956a 100%);
    border: 4px solid #8b6f47;
    border-radius: 8px;
    padding: 20px 24px;
    min-width: 220px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6);
}
.item-action-popup-title {
    margin: 0 0 12px 0;
    font-size: 16px;
    color: #5a4a2a;
    text-align: center;
}
.item-action-popup-detail {
    margin: 0 0 16px 0;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.4;
    color: #4a3a1a;
    background: rgba(139, 111, 71, 0.25);
    border-radius: 4px;
    border: 1px solid rgba(139, 111, 71, 0.5);
    text-align: left;
}
.item-action-popup-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.item-action-popup-primary,
.item-action-popup-cancel {
    padding: 10px 24px;
    border: 2px solid #8b6f47;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    background: linear-gradient(to bottom, #c49564 0%, #b58554 100%);
    color: #5a4a2a;
}
.item-action-popup-primary:hover,
.item-action-popup-cancel:hover {
    background: linear-gradient(to bottom, #d4a574 0%, #c59564 100%);
}
.item-action-popup-cancel {
    background: linear-gradient(to bottom, rgba(139, 111, 71, 0.5) 0%, rgba(107, 85, 55, 0.6) 100%);
}

/* 펫 목걸이 정보 전용 팝업 (장착 아님, 정보만 표시) */
.pet-collar-info-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    pointer-events: auto;
}

/* 장비 슬롯 클릭 가능 표시 */
.equip-slot-wrap {
    cursor: pointer;
}
.equip-slot-wrap .equip-slot {
    cursor: pointer;
}

/* 반응형 대응 - 로그인 화면 전체화면 유지, UI 비율 고정 */
@media (max-width: 900px) {
    .login-container {
        width: 100vw;
        height: 100vh;
    }
    
    .scroll-text {
        font-size: 18px;
    }
    
    .scroll-text-area {
        padding: 20px 16px;
    }
    
    .login-input {
        font-size: 14px;
    }
}

/* ========== 마법 공격 이펙트 (순수 CSS, 이미지 없음) ========== */
.magic-effect {
    position: fixed;
    width: 64px;
    height: 64px;
    margin-left: -32px;
    margin-top: -32px;
    pointer-events: none;
    z-index: 100;
    transform-origin: center center;
}

/* 불: 붉은/주황 radial-gradient, 중앙에서 확 커지며 사라짐 */
.magic-effect.effect-fire {
    background: radial-gradient(circle at center, #ff6b00 0%, #ff3300 30%, #cc0000 60%, transparent 70%);
    border-radius: 50%;
    animation: scaleUpFadeOut 0.6s ease-out forwards;
}

/* 물: 푸른색 원형 파문 */
.magic-effect.effect-water {
    background: radial-gradient(circle at center, transparent 30%, rgba(0, 180, 255, 0.8) 50%, rgba(0, 100, 200, 0.4) 70%, transparent 100%);
    border-radius: 50%;
    animation: rippleEffect 0.6s ease-out forwards;
}

/* 바람: 가늘고 긴 회전 베기 */
.magic-effect.effect-wind {
    width: 80px;
    height: 20px;
    margin-left: -40px;
    margin-top: -10px;
    background: linear-gradient(90deg, transparent, rgba(200, 255, 200, 0.9), rgba(150, 255, 150, 0.6), transparent);
    border-radius: 4px;
    animation: slashSpin 0.5s ease-out forwards;
}

/* 땅: 갈색/회색 바닥에서 솟아오름 */
.magic-effect.effect-earth {
    background: linear-gradient(180deg, #8b7355 0%, #6b5344 40%, #4a3f35 100%);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    animation: thudUp 0.65s ease-out forwards;
}

/* 번개: 노란/파란 강렬한 번쩍임 */
.magic-effect.effect-lightning {
    background: radial-gradient(circle at center, #ffff88 0%, #ffff00 25%, #4488ff 60%, transparent 80%);
    border-radius: 50%;
    animation: flashShake 0.5s ease-out forwards;
}

/* 무속성: 흰/하늘색 빛나는 구체 */
.magic-effect.effect-magic {
    background: radial-gradient(circle at center, #ffffff 0%, #aaddff 40%, #66aaff 70%, transparent 100%);
    border-radius: 50%;
    box-shadow: 0 0 24px rgba(255, 255, 255, 0.8);
    animation: scaleUpFadeOut 0.6s ease-out forwards;
}

/* 어둠: 보라/검정 계열 구체, 흡수되는 듯한 효과 */
.magic-effect.effect-dark {
    background: radial-gradient(circle at center, #4a2060 0%, #2d1038 30%, #0a0010 70%, transparent 100%);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(90, 0, 120, 0.6), inset 0 0 15px rgba(0, 0, 0, 0.8);
    animation: darkAbsorb 0.65s ease-out forwards;
}

/* 회복: 연녹색/연두색 빛, 부드럽게 퍼지며 사라짐 */
.magic-effect.effect-heal {
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.95) 0%, rgba(150, 255, 150, 0.8) 30%, rgba(100, 220, 120, 0.5) 60%, transparent 100%);
    border-radius: 50%;
    box-shadow: 0 0 24px rgba(150, 255, 150, 0.6);
    animation: healGlow 0.7s ease-out forwards;
}

/* 얼음: 흰/하얀 파란 수정 결정체 느낌 */
.magic-effect.effect-ice {
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.95) 0%, rgba(180, 220, 255, 0.8) 30%, rgba(120, 180, 255, 0.5) 60%, transparent 100%);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(200, 230, 255, 0.9);
    animation: iceShatter 0.6s ease-out forwards;
}

@keyframes scaleUpFadeOut {
    0% { transform: scale(0.3); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.9; }
    100% { transform: scale(1.8); opacity: 0; }
}

@keyframes rippleEffect {
    0% { transform: scale(0.5); opacity: 1; }
    50% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.5); opacity: 0; }
}

@keyframes slashSpin {
    0% { transform: rotate(0deg) scaleX(0.3); opacity: 1; }
    40% { transform: rotate(180deg) scaleX(1.2); opacity: 0.9; }
    100% { transform: rotate(360deg) scaleX(0.5); opacity: 0; }
}

@keyframes thudUp {
    0% { transform: scaleY(0.2) translateY(20px); opacity: 0.8; }
    30% { transform: scaleY(1.1) translateY(-5px); opacity: 1; }
    70% { transform: scaleY(1) translateY(0); opacity: 0.7; }
    100% { transform: scaleY(0.5) translateY(-10px); opacity: 0; }
}

@keyframes flashShake {
    0% { transform: scale(0.8); opacity: 0; }
    5% { transform: scale(1.3); opacity: 1; }
    15% { transform: translateX(-3px) scale(1.2); opacity: 1; }
    25% { transform: translateX(3px) scale(1.2); opacity: 1; }
    35% { transform: translateX(-2px) scale(1.1); opacity: 0.9; }
    50% { transform: translateX(2px) scale(1); opacity: 0.7; }
    100% { transform: scale(1.2); opacity: 0; }
}

@keyframes darkAbsorb {
    0% { transform: scale(0.5); opacity: 0.6; }
    40% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(0.8); opacity: 0; }
}

@keyframes iceShatter {
    0% { transform: scale(0.4); opacity: 0.9; }
    30% { transform: scale(1.2); opacity: 1; }
    70% { transform: scale(1.3); opacity: 0.8; }
    100% { transform: scale(1.5); opacity: 0; }
}

@keyframes healGlow {
    0% { transform: scale(0.5); opacity: 0.7; }
    40% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1.4); opacity: 0; }
}

/* ========== 랭킹 / 도움말 버튼 및 리니지 클래식 스타일 모달 ========== */
.ranking-help-buttons {
    position: fixed;
    bottom: calc(var(--pc-bottom-bar-height, 120px) + 16px);
    right: 20px;
    display: flex;
    gap: 10px;
    z-index: 1000;
    pointer-events: auto;
}

.lineage-modal-btn {
    padding: 8px 16px;
    background: linear-gradient(180deg, #4a3a1a 0%, #2d2210 100%);
    border: 2px solid #8b6508;
    color: #e8d5a3;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.lineage-modal-btn:hover {
    background: linear-gradient(180deg, #5a4a2a 0%, #3d3210 100%);
    border-color: #b8860b;
    color: #fff;
}

.lineage-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    pointer-events: auto;
}

.lineage-modal-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: auto;
}

.lineage-modal {
    position: relative;
    background: rgba(0, 0, 0, 0.85);
    border: 2px solid #8b6508;
    border-radius: 6px;
    min-width: 360px;
    max-width: 90vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0,0,0,0.8);
    pointer-events: auto;
}

.lineage-modal-wide {
    min-width: 480px;
    max-width: 95vw;
}

.lineage-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #8b6508;
    background: rgba(60, 45, 20, 0.5);
}

.lineage-modal-header h2 {
    margin: 0;
    font-size: 18px;
    color: #e8d5a3;
}

.lineage-modal-close {
    background: transparent;
    border: none;
    color: #e8d5a3;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
}

.lineage-modal-close:hover {
    color: #fff;
}

.lineage-modal-body {
    padding: 16px;
    overflow-y: auto;
    color: #d4c4a8;
}

.lineage-modal-scroll {
    max-height: 60vh;
}

.lineage-modal-loading {
    text-align: center;
    padding: 20px;
    color: #b8860b;
}

.lineage-modal-table {
    width: 100%;
    border-collapse: collapse;
}

.lineage-modal-table th,
.lineage-modal-table td {
    padding: 8px 12px;
    border: 1px solid #5a4a2a;
    text-align: left;
}

.lineage-modal-table th {
    background: rgba(80, 60, 30, 0.6);
    color: #e8d5a3;
}

.lineage-modal-table td {
    color: #d4c4a8;
}

.lineage-modal-table .rank-1 { color: #FFD700; font-weight: bold; }
.lineage-modal-table .rank-2 { color: #C0C0C0; font-weight: bold; }
.lineage-modal-table .rank-3 { color: #CD7F32; font-weight: bold; }

.lineage-modal-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 16px 0;
    border-bottom: 1px solid #5a4a2a;
    background: rgba(40, 30, 15, 0.5);
}

.lineage-tab {
    padding: 8px 16px;
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    color: #b8a070;
    cursor: pointer;
    font-size: 13px;
}

.lineage-tab:hover {
    color: #e8d5a3;
}

.lineage-tab.active {
    background: rgba(80, 60, 30, 0.6);
    border-color: #8b6508;
    color: #e8d5a3;
}

.help-tab-content {
    display: none;
}

.help-tab-content.active {
    display: block;
}

.help-tab-content h3 {
    margin: 0 0 12px 0;
    color: #e8d5a3;
    font-size: 16px;
}

.help-hunting-list {
    margin: 0;
    padding-left: 20px;
    line-height: 1.8;
}

.help-hunting-list li {
    margin-bottom: 8px;
}

.help-pet-content h4 {
    margin: 16px 0 8px 0;
    color: #b8860b;
    font-size: 14px;
}

.help-pet-content h4:first-child {
    margin-top: 0;
}

.help-pet-content p {
    margin: 0 0 12px 0;
    line-height: 1.6;
}

.help-pet-list {
    margin: 0 0 12px 0;
    padding-left: 20px;
    line-height: 1.6;
}

.help-hunting-content {
    max-height: 50vh;
    overflow-y: auto;
}

.help-hunting-zone {
    margin-bottom: 12px;
    padding: 8px 12px;
    background: rgba(60, 45, 20, 0.4);
    border: 1px solid #5a4a2a;
    border-radius: 4px;
}

.help-hunting-zone strong {
    color: #e8d5a3;
}

.help-hunting-monsters {
    margin-top: 4px;
    font-size: 12px;
    color: #b8a070;
}

.help-hunting-section {
    margin-bottom: 16px;
}

.help-hunting-section > strong {
    display: block;
    margin-bottom: 8px;
    color: #e8d5a3;
}

.help-hunting-zones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.help-item-img {
    width: 32px;
    height: 32px;
    vertical-align: middle;
    margin-right: 8px;
}

/* 마법 탭 리스트 */
.help-magic-content {
    max-height: 50vh;
    overflow-y: auto;
    font-size: 13px;
}

.help-magic-section {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #5a4a2a;
}

.help-magic-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.help-magic-tier {
    margin: 0 0 10px 0;
    color: #b8860b;
    font-size: 14px;
    font-weight: bold;
}

.help-magic-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.help-magic-table th,
.help-magic-table td {
    padding: 8px 12px;
    border: 1px solid #5a4a2a;
    background: rgba(40, 30, 15, 0.5);
    color: #d4c4a8;
}

.help-magic-table th {
    background: rgba(80, 60, 30, 0.6);
    color: #e8d5a3;
    font-weight: bold;
}

.help-magic-name {
    display: flex;
    align-items: center;
    gap: 8px;
}

.help-magic-img {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.help-magic-empty {
    color: #b8a070;
    text-align: center;
    padding: 20px;
}