/* ===== RESPONSIVE CSS ===== */
/* Desktop(1920x1080) 기준, 작은 화면으로 점진적 축소 */
/* 핵심: 타이틀 애니메이션 & Contact 애니메이션 유지 */

/* ===== iOS Safari 배경 이미지 수정 ===== */
/* iOS에서 background-attachment: fixed가 제대로 작동하지 않음 */
@supports (-webkit-touch-callout: none) {
    .background-layer {
        background-attachment: scroll;
        background-size: cover;
        background-position: center center;
    }
}

/* 모바일에서 배경 고정 해제 (터치 디바이스) */
@media (max-width: 1024px) {
    .background-layer {
        background-attachment: scroll;
        background-size: cover;
        background-position: center center;
    }
    
    .background-layer::before {
        background-attachment: scroll;
    }
}

/* ===== 큰 데스크탑 ~ 작은 데스크탑 (1440px 이하) ===== */
@media (max-width: 1440px) {
    .works-container {
        max-width: 1000px;
    }

    .contact-info {
        gap: 70px;
    }
}

/* ===== 작은 데스크탑 (1200px 이하) ===== */
@media (max-width: 1200px) {
    /* Hero 타이틀 - 비율 축소 */
    .hero-title {
        font-size: 90px;
        letter-spacing: 6px;
    }
    
    .hero-subtitle {
        font-size: 24px;
        margin-right: 35px;
    }
    
    .hero-into {
        right: -100px;
        top: -60px;
    }
    
    .hero-into-text {
        font-size: 26px;
    }
    
    .highlight {
        font-size: 35px;
    }
    
    .hero-tagline {
        font-size: 24px;
        margin-left: -200px;
        margin-top: 60px;
    }
    
    .highlight2 {
        font-size: 24px;
    }
    
    /* 타이틀 별 */
    .title-star-1 {
        width: 320px;
        right: 100px;
        top: -40px;
    }
    
    .title-star-2 {
        width: 180px;
        right: -50px;
        top: -110px;
    }
    
    .title-star-3 {
        width: 100px;
        left: 60px;
        bottom: -25px;
    }
    
    /* Works */
    .works-container {
        max-width: 900px;
        gap: 20px;
    }
    
    .works-sidebar {
        width: 180px;
    }
    
    .category-num {
        font-size: 14px;
    }
    
    .category-name {
        font-size: 13px;
    }
    
    /* Contact */
    .contact-info {
        gap: 50px;
    }
    
    .contact-item h4 {
        font-size: 22px;
    }
    
    .contact-content .con-balloon {
        width: 200px;
        top: -50px;
        left: 200px;
    }

    .spa-ph {
        width: 160px;
        top: -35px;
        right: 5px;
    }

    .spa-em {
        width: 180px;
        top: -20px;
        right: -10px;
    }

    .spa-ins {
        width: 170px;
        top: -30px;
        right: 0;
    }



}


/* --------------------------------------------------------------------------- */


