/* dnbsoft.net 서브 페이지 부품(F2 5단계, 2026-10-08) — layout_bexon.html 이 flats-overrides.css 다음에 싣는다. 색은 bexon 변수(--tj-color-*). */

/* 밝은 바탕의 두 번째 버튼(테두리) */
.tj-primary-btn.dn-btn-ghost {
	background: transparent;
	border: 1px solid var(--tj-color-heading-primary, #12312f);
	color: var(--tj-color-heading-primary, #12312f);
}
.tj-primary-btn.dn-btn-ghost .btn-text,
.tj-primary-btn.dn-btn-ghost .btn-icon {
	color: inherit;
}
.tj-primary-btn.dn-btn-ghost:hover {
	border-color: var(--tj-color-theme-primary);
}

/* 도입 문구 */
.dn-lead-box {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}
.dn-lead-title {
	margin: 12px 0 0;
	word-break: keep-all;
}
.dn-lead-body {
	margin-top: 20px;
	font-size: 18px;
	line-height: 1.8;
	word-break: keep-all;
}
.dn-lead-body p {
	margin-bottom: 0.8em;
}
.dn-lead-btns {
	justify-content: center;
	margin-top: 32px;
}

/* 도입 문구 + 사진(sections/lead_photo.html, 2026-10-12) — 사진을 깐 둥근 띠, 어두운 막 위 흰 글자.
   막은 가운데(글자 자리)를 가장 진하게 해 어떤 사진이 와도 글자가 읽히게 한다. */
.dn-lead-photo-box {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 110px 0;
	border-radius: 16px;
	background-color: var(--tj-color-theme-dark, #0c1e21);
	background-size: cover;
	background-position: center;
}
/* 글자는 왼쪽, 사진의 피사체는 오른쪽(가운데 정렬이면 문구가 사진 속 인물 위에 겹쳤다 — 2026-10-12 라이브 확인).
   막은 왼쪽(글자 자리)을 가장 진하게, 오른쪽으로 갈수록 옅게 — 메인 히어로와 같은 방식. */
.dn-lead-photo-box {
	background-position: right center;
}
/* 배경 영상(lead_photo video, 2026-10-16) — 사진(배경 그림)과 어두운 막(::before, z -1) 사이에 깐다. isolation 덕에 상자 밖으로 내려가지 않는다 */
.dn-lead-photo-box .dn-lead-video {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
	pointer-events: none;
}
.dn-lead-photo-box::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg,
		rgba(12, 30, 33, 0.94) 0%,
		rgba(12, 30, 33, 0.82) 38%,
		rgba(12, 30, 33, 0.35) 68%,
		rgba(12, 30, 33, 0.12) 100%);
}
.dn-lead-photo .dn-lead-box {
	max-width: 640px;
	margin: 0;
	text-align: left;
}
.dn-lead-photo .dn-lead-btns {
	justify-content: flex-start;
}
.dn-lead-photo .dn-lead-title {
	color: var(--tj-color-common-white, #fff);
}
.dn-lead-photo .dn-lead-body,
.dn-lead-photo .dn-lead-body p {
	color: rgba(255, 255, 255, 0.86);
}
.dn-lead-photo .sub-title {
	color: var(--tj-color-common-white, #fff);
}
.dn-lead-photo .tj-primary-btn.dn-btn-ghost {
	border-color: rgba(255, 255, 255, 0.6);
	color: var(--tj-color-common-white, #fff);
}
.dn-lead-photo .tj-primary-btn.dn-btn-ghost:hover {
	border-color: var(--tj-color-theme-primary);
	background: var(--tj-color-theme-primary);
}
@media (max-width: 991px) {
	/* 폭이 좁으면 글자가 사진 전체를 덮으므로 막을 고르게 진하게 */
	.dn-lead-photo-box::before {
		background: rgba(12, 30, 33, 0.78);
	}
}
@media (max-width: 767px) {
	.dn-lead-photo-box {
		padding: 64px 0;
		border-radius: 12px;
	}
	.dn-lead-photo .dn-lead-body {
		font-size: 16px;
	}
}

/* 도입 효과(sections/effect_band.html, 2026-10-12) — 청록 둥근 띠, 왼쪽 제목·오른쪽 효과 카드 세로 줄.
   바로 아래 '관련 사례'(tj-project-section-3)가 어두운 띠라 같은 어두운 색이면 두 덩어리가 붙어 보였다 → 청록으로 구분하고,
   띠 사이는 화면 좌우 여백(15px·폰 12px)만큼 띄운다. */
.dn-effect {
	margin-bottom: 15px;
}
.dn-effect-box {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 100px 0;
	border-radius: 16px;
	background-color: var(--tj-color-theme-primary, #1e8a8a);
}
.dn-effect-box::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(60% 90% at 100% 0%, rgba(255, 255, 255, 0.14), transparent 70%),
		linear-gradient(135deg, transparent 40%, rgba(12, 30, 33, 0.28));
}
.dn-effect-grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 56px;
	align-items: center;
}
.dn-effect .sub-title {
	color: var(--tj-color-common-white, #fff);
}
.dn-effect-title {
	margin: 12px 0 0;
	color: var(--tj-color-common-white, #fff);
	word-break: keep-all;
}
.dn-effect-lead {
	margin: 18px 0 0;
	font-size: 17px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.85);
	word-break: keep-all;
}
.dn-effect-list {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.dn-effect-item {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 22px 26px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.1);
	transition: transform 0.35s ease, border-color 0.35s ease, background-color 0.35s ease;
}
.dn-effect-icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--tj-color-common-white, #fff);
	color: var(--tj-color-theme-primary, #1e8a8a);
	font-size: 26px;
	transition: transform 0.35s ease;
}
.dn-effect-text {
	display: grid;
	gap: 4px;
	min-width: 0;
}
.dn-effect-name {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--tj-color-common-white, #fff);
	word-break: keep-all;
}
.dn-effect-desc {
	font-size: 15px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.85);
	word-break: keep-all;
}
@media (hover: hover) {
	.dn-effect-item:hover {
		transform: translateX(6px);
		border-color: rgba(255, 255, 255, 0.6);
		background: rgba(255, 255, 255, 0.16);
	}
	.dn-effect-item:hover .dn-effect-icon {
		transform: scale(1.08);
	}
}
@media (prefers-reduced-motion: reduce) {
	.dn-effect-item:hover,
	.dn-effect-item:hover .dn-effect-icon {
		transform: none;
	}
}
@media (max-width: 991px) {
	.dn-effect-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
}
@media (max-width: 767px) {
	.dn-effect {
		margin-bottom: 12px;
	}
	.dn-effect-box {
		padding: 64px 0;
		border-radius: 12px;
	}
	.dn-effect-item {
		gap: 16px;
		padding: 18px;
	}
	.dn-effect-icon {
		width: 48px;
		height: 48px;
		font-size: 22px;
	}
	.dn-effect-name {
		font-size: 17px;
	}
}

/* 자가 진단 체크 */
.dn-check-lead {
	margin: -12px 0 32px;
	text-align: center;
	font-size: 18px;
	font-weight: 600;
	color: var(--tj-color-theme-primary);
}
.dn-check-list {
	display: grid;
	gap: 14px;
	max-width: 860px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}
.dn-check-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 20px 24px;
	border: 1px solid var(--tj-color-border-1, #dfe5e5);
	border-radius: 12px;
	background: var(--tj-color-common-white, #fff);
}
.dn-check-item > i {
	flex: none;
	margin-top: 3px;
	font-size: 20px;
	color: var(--tj-color-theme-primary);
}
.dn-check-text {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	word-break: keep-all;
}
.dn-check-problem {
	font-weight: 600;
	color: var(--tj-color-heading-primary, #12312f);
}
.dn-check-result {
	color: var(--tj-color-text-body-3, #67787a);
}
.dn-check-result::before {
	content: "→ ";
}

/* 비교표 — 제목 칸 가운데, 항목 칸 왼쪽, 값 칸 가운데. 폰에서는 표만 옆으로 민다. */
.dn-cmp-scroll {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.dn-cmp-table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	background: var(--tj-color-common-white, #fff);
}
.dn-cmp-table th,
.dn-cmp-table td {
	padding: 14px 16px;
	border-bottom: 1px solid var(--tj-color-border-1, #dfe5e5);
	word-break: keep-all;
}
.dn-cmp-table thead th {
	text-align: center;
	background: var(--tj-color-theme-bg, #f4f6f6);
	color: var(--tj-color-heading-primary, #12312f);
	font-weight: 700;
}
.dn-cmp-table tbody th {
	font-weight: 600;
	color: var(--tj-color-heading-primary, #12312f);
}
.dn-cmp-table .col-l {
	text-align: left;
}
.dn-cmp-table .col-c {
	text-align: center;
}
.dn-cmp-table thead th.is-hl {
	background: var(--tj-color-theme-primary);
	color: var(--tj-color-common-white, #fff);
}
.dn-cmp-table td.is-hl {
	font-weight: 600;
	color: var(--tj-color-theme-primary);
}
.dn-cmp-note {
	margin: 16px 0 0;
	font-size: 14px;
	color: var(--tj-color-text-body-3, #67787a);
}

/* 연혁 */
.dn-tl-list {
	position: relative;
	max-width: 860px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}
.dn-tl-list::before {
	content: "";
	position: absolute;
	top: 8px;
	bottom: 8px;
	left: 96px;
	width: 2px;
	background: var(--tj-color-border-1, #dfe5e5);
}
.dn-tl-item {
	position: relative;
	display: grid;
	grid-template-columns: 80px minmax(0, 1fr);
	gap: 40px;
	padding: 0 0 32px;
}
.dn-tl-item::before {
	content: "";
	position: absolute;
	top: 8px;
	left: 91px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--tj-color-theme-primary);
}
.dn-tl-year {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--tj-color-heading-primary, #12312f);
}
.dn-tl-text {
	line-height: 1.8;
	word-break: keep-all;
}
@media (max-width: 575px) {
	.dn-tl-list::before {
		left: 5px;
	}
	.dn-tl-item {
		grid-template-columns: minmax(0, 1fr);
		gap: 6px;
		padding-left: 28px;
	}
	.dn-tl-item::before {
		left: 0;
	}
}

/* 인증·특허 그리드 */
.dn-certs-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.dn-cert-img {
	display: block;
	padding: 10px;
	border: 1px solid var(--tj-color-border-1, #dfe5e5);
	border-radius: 8px;
	background: var(--tj-color-common-white, #fff);
}
.dn-cert-img img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: contain;
}
.dn-cert-title {
	margin: 10px 0 0;
	text-align: center;
	font-size: 15px;
	word-break: keep-all;
}
@media (max-width: 575px) {
	.dn-certs-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}
}

/* 회사 개요표 — 항목 칸 가운데, 내용 칸 왼쪽 */
.dn-info-table {
	width: 100%;
	max-width: 860px;
	margin: 0 auto;
	border-collapse: collapse;
	border-top: 2px solid var(--tj-color-heading-primary, #12312f);
}
.dn-info-table th,
.dn-info-table td {
	padding: 16px 20px;
	border-bottom: 1px solid var(--tj-color-border-1, #dfe5e5);
	word-break: keep-all;
}
.dn-info-table th {
	width: 160px;
	text-align: center;
	background: var(--tj-color-theme-bg, #f4f6f6);
	color: var(--tj-color-heading-primary, #12312f);
	font-weight: 600;
}
.dn-info-table td {
	text-align: left;
}
@media (max-width: 575px) {
	.dn-info-table th {
		width: 96px;
		padding: 12px 10px;
	}
	.dn-info-table td {
		padding: 12px 14px;
	}
}

/* 포트폴리오 글 보기 — 스크린샷(그림 첨부, board/dn_portfolio/view.html) */
.dn-pf-shots {
	display: grid;
	gap: 24px;
	margin: 32px 0 0;
}
.dn-pf-shots:empty {
	display: none;
}
.dn-pf-shot {
	margin: 0;
	border: 1px solid var(--tj-color-border-1, #dfe5e5);
	border-radius: 8px;
	overflow: hidden;
	background: var(--tj-color-common-white, #fff);
}
.dn-pf-shot img {
	display: block;
	width: 100%;
	height: auto;
}

/* 글쓰기 개인정보 수집·이용 동의 요약(board/dn_inquiry/write.html) — 항목 칸 가운데, 내용 칸 왼쪽 */
.dn-bd-privacy-title {
	margin: 0 0 10px;
}
.dn-bd-privacy-sum {
	width: 100%;
	border-collapse: collapse;
	background: var(--tj-color-common-white, #fff);
}
.dn-bd-privacy-sum th,
.dn-bd-privacy-sum td {
	padding: 8px 12px;
	border: 1px solid var(--tj-color-border-1, #dfe5e5);
	word-break: keep-all;
}
.dn-bd-privacy-sum th {
	width: 110px;
	text-align: center;
	font-weight: 600;
}
.dn-bd-privacy-sum td {
	text-align: left;
}
.dn-bd-privacy-more {
	margin: 8px 0 0;
	font-size: 14px;
}
.dn-bd-privacy-more a {
	text-decoration: underline;
}

/* 슬라이드 점(swiper) 누르는 영역 — 접근성(터치 대상 24px 이상). 보이는 점(12x8, 지금 쓰는 64x8)은 그대로 두고
   안쪽 여백만큼 누르는 영역을 넓힌다(배경은 안쪽 칸에만 칠한다). 점 사이 간격은 margin 5px → 여백 6px 로 거의 같다. */
.swiper-pagination-area .swiper-pagination-bullet {
	box-sizing: content-box;
	padding: 8px 6px;
	margin: 0;
	background-clip: content-box;
}

/* ===== AI 답변 화면(sections/ai_answer.html, 2026-10-13) — 왼쪽 문구 · 오른쪽 AI 대화창 모형 =====
   2026-10-13 사용자 요청으로 어두운 띠 배경을 걷었다 — 페이지 바탕 그대로, 대화창만 어두운 카드(화면 모형으로 보이게).
   움직임: dn-sections.js initAiAnswer 가 .dn-ai-chat 에 .is-anim(시작 상태)을 붙이고, 질문을 다 치면 .dn-ai-step 마다 .is-on 을 차례로 붙인다.
   .is-anim 이 없으면(스크립트 없음·동작 줄이기) 처음부터 다 보인다. */
.dn-ai-box {
	padding: 120px 0;
}
.dn-ai-grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: 64px;
	align-items: center;
}
.dn-ai-title {
	margin: 12px 0 0;
	word-break: keep-all;
}
.dn-ai-body {
	margin-top: 20px;
	font-size: 17px;
	line-height: 1.75;
	word-break: keep-all;
}
.dn-ai-body p {
	margin: 0 0 10px;
}
.dn-ai-body strong,
.dn-ai-body b {
	color: var(--tj-color-heading-primary, #0c1e21);
}
.dn-ai-btns {
	justify-content: flex-start;
	margin-top: 32px;
}

/* 대화창 — 밝은 바탕 위의 어두운 카드 */
.dn-ai-chat {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: 18px;
	background-color: var(--tj-color-theme-dark, #0c1e21);
	box-shadow: 0 30px 60px rgba(12, 30, 33, 0.22);
}
.dn-ai-chat::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(70% 60% at 90% 0%, rgba(30, 138, 138, 0.4), transparent 70%);
}
.dn-ai-bar {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 14px 20px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.dn-ai-bar span {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.25);
}
.dn-ai-bar em {
	margin-left: 10px;
	font-size: 13px;
	font-style: normal;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.6);
}
.dn-ai-msgs {
	display: grid;
	gap: 22px;
	padding: 26px 26px 30px;
}
.dn-ai-q {
	justify-self: end;
	max-width: 85%;
	margin: 0;
	padding: 12px 18px;
	border-radius: 16px 16px 4px 16px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--tj-color-common-white, #fff);
	background: var(--tj-color-theme-primary, #1e8a8a);
	word-break: keep-all;
}
.dn-ai-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.dn-ai-chat.is-typing .dn-ai-type::after {
	content: "";
	display: inline-block;
	width: 2px;
	height: 1.05em;
	margin-left: 2px;
	vertical-align: -2px;
	background: currentColor;
	animation: dn-ai-caret 0.8s steps(1) infinite;
}
@keyframes dn-ai-caret {
	50% { opacity: 0; }
}
.dn-ai-a {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}
.dn-ai-mark {
	flex: none;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	font-size: 18px;
	color: var(--tj-color-theme-dark, #0c1e21);
	background: var(--tj-color-common-white, #fff);
}
.dn-ai-a-body {
	display: grid;
	gap: 12px;
	min-width: 0;
	flex: 1;
}
.dn-ai-a-text {
	margin: 6px 0 0;
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.88);
	word-break: keep-all;
}
.dn-ai-srcs {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: dn-ai-src;
}
.dn-ai-src {
	counter-increment: dn-ai-src;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.05);
}
.dn-ai-num {
	flex: none;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 700;
	color: var(--tj-color-common-white, #fff);
	background: rgba(30, 138, 138, 0.9);
}
.dn-ai-num::before {
	content: counter(dn-ai-src);
}
.dn-ai-src-text {
	display: grid;
	gap: 2px;
	min-width: 0;
	flex: 1;
}
.dn-ai-src-text strong {
	font-size: 15px;
	color: var(--tj-color-common-white, #fff);
}
.dn-ai-src-text span {
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.65);
	word-break: keep-all;
}
.dn-ai-cite {
	flex: none;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 12px;
	color: #9fe0dc;
	background: rgba(30, 138, 138, 0.25);
}
.dn-ai-cite::after {
	content: " " counter(dn-ai-src);
}
.dn-ai-miss {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 4px 0 0;
	padding: 14px 16px;
	border: 1.5px dashed rgba(255, 255, 255, 0.35);
	border-radius: 12px;
	font-size: 15px;
	font-weight: 600;
	color: var(--tj-color-common-white, #fff);
	word-break: keep-all;
}
.dn-ai-miss i {
	flex: none;
	font-size: 20px;
	color: #9fe0dc;
}
/* 생각 중 점 세 개 — 움직일 때만 보인다(질문을 다 친 뒤 잠깐) */
.dn-ai-dots {
	display: none;
	gap: 5px;
	padding: 10px 0 4px;
}
.dn-ai-dots i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.7);
	animation: dn-ai-dot 1s infinite ease-in-out;
}
.dn-ai-dots i:nth-child(2) { animation-delay: 0.15s; }
.dn-ai-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dn-ai-dot {
	0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
	40% { opacity: 1; transform: translateY(-3px); }
}
.dn-ai-chat.is-thinking .dn-ai-dots {
	display: inline-flex;
}
/* 움직이는 동안의 시작 상태 */
.dn-ai-chat.is-anim .dn-ai-step:not(.dn-ai-dots) {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.45s ease, transform 0.45s ease;
}
.dn-ai-chat.is-anim .dn-ai-step.is-on {
	opacity: 1;
	transform: none;
}
.dn-ai-chat.is-anim .dn-ai-miss.is-on {
	animation: dn-ai-miss 1.6s ease 0.4s 2;
}
@keyframes dn-ai-miss {
	50% { border-color: #9fe0dc; background: rgba(159, 224, 220, 0.08); }
}
@media (max-width: 991px) {
	.dn-ai-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}
}
@media (max-width: 767px) {
	.dn-ai-box {
		padding: 80px 0;
	}
	.dn-ai-msgs {
		padding: 20px 16px 22px;
	}
	.dn-ai-q {
		max-width: 92%;
		padding: 10px 14px;
		font-size: 15px;
	}
	.dn-ai-a {
		gap: 10px;
	}
	.dn-ai-mark {
		width: 30px;
		height: 30px;
		font-size: 15px;
	}
	.dn-ai-cite {
		display: none;
	}
}

/* ===== 준비물 카드(sections/prep_cards.html, 2026-10-13) — STEP 번호 · 단계 이름 · 준비물 체크 목록 =====
   번호는 CSS 카운터, 준비물은 'paras' 서식의 <ul>. 등장은 dn-sections.js(.dn-rv), 호버는 아래. */
.dn-prep-lead {
	margin: 14px auto 0;
	max-width: 640px;
	font-size: 17px;
	line-height: 1.7;
	word-break: keep-all;
}
.dn-prep-grid {
	counter-reset: dn-prep;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.dn-prep-card {
	counter-increment: dn-prep;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: 30px 26px 28px;
	border: 1px solid var(--tj-color-border-1, #e1e1e1);
	border-radius: 14px;
	background: var(--tj-color-common-white, #fff);
	transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
/* 카드 위 청록 선 — 단계가 이어지는 느낌 */
.dn-prep-card::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	height: 4px;
	background: var(--tj-color-theme-primary, #1e8a8a);
	opacity: 0.25;
	transition: opacity 0.35s ease;
}
.dn-prep-head {
	display: grid;
	gap: 10px;
	padding-bottom: 18px;
	margin-bottom: 18px;
	border-bottom: 1px dashed var(--tj-color-border-1, #e1e1e1);
}
.dn-prep-num {
	justify-self: start;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--tj-color-theme-primary, #1e8a8a);
	background: rgba(30, 138, 138, 0.1);
}
.dn-prep-num::before {
	content: "STEP " counter(dn-prep, decimal-leading-zero);
}
.dn-prep-title {
	margin: 0;
	font-size: 21px;
	word-break: keep-all;
}
.dn-prep-items ul {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.dn-prep-items li {
	position: relative;
	padding-left: 30px;
	font-size: 15px;
	line-height: 1.6;
	word-break: keep-all;
}
/* 체크 표시 — 청록 원 안 흰 체크(그림 파일 없이) */
.dn-prep-items li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--tj-color-theme-primary, #1e8a8a);
}
.dn-prep-items li::after {
	content: "";
	position: absolute;
	left: 7px;
	top: 6px;
	width: 6px;
	height: 10px;
	border: solid var(--tj-color-common-white, #fff);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.dn-prep-items p {
	margin: 0 0 8px;
	font-size: 15px;
	line-height: 1.6;
}
@media (hover: hover) {
	.dn-prep-card:hover {
		transform: translateY(-6px);
		border-color: rgba(30, 138, 138, 0.45);
		box-shadow: 0 18px 36px rgba(12, 30, 33, 0.08);
	}
	.dn-prep-card:hover::before {
		opacity: 1;
	}
}
@media (prefers-reduced-motion: reduce) {
	.dn-prep-card:hover {
		transform: none;
	}
}
@media (max-width: 767px) {
	.dn-prep-card {
		padding: 24px 20px 22px;
	}
}

/* ===== 이관 흐름(sections/handover.html, 2026-10-13) — 인계 띠 · 단계 카드 · 이런 경우도 맡습니다 칩 ===== */
.dn-ho-lead {
	margin: 14px auto 0;
	max-width: 680px;
	font-size: 17px;
	line-height: 1.7;
	word-break: keep-all;
}
/* ① 인계 띠 */
.dn-ho-flow {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr) minmax(0, 1fr);
	align-items: center;
	gap: 20px;
	margin-bottom: 48px;
	padding: 28px;
	border: 1px solid var(--tj-color-border-1, #e1e1e1);
	border-radius: 18px;
	background: var(--tj-color-common-white, #fff);
}
.dn-ho-end {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	border-radius: 14px;
	background: var(--tj-color-grey-1, #ecf0f0);
}
.dn-ho-end.is-to {
	background: var(--tj-color-theme-dark, #0c1e21);
}
.dn-ho-end-ic {
	flex: none;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	font-size: 24px;
	color: var(--tj-color-theme-primary, #1e8a8a);
	background: var(--tj-color-common-white, #fff);
}
.dn-ho-end.is-to .dn-ho-end-ic {
	color: var(--tj-color-common-white, #fff);
	background: var(--tj-color-theme-primary, #1e8a8a);
}
.dn-ho-end-text {
	display: grid;
	gap: 2px;
	min-width: 0;
}
.dn-ho-end-text em {
	font-size: 12px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--tj-color-text-body-2, #6b7273);
}
.dn-ho-end-text strong {
	font-size: 18px;
	color: var(--tj-color-heading-primary, #0c1e21);
	word-break: keep-all;
}
.dn-ho-end.is-to .dn-ho-end-text em {
	color: #9fe0dc;
}
.dn-ho-end.is-to .dn-ho-end-text strong {
	color: var(--tj-color-common-white, #fff);
}
.dn-ho-mid {
	display: grid;
	gap: 14px;
	min-width: 0;
}
.dn-ho-assets {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.dn-ho-assets li {
	padding: 6px 14px;
	border: 1px solid rgba(30, 138, 138, 0.3);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	color: var(--tj-color-theme-primary, #1e8a8a);
	background: rgba(30, 138, 138, 0.06);
	white-space: nowrap;
}
/* 점선 화살표 — 점이 왼쪽에서 오른쪽으로 흘러간다 */
.dn-ho-track {
	position: relative;
	display: block;
	height: 2px;
	margin: 0 6px;
	background: repeating-linear-gradient(90deg, rgba(30, 138, 138, 0.45) 0 8px, transparent 8px 14px);
}
.dn-ho-track::after {
	content: "";
	position: absolute;
	right: -6px;
	top: -5px;
	width: 0;
	height: 0;
	border-left: 9px solid var(--tj-color-theme-primary, #1e8a8a);
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
}
.dn-ho-track i {
	position: absolute;
	top: -4px;
	left: 0;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--tj-color-theme-primary, #1e8a8a);
	box-shadow: 0 0 0 4px rgba(30, 138, 138, 0.18);
	animation: dn-ho-flow 2.8s ease-in-out infinite;
}
@keyframes dn-ho-flow {
	0% { left: 0; opacity: 0; }
	10% { opacity: 1; }
	90% { opacity: 1; }
	100% { left: calc(100% - 10px); opacity: 0; }
}
@keyframes dn-ho-flow-v {
	0% { top: 0; opacity: 0; }
	10% { opacity: 1; }
	90% { opacity: 1; }
	100% { top: calc(100% - 10px); opacity: 0; }
}
/* ② 단계 카드 */
.dn-ho-steps {
	counter-reset: dn-ho;
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.dn-ho-step {
	counter-increment: dn-ho;
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 28px 24px 24px;
	border: 1px solid var(--tj-color-border-1, #e1e1e1);
	border-radius: 14px;
	background: var(--tj-color-common-white, #fff);
	transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.dn-ho-num {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: 18px;
	border-radius: 50%;
	font-size: 16px;
	font-weight: 700;
	color: var(--tj-color-common-white, #fff);
	background: var(--tj-color-theme-primary, #1e8a8a);
	box-shadow: 0 0 0 6px rgba(30, 138, 138, 0.12);
}
.dn-ho-num::before {
	content: counter(dn-ho, decimal-leading-zero);
}
.dn-ho-title {
	margin: 0 0 8px;
	font-size: 20px;
	word-break: keep-all;
}
.dn-ho-desc {
	margin: 0;
	font-size: 15px;
	line-height: 1.7;
	word-break: keep-all;
}
.dn-ho-out {
	margin: auto 0 0;
	padding-top: 16px;
	border-top: 1px dashed var(--tj-color-border-1, #e1e1e1);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--tj-color-heading-primary, #0c1e21);
	word-break: keep-all;
}
.dn-ho-desc:has(+ .dn-ho-out) {
	margin-bottom: 18px;
}
.dn-ho-out span {
	display: block;
	margin-bottom: 2px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--tj-color-theme-primary, #1e8a8a);
}
/* 넓은 화면: 카드 사이 꺾쇠 화살표 */
@media (min-width: 992px) {
	.dn-ho-step:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 44px;
		right: -15px;
		z-index: 1;
		width: 10px;
		height: 10px;
		border-top: 2px solid rgba(30, 138, 138, 0.55);
		border-right: 2px solid rgba(30, 138, 138, 0.55);
		transform: rotate(45deg);
	}
}
@media (hover: hover) {
	.dn-ho-step:hover {
		transform: translateY(-6px);
		border-color: rgba(30, 138, 138, 0.45);
		box-shadow: 0 18px 36px rgba(12, 30, 33, 0.08);
	}
}
/* ③ 이런 경우도 맡습니다 */
.dn-ho-cases {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 14px;
	margin-top: 36px;
}
.dn-ho-cases-title {
	font-size: 15px;
	color: var(--tj-color-heading-primary, #0c1e21);
}
.dn-ho-cases ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.dn-ho-cases li {
	position: relative;
	padding: 7px 14px 7px 34px;
	border: 1px solid var(--tj-color-border-1, #e1e1e1);
	border-radius: 999px;
	font-size: 14px;
	color: var(--tj-color-heading-primary, #0c1e21);
	background: var(--tj-color-common-white, #fff);
	word-break: keep-all;
}
.dn-ho-cases li::before {
	content: "";
	position: absolute;
	left: 12px;
	top: 50%;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	border-radius: 50%;
	background: var(--tj-color-theme-primary, #1e8a8a);
}
.dn-ho-cases li::after {
	content: "";
	position: absolute;
	left: 17px;
	top: 50%;
	width: 4px;
	height: 7px;
	margin-top: -5px;
	border: solid var(--tj-color-common-white, #fff);
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(45deg);
}
@media (max-width: 991px) {
	.dn-ho-flow {
		grid-template-columns: minmax(0, 1fr);
		padding: 20px;
	}
	/* 세로로 쌓이면 점선 화살표를 아래 방향으로 */
	.dn-ho-track {
		width: 2px;
		height: 36px;
		margin: 0 auto;
		background: repeating-linear-gradient(180deg, rgba(30, 138, 138, 0.45) 0 8px, transparent 8px 14px);
	}
	.dn-ho-track::after {
		right: auto;
		left: -5px;
		top: auto;
		bottom: -6px;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-top: 9px solid var(--tj-color-theme-primary, #1e8a8a);
		border-bottom: 0;
	}
	.dn-ho-track i {
		left: -4px;
		animation-name: dn-ho-flow-v;
	}
}
@media (prefers-reduced-motion: reduce) {
	.dn-ho-track i {
		animation: none;
		opacity: 0;
	}
	.dn-ho-step:hover {
		transform: none;
	}
}

/* ===== 요청서 예시(sections/request_sample.html, 2026-10-13) — 왼쪽 안내 · 오른쪽 예시 카드 ===== */
.dn-rs-grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 64px;
	align-items: center;
}
.dn-rs-title {
	margin: 12px 0 0;
	word-break: keep-all;
}
.dn-rs-lead {
	margin: 18px 0 0;
	font-size: 17px;
	line-height: 1.7;
	word-break: keep-all;
}
.dn-rs-btn {
	margin-top: 30px;
}
.dn-rs-card {
	overflow: hidden;
	border: 1px solid var(--tj-color-border-1, #e1e1e1);
	border-radius: 18px;
	background: var(--tj-color-common-white, #fff);
	box-shadow: 0 24px 50px rgba(12, 30, 33, 0.08);
}
.dn-rs-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 24px;
	border-bottom: 1px solid var(--tj-color-border-1, #e1e1e1);
	background: var(--tj-color-grey-1, #ecf0f0);
}
.dn-rs-bar-ic {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	font-size: 18px;
	color: var(--tj-color-common-white, #fff);
	background: var(--tj-color-theme-primary, #1e8a8a);
}
.dn-rs-bar strong {
	font-size: 17px;
	color: var(--tj-color-heading-primary, #0c1e21);
}
.dn-rs-bar em {
	margin-left: auto;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-style: normal;
	font-weight: 700;
	color: var(--tj-color-theme-primary, #1e8a8a);
	background: rgba(30, 138, 138, 0.12);
}
.dn-rs-rows {
	counter-reset: dn-rs;
	margin: 0;
	padding: 8px 24px;
	list-style: none;
}
.dn-rs-row {
	counter-increment: dn-rs;
	display: grid;
	grid-template-columns: 28px minmax(110px, 0.9fr) minmax(0, 2fr);
	align-items: center;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px dashed var(--tj-color-border-1, #e1e1e1);
}
.dn-rs-row:last-child {
	border-bottom: 0;
}
.dn-rs-num {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	font-size: 13px;
	font-weight: 700;
	color: var(--tj-color-theme-primary, #1e8a8a);
	background: rgba(30, 138, 138, 0.12);
}
.dn-rs-num::before {
	content: counter(dn-rs);
}
.dn-rs-label {
	font-size: 15px;
	font-weight: 700;
	color: var(--tj-color-heading-primary, #0c1e21);
	word-break: keep-all;
}
/* 예시 값 — 실제로 칸에 적힌 글처럼 옅은 입력칸 모양 */
.dn-rs-value {
	min-width: 0;
	padding: 8px 12px;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--tj-color-text-body, #4a5455);
	background: var(--tj-color-grey-1, #ecf0f0);
	overflow-wrap: anywhere;
	word-break: keep-all;
}
.dn-rs-note {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 14px 24px;
	border-top: 1px solid var(--tj-color-border-1, #e1e1e1);
	font-size: 13px;
	color: var(--tj-color-text-body-2, #6b7273);
	word-break: keep-all;
}
.dn-rs-note i {
	flex: none;
	font-size: 16px;
	color: var(--tj-color-theme-primary, #1e8a8a);
}
@media (max-width: 991px) {
	.dn-rs-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
	}
}
@media (max-width: 575px) {
	.dn-rs-rows {
		padding: 4px 16px;
	}
	.dn-rs-row {
		grid-template-columns: 28px minmax(0, 1fr);
		row-gap: 8px;
	}
	.dn-rs-value {
		grid-column: 2;
	}
	.dn-rs-bar,
	.dn-rs-note {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* ===== 포트폴리오 글 보기 개편(board/dn_portfolio/view.html, 2026-10-13 — 시안 Downloads/portfolio-view-mockup.html 사용자 확인) =====
   ① .dn-pfv-hero 첫 화면(요약 + 브라우저 틀 대표 화면) ② .dn-pfv-main 본문 8칸 + 따라오는 요약 카드 4칸 ③ .dn-pf-shots 첫 장 크게·나머지 썸네일
   ④ .dn-pfv-nav 이전·다음 카드, .dn-pf-ask 어두운 문의 띠. 세로로 긴 캡처 판정·'전체 펼치기'·대표 화면 대체는 dn-board.js initPfView. */
.dn-pfv-hero {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: 56px;
	align-items: center;
	margin-bottom: 72px;
}
.dn-pfv-chip {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	color: var(--tj-color-theme-primary, #1e8a8a);
	background: rgba(30, 138, 138, 0.1);
}
.dn-pfv-title {
	margin: 14px 0 24px;
	font-size: 46px;
	line-height: 1.25;
	word-break: keep-all;
}
.dn-pfv-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
}
.dn-pfv-facts li {
	padding: 12px 16px;
	border: 1px solid var(--tj-color-border-1, #e1e1e1);
	border-radius: 12px;
	background: var(--tj-color-common-white, #fff);
}
.dn-pfv-facts em {
	display: block;
	font-size: 12px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--tj-color-theme-primary, #1e8a8a);
}
.dn-pfv-facts strong {
	font-size: 15px;
	color: var(--tj-color-heading-primary, #0c1e21);
	word-break: keep-all;
}
.dn-pfv-btns {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
.dn-pfv-list {
	display: inline-flex;
	align-items: center;
	height: 56px;
	padding: 0 26px;
	border: 1px solid var(--tj-color-heading-primary, #0c1e21);
	border-radius: 999px;
	font-weight: 600;
	color: var(--tj-color-heading-primary, #0c1e21);
	transition: background-color 0.3s ease, color 0.3s ease;
}
.dn-pfv-list:hover {
	color: var(--tj-color-common-white, #fff);
	background: var(--tj-color-heading-primary, #0c1e21);
}
/* 브라우저 틀 */
.dn-pfv-browser,
.dn-pf-shot:first-child {
	overflow: hidden;
	border: 1px solid var(--tj-color-border-1, #e1e1e1);
	border-radius: 16px;
	background: var(--tj-color-common-white, #fff);
}
.dn-pfv-browser {
	box-shadow: 0 30px 60px rgba(12, 30, 33, 0.16);
}
.dn-pfv-bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--tj-color-border-1, #e1e1e1);
	background: #f4f6f6;
}
.dn-pfv-bar i {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #d3dada;
}
.dn-pfv-bar span {
	flex: 1;
	min-width: 0;
	margin-left: 10px;
	padding: 0 10px;
	border: 1px solid var(--tj-color-border-1, #e1e1e1);
	border-radius: 6px;
	font-size: 12px;
	line-height: 22px;
	color: var(--tj-color-text-body-2, #6b7273);
	background: var(--tj-color-common-white, #fff);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.dn-pfv-frame {
	overflow: hidden;
	background: var(--tj-color-grey-1, #ecf0f0);
}
.dn-pfv-frame img {
	display: block;
	width: 100%;
	height: auto;
}
/* 세로로 긴 대표 화면(dn-board.js 가 .is-tall) — 틀 높이를 줄이고 올리면 끝까지 흐른다 */
.dn-pfv-browser.is-tall .dn-pfv-frame {
	height: 460px;
}
.dn-pfv-browser.is-tall .dn-pfv-frame img {
	transition: transform 6s ease;
}
@media (hover: hover) {
	.dn-pfv-browser.is-tall:hover .dn-pfv-frame img {
		transform: translateY(calc(-100% + 460px));
	}
}
.dn-pfv-cover.is-empty {
	display: none;
}
.dn-pfv-hero.no-cover {
	grid-template-columns: minmax(0, 1fr);
}

/* ② 본문 + 요약 카드 — 2026-10-13 사용자 요청(2차): 본문이 폭을 가득 쓰고, 요약 카드는 본문 바깥 오른쪽 여백에 떠서 스크롤을 따라온다.
   · 1760px~: 양쪽에 카드 자리(카드 340 + 간격 28 + 가장자리 12 = 380px)를 남기도록 폭 = min(1320px, 화면 - 760px).
     (2026-10-13 3·4차: 카드를 크게 — 260 → 300 → 340px, 글자·여백도 키움. 사용자 요청)
     카드 덩어리(.dn-pfv-side)는 본문 오른쪽 바깥에 absolute(본문 높이만큼), 안쪽(.dn-pfv-side-in)이 sticky 로 따라온다.
   · 992~1759px: 바깥 여백이 모자라 요약을 본문 위 한 줄로. 어두운 대표번호 카드는 숨김(아래 문의 띠·첫 화면에 같은 안내).
   · ~991px: 요약 카드 숨김(2026-10-14 — 첫 화면·아래 문의 띠와 겹친다).
   글 보기만 게시판 공통 폭(1080px, flats-overrides.css .dn-bd-page .container)을 넓힌다. */
.dn-bd-page.dn-pf-view .container {
	max-width: 1320px;
}
.dn-pfv-main {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
}
.dn-pfv-box {
	padding: 44px;
	border: 1px solid var(--tj-color-border-1, #e1e1e1);
	border-radius: 18px;
	background: var(--tj-color-common-white, #fff);
}
.dn-pfv-label {
	margin: 0 0 16px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--tj-color-theme-primary, #1e8a8a);
}
.dn-bd-view-body.dn-pfv-body {
	padding: 0;
	counter-reset: dn-pfv;
}
.dn-pfv-body p {
	margin: 0 0 10px;
}
/* 에디터 소제목(h3) — 01~ 번호(개요 → 과제 → 솔루션·구성도 → 사용 기술 → 성과) */
.dn-pfv-body h3 {
	counter-increment: dn-pfv;
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 40px 0 14px;
	padding-top: 28px;
	border-top: 1px dashed var(--tj-color-border-1, #e1e1e1);
	font-size: 22px;
}
.dn-pfv-body h3:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}
.dn-pfv-body h3::before {
	content: counter(dn-pfv, decimal-leading-zero);
	flex: none;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	font-size: 15px;
	color: var(--tj-color-common-white, #fff);
	background: var(--tj-color-theme-primary, #1e8a8a);
	box-shadow: 0 0 0 6px rgba(30, 138, 138, 0.12);
}
.dn-pfv-body img {
	border-radius: 12px;
}
.dn-pfv-shots-wrap {
	margin-top: 44px;
}
.dn-pfv-shots-wrap.is-empty {
	display: none;
}
/* ③ 화면 캡처 — 첫 장 크게, 나머지 썸네일 3열 */
.dn-pfv .dn-pf-shots {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
}
.dn-pfv .dn-pf-shot {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: 12px;
	cursor: zoom-in;
}
.dn-pfv .dn-pf-shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
	transition: transform 0.5s ease;
}
@media (hover: hover) {
	.dn-pfv .dn-pf-shot:not(:first-child):hover img {
		transform: scale(1.06);
	}
}
.dn-pfv .dn-pf-shot:first-child {
	grid-column: 1 / -1;
	aspect-ratio: auto;
}
.dn-pfv .dn-pf-shot:first-child img {
	height: auto;
}
.dn-pfv .dn-pf-shot.is-tall:not(.is-open) {
	max-height: 640px;
}
.dn-pfv-more {
	grid-column: 1 / -1;
	display: flex;
	justify-content: center;
	margin-top: -64px;
	padding-top: 56px;
	position: relative;
	background: linear-gradient(rgba(255, 255, 255, 0), var(--tj-color-common-white, #fff) 70%);
}
.dn-pfv-more.is-open {
	margin-top: 0;
	padding-top: 0;
	background: none;
}
.dn-pfv-more button {
	padding: 10px 22px;
	border: 1px solid var(--tj-color-border-1, #e1e1e1);
	border-radius: 999px;
	font-weight: 700;
	color: var(--tj-color-heading-primary, #0c1e21);
	background: var(--tj-color-common-white, #fff);
}
/* 요약 카드 — 넓은 화면은 본문 바깥 여백에 따라오고, 중간 폭은 본문 위 한 줄(위 ② 주석) */
.dn-pfv-side,
.dn-pfv-side-in {
	display: grid;
	gap: 16px;
	align-content: start;
}
@media (min-width: 1760px) {
	.dn-bd-page.dn-pf-view .container {
		max-width: min(1320px, calc(100vw - 760px));
	}
	.dn-pfv-side {
		position: absolute;
		top: 0;
		bottom: 0;
		left: calc(100% + 28px);
		width: 340px;
	}
	.dn-pfv-side-in {
		position: sticky;
		top: 110px;
	}
	.dn-pfv-side .dn-pfv-card {
		padding: 34px 32px;
	}
	.dn-pfv-side .dn-pfv-card h3 {
		margin-bottom: 22px;
		font-size: 23px;
	}
	.dn-pfv-side .dn-pfv-card dl {
		gap: 14px 20px;
		margin-bottom: 28px;
		font-size: 16px;
	}
	.dn-pfv-side .dn-pfv-card.is-dark p {
		font-size: 15px;
	}
}
@media (min-width: 992px) and (max-width: 1759px) {
	.dn-pfv-side {
		order: -1;
	}
	.dn-pfv-side .dn-pfv-card.is-dark {
		display: none;
	}
	.dn-pfv-side .dn-pfv-card {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 16px 40px;
		padding: 34px 32px 34px 44px;
	}
	.dn-pfv-side .dn-pfv-card h3 {
		margin: 0;
		font-size: 23px;
	}
	.dn-pfv-side .dn-pfv-card dl {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 6px 14px;
		margin: 0;
		font-size: 18px;
	}
	.dn-pfv-side .dn-pfv-card dd {
		margin-right: 26px;
	}
	.dn-pfv-side .dn-pfv-card .tj-primary-btn {
		width: auto;
		margin-left: auto;
	}
	.dn-pfv-side .dn-pfv-card .dn-pfv-site.is-block {
		width: auto;
		margin-top: 0;
	}
}
.dn-pfv-card {
	padding: 26px;
	border: 1px solid var(--tj-color-border-1, #e1e1e1);
	border-radius: 18px;
	background: var(--tj-color-common-white, #fff);
}
.dn-pfv-card h3 {
	margin: 0 0 14px;
	font-size: 18px;
}
.dn-pfv-card dl {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 10px 16px;
	margin: 0 0 20px;
	font-size: 14px;
}
.dn-pfv-card dt {
	font-weight: 400;
	color: var(--tj-color-text-body-2, #6b7273);
}
.dn-pfv-card dd {
	margin: 0;
	font-weight: 600;
	color: var(--tj-color-heading-primary, #0c1e21);
	word-break: keep-all;
}
.dn-pfv-card .tj-primary-btn {
	width: 100%;
	justify-content: center;
}
.dn-pfv-card.is-dark {
	border: 0;
	color: rgba(255, 255, 255, 0.75);
	background: var(--tj-color-theme-dark, #0c1e21);
}
.dn-pfv-card.is-dark h3 {
	color: var(--tj-color-common-white, #fff);
}
.dn-pfv-card.is-dark p {
	margin: 0;
	font-size: 14px;
	color: inherit;
}
/* ④ 이전 · 목록 · 다음 카드 — 목록은 가운데 좁은 칸(2026-10-13 사용자 요청) */
.dn-pfv-nav {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	gap: 16px;
	margin: 24px 0;
	padding: 0;
	list-style: none;
}
.dn-pfv-nav .is-prev {
	grid-column: 1;
}
.dn-pfv-nav .is-list {
	grid-column: 2;
	text-align: center;
}
.dn-pfv-nav .is-list a {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 140px;
}
.dn-pfv-nav .is-next {
	grid-column: 3;
	text-align: right;
}
.dn-pfv-nav a {
	display: block;
	height: 100%;
	padding: 20px 24px;
	border: 1px solid var(--tj-color-border-1, #e1e1e1);
	border-radius: 14px;
	font-weight: 700;
	color: var(--tj-color-heading-primary, #0c1e21);
	background: var(--tj-color-common-white, #fff);
	word-break: keep-all;
	transition: border-color 0.3s ease, transform 0.3s ease;
}
.dn-pfv-nav a:hover {
	border-color: var(--tj-color-theme-primary, #1e8a8a);
	transform: translateY(-3px);
}
.dn-pfv-nav em {
	display: block;
	font-size: 12px;
	font-style: normal;
	color: var(--tj-color-theme-primary, #1e8a8a);
}
.dn-pfv .dn-bd-view-btns {
	border-top: 0;
	padding-top: 0;
}
/* 어두운 문의 띠 */
.dn-pfv .dn-pf-ask {
	margin: 56px 0 0;
	padding: 48px 56px;
	background: var(--tj-color-theme-dark, #0c1e21);
}
.dn-pfv .dn-pf-ask p {
	font-size: 26px;
	color: var(--tj-color-common-white, #fff);
	word-break: keep-all;
}
@media (prefers-reduced-motion: reduce) {
	.dn-pfv-browser.is-tall .dn-pfv-frame img,
	.dn-pfv .dn-pf-shot img,
	.dn-pfv-nav a {
		transition: none;
	}
}
@media (max-width: 991px) {
	.dn-pfv-hero,
	.dn-pfv-main {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
	.dn-pfv-hero {
		margin-bottom: 40px;
	}
	.dn-pfv-title {
		font-size: 32px;
	}
	/* 요약 카드 숨김(2026-10-14 사용자 요청) — 발주처·분류·사이트 바로가기는 첫 화면에, 문의 버튼은 아래 문의 띠(.dn-pf-ask)에 같은 것이 있다 */
	.dn-pfv-side {
		display: none;
	}
	.dn-pfv-box {
		padding: 28px 20px;
	}
	.dn-pfv .dn-pf-shots {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.dn-pfv .dn-pf-ask {
		padding: 32px 24px;
	}
	.dn-pfv .dn-pf-ask p {
		font-size: 20px;
	}
}
@media (max-width: 575px) {
	.dn-pfv-facts {
		grid-template-columns: minmax(0, 1fr);
	}
	.dn-pfv-nav {
		grid-template-columns: minmax(0, 1fr);
	}
	.dn-pfv-nav .is-prev,
	.dn-pfv-nav .is-list,
	.dn-pfv-nav .is-next {
		grid-column: auto;
	}
	/* 폰: 이전 · 다음 다음에 목록 */
	.dn-pfv-nav .is-list {
		order: 3;
	}
}

/* 포트폴리오 글쓰기 안내 줄(board/dn_portfolio/write.html .dn-bd-hint, 2026-10-13) — 칸 아래 작은 회색 글씨 */
.dn-bd-hint {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--tj-color-text-body-2, #6b7273);
	word-break: keep-all;
}
/* 사이트 바로가기(링크 1, 2026-10-13) — 첫 화면 버튼 줄과 요약 카드 */
.dn-pfv-site {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 56px;
	padding: 0 24px;
	border: 1px solid var(--tj-color-theme-primary, #1e8a8a);
	border-radius: 999px;
	font-weight: 600;
	color: var(--tj-color-theme-primary, #1e8a8a);
	background: rgba(30, 138, 138, 0.06);
	transition: background-color 0.3s ease, color 0.3s ease;
}
.dn-pfv-site:hover {
	color: var(--tj-color-common-white, #fff);
	background: var(--tj-color-theme-primary, #1e8a8a);
}
.dn-pfv-site.is-block {
	display: flex;
	justify-content: center;
	width: 100%;
	height: 50px;
	margin-top: 10px;
}
/* 모바일 캡처(dn-board.js 가 .is-phone) — 폰 틀 안에 통째로.
   썸네일 칸은 aspect-ratio 로만 높이가 정해져 그림의 height:100% 가 풀리지 않는다 → 칸 안에 절대 위치로 위아래 14px 띄워 맞춘다. */
.dn-pfv .dn-pf-shot.is-phone {
	background:
		radial-gradient(80% 80% at 50% 0%, rgba(30, 138, 138, 0.12), transparent 70%),
		var(--tj-color-grey-1, #ecf0f0);
}
.dn-pfv .dn-pf-shot.is-phone img {
	position: absolute;
	top: 14px;
	left: 50%;
	width: auto;
	max-width: calc(100% - 28px);
	height: calc(100% - 28px);
	object-fit: contain;
	border: 5px solid var(--tj-color-theme-dark, #0c1e21);
	border-radius: 16px;
	box-shadow: 0 12px 24px rgba(12, 30, 33, 0.18);
	transform: translateX(-50%);
}
@media (hover: hover) {
	.dn-pfv .dn-pf-shot.is-phone:not(:first-child):hover img {
		transform: translate(-50%, -4px);
	}
}
/* 첫 장이 폰 캡처면 크게 — 칸 높이를 직접 준다 */
.dn-pfv .dn-pf-shot.is-phone:first-child {
	height: 640px;
}
.dn-pfv .dn-pf-shot.is-phone:first-child img {
	top: 28px;
	height: calc(100% - 56px);
}

/* 앱 스토어 홍보 그림(dn-board.js 가 .is-promo — 첨부 파일 이름에 '스토어') — 그림에 폰 틀·제목이 이미 있어 테두리 없이 통째로 */
.dn-pfv .dn-pf-shot.is-promo {
	background: var(--tj-color-grey-1, #ecf0f0);
}
.dn-pfv .dn-pf-shot.is-promo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.dn-pfv .dn-pf-shot.is-promo:first-child {
	height: 640px;
}

/* 영상 띠(sections/video_band.html, 2026-10-16) — 제목·설명 아래 16:9 영상. 영상이 안 나와도 포스터와 짙은 바탕이 자리를 지킨다 */
.dn-video-band .dn-vb-lead {
	max-width: 42em;
	margin: -12px auto 32px;
	text-align: center;
	font-size: 17px;
	line-height: 1.7;
	color: var(--tj-color-text-body, #4d6366);
	word-break: keep-all;
}
.dn-video-band .dn-vb-frame {
	max-width: 1080px;
	margin: 0 auto;
}
.dn-video-band .dn-vb-item {
	margin: 0;
	min-width: 0;
}
/* 두 편 나란히(video2) — PC 두 칸, 폰 위아래 */
.dn-video-band .dn-vb-frame.is-two {
	max-width: 1240px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 24px;
}
.dn-video-band .dn-vb-name {
	display: inline-block;
	margin-bottom: 10px;
	padding: 4px 14px;
	border-radius: 999px;
	background: var(--tj-color-theme-primary, #1e8a8a);
	color: var(--tj-color-common-white, #fff);
	font-size: 15px;
	font-weight: 600;
}
.dn-video-band .dn-vb-video {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	object-fit: cover;
	border-radius: 16px;
	background: #0c1e21;
}
.dn-video-band .dn-vb-cap {
	margin-top: 12px;
	text-align: center;
	font-size: 14px;
	color: var(--tj-color-text-body, #4d6366);
	word-break: keep-all;
}
@media (max-width: 767px) {
	.dn-video-band .dn-vb-video {
		border-radius: 10px;
	}
	.dn-video-band .dn-vb-frame.is-two {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}
}