/* ========================================
   조건 비교 모달 (상세페이지 스타일)
   분리일: 2026-02-03
   원본: shop/view.php
   ======================================== */

/* 모달 오버레이 */
.compare-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

/* 모달 */
.compare-modal {
	font-family: -apple-system, BlinkMacSystemFont, "Pretendard", "Segoe UI", sans-serif;
	background: #f5f5f5;
	width: 100%;
	max-width: 520px;
	max-height: 90vh;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0,0,0,0.3);
	animation: modalFadeIn 0.25s ease;
	display: flex;
	flex-direction: column;
}
@keyframes modalFadeIn {
	from { opacity: 0; transform: scale(0.95); }
	to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.compare-modal { animation: none; }
}

/* 모달 헤더 */
.compare-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px 16px;
	background: #fff;
	border-bottom: 1px solid #eee;
	flex-shrink: 0;
}
.compare-modal-header h3 {
	font-size: 16px;
	font-weight: 700;
	margin: 0;
	color: #222;
}

/* 탭 버튼 */
.compare-modal-tabs {
	display: flex;
	border-bottom: 1px solid #eee;
	background: #fff;
	flex-shrink: 0;
}
.compare-modal-tabs .tab-btn {
	flex: 1;
	padding: 12px 16px;
	font-size: 14px;
	font-weight: 500;
	color: #888;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	transition: all 0.2s ease;
}
.compare-modal-tabs .tab-btn:hover {
	color: #333;
}
.compare-modal-tabs .tab-btn.active {
	color: #007aff;
	border-bottom-color: #007aff;
}

