/* -----------------------------------------------------------
   Suburi Telecom - 메인 디자인 스타일시트
   목차
   1. 레이아웃 공통
   2. 버튼 / 배지
   3. 헤더 & 내비게이션
   4. 히어로
   5. 섹션 공통 / 왜 수부리통신인가
   6. 개통 절차
   7. 요금제
   8. 유심구매
   9. FAQ 아코디언
   10. 상담 CTA
   11. 푸터
   12. 블로그/글/페이지 공통 템플릿
   13. 전체 요금제 페이지
   14. 접근성 및 반응형
----------------------------------------------------------- */

/* 1. 레이아웃 공통 */
.container {
	width: 100%;
	max-width: var(--container-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}

.section {
	padding: 80px 0;
}

.section-light {
	background-color: var(--color-white);
}

.section-tint {
	background-color: var(--color-primary-soft);
}

.section-header {
	text-align: center;
	max-width: 680px;
	margin: 0 auto 48px;
}

.section-eyebrow {
	display: inline-block;
	color: var(--color-primary);
	font-weight: 700;
	font-size: 0.9rem;
	letter-spacing: 0.04em;
	margin-bottom: 12px;
}

.section-title {
	font-size: clamp(1.9rem, 4vw, 2.6rem);
	color: var(--color-primary-dark);
	font-weight: 800;
	line-height: 1.3;
}

.section-desc {
	margin-top: 14px;
	color: var(--color-text-muted);
	font-size: 1.05rem;
}

/* 2. 버튼 / 배지 */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 28px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 1rem;
	border: 2px solid transparent;
	text-decoration: none;
	transition: transform var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base);
	white-space: nowrap;
}

.btn:hover,
.btn:focus-visible {
	transform: translateY(-2px);
}

.btn-primary {
	background-color: var(--color-primary);
	color: var(--color-white);
	box-shadow: var(--shadow-button);
}

.btn-primary:hover,
.btn-primary:focus-visible {
	background-color: #5c2ee0;
	color: var(--color-white);
}

.btn-outline {
	background-color: transparent;
	color: var(--color-primary-dark);
	border-color: var(--color-primary-light);
}

.btn-outline:hover,
.btn-outline:focus-visible {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.btn-kakao {
	background-color: var(--color-kakao);
	color: var(--color-kakao-text);
	box-shadow: 0 10px 24px rgba(254, 229, 0, 0.35);
}

.btn-kakao:hover,
.btn-kakao:focus-visible {
	background-color: #ffe000;
	color: var(--color-kakao-text);
}

.btn-block {
	width: 100%;
}

.btn-sm {
	padding: 10px 20px;
	font-size: 0.9rem;
}

/* 3. 헤더 & 내비게이션 */
.site-header {
	position: sticky;
	top: 0;
	z-index: 500;
	background-color: rgba(255, 255, 255, 0.94);
	backdrop-filter: saturate(180%) blur(8px);
	border-bottom: 1px solid transparent;
	transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.site-header.is-scrolled {
	background-color: var(--color-white);
	border-bottom-color: var(--color-border);
	box-shadow: 0 4px 16px rgba(23, 18, 59, 0.06);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 14px;
	padding-bottom: 14px;
}

.site-branding {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 10px;
	min-width: 0;
}

.site-brand-name {
	font-size: clamp(0.86rem, 4.2vw, 1.2rem);
	font-weight: 800;
	color: var(--color-primary-dark);
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.custom-logo-link img {
	max-height: 48px;
	width: auto;
}

.header-mobile-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.header-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	background-color: var(--color-white);
	color: var(--color-primary-dark);
	flex-shrink: 0;
}

.header-icon-btn svg {
	width: 18px;
	height: 18px;
}

.header-icon-kakao {
	background-color: var(--color-kakao);
	color: var(--color-kakao-text);
	border-color: var(--color-kakao);
}

.main-navigation {
	display: none;
}

.nav-menu {
	display: flex;
	align-items: center;
	gap: 28px;
}

.nav-menu a {
	font-weight: 600;
	color: var(--color-text);
	padding: 8px 2px;
	position: relative;
}

.nav-menu a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background-color: var(--color-primary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--transition-base);
}

.nav-menu a:hover::after,
.nav-menu a:focus-visible::after {
	transform: scaleX(1);
}

.header-cta {
	display: none;
	align-items: center;
	gap: 10px;
}

.menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background-color: var(--color-white);
	flex-shrink: 0;
}

.hamburger-icon,
.hamburger-icon::before,
.hamburger-icon::after {
	display: block;
	width: 20px;
	height: 2px;
	background-color: var(--color-primary-dark);
	position: relative;
	transition: transform var(--transition-base), opacity var(--transition-base);
}

.hamburger-icon::before,
.hamburger-icon::after {
	content: "";
	position: absolute;
	left: 0;
}

.hamburger-icon::before {
	top: -6px;
}

.hamburger-icon::after {
	top: 6px;
}

.menu-toggle[aria-expanded="true"] .hamburger-icon {
	background-color: transparent;
}

