@charset "utf-8";
/* 제품소개 게시판(gallery 기반 커스텀 스킨) 보조 스타일
   메인 pg-* 스타일은 assets/css/content.css 에 이미 정의되어 있으므로,
   여기서는 그 CSS가 다루지 않는 부분만 보완함 */

.pg-card-inner { position: relative; }
.pg-admin-edit {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 5;
	background: rgba(0,0,0,0.6);
	color: #fff;
	font-size: 1.2rem;
	padding: 0.6rem 1.2rem;
	border-radius: 2rem;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.pg-admin-edit:hover { background: var(--main-color); }

.pg-empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: 6rem 0;
	color: var(--body-color, #576071);
	font-size: 1.6rem;
}

.no_image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: #aaa;
	font-size: 1.3rem;
	background: #eef1f4;
}

.bo_w_desc {
	font-size: 1.3rem;
	color: var(--body-color, #576071);
	margin-bottom: 0.8rem;
}

/* 이미지 2장 이상일 때 사용하는 Swiper 슬라이더 (카드/상세 공용) */
.pg-card-img .pg-brand-badge { position: absolute; z-index: 15; }
.pg-card-swiper,
.pg-view-swiper { width: 100%; height: 100%; }
.pg-view-swiper {position: absolute;}
.pg-card-swiper .swiper-slide,
.pg-view-swiper .swiper-slide { width: 100%; height: 100%; }
.pg-card-swiper .swiper-slide img,
.pg-view-swiper .swiper-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pg-card-swiper .swiper-pagination,
.pg-view-swiper .swiper-pagination { bottom: 1.2rem; }
.pg-card-swiper .swiper-pagination-bullet,
.pg-view-swiper .swiper-pagination-bullet {
	width: 0.8rem;
	height: 0.8rem;
	background: #fff;
	opacity: 0.6;
}
.pg-card-swiper .swiper-pagination-bullet-active,
.pg-view-swiper .swiper-pagination-bullet-active {
	opacity: 1;
	background: var(--main-color);
}

.pg-view-swiper .swiper-button-prev,
.pg-view-swiper .swiper-button-next {
	width: 4rem;
	height: 4rem;
	margin-top: -2rem;
	background: rgba(0,0,0,0.4);
	border-radius: 50%;
	color: #fff;
}
.pg-view-swiper .swiper-button-prev:hover,
.pg-view-swiper .swiper-button-next:hover { background: var(--main-color); }
.pg-view-swiper .swiper-button-prev::after,
.pg-view-swiper .swiper-button-next::after { font-size: 1.6rem; }

/* 제품 상세보기 */
.pg-view-back { 
	margin: 24px 0; 
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
}
.pg-view-card {
	display: flex;
	gap: 4rem;
	background: #f3f6f9;
	border-radius: 40px;
	overflow: hidden;
	margin-bottom: 40px;
}
.pg-view-img {
	width: 40%;
	max-width: 640px;
	flex: 0 0 40%;
	aspect-ratio: 1/1;
	background: url(../../../assets/images/product/product_bg.png) no-repeat center;
	background-size: cover;
	position: relative;
    overflow: hidden;
}
.pg-view-img img { width: 100%; height: 100%; object-fit: cover; }
.pg-view-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.6rem;
	padding: 40px 40px 40px 0;
}

/* 제품 등록/수정 폼
   그누보드 기본 write.skin.php 마크업(.frm_input, .write_div 등)을 그대로 쓰지만,
   그 스타일을 담당하는 그누보드 기본 css/default.css는 #container 레이아웃을
   깨뜨려서 쓸 수 없으므로, 여기서 사이트 톤에 맞게 직접 스타일링함 */
