@charset "UTF-8";

/*
    components, block 관련 style을 여기에 정의합니다.
    이 파일은 all.css에서 import되어 사용됩니다.
*/

/*--v icon ---------------------------------------------------------------------------------------*/
.hi::before {
    margin-left: 0;
    margin-right: 0;
    font-size: 24px;
}

.icon-date {
    display: flex;
    align-items: center;
    gap: 2px;
}
.icon-date::before {
    content: "\E800"; /* khi-calendar */
    font-family: "khepi-icons";
    font-size: 20px;
    letter-spacing: 0;
    width: 24px;
}

.link-before-icon,
.link-after-icon {
    position: relative;
}
.link-before-icon::before,
.link-after-icon::after {
    font-family: "khepi-icons";
    font-size: 14px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.link-after-icon.arrow::after {
    content: "\E805";
    left: calc(100% + 6px);
}
.link-before-icon.arrow::before {
    content: "\E807";
    right: calc(100% + 4px);
}
.link-before-icon.arrow-turn-down-right::before {
    content: "\E819";
    right: calc(100% + 4px);
}

/* 금연 Level Icon */
.icon-level {
    width: 50px;
    height: 20px;
    min-width: 50px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
.icon-level::before {
    content: "";
    width: 17px;
    height: 17px;
    background-size: cover;
}
.icon-level.level-01::before {
    background-image: url(../../../img/icon_2/level/lv_01.png);
}
.icon-level.level-02::before {
    background-image: url(../../../img/icon_2/level/lv_02.png);
}
.icon-level.level-03::before {
    background-image: url(../../../img/icon_2/level/lv_03.png);
}
.icon-level.level-04::before {
    background-image: url(../../../img/icon_2/level/lv_04.png);
}
.icon-level.level-05::before {
    background-image: url(../../../img/icon_2/level/lv_05.png);
}
.icon-level.level-06::before {
    background-image: url(../../../img/icon_2/level/lv_06.png);
}
.icon-level.level-07::before {
    background-image: url(../../../img/icon_2/level/lv_07.png);
}
.icon-level.level-08::before {
    background-image: url(../../../img/icon_2/level/lv_08.png);
}
.icon-level.level-09::before {
    background-image: url(../../../img/icon_2/level/lv_09.png);
}
.icon-level.level-10::before {
    background-image: url(../../../img/icon_2/level/lv_10.png);
}
.icon-level.level-11::before {
    background-image: url(../../../img/icon_2/level/lv_11.png);
}
.icon-level.level-12::before {
    background-image: url(../../../img/icon_2/level/lv_12.png);
}
.icon-level.level-13::before {
    background-image: url(../../../img/icon_2/level/lv_13.png);
}
.icon-level.level-14::before {
    background-image: url(../../../img/icon_2/level/lv_14.png);
}

.icon-level::after {
    margin-top: 1px;
    /* font-family: sans-serif; */
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: #e65100;
}
.icon-level.level-01::after {
    content: "Lv.1";
}
.icon-level.level-02::after {
    content: "Lv.2";
}
.icon-level.level-03::after {
    content: "Lv.3";
}
.icon-level.level-04::after {
    content: "Lv.4";
}
.icon-level.level-05::after {
    content: "Lv.5";
}
.icon-level.level-06::after {
    content: "Lv.6";
}
.icon-level.level-07::after {
    content: "Lv.7";
}
.icon-level.level-08::after {
    content: "Lv.8";
}
.icon-level.level-09::after {
    content: "Lv.9";
}
.icon-level.level-10::after {
    content: "Lv.10";
}
.icon-level.level-11::after {
    content: "Lv.11";
}
.icon-level.level-12::after {
    content: "Lv.12";
}
.icon-level.level-13::after {
    content: "Lv.13";
}
.icon-level.level-14::after {
    content: "Lv.14";
}

.level-circle-wrap {
    text-align: center;
}
.level-circle-wrap .level {
    font-size: 20px;
    line-height: 30px;
}
.icon-level-circle {
    display: inline-flex;
    width: 30px;
    height: 30px;
    min-width: 30px;
    /* min-width: 30px; min-height: 30px; */
    border-radius: 30px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
    background-color: var(--base-bg1-color);
    overflow: hidden;
    color: transparent;
}
.icon-level-circle.level-01 {
    background-image: url(../../../img/icon_2/level/lv_01.png);
}
.icon-level-circle.level-02 {
    background-image: url(../../../img/icon_2/level/lv_02.png);
}
.icon-level-circle.level-03 {
    background-image: url(../../../img/icon_2/level/lv_03.png);
}
.icon-level-circle.level-04 {
    background-image: url(../../../img/icon_2/level/lv_04.png);
}
.icon-level-circle.level-05 {
    background-image: url(../../../img/icon_2/level/lv_05.png);
}
.icon-level-circle.level-06 {
    background-image: url(../../../img/icon_2/level/lv_06.png);
}
.icon-level-circle.level-07 {
    background-image: url(../../../img/icon_2/level/lv_07.png);
}
.icon-level-circle.level-08 {
    background-image: url(../../../img/icon_2/level/lv_08.png);
}
.icon-level-circle.level-09 {
    background-image: url(../../../img/icon_2/level/lv_09.png);
}
.icon-level-circle.level-10 {
    background-image: url(../../../img/icon_2/level/lv_10.png);
}
.icon-level-circle.level-11 {
    background-image: url(../../../img/icon_2/level/lv_11.png);
}
.icon-level-circle.level-12 {
    background-image: url(../../../img/icon_2/level/lv_12.png);
}
.icon-level-circle.level-13 {
    background-image: url(../../../img/icon_2/level/lv_13.png);
}
.icon-level-circle.level-14 {
    background-image: url(../../../img/icon_2/level/lv_14.png);
}

/*--v Icon Button */
.btn.btn-icon {
    gap: 4px;
}
.btn.btn-icon > .icon-18,
.btn.btn-icon > .icon-20,
.btn.btn-icon > .icon-24,
.btn.btn-icon > .icon-30,
.btn.btn-icon > .icon-40 {
    background-position: center;
    background-repeat: no-repeat;
}
.btn.btn-icon > .icon-18 {
    width: 18px;
    height: 18px;
    background-size: 18px;
}
.btn.btn-icon > .icon-20 {
    width: 20px;
    height: 20px;
    background-size: 20px;
}
.btn.btn-icon > .icon-24 {
    width: 24px;
    height: 24px;
    background-size: 24px;
}
.btn.btn-icon > .icon-30 {
    width: 30px;
    height: 30px;
    background-size: 30px;
}
.btn.btn-icon > .icon-40 {
    width: 40px;
    height: 40px;
    background-size: 40px;
}

.btn.btn-icon > .icon-18.external-link-dark {
    background-image: url(../../../img/icon_2/external-link-dark-18.svg);
}
.btn.btn-icon > .icon-18.external-link-body {
    background-image: url(../../../img/icon_2/external-link-body-18.svg);
}
.btn.btn-icon:focus > .icon-18.external-link-body,
.btn.btn-icon:hover > .icon-18.external-link-body {
    background-image: url(../../../img/icon_2/external-link-white-18.svg);
}

.btn.btn-icon > .icon-24.list-ul {
    background-image: url(../../../img/icon_2/list-ul-dark-24.svg);
}
.btn.btn-icon > .icon-24.list-ul-primary,
.btn.btn-icon:focus > .icon-24.list-ul,
.btn.btn-icon:hover > .icon-24.list-ul {
    background-image: url(../../../img/icon_2/list-ul-white-24.svg);
}
.btn.btn-icon:focus > .icon-24.list-ul-primary,
.btn.btn-icon:hover > .icon-24.list-ul-primary {
    background-image: url(../../../img/icon_2/list-ul-primary-24.svg);
}

.btn.btn-icon > .icon-24.thumbs-up-info {
    background-image: url(../../../img/icon_2/thumbs-up-info-24.svg);
}
.btn.btn-icon.active > .icon-24.thumbs-up-info,
.btn.btn-icon:focus > .icon-24.thumbs-up-info,
.btn.btn-icon:hover > .icon-24.thumbs-up-info {
    background-image: url(../../../img/icon_2/thumbs-up-white-24.svg);
}

.btn.btn-icon > .icon-24.paperclip {
    background-image: url(../../../img/icon_2/paperclip-white-24.svg);
}

.btn.btn-icon > .icon-30.chat-bubble-circle-primary {
    background-image: url(../../../img/icon_2/chat-bubble-circle-primary-30.svg);
}

.btn.btn-icon[class*="btn-outline-"] > .icon-40.check-circle {
    background-image: url(../../../img/icon_2/check-circle-body-40.svg);
}
.btn.btn-icon[class*="btn-outline-"]:active > .icon-40.check-circle,
.btn.btn-icon[class*="btn-outline-"]:focus-visible > .icon-40.check-circle,
.btn.btn-icon[class*="btn-outline-"]:hover > .icon-40.check-circle {
    background-image: url(../../../img/icon_2/check-circle-white-40.svg);
}
.btn.btn-icon > .icon-40.check-circle {
    background-image: url(../../../img/icon_2/check-circle-white-40.svg);
}

.btn.btn-icon[class*="btn-outline-"] > .icon-40.play-circle {
    background-image: url(../../../img/icon_2/play-circle-body-40.svg);
}
.btn.btn-icon[class*="btn-outline-"]:active > .icon-40.play-circle,
.btn.btn-icon[class*="btn-outline-"]:focus-visible > .icon-40.play-circle,
.btn.btn-icon[class*="btn-outline-"]:hover > .icon-40.play-circle {
    background-image: url(../../../img/icon_2/play-circle-white-40.svg);
}
.btn.btn-icon > .icon-40.play-circle {
    background-image: url(../../../img/icon_2/play-circle-white-40.svg);
}

.btn.btn-icon[class*="btn-outline-"] > .icon-40.setting {
    background-image: url(../../../img/icon_2/setting-body-40.svg);
}
.btn.btn-icon[class*="btn-outline-"]:active > .icon-40.setting,
.btn.btn-icon[class*="btn-outline-"]:focus-visible > .icon-40.setting,
.btn.btn-icon[class*="btn-outline-"]:hover > .icon-40.setting {
    background-image: url(../../../img/icon_2/setting-white-40.svg);
}
.btn.btn-icon > .icon-40.setting {
    background-image: url(../../../img/icon_2/setting-white-40.svg);
}

.btn.btn-icon[class*="btn-outline-"] > .icon-40.stop-circle {
    background-image: url(../../../img/icon_2/stop-circle-body-40.svg);
}
.btn.btn-icon[class*="btn-outline-"]:active > .icon-40.stop-circle,
.btn.btn-icon[class*="btn-outline-"]:focus-visible > .icon-40.stop-circle,
.btn.btn-icon[class*="btn-outline-"]:hover > .icon-40.stop-circle {
    background-image: url(../../../img/icon_2/stop-circle-white-40.svg);
}
.btn.btn-icon > .icon-40.stop-circle {
    background-image: url(../../../img/icon_2/stop-circle-white-40.svg);
}
/*--^ icon ---------------------------------------------------------------------------------------*/

/*--v Button -------------------------------------------------------------------------------------*/
.btn {
    min-width: 120px;
}
.btn-ts {
    height: 24px;
    min-width: 0;
    margin-top: -4px;
    padding: 0 12px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    display: inline-flex;
    gap: 2px;
}
.btn-ts i {
    font-size: 12px;
}
.btn-xs {
    height: 36px;
    min-width: 0;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    display: inline-flex;
}
.btn-sm {
    border-radius: 10px;
}
.btn-circle,
.btn-square {
    width: 60px;
    height: 60px;
    min-width: unset;
    padding: 0 !important;
}
.btn-circle {
    border-radius: 60px !important;
}
.btn-ts.btn-circle,
.btn-ts.btn-square {
    width: 24px;
    height: 24px;
}
.btn-xs.btn-circle,
.btn-xs.btn-square {
    width: 36px;
    height: 36px;
}
.btn-sm.btn-circle,
.btn-sm.btn-square {
    width: 40px;
    height: 40px;
}
.btn-pill {
    border-radius: 100px !important;
}
.btn-append-icon {
    padding-right: 24px !important;
    gap: 10px;
}
.btn-shadow {
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 20%);
}
.btn.bg-white:active,
.btn.bg-white:focus-visible,
.btn.bg-white:hover {
    color: var(--bs-btn-hover-border-color);
}

.btn-search {
    min-width: 120px;
    padding: 0 32px 0 28px;
    font-weight: 600 !important;
    justify-content: center;
    gap: 4px;
}
.btn-search i.hi-search {
    font-size: 24px;
}

/* .custom-input (checkbox) invalue-feedbaack 위치 지정 */
.btn-group.feedback {
    position: relative;
}
.btn-group.feedback .invalid-feedback {
    position: absolute;
    top: calc(100% - 10px);
    left: 0;
}
.was-validated .feedback .custom-control .btn-check:invalid + .custom-label,
.feedback .custom-control .btn-check.is-invalid + .custom-label {
    margin-bottom: 20px;
}

/* collapse 버튼 & header/body */
.btn-collapse i {
    transform: rotate(0deg);
    transition: transform ease-in-out 0.3s;
}
.btn-collapse[aria-expanded="true"] i {
    transform: rotate(180deg);
    transition: transform ease-in-out 0.3s;
}
.collapse-item {
    position: relative;
}
.collapse-item .btn-collapse {
    width: var(--collapse-header-height);
    height: var(--collapse-header-height);
    border-radius: 0 var(--collapse-header-border-radius) var(--collapse-header-border-radius) 0;
    border-radius: 0 var(--collapse-header-border-radius) var(--collapse-header-border-radius) 0;
    position: absolute;
    top: 0;
    right: 0;
}
.collapse-item .btn-collapse[aria-expanded="true"] {
    border-radius: 0 var(--collapse-header-border-radius) 0 0;
}
.collapse-item .collapse-header {
    height: var(--collapse-header-height);
    padding: 0 20px;
    border: solid 1px var(--collapse-border-color);
    border-radius: var(--collapse-header-border-radius);
    display: flex;
    align-items: center;
}
.collapse-item .btn-collapse[aria-expanded="true"] + .collapse-header {
    border-radius: var(--collapse-header-border-radius) var(--collapse-header-border-radius) 0 0;
}

/* 이미지로 full 채워지는 아이콘 */
.btn-icon-full {
    min-width: 0 !important;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}
.btn-icon-full:focus,
.btn-icon-full:hover,
.btn-icon-full:active {
    background-color: transparent !important;
}

button.btn-link {
    height: unset;
    min-width: unset;
    padding: 0;
    line-height: 1.5;
}

/* .btn-banner 금연시계 상단 금연시계란? 유형 버튼 */
.btn-banner {
    width: 100%;
    height: 120px;
    padding: 30px 40px;
    border-radius: 20px;
    justify-content: flex-start;
    font-size: 24px;
    font-weight: 600;
    gap: 20px;
}

.link {
    font-weight: 600;
    text-decoration: none;
    border-bottom: solid 1px;
    line-height: 1;
}
.link.disabled,
.link:disabled {
    opacity: 0.7;
    pointer-events: none;
    cursor: default;
}

.link-hover,
.link-hover-primary,
.link-hover-info,
.link-hover-warning,
.link-hover-dark {
    border-bottom-color: transparent;
}
.link-hover:not(.disabled):hover {
    border-bottom-color: var(--bs-body-color);
}
.link-hover-primary:not(.disabled):hover {
    border-bottom-color: var(--bs-primary);
    color: var(--bs-dark);
}
.link-hover-info:not(.disabled):hover {
    border-bottom-color: var(--bs-info);
    color: var(--bs-info);
}
.link-hover-warning:not(.disabled):hover {
    border-bottom-color: var(--bs-warning);
    color: var(--bs-warning);
}
.link-hover-dark:not(.disabled):hover {
    border-bottom-color: var(--bs-dark);
    color: var(--bs-dark);
}

/* input readonly일때 박스형태를 숨기기 */
.form-control.text {
    border: 0;
    background-color: transparent;
}

/* 검색창(.form-control) 안쪽 맨 뒤에 돋보기 아이콘 */
.form-control.icon-search {
    padding-right: 50px;
    background-image: url(../../../img/icon_2/search-dark-20.svg);
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center right 20px;
}

/* 설문, 자가진단에서 사용하는 큰 라디오 버튼 */
.custom-control.size-sm .form-check-input[type="radio"],
.custom-control.size-sm .form-check-input.circle-type[type="checkbox"],
.custom-control.size-md .form-check-input[type="radio"],
.custom-control.size-md .form-check-input.circle-type[type="checkbox"],
.custom-control.size-lg .form-check-input[type="radio"],
.custom-control.size-lg .form-check-input.circle-type[type="checkbox"] {
    --bs-form-check-bg-image: url(../../../img/common/blank.png);
    background-color: white;
    width: 40px;
    height: 40px;
    /* 웹접근성(항목8): 설문/자가진단 라디오 외곽선 명도대비 3:1 이상 (기존 #cccccc=1.6:1) */
    border: solid 1px #767676;
    cursor: pointer;
}
.custom-control.size-sm .form-check-input[type="radio"],
.custom-control.size-sm .form-check-input.circle-type[type="checkbox"] {
    margin-top: 10px;
    margin-bottom: 10px;
}
.custom-control.size-md .form-check-input[type="radio"],
.custom-control.size-md .form-check-input.circle-type[type="checkbox"] {
    width: 50px;
    height: 50px;
    margin-top: 5px;
    margin-bottom: 5px;
}
.custom-control.size-lg .form-check-input[type="radio"],
.custom-control.size-lg .form-check-input.circle-type[type="checkbox"] {
    width: 60px;
    height: 60px;
}
.custom-control.size-sm .form-check-input:checked[type="radio"],
.custom-control.size-sm .form-check-input.circle-type:checked[type="checkbox"],
.custom-control.size-md .form-check-input:checked[type="radio"],
.custom-control.size-md .form-check-input.circle-type:checked[type="checkbox"],
.custom-control.size-lg .form-check-input:checked[type="radio"],
.custom-control.size-lg .form-check-input.circle-type:checked[type="checkbox"] {
    --bs-form-check-bg-image: url(../../../img/icon_2/check-circle-on-primary.svg);

    border: 0;
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 10%);
}

