/*=================================================
                CSS Variables
=================================================*/
:root {
    --project-color-primary: #0078F1;
    --project-color-primary-800: #032E6D;
    --project-color-primary-700: #1755BE;
    --project-color-primary-600: #1B66E3;
    --project-color-primary-500: #1E73FE;
    --project-color-primary-400: #2985FF;
    --project-color-primary-300: #4B94FF;
    --project-color-primary-200: #86B8FF;
    --project-color-primary-100: #B3D3FF;
    --project-color-primary-50: #F3F7FF;

    --font-h1: 1.5rem;
    --font-h2: 1.125rem;
    --font-h3: 1rem;
    --font-h4: 0.875rem;
    --font-h5: 0.75rem;
    --font-h6: 0.625rem;

    --font-weight-bold: 700;
    --font-weight-semibold: 600;
    --font-weight-regular: 400;
}


/*=================================================
                컴포넌트
=================================================*/
/*****#####===== 버튼 =====#####*****/
.btn-project-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--project-color-primary);
    --bs-btn-border-color: var(--project-color-primary-600);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--project-color-primary-600);
    --bs-btn-hover-border-color: var(--project-color-primary-600);
    --bs-btn-focus-shadow-rgb: 66, 70, 73;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--project-color-primary-600);
    --bs-btn-active-border-color: var(--project-color-primary-600);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--project-color-primary);
    --bs-btn-disabled-border-color: var(--project-color-primary);
}

/*****#####===== Radio Check =====#####*****/
.pretty.p-default input:checked~.state label:before{
    border: 1px solid var(--project-color-primary);
    background-color: var(--project-color-primary);
}

.pretty.p-default input:checked~.state label:after{
    background-color: #ffffff !important;
}

.form-column-group-wrap{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.form-label{
    margin-bottom: 0.625rem;

    font-size: var(--font-h4);
    font-weight: var(--font-weight-semibold);
}

.form-project-switch{
    min-height: 2.2rem;

    font-size: var(--font-h4);
    font-weight: var(--font-weight-semibold);
    text-align: start;
}

.form-project-switch .form-check-input{
    width: 3.5em;
    height: 2em;
}

.form-project-switch .form-check-label{
    line-height: 2.2rem;
}

.switch-form-group .switch-subtitle{
    margin-top: 0.625rem;

    font-size: var(--font-h5);
    color: var(--project-color-gray-400);
}

.page-wrap[data-page='index']{
    padding-bottom: 5.8125rem;
}

/*=================================================
        [Component] 로딩
=================================================*/
.lottie-loading-wrap {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease;

    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;

    width: 100%;
    height: 100%;
    background-color: rgba(85, 85, 85, 0.43); /* 원래 색 그대로 */
}

.lottie-loading-wrap.show {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.lottie-item-box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.lottie-item{
    width: 20rem;
}

/*=================================================
        [Component] 상단 네비게이션
=================================================*/
#gnb-wrap{
    background-color: #ffffff;
}

#gnb-wrap .m-gnb-wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#gnb-wrap .m-gnb-wrap .logo-wrap{
    display: block;

    width: 4.6429rem;
    padding: 0.653rem 0;
}

#gnb-wrap .m-gnb-wrap .gnb-btn-wrap{
    display: flex;
    align-items: center;
    gap: 0.7143rem;
}

#gnb-wrap .nav-page-wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#gnb-wrap .nav-page-wrap > .nav-page-title-wrap {
    display: flex;
    align-items: center;
}

#gnb-wrap .nav-page-wrap > .nav-page-title-wrap > .nav-back-icon{
    padding: 0.813rem 0.75rem;
}

#gnb-wrap .nav-page-wrap > .nav-page-title-wrap > .nav-page-title{
    font-weight: var(--font-weight-semibold);
}

#gnb-wrap .nav-page-wrap > .nav-page-func-wrap {
    display: flex;
    align-items: center;

    margin-right: 0.5rem;
}

#gnb-wrap .nav-page-wrap > .nav-page-func-wrap > .nav-page-func-item{
    padding: 0.5rem;
}

#gnb-wrap .nav-page-wrap > .nav-page-func-wrap > .nav-page-func-item.active[data-type="bookmark"] svg path{
    fill: var(--project-color-primary);
    stroke: var(--project-color-primary);
}




/*=================================================
        [Component] 하단 네비게이션
=================================================*/
#bottom-nav{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;

    width: 100%;

    padding: 0.625rem 0;
    border-top: 1px solid var(--project-color-gray-50);

    background: #ffffff;

    z-index: 1020;
}

#bottom-nav .bt-nav-wrap{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

#bottom-nav .bt-nav-wrap .bt-nav-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;

    padding: 0.625rem;
}

#bottom-nav .bt-nav-wrap .bt-nav-item .item-title{
    font-size: var(--font-h5);
}

#bottom-nav .bt-nav-wrap .bt-nav-item.active{
    font-weight: var(--font-weight-semibold);
    color: var(--project-color-primary);
}

/*=================================================
        [Component] 사이즈 플로트 버튼
=================================================*/
.side_float_btn{
    position: fixed;
    bottom: 8.5rem;
    right: 1rem;

    display: flex;
    align-items: center;
    gap: 0.3125rem;

    padding: 0.625rem 1rem;
    border-radius: 0.3125rem;

    background: var(--project-color-primary);
    color: #ffffff;

    z-index: 10;
}

.side_float_btn .side-float-title{
    font-size: var(--font-h4);
    font-weight: var(--font-weight-semibold);
}


/*=================================================
        [Component] 페이지 타이틀
=================================================*/
.basic-page-title-wrap{
    padding: 1.5rem 0 2rem;
}

/*=================================================
        [Module] 페이지 섹션 구분
=================================================*/
.index-column-gap-wrap{
    display: flex;
    flex-direction: column;
    gap: 2rem;

    padding: 1.5rem 0;
}

