/*
 * ================================================================
 *  new_style.css — 강남노무법인 (k-labor.com) 통합 스타일시트
 *  기술스택: ASP VBScript / jQuery 1.7.2 / Font Awesome 6.4
 *  작성일: 2026
 * ================================================================
 *
 *  목차 (Table of Contents)
 *  ─────────────────────────────────────────────────────────────
 *  1.  CSS 변수 (CSS Variables)
 *  2.  리셋 & 기본 (Reset & Base)
 *  3.  공통 — 상단바 / 로고 (Topbar & Logo)           [공통]
 *  4.  공통 — GNB 글로벌 메뉴 (Global Navigation)      [공통]
 *  5.  공통 — 햄버거 / 모바일 드로어 (Mobile Menu)     [공통]
 *  6.  공통 — 푸터 (Footer)                            [공통]
 *  7.  공통 — 브레드크럼 (Breadcrumb)                  [서브공통]
 *  8.  공통 — 페이지 레이아웃 (Page Layout)            [서브공통]
 *  9.  공통 — 좌측 사이드 컬럼 (Side Column)           [서브공통]
 * 10.  공통 — 바로가기 / 주요업무 (Quick Links)         [서브공통]
 * 11.  공통 — 모바일 바로가기 / 주요업무               [서브공통]
 * 12.  공통 — 문의하기 박스 (Contact Box)              [서브공통]
 * ─────────────────────────────────────────────────────────────
 * 13.  index.asp     — 히어로 (Hero Video)
 * 14.  index.asp     — 사이트 검색바 (Search Bar)
 * 15.  index.asp     — 콘텐츠 그리드 / 카드 (Content Grid)
 * 16.  index.asp     — Row2 배너 카드 (Banner Cards)
 * 17.  index.asp     — 출판물 섹션 (Publications)
 * 18.  index.asp     — 서비스 섹션 (Services)
 * 19.  index.asp     — 앱 다운로드 (App Download)
 * 20.  index.asp     — iframe 슬라이드 (iframe Slide)
 * ─────────────────────────────────────────────────────────────
 * 21.  klabor_01.asp — 법인소개 다이어그램 (Diagram)
 * 22.  klabor_01.asp — 주요 수치 (Stats)
 * 23.  klabor_01.asp — 업무 분야 (Service List)
 * 24.  klabor_02.asp — 대표 인사말 (CEO Greeting)
 * 25.  klabor_02.asp — 서비스 카드 (Greeting Cards)
 * 26.  klabor_03.asp — 회사연혁 타임라인 (Timeline)
 * 27.  klabor_04.asp — 구성원 카드 그리드 (Team Grid)
 * 28.  klabor_04_view.asp — 구성원 프로필 (Profile View)
 * 29.  klabor_05.asp — 찾아오시는 길 (Directions)
 * 30.  klabor_07.asp — 업무실적 (Track Record)
 * ─────────────────────────────────────────────────────────────
 * 31.  반응형 — index.asp        @media max-width:768px
 * 32.  반응형 — 서브페이지 공통   @media max-width:768px
 * 33.  반응형 — klabor_02.asp    @media max-width:768px
 * 34.  반응형 — klabor_03.asp    @media max-width:768px
 * 35.  반응형 — klabor_04.asp    @media max-width:768px
 * 36.  반응형 — klabor_04_view   @media max-width:768px
 * 37.  반응형 — klabor_05.asp    @media max-width:768px
 * 38.  반응형 — klabor_07.asp    @media max-width:768px
 * ================================================================
 */


/* ================================================================
 *  1. CSS 변수 (CSS Variables)
 * ================================================================ */
/* ===== CSS VARIABLES ===== */
:root {
	--primary:      #0d2b5e;
	--primary-mid:  #1a3f7a;
	--primary-light:#1e5799;
	--accent:       #c8a96e;
	--accent-light: #e8d5a3;
	--white:        #ffffff;
	--gray-100:     #f4f6f9;
	--gray-200:     #e8ecf2;
	--gray-400:     #9aa3b2;
	--gray-600:     #5c6475;
	--gray-800:     #2c3240;
	--text-main:    #1e2533;
	--text-sub:     #5c6475;
	--border:       #d6dce8;
	--topbar-h:     2.75rem;
	/* ① topbar 높이 증가 */
  --nav-height:   3.5rem;
	--section-pad:  2.67rem;
	/* 4rem × 2/3 */
  --radius:       0.5rem;
	--shadow-card:  0 4px 24px rgba(13,43,94,.10);
	--shadow-hover: 0 8px 32px rgba(13,43,94,.18);
	--trans:        all 0.3s cubic-bezier(.4,0,.2,1);
	--content-max:  1200px;
}

/* ================================================================
 *  2. 리셋 & 기본 (Reset & Base)
 * ================================================================ *//* ===== RESET ===== */*,*::before,*::after {
	box-sizing:border-box;
	margin:0;
	padding:0;
}

html {
	scroll-behavior:smooth;
	font-size:16px;
	overflow-x:hidden;
}

body {
	font-family:'Noto Sans KR',sans-serif;
	font-size:1rem;
	color:var(--text-main);
	background:var(--white);
	line-height:1.7;
}

a {
	text-decoration:none;
	color:inherit;
	transition:var(--trans);
}

ul {
	list-style:none;
}

img {
	max-width:100%;
	display:block;
}

.container {
	max-width:var(--content-max);
	margin:0 auto;
	padding:0 1.5rem;
}

.more-link {
	font-size:.8rem;
	color:var(--gray-400);
	display:flex;
	align-items:center;
	gap:.3rem;
}

.more-link:hover {
	color:var(--primary);
}


/* ================================================================
 *  3. 공통 — 상단바 / 로고 (Topbar & Logo)
 * ================================================================ */

/* ===== ① TOPBAR + LOGO 같은 줄 ===== */


#top-combined {
	background: var(--primary);
	border-bottom: 1px solid rgba(255,255,255,.08);
	height: var(--topbar-h);
}

#top-combined .tc-inner {
	display: flex;
	align-items: center;
	height: 100%;
	justify-content: space-between;
}
/* 로고 (좌) */
.logo-top {
	display: flex;
	align-items: center;
	gap: .55rem;
	line-height: 1;
}

.logo-top a {
	display: flex;
	align-items: center;
	/* 세로 중앙 정렬 */
  gap: .6rem;
	color: var(--white);
	text-decoration: none;
}

.logo-top .logo-img {
	height: 1.9rem;
	width: auto;
	display: block;
	flex-shrink: 0;
	border-radius: .35rem;
}

.logo-top .logo-ko {
	font-family: 'Noto Serif KR', serif;
	font-size: 1.5rem;
	font-weight: 700;
	color: #ffffff;
	letter-spacing: -.01em;
	white-space: nowrap;
	line-height: 1;
}
/* ko모드: 강남노무법인 아래 영문 서브텍스트 */
.logo-top .logo-en {
	font-family: 'Playfair Display', serif;
	/* footer brand-name과 동일 */
  font-size: 1rem;
	font-weight: 700;
	color: var(--accent-light);
	/* logo-ko와 동일 색상 */
  letter-spacing: .04em;
	white-space: nowrap;
	line-height: 1;
}
/* en모드 영문 로고 전용 — PC에서는 .logo-en 그대로 상속 (index_koen.asp 방식) */
.logo-top .logo-en-only {
	/* 별도 font-size 없음 → .logo-en의 1rem 상속 */
  font-size: 1.26rem;
	white-space: nowrap;
	line-height: 1;
	color: var(--white);
}

.logo-en-br {
	display: none;
}

/* PC: <br> 숨김 */
/* 모바일 전용 줄바꿈 — PC에서는 공백 */
.logo-br::before {
	content: ' ';
}
/* 우측 링크들 */
.topbar-links {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.topbar-links a {
	color: rgba(255,255,255,.7);
	font-size: .78rem;
	display: flex;
	align-items: center;
	gap: .3rem;
	white-space: nowrap;
}

.topbar-links a:hover {
	color: var(--accent-light);
}
/* ② 언어 전환 버튼 — KO / EN 동시 표시 */
.lang-switch {
	display: flex;
	align-items: center;
	gap: 0;
	border: 1.5px solid rgba(255,255,255,.3);
	border-radius: 2rem;
	overflow: hidden;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .04em;
}

.lang-switch a {
	padding: .22rem .75rem;
	color: rgba(255,255,255,.55);
	background: transparent;
	transition: var(--trans);
	white-space: nowrap;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: .3rem;
}

.lang-switch a:hover {
	color: var(--white);
	background: rgba(255,255,255,.1);
}
/* 선택된 언어 — 골드 강조 */
.lang-switch a.lang-active {
	background: var(--accent);
	color: var(--primary);
	box-shadow: none;
}

.lang-switch a.lang-active:hover {
	background: var(--accent-light);
	color: var(--primary);
}
/* 구분선 */
.lang-switch .lang-div {
	width: 1px;
	height: 1.1rem;
	background: rgba(255,255,255,.3);
	flex-shrink: 0;
}
/* ① sticky-top: topbar+로고+GNB 묶어서 상단 고정 */
#sticky-top {
	position: sticky;
	top: 0;
	z-index: 1000;
	box-shadow: 0 2px 16px rgba(13,43,94,.12);
	transition: box-shadow .3s ease;
	/* sticky 정상 작동을 위해 transform/will-change 제거 */
  transform: none;
	will-change: auto;
}

#sticky-top.scrolled {
	box-shadow: 0 4px 28px rgba(13,43,94,.2);
}


/* ================================================================
 *  4. 공통 — GNB 글로벌 메뉴 (Global Navigation Bar)
 * ================================================================ */

/* ===== HEADER / ② GNB ===== */


#header {
	position: static;
	background: var(--white);
}

#header.scrolled {
	box-shadow: none;
}

#header .header-inner {
	display: flex;
	align-items: center;
	height: var(--nav-height);
}
/* ② GNB — ticker 너비(1200px container)에 꽉 차게 균등 배분 */
.gnb {
	flex: 1;
	display: flex;
	align-items: stretch;
	height: 100%;
}

.gnb > ul {
	display: flex;
	width: 100%;
	align-items: stretch;
}

.gnb > ul > li {
	flex: 1;
	position: relative;
	display: flex;
	align-items: stretch;
}

.gnb > ul > li > a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 1.056rem;
	font-weight: 600;
	color: var(--gray-800);
	white-space: nowrap;
	position: relative;
	padding: 0 .5rem;
	text-align: center;
}

.gnb > ul > li > a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 15%;
	right: 15%;
	height: 3px;
	background: var(--primary);
	transform: scaleX(0);
	transition: var(--trans);
	border-radius: 2px 2px 0 0;
}

.gnb > ul > li:hover > a {
	color: var(--primary);
}

.gnb > ul > li:hover > a::after {
	transform: scaleX(1);
}
/* 드롭다운 */
.gnb .dropdown {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(8px);
	min-width: 14rem;
	background: var(--white);
	border-top: 3px solid var(--primary);
	border-radius: 0 0 var(--radius) var(--radius);
	box-shadow: var(--shadow-hover);
	padding: .6rem 0;
	opacity: 0;
	visibility: hidden;
	transition: var(--trans);
	z-index: 200;
}

.gnb > ul > li:hover .dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.gnb .dropdown a {
	display: flex;
	align-items: center;
	gap: .45rem;
	padding: .25rem 0.5rem;
	font-size: .83rem;
	color: var(--gray-600);
	border-left: 3px solid transparent;
}

.gnb .dropdown a::before {
	content:'·';
	color:var(--accent);
	font-size:1.1rem;
	line-height:1;
}

.gnb .dropdown a:hover {
	color: var(--primary);
	background: var(--gray-100);
	border-left-color: var(--primary);
	padding-left: .7rem;
}
/* ③⑥ 모바일 햄버거 — 기본 숨김, 모바일에서만 표시 */
/* 모바일 드로어 — GNB 바로 아래부터 시작, 우측 */

/* 닫기버튼 — 햄버거 토글로 대체 *//* overlay — 드로어 아래만 */


.mobile-sub a:hover {
	color:var(--accent-light);
}

.mobile-lang {
	display:flex;
	gap:1rem;
	margin-top:1.5rem;
}

.mobile-lang a {
	flex:1;
	text-align:center;
	padding:.6rem;
	border:1px solid rgba(255,255,255,.3);
	border-radius:var(--radius);
	font-size:.85rem;
	color:var(--white);
}

.mobile-lang a:hover {
	background:var(--accent);
	border-color:var(--accent);
	color:var(--primary);
}


/* ================================================================
 *  5. 공통 — 햄버거 / 모바일 드로어 (Mobile Menu)
 * ================================================================ */

/* 햄버거 */
.hamburger span {
	display:block;
	width:100%;
	height:3px;
	background:var(--white);
	border-radius:3px;
	transition:var(--trans);
}

.hamburger.open span:nth-child(1) {
	transform:translateY(8px) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
	opacity:0;
}

.hamburger.open span:nth-child(3) {
	transform:translateY(-8px) rotate(-45deg);
}

/* 햄버거: 모바일에서 표시, PC에서 숨김 */
.hamburger {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 1.6rem;
	height: 1.1rem;
	padding: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	z-index: 1101;
	flex-shrink: 0;
	overflow: visible;
}

@media(min-width:769px) {
	.hamburger{display:none !important;
}

}

/* 모바일 드로어 */#mobile-overlay {
	display:block;
	visibility:hidden;
	opacity:0;
	pointer-events:none;
	position:fixed;
	top:calc(var(--topbar-h) * 2);
	left:0;
	right:0;
	bottom:0;
	z-index:1099;
	background:rgba(0,0,0,.45);
	transition:opacity .35s ease,visibility 0s linear .35s;
}

#mobile-overlay.open {
	visibility:visible;
	opacity:1;
	pointer-events:auto;
	transition:opacity .35s ease,visibility 0s linear 0s;
}

#mobile-menu {
	display:block;
	visibility:hidden;
	pointer-events:none;
	position:fixed;
	top:calc(var(--topbar-h) * 2);
	right:0;
	left:auto;
	bottom:0;
	width:90%;
	max-width:none;
	z-index:1100;
	background:rgba(13,43,94,.97);
	color:var(--white);
	padding:1.25rem 1.25rem 2rem;
	overflow-y:auto;
	transform:translateX(100%);
	transition:transform .35s cubic-bezier(.4,0,.2,1),visibility 0s linear .35s;
	box-shadow:-4px 0 24px rgba(0,0,0,.3);
}

#mobile-menu.open {
	visibility:visible;
	pointer-events:auto;
	transform:translateX(0);
	transition:transform .35s cubic-bezier(.4,0,.2,1),visibility 0s linear 0s;
}

.mobile-menu-list > li {
	border-bottom:1px solid rgba(255,255,255,.12);
}

.mobile-menu-list > li > a {
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:.5rem 0;
	font-size:.95rem;
	font-weight:500;
	color:var(--white);
}

.mobile-sub {
	padding-bottom:.3rem;
}

.mobile-sub a {
	display:block;
	padding:.1rem 0 .1rem .7rem;
	font-size:.83rem;
	color:rgba(255,255,255,.7);
	border-left:2px solid var(--accent);
	margin-bottom:.2rem;
}


/* ================================================================
 *  6. 공통 — 푸터 (Footer)
 * ================================================================ */

/* ===== FOOTER ===== */


.footer-brand .brand-sub {
	font-size:.72rem;
	color:var(--gray-400);
	letter-spacing:.08em;
	margin-bottom:.9rem;
}

/* 하단 배너 (강남행정사 사무소 링크) */.footer-banner {
	display:flex;
	align-items:center;
	gap:.55rem;
	max-width:15.5rem;
	margin-top:.85rem;
	padding:.5rem .6rem .5rem .5rem;
	background:rgba(255,255,255,.05);
	border:1px solid rgba(200,169,110,.4);
	border-radius:var(--radius);
	text-decoration:none;
	transition:var(--trans);
}

.footer-banner:hover {
	background:rgba(255,255,255,.09);
	border-color:var(--accent);
}

.footer-banner-icon {
	flex-shrink:0;
	width:1.9rem;
	height:1.9rem;
	border-radius:50%;
	background:var(--accent);
	display:flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
	padding:.2rem;
}

.footer-banner-icon img {
	width:100%;
	height:100%;
	object-fit:contain;
}

.footer-banner-text {
	flex:1;
	font-size:.74rem;
	line-height:1.3;
	font-weight:600;
	color:rgba(255,255,255,.85);
}

.footer-banner-go {
	flex-shrink:0;
	font-style:normal;
	font-size:.64rem;
	font-weight:700;
	letter-spacing:.03em;
	color:var(--primary);
	background:var(--accent);
	padding:.2rem .55rem;
	border-radius:999px;
}

.footer-bottom a {
	color:rgba(255,255,255,.52);
}

.footer-bottom a:hover {
	color:var(--accent-light);
}

/* ================================================================
 *  7. 공통 — 브레드크럼 (Breadcrumb)                   [서브공통]
 * ================================================================ *//* ===== BREADCRUMB ===== */#breadcrumb {
	background: var(--gray-100);
	border-bottom: 1px solid var(--border);
	padding: .6rem 0;
}

#breadcrumb .bc-inner {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: .82rem;
	color: var(--gray-400);
}

#breadcrumb a {
	color: var(--gray-600);
}

#breadcrumb a:hover {
	color: var(--primary);
}

#breadcrumb .bc-current {
	color: var(--primary);
	font-weight: 600;
}

#breadcrumb i {
	font-size: .7rem;
}


/* ================================================================
 *  8. 공통 — 페이지 레이아웃 (Page Layout)             [서브공통]
 * ================================================================ */

/* ===== PAGE LAYOUT ===== */


#page-wrap {
	display: flex;
	gap: 2rem;
	padding: 2.5rem 0 3.5rem;
	align-items: flex-start;
}
/* 좌측 서브메뉴 */
#sub-nav {
	flex-shrink: 0;
}

.sub-nav-title {
	background: var(--primary);
	color: var(--white);
	font-family: 'Noto Serif KR', serif;
	font-size: 1rem;
	font-weight: 700;
	padding: .9rem 1.2rem;
	border-radius: var(--radius) var(--radius) 0 0;
	display: flex;
	align-items: center;
	gap: .5rem;
}

.sub-nav-title i {
	color: var(--accent-light);
}

.sub-nav-list {
	border: 1px solid var(--border);
	border-top: none;
	border-radius: 0 0 var(--radius) var(--radius);
	overflow: hidden;
}

.sub-nav-list li {
	border-bottom: 1px solid var(--border);
}

.sub-nav-list li:last-child {
	border-bottom: none;
}

.sub-nav-list a {
	display: flex;
	align-items: center;
	gap: .1rem;
	padding: .35rem 0.3rem;
	font-size: .85rem;
	color: var(--gray-600);
	transition: var(--trans);
	line-height: 1.5;
}

.sub-nav-list a::before {
	content: '·';
	color: var(--accent);
	font-size: 1.1rem;
}

.sub-nav-list a:hover {
	color: var(--primary);
	background: var(--gray-100);
}

.sub-nav-list a.active {
	color: var(--primary);
	font-weight: 700;
	background: var(--gray-100);
	border-left: 3px solid var(--primary);
	padding-left: .3rem;
}
/* 우측 콘텐츠 */
#page-content {
	flex: 1;
	min-width: 0;
}
/* 페이지 타이틀 */
.page-title-bar {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-bottom: 1.75rem;
	padding-bottom: 1rem;
	border-bottom: 2px solid var(--primary);
}

.page-title-bar h1 {
	font-family: 'Noto Serif KR', serif;
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--primary);
}

