@charset "utf-8";

/* =========================================================================================================
* AI Contents Generation CSS
=========================================================================================================== */

/* ---------------- Top Pannel --------------- */
#top_pannel .color_theme .ai_text_gen {display: inline-block; line-height: 34px; padding: 0 15px 0 38px; margin-right: 8px; border-radius: 2px; font-size: 15px; color: #fff; font-family: 'Pretendard'; white-space: nowrap; background: #2E3238 url(/images/ai_v2/icon_aidraft_off.png) 10px calc(50% - 2px) no-repeat;}
#top_pannel .color_theme .ai_text_gen.disabled {cursor: default; opacity: .5; pointer-events: none;}
[data-member-type='ED_FREE'] #top_pannel .color_theme .ai_text_gen::after { display: inline-block; content: ''; width: 16px; height: 16px; background: url(/images/editor/icon_paid_user.png) 50% 50% no-repeat; background-size: cover; position: relative; top: 2px; margin-left: 6px; }


/* ---------------- Layer --------------- */
.editor_layer_pop.skin_main_devide {z-index:20100; width: min(1000px, 100%); height: max(calc(100vh - 100px), 500px);}
.editor_layer_pop.skin_main_devide .editor_layer_wrap{height:100%;}
.editor_layer_pop.skin_main_devide .layer_contents_area{position:relative; padding:0 0 0 340px; height: 100%;}
.editor_layer_pop.skin_main_devide .skin_area{position:absolute; top:0; left:0; bottom:0; width:340px; overflow-y: hidden; background-color: rgba(255,255,255,.05);}
.editor_layer_pop.skin_main_devide .skin_area::before,
.editor_layer_pop.skin_main_devide .skin_area::after{content:''; display: block; position:absolute; left:0; right:0; z-index: 20010; height:60px; background: linear-gradient(to bottom, rgba(57, 60, 66, .8) 0%, transparent 100%);}
.editor_layer_pop.skin_main_devide .skin_area::before{top:55px; height:20px; }
.editor_layer_pop.skin_main_devide .skin_area::after{bottom:0; transform:rotate(180deg); height:20px; }
.editor_layer_pop.skin_main_devide .skin_container { position:absolute; inset:0; padding:20px 0; margin-top:56px; overflow-y:scroll; }
.editor_layer_pop.skin_main_devide .skin_wrap{width:min(200px, 100%); margin:0 auto; opacity:0; color: #333; transition:opacity .2s; transition-delay: .05s;}
.editor_layer_pop.skin_main_devide .skin_wrap.show{opacity:1;}
.editor_layer_pop.skin_main_devide .skin_wrap .ai_cmt{display: none;}
.editor_layer_pop.skin_main_devide .skin_wrap .design_block{position:relative; zoom:25%; pointer-events: none;}
.editor_layer_pop.skin_main_devide .skin_wrap .design_block::after{content:''; display: block; position:absolute; top:0; left:0; right:0; bottom:0; z-index:20200;}
.editor_layer_pop.skin_main_devide .skin_area .img_area{padding-bottom: initial;}
.editor_layer_pop.skin_main_devide .skin_area table{pointer-events: none;}
.editor_layer_pop.skin_main_devide .skin_area [data-block-type="video"],
.editor_layer_pop.skin_main_devide .skin_area [data-block-type="gif"]{position:relative;}
.editor_layer_pop.skin_main_devide .skin_area [data-block-type="video"] .design_block,
.editor_layer_pop.skin_main_devide .skin_area [data-block-type="gif"] .design_block{opacity:0.6;}
.editor_layer_pop.skin_main_devide .skin_area [data-block-type="video"]::before,
.editor_layer_pop.skin_main_devide .skin_area [data-block-type="gif"]::before{content:''; display: block; position:absolute; left:5px; top: 25px; z-index: 100; width: 25px; height: 25px; border-radius: 13px; font-size:12px; line-height:25px; color: transparent; background: #777 url(/images/editor/ico_lock.svg) 5px calc(50% - 1px) / auto 60% no-repeat; transition:width .2s, color .2s .1s;}
.editor_layer_pop.skin_main_devide .skin_area [data-block-type="video"]:hover::before{content: '비디오 블록은 자동분할됩니다.'; padding-left:25px; width: 15.5em; color: #fff;}
.editor_layer_pop.skin_main_devide .skin_area [data-block-type="gif"]:hover::before{content: 'GIF 블록은 자동분할됩니다.'; padding-left: 25px; width: 14.4em; color: #fff;}
.editor_layer_pop.skin_main_devide .skin_area :first-child[data-block-type="video"]::before,
.editor_layer_pop.skin_main_devide .skin_area :first-child[data-block-type="gif"]::before{top: 5px;}
.editor_layer_pop.skin_main_devide .skin_area .ai_calculating { position:absolute; inset:0; z-index:22000; display:flex; justify-content:center; align-items:center; margin-top:-120px; background-color:rgba(0,0,0,0.94); }
.editor_layer_pop.skin_main_devide .skin_area .ai_calculating .contents { font-size:21px; color:#fff; font-weight:500; }
.editor_layer_pop.skin_main_devide .skin_area .ai_calculating .contents:before { display:block; content:''; padding-bottom:90px; background:url('/images/motion_img/loading_pulse.png') 50% 0 no-repeat; }

.editor_layer_pop.skin_main_devide .main_area { height:100%; padding:0; display:flex; flex-direction: column; justify-content: space-between; }
.editor_layer_pop.skin_main_devide .main_area .contents { flex:1; display:flex; flex-direction: column; justify-content: space-between; padding:20px 25px 25px; overflow-y:auto; overflow-x:hidden; }
.editor_layer_pop.skin_main_devide .main_area .contents_foot { padding-top:10px; }
.editor_layer_pop.skin_main_devide .main_area .layer_top_area { justify-content:center; border-bottom:none; }
.editor_layer_pop.skin_main_devide .main_area .layer_top_area .title { padding:0; }

.editor_layer_pop.skin_main_devide .flex_list{padding: 5px 15px;}
.editor_layer_pop.skin_main_devide .flex_list li{display: flex; align-items: center; gap: 15px; position: relative; margin:2px 0; padding-top: 0;}
.editor_layer_pop.skin_main_devide .flex_list .title1{padding: 0;}
.editor_layer_pop.skin_main_devide .flex_list .desc{flex: 1; display: flex; justify-content: flex-end; align-items: center; font-size: 14px; color: #A3A3A4; font-weight: 400;}
.editor_layer_pop.skin_main_devide .flex_list .desc .ico_tooltip{width:1em; height:1em; margin-right:.3em;}
.editor_layer_pop.skin_main_devide .flex_list .desc .ico_tooltip .info::before{left: calc(50% + 3px);}
.editor_layer_pop.skin_main_devide .flex_list > li:after{content: none;}
.editor_layer_pop.skin_main_devide .token_select label { font-size:16px; color:#fff; }
.editor_layer_pop.skin_main_devide .token_select label:after { display:block; content:'※ AI 처리량에 따라 토큰 사용량이 달라집니다.'; font-size:13px; font-weight:400; color:#888; }
.editor_layer_pop.legacy-token-1000 .token_select label:after { content:'※ 토큰 충전 방식으로 전환되기 전에는 1천 토큰이 차감됩니다.'; }
.editor_layer_pop.skin_main_devide .token_select label b { color:#3F88F5; font-size:22px; font-weight:900; }
.editor_layer_pop.skin_main_devide .token_select input[type='checkbox'] { width:20px; height:20px; position:relative; top:-2px; }
.editor_layer_pop.skin_main_devide .token_select .token_remaining_num { font-size:15px; color:#fff; }
.editor_layer_pop.skin_main_devide .token_select {}
.editor_layer_pop.skin_main_devide .basic_btn_area{flex-direction: column; gap:.8em; padding:0;}
.editor_layer_pop.skin_main_devide .ai_text_ex_btn { display:inline-block; vertical-align:top; margin-top:10px; padding-right:30px; line-height:40px; font-size:15px; color:#aaa; cursor:pointer; }
.editor_layer_pop.skin_main_devide .ai_text_ex_btn:hover,
.editor_layer_pop.skin_main_devide .ai_text_ex_btn.on { color:#fff; }
.editor_layer_pop.skin_main_devide .ai_text_ex_btn:before { content:'add_circle'; display:inline; vertical-align:top;margin-right:5px; font-family: 'Material Symbols Rounded'; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 0, 'wght' 400, 'opsz' 24; font-size: 22px; }
.editor_layer_pop.skin_main_devide .ai_text_ex_btn.on:before { font-variation-settings: 'FILL' 1, 'wght' 400, 'opsz' 24; }
.editor_layer_pop.skin_main_devide .ai_text_ex_cont { display:none; margin-top:10px; }

.editor_layer_pop.skin_main_devide .checkbox_normal { width:16px; height:16px; position:relative; top:-1px; margin-right:5px; }

/* AI 콘텐츠 생성 미리보기 패널에서 스킨 영역 */
.editor_layer_pop.skin_main_devide .design_block_preview { position:relative; }
.editor_layer_pop.skin_main_devide .design_block_preview::before { content:''; display:block; cursor:pointer; position:absolute; inset:0; z-index:21000; }
.editor_layer_pop.skin_main_devide .design_block_preview.selected::before { outline:3px #ff6600 dashed; outline-offset:-2px; box-shadow:inset 0 0 0 2px #fff; }
.editor_layer_pop.skin_main_devide .design_block_preview:not(.disabled)::after { content:'check_small'; display:block; cursor:pointer; position:absolute; left:-40px; top:50%; transform:translateY(-50%); font-family: 'Material Symbols Rounded'; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 0, 'wght' 600, 'opsz' 24; font-size: 30px; color:#767676; }
.editor_layer_pop.skin_main_devide .design_block_preview.selected::after { color:#ff6600; }
.editor_layer_pop.skin_main_devide .design_block_preview.disabled { cursor: default; pointer-events: none; opacity:0.3; }

.editor_layer_pop.skin_main_devide .design_block_preview .block_price { display:none; position:absolute; top:0; left:calc( 100% + 10px ); width:52px; font-size:0; }
.editor_layer_pop.skin_main_devide .design_block_preview .block_price > li { font-family: 'Material Symbols Rounded'; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 1, 'wght' 600, 'opsz' 24; font-size: 18px; color:#FACC15; cursor:default; }

.editor_layer_pop.skin_main_devide .block_select_info { position:relative; z-index:21000; display:flex; justify-content:center; padding-top:20px; font-size:14px; height:53px; margin:1px; text-align:center; background:#393c42; color:#ccc; }
.editor_layer_pop.skin_main_devide .block_select_info .checkbox_normal { accent-color: #ff4a00; }

.editor_layer_pop.skin_main_devide .ai_text_warning { font-size:14px; color:#ff4a00; font-weight:400; }
.editor_layer_pop.skin_main_devide .ai_text_warning:before { content:'release_alert'; display:inline-block; vertical-align:top; position:relative; top:-3px; margin-right:5px; font-family: 'Material Symbols Rounded'; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 1, 'wght' 600, 'opsz' 24; font-size: 18px; color:#ff4a00; }
.editor_layer_pop.skin_main_devide .auto_correction { float:right; margin-top:18px; }
.editor_layer_pop.skin_main_devide .auto_correction label { color:#fff; }

.editor_layer_pop.skin_main_devide .example_tab { display:flex; margin:0 -3px; }
.editor_layer_pop.skin_main_devide .example_tab > li { padding:0 3px; }
.editor_layer_pop.skin_main_devide .example_tab > li > a { display:block; vertical-align:top; white-space: nowrap; font-size:14px; line-height:32px; padding:0 12px; border-radius:999px; color:#C0C0C0; border:1px transparent solid; }
.editor_layer_pop.skin_main_devide .example_tab > li > a.on { color:#fff; border-color:#fff; }
.editor_layer_pop.skin_main_devide {}
.editor_layer_pop.skin_main_devide .example_cont { padding:8px 0 0; }
.editor_layer_pop.skin_main_devide .example_cont > li { padding:4px 0; }
.editor_layer_pop.skin_main_devide .example_cont > li > p { padding:10px 15px; background:#3e4248; font-size:14px; line-height:1.5; font-weight:300; color:#ffffff;  border-radius:8px; cursor:pointer; transition: all 0.2s; }
.editor_layer_pop.skin_main_devide .example_cont > li > p::before { display:block; padding-bottom:4px; content: attr(data-title); font-size:15px; font-weight:500;  color:#4793e4; }
.editor_layer_pop.skin_main_devide .example_cont > li > p:hover { background-color:#0066FF; border-color:#0066FF; color:#fff; }
.editor_layer_pop.skin_main_devide .example_cont > li > p:hover::before { color:#002a57; }
.editor_layer_pop.skin_main_devide .example_cont {}
.editor_layer_pop.skin_main_devide {}

.editor_layer_pop.cal-complete .skin_area .ai_calculating { display:none !important; }
.editor_layer_pop.cal-complete .design_block_preview .block_price { display:flex !important; flex-wrap:wrap; }
.editor_layer_pop.skin_main_devide:not(.cal-complete) .ai_text_warning { display:none !important; }
.editor_layer_pop.skin_main_devide.cal-complete .skin_area { /*overflow-y:scroll;*/ }
.editor_layer_pop.cal-complete.block-overflow .design_block_preview.selected::after { outline-color:#ff4a00; }

/* 생성중 레이어 */
#modal_bg.ai_text_gen { background:#000000; }

.ai_text_generating_layer { position:fixed; inset:0; z-index:21000; padding:60px 0; overflow-y:auto; display:flex; justify-content:center; }
.ai_text_generating_layer .container { margin:auto 0; text-align:center; font-family:Pretendard; font-size:22px; color:#fff }
.ai_text_generating_layer .title1 { font-size:40px; font-weight:700; color:#fff; }
.ai_text_generating_layer .contents1 { display:inline-block; vertical-align:top; padding:5px 30px; border-radius:999px; font-size:22px; font-weight:500; background-color:#333; color:#dfc3a5; }
.ai_text_generating_layer .contents1 .llm_res_time { display:inline-block; width:300px; text-align:center; }
.ai_text_generating_layer .contents1 .llm_res_time.calculating { text-align:left; padding-left:10px; }
.ai_text_generating_layer .contents1 .llm_res_time.calculating::after { content:''; animation: text_dots 4s steps(3, end) infinite; }
.ai_text_generating_layer .contents2 { text-align:center; margin-top:20px; color:#999; }
.ai_text_generating_layer .contents2:before { display:inline-block; vertical-align:top; margin-right:5px; content:'lightbulb_outline'; font-family: 'Material Symbols Rounded'; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 1, 'wght' 600, 'opsz' 24; font-size: 22px; color: #FACC15; }
.ai_text_generating_layer .ai_text_step { display:flex; max-width:760px; margin:40px auto 0; }
.ai_text_generating_layer .ai_text_step > li { position:relative; padding:0 10px; border-left:1px #232323 solid; width:100px; height:230px; overflow:hidden; text-align:left; transition:all 0.4s; text-align:center; }
.ai_text_generating_layer .ai_text_step > li:first-child { border:none !important; }

.ai_text_generating_layer .ai_text_step .num { font-size:40px; font-weight:900; line-height:1; color:#333; }
.ai_text_generating_layer .ai_text_step .stle1 { position:relative; z-index:10; margin-top:10px; font-size:22px; color:#fff; line-height:1.3; white-space: nowrap; display:none; }
.ai_text_generating_layer .ai_text_step .stle1::after { content:''; animation: text_dots 4s steps(3, end) infinite; }
.ai_text_generating_layer .ai_text_step .video_wrap { opacity:0; width:160px; height:150px; overflow:hidden; position:absolute; left:50%; bottom:0; transform:translateX(-50%); transition:opacity 0.4s; }
.ai_text_generating_layer .ai_text_step .video_wrap video { width:100%; height:100%; pointer-events: none; }

.ai_text_generating_layer .ai_text_step > li.active { width:260px; text-align:left; border-width:4px; border-color:#183756; }
.ai_text_generating_layer .ai_text_step > li.active .stle1 { display:block; color:#3399FF; }
.ai_text_generating_layer .ai_text_step > li.active .num { color:#3399FF; }
.ai_text_generating_layer .ai_text_step > li.active .video_wrap { opacity:1; }

.ai_text_generating_layer .ai_text_step > li.complete { opacity:1; border-left:1px #bbb solid; }
.ai_text_generating_layer .ai_text_step > li.complete::after { display:block; position:absolute; left:0; right:0; bottom:26px; content:'check'; font-family: 'Material Symbols Rounded'; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 0, 'wght' 600, 'opsz' 24; font-size: 60px; color:#bbb; }
.ai_text_generating_layer .ai_text_step > li.complete .num { color:#bbb; }

.ai_text_generating_layer [data-motion-unit] { opacity:0; transition: all 1.2s; }
.ai_text_generating_layer [data-motion-unit='2'] { transition: all 0.4s; }
.ai_text_generating_layer [data-motion-unit='3'] { transform:translateX(40px); }
.ai_text_generating_layer [data-motion-unit].active { opacity:1; transform:translateX(0); }

.ai_text_generating_layer .ai_text_swiper_wrap { display:none; width:1024px; margin-top:40px; position:relative; }
.ai_text_generating_layer .ai_text_swiper_wrap .swiper-button-prev { left:-80px; top:300px; color:#666; }
.ai_text_generating_layer .ai_text_swiper_wrap .swiper-button-next { right:-80px; top:300px; color:#666; }
.ai_text_generating_layer .ai_text_swiper_wrap .swiper-button-prev:hover,
.ai_text_generating_layer .ai_text_swiper_wrap .swiper-button-next:hover { color:#fff; }
.ai_text_generating_layer .ai_text_swiper_wrap.on { display:block; }
.ai_text_generating_layer .ai_text_swiper_wrap .swiper-slide { text-align:center; }
.ai_text_generating_layer .ai_text_swiper_wrap .swiper-slide::after { display:block; content:''; position:absolute; left:50%; top:300px; transform:translate(-50%, -50%); width:70px; height:70px; background:url('/images/ai_text/arr_next_step.png') 50% 50% no-repeat;  }
.ai_text_generating_layer .ai_text_swiper_wrap .prompt { display:inline-flex; vertical-align:top; text-align:left; color:#fff; padding:30px 0; margin-bottom:10px; }
.ai_text_generating_layer .ai_text_swiper_wrap .prompt::before { display:inline-flex; align-items:center; vertical-align:top; content:'예시'; position:relative; top:-2px; padding:1px 15px 0; margin-right:15px; background-color:#333333; font-size:22px; font-weight:500; color:#dfc3a5; border-radius:8px; line-height:40px; }
.ai_text_generating_layer .ai_text_swiper_wrap .img_list { display:flex; justify-content:space-between; }
.ai_text_generating_layer .ai_text_swiper_wrap .img_list > li { padding:0; width:460px; }
.ai_text_generating_layer .ai_text_swiper_wrap .img_list > li img { width:100%; }
.ai_text_generating_layer .ai_text_swiper_wrap .img_list > li.img_after { }
.ai_text_generating_layer .ai_text_swiper_wrap {}

.ai_text_generating_layer {}
.ai_text_generating_layer {}

@keyframes text_dots {
  0%   { content: ''; }
  12.5%  { content: '.'; }
  25%  { content: '..'; }
  37.5%  { content: '...'; }
  50%  { content: '....'; }
  62.5%  { content: '...'; }
  75% { content: '..'; }
  87.5% { content: '.'; }
  100% { content: ''; }
}

/* ----------------------- 기타 ------------------------- */
#modal_bg.z-up { z-index:30000; }

[data-member-type='ED_FREE'] #left_navi > li[data-menu-name="ai_text"]::after { display: inline-block; content: ''; width: 12px; height: 12px; background: url(/images/editor/icon_paid_user.png) 50% 50% no-repeat; background-size: cover; position: absolute; top: 2px; left: 10px; cursor:pointer; }
.editor_layer_pop.service-end [data-token-field] label { cursor:default; pointer-events: none; opacity:0.5; }
.editor_layer_pop.service-end [data-token-field] label em { color:#ffffff; }



/* ----------------------- 템플릿 보정 ------------------------- */
[data-block-name=delivery_A001] .contents_ul > li .block_options p:first-child::before { display:none; }