/* 기본 설정 및 폰트 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&family=Noto+Serif+KR:wght@200..900&display=swap');
.conts_nWrap {
	font-family: 'Noto Sans KR', sans-serif;
}

.fortune-container {
    width: 1100px;
	margin:0 auto;
    background-color: #fff;
    padding: 0px 0px 100px 0px;
    box-sizing: border-box;
}

/* 1. 상단 메뉴 (Header Nav) */
.top-nav {
    height: 35px;
}

.top-nav nav {
    display: flex;
    gap: 10px;
    padding-top: 10px;
    margin-left: -5px;
}

.top-nav a {
    text-decoration: none;
    color: #333;
    font-size: 16px;
    font-weight: 400;
    padding: 10px 10px;
}

.top-nav a.active {
    color: #743232;
    font-weight: 600;
}

/* 배경 100% 설정 */
.full-background {
	width: 100%;
	background-color: #e9eff5; /* 이미지의 연한 블루 배경색 */
	padding: 50px 0;
}

/* 1100px 중앙 정렬 컨테이너 */
.ft-main-container {
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	gap: 40px;
}

.content-section {
	flex: 1;
}

/* 섹션 타이틀 영역 */
.ftsection-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 20px;
}

.ftsection-header h2 {
	font-size: 20px;
	color: #333;
	font-weight: 700;
	margin-bottom: 0px;
}

.view-more {
	font-size: 13px;
	color: #7d93a8;
	cursor: pointer;
}

/* 그리드 및 아이템 스타일 */
.fitem-grid {
	display: flex;
	gap: 12px;
}

.fitem {
	text-align: center;
	flex: 1;
	position: relative;
	width:120px;
	box-sizing:border-box;
}

.fitem .lab_genre{
	position: absolute;
    top: 5px;
    left: 5px;
    z-index: 1;
    display: flex;
    width: 40px;
    height: auto;
    padding: 1px 0px 3px;
    font-size: 12px;
    line-height: 14px;
    color: #ffffff;
    background-color: #ff6565;
    border-radius: 15px;
    justify-content: center;
    align-items: center;
}

