@charset 'utf-8';


	/* =========================
   EXPERT COLUMNS LIST/READ
   ========================= */
	/* LIST HERO */
	.column-hero {
		border-bottom: 1px solid var(--color-border-subtle);
	}

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

	@media (min-width: 992px) {
		.column-hero-inner {
			flex-direction: row;
			align-items: stretch;
		}
	}

	.column-hero-text {
		flex: 1.1;
	}

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

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

	/* Featured Column */
	.column-featured-card {
		flex: 1;
		border-radius: var(--radius-xl);
		background-color: var(--color-surface);
		border: 1px solid var(--color-border-subtle);
		padding: 1.4rem 1.4rem 1.2rem;
	}

	.column-featured-label {
		font-size: var(--fz-md);
		color: var(--color-text-sub);
		margin-bottom: 0.3rem;
	}

	.column-featured-title {
		font-size: var(--fz-lg);
		margin-bottom: 0.4rem;
	}

	.column-featured-title a {
		color: #f9fafb;
	}

	.column-featured-title a:hover {
		color: var(--color-primary);
	}

	.column-featured-meta {
		font-size: var(--fz-md);
		color: var(--color-text-sub);
		display: flex;
		flex-wrap: wrap;
		gap: 0.6rem;
		margin-bottom: 0.5rem;
	}

	.column-featured-excerpt {
		font-size: var(--fz-md);
		color: var(--color-text-sub);
		margin-bottom: 0.6rem;
	}

	.column-featured-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 0.25rem;
	}

	/* LIST SECTION */
	.column-list-section {
	}

	/* Toolbar */
	.column-toolbar {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
		margin-bottom: 1.5rem;
	}

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

	.column-toolbar-left {
		display: flex;
		flex-wrap: wrap;
		gap: 0.35rem;
	}

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

	.column-filter-chip.active {
		background-color: var(--color-primary);
		border-color: var(--color-primary);
	}

	.column-toolbar-right {
		display: flex;
		justify-content: flex-start;
	}

	@media (min-width: 768px) {
		.column-toolbar-right {
			justify-content: flex-end;
		}
	}

	.column-search-inner {
		position: relative;
		max-width: 260px;
	}

	.column-search-inner i {
		position: absolute;
		top: 50%;
		left: 0.7rem;
		transform: translateY(-50%);
		font-size: var(--fz-md);
		color: #6b7280;
	}

	.column-search-inner .form-control {
		padding-left: 2rem;
		/* background-color: #020617; */
		border-color: #374151;
		color: #e5e7eb;
		font-size: var(--fz-md);
	}

	/* Column cards */
	.column-card-list {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	.column-card {
		border-radius: var(--radius-lg);
		background-color: var(--color-surface);
		border: 1px solid var(--color-border-subtle);
		padding: 1.1rem 1.2rem 1rem;
	}

	.column-card-topic {
		font-size: var(--fz-md);
		color: var(--color-text-sub);
		margin-bottom: 0.15rem;
	}

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

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

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

	.column-card-meta {
		font-size: var(--fz-md);
		color: var(--color-text-sub);
		display: flex;
		flex-wrap: wrap;
		gap: 0.6rem;
		margin-bottom: 0.4rem;
	}

	.column-card-excerpt {
		font-size: var(--fz-md);
		color: var(--color-text-sub);
		margin-bottom: 0.4rem;
	}

	.column-card-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 0.25rem;
	}

	.column-tag {
		border-radius: 999px;
		border: 1px solid #374151;
		padding: 0.1rem 0.55rem;
		font-size: var(--fz-sm);
		color: var(--color-text-main);
		display:inline-block;
		margin-bottom: 0.2rem;
	}

	/* pagination */
	.column-pagination .page-link {
		/* background-color: #020617; */
		border-color: #374151;
		color: #e5e7eb;
	}

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

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

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

	.column-breadcrumb ol {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		gap: 0.35rem;
		flex-wrap: wrap;
	}


	.column-breadcrumb li:last-child::after {
		content: "";
	}

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

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

	.column-read-topic {
		font-size: var(--fz-md);
		color: var(--color-text-sub);
		margin-bottom: 0.25rem;
	}

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

	.column-read-meta {
		display: flex;
		flex-direction: column;
		gap: 0.4rem;
		font-size: var(--fz-md);
		color: var(--color-text-sub);
	}

	@media (min-width: 768px) {
		.column-read-meta {
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			font-size: var(--fz-sm);
		}
	}
	/* READ LAYOUT */
	.column-read-section {
		/* background-color: #020617; */
		padding-top: 2.5rem;
	}

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

	@media (max-width: 991.98px) {
		.column-read-layout {
			flex-direction: column;
		}
	}

	.column-left {
		flex: 3;
		min-width: 0;
	}

	.column-right{
		flex: 1;
		min-width: 0;
		position: sticky;
		top: 6rem;
		align-self: flex-start;
		max-height: calc(100vh - 8rem);
	}

	@media (max-width: 991.98px) {
		.column-right {
			position: static;
			max-height: none;
			width:100%;
			display:none;
		}
	}

	/* article */
	.column-article {
		flex: 2;
		border-radius: var(--radius-lg);
		background-color: var(--color-surface);
		border: 1px solid var(--color-border-subtle);
		overflow:hidden;
	}

	.column-article-block + .column-article-block {
		margin-top: 1.3rem;
	}

	.column-article-subtitle {
		font-size: var(--fz-md);
		font-weight: 600;
		margin-bottom: 0.4rem;
		color: var(--color-primary);
	}

	.column-article-subsubtitle {
		font-size: var(--fz-md);
		font-weight: 600;
		margin-bottom: 0.25rem;
		color: var(--color-primary);
	}

	.column-article-text {
		font-size: var(--fz-md);
		color: var(--color-text-sub);
		margin-bottom: 0.75rem;
		line-height: 1.8;
	}

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

	.column-article-list li {
		margin-bottom: 0.35rem;
	}


	/* SIDE */
	.column-side {
		flex: 1.2;
		display: flex;
		flex-direction: column;
		gap: 1rem;
		position:sticky;
		top:6rem;
		align-self:flex-start;
		max-height: calc(100vh - 8rem);
		z-index:1;
	}

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

	.column-side-title {
		font-size: var(--fz-lg);
		font-weight: 600;
		margin-bottom: 0!important;
		color: var(--color-primary);
	}
	.column-reco-card {
		margin-bottom : 2.5rem;
	}

	
	.column-reco-card .column-side-title > .accordion-icon {
		transition: transform 0.3s ease;
		transform: rotate(90deg);
		transform-origin: center;
		padding: 0 1rem;
	}
	.column-reco-card .column-side-title[aria-expanded="true"] > .accordion-icon {
		transform: rotate(270deg) ;
		transform-origin: center;
	}

	.column-author-card,
	.column-meta-card,
	.column-reco-card {
		border-radius: var(--radius-lg);
		background-color: var(--color-surface);
		border: 2px solid var(--color-primary);
		padding: 1.3rem 1.3rem;
		font-size: var(--fz-md);
		color: var(--color-text-sub);
	}

	.column-meta-card .column-side-title {
		margin-bottom: 1rem !important;
	}
	/* 모바일 아코디언 스타일 */
	@media (max-width: 991.98px) {
		.column-reco-card {
			padding: .5rem  0 ;
			overflow: hidden;
			margin-bottom: 1rem;
		}

		.column-reco-card .toc-list,
		.column-reco-card .column-reco-list {
			padding: 0 1.3rem 1.3rem 1.3rem;
		}

		.column-reco-card .toc-list {
			padding: 0;
		}
		.column-reco-card .column-side-title {
			padding: .5rem !important;
		}
	}

	.column-author-name {
		font-weight: 600;
		color: var(--color-primary);
		margin-bottom: 0.25rem;
	}

	.column-author-role {
		margin-bottom: 0.4rem;
	}

	/* meta */
	.column-meta-list {
		list-style: none;
		padding: 0;
		margin: 0 0 0.6rem 0;
	}

	.column-meta-list li {
		display: flex;
		flex-direction: column;
		margin-bottom: 1rem;
	}

	.column-meta-list .label {
		font-size: var(--fz-md);
		color: #9ca3af;
	}

	.column-meta-list .value {
		color: var(--color-text-main);
		font-size: var(--fz-sm);
	}

	/* reco */
	.column-reco-list {
		list-style: disc;
		padding-left: 1.1rem;
		margin-bottom: 0.6rem;
	}

	.column-reco-list li {
		margin-bottom: 0.25rem;
	}

	.column-side-link {
		font-size: var(--fz-md);
		color: var(--color-primary);
	}

	/* footer nav */
	.column-read-footer {
		max-width: 880px;
		margin: 1.8rem auto 0;
		display: flex;
		flex-direction: column;
		gap: 0.8rem;
	}

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

	}

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

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


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

	.column-read-actions {
		text-align: left;
	}

	.toc-list {
		list-style: none;
		padding: 0;
		margin: 0;
		counter-reset: toc-h2;
	}
	.toc-list.show {
		padding-top: 1rem;
	}
	.toc-item {
		padding: 0.3rem 0;
		cursor: pointer;
		transition: color 0.2s;
		color: var(--color-text-sub);
	}
	.toc-item:hover {
		color: var(--color-primary) !important;
	}
	.toc-item.toc-h2 {
		font-weight: 600;
		color: var(--color-text-main);
		font-size: var(--fz-lg);
		counter-increment: toc-h2;
		padding-left: 2rem;
		margin-top: 1rem;
	}
	.toc-item.toc-h2::before {
		content: counter(toc-h2) ". ";
		font-weight: 400;
		color: var(--color-primary);
		display:inline;
	}
	.toc-item.toc-h3{
		padding-left: 3.5rem;
		font-size: var(--fz-lg);
	}
	.toc-item.toc-h3::before {
		content: "-";
		color: var(--color-text-sub);
		display:inline;
	}
	.toc-item.toc-h4 {
		padding-left: 5.5rem;
		font-size: var(--fz-md);
	}
	.toc-item.toc-h4::before {
		content: "-";
		color: var(--color-text-sub);
		display:inline;
	}

	@media (max-width: 768px) {
		.toc-item.toc-h2 {
			padding: 0 1rem;
			margin-bottom: .5rem;
		}
		.toc-item.toc-h3 {
			padding: 0 1.2rem;
			font-size: var(--fz-md);
		}
		.toc-item.toc-h4 {
			padding: 0 1.5rem;
			font-size: var(--fz-md);
		}
		.toc-list.show {
			padding: 0 0 1rem 0;
		}
	}
	.column-reco-card .column-side-title {
		font-size: var(--fz-lg);
		font-weight: 400;
		color: var(--color-primary);
		cursor: pointer;
		user-select: none;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 0 1rem 0;
		border-bottom: 1px solid var(--color-border-subtle);
		transition: all 0.3s ease;
	}
	.column-reco-card .column-side-title.collapsed {
		border-bottom: none;
		padding-bottom:0;
	}


	: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/column.jpeg);
	}

	/* 어두운 오버레이를 이미지 위에 올려 텍스트 가독성 향상 */
	.column-read-hero::after {
		content: "";
		position: absolute;
		inset: 0; /* top:0; right:0; bottom:0; left:0 */
		background: rgba(0, 0, 0, 0.65); /* 어두운 오버레이 */
		z-index: 1;
		pointer-events: none;
	}

	/* 컨텐츠는 오버레이 위에 보이도록 z-index 올림 */
	.column-read-hero .container-xxxl,
	.column-read-hero .column-read-header,
	.column-read-hero .column-breadcrumb {
		position: relative;
		z-index: 2;
	}

	/* 히어로 내부 텍스트(브레드크럼, 제목, 메타) 색상 조정 */
	.column-read-hero .column-breadcrumb,
	.column-read-hero .column-read-topic,
	.column-read-hero .column-read-title,
	.column-read-hero .column-read-meta,
	.column-read-hero .column-read-meta .info {
		color: rgba(255,255,255,0.95);
	}

	.column-read-hero .column-breadcrumb a {
		color: rgba(255,255,255,0.85);
	}
	.column-read-hero .column-breadcrumb a:hover {
		color: #ffffff;
	}

	/* 2. 브레드크럼 (이동 경로) */
	.column-breadcrumb {
		margin-bottom: 1.5rem;
		font-size: var(--fz-md);
		color: var(--text-muted);
	}

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

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

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

	.column-breadcrumb a {
		text-decoration: none;
		color: var(--text-muted);
		transition: color 0.2s;
	}

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

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

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

	/* 카테고리/토픽 */
	.column-read-topic {
		color: var(--theme-primary);
		font-weight: 700;
		font-size: var(--fz-md);
		margin-bottom: 0.8rem;
		letter-spacing: -0.02em;
		text-transform: uppercase;
		display: inline-block;
		position: relative;
	}

	/* 제목 (H1) */
	.column-read-title {
		font-size: var(--fz-xl);
		font-weight: 800;
		color: var(--theme-dark);
		line-height: 1.35;
		margin-bottom: 2rem;
		word-break: keep-all; /* 단어 단위 줄바꿈 */
		letter-spacing: -0.03em;
	}

	/* 4. 메타 정보 (작성자, 날짜 등) */
	.column-read-meta {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 20px;
		padding-top: 1.5rem;
		border-top: 1px solid rgba(255, 255, 255, 0.28); /* 상단 구분선 */
	}
	/* 기타 정보 (날짜, 조회수 등) */
	.column-read-meta .info {
		display: flex;
		align-items: center;
		gap: 15px;
		color: var(--text-muted);
		font-size: var(--fz-md);
		flex-wrap:wrap;
	}

	.column-read-meta .info span {
		display: flex;
		align-items: center;
	}

	/* 칼럼 목록 테이블 스타일 */
	.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);
		overflow:hidden;
	}

	.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;
	}
	.faq-list-row:not(:last-child) .faq-list-cell {
		border-bottom: 1px solid var(--color-border-subtle);
	}
	.faq-list-row:last-child .faq-list-cell {
		border-bottom : 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-md);
		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;
		}
	}

	.column-read-meta .info i {
		font-size: var(--fz-md);
		margin-right: 4px !important; /* HTML 인라인 스타일 덮어쓰기 */
		position: relative;
		top: -1px;
	}
	/* ----------------------------------------------------
       Mobile Responsive (반응형)
    ---------------------------------------------------- */
	@media (max-width: 768px) {
		.column-read-hero {
			padding: 2rem 0 2rem;
		}

		.column-read-title {
			font-size: var(--fz-lg); /* 모바일 size mapped to --fz-lg */
			line-height: 1.4;
		}

		.column-read-meta {
			flex-direction: column;
			align-items: flex-start;
			gap: 15px;
		}

		.column-read-meta .info {
			width: 100%;
			justify-content: flex-start;
			gap: 12px;
			font-size: var(--fz-md);
		}
	}