.menu-toggle[aria-expanded="true"] .hamburger-icon::before {
	top: 0;
	transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .hamburger-icon::after {
	top: 0;
	transform: rotate(-45deg);
}

/* 기본값은 항상 펼쳐진 상태 - JavaScript가 꺼져 있어도 모바일 메뉴 링크를
   그대로 사용할 수 있습니다. <html class="js"> 가 붙었을 때만(=JS 정상 동작 시)
   접었다 펼치는 햄버거 메뉴로 전환됩니다. */
.mobile-nav-panel {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 20px 24px;
	border-top: 1px solid var(--color-border);
	background-color: var(--color-white);
}

html.js .mobile-nav-panel {
	display: none;
}

html.js .mobile-nav-panel.is-open {
	display: flex;
}

.mobile-nav-panel .nav-menu {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.mobile-nav-panel .nav-menu a {
	display: block;
	padding: 14px 4px;
	border-bottom: 1px solid var(--color-border);
}

.mobile-nav-cta {
	margin-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* 4. 히어로 */
.hero {
	position: relative;
	background: linear-gradient(120deg, #ede4ff 0%, #f8f6ff 45%, var(--color-white) 75%);
	padding: 40px 0 48px;
	overflow: hidden;
	isolation: isolate;
}

.hero-inner-v2 {
	max-width: 1040px;
	margin: 0 auto;
}

.hero-grid {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	justify-items: center;
}

.hero-copy {
	text-align: center;
	max-width: 720px;
}

.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background-color: var(--color-white);
	border: 1px solid var(--color-primary-light);
	color: var(--color-primary);
	font-weight: 700;
	font-size: 0.85rem;
	padding: 8px 16px;
	border-radius: 999px;
	margin-bottom: 20px;
	box-shadow: 0 6px 16px rgba(111, 61, 255, 0.12);
}

.hero-title {
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-width: 780px;
	margin: 0 auto;
	font-size: clamp(2.15rem, 8vw, 4.4rem);
	font-weight: 900;
	color: var(--color-primary-dark);
	line-height: 1.14;
	letter-spacing: -0.02em;
}

.hero-title span {
	display: block;
	white-space: nowrap;
}

.hero-title .highlight {
	background: linear-gradient(95deg, #6f3dff 20%, #9a6bff 80%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hero-sub {
	margin: 16px auto 0;
	max-width: 560px;
	font-size: clamp(1.05rem, 2.2vw, 1.25rem);
	font-weight: 700;
	line-height: 1.5;
	color: var(--color-text);
}

.hero-sub .num {
	color: var(--color-primary);
}

.hero-pulse-btn {
	animation: hero-pulse-glow 2.6s ease-in-out infinite;
}

.hero-pulse-btn:hover,
.hero-pulse-btn:focus-visible {
	transform: translateY(-2px) scale(1.02);
}

@keyframes hero-pulse-glow {
	0%,
	100% {
		box-shadow: var(--shadow-button), 0 0 0 0 rgba(111, 61, 255, 0.35);
	}
	50% {
		box-shadow: var(--shadow-button), 0 0 0 10px rgba(111, 61, 255, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-pulse-btn {
		animation: none;
	}
}

.hero-actions {
	margin-top: 22px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.hero-badges {
	margin-top: 24px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.hero-badges li {
	background-color: var(--color-white);
	border: 1px solid var(--color-primary-light);
	color: var(--color-primary-dark);
	font-weight: 600;
	font-size: 0.82rem;
	padding: 6px 14px;
	border-radius: 999px;
}

/* 어떻게 시작할까요 - 선택 카드 */
.start-card {
	margin-top: 28px;
	margin-left: auto;
	margin-right: auto;
	max-width: 1080px;
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: 24px 20px;
}

.start-card-title {
	text-align: center;
	font-size: clamp(1.6rem, 3vw, 1.9rem);
	font-weight: 800;
	color: var(--color-primary-dark);
	margin-bottom: 6px;
}

.start-card-subtitle {
	text-align: center;
	color: var(--color-text-muted);
	font-size: 0.94rem;
	margin-bottom: 20px;
}

.choice-grid {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
}

.choice-card {
	border: 1.5px solid var(--color-primary-light);
	border-radius: var(--radius-md);
	padding: 22px 22px;
	background-color: var(--color-white);
	display: flex;
	flex-direction: column;
}

.choice-card-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.choice-icon {
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border-radius: 50%;
	background-color: var(--color-primary-soft);
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
}

.choice-icon svg {
	width: 20px;
	height: 20px;
}

.choice-title {
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--color-primary-dark);
}

.choice-desc {
	color: var(--color-text-muted);
	font-size: 0.94rem;
	line-height: 1.7;
	margin-bottom: 18px;
}

.choice-card > .btn {
	margin-top: auto;
	font-size: 1.08rem;
}

.choice-actions {
	display: flex;
	flex-direction: row;
	gap: 10px;
	margin-top: auto;
}

.choice-actions .btn {
	flex: 1 1 0;
	font-size: 1.08rem;
}

.choice-card .btn,
.choice-actions .btn {
	width: 100%;
	white-space: normal;
	text-align: center;
	line-height: 1.3;
	padding: 17px 24px;
}

/* 5. 섹션 헤더 보조 (제목+버튼 가로 배치) */
.section-header-split {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
	margin-bottom: 48px;
	text-align: left;
}

.section-header-split .section-header,
.section-header-split > div {
	text-align: left;
	margin: 0;
}

.section-header-split .btn {
	white-space: nowrap;
}

/* 6. 개통 절차 (홈 8단계 카드) */
.activation-home-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: 16px;
}

@media (min-width: 640px) {
	.activation-home-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.activation-home-card {
	background-color: var(--color-white);
	border: 1px solid var(--color-primary-light);
	border-radius: var(--radius-md);
	padding: 22px 20px;
	box-shadow: var(--shadow-card);
}

.activation-home-card-wide {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 16px;
	background-color: var(--color-primary-dark);
	border-color: var(--color-primary-dark);
}

.activation-home-card-wide .activation-home-num {
	width: 34px;
	height: 34px;
	font-size: 0.98rem;
	background-color: var(--color-white);
	color: var(--color-primary-dark);
	flex-shrink: 0;
}

.activation-home-card-wide .activation-home-title {
	color: var(--color-white);
	margin-bottom: 2px;
}

.activation-home-card-wide .activation-home-desc {
	color: rgba(255, 255, 255, 0.7);
}

.activation-home-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}

.activation-home-num {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: var(--color-primary);
	color: var(--color-white);
	font-weight: 800;
	font-size: 0.95rem;
}

.activation-home-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-primary);
}

.activation-home-icon svg {
	width: 22px;
	height: 22px;
}

.activation-home-title {
	font-size: 1.02rem;
	font-weight: 800;
	color: var(--color-primary-dark);
	margin-bottom: 6px;
	word-break: keep-all;
}

.activation-home-desc {
	color: var(--color-text-muted);
	font-size: 0.88rem;
	line-height: 1.6;
	word-break: keep-all;
	overflow-wrap: break-word;
}

/* 개통 절차 상세 페이지 (/steps/) STEP 1~8 카드 */
.activation-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: 16px;
}

.activation-followup-grid {
	align-items: stretch;
	margin-top: 14px;
}

.activation-followup-card {
	height: 100%;
}

.activation-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: 18px;
	box-shadow: var(--shadow-card);
}

.activation-image-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 18px;
	overflow: hidden;
	background-color: var(--color-primary-soft);
}

.activation-image {
	display: block;
	width: 220px;
	height: 275px;
	object-fit: contain;
	border-radius: 14px;
	box-shadow: 0 12px 24px rgba(23, 18, 59, 0.16), 0 1px 0 rgba(23, 18, 59, 0.04);
	border: 1px solid var(--color-border);
}

.activation-image-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	aspect-ratio: 3 / 4;
	max-height: 420px;
	color: var(--color-primary);
	background-color: var(--color-white);
	border: 1px dashed var(--color-primary-light);
	border-radius: var(--radius-sm);
}

.activation-image-placeholder svg {
	width: 40px;
	height: 40px;
}

.activation-image-placeholder span {
	color: var(--color-text-muted);
	font-size: 0.82rem;
	font-weight: 600;
}

.image-load-error {
	width: 100%;
	text-align: center;
	color: var(--color-text-muted);
	font-size: 0.82rem;
	padding: 24px 12px;
}

