/* 2026-11-02 타로살롱 리뉴얼 디자인 이식(운세7) — 원본 tarotsalon-php static/css/taro.css 에서 필요한 블록만 복사
   타로 쪽 값을 고치면 여기도 같이 볼 것 */

/* 공용: 회전 그라데이션 각도 변수 + 키프레임(taro.css 1036~1038, 1146~1149) */
/* 틀 회전용 각도 변수 — @property 미지원 기기는 회전 없이 정지된 그라데이션 */
@property --vc-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

@keyframes vcBorderSpin { to { --vc-angle: 360deg; } }
@keyframes vcRingRipple {
    0%   { transform: scale(1);   opacity: .9; }             /* 시작 진하기 */
    100% { transform: scale(1.4); opacity: 0; }              /* 1.5 = 퍼지는 크기(크게 하면 썸네일 왼쪽 끝에서 잘림) */
}

/* 시작: 타로 리스트(inc_taro_list.php) — taro.css 439~611 */
/* 2026-10-22 타로 리스트(신타로/사주타로/클래식타로/기획전 더보기) — 퍼블 taro/list.html, inc_taro_list.php */
.style-taro-list {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.style-tarolistItem {
    display: flex;
    gap: 10px;
}
.style-tarolistItem-thumbnail {
    width: 125px;
    height: 125px;
    flex-grow: 0;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 10px;
    position: relative;
    border: 1px solid #F7F8FA;
}
.style-tarolistItem-thumbnail .style-tarolistItem-masterImage {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.80) translateY(5%);
}
.style-tarolistItem-badge {
    position: absolute;
    top: 0px;
    left: 4px;
}
.style-tarolistItem-badge img {
    height: 15px;
}
.style-tarolistItem-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
	margin-top:3px;
}
.style-tarolistItem-info .style-tarolistItem-title {
    color: #2A2A2A;
    font-size: 14px;
    font-weight: 600;
    line-height: 130%;
	margin-top:7px;
}
.style-tarolistItem-profile {
    display: flex;
    gap: 5px;
    align-items: center;
}
.style-tarolistItem-profile-thumbnail-wrap {
    position: relative;
    width: 26px;
    height: 26px;
}
.style-tarolistItem-profile-thumbnail {
    width: 26px;
    height: 26px;
    flex-grow: 0;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 50%;
}
.style-tarolistItem-profile-thumbnail .style-tarolistItem-profile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.50) translateY(3%);;
}
.style-tarolistItem-profile-info {
    display: flex;
    flex-direction: column;
}
.style-tarolistItem-profile-info .style-tarolistItem-masterName {
    font-size: 12px;
    font-weight: 500;
    color: #2A2A2A;
	margin-top:2px;
}
.style-tarolistItem-status {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid #fff;
    z-index: 2;
    box-sizing: content-box;
}
.style-tarolistItem-status.color-green {
    background: #00A000;
}
.style-tarolistItem-status.color-red {
    background: #FF1D00;
}
.style-tarolistItem-status.color-gray {
    background: #ADB1BA;
}
.style-tarolistItem-price {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    color: #2A2A2A;
    font-weight: 500;
    line-height: 140%;
    margin-bottom:2px;
    margin-top:1px;
}
.style-tarolistItem-price .style-tarolistItem-cashIcon {
    width: 11px;
    height: auto;
}
.style-tarolistItem-price span {
    font-size: 10px;
    font-weight: 500;
    color: #8E929A;
    line-height: 140%;
    margin-left: 1px;
}
.style-tarolistItem-count {
    display: flex;
	margin-top:-2px;
}
.style-tarolistItem-count ul {
    display: flex;
    gap: 7px;
    align-items: center;
}
.style-tarolistItem-count li {
    display: flex;
    gap: 3px;                 /* 메인 세로형 카드(.style-vertical-count dl)와 맞춤 — 퍼블 2px */
    align-items: center;
    color: #545a5a; /* #7a7e85 */
    font-size: 11px;
    font-weight: 400;
    line-height: 16px;
}

.style-tarolistItem-count li span{
	margin-top:0px;
}
.style-tarolistItem-count li img {
    width: 11px;              /* 메인 세로형 카드 아이콘 11px과 맞춤 — 퍼블 10px */
    height: 11px;
    margin-top: -1px;
}
.style-tarolistItem-count .blue-text {
    color: #7A7E85;
	margin-left:2px;
	font-weight: 400;
}
/* 2026-10-30 후기·팔로워 사이 점(li.bullet) — 글자 "·"는 숨기고 CSS 원으로 그림(크기·색은 여기서 조정) */
.style-tarolistItem-count li.bullet { font-size: 0; }
.style-tarolistItem-count li.bullet::before { content: ""; display: block; width: 2px; height: 2px; border-radius: 50%; background: #AAA; }
/* 퍼블 외 보충: 헤더 타이틀 왼쪽 정렬(퍼블 style.css에만 있음) + 긴 소개글 한 줄 말줄임 */
.style-layout-header .style-header-title.left {
    text-align: left;
}
.style-tarolistItem-info {
    min-width: 0;
    flex: 1;
}
.style-tarolistItem-info .style-tarolistItem-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
	font-size:13px;
}
/* 직접 등록한 원형 프로필 = 확대 없이 */
.style-tarolistItem-profile-thumbnail.is-self .style-tarolistItem-profile-img { transform: none; }


