@charset "utf-8";
/* ===== 서브페이지 공통 (sub_main · h_nav 등) ===== */

/* ===== sub_main — 서브 상단 타이틀 (brand/menu/store/community 공용, 높이 433 통일) ===== */
.sub_main {
    justify-content: flex-start;
    padding-top: var(--hd-h);
    padding-bottom: 5.2vw;
    background: linear-gradient(#e1e1e1, #e1e1e1) no-repeat 0 var(--hd-h) / 100% 1px #ffffff;
}

.sub_main_label {
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(var(--px) * 166);
    height: calc(var(--px) * 37);
    font-family: var(--font-free);
    font-size: calc(var(--px) * 18);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.03vw;
    color: #ffffff;
    background-color: #4c190f;
}

.sub_main_title {
    margin-top: 4.7vw;
    font-family: var(--font-poppins);
    font-size: calc(var(--px) * 90);
    font-weight: 800;
    line-height: 4.6vw;
    letter-spacing: 0;
    color: #000000;
}

.sub_main_eng {
    margin-top: 0.9vw;
    font-family: var(--font-poppins);
    font-size: calc(var(--px) * 15);
    font-weight: 700;
    line-height: 0.7vw;
    letter-spacing: 0.9449vw;
    text-indent: 0.9449vw;
    color: #4c190f;
}

/* ===== h_nav — 서브 카테고리/앵커 탭 바 (공통 h_nav_slot · 최초 구현 ccon02, plan: .planning/ccon02/plan.md)
   칸 폭·margin 은 섹션 클래스(.ccon02_nav · .ccon02_tab 등)에서 지정.
   b·e·f 앵커/페이지이동은 a.h_nav_btn 로 같은 클래스 사용 ===== */
.h_nav {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    border-top: 1px solid var(--color-point);
    border-bottom: 1px solid var(--color-point);
    background-color: var(--color-cream);
}

/* h_nav_slot — h_nav 원래 자리 보존(높이는 JS 가 nav 높이로 고정). 스크롤로 슬롯 top 이 헤더 가시 하단에 닿으면
   .h_nav.is_fixed 로 fixed 전환 → top = 헤더 가시 하단(--h-nav-top, 헤더가 숨으면 0) 을 따라간다. 구현 js/animation.js h-nav-m01
   z-index 10000: 창업안내 .f_subnav 와 동일 — 활성 탭 갈색 바(.h_nav_btn.on box-shadow −6px)가 헤더(9999) 하단을 덮는다 */
.h_nav_slot {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
    flex-shrink: 0;
}

.h_nav.is_fixed {
    position: fixed;
    left: 0;
    top: calc(var(--h-nav-top, 0) + 1px); /* 헤더와 탭 바 사이 회색 1px 자리 (창업안내 .f_subnav border-top 과 동일) */
    z-index: 10000;
    box-shadow: 0 -1px 0 #e0e0de;
}

/* 햄버거 드로어(.header_menu_drop, 헤더 z 9999 안)가 열려 있는 동안은 탭 바가 헤더 아래로 — 안 그러면 드로어 메뉴를 덮는다
   (탭 바 z 10000 은 활성 탭 갈색 바가 헤더 하단을 덮게 하려는 값이라 평소엔 유지) — 창업안내 .f_subnav 도 같은 이유 */
body:has(.header_menu_drop) .h_nav.is_fixed,
body:has(.header_menu_drop) .f_subnav {
    z-index: 9998;
}

.h_nav_list {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    border-left: 1px solid #d3c4a3;
}

.h_nav_btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: calc(var(--px) * 49);
    border-right: 1px solid #d3c4a3;
    box-sizing: border-box;
    font-family: var(--font-free);
    font-size: calc(var(--px) * 20);
    font-weight: 600;
    line-height: 1.9vw;
    letter-spacing: -0.04vw;
    color: #000000;
    transition: box-shadow 0.3s ease;
}

.h_nav_btn.on {
    box-shadow: 0 calc(var(--px) * -5 - 1px) 0 var(--color-point);
}

/* 브랜드 앵커 탭 · 커뮤니티 탭 칸 폭 (시안 구분선 x 612·839·1065·1292) */
.sub_anchor_btn,
.e_tab_btn {
    width: calc(var(--px) * 227);
}

/* ===== c_ticker — 진갈색 띠 가로 마퀴 (공통 c_ticker · 최초 구현 dcon02, plan: .planning/dcon02/plan.md)
   마퀴 구조·애니메이션은 common.css flow_sd* 재사용 — 여기선 띠색·속도·글자만.
   항목 크기·간격·띠 padding 은 섹션 클래스(.dcon02 · .dcon02_item 등)에서 지정 ===== */
.c_ticker {
    background-color: var(--color-point);
}

.c_ticker_move {
    flex-shrink: 0;
    animation-duration: var(--ticker-dur, 20s);
}

.c_ticker_item {
    font-family: var(--font-free);
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
}

/* ===== 모바일 (599 이하) ===== */
@media (max-width: 599px) {
    /* sub_main — 서브 상단 타이틀 (헤더 15vw 아래 라벨 → 영문 타이틀 → 자간 텍스트) */
    .sub_main {
        padding-bottom: 10.7vw;
    }

    .sub_main_label {
        width: auto;
        height: 7.5vw;
        padding: 0 3.2vw;
        font-size: 3.5vw;
    }

    .sub_main_title {
        margin-top: 8vw;
        font-size: 12vw;
        line-height: 12vw;
    }

    .sub_main_eng {
        margin-top: 2.7vw;
        font-size: 3.3vw;
        line-height: 3.3vw;
        letter-spacing: 1.6vw;
        text-indent: 1.6vw;
    }

    /* h_nav — 칸이 화면에 들어가면 균등 분할, 글자 폭 합이 화면보다 길면(창업안내 5칸) 한 줄 유지 + 가로 스와이프 */
    .h_nav {
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .h_nav_list {
        width: 100%;
        border-left: 0;
    }

    /* 칸 전부 width 100% → 같은 비율로 줄어 균등 분할, min-width max-content 에서 멈춰 넘치면 스크롤 (flex-basis 금지) */
    .h_nav_item {
        width: 100%;
        min-width: max-content;
    }

    .h_nav_btn,
    .sub_anchor_btn,
    .e_tab_btn {
        width: 100%;
        height: 11vw;
        padding: 0 2.7vw;
        font-size: 3.6vw;
        line-height: 4.4vw;
        letter-spacing: -0.1vw;
        white-space: nowrap;
    }

    .h_nav_item:last-child .h_nav_btn {
        border-right: 0;
    }

    .h_nav_btn.on {
        box-shadow: inset 0 1vw 0 var(--color-point);
    }
}