/* 1. 기본 설정 (Global) */
:root {
    /* 라이트 모드 변수 정의 */
    --card: #ffffff;
    --text: #1a1a1a;  /* 흐릿한 #333보다 더 진한 검정 */
    --border: #dddddd;
    --primary: #4CAF50;
    --secondary: #3a86ff;
    --radius: 12px;
}

body.dark-mode {
    /* 다크 모드 변수 정의 */
    --card: #2a2a2a;
    --text: #ffffff;
    --border: #444444;
    
    background-color: #1e1e1e;
    color: #ffffff;
}

body {
    background-color: var(--card); /* 이제 변수를 사용합니다 */
    color: var(--text);
    font-family: sans-serif;
    padding: 10px;
    margin: 0;
    transition: background-color 0.4s, color 0.4s;
}

/* 2. 레이아웃 (Layout) */
.container {
    width: 100%; /* 전체 폭을 쓰되 */
    max-width: 800px;
    margin: 0 auto;
    padding: 70px 20px 20px 20px; /* 좌우에 고정값(20px) 여백을 줌 */
    box-sizing: border-box; /* 패딩이 전체 폭에 포함되도록 설정 */
}

/* 1. 로고를 중앙에 배치하는 컨테이너 */
.header-container {
    display: flex;
    justify-content: center;
    padding: 0px 0 10px 0; /* 위쪽 여백 15px로 깔끔하게 고정 */
    position: relative;
    width: 100%;
}

/* 2. 로고 배지 (글자 주변에만 배경색) */
.logo-badge {
    background-color: #1a1a1a;
    color: rgb(234, 0, 0);
    padding: 8px 22px; /* 상하 8px, 좌우 22px로 비율 조정 */
    border-radius: 50px; /* 완벽하게 둥근 캡슐 모양 */
    font-size: 1.25rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 1px 16px rgba(33, 243, 121, 0.11);
    transition: background-color 0.2s, transform 0.2s;
}

.logo-badge:hover {
    background-color: #242424;
    transform: scale(1.03); /* 크기만 아주 살짝 키워서 클릭감 제공 */
}

/* 헤더 전체 배경 및 높이 고정 */
.main-header {
    width: 100%;
    padding: 10px 0;
    position: relative;
    top: 0;
    z-index: 1000;
}

.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center; /* 모든 요소의 높이 중앙 정렬 */
    padding: 0 20px;
    position: relative;
}

/* 3분할 섹션 */
.nav-section {
    flex: 1;
    display: flex;
    align-items: center;
}
.nav-section.center {
    justify-content: center;
    flex: 0 0 auto; /* 로고는 공간을 억지로 줄이지 않음 */
}
.nav-section.right {
    justify-content: flex-end;
}

/* 로고: 절대 잘리지 않게 설정 */
.logo-badge {
    background-color: #1a1a1a;
    color: rgb(234, 0, 0);
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap; /* 글자 잘림/줄바꿈 방지 필수! */
    box-shadow: 0 4px 10px rgba(33, 150, 243, 0.2);
}

/* 하단 안내 섹션 */
.info-section {
    margin: 40px auto;      /* 위아래 40px 여백, 중앙 정렬 */
    max-width: 600px;       /* PC에선 메뉴 2개 정도 너비 */
    width: auto;            /* [수정] 100% 대신 auto를 써서 부모 패딩 안으로 쏙 들어가게 함 */
    text-align: center;
    /* 모바일에서 다른 메뉴 타일들과 좌우 간격을 맞추기 위해 */
    box-sizing: border-box; 
}

.info-card {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius); /* 메뉴와 동일한 둥글기 */
    padding: 25px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    
    /* [추가] 모바일에서 박스 자체가 너무 찰싹 붙지 않게 */
    margin: 0 5px; 
}

/* 다크모드 대응 */
body.dark-mode .info-card {
    background-color: #2c2c2c;
    border-color: #444;
}

/* 문의처 영역 정렬 */
.contact-area {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px; /* 줄 간격 */
    align-items: center; /* 가로 중앙 정렬 */
}

.contact-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    color: var(--text);
    font-size: 0.95rem;
}

/* 버튼 공통 스타일 */
.link-btn {
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: bold;
    transition: transform 0.2s, filter 0.2s;
    display: inline-block;
}

.link-btn:hover {
    transform: translateY(-2px);
    filter: brightness(0.95);
}

/* 카톡 버튼 (노란색) */
.link-btn.kakao {
    background-color: #FEE500;
    color: #191919;
}

/* 네이버 카페 버튼 (초록색) */
.link-btn.cafe {
    background-color: #03C75A;
    color: #fff;
}

/* 다크모드 대응 */
body.dark-mode .info-card {
    background-color: #2c2c2c;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.contact-area {
    margin-top: 20px;
    display: flex;
    justify-content: center; /* 중앙 정렬 */
}

.button-group {
    display: flex;
    gap: 10px; /* 버튼 사이 간격 */
    width: 100%;
    max-width: 400px; /* 너무 퍼지지 않게 제한 */
}

