/* 기본 다크 테마 및 리셋 */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background-color: #121212; color: #e0e0e0; font-family: 'Pretendard', sans-serif; line-height: 1.6; transition: 0.3s; }
.container { max-width: 800px; margin: 0 auto; padding: 40px 20px; position: relative; }

/* 버튼 및 헤더 공통 */
.theme-btn { position: absolute; top: 20px; right: 20px; padding: 8px 16px; background: #333; color: #fff; border: 1px solid #444; border-radius: 20px; cursor: pointer; transition: 0.3s; z-index: 100; }
.theme-btn:hover { background: #555; }
.hero { text-align: center; margin-bottom: 60px; margin-top: 20px; }
.hero h1 { font-size: 2.5rem; color: #ffffff; letter-spacing: 2px; margin-bottom: 10px; transition: 0.3s; }
.hero p { color: #aaaaaa; font-size: 1.1rem; transition: 0.3s; }
.hero .divider { width: 50px; height: 3px; background: #880000; margin: 20px auto; }

/* 섹션 및 스탯 */
.section { background: #1e1e1e; border: 1px solid #333; border-radius: 12px; padding: 30px; margin-bottom: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); transition: 0.3s; }
.section-title { font-size: 1.4rem; color: #ffffff; border-bottom: 1px solid #444; padding-bottom: 15px; margin-bottom: 20px; display: flex; align-items: center; transition: 0.3s; }
.section-title::before { content: ""; display: inline-block; width: 4px; height: 20px; background: #880000; margin-right: 10px; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.stat-card { background: #252525; padding: 20px; border-radius: 8px; text-align: center; border-top: 3px solid #555; transition: 0.3s; }
.stat-card:hover { transform: translateY(-5px); }
.stat-card h3 { color: #fff; margin-bottom: 10px; font-size: 1.2rem; transition: 0.3s; }
.stat-card p { font-size: 0.9rem; color: #bbb; transition: 0.3s; }
.stat-obedience { border-color: #4CAF50; } .stat-rebellion { border-color: #F44336; } .stat-dependence { border-color: #9C27B0; } 

/* 성장기 리스트 */
.phase-list { display: flex; flex-direction: column; gap: 20px; margin-bottom: 25px; }
.phase-item { display: flex; background: #252525; border-radius: 8px; overflow: hidden; align-items: center; cursor: pointer; transition: 0.3s; position: relative; border: 1px solid transparent; }
.phase-item:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.8); border-color: #555; }
.phase-item::after { content: "표정 보기 🔍"; position: absolute; right: 20px; top: 20px; font-size: 0.85rem; color: #880000; font-weight: bold; }
.phase-img { width: 160px; height: 160px; object-fit: cover; background: #000; flex-shrink: 0; border-right: 1px solid #333; transition: 0.3s; }
.phase-desc { padding: 20px; padding-right: 100px; }
.phase-desc h3 { color: #fff; margin-bottom: 8px; transition: 0.3s; }
.phase-desc p { font-size: 0.95rem; color: #ccc; transition: 0.3s; }

/* [NEW] 도감 표 버튼 & 푸터 링크 */
.table-btn { width: 100%; padding: 15px; background: #2a2a2a; color: #fff; border: 1px solid #444; border-radius: 8px; font-size: 1rem; cursor: pointer; transition: 0.3s; font-family: inherit; font-weight: bold; }
.table-btn:hover { background: #3d3d3d; border-color: #666; }
.footer { text-align: center; margin-top: 60px; padding-top: 20px; border-top: 1px solid #333; color: #666; font-size: 0.85rem; padding-bottom: 40px; }
.bot-link { display: inline-block; margin-top: 15px; padding: 10px 20px; background: #880000; color: #fff; text-decoration: none; border-radius: 20px; font-weight: bold; transition: 0.3s; }
.bot-link:hover { background: #aa0000; box-shadow: 0 4px 10px rgba(136,0,0,0.4); }

/* 모달 공통 */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); align-items: center; justify-content: center; backdrop-filter: blur(5px); }
.modal-content { background-color: #1a1a1a; padding: 20px; border-radius: 12px; width: 90%; max-width: 1000px; max-height: 85vh; border: 1px solid #444; position: relative; transition: 0.3s; display: flex; flex-direction: column; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; flex-shrink: 0; position: sticky; top: 0; z-index: 10; }
.modal-header h2 { color: #fff; font-size: 1.2rem; transition: 0.3s; }
.close-btn { color: #aaa; font-size: 28px; font-weight: bold; cursor: pointer; transition: 0.2s; }
.close-btn:hover { color: #fff; }

/* 스크롤 뷰 */
.scroll-container { display: flex; gap: 15px; overflow-x: auto; padding-bottom: 15px; cursor: grab; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: #880000 #333; transition: 0.3s; }
.scroll-container:active { cursor: grabbing; scroll-behavior: auto; }
.scroll-container::-webkit-scrollbar { height: 8px; }
.scroll-container::-webkit-scrollbar-track { background: #333; border-radius: 4px; transition: 0.3s; }
.scroll-container::-webkit-scrollbar-thumb { background: #880000; border-radius: 4px; }
.preview-img { height: 300px; width: auto; border-radius: 8px; object-fit: cover; border: 1px solid #333; user-select: none; pointer-events: none; transition: 0.3s; }

/* [NEW] 표 (Table) 디자인 */
.table-wrapper { overflow: auto; flex: 1; min-height: 0; }
.asset-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.95rem; color: #ccc; }
.asset-table th, .asset-table td { padding: 15px; border-bottom: 1px solid #333; }
.asset-table th { background: #252525; color: #fff; font-weight: bold; }
.asset-table .phase-col { width: 120px; font-weight: bold; color: #e0e0e0; background: #222; }

/* ☀️ 라이트 모드 (light-mode) */
body.light-mode { background-color: #f5f5f7; color: #333; }
body.light-mode .theme-btn { background: #fff; color: #333; border-color: #ccc; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
body.light-mode .theme-btn:hover { background: #eee; }
body.light-mode .hero h1, body.light-mode .section-title, body.light-mode .stat-card h3, body.light-mode .phase-desc h3, body.light-mode .modal-header h2 { color: #111; }
body.light-mode .hero p, body.light-mode .stat-card p, body.light-mode .phase-desc p, body.light-mode .info-desc li { color: #555; }
body.light-mode .section { background: #ffffff; border-color: #e5e5e5; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
body.light-mode .section-title { border-bottom-color: #eee; }
body.light-mode .stat-card, body.light-mode .phase-item { background: #fafafa; border-color: #e5e5e5; }
body.light-mode .phase-item:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.1); border-color: #ccc; }
body.light-mode .phase-img { border-right-color: #eee; }
body.light-mode .info-mockup { background: #2b2b2b; border-color: #222; }
body.light-mode .table-btn { background: #f0f0f0; color: #333; border-color: #ccc; }
body.light-mode .table-btn:hover { background: #e0e0e0; }
body.light-mode .modal-content { background-color: #fcfcfc; border-color: #ddd; }
body.light-mode .close-btn { color: #888; }
body.light-mode .close-btn:hover { color: #111; }
body.light-mode .asset-table { color: #444; }
body.light-mode .asset-table th { background: #eee; color: #111; border-bottom-color: #ddd; }
body.light-mode .asset-table td { border-bottom-color: #eee; }
body.light-mode .asset-table .phase-col { background: #fafafa; color: #222; }
body.light-mode .scroll-container::-webkit-scrollbar-track { background: #eee; }
body.light-mode .preview-img { border-color: #ddd; }

/* 모바일 대응 */
@media (max-width: 768px) {
    .theme-btn { top: 10px; right: 10px; padding: 6px 12px; font-size: 0.8rem; }
    .phase-item { flex-direction: column; text-align: center; flex-wrap: wrap; }
    .phase-item::after { position: static; display: block; width: 100%; text-align: center; padding: 12px 0; background: #1e1e1e; border-top: 1px solid #333; order: 3; }
    body.light-mode .phase-item::after { background: #f5f5f5; border-top-color: #e5e5e5; }
    .phase-img { width: 100%; height: 200px; border-right: none; border-bottom: 1px solid #333; order: 1; }
    body.light-mode .phase-img { border-bottom-color: #eee; }
    .phase-desc { padding: 20px; padding-right: 20px; order: 2; }

    /* 테이블 모달: 모바일 전체화면 + 스크롤 보장 */
    #tableModal .modal-content { width: 100%; max-width: 100%; height: 100vh; max-height: 100vh; border-radius: 0; padding: 0; }
    #tableModal .modal-header { position: sticky; top: 0; background: #1a1a1a; padding: 16px 20px; border-bottom: 1px solid #444; z-index: 10; }
    body.light-mode #tableModal .modal-header { background: #fcfcfc; border-bottom-color: #ddd; }
    #tableModal .table-wrapper { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 10px; }
}