/* ============================================================
   캐럿 메인 = PromptLab 구성 (라이트/오렌지 톤)
   히어로 · 타입탭 · 카테고리칩 · 카드그리드 · 상세모달 · 토스트
   ============================================================ */
:root{
    --c-bg:#ffffff; --c-fg:#191924; --c-muted:#6b7280; --c-faint:#9ca3af;
    --c-line:#ececf1; --c-soft:#f6f6f9;
    --c-brand:#ff7a1a; --c-brand-dark:#e5620a;
    --c-radius:14px;
}

/* 그누보드 기본 컨테이너 폭/여백 해제 (홈은 풀와이드 자체 관리) */
#container{ max-width:none; padding:0; border:0; background:none; }
#container_wr{ max-width:none; }
#container_title{ display:none; }   /* 홈에서는 제목 숨김 */
#aside{ display:none; }             /* 홈에서는 기본 우측 aside(로그인·설문) 숨김 — 헤더에 로그인 있음 */

.clab{ max-width:1200px; margin:0 auto; padding:0 20px 64px; color:var(--c-fg); }
.clab *{ box-sizing:border-box; }

/* ---------- 히어로 ---------- */
.clab_hero{ text-align:center; padding:52px 0 34px; }
.clab_hero__title{ font-size:clamp(1.7rem,4vw,2.6rem); font-weight:800; letter-spacing:-.02em; line-height:1.3; margin:0; color:var(--c-fg); }
.clab_grad{ background:linear-gradient(90deg,#ff8a3d,#ff6a00 55%,#ff4d6d); -webkit-background-clip:text; background-clip:text; color:transparent; }
.clab_hero__desc{ margin:14px 0 24px; color:var(--c-muted); font-size:1.02rem; }
.clab_hero__search{ position:relative; max-width:480px; margin:0 auto; }
.clab_hero__search .fa{ position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--c-faint); }
.clab_hero__search input{
    width:100%; padding:13px 18px 13px 42px;
    border:1px solid var(--c-line); border-radius:99px; background:var(--c-soft);
    font-size:.95rem; color:var(--c-fg); outline:none; transition:border-color .2s, background .2s;
}
.clab_hero__search input:focus{ border-color:var(--c-brand); background:#fff; }

/* ---------- 추천 키워드 ---------- */
.clab_keywords{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; justify-content:center; margin:0 auto 18px; max-width:900px; }
.clab_keywords__label{ font-size:.82rem; font-weight:700; color:var(--c-muted); margin-right:2px; }
.clab_kw{
    padding:6px 13px; border-radius:99px; font-size:.85rem; text-decoration:none;
    background:#fff1e6; border:1px solid #ffd9bd; color:var(--c-brand-dark); transition:all .16s;
}
.clab_kw:hover{ background:var(--c-brand); color:#fff; border-color:var(--c-brand); transform:translateY(-1px); }
.clab_kw.is-on{ background:var(--c-brand); color:#fff; border-color:var(--c-brand); }

/* ---------- 필터 ---------- */
.clab_filters{ padding:4px 0 26px; }
.clab_tabs{ display:flex; gap:8px; justify-content:center; margin-bottom:18px; flex-wrap:wrap; }
.clab_tab{
    padding:9px 22px; border-radius:99px; font-weight:700; font-size:.94rem;
    background:var(--c-soft); border:1px solid var(--c-line); color:#55565f; text-decoration:none; transition:all .18s;
}
.clab_tab:hover{ color:var(--c-brand-dark); border-color:#ffcfa8; }
.clab_tab.is-on{ background:linear-gradient(90deg,#ff8a3d,#ff6a00); color:#fff; border-color:transparent; }
.clab_chips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.clab_chip{
    padding:6px 14px; border-radius:99px; font-size:.85rem; text-decoration:none;
    background:#fff; border:1px solid var(--c-line); color:#55565f; transition:all .18s;
}
.clab_chip:hover{ color:var(--c-brand-dark); border-color:#ffcfa8; }
.clab_chip.is-on{ background:#fff1e6; color:var(--c-brand-dark); border-color:var(--c-brand); }
.clab_chip__n{ color:var(--c-faint); font-size:.78rem; margin-left:2px; }

/* ---------- 목록 ---------- */
.clab_count{ color:var(--c-muted); font-size:.9rem; margin:0 0 16px; }
.clab_count strong{ color:var(--c-fg); }
.clab_grid{
    display:grid; gap:20px;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}

/* ---------- 카드 ---------- */
.clab_card{
    background:#fff; border:1px solid var(--c-line); border-radius:var(--c-radius);
    overflow:hidden; cursor:pointer; display:flex; flex-direction:column;
    transition:transform .18s, border-color .18s, box-shadow .18s;
}
.clab_card:hover, .clab_card:focus-visible{
    transform:translateY(-4px); border-color:var(--c-brand);
    box-shadow:0 12px 30px rgba(17,17,26,.12); outline:none;
}
.clab_card__visual{
    position:relative; height:150px; overflow:hidden;
    background:linear-gradient(135deg,var(--g1,#ff8a3d),var(--g2,#ff4d6d));
    padding:12px; display:flex; align-items:flex-start; gap:6px; flex-wrap:wrap;
}
.clab_card__visual.has-img::after{ display:none; }
.clab_card__visual::after{
    content:'✦'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-size:2rem; color:rgba(255,255,255,.4);
}
.clab_card__visual img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.clab_badge{
    position:relative; z-index:1;
    padding:4px 10px; border-radius:99px; font-size:.73rem; font-weight:700;
    background:rgba(0,0,0,.45); color:#fff; backdrop-filter:blur(4px);
}
.clab_badge--hot{ background:#ff3b3b; }
.clab_badge--new{ background:#0aa06e; }
.clab_card__body{ padding:16px; display:flex; flex-direction:column; flex:1; }
.clab_card__title{ font-size:1.04rem; font-weight:700; letter-spacing:-.01em; margin:0; line-height:1.4;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.clab_card__cat{ display:inline-block; margin-top:7px; font-size:.76rem; color:var(--c-brand-dark); background:#fff1e6; padding:2px 9px; border-radius:99px; align-self:flex-start; }
.clab_card__prompt{
    margin-top:12px; padding:10px 12px; background:var(--c-soft); border:1px solid var(--c-line); border-radius:8px;
}
.clab_card__prompt code{
    font-family:Consolas,'D2Coding',monospace; font-size:.76rem; color:#4b5563; line-height:1.5;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; white-space:pre-wrap; word-break:break-word;
}
.clab_card__foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; padding-top:12px; border-top:1px solid var(--c-line); }
.clab_tags{ display:flex; flex-wrap:wrap; gap:6px; min-width:0; }
.clab_tag{ font-size:.74rem; color:#3b82f6; white-space:nowrap; }
.clab_copy{
    display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
    padding:7px 13px; border-radius:8px; font-size:.82rem; font-weight:700;
    background:var(--c-soft); border:1px solid var(--c-line); color:#44454f; transition:all .16s;
}
.clab_copy:hover{ background:var(--c-brand); border-color:var(--c-brand); color:#fff; }
.clab_copy.is-copied{ background:#0aa06e; border-color:#0aa06e; color:#fff; }
.clab_copy__n{ color:var(--c-faint); font-size:.74rem; font-weight:600; }
.clab_copy:hover .clab_copy__n, .clab_copy.is-copied .clab_copy__n{ color:rgba(255,255,255,.8); }

/* ---------- 빈 상태 ---------- */
.clab_notice{ text-align:center; padding:70px 24px; background:#fff; border:1px solid var(--c-line); border-radius:var(--c-radius); }
.clab_notice h2{ font-size:1.25rem; margin:0 0 10px; }
.clab_notice p{ color:var(--c-muted); }
.clab_reset{ display:inline-block; margin-top:16px; padding:10px 24px; background:var(--c-brand); color:#fff; border-radius:99px; font-weight:700; text-decoration:none; }

/* ---------- 모달 ---------- */
.clab_modal_ov[hidden]{ display:none; }
.clab_modal_ov{ position:fixed; inset:0; z-index:9999; background:rgba(17,17,26,.55); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:20px; }
/* 좌: 이미지 / 우: 프롬프트 2단. 모달 자체는 스크롤하지 않고 오른쪽 본문만 스크롤한다. */
.clab_modal{ position:relative; width:100%; max-width:1020px; max-height:88vh; overflow:hidden; background:#fff; border-radius:18px; box-shadow:0 24px 60px rgba(0,0,0,.3); animation:clabIn .22s ease;
    display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); }
@keyframes clabIn{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }
.clab_modal__close{ position:absolute; top:14px; right:14px; z-index:2; width:34px; height:34px; border-radius:50%; border:0; background:rgba(0,0,0,.45); color:#fff; cursor:pointer; font-size:.95rem; }
.clab_modal__close:hover{ background:rgba(0,0,0,.7); }
/* 왼쪽 패널을 이미지로 꽉 채운다 (실제 배경값은 JS 가 인라인으로 덮어쓴다 — cover).
   그리드 셀을 남김없이 채우려면 height:100% 가 필요하다. min-height 만으로는
   오른쪽 본문이 더 길 때 아래에 흰 여백이 남는다.
   패딩은 배경 칠 범위에 영향을 주지 않는다(배경은 패딩 영역까지 칠해짐) — 뱃지 위치용. */
.clab_modal__visual{
    height:100%; min-height:420px;
    background:linear-gradient(135deg,#ff8a3d,#ff4d6d);
    background-size:cover; background-position:center; background-repeat:no-repeat;
    display:flex; align-items:flex-start; gap:8px; padding:14px 16px;
}
.clab_modal__body{ padding:22px 24px 26px; overflow-y:auto; max-height:88vh; }
.clab_modal__body h2{ font-size:1.32rem; letter-spacing:-.02em; margin:0; line-height:1.4; }
.clab_modal__meta{ margin:8px 0 0; }
.clab_modal__meta span{ font-size:.8rem; color:var(--c-brand-dark); background:#fff1e6; padding:3px 10px; border-radius:99px; }
.clab_modal__sec{ margin-top:20px; }
.clab_modal__sechead{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.clab_modal__sechead h4{ font-size:.9rem; color:var(--c-muted); margin:0; font-weight:700; }
.clab_copy--modal{ padding:6px 14px; }
.clab_modal__code{
    margin:0; padding:14px 16px; background:#0f1117; border-radius:10px;
    font-family:Consolas,'D2Coding',monospace; font-size:.83rem; color:#e8eaf2;
    white-space:pre-wrap; word-break:break-word; line-height:1.65; max-height:340px; overflow:auto;
}
.clab_modal__tags, .clab_tags#clabModalTags{ margin-top:16px; }
.clab_modal__view{ display:inline-block; margin-top:18px; color:var(--c-brand-dark); font-weight:700; text-decoration:none; font-size:.9rem; }
.clab_modal__view:hover{ text-decoration:underline; }

/* ---------- 토스트 ---------- */
.clab_toast[hidden]{ display:none; }
.clab_toast{ position:fixed; bottom:32px; left:50%; transform:translateX(-50%); z-index:10000; padding:12px 24px; border-radius:99px; background:#0aa06e; color:#fff; font-weight:700; font-size:.9rem; box-shadow:0 10px 28px rgba(0,0,0,.28); animation:clabToast .22s ease; }
@keyframes clabToast{ from{ opacity:0; transform:translate(-50%,10px);} to{ opacity:1; transform:translate(-50%,0);} }

/* ---------- 반응형 ---------- */
/* 좁은 화면에서는 2단을 풀고 이미지를 위로 (모달 전체가 스크롤) */
@media (max-width:860px){
    .clab_modal{ max-width:640px; grid-template-columns:1fr; overflow-y:auto; }
    .clab_modal__visual{ min-height:0; height:220px; }
    .clab_modal__body{ overflow:visible; max-height:none; }
}
@media (max-width:640px){
    .clab{ padding:0 14px 40px; }
    .clab_hero{ padding:34px 0 24px; }
    .clab_grid{ grid-template-columns:1fr 1fr; gap:12px; }
    .clab_card__prompt{ display:none; }
}
@media (max-width:420px){
    .clab_grid{ grid-template-columns:1fr; }
}