/* ================================================================
   style.css — 전체 게임 스타일
   ================================================================
   섹션 구조:
     [1] 전체 초기화 & body
     [2] 인트로 화면 (API 키 / 스토리 / 닉네임)
     [3] 맵 화면 (스탯 바 / 맵 버튼 / 툴팁)
     [4] 푸앙이의 방 (채팅 / 아이템 버튼 / 컨디션)
     [5] 전투 화면 (전투 필드 / 주사위 / 커맨드)
     [6] 학생식당
     [7] 중앙도서관
     [8] 310관 연구실
   
   나중에 추가할 장소 CSS는 맨 아래에 이어서 작성
================================================================ */

/* 전체 초기화 */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {  /* Page 전체 배경 설정 */
    background: #1a1a2e;
    color: #e0e0e0;
    font-family: 'Segoe UI', 'Malgun Gothic', sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

h1 {
    font-size: 18px;
    font-weight: 500;
    color: #a0c4ff;
    margin-bottom: 16px;
    letter-spacing: 2px;
    /* 안에 있는 요소들을 세로로 쌓으면서 가운데 정렬 */
    padding: 20px;
}

/* Intro 관련 */
#intro-overlay {  
    position: fixed;  /* 화면 전체 검은 배경 */
    inset: 0;
    background: #0a0d18;  
    z-index: 999;  /* 다른 모든 요소 위에 올라오도록 설정 -> hidden과 연결 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Segoe UI', 'Malgun Gothic', sans-serif;
}

/* API 키와 닉네임 입력 끝나면 overlay 전체를 숨겨서 게임 화면 & body 노출 */
#intro-overlay.hidden {display: none;}

/* 단계 전환 : 1단계(API키) -> 2단계(스토리) -> 3단계(닉네임 설정) 감싸는 컨테이너 */
/* JS의 switchStep() 함수가 이전 단계에 .hidden 붙이고 다음 단계에서 떼는 방식으로 단계 전환 구현 */
.intro-step {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 20px;
}

.intro-step.hidden {display: none;}  /* 현재 단계가 아닌 단계는 숨김 */

.intro-card {  /* 인트로 UI 카드 배경 */
    background: #10142a;
    border: 1px solid #1e2d6e;
    border-radius: 16px;
    padding: 40px 36px;
    max-width: 480px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0 0 60px rgba(30, 50, 120, 0.3);
    animation: cardIn 0.5s ease forwards;  /* 카드 등장 애니메이션 0.5초동안 재생 */
}

.intro-card.wide {max-width: 580px;}

@keyframes cardIn {  /* 카드 등장 애니메이션 : 위로 떠오르는 효과 */
    from {  /* 시작 : 투명, 24px 아래에 위치 */
        opacity: 0;
        transform: translateY(24px);
    }

    to {  /* 끝 : 불투명, 원래 위치로 */
        opacity: 1;
        transform: translateY(0);
    }
}

.intro-warning-badge {  /* Intro 위의 System Alert 배지 */
    display: inline-block;  
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;  /* 글자 간격 넓혀서 경고 느낌이 들도록 */
    color: #f09595;
    border: 1px solid #f09595;
    border-radius: 4px;
    padding: 3px 10px;
    width: fit-content;
}

/* 파란색-초록색 색상 설정해서 단계마다 다른 분위기 연출 */
.intro-warning-badge.story {
    color: #a0c4ff;
    border-color: #a0c4ff;
}

.intro-warning-badge.name {
    color: #5dcaa5;
    border-color: #5dcaa5;
}

.intro-title {  /* 타이틀 : 이면 세계 접속 감지 제목 */
    font-size: 22px;
    font-weight: 600;
    color: #e0e0e0;
    margin: 0;
    line-height: 1.3;
}

.intro-desc {  /* 설명 텍스트 */
    font-size: 14px;
    color: #8090b0;
    line-height: 1.8;
    margin: 0;
}

.intro-highlight {
    color: #a0c4ff;
    font-weight: 500;
}

/* Groq LLM 강조 */
.intro-sub {
    font-size: 11px;
    color: #4a5a7a;
}  /* '키는 브라우저에만..' 부분 */

.intro-input-wrap {  /* Groq API키 입력창 */
    display: flex;  /* 입력창과 버튼을 가로로 배치 */
    gap: 8px;
}

.intro-input-wrap input {
    flex: 1;
    background: #0d1117;
    border: 1px solid #1e2d6e;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    color: #e0e0e0;
    font-family: 'Courier New', monospace;  /* API키 입력하는 느낌 들도록 */
    outline: none;
    transition: border-color 0.2s;  /* 색이 0.2초동안 부드럽게 전환됨 */
}

/* 입력창을 클릭해 커서가 들어간 순간 테두리 색 변경 (시각적 효과) */
.intro-input-wrap input:focus {border-color: #a0c4ff;}

/* 아무것도 입력 안 했을 때 보이는 gsk_... 색상 (눈에 잘 안 띄도록) */
.intro-input-wrap input::placeholder {color: #2a3a5a;}

.intro-input-wrap button {
    background: rgba(160, 196, 255, 0.1);
    border: 1px solid #a0c4ff;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 13px;
    color: #a0c4ff;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
    white-space: nowrap;
}

/* 버튼 hover시 살짝 더 밝아지도록 */
.intro-input-wrap button:hover {background: rgba(160, 196, 255, 0.2);}

.intro-link-hint {  /* 하단 링크 : "키가 없으신가요?" 부분 */
    font-size: 11px;
    color: #4a5a7a;
    margin: 0;
}

.intro-link-hint a {color: #6c8ebf;}

/* 스토리 텍스트 */
.story-text-wrap {
    min-height: 120px;
    display: flex;
    align-items: flex-start;
}

.story-line {
    font-size: 15px;
    color: #c0cce0;
    line-height: 2;
    margin: 0;
    white-space: pre-wrap;
}

/* 다음 버튼 */
.intro-next-btn {
    background: rgba(160, 196, 255, 0.1);
    border: 1px solid #a0c4ff;
    border-radius: 10px;
    padding: 10px 24px;
    font-size: 13px;
    color: #a0c4ff;
    cursor: pointer;
    font-family: inherit;
    align-self: flex-end;
    transition: background 0.2s;
    animation: fadeIn 0.5s ease;  /* 0.5초동안 페이드인 애니메이션 실행 */
}

.intro-next-btn:hover {background: rgba(160, 196, 255, 0.2);}

@keyframes fadeIn {  /* 페이드인 애니메이션 설정 */
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes shake {  /* shake 애니메이션 : 여러 곳에서 활용 */
    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-6px);
    }

    75% {
        transform: translateX(6px);
    }
}

.map-datetime {  /* ── 현재 시간 표시 ── */
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10;
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(160, 196, 255, 0.3);
    border-radius: 8px;
    padding: 6px 14px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    font-weight: 700;
    color: #a0c4ff;
    letter-spacing: 2px;
    line-height: 1.6;
    pointer-events: none;
}

#puang-room {  /* ── 블루미르 홀 : 푸앙이의 방 컨테이너 ── */
    display: none;
    width: 100%;
    max-width: 680px;
    flex-direction: column;
    gap: 12px;
}

#puang-room.visible {display: flex;}

.room-header {  /* 방 헤더 */
    background: #16213e;
    border: 1px solid #d4537e;
    border-radius: 12px;
    padding: 10px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.room-title {
    font-size: 15px;
    font-weight: 500;
    color: #d4537e;
}

.room-back-btn {
    background: rgba(212, 83, 126, 0.15);
    border: 1px solid #d4537e;
    border-radius: 8px;
    padding: 4px 12px;
    font-size: 12px;
    color: #d4537e;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
}

.room-back-btn:hover {background: rgba(212, 83, 126, 0.3);}

.room-main {  /* 방 메인 영역: 푸앙이 + 채팅 */
    display: flex;
    gap: 12px;
    min-height: 300px;
}

.room-left {  /* 왼쪽: 푸앙이 캐릭터 + 컨디션 */
    width: 180px;
    flex-shrink: 0;
    background: linear-gradient(180deg, #0d1b2a 0%, #1a2744 100%);
    border: 1px solid #0f3460;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px;
    gap: 10px;
}

.puang-char-img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    transition: transform 0.3s;
}

.puang-char-img:hover {transform: scale(1.05);}

.condition-label {  /* 컨디션 게이지 */
    font-size: 11px;
    color: #6c8ebf;
    text-align: center;
}

.condition-gauge {
    width: 100%;
    height: 8px;
    background: #0f3460;
    border-radius: 4px;
    overflow: hidden;
}
.condition-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease, background 0.5s ease;
}

.condition-emoji {
    font-size: 24px;
    text-align: center;
}

.condition-text {
    font-size: 11px;
    color: #a0a0a0;
    text-align: center;
    line-height: 1.4;
}

.favor-hearts {  /* 호감도 하트 */
    font-size: 18px;
    letter-spacing: 2px;
    text-align: center;
}

.item-status {  /* 오늘의 아이템 현황 */
    width: 100%;
    background: rgba(15, 52, 96, 0.4);
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 10px;
    color: #6c8ebf;
    line-height: 1.6;
}

.item-status span {
    color: #e0e0e0;
    font-weight: 500;
}

.room-right {  /* 오른쪽: 채팅창 */
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-log {  /* 채팅 로그 */
    flex: 1;
    background: #0d1117;
    border: 1px solid #0f3460;
    border-radius: 10px;
    padding: 12px;
    min-height: 220px;
    max-height: 220px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    line-height: 1.5;
}

.chat-puang {  /* 푸앙이 메시지 */
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.chat-puang-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #1a3a6e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.chat-puang-bubble {
    background: #16213e;
    border: 1px solid #0f3460;
    border-radius: 0 10px 10px 10px;
    padding: 8px 12px;
    color: #e0e0e0;
    max-width: 85%;
}

.chat-puang-name {
    font-size: 10px;
    color: #5dcaa5;
    margin-bottom: 3px;
    font-weight: 500;
}

.chat-player {  /* 플레이어 메시지 */
    display: flex;
    justify-content: flex-end;
}

.chat-player-bubble {
    background: #0f3460;
    border-radius: 10px 0 10px 10px;
    padding: 8px 12px;
    color: #e0e0e0;
    max-width: 85%;
    font-size: 13px;
}

.chat-favor-change {  /* 호감도 변동 알림 */
    text-align: center;
    font-size: 11px;
    color: #6c8ebf;
    padding: 2px 0;
}

.favor-up {
    color: #d4537e;
}

.favor-down {
    color: #f09595;
}

.item-buttons { /* 아이템 버튼 영역 */
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.item-btn {
    background: #16213e;
    border: 1px solid #0f3460;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
    color: #e0e0e0;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.2s, background 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
}

.item-btn:hover {
    background: #1e2d50;
    border-color: #a0c4ff;
}

.item-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.chat-input-row { /* 채팅 입력창 */
    display: flex;
    gap: 8px;
}
.chat-input-row input {
    flex: 1;
    background: #16213e;
    border: 1px solid #0f3460;
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 13px;
    color: #e0e0e0;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}

.chat-input-row input:focus {
    border-color: #d4537e;
}

.chat-input-row input::placeholder {
    color: #3a5080;
}

.chat-input-row button {
    background: rgba(212, 83, 126, 0.2);
    border: 1px solid #d4537e;
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 13px;
    color: #d4537e;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
}

.chat-input-row button:hover {
    background: rgba(212, 83, 126, 0.4);
}

/* ================================================================
일반 화면 스타일
================================================================ */
/* ── 맵 화면 전체 ── */
.map-container {
    width: 100%;
    max-width: 680px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 상단 스탯 바 */
.map-stat-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.map-stat-pill {
    background: #16213e;
    border: 1px solid #0f3460;
    border-radius: 20px;
    padding: 4px 14px;
    font-size: 12px;
    color: #6c8ebf;
    display: flex;
    align-items: center;
    gap: 6px;
}

.map-stat-pill span {
    font-weight: 500;
    color: #e0e0e0;
}

.map-bg { /* 맵 배경 + 버튼 컨테이너 */
    position: relative;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #0f3460;
}

.map-bg img.map-image {
    width: 100%;
    display: block;
    filter: brightness(0.75) saturate(0.8);
/* 이면 세계 분위기 */
}

.map-spot { /* 맵 버튼 공통 */
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}
.map-spot-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.map-spot:hover .map-spot-icon {
    transform: scale(1.2);
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 16px rgba(160, 196, 255, 0.4);
}

.map-spot-label {
    font-size: 11px;
    font-weight: 500;
    color: white;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
    background: rgba(0, 0, 0, 0.55);
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

/* 뱃지 (!, ♥, ?) */
.map-spot-wrap {
    position: relative;
}

.map-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid white;
    color: white;
}

.badge-danger {
    background: #e24b4a;
}

.badge-heart {
    background: #d4537e;
}

.badge-mystery {
    background: #534ab7;
}

/* 잠긴 장소 */
.map-spot.locked .map-spot-icon {
    filter: grayscale(1);
    opacity: 0.5;
}

.map-spot.locked {
    cursor: not-allowed;
}

.map-spot.locked:hover .map-spot-icon {
    transform: none;
    box-shadow: none;
    border-color: rgba(255, 255, 255, 0.25);
}

.map-tooltip { /* 툴팁 */
    position: absolute;
    background: rgba(10, 14, 26, 0.93);
    color: #e0e0e0;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 20;
    white-space: nowrap;
    border: 1px solid rgba(160, 196, 255, 0.2);
    transform: translate(-50%, 0);
    line-height: 1.5;
}

.game-container {
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── 현재 위치 표시 바 ── */
.location-bar {
    background: #16213e;
    border: 1px solid #0f3460;
    border-radius: 12px;
    padding: 10px 16px;
}

.location-label {
    font-size: 11px;
    color: #6c8ebf;
    margin-bottom: 2px;
}

.location-name {
    font-size: 15px;
    font-weight: 500;
    color: #a0c4ff;
}

/* ── 스탯 카드 ── */
.stat-row {
    display: flex;
    gap: 8px;
}

.stat-card {
    flex: 1;
    background: #16213e;
    border: 1px solid #0f3460;
    border-radius: 10px;
    padding: 8px 12px;
}

.stat-label {
    font-size: 10px;
    color: #6c8ebf;
    margin-bottom: 3px;
}

.stat-val {
    font-size: 14px;
    font-weight: 500;
    color: #e0e0e0;
}

.bar-bg {
    height: 4px;
    background: #0f3460;
    border-radius: 2px;
    margin-top: 4px;
}

.bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.4s ease;
}

.character-scene { /* ── 캐릭터 등장 씬 : 지금은 아래 -> 위 슬라이드인데 방향 변경 가능 ── */
    background: #16213e;
    border: 1px solid #0f3460;
    border-radius: 12px;
    overflow: hidden;
    display: none;
}

.character-scene.visible {
    display: block;
}

.scene-bg {
    background: linear-gradient(180deg, #0d1b2a 0%, #1a2744 100%);
    padding: 20px 0 0 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    min-height: 180px;
    position: relative;
}

/* char-wrapper: 매번 새로 생성해서 애니메이션 재실행 */
.char-wrapper {
    width: 110px;
    height: 140px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: slideUp 0.4s ease forwards;
}

@keyframes slideUp {
    from {
        transform: translateY(40px);
        opacity: 0;
    }

    to {
        transform: translateY(0px);
        opacity: 1;
    }
}

/* 애니메이션: 아래서 위로 등장 (방향 변경 가능) */

.char-svg {
    width: 110px;
    height: 140px;
}

/* SVG 캐릭터 (ghost, prof) */
.char-img {
    width: 110px;
    height: 140px;
    object-fit: contain;
}

/* 이미지 캐릭터 (실제 PNG) */

/* ── 말풍선 ── */
.dialog-bubble {
    background: #f5f0e8;
    border-radius: 0 0 12px 12px;
    padding: 14px 18px 16px;
}

.dialog-speaker-name {
    font-size: 13px;
    font-weight: 500;
    color: #0f6e56;
    margin-bottom: 6px;
}

.dialog-typing {
    font-size: 14px;
    color: #1a1a2e;
    line-height: 1.65;
    min-height: 44px;
}

.memory-pill {
    display: inline-block;
    margin-top: 8px;
    font-size: 10px;
    background: #e6f1fb;
    color: #185fa5;
    padding: 2px 8px;
    border-radius: 6px;
}

/* 타이핑 커서 */
.cursor {
    display: inline-block;
    width: 2px;
    height: 14px;
    background: #1a1a2e;
    margin-left: 1px;
    vertical-align: middle;
    animation: blink 0.7s step-end infinite;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

/* ── 행동 버튼 ── */
.action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.action-btn {
    background: #16213e;
    border: 1px solid #0f3460;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    color: #e0e0e0;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: border-color 0.2s, background 0.2s;
}

.action-btn:hover {
    background: #1e2d50;
    border-color: #a0c4ff;
}

.action-btn.danger {
    border-color: #5a1a1a;
    color: #f09595;
}

.action-btn.danger:hover {
    background: #2e1010;
    border-color: #f09595;
}

/* ── 입력창 ── */
.input-row {
    display: flex;
    gap: 8px;
}

.input-row input {
    flex: 1;
    background: #16213e;
    border: 1px solid #0f3460;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    color: #e0e0e0;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}

.input-row input:focus {
    border-color: #a0c4ff;
}

.input-row input::placeholder {
    color: #3a5080;
}

.input-row button {
    background: #0f3460;
    border: 1px solid #a0c4ff;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 13px;
    color: #a0c4ff;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
}

.input-row button:hover {
    background: #1a4a80;
}

/* ── 시스템 로그 ── */
.log-box {
    background: #0d1117;
    border: 1px solid #0f3460;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 11px;
    color: #4a7a4a;
    font-family: 'Courier New', monospace;
    max-height: 80px;
    overflow-y: auto;
    line-height: 1.6;
}

/* ================================================================
전투 화면 스타일
================================================================ */

/* 전투 컨테이너 (기본 숨김) */
#battle-container {
    display: none;
    width: 100%;
    max-width: 520px;
    flex-direction: column;
    gap: 12px;
}

#battle-container.visible {
    display: flex;
}

.battle-header { /* 전투 헤더 */
    background: #16213e;
    border: 1px solid #3b0d0d;
    border-radius: 12px;
    padding: 10px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.battle-label {
    font-size: 11px;
    color: #f09595;
}

.battle-title {
    font-size: 15px;
    font-weight: 500;
    color: #f09595;
}

.battle-turn {
    font-size: 12px;
    color: #6c8ebf;
}

.battle-field { /* 전투 필드 */
    background: linear-gradient(180deg, #0d1117 0%, #1a0a0a 100%);
    border: 1px solid #3b0d0d;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    min-height: 200px;
}

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

.fighter-name {
    font-size: 12px;
    color: #e0e0e0;
    font-weight: 500;
}

.hp-bar-wrap {
    width: 100%;
}

.hp-bar-label {
    font-size: 10px;
    color: #6c8ebf;
    margin-bottom: 3px;
    display: flex;
    justify-content: space-between;
}

.hp-bar-bg2 {
    height: 6px;
    background: #0f3460;
    border-radius: 3px;
}

.hp-bar-fill2 {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
}

.vs-badge {
    font-size: 18px;
    font-weight: 500;
    color: #f09595;
    padding: 0 12px;
    align-self: center;
}

.battle-log { /* 전투 로그 */
    background: #0d1117;
    border: 1px solid #0f3460;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 12px;
    color: #c0c0c0;
    font-family: 'Courier New', monospace;
    min-height: 80px;
    max-height: 100px;
    overflow-y: auto;
    line-height: 1.7;
}

.log-damage {
    color: #f09595;
}

.log-success {
    color: #5dcaa5;
}

.log-system2 {
    color: #4a7a4a;
}

.log-dice {
    color: #ef9f27;
}

.dice-area { /* 주사위 + 커맨드 영역 */
    background: #16213e;
    border: 1px solid #0f3460;
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.dice-display {
    font-size: 48px;
    line-height: 1;
    user-select: none;
}

.dice-display.rolling {
    animation: diceShake 0.4s ease;
}

@keyframes diceShake {
    0%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-15deg) scale(1.2);
    }

    75% {
        transform: rotate(15deg) scale(1.2);
    }
}

.dice-result {
    font-size: 13px;
    color: #6c8ebf;
    min-height: 18px;
    text-align: center;
}

.cmd-label { /* 커맨드 버튼 */
    font-size: 11px;
    color: #6c8ebf;
    align-self: flex-start;
}

.cmd-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
}

.cmd-btn {
    background: #16213e;
    border: 1px solid #0f3460;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    color: #e0e0e0;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: border-color 0.2s, background 0.2s;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cmd-btn:hover {
    background: #1e2d50;
    border-color: #a0c4ff;
}

.cmd-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.cmd-btn.attack {
    border-color: #5a1a1a;
}

.cmd-btn.attack:hover {
    background: #2e1010;
    border-color: #f09595;
}

.cmd-name {
    font-weight: 500;
}

.cmd-desc {
    font-size: 10px;
    color: #6c8ebf;
}

.enemy-svg { /* 전투 캐릭터 SVG */
    width: auto;
    height: 160px;
}

/* 몬스터 크기 조절 */

.shake-enemy { /* 피격 애니메이션 */
    animation: enemyShake 0.3s ease;
}

@keyframes enemyShake {
    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-8px);
    }

    75% {
        transform: translateX(8px);
    }
}

.flash-player {
    animation: playerFlash 0.3s ease;
}

@keyframes playerFlash {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

/* ================================================================
학생식당 스타일 (추가)
================================================================ */
#cafeteria-container {
    display: none;
    width: 100%;
    max-width: 680px;
    flex-direction: column;
    gap: 12px;
}

#cafeteria-container.visible {
    display: flex;
}

.caf-header {
    background: #16251a;
    border: 1px solid #2a5a30;
    border-radius: 12px;
    padding: 10px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.caf-title {
    font-size: 15px;
    font-weight: 500;
    color: #5dcaa5;
}

.caf-back-btn {
    background: rgba(93, 202, 165, 0.15);
    border: 1px solid #5dcaa5;
    border-radius: 8px;
    padding: 4px 12px;
    font-size: 12px;
    color: #5dcaa5;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
}

.caf-back-btn:hover {
    background: rgba(93, 202, 165, 0.3);
}

.caf-stat-row {
    display: flex;
    gap: 8px;
}

.caf-stat-card {
    flex: 1;
    background: #16251a;
    border: 1px solid #2a5a30;
    border-radius: 10px;
    padding: 10px 14px;
}

.caf-stat-label {
    font-size: 10px;
    color: #5dcaa5;
    margin-bottom: 4px;
}

.caf-stat-val {
    font-size: 15px;
    font-weight: 600;
    color: #e0e0e0;
    margin-bottom: 4px;
}

.caf-bar-bg {
    height: 5px;
    background: #0f3020;
    border-radius: 3px;
}

.caf-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

.caf-menu-title {
    font-size: 11px;
    color: #5dcaa5;
    letter-spacing: 1px;
}

.caf-menu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.caf-menu-item {
    background: #16251a;
    border: 1px solid #2a5a30;
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
    text-align: left;
    color: #e0e0e0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.caf-menu-item:hover {
    background: #1e3a24;
    border-color: #5dcaa5;
    transform: translateY(-2px);
}

.caf-menu-emoji {
    font-size: 26px;
}

.caf-menu-name {
    font-size: 13px;
    font-weight: 500;
}

.caf-menu-desc {
    font-size: 10px;
    color: #5dcaa5;
}

.caf-menu-cost {
    font-size: 10px;
    color: #ef9f27;
    margin-top: 2px;
}

.caf-log {
    background: #0a1a0d;
    border: 1px solid #2a5a30;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 12px;
    color: #5dcaa5;
    font-family: 'Courier New', monospace;
    min-height: 60px;
    max-height: 80px;
    overflow-y: auto;
    line-height: 1.7;
}

.caf-log-hp {
    color: #5dcaa5;
}

.caf-log-sp {
    color: #a0c4ff;
}

.caf-log-err {
    color: #f09595;
}

/* ================================================================
중앙도서관 스타일 (추가)
================================================================ */
#library-container {
    display: none;
    width: 100%;
    max-width: 680px;
    flex-direction: column;
    gap: 12px;
}

#library-container.visible {
    display: flex;
}

.lib-header {
    background: #10142a;
    border: 1px solid #1e2d6e;
    border-radius: 12px;
    padding: 10px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lib-title {
    font-size: 15px;
    font-weight: 500;
    color: #a0c4ff;
}

.lib-back-btn {
    background: rgba(160, 196, 255, 0.1);
    border: 1px solid #a0c4ff;
    border-radius: 8px;
    padding: 4px 12px;
    font-size: 12px;
    color: #a0c4ff;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
}

.lib-back-btn:hover {
    background: rgba(160, 196, 255, 0.2);
}

.lib-info-row {
    display: flex;
    gap: 8px;
}

.lib-info-card {
    flex: 1;
    background: #10142a;
    border: 1px solid #1e2d6e;
    border-radius: 10px;
    padding: 10px 14px;
    text-align: center;
}

.lib-info-label {
    font-size: 10px;
    color: #6c8ebf;
    margin-bottom: 4px;
}

.lib-info-val {
    font-size: 18px;
    font-weight: 600;
    color: #e0e0e0;
}

.lib-info-sub {
    font-size: 10px;
    color: #4a5a7a;
    margin-top: 2px;
}

.lib-study-panel {
    background: #10142a;
    border: 1px solid #1e2d6e;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lib-subject-title {
    font-size: 11px;
    color: #6c8ebf;
    letter-spacing: 1px;
}

.lib-subject-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.lib-subject-btn {
    background: #16213e;
    border: 1px solid #1e2d6e;
    border-radius: 10px;
    padding: 12px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
    color: #e0e0e0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lib-subject-btn:hover {
    background: #1e2d50;
    border-color: #a0c4ff;
    transform: translateY(-2px);
}

.lib-subject-btn.studying {
    border-color: #a0c4ff;
    background: #1e2d50;
    animation: libPulse 1s ease infinite;
}

.lib-subject-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

@keyframes libPulse {
    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: 0.7
    }
}

.lib-subject-icon {
    font-size: 22px;
}

.lib-subject-name {
    font-size: 13px;
    font-weight: 500;
}

.lib-subject-reward {
    font-size: 10px;
    color: #ef9f27;
}

.lib-subject-time {
    font-size: 10px;
    color: #6c8ebf;
}

.lib-progress-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lib-progress-label {
    font-size: 11px;
    color: #6c8ebf;
    display: flex;
    justify-content: space-between;
}

.lib-progress-bg {
    height: 8px;
    background: #0f1a30;
    border-radius: 4px;
    overflow: hidden;
}

.lib-progress-fill {
    height: 100%;
    width: 0%;
    border-radius: 4px;
    background: #a0c4ff;
}

.lib-log {
    background: #080b18;
    border: 1px solid #1e2d6e;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 12px;
    color: #6c8ebf;
    font-family: 'Courier New', monospace;
    min-height: 60px;
    max-height: 80px;
    overflow-y: auto;
    line-height: 1.7;
}

.lib-log-reward {
    color: #ef9f27;
}

.lib-log-info {
    color: #a0c4ff;
}

/* ================================================================
310관 연구실 스타일 (추가)
================================================================ */
#lab-container {
    display: none;
    width: 100%;
    max-width: 680px;
    flex-direction: column;
    gap: 12px;
}

#lab-container.visible {
    display: flex;
}

.lab-header {
    background: #1a1030;
    border: 1px solid #3a1e6e;
    border-radius: 12px;
    padding: 10px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lab-title {
    font-size: 15px;
    font-weight: 500;
    color: #c4a0ff;
}

.lab-back-btn {
    background: rgba(196, 160, 255, 0.1);
    border: 1px solid #c4a0ff;
    border-radius: 8px;
    padding: 4px 12px;
    font-size: 12px;
    color: #c4a0ff;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
}

.lab-back-btn:hover {
    background: rgba(196, 160, 255, 0.2);
}

.lab-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.lab-stat-card {
    background: #1a1030;
    border: 1px solid #2e1a5e;
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lab-stat-icon {
    font-size: 22px;
}

.lab-stat-label {
    font-size: 10px;
    color: #8060b0;
}

.lab-stat-val {
    font-size: 20px;
    font-weight: 600;
    color: #e0e0e0;
}

.lab-stat-sub {
    font-size: 10px;
    color: #8060b0;
}

.lab-bar-bg {
    height: 4px;
    background: #1a0a3a;
    border-radius: 2px;
    margin-top: 2px;
}

.lab-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.5s ease;
}

.lab-action-title {
    font-size: 11px;
    color: #8060b0;
    letter-spacing: 1px;
}

.lab-action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.lab-action-btn {
    background: #1a1030;
    border: 1px solid #2e1a5e;
    border-radius: 10px;
    padding: 14px 12px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
    color: #e0e0e0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lab-action-btn:hover {
    background: #251545;
    border-color: #c4a0ff;
    transform: translateY(-2px);
}

.lab-btn-icon {
    font-size: 20px;
}

.lab-btn-name {
    font-size: 13px;
    font-weight: 500;
}

.lab-btn-desc {
    font-size: 10px;
    color: #8060b0;
}

.lab-log {
    background: #080510;
    border: 1px solid #2e1a5e;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 12px;
    color: #8060b0;
    font-family: 'Courier New', monospace;
    min-height: 60px;
    max-height: 80px;
    overflow-y: auto;
    line-height: 1.7;
}

.lab-log-save {
    color: #c4a0ff;
}

.lab-log-info {
    color: #a0c4ff;
}

.lab-log-warning {
    color: #ef9f27;
}

@keyframes savePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(196, 160, 255, 0.5);
    }

    70% {
        box-shadow: 0 0 0 16px rgba(196, 160, 255, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(196, 160, 255, 0);
    }
}

@keyframes puangBounce {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-4px);
    }
}

.save-flash {
    animation: savePulse 0.6s ease;
}