.index-column-gap-wrap .index-column-wrap{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.write-column-gap-wrap{
    display: flex;
    flex-direction: column;
    gap: 1rem;

    padding: 1.5rem 0;
}

.write-column-gap-wrap.include-title{
    gap: 2rem;
}

.view-column-gap-wrap{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.view-column-gap-wrap .view-column-group-wrap{
    padding: 1.5rem 0;

    background: #ffffff;
}


/*=================================================
        [Component] 하단 고정 버튼
=================================================*/
.fixed-btn-wrap{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    padding: 1.25rem 1rem;

    background-color: #ffffff;
}

.fixed-btn-wrap .btn{
    padding: 1.25rem 0;

    font-size: var(--font-h4);
    font-weight: var(--font-weight-semibold);
}

.drawer-btn-wrap{
    margin-top: 2rem;
}

.drawer-btn-wrap .btn{
    padding: 1.25rem 0;

    font-size: var(--font-h4);
    font-weight: var(--font-weight-semibold);
}

/*=================================================
        [Component] Regex 실시간 체크
=================================================*/
.form-input-regex-wrap{
    display: flex;
    align-items: center;
    gap: 1rem;

    margin-top: 0.625rem;
}

.form-input-regex-wrap .regex-item{
    display: flex;
    align-items: center;
    gap: 0.3125rem;

    font-size: var(--font-h5);
    color: var(--project-color-gray-600);
}

.form-input-regex-wrap .regex-item::after{
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236B7280' class='bi bi-check2' viewBox='0 0 16 16'%3E%3Cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0'/%3E%3C/svg%3E");
}

.form-input-regex-wrap .regex-item.active{
    color: var(--project-color-primary);
}

.form-input-regex-wrap .regex-item.active::after{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%230078F1FF' class='bi bi-check2' viewBox='0 0 16 16'%3E%3Cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0'/%3E%3C/svg%3E");
}

/*=================================================
        [Component] input 박스 내부 버튼
=================================================*/
.form-input-gap-inner{
    display: flex;
    gap: 0.3125rem;

    padding: 0.625rem 1rem;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
}

.form-input-gap-inner.readonly{
    background: var(--bs-secondary-bg);
}

.form-input-gap-inner:not(:first-child){
    margin-top: 0.625rem;
}

.form-input-gap-inner .form-control{
    min-height: auto;
    padding: 0;
    border: none;
}

.form-input-gap-inner .form-input-inner-btn{
    padding: 0.1875rem 0.625rem;
    border: 1px solid var(--project-color-gray-100);
    border-radius: 0.3125rem;

    background-color: var(--project-color-gray-50);

    font-size: var(--font-h4);

    white-space: nowrap;
}


/*=================================================
        [Component] 인증 방식 버튼
=================================================*/
.auth_confirm_wrap{
    display: none;
}

.auth_confirm_wrap.show{
    display: flex;
}

.auth_confirm_wrap .count_down .count-span {
    position: relative;

    padding: 0 0.2rem;

    font-size: 0.875rem;
    color: var(--project-color-primary);
}

.auth_confirm_wrap .count_down .count-span:not(:last-child):after {
    content: ':';
    position: absolute;
    right: -0.13rem;
    top: 50%;

    transform: translateY(-50%);
}


/*=================================================
        [item-component] profile_card
=================================================*/
.component-wrap[data-id="profile_card"] .item-wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 1.25rem 1rem;
    border-radius: 0.3125rem;

    background-color: #ffffff;
}

.component-wrap[data-id="profile_card"] .item-wrap.not_found{
    padding: 1.6875rem 1rem;
}

.component-wrap[data-id="profile_card"] .item-wrap .item-text-wrap .item-title{
    font-weight: var(--font-weight-semibold);
}

.component-wrap[data-id="profile_card"] .item-wrap .item-text-wrap .item-subtitle{
    margin-top: 0.625rem;

    font-size: var(--font-h5);
    color: var(--project-color-gray-600);
}

.component-wrap[data-id="profile_card"] .item-wrap .item-icon-wrap{
    position: relative;
}

.component-wrap[data-id="profile_card"] .item-wrap .item-icon-wrap .item-icon-popover{
    position: absolute;
    bottom: 0;
    left: 50%;

    width: auto;

    padding: 0.1875rem 0.625rem;
    border-radius: 0.3125rem;

    background-color: var(--project-color-gray-800);

    font-size: var(--font-h5);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;

    color: #ffffff;

    transform: translate(-50% ,110%);
}

.component-wrap[data-id="profile_card"] .item-wrap .item-icon-wrap .item-icon-popover::before{
    content: "";
    position: absolute;
    top: 0;
    left: 50%;

    width: 0.75rem;
    height: 0.75rem;

    background-image: url('/front/data/img/projects/auth-popover-arrow.svg');
    background-repeat: no-repeat;
    background-size: contain;

    transform: translate(-50%,-75%);
}

.component-wrap[data-id="profile_card"] .item-wrap .item-icon-wrap .item-icon-popover.on::before{
    display: none;
}

.component-wrap[data-id="profile_card"] .item-wrap .item-icon-wrap .item-btn{
    padding: 0.3125rem 1.25rem;
    border-radius: 0.3125rem;

    font-size: var(--font-h4);
    background: var(--project-color-gray-100);
}

/*=================================================
        [item-component] search_main
=================================================*/
.component-wrap[data-id="search_main"] .item-wrap{
    display: flex;
    align-items: center;
    gap: 0.625rem;

    padding: 0.625rem;
    border: 1px solid var(--project-color-primary);
    border-radius: 0.3125rem;

    background: #ffffff;
}

.component-wrap[data-id="search_main"] .item-wrap .item-input{
    width: 100%;
}

.component-wrap[data-id="search_main"] .item-wrap .item-input .form-control{
    padding: 0;
    border: none;

    font-size: var(--font-h4);
}

.component-wrap[data-id="search_main"] .item-wrap .item-input .form-control::placeholder{
    color: var(--project-color-primary);
}

/*=================================================
        [item-component] bento_gate_main
=================================================*/
.component-wrap[data-id="bento_gate_main"]{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(2, 1fr); /* 3행 동일 높이 */
    gap: 0.625rem;
}

.component-wrap[data-id="bento_gate_main"] .item-wrap{
    display: flex;
    align-items: center;

    padding: 1.25rem;
    border-radius: 0.3125rem;
    background: #ffffff;

    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.05);

    word-wrap: break-word;
    word-break: keep-all;
}

.component-wrap[data-id="bento_gate_main"] .item-wrap .item-title{
    font-size: var(--font-h4);
    font-weight: var(--font-weight-semibold);
}

.component-wrap[data-id="bento_gate_main"] .item-wrap .item-subtitle{
    margin-top: 0.3125rem;

    font-size: var(--font-h6);

    color: var(--project-color-gray-500);
}


.component-wrap[data-id="bento_gate_main"] .item-wrap:first-child{
    display: block;
    grid-row: 1 / span 2;

    color: #ffffff;
    background-image: linear-gradient(180deg, #4EA0F2, #037AF1);
}

.component-wrap[data-id="bento_gate_main"] .item-wrap:first-child .item-title{
    font-size: var(--font-h3);
}

.component-wrap[data-id="bento_gate_main"] .item-wrap:first-child .item-subtitle{
    font-size: var(--font-h4);
    color: #ffffff;
}

.component-wrap[data-id="bento_gate_main"] .item-wrap:first-child .item-icon{
    margin-top: 1.1875rem;
    display: flex;
    justify-content: end;
}

/*=================================================
        [item-component] main_lists_header
=================================================*/
.component-wrap[data-id="main_lists_header"]{
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 0.625rem;
}

.component-wrap[data-id="main_lists_header"] .item-title{
    font-weight: var(--font-weight-semibold);
}

/*=================================================
        [lists-component] feed_card_lists
=================================================*/
.component-wrap[data-id="feed_card_lists"]{
    display: flex;
    flex-direction: column;
    gap: 1rem;

    padding: 1rem;
    border-radius: 0.3125rem;

    background: #ffffff;

    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.05);
}