.link-btn {
    flex: 1; /* 버튼 너비를 동일하게 배분 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 10px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9rem;
    transition: transform 0.2s, opacity 0.2s;
}

.brand-name {
    color: #e74c3c; /* 포인트 레드 색상 */
    font-weight: bold;
}

/* 카카오톡 버튼 색상 */
.kakao {
    background-color: #FEE500;
    color: #3C1E1E;
}

/* 네이버 카페 버튼 색상 */
.cafe {
    background-color: #03C75A;
    color: #fff;
}

.link-btn:hover {
    opacity: 0.9;
    transform: translateY(-2px); /* 살짝 떠오르는 효과 */
}

/* 햄버거 버튼 */
.hamburger-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px; /* 바 사이 간격 */
    padding: 5px;
}
.bar {
    width: 22px;
    height: 3px;
    background-color: #2E7D32;
    border-radius: 2px;
}

/* 드롭다운: 목록이 수직으로 나오게 설정 */
.nav-content {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 50px;
    left: 20px;
    background-color: white;
    min-width: 200px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    flex-direction: column; /* 목록을 세로로 정렬! */
    overflow: hidden;
}

/* 메뉴 내부 다크모드 섹션 */
.menu-dark-mode {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #f9f9f9; 
    border-top: 1px solid #eee;
}

/* 2. 다크모드 활성화 시 (구분감 확실하게!) */
body.dark-mode .menu-dark-mode {
    /* 배경을 메뉴 리스트보다 아주 살짝 더 어둡게 해서 구분감을 줍니다 */
    background-color: #242424; 
    border-top: 1px solid #444;
}

/* 3. 다크모드일 때 글자색 강제 설정 */
body.dark-mode .menu-dark-mode .theme-text {
    color: #ffffff !important; /* 순백색으로 올려서 가독성 확보 */
    font-weight: 700; /* 글자를 조금 더 두껍게 해서 강조 */
    opacity: 0.9; /* 너무 눈부시지 않게 살짝만 조절 */
}

/* (보너스) 햄버거 메뉴 리스트 자체의 다크모드 배경도 점검 */
body.dark-mode .nav-content {
    background-color: #2c2c2c; /* 전체 메뉴 배경 */
    border: 1px solid #444;
}

/* 메뉴 안의 텍스트 스타일 */
.menu-dark-mode .theme-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: #555;
}

body.dark-mode .menu-dark-mode .theme-text {
    color: #ccc;
}

/* 오른쪽 섹션이 비어도 중앙 정렬을 유지하기 위해 */
.nav-section.right {
    flex: 1; 
}

.nav-content.show { display: flex; } /* 열릴 때 flex로 변경 */