/* 해시 버튼 / 닉네임 버튼 */
.nickname-list,
.hash-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.btn-nickname {
    height: 44px;
    min-width: 0;
    padding: 0 20px;
    border: solid 1px var(--base-border-color);
    border-radius: 10px;
    font-size: 18px;
    background-color: white;
    gap: 5px;
}
.btn-hash {
    height: 44px;
    max-width: 120px;
    min-width: 0;
    padding: 0 20px;
    border: solid 1px var(--base-border-color);
    border-radius: 10px;
    font-size: 18px;
    background-color: white;
    gap: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}
.btn-nickname.btn-xs,
.btn-hash.btn-xs {
    height: 36px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 400;
}
.btn-nickname.active,
.btn-hash.active {
    font-weight: 600;
    background-color: white;
    color: var(--base-title-color);
}
.btn-nickname:hover,
.btn-hash:hover {
    border: solid 1px var(--base-border-color);
    background-color: white;
}
.btn-nickname:focus,
.btn-hash:focus {
    background-color: white;
    outline: -webkit-focus-ring-color auto 1px;
}
.btn-nickname > button,
.btn-hash > button {
    padding: 0;
    border: 0;
    background-color: transparent;
    font-size: 16px;
    font-weight: 500;
}
.btn-nickname .btn-delete,
.btn-hash .btn-delete {
    width: 18px;
    height: 18px;
    margin-right: -5px;
    border-radius: 18px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
}
.nickname-list {
    padding-left: 10px;
}
.btn-nickname {
    background-color: var(--base-bg1-color);
    border-color: var(--base-line2-color);
    border-radius: 6px;
}
.btn-nickname button {
    color: var(--bs-body-color);
    font-weight: 400;
}

