/* =================================================================
   1. 기본 설정 및 변수 (Root & Reset)
   ================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Consolas&display=swap');

:root {
    --bg-main: #1a1a2e;       --bg-sidebar: #11111f;    --bg-panel: #16213e;      
    --bg-button: #0f3460;     --bg-button-hover: #1f4287; --bg-button-disabled: #0a1120;
    --border-color: #2a2a40;  --primary-orange: #e94560; --accent-green: #4ecca3;
    --accent-blue: #4db5ff;   --text-main: #e0e0e0;     --text-muted: #8892b0;
}

* { box-sizing: border-box; }
body {
    font-family: 'Noto Sans KR', sans-serif;
    background-color: var(--bg-main); color: var(--text-main);
    margin: 0; padding: 0; width: 100vw; height: 100vh;
    display: flex; overflow: hidden; font-size: 13px;
}

/* =================================================================
   2. 사이드바 및 네비게이션 (Sidebar)
   ================================================================= */
.sidebar { width: 200px; height: 100%; background-color: var(--bg-sidebar); border-right: 1px solid #000; display: flex; flex-direction: column; flex-shrink: 0; }
.logo-area { padding: 20px 10px; background-color: #0b0b14; text-align: center; }
.logo-area h1 { margin: 0; font-size: 1.1rem; color: var(--accent-green); letter-spacing: 1px; }
.nav-menu { flex: 1; overflow-y: auto; padding: 10px 0; }
.nav-category { font-size: 0.75rem; color: #556; margin: 15px 0 5px 15px; font-weight: bold; }
.nav-item { display: flex; align-items: center; padding: 10px 15px; cursor: pointer; color: var(--text-muted); font-size: 0.9rem; transition: 0.2s; }
.nav-item:hover, .nav-item.active { background-color: var(--bg-panel); color: #fff; border-left: 3px solid var(--primary-orange); }
.nav-item i { margin-right: 10px; width: 16px; text-align: center; }

/* --- 사이드바 하단 데이터 버튼 스타일 --- */
.sidebar-data-btns {
    padding: 10px 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.side-btn {
    width: 100%;
    border: none;
    border-radius: 4px;
    padding: 8px;
    color: white;
    font-size: 0.8rem;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
    opacity: 0.8;
}

.side-btn:hover { opacity: 1; transform: translateY(-1px); }
.side-btn.export { background-color: #3498db; }
.side-btn.import { background-color: #9b59b6; }
.side-btn.reset { background-color: #e74c3c; }


/* =================================================================
   3. 메인 레이아웃 및 패널 (Layout & Panels)
   ================================================================= */
.main-wrapper { flex: 1; display: flex; flex-direction: column; height: 100%; overflow: hidden; }
header { background-color: var(--bg-panel); border-bottom: 1px solid var(--border-color); padding: 0 20px; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; height: 50px; }
.content-area { flex: 1; overflow-y: auto; padding: 20px; background-color: var(--bg-main); }
.info-panel { background-color: var(--bg-panel); border-left: 4px solid var(--accent-blue); padding: 15px; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; border-radius: 8px; }

/* 액션 그리드: 수동(280px) : 자동(나머지) */
.action-grid { display: grid; grid-template-columns: 280px 1fr; gap: 20px; width: 100%; margin-bottom: 20px; align-items: start; }
.sub-build-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 12px; width: 100%; margin-bottom: 30px; }

/* =================================================================
   4. ⭐ 버튼 공통 및 텍스트 위치 고정 (4방향)
   ================================================================= */
.shop-item, .btn-large {
    position: relative !important; width: 100%; height: 95px !important;
    background-color: var(--bg-button); border: 1px solid #444;
    border-radius: 6px; cursor: pointer; transition: 0.1s; overflow: hidden; display: block !important;
}
.shop-item:hover, .btn-large:hover { background-color: var(--bg-button-hover); transform: translateY(-2px); }
.shop-item:active, .btn-large:active { transform: translateY(1px); }
.shop-item.disabled, .btn-large.disabled { opacity: 0.5; background-color: var(--bg-button-disabled); cursor: not-allowed; }

/* [좌측 상단] 이름 */
.si-name { position: absolute !important; top: 12px; left: 14px; right: 75px; font-weight: bold; color: #fff; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* [우측 상단] 레벨 */
.si-level { position: absolute !important; top: 12px; right: 14px; color: #ffd700; font-size: 0.85rem; text-align: right; }
/* [좌측 하단] 설명(생산/소모) */
.si-desc { position: absolute !important; bottom: 12px; left: 14px; right: 85px; font-size: 0.75rem; color: #aeb6ce; text-align: left; }
/* [우측 하단] 가격 */
.si-cost { position: absolute !important; bottom: 12px; right: 14px; font-size: 0.85rem; color: var(--primary-orange); font-weight: bold; text-align: right; }

/* 수동 작업용 버튼 (텍스트 가운데 정렬 유지) */
#manual-btn-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.btn-large { display: flex !important; align-items: center; justify-content: center; gap: 8px; color: #fff; font-weight: bold; }
/* 수동 버튼 색상 고정 (HTML 인라인 스타일 보호용) */
#btn-craft-plank { border-color: #f39c12 !important; }
#btn-gather-coal { border-color: #555 !important; }

/* 업그레이드 버튼 */
#upgrade-btn { width: 100%; height: 95px !important; background-color: var(--accent-green) !important; color: #fff; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; box-shadow: 0 4px 0 rgba(0,0,0,0.2); transition: 0.1s; display: flex; align-items: center; justify-content: center; text-align: center; word-break: keep-all; } 
#upgrade-btn:hover { filter: brightness(1.1); transform: translateY(-2px); } 
#upgrade-btn:active { transform: translateY(2px); box-shadow: none; } 
#upgrade-btn:disabled { background-color: #333 !important; color: #555 !important; cursor: not-allowed; box-shadow: none; transform: none; }
/* 'NEW' 배지 스타일 */
.new-badge {
    display: inline-block;       /* 글자 옆에 배치 */
    margin-left: 6px;            /* 이름과의 간격 */
    background: var(--primary-orange);
    color: white;
    font-size: 0.6rem;
    font-weight: bold;
    padding: 1px 5px;
    border-radius: 4px;
    vertical-align: middle;      /* 텍스트 높이 맞춤 */
    position: relative;
    top: -1px;                   /* 미세 높이 조정 */
    animation: pulse-new 1.5s infinite;
}

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




/* =================================================================
   5. 자원 카드 (Resource Cards)
   ================================================================= */
.sub-res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 20px; width: 100%; }
.res-card { background-color: var(--bg-panel); padding: 10px 15px; border-radius: 8px; min-height: 80px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 2px 4px rgba(0,0,0,0.2); position: relative; }
.res-card::after { content: ''; display: block; height: 3px; width: 100%; margin-top: 8px; border-radius: 2px; flex-shrink: 0; }
.res-amount { font-size: 1.3rem; font-weight: 700; color: #fff; margin: 2px 0; }
.res-mps { font-size: 0.8rem; color: var(--text-muted); }

/* 자원 색상 바 */
.res-card.wood::after { background-color: #27ae60; } .res-card.stone::after { background-color: #7f8c8d; }
.res-card.coal::after { background-color: #2c3e50; } .res-card.ironOre::after { background-color: #bdc3c7; }
.res-card.copperOre::after { background-color: #d35400; } .res-card.plank::after { background-color: #e67e22; }
.res-card.brick::after { background-color: #c0392b; } .res-card.ironPlate::after { background-color: #ecf0f1; }
.res-card.copperPlate::after { background-color: #f39c12; } .res-card.glass::after { background-color: #a29bfe; }
.res-card.sulfur::after { background-color: #f1c40f; } .res-card.steel::after { background-color: #4b6584; }
.res-card.concrete::after { background-color: #95a5a6; } .res-card.gear::after { background-color: #636e72; }
.res-card.circuit::after { background-color: #26de81; } .res-card.advCircuit::after { background-color: #eb4d4b; }
.res-card.processor::after { background-color: #0984e3; } .res-card.battery::after { background-color: #fed330; }
.res-card.oil::after { background-color: #2d3436; } .res-card.titaniumOre::after { background-color: #00cec9; }
.res-card.titaniumPlate::after { background-color: #81ecec; } .res-card.uraniumOre::after { background-color: #badc58; }
.res-card.fuelCell::after { background-color: #6ab04c; } .res-card.optics::after { background-color: #7ed6df; }
.res-card.nanobots::after { background-color: #686de0; } .res-card.aiCore::after { background-color: #a29bfe; }
.res-card.rocketFuel::after { background-color: #ff793f; } .res-card.advAlloy::after { background-color: #485460; }
.res-card.warpCore::after { background-color: #be2edd; } .res-card.plastic::after { background-color: #00cec9; }
.res-card.plastic::after { background-color: #55efc4; } .res-card.quantumData::after { background-color: #81ecec; }   
.res-card.gravityModule::after { background-color: #2d3436; } 

.res-card.scrapMetal::after { background-color: #b2bec3; } .res-card.magnet::after { background-color: #ff7675; }        
.res-card.chargedCrystal::after { background-color: #6c5ce7; } .res-card.heavyAlloy::after { background-color: #2d3436; }    
.res-card.fluxEnergy::after { background-color: #0984e3; } .res-card.nanoSteel::after { background-color: #74b9ff; }     
.res-card.plasmaCore::after { background-color: #d63031; } .res-card.magConcrete::after { background-color: #636e72; }   
.res-card.fluxLogic::after { background-color: #fdcb6e; }     


.res-card.bioFiber::after { background-color: #55efc4; } .res-card.spore::after { background-color: #fdcb6e; }        
.res-card.yeast::after { background-color: #ffeaa7; } .res-card.livingWood::after { background-color: #00b894; }    
.res-card.bioFuel::after { background-color: #badc58; } .res-card.rootBrick::after { background-color: #d63031; }    
.res-card.neuralFiber::after { background-color: #e17055; } .res-card.mutantCell::after { background-color: #a29bfe; }    
.res-card.geneticCode::after { background-color: #0984e3; } .res-card.pheromone::after { background-color: #fd79a8; }     
.res-card.biosphereCore::after { background-color: #81ecec; } 

.res-card.brokenParts::after { background-color: #7f8fa6; } .res-card.radiation::after   { background-color: #b8e994; }   
.res-card.pureWater::after   { background-color: #4bcffa; } .res-card.scrapCopper::after { background-color: #e58e26; }   
.res-card.leadPlate::after   { background-color: #353b48; } .res-card.bioSample::after   { background-color: #ff9ff3; }   
.res-card.dataCore::after    { background-color: #0abde3; } .res-card.microChip::after   { background-color: #10ac84; }   
.res-card.voidCrystal::after { background-color: #341f97; }   





/* 슬림 모드 전환 버튼 */
.btn-size-toggle { font-size: 0.7rem; color: #556; cursor: pointer; margin-right: 10px; padding: 2px 5px; border: 1px solid #333; border-radius: 3px; }
.btn-size-toggle:hover { color: var(--accent-blue); border-color: var(--accent-blue); }


.sub-res-grid.slim-mode { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important; gap: 5px !important; }
.sub-res-grid.slim-mode .res-card { min-height: 35px !important; height: 35px !important; padding: 0 10px !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; }
.sub-res-grid.slim-mode .res-card::after { position: absolute; left: 0; top: 0; width: 3px !important; height: 100% !important; margin: 0 !important; border-radius: 0; }
.sub-res-grid.slim-mode .res-header { margin: 0 !important; }
.sub-res-grid.slim-mode .res-body { flex-direction: row !important; align-items: center; gap: 8px; }
.sub-res-grid.slim-mode .res-body span { display: none; } /* '보유' 글자 숨김 */
.sub-res-grid.slim-mode .res-amount { font-size: 0.95rem !important; margin: 0 !important; }
.sub-res-grid.slim-mode .res-footer { margin: 0 !important; }
.sub-res-grid.slim-mode .res-mps { font-size: 0.7rem !important; }

/* === 자원 카드 경고 점멸 효과 === */

/* 1. 노란색 점멸 (자원 감소 중) */
@keyframes blink-yellow-bg {
    0%, 100% { background-color: var(--bg-panel); }
    50% { background-color: rgba(241, 196, 15, 0.15); } /* 노란색 살짝 */
}
.res-warning {
    animation: blink-yellow-bg 1.5s infinite;
    border: 1px solid rgba(241, 196, 15, 0.3) !important;
}

/* 2. 빨간색 점멸 (자원 고갈 및 가동 중단) */
@keyframes blink-red-bg {
    0%, 100% { background-color: var(--bg-panel); }
    50% { background-color: rgba(231, 76, 60, 0.25); } /* 빨간색 진하게 */
}
.res-danger {
    animation: blink-red-bg 0.8s infinite;
    border: 1px solid rgba(231, 76, 60, 0.6) !important;
}




/* =================================================================
   6. 카테고리 접기 & 연구소 & 시스템 (Collapsible & Others)
   ================================================================= */
.res-category-title, .build-category-title, .research-section-title { cursor: pointer; display: flex !important; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 4px; user-select: none; margin-bottom: 5px; }
.res-category-title:hover, .build-category-title:hover, .research-section-title:hover { background: rgba(255, 255, 255, 0.05); }

/* 강제 접기 규칙 */
.collapsed-content, #research-list-container .sub-build-grid.collapsed-content { display: none !important; }
.toggle-arrow { display: inline-block; transition: transform 0.3s; font-size: 0.7rem; color: #556; }
.collapsed .toggle-arrow { transform: rotate(-90deg); }

/* 연구소 전용 */
.research-item.done { background-color: #1a2a1a !important; border-color: #27ae60 !important; cursor: default; opacity: 0.8; }
#research-list-container { display: block; width: 100%; }

/* 전력 토글 & 로그 */
.switch { position: relative; display: inline-block; width: 40px; height: 20px; vertical-align: middle; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #95a5a6; transition: .4s; border-radius: 20px; }
.slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: #2ecc71; }
input:checked + .slider:before { transform: translateX(20px); }

#power-breakdown-container {
    width: 100%;
    /* 높이 제한을 없애서 내용에 따라 자동으로 늘어나게 함 */
    max-height: none !important; 
    overflow: visible !important; 
    border: none !important; /* 박스 테두리 제거 (선택 사항) */
    background: transparent !important; /* 배경 투명화 */
    padding: 0 !important;
}
#power-breakdown-container .sub-build-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; /* PC 4열 유지 */
    gap: 12px;
    width: 100%;
    margin-bottom: 30px;
}
.system-log-area { height: 150px; background-color: #0b0b10; border-top: 2px solid #000; display: flex; flex-direction: column; }
.log-content { flex: 1; overflow-y: auto; padding: 10px; font-family: 'Consolas', monospace; font-size: 0.85rem; }
.log-entry { display: flex; gap: 10px; margin-bottom: 3px; }
.log-time { color: #556; min-width: 65px; }
.log-highlight { color: var(--accent-green); }

/* ⭐ 업그레이드 버튼 - 프레스티지 가능 상태 강조 */
#upgrade-btn.prestige-ready {
    background: linear-gradient(135deg, #f1c40f, #f39c12) !important;
    color: #000 !important;
    box-shadow: 0 0 15px rgba(241, 196, 15, 0.5);
    border: 1px solid #fff !important;
}
#upgrade-btn.prestige-ready:hover {
    filter: brightness(1.2);
    transform: scale(1.02) translateY(-2px);
}


/* === 기술 계통도(Tech Tree) 최종 디자인 === */
#tech-tree-content {
    display: flex;
    flex-direction: column; /* 위에서 아래로 흐름 */
    gap: 15px;
    padding: 20px;
}

/* 티어 제목 (Tier 1: 생존의 시작 등) */
.tree-tier-header {
    width: 100%;
    background: linear-gradient(90deg, var(--bg-button), transparent);
    color: var(--accent-blue);
    padding: 10px 15px;
    font-weight: bold;
    font-size: 1rem;
    border-left: 4px solid var(--accent-blue);
    margin-top: 30px;
    margin-bottom: 10px;
}

.tree-tier-header:first-child { margin-top: 0; }

/* 노드들을 감싸는 가로 줄 */
.tree-nodes-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-left: 20px;
    position: relative;
}

/* 개별 연구 노드 */
.tree-node {
    background: var(--bg-panel);
    border: 1px solid #444;
    padding: 10px 15px;
    border-radius: 8px;
    min-width: 180px;
    position: relative;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.tree-node.done { border-color: var(--accent-green); background: rgba(78, 204, 163, 0.05); }
.tree-node.available { border-color: var(--accent-blue); cursor: pointer; border-style: dashed; }
.tree-node.locked { opacity: 0.4; filter: grayscale(1); }

/* 노드 내부 텍스트 */
.tree-node-parent { font-size: 0.65rem; color: #556; margin-bottom: 5px; }
.tree-node-name { display: block; font-weight: bold; font-size: 0.9rem; color: #fff; }
.tree-node-status { font-size: 0.7rem; margin-top: 5px; display: block; }

/* 환생포인트 */
#btn-prestige-final {
    background: linear-gradient(135deg, #f1c40f, #f39c12) !important;
    color: #000 !important; font-weight: bold; border: none; cursor: pointer;
    box-shadow: 0 0 15px rgba(241, 196, 15, 0.4);
}
#btn-prestige-final:hover { filter: brightness(1.2); }






/* === 워프 애니메이션 효과 === */
#warp-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #000; z-index: 100000; display: none; /* 기본 숨김 */
    align-items: center; justify-content: center; opacity: 0; transition: opacity 1s;
}
#warp-overlay.active { display: flex; opacity: 1; }

.warp-message-box { text-align: center; color: #fff; z-index: 2; }
#warp-main-msg { font-size: 2rem; letter-spacing: 5px; color: var(--accent-blue); text-shadow: 0 0 20px var(--accent-blue); margin-bottom: 10px; }
#warp-dest-msg { font-size: 1rem; color: #8892b0; }

/* 배경 별빛 가속 효과 */
.stars {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.2) 0%, transparent 70%);
    animation: warp-speed 0.5s linear infinite;
}
@keyframes warp-speed {
    0% { transform: scale(1); opacity: 0.3; }
    100% { transform: scale(2); opacity: 0; }
}











/* =================================================================
   7. 반응형 레이아웃 (Media Queries)
   ================================================================= */
@media (max-width: 1300px) {
    .action-grid { grid-template-columns: 1fr; }
    .sub-build-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 768px) {
    body { flex-direction: column; overflow-y: auto; }
    .sidebar { width: 100%; height: auto; position: sticky; top: 0; z-index: 1000; border-right: none; border-bottom: 1px solid #000; }
    .logo-area { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px; } .logo-area div { font-size: 1.5rem !important; } 
    .logo-area small, .nav-category { display: none; }
    .nav-menu { display: flex; flex-direction: row !important; overflow-x: auto; white-space: nowrap; background: var(--bg-sidebar); align-items: center; }
    .nav-item { flex: 0 0 auto; justify-content: center; padding: 10px 15px; border-left: none; border-bottom: 3px solid transparent; } 
    .nav-item.active { border-bottom: 3px solid var(--primary-orange); }
    .sidebar-data-btns { display: flex !important; flex-direction: row !important; gap: 5px; padding: 0 10px; margin-left: auto; }
    .side-btn { width: auto !important; min-width: 60px; padding: 5px 8px !important; font-size: 0.7rem !important; white-space: nowrap; }
    #manual-btn-list { grid-template-columns: repeat(2, 1fr) !important; } 
    .sub-res-grid { grid-template-columns: repeat(2, 1fr); } 
    .sub-build-grid { grid-template-columns: 1fr !important; }
    header { height: auto; flex-direction: row !important; justify-content: space-between; padding: 8px 15px !important; } 
    header h2 { font-size: 0.9rem; } 
    .header-status { font-size: 0.75rem; max-width: 60%; text-align: right; }
    .info-panel { flex-direction: column; text-align: center; gap: 10px; padding: 12px; } 
    #upgrade-btn { height: 70px !important; font-size: 0.9rem; } 
    .sub-res-grid, .sub-res-grid.slim-mode { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    #power-breakdown-container .sub-build-grid {
        grid-template-columns: 1fr !important;
    }
    .logo-area small { 
        display: block !important; /* 모바일에서도 숙련도는 표시 */
        font-size: 0.7rem !important;
        margin-top: 2px;
    }
    
    /* 헤더 타이틀과 숙련도가 한 줄에 잘 보이게 조정 */
    header h2 {
        display: flex;
        align-items: center;
        font-size: 0.9rem;
    }
}

.hidden { display: none !important; }