/* ===== RESET & BASE ===== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: #26201E;
    color: #ffffff;
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    overflow-x: hidden;
    min-height: 100vh;
}

a {
    color: #ffffff;
    text-decoration: none;
}

ul {
    list-style: none;
}

img {
    display: block;
    max-width: 100%;
}

/* ===== PAGE SYSTEM ===== */
.page {
    display: none;
    min-height: 100vh;
    position: relative;
}

.page.active {
    display: block;
}

.page-inner {
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ===== LOGO ===== */
.logo {
    width: min(6.04vw, 87px);     /* 130의 67%, 피그마 비율 기준 */
    height: auto;
    object-fit: contain;
    cursor: pointer;
}

/* ================================================================
   MAIN PAGE — aspect-ratio 1440:1518 + % 포지셔닝
   ================================================================ */
.page-inner.main-layout {
    display: block;
    min-height: auto;
    aspect-ratio: 1440 / 1518;
}

.main-logo-bar {
    display: contents;
}

.main-logo-bar.scrolled {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: #1e1a18;
    padding: min(5.56vw, 80px) 0 min(1.39vw, 20px) 0;
    animation: fadeInBar 0.3s ease;
}

.main-logo-bar.scrolled .main-logo {
    position: absolute;
    right: max(15.42%, calc(50vw - 498px));
    top: 50%;
    transform: translateY(-50%);
}

@keyframes fadeInBar {
    from { opacity: 0; transform: translateY(-100%); }
    to { opacity: 1; transform: translateY(0); }
}

.main-header {
    display: contents;
}

/* 소개글: left 43px(2.99%), top 53px(3.49%) */
.main-description {
    position: absolute;
    left: 2.99%;
    top: 3.49%;
    font-family: 'Pretendard', sans-serif;
    font-size: min(1.46vw, 21px);       /* 21/1440 */
    font-weight: 400;
    line-height: 1.19;                   /* 25/21 */
    color: rgba(255, 255, 255, 0.5);
    width: auto;
    max-width: 61.18%;                   /* 881/1440 */
}

/* 로고: right 222px(15.42%), top 87px(5.73%) */
.main-logo {
    position: absolute;
    right: 15.42%;
    top: 5.73%;
    width: min(6.04vw, 87px);
    height: auto;
    margin: 0;
}

/* 네비: Group3 left 1089px(75.63%), top 186px(12.25%), height 966px(63.64%) */
.main-nav {
    position: absolute;
    left: 75.63%;
    top: 12.25%;
    height: 63.64%;                      /* 966/1518 — 라인이 메뉴 아래까지 뻗도록 */
    display: flex;
    align-items: stretch;
}

/* 구분선: 4px solid #FFFEF4 */
.nav-line {
    width: min(0.28vw, 4px);            /* 4/1440 */
    background-color: #FFFEF4;
    margin-right: min(2.78vw, 40px);    /* 40/1440 */
    align-self: stretch;
}

/* 메뉴 리스트: 라인 시작점과 첫 항목 사이 10px 간격 */
.nav-list {
    padding-top: min(0.69vw, 10px);    /* 10/1440 */
}

/* 메뉴 간격: 76px pitch - 48px line = 28px gap */
.nav-list li {
    margin-bottom: min(1.94vw, 28px);   /* 28/1440 */
}

.nav-list li:last-child {
    margin-bottom: 0;
}

.nav-list li a {
    font-family: 'Rokkitt', serif;
    font-size: min(2.78vw, 40px);       /* 40/1440 */
    font-weight: 400;
    line-height: 1.2;                    /* 48/40 */
    color: #ffffff;
    transition: opacity 0.3s ease;
}

.nav-list li a:hover {
    opacity: 0.6;
}

/* Oscilloscorp: text-shadow */
.nav-list li:first-child a {
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

/* #???? 4개: 반투명 */
.nav-list li:nth-child(n+7) a {
    color: rgba(255, 255, 255, 0.5);
}

/* 푸터: bottom 36px(2.37%) */
.main-footer {
    position: absolute;
    bottom: 2.37%;
    left: 0;
    right: 0;
}

.main-footer .footer-copyright {
    font-family: 'Pretendard', sans-serif;
    font-size: min(1.46vw, 21px);
    font-weight: 400;
    text-align: center;
    margin-bottom: min(2.64vw, 38px);   /* 38/1440 */
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.19;
}

.main-footer .footer-warning {
    font-family: 'Pretendard', sans-serif;
    font-size: min(1.46vw, 21px);
    font-weight: 400;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.19;
}

/* ================================================================
   SUB PAGES (Common) — 모든 수치 vw 기반
   ================================================================ */
.sub-layout {
    padding: 0;
}

.sub-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: transparent;
    padding: min(5.56vw, 80px) 0 min(1.39vw, 20px) 0;
    margin-bottom: min(3.61vw, 52px);
    transition: background-color 0.3s ease;
}

.sub-header.scrolled {
    background-color: #1e1a18;
}

/* ←: left 81px(5.63%) */
.back-btn {
    position: absolute;
    left: min(5.63vw, 81px);
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Inter', sans-serif;
    font-size: min(2.78vw, 40px);
    font-weight: 400;
    color: #ffffff;
    text-decoration: none;
    line-height: 1.2;
    transition: opacity 0.3s ease;
}

.back-btn:hover {
    opacity: 0.6;
}

/* 서브 푸터: width 881px(61.18vw) */
.sub-footer {
    width: 100%;
    max-width: min(61.18vw, 881px);
    margin: auto auto 0 auto;
    padding: min(5.56vw, 80px) 0;
    text-align: center;
}

.sub-footer .footer-copyright {
    font-family: 'Pretendard', sans-serif;
    font-size: min(1.46vw, 21px);
    font-weight: 400;
    margin-bottom: min(2.64vw, 38px);
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.19;
}

.sub-footer .footer-contact {
    font-family: 'Pretendard', sans-serif;
    font-size: min(1.46vw, 21px);
    font-weight: 400;
    line-height: 1.19;
    margin-bottom: min(2.64vw, 38px);
    color: rgba(255, 255, 255, 0.5);
}

.sub-footer .footer-warning {
    font-family: 'Pretendard', sans-serif;
    font-size: min(1.46vw, 21px);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.19;
}

/* ================================================================
   OSCILLOSCORP PAGE
   ================================================================ */
.oscillo-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 min(22.22vw, 320px);     /* 320/1440 */
}

