:root {
    --primary: #289191; /* 딥 틸 컬러 */
    --dark: #1a1a1a;
    --gray: #888;
    --light-bg: #f8f9fa;
    --border: #e9ecef;
    --white: #ffffff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Noto Sans KR', sans-serif; color: var(--dark); line-height: 1.6; }
ul { list-style: none; }
a { text-decoration: none; color: inherit; }
.container { width: 90%; max-width: 1300px; margin: 0 auto; }

/* 헤더 & 네비게이션 */
header { background: var(--white); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 1000; }
.header-inner { height: 80px; display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 24px; font-weight: 800; letter-spacing: -1px; }
.gnb ul { display: flex; gap: 30px; font-weight: 700; }
.gnb a.active { color: var(--primary); border-bottom: 2px solid var(--primary); }
.header-utils { display: flex; align-items: center; gap: 5px; }
.search-wrap { display: flex; background: #f1f1f1; padding: 2px 15px; border-radius: 20px; }
.search-wrap input[type=text] { border: 0; background: transparent; outline: none; width: 100px; height:36px; padding: 10px 10px; font-size:20px;}
.search-wrap input[type=text]::placeholder {
    color: #d0d0d0;
}
.header-utils .icon {
	color: #2b908a;
	font-size: 26px;
	margin-left: 14px;
}

.header-utils .lang-select {
	color: #2b908a;
	border: none;
	background: transparent;
	font-weight: 500;
	cursor: pointer;
	margin-left:12px;
	font-size:16px;
	vertical-align:top;
	margin-top:5px;

}
.lang-select:focus {
	outline: none;
	border: none;
	box-shadow: none;
}

.sub-nav { background: var(--primary); color: var(--white); font-size: 11px; padding: 12px 0; }
.sub-nav ul { display: flex; justify-content: center; gap: 20px; }
.sub-nav li { opacity: 0.8; cursor: pointer; }
.sub-nav li.active { opacity: 1; font-weight: bold; text-decoration: underline; }

/* 페이지 전환 시스템 */
.page { display: none; min-height: 80vh; }
.page.active { display: block; }

/* 1. 브릿지 페이지 스타일 */
#page-bridge {
    height: 100vh;
    background: rgba(0,0,0,0.5) url('/img/main_visual.jpg') center/cover no-repeat;
    background-blend-mode: darken;
    margin-top: -80px;
}
.bridge-overlay { height: 100%; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; }
.bridge-content { text-align: center; color: var(--white); }
.bridge-content h2 { font-size: 60px; margin-bottom: 0px; }
.bridge-content p { max-width: 600px; margin: 0 auto 30px; font-size: 18px; }
.btn-shop-now { padding: 10px 30px; border: 1px solid var(--white); background: transparent; color: var(--primary); font-weight: bold; transition: 0.3s; cursor: pointer; font-size:24px; }
.btn-shop-now:hover { background: var(--primary); border-color: var(--primary); color: var(--white); }

/* 2. 숍 페이지 스타일 */
.sub-hero { height: 200px; background: #eee center/cover; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 40px; background: linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0.5)), url('/img/sub_visual_list.jpg') center/cover no-repeat; background-blend-mode: darken; }
.shop-layout { display: flex; gap: 40px; padding: 60px 0; }
.shop-sidebar { width: 250px; margin-top:94px;}
.shop-sidebar h3{font-size:17px;letter-spacing:-1px;}
.accordion { border-top: 1px solid var(--dark); margin-top:15px;}
.acc-header { padding: 15px 0; border-bottom: 1px solid #eee; font-weight: bold; cursor: pointer; display: flex; justify-content: space-between; }
.acc-body { padding: 15px; background: var(--light-bg); display: none; }
.acc-item.active .acc-body { display: block; }
.alphabet-wrap {
	margin-top: 50px;
	background: #f7f7f7;
	padding: 20px;
	border-top: 2px solid #2AB5A1;
	margin-bottom:20px;
}

.alphabet-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 16px; /* 간격 조절 */
}

.alphabet-filter label {
	display: inline-flex;
	align-items: center;
	font-size: 18px;
	font-weight: 400;
	color: #b5b5b5;
	cursor: pointer;
}

/* 중복 outline 제거 */
.alphabet-filter input[type=checkbox] {
	appearance: none;
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	border: 1px solid #d0d0d0;
	margin-right: 6px;
	border-radius: 2px;
	cursor: pointer;
	position: relative;
	display:inline-block;
}

/* 체크 상태 */
.alphabet-filter input[type=checkbox]:checked {
	background: #2AB5A1;
	border-color: #2AB5A1;
}

/* 체크 상태에서 옆 텍스트 변경 */
.alphabet-filter input[type=checkbox]:checked + * {
	color: #2AB5A1;
	font-weight: 600;
}

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.prod-card { height: 350px; background: #eee; border: 1px solid var(--border); cursor: pointer; }

.search-bar {
	display: flex;
	width: 380px;
	margin: 0 auto;
	border: 1px solid #2AB5A1;
}

.search-bar input[type=text] {
	flex: 1;
	border: none;
	padding: 10px 12px;
	font-size: 15px;
	outline: none;
	box-shadow: none;
}

.search-bar input[type=text]:focus{
	outline: none;
	border: none;
	box-shadow: none;
	-webkit-box-shadow: none;
	border-color: transparent;
	border:0;
	border-radius:0;
}

.search-bar input::placeholder {
	color: #bcbcbc;
}

.search-bar button {
	background: #2AB5A1;
	border: none;
	color: white;
	width: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 18px;
}

/* 3. 상세 페이지 스타일 */
.detail-wrap { padding: 60px 0; }
.detail-title { text-align: center; border-bottom: 3px solid var(--primary); display: inline-block; padding: 0 50px 10px; margin: 0 auto 50px; display: table; }
.detail-top { display: flex; gap: 50px; flex-wrap: wrap; }
.detail-img-box { flex: 1; min-width: 300px; background: #f4f4f4; height: 450px; }
.detail-info { flex: 1; min-width: 300px; }
.qty-box { display: flex; gap: 10px; margin: 30px 0; }
.btn-teal { background: var(--primary); color: #fff; border: none; padding: 10px 20px; }
.btn-inquire { width: 100%; padding: 15px; border: 1px solid var(--primary); color: var(--primary); background: transparent; font-weight: bold; }
.detail-tabs { display: flex; margin-top: 80px; border-top: 1px solid #ddd; }
.tab-btn { flex: 1; padding: 20px; border: none; background: none; font-weight: bold; color: var(--gray); }
.tab-btn.active { color: var(--dark); border-bottom: 3px solid var(--primary); }
.tab-panel { display: none; padding: 40px 0; }
.tab-panel.active { display: block; }

/* 4. 문의 페이지 스타일 (언더라인 스타일) */
.contact-form { margin-top: 50px; }
.input-row { display: flex; gap: 30px; margin-bottom: 40px; }
.input-group { flex: 1; }
.input-group label { display: block; font-size: 12px; color: var(--gray); margin-bottom: 5px; }
.input-group input { width: 100%; border: none; border-bottom: 1px solid var(--dark); padding: 10px 0; outline: none; }
.input-group textarea { width: 100%; height: 150px; border: 1px solid #ddd; padding: 15px; margin-top: 10px; }
.btn-submit { display: block; margin: 50px auto; padding: 15px 80px; background: var(--primary); color: #fff; border: none; font-weight: bold; }

/* 푸터 스타일 */
footer { background: var(--dark); color: #fff; padding: 60px 0 20px; }
.footer-inner { display: flex; justify-content: space-between; border-bottom: 1px solid #333; padding-bottom: 40px; }
.f-contact p { text-align: right; color: #ccc; font-size: 13px; }
.footer-bottom { padding-top: 20px; font-size: 12px; color: #666; }

/* 모바일 반응형 */
@media (max-width: 768px) {
    .gnb, .header-utils { display: none; }
    .shop-layout { flex-direction: column; }
    .shop-sidebar { width: 100%; }
    .input-row { flex-direction: column; gap: 30px; }
    .bridge-content h2 { font-size: 36px; }
}

.sub-visual { 
	height: 220px; 
	background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('/img/sub_visual_list.jpg') center/cover no-repeat; 
	display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 42px; font-weight: bold;
}

.bridge-content h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

.bridge-content {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
}

.button {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}

/* 1. 메인 컨테이너 */
.pdp-container {
	width: 1200px;
	margin: 0 auto;
	padding: 60px 0;
	font-family: 'Montserrat', sans-serif;
}

/* 2. Title Section */
.pdp-title {
	text-align: center;
	margin-bottom: 40px;
}

.pdp-title h1 {
	font-size: 34px;
	font-weight: 700;
	margin-bottom: 10px;
}

.pdp-title-line {
	width: 140px;
	height: 3px;
	background: #2AB5A1;
	margin: 0 auto 40px;
}

/* 3. 상품 TOP 영역 */
.pdp-top {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 60px;
	margin-bottom: 60px;
}

.pdp-image-area img {
	width: 460px;
	background: #f5f5f5;
}

.pdp-thumbs {
	display: flex;
	gap: 10px;
	margin-top: 12px;
}

.pdp-thumb {
	width: 88px;
	height: 88px;
	background: #999;
}

/* 4. Summary */
.pdp-summary {
	width: 480px;
}

.pdp-summary h2 {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 8px;
}

.pdp-summary p {
	font-size: 14px;
	margin-bottom: 10px;
}

.pdp-summary-bullets {
	list-style: none;
	padding: 0;
	margin-top: 14px;
}

.pdp-summary-bullets li {
	display: flex;
	gap: 8px;
	margin: 6px 0;
	font-size: 14px;
}

.pdp-summary-bullets li::before {
	content: "";
	width: 10px;
	height: 10px;
	background: #2AB5A1;
	margin-top: 4px;
}

/* 5. Action Buttons (정렬 ↓) */
.pdp-actions {
	margin-top: 22px;
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}

.pdp-qty {
	display: flex;
	border: 1px solid #2AB5A1;
}

.pdp-qty input {
	width: 42px;
	text-align: center;
	border: none;
}

.pdp-qty-btn {
	width: 26px;
	background: #2AB5A1;
	color: white;
	border: none;
	cursor: pointer;
}

/* Buttons */
.pdp-btn {
	padding: 8px 18px;
	border-radius: 4px;
	font-size: 14px;
	border: 1px solid #2AB5A1;
	cursor: pointer;
}

.pdp-btn--cart {
	background: white;
	color: #2AB5A1;
}

.pdp-btn--buy {
	background: #2AB5A1;
	color: white;
}

.pdp-btn--inquire {
	background: white;
	color: #2AB5A1;
}

/* 6. TAB */
.pdp-tabs {
	display: flex;
	justify-content: center;
	border-bottom: 1px solid #ddd;
	margin-bottom: 40px;
}

.pdp-tabs button {
	background: none;
	border: none;
	padding: 14px 24px;
	color: #777;
	font-size: 15px;
	cursor: pointer;
}

.pdp-tabs button.active {
	color: #2AB5A1;
	border-bottom: 3px solid #2AB5A1;
	font-weight: 600;
}

/* 7. SECTION */
.pdp-section {
	text-align: center;
	padding: 80px 0;
	font-size: 15px;
	line-height: 1.7;
}

.pdp-section.gray {
	background: #f7f7f7;
}


@media (max-width: 1199px) {
	.pdp-container {
		width: 90%;
	}

	.pdp-top {
		flex-direction: column;
		align-items: center;
	}
}

@media (max-width: 767px) {
	.pdp-thumb {
		width: 50px;
		height: 50px;
	}

	.pdp-actions {
		flex-direction: column;
		width: 100%;
	}

	.pdp-btn,
	.pdp-qty {
		width: 100%;
		text-align: center;
	}

	.pdp-section {
		padding: 60px 0;
	}

	.pdp-tabs button {
		font-size: 13px;
		padding: 10px 0;
	}
}