.btn.rounded-pill {
    height: 60px;
    background-color: transparent;
}
.btn.append-icon {
    padding-left: 29px;
    padding-right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.btn.h-42 {
    height: 42px;
    font-size: 18px;
    font-weight: 500;
}
.btn.append-icon.h-42 .icon {
    font-size: 18px;
}

/* Big Tab 버튼 */
.big-tab-buttons-wrap {
    width: 100%;
    border-bottom: 0;
    display: grid;
    gap: 20px 10px !important;
}
.big-tab-buttons-wrap li.nav-item,
.big-tab-buttons-wrap .custom-control {
    flex: 1 1 20%;
    height: 60px;
}
.big-tab-buttons-wrap li.nav-item .btn,
.big-tab-buttons-wrap .custom-control .btn {
    width: 100%;
    height: 100%;
    border-radius: 60px;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.big-tab-buttons-wrap li.nav-item .btn.btn-white {
    background-color: white;
}
/* 웹접근성: 빅탭 버튼 키보드 초점 표시 */
.big-tab-buttons-wrap li.nav-item .btn:focus-visible {
    outline: 3px solid #222222;
    outline-offset: 2px;
}
.big-tab-buttons-wrap li.nav-item .btn.active,
.big-tab-buttons-wrap .btn-check:checked + .btn {
    font-weight: 600;
    border-color: #222222 !important;
    background-color: #222222 !important;
    color: white !important;
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
}

/* 서브 탭 UI : 금연자료실, 정기발간물 */
.big-tab-buttons-wrap {
    position: relative;
}
.big-tab-buttons-wrap .nav-item.has-sub-tabs.active {
    margin-bottom: 140px;
}
.big-tab-buttons-wrap .nav-item .sub-tab-wrap {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
}
.big-tab-buttons-wrap .nav-item.active .sub-tab-wrap {
    display: flex;
}
.sub-tab-wrap {
    width: 100%;
    justify-content: center;
    border-top: solid 1px var(--bs-border-color);
    border-bottom: 0;
}
.sub-tab-wrap > .nav-tabs {
    margin-bottom: unset;
    border: 0;
    /* background-color: transparent; */
}
.sub-tab-wrap > .nav-tabs .nav-link {
    min-width: 180px;
    height: 60px;
    border: solid 0px transparent;
    border-radius: 0;
    font-weight: 500;
    text-align: center;
    color: var(--bs-secondary);
}
.sub-tab-wrap > .nav-tabs .btn-check:checked + .nav-link {
    color: var(--bs-info);
    font-weight: 600;
    position: relative;
}
.sub-tab-wrap > .nav-tabs .btn-check:checked + .nav-link::after {
    content: " ";
    width: 100%;
    height: 2px;
    top: -1px;
    border: solid 1px var(--bs-info);
    position: absolute;
    top: -1px;
    left: 0;
}
/*--^ Button -------------------------------------------------------------------------------------*/

/* Table (Bootratrp table) */
.table {
    margin-bottom: 0;
    border-top: solid 1px #222222;
    table-layout: fixed;
}
.table th {
    height: 60px;
    font-weight: 500;
}
.table td {
    /* min-height: 60px; */
    padding: 18px 20px;
    vertical-align: middle;
}
.table tr:last-child td {
    border-bottom: 0;
}
.table tr th:first-child,
.table tr td:first-child {
    padding-left: 0;
}
.table tr th:last-child,
.table tr td:last-child {
    padding-right: 0;
}
.table.nowrap td {
    white-space: nowrap;
}
.table.table-bordered th:first-child,
.table.table-bordered td:first-child {
    border-left: 0;
}
.table.table-bordered th:last-child,
.table.table-bordered td:last-child {
    border-right: 0;
}
.table tbody.no-data td {
    height: 180px;
    text-align: center;
    vertical-align: middle;
}

.table-wrap {
    position: relative;
}
.table-wrap .table-foot {
    height: 60px;
    padding: 0 20px;
    display: flex;
    align-items: center;
}
.table-wrap .table-foot .button-block-wrap {
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.table-wrap .table-foot .button-block-wrap .btn {
    min-width: 0;
}

.table-wrap .table-top-buttons-wrap {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    position: absolute;
    top: 0;
    right: 0;
}
.table-wrap .table-top-buttons-wrap button {
    min-width: 180px;
}

.table-wrap.form-type {
    padding: 40px 0;
    border-bottom: solid 1px var(--base-line2-color);
}
.table-wrap.form-type:first-child,
.table-wrap.form-type.border-top-1 {
    border-top: solid 1px var(--base-line2-color);
}
.table-wrap.form-type > .table {
    table-layout: fixed;
    margin-bottom: 0;
    border: 0;
}
.table-wrap.form-type > .table th,
.table-wrap.form-type > .table td {
    padding: 20px 5px;
    border: 0;
    vertical-align: top;
}
/* .table-wrap.form-type > .table td .comment {
	margin-top: 20px;
	font-size: 16px;	
} */
.table-wrap.form-type > .table td .d-flex {
    align-items: center;
    gap: 10px;
}
.table-wrap.form-type > .table th:first-child,
.table-wrap.form-type > .table td:first-child {
    padding-left: 0;
}
.table-wrap.form-type > .table th:last-child,
.table-wrap.form-type > .table td:last-child {
    padding-right: 0;
}
.table-wrap.form-type > .table .form-label {
    margin-bottom: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--bs-dark);
}
.table-wrap.form-type > .table th .form-label {
    line-height: 60px;
}
.table-wrap.form-type > .table td .form-label {
    line-height: 30px;
}
.table-wrap.form-type > .table td > *:not(:first-child) {
    margin-top: 10px;
}
.table-wrap.form-type .grid-wrap {
    margin-top: 10px;
    display: grid;
    gap: 20px;
}
.table-wrap.form-type .flex-wrap {
    margin-top: 10px;
    display: flex;
    gap: 20px;
}

.table-wrap.list-type > .table {
    border-top: solid 2px var(--bs-dark);
    border-bottom: solid 1px var(--bs-border-color);
}
.table-wrap.list-type > .table th {
    font-weight: 600;
    text-align: center;
    vertical-align: middle;
    color: var(--bs-dark);
    background-color: var(--base-table-th-bg-color);
}
.table-wrap.list-type > .table tbody th {
    border-right: solid 1px var(--bs-border-color);
}
.table-wrap.list-type > .table th {
    padding: 0 20px;
}
.table-wrap.list-type > .table td {
    padding: 16px 20px;
}

.form-label .required,
.table-wrap .table .required {
    color: var(--bs-primary);
}
.table-wrap .table caption {
    caption-side: top;

    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 600;
    line-height: 30px;
    color: var(--bs-dark);
}
.table-wrap .table td {
    word-break: keep-all;
}
.table-footer-outside {
    margin-top: 20px;
    font-size: 16px;
}
.table-layout-auto {
    table-layout: auto !important;
}

/*--v Datatabe.net -------------------------------------------------------------------------------*/
/* KHEPi용으로 추가한 클래스는 이를 구분하기 위해 클래스명에 'kh-'를 붙임 */
.dt-info {
    display: flex;
    align-items: flex-end;
    height: 60px;
}
.dt-info > h3 {
    line-height: 60px;
}
.dt-length .form-select {
    width: 240px !important;
    height: 60px !important;
    margin-right: 0 !important;
    font-size: 18px;
    display: inline-block;
}
.dt-buttons {
    margin-left: 10px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.dt-buttons .dt-button {
    min-width: 180px;
    font-weight: 600;
}
.dt-paging {
    margin-top: 60px !important;
}
.dt-paging .pagination {
    justify-content: center;
}

/* 등록된 정보가 없습니다. */
table.dataTable td.dt-empty {
    height: 600px; /* 10줄 기준 */
    vertical-align: middle;
    text-align: center;
}
/* .dt-empty-footer .dt-paging {
    display: none;
} */

.table-top-wrap .dt-info + .dt-length,
.table-top-wrap .dt-info + .dt-buttons {
    margin-left: auto;
}
.dt-processing.card {
    border: 0;
}
.dt-processing.card + table.dataTable,
.table-top-wrap + table.dataTable {
    margin-top: 30px;
}

table.dataTable {
    border-top-width: 2px;
    border-bottom: solid 1px var(--bs-border-color);
}
table.dataTable thead th {
    font-weight: 600;
    color: var(--bs-dark);
    background-color: var(--base-table-th-bg-color) !important;
    text-align: center;
}
table.dataTable thead th,
table.dataTable td {
    padding: 16px;
}
table.dataTable tbody tr.selected > * {
    color: inherit !important;
    background-color: var(--base-bg2-color);
    box-shadow: unset !important;
}
table.dataTable td .link {
    font-weight: 400;
}
table.dataTable td .btn {
    display: inline-flex;
    align-items: center;
}
table.dataTable td .btn.btn-sm {
    height: 36px;
    min-width: 0;
    padding: 2px 20px 0 20px;
    font-size: 16px;
    gap: 4px;
}
table.dataTable td .btn.btn-sm i {
    margin-bottom: 2px;
}

/* Sort Icon */
table.dataTable th.dt-orderable-asc,
table.dataTable th.dt-orderable-desc {
    padding-right: 16px !important;
}
table.dataTable th.dt-orderable-asc span.dt-column-title,
table.dataTable th.dt-orderable-desc span.dt-column-title {
    border-bottom: solid 1px var(--bs-dark);
}
table.dataTable th.dt-orderable-asc span.dt-column-order,
table.dataTable th.dt-orderable-desc span.dt-column-order {
    margin-left: 2px;
    resize: none; /* 크기 변경 불가 */
    position: relative !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}
table.dataTable th.dt-orderable-desc:not(.dt-ordering-asc) .dt-column-order::before,
table.dataTable th.dt-orderable-asc:not(.dt-ordering-desc) .dt-column-order::after {
    display: none !important;
}
table.dataTable thead .dt-ordering-asc .dt-column-order::before,
table.dataTable thead .dt-ordering-desc .dt-column-order::after {
    top: 0 !important;
    bottom: 0 !important;
    opacity: 1 !important;
}
table.dataTable thead .dt-ordering-asc .dt-column-order::before {
    content: url(../../../img/icon_2/sort-up-dark-20.svg) !important; /* 오름차순 아이콘 */
}
table.dataTable thead .dt-ordering-desc .dt-column-order::after {
    content: url(../../../img/icon_2/sort-down-dark-20.svg) !important; /* 내림차순 아이콘 */
}

/* DataTable th 내 .dropdown */
table.dataTable th .dropdown-toggle {
    cursor: pointer;
}
table.dataTable th .dropdown-toggle::after {
    right: -15px;
}
table.dataTable th .dropdown-menu {
    margin-top: 16px !important;
    right: -15px !important;
}
table.dataTable th .dropdown-item {
    /* font-size: 16px; */
}

/* DataTable td 내 .dropdown */
table.dataTable td .dropdown-menu {
    margin-top: 10px !important;
}
table.dataTable td .dropdown-item {
    font-size: 16px;
}
/*--^ Datatabe.net -------------------------------------------------------------------------------*/

/* pagination */
.pagination-wrap {
    margin-top: 60px;
    display: flex;
    justify-content: center;
}
ul.pagination {
    margin-bottom: 0;
}
.pagination {
    --bs-pagination-border-radius: 10px;
}
.pagination .page-item .page-link {
    min-width: 36px;
    height: 36px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    border-color: var(--base-line2-color);
    color: var(--bs-secondary);
}
.pagination .page-item.active .page-link {
    font-size: 18px;
    font-weight: 600;
    color: var(--bs-primary);
    background-color: white;
}
.pagination .page-item.disabled .page-link {
    color: var(--base-line1-color);
    background-color: white;
    /* 웹접근성(항목6): 비활성 상태를 색 외 단서(흐림+점선 외곽선+커서)로 강화 */
    cursor: not-allowed;
    opacity: 0.5;
    outline: 1px dashed #767676;
    outline-offset: -4px;
}
.pagination .page-item .page-link.first,
.pagination .page-item .page-link.last {
    border: 0;
    color: white;
    background-color: var(--bs-dark);
}
.pagination .page-item.disabled .page-link.first,
.pagination .page-item.disabled .page-link.last {
    border: 0;
    color: white;
    background-color: var(--base-line1-color);
}
.pagination .page-item .page-link.first,
.pagination .page-item .page-link.previous,
.pagination .page-item .page-link.next,
.pagination .page-item .page-link.last {
    padding: 0 0 2px 0;
    font-size: 24px;
    font-weight: 600;
}

/* 폼 */
.input-group.gap {
    gap: 10px;
    align-items: center;
}
.input-group.gap > * {
    border-radius: 10px !important;
}

/* 폼 > 하단 개인정보 수집~ / 제 3자 정보 제공 동의 */
section.contents-wrap article.agree-terms-wrap {
    padding-top: 0;
    border-top: 0;
}
.agree-terms-wrap .table caption {
    font-size: 20px;
}
.agree-terms-wrap .radio-wrap {
    width: 100%;
    margin-top: 15px;
    justify-content: flex-end;
}
.agree-terms-wrap .custom-label {
    font-size: 20px;
}
.agree-terms-wrap .table-wrap + .table-wrap {
    margin-top: 23px;
}

/* 닉네임 입력(선택) */
.nickname-list {
    background-color: white !important;
    margin-bottom: 0;
}
.nickname-list .nickname-item {
}

/* 닉네임 + 금연레벨 */
.nickname-level-wrap {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
}
.nickname-level-wrap > a {
    white-space: nowrap;
}
.nickname-level-wrap .level-icon-wrap {
    display: flex;
    align-items: center;
}
.nickname-level-wrap .icon-angelwing {
    width: 24px;
    height: 24px;
    background: url(../../../img/icon_2/angelwing-24.svg) no-repeat center;
    background-size: 24px;
}

/* 금연레벨(써클) + 닉네임 */
.level-circle-nickname-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}
.level-circle-nickname-wrap .nickname {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* .form-type 내부 약관 동의 */
.form-type .terms-view {
    max-height: 180px;
    margin-top: 20px !important;
    border: solid 1px var(--bs-border-color);
    border-radius: 10px;
    padding: 20px;
    font-size: 16px;
    overflow-y: auto;
}
.form-type .terms-view ~ .radio-wrap {
    width: 100%;
    justify-content: flex-end;
}

/* .form-type 내부 파일첨부 입력 UI */
.attach-file-wrap {
    margin-top: 20px !important;
}
.attach-file-wrap .btn-file-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
}
.attach-file-wrap .btn-file-wrap .btn-file {
    width: 240px;
    padding: 0;
    display: flex;
    align-items: center;
}
.attach-file-wrap .btn-file-wrap .accept {
    font-size: 16px;
    color: var(--bs-body-color);
}
.attach-file-wrap ul.file-list {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 0;
    padding-left: 0;
}
.attach-file-wrap ul.file-list li.btn-file {
    width: 100%;
    min-height: 60px;
    margin-top: 10px;
    padding: 0 10px 0 20px;
    border: solid 1px var(--bs-border-color);
    border-radius: 10px;
    display: flex;
    align-items: center;
}
.attach-file-wrap ul.file-list li.btn-file .btn-delete {
    width: 32px;
    height: 32px;
    margin-left: auto;
    padding: 0 0 4px 1px;
    border: 0;
    border-radius: 24px;
    background: transparent;
    font-size: 24px;
    font-weight: 400;
    color: var(--bs-secondary);
}
.attach-file-wrap .sum-file-size {
    margin-top: 20px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

/*--v #20241108 : 금연서포터즈 > 활동하기 > 글쓰기 등 파일 추가 관련 */
.attach-file-wrap .selected-wrapper > div.btn-file {
    width: 100%;
    min-height: 60px;
    margin-top: 10px;
    padding: 0 10px 0 20px;
    border: solid 1px #cccccc;
    border-radius: 10px;
    display: flex;
    align-items: center;
}
.attach-file-wrap .selected-wrapper > div.btn-file > button.btn-delete {
    width: 32px;
    height: 32px;
    margin-left: auto;
    padding: 0 0 4px 1px;
    border: 0;
    border-radius: 24px;
    background: transparent;
    font-size: 24px;
    font-weight: 400;
    color: #767676;
}
/*--^ #20241108 */

/* 게시판 등 목록 테이블 타이틀 */
.board-title-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}
.board-title-wrap .badge {
    height: 18px;
    margin-right: 4px;
    padding: 3px 6px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
}
.board-title-wrap .board-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.board-title-wrap .board-title.clamp-text-1 {
    display: block;
    white-space: nowrap;
}
.board-title-wrap .comment-count {
    font-size: 16px;
    color: var(--bs-warning);
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.board-title-wrap .comment-count::before {
    content: "";
    width: 20px;
    height: 20px;
    background: url(../../../img/icon_2/chat-bubble-bottom-center-text-warning-20.svg) no-repeat center;
}
.board-title-wrap .attach-mark {
    font-size: 16px;
    color: var(--bs-warning);
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.board-title-wrap .attach-mark::before {
    content: "";
    width: 20px;
    height: 20px;
    background: url(../../../img/icon_2/paperclip-warning-20.svg) no-repeat center;
}
.board-title-wrap .secret-mark {
    font-size: 16px;
    color: var(--bs-warning);
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.board-title-wrap .secret-mark::before {
    content: "";
    width: 20px;
    height: 20px;
    background: url(../../../img/icon_2/lock-warning-20.svg) no-repeat center;
}

/* 금연자료실_상세 > 상세정보 > 키워드 */
.table-wrap .keyword-list {
    font-weight: 500;
    color: var(--bs-warning);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.list-wrap.tile-type {
    margin-top: 30px;
    padding-top: 40px;
    border-top: solid 2px var(--bs-dark);
    border-radius: 0;
}
.list-wrap.tile-type .list-group {
    display: grid;
}
.list-wrap.tile-type .list-group .list-group-item {
    width: 100%;
    padding: 0;
    border: 0;
    display: flex;
    gap: 20px;
}
.list-wrap.tile-type .list-group .list-group-item .thumb-box {
    width: 240px;
    height: 240px;
    min-width: 240px;
    border-radius: 20px;
    background-color: #eeeeee;
    background-image: url(../../../img/logo/footer-logo.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100px;
}
.list-wrap.tile-type .list-group .list-group-item .thumb-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 20px;
}
.list-wrap.tile-type.tile-portrait .list-group .list-group-item .thumb-box {
    height: 320px;
}
.list-wrap.tile-type .list-group .list-group-item .content-info {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.list-wrap.tile-type .list-group .list-group-item h4 {
    line-height: 36px;
}
.list-wrap.tile-type .list-group .list-group-item .hash-wrap {
    margin-top: 20px;
    flex-wrap: wrap;
}
.list-wrap.tile-type .list-group .list-group-item .summary {
    margin-top: auto;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
}
.list-wrap.tile-type .list-group .list-group-item .summary-item {
    gap: 4px;
}
.list-wrap.tile-type.tile-text .list-group .list-group-item .content-info {
    display: block;
}

/* 담배제품과 마케팅 등 썸네일 없는 타일 리스트 : .tile-text */
.list-wrap.tile-type.tile-text .list-group {
    display: grid;
}
.list-wrap.tile-type.tile-text .list-group-item {
    height: 388px;
    padding: 30px;
    border: solid 1px var(--bs-border-color);
    border-radius: 20px;
}
.list-wrap.tile-type.tile-text .list-group-item h4 {
    margin-top: 20px;
}
.list-wrap.tile-type.tile-text .list-group-item .overview {
    margin-top: 10px;
    font-size: 16px;
}
.list-wrap.tile-type .list-group .list-group-item .badge {
    padding: 4px 20px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

/* 성공자 인터뷰 등 비디오 클립 타일 리스트 : .tile-video */
.list-wrap.tile-type.tile-video {
    padding-top: 20px;
}
.list-wrap.tile-type.tile-video .list-group {
    display: grid;
    gap: 40px 20px;
}
.list-wrap.tile-type.tile-video .list-group-item {
    width: 100%;
    height: 482px;
    padding: 0;
    /* border: solid 1px var(--bs-border-color); */
    border-radius: 20px;
    display: block;
    cursor: pointer;
}
/* 앵커가 타일 전체를 채우도록 block 처리 → 키보드 초점 outline이 타일 전체를 감싸도록 함 */
.list-wrap.tile-type.tile-video .list-group-item > a {
    display: block;
    height: 100%;
    border-radius: 20px;
}
.list-wrap.tile-type.tile-video .list-group-item > a:focus-visible {
    outline: 3px solid #222222;
    outline-offset: 2px;
}
.list-wrap.tile-type.tile-video .list-group .list-group-item .thumb-box {
    width: 100%;
    height: 250px;
    min-width: 360px;
    border-radius: 20px 20px 0 0;
    background-color: #eeeeee;
    background-image: url(../../../img/logo/footer-logo.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100px;
    overflow: hidden;
}
.list-wrap.tile-type.tile-video .list-group .list-group-item .thumb-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.list-wrap.tile-type.tile-video .list-group .list-group-item .content-info {
    width: 100%;
    height: 232px;
    border-style: solid;
    border-width: 0 1px 1px 1px;
    border-color: var(--bs-border-color);
    border-radius: 0 0 20px 20px;
    padding: 30px;
}
.list-wrap.tile-type.tile-video .list-group-item h4 {
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
}
.list-wrap.tile-type.tile-video .list-group-item .overview {
    margin-top: 10px;
    font-size: 16px;
}
.list-wrap.tile-type.tile-video .list-group .list-group-item .summary {
    padding-bottom: 0;
}

/* 조회결과 건수, 현재 페이지, 페이지 당 조회 건수 선택, 버튼 */
.table-top-wrap {
    min-height: 60px;
    margin-top: 40px;
    display: flex;
    align-items: flex-end;
}
.table-top-wrap .row-per-page {
    width: 240px;
}
.table-top-wrap .rows-pages-wrap {
    font-size: 16px;
    display: flex;
    align-items: center;
}
.table-top-wrap .rows-pages-wrap .value {
    font-weight: 600;
}
.table-top-wrap .rows-pages-wrap + .row-per-page {
    margin-left: auto;
}

/*--v MODAL --------------------------------------------------------------------------------------*/
/* 모달 : Alert & Confirm */
.modal-message .modal-body {
    padding-top: 60px;
    padding-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-message .msg-text {
    font-size: 18px;
    font-weight: 500;
    color: var(--bs-dark);
    text-align: center;
    line-height: 30px;
}
.modal-message .modal-footer {
    padding: 40px 45px;
    justify-content: center;
    gap: 12px;
}
.modal-message .modal-footer button {
    min-width: 230px;
    font-size: 18px;
    font-weight: 500;
}
.modal-message .modal-footer button.BTN_OK {
    font-weight: 600;
}

/* 모달 : Contents */
.modal-contents .modal-content {
    border: 0;
}
.modal-contents .modal-header {
    margin-top: 59px;
    padding-bottom: 20px;
    border-top: solid 1px var(--base-line2-color);
    border-bottom: 0;
    border-radius: 0;
    position: relative;
}
.modal-contents .modal-header .buttons-wrap {
    position: absolute;
    top: -61px;
    right: 0;
}
.modal-contents .modal-body {
    margin-bottom: 40px;
    padding-top: 0;
    padding-bottom: 20px;
}
.modal-contents .modal-footer {
    padding: 0 60px 60px 60px;
    justify-content: center;
    gap: 12px;
}
.modal-contents .modal-footer button {
    min-width: 240px;
    font-size: 18px;
    font-weight: 500;
}
.modal-contents .modal-footer button.BTN_OK {
    font-weight: 600;
}

.modal-contents ::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
}
.modal-contents ::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 0.25rem;
}
.modal-contents ::-webkit-scrollbar-thumb {
    background: var(--bs-gray-500);
    border-radius: 0.25rem;
}
.modal-contents ::-webkit-scrollbar-thumb:hover {
    background: var(--bs-gray-600);
}

.modal-contents h5 {
    font-size: 18px;
    line-height: 30px;
    color: var(--bs-body-color);
}
.modal-contents h5 + .info-box {
    margin-top: 10px;
}
.modal-contents .modal-body .info-box {
    margin-top: 10px;
    margin-bottom: 0;
    padding: 20px;
    border: solid 1px var(--bs-border-color);
    border-radius: 20px;
    font-size: 16px;
    line-height: 30px;
    background-color: var(--base-bg1-color);
}

.modal-body .overview {
    font-size: 18px;
    line-height: 30px;
}
.modal-body .table-wrap.form-type {
    padding-top: 0;
    padding-bottom: 0;
    border: 0;
}
.modal-body .table-wrap.form-type tbody > tr:first-of-type th,
.modal-body .table-wrap.form-type tbody > tr:first-of-type td {
    padding-top: 0;
}
.modal-body .table-wrap.form-type tbody > tr:last-of-type th,
.modal-body .table-wrap.form-type tbody > tr:last-of-type td {
    padding-bottom: 0;
}
.modal-body textarea {
    min-height: 180px !important;
}
/*--^ MODAL --------------------------------------------------------------------------------------*/

.toast-trigger {
    cursor: pointer;
}

/* label - input 구조용 */
.label-input {
    display: flex;
    align-items: center;
}

/* map-pin */
.map-pin {
    width: 40px;
    height: 52px;
    background: url(../../../img/common/map-pin-40.svg) no-repeat center;
}
.map-pin .pin-no {
    width: 40px;
    line-height: 40px;
    font-size: 20px;
    font-weight: 700;
    color: #7745ff;
    text-align: center;
}

/* flip-card */
.flip-card {
    background-color: transparent;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:focus .flip-card-inner,
.flip-card:hover .flip-card-inner,
.flip-card.active .flip-card-inner {
    transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}

/* Style the back side */
.flip-card-back {
    transform: rotateY(180deg);
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*--v Utils --------------------------------------------------------------------------------------*/
.cursor-pointer {
    cursor: pointer;
}

.text-justify {
    text-align: justify;
}

.text-large {
    font-size: 20px;
}
.text-small {
    font-size: 16px;
}

.text-white {
    color: #ffffff !important;
}
.text-yellow {
    color: var(--yellow) !important;
}
.text-orange {
    color: var(--orange) !important;
}
.bg-orange {
    background-color: var(--orange) !important;
}

/* font-size */
.fs-10,
.fs-10 *,
.fs-10::before {
    font-size: 10px !important;
}
.fs-12,
.fs-12 *,
.fs-12::before {
    font-size: 12px !important;
}
.fs-14,
.fs-14 *,
.fs-14::before {
    font-size: 14px !important;
}
.fs-16,
.fs-16 *,
.fs-16::before {
    font-size: 16px !important;
    line-height: 24px !important;
}
.fs-18,
.fs-18 *,
.fs-18::before {
    font-size: 18px !important;
}
.fs-20,
.fs-20 *,
.fs-20::before {
    font-size: 20px !important;
}
.fs-22,
.fs-22 *,
.fs-22::before {
    font-size: 22px !important;
}
.fs-24,
.fs-24 *,
.fs-24::before {
    font-size: 24px !important;
}
.fs-30 {
    font-size: 30px !important;
    line-height: 40px;
}

.fw-100,
.fw-thin {
    font-weight: 100 !important;
}
.fw-200,
.fw-elight {
    font-weight: 200 !important;
}
.fw-300,
.fw-light {
    font-weight: 300 !important;
}
.fw-400,
.fw-reg {
    font-weight: 400 !important;
}
.fw-500,
.fw-med {
    font-weight: 500 !important;
}
.fw-600,
.fw-sbold {
    font-weight: 600 !important;
}
.fw-700,
.fw-bold {
    font-weight: 700 !important;
}
.fw-800,
.fw-ebold {
    font-weight: 800 !important;
}
.fw-900,
.fw-black {
    font-weight: 900 !important;
}

.btn.mnw-180 {
    min-width: 180px !important;
}
.w-120 {
    width: 120px !important;
    flex: 1 0 120px;
}
.w-200 {
    width: 200px !important;
    flex: 1 0 200px;
}

.mt-10 {
    margin-top: 10px !important;
}
.mt-20 {
    margin-top: 20px !important;
}
.mt-30 {
    margin-top: 30px !important;
}
.mt-40 {
    margin-top: 40px !important;
}
.mt-50 {
    margin-top: 50px !important;
}
.mt-60 {
    margin-top: 60px !important;
}
.mt-70 {
    margin-top: 70px !important;
}
.mt-80 {
    margin-top: 80px !important;
}
.mt-120 {
    margin-top: 120px !important;
}
.mt-140 {
    margin-top: 140px !important;
}

.mb-20 {
    margin-bottom: 20px !important;
}
.mb-30 {
    margin-bottom: 30px !important;
}
.mb-40 {
    margin-bottom: 40px !important;
}
.mb-60 {
    margin-bottom: 60px !important;
}
.mb-80 {
    margin-bottom: 80px !important;
}
.mb-120 {
    margin-bottom: 120px !important;
}
.mb-190 {
    margin-bottom: 190px !important;
}

.ms-20 {
    margin-left: 20px !important;
}

.pt-20 {
    padding-top: 20px !important;
}

.ps-40 {
    padding-left: 40px !important;
}

.gap-10 {
    gap: 10px !important;
}
.gap-20 {
    gap: 20px !important;
}
.gap-30 {
    gap: 30px !important;
}

a.underline {
    line-height: calc(100% - 1px);
    border-bottom: solid 1px;
    border-color: currentColor;
}

.monospace {
    font-feature-settings: "tnum";
}

.flex-center-middle {
    display: flex;
    align-items: center;
    justify-content: center;
}
.flex-center {
    display: flex;
    justify-content: center;
}
.flex-middle {
    display: flex;
    align-items: center;
}

.grid-template-columns-2 {
    grid-template-columns: repeat(2, 1fr);
} /* 2열로 나누기 */
.grid-template-columns-3 {
    grid-template-columns: repeat(3, 1fr);
} /* 3열로 나누기 */
.grid-template-columns-4 {
    grid-template-columns: repeat(4, 1fr);
} /* 4열로 나누기 */
.grid-template-columns-5 {
    grid-template-columns: repeat(5, 1fr);
} /* 5열로 나누기 */
.grid-template-columns-6 {
    grid-template-columns: repeat(6, 1fr);
} /* 6열로 나누기 */
.grid-template-columns-7 {
    grid-template-columns: repeat(7, 1fr);
} /* 6열로 나누기 */

.clamp-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}
.clamp-text-1 {
    -webkit-line-clamp: 1;
}
.clamp-text-2 {
    -webkit-line-clamp: 2;
}
.clamp-text-3 {
    -webkit-line-clamp: 3;
}
.clamp-text-4 {
    -webkit-line-clamp: 4;
}
.clamp-text-5 {
    -webkit-line-clamp: 5;
}

.underline-primary {
    border-bottom: solid 1px var(--bs-primary);
}

/*ally-hidden 보이스로만 읽히는 데이터를 보여줄 때 사용합니다*/
.a11yHidden {
    overflow: hidden;
    position: absolute;
    clip: rect(0, 0, 0, 0);
    clip-path: circle(0);
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    white-space: nowrap;
}

.loader {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
}
.loader__element {
    border-radius: 100%;
    border: var(--dot-size) solid var(--bs-primary);
    margin: calc(var(--dot-size) * 3);
}
.loader__element:nth-child(1) {
    animation: preloader 0.6s ease-in-out alternate infinite;
}
.loader__element:nth-child(2) {
    animation: preloader 0.6s ease-in-out alternate 0.2s infinite;
}
.loader__element:nth-child(3) {
    animation: preloader 0.6s ease-in-out alternate 0.4s infinite;
}

/* animation용 */
/* 맵톡에서 새글 올라오면 5초가 배경색 처리 */
@keyframes changeNewCommentItemBg {
    0% {
        background-color: #fff8f0;
        color: var(--bs-dark);
    }
    90% {
        background-color: #fff8f0;
        color: var(--bs-dark);
    }
    100% {
        background-color: var(--base-bg1-color);
        color: var(--bs-body-color);
    }
}

@keyframes spinner-circle {
    to {
        transform: rotate(1turn);
    }
}

/* AI 검색 잠시만 기다려 주세요 에서 사용 */
@keyframes circle-rotate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) translate(0, -50px) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg) translate(0, -50px) rotate(-360deg);
    }
}

/* AI검색 ... 애니매이션 */
@keyframes preloader {
    0% {
        border-color: white;
        transform: scale(1);
    }
    100% {
        border-color: var(--bs-primary);
        transform: scale(2);
    }
}

/* #20241101 : [김우중] 에디터 라이브러리 기준 common class를 작성해놓은 css 파일 추가 및 에디터 css파일 연결 */
.hide {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    font-size: 0 !important;
}

/* 웹접근성(항목6): 비활성/읽기전용 입력칸을 색 외 단서로 강화
   - 자물쇠 아이콘 + 대각선 빗금 무늬(패턴) + 점선 테두리(외곽선) → 색맹도 인지 가능 */
input.form-control[readonly]:not([type="file"]):not(.date-picker):not(.month-picker),
input.form-control:disabled:not([type="file"]):not(.date-picker):not(.month-picker) {
    background-image:
        url(/resources/img/icon/icon-lock.svg),
        repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.08) 0, rgba(0, 0, 0, 0.08) 5px, transparent 5px, transparent 10px);
    background-repeat: no-repeat, repeat;
    background-position: center right 12px, 0 0;
    background-size: 16px 16px, auto;
    padding-right: 38px;
    border-style: dashed !important;
    border-color: #767676 !important;
    cursor: not-allowed;
}
/* 비활성 날짜선택 입력칸: 달력 아이콘 대신 자물쇠 + 동일 빗금 무늬 */
input.form-control.date-picker:disabled,
input.form-control.month-picker:disabled {
    background-image:
        url(/resources/img/icon/icon-lock.svg),
        repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.08) 0, rgba(0, 0, 0, 0.08) 5px, transparent 5px, transparent 10px);
    background-repeat: no-repeat, repeat;
    background-position: center right 12px, 0 0;
    background-size: 16px 16px, auto;
    border-style: dashed !important;
    border-color: #767676 !important;
    cursor: not-allowed;
}