/* =========================================================================
   my page  ========================================================================= */
:root {
	--mypage-sidebar-w: 180px;
}
.mt-10 {
	margin-top: var(--spacing-9);  /* 40px */
}
.mb-6 {
	margin-bottom: var(--spacing-7);
}

.mypage-layout {
	display: flex;
	max-width: var(--max-w);
	margin: 0 auto;
	padding: calc(var(--spacing-9) * 2) 0;
}

/* =========================================================================
   my page: sidebar  ========================================================================= */
.pc-sidebar.mypage-sidebar {
	z-index: unset;
	position: static;
	width: var(--mypage-sidebar-w);
	border: unset;
}
.pc-sidebar.mypage-sidebar .navbar-wrapper {
	width: var(--mypage-sidebar-w);
}
.pc-sidebar.mypage-sidebar .navbar-content {
	height: 100%;
}

/* nav item */
.pc-sidebar.mypage-sidebar .pc-navbar > .pc-item {
	margin: 0;
}
.pc-sidebar.mypage-sidebar .pc-navbar > .pc-item:not(:last-child) {
	margin-bottom: var(--spacing-5);
}
.pc-sidebar.mypage-sidebar .pc-link {
	padding: var(--spacing-3) 0;
	border-radius: var(--spacing-2);
}

/* nav item: text */
.pc-sidebar.mypage-sidebar .pc-link .pc-mtext {
	font-size: var(--text-body-lg); /* 16px */
	font-weight: 700;
	line-height: 1.5; /* 24px */
	/*color: var(--text-secondary);*/
}
/* nav item: hover */
.pc-sidebar.mypage-sidebar
	.pc-navbar
	> .pc-item:hover:not(.active)
	> .pc-link:after {
	background: transparent;
}
.pc-sidebar.mypage-sidebar .pc-link:hover {
	background: var(--gray-100);
}

/* nav item: active */
.pc-sidebar.mypage-sidebar .pc-navbar > .pc-item.active > .pc-link:after {
	background: unset;
}
.pc-sidebar.mypage-sidebar .pc-navbar > .pc-item.active > .pc-link > .pc-mtext {
	line-height: var(--text-heading-md);
	color: var(--text-primary);
	text-decoration: underline;
	text-decoration-style: solid;
	text-underline-offset: 0.25em;
	text-decoration-thickness: 10%;
	text-decoration-skip-ink: auto;
}

/* submenu */
.pc-sidebar.mypage-sidebar .pc-navbar > .pc-item .pc-submenu .pc-link {
	padding: var(--spacing-2) var(--spacing-3);
	font-size: var(--text-body-lg); /* 16px */
	font-weight: 500;
	line-height: 1.5; /* 24px */
	color: var(--gray-400);
}
.pc-sidebar .pc-navbar > .pc-item .pc-submenu .pc-item > .pc-link:after {
	content: unset;
}
.pc-sidebar.mypage-sidebar .pc-navbar > .pc-item .pc-submenu .pc-link:hover {
	color: var(--text-secondary);
}
.pc-sidebar.mypage-sidebar
	.pc-navbar
	> .pc-item
	.pc-submenu
	.pc-item.active
	.pc-link {
	line-height: var(--text-heading-md);
	color: var(--text-secondary);
	text-decoration: underline;
	text-decoration-style: solid;
	text-underline-offset: 0.25em;
	text-decoration-thickness: 10%;
	text-decoration-skip-ink: auto;
}

/* =========================================================================
   my page: container  ========================================================================= */
.mypage-container {
	width: calc(100% - var(--mypage-sidebar-w));
	padding: 0 0 0 calc(var(--spacing-8) * 2);
}

.mypage-title {
	--letter-spacing-ratio: -0.004%;
	margin-bottom: 0;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.5;
}
.mypage-title-box {
	margin-bottom: var(--spacing-9);
	text-align: center;
}

/* =========================================================================
   mypage: section (공통)  ========================================================================= */
.section {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-7);
}

/* =========================================================================
   mypage: date picker (데이트 피커)  ========================================================================= */
.table-data-count {
	display: flex;
	flex-direction: row;
	gap: 0.5rem;
}

