/* [신규] 웹 폰트 정의 */
@font-face {
    font-family: 'DnfTemperedBlade';
    src: url('//cdn.df.nexon.com/img/common/font/DNFForgedBlade-Light.otf') format('opentype');
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: 'DnfTemperedBlade';
    src: url('//cdn.df.nexon.com/img/common/font/DNFForgedBlade-Medium.otf') format('opentype');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'DnfTemperedBlade';
    src: url('//cdn.df.nexon.com/img/common/font/DNFForgedBlade-Bold.otf') format('opentype');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'MuseumCulturalFoundationClassic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/국립박물관문화재단클래식L.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: 'MuseumCulturalFoundationClassic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/국립박물관문화재단클래식M.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'MuseumCulturalFoundationClassic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/국립박물관문화재단클래식B.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'Isamanru';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicLight.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: 'Isamanru';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicMedium.woff') format('woff');
    font-weight: normal; /* 400 or 500 */
    font-display: swap;
}
@font-face {
    font-family: 'Isamanru';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicBold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

/* --- 공용 스켈레톤 UI 스타일 --- */
@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

.skeleton {
    background-color: #2c2f33;
    background-image: linear-gradient(to right, #2c2f33 0%, #3e4247 20%, #2c2f33 40%, #2c2f33 100%);
    background-repeat: no-repeat;
    background-size: 2000px 104%;
    animation: shimmer 2s infinite linear;
    border-radius: 4px;
}

.skeleton-build-card {
    display: flex;
    gap: 15px;
    background-color: #2a2a2a;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 15px;
    align-items: center;
}
.skeleton-build-card .portrait {
    width: 80px;
    height: 140px;
    flex-shrink: 0;
}
.skeleton-build-card .info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.skeleton-build-card .line {
    height: 16px;
    border-radius: 4px;
}
/* [수정 끝] */

/* --- 기본 스타일 (재구성) --- */
body, h1, h2, h3, h4, ul, p, button, input, select, textarea {
    margin: 0;
    padding: 0;
    /* [수정] 사이트 전체 기본 폰트 변경 */
    font-family: 'DnfTemperedBlade', sans-serif;
    font-weight: 300; /* Light 가중치를 기본으로 설정 */
}

body {
    padding-top: 60px;
    background-color: #121212;
    color: #e0e0e0;
}

main {
    padding: 20px;
}

.content {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* [수정] 섹션 부제목 폰트 적용 */
h2, h3, h4, .card-title, .build-name, .build-title {
    font-family: 'MuseumCulturalFoundationClassic', sans-serif;
    font-weight: 500;
}

h1 {
    margin-bottom: 1.5rem;
}

/* --- 네비게이션 바 --- */
.navbar {
    background-color: #222;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}
.navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    padding: 0 20px;
}
/* [신규] 로고 및 페이지 제목 폰트 적용 */
.navbar-logo, h1 {
    font-family: 'Isamanru', sans-serif;
    font-weight: 700; /* Bold */
}
.navbar-logo {
    color: #fff;
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: bold;
}
.nav-right-menu {
    display: flex;
    align-items: center;
    gap: 15px;
}
/* [수정] 로고와의 간격을 위해 margin-left 추가 */
.nav-menu {
    display: flex;
    list-style: none;
    margin-right: auto;
    margin-left: 2rem;
}
/* [수정] display: flex 제거하여 하이라이트 문제 해결 */
.nav-item {
    position: relative;
}
.nav-links {
    color: #fff;
    text-decoration: none;
    padding: 0.5rem 1rem;
    display: block;
    background: none;
    border: none;
    font-size: inherit;
    cursor: pointer;
}
.nav-links:hover {
    background-color: #555;
    border-radius: 4px;
}
.nav-links.active-link {
    color: #00aaff;
    font-weight: bold;
}
.menu-icon {
    display: none;
    cursor: pointer;
    padding: 5px;
}
.menu-icon .bar {
    width: 25px;
    height: 3px;
    background-color: #fff;
    margin: 5px 0;
    transition: 0.4s;
    display: block; /* [수정] 아이콘이 항상 보이도록 명시 */
}

/* [수정] 드롭다운 공통 스타일 */
.dropdown {
    position: relative;
}
.dropdown-content {
    display: none;
    position: absolute;
    top: 100%; /* [수정] 간격 제거 */
    right: 0;
    background-color: #333;
    min-width: 160px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    z-index: 10;
    list-style: none;
    padding: 5px 0;
    border-radius: 4px;
}
.dropdown-content.show {
    display: block;
}
.dropdown-content li a {
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    display: block;
    text-align: left;
}
.dropdown-content li a:hover {
    background-color: #555;
}

/* [수정] 데스크탑에서만 hover 효과 적용 */
@media (min-width: 769px) {
    .nav-item.dropdown:hover > .dropdown-content {
        display: block;
    }
    .mobile-only { display: none !important; } /* 데스크탑에서 모바일 전용 메뉴 숨김 */
}

/* 언어 변경 및 사용자 메뉴 UI 스타일 */
.language-switcher, #user-menu {
    height: 100%;
}
.dropdown-trigger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0; /* 이 규칙이 빌드 메뉴의 padding을 덮어쓰고 있었습니다. */
    display: flex;
    align-items: center;
    height: 100%;
}

/* [신규] nav-links와 dropdown-trigger가 함께 있는 경우, padding을 nav-links 기준으로 복원 */
.nav-links.dropdown-trigger {
    padding: 0.5rem 1rem;
    height: auto;
}
.globe-icon svg {
    width: 26px;
    height: 26px;
    fill: #ccc;
    transition: fill 0.2s;
}
.globe-icon:hover svg {
    fill: #fff;
}
#login-btn {
    font-size: 0.9rem;
    padding: 6px 12px;
    border: 1px solid #555;
    background-color: #333;
    border-radius: 4px;
    transition: all 0.2s;
}
#login-btn:hover {
    background-color: #444;
    border-color: #777;
}
.profile-pic {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}


