@charset "UTF-8";
/**
 * 야동위키 스타일시트
 * v2026021005
 */

/* ==================== 변수 (다크 테마) ==================== */
:root{
    --c-main:#f39c12;
    --c-main-dark:#d68910;
    --c-main-light:#f5b041;
    --c-bg:#000000;
    --c-bg-alt:#0a0a0a;
    --c-bg-card:#111111;
    --c-text:#ffffff;
    --c-text-dim:#a0a0a0;
    --c-text-muted:#666666;
    --c-border:rgba(243,156,18,0.2);
    --c-glow:rgba(243,156,18,0.3);
    --font:'Noto Sans KR',sans-serif;
    --radius:8px;
    --radius-lg:12px;
    --transition:0.25s ease;
}

/* ==================== 라이트 테마 ==================== */
[data-theme="light"]{
    --c-bg:#f5f5f5;
    --c-bg-alt:#ffffff;
    --c-bg-card:#ffffff;
    --c-text:#1a1a1a;
    --c-text-dim:#555555;
    --c-text-muted:#888888;
    --c-border:rgba(243,156,18,0.3);
}

/* ==================== 리셋 ==================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
    font-family:var(--font);
    background:var(--c-bg);
    color:var(--c-text);
    line-height:1.7;
    min-height:100vh;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
ul,ol{list-style:none}
button{font:inherit;cursor:pointer;border:none;background:none}

.skip-link{
    position:absolute;
    top:-50px;
    left:0;
    background:var(--c-main);
    color:#000;
    padding:8px 16px;
    z-index:9999;
}
.skip-link:focus{top:0}

/* ==================== 헤더 ==================== */
.site-header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:100;
    background:rgba(0,0,0,0.95);
    border-bottom:1px solid var(--c-border);
}
[data-theme="light"] .site-header{
    background:rgba(255,255,255,0.95);
}
.header-inner{
    max-width:1000px;
    margin:0 auto;
    padding:0 20px;
    height:60px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.logo-link{display:flex;align-items:center}
.logo-img{height:36px;width:auto}
.header-nav{display:flex;gap:24px}
.header-nav a{
    font-size:0.9rem;
    font-weight:500;
    color:var(--c-text-dim);
    transition:var(--transition);
}
.header-nav a:hover{color:var(--c-main)}

/* 헤더 오른쪽 */
.header-right{
    display:flex;
    align-items:center;
    gap:8px;
}

/* 테마 토글 */
.theme-toggle{
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--c-bg-card);
    border:1px solid var(--c-border);
    border-radius:50%;
    color:var(--c-text-dim);
    font-size:0.8rem;
    cursor:pointer;
    transition:var(--transition);
}
.theme-toggle:hover{
    border-color:var(--c-main);
    color:var(--c-main);
}

/* 모바일 메뉴 토글 */
.menu-toggle{
    display:none;
    width:36px;
    height:36px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    background:var(--c-bg-card);
    border:1px solid var(--c-border);
    border-radius:50%;
    cursor:pointer;
    transition:var(--transition);
}
.menu-toggle span{
    display:block;
    width:16px;
    height:2px;
    background:var(--c-text-dim);
    transition:var(--transition);
}
.menu-toggle:hover{border-color:var(--c-main)}
.menu-toggle:hover span{background:var(--c-main)}

/* ==================== 메인 영역 ==================== */
main{padding-top:60px}

/* ==================== 공통 버튼 ==================== */
.btn-primary{
    display:inline-block;
    padding:16px 40px;
    font-size:1rem;
    font-weight:600;
    color:#000;
    background:linear-gradient(135deg,var(--c-main) 0%,var(--c-main-dark) 100%);
    border-radius:var(--radius);
    transition:var(--transition);
}
.btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 24px var(--c-glow);
}
.btn-primary.btn-lg{
    padding:18px 48px;
    font-size:1.1rem;
    font-weight:700;
}

