/* imgtpl — 시네마틱 이미지 템플릿 라이브러리 스킨 */

/* ═══════════ 공통 ═══════════ */
.imgt_wrap { max-width: 1280px; margin: 0 auto; padding: 12px; }
.imgt_badge { display:inline-block; padding:3px 10px; border-radius:20px; background:#eef2ff; color:#3730a3; font-size:.78em; font-weight:700; }
.imgt_badge.axis { background:#7c3aed; color:#fff; }
.imgt_badge.tag  { background:#0ea5e9; color:#fff; }
.imgt_btn { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:6px; border:1px solid #d1d5db; background:#fff; cursor:pointer; font-size:.88em; color:#374151; text-decoration:none; }
.imgt_btn:hover { background:#f3f4f6; }
.imgt_btn.primary { background:#2563eb; color:#fff; border-color:#2563eb; }
.imgt_btn.primary:hover { background:#1d4ed8; }

/* ═══════════ 목록 (list) ═══════════ */
.imgt_list { padding:0; }
.imgt_filter { display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:10px 12px; background:#f8f9fa; border-radius:10px; margin-bottom:16px; }
.imgt_filter .lbl { font-weight:700; color:#374151; margin-right:6px; font-size:.9em; }
.imgt_filter a { padding:5px 12px; border-radius:16px; background:#fff; border:1px solid #d1d5db; text-decoration:none; color:#4b5563; font-size:.85em; }
.imgt_filter a.on { background:#7c3aed; color:#fff; border-color:#7c3aed; font-weight:700; }
.imgt_filter a:hover { background:#e5e7eb; }
.imgt_filter a.on:hover { background:#6d28d9; }

.imgt_grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:14px; margin-bottom:18px; }
.imgt_card { background:#fff; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden; transition:transform .12s, box-shadow .12s; position:relative; }
.imgt_card:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.1); }
.imgt_card a.thumb { display:block; aspect-ratio:1/1; background:#111; position:relative; overflow:hidden; }
.imgt_card a.thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.imgt_card .badges { position:absolute; top:8px; left:8px; display:flex; gap:4px; flex-wrap:wrap; }
.imgt_card .body { padding:10px 12px; }
.imgt_card .body .title { font-size:.9em; font-weight:600; color:#111827; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:6px; min-height:2.5em; }
.imgt_card .body .title a { color:inherit; text-decoration:none; }
.imgt_card .body .meta { display:flex; justify-content:space-between; font-size:.76em; color:#6b7280; }
.imgt_card .pill { display:inline-block; padding:1px 8px; border-radius:12px; background:#dbeafe; color:#1e40af; font-size:.72em; font-weight:600; }

.imgt_empty { text-align:center; padding:60px 20px; color:#9ca3af; background:#f9fafb; border-radius:10px; }
.imgt_paging { text-align:center; padding:14px; }

.imgt_top_actions { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; gap:8px; flex-wrap:wrap; }
.imgt_top_actions h2 { margin:0; font-size:1.3em; color:#111; }

/* ═══════════ 상세 (view) ═══════════ */
.imgt_view { padding:0; }
.imgt_v_head { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.imgt_v_head h1 { margin:0; font-size:1.4em; color:#111; line-height:1.35; }

.imgt_v_layout { display:grid; grid-template-columns: 1.4fr 1fr; gap:20px; }
@media (max-width:900px) { .imgt_v_layout { grid-template-columns: 1fr; } }

.imgt_v_image { background:#111; border-radius:10px; overflow:hidden; position:sticky; top:12px; height:fit-content; }
.imgt_v_image img { width:100%; height:auto; display:block; }
.imgt_v_image .aspect { position:absolute; top:10px; right:10px; background:rgba(0,0,0,.7); color:#fff; padding:3px 10px; border-radius:12px; font-size:.75em; }

.imgt_v_meta { background:#f8f9fa; border:1px solid #e5e7eb; border-radius:10px; padding:12px 16px; margin-bottom:14px; font-size:.88em; color:#374151; }
.imgt_v_meta dt { font-weight:700; color:#6b7280; float:left; width:90px; clear:both; padding:4px 0; }
.imgt_v_meta dd { margin-left:100px; padding:4px 0; }

.imgt_v_prompts { }
.imgt_v_prompts h3 { margin:0 0 10px; font-size:1em; color:#111; }
.imgt_prm { background:#fff; border:1px solid #e5e7eb; border-radius:10px; margin-bottom:10px; overflow:hidden; }
.imgt_prm_head { padding:10px 14px; background:#f9fafb; border-bottom:1px solid #e5e7eb; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.imgt_prm_head .name { font-weight:700; display:flex; align-items:center; gap:6px; }
.imgt_prm_head .name .icon { font-size:1.1em; }
.imgt_prm_body { padding:12px 14px; font-family:Consolas,'D2Coding',monospace; font-size:.85em; line-height:1.55; color:#1f2937; white-space:pre-wrap; word-break:break-word; background:#fafafa; max-height:260px; overflow-y:auto; }
.imgt_prm_body.empty { color:#9ca3af; font-style:italic; }
.imgt_copy { padding:4px 12px; border-radius:6px; background:#111; color:#fff; border:0; cursor:pointer; font-size:.8em; font-weight:600; }
.imgt_copy:hover { background:#333; }
.imgt_copy.done { background:#10b981; }

.imgt_v_actions { margin-top:16px; display:flex; gap:8px; flex-wrap:wrap; }

/* ═══════════ 쓰기/수정 (write) ═══════════ */
.imgt_w { padding:0; }
.imgt_w h2 { margin:0 0 14px; font-size:1.3em; }
.imgt_w .section { background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:14px 16px; margin-bottom:14px; }
.imgt_w .section h3 { margin:0 0 10px; font-size:1em; color:#1e40af; padding-bottom:6px; border-bottom:1px solid #dbeafe; }
.imgt_w .row { margin-bottom:10px; }
.imgt_w label { display:block; font-weight:600; color:#374151; margin-bottom:4px; font-size:.9em; }
.imgt_w label .req { color:#dc2626; margin-left:3px; }
.imgt_w label .hint { color:#6b7280; font-weight:400; font-size:.85em; margin-left:6px; }
.imgt_w input[type=text], .imgt_w select, .imgt_w textarea { width:100%; padding:8px 10px; border:1px solid #d1d5db; border-radius:6px; font-size:.92em; box-sizing:border-box; font-family:inherit; }
.imgt_w textarea { min-height:70px; resize:vertical; font-family:Consolas,'D2Coding',monospace; font-size:.85em; line-height:1.55; }
.imgt_w textarea.tall { min-height:110px; }
.imgt_w .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:640px) { .imgt_w .grid2 { grid-template-columns:1fr; } }

.imgt_w .model_card { border:1px solid #e5e7eb; border-radius:8px; padding:10px 12px; margin-bottom:10px; background:#fafafa; }
.imgt_w .model_card .model_head { display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.imgt_w .model_card .model_head .lbl { font-weight:700; font-size:.9em; }
.imgt_w .model_card .model_head .dot { width:10px; height:10px; border-radius:50%; }

/* 붙여넣기 / 드래그 존 */
.imgt_drop { display:flex; align-items:center; gap:12px; padding:16px 18px; border:2px dashed #c7d2fe; border-radius:10px; background:#f5f7ff; cursor:pointer; outline:none; transition:background .12s, border-color .12s; margin-bottom:10px; }
.imgt_drop:hover, .imgt_drop:focus { border-color:#7c3aed; background:#eef2ff; }
.imgt_drop.over { border-color:#2563eb; background:#dbeafe; }
.imgt_drop.ok   { border-color:#10b981; background:#ecfdf5; }
.imgt_drop .ic  { font-size:1.7em; line-height:1; }
.imgt_drop .tx  { display:flex; flex-direction:column; gap:2px; font-size:.9em; color:#374151; }
.imgt_drop .tx span { color:#6b7280; font-size:.85em; font-weight:400; }

.imgt_preview { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.imgt_pv { position:relative; width:96px; height:96px; border-radius:8px; overflow:hidden; border:1px solid #e5e7eb; background:#111; }
.imgt_pv.main { border:2px solid #7c3aed; }
.imgt_pv img { width:100%; height:100%; object-fit:cover; display:block; }
.imgt_pv .x { position:absolute; top:3px; right:3px; width:20px; height:20px; border:0; border-radius:50%; background:rgba(0,0,0,.65); color:#fff; cursor:pointer; font-size:14px; line-height:1; padding:0; }
.imgt_pv .x:hover { background:#dc2626; }
.imgt_pv .cap { position:absolute; left:0; right:0; bottom:0; background:rgba(0,0,0,.6); color:#fff; font-size:.68em; text-align:center; padding:2px 0; }

.imgt_w .ai_tag_btn { padding:8px 14px; border-radius:6px; background:#7c3aed; color:#fff; border:0; cursor:pointer; font-weight:600; font-size:.88em; }
.imgt_w .ai_tag_btn:hover { background:#6d28d9; }
.imgt_w .ai_tag_btn:disabled { background:#9ca3af; cursor:not-allowed; }
.imgt_w .ai_note { font-size:.82em; color:#6b7280; }
.imgt_w .imgt_ai_bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 12px; margin-bottom:12px; background:#faf5ff; border:1px solid #e9d5ff; border-radius:8px; }
.imgt_w .imgt_ai_bar .ai_note { flex:1; min-width:200px; }
.imgt_w .imgt_ai_sel { width:auto; min-width:96px; padding:8px 10px; border:1px solid #c4b5fd; border-radius:6px; background:#fff; font-size:.88em; font-weight:600; color:#5b21b6; cursor:pointer; }
.imgt_w .imgt_ai_sel:disabled { opacity:.55; cursor:not-allowed; }
/* AI가 채운 칸을 잠깐 강조 */
.imgt_w .imgt_filled { animation:imgtFlash 2s ease-out; }
@keyframes imgtFlash {
    0%   { background:#ecfdf5; border-color:#10b981; }
    100% { background:#fff;    border-color:#d1d5db; }
}

/* ═══════════ 캐릭터·제품·소품 라이브러리 (charact 게시판 참조) ═══════════ */
.imgt_charact { background:linear-gradient(180deg,#fefce8 0%,#fff 100%); border:1px solid #fde68a; border-radius:12px; padding:14px 16px; margin-bottom:18px; }
.imgt_charact_head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.imgt_charact_head h3 { margin:0; font-size:1.05em; color:#92400e; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.imgt_charact_head h3 .hint { font-size:.78em; color:#a16207; font-weight:400; }
.imgt_charact_head .right { display:flex; gap:6px; flex-wrap:wrap; }

.imgt_charact_tabs { display:flex; gap:4px; overflow-x:auto; margin-bottom:12px; padding-bottom:2px; border-bottom:1px solid #fde68a; }
.imgt_ch_tab { flex:0 0 auto; padding:8px 14px; border:1px solid transparent; border-bottom:0; border-radius:8px 8px 0 0; background:transparent; color:#78716c; cursor:pointer; font-size:.9em; font-weight:600; display:inline-flex; align-items:center; gap:6px; margin-bottom:-1px; }
.imgt_ch_tab:hover { background:#fef3c7; color:#92400e; }
.imgt_ch_tab.on { background:#fff; border-color:#fde68a; color:#92400e; }
.imgt_ch_tab .cnt { display:inline-block; min-width:20px; padding:1px 7px; border-radius:10px; background:#fde68a; color:#78350f; font-size:.72em; font-weight:700; }
.imgt_ch_tab.on .cnt { background:#f59e0b; color:#fff; }

.imgt_charact_grid { display:none; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:10px; }
.imgt_charact_grid.on { display:grid; }
.imgt_ch_card { position:relative; display:flex; flex-direction:column; text-decoration:none; color:inherit; background:#fff; border:1px solid #e7e5e4; border-radius:8px; overflow:hidden; transition:transform .12s, box-shadow .12s, border-color .12s; }
.imgt_ch_card:hover { transform:translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,.08); border-color:#f59e0b; }
.imgt_ch_card .ch_thumb { aspect-ratio:1/1; background:#1c1917; position:relative; overflow:hidden; }
.imgt_ch_card .ch_thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.imgt_ch_card .ch_thumb .ch_noimg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#78716c; font-size:.72em; text-align:center; line-height:1.3; }
.imgt_ch_card .ch_name { padding:6px 8px; font-size:.8em; color:#292524; text-align:center; line-height:1.3; min-height:2.6em; display:flex; align-items:center; justify-content:center; }

/* insert 모드: 카드가 button 을 감싸는 형태 (프롬프트 삽입 액션) */
.imgt_charact.insert .imgt_ch_card { padding:0; }
.imgt_charact.insert .imgt_ch_card .ch_hit {
    all:unset; display:flex; flex-direction:column; width:100%; cursor:pointer;
    background:transparent; color:inherit; text-align:left;
}
.imgt_charact.insert .imgt_ch_card .ch_hit:focus-visible { outline:2px solid #f59e0b; outline-offset:2px; }
.imgt_charact.insert .imgt_ch_card:hover { border-color:#d97706; box-shadow:0 6px 16px rgba(217,119,6,.18); }
.imgt_charact.insert .imgt_ch_card:hover::after {
    content:'＋ 이름 삽입'; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
    background:rgba(217,119,6,.92); color:#fff; font-size:.72em; font-weight:700;
    padding:5px 10px; border-radius:14px; pointer-events:none; z-index:2;
    white-space:nowrap;
}
.imgt_charact.insert .imgt_ch_card .ch_more {
    position:absolute; top:4px; right:4px; z-index:3;
    display:flex; align-items:center; justify-content:center;
    width:22px; height:22px; border-radius:50%;
    background:rgba(0,0,0,.55); color:#fff; text-decoration:none;
    font-size:.85em; line-height:1; font-weight:700;
    opacity:0; transition:opacity .12s, background .12s;
}
.imgt_charact.insert .imgt_ch_card:hover .ch_more { opacity:1; }
.imgt_charact.insert .imgt_ch_card .ch_more:hover { background:#111; }

/* 삽입 완료 토스트 */
.imgt_ch_toast {
    position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px);
    background:#111; color:#fff; padding:10px 18px; border-radius:24px;
    font-size:.9em; font-weight:600; box-shadow:0 10px 30px rgba(0,0,0,.25);
    opacity:0; pointer-events:none; transition:opacity .18s, transform .18s;
    z-index:9999;
}
.imgt_ch_toast.show { opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }

.imgt_ch_empty { grid-column:1/-1; padding:24px 16px; text-align:center; color:#a16207; font-size:.9em; background:#fffbeb; border-radius:8px; }
.imgt_ch_empty a { color:#b45309; font-weight:700; margin-left:6px; }
.imgt_ch_empty_all { padding:20px 16px; text-align:center; color:#a16207; background:#fffbeb; border-radius:8px; }
.imgt_ch_empty_all a { color:#b45309; font-weight:700; margin-left:6px; }

.imgt_charact_setup { background:#fef2f2; border:1px dashed #fca5a5; border-radius:10px; padding:12px 16px; margin-bottom:18px; color:#7f1d1d; font-size:.88em; }
.imgt_charact_setup b { color:#991b1b; }
.imgt_charact_setup code { background:#fff; padding:1px 6px; border-radius:4px; color:#b91c1c; font-family:Consolas,monospace; font-size:.9em; }
.imgt_charact_setup p { margin:6px 0; }

@media (max-width:640px) {
    .imgt_charact_grid { grid-template-columns:repeat(auto-fill, minmax(100px, 1fr)); gap:8px; }
    .imgt_ch_card .ch_name { font-size:.72em; padding:5px 6px; min-height:2.4em; }
}

/* ── 스타일 잠금 체크박스 (글쓰기) ─────────────────────── */
.imgt_facets{
    margin:10px 0 4px; padding:12px 14px;
    border:1px solid #e5e7eb; border-radius:10px; background:#fafafa;
}
.imgt_facets_head{ margin-bottom:9px; line-height:1.5 }
.imgt_facets_head strong{ font-size:.92rem; color:#111827 }
.imgt_facets_head span{ display:block; font-size:.8rem; color:#6b7280; margin-top:2px }

.imgt_facets_grid{
    display:grid; gap:7px;
    grid-template-columns:repeat(auto-fill, minmax(168px, 1fr));
}
/* grid 로 두는 이유: 체크박스 오른쪽에 라벨과 설명이 두 줄로 쌓여야 한다 */
.imgt_facet{
    display:grid; grid-template-columns:auto 1fr; align-items:start;
    column-gap:7px;
    padding:8px 10px; border:1px solid #e5e7eb; border-radius:8px;
    background:#fff; cursor:pointer; transition:border-color .12s, background .12s;
}
.imgt_facet_h{ grid-column:2 }
.imgt_facet:hover{ border-color:#c7cbd1 }
.imgt_facet input{ margin:2px 0 0; flex:none; cursor:pointer }
.imgt_facet_l{ font-size:.87rem; color:#374151; font-weight:600; line-height:1.3 }
.imgt_facet_h{ display:block; font-size:.74rem; color:#9ca3af; margin-top:1px; line-height:1.3 }
.imgt_facet:has(input:checked){ border-color:#10b981; background:#f0fdf9 }
.imgt_facet:has(input:checked) .imgt_facet_l{ color:#065f46 }
.imgt_facet:has(input:disabled){ opacity:.55; cursor:default }

/* :has() 미지원 브라우저에서도 최소한 읽히도록 — 체크 여부만 시각적으로 약함 */
@media (max-width:480px){
    .imgt_facets_grid{ grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)) }
    .imgt_facet_h{ display:none }
}

/* ── 등록 모드 (생성 / 배경 고정) ─────────────────────── */
.imgt_modes{
    display:grid; gap:8px; margin:10px 0;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
}
.imgt_mode{
    display:grid; grid-template-columns:auto 1fr; column-gap:8px;
    padding:10px 12px; border:1px solid #e5e7eb; border-radius:9px;
    background:#fff; cursor:pointer; transition:border-color .12s, background .12s;
}
.imgt_mode input{ margin:3px 0 0; flex:none; cursor:pointer }
.imgt_mode_l{ font-size:.9rem; font-weight:700; color:#374151 }
.imgt_mode_d{ grid-column:2; font-size:.76rem; color:#9ca3af; margin-top:2px; line-height:1.4 }
.imgt_mode.on{ border-color:#6366f1; background:#f5f5ff }
.imgt_mode.on .imgt_mode_l{ color:#4338ca }

.imgt_bgnote{
    display:none;
    margin:2px 0 12px; padding:11px 13px;
    border:1px solid #c7d2fe; border-left:4px solid #6366f1; border-radius:8px;
    background:#f5f5ff; font-size:.83rem; color:#3730a3; line-height:1.65;
}
.imgt_bgnote strong{ display:block; margin-bottom:3px }
.imgt_bgnote code{ background:#e0e7ff; padding:1px 5px; border-radius:4px; font-size:.95em }

/* 상세 화면 — 배경 고정 안내 */
.imgt_bg_banner{
    margin:0 0 12px; padding:12px 14px;
    border:1px solid #c7d2fe; border-left:4px solid #6366f1; border-radius:8px;
    background:#f5f5ff; font-size:.86rem; color:#3730a3; line-height:1.65;
}
.imgt_bg_banner strong{ display:block; margin-bottom:3px }
.imgt_bg_banner code{ background:#e0e7ff; padding:1px 5px; border-radius:4px }

/* ── [SUBJECT] 치환 바 (상세) ─────────────────────────── */
.imgt_subbar{
    margin:0 0 12px; padding:12px 14px;
    border:1px solid #fbcfe8; border-left:4px solid #ec4899; border-radius:8px;
    background:#fdf2f8;
}
.imgt_subbar_head{ font-size:.84rem; color:#9d174d; line-height:1.6; margin-bottom:8px }
.imgt_subbar_head strong{ display:block; margin-bottom:2px; font-size:.95rem }
.imgt_subbar_head code{ background:#fce7f3; padding:1px 5px; border-radius:4px }
.imgt_subbar_row{ display:flex; gap:6px; flex-wrap:wrap }
.imgt_subbar_input{
    flex:1; min-width:200px; padding:8px 10px;
    border:1px solid #f9a8d4; border-radius:6px;
    font-size:.86em; font-family:Consolas,'D2Coding',monospace; box-sizing:border-box;
}
.imgt_subbar_input:focus{ outline:none; border-color:#ec4899 }
.imgt_subbar_sel{
    padding:8px 10px; border:1px solid #f9a8d4; border-radius:6px; background:#fff;
    font-size:.84em; color:#9d174d; font-weight:600; cursor:pointer; max-width:190px;
}
.imgt_subbar_btn{
    padding:8px 12px; border:1px solid #f9a8d4; border-radius:6px; background:#fff;
    color:#9d174d; font-size:.84em; font-weight:600; cursor:pointer; white-space:nowrap;
}
.imgt_subbar_btn:hover{ background:#fce7f3 }
mark.imgt_sub_ph{ background:#fef08a; color:#854d0e; padding:0 3px; border-radius:3px; font-weight:700 }
mark.imgt_sub_mark{ background:#bbf7d0; color:#14532d; padding:0 3px; border-radius:3px }

/* ── 모델별 결과물 이미지 ─────────────────────────────── */
/* 쓰기: 모델 카드 안 결과물 업로드 행 */
.imgt_result_row{
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    margin-top:8px; padding:8px 10px;
    background:#fff; border:1px dashed #d1d5db; border-radius:7px;
}
.imgt_result_lbl{ font-size:.82em; font-weight:700; color:#6b7280; white-space:nowrap }
.imgt_result_row input[type=file]{ flex:1; min-width:200px; padding:4px; font-size:.85em }
.imgt_result_pv img{ height:44px; border-radius:5px; display:block }

/* 상세: 프롬프트 카드 밑 결과물 표시 */
.imgt_prm_result{
    padding:10px 14px 12px; background:#fff; border-top:1px solid #f0f0f0;
}
.imgt_prm_result .lbl{
    display:block; font-size:.78rem; font-weight:600; color:#6b7280; margin-bottom:6px;
}
.imgt_prm_result img{
    max-width:100%; height:auto; display:block; border-radius:8px;
    border:1px solid #e5e7eb; cursor:zoom-in;
}

/* 모델 카드 안 — 이 모델로 편집하려면 무엇이 필요한지 */
.imgt_prm_how{
    padding:8px 13px; background:#fafafa; border-bottom:1px solid #f0f0f0;
    font-size:.78rem; color:#6b7280; line-height:1.55;
}
.imgt_how_tag{
    display:inline-block; margin-right:6px; padding:2px 7px;
    background:#eef2ff; color:#4338ca; border-radius:5px;
    font-size:.95em; font-weight:600;
}