/* 메인 고정 헤더 영역 확보를 위한 탑 마진 설정 */
.main-top-padding {    
    padding-top: 62px; 
    width: 100%;
}

.sub-top-padding {    
    padding-top: 192px; 
    width: 100%;
}

/* ---------------------------------------------------
    메인 슬라이드 배너 카드 영역 (정중앙 정렬 적용 스타일)
----------------------------------------------------*/
.banner-container {
    /*background-color: var(--primary-color); 
    background: linear-gradient(156deg, #7454ec ,#6259b8);*/
    padding: 20px 0; 
    overflow: hidden;
    position: relative;
    width: 100%;
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-blue));
}

.banner-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;  
    background-image: url('//im.allido.co.kr/image/pattern_bg.png');   
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.5; background-blend-mode: overlay;
}

.banner-slider {
    display: flex;
    gap: var(--banner-gap); 
    overflow-x: auto;
    /* [중앙 정렬 보정] 첫 카드가 화면 정중앙에 위치할 수 있도록 대칭 여백 계산 패딩 적용 */
    padding: 0 calc(50% - 165px); 
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth; 
    -webkit-overflow-scrolling: touch;
}

/* 모바일 소형 기기 환경에서의 중앙 정렬 보정 */
@media (max-width: 360px) {
    .banner-slider {
        padding: 0 calc(50% - 135px);
    }
}

/* [일부 유지] PC 버전 좌우 컨트롤 버튼 스타일 */
.banner-nav-btn {
    display: flex; 
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background-color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    cursor: pointer;
    z-index: 1;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, transform 0.2s;
}

.banner-nav-btn:hover {
    background-color: #ffffff;
    transform: translateY(-50%) scale(1.05);
}

.banner-nav-btn:active {
    transform: translateY(-50%) scale(0.95);
}

.banner-nav-btn.prev-btn { 
    left: 5px; 
}

.banner-nav-btn.next-btn { 
    right: 5px; 
}

.banner-nav-btn .png-icon { 
    width: 18px; 
    height: 18px; 
    fill: none; 
    stroke: #333333; 
    stroke-width: 2.5; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
}

/*
@media (min-width: 768px) {
    .banner-nav-btn { 
        
    } 
}*/

.banner-card {
    flex: 0 0 330px;
    width: 330px;
    height: 400px;
    max-height: 400px;
    background: white;
    color: var(--text-dark);
    border-radius: var(--base-radius);
    display: flex;
    flex-direction: column;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    position: relative;
    scroll-snap-align: center;
    margin: 5px 0px;
}

.banner-img-area {
    width: 100%;
    flex: 1 1 auto;             
    min-height: 0;              
    background-color: #eee;
    position: relative;
    padding-bottom: 0px;
}

.banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.badge-no1 {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 42px;
    height: 42px;
    background-color: rgba(51, 51, 51, 1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.badge-no1::after {
    content: "";
    width: 27px;
    height: 27px;

    /* 왕관 안에서 움직이는 골드 색상 */
    background: linear-gradient(
        110deg,
        #a66b16 0%,
        #e4ad36 20%,
        #fff2bd 40%,
        #d49a25 60%,
        #ffdf7b 80%,
        #a66b16 100%
    );
    background-size: 300% 100%;

    /* 첨부 SVG의 왕관 모양으로 표시 */
    -webkit-mask: url('//im.allido.co.kr/image/ico_crown.svg') center / contain no-repeat;
    mask: url('//im.allido.co.kr/image/ico_crown.svg') center / contain no-repeat;

    animation: crown-gold-flow 3s ease-in-out infinite alternate;
}

@keyframes crown-gold-flow {
    from {
        background-position: 0% 50%;
    }
    to {
        background-position: 100% 50%;
    }
}

/* 움직임 최소화 설정 지원 */
@media (prefers-reduced-motion: reduce) {
    .badge-event::after {
        animation: none;
        background-position: 50% 50%;
    }
}

.badge-event {
    position: absolute;
    top: 10px;
    left: 0px;
    width: 65px;
    height: 26px;
    background-color: rgb(255 154 79);
    border-radius: 0px 5px 5px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.badge-event::after {
    content: 'EVENT';
    font-size: 15px;
    font-weight: bold;
    color: #fff;
    position: absolute;
    line-height: 0px;
}

.banner-txt-area {
    position: absolute;
    bottom: 0px;
    height: 140px;
    width: 100%;
    /* flex: 0 0 auto.*/
    padding: 20px 24px 24px 24px; 
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 5px;
    background-color: #ffffff;
}

.banner-txt-header { 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    gap: 5px;
}

.banner-tag-name { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
}

.master-tag-badge { 
    background-color: var(--primary-color); 
    color: #f3f0ff; 
    font-size: 13px; 
    font-weight: bold; 
    padding: 1px 12px; 
    border-radius: 16px; 
}

.event-tag-badge {
    position: absolute;
    top:-100px;
    left:0px;
}

.master-name-text { 
    font-size: 18px; 
    font-weight: bold; 
    color: #222; 
}

.master-number-text { 
    font-size: 18px; 
    font-weight: normal; 
    color: #6a4bff; 
}

.banner-rating { 
    display: flex; 
    align-items: center; 
    gap: 3px; 
    font-size: 15px; 
    color: #888; 
}

.star-icon { 
    position: relative;
    width:16px; 
}

.banner-desc { 
    font-size: 15px; 
    color: #444; 
    line-height: 1.5;     
    word-break: keep-all; 
}


/* 카테고리 영역 */
.categories .sec-conts{
    display: flex;              
    gap: 16px;                  
    padding: 0px var(--base-padding);
    overflow-x: auto;          
    scroll-behavior: smooth;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/*
@media (min-width: 768px) {
    .categories {
        overflow-x: visible;
        padding: 24px 40px;
    }
}
*/

.categories .cat-item { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    text-align: center; 
    gap: 10px; 
    flex-shrink: 0; 
    width: 70px;
    cursor: pointer; 
    text-decoration: none;
}

.categories .cat-item span {
    color:#666;
    font-size:15px;
}

.categories .cat-icon {
    width: 70px; 
    height: 70px; 
    border-radius: var(--base-radius); 
    background-color: var(--cat-bg); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: 46px 46px; 
    display: flex;
    align-items: center;
    justify-content: center;
}

.categories .cat-icon::before {
    content: "";
    display: block;
    flex: none;
    width: 46px;
    height: 40.25px;    
    background-repeat: no-repeat;    
    background-position: center center;
    pointer-events: none;
}

.categories .cat-item.sinjeom .cat-icon::before{background-image: url('//im.allido.co.kr/image/cat_sinjeom.png'); background-size: 100%;}
.categories .cat-item.taro .cat-icon::before{background-image: url('//im.allido.co.kr/image/cat_taro.png'); background-size: 80%;}
.categories .cat-item.saju .cat-icon::before{background-image: url('//im.allido.co.kr/image/cat_saju.png'); background-size: 77%;}
.categories .cat-item.best .cat-icon::before{background-image: url('//im.allido.co.kr/image/cat_best.png'); background-size: 72%;}
.categories .cat-item.gunghap {}
.categories .cat-item.money {}
.categories .cat-item.moving {}
.categories .cat-item.naming {}


/* --------------------------------------------
    최근 본 상담사
--------------------------------------------- */
.recent-consultants {
    overflow: hidden;
}

/*
@media (min-width: 768px) {
    .sec-head { padding: 0 40px 20px 40px; }
}
*/

.sec-m-title { 
    font-size: var(--base-tit-sz); 
    font-weight: bold; 
    color: #111; 
    letter-spacing: -0.5px; 
}

.section-more-link { 
    display:flex; 
    align-items: center; 
    font-size: 15px; 
    color: #333; 
    text-decoration: none; 
    font-weight: normal; 
}

.section-more-link::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;    
    background-image: url('//im.allido.co.kr/image/arrow_right.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-left:2px;
    opacity:0.4;

}

.section-more-link .count {
    margin-left: 2px;
    color:#888;
}

.recent-scroll { 
    display: flex; 
    gap: 30px; 
    overflow-x: auto; 
    white-space: nowrap;    
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-left: var(--base-padding);
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    /* 마지막 슬라이드가 왼쪽 기준선에 위치하도록 우측에 여백(공간) 강제 확보 */
    padding-right: calc(100% - 320px); 
}

.recent-scroll:active {
    cursor: grabbing;
}

/*
@media (min-width: 768px) {
    .recent-scroll {
        padding: 0 40px 20px 40px;
        gap: 24px;
        scroll-padding-left: 40px;
        overflow-x: auto; 
        padding-right: calc(100% - 350px); 
    }
}
*/
.recent-stack-column { 
    display: flex; 
    flex-direction: column; 
    gap: 30px; 
    flex-shrink: 0; 
    width: 340px;    
    scroll-snap-align: start;
}

@media (min-width: 768px) {
    .recent-stack-column {
        width: 350px; 
        gap: 30px;
    }
}

.recent-stack-column:last-child { 
    width: 100%;
}

.cst-item-card { 
    display: flex; 
    gap: 16px; 
    align-items: center;
    width: 100%; 
}

@media (min-width: 768px) {
    .cst-item-card {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        border-radius: var(--base-radius);
    }
}

.cst-img-box { 
    position: relative;
    width: 130px; 
    height: 170px; 
    border-radius: var(--base-radius); 
    flex-shrink: 0; 
    overflow: hidden; 
    background-color: #eee; 
}

.cst-img-box a{ 
    width: 100%;
    height: 100%;
}

.cst-img-box a::after{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid rgba(0, 0, 0, 0.06);
    content: "";
    border-radius: var(--base-radius);
    z-index:0;
}

.cst-avatar-img { 
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block; 
}

.cst-details-box {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 3px;
    padding-top: 2px;
    overflow: hidden;
}

.cst-tags-row {
    display: flex;
    gap: 6px;
    align-items: center;
}

.mini-tag-badge {
    font-size: 13px;
    font-weight: bold;
    padding: 2px 7px;
    height:auto;
    border-radius: 4px;
    letter-spacing: -0.2px;
}

/*
.mini-tag-badge.sinjeom {
    background-color: var(--tag-sinjeom-bg);
    color: var(--tag-sinjeom-color);
}

.mini-tag-badge.taro {
    background-color: var(--tag-taro-bg);
    color: var(--tag-taro-color);
}

.mini-tag-badge.saju {
    background-color: var(--tag-saju-bg);
    color: var(--tag-saju-color);
}
*/

.cst-identity-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
}

.cst-name {
    font-size: 18px;
    font-weight: bold;
    color: #222;
    letter-spacing: -0.5px;
}

.cst-id-number {
    font-size: 17px;
    font-weight:normal;
    color: #666; 
}

.cst-intro-snippet {
    font-size: 16px; 
    color: var(--text-muted); 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    letter-spacing: -0.3px; 
    padding-right: 50px;
}

/*
.cst-pricing-row {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 17px;
    font-weight: bold;
    color: #222;
    margin-bottom: 4px;
}

.cst-coin {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.cst-coin::before {
  content: "C";
  width: 16px;
  height: 16px;
  background-color: #fcc419;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  position:relative;
  top:1px;
}

.cst-price::before {
  content: "￦";
}

.price-unit-text {
    font-size: 15px;
    font-weight: normal;
    color: #777;
    margin-left: 2px;
}
*/

.action-status-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 30px;
    margin-top: 1px;
    border-radius: 17px;
    border: none;
    color: white;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    letter-spacing: -0.3px;
    transition: opacity 0.2s;
}

.action-status-btn .png-icon {
    width: 14px;
    height: 14px;
    fill: currentColor; 
}

.action-status-btn.callable {
    background-color: var(--primary-color);
}

.action-status-btn.busy {
    background-color: var(--btn-busy-bg);
}

.btn-selc-row {
    display: flex;
    gap: 5px;
    flex-direction: row;
    justify-content: flex-start;
    margin-top:5px;
}

.btn-selc {
    border-radius: 20px;
    padding: 0px 10px;
    height: 34px;
    font-size: 14px;
    font-weight: bold;
}

.btn-py-after {
    border:1px solid var(--primary-color);
    background-color: #ffffff;
    color:var(--primary-color);
}

.btn-py-coin {
    border:1px solid var(--primary-color);
    background-color: var(--primary-color);
    color:#fff;
}

/* 광고 배너 스타일 */
.ad-banner {
    width: 100%;
    overflow: hidden;
    line-height: 0; 
}

.ad-banner-link {
    position: relative;
    display: block;
    width: 100%;
    cursor: pointer;
}

.bnr-page {
    position: absolute;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    width: 40px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    padding: 0px 5px;
    z-index: 1;
    right: 10px;
    bottom: 10px;
    flex-direction: row;
    border-radius: 20px;
}

.bnr-page .em {
    font-weight: bold;
    font-style: normal; 
    margin-right:3px;   
}

.ad-banner-img {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    height: auto;
    display: block;
    object-fit: cover;
}

/* 이달의 TOP 50 영역 스타일링 */
.top-csl-section {
    overflow: hidden;
}

.top-csl-viewport {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    cursor: grab; 
}

.top-csl-viewport:active {
    cursor: grabbing;
}

/*
@media (min-width: 768px) {
    .top-csl-viewport {
        display: flex;  PC 버전에서도 grid 대신 flex 구조 유지하여 가로 스크롤 활성화 
        overflow-x: auto;
        padding: 0 40px 10px 40px;
        gap: 20px;
    }
}
*/

.top-csl-card {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 130px;
    text-align: center; 
}

/*
@media (min-width: 768px) {
    .top-csl-card {
        width: 135px;
    } 데스크톱 가로폭 유지를 위해 고정 값 지정 
}
*/

.top-csl-profile-box { 
    width: 130px; 
    height: 165px; 
    border-radius: var(--base-radius); 
    background-color: #f1f3f5;
    position: relative; 
    overflow: hidden; 
}

@media (min-width: 768px) {
    .top-csl-profile-box {
        width: 100%;
        height: 180px; 
    }
}

.top-csl-profile-box::after{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid rgba(0, 0, 0, 0.06);
    content: "";
    border-radius: var(--base-radius);
}

.top-csl-profile-box .tag-badge {
    position: absolute;
    top: 10px;
    left: 10px;  
}

.top-csl-profile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    position:relative;
}

.top-csl-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
}