.nav-content a {
    padding: 15px 20px;
    text-decoration: none;
    color: #333;
    font-weight: 600;
    border-bottom: 1px solid #f0f0f0;
}
.nav-content a:last-child { border-bottom: none; }
.nav-content a:hover { background-color: #f8f9fa; }

/* 다크모드 대응 */
body.dark-mode .nav-content { background-color: #2c2c2c; }
body.dark-mode .nav-content a { color: #eee; border-color: #3d3d3d; }
body.dark-mode .nav-content a:hover { background-color: #3d3d3d; }

/* 3. 다크모드 토글 스위치 (Component) */
.theme-switch-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    /* absolute와 top을 제거하여 부모(.header-inner)의 align-items: center 설정을 따르게 합니다 */
    position: relative; 
    /* 오른쪽 끝 정렬은 이미 부모의 justify-content: space-between이 해주고 있으므로 여백 설정 불필요 */
}

.theme-switch {
    display: inline-block;
    height: 24px;
    position: relative;
    width: 44px;
}

.theme-switch input {
    display: none;
}

.slider {
    background-color: #ccc;
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    transition: 0.4s;
    border-radius: 34px;
}

.slider:before {
    background-color: #fff;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    position: absolute;
    transition: 0.4s;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

input:checked + .slider {
    background-color: #2E7D32;
}

input:checked + .slider:before {
    transform: translateX(20px);
}

/* 텍스트 높이 정렬 */
.theme-text {
    font-size: 14px;
    font-weight: 500;
    line-height: 1; /* 텍스트 줄높이를 맞춰서 스위치와 수평을 맞춤 */
}

.adjust-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: #4CAF50;
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    margin: 0 10px;
}

.adjust-btn:active {
    background: #388E3C;
    transform: scale(0.95);
}

input[type=range] {
    cursor: pointer;
}


/* 4. 메인 메뉴 타일 (index.html 전용) */
.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.menu-tile {
    background: white;
    border: 1px solid #ddd;
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    text-decoration: none;
    color: #333;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.menu-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

/* 5. 계산기 입력창 (calculator.html 전용) */

/* 기본 가로 배치 (PC) */
.input-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* PC에선 2열 */
    gap: 20px;
}

/* 모바일 대응 (768px 이하) */
@media (max-width: 768px) {
    .input-grid {
        grid-template-columns: 1fr; /* 모바일에선 1열 */
    }

    .control-wrapper {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .control-wrapper input {
        flex: 1; /* 인풋이 가운데 꽉 차게 */
        text-align: center;
    }

    /* +, - 버튼 스타일 */
    .btn-minus, .btn-plus {
        width: 40px;
        height: 40px;
        background-color: #f0f0f0;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 20px;
        cursor: pointer;
    }
    
    body.dark-mode .btn-minus, 
    body.dark-mode .btn-plus {
        background-color: #444;
        color: white;
        border-color: #555;
    }
}

input[type="range"].range-slider {
    width: 100%; 
    margin: 5px 0;
    /* 브라우저가 기본으로 넣는 양옆 여백을 제거 */
    padding: 0; 
    cursor: pointer;
    /* 슬라이더 높이를 고정해서 위치 이탈 방지 */
}

/* 버튼과 인풋을 감싸는 컨테이너 */
.control-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 8px; /* 전체를 둥글게 */
    overflow: hidden; /* 내부 요소가 삐져나오지 않게 */
    background: #fff;
    transition: border-color 0.3s;
}

/* 스위치 토글 디자인 */
.slider-toggle {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 20px;
}
.slider-toggle:before {
    position: absolute;
    content: "";
    height: 14px; width: 14px;
    left: 3px; bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
input:checked + .slider-toggle { background-color: #2196F3; } /* 체크 시 파란색(체력) */
input:checked + .slider-toggle:before { transform: translateX(20px); }


/* 포커스 되었을 때 테두리를 초록색으로! */
.control-wrapper:focus-within {
    border-color: #4CAF50;
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
}

/* +, - 버튼 공통 스타일 */
.btn-minus, .btn-plus {
    width: 40px;
    height: 40px;
    background-color: #f8f9fa;
    border: none; /* 기존 테두리 제거 */
    font-size: 18px;
    font-weight: bold;
    color: #555;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

/* 마우스 올렸을 때 (PC용 효과) */
.btn-minus:hover, .btn-plus:hover {
    background-color: #e9ecef;
    color: #4CAF50; /* 글자도 초록색으로 */
}

/* 숫자 입력창 스타일 */
.control-wrapper input[type="number"] {
    flex: 1;
    height: 15px;
    border: none !important; /* 내부 테두리 제거 */
    text-align: center;
    font-size: 15px;
    outline: none;
    background: transparent;
}

/* 다크모드 대응 */
body.dark-mode .control-wrapper {
    background: #333;
    border-color: #444;
}
body.dark-mode .btn-minus, 
body.dark-mode .btn-plus {
    background-color: #3d3d3d;
    color: #ccc;
}
body.dark-mode .btn-minus:hover, 
body.dark-mode .btn-plus:hover {
    background-color: #4a4a4a;
    color: #4CAF50;
}

.input-item {
    display: flex;
    flex-direction: column;
}

.input-item label {
    font-size: 0.9rem;
    margin-bottom: 5px;
    font-weight: bold;
}

.input-item input {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* 모달 배경 */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
}

/* 모달 컨텐츠 박스 */
.modal-content {
    background-color: var(--card); /* 상단에서 정의한 변수 사용 */
    color: var(--text);           /* 상단에서 정의한 변수 사용 */
    margin: 15% auto;
    padding: 30px;
    border-radius: var(--radius);
    width: 85%;
    max-width: 500px;
    position: relative;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    border: 1px solid var(--border);
    border-top: 5px solid var(--secondary); /* 확성기 테마 색상 */
    transition: background-color 0.3s, color 0.3s;
}

/* 닫기 버튼 */
.close-btn {
    position: absolute;
    right: 20px; top: 15px;
    font-size: 30px;
    cursor: pointer;
    color: #888;
}
.close-btn:hover { color: var(--primary); }

/* 모달 내부 문단 가독성 */
.modal-body p {
    color: var(--text);
    opacity: 1; /* 흐릿함 방지 */
    line-height: 1.7;
    margin-bottom: 12px;
    font-weight: 500; /* 글자를 살짝 두껍게 */
}

.main-title {
    display: flex;
    align-items: center;    /* 아이콘과 텍스트 높이 맞춤 */
    justify-content: center; /* 가로 중앙 정렬 */
    text-align: center;
    margin-top: 20px;
    margin-bottom: 30px;
    gap: 10px;
    width: 100%;
}

.notice-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* 배경 및 테두리 제거 */
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    
    /* [수정 포인트] 위로 4px 이동 (음수값이 위로 올라가는 것) */
    transform: translateY(-0px);

    /* 크기 및 위치 조정 */
    width: auto;   /* 고정 크기 해제 */
    height: auto;
    font-size: 28px; /* 아이콘 크기를 시원하게 키움 */
    cursor: pointer;
    vertical-align: middle;
    margin-left: 8px;
    
    /* 약간의 애니메이션만 유지 */
    transition: transform 0.2s ease;
}

.notice-badge:hover {
    transform: scale(1.2); /* 마우스 올리면 살짝 커지며 회전 */
}

.notice-badge:active {
    transform: scale(0.9); /* 클릭 시 쏙 들어가는 느낌 */
}

.modal-content h3 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-content h3::before {
    content: '📋'; /* 제목 앞에 추가 */
}

/* 모달 컨텐츠 박스 */
.modal-content {
    /* 1. 배경색: 변수가 없으면 흰색을 기본으로 하되, 다크모드 클래스에 따라 변하게 함 */
    background-color: var(--card) !important; 
    
    /* 2. 글자색: 배경에 맞춰 자동으로 변하도록 설정 */
    color: var(--text) !important; 
    
    margin: 15% auto;
    padding: 30px;
    border-radius: var(--radius);
    width: 85%;
    max-width: 500px;
    position: relative;
    box-shadow: 0 15px 40px rgba(0,0,0,0.4); /* 그림자도 좀 더 깊게 */
    border: 1px solid var(--border);
    
    /* 혹시 모를 대비: 변수가 아예 안 먹을 때를 위한 기본 배경 (다크모드 우선) */
    transition: background-color 0.3s, color 0.3s;
}

/* 모달 제목 */
.modal-title {
    color: var(--primary) !important;
    font-weight: bold;
    font-size: 1.2rem;
}

/* 구분선도 다크모드 변수 사용 */
.modal-content hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 15px 0;
}

/* 스탯 상승 (+) */
.stat-up {
    color: #e53935; /* 강조용 빨간색 */
    font-weight: bold;
}

/* 스탯 하락 (-) */
.stat-down {
    color: #1e88e5; /* 하락용 파란색 */
    font-weight: bold;
}

/* 변화 없음 */
.stat-none {
    color: #9e9e9e; /* 회색 */
}

/* 1. 인풋 아이템 배치 간격 조정 */
.input-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 15px;
}

/* 포인트 옆의 커다란 툴팁 아이콘 전용 */
.info-icon.large-icon {
    width: 22px;         /* 크기 확대 */
    height: 22px;        /* 크기 확대 */
    font-size: 15px;     /* 물음표 글자 크기 확대 */
    line-height: 22px;   /* 원의 높이와 맞춰서 중앙 정렬 */
    vertical-align: middle; /* 글자 라인에 맞춤 */
    margin-bottom: 2px;  /* 미세한 높이 조절 */
}

/* 2. 툴팁 아이콘 스타일 (초록색 상징색 활용) */
.info-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #4CAF50;
    color: white;
    border-radius: 50%;
    text-align: center;
    font-size: 11px;
    line-height: 16px;
    cursor: help;
    margin-left: 4px;
    position: relative;
    font-weight: bold;
}

/* 3. 툴팁 박스 기본 설정 (숨김 상태) */
.info-icon::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    width: 180px;
    white-space: normal;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none; /* 툴팁이 마우스 흐름을 방해하지 않도록 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* 4. PC 마우스 오버 & 모바일 터치 시 노출 */
.info-icon:hover::after,
.info-icon:active::after {
    opacity: 1;
    visibility: visible;
}

/* 다크모드일 때 툴팁 색상 대비 (선택 사항) */
body.dark-mode .info-icon::after {
    background-color: #ffffff;
    color: #222;
}

/* 6. 다크모드 상세 대응 (Dark Mode Overrides) */
body.dark-mode .menu-tile {
    background: #2d2d2d;
    color: white;
    border-color: #444;
}

body.dark-mode .input-item input {
    background-color: #333;
    color: white;
    border-color: #555;
}

/* 컨테이너 및 표 중앙 정렬 */
.container {
    max-width: 900px; /* 표가 길어지므로 폭을 살짝 넓힘 */
    margin: 0 auto;
    padding: 20px;
}

/* 탭 스타일 */
.tab-container {
    display: flex;
    margin-bottom: 20px;
    /* 여기서 border-bottom 코드가 있다면 삭제하거나 기본값으로 둡니다 */
}

/* [핵심] 유일 레벨 페이지 전용 빨간 줄 설정 */
.tab-container.one-page-tabs {
    border-bottom: 2px solid #d32f2f; /* 이 줄이 유일 레벨 페이지만 적용됨 */
}

/* 탭 버튼 스타일 */
.tab-btn {
    flex: 1; /* 4개 버튼이 동일한 너비를 가지도록 함 */
    padding: 10px 2px; /* 좌우 패딩을 최소화(2px) */
    font-size: 0.9rem; /* 폰트 크기를 살짝 줄임 */
    white-space: nowrap; /* 글자가 절대 줄바꿈되지 않게 함 */
    text-align: center;
    border-radius: 6px;
}

/* 모바일 전용 (더 작은 화면 대응) */
@media (max-width: 380px) {
    .tab-btn {
        font-size: 0.8rem; /* 아주 작은 화면에선 폰트를 더 작게 */
        padding: 8px 1px;
    }
}

/* 인게임 색상 적용 */
.tab-btn:nth-child(1).active { background-color: #FFA000; color: white; } /* 전설: 주황 */
.tab-btn:nth-child(2).active { background-color: #D32F2F; color: white; } /* 신화: 빨강 */
.tab-btn:nth-child(3).active { background-color: #FDD835; color: #333; }  /* 유일: 노랑 */
.tab-btn.active.calc-tab {
    background-color: #4CAF50; /* 초록색 */
    color: white;
    border-color: #388E3C;
}

/* 계산기 내부 버튼도 초록색으로 맞춤 */
.do-calc-btn {
    width: 100%;
    padding: 15px;
    background: #4CAF50; /* 초록색으로 변경 */
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
    transition: background 0.2s;
}

.do-calc-btn:active {
    background: #388E3C;
}

/* 유일 전용 탭 버튼 - 둥근 모서리 디자인 */
.one-tab-btn {
    flex: 1;
    padding: 12px;
    border: 1px solid #ddd;
    background-color: #f9f9f9; 
    cursor: pointer;
    font-weight: bold;
    color: #666;
    
    /* [포인트] 상단 모서리만 둥글게 (영웅 강화 느낌) */
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    
    /* 버튼 사이 간격을 살짝 주면 더 둥근게 잘 보여요 */
    margin: 0 2px; 
    
    outline: none;
    transition: all 0.2s ease;
    border-bottom: none; /* 탭 느낌을 내기 위해 아래 선은 제거 */
}

/* 활성화된 탭 (빨간색 + 둥근 느낌 강조) */
.one-tab-btn.active {
    background-color: #d32f2f;
    color: #ffffff;
    border-color: #d32f2f;
    /* 클릭된 느낌을 주기 위해 살짝 위로 솟아오르는 효과 */
    transform: translateY(-2px);
    box-shadow: 0 -2px 10px rgba(211, 47, 47, 0.2);
}

/* 1. 유일 전용 탭 활성화 색상 (빨간색) */
.one-tab-btn.active {
    background: #d32f2f !important;
    color: white !important;
}

/* 다크모드에서도 둥근 테두리 색상 조절 */
body.dark-mode .one-tab-btn {
    background-color: #2c2c2c;
    border-color: #444;
    color: #aaa;
}

/* 2. 표가 쏠리지 않도록 감싸는 래퍼 */
.one-table-wrapper {
    width: 100%;
    overflow-x: auto; /* 모바일 대응 */
    display: flex;
    justify-content: center; /* 표를 중앙으로 */
}

/* 3. 유일 전용 표 스타일 */
.one-level-table {
    width: 100%;
    max-width: 800px;    /* 너무 퍼지지 않게 적정 너비 고정 */
    border-collapse: collapse;
    table-layout: fixed; /* 셀 너비 고정으로 쏠림 방지 */
    margin: 10px auto;   /* 확실한 중앙 정렬 */
}

.one-level-table th, 
.one-level-table td {
    border-bottom: 1px solid #eee;
    padding: 12px 5px;
    text-align: center;  /* 텍스트 중앙 정렬 */
    font-size: 0.9rem;
    word-break: keep-all;
}

/* 다크모드 대응 */
body.dark-mode .one-level-table th,
body.dark-mode .one-level-table td {
    border-color: #444;
}

/* 4. 열 너비 배분 (전체 100%) */
.one-level-table th:nth-child(1) { width: 15%; } /* 레벨 */
.one-level-table th:nth-child(2) { width: 30%; } /* 마정석 */
.one-level-table th:nth-child(3) { width: 40%; } /* 골드 */
.one-level-table th:nth-child(4) { width: 15%; } /* 포인트 */

.shortcut-guide {
    margin-top: 25px;
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.03);
    border-radius: 8px;
    border: 1px dashed #ccc;
    text-align: left; /* 왼쪽 정렬로 변경하여 안정감 부여 */
}

/* 제목 부분도 똑같이 적용하고 싶다면 */
.shortcut-guide h4 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 15px;
    color: var(--text-color); /* 제목도 모드에 따라 하얗게/검게 변함 */
    text-align: center;
    font-weight: bold;
}

/* 핵심: PC에서는 2열, 모바일에서는 1열 */
.guide-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 기본 2열 배치 */
    gap: 12px 20px; /* 행과 열 간격 설정 */
}

.guide-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    border-bottom: 1px solid rgba(0,0,0,0.05); /* 항목 간 구분선 */
    padding-bottom: 4px;
}

.guide-item .label {
    /* 계산 버튼이나 일반 텍스트처럼 모드에 따라 자동 변경되는 변수 사용 */
    color: var(--text-color); 
    font-weight: 600; /* 조금 더 또렷하게 보이도록 두께 유지 */
}

.guide-item .value {
    font-weight: bold;
    color: #d32f2f;
}

/* 모바일 화면 (너비가 좁을 때) 처리 */
@media (max-width: 600px) {
    .guide-grid {
        grid-template-columns: 1fr; /* 모바일은 다시 1열로 */
        gap: 8px;
    }
}


/* 성장의 비약 전체 행 */
.potion-row {
    display: flex;
    align-items: center; /* [핵심] 높낮이를 중앙으로 칼정렬 */
    background: rgba(0,0,0,0.03);
    padding: 15px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    gap: 30px; /* 문구와 옵션 사이 간격 넉넉히 */
}

/* '성장의 비약' 문구 */
.potion-title {
    font-weight: bold;
    font-size: 1rem;
    color: #333;
    white-space: nowrap; /* 줄바꿈 방지 */
}

/* 체크박스 그룹 */
.potion-options {
    display: flex;
    gap: 25px; /* 20%와 50% 사이 간격 */
    flex: 1;
}

/* 개별 체크박스 아이템 */
.potion-item {
    display: flex;
    align-items: center; /* 체크박스와 숫자 높낮이 맞춤 */
    gap: 8px; /* 체크박스와 숫자 사이 간격 */
    cursor: pointer;
    font-size: 1rem;
    color: #555;
    transition: color 0.2s;
}

.potion-item:hover {
    color: #d32f2f; /* 마우스 올리면 빨간색 강조 */
}

/* 체크박스 크기 조절 (너무 작아서 안맞아 보일 수 있음) */
.potion-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    margin: 0; /* 기본 마진 제거해서 뒤틀림 방지 */
}