/* --- 공통 UI 요소 (검색창, 필터 버튼 등) --- */
.search-container {
    margin-bottom: 20px;
}
.search-input {
    width: 100%;
    padding: 12px;
    font-size: 1.1rem;
    background-color: #1e1e1e;
    border: 1px solid #555;
    border-radius: 5px;
    color: #e0e0e0;
}
.filter-container {
    margin-bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.filter-btn {
    padding: 8px 16px;
    font-size: 0.9rem;
    border: 1px solid #555;
    background-color: #333;
    color: #ccc;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.2s;
}
.filter-btn:hover { background-color: #444; }
.filter-btn.active { background-color: #007bff; border-color: #007bff; color: white; }


/* --- 회상 페이지 전용 스타일 --- */
.filter-section {
    background-color: #2a2a2a;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 2rem;
    border: 1px solid #444;
}
.advanced-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 40px;
}
.filter-group {
    border: none;
    padding: 0;
    margin: 0;
    min-width: 150px;
}
.filter-group legend {
    font-weight: bold;
    color: #00aaff;
    margin-bottom: 10px;
    font-size: 1rem;
}
.filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.filter-options .filter-toggle { display: none; }
.filter-options .filter-label {
    padding: 5px 10px;
    font-size: 0.85rem;
    border: 1px solid #555;
    background-color: #333;
    color: #ccc;
    cursor: pointer;
    border-radius: 15px;
    transition: all 0.2s;
    user-select: none;
}
.filter-options .filter-label:hover { background-color: #444; border-color: #777; }
.filter-options .filter-toggle:checked + .filter-label {
    background-color: #007bff;
    border-color: #007bff;
    color: white;
    font-weight: bold;
}


/* --- 카드 공통 스타일 --- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.card { background-color: #2a2a2a; border: 1px solid #444; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; transition: all 0.2s ease-in-out; cursor: pointer; }
.card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); border-color: #007bff; }
.card-header { display: flex; align-items: center; padding: 15px; gap: 15px; background-color: #333; }
.card-icon { width: 64px; height: 64px; object-fit: contain; flex-shrink: 0; background-color: #222; border-radius: 5px; }
.card-header-info { display: flex; flex-direction: column; align-items: flex-start; }
.item-type { font-size: 0.8rem; color: #aaa; margin-bottom: 4px; }
.card-title { margin: 0; font-size: 1.1rem; color: #fff; line-height: 1.2; }
.card-body { padding: 15px; font-size: 0.9rem; line-height: 1.5; flex-grow: 1; border-top: 1px solid #444; }
.sprite-icon { height: 1.1em; vertical-align: bottom; margin: 0 1px; }
.text-yellow { color: #f1c40f; font-weight: bold; }
.text-cyan { color: #16D7FF; }


/* --- 태그 스타일 --- */
.tags-container { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.item-tag { font-size: 0.8rem; padding: 3px 8px; border-radius: 12px; background-color: #4f4f4f; color: #e0e0e0; line-height: 1.4; }
.item-tag.rarity-tag { font-weight: bold; color: #111; }
.item-tag.rarity-tag.Common { background-color: #e4f0f1; } .item-tag.rarity-tag.Rare { background-color: #35fbfd; } .item-tag.rarity-tag.Epic { background-color: #c85ef9; } .item-tag.rarity-tag.Legendary { background-color: #fe3e35; } .item-tag.rarity-tag.Unique { background-color: #fef24a; } .item-tag.rarity-tag.Character, .item-tag.rarity-tag.Identity { background-color: #f1b050; }
.item-tag.star-category { font-weight: bold; color: #fff; }
.item-tag.star-category.Destruction { background-color: #c0392b; } .item-tag.star-category.Life { background-color: #27ae60; } .item-tag.star-category.Imagination { background-color: #2980b9; } .item-tag.star-category.Flexible { background-color: #f39c12; }


/* --- 희귀도/카테고리별 카드 스타일 --- */
.rarity-bg.Common { background: linear-gradient(90deg, #e4f0f122, #333 60%); } .rarity-bg.Rare { background: linear-gradient(90deg, #35fbfd22, #333 60%); } .rarity-bg.Epic { background: linear-gradient(90deg, #c85ef922, #333 60%); } .rarity-bg.Legendary { background: linear-gradient(90deg, #fe3e3522, #333 60%); } .rarity-bg.Unique { background: linear-gradient(90deg, #fef24a22, #333 60%); } .rarity-bg.Character, .rarity-bg.Identity { background: linear-gradient(90deg, #f1b05022, #333 60%); }
.star-category-bg.Destruction { background: linear-gradient(90deg, #c0392b44, #333 60%); } .star-category-bg.Life { background: linear-gradient(90deg, #27ae6044, #333 60%); } .star-category-bg.Imagination { background: linear-gradient(90deg, #2980b944, #333 60%); } .star-category-bg.Flexible { background: linear-gradient(90deg, #f39c1244, #333 60%); }
.star-icon-wrapper { width: 64px; height: 64px; flex-shrink: 0; }
.star-icon-tint { width: 100%; height: 100%; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.star-category-bg.Destruction .star-icon-tint { background-color: #e74c3c; } .star-category-bg.Life .star-icon-tint { background-color: #2ecc71; } .star-category-bg.Imagination .star-icon-tint { background-color: #3498db; } .star-category-bg.Flexible .star-icon-tint { background-color: #f1c40f; }


/* --- 도전과제 페이지 카드 스타일 --- */
.achievement-card { border-left: 3px solid #f39c12; }
.achievement-card .card-header-info { justify-content: center; }
.achievement-card .achievement-title { margin: 0; }
.achievement-card .card-body { border-top: 1px solid #444; }
.achievement-desc { font-size: 0.9rem; line-height: 1.5; flex-grow: 1; }
.reward-info { margin-top: 15px; font-size: 0.9rem; color: #ccc; }
.reward-info strong { color: #f1c40f; }
.card-icon-placeholder { width: 64px; height: 64px; flex-shrink: 0; background-color: #222; border-radius: 5px; }


/* --- 모달 스타일 --- */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); display: none; justify-content: center; align-items: center; z-index: 1000; padding: 20px; box-sizing: border-box;}
.modal-overlay.active { display: flex; }
.modal-content { background-color: #2a2a2a; border-radius: 8px; width: 100%; max-width: 550px; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,0.5); max-height: 90vh; overflow-y: auto; border: 1px solid #555; }
.modal-close-btn { position: absolute; top: 10px; right: 15px; font-size: 2rem; color: #aaa; background: none; border: none; cursor: pointer; z-index: 10; }
.modal-close-btn:hover { color: #fff; }
.modal-card-header { display: flex; align-items: center; padding: 15px; gap: 15px; background-color: #333; }
.modal-card-body { padding: 20px; font-size: 0.95rem; line-height: 1.6; }
.cooldown-info, .price-info { font-size: 0.85rem; color: #aaa; margin-top: 0; margin-bottom: 8px; padding: 0; }
.unlock-info { margin-top: 20px; font-size: 0.9rem; color: #bbb; }
.unlock-title { font-weight: bold; color: #ddd; }
.lore { margin-top: 20px; font-style: italic; color: #ccc; }


/* --- 여행자 페이지 전용 스타일 --- */
.traveler-page-container {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.traveler-list {
    flex: 0 0 80px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    background-color: #2a2a2a;
    border-radius: 8px;
    border: 1px solid #444;
}
.traveler-icon-entry {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 8px;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
}
.traveler-icon-entry:hover { background-color: #3a3a3a; }
.traveler-icon-entry.active { border-color: #00aaff; background-color: #333; }
.traveler-icon { width: 50px; height: 50px; mask-size: contain; mask-position: center; mask-repeat: no-repeat; -webkit-mask-size: contain; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; }
.traveler-icon-name { font-size: 0.8rem; font-weight: bold; text-align: center; }
.traveler-detail { flex-grow: 1; background-color: #2a2a2a; padding: 24px; border-radius: 8px; border: 1px solid #444; }
.traveler-detail-header { display: flex; gap: 24px; align-items: flex-start; }
.traveler-portrait { width: 220px; height: auto; object-fit: contain; flex-shrink: 0; }
.traveler-titles { display: flex; flex-direction: column; flex-grow: 1; }
.traveler-titles h2 { font-size: 2rem; margin-bottom: 5px; }
.traveler-titles .subtitle { font-size: 1rem; color: #ccc; font-style: italic; margin-bottom: 15px; }
.traveler-titles .description { font-size: 0.9rem; line-height: 1.5; margin-bottom: 20px; color: #ddd; }
.traveler-unlock-info { margin-top: 20px; font-size: 0.9rem; color: #bbb; background-color: #1e1e1e; padding: 10px; border-radius: 4px; }
.traveler-unlock-info strong { color: #f1c40f; }
.stats-preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat-entry { display: flex; flex-direction: column; align-items: flex-start; background-color: #1e1e1e; padding: 8px 12px; border-radius: 4px; font-size: 0.9rem; }
.stat-name { color: #ccc; font-size: 0.8rem; margin-bottom: 4px; }
.stat-value { font-weight: bold; }
.stat-growth { color: #00aaff; font-size: 0.9em; margin-left: 4px; }
.traveler-detail > .description { line-height: 1.6; margin-bottom: 24px; }
.traveler-detail h3 { color: #00aaff; margin-top: 24px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #444; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.stats-grid .stat-entry { flex-direction: row; justify-content: space-between; align-items: center; }
.stats-grid .stat-name { font-size: 0.9rem; margin-bottom: 0; }
.stats-grid .stat-growth { margin-left: 8px; }
.loadout-section { margin-bottom: 20px; }
.loadout-section h4 { font-size: 1rem; color: #ddd; margin-bottom: 10px; }
.loadout-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.loadout-memory { position: relative; display: flex; align-items: center; gap: 10px; background-color: #333; padding: 8px; border-radius: 4px; transition: background-color 0.2s; cursor: help; }
.loadout-memory:hover { background-color: #444; }
.loadout-memory-icon, .loadout-memory-icon-wrapper { width: 40px; height: 40px; flex-shrink: 0; border-radius: 4px; }
.memory-tooltip { position: fixed; background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 10px; border-radius: 5px; border: 1px solid #555; font-size: 0.9rem; line-height: 1.5; max-width: 350px; z-index: 1010; pointer-events: none; opacity: 0; transition: opacity 0.2s; }
.tooltip-extra-info { margin-top: 10px; padding-top: 8px; border-top: 1px solid #555; font-size: 0.85rem; color: #ccc; }
.tooltip-extra-info strong { color: #f1c40f; }
.constellation-section { margin-bottom: 20px; }
.constellation-section h4 { font-size: 1rem; color: #ddd; margin-bottom: 10px; }

/* 모바일 최적화를 위한 미디어 쿼리 */
@media (max-width: 992px) {
    /* 여행자 페이지 */
    .traveler-page-container { flex-direction: column; }
    .traveler-list { max-width: 100%; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; -webkit-overflow-scrolling: touch; }
    .traveler-icon-entry { flex-shrink: 0; width: 70px; }
    .traveler-detail { width: 100%; box-sizing: border-box; }
}

@media (max-width: 768px) {
    /* 네비게이션 바 */
    .navbar-container { position: static; justify-content: space-between; }
    .nav-menu { display: none; position: absolute; top: 60px; left: 0; width: 100%; background-color: #222; flex-direction: column; align-items: center; padding: 10px 0; box-shadow: 0 8px 16px rgba(0,0,0,0.2); }
    .nav-menu.active { display: flex; }
    .nav-item { width: 100%; text-align: center; flex-direction: column; justify-content: center; /* [신규] 중앙 정렬 */ }
    .nav-links { padding: 12px 0; width: 100%; }
    .menu-icon { display: block; order: 3; }
    .nav-right-menu { display: none !important; } /* [수정] 데스크탑용 우측 메뉴 숨김 */
    .desktop-only { display: none !important; } /* [신규] 데스크탑 전용 메뉴 숨김 */
    .nav-menu { order: 1; margin-right: 0; }
    .navbar-logo { order: 0; }
    
    /* [수정] 모바일 드롭다운 동작 (클릭 전용) */
    .dropdown:hover .dropdown-content { display: none; }
    /* [수정] 특이성 강화를 위해 부모 선택자 추가 */
    .dropdown .dropdown-content.show { display: block; }
    .nav-item .dropdown-content {
        position: static; box-shadow: none; width: 100%; background-color: #2a2a2a;
    }
    .nav-item .dropdown-content li a { text-align: center; }
    .language-switcher-mobile { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 8px; padding: 12px 0;}
    
    /* 회상 페이지 모달 */
    .modal-content { max-width: calc(100% - 20px); }
    
    /* 여행자 페이지 */
    .traveler-detail-header { flex-direction: column; align-items: center; gap: 15px; }
    .traveler-portrait { width: 180px; }
    .stats-preview-grid { grid-template-columns: 1fr; }
}

/* --- [신규] 토스트 알림 시스템 스타일 --- */
#toast-container {
    position: fixed;
    top: 80px; /* navbar height + padding */
    right: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    padding: 15px 20px;
    border-radius: 5px;
    color: #fff;
    font-family: 'DnfTemperedBlade', sans-serif;
    font-size: 0.95rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.toast.show {
    opacity: 1;
    transform: translateX(0);
}

.toast-info {
    background-color: #3498db;
}

.toast-success {
    background-color: #2ecc71;
}

.toast-warning {
    background-color: #f39c12;
}

.toast-error {
    background-color: #e74c3c;
}

/* --- [신규] 확인(Confirm) 모달 스타일 --- */
#confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1999;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

#confirm-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

.confirm-box {
    background-color: #2a2a2a;
    padding: 25px 30px;
    border-radius: 8px;
    text-align: center;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    border: 1px solid #555;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

#confirm-overlay.show .confirm-box {
    transform: scale(1);
}

.confirm-message {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 20px;
    color: #e0e0e0;
}

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

.confirm-btn {
    padding: 10px 25px;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'DnfTemperedBlade', sans-serif;
    font-weight: 500;
}

.confirm-btn-ok {
    background-color: #007bff;
    color: white;
}
.confirm-btn-ok:hover {
    background-color: #0056b3;
}

.confirm-btn-cancel {
    background-color: #6c757d;
    color: white;
}
.confirm-btn-cancel:hover {
    background-color: #5a6268;
}

/* --- [신규] 프롬프트(Prompt) 모달 스타일 --- */
.prompt-input {
    width: 100%;
    padding: 10px;
    font-size: 1rem;
    background-color: #1e1e1e;
    border: 1px solid #555;
    border-radius: 5px;
    color: #e0e0e0;
    margin-bottom: 20px;
    box-sizing: border-box; /* 패딩이 너비에 포함되도록 설정 */
    font-family: 'DnfTemperedBlade', sans-serif;
}

.prompt-input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* --- [신규] 푸터 스타일 --- */
footer#main-footer {
    background-color: #222; /* 네비게이션 바와 동일한 색상 */
    color: #aaa;
    padding: 1rem 0;
    margin-top: 4rem; /* main 콘텐츠와의 간격 */
    text-align: center;
    font-size: 0.85rem;
    line-height: 1.25;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

footer#main-footer p {
    margin: 0.5rem 0;
}