/* ==================== 히어로 섹션 ==================== */
.hero-section{
    text-align:center;
    padding:80px 20px 60px;
}
.hero-banner{
    display:block;
    max-width:640px;
    width:100%;
    height:auto;
    margin:0 auto 24px;
    border-radius:8px;
}
.hero-badge{
    display:inline-block;
    padding:6px 16px;
    font-size:0.8rem;
    font-weight:600;
    color:var(--c-main);
    background:rgba(243,156,18,0.1);
    border:1px solid var(--c-border);
    border-radius:20px;
    margin-bottom:20px;
}
.hero-section h1{
    font-size:2rem;
    font-weight:700;
    margin-bottom:16px;
}
.hero-desc{
    font-size:1rem;
    color:var(--c-text-dim);
    margin-bottom:32px;
    line-height:1.8;
}

/* ==================== 메뉴 섹션 ==================== */
.menu-section{
    padding:40px 20px 60px;
    max-width:900px;
    margin:0 auto;
}
.menu-section h2{
    font-size:1.3rem;
    font-weight:600;
    margin-bottom:24px;
    text-align:center;
}
.menu-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
}
.menu-card{
    display:block;
    background:var(--c-bg-card);
    border:1px solid var(--c-border);
    border-radius:var(--radius);
    padding:24px 16px;
    text-align:center;
    transition:var(--transition);
}
.menu-card:hover{
    border-color:var(--c-main);
    transform:translateY(-2px);
}
.menu-card strong{
    display:block;
    font-size:1rem;
    margin-bottom:8px;
    color:var(--c-main);
}
.menu-card span{
    font-size:0.85rem;
    color:var(--c-text-dim);
}

/* ==================== 정보 섹션 ==================== */
.info-section{
    padding:40px 20px;
}
.info-inner{
    max-width:900px;
    margin:0 auto;
}
.info-section h2{
    font-size:1.3rem;
    font-weight:600;
    margin-bottom:24px;
    text-align:center;
}
.info-list{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}
.info-item{
    background:var(--c-bg-card);
    border:1px solid var(--c-border);
    border-radius:var(--radius);
    padding:24px;
}
.info-item h3{
    font-size:1rem;
    font-weight:600;
    margin-bottom:8px;
    color:var(--c-main);
}
.info-item p{
    font-size:0.9rem;
    color:var(--c-text-dim);
    line-height:1.6;
}

/* ==================== 페이지 링크 섹션 ==================== */
.page-section{
    padding:40px 20px 60px;
    max-width:900px;
    margin:0 auto;
}
.page-section h2{
    font-size:1.3rem;
    font-weight:600;
    margin-bottom:24px;
    text-align:center;
}
.page-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
}
.page-link{
    display:inline-block;
    padding:10px 20px;
    font-size:0.9rem;
    color:var(--c-text-dim);
    background:var(--c-bg-card);
    border:1px solid var(--c-border);
    border-radius:var(--radius);
    transition:var(--transition);
}
.page-link:hover{
    border-color:var(--c-main);
    color:var(--c-main);
}

/* ==================== 페이지 헤더 ==================== */
.page-header{
    text-align:center;
    padding:60px 20px 40px;
}
.page-header h1{
    font-size:1.75rem;
    font-weight:700;
    margin-bottom:12px;
}
.page-header p{
    font-size:1rem;
    color:var(--c-text-dim);
}

/* ==================== 주소 섹션 ==================== */
.address-section{
    padding:0 20px 40px;
    max-width:600px;
    margin:0 auto;
}
.address-card{
    background:var(--c-bg-card);
    border:1px solid var(--c-border);
    border-radius:var(--radius-lg);
    padding:40px 32px;
    text-align:center;
}
.main-address{
    border-color:var(--c-main);
}
.address-card h2{
    font-size:1.2rem;
    font-weight:600;
    margin-bottom:24px;
    color:var(--c-main);
}
.address-note{
    font-size:0.85rem;
    color:var(--c-text-muted);
    margin-top:16px;
}

