/* =============================================================================
   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 24px;
}

.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(--border-color, #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(--border-color, #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:     flex;
	border-top:  none;
	border-left: none;
	border-bottom: none;
	/* 구분선은 box-shadow 로 — 레이아웃에 영향 없음 */
	box-shadow:  0 1px 0 0 var(--border-color, #111111);
	overflow-x:  auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

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

.gowa-tab-links--tab .gowa-tab-link-item {
	flex:             1 0 auto;
	position:         relative;
	padding:          14px 20px;
	border:           none;
	background-color: transparent;
	color:            var(--tab-inactive-font, #aaaaaa);
	white-space:      nowrap;
}

/* 비활성 하단 라인 (두께 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 {
	height:     var(--tab-active-thickness, 3px);
	background: var(--tab-active-color, #111111);
}

@media (max-width: 767px) {
	.gowa-tab-links--tab .gowa-tab-link-item {
		flex:    0 0 auto;
		padding: 11px 14px;
	}
}