/* 탭 버튼 래퍼 */
.tab-btn-wrap {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.tab-btn-wrap .tab-btn {
	width: 100%;
}

/* 탭 아래 말풍선 */
.tab-tooltip {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 8px;
	z-index: 10;
}
.tab-tooltip-content {
	background: #333;
	color: #fff;
	font-size: 12px;
	padding: 8px 12px;
	border-radius: 6px;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.tab-tooltip-arrow {
	position: absolute;
	top: -6px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 6px solid #333;
}

/* 위로 표시되는 말풍선 */
.tab-tooltip.tooltip-top {
	top: auto;
	bottom: 100%;
	margin-top: 0;
	margin-bottom: 8px;
}
.tab-tooltip.tooltip-top .tab-tooltip-arrow {
	top: auto;
	bottom: -6px;
	border-bottom: none;
	border-top: 6px solid #333;
}

/* 탭 C: 스마트 요금 계산 */
.smart-calc-intro {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-left: 4px solid #3617ce;
	padding: 14px 16px;
	border-radius: 8px;
	margin-bottom: 16px;
	position: relative;
}
.smart-calc-intro::before {
	content: "💡";
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 18px;
}
.smart-calc-intro .intro-text {
	color: #334155;
	font-size: 13px;
	line-height: 1.6;
	margin: 0;
	padding-left: 28px;
}
.smart-calc-intro .intro-text strong {
	color: #3617ce;
	font-weight: 700;
}

.smart-selector {
	margin-bottom: 16px;
}
.smart-selector .selector-group {
	margin-bottom: 12px;
}
.smart-selector .selector-label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: #666;
	margin-bottom: 8px;
}
.smart-selector .plan-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.smart-selector .plan-btn {
	padding: 8px 12px;
	font-size: 11px;
	border: 1px solid #ddd;
	border-radius: 6px;
	background: #fff;
	color: #333;
	cursor: pointer;
	transition: all 0.2s;
}
.smart-selector .plan-btn:hover {
	border-color: #007aff;
	color: #007aff;
}
.smart-selector .plan-btn.active {
	background: #007aff;
	border-color: #007aff;
	color: #fff;
}

.smart-compare-cards {
	display: flex;
	gap: 10px;
	margin-bottom: 16px;
}
.smart-card {
	flex: 1;
	background: #f8f9fa;
	border-radius: 10px;
	padding: 14px;
	border: 2px solid #e9ecef;
}
.smart-card.primary {
	background: #f0f7ff;
	border-color: #007aff;
}
.smart-card .card-badge {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #64748b;
	border: 1px solid #cbd5e1;
	padding: 4px 8px;
	border-radius: 4px;
	margin-bottom: 10px;
	background: transparent;
}
.smart-card.primary .card-badge {
	color: #3617ce;
	border-color: #3617ce;
	background: rgba(54, 23, 206, 0.04);
}

.smart-period-block {
	background: #fff;
	border-radius: 6px;
	padding: 10px;
	margin-bottom: 8px;
}
.smart-period-block .period-title {
	font-size: 11px;
	font-weight: 600;
	color: #333;
	margin-bottom: 8px;
	padding-bottom: 6px;
	border-bottom: 1px solid #eee;
}
.smart-period-block .period-title span {
	font-weight: 500;
	color: #007aff;
}
.smart-period-block .period-detail .detail-row {
	display: flex;
	justify-content: space-between;
	padding: 3px 0;
	font-size: 11px;
}
.smart-period-block .period-detail .detail-row .label {
	color: #888;
}
.smart-period-block .period-detail .detail-row .value {
	color: #333;
	font-weight: 500;
}
.smart-period-block .period-detail .detail-row.total {
	margin-top: 4px;
	padding-top: 6px;
	border-top: 1px dashed #ddd;
}
.smart-period-block .period-detail .detail-row.total .label {
	font-weight: 600;
	color: #333;
}
.smart-period-block .period-detail .detail-row.total .value {
	font-weight: 700;
	color: #007aff;
}
.smart-period-block.full {
	margin-bottom: 0;
}

.smart-card .card-total-section {
	background: #fff;
	border-radius: 6px;
	padding: 10px;
}
.smart-card .total-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.smart-card .total-row .label {
	font-size: 12px;
	color: #666;
}
.smart-card .total-row .value {
	font-size: 16px;
	font-weight: 700;
	color: #333;
}
.smart-card.primary .total-row .value {
	color: #007aff;
}

.smart-result {
	background: linear-gradient(135deg, #3617ce 0%, #5b3ff5 100%);
	border-radius: 12px;
	padding: 16px 20px;
	text-align: center;
	box-shadow: 0 4px 12px rgba(54, 23, 206, 0.25);
}
.smart-result .result-winner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
.smart-result .winner-badge {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	padding: 5px 12px;
	border-radius: 20px;
	backdrop-filter: blur(4px);
}
.smart-result .winner-text {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.9);
}
.smart-result .winner-text strong {
	color: #fff;
	font-size: 18px;
	font-weight: 800;
}

.btn-close-modal {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: #f0f0f0;
	border: none;
	border-radius: 50%;
	color: #666;
	cursor: pointer;
}
.btn-close-modal:hover { background: #e0e0e0; }
.btn-close-modal:focus-visible { outline: 2px solid #3617ce; outline-offset: 2px; }

/* 모달 바디 */
.compare-modal-body {
	padding: 16px;
	overflow-y: auto;
	overscroll-behavior: contain;
	flex: 1;
}

/* 비교 조건 선택 영역 */
.compare-selector {
	background: #fff;
	border-radius: 10px;
	padding: 14px;
	margin-bottom: 16px;
}
.compare-selector.compact {
	display: flex;
	gap: 8px;
	align-items: flex-end;
}
.compare-selector.compact .selector-row {
	flex: 1;
	margin-bottom: 0;
}
.compare-selector.compact .selector-row:first-child {
	flex: 2;
}
.compare-modal .selector-row {
	margin-bottom: 12px;
}
.compare-modal .selector-row:last-child { margin-bottom: 0; }
.compare-modal .selector-label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	color: #666;
	margin-bottom: 4px;
}

/* 셀렉트 박스 */
.compare-modal .selector-select {
	width: 100%;
	padding: 8px 24px 8px 8px;
	font-size: 13px;
	border: 1px solid #ddd;
	border-radius: 6px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 8px center;
	appearance: none;
	cursor: pointer;
	color: #333;
}
.compare-modal .selector-select:focus { outline: none; border-color: #3617ce; }

/* 버튼 그룹 (탭 C 요금제 버튼용) */
.compare-modal .selector-buttons { display: flex; gap: 8px; }
.compare-modal .sel-btn {
	flex: 1;
	padding: 10px 8px;
	font-size: 13px;
	font-weight: 500;
	border: 1px solid #ddd;
	border-radius: 6px;
	background: #fff;
	color: #333;
	cursor: pointer;
	text-align: center;
	transition: all 0.15s ease;
}
.compare-modal .sel-btn:hover { border-color: #3617ce; }
.compare-modal .sel-btn:focus-visible { outline: 2px solid #3617ce; outline-offset: 2px; }
.compare-modal .sel-btn.active {
	background: #3617ce;
	color: #fff;
	border-color: #3617ce;
}

/* 비교 카드 컨테이너 */
.compare-cards-wrap {
	display: flex;
	gap: 12px;
}

/* 가격 카드 */
.price-card {
	flex: 1;
	background: #fff;
	border-radius: 10px;
	padding: 16px;
	border: 1px solid #e5e5e5;
}
.price-card.original {
	border-color: #3617ce;
	border-width: 2px;
}

/* 카드 배지 */
.price-card .card-badge {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #64748b;
	background: transparent;
	border: 1px solid #cbd5e1;
	padding: 4px 8px;
	border-radius: 4px;
	margin-bottom: 10px;
}
.price-card.original .card-badge {
	color: #3617ce;
	border-color: #3617ce;
	background: rgba(54, 23, 206, 0.04);
}
.price-card.changed .card-badge {
	color: #059669;
	border-color: #059669;
	background: rgba(5, 150, 105, 0.04);
}

/* 탭 B 선택 영역 */
.future-selector {
	background: #fff;
	border-radius: 10px;
	padding: 12px;
	margin-bottom: 12px;
	border: 1px solid #e5e5e5;
}

/* 카드 타이틀 */
.price-card .card-title {
	margin-bottom: 4px;
}
.price-card .card-title .telecom {
	display: block;
	font-size: 12px;
	color: #3617ce;
	font-weight: 500;
	margin-bottom: 2px;
}
.price-card .card-title .device {
	display: block;
	font-size: 16px;
	font-weight: 700;
	color: #222;
}
.price-card .card-plan {
	font-size: 13px;
	color: #333;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid #eee;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.price-card .card-plan .plan-sub {
	font-size: 11px;
	color: #8e8e93;
	background: #f2f2f7;
	padding: 2px 8px;
	border-radius: 4px;
}
.price-card .card-plan-data {
	font-size: 12px;
	color: #666;
	margin-top: -12px;
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid #eee;
}
.price-card .card-plan-data span {
	margin-right: 10px;
}
.price-card .card-plan-data i {
	margin-right: 3px;
	color: #8e8e93;
}

/* 가격 행 */
.price-card .card-rows {
	margin-bottom: 12px;
}
.price-card .row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 3px 0;
	font-size: 13px;
}
.price-card .row .label {
	color: #666;
}
.price-card .row .label small {
	display: block;
	font-size: 11px;
	color: #999;
}
.price-card .row .value {
	color: #222;
	font-weight: 500;
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.price-card .row .value small {
	color: #999;
	font-weight: 400;
	font-size: 11px;
	margin-right: 2px;
}
.price-card .row.discount .value {
	color: #e53935;
}
.price-card .row.highlight {
	background: #f8f8f8;
	margin: 0 -8px;
	padding: 8px;
	border-radius: 4px;
}
.price-card .row.highlight .value {
	color: #3617ce;
	font-weight: 700;
}
.price-card .row-divider {
	height: 1px;
	background: #eee;
	margin: 8px 0;
}

/* 월 납부금액 */
.price-card .card-total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0 0;
	border-top: 1px solid #ddd;
	margin-top: 4px;
}
.price-card .card-total .label {
	font-size: 13px;
	font-weight: 600;
	color: #222;
}
.price-card .card-total .value {
	text-align: right;
}
.price-card .card-total .value small {
	font-size: 12px;
	color: #666;
}
.price-card .card-total .value strong {
	font-size: 22px;
	font-weight: 800;
	color: #3617ce;
	font-variant-numeric: tabular-nums;
}
.price-card.changed .card-total .value strong {
	color: #e53935;
}

/* 모달 푸터 */
.compare-modal-footer {
	display: flex;
	gap: 8px;
	padding: 12px;
	padding-bottom: calc(12px + env(safe-area-inset-bottom));
	background: #fff;
	flex-shrink: 0;
}
.btn-keep-original {
	flex: 1;
	padding: 12px 14px;
	font-size: 15px;
	font-weight: 400;
	border: none;
	border-radius: 10px;
	background: #f2f2f7;
	color: #3617ce;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.btn-keep-original:hover {
	background: #e5e5ea;
}
.btn-keep-original:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px rgba(54, 23, 206, 0.3);
}
.btn-apply-changed {
	flex: 1;
	padding: 12px 14px;
	font-size: 15px;
	font-weight: 600;
	border: none;
	border-radius: 10px;
	background: #3617ce;
	color: #fff;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.btn-apply-changed:hover:not(:disabled) {
	background: #2a11a8;
}
.btn-apply-changed:active:not(:disabled) {
	background: #1f0d8a;
}
.btn-apply-changed:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px rgba(54, 23, 206, 0.3);
}
.btn-apply-changed:disabled {
	background: #c7c7cc;
	cursor: not-allowed;
}

/* ---- 비교하기 트리거 버튼 ---- */
.btn-pack.xlarge.focus4 {
	position: relative;
	background: linear-gradient(180deg, #fafafa 0%, #f0f0f0 100%);
	color: #1a1a1a;
	border: 1px solid rgba(0,0,0,0.12);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: -0.01em;
	box-shadow: 0 1px 2px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.8);
	transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.btn-pack.xlarge.focus4:hover {
	background: linear-gradient(180deg, #fff 0%, #f5f5f5 100%);
	border-color: #3617ce;
	box-shadow: 0 2px 8px rgba(54,23,206,0.12), inset 0 1px 0 rgba(255,255,255,0.9);
	color: #3617ce;
}
.btn-pack.xlarge.focus4:active {
	transform: translateY(1px);
	box-shadow: 0 0 0 rgba(0,0,0,0), inset 0 1px 3px rgba(0,0,0,0.1);
}
.btn-pack.xlarge.focus4:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(54,23,206,0.25), 0 1px 2px rgba(0,0,0,0.04);
}
@media (prefers-reduced-motion: reduce) {
	.btn-pack.xlarge.focus4 {
		transition: none;
	}
}

/* ========================================
   작은 화면 최적화 (5.9인치 이하)
   ======================================== */

/* 모바일 화면 미디어 쿼리 */
@media screen and (max-width: 600px) {
	/* 전체 화면 모달 */
	.compare-modal-overlay {
		padding: 0;
		align-items: stretch;
	}
	.compare-modal {
		max-width: 100%;
		max-height: 100%;
		height: 100%;
		border-radius: 0;
	}
	
	/* 컴팩트 헤더 */
	.compare-modal-header {
		padding: 12px 14px;
	}
	.compare-modal-header h3 {
		font-size: 15px;
	}
	
	/* 컴팩트 탭 */
	.compare-modal-tabs .tab-btn {
		padding: 10px 8px;
		font-size: 13px;
	}
	
	/* 컴팩트 바디 */
	.compare-modal-body {
		padding: 8px !important;
	}
	
	/* 컴팩트 카드 */
	.compare-cards-wrap {
		gap: 6px;
	}
	.price-card {
		padding: 10px;
	}
	.price-card .card-badge {
		font-size: 9px;
		padding: 3px 6px;
		margin-bottom: 8px;
	}
	.price-card .card-title .device {
		font-size: 14px;
	}
	.price-card .card-plan {
		font-size: 12px;
		margin-bottom: 12px;
		padding-bottom: 10px;
	}
	.price-card .card-plan .plan-sub {
		font-size: 10px;
		padding: 2px 6px;
	}
	
	/* 컴팩트 가격 행 */
	.price-card .row {
		font-size: 12px;
		padding: 2px 0;
	}
	.price-card .row .label small {
		font-size: 10px;
	}
	.price-card .row .value small {
		font-size: 10px;
	}
	.price-card .row.highlight {
		margin: 0 -6px;
		padding: 6px;
	}
	
	/* 컴팩트 합계 */
	.price-card .card-total {
		padding: 10px 0 0;
	}
	.price-card .card-total .label {
		font-size: 12px;
	}
	.price-card .card-total .value strong {
		font-size: 16px;
	}
	.price-card .card-total .value small {
		font-size: 11px;
	}
	
	/* 컴팩트 푸터 */
	.compare-modal-footer {
		padding: 12px;
		gap: 8px;
	}
	.compare-modal-footer button {
		padding: 10px 12px;
		font-size: 14px;
	}
}

/* 아주 작은 화면 (360px 이하) */
@media screen and (max-width: 360px) {
	.compare-modal-body {
		padding: 6px !important;
	}
	.compare-cards-wrap {
		gap: 4px;
	}
	.price-card {
		padding: 8px;
	}
	.price-card .card-title .device {
		font-size: 13px;
	}
	.price-card .row {
		font-size: 11px;
	}
	.price-card .card-total .value strong {
		font-size: 14px;
	}
}