/* ==================== 팁/가이드 섹션 ==================== */
.tips-section,
.guide-section,
.warning-section,
.notice-section{
    padding:20px 20px 40px;
    max-width:900px;
    margin:0 auto;
}
.tips-section h2,
.guide-section h2,
.warning-section h2{
    font-size:1.2rem;
    font-weight:600;
    margin-bottom:16px;
    color:var(--c-main);
}
.guide-section p,
.warning-section p{
    font-size:0.95rem;
    color:var(--c-text-dim);
    line-height:1.8;
    margin-bottom:14px;
}
.guide-section p:last-child,
.warning-section p:last-child{
    margin-bottom:0;
}
.tips-list{padding-left:20px}
.tips-list li{
    font-size:0.95rem;
    color:var(--c-text-dim);
    margin-bottom:10px;
    position:relative;
}
.tips-list li::before{
    content:'•';
    position:absolute;
    left:-16px;
    color:var(--c-main);
}
.tips-list a{color:var(--c-main)}
.guide-section h3,
.about-section h3{
    font-size:1rem;
    font-weight:600;
    margin:20px 0 8px;
    color:var(--c-text);
}
.guide-section a{color:var(--c-main)}
.about-section a{color:var(--c-main)}

/* ==================== 경고 박스 ==================== */
.warning-box{
    background:rgba(243,156,18,0.1);
    border:1px solid var(--c-border);
    border-left:3px solid var(--c-main);
    border-radius:var(--radius);
    padding:20px;
}
.warning-box p{
    font-size:0.95rem;
    color:var(--c-text-dim);
    line-height:1.7;
}
.warning-box a{color:var(--c-main)}

/* ==================== 단계 목록 ==================== */
.step-list{
    list-style:decimal;
    padding-left:24px;
}
.step-list li{
    margin-bottom:20px;
}
.step-list strong{
    display:block;
    font-size:1rem;
    margin-bottom:4px;
    color:var(--c-text);
}
.step-list p{
    font-size:0.95rem;
    color:var(--c-text-dim);
}
.step-list a{color:var(--c-main)}

/* ==================== 코드 박스 ==================== */
.code-box{
    background:var(--c-bg-card);
    border:1px solid var(--c-border);
    border-radius:var(--radius);
    padding:16px 20px;
    margin:16px 0;
}
.code-box p{
    font-size:0.95rem;
    margin-bottom:8px;
}
.code-box ul{padding-left:20px}
.code-box li{
    font-size:0.9rem;
    color:var(--c-text-dim);
    margin-bottom:4px;
    font-family:monospace;
}

/* ==================== 비교 테이블 ==================== */
.table-wrap{
    overflow-x:auto;
    margin:20px 0;
}
.compare-table{
    width:100%;
    border-collapse:collapse;
    font-size:0.9rem;
}
.compare-table th{
    background:var(--c-main);
    color:#000;
    font-weight:600;
    padding:12px 16px;
    text-align:left;
    white-space:nowrap;
}
.compare-table td{
    padding:12px 16px;
    border-bottom:1px solid var(--c-border);
    color:var(--c-text-dim);
    line-height:1.6;
    vertical-align:top;
}
.compare-table td strong{
    color:var(--c-text);
}
.compare-table tbody tr:hover{
    background:rgba(243,156,18,0.05);
}

/* ==================== 더보기 링크 ==================== */
.more-link{
    margin-top:16px;
    font-size:0.95rem;
    color:var(--c-text-dim);
}
.more-link a{color:var(--c-main)}

/* ==================== FAQ 섹션 ==================== */
.faq-section{
    padding:0 20px 60px;
    max-width:900px;
    margin:0 auto;
}
.faq-item{
    background:var(--c-bg-card);
    border:1px solid var(--c-border);
    border-radius:var(--radius);
    padding:20px;
    margin-bottom:16px;
}
.faq-item h2{
    font-size:1rem;
    font-weight:600;
    margin-bottom:12px;
    color:var(--c-text);
}
.faq-item p{
    font-size:0.95rem;
    color:var(--c-text-dim);
    line-height:1.7;
}
.faq-item a{color:var(--c-main)}

/* ==================== FAQ 아코디언 ==================== */
.faq-accordion{
    padding:0 0 10px;
}
.faq-accordion .faq-item{
    border-bottom:1px solid var(--c-border);
}
.faq-accordion .faq-question{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 0;
    font-size:0.95rem;
    font-weight:600;
    color:var(--c-text);
    text-align:left;
}
.faq-accordion .faq-question:hover{
    color:var(--c-main);
}
.faq-accordion .faq-icon{
    font-size:0.75rem;
    color:var(--c-text-dim);
    transition:transform 0.3s;
    flex-shrink:0;
    margin-left:16px;
}
.faq-accordion .faq-item.active .faq-icon{
    transform:rotate(180deg);
}
.faq-accordion .faq-answer{
    display:none;
    padding-bottom:18px;
}
.faq-accordion .faq-item.active .faq-answer{
    display:block;
}
.faq-accordion .faq-answer p{
    font-size:0.95rem;
    color:var(--c-text-dim);
    line-height:1.8;
}
.faq-accordion .faq-answer a{
    color:var(--c-main);
}

