@charset "UTF-8";

/* 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;*/
}
.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;
}


.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%;
}


.style-taro-detail-profile {
    display: flex;
    gap: 20px;
    padding-top: 10px;
}
.style-taro-detail-profile-thumbnail-wrap {
    position: relative;
    width: 111px;
    height: 111px;
}
.style-taro-detail-profile-thumbnail {
    width: 111px;
    height: 111px;
    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: 11px;
    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;
}



















/* 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;
}

/* 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: #4377FD;
	margin-left:4px;
	font-weight: 400;
}
/* 퍼블 외 보충: 헤더 타이틀 왼쪽 정렬(퍼블 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;
}

/* 2026-10-23 퍼블 style.css(pub.unse7.com/taro/detail.html)의 상세 회색 버튼 줄 — 선생님 관리자 홈(master/index) 상태/프로필 편집 버튼 */
.style-detail-info-button {
	display: flex;
	gap: 7px;
}
.style-detail-info-button .style-button-38 {
	border-radius: 10px; /* 8 */
	font-size: 14px;
	font-weight: 600;
	height: 33px; /* 38 */
	align-items: center;
	display: flex;
	gap: 4px;
}
.style-detail-info-button .style-button-38 svg {
	margin-top: -1px;
}
.style-detail-info-button .button-bk {
	background: #000;
	border: 1px solid #000;
	color: #fff;
}
.style-detail-info-button .button-gray {
	background: #F3F4F6;
	border: 1px solid #F3F4F6;
	color: #2A2A2A;
}

/* 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; }

/* ===== 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;}
.scroll-chips-container{display:flex;flex-direction:column;gap:7px;width:100%;overflow-x:auto;white-space:nowrap;-ms-overflow-style:none;scrollbar-width:none;padding:0 8px;box-sizing:border-box;}
.scroll-chips-container::-webkit-scrollbar{display:none;}
.scroll-chips-line{display:flex;gap:7px;user-select:none;-webkit-user-select:none;}
.chip-item{width:auto;white-space:nowrap;display:inline-flex;height:40px;align-items:center;justify-content:center;padding:0 15px;border:1px solid #EAEBEE;border-radius:9999px;background-color:#fff;font-size:14px;box-sizing:border-box;color:#2A2A2A;font-weight:400;flex-shrink:0;}
/* 보충(퍼블에 없음) — 레이어 틀(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;}
.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 #btn_thumb_preview.style-button-gray {color:var(--color-gray-900);}
/* 미리보기 — 메인 기획전 모양, PC에서도 가로 스크롤로, 카드 눌러도 이동 안 함 */
.style-thumb-preview{padding-top:16px;}
.style-thumb-preview .style-horizontalScroll-mobile{display:flex !important;}
.style-thumb-preview .style-masterItem-vertical{pointer-events:none;}

/* 2026-10-23 master/profile_menu 프로필 편집 — 행 아래 내용 한 줄 말줄임 */
.style-adminData-profileEdit a > div{min-width:0;flex:1 1 auto;}
.style-adminData-profileEdit a > div p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* 2026-10-26 타임세일 카드 사진 — 타임세일 사진(가로 72:41)은 가운데 그대로, 직접 등록 프로필(정사각형)은 가운데 원형(높이 72% — 위아래 여백) + 같은 사진 강한 블러 배경 */
.style-timeSaleList-masterImage.is-ts-photo{top:50%;}
.style-timeSaleList-blurBg{position:absolute;inset:-160px;background-size:cover;background-position:center;filter:blur(300px) brightness(1.30) saturate(120%);z-index:0;}
.style-timeSaleList-colorBg{position:absolute;inset:0;z-index:0;} /* 2026-10-26 원형 모드 단색 배경(self_photo_color) */
.style-timeSaleList-masterImage.is-ts-self{width:auto;height:76%;aspect-ratio:1/1;top:43%;object-fit:cover;border-radius:50%;z-index:1;}