.table-data-row {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

/* =========================================================================
   mypage: table (테이블)  ========================================================================= */
.mypage-table {
	--bs-table-color: var(--gray-600);
	margin-bottom: 0;
	border: 1px solid var(--color-bg-card);
	border-right: none;
	border-left: none;
}
.mypage-table.table-bordered td, .mypage-table.table-bordered th {
	border: 1px solid var(--color-bg-card);
}

.mypage-table thead th,
.mypage-table tbody td {
	border-bottom: 1px solid var(--color-bg-card);
}
.table.mypage-table > :not(:last-child) > :last-child > * {
	border-bottom-color: var(--color-bg-card);
}
.mypage-table thead th:first-child,
.mypage-table tbody td:first-child {
	border-left: none;
}
.mypage-table thead th:last-child,
.mypage-table tbody td:last-child {
	border-right: none;
}
.mypage-table th,
.mypage-table thead th {
	padding: var(--spacing-4) var(--spacing-4) 15px var(--spacing-4);
	background: var(--gray-100);
	font-size: var(--text-body-lg);
	font-weight: 500;
	line-height: var(--text-heading-md);
}
.mypage-table tbody td {
	padding: var(--spacing-4) var(--spacing-4) 15px var(--spacing-4);
	font-size: var(--text-body-lg);
	line-height: var(--text-heading-md);
}

.mypage-table .no-data {
	padding: calc(var(--spacing-8) * 2) var(--spacing-8);
}
.mypage-table td.no-data {
	text-align: center;
	color: var(--gray-300);
}
.mypage-table td.no-data:not([colspan]) {
	color: var(--gray-200) !important;
}

/* 클릭 가능한 테이블 스타일 */
.table-clickable tbody tr {
	cursor: pointer;
}
.table-clickable tbody tr .no-data {
	cursor: default;
}
.table-clickable tbody tr:has(.no-data) {
	cursor: default;
}

.no-data-list {
	padding: calc(var(--spacing-8) * 2) var(--spacing-8);
	font-size: var(--text-body-lg);
    line-height: var(--text-heading-md);
	text-align: center;
	color: var(--gray-400);
}

/* =========================================================================
   mypage: table column widths (테이블 컬럼 너비 설정)  ========================================================================= */
/* 공통: 모든 테이블 셀 한 줄 말줄임표 처리 */
.mypage-table th,
.mypage-table td {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 말줄임표 처리 비활성화 클래스: .mypage-table-cell-no-ellipsis */
.mypage-table-cell-no-ellipsis,
.mypage-table-cell-no-ellipsis th,
.mypage-table-cell-no-ellipsis td,
.mypage-table th.mypage-table-cell-no-ellipsis,
.mypage-table td.mypage-table-cell-no-ellipsis {
	overflow: visible;
	text-overflow: clip;
	white-space: normal;
	word-break: break-word;
}

.mypage-table-wrapper {
	overflow-x: auto;
	width: 100%;
}

/* 테이블 내부 포인트 스타일 (우선순위 보장) */
.mypage-table td.point-positive,
.mypage-table td .point-positive {
	color: var(--blue-600);
}

.mypage-table td.point-negative,
.mypage-table td .point-negative {
	color: var(--gray-600);
}

/* =========================================================================
   mypage: 공통 컴포넌트 (여러 페이지에서 사용)  ========================================================================= */
/* 가격 표시 */
.price {
	margin-left: 10px;
	color: var(--blue-600);
}

/* 버튼 래퍼 */
.button-wrapper {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 16px;
}
.button-wrapper.user-info {
	justify-content: flex-end;
	gap: var(--spacing-5);
	margin-top: var(--spacing-7);
}

/* 뱃지 */
.badge {
	display: inline-block;
	padding: var(--spacing-2) var(--spacing-4);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	border-radius: var(--radius);
	background: var(--primary);
	color: var(--white);
}
.badge-large {
	padding: 8px 20px 6px;
	border-radius: 200px;
	font-size: var(--text-heading-md);  /* 24px */
	font-weight: 600;
	line-height: 1.166;  /* 28px */
}
.badge-blue {
	background: var(--blue-100);
	color: var(--blue-800);
}

.badge-gray {
	background: var(--gray-100);
	color: var(--gray-300);
}

.badge-skygreen {
	background-color: #4CB592;
}

.badge-teal {
	background-color: #20C997;
}

/* =========================================================================
   크레딧 카드 관리 스타일 ========================================================================= */
.credit-card-image-box {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--spacing-5);
}

.credit-card-image-box img {
	flex-shrink: 0;
	width: var(--spacing-9);
	height: var(--spacing-9);
	border-radius: var(--radius-6);
	object-fit: contain;
}

.payment-credit-card-item .credit-card-content img {
	flex-shrink: 0;
	width: var(--spacing-9);
	height: var(--spacing-9);
	border-radius: var(--radius-6);
	object-fit: contain;
}

.credit-card-item {
	display: flex;
	flex-direction: column;
	padding-bottom: var(--spacing-6);
	border-bottom: 1px solid var(--color-stroke);
}

.credit-card-info-box {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-5);
}