.activation-body {
	display: flex;
	flex-direction: column;
	padding: 18px 20px;
}

.activation-grid:not(.activation-followup-grid) .activation-title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.activation-grid:not(.activation-followup-grid) .activation-desc {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.activation-badge {
	align-self: flex-start;
	background-color: var(--color-primary);
	color: var(--color-white);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	padding: 3px 11px;
	border-radius: 999px;
	margin-bottom: 8px;
}

.activation-badge-muted {
	background-color: var(--color-text-muted);
}

.activation-title {
	font-size: 1rem;
	font-weight: 800;
	color: var(--color-primary-dark);
	margin-bottom: 5px;
	word-break: keep-all;
}

.activation-desc {
	color: #4b4458;
	font-size: 0.88rem;
	line-height: 1.6;
	word-break: keep-all;
	overflow-wrap: break-word;
}

.activation-note {
	margin-top: 6px;
	color: var(--color-text-muted);
	font-size: 0.8rem;
	line-height: 1.55;
	word-break: keep-all;
}

.activation-actions {
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.activation-actions .btn {
	width: 100%;
	white-space: normal;
	text-align: center;
}

/* 7. 요금제 (K망/L망 탭 + 카드) */
.plan-tabs-row {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 12px;
	margin-bottom: 28px;
}

.plan-view-all-inline {
	grid-column: 3;
	justify-self: end;
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--color-primary-dark);
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	padding: 12px 20px;
	border-radius: 999px;
	white-space: nowrap;
}

.plan-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-bottom: 28px;
	max-width: 100%;
}

.plan-tabs-row .plan-tabs {
	grid-column: 2;
	margin-bottom: 0;
}

@media (max-width: 560px) {
	.plan-tabs-row {
		grid-template-columns: 1fr;
		justify-items: center;
	}

	.plan-tabs-row .plan-tabs {
		grid-column: 1;
	}

	.plan-view-all-inline {
		grid-column: 1;
		justify-self: center;
	}
}

.plan-tab {
	flex: 0 1 auto;
	max-width: 100%;
	background-color: var(--color-white);
	border: 1.5px solid var(--color-border);
	color: var(--color-text-muted);
	font-weight: 800;
	font-size: 1.05rem;
	padding: 14px 30px;
	border-radius: 999px;
	white-space: nowrap;
}

.plan-tab.is-active {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}

.plan-panel-label {
	text-align: center;
	font-weight: 700;
	color: var(--color-primary-dark);
	margin-bottom: 16px;
}

html.js .plan-panel-label {
	display: none;
}

.plan-grid-v2 {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: stretch;
	justify-content: center;
	gap: 16px;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
}

@media (min-width: 700px) {
	.plan-grid-v2 {
		grid-template-columns: repeat(var(--plan-count, 3), minmax(0, 1fr));
	}
}

.plan-card-v2 {
	position: relative;
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 24px 20px;
	box-shadow: var(--shadow-card);
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 0;
}

.plan-badge {
	align-self: flex-start;
	background-color: var(--color-primary-light);
	color: var(--color-primary);
	font-size: 0.72rem;
	font-weight: 800;
	padding: 4px 10px;
	border-radius: 999px;
	margin-bottom: 12px;
}

.plan-badge-best {
	background-color: var(--color-primary);
	color: var(--color-white);
}

.plan-name {
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--color-primary-dark);
	overflow-wrap: break-word;
	word-break: keep-all;
}

.plan-desc {
	color: var(--color-text-muted);
	font-size: 0.92rem;
	margin-top: 6px;
	margin-bottom: 14px;
	flex-grow: 1;
	overflow-wrap: break-word;
	word-break: keep-all;
}

.plan-price {
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--color-primary);
	margin-top: auto;
	margin-bottom: 16px;
}

.plan-card-v2 > .btn {
	width: 100%;
	white-space: nowrap;
}

.plan-trust-badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 28px;
}

.plan-trust-badges li {
	background-color: var(--color-primary-soft);
	border: 1px solid var(--color-primary-light);
	color: var(--color-primary-dark);
	font-weight: 600;
	font-size: 0.82rem;
	padding: 7px 14px;
	border-radius: 999px;
}

.plan-note {
	text-align: center;
	margin-top: 16px;
	color: var(--color-text-muted);
	font-size: 0.9rem;
}

/* 8. 유심구매 */
.usim-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.usim-card {
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 26px 24px 24px;
	box-shadow: var(--shadow-card);
	display: flex;
	flex-direction: column;
	gap: 16px;
	overflow: hidden;
}

.usim-photo-stage {
	position: relative;
	width: calc(100% + 48px);
	height: 200px;
	margin: -26px -24px 0;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.usim-photo-stage-kt {
	background: linear-gradient(135deg, #eaf1ff, #dbe8ff);
}

.usim-photo-stage-lg {
	background: linear-gradient(135deg, #ffece9, #ffdad3);
}

.usim-net-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--color-white);
	padding: 4px 11px;
	border-radius: 999px;
	z-index: 1;
}

.usim-net-badge-kt {
	background-color: var(--color-kt-blue);
}

.usim-net-badge-lg {
	background-color: var(--color-lg-red);
}

.usim-icon {
	width: 100%;
	height: 100%;
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
}

.usim-icon svg {
	width: 40px;
	height: 40px;
}

.usim-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 10px 18px rgba(23, 18, 59, 0.18));
}

.usim-name-row {
	text-align: center;
}

.usim-name {
	font-weight: 800;
	color: var(--color-primary-dark);
	font-size: 1.2rem;
}

/* 홈 유심 카드 - 2열, 클릭형 */
.usim-grid-2 {
	grid-template-columns: 1fr;
	gap: 16px;
}

.usim-card > .btn {
	margin-top: auto;
}

.usim-buy-btn {
	color: var(--color-white);
	font-weight: 800;
}