.collab-title {
    display: flex;
    align-items: center;
    gap: min(1.11vw, 16px);             /* 16/1440 */
    margin-bottom: min(3.06vw, 44px);   /* 44/1440 */
}

.collab-name {
    font-family: 'Inter', sans-serif;
    font-size: min(2.78vw, 40px);
    font-weight: 800;
    font-style: italic;
    color: #ffffff;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.collab-nintendo img {
    height: min(2.78vw, 40px);
    width: auto;
    display: block;
}

.collab-x {
    font-family: 'Inter', sans-serif;
    font-size: min(2.78vw, 40px);
    font-weight: 800;
    font-style: italic;
    color: #ffffff;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

/* 점선: 2px dashed, width 800px(55.56vw) */
.collab-line {
    width: 100%;
    max-width: min(55.56vw, 800px);
    height: 0;
    border-top: min(0.14vw, 2px) dashed #FFFEF4;
    margin-bottom: min(3.06vw, 44px);
}

/* 설명: 24px(1.67vw), width 800px */
.collab-description {
    font-family: 'Pretendard', sans-serif;
    font-size: min(1.67vw, 24px);
    font-weight: 400;
    line-height: 1.21;                   /* 29/24 */
    color: #ffffff;
    text-align: center;
    width: 100%;
    max-width: min(55.56vw, 800px);
}

/* ================================================================
   CH.27 PAGE
   ================================================================ */
.ch27-content {
    flex: 1;
    padding: 0 min(9.24vw, 133px);      /* 133/1440 */
    display: flex;
    flex-direction: column;
    gap: min(4.17vw, 60px);
}

/* 카드: gap 108px(7.50vw) */
.ch27-card {
    display: flex;
    align-items: flex-start;
    gap: min(7.50vw, 108px);
}

/* 이미지: 372x372 (25.83vw) */
.ch27-image {
    width: min(25.83vw, 372px);
    height: min(25.83vw, 372px);
    object-fit: cover;
    flex-shrink: 0;
}

.ch27-info {
    padding-top: min(3.40vw, 49px);      /* 49/1440 */
}

/* 제목: Pretendard 700, 40px */
.ch27-title {
    font-family: 'Pretendard', sans-serif;
    font-size: min(2.78vw, 40px);
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
    margin-bottom: min(6.60vw, 95px);
    white-space: pre-line;
}

/* 상세내용: 24px, 줄바꿈 유지 */
.ch27-detail {
    font-family: 'Pretendard', sans-serif;
    font-size: min(1.67vw, 24px);
    font-weight: 400;
    color: #ffffff;
    line-height: 1.75;
    white-space: pre-line;
}

/* ================================================================
   PROJECT PAGE — 카테고리별 3열 핀터레스트 그리드
   ================================================================ */
.project-content {
    flex: 1;
    padding: 0 min(5.07vw, 73px);       /* 73/1440 (피그마 원본) */
}

/* 카테고리 구분선 */
.project-category-divider {
    font-family: 'Pretendard', sans-serif;
    font-size: min(1.25vw, 18px);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    padding-bottom: min(0.83vw, 12px);
    margin-bottom: min(1.67vw, 24px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.project-category-section {
    margin-bottom: min(3.47vw, 50px);
}

.project-category-section:last-child {
    margin-bottom: 0;
}

.project-grid {
    display: flex;
    gap: min(3.26vw, 47px);             /* (520-73-400)=47px gap */
}

.project-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: min(2.78vw, 40px);
}

.project-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.project-img:hover {
    transform: scale(1.02);
    opacity: 0.85;
}

/* ================================================================
   SHOP PAGE — 피그마: 4열, 각 250x248, left 175px
   ================================================================ */
.shop-content {
    flex: 1;
    padding: 0 min(12.15vw, 175px);     /* 175/1440 */
}

.shop-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: min(1.60vw, 23px) min(2.08vw, 30px);  /* 23/1440, 30/1440 */
    justify-content: center;
}

.shop-item {
    width: 100%;
    aspect-ratio: 250 / 248;
    background-color: rgba(217, 217, 217, 0.5);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
    position: relative;
}

.shop-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* placeholder: 호버/클릭 불가 */
.shop-item.placeholder {
    cursor: default;
}

/* has-image: 호버/클릭 가능 */
.shop-item.has-image {
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.shop-item.has-image:hover {
    transform: scale(1.05);
    opacity: 0.8;
}

/* ================================================================
   SHOP DETAIL — 피그마: 이미지 1090x1081, left 175px
   ================================================================ */
.shop-detail-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 min(12.15vw, 175px);
}

/* 이미지: 1090x1081 (거의 정사각형, 99.17% ratio) */
.shop-detail-image {
    width: 100%;
    height: 0;
    padding-bottom: 99.17%;              /* 1081/1090 */
    background-color: rgba(217, 217, 217, 0.5);
    margin-bottom: min(2.78vw, 40px);
}

/* 상품명: Inter italic 800, 40px + text-shadow */
.shop-detail-name {
    font-family: 'Inter', sans-serif;
    font-size: min(2.78vw, 40px);
    font-weight: 800;
    font-style: italic;
    color: #ffffff;
    text-align: center;
    margin-bottom: min(1.11vw, 16px);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

/* 가격: Inter italic 800, 40px + text-shadow */
.shop-detail-price {
    font-family: 'Inter', sans-serif;
    font-size: min(2.78vw, 40px);
    font-weight: 800;
    font-style: italic;
    color: #ffffff;
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

/* 상세내용: Inter italic, 기본 24px */
.shop-detail-desc {
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 400;
    font-style: italic;
    color: #999999;
    text-align: center;
    margin-top: min(4.44vw, 64px);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    white-space: pre-line;
}

/* ================================================================
   PAGE TRANSITIONS
   ================================================================ */
.page {
    animation: none;
}

.page.slide-in-right {
    animation: slideInRight 0.3s ease-in-out forwards;
}

.page.slide-in-left {
    animation: slideInLeft 0.3s ease-in-out forwards;
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

@keyframes slideInLeft {
    from { transform: translateX(-100%); opacity: 0; }
    to   { transform: translateX(0);     opacity: 1; }
}

/* ================================================================
   TABLET (≤1024px)
   ================================================================ */
@media (max-width: 1024px) {
    .project-grid {
        flex-wrap: wrap;
    }

    .project-col {
        flex: 0 0 calc(50% - min(1.63vw, 23.5px));
    }

    .shop-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .ch27-card {
        gap: min(4.17vw, 60px);
    }
}

/* ================================================================
   MOBILE (≤768px) — 피그마 모바일 412px 기준 고정값
   ================================================================ */
@media (max-width: 768px) {
    /* 메인: aspect-ratio 해제, flex 복원 */
    .page-inner.main-layout {
        display: flex;
        flex-direction: column;
        aspect-ratio: auto;
        min-height: 100vh;
    }

    .main-logo-bar {
        display: flex;
        justify-content: center;
        position: sticky;
        top: 0;
        z-index: 100;
        background-color: transparent;
        transition: background-color 0.3s ease;
        padding: min(calc(20 / 412 * 100vw), 20px) 0;
    }

    .main-logo-bar.scrolled {
        position: sticky;
        left: auto;
        right: auto;
        background-color: #1e1a18;
        animation: none;
    }

    .main-header {
        display: block;
        padding: min(calc(20 / 412 * 100vw), 20px) min(calc(38 / 412 * 100vw), 38px) 0;
    }

    .main-description {
        position: static;
        width: auto;
        max-width: none;
        font-size: 12px;
        line-height: 1.17;
    }

    .main-logo {
        position: static;
        width: min(calc(55 / 412 * 100vw), 55px);
        height: auto;
        margin: 0;
    }

    .main-nav {
        position: relative;
        left: auto;
        top: auto;
        height: auto;
        margin-top: min(calc(30 / 412 * 100vw), 30px);
        padding: 0 min(calc(38 / 412 * 100vw), 38px);
    }

    .nav-line {
        width: 4px;
        margin-right: min(calc(20 / 412 * 100vw), 20px);
    }

    .nav-list {
        padding-top: 0;
    }

    .nav-list li {
        margin-bottom: min(calc(14 / 412 * 100vw), 14px);
    }

    .nav-list li a {
        font-size: min(calc(28 / 412 * 100vw), 28px);
        line-height: min(calc(34 / 412 * 100vw), 34px);
    }

    .main-footer {
        position: relative;
        bottom: auto;
        padding: min(calc(40 / 412 * 100vw), 40px) min(calc(14 / 412 * 100vw), 14px) min(calc(30 / 412 * 100vw), 30px);
    }

    .main-footer .footer-copyright,
    .main-footer .footer-warning {
        font-size: 12px;
    }

    /* 서브 공통 */
    .sub-header {
        padding: min(calc(20 / 412 * 100vw), 20px) 0;
        margin-bottom: min(calc(20 / 412 * 100vw), 20px);
    }

    .logo {
        width: min(calc(55 / 412 * 100vw), 55px);
        height: auto;
    }

    .back-btn {
        left: min(calc(35 / 412 * 100vw), 35px);
        top: 50%;
        transform: translateY(-50%);
        font-size: min(calc(24 / 412 * 100vw), 24px);
    }

    .sub-footer {
        width: 100%;
        max-width: none;
        padding: min(calc(40 / 412 * 100vw), 40px) min(calc(14 / 412 * 100vw), 14px);
    }

    .sub-footer .footer-copyright,
    .sub-footer .footer-warning {
        font-size: 12px;
    }

    .sub-footer .footer-contact {
        font-size: 12px;
        line-height: 1.17;
    }

    /* Oscilloscorp */
    .oscillo-content {
        padding: 0 min(calc(14 / 412 * 100vw), 14px);
    }

    .collab-title {
        flex-direction: column;
        align-items: center;
        gap: min(calc(8 / 412 * 100vw), 8px);
        margin-bottom: min(calc(30 / 412 * 100vw), 30px);
    }

    .collab-name {
        font-size: min(calc(28 / 412 * 100vw), 28px);
    }

    .collab-nintendo img {
        height: min(calc(28 / 412 * 100vw), 28px);
    }

    .collab-x {
        font-size: min(calc(28 / 412 * 100vw), 28px);
    }

    .collab-line {
        max-width: 100%;
        border-top-width: 2px;
        margin-bottom: min(calc(30 / 412 * 100vw), 30px);
    }

    .collab-description {
        max-width: 100%;
        font-size: min(calc(14 / 412 * 100vw), 14px);
    }

    /* Ch.27 */
    .ch27-content {
        padding: 0 min(calc(20 / 412 * 100vw), 20px);
    }

    .ch27-card {
        flex-direction: row;
        align-items: flex-start;
        gap: min(calc(15 / 412 * 100vw), 15px);
    }

    .ch27-image {
        width: min(calc(150 / 412 * 100vw), 150px);
        height: min(calc(150 / 412 * 100vw), 150px);
    }

    .ch27-info {
        padding-top: min(calc(8 / 412 * 100vw), 8px);
        text-align: left;
    }

    .ch27-title {
        font-size: min(calc(32 / 412 * 100vw), 32px);
        margin-bottom: min(calc(23 / 412 * 100vw), 23px);
    }

    .ch27-detail {
        font-size: 12px;
    }

    .ch27-content {
        gap: min(calc(30 / 412 * 100vw), 30px);
    }

    /* Project */
    .project-content {
        padding: 0 min(calc(27 / 412 * 100vw), 27px);
    }

    .project-category-divider {
        font-size: 14px;
        padding-bottom: 8px;
        margin-bottom: 14px;
    }

    .project-category-section {
        margin-bottom: min(calc(30 / 412 * 100vw), 30px);
    }

    .project-grid {
        flex-wrap: wrap;
        gap: min(calc(14 / 412 * 100vw), 14px);
    }

    .project-col {
        flex: 1 1 0;                /* 피그마: 3열 유지 */
        gap: min(calc(14 / 412 * 100vw), 14px);
    }

    /* Shop */
    .shop-content {
        padding: 0 min(calc(35 / 412 * 100vw), 35px);
    }

    .shop-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: min(calc(13 / 412 * 100vw), 13px);
    }

    .shop-item {
        aspect-ratio: 1;
    }

    /* Shop Detail */
    .shop-detail-content {
        padding: 0 min(calc(35 / 412 * 100vw), 35px);
    }

    .shop-detail-image {
        width: min(calc(340 / 412 * 100vw), 340px);
        max-width: 100%;
        padding-bottom: min(calc(340 / 412 * 100vw), 340px);
    }

    .shop-detail-name,
    .shop-detail-price {
        font-size: min(calc(28 / 412 * 100vw), 28px);
    }

}