.top-csl-name-row {
    font-size: 16px;
    font-weight: bold;
    color: #222;
    letter-spacing: -0.3px;
}

.top-csl-name-row .master-num {
    font-weight: normal;
    color: #666;
    margin-left: 4px;
}

.top-csl-price-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 16px;
    font-weight: bold;
    color: #222;
}

.top-csl-price-row .unit {
    font-size: 13px;
    font-weight: normal;
    color: #888;
    margin-left: 2px;
}

/* 정렬 필터 및 후기 아코디언 목록 스타일 */
.csl-vlist-sec {
    padding: 0px;
    background-color: #fff;
}

.filter-scroll { 
    display: inline-flex;  /* 가로축 한 줄 배치를 보장하기 위해 변경 */
    gap: 8px; 
    padding: 20px var(--base-padding) 20px; 
    overflow-x: auto; 
    white-space: nowrap; 
    border-bottom: 1px solid var(--border-color);
    -webkit-overflow-scrolling: touch; 
    position: sticky;
    top: 112px;
    background-color: #ffffff; /* 스크롤하여 겹칠 때 뒤 콘텐츠 무력화 */
    z-index: 1;
    width: 100%;
    margin-top: -27px;
}
    
/*
@media (min-width: 768px) {
    .filter-scroll { 
        padding: 20px 40px 20px 40px; 
        overflow-x: auto; 
    }
}
*/