.page-title-bar .title-icon {
	width: 2.5rem;
	height: 2.5rem;
	background: linear-gradient(135deg, var(--primary), var(--primary-mid));
	border-radius: .6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--white);
	font-size: 1rem;
	flex-shrink: 0;
}
/* 소개 텍스트 */
.intro-text {
	font-size: 1rem;
	line-height: 1.9;
	color: var(--text-main);
	margin-bottom: 2rem;
	padding: 1.5rem;
	background: var(--gray-100);
	border-left: 4px solid var(--primary);
	border-radius: 0 var(--radius) var(--radius) 0;
}
/* 서비스 다이어그램 */
/* 중앙 헤더 박스 */


/* 6개 카드 그리드 */


@media (max-width: 1024px) {
	.diagram-grid { grid-template-columns: repeat(2, 1fr);
}

}
@media (max-width: 480px) {
	.diagram-grid { grid-template-columns: repeat(2, 1fr);
	gap: .6rem;
}

.dg-card {
	padding: .85rem .6rem;
}

.dg-en {
	display: none;
}

}

/* 특징 카드 그리드 (기존) */
.feature-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	margin-bottom: 2rem;
}

.feature-card {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1.4rem 1.2rem;
	box-shadow: var(--shadow-card);
	transition: var(--trans);
	position: relative;
	overflow: hidden;
}

.feature-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(90deg, var(--primary), var(--accent));
}

.feature-card:hover {
	box-shadow: var(--shadow-hover);
	transform: translateY(-3px);
}

.feature-card .fc-icon {
	width: 2.8rem;
	height: 2.8rem;
	background: linear-gradient(135deg, var(--primary), var(--primary-mid));
	border-radius: .7rem;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--white);
	font-size: 1.15rem;
	margin-bottom: .9rem;
	box-shadow: 0 4px 12px rgba(13,43,94,.2);
}

.feature-card h3 {
	font-size: .95rem;
	font-weight: 700;
	color: var(--primary);
	margin-bottom: .5rem;
}

.feature-card p {
	font-size: .83rem;
	color: var(--text-sub);
	line-height: 1.7;
}
/* 주요 수치 */
/* 업무 분야 */


/* 연락처 박스 */


/* ================================================================
 *  9. 공통 — 좌측 사이드 컬럼 (Side Column)            [서브공통]
 * ================================================================ *//* 좌측 컬럼 전체 */
/* ================================================================
 * 10. 공통 — 바로가기 / 주요업무 사이드 (Quick Links)  [서브공통]
 * ================================================================ *//* 바로가기 사이드 */
/* 두 번째 블록(주요업무) — 골드 톤 */


/* 주요업무(2번째 블록) — 골드 헤더 */


/* 모바일 — 문의하기 위 바로가기 */


/* 모바일 두 번째 블록(주요업무) — 골드 톤 */


/* ===== RESPONSIVE ===== */@media (max-width: 1024px) {
	.feature-grid { grid-template-columns: repeat(2, 1fr);
}

.stats-row {
	grid-template-columns: repeat(2, 1fr);
}

.footer-inner {
	grid-template-columns: 1fr 1fr;
}

}
@media (max-width: 768px) {
	:root { --topbar-h: 1.8rem;
	--section-pad: 1.35rem;
}

/* section 간격 1/2 */
  #top-combined {
	height: calc(var(--topbar-h) * 2) !important;
}

#top-combined .tc-inner {
	height: 100%;
}

.container {
	padding: 0 .75rem;
}

#header {
	display: none !important;
}

.topbar-links > a:not(.hamburger) {
	display: none;
}

.lang-switch {
	display: flex !important;
}

.lang-switch a {
	display: flex !important;
	font-size: .72rem;
	padding: .2rem .65rem;
}

#top-combined .tc-inner {
	justify-content: space-between;
}

.topbar-links {
	margin-left: auto;
	gap: .5rem;
	justify-content: flex-end;
	align-items: center;
}

.logo-top .logo-ko {
	font-size: 1.26rem;
}

.logo-top .logo-img {
	height: 1.7rem;
}

/* 모바일: 서브메뉴 숨김, 콘텐츠 전체 너비 */
  .side-col {
	display: none;
}

.mobile-quicklinks {
	display: block;
}

#page-wrap {
	flex-direction: column;
	gap: 1rem;
	padding: 1.5rem 0 2rem;
}

.feature-grid {
	grid-template-columns: 1fr;
}

.stats-row {
	grid-template-columns: repeat(2, 1fr);
}

.service-list {
	grid-template-columns: 1fr;
}

.footer-inner {
	grid-template-columns: 1fr;
}

.footer-bottom {
	flex-direction: column;
	align-items: flex-start;
}

}
@media (max-width: 480px) {
	.stats-row { grid-template-columns: repeat(2, 1fr);
}

}


/* ================================================================
 * 11. 공통 — 모바일 바로가기 / 주요업무                [서브공통]
 * ================================================================ */


/* ================================================================
 * 12. 공통 — 문의하기 박스 (Contact Box)               [서브공통]
 * ================================================================ */
/* 연락처 박스 */
.contact-box {
	background: linear-gradient(135deg, #0a1f4a 0%, var(--primary-mid) 100%);
	border-radius: var(--radius);
	padding: 1.75rem 2rem;
	color: var(--white);
	display: flex;
	align-items: center;
	gap: 2rem;
	flex-wrap: wrap;
}

/* ================================================================
 * 13. index.asp — 히어로 (Hero Video Background)
 * ================================================================ *//* ===== ③④ HERO ===== */#hero-outer {
	width: 100%;
	background: #0a1a40;
}

#hero {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: 41rem;
	overflow: hidden;
	background: #0a1a40;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero-video-wrap {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: #0a1a40;
}

.hero-video-wrap video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* 상하 여백 없이 꽉 채움 */
  object-position: center center;
	background: #0a1a40;
}

.hero-video-wrap::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(10,26,64,.15);
	pointer-events: none;
}
/* ④ hero-content: 비디오 위 중앙 절대 배치 *//* ④ hero-content: 비디오 위 중앙 절대 배치 */
.hero-content {
	position: absolute;
	/*   inset: 0;
	*/
  bottom: 4.0rem;
	/* 고객상담 바(~2.5rem) + 여백 */
  left: 0;
	right: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0 1.5rem;
	line-height: normal;
	/*   -webkit-text-stroke: 0.1px black;
	검은색 테두리 */
}

.hero-slogan {
	font-family: 'Noto Serif KR', serif;
	font-size: clamp(1.35rem, 3.5vw, 2.4rem);
	font-weight: 700;
	color: var(--white);
	letter-spacing: -.01em;
	text-shadow: 0 3px 18px rgba(0,0,0,.4);
	animation: sloganIn 1.1s cubic-bezier(.2,.8,.4,1) both;
}

.hero-slogan em {
	color: #d6b458;
	font-style: normal;
	position: relative;
	display: inline-block;
	animation: sloganShine 1.4s .5s ease both;
}

@keyframes sloganIn {
	0% {
		opacity:0;
		transform:translateY(2.5rem) scale(.96);
	}
	60% {
		opacity:1;
	}
	100% {
		opacity:1;
		transform:translateY(0) scale(1);
	}
}


@keyframes sloganShine {
	0%   { opacity:0;
	letter-spacing:.2em;
}

40% {
	opacity:1;
}

100% {
	opacity:1;
	letter-spacing:-.01em;
}

}
/* 고객상담 바 — 이미지 참조: 진한 네이비 박스 중앙 배치 */
.hero-contact {
	position: absolute;
	bottom: 1rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .75rem;
	background: rgba(18, 36, 82, 0.92);
	border: none;
	border-radius: 4px;
	padding: .6rem 2.5rem;
	text-decoration: none;
	transition: var(--trans);
	white-space: nowrap;
	box-shadow: 0 2px 12px rgba(0,0,0,.35);
}

.hero-contact:hover {
	background: rgba(18, 36, 82, 1);
}

.hero-contact-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--white);
	font-size: 1.35rem;
	flex-shrink: 0;
}

.hero-contact-text {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	line-height: 1;
}

.hero-contact-text .ct-title {
	font-size: .95rem;
	font-weight: 700;
	color: var(--white);
	letter-spacing: .06em;
	white-space: nowrap;
}

.hero-contact-text .ct-tel {
	font-size: .95rem;
	font-weight: 400;
	color: var(--white);
	white-space: nowrap;
}

.hero-contact-text .ct-tel span {
	color: var(--white);
	font-family: 'Noto Sans KR', sans-serif;
	margin-left: .25rem;
}

@media (max-width: 768px) {

  .hero-contact {
  	padding: .45rem 1.25rem;
  	gap: .5rem;
  	bottom: .6rem;
  }

  .hero-contact-text {
  	gap: .75rem;
  }

  .hero-contact-icon {
  	font-size: 1.1rem;
  }

  .hero-contact-text .ct-title {
  	font-size: .8rem;
  }

  .hero-contact-text .ct-tel {
  	font-size: .8rem;
  }
}


/* ⑥ 햄버거 — 항상 보이게, 크기/색상 강화 */ — container 너비, 중앙정렬 ===== */
#wage-ticker-wrap {
	background: #0d2b5e !important;
	border-top: 1px solid rgba(255,255,255,.08);
	border-bottom: 1px solid rgba(255,255,255,.08);
}

#wage-ticker {
	width: 100%;
	padding: 0;
	display: flex;
	align-items: stretch;
	height: 2.625rem;
	overflow: hidden;
	position: relative;
	background: #0d2b5e !important;
	box-sizing: border-box;
}

.ticker-inner {
	width: 100%;
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 0 1.5rem;
	display: flex;
	align-items: stretch;
	height: 100%;
}

.ticker-label {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: .4rem;
	padding: 0 1rem 0 0;
	color: var(--accent-light);
	font-size: .8rem;
	/* ← 통일 기준 폰트 */
  font-weight: 700;
	letter-spacing: .05em;
	white-space: nowrap;
	border-right: 1px solid rgba(255,255,255,.15);
	margin-right: .75rem;
}

.ticker-label i {
	color: var(--accent);
	font-size: .8rem;
}

.ticker-viewport {
	flex: 1;
	overflow: hidden;
	position: relative;
	-webkit-mask-image: linear-gradient(to right,transparent 0%,black 4%,black 96%,transparent 100%);
	mask-image: linear-gradient(to right,transparent 0%,black 4%,black 96%,transparent 100%);
}

.ticker-track {
	display: flex;
	flex-direction: column;
	transition: transform .45s cubic-bezier(.4,0,.2,1);
}

.ticker-item {
	height: 2.625rem;
	display: flex;
	align-items: center;
	gap: .9rem;
	padding: 0 .5rem;
	flex-shrink: 0;
	white-space: nowrap;
}
/* 아이콘 */
.ticker-item-icon {
	color:var(--accent);
	font-size:.8rem;
	flex-shrink:0;
}
/* 항목명 — 보조색 */
.ticker-item-label {
	font-size:.85rem;
	color:yellow;
	flex-shrink:0;
}
/* 핵심 수치 — 골드, 굵게 (detail strong과 동일) */
.ticker-item-value {
	font-family:'Noto Sans KR',sans-serif;
	font-size:.8rem;
	font-weight:700;
	color:var(--accent-light);
	flex-shrink:0;
}
/* 수치 단위 — 보조색 */
.ticker-item-value em {
	font-family:'Noto Sans KR',sans-serif;
	font-size:.8rem;
	font-weight:400;
	color:rgba(255,255,255,.55);
	font-style:normal;
	margin-left:.15rem;
}
/* 상세 설명 — 보조색 */
.ticker-item-detail {
	font-size:.8rem;
	color:rgba(255,255,255,.55);
	flex-shrink:0;
}

.ticker-item-detail strong {
	color:var(--accent-light);
	font-weight:700;
}
/* 구분자 */
.ticker-sep {
	color:rgba(255,255,255,.25);
	font-size:.8rem;
	flex-shrink:0;
	margin:0 .2rem;
}
/* 카운터 */
.ticker-counter {
	flex-shrink:0;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0 .65rem;
	border-left:1px solid rgba(255,255,255,.1);
	font-size:.8rem;
	color:rgba(255,255,255,.55);
	white-space:nowrap;
	font-variant-numeric:tabular-nums;
}

.ticker-counter .cur {
	color:var(--accent-light);
	font-weight:700;
}

.ticker-controls {
	flex-shrink:0;
	display:flex;
	flex-direction:column;
	border-left:1px solid rgba(255,255,255,.1);
}

.ticker-btn {
	flex:1;
	width:2rem;
	display:flex;
	align-items:center;
	justify-content:center;
	background:rgba(255,255,255,.04);
	border:none;
	color:rgba(255,255,255,.55);
	font-size:.7rem;
	cursor:pointer;
	transition:var(--trans);
	line-height:1;
}

.ticker-btn:first-child {
	border-bottom:1px solid rgba(255,255,255,.08);
}

.ticker-btn:hover {
	background:rgba(200,169,110,.2);
	color:var(--accent-light);
}


/* ================================================================
 * 14. index.asp — 사이트 검색바 (Search Bar)
 * ================================================================ */

/* ===== ⑥ 사이트 검색바 — container 너비 중앙정렬 ===== */


#site-search {
	background: var(--gray-100);
	border-bottom: 1px solid var(--border);
	padding: .6rem 0;
}

#site-search .search-inner {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 0 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	/* 중앙정렬 */
}

.search-label {
	display: none;
}

/* 타이틀 제거 */
.search-form {
	width: 100%;
	max-width: 700px;
	/* 좌우 균형 — 컨테이너 안에서 중앙 */
  display: flex;
	align-items: center;
	background: var(--white);
	border: 1.5px solid var(--border);
	border-radius: 2rem;
	padding: 0 .4rem 0 1.1rem;
	gap: .3rem;
	transition: var(--trans);
}

.search-form:focus-within {
	border-color:var(--primary);
	box-shadow:0 0 0 3px rgba(13,43,94,.07);
}

.search-form select {
	background:transparent;
	border:none;
	outline:none;
	font-size:.82rem;
	color:var(--gray-600);
	font-family:'Noto Sans KR',sans-serif;
	padding:.46rem .25rem .46rem 0;
	cursor:pointer;
	border-right:1px solid var(--border);
	margin-right:.4rem;
}

.search-form input {
	flex:1;
	background:transparent;
	border:none;
	outline:none;
	font-size:.86rem;
	color:var(--text-main);
	font-family:'Noto Sans KR',sans-serif;
	padding:.46rem 0;
	min-width:0;
}

.search-form input::placeholder {
	color:var(--gray-400);
}

.search-form button {
	flex-shrink:0;
	background:var(--primary);
	border:none;
	color:var(--white);
	width:2rem;
	height:2rem;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	font-size:.8rem;
	transition:var(--trans);
	margin:.2rem;
}

.search-form button:hover {
	background:var(--primary-mid);
	transform:scale(1.08);
}


/* ================================================================
 * 15. index.asp — 콘텐츠 그리드 / 카드 (Content Grid & Cards)
 * ================================================================ */

/* ===== CONTENT SECTIONS ===== */


.content-section {
	padding: var(--section-pad) 0;
}

.content-section.gray-bg {
	background: var(--gray-100);
}
/* ⑦ Row 1 & ⑧ Row 2 — 3열 */
#content-grid .grid-3col {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 1.4rem;
	margin-bottom: 1.4rem;
	align-items: stretch;
	/* 모든 카드 높이 동일 */
}
/* 카드 공통 */
.card {
	background:var(--white);
	border-radius:var(--radius);
	border:1px solid var(--border);
	box-shadow:var(--shadow-card);
	overflow:hidden;
	transition:var(--trans);
	display:flex;
	flex-direction:column;
}

.card:hover {
	box-shadow:var(--shadow-hover);
	transform:translateY(-4px);
}

.card-header {
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:1rem 1.2rem .7rem;
	border-bottom:1px solid var(--gray-200);
	flex-shrink:0;
}

.card-header-title {
	font-size:.93rem;
	font-weight:700;
	color:var(--primary);
	display:flex;
	align-items:center;
	gap:.45rem;
}

.card-header-title i {
	color:var(--accent);
}

.card-body {
	padding:.7rem 1.2rem 1rem;
	flex:1;
	display:flex;
	flex-direction:column;
}
/* 게시판 리스트 */
.board-list li {
	height:2.6rem;
	padding:0;
	border-bottom:1px dashed var(--gray-200);
	display:flex;
	align-items:center;
	gap:.45rem;
}

.board-list li:last-child {
	border-bottom:none;
}

.board-list li::before {
	content:'';
	width:5px;
	height:5px;
	background:var(--accent);
	border-radius:50%;
	flex-shrink:0;
}

.board-list a {
	font-size:.83rem;
	color:var(--text-sub);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	display:block;
	flex:1;
}

.board-list a:hover {
	color:var(--primary);
}
/* 기고문 리스트 */
.contrib-list li {
	height:2.6rem;
	padding:0;
	border-bottom:1px dashed var(--gray-200);
	display:flex;
	gap:.55rem;
	align-items:center;
}

.contrib-list li:last-child {
	border-bottom:none;
}

.contrib-badge {
	flex-shrink:0;
	background:var(--primary);
	color:var(--white);
	font-size:.65rem;
	padding:.13rem .42rem;
	border-radius:2px;
	white-space:nowrap;
}

.contrib-list a {
	font-size:.83rem;
	color:var(--text-sub);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	display:block;
	flex:1;
}

.contrib-list a:hover {
	color:var(--primary);
}
/* 강의 카드 */
.lecture-highlight {
	background:linear-gradient(135deg,var(--primary) 0%,var(--primary-mid) 100%);
	color:var(--white);
	border:none;
	display:flex;
	flex-direction:column;
}

.lecture-highlight .card-header {
	border-bottom:1px solid rgba(255,255,255,.15);
}

.lecture-highlight .card-header-title {
	color:var(--accent-light);
}

.lecture-highlight .card-header-title i {
	color:var(--accent-light);
}

.lecture-highlight .more-link {
	color:rgba(255,255,255,.55);
}

.lecture-highlight .more-link:hover {
	color:var(--accent-light);
}
/* 좌우 2단 레이아웃 */
.lecture-body-wrap {
	display: flex;
	gap: .85rem;
	align-items: stretch;
	flex: 1;
	min-height: 0;
	overflow: hidden;
}
/* 좌: 책 표지 */
.lecture-cover {
	flex-shrink: 0;
	width: 5.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: .4rem;
}

