#AI_companion_container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: white;
    padding-bottom: 48px;
}
.AI_companion_box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 40px;
    max-width: 1000px;
    width: 100%;
}
.AI_companion_box > .main_title_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-bottom: 40px;
}
.AI_companion_box > .main_title_box > .main_title {
    font-family: "Jalnan";
    font-size: 24px;
    font-weight: 700;
    line-height: 30px; /* 125% */
}
.AI_companion_box > .main_title_box > button {
    display: flex;
    padding: 12px 20px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 100px;
    background: var(--Primary, #FF820F);

    color: var(--White, #FFF);
    font-size: 16px;
    font-weight: 800;
    line-height: 24px; /* 150% */
}
.AI_companion_box > .search_box {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
}
.AI_companion_box > .search_box > .title {
    font-size: 24px;
    font-weight: 800;
    line-height: 30px; /* 125% */
}
.AI_companion_box > .search_box > .search {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.AI_companion_box > .search_box > .search > form {
    width: 70%;
}
.AI_companion_box > .search_box > .search > form > input[type="text"] {
    border-radius: 4px;
    border: 1px solid var(--Grey_D, #DDD);
    max-width: 500px;
    width: 100%;
    height: 44px;
    padding: 0px 36px 0 12px;
    background: url(../z_images/zoo_img/hd-sch.svg) no-repeat center right 12px;
}
.AI_companion_box > .search_box > .search > p {
    display: flex;
    align-items: center;
    font-size: 12px;
    gap: 8px;
    cursor: pointer;
}
.AI_companion_box > .AI_chat_list_box {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-bottom: 40px;
}
.AI_companion_box > .AI_chat_list_box > .paging_area02 {
    padding: 12px 0;
    margin-top: 20px;
}
.AI_companion_box > .AI_chat_list_box > .AI_chat_list {
    padding: 20px 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border-bottom: 1px solid var(--Grey_E, #EEE);
    cursor: pointer;
}
.AI_companion_box > .AI_chat_list_box > .AI_chat_list > .chat_content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 8px;
}
.AI_companion_box > .AI_chat_list_box > .AI_chat_list > .chat_content > .title_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.AI_companion_box > .AI_chat_list_box > .AI_chat_list > .chat_content > .title_box > .title {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}
.AI_companion_box > .AI_chat_list_box > .AI_chat_list > .chat_content > .title_box > .title > p {
    font-size: 16px;
    font-weight: 800;
    line-height: 24px; /* 150% */

    max-width: 850px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.AI_companion_box > .AI_chat_list_box > .AI_chat_list > .chat_content > .title_box > .title > b {
    font-size: 12px;
}
.AI_companion_box > .AI_chat_list_box > .AI_chat_list > .chat_content > .title_box > .title > b > span {
    color: var(--Grey_6, #666);
    font-size: 10px;
    font-weight: 400;
    line-height: 14px;
}
.AI_companion_box > .AI_chat_list_box > .AI_chat_list > .chat_content > .title_box > .content_state {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--Primary, #FF820F);
    font-size: 10px;
    line-height: 14px; /* 140% */
}
.AI_companion_box > .AI_chat_list_box > .AI_chat_list > .chat_content > .title_box > .content_state > img {
    width: 16px;
    height: 16px;
    cursor: pointer;
}
.AI_companion_box > .AI_chat_list_box > .AI_chat_list > .chat_content > .AI_ask_box {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}
.AI_companion_box > .AI_chat_list_box > .AI_chat_list > .chat_content > .AI_ask_box > .text_box {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.AI_companion_box > .AI_chat_list_box > .AI_chat_list > .chat_content > .AI_ask_box > .text_box > p {
    border-radius: 100px;
    display: flex;
    padding: 4px 12px;
    justify-content: center;
    align-items: center;

    color: var(--White, #FFF);
    font-size: 12px;
    font-weight: 800;
    line-height: 16px; /* 133.333% */
}
.AI_companion_box > .AI_chat_list_box > .AI_chat_list > .chat_content > .AI_ask_box > .text_box > div {
    line-height: 20px; /* 142.857% */
    width: calc(100% - 55px);

    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.AI_companion_box > .AI_chat_list_box > .AI_chat_list > .chat_content > .AI_ask_box > .text_box.ask > p {
    background: var(--Grey_C, #CCC);
}
.AI_companion_box > .AI_chat_list_box > .AI_chat_list > .chat_content > .AI_ask_box > .text_box.answer > p {
    background: var(--Dark, #212121);
}
.community_detail_popup_area.AI_chat_detail {
    max-width: 600px;
    width: 100%;
}
.community_detail_popup_area.AI_chat_detail > .popup_title {
    box-shadow: unset;
    padding: 20px;
}
.community_detail_popup_area.AI_chat_detail > div.popup_contents_area {
    padding: 0;
    padding-bottom: 51px;
}
.community_detail_popup_area.AI_chat_detail > div.popup_contents_area > .popup_profiles {
    padding: 20px 20px 0px 20px;
}
.community_detail_popup_area.AI_chat_detail > div.popup_contents_area > div.info1 {
    padding: 0 20px 20px 20px;
    border-bottom: 1px solid #ddd;
}
.community_detail_popup_area.AI_chat_detail > div.popup_contents_area > div.info1 > p {
    display: flex;
    padding: 4px 8px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 4px;
    background: var(--Sub, #FFDED1);

    color: var(--Primary, #FF820F);
    font-size: 10px;
    font-weight: 800;
    line-height: 14px; /* 140% */
    margin-left: 8px;
    cursor: pointer;
}
.community_detail_popup_area.AI_chat_detail > div.popup_contents_area > .popup_content_AI_list_box {
    display: flex;
    flex-direction: column;
    height: 380px;
    overflow: auto;
}
.community_detail_popup_area.AI_chat_detail > div.popup_contents_area > .popup_content_AI_list_box > .popup_content_AI {
    display: flex;
    flex-direction: column;
}
.community_detail_popup_area.AI_chat_detail > div.popup_contents_area > .popup_content_AI_list_box > .popup_content_AI > .text_box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 20px;
}
.community_detail_popup_area.AI_chat_detail > div.popup_contents_area > .popup_content_AI_list_box > .popup_content_AI > .text_box.ask {
    border-top: 1px solid #ddd;
}
.community_detail_popup_area.AI_chat_detail > div.popup_contents_area > .popup_content_AI_list_box > .popup_content_AI:nth-of-type(1) > .text_box.ask:nth-of-type(1) {
    border-top: none;
}
.community_detail_popup_area.AI_chat_detail > div.popup_contents_area > .popup_content_AI_list_box > .popup_content_AI > .text_box.answer {
    background: var(--Grey_F1, #F1F1F1);
}
.community_detail_popup_area.AI_chat_detail > div.popup_contents_area > .popup_content_AI_list_box > .popup_content_AI > .text_box > .chat_content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
.community_detail_popup_area.AI_chat_detail > div.popup_contents_area > .popup_content_AI_list_box > .popup_content_AI > .text_box > .chat_content > b {
    font-weight: 800;
    line-height: 20px; /* 142.857% */
}
.community_detail_popup_area.AI_chat_detail > div.popup_contents_area > .popup_content_AI_list_box > .popup_content_AI > .text_box > .chat_content > b > span {
    color: var(--Grey_6, #666);
    font-size: 10px;
    font-weight: 400;
    line-height: 14px;
}
.community_detail_popup_area.AI_chat_detail > div.popup_contents_area > .popup_content_AI_list_box > .popup_content_AI > .text_box > .chat_content > div {
    line-height: 20px; /* 142.857% */

    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.AI_write_box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding-top: 40px;
    max-width: 1000px;
    width: 100%;
}
.AI_write_box > .input_box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
.AI_write_box > .input_box > .title {
    font-weight: 800;
    line-height: 20px; /* 142.857% */
}
.AI_write_box > .input_box > div > input[type="text"] {
    display: flex;
    align-items: center;
    min-height: unset;
    height: 44px;
    padding: 0 12px;
    line-height: normal;
    border-radius: 4px;
    border: 1px solid var(--Grey_D, #DDD);
    background: var(--White, #FFF);
}
.AI_write_box > .input_box > .input_box2 {
    display: flex;
    align-items: center;
    gap: 4px;
}
.AI_write_box > .input_box > .input_box2 > input[type="text"] {
    width: calc(100% - 48px);
}
.AI_write_box > .input_box > .input_box2 > div {
    display: flex;
    width: 44px;
    height: 44px;
    justify-content: center;
    align-items: center;
    background: var(--Primary, #FF820F);
    cursor: pointer;
}
.write_AI_list_box{
    display: flex;
    flex-direction: column;
    height: 570px;
    overflow: auto;
}
.write_AI_list_box > .write_content_AI {
    display: flex;
    flex-direction: column;
}
.write_AI_list_box > .write_content_AI > .text_box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 20px;
}
.write_AI_list_box > .write_content_AI > .text_box.ask {
    border: 1px solid #ddd;
    border-bottom: none;
}
.write_AI_list_box > .write_content_AI > .text_box.answer {
    background: var(--Grey_F1, #F1F1F1);
}
.write_AI_list_box > .write_content_AI > .text_box > .chat_content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
.write_AI_list_box > .write_content_AI > .text_box > .chat_content > b {
    font-weight: 800;
    line-height: 20px; /* 142.857% */
}
.write_AI_list_box > .write_content_AI > .text_box > .chat_content > b > span {
    color: var(--Grey_6, #666);
    font-size: 10px;
    font-weight: 400;
    line-height: 14px;
}
.write_AI_list_box > .write_content_AI > .text_box > .chat_content > div {
    line-height: 20px; /* 142.857% */

    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}


/* 반려지식으로 페이지 교체 */
.AI_companion_box {
    max-width: 1280px;
}
.AI_companion_box > .main_title_box.sch {
    padding: 0;
}
#companion_searchForm {
    width: 100%;
    display: flex;
    justify-content: center;
}
.companion_sch {
    max-width: 560px;
    width: 100%;
	height: 44px;
	padding: 0px 36px 0 46px;
	border-radius: 100px;
	border: 1px solid var(--Grey_C, #CCC);
	background-color: #F5F4F9;
	background-image: url(../z_images/zoo_img/hd-sch.svg);
	background-position: 12px;
	background-repeat: no-repeat;
    position: relative;
}
.categoryselect.companion > div.select > select {
    background-color: white;
}
.AI_companion_box > .AI_chat_list_box {
    flex-direction: unset;
    flex-wrap: wrap;
    gap: 12px;
}
.AI_companion_box > .paging_area02 {
    width: 100%;
    margin: 0;
}
.AI_chat_list_box > .AI_chat_list {
    width: calc((100% / 3) - 8px);
    padding: 12px !important;
    border: 1px solid var(--Grey_D, #DDD);
    border-radius: 8px;
}
.AI_chat_list_box > .AI_chat_list > .chat_list_back {
    aspect-ratio: 1/1;
    max-width: 120px;
    width: 100%;
    border-radius: 8px;
    cursor: pointer;
    min-width: 70px;
}
.AI_companion_box > .AI_chat_list_box > .AI_chat_list {
    gap: 20px;
    cursor: unset;
}
.AI_companion_box > .AI_chat_list_box > .AI_chat_list > .chat_content > .title_box > .title {
    font-size: 20px;
    font-weight: 800;
    line-height: 28px; /* 140% */
}
.AI_companion_box > .AI_chat_list_box > .AI_chat_list > .chat_content > .title_box > .like_box {
    display: flex;
    align-items: center;
    gap: 4px;
}
.AI_companion_box > .AI_chat_list_box > .AI_chat_list > .chat_content > .title_box > .like_box > img {
    cursor: pointer;
}
.AI_companion_box > .AI_chat_list_box > .AI_chat_list > .chat_content > .animal_info_box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
.AI_companion_box > .AI_chat_list_box > .AI_chat_list > .chat_content > .animal_info_box > .info {
    display: flex;
    align-items: center;
    gap: 12px;
}
.AI_companion_box > .AI_chat_list_box > .AI_chat_list > .chat_content > .animal_info_box > .info > .info_sub {
    display: flex;
    align-items: center;
}
.AI_companion_box > .AI_chat_list_box > .AI_chat_list > .chat_content > .animal_info_box > .info > .info_sub > p {
    font-size: 12px;
    line-height: 16px; /* 133.333% */
    width: 60px;
}
.AI_companion_box > .AI_chat_list_box > .AI_chat_list > .chat_content > .animal_info_box > .info > .info_sub > span {
    border-radius: 100px;
    background: var(--Grey_E, #EEE);
    width: 65px;
    padding: 4px 8px;
    color: var(--Grey_6, #666);
    text-align: center;

    font-size: 12px;
    font-weight: 800;
    line-height: 16px; /* 133.333% */
}


.community_detail_popup_area.AI_chat_detail > div.popup_contents_area {
    padding-bottom: 0;
}
.AI_chat_detail > .popup_contents_area > .pageinfo_box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 20px;
}
.AI_chat_detail > .popup_contents_area > .pageinfo_box > .pageinfo {
    color: var(--Grey_6, #666);
    font-size: 14px;
    line-height: 20px; /* 142.857% */
}
.AI_chat_detail > .popup_contents_area > .pageinfo_box > .title {
    font-size: 24px;
    font-weight: 800;
    line-height: 30px; /* 125% */
}
.swiper.companion_slide {
    padding: 0 12px;
}
.swiper.companion_slide.other {
    padding: 0 20px;
}
.swiper.companion_slide > .swiper-wrapper {
    max-height: 128px;
}
.swiper.companion_slide > .swiper-wrapper > .swiper-slide {
    aspect-ratio: 128/128;
    max-width: 128px;
    border-radius: 8px;
    width: 100% !important;
}
.popup_content_companion_info_box_back {
    padding: 20px;
    border-bottom: 1px solid rgba(238, 238, 238, 1);
}
.popup_content_companion_info_box {
    display: flex;
    flex-direction: column;
}

.popup_content_companion_info_box > .info_box {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 0;
}
.popup_content_companion_info_box > .info_box > p {
    width: 92px;
    color: var(--Grey_6, #666);
    line-height: 20px; /* 142.857% */
}
.popup_content_companion_info_box > .info_box > div {
    line-height: 20px; /* 142.857% */
    width: calc(100% - 100px);
}
.popup_content_companion_info_box > .info_box > div > .long_box {
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.popup_content_companion_info_box > .info_box > div > .long_box.set {
    -webkit-line-clamp: unset;
}
.popup_content_companion_info_box > .info_box > div > .long_other {
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.companion_slide_box.sub > .sub_title {
    font-size: 16px;
    font-weight: 800;
    line-height: 24px; /* 150% */
    padding: 20px 20px 12px 20px;
}
.companion_slide_box.sub {
    padding-bottom: 20px;
}
.AI_chat_detail > .popup_contents_area > .other_btn_box {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.AI_chat_detail > .popup_contents_area > .other_btn_box > .img_box {
    display: flex;
    align-items: center;
    gap: 20px;
}
.AI_chat_detail > .popup_contents_area > .other_btn_box > .img_box > img {
    width: 24px;
    height: 24px;
    cursor: pointer;
}
.AI_chat_detail > .popup_contents_area > .other_btn_box > button {
    border-radius: 8px;
    background: var(--Dark, #212121);
    padding: 8px 20px;
    color: var(--White, #FFF);
    font-size: 12px;
    font-weight: 800;
    line-height: 16px; /* 133.333% */
}
.swiper.companion_slide.other > .swiper-wrapper {
    max-height: 100px;
}
.swiper.companion_slide.other > .swiper-wrapper > .swiper-slide {
    aspect-ratio: 100/100;
    max-width: 100px;
    border-radius: 8px;
    width: 100% !important;
}