.sub-filter-buttons {
    position: fixed;
    top: 140px;
}


.filter-chip-btn { 
    display: inline-flex; 
    align-items: center; 
    gap: 6px; 
    padding: 8px 16px; 
    border-radius: 6px; 
    border: 1px solid #d1d5db; 
    background-color: #fff; 
    font-size: 15px; 
    color: #333; 
    font-weight: normal; 
    white-space: nowrap; 
    cursor: pointer; 
    flex-shrink: 0; 
}

.filter-chip-btn.active {
    border-color: var(--primary-color);
    color: var(--primary-color);
    font-weight: bold; 
}

.filter-chip-btn::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 2px solid #aaa;
    border-bottom: 2px solid #aaa;
    transform: rotate(45deg);
    border-radius: 1px;
    position: relative;
    top: -1px;
}

.filter-chip-btn.active::after {
    border-color: 2px solid var(--primary-color);
}

.csl-vlist {
    display: flex;
    flex-direction: column;
}	

/*
@media (min-width: 768px) {
    .csl-vlist {
        padding: 0 40px;
    }
}
*/

.csl-list-row-item {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 30px;
    margin-bottom: 25px;
}

.csl-list-row-item:last-child {
    border-bottom: none;
}

.csl-list-row-item .csl-row-main {
    display: flex;
    gap: 20px;
    align-items: center;
}

.review-accd-bar { 
    position:relative;
    margin-top: 18px; 
    background-color: #f4f4f5; 
    border-radius: var(--base-radius); 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 20px; 
    cursor: pointer; 
    user-select: none; 
    transition: background-color 0.2s; 
}

.review-accd-bar::after {
    content: '';
    position: absolute;
    left: 19px;
    top: -2px;
    transform: translateY(-50%);
    border-bottom: 12px solid #f4f4f5;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
}

.csl-keyword {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #6e6c8e;
    font-size: 16px;
}

.csl-star-wrap {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 16px;
    color: #333;
    margin-left: auto;
}

.csl-star-wrap .review-count-text {
    color: #888;
    margin-left: 2px;
}

.csl-star-wrap .arrow-toggle-icon {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 2px solid #aaa;
    border-bottom: 2px solid #aaa;
    transform: rotate(45deg);
    position:relative;
    top:0px;
    transition: transform 0.2s ease;
    margin-left: 4px;
}

.csl-list-row-item.open .review-accd-bar {
    background-color:#eaf1ff;
    border-bottom: 1px solid #d2d9ed;
    border-radius: var(--base-radius) var(--base-radius) 0px 0px;
}

.csl-list-row-item.open .csl-star-wrap .arrow-toggle-icon {
    transform: rotate(225deg);
    position:relative;
    top:4px;
}

.csl-list-row-item.open .review-accd-bar::after {
    border-bottom: 12px solid #eaf1ff;
}

.review-accd-conts {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.01s ease-out;
    background-color: #eaf1ff;
    border-radius: 0 0 var(--base-radius) var(--base-radius);
    margin-top: -4px;
    padding: 0 16px;
}

.csl-list-row-item.open .review-accd-conts {
    padding: 20px;
    border-top: 1px dashed #dbe0f5;
}

.review-accd-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.review-bubble-row {
    display: flex;
    gap:15px;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 12px;
    border-bottom: 1px dashed #cad0dc;
    align-items: center;
}

.review-bubble-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.review-preview {
    font-size: 16px;
    color: #444;
    line-height: 1.5;
    letter-spacing: -0.3px;
    position: relative;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.review-preview::before {
    content: '•';
    position: relative;
    left: 0;
    color: #888;
    margin-right: 5px;
}

.review-writer-name {
    font-size: 14px;
    color: #727b8c;
    white-space: nowrap;
}

.review-more {
    width: 100%;
    background:none;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: normal;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0px 0px -6px;
}

/* 필터 바텀시트 레이어 */
.filter-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay-dark);
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.filter-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

.filter-bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 100%);
    width: 100%;
    max-height:60%;
    height:auto;
    background-color: #ffffff;
    border-radius: 28px 28px 0 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.15);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.filter-bottom-sheet.show {
    transform: translate(-50%, 0);
}

.sheet-scroll-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: var(--base-padding);
}

@media (min-width: 768px) {
    .sheet-scroll-body {
        padding: 40px;
    }
}

.sheet-section-title {
    font-size: 20px;
    font-weight: bold;
    color: #111111;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
    text-align: left;
}

.sheet-section-title span.sub-limit {
    font-size: 16px;
    font-weight: normal;
    color: #888888;
    margin-left: 8px;
}

@media (max-width: 480px) {
    .sheet-section-title span.sub-limit {
        display:block;
        margin-top: 5px;
        margin-left: 0px;
    }
}

.filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 36px;
}