.lecture-cover-img {
	width: 5.5rem;
	height: 7.8rem;
	border-radius: 3px 6px 6px 3px;
	overflow: hidden;
	box-shadow: 3px 4px 14px rgba(0,0,0,.35);
	background: linear-gradient(160deg,#1a3f7a 0%,#0d2b5e 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .62rem;
	font-weight: 700;
	color: var(--accent-light);
	text-align: center;
	line-height: 1.4;
	padding: .5rem;
	transition: var(--trans);
}

.lecture-cover-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lecture-cover-label {
	font-size: .62rem;
	color: rgba(255,255,255,.5);
	text-align: center;
	line-height: 1.3;
	word-break: keep-all;
}

.lecture-content {
	flex: 1;
	min-width: 0;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
}

.lecture-content::-webkit-scrollbar {
	width: 3px;
}

.lecture-content::-webkit-scrollbar-track {
	background: rgba(255,255,255,.1);
	border-radius: 2px;
}

.lecture-content::-webkit-scrollbar-thumb {
	background: var(--accent);
	border-radius: 2px;
}

.lecture-info {
	display:flex;
	flex-direction:column;
	gap:.5rem;
}

.lecture-row {
	display:flex;
	gap:.5rem;
	align-items:flex-start;
}

.lecture-row i {
	color:var(--accent-light);
	margin-top:.15rem;
	font-size:.8rem;
	flex-shrink:0;
	width:.9rem;
}

.lecture-row span {
	font-size:.8rem;
	color:rgba(255,255,255,.84);
	line-height:1.5;
}

.lecture-row strong {
	color:var(--white);
}

.lecture-cta {
	margin-top:.75rem;
	display:inline-flex;
	align-items:center;
	gap:.4rem;
	background:var(--accent);
	color:var(--primary);
	font-size:.78rem;
	font-weight:700;
	padding:.4rem .9rem;
	border-radius:var(--radius);
	transition:var(--trans);
	align-self:flex-start;
}

.lecture-cta:hover {
	background:#b8956a;
}
/* 하단 꽉찬 버튼 */
.lecture-cta-full {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	width: calc(100% + 2.4rem);
	margin: .75rem -1.2rem -1rem;
	padding: .65rem 1rem;
	background: var(--accent);
	color: var(--primary);
	font-size: .85rem;
	font-weight: 700;
	text-decoration: none;
	transition: var(--trans);
	letter-spacing: .03em;
	border-radius: var(--radius);
}

.lecture-cta-full:hover {
	background: #b8956a;
	color: var(--primary);
}
/* 노동사건 사례모음 *//* 노동사건 사례모음 */
.case-list li {
	height:2.6rem;
	padding:0;
	border-bottom:1px dashed var(--gray-200);
	display:flex;
	align-items:center;
}

.case-list li:last-child {
	border-bottom:none;
}

.case-list .case-season {
	flex-shrink:0;
	display:inline-block;
	background:var(--accent);
	color:var(--primary);
	font-size:.65rem;
	font-weight:700;
	padding:.08rem .45rem;
	border-radius:2px;
	margin-right:.4rem;
	white-space:nowrap;
}

.case-list a {
	font-size:.83rem;
	color:var(--text-sub);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	display:block;
	flex:1;
}

.case-list a:hover {
	color:var(--primary);
}


/* ================================================================
 * 16. index.asp — Row2 배너 카드 (Quick Banner Cards)
 * ================================================================ */

/* ===== ⑧ Row 2 배너 카드 ===== */


.quick-banner-card {
	background: var(--white);
	border-radius: var(--radius);
	border: 1px solid var(--border);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.quick-banner-card .card-header {
	border-bottom:1px solid var(--gray-200);
	padding:1rem 1.2rem .7rem;
	flex-shrink:0;
}

.quick-banner-card .card-body {
	padding:.7rem 1.2rem 1rem;
	flex:1;
	display:flex;
	flex-direction:column;
}
/* 항상 2열, 3행 균등 채움 */
.quick-links-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(3, 1fr);
	gap: .45rem;
	flex: 1;
	height: 100%;
}
/* 아이콘 + 텍스트 가로 배치 */
.quick-link-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: .6rem;
	padding: .4rem .75rem;
	background: var(--gray-100);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	text-decoration: none;
	transition: var(--trans);
	cursor: pointer;
	height: 100%;
	min-height: 2.4rem;
}

.quick-link-item:hover {
	background: var(--primary);
	border-color: var(--primary);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(13,43,94,.18);
}

.quick-link-item:hover .ql-icon,
.quick-link-item:hover .ql-label {
	color: var(--white);
}

.ql-icon {
	font-size: 1.1rem;
	color: var(--primary);
	transition: var(--trans);
	flex-shrink: 0;
	width: 1.25rem;
	text-align: center;
}

.ql-label {
	font-size: .75rem;
	font-weight: 600;
	color: var(--primary);
	line-height: 1.35;
	transition: var(--trans);
	word-break: keep-all;
}
/* 전화번호 배너 — 항상 2칸 span */
.quick-tel-item {
	grid-column: span 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	padding: .55rem .8rem;
	background: linear-gradient(135deg, var(--primary) 0%, var(--primary-mid) 100%);
	border-radius: var(--radius);
	color: var(--white);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .02em;
	min-height: 2.6rem;
}

.quick-tel-item i {
	color: var(--accent-light);
	font-size: .9rem;
}

.quick-tel-item span {
	color: var(--accent-light);
	font-size: .95rem;
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 700;
}


/* ================================================================
 * 17. index.asp — 출판물 섹션 (Publications Section)
 * ================================================================ */

/* ===== ⑨ 출판물 섹션 — 좌측 타이틀 + 우측 가로 스크롤 ===== */


#pub-section {
	margin-top: 1.4rem;
	background: var(--white);
	border-radius: var(--radius);
	border: 1px solid var(--border);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	display: flex;
	align-items: stretch;
	min-height: 8.5rem;
}

.pub-title-col {
	flex-shrink: 0;
	width: 8rem;
	background: linear-gradient(160deg, var(--primary) 0%, var(--primary-mid) 100%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1.2rem .8rem;
	text-align: center;
	gap: .5rem;
}

.pub-title-col i {
	color: var(--accent-light);
	font-size: 1.4rem;
}

.pub-title-col h3 {
	font-family: 'Noto Serif KR', serif;
	font-size: .88rem;
	font-weight: 700;
	color: var(--white);
	line-height: 1.4;
}

.pub-title-col a {
	font-size: .65rem;
	color: var(--accent-light);
	border: 1px solid rgba(200,169,110,.4);
	padding: .18rem .55rem;
	border-radius: 2rem;
	margin-top: .3rem;
	transition: var(--trans);
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	white-space: nowrap;
	/* 한 줄 강제 */
}

.pub-title-col a:hover {
	background: var(--accent);
	color: var(--primary);
}

.pub-scroll-wrap {
	flex: 1;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	padding: 1rem 1rem 1rem .8rem;
	display: flex;
	align-items: center;
}

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

.pub-scroll-wrap::-webkit-scrollbar-track {
	background: var(--gray-200);
	border-radius: 2px;
}

.pub-scroll-wrap::-webkit-scrollbar-thumb {
	background: var(--accent);
	border-radius: 2px;
}
/* iframe 스크롤바 — pub-scroll-wrap과 동일
.iframe-slide-scroll::-webkit-scrollbar { height: 4px; width: 4px; }
.iframe-slide-scroll::-webkit-scrollbar-track { background: var(--gray-200); border-radius: 2px; }
.iframe-slide-scroll::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 2px; }  */
.pub-books {
	display: flex;
	gap: .85rem;
	align-items: flex-start;
	min-width: max-content;
}

.pub-book {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .45rem;
	text-decoration: none;
	transition: var(--trans);
	width: 5.5rem;
	flex-shrink: 0;
}

.pub-book:hover {
	transform: translateY(-4px);
}

.pub-book-cover {
	width: 5.5rem;
	height: 7.5rem;
	border-radius: 4px 6px 6px 4px;
	overflow: hidden;
	box-shadow: 2px 3px 10px rgba(0,0,0,.18);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .6rem;
	font-weight: 700;
	text-align: center;
	line-height: 1.35;
	padding: .5rem;
	transition: var(--trans);
}

.pub-book:hover .pub-book-cover {
	box-shadow: 4px 6px 18px rgba(0,0,0,.28);
}

.pub-book-title {
	font-size: .65rem;
	color: var(--text-sub);
	text-align: center;
	line-height: 1.4;
	max-width: 5.5rem;
}

.pub-book:hover .pub-book-title {
	color: var(--primary);
}
/* 책 표지 색상 팔레트 */
.bc-1 {
	background:linear-gradient(160deg,#1a3f7a 0%,#0d2b5e 100%);
	color:#e8d5a3;
}

.bc-2 {
	background:linear-gradient(160deg,#2e6b3e 0%,#1a4228 100%);
	color:#c8e6c9;
}

.bc-3 {
	background:linear-gradient(160deg,#8b1a1a 0%,#5c0f0f 100%);
	color:#ffcdd2;
}

.bc-4 {
	background:linear-gradient(160deg,#5c3a1e 0%,#3e2510 100%);
	color:#ffe0b2;
}

.bc-5 {
	background:linear-gradient(160deg,#1a4a6b 0%,#0d2b45 100%);
	color:#b3e5fc;
}

.bc-6 {
	background:linear-gradient(160deg,#4a1a6b 0%,#2d0d45 100%);
	color:#e1bee7;
}

.bc-7 {
	background:linear-gradient(160deg,#1a5c3a 0%,#0d3a25 100%);
	color:#a5d6a7;
}

.bc-8 {
	background:linear-gradient(160deg,#6b3a1a 0%,#452510 100%);
	color:#ffcc80;
}

.bc-9 {
	background:linear-gradient(160deg,#1a1a6b 0%,#0d0d45 100%);
	color:#9fa8da;
}

.bc-10 {
	background:linear-gradient(160deg,#3a1a6b 0%,#250d45 100%);
	color:#ce93d8;
}

.bc-11 {
	background:linear-gradient(160deg,#1a6b6b 0%,#0d4545 100%);
	color:#80deea;
}

.bc-12 {
	background:linear-gradient(160deg,#6b6b1a 0%,#45450d 100%);
	color:#fff176;
}


/* ================================================================
 * 18. index.asp — 서비스 섹션 (Services Section)
 * ================================================================ */

/* ===== SERVICES SECTION ===== */


#services {
	background: var(--gray-100);
}

.section-subtitle {
	font-size:.85rem;
	color:var(--gray-400);
	letter-spacing:.12em;
	text-transform:uppercase;
	margin-bottom:.2rem;
}

.section-title {
	font-family:'Noto Serif KR',serif;
	font-size:1.6rem;
	font-weight:700;
	color:var(--primary);
	margin-bottom:.4rem;
}

.section-title span {
	color:var(--accent);
}

.divider-line {
	width:3rem;
	height:3px;
	background:linear-gradient(90deg,var(--primary),var(--accent));
	border-radius:2px;
	margin:.65rem 0 1.4rem;
}

.service-cards {
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:1.2rem;
	margin-top:.5rem;
}

.svc-card {
	background:var(--white);
	border-radius:var(--radius);
	padding:1.1rem 1.2rem;
	border:1px solid var(--border);
	transition:var(--trans);
	position:relative;
	overflow:hidden;
	display:flex;
	align-items:center;
	gap:1rem;
	text-decoration:none;
}

.svc-card::before {
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:4px;
	height:100%;
	background:var(--accent);
	transform:scaleY(0);
	transform-origin:bottom;
	transition:var(--trans);
}

.svc-card:hover {
	box-shadow:var(--shadow-hover);
	transform:translateY(-3px);
}

.svc-card:hover::before {
	transform:scaleY(1);
}
/* 왼쪽 콘텐츠 영역 */
.svc-card-body {
	flex:1;
	min-width:0;
}
/* 아이콘 + 타이틀 한 줄 */
.svc-card-head {
	display:flex;
	align-items:center;
	gap:.65rem;
	margin-bottom:.4rem;
}

.svc-icon {
	flex-shrink:0;
	width:2rem;
	height:2rem;
	background:linear-gradient(135deg,var(--primary),var(--primary-mid));
	border-radius:.5rem;
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--white);
	font-size:.85rem;
	box-shadow:0 3px 8px rgba(13,43,94,.2);
}

.svc-title {
	font-size:.9rem;
	font-weight:700;
	color:var(--primary);
	line-height:1.3;
}
/* 설명 텍스트 */
.svc-desc {
	font-size:.78rem;
	color:var(--text-sub);
	line-height:1.6;
}
/* 우측 GO 아이콘 — 세로 중앙 */
.svc-go {
	flex-shrink:0;
	width:2rem;
	height:2rem;
	background:var(--gray-100);
	border:1px solid var(--border);
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--primary);
	font-size:.75rem;
	transition:var(--trans);
}

.svc-card:hover .svc-go {
	background:var(--accent);
	border-color:var(--accent);
	color:var(--primary);
	transform:scale(1.15);
}


/* ================================================================
 * 19. index.asp — 앱 다운로드 (App Download Section)
 * ================================================================ */

/* ===== 앱 다운로드 섹션 ===== */


#app-download {
	background: var(--gray-100);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	padding: 1.5rem 0;
}

.app-download-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
}

.app-store-item {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding: 0 3rem;
	flex: 1;
	max-width: 50%;
}

.app-store-item + .app-store-item {
	border-left: 1px solid var(--border);
}
/* QR코드 */
.app-qr {
	flex-shrink: 0;
	border: 1px solid var(--border);
	border-radius: .375rem;
	overflow: hidden;
	background: var(--white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.app-qr img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
}
/* 텍스트 정보 */
.app-info {
	flex: 1;
	min-width: 0;
	text-align: center;
}

.app-keyword-title {
	font-size: .72rem;
	color: var(--gray-600);
	font-weight: 500;
	margin-bottom: .1rem;
}

.app-keyword {
	font-size: .88rem;
	font-weight: 700;
	color: var(--primary);
	margin-bottom: .35rem;
}

.app-keyword-ko {
	font-size: .85rem;
	font-weight: 700;
	color: var(--accent);
}

@media (max-width: 768px) {

  .app-download-inner {
  	flex-direction: column;
  	gap: 1rem;
  }

  .app-store-item {
  	max-width: 100%;
  	border-left: none !important;
  	padding: 0 1rem;
  	width: 100%;
  	flex-direction: column;
  	/* QR 위, 텍스트 아래 */
    align-items: center;
  	text-align: center;
  }

  .app-store-item + .app-store-item {
  	border-top: 1px solid var(--border);
  	padding-top: 1rem;
  }

  .app-info {
  	text-align: center;
  }
}


@media (max-width: 480px) {
	.app-store-item { gap: .75rem;
}

}


/* ================================================================
 * 20. index.asp — iframe 슬라이드 (iframe Slide Section)
 * ================================================================ */
/* ===== iframe 슬라이드 섹션 ===== */
#iframe-slide-section {
	background: var(--white);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	padding: 1rem 0;
}
/* pub-section과 동일하게 container 안에서 처리 */
#iframe-slide-section .container {
	overflow: hidden;
}
/* 반응형 가로 스크롤 래퍼 */
.iframe-slide-scroll {
	width: 100%;
	overflow-x: auto;
	overflow-y: no;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--radius);
	border: 1px solid var(--border);
	box-shadow: var(--shadow-card);
	height: 600px;
}
/* iframe 감싸는 inner */
.iframe-slide-inner {
	min-width: 950px;
	width: 100%;
	display: block;
	line-height: 0;
}

#myiframe {
	display: block;
	width: 950px;
	min-width: 950px;
	height: 600px;
	/* 고정 높이 */
  border: none;
	overflow: hidden;
	background: #eee;
}


/* ================================================================
 * 21. klabor_01.asp — 법인소개 서비스 다이어그램 (Diagram)
 * ================================================================ */

/* 서비스 다이어그램 */
.diagram-wrap {
	margin-bottom: 2rem;
}
/* 중앙 헤더 박스 */
.diagram-center {
	background: linear-gradient(135deg, var(--primary) 0%, var(--primary-mid) 100%);
	border-radius: var(--radius);
	padding: 1.1rem 1.5rem;
	text-align: center;
	margin-bottom: 1rem;
	position: relative;
}

.diagram-center::after {
	content: '';
	position: absolute;
	bottom: -1rem;
	left: 50%;
	transform: translateX(-50%);
	width: 2px;
	height: 1rem;
	background: var(--accent);
}

.dc-en {
	font-size: .82rem;
	color: rgba(255,255,255,.65);
	letter-spacing: .05em;
	margin-bottom: .2rem;
}

.dc-ko {
	font-family: 'Noto Serif KR', serif;
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--white);
	margin-bottom: .3rem;
}

.dc-sub {
	font-size: .78rem;
	color: var(--accent-light);
	font-weight: 600;
	letter-spacing: .04em;
}
/* 6개 카드 그리드 */
.diagram-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .9rem;
	padding-top: 1rem;
	border-top: 2px solid var(--accent);
}

.dg-card {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1.1rem .9rem;
	text-align: center;
	box-shadow: var(--shadow-card);
	transition: var(--trans);
	position: relative;
	overflow: hidden;
}

.dg-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--primary), var(--accent));
	transform: scaleX(0);
	transition: var(--trans);
}

.dg-card:hover {
	box-shadow: var(--shadow-hover);
	transform: translateY(-3px);
}

.dg-card:hover::before {
	transform: scaleX(1);
}

.dg-icon {
	width: 2.4rem;
	height: 2.4rem;
	background: linear-gradient(135deg, var(--primary), var(--primary-mid));
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--white);
	font-size: 1rem;
	margin: 0 auto .7rem;
	box-shadow: 0 3px 10px rgba(13,43,94,.2);
	transition: var(--trans);
}

.dg-card:hover .dg-icon {
	background: linear-gradient(135deg, var(--accent), #b8956a);
}

.dg-en {
	font-size: .88rem;
	color: var(--gray-400);
	line-height: 1.5;
	margin-bottom: .4rem;
	font-style: italic;
}

.dg-ko {
	font-size: .85rem;
	font-weight: 700;
	color: var(--primary);
	line-height: 1.35;
	word-break: keep-all;
}


/* ================================================================
 * 22. klabor_01.asp — 주요 수치 (Stats Row)
 * ================================================================ */

/* 주요 수치 */
.stats-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	margin-bottom: 2rem;
}

.stat-box {
	background: linear-gradient(135deg, var(--primary) 0%, var(--primary-mid) 100%);
	border-radius: var(--radius);
	padding: 1.25rem 1rem;
	text-align: center;
	color: var(--white);
}

.stat-box .sb-num {
	font-family: 'Playfair Display', serif;
	font-size: 2rem;
	font-weight: 700;
	color: var(--accent-light);
	line-height: 1.1;
}

.stat-box .sb-label {
	font-size: .78rem;
	color: rgba(255,255,255,.7);
	margin-top: .3rem;
}
/* 업무 분야 */
/* 연락처 박스 */


/* 좌측 컬럼 전체 */
/* 바로가기 사이드 */
/* 두 번째 블록(주요업무) — 골드 톤 */


/* 주요업무(2번째 블록) — 골드 헤더 */


/* 모바일 — 문의하기 위 바로가기 */


/* 모바일 두 번째 블록(주요업무) — 골드 톤 */


/* ===== RESPONSIVE ===== *//* ================================================================
 * 23. klabor_01.asp — 업무 분야 목록 (Service List)
 * ================================================================ *//* 업무 분야 */.service-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: .75rem;
	margin-bottom: 2rem;
}

.service-list-item {
	display: flex;
	align-items: center;
	gap: .65rem;
	padding: .75rem 1rem;
	background: var(--gray-100);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	font-size: .88rem;
	color: var(--text-main);
	transition: var(--trans);
	text-decoration: none;
}

.service-list-item:hover {
	background: var(--primary);
	color: var(--white);
	border-color: var(--primary);
}

.service-list-item i {
	color: var(--accent);
	font-size: .9rem;
	flex-shrink: 0;
	transition: var(--trans);
}

.service-list-item:hover i {
	color: var(--accent-light);
}
/* 연락처 박스 */
.contact-box {
	background: linear-gradient(135deg, #0a1f4a 0%, var(--primary-mid) 100%);
	border-radius: var(--radius);
	padding: 1.75rem 2rem;
	color: var(--white);
	display: flex;
	align-items: center;
	gap: 2rem;
	flex-wrap: wrap;
}

.contact-box h3 {
	font-family: 'Noto Serif KR', serif;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--accent-light);
	margin-bottom: .75rem;
}

