/* ============================================================
   영상 프롬프트 빌더
   왼쪽 단계 사이드바 + 오른쪽 옵션 패널 + 하단 고정 결과바
   ============================================================ */

/* 그누보드 기본 컨테이너 폭 해제.
   carat_nav.css(사이드바 사이트 메뉴용)도 같은 해제를 하지만,
   빌더는 화면 폭을 그대로 쓰므로 여기서 한 번 더 명시한다. */
#container_wr,
#container{ width:auto; max-width:none; margin:0; padding:0; float:none; }
#container_title{ display:none; }   /* 히어로가 제목 역할을 한다 */

.cb{
    --cb-line:#ececf1; --cb-soft:#f6f6f9; --cb-fg:#191924; --cb-muted:#6b7280;
    --cb-brand:#ff7a1a; --cb-brand-dark:#e5620a;
    --cb-radius:14px;
    /* 빌더는 카드가 많아 화면 폭을 그대로 쓴다 (본문 --page-w 제한을 받지 않는다) */
    max-width:none; margin:0 auto;
    padding:0 28px 200px;       /* 하단 결과바에 가리지 않도록 */
    color:var(--cb-fg);
}
.cb *{ box-sizing:border-box; }

/* ── 히어로 ── */
.cb_hero{ padding:30px 0 22px; }
.cb_hero h1{
    font-size:32px; font-weight:800; letter-spacing:-.03em; margin:0 0 8px; color:var(--cb-fg);
}
.cb_hero p{ font-size:15px; color:var(--cb-muted); margin:0; line-height:1.7; }

