@charset "utf-8";

.tbl_head03.recent-my-subscription td {padding:1em}
.text-center {text-align:center}
.recent-my-subscription
.order-common-section{margin:0 0 30px;border:1px solid #e3e5e8;background:#fff}
section.order-common-section h2 {border-bottom:1px solid #e2e4e7;font-size:1.167em;padding:20px}

.cell.jquery-pg-datepicker{text-align:center;margin:0 auto}
.cell.header label{margin:1em 0 0.5em;font-size:1.2em;font-weight:bold;display:block}

#od_pay_sl.is_subscription_pays .lb_icon{float:none;width:100%}
#od_pay_sl .lb_icon.subscription_card {padding-top:1.1em}

#od_hope_date_print .ui-datepicker {width:100%;max-width:560px;text-align:left;padding:1em 0}

#sod_frm_subscription_input {margin:0 0 30px;border:1px solid #e3e5e8;background:#fff}

.jquery-modal.blocker{z-index:120}

.jquery-modal .modal{max-width:560px;padding:1em 2em}
.jquery-modal .modal select.frm_input{min-width:300px}

.sit-btn-subscription {
width: 186px;
float: left;
margin-right: 5px;
margin-bottom: 10px;
font-weight: bold;
font-size: 1.25em;
background: #3a8afd;
border-radius: 3px;
border: 1px solid #1c70e9;
color: #fff;
text-align: center;

/* 추가된 코드 */
display: flex;              /* Flexbox 활성화 */
justify-content: center;    /* 가로 중앙 정렬 */
align-items: center;        /* 세로 중앙 정렬 */
height: 50px;               /* 높이 지정 (주석 해제) */
}
.sit-btn-subscription:hover {background:#2176f1}

.modal .subscription-title {font-size:1.5em;padding-bottom:0.5em; border-bottom:1px solid #e8e8e8;margin-bottom:0.5em}

.modal .subscription-desc1 {
    margin-bottom: 1em;
    padding: 13px 15px 13px 20px;
    border: 1px solid rgba(0, 0, 0, 0.03);
    border-radius: 3px;
    background-color: rgba(241, 244, 246, 0.7);
}

.modal .subscription-desc-end {margin-top:2em}
.modal h3{font-size:1.2em;margin:0.5em 0}

.modal .form-box-btns {margin-top:2em}
.modal .sit_btn_subscription {display:block;width:100%;padding:15px 0;font-size:1.25em;font-weight:bold;text-align:center}

.modal ul { 
   list-style-type: disc; 
   list-style-position: inside; 
}
.modal ol { 
   list-style-type: decimal; 
   list-style-position: inside; 
}
.modal ul ul, .modal ol ul { 
   list-style-type: circle; 
   list-style-position: inside; 
   margin-left: 15px; 
}
.modal ol ol, .modal ul ol { 
   list-style-type: lower-latin; 
   list-style-position: inside; 
   margin-left: 15px; 
}

.modal .pignose-calendar{width:100%;max-width:600px}

.jquery-pg-datepicker .ui-widget-header {
	 border: 0px solid #ddd;
	 background: #fff;
}
.jquery-pg-datepicker .ui-datepicker-calendar > thead > tr > th {
	 font-size: 14px !important;
}
.jquery-pg-datepicker .ui-datepicker .ui-datepicker-header {position: relative}
.jquery-pg-datepicker .ui-state-default, .jquery-pg-datepicker .ui-widget-content .ui-state-default, .jquery-pg-datepicker .ui-widget-header .ui-state-default, .jquery-pg-datepicker .ui-button, .jquery-pg-datepicker html .ui-button.ui-state-disabled:hover, .jquery-pg-datepicker html .ui-button.ui-state-disabled:active {
	 border: 0px solid #c5c5c5;
	 background-color: transparent;
	 font-weight: normal;
	 color: #454545;
	 text-align: center;
	 border-radius: 20%;
}
 .jquery-pg-datepicker .ui-datepicker .ui-datepicker-title {
	 margin: 0 0em;
	 line-height: 16px;
	 text-align: center;
	 font-size: 14px;
	 padding: 0px;
	 font-weight: bold;
}

.jquery-pg-datepicker .ui-datepicker {
	 display: none;
	 background-color: #fff;
	 border-radius: 4px;
	 margin-top: 10px;
	 margin-left: 0px;
	 margin-right: 0px;
	 -webkit-box-shadow: 0 3px 8px rgba(0,0,0,.25);
	 box-shadow: 0 3px 8px rgba(0,0,0,.25);
}
 .jquery-pg-datepicker .ui-widget.ui-widget-content {
	 border: 1px solid #eee;
}
 .jquery-pg-datepicker #datepicker:focus > .ui-datepicker {
	 display: block;
}
 .jquery-pg-datepicker .ui-datepicker-prev, .jquery-pg-datepicker .ui-datepicker-next {
	 cursor: pointer;
}
 .jquery-pg-datepicker .ui-datepicker-next {
	 float: right;
}
 .jquery-pg-datepicker .ui-state-disabled {
	 cursor: auto;
	 color: rgba(204, 204, 204, 1);
}
 .jquery-pg-datepicker .ui-datepicker-title {
	 text-align: center;
	 padding: 10px;
	 font-weight: 100;
	 font-size: 20px;
}
 .jquery-pg-datepicker .ui-datepicker-calendar {
	 width: 100%;
	 margin-top:1.5em;
}
 .jquery-pg-datepicker .ui-datepicker-calendar > thead > tr > th {
	 font-size: 20px;
	 font-weight: 400;
}
 .jquery-pg-datepicker .ui-datepicker-calendar > tbody > tr > td > a {
	 color: #000;
	 font-weight: bold !important;
	 text-decoration: none;
}

 .jquery-pg-datepicker .ui-datepicker-calendar > tbody > tr > td > a, .jquery-pg-datepicker .ui-datepicker-calendar > tbody > tr > td > span {
	padding:1em 0.5em;
}

 .jquery-pg-datepicker .ui-datepicker-calendar > tbody > tr > .ui-state-disabled:hover {
	 cursor: auto;
	 background-color: #fff;
}
 .jquery-pg-datepicker .ui-datepicker-calendar > tbody > tr > td {
	 border-radius: 100%;
	 cursor: pointer;
	 padding: 0.5em;
	 font-weight: 100;
	 text-align: center;
}
 .jquery-pg-datepicker .ui-datepicker-calendar > tbody > tr > td:hover {
	 background-color: transparent;
	 opacity: 0.6;
}
 .jquery-pg-datepicker .ui-state-hover, .jquery-pg-datepicker .ui-widget-content .ui-state-hover, .jquery-pg-datepicker .ui-widget-header .ui-state-hover, .jquery-pg-datepicker .ui-state-focus, .jquery-pg-datepicker .ui-widget-content .ui-state-focus, .jquery-pg-datepicker .ui-widget-header .ui-state-focus, .jquery-pg-datepicker .ui-button:hover, .jquery-pg-datepicker .ui-button:focus {
	 border: 0px solid #ccc;
	 background-color: transparent;
	 font-weight: normal;
	 color: #2b2b2b;
}

 .jquery-pg-datepicker .ui-icon-circle-triangle-e {
	 background-position: -20px 0px;
	 background-size: 36px;
}
 .jquery-pg-datepicker .ui-icon-circle-triangle-w {
	 background-position: 0px 0px;
	 background-size: 36px;
}
 .jquery-pg-datepicker .ui-datepicker-calendar > tbody > tr > td:first-child a {
	 color: red !important;
}
 .jquery-pg-datepicker .ui-datepicker-calendar > tbody > tr > td:last-child a {
	 color: #09f !important;
}
 .jquery-pg-datepicker .ui-datepicker-calendar > thead > tr > th:first-child {
	 color: red !important;
}
 .jquery-pg-datepicker .ui-datepicker-calendar > thead > tr > th:last-child {
	 color: #09f !important;
}

 .jquery-pg-datepicker table.ui-datepicker-calendar th{text-align:center !important;font-weight:bold}
 .jquery-pg-datepicker .ui-state-highlight, .jquery-pg-datepicker .ui-widget-content .ui-state-highlight, .jquery-pg-datepicker .ui-widget-header .ui-state-highlight {
	 border: 0px;
	 background: #f1f1f1;
	 border-radius: 50%;
	 padding-top: 10px;
	 padding-bottom: 10px;
}

.jquery-pg-datepicker .ui-state-active{background-image:none; color:#fff !important;background-color: #2fabb7 !important}

.jquery-pg-datepicker .ui-datepicker-calendar > tbody > tr > td:first-child a.ui-state-active, .jquery-pg-datepicker .ui-datepicker-calendar > tbody > tr > td:last-child a.ui-state-active{color:#fff !important}

.jquery-pg-datepicker .set_pay_date{display:none;text-align:left;margin-top:1em}
.ui-datepicker-prev span,
.ui-datepicker-next span {
  background-image: none !important;
}

.ui-datepicker-prev:before,
.ui-datepicker-next:before {
  font-family: FontAwesome;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  font-weight: normal;
  align-items: center;
  justify-content: center;
  font-size:1.7em;
}

.ui-datepicker .ui-datepicker-prev { left:1em; }
.ui-datepicker .ui-datepicker-next { right:1em; }
.ui-datepicker-prev:before {
  /*content: "\f100";*/
  content:"\f053"
}

.ui-datepicker-next:before {
  /*content: "\f101";*/
  content: "\f054";
}

.su-display-btns label {display: inline-block;position:relative;border: 2px solid #ffffff;background-color: transparent;vertical-align: top;
padding:0.6em 1em;margin-right:5px;margin-bottom:10px;font-weight:bold;font-size:1em}
.su-display-btns label{line-height:20px;min-width:110px}

.su-display-btns label:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 1px solid #dedfe5;
    content: "";
}

.su-display-btns {position:relative}
.su-display-btns input[type="radio"]{position:absolute;width:0;height:0;overflow:hidden;visibility:hidden;text-indent:-999px;left: 0;z-index:-1}
.su-display-btns input[type="radio"]:checked+.select-icon {border:1px solid #ff006c;color:#3a8afd;z-index:3}

.next-delivery-date-el{text-align:left;margin-top:1em}

.modal_contents .product-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
            max-width: 600px;
            margin: 20px auto;
        }
.modal_contents .product-item {
            display: flex;
            border: 1px solid #ddd;
            padding: 15px;
            border-radius: 8px;
            background: #f9f9f9;
            align-items: center;
            gap: 15px;
        }
.modal_contents .product-img img {
            width: 55px;
            height: 55px;
            border-radius: 5px;
        }
.modal_contents .product-info {
            flex-grow: 1;
        }
.modal_contents .product-name {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 5px;
        }
.modal_contents .product-options {
            font-size: 14px;
            color: #666;
        }
.modal_contents .product-meta {
            text-align: right;
        }
.modal_contents .product-meta div {
            font-size: 14px;
            margin-bottom: 5px;
        }
		
#nicepay_modal.modal{padding:0}
#nicepay_modal.modal .modal-content{padding:1em 2em}
#nicepay_modal h2 {
margin: 0;
padding: 10px;
color: #fff;
font-size: 14px;
background: -moz-linear-gradient(top, #2e5764, #1e3d47);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #1e3d47),color-stop(1, #2e5764));
}

#nicepay_modal .bottom-btns{
margin: 0;
padding: 10px;
color: #fff;
font-size: 14px;
background: #f6f6f6;
text-align:right;
}

.bottom-btns .modal-btn{display:inline-block;vertical-align: middle;background:#999;font-weight:bold;color:#fff;height:35px;line-height:35px;border:0;border-radius:5px;padding:0 50px}
.bottom-btns .modal-btn.order-progress {background:#ff4081}
.nicepay-form.flex ul{list-style:none}
.nicepay-form.flex li{display:flex;flex:1;margin:1em 0}

/* #nicepay_modal h2 {font-size:1.5em;margin-bottom:1em} */

.nicepay-form li label {
    display: flex;
    flex: none;
    width: 120px;
	flex-direction: column;
	/* align-items: center; */
	justify-content: center;
	font-weight:bold;
}

.user-subscription-inner ul {
    list-style: none;
    padding: 20px;
    max-width: 600px;
    margin: auto;
    background: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	list-style: none;
}

.user-subscription-inner h3 {
    font-size: 18px;
    color: #333;
    margin-top: 20px;
    border-bottom: 2px solid #ddd;
    padding-bottom: 5px;
}

.user-subscription-inner li {
    font-size: 16px;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
	list-style: none;
}

.user-subscription-inner li:last-child {
    border-bottom: none;
}

.user-subscription-inner span.th {
    color: #444;
    display: inline-block;
	font-weight:bold;
	width:90px;
}

.shop-content .is-od-test,
.member-subscription-views .is-od-test,
.user-subscription-inner .is_pay_test {
    color: red;
	font-size: 1.1em;
    font-weight: bold;
    text-align: left;
    background: #ffecec;
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;
}

.user-subscription-inner .is_not_delivery {
    color: #777;
    font-style: italic;
    text-align: center;
    background: #f2f2f2;
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;
}

.user-subscription-inner a.subscription-receipt-view {
    display: inline-block;
    padding: 6px 10px;
    margin-top: 5px;
    background: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: 0.3s;
}

.user-subscription-inner a.subscription-receipt-view:hover {
    background: #0056b3;
}

.nicepay-form li input{max-width:300px;width:90%}
#nicepay_modal .description-top {border-top:1px solid #eceff4;padding:0.5em 0;margin:1em 0}
.nicepay-form li .td{
    display: flex;
    flex: 1;
    overflow: auto;
}

#sod_frm #sod_frm_subscription_input .tbl_frm01 th{width:104px}

.today-highlight span.ui-state-default {
    position: relative;
    font-weight: bold;
    color: red !important; /* 오늘 날짜 강조 */
}

.today-highlight span.ui-state-default::after {
    content: "\C624\B298";
    display: block;
    font-size: 10px;
    color: blue;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 25px; /* 날짜 아래로 이동 */
}

.subscription-form {padding:0px 10px}
.order-table {
	display: table;
	width: 100%;
}
.order-table .row {
	display: table-row;
}
.order-table .cell {
	display: table-cell;
	padding: 10px;
	text-align: left;
}
.order-table .header {
	width:94px;
}

.order-table .header label{display:inline-block;font-weight:normal;margin-right:1em}
.order-table .full-width {
	width: 100%;
}

.pos_rel {position:relative}
.pos_rel a.btn_frmline {float:none;position:absolute;top:10px;right:10px}
.subscription-recipients .btn_frmline {padding:0;width:80px;height:30px;line-height:28px;background:#fff;border:1px solid #d4d6db;color:#606060;text-align:center}
.form-buttons .btn_submit {padding:1em}
.subscription-recipients .btn_address{background:#434a54;color:#fff;width:128px;height:45px;border:0;border-radius:3px}
.subscription-recipients .tbl_head01, .subscription-recipients .tbl_frm01{margin-bottom:0;padding-bottom:0}
.subscription-recipients .form-messages{margin-top:1em;padding:15px;border:1px solid #d6e2f4;background:#edf3fc;font-size:1.2em;border-radius:5px;color:#3a8afd}

.subscription-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
	border: 1px solid #e3e5e8;
	border-top:0 none;
	margin-bottom:2em;
}

.subscription-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
	border-top: 1px solid #e3e5e8;
    /* border-radius: 10px; */
    background-color: #fff;
	/*
	margin-bottom: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    transition: background 0.3s;
	*/
}

.subscription-item.is-current {
    background-color: #e8f6ff;
}

.count-area {
    display: flex;
    align-items: center;
    gap: 8px;
}

.count {
    font-weight: 600;
    font-size: 16px;
}

.badge {
    background: #3fa7ff;
    color: white;
    padding: 2px 8px;
    font-size: 12px;
    border-radius: 12px;
}

.status-area {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

.icon-status svg {
    display: inline-block;
    vertical-align: middle;
}

.date {
    font-weight: 500;
}

.text {
    color: #888;
}

.link-area {
    width: 24px; /* placeholder */
}

/* 마이페이지 최근 구독내역 */
.mypage_subscription{margin:0 0 50px 0}
.mypage_subscription h2 {margin:0 0 10px;font-size:1.25em}

.mysubs-status-container {background:#fff;border:1px solid #e3e5e8;padding:1em;border-bottom:none}
.mysubs-status-conditions ul {zoom:1}
.mysubs-status-conditions ul:after {display:block;visibility:hidden;clear:both;content:""}
.mysubs-status-conditions li {display:inline-block;padding:2px}
.mysubs-status-conditions a {display:block;line-height:28px;padding:5px 15px;border-radius:30px;border:1px solid #d6e9ff;color:#6794d3}
.mysubs-status-conditions a:focus, .mysubs-status-conditions a:hover, .mysubs-status-conditions a:active {text-decoration:none;background:#3a8afd;color:#fff}
.mysubs-status-conditions .on {z-index:2;background:#3a8afd;color:#fff;font-weight:bold;border:1px solid #3a8afd;
-webkit-box-shadow:inset 0 2px 5px rgb(33, 135, 202);
-moz-box-shadow:inset 0 2px 5px rgb(33, 135, 202);
box-shadow:inset 0 2px 5px rgb(33, 135, 202)}

#smb_private .subscription-card-manage strong {background:#00CC00;color:#fff}

#sod_frm  #sod_bsk_tot .is-order-subscription.sod_bsk_sell{width:66.666%}

/* 구독 히스토리 */
.order-historys {
	list-style: none;
	padding: 0;
	margin: 0;
	max-width: 600px;
	margin: 20px auto;
}

.history-item {
	background: #fffde7; /* 연한 노란색 메모지 배경 */
	border: 1px solid #d1d1d1;
	border-radius: 8px;
	margin-bottom: 15px;
	padding: 15px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 부드러운 그림자 */
	position: relative;
	transition: transform 0.2s;
}

/* 호버 시 살짝 위로 */
/*
.history-item:hover {
	transform: translateY(-2px);
}
*/

.history-content {
	color: #333;
	margin-bottom: 10px;
	line-height: 1.5;
}

.history-btns {
	margin: 0;
	text-align: right;
}

.history-date {
	color: #555;
	background: #f5f5f5;
	padding: 5px 10px;
	border-radius: 5px;
	display: inline-block;
}

/* admin 클래스에 대한 스타일 (비활성화 항목 강조) */
.history-item.admin {
	background: #ffebee; /* 비활성화는 연한 빨간색 */
	border-color: #ef5350;
}

.history-item.admin .history-content {
	color: #c62828;
	font-weight: bold;
}
		
#sod_fin_history {margin:0 0 20px;background:#fff;border:1px solid #e3e5e8}
#sod_fin_history h3 {background:#fff;font-size:1.167em;padding:15px 20px;border-bottom:1px solid #e3e5e8}
#sod_fin_history ul {margin:0;padding:15px 20px}

#sod_fin_cancel.is-subscription{margin-bottom:2em}

#sod_fin_dvr_list .my-payment-details{padding:1em}

#sod_fin .sod_left th
.my-payment-details table {
	 width: 100%;
	 border-collapse: collapse;
	 background-color: #fff;
	 box-shadow: 0 2px 4px #000 1a;
	 border-radius: 8px;
	 overflow: hidden;
}
 .my-payment-details th {
	 background-color: #4a90e2;
	 color: #fff;
	 padding: 12px 15px;
	 text-align: center;
	 font-weight: 600;
	 font-size: 14px;
}
#sod_fin .sod_left .my-payment-details th {text-align: center}
 .my-payment-details td {
	 padding: 12px 15px;
	 border-bottom: 1px solid #e0e0e0;
	 color: #333;
	 text-align: center;
}
 .my-payment-details tr:nth-child(odd) {
	 background-color: #f9f9f9;
}
 .my-payment-details tr:hover {
	 background-color: #f1f5f9;
}
 .my-payment-details .btn {
	 display: inline-block;
	 background-color: #4a90e2;
	 color: #fff;
	 text-decoration: none;
	 border-radius: 4px;
	 font-size: 13px;
	 transition: background-color 0.3s ease;
}
 .my-payment-details .btn:hover {
	 background-color: #357abd;
}
 @media (max-width: 768px) {
	 .my-payment-details table {
		 font-size: 12px;
	}
	 .my-payment-details th, .my-payment-details td {
		 padding: 8px 10px;
	}
	 .my-payment-details .btn {
		 padding: 6px 10px;
		 font-size: 12px;
	}
}
 @media (prefers-color-scheme: dark) {
	 .my-payment-details table {
		 background-color: #2c2c2c;
		 box-shadow: 0 2px 4px #000 4d;
	}
	 .my-payment-details th {
		 background-color: #357abd;
		 color: #fff;
	}
	 .my-payment-details td {
		 color: #d1d1d1;
		 border-bottom: 1px solid #444;
	}
	 .my-payment-details tr:nth-child(odd) {
		 background-color: #333;
	}
	 .my-payment-details tr:hover {
		 background-color: #3a3a3a;
	}
	 .my-payment-details .btn {
		 background-color: #357abd;
	}
	 .my-payment-details .btn:hover {
		 background-color: #2a6099;
	}
}