/* ============================================================
   캐럿 메인 갤러리 — 사이드바 + 메인 레이아웃
   (카드/뱃지/칩 스타일은 skin/board/prompt/style.css 재사용)
   ============================================================ */
:root{
    --c-bg:#ffffff; --c-fg:#191924; --c-muted:#6b7280;
    --c-line:#ececf1; --c-soft:#f6f6f9;
    --c-brand:#ff7a1a; --c-brand-dark:#e5620a;
    --c-radius:14px; --c-shadow:0 1px 3px rgba(17,17,26,.06),0 8px 24px rgba(17,17,26,.05);
    --side-w:250px;
}

/* 그누보드 기본 컨테이너 폭 해제 (풀와이드로) */
#container{ max-width:none; padding:0; }
#container_wr{ max-width:none; }

.carat_home{
    display:grid;
    grid-template-columns:var(--side-w) 1fr;
    gap:28px;
    max-width:var(--page-w,1440px);
    margin:0 auto;
    padding:24px 20px 60px;
    align-items:start;
    color:var(--c-fg);
}
.carat_home *{ box-sizing:border-box; }

/* ---------- 사이드바 ---------- */
.carat_side{
    position:sticky; top:16px;
    display:flex; flex-direction:column; gap:18px;
    max-height:calc(100vh - 32px);
    overflow-y:auto;
    padding-right:2px;
}
.carat_side::-webkit-scrollbar{ width:6px; }
.carat_side::-webkit-scrollbar-thumb{ background:#dcdce4; border-radius:3px; }
.carat_side__close{ display:none; }

.carat_side__widget{
    background:var(--c-bg);
    border:1px solid var(--c-line);
    border-radius:var(--c-radius);
    padding:16px 16px 18px;
}
.carat_side__title{
    display:flex; align-items:center; gap:7px;
    font-size:14px; font-weight:800; margin:0 0 12px; color:var(--c-fg);
}
.carat_side__title i{ color:var(--c-brand); }
.carat_side__subtitle{
    font-size:11.5px; font-weight:700; color:var(--c-muted);
    margin:14px 0 6px; letter-spacing:.02em;
}
.carat_side__subtitle:first-of-type{ margin-top:2px; }

.carat_side__menu{ list-style:none; margin:0; padding:0; }
.carat_side__menu li{ margin:0; }
.carat_side__menu a{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:8px 10px; border-radius:9px;
    font-size:13.5px; color:#44454f; text-decoration:none;
    transition:background .13s, color .13s;
}
.carat_side__menu a:hover{ background:var(--c-soft); color:var(--c-brand-dark); }
.carat_side__menu em{
    font-style:normal; font-size:11.5px; color:#a2a3ad;
    background:var(--c-soft); padding:1px 8px; border-radius:999px;
}
.carat_side__menu a:hover em{ background:#fff1e6; color:var(--c-brand-dark); }
/* 현재 선택된 항목 (장르별 등) */
.carat_side__menu li.is-on > a{ background:#fff1e6; color:var(--c-brand-dark); font-weight:700; }
.carat_side__menu li.is-on > a em{ background:#fff; color:var(--c-brand-dark); }

/* 인기 랭킹 */
.carat_side__rank{ list-style:none; margin:0; padding:0; counter-reset:none; }
.carat_side__rank li{ margin:0; }
.carat_side__rank a{
    display:flex; align-items:center; gap:10px;
    padding:7px 4px; text-decoration:none; color:#44454f; font-size:13px;
}
.carat_side__rank a:hover{ color:var(--c-brand-dark); }
.carat_side__num{
    flex:0 0 auto; width:20px; text-align:center;
    font-weight:800; font-size:13px; color:#c4c4cd;
}
.carat_side__rank li:nth-child(-n+3) .carat_side__num{ color:var(--c-brand); }
.carat_side__ranktit{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* 배너/자유 슬롯 */
.carat_side__widget--banner .carat_side__slot{ font-size:13px; color:#55565f; line-height:1.6; }
.carat_side__placeholder{
    margin:0; padding:22px 12px; text-align:center;
    color:#b6b6c2; font-size:12.5px; line-height:1.7;
    border:1px dashed #dcdce4; border-radius:10px;
}

/* ---------- 메인 ---------- */
.carat_content{ min-width:0; }

/* 히어로 */
.carat_hero{
    border-radius:18px; overflow:hidden;
    background:linear-gradient(135deg,#ff8a3d 0%,#ff6a00 55%,#ff4d6d 120%);
    color:#fff; padding:38px 34px; margin-bottom:26px;
    box-shadow:0 12px 30px rgba(255,106,0,.22);
}
.carat_hero__title{ font-size:25px; font-weight:800; margin:0 0 8px; line-height:1.35; color:#fff; }
.carat_hero__desc{ font-size:14.5px; opacity:.95; margin:0 0 20px; }
.carat_hero__search{ display:flex; max-width:520px; background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,.12); }
.carat_hero__search input{ flex:1; border:0; padding:14px 18px; font-size:14px; outline:none; color:#191924; }
.carat_hero__search button{ flex:0 0 auto; width:56px; border:0; background:var(--c-brand); color:#fff; font-size:16px; cursor:pointer; }
.carat_hero__search button:hover{ background:var(--c-brand-dark); }

.carat_notice{
    background:#fff8f2; border:1px solid #ffd9bd; color:var(--c-brand-dark);
    border-radius:12px; padding:14px 18px; margin-bottom:22px; font-size:14px;
}
.carat_notice a{ color:var(--c-brand-dark); font-weight:700; }

/* 섹션 */
.carat_sec{ margin-bottom:34px; }
.carat_sec__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.carat_sec__title{ display:flex; align-items:center; gap:9px; font-size:19px; font-weight:800; margin:0; }
.carat_sec__title i{ color:var(--c-brand); }
.carat_sec__more{ font-size:13px; color:var(--c-muted); text-decoration:none; }
.carat_sec__more:hover{ color:var(--c-brand); }

/* 메인 카드 그리드 = 사이드바 있으니 3~4열 */
.carat_content .carat_grid{
    list-style:none; margin:0; padding:0;
    display:grid; gap:18px;
    grid-template-columns:repeat(4,1fr);
}

/* 주제 태그 클라우드 */
.carat_topics{ display:flex; flex-wrap:wrap; gap:10px; }
.carat_topic{
    display:inline-block; padding:10px 18px; border-radius:999px;
    background:var(--c-soft); color:#44454f; text-decoration:none;
    font-size:14px; font-weight:600; transition:all .14s;
}
.carat_topic:hover{ background:var(--c-brand); color:#fff; transform:translateY(-2px); }

/* 사이드바 토글 (모바일) */
.carat_side__toggle{ display:none; }
.carat_side__dim{ display:none; }

/* ---------- 반응형 ---------- */
@media (max-width:1200px){
    .carat_content .carat_grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:1024px){
    .carat_home{ grid-template-columns:1fr; gap:0; }
    /* 사이드바를 오프캔버스 드로어로 */
    .carat_side{
        position:fixed; top:0; left:0; z-index:10000;
        width:280px; max-width:86vw; height:100vh; max-height:100vh;
        margin:0; padding:56px 16px 24px;
        background:var(--c-bg); border-right:1px solid var(--c-line);
        box-shadow:6px 0 30px rgba(0,0,0,.12);
        transform:translateX(-100%); transition:transform .25s ease;
        border-radius:0;
    }
    .carat_side.is-open{ transform:translateX(0); }
    .carat_side__close{
        display:flex; align-items:center; justify-content:center;
        position:absolute; top:12px; right:12px; width:36px; height:36px;
        border:0; background:var(--c-soft); border-radius:9px; cursor:pointer; font-size:15px; color:#55565f;
    }
    .carat_side__dim{ position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.4); }
    .carat_side__toggle{
        display:inline-flex; align-items:center; gap:8px;
        margin-bottom:20px; padding:11px 18px; border-radius:10px;
        border:1px solid var(--c-line); background:var(--c-bg); color:#44454f;
        font-size:14px; font-weight:700; cursor:pointer;
    }
}
@media (max-width:820px){
    .carat_content .carat_grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
    .carat_hero{ padding:30px 22px; }
    .carat_hero__title{ font-size:21px; }
}
@media (max-width:420px){
    .carat_content .carat_grid{ grid-template-columns:1fr 1fr; gap:10px; }
    .carat_home{ padding:16px 14px 40px; }
}