/* =========================================
   1. 폰트 및 기본 변수 설정 (무협 테마)
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;700&display=swap');

:root {
    /* [레어도 색상] - 기존 색상을 유지하되 채도를 낮춰 차분하게 조정 */
    --rarity-common: #8d9399;    /* 일반: 돌 질감 회색 */
    --rarity-uncommon: #4e9a5d;  /* 고급: 옥색 */
    --rarity-rare: #4682b4;      /* 희귀: 청색 */
    --rarity-epic: #9c4dcc;      /* 에픽: 자색 */
    --rarity-legendary: #d4af37; /* 전설: 황금색 */
    
    /* [무협 테마 팔레트] */
    --wuxia-bg-deep: #0f1012;     /* 배경: 깊은 먹색 */
    --wuxia-bg-panel: #18191b;    /* 패널: 연한 먹색 */
    --wuxia-bg-input: #202124;    /* 입력창 배경 */
    --wuxia-border: #333333;      /* 경계선: 짙은 회색 */
    --wuxia-accent-gold: #c8a060; /* 강조: 앤티크 골드 (버튼/텍스트) */
    --wuxia-accent-red: #8a3324;  /* 강조: 진사색 (도장/포인트) */
    --wuxia-text-main: #e6e6e6;   /* 텍스트: 창호지색 */
    --wuxia-text-sub: #999999;    /* 보조 텍스트 */
}

/* =========================================
   2. 기본 레이아웃 및 리셋
   ========================================= */
body {
    background-color: var(--wuxia-bg-deep);
    color: var(--wuxia-text-main);
    font-family: 'Noto Serif KR', serif; /* 명조체 적용 */
    margin: 0;
    padding: 0;
}

h2, h3, p, button, input {
    font-family: inherit; /* 폰트 상속 */
}

/* =========================================
   3. 상단 고정 헤더 영역
   ========================================= */
#fixed-top-bar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background-color: var(--wuxia-bg-deep);
    border-bottom: 1px solid var(--wuxia-border);
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

#main-header {
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 로고 위치 미세 조정 */
.logo-icon img {
    padding-top: 6px; 
    vertical-align: middle;
    filter: sepia(0.3); /* 약간의 빈티지 효과 */
}

/* 검색 컨테이너 (이모지 제거, 반투명 적용) */
.search-container {
    display: flex;
    align-items: center;
    flex-grow: 1;
    /* 입력창 배경을 살짝 투명하게 */
    background-color: rgba(32, 33, 36, 0.8); 
    border: 1px solid #444;
    border-radius: 4px;
    padding: 5px 15px;
    margin-left: 20px;
    position: relative; /* 드롭다운 기준점 */
}

#header-search-input {
    padding: 5px 0;
    width: 100%;
    border: none;
    background-color: transparent;
    color: var(--wuxia-text-main);
    outline: none;
    font-size: 0.95em;
    font-family: inherit;
}

/* 통합 검색 드롭다운 (반투명 유리 패널 스타일) */
.search-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    
    /* 배경을 반투명한 먹색으로 설정 */
    background-color: rgba(15, 16, 18, 0.95);
    
    /* 배경 블러 처리 (유리 효과) */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    border: 1px solid rgba(200, 160, 96, 0.3); 
    border-top: none;
    
    border-radius: 0 0 4px 4px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.7);
    z-index: 2000;
    max-height: 400px;
    overflow-y: auto;
    margin-top: 0;
    text-align: left;
}

/* 검색 결과 아이템 */
.search-category-title {
    padding: 10px 15px;
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--wuxia-accent-gold);
    font-size: 0.8em;
    font-weight: bold;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.search-result-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s;
    cursor: pointer;
}

.search-result-item:hover {
    background-color: rgba(200, 160, 96, 0.15);
}

/* 검색 결과 뱃지 */
.badge {
    font-size: 0.7em;
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 10px;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
}
.badge.quiz { background-color: var(--wuxia-accent-red); }
.badge.item { background-color: var(--wuxia-accent-gold); color: #000; }

.result-text {
    font-size: 0.95em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #eee;
}

/* =========================================
   4. 네비게이션
   ========================================= */
#category-nav {
    padding-left: 15px;
    padding-top: 10px;
    display: flex;
    gap: 25px;
    background-color: var(--wuxia-bg-deep);
}