.credit-card-meta {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--spacing-3);
}

.credit-card-details {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.credit-card-action-box {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

.credit-card-default,
.credit-card-current {
	display: inline-block;
	padding: 2px 6px;
	border-radius: var(--radius);
	background-color: var(--blue-100);
	font-weight: 600;
	font-size: var(--text-body-md);
	line-height: 20px;
	color: var(--secondary);
}

.credit-card-number {
	font-size: var(--text-body-lg);
	line-height: var(--text-heading-md);
	color: var(--gray-400);
}

.credit-card-wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-10);
}

/* 결제수단 변경 모달용 크레딧 카드 리스트 스타일 */
.payment-credit-cards-list {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-5);
}

.payment-credit-card-item {
	display: flex;
	flex-direction: column;
	padding: var(--spacing-6);
	border-radius: var(--radius);
	border: 2px solid transparent;
	cursor: pointer;
}
.payment-credit-card-item:has(.form-check-input:checked) {
	border-color: var(--bs-primary);
}

.payment-credit-card-item:hover {
	background-color: var(--gray-100);
}

.payment-credit-card-item .credit-card-radio-wrapper {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--spacing-5);
}

.payment-credit-card-item .form-check-input {
	flex-shrink: 0;
	margin: 0;
	width: var(--spacing-6);
	height: var(--spacing-6);
	cursor: pointer;
}

.payment-credit-card-item .credit-card-content {
	flex: 1;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--spacing-5);
}


/* 모달 */
.modal-body {
	gap: calc(var(--spacing) * 18);
}
.modal-body form {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-3);
}
.modal .form-item .label {
	padding: 0;
    font-size: var(--text-heading-xs);
    font-weight: 600;
    line-height: 1.3333;  /* 24px */
}
.modal-footer .btn--large {
	min-width: 160px;
}

/* 폼 아이템 */
.form-item {
	gap: var(--spacing-3);
}
.form-item .label:not(:empty) {
    margin-bottom: 0;
}
.form-item .error-message:not(:empty) {
	margin-top: 0;
}
.form-item.form-item-error .label {
	color: #dc3545;
}
.form-item.form-item-error .textarea {
	border-color: #dc3545;
	box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* 탭 컨테이너 */
.tabs-container > .nav-tabs {
	display: flex;
	justify-content: center;
	width: 100%;
}

.tabs-container > .nav-tabs .nav-item {
	flex: 1;
	text-align: center;
}

.tabs-container > .nav-tabs .nav-link {
	width: 100%;
	text-align: center;
	justify-content: center;
	display: flex;
	align-items: center;
}
.tab-content {
	margin-top: var(--spacing-9);
}
/* 탭 콘텐츠 숨김 처리 (Bootstrap 탭이 제대로 작동하지 않을 경우를 위한 백업) */
.tab-pane {
	flex-direction: column;
	gap: var(--spacing-7);
}
.tab-pane:not(.active) {
	display: none !important;
}

.tab-pane.active {
	display: flex !important;
}

/* 데이터 행 (클릭 가능) */
.data-row {
	cursor: pointer;
}

/* 문자 수 카운터 */
.char-count {
	color: var(--text-secondary);
	font-size: var(--text-body-sm);
}

.char-count.char-limit-reached {
	color: var(--text-secondary);
}

.char-count.char-limit-reached .char-current {
	color: #dc3545;
	font-weight: bold;
}

/* =========================================================================
   1. 마이페이지 홈  ========================================================================= */
.mypage-user-box {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.mypage-user-info {
	display: flex;
	align-items: center;
	gap: var(--spacing-5);
}
.mypage-user-info .badge {
	--bs-badge-padding-x: var(--spacing-6);
	--bs-badge-border-radius: 200px;
	padding: var(--spacing-3) var(--bs-badge-padding-x) var(--radius);
}

.mypage-bento-box {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: repeat(2, auto);
	gap: var(--spacing-7);
	margin-top: var(--spacing-7);
}

/* 첫째 줄: 2개 카드 (각각 3칸씩 차지) */
.mypage-bento-box .card.point {
	grid-column: span 3;
}

.mypage-bento-box .card.date {
	grid-column: span 3;
}

/* 둘째 줄: 3개 카드 (각각 2칸씩 차지) */
.mypage-bento-box .card.order {
	grid-column: span 2;
}

.mypage-bento-box .card.subscription {
	grid-column: span 2;
}

.mypage-bento-box .card.sns {
	grid-column: span 2;
}

.mypage-bento-box .card.point .card-body,
.mypage-bento-box .card.date .card-body,
.mypage-bento-box .card.sns .card-body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--spacing-8);
}
.mypage-bento-box .card.order .card-body,
.mypage-bento-box .card.subscription .card-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-5);
}