.usim-buy-btn-kt {
	background: linear-gradient(135deg, var(--color-kt-blue), #4f9bff);
}

.usim-buy-btn-lg {
	background: linear-gradient(135deg, var(--color-lg-red), #ff7a6b);
}

.usim-card-facts {
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding-top: 14px;
	border-top: 1px solid var(--color-border);
}

.usim-card-facts > div {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-size: 0.94rem;
}

.usim-card-facts dt {
	flex-shrink: 0;
	width: 62px;
	text-align: center;
	color: var(--color-primary-dark);
	font-weight: 700;
	font-size: 0.78rem;
	background-color: var(--color-primary-light);
	padding: 3px 8px;
	border-radius: 6px;
}

.usim-card-facts dd {
	margin: 0;
	color: var(--color-text);
	font-weight: 500;
	word-break: keep-all;
	overflow-wrap: break-word;
}

.usim-price {
	font-weight: 700;
	color: var(--color-primary-dark);
	font-size: 0.95rem;
}

.usim-price span {
	font-weight: 400;
	color: var(--color-text-muted);
	font-size: 0.78rem;
}

/* 9. FAQ 아코디언 (네이티브 <details>/<summary> - JavaScript 없이도 열람 가능) */
.faq-list {
	max-width: 760px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.faq-item {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background-color: var(--color-white);
	overflow: hidden;
}

.faq-item.is-open {
	border-color: var(--color-primary-light);
}

.faq-item-heading {
	margin: 0;
	font: inherit;
}

.faq-question {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 20px 22px;
	background: none;
	border: none;
	cursor: pointer;
	font-family: inherit;
	text-align: left;
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-primary-dark);
	cursor: pointer;
	list-style: none;
}

.faq-question::-webkit-details-marker {
	display: none;
}

.faq-question .faq-icon {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: var(--color-primary-light);
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform var(--transition-base);
}

.faq-item.is-open .faq-icon {
	transform: rotate(45deg);
}

.faq-answer {
	padding: 0 22px 20px;
	color: var(--color-text-muted);
	font-size: 0.95rem;
	line-height: 1.7;
}

.faq-cat-tag {
	display: inline-block;
	background-color: var(--color-primary-light);
	color: var(--color-primary);
	font-size: 0.7rem;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 999px;
	margin-right: 8px;
	vertical-align: middle;
}

/* FAQ 전용 페이지 - 검색 / 카테고리 필터 */
.faq-page {
	max-width: 820px;
}

.faq-search {
	max-width: 480px;
	margin: 0 auto 20px;
}

.faq-search input[type="search"] {
	width: 100%;
	padding: 14px 18px;
	border: 1.5px solid var(--color-border);
	border-radius: 999px;
	font-size: 0.95rem;
	font-family: inherit;
	color: var(--color-text);
}

.faq-search input[type="search"]:focus-visible {
	border-color: var(--color-primary);
}

.faq-categories {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-bottom: 28px;
}

.faq-cat-btn {
	background-color: var(--color-white);
	border: 1.5px solid var(--color-border);
	color: var(--color-text-muted);
	font-weight: 700;
	font-size: 0.95rem;
	padding: 11px 22px;
	border-radius: 999px;
}

.faq-cat-btn.is-active {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}

.faq-empty {
	text-align: center;
	color: var(--color-text-muted);
	padding: 20px;
}

.faq-cta {
	text-align: center;
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--color-border);
}

.faq-cta p {
	color: var(--color-text-muted);
	margin-bottom: 16px;
}

.faq-more-link {
	text-align: center;
	margin-top: 16px;
}

.faq-more-link a {
	font-weight: 700;
	color: var(--color-primary);
}

/* 10. 상담 CTA */
.cta-section {
	background: linear-gradient(135deg, var(--color-primary-dark) 0%, #382a7a 100%);
	color: var(--color-white);
	border-radius: var(--radius-lg);
	padding: 56px 28px;
	text-align: center;
	margin: 0 20px;
	max-width: calc(var(--container-width) - 40px);
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
}

.cta-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 36px;
	align-items: center;
}

@media (min-width: 760px) {
	.cta-grid {
		grid-template-columns: 1.2fr 0.8fr;
		text-align: left;
	}
}

.cta-title {
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	font-weight: 800;
}

.cta-desc {
	margin-top: 12px;
	color: rgba(255, 255, 255, 0.78);
	font-size: 1.05rem;
}

.cta-actions {
	margin-top: 32px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
}

@media (min-width: 760px) {
	.cta-actions {
		align-items: flex-start;
	}
}

.cta-visual {
	display: flex;
	align-items: center;
	justify-content: center;
}

.cta-visual svg {
	width: 100%;
	max-width: 200px;
	height: auto;
}

.cta-actions .btn {
	width: 100%;
	max-width: 320px;
}

.cta-actions .btn-outline {
	background-color: transparent;
	color: var(--color-white);
	border-color: rgba(255, 255, 255, 0.4);
}

.cta-actions .btn-outline:hover,
.cta-actions .btn-outline:focus-visible {
	border-color: var(--color-white);
	color: var(--color-white);
}

/* 11. 푸터 */
.site-footer {
	background-color: #f8f6ff;
	border-top: 1px solid var(--color-border);
	margin-top: 80px;
	padding: 48px 0 32px;
}

.footer-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 32px 24px;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--color-border);
}

.footer-col-brand {
	grid-column: 1 / -1;
}

.footer-brand {
	font-size: 1.2rem;
	font-weight: 800;
	color: var(--color-primary-dark);
	margin-bottom: 10px;
}

.footer-tagline {
	color: var(--color-text-muted);
	font-size: 0.92rem;
	line-height: 1.6;
	max-width: 440px;
}

.footer-col-title {
	font-size: 0.92rem;
	font-weight: 800;
	color: var(--color-primary-dark);
	margin-bottom: 14px;
}

.footer-col ul {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.footer-col ul a {
	font-size: 0.88rem;
	color: var(--color-text-muted);
}

.footer-col ul a:hover,
.footer-col ul a:focus-visible {
	color: var(--color-primary);
}

.footer-col-business {
	grid-column: 1 / -1;
}

.footer-business {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 12px;
	font-size: 0.88rem;
	color: var(--color-text-muted);
}

.footer-business dt {
	font-weight: 700;
	color: var(--color-text);
}

.footer-business dd.is-missing {
	color: #b08a00;
	font-style: italic;
}

.footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.footer-links a {
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--color-text-muted);
}

.footer-links a:hover,
.footer-links a:focus-visible {
	color: var(--color-primary);
}

.footer-bottom {
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 0.82rem;
	color: var(--color-text-muted);
}

.footer-notice {
	font-size: 0.78rem;
	color: #9086a8;
}

.floating-kakao {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 400;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background-color: var(--color-kakao);
	color: var(--color-kakao-text);
	padding: 14px 18px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.92rem;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
	transition: transform var(--transition-base);
}

.floating-kakao:hover,
.floating-kakao:focus-visible {
	transform: translateY(-3px);
}

.floating-kakao svg {
	width: 20px;
	height: 20px;
}

/* 모바일/태블릿(768px 이하)에서는 하단 고정 카카오톡 버튼이 본문의
   카카오톡 상담하기 버튼을 가리므로 숨김. 데스크톱에서만 표시하고,
   모바일에는 아래 .mobile-sticky-bar 2버튼이 대신 상시 노출됨 */
@media (max-width: 768px) {
	.floating-kakao {
		display: none;
	}
}

