@charset "UTF-8"; 

.drag-upload-box {overflow:hidden;display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:0;height:100%; padding:20px; background: var(--color-gray-100, #F0F0F0); border-radius:10px; box-sizing: border-box;}
.drag-upload-box .btn-area {gap:12px;justify-content:center;flex-wrap:wrap}
.drag-upload-box input[type="file"]{display:none}
.drag-upload-box .upload-guide-text {margin-bottom:20px; font-size:16px;line-height:32px;font-weight:700; pointer-events: none;}
.drag-upload-box .preview-area .preview-item{overflow:hidden;position:relative;width:80px;height:80px;border-radius:6px}
.drag-upload-box .preview-area .preview-item img {width: 100%;height:100%;object-fit: cover;}
.drag-upload-box .preview-area .btn-delete {position:absolute;bottom:4px;right:4px;width: 24px;height:24px;margin-left:8px;background:url(/html/images/search/icon_delete.svg) no-repeat center / cover}
.drag-upload-box #btn-search {display:none}
.drag-upload-box:has(.preview-item) {padding-top:80px}
.drag-upload-box .scroll:has(.preview-item) {margin-top:auto;padding-top:30px;padding-bottom:20px;margin-bottom:-20px;overflow-x:auto;width:100%}
.drag-upload-box .preview-area:has(.preview-item) {width: fit-content;align-self: flex-start;min-width:0;display:flex;gap:12px;}
.drag-upload-box:has(.preview-item) #btn-search {display:inline-flex;}


/* 검색 */
.search-layer-wrap {position:absolute; top:100%; bottom:0; left:0; right: 0; background-color: rgba(0,0,0,0.2);z-index:99; opacity:0; visibility:hidden; transition:opacity 0.3s ease;}
.search-layer-wrap .search-layer-inner {display:flex;gap:60px;padding: 36px 40px 48px; background-color:var(--color-white, #ffffff);transform: translateY(-100%); transition:transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.search-layer-wrap.active {opacity:1; visibility:visible;}
.search-layer-wrap.active .search-layer-inner {transform:translateY(0);}
.search-layer-wrap .area-title {display:block;font-size:24px;font-weight:700;line-height:34px;}
.search-layer-wrap .image-search-area {display:flex;flex-direction: column; width:32.55%; display:none;}
.search-layer-wrap .image-search-area { width:32.55%}
.search-layer-wrap .image-search-area .area-title{margin-bottom:18px}
.search-layer-wrap .image-search-area .upload-guide-text{display:flex}
.search-layer-wrap .image-search-area .upload-guide-text:before {content:''; display:inline-block;width:24px;height:24px;margin-right:7px;background:url(/html/images/search/icon_image.svg); margin-top:2px}
.search-layer-wrap .recent-search-area {display:flex;}
.search-layer-wrap .recent-search-area .area-title {flex-shrink: 0;}
.search-layer-wrap .recent-search-area .btn-delete {flex-shrink: 0;width: 24px;height:24px;margin-top:5px;margin-left:8px;background:url(/html/images/search/icon_delete.svg) no-repeat center / cover}
.search-layer-wrap .recent-search-area .badge-area {margin-left:20px;display:flex;flex-wrap:wrap;gap:8px}
.search-layer-wrap .recent-search-area .badge {color:var(--color-gray-800); border-color:var(--color-gray-800)}
.search-layer-wrap .search-layer-right {flex:1}
.search-layer-wrap .keyword-search-area {margin-top:50px}
.search-layer-wrap .keyword-search-area .area-title {margin-bottom: 8px}
.search-layer-wrap .keyword-search-area +.keyword-search-area {margin-top:28px}
.search-layer-wrap .keyword-area {display:flex;gap:20px}
.search-layer-wrap .keyword-area .keyword-item {overflow:hidden; flex:1;  border-radius:10px; background-repeat:no-repeat; background-position:center; background-size: cover}
.search-layer-wrap .keyword-area .keyword-item .keyword {display:flex; align-items:center; justify-content: center; height:100%; padding:24px 8px; color:#fff; font-size:20px; line-height:32px; font-weight: 700;text-align:center; background-color: rgba(0,0,0,0.15); box-sizing:border-box}

.mobile-search-wrap {display:none !important}
.mobile-search-wrap .mobile-search-inner {padding-block:16px}
.mobile-search-wrap .search-wrap{position:relative; background:var(--color-gray-100,#F9F9FA); border-radius:30px; border:1px solid var(--color-gray-100,#F9F9FA);}
.mobile-search-wrap .search-wrap input[type="text"]{padding-left:16px; padding-right:64px; width:100%;height:38px;font-weight:500;font-size:16px;color: var(--color-gray-400,#ABABAB); background:transparent; border:none}
.mobile-search-wrap .search-wrap input[type="text"]::placeholder {color:var(--color-gray-600,#767676);}
.mobile-search-wrap .search-wrap .search{padding:0;width:24px;height:24px; background:url(/html/images/common/icon_search.svg) no-repeat center/24px auto;}
.mobile-search-wrap .search-wrap .btn-del {display:none;position:absolute;top:0;right:36px;padding:0;width:44px;height:100%; background:url(/html/images/common/icon_delete_search.svg) no-repeat center/24px auto;}
/* .mobile-search-wrap .search-wrap input[type="text"]:not(:placeholder-shown) {padding-right:84px; background-color:#FFF; border:1px solid var(--color-gray-400,#ABABAB);} */
.mobile-search-wrap .search-wrap:focus {border-color:var(--color-gray-500,#A5A4AB);}
.mobile-search-wrap .search-wrap:has(input:not(:placeholder-shown)) .search {background-image:url(/html/images/common/icon_search_active.svg);}
.mobile-search-wrap .search-wrap input[type="text"]:not(:placeholder-shown) + .btn-del {display:none;}
.mobile-search-wrap .search-wrap .btn-area {position:absolute; top:8px; right:12px; display:flex; gap:4px;}
.mobile-search-wrap .search-wrap .btn-area input[type=file] {display:none;}
.mobile-search-wrap .search-wrap .btn-file {width:24px; height:24px; background:url(/html/images/common/icon_search_file.svg) no-repeat center/contain;}
.mobile-search-wrap .search-wrap .scroll:has(.preview-item) {margin-top:2px !important; padding:0 16px 8px;}
.mobile-search-wrap .search-wrap .preview-area .btn-delete {background-image:url(/html/images/common/icon_search_delete.svg);}

.mobile-search-wrap .search-wrap.active {position:relative; background-color:var(--color-gray-100,#F9F9FA); border-color:var(--color-gray-500,#A5A4AB); border-radius:10px;}

.mobile-search-wrap .image-search-area {position:relative;padding-block:16px;display:none;}
.mobile-search-wrap .image-search-area:before{content:'';display:block;position:absolute;bottom:0;left:-20px;right:-20px;border-bottom:1px solid var(--color-gray-100, #F0F0F0)}
.mobile-search-wrap .area-title {font-size:16px;font-weight:700;line-height:32px;}
.mobile-search-wrap .area-head {display: flex;align-items:center;justify-content: space-between;} 
.mobile-search-wrap input[type="file"]{display:none}
.mobile-search-wrap .image-search-area .upload-guide-text:before {content:''; display:inline-block;width:24px;height:24px;margin-right:7px;background:url(/html/images/search/icon_image.svg); vertical-align: -5px;}
.mobile-search-wrap .preview-area{min-width:fit-content;margin-top:0;display:flex;gap:8px}
.mobile-search-wrap .scroll {overflow-x:auto;width:100%;}
.mobile-search-wrap .scroll:has(.preview-item) {margin-top:16px;}
.mobile-search-wrap .preview-area .preview-item{overflow:hidden;position:relative;width:60px;height:60px;border-radius:6px}
.mobile-search-wrap .preview-area .preview-item img {width: 100%;height:100%;object-fit: cover;}
.mobile-search-wrap .preview-area .btn-delete {position:absolute;bottom:4px;right:4px;width: 24px;height:24px;margin-left:8px;background:url(/html/images/search/icon_delete.svg) no-repeat center / cover}

.mobile-search-wrap .recent-search-area {margin-top:20px;}
.mobile-search-wrap .recent-search-area .btn-delete {width: 24px;height:24px;margin-top:5px;margin-left:8px;background:url(/html/images/search/icon_delete.svg) no-repeat center / cover}
.mobile-search-wrap .recent-search-area .badge-area {margin-top:8px;display:flex;min-width:fit-content;gap:8px}
.mobile-search-wrap .recent-search-area .badge-area .badge {flex-shrink: 0;}

.mobile-search-wrap .keyword-search-area {margin-top:40px}
.mobile-search-wrap .keyword-search-area .area-title {margin-bottom: 15px}
.mobile-search-wrap .keyword-search-area +.keyword-search-area {margin-top:40px}
.mobile-search-wrap .keyword-area .keyword-item {overflow:hidden; display:block; border-radius:10px; background-repeat:no-repeat; background-position:center; background-size: cover}
.mobile-search-wrap .keyword-area .keyword-item + .keyword-item {margin-top:8px;text-align:center;} 
.mobile-search-wrap .keyword-area .keyword-item .keyword {display:block; padding:30px 8px; color:#fff; font-size:16px; line-height:32px; font-weight: 700;text-align:center; background-color: rgba(0,0,0,0.15); box-sizing:border-box}

.sub-conts-wrap:has(.image-searched-area) {padding-top:0}
.image-searched-area {padding-inline: 40px;margin-bottom:40px;}
.image-searched-area .image-searched-inner {overflow-y:auto;padding-block:12px 20px;border-bottom:1px solid var(--color-gray-100, #F0F0F0)}
.image-searched-area .image-track {display:flex;gap:8px}
.image-searched-area .image-area {flex-shrink:0;overflow:hidden;width:80px;height:80px;border-radius:6px}
.image-searched-area .image-area img {width:100%;height:100%;object-fit:cover}

@media only screen and (max-width:1200px) {
    .search-layer-wrap .search-layer-inner {gap:24px;padding-inline:20px}
}
@media only screen and (max-width:1024px) {
    /* .search-layer-wrap {top:90px;} */
}
@media only screen and (max-width:768px) {
    .mobile-search-wrap {display:block !important}
    .search-layer-wrap {display:none !important}

    .image-searched-area {position:relative;padding: 20px 20px;margin-bottom:20px;}
    .image-searched-area:before{content:'';display:block;position:absolute;bottom:0;left:-20px;right:-20px;border-bottom:1px solid var(--color-gray-100, #F0F0F0)}
    .image-searched-area .image-searched-inner {overflow-y:auto;padding-block:0;border-bottom:none}
    .image-searched-area .image-area {width:60px;height:60px}
}


/* main */
.sub-conts-wrap:has(.main-wrap) {padding-top:40px;}
.main-wrap { padding:0 40px}
.main-wrap:has(.post-detail-wrap) {display: flex; gap:20px; flex-direction:column;}
.main-wrap .post-list-wrap {padding: 0}

.main-conts-section + .main-conts-section {margin-top: 120px}
.main-title-head {margin-bottom: 40px}

.main-collect-section {display:grid; grid-template-columns:repeat(2, 1fr); gap: 40px 20px}
.main-collect-section.column02 {grid-template-columns:repeat(2, 1fr);}
.main-collect-section.column04 {grid-template-columns:repeat(4, 1fr);}
.main-collect-btn-area {display:flex; align-items: center; justify-content: center; width:100%}
.main-collect-item {overflow:hidden; text-align: center; background-repeat:no-repeat; background-size:cover; border-radius: 10px;}
.main-collect-item .main-collect-item-inner {display:block; display:flex; flex-direction: column; justify-content: center;  width: 100%; height:100%; min-height: 240px; padding:20px; color:#fff; box-sizing: border-box;}
.main-collect-item .main-collect-item-note {font-size: 24px; line-height:32px; font-style:normal; font-weight: 500; letter-spacing: -1.18px;}
.main-collect-item .main-collect-item-tit {display:block; font-size: 36px; line-height:44px; font-weight: 700; letter-spacing: -1.18px;}
.main-collect-item .main-collect-item-note + .main-collect-item-tit {margin-top: 4px;}

@media only screen and (max-width:1920px) {
    .main-wrap:has(.post-detail-wrap) {padding:0 20px;}
}
@media only screen and (max-width:1024px) {
    .main-wrap:has(.post-detail-wrap) {display:block;}
}
@media only screen and (max-width:768px) {
    /* main */
    .sub-conts-wrap:has(.main-wrap) {padding-top:20px;}
    .sub-conts-wrap:has(.mobile-search-wrap) {padding-top:0px;padding-bottom: 0px;}
    .main-wrap { padding:0 20px}

    .main-conts-section {padding: 20px 20px 0}
    .main-conts-section + .main-conts-section {margin-top:20px}
    .main-title-head {margin-bottom: 20px}

    .main-collect-section {gap:20px 12px}
    .main-collect-section.mo-column02 {grid-template-columns:repeat(2, 1fr)}

    .main-collect-item .main-collect-item-inner {min-height: 120px;}
    .main-collect-item .main-collect-item-note {font-size: 14px; line-height:17px;}
    .main-collect-item .main-collect-item-tit {font-size: 16px; line-height:19px;}
}

/* 메인 상세 */
/* .post-detail-wrap {flex:1;min-width: 0;} */
.post-detail .post-list-wrap {flex:1;min-width: 0; padding:0}

.post-detail-wrap .post-detail-button-area {flex-shrink:0;margin-left:auto; display:flex; align-items:center; gap:16px;}
.post-detail-wrap [class*=btn-post] {flex-shrink: 0; width:24px;height:24px}
.post-detail-wrap .btn-post-like {background: url(/html/images/common/icon_like.svg) no-repeat center / 100%;}
.post-detail-wrap .btn-post-like.active {background-image: url(/html/images/common/icon_like_active.svg);}
.post-detail-wrap .btn-post-add {background: url(/html/images/common/icon_board_add.svg) no-repeat center / 100%;}

.post-detail-head {display:flex;align-items:center;gap:20px;padding:20px 26px 20px 8px; margin:0 120px;}
.post-detail-head .btn-back {display:block;flex-shrink: 0; width:24px; height:24px; background:url(/html/images/common/icon_back_page.svg) no-repeat center/contain;}
.post-detail-head .common-profile-box {min-width:0; padding: 0;}
.post-detail-head .layer-anchor .layer-menu-list {right:-26px}
.post-detail-head .btn-more {flex-shrink: 0;}

.post-detail-body {padding-bottom:80px}
.post-detail-body .post-title-area {display: flex;justify-content: space-between;margin-top:24px}
.post-detail-body .post-title-area .post-title {color:var(--color-gray-900, #393939);font-size:24px;font-weight:600;letter-spacing: 0;}
.post-detail-body .post-title-area .like-count {flex-shrink:0;padding:5px 0;color: var(--color-gray-800, #767676);font-size:16px;font-weight:500;letter-spacing: 0;}
.post-detail-body .post-title-area .like-count .count {color:var(--color-secondary);font-style:normal}
.post-detail-body .image-area {position:relative; overflow:hidden; margin:0 80px;}
.post-detail-body .image-area .image-box {display:flex; align-items:center; justify-content:center; height:700px; overflow:hidden; border-radius: 10px;}
.post-detail-body .image-area img {width:auto; max-width:100%; max-height:100%; height:auto; object-fit:contain; vertical-align:top; border-radius: 10px;}
.post-detail-body .slider-pagination {display:flex; justify-content:center; position:absolute; bottom:20px; left:0; z-index:1;}
.post-detail-body .slider-pagination span.swiper-pagination-bullet {margin:0 6px; width: 18px;height:18px;background-color: var(--color-gray-500,#ABABAB);box-sizing:border-box;vertical-align: top;}
.post-detail-body .slider-pagination span.swiper-pagination-bullet.swiper-pagination-bullet-active {background-color:var(--color-gray-900);}
/* .post-detail-body .image-area .swiper-pagination-bullet {width:18px; height:18px; background-color:var(--color-gray-500)}
.post-detail-body .image-area .swiper-pagination-bullet-active {background-color:var(--color-gray-900)} */
.post-detail-body .btn-slide {position:absolute; top:calc(50%); width:30px; height:30px; background:var(--color-gray-100); border-radius:50%; transform:translateY(-50%); transition:all .3s; z-index:1; cursor:pointer;}
.post-detail-body .btn-slide:before {content:''; display:block; width:100%; height:100%; background:url(/html/images/sub/sample/slider_arrow.svg) no-repeat center/24px auto;}
.post-detail-body .btn-slide.prev {left:5px;}
.post-detail-body .btn-slide.next {right:5px;}
.post-detail-body .btn-slide.next:before {transform:rotate(180deg);}

.post-detail-body .post-tags {margin-top:16px;color: var(--color-gray-700, #767676);font-size:20px;line-height:24px;letter-spacing:0;font-weight:500}
.post-detail-body .post-desc {margin-top:16px;padding-top:16px;color:var(--color-gray-900, #393939);font-size:18px;line-height:24px;border-top:1px solid var(--color-gray-300)}
.post-detail-body .post-util-area {display:flex;gap:16px; margin-top:40px;padding-right:17px}
.post-detail-body .post-util-area .comment-input-area {width:100%;}
.post-detail-body .post-util-area .btn-round.x-lg {padding-inline:20px}
.post-detail-body .comment-empty-wrap {margin-top:60px}
.post-detail-body .comment-empty-wrap .comment-empty-desc {color: var(--color-gray-700, #767676);font-size:18px;text-align: center;}

.post-list-wrap .post-masonry-grid .post-detail-wrap {width:100%; padding-left:20px;}
@media only screen and (min-width:1241px)  {
    .post-detail .post-list-wrap .post-masonry-grid .post-list-item{width:calc(100%/6)}
    .post-list-wrap .post-masonry-grid .post-detail-wrap {width:49%;}
}
@media only screen and (max-width:1240px) and (min-width:1025px) {
    /* .post-detail-wrap + .post-list-wrap{max-width:20%} */
    .post-detail .post-list-wrap .post-masonry-grid .post-list-item{width:calc(100%/4)}
    .post-list-wrap .post-masonry-grid .post-detail-wrap {width:75%;}
}
@media only screen and (max-width:1024px) {
    .post-detail-body .post-util-area {padding-right:0;}
}
@media only screen and (max-width:768px) {
    .post-detail-wrap .post-detail-button-area {gap:12px}
    
    .post-detail-head {padding:16px 0; justify-content: space-between; width:180px;}
    .post-detail-head .layer-anchor .layer-menu-list {right:0}
    .post-detail-head .post-detail-button-area {margin-left:0}

    .post-detail-body {padding-bottom:40px}
    .post-detail-body .post-title-area {margin:0;padding-block:16px}
    .post-detail-body .post-title-area .post-title {font-size:20px;}
   
    .post-detail-body .post-title-area .like-count .count {color:var(--color-red);font-style:normal}
    .post-detail-body .slider-pagination {bottom:25px;}
    .post-detail-body .slider-pagination span.swiper-pagination-bullet {margin:0 4px; width: 10px;height:10px;}
    /* .post-detail-body .btn-slide.prev {left:5px;}
    .post-detail-body .btn-slide.next {right:5px;} */
    .post-detail-body .image-area {overflow:hidden;border-radius: 10px;margin:0;}
    .post-detail-body .image-area .image-box {height:auto;}
    .post-detail-body .image-area img {width: 100%;vertical-align: top;}

    .post-detail-body .post-tags {margin-top:16px;color: var(--color-gray-400,#ABABAB);font-size:16px;line-height:18px;font-weight:400}
    .post-detail-body .post-desc {margin-top:12px;padding-top:12px;padding-bottom:16px;color:var(--color-gray-700,#454545);font-size:16px;line-height:24px;}
    .post-detail-body .post-util-area {display:flex;gap:12px; margin-top:0;padding-right:0px;padding:16px 20px;margin-inline:-20px;border-top:1px solid var(--color-gray-100, #F0F0F0)}
    .post-detail-body .post-util-area .btn-round.x-lg {padding:8px}

    .post-detail-body .comment-empty-wrap {margin-top:40px}
    .post-detail-body .comment-empty-wrap .comment-empty-desc {font-size:16px;}
}
/* detail-comment-wrap */
.detail-comment-wrap {margin-top:20px;padding-right:17px;}
.detail-comment-wrap .comment-item + .comment-item {margin-top:12px}
.detail-comment-wrap .comment-input-area {width:100%}
.detail-comment-wrap .comment-button {display:inline-flex;max-width:100%;padding: 8px 20px 8px 8px;border-radius:30px;background: none;text-align: left;}
.detail-comment-wrap .comment-button:after { content:'';flex-shrink:0;display:block;width:24px;height:24px;margin-left:20px;background:url(/html/images/common/icon_arrow_right_black.svg) no-repeat center / cover;opacity:0;align-self: center;}
.detail-comment-wrap .comment-button.no-arrow:after { display:none;}    /* 화살표 제거 */
.detail-comment-wrap .comment-button:not(.no-arrow):hover { background-color:#00000026;}    /* hover는 arrow 있는 경우만 */
.detail-comment-wrap .comment-button:not(.no-arrow):hover:after { opacity:1;}
.detail-comment-wrap .sender-image {flex-shrink:0;overflow:hidden;width: 44px;height:44px;margin-right:20px;border-radius: 100%;margin-right:8px;}
.detail-comment-wrap .sender-image img {width:100%;height:100%;object-fit:cover}
.detail-comment-wrap .sender-cont {min-width:0;}
.detail-comment-wrap .sender-info {color:var(--color-gray-900, #393939);font-size:14px;line-height:17px;font-weight:500;letter-spacing: 0;font-style:normal}
.detail-comment-wrap .message {margin-top:4px;color:var(--color-gray-900, #393939);font-size:18px;line-height:21px;font-weight:500;}
.detail-comment-wrap .added-file-area {margin-top:8px}
.detail-comment-wrap .added-file-area .file-item {font-size: 15px}
.detail-comment-wrap .added-file-area .file-item:before {margin-top:-2px}
.detail-comment-wrap .re-comment{margin-top:12px;padding-left:20px;padding-bottom:12px;border-bottom: 1px solid var(--color-gray-200, #E3E3E3)} 
.detail-comment-wrap .re-comment .comment-item + .detail-comment-list,
.detail-comment-wrap .re-comment .comment-item + .comment-item {margin-top:12px;}
.detail-comment-wrap .re-comment .comment-item-inner {display:inline-flex;width:100%;}
.detail-comment-wrap .re-comment .comment-item-inner:before {content:'';display:inline-block; width:24px;height:24px; margin-top:9px; margin-right:8px;background:url(/html/images/common/icon_re_comment.svg) no-repeat center / cover;}
.detail-comment-wrap .re-comment .sender-info {color:var(--color-gray-600, #767676)}
.detail-comment-wrap .re-comment.message {color:var(--color-gray-600, #767676)}

@media only screen and (max-width:768px) { 
    /* detail-comment-wrap */
    .detail-comment-wrap {padding-right:0;}
    .detail-comment-wrap .comment-item + .comment-item {margin-top:16px}
    .detail-comment-wrap .comment-button {padding: 0;}
    .detail-comment-wrap .comment-button:after {display:none}
    .detail-comment-wrap .comment-button:hover {background:none;}
    .detail-comment-wrap .comment-button:hover:after {opacity:1}
    .detail-comment-wrap .sender-image {width: 30px;height:30px;}
    .detail-comment-wrap .sender-info {color:var(--color-gray-600, #767676);font-size:12px;line-height:14px;font-weight:500;}
    .detail-comment-wrap .message {margin-top:0px;font-size:16px;line-height:19px;}
    
    .detail-comment-wrap .re-comment{margin-top:16px;padding-left:16px;} 
    .detail-comment-wrap .re-comment .comment-item + .detail-comment-list,
    .detail-comment-wrap .re-comment .comment-item + .comment-item {margin-top:16px;}
    .detail-comment-wrap .re-comment .comment-item-inner {display:inline-flex;width:100%;}
    .detail-comment-wrap .re-comment .comment-item-inner:before {margin-right:12px; margin-top:0;}
}

.popup-sample .popup-contents-wrap {padding-block:20px;}
.popup-sample .common-profile-box {padding:0;justify-content: center;gap:12px;color:var(--color-gray-700,#454545);}
.popup-sample .common-profile-box .common-profile-name {font-size:24px; line-height:29px; font-weight:600;letter-spacing: 0;}
.popup-sample.popup-wrap .txt {margin-top:8px;letter-spacing: 0;}
.popup-sample.popup-wrap .txt03{margin-top:8px;letter-spacing: 0;}
.popup-sample.popup-wrap .txt02:not(:first-child)  {margin-top:20px;}

@media only screen and (max-width:768px) {
    .popup-sample .common-profile-box{gap:8px}
    .popup-sample .common-profile-box .common-profile-name {font-size:16px; line-height:20px;}
    .popup-sample.popup-wrap .txt02 {font-size:16px;line-height:28px;}
    .popup-sample.popup-wrap .txt02:not(:first-child)  {margin-top:12px;}
}

.popup-wrap.popup-declare .popup-inner {width:544px}
.popup-declare .declare-list li+li {border-top:1px solid var(--color-gray-100, #F0F0F0)}
.popup-declare .declare-list .checkbox-wrap label:before{top:16px}
.popup-declare .declare-list label {width:100%;padding-block:16px;box-sizing: border-box;}
.popup-declare .declare-list .form-box {padding-bottom:20px}
.popup-declare .declare-area+.form-box {margin-top:36px}

@media only screen and (max-width:768px) {
.popup-wrap.popup-declare .popup-inner {width:100%}
.popup-declare .form-box .form-label{font-size:14px}
.popup-declare .declare-list .form-box{padding-bottom:16px}
.popup-declare .declare-area+.form-box,
.popup-declare .form-box + .form-box  {margin-top:20px}
}
/* board list */
.post-list-wrap {padding:0 40px}
.post-list-wrap .post-list-item {max-width: none;}
.popup-share-wrap.popup-wrap .popup-inner {width: 405px}
.popup-share-wrap.popup-wrap .popup-tit {margin-bottom:20px}
.popup-share-wrap .popup-share-area {display: flex; flex-wrap:wrap; margin-top: 20px; padding-top:20px; border-top:1px solid var(--color-gray-200, #F0F0F0); justify-content: space-between;}
.popup-share-wrap .popup-share-area .btn-share {width:40px; height:40px}
.popup-share-wrap .popup-share-area .btn-share-phone {background:url(/html/images/sub/board/icon_share_phone.png) no-repeat center / 100%}
.popup-share-wrap .popup-share-area .btn-share-insta {background:url(/html/images/sub/board/icon_share_insta.png) no-repeat center / 100%}
.popup-share-wrap .popup-share-area .btn-share-facebook {background:url(/html/images/sub/board/icon_share_facebook.png) no-repeat center / 100%}
.popup-share-wrap .popup-share-area .btn-share-kakao {background:url(/html/images/sub/board/icon_share_kakao.png) no-repeat center / 100%}

.popup-board-add-wrap.popup-wrap .popup-inner {width: 544px}
.popup-board-add-wrap.popup-wrap .popup-contents-wrap {overflow: visible}
.popup-board-add-wrap .form-box {margin-top: 40px}
.popup-board-add-wrap .form-box .custom-select-wrap {position: relative; width: 100%}
.popup-board-add-wrap .form-box .custom-select-wrap .custom-ul-wrap {position:absolute}
.popup-board-add-wrap .form-box .form-label {color:var(--color-gray-800, #393939)}

@media only screen and (max-width:768px) { 
    .post-list-wrap {padding:0 20px}

    .popup-share-wrap.popup-wrap .popup-tit {font-size:24px;line-height:32px;}
    .popup-share-wrap .popup-share-area {gap:12px; justify-content: center}
    .popup-share-wrap .popup-share-area .btn-round {flex-shrink:0; width:100%; padding-top:6px;padding-bottom:6px}
}

/* mypage board list */
.mypage-board-wrap .mypage-post-head {margin-top:120px; display:flex;}
.mypage-board-wrap .mypage-post-head .btn-area {margin-left: auto}
.mypage-board-wrap .mypage-post-list {margin-top: 60px;}
.mypage-board-wrap .floating-btn-area {display:none}
.mypage-board-wrap .post-empty-wrap {margin-top: 120px}
.mypage-board-wrap .post-empty-wrap .post-empty-title {color:var(--color-gray-800, #393939);font-size:28px;line-height:32px; letter-spacing: -1.18px;}
.mypage-board-wrap .post-empty-wrap .post-empty-desc {margin-top:12px;color: var(--color-gray-600, #767676);font-size:20px;line-height:28px; letter-spacing: -1.18px}
.mypage-board-wrap .mypage-board-btn-area {display:none}
.mypage-board-wrap .board-bg-btn-area {display:flex; justify-content: center; align-items: center; height: 200px; border-radius: 10px; margin-top: 60px; background-color: var(--color-gray-200, #F0F0F0);}

.mypage-user-section {padding-bottom: 36px; margin-bottom: 60px; border-bottom: 1px solid var(--color-gray-300, #D9D9D9)}
.mypage-user-section .section-head {display: flex; align-items: center; gap: 20px }
.mypage-user-section .section-head .right {flex-shrink: 0; display: flex; gap: 20px}
.mypage-user-section .section-head .right * {flex-shrink: 0;}
.mypage-user-section .common-profile-box{min-width: 0;padding: 0}
.mypage-user-section .section-info {margin-top: 36px;}
.mypage-user-section .user-email .email {color: var(--color-gray-900, #393939);font-size: 20px; line-height:28px; font-weight: 500; letter-spacing: -1.18px;}
.mypage-user-section .user-desc {max-width: 704px; margin-top: 4px;color: var(--color-gray-700, #767676);font-size: 20px; line-height:28px; font-weight: 500; letter-spacing: -1.18px;}
.mypage-user-section .btn-notify {flex-shrink:0; width:24px; height:24px; background:url(/html/images/sub/board/icon_post_bell.svg) no-repeat center / 100%}
.mypage-user-section .user-util-area {display:flex;align-items:center;gap:32px;margin-top:36px}
.mypage-user-section .user-util-area .right {margin-left:auto}
.mypage-user-section .user-util-area .posting-count {font-style:normal;font-weight:600;color:var(--color-gray-800,#454545); font-size: 20px; line-height:24px;}
.mypage-user-section .follow-item+.follow-item {position:relative;padding-left:32px}
.mypage-user-section .follow-item+.follow-item:before {position:absolute;top:50%;left:0;content: '';display:block;width:1px;height:20px;background-color: var(--color-gray-400,#D9D9D9);margin-top:-10px;}
.mypage-user-section .btn-close-section {flex-shrink:0; width:24px; height:24px; background:url(/html/images/sub/board/icon_post_close.svg) no-repeat center / 100%}

.mypage-board-list {display: flex; flex-wrap: wrap; margin-top: 60px; margin-left:-20px; gap: 40px 0;}
.mypage-board-list .board-list-item {width:33.33%; padding-left:20px; box-sizing: border-box;}
.mypage-board-list .board-item-image {position:relative;}
.mypage-board-list .board-item-image,
.mypage-board-list .board-item-btn-area {overflow:hidden; position:relative; width:100%; padding-top:50.9%; border-radius: 8px;}
.mypage-board-list .board-item-image img {position: absolute;top:0;left:0;width: 100%; height: 100%; object-fit: cover;}
.mypage-board-list .board-item-image .btn-round {display: none; position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%);z-index:1}
.mypage-board-list .board-item-image:hover .btn-round {display:flex}
.mypage-board-list .board-item-image:hover:before {content:'';position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.15);z-index: 1;}
.mypage-board-list .board-item-info {display:flex; justify-content: space-between; margin-top: 16px;}
.mypage-board-list .board-item-title {color:var(--color-gray-900, #393939);font-size: 24px;font-weight: 600;line-height:29px}
.mypage-board-list .board-item-title.icon-lock:before {content:''; display:inline-block; width: 24px; height: 24px; margin-right: 4px; background:url(/html/images/sub/board/icon_lock.svg) no-repeat center / 100%; vertical-align: -3px;}
.mypage-board-list .board-post-count {color:var(--color-gray-800,#454545);font-size: 20px;font-weight: 600;line-height:29px}
.mypage-board-list .board-item-date{display:block; margin-top:8px; color: var(--color-gray-700, #767676);font-size: 16px;line-height:19px;text-align: right;}
.mypage-board-list .board-item-btn-area {background-color: var(--color-gray-200, #F0F0F0);}
.mypage-board-list .board-item-btn-area .btn-round {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

.board-detail .mypage-user-section {padding-bottom:54px;}
.board-detail .mypage-user-section .common-profile-image {border-radius:8px;}
.board-detail .mypage-user-section .btn-area {margin-left:auto; gap:20px; flex-shrink:0;}
.board-detail .mypage-user-section .posting-count {font-size:20px; font-weight:600;}
.board-detail .mypage-user-section .btn-share {background-image:url(/html/images/sub/mypage/icon_share.svg);}
.board-detail .mypage-user-section .user-desc {margin-top:16px;}
.board-detail .mypage-user-section .btn-back { /* display:none; */ flex-shrink: 0; display: block; width: 24px; height: 24px; font-size: 0; background: url(/html/images/common/icon_back_page.svg) no-repeat center / contain;}

@media only screen and (max-width:768px) { 
    .mypage-board-wrap .mypage-post-head {margin-top:32px}
    .mypage-board-wrap .mypage-post-head .btn-area {display:none}
    .mypage-board-wrap .mypage-post-head + .mypage-post-list {margin-top: 20px;}
    .mypage-board-wrap .mypage-post-list {margin-top: 32px;}
    .mypage-board-wrap .post-empty-wrap {margin-top: 32px}
    .mypage-board-wrap .post-empty-wrap .post-empty-title {color:var(--color-gray-800, #393939);font-size:20px;line-height:24px}
    .mypage-board-wrap .post-empty-wrap .post-empty-desc {margin-top:7px;font-size:16px;line-height:19px}
    .mypage-board-wrap .post-empty-wrap + .mypage-post-list {margin-top:20px}
    .mypage-board-wrap .floating-btn-area {position: fixed; right: 20px; bottom:56px; display: block;z-index: 1;}
    .mypage-board-wrap .mypage-board-btn-area {display:flex;gap:8px;margin-top:20px}
    .mypage-board-wrap .mypage-board-btn-area .btn-round {width:50%;}
    .mypage-board-wrap .mypage-board-btn-area  + .mypage-post-list {margin-top:20px}
    .mypage-board-wrap .board-bg-btn-area {height: 132px; margin-top: 32px; background-color: var(--color-gray-50, #F8F8F8);}
    
    .mypage-user-section {padding-top:20px; margin-bottom: 0px;}
    .mypage-user-section .common-profile-box{padding: 0}
    .mypage-user-section .section-info {display: flex; justify-content: space-between; align-items: center; margin-top: 22px;}
    .mypage-user-section .section-info .posting-count {color:var(--color-gray-700,#454545); font-size: 16px;line-height: 19px;font-weight: 500; font-style:normal}
    .mypage-user-section .user-email .email {font-size: 16px; line-height:19px}
    .mypage-user-section .user-desc {max-width: 100%; margin-top: 8px;font-size: 16px; line-height:21px}
    .mypage-user-section .btn-notify {display: none;}
    .mypage-user-section .user-util-area {display:flex;align-items:center;gap:24px;margin-top:22px; padding-top:22px; border-top: 1px solid var(--color-gray-100, #F0F0F0)}
    .mypage-user-section .user-util-area .posting-count {display:none;}
    .mypage-user-section .follow-item+.follow-item {position:relative;padding-left:24px}
    .mypage-user-section .follow-item .follow-item-tit {margin-top:1px; margin-right:12px;font-size:16px;line-height:19px;}
    .mypage-user-section .follow-item .follow-item-count{display:inline-block;min-width:40px;padding:5px;box-sizing:border-box;text-align:center;flex: 0 0 auto;}
    .mypage-user-section .btn-close-section {display:none;}

    .mypage-board-list {margin-top: 32px; margin-left:-12px; gap: 32px 0;}
    .mypage-board-list .board-list-item {width:50%; padding-left:12px;}
    .mypage-board-list .board-item-info {display:block; margin-top: 8px;}
    .mypage-board-list .board-item-title {font-size: 16px;line-height:19px}
    .mypage-board-list .board-item-title.icon-lock:before {width: 20px; height: 20px; vertical-align: -5px;}
    .mypage-board-list .board-item-right {display:flex; justify-content: space-between; flex-direction:row-reverse; margin-top: 8px;}
    .mypage-board-list .board-post-count {font-size: 12px;font-weight: 500;line-height:14px}
    .mypage-board-list .board-item-date{margin-top:0; font-size: 12px;line-height:14px;;}
    .mypage-board-list .board-item-btn-area {display:flex; align-items:center;justify-content: center; padding:0; height: 100%; background-color: transparent;}
    .mypage-board-list .board-item-btn-area .btn-round {position: static; transform:none}

    .board-detail .mypage-user-section {padding-bottom:20px;}
    .board-detail .mypage-user-section .section-head {position:relative; flex-direction:column; align-items:flex-start; padding-right:34px;}
    .board-detail .mypage-user-section .btn-area {margin-left:0; gap:8px;}
    .board-detail .mypage-user-section .layer-anchor {position:absolute; top:0; right:0;}
    .board-detail .mypage-user-section .posting-count {font-size:16px; font-weight:500; order:1;}
    .board-detail .mypage-user-section .btn-share {width:20px; height:20px;}
    .board-detail .mypage-user-section .user-desc {margin-top:20px;}
    .board-detail .mypage-user-section .btn-back {flex-shrink: 0; display:block; width:24px; height:24px; font-size:0; background:url(/html/images/common/icon_back.svg) no-repeat center/contain;}
}

/* board 등록/관리 */
.register-board {display: flex;justify-content: center;gap: 20px;}
.register-board .image-form-area {width: 50%; padding-top: 4px}
.register-board .image-form .image-area {overflow:hidden;width:100%;border-radius:10px}
.register-board .image-form .btn-area {margin-top:12px; display: block;position: relative;top: 0;gap: 4px;}

.register-board .board-form-area {width: max(50%, 500px); max-width:600px; flex-shrink: 0;}
/* .register-board .board-form-area .divider {padding-top:36px;} */
.register-board .board-form-area .btn-area.divider {margin-top: 36px}
.register-board .board-form-area .btn-area {gap:12px;}
.register-board .board-form-area .btn-area .btn-default {width: 100%;}
.register-board .form-box .follow-item {margin-top:8px}

/* board 등록/관리 - 초대하기 */
.popup-invite-wrap.popup-wrap .popup-inner {width: 547px}
.popup-invite-wrap.popup-wrap .popup-contents-wrap {display: flex;  flex-direction:column;}
.popup-invite-wrap .invite-user-area.result-area {overflow-y:auto;margin-top:36px; display:flex; flex-direction: column; min-height:142px}
.popup-invite-wrap .invite-user-area.result-area .invite-user-list {overflow-y:auto;}
.popup-invite-wrap .invite-user-area {display:block;color:var(--color-gray-900);font-size: 14px;letter-spacing: -0.18px;font-weight:400}
.popup-invite-wrap .invite-user-area .area-title {font-weight:400}
.popup-invite-wrap .invite-user-area .area-desc {margin-top: 16px;color: var(--color-gray-700, #767676);font-size:20px;line-height:28px;letter-spacing:-0.18px;font-weight:500}
.popup-invite-wrap .invite-user-area.selected-area+.form-box{flex-shrink:0;margin-top:36px}
.popup-invite-wrap .invite-user-area.selected-area .invite-user-list {overflow-y:auto; max-height: 110px;}
.popup-invite-wrap .invite-user-list {margin-top: 16px;border-bottom:1px solid var(--color-gray-100, #F0F0F0);}
.popup-invite-wrap .invite-user-item {display:flex;align-items: center;justify-content: space-between;gap:8px;}
.popup-invite-wrap .invite-user-item + .invite-user-item {padding-top: 12px;border-top:1px solid var(--color-gray-200, #F0F0F0);}
.popup-invite-wrap .invite-user-item .checkbox-wrap{flex-shrink: 0;}
.popup-invite-wrap .invite-user-item .common-profile-box {min-width:0;padding:4px 0;}
.popup-invite-wrap .invite-user-item .common-profile-box .common-profile-image {width: 40px;height:40px; border-radius:50%; overflow:hidden}
.popup-invite-wrap .invite-user-item .common-profile-box .common-profile-name {color:var(--color-gray-800)}
.popup-invite-wrap .invite-user-item .common-profile-box .keyword {color:var(--color-secondary, #3F23FA)}
.popup-invite-wrap .invite-user-item .checkbox-wrap.gray-800 input + label {padding-left:0;padding-right:26px;}
.popup-invite-wrap .invite-user-item .checkbox-wrap.gray-800 input + label:before{ left:auto; right: 0;}


@media only screen and (max-width:768px) { 
    /* board 등록/관리 - 초대하기 */
    .register-board {flex-direction:column; gap:0;}
    .register-board.form-wrap .image-area .upload-box{height: 160px}
    .register-board.form-wrap .form-area .divider:before {left:0;right:0}
    .register-board.form-wrap .section-title {margin-bottom:8px;font-size:12px; font-weight:400}
    .register-board .image-form-area {width:100%;}
    .register-board .image-form {padding-left:20px; padding-right:20px;}
    .register-board .image-form .btn-area {margin-top:8px}
    .register-board .board-form-area {width:100%; max-width: 100%; margin-top: 32px}
    .register-board .board-form-area .divider {margin-top:0}
    .register-board .board-form-area .divider .form-label {padding-top:16px}
    .register-board .board-form-area .btn-area.divider {margin-top:0;padding-top:0}
    .register-board .board-form-area .btn-area.divider:before {content: none;}
    .register-board .form-control-row{padding: 16px 0}
    .register-board .form-control-row:has(.btn-round) {flex-wrap: nowrap; justify-content: space-between;}
    .register-board .form-control-row:has(.btn-round) .btn-box {width:auto}
    .register-board .form-box + .form-box {margin-top:0;padding:20px 0}

    /* board 등록/관리 - 초대하기 */
    .popup-invite-wrap .invite-user-area .area-title {line-height: 13px;font-size: 12px;}
    .popup-invite-wrap .invite-user-area .area-desc {font-size:14px;line-height:20px}
    .popup-invite-wrap .invite-user-item .common-profile-box {gap:4px}
    .popup-invite-wrap .invite-user-item .common-profile-box .common-profile-image {width: 20px;height:20px}
    .popup-invite-wrap .invite-user-item .common-profile-box .common-profile-name {font-size:16px;line-height:19px}
    .popup-invite-wrap.popup-wrap .btn-area {margin-top:16px}
    .popup-invite-wrap.popup-wrap .btn-default{line-height:26px}
}


/* dm */
.layer-side-wrap {position:fixed; top:104px; right:0; bottom:0; width: 400px; display:flex; flex-direction: column; background-color:#fff; z-index:90; letter-spacing:0;}
.layer-side-wrap .layer-side-head {flex-shrink:0; display:flex; gap:10px; align-items:center; padding: 24px}
.layer-side-wrap .layer-side-head .btn-back {display:none}
.layer-side-wrap .layer-side-head .layer-side-title {font-size: 20px; line-height: 24px; font-weight: 700; color:var(--color-gray-800)}
.layer-side-wrap .layer-side-head .layer-side-badge {flex-shrink:0;display:inline-block; padding: 3.5px 10px; font-size: 10px; font-weight:600; color: var(--color-gray-900); border-radius: 30px; background-color:var(--color-gray-200, #F0F0F0)}
.layer-side-wrap .layer-side-head .layer-side-badge:before {content: ''; display:inline-block; width:10px; height: 10px; margin-right:4px; background:url(/html/images/common/icon_person.svg) no-repeat center / 100%; vertical-align: -1px;}
.layer-side-wrap .layer-side-head .layer-side-close {flex-shrink:0; width: 24px; height: 24px;margin-left: auto;background: url(/html/images/common/icon_delete_layer.svg) no-repeat center / 100%; }
.layer-side-wrap .layer-side-body {display: flex; flex-direction: column; min-height:0; height:100%; padding: 20px 24px 24px; box-sizing:border-box}

.layer-side-wrap .layer-search-area {position:relative; flex-direction:column;}
.layer-side-wrap .layer-search-area .layer-search-input {width:100%;padding:16.5px 18px 16.5px 56px; font-size:18px; line-height:21px;  border:1px solid transparent; box-sizing: border-box; background-color:var(--color-gray-510,#F8F8F8); border-radius: 10px}
.layer-side-wrap .layer-search-area .layer-search-input::placeholder {color:var(--color-gray-700, #767676);}
.layer-side-wrap .layer-search-area .layer-search-button {position: absolute; top: 50%; left:20px; width: 24px; height: 24px; transform: translateY(-50%); background: url(/html/images/common/icon_search.svg) no-repeat center / 100%;}
.layer-side-wrap .layer-search-area .layer-search-delete {display:none; position:absolute;top:50%;right:20px;width:24px;height:24px;margin-top:-12px; background:url(/html/images/common/icon_delete_search.svg) no-repeat center/24px auto}
.layer-side-wrap .layer-scroll {overflow:auto; min-height:0; padding-right:24px; margin-right:-24px}

.layer-side-wrap .layer-search-area .layer-search-input:not(:placeholder-shown) {padding-right:54px; background-color: #fff;border-color: var(--color-gray-500,#ABABAB)}
.layer-side-wrap .layer-search-area .layer-search-input:not(:placeholder-shown)+.layer-search-delete{display:block;}
.layer-side-wrap .layer-btm-area {flex-shrink:0; margin-top:auto; padding-top: 20px}
.layer-side-wrap .added-file-area .file-item {background-color:var(--color-gray-800)}
.layer-side-wrap.active { z-index: 99;}

.comment-input-area {position: relative}
.comment-input-area .input-area {overflow:hidden;}
.comment-input-area .input-area .input {padding:15px 84px 15px 20px;background-color:var( --color-gray-100,#F8F8F8);border:1px solid transparent;border-radius: 30px;width:100%; color:var(--color-gray-800, #767676);font-size:20px;box-sizing: border-box;font-weight: 500}
.comment-input-area .input-area .input::placeholder {color:var(--color-gray-800, #454545); }
.comment-input-area .input-area .input:not(:placeholder-shown){background-color:var(--color-white,#ffffff);border-color:var(--color-gray-500,#ABABAB)}
.comment-input-area .btn-emoji {position: absolute; top: 50%; right:52px; width: 24px; height: 24px; transform: translateY(-50%); background: url(/html/images/common/icon_add_imoji.svg) no-repeat center / 100%;}
.comment-input-area .btn-file {position: absolute; top: 50%; right:20px; width: 24px; height: 24px; transform: translateY(-50%); background: url(/html/images/common/icon_add_file.svg) no-repeat center / 100%; cursor:pointer}
.comment-input-area input[type="file"] {display:none}
.comment-input-area .btn-send { position:absolute; top:50%; left:20px; display:inline-block; width:24px; height:24px; margin-top:-12px; background:url(/html/images/common/icon_comment_send.svg) no-repeat center / 100%}
/* .comment-input-area .btn-send-arr { position:absolute; top:50%; right:20px; display:inline-block; width:24px; height:24px; margin-top:-12px; background:url(/html/images/common/icon_arrow_right_black.svg) no-repeat center / 100%} */
.comment-input-area .btn-send-arr { position:absolute; top:50%; right:20px; display:inline-block; width:24px; height:24px; margin-top:-12px; background:url(/html/images/common/icon_comment_send.svg) no-repeat center / 100%}
.comment-input-area .added-file-area {position:absolute;top:50%;right:84px;max-width:118px;transform: translateY(-50%);}
.comment-input-area:has(.btn-send) .input-area input {padding-left:56px;}
.comment-input-area:has(.added-file-area) .input-area input {padding-right:205px;}
.comment-input-area .comment-btns {position:absolute; top:0; right:20px; height:100%; display:flex; align-items:center; gap:8px; }
.comment-input-area .added-file-area {position:static; transform:none;}
.comment-input-area .btn-emoji {position:static; transform:none;}
.comment-input-area .btn-file {position:static; transform:none;}
.comment-input-area .btn-send-arr {position:static; margin-top:0;}
@media only screen and (max-width: 1200px) {
    .layer-side-wrap {top:90px}
}

@media only screen and (max-width:768px) { 
    .layer-side-wrap {top:20px;width:100%;z-index:90}
    .layer-side-wrap .layer-side-head { padding: 20px}
    .layer-side-wrap .layer-side-head .btn-back {display:block;flex-shrink: 0; width:24px; height:24px; font-size:0; background:url(/html/images/common/icon_back.svg) no-repeat center/contain;}
    .layer-side-wrap .layer-side-body { padding: 20px;}
    .layer-side-wrap .layer-scroll {padding-right:20px; margin-right:-20px}
    .layer-side-wrap .layer-btm-area {padding-top:18px;border-top: 1px solid var( --color-gray-50,#F8F8F8)}

    .comment-input-area:has(.btn-send) .input-area input{padding-left:16px}
    .comment-input-area .input-area .input {padding:9.5px 96px 9.5px 15px; font-size:16px;}
    .comment-input-area .input-area .input:not(:placeholder-shown) {color:var(--color-gray-800, #393939);background-color:var( --coHor-gray-50,#F8F8F8);border-color:transparent}
    .comment-input-area .input-area .input::placeholder {color:var(--color-gray-400,#ABABAB)}
}

.layer-dm-wrap.layer-side-wrap .layer-scroll {margin-top: 20px}
.layer-dm-item {border-bottom:1px solid var(--color-gray-200, #F0F0F0);}
.layer-dm-item .dm-item-link {display:flex; align-items: center; padding:12px; width:100%; background-color:transparent;}
.layer-dm-item .dm-item-link.icon-link:after {content:''; flex-shrink:0; display:block; width: 24px; height: 24px; margin-left :4px; background:url(/html/images/common/icon_dm_link_arr.svg) no-repeat center / 100%}
.layer-dm-item .dm-item-link .btn-more {flex-shrink:0;}
.layer-dm-item .dm-item-image {flex-shrink:0; overflow:hidden; width:24px; height: 24px; border-radius: 10px;}
.layer-dm-item .dm-item-image img {width: 100%; height: 100%; object-fit: cover;}
.layer-dm-item .dm-item-info {min-width:0;margin:0 12px; }
.layer-dm-item .dm-item-user {display:flex; align-items:center; color:var(--color-gray-900, #393939);font-size: 16px; line-height:22px; font-weight:500; letter-spacing: -0.18px}
.layer-dm-item.is-new-dm .dm-item-user:after {content:''; flex-shrink:0;display: inline-block; width:6px; height:6px; margin-left: 4px; background-color:var(--color-red, #F44336) ; border-radius: 100%; margin-top:-2px}
.layer-dm-item .dm-item-email {margin-top:4px; color:var(--color-gray-700, #767676);font-size:14px;letter-spacing:0;line-height: 17px;}
.layer-dm-item .dm-item-user .user-name,
.layer-dm-item .dm-item-email {display:block; overflow:hidden; white-space: nowrap; text-overflow:ellipsis}
.layer-dm-item .dm-item-time {flex-shrink:0; min-width:61px; margin-left: auto; color:var(--color-gray-700, #767676);font-size:14px;line-height: 17px;text-align:right}
.layer-dm-item .dm-item-user .user-name .keyword {color:var(--color-secondary, #F44336)}
.layer-dm-empty-area{margin-top:40px}
.layer-dm-empty-area .layer-dm-empty-desc {color:var(--color-gray-700, #767676); font-size:14px;line-height:17px; text-align: center;}

.layer-dm-detail-wrap  {display:flex;flex-direction: column;}

.layer-dm-detail-wrap .dm-bubble-item{max-width:264px;}
.layer-dm-detail-wrap .dm-bubble-item+.dm-bubble-item{margin-top:24px}
.layer-dm-detail-wrap .dm-bubble-item .dm-bubble-time {margin-top:8px;font-size:14px;letter-spacing:0;color:var(--color-gray-700, #767676);}
.layer-dm-detail-wrap .dm-bubble-item .dm-bubble {width:fit-content;padding:12px;text-align:left;letter-spacing:0;font-size:16px;line-height:19px;font-weight:500;}
.layer-dm-detail-wrap .dm-bubble-item .dm-bubble+.dm-bubble {margin-top: 8px}
.layer-dm-detail-wrap .dm-bubble-item .product-item {display:flex;align-items:center;width:264px;gap:8px;padding-left:8px;}
.layer-dm-detail-wrap .dm-bubble-item .product-item:after {content:'';display:block;width:24px;height:24px;background:url(/html/images/common/icon_arrow_right_black.svg)}
.layer-dm-detail-wrap .dm-bubble-item .product-item-inner {display:flex;align-items: center;gap:16px;text-align:left;padding:11px;border: 1px solid var(--color-gray-300, #D9D9D9);border-radius: 12px 12px 0 12px}
.layer-dm-detail-wrap .dm-bubble-item .product-item .product-title {font-size:18px;font-weight:500;letter-spacing: 0;}
.layer-dm-detail-wrap .dm-bubble-item .product-item .product-title:before {content:'';display:inline-block;width:4px;height:4px;margin-right:8px;background-color:currentColor;border-radius:100%;vertical-align:4px;}
.layer-dm-detail-wrap .dm-bubble-item .product-item .product-desc {margin-top:4px;font-size:14px;color:var(--color-gray-600, #767676);letter-spacing:0;} 
.layer-dm-detail-wrap .dm-bubble-item .product-item .product-image {overflow:hidden; width: 50px;height:50px;border-radius:8px}
.layer-dm-detail-wrap .dm-bubble-item .product-item .product-image img{width:100%;height:100%;object-fit:cover}

.layer-dm-detail-wrap .dm-bubble-item.is-default .dm-bubble,
.layer-dm-detail-wrap .dm-bubble-item.is-default .product-item-inner {color:var(--color-white, #ffffff);background-color:var(--color-primary);border-radius:12px 12px 12px 0}
.layer-dm-detail-wrap .dm-bubble-item.is-default .product-item .product-desc {color:var(--color-gray-400, #D9D9D9)}

.layer-dm-detail-wrap .dm-bubble-item.is-me {margin-left:auto;text-align:right}
.layer-dm-detail-wrap .dm-bubble-item.is-me .dm-bubble {color:var(--color-gray-900, #393939);background-color:var(--color-gray-200, #F0F0F0);border-radius:12px  12px 0 12px}
.layer-dm-detail-wrap .dm-bubble-item.is-me .dm-bubble-time{text-align:right}

.layer-dm-wrap .dm-bubble + .added-file-area {margin-top:8px}
.layer-dm-wrap .layer-btm-area .added-file-area {margin-bottom: 8px}

@media only screen and (max-width:768px) { 
    .layer-dm-empty-area{margin-top:40px}
    .layer-dm-empty-area .layer-dm-empty-desc {color:var(--color-gray-700, #767676); font-size:14px;line-height:17px; text-align: center;}
}

/* 알림 */
.layer-notify-wrap.layer-side-wrap .layer-side-badge {color:#FFF; background-color:var(--color-red);}
.layer-notify-wrap.layer-side-wrap .layer-side-badge:before {display:none;}
.layer-notify-item {border-bottom:1px solid var(--color-gray-100, #F0F0F0);}
.layer-notify-item .item-link {display:flex; padding:12px 0; width:100%; background-color:transparent;}
.layer-notify-item .item-link.icon-link:after {content:''; flex-shrink:0; display:block; width: 16px; height:auto; margin-left :4px; background:url(/html/images/common/icon_notify_link_arr.svg) no-repeat center / 16px auto;}
.layer-notify-item.is-new .item-link:before {content:''; flex-shrink:0;display: inline-block; width:6px; height:6px; margin-right: 4px; background-color:var(--color-red, #F44336) ; border-radius: 100%;}
.layer-notify-item .item-image {flex-shrink:0; overflow:hidden; width:24px; height:24px; border-radius:12px;}
.layer-notify-item .item-image img {width: 100%; height: 100%; object-fit: cover;}
.layer-notify-item .item-info {flex-grow:1; margin:0 8px; text-align:left; }
.layer-notify-item .item-message {color:var(--color-gray-700, #454545);font-size: 16px; line-height:19px;}
.layer-notify-item .item-message .user-name {font-weight:600;}
.layer-notify-item .item-time {margin-top:4px; color:var(--color-gray-600, #767676);font-size:14px;line-height: 14px;}
@media only screen and (max-width:768px) { 
    .layer-notify-wrap.layer-side-wrap {bottom:49px;}
    .layer-side-wrap .layer-side-body {padding-bottom:11px;}
    .layer-notify-item .item-message {font-size:14px; line-height:17px;}
    .layer-notify-item .item-time {font-size:12px;}
}