.card .icon svg {
	width: var(--spacing-10);
	height: var(--spacing-10);
}
.card .icon path {
	stroke-width: 1.5;
}

.value-link {
	display: flex;
	align-items: center;
	gap: var(--spacing-2);
}
.value-link .emphasis {
	margin-right: var(--spacing-2);
}
.value-link .icon svg {
	width: 36px;
	height: 36px;
}

.value-link.small {
	gap: 0;
}
.value-link.small .emphasis {
	margin-right: var(--spacing);
}
.value-link.small .icon svg {
	width: 18px;
	height: 18px;
}

.social-login-box-wrapper {
	display: flex;
	justify-content: center;
}
.social-login-box {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-5);
	width: fit-content;
}

.social-login-box .login-button {
	display: flex;
	background: transparent;
}

.social-login-box .login-button svg {
	width: var(--spacing-10);
	height: var(--spacing-10);
}

/* kakao icon button: inactive */
.social-login-box .login-button.kakao-login-button.inactive .bg {
	fill: var(--gray-200);
}
.social-login-box .login-button.kakao-login-button.inactive .symbol {
	fill: var(--white);
}

/* naver icon button: inactive */
.social-login-box
	.login-button.naver-login-button.inactive
	.naver-login-button-stroke,
.social-login-box
	.login-button.naver-login-button.inactive
	.naver-login-button-bg {
	fill: var(--gray-200);
}

/* apple icon button: inactive */
.social-login-box .login-button.apple-login-button.inactive .bg {
	fill: var(--gray-200);
}

/* google icon button */
.social-login-box
	.login-button.google-login-button
	.google-login-button-stroke {
	stroke: var(--color-stroke);
}
/* google icon button: inactive */
.social-login-box
	.login-button.google-login-button.inactive
	.google-login-button-stroke {
	stroke: var(--gray-200);
}
.social-login-box .login-button.google-login-button.inactive .bg {
	fill: var(--gray-200);
}
.social-login-box .login-button.google-login-button.inactive .symbol {
	fill: var(--white);
}

/* =========================================================================
   2. 주문 내역  ========================================================================= */
.section-order {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.order-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.order-summary {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 1rem;
}
.order-summary-date-input .form-input {
	padding: var(--spacing-5) var(--spacing-4);
	border: none;
	font-size: var(--text-body-lg);  /* 16px */
	font-weight: 400;
	line-height: 1.5;  /* 24px */
}
.order-summary-date-input .form-input::placeholder {
	color: var(--gray-400);
}

.order-summary-extra-left {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--spacing-5);
	flex: 1;
}

.order-summary-extra-right {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	flex: 1;
}

.order-summary-box {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.order-summary-extra {
	display: flex;
	flex-direction: row;
	gap: 1rem;
}

.date-group {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-5);
	margin-bottom: 2rem;
}

.order-item {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-5);
	padding: var(--spacing-7);
	border-radius: var(--radius-3);
	border: 1px solid var(--color-stroke);
	background: var(--white);
}

.order-item-header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.order-item-header-left {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--spacing-7);
	flex: 1;
}

.order-item-header-left-left {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--spacing-2);
}

