@charset "utf-8";
/* =========================================================================================================
* AI Seed Design (GediP3) CSS
=========================================================================================================== */
/* GediP3 백그라운드 목록 위치 (AI텍스트 목록 위에 스택) */
#asyncTaskListLayer { bottom: 165px; }
/* GediP3 목록 스크롤: 기본 비활성, 5개 이상 누적 시 .scrollable 토글로 활성 */
#asyncDesign3List { max-height: none; overflow-y: visible; }
#asyncDesign3List.scrollable { max-height: 240px; overflow-y: scroll; }
/* 비동기 항목 아이템 (GediP3 목록) */
.async_gen_item { display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px rgba(0,0,0,0.06) solid; font-size:14px; color:#191919; cursor:pointer; }
.async_gen_item:last-child { border-bottom:none; }
.async_gen_item .task_label { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.async_gen_item .task_status { display:inline-block; min-width:50px; padding:2px 8px; border-radius:4px; background:#191919; font-size:12px; color:#fff; text-align:center; margin-left:8px; }
.async_gen_item[data-task-status="completed"] .task_status,
.async_gen_item[data-task-status="llm_completed"] .task_status { background:#0066ff; }
.async_gen_item[data-task-status="failed"] .task_status { background:#ff4a00; }
.async_gen_item[data-task-status="done"] .task_status { background:#767676; }
/* GediP3 진행 단계 레이어 — 데모 v4 기준 */
/* 전체 dim 배경 */
.ai_design3_generating_layer { position:fixed; inset:0; z-index:23000; background:rgba(5,7,12,.55); backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; font-family:"Pretendard Variable",Pretendard,system-ui,sans-serif; }
/* 모달 박스 */
.ai3_modal { position:relative; width:min(1080px,94vw); max-height:92vh; overflow:hidden; overflow-y:auto; background:#12141B; border:1px solid #262B38; border-radius:24px; box-shadow:0 40px 120px -30px rgba(0,0,0,.8); display:flex; flex-direction:column; }
/* 닫기 버튼 */
.ai3_modal_close { position:absolute; top:18px; right:18px; width:38px; height:38px; border-radius:50%; border:1px solid #2E3442; background:#161922; color:#A6ADBD; font-size:15px; cursor:pointer; display:grid; place-items:center; z-index:7; transition:.15s; line-height:1; }
.ai3_modal_close:hover { background:#1B1F2A; color:#EDEFF4; }
/* hero 패딩 영역 */
.ai3_m_pad { padding:40px 44px 0; }
/* job chip — 입력 정보 식별 */
.ai3_jobchip { display:flex; align-items:center; gap:11px; background:#161922; border:1px solid #262B38; border-radius:12px; padding:11px 14px; max-width:500px; min-width:0; }
.ai3_jobchip_ic { flex:none; width:30px; height:30px; border-radius:8px; background:#1A2540; border:1px solid #2E3442; display:grid; place-items:center; color:#5B86FF; }
.ai3_jobchip_meta { min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; }
.ai3_jobchip_tx { font-size:14px; font-weight:600; color:#EDEFF4; letter-spacing:-.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ai3_jobchip_sub { font-size:12px; color:#6B7385; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ai3_jobchip_dot { display:inline-block; width:3px; height:3px; border-radius:50%; background:#6B7385; margin:0 6px; vertical-align:middle; }
/* hero 그리드: 좌=텍스트(jobchip+서머리), 우=영상 */
.ai3_hero { display:grid; grid-template-columns:1fr 280px; gap:30px; align-items:start; }
.ai3_hero_text { min-width:0; }
.ai3_headline { font-size:38px; font-weight:700; letter-spacing:-1px; line-height:1.25; margin:1.2em 0 0 0; color:#EDEFF4; }
.ai3_subline { font-size:16px; color:#A6ADBD; margin:16px 0 0; line-height:1.6; }
/* 예상시간 pill */
.ai3_eta { display:inline-flex; align-items:center; gap:14px; margin-top:22px; background:#161922; border:1px solid #262B38; border-radius:999px; padding:11px 20px 11px 16px; }
.ai3_eta_ring { width:18px; height:18px; flex-shrink:0; animation:ai3rot 2s linear infinite; transform-box:fill-box; transform-origin:center; }
.ai3_eta_lbl { font-size:13px; color:#6B7385; font-weight:600; }
.ai3_eta_val { font-size:14px; font-weight:700; color:#EDEFF4; }
.ai3_eta_val.calculating::after { content:''; display:inline-block; width:3ch; overflow:hidden; vertical-align:bottom; animation:text_dots 4s steps(3,end) infinite; }
/* hero 동영상 */
.ai3_hero_visual { display:flex; align-items:center; justify-content:center; position:relative; width:280px; height:230px; margin-top:70px; border-radius:20px; overflow:hidden; background:#070A12; border:1px solid #262B38; }
.ai3_hero_visual video { width:60%; height:auto; display:block; }
.ai3_hero_visual.switching { opacity:0; transition:opacity .3s; }
/* 스텝 카드 그리드 */
.ai3_steps { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:64px 44px 27px; }
.ai3_card { position:relative; background:#161922; border:1px solid #262B38; border-radius:16px; padding:20px 18px; overflow:hidden; transition:.4s; }
.ai3_card_no { font-size:30px; font-weight:800; letter-spacing:-1px; color:#6B7385; transition:.4s; line-height:1; }
.ai3_card_nm { font-size:16px; font-weight:700; margin-top:14px; color:#A6ADBD; transition:.4s; }
.ai3_card_ds { font-size:12.5px; color:#6B7385; margin-top:7px; line-height:1.55; transition:.4s; min-height:34px; word-break:keep-all; }
/* 로딩 바 */
.ai3_card_prog { position:absolute; left:0; bottom:0; right:0; height:3px; width:0; background:#2F6BFF; transition:none; }
/* active 카드 */
.ai3_card.active { background:#1B1F2A; border-color:#2F6BFF; }
.ai3_card.active .ai3_card_no { color:#2F6BFF; }
.ai3_card.active .ai3_card_nm { color:#EDEFF4; }
.ai3_card.active .ai3_card_ds { color:#A6ADBD; }
.ai3_card.active .ai3_card_spin { opacity:1; }
/* done 카드 */
.ai3_card.done .ai3_card_no { color:#6B7385; }
.ai3_card.done .ai3_card_nm { color:#A6ADBD; }
.ai3_card.done .ai3_card_check { opacity:1; }
/* spin / check 아이콘 */
.ai3_card_spin { position:absolute; top:18px; right:18px; width:20px; height:20px; opacity:0; transition:.3s; }
.ai3_card_check { position:absolute; top:18px; right:18px; width:20px; height:20px; opacity:0; transition:.3s; color:#5B86FF; }
@keyframes ai3rot { to{transform:rotate(360deg)} }
/* overtime step5 */
.ai3_card.overtime_step { display:none; }
.ai_design3_generating_layer.overtime .ai3_card.overtime_step { display:block; }
/* footer */
.ai3_foot { padding:15px 44px; text-align:center; border-top:1px solid #262B38; margin-top:4px; }
.ai3_foot_msg { font-size:14px; color:#A6ADBD; margin:0; }
.ai3_foot_msg b { color:#EDEFF4; font-weight:600; }
.ai3_foot_bg { margin:0; }
.ai3_bg_btn { display:inline-block; padding:9px 22px; background:transparent; border:1px solid #2E3442; border-radius:10px; color:#A6ADBD; font-size:13px; font-weight:600; cursor:pointer; transition:.15s; }
.ai3_bg_btn:hover { border-color:#5B86FF; color:#EDEFF4; }
/* veil (모달 위 전체 덮음) */
.ai3_veil { position:absolute; inset:0; background:rgba(11,13,18,.9); backdrop-filter:blur(4px); display:grid; place-items:center; opacity:0; pointer-events:none; transition:.5s; z-index:6; border-radius:24px; }
.ai3_veil.on { opacity:1; pointer-events:auto; }
.ai3_veil_c { text-align:center; transform:scale(.96); transition:.5s; }
.ai3_veil.on .ai3_veil_c { transform:none; }
.ai3_veil_ck { width:64px; height:64px; border-radius:50%; background:#2F6BFF; display:grid; place-items:center; margin:0 auto 16px; box-shadow:0 16px 40px -10px rgba(47,107,255,.7); }
.ai3_veil_t { font-size:24px; font-weight:700; color:#EDEFF4; }
.ai3_veil_d { font-size:14px; color:#A6ADBD; margin-top:8px; }
.ai3_veil_btn { margin-top:18px; background:#2F6BFF; border:0; color:#fff; font-family:inherit; font-weight:700; font-size:14px; padding:13px 26px; border-radius:12px; cursor:pointer; transition:background .15s; }
.ai3_veil_btn:hover { background:#4d7fff; }
/* 반응형 */
@media (max-width:920px) {
.ai3_steps { grid-template-columns:1fr 1fr; }
}
@media (max-width:780px) {
.ai3_hero { grid-template-columns:1fr; }
.ai3_hero_visual { display:none; }
.ai3_m_pad { padding:28px 22px 0; }
.ai3_headline { font-size:28px; }
.ai3_steps { padding:24px 22px 10px; gap:10px; }
.ai3_foot { padding:16px 22px 24px; }
}
/* ===================== GediP3 LNB 옵션 영역 ===================== */
/* v3 섹션 전체 마진 축소 */
#left_contents [ai-pdp-ver='GediP3'] .ai_options .ai_option_cont { margin-bottom:12px; }
/* 입력 영역 — ai_required_input 컨테이너가 테두리 제공, textarea는 2.1 #ai-product-info와 동일 스타일 */
.ai3_input_cont .ai_required_input { margin-bottom:0; }
.ai3_input_cont .ai_required_input:has(#ai-pdp3-requirement:focus) { box-shadow:0 0 15px rgba(0,0,0,.7); }
.ai3_requirement_wrap { margin-bottom:8px; }
.ai3_requirement_wrap #ai-pdp3-requirement { display:block; width:100%; height:170px; padding:0; border:none; outline:none; background:transparent; color:#fff; font-size:13px; font-weight:300; line-height:1.8; font-family:inherit; resize:none; box-sizing:border-box; }
.ai3_requirement_wrap #ai-pdp3-requirement::placeholder { color:#999; white-space:pre-line; }
/* btnAiUpload3 아이콘 — btnAiUpload와 동일 */
#left_contents .ai_options #btnAiUpload3 { display:block; width:22px; height:22px; opacity:.7; background:url('data:image/svg+xml,') center / contain no-repeat; }
/* aiImageList3 — aiImageList2와 동일 */
#left_contents .ai_options #aiImageList3.ai_upload_image_list:has(li) { margin-top:10px; }
#left_contents .ai_options #aiImageList3.ai_upload_image_list li .star { display:none; }
.ai3_required_badge { display:inline-block; margin-left:4px; padding:1px 6px; border-radius:4px; background:#e8003d; color:#fff; font-size:11px; font-weight:700; }
/* 입력 예시 칩 */
#left_contents .ai_options .ai3_section_label { margin-bottom:6px; font-size:14px; font-weight:600; color:#b0b0b0; }
#left_contents .ai_options .ai3_sub_label { margin-left:6px; font-size:12px; font-weight:400; color:#767676; }
#left_contents .ai_options .prompt_input_guide { float: right; font-size: 12px; color:#5b86ff; }
#left_contents .ai_options .prompt_input_guide:focus { outline: none; }
.ai3_example_chips { display:flex; flex-wrap:wrap; gap:5px; }
.ai3_example_chips li { list-style:none; }
.ai3_example_chips [data-ai3-example] a { display:inline-block; padding:4px 10px; border:1px rgba(255,255,255,0.2) solid; border-radius:20px; font-size:13px; color:#c0c0c0; cursor:pointer; transition:all 0.15s; }
.ai3_example_chips [data-ai3-example] a:hover { border-color:#0066ff; color:#fff; background:#0066ff22; }
/* 디자인 방향 카드 */
.ai3_direction_cards { display:grid; grid-template-columns:repeat(2, 1fr); gap:6px; }
.ai3_direction_cards li { list-style:none; padding:8px 12px; border:1px rgba(255,255,255,0.15) solid; border-radius:8px; cursor:pointer; transition:all 0.15s; }
.ai3_direction_cards li:hover { border-color:#0066ff88; background:#0066ff11; }
.ai3_direction_cards li.selected { border-color:#0066ff; background:#0066ff1a; }
#left_contents .ai_options .ai3_direction_cards p.dir_title_wrap { display:flex; align-items:center; gap:5px; margin:0 0 4px; padding:0; font-size:14px; font-weight:600; line-height:1; color:#e0e0e0; }
#left_contents .ai_options .ai3_direction_cards .dir_icon { font-size:11px; line-height:1; color:#0066ff; flex-shrink:0; word-break: keep-all; letter-spacing: -.03em;}
#left_contents .ai_options .ai3_direction_cards p.dir_desc { margin:0; padding:0; font-size:13px; color:#767676; line-height:1.3; word-break: keep-all; }
#left_contents .ai_options .ai3_direction_cards li.selected .dir_icon { color:#4d9aff; }
#left_contents .ai_options .ai3_direction_cards li.selected p.dir_title_wrap { color:#fff; }
/* ===================== // GediP3 LNB 옵션 영역 ===================== */
/* ===================== AI 생성 작업 툴바 패널 ===================== */
.ai_task_toolbar_area { position: relative; display: flex; align-items: center; margin-right: 5px; }
/* 툴바 버튼 */
.ai_task_toolbar_btn { position: relative; height: 34px; padding: 0 15px; gap: 6px; border: none; background: #2E3238; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 2px; white-space: nowrap; }
.ai_task_toolbar_btn:not(:disabled):hover { background: #0066FF; }
.ai_task_toolbar_btn:focus{outline: none;}
.ai_task_toolbar_btn:disabled{cursor: default; opacity: .5;}
.ai_task_toolbar_label { font-size: 14px; color: #fff; font-weight: 300; font-family: 'Pretendard'; }
.ai_task_toolbar_btn:hover .ai_task_toolbar_label { color: #fff; }
.ai_task_toolbar_icon { display: block; width: 18px; height: 18px; color: #fff; }
.ai_task_toolbar_icon svg { width: 100%; height: 100%; display: block; }
.ai_task_toolbar_btn[data-task-status="in_progress"] .ai_task_toolbar_icon,
.ai_task_toolbar_btn[data-task-status="in_progress_with_unread_done"] .ai_task_toolbar_icon { animation: aitBreathe 1.6s ease-in-out infinite; transform-origin: center; color: #5B86FF; }
.ai_task_toolbar_btn[data-task-status="unread_done"] .ai_task_toolbar_icon,
.ai_task_toolbar_btn[data-task-status="in_progress_with_unread_done"] .ai_task_toolbar_icon { color: #5B86FF; }
.ai_task_toolbar_icon.ait-pop { animation: aitPop .5s ease; }
@keyframes aitBreathe { 0%,100%{transform:scale(.92);opacity:.65} 50%{transform:scale(1);opacity:1} }
@keyframes aitPop { 0%{transform:scale(1)} 40%{transform:scale(1.25)} 100%{transform:scale(1)} }
/* ai3 footer 인라인 칩 */
.ai3_foot_msg .ai_task_chip { display: inline-flex; align-items: center; gap: 4px; background: #1B1F2A; border: 1px solid #2E3442; border-radius: 6px; padding: 2px 8px; color: #EDEFF4; font-weight: 600; font-size: 13px; vertical-align: middle; }
.ai3_foot_msg .ai_task_chip .ai_task_toolbar_icon { width: 14px; height: 14px; color: #5B86FF; }
/* 미확인 배지 */
.ai_task_badge { display: none; position: absolute; top: 2px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #0066FF; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; box-sizing: border-box; }
.ai_task_toolbar_btn[data-state="on"]{background: #0066FF;}
.ai_task_toolbar_btn:hover .ai_task_badge,
.ai_task_toolbar_btn[data-state="on"] .ai_task_badge{ color: #0066FF; background: #fff;}
.ai_task_toolbar_btn:hover .ai_task_toolbar_icon svg,
.ai_task_toolbar_btn[data-state="on"] .ai_task_toolbar_icon svg{stroke:#fff; }
.ai_task_toolbar_btn:hover .ai_task_toolbar_icon svg path,
.ai_task_toolbar_btn[data-state="on"] .ai_task_toolbar_icon svg path{fill:#fff;}
/* save_distribute_area disabled 상태에서 툴바는 항상 활성 유지 */
#top_pannel .save_distribute_area.disabled > .ai_task_toolbar_area { opacity: 1; pointer-events: auto; }
/* 툴바 드롭다운 패널 */
.ai_task_toolbar_panel {overflow: hidden; position: absolute; right: 0; top: 45px; width: 407px; background: #24262a; border: 1px rgba(255,255,255,.1) solid; border-radius:14px; z-index: 100; box-shadow:0 30px 30px -10px rgba(0,0,0,.5); }
.ai_task_toolbar_panel .panel_header { display: flex; align-items: center; gap:10px; height:50px; padding: 10px 14px; border-bottom: 1px rgba(255,255,255,.1) solid; }
.ai_task_toolbar_panel .panel_title { font-weight: 600; color: #fff; }
.ai_task_history_btn { border: none; background: transparent; color: #5b86ff; font-size: 12px; cursor: pointer; padding: 2px 0; margin-left:auto; }
.ai_task_history_btn:hover { text-decoration: underline; }
.ai_task_toolbar_panel .panel_body { max-height: 320px; overflow-y: auto; }
.ai_task_toolbar_panel .panel_body::-webkit-scrollbar{width:12px;}
.ai_task_toolbar_panel .panel_body::-webkit-scrollbar-thumb{box-shadow:none; background-color: rgba(0,0,0,.2);}
.ai_task_toolbar_panel .group_label { padding: 6px 14px 4px; font-size: 12px; color: #767676; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.ai_task_toolbar_panel .panel_group.with-separator { border-top: 1px solid #484e58; }
.ai_task_toolbar_panel .panel_empty { padding: 24px 14px; text-align: center; color: #888; font-size: 13px; }
.ai_task_toolbar_panel .panel_section_header { display: flex; align-items: center; justify-content: space-between; height:48px; padding: 11px 17px; border-bottom: 1px rgba(255,255,255,.1) solid; background: #2e3238; cursor: pointer; }
.ai_task_toolbar_panel .panel_section_header:hover { background: #2a2f36; }
.ai_task_toolbar_panel .section_title { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.ai_task_toolbar_panel .section_feature_name { font-size: 12px; color: #d8d8d8; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.ai_task_toolbar_panel .section_model_name { font-size: 10px; color: #fff; font-weight: 700; background: #2f6bff; border-radius: 4px; padding: 1px 6px 2px; white-space: nowrap; }
.ai_task_toolbar_panel .section_count_tag { font-size: 10px; color: #888; background: #181b20; border-radius: 99px; padding: 2px 9px 3px; border:1px solid rgba(255,255,255,.2); font-weight: 500; white-space: nowrap; flex-shrink: 0; }
.ai_task_toolbar_panel .section_collapse_btn { width: 14px; height: 14px; border: none; background: url('data:image/svg+xml,') center / 8px no-repeat; cursor: pointer; transition: transform 0.2s; flex-shrink: 0; }
.ai_task_toolbar_panel .panel_section_header.collapsed .section_collapse_btn { transform: rotate(-90deg); }
.ai_task_toolbar_panel .panel_section_header.collapsed + .panel_body { display: none; }
/* 패널 아이템 */
.ai_task_panel_list { list-style: none; margin: 0; padding: 0; }
.ai_task_panel_list li { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; cursor: default; }
.ai_task_panel_list li:not(:first-of-type){ border-top: 1px rgba(255,255,255,.1) solid;}
.ai_task_panel_list li.clickable { cursor: pointer; }
.ai_task_panel_list li.clickable:hover { background: rgba(255,255,255,0.04); }
.ai_task_panel_list .task_status_icon { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; border: 2px #555 solid; }
.ai_task_panel_list li.done .task_status_icon,
.ai_task_panel_list li.unread .task_status_icon { border: 1px solid rgba(255,255,255,.2); background: #1c2029 url('data:image/svg+xml,') center / 10px no-repeat; }
.ai_task_panel_list li.fail .task_status_icon { border: 1px solid rgba(255,255,255,.2); background: #1c2029 url('data:image/svg+xml,') center / 10px no-repeat; }
.ai_task_panel_list li.progress .task_status_icon,
.ai_task_panel_list li.waiting .task_status_icon { border: none; }
.ai_task_panel_list .task_info { flex: 1; min-width: 0; }
.ai_task_panel_list .task_title { display: block; font-size: 12px; color: #d0d0d0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai_task_panel_list li.progress .task_title,
.ai_task_panel_list li.waiting .task_title{color:#5b86ff;}
.ai_task_panel_list .task_time { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 11px; color:#727b8c; }
.ai_task_panel_list .task_datetime { flex-shrink: 0; white-space: nowrap; }
.ai_task_panel_list .task_status_sw { flex-shrink: 0; white-space: nowrap; }
.ai_task_panel_list .task_time_val { width: 36px; flex-shrink: 0; color: #888; }
.ai_task_panel_list .task_elapsed_val { color: #777; min-width: 0; }
.ai_task_panel_list li.progress .task_status_sw { color: #5B86FF; }
.ai_task_panel_list li.fail .task_status_sw { color: #c05050; }
.ai_task_panel_list .task_click_hint { display: flex; visibility: hidden; pointer-events: none; align-items: center; justify-content: flex-end; gap: 5px; flex-shrink: 0; width: 38px; }
.ai_task_panel_list li.done .task_click_hint,
.ai_task_panel_list li.unread .task_click_hint { visibility: visible; pointer-events: auto; }
.ai_task_panel_list .task_click_hint::before { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: #2f6bff; flex-shrink: 0; }
.ai_task_panel_list li.done.read .task_click_hint::before { visibility: hidden; }
.ai_task_panel_list .task_click_hint::after { content: ''; display: block; width: 7px; height: 7px; background: url('data:image/svg+xml,') center / contain no-repeat;}
/* ===================== // AI 생성 작업 툴바 패널 ===================== */
/* ===================== AI 생성 작업 전체 기록 레이어 ===================== */
.ai_task_history_layer { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 22000; display: flex; align-items: center; justify-content: center; }
.history_layer_inner { width: min(1024px, 90vw); height: min(640px, 80vh); background: #24262a; border: 1px rgba(255,255,255,.1) solid; border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; }
.history_header { position: relative; padding: 18px 20px; background:rgba(0,0,0,.3); flex-shrink: 0; }
.history_title { display: block; font-size: 18px; font-weight: 700; color: #f0f2f6; }
.history_notice { margin: 4px 0 0; font-size: 12px; color: #727b8c; }
.history_close_btn { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border: none; background: url('data:image/svg+xml,') center / 16px no-repeat; cursor: pointer; border-radius: 50%; }
.history_close_btn:hover { background-color: rgba(255,255,255,0.08); }
/* 필터 */
.history_filter_area { padding: 18px 20px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
.history_filter_row { display: flex; flex-wrap: wrap; gap: 6px; }
.history_filter_area .filter_btn { padding: 4px 12px; border: 1px rgba(255,255,255,0.15) solid; border-radius: 20px; background: transparent; color: #969696; font-size: 12px; cursor: pointer; transition: all 0.12s; }
.history_filter_area .filter_btn.active { border-color: #ffffff88; background: #ffffff44; color: #fff; }
.history_filter_area .filter_btn:hover { border-color: #ffffff88; }
/* 목록 */
.ai_task_history_list { flex: 1; overflow-y: scroll; scrollbar-gutter: stable; list-style: none; margin: 0 20px 20px; padding: 0; }
.ai_task_history_list::-webkit-scrollbar{width:12px;}
.ai_task_history_list::-webkit-scrollbar-thumb{box-shadow:none; background-color: rgba(0,0,0,.2);}
.ai_task_history_list .history_item { display: grid; grid-template-columns: 18px 80px 1fr 100px 60px 40px 80px; align-items: center; gap: 10px; padding: 14px 10px; border-bottom: 1px rgba(255,255,255,.1) solid; cursor: default; }
.ai_task_history_list .item_status_icon { justify-self: center; }
.ai_task_history_list .item_type_label { justify-self: center; }
.ai_task_history_list .item_created { justify-self: start; }
.ai_task_history_list .item_elapsed { justify-self: center; }
.ai_task_history_list .item_status_label { justify-self: center; }
.ai_task_history_list .history_item.clickable { cursor: pointer; }
.ai_task_history_list .history_item.clickable:hover { background: rgba(255,255,255,0.03); }
.ai_task_history_list .item_status_icon { width: 18px; height: 18px; border-radius: 50%; border: 2px #555 solid; flex-shrink: 0; }
.ai_task_history_list .item_type_label { font-size: 11px; padding: 2px 7px; border-radius: 6px; white-space: nowrap; font-weight: 500; }
.ai_task_history_list .item_type_label.type_seed { background: #0066ff18; border: 1px #0066ff44 solid; color: #5599ff; }
.ai_task_history_list .item_type_label.type_text { background: #00b89618; border: 1px #00b89644 solid; color: #33d1ae; }
.ai_task_history_list .done .item_status_icon,
.ai_task_history_list .unread .item_status_icon { border: 1px solid rgba(255,255,255,.2); background: #1c2029 url('data:image/svg+xml,') center / 10px no-repeat; }
.ai_task_history_list .fail .item_status_icon { border: 1px solid rgba(255,255,255,.2); background: #1c2029 url('data:image/svg+xml,') center / 12px no-repeat; }
.ai_task_history_list .progress .item_status_icon,
.ai_task_history_list .waiting .item_status_icon { border: none; }
.ai_task_history_list .item_title { cursor: text; min-width: 0; padding-right: 5px; }
.ai_task_history_list .history_item:not(.clickable) .item_title { pointer-events: none; cursor: default; }
.ai_task_history_list .item_title_input { display: block; width: 100%; height:32px; box-sizing: border-box; font-size: 13px; color: #f0f2f6; font-family: inherit; background: transparent; border: none; padding: 0 0 0 5px; margin: 0; cursor: text; white-space: nowrap; text-overflow: ellipsis; outline: none; }
.ai_task_history_list .item_title_input:hover{outline: 1px solid #2F6BFF66;}
.ai_task_history_list .item_title_input:focus { outline: 1px solid #2F6BFF; border-radius: 2px; text-overflow: clip; background:#0E1014; }
.ai_task_history_list .item_created { font-size: 11px; color: #727b8c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai_task_history_list .item_elapsed { font-size: 11px; color: #727b8c; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ai_task_history_list .elapsed_m,
.ai_task_history_list .elapsed_s { display: inline-block; min-width: 27px; text-align: right; }
.ai_task_history_list .item_status_label { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai_task_history_list .done .item_status_label { color: #5B86FF; }
.ai_task_history_list .unread .item_status_label { color: #5B86FF; }
.ai_task_history_list .fail .item_status_label { color: #c05050; }
.ai_task_history_list .progress .item_status_label { color: #4d9aff; }
.ai_task_history_list .item_reinput_btn { display: flex; align-items: center; gap: 3px; position:relative; padding: 4px 7px; border: 1px rgba(187,187,187,0.35) solid; border-radius: 4px; background: transparent; color: #bbb; font-size: 11px; cursor: pointer; white-space: nowrap; transition: all 0.12s; }
.ai_task_history_list .item_reinput_btn:hover { border-color: rgba(91,134,255,0.4); color: #aaa; }
.ai_task_history_list .item_reinput_btn:hover::before{content:''; display:block; position:absolute; bottom: calc(100% - 2px); left: calc(50% - 4px); border-left: 4px transparent solid; border-right: 4px transparent solid; border-top:5px solid #000;}
.ai_task_history_list .item_reinput_btn:hover::after{content:attr(data-tooltip); display:block; position:absolute; bottom: calc(100% + 2px); left: 50%; min-width:8.5em; padding:.4em .7em .5em;; border-radius:4px; font-size:11px; background:#000; transform:translateX(-50%); white-space: pre-wrap; word-break: keep-all; box-shadow: 0 0 10px rgba(0,0,0,.5);}
.ai_task_history_list .history_item:first-child .item_reinput_btn:hover::before{bottom:auto; top:calc(100% - 2px); z-index:1; transform:rotate(180deg);}
.ai_task_history_list .history_item:first-child .item_reinput_btn:hover::after{bottom:auto; top:calc(100% + 2px); z-index:1;}
.ai_task_history_list .history_item:not(.clickable) .item_reinput_btn { visibility: hidden; pointer-events: none; }
.history_empty_msg { flex: 1; display: none; align-items: center; justify-content: center; color: #555; font-size: 13px; }
/* 페이지네이션 */
.history_pagination { display: flex; justify-content: center; align-items: center; gap: 4px; padding: 12px 20px 18px; flex-shrink: 0; flex-wrap: wrap; }
.history_pagination .page_btn { width: 28px; height: 28px; border: 1px rgba(255,255,255,0.1) solid; background: transparent; color: #969696; font-size: 12px; cursor: pointer; border-radius: 2px; }
.history_pagination .page_btn:hover { border-color: #0066ff88; color: #fff; }
.history_pagination .page_btn.active { border-color: #5b86ff; background: #0066ff22; color: #5b86ff; }
.history_pagination .page_sep { color: #444; font-size: 11px; line-height: 28px; padding: 0 1px; user-select: none; }
/* 모바일 */
@media (max-width: 600px) {
.history_layer_inner { width: 100vw; height: 100vh; border: none; border-radius: 0; }
.ai_task_history_list .history_item { grid-template-columns: 16px 60px 1fr 40px; }
.ai_task_history_list .item_elapsed { display: none; }
.ai_task_history_list .item_reinput_btn { display: none; }
.ai_task_history_list .item_created { font-size: 10px; }
.ai_task_history_list .item_type_label { font-size: 10px; padding: 1px 5px; }
}
/* ===================== // AI 생성 작업 전체 기록 레이어 ===================== */
/* veil 스타일은 GediP3 진행 단계 레이어 섹션(.ai3_veil) 참고 */
#layerPromptInputGuide { z-index:21000; width:min(500px, calc(100% - 20px)); border-radius:22px; overflow:hidden; background:#2a2f39; box-shadow:0 28px 60px rgba(0,0,0,.45); }
#layerPromptInputGuide .editor_layer_wrap { position:relative; display:flex; flex-direction:column; background:#2a2f39; border:1px solid rgba(255,255,255,.06); border-radius:22px; }
#layerPromptInputGuide .layer_top_area { position:relative; display:flex; flex-direction:column; align-items: flex-start; gap:10px; height: auto; padding:20px 25px;}
#layerPromptInputGuide .layer_top_area .title{ padding-left:0; font-weight:700; line-height:1.3; }
#layerPromptInputGuide .desc { margin:0; font-size:13px; line-height:1.7; color:#97a0b5; word-break:keep-all; }
#layerPromptInputGuide .desc .blue { color:#7f96ff; font-weight:700; }
#layerPromptInputGuide .layer_contents_area { padding:20px 28px 25px; max-height:560px; overflow-y:auto; }
#layerPromptInputGuide .layer_contents_area::-webkit-scrollbar { width:6px; }
#layerPromptInputGuide .layer_contents_area::-webkit-scrollbar-thumb { border-radius:10px; background:rgba(255,255,255,.1); }
#layerPromptInputGuide .sub_title { display:flex; align-items:center; gap:10px; margin:0 0 14px; font-size:16px; line-height:1.4; font-weight:700; color:#fff; }
#layerPromptInputGuide .sub_title::before { content:attr(data-count-num); display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:8px; background:#5a6dff; font-size:14px; line-height:1; font-weight:700; color:#fff; box-shadow:0 8px 18px rgba(90,109,255,.32); }
#layerPromptInputGuide .content_box{margin-bottom:24px;}
#layerPromptInputGuide .box { padding:18px 16px 16px; border:1px solid rgba(145,157,183,.22); border-radius:14px; background:#232833; }
#layerPromptInputGuide .box b { display:block; margin-bottom:.3em; font-size:13px; line-height:1.6; font-weight:700; color:#7f96ff; }
#layerPromptInputGuide .box p { margin-bottom:.8em; font-size:13px; line-height:1.65; color:#f3f6fd; word-break:keep-all; }
#layerPromptInputGuide .box p:last-child { margin-bottom:0; }
#layerPromptInputGuide .guide_image_desc { margin-bottom:16px; font-size:13px; line-height:1.75; color:#97a0b5; word-break:keep-all; }
#layerPromptInputGuide .guide_image_desc.tip{margin-top:.5em; padding-left:.5em;}
#layerPromptInputGuide .img_list { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin:0; padding:0; list-style:none; }
#layerPromptInputGuide .img_list li { overflow:hidden; border-radius:14px; background:#232833; box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); }
#layerPromptInputGuide .img_list img { display:block; width:100%; background:#eef1f6; }
#layerPromptInputGuide .img_list .info { padding:10px 12px 12px; background:#232833; }
#layerPromptInputGuide .img_list .info b { display:block; font-size:14px; line-height:1.35; font-weight:700; color:#fff; }
#layerPromptInputGuide .img_list .info span { display:block; margin-top:4px; font-size:12px; line-height:1.45; color:#97a0b5; word-break:keep-all; }