@charset "utf-8";
/* ===== menu page styles ===== */

/* ===== ccon01 — 사진 고정 배경 카드 + 진갈색 패널 + 플립 워드블록 (plan: .planning/ccon01/plan.md) ===== */
.ccon01 {
    padding-bottom: 0.6vw;
    background-color: #fbf4e2;
}

.ccon01_card {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 90.1837%;
    background-image: url('/images/ccon01_01.jpg');
    background-attachment: fixed;
    background-position: center;
}

.ccon01_panel {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 45.1688%;
    padding-top: 7.3vw;
    padding-bottom: 6.9vw;
}

.ccon01_word {
    width: 57.6031%;
    row-gap: 1.2vw;
}

/* 유저 지시(2026-10-22): 칸 바탕이 검정으로 고정돼 있어 안쪽만 도는 느낌 → 칸 바탕을 빼고(나무 패널 노출)
   덮개·단어 각각이 검정 카드가 되어 통째로 뒤집힌다 */
.ccon01_word_item {
    height: calc(var(--px) * 122);
    background-color: transparent;
    perspective: calc(var(--px) * 600);
}

.ccon01_word_txt {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: calc(var(--px) * 73);
    background-color: #000;
}

.ccon01_cover {
    overflow: hidden;
    background-color: #000;
}

.ccon01_logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(var(--px) * 242);
    aspect-ratio: 242 / 349;
}

.ccon01_logo img {
    width: 100%;
}

.ccon01_logo_01 {
    top: 1.4vw;
}

.ccon01_logo_02 {
    top: -6.2vw;
}

.ccon01_logo_03 {
    top: -13.8vw;
}

.ccon01_desc {
    margin-top: 1.4vw;
    font-family: var(--font-free);
    font-size: calc(var(--px) * 20);
    font-weight: 500;
    line-height: 1.7vw;
    letter-spacing: 0;
    color: #fff;
}

/* ===== ccon02 — 메뉴 목록 (분류 탭 + 카드 4열 그리드 + 상세 팝업) (plan: .planning/ccon02/plan.md) ===== */
.ccon02 {
    padding-top: 3.1vw;
    padding-bottom: 7.8vw;
    background-color: #faf4e1;
}

.ccon02_eng {
    margin-top: 1.4vw;
    font-family: var(--font-poppins);
    font-size: calc(var(--px) * 14);
    font-weight: 800;
    line-height: 0.7vw;
    letter-spacing: 0.6vw;
    text-indent: 0.6vw;
    color: var(--color-point);
}

.ccon02_title {
    margin-top: 1.4vw;
    font-family: var(--font-nexon);
    font-size: calc(var(--px) * 65);
    font-weight: 700;
    line-height: 3.6vw;
    letter-spacing: -0.2vw;
    color: #000000;
}

.ccon02_title_point {
    color: var(--color-point);
}

.ccon02_nav_slot {
    margin-top: 3.5vw;
}

.ccon02_tab {
    width: calc(var(--px) * 175);
}

.ccon02_list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    width: calc(var(--px) * 1400);
    margin-top: 2.6vw;
    row-gap: 1.7vw;
    box-sizing: border-box;
}

.ccon02_cell {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: calc(100% / 4);
}

.ccon02_card {
    width: calc(var(--px) * 329);
    cursor: pointer;
}

