@charset "utf-8";

@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 100;
    src: local('Noto Sans Thin'), local('Noto Sans Thin'), local('Noto Sans Thin');
    src: url(/fonts/NotoSans-Thin.eot);
    src: url(/fonts/NotoSans-Thin.eot?#iefix) format('embedded-opentype'),
    url(/fonts/NotoSans-Thin.woff) format('woff'),
    url(/fonts/NotoSans-Thin.otf) format('truetype');
}

@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Noto Sans Light'), local('Noto Sans Light'), local('Noto Sans Light');
    src: url(/fonts/NotoSans-Light.eot);
    src: url(/fonts/NotoSans-Light.eot?#iefix) format('embedded-opentype'),
    url(/fonts/NotoSans-Light.woff) format('woff'),
    url(/fonts/NotoSans-Light.otf) format('truetype');
}

@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 350;
    src: local('Noto Sans DemiLight'), local('Noto Sans DemiLight'), local('Noto Sans DemiLight');
    src: url(/fonts/NotoSans-DemiLight.eot);
    src: url(/fonts/NotoSans-DemiLight.eot?#iefix) format('embedded-opentype'),
    url(/fonts/NotoSans-DemiLight.woff) format('woff'),
    url(/fonts/NotoSans-DemiLight.otf) format('truetype');
}

@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Noto Sans Regular'), local('Noto Sans Regular'), local('Noto Sans Regular');
    src: url(/fonts/NotoSans-Regular.eot);
    src: url(/fonts/NotoSans-Regular.eot?#iefix) format('embedded-opentype'),
    url(/fonts/NotoSans-Regular.woff) format('woff'),
    url(/fonts/NotoSans-Regular.otf) format('truetype');
}

@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 500;
    src: local('Noto Sans Medium'), local('Noto Sans Medium'), local('Noto Sans Medium');
    src: url(/fonts/NotoSans-Medium.eot);
    src: url(/fonts/NotoSans-Medium.eot?#iefix) format('embedded-opentype'),
    url(/fonts/NotoSans-Medium.woff) format('woff'),
    url(/fonts/NotoSans-Medium.otf) format('truetype');
}

@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 700;
    src: local('Noto Sans Bold'), local('Noto Sans Bold'), local('Noto Sans Bold');
    src: url(/fonts/NotoSans-Bold.eot);
    src: url(/fonts/NotoSans-Bold.eot?#iefix) format('embedded-opentype'),
    url(/fonts/NotoSans-Bold.woff) format('woff'),
    url(/fonts/NotoSans-Bold.otf) format('truetype');
}

@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 900;
    src: local('Noto Sans Black'), local('Noto Sans Black'), local('Noto Sans Black');
    src: url(/fonts/NotoSans-Black.eot);
    src: url(/fonts/NotoSans-Black.eot?#iefix) format('embedded-opentype'),
    url(/fonts/NotoSans-Black.woff) format('woff'),
    url(/fonts/NotoSans-Black.otf) format('truetype');
}

body {
    font-family: "Noto Sans", "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h3, h4, h5 {
    font-weight: 500;
}

.nav > li > a {
    font-weight: 400;
}

select:required:invalid {
    color: gray;
}

option[value=""][disabled] {
    display: none;
}

option {
    color: black;
}

.nav > li > a i {
    min-width: 15px;
    text-align: center;
}

.nav.nav-tabs li {
    margin-bottom: -1px;
}

/*.nav > li.active {*/
/*    border-left: 0;*/
/*    box-shadow: inset 4px 0 0 #19aa8d;*/
/*}*/

/*.navbar-default .nav > li > a:hover,*/
/*.navbar-default .nav > li > a:focus {*/
/*    background-color: transparent;*/
/*}*/

/*.navbar-default .nav > li:not(.active) > a:hover,*/
/*.navbar-default .nav > li:not(.active) > a:focus {*/
/*    background-color: #293846;*/
/*}*/


.input-sm, .form-control-sm {
    height: 29px !important;
    line-height: 29px !important;
}

input.form-control-sm {
    font-size: 12px;
}

select.form-control-sm {
    font-size: 11px;
}

.form-control::placeholder {
    font-size: 12px;
    font-weight: 300;
    color: #a1a1a1;
}