.filter-tags:last-child {
    margin-bottom: 20px;
}

.filter-tag {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    color: var(--text-normal);
    padding: 9px 18px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: normal;
    cursor: pointer;
    user-select: none;
    transition: all 0.15s;
}

.filter-tag.selected {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background-color: #f6f5ff;
    font-weight: bold;
}

.sheet-footer {
    padding: 16px var(--base-padding) 24px;
    border-top: 1px solid var(--border-color);
    background-color: #ffffff;
    display: flex;
    gap: 12px;
    align-items: center;
}

@media (min-width: 768px) {
    .sheet-footer {
        padding: 20px 40px 30px 40px;
    }
}

.sheet-reset-btn {
    flex: 0 0 130px;
    height: 52px;
    background-color: #ffffff;
    border: 1px solid #b0b5c1;
    border-radius: 12px;
    font-size: 16px;
    font-weight: bold;
    color: #555555;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.sheet-reset-btn .png-icon {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.sheet-apply-btn {
    flex-grow: 1;
    height: 52px;
    background-color: var(--primary-color);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    letter-spacing: -0.3px;
}

/* --------------------------------------------
    상담사 상세페이지
-----------------------------------------------*/
.profile-section {
    width: 100%;
    position: relative;
    background-color: #e8ecf2;
}

.cd-profile-img {
    position: relative;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    height: 370px;
}

.cd-profile-img img {
    width:100%; 
    margin-top:-5%;  
}

/* 이미지 하단 알림 뱃지 라인 */
.status-bar {
    position: absolute;
    bottom: 44px; /* 메인 컨텐츠 영역 둥근 모서리와 겹치지 않게 조절 */
    right: 16px;
    display: flex;
    gap: 5px;
}

.status-badge {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: normal;
    display: flex;
    align-items: center;
}

.status-badge.available {
    background-color: #4da6ff;
    color: #ffffff;
}

.status-badge.available .dot {
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    border-radius: 50%;
    margin-right: 6px;
    display: inline-block;
}

.status-badge.watching {
    background-color: rgba(40, 40, 40, 0.85);
    color: #ffffff;
    width:200px;
    justify-content: center;
}

.status-badge.watching .highlight {
    color: #ff9933;
    margin: 0 2px;
    font-weight: bold;
}

/* 상세 정보 컨텐츠 영역 (이미지를 오버랩하는 라운드 박스) */
.content-section {
    background-color: #ffffff;
    border-radius: 30px 0px 0 0;
    margin-top: -30px;
    position: relative;
    padding: 40px var(--base-padding);
}

.cst-intro-mssg {
    font-size: 16px;
    color: var(--text-muted);
    letter-spacing: -0.3px;
    list-style: 180%;
}

/* 가격 및 후기 영역 */
.price-review-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    margin-top: 10px;
}

.price-review-row .cst-coin {
    font-size: 20px;
}

.review-link {
    text-decoration: none;
    color: #555;
    font-size: 16px;
    display: flex;
    align-items: center;
}

.review-link .count {
    font-weight: bold;
    margin-left: 2px;
}

.arrow-icon {
    margin-left: 2px;
    color: #888;
}

.divider {
    border: 0;
    height: 1px;
    background-color: #f0f0f0;
    margin-bottom: 24px;
}

/* 메인 정보 키워드 그룹 (전문가 유형, 스타일, 분야 등) */
.key-group{
    margin-bottom: 15px;
}

.info-row {
    margin-bottom: 15px;
}

.info-row h3 {
    font-size: 16px;
    color: #444;
    font-weight: bold;
    margin-bottom: 10px;
}

.gray-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gray-tags span {
    background-color: #f5f5f5;
    border: 1px solid #ededed;
    box-sizing: border-box;
    color: #555;
    padding: 3px 7px;
    border-radius: 4px;
    font-size: 14px;
}


/* ----------------------------------------------------
    상담사 상세페이지 section 
------------------------------------------------------*/

/* 섹션 공통 레이아웃 
.dtsec-box {
    margin-bottom: 12px;
}

.dtsec-box:last-of-type .sec-conts {
    margin-bottom: 100px;
}
*/

.sec-conts p .p-title{
    color: #000;
    font-weight: normal;
    margin-right: 10px;
    display: inline-block;
    line-height: 190%;
    width: 70px;
}


/* 개별 후기 카드 */
.review-card {
    flex: 0 0 75%; /* 화면 너비 대비 카드 크기 (좌우 스크롤 유도를 위해 약간 잘리게 설정) */
    width: 250px; /* PC/태블릿 대응 맥스 치 */
    background-color: #f6f7f8;
    border: 1px solid #ededed;
    border-radius: 12px;
    padding: 15px 20px;
    box-sizing: border-box;
    scroll-snap-align: start; /* 스크롤 스냅 기준점 */
}

/* 카드 내부 텍스트 스타일 */
.review-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin: 0 0 8px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.review-content {
    font-size: 16px;
    color: #444;
    margin: 0 0 5px 0;
    overflow: hidden;
    padding:0px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-all;
}

.review-meta {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #888;
    gap:7px;
}

.review-meta .duration {
    display: flex;
    align-items: center;
}