/* 2026-10-27 타임세일 카드 사진 — 가운데서 반투명 원이 차례로 퍼짐 + 마우스 올리면 배경 살짝 어둡게(스푼 라이브 카드 모티브) */
/* 물결은 사진 아래(같은 z-index 1이지만 마크업이 사진보다 앞이라 뒤에 깔림), 어둡게는 사진 위 별도 레이어 */
.style-timeSaleList-ripple{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.style-timeSaleList-dim{position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(0,0,0,0);transition:background-color .25s ease;}
.style-timeSaleList-ripple span{position:absolute;left:50%;top:43%;height:76%;aspect-ratio:1/1;border-radius:50%;background:rgba(255,255,255,.22);transform:translate(-50%,-50%) scale(1);opacity:0;animation:tsRipple 3s ease-out infinite;}
.style-timeSaleList-ripple span:nth-child(2){animation-delay:1s;}
.style-timeSaleList-ripple span:nth-child(3){animation-delay:2s;}
@keyframes tsRipple{
	0%{transform:translate(-50%,-50%) scale(1);opacity:.9;}
	100%{transform:translate(-50%,-50%) scale(2.2);opacity:0;}
}
/*
@media (hover:hover){
	.style-timeSaleList li a:hover .style-timeSaleList-dim{background:rgba(0,0,0,.15);}
}
@media (prefers-reduced-motion:reduce){
	.style-timeSaleList-ripple span{animation:none;}
}
*/

/* 2026-10-26 PC(720px 이상)는 원형 높이 75% */
@media all and (min-width: 720px) {
    /*.style-timeSaleList-masterImage.is-ts-self{width:auto;height:85%;aspect-ratio:1/1;top:46%;object-fit:cover;border-radius:50%;z-index:1;}*/
	.style-timeSaleList-masterImage.is-ts-self{width:auto;height:130%;aspect-ratio:1/1;top:50%;object-fit:cover;border-radius:50%;z-index:1;}

	.style-timeSaleList-ripple span{position:absolute;left:50%;top:50%;height:130%;aspect-ratio:1/1;border-radius:50%;background:rgba(255,255,255,.22);transform:translate(-50%,-50%) scale(1);opacity:0;animation:tsRipple 3s ease-out infinite;}

	@keyframes tsRipple{
		0%{transform:translate(-50%,-50%) scale(1);opacity:.9;}
		100%{transform:translate(-50%,-50%) scale(1.5);opacity:0;}
	}
}




/* 2026-10-26 /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;}

/* 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;
}

/* 2026-10-26 원형 프로필 사진 안내 오프캔버스(퍼블 taro/profile.html) — 퍼블 taro.css 그대로 + style-button-radius-bk 기본(퍼블 style.css) 보충 */
.style-button-radius-bk {
	border-radius: 16px;
	background: #2A2A2A;
	border: 1px solid #2A2A2A;
	color: #FFF;
	text-align: center;
	font-size: 17px;
	font-weight: 700;
	line-height: 140%;
	height: 52px;
	display: flex;
	align-items: center;
}
.style-button-radius-bk.style-button-disabled {
	background: #F2F3F6;
	border: 1px solid #F2F3F6;
	color: #D1D3D8;
}
.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 관리자 상담 썸네일·타임세일 사진 칸 — 올린 사진이 없으면 기존 프로필을 메인 카드와 같은 모양으로 */
/* 상담 썸네일 = 메인 세로 카드(.style-masterItem-vertical-img-profile + style-bg-tarot-m)와 같은 배경·확대 */
.style-thumbnail-article .style-thumbnail-item.is-profile{background:url(../images/bg_taro12.jpg) 50% 50%/contain no-repeat;}
.style-thumbnail-article .style-thumbnail-item.is-profile > img{object-position:center top;transform-origin:50% 80%;transform:scale(1.30);}
/* 타임세일 = 메인 타임세일 카드 기본(style-bg-tarot + top:55%)과 같게 */
.style-thumbnail-article .style-thumbnail-item.is-ts-profile{background:url(../images/bg_taro10_400.png) 50% 50%/cover no-repeat;}
.style-thumbnail-article .style-thumbnail-item.is-ts-profile > img{transform:translateY(5%);}

/* 2026-10-28 관리자 타임세일 사진 미리보기 — 원형 프로필·커버 미리보기와 같은 레이어, 틀만 타임세일 카드 비율(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-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: 4px; margin: 0 0 9px; overflow: hidden; white-space: nowrap; }
.style-masterItem-vertical-tags span { color: #804cfa; 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; }

/* 틀 회전용 각도 변수 — @property 미지원 기기는 회전 없이 정지된 그라데이션 */
@property --vc-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

@keyframes vcBorderSpin { to { --vc-angle: 360deg; } }
@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:-4px;
}
.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:2px;
}
/* [상담하기] — 상태와 무관하게 항상 같은 모양 */
.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-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);
}
@keyframes vcRingRipple {
    0%   { transform: scale(1);   opacity: .9; }             /* 시작 진하기 */
    100% { transform: scale(1.4); opacity: 0; }              /* 1.5 = 퍼지는 크기(크게 하면 썸네일 왼쪽 끝에서 잘림) */
}
@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: #FF1D00; color: #fff; font-size: 9px; font-weight: 600; line-height: 13px; white-space: nowrap;
}
/* 아래 정보 (타이틀 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: #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: #00A000;letter-spacing: -1px; } /* 표기 색 */
.style-masterItem-vertical-overlay .style-masterItem-vertical-status-label.is-offline { background: #8E929A; } /* 2026-10-28 부재중 표기 색 (한 톤 어둡게, 원래 #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: #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 메인 세로 카드 새 레이아웃 */

/* 시작: 2026-10-28 타로 리스트 배치 변경(inc_taro_list.php, 사용자 캡처 기준 — 값은 작성자 임의) */
/* 태그 2개 (타이틀 아래, 메인 세로 카드와 같은 보라) */
.style-tarolistItem-tags { display: flex; gap: 4px; overflow: hidden; white-space: nowrap; }
.style-tarolistItem-tags span { color: #8B5CF6; 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: #FF1D00; color: #fff; font-size: 9px; font-weight: 600; line-height: 12px; white-space: nowrap;
}
/* 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: #00A000; }   /* 초록(기존 상태 점) */
.style-tarolistItem-profile-thumbnail-wrap.is-offline::before { background: #ADB1BA; } /* 회색(기존 상태 점) */
/* 2026-10-28 리스트 "상담가능"/"부재중" 표기 색 (모양은 위 .style-tarolistItem-status-label) */
.style-tarolistItem-status-label.is-ready { background: #00A000;letter-spacing: -1px; }
.style-tarolistItem-status-label.is-offline { background: #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-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-10-29 관리자 홈 커버 아래 안내 배너 — 운세7 style_fix.css의 .style-unsei-top-banner 복사 + 여백 */
.style-taro-top-banner-wrap{padding:16px 16px 0;}
.style-unsei-top-banner{display:flex;align-items:center;gap:13px;border-radius:10px;background:#F6F6F6;padding:16px;width:100%;justify-content:left;}
.style-unsei-top-banner img{width:39px;height:38px;flex-shrink:0;}
.style-unsei-top-banner .text{display:flex;flex-direction:column;text-align:left;color:#212124;font-size:13px;font-weight:400;line-height:140%;}
.style-unsei-top-banner .text b{color:#212124;font-size:15px;font-weight:600;line-height:140%;}
.style-unsei-top-banner .close{color:#212124;font-size:16px;font-weight:600;line-height:140%;margin-left:auto;flex-shrink:0;}