/* ===== TABLET (1024px 이하) ===== */
@media (max-width: 1024px) {
    /* scroll-snap 해제 - 부드러운 스크롤 */
    html {
        scroll-snap-type: none;
    }
    
    .section {
        scroll-snap-align: none;
        min-height: auto;
        height: auto;
    }
    
    /* Hero 타이틀 - 레이아웃 재구성 */
    .hero-section {
        min-height: 100vh;
    }
    
    .hero-content {
        width: 80%;
    }
    
    .hero-title {
        font-size: 75px;
        letter-spacing: 5px;
    }
    
    .hero-subtitle {
        font-size: 20px;
        margin-right: 30px;
    }
    
    .hero-into {
        right: 13%;
        top: -50px;
    }
    
    .hero-into-text {
        font-size: 22px;
    }
    
    .highlight {
        font-size: 30px;
    }
    
    .hero-tagline {
        font-size: 20px;
        margin-left: -160px;
        margin-top: 50px;
    }
    
    .highlight2 {
        font-size: 20px;
    }
    
    /* 타이틀 별 */
    .title-star-1 {
        width: 260px;
        right: 35%;
        top: -30px;
    }
    
    .title-star-2 {
        width: 140px;
        right: 18%;
        top: -90px;
    }
    
    .title-star-3 {
        width: 85px;
        left: 30%;
        bottom: -20px;
    }
    
    /* Profile */
    .profile-section {
        padding: 80px 30px;
    }
    
    .profile-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .profile-card {
        /* max-width: 280px; */
        margin: 0 auto;
    }

    .profile-balloon {
        right: 44%;
    }
    
    /* ===== Works - 사이드바 숨기고 섹션 타이틀 표시 ===== */
    .works-section {
        padding: 50px 20px;
        height: auto;
        min-height: auto;
    }
    
    .works-container {
        flex-direction: column;
        gap: 20px;
        max-width: 100%;
        padding: 0;
    }
    
    /* 사이드바(탭) 완전 숨김 */
    .works-sidebar {
        display: none;
    }
    
    .works-content {
        padding: 0;
        width: 100%;
    }
    
    /* Work Item 상단에 섹션 번호+타이틀 표시 */
    .work-item {
        flex-direction: column;
        gap: 10px;
        padding: 25px 20px;
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(50px);
        border: 1px solid rgba(255, 255, 255, 0.9);
        position: relative;
    }
    
    /* 섹션 타이틀 - work-info의 h3 위에 번호 표시 */
    .work-item::before {
        content: attr(data-section-title);
        display: block;
        font-family: var(--font-pixel-1);
        font-size: 18px;
        color: var(--primary-cyan-dark);
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(0, 168, 204, 0.2);
        text-align: center;
    }
    
    /* 각 섹션별 타이틀 (CSS로 표시) */
    #work-clone .work-item::before {
        content: "01  Web - Clone Coding";
    }
    
    #work-redesign .work-item::before {
        content: "02  Web - Redesign";
    }
    
    #work-logo .work-item::before {
        content: "03  Branding - Logo";
    }
    
    #work-illust .work-item::before {
        content: "04  Illustration";
    }
    
    #work-webtoon .work-item::before {
        content: "05  Cartoons";
    }

    /* Work Item 텍스트 중앙 정렬 */
    .work-item {
        text-align: center;
    }

    .work-info {
        text-align: center;
        align-items: center;
    }

    .work-info h3 {
        text-align: center;
    }

    .work-date,
    .work-contribution {
        justify-content: center;
    }

    .work-description {
        text-align: center;
    }

    .work-buttons {
        justify-content: center;
    }

    

    /* Gallery */
    .gallery-container {
        padding: 20px;
    }
    
    .gallery-grid {
        grid-template-columns: repeat(4, 1fr);
        /* gap: 12px; */
    }

    .gallery-tags {
        font-size: 12px;
    }
    
    /* Webtoon Tabs */
    .webtoon-tabs {
        gap: 12px;
    }
    
    .wt-tab {
        padding: 8px 14px;
        font-size: 11px;
    }
    
    /* Contact */
    .contact-section {
        padding: 80px 30px;
        height: auto;
        min-height: 100vh;
    }
    
    .contact-content {
        max-width: 550px;
    }
    
    .thanks-title {
        font-size: 40px;
        margin-bottom: 40px;
    }
    
    .contact-info {
        gap: 40px;
    }
    
    .contact-item h4 {
        font-size: 20px;
    }
    
    .contact-item p {
        font-size: 16px;
    }
    
    .contact-content .con-balloon {
        width: 190px;
        top: -40px;
        left: 170px;
    }

    .spa-ph {
        width: 140px;
        top: -30px;
    }

    .spa-em {
        width: 180px;
        top: -30px;
        right: -10px;
    }

    .spa-ins {
        width: 170px;
        top: -30px;
        right: -10px;
    }

    
    /* Modal */
    .modal-content {
        margin: 15px;
        max-width: calc(100vw - 30px);
    }
    
    .modal-slider-container {
        padding: 20px;
        gap: 20px;
    }
}


/* --------------------------------------------------------------------------- */