/* 모바일 하단 고정 2버튼 (카카오 상담 / 지금 개통하기) */
.mobile-sticky-bar {
	display: none;
}

@media (max-width: 768px) {
	.mobile-sticky-bar {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 450;
		gap: 10px;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
		background-color: var(--color-white);
		border-top: 1px solid var(--color-border);
		box-shadow: 0 -6px 20px rgba(23, 18, 59, 0.08);
	}

	.mobile-sticky-bar .btn {
		flex: 1 1 0;
		min-height: 48px;
		font-size: 0.92rem;
		padding: 12px 14px;
		white-space: nowrap;
	}

	body.has-mobile-sticky-bar {
		padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
	}
}

/* 12. 블로그 / 글 / 페이지 공통 템플릿 */
.page-header {
	background-color: var(--color-primary-soft);
	padding: 56px 0;
	text-align: center;
}

.page-header .page-title {
	font-size: clamp(1.9rem, 4vw, 2.6rem);
	font-weight: 800;
	color: var(--color-primary-dark);
}

.page-header .archive-description {
	margin-top: 12px;
	color: var(--color-text-muted);
}

.content-area {
	padding: 60px 0;
}

.entry-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	max-width: 820px;
	margin: 0 auto;
}

.entry-card {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	background-color: var(--color-white);
	box-shadow: var(--shadow-card);
}

.entry-card .entry-thumb img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.entry-thumb-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, var(--color-primary-soft) 0%, var(--color-primary-light) 100%);
	color: var(--color-primary);
}

.entry-thumb-placeholder svg {
	width: 40px;
	height: 40px;
}

.entry-cat {
	display: inline-block;
	margin-left: 8px;
	color: var(--color-primary);
	font-weight: 600;
}

.entry-card .entry-body {
	padding: 24px;
}

.entry-card .entry-title {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--color-primary-dark);
	margin-bottom: 8px;
}

.entry-card .entry-title a:hover,
.entry-card .entry-title a:focus-visible {
	color: var(--color-primary);
}

.entry-meta {
	font-size: 0.82rem;
	color: var(--color-text-muted);
	margin-bottom: 10px;
}

.entry-summary {
	color: var(--color-text-muted);
	font-size: 0.95rem;
}

.entry-more {
	display: inline-block;
	margin-top: 14px;
	font-weight: 700;
	color: var(--color-primary);
}

.single-article {
	max-width: 760px;
	margin: 0 auto;
}

.single-article .entry-title {
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 800;
	color: var(--color-primary-dark);
	margin-bottom: 12px;
}

.single-article .entry-thumb {
	margin: 24px 0;
	border-radius: var(--radius-md);
	overflow: hidden;
}

.single-article .entry-content {
	font-size: 1.02rem;
	line-height: 1.8;
}

.single-article .entry-content > * + * {
	margin-top: 1.2em;
}

.single-article .entry-content h2,
.single-article .entry-content h3 {
	color: var(--color-primary-dark);
	font-weight: 700;
}

.single-article .entry-content a {
	color: var(--color-primary);
	text-decoration: underline;
}

.single-article .entry-content a.btn {
	text-decoration: none;
}

.single-article .entry-content img {
	border-radius: var(--radius-md);
}

/* 블로그 글 안에서 쓰는 개통 안내 박스 (블록 패턴 전용)
   글쓰기 화면(에디터)과 실제 게시 화면 양쪽에서 모두 보이도록
   .entry-content 등 특정 부모 클래스에 의존하지 않고 전역으로 적용합니다. */
.blog-eyebrow {
	display: inline-block;
	color: var(--color-primary);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.03em;
}

.blog-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.blog-trust-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.blog-trust-row span {
	display: inline-block;
	background-color: var(--color-primary-soft);
	border: 1px solid var(--color-primary-light);
	color: var(--color-primary-dark);
	font-weight: 600;
	font-size: 0.82rem;
	padding: 6px 14px;
	border-radius: 999px;
}

ol.blog-steps {
	counter-reset: blogstep;
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

ol.blog-steps > li {
	counter-increment: blogstep;
	position: relative;
	padding: 14px 16px 14px 52px;
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	word-break: keep-all;
}

ol.blog-steps > li::before {
	content: counter(blogstep);
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background-color: var(--color-primary);
	color: var(--color-white);
	font-weight: 800;
	font-size: 0.82rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.page-content {
	max-width: 760px;
	margin: 0 auto;
	font-size: 1.02rem;
	line-height: 1.8;
}

.page-content > * + * {
	margin-top: 1.2em;
}

.pagination-nav {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 40px;
	flex-wrap: wrap;
}

.pagination-nav a,
.pagination-nav span {
	padding: 10px 16px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	font-size: 0.9rem;
	font-weight: 600;
}

.pagination-nav .current {
	background-color: var(--color-primary);
	color: var(--color-white);
	border-color: var(--color-primary);
}

.comments-area {
	max-width: 760px;
	margin: 48px auto 0;
}

.comment-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.comment-body {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 20px;
}

.comment-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
}

.comment-meta img {
	border-radius: 50%;
}

.comment-author-info time {
	display: block;
	font-size: 0.8rem;
	color: var(--color-text-muted);
}

.not-found {
	text-align: center;
	padding: 100px 20px;
}

.not-found .not-found-code {
	font-size: 4rem;
	font-weight: 800;
	color: var(--color-primary-light);
	-webkit-text-stroke: 2px var(--color-primary);
}

.not-found h1 {
	font-size: 1.6rem;
	color: var(--color-primary-dark);
	margin-top: 12px;
}

.not-found p {
	color: var(--color-text-muted);
	margin-top: 12px;
}

.not-found .btn {
	margin-top: 28px;
}

/* 12-1. 글 목차 / 관련 글 / 이전·다음 글 / 하단 CTA */
.post-toc {
	max-width: 760px;
	margin: 20px auto 0;
	background-color: var(--color-primary-soft);
	border-radius: var(--radius-md);
	padding: 18px 22px;
}

.post-toc-title {
	font-weight: 700;
	color: var(--color-primary-dark);
	margin-bottom: 8px;
	font-size: 0.9rem;
}

.post-toc ol {
	list-style: decimal;
	padding-left: 1.2em;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.post-toc a {
	color: var(--color-text-muted);
	font-size: 0.88rem;
}

.post-toc a:hover,
.post-toc a:focus-visible {
	color: var(--color-primary);
}

.post-cta {
	max-width: 760px;
	margin: 40px auto 0;
	background-color: var(--color-primary-soft);
	border-radius: var(--radius-md);
	padding: 28px 24px;
	text-align: center;
}

.post-cta p {
	color: var(--color-text-muted);
	margin-bottom: 16px;
	font-weight: 600;
}

.post-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

.post-nav {
	max-width: 760px;
	margin: 32px auto 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.post-nav-prev,
.post-nav-next {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 14px 16px;
}

.post-nav-next {
	text-align: right;
}

.post-nav span {
	display: block;
	font-size: 0.78rem;
	color: var(--color-text-muted);
	margin-bottom: 4px;
}

.post-nav a {
	font-weight: 700;
	color: var(--color-primary-dark);
}

.related-posts {
	max-width: 820px;
	margin: 48px auto 0;
}

.related-posts h2 {
	font-size: 1.2rem;
	font-weight: 800;
	color: var(--color-primary-dark);
	margin-bottom: 20px;
	text-align: center;
}

/* 12-2. 안면인증 영상 반응형 임베드 */
.video-embed {
	position: relative;
	width: 100%;
	max-width: 720px;
	margin: 0 auto 32px;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-md);
	overflow: hidden;
	background-color: #000;
}

.video-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.face-auth-steps {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	max-width: 640px;
	margin: 0 auto 32px;
}

.face-auth-step {
	display: flex;
	align-items: center;
	gap: 10px;
	background-color: var(--color-primary-soft);
	border-radius: var(--radius-md);
	padding: 14px 16px;
	font-weight: 600;
	font-size: 0.88rem;
	color: var(--color-primary-dark);
}

.face-auth-step span {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background-color: var(--color-primary);
	color: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8rem;
	font-weight: 800;
}

.face-auth-tips {
	max-width: 640px;
	margin: 0 auto 28px;
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 22px 24px;
}

.face-auth-tips h3 {
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-primary-dark);
	margin-bottom: 10px;
}

.face-auth-tips ul {
	list-style: disc;
	padding-left: 1.2em;
	color: var(--color-text-muted);
	font-size: 0.92rem;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.legal-notice {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}

.legal-notice p {
	color: var(--color-text-muted);
	font-size: 0.82rem;
	line-height: 1.7;
}

.legal-link {
	display: inline-block;
	margin-top: 8px;
	font-size: 0.78rem;
	color: var(--color-primary);
	text-decoration: underline;
}

/* 12-3. steps / usim 상세 페이지 공통 */
.steps-page {
	max-width: 820px;
}

.steps-block {
	margin-bottom: 36px;
}

.steps-block h2 {
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--color-primary-dark);
	margin-bottom: 14px;
}

.steps-block h3 {
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-primary-dark);
}

