@import url("reset.css");


:root {
    /* Layout */
    --header_h: 72px;
    --width: 832px;
    --padding: 20px;

    /* Colors */
    --point-color-1: #173E99;
    --point-color-2: #422b79;
    --gd_bg:linear-gradient(52deg, rgba(107, 141, 255, 1) 0%, rgba(39, 104, 255, 1) 50%, rgba(75, 38, 164, 1) 100%);
}

@media (max-width: 768px) {
    :root {
        --header_h: 50px;
    }
}

[data-delay] {position: relative; transition: all 1s ease; opacity:0;}
[data-direction="left"]{left:-40px;}
[data-direction="right"]{right:-40px;}
[data-direction="top"]{top:-40px;}
[data-direction="bottom"]{bottom:-40px;}
.section_on [data-delay]{opacity:1;}
.section_on [data-direction="left"]{left:0;}
.section_on [data-direction="right"]{right:0;}
.section_on [data-direction="top"]{top:0;}
.section_on [data-direction="bottom"]{bottom:0;}


/* header */
.header{position:fixed; left:0; top:0; width:100%; padding:0 2%; height:var(--header_h); display:flex; align-items: center; background-color:#fff; z-index:100;}
.header_logo{display:flex; align-items: center; gap:16px;}
.header_logo .btn_menu_open { width: 24px; aspect-ratio: 1/1; background: url(../img/menu_arrow.svg) no-repeat center center / 100% 100%; display: block; transition: transform 0.3s ease-out; }
.header_logo .btn_menu_open.active { transform: rotate(180deg); }
.header_right{margin-left:auto; display:flex; align-items: center; gap:24px;}
.header_util_menu{display:flex; align-items: center; gap:16px;}
.header_util_menu li a{padding:6px 0; display:flex; gap:8px; font-size:1rem; font-weight:500; color:#555;}
.header_util_menu li a:after{width:14px; aspect-ratio: 1/1; background:url(../img/ic_link.svg) no-repeat center center / 100% 100%; display:block; content:"";}
.header_login_menu{display:flex; gap:8px; }
.header_login_menu li a{padding:0 16px; height:32px; line-height:30px; border:1px solid #ddd; box-sizing:border-box; border-radius:2em; display:block;  font-size:0.875rem; color:#2d2d2d;}
.header_login_menu li a.header_btn_login{background:var(--gd_bg); color:#fff; border:none;}

.lnb_wrap { position: fixed; left: 0; top: var(--header_h); padding: 8px 40px; max-width: 280px; width: 100%; height: calc(100vh - var(--header_h)); background-color: #fff; z-index: 100; transition: all 0.3s ease-out;  visibility: hidden; opacity:0;  overflow:auto;}
.lnb_wrap.active{visibility: visible; opacity:1;}
.lnb{border-bottom:1px solid #ddd;}
.lnb>ul>li{margin-bottom:8px;}
.lnb>ul>li>a{position:relative; padding-right:20px;  min-height:45px; display:flex; align-items: center; gap:8px; font-size:1rem; font-weight:500; }
.lnb>ul>li>a .control_open{position:absolute; right:0; top:50%; transform:translateY(-50%); width:14px; aspect-ratio: 1/1; background:url(../img/icon_add.svg) no-repeat center center / 100% 100%; display:block; }
.lnb>ul>li>a:before{width:30px; aspect-ratio: 1/1; display:block; content:"";}
.lnb>ul>li.icon_1>a:before{background:url(../img/menu_icon_1.png) no-repeat center center / 100% 100%;}
.lnb>ul>li.icon_2>a:before{background:url(../img/menu_icon_2.png) no-repeat center center / 100% 100%;}
.lnb>ul>li.icon_3>a:before{background:url(../img/menu_icon_3.png) no-repeat center center / 100% 100%;}
.lnb>ul>li.icon_4>a:before{background:url(../img/menu_icon_4.png) no-repeat center center / 100% 100%;}
.lnb>ul>li.icon_5>a:before{background:url(../img/menu_icon_5.png) no-repeat center center / 100% 100%;}
.lnb_wrap .creation_history{padding-top:8px;}
.lnb_wrap .creation_history>ul>li .tit{position:relative; height:45px; display:flex; align-items: center; gap:8px; }
.lnb_wrap .creation_history>ul>li .tit .s_list_open{display:flex; align-items: center; gap:8px; font-weight:500;}
.lnb_wrap .creation_history>ul>li .tit .s_list_open:before{width:30px; aspect-ratio: 1/1; display:block; content:"";}
.lnb_wrap .creation_history>ul>li.icon_1 .s_list_open:before{background:url(../img/menu_icon_5.png) no-repeat center center / 100% 100%;}
.lnb_wrap .creation_history>ul>li.icon_2 .s_list_open:before{background:url(../img/menu_icon_6.png) no-repeat center center / 100% 100%;}
.lnb_wrap .creation_history>ul>li .tit .s_list_open:after{width:16px; aspect-ratio: 1/1; background:url(../img/arrow2.svg) no-repeat center center / 100% 100%; display:block; content:"";}
.lnb_wrap .creation_history>ul>li .control_open{width:14px; aspect-ratio: 1/1; background:url(../img/icon_add.svg) no-repeat center center / 100% 100%; display:block; }
.lnb_wrap .creation_history>ul>li .control_area{position:absolute; right:0; top:50%; width: 14px; transform:translateY(-50%); }
.lnb_wrap .creation_history>ul>li .control_area .inner{position:relative;}
.lnb_wrap .creation_history>ul>li .control_list{position:absolute; right:0; top:0; z-index:10; padding:12px 16px;  width:78px; background-color:#f0f0f0; border-radius:8px;  visibility: hidden; opacity:0; transition: all 0.3s ease-out;}
.lnb_wrap .creation_history>ul>li .control_list.active{visibility: visible; opacity:1;}
.lnb_wrap .creation_history>ul>li .control_list li{margin-bottom:18px;}
.lnb_wrap .creation_history>ul>li .control_list li:last-child{margin-bottom:0;}
.lnb_wrap .creation_history>ul>li .control_list li button{width:100%; display:flex; justify-content: space-between; align-items: center; font-size:1rem; color:#343434;  line-height:1;}
.lnb_wrap .creation_history>ul>li .control_list li button:after{width:14px; aspect-ratio: 1/1;display:block; content:""; }
.lnb_wrap .creation_history>ul>li .control_list li.ic_modify button:after{background:url(../img/ic_modify.svg) no-repeat center center / 100% 100%;}
.lnb_wrap .creation_history>ul>li .control_list li.ic_delete button:after{background:url(../img/ic_delete.svg) no-repeat center center / 100% 100%;}
.lnb_wrap .creation_history .s_list{padding:8px;}
.lnb_wrap .creation_history .s_list ul li{margin-bottom:12px;}
.lnb_wrap .creation_history .s_list ul li:last-child{margin-bottom:0;}
.lnb_wrap .creation_history .s_list ul li button{display:flex; gap:8px; font-size:1rem; color:#8e8e8e; text-align:left; letter-spacing:-0.5px;}
.lnb_wrap .creation_history .s_list ul li button:before{display:block; content:"-";}

.container{margin:0 auto; max-width:var(--width); width:100%; padding:var(--header_h) var(--padding) 0; min-height:calc(100vh - var(--header_h));}

/* main */
.main_title{padding-top:88px; font-size:2.5rem; line-height:1.3; text-align:center; }
.main_title strong{font-weight:700;}
.main_input_wrap{margin-top:60px; padding:16px; border-radius:24px; border:1px solid #ebebeb; }
.main_input_box textarea{width:100%; height:120px; overflow:auto; font-size:1.125rem; border:none; }
.main_input_wrap .main_btn_list{margin-top:24px; display:flex; }
.main_input_wrap .main_btn_list .btn_upload{padding:0 10px; height:36px; display:flex; align-items: center; background-color:#e4e4e4; border-radius:8px;  font-size:0.875rem; color:#555; gap:8px;}
.main_input_wrap .main_btn_list .btn_upload:before{width:14px; aspect-ratio: 1/1; background:url(../img/btn_upload.svg) no-repeat center center / 100% 100%; display:block; content:""; }
.main_input_wrap .main_btn_list .btn_create{margin-left:auto; padding:0 25px; height: 36px; background:var(--gd_bg); border-radius:8px; font-size:0.875rem; color:#fff; }

.rank_section{position:relative; margin-top:40px;}
.rank_section .rank_title{position:relative; margin-bottom:8px;  padding-right:60px; display:flex; align-items: center;}
.rank_section .rank_title>div{width:calc(100% - 250px);}
.rank_section .rank_title h3{margin-bottom:4px; font-size:1.125rem; font-weight:600; }
.rank_section .rank_title p{font-size:16px; color:#777;}
.rank_section .rank_title .rank_btn_more{position:absolute; right:0; top:50%; transform:translateY(-50%) rotate(180deg); width:24px; aspect-ratio: 1/1; background:url(../img/menu_arrow.svg) no-repeat center center / 100% 100%; display:block; text-indent:-9999px; overflow:hidden; transition: all 0.3s ease-out;}
.rank_section.close .rank_title .rank_btn_more{transform:translateY(-50%) rotate(0deg);}
.rank_section .rank_list{padding:16px 8px; display:flex; gap:48px; justify-content: space-between;}
.rank_section .rank_list ul{width:calc((100% - 48px) /2);}
.rank_section .rank_list ul li{margin-bottom:8px; display:flex; font-size:1rem; letter-spacing:-0.5px; letter-spacing: -0.015em; align-items: center;}
.rank_section .rank_list ul li .rank_num{flex-shrink: 0; width:20px;}
.rank_section .rank_list ul li .rank_txt{width:calc(100% - 60px); text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; overflow: hidden; }
.rank_section .rank_list ul li .rank_status{margin-left:auto; width:16px; aspect-ratio: 1/1; background:url(../img/raking_minus.svg) no-repeat center center; display:block; }
.rank_section .rank_list ul li .rank_status.up{background:url(../img/raking_arrow2.svg) no-repeat center center;}
.rank_section .rank_list ul li .rank_status.down{background:url(../img/raking_arrow.svg) no-repeat center center;}
.rank_section.close .rank_list{position:absolute; right:72px; top:50%; max-width:200px; width:100%;  padding:0; transform:translateY(-50%);}
.rank_section.close .rank_list ul:last-child{display:none;}
.rank_section.close .rank_list ul li{display:none;}
.rank_section.close .rank_list ul li:first-child{margin-bottom:0; display:flex;}

.chat_section{position:relative; margin-top:40px; padding-bottom:120px;}
.chat_section>div{margin-bottom:80px;}
.chat_section_title{display:flex; align-items: center; }
.chat_section_title h3{font-size:1.125rem; color:var(--point-color-1);}
.chat_section_title .title{margin-top:8px; font-size:1.5rem; font-weight:600;}
.chat_section_title .control_list{margin-left:auto; }
.chat_section_title .control_list ul{display:flex; gap:16px;}
.chat_section_title .control_list ul button{display:flex; gap:4px;}
.chat_section_title .control_list ul button:after{width:14px; aspect-ratio: 1/1;  display:block; content:"";}
.chat_section_title .control_list ul .ic_modify button:after{background: url(../img/ic_modify.svg) no-repeat center center / 100% 100%;}
.chat_section_title .control_list ul .ic_delete button:after{background: url(../img/ic_delete.svg) no-repeat center center / 100% 100%;}
.chat_section .chat_request_box{position:relative; padding-right:20px; font-size:1rem; line-height:1.7; letter-spacing:0.015em; }
.chat_section .chat_request_box:before{position:absolute; right:0; top:50%; z-index:1; width:16px; aspect-ratio: 16/24; background:url(../img/balloon_arrow.svg) no-repeat center center / 100% 100%; display:block; content:""; transform:translate(-50%); border-radius:1rem; }
.chat_section .chat_request_box .chat_txt_box{position:relative; z-index:2;  margin-left:auto; padding: 16px 24px; max-width:536px;background-color:#F5F7FA; border-radius:1rem;}
.chat_section .chat_answer_box .chat_txt_box{position:relative; z-index:2;  margin-right:auto; padding: 16px 24px; max-width:536px;background-color:#F5F7FA; border-radius:1rem;}
.chat_section .chat_answer_box{position:relative; margin-left:20px; padding:24px; background-color:#fff; border-radius:1rem; box-shadow:0 0 2px rgba(142,142,142);  line-height:1.6; letter-spacing:-0.015em; color:#343434;}
.chat_section .chat_answer_box h3{font-size: 1.125rem;}
.chat_section .chat_answer_box:before{position:absolute; left:-16px; top:24px; z-index:1; width:16px; aspect-ratio: 16/24; background:url(../img/balloon_arrow2.png) no-repeat 0 center; display:block; content:"";}
.chat_section .chat_preview_area{padding:16px; display:flex; gap:40px;}
.chat_section .chat_preview_area .chat_img_box{width:40.5%;}
.chat_section .chat_option_area{margin-left:auto; width:54.5%; font-size:1rem; color:#343434; line-height:1.7; }
.chat_section .chat_option_area .chat_guide_txt{margin-bottom:16px;}
.chat_section .chat_option_item .tip_area{position:relative; display:inline-block;}
.chat_section .chat_option_item h4{margin-bottom:16px; display:flex; align-items: center; gap:8px; }
.chat_section .chat_option_item .chat_option_btn_more{width:14px; aspect-ratio: 1/1; background:url(../img/ic_info.svg) no-repeat center center / 100% 100%; display:block; text-indent:-9999px; overflow:hidden;}
.chat_section .chat_option_item .tip_popup{position:absolute; left:calc(100% - 14px); top:0; z-index:10; padding:16px 24px; width:280px; background-color:#f8f8f8; border-radius:1rem; box-shadow:0 0 8px rgba(0,0,0,0.15);  box-sizing:border-box;  visibility: hidden; opacity:0; transition: all 0.3s ease-out;}
.chat_section .chat_option_item .tip_popup.active{visibility: visible; opacity:1;}
.chat_section .chat_option_item .tip_popup .tit{padding:8px; font-size:1rem; font-weight:600;}
.chat_section .chat_option_item .tip_popup p{font-size:0.875rem; line-height:1.6; letter-spacing:-0.015em;}
.chat_section .chat_option_item .tip_popup .img_area{margin-top:16px;}
.chat_section .chat_option_item .tip_popup .tip_popup_close{position:absolute; right: 24px; top:16px; width:16px; aspect-ratio: 1/1; background:url(../img/icon_del.svg) no-repeat center center / 100% 100%; display:block; text-indent:-9999px; overflow:hidden;}
.chat_section .chat_option_btn_list{margin-bottom:24px; display:flex; gap:8px; flex-wrap:wrap;}
.chat_section .chat_option_btn_list .chat_option_btn{position:relative; padding:10px; border:1px solid #dbdbdb; border-radius:8px; display:inline-block; font-size:14px; line-height:1; transition: all 0.3s ease; overflow:hidden;}
.chat_section .chat_option_btn_list .chat_option_btn:hover{border-color:var(--point-color-1); color:var(--point-color-1); transform:translateY(-2px); box-shadow:0 4px 8px rgba(104,80,161,0.15);}
.chat_section .chat_action_area{margin-top:80px;}
.chat_section .chat_action_btn_list{margin-top:16px; display:flex; gap:8px; flex-wrap:wrap;}
.chat_section .chat_action_btn_list>*{position:relative; padding:14px 20px; width:calc((100% - 8px) / 2); display:block; border:1px solid var(--point-color-1); border-radius:8px; line-height:1; font-size:1rem; display:flex; justify-content: space-between; color:var(--point-color-1); transition:all 0.3s ease;}
.chat_section .chat_action_btn_list>*:after{width:12px; aspect-ratio: 12/9; background:url(../img/icon_arrow.svg) no-repeat center center / 100% 100%; display:block; content:""; transition:transform 0.3s ease;}
.chat_section .chat_action_btn_list>*:hover{background-color:rgba(104,80,161,0.05); transform:translateY(-2px); box-shadow:0 4px 12px rgba(104,80,161,0.2);}
.chat_section .chat_action_btn_list>*:hover:after{transform:translateX(4px);}
.chat_section .chat_action_btn_list>*.btn_bg{color:#fff; background: #6850A1; background: linear-gradient(52deg, rgba(107, 141, 255, 1) 0%, rgba(39, 104, 255, 1) 50%, rgba(75, 38, 164, 1) 100%); border:none;}
.chat_section .chat_action_btn_list>*.btn_bg:hover{background: linear-gradient(52deg, rgba(127, 161, 255, 1) 0%, rgba(59, 124, 255, 1) 50%, rgba(95, 58, 184, 1) 100%); box-shadow:0 4px 12px rgba(104,80,161,0.3);}
.chat_section .chat_action_btn_list>*.btn_bg:after{background:url(../img/icon_arrow2.svg) no-repeat center center / 100% 100%;}
.chat_section .chat_answer_box + .chat_answer_box { margin-bottom: 14px; }
.chat_section .chat_recommend_box{display:flex;  gap:24px; flex-wrap:wrap;}
.chat_section .chat_recommend_box .chat_recommend_title h4{font-size:1rem; color:#2d2d2d;}
.chat_section .chat_recommend_box .chat_recommend_title p{margin-top:4px; font-size:0.875rem; color:#777; }
.chat_section .chat_recommend_box .chat_recommend_btn_list{display:flex; gap:8px; flex-wrap:wrap;}
.chat_section .chat_recommend_box .chat_recommend_btn_list>*{position:relative; padding:10px; line-height:1; border:1px solid #ddd; border-radius:8px; display:inline-block; font-size:0.875rem; color:#555; transition:all 0.3s ease;}
.chat_section .chat_recommend_box .chat_recommend_btn_list>*:hover{border-color:var(--point-color-1); background-color:rgba(104,80,161,0.05); color:var(--point-color-1); transform:translateY(-2px); box-shadow:0 4px 8px rgba(104,80,161,0.15);}

.bottom_fixed{position:fixed; left:50%; bottom:48px; transform:translateX(-50%); max-width:var(--width);  width:100%; padding:0 var(--padding); box-sizing:border-box; z-index:30;}
.bottom_fixed_cont{padding:0 24px; height:68px; display:flex; align-items: center; justify-content: space-between; background:var(--gd_bg); border-radius:1rem; flex-wrap:wrap;}
.bottom_fixed_cont .bottom_fixed_txt{font-size:1rem; color:#fff; font-weight:500;}
.bottom_fixed_cont .bottom_fixed_btn_list{display:flex; gap:8px;}
.bottom_fixed_cont .bottom_fixed_btn_list>*{position:relative; padding:0 16px; width:120px; height:36px; display:flex; align-items: center; justify-content: space-between; background-color:#fff; border-radius:0.5rem; color:var(--point-color-1); transition:all 0.3s ease; overflow:hidden;}
.bottom_fixed_cont .bottom_fixed_btn_list>*:after{width:12px; aspect-ratio: 12/9; background:url(../img/icon_arrow.svg) no-repeat center center / 100% 100%; display:block; content:""; transition:transform 0.3s ease;}
.bottom_fixed_cont .bottom_fixed_btn_list>*:hover{transform:translateY(-2px);}

@media (max-width: 768px) {
.chat_section .chat_preview_area{display:block;}
.chat_section .chat_preview_area .chat_img_box{width:100%;}
.chat_section .chat_option_area{margin-top:30px; width:100%;}
.rank_section .rank_title{width:100%; display:block;}
.rank_section .rank_title>div{width:100%;}
.rank_section.close .rank_list{position:relative; right:auto; top:auto; max-width:100%; transform:none;}

.header_util_menu{display:none;}

.rank_section .rank_list{display:block; }
.rank_section .rank_list ul{width:100%;}

.main_title{padding-top:60px;}
.chat_section_title{ display:block;}
.chat_section_title .control_list{margin-top: 20px;}
.chat_section .chat_request_box{margin-bottom:30px;}
.chat_section .chat_preview_area{padding:20px 0 0;}
.chat_section .chat_action_area{margin-top:0; }
.chat_section .chat_action_btn_list{display:block;}
.chat_section .chat_action_btn_list>*{width:100%; margin-bottom:10px;}
.chat_section>div{margin-bottom:40px;}

.bottom_fixed{bottom:0; padding:0;}
.bottom_fixed_cont{height:78px; width:100%; border-radius:0; text-align:center; justify-content: center; }

.chat_section .chat_option_item .tip_popup{position:fixed; left:50%; top:50%; transform:translate(-50%, -50%); box-shadow:0 2px 16px rgba(0, 0, 0, 0.15);}
}

@media (max-width: 640px) {
.lnb_wrap{width:100%; max-width:100%;}

}