/* DATANG v3 — KP 디자인 위에 얹는 최소 보정 (다국어 · 로고 · 관리자 미디어 · 다탕 콘텐츠 구성) */
:root { --dt-cjk: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR"; }
html:lang(zh) { --dt-cjk: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Pretendard Variable"; }
html:lang(ja) { --dt-cjk: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Pretendard Variable"; }
html.i18n-wait body { opacity: 0; }
body { transition: opacity .25s ease; }
button, input, select, textarea { font-family: inherit; }
html:lang(ko) body { word-break: keep-all; overflow-wrap: break-word; }
html:lang(zh) body, html:lang(ja) body { line-break: strict; }
html:lang(ja) body { word-break: auto-phrase; }
.ln { display: block; }
.tw-keep { white-space: nowrap; }

/* ---------- logo (SVG, 깨짐 없음) ---------- */
.header .logo-wrap, .menu-logo { width: auto !important; max-width: none !important; display: inline-block; }
.header .logo-wrap .logo, .header .logo-wrap .logo-black, .menu-logo img { width: auto !important; max-width: none !important; height: min(74px, 6.1vw); }
.footer-logo img { width: auto; height: clamp(44px, 3.6vw, 60px); max-width: 100%; }
@media (max-width: 1200px) { .header .logo-wrap .logo, .header .logo-wrap .logo-black, .menu-logo img { height: min(51px, 5.6vw); } }
@media (max-width: 992px) { .header .logo-wrap .logo, .header .logo-wrap .logo-black, .menu-logo img { height: min(48px, 6.75vw); } }
@media (max-width: 576px) { .header .logo-wrap .logo, .header .logo-wrap .logo-black, .menu-logo img { height: min(40px, 10.7vw); } }
@media (max-width: 380px) { .header .logo-wrap .logo, .header .logo-wrap .logo-black, .menu-logo img { height: min(36px, 10.2vw); } }

/* ---------- header right: language ---------- */
.dt-hd-r { display: flex; align-items: center; gap: clamp(6px, 1vw, 16px); }
.dt-lang { position: relative; }
.dt-lang .lang-btn { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; border: 1px solid currentColor; border-radius: 0; background: transparent; color: #fff; font-size: .82rem; font-weight: 600; letter-spacing: .04em; cursor: pointer; transition: color .4s ease, border-color .4s ease, background-color .3s ease; }
.dt-lang .lang-btn .material-symbols-outlined { font-size: 18px; }
body.is-black-mode:not(.menu-open) .header .dt-lang .lang-btn { color: #0d2c6c; }
.full-menu-overlay .dt-lang .lang-btn { color: #fff; }
.dt-lang .lang-list { position: absolute; right: 0; top: calc(100% + 6px); min-width: 140px; padding: 6px 0; background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 12px 30px rgba(13, 44, 108, .14); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 5; list-style: none; }
.dt-lang.is-open .lang-list { opacity: 1; visibility: visible; transform: none; }
.dt-lang .lang-list button { display: block; width: 100%; padding: 9px 16px; border: 0; background: none; text-align: left; color: #334155; font-size: .9rem; cursor: pointer; }
.dt-lang .lang-list button:hover, .dt-lang .lang-list button[aria-current="true"] { color: #0d2c6c; background: #f1f5f9; font-weight: 700; }
@media (max-width: 480px) { .dt-lang .lang-btn { height: 38px; padding: 0 8px; } .dt-lang .lang-btn .material-symbols-outlined { display: none; } }

/* ---------- home ---------- */
.port-video img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ship-wrapper .ship-img { display: block; }
.dt-logi-stats { display: flex; flex-wrap: wrap; gap: 14px 36px; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .25); list-style: none; }
.dt-logi-stats li { display: flex; flex-direction: column; gap: 4px; }
.dt-logi-stats strong { font-size: clamp(1.2rem, 1.7vw, 1.7rem); font-weight: 700; color: #fff; letter-spacing: -.02em; }
.dt-logi-stats span { font-size: .85rem; color: rgba(255, 255, 255, .72); }
.map-marker.dt-mk { transform: translate(-50%, -100%); }
.hero-thumbs-swiper .swiper-slide > span:last-child .ln { display: inline; }
.hero-thumbs-swiper .swiper-slide > span:last-child .ln + .ln::before { content: "\A"; white-space: pre; }
.home-news-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #0d2c6c; font-weight: 800; letter-spacing: .08em; }
.news-item .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- sub layout helpers ---------- */
.visual-bg > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-meta .breadcrumb a { color: inherit; }
.dt-block { margin-top: clamp(40px, 5vw, 72px); }
.content-section > .value-intro { margin-bottom: clamp(32px, 4vw, 56px); }
.value-intro { font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.75; color: #475569; max-width: 1000px; }
.value-image img, .value-image video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.value-copy h4 { color: #172c43; font-size: clamp(1.2rem, 1.7vw, 1.6rem); line-height: 1.35; margin-bottom: 18px; }
.value-copy p { color: #58616f; font-size: 1rem; line-height: 1.8; }
.plan-initiatives p { font-size: .98rem; line-height: 1.7; color: #58616f; }
.plan-initiatives .plan-step { display: block; color: #0a80d4; font-size: 1.4rem; font-weight: 800; margin-bottom: 14px; }
.plan-initiatives.dt-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; }
.plan-subheading { margin-top: clamp(40px, 5vw, 72px); }
.content-section > .plan-subheading:first-of-type { margin-top: clamp(40px, 5vw, 64px); }
.plan-metrics .plan-number { font-size: clamp(1.3rem, 2.2vw, 2.1rem); font-weight: 700; color: #fff; line-height: 1.25; margin-top: 8px; }
.plan-metrics h6 { min-height: 0; }
.plan-quantitative .plan-subheading { margin-bottom: 20px; }
.dt-wide { margin: clamp(32px, 4vw, 56px) 0; overflow: hidden; }
.dt-wide .green-energy-image { margin: 0; aspect-ratio: 21 / 9; object-fit: cover; }
.content-section > .dt-wide:first-of-type, .content-section > .gas-gallery:first-of-type, .content-section > .lng-photo-grid:first-of-type { margin-top: 0; }
.lng-photo-grid { margin-bottom: clamp(32px, 4vw, 56px); }
.gas-gallery img, .lng-photo-grid img { transition: transform 1.2s cubic-bezier(.2, .7, .3, 1); }
.green-chain ul { margin-top: 4px; }
.green-chain li { line-height: 1.75; }
.green-phases.dt-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.green-phases article { border-top: 3px solid #209e4b; padding-top: 22px; }
.green-phases h4 { color: #209e4b; }
.green-story .vision-panels article h4 { color: #fff; font-size: clamp(1.4rem, 2.4vw, 2.4rem); margin-bottom: 18px; }
.vision-backdrop video.vision-background { object-fit: cover; }
.trading-overview dd { font-size: 1.05rem; }
.trading-tanks { margin-top: clamp(40px, 5vw, 72px); }
.port-project-grid.dt-g2c { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; }
.port-project-grid.dt-g2c article { border-top: 1px solid #bccad2; padding-top: 24px; }
.port-project-grid.dt-g2c h5 { color: #183b55; font-size: 1.15rem; line-height: 1.4; margin-bottom: 14px; }
.port-project-grid.dt-g2c p { color: #58616f; line-height: 1.75; }
.shipping-details { margin-top: clamp(40px, 5vw, 72px); }
.shipping-details-image img { aspect-ratio: 4 / 3; object-fit: cover; }

/* 6개 사업부 카드: 3 + 3 */
.dt-div6 .division-row-bottom { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dt-div6 .division-card { min-height: 280px; text-align: center; }
.dt-div6 .dt-div-s { margin-top: 10px; color: #64748b; font-size: .9rem; line-height: 1.55; }
@media (max-width: 768px) {
  .dt-div6 .division-row-bottom .division-card:not(:first-child) { grid-column: span 3; }
  .dt-div6 .dt-div-s { font-size: .78rem; }
}

/* 4단 타임라인 (연도 마커 + 화살표) */
.execution-timeline.dt-tl4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.execution-timeline .dt-rm-t { color: #102746; font-size: 1.15rem; line-height: 1.4; margin-bottom: 10px; }
.execution-timeline > li > p { color: #58616f; line-height: 1.7; }
.business-plan .execution-timeline { margin: clamp(40px, 5vw, 64px) 0 0; }
@media (max-width: 1000px) { .execution-timeline.dt-tl4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .execution-timeline.dt-tl4 { grid-template-columns: minmax(0, 1fr); } }

/* 무역 흐름: 제품 + 3단계 */
.global-flow.dt-flow3 { grid-template-columns: minmax(0, .8fr) repeat(3, minmax(0, 1fr)); margin-bottom: 0; }
.global-flow.dt-flow3 .global-flow-card h4 { margin: 0; }
@media (max-width: 1000px) { .global-flow.dt-flow3 { grid-template-columns: minmax(0, 1fr); } .global-flow-card:not(:last-child)::after { content: '↓'; right: auto; left: 50%; top: auto; bottom: -32px; transform: translateX(-50%); } }

/* 파트너 */
.dt-partners { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 0; }
.dt-partners figure { min-height: 96px; border: 1px solid #dedee2; padding: 16px; }
.dt-partners span { color: #0d2c6c; font-weight: 700; font-size: clamp(.95rem, 1.2vw, 1.15rem); text-align: center; letter-spacing: -.01em; }
@media (max-width: 768px) { .dt-partners { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 전략 */
.financing-card > div { min-width: 0; }
.policy-significance-content .policy-copy-label { display: block; }
.policy-significance-backdrop video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 글로벌 */
.global-content-map .map-marker.dt-mk { transform: translate(-50%, -100%); }

/* 게시판 */
.dt-board-desc { margin: -16px 0 28px; color: #64748b; font-size: 1rem; line-height: 1.7; }
.board-file { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; padding: 12px 18px; border: 1px solid #0d2c6c; color: #0d2c6c; font-weight: 600; }
.board-file:hover { background: #0d2c6c; color: #fff; }
.board-body p + p { margin-top: 1em; }

/* 공통 등장 효과 (절제된 수준) */
.dt-motion .dt-rv { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .9s cubic-bezier(.2, .7, .3, 1); }
.dt-motion .dt-rv.is-visible { opacity: 1; transform: none; }
@media (max-width: 1000px) {
  .plan-initiatives.dt-g2, .port-project-grid.dt-g2c, .green-phases.dt-g3 { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .dt-motion .dt-rv { opacity: 1; transform: none; transition: none; } }

/* 홈 · 에너지 항만 인프라 섹션: 글자 크게, 가독성 강화 */
.port-section .port-text { width: min(100%, 640px); }
.port-section .port-text h2 { font-size: clamp(2.6rem, 3.7vw, 3.9rem); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; color: #0d2c6c; }
.port-section .port-text .sub-lead { font-size: clamp(1.15rem, 1.45vw, 1.45rem); font-weight: 500; line-height: 1.55; color: #2f3b52; }
.port-section .view-more { font-size: clamp(.95rem, 1vw, 1.08rem); font-weight: 700; }
.port-section .port-video img { object-fit: contain; }
@media (max-width: 576px) {
  .port-section .port-text h2 { font-size: clamp(1.9rem, 8.6vw, 2.4rem); }
  .port-section .port-text .sub-lead { font-size: 1.02rem; margin: 10px 0; }
  .port-section .view-more { font-size: .86rem; }
  .port-section .port-video { display: flex; align-items: center; justify-content: center; }
  .port-section .port-video img { flex: none; width: 135%; max-width: none; height: auto; object-fit: contain; }
}

/* =====================================================================
   홈 자연 스크롤 모드 (태블릿 · 모바일 · 작은 PC 창)
   PC(마우스, 1200px 이상)는 한 화면씩 넘기는 방식을 유지합니다.
   ===================================================================== */
html.dt-flow, html.dt-flow body.is-home { height: auto; overflow: visible; overflow-y: visible; }
html.dt-flow body.is-home { overflow-x: hidden; }
html.dt-flow #fullpage-container { height: auto; transform: none !important; transition: none; }
html.dt-flow #fullpage-container > .section { height: auto; min-height: 0; overflow: hidden; }
html.dt-flow .side-indicator { display: none; }
html.dt-flow body.is-home .header { transition: background-color .35s ease, box-shadow .35s ease; }
html.dt-flow body.is-home.is-black-mode:not(.menu-open) .header { background: rgba(255, 255, 255, .97); box-shadow: 0 1px 0 rgba(13, 44, 108, .08); }

/* 히어로 */
html.dt-flow #fullpage-container > .hero-section { height: 100vh; height: 100svh; min-height: 520px; max-height: 1100px; }

/* 핵심 사업 */
html.dt-flow .core-business-section { padding: calc(var(--header-height) + clamp(32px, 6vw, 72px)) 0 clamp(48px, 7vw, 88px); }
html.dt-flow .core-business-section > .container { height: auto; }

/* 에너지 항만 인프라 */
html.dt-flow .port-section .port-layout { height: clamp(600px, 88svh, 980px); padding-top: calc(var(--header-height) + 32px) !important; }
@media (max-width: 576px) { html.dt-flow .port-section .port-layout { height: auto; min-height: 0; grid-template-rows: auto auto auto; } html.dt-flow .port-section .port-video { height: auto; aspect-ratio: 4 / 3; } }

/* 전략 과제 */
html.dt-flow .policy-section > .container { height: auto !important; display: block; padding-top: calc(var(--header-height) + clamp(28px, 5vw, 64px)) !important; padding-bottom: clamp(56px, 8vw, 96px) !important; }
html.dt-flow .policy-section .section-heading { margin-bottom: clamp(20px, 3vw, 36px); }
html.dt-flow .policy-section .p-card { height: clamp(340px, 44vw, 520px) !important; }
@media (max-width: 991px) {
  html.dt-flow .policy-section .policy-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  html.dt-flow .policy-section .p-card { height: clamp(320px, 52vw, 460px) !important; }
  html.dt-flow .policy-section .p-card.card-2 { transform: translateY(-20px); }
  html.dt-flow .policy-section .p-card .overlay { padding: clamp(18px, 2.6vw, 28px); }
  html.dt-flow .policy-section .p-card h3 { font-size: clamp(1.05rem, 2.2vw, 1.3rem); }
  html.dt-flow .policy-section .p-card p { font-size: clamp(.85rem, 1.6vw, .98rem); line-height: 1.55; }
}
@media (max-width: 767px) {
  html.dt-flow .policy-section .policy-cards { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 10px; }
  html.dt-flow .policy-section .p-card { height: clamp(210px, 56vw, 300px) !important; }
  html.dt-flow .policy-section .p-card.card-2 { transform: none; }
  html.dt-flow .policy-section .p-card .overlay { padding: 18px 20px; }
  html.dt-flow .policy-section .p-card h3 { font-size: 1.15rem; margin-bottom: 6px; }
  html.dt-flow .policy-section .p-card p { font-size: .92rem; line-height: 1.5; display: block; -webkit-line-clamp: unset; overflow: visible; }
}

/* LNG 해운 */
html.dt-flow .logistics-section { min-height: clamp(560px, 92svh, 900px); }
html.dt-flow .logistics-section .logistics-content { height: auto; min-height: inherit; padding-top: calc(var(--header-height) + 40px); padding-bottom: 64px; }
@media (min-width: 769px) and (max-width: 1199px) {
  html.dt-flow .logistics-section .logistics-content { grid-template-columns: 48% 52%; }
  html.dt-flow .logistics-section .logistics-text h2 { font-size: clamp(2.2rem, 4.6vw, 3.2rem); }
  html.dt-flow .logistics-section .ship-wrapper { width: min(82vw, 1000px); }
  html.dt-flow .logistics-section.active .ship-wrapper { transform: translateX(4vw); }
}
@media (max-width: 768px) {
  html.dt-flow .logistics-section .logistics-content { padding-bottom: 40px; }
}

/* IR & 뉴스 */
html.dt-flow .news-section > .container { height: auto !important; display: block; padding-top: calc(var(--header-height) + clamp(28px, 5vw, 64px)) !important; padding-bottom: clamp(56px, 8vw, 96px) !important; }
@media (min-width: 577px) and (max-width: 991px) {
  html.dt-flow .news-section .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 0; }
  html.dt-flow .news-section .news-item:nth-child(2n) { padding-right: 0; border-right: 0; }
  html.dt-flow .news-section .news-item:nth-child(2n+1) { padding-left: 0; }
  html.dt-flow .news-section .news-item .thumb { height: clamp(200px, 30vw, 300px); }
}

/* 글로벌 + 푸터 */
html.dt-flow .global-footer-section { height: auto; }
html.dt-flow .global-area { flex: none; min-height: max(clamp(520px, 78svh, 860px), calc(44vw + 330px)); }
html.dt-flow .global-area > .container { height: auto; min-height: inherit; padding-top: calc(var(--header-height) + 28px); }
@media (max-width: 991px) { html.dt-flow .global-map-stage { width: 96vw; } }
@media (max-width: 576px) {
  html.dt-flow .global-area { min-height: 0; }
  html.dt-flow .global-area > .container { min-height: 0; gap: 0; }
  html.dt-flow .network-boxes .box { padding: 16px 18px; }
  html.dt-flow .network-boxes h3 { font-size: 1rem; }
  html.dt-flow .network-boxes p { font-size: .85rem; line-height: 1.45; }
}
html.dt-flow .network-boxes { align-items: stretch; }
@media (min-width: 577px) and (max-width: 992px) { html.dt-flow .network-boxes { flex-direction: row; } html.dt-flow .network-boxes .box { flex: 1 1 0; } }
@media (min-width: 577px) and (max-width: 1199px) and (orientation: portrait) {
  html.dt-flow .port-section .port-video { display: flex; align-items: center; justify-content: center; width: 100vw; }
  html.dt-flow .port-section .port-video img { flex: none; width: 118%; max-width: none; height: auto; }
}
@media (min-width: 577px) and (max-width: 1199px) and (orientation: landscape) {
  html.dt-flow .port-section .port-video { width: 62vw; left: 58%; }
}
@media (max-width: 576px) {
  html.dt-flow .global-area > .container { justify-content: flex-start; padding-bottom: 24px; }
  html.dt-flow .global-heading { margin-bottom: 54vw; }
  html.dt-flow .global-map-stage { width: 96vw; top: calc(var(--header-height) + 96px); transform: translate(-50%, 0); }
}
html.dt-flow .global-area { padding-top: 0; }
@media (max-width: 576px) { html.dt-flow .global-map-stage { top: calc(var(--header-height) + 104px); } html.dt-flow .global-heading { margin-bottom: 56vw; } }
html.dt-flow .network-boxes { width: 100%; align-self: stretch; }
@media (max-width: 576px) { html.dt-flow .global-area { padding-left: 0; padding-right: 0; } }
@media (max-width: 576px) { html.dt-flow .global-area { margin: 0; } html.dt-flow .global-area > .container { width: 100% !important; max-width: none !important; margin: 0 !important; padding-left: 16px !important; padding-right: 16px !important; } }