/* 모바일 대응 */
@media (max-width: 600px) {
    .potion-row {
        gap: 15px;
        padding: 12px;
    }
    .potion-options {
        gap: 15px;
    }
}

/* [공통] 성장의 비약 행 스타일 */
.potion-row {
    display: flex;
    align-items: center; /* 수평 정렬 */
    background: #f1f1f1; /* 밝은 모드 배경 */
    padding: 15px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    gap: 30px;
    transition: background 0.3s, color 0.3s;
}

.potion-title {
    font-weight: bold;
    white-space: nowrap;
    color: #333;
}

.potion-options {
    display: flex;
    gap: 25px;
    align-items: center; /* 내부 아이템들도 수평 정렬 */
}

.potion-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    line-height: 1; /* 텍스트 높이 초기화로 수평 맞춤 */
}

/* 체크박스 자체 마진 제거 (높낮이 뒤틀림 주범) */
.potion-item input[type="checkbox"] {
    margin: 0;
    width: 18px;
    height: 18px;
    vertical-align: middle;
}

/* 전체 컨테이너 배경 및 간격 */
.level-container {
    display: flex;
    flex-direction: column; /* 기본(모바일): 세로 정렬 */
    gap: 20px;
    background: rgba(0,0,0,0.02);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 20px;
}

