@charset 'utf-8';


	/* =========================
   업무사례 CASE LIST / READ
   ========================= */

	/* LIST HERO */
	.case-hero {
		/* background: radial-gradient(circle at top, rgba(37, 99, 235, 0.25), transparent 55%),
              #020617; */
		border-bottom: 1px solid var(--color-border-subtle);
	}

	.case-hero-inner {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
	}

	@media (min-width: 992px) {
		.case-hero-inner {
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}
	}

	.case-hero-title {
		font-size: clamp(2rem, 3.2vw, 2.6rem);
		letter-spacing: -0.05em;
		margin-bottom: 0.6rem;
	}

	.case-hero-desc {
		font-size: var(--fz-md);
		color: var(--color-text-sub-dark);
		max-width: 720px;
	}

	.case-hero-meta {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0.6rem;
		max-width: 260px;
	}

	@media (min-width: 768px) {
		.case-hero-meta {
			grid-template-columns: 1fr;
		}
	}

	.case-hero-meta-item {
		border-radius: 0.9rem;
		/* background-color: #020617; */
		border: 1px solid var(--color-border-subtle);
		padding: 0.6rem 0.8rem;
		font-size: var(--fz-md);
	}

	.case-hero-meta-item .label {
		display: block;
		color: var(--color-text-sub);
		margin-bottom: 0.1rem;
	}

	.case-hero-meta-item .value {
		color: var(--color-text-main);
		font-weight: 600;
	}

	/* LIST SECTION */
	.case-list-section {
		/* background-color: #020617; */
	}

	/* Toolbar */
	.case-toolbar {
		display: flex;
		flex-direction: column;
		gap: 0.8rem;
		margin-bottom: 1.8rem;
	}

	@media (min-width: 992px) {
		.case-toolbar {
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}
	}

	.case-filters {
		display: flex;
		flex-direction: column;
		gap: 0.4rem;
	}

	@media (min-width: 768px) {
		.case-filters {
			flex-direction: row;
			gap: 1rem;
		}
	}

	.case-filter-group {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.35rem;
	}

	.case-filter-label {
		font-size: var(--fz-md);
		color: var(--color-text-sub);
		margin-right: 0.2rem;
	}

	.case-chip {
		border-radius: 999px;
		border: 1px solid #374151;
		/* background-color: #020617; */
		color: #e5e7eb;
		font-size: var(--fz-md);
		padding: 0.25rem 0.8rem;
	}

	.case-chip.active {
		background-color: var(--color-primary);
		border-color: var(--color-primary);
		color: #f9fafb;
	}

	.case-sort {
		display: flex;
		align-items: center;
		gap: 0.4rem;
	}

	.case-sort-label {
		font-size: var(--fz-md);
		color: var(--color-text-sub);
	}

	.case-sort-select {
		max-width: 160px;
		/* background-color: #020617; */
		border-color: #374151;
		color: #e5e7eb;
	}

	/* 카드 그리드 */
	.case-card-grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 1.2rem;
	}

	@media (min-width: 768px) {
		.case-card-grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@media (min-width: 1200px) {
		.case-card-grid {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
	}

	.case-card {
		border-radius: var(--radius-lg);
		background-color: var(--color-surface);
		border: 1px solid var(--color-border-subtle);
		padding: 1.3rem 1.2rem 1.1rem;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	.case-card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: var(--fz-md);
		color: var(--color-text-sub);
	}

	.case-card-proc {
		padding: 0.15rem 0.6rem;
		border-radius: 999px;
		/* background-color: #111827; */
		color: #bfdbfe;
	}

	.case-card-proc-danger {
		background-color: rgba(220, 20, 60, 0.3);
		color: var(--color-accent-red);
	}

	.case-card-industry {
		color: var(--color-text-sub);
	}

	.case-card-title {
		font-size: var(--fz-md);
		margin-bottom: 0.15rem;
	}

	.case-card-title a {
		color: #f9fafb;
	}

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

	.case-card-summary {
		font-size: var(--fz-md);
		color: var(--color-text-sub);
		margin-bottom: 0.25rem;
	}

	.case-card-meta {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0.2rem;
		font-size: var(--fz-md);
		color: var(--color-text-sub);
		margin-bottom: 0.3rem;
	}

	.case-card-meta div {
		display: flex;
		justify-content: space-between;
		gap: 0.4rem;
	}

	.case-card-meta dt {
		font-weight: 500;
	}

	.case-card-meta dd {
		margin: 0;
		text-align: right;
	}

	.case-card-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 0.25rem;
		margin-top: 0.1rem;
	}
	.case-summary-tags {
		display: inline-flex;
		flex-wrap:wrap;
		row-gap:.5rem;
		column-gap: .5rem;
	}
	.case-tag {
		border-radius: 999px;
		border: 1px solid #374151;
		padding: 0.1rem 0.5rem;
		font-size: var(--fz-sm);
		color: var(--color-primary);
	}

	/* 페이지네이션 */
	.case-pagination .page-link {
		/* background-color: #020617; */
		border-color: #374151;
		color: #e5e7eb;
	}

	.case-pagination .page-item.active .page-link {
		background-color: var(--color-primary);
		border-color: var(--color-primary);
	}

	/* READ HERO */
	.case-read-hero {
		/* background-color: #020617; */
		border-bottom: 1px solid var(--color-border-subtle);
		padding-bottom: 2rem;
	}

	.case-breadcrumb {
		font-size: var(--fz-md);
		color: var(--color-text-sub);
		margin-bottom: 0.75rem;
	}

	.case-breadcrumb ol {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		gap: 0.35rem;
		flex-wrap: wrap;
	}
	.case-breadcrumb li:last-child::after {
		content: "";
	}

	.case-breadcrumb a {
		color: var(--color-text-sub);
	}

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

	

	.case-read-title {
		font-size: var(--fz-xl);
		letter-spacing: -0.04em;
		margin-bottom: 0.5rem;
	}

	.case-read-meta {
		display: flex;
		flex-wrap: wrap;
		gap: 0.6rem;
		font-size: var(--fz-md);
		color: var(--color-text-sub);
		align-items: center;
	}

	.case-read-proc {
		padding: 0.15rem 0.6rem;
		border-radius: 999px;
		/* background-color: #111827; */
		color: #2d6ebd;
		border : 1px solid #2d6ebd;
		font-size: var(--fz-md);
	}

	.case-read-industry {
		font-size: var(--fz-md);
	}

	/* READ MAIN LAYOUT */
	.case-read-section {
		padding-top: 2.5rem;
		/* background-color: #020617; */
	}

	.case-read-layout {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
		position:relative;
	}

	@media (min-width: 992px) {
		.case-read-layout {
			flex-direction: row;
			align-items: flex-start;
		}
	}

	.case-read-main {
		flex: 5;
		border-radius: var(--radius-lg);
		background-color: var(--color-surface);
		border: 1px solid var(--color-border-subtle);
		overflow:hidden;
	}

	.case-read-block + .case-read-block {
		margin-top: 1.1rem;
	}

	.case-read-subtitle {
		font-size: var(--fz-lg);
		font-weight: 600;
		margin-bottom: 0.4rem;
		color: #f9fafb;
	}

	.case-read-subsubtitle {
		font-size: var(--fz-md);
		font-weight: 600;
		margin-bottom: 0.3rem;
		color: #f9fafb;
	}

	.case-read-text {
		font-size: var(--fz-md);
		color: var(--color-text-sub);
		margin-bottom: 0.7rem;
		line-height: 1.7;
	}

	.case-read-list {
		font-size: var(--fz-md);
		color: var(--color-text-sub);
		padding-left: 1rem;
	}

	.case-read-list li {
		margin-bottom: 0.35rem;
	}

	/* READ SIDE SUMMARY */
	.case-read-side {
		flex: 2;
		display: flex;
		flex-direction: column;
		gap: 1rem;
		position: sticky;
		top: 6rem;
		align-self: flex-start;
		max-height: calc(100vh - 7rem);
		overflow: visible;
	}

	@media (max-width: 991.98px) {
		.case-read-side {
			position: static;
			max-height: none;
			overflow-y: visible;
		}
	}

	@media (min-width: 992px) and (max-width: 991.98px) {
		.case-read-side {
			order: -1;
		}
	}

	.case-summary-card {
		border-radius: var(--radius-lg);
		background-color: var(--color-surface);
		border: 1px solid var(--color-border-subtle);
		padding: 1.4rem 1.3rem;
		margin-bottom: 1rem;
	}

	.case-summary-title {
		font-size: var(--fz-lg);
		font-weight: 600;
		margin-bottom: 1rem;
		color: var(--color-primary);
	}

	.case-summary-list {
		font-size: var(--fz-md);
		margin-bottom: 0.6rem;
		display:flex;
		flex-wrap:wrap;
		gap: 2rem;
	}
	.case-summary-list > div {
		margin-bottom: .5rem;
	}
	.case-summary-list dt {
		font-weight: 500;
		padding-left: 0.5rem;
		/* border-left: 2px solid var(--color-primary); */
		color: var(--color-text-sub);
		font-size: var(--fz-sm);
	}
	.case-summary-list dt::before {
		content: "\2022";
		display: inline-block;
	}
	.case-summary-list dd {
		margin: 0;
		padding-left: 0.5rem;
		color: var(--color-primary);
	}

/* related faq */
.case-related-faq-list {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: var(--fz-sm);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.case-related-faq-list li {
	display: flex;
	padding: .5rem .9rem;
	position: relative;
	background: #ffffff;
	transition: all 0.25s ease;
}

.case-related-faq-list li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  background: #050;
  border-radius: 2px;
  height: 50%;
}

/* hover */
.case-related-faq-list li:hover {
  background: #f8fafc;
  border-color: #00a0ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 160, 255, 0.15);
}


/* 링크 스타일 */
.case-related-faq-list li a {
  flex: 1;
  color: var(--color-text-main);
  text-decoration: none;
  font-weight: 400;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
  transition: color .25s ease;
}

.case-related-faq-list li:hover a {
  color: #007ad6;
}


	/* READ FOOTER */
	.case-read-footer {
		/* max-width: 880px; */
		margin-top: 1.8rem ;
		display: flex;
		flex-direction: column;
		
	}

	@media (min-width: 768px) {
		.case-read-footer {
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}
	}

	.case-read-prevnext {
		font-size: var(--fz-md);
		color: var(--color-text-sub);
	}

	.case-read-prevnext .label {
		display: inline-block;
		min-width: 60px;
		color: #6b7280;
	}

	.case-read-prevnext a {
		color: var(--color-text-main);
	}

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

	.case-read-footer-actions {
		text-align: left;
	}

	@media (max-width: 767.98px) {
		.case-read-footer-actions {
			text-align: left;
		}
	}

	/* 업무 사례 목록 테이블 스타일 */
	.faq-list-section {
		padding-top: 2rem;
		max-width: 100%;
	}

	.faq-list-title {
		font-size: var(--fz-lg);
		font-weight: 700;
		margin-bottom: 1.5rem;
		color: var(--color-text-main);
	}

	.faq-list-table {
		overflow-x: auto;
	}

	.faq-list-table .table {
		width: 100%;
		margin-bottom: 0;
		background-color: var(--color-surface);
		border-collapse: separate;
		border-spacing: 0;
		border: 1px solid var(--color-border-subtle);
		border-radius: var(--radius-lg);
	}

	.faq-list-row {
		border-bottom: 1px solid var(--color-border-subtle);
		transition: background-color 0.2s ease;
	}

	.faq-list-row:last-child {
		border-bottom: none;
	}

	.faq-list-row:hover:not(.current-row) {
		background-color: rgba(74, 105, 189, 0.03);
	}

	.faq-list-cell {
		padding: 0;
		border: none;
	}

	.faq-list-link,
	.faq-list-current {
		display: flex;
		align-items: center;
		gap: 1rem;
		padding: 1rem 1.2rem;
		text-decoration: none;
		color: inherit;
	}

	.faq-list-link:hover {
		text-decoration: none;
	}

	.faq-list-badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0.25rem 0.6rem;
		border-radius: 4px;
		background-color: var(--theme-dark);
		color: #fff;
		font-size: var(--fz-sm);
		font-weight: 600;
		white-space: nowrap;
		min-width: 80px;
	}

	.faq-list-title-text {
		flex: 1;
		font-size: var(--fz-md);
		font-weight: 500;
		color: var(--color-text-main);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.faq-list-date {
		font-size: var(--fz-sm);
		color: var(--color-text-sub);
		white-space: nowrap;
		min-width: 100px;
		text-align: right;
		margin-left:auto;
	}

	/* 현재 글 강조 스타일 */
	.current-row {
		background-color: rgba(74, 105, 189, 0.08);
		border-top: 2px solid var(--theme-primary);
		border-bottom: 2px solid var(--theme-primary);
	}

	.current-cell {
		position: relative;
		border: none;
	}

	.faq-list-current {
		font-weight: 600;
	}

	.current-badge {
		background-color: var(--theme-primary);
	}

	.current-title {
		font-weight: 700;
		color: var(--theme-primary);
	}

	.current-indicator {
		display: inline-flex;
		align-items: center;
		padding: 0.25rem 0.6rem;
		border-radius: 4px;
		background-color: var(--theme-primary);
		color: #fff;
		font-size: var(--fz-sm);
		font-weight: 700;
		white-space: nowrap;
		margin-left: auto;
	}

	@media (max-width: 768px) {
		.faq-list-link,
		.faq-list-current {
			flex-direction: column;
			align-items: flex-start;
			gap: 0.5rem;
			padding: 0.8rem;
		}

		.faq-list-title-text {
			white-space: normal;
			line-height: 1.4;
		}

		.faq-list-date {
			text-align: left;
			min-width: auto;
		
		}

		.current-indicator {
			margin-left: 0;
			margin-top: 0.25rem;
		}
	}
	.category-badges {
  display: flex;
  align-items: center;
  gap: .375rem;
  margin-top: .25rem;
}


/* 리스트 아이템 내 배지의 시각적 균형 */
.card-item .category-badges {
  margin-top: .5rem;
}
    :root {
        --theme-primary: #4a69bd;       /* 메인 블루 */
        --theme-dark: #2c3e50;          /* 다크 네이비 */
        --bg-light-gray: #f8f9fa;       /* 배경용 연회색 */
        --text-muted: #6c757d;          /* 보조 텍스트 */
        --border-color: #dee2e6;        /* 구분선 색상 */
    }
	.read-hero {
		background-image: url(https://cdn.myplayer.kr/lawjibsa-mangobanana/corpsvr/success.jpeg);
	}



	/* 컨텐츠는 오버레이 위에 보이도록 z-index 올림 */
	.read-hero .container-xxxl,
	.read-hero .read-header,
	.read-hero .read-breadcrumb {
		position: relative;
		z-index: 2;
	}
    /* 2. 브레드크럼 (이전 코드와 스타일 통일) */
	.case-breadcrumb {
		margin-bottom: 1.5rem;
		font-size: var(--fz-md);
		color: var(--color-text-sub);
	}

    .case-breadcrumb ol {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
    }

    .case-breadcrumb li {
        display: flex;
        align-items: center;
    }

	.case-breadcrumb li + li::before {
		content: "\F285"; /* Bootstrap Icon: chevron-right */
		font-family: "bootstrap-icons";
		font-size: var(--fz-sm);
		margin: 0 10px;
		color: #adb5bd;
	}

    .case-breadcrumb a {
        text-decoration: none;
    color: rgba(255, 255, 255, 0.85);
        transition: color 0.2s;
    }

    .case-breadcrumb a:hover {
        color: var(--theme-primary);
        text-decoration: underline;
    }

    .case-breadcrumb li[aria-current="page"] {
        color:#fff;
        font-weight: 600;
    }

    /* 3. 헤더 텍스트 영역 */
    .case-read-header {
        position: relative;
    }

    /* 아이브로우 (CASE STUDY 텍스트) */
	.section-eyebrow {
		font-size: var(--fz-md);
        font-weight: 800;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        margin-bottom: 0.5rem;
        display: inline-block;
        border-bottom: 2px solid var(--color-text-sub-dark);
        padding-bottom: 2px;
	color:var(--color-text-sub-dark);
    }

	/* 제목 (H1) */
	.case-read-title {
		font-size: var(--fz-xl);
		font-weight: 800;
		color: #ffffff; /* 밝은 텍스트로 변경 */
		line-height: 1.35;
		margin-bottom: 1.5rem;
		word-break: keep-all;
		letter-spacing: -0.03em;
	}

    /* 4. 메타 정보 및 배지 영역 */
    .case-read-meta {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px; /* 요소 간 간격 */
        margin-top: 1.5rem;
    }

    /* 공통 배지 스타일 */
	.case-read-proc,
	.case-read-industry {
        display: inline-flex;
        align-items: center;
        padding: 6px 14px;
        border-radius: 50px; /* 둥근 알약 형태 */
		font-size: var(--fz-md);
        font-weight: 600;
        letter-spacing: -0.01em;
    }

    /* 절차(Process) 배지 - 강조형 */
    .case-read-proc {
        background-color: #e7f1ff; /* 아주 연한 블루 배경 */
        color: var(--theme-primary); /* 메인 블루 텍스트 */
    }

    /* 산업(Industry) 배지 - 보조형 */
    .case-read-industry {
        background-color: #ffffff;
        border: 1px solid #d1d5db;
        color: #4b5563;
    }

	/* 날짜 및 조회수 텍스트 */
	.case-read-meta span:not([class]) {
		color: rgba(255,255,255,0.9); /* 오버레이 위에 잘 보이도록 밝은 계열로 변경 */
		font-size: var(--fz-md);
		display: flex;
		align-items: center;
		margin-left: 5px; /* 배지와 텍스트 사이 약간의 간격 */
	}

    /* 구분선 (배지와 날짜 사이) */
    .case-read-meta span:not([class]):first-of-type::before {
        content: "";
        display: inline-block;
        width: 1px;
        height: 12px;
        background-color: #ced4da;
        margin: 0 15px 0 10px; /* 좌우 여백 */
    }

	.case-read-meta i {
		font-size: var(--fz-md);
        position: relative;
        top: -1px;
    }

    /* ----------------------------------------------------
       Mobile Responsive (반응형)
    ---------------------------------------------------- */
    @media (max-width: 768px) {
        .case-read-hero {
            padding: 2.5rem 0 2rem;
        }

		.case-read-title {
			font-size: var(--fz-xl);
			line-height: 1.4;
		}

        .case-read-meta {
            align-items: center;
            gap: 10px;
        }

        /* 모바일에서는 구분선 제거 및 간격 조정 */
        .case-read-meta span:not([class]):first-of-type::before {
            display: none;
        }
        
		.case-read-meta span:not([class]) {
			margin-left: 0;
			font-size: var(--fz-md);
		}
    }