.nav-header .profile-element > img {
    max-width: 48px;
    max-height: 48px;
    object-fit: cover;
}

.text-center .dataTables_paginate .pagination {
    justify-content: center;
}

.dataTables_paginate .pagination li a {
    cursor: pointer;
}

.dataTables_paginate .pagination li.active a:hover {
    border-color: #1ab394;
    cursor: auto;
}

form .dropzone {
    max-width: 287px;
    padding: 0;
}

form .dropzone#dropzoneForm1 {
    width: 200px;
    height: 200px;
    border: 2px dashed rgba(255, 255, 255, 0.3);
    border-radius: 8px 0 0 8px;
    background: transparent;
}

form .dropzone .dz-preview {
    width: 100%;
    max-width: 285px;
    max-height: 285px;
    margin: 0;
}

form .dropzone .dz-preview .dz-image {
    width: 100%;
    max-width: 285px;
    height: 100%;
    border-radius: 0;
}

form .dropzone#dropzoneForm1 .dz-preview .dz-image {
    max-height: 200px;
}

form .dropzone .dz-preview .dz-image img {
    max-width: 100%;
    max-height: 100%;
}

form .dropzone#dropzoneForm1 .dz-preview img {
    max-height: 200px;
    margin: 0 auto;
}

form .dropzone .dz-preview.dz-image-preview {
    background: transparent;
    overflow: hidden;
    cursor: pointer;
}

form .dropzone .dz-preview.dz-image-preview * {
    cursor: pointer;
}

form .dropzone .dz-preview.dz-image-preview .dz-progress,
form .dropzone .dz-preview.dz-image-preview .dz-error-message,
form .dropzone .dz-preview.dz-image-preview .dz-success-mark,
form .dropzone .dz-preview.dz-image-preview .dz-error-mark {
    display: none;
}

form[name=banner] .dropzone {
    max-width: 500px;
    padding: 0;
}

form[name=banner] .dropzone .dz-preview {
    width: 100%;
    max-width: 500px;
    max-height: 500px;
    margin: 0;
}

form[name=banner] .dropzone .dz-preview .dz-image {
    width: 100%;
    max-width: 500px;
    height: 100%;
    border-radius: 0;
}

form[name=banner] .dropzone .dz-preview .dz-image img {
    max-width: 100%;
    max-height: 100%;
}

form[name=banner] .dropzone .dz-preview.dz-image-preview {
    background: transparent;
    overflow: hidden;
    cursor: pointer;
}

form[name=banner] .dropzone .dz-preview.dz-image-preview * {
    cursor: pointer;
}

form[name=banner] .dropzone .dz-preview.dz-image-preview .dz-progress,
form[name=banner] .dropzone .dz-preview.dz-image-preview .dz-error-message,
form[name=banner] .dropzone .dz-preview.dz-image-preview .dz-success-mark,
form[name=banner] .dropzone .dz-preview.dz-image-preview .dz-error-mark {
    display: none;
}

.dropzone .dz-button {
    background: transparent;
    border: 0;
    outline: none;
    font-size: 13px;
    color: #999;
    font-weight: 400;
}

table.table-mail tr th {
    padding: 12px;
}

textarea.form-control {
    background-size: cover !important;
}

.issue-info a:hover {
    text-decoration: underline;
}