/* ===== TABLET SMALL (768px 이하) ===== */
@media (max-width: 768px) {
    /* ===== 모바일용 애니메이션 키프레임 ===== */
    @keyframes mobileSlideLeft {
        from {
            opacity: 0;
            transform: translateX(-40px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    
    @keyframes mobileSlideRight {
        from {
            opacity: 0;
            transform: translateX(40px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    
    @keyframes mobileSlideUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes mobileScaleIn {
        from {
            opacity: 0;
            transform: scale(0.5);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }
    
    @keyframes mobileStarFloat {
        from {
            opacity: 0;
            transform: translateX(-50%) scale(0.3) rotate(-15deg);
        }
        to {
            opacity: 0.9;
            transform: translateX(-50%) scale(1) rotate(0deg);
        }
    }
    
    /* Hero 타이틀 - 세로 중앙 정렬로 변경 */
    .hero-content {
        width: 90%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .hero-title {
        font-size: 55px;
        letter-spacing: 4px;
        margin-bottom: 0;
    }
    
    .hero-subtitle {
        font-size: 18px;
        margin-right: 0;
        margin-bottom: -10px;
        text-align: center;
    }
    
    /* 모바일 애니메이션: I turn little - 왼쪽에서 슬라이드 */
    .hero-subtitle.show {
        animation: mobileSlideLeft 0.8s ease-out forwards !important;
    }
    
    /* into moments - 한 줄로 배치 */
    .hero-into {
        position: static;
        margin-top: 10px;
        text-align: center;
        display: flex;
        flex-direction: row;
        align-items: baseline;
        justify-content: center;
        gap: 8px;
    }
    
    .hero-into-text {
        font-size: 18px;
        margin-bottom: 0;
    }
    
    .highlight {
        font-size: 26px;
    }
    
    /* 모바일 애니메이션: into moments - 오른쪽에서 슬라이드 */
    .hero-into.show {
        animation: mobileSlideRight 0.8s ease-out forwards !important;
    }
    
    /* that stay with you - 마진 초기화 */
    .hero-tagline {
        font-size: 18px;
        margin-left: 0;
        margin-top: 15px;
        text-align: center;
    }
    
    .highlight2 {
        font-size: 18px;
    }
    
    /* 모바일 애니메이션: that stay with you - 아래에서 위로 */
    .hero-tagline.show {
        animation: mobileSlideUp 0.8s ease-out forwards !important;
    }
    
    /* 모바일 애니메이션: Sparkles - 중앙에서 확대 */
    .hero-title.show {
        animation: mobileScaleIn 0.9s ease-out forwards !important;
    }
    
    /* 타이틀 별 - 1개만 표시, 회전하며 나타남 */
    .title-star-1 {
        width: 450px;
        left: 45%;
        right: 50%;
        transform: translate(-50%);
        top: -65px;
    }
    
    .title-star-1.show {
        animation: mobileStarFloat 1s ease-out forwards !important;
    }
    
    .title-star-2,
    .title-star-3 {
        display: none;
    }
    
    /* Navigation */
    .main-nav ul {
        gap: 20px;
    }
    
    .main-nav a {
        font-size: 20px;
    }
    
    /* Banner */
    .portfolio-banner {
        height: 35px;
    }

    .portfolio-title {
        font-size: 12px;
        padding: 12px 20px;
    }
    
    .banner-text {
        font-size: 12px;
    }
    
    /* Profile */
    .profile-section {
        padding: 40px 20px;
    }
    
    .detail-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .profile-card {
        padding: 40px 50px;
    }

    .profile-balloon {
        right: 44%;
    }
    
    /* name-sparkle 조정 */
    .name-sparkle1 {
        width: 20px;
        left: 30px;
        top: 0;
    }
    
    .name-sparkle2 {
        width: 20px;
        right: 30px;
        top: 18px;
    }

    /* .profile-balloon {
        left: 50%;
        right: 50%;
        transform: translate(-50%);
    } */
    
    /* Works - 섹션 간격 축소 */
    .works-section {
        padding: 20px 15px;
    }

    .monitor-frame {
        margin-bottom: 10px;
    }

    .work-item {
    text-align: center;
    }

    .work-info {
        text-align: center;
        align-items: center;
    }

    .work-info .works-sparkle {
        top: -20px;
        left: 50%;
        right: 50%;
        transform: translate(-50%);
    }
    

    .work-info h3 {
        text-align: center;
    }

    .work-date,
    .work-contribution {
        justify-content: center;
    }

    .work-description {
        text-align: center;
    }

    .work-buttons {
        justify-content: center;
    }
    
    .category-item {
        padding: 6px 10px;
    }
    
    .category-num {
        font-size: 11px;
    }
    
    .category-name {
        font-size: 10px;
    }
    
    /* .btn-catch {
        display:
    } */

    /* Gallery - 중앙 정렬 */
    .gallery-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }
    
    .gallery-item {
        width: calc(50% - 10px);
    }
    
    .gallery-title {
        font-size: 14px;
    }

     .gallery-year {
        font-size: 11px;
    }

    .gallery-tool {
        font-size: 11px;
    }

    .gallery-tags {
        font-size: 10px;
    }
    
    /* Webtoon */
    .webtoon-tabs {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .wt-tab {
        padding: 6px 10px;
        font-size: 10px;
    }
    
    .tab-sparkle {
        width: 12px;
        height: 12px;
    }
    
    /* 웹툰 콘텐츠 높이 auto로 변경 */
    .webtoon-tab-content {
        height: auto;
        min-height: 400px;
        overflow: visible;
    }
    
    .cut-grid .wt-item {
        max-width: 400px;
    }


    /* Contact - 1열 배치 */
    .contact-section {
        padding: 60px 20px;
    }
    
    .contact-content {
        position: relative;
        max-width: 100%;
        width: 100%;
        padding: 0 15px;
    }
    
    .contact-message-wrap {
        text-align: center;
    }
    
    .contact-content .con-balloon {
        /* width: 140px;
        left: 50%;
        transform: translateX(-50%) rotate(270deg);
        top: -45px; */
    }
    
    .contact-message {
        font-size: 15px;
        margin-bottom: 30px;
    }
    
    .thanks-title {
        font-size: 32px;
        margin-bottom: 35px;
    }
    
    .contact-info {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .contact-item {
        text-align: center;
    }
    
    .contact-item h4 {
        font-size: 18px;
    }
    
    .contact-item p {
        font-size: 14px;
    }

    .contact-content .con-balloon {
        width: 170px;
        top: -40px;
        left: 38%;
    }
    
    /* Contact sparkle - 중앙 정렬 */
    .spa-ph, .spa-em, .spa-ins {
        width: 100px;
        top: -20px;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }

    
    /* Modal */
    .modal-content {
        padding: 15px;
        margin: 10px;
    }
    
    /* 모달 헤더 - 한 줄 유지 */
    .modal-header {
        flex-wrap: nowrap;
        gap: 8px;
        padding: 12px 15px;
        align-items: flex-start;
    }
    
    .modal-title {
        flex: 1;
        min-width: 0;
        flex-wrap: wrap;
        gap: 5px;
    }
    
    .modal-close {
        flex-shrink: 0;
    }
    
    .modal-title-text {
        font-size: 13px;
    }
    
    .modal-des-text {
        font-size: 11px;
    }
    
    .modal-slider-container {
        padding: 15px;
        gap: 15px;
    }
    
    .modal-nav-btn {
        width: 32px;
        height: 32px;
        font-size: 18px;
    }
    
    .modal-image-container {
        max-height: 55vh;
    }
    
    .modal-image-container img {
        max-height: 55vh;
    }
    
    .modal-image-container.scroll-mode {
        max-height: 55vh;
    }
}


/* --------------------------------------------------------------------------- */


/* ===== MOBILE (480px 이하) ===== */
@media (max-width: 480px) {
    /* 공통 - 섹션 간격 축소 */
    .section {
        padding: 30px 15px;
    }
    
    /* Hero 타이틀 */
    .hero-section {
        padding: 20px 15px;
    }
    
    .hero-title {
        font-size: 42px;
        letter-spacing: 3px;
    }
    
    .hero-subtitle {
        font-size: 15px;
    }
    
    .hero-into-text {
        font-size: 15px;
    }
    
    .highlight {
        font-size: 22px;
    }
    
    .hero-tagline {
        font-size: 15px;
    }
    
    .highlight2 {
        font-size: 15px;
    }
    
    /* 타이틀 별 */
    .title-star-1 {
        width: 360px;
        top: -22%;
    }
    
    /* Navigation - 가독성 개선 */
    .main-nav {
        padding: 12px 15px;
    }
    
    .main-nav ul {
        gap: 20px;
    }
    
    .main-nav a {
        font-size: 18px;
    }
    
    /* Banner */
    .portfolio-banner {
        height: 30px;
    }
    
    .banner-text {
        font-size: 10px;
    }
    
    /* Profile - 섹션 간격 축소 */
    .profile-section {
        padding: 30px 15px;
    }
    
    .profile-card {
        max-width: 300px;
    }

    .profile-balloon {
        right: 39%;
    }
    
    .profile-name {
        font-size: 18px;
    }
    
    /* name-sparkle 조정 */
    .name-sparkle1 {
        width: 18px;
        left: 25px;
        top: -2px;
    }
    
    .name-sparkle2 {
        width: 18px;
        right: 25px;
        top: 15px;
    }
    
    .profile-details {
        padding: 15px;
    }
    
    /* Works - 섹션 간격 축소 */
    .works-section {
        padding: 15px 10px;
    }
    
    .works-categories {
        gap: 5px;
    }
    
    .category-item {
        padding: 5px 8px;
    }
    
    .category-num {
        font-size: 10px;
    }
    
    .category-name {
        font-size: 9px;
    }
    
    .work-item {
        padding: 15px;
    }
    
    /* Gallery */
    .gallery-container {
        padding: 12px;
    }
    
    .gallery-header {
        padding: 8px 12px;
    }
    
    .gallery-title {
        font-size: 12px;
    }
    
    .illust-sparkle {
        width: 20px;
    }
    
    /* Gallery - 2열 4행, 중앙 정렬 */
    .gallery-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        padding: 10px;
    }
    
    .gallery-item {
        width: calc(50% - 8px);
    }

     .gallery-year {
        font-size: 8px;
    }

    .gallery-tool {
        font-size: 8px;
    }

     .gallery-tags {
        font-size: 7px;
    }
    
    /* Webtoon */
    .webtoon-tab-container {
        padding: 12px;
    }
    
    .webtoon-tabs {
        gap: 6px;
    }
    
    .wt-tab {
        padding: 5px 8px;
        font-size: 9px;
        gap: 3px;
    }
    
    .tab-sparkle {
        width: 10px;
        height: 10px;
    }
    
    /* 웹툰 콘텐츠 높이 auto */
    .webtoon-tab-content {
        height: auto;
        min-height: 300px;
        overflow: visible;
    }
    
    .wt-item-info {
        margin-top: 5px;
    }
    
    .wt-item-title {
        font-size: 9px;
    }
    
    .wt-item-tag {
        font-size: 8px;
    }

    .cut-grid .wt-item {
        max-width: 350px;
    }
    
    /* Contact - 간격 축소 */
    .contact-section {
        padding: 30px 15px;
    }
    
    .contact-content .con-balloon {
        /* width: 110px;
        top: -35px; */
    }
    
    .contact-message {
        font-size: 13px;
        margin-bottom: 25px;
    }
    
    .thanks-title {
        font-size: 26px;
        margin-bottom: 30px;
    }
    
    .contact-info {
        gap: 25px;
    }
    
    .contact-item h4 {
        font-size: 16px;
    }
    
    .contact-item p {
        font-size: 12px;
    }
    
    .contact-content .con-balloon {
        width: 130px;
        top: -25px;
        left: 32%;
    }

    .spa-ph, .spa-em, .spa-ins {
        width: 110px;
        top: -25px;
    }
    
    /* Modal */
    .modal-content {
        padding: 12px;
        margin: 8px;
        border-radius: 12px;
    }
    
    /* 모달 헤더 - 한 줄 유지 */
    .modal-header {
        flex-wrap: nowrap;
        padding: 10px 12px;
        align-items: flex-start;
    }
    
    .modal-title {
        flex: 1;
        min-width: 0;
    }
    
    .modal-icon {
        font-size: 12px;
    }
    
    .modal-title-text {
        font-size: 11px;
    }
    
    .modal-des-text {
        font-size: 9px;
    }
    
    .modal-close {
        flex-shrink: 0;
        width: 24px;
        height: 24px;
        font-size: 12px;
    }
    
    .modal-slider-container {
        padding: 10px;
        gap: 10px;
    }
    
    .modal-nav-btn {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }
    
    .modal-image-container {
        max-height: 45vh;
    }
    
    .modal-image-container img {
        max-height: 45vh;
    }
    
    .modal-image-container.scroll-mode {
        max-height: 45vh;
    }
    
    /* Logo Modal */
    .logo-indicator {
        padding: 8px 0;
        gap: 5px;
    }
    
    .indicator-dot {
        width: 7px;
        height: 7px;
    }
    
    .logo-modal-info {
        font-size: 10px;
        padding: 5px 0 8px;
    }
    
    .logo-page-num {
        font-size: 11px;
    }
}


/* --------------------------------------------------------------------------- */



/* ===== 매우 작은 화면 (360px 이하) ===== */
@media (max-width: 360px) {
    .hero-title {
        font-size: 35px;
    }
    
    .hero-subtitle {
        font-size: 13px;
    }
    
    .hero-into-text {
        font-size: 13px;
    }
    
    .highlight {
        font-size: 18px;
    }
    
    .hero-tagline {
        font-size: 13px;
    }
    
    .title-star-1 {
        width: 220px;
        top: -45px;
    }
    
    .main-nav a {
        font-size: 13px;
    }
    
    .thanks-title {
        font-size: 22px;
    }

    .contact-content .con-balloon {
        width: 120px;
        top: -25px;
        left: 40px;
    }
    
    /* 카테고리 이름 숨김 */
    .category-name {
        display: none;
    }
    
    .wt-tab span:not(.tab-sparkle):not(:first-child) {
        display: none;
    }

    .cut-grid .wt-item {
        max-width: 280px;
    }
}