.contact-info {
	flex: 1;
	min-width: 14rem;
}

.contact-info p {
	font-size: .88rem;
	color: rgba(255,255,255,.8);
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-bottom: .4rem;
}

.contact-info i {
	color: var(--accent);
	flex-shrink: 0;
}

.contact-btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .65rem 1.5rem;
	background: var(--accent);
	color: var(--primary);
	font-size: .88rem;
	font-weight: 700;
	border-radius: var(--radius);
	transition: var(--trans);
	white-space: nowrap;
}

.contact-btn:hover {
	background: var(--accent-light);
}
/* 좌측 컬럼 전체 */
.side-col {
	flex-shrink: 0;
	width: 13rem;
	display: flex;
	flex-direction: column;
}
/* 바로가기 사이드 */
.side-quicklinks {
	margin-top: 1.2rem;
}
/* 두 번째 블록(주요업무) — 골드 톤 */
.side-quicklinks.side-ql-secondary {
	margin-top: .9rem;
}

.side-quicklinks-title {
	background: var(--primary-mid);
	color: var(--white);
	font-size: .82rem;
	font-weight: 700;
	padding: .7rem 1.1rem;
	border-radius: var(--radius) var(--radius) 0 0;
	display: flex;
	align-items: center;
	gap: .4rem;
}

.side-quicklinks-title i {
	color: var(--accent-light);
	font-size: .82rem;
}
/* 주요업무(2번째 블록) — 골드 헤더 */
.side-ql-secondary .side-quicklinks-title {
	background: linear-gradient(135deg, var(--accent) 0%, #b8956a 100%);
	color: var(--primary);
}

.side-ql-secondary .side-quicklinks-title i {
	color: var(--primary);
}

.side-ql-secondary .side-ql-item:hover {
	background: var(--accent);
	color: var(--primary);
}

.side-ql-secondary .side-ql-item:hover i {
	color: var(--primary);
}

.side-ql-grid {
	border: 1px solid var(--border);
	border-top: none;
	border-radius: 0 0 var(--radius) var(--radius);
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr;
	/* PC: 1열 한 줄씩 */
}

.side-ql-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: .55rem;
	padding: .55rem .9rem;
	background: var(--gray-100);
	border-bottom: 1px solid var(--border);
	text-align: left;
	text-decoration: none;
	transition: var(--trans);
	font-size: .78rem;
	font-weight: 500;
	color: var(--primary);
}

.side-ql-item:last-child {
	border-bottom: none;
}

.side-ql-item i {
	font-size: .85rem;
	color: var(--primary);
	transition: var(--trans);
	flex-shrink: 0;
	width: 1rem;
	text-align: center;
}

.side-ql-item:hover {
	background: var(--primary);
	color: var(--white);
}

.side-ql-item:hover i {
	color: var(--accent-light);
}
/* 모바일 — 문의하기 위 바로가기 */
.mobile-ql-item:hover i {
	color: var(--accent-light);
}
/* 모바일 두 번째 블록(주요업무) — 골드 톤 */
.mobile-ql-secondary .mobile-ql-title i {
	color: var(--accent);
}

.mobile-ql-secondary .mobile-ql-item:hover i {
	color: var(--primary);
}

/* ===== RESPONSIVE ===== *//* ================================================================
 * 24. klabor_02.asp — 대표 인사말 (CEO Greeting)
 * ================================================================ *//* ===== CEO 인사말 ===== */.ceo-wrap {
	display:flex;
	gap:1.75rem;
	align-items:flex-start;
	margin-bottom:1.75rem;
}

.ceo-photo-wrap {
	flex-shrink:0;
	width:11rem;
	text-align:center;
}

.ceo-photo {
	width:100%;
	border-radius:var(--radius);
	box-shadow:var(--shadow-card);
	margin-bottom:.8rem;
}

.ceo-message {
	flex:1;
	min-width:0;
}

.ceo-headline {
	margin-bottom:.9rem;
}

.ceo-headline-title {
	font-size:1rem;
	font-weight:700;
	color:var(--primary);
	margin-bottom:.25rem;
}

.ceo-headline-sub {
	font-size:1.35rem;
	font-weight:700;
	color:var(--text-main);
	line-height:1.35;
}

.ceo-intro {
	font-size:1rem;
	line-height:1.95;
	color:var(--text-main);
	font-weight:400;
}
/* 서비스 카드 */
/* 마무리 + 서명 */


/* ================================================================
 * 25. klabor_02.asp — 서비스 카드 (Greeting Cards 1~6)
 * ================================================================ *//* 서비스 카드 */.greeting-cards {
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:.9rem;
	margin-bottom:1.75rem;
}

.gc-card {
	display:flex;
	align-items:flex-start;
	gap:.75rem;
	background:var(--white);
	border:1px solid var(--border);
	border-radius:var(--radius);
	padding:.9rem 1rem;
	box-shadow:var(--shadow-card);
	transition:var(--trans);
}

.gc-card:hover {
	box-shadow:var(--shadow-hover);
	transform:translateY(-2px);
}

.gc-num {
	flex-shrink:0;
	width:2rem;
	height:2rem;
	background:linear-gradient(135deg,var(--primary),var(--primary-mid));
	color:var(--white);
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:.85rem;
	font-weight:700;
	font-family:'Playfair Display',serif;
}

.gc-body {
	flex:1;
	min-width:0;
}

.gc-title {
	font-size:.88rem;
	font-weight:700;
	color:var(--primary);
	margin-bottom:.3rem;
	line-height:1.4;
}

.gc-desc {
	font-size:.8rem;
	color:var(--text-sub);
	line-height:1.7;
}
/* 마무리 + 서명 */
.ceo-closing {
	background:var(--gray-100);
	border-left:4px solid var(--primary);
	border-radius:0 var(--radius) var(--radius) 0;
	padding:1.1rem 1.25rem;
	margin-bottom:1.25rem;
	font-size:.88rem;
	line-height:1.9;
	color:var(--text-main);
}

.ceo-signature {
	text-align:right;
	border-top:1px solid var(--border);
	padding-top:.9rem;
	margin-bottom:1.75rem;
}

.ceo-sig-name {
	font-size:.8rem;
	color:var(--text-sub);
	margin-bottom:.3rem;
}

.ceo-sig-person {
	font-family:'Noto Serif KR',serif;
	font-size:1.15rem;
	font-weight:700;
	color:var(--primary);
}

.ceo-sig-person span {
	font-family:'Playfair Display',serif;
	font-size:.9rem;
	font-weight:600;
	color:var(--gray-600);
	margin-left:.5rem;
}


/* ================================================================
 * 26. klabor_03.asp — 회사연혁 타임라인 (History Timeline)
 * ================================================================ */

/* ===== 회사연혁 타임라인 ===== */


.timeline-wrap {
	position: relative;
	padding-left: 7rem;
	margin-bottom: 2rem;
}

.timeline-wrap::before {
	content: '';
	position: absolute;
	left: 5.7rem;
	top: 0;
	bottom: 0;
	width: 2px;
	background: linear-gradient(to bottom, var(--primary), var(--accent), var(--primary));
	opacity: .3;
}

.timeline-year-group {
	position: relative;
	margin-bottom: 2rem;
	display: flex;
	gap: 1.5rem;
	align-items: center;
	/* 그룹 전체 세로 중앙 */
}

.tl-year {
	position: absolute;
	left: -7rem;
	width: 4.7rem;
	text-align: right;
	/* 가로 중앙 */
  font-family: 'Playfair Display', serif;
	font-size: .95rem;
	font-weight: 700;
	color: var(--primary);
	line-height: 1.4;
	white-space: nowrap;
	/* 세로 중앙 — tl-item 높이에 맞게 */
  top: 50%;
	transform: translateY(-50%);
	padding-top: 0;
	padding-right: 0.2rem;
}

.tl-year.highlight {
	color: var(--accent);
	font-size: 1.15rem;
}

.tl-items {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: .65rem;
}

.tl-item {
	display: flex;
	align-items: center;
	/* 세로 중앙 */
  gap: .75rem;
}

.tl-dot {
	flex-shrink: 0;
	width: .65rem;
	height: .65rem;
	border-radius: 50%;
	background: var(--gray-400);
	border: 2px solid var(--white);
	box-shadow: 0 0 0 2px var(--gray-400);
	margin-top: 0;
	/* center 정렬이므로 offset 불필요 */
  position: relative;
	left: -1.65rem;
	margin-right: -1.5rem;
}

.tl-dot-accent {
	background: var(--accent);
	box-shadow: 0 0 0 2px var(--accent);
	width: .8rem;
	height: .8rem;
}

.tl-content {
	font-size: .88rem;
	color: var(--text-main);
	line-height: 1.7;
	padding: .55rem .9rem;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	flex: 1;
	transition: var(--trans);
}

.tl-content:hover {
	border-color: var(--primary);
	box-shadow: var(--shadow-hover);
}

.tl-content strong {
	color: var(--primary);
}

.timeline-year-group:has(.tl-dot-accent) .tl-content {
	border-left: 3px solid var(--accent);
}


/* ================================================================
 * 27. klabor_04.asp — 구성원 카드 그리드 (Team Card Grid)
 * ================================================================ */

/* ===== 구성원 카드 그리드 ===== */


.team-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* PC: 3열 */
  gap: 1.25rem;
	margin-bottom: 2rem;
	width: 100%;
	/* 오른쪽 여백 방지 */
  box-sizing: border-box;
}

.member-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1.4rem 1rem 1rem;
	box-shadow: var(--shadow-card);
	transition: var(--trans);
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.member-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--primary), var(--accent));
	transform: scaleX(0);
	transition: var(--trans);
}

.member-card:hover {
	box-shadow: var(--shadow-hover);
	transform: translateY(-4px);
}

.member-card:hover::before {
	transform: scaleX(1);
}

.member-avatar {
	width: 8rem;
	height: 8rem;
	border-radius: 50%;
	overflow: hidden;
	margin-bottom: .85rem;
	border: 3px solid var(--gray-200);
	transition: var(--trans);
	background: var(--gray-100);
	flex-shrink: 0;
}

.member-card:hover .member-avatar {
	border-color: var(--accent);
}

.member-avatar img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center top;
	display: block;
	background: var(--gray-100);
}

.member-info {
	width: 100%;
}

.member-name {
	font-size: .95rem;
	font-weight: 700;
	color: var(--primary);
	margin-bottom: .25rem;
	font-family: 'Noto Serif KR', serif;
}

.member-role {
	display: inline-block;
	font-size: .72rem;
	font-weight: 600;
	color: var(--white);
	background: var(--primary);
	border-radius: 2rem;
	padding: .18rem .75rem;
	transition: var(--trans);
}

.member-card:hover .member-role {
	background: var(--accent);
	color: var(--primary);
}
/* team-grid 반응형 */
@media (max-width: 1024px) {

  /* 태블릿: 3열 유지, 여백 없이 꽉 채움 */
  .team-grid {
  	grid-template-columns: repeat(3, 1fr);
  	gap: 1rem;
  }
}


@media (max-width: 768px) {
	/* 모바일: 2열 */
  .team-grid {
    grid-template-columns: repeat(2, 1fr) !important;
	gap: .85rem;
}

.member-avatar {
	width: 5.5rem;
	height: 5.5rem;
}

.member-name {
	font-size: .85rem;
}

.member-role {
	font-size: .68rem;
	padding: .15rem .6rem;
}

.member-card {
	padding: 1rem .75rem .85rem;
}

}


/* ================================================================
 * 28. klabor_04_view.asp — 구성원 프로필 상세 (Member Profile)
 * ================================================================ */
/* ===== 구성원 프로필 뷰 ===== */
.profile-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	margin-bottom: 2rem;
}
/* 상단: 사진 + 이름 — 가로 중앙 */
.profile-top {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	width: 100%;
	justify-content: center;
	padding: 1.5rem;
	background: linear-gradient(135deg, var(--primary) 0%, var(--primary-mid) 100%);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
}

.profile-photo {
	flex-shrink: 0;
	text-align: center;
}

.profile-photo img {
	width: 9rem;
	height: 9rem;
	border-radius: 50%;
	object-fit: contain;
	object-position: center top;
	border: 3px solid rgba(255,255,255,.35);
	background: rgba(255,255,255,.1);
	display: block;
	box-shadow: 0 4px 16px rgba(0,0,0,.25);
}

.profile-name-box {
	text-align: left;
}

.profile-name {
	font-family: 'Playfair Display', serif;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--white);
	margin-bottom: .2rem;
}

.profile-name-ko {
	font-family: 'Noto Serif KR', serif;
	font-size: 1rem;
	color: rgba(255,255,255,.7);
	margin-bottom: .4rem;
}

.profile-role {
	display: inline-block;
	font-size: .8rem;
	font-weight: 600;
	color: var(--primary);
	background: var(--accent-light);
	border-radius: 2rem;
	padding: .2rem .9rem;
}
/* 하단: 섹션 카드들 — 전체 너비 */
.profile-sections {
	width: 100%;
}
/* 섹션 카드 */
.profile-section {
	margin-bottom: 1.25rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-card);
}

.profile-section-title {
	display: flex;
	align-items: center;
	gap: .55rem;
	background: var(--primary);
	color: var(--white);
	font-size: .88rem;
	font-weight: 700;
	padding: .6rem 1rem;
}

.profile-section-title i {
	color: var(--accent-light);
	font-size: .85rem;
}

.profile-section-body {
	padding: 1rem 1.2rem;
	background: var(--white);
}

.profile-section-body p {
	font-size: .85rem;
	color: var(--text-sub);
	line-height: 1.85;
}

.profile-section-body ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.profile-section-body ul li {
	font-size: .85rem;
	color: var(--text-sub);
	line-height: 1.85;
	padding-left: .9rem;
	position: relative;
}

.profile-section-body ul li::before {
	content: '–';
	position: absolute;
	left: 0;
	color: var(--accent);
	font-weight: 700;
}

.profile-section-body ul li + li {
	margin-top: .2rem;
}

.profile-sub-title {
	font-size: .85rem;
	font-weight: 700;
	color: var(--primary);
	margin: .9rem 0 .35rem;
}

.profile-sub-title:first-child {
	margin-top: 0;
}
/* 뒤로가기 버튼 */
.back-btn-wrap {
	display: flex;
	justify-content: center;
	margin-bottom: 1.5rem;
	margin-top: .5rem;
}

.back-btn {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .55rem 1.8rem;
	background: var(--primary);
	color: var(--white);
	font-size: .88rem;
	font-weight: 600;
	border-radius: var(--radius);
	transition: var(--trans);
	cursor: pointer;
}

.back-btn:hover {
	background: var(--primary-mid);
	transform: translateX(-3px);
}
/* 모바일 */
.mobile-quicklinks {
	display:none;
}

.mobile-ql-title {
	font-size:.85rem;
	font-weight:700;
	color:var(--primary);
	margin-bottom:.75rem;
	display:flex;
	align-items:center;
	gap:.4rem;
}

.mobile-ql-title i {
	color:var(--accent);
}

.mobile-ql-grid {
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:.5rem;
	margin-bottom:1.5rem;
}

.mobile-ql-item {
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:.3rem;
	padding:.7rem .4rem;
	background:var(--gray-100);
	border:1px solid var(--border);
	border-radius:var(--radius);
	text-align:center;
	text-decoration:none;
	transition:var(--trans);
	font-size:.72rem;
	font-weight:600;
	color:var(--primary);
}

.mobile-ql-item i {
	font-size:1rem;
	color:var(--primary);
	transition:var(--trans);
}

.mobile-ql-item:hover {
	background:var(--primary);
	color:var(--white);
}

.mobile-ql-secondary .mobile-ql-title {
	color:#8a6a2e;
}

.mobile-ql-secondary .mobile-ql-item {
	background:#fdf8ef;
	border-color:rgba(200,169,110,.4);
}

.mobile-ql-secondary .mobile-ql-item:hover {
	background:var(--accent);
	color:var(--primary);
}
/* FOOTER */
#footer {
	background:var(--gray-800);
	color:rgba(255,255,255,.7);
	padding:2.5rem 0 1.5rem;
	font-size:.84rem;
}

.footer-inner {
	display:grid;
	grid-template-columns:1.5fr 1fr 1fr;
	gap:2.2rem;
	margin-bottom:1.8rem;
}

.footer-brand .brand-name {
	font-family:'Playfair Display',serif;
	font-size:1.2rem;
	font-weight:700;
	color:var(--white);
	margin-bottom:.2rem;
}

.footer-addr {
	font-size:.8rem;
	color:rgba(255,255,255,.62);
	line-height:2;
}

.footer-addr i {
	color:var(--accent);
	margin-right:.35rem;
}

.footer-col-title {
	font-size:.83rem;
	font-weight:700;
	color:var(--white);
	margin-bottom:.8rem;
	padding-bottom:.45rem;
	border-bottom:1px solid rgba(255,255,255,.12);
}

.footer-links li {
	margin-bottom:.4rem;
}

.footer-links a {
	font-size:.8rem;
	color:rgba(255,255,255,.58);
}

.footer-links a:hover {
	color:var(--accent-light);
}

.footer-bottom {
	border-top:1px solid rgba(255,255,255,.1);
	padding-top:1.1rem;
	display:flex;
	align-items:center;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:.65rem;
}

.footer-bottom p {
	font-size:.77rem;
	color:rgba(255,255,255,.42);
}

.footer-policy {
	display:flex;
	gap:1.1rem;
}

.footer-policy a {
	color:rgba(255,255,255,.52);
	font-size:.8rem;
}

.footer-policy a:hover {
	color:var(--accent-light);
}
/* RESPONSIVE */

/* ================================================================
 * 29. klabor_05.asp — 찾아오시는 길 (Directions)
 * ================================================================ */

/* ===== 찾아오시는 길 ===== */


.dir-map-img {
	width: 100%;
	margin-bottom: 1.5rem;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-card);
}

.dir-map-img img {
	width: 100%;
	height: auto;
	display: block;
}

.dir-section {
	margin-bottom: 1.1rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-card);
}

.dir-section-title {
	display: flex;
	align-items: center;
	gap: .55rem;
	background: var(--primary);
	color: var(--white);
	font-size: .88rem;
	font-weight: 700;
	padding: .6rem 1rem;
	border-bottom: 2px solid var(--accent);
}

.dir-section-title i {
	color: var(--accent-light);
	font-size: .82rem;
}