.order-item-header-left-right {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.order-delivery-status {
	font-size: var(--text-body-lg);
	color: var(--text-secondary);
}

.order-delivery-date {
	font-size: var(--text-body-lg);
	color: var(--text-secondary);
}

.order-item-header-right {
	display: flex;
	flex-direction: row;
	align-items: center;
}
.order-tracking-btn {
	border: none;
	font-weight: 400;
	color: var(--primary);
}
.order-tracking-btn.btn--text .icon:not(.icon--custom) svg path {
	stroke: var(--primary);
}
.order-tracking-btn.btn--text:hover .icon:not(.icon--custom) svg path {
    stroke: var(--secondary);
}
.order-item-content {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
}

.order-item-content-left {
	display: flex;
	flex-direction: row;
	gap: var(--spacing-7);
	flex: 1;
}

.order-item-content-right {
	flex: 1;
}

.order-item-image {
	width: 15%;
	max-width: 120px;
	aspect-ratio: 1/1;
	border-radius: 9px;
	overflow: hidden;
}

.order-item-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.order-item-details {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-3);
	margin-top: var(--spacing-6);
}

.order-item-details-header {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
}

.order-type {
	display: inline-block;
	padding: var(--spacing) calc(var(--spacing) * 3);
	border-radius: 5px;
	background-color: var(--green-050);
	font-size: var(--text-body-md);
	font-weight: 600;
	line-height: 20px;
	letter-spacing: -0.2%;
	color: var(--green-500);
}

.order-code-summary, .order-options {
	color: var(--text-secondary);
}

.order-price {
	font-size: var(--text-body-lg);
	font-weight: 600;
	line-height: 20px;
	letter-spacing: -0.2%;
	/* color: var(--text-primary); */
}

.order-item-footer {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
}

.order-item-footer-right {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}

.order-status-message {
	font-size: var(--text-body-lg);
	font-weight: 600;
}

.order-status-message.status-confirmed {
	color: var(--blue-800);
}

.order-status-message.status-pending {
	color: #FF6B00;
}

.order-status-message.status-cancelled {
	color: #DC3545;
}

.order-actions {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	gap: 1rem;
}

.order-tracking-link {
	color: var(--primary);
	font-size: var(--text-body-lg);
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
}

.order-tracking-link:hover {
	text-decoration: underline;
}

/* Tracking modal tidy styles */
#trackingModal .tracking-modal-dialog {
	max-width: 500px;
}

#trackingModal .tracking-modal-body {
	max-height: 70vh;
	overflow-y: auto;
}

#trackingModal .tracking-result-new {
	padding: 0;
}

#trackingModal .tracking-current-status {
	margin-bottom: 20px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
	color: var(--blue-600);
}

#trackingModal .tracking-timeline {
	margin-bottom: 24px;
}

#trackingModal .tracking-timeline-container {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	position: relative;
	padding: 0 8px;
}

#trackingModal .tracking-timeline-line-bg {
	z-index: 0;
	position: absolute;
	top: 5px;
	right: 12.5%;
	left: 12.5%;
	height: 2px;
	background-color: #E0E0E0;
}

#trackingModal .tracking-timeline-line-active {
	z-index: 1;
	position: absolute;
	top: 5px;
	left: var(--active-left, 12.5%);
	width: var(--active-width, 0%);
	height: 2px;
	background-color: var(--blue-600);
}

#trackingModal .tracking-timeline-stage {
	position: relative;
	z-index: 2;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

#trackingModal .tracking-timeline-circle {
	width: 12px;
	height: 12px;
	margin-bottom: 8px;
	border-radius: 50%;
	border: 2px solid white;
	background-color: #E0E0E0;
	box-shadow: 0 0 0 1px #E0E0E0;
}

#trackingModal .tracking-timeline-circle-active {
	background-color: var(--blue-600);
	box-shadow: 0 0 0 1px var(--blue-600);
}

#trackingModal .tracking-timeline-label {
	font-size: 12px;
	text-align: center;
	white-space: nowrap;
	color: #999;
}

#trackingModal .tracking-timeline-label-active {
	color: #333;
}

#trackingModal .tracking-timeline-label-current {
	padding: 4px 12px;
	border-radius: 12px;
	background-color: var(--blue-600);
	color: white;
}

#trackingModal .tracking-events-list {
	margin-bottom: 16px;
}

#trackingModal .tracking-event-item {
	display: flex;
}

#trackingModal .tracking-event-marker {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 20px;
	margin-top: 5px;
	margin-right: 12px;
}

#trackingModal .tracking-event-circle {
	z-index: 2;
	position: relative;
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: #E0E0E0;
	border: 2px solid white;
	box-shadow: 0 0 0 1px #E0E0E0;
}

