@import url('https://cdn.jsdelivr.net/gh/neodgm/neodgm-webfont@latest/neodgm/neodgm.css');
/* 
[바생바사 스타일 시트]
한국적인 멋을 살리기 위한 디자인 설정 파일입니다.
*/

/* 1. 폰트 가져오기 */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&family=Gowun+Batang:wght@400;700&family=Nanum+Brush+Script&family=Noto+Sans+KR:wght@300;400;500&family=Noto+Serif+KR:wght@300;400;500;600;700&family=Song+Myung&family=Yeon+Sung&display=swap');

:root {
    --bg-paper: #F2F0E9;
    /* 한지 색상 */
    --text-ink: #2C2C2C;
    /* 먹물 색상 */
}

body {
    background-color: var(--bg-paper);
    color: var(--text-ink);
    font-family: 'Nanum Myeongjo', serif;
    position: relative;
    overflow-x: hidden;
}

.font-traditional {
    font-family: 'Nanum Myeongjo', serif;
}

.font-serif-kr {
    font-family: 'Noto Serif KR', serif;
}

.font-brush-kr {
    font-family: 'Nanum Brush Script', cursive;
}

.font-hanja {
    font-family: 'Song Myung', serif;
}

/* 한지 질감 효과 */
.hanji-texture::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
    opacity: 0.4;
    pointer-events: none;
    z-index: -1;
}

/* 부드러운 그림자 */
.soft-shadow {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* 한 글자씩 나타나는 애니메이션 */
@keyframes fadeInLoop {
    0% {
        opacity: 0;
        transform: translateY(5px);
    }

    20% {
        opacity: 1;
        transform: translateY(0);
    }

    80% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-5px);
    }
}

.animate-fade-letter {
    opacity: 0;
    animation: fadeInLoop 4s ease-in-out infinite;
    display: inline-block;
}
/* Tier System CSS */
.tier-sprite {
    background-image: url('/static/tier_sprite.png');
    background-size: 500% auto;
    background-repeat: no-repeat;
    display: inline-block;
}

.tier-icon-바린이 { background-position: 0% center; }
.tier-icon-바중이 { background-position: 25% center; }
.tier-icon-바숙이 { background-position: 50% center; }
.tier-icon-바고수 { background-position: 75% center; }
.tier-icon-바황   { background-position: 100% center; }
.tier-icon-바신   { 
    background-image: url('/static/tier_god.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}


.font-calli {
    font-family: 'Yeon Sung', cursive;
}
.font-pixel { font-family: 'NeoDunggeunmo', monospace; }

/* ==================== */
/* 모바일 반응형 스타일 */
/* ==================== */

/* 모바일에서 터치 영역 확대 */
@media (max-width: 768px) {
    /* 버튼 터치 영역 */
    button, a {
        min-height: 36px;
    }

    /* 텍스트 줄임 처리 */
    .line-clamp-1 {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* 모달 패딩 조정 */
    .modal-content {
        padding: 1rem;
    }

    /* 카테고리 탭 스크롤 */
    .category-scroll {
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }

    .category-scroll > a {
        scroll-snap-align: start;
    }
}

/* 안전 영역 (노치 대응) */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }

    footer {
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
}

/* 모바일 스크롤바 숨기기 */
@media (max-width: 768px) {
    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }
}

/* 모바일 터치 피드백 */
@media (hover: none) {
    button:active, a:active {
        opacity: 0.7;
    }
}