.steps-block p {
	color: var(--color-text-muted);
	font-size: 0.98rem;
	line-height: 1.8;
	margin-bottom: 10px;
}

.steps-block-cta {
	text-align: center;
	background-color: var(--color-primary-soft);
	border-radius: var(--radius-lg);
	padding: 32px 20px;
}

.check-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	color: var(--color-text-muted);
	font-size: 0.95rem;
}

.check-list li {
	position: relative;
	padding-left: 26px;
}

.check-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background-color: var(--color-primary-light);
	border: 2px solid var(--color-primary);
}

.hours-badge {
	display: inline-block;
	background-color: var(--color-primary-light);
	color: var(--color-primary-dark);
	font-weight: 700;
	font-size: 0.9rem;
	padding: 8px 16px;
	border-radius: 999px;
	margin-bottom: 12px;
}

.steps-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 16px;
	justify-content: center;
}

/* 매장 안내 페이지 준비물 카드 */
.visit-items-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
}

.visit-item-card {
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 20px 18px;
	box-shadow: var(--shadow-card);
}

.visit-item-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--color-primary-light);
	color: var(--color-primary);
	margin-bottom: 12px;
}

.visit-item-icon svg {
	width: 22px;
	height: 22px;
}

.visit-item-title {
	font-weight: 800;
	color: var(--color-primary-dark);
	margin-bottom: 4px;
}

.visit-item-desc {
	color: var(--color-text-muted);
	font-size: 0.9rem;
	line-height: 1.6;
}

/* 12-4. 관리자 전용 안내 / 비활성 버튼 */
.admin-only-notice {
	display: block;
	margin-top: 8px;
	font-size: 0.78rem;
	color: #b3261e;
	background-color: #fdecea;
	border: 1px solid #f4c7c3;
	border-radius: var(--radius-sm);
	padding: 8px 12px;
}

.btn.is-disabled,
button.is-disabled {
	background-color: #e3e0ea;
	color: #8f88a3;
	box-shadow: none;
	cursor: not-allowed;
	border-color: #e3e0ea;
}

.btn.is-disabled:hover,
button.is-disabled:hover {
	transform: none;
}

/* 12-5. 유심 확인 모달 */
.modal[hidden] {
	display: none;
}

.modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.modal-overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(32, 22, 79, 0.55);
}

.modal-panel {
	position: relative;
	width: 100%;
	max-width: 480px;
	background-color: var(--color-white);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	padding: 32px 24px 28px;
	box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.2);
}

.modal-panel h3 {
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--color-primary-dark);
	margin-bottom: 10px;
	padding-right: 30px;
}

.modal-panel p {
	color: var(--color-text-muted);
	font-size: 0.92rem;
	margin-bottom: 8px;
}

.modal-selection {
	font-weight: 700;
	color: var(--color-primary);
}

.modal-close {
	position: absolute;
	top: 18px;
	right: 20px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: none;
	background-color: var(--color-primary-soft);
	color: var(--color-primary-dark);
	font-size: 1.2rem;
	line-height: 1;
}

.modal-actions {
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.btn-text {
	background: none;
	color: var(--color-text-muted);
	padding: 8px;
	font-weight: 600;
	font-size: 0.88rem;
}

/* 12-6. 유심구매 페이지 (/usim/) 전용 */
.usim-page {
	background-color: var(--color-page-bg);
	padding: 32px 0 64px;
}

.usim-container {
	max-width: 1000px;
	margin: 0 auto;
	padding-left: 16px;
	padding-right: 16px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.usim-hero-card,
.usim-card-block {
	background-color: var(--color-white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: 28px 20px;
}

.usim-hero-card {
	text-align: center;
}

.usim-hero-title {
	margin-top: 14px;
	font-size: clamp(1.5rem, 5vw, 2.1rem);
	font-weight: 800;
	color: var(--color-primary-dark);
	line-height: 1.35;
}

.usim-hero-highlight {
	color: var(--color-primary);
}

.usim-hero-desc {
	margin-top: 14px;
	color: var(--color-text-muted);
	font-size: 0.98rem;
	line-height: 1.7;
	max-width: 480px;
	margin-left: auto;
	margin-right: auto;
}

.usim-hero-card .btn {
	margin-top: 24px;
	min-height: 48px;
}

.usim-card-block > h2 {
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--color-primary-dark);
	margin-bottom: 8px;
}

.usim-block-desc {
	color: var(--color-text-muted);
	font-size: 0.94rem;
	margin-bottom: 20px;
}

/* 탭 (KT 파랑 / LG 빨강) */
.usim-tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 24px;
}

.usim-tab {
	flex: 1 1 0;
	min-height: 48px;
	background-color: var(--color-white);
	border: 1.5px solid var(--color-border);
	color: var(--color-text-muted);
	font-weight: 800;
	font-size: 1rem;
	padding: 13px 20px;
	border-radius: 999px;
}

.usim-tab-kt.is-active {
	background-color: var(--color-kt-blue);
	border-color: var(--color-kt-blue);
	color: var(--color-white);
}

.usim-tab-lg.is-active {
	background-color: var(--color-lg-red);
	border-color: var(--color-lg-red);
	color: var(--color-white);
}

.usim-panel-label {
	text-align: center;
	font-weight: 700;
	color: var(--color-primary-dark);
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--color-border);
}