/* ==================== 상태 노트 ==================== */
.status-note{
    font-size:0.85rem;
    color:var(--c-text-muted);
    margin-top:12px;
}
.status-ok{color:#22c55e}
.status-blocked{color:#ef4444}

/* ==================== 소개/약관/개인정보/DMCA/문의 섹션 ==================== */
.about-section,
.terms-section,
.privacy-section,
.dmca-section,
.contact-section{
    padding:20px 20px 40px;
    max-width:900px;
    margin:0 auto;
}
.about-section h2,
.terms-section h2,
.privacy-section h2,
.dmca-section h2,
.contact-section h2{
    font-size:1.2rem;
    font-weight:600;
    margin-bottom:16px;
    color:var(--c-main);
}
.about-section p,
.terms-section p,
.privacy-section p,
.dmca-section p,
.contact-section p{
    font-size:0.95rem;
    color:var(--c-text-dim);
    line-height:1.7;
    margin-bottom:12px;
}
.about-section ul,
.terms-section ul,
.dmca-section ul,
.contact-section ul{
    padding-left:20px;
    margin-bottom:16px;
}
.about-section li,
.terms-section li,
.dmca-section li,
.contact-section li{
    font-size:0.95rem;
    color:var(--c-text-dim);
    margin-bottom:8px;
    position:relative;
}
.about-section li::before,
.terms-section li::before,
.dmca-section li::before,
.contact-section li::before{
    content:'•';
    position:absolute;
    left:-16px;
    color:var(--c-main);
}
.about-section a,
.privacy-section a,
.dmca-section a,
.contact-section a{color:var(--c-main)}
.contact-section .btn-primary{color:#000}

.feature-list{
    padding-left:20px;
}
.feature-list li{
    font-size:0.95rem;
    color:var(--c-text-dim);
    margin-bottom:10px;
    position:relative;
}
.feature-list li::before{
    content:'•';
    position:absolute;
    left:-16px;
    color:var(--c-main);
}
.feature-list strong{color:var(--c-text)}

.dmca-section ol{
    list-style:decimal;
    padding-left:24px;
    margin-bottom:16px;
}
.dmca-section ol li{
    font-size:0.95rem;
    color:var(--c-text-dim);
    margin-bottom:8px;
}

/* ==================== 404 에러 페이지 ==================== */
.error-section{
    text-align:center;
    padding:80px 20px 40px;
}
.error-content{max-width:500px;margin:0 auto}
.error-code{
    font-size:6rem;
    font-weight:700;
    color:var(--c-main);
    line-height:1;
    margin-bottom:16px;
}
.error-title{
    font-size:1.5rem;
    font-weight:600;
    margin-bottom:12px;
}
.error-desc{
    font-size:1rem;
    color:var(--c-text-dim);
    margin-bottom:32px;
}

.recommend-section{
    padding:40px 20px;
    max-width:800px;
    margin:0 auto;
}
.recommend-section h2{
    font-size:1.2rem;
    font-weight:600;
    text-align:center;
    margin-bottom:24px;
}
.recommend-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
}
.recommend-card{
    display:block;
    background:var(--c-bg-card);
    border:1px solid var(--c-border);
    border-radius:var(--radius);
    padding:20px 16px;
    text-align:center;
    transition:var(--transition);
}
.recommend-card:hover{
    border-color:var(--c-main);
    transform:translateY(-2px);
}
.recommend-card strong{
    display:block;
    font-size:0.95rem;
    margin-bottom:6px;
    color:var(--c-main);
}
.recommend-card span{
    font-size:0.8rem;
    color:var(--c-text-dim);
}

.cta-section{
    text-align:center;
    padding:40px 20px 60px;
}
.cta-section h2{
    font-size:1.2rem;
    font-weight:600;
    margin-bottom:8px;
}
.cta-section p{
    font-size:0.95rem;
    color:var(--c-text-dim);
    margin-bottom:20px;
}

/* ==================== 푸터 ==================== */
.site-footer{
    background:var(--c-bg-alt);
    border-top:1px solid var(--c-border);
    padding:40px 20px;
    text-align:center;
}
.footer-inner{max-width:800px;margin:0 auto}
.footer-nav{
    display:flex;
    justify-content:center;
    gap:24px;
    margin-bottom:20px;
    flex-wrap:wrap;
}
.footer-nav a{
    font-size:0.85rem;
    color:var(--c-text-dim);
    transition:var(--transition);
}
.footer-nav a:hover{color:var(--c-main)}
.footer-disclaimer{
    max-width:800px;
    margin:0 auto 20px;
    padding:16px;
    background:rgba(255,255,255,0.02);
    border-radius:8px;
    font-size:0.8rem;
    line-height:1.7;
    color:var(--c-text-muted);
}
.footer-disclaimer p{margin-bottom:8px}
.footer-disclaimer p:last-child{margin-bottom:0}
.footer-copy{font-size:0.85rem;color:var(--c-text-dim)}

/* ==================== 브레드크럼 ==================== */
.breadcrumb{
    max-width:900px;
    margin:0 auto;
    padding:20px 20px 0;
    font-size:0.85rem;
    color:var(--c-text-muted);
    text-align:center;
}
.breadcrumb a{
    color:var(--c-main);
    cursor:pointer;
    text-decoration:underline;
    text-underline-offset:3px;
}
.breadcrumb a:hover{
    color:var(--c-text);
}
.breadcrumb > span{
    margin:0 6px;
    color:var(--c-text-muted);
}

/* ==================== 블로그 목록 ==================== */
.blog-list{
    padding:20px 20px 60px;
    max-width:900px;
    margin:0 auto;
    display:grid;
    gap:16px;
}
.blog-card{
    display:block;
    background:var(--c-bg-card);
    border:1px solid var(--c-border);
    border-radius:var(--radius);
    padding:24px;
    transition:var(--transition);
}
.blog-card:hover{
    border-color:var(--c-main);
    transform:translateY(-2px);
}
.blog-card strong{
    display:block;
    font-size:1.05rem;
    font-weight:600;
    margin-bottom:8px;
    color:var(--c-text);
}
.blog-card:hover strong{color:var(--c-main)}
.blog-card p{
    font-size:0.9rem;
    color:var(--c-text-dim);
    line-height:1.7;
    margin-bottom:8px;
}
.blog-card .blog-date{
    font-size:0.8rem;
    color:var(--c-text-muted);
}
.page-header .blog-date{
    display:inline-block;
    font-size:0.85rem;
    color:var(--c-text-muted);
    margin-top:8px;
}
.blog-prev-next{
    display:flex;
    justify-content:space-between;
    gap:12px;
}
.blog-prev-next a{
    color:var(--c-main);
    font-size:0.95rem;
}
.blog-prev-next a:hover{
    text-decoration:underline;
}

/* ==================== 블로그 이미지 ==================== */
.blog-img{
    display:block;
    max-width:640px;
    width:100%;
    height:auto;
    margin:0 auto 30px;
    border-radius:8px;
}

/* ==================== 반응형 ==================== */
@media(max-width:768px){
    .header-nav{
        display:none;
        position:absolute;
        top:60px;
        left:0;
        right:0;
        background:var(--c-bg);
        border-bottom:1px solid var(--c-border);
        flex-direction:column;
        padding:16px 20px;
        gap:0;
    }
    .header-nav.show{display:flex}
    .header-nav a{
        display:block;
        padding:12px 0;
        border-bottom:1px solid var(--c-border);
    }
    .header-nav a:last-child{border-bottom:none}
    .menu-toggle{display:flex}
    .hero-section h1{font-size:1.5rem}
    .hero-desc{font-size:0.95rem}
    .menu-grid{grid-template-columns:repeat(2,1fr)}
    .info-list{grid-template-columns:1fr}
    .page-header h1{font-size:1.4rem}
    .address-card{padding:32px 20px}
    .footer-nav{gap:16px}
    .error-code{font-size:4rem}
    .recommend-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
    .menu-grid{grid-template-columns:1fr}
    .recommend-grid{grid-template-columns:1fr}
}