.review-meta .icon-phone {
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url('//im.allido.co.kr/image/ico_mini_time.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}



/* mssg:탭메뉴는 공통 스타일에 위치 */

/* 탭 콘텐츠 제어 */
.tab-content-wrap {
    background-color: #ffffff;
}

.tab-content {
    display: none;
    font-size:16px;
    text-align:left;
    margin-bottom:140px;
}

.tab-content.active {
    display: block;
}

.tab-content p {
    margin:10px 0px;
}

.tab-content img {
    width:100%;
    max-width:640px;
    display: block;
    margin:40px auto;
}

/* -----------------------------------------------------
   상담후기 리스트 내부 스타일 (Content-2)
------------------------------------------------------*/

/* 후기 상단 헤더 (타이틀 & 정렬) */
.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 4px;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
}

.review-header .title {
    font-size: 18px;
    font-weight: bold;
    color: #2d3748;
    margin: 0;
}

.review-header .count-num {
    font-weight: normal;
    color: #718096;
}

.review-header .dropdown-menu {
    right: 0px;
    top: 46px;
}

.review-header .sort-btn {
    background: none;
    border: none;
    font-size: 13px;
    color: #718096;
    cursor: pointer;
    padding: 0;
}

.review-header .sort-btn::after {
    content: ' ∨'; /* 시안의 화살표 대용 (아이콘 폰트가 있다면 대체 가능) */
    font-size: 10px;
}

/* 후기 개별 아이템 기본 레이아웃 */
.review-item {
    padding: 30px 4px;
    border-bottom: 1px solid #e2e8f0;
}

.review-item:last-child {
    border-bottom: none;
}

/* 아이템 상단 유저 정보 */
.item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
}

.item-header .user-id {
    font-size: 15px;
    color: #788aa0;
}

.item-header .meta-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.item-header .date {
    font-size: 15px;
    color: #a0aec0;
}

.item-header .more-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: #a0aec0;
}

.item-header .more-btn::before {
    content: '⋮'; 
    font-size: 18px;
    font-weight: bold;
}

.review-item .review-title {
    font-size: 17px;
    color:#333;
}

/* 후기 본문 제목 및 내용 */
.review-text {
    font-size: 16px;
    line-height: 1.6;
    color: #4a5568;
    margin: 0 0 16px 0;
}

/* 5. 키워드 태그 */
.tag-list {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
}

.tag-list .tag {
    font-size: 13px;
    background-color: #ebf8ff;
    color: #2b6cb0;
    padding: 4px 8px;
    border-radius: 4px;
}

/* 6. 좋아요 버튼 영역 */
.like-area {
    display: flex;
    align-items: center;
    gap: 8px;
}

.like-area .like-label {
    font-size: 14px;
    color: #1a202c;
}

.like-btn {
    display: flex;
    align-items: center;
    gap:1px;
    background-color: #fff;
    border: 1px solid #e2e8f0;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 13px;
    color: #718096;
    cursor: pointer;
    transition: all 0.2s;
}

.like-btn.active {
    border: 1px solid var(--primary-color);
    color:var(--primary-color);
}

.like-btn::before {
    content: '';
    display: inline-block;
    width: 15px;  /* 아이콘 너비 */
    height: 15px; /* 아이콘 높이 */
    
    background-image: url('//im.allido.co.kr/image/ico_mini_like_off.png');
    
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: background-image 0.2s ease; /* 전환 효과 */
}

.like-btn.active::before {
    background-image: url('//im.allido.co.kr/image/ico_mini_like_on.png');
}

.reply-box {
    background-color:#f6f7f8;
    border-radius: 8px;
    padding: 20px;
    margin-top: 16px;
}

.reply-title {
    font-size: 16px;
    font-weight: bold;
    color: var(--text-dark);
    margin: 0 0 8px 0;
}

.reply-text {
    font-size: 15px;
    line-height: 1.6;
    color: #718096;
    margin: 0;
}

/* 하단 플로팅 컨테이너 */
.floating-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0 auto;
    background-color: #ffffff;
    border-top: 1px solid #eaeaea;
    padding: 16px 20px 30px;
    display: flex;
    gap: 12px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.05);
    z-index: 2;
}

/* 공통 버튼 스타일 */
.flt-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    border-radius: 12px;
    font-size: 18px;    
    cursor: pointer;
    border: none;
    transition: background-color 0.2s ease;
    color: var(--text-normal);
}

/* 1. 하트 (좋아요) 버튼 */
.flt-btn-like {
    width: 80px;
    border: 1px solid #999999;
    background-color: #ffffff;
    
    /* [색상 변수 정의] 여기서 컬러를 한눈에 관리하세요! */
    --like-color-default: #666666; /* 활성화 전 기본 컬러 */
    --like-color-active: #f81700;  /* 활성화 되었을 때 컬러 */
}