/* 팝업 — section.ccon02 밖 형제 (fixed 딤). 글로벌 section 폰트·자간 미상속 → 명시 */
.ccon02_pop {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10000;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.ccon02_pop.on {
    opacity: 1;
    visibility: visible;
}

/* 팝업 박스 — 열릴 때 살짝 떠오름 (배경 페이드와 같은 0.3s) */
.ccon02_pop.on .ccon02_pop_box {
    transform: none;
}

.ccon02_pop_box {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    width: calc(var(--px) * 889);
    padding: calc(var(--px) * 32) 0 calc(var(--px) * 31) calc(var(--px) * 36);
    border: 1px solid var(--color-point);
    background-color: #ffffff;
    box-sizing: border-box;
    transform: translateY(calc(var(--px) * 16));
    transition: transform 0.3s ease;
}

.ccon02_pop_img {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: calc(var(--px) * 306);
    aspect-ratio: 306 / 265;
}

.ccon02_pop_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ccon02_pop_txt {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 48.1786%;
    margin-top: 2.7vw;
    margin-left: 6.9%;
    word-break: keep-all;
}

.ccon02_pop_name {
    font-family: var(--font-nexon);
    font-size: calc(var(--px) * 23);
    font-weight: 700;
    line-height: 1.2vw;
    letter-spacing: 0;
    color: #000000;
}

.ccon02_pop_bar {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: calc(var(--px) * 63);
    height: calc(var(--px) * 4);
    margin-top: 1.7vw;
    background-color: var(--color-point);
}

.ccon02_pop_desc {
    margin-top: 1.5vw;
    font-family: var(--font-free);
    font-size: calc(var(--px) * 20);
    font-weight: 400;
    line-height: 1.5vw;
    letter-spacing: 0;
    color: #000000;
}

.ccon02_pop_close {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: calc(var(--px) * 42);
    height: calc(var(--px) * 42);
    top: 1.5vw;
    right: 3.7%;
    border: 0;
    border-radius: 50%;
    background-color: var(--color-point);
    cursor: pointer;
}

.ccon02_pop_close_ico {
    width: calc(var(--px) * 16);
}

/* ===== 모바일 (599 이하) ===== */
@media (max-width: 599px) {
    /* --- ccon01 — 카드 풀폭(사진 배경 위아래·좌우로 패널 둘러쌈) · 패널 76vw
       워드블록 = PC 447px 박스를 54.7vw 로 같은 비율 스케일(s = 0.1224vw/px) → 박스 122→14.9 · 간격 23→2.8 · 로고 242→29.6
       로고 조각 top 은 피치(14.9+2.8=17.7) 단위로 이어져야 박스 3개에 걸쳐 한 장으로 보임 (26.7/−118.1/−262.9px × s)
       플립 모션(ccon01-m01)은 transform 만 쓰므로 PC 와 동일 동작 / 고정 배경은 mobile_style.css 에서 scroll --- */
    .ccon01 {
        padding-bottom: 0;
    }

    .ccon01_card {
        width: 100%;
        padding-top: 8vw;
        padding-bottom: 8vw;
    }

    .ccon01_panel {
        width: 76%;
        padding-top: 10.7vw;
        padding-bottom: 9.6vw;
    }

    .ccon01_word {
        width: 72%;
        row-gap: 2.8vw;
    }

    .ccon01_word_item {
        height: 14.9vw;
        perspective: 73vw;
    }

    .ccon01_word_txt {
        font-size: 8.9vw;
        line-height: 14.9vw;
    }

    .ccon01_logo {
        width: 29.6vw;
    }

    .ccon01_logo_01 {
        top: 3.3vw;
    }

    .ccon01_logo_02 {
        top: -14.4vw;
    }

    .ccon01_logo_03 {
        top: -32.1vw;
    }

    .ccon01_desc {
        max-width: 84%;
        margin-top: 6.4vw;
        font-size: 3.5vw;
        line-height: 5.6vw;
        text-align: center;
        word-break: keep-all;
    }

    /* --- ccon02 — 제목 2줄(<br class="mobile-pc">) · 탭 5칸 균등(공통 h_nav) · 카드 4열 → 2열 · 팝업 가로 → 세로 스택 --- */
    .ccon02 {
        padding-top: 13.3vw;
        padding-bottom: 13.3vw;
    }

    .ccon02_eng {
        margin-top: 3.2vw;
        font-size: 3.3vw;
        line-height: 4.3vw;
        letter-spacing: 1.6vw;
        text-indent: 1.6vw;
    }

    .ccon02_title {
        margin-top: 2.7vw;
        font-size: 6.4vw;
        line-height: 8.7vw;
        letter-spacing: -0.2vw;
        text-align: center;
    }

    .ccon02_nav_slot {
        margin-top: 8vw;
    }

    /* 메뉴 분류 탭 — 공통 h_nav 모바일 균등 분할을 따르도록 PC 고정폭 해제 (sub_common.css) */
    .ccon02_tab {
        width: 100%;
    }

    /* 2열 — 셀 48.5% + space-between = 칸 사이 3%. 홀수 개면 마지막 카드는 왼쪽 칸 */
    .ccon02_list {
        justify-content: space-between;
        width: 89.3%;
        margin-top: 6.4vw;
        row-gap: 3.2vw;
    }

    .ccon02_cell {
        width: 48.5%;
    }

    .ccon02_card {
        width: 100%;
    }

    /* 팝업 — 사진 위 / 텍스트 아래. 설명이 길면 박스 안 스크롤 (menu.js 스크롤 잠금이 박스 자체 스크롤은 허용) */
    .ccon02_pop_box {
        flex-direction: column;
        align-items: center;
        width: 89.3vw;
        max-height: 86vh;
        padding: 5.3vw 5.3vw 8vw;
        overflow-y: auto;
        transform: translateY(4vw);
    }

    .ccon02_pop_img {
        width: 100%;
    }

    .ccon02_pop_txt {
        align-items: center;
        width: 100%;
        margin-top: 6.4vw;
        margin-left: 0;
        text-align: center;
    }

    .ccon02_pop_name {
        font-size: 4.8vw;
        line-height: 6.4vw;
    }

    .ccon02_pop_bar {
        width: 12vw;
        height: 0.8vw;
        margin-top: 4vw;
    }

    .ccon02_pop_desc {
        margin-top: 4vw;
        font-size: 3.6vw;
        line-height: 5.9vw;
    }

    .ccon02_pop_close {
        width: 9.6vw;
        height: 9.6vw;
        top: 2.7vw;
        right: 2.7vw;
    }

    .ccon02_pop_close_ico {
        width: 3.7vw;
    }
}