.nav-item {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    color: var(--wuxia-text-sub);
    font-size: 1.0em;
    font-weight: bold;
    cursor: pointer;
    padding: 10px 5px;
    transition: all 0.2s;
    border-bottom: 2px solid transparent;
}

.nav-item:hover {
    color: #fff;
}

.nav-item.active {
    color: var(--wuxia-accent-gold);
    border-bottom: 2px solid var(--wuxia-accent-red);
}

/* =========================================
   5. 메인 콘텐츠 및 뷰(View) 공통
   ========================================= */
#main-content {
    padding-top: 110px; /* 헤더 높이만큼 여백 */
    max-width: 1000px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* 화면 전환 애니메이션 */
#view-home, #view-quiz, #view-quest {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 소개 카드 */
#intro-card.large-font-chunk {
    background-color: var(--wuxia-bg-panel);
    padding: 30px;
    border-radius: 4px;
    margin: 40px 0;
    border: 1px solid var(--wuxia-border);
    background-image: url('images/bg.jpg'); /* 배경 이미지 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

#intro-card.large-font-chunk::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 1;
}

#intro-card.large-font-chunk h2,
#intro-card.large-font-chunk p,
#intro-card.large-font-chunk .browse-button {
    position: relative;
    z-index: 2;
}

#intro-card.large-font-chunk h2 {
    font-size: 2.2em;
    margin-bottom: 10px;
    color: var(--wuxia-accent-gold);
    text-shadow: 2px 2px 4px black;
}

#intro-card.large-font-chunk p {
    font-size: 0.9em;
    line-height: 1.6;
    color: #d0d0d0;
    margin-bottom: 25px;
}

.browse-button {
    background-color: var(--wuxia-accent-gold);
    color: #1a150e;
    border: 1px solid #b89050;
    padding: 12px 0;
    font-size: 1.0em;
    font-weight: bold;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    display: block;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}

.browse-button:hover {
    background-color: #dcb36a;
}

/* 섹션 제목 스타일 */
h3 {
    font-size: 1.1em;
    border-left: 4px solid var(--wuxia-accent-red);
    padding-left: 10px;
    margin-bottom: 15px;
    color: var(--wuxia-text-main);
}

/* 아이템/공지 리스트 컨테이너 */
.item-list-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* =========================================
   6. 족보 페이지 (Answer) 스타일
   ========================================= */
#answer-container {
    /* 부모 패딩 무시하고 꽉 차게 */
    width: calc(100% + 30px); 
    margin-left: -15px;
    margin-right: -15px;
    margin-top: 20px; 

    border-radius: 0; 
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--wuxia-border);
    border-bottom: 1px solid var(--wuxia-border);

    height: 75vh; 
    background-color: var(--wuxia-bg-panel);
    display: flex;
    flex-direction: column;
    overflow: hidden; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

.status-bar {
    background-color: #1a1a1c;
    color: var(--wuxia-accent-gold);
    padding: 15px 20px;
    font-size: 0.95em;
    font-weight: bold;
    border-bottom: 1px solid var(--wuxia-border);
    text-align: center;
    flex-shrink: 0;
}

.inner-search-area {
    padding: 15px;
    background-color: var(--wuxia-bg-deep);
    border-bottom: 1px solid var(--wuxia-border);
    flex-shrink: 0;
}

.inner-search-box {
    width: 100%;
    padding: 10px;
    border: 1px solid #444;
    border-radius: 2px;
    font-size: 1em;
    background-color: var(--wuxia-bg-input);
    color: var(--wuxia-text-main);
    box-sizing: border-box;
    font-family: inherit;
}

.list-scroll-area {
    flex-grow: 1;
    overflow-y: auto;
    background-color: var(--wuxia-bg-panel);
    scrollbar-width: thin;
    scrollbar-color: #444 #1a1a1c;
}

.answer-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    table-layout: fixed;
}

.answer-table th {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #252629;
    color: var(--wuxia-accent-gold);
    padding: 15px;
    border-bottom: 2px solid var(--wuxia-border);
    font-size: 1.05em;
}

.answer-table td {
    padding: 12px;
    border-bottom: 1px solid #2a2a2a;
    color: #ccc;
    word-break: keep-all;
    font-size: 0.95em;
}

.answer-table tr:hover {
    background-color: rgba(200, 160, 96, 0.1);
}