.flt-btn-like .fa-heart {
    display: inline-block;
    width: 20px;
    height: 20px;
    
    /* 분리한 SVG 파일 경로 지정 */
    -webkit-mask-image: url('//im.allido.co.kr/image/ico_lnheart.png');
    mask-image: url('//im.allido.co.kr/image/ico_lnheart.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    mask-position: center 1px;
    
    /* ★ 활성화 전 컬러 적용 (변수 대입) */
    background-color: var(--like-color-default); 
    
    transition: all 0.01s ease;
}

/* 3. 활성화(Active) 혹은 마우스 오버 상태 */
.flt-btn-like.active{
    border-color:var(--primary-color);
    color:#222;
}

/* 3. 활성화(Active) 혹은 마우스 오버 상태 */
.flt-btn-like.active .fa-heart {
    /* 활성화 시 채워진 하트 이미지로 마스크 교체 */
    -webkit-mask-image: url('//im.allido.co.kr/image/ico_fill_heart.png');
    mask-image: url('//im.allido.co.kr/image/ico_fill_heart.png');

    /* ★ 활성화 시 컬러 적용 (변수 대입) */
    background-color: var(--like-color-active);
}

/* 2. 바로 상담하기 버튼 */
.flt-btn-consult {
    flex: 1; /* 남은 영역을 꽉 채우도록 설정 */
    background-color: var(--primary-color);
    color: #ffffff;
    display: flex;
    gap: 8px;
    font-weight: bold;
}

.flt-btn-consult:active {
    background-color: #503ed9;
}

.flt-btn-consult .fa-phone {
    font-size: 16px;
    transform: rotate(90deg);
}

/* =========================================================================
2. 바텀 시트 (상담하기 클릭 시 올라오는 영역)
======================================================================== */
/* 어두운 배경막 (Dimmed) */
.bottom-sheet-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--overlay-dark);
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.bottom-sheet-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* 바텀 시트 컨테이너 */
.bottom-sheet {
    position: fixed;
    bottom: -100%; /* 숨겨진 상태 */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    margin: 0 auto;
    background-color: #ffffff;
    border-top-left-radius: 28px;
    border-top-right-radius: 28px;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
    z-index: 2;
    transition: bottom 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.bottom-sheet.active {
    bottom: 0; /* 위로 올라온 상태 */
}

/* 바텀시트 헤더 (닫기 버튼용 가이드바 또는 영역) */
.bottom-sheet-header {
    height: 30px;
    display: flex;
    justify-content: center;
}

.btn-close-sheet {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: none;
    border: none;
    font-size: 20px;
    color: #999999;
    cursor: pointer;
}

.btn-close-sheet .fa-solid {
    display: inline-block;    
    width:30px;
    height:3px;
    border-radius:10px;
    background-color:#ccc;
}


/* ---------------------------------------------
    바텀 콘텐츠 레이어 시트 
--------------------------------------------*/
.bottom-sheet-content {
    padding: 0 var(--base-padding) 100px; /* 푸터 버튼 공간 확보 */
    max-height: 90vh;
    overflow-y: auto;
}

/* 프로필 간이 요약 */
.profile-summary {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 35px;
}

.profile-img-wrap {
    position: relative;
}

.profile-img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    overflow: hidden;
}

.profile-img img {
    width: 100%;
    height: auto;
}

.profile-badge {
    display: flex;
    height: 24px;
    line-height: 0px;
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ff5c5c;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    padding: 0px 10px;
    border-radius: 15px;
    white-space: nowrap;
    align-items: center;
    justify-content: center;
}

.profile-info {
    display: flex;
    gap: 3px;
    flex-direction: column;
}

.profile-info .tag-badge {
    font-size: 12px;
    padding: 2px 6px;
}

.profile-info .name span {
    font-size: 14px;
    color: #999;
    font-weight: normal;
    margin-left: 4px;
}

.profile-info .desc {
    font-size: 13px;
    color: #777;
    margin-top: 4px;
}

/* 상담방식 타이틀 */
.section-title {
    font-size: 16px;
    font-weight: bold;
    color: #222;
    margin-bottom: 10px;
}

/* 탭 메뉴 스타일 */
.flaytab-container {
    display: flex;
    border-bottom: 1px solid var(--primary-color);
}

.flaytab-item {
    flex: 1;
    text-align: center;
    padding: 12px 0;
    font-size: 16px;
    font-weight:bold;
    color: #999999;
    cursor: pointer;
    border-radius: 5px 5px 0px 0px;
    background-color: #f5f5f7;
    border: 1px solid #e9e9e9;
    border-bottom: none;
    position: relative;
}

/* 활성화된 탭 */
.flaytab-item.active {
    background-color: #ffffff;
    color: var(--primary-color);
    border-color: var(--primary-color);
    z-index: 2;
    margin-bottom: -1px; /* 선 겹침 처리 */
}

/* 인기 배지 */
.badge-popular {
    position: absolute;
    top: -12px;
    right: 10px;
    background-color: #ff3b30;
    color: #ffffff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: bold;
}

/* 가이드 설명글 */
.tab-guide-text {
    font-size: 15px;
    color: #888888;
    text-align: center;
    padding: 20px 10px;
}

.tab-panels-wrapper {
  position: relative;
  width: 100%;
  min-height: 270px; /* 가장 콘텐츠가 많은 '코인 상담' 영역의 높이만큼 최소 공간 선제 확보 */
}

.tab-panel {
  position: relative;
  width: 100%;
  height: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 0.25s ease; /* 전환 시 부드러운 페이드 효과 추가 */
}