html.js .usim-panel-label {
	display: none;
}

.usim-panel-title {
	font-size: 1.1rem;
	font-weight: 800;
	color: var(--color-primary-dark);
	line-height: 1.5;
	margin-bottom: 10px;
}

#usim-panel-kt .usim-name-highlight {
	color: var(--color-kt-blue);
}

#usim-panel-lg .usim-name-highlight {
	color: var(--color-lg-red);
}

.usim-panel-desc {
	color: var(--color-text-muted);
	font-size: 0.94rem;
	line-height: 1.7;
	margin-bottom: 18px;
}

.usim-instant-btn {
	margin-bottom: 20px;
	min-height: 48px;
}

/* 온라인/오프라인 구매 카드 */
.usim-buy-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: 16px;
	margin-bottom: 16px;
}

.usim-buy-card {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 20px 18px;
	text-align: center;
	background-color: var(--color-primary-soft);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}

.usim-buy-card-offline .usim-buy-note {
	margin-top: 2px;
}

.usim-buy-badge {
	background-color: var(--color-kt-blue);
	color: var(--color-white);
	font-size: 0.72rem;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: 999px;
	margin-bottom: 14px;
}

.usim-buy-badge-offline {
	background-color: var(--color-text-muted);
}

.usim-buy-placeholder {
	display: block;
	width: 84px;
	height: 84px;
	margin: 0 auto 14px;
}

.usim-buy-placeholder svg {
	width: 100%;
	height: 100%;
}

.usim-buy-image {
	width: 100%;
	max-width: 240px;
	height: 190px;
	object-fit: contain;
	margin: 4px auto 14px;
	border-radius: var(--radius-sm);
	background-color: var(--color-white);
}

.usim-info-table {
	width: 100%;
	margin: 2px 0 12px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	overflow: hidden;
	background-color: var(--color-white);
}

.usim-info-row {
	display: grid;
	grid-template-columns: 104px 1fr;
	border-top: 1px solid var(--color-border);
}

.usim-info-row:first-child {
	border-top: none;
}

.usim-info-row dt {
	margin: 0;
	padding: 10px 8px;
	background-color: var(--color-primary-soft);
	color: var(--color-primary-dark);
	font-size: 0.78rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: 1.35;
	word-break: keep-all;
}

.usim-info-row dd {
	margin: 0;
	padding: 10px 12px;
	font-size: 0.85rem;
	color: var(--color-text);
	display: flex;
	align-items: center;
	text-align: left;
	word-break: keep-all;
	overflow-wrap: break-word;
}

.usim-buy-name {
	font-weight: 700;
	color: var(--color-primary-dark);
	font-size: 1rem;
	margin-bottom: 4px;
	overflow-wrap: break-word;
	word-break: keep-all;
}

.usim-buy-price {
	font-weight: 800;
	color: var(--color-primary);
	font-size: 1.1rem;
	margin-bottom: 8px;
}

.usim-buy-note {
	color: var(--color-text-muted);
	font-size: 0.88rem;
	line-height: 1.6;
	overflow-wrap: break-word;
	word-break: keep-all;
	margin-bottom: 14px;
}

.usim-buy-card .btn {
	width: 100%;
	min-height: 48px;
	margin-top: 4px;
}

.usim-price-notice {
	text-align: center;
	color: var(--color-text-muted);
	font-size: 0.88rem;
	line-height: 1.6;
}

/* 유심 장착 방법 (배터리 일체형/교체형 카드) */
.usim-install-image-wrap {
	margin: 16px 0 20px;
	border-radius: var(--radius-md);
	overflow: hidden;
	border: 1px solid var(--color-border);
}

.usim-install-image {
	display: block;
	width: 100%;
	height: auto;
}

.usim-install-group + .usim-install-group {
	margin-top: 24px;
}

.usim-install-subtitle {
	font-size: 0.98rem;
	font-weight: 700;
	color: var(--color-primary-dark);
	margin-bottom: 12px;
}

.usim-install-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.usim-install-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 12px;
}

.usim-install-num {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: var(--color-primary);
	color: var(--color-white);
	font-weight: 800;
	font-size: 0.74rem;
	margin-bottom: 3px;
}

.usim-install-card-title {
	font-weight: 700;
	color: var(--color-primary-dark);
	font-size: 0.86rem;
}

.usim-install-card p {
	color: var(--color-text-muted);
	font-size: 0.78rem;
	line-height: 1.4;
}

.usim-install-card p.usim-install-card-title {
	color: var(--color-primary-dark);
}

.usim-install-tip {
	margin-top: 20px;
	margin-bottom: 20px;
	background-color: var(--color-page-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 14px 16px;
}

.usim-install-tip-title {
	font-weight: 700;
	color: var(--color-primary-dark);
	font-size: 0.92rem;
	margin-bottom: 4px;
}

.usim-install-tip p:last-child {
	color: var(--color-text-muted);
	font-size: 0.88rem;
}

/* 유심 장착 방법 / 주의문 */
.usim-note-text {
	color: var(--color-text-muted);
	font-size: 0.9rem;
	line-height: 1.7;
	margin-top: 12px;
}

.warning-note {
	margin-top: 10px;
	background-color: #fdecea;
	border: 1px solid #f4c7c3;
	color: #b3261e;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.6;
	padding: 12px 14px;
	border-radius: var(--radius-sm);
}

/* 유심 개통·충전 카드 */
.usim-charge-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 14px 0;
}

.usim-charge-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 12px;
}

.usim-charge-num {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: var(--color-primary);
	color: var(--color-white);
	font-weight: 800;
	font-size: 0.74rem;
	margin-bottom: 3px;
}

.usim-charge-card p {
	color: var(--color-text-muted);
	font-size: 0.78rem;
	line-height: 1.4;
}