.component-wrap[data-id="feed_card_lists"] .item-divider{
    width: 100%;
    height: 1px;

    background: var(--project-color-gray-100);
}

.component-wrap[data-id="feed_card_lists"] .item-divider:first-child{
    display: none;
}

/*=================================================
        [item-component] wall_item
=================================================*/
.component-wrap[data-id="wall_item"] .item-wrap{
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 0.625rem;
}

.component-wrap[data-id="wall_item"] .item-wrap .item-category{
    padding: 0.1875rem 0.3125rem;

    border-radius: 0.1875rem;

    background: var(--project-color-gray-50);

    font-size: var(--font-h5);
    color: var(--project-color-gray-400);
}

.component-wrap[data-id="wall_item"] .item-wrap .item-content-wrap{
    display: flex;
    justify-content: space-between;
    flex-grow: 1;
    gap: 0.5rem;

    width: 100%;
}

.component-wrap[data-id="wall_item"] .item-wrap .item-content-wrap .item-text-wrap{
    flex: 1;
    min-width: 0;
    overflow: hidden;
    word-break: break-word;
}

.component-wrap[data-id="wall_item"] .item-wrap .item-content-wrap .item-text-wrap .item-title{
    font-size: var(--font-h4);
    font-weight: var(--font-weight-semibold);
}

.component-wrap[data-id="wall_item"] .item-wrap .item-content-wrap .item-text-wrap .item-desc {
    font-size: var(--font-h5);
    color: var(--project-color-gray-400);

    /* --- 두 줄 고정 영역 확보 --- */
    line-height: 1.5;            /* 줄 높이 */
    min-height: calc(1.5em * 2 + 1rem); /* 항상 두 줄 높이는 보장됨 (내용 없어도) */

    /* --- 2줄까지만 보이고 넘치면 ... 처리 --- */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.component-wrap[data-id="wall_item"] .item-wrap .item-content-wrap .item-image-wrap{
    flex: 0 0 4.1875rem;

    border-radius: 0.3125rem;

    overflow: hidden;
}

.component-wrap[data-id="wall_item"] .item-wrap .item-bottom-wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;

    width: 100%;
}

.component-wrap[data-id="wall_item"] .item-wrap .item-bottom-wrap .item-meta-wrap{
    display: flex;
    align-items: center;
    gap: 0.3125rem;
}

.component-wrap[data-id="wall_item"] .item-wrap .item-bottom-wrap .item-meta-wrap .meta-item{
    display: flex;
    align-items: center;
    gap: 0.0938rem;
}

.component-wrap[data-id="wall_item"] .item-wrap .item-bottom-wrap .item-meta-wrap .meta-item .meta-item-num{
    font-size: var(--font-h6);
}

.component-wrap[data-id="wall_item"] .item-wrap .item-bottom-wrap .item-regdate{
    font-size: var(--font-h6);
    color: var(--project-color-gray-400);
}

/*=================================================
        [item-component] mem_writer_item
=================================================*/
.component-wrap[data-id="mem_writer_item"]{
    display: flex;
    align-items: center;
    gap: 0.3125rem;

    font-size: var(--font-h5);

    color: var(--project-color-gray-400);
}

.component-wrap[data-id="mem_writer_item"] .item-dot{
    display: inline-block;
    width: 0.125rem;
    height: 0.125rem;

    border-radius: 100%;

    background: var(--project-color-gray-400);
}

.component-wrap[data-id="mem_writer_item"] .item-address{
    display: flex;
    align-items: center;
    gap: 0.1875rem;
}

/*=================================================
        [item-component] ads_lists_divider
=================================================*/
.component-wrap[data-id="ads_lists_divider"] .item-wrap{
    width: 100%;
    height: 5.3125rem;

    border-radius: 0.3125rem;

    background: var(--project-color-gray-600);

    overflow: hidden;
}

/*=================================================
        [lists-component] wcat_thumb_lists
=================================================*/
.component-wrap[data-id="wcat_thumb_lists"]{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;

    gap: 2rem;
}

.component-wrap[data-id="wcat_thumb_lists"] .wcat-full-btn{
    display: flex;
    justify-content: center;
    align-items: center;

    width: 2rem;
    height: 2rem;

    border-radius: 100%;

    background: #ffffff;
}

/*=================================================
        [item-component] wcat_vertical_item
=================================================*/
.component-wrap[data-id="wcat_vertical_item"] > .item-wrap{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3125rem;
}

.component-wrap[data-id="wcat_vertical_item"] > .item-wrap > .item-icon-wrap{
    position: relative;

    width: 100%;
}

.component-wrap[data-id="wcat_vertical_item"] > .item-wrap > .item-icon-wrap > .item-icon{
    width: 100%;

    border: 1px solid var(--project-color-gray-100);
    border-radius: 0.3125rem;

    overflow: hidden;
}

.component-wrap[data-id="wcat_vertical_item"] > .item-wrap > .item-icon-wrap .item-pin{
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.1563rem;
    border-radius: 0.3125rem;
    border: 1px solid var(--project-color-primary);

    background: #ffffff;

    transform: translate(50%,-50%);
}

.component-wrap[data-id="wcat_vertical_item"] > .item-wrap.active > .item-icon-wrap > .item-icon{
    border: 1px solid var(--project-color-primary);
}

.component-wrap[data-id="wcat_vertical_item"] > .item-wrap > .item-title{
    font-size: var(--font-h4);
    color: var(--project-color-gray-400);
}

.component-wrap[data-id="wcat_vertical_item"] > .item-wrap.active > .item-title{
    color: #000000;
}

/*=================================================
        [item-component] wcat_horizon_item
=================================================*/
.component-wrap[data-id="wcat_horizon_item"] > .item-wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.3125rem;
}

.component-wrap[data-id="wcat_horizon_item"] > .item-wrap > .item-title-wrap{
    display: flex;
    align-items: center;
    gap: 0.3125rem;
}

.component-wrap[data-id="wcat_horizon_item"] > .item-wrap > .item-title-wrap > .item-icon-wrap{
    width: 1.5625rem;

    border: 1px solid var(--project-color-gray-100);
    border-radius: 0.3125rem;

    overflow: hidden;
}