.dir-section-body {
	padding: .85rem 1.1rem;
	background: var(--white);
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.dir-item {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	font-size: .88rem;
	color: var(--text-main);
	line-height: 1.7;
}

.dir-item i {
	color: var(--accent);
	flex-shrink: 0;
	margin-top: .2rem;
	font-size: .85rem;
}

.dir-item a {
	color: var(--primary);
	font-weight: 600;
}

.dir-item a:hover {
	color: var(--accent);
}


/* ================================================================
 * 30. klabor_07.asp — 업무실적 (Track Record / Portfolio)
 * ================================================================ */

/* 업무실적 상단 상세 카드 */
.perf-detail-card {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	margin-bottom: 1.25rem;
	box-shadow: var(--shadow-card);
}

.perf-detail-header {
	background: var(--gray-100);
	border-bottom: 2px solid var(--primary);
	padding: .75rem 1rem;
	display: flex;
	flex-direction: column;
	gap: .4rem;
}

.perf-detail-row {
	display: flex;
	align-items: center;
	gap: .75rem;
	flex-wrap: wrap;
}

.perf-detail-label {
	background: var(--primary);
	color: var(--white);
	font-size: .75rem;
	font-weight: 700;
	padding: .18rem .65rem;
	border-radius: .25rem;
	white-space: nowrap;
	min-width: 3.5rem;
	text-align: center;
}

.perf-detail-val {
	font-size: .85rem;
	color: var(--text-main);
	font-weight: 500;
}

.perf-detail-body {
	padding: .9rem 1.1rem;
	font-size: .85rem;
	color: var(--text-sub);
	line-height: 1.85;
	background: var(--white);
	border-bottom: 1px solid var(--border);
}

.perf-list-btn-wrap {
	display: flex;
	justify-content: center;
	padding: .65rem;
	background: var(--gray-100);
}

.perf-list-btn {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .35rem 1.5rem;
	border: 1.5px solid var(--primary);
	border-radius: var(--radius);
	font-size: .82rem;
	font-weight: 700;
	color: var(--primary);
	text-decoration: none;
	transition: var(--trans);
}

.perf-list-btn:hover {
	background: var(--primary);
	color: var(--white);
}


/* ===== 업무실적 ===== */


/* 테이블 */


/* 현재 선택된 행 */.perf-row-active {
	background: #dde9f5 !important;
}

.perf-row-active td {
	color: var(--primary);
	font-weight: 600;
}

/* PC 기본 */
.perf-client-mobile {
	display: none;
}

.badge-mobile-only {
	display: none !important;
}

/* PC: 완전 숨김 */
.badge-pc-only {
	display: inline;
}

/* PC: 업무 앞 badge 표시 */
.perf-subject-cell {
	display: table-cell;
}

.perf-subject-text {
	display: inline;
}

.perf-ym {
	display: inline;
}

/* PC: 년.월은 인라인(한 줄) *//* 배지 */


/* 페이징 */


/* ===== 업무실적 ===== */.perf-search-wrap {
	background: var(--gray-100);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: .85rem 1rem;
	margin-bottom: 1rem;
}

.perf-search-inner {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex-wrap: wrap;
}

.perf-select {
	height: 2.1rem;
	padding: 0 .6rem;
	border: 1px solid var(--border);
	border-radius: .35rem;
	font-size: .82rem;
	color: var(--text-main);
	background: var(--white);
	cursor: pointer;
}

.perf-input {
	flex: 1;
	min-width: 8rem;
	height: 2.1rem;
	padding: 0 .75rem;
	border: 1px solid var(--border);
	border-radius: .35rem;
	font-size: .82rem;
	color: var(--text-main);
}

.perf-search-btn {
	height: 2.1rem;
	padding: 0 1rem;
	background: var(--primary);
	color: var(--white);
	border: none;
	border-radius: .35rem;
	cursor: pointer;
	font-size: .85rem;
	transition: var(--trans);
}

.perf-search-btn:hover {
	background: var(--primary-mid);
}

.perf-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: .82rem;
	color: var(--text-sub);
	margin-bottom: .6rem;
}

.perf-meta strong {
	color: var(--primary);
	font-weight: 700;
}
/* 테이블 */
.perf-table-wrap {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	margin-bottom: 1rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.perf-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 480px;
	font-size: .84rem;
}

.perf-table thead tr {
	background: var(--primary);
	color: var(--white);
}

.perf-table thead th {
	padding: .65rem 1rem;
	text-align: center;
	font-weight: 600;
	font-size: .82rem;
	white-space: nowrap;
}

.perf-table tbody tr {
	border-bottom: 1px solid var(--border);
	cursor: pointer;
	transition: background .15s;
}

.perf-table tbody tr:hover {
	background: #eef2f9;
}

.perf-table tbody tr:last-child {
	border-bottom: none;
}

.perf-table td {
	padding: .6rem 1rem;
	vertical-align: middle;
}

.perf-date {
	color: var(--gray-600);
	font-size: .8rem;
	white-space: nowrap;
}

.perf-client {
	color: var(--gray-600);
	font-size: .8rem;
	text-align: center;
	white-space: nowrap;
}
/* 배지 */
.badge {
	display: inline-block;
	font-size: .7rem;
	font-weight: 700;
	padding: .15rem .5rem;
	border-radius: 2rem;
	margin-right: .3rem;
	white-space: nowrap;
	vertical-align: middle;
}

.badge-advisory {
	background: #e8f0fe;
	color: #1a56db;
}

.badge-consult {
	background: #fff3e0;
	color: #e65100;
}

.badge-case {
	background: #fde8e8;
	color: #c53030;
}

.badge-accident {
	background: #e8f5e9;
	color: #2e7d32;
}

.badge-edu {
	background: #f3e8ff;
	color: #6b21a8;
}
/* 페이징 */
.perf-paging {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: .3rem;
	margin-bottom: 1.5rem;
	flex-wrap: wrap;
}

.pg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 2rem;
	padding: 0 .5rem;
	border: 1px solid var(--border);
	border-radius: .35rem;
	font-size: .8rem;
	color: var(--gray-600);
	cursor: pointer;
	transition: var(--trans);
	background: var(--white);
}

.pg-btn:hover {
	background: var(--gray-100);
	color: var(--primary);
	border-color: var(--primary);
}

.pg-btn.pg-active {
	background: var(--primary);
	color: var(--white);
	border-color: var(--primary);
	font-weight: 700;
	cursor: default;
}

.pg-btn.pg-disabled {
	color: var(--gray-400);
	cursor: default;
	pointer-events: none;
}


/* ================================================================
 * 31. 반응형 — index.asp  @media (max-width: 768px)
 * ================================================================ */


@media (max-width: 768px) {
	/* ---- 레이아웃 공통 ---- */
  #content-grid,
  #content-grid .container,
  .content-section,
  .content-section .container {
    max-width: 100%;
	box-sizing: border-box;
}

#content-grid .grid-3col {
	grid-template-columns: 1fr;
	gap: 1rem;
}

.card {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.row2-grid {
	grid-template-columns: 1fr !important;
	gap: .75rem;
}

/* ---- 검색바 ---- */
  #site-search {
	padding: .55rem 0;
}

/* 모바일 상하 여백 */
  .search-inner {
	padding: 0 .75rem;
}

.search-form {
	width: 100%;
}

/* ---- 히어로 연락처 ---- */
  .hero-contact {
	padding: .45rem 1.25rem;
	gap: .5rem;
	bottom: .6rem;
}

.hero-contact-text {
	gap: .75rem;
}

.hero-contact-icon {
	font-size: 1.1rem;
}

.hero-contact-text .ct-title {
	font-size: .8rem;
}

.hero-contact-text .ct-tel {
	font-size: .8rem;
}

/* ====================================================
   * 출판물 섹션 — 이미지 기준: 상단 타이틀 + 가로 스크롤
   * ==================================================== */
  #pub-section {
	flex-direction: column;
	/* 세로 배치 */
    min-height: auto;
	border-radius: var(--radius);
}

/* 타이틀 영역 — 가로 전체 너비, 세로 대신 가로 배치 */
  .pub-title-col {
	width: 100%;
	flex-direction: row;
	/* 아이콘 + 제목 + 버튼 가로 배치 */
    justify-content: space-between;
	padding: .85rem 1rem;
	gap: .75rem;
	text-align: left;
}

.pub-title-col i {
	font-size: 1.2rem;
	flex-shrink: 0;
}

.pub-title-col h3 {
	flex: 1;
	font-size: .95rem;
	line-height: 1.3;
	display: flex;
	gap: .3rem;
}

/* 타이틀 내 줄바꿈 span 숨김 (모바일 가로 배치에서 불필요) */
  .pub-br {
	display: none;
}

.pub-title-col a {
	font-size: .72rem;
	padding: .25rem .75rem;
	flex-shrink: 0;
	white-space: nowrap;
}

/* 책 스크롤 영역 */
  .pub-scroll-wrap {
	padding: .75rem 1rem 1rem;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}

.pub-books {
	align-items: flex-start;
	min-width: max-content;
	/* 가로 스크롤 허용 */
}

.pub-book {
	min-width: 5rem;
	max-width: 6rem;
}

.pub-book-cover {
	width: 5rem;
	height: 7rem;
}

.pub-book-title {
	font-size: .62rem;
	max-width: 5rem;
}

/* ====================================================
   * 주요 업무 섹션 — 이미지 기준: 1열 카드 리스트
   * ==================================================== */
  #services {
	padding-top: 1.5rem !important;
	padding-bottom: 1.5rem !important;
}

.section-title {
	font-size: 1.35rem;
}

.service-cards {
	grid-template-columns: 1fr;
	/* 1열 */
}

.svc-card {
	flex-direction: row;
	/* 좌: 아이콘+텍스트 / 우: 화살표 */
    padding: 1rem 1.1rem;
}

.svc-card-body {
	flex: 1;
	min-width: 0;
}

.svc-card-head {
	flex-direction: row;
	gap: .6rem;
	margin-bottom: .3rem;
}

.svc-icon {
	width: 2.4rem;
	height: 2.4rem;
	font-size: .9rem;
}

.svc-title {
	font-size: .92rem;
	font-weight: 700;
}

.svc-desc {
	font-size: .8rem;
	line-height: 1.6;
}

.svc-go {
	width: 2.2rem;
	height: 2.2rem;
	font-size: .85rem;
	align-self: center;
}

}


/* ================================================================
 * 32. 반응형 — 서브페이지 공통  @media (max-width: 768px)
 * ================================================================ */
@media (max-width: 768px) {
	:root { --topbar-h: 1.8rem;
}

#top-combined {
	height: calc(var(--topbar-h) * 2) !important;
}

#top-combined .tc-inner {
	height: 100%;
}

.container {
	padding: 0 .75rem;
}

#header {
	display: none !important;
}

.topbar-links > a:not(.hamburger) {
	display: none;
}

.lang-switch {
	display: flex !important;
}

.lang-switch a {
	display: flex !important;
	font-size: .72rem;
	padding: .2rem .65rem;
}

#top-combined .tc-inner {
	justify-content: space-between;
}

.topbar-links {
	margin-left: auto;
	gap: .5rem;
	justify-content: flex-end;
	align-items: center;
}

.logo-top .logo-ko {
	font-size: 1.26rem;
}

.logo-top .logo-img {
	height: 1.7rem;
}

/* 모바일: 서브메뉴 숨김, 콘텐츠 전체 너비 */
  .side-col {
	display: none;
}

.mobile-quicklinks {
	display: block;
}

#page-wrap {
	flex-direction: column;
	gap: 1rem;
	padding: 1.5rem 0 2rem;
}

/* page-content 모바일 전체 너비 */
  #page-content {
	min-width: 0;
	overflow-x: clip;
}

.feature-grid {
	grid-template-columns: 1fr;
}

.stats-row {
	grid-template-columns: repeat(2, 1fr);
}

.service-list {
	grid-template-columns: 1fr;
}

.footer-inner {
	grid-template-columns: 1fr;
}

.footer-bottom {
	flex-direction: column;
	align-items: flex-start;
}

}


/* ================================================================
 * 33. 반응형 — klabor_02.asp  @media (max-width: 768px)
 * ================================================================ */
@media (max-width: 768px) {
	#page-wrap { flex-direction: column;
	gap: 1rem;
	padding: 1.5rem 0 2rem;
}

.feature-grid {
	grid-template-columns: 1fr;
}

.stats-row {
	grid-template-columns: repeat(2, 1fr);
}

.service-list {
	grid-template-columns: 1fr;
}

.footer-inner {
	grid-template-columns: 1fr;
}

.footer-bottom {
	flex-direction: column;
	align-items: flex-start;
}

/* 대표 인사말 — CEO 인사말 본문 */
  .ceo-wrap {
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.ceo-photo-wrap {
	width: 8rem;
}

.ceo-message {
	width: 100%;
	text-align: left;
}

.ceo-headline {
	text-align: center;
}

.ceo-headline-sub {
	font-size: 1.15rem;
}

.ceo-intro {
	font-size: .92rem;
	line-height: 1.85;
}

/* 대표 인사말 — 서비스 카드 */
  .greeting-cards {
	grid-template-columns: 1fr;
	gap: .75rem;
	margin-bottom: 1.5rem;
}

.gc-card {
	padding: .85rem .95rem;
}

/* 대표 인사말 — 마무리 인사 / 서명 */
  .ceo-closing {
	padding: 1rem 1.1rem;
	font-size: .85rem;
	line-height: 1.8;
	margin-bottom: 1rem;
}

.ceo-signature {
	text-align: center;
	margin-bottom: 1.5rem;
}

.ceo-sig-person span {
	display: block;
	margin-left: 0;
	margin-top: .2rem;
}

}


/* ================================================================
 * 34. 반응형 — klabor_03.asp  @media (max-width: 768px)
 * ================================================================ */
@media (max-width: 768px) {
	:root { --topbar-h: 1.8rem;
}

#top-combined {
	height: calc(var(--topbar-h) * 2) !important;
}

#top-combined .tc-inner {
	height: 100%;
}

.container {
	padding: 0 .75rem;
}

#header {
	display: none !important;
}

/* 모바일 로고 — ko: 한글만, en: 영문만 축소 */
  .logo-img {
	height: 1.5rem !important;
}

.logo-top .logo-ko {
	font-size: .95rem !important;
	white-space: nowrap;
}

.logo-top .logo-en {
	font-size: .62rem !important;
	white-space: nowrap;
	color: rgba(255,255,255,.6);
}

.logo-top a {
	gap: .35rem;
}

.topbar-links > a:not(.hamburger) {
	display: none;
}

.lang-switch {
	display: flex !important;
}

.lang-switch a {
	display: flex !important;
	font-size: .72rem;
	padding: .2rem .65rem;
}

#top-combined .tc-inner {
	justify-content: space-between;
}

.topbar-links {
	margin-left: auto;
	gap: .5rem;
	justify-content: flex-end;
	align-items: center;
}

/* 모바일: 서브메뉴 숨김, 콘텐츠 전체 너비 */
  .side-col {
	display: none;
}

.mobile-quicklinks {
	display: block;
}

#page-wrap {
	flex-direction: column;
	gap: 1rem;
	padding: 1.5rem 0 2rem;
}

.feature-grid {
	grid-template-columns: 1fr;
}

.stats-row {
	grid-template-columns: repeat(2, 1fr);
}

.service-list {
	grid-template-columns: 1fr;
}

.footer-inner {
	grid-template-columns: 1fr;
}

.footer-bottom {
	flex-direction: column;
	align-items: flex-start;
}

}


/* ================================================================
 * 35. 반응형 — klabor_04.asp  @media (max-width: 768px)
 * ================================================================ */
@media (max-width: 768px) {
	:root { --topbar-h: 1.8rem;
}

#top-combined {
	height: calc(var(--topbar-h) * 2) !important;
}

#top-combined .tc-inner {
	height: 100%;
}

.container {
	padding: 0 .75rem;
}

#header {
	display: none !important;
}

/* 모바일 로고 — ko: 한글만, en: 영문만 축소 */
  .logo-img {
	height: 1.5rem !important;
}

.logo-top .logo-ko {
	font-size: .95rem !important;
	white-space: nowrap;
}

.logo-top .logo-en {
	font-size: .62rem !important;
	white-space: nowrap;
	color: rgba(255,255,255,.6);
}

.logo-top a {
	gap: .35rem;
}

.topbar-links > a:not(.hamburger) {
	display: none;
}

.lang-switch {
	display: flex !important;
}

.lang-switch a {
	display: flex !important;
	font-size: .72rem;
	padding: .2rem .65rem;
}

#top-combined .tc-inner {
	justify-content: space-between;
}

.topbar-links {
	margin-left: auto;
	gap: .5rem;
	justify-content: flex-end;
	align-items: center;
}

/* 모바일: 서브메뉴 숨김, 콘텐츠 전체 너비 */
  .side-col {
	display: none;
}

.mobile-quicklinks {
	display: block;
}

#page-wrap {
	flex-direction: column;
	gap: 1rem;
	padding: 1.5rem 0 2rem;
}

.feature-grid {
	grid-template-columns: 1fr;
}

.stats-row {
	grid-template-columns: repeat(2, 1fr);
}

.service-list {
	grid-template-columns: 1fr;
}

.footer-inner {
	grid-template-columns: 1fr;
}

.footer-bottom {
	flex-direction: column;
	align-items: flex-start;
}

}


/* ================================================================
 * 36. 반응형 — klabor_04_view.asp  @media (max-width: 768px)
 * ================================================================ */
@media (max-width: 768px) {
	:root{--topbar-h:2rem;
}

#top-combined {
	height:calc(var(--topbar-h)*2)!important;
}

#top-combined .tc-inner {
	height:100%;
}

.container {
	padding:0 .75rem;
}

#header {
	display:none!important;
}

.logo-img {
	height:1.5rem!important;
}

.logo-top .logo-ko {
	font-size:.95rem!important;
	white-space:nowrap;
}

.logo-top .logo-en {
	font-size:.62rem!important;
	white-space:nowrap;
	color:rgba(255,255,255,.6);
}

.logo-top a {
	gap:.35rem;
}

.topbar-links > a:not(.hamburger) {
	display:none;
}

.lang-switch {
	display:flex!important;
}

.lang-switch a {
	display:flex!important;
	font-size:.72rem;
	padding:.2rem .65rem;
}

.topbar-links {
	margin-left:auto;
	gap:.5rem;
	justify-content:flex-end;
	align-items:center;
}

.side-col {
	display:none;
}

.mobile-quicklinks {
	display:block;
}

#page-wrap {
	flex-direction:column;
	gap:1rem;
	padding:1.5rem 0 2rem;
}

.profile-top {
	flex-direction:column;
	text-align:center;
}

.profile-name-box {
	text-align:center;
}

.profile-sections {
	width:100%;
}

.footer-inner {
	grid-template-columns:1fr;
}

.footer-bottom {
	flex-direction:column;
	align-items:flex-start;
}

}


/* ================================================================
 * 37. 반응형 — klabor_05.asp  @media (max-width: 768px)
 * ================================================================ */
@media (max-width: 768px) {
	:root { --topbar-h: 1.8rem;
}

#top-combined {
	height: calc(var(--topbar-h) * 2) !important;
}

#top-combined .tc-inner {
	height: 100%;
}

.container {
	padding: 0 .75rem;
}

#header {
	display: none !important;
}

/* 모바일 로고 — ko: 한글만, en: 영문만 축소 */
  .logo-img {
	height: 1.5rem !important;
}

.logo-top .logo-ko {
	font-size: 1.15rem !important;
	white-space: nowrap;
}

.logo-top .logo-en {
	font-size: .62rem !important;
	white-space: nowrap;
	color: rgba(255,255,255,.6);
}

.logo-top a {
	gap: .35rem;
}

.topbar-links > a:not(.hamburger) {
	display: none;
}

.lang-switch {
	display: flex !important;
}

.lang-switch a {
	display: flex !important;
	font-size: .72rem;
	padding: .2rem .65rem;
}

#top-combined .tc-inner {
	justify-content: space-between;
}

.topbar-links {
	margin-left: auto;
	gap: .5rem;
	justify-content: flex-end;
	align-items: center;
}

/* 모바일: 서브메뉴 숨김, 콘텐츠 전체 너비 */
  .side-col {
	display: none;
}

.mobile-quicklinks {
	display: block;
}

#page-wrap {
	flex-direction: column;
	gap: 1rem;
	padding: 1.5rem 0 2rem;
}

.feature-grid {
	grid-template-columns: 1fr;
}

.stats-row {
	grid-template-columns: repeat(2, 1fr);
}

.service-list {
	grid-template-columns: 1fr;
}

.footer-inner {
	grid-template-columns: 1fr;
}

.footer-bottom {
	flex-direction: column;
	align-items: flex-start;
}

}