#trackingModal .tracking-event-circle-latest {
	background-color: var(--blue-600);
	box-shadow: 0 0 0 1px var(--blue-600);
}

#trackingModal .tracking-event-line {
	z-index: 1;
	position: relative;
	flex: 1;
	width: 1px;
	min-height: 20px;
	margin-top: 3px;
	margin-bottom: -3px;
	background-color: #E0E0E0;
}

#trackingModal .tracking-event-content {
	flex: 1;
	padding-bottom: 8px;
}

#trackingModal .tracking-event-text {
	margin-bottom: 4px;
	font-size: 14px;
	line-height: 1.4;
	color: #333;
}

#trackingModal .tracking-event-time {
	font-size: 12px;
	color: #999;
}

#trackingModal .tracking-footer-info {
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid #E0E0E0;
	font-size: 13px;
	color: #666;
}

#trackingModal .tracking-footer-number {
	margin-bottom: 8px;
	font-size: 13px;
	color: #666;
}

#trackingModal .tracking-footer-company {
	display: flex;
	align-items: center;
	font-size: 13px;
	color: #666;
}

#trackingModal .tracking-no-data {
	color: #666;
}

#trackingModal .tracking-error {
	color: #d32f2f;
	line-height: 1.6;
}

#orderActionModal .tracking-result {
	max-height: 60vh;
	overflow: auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
#orderActionModal .tracking-section-title {
	font-weight: 600;
	margin: 6px 0;
}
#orderActionModal .tracking-latest .meta,
#orderActionModal .tracking-item .meta {
	font-size: 13px;
	color: #6b7280;
}
#orderActionModal .tracking-latest .desc,
#orderActionModal .tracking-item .desc {
	font-size: var(--text-body-md);
	color: var(--text-primary);
	margin-top: var(--spacing);
}
#orderActionModal .tracking-item {
	padding: var(--spacing-3) 10px;
	border: 1px solid #EEE;
	border-radius: var(--radius);
}
@media (prefers-color-scheme: dark) {
	#orderActionModal .tracking-item {
		border-color: var(--gray-600);
	}
}

/* =========================================================================
   3. 구독  ========================================================================= */
/* 구독 계약 관리 */
.mypage-table.subscription-contracts-table {
	table-layout: fixed;
	width: 100%;
}
.mypage-table.subscription-contracts-table colgroup .col-th {
	width: 220px; /* th가 있는 컬럼 */
}
.mypage-table.subscription-contracts-table tbody td {
	padding: var(--spacing-4) 23px 14px;
	text-align: left;
}

.mypage-table.subscription-contracts-install-items-table {
	table-layout: fixed;
}
.mypage-table.subscription-contracts-install-items-table colgroup .col-install-address {
	width: 30%;
}
.mypage-table.subscription-contracts-install-items-table tbody td {
	padding: 14px var(--spacing-3) var(--spacing-5);
	font-size: var(--text-body-md);  /* 14px */
	line-height: 1.4285;  /* 20px */
}
.mypage-table.subscription-contracts-install-items-table tbody tr:has(.edit-actions-cell) td {
	padding: 6px var(--spacing-3);
}
.mypage-table.subscription-contracts-install-items-table .install-address-cell {
	position: relative;
}
.mypage-table.subscription-contracts-install-items-table .install-address-input {
	width: 100%;
	box-sizing: border-box;
}
.mypage-table.subscription-contracts-install-items-table .edit-actions-wrapper {
	display: flex;
	align-items: center;
	gap: 4px;
	justify-content: center;
}

.subscription-contracts-tab-content {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-7);
}

/* 구독 계약 셀렉터 스타일 */
.subscription-contracts-selectbox .custom-selectbox-selected {
	min-width: 301px;
	padding: 14px 10px;
}
.subscription-contracts-selectbox .custom-selectbox-selected .custom-selectbox-selected-label {
	min-width: 210px;
	max-width: 243px;
	line-height: 24px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.subscription-contracts-options {
	max-height: 301px;
}

.subscription-contracts-options .custom-selectbox-option {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2);
	padding: var(--spacing-4) var(--spacing-5);
}
/* 셀렉트박스 옵션에 no-data 클래스가 있을 때 스타일 */
.custom-selectbox-option.no-data {
	cursor: default;
	pointer-events: none;
	opacity: 0.6;
}