/* 시작: 2026-10-28 타로 리스트 배치 변경(inc_taro_list.php, 사용자 캡처 기준 — 값은 작성자 임의) */
/* 태그 2개 (타이틀 아래, 메인 세로 카드와 같은 보라) */
.style-tarolistItem-tags { display: flex; gap: 6px; overflow: hidden; white-space: nowrap; }
.style-tarolistItem-tags span { color: #f35977; font-size: 12px; font-weight: 500; line-height: 130%; }
/* 원형+이름 줄 (맨 아래) */
.style-tarolistItem-info .style-tarolistItem-profile { margin-top: 3px; }
.style-tarolistItem-profile-thumbnail-wrap { flex-shrink: 0; }
.style-tarolistItem-profile-thumbnail { position: relative; z-index: 1; }
/* 상담 중 = 원형 바깥 회전 그라데이션 링 (메인 세로 카드 .is-calling::before 와 같은 방식) */
.style-tarolistItem-profile-thumbnail-wrap.is-calling::before {
    content: ""; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
    inset: -3px;                                                 /* 링 바깥 = 원형 + 3px */
    padding: 1.5px;                                              /* 링 두께 */
    background: conic-gradient(from var(--vc-angle), #FF00CC, #FF0022, #FFC700, #FF00CC);
    animation: vcBorderSpin 5s linear infinite;                  /* 한 바퀴 시간 */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* 상담 중 = 링이 바깥으로 퍼지며 사라지는 물결(메인 세로 카드 .is-calling::after 와 같은 방식, 키프레임 vcRingRipple 공용) */
.style-tarolistItem-profile-thumbnail-wrap.is-calling::after {
    content: ""; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
    inset: -3px;                                                 /* 시작 크기 = 위 링과 같게 */
    padding: 1.5px;                                              /* 물결 두께 */
    background: conic-gradient(from var(--vc-angle), #FF00CC, #FF0022, #FFC700, #FF00CC);
    animation: vcRingRipple 1.8s ease-out infinite, vcBorderSpin 5s linear infinite; /* 1.8s = 한 번 퍼지는 시간 (퍼지는 크기·진하기는 vcRingRipple — 메인과 공용) */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
@media (prefers-reduced-motion: reduce) {
    .style-tarolistItem-profile-thumbnail-wrap.is-calling::before { animation: none; }
    .style-tarolistItem-profile-thumbnail-wrap.is-calling::after { display: none; }
}
/* "상담중" 표기 — 원형 아래 가운데 */
.style-tarolistItem-status-label {
    position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); z-index: 2;
    padding: 0 3px; border-radius: 4px;
    background: #EB2B51; color: #fff; font-size: 9px; font-weight: 600; line-height: 12px; white-space: nowrap; /* 2026-10-30 상담중 색(피그마, 원래 #FF1D00) */
}
/* 2026-10-28 상담 가능 = 초록 링 / 부재중 = 회색 링 (상담 중 링과 같은 크기·두께, 회전·물결 없음 — 메인 세로 카드 .is-ready/.is-offline 과 같은 방식) */
.style-tarolistItem-profile-thumbnail-wrap.is-ready::before,
.style-tarolistItem-profile-thumbnail-wrap.is-offline::before {
    content: ""; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
    inset: -3px;                                                 /* 링 크기 = 상담 중 링과 같게 */
    padding: 1.5px;                                              /* 링 두께 */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.style-tarolistItem-profile-thumbnail-wrap.is-ready::before { background: #00D1B8; }   /* 2026-10-30 상담가능(피그마, 원래 #00A000) */
.style-tarolistItem-profile-thumbnail-wrap.is-offline::before { background: #8A8E9A; } /* 2026-10-30 부재중(피그마, 원래 #ADB1BA) */
/* 2026-10-28 리스트 "상담가능"/"부재중" 표기 색 (모양은 위 .style-tarolistItem-status-label) */
.style-tarolistItem-status-label.is-ready { background: #00D1B8;letter-spacing: -1px; } /* 2026-10-30 피그마(원래 #00A000) */
.style-tarolistItem-status-label.is-offline { background: #8A8E9A; } /* 2026-10-30 피그마(10-28 #8E929A, 원래 #ADB1BA) */
/* 이름 — 캡처처럼 조금 크게 */
.style-tarolistItem-profile-info .style-tarolistItem-masterName { font-size: 14px; margin: 0; margin-top:3px;margin-left:4px;}
/* 상담 중 = 큰 썸네일 회전 그라데이션 틀 (메인 세로 카드 .style-masterItem-vertical-img.is-calling::after 와 같은 방식) */
.style-tarolistItem-thumbnail.is-calling::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    border-radius: 10px;
    padding: 2px;                                                /* 틀 두께 (메인은 3px — 썸네일이 작아서 2px) */
    background: conic-gradient(from var(--vc-angle), #FF00CC, #FF0022, #FFC700, #FF00CC);
    animation: vcBorderSpin 5s linear infinite;                /* 2026-10-29 다시 켬(메인과 같게, 5s = 한 바퀴) — 10-28엔 "썸네일은 애니메이션 안 해도 됨"으로 껐었음 */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.style-tarolistItem-thumbnail .style-tarolistItem-badge { z-index: 3; }
@media (prefers-reduced-motion: reduce) {
    .style-tarolistItem-thumbnail.is-calling::after { animation: none; }
}
/* [상담하기] — 예명 뒤, 상태와 무관하게 항상 같은 모양(캡처 기준 회색 pill) */
.style-tarolistItem-counsel-btn {
    flex-shrink: 0; margin-left:3px;                            /* 예명과의 간격 */
    padding: 5px 10px; border: 0; border-radius: 18px;
    background: #F2F3F6; color: #2A2A2A; font-size: 11px; font-weight: 600; line-height: 15px;

	margin-top:2px;
}
/* 종료: 2026-10-28 타로 리스트 배치 변경 */


/* 시작: 2026-10-30 실시간 랭킹(/counselors_rank) 리스트 썸네일 순위 — 색·테두리는 메인 랭킹 숫자(.style-masterItem-vertical-rank)와 같음 */
.style-tarolistItem-thumbnail .style-tarolistItem-rank { position:absolute; right:6px; bottom:2px; z-index:3; font-size:35px; text-align:right; font-weight:700; line-height:1; color:#DCDEE3; filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff); pointer-events:none; }
.style-tarolistItem-thumbnail .style-tarolistItem-rank.is-top { background: linear-gradient(180deg,#FF86D1 0%,#FF004D 100%); /*2026-11-03 피그마 — 옛 #FF538F→#B300E2*/ -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
/* 끝: 2026-10-30 실시간 랭킹 리스트 썸네일 순위 */


/* ===== 시작: 2026-11-02 메인 이식 — 세로 카드/기획전 swiper·가로 스크롤 기본 (taro.css 3~176) ===== */
/* 2026-10-22 모바일 = 가로 스크롤(.style-horizontalScroll-mobile, 720px 이상에서 숨김) / PC = swiper(720px 미만에서 숨김) */
.style-masterItem-vertical-swiper {
    display: none;
}
@media all and (min-width: 720px) {
    .style-masterItem-vertical-swiper {
        display: block;
    }
}
.style-horizontalScroll-mobile.style-masterItem-vertical-scroll {
    gap: 9px;
}
/* 양끝 여백 16px = 가상요소 폭(padding 7px) + gap 9px */
.style-horizontalScroll-mobile.style-masterItem-vertical-scroll:before,
.style-horizontalScroll-mobile.style-masterItem-vertical-scroll:after {
    padding: 0 7px 0 0;
}
.style-masterItem-vertical-scroll-slide {
    flex-shrink: 0;
    flex-grow: 0;
    width: 161px;
    padding-bottom: 20px;
    white-space: normal;
}
.style-masterItem-vertical-swiper swiper-slide {
    width: 161px;
    padding-bottom: 20px;
}
.style-masterItem-vertical {
    width: 100%;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.style-masterItem-vertical .style-masterItem-vertical-img {
    display: block;
    width: 100%;
    aspect-ratio: 161/242;

    position: relative;
    overflow: hidden;
    border-radius: 10px;
}
.style-masterItem-vertical .style-masterItem-vertical-img .vertical-img {
    width:100%;
    height:100%;
    object-fit: cover;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
/* 시작: 세로 카드 큰 이미지에 프로필 사진(list_photo) 사용 — 얼굴 가득, 어깨선 살짝 (2026-10-21, 퍼블 외 추가) */
.style-masterItem-vertical .style-masterItem-vertical-img-profile .vertical-img {
    object-position: center top;              /* 사진의 어느 부분을 기준으로 채울지 (가로 세로) */
	transform-origin: 50% 80%;                /* 확대 중심점 — 얼굴 위치. 세로 % 를 올리면 아래쪽 기준으로 확대 */
    transform: translate(-50%, -50%) scale(1.30); /* scale = 확대 배율. 키우면 얼굴이 커지고 어깨가 잘림 */
}
/* 종료: 세로 카드 큰 이미지에 프로필 사진 사용 */
.style-masterItem-vertical .style-masterItem-vertical-badge {
    line-height: 1;
    position: absolute;
    left: 6px;
    top: 6px;
}
.style-masterItem-vertical .style-masterItem-vertical-badge img {
    width: 38px;
}
.style-masterItem-vertical .style-masterItem-vertical-title {
    margin: 8px 0 9px;
    color: #2A2A2A;
    font-size: 14px;
    font-weight: 600;
    line-height: 140%;
}
.style-masterItem-vertical-info-wrap {
    display: flex;
    gap: 8px;
}
.style-masterItem-vertical-thumbnail-wrap {
    position: relative;
    width: 46px;
    height: 46px;
}
.style-masterItem-vertical-thumbnail {
    width: 46px;
    height: 46px;
    flex-grow: 0;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 50%;
}
.style-masterItem-vertical-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.50) translateY(-2%);;
}
.style-masterItem-vertical-status {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 0 solid #fff;
    z-index: 2;
    box-sizing: content-box;
}
.style-masterItem-vertical-status.color-green {
    background: #00A000;
}
.style-masterItem-vertical-status.color-red {
    background: #FF1D00;
}
.style-masterItem-vertical-status.color-gray {
    background: #ADB1BA;
}
.style-masterItem-vertical-info {
    display: flex;
    flex-direction: column;
    gap: 0px;
}
.style-masterItem-vertical-masterName {
    color: #2A2A2A;
    font-size: 12px;
    font-weight: 500;
}
.style-masterItem-vertical-price {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: #2A2A2A;
    font-weight: 500;
    line-height: 140%;
	margin-top:1px;
}
.style-masterItem-vertical-price .style-masterItem-vertical-cashIcon {
    width: 11px;
    height: auto;
    /*margin-top:1px;*/
	margin-top:-1px;
}
.style-masterItem-vertical-price span {
    font-size: 10px;
    font-weight: 500;
    color: #8E9299;
    line-height: 140%;
    margin-left: 1px;
    margin-top: -2px;
}
.style-vertical-count {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 15px;
}
.style-vertical-count dl {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 3px;
    position: relative;
}
.style-vertical-count dt {
    line-height: 15px;
}
.style-vertical-count dt img {
    width: 11px;
}
.style-vertical-count dd {
    color: #7A7E85;
    text-align: right;
    font-size: 11px;
    font-weight: 500;
    line-height: 16px;
	margin-top:4px;
}
/* 직접 등록 원형 프로필 확대 해제 (taro.css 753) */
.style-masterItem-vertical-thumbnail.is-self img { transform: none; }

/* ===== 세로 카드 새 레이아웃 + 피그마 2차 (taro.css 1015~1201, @property·vcBorderSpin·vcRingRipple은 이 파일 맨 위에 있어 뺌) ===== */
/* 시작: 2026-10-28 메인 세로 카드 새 레이아웃 — 태그 / 상담 중 그라데이션 틀 / 원형 테두리 + 상태 표기 (inc_list_item_vertical.php, 값은 작성자 임의) */
/* 태그 2개 (타이틀 아래) */
.style-masterItem-vertical .style-masterItem-vertical-title { margin-bottom: 4px; }
.style-masterItem-vertical-tags { display: flex; gap: 6px; margin: 0 0 9px; overflow: hidden; white-space: nowrap; }
.style-masterItem-vertical-tags span { color: #f35977; font-size: 12px; font-weight: 500; line-height: 130%; }
/* 상담 중 = 큰 썸네일 그라데이션 틀 (::after 를 테두리 모양으로 마스킹) */
.style-masterItem-vertical .style-masterItem-vertical-img.is-calling::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    border-radius: 10px;
    padding: 3px;                                             /* 틀 두께 */
    /*background: linear-gradient(135deg, #FF5FA2 0%, #8B5CF6 100%);*/ /* 틀 색 (회전 전, 정지형) */
    /*background: conic-gradient(from var(--vc-angle), #FF5FA2, #8B5CF6, #FF5FA2);*/
    background: conic-gradient(from var(--vc-angle), #FF00CC, #FF0022, #FFC700, #FF00CC); /* 틀 색(2026-10-28 피그마 노랑·빨강·핑크) — 시작·끝 색을 같게 둬야 이음새가 안 보임 */
    animation: vcBorderSpin 5s linear infinite;                /* 3s = 한 바퀴 시간 */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.style-masterItem-vertical .style-masterItem-vertical-badge { z-index: 3; }


@media (prefers-reduced-motion: reduce) {
    .style-masterItem-vertical .style-masterItem-vertical-img.is-calling::after { animation: none; }
}


/* 2026-10-28 피그마 2차 변경으로 아래 원형 테두리·pill(3상태)은 사용 안 함 — 새 규칙은 이 블록 맨 끝
( 원형 테두리 (상태 색 = 기존 점과 동일) )
.style-masterItem-vertical-thumbnail-wrap { flex-shrink: 0; }
.style-masterItem-vertical-thumbnail-wrap .style-masterItem-vertical-thumbnail { box-sizing: border-box; border: 2px solid #ADB1BA; }
.style-masterItem-vertical-thumbnail-wrap.color-green .style-masterItem-vertical-thumbnail { border-color: #00A000; }
.style-masterItem-vertical-thumbnail-wrap.color-red .style-masterItem-vertical-thumbnail { border-color: #FF1D00; }
.style-masterItem-vertical-thumbnail-wrap.color-gray .style-masterItem-vertical-thumbnail { border-color: #ADB1BA; }
( 원형 아래 상태 표기 (pill) )
.style-masterItem-vertical-status-label {
    position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); z-index: 2;
    padding: 1px 5px; border-radius: 10px;
    color: #fff; font-size: 9px; font-weight: 600; line-height: 12px; white-space: nowrap;
    background: #ADB1BA;
}
.color-green > .style-masterItem-vertical-status-label { background: #00A000; }
.color-red > .style-masterItem-vertical-status-label { background: #FF1D00; }
.color-gray > .style-masterItem-vertical-status-label { background: #ADB1BA; }
*/

/* 원형 물결 — 원 바깥으로 약하게 퍼짐(타임세일 tsRipple 모티브, 키프레임은 따로: tsRipple 이 PC 미디어쿼리에서 재정의돼 있어서) */
.style-masterItem-vertical-thumbnail-wrap .style-masterItem-vertical-thumbnail { position: relative; z-index: 1; }
.style-masterItem-vertical-ripple { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.style-masterItem-vertical-ripple span {
    position: absolute; inset: 0; border-radius: 50%;
    background: #ADB1BA;                     /* 상태 색 — 아래 color-* 에서 바뀜 */
    opacity: 0;
    animation: vcRipple 2s ease-out infinite; /* 속도 */
}
.style-masterItem-vertical-ripple span:nth-child(2) { animation-delay: 1.2s; }
.color-green > .style-masterItem-vertical-ripple span { background: #00A000; }
.color-red > .style-masterItem-vertical-ripple span { background: #FF1D00; }
.color-gray > .style-masterItem-vertical-ripple span { background: #ADB1BA; }
/* 물결 마크업은 상담 중일 때만 그림(inc_list_item_vertical.php) — 지금은 color-red 만 실제로 쓰임 */
@keyframes vcRipple {
    0%   { transform: scale(1);    opacity: .40; } /* 시작 진하기 */
    100% { transform: scale(1.2); opacity: 0; }   /* 퍼지는 크기 — 너무 키우면 가로 스크롤 영역에서 아래가 잘릴 수 있음 */
}
@media (prefers-reduced-motion: reduce) {
    .style-masterItem-vertical-ripple span { animation: none; }
}
/* ── 2026-10-28 피그마 2차: 원형·이름·[상담하기]를 썸네일 위에 / 상담 중 원형 바깥 회전 링 / 그 외 상태 점 ── */
/* 썸네일 아래쪽 얹는 줄 */
.style-masterItem-vertical-overlay {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
    /*display: flex; align-items: center; gap: 6px;*/
    display: flex; align-items: center; gap: 4px;                /* 2026-10-28 이름 4자+".." 들어가게 6→4 */
    /*padding: 24px 8px 9px 9px;*/
    /*padding: 24px 10px 16px 12px;*/
    padding: 24px 8px 16px 12px;                                 /* 위 24px = 아래 그림자 높이 / 아래 16px = 원형이 카드 아래 끝에서 떨어진 거리("상담중" 표기가 틀에 안 걸리게) / 왼쪽 12px = 회전 링이 틀에 안 붙게 */
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.35)); /* 글자 잘 보이게 아래 그림자 */
}
.style-masterItem-vertical-overlay .style-masterItem-vertical-thumbnail-wrap {
	width: 32px; height: 32px; flex-shrink: 0;
	margin-left:-3px;
}
.style-masterItem-vertical-overlay .style-masterItem-vertical-thumbnail { width: 32px; height: 32px; position: relative; z-index: 1; }
.style-masterItem-vertical-overlay-name {
    /*flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;*/
    flex: 1; white-space: nowrap;                                /* 2026-10-28 자르기는 PHP(4자+"..")가 하므로 CSS 말줄임(…) 뺌 — 칸이 좁아 2자만 보이던 것 */
    /*color: #fff; font-size: 13px; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,.25);*/
    color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0;
	margin-top:3px;
	margin-left:4px;
}
.style-masterItem-vertical-overlay-name.is-long {
	font-size: 12px; letter-spacing: -0.3px;
	margin-left:2px;
} /* 2026-11-03 6자 이상 이름(5자 + "..") — 작성자 임의값, 세부 조정은 사용자 */
/* [상담하기] — 상태와 무관하게 항상 같은 모양 */
.style-masterItem-vertical-counsel-btn {
    flex-shrink: 0;
    /*padding: 2px 7px;*/
    padding: 2px 5px; border: 1px solid rgba(255,255,255,.85); border-radius: 20px;
    /*color: #fff; font-size: 11px; font-weight: 500; line-height: 15px;*/
    color: #fff; font-size: 11px; font-weight: 900; line-height: 15px; letter-spacing: -0.3px;
	margin-top:3px;
	margin-left:1px;
}
/* 이름 길때 상담하기 */
.style-masterItem-vertical-counsel-btn.is-long {
	margin-right:-5px;
}
.style-masterItem-vertical-counsel-btn.is-long4 {
	margin-right:-4px;
}
/* 상태 점(상담 가능 초록 / 부재중 회색) — 원형 오른쪽 아래 */
/*.style-masterItem-vertical-overlay .style-masterItem-vertical-status { width: 7px; height: 7px; bottom: -1px; right: -1px; border-width: 1.5px; }*/
.style-masterItem-vertical-overlay .style-masterItem-vertical-status { width: 9px; height: 9px; bottom: -3px; right: -3px; border:1px solid #FFF; } /* 2026-10-28 점 둘레 흰 테두리 다시 뺌 (1px 은 → border-width: 1px; border-style: solid; border-color: #fff;) */
/* 상담 중 = 원형 바깥 회전 그라데이션 링 (원형과 사이를 띄움) */
.style-masterItem-vertical-thumbnail-wrap.is-calling::before {
    content: ""; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
    inset: -4px;
    padding: 2px;
    background: conic-gradient(from var(--vc-angle), #FF00CC, #FF0022, #FFC700, #FF00CC);
/*     animation: vcBorderSpin 5s linear infinite;*/
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}



/* 상담 중 = 링이 바깥으로 퍼지며 사라지는 물결(2026-10-28) — 위 회전 링을 그대로 복사해 크게 + 투명하게 반복 */
.style-masterItem-vertical-thumbnail-wrap.is-calling::after {
    content: ""; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
    inset: -4px;                                                 /* 시작 크기 = 위 링과 같게 */
    padding: 2px;                                                /* 물결 두께 */
    background: conic-gradient(from var(--vc-angle), #FF00CC, #FF0022, #FFC700, #FF00CC);
    animation: vcRingRipple 1.1s ease-out infinite, vcBorderSpin 5s linear infinite; /* 1.8s = 한 번 퍼지는 시간 */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
@media (prefers-reduced-motion: reduce) {
    .style-masterItem-vertical-thumbnail-wrap.is-calling::before { animation: none; }
    .style-masterItem-vertical-thumbnail-wrap.is-calling::after { display: none; }
}
/* "상담중" 표기 — 원형 아래 가운데 */
.style-masterItem-vertical-overlay .style-masterItem-vertical-status-label {
    position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); z-index: 2; /* bottom = 원형 아래로 내려오는 정도 */
    padding: 0 4px; border-radius: 4px;
    background: #EB2B51; color: #fff; font-size: 9px; font-weight: 600; line-height: 13px; white-space: nowrap; /* 2026-10-30 상담중 색(피그마, 원래 #FF1D00) */
}
/* 아래 정보 (타이틀 2줄 / 태그 / 가격 / 카운트) */
.style-masterItem-vertical .style-masterItem-vertical-body .style-masterItem-vertical-title {
    margin: 8px 0 4px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; /* 2줄 말줄임 */
}
.style-masterItem-vertical-body .style-masterItem-vertical-tags { margin: 0 0 4px; }
.style-masterItem-vertical-body .style-vertical-count { margin-top: 2px; }
/* 2026-10-28 상담 가능 = 상담 중 디자인(원형 바깥 링 + 아래 표기)을 녹색으로 — 회전·물결 없음 */
.style-masterItem-vertical-thumbnail-wrap.is-ready::before {
    content: ""; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
    inset: -4px;                                                 /* 링 크기 = 상담 중 링과 같게 */
    padding: 2px;                                                /* 링 두께 */
    background: #00D1B8;                                         /* 링 색 — 2026-10-30 상담가능(피그마, 원래 #00A000) */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.style-masterItem-vertical-overlay .style-masterItem-vertical-status-label.is-ready { background: #00D1B8;letter-spacing: -1px; } /* 표기 색 — 2026-10-30 피그마(원래 #00A000) */
.style-masterItem-vertical-overlay .style-masterItem-vertical-status-label.is-offline { background: #8A8E9A; } /* 부재중 표기 색 — 2026-10-30 피그마(10-28 #8E929A, 원래 #ADB1BA) */
/* 2026-10-28 부재중 = 같은 링을 회색으로(점은 그대로) — 크기·두께는 위 is-ready 와 같이 */
.style-masterItem-vertical-thumbnail-wrap.is-offline::before {
    content: ""; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
    inset: -4px;                                                 /* 링 크기 */
    padding: 2px;                                                /* 링 두께 */
    background: #8A8E9A;                                         /* 링 색 — 2026-10-30 부재중(피그마, 원래 #ADB1BA) */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* 2026-10-28 초록·회색 링 바깥 흰 라인 — 같은 날 사용자 요청으로 다시 뺌(주석)
.style-masterItem-vertical-thumbnail-wrap.is-ready::after,
.style-masterItem-vertical-thumbnail-wrap.is-offline::after {
    content: ""; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
    inset: -5px;                                                 ( 링 바깥(-4px)보다 1px 더 = 흰 라인 바깥 )
    padding: 1px;                                                ( 흰 라인 두께 — inset 과 같이 늘릴 것 )
    background: #fff;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
*/
/* 종료: 2026-10-28 메인 세로 카드 새 레이아웃 */

/* ===== 상담 가능 원형 목록 + PC 드래그 + 실시간 랭킹 순위 (taro.css 1304~1325) ===== */
/* 시작: 2026-10-30 메인 "지금 상담 가능한 마스터 N명"(타임세일 앞, 피그마) — main/index.php .style-availList */
.style-availList { display: flex; gap: 12px; padding: 0 16px; overflow: auto hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.style-availList::-webkit-scrollbar { display: none; }
.style-availList-item { flex-shrink: 0; width: 72px; display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit; }
.style-availList-thumb-wrap { position: relative; width: 64px; height: 64px; margin: 4px 0 14px; }
.style-availList-thumb-wrap::before { content: ""; position: absolute; inset: -4px; border: 2px solid #00D1B8; border-radius: 50%; pointer-events: none; }
.style-availList-thumb { width: 100%; height: 100%; overflow: hidden; border-radius: 50%; }
.style-availList-thumb img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.5) translateY(3%); }
.style-availList-thumb.is-self img { transform: none; }
.style-availList-label { position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); z-index: 2; padding: 1px 6px; border-radius: 999px; background: #00D1B8; color: #fff; font-size: 10px; font-weight: 600; line-height: 14px; white-space: nowrap; }
.style-availList-name { margin: 0; width: 100%; font-size: 14px; font-weight: 700; line-height: 20px; color: #212124; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.style-availList-ago {
	margin: 0; min-height: 17px; width: 100%; font-size: 12px; line-height: 17px; color: #8A8E9A; text-align: center; white-space: nowrap;
	margin-top:3px;
}
/* 종료: 2026-10-30 메인 "지금 상담 가능한 마스터 N명" */
/* 2026-10-30 PC 마우스 드래그(main/index.php 스크립트) */
@media (hover:hover) and (pointer:fine) { .style-availList { cursor: grab; } .style-availList.is-dragging { cursor: grabbing; } .style-availList.is-dragging a { cursor: grabbing; } }

/* 2026-10-30 메인 실시간 랭킹 순위(inc_list_item_vertical.php, rank_no 있을 때만 — 초이스 뱃지 자리) */
.style-masterItem-vertical .style-masterItem-vertical-rank { position: absolute; left: 10px; top: 4px; z-index: 3; font-size: 48px; font-weight: 700; line-height: 1; letter-spacing: 0; color: #DCDEE3; filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff); pointer-events: none; }
.style-masterItem-vertical .style-masterItem-vertical-rank.is-top { background: linear-gradient(180deg, #FF86D1 0%, #FF004D 100%); /*2026-11-03 피그마 — 옛 #FF538F→#B300E2*/ -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

/* ===== 스켈레톤 (taro.css 1456~1473) ===== */
/* ===== 시작: 2026-11-02 메인 기획전 카드 스켈레톤(ajax 로딩 전 자리) — 색·크기 작성자 임의(운세7 스켈레톤 #f2f3f6) ===== */
.vertical-skeleton { width:161px; height:345.19px; overflow:hidden; } /* 실제 카드 높이(161×345.19, 2026-11-02 사용자 측정)와 같게 — 채워질 때 늘어나지 않도록 */
.vertical-skeleton-img { width:100%; aspect-ratio:161/242; border-radius:10px; background:#f2f3f6; animation:verticalSkeletonPulse 1.2s ease-in-out infinite; }
.vertical-skeleton-line { height:14px; margin-top:10px; border-radius:4px; background:#f2f3f6; animation:verticalSkeletonPulse 1.2s ease-in-out infinite; }
.vertical-skeleton-line.short { width:60%; margin-top:6px; }
@keyframes verticalSkeletonPulse { 0%,100% { opacity:1; } 50% { opacity:.5; } }
@media (prefers-reduced-motion: reduce) { .vertical-skeleton-img, .vertical-skeleton-line { animation:none; } }
/* ===== 끝: 2026-11-02 메인 기획전 카드 스켈레톤 ===== */

/* ===== 시작: 2026-11-02 메인 "지금 상담 가능한 마스터" 스켈레톤(main/index.php .style-availList-item.is-skeleton — ajax 채우기 전) ===== */
.style-availList-item.is-skeleton .style-availList-thumb-wrap::before { border-color:#f2f3f6; }
.style-availList-item.is-skeleton .style-availList-thumb,
.style-availList-item.is-skeleton .style-availList-name,
.style-availList-item.is-skeleton .style-availList-ago { background:#f2f3f6; animation:verticalSkeletonPulse 1.2s ease-in-out infinite; }
.style-availList-item.is-skeleton .style-availList-name { width:48px; height:14px; margin:3px 0; border-radius:4px; }
.style-availList-item.is-skeleton .style-availList-ago { width:40px; height:12px; min-height:0; margin:6px 0 2px; border-radius:4px; } /* 이름 20 + 문구 3+17 = 실제와 같은 높이 */
@media (prefers-reduced-motion: reduce) { .style-availList-item.is-skeleton * { animation:none; } }
/* ===== 끝: 2026-11-02 메인 "지금 상담 가능한 마스터" 스켈레톤 ===== */

/* 시작: 2026-11-02 리뉴얼 큰 썸네일 타입 배경(세로 400x600 — static/images/bg) — 메인 세로 카드·리스트 큰 썸네일만, 원형·미니 그리드 등 다른 곳은 기존 style.css 배경 그대로 */
.style-masterItem-vertical-img.style-bg-tarot,
.style-thumbnail-item.is-profile.style-bg-tarot,
.style-tarolistItem-thumbnail.style-bg-tarot {
	background-image: url(../images/bg/bg_profile_tarot03.png);
}
.style-masterItem-vertical-img.style-bg-saju,
.style-thumbnail-item.is-profile.style-bg-saju,
.style-tarolistItem-thumbnail.style-bg-saju {
	background-image: url(../images/bg/bg_profile_saju03.png);
}
.style-masterItem-vertical-img.style-bg-sinjeom,
.style-thumbnail-item.is-profile.style-bg-sinjeom,
.style-tarolistItem-thumbnail.style-bg-sinjeom {
	background-image: url(../images/bg/bg_profile_sinjeom03.png);
}
/* 종료: 2026-11-02 리뉴얼 큰 썸네일 타입 배경 */

/* ===== 시작: 2026-11-02 선생님 프로필 관리자(master/profile = 타로 master/index) + 상세 상단 이식 — taro.css 필요한 블록만 =====
   운세7 style.css에 이미 있는 공용 규칙(.style-detail-info-button / .scroll-chips-container / .chip-item / .style-button-radius-bk)은 덮어쓰지 않으려고 뺌 */
/* 프로필 블록 + 카메라 (taro.css 203~398) */
.style-taro-detail-profile {
    display: flex;
    gap: 20px;
    padding-top: 10px;
}
.style-taro-detail-profile-thumbnail-wrap {
    position: relative;
    width: 100px;
    height: 100px;
}
.style-taro-detail-profile-thumbnail {
    width: 100px;
    height: 100px;
    flex-grow: 0;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 50%;
}
.style-taro-detail-profile-thumbnail .style-profile-thumbnail-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.50) translateY(-2%);;
}
.style-detail-profile-camera {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 3px solid #fff;
    z-index: 2;
    align-items: center;
    justify-content: center;
    display: flex;
    box-sizing: content-box;
    padding: 0;
}
.style-detail-profile-camera img {
    width: 16px;
    height: auto;
}
.style-taro-detail-profile-info {
    display: flex;
    flex-direction: column;
}
.style-taro-detail-profile-info .style-detail-masterName-wrap {
    gap: 6px;
    align-items: center;
    display: flex;
}
.style-taro-detail-profile-info .style-detail-masterName {
    font-size: 21px;
    font-weight: 800;
    display: flex;
    align-items: flex-end;
    gap: 9px;
    color: #2A2A2A;

}
.style-taro-detail-profile-info .style-detail-masterName strong {
    font-weight: 600;
    font-size: 16px;
    color: #868B94;
    margin-left:-2px;
}
.style-taro-detail-profile .style-masterName-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 2px;
    font-size: 10px; /*2026-11-03 피그마*/
    font-weight: 700;
    height: 18px;
    padding: 0 4px;
    line-height: 18px;
    margin-left:1px;
    margin-bottom:2px;
}
.style-taro-detail-code {
    color:  #868B94;
    font-size: 12px;
    font-weight: 400;
    line-height: 140%;

	margin-bottom:3px;
}
.style-taro-detail-profile-price {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 13px;
    color: #2A2A2A;
    font-weight: 600;
    line-height: 140%;
    margin-bottom:2px;
    margin-top:3px;
    /*margin-top:-3px;*/
}

.offcanvas-infoBox .style-taro-detail-profile-price strong{
    font-weight: 600;
    /*font-size: 13px;*/
}

.style-taro-detail-profile-price .style-detail-cashIcon {
    width: 12px;
    height: auto;
    margin-top:-1px;
}
.style-taro-detail-profile-price span {
    font-size: 10px;
    font-weight: 500;
    color: #7A7E85;
    line-height: 140%;
    margin-left: 1px;
}
.style-taro-detail-profile .style-detail-count {
    font-size: 14px;
    padding-top: 2px;
    display: flex;
    align-items: center;
    gap: 20px;
	margin-top:1px;
}
.style-taro-detail-profile .style-detail-count dl {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
}
.style-taro-detail-profile .style-detail-count dt {
    color: #4D5159;
    font-size: 13px;
    font-weight: 400;
    line-height: 140%;
	margin-top:-1.1px;

}
.style-taro-detail-profile .style-detail-count dd {
    /*color: #4D5159;*/
	color:#000;
    font-size: 15px;
    font-weight: 600;
    line-height: 140%;
	margin-top:-1.5px;

}
.style-taro-detail-profile .style-detail-count dl:not(:first-of-type):before {
    content: '';
    display: block;
    width: 1px;
    height: 8px;
    background-color: #DCDEE3;
    position: absolute;
    left: -11px;
    top: 50%;
    transform: translateY(-50%);
	margin-top:-1px;
}
.style-taro-detail-profile-text {
    color: #2A2A2A;
    font-size: 15px;
    font-weight: 400;
    line-height: 150%;
}
.style-taro-detail-profile-text .style-button-moreView-wrap {
    margin-left: -25px;
    display: inline;
    padding-left: 10px;
    background: linear-gradient(270deg, #FFF 89.06%, rgba(255, 255, 255, 0.00) 100%);
    color: #2A2A2A;
    font-weight: 400;
    font-size: 15px;
}
.style-taro-detail-profile-text .style-button {
    border-radius: 6px;
    background: #F3F4F6;
    border: 1px solid #F3F4F6;
    color: #2A2A2A;
    height: 40px;
    font-size: 14px;
    font-weight: 600;
    margin-top: 20px;
}
.style-adminDetail-imageArea-taro {

}
.style-adminDetail-camera {
    width: 22px;
    padding: 0;
    background: none;
    border: none;
}

/* 상세 썸네일 상태 점 (taro.css 414~437) */



/* 2026-10-22 퍼블 taro.css에서 보충 — 상세 썸네일 상태 점(퍼블은 선생님 화면이라 카메라 버튼, 고객 상세는 이 점을 씀) */
.style-taro-detail-profile .style-detail-profile-status {
    position: absolute;
    bottom: 5px;
    right: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 3px solid #fff;
    z-index: 2;
    box-sizing: content-box;
}
.style-taro-detail-profile .style-detail-profile-status.color-green {
    background: #00A000;
}
.style-taro-detail-profile .style-detail-profile-status.color-red {
    background: #FF1D00;
}
.style-taro-detail-profile .style-detail-profile-status.color-gray {
    background: #ADB1BA;
}
/* 커버·원형 미리보기 + 저장 중 + 직접 등록 원형 확대 해제 (taro.css 641~757) */
/* 2026-10-23 master 홈 상단 커버 미리보기(퍼블 taro/preview02.html — 퍼블 taro.css 에서 복사 + 레이어/드래그 보충) */
.style-cover-preview {
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: var(--layout-max-width);
	height: 100%;
	background: #FFF;
	z-index: 1060;
	overflow: hidden;
}
.style-cover-preview .style-layout-header { position: relative; }
.style-cover-preview .style-layout-header .style-header-title { text-align: center; }
.style-cover-preview .style-header-right .style-header-button { font-size: 15px; font-weight: 600; color: #212124; padding: 0; width: 50px; }
.style-cover-preview .style-header-right .style-header-button:disabled { color: #B0B3BA; }
/* 반투명 영역이 이미지 높이에서 끊기지 않게 — 사진 영역을 헤더 아래 화면 끝까지(사진은 위에 붙임) */
.style-cover-preview .previewImg-wrap { height: calc(100% - var(--layout-header-height)); align-items: flex-start; }
.previewImg-wrap {
	position: relative;
	display: flex;
	overflow: hidden;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}
.previewImg-wrap .preview-square-guide-wrap {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	aspect-ratio: 393 / 152;
	pointer-events: none;
}
.previewImg-wrap .preview-guide {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 3px 10px;
	border-radius: 8px;
	background: rgba(57, 58, 64, 0.70);
	color: #FFF;
	font-size: 12px;
	font-weight: 500;
	line-height: 140%;
	display: flex;
	gap: 8px;
	align-items: center;
	z-index: 10;
	mix-blend-mode: normal;
	white-space: nowrap;
}
.previewImg-wrap .previewImg {
	width: 100%;
	z-index: 0;
	position: relative;
	-webkit-user-drag: none;
	pointer-events: none;
}
.previewImg-wrap .previewImg-square-guide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	aspect-ratio: 393 / 152;
	box-shadow: 0 0 0 9999px rgba(134, 139, 148, 0.6);
	mix-blend-mode: multiply;
	pointer-events: none;
	z-index: 2;
}

/* 2026-10-23 master 홈 원형 프로필 미리보기(퍼블 taro/preview.html — 원형 가이드, 퍼블 taro.css 에서 복사) + 저장 중 로더 */
.previewImg-wrap .preview-guide-wrap {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	aspect-ratio: 1 / 1;
	pointer-events: none;
}
.previewImg-wrap .previewImg-circle-guide {
	position: absolute;
	top: 0;
	left: 50%;
	width: 100%;
	transform: translateX(-50%);
	border-radius: 50%;
	box-shadow: 0 0 0 9999px rgba(134, 139, 148, 0.6);
	mix-blend-mode: multiply;
	pointer-events: none;
	z-index: 2;
	aspect-ratio: 1 / 1;
}
/* 틀보다 큰 사진이 flex 안에서 줄어들지 않게(가로 사진은 좌우로 움직임) */
#self_wrap .previewImg { flex-shrink: 0; }
.style-self-saving {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.6);
	z-index: 1070;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* 직접 등록한 원형 프로필은 이미 얼굴 기준으로 잘린 사진 — 기존 프로필용 확대(scale 1.5) 없이 그대로 */
.style-masterItem-vertical-thumbnail.is-self img,
.style-taro-detail-profile-thumbnail.is-self .style-profile-thumbnail-img,
.style-detail-profile-thumbnail.is-self .style-profile-thumbnail-img,
.style-tarolistItem-profile-thumbnail.is-self .style-tarolistItem-profile-img { transform: none; }

/* 상담 썸네일 설정 레이어 (taro.css 759~797, 공용 scroll-chips/chip-item 줄은 뺌) */
/* ===== 2026-10-23 상담 썸네일 설정(퍼블 taro/thumbnail.html + style.css scroll-chips) — 부재중 → 상담 가능 전환 레이어 ===== */
.style-thumbnail{display:flex;flex-direction:column;gap:26px;padding:16px;}
.style-thumbnail .style-thumbnail-title{color:#2A2A2A;font-size:24px;font-weight:700;line-height:140%;}
.style-thumbnail-article{display:flex;flex-direction:column;gap:10px;}
.style-thumbnail-article .scroll-chips-container{padding:0;}
.style-thumbnail-article .style-thumbnail-article-title{color:#2A2A2A;font-size:17px;font-weight:700;line-height:140%;}
.style-thumbnail-article .style-thumbnail-item{display:flex;width:161px;height:242px;aspect-ratio:161/242;overflow:hidden;border-radius:10px;border:1px solid #F7F8FA;position:relative;}
.style-thumbnail-article .style-thumbnail-item img{width:100%;}
.style-thumbnail-article .style-thumbnail-camera{width:22px;padding:0;background:none;border:none;position:absolute;bottom:10px;right:10px;z-index:2;}
.style-thumbnail-form{display:flex;flex-direction:column;gap:9px;}
.style-thumbnail-form .form-control{border-radius:6px;border:1px solid #D1D3D8;font-size:16px;font-weight:400;line-height:140%;}
.style-thumbnail-form .form-control::placeholder{color:#ADB1BA;}
.style-thumbnail-form .style-thumbnail-form-length{color:#868B94;font-size:13px;font-weight:400;line-height:140%;text-align:right;}
.style-fixed-bottom-content.thumbnail-bottom-content{display:flex;gap:8px;}
.style-fixed-bottom-content.thumbnail-bottom-content button{font-weight:600;}
/* 보충 — w-35/w-65 는 정의된 클래스가 없어 버튼이 글자 폭으로 줄어들던 것 */
.thumbnail-bottom-content .w-35{flex:35 1 0;min-width:0;}
.thumbnail-bottom-content .w-65{flex:65 1 0;min-width:0;}
.thumbnail-bottom-content .style-button-large{background:#990FC4;border:1px solid #990FC4;}
.thumbnail-bottom-content .style-button-gray{background:#F2F3F6;border:1px solid #F2F3F6;}
.thumbnail-bottom-content .style-button-disabled{background:#F2F3F6;border:1px solid #F2F3F6;}
/* 보충(퍼블에 없음) — 레이어 틀(z-index 1040 = 부트스트랩 모달(1050~) 아래 — 레이어 위에 알림창이 떠야 함) / 선택 칩 / 빈 썸네일 / 업로드 중 */
/* 2026-10-26 left:50%+translateX(-50%)는 화면 폭이 홀수면 0.5px 어긋나 뒤 배경이 1px 비침 → 좌우 0 + margin auto 로 가운데 */
.style-thumb-layer{position:fixed;top:0;left:0;right:0;margin:0 auto;width:100%;max-width:var(--layout-max-width);height:100%;background:#FFF;z-index:1040;display:flex;flex-direction:column;overflow:hidden;}
.style-thumb-layer .style-layout-header{position:relative;flex-shrink:0;}
.style-thumb-layer .style-thumb-layer-body{flex:1;overflow-y:auto;}
.style-thumb-layer .style-fixed-bottom{flex-shrink:0;}
.style-thumb-layer .style-fixed-bottom .style-fixed-bottom-content{position:static;transform:none;}
/* 2026-11-02 상담 썸네일 미리보기 — 메인 기획전 모양, PC(720px 이상)에서도 가로 스크롤로(공용 .style-horizontalScroll-mobile 은 PC에서 숨김), 카드 눌러도 이동 안 함 — 타로 taro.css 와 같은 규칙 */
.style-thumb-preview{padding-top:16px;}
.style-thumb-preview .style-horizontalScroll-mobile{display:flex !important;}
.style-thumb-preview .style-masterItem-vertical{pointer-events:none;}
.style-thumbnail .chip-item{cursor:pointer;}
.style-thumbnail .chip-item.active{border-color:#990FC4;color:#990FC4;background:#FAF3FD;font-weight:600;}
.style-thumbnail-article .style-thumbnail-item{cursor:pointer;background:#F7F8FA;}
.style-thumbnail-article .style-thumbnail-item > img{object-fit:cover;height:100%;}
.style-thumbnail-empty{width:100%;display:flex;align-items:center;justify-content:center;text-align:center;color:#ADB1BA;font-size:13px;line-height:140%;}
.style-thumbnail-loading{position:absolute;inset:0;background:rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;z-index:3;}
.style-thumbnail-loading img{width:32px !important;height:auto !important;}
.thumbnail-bottom-content #btn_thumb_ready.style-button-disabled{color:var(--color-gray-600);}
.thumbnail-bottom-content .style-button-tertiary{background:#FFF;border:1px solid #D1D3D8;color:#212124;}

/* 2026-10-26 선생님 상세 가격줄 — 타임세일(할인율 · 할인가 · 정가 취소선 · 타임특가 남은 시간) */
.style-taro-detail-profile-price .style-detail-ts-per {
    font-style: normal;
    color: #D40022;
    font-weight: 700;
	font-size:15px;
    margin-right: 4px;
	margin-top:-3px;
}
.style-taro-detail-profile-price .style-detail-ts-before {
    color: #A0A4AB;
    font-weight: 400;
    margin-left: 2px;
	font-size:11px;
	margin-top:2px;
}
.style-taro-detail-profile-price span.style-detail-ts-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 4px;
    padding: 0 5px;
    border-radius: 4px;
    background: #FFE8EA;
    color: #FF2D2D;
    font-size: 10px;
    font-weight: 500;
	margin-top:-2px;
}
.style-taro-detail-profile-price span.style-detail-ts-badge .ts_timer {
    margin-left: 0;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    font-variant-numeric: tabular-nums;
}

/* 원형 프로필 사진 안내 오프캔버스 (taro.css 915~1000 — .style-button-radius-bk 기본은 운세7 style.css에 있어 뺌) */
.style-taro-profile-offcanvas .style-offcanvas-body {
    padding: 0 20px 20px;
}
.taro-profile-photo-top {
    display: flex;
    padding: 20px 0 14px;
    align-items: center;
}
.taro-profile-photo-top .title {
    color: #000;
    font-size: 20px;
    font-weight: 700;
    line-height: 140%;
}
.taro-profile-photo-top .closebtn {
    margin-left: auto;
    border: none;
    background: none;
    padding: 0;
}
.taro-profile-photo-contWrap {
    padding: 0 0 31px;
}
.taro-profile-photo-cont {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.taro-profile-photo-cont .taro-profile-tit {
    color: #212124;
    font-size: 16px;
    font-weight: 700;
    line-height: 140%;
}
.taro-profile-photo-cont .taro-profile-txt {
    color: #212124;
    font-size: 16px;
    font-weight: 400;
    line-height: 140%;
}
.taro-profile-photo-cont .taro-profile-photo-img {
    display: flex;
    gap: 10px;
}
.taro-profile-photo-cont .taro-profile-photo-img li {
    /*border-radius: 6px;*/
    width: 33.33%;
    overflow: hidden;
}
.taro-profile-photo-cont .taro-profile-photo-img img {
    width: 100%;
}
.taro-profile-line {
    background: #F2F3F6;
    width: 100%;
    height: 1px;
    margin: 22px 0;
}
.taro-profile-photo-li {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.taro-profile-photo-li li {
    position: relative;
    padding-left: 15px;
}
.taro-profile-photo-li li:before {
    position: absolute;
    top: 50%;
    left: 5px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    content: "";
    background: #212124;
    transform: translateY(-50%);
}
.style-taro-profile-offcanvas .style-button-radius-bk {
    background: #393A40;
    border: 1px solid #393A40;
    height: 52px;
    border-radius: 16px;
    font-size: 17px;
    font-weight: 700;
}
/* 2026-10-28 상담 썸네일 칸 — 올린 사진이 없으면 기존 프로필을 메인 세로 카드와 같은 모양(운세7: 배경은 타입별 클래스 style-bg-* 로, 아래 renew 큰 썸네일 배경 규칙에 같이 묶음) */
.style-thumbnail-article .style-thumbnail-item.is-profile{background-position:50% 50%;background-size:cover;background-repeat:no-repeat;}
.style-thumbnail-article .style-thumbnail-item.is-profile > img{object-position:center top;transform-origin:50% 80%;transform:scale(1.30);}


/* 2026-10-29 관리자 홈 상담 썸네일 설정 "?" 툴팁 — 기본 .style-tooltip(style.css 360행, z-index 1000)이 레이어(1040) 뒤로 숨어서 위로 올림 */
.style-thumb-tooltip { --bs-tooltip-zindex: 1045; z-index: 1045; }
.style-thumb-tooltip .tooltip-inner { text-align: left; font-size: 13px; line-height: 150%; }

/* 2026-10-29 관리자 홈 상단 커버 카메라 아이콘 — 흰 아이콘이라 밝은 사진 위에서 안 보여서 살짝 그림자 */
.style-adminDetail-camera img { filter: drop-shadow(0 0 1px rgba(0,0,0,.15)) drop-shadow(0 1px 1px rgba(0,0,0,.10)); } /* 진하기 = 앞 숫자(.45 / .25), 퍼짐 = 2px */


/* 시작: 2026-11-02 상세 1장 전체화면(원형 프로필·상단 커버) — 가로 100% (사진 탭 등 다른 전체화면은 그대로 max 100%) */
.style-swiperFullScreen .style-swiperFullScreen-image.is-one-photo {
	width: 100%;
	height: auto;
	max-width: 100%;
	max-height: none;
}
/* 종료: 2026-11-02 상세 1장 전체화면 */

/* 시작: 2026-11-02 상단 커버(153px)는 세로 사진도 가로 100% cover — 검정 좌우 여백(style.css .is-portrait contain) 해제. 상단 커버에만 적용 */
.style-detail .style-detail-imageArea.style-detail-imageArea-top.is-portrait {
	display: block;
	background: transparent;
}
.style-detail .style-detail-imageArea.style-detail-imageArea-top.is-portrait .style-detail-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* 2026-11-02 선생님 프로필(master/profile) 상단 커버도 상세처럼 가로 100% — 사진 비율과 무관하게 틀을 꽉 채움(높이에 맞춰 좌우가 비던 것) */
.style-detail .style-detail-imageArea.style-detail-imageArea-top {
	display: block;
}
.style-detail .style-detail-imageArea.style-detail-imageArea-top .style-detail-image {
	display: block;
	width: 100% !important;
	max-width: none;
	height: 100%;
	object-fit: cover;
}
/* 종료: 2026-11-02 상단 커버 세로 사진 */
/* ===== 종료: 2026-11-02 선생님 프로필 관리자 + 상세 상단 이식 ===== */

/* ===== 시작: 2026-11-02 선생님 상세 상단 이식 — 타로 style.css 10349~10373 (상단 사진 153px / 프로필 블록 여백 / 팔로우 버튼 / 모바일 헤더 테두리) ===== */
/* 2026-10-22 타로 상세 상단 사진 1장 고정, 높이 153px */
.style-detail .style-detail-imageArea.style-detail-imageArea-top {
	margin-top: calc(0px - var(--layout-header-height)); /* 헤더 아래로 깔기 — 원래 #detailItemSwiper에 있던 값 */
	aspect-ratio: auto;
	height: 153px;
}
/* 2026-10-22 타로 상세 프로필 블록 — 퍼블 taro/admin-detail.html의 .style-taro-detail-* (taro.css) 사용, 여기는 고객 화면 전용 보정만 */
.style-detail .style-detail-article.detail-article-bt0 {
	padding-left: 16px;
}
.style-detail .detail-article-bt0 .style-detail-frequenterButton.style-frequenterAll-button-notReg {
	width: auto;
	height: 31px;
	padding: 0 9px;
	font-size: 13px;
	gap: 3px;
}
/* 2026-10-22 상세 헤더 좌우 1px 테두리(inc_detail_head.php 인라인)는 PC 프레임용 — 모바일 폭에선 오른쪽 끝 흰 줄로 보여서 제거 */
@media all and (max-width: 720px) {
	.style-layout-header .style-header-container.detail-head-frame {
		left: 50% !important;
		border-left: 0 !important;
		border-right: 0 !important;
	}
}
/* ===== 종료: 2026-11-02 선생님 상세 상단 이식 ===== */

/* 시작: 2026-11-02 선생님 상세 — 본인 보기 안내 줄 + 원형 프로필 상태 링(타로 taro.css 이식) */
.style-detail-guide-info {
    display: flex;
    background: #EEF7FF;
    padding: 14px 16px;
    color: #2B549F;
    font-size: 14px;
    font-weight: 500;
    line-height: 130%;
    align-items: center;
    gap: 6px;
}
.style-detail-guide-info .textBtn {
    margin-left: auto;
    color: #2B549F;
    font-size: 13px;
    font-weight: 700;
    line-height: 130%;
}
/* 시작: 2026-10-30 상세 원형 프로필 상태 링 + 라벨(피그마) — counselors/detail.php .style-detail-profile-ring */
.style-taro-detail-profile .style-detail-profile-ring { position: absolute; inset: -6px; pointer-events: none; }
.style-taro-detail-profile .style-detail-profile-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 3px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.style-taro-detail-profile .style-detail-profile-ring.is-calling::before { background: linear-gradient(225deg, #FF00CC 0%, #FF0022 55%, #FFC700 100%); }
.style-taro-detail-profile .style-detail-profile-ring.is-ready::before { background: #00D1B8; }
.style-taro-detail-profile .style-detail-profile-ring.is-close::before { background: #B5B9CF; }
.style-taro-detail-profile .style-detail-profile-ring em {
	position: absolute; left: 50%; bottom: 0px; transform: translateX(-50%); padding: 2px 10px;
	border-radius: 999px; font-style: normal; font-size: 13px; font-weight: 600; line-height: 18px;
	color: #fff; white-space: nowrap;
}
.style-taro-detail-profile .style-detail-profile-ring.is-calling em { background: #FF2D55; }
.style-taro-detail-profile .style-detail-profile-ring.is-ready em { background: #00D1B8; }
.style-taro-detail-profile .style-detail-profile-ring.is-close em { background: #A9ADC6; }
/* 2026-10-30 상담하기 팝업(inc_popup_counsel.php, 사진 78px) — 상세 링 규칙을 같이 쓰고 크기만 작게 */
.offcanvas-infoBox .style-detail-profile-ring { position: absolute; inset: -5px; pointer-events: none; }
.offcanvas-infoBox .style-detail-profile-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 2px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.offcanvas-infoBox .style-detail-profile-ring.is-calling::before { background: linear-gradient(225deg, #FF00CC 0%, #FF0022 55%, #FFC700 100%); }
.offcanvas-infoBox .style-detail-profile-ring.is-ready::before { background: #00D1B8; }
.offcanvas-infoBox .style-detail-profile-ring.is-close::before { background: #B5B9CF; }
.offcanvas-infoBox .style-detail-profile-ring em { position: absolute; left: 50%; bottom: 0px; transform: translateX(-50%); padding: 1px 7px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 600; line-height: 15px; color: #fff; white-space: nowrap; }
.offcanvas-infoBox .style-detail-profile-ring.is-calling em { background: #FF2D55; }
.offcanvas-infoBox .style-detail-profile-ring.is-ready em { background: #00D1B8; }
.offcanvas-infoBox .style-detail-profile-ring.is-close em { background: #A9ADC6; }
/* 2026-10-30 채팅 응답 대기 팝업(inc_popup_chat_wait.php, 사진 107px) — 사진 div가 overflow:hidden이라 바깥 wrap에 링을 둠 */
.style-counsel-waiting .style-counsel-wait-ringWrap { position: relative; width: 107px; height: 107px; }
.style-counsel-waiting .style-detail-profile-ring { position: absolute; inset: -6px; pointer-events: none; z-index: 1; }
.style-counsel-waiting .style-detail-profile-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 3px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.style-counsel-waiting .style-detail-profile-ring.is-calling::before { background: linear-gradient(225deg, #FF00CC 0%, #FF0022 55%, #FFC700 100%); }
.style-counsel-waiting .style-detail-profile-ring.is-ready::before { background: #00D1B8; }
.style-counsel-waiting .style-detail-profile-ring.is-close::before { background: #B5B9CF; }
.style-counsel-waiting .style-detail-profile-ring em { position: absolute; left: 50%; bottom: 0px; transform: translateX(-50%); padding: 2px 10px; border-radius: 999px; font-style: normal; font-size: 13px; font-weight: 600; line-height: 18px; color: #fff; white-space: nowrap; }
.style-counsel-waiting .style-detail-profile-ring.is-calling em { background: #FF2D55; }
.style-counsel-waiting .style-detail-profile-ring.is-ready em { background: #00D1B8; }
.style-counsel-waiting .style-detail-profile-ring.is-close em { background: #A9ADC6; }
/* 2026-10-30 상담하기 팝업 카운터(후기|팔로워) — 리스트 .style-tarolistItem-count 재사용, 위치만 */
.offcanvas-infoBox .style-popup-counsel-count { margin-top: 4px; }
/* 2026-10-30 상담중 물결 — 메인 세로 카드(.style-masterItem-vertical-thumbnail-wrap.is-calling::after)와 같은 방식, 키프레임은 별도 vcRingRippleLarge */
.style-taro-detail-profile .style-detail-profile-ring.is-calling::after,
.offcanvas-infoBox .style-detail-profile-ring.is-calling::after,
.style-counsel-waiting .style-detail-profile-ring::after {
	content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
	padding: 3px;                                                /* 물결 두께 = 링 두께 */
	background: linear-gradient(225deg, #FF00CC 0%, #FF0022 55%, #FFC700 100%);
	animation: vcRingRippleLarge 1.1s ease-out infinite;         /* 1.1s = 한 번 퍼지는 시간, 크기·진하기는 아래 vcRingRippleLarge */
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
@keyframes vcRingRippleLarge {                               /* 큰 원형(상세·팝업)용 — 메인 vcRingRipple(1.4배)은 작은 원형 기준이라 큰 원형엔 너무 크게 퍼짐 */
	0%   { transform: scale(1);    opacity: .6; }            /* 시작 진하기 */
	100% { transform: scale(1.2);  opacity: 0; }             /* 1.2 = 퍼지는 크기 */
}
.offcanvas-infoBox .style-detail-profile-ring.is-calling::after { padding: 2px; }  /* 팝업은 링이 2px */
.style-counsel-waiting .style-detail-profile-ring.is-ready::after { background: #00D1B8; }  /* 응답 대기 팝업 = 상담가능 고정이라 민트 물결 */
.style-taro-detail-profile .style-detail-profile-ring em,
.offcanvas-infoBox .style-detail-profile-ring em,
.style-counsel-waiting .style-detail-profile-ring em { z-index: 1; }  /* 라벨이 물결 위로 */
@media (prefers-reduced-motion: reduce) {
	.style-taro-detail-profile .style-detail-profile-ring::after,
	.offcanvas-infoBox .style-detail-profile-ring::after,
	.style-counsel-waiting .style-detail-profile-ring::after { display: none; }
}
/* 끝: 2026-10-30 상세 원형 프로필 상태 링 */

/* 시작: 2026-10-30 상담 팝업 하단 버튼(피그마) — 세로 2단, 상담가능 = 전화(보라)+채팅(흰 테두리) / 상담중·부재중 = 알림 토글(회색) */
.offcanvas-counsel-buttonBox {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 4px;
}
.offcanvas-counsel-buttonBox .style-button {
	height: 46px;
	font-size: 15px;
	font-weight: 600;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}
.offcanvas-counsel-buttonBox .style-button.is-chat-line {
	border: 1px solid #E1E2E6;
	background-color: var(--color-common-white);
	color: #212124;
}
.offcanvas-counsel-buttonBox .style-button.style-button-tertiary {
	border-color: #F2F3F6;
	background-color: #F2F3F6;
	color: #212124;
}
/* 끝: 2026-10-30 상담 팝업 하단 버튼 */

/* 시작: 2026-10-30 상세 하단 알림 버튼 글자(피그마 — Pretendard 17 / 600 / 130% / #2A2A2A). style_fix.css .style-button-large(18/700)를 덮음 */
.style-detail-cta .btn_detail_alarm_off,
.style-detail-cta .btn_detail_alarm_on {
	font-size: 17px;
	font-weight: 600;
	line-height: 130%;
	letter-spacing: 0;
	color: #2A2A2A;
}
/* 끝: 2026-10-30 상세 하단 알림 버튼 글자 */

/* 끝: 2026-11-02 선생님 상세 이식 */

/* ===== 시작: 2026-11-02 메인 베스트 후기(main/inc/inc_best_review_list.php) — 사용자 캡처 기준, 크기·색 작성자 임의 ===== */
/* 2026-11-02 사용자 "좌우 스와이프, 카드 0.8 + 옆 카드 살짝" — 모바일도 swiper 하나로(가로 스크롤 div 숨김), 카드 폭 80% 왼쪽 정렬(인기 소식과 같음) */
.style-horizontalScroll-mobile.style-mainBestReview-scroll { display: none !important; }
.style-mainBestReview-swiper { display: block; }
.style-horizontalScroll-mobile.style-mainBestReview-scroll { gap: 9px; }
.style-horizontalScroll-mobile.style-mainBestReview-scroll:before,
.style-horizontalScroll-mobile.style-mainBestReview-scroll:after { padding: 0 7px 0 0; }
.style-mainBestReview-slide { flex-shrink: 0; flex-grow: 0; width: 300px; padding-bottom: 20px; white-space: normal; }
.style-mainBestReview-swiper swiper-slide { width: 85%; padding-bottom: 20px; } /* 인기 소식(.style-popularNews-swiper)과 같은 방식 — % 폭 + 왼쪽 정렬, 한 장씩 스냅 */
.style-mainBestReview-card { display: flex; flex-direction: column; height: 100%; padding: 16px 14px 14px; border: 1px solid #E4E6EB; border-radius: 12px; background: #fff; }
.style-mainBestReview-card.is-skeleton { height: 262.59px; border: 0; background: #f2f3f6; animation: verticalSkeletonPulse 1.2s ease-in-out infinite; }
.style-mainBestReview-link { display: block; flex: 1; color: #212124; text-decoration: none; }
.style-mainBestReview-user { display: flex; align-items: center; gap: 10px; }
.style-mainBestReview-userImg { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
.style-mainBestReview-userInfo { display: flex; flex-direction: column; min-width: 0; }
.style-mainBestReview-userInfo strong { font-size: 14px; font-weight: 600; line-height: 20px; color: #212124; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.style-mainBestReview-userInfo span { font-size: 12px; line-height: 16px; color: #8E929A; }
.style-mainBestReview-info { display: flex; gap: 14px; margin-top: 2px; min-height: 20px; font-size: 13px; line-height: 20px; }
.style-mainBestReview-info dl { display: flex; gap: 7px; margin: 0; }
.style-mainBestReview-info dt { font-weight: 400; color: #8E929A; }
.style-mainBestReview-info dd { margin: 0; font-weight: 500; color: #56595f;font-size:13px; }
.style-mainBestReview-content { margin-top: 8px; font-size: 15px; line-height: 23px; color: #212124; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; height: 90px; } /* 2026-11-02 3줄 고정(23px×3) — 짧은 글도 카드 높이 같게 */
.style-mainBestReview-best { display: inline-block; margin-right: 4px; padding: 0 5px; border: 1px solid #FF3B5C; border-radius: 4px; font-size: 11px; font-weight: 700; line-height: 16px; color: #FF3B5C; vertical-align: 2px; }
.style-mainBestReview-master { display: flex; align-items: center; gap: 10px; margin-top: 13px; padding: 0px; border-radius: 8px; background: #F7F8FA; color: #212124; text-decoration: none; }
.style-mainBestReview-masterImg { width: 61px; height: 61px; flex-shrink: 0; overflow: hidden;  border-radius:  8px 0 0 8px;}
.style-mainBestReview-masterImg img { width: 100%; height: 100%; object-fit: cover; }
.style-mainBestReview-masterInfo {
	display: flex; flex-direction: column; gap: 0px; min-width: 0;
	padding-top:3px;
	padding-bottom:4px;
}



.style-mainBestReview-masterInfo strong { font-size: 12.5px; font-weight: 600; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.style-mainBestReview-price { display: flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 500; line-height: 16px; }
.style-mainBestReview-price img { width: 11px; }
.style-mainBestReview-price span { margin-left: 2px; font-weight: 400; color: #8E929A;font-size:11px; }


/* 리스트에서 표시될 선생님 */
.style-mainBestReview-master.in_list { display: flex; align-items: center; gap: 10px; margin-top: 13px; padding: 0px; border-radius: 0px; background: #F7F8FA; color: #212124; text-decoration: none; }
.style-mainBestReview-masterImg.in_list { width: 41px; height: 41px; flex-shrink: 0; overflow: hidden;  border-radius:  0px 0 0 0px;}
.style-mainBestReview-masterImg.in_list img { width: 100%; height: 100%; object-fit: cover; }
.style-mainBestReview-masterInfo.in_list {
	display: flex; flex-direction: column; gap: 0px; min-width: 0;
	padding-top:5px;
	padding-bottom:3px;
}

.style-mainBestReview-masterInfo.in_list strong { font-size: 11px; font-weight: 500; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;color:#444; }

.style-mainBestReview-price.in_list { display: flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 400; line-height: 16px;margin-top:-3px }
.style-mainBestReview-price.in_list img { width: 7px; margin-top:1px; }
.style-mainBestReview-price.in_list span { margin-left: 0px; margin-top:0px;font-weight: 400; color: #8E929A;font-size:8px; }

@media (prefers-reduced-motion: reduce) { .style-mainBestReview-card.is-skeleton { animation: none; } }


.style-mainBestReview-info.in_list { display: flex; gap: 14px; margin-top: 2px; min-height: 20px; font-size: 13px; line-height: 20px; }
.style-mainBestReview-info.in_list dl { display: flex; gap: 3px; margin: 0; }
.style-mainBestReview-info.in_list dt { font-weight: 400; color: #8E929A; }
.style-mainBestReview-info.in_list dd { margin: 0; font-weight: 500; color: #56595f;font-size:13px; }


/* ===== 끝: 2026-11-02 메인 베스트 후기 ===== */

/* 2026-11-03 타로 리스트(inc_taro_list) 이름 옆 타입 뱃지(신점/사주/타로) — 색은 style.css .style-masterName-badge 공용 */
.style-tarolistItem-profile-info { flex-direction: row; align-items: center; gap: 4px; }
.style-tarolistItem-profile-info .style-masterName-badge {
	display: inline-flex; align-items: center; height: 17px;
	padding: 0 4px; border-radius: 2px; font-size: 10px;
	font-weight: 700; line-height: 17px; margin-top: 6px; white-space: nowrap;

}

/* 2026-11-03 타로에서 이식 — 타임세일 카드 사진(타임세일 사진 688:392는 가운데 그대로) + 마우스 오버 어둡게 레이어(효과는 꺼둠 — 타로와 같음) */
.style-timeSaleList-masterImage.is-ts-photo{top:50%;}
.style-timeSaleList-dim{position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(0,0,0,0);transition:background-color .25s ease;}

/* 2026-11-03 타로에서 이식 — /master/time_sale 타임세일 사진 칸(가로), 하단 플로팅 버튼 자리, 미리보기 레이어 */
.style-time-sale .style-thumbnail-article .style-thumbnail-item.is-landscape{width:100%;height:auto;aspect-ratio:72/41;}
.style-time-sale .style-thumbnail-article .style-thumbnail-item.is-landscape .style-thumbnail-camera{bottom:12px;right:12px;}
.style-time-sale{padding-bottom:calc(84px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));}
.thumbnail-bottom-content .style-button-tertiary{background:#FFF;border:1px solid #D1D3D8;color:#212124;}
.style-ts-preview{padding-top:16px;}
.style-ts-preview a,.style-ts-preview button{pointer-events:none;}
/* 올린 사진이 없으면 기존 프로필을 메인 타임세일 카드와 같은 모양으로 — 배경은 마크업의 타입 배경 클래스(style-bg-*) */
.style-thumbnail-article .style-thumbnail-item.is-ts-profile > img{transform:translateY(5%);}
/* 타임세일 사진 미리보기 — 원형 프로필·커버 미리보기와 같은 레이어, 틀만 타임세일 카드 비율(688:392) */
.previewImg-wrap .preview-ts-guide-wrap { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; aspect-ratio: 688 / 392; pointer-events: none; }
.previewImg-wrap .previewImg-ts-guide { position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 688 / 392; box-shadow: 0 0 0 9999px rgba(134, 139, 148, 0.6); mix-blend-mode: multiply; pointer-events: none; z-index: 2; }
#ts_photo_wrap .previewImg { flex-shrink: 0; }

/* 2026-11-03 선생님 상세 하단 버튼(상담하기·상담 가능 알림) — 상담 팝업 버튼(.offcanvas-counsel-buttonBox)과 같은 라운드, 색은 그대로 */
.style-detail-cta .style-button.style-button-large { border-radius: 10px; }

/* 2026-11-03 메인 세로 카드 이름 아래 분야(타로/사주/신점) — 작성자 임의값, 세부 조정은 사용자 */
.style-masterItem-vertical-overlay-nameWrap { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.style-masterItem-vertical-overlay-nameWrap .style-masterItem-vertical-overlay-name { flex: none; }
.style-masterItem-vertical-overlay-type { margin-left: 4px; color: rgba(255,255,255,.85); font-size: 10px; font-weight: 500; line-height: 12px; }

/* ===== 시작: 2026-11-03 후기 본문 3줄 말줄임 + 오른쪽 끝 "… 더보기"(inc_review.php — 실시간 후기·베스트·선생님 상세). 롤백 = 이 블록 삭제 + bak_261103_inc_review.php ===== */
.style-reviewItem .style-reviewItem-content.style-review-clamp {
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.style-reviewItem .style-reviewItem-content.style-review-clamp.is-open { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
.style-review-clamp-more {
	position: absolute; right: 0; bottom: 0;
	padding-left: 28px; background: linear-gradient(90deg, rgba(255,255,255,0) 0, #fff 24px); /* 잘린 글자 위로 덮음 — 작성자 임의값 */
}
.style-review-clamp-dot { margin-right: 4px; color: #212124; }
.style-review-clamp-more .style-button-moreView { font-size: 16px; color: var(--color-gray-600); }
/* ===== 끝: 2026-11-03 후기 본문 3줄 말줄임 ===== */

/* 2026-11-04 선생님 상세 하단 버튼 글자 — 버튼별로 따로 조정(style.css .style-fixed-bottom .style-fixed-bottom-content .style-button-large 18/700이 알림 버튼까지 키우던 것 분리)
   상담하기 = .style-detail-cta-counsel / 상담 가능 알림 받기·알림 받는 중 = .style-detail-cta-alarm */
.style-fixed-bottom .style-fixed-bottom-content .style-detail-cta .style-button-large.style-detail-cta-counsel {
	font-size: 17px;
	font-weight: 700;
}
.style-fixed-bottom .style-fixed-bottom-content .style-detail-cta .style-button-large.style-detail-cta-alarm {
	font-size: 17px;
	font-weight: 600;
	line-height: 130%;
	letter-spacing: 0;
	color: #2A2A2A;
}