/* ================================================================
 * 39. klabor_07.asp — 페이징 (Pagination)
 * ================================================================ */.pagination-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: .3rem;
	margin: 1.5rem 0;
	flex-wrap: wrap;
}

.pagination-wrap a,
.pagination-wrap span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.1rem;
	height: 2.1rem;
	padding: 0 .55rem;
	border: 1px solid var(--border);
	border-radius: .35rem;
	font-size: .82rem;
	font-weight: 500;
	color: var(--gray-600);
	text-decoration: none;
	transition: var(--trans);
	background: var(--white);
	cursor: pointer;
	white-space: nowrap;
	line-height: 1;
}

.pagination-wrap a:hover {
	background: var(--gray-100);
	color: var(--primary);
	border-color: var(--primary);
}
/* 현재 페이지 */
.pagination-wrap span.active {
	background: var(--primary);
	color: var(--white);
	border-color: var(--primary);
	font-weight: 700;
	cursor: default;
}
/* 처음/끝 이동 버튼 */
.pagination-wrap a.pg-first,
.pagination-wrap a.pg-last {
	color: var(--primary);
	font-weight: 700;
}
/* 이전/다음 블록 버튼 */
.pagination-wrap a.pg-prev,
.pagination-wrap a.pg-next {
	color: var(--gray-600);
}
/* 비활성 버튼 */
.pagination-wrap span.pg-disabled {
	color: var(--gray-400);
	border-color: var(--border);
	background: var(--gray-100);
	cursor: default;
}
/* 총 건수 표시 */
.pagination-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: .82rem;
	color: var(--text-sub);
	margin-bottom: .6rem;
}

.pagination-info strong {
	color: var(--primary);
	font-weight: 700;
}
/* 반응형 */
@media (max-width: 768px) {

  .pagination-wrap {
  	gap: .2rem;
  }

  .pagination-wrap a,
  .pagination-wrap span {
  	min-width: 1.8rem;
  	height: 1.8rem;
  	font-size: .75rem;
  	padding: 0 .4rem;
  }
}


/* ================================================================
 * 주요업무 (job_01 ~ job_06) — 서비스 항목 레이아웃
 * ================================================================ */
/* ================================================================
 * 주요업무 공통 — 서비스 항목 레이아웃 (job_01 ~ job_06)
 * ================================================================ */
.job-section {
	margin-bottom: 2rem;
}

.job-section-title {
	font-family: 'Noto Serif KR', serif;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--primary);
	margin-bottom: 1rem;
	display: flex;
	align-items: center;
	gap: .55rem;
	padding-bottom: .6rem;
	border-bottom: 2px solid var(--gray-200);
}

.job-section-title i {
	color: var(--accent);
	font-size: 1rem;
}
/* 서비스 항목 목록 */
.job-items {
	display: flex;
	flex-direction: column;
	gap: .85rem;
}

.job-item {
	display: flex;
	align-items: center;
	/* 세로 중앙 정렬 */
  gap: 1rem;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1rem 1.2rem;
	box-shadow: var(--shadow-card);
	transition: var(--trans);
}

.job-item:hover {
	box-shadow: var(--shadow-hover);
	border-color: var(--primary);
	transform: translateX(4px);
}

.job-item-num {
	flex-shrink: 0;
	width: 2.4rem;
	height: 2.4rem;
	background: linear-gradient(135deg, var(--primary), var(--primary-mid));
	color: var(--white);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .8rem;
	font-weight: 700;
	font-family: 'Playfair Display', serif;
	flex-shrink: 0;
}

.job-item-body {
	flex: 1;
	min-width: 0;
}

.job-item-title {
	font-size: .95rem;
	font-weight: 700;
	color: var(--primary);
	margin-bottom: .3rem;
	line-height: 1.4;
}

.job-item-desc {
	font-size: .84rem;
	color: var(--text-sub);
	line-height: 1.75;
	word-break: keep-all;
}
/* 주요 자문 기업 */
.job-clients {
	background: var(--gray-100);
	border-left: 4px solid var(--accent);
	border-radius: 0 var(--radius) var(--radius) 0;
	padding: 1rem 1.25rem;
}

.job-clients p {
	font-size: .88rem;
	color: var(--text-sub);
	line-height: 1.85;
	word-break: keep-all;
}

@media (max-width: 768px) {

  .job-item {
  	gap: .75rem;
  	padding: .85rem 1rem;
  }

  .job-item-num {
  	width: 2rem;
  	height: 2rem;
  	font-size: .75rem;
  }

  .job-item-title {
  	font-size: .88rem;
  }

  .job-item-desc {
  	font-size: .8rem;
  }
}


/* ================================================================
 * 38. 반응형 — klabor_07.asp  @media (max-width: 768px)
 * ================================================================ */
@media (max-width: 768px) {
	/* ---- 레이아웃 좌우 쏠림 핵심 수정 ---- */
  .container {
    padding: 0 .75rem;
}

#page-wrap {
	overflow-x: clip;
	/* sticky 방해 없이 가로 넘침 차단 */
}

.side-col {
	display: none;
}

/* ---- 검색폼 ---- */
  .perf-search-wrap {
	padding: .65rem .75rem;
}

.perf-search-inner {
	flex-wrap: wrap;
	gap: .4rem;
}

.perf-select {
	flex: 1 1 calc(50% - .2rem);
	font-size: .78rem;
	height: 2rem;
}

.perf-input {
	flex: 1 1 100%;
}

.perf-search-btn {
	font-size: .82rem;
	justify-content: center;
}

/* ---- 건수/페이지 ---- */
  .perf-meta {
	gap: .25rem;
}

/* ---- 테이블 모바일 — 2열(년.월 / 업무+고객사 아래) ---- */
  .perf-table-wrap {
	overflow-x: hidden;
}

.perf-table {
	table-layout: fixed;
}

/* 모바일: 고객사 열 숨김 → 2열만 표시 */
  .perf-table col:nth-child(1) {
	width: 4.2rem;
}

.perf-table col:nth-child(2) {
	width: auto;
}

.perf-table col:nth-child(3) {
	display: none;
}

.perf-table thead th:nth-child(3),
  .perf-client-pc {
	display: none !important;
}

.perf-table thead th {
	padding: .55rem .6rem;
	font-size: .8rem;
}

.perf-table tbody td {
	padding: .6rem .6rem;
	vertical-align: top;
}

/* 년.월 셀 — 날짜 위 기준 정렬 (badge 있으므로) */
  .perf-date {
	vertical-align: middle;
	/* badge 없을 때: 세로 가운데 */
    white-space: nowrap;
}

/* perf-ym: 모바일에서 블록으로 — 아래 badge와 세로 배치 */
  .perf-ym {
	display: block;
	color: var(--gray-600);
	font-size: .75rem;
	line-height: 1.6;
}

/* 모바일: 년.월 아래 badge 표시 */
  .badge-mobile-only {
	display: inline-block !important;
	/* PC display:none 덮어씀 */
    font-size: .65rem;
	padding: .12rem .45rem;
	white-space: nowrap;
	max-width: 5rem;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: middle;
}

/* badge가 있으면 perf-date 셀 위 기준 정렬 */
  .perf-date:has(.badge-mobile-only) {
	vertical-align: top;
}

/* 모바일: 업무 앞 badge 숨김 */
  .badge-pc-only {
	display: none !important;
}

/* 업무 셀 */
  .perf-subject-cell {
	vertical-align: middle;
}

.perf-subject-text {
	font-size: .82rem;
	line-height: 1.4;
	word-break: keep-all;
}

/* 모바일 전용 고객사 — 업무 아래 작게 */
  .perf-client-mobile {
	display: block !important;
}

.perf-client-mobile::before {
	content: '▸ ';
	color: var(--accent);
	font-size: .68rem;
}

.badge {
	padding: .1rem .35rem;
}

.perf-detail-header {
	padding: .65rem .85rem;
}

.perf-detail-row {
	flex-wrap: wrap;
	gap: .4rem;
}

.perf-detail-label {
	font-size: .72rem;
	padding: .15rem .5rem;
}

.perf-detail-val {
	font-size: .8rem;
}

.perf-detail-body {
	padding: .75rem .85rem;
	line-height: 1.75;
}

/* ---- 페이징 ---- */
  .pagination-wrap {
	gap: .2rem;
	padding: .5rem 0;
}

.pagination-wrap a,
  .pagination-wrap span {
	padding: 0 .35rem;
	border-radius: .3rem;
}

}
/* ================================================================
 * 39-1. 페이징 반응형 — PC: blockSize=10 / 모바일: blockSize=5
 * ================================================================ */
/* PC 기본 — pagination-pc 표시, pagination-mobile 숨김 */
.pagination-pc {
	display: block;
}

.pagination-mobile {
	display: none;
}

@media (max-width: 768px) {

  /* 모바일 — pagination-mobile 표시, pagination-pc 숨김 */
  .pagination-pc {
  	display: none;
  }

  .pagination-mobile {
  	display: block;
  }
}


/* ================================================================
 * 티커 — 모바일 반응형  @media (max-width: 768px)
 * ================================================================ */
@media (max-width: 768px) {
	/* 티커 전체 높이 축소 */
  #wage-ticker-wrap { min-height: 2.4rem;
}

#wage-ticker {
	min-height: 2.4rem;
}

/* 라벨 — 모바일 폰트 축소 */
  .ticker-label {
	padding: 0 .6rem;
	max-width: 5.5rem;
}

/* 아이템 높이 축소 */
  .ticker-item {
	gap: .5rem;
}

.ticker-item-label {
	font-size: .75rem;
}

.ticker-item-detail {
	font-size: .72rem;
}

.ticker-item-detail strong {
	font-size: .72rem;
}

.ticker-sep {
	margin: 0 .1rem;
}

/* 카운터 패딩 축소 */
  .ticker-counter {
	padding: 0 .45rem;
}

/* 버튼 크기 축소 */
  .ticker-btn {
	width: 1.75rem;
	font-size: .65rem;
}

/* 뷰포트 높이 — JS로 동적 설정되지만 초기 렌더 대비 */
  .ticker-viewport {
	height: 2.4rem;
}

}
/* ================================================================
 * 주요업무 실적 테이블 (job_04 교육훈련 등 실적 테이블)
 * ================================================================ */
.job-clients-title {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: .88rem;
	font-weight: 700;
	color: var(--primary);
	margin-bottom: .6rem;
	padding: .5rem .75rem;
	background: var(--gray-100);
	border-left: 3px solid var(--primary);
	border-radius: 0 var(--radius) var(--radius) 0;
}

.job-clients-title i {
	color: var(--accent);
}

.job-clients-table {
	padding: 0;
	background: none;
	border: none;
}

.job-result-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .84rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-card);
}

.job-result-table thead tr {
	background: var(--primary);
	color: var(--white);
}

.job-result-table thead th {
	padding: .6rem 1rem;
	text-align: left;
	font-weight: 600;
	font-size: .82rem;
}

.job-result-table tbody tr {
	border-bottom: 1px solid var(--border);
	transition: background .15s;
}

.job-result-table tbody tr:last-child {
	border-bottom: none;
}

.job-result-table tbody tr:hover {
	background: var(--gray-100);
}

.job-result-table tbody td {
	padding: .65rem 1rem;
	color: var(--text-sub);
	line-height: 1.65;
	vertical-align: top;
}

.job-result-table tbody td:first-child {
	color: var(--text-main);
	font-weight: 500;
}

@media (max-width: 768px) {

  /* 테이블 전체 너비 100% 강제 */
  .job-clients-table,
  .job-result-table {
  	display: block;
  	/* block으로 전환해도 100% 유지 */;
  }

  .job-result-table {
  	font-size: .78rem;
  }

  .job-result-table thead th {
  	padding: .5rem .75rem;
  }

  .job-result-table tbody td {
  	padding: .5rem .75rem;
  }

  /* 모바일: 2열 → 1열 (제목+기관 세로 배치) */
  .job-result-table thead {
  	display: none;
  }

  .job-result-table tbody tr {
  	width: 100%;
  	/* 행 너비 100% 명시 */
    border-bottom: 1px solid var(--border);
  }

  .job-result-table tbody td {
  	width: 100%;
  	/* 셀 너비 100% 명시 */
    padding: .15rem 0;
  	border: none;
  }

  .job-result-table tbody td:first-child {
  	font-weight: 700;
  	margin-bottom: .2rem;
  }

  .job-result-table tbody td:last-child::before {
  	content: "▸ ";
  	font-size: .7rem;
  }
}


/* ================================================================
 * 주요업무 항목 이미지 (job_03 회사 제규정 등 이미지 포함 항목)
 * ================================================================ */
.job-item-img {
	flex-shrink: 0;
	margin-left: auto;
	padding-left: 1rem;
	display: flex;
	align-items: center;
}

.job-item-img img {
	max-width: 8rem;
	height: auto;
	display: block;
	border-radius: .35rem;
	opacity: .92;
	transition: var(--trans);
}

.job-item:hover .job-item-img img {
	opacity: 1;
}

@media (max-width: 768px) {

  .job-item-img {
  	padding-left: .5rem;
  	margin-left: 0;
  }

  .job-item-img img {
  	max-width: 5rem;
  	/* 모바일: 크기 축소해서 표시 */;
  }
}


/* ================================================================
 * 공지사항 (notice_01.asp) — TB_BOARD
 * ================================================================ */

/* ---- 목록 테이블 ---- */
.notice-table-wrap {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: 1rem;
}

.notice-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .85rem;
	min-width: 480px;
}

.notice-table thead tr {
	background: var(--primary);
	color: var(--white);
}

.notice-table thead th {
	padding: .65rem 1rem;
	text-align: center;
	font-weight: 600;
	font-size: .82rem;
	white-space: nowrap;
}

.notice-table thead th:nth-child(2) {
	text-align: left;
}

.notice-table tbody tr {
	border-bottom: 1px solid var(--border);
	cursor: pointer;
	transition: background .15s;
}

.notice-table tbody tr:last-child {
	border-bottom: none;
}

.notice-table tbody tr:hover {
	background: #eef2f9;
}
/* n_top="0" — 1순위 공지 (진한 배경) */
.notice-row-n0 {
	background: #dde9ec !important;
}

.notice-row-n0:hover {
	background: #ccdde2 !important;
}
/* n_top="1" — 2순위 공지 (연한 배경) */
.notice-row-n1 {
	background: #ebf1f3 !important;
}

.notice-row-n1:hover {
	background: #dde9ec !important;
}

.notice-table td {
	padding: .6rem 1rem;
	vertical-align: middle;
}

.notice-num {
	text-align: center;
	color: var(--gray-600);
	font-size: .8rem;
	white-space: nowrap;
}

.notice-title-cell {
	display: table-cell;
	vertical-align: middle;
}

.notice-subject {
	color: var(--text-main);
	font-size: .85rem;
	line-height: 1.5;
	word-break: keep-all;
}
/* 현재 읽고 있는 글 — 글자색 반전 (배경 없음) */
.notice-subject-active {
	color: var(--primary);
	font-size: .85rem;
	font-weight: 700;
	line-height: 1.5;
	word-break: keep-all;
}

.notice-file-cell {
	text-align: center;
	white-space: nowrap;
}

.notice-file-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	background: var(--gray-100);
	border: 1px solid var(--border);
	border-radius: .35rem;
	color: var(--primary);
	font-size: .78rem;
	transition: var(--trans);
	margin: 0 .1rem;
	text-decoration: none;
}

.notice-file-link:hover {
	background: var(--primary);
	color: var(--white);
}

.notice-no-file {
	color: var(--gray-400);
	font-size: .8rem;
}

.notice-date {
	text-align: center;
	color: var(--gray-600);
	font-size: .78rem;
	white-space: nowrap;
}

.notice-views {
	text-align: center;
	color: var(--gray-400);
	font-size: .78rem;
	white-space: nowrap;
}

.notice-empty {
	text-align: center;
	padding: 2.5rem 1rem;
	color: var(--gray-400);
	font-size: .88rem;
}

.notice-empty i {
	margin-right: .4rem;
	color: var(--accent);
}
/* 번호열 공지 배지 (n_top=0/1 공통) */
.notice-fixed-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: .7rem;
	font-weight: 700;
	color: var(--white);
	background: #0e6aa4;
	border-radius: .45rem;
	padding: .2rem .55rem;
	white-space: nowrap;
}
/* 제목 앞 공지 라벨 배지 */
.notice-badge-label {
	display: inline-block;
	background: #0e6aa4;
	box-sizing: border-box;
	border-radius: 7px;
	padding: 2px 6px;
	color: #fff;
	font-size: .72rem;
	font-weight: 700;
	vertical-align: middle;
	line-height: 1.4;
	flex-shrink: 0;
}
/* n_top=0 : 진한 파랑 */
.notice-badge-0 {
	background: #0e6aa4;
}
/* n_top=1 : 연한 파랑 */
.notice-badge-1 {
	background: #3a8abf;
}
/* 새 글 N 배지 */
.notice-new-badge {
	display: inline-block;
	font-size: .62rem;
	font-weight: 700;
	color: var(--white);
	background: #e53e3e;
	border-radius: 2rem;
	padding: .07rem .38rem;
	margin-left: .3rem;
	vertical-align: middle;
	line-height: 1.4;
}


/* ---- 상세보기 ---- */


.notice-view-card {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	margin-bottom: 1.5rem;
}

.notice-view-header {
	background: var(--gray-100);
	border-bottom: 2px solid var(--primary);
	padding: 1.1rem 1.2rem;
}

.notice-view-title {
	font-family: 'Noto Serif KR', serif;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--primary);
	line-height: 1.5;
	margin-bottom: .5rem;
	word-break: keep-all;
}

.notice-view-meta {
	display: flex;
	gap: 1.25rem;
	font-size: .8rem;
	color: var(--gray-600);
}

.notice-view-meta i {
	color: var(--accent);
	margin-right: .3rem;
}

.notice-view-body {
	padding: 1.5rem 1.25rem;
	font-size: .9rem;
	line-height: 1.9;
	color: var(--text-main);
	min-height: 8rem;
	background: var(--white);
	border-bottom: 1px solid var(--border);
	word-break: keep-all;
}


/* ---- 첨부파일 영역 ---- */


.notice-file-wrap {
	padding: .85rem 1.25rem;
	background: var(--gray-100);
	border-bottom: 1px solid var(--border);
}

.notice-file-title {
	font-size: .82rem;
	font-weight: 700;
	color: var(--primary);
	margin-bottom: .55rem;
	display: flex;
	align-items: center;
	gap: .35rem;
}

.notice-file-title i {
	color: var(--accent);
}

.notice-file-item {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: .82rem;
	color: var(--text-sub);
	text-decoration: none;
	padding: .3rem 0;
	transition: var(--trans);
}

.notice-file-item:hover {
	color: var(--primary);
}

.notice-file-item i {
	color: var(--accent);
	font-size: .85rem;
	flex-shrink: 0;
}

.notice-file-item span {
	flex: 1;
	word-break: break-all;
}

.notice-file-item em {
	color: var(--gray-400);
	font-size: .76rem;
	font-style: normal;
	flex-shrink: 0;
}


/* ---- 목록 버튼 ---- */


.notice-view-nav {
	display: flex;
	justify-content: center;
	padding: .75rem;
	background: var(--gray-100);
}

.notice-list-btn {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .4rem 1.75rem;
	border: 1.5px solid var(--primary);
	border-radius: var(--radius);
	font-size: .82rem;
	font-weight: 700;
	color: var(--primary);
	text-decoration: none;
	transition: var(--trans);
}