.subscription-contract-option-row {
	display: flex;
	flex-direction: row;
	gap: 40px;
}

.subscription-contract-label {
	width: 65px;
	flex-shrink: 0;
	font-size: var(--text-body-md);  /* 14px */
	line-height: 1.4285;  /* 20px */
}

.subscription-contract-value {
	flex: 1;
	font-size: var(--text-body-md);  /* 14px */
	line-height: 1.4285;  /* 20px */
}
.subscription-contracts-options .custom-selectbox-option.selected .subscription-contract-label,
.subscription-contracts-options .custom-selectbox-option.selected .subscription-contract-value {
	color: var(--blue-900);
}
/* 인증서 발급 버튼 */
.btn-certificate {
	flex-shrink: 0;
}

/* 설치 위치 수정 모드 스타일 */
.install-address-input {
	padding: 6px 10px;
	font-size: var(--text-body-md);  /* 14px */
	line-height: 1.4285;  /* 20px */
}
/* =========================================================================
   6. 매출 (견적서 발행)  ========================================================================= */
body:has(.mypage-layout) .page-header {
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
	width: auto;
	max-width: var(--max-w);
	padding-top: var(--header-h);
}
.estimate-section .mypage-title-box {
	margin-bottom: 0;
}
.estimate-print-button-wrap {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}

/* 고객 정보 + 사업자 정보 */
.estimate-header {
	display: flex;
	gap: var(--spacing-7);
	width: 100%;
}
/* 고객 정보 - 40% 비율 */
.customer-info-form {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-5);
	width: calc(40% - var(--spacing-4)); /* gap 24px의 절반 */
}
.estimate-input {
	padding: calc(var(--spacing) * 5);
	border-radius: var(--radius-2);
}

/* 사업자 정보 - 60% 비율 */
.business-info-table-wrap {
	flex-shrink: 0;
	width: calc(60% - var(--spacing-4)); /* gap 24px의 절반 */
}

.business-info-table {
	table-layout: fixed;
	width: 100%;
	height: 100%;
	border-right: 1px solid var(--gray-200);
	word-break: break-word;
	white-space: normal;
}
/* 컬럼 너비 설정 - colgroup으로 제어 */
.business-info-table colgroup .col-th {
	width: 120px; /* th가 있는 컬럼 (첫 번째, 세 번째) */
}
.business-info-table th,
.business-info-table td {
	text-align: center;
	word-break: break-word;
	white-space: normal;
}
.business-info-table th.text-left,
.business-info-table td.text-left {
	text-align: left;
}
.business-info-table th {
	padding: var(--spacing-5);
	background-color: var(--gray-100);
	border-top: 1px solid var(--gray-100);
}
.business-info-table td {
	padding: 7px 15px;
	border-top: 1px solid var(--gray-200);
}
.business-info-table th.th-middle {
	border-top: 1px solid var(--gray-200);
	border-bottom: 1px solid var(--gray-100);
}
.business-info-table tbody tr:last-child th {
	border-bottom: 1px solid var(--gray-100);
}
.business-info-table tbody tr:last-child td {
	border-bottom: 1px solid var(--gray-200);
}

/* 제품 추가 모달 */
#addProductModal .modal-body {
	padding-top: calc(var(--spacing) * 9);
    padding-bottom: calc(var(--spacing) * 9);
}
/* 구매 견적서 테이블 */
.estimate-container {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-7);
	padding: var(--spacing-7) 0;
}
.estimate-body-header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.estimate-action-buttons {
	display: flex;
	align-items: center;
	gap: var(--spacing-5);
}
.estimate-action-buttons .btn--tertiary.btn-delete-product .icon path {
	stroke: var(--text-primary);
}
.estimate-action-buttons .btn--tertiary.btn-delete-product:hover .icon path {
	stroke: var(--secondary);
}

/* 견적서 전용 스타일 */
#estimateExtraProductsList.extra-products-container:empty {
	margin-top: -24px;
}
#estimateExtraProductsList .extra-product-item {
    padding: 0;
}

/* =========================================================================
   7. 계정  ========================================================================= */
/* 회원 정보 */
.mypage-table.user-info-table colgroup .col-th {
	width: 220px; /* th가 있는 컬럼 */
}
.mypage-table.user-info-table tbody th {
	padding: 12.5px 23px 14.5px;
}
.mypage-table.user-info-table tbody td {
	padding: 5px 23px;
	text-align: left;
}
.mypage-table.user-info-table tbody td .flex-wrapper {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--spacing-7);
}
.mypage-table.user-info-table tbody td .form-input {
	padding: 6px 10px;
}
.user-info-table-btn {
	padding: 9px 15px;
}