.usim-charge-card-title {
	font-weight: 700;
	color: var(--color-primary-dark);
	font-size: 0.86rem;
}

.usim-warning-box {
	margin: 14px 0;
	background-color: #fdecea;
	border: 1px solid #f4c7c3;
	border-radius: var(--radius-sm);
	padding: 12px 14px;
}

.usim-warning-box-title {
	color: #b3261e;
	font-weight: 700;
	font-size: 0.88rem;
	margin-bottom: 4px;
}

.usim-warning-box ul {
	margin: 0;
	padding: 0;
	list-style: none;
	color: #b3261e;
	font-size: 0.82rem;
	line-height: 1.5;
}

.usim-warning-box li {
	position: relative;
	padding-left: 14px;
}

.usim-warning-box li::before {
	content: "·";
	position: absolute;
	left: 2px;
}

.usim-charge-method-title {
	margin-top: 20px;
}

.usim-charge-method-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.usim-charge-method-card {
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 14px 16px;
}

.usim-charge-method-head {
	font-weight: 800;
	color: var(--color-primary-dark);
	font-size: 0.9rem;
	margin-bottom: 6px;
}

.usim-charge-method-card p {
	font-size: 0.8rem;
	color: var(--color-text);
	line-height: 1.5;
}

.usim-charge-method-line {
	margin-top: 2px;
}

.usim-charge-method-card .usim-charge-method-example {
	color: var(--color-text-muted);
	font-size: 0.78rem;
	margin-top: 2px;
}

/* 하단 고정 카카오 버튼이 마지막 CTA를 가리지 않도록 여유 공간 확보 */
.usim-final-cta {
	margin-bottom: 96px;
}

/* 13. 전체 요금제 페이지 */
.plans-page {
	padding-top: 8px;
}

.plans-panel[hidden] {
	display: none;
}

.plan-section-title {
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--color-primary-dark);
}

.plan-section-desc {
	color: var(--color-text-muted);
	font-size: 0.92rem;
	margin-top: 6px;
}

/* 전체 요금제 (모든 요금제, 한 줄씩 세로 나열 - 더보기 없음) */
.plan-full-list-section .plan-section-title {
	margin-bottom: 6px;
}

.plan-full-list-section .plan-section-desc {
	color: var(--color-text-muted);
	margin-bottom: 22px;
}

.plan-full-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

.plan-row-card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 18px;
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 20px;
	box-shadow: var(--shadow-card);
}

.plan-row-info {
	flex: 1 1 220px;
	min-width: 0;
}

.plan-row-info .plan-badge {
	font-size: 0.78rem;
	padding: 4px 12px;
	margin-bottom: 8px;
}

.plan-row-name {
	font-size: 1.2rem;
	font-weight: 800;
	color: var(--color-primary-dark);
	overflow-wrap: break-word;
	word-break: keep-all;
}

.plan-row-desc {
	margin-top: 6px;
	color: var(--color-text-muted);
	font-size: 0.95rem;
	overflow-wrap: break-word;
	word-break: keep-all;
}

.plan-row-specs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin-top: 10px;
}

.plan-row-specs > div {
	display: flex;
	align-items: baseline;
	gap: 6px;
}

.plan-row-specs dt {
	color: var(--color-text-muted);
	font-size: 0.85rem;
}

.plan-row-specs dd {
	margin: 0;
	color: var(--color-primary-dark);
	font-weight: 700;
	font-size: 1rem;
}

.plan-row-action {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 16px;
}

.plan-row-price {
	font-size: 1.28rem;
	font-weight: 800;
	color: var(--color-primary);
	white-space: nowrap;
}

.plan-row-action .btn {
	font-size: 1rem;
	padding: 14px 24px;
}

/* 하단 안내 3항목 - 390px 등 좁은 화면에서는 세로 스택, 여유가 생기면 3단 배치 */
.plan-page-trust {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 44px;
}

.plan-page-trust li {
	display: flex;
	align-items: center;
	gap: 12px;
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 16px 18px;
	box-shadow: var(--shadow-card);
	font-weight: 700;
	color: var(--color-primary-dark);
	font-size: 0.92rem;
}

.plan-page-trust-icon {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: var(--color-primary-light);
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
}

.plan-page-trust-icon svg {
	width: 18px;
	height: 18px;
}

@media (min-width: 480px) {
	.plan-page-trust {
		flex-direction: row;
	}

	.plan-page-trust li {
		flex: 1 1 0;
		flex-direction: column;
		text-align: center;
	}
}

@media (min-width: 768px) {
	.plan-full-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.plan-full-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.plan-row-card {
		flex-direction: column;
		align-items: flex-start;
	}

	.plan-row-action {
		width: 100%;
		justify-content: space-between;
	}
}

@media (min-width: 1440px) {
	.plan-full-list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* 14. 반응형 (태블릿 이상, 360px ~ 1920px 대응) */
@media (min-width: 480px) {
	.modal-actions {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.modal-actions .btn-text {
		width: 100%;
	}
}

@media (max-width: 640px) {
	.activation-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.activation-image-wrap {
		padding: 10px;
	}

	.activation-image {
		width: 190px;
		height: 238px;
	}
}

@media (min-width: 768px) {
	.hero-actions .btn {
		min-width: 200px;
	}

	.usim-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.usim-grid-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: 640px;
		margin: 0 auto;
	}

	.entry-list {
		grid-template-columns: repeat(2, 1fr);
	}

	.cta-actions {
		flex-direction: row;
		justify-content: center;
	}

	.cta-actions .btn {
		width: auto;
	}

	.footer-bottom {
		flex-direction: row;
		justify-content: space-between;
	}

	.section-header-split {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.modal {
		align-items: center;
	}

	.modal-panel {
		border-radius: var(--radius-lg);
	}

	.modal-actions {
		flex-direction: column;
	}

	.usim-hero-card,
	.usim-card-block {
		padding: 40px 44px;
	}

	.usim-buy-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.visit-items-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.usim-tab {
		flex: 0 1 auto;
		min-width: 220px;
	}

	.usim-tabs {
		justify-content: center;
	}
}

@media (min-width: 900px) {
	.main-navigation {
		display: block;
	}

	.header-cta {
		display: inline-flex;
	}

	.header-mobile-actions {
		display: none;
	}

	.mobile-nav-panel {
		display: none !important;
	}
}

@media (min-width: 1024px) {
	.section {
		padding: 100px 0;
	}

	.start-card {
		padding: 36px 40px;
	}

	.choice-card {
		padding: 32px 28px;
	}
}

@media (min-width: 1400px) {
	.container {
		max-width: 1320px;
	}
}

/* 모션 최소화 사용자 배려 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}