.notice-list-btn:hover {
	background: var(--primary);
	color: var(--white);
}


/* ---- 모바일 반응형 ---- */

/* 모바일 전용 날짜·조회 — PC에서는 숨김 */
.notice-sub-meta {
	display: none;
}

@media (max-width: 768px) {

  .notice-table {
  	min-width: 0;
  	font-size: .78rem;
  }

  .notice-table thead th {
  	padding: .5rem .5rem;
  	font-size: .72rem;
  }

  .notice-table td {
  	padding: .5rem .5rem;
  }

  /* 모바일: 날짜·조회·파일 열 숨김 */
  .notice-table col:nth-child(3),
  .notice-table col:nth-child(4),
  .notice-table col:nth-child(5),
  .notice-table thead th:nth-child(3),
  .notice-table thead th:nth-child(4),
  .notice-table thead th:nth-child(5),
  .notice-table tbody td:nth-child(3),
  .notice-table tbody td:nth-child(4),
  .notice-table tbody td:nth-child(5) {
  	display: none;
  }

  /* 제목 아래 날짜·조회 표시 */
  .notice-sub-meta {
  	margin-top: .3rem;
  	color: var(--gray-400);
  }

  .notice-sub-meta i {
  	margin-right: .2rem;
  	font-size: .68rem;
  }

  .notice-subject {
  	font-size: .8rem;
  }

  .notice-date {
  	font-size: .72rem;
  }

  .notice-views {
  	font-size: .72rem;
  }

  .notice-view-title {
  	font-size: .95rem;
  }

  .notice-view-body {
  	padding: 1rem .9rem;
  	font-size: .85rem;
  }

  .notice-view-meta {
  	flex-wrap: wrap;
  	gap: .65rem;
  	font-size: .75rem;
  }

  .notice-file-item span {
  	font-size: .78rem;
  }
}


/* ================================================================
 * 공지사항 — 이미지/동영상 미리보기 + 파일 아이콘 줄바꿈 방지
 * ================================================================ */
/* 이미지/동영상 미리보기 영역 */
.notice-media-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
	padding: 1.25rem 1.25rem 0;
	background: var(--white);
}

.notice-media-item {
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 100%;
}

.notice-media-img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	display: block;
}

.notice-media-video {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	display: block;
}
/* 파일 아이콘 — 줄바꿈 방지 */
.notice-file-nowrap {
	white-space: nowrap;
}

.notice-file-icons {
	display: inline-flex;
	align-items: center;
	gap: .2rem;
	flex-wrap: nowrap;
	white-space: nowrap;
}

@media (max-width: 768px) {

  .notice-media-wrap {
  	padding: .85rem .85rem 0;
  	gap: .75rem;
  }

  .notice-media-img,
  .notice-media-video {
  	max-width: 100%;
  }
}


/* ================================================================
 * 개인정보 처리방침 (klabor_privacy.asp)
 * ================================================================ */
.privacy-wrap {
	max-width: 100%;
	margin-bottom: 2rem;
}

.privacy-intro {
	background: var(--gray-100);
	border-left: 4px solid var(--primary);
	border-radius: 0 var(--radius) var(--radius) 0;
	padding: 1.1rem 1.25rem;
	margin-bottom: 1.5rem;
}

.privacy-app-title {
	font-family: 'Noto Serif KR', serif;
	font-size: 1rem;
	font-weight: 700;
	color: var(--primary);
	margin-bottom: .55rem;
}

.privacy-intro p {
	font-size: .88rem;
	color: var(--text-sub);
	line-height: 1.8;
}
/* 섹션 */
.privacy-section {
	margin-bottom: 1.5rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-card);
}

.privacy-section-title {
	display: flex;
	align-items: center;
	gap: .55rem;
	background: var(--primary);
	color: var(--white);
	font-size: .9rem;
	font-weight: 700;
	padding: .7rem 1.1rem;
	margin: 0;
	line-height: 1.4;
	word-break: keep-all;
}

.privacy-section-title i {
	color: var(--accent-light);
	font-size: .78rem;
	flex-shrink: 0;
}

.privacy-desc {
	font-size: .86rem;
	color: var(--text-sub);
	line-height: 1.85;
	padding: .85rem 1.1rem .5rem;
	word-break: keep-all;
}

.privacy-desc + .privacy-desc {
	padding-top: 0;
}
/* 항목 번호 리스트 */
.privacy-items {
	padding: .75rem 1.1rem 1rem;
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

.privacy-item {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
}

.privacy-item-num {
	flex-shrink: 0;
	width: 1.6rem;
	height: 1.6rem;
	background: var(--primary);
	color: var(--white);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .75rem;
	font-weight: 700;
	margin-top: .1rem;
}

.privacy-item-body {
	flex: 1;
	min-width: 0;
}

.privacy-item-title {
	font-size: .86rem;
	font-weight: 700;
	color: var(--primary);
	margin-bottom: .3rem;
	line-height: 1.5;
}

.privacy-item-body p {
	font-size: .84rem;
	color: var(--text-sub);
	line-height: 1.85;
	word-break: keep-all;
}
/* 점 리스트 */
.privacy-list {
	list-style: none;
	padding: .75rem 1.1rem 1rem;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.privacy-list li {
	font-size: .85rem;
	color: var(--text-sub);
	line-height: 1.8;
	padding-left: .9rem;
	position: relative;
	word-break: keep-all;
}

.privacy-list li::before {
	content: '–';
	position: absolute;
	left: 0;
	color: var(--accent);
	font-weight: 700;
}
/* 책임자 박스 */
.privacy-contact-box {
	background: linear-gradient(135deg, var(--primary), var(--primary-mid));
	border-radius: var(--radius);
	padding: 1.25rem 1.4rem;
	color: var(--white);
	box-shadow: var(--shadow-card);
}

.privacy-contact-title {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: .95rem;
	font-weight: 700;
	color: var(--white);
	margin-bottom: .85rem;
	padding-bottom: .65rem;
	border-bottom: 1px solid rgba(255,255,255,.2);
}

.privacy-contact-title i {
	color: var(--accent-light);
}

.privacy-contact-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: .45rem;
}

.privacy-contact-list li {
	display: flex;
	align-items: center;
	gap: .55rem;
	font-size: .86rem;
	color: rgba(255,255,255,.85);
}

.privacy-contact-list i {
	color: var(--accent-light);
	font-size: .82rem;
	width: 1rem;
	text-align: center;
}

.privacy-contact-list a {
	color: var(--accent-light);
	text-decoration: none;
}

.privacy-contact-list a:hover {
	color: var(--white);
	text-decoration: underline;
}

@media (max-width: 768px) {

  .privacy-section-title {
  	font-size: .82rem;
  	padding: .65rem .9rem;
  }

  .privacy-desc {
  	font-size: .82rem;
  	padding: .75rem .9rem .4rem;
  }

  .privacy-items {
  	padding: .65rem .9rem .85rem;
  	gap: .65rem;
  }

  .privacy-item-body p {
  	font-size: .8rem;
  }

  .privacy-list {
  	padding: .65rem .9rem .85rem;
  }

  .privacy-list li {
  	font-size: .8rem;
  }

  .privacy-contact-box {
  	padding: 1rem 1.1rem;
  }
}


/* ================================================================
 * 노동사건 사례모음 (notice_03.asp) — 분기 배지 + 하위 목록
 * ================================================================ */

/* 분기 배지 — 목록/글읽기 제목 앞 [2025년 1/4분기] */
.case-quarter-badge {
	display: inline-block;
	color: #0099cc;
	font-size: .82rem;
	font-weight: 700;
	margin-right: .35rem;
	white-space: nowrap;
	vertical-align: middle;
	line-height: 1.4;
	flex-shrink: 0;
}
/* 글읽기 제목 내 배지 크기 */
.notice-view-title .case-quarter-badge {
	font-size: .88rem;
}
/* 하위 목록 컨테이너 */
.case-sublist {
	margin: 0;
	border-top: 1px solid var(--border);
	background: var(--white);
}

.case-sublist-title {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .7rem 1.1rem;
	background: var(--gray-100);
	border-bottom: 1px solid var(--border);
	font-size: .84rem;
	font-weight: 700;
	color: var(--primary);
}

.case-sublist-title i {
	color: var(--accent);
}

.case-sublist-count {
	margin-left: auto;
	font-size: .75rem;
	font-weight: 600;
	color: var(--white);
	background: var(--primary);
	border-radius: 2rem;
	padding: .1rem .6rem;
}
/* 하위 항목 리스트 */
.case-sublist-items {
	list-style: none;
	padding: .4rem 0;
	margin: 0;
}

.case-sublist-item {
	border-bottom: 1px solid var(--border);
}

.case-sublist-item:last-child {
	border-bottom: none;
}

.case-sublist-item a {
	display: flex;
	align-items: center;
	gap: .65rem;
	padding: .6rem 1.1rem;
	text-decoration: none;
	color: var(--text-main);
	transition: var(--trans);
}

.case-sublist-item a:hover {
	background: #f0f8ff;
	color: #008080;
}

.case-sublist-item a:hover .case-sublist-num {
	background: #008080;
	color: var(--white);
}

.case-sublist-num {
	flex-shrink: 0;
	width: 1.5rem;
	height: 1.5rem;
	background: var(--gray-200);
	color: var(--gray-600);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .72rem;
	font-weight: 700;
	transition: var(--trans);
}

.case-sublist-text {
	flex: 1;
	font-size: .85rem;
	color: #008080;
	line-height: 1.5;
	word-break: keep-all;
}

.case-sublist-arrow {
	flex-shrink: 0;
	font-size: .72rem;
	color: var(--gray-400);
	transition: var(--trans);
}

.case-sublist-item a:hover .case-sublist-arrow {
	color: #008080;
	transform: translateX(2px);
}

@media (max-width: 768px) {

  .case-quarter-badge {
  	font-size: .75rem;
  }

  .notice-view-title .case-quarter-badge {
  	font-size: .8rem;
  }

  .case-sublist-title {
  	font-size: .8rem;
  	padding: .6rem .85rem;
  }

  .case-sublist-item a {
  	padding: .55rem .85rem;
  	gap: .5rem;
  }

  .case-sublist-text {
  	font-size: .8rem;
  }

  .case-sublist-num {
  	width: 1.35rem;
  	height: 1.35rem;
  	font-size: .68rem;
  }
}


/* ================================================================
 * 노동사건 사례모음 상세보기 (read_view_casestudy.asp)
 * ================================================================ */

/* 상위 사례 제목 바 */
.case-parent-bar {
	display: flex;
	align-items: baseline;
	gap: .5rem;
	background: var(--gray-100);
	border-left: 4px solid var(--primary);
	border-radius: 0 var(--radius) var(--radius) 0;
	padding: .75rem 1.1rem;
	margin-bottom: 1rem;
	flex-wrap: wrap;
}

.case-parent-subject {
	font-size: .9rem;
	font-weight: 600;
	color: var(--primary);
	line-height: 1.5;
	word-break: keep-all;
}
/* 하위 항목 제목 */
.case-items-title {
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	font-size: .98rem;
	line-height: 1.5;
}

.case-items-icon {
	flex-shrink: 0;
	color: var(--accent);
	font-size: .85rem;
	margin-top: .15rem;
}

.case-items-subject {
	flex: 1;
	color: var(--primary);
	word-break: keep-all;
}
/* 본문 */
.case-items-content {
	font-size: .9rem;
	line-height: 1.95;
	color: var(--text-main);
	word-break: keep-all;
}
/* 이전 / 다음 네비게이션 */
.case-nav-wrap {
	border-top: 1px solid var(--border);
	background: var(--gray-100);
}

.case-nav-item {
	border-bottom: 1px solid var(--border);
	padding: 0;
}

.case-nav-item:last-child {
	border-bottom: none;
}

.case-nav-item a {
	display: flex;
	align-items: center;
	gap: .85rem;
	padding: .65rem 1.1rem;
	text-decoration: none;
	transition: var(--trans);
	color: var(--text-main);
}

.case-nav-item a:hover {
	background: #eef2f9;
}

.case-nav-label {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	font-size: .75rem;
	font-weight: 700;
	color: var(--white);
	background: var(--primary);
	border-radius: .3rem;
	padding: .2rem .6rem;
	white-space: nowrap;
}

.case-nav-title {
	flex: 1;
	font-size: .84rem;
	color: var(--text-sub);
	line-height: 1.4;
	word-break: keep-all;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.case-nav-item a:hover .case-nav-title {
	color: var(--primary);
}

.case-nav-none {
	display: block;
	padding: .65rem 1.1rem;
	font-size: .82rem;
	color: var(--gray-400);
}

@media (max-width: 768px) {

  .case-parent-bar {
  	padding: .65rem .85rem;
  }

  .case-parent-subject {
  	font-size: .84rem;
  }

  .case-items-title {
  	font-size: .9rem;
  }

  .case-items-content {
  	font-size: .85rem;
  	line-height: 1.85;
  }

  .case-nav-item a {
  	gap: .6rem;
  	padding: .6rem .85rem;
  }

  .case-nav-title {
  	font-size: .78rem;
  }
}


/* ================================================================
 * 출판물 (books.asp)
 * ================================================================ */

/* 출판물 카드 전체 */
.book-card {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	margin-bottom: 2rem;
}
/* 타이틀 바 */
.book-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--primary);
	padding: .75rem 1.25rem;
	gap: 1rem;
}

.book-card-title {
	font-family: 'Noto Serif KR', serif;
	font-size: 1rem;
	font-weight: 700;
	color: var(--white);
	line-height: 1.4;
	word-break: keep-all;
}

.book-card-label {
	flex-shrink: 0;
	font-size: .75rem;
	font-weight: 700;
	color: var(--accent-light);
	border: 1px solid rgba(255,255,255,.3);
	border-radius: .35rem;
	padding: .15rem .6rem;
	letter-spacing: .08em;
}
/* 본문 */
.book-card-body {
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
	padding: 1.5rem 1.25rem;
	background: var(--white);
}
/* 표지 이미지 */
.book-cover-wrap {
	flex-shrink: 0;
	width: 8.5rem;
	border: 2px solid var(--gray-200);
	border-radius: .45rem;
	overflow: hidden;
	background: var(--gray-100);
	box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

.book-cover-img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}
/* 소개 텍스트 */
.book-content-wrap {
	flex: 1;
	min-width: 0;
}

.book-content-text {
	font-size: .88rem;
	color: var(--text-sub);
	line-height: 1.85;
	word-break: keep-all;
	margin-bottom: 1.25rem;
}
/* 구입 버튼 */
.book-buy-wrap {
	margin-top: .5rem;
	width: 100%;
}

.book-buy-btn {
	display: inline-flex;
	align-items: center;
	gap: 0;
	background: #03c95b;
	border-radius: 10px;
	text-decoration: none;
	overflow: hidden;
	width: 100%;
	transition: var(--trans);
	box-shadow: 0 2px 8px rgba(3,201,91,.3);
}

.book-buy-btn:hover {
	filter: brightness(1.07);
	box-shadow: 0 4px 14px rgba(3,201,91,.45);
	transform: translateY(-1px);
}

.book-buy-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: .5rem .6rem .5rem .75rem;
}

.book-naver-icon {
	width: 22px;
	height: auto;
	display: block;
}

.book-buy-text {
	flex: 1;
	font-size: .88rem;
	font-weight: 700;
	color: var(--white);
	padding: .5rem .25rem;
	white-space: nowrap;
}

.book-buy-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: .4rem .75rem;
}

.book-naver-go {
	width: 24px;
	height: auto;
	display: block;
	opacity: .9;
}

@media (max-width: 768px) {

  /* 표지 → 소개 → 버튼 세로 배치 */
  .book-card-body {
  	flex-direction: column;
  	align-items: center;
  	gap: 1rem;
  	padding: 1.1rem 1rem;
  }

  /* 표지: 한 줄 전체 너비, 중앙 정렬 */
  .book-cover-wrap {
  	width: 60%;
  	max-width: 12rem;
  	flex-shrink: 0;
  }

  /* 소개 내용: 전체 너비 */
  .book-content-wrap {
  	width: 100%;
  }

  .book-content-text {
  	font-size: .84rem;
  }

  .book-card-title {
  	font-size: .9rem;
  }

  /* 구매 버튼: 화면 꽉 채움 */
  .book-buy-wrap {
  	width: 100%;
  }

  .book-buy-btn {
  	width: 100%;
  	max-width: 100%;
  	justify-content: center;
  }
}


/* ================================================================
 * 강의 목록 (lecture_01.asp)
 * ================================================================ */
.lec-table col:nth-child(3),
.lec-table col:nth-child(4),
.lec-table thead th:nth-child(3),
.lec-table thead th:nth-child(4),
.lec-table tbody td:nth-child(3),
.lec-table tbody td:nth-child(4) {
	text-align: center;
}

@media (max-width: 768px) {

  /* 모바일: 강의일정·신청마감일 열 숨김 → 제목 아래 표시 */
  .lec-table col:nth-child(3),
  .lec-table col:nth-child(4),
  .lec-table thead th:nth-child(3),
  .lec-table thead th:nth-child(4),
  .lec-table tbody td:nth-child(3),
  .lec-table tbody td:nth-child(4) {
  	display: none;
  }

  /* lecture_02 — 강의일정 열 숨김 (3열) */
  .lec-table-02 col:nth-child(3),
  .lec-table-02 thead th:nth-child(3),
  .lec-table-02 tbody td:nth-child(3) {
  	display: none;
  }
}


/* ================================================================
 * 강의 상세보기 (lecture_view.asp)
 * ================================================================ */

/* 섹션 공통 */
.lec-view-section {
	margin-bottom: 1.5rem;
}

.lec-section-header {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: .9rem;
	font-weight: 700;
	color: var(--primary);
	padding-bottom: .5rem;
	border-bottom: 2px solid var(--primary);
	margin-bottom: .85rem;
}

.lec-section-icon {
	color: var(--accent);
	font-size: .78rem;
}


/* ---- 강의 소개 카드 ---- */


.lec-info-card {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-card);
}

.lec-info-title-row {
	background: var(--primary);
	padding: .75rem 1.1rem;
}

.lec-info-main-title {
	font-family: 'Noto Serif KR', serif;
	font-size: .98rem;
	font-weight: 700;
	color: var(--white);
	line-height: 1.5;
	word-break: keep-all;
}

.lec-info-rows {
	display: flex;
	flex-direction: column;
}

.lec-info-row {
	display: flex;
	align-items: baseline;
	gap: .75rem;
	padding: .6rem 1.1rem;
	border-bottom: 1px solid var(--border);
	font-size: .85rem;
	line-height: 1.65;
}

.lec-info-row:last-child {
	border-bottom: none;
}

.lec-info-label {
	flex-shrink: 0;
	width: 6.5rem;
	font-weight: 700;
	color: var(--primary);
	display: flex;
	align-items: center;
	gap: .4rem;
	font-size: .83rem;
}

.lec-info-label i {
	color: var(--accent);
	width: .9rem;
	text-align: center;
}

.lec-info-val {
	flex: 1;
	color: var(--text-sub);
	word-break: keep-all;
}
/* 강의일정 행 강조 */
.lec-info-row-schedule {
	background: #fff8ee;
}

.lec-label-schedule {
	color: #d04000 !important;
}

.lec-val-schedule strong {
	color: #d04000;
	font-size: .92rem;
}


/* ---- 교육 신청 폼 ---- */


.lec-apply-card {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1.25rem 1.25rem;
	background: var(--white);
	box-shadow: var(--shadow-card);
}

.lec-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .65rem 1.25rem;
}

