@charset "utf-8";

/* ==========================================================================
   Bootstrap 5.3.8 Extensions & Custom Utilities (bootstrap-extensions.css)
   ========================================================================== */

/* ==========================================================================
   1. 탭(Nav) 확장 컴포넌트
   ========================================================================== */

/* 탭 좌우 스크롤 (줄바꿈 없음) */
.nav.nav-scroll {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.nav.nav-scroll .nav-item {
	flex-shrink: 0;
}

.nav.nav-scroll::-webkit-scrollbar {
	height: 4px;
}

.nav.nav-scroll::-webkit-scrollbar-track {
	background: transparent;
}

.nav.nav-scroll::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0.2);
	border-radius: 2px;
}

/* 탭 수직 스크롤 (.flex-column과 함께 사용) */
.nav.nav-scroll.flex-column {
	overflow-x: hidden;
	overflow-y: auto;
}

.nav.nav-scroll.flex-column::-webkit-scrollbar {
	width: 4px;
	height: auto;
}

/* 탭 여백 축소 */
.nav.nav-sm {
	--bs-nav-link-padding-y: 0.25rem;
	--bs-nav-link-padding-x: 0.75rem;
	--bs-nav-link-font-size: calc(var(--bs-body-font-size) * 0.875);
}

.nav.nav-xs {
	--bs-nav-link-padding-y: 0.125rem;
	--bs-nav-link-padding-x: 0.5rem;
	--bs-nav-link-font-size: calc(var(--bs-body-font-size) * 0.75);
}

/* 세그먼트 스위치 탭 */
.nav-segment {
	background-color: var(--bs-secondary-bg, #e9ecef);
	padding: 0.25rem;
	border-radius: 0.5rem;
	overflow: auto hidden;
}

.nav-segment .nav-link {
	color: #64748b;
	border-radius: 0.375rem;
	transition: all 0.15s ease-in-out;
}

.nav-segment .nav-link:hover:not(.active) {
	color: #0f172a;
	background-color: rgba(255, 255, 255, 0.6);
}

.nav-segment .nav-link.active {
	background-color: #ffffff !important;
	color: var(--bs-primary, #0d6efd) !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.07);
}

/* nav-underline active 하단 테두리 두께 2px */
.nav-underline {
	--bs-nav-underline-border-width: 2px;
	overflow: auto hidden;
}

.nav-underline .nav-link.active {
	border-bottom-width: 2px !important;
}

/* ==========================================================================
   2. 버튼(Button) 확장 컴포넌트
   ========================================================================== */

/* 초소형 버튼 (.btn-xs) */
.btn-xs {
	--bs-btn-padding-y: 0.25rem;
	--bs-btn-padding-x: 0.375rem;
	--bs-btn-font-size: 0.875rem;
	--bs-btn-border-radius: 0.25rem;
	--bs-btn-line-height: 1.2;
}

/* 공통 더보기/액션 드롭다운 버튼 */
.btn-action-dropdown {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--bs-secondary);
	border-radius: 0.25rem;
}

.btn-action-dropdown:hover,
.btn-action-dropdown:focus {
	background-color: var(--bs-secondary-bg);
	color: var(--bs-dark);
}

.btn-action-dropdown i {
	font-size: 1.25rem;
}

/* ==========================================================================
   3. 모달(Modal) 확장 규격
   ========================================================================== */

/* 커스텀 모달 크기 (.modal-md: 기본 500px과 .modal-lg 800px 중간인 650px) */
@media (min-width: 576px) {
	.modal-md {
		--bs-modal-width: 650px;
		max-width: 650px;
	}
}

/* ==========================================================================
   4. 폼(Form) 확장 컴포넌트
   ========================================================================== */

/* 심리스 인풋 (평소 배경 일치 -> 포커스 시 Primary 테두리) */
.form-control-seamless {
	background-color: #f1f5f9;
	border: 1.5px solid #f1f5f9;
	transition: all 0.2s ease-in-out;
}

.form-control-seamless:focus {
	background-color: #ffffff;
	border-color: #3f53ab;
	box-shadow: 0 0 0 4px rgba(63, 83, 171, 0.15);
}

/* input-group 내부 자식 요소 간 4px 간격 유격 및 4면 둥근 모서리 보존 확장 */
.input-group-spaced {
	gap: 4px;
}

.input-group-spaced > .form-control,
.input-group-spaced > .form-select,
.input-group-spaced > .btn {
	border-radius: var(--bs-border-radius, 0.375rem) !important;
}

/* ==========================================================================
   5. 아바타(Avatar) 컴포넌트
   ========================================================================== */
.member-avatar {
	width: 64px;
	height: 64px;
	font-size: 1.6rem;
}

.user-avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: #34495E;
	color: #FFFFFF;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.8rem;
}