/* ── 레퍼런스 이미지 분석 ── */
.cb_ref{
    display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap;
    background:linear-gradient(180deg,#fbfaff,#fff);
    border:1px solid #e4e1f5; border-radius:var(--cb-radius);
    padding:18px 20px; margin:0 0 16px;
}
/* 드래그로 이미지를 끌고 오는 중 */
.cb_ref.is-drag{
    border-color:#5b4bd6; border-style:dashed;
    background:linear-gradient(180deg,#f4f1ff,#fff);
    box-shadow:0 0 0 3px rgba(91,75,214,.12);
}

.cb_ref__left{ flex:1 1 320px; min-width:0; }

.cb_ref__ways{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.cb_ref__or{ font-size:12.5px; color:#9ca3af; }
.cb_ref__or kbd{
    display:inline-block; padding:1px 6px; margin:0 1px;
    border:1px solid #dcdce4; border-bottom-width:2px; border-radius:5px;
    background:#fff; font-family:var(--font-mono,monospace); font-size:11.5px; color:#55565f;
}
.cb_ref__left b{ display:block; font-size:15px; font-weight:700; margin:0 0 4px; }
.cb_ref__left span{ display:block; font-size:13px; color:var(--cb-muted); line-height:1.65; margin:0 0 12px; }
.cb_ref__left small{ display:block; font-size:12px; color:#a2a3ad; margin-top:8px; line-height:1.6; }

#cb_ref_label{ cursor:pointer; }
#cb_ref_label.is-busy{ opacity:.6; pointer-events:none; }

.cb_ref__right{
    flex:1 1 340px; min-width:0; display:flex; gap:14px; align-items:flex-start;
    background:#fff; border:1px solid var(--cb-line); border-radius:12px; padding:12px;
}
.cb_ref__right img{
    flex:0 0 auto; width:104px; height:104px; object-fit:cover;
    border-radius:9px; background:var(--cb-soft); display:block;
}
.cb_ref__read{ min-width:0; flex:1 1 auto; }
.cb_ref__read p{ font-size:13px; line-height:1.7; color:#44454f; margin:0 0 8px; }

.cb_ref__tags{ display:flex; flex-wrap:wrap; gap:4px; margin:0 0 10px; }
.cb_ref__tag{
    display:inline-block; padding:3px 8px; border-radius:999px;
    background:#f0edff; border:1px solid #e0daff;
    font-size:11.5px; font-weight:600; color:#5b4bd6;
}

/* ── 연출 레시피 ── */
.cb_recipes{
    background:#fff; border:1px solid var(--cb-line); border-radius:var(--cb-radius);
    padding:16px 18px; margin:0 0 22px;
}
.cb_recipes__head{ display:flex; align-items:baseline; gap:10px; margin:0 0 12px; flex-wrap:wrap; }
.cb_recipes__head b{ font-size:15px; font-weight:700; }
.cb_recipes__head span{ font-size:13px; color:var(--cb-muted); }

.cb_recipes__list{ display:flex; flex-wrap:wrap; gap:7px; }
.cb_preset{
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 13px; border:1px solid var(--cb-line); border-radius:999px;
    background:#fff; font-size:13.5px; font-weight:600; color:#44454f; cursor:pointer;
    transition:background .13s, border-color .13s, color .13s;
}
.cb_preset i{ font-style:normal; font-size:14px; }
.cb_preset:hover{ background:var(--cb-soft); border-color:#dcdce4; }
.cb_preset.is-on{
    background:var(--cb-brand); border-color:var(--cb-brand); color:#fff;
    box-shadow:0 4px 12px rgba(255,122,26,.25);
}

.cb_reason{
    margin:12px 0 0; padding:11px 14px; border-radius:10px;
    background:#fff8f2; border:1px solid #ffe0c7;
    font-size:13.5px; line-height:1.7; color:#7a4a1c;
}
.cb_reason strong{ color:var(--cb-brand-dark); }

/* ── 본체 2단 ── */
/* 왼쪽은 단계 목록만 담으면 되므로 좁게 잡고, 남는 폭은 전부 옵션 패널에 준다 */
.cb_main{ display:grid; grid-template-columns:186px minmax(0,1fr); gap:14px; align-items:start; }

/* 사이트 메뉴 — 서비스 내비 위젯(carat_nav)을 사이드바 카드 안에 압축해 넣는다 */
.cb_sitenav{ margin:0 0 14px; padding:0 0 12px; border-bottom:1px solid var(--cb-line); }
.cb_sitenav .carat_nav{ border:0; padding:0; background:none; border-radius:0; }
.cb_sitenav .carat_nav__link{ padding:8px; font-size:13.5px; }
.cb_sitenav .carat_nav__sub{ margin:0 0 6px; padding-left:22px; }
.cb_sitenav .carat_nav__sub a{ padding:5px 8px; font-size:12.5px; }

/* 왼쪽 단계 사이드바 */
.cb_side{
    position:sticky; top:80px;
    background:#fff; border:1px solid var(--cb-line); border-radius:var(--cb-radius);
    padding:14px 10px;
}
.cb_side__title{
    font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    color:#9ca3af; padding:0 4px 12px;
}
.cb_steps{ list-style:none; margin:0; padding:0; counter-reset:none; }

.cb_step{
    display:flex; gap:9px; align-items:flex-start;
    padding:10px 8px; border-radius:11px; cursor:pointer; position:relative;
    transition:background .13s;
}
.cb_step + .cb_step{ margin-top:2px; }
.cb_step:hover{ background:var(--cb-soft); }

/* 단계를 잇는 세로선 */
/* left = 패딩(8) + 번호원 반지름(13) — 번호 가운데에 맞춘다 */
.cb_step:not(:last-child):after{
    content:""; position:absolute; left:20px; top:36px; bottom:-3px;
    width:2px; background:var(--cb-line);
}
.cb_step.is-done:not(:last-child):after{ background:#ffd9bd; }

.cb_step__no{
    flex:0 0 auto; width:26px; height:26px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--cb-soft); border:1px solid var(--cb-line);
    font-size:12.5px; font-weight:700; color:#9ca3af;
    position:relative; z-index:1;
    transition:background .13s, color .13s, border-color .13s;
}
.cb_step.is-done .cb_step__no{
    background:#fff1e6; border-color:#ffd9bd; color:var(--cb-brand-dark);
}
.cb_step.is-current .cb_step__no{
    background:var(--cb-brand); border-color:var(--cb-brand); color:#fff;
}

.cb_step__txt{ min-width:0; display:block; }
.cb_step__txt b{ display:block; font-size:14px; font-weight:700; color:#33343d; }
.cb_step__txt b i{ width:15px; color:#b6b7c2; font-size:13px; }
.cb_step__txt em{ display:block; font-style:normal; font-size:12px; color:var(--cb-muted); margin-top:2px; }
.cb_step.is-current .cb_step__txt b{ color:var(--cb-brand-dark); }

.cb_step__sum{
    display:block; font-size:12px; color:var(--cb-brand-dark); font-weight:600;
    margin-top:4px; word-break:keep-all; line-height:1.5;
}
.cb_step__sum:empty{ display:none; }

.cb_side__foot{ margin-top:14px; padding-top:14px; border-top:1px solid var(--cb-line); }
.cb_rec_hint{
    font-size:12.5px; line-height:1.6; color:#7a4a1c;
    background:#fff8f2; border:1px solid #ffe0c7; border-radius:9px;
    padding:9px 11px; margin:0 0 10px;
}
.cb_rec_hint i{ color:var(--cb-brand); }

/* ── 오른쪽 패널 ── */
.cb_body{ min-width:0; }
.cb_panel{
    background:#fff; border:1px solid var(--cb-line); border-radius:var(--cb-radius);
    padding:24px 24px 20px;
}
.cb_panel__head{ margin:0 0 20px; }
.cb_panel__no{
    display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.08em;
    color:var(--cb-brand); margin-bottom:6px;
}
.cb_panel__head h2{ font-size:24px; font-weight:800; letter-spacing:-.025em; margin:0 0 5px; }
.cb_panel__head p{ font-size:14px; color:var(--cb-muted); margin:0; }

/* 입력 필드 */
.cb_field{ margin:0 0 22px; }
.cb_field label{
    display:block; font-size:14px; font-weight:700; color:#33343d; margin:0 0 7px;
}
.cb_field label b{ color:var(--cb-brand); }
.cb_field label span{ font-weight:500; color:#9ca3af; font-size:13px; }
.cb_field small{ display:block; font-size:12.5px; color:#9ca3af; margin-top:6px; }

.cb_input{
    width:100%; padding:12px 14px;
    border:1px solid var(--cb-line); border-radius:11px;
    background:var(--cb-soft); font-size:15px; color:var(--cb-fg);
    font-family:inherit;
    transition:background .15s, border-color .15s, box-shadow .15s;
}
.cb_input::placeholder{ color:#b0b1bb; }
.cb_input:focus{
    outline:none; background:#fff; border-color:var(--cb-brand);
    box-shadow:0 0 0 3px rgba(255,122,26,.14);
}
.cb_input--area{ resize:vertical; line-height:1.6; }

.cb_check{
    display:flex; align-items:center; gap:8px;
    font-size:14px; color:#44454f; margin:0 0 22px; cursor:pointer;
}
.cb_check em{ font-style:normal; font-size:12.5px; color:#9ca3af; }

/* 옵션 그룹 */
.cb_group{ margin:0 0 26px; }
.cb_group__head{ margin:0 0 12px; }
.cb_group__head h3{ font-size:16px; font-weight:700; margin:0 0 3px; }
.cb_group__head p{ font-size:13px; color:var(--cb-muted); margin:0; }

.cb_opts{
    display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:12px;
}

.cb_opt{
    display:flex; flex-direction:column; text-align:left;
    padding:0; overflow:hidden; cursor:pointer;
    background:#fff; border:1.5px solid var(--cb-line); border-radius:12px;
    position:relative;
    transition:border-color .13s, box-shadow .13s, transform .13s;
}
.cb_opt:hover{
    border-color:#d4d5de; transform:translateY(-2px);
    box-shadow:0 6px 18px rgba(17,17,26,.07);
}
.cb_opt.is-on{
    border-color:var(--cb-brand);
    box-shadow:0 0 0 3px rgba(255,122,26,.14);
}

/* 추천 배지 */
.cb_opt.is-rec:after{
    content:"\2728"; position:absolute; right:7px; top:7px;
    font-size:13px; line-height:1;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));
}

.cb_viz{
    display:block; aspect-ratio:16/9; background:#171b26; overflow:hidden;
}
.cb_viz svg{ display:block; width:100%; height:100%; }
.cb_viz--none{ display:none; }          /* 다이어그램 없는 옵션은 텍스트만 */

/* 생성된 샘플 이미지 */
.cb_viz--img img{
    display:block; width:100%; height:100%; object-fit:cover;
    transition:transform .35s ease;
}
.cb_opt:hover .cb_viz--img img{ transform:scale(1.05); }

.cb_opt__body{ display:block; padding:10px 11px 12px; }
.cb_opt__body b{ display:block; font-size:14px; font-weight:700; color:#33343d; }
.cb_opt__body em{
    display:block; font-style:normal; font-size:11.5px; color:#a2a3ad;
    margin-top:1px; letter-spacing:.01em;
}
.cb_opt__body small{
    display:block; font-size:12px; color:var(--cb-muted); line-height:1.55; margin-top:6px;
}
.cb_opt.is-on .cb_opt__body b{ color:var(--cb-brand-dark); }

/* AI 다듬기 */
.cb_refine{
    background:var(--cb-soft); border:1px solid var(--cb-line); border-radius:12px;
    padding:16px 18px; margin:0 0 22px;
}
.cb_refine__head{ margin:0 0 12px; }
.cb_refine__head b{ display:block; font-size:14.5px; font-weight:700; }
.cb_refine__head span{ display:block; font-size:12.5px; color:var(--cb-muted); margin-top:3px; line-height:1.6; }

.cb_refined{
    margin:14px 0 0; padding:14px; background:#fff;
    border:1px solid var(--cb-line); border-radius:11px;
}
.cb_refined pre{
    margin:0; white-space:pre-wrap; word-break:break-word;
    font-family:var(--font-mono,monospace); font-size:13px; line-height:1.7; color:var(--cb-fg);
}
.cb_refined__ko{
    margin:10px 0 12px; font-size:13px; color:var(--cb-muted); line-height:1.7;
}

.cb_note{
    font-size:13.5px; color:var(--cb-muted); background:var(--cb-soft);
    border-radius:10px; padding:12px 14px; margin:0 0 22px;
}
.cb_note a{ color:var(--cb-brand-dark); font-weight:600; }

/* 단계 이동 */
.cb_nav{
    display:flex; gap:8px; justify-content:flex-end;
    padding-top:18px; border-top:1px solid var(--cb-line);
}

/* ── 버튼 ── */
.cb_btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding:11px 18px; border:0; border-radius:10px;
    background:#33343d; color:#fff; font-size:14px; font-weight:600; font-family:inherit;
    cursor:pointer; white-space:nowrap;
    transition:background .13s, opacity .13s;
}
.cb_btn:hover{ background:#191924; color:#fff; }
.cb_btn:disabled{ opacity:.55; cursor:default; }

.cb_btn--main{
    background:var(--cb-brand); box-shadow:0 4px 12px rgba(255,122,26,.25);
}
.cb_btn--main:hover{ background:var(--cb-brand-dark); }

.cb_btn--ghost{
    background:#fff; border:1px solid var(--cb-line); color:#55565f;
}
.cb_btn--ghost:hover{ background:var(--cb-soft); color:var(--cb-fg); }

.cb_btn--ai{ background:#5b4bd6; }
.cb_btn--ai:hover{ background:#4a3cbb; }

/* ── 하단 고정 결과바 ── */
.cb_result{
    position:fixed; left:0; right:0; bottom:0; z-index:850;
    background:rgba(255,255,255,.94);
    -webkit-backdrop-filter:saturate(180%) blur(12px);
    backdrop-filter:saturate(180%) blur(12px);
    border-top:1px solid var(--cb-line);
    box-shadow:0 -6px 24px rgba(17,17,26,.06);
}
.cb_result__in{
    display:flex; align-items:center; gap:18px;
    max-width:none; margin:0 auto; padding:14px 28px;   /* .cb 와 좌우를 맞춘다 */
}
.cb_result__left{ flex:1 1 auto; min-width:0; }
.cb_result__act{ flex:0 0 auto; display:flex; gap:8px; }

.cb_chips{ display:flex; flex-wrap:wrap; gap:5px; margin:0 0 8px; }
.cb_chip{
    display:inline-flex; align-items:center; gap:5px;
    padding:4px 9px; border:1px solid #ffd9bd; border-radius:999px;
    background:#fff1e6; font-size:12px; font-weight:600; color:var(--cb-brand-dark);
    cursor:pointer; font-family:inherit;
}
.cb_chip b{ color:#c9915f; font-weight:700; }
.cb_chip:hover{ background:#ffe4d0; }
.cb_chip_none{ font-size:12px; color:#b0b1bb; }

.cb_out{
    margin:0; max-height:76px; overflow-y:auto;
    padding:11px 13px; border-radius:10px;
    background:var(--cb-soft); border:1px solid var(--cb-line);
    font-family:var(--font-mono,monospace); font-size:13px; line-height:1.65;
    color:var(--cb-fg); white-space:pre-wrap; word-break:break-word;
}
.cb_out.is-empty{ color:#b0b1bb; }

/* ── 토스트 ── */
.cb_toast{
    position:fixed; left:50%; bottom:150px; transform:translateX(-50%);
    z-index:900; padding:12px 20px; border-radius:999px;
    background:rgba(25,25,36,.94); color:#fff; font-size:14px; font-weight:600;
    box-shadow:0 8px 26px rgba(17,17,26,.22);
}

/* ── 좁은 화면 ── */
@media (max-width:1080px){
    .cb_main{ grid-template-columns:1fr; }
    .cb_side{ position:static; }
    .cb_steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:4px; }
    .cb_step:not(:last-child):after{ display:none; }
    .cb_step__sum{ display:none; }
}
@media (max-width:720px){
    .cb_hero h1{ font-size:25px; }
    .cb_panel{ padding:18px 16px 16px; }
    .cb_opts{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:9px; }
    .cb_result__in{ flex-direction:column; align-items:stretch; gap:10px; padding:12px 14px; }
    .cb_result__act{ justify-content:stretch; }
    .cb_result__act .cb_btn{ flex:1; }
    .cb_out{ max-height:60px; }
    .cb{ padding-bottom:250px; }
}

/* 레퍼런스 분석 모델 선택 */
.cb_ref__provider{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--cb-muted); }
.cb_ref__provider select{
    font-size:12.5px; color:var(--cb-fg); background:#fff;
    border:1px solid var(--cb-line); border-radius:8px; padding:5px 8px;
}

/* 레퍼런스 반영 모드 선택 */
.cb_ref__mode{ margin:10px 0 8px; font-size:12.5px; line-height:1.7; }
.cb_ref__mode b{ display:block; font-size:12.5px; margin-bottom:4px; }
.cb_ref__mode label{ display:block; cursor:pointer; color:var(--cb-fg); }
.cb_ref__mode input{ margin-right:5px; vertical-align:-1px; }
.cb_ref__mode em{ display:block; font-style:normal; font-size:11.5px; color:#a2a3ad; margin-top:4px; }

/* 관련 레퍼런스 (마무리 단계) */
.cb_refs{
    margin-top:22px; padding:16px;
    background:var(--cb-soft); border:1px solid var(--cb-line); border-radius:var(--cb-radius);
}
.cb_refs__head{ display:flex; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.cb_refs__head b{ font-size:14.5px; }
.cb_refs__head span{ font-size:12.5px; color:var(--cb-muted); flex:1 1 200px; }
.cb_refs__list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; }
.cb_refs__empty{ font-size:12.5px; color:#a2a3ad; }
.cb_refcard{
    border:2px solid var(--cb-line); border-radius:10px; background:#fff;
    padding:0 0 6px; cursor:pointer; overflow:hidden; text-align:left;
}
.cb_refcard img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.cb_refcard span{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    font-size:11.5px; line-height:1.4; padding:6px 8px 0; color:var(--cb-fg);
}
.cb_refcard.is-on{ border-color:var(--cb-brand); }

/* 구도별 추천 프롬프트 */
.cb_ideas{
    margin-top:18px; padding:14px 16px;
    background:#fff7f0; border:1px solid #ffd9bd; border-radius:var(--cb-radius);
}
.cb_ideas__head{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.cb_ideas__head b{ font-size:14px; color:var(--cb-brand-dark); }
.cb_ideas__head span{ font-size:12.5px; color:var(--cb-muted); }
.cb_ideas__list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:8px; }
.cb_idea{
    text-align:left; padding:10px 12px; cursor:pointer;
    background:#fff; border:2px solid #ffe3cf; border-radius:10px;
}
.cb_idea b{ display:block; font-size:13px; margin-bottom:2px; }
.cb_idea span{ display:block; font-size:11.5px; color:var(--cb-muted); line-height:1.5; }
.cb_idea:hover{ border-color:var(--cb-brand); }
.cb_idea.is-on{ border-color:var(--cb-brand); background:#fff2e6; }

/* 결과바 2단 출력 — 이미지(컷 목록) / 영상 프롬프트 */
.cb_outs{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cb_outlist{ max-height:150px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; }
.cb_outlist .cb_out{ max-height:64px; }
.cb_outitem__head{
    display:flex; align-items:center; justify-content:space-between; margin:0 0 3px;
}
.cb_outitem__head b{ font-size:11.5px; color:var(--cb-brand-dark); }
.cb_outcopy{
    font-size:11px; padding:2px 9px; cursor:pointer;
    background:#fff; border:1px solid var(--cb-line); border-radius:7px; color:var(--cb-muted);
}
.cb_outcopy:hover{ border-color:var(--cb-brand); color:var(--cb-brand-dark); }
.cb_outblock b{
    display:block; font-size:11.5px; font-weight:700; color:var(--cb-muted);
    margin:0 0 4px; letter-spacing:.01em;
}
.cb_outblock b span{ font-weight:400; color:#a2a3ad; margin-left:4px; }
@media (max-width:900px){
    .cb_outs{ grid-template-columns:1fr; }
}