/* ==========================================================================
   (주)후트웍 메인 — daehan(대한상선 a1 물류) 디자인 클론
   원본: dl-blueprints a1_daehan (hero / business / intro / news)
   변경: 콘텐츠=후트웍, 액센트 #de0515→#0082BA(브랜드블루), 디스플레이=Poppins
   자기완결 스타일시트 (design.css 미사용)
   ========================================================================== */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
	--accent: #0082BA;
	--accent-deep: #006C9C;
	--ink: #1a1a1a;
	--ink-soft: #5a5a5a;
	--line: #e5e5e5;
	--inverse: #ffffff;
	--font-display: 'Poppins', 'Pretendard', sans-serif;
	--font-body: 'Pretendard', sans-serif;
	--navy: #0a1424;
	--hero-dur: 6s;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* 한국어 줄바꿈 — 어절(단어) 단위로 넘김. 긴 영어는 break-word로 넘침 방지 */
body { margin: 0; font-family: var(--font-body); color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: break-word; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.blind { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

.dl-en { font-family: var(--font-display); }
.dl-wrap { width: 100%; max-width: 1500px; margin: 0 auto; padding: 0 40px; }

/* ==========================================================================
   GNB — 히어로 위 투명, 스크롤 시 다크 솔리드 (daehan)
   ========================================================================== */
.dl-gnb { position: fixed; top: 0; left: 0; width: 100%; height: 95px; display: flex; align-items: center; z-index: 500; transition: background .4s; }
.dl-gnb::before { content: ''; position: absolute; inset: 0; background: var(--navy); opacity: 0; transition: opacity .4s; z-index: -1; }
.dl-gnb--scrolled::before, .dl-gnb--solid::before { opacity: 0.96; }
.dl-gnb__inner { width: 100%; max-width: 1640px; margin: 0 auto; padding: 0 50px; display: flex; align-items: center; justify-content: space-between; }
.dl-gnb__logo img { height: 30px; width: auto; }
.dl-gnb__menu { display: flex; }
.dl-gnb__item { position: relative; }
.dl-gnb__link { display: block; line-height: 95px; padding: 0 32px; font-size: 18px; font-weight: 500; color: #fff; position: relative; }
.dl-gnb__link::after { content: ''; position: absolute; left: 50%; bottom: 30px; width: 0; height: 2px; background: var(--accent); transform: translateX(-50%); transition: width .35s; }
.dl-gnb__item:hover .dl-gnb__link::after { width: calc(100% - 64px); }
.dl-gnb__sub { position: absolute; top: 95px; left: 50%; transform: translateX(-50%); min-width: 200px; background: rgba(10,20,36,0.97); padding: 14px 0; opacity: 0; visibility: hidden; transition: .35s; }
.dl-gnb__item:hover .dl-gnb__sub { opacity: 1; visibility: visible; }
.dl-gnb__sub a { display: block; text-align: center; padding: 11px 18px; font-size: 15px; font-weight: 300; color: rgba(255,255,255,0.8); white-space: nowrap; transition: .2s; }
.dl-gnb__sub a:hover { color: var(--accent); }
.dl-gnb__cta { display: inline-flex; align-items: center; height: 44px; padding: 0 24px; border: 1px solid rgba(255,255,255,0.5); font-size: 15px; font-weight: 500; color: #fff; transition: .35s; }
.dl-gnb__cta:hover { background: var(--accent); border-color: var(--accent); }
.dl-gnb__burger { display: none; width: 28px; height: 20px; position: relative; }
.dl-gnb__burger span, .dl-gnb__burger span::before, .dl-gnb__burger span::after { content: ''; position: absolute; left: 0; width: 28px; height: 2px; background: #fff; transition: .3s; }
.dl-gnb__burger span { top: 9px; }
.dl-gnb__burger span::before { top: -8px; }
.dl-gnb__burger span::after { top: 8px; }
.dl-gnb__burger.is-open span { background: transparent; }
.dl-gnb__burger.is-open span::before { top: 0; transform: rotate(45deg); }
.dl-gnb__burger.is-open span::after { top: 0; transform: rotate(-45deg); }
.dl-gnb__mobile { position: fixed; top: 0; right: -100%; width: 80%; max-width: 380px; height: 100%; background: rgba(10,20,36,0.98); padding: 110px 0 40px; transition: right .5s cubic-bezier(.4,0,.2,1); z-index: 480; overflow-y: auto; }
.dl-gnb__mobile.is-open { right: 0; }
.dl-gnb__mobile a { display: block; padding: 18px 40px; font-size: 22px; font-weight: 500; color: #fff; }
.dl-gnb__mobile .dl-gnb__msub a { padding: 12px 56px; font-size: 16px; color: rgba(255,255,255,0.65); }
.dl-gnb__dim { position: fixed; inset: 0; background: rgba(0,0,0,0.5); opacity: 0; visibility: hidden; transition: .4s; z-index: 470; }
.dl-gnb__dim.is-open { opacity: 1; visibility: visible; }

/* ==========================================================================
   HERO — 풀블리드 100vh 슬라이더 + 대형 타이포 + progress/pause (daehan)
   ========================================================================== */
/* 히어로 높이 — 회의록 합의: 풀스크린 지양, 화면 절반 정도(첫 화면에 사업분야 같이 노출). 16:9 모니터 절반 기준 px 고정(vh는 작은 화면서 콘텐츠 잘림) */
.dl-hero { position: relative; width: 100%; height: 540px; overflow: hidden; background: var(--navy); }
.dl-hero__slides { position: absolute; inset: 0; }
.dl-hero__slide { position: absolute; inset: 0; background-size: cover; background-position: 50% 50%; opacity: 0; transition: opacity .8s ease; }
.dl-hero__slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(8,16,32,0.78) 0%, rgba(8,16,32,0.5) 45%, rgba(8,16,32,0.28) 100%); }
.dl-hero__slide.is-active { opacity: 1; animation: dl-hero-zoom var(--hero-dur) both; }
@keyframes dl-hero-zoom { 0% { transform: scale(1.16); } 100% { transform: scale(1); } }
.dl-hero__inner { position: absolute; top: calc(50% + 47px); left: 50%; width: 100%; max-width: 1500px; padding: 0 50px; transform: translate(-50%, -50%); z-index: 5; }
.dl-hero__eyebrow { display: inline-block; font-family: var(--font-body); font-size: 15px; font-weight: 500; letter-spacing: 0.04em; color: var(--accent); margin-bottom: 16px; }
.dl-hero__title { font-family: var(--font-display); font-size: 48px; font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; color: #fff; margin: 0; }
.dl-hero__lead { max-width: 560px; margin-top: 18px; font-size: 18px; font-weight: 300; line-height: 1.7; color: rgba(255,255,255,0.85); }
.dl-hero__progress { display: flex; align-items: center; margin-top: 34px; }
.dl-hero__bar { position: relative; width: 260px; height: 3px; background: rgba(255,255,255,0.28); overflow: hidden; }
.dl-hero__bar-fill { display: block; width: 0; height: 100%; background: var(--accent); }
.dl-hero__bar-fill.is-running { width: 100%; transition: width var(--hero-dur) linear; }
.dl-hero__count { margin-left: 20px; font-family: var(--font-display); font-size: 14px; letter-spacing: 0.1em; color: rgba(255,255,255,0.7); }
.dl-hero__count b { color: #fff; font-weight: 600; }
.dl-hero__toggle { width: 30px; height: 30px; margin-left: 22px; display: flex; align-items: center; justify-content: center; }
.dl-hero__toggle svg { width: 16px; height: 16px; fill: #fff; }
.dl-hero__toggle-play { display: none; }
.dl-hero__toggle.is-paused .dl-hero__toggle-pause { display: none; }
.dl-hero__toggle.is-paused .dl-hero__toggle-play { display: block; }
/* 산업 라벨 (우하단) */
.dl-hero__tags { position: absolute; right: 50px; bottom: 30px; z-index: 5; display: flex; gap: 28px; }
.dl-hero__tag { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.08em; color: rgba(255,255,255,0.4); transition: .3s; }
.dl-hero__tag.is-active { color: #fff; }
.dl-hero__tag.is-active::before { content: ''; display: inline-block; width: 16px; height: 1px; background: var(--accent); vertical-align: middle; margin-right: 8px; }

/* ==========================================================================
   BUSINESS — 풀블리드 다크 이미지 위 4 아이콘 컬럼 (daehan)
   ========================================================================== */
/* 사업영역 — 산업별 이미지 카드 4개 (이미지 풀블리드 + 하단 그라디언트 + 텍스트 오버레이, 라이트 그레이 섹션) */
.dl-biz { padding: 150px 0; background: #f5f8fa; }
.dl-biz__header { margin-bottom: 58px; }
.dl-biz__eyebrow { font-family: var(--font-display); font-size: 15px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }
.dl-biz__title { font-family: var(--font-display); font-size: 48px; font-weight: 600; line-height: 1.1; margin: 16px 0 0; color: var(--ink); }
.dl-biz__lead { max-width: 640px; margin: 20px 0 0; font-size: 18px; font-weight: 300; line-height: 1.7; color: var(--ink-soft); }
.dl-biz__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.dl-biz__card { position: relative; display: block; aspect-ratio: 3/4; overflow: hidden; color: #fff; border: 1px solid transparent; transition: border-color .35s ease; }
.dl-biz__card:hover { border-color: var(--accent); }
.dl-biz__img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .7s cubic-bezier(.4,0,.2,1); }
.dl-biz__card:hover .dl-biz__img { transform: scale(1.07); }
.dl-biz__card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,16,32,0.90) 0%, rgba(8,16,32,0.42) 52%, rgba(8,16,32,0.10) 100%); }
.dl-biz__body { position: absolute; left: 0; bottom: 0; z-index: 2; width: 100%; padding: 30px 26px; }
.dl-biz__name { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: #fff; margin: 0; line-height: 1.3; }
.dl-biz__desc { margin: 12px 0 0; font-size: 14px; font-weight: 300; line-height: 1.6; color: rgba(255,255,255,0.82); word-break: keep-all; }
.dl-biz__more { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; font-family: var(--font-display); font-size: 12.5px; letter-spacing: 0.06em; color: #fff; }
.dl-biz__more svg { width: 15px; height: 15px; transition: transform .35s; }
.dl-biz__card:hover .dl-biz__more svg { transform: translateX(4px); }

/* ==========================================================================
   COMPANY — 대형 타이틀 + 가로 이미지 카드 (daehan intro)
   ========================================================================== */
/* Company — 중앙 정렬 스토리 블록 (우측 강점 카드 제거) */
.dl-company { padding: 150px 0; background: #fff; }
.dl-company__grid { max-width: 820px; margin: 0 auto; text-align: center; }
.dl-company__eyebrow { font-family: var(--font-display); font-size: 15px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.dl-company__title { font-family: var(--font-display); font-size: 48px; font-weight: 600; line-height: 1.15; color: var(--ink); margin: 16px 0 0; }
.dl-company__desc { margin: 24px auto 0; max-width: 820px; font-size: 17px; font-weight: 300; line-height: 1.85; color: var(--ink-soft); }
.dl-company__cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 36px; height: 54px; padding: 0 30px; border: 1px solid var(--ink); font-size: 15px; font-weight: 500; color: var(--ink); transition: .35s; }
.dl-company__cta:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.dl-company__cta svg { width: 17px; height: 17px; }

/* ==========================================================================
   MEDIA — Media 대형 타이틀 + 전체보기 + 리스트 (daehan news 기반)
   ========================================================================== */
.dl-media { padding: 150px 0; background: #fff; }
.dl-media__head { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 28px; border-bottom: 1px solid var(--ink); }
.dl-media__title { font-family: var(--font-display); font-size: 48px; font-weight: 600; line-height: 1.05; color: var(--ink); margin: 0; }
.dl-media__all { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 15px; font-weight: 500; color: var(--accent); transition: .3s; }
.dl-media__all svg { width: 16px; height: 16px; transition: transform .3s; }
.dl-media__all:hover svg { transform: translateX(4px); }
.dl-media__item { display: flex; align-items: center; gap: 40px; padding: 38px 8px; border-bottom: 1px solid var(--line); }
/* [data-reveal] transition(opacity/transform .9s)이 같은 specificity로 override → a.dl-media__item(0-1-1)로 높여 reveal+hover 둘 다 명시 */
a.dl-media__item { transition: opacity .9s cubic-bezier(.4,0,.2,1), transform .9s cubic-bezier(.4,0,.2,1), background-color .35s ease, padding-left .35s ease; }
.dl-media__item:hover { background: #f7fafc; padding-left: 24px; }
.dl-media__cat { font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; color: var(--accent); width: 90px; flex-shrink: 0; }
.dl-media__body { flex: 1; }
.dl-media__subj { font-size: 23px; font-weight: 500; color: var(--ink); letter-spacing: -0.02em; }
.dl-media__date { margin-top: 12px; font-size: 14px; color: #999; }
.dl-media__arrow { width: 22px; height: 22px; stroke: #ccc; transition: .35s; }
.dl-media__item:hover .dl-media__arrow { stroke: var(--accent); transform: translateX(4px); }

/* ==========================================================================
   CTA — 풀블리드 이미지 밴드
   ========================================================================== */
.dl-cta { position: relative; padding: 140px 0; background-image: linear-gradient(rgba(8,16,32,0.82), rgba(8,16,32,0.82)), url('../assets/scene/warehouse.jpg'); background-size: cover; background-position: center; background-attachment: scroll; text-align: center; color: #fff; }
.dl-cta__title { font-family: var(--font-display); font-size: 48px; font-weight: 700; line-height: 1.25; margin: 0 0 36px; }
.dl-cta__title b { color: #fff; font-weight: 700; }
.dl-cta__btn { display: inline-flex; align-items: center; gap: 12px; height: 60px; padding: 0 40px; background: var(--accent); color: #fff; font-size: 16px; font-weight: 500; transition: .35s; }
.dl-cta__btn:hover { background: #fff; color: var(--accent); }
.dl-cta__btn svg { width: 18px; height: 18px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.dl-footer { background: #06101e; color: rgba(255,255,255,0.55); padding: 70px 0 44px; }
.dl-footer__top { display: flex; justify-content: space-between; gap: 40px; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,0.12); flex-wrap: wrap; }
.dl-footer__logo img { height: 30px; }
.dl-footer__slogan { margin-top: 18px; font-family: var(--font-display); font-size: 15px; color: rgba(255,255,255,0.8); }
.dl-footer__nav { display: flex; gap: 26px; align-items: center; }
.dl-footer__nav a { font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.85); }
.dl-footer__nav a:hover { color: var(--accent); }
.dl-footer__info { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 26px; font-size: 13.5px; line-height: 1.7; }
.dl-footer__info b { color: rgba(255,255,255,0.75); font-weight: 600; }
.dl-footer__copy { margin-top: 22px; font-family: var(--font-display); font-size: 12.5px; color: rgba(255,255,255,0.4); }

/* ==========================================================================
   진입 리빌
   ========================================================================== */
[data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity .9s cubic-bezier(.4,0,.2,1), transform .9s cubic-bezier(.4,0,.2,1); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: .1s; }
[data-reveal-delay="2"] { transition-delay: .2s; }
[data-reveal-delay="3"] { transition-delay: .3s; }
[data-reveal-delay="4"] { transition-delay: .4s; }

/* ==========================================================================
   서브 페이지 공유 — 풀블리드 다크 헤더 + 섹션 헤드 (daehan 톤)
   ========================================================================== */
.dl-sub { position: relative; height: 480px; display: flex; align-items: center; overflow: hidden; background: var(--navy); color: #fff; }
.dl-sub__bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.5; transform: scale(1.05); }
.dl-sub::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(8,16,32,0.9) 0%, rgba(8,16,32,0.55) 60%, rgba(8,16,32,0.35) 100%); }
.dl-sub__inner { position: relative; z-index: 2; width: 100%; padding-top: 60px; }
.dl-sub__crumb { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: rgba(255,255,255,0.6); margin-bottom: 20px; }
.dl-sub__crumb svg { width: 13px; height: 13px; stroke: currentColor; opacity: 0.6; }
/* 서브페이지 상단 영문 라벨 숨김 — 글자만 지우고 영역은 여백으로 유지(요청 2026-06-09) */
.dl-sub__eyebrow { font-family: var(--font-display); font-size: 15px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); visibility: hidden; }
.dl-sub__title { font-family: var(--font-display); font-size: 58px; font-weight: 600; line-height: 1.1; margin: 14px 0 0; }
.dl-sub__desc { margin-top: 18px; font-size: 18px; font-weight: 300; line-height: 1.6; color: rgba(255,255,255,0.82); max-width: 660px; }

.dl-sec { padding: 130px 0; }
.dl-sec--gray { background: #f5f8fa; }
.dl-sec--dark { background: var(--navy); color: #fff; }
.dl-sec__eyebrow { font-family: var(--font-display); font-size: 14px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.dl-sec__title { font-family: var(--font-display); font-size: 48px; font-weight: 600; line-height: 1.14; margin: 16px 0 0; color: var(--ink); }
.dl-sec--dark .dl-sec__title { color: #fff; }
.dl-sec__lead { margin-top: 20px; font-size: 18px; font-weight: 300; line-height: 1.7; color: var(--ink-soft); }
.dl-sec--dark .dl-sec__lead { color: rgba(255,255,255,0.75); }

@media (max-width: 1200px) {
	.dl-sub { height: 380px; }
	.dl-sub__title { font-size: 44px; }
	.dl-sec__title { font-size: 38px; }
}
@media (max-width: 768px) {
	.dl-sub { height: 300px; }
	.dl-sub__title { font-size: 32px; }
	.dl-sub__desc { font-size: 15px; }
	.dl-sec { padding: 80px 0; }
	.dl-sec__title { font-size: 30px; }
	.dl-sec__lead { font-size: 16px; }
}

/* ==========================================================================
   반응형
   ========================================================================== */
@media (max-width: 1200px) {
	.dl-gnb__menu, .dl-gnb__cta { display: none; }
	.dl-gnb__burger { display: block; }
	.dl-gnb { height: 70px; }
	.dl-gnb::before { opacity: 0.96; }
	.dl-gnb__logo img { height: 26px; }
	.dl-hero__title { font-size: 44px; }
	.dl-biz__title { font-size: 44px; }
	.dl-company__title, .dl-media__title { font-size: 42px; }
	.dl-biz__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
	.dl-wrap, .dl-gnb__inner { padding: 0 22px; }
	.dl-hero__inner { top: calc(50% + 35px); padding: 0 22px; }
	.dl-hero__title { font-size: 38px; }
	.dl-hero__lead { font-size: 16px; }
	.dl-hero__tags { display: none; }
	.dl-biz, .dl-company, .dl-media, .dl-cta { padding: 80px 0; background-attachment: scroll; }
	.dl-biz__title { font-size: 34px; }
	.dl-company__title { font-size: 32px; }
	.dl-media__head { flex-direction: column; align-items: flex-start; gap: 18px; }
	.dl-media__title { font-size: 34px; }
	.dl-media__item { gap: 18px; padding: 26px 4px; }
	.dl-media__cat { width: auto; }
	.dl-media__subj { font-size: 17px; }
	.dl-media__arrow { display: none; }
	.dl-cta__title { font-size: 30px; }
	.dl-footer__top { flex-direction: column; }
}

/* 폰에서만 1열 (태블릿은 2열 유지) */
@media (max-width: 520px) {
	.dl-biz__grid { grid-template-columns: 1fr; }
	.dl-biz__card { aspect-ratio: 4/3; }
}

/* ==========================================================================
   히어로 CTA — 스토리보드 "사업 분야 보기" (추가)
   ========================================================================== */
.dl-hero__cta { display: inline-flex; align-items: center; gap: 9px; margin-top: 22px; height: 44px; padding: 0 24px; border: 1px solid rgba(255,255,255,0.55); font-family: var(--font-display); font-size: 14px; font-weight: 500; letter-spacing: 0.02em; color: #fff; transition: .35s; }
.dl-hero__cta:hover { background: var(--accent); border-color: var(--accent); }
.dl-hero__cta svg { width: 15px; height: 15px; }

/* ==========================================================================
   PARTNER — Clariant Group (화이트, 스토리보드 메인 §6 추가)
   ========================================================================== */
.dl-partner { padding: 150px 0; background: #f5f8fa; }
.dl-partner__head { display: grid; grid-template-columns: 0.9fr 1.1fr; column-gap: 60px; row-gap: 18px; align-items: start; padding-bottom: 54px; border-bottom: 1px solid var(--line); }
.dl-partner__eyebrow { grid-column: 1 / -1; font-family: var(--font-display); font-size: 15px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.dl-partner__title { font-family: var(--font-display); font-size: 48px; font-weight: 600; line-height: 1.08; margin: 0; color: var(--ink); }
.dl-partner__desc p { margin: 0; font-size: 17px; font-weight: 300; line-height: 1.85; color: var(--ink-soft); word-break: keep-all; }
.dl-partner__desc b { color: var(--ink); font-weight: 600; }
.dl-partner__more { display: inline-flex; align-items: center; gap: 9px; margin-top: 24px; font-family: var(--font-display); font-size: 13.5px; letter-spacing: 0.04em; color: var(--accent); }
.dl-partner__more svg { width: 16px; height: 16px; transition: transform .35s; }
.dl-partner__more:hover svg { transform: translateX(4px); }
.dl-partner__brand { margin: 52px 0 6px; font-family: var(--font-display); font-size: 40px; font-weight: 700; letter-spacing: 0.16em; color: #d4dde4; text-align: center; }
.dl-partner__stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 42px; }
.dl-partner__stats li { text-align: center; padding: 0 22px; position: relative; }
.dl-partner__stats li + li::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.dl-partner__num { font-family: var(--font-display); font-size: 60px; font-weight: 600; line-height: 1; color: var(--ink); margin: 0; }
.dl-partner__num sup { font-size: 19px; font-weight: 500; color: var(--accent); vertical-align: super; margin-left: 3px; }
.dl-partner__cap { margin-top: 14px; font-size: 14px; font-weight: 300; line-height: 1.5; color: var(--ink-soft); word-break: keep-all; }

/* ==========================================================================
   VIDEO — Clariant 소개영상 placeholder (다크, 스토리보드 메인 §5 추가)
   ========================================================================== */
.dl-video { padding: 150px 0; background: var(--navy); color: #fff; }
.dl-video__head { text-align: center; margin-bottom: 50px; }
.dl-video__eyebrow { font-family: var(--font-display); font-size: 15px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.dl-video__title { font-family: var(--font-display); font-size: 48px; font-weight: 600; line-height: 1.1; margin: 16px 0 0; color: #fff; }
.dl-video__lead { margin: 18px auto 0; max-width: 560px; font-size: 17px; font-weight: 300; line-height: 1.7; color: rgba(255,255,255,0.72); }
.dl-video__frame { position: relative; aspect-ratio: 16/9; max-width: 980px; margin: 0 auto; background: linear-gradient(135deg, #0e1c30, #0a1626); border: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.dl-video__play { width: 86px; height: 86px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; transition: .35s; }
.dl-video__play:hover { transform: scale(1.08); background: #fff; }
.dl-video__play svg { width: 32px; height: 32px; fill: #fff; margin-left: 4px; }
.dl-video__play:hover svg { fill: var(--accent); }
.dl-video__note { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.08em; color: rgba(255,255,255,0.45); }

/* ==========================================================================
   CLIENTS — 주요 고객사 로고 그리드 placeholder (그레이, 스토리보드 메인 §7 추가)
   ========================================================================== */
.dl-clients { padding: 150px 0; background: #f5f8fa; }
.dl-clients__head { text-align: center; margin-bottom: 56px; }
.dl-clients__eyebrow { font-family: var(--font-display); font-size: 15px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.dl-clients__title { font-family: var(--font-display); font-size: 48px; font-weight: 600; line-height: 1.1; margin: 16px 0 0; color: var(--ink); }
.dl-clients__lead { margin: 18px auto 0; max-width: 560px; font-size: 17px; font-weight: 300; line-height: 1.7; color: var(--ink-soft); }
.dl-clients__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.dl-clients__grid li { display: flex; align-items: center; justify-content: center; min-height: 96px; padding: 14px; background: #fff; font-family: var(--font-display); font-size: 15px; font-weight: 500; letter-spacing: 0.01em; color: #8a97a2; text-align: center; word-break: keep-all; transition: .3s; }
.dl-clients__grid li:hover { color: var(--accent); background: #fbfdfe; }

/* 추가 섹션 반응형 (partner·video·clients) */
@media (max-width: 1200px) {
	.dl-partner__head { grid-template-columns: 1fr; gap: 28px; align-items: start; }
	.dl-partner__title, .dl-video__title, .dl-clients__title { font-size: 40px; }
	.dl-clients__grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 768px) {
	.dl-partner, .dl-video, .dl-clients { padding: 80px 0; }
	.dl-partner__title, .dl-video__title, .dl-clients__title { font-size: 30px; }
	.dl-partner__stats { grid-template-columns: 1fr 1fr; gap: 36px 0; }
	.dl-partner__stats li:nth-child(odd)::before { display: none; }
	.dl-partner__num { font-size: 46px; }
	.dl-partner__brand { font-size: 30px; }
	.dl-clients__grid { grid-template-columns: repeat(3, 1fr); }
	.dl-clients__grid li { min-height: 74px; font-size: 13px; }
	.dl-video__play { width: 66px; height: 66px; }
	.dl-video__play svg { width: 26px; height: 26px; }
}

/* ==========================================================================
   유틸 — 줄바꿈 PC/모바일 분기 (프론트_퍼블리싱_규칙 §1)
   .br-pc: PC에서만 줄바꿈(모바일 자연흐름) / .br-mo: 모바일에서만 줄바꿈
   ========================================================================== */
br.br-mo { display: none; }
@media (max-width: 768px) {
	br.br-pc { display: none; }
	br.br-mo { display: inline; }
}