.highlight {
    background-color: var(--wuxia-accent-gold);
    color: #000;
    border-radius: 2px;
    padding: 0 2px;
    font-weight: bold;
}

/* =========================================
   7. 퀘스트 뷰 (Quest) 스타일
   ========================================= */

/* 퀘스트 탭 상단 여백 */
#quest-list-view {
    margin-top: 30px; 
    padding-left: 5px;
}

/* 퀘스트 타입 필터 (가로 스크롤 적용) */
.quest-type-nav {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    
    /* 가로 스크롤 활성화 */
    overflow-x: auto; 
    white-space: nowrap;
    -webkit-overflow-scrolling: touch; 
    padding-right: 20px; 
}

.quest-type-nav::-webkit-scrollbar {
    height: 4px;
}
.quest-type-nav::-webkit-scrollbar-track {
    background: #1a1a1c;
}
.quest-type-nav::-webkit-scrollbar-thumb {
    background: var(--wuxia-accent-gold);
    border-radius: 2px;
}

.type-btn {
    background: none;
    border: none;
    color: #888;
    font-family: inherit;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    padding: 5px 12px;
    transition: all 0.2s;
    border-radius: 4px;
    flex-shrink: 0; /* 버튼 형태 유지 */
}

.type-btn:hover {
    color: #ccc;
    background-color: rgba(255, 255, 255, 0.05);
}

.type-btn.active {
    color: var(--wuxia-accent-gold);
    background-color: rgba(200, 160, 96, 0.1);
    box-shadow: 0 0 5px rgba(200, 160, 96, 0.2);
}

/* 퀘스트 카드 그리드 */
.quest-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
    padding-bottom: 50px;
}

.quest-card {
    display: flex;
    align-items: center;
    background-color: #1a1b1e;
    border: 1px solid #2a2b2e;
    border-radius: 4px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.quest-card:hover {
    background-color: #25262a;
    border-color: var(--wuxia-accent-gold);
    transform: translateY(-2px);
}

.quest-icon-wrapper {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 15px;
    border: 2px solid #333;
    flex-shrink: 0;
}

.quest-icon-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.quest-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.quest-name {
    color: #e0e0e0;
    font-weight: bold;
    font-size: 0.95em;
    margin-bottom: 4px;
}

.quest-type {
    color: #888;
    font-size: 0.8em;
}

.quest-badge {
    background-color: #111;
    color: #ccc;
    font-weight: bold;
    font-size: 0.85em;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #333;
}

/* 퀘스트 상세 페이지 스타일 */
.back-button {
    background: none;
    border: none;
    color: var(--wuxia-accent-gold);
    font-size: 1em;
    cursor: pointer;
    margin-top: 20px; /* 상단 여백 */
    margin-bottom: 20px;
    font-weight: bold;
    padding: 10px 0;
    font-family: inherit;
}
.back-button:hover { text-decoration: underline; }

.detail-content-box {
    background-color: var(--wuxia-bg-panel);
    padding: 30px;
    border-radius: 4px;
    border: 1px solid var(--wuxia-border);
    min-height: 400px;
    color: #ccc;
    line-height: 1.6;
}

/* =========================================
   8. 푸터
   ========================================= */
#main-footer {
    background-color: #141414;
    color: #666;
    padding: 40px 20px;
    margin-top: 60px;
    border-top: 1px solid var(--wuxia-border);
    text-align: center;
}

.version-info {
    font-size: 1.0em;
    font-weight: bold;
    color: var(--wuxia-accent-gold);
    margin-bottom: 10px;
}

.copyright-disclaimer {
    font-size: 0.8em;
    line-height: 1.4;
    margin-bottom: 20px;
}

/* =========================================
   9. 미디어 쿼리 (반응형)
   ========================================= */

/* PC 및 태블릿 (768px 이상) */
@media (min-width: 768px) {
    #recent-list.item-list-container,
    .quest-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
}

/* 모바일 (768px 이하) */
@media (max-width: 768px) {
    /* 퀘스트 카드 1열 배치 */
    .quest-grid {
        grid-template-columns: 1fr; 
    }

    /* 퀘스트 필터 버튼 글씨 축소 및 패딩 조정 */
    .type-btn {
        font-size: 0.9em;
        padding: 4px 10px;
    }
    
    /* 가로 스크롤을 위해 줄바꿈 금지 유지 */
    .quest-type-nav {
        gap: 5px;
    }
}