.lec-form-row {
	display: flex;
	flex-direction: column;
	gap: .3rem;
}

.lec-form-row-full {
	grid-column: 1 / -1;
}

.lec-form-label {
	font-size: .8rem;
	font-weight: 700;
	color: var(--primary);
}

.lec-required::before {
	content: '* ';
	color: #e53e3e;
}

.lec-form-input {
	height: 2.1rem;
	padding: 0 .75rem;
	border: 1px solid var(--border);
	border-radius: .35rem;
	font-size: .84rem;
	color: var(--text-main);
	transition: var(--trans);
	width: 100%;
	box-sizing: border-box;
	background: var(--white);
}

.lec-form-input:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 2px rgba(13,43,94,.12);
}

.lec-form-textarea {
	padding: .5rem .75rem;
	border: 1px solid var(--border);
	border-radius: .35rem;
	font-size: .84rem;
	color: var(--text-main);
	resize: vertical;
	width: 100%;
	box-sizing: border-box;
	line-height: 1.7;
	transition: var(--trans);
	background: var(--white);
}

.lec-form-textarea:focus {
	outline: none;
	border-color: var(--primary);
}

.lec-privacy-text {
	background: var(--gray-100);
	font-size: .78rem;
	color: var(--text-sub);
	line-height: 1.75;
	resize: none;
}

.lec-privacy-agree {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-top: .5rem;
	cursor: pointer;
	font-size: .83rem;
	color: var(--primary);
	font-weight: 600;
}

.lec-privacy-agree input[type="checkbox"] {
	width: 1rem;
	height: 1rem;
	accent-color: var(--primary);
	flex-shrink: 0;
}
/* 신청/마감 버튼 */
.lec-submit-wrap {
	display: flex;
	justify-content: center;
	margin-top: 1.25rem;
}

.lec-submit-btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: var(--primary);
	color: var(--white);
	border: none;
	border-radius: var(--radius);
	padding: .6rem 2.5rem;
	font-size: .9rem;
	font-weight: 700;
	cursor: pointer;
	transition: var(--trans);
}

.lec-submit-btn:hover {
	background: var(--primary-mid);
	transform: translateY(-1px);
}

.lec-deadline-msg {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: var(--gray-200);
	color: var(--gray-600);
	border-radius: var(--radius);
	padding: .6rem 2rem;
	font-size: .9rem;
	font-weight: 700;
}

.lec-deadline-msg i {
	color: #e53e3e;
}


/* ---- 강의 교재 소개 ---- */


.lec-book-card {
	display: flex;
	gap: 1.25rem;
	align-items: flex-start;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1.1rem 1.25rem;
	background: var(--white);
	box-shadow: var(--shadow-card);
}

.lec-book-cover {
	flex-shrink: 0;
	width: 7rem;
	border: 1px solid var(--gray-200);
	border-radius: .4rem;
	overflow: hidden;
	box-shadow: 0 3px 10px rgba(0,0,0,.1);
}

.lec-book-img {
	width: 100%;
	height: auto;
	display: block;
}

.lec-book-content {
	flex: 1;
	font-size: .86rem;
	color: var(--text-sub);
	line-height: 1.85;
	word-break: keep-all;
}


/* ---- 모바일 반응형 ---- */


@media (max-width: 768px) {

  .lec-info-label {
  	width: 5.5rem;
  	font-size: .78rem;
  }

  .lec-info-val {
  	font-size: .8rem;
  }

  .lec-info-row {
  	padding: .5rem .85rem;
  	gap: .5rem;
  }

  .lec-info-title-row {
  	padding: .65rem .85rem;
  }

  .lec-info-main-title {
  	font-size: .9rem;
  }

  /* 신청 폼 — 1열 */
  .lec-form-grid {
  	grid-template-columns: 1fr;
  }

  .lec-form-row-full {
  	grid-column: 1;
  }

  .lec-apply-card {
  	padding: .9rem;
  }

  .lec-submit-btn,
  .lec-deadline-msg {
  	width: 100%;
  	justify-content: center;
  }

  /* 교재 — 세로 배치 */
  .lec-book-card {
  	flex-direction: column;
  	align-items: center;
  	gap: .85rem;
  }

  .lec-book-cover {
  	width: 6rem;
  }

  .lec-book-content {
  	font-size: .82rem;
  }
}


/* ================================================================
 * 검색 결과 (search_result.asp)
 * ================================================================ */

/* 검색어 + 총 건수 헤더 */
.search-result-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: .75rem 1rem;
	background: var(--gray-100);
	border-radius: var(--radius);
	margin-bottom: 1.1rem;
	flex-wrap: wrap;
}

.search-keyword-label {
	display: flex;
	align-items: center;
	gap: .35rem;
	font-size: .9rem;
	color: var(--text-main);
}

.search-keyword-label strong {
	color: var(--primary);
}

.search-keyword-label i {
	color: var(--accent);
	font-size: .7rem;
}

.search-total-badge {
	font-size: .78rem;
	font-weight: 700;
	color: var(--white);
	background: var(--primary);
	border-radius: 2rem;
	padding: .2rem .75rem;
	white-space: nowrap;
}
/* 결과 전체 wrap */
.search-result-wrap {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
/* 카테고리 블록 */
.search-cat-block {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-card);
}

.search-cat-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--primary);
	/* 기본색 — cat-color-N으로 덮어씀 */
  padding: .6rem 1rem;
	gap: .5rem;
}

.search-cat-name {
	font-size: .88rem;
	font-weight: 700;
	color: var(--white);
}

.search-cat-count {
	font-size: .75rem;
	font-weight: 700;
	color: var(--white);
	background: rgba(255,255,255,.2);
	border-radius: 2rem;
	padding: .15rem .6rem;
	white-space: nowrap;
}
/* 결과 리스트 */
.search-result-list {
	list-style: none;
	padding: .4rem 0;
	margin: 0;
}

.search-result-item {
	border-bottom: 1px solid var(--border);
}

.search-result-item:last-child {
	border-bottom: none;
}

.search-result-link {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .6rem 1rem;
	text-decoration: none;
	color: var(--text-main);
	transition: var(--trans);
	font-size: .85rem;
	line-height: 1.5;
}

.search-result-link:hover {
	background: #eef2f9;
	color: var(--primary);
}

.search-code-badge {
	flex-shrink: 0;
	font-size: .75rem;
	font-weight: 700;
	color: #0099cc;
	white-space: nowrap;
}

.search-result-title {
	flex: 1;
	word-break: keep-all;
}
/* 검색어 하이라이트 */
.search-result-title b,
.search-result-title strong {
	color: #e05000;
	font-weight: 700;
}

.search-result-arrow {
	flex-shrink: 0;
	font-size: .7rem;
	color: var(--gray-400);
	transition: var(--trans);
}

.search-result-link:hover .search-result-arrow {
	color: var(--primary);
}
/* 더보기 버튼 */
.search-more-wrap {
	display: flex;
	justify-content: center;
	padding: .6rem;
	background: var(--gray-100);
	border-top: 1px solid var(--border);
}

.search-more-btn {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: .8rem;
	font-weight: 700;
	color: var(--primary);
	text-decoration: none;
	padding: .3rem .9rem;
	border: 1.5px solid var(--primary);
	border-radius: var(--radius);
	transition: var(--trans);
}

.search-more-btn:hover {
	background: var(--primary);
	color: var(--white);
}
/* 빈 결과 / 안내 */
.search-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .75rem;
	padding: 3rem 1rem;
	color: var(--gray-400);
	text-align: center;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--gray-100);
}

.search-empty i {
	font-size: 2rem;
	color: var(--accent);
}

.search-empty p {
	font-size: .88rem;
	color: var(--text-sub);
	line-height: 1.7;
}

.search-empty strong {
	color: var(--primary);
}

@media (max-width: 768px) {

  .search-result-header {
  	padding: .6rem .75rem;
  }

  .search-keyword-label {
  	font-size: .84rem;
  }

  .search-result-link {
  	font-size: .8rem;
  	padding: .55rem .85rem;
  }

  .search-cat-header {
  	padding: .55rem .85rem;
  }
}


/* ================================================================
 * 일반검색 목록 (search_list.asp) — 순번 추가
 * ================================================================ */
.search-list-seq {
	flex-shrink: 0;
	width: 1.8rem;
	text-align: right;
	font-size: .78rem;
	color: var(--gray-400);
	font-variant-numeric: tabular-nums;
	padding-right: .3rem;
}

@media (max-width: 768px) {

  .search-list-seq {
  	display: none;
  }
}


/* ================================================================
 * 판례 검색 (search_cases_result.asp)
 * ================================================================ */

/* 분류 경로 바 */
.cases-path-bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .3rem;
	padding: .6rem 1.1rem;
	background: #e9f8f7;
	border-bottom: 1px solid #93ddd8;
	font-size: .8rem;
	color: #005ab5;
	line-height: 1.5;
}

.cases-path-sep {
	font-size: .65rem;
	color: #93ddd8;
}
/* 판례 본문 */
.cases-view-body {
	font-size: .88rem;
	line-height: 2;
	color: var(--text-main);
	word-break: keep-all;
}
/* 목록 — 제목 + 내용 미리보기 */
.cases-result-list .search-result-link {
	align-items: flex-start;
}

.cases-result-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: .2rem;
	min-width: 0;
}

.cases-result-subject {
	font-size: .85rem;
	color: var(--text-main);
	font-weight: 500;
	line-height: 1.5;
	word-break: keep-all;
}
/* 검색어 하이라이트 */
.cases-result-subject b,
.cases-result-subject strong {
	color: #e05000;
	font-weight: 700;
}

.cases-result-content {
	font-size: .78rem;
	color: #2e8b57;
	line-height: 1.5;
	word-break: keep-all;
}

.cases-result-content b,
.cases-result-content strong {
	color: #e05000;
}
/* 현재 선택된 항목 */
.cases-item-active .search-result-link {
	background: #e9f8f7;
}

.cases-item-active .cases-result-subject {
	color: #1fb5ad;
	font-weight: 700;
}

@media (max-width: 768px) {

  .cases-path-bar {
  	font-size: .75rem;
  	padding: .5rem .85rem;
  }

  .cases-view-body {
  	font-size: .83rem;
  	line-height: 1.85;
  }

  .cases-result-subject {
  	font-size: .8rem;
  }

  .cases-result-content {
  	font-size: .74rem;
  }
}


/* ================================================================
 * 행정해석 검색 (search_hangjung_result.asp)
 * ================================================================ */

/* 질의/회시 블록 공통 */
.hangjung-block {
	border-bottom: 1px solid var(--border);
}

.hangjung-block:last-of-type {
	border-bottom: none;
}

.hangjung-block-label {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: .84rem;
	font-weight: 700;
	padding: .6rem 1.1rem;
	border-bottom: 1px solid var(--border);
}
/* 질의 — 청록 */
.hangjung-label-q {
	color: #1fb5ad;
	background: rgba(31,181,173,.07);
}

.hangjung-label-q i {
	color: #1fb5ad;
}
/* 회시 — 오렌지 */
.hangjung-label-a {
	color: #ff6600;
	background: rgba(255,102,0,.06);
}

.hangjung-label-a i {
	color: #ff6600;
}

.hangjung-block-body {
	padding: .85rem 1.1rem;
	font-size: .87rem;
	line-height: 1.9;
	color: var(--text-main);
	word-break: keep-all;
}
/* 목록 — 질의 아이콘 + 텍스트 */
.hangjung-result-list .search-result-link {
	align-items: flex-start;
	gap: .5rem;
}

.hangjung-result-q {
	flex: 1;
	display: flex;
	align-items: flex-start;
	gap: .4rem;
	min-width: 0;
}

.hangjung-q-icon {
	flex-shrink: 0;
	color: #1fb5ad;
	font-size: .78rem;
	margin-top: .2rem;
}
/* 검색어 하이라이트 */
.hangjung-result-q b,
.hangjung-result-q strong {
	color: #e05000;
	font-weight: 700;
}

@media (max-width: 768px) {

  .hangjung-block-label {
  	font-size: .8rem;
  	padding: .55rem .85rem;
  }

  .hangjung-block-body {
  	padding: .75rem .85rem;
  	font-size: .82rem;
  }
}


/* ================================================================
 * 일반검색 글읽기 (search_view.asp)
 * ================================================================ */

/* 본문 영역 */
.search-view-body {
	padding: .5rem 0;
}
/* 조항목 아이템 공통 */
.search-view-item {
	padding: 1rem 1.1rem;
	border-bottom: 1px solid var(--border);
}

.search-view-item:last-child {
	border-bottom: none;
}
/* 조항목 제목 — 파란색 */
.search-view-item-title {
	font-size: .9rem;
	font-weight: 700;
	color: #005ab5;
	line-height: 1.6;
	margin-bottom: .5rem;
	word-break: keep-all;
}

.search-view-item-title b,
.search-view-item-title strong {
	color: #e05000;
}
/* 조항목 본문 */
.search-view-item-content {
	font-size: .86rem;
	color: var(--text-main);
	line-height: 1.9;
	word-break: keep-all;
}

.search-view-item-content b,
.search-view-item-content strong {
	color: #e05000;
	font-weight: 700;
}
/* 시행령 조항목 */
.search-view-item-enforce {
	background: #fff9f5;
	border-left: 3px solid #ff6600;
	padding-left: 1rem;
}

.search-view-enforce-label {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: .75rem;
	font-weight: 700;
	color: #ff6600;
	background: rgba(255,102,0,.1);
	border-radius: .35rem;
	padding: .2rem .6rem;
	margin-bottom: .5rem;
}

.search-view-enforce-label i {
	font-size: .7rem;
}

.search-view-enforce-title {
	color: #ff6600;
}

.search-view-enforce-content {
	color: var(--text-sub);
}

@media (max-width: 768px) {

  .search-view-item {
  	padding: .85rem .85rem;
  }

  .search-view-item-title {
  	font-size: .84rem;
  }

  .search-view-item-content {
  	font-size: .8rem;
  	line-height: 1.8;
  }
}


/* ================================================================
 * 로고 + 티커 모바일 반응형 — index_koen.asp 기준
 * ================================================================ */

/* keyframes: 미디어쿼리 밖 전역 선언 (모든 브라우저 호환) */
@keyframes tickerScrollX {
	0%   { transform: translateX(0);
}

100% {
	transform: translateX(-50%);
}

}

@media (max-width: 768px) {
	/* ── 로고 ── */
  .logo-top .logo-en { font-size: .72rem;
	display: none;
}

.logo-top .logo-en-only {
	font-size: .92rem !important;
	font-weight: 500 !important;
	color: var(--white) !important;
	white-space: nowrap !important;
	display: inline !important;
}

.logo-en-br {
	display: block !important;
	line-height: .2;
}

/* ── 티커 모바일 ── */
  .ticker-counter {
	display: none !important;
}

.ticker-controls {
	display: none !important;
}

.ticker-item-icon {
	display: none !important;
}

.ticker-item-value {
	display: none !important;
}

.ticker-sep {
	display: none !important;
}

#wage-ticker-wrap {
	height: 2.625rem !important;
	overflow: hidden;
}

#wage-ticker {
	height: 2.625rem !important;
	overflow: hidden;
}

/* ticker-inner: label | scroll-area 가로 배치 */
  .ticker-inner {
	padding: 0 .5rem;
	height: 2.625rem;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap;
	gap: 0;
}

/* label: 고정 크기 — 절대 줄어들지 않음 */
  .ticker-label {
	max-width: 8.8rem;
	background: #0d2b5e;
	/* 텍스트 가변 길이 대비 배경색으로 가림 */
    flex: 0 0 auto !important;
	border-right: 1px solid rgba(255,255,255,.15);
}

/* scroll-area: label 제외 나머지 공간 — 여기서만 overflow:hidden 클립 */
  .ticker-scroll-area {
	flex: 1 1 0 !important;
	min-width: 0 !important;
	overflow: hidden !important;
	/* 이 안에서만 스크롤 텍스트 클리핑 */
}

/* viewport: scroll-area 전체 채움 */
  .ticker-viewport {
	overflow: hidden !important;
	-webkit-mask-image: none !important;
	mask-image: none !important;
	position: relative;
}

/* track: 가로 배치 + 우→좌 animation */
  .ticker-track {
	width: max-content;
	animation: tickerScrollX 35s linear infinite;
	transition: none !important;
}

.ticker-track:hover {
	animation-play-state: paused;
}

/* 아이템: 가로 배치 */
  .ticker-item {
	height: 2.625rem !important;
	display: inline-flex !important;
	padding: 0 1.5rem 0 .5rem;
	border-right: 1px solid rgba(255,255,255,.18);
}

.ticker-item:last-child {
	border-right: none;
}

.ticker-item-detail {
	font-size: .66rem;
	color: rgba(255,255,255,.8);
}

.ticker-item-detail strong {
	color: var(--accent-light);
}

.ticker-item-label {
	color: var(--accent-light);
}

}
/* ================================================================
 * 검색결과 카테고리별 헤더 배경색 (search_result.asp)
 * cat_code = TB_BASIC_CODE2.f_code (pgubun=16)
 * ================================================================ */

/* 기본 헤더 — 색상 미지정 시 primary 유지 */
.search-cat-header {
	background: var(--primary);
}
/* 카테고리 1: 노동법전 — 딥블루 */
.search-cat-header.cat-color-1 {
	background: #0d2b5e;
}
/* 카테고리 2: 근로기준법 — 스틸블루 */
.search-cat-header.cat-color-2 {
	background: #1a4a7a;
}
/* 카테고리 3: 최저임금법 — 테알 */
.search-cat-header.cat-color-3 {
	background: #1a6b6b;
}
/* 카테고리 4: 산업안전보건법 — 다크그린 */
.search-cat-header.cat-color-4 {
	background: #2d6a2d;
}
/* 카테고리 5: 노동조합법 — 퍼플블루 */
.search-cat-header.cat-color-5 {
	background: #3d3580;
}
/* 카테고리 6: 고용보험법 — 인디고 */
.search-cat-header.cat-color-6 {
	background: #2c4a8a;
}
/* 카테고리 7: 산업재해보상보험법 — 다크티알 */
.search-cat-header.cat-color-7 {
	background: #1d5c6e;
}
/* 카테고리 8: 남녀고용평등법 — 마젠타블루 */
.search-cat-header.cat-color-8 {
	background: #5c2d7a;
}
/* 카테고리 9: 파견근로자보호법 — 다크올리브 */
.search-cat-header.cat-color-9 {
	background: #4a5c1a;
}
/* 카테고리 10: 기간제법 — 번트오렌지블루 */
.search-cat-header.cat-color-10 {
	background: #5c3a1a;
}
/* 카테고리 11~ : 순환 색상 */
.search-cat-header.cat-color-11 {
	background: #1a4a5c;
}

.search-cat-header.cat-color-12 {
	background: #3a1a5c;
}

.search-cat-header.cat-color-13 {
	background: #1a5c3a;
}

.search-cat-header.cat-color-14 {
	background: #5c1a3a;
}

.search-cat-header.cat-color-15 {
	background: #3a5c1a;
}


/* ================================================================
 * 39. job_06.asp — 모바일 #page-content 전체 너비 수정
 *     문제: 모바일에서 side-col 숨김 후 page-content가
 *           100% 너비를 채우지 못하고 왼쪽 치우침 발생
 *     해결: width/max-width 100% 명시 + box-sizing 보정
 * ================================================================ */
@media (max-width: 768px) {
  #page-wrap {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  #page-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 480px) {
  #page-wrap {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  #page-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    padding-left: 0;
    padding-right: 0;
  }
}