.fitem p {
	width:100%;
	margin-top: 10px;
	font-size: 16px;
	color: #333;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 웹툰 썸네일 박스 */
.thumb-box {
  width: 120px;
  height:120px;
  aspect-ratio: 1 / 1;
  border-radius: 15px;
  overflow: hidden;
  background-color: #6b6c7f;
  position:relative;
}

.thumb-box::after {
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid rgba(0, 0, 0, .06);
    content: "";
    border-radius: 15px;
    overflow: hidden;
 }
 
.thumb-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.unse-grid .thumb-box {
	width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 15px;
    overflow: hidden;
    background-color: #fff;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.unse-grid .thumb-box img{
    width: 60px;
    height: auto;
    object-fit: cover;
	z-index:1;
}

/*.unse-grid .fitem:nth-of-type(1) .thumb-box. {background-color:#656792;}
.unse-grid .fitem:nth-of-type(1) .thumb-box img {width: 90px;}

.unse-grid .fitem:nth-of-type(2) .thumb-box {background-color:#d6d0f4;}
.unse-grid .fitem:nth-of-type(2) .thumb-box img {width: 60px;}

.unse-grid .fitem:nth-of-type(3) .thumb-box {background-color:#d1ef9e;}
.unse-grid .fitem:nth-of-type(3) .thumb-box img {width: 64px; margin-top: -5px;}

.unse-grid .fitem:nth-of-type(4) .thumb-box {background-color:#f7f097;}
.unse-grid .fitem:nth-of-type(4) .thumb-box img {width: 52px; margin-top:-5px}

.unse-grid .fitem:nth-of-type(5) .thumb-box {background-color:#656792;}
.unse-grid .fitem:nth-of-type(5) .thumb-box img {width: 78px;}

.unse-grid .fitem:nth-of-type(6) .thumb-box {background-color:#e8bfd0;}
.unse-grid .fitem:nth-of-type(6) .thumb-box img {width: 49px;}
*/


/*하단 더 많은 운세 보기*/
 /*1-정통운세*/
.unse-grid .fitem .thumb-box.A101 {background-color:#cdecd5;}
.unse-grid .fitem .thumb-box.A101 img {width: 72px;}
.unse-grid .fitem .thumb-box.A104 {background-color:#ffcbcb;}
.unse-grid .fitem .thumb-box.A104 img {width: 66px;}
.unse-grid .fitem .thumb-box.A041 {background-color:#b9e4f8;}
.unse-grid .fitem .thumb-box.A041 img {width: 66px;}
.unse-grid .fitem .thumb-box.A042 {background-color:#fdedba;}
.unse-grid .fitem .thumb-box.A042 img {width: 52px;}
 /*2-생활운세*/
.unse-grid .fitem .thumb-box.A103 {background-color:#cbe0ff;}
.unse-grid .fitem .thumb-box.A103 img {width: 78px;}
.unse-grid .fitem .thumb-box.A040 {background-color:#ccecd4;}
.unse-grid .fitem .thumb-box.A040 img {width: 54px;}
.unse-grid .fitem .thumb-box.A106 {background-color:#ffd5e3;}
.unse-grid .fitem .thumb-box.A106 img {width: 68px; margin-top:3px;}
.unse-grid .fitem .thumb-box.B011 {background-color:#ffe4cd;}
.unse-grid .fitem .thumb-box.B011 img {width: 60px;  margin-top:-3px;}
.unse-grid .fitem .thumb-box.B020 {background-color:#dff6c6;}
.unse-grid .fitem .thumb-box.B020 img {width: 50px; margin-left:7px;}
 /*3-오늘의운세*/
.unse-grid .fitem .thumb-box.A027 {background-color:#f8f5d9;}
.unse-grid .fitem .thumb-box.A027 img {width: 48px; margin-top:3px;}
.unse-grid .fitem .thumb-box.A029 {background-color:#dddfff;}
.unse-grid .fitem .thumb-box.A029 img {width: 60px;} 
.unse-grid .fitem .thumb-box.B030 {background-color:#d7f8ef;}
.unse-grid .fitem .thumb-box.B030 img {width: 61px;} 
 /*4-재물운세*/
.unse-grid .fitem .thumb-box.A002 {background-color:#fff3e4;}
.unse-grid .fitem .thumb-box.A002 img {width: 68px;} 
.unse-grid .fitem .thumb-box.A102 {background-color:#e4eaff;}
.unse-grid .fitem .thumb-box.A102 img {width: 62px;} 
 /*5-애정,궁합운세*/
.unse-grid .fitem .thumb-box.A105 {background-color:#f7ffd5;}
.unse-grid .fitem .thumb-box.A105 img {width: 70px;} 
.unse-grid .fitem .thumb-box.A044 {background-color:#fff3dc;}
.unse-grid .fitem .thumb-box.A044 img {width: 66px;}
.unse-grid .fitem .thumb-box.B017 {background-color:#ffe7e9;}
.unse-grid .fitem .thumb-box.B017 img {width: 74px;}
.unse-grid .fitem .thumb-box.A024 {background-color:#d3f6f2;}
.unse-grid .fitem .thumb-box.A024 img {width: 66px;} 
 /*6-타로카드*/
.unse-grid .fitem .thumb-box.A213 {background-color:#d3eefa;}
.unse-grid .fitem .thumb-box.A213 img {width: 46px;} 
.unse-grid .fitem .thumb-box.A214 {background-color:#f5ffe4;}
.unse-grid .fitem .thumb-box.A214 img {width: 64px;}
.unse-grid .fitem .thumb-box.A212 {background-color:#e5e4ff;}
.unse-grid .fitem .thumb-box.A212 img {width: 46px;}
.unse-grid .fitem .thumb-box.A210 {background-color:#fff6e4;}
.unse-grid .fitem .thumb-box.A210 img {width: 68px;} 
 /*7-이름풀이*/
.unse-grid .fitem .thumb-box.A3006 {background-color:#e7fdb3;}
.unse-grid .fitem .thumb-box.A3006 img {width: 48px;}
.unse-grid .fitem .thumb-box.A3005 {background-color:#f8f2c9;}
.unse-grid .fitem .thumb-box.A3005 img {width: 53px;} 
 /*8-기타*/
.unse-grid .fitem .thumb-box.B0042 {background-color:#d8e6f6;}
.unse-grid .fitem .thumb-box.B0042 img {width: 70px;}
.unse-grid .fitem .thumb-box.B002 {background-color:#d8f6e3;}
.unse-grid .fitem .thumb-box.B002 img {width: 60px;} 
.unse-grid .fitem .thumb-box.A300 {background-color:#fee7cf;}
.unse-grid .fitem .thumb-box.A300 img {width: 72px;} 




/*/ ---------------- 운세 INDEX  ----------------- /*/
.fortune-maincontainer {
	position:relative;
    width: 1100px;
	margin:0 auto;
    background-color: #fff;
    padding: 0px 0px 30px 0px;
    box-sizing: border-box;
	font-family: 'Noto Sans KR', sans-serif;
}

.fortune-maincontainer section {
	margin-bottom:70px;
}

.side_floatbnr {
	position: fixed;
    left: 50%;
    margin-left: 560px;
    top: 225px;
}

.unsemain-header {
	margin-top:30px;	
	overflow:hidden;
}

/* 배너 메인 컨테이너 */
.banner-container {
    height: 320px;
    background: linear-gradient(135deg, #e0f2f7 0%, #ffffff 50%, #fdebd0 100%);
    border-radius: 20px; 
    position: relative;
    overflow: hidden;
}

.banner-container a.banner-txwrap {
	display:block;
	width:100%;
	height:100%;
	position:relative;
	z-index:1
}

.banner-container::after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid rgba(0, 0, 0, .1);
    content: "";
    overflow: hidden;
	border-radius: 20px;
}

.my-container {
	background:#e0f2f7 url(//im.mootoon.co.kr/web/images/fortune/unsemain_topimg2.jpg) no-repeat center center;
}

.banner_contwrap {
	padding:66px 100px;
	display: flex;
    justify-content: space-between;
    align-items: center; 
	position: relative;
    z-index: 1;
}


/* 왼쪽 섹션 */
.content-left {
    flex: 1;
	padding-right: 50px;
}

.content-left  .id-today{
	margin-top: 10px;
	margin-right: 10px;
}

.content-left .id-info {
    font-size: 18px;
    font-weight: 800;
    color: #3e6967;
    line-height: 1.2;
    margin-right: 15px;
	margin-bottom: 5px;
}

.content-left .id-info .txt-id {
	font-size: 25px;
	color: #222;
	letter-spacing:-0.3px;
	font-weight: 700;
	font-family:'Noto Serif KR';
}

.lucky-score-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.lucky-score-header .title {
    font-size: 24px;
    font-weight: 800;
    color: #44607a;
    line-height: 1.2;
    margin-right: 15px;
}

.lucky-score-header .score {
    font-size: 72px;
    font-weight: 900;
    color: #4a6a7c;
    line-height: 0.8;
}

.lucky-score-header .unit {
    font-size: 24px;
    font-weight: 700;
    color: #4a6a7c;
	position: relative;
    top: 13px;
}

.totay-description {
    font-size: 16px;
    color: #555;
    line-height: 150%;
    margin-bottom: 10px;
	font-family: "Noto Serif KR", serif;
	font-weight:500;
}

a.detail-btn {
    display: flex;
    width: 96px;
    height: 25px;
    background-color: #5c8f9a;
    color: #fbfad8;
    border-radius: 20px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.3s;
    position: relative;
    z-index: 1;
    align-items: center;
    justify-content: center;
}

a.detail-btn:hover {
    background-color: #55668a;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    flex: 1;
}

.card-box {
	width:170px;
    background-color: rgba(95, 109, 150, 0.8);
    border-radius: 3px 15px 3px 15px;
    padding: 20px;
    display: flex;
    align-items: center;
    color: white;
    justify-content: flex-start;
    gap: 6px;
}

.card-box:nth-child(2), .card-box:nth-child(3){
    background-color: rgba(103, 120, 143, 0.8);
    border-radius: 15px 3px 15px 3px;
}

.card-box .icon {
    display: flex;
    font-size: 24px;
	width:54px;
    opacity: 0.8;
    align-items: center;
    justify-content: center;
}

.card-box:nth-child(1) .icon img {
   width:40px;
}

.card-box:nth-child(2) .icon img {
   width:35px;
}

.card-box:nth-child(3) .icon img {
   width:35px;
}

.card-box:nth-child(4) .icon img {
   width:34px;
}

.card-box .label {
    font-size: 14px;
    font-weight: 700;    
    margin-bottom: 4px;
}

.card-box .value {
    font-size: 17px;
    font-weight: 500;
	color: #fffab3; 
}

.card-box .num-value {
	font-size: 18px;
}

/* 퀵 메뉴 전체 컨테이너 */
.quickmenu-container {
	background-color: #efeff3;
    padding: 40px 70px;
    border-radius: 15px;
    display: flex;
    gap: 20px;
    flex-direction: row;
    justify-content: space-evenly;
	margin-top: -40px;
}

/* 개별 메뉴 아이템 */
.unsemenu-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	color: #333;
	transition: transform 0.2s ease;
}

.unsemenu-item:hover {
	transform: translateY(-5px); /* 마우스 호버 시 살짝 위로 */
}

/* 아이콘 원형 배경 */
.menu-icon {
	width: 100px;
	height: 100px;
	background-color: white;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 10px;
	border: 1px solid #e1e1e1;
}

/* 이미지 크기 조절 */
.menu-icon img {
	width: 45px;
	height: auto;
	object-fit: contain;
}

/* 퀵 메뉴 영역 아이콘 크기 */
.quickmenu-container .unsemenu-item:nth-of-type(1) .menu-icon img {width: 64px;}
.quickmenu-container .unsemenu-item:nth-of-type(2) .menu-icon img {width: 62px;}
.quickmenu-container .unsemenu-item:nth-of-type(3) .menu-icon img {width: 4-4px; margin-bottom: -2px;}
.quickmenu-container .unsemenu-item:nth-of-type(4) .menu-icon img {width: 54px; margin-left: 7px;}
.quickmenu-container .unsemenu-item:nth-of-type(5) .menu-icon img {width: 58px; margin-left: 2px;}
.quickmenu-container .unsemenu-item:nth-of-type(6) .menu-icon img {width: 40px;}
.quickmenu-container .unsemenu-item:nth-of-type(7) .menu-icon img {width: 40px;}
.quickmenu-container .unsemenu-item:nth-of-type(8) .menu-icon img {width: 60px;}


/* 텍스트 스타일 */
.menu-label {
	font-size: 16px;
	font-weight: 500;
	white-space: nowrap;
	color:#333;
}

/* 헤더 영역 */
.section-header {
  margin-bottom: 20px;
}

.section-header h2 {
	font-size: 26px;
	font-weight: 700;
	color: #333;
	margin-bottom: 3px;
	letter-spacing: -1px;
}

.section-header .highlight {
  color: #7f453e;
}

.section-header p {
  font-size: 15px;
  color: #888;
}

.slider-container .slider-wrap {
	display: flex;
	gap: 15px;
	width: fit-content;
	height: 200px;
	width:1100px;
}

/* 기본 슬라이드 스타일 (비활성화 상태) */
.slide {
	position: relative;
	width: 180px; /* 좁아진 너비 */
	height: 100%;
	background-color: #efeff3;
	border-radius: 20px;
	overflow: hidden;
	transition: all 0.5s ease-in-out; /* 부드러운 전환 효과 */
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: 20px;
	box-sizing: border-box;    
}

/* 활성화 상태 (확장된 모습) */
.slide.active {
	width: 530px; /* 확장된 너비 */
	align-items: flex-start;
	padding: 40px;
	background-color: #f9f5ed;	
}

.slide.active::after {
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;    
	box-shadow:0px 0px 30px rgba(0,0,0,0.2);
	border: 1px solid rgba(0, 0, 0, .05);
    content: "";
    border-radius: 20px;
    overflow: hidden;
}

/* 아이콘/이미지 박스
.icon-box {
	width: 100px;
	height: 100px;
	background: #ffffff;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 40px;
	margin-bottom: 15px;
} */

/* 활성화 시 아이콘 위치 이동 */
.slide.active .menu-icon {
	display:none;
}

.slide .bg-box {
    opacity: 0;
    visibility: hidden; /* 클릭 방지 등을 위해 완전히 숨김 */
    transition: opacity 0.5s ease-in-out, visibility 0.5s, transform 0.5s ease-out; /* 0.5초 동안 서서히 변화 */
    position: absolute;
    top: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.05); 
	transform: translateX(30px);
    z-index: -1; 	
}

/* 활성화 시 아이콘 위치 이동 */
.slide.active .bg-box {
    width: 240px;
    height: 100%;
	opacity: 1;
    visibility: visible;	
	transform: translateX(0);
	z-index: 1; 
}


.slide:nth-child(1).active .bg-box {
	background: url(//im.mootoon.co.kr/web/images/fortune/icon_mn11_bg.png) no-repeat right bottom / auto 100%;
}

.slide:nth-child(2).active .bg-box {
	background: url(//im.mootoon.co.kr/web/images/fortune/icon_mn12_bg.png) no-repeat right bottom / auto 100%;
}

.slide:nth-child(3).active .bg-box {
	background: url(//im.mootoon.co.kr/web/images/fortune/icon_mn13_bg.png) no-repeat right bottom / auto 100%;
}

.slide:nth-child(4).active .bg-box {
	background: url(//im.mootoon.co.kr/web/images/fortune/icon_mn14_bg.png) no-repeat right bottom / auto 100%;
}

/* 상세 정보 (활성화 시에만 노출) */
.info {
	opacity: 0;
	visibility: hidden;
	height:0px;
	overflow:hidden;
	transition: opacity 0.3s ease;
	white-space: nowrap; /* 텍스트 줄바꿈 방지 */
}

.slide.active .info {
	display: flex;
    height: 100%;
    opacity: 1;
    visibility: visible;
    flex-direction: column;
    justify-content: space-between;
}

.title {
	font-size: 22px;
	font-weight: bold;
	color: #333;
	margin-top: -5px;
}

.desc {
	font-size: 15px;
	color: #666;
	line-height: 1.5;
}

a.btn-unse-detail {
	display: inline-block;
    width: fit-content;
    background-color: #5d4e44;
    color: #ffe6cd;
    padding: 3px 18px 4px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

/* 비활성화 시 노출되는 간단한 타이틀 */
.simple-title {
	height: 40px;
	font-size:16px;
	font-weight: bold;
	text-align: center;
	color: #333;
	line-height: 1.2;
	transition: opacity 0.3s;
}

.slide.active .simple-title {
	display: none; /* 활성화 시 숨김 */
}

.simple-title small {
	display: block;
	font-weight: normal;
	font-size: 13px;
	color: #888;
	margin-top: 5px;
}

/* 슬라이드 영역 아이콘 크기 */
.slider-container .slide:nth-of-type(1) .menu-icon img {width: 58px;}
.slider-container .slide:nth-of-type(2) .menu-icon img {width: 55px; margin-bottom: 3px;}
.slider-container .slide:nth-of-type(3) .menu-icon img {width: 58px; margin-bottom: 6px;}
.slider-container .slide:nth-of-type(4) .menu-icon img {width: 45px; margin-left: 3px;}

/*띠 배너 영역*/
.barbnr-area{
	border-radius:20px;
	overflow:hidden;
}

.barbnr-area a{
	display: flex;
}

.barbnr-area img{
	width:100%;
}	



/* 카드 레이아웃 */
.card-wrapper {
  display: flex;
  gap: 15px;
  flex-wrap: wrap; /* 모바일 대응 */
}

.fortune-card {
  flex: 1;
  min-width: 280px;
  background-color: #efeff3; 
  border-radius: 20px;
  padding: 20px 30px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: transform 0.2s ease;
  cursor: pointer;
}

.fortune-card:hover {
  transform: translateY(-5px);
  background-color: #e8e9ee;
}

.fortune-card .menu-icon{
	margin-bottom:0px;
}

/* 이미지 크기 조절 */
.fortune-card .menu-icon img {
	width: 56px;
	height: auto;
}

/* 오늘의 운세 영역 아이콘 크기 */
.section-today .card-wrapper .fortune-card:nth-of-type(1) .menu-icon img {width: 46px;}
.section-today .card-wrapper .fortune-card:nth-of-type(2) .menu-icon img {width: 42px;}
.section-today .card-wrapper .fortune-card:nth-of-type(3) .menu-icon img {width: 42px;}
.section-today .card-wrapper .fortune-card:nth-of-type(3) .menu-icon img.yicon-26 {width: 42px;}
.section-today .card-wrapper .fortune-card:nth-of-type(3) .menu-icon img.yicon-27 {width: 60px;}
.section-today .card-wrapper .fortune-card:nth-of-type(3) .menu-icon img.yicon-28 {width: 65px;}
.section-today .card-wrapper .fortune-card:nth-of-type(3) .menu-icon img.yicon-29 {width: 47px; margin-top: -8px;}
.section-today .card-wrapper .fortune-card:nth-of-type(3) .menu-icon img.yicon-30 {width: 55px;}
.section-today .card-wrapper .fortune-card:nth-of-type(3) .menu-icon img.yicon-31 {width: 51px; margin-top:3px;}
.section-today .card-wrapper .fortune-card:nth-of-type(3) .menu-icon img.yicon-32 {width: 58px;}
.section-today .card-wrapper .fortune-card:nth-of-type(3) .menu-icon img.yicon-33 {width: 55px;}
.section-today .card-wrapper .fortune-card:nth-of-type(3) .menu-icon img.yicon-34 {width: 52px;}
.section-today .card-wrapper .fortune-card:nth-of-type(3) .menu-icon img.yicon-35 {width: 45px;}
.section-today .card-wrapper .fortune-card:nth-of-type(3) .menu-icon img.yicon-36 {width: 54px;}
.section-today .card-wrapper .fortune-card:nth-of-type(3) .menu-icon img.yicon-37 {width: 50px;}

/* 재물·로또 운세 영역 아이콘 크기 */
.section-rich .card-wrapper .fortune-card:nth-of-type(1) .menu-icon img {width: 54px; margin-left: 7px;}
.section-rich .card-wrapper .fortune-card:nth-of-type(2) .menu-icon img {width: 52px; margin-bottom:3px;}
.section-rich .card-wrapper .fortune-card:nth-of-type(3) .menu-icon img {width: 54px; margin-bottom:10px;}

/* 랑·궁합 운세 영역 아이콘 크기 */
.section-love .card-wrapper .fortune-card:nth-of-type(1) .menu-icon img {width: 70px;}
.section-love .card-wrapper .fortune-card:nth-of-type(2) .menu-icon img {width: 62px;}
.section-love .card-wrapper .fortune-card:nth-of-type(3) .menu-icon img {width: 56px;}

/* 텍스트 스타일 */
.text-group {
	width:180px;
}
.text-group h3 {
  font-size: 18px;
  font-weight: 600;
  color: #222;
  margin-bottom: 5px;
}

.text-group p {
  font-size: 14px;
  color: #777;
}


/* 서브 메인 제목 섹션 */
.main-header {
    background-color: #f8f4ea; /* 제목 섹션 배경색 */
	height: 170px;
    margin: 30px 0 15px;
    border-radius: 20px;
    position: relative;
	overflow:hidden;
}

.main-header .lab-paid {
	display:none;
	position: absolute;
    top: 8px;
    left: 10px;
    width: 40px;
    height: 20px;
    font-size: 12px;
    background: #e22e2e;
    color: #fff;
    text-align: center;
    border-radius: 21px;
}

.main-header::after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid rgba(0, 0, 0, .06);
    content: "";
    border-radius: 20px;
    overflow: hidden;
}

/*
.main-header.unse-ty-a1 {
	background:#f8f4ea url(//im.mootoon.co.kr/web/images/fortune/unse_pgtop1_1.jpg) no-repeat right 0px center/13%
}
.main-header.unse-ty-a2 {
	background:#f8f4ea url(//im.mootoon.co.kr/web/images/fortune/subtop_unse_tya2.png) no-repeat right 0px center/13%
}
.main-header.unse-ty-a3 {
	background:#f8f4ea url(//im.mootoon.co.kr/web/images/fortune/subtop_unse_tya3.png) no-repeat right 0px center/13%
}
.main-header.unse-ty-a4 {
	background:#f8f4ea url(//im.mootoon.co.kr/web/images/fortune/subtop_unse_tya4.png) no-repeat right 0px center/13%
}
.main-header.unse-ty-a5 {
	background:#f8f4ea url(//im.mootoon.co.kr/web/images/fortune/subtop_unse_tya5.png) no-repeat right 0px center/13%
}
.main-header.unse-ty-a6 {
	background:#f8f4ea url(//im.mootoon.co.kr/web/images/fortune/subtop_unse_tya6.png) no-repeat right 0px center/13%
}
.main-header.unse-ty-a7 {
	background:#f8f4ea url(//im.mootoon.co.kr/web/images/fortune/subtop_unse_tya7.png) no-repeat right 0px center/13%
}


.title-2026 {
    font-size: 32px;
    font-weight: 600;
    color: #444;
    letter-spacing: -2px;
    margin: 0 0 3px 0;
}

.year-highlight {
	color: #7f453e;
}

.this-year {
	font-size:1.05em;
}

.description {
    color: rgba(0,0,0,0.65);
    font-size: 15px;
    font-weight: 400;
    margin: 0;
}

.fortune-deco {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 100px;
    height: 100px; 
}
 */
 
 .noti_event {
	position:absolute;
	top: 13px;
    left: -9px;
	background-color: #615add;
	color: #fbd3b6; 
	padding: 8px 25px;
	font-weight: bold;
	font-size: 15px;
	border-radius: 15px 0px 15px 0px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
}

.noti_event::before {
	content: "";
	position: absolute;
	left: 1px;
	bottom: -7px;
	width: 0;
	height: 0;
	border-top: 7px solid #2c3e50; /* 더 어두운 색으로 입체감 */
	border-left: 7px solid transparent;
}

.noti_tit {
	color:#fff;
	margin-right:5px;
}

.noti_detail {
	color:#fbddcb;
}
 
/* 사주 정보 입력 섹션 */
.fortune-section {
	position:relative;
	padding: 65px 80px 80px;
	border-radius: 20px;
	border: 1px solid #e0e0e0;
	margin-bottom: 30px;
}

.fortune-section:last-child {
	margin-bottom: 0px;
}

.input-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 45px;
	padding-bottom: 30px;
	border-bottom: 1px solid #e0e0e0;
	position: relative;
}

.input-header h2 {
	font-size: 24px;
	font-weight: 600;
	color: #111;
	margin: 0;
}

.input-header p {
	color: #888;
	font-weight: 500;
	font-size: 14px;
	margin: 0;
}

.couple-saju-info {
	margin-top: 20px;
}

.input-header p.saju-info{
	font-size: 16px;
	font-weight: 400;
	color: #666;
	margin-top: 5px;
}

.input-header .saju-name{
	color: #333;
	margin-right:10px;
	font-weight:500;
}

.input-header .saju-data{
	font-size: 14px;
	color: #666;
}

.info-reset-btn {
	background-color: #fff;
	color: #888;
	border: 1px solid #ccc;
	padding: 6px 15px;
	border-radius: 2px;
	cursor: pointer;
	font-size: 14px;
}

.pet-section-wrap {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
	flex: 1; /* 남은 공간 모두 차지 */
	margin-top: 100px;
}

.pet-vis-header {
	text-align:center;
	width: 300px;
}

.pet-vis-header .pet-keyword span {
	display: inline-block;
    padding: 3px 15px;
    font-size: 13px;
    background-color: #f3efeb;
    color: #222;
    margin-bottom: 10px;
    border-radius: 10px;
}

/* 이미지 스타일 */
.pet-img {
    width: 170px;
    height: auto;
    object-fit: cover;
}

.name-detail-btn{
	background-color: #896c68;
    color: #ffffff;
    padding: 5px 23px 5px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 13px;
    margin-bottom: -8px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");    
    background-repeat: no-repeat;
    background-position: right 7px center;
    background-size: 18px;
	transition: background-position 0.05s ease, background-color 0.05s;
}

.name-detail-btn:hover {
    background-color:#d16252;
    background-position: right 4px center; 
	font-weight:700;
}

.input-form-wrap {
	display: flex;
    gap: 60px;
    flex-direction: column;
}

/*입력 폼 스타일 */
.input-form {
	width:100%;
}

.input-sstit {
	font-size:20px;
	margin-bottom: 20px;
	color:#7f453e;
}

.form-row {
	display: flex;
	align-items: center;
	margin-bottom: 25px;
}

.form-row label {
	width: 100px;
	font-weight: 500;
	color: #333;
	font-size: 16px;
}

/* 드롭다운 그룹 스타일 */
.select-group {
	display: flex;
	gap: 10px;
	flex-grow: 1;
}

.select-group.single-group {
	max-width:555px; 
}

.custom-select {
	width: 100%;
	padding: 19px 20px;
	border: 1px solid #dbd4ce;
	border-radius: 8px;
	appearance: none; 
	background-color: #fff;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 20px;
	font-size: 15px;
	cursor: pointer;
	color: #666;
}

.custom-select::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 15px;
	width: 8px;
	height: 8px;
	transform: translateY(-50%) rotate(45deg);
	pointer-events: none; /* 드롭다운 클릭을 방해하지 않도록 설정 */
	
	/* 꺾인 화살표 모양 생성 (border 사용) */
	border: solid #222;
	border-width: 0 2px 2px 0;
	
	/* 기존 화살표 크기에 맞게 조절 (선택 사항) */
	box-sizing: border-box; 
}

/* custom-select에 포커스 스타일 추가 */
.custom-select:focus {
	outline: none; 
	border-color: #ddd; 
	box-shadow: 0 0 0 2px #ffffff; 
}

/* 3-2. 라디오 버튼 선택 그룹 공통 스타일 */
.radio-selection-group {
	display: flex;
	flex-grow: 1;
	gap: 10px;
}

/* 라디오 버튼 숨기기 */
.radio-selection-group input[type="radio"] {
	display: none;
}


/* 라벨 (버튼) 공통 스타일 */
.radio-selection-group label {	
	text-align: center;
	width: auto;
	padding: 16px 0;
	font-weight: 500;
	color: #666;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
	font-size: 16px;
	border: 1px solid #dbd4ce; 
	border-radius: 8px; 	
	/* form-row label과의 충돌을 피하기 위해 width 재정의 */
	width: 270px; 
}

/* 체크 시 스타일 */
.radio-selection-group input:checked + label {
	background-color: #806b6b; 
	color: #fff; 
	font-weight: 600;
	border-color: #806b6b;
}


.input-wrapper {
	position: relative;
	flex-grow: 1;
	display: flex;
	align-items: center;
}

/* 실제 검색 Input 태그 스타일 */
.styled-input {
	width: 100%;
    height: 65px;
    padding: 0 45px 0 20px;
    font-size: 16px;
    color: #333;
    background-color: #fff;
    border: 1px solid #dbd4ce;
    border-radius: 8px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

/* placeholder(안내 문구) 색상 */
.styled-input::placeholder {
	color: #333;
}

/* 입력창 클릭(포커스) 시 테두리 색상 약간 진하게 */
.styled-input:focus {
	border-color: #bbb;
}

.search-icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  background-color: #333; 
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");  
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* 호버 시 색상 변경 예시 */
.search-icon:hover {
  background-color: #007bff;
}

/* --- 1. 상단 탭 스타일 --- */
.tab-header {
	display: flex; 
	width: 100%; 
	margin-bottom: 40px; 
	gap: 10px; 
}

.tab-btn {
	flex: 1; padding: 18px 0; font-size: 18px; font-weight: 500;
	border: none; border-radius: 6px; cursor: pointer;
	background-color: #e5e5e5; color: #333;
	transition: background-color 0.2s, color 0.2s;
}
.tab-btn.active { background-color: #806b6b; color: #fff; }

/* 탭 콘텐츠 제어 */
.tab-content { display: none;  width: 98%;
    margin: 0 auto;}
.tab-content.active { display: block; }

/* --- 2. 검색창 스타일 --- */
.search-wrapper { position: relative; margin-bottom: 30px; }
.search-input { width: 100%; height: 60px; padding: 0 50px 0 20px; font-size: 16px; border: 1px solid #ccc; border-radius: 6px; outline: none; }
.search-input::placeholder { color: #999; }
.search-icon { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; color: #666; pointer-events: none; }

/* --- 3. 결과 메시지 --- */
.result-message { text-align: center; font-size: 20px; color: #555; margin: 30px 0px; }
.result-message strong { color: #8D6161; font-weight: 600; }

/* --- 아코디언 스타일 --- */
.accordion-list { border-top: 1px solid #e3e3e3; }
details.accordion-item { border-bottom: 1px solid #e3e3e3; }

summary.accordion-header {
	display: flex; justify-content: space-between; align-items: center;
	padding: 20px 10px; cursor: pointer; font-size: 16px; color: #333;
	list-style: none; outline: none;
}
summary.accordion-header::-webkit-details-marker { display: none; }

/* [핵심 수정] SVG 대신 CSS로 화살표 만들기 */
summary.accordion-header::after {
	content: '';
	width: 8px;
	height: 8px;
	border-right: 1px solid #666;
    border-bottom: 1px solid #666;
	transform: rotate(45deg); 
	transition: transform 0.1s ease;
}

/* 열렸을 때 화살표 회전 */
details[open] summary.accordion-header::after {
	transform: rotate(225deg); 
	border-right: 1px solid #000;
    border-bottom: 1px solid #000;
}

/* 내용 스타일 (바운스 애니메이션 제거됨) */
.accordion-content {
	max-height: 0; opacity: 0; overflow: hidden; padding: 0 20px;
	background-color: #F9F9F9; color: #555; font-size: 15px; line-height: 1.6;
	transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
}

/* 열렸을 때 스타일 */
details[open] .accordion-content {
	max-height: 500px;
	opacity: 1;
	padding: 30px 20px;
}

/*성씨 입력 레이아웃 (비율 설정 핵심) */
.surname-group {
	display: flex;
	gap: 10px; 
	flex-grow: 1; 
}

/* [비율 설정 40:40:20 -> 2:2:1] */

/* 한글 입력창 (40%)
.surname-group #inputKorean {
	flex: 2; 
} */

/* 한자 입력창 (40%) 
.surname-group #inputHanja {
	flex: 2;
}*/

/* 조회 버튼 (20%) */
.surname-group .btn-hanja-search {
	flex: 1;
}

/* 공통 인풋 스타일 */
.custom-input {
	padding: 19px 20px;
	border: 1px solid #dbd4ce;
	border-radius: 8px;
	background-color: #fff;
	font-size: 15px;
	color: #666;
	outline: none;
	width: 272px;
	min-width: 0;
	/*flex: 2;*/
	box-sizing:border-box;
}

.custom-input:focus {
	border-color: #ddd;
	box-shadow: 0 0 0 2px #ffffff;
}

.custom-input:read-only {
	background-color: #f5f5f5;
	cursor: default;
	color: #333;
}

/* 버튼 스타일 */
.btn-hanja-search {
	background-color: #806b6b;
	color: #fff;
	border: 1px solid #806b6b;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.2s;	
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0; 
	white-space: nowrap; 
}

.btn-hanja-search:hover {
	background-color: #6d5a5a;
	border-color: #6d5a5a;
}

/* 모바일 대응: 화면이 좁아지면 세로로 배치 (선택사항) */
@media (max-width: 600px) {
	.surname-group {
		flex-direction: column;
	}
	
	/*
	.surname-group #inputKorean,
	.surname-group #inputHanja,
	*/
	.surname-group .btn-hanja-search {
		flex: none;
		width: 100%;
		padding: 15px; 
	}
}

/* 4. 유의사항 섹션 */
.notes-section {
	margin-top: 50px;
	padding-top: 30px;
	border-top: 1px solid #ddd; 
}

.notes-section h3 {
	font-size: 16px;
	font-weight: 600;
	color: #333;
	margin: 0 0 15px 0;
}


.notes-section ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.notes-section li {
	font-size: 14px;
	color: #888;
	line-height: 1.8;
	padding-left:7px;
	margin-bottom: 10px;
}

.notes-section li::before {
	content: "•";
	color: #f29080; 
	font-weight: 900;
	display: inline-block;
	width: 0.7em;
	margin-left: -0.7em;
}

.rnr-section {
	background-color: #f4f4f4;
    padding: 25px 35px;
    border-radius: 20px;
    margin-top: -15px;
}

.rnr-mssg {
	font-size: 12px;
    margin-bottom: 10px;
}

.rnr-section li {
	line-height:160%;
}

/* 5. 운세 확인 버튼 */
.ft-btn-wrap {
	width: 100%;
    display: flex;
    margin-top: 30px;
    justify-content: center;
    gap: 20px;
}

.fortune-btn {
	display: block;
	min-width: 270px;
    padding: 18px 40px;
	background-color: #fff; 
	color: #333;
	border: 1px solid #ddd;
	border-radius: 50px;
	font-size: 22px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s;
}

.fortune-btn:hover {
	color:#111;
	border-color:#806b6b;
}

.check-fortune-btn {
	background-color: #806b6b; 
	color: #fff;
}

.check-fortune-btn .txt-time {
	font-size:16px;
	color: #ff8787;
}

.check-fortune-btn:hover {
	background-color: #574538;
	color:#ffe6cd;
}

/* 타로운세 (PC: 6열) */
.grid-container {
	display: grid;
	grid-template-columns: repeat(6, 1fr); 
	gap: 20px;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto 70px;
}

@keyframes fade-in {
	0% {
		opacity: 0;
		transform: translate(20px, 20px) scale(0.9); 
	}
	100% {
		opacity: 1;
		transform: translate(0, 0) scale(1);
	}
}

.card-wrap {
	opacity: 0; 
	animation: fade-in 0.2s ease-out forwards;
}

.card-wrap:nth-child(1) { animation-delay: 0.03s; }
.card-wrap:nth-child(2) { animation-delay: 0.06s; }
.card-wrap:nth-child(3) { animation-delay: 0.09s; }
.card-wrap:nth-child(4) { animation-delay: 0.12s; }
.card-wrap:nth-child(5) { animation-delay: 0.15s; }
.card-wrap:nth-child(6) { animation-delay: 0.18s; }
.card-wrap:nth-child(7) { animation-delay: 0.21s; }
.card-wrap:nth-child(8) { animation-delay: 0.24s; }
.card-wrap:nth-child(9) { animation-delay: 0.27s; }
.card-wrap:nth-child(10) { animation-delay: 0.30s; }
.card-wrap:nth-child(11) { animation-delay: 0.33s; }
.card-wrap:nth-child(12) { animation-delay: 0.36s; }
.card-wrap:nth-child(13) { animation-delay: 0.39s; }
.card-wrap:nth-child(14) { animation-delay: 0.42s; }
.card-wrap:nth-child(15) { animation-delay: 0.45s; }
.card-wrap:nth-child(16) { animation-delay: 0.48s; }
.card-wrap:nth-child(17) { animation-delay: 0.51s; }
.card-wrap:nth-child(18) { animation-delay: 0.54s; }
.card-wrap:nth-child(19) { animation-delay: 0.57s; }
.card-wrap:nth-child(20) { animation-delay: 0.60s; }
.card-wrap:nth-child(21) { animation-delay: 0.63s; }
.card-wrap:nth-child(22) { animation-delay: 0.66s; }

.card { 
	aspect-ratio: 300 / 519;
	perspective: 1000px;
	position: relative; 
	border-radius: 8px;
	cursor: pointer; 
	display: block;
}

.flipper {
	width: 100%;
	height: 100%;
	position: relative; 
	transform-style: preserve-3d;
	transition: transform 0.6s;
	transform: rotateY(180deg); 
}

.front, .back {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0; 
	left: 0; 
	backface-visibility: hidden; 
	border-radius: 8px;
}

.back {
	transform: rotateY(180deg);
}

.card-wrap input[type="checkbox"]:checked + .card .flipper {
	transform: rotateY(0deg);
}

.card img {
	width: 100%;
	height: 100%; 
	border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	object-fit: cover;
}

@media (max-width: 768px) {
	.grid-container {
		grid-template-columns: repeat(3, 1fr);
		gap: 15px;
	}
}

/* --- 띠별운세 --- */
.zodiac-grid {
	display: grid;
	/* 1. 모바일 기본: 한 줄에 3개 (12개가 4줄로 예쁘게 나옴) */
	grid-template-columns: repeat(3, 1fr); 
	gap: 20px 10px;
	margin-bottom: 30px;
	width: 100%;
	max-width: 1000px; 
	}

	/* 화면 너비가 600px 이상일 때: 한 줄에 4개 (기존 설정) */
	@media (min-width: 600px) {
		.zodiac-grid {
			grid-template-columns: repeat(4, 1fr);
		}
	}

	/* 화면 너비가 900px 이상일 때: 한 줄에 6개 */
	@media (min-width: 900px) {
		.zodiac-grid {
			grid-template-columns: repeat(6, 1fr);
		}
	}

/* --- 개별 아이템 (Label) --- */
.zodiac-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* ★ 핵심 1: 라디오 버튼을 카드 안에 숨겨둠 (공통 클래스 활용을 위해) */
.zodiac-item input[type="radio"] {
	display: none;
}

/* 원형 아이콘 (기본 상태) */
.icon-circle {
	width: 130px;
	height: 130px;
	background-color: #fff;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 10px;
	font-size: 40px;
	transition: all 0.3s ease;
	box-shadow: 0 0 0 1px #e1e1e1;
	filter: grayscale(100%);
	opacity: 0.5;
}

.icon-circle img {
	width: 80%;
	height: 80%;
}

.label-text {
	font-size: 16px;
	color: #888;
	font-weight: 500;
}

/* ------------------------------------------------------- */
/* ★ [마법의 코드] 아이콘 활성화 (12줄 -> 1줄로 단축!) */
/* "내 안에 있는 input이 체크되면 -> 바로 뒤의 icon-circle을 바꿔라" */
/* ------------------------------------------------------- */
.zodiac-item input:checked + .icon-circle {
	filter: grayscale(0%);
	opacity: 1;
	background-color: #f4f4f4;
}

.zodiac-item input:checked ~ .label-text {
	color: #333;
	font-weight: bold;
	font-size: 16px;
}

/* --- 운세 내용 영역 --- */
.zodiac-result-wrap {
	width: 100%;
}

.zodiac-content {
	margin-top: 60px;
    padding: 50px 0px 0px;
    border-top: 1px solid #eaeaea;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}


/* 운세 내용 스타일*/
.fortune-date {
	font-weight: bold; 
	text-align: center; 
	margin-bottom: 5px; 
	display: block; 
	color:#000;
	font-size:18px;
}

.center-icon { 
	display: flex;
    font-size: 60px;
    padding: 30px;
    flex-direction: column;
    align-items: center;
    background: #f6f6f6;
    border: 30px;
    overflow: hidden;
    width: 200px;
    height: 200px;
    margin: 30px auto;
    border-radius: 170px;
    justify-content: center;
    border: 1px solid #ececec;
}

.center-icon img { 
	width:140px;
}
.center-icon .label-text{ 
    font-size: 24px;
	color:#000;
	margin-top: -7px;
}

.zodiac-cdetal {
	width:80%;
	margin:0 auto;
}

.fortune-text {
	margin-bottom:15px;
	font-size: 16px;
}

.year-list {
	list-style: none; 
	padding: 0; 
	line-height: 1.6; 
}

.year-list li {
	margin-bottom: 10px; 
	color: #555;
	font-size: 16px;

}

.year-list strong {
	color: #000; 
	margin-right: 5px;
	font-weight: 600;
}
		
/*/ End --- 띠별운세 --- */		


.general-section {
	margin-bottom: 60px;
	position:relative;
}

.general-section:last-child {
	margin-bottom: 20px;
}

.my-phrase {
	font-family: "Noto Serif KR", serif;
    font-size: 20px;
    color: #000;
    text-align: center;
    padding: 20px 0px;
    background-color: #f1f1f1;
    border-radius: 10px;
}

.my-phrase .em {
	font-size: 27px;
    font-weight: 600;
    color: #7f453e;
}

.general-header {
	display: flex;
    align-items: center;
    margin-bottom: 10px;
    justify-content: space-between;
}

.general-header h2 {
	display: flex;
    font-size: 24px;
    letter-spacing: -0.03em;
    font-weight: 600;
    color: #7f453e;
    margin-bottom: 0;
    align-items: center;
}

.general-header h2 .highlight {
	background: linear-gradient(to top, #ffea80 50%, transparent 40%);
	margin-right:10px;
	padding:0px 3px;
}

.general-header h2 .name-tit{
	font-family:"Noto Serif KR", serif;
	font-size: 24px;
}

.general-header h2 .meaning {
	font-family:"Noto Serif KR", serif;
	margin-left:10px;
	color:#333;
	font-size:18px;
	letter-spacing:1px;
}

.status-dot {
	width: 10px;
	height: 10px;
	background-color: #1e90ff;
	border-radius: 50%;
	margin-right: 5px;
	margin-left:10px;
	font-size:16px;
}

.status-text {
	font-size: 16px;
	color: #1e90ff;
	font-weight: bold;
}

.general-content p {
 margin-bottom:15px;
}

.general-content p:last-child {
 margin-bottom:0px;
}

.general-content {
	font-size: 16px;
	line-height: 1.8;
	color: #555;
	text-align: justify;	
	margin-bottom:20px;
}

.general-in-content {
	/*padding-right: 100px;*/
    position: relative;
    margin-bottom: 24px;
}

/* 1. fortune-section 내의 여러 general-section 중 '첫 번째'만 선택 */
.first-general-section {
	position: relative;
	height: 250px; /* 고정 높이 */
	overflow: hidden;
}

/* 2. 첫 번째 섹션 안의 그라데이션 레이어 스타일 */
.first-general-section .gradation-overlay {
    position: absolute;
    top: 0px; /* 0px 아래 지점부터 그라데이션 시작 */
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, 
        rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.95) 50%,
        rgba(255, 255, 255, 1) 100%
    );    
}

/* 3. 안내 문구 및 버튼 스타일링 */
.blur-content {
    width: 340px;
    margin: 30px auto;
    text-align: center;
    background: #fff;
    padding: 30px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
}

.blur-content h3 {
    font-size: 24px;
    margin-bottom: 8px;
    color: #000;
}

.blur-content p {
    font-size: 15px;
    margin-bottom: 25px;
    color: #666;
}

.buy-btn {
    background-color: #846d6a;
    color: white;
    padding: 10px 43px;
    border: none;
    border-radius: 40px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.r-spacing {
	padding-right:150px;	
}

.incnt-tit-wrap {
	position:relative;
}

.cnt-stit {
	font-size: 20px;
    font-weight: 500;
    color: #000;
    letter-spacing: -0.01em;
}

.cnt-sub-stit {
	font-size: 14px;
    color: #777;
	margin-left:6px
}

.general-in-content .stit-txt {
	margin-bottom:8px;
	color: #222;
}

.unse-rec-wrap {
	display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 25px;
    margin-left: 10px;
    gap: 20px;
}

.name-unse-rec {
	position:relative;
	border: 1px solid #ccc;
    padding: 18px 0px;
    border-radius: 20px;
    text-align: center;
    font-size: 14px;
	width:100%;
}

.name-unse-rec span {
	display:block;
}

.name-unse-rec span.label {
	position:absolute;
	left:-7px;
	top:-7px;
	width:30px;
	height:30px;
	border-radius:15px;
	background-color:#e26b6b;
	color:#fff;
	display: flex;
	justify-content: center;
    align-items: center;    
}

.name-unse-rec span.name-txt {
	font-size:20px;
	color:#000;
}

.name-unse-result {
	position:absolute;
	right:0px;
	top: 50%;
	transform: translateY(-50%);
	
	width:100px;
    /*height:76px;
	border-radius:50%;
	background-color:#eee;
	*/
	color:#000;
	display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
	font-size: 14px;
}

/*
.general-in-content .name-unse-result {
	top: 0px;
    transform: unset;
}
*/

.unse-keywd {
	text-indent: -9px;
    padding-left: 14px;
	margin-bottom: 5px;
}

.legend {
	font-size: 15px;
	display: flex;
	gap: 20px;
	color: #444;
}

.legend-item {
	display: flex;
	align-items: center;
	gap: 5px;
}

.icon-img {
	width:20px; 
	height:auto
}

.sp-status {
	display: block;
    position: relative;
    text-align: center;
    top: 0px;
}

.sp-status .icon-img{
	width:30px; 
}

.legend-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

.dot-blue { background-color: #1e90ff; } /* 적극활용 */
.dot-green { background-color: #3cb371; } /* 활용 */
.dot-orange { background-color: #ff8c00; } /* 보통 */
.dot-red { background-color: #ff4500; } /* 주의 */
.dot-black { background-color: #333; } /* 경계 */

.rating-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.rating-table th, .rating-table td {
	border: 1px solid #cab09c;
	padding: 10px 5px;
	text-align: center;
	font-weight: normal;
	font-size:16px;
}

.rating-table th:last-child, .rating-table td:last-child {
	border-right: none;
} 

.rating-table th:first-child, .rating-table td:first-child {
	border-left: none;
} 

.rating-table th {
	background-color: #f7f1eb; /* 이미지와 유사한 배경색 */
	color: #333;
	font-weight: bold;
}
/* 각 항목별 색상 적용 */
.rating-table td.blue-text { color: #1e90ff; font-weight: bold; }
.rating-table td.green-text { color: #3cb371; font-weight: bold; }
.rating-table td.orange-text { color: #ff8c00; font-weight: bold; }
.rating-table td.red-text { color: #ff4500; font-weight: bold; }
.rating-table td.black-text { color: #333; font-weight: bold; }
    
	

.monthly-fortune-section {
	margin-bottom: 50px;
}

.monthly-fortune-section h2.content-stitle {
	font-size: 18px;
	font-weight: bold;
	color: #333;
	margin: 30px 0 20px 0;
}

.month-item {
	display: flex;
	align-items: flex-start;
	margin-bottom: 30px;
}

.month-badge {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-color: #f0f0f0;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	font-size: 18px;
	color: #555;
	flex-shrink: 0;
	margin-right: 15px;
	letter-spacing:-1.5px;
}

.month-content {
	line-height: 1.6;
	color: #555;
}

.month-content .status-line {
	display: flex;
	align-items: center;
}

.month-content .status-text {
	font-weight: bold;
	margin-right: 10px;
	font-size: 17px;
}

/* 상태별 색상 */
.status-active { color: #1e90ff; } /* 적극활용 */
.status-normal { color: #ff8c00; } /* 보통 */
.status-caution { color: #ff4500; } /* 주의 */
.status-green { color: #3cb371; } /* 활용 */
.status-border { color: #333; } /* 경계 */

/* 월별 아이콘 배경색 (이미지와 유사하게) */
.month-item:nth-child(1) .month-badge { background-color: #f0f0f0; } /* 1월 */
.month-item:nth-child(4) .month-badge { background-color: #f0f0f0; } /* 4월 */
.month-item:nth-child(9) .month-badge { background-color: #f0f0f0; } /* 9월 */
/* ... 다른 월도 동일하게 적용 */

.month-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 4px;
	margin-bottom:40px;
}

.month-button {
	background-color: #eeeeee;
	color: #555;
	padding: 10px 0;
	border: none;
	border-radius: 3px;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
}

.month-button.active {
	background-color: #927e7d; /* 이미지와 유사한 활성화 색상 */
	color: #fff;
}



.daily-fortune-section {
	margin: 20px auto;
}

.daily-fortune-section h2 {
	font-size: 18px;
	color: #333;
	margin: 0 0 20px 0;
}

.daily-item {
	margin-bottom: 25px;
}

.daily-item:last-child {
	margin-bottom: 0px;
}

.daily-header {
	display: flex;
	align-items: center;
	font-weight: bold;
	margin-bottom: 5px;
	font-size: 16px;
	color: #333;
}

.daily-day {
	margin-right: 5px;
}

.daily-score {
	font-size:16px;
    color: #fff;
    border-radius: 3px;
    margin-right: 5px;
    padding: 0px 3px;
    text-align: center;
    width: auto;
    height: 20px;
    line-height: 19px;
}

.daily-score.score10 {background-color: #000;}
.daily-score.score20 {background-color: #cc162c;}
.daily-score.score30 {background-color: #fe2400;}
.daily-score.score40 {background-color: #e55506;}
.daily-score.score50 {background-color: #887c01;}
.daily-score.score60 {background-color: #0c9802;}
.daily-score.score70 {background-color: #039ad8;}
.daily-score.score80 {background-color: #1b99af;}
.daily-score.score90 {background-color: #2275bd;}
.daily-score.score100 {background-color: #;}

.daily-status {
	font-size:16px;
}

.daily-status.score10 {color: #000;}
.daily-status.score20 {color: #cc162c;}
.daily-status.score30 {color: #fe2400;}
.daily-status.score40 {color: #e55506;}
.daily-status.score50 {color: #887c01;}
.daily-status.score60 {color: #0c9802;}
.daily-status.score70 {color: #039ad8;}
.daily-status.score80 {color: #1b99af;}
.daily-status.score90 {color: #2275bd;}
.daily-status.score100 {color: #;}

.daily-content {
	color: #555;
	padding-left: 3px;
}

.daily-content p {
	margin: 5px 0;
}

.daily-explanation {
	font-size: 13px;
	line-height: 1.6;
	color: #777;
	border-top: 1px solid #eee;
	padding-top: 10px;
	margin-top: 15px;
}

/* 상태별 스타일 */
.status-normal { color: #ff8c00; } /* 보통 */
.status-very-good { color: #1e90ff; } /* 아주 좋음 */
.status-worst { color: #ff4500; } /* 최악 */
.status-bad { color: #ff8c00; } /* 비교적 좋지 않음 */
.status-very-bad { color: #ff4500; } /* 아주 나쁨 */

.progress-wrap{
	margin:30px 0px 60px
}

.progress-list {
	display: flex;
    margin: 20px 0px;
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
}

.progress-title {
	margin-bottom:7px;
	padding-left:10px;
	font-size:16px;
	width:100px;
	color:#222;
}

.progress-title::before {
    content: "•";
    color: #f29080;
    font-weight: 900;
    display: inline-block;
    width: 0.7em;
    margin-left: -0.7em;
}

/* 프로그레스 바 배경 (회색 트랙) */
.progress-track {
	width: 100%;
	height: 30px;
	background-color: #f0f0f0;
	border-radius: 50px;
	overflow: hidden;
	box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);	
}

/* 실제 진행률*/
.progress-fill {
	height: 100%;
	background: linear-gradient(150deg, #4b6582, #ffac8f);
	border-radius: 50px;
	display: flex;
	align-items: center;
	width: 0%;
	transition: width 1s ease-in-out;
	box-shadow: inset 0 0 10px 0px rgb(85 33 13 / 30%)
}

.progress-text {
	color: white;
	font-weight: bold;
	margin-left: 20px;
	font-size: 16px;
}

/* 로또 공들을 감싸는 영역 */
.lotto-row {
	display: flex;
    gap: 15px;
    flex-direction: row;
    flex-wrap: wrap;
	margin: 20px 0px;
}

/* 공통적인 공 스타일 */
.ball {
	width: 50px;
	height: 50px;
	border-radius: 50%; /* 완전한 원형 만들기 */
	display: flex;
	justify-content: center;
	align-items: center;
	color: white; /* 글자색 흰색 */
	font-size: 20px;
	font-weight: bold;
}

/* 각 색상별 스타일 (이미지 기반 색상 추출) */
.bcolor-00 { background-color: #fbc400; } 
.bcolor-10 { background-color: #2ba7dd; } 
.bcolor-20 { background-color: #ff7272; } 
.bcolor-30 { background-color: #545454; } 
.bcolor-40 { background-color: #03A9F4; } 
 
.calendar-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	margin-top: 20px;
}
.calendar-table th, .calendar-table td {
	width:14.2857%;
	font-size:14px;
	border: 1px solid #cab09c;
	padding: 8px;
	text-align: left;
	height: 50px;
	vertical-align: top;
	font-weight: normal;
}

.calendar-table th:last-child, .calendar-table td:last-child {
	border-right: none;
} 

.calendar-table th:first-child, .calendar-table td:first-child {
	border-left: none;
} 

.calendar-table th {	
	background-color:#f7f1eb;
	color: #333;
	font-weight: bold;
	text-align: center;
	height: auto;
	padding: 8px 5px;
}
.calendar-table th:first-child {
	color: #ff4500;
}
.calendar-date-row {
	font-size: 1.2em;
	font-weight: bold;
	color: #333;
}
.calendar-date-row td:first-child {
	color: #ff4500; 
}
    	
.d-state {
 width:16px;
 height:16px;
}

.state-good {}


.unse-table-hwrap{
	display: flex;
    flex-direction: row;
    gap: 40px;
    justify-content: space-between;	
}

.unse-table-area {
	width:50%;
}

.unse-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	margin-top:20px;
}

.unse-table caption {
	font-size: 14px;
    font-weight: bold;
    caption-side: top;
    text-align: left;
    visibility: unset;
    margin-bottom:8px;
	margin-top: 10px;
    border-radius: 8px 8px 0 0;
    color: #000;
    width: auto;
    height: auto;
    line-height: 150%;
    text-indent: 0px;
}

.unse-table th, .unse-table td {
	width:14.2857%;
	font-size:14px;
	border: 1px solid #cab09c;
	padding: 8px;
	text-align: center;	
	font-weight: normal;
}

.unse-table th:last-child, .unse-table td:last-child {
	border-right: none;
} 

.unse-table th:first-child, .unse-table td:first-child {
	border-left: none;
} 

.unse-table th {	
	background-color:#f7f1eb;
	color: #333;
	font-weight:bold;
}

.unse-table td {
	color: #333;
}

.ico-ty-use {
    display: block;
	padding-top: 10px;
    margin-bottom: -3px;
}

.ico-ty-use .icon-img{
    width:30px;
}


/* 타로 결과  Start */
/* 타로 카드 이미지  */
.card-section {
	display: flex;
    gap: 40px;
	margin-bottom: 40px;
	border-bottom: 1px solid #eee; /* 하단 구분선 */
	padding-bottom: 30px;
	justify-content: space-between;
	
}

.select-card-section {
	margin-bottom: 0px;
    border-bottom: none;
    padding-bottom: 0px;
	margin-top: 20px;
	gap: unset;
}

.card-image-wrapper {
	margin-bottom: 10px;
	text-align: center;
}

.card-img {
	width: 140px; /* 카드 크기 조절 */
	height: auto;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0,0,0,0.2);
	transition: transform 0.3s ease;
}

.select-card-section .card-img {
    width: 160px;
}

.card-img:hover {
	transform: translateY(-5px);
}

.card-name {
	font-size: 14px;
	color: #444;
	margin-top: 10px;
	line-height: 120%;
}

.card-name-eng {
	display:block; 
	font-size:12px;
	color:#888;	
}

.card-cate {
	color:#7f453e;
	font-size:14px;
	font-weight:600;
	margin-top:3px;
	line-height: 180%;
}

/*/ END 타로 결과 */


/* --- 모달(레이어) 스타일 --- */
/* --- 모달 레이어 팝업 스타일 (중앙 정렬 핵심) --- */
.modal-overlay {
	display: none;
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background-color: rgba(0, 0, 0, 0.5); 
	z-index: 9999;
	
	/* [중요] 화면 정중앙 정렬을 위한 Flex 설정 */
	justify-content: center;
	align-items: center;
}

/* 모달 창 본체 */
.modal-window {
	background-color: white;
	width: 90%;
	max-width: 500px; 
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.3);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* 모달 헤더 */
.modal-header {
	padding: 30px 0px 2px;
	text-align: center;
	position: relative;	
}
.modal-header h3 {
	margin: 0; 
	font-size: 22px;
	color: #222; 
}

/* 닫기 버튼 스타일 (SVG용) */
.hanja-close-btn {
	position: absolute;
	right: 15px; 
	top: 23px;
	cursor: pointer;
	border: none;
	background: none;
	padding: 5px; 
	display: flex;
	align-items: center;
	justify-content: center;
}

/* [새로 추가됨] SVG 아이콘 크기 및 두께 설정 */
.hanja-close-btn svg {
	width: 32px;
	height: 32px;
	stroke: #666;
	stroke-width: 1.5px;
	transition: stroke 0.2s;
}

/* 호버 시 색상 변경 효과 */
.hanja-close-btn:hover svg {
	stroke: #222; 
}

/* 테이블 영역 */
.modal-body {
	padding: 30px;
	max-height: 60vh;
	overflow-y: auto;
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	text-align: center;
}

th {
	background-color: #f2f2f2;
	color: #333;
	font-weight: 600;
	padding: 10px;
	border: 1px solid #e0e0e0;
}

td {
	padding: 10px;
	border: 1px solid #e0e0e0;
	color: #555;
}

.hanja-char { 
	font-size: 20px; 
	font-weight: bold; 
	color: #a4635b; 
}

/* 선택 버튼 (검정 캡슐 모양) */
.select-btn {
	background-color: #806b6b;
	color: #fff;
	border: none;
	border-radius: 20px;
	padding: 5px 15px;
	font-size: 12px;
	cursor: pointer;
}

.select-btn:hover {
	background-color: #444;
}

/* --- 스스로 이름짓기 --- */
.self-naming-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 40px;
    justify-content: space-around;
    align-items: flex-start;
    width: 100%;
}

.group-column { 
	display: flex; 
	flex-direction: 	column; 
	gap: 35px; 
}

.name-row { 
	display: flex;
	align-items: flex-start;
	gap: 13px;
	flex-direction: column; 
}

.name-row .label { font-weight: 700; font-size: 16px; width: 70px; flex-shrink: 0; color: #000; }
.input-group { display: flex; gap: 10px; align-items: center; }

/* --- 박스 스타일 공통 --- */
.name-rec {
    width: 66px;
    height: 76px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26px;
    font-weight: 500;
    position: relative;
    box-sizing: border-box;
    text-align: center;
	border: 1px solid #cab09c;
	font-family: "Noto Serif KR", serif;
	outline: none;
}

/* placeholder (+) 스타일 */
.box-input::placeholder {
    color: #ccc;
    font-weight: 300;
    font-size: 24px;
}

/* 글자가 입력되었을 때 배경색 변경 (CSS 트릭) */
.box-input:not(:placeholder-shown) {
    background-color: #f7f1eb;
}

/* 포커스 시 강조 */
.box-input:focus {
    box-shadow: 0 0 0 2px rgba(234, 67, 53, 0.3);
}

/* 2. 한자/오행 표시용 박스 스타일 */
/* 빨간색 박스 (한자 선택용) */
.name-rec.red {
    border: 1px solid #cab09c;
    color: #333;
    background-color: white;
}
.name-rec.red.filled {
    background-color: #f7f1eb;
}
.name-rec.empty {
    color: #ccc;
    font-size: 24px;
    font-weight: 300;
}

/* 회색 박스 (결과 표시용) */
.name-rec.gray {
    border: 1px solid #dbd4ce;
    color: #333;
    background-color: white;
}
.name-rec.gray.filled {
    font-family: "Noto Serif KR", serif;
}

/* 한자 박스 인터랙션 */
.name-rec.hanja-target { cursor: pointer; transition: transform 0.2s; }
.name-rec.hanja-target:hover { transform: scale(1.05); }


/* --- 테이블 스타일 --- */
.group-column .unse-table {
    margin-top: 0px;
	width: 400px;
}


/*/////////////  아이콘 타입별 정리 //////////////////*/




/* /////////////  Modal Overlay //////////////////*/
.page-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Noto Sans KR', sans-serif;
  z-index: 13;
  /* 초기에는 레이어를 숨깁니다. */
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease;
}

/* 레이어가 활성화될 때 보여줍니다. */
.page-overlay.active {
  visibility: visible;
  opacity: 1;
}

/* Modal Content Box */
.modal-content {
	background-color: #fff;
	border-radius: 12px;
	max-width: 350px;
    width: 90%;
    text-align: center;
    padding: 50px 40px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
	transform: scale(0.95);
	transition: transform 0.3s ease;
}

.page-overlay.active .modal-content {
  transform: scale(1);
}

.bookpay-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 50%; 
    color: #999;
}

.bookpay-close:hover {
    color: #000;
}

.bookpay-close svg {
    display: block;
    width: 40px; 
    height: 40px;
}

.bookpay-close svg path {
    stroke-width: 1; 
}

/* Header */
.py-modal-body .book-title-wrap{
    font-size: 20px;
    margin-bottom: 10px;
    font-weight: 500;
    justify-content: center;
}

.py-modal-body .book-title {
  color: #111;
  font-size: 24px;
}

.py-modal-body {
	display: flex;
    flex-direction: column;
    gap: 10px;
}

.price-amount {
  margin-top: 25px;
  font-size: 20px;
  color: #333;
  margin: 0;
}
.price-amount .amount {
  font-size: 26px;
  color: #ff3333;
  font-weight: 700;
}

/* Payment Options */
.payment_options {
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:10px;
	margin:15px 0px 0px;
}

.py_option {
	background:#f8f9f9;
	padding:10px 3px;
	border-radius:10px;
	text-align:center;
	font-size:14px;
	cursor:pointer;
	border:1px solid #ddd;
}

.py_option.selected {
	border-color:#ff4748;
	background:#fff;
	color:#ff4748;
	font-weight: bold;
}

.option_icon {
	width:100%;
	height:45px;
	display:flex;
	justify-content:center;
	/* 수평 중앙 정렬 */
	align-items:center;
	/* 수직 중앙 정렬 */
}

.option_icon img {
	display:block;
	margin:auto;
}

.option_title {
	font-size:14px
}

.modal-fmssg {
	margin-top:20px;
}

.modal-fmssg p {
	font-size:13px;
    color: #666;
    text-align: left;
    line-height: 160%;
}