/* =========================================
   15. 페이지네이션 스타일 (퀘스트 탭)
   ========================================= */
.pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 30px;
    padding-bottom: 20px;
}

.pagination-btn {
    background-color: #1a1a1c;
    border: 1px solid #444;
    color: #888;
    padding: 8px 12px;
    min-width: 36px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-family: 'Noto Serif KR', serif;
    transition: all 0.2s;
}

.pagination-btn:hover:not(:disabled) {
    border-color: var(--wuxia-accent-gold);
    color: var(--wuxia-accent-gold);
}

.pagination-btn.active {
    background-color: var(--wuxia-accent-gold);
    border-color: var(--wuxia-accent-gold);
    color: #1a150e; /* 글자색 어둡게 */
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: default;
    border-color: #333;
}

/* style.css 맨 아래에 추가 */

/* [추가] 통합 검색 뱃지: 정보 (초록색) */
.badge.info { background-color: #28a745; }

/* [추가] 홈 화면 섹션 헤더 (클릭 가능하게) */
.section-header-clickable {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    border-bottom: 1px solid #333; /* 구분선 */
    margin-bottom: 15px;
    padding-right: 10px;
}

.section-header-clickable:hover h3,
.section-header-clickable:hover .more-btn {
    color: var(--wuxia-accent-gold);
}

.section-header-clickable h3 {
    border-left: 4px solid var(--wuxia-accent-red);
    padding-left: 10px;
    margin: 10px 0;
    font-size: 1.1em;
    color: var(--wuxia-text-main);
}

.more-btn {
    font-size: 1.5em;
    color: #666;
    font-weight: bold;
    transition: color 0.2s;
}

/* [추가] 뉴스 리스트 아이템 스타일 */
.news-item {
    background-color: var(--wuxia-bg-panel);
    border: 1px solid #333;
    border-radius: 4px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.2s;
}

.news-item:hover {
    border-color: var(--wuxia-accent-gold);
    background-color: #202124;
}

.news-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.news-title {
    font-weight: bold;
    color: #e0e0e0;
    font-size: 1em;
}

.news-date {
    font-size: 0.8em;
    color: #888;
    min-width: 80px;
    text-align: right;
}

.news-content {
    font-size: 0.9em;
    color: #aaa;
    line-height: 1.5;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #444;
    display: none; /* 기본 숨김 (클릭 시 펼침) */
}

/* 활성화된(클릭된) 뉴스 아이템 */
.news-item.active .news-content {
    display: block;
}
.news-item.active .news-title {
    color: var(--wuxia-accent-gold);
}

.news-link-btn {
    display: inline-block;
    margin-top: 10px;
    padding: 5px 10px;
    background-color: #333;
    color: var(--wuxia-accent-gold);
    text-decoration: none;
    font-size: 0.8em;
    border-radius: 2px;
}
.news-link-btn:hover {
    background-color: #444;
}

/* =========================================
   16. 교환 코드 페이지 스타일
   ========================================= */
.code-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.code-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--wuxia-bg-panel); /* 패널 배경색 */
    border: 1px solid #333;
    border-radius: 4px;
    padding: 20px;
    transition: all 0.2s;
}

.code-card:hover {
    border-color: var(--wuxia-accent-gold);
    background-color: #202124;
}

.code-info {
    flex-grow: 1;
}

.code-text {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--wuxia-accent-gold); /* 코드명은 금색 */
    margin-bottom: 5px;
    font-family: monospace; /* 코드 느낌 폰트 */
    letter-spacing: 1px;
}

.code-rewards {
    font-size: 0.9em;
    color: #999;
}

/* 복사 버튼 스타일 (이미지 참고하여 오렌지/금색 계열) */
.copy-btn {
    background-color: #d67d3e; /* 약간 주황빛 도는 금색 */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: background-color 0.2s;
    margin-left: 15px;
    flex-shrink: 0;
}

.copy-btn:hover {
    background-color: #e59454;
}

.copy-btn:active {
    transform: scale(0.95);
}

.copy-icon {
    font-size: 1.1em;
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .code-text { font-size: 1.1em; }
    .code-card { padding: 15px; }
    .copy-btn { padding: 8px 12px; font-size: 0.85em; }
}