/* 포인트 */
.card-layout {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: var(--spacing-7);
}

.card-layout .card {
	width: 50%;
	border-radius: var(--radius-3);
}

.card-layout .card:nth-of-type(2) .value-link {
	justify-content: flex-end;
}

.point-positive {
	font-size: var(--text-body-lg);
	font-weight: 600;
	line-height: var(--text-heading-md);
	color: var(--primary);
}

.point-negative {
	font-size: var(--text-body-lg);
	font-weight: 600;
	line-height: var(--text-heading-md);
	color: var(--text-primary);
}

.point-description li {
	position: relative;
	padding-left: 20.64px; /* 커스텀 불렛 공간 확보 */
	font-size: var(--text-body-md);
	line-height: 1.4285;
	color: var(--text-third);
}

/* 커스텀 불렛 "·" 추가 */
.point-description li::before {
	content: "•";
	position: absolute;
	left: var(--spacing-3);
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.point-history-unit {
	margin-left: 2px;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}

/* 출금 버튼 아이콘 크기 조절 (포인트 페이지 모달 내부) */
.card-layout .btn svg, 
#accountModal .btn svg,
#withdrawHistoryModal .btn svg {
	width: var(--spacing-7) !important;
	height: var(--spacing-7) !important;
}

/* 포인트 입력 관련 스타일 */
.order-point-box {
	gap: var(--spacing-5);
}

.order-point-input-box {
	position: relative;
	width: 100%;
}

/* render_input의 label 숨기기 */
.input-point-text .label {
	display: none;
}

.point-label {
	position: absolute;
	top: 50%;
	left: var(--spacing-5);
	transform: translateY(-50%);
	margin-top: 1px;
	font-size: var(--text-body-lg);
	font-weight: 500;
	line-height: 1.4285;
	color: #9ca3af;
	z-index: 2;
	pointer-events: none;
}

.input-point-text .form-input {
	position: relative;
	padding-left: 90px;
	padding-right: 65px;
	font-size: var(--text-body-lg);
	font-weight: 600;
	line-height: 1.3333;
	text-align: right;
	color: var(--primary);
	z-index: 1;
}

.input-point-text .form-input::placeholder {
	font-weight: 400;
}

.point-unit {
	position: absolute;
	top: 50%;
	right: 50px;
	transform: translateY(-50%);
	font-size: var(--text-body-lg);
	font-weight: 500;
	line-height: 1.4285;
	z-index: 2;
	pointer-events: none;
}

.btn-point-reset {
	position: absolute;
	top: 50%;
	right: var(--spacing-5);
	transform: translateY(-50%);
	width: var(--spacing-7);
	height: var(--spacing-7);
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn-point-reset svg {
	width: var(--spacing-7);
	height: var(--spacing-7);
}

/* 포인트 페이지: 모든 컬럼 균일 */
.mypage-table-point {
	table-layout: fixed;
	width: 100%;
	min-width: 640px; /* 세 컬럼 각 최소 150px */
}

.mypage-table-point th,
.mypage-table-point td {
	width: 33.33%;
	min-width: 150px;
}

/* 활동 페이지: 제목 컬럼(3번째) 제외하고 균일 */
.mypage-table-activity th:nth-child(1),
.mypage-table-activity td:nth-child(1),
.mypage-table-activity th:nth-child(2),
.mypage-table-activity td:nth-child(2),
.mypage-table-activity th:nth-child(4),
.mypage-table-activity td:nth-child(4) {
	width: 160px;
	min-width: 160px;
}

/* 제목 컬럼(3번째)은 나머지 공간을 모두 차지 */
.mypage-table-activity th:nth-child(3),
.mypage-table-activity td:nth-child(3) {
	width: auto;
	min-width: 160px;
}

/* =========================================================================
   Breakpoints  ========================================================================= */
@media (max-width: 1440px) {
	.mypage-layout {
		padding: calc(var(--spacing-9) * 2) var(--spacing-5);
	}
}

@media (max-width: 1024px) {
	.pc-sidebar.mypage-sidebar {
		background: var(--pc-sidebar-background);
	}
}