.component-wrap[data-id="wcat_horizon_item"] > .item-wrap > .item-title-wrap > .item-title{
    font-size: var(--font-h4);
}

.component-wrap[data-id="wcat_horizon_item"] > .item-wrap > .item-pin-wrap.active svg path{
    fill: var(--project-color-primary);
    stroke: var(--project-color-primary);
}

/*=================================================
        [lists-component] feed_slide_lists
=================================================*/
.component-wrap[data-id="feed_slide_lists"] > .slide-tab-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.component-wrap[data-id="feed_slide_lists"] > .slide-tab-header > .slide-tab-title{
    font-weight: var(--font-weight-semibold);
}

.component-wrap[data-id="feed_slide_lists"] > .slide-tab-header > .slide-tab-btn-wrap{
    display: flex;
    align-items: center;
    gap: 0.3125rem;
}

.component-wrap[data-id="feed_slide_lists"] > .slide-tab-header > .slide-tab-btn-wrap > .slide-tab-btn{
    color: var(--project-color-gray-400);
}

.component-wrap[data-id="feed_slide_lists"] > .slide-tab-header > .slide-tab-btn-wrap > .slide-tab-btn.active{
    color: #000000;
}

.component-wrap[data-id="feed_slide_lists"] > .slide-tab-header > .slide-tab-btn-wrap > .slide-tab-btn-dot{
    width: 0.125rem;
    height: 0.125rem;

    border-radius: 100%;
    background: var(--project-color-gray-400);
}

.component-wrap[data-id="feed_slide_lists"] > .slide-tab-body{
    margin-top: 1.25rem;
}

