/* =============================================================================
   Gowa Tab Links — 프론트엔드 스타일
   ============================================================================= */

.gowa-tab-links {
	display: grid;
	width: 100%;
	box-sizing: border-box;
	grid-template-columns: repeat(var(--pc-cols, 3), 1fr);
	/* 공유 테두리: 왼쪽·위쪽만 컨테이너에 지정하고 나머지는 각 셀에 */
	border-top:  1px solid var(--border-color, #111111);
	border-left: 1px solid var(--border-color, #111111);
	margin: 0 0 var(--bottom-margin, 0px);
}

.gowa-tab-link-item {
	display:          flex;
	align-items:      center;
	justify-content:  center;
	padding:          14px 8px;
	border-right:     1px solid var(--border-color, #111111);
	border-bottom:    1px solid var(--border-color, #111111);
	background-color: transparent;
	color:            var(--inactive-font, #111111);
	font-size:        var(--pc-font-size, 14px);
	font-weight:      500;
	line-height:      1.4;
	text-align:       center;
	text-decoration:  none !important;
	word-break:       keep-all;
	transition:       background-color 0.15s ease, color 0.15s ease;
	box-sizing:       border-box;
}

.gowa-tab-link-item:hover {
	background-color: color-mix(in srgb, var(--border-color, #111111) 8%, transparent);
	color:            var(--inactive-font, #111111);
	text-decoration:  none !important;
}

/* 현재 페이지 URL 과 일치하는 항목 — 활성화 배경 */
.gowa-tab-link-item.is-active {
	background-color: var(--active-bg, #111111);
	color:            var(--active-text, #ffffff) !important;
	font-weight:      600;
	text-decoration:  none !important;
}

/* 모바일 */
@media (max-width: 767px) {
	.gowa-tab-links--grid {
		grid-template-columns: repeat(var(--mobile-cols, 2), 1fr);
	}

	.gowa-tab-link-item {
		font-size: var(--mobile-font-size, 13px);
		padding:   11px 6px;
	}
}

/* =============================================================================
   탭형 레이아웃
   ============================================================================= */

.gowa-tab-links--tab {
	display:               grid;
	grid-template-columns: repeat(var(--tab-cols, 4), 1fr);
	border-top:            none;
	border-left:           none;
}

.gowa-tab-links--tab .gowa-tab-link-item {
	display:          flex;
	align-items:      center;
	justify-content:  center;
	position:         relative;
	padding:          14px 20px;
	border:           none;
	border-bottom:    1px solid var(--border-color, #111111);
	background-color: transparent;
	color:            var(--tab-inactive-font, #aaaaaa);
	white-space:      nowrap;
}

/* 홀수 항목일 때 마지막 빈 칸 */
.gowa-tab-links--tab .gowa-tab-link-empty {
	pointer-events: none;
	cursor:         default;
}

/* 비활성 하단 라인 (두께 0이면 숨김) */
.gowa-tab-links--tab .gowa-tab-link-item::after {
	content:    '';
	position:   absolute;
	bottom:     0;
	left:       0;
	right:      0;
	height:     var(--tab-inactive-thickness, 0px);
	background: var(--tab-inactive-line, #aaaaaa);
}

/* 활성화 하단 라인 */
.gowa-tab-links--tab .gowa-tab-link-item.is-active {
	background-color: transparent !important;
	color:            var(--tab-active-font, #111111) !important;
	font-weight:      700;
}

.gowa-tab-links--tab .gowa-tab-link-item.is-active::after {
	bottom:     -1px;
	height:     calc(var(--tab-active-thickness, 3px) + 1px);
	background: var(--tab-active-color, #111111);
}

@media (max-width: 767px) {
	.gowa-tab-links--tab {
		grid-template-columns: repeat(var(--tab-mobile-cols, 3), 1fr);
	}

	.gowa-tab-links--tab .gowa-tab-link-item {
		padding: 11px 14px;
	}

	/* 모바일에서 PC 전용 빈 칸 숨김 */
	.gowa-tab-link-pc-only {
		display: none !important;
	}
}

@media (min-width: 768px) {
	/* PC에서 모바일 전용 빈 칸 숨김 */
	.gowa-tab-link-mob-only {
		display: none !important;
	}
}

/* =============================================================================
   독립형 레이아웃
   ============================================================================= */

.gowa-tab-links-inline-wrap {
	position:        relative;
	margin-bottom:   var(--bottom-margin, 0px);
	border:          none !important;
	padding:         0 !important;
	box-shadow:      none !important;
}

.gowa-tab-links--inline {
	display:         flex;
	flex-wrap:       nowrap;
	justify-content: center;
	gap:             0;
	border:          none;
	border-bottom:   1px solid var(--border-color, #e5e7eb);
	overflow:        visible;
	position:        relative;
}

.gowa-tab-links--inline .gowa-tab-link-item {
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	position:         relative;
	flex-shrink:      0;
	padding:          12px var(--inline-pc-gap, 20px);
	border:           none;
	background-color: transparent;
	color:            var(--tab-inactive-font, #999999);
	font-size:        var(--pc-font-size, 14px);
	font-weight:      500;
	white-space:      nowrap;
	text-decoration:  none !important;
	transition:       color 0.15s ease;
}

.gowa-tab-links--inline .gowa-tab-link-item:hover {
	color:           var(--tab-active-font, #111111);
	background-color: transparent;
	text-decoration: none !important;
}

/* 비활성 하단 라인 — 구분선 색상(투명도 포함)과 통일 */
.gowa-tab-links--inline .gowa-tab-link-item::after {
	content:    '';
	position:   absolute;
	bottom:     -1px;
	left:       0;
	right:      0;
	height:     var(--tab-inactive-thickness, 0px);
	background: var(--border-color, transparent);
}

/* 활성 */
.gowa-tab-links--inline .gowa-tab-link-item.is-active {
	color:            var(--tab-active-font, #111111) !important;
	font-weight:      700;
	background-color: transparent !important;
}

.gowa-tab-links--inline .gowa-tab-link-item.is-active::after {
	height:     calc(var(--tab-active-thickness, 3px) + 1px);
	background: var(--tab-active-color, #111111);
}

/* 스크롤 화살표 — PC에서는 숨김 */
.gowa-inline-arrow {
	display: none;
}

/* 모바일 */
@media (max-width: 767px) {
	.gowa-tab-links--inline {
		justify-content:        flex-start;
		overflow-x:             auto;
		overflow-y:             hidden;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type:       x mandatory;
		scrollbar-width:        none;
	}

	.gowa-tab-links--inline::-webkit-scrollbar {
		display: none;
	}

	.gowa-tab-links--inline .gowa-tab-link-item {
		scroll-snap-align: center;
		font-size:         var(--mobile-font-size, 13px);
		padding:           10px var(--inline-mobile-gap, 16px);
	}

	/* 스크롤 가능할 때 우측 텍스트 페이드 마스크 */
	.gowa-tab-links--inline.has-more {
		-webkit-mask-image: linear-gradient(to right, black calc(100% - 96px), transparent);
		mask-image:         linear-gradient(to right, black calc(100% - 96px), transparent);
	}

	/* 화살표 */
	.gowa-inline-arrow {
		display:         flex;
		align-items:     center;
		justify-content: center;
		position:        absolute;
		right:           16px;
		top:             50%;
		transform:       translateY(-50%);
		width:           20px;
		height:          20px;
		pointer-events:  none;
		z-index:         2;
		animation:       gowaArrowPulse 1.2s ease-in-out infinite;
	}

	.gowa-inline-arrow::after {
		content:      '';
		display:      block;
		width:        6px;
		height:       6px;
		border-top:   2px solid #ffffff;
		border-right: 2px solid #ffffff;
		transform:    rotate(45deg);
	}

	@keyframes gowaArrowPulse {
		0%, 100% { opacity: 1; right: 16px; }
		50%      { opacity: 0.5; right: 20px; }
	}

	.gowa-tab-links-inline-wrap.scroll-end .gowa-inline-arrow {
		display: none;
	}
}