@charset "utf-8";

.navArea nav ul {padding:8px 0; background-color: rgba(238, 238, 238, 0.7); border-radius: 8px;}
.navArea nav ul li a {color:#505050;}

.sub-visualArea .contentBox {margin-top:50px; width:80%; max-width:1200px;}
.sub-visualArea .contentBox h1 {color:#505050; font-size:1.2rem;}
.sub-visualArea .contentBox p {color:#fff; font-size:1rem;}

/* 히어로 섹션 */
.treatment-hero {
	position: relative; height: 420px; display: flex; align-items: center; justify-content: center; overflow: hidden;
	background-image: url('/images/hero-main.jpg'); background-size: cover; background-position: center;
	border-bottom-left-radius: 40px; border-bottom-right-radius: 40px;
}
.treatment-hero::before { content: ''; position: absolute; inset: 0; background: rgba(17,24,39,0.45); }
.treatment-hero-inner { position: relative; z-index: 1; width: 100%; max-width: 1100px; padding: 0 20px; }
.treatment-hero-title { font-size: 2.8rem; font-weight: 800; letter-spacing: -0.015em; margin-bottom: 12px; color: #ffffff; }
.treatment-hero-desc { font-size: 1.06rem; color: #e5e7eb; max-width: 760px; }

/* 주요 치료 방법 섹션 */
.treatment-main { padding: 60px 0;}
.treatment-main-inner {
	max-width: 1100px; margin: 0 auto; padding: 0 20px;
	display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
}
.treatment-section {
	background: #ffffff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 30px;
	box-shadow: 0 4px 12px rgba(2, 6, 23, 0.04);
}
.treatment-section-title {
	font-size: 1.4rem; font-weight: 700; color: #0f172a; margin-bottom: 24px;
	padding-bottom: 12px; border-bottom: 2px solid #f97316;
}
.treatment-item {
	display: flex; gap: 20px; margin-bottom: 24px; align-items: flex-start;
}
.treatment-item:last-child { margin-bottom: 0; }
.treatment-item-content { flex: 1; }
.treatment-item-content h3 {
	font-size: 1.1rem; font-weight: 600; color: #0f172a; margin-bottom: 8px;
}
.treatment-item-content p {
	font-size: 0.95rem; color: #475569; line-height: 1.6;
}
.treatment-item-image {
	flex-shrink: 0; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;
}

/* 치료 아이콘 스타일 */
.treatment-icon {
	position: relative; width: 60px; height: 60px;
}

/* 롤온 제품 아이콘 */
.treatment-icon.antiperspirant .icon-body {
	width: 40px; height: 50px; background: #fef3c7; border-radius: 8px; position: absolute; bottom: 0; left: 10px;
}
.treatment-icon.antiperspirant .icon-cap {
	width: 44px; height: 12px; background: #ffffff; border-radius: 6px; position: absolute; top: 0; left: 8px;
	border: 1px solid #e5e7eb;
}
.treatment-icon.antiperspirant .icon-roller {
	width: 8px; height: 8px; background: #374151; border-radius: 50%; position: absolute; top: 2px; left: 26px;
}

/* 주사기 아이콘 */
.treatment-icon.syringe .icon-barrel {
	width: 30px; height: 40px; background: #fef3c7; border-radius: 4px; position: absolute; bottom: 0; left: 15px;
	border: 1px solid #d1d5db;
}
.treatment-icon.syringe .icon-plunger {
	width: 8px; height: 40px; background: #ffffff; border-radius: 2px; position: absolute; bottom: 0; left: 26px;
	border: 1px solid #d1d5db;
}
.treatment-icon.syringe .icon-needle {
	width: 2px; height: 15px; background: #9ca3af; position: absolute; top: 0; left: 29px;
}

/* 알약 아이콘 */
.treatment-icon.pills {
	display: flex; gap: 8px; align-items: center;
}
.pill-pack {
	display: flex; flex-direction: column; gap: 2px;
}
.pill-pack.yellow .pill {
	width: 12px; height: 6px; background: #fbbf24; border-radius: 3px;
}
.pill-pack.white .pill {
	width: 12px; height: 6px; background: #ffffff; border: 1px solid #d1d5db; border-radius: 3px;
}

/* 추가 치료 방법 섹션 */
.treatment-additional { padding: 60px 0; background: #f8fafc; }
.treatment-additional-inner {
	max-width: 1100px; margin: 0 auto; padding: 0 20px;
	display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
}
.treatment-list {
	list-style: none; padding: 0; margin: 0;
}
.treatment-list li {
	font-size: 0.95rem; color: #475569; line-height: 1.6; margin-bottom: 8px;
}
.treatment-list li strong {
	color: #0f172a; font-weight: 600;
}

/* 치료 정보 요약 섹션 */
.treatment-summary { padding: 60px 0; }
.treatment-summary-inner {
	max-width: 1100px; margin: 0 auto; padding: 0 20px;
}
.treatment-summary h2 {
	font-size: 1.8rem; font-weight: 800; color: #0f172a; margin-bottom: 32px; text-align: center;
}
.summary-grid {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.summary-item {
	background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 24px;
	box-shadow: 0 2px 8px rgba(2, 6, 23, 0.04);
}
.summary-item h3 {
	font-size: 1.1rem; font-weight: 600; color: #0f172a; margin-bottom: 12px;
}
.summary-item p {
	font-size: 0.9rem; color: #475569; line-height: 1.6;
}

/* 반응형 디자인 */
@media (max-width: 900px) {
	.treatment-main-inner, .treatment-additional-inner {
		grid-template-columns: 1fr; gap: 40px;
	}
	.treatment-hero-title { font-size: 1.8rem; }
	.summary-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.treatment-hero { padding: 40px 0; }
	.treatment-hero-title { font-size: 1.5rem; flex-direction: column; gap: 8px; }
	.treatment-main, .treatment-additional { padding: 40px 0; }
	.treatment-section { padding: 20px; }
	.treatment-item { flex-direction: column; gap: 16px; }
	.treatment-item-image { width: 60px; height: 60px; }
	.summary-grid { grid-template-columns: 1fr; }
}