.issue-info small {
    display: block;
    max-width: 60%;
    height: 14px;
    overflow: hidden;
    color: #999;
    word-break: keep-all;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.forum-post-container .media {
    margin: 20px 0 10px;
    padding: 20px 0;
    border-top: 1px solid #f1f1f1;
    border-bottom: 0;
}

.forum-post-container .media.depth1 {
    position: relative;
    margin: -11px 15px 0;
    padding: 20px 15px;
    background: #f9f9f9;
    border-radius: 3px;
    border: 1px solid #f1f1f1;
}

.forum-avatar .rounded-circle {
    border: 1px solid #ececec;
    background: #fff;
}

.comments-stars > * {
    display: inline-block;
    vertical-align: top;
    line-height: 15px;
}

.comments-stars .stars {
    position: relative;
    overflow: hidden;
    width: 60px;
    height: 15px;
    display: inline-block;
    vertical-align: top;
    background: url(/img/sub/stars_off.png?200801) no-repeat;
    background-size: 60px
}

.comments-stars .stars .cover {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 15px;
    background: url(/img/sub/stars_on.png?200801) no-repeat;
    background-size: 60px;
}

.notice-comments,
.notice-comment {
    padding: 16px;
}

.depth-1 {
    margin-left: 32px;
}

.depth-2 {
    margin-left: 64px;
}

.depth-3 {
    margin-left: 96px;
}

.notice-comment {
    margin-bottom: 10px;
    background: #f5f2fa;
    border-radius: 8px;
}

.notice-comment:first-child {
    border-top-width: 2px;
}

.notice-comments input[type=radio] {
    position: absolute;
    left: -9999px;
}

.notice-comments label {
    cursor: pointer;
}

.notice-comment .nickname {
    font-size: 12px;
    font-weight: 600;
}

.notice-comment .content {
    margin: 8px 0;
    padding: 0;
    font-size: 14px;
    background: transparent;
}

.notice-comment .date {
    font-size: 12px;
    color: #999;
}

.notice-comment .btn-write-comment {
    display: inline-block;
    margin-left: 10px;
    margin-bottom: 0;
    font-size: 12px;
    color: #666;
}

.notice-comment .btn-write-comment:hover {
    color: #333;
    text-decoration: underline;
}

.notice-comment .write-comment {
    display: none;
    margin-top: 16px;
}

.write-comment {
    padding: 16px 16px 10px;
    border: 2px solid #dfdfdf;
    border-radius: 7px;
    background: #fff;
}

.write-comment textarea {
    display: block;
    width: 100%;
    border: 0;
    outline: none;
    resize: none;
}

.write-comment textarea::placeholder {
    font-size: 12px;
    color: #999;
}

.write-comment .write-comment-footer {
    text-align: right;
}

.write-comment .write-comment-footer label,
.write-comment .write-comment-footer button {
    display: inline-block;
    margin-right: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    background: transparent;
    border: 0;
    outline: 0;
}

.write-comment .write-comment-footer label:hover,
.write-comment .write-comment-footer button:hover {
    color: #333;
}

.notice-comment input[type=radio]:checked + .write-comment {
    display: block;
}

.folder-list li i {
    min-width: 13px;
    text-align: center;
}

.blind1 {
    display: none !important;
}

.media-body .stream {
    padding-top: 0;
}

.media-body > pre,
.media-body .comment-view > pre {
    white-space: pre-wrap;
    word-break: keep-all;
    background: transparent;
    border: 0;
    font-size: 12px;
    padding: 0;
    margin: 0 15px 0 0;
    line-height: 1.5;
}

.media-body
.wide-content {
    overflow-x: scroll;
}

.wide-content table {
    min-width: 1600px;
}

.col-lg-10 .wide-content table {
    min-width: 1368px;
}

.wide-content table th,
.wide-content table td {
    font-size: 12px;
}

.wide-content table th.small,
.wide-content table td.small {
    font-size: 10px;
}

.ibox-content #period {
    font-family: NotoSans;
    font-weight: 400;
    letter-spacing: -1px;
}

.input-daterange .input-group-addon {
    height: 29px !important;;
    padding: 6px 10px !important;
    font-size: 12px !important;;
}

table tr.highlight-primary {
    background: #1ab39410;
}

table tr.highlight-primary:hover {
    background: #1ab39430;
}

table tr.highlight-success {
    background: #1c84c610;
}

table tr.highlight-success:hover {
    background: #1c84c630;
}

table tr.highlight-info {
    background: #23c6c810;
}

table tr.highlight-info:hover {
    background: #23c6c830;
}

table tr.highlight-warning {
    background: #f8ac5910;
}

table tr.highlight-warning:hover {
    background: #f8ac5930;
}

table tr.highlight-danger {
    background: #ed556510;
}

table tr.highlight-danger:hover {
    background: #ed556530;
}

table.issue-tracker {
    table-layout: fixed;
    overflow-wrap: break-word;
}

table td.client-avatar img {
    position: relative;
}

table td.client-avatar.new::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 5px;
    display: block;
    width: 5px;
    height: 5px;
    background: #ed5565;
    border-radius: 10px;
}

table tr.disabled td.client-avatar {
    position: relative;
}

table tr.disabled td:first-child::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background-color: #dc7878;
}