.pg-write { max-width: 1600px; margin: 0 auto; }
.pg-write h1.pg-name { margin-bottom: 24px; font-size: 40px;}
.pg-write .pg-required-note {
	display: inline-flex;
	align-items: center;
	font-size: 14px;
	font-weight: 500;
	color: var(--danger);
	vertical-align: middle;
	margin-left: 8px;
}
.pg-write .pg-required-note .required { margin-left: 0; margin-right: 4px; }
.pg-write .write_div { margin-bottom: 24px; }
.pg-write .write_row { display: flex; gap: 24px; }
.pg-write .write_row .write_div { flex: 1 1 0; min-width: 0; }
.bo_w_select .custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    height: 48px;
    padding: 0 16px;
    background: #fff;
    border: 1px solid #dcdfe4;
    border-radius: 8px;	
    cursor: pointer;
}
.bo_w_select .custom-select-value {
    font-size: 16px;
    font-family: var(--font-family1);
    color: var(--body-color);
    letter-spacing: -0.02em;
}
.bo_w_select .custom-select-arrow {
    display: flex;
    align-items: center;
    color: var(--color-dark, #111);;
    font-size: 20px;
    transition: transform 0.3s ease;
}
.pg-write label:not(.sound_only) { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--color-dark, #111); }
.pg-write label .required { color: var(--danger, #ed5050); margin-left: 4px; }

.pg-help-tip {
	position: relative;
	display: inline-flex;
	color: var(--main-color);
	font-size: 16px;
	font-weight: 400;
	cursor: help;
	vertical-align: middle;
}
.pg-help-tip:hover { color: var(--main-color); }
.pg-help-tip[data-tooltip]::before {
	content: attr(data-tooltip);
	position: absolute;
	bottom: calc(100% + 10px);
	left: 0;
	width: 280px;
	max-width: 60vw;
	white-space: normal;
	text-align: left;
	line-height: 1.5;
	background: rgba(18,18,18,0.9);
	color: #fff;
	font-size: 12px;
	font-weight: 400;
	padding: 10px 14px;
	border-radius: 8px;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
	z-index: 10;
}
.pg-help-tip[data-tooltip]::after {
	content: '';
	position: absolute;
	bottom: 100%;
	left: 10px;
	width: 0; height: 0;
	border: 6px solid transparent;
	border-top-color: rgba(18,18,18,0.9);
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
	z-index: 10;
}
.pg-help-tip[data-tooltip]:hover::before,
.pg-help-tip[data-tooltip]:hover::after {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.pg-write .sound_only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

.pg-write .frm_input {
	width: 100%;
	height: 48px;
	padding: 0 16px;
	border: 1px solid #dcdfe4;
	border-radius: 8px;
	font-size: 16px;
	font-family: var(--font-family1);
	color: var(--body-color);
	background: #fff;
	box-sizing: border-box;
	transition: border-color 0.2s;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.pg-write .frm_input:focus { border-color: var(--main-color); outline: none; }
.pg-write select.frm_input,
.pg-write select#ca_name { appearance: auto; }
.pg-write #ca_name {
	width: 100%;
	height: 48px;
	padding: 0 16px;
	border: 1px solid #dcdfe4;
	border-radius: 8px;
	font-size: 14px;
	background: #fff;
}

.pg-write .cke_sc { display: none; }

.pg-write .wr_content textarea {
	width: 100%;
	min-height: 240px;
	padding: 16px;
	border: 1px solid #dcdfe4;
	border-radius: 8px;
	font-size: 14px;
	font-family: var(--font-family1);
	line-height: 1.6;
	box-sizing: border-box;
	resize: vertical;
}

.pg-write .bo_w_flie { margin-bottom: 12px; }

.pg-write .pg-file-input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}
.pg-write .pg-file-item {
	display: flex;
	align-items: stretch;
	height: 48px;
	border: 1px solid #dcdfe4;
	border-radius: 8px;
	background: #fff;
	overflow: hidden;
	position: relative;
}
.pg-write .pg-file-name {
	flex: 1;
	display: flex;
	align-items: center;
	min-width: 0;
	padding: 0 16px;
	font-size: 14px;
	color: var(--body-color, #8a94a6);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.pg-write .pg-file-name.has-file { color: var(--color-dark, #111); font-weight: 500; }
.pg-write .pg-file-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 90px;
	padding: 0 20px;
	border-left: 1px solid #dcdfe4;
	background: #f3f6f9;
	color: var(--color-dark, #111);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.2s ease;
	margin: 0 !important;
	line-height: 46px;
}
.pg-write .pg-file-btn:hover { background: #e5e8eb; }

.pg-write .pg-file-clear-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 90px;
	height: 100%;
	padding: 0 20px;
	border: none;
	border-left: 1px solid #dcdfe4;
	background: #f3f6f9;
	color: var(--color-dark);
	font-size: 20px;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
	margin: 0 !important;
}
.pg-write .pg-file-clear-btn:hover { background: var(--danger, #ed5050); color: #fff; }

.pg-write .btn_confirm {
	display: flex;
	gap: 1rem;
	justify-content: center;
	margin-top: 3.2rem;
}
.pg-write .btn_confirm .btn {
	height: 4.8rem;
	padding: 0 3.2rem;
	border-radius: 50px;
	font-size: 1.5rem;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border: none;
	text-decoration: none;
}
.pg-write .btn_confirm .btn_submit {
	background: var(--main-color);
	color: #fff;
}
.pg-write .btn_confirm .btn_submit:hover { opacity: 0.9; }
.pg-write .btn_confirm .btn_cancel {
	background: #576071;
	color: #fff;
}

/* 상세/목록 화면 버튼(목록으로/수정/삭제) */
.btn_b01.btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 40px;
	padding: 0 20px;
	border-radius: 50px;
	background: var(--main-color);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
}
.btn_b01.btn i {
	font-weight: normal;
}
.btn_b01.btn .pg-btn-arrow {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-left: 2px;
	background: url(../../../assets/images/icon/arrow-big-right.gif) no-repeat center;
	background-size: contain;
	transition: transform 0.3s ease;
}
.btn_b01.btn:hover .pg-btn-arrow { transform: translateX(4px); }

@media (max-width: 1280px) {
	.pg-write {max-width: 100%;}
	#content.product-gallery-page {padding: 120px 0;}
	.pg-write h1.pg-name {font-size: 32px;}
}

@media (max-width: 768px) {
	#content.product-gallery-page {padding: 80px 0;}
	.pg-write .write_row { flex-direction: column; gap: 0; }
	.pg-view-card { flex-direction: column; border-radius: 24px;}
	.pg-view-img { flex: none; width: 100%; }
	.pg-view-body { padding: 0 24px 24px; }
	.pg-write h1.pg-name {font-size: 24px;}
	.pg-write .frm_input {font-size: 14px; height: 40px;}
	#smart_editor2 {min-width: 100% !important;}
	.pg-write .pg-file-item {height: 40px;}
	.pg-write .pg-file-btn {min-width: 60px; padding: 0 8px;}
	.bo_w_select .custom-select-trigger {height: 40px;}
	.bo_w_select .custom-select-value {font-size: 14px;}
	.bo_w_select .custom-select-arrow {font-size: 16px;}
	.custom-select-option {font-size: 14px;}
	.pg-write .write_div {margin-bottom: 16px;}
	.pg-view-back {justify-content: center;}
	
}