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