/* 3. 탭 패널 활성화 상태 */
.tab-panel.active {
  height: 340px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  overflow: visible;
}

/* 요금안내 박스 */
.price-box {
    /*background-color: #f9f9fc;*/
    border: 1px solid #e8e8f0;
    border-radius: 14px;
    padding: 30px;
}

.price-row-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.price-row-main .cst-coin {
    font-size: 20px;
}

.price-label {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

/* 코인 세부 내역 및 말풍선 */
.coin-info-area {
    position: relative;
}

/* 말풍선 */
.bubble-notice {
    position: absolute;
    top: -30px;
    right: -10px;
    background-color: #3498db;
    color: #ffffff;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.bubble-notice::after {
    content: '';
    position: absolute;
    bottom: -5px;
    right: 22px;
    border-width: 5px 8px 0px 0px;
    border-style: solid;
    border-color: #3498db transparent;
    display: block;
    width: 0;
}

.info-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.info-item {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #555;
}

.info-item .val {
    font-weight: bold;
    color: #222;
}

.inbox-text {
    font-size: 13px;
    color: #666;
    margin-top: 16px;
    line-height: 180%;
}

.em_primary {
    color:var(--primary-color)    
}

/* 코인 충전 버튼 */
.btn-charge {
    width: 100%;
    background-color: #ffffff;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    font-size: 15px;
    font-weight: bold;
    padding: 13px 0;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
}

/* 후기 보너스 안내 */
.bonus-text {
    text-align: center;
    font-size: 14px;
    color: #555;
    margin-top: 16px;
}

.bonus-text strong {
    color: var(--text-red);
    background-color: #fff9c4;
    padding: 1px 4px;
}

/* 바텀 시트 하단 최종 보라색 고정 버튼 */
.bottom-sheet-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 64px;
    background-color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    gap: 12px;
    border: none;
    text-decoration: none;
}

.bottom-sheet-footer span.phone-number {
    color: #ffdd66;
    font-size: 18px;
}

.bottom-sheet-footer span.phone-number::before {
    content: "|";
    color: #53397b;
    font-size: 14px;
    font-weight: lighter;
    padding-right: 10px;
    position: relative;
    top: -2px;
}



/*-----------------------------------------
    상담사 상담완료 후 페이지
------------------------------------------*/

/* 범용 스타일 충돌 방지를 위한 독립 네임스페이스 스타일링 / 이하 속성 사용 위치 확인 안됨
.ccp-container {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    position: relative;
    color: #333333;
    box-sizing: border-box;
}

.ccp-container *, .ccp-container *::before, .ccp-container *::after {
    box-sizing: border-box;
}
 */

/* 상단 헤더 */
.ccp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #ffffff;
}

.ccp-header button, .ccp-header a {
    background: none;
    border: none;
    color: #555555;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
}

/* 메인 콘텐츠 영역 */
.ccp-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 24px; /* 하단 탭바 높이만큼 여백 확보 */
    text-align: center;
}

.ccp-main-title {
    font-size: 22px;
    font-weight: bold;
    line-height: 1.4;
    color: #222222;
    margin: 30px;
}

.ccp-highlight-text {
    color: #6352ff; /* 시안의 시그니처 보라색 계열 */
    font-weight: bold;
}

/* 프로필 */
.ccp-profile-section {
    margin-bottom: 20px;
}

.ccp-profile-img-wrap {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.ccp-profile-img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.ccp-profile-name {
    font-size: 20px;
    font-weight: bold;
    color: #6352ff;
}

/* 안내 문구 */
.ccp-description {
    font-size: 16px;
    line-height: 1.5;
    color: #444444;
    margin-bottom: 25px;
    padding:0 20px;
    word-break: keep-all;
}

/* QR 코드 */
.ccp-qrcode-section {
    margin-bottom: 30px;
}

.ccp-qrcode-box {
    padding: 6px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    display: inline-block;
}

.ccp-qrcode-img {
    width: 60px;
    height: 60px;
    display: block;
}

/* 전화번호 복사 바 */
.ccp-number-copy-bar {
    display: inline-flex;
    align-items: center;
    background-color: #eef0ff; /* 연한 보라/블루 톤 배경 */
    padding: 8px 12px 8px 16px;
    border-radius: 30px;
    gap: 8px;
}

.ccp-phone-icon {
    color: #6352ff;
    display: flex;
    align-items: center;
}

.ccp-phone-number {
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    letter-spacing: -1px;
    text-decoration: none;
}

.ccp-btn-copy {
    width: 50px;
    background-color: #ffffff;
    border: none;
    color: #555555;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: normal;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: background-color 0.2s;
}

.ccp-btn-copy:active {
    background-color: #f5f5f5;
}

.ccp-btn-copy.copied {
    background-color: #434157; /* 성공 의미의 초록색 예시 */
    color: #ff9c9c;
}


/* 하단 고정 연결 버튼 */
.ccp-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0 auto;
}

.ccp-btn-call-connect {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 60px;
    background-color: #6352ff; /* 시안 하단 버튼 배경색 */
    color: #ffffff;
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
    text-decoration: none !important;
}

.ccp-btn-call-connect:hover {
    background-color: #4b3ae6;
}