@charset "utf-8";
/* ============================================================
   category-tabs — 서브페이지 공통 하위메뉴 탭
   · 이 파일 하나만 고치면 vision / manifesto 등 모든 페이지에 적용된다.
   · 페이지별 CSS 에서 .category-tabs / .tab_select 를 재정의하지 말 것.
   · PC : 가로형 카드 / 850px 이하 : 아이콘 타일 / 600px 이하 : 셀렉트
   ============================================================ */

/* 탭 크기는 이 변수 3개로 조절한다 (이 값만 바꾸면 전 페이지 반영) */
:root{--tab_pad:1.1rem 1.5rem; --tab_ic:3.4rem; --tab_ic_svg:1.7rem; --tab_nm:1.68rem;}

.tab_select{position:relative;}
.tab_select .ts_btn{display:none;}

.category-tabs{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1rem; margin-bottom:6.4rem;}
.category-tabs .tab{position:relative; display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:1.2rem;
	padding:var(--tab_pad); border-radius:1.1rem;
	background:rgba(255,255,255,.72); border:1px solid var(--line,#e1e5ea);
	box-shadow:0 1rem 2.4rem -1.8rem rgba(20,50,90,.3);
	transition:background .25s, color .25s, transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s, border-color .25s;}
.category-tabs .tab .ic{flex:0 0 auto; display:grid; place-items:center; width:var(--tab_ic); height:var(--tab_ic); border-radius:50%;
	background:#e8eef6; color:#3f6da8; transition:background .25s,color .25s;}
.category-tabs .tab .ic svg{width:var(--tab_ic_svg); height:var(--tab_ic_svg); fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.category-tabs .tab .nm{flex:1 1 auto; min-width:0; font-size:var(--tab_nm); font-weight:600; line-height:1.35; letter-spacing:-.05rem; text-align:left; color:#33465c; word-break:keep-all;}
.category-tabs .tab:hover{transform:translateY(-.3rem); border-color:rgba(26,95,180,.32); background:#fff;}
.category-tabs .tab:hover .nm{color:var(--pt,#1a5fb4);}
.category-tabs .tab:hover .ic{background:#e4eefb; color:var(--pt,#1a5fb4);}
.category-tabs .tab.active{background:linear-gradient(160deg,#2f7fd1,#0f4d93); border-color:transparent;
	box-shadow:0 2rem 4rem -1.6rem rgba(15,77,147,.65), inset 0 1px 0 rgba(255,255,255,.3);}
.category-tabs .tab.active .ic{background:rgba(255,255,255,.18); color:#fff;}
.category-tabs .tab.active .nm{color:#fff;}

@media (max-width:1440px){
	.category-tabs{gap:.8rem;}
}
@media (max-width:1280px){
	.category-tabs{grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:5.6rem;}
}
@media (max-width:1024px){
	.category-tabs{grid-template-columns:repeat(3,minmax(0,1fr));}
	.category-tabs .tab{padding:1rem 1.2rem;}
	.category-tabs .tab .nm{font-size:1.6rem;}
}

/* ── 850px 이하 : 아이콘 상단 + 라벨 하단 타일형 ───────────── */
@media (max-width:850px){
	.tab_select .ts_btn{display:none;}
	.tab_select .category-tabs{position:static; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
		gap:.8rem; margin:0 0 4.4rem; padding:0; max-height:none; overflow:visible;
		background:none; border:0; box-shadow:none;}
	.tab_select .category-tabs .tab{flex-direction:column; align-items:center; justify-content:flex-start; gap:.8rem;
		padding:1.2rem .6rem 1rem; border-radius:1.2rem;
		background:rgba(255,255,255,.82); border:1px solid var(--line,#e1e5ea);
		box-shadow:0 1rem 2.4rem -1.8rem rgba(20,50,90,.3);}
	.tab_select .category-tabs .tab .ic{width:3.4rem; height:3.4rem;}
	.tab_select .category-tabs .tab .ic svg{width:1.7rem; height:1.7rem;}
	.tab_select .category-tabs .tab .nm{flex:0 0 auto; text-align:center; font-size:1.55rem; line-height:1.35; word-break:keep-all;}
	.tab_select .category-tabs .tab:hover{background:#fff; border-color:rgba(26,95,180,.32);}
	.tab_select .category-tabs .tab.active{background:linear-gradient(160deg,#2f7fd1,#0f4d93); border-color:transparent;}
	.tab_select .category-tabs .tab.active .ic{background:rgba(255,255,255,.18); color:#fff;}
	.tab_select .category-tabs .tab.active .nm{color:#fff;}
}
@media (max-width:768px){
	.tab_select .category-tabs{grid-template-columns:repeat(4,minmax(0,1fr)); gap:.8rem; margin-bottom:4.4rem;}
	.tab_select .category-tabs .tab{padding:1.2rem .6rem 1rem; border-radius:1rem;}
	.tab_select .category-tabs .tab .ic{width:3.4rem; height:3.4rem;}
	.tab_select .category-tabs .tab .ic svg{width:1.7rem; height:1.7rem;}
	.tab_select .category-tabs .tab .nm{font-size:1.55rem;}
}

/* ── 600px 이하 : 셀렉트(드롭다운) ───────────────────────── */
@media (max-width:600px){
	.tab_select{margin-bottom:3.6rem; z-index:20;}
	.tab_select .ts_btn{display:flex; align-items:center; gap:1.2rem; width:100%; height:5.6rem; padding:0 1.6rem;
		border-radius:1.2rem; background:linear-gradient(160deg,#2f7fd1,#0f4d93); border:0; cursor:pointer;
		box-shadow:0 1.8rem 3.6rem -1.8rem rgba(15,77,147,.7);}
	.tab_select .ts_btn .ic{flex:0 0 auto; display:grid; place-items:center; width:3.4rem; height:3.4rem; border-radius:50%;
		background:rgba(255,255,255,.18); color:#fff;}
	.tab_select .ts_btn .ic svg{width:1.9rem; height:1.9rem; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
	.tab_select .ts_btn .nm{flex:1 1 auto; text-align:left; font-size:1.8rem; font-weight:700; letter-spacing:-.05rem; color:#fff;}
	.tab_select .ts_btn .arw{flex:0 0 auto; width:1rem; height:1rem; margin-right:.6rem;
		border-right:2px solid rgba(255,255,255,.9); border-bottom:2px solid rgba(255,255,255,.9);
		transform:rotate(45deg) translateY(-.2rem); transition:transform .25s;}
	.tab_select.is_open .ts_btn .arw{transform:rotate(-135deg) translateY(-.2rem);}

	.tab_select .category-tabs{position:absolute; left:0; right:0; top:calc(100% + .8rem); z-index:30;
		display:none; grid-template-columns:minmax(0,1fr); gap:0; margin:0; padding:.8rem;
		max-height:30rem; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
		background:#fff; border:1px solid rgba(18,37,61,.1); border-radius:1.2rem;
		scrollbar-width:thin; scrollbar-color:rgba(26,95,180,.35) transparent;
		box-shadow:0 2.4rem 5rem -1.6rem rgba(20,50,90,.32);}
	.tab_select .category-tabs::-webkit-scrollbar{width:.6rem;}
	.tab_select .category-tabs::-webkit-scrollbar-thumb{background:rgba(26,95,180,.35); border-radius:.3rem;}
	.tab_select .category-tabs::-webkit-scrollbar-track{background:transparent;}
	.tab_select.is_open .category-tabs{display:grid;}
	.tab_select .category-tabs .tab{flex-direction:row; align-items:center; justify-content:flex-start; gap:1.2rem;
		padding:.9rem 1rem; border:0; border-radius:.8rem; background:transparent; box-shadow:none;}
	.tab_select .category-tabs .tab .nm{text-align:left; font-size:1.65rem;}
	.tab_select .category-tabs .tab:hover{transform:none; background:#f2f6fb;}
	.tab_select .category-tabs .tab.active{background:#eaf2fb; box-shadow:none;}
	.tab_select .category-tabs .tab.active .ic{background:#dfeafa; color:var(--pt,#1a5fb4);}
	.tab_select .category-tabs .tab.active .nm{color:var(--pt,#1a5fb4);}
}
@media (max-width:390px){
	.tab_select{margin-bottom:3.2rem;}
	.tab_select .category-tabs{gap:0; margin-bottom:0;}
}