.product-detail pre {
    padding: 0;
    margin: 0;
    background-color: transparent;
    border: 0;
    border-radius: 0;
}

.vote-info span {
    display: inline-block;
}

.vote-info span i {
    font-size: 10px;
}

.vbank {
    cursor: pointer;
    text-decoration: underline;
}

input.form-control,
select.form-control {
    height: calc(1.5em + .75rem);
}

select.form-control:not([size]):not([multiple]) {
    height: calc(1.5em + .75rem);
}

.modify-body {
    display: none;
}

.i-checks label {
    cursor: pointer;
}

#adsLegend {
    margin-top: 25px;
}

#adsLegend ul {
    list-style: none;
    padding-left: 28px;
}

#adsLegend ul li {
    padding: 2px 0;
}

#adsLegend ul li i {
    float: left;
    width: 20px;
    height: 12px;
    margin: 4px 0 0 0;
    line-height: 12px;
    box-sizing: border-box;
    border: 3px solid #fff;
    cursor: pointer;
}

#adsLegend ul li p {
    margin: 0 0 0 25px;
    line-height: 18px;
    font-size: 12px;
}

#adsLegend ul li p a {
    color: #666;
    text-decoration: underline;
    cursor: pointer;
}

#adsLegend ul li p a:hover {
    color: #111;
}

#adsLegend ul li p .title {
    margin-left: 10px;
}

#adsLegend ul li p .description {

}

#date-picker {
    cursor: pointer;
}

#date-picker input {
    color: #676a6c;
    font-weight: 100;
    border: 0;
    outline: none;
    background: transparent;
    width: 110px;
    display: inline;
    cursor: pointer;
    box-shadow: inset 0 -2px 0 #a0a0a0;
    border-radius: 0;
}

#date-picker:hover input {
    color: #1ab394;
    box-shadow: inset 0 -2px 0 #1ab394;
}

.jqtl-container {
    border: 0;
}

.jqtl-event-label, .jqtl-event-node > * {
    font-size: 10px;
    letter-spacing: -1px;
    padding: 0 3px;
}

.jqtl-ruler-line-item span {
    font-family: 'Noto Sans';
    font-size: 10px;
}

.jqtl-footer {
    display: none;
}

:root {
    --jd-color-background-default: #ffffff;
    --jd-color-border: #e6e6e6;
    --jd-color-panel: #fafafa;
    --jd-color-icon: #1ab394;
}

.profile-image img {
    object-fit: cover;
}