/* ==========================================================================
   6. 트랜지션 & 애니메이션
   ========================================================================== */

/* 화살표 아이콘 180도 부드러운 회전 애니메이션 */
.rotate-180 {
	transform: rotate(180deg);
}

.transition-transform {
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 슬라이드 접힘/펼침 (Slide Down / Up) 트랜지션 */
.slide-enter-active,
.slide-leave-active {
	transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, padding 0.3s ease;
	max-height: 1500px;
	opacity: 1;
	overflow: hidden;
}

.slide-enter-from,
.slide-leave-to {
	max-height: 0;
	opacity: 0;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	overflow: hidden;
}

/* ==========================================================================
   7. 타이포그래피 & 커스텀 유틸리티
   ========================================================================== */
.text-xs { font-size: 0.75rem !important; }
.text-2xs { font-size: 0.75rem !important; }
.text-sm-08 { font-size: 0.8rem !important; }
.text-sm-085 { font-size: 0.85rem !important; }
.text-sm-09 { font-size: 0.9rem !important; }
.text-sm-095 { font-size: 0.95rem !important; }
.text-sm-85em { font-size: 0.85em !important; }

/* 텍스트 2줄 제한 및 말줄임(...) */
.ellipsis-2-line {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: break-all;
	overflow-wrap: break-word;
	white-space: normal;
	line-height: 1.35;
	max-height: 2.7em;
}

.progress-xs {
	height: 6px !important;
}

/* 폭/높이/크기 커스텀 유틸리티 */
.w-260 { width: 260px !important; }
.w-120 { width: 120px !important; }
.w-130 { width: 130px !important; }
.w-100-max { max-width: 100px !important; }
.w-28 { width: 28px !important; }
.h-28 { height: 28px !important; }
.w-36 { width: 36px !important; }
.h-36 { height: 36px !important; }
.w-40 { width: 40px !important; }
.w-48 { width: 48px !important; }
.w-60 { width: 60px !important; }
.min-h-80 { min-height: 80px !important; }
.min-h-100 { min-height: 100px !important; }
.min-h-120 { min-height: 120px !important; }
.max-h-100vh { max-height: 100vh !important; }

/* 테이블 컬럼 너비 클래스 */
.col-w-75 { width: 75px; }
.col-w-90 { width: 90px; }
.col-w-110 { width: 110px; }
.col-w-130 { width: 130px; }
.col-min-250 { min-width: 250px; }

.row > .col,
.row > .col-sm,
.row > .col-md,
.row > .col-lg,
.row > .col-xl,
.row > .col-xxl {
	min-width: 0;
}

/* ==========================================================================
   8. 코드 에디터 전용 테마
   ========================================================================== */
.code-editor-dark {
	font-size: 0.85rem;
	background-color: #272822;
	color: #f8f8f2;
}

.code-editor-result {
	font-size: 0.85rem;
	background-color: #1e1e1e;
	color: #d4d4d4;
}

.coding-tc-textarea {
	font-size: 0.8rem;
	background-color: #f8fafc;
}

/* ==========================================================================
   9. 로그인/인증 전용 동적 배경 이미지 클래스 (.bg-1 ~ .bg-10)
   ========================================================================== */
.bg-1, .bg-2, .bg-3, .bg-4, .bg-5,
.bg-6, .bg-7, .bg-8, .bg-9, .bg-10 {
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-attachment: fixed !important;
}

.bg-1  { background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("../image/bg/bg-1.webp") !important; }
.bg-2  { background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("../image/bg/bg-2.webp") !important; }
.bg-3  { background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("../image/bg/bg-3.webp") !important; }
.bg-4  { background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("../image/bg/bg-4.webp") !important; }
.bg-5  { background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("../image/bg/bg-5.webp") !important; }
.bg-6  { background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("../image/bg/bg-6.webp") !important; }
.bg-7  { background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("../image/bg/bg-7.webp") !important; }
.bg-8  { background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("../image/bg/bg-8.webp") !important; }
.bg-9  { background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("../image/bg/bg-9.webp") !important; }
.bg-10 { background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("../image/bg/bg-10.webp") !important; }

/* ==========================================================================
   10. 폰트 크기 확장 유틸리티 (.fs-7, .fs-8, .fs-9)
   ========================================================================== */
.fs-7 { font-size: 0.875rem !important; }
.fs-8 { font-size: 0.8rem !important; }
.fs-9 { font-size: 0.725rem !important; }