/* 개별 레벨 박스 */
.level-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 라벨 스타일 */
.level-label {
    font-weight: bold;
    font-size: 1rem;
    color: #333;
}
.level-label span { color: #4CAF50; }

/* 슬라이더와 +/- 버튼 정렬 */
.slider-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}
.slider-wrapper input[type="range"] {
    flex: 1;
}

/* ==========================================
   💻 PC 버전 (600px 이상): 가로 병렬 배치
   ========================================== */
@media (min-width: 601px) {
    .level-container {
        flex-direction: row; /* 가로로 배치 */
        justify-content: space-between;
    }

    .level-box {
        flex: 1; /* 반씩 나눠 가짐 */
        padding: 0 10px;
    }

    /* 중간에 구분선 효과 (선택사항) */
    .level-box:first-child {
        border-right: 1px solid rgba(0,0,0,0.05);
    }
}

/* 다크모드 대응 */
body.dark-mode .level-container { background: rgba(255,255,255,0.05); }
body.dark-mode .level-label { color: #eee; }
body.dark-mode .level-box:first-child { border-right-color: rgba(255,255,255,0.1); }

/* ==========================================
   🌙 다크 모드 대응 (body.dark-mode 기준)
   ========================================== */
body.dark-mode .potion-row {
    background: #2c2c2c; /* 다크모드용 어두운 배경 */
}

body.dark-mode .potion-title {
    color: #eee; /* 밝은 글자색 */
}

body.dark-mode .potion-item {
    color: #bbb;
}

body.dark-mode .potion-item:hover {
    color: #ff4d4d; /* 다크모드 강조색 */
}

/* 모바일 간격 조정 */
@media (max-width: 600px) {
    .potion-row {
        gap: 15px;
        padding: 12px;
    }
}

/* 탭 활성화 상태 (인게임 컬러) */
.tab-btn.active:nth-child(1) { background-color: #FFA000; color: white; border-color: #FF8F00; }
.tab-btn.active:nth-child(2) { background-color: #D32F2F; color: white; border-color: #B71C1C; }
.tab-btn.active:nth-child(3) { background-color: #FDD835; color: #333; border-color: #FBC02D; }

/* 표 중앙 정렬 */
.tab-content { display: none; }
.tab-content.active { display: block; }

.upgrade-table {
    width: 100%;
    margin: 0 auto;
    border-collapse: collapse;
    table-layout: fixed; /* [중요] 열 너비를 고정합니다 */
    text-align: center;  /* [추가] 표 안의 모든 기본 텍스트 중앙 정렬 */
}

/* 열 너비 비율 설정 (합계 100%) */
.upgrade-table th:nth-child(1), .upgrade-table td:nth-child(1) { width: 15%; }
.upgrade-table th:nth-child(2), .upgrade-table td:nth-child(2) { width: 55%; }
.upgrade-table th:nth-child(3), .upgrade-table td:nth-child(3) { width: 30%; }

/* 헤더와 셀 공통 패딩 */
.upgrade-table th, 
.upgrade-table td {
    padding: 12px 5px; /* 상하 12px, 좌우 5px */
    vertical-align: middle; /* 세로 방향 중앙 정렬 */
    word-break: keep-all;   /* 단어 단위로 줄바꿈 방지 (한글 가독성) */
}

/* 두 번째 열(재료) 중앙 정렬 확인 */
.upgrade-table td:nth-child(2) {
    text-align: center; /* 왼쪽 정렬 대신 중앙 정렬로 변경 */
}

/* 툴팁 전체 컨테이너 */
.tooltip {
    position: relative;
    display: inline-block;
    cursor: help;
    color: #d32f2f; /* 아이콘 색상 (빨간색 계열) */
    font-weight: bold;
    margin-left: 5px;
}

/* 툴팁 박스 (기본적으로 숨김) */
.tooltip .tooltip-text {
    visibility: hidden;
    width: 130px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px;
    position: absolute;
    z-index: 10;
    bottom: 115%; /* 위로 나타나게 설정 */
    margin-left: -100px; /* 중앙 정렬 */
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 0.8rem;
    font-weight: normal;
    line-height: 1.4;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* 마우스 오버 시 표시 */
.tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* 다크모드에서는 배경색을 살짝 조정 */
body.dark-mode .tooltip .tooltip-text {
    background-color: #555;
}
body.dark-mode .tooltip .tooltip-text::after {
    border-color: #555 transparent transparent transparent;
}

/* 비고란 글자가 너무 길어질 경우 대비 */
.note-cell {
    font-size: 0.85rem;
    color: #777;
}
body.dark-mode .note-cell {
    color: #bbb;
}

.calc-card {
    background: #fff;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    margin-top: 10px;
}
body.dark-mode .calc-card { background: #2c2c2c; }

.add-hero-btn {
    width: 100%;
    padding: 10px;
    background: #f8f9fa;
    border: 2px dashed #ccc;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 15px;
    font-weight: bold;
    color: #666;
    transition: all 0.2s;
}

.add-hero-btn:hover {
    background: #e9ecef;
    border-color: #aaa;
}

body.dark-mode .add-hero-btn {
    background: #333;
    border-color: #555;
    color: #aaa;
}

/* 영웅 항목 상단 레이아웃 */
.hero-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

/* 삭제 버튼 스타일 */
.remove-hero-btn {
    font-size: 0.85rem;
    padding: 2px 8px;
    border-radius: 4px;
    transition: background 0.2s;
}

.remove-hero-btn:hover {
    background: rgba(255, 68, 68, 0.1);
}

/* 추가 버튼과 삭제 버튼 간의 시각적 구분 */
.add-hero-btn {
    margin-top: 10px;
    /* 기존 스타일 유지 */
}

.select-group { margin: 15px 0; text-align: left; }
.select-group label { display: block; font-weight: bold; margin-bottom: 8px; color: #666; }
body.dark-mode .select-group label { color: #aaa; }

.select-row { display: flex; gap: 10px; }
.select-row select {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #ddd;
    font-size: 1rem;
    background-color: #fff;
}
body.dark-mode .select-row select { background: #333; color: #fff; border-color: #444; }

.do-calc-btn {
    width: 100%;
    padding: 15px;
    background: #444;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
}

.result-box {
    margin-top: 20px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    font-size: 1.1rem;
    line-height: 1.8;
    text-align: center; /* [추가] 텍스트 중앙 정렬 */
    border: 1px solid #eee;
}

/* 결과 내 강조 텍스트 정렬 */
.result-box b, .result-box span {
    display: inline-block; /* 줄바꿈 시에도 정렬 유지 */
    margin: 2px 0;
}


body.dark-mode .result-box { background: #383838; }

.highlight { color: #D32F2F; font-weight: bold; font-size: 1.5rem; }

/* 다크모드일 때 모달 강제 색상 지정 */
body.dark-mode .modal-content {
    background-color: #2a2a2a !important; /* 다크모드 카드 배경색 */
    color: #f0f0f0 !important;
    border-color: #444 !important;
}

.hero-thumb {
    cursor: pointer;
    border-radius: 6px; /* 약간의 곡률만 주어 부드러운 사각형으로 만듦 */
    transition: transform 0.2s, border 0.2s;
    border: 2px solid transparent;
    overflow: hidden;
}

/* 활성화되었을 때 사각형 테두리 강조 */
.hero-thumb.active { 
    border-color: #4CAF50; 
    box-shadow: 0 0 8px rgba(211,47,47,0.4); 
}

.hero-thumb:hover { transform: scale(1.1); }

.hero-thumb img { width: 100%; display: block; }



.detail-header { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }

/* 상세 영역의 이미지도 사각형으로 */
.detail-header img { 
    width: 100px; /* 크기를 조금 키웠습니다 */
    border-radius: 8px; 
    object-fit: cover; /* 이미지가 찌그러지지 않게 */
}

/* 제목은 항상 중앙 */
.page-title { text-align: center; margin-bottom: 30px; }

/* 안내 문구 스타일 */
.placeholder-text {
    text-align: center;
    color: #999;
    margin-top: 150px;
}

/* 2단 레이아웃 (PC) */
.hero-app-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    max-width: 1000px;
    margin: 0 auto;
    padding: 10px; /* 양옆 여백을 주어 화면 끝에 붙지 않게 함 */
}

/* 왼쪽 그리드 영역 */
.hero-grid {
    flex: 0 0 320px; 
    display: grid;
    margin-bottom: 30px;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}


/* 오른쪽 상세 카드 (다크모드 적용) */
.hero-detail-card {
    flex: 1;
    /* 고정된 색상 대신 변수 사용 */
    background: var(--card-bg, #1e1e1e); 
    color: var(--text-color, #e0e0e0);

    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    border: 1px solid var(--border-color, #333); /* 테두리도 변수 처리 가능 */
    position: sticky;
    top: 20px;
    min-width: 0;
    min-height: 400px;
}

/* 모바일 대응 (반응형) */
@media (max-width: 768px) {
    .hero-app-layout {
        flex-direction: column; /* 세로로 쌓기 */
        padding: 15px;
    }
    .hero-grid {
        flex: none;
        width: 100%;
        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); /* 화면 꽉 차게 */
    }
    .hero-detail-card {
        width: 100%; /* 화면 밖으로 나가지 않게 */
        box-sizing: border-box; /* 패딩을 너비에 포함 */
    }
}

/* 카테고리 태그 공통 스타일 (다크모드용) */
.skill-tag {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    color: #fff;
    text-transform: uppercase;
    margin-right: 5px;
}

.category-기본 { background: #444; }
.category-특수 { background: #0d47a1; }
.category-궁극 { background: #4a148c; }

/* 스킬 아이템 박스 내 간격 살짝 조정 */
.skill-item {
    margin-bottom: 12px;
    padding: 15px;
    border-left: 4px solid #d32f2f;
    /* 라이트 모드일 때 너무 어둡지 않게 투명도 조절 */
    background: var(--item-bg, rgba(0, 0, 0, 0.05)); 
    border-radius: 0 10px 10px 0;
}

/* 스킬 제목 줄 */
.skill-title-row {
    font-weight: bold;
    font-size: 15px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--text-color); /* 라이트일 땐 검정, 다크일 땐 흰색으로 자동 변환 */
}

/* 스킬 이름 전용 색상 (필요시) */
.skill-name {
    color: var(--text-color);
}

/* 강화 수치 배지 (노란색은 양쪽 다 잘 보여서 고정해도 됨) */
.upgrade-badge {
    color: #ffca28;
    font-size: 13px;
    font-weight: bold;
    background: rgba(255, 202, 40, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(255, 202, 40, 0.3);
}

/* 스킬 설명 */
.skill-desc {
    font-size: 13px;
    color: var(--text-muted, #bbb); /* 라이트/다크에 맞춰 조금 흐린 텍스트 */
    margin-top: 10px;
    line-height: 1.6;
}

/* 사거리, 쿨타임 */
.skill-meta {
    font-size: 12px;
    margin-top: 10px;
    font-weight: bold;
    opacity: 0.9;
    display: flex;
    gap: 15px; /* 항목 사이의 간격을 15px만큼 띄움 */
    align-items: center;
    color: var(--text-muted); /* 텍스트 색상을 살짝 흐리게 하면 더 세련되어 보입니다 */
}

/* 항목 사이에 구분선을 넣고 싶다면 */
.meta-item + .meta-item::before {
    content: "|";
    margin-right: 15px;
    color: #ccc;
}

/* 라이트 모드에서는 배경이 밝으므로, 흰색 대신 조금 더 진한 색이나 배경색을 주어 대비를 높일 수 있습니다 */
:root .stat-highlight {
    color: #d32f2f;      /* 예: 라이트 모드에서는 포인트 컬러인 빨간색 사용 */
    background: rgba(0, 0, 0, 0.05); /* 연한 배경을 깔아 가독성 확보 */
    padding: 0 2px;
    border-radius: 3px;
}

body.dark-mode .stat-highlight {
    color: #ffffff;      /* 다크 모드에서는 확실한 흰색 */
}

.stat-highlight {
    color: #ffffff;
    font-weight: bold;
    letter-spacing: 0.5px; /* 숫자와 소수점 사이를 아주 미세하게 띄워 가독성 상승 */
    /* 다크모드에서 더 빛나게 하고 싶다면 */
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.2); 
}