/* input type search */
input::-ms-clear,
input::-ms-reveal{
    display:none;width:0;height:0;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration{
    display:none;
}

.navbar-form-custom {
    display: block !important;
}

.change-number-alert-btn {
    padding: 0px;
    font-size: 11px;
}

.fc .fc-toolbar-title {
    font-size: 20px;
    font-weight: 400;
    letter-spacing: -1px;
    color: #777;
}
.fc .fc-toolbar .fc-button {
    padding: 0 0.6em;
}
.fc-daygrid-dot-event {
    background: transparent;
}
.fc-daygrid-block-event .fc-event-title {
    color: #fff;
}
.holiday-event.fc-daygrid-block-event .fc-event-title {
    color: #ed5565;
}
.fc-button-primary {
    background-color: #ffffff !important;
    color: #676a6c !important;
    border: 1px solid #e7eaec !important;
}
.fc-button-primary.fc-button-active {
    background-color: #1ab394;
    border-color: #1ab394;
    color: #ffffff;
}
.fc-col-header-cell-cushion {
    color: #676a6c;
}
a.fc-daygrid-day-number {
    color: #676a6c;
}
a.fc-daygrid-day-number:hover {
    text-decoration: none;
    color: #676a6c;
}
.fc .fc-daygrid-event {
    padding: 0 6px 1px;
}
.fc .fc-dayGridMonth-view .fc-daygrid-event.holiday-event {
    background-color: transparent !important;
    border-color: transparent !important;
    position: absolute;
    top: -26px;
}
.fc .fc-button-primary:not(:disabled).fc-button-active {
    background-color: #1ab394 !important;
    color: #fff !important;
}
.fc .fc-day-sat .fc-col-header-cell-cushion,
.fc .fc-day-sat .fc-daygrid-day-number {
    color: #1c84c6;
}
.fc .fc-day-sun .fc-col-header-cell-cushion,
.fc .fc-day-sun .fc-daygrid-day-number,
.fc .holiday {
    color: #ed5565;
}
.fc-daygrid-dot-event .fc-event-title {
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fc .fc-daygrid-dot-event:hover .fc-event-title {
    overflow: visible !important;
}
.fc .fc-daygrid-day.fc-day-today {
    box-shadow: inset 0 0 0 1px #1ab394;
}

/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
##Device = 저해상도 태블릿, 모바일(가로)
##Screen = 481px에서 767px 사이
*/

.loading-bg {position:absolute; top:0; left:0; display:none; width:100%; height:100%; z-index:10; background-color:rgba(255,255,255,0.8);}
.loading,
.loading:after {border-radius: 50%; width: 3em; height: 3em;}
.loading {
    margin: -20px auto 0; top: 50%; font-size: 10px; position: relative; text-indent: -9999em; border-top: 0.5em solid rgba(110, 74, 202, 0.4); border-right: 0.5em solid rgba(110, 74, 202, 0.4); border-bottom: 0.5em solid rgba(110, 74, 202, 0.4); border-left: 0.5em solid #ffffff; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation: load8 1.1s infinite linear; animation: load8 1.1s infinite linear;}

@-webkit-keyframes load8 {
    0% {-webkit-transform: rotate(0deg); transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes load8 {
    0% {-webkit-transform: rotate(0deg); transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}



@media only screen and (min-width: 481px) and (max-width: 767px) {
    .blind-mobile {
        display: none;
    }

    .forum-avatar {
        width: 85px;
        margin-right: 5px;
    }

    .forum-avatar .author-info {
        letter-spacing: -1px
    }

    .ibox-content.forum-post-container {
        padding-left: 5px !important;
        padding-right: 5px !important;
        margin-left: -15px;
        margin-right: -15px;
    }

    .comments-stars > * {
        line-height: 12px;
    }

    .comments-stars .stars {
        width: 50px;
        height: 10px;
        background-size: 50px
    }

    .comments-stars .stars .cover {
        height: 10px;
        background-size: 50px;
    }

    .sidebar-panel.member-panel {
        right:0 !important;
    }
}

/*
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
##Device = 대부분의 스마트폰 모바일 기기(세로)
##Screen = 320px에서 479px 사이
*/

@media only screen and (min-width: 320px) and (max-width: 480px) {
    .blind-mobile {
        display: none;
    }

    .forum-avatar {
        width: 85px;
        margin-right: 5px;
    }

    .forum-avatar .author-info {
        letter-spacing: -1px
    }

    .ibox-content.forum-post-container {
        padding-left: 5px !important;
        padding-right: 5px !important;
        margin-left: -15px;
        margin-right: -15px;
    }

    .comments-stars > * {
        line-height: 12px;
    }

    .comments-stars .stars {
        width: 50px;
        height: 10px;
        background-size: 50px
    }

    .comments-stars .stars .cover {
        height: 10px;
        background-size: 50px;
    }

    .sidebar-panel.member-panel {
        right:0 !important;
    }
}

/* [배너관리]-[상담분야배너] */
.banner-category-wrapper .category-column {
    min-height: 400px;
    background-color: #fff;
    border-radius: 8px;
    padding: 10px;
}
.banner-category-wrapper .category-column-header {
    text-align: center;
    padding: 10px;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 10px;
}
.banner-category-wrapper .category-column-header h2 {
    margin: 0;
}
.banner-category-wrapper .banner-card {
    position: relative;
    min-height: 143px;
    background: #fbfbf3;
    border: 1px solid #efefec;
    border-radius: 8px;
    padding: 0 12px;
    margin-bottom: 8px;
    cursor: grab;
    display: flex;
    align-items: center;
    box-shadow: 0 0 4px #e7e7e7;
    background-size: cover;
}
.banner-category-wrapper .banner-card:active {
    cursor: grabbing;
}
.banner-category-wrapper .banner-card .background-img {
    width: 100%;
}
.banner-category-wrapper .banner-card .counselor-pic {
    width: 141px;
    object-fit: cover;
    margin-right: 10px;
    flex-shrink: 0;
}
.banner-category-wrapper .banner-card .card-info {
    flex: 1;
    min-width: 0;
    font-family: Pretendard,sans-serif;
    color: #666;
}
.banner-category-wrapper .banner-card .card-info .nickname {
    font-weight: 600;
    font-size: 14px;
}
.banner-category-wrapper .banner-card .card-info .service-number {
    margin-bottom: 3px;
    font-size: 20px;
}
.banner-category-wrapper .banner-card .card-info .intro {
    font-size: 15px;
    font-weight: 300;
    white-space: pre-wrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
.banner-category-wrapper .banner-card .card-actions {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    gap: 0;
    flex-shrink: 0;
    margin-left: 8px;
}
.banner-category-wrapper .banner-card .card-actions button {
    width: 25px;
    height: 25px;
    cursor: pointer;
    border-radius: 0;
    border: 0;
}
.banner-category-wrapper .banner-card .card-actions button:only-child {
    width: 26px;
    border-top-right-radius: 6px;
    border-bottom-left-radius: 6px;
}
.banner-category-wrapper .sortable-ghost {
    opacity: 0.4;
    background: #c8ebfb;
}
.banner-category-wrapper .add-card-btn {
    width: 100%;
    border: 2px dashed #ccc;
    background: transparent;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    color: #888;
    margin-top: 8px;
}
.banner-category-wrapper .add-card-btn:hover {
    border-color: #1ab394;
    color: #1ab394;
}
.banner-category-wrapper #counselorPreview .banner-card {
    cursor: default;
}
#categoryBannerModal .modal-dialog {
    position: relative;
}
#categoryBannerModal .modal-dialog .select2-container--default .select2-selection--single {
    border-color: #e5e6e7;
}
#categoryBannerModal .modal-dialog textarea {
    border-radius: 4px;
}

/* ================================================
   CB-Card: 배너 미리보기 스타일 (urtarot-web 동일)
   ================================================ */

@keyframes cb-stars-pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.7; }
}

.cb-card {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    min-height: 200px;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    border-radius: 8px;
}

.cb-card--tarot {
    background: linear-gradient(to bottom left, #5b3a8e, #482b75, #2d1b4a) !important;
}

.cb-card--psychic {
    background: linear-gradient(to bottom left, #56ac85, #3d8c6a, #1e4d3a) !important;
}

.cb-card--astrologer {
    background: linear-gradient(to bottom left, #f9dda1, #d9a64e, #5d4037) !important;
}

.cb-card--newbie {
    background: linear-gradient(to bottom left, #44a4c4, #3587a3, #256a82) !important;
}

.cb-card__nebula {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.cb-card__nebula--1 {
    top: -20%;
    left: -10%;
    width: 60%;
    height: 140%;
    filter: blur(80px);
    transform: rotate(-12deg);
    opacity: 0.5;
    mix-blend-mode: soft-light;
}

.cb-card__nebula--2 {
    bottom: -20%;
    right: 10%;
    width: 50%;
    height: 120%;
    filter: blur(90px);
    transform: rotate(12deg);
    opacity: 0.4;
    mix-blend-mode: multiply;
}

.cb-card--tarot .cb-card__nebula--1 { background: rgba(138, 96, 204, 0.3); }
.cb-card--tarot .cb-card__nebula--2 { background: rgba(26, 15, 46, 0.5); }

.cb-card--psychic .cb-card__nebula--1 { background: rgba(167, 228, 201, 0.4); }
.cb-card--psychic .cb-card__nebula--2 { background: rgba(19, 61, 46, 0.6); }

.cb-card--astrologer .cb-card__nebula--1 { background: rgba(255, 247, 237, 0.5); }
.cb-card--astrologer .cb-card__nebula--2 { background: rgba(62, 39, 35, 0.6); }

.cb-card--newbie .cb-card__nebula--1 { background: rgba(125, 217, 245, 0.3); }
.cb-card--newbie .cb-card__nebula--2 { background: rgba(21, 62, 77, 0.5); }

.cb-card__stars {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    mix-blend-mode: overlay;
    background-image:
        radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.8) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 30% 65%, rgba(255,255,255,0.6) 50%, transparent 100%),
        radial-gradient(1px 1px at 50% 10%, rgba(255,255,255,0.7) 50%, transparent 100%),
        radial-gradient(2px 2px at 70% 40%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 85% 75%, rgba(255,255,255,0.8) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 15% 80%, rgba(255,255,255,0.6) 50%, transparent 100%),
        radial-gradient(1px 1px at 60% 85%, rgba(255,255,255,0.7) 50%, transparent 100%),
        radial-gradient(2px 2px at 90% 15%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 40% 45%, rgba(255,255,255,0.6) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 25% 35%, rgba(255,255,255,0.7) 50%, transparent 100%),
        radial-gradient(1px 1px at 75% 55%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 5% 50%, rgba(255,255,255,0.6) 50%, transparent 100%),
        radial-gradient(2px 2px at 55% 30%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 95% 60%, rgba(255,255,255,0.7) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 45% 90%, rgba(255,255,255,0.5) 50%, transparent 100%);
    animation: cb-stars-pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.cb-card__illustration {
    position: absolute;
    inset: 0;
    opacity: 0.2;
    filter: blur(1px);
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
    color: #fff;
}

.cb-card__illustration svg {
    position: absolute;
    top: 50%;
    left: 33%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
}

.cb-card--astrologer .cb-card__illustration {
    opacity: 0.25;
    color: #5d4037;
}

.cb-card__photo {
    position: absolute;
    top: 0;
    left: 2%;
    width: 40%;
    height: 100%;
    z-index: 2;
}

.cb-card__photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.cb-card__content {
    position: relative;
    z-index: 10;
    margin-left: auto;
    margin-right: 1.5rem;
    width: 70%;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
}

.cb-card__badge {
    font-size: 0.688rem;
    letter-spacing: 0.2em;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 0.2em 0.8em;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    margin-bottom: 0.8em;
    white-space: nowrap;
    color: #fff;
}

.cb-card__name {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 0.4em 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    color: #fff;
}

.cb-card__divider {
    display: inline-block;
    border-bottom: 0.12rem solid rgba(255, 255, 255, 0.6);
    padding-bottom: 0.8rem;
}

.cb-card__desc {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.3;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-width: 24rem;
    color: #fff;
    word-break: auto-phrase;
}

.cb-card--astrologer .cb-card__badge {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.15);
}

.cb-card--astrologer .cb-card__divider {
    border-color: rgba(255, 255, 255, 0.5);
}

/* 관리자 프리뷰: dropzone을 cb-card 왼쪽에 오버레이 */
.cb-card__dropzone.dropzone {
    position: relative;
    z-index: 20;
    max-width: 200px !important;
    min-height: 200px;
    flex-shrink: 0;
    background: rgba(255,255,255,0.08);
    border: 2px dashed rgba(255,255,255,0.3);
    border-radius: 8px 0 0 8px;
    margin: 0;
    padding: 0;
    transition: background 0.2s;
}

.cb-card__dropzone.dropzone:hover {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.5);
}

.cb-card__dropzone .dz-button {
    color: rgba(255,255,255,0.6);
}

.cb-card__dropzone .dz-preview {
    max-width: 200px !important;
    max-height: 200px !important;
}

.cb-card__dropzone .dz-preview .dz-image {
    max-width: 200px !important;
}

.cb-card__dropzone .dz-preview .dz-image img,
.cb-card__dropzone .dz-preview img {
    max-height: 200px !important;
}

.cb-card__content--preview {
    margin-right: 1.5rem;
}

/* 상담분야배너: banner-card + cb-card 공존 오버라이드 */
.banner-category-wrapper .banner-card.cb-card {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    min-height: 160px;
}

.banner-category-wrapper .banner-card.cb-card .card-actions {
    z-index: 20;
}

.banner-category-wrapper .banner-card.cb-card .cb-card__name {
    font-size: 1.25rem;
}

.banner-category-wrapper .banner-card.cb-card .cb-card__divider {
    padding-bottom: 0.6rem;
}

.banner-category-wrapper .banner-card.cb-card .cb-card__badge {
    font-size: 0.4rem;
    margin-bottom: 1.3em;
}

.banner-category-wrapper .banner-card.cb-card .cb-card__desc {
    font-size: 0.85rem;
    max-width: 100%;
}

.banner-category-wrapper .banner-card.cb-card .cb-card__content {
    margin-right: clamp(0.75rem, 7vw, 1.5rem);
    width: 55%;
}