/* ============================================================
   캐럿 서비스 내비 (사이드바 ① 블록)
   메인(.clab_layout)과 서브(.carat_side) 양쪽에서 공용
   ============================================================ */
/* 페이지 전체 가로 폭 — 메인/서브 공통. 여기만 고치면 전 페이지에 반영된다. */
:root{ --nav-w:232px; --page-w:1440px; }

/* 헤더·푸터 안쪽 폭도 본문에 맞춘다.
   default.css 는 쇼핑몰과 공용이라 건드리지 않고 여기서만 덮어쓴다. */
#hd_wrapper,
#ft_wr{ width:100%; max-width:var(--page-w,1440px); box-sizing:border-box; padding-left:20px; padding-right:20px; }

/* 그누보드 기본 폭 제한 해제.
   default.css 의 `#container_wr {width:1200px}` 이 살아 있으면, 그 안의 .clab_layout 이
   아무리 1440px 이어도 1200px 에서 잘린다.
   서브 페이지는 carat_sub.css 가 풀어주지만 메인(index)은 그 파일을 로드하지 않으므로
   양쪽 공통인 여기서 푼다. */
#container_wr,
#container{ width:auto; max-width:none; margin:0; float:none; }

.carat_nav{
    background:#fff;
    border:1px solid var(--c-line,#ececf1);
    border-radius:var(--c-radius,14px);
    padding:10px;
}
.carat_nav *{ box-sizing:border-box; }

.carat_nav__list{ list-style:none; margin:0; padding:0; }
.carat_nav__item{ margin:0 0 2px; }

.carat_nav__link{
    display:flex; align-items:center; gap:10px;
    padding:10px 12px; border-radius:10px;
    font-size:14px; font-weight:600; color:#44454f; text-decoration:none;
    transition:background .13s, color .13s;
}
.carat_nav__link i{ width:16px; text-align:center; color:#a2a3ad; font-size:15px; transition:color .13s; }
.carat_nav__link:hover{ background:var(--c-soft,#f6f6f9); color:var(--c-brand-dark,#e5620a); }
.carat_nav__link:hover i{ color:var(--c-brand,#ff7a1a); }

.carat_nav__item.is-on > .carat_nav__link{
    background:#fff1e6; color:var(--c-brand-dark,#e5620a);
}
.carat_nav__item.is-on > .carat_nav__link i{ color:var(--c-brand,#ff7a1a); }

/* 강조 항목 (프롬프트 빌더) */
.carat_nav__item--accent > .carat_nav__link{
    background:var(--c-brand,#ff7a1a); color:#fff;
    box-shadow:0 4px 12px rgba(255,122,26,.25);
}
.carat_nav__item--accent > .carat_nav__link i{ color:#fff; }
.carat_nav__item--accent > .carat_nav__link:hover{ background:var(--c-brand-dark,#e5620a); color:#fff; }
.carat_nav__item--accent > .carat_nav__link:hover i{ color:#fff; }

/* 준비중(비활성) */
.carat_nav__item.is-soon > .carat_nav__link{
    cursor:default; background:var(--c-soft,#f6f6f9); color:#a2a3ad; box-shadow:none;
}
.carat_nav__item.is-soon > .carat_nav__link i{ color:#c4c4cd; }
.carat_nav__soon{
    margin-left:auto; font-style:normal; font-size:10.5px; font-weight:700;
    color:#a2a3ad; background:#fff; border:1px solid var(--c-line,#ececf1);
    padding:1px 7px; border-radius:999px;
}

/* 하위 메뉴 */
.carat_nav__sub{ list-style:none; margin:2px 0 8px; padding:0 0 0 26px; }
.carat_nav__sub a{
    display:block; padding:7px 10px; border-radius:8px;
    font-size:13px; color:#6b7280; text-decoration:none;
    transition:background .13s, color .13s;
}
.carat_nav__sub a:hover{ background:var(--c-soft,#f6f6f9); color:var(--c-brand-dark,#e5620a); }
.carat_nav__sub li.is-on a{ color:var(--c-brand-dark,#e5620a); font-weight:700; }

/* ---------- 메인(홈) 2단 레이아웃 ---------- */
.clab_layout{
    display:grid;
    grid-template-columns:var(--nav-w) 1fr;
    gap:30px;
    align-items:start;
    max-width:var(--page-w,1440px);
    margin:0 auto;
    padding:24px 20px 0;
}
.clab_layout > .clab{ max-width:none; margin:0; padding:0 0 64px; min-width:0; }
.clab_side{ position:sticky; top:16px; }

/* ---------- 반응형: 좁아지면 가로 스크롤 바 형태 ---------- */
@media (max-width:1024px){
    .clab_layout{ grid-template-columns:1fr; gap:0; padding:16px 14px 0; }
    .clab_side{ position:static; margin-bottom:8px; }

    .clab_side .carat_nav{ border:0; padding:0; background:none; }
    .clab_side .carat_nav__list{
        display:flex; gap:8px; overflow-x:auto;
        padding-bottom:6px; -webkit-overflow-scrolling:touch;
    }
    .clab_side .carat_nav__list::-webkit-scrollbar{ height:0; }
    .clab_side .carat_nav__item{ flex:0 0 auto; margin:0; }
    .clab_side .carat_nav__link{
        white-space:nowrap; border:1px solid var(--c-line,#ececf1); border-radius:999px;
        padding:9px 15px; font-size:13.5px;
    }
    .clab_side .carat_nav__item--accent > .carat_nav__link{ border-color:var(--c-brand,#ff7a1a); }
    /* 가로 바에서는 하위 메뉴 숨김 — 홈 화면 상단 필터 탭이 같은 역할을 한다 */
    .clab_side .carat_nav__sub{ display:none; }
    .clab_side .carat_nav__soon{ margin-left:6px; }
}