/*=================================================
        [lists-component] wcat_my_lists
=================================================*/
.component-wrap[data-id="wcat_my_lists"]{
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.component-wrap[data-id="wcat_my_lists"] > .lists-title-wrap > .lists-title{
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.component-wrap[data-id="wcat_my_lists"] > .lists-title-wrap > .lists-title > .title-title{
    font-size: var(--font-h3);
    font-weight: var(--font-weight-semibold);
}

.component-wrap[data-id="wcat_my_lists"] > .lists-title-wrap > .lists-title > .title-subtitle{
    font-size: var(--font-h4);
    color: var(--project-color-gray-400);
}

.component-wrap[data-id="wcat_my_lists"] > .lists-title-wrap > .lists-subtitle{
    margin-top: 0.625rem;

    font-size: var(--font-h5);
    color: var(--project-color-gray-400);
}

.component-wrap[data-id="wcat_my_lists"] > .lists-items-wrap{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.3125rem;
}

/*=================================================
        [lists-component] wcat_all_lists
=================================================*/
.component-wrap[data-id="wcat_all_lists"] > .lists-header-wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 1.25rem;
}

.component-wrap[data-id="wcat_all_lists"] > .lists-header-wrap > .lists-header-title{
    font-size: var(--font-h4);
    font-weight: var(--font-weight-semibold);
}

.component-wrap[data-id="wcat_all_lists"] > .lists-header-wrap > .lists-header-search{
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.component-wrap[data-id="wcat_all_lists"] > .lists-header-wrap > .lists-header-search > .search-btn{
    font-size: var(--font-h5);
}

.component-wrap[data-id="wcat_all_lists"] > .lists-wrap{
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.component-wrap[data-id="wcat_all_lists"] > .lists-wrap > .lists-group-wrap{
    border-radius: 0.3125rem;

    overflow: hidden;
}

.component-wrap[data-id="wcat_all_lists"] > .lists-wrap > .lists-group-wrap > .group-header{
    padding: 0.3125rem 1rem;

    font-size: var(--font-h4);
    font-weight: var(--font-weight-semibold);

    background: var(--project-color-gray-100);
}

.component-wrap[data-id="wcat_all_lists"] > .lists-wrap > .lists-group-wrap > .group-body{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;

    padding: 1rem;

    background: #ffffff;
}

/*=================================================
        [lists-component] wcat_search_lists
=================================================*/
.component-wrap[data-id="wcat_search_lists"] > .lists-wrap{
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.component-wrap[data-id="wcat_search_lists"] > .lists-wrap > .lists-group-wrap{
    border-radius: 0.3125rem;

    overflow: hidden;
}

.component-wrap[data-id="wcat_search_lists"] > .lists-wrap > .lists-group-wrap > .group-header{
    padding: 0.3125rem 1rem;

    font-size: var(--font-h4);
    font-weight: var(--font-weight-semibold);

    background: var(--project-color-gray-100);
}

.component-wrap[data-id="wcat_search_lists"] > .lists-wrap > .lists-group-wrap > .group-body{
    display: flex;
    flex-direction: column;
    gap: 1.25rem;

    padding: 1rem;

    background: #ffffff;
}

/*=================================================
        [item-component] wall_view
=================================================*/
.component-wrap[data-id="wall_view"]{
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.component-wrap[data-id="wall_view"] > .item-header{
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 0.625rem;
}

.component-wrap[data-id="wall_view"] > .item-header > .item-category{
    padding: 0.1875rem 0.3125rem;
    border-radius: 0.1875rem;

    font-size: var(--font-h4);
    color: var(--project-color-gray-400);
    background: var(--project-color-gray-50);
}

.component-wrap[data-id="wall_view"] > .item-body > .item-title{
    font-size: var(--font-h3);
    font-weight: var(--font-weight-bold);
}

.component-wrap[data-id="wall_view"] > .item-body > .item-content{
    font-size: var(--font-h3);
    color: var(--project-color-gray-400);
}

.component-wrap[data-id="wall_view"] > .item-bottom{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.component-wrap[data-id="wall_view"] > .item-bottom > .item-meta-wrap{
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.component-wrap[data-id="wall_view"] > .item-bottom > .item-meta-wrap{
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.component-wrap[data-id="wall_view"] > .item-bottom > .item-meta-wrap > .meta-item{
    display: flex;
    align-items: center;
    gap: 0.1875rem;
}

.component-wrap[data-id="wall_view"] > .item-bottom > .item-meta-wrap > .meta-item[data-type="like"].active .meta-item-icon svg path{
    fill: #D92B2B;
    stroke: #D92B2B;
}

.component-wrap[data-id="wall_view"] > .item-bottom > .item-meta-wrap > .meta-item > .meta-item-num{
    margin-top: 0.1875rem;

    font-size: var(--font-h3);
    line-height: 1;
}

.component-wrap[data-id="wall_view"] > .item-bottom > .item-regdate{
    font-size: var(--font-h5);
    color: var(--project-color-gray-400);
}

/*=================================================
        [module-component] nav-search-wrap
=================================================*/
.nav-search-wrap{
    display: flex;
    align-items: center;
}

.nav-search-wrap > .nav-search-icon{
    padding: 0.813rem 0.75rem;
}
.nav-search-wrap > .nav-search-input-wrap{
    display: flex;
    align-items: center;
    gap: 0.625rem;

    margin-right: 0.625rem;
    padding: 0.3125rem 0.625rem;
    border-radius: 0.3125rem;

    background: var(--project-color-gray-50);
}

.nav-search-wrap > .nav-search-input-wrap > .nav-search-input > .form-control{
    padding: 0;
    border: none;
    background: transparent;
}


.text-count-wrap > .text-count-info{
    font-size: var(--font-h5);
    color: var(--project-color-gray-400);
}

.text-count-wrap > .text-count-info > .text_count{
    color: var(--project-color-primary);
}

/*=================================================
        [lists-component] cert_lists
=================================================*/
.component-wrap[data-id="cert_lists"]{
    display: flex;
    flex-direction: column;
    gap: 0.75rem;

    background: #ffffff;
}

.component-wrap[data-id="cert_lists"] .item-divider{
    width: 100%;
    height: 1px;

    background: var(--project-color-gray-100);
}

.component-wrap[data-id="cert_lists"] .item-divider:first-child{
    display: none;
}

/*=================================================
        [item-component] cert_item
=================================================*/
.component-wrap[data-id="cert_item"] > .item-wrap > .item-main-wrap{
    display: flex;
    gap: 0.625rem;

    padding: 0.75rem 0;
}

.component-wrap[data-id="cert_item"] > .item-wrap > .item-main-wrap > .item-pin svg path{
    stroke: #000000;
    fill: #ffffff;
}

.component-wrap[data-id="cert_item"] > .item-wrap > .item-main-wrap > .item-pin.on svg path{
    stroke: var(--project-color-primary);
    fill: var(--project-color-primary);
}

.component-wrap[data-id="cert_item"] > .item-wrap > .item-main-wrap > .item-title-wrap{
    display: flex;
    align-items: center;
    gap: 0.3125rem;
}

.component-wrap[data-id="cert_item"] > .item-wrap > .item-main-wrap > .item-title-wrap > .item-title{
    font-size: var(--font-h4);
    font-weight: var(--font-weight-semibold);
}

.component-wrap[data-id="cert_item"] > .item-wrap > .item-main-wrap > .item-title-wrap > .item-tag{
    padding: 0.3125rem;
    border-radius: 0.1875rem;

    font-size: var(--font-h6);
    color: var(--project-color-gray-600);
    background: var(--project-color-gray-50);
}

.component-wrap[data-id="cert_item"] > .item-wrap > .item-main-wrap > .item-title-wrap > .item-tag.item-main{
    color: var(--project-color-primary);
    background: var(--project-color-primary-50);
}


.component-wrap[data-id="cert_item"] > .item-wrap > .item-func-wrap{
    display: flex;
    align-items: center;
    gap: 0.5rem;

    margin-top: 0.625rem;
    margin-left: 1.375rem;
}

.component-wrap[data-id="cert_item"] > .item-wrap > .item-func-wrap > .item-func-btn{
    padding: 0.3125rem 1.25rem;
    border: 1px solid var(--project-color-gray-100);
    border-radius: 3.125rem;

    font-size: var(--font-h4);
    color: var(--project-color-gray-700);
}

/*=================================================
        [lists-component] address_search_lists
=================================================*/
.component-wrap[data-id="address_search_lists"]{
    display: flex;
    flex-direction: column;
    gap: 0.75rem;

    background: #ffffff;
}

.component-wrap[data-id="address_search_lists"] .item-divider{
    width: 100%;
    height: 1px;

    background: var(--project-color-gray-100);
}

.component-wrap[data-id="address_search_lists"] .item-divider:first-child{
    display: none;
}

/*=================================================
        [item-component] address_item
=================================================*/
.component-wrap[data-id="address_item"] > .item-wrap > .item-title{
    font-size: var(--font-h4);
}

.component-wrap[data-id="address_item"] > .item-wrap > .item-subtitle{
    font-size: var(--font-h4);
    color: var(--project-color-gray-600);
}

/*=================================================
        [item-component] story_info
=================================================*/
.component-wrap[data-id="story_info"] > .item-wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 0.625rem;

    padding: 0.75rem 1.5rem;
    border-radius: 0.3125rem;

    background: var(--project-color-gray-100);
}

.component-wrap[data-id="story_info"] > .item-wrap > .item-title{
    font-size: var(--font-h4);
}

.component-wrap[data-id="story_info"] > .item-wrap > .item-title span{
    font-weight: var(--font-weight-semibold);
}

/*=================================================
        [lists-component] scat_main_lists
=================================================*/
.component-wrap[data-id="scat_main_lists"] > .lists-wrap{
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.75rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */
    scroll-behavior: smooth; /* 자동 스크롤 부드럽게 */
    user-select: none;
}

.component-wrap[data-id="scat_main_lists"] > .lists-wrap::-webkit-scrollbar {
    display: none;
}

.component-wrap[data-id="scat_main_lists"] > .lists-wrap > .lists-item-wrap {
    padding: 0.3125rem 1.25rem;
    border: 1px solid var(--project-color-gray-100);
    border-radius: 0.3125rem;

    font-size: var(--font-h4);
    color: var(--project-color-gray-700);
    background: #ffffff;

    white-space: nowrap;
}


.component-wrap[data-id="scat_main_lists"] > .lists-wrap > .lists-item-wrap.active{
    border: 1px solid var(--project-color-gray-100);

    color: #ffffff;
    background: #000000;
}

/*=================================================
        [item-component] story_item
=================================================*/
.component-wrap[data-id="story_item"] .item-wrap{
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 0.625rem;
}

.component-wrap[data-id="story_item"] .item-wrap .item-category{
    padding: 0.1875rem 0.3125rem;

    border-radius: 0.1875rem;

    background: var(--project-color-gray-50);

    font-size: var(--font-h5);
    color: var(--project-color-gray-400);
}

.component-wrap[data-id="story_item"] .item-wrap .item-content-wrap{
    display: flex;
    justify-content: space-between;
    flex-grow: 1;
    gap: 0.5rem;

    width: 100%;
}

.component-wrap[data-id="story_item"] .item-wrap .item-content-wrap .item-text-wrap{
    flex: 1;
    min-width: 0;
    overflow: hidden;
    word-break: break-word;
}

.component-wrap[data-id="story_item"] .item-wrap .item-content-wrap .item-text-wrap .item-title{
    font-size: var(--font-h4);
    font-weight: var(--font-weight-semibold);
}

.component-wrap[data-id="story_item"] .item-wrap .item-content-wrap .item-text-wrap .item-desc {
    font-size: var(--font-h5);
    color: var(--project-color-gray-400);

    /* --- 두 줄 고정 영역 확보 --- */
    line-height: 1.5;            /* 줄 높이 */
    min-height: calc(1.5em * 2 + 1rem); /* 항상 두 줄 높이는 보장됨 (내용 없어도) */

    /* --- 2줄까지만 보이고 넘치면 ... 처리 --- */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.component-wrap[data-id="story_item"] .item-wrap .item-content-wrap .item-image-wrap{
    flex: 0 0 4.1875rem;

    border-radius: 0.3125rem;

    overflow: hidden;
}

.component-wrap[data-id="story_item"] .item-wrap .item-bottom-wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;

    width: 100%;
}

.component-wrap[data-id="story_item"] .item-wrap .item-bottom-wrap .item-meta-wrap{
    display: flex;
    align-items: center;
    gap: 0.3125rem;
}

.component-wrap[data-id="story_item"] .item-wrap .item-bottom-wrap .item-meta-wrap .meta-item{
    display: flex;
    align-items: center;
    gap: 0.0938rem;
}

.component-wrap[data-id="story_item"] .item-wrap .item-bottom-wrap .item-meta-wrap .meta-item .meta-item-num{
    font-size: var(--font-h6);
}

.component-wrap[data-id="story_item"] .item-wrap .item-bottom-wrap .item-regdate{
    font-size: var(--font-h6);
    color: var(--project-color-gray-400);
}

/*=================================================
        [item-component] story_view
=================================================*/
.component-wrap[data-id="story_view"]{
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.component-wrap[data-id="story_view"] > .item-header{
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 0.625rem;
}

.component-wrap[data-id="story_view"] > .item-header > .item-category{
    padding: 0.1875rem 0.3125rem;
    border-radius: 0.1875rem;

    font-size: var(--font-h4);
    color: var(--project-color-gray-400);
    background: var(--project-color-gray-50);
}

.component-wrap[data-id="story_view"] > .item-body > .item-title{
    font-size: var(--font-h3);
    font-weight: var(--font-weight-bold);
}

.component-wrap[data-id="story_view"] > .item-body > .item-content{
    font-size: var(--font-h3);
    color: var(--project-color-gray-400);
}

.component-wrap[data-id="story_view"] > .item-bottom{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.component-wrap[data-id="story_view"] > .item-bottom > .item-meta-wrap{
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.component-wrap[data-id="story_view"] > .item-bottom > .item-meta-wrap{
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.component-wrap[data-id="story_view"] > .item-bottom > .item-meta-wrap > .meta-item{
    display: flex;
    align-items: center;
    gap: 0.1875rem;
}


.component-wrap[data-id="story_view"] > .item-bottom > .item-meta-wrap > .meta-item[data-type="like"].active .meta-item-icon svg path{
    fill: #D92B2B;
    stroke: #D92B2B;
}

.component-wrap[data-id="story_view"] > .item-bottom > .item-meta-wrap > .meta-item > .meta-item-num{
    margin-top: 0.1875rem;

    font-size: var(--font-h3);
    line-height: 1;
}

.component-wrap[data-id="story_view"] > .item-bottom > .item-regdate{
    font-size: var(--font-h5);
    color: var(--project-color-gray-400);
}

/*=================================================
        [item-component] select-review-area-wrap
=================================================*/
.select-review-area-wrap{
    display: inline-flex;
    justify-content: start;
    align-items: center;
    gap: 0.3125rem;

    padding: 0.3125rem 1.25rem;
    border: 1px solid var(--project-color-primary);
    border-radius: 0.3125rem;

    font-size: var(--font-h3);
    font-weight: var(--font-weight-semibold);

    color: var(--project-color-primary);

    background: #ffffff;
}

/*=================================================
        [item-component] review_item
=================================================*/
.component-wrap[data-id="review_item"] .item-wrap{
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 0.625rem;
}

.component-wrap[data-id="review_item"] .item-wrap .item-bdg{
    display: flex;
    gap: 0.1875rem;
    padding: 0.1875rem 0.3125rem;

    border-radius: 0.1875rem;

    font-size: var(--font-h5);
    font-weight: var(--font-weight-semibold);
    color: var(--project-color-gray-400);

    background: var(--project-color-gray-50);
}

.component-wrap[data-id="review_item"] .item-wrap .item-bdg.auth{
    color: var(--project-color-primary);

    background: var(--project-color-primary-50);
}

.component-wrap[data-id="review_item"] .item-wrap .item-bdg.auth svg path{
    fill: var(--project-color-primary);
}

.component-wrap[data-id="review_item"] .item-wrap .review-grade-wrapper{
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.component-wrap[data-id="review_item"] .item-wrap .review-grade-wrapper .item-grade-wrap{
    display: flex;
    align-items: center;
    gap: 0.125rem;
}

.component-wrap[data-id="review_item"] .item-wrap .review-grade-wrapper .item-dot{
    width: 0.125rem;
    height: 0.125rem;

    border-radius: 100%;

    background: var(--project-color-gray-400);
}

.component-wrap[data-id="review_item"] .item-wrap .review-grade-wrapper .item-regdate{
    font-size: var(--font-h5);
    color: var(--project-color-gray-400);
}

.component-wrap[data-id="review_item"] .item-wrap .item-image-wrap{
    width: 100%;
}

.component-wrap[data-id="review_item"] .item-wrap .item-tags-wrap{
    --tag-height: 21px;
    --tag-gap: 10px;

    display: flex;
    flex-wrap: wrap;
    gap: var(--tag-gap);

    max-height: calc(
            (var(--tag-height) * 3) +
            (var(--tag-gap) * 2)
    );

    overflow: hidden;
}

.component-wrap[data-id="review_item"] .item-wrap .item-tags-wrap .review-tag-item {
    padding: 0.1875rem 0.625rem;
    border: none;
    border-radius: 0.3125rem;
    font-size: var(--font-h6);
    color: var(--project-color-gray-600);
    background: var(--project-color-gray-50);
}

.component-wrap[data-id="review_item"] .item-wrap .item-content-wrap{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.component-wrap[data-id="review_item"] .item-wrap .item-content-wrap .item-content-group .group-title{
    margin-bottom: 0.425rem;

    font-size: var(--font-h5);
    font-weight: var(--font-weight-regular);

    color: var(--project-color-gray-400);
}

.component-wrap[data-id="review_item"] .item-wrap .item-content-wrap .item-content-group .group-content{
    font-size: var(--font-h5);
    font-weight: var(--font-weight-regular);

    /* --- 두 줄 고정 영역 확보 --- */
    line-height: 1.5;            /* 줄 높이 */
    min-height: calc(1.5em * 4 + 1rem); /* 항상 두 줄 높이는 보장됨 (내용 없어도) */

    /* --- 2줄까지만 보이고 넘치면 ... 처리 --- */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    text-overflow: ellipsis;
}

.component-wrap[data-id="review_item"] .item-wrap .item-bottom-wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;

    width: 100%;
}

.component-wrap[data-id="review_item"] .item-wrap .item-bottom-wrap .item-meta-wrap{
    display: flex;
    align-items: center;
    gap: 0.3125rem;
}

.component-wrap[data-id="review_item"] .item-wrap .item-bottom-wrap .item-meta-wrap .meta-item{
    display: flex;
    align-items: center;
    gap: 0.0938rem;
}

.component-wrap[data-id="review_item"] .item-wrap .item-bottom-wrap .item-meta-wrap .meta-item .meta-item-num{
    font-size: var(--font-h6);
}

/*=================================================
        [module-component] grade-form-wrap
=================================================*/
.grade-form-wrap{
    display: flex;
    flex-direction: row-reverse; /* ⭐ 핵심 */
    justify-content: center;
    align-items: center;
    gap: 0.1875rem;
}

.grade-form-wrap .grade-item{
    cursor: pointer;
}

/* 기본 */
.grade-form-wrap .grade-item svg path{
    fill: #E2E4E7;
    transition: fill .15s ease;
}

.grade-form-wrap .grade-item.active svg path,
.grade-form-wrap .grade-item.active ~ .grade-item svg path{
    fill: #FFC107;
}

/*=================================================
        [module-component] review-tag-item
=================================================*/
.review-tag-item {
    display: flex;
    align-items: center;
    gap: 0.3125rem;

    padding: 0.3125rem 0.625rem;
    border: 1px solid var(--project-color-gray-100);
    border-radius: 0.3125rem;

    font-size: var(--font-h4);
    color: var(--project-color-gray-600);

    background: #ffffff;
}

.btn-check:checked+.review-tag-item, .review-tag-item.active{
    border: 1px solid var(--project-color-primary);

    color: var(--project-color-primary);

    background: var(--project-color-primary-50);
}

.review-tag-item > .item-icon{
    line-height: 1;
}

.review-tag-item > .item-title{
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;

}

/*=================================================
        [module-component] dropzone-info
=================================================*/
.dropzone-info {
    display: flex;
    align-items: center;
    gap: 0.3125rem;

    margin-top: 0.3125rem;
}

.dropzone-info .info-text{
    font-size: var(--font-h5);
    color: var(--project-color-gray-600);
}

/*=================================================
        [item-component] review_cert_lists
=================================================*/
.component-wrap[data-id="review_cert_lists"]{
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.component-wrap[data-id="review_cert_lists"] .item-wrap .form-check-label{
    display: block;
    font-size: var(--font-h4);
    font-weight: var(--font-weight-semibold);
}

.component-wrap[data-id="review_cert_lists"] .item-wrap .item-label-wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.component-wrap[data-id="review_cert_lists"] .item-wrap .item-label-wrap .item-subtitle{
    font-size: var(--font-h5);
    font-weight: var(--font-weight-regular);
    color: var(--project-color-gray-400);
}

.component-wrap[data-id="review_cert_lists"] .item-wrap .item-label-wrap .item-status{
    padding: 0.3125rem 0.625rem;
    border-radius: 0.3125rem;

    font-weight: var(--font-weight-regular);
    color: var(--project-color-gray-600);

    background: var(--project-color-gray-50);
}

.component-wrap[data-id="review_cert_lists"] .item-wrap .item-label-wrap .item-status.on{
    color: var(--project-color-primary-600);

    background: var(--project-color-primary-50);
}

/*=================================================
        [item-component] review_view
=================================================*/
.component-wrap[data-id="review_view"]{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.component-wrap[data-id="review_view"] .item-header{
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 0.625rem;
}

.component-wrap[data-id="review_view"] .item-header .item-bdg{
    display: flex;
    gap: 0.1875rem;
    padding: 0.1875rem 0.3125rem;

    border-radius: 0.1875rem;

    font-size: var(--font-h5);
    font-weight: var(--font-weight-semibold);
    color: var(--project-color-gray-400);

    background: var(--project-color-gray-50);
}

.component-wrap[data-id="review_view"] .item-header .item-bdg.auth{
    color: var(--project-color-primary);

    background: var(--project-color-primary-50);
}

.component-wrap[data-id="review_view"] .item-header .item-bdg.auth svg path{
    fill: var(--project-color-primary);
}

.component-wrap[data-id="review_view"] .item-header .review-grade-wrapper{
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.component-wrap[data-id="review_view"] .item-header .review-grade-wrapper .item-grade-wrap{
    display: flex;
    align-items: center;
    gap: 0.125rem;
}

.component-wrap[data-id="review_view"] .item-header .review-grade-wrapper .item-dot{
    width: 0.125rem;
    height: 0.125rem;

    border-radius: 100%;

    background: var(--project-color-gray-400);
}

.component-wrap[data-id="review_view"] .item-header .review-grade-wrapper .item-regdate{
    font-size: var(--font-h5);
    color: var(--project-color-gray-400);
}

.component-wrap[data-id="review_view"] .item-header .item-image-wrap{
    width: 100%;
}

.component-wrap[data-id="review_view"] .item-header .item-tags-wrap{
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.component-wrap[data-id="review_view"] .item-header .item-tags-wrap .review-tag-item {
    padding: 0.1875rem 0.625rem;
    border: none;
    border-radius: 0.3125rem;
    font-size: var(--font-h6);
    color: var(--project-color-gray-600);
    background: var(--project-color-gray-50);
}

.component-wrap[data-id="review_view"] .item-body .item-content-wrap{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.component-wrap[data-id="review_view"] .item-body .item-content-wrap .item-content-group .group-title{
    margin-bottom: 0.625rem;

    font-size: var(--font-h5);
    font-weight: var(--font-weight-regular);
    color: var(--project-color-gray-400);
}

.component-wrap[data-id="review_view"] .item-body .item-content-wrap .item-content-group .group-content{
    font-size: var(--font-h5);
}

.component-wrap[data-id="review_view"] .item-body .item-meta-wrap{
    display: flex;
    gap: 0.3125rem;

    margin-top: 0.625rem;

    font-size: var(--font-h6);
}

.component-wrap[data-id="review_view"] .item-body .item-meta-wrap .meta-item{
    display: flex;
    align-items: center;
    gap: 0.1875rem;
}

.component-wrap[data-id="review_view"] .item-body .item-meta-wrap > .meta-item[data-type="like"].active .meta-item-icon svg path{
    fill: #D92B2B;
    stroke: #D92B2B;
}

/*=================================================
        [item-component] page-tab-wrap
=================================================*/
.page-tab-wrap{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.page-tab-wrap .page-tab-item{
    padding: 0.875rem 2.2813rem;
    border-bottom: 1px solid var(--project-color-gray-50);

    font-size: var(--font-h4);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    color: var(--project-color-gray-600);
}

.page-tab-wrap .page-tab-item.active{
    border-bottom: 2px solid #000000;

    color: #000000;
}

/*=================================================
        [item-component] page-tab-wrap
=================================================*/
.page-tab-wrap{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

/*=================================================
        [item-component] point_card
=================================================*/
.component-wrap[data-id="point_card"] .item-wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;

    padding: 1.5rem;
    border-radius: 0.625rem;

    color: #ffffff;

    background: var(--project-color-primary);
}

.component-wrap[data-id="point_card"] .item-wrap .item-text-wrap .item-title{
    font-size: var(--font-h3);
    font-weight: var(--font-weight-regular);
}

.component-wrap[data-id="point_card"] .item-wrap .item-text-wrap .item-value{
    font-size: var(--font-h1);
    font-weight: var(--font-weight-bold);
}

.component-wrap[data-id="point_card"] .item-wrap .item-btn-wrap .item-btn{
    padding: 0.3125rem 0.625rem;
    border-radius: 0.3125rem;

    font-size: var(--font-h4);
    font-weight: var(--font-weight-semibold);
    color: var(--project-color-primary-500);

    background: #ffffff;
}

/*=================================================
        [lists-component] point_history_lists
=================================================*/
.component-wrap[data-id="point_history_lists"] .lists-sorting-wrap{
    display: flex;
    justify-content: end;

    margin-bottom: 1rem;
}

.component-wrap[data-id="point_history_lists"] .lists-sorting-wrap .lists-sorting_btn{
    display: flex;
    align-items: center;
    gap: 0.3125rem;

    font-size: var(--font-h4);
}


.component-wrap[data-id="point_history_lists"] .lists-wrap{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.component-wrap[data-id="point_history_lists"] .item-divider{
    width: 100%;
    height: 1px;

    background: var(--project-color-gray-100);
}

.component-wrap[data-id="point_history_lists"] .item-divider:first-child{
    display: none;
}

/*=================================================
        [item-component] point_history_item
=================================================*/
.component-wrap[data-id="point_history_item"] .item-top-wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;

    font-size: var(--font-h3);
    font-weight: var(--font-weight-semibold);
}

.component-wrap[data-id="point_history_item"] .item-bottom-wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;

    margin-top: 0.5rem;

    font-size: var(--font-h4);
    font-weight: var(--font-weight-regular);
    color: var(--project-color-gray-600);
}

/*=================================================
        [lists-component] noti_lists
=================================================*/
.component-wrap[data-id="noti_lists"] .lists-item:not(:last-child){
    border-bottom: 1px solid var(--project-color-gray-100);
}

/*=================================================
        [item-component] noti_item
=================================================*/
.component-wrap[data-id="noti_item"] .item-wrap{
    display: grid;
    grid-template-columns: 1.5625rem 1fr;
    gap: 0.3125rem;

    padding: 0.75rem;
}

.component-wrap[data-id="noti_item"] .item-wrap.unread{
    background: var(--project-color-primary-50);
}

.component-wrap[data-id="noti_item"] .item-wrap .item-icon-wrap{
    width: 1.5625rem;
    height: 1.5625rem;

    padding: 0.375rem;
    box-sizing: border-box;

    border-radius: 100%;
    background: var(--project-color-gray-50);

    display: flex;
    align-items: center;
    justify-content: center;
}

.component-wrap[data-id="noti_item"] .item-wrap .item-icon-wrap svg{
    width: 100%;   /* 13px */
    height: 100%;

    max-width: 100%;
    max-height: 100%;
}

.component-wrap[data-id="noti_item"] .item-wrap .item-text-wrap{
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
}

.component-wrap[data-id="noti_item"] .item-wrap .item-text-wrap .item-title{
    font-size: var(--font-h5);
}

.component-wrap[data-id="noti_item"] .item-wrap .item-text-wrap .item-desc{
    font-size: var(--font-h5);
    font-weight: var(--font-weight-semibold);
}

.component-wrap[data-id="noti_item"] .item-wrap .item-text-wrap .item-regdate{
    font-size: var(--font-h6);
    color: var(--project-color-gray-400);
}

/*=================================================
        [lists-component] keyword_lists
=================================================*/
.component-wrap[data-id="keyword_lists"] .keyword-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.3rem;
}

.component-wrap[data-id="keyword_lists"] .keyword-header .keyword-header-title-wrap{
    display: flex;
    align-items: center;
    gap: 0.3125rem;

    font-size: var(--font-h4);
}

.component-wrap[data-id="keyword_lists"] .keyword-header .keyword-header-title-wrap .keyword-header-title{
    font-weight: var(--font-weight-semibold);
}

.component-wrap[data-id="keyword_lists"] .keyword-header .keyword-header-title-wrap .keyword-header-count{
    color: var(--project-color-gray-400);
}


.component-wrap[data-id="keyword_lists"] .keyword-header .keyword-header-btn{
    padding: 0.3125rem 0.9375rem;
    border: 1px solid var(--project-color-gray-100);
    border-radius: 0.3125rem;

    font-size: var(--font-h4);
}

.component-wrap[data-id="keyword_lists"] .keyword-body{
    display: flex;
    flex-direction: column;
    gap: 1.25rem;

    margin-top: 0.625rem;
}

.component-wrap[data-id="keyword_lists"] .keyword-body .item-wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 0.625rem;
    border-radius: 0.3125rem;

    background: var(--project-color-gray-50);
}


/*=================================================
        [item-component] faq_item
=================================================*/
.component-wrap[data-id="faq_item"] .accordion-button{
    padding: 1rem 0;
}

.component-wrap[data-id="faq_item"] .accordion-button:not(.collapsed) {
    font-weight: var(--font-weight-semibold);
    color: #000000;
    background-color: #ffffff;

    box-shadow: none;
}

.component-wrap[data-id="faq_item"] .accordion-button span{
    margin-right: 0.625rem;
    font-size: var(--font-h2);
    font-weight: var(--font-weight-semibold);
    color: var(--project-color-primary);
}

.component-wrap[data-id="faq_item"] .accordion-body{
    padding: 0;
}

.component-wrap[data-id="faq_item"] .accordion-body .accordion-body-content{
    padding: 1rem 1.5rem;
    border-radius: 0.3125rem;

    font-size: var(--font-h5);

    background: var(--project-color-gray-50);
}







































.bold-divider{
    width: 100%;
    height: 1rem;

    background: var(--project-color-gray-50);
}