/* =========================================================
   DOOGO GROUP — business-detail.css (사업 상세 7개 공통)
   첫 화면 · 주요 서비스 · 운영 사이트 · 현장 · 관련 브랜드/프로젝트 · 담당 대표 · 문의/이전·다음
   ========================================================= */

/* 서브 내비 가운데 정렬 (사업영역 목록과 같게 · safe: 넘치면 왼쪽부터 넘김) */
.dt-subnav ul { justify-content: safe center; }

.nowrap { white-space: nowrap; }
.ico-down { transform: rotate(90deg); }
.btn:hover .ico-down { transform: rotate(90deg) translateX(3px); }

/* ---------- 1. 첫 화면 ---------- */
/* 제목 → 역할 카피·버튼 → 영상 프레임 → 핵심 정보 순서.
   위 여백·breadcrumb·eyebrow·제목 크기는 다른 서브페이지와 같은 공통 값(.page-hero, .display)을 그대로 쓰고,
   프레임이 첫 화면에 들어오도록 제목 아래 간격만 줄임 */
.dt-hero { padding-bottom: clamp(20px, 2.6vw, 36px); background: var(--ivory); isolation: isolate; }
.dt-hero-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(48% 60% at 96% 0%, rgba(10, 93, 226, .13), transparent 70%), radial-gradient(40% 50% at 0% 60%, rgba(10, 93, 226, .05), transparent 70%); }
.dt-hero-glow::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(11, 27, 51, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 27, 51, .045) 1px, transparent 1px);
  background-size: 88px 88px;
  -webkit-mask-image: radial-gradient(60% 70% at 85% 0%, #000, transparent 72%); mask-image: radial-gradient(60% 70% at 85% 0%, #000, transparent 72%);
}
.dt-title { color: var(--ink); }
.dt-title .en { font-family: var(--font-en); }
.dt-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: clamp(1.02rem, 1.35vw, 1.22rem); font-weight: 700; letter-spacing: -.025em; color: var(--ink-2); }
.dt-sub i { width: 1px; height: 16px; background: rgba(11, 27, 51, .25); }
.dt-sub-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--blue); color: #fff; box-shadow: 0 10px 24px -12px rgba(10, 93, 226, .8); }
.dt-sub-ico svg { width: 21px; height: 21px; }
/* 운영 회사 알약: [운영] 영문 회사명 [지주회사 · 직접 운영 | 분야] → 그룹 구조로 연결 (보이는 높이 36px, 누르는 영역은 ::after로 44px) */
.dt-corp {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 5px 0 14px; border-radius: 999px;
  background: #fff; border: 1px solid rgba(10, 93, 226, .2); color: var(--ink); font-size: .9rem; font-weight: 700; letter-spacing: -.015em; white-space: nowrap;
  box-shadow: 0 8px 22px -14px rgba(10, 93, 226, .55); transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.dt-corp::after { content: ""; position: absolute; inset: -4px -2px; }
.dt-corp-k { font-size: .76rem; font-weight: 600; color: var(--muted); }
.dt-corp-type { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--blue-50); color: var(--blue-700); font-size: .75rem; font-weight: 700; letter-spacing: 0; white-space: nowrap; }
.dt-corp.is-hold .dt-corp-type, .dt-corp-type.is-hold { background: var(--ink); color: #fff; }
.dt-corp.is-group { padding-right: 14px; }
.dt-corp.is-group::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.dt-corp:hover { border-color: var(--blue); box-shadow: 0 12px 26px -14px rgba(10, 93, 226, .7); transform: translateY(-1px); }

.dt-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px clamp(32px, 5vw, 80px); margin-top: clamp(16px, 1.8vw, 26px); }
.dt-role { margin-top: clamp(12px, 1.2vw, 16px); font-size: clamp(1.15rem, 1.75vw, 1.55rem); font-weight: 600; line-height: 1.5; letter-spacing: -.035em; color: var(--ink); max-width: 32ch; text-wrap: balance; }
.dt-hero-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
.dt-hero-actions .btn--line { background: rgba(255, 255, 255, .7); }
.dt-hero-actions .btn--line:hover { background: #fff; }

/* 핵심 정보: 프레임 아래 가로 띠 */
.dt-facts { margin-top: clamp(22px, 2.8vw, 40px); display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.75fr) minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--line); }
.dt-facts > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 18px clamp(14px, 1.8vw, 26px) 4px; border-left: 1px solid var(--line-2); }
.dt-facts > div:first-child { padding-left: 0; border-left: 0; }
.dt-facts dt { font-size: .82rem; font-weight: 700; color: var(--muted); line-height: 1.5; }
.dt-facts dd { font-size: .98rem; font-weight: 600; line-height: 1.6; color: var(--ink-2); }
.dt-facts dd .en { margin-left: 6px; font-size: .74rem; letter-spacing: .16em; color: var(--blue); }
/* 직접 운영 사업의 서비스 주소 */
.dt-facts dd .dt-site .en { margin: 0; font-size: inherit; letter-spacing: .01em; color: inherit; }
.dt-site { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; color: var(--blue); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(10, 93, 226, .3); text-underline-offset: 4px; transition: text-decoration-color .25s var(--ease); }
.dt-site svg { width: 13px; height: 13px; transition: transform .3s var(--ease); }
.dt-site:hover { text-decoration-color: var(--blue); }
.dt-site:hover svg { transform: translate(2px, -2px); }

.dt-frame-wrap { position: relative; margin-top: clamp(24px, 2.6vw, 36px); }
/* 프레임 중간부터 아래는 흰 바탕 (히어로가 overflow:hidden 이라 가로 넘침 없음) */
.dt-frame-wrap::before { content: ""; position: absolute; z-index: -1; top: 56%; bottom: -100vh; left: calc(50% - 50vw); right: calc(50% - 50vw); background: #fff; }
.dt-frame {
  position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 21 / 9;
  border-radius: var(--radius-lg); background: var(--ivory-2); box-shadow: 0 50px 100px -44px rgba(11, 27, 51, .45);
}
.js .dt-frame[data-reveal] { transform: none; opacity: 1; clip-path: inset(6% 4% 6% 4% round var(--radius-lg)); transition: clip-path 1.4s var(--ease) .15s; }
.js .dt-frame[data-reveal].is-in { clip-path: inset(0 0 0 0 round 0px); }
.dt-frame-media { position: absolute; inset: -8% 0; transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }
/* 사진: 사업별 초점(--fx/--fy, 모바일 --mx) · 등장 때 천천히 당겨지고(1.14→1), 화면에 있는 동안 아주 느리게 숨 쉬듯 확대(Ken Burns) */
.dt-frame-img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); transform-origin: var(--fx, 50%) var(--fy, 50%); }
.js .dt-frame-img { scale: 1.14; transition: scale 2.8s cubic-bezier(.16, .84, .24, 1) .1s; animation: dtKen 24s ease-in-out 2.2s infinite alternate; animation-play-state: paused; }
.js .dt-frame.is-in .dt-frame-img { scale: 1; }
.js .dt-frame.is-live .dt-frame-img { animation-play-state: running; }
@keyframes dtKen { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.07) translate3d(-1.1%, -.7%, 0); } }
.dt-frame::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(10, 20, 38, .6) 0%, rgba(10, 20, 38, .14) 46%, transparent 68%), linear-gradient(0deg, rgba(10, 20, 38, .55) 0%, transparent 48%), linear-gradient(180deg, rgba(10, 20, 38, .28) 0%, transparent 22%); }
.dt-quote { position: absolute; left: clamp(20px, 3.2vw, 48px); bottom: clamp(20px, 3.2vw, 44px); z-index: 2; max-width: 60%; color: #fff; }
.dt-quote-label { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.dt-quote-label::before { content: ""; width: 22px; height: 1.5px; background: currentColor; }
.dt-quote q { display: block; font-size: clamp(1.25rem, 2.4vw, 2.2rem); font-weight: 700; line-height: 1.32; letter-spacing: -.035em; quotes: "\201C" "\201D"; text-shadow: 0 2px 20px rgba(0, 0, 0, .3); text-wrap: balance; max-width: 13em; /* 글자 크기에 맞춘 폭 → 두 줄로 고르게 */ }
/* 문구·버튼은 사진이 열린 뒤 차례로 */
.js .dt-frame :is(.dt-quote, .dt-frame-ctrl) { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease), transform .9s var(--ease); }
.js .dt-frame.is-in .dt-quote { opacity: 1; transform: none; transition-delay: .7s; }
.js .dt-frame.is-in .dt-frame-ctrl { opacity: 1; transform: none; transition-delay: .9s; }
.dt-frame-ctrl { position: absolute; right: clamp(16px, 2.4vw, 32px); bottom: clamp(16px, 2.4vw, 32px); z-index: 2; display: flex; align-items: center; gap: 10px; }
.dt-film-btn {
  display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 20px 0 8px; border-radius: 999px;
  background: rgba(10, 20, 38, .45); border: 1px solid rgba(255, 255, 255, .28); color: #fff; font-weight: 600; font-size: .94rem;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background-color .25s var(--ease), color .25s var(--ease);
}
.dt-film-btn:hover { background: #fff; color: var(--ink); }
.dt-film-btn:hover .play-ring { background: var(--blue); color: #fff; }
.dt-film-btn .play-ring { transition: background-color .25s, color .25s; }

/* ---------- 2. 주요 서비스 ---------- */
.dt-services .sec-head .lead { max-width: 40ch; }
.dt-svc-grid { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 16px; }
.dt-svc {
  position: relative; display: flex; flex-direction: column; min-height: 300px; padding: clamp(24px, 2.4vw, 32px);
  border-radius: var(--radius); background: #fff; border: 1px solid var(--line); overflow: hidden;
  transition: border-color .4s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease);
}
.dt-svc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease); }
.dt-svc:hover { transform: translateY(-6px); border-color: transparent; box-shadow: var(--shadow); }
.dt-svc:hover::before { transform: scaleX(1); }
.dt-svc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dt-svc-ico { display: grid; place-items: center; width: 58px; height: 58px; border-radius: var(--radius-sm); background: var(--blue-50); color: var(--blue); transition: background-color .35s var(--ease), color .35s var(--ease), transform .45s var(--ease); }
.dt-svc-ico svg { width: 28px; height: 28px; }
.dt-svc:hover .dt-svc-ico { background: var(--blue); color: #fff; transform: rotate(-6deg); }
.dt-svc-num { font-family: var(--font-en); font-size: 2.4rem; font-weight: 500; line-height: 1; letter-spacing: -.04em; color: rgba(10, 93, 226, .14); transition: color .35s; }
.dt-svc:hover .dt-svc-num { color: rgba(10, 93, 226, .32); }
.dt-svc-name { margin-top: clamp(44px, 5vw, 76px); font-size: clamp(1.15rem, 1.45vw, 1.32rem); font-weight: 700; line-height: 1.4; letter-spacing: -.035em; }
.dt-svc-desc { margin-top: 10px; font-size: .96rem; line-height: 1.7; color: var(--muted); }
/* 공간(DOOGO SPACE) 세 갈래 카드: WORK · STAY · F&B — 영문 갈래 이름 · 서비스 칩 · '준비 중' 표시 */
.dt-svc.is-pillar .dt-svc-en { display: flex; align-items: center; gap: 8px; margin-top: clamp(36px, 4vw, 60px); }
.dt-svc.is-pillar .dt-svc-en .en { font-size: clamp(1.6rem, 2.2vw, 2rem); font-weight: 600; line-height: 1; letter-spacing: .02em; color: var(--ink); }
.dt-svc.is-pillar .dt-svc-en .soon-tag { margin-left: 4px; }
.dt-svc.is-pillar .dt-svc-name { margin-top: 10px; font-size: 1.02rem; font-weight: 700; color: var(--blue); }
.dt-svc-items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.dt-svc-items li { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--blue-50); color: var(--ink-2); font-size: .9rem; font-weight: 600; white-space: nowrap; }
.dt-svc.is-pillar .dt-svc-desc { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.dt-svc.is-soon .dt-svc-items li { background: transparent; border: 1px dashed rgba(10, 93, 226, .32); color: var(--muted); }
.soon-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; margin-left: 6px; border-radius: 6px; border: 1px dashed rgba(10, 93, 226, .45); background: rgba(10, 93, 226, .06); color: var(--blue-700, #0a4fc0); font-size: .72rem; font-weight: 700; letter-spacing: 0; line-height: 1; white-space: nowrap; vertical-align: .1em; }

.dt-for {
  margin-top: 16px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px 36px;
  padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.8vw, 34px); border-radius: var(--radius); background: var(--ivory);
}
.dt-for-head { display: flex; align-items: center; gap: 14px; }
.dt-for-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: #fff; }
.dt-for-ico svg { width: 22px; height: 22px; }
.dt-for-label { display: grid; font-size: 1.12rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.25; }
.dt-for-label .en { font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.dt-for-list { display: flex; flex-wrap: wrap; gap: 8px; }
.dt-for-list li { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px 0 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: .95rem; font-weight: 600; color: var(--ink-2); }
.dt-for-list .ico { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--blue); color: #fff; flex: none; }

/* ---------- 3. 운영 사이트 (실제 사이트 첫 화면 캡처 · 새 창) ----------
   네이비 카드: 왼쪽 이름·주소·소개 / 오른쪽 브라우저 창 모양 캡처(16:10, 맨 위 사이트 헤더 기준) / 아래 바로가기.
   창은 스크롤해 들어오며 뒤로 누운 상태(--wp 0)에서 바로 서고(--wp 1, business-detail.js),
   카드가 보이면 주소 막대 아래 로딩 줄이 한 번 지나간 뒤 캡처가 흐림 → 선명으로 나타납니다. */
.dt-web { padding-top: 0; }
.dt-web-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "head shot" "foot shot";
  grid-template-rows: auto 1fr; column-gap: clamp(36px, 5vw, 84px);
  padding: clamp(32px, 4.4vw, 64px); border-radius: var(--radius-lg); background: var(--navy); color: #fff;
}
.dt-web-card::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(55% 75% at 92% 8%, rgba(10, 93, 226, .45), transparent 70%), radial-gradient(40% 60% at 0% 100%, rgba(76, 141, 246, .12), transparent 70%); }
.dt-web-card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 64px 64px; -webkit-mask-image: radial-gradient(70% 80% at 85% 40%, #000, transparent 75%); mask-image: radial-gradient(70% 80% at 85% 40%, #000, transparent 75%); }
.dt-web-head { grid-area: head; align-self: end; min-width: 0; }
.dt-web .eyebrow { color: var(--blue-300); }
.dt-web-title { margin-top: 18px; font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 700; line-height: 1.2; letter-spacing: -.04em; }
.dt-web-id { margin-top: clamp(24px, 3vw, 36px); padding-top: clamp(20px, 2.4vw, 28px); border-top: 1px solid var(--line-dark); }
.dt-web-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.dt-web-name .en { font-size: .82rem; font-weight: 600; letter-spacing: .16em; white-space: nowrap; color: var(--on-dark-2); }
.dt-web-kind { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: rgba(111, 162, 242, .16); color: var(--blue-300); font-size: .76rem; font-weight: 700; white-space: nowrap; }
.dt-web-host { margin-top: 10px; font-size: clamp(2.1rem, 3.7vw, 3.3rem); font-weight: 500; line-height: 1.08; letter-spacing: -.035em; overflow-wrap: anywhere; }
.dt-web-host.is-ko { font-weight: 700; letter-spacing: -.05em; }
.dt-web-desc { margin-top: 16px; max-width: 40ch; font-size: 1rem; line-height: 1.7; color: var(--on-dark-2); text-wrap: pretty; }
.dt-web-foot { grid-area: foot; align-self: start; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: clamp(26px, 3vw, 34px); }
.dt-web-foot .btn svg { width: 16px; height: 16px; }
.dt-web-note { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 500; color: var(--on-dark-3); }
.dt-web-note::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #1DB97A; box-shadow: 0 0 0 3px rgba(29, 185, 122, .2); }

.dt-web-shot { grid-area: shot; position: relative; align-self: center; margin: 0; min-width: 0; }
.dt-web-window {
  --wp: 1;
  position: relative; overflow: hidden; border-radius: 16px; background: #fff;
  box-shadow: 0 60px 100px -46px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .1);
  transform-origin: 50% 100%; transform: perspective(1600px) rotateX(calc((1 - var(--wp)) * 14deg)) scale(calc(.92 + var(--wp) * .08));
  transition: translate .6s var(--ease), box-shadow .6s var(--ease);
}
.dt-web-bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 40px; padding: 0 14px; background: #F2F4F8; border-bottom: 1px solid #E2E7EF; }
.dt-web-dots { display: flex; gap: 6px; flex: none; }
.dt-web-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(11, 27, 51, .16); }
.dt-web-dots i:first-child { background: rgba(10, 93, 226, .55); }
.dt-web-dots.is-ghost { visibility: hidden; } /* 주소 알약을 가운데에 두기 위한 균형용 */
.dt-web-url {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; flex: 0 1 300px; height: 26px; padding: 0 14px;
  border-radius: 999px; background: #fff; border: 1px solid #E2E7EF; color: var(--ink-2); font-size: .78rem; font-weight: 600; letter-spacing: .01em;
}
.dt-web-url > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-web-lock { flex: none; width: 11px; height: 11px; color: #1DB97A; }
/* 로딩 줄: 카드가 보이면 한 번 지나감 */
.dt-web-bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--blue-300), var(--blue)); transform: scaleX(0); transform-origin: left; opacity: 0; }
.js .dt-web-card.is-in .dt-web-bar::after { animation: dtLoad 1.3s var(--ease-in-out) .35s both; }
@keyframes dtLoad { 0% { transform: scaleX(0); opacity: 1; } 78% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.dt-web-view { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: #fff; }
.dt-web-view img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transform-origin: 50% 0; transition: transform 1.2s var(--ease); }
.js .dt-web-card[data-reveal] .dt-web-view img { opacity: 0; filter: blur(12px); scale: 1.05; transition: opacity .9s var(--ease) 1.1s, filter 1.1s var(--ease) 1.1s, scale 1.6s var(--ease) 1.1s, transform 1.2s var(--ease); }
.js .dt-web-card[data-reveal].is-in .dt-web-view img { opacity: 1; filter: none; scale: 1; }
/* 캡처를 눌러도 새 창으로 (키보드·화면낭독기는 아래 바로가기 버튼 하나만) */
.dt-web-hit { position: absolute; inset: 0; z-index: 2; border-radius: 16px; }
.dt-web-go {
  position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px;
  background: var(--ink); color: #fff; font-size: .84rem; font-weight: 600; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .6);
  opacity: 0; transform: translateY(8px); transition: opacity .35s var(--ease), transform .45s var(--ease), background-color .3s var(--ease);
}
.dt-web-go svg { width: 14px; height: 14px; }
.dt-web-shot:hover .dt-web-window { translate: 0 -8px; box-shadow: 0 70px 110px -44px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .16); }
.dt-web-shot:hover .dt-web-view img { transform: scale(1.025); }
.dt-web-shot:hover .dt-web-go { opacity: 1; transform: none; background: var(--blue); }
/* 함께 보는 사이트 (14차: 브랜드 커머스 → MAURINZ · 제조업 → DOOGO CONNECT) — 카드 아래 한 줄, 작은 캡처 + 이름 · 주소 · 소개 (카드 전체가 새 창 링크) */
.dt-web-card.has-more { grid-template-areas: "head shot" "foot shot" "more more"; grid-template-rows: auto 1fr auto; }
.dt-web-more { grid-area: more; min-width: 0; margin-top: clamp(36px, 4.4vw, 56px); padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid var(--line-dark); }
.dt-web-more-label { font-size: .8rem; font-weight: 700; letter-spacing: .02em; color: var(--blue-300); }
.dt-web-subs { margin-top: 16px; display: grid; gap: 14px; }
.dt-web-sub {
  display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: center;
  padding: 14px; border-radius: 20px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  transition: background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.dt-web-sub:is(:hover, :focus-visible) { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(141, 182, 255, .45); }
.dt-web-sub-shot { position: relative; display: block; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .8); }
.dt-web-sub-bar { display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 10px; background: #F2F4F8; border-bottom: 1px solid #E2E7EF; }
.dt-web-sub-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(11, 27, 51, .16); }
.dt-web-sub-bar i:first-child { background: rgba(10, 93, 226, .55); }
.dt-web-sub-shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; transition: transform 1s var(--ease); }
.dt-web-sub:hover .dt-web-sub-shot img { transform: scale(1.03); }
.dt-web-sub-body { display: grid; justify-items: start; gap: 8px; min-width: 0; padding-right: clamp(0px, 2vw, 24px); }
.dt-web-sub-host { font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 500; line-height: 1.1; letter-spacing: -.03em; overflow-wrap: anywhere; }
.dt-web-sub-desc { max-width: 52ch; font-size: .95rem; line-height: 1.7; color: var(--on-dark-2); text-wrap: pretty; }
.dt-web-sub-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; height: 40px; padding: 0 16px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; font-size: .88rem; font-weight: 600; transition: background-color .3s var(--ease), color .3s var(--ease); }
.dt-web-sub-go svg { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.dt-web-sub:is(:hover, :focus-visible) .dt-web-sub-go { background: #fff; color: var(--ink); }
.dt-web-sub:is(:hover, :focus-visible) .dt-web-sub-go svg { transform: translate(2px, -2px); }
/* 사이트 링크 여러 개(첫 화면 핵심 정보 띠) */
.dt-sites { display: flex; flex-direction: column; align-items: flex-start; }

/* ---------- 4. 현장 ---------- */
/* 대표 사진(7칸, 4:3이 행 높이를 정함) + 두 번째 사진 또는 브랜드 3D 렌더(5칸, 같은 높이) */
.dt-scene .sec-head .lead { max-width: 40ch; }
.dt-gallery { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; align-items: stretch; }
.dt-shot { position: relative; margin: 0; overflow: hidden; isolation: isolate; border-radius: var(--radius); background: var(--ivory-2); }
.dt-shot:first-child { aspect-ratio: 4 / 3; }
.dt-shot--render { background: linear-gradient(180deg, #D5E2F7 0%, #E7EEF9 100%); }
.dt-shot-media { position: absolute; inset: 0; }
/* --z/--zo: 히어로와 같은 사진을 확대한 '디테일 컷' (배율 · 확대 중심) */
.dt-shot img { width: 100%; height: 100%; object-fit: cover; scale: var(--z, 1); transform-origin: var(--zo, 50% 50%); transition: transform 1.2s var(--ease); }
.dt-shot--photo:hover img { transform: scale(1.04); }
.dt-shot--render:hover img { transform: translateY(-10px) scale(1.02); }
.dt-shot--photo::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(10, 20, 38, .32) 0%, transparent 34%); }
.dt-shot-label {
  position: absolute; left: 16px; top: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px;
  border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--ink); font-size: .86rem; font-weight: 700; letter-spacing: -.02em;
  box-shadow: 0 8px 20px -12px rgba(11, 27, 51, .45);
}
.dt-shot-label .en { font-size: .74rem; font-weight: 600; color: var(--blue); }
/* 등장: 아래에서 위로 열리며 사진이 1.14 → 1로 가라앉음, 라벨은 그다음 */
.js .dt-shot[data-reveal] { opacity: 1; transform: none; clip-path: inset(16% 0 0 0 round var(--radius)); transition: clip-path 1.3s var(--ease) var(--d, 0s); }
.js .dt-shot[data-reveal].is-in { clip-path: inset(0 0 0 0 round var(--radius)); }
.js .dt-shot[data-reveal] img { scale: calc(var(--z, 1) * 1.14); transition: scale 1.9s var(--ease) var(--d, 0s), transform 1.2s var(--ease); }
.js .dt-shot[data-reveal].is-in img { scale: var(--z, 1); }
.js .dt-shot[data-reveal] .dt-shot-label { opacity: 0; transform: translateY(10px); transition: opacity .7s var(--ease) calc(var(--d, 0s) + .55s), transform .7s var(--ease) calc(var(--d, 0s) + .55s); }
.js .dt-shot[data-reveal].is-in .dt-shot-label { opacity: 1; transform: none; }

/* ---------- 5. 관련 브랜드·프로젝트 (네이비) ---------- */
.dt-rel { overflow: hidden; isolation: isolate; }
.dt-rel::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 60% at 100% 0%, rgba(10, 93, 226, .32), transparent 70%), radial-gradient(40% 50% at 0% 100%, rgba(76, 141, 246, .1), transparent 70%); }
.dt-rel-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); align-items: end; gap: 28px clamp(32px, 5vw, 80px); margin-bottom: clamp(40px, 5vw, 72px); }
.dt-rel-head .h2 { max-width: 16ch; }
.dt-rel .accent { color: var(--blue-300); }
.dt-rel-side .lead { max-width: 46ch; }
.dt-rel-actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }
.dt-rel-note { margin-top: 26px; font-size: .85rem; color: var(--on-dark-3); }

/* 단계 흐름: 큰 번호 + 선으로 잇는 타임라인 (2) 서비스의 아이콘 카드와 다른 형식) */
.dt-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-top: 38px; }
.dt-steps::before, .dt-steps::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1.5px; background: var(--line-dark); }
.dt-steps::after { background: linear-gradient(90deg, var(--blue-300), #fff); transform: scaleX(0); transform-origin: left; transition: transform 1.8s var(--ease) .2s; }
.dt-steps.is-in::after { transform: scaleX(1); }
.dt-step {
  position: relative; display: flex; flex-direction: column; padding: clamp(22px, 2.2vw, 30px) clamp(22px, 2.2vw, 28px) clamp(24px, 2.4vw, 30px);
  border-radius: var(--radius); border: 1px solid var(--line-dark); background: transparent;
  transition: background-color .4s var(--ease), border-color .4s var(--ease), opacity .8s var(--ease), transform .8s var(--ease);
}
.js .dt-steps .dt-step { opacity: 0; transform: translateY(26px); transition-delay: 0s, 0s, calc(var(--i, 0) * .14s + .25s), calc(var(--i, 0) * .14s + .25s); }
.js .dt-steps.is-in .dt-step { opacity: 1; transform: none; }
.dt-step::before { content: ""; position: absolute; left: clamp(22px, 2.2vw, 28px); top: -38px; width: 15px; height: 15px; border-radius: 50%; background: var(--navy); border: 2px solid var(--blue-300); }
.dt-step:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .32); }
.dt-step.is-goal { background: var(--blue); border-color: var(--blue); }
.dt-step.is-goal::before { background: #fff; border-color: #fff; box-shadow: 0 0 0 5px rgba(255, 255, 255, .18); }
.dt-step-no { font-family: var(--font-en); font-size: clamp(2.6rem, 3.6vw, 3.4rem); font-weight: 500; line-height: 1; letter-spacing: -.04em; color: var(--blue-300); transition: color .4s var(--ease); }
.dt-step:hover .dt-step-no { color: #fff; }
.dt-step.is-goal .dt-step-no { color: #fff; }
.dt-step-title { margin-top: clamp(22px, 2.6vw, 34px); font-size: clamp(1.25rem, 1.6vw, 1.45rem); font-weight: 700; letter-spacing: -.03em; }
.dt-step-title .en { margin-left: 6px; font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-300); }
.dt-step.is-goal .dt-step-title .en { color: rgba(255, 255, 255, .85); }
.dt-step-desc { margin-top: 10px; font-size: .95rem; line-height: 1.65; color: var(--on-dark-2); }
.dt-step.is-goal .dt-step-desc { color: rgba(255, 255, 255, .9); }
.dt-step-links { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px; }
.dt-step-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-dark); font-size: .88rem; font-weight: 600; color: var(--on-dark-2); transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.dt-step-links a:hover { background: #fff; border-color: #fff; color: var(--ink); }

/* 광고 채널 */
.dt-channels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: clamp(40px, 5vw, 64px); }
.dt-channel { display: flex; flex-direction: column; padding: clamp(24px, 2.6vw, 34px); border-radius: var(--radius); background: #fff; color: var(--ink); transition: transform .45s var(--ease); }
.dt-channel:hover { transform: translateY(-6px); }
.dt-channel-en { font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.dt-channel-ko { margin-top: 10px; font-size: .95rem; font-weight: 700; color: var(--blue); }
.dt-channel p { margin-top: auto; padding-top: 24px; color: var(--ink-2); line-height: 1.6; }

/* 큰 번호 목록(콘텐츠 형식 · 공간) — PLAYD식 번호 리스트, 2) 서비스 카드와 다른 정보(결과물·이런 분께) */
.dt-rows { border-top: 1px solid rgba(255, 255, 255, .22); }
.dt-rows-head, .dt-row { display: grid; grid-template-columns: clamp(64px, 7vw, 110px) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .9fr); gap: 12px 24px; }
.dt-rows-head { padding: 14px 0; border-bottom: 1px solid var(--line-dark); font-size: .8rem; font-weight: 700; color: var(--on-dark-2); }
.dt-rows-head span:first-child { grid-column: 1 / span 2; }
.dt-row { position: relative; align-items: center; padding: clamp(24px, 2.8vw, 38px) 0; border-bottom: 1px solid var(--line-dark); isolation: isolate; }
.dt-row::before { content: ""; position: absolute; top: 0; bottom: 0; left: -18px; right: -18px; z-index: -1; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .05); opacity: 0; transition: opacity .4s var(--ease); }
.dt-row:hover::before { opacity: 1; }
.dt-row-num { font-family: var(--font-en); font-size: clamp(2.2rem, 3.4vw, 3.2rem); font-weight: 500; line-height: 1; letter-spacing: -.04em; color: rgba(255, 255, 255, .3); transition: color .4s var(--ease); }
.dt-row:hover .dt-row-num { color: var(--blue-300); }
.dt-row-title { display: grid; gap: 6px; font-size: clamp(1.5rem, 2.6vw, 2.3rem); font-weight: 700; line-height: 1.15; letter-spacing: -.04em; transition: transform .45s var(--ease); }
.dt-row:hover .dt-row-title { transform: translateX(8px); }
.dt-row-en { font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--blue-300); }
.dt-row-cell { font-size: 1rem; line-height: 1.6; color: var(--on-dark-2); }
.dt-row-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dt-row-link { display: flex; align-items: center; gap: 6px; min-height: 44px; width: max-content; font-weight: 600; color: #fff; }
.dt-row-link .ico { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.dt-row-link:hover .ico { transform: translateX(4px); }

/* NORA STAY: 실제 사이트(norastay.com) 첫 화면에 실린 숙소 사진 일부(sites/space-stay.webp 490×584) + 설명 */
.dt-stay { margin-top: clamp(28px, 3.4vw, 44px); display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); align-items: stretch; border-radius: var(--radius); overflow: hidden; background: var(--navy-2); border: 1px solid var(--line-dark); }
.dt-stay-media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--navy); }
.dt-stay-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%; transition: transform 1.2s var(--ease); }
.dt-stay-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10, 20, 38, .28) 0%, transparent 30%); }
.dt-stay:hover .dt-stay-media img { transform: scale(1.04); }
.dt-stay-badge { position: absolute; left: 16px; top: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; max-width: calc(100% - 32px); height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .9); color: var(--ink-2); font-size: .76rem; font-weight: 600; white-space: nowrap; }
.dt-stay-badge .en { font-weight: 600; letter-spacing: .01em; }
.dt-stay-badge::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); }
.dt-stay-body { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(26px, 3.4vw, 48px); }
.dt-stay .dt-row-num { position: absolute; right: clamp(20px, 2.6vw, 34px); top: clamp(16px, 2vw, 26px); }
.dt-stay-en { font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--blue-300); }
.dt-stay-title { margin-top: 8px; font-size: clamp(1.7rem, 2.8vw, 2.4rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.2; }
.dt-stay-title .en { font-weight: 600; letter-spacing: -.01em; }
.dt-stay-desc { margin-top: 12px; max-width: 40ch; font-size: .98rem; line-height: 1.7; color: var(--on-dark-2); }
.dt-stay-for { margin-top: 18px; padding-top: 14px; width: 100%; border-top: 1px solid var(--line-dark); display: flex; align-items: baseline; gap: 12px; font-size: .94rem; font-weight: 600; color: var(--on-dark-2); }
.dt-stay-for span { flex: none; font-size: .78rem; font-weight: 700; color: var(--blue-300); }
.dt-stay .btn { margin-top: 24px; }

/* DOOGO CLASS 강사 */
.dt-people { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.dt-person { overflow: hidden; border-radius: var(--radius); background: #fff; color: var(--ink); transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.dt-person:hover { transform: translateY(-6px); box-shadow: 0 34px 60px -30px rgba(0, 0, 0, .65); }
.dt-person-photo { position: relative; display: grid; place-items: end center; aspect-ratio: 1 / 1; overflow: hidden; background: #fff; } /* 사진 칸은 순백 (4차) — 아래 본문과는 1px 선으로 구분 */
/* 사진(900×1200 · 배경 없는 상반신): 정사각 칸 아래 91%를 채우고 위 정렬 — 머리 위 여백을 남기고 가슴께에서 잘림 (좁은 칸은 82% — '○주 과정' 알약과 머리가 겹치지 않게) */
.dt-person-photo img { position: absolute; left: 0; bottom: 0; width: 100%; height: 91%; max-width: none; object-fit: cover; object-position: 50% 0; transform-origin: 50% 100%; transition: transform .9s var(--ease); }
.dt-person:hover .dt-person-photo img { transform: scale(1.04); }
.dt-avatar { align-self: center; display: grid; place-items: center; width: 44%; aspect-ratio: 1; border-radius: 50%; background: var(--blue); color: #fff; font-size: clamp(2rem, 3.2vw, 2.8rem); font-weight: 700; box-shadow: 0 0 0 10px rgba(10, 93, 226, .1), 0 0 0 22px rgba(10, 93, 226, .05); transition: transform .6s var(--ease); }
.dt-person:hover .dt-avatar { transform: scale(1.06); }
.dt-person-len { position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--ink); color: #fff; font-size: .78rem; font-weight: 600; }
.dt-person-body { padding: 20px 22px 24px; border-top: 1px solid var(--line-2); background: #fff; }
.dt-person-course { font-size: .86rem; font-weight: 700; color: var(--blue); }
.dt-person-name { margin-top: 6px; font-size: 1.4rem; font-weight: 800; letter-spacing: -.035em; line-height: 1.25; }
.dt-person-sub { margin-top: 4px; font-size: .88rem; color: var(--muted); }
/* 이름 · 회사 대표 두 덩어리: 좁은 카드에서는 가운뎃점 없이 두 줄로 (점이 줄 끝에 홀로 남지 않게) */
.dt-person-sub.is-split > span:last-child { white-space: nowrap; }

/* DOOGOFOOD 도매 플랫폼: 공급사 · 판매자 두 갈래 */
.dt-paths { display: grid; grid-template-columns: minmax(0, 1fr) clamp(150px, 16vw, 230px) minmax(0, 1fr); align-items: stretch; }
.dt-path { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(26px, 3.4vw, 44px); border-radius: var(--radius-lg); background: #fff; color: var(--ink); }
.dt-path-ico { display: grid; place-items: center; width: 58px; height: 58px; border-radius: var(--radius-sm); background: var(--blue-50); color: var(--blue); }
.dt-path-ico svg { width: 28px; height: 28px; }
.dt-path-en { margin-top: clamp(28px, 3.6vw, 44px); font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--blue); }
.dt-path-title { margin-top: 6px; font-size: clamp(1.7rem, 2.6vw, 2.3rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.2; }
.dt-path-who { margin-top: 4px; font-weight: 600; color: var(--muted); }
.dt-path-desc { margin-top: 16px; max-width: 34ch; line-height: 1.7; color: var(--ink-2); }
.dt-path .link-arrow { margin-top: auto; padding-top: 28px; color: var(--blue); min-height: 44px; }
.dt-path-hub { display: flex; align-items: center; justify-content: center; }
.dt-hub-line { flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--blue-300) 0 7px, transparent 7px 14px); background-size: 14px 2px; animation: dtFlow 1s linear infinite; }
.dt-hub-line:last-child { animation-direction: reverse; }
.dt-hub-core { position: relative; flex: none; display: grid; place-content: center; justify-items: center; gap: 4px; text-align: center; width: clamp(104px, 9.4vw, 132px); aspect-ratio: 1; border-radius: 50%; background: var(--blue); color: #fff; font-size: .82rem; font-weight: 700; letter-spacing: .04em; line-height: 1.2; box-shadow: 0 0 0 10px rgba(10, 93, 226, .2), 0 0 0 22px rgba(10, 93, 226, .08); }
.dt-hub-sub { font-size: .66rem; font-weight: 600; letter-spacing: 0; color: rgba(255, 255, 255, .72); }
/* 가운데 플랫폼: 은은한 파동 */
.dt-hub-core::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(111, 162, 242, .55); animation: dtPulse 2.8s var(--ease) infinite; pointer-events: none; }
@keyframes dtPulse { from { transform: scale(1); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
@keyframes dtFlow { to { background-position: 14px 0; } }

/* ---------- 6. 담당 대표 ---------- */
/* 카드 생김새(흰 사진 칸 · 'd' 심볼 · 사진/실루엣 · 이름 · 회사 · 분야 · 링크 · 호버 · 등장)는 base.css '15. 리더 프로필 카드 공통'(.pcard)
   여기서는 배치만: 왼쪽 제목 · 오른쪽 가로형 카드(.pcard--row, 사진 칸 폭 --pc-ph-w) · 카드 안 이 사업 관련 정보(dl)와 안내 문구 */
.dt-leader-grid { display: grid; grid-template-columns: minmax(0, .56fr) minmax(0, 1.44fr); align-items: center; gap: 40px clamp(40px, 5vw, 80px); }
.dt-leader-head .lead { margin-top: 20px; max-width: 30ch; }
.dt-leader-head .link-arrow { margin-top: 26px; min-height: 44px; }
.dt-leader-card { --pc-ph-w: 44%; --pc-r: var(--radius-lg); }
/* 본문이 사진보다 길어지는 폭에서도 사진 칸 아래가 비지 않게: 칸은 최소 3:4, 본문이 더 길면 그 높이까지 (사진은 아래 정렬 cover) */
.dt-leader-card.pcard--row { align-items: stretch; }
.dt-leader-card .pcard-body { padding: clamp(24px, 2.6vw, 40px) clamp(22px, 2.8vw, 44px) 14px; }
.dt-leader-card .pcard-name { font-size: clamp(1.7rem, 1.2rem + 1.3vw, 2.35rem); letter-spacing: -.045em; }
.dt-leader-card .pcard-name small { font-size: .5em; margin-left: 4px; }
.dt-leader-co { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 26px; margin-top: 10px; }
.dt-leader-co .pcard-co { margin-top: 0; font-size: .82rem; }
.dt-corp-type.is-place { background: var(--blue-50); color: var(--blue-700); }
.dt-leader-card .pcard-field { margin-top: 4px; font-size: 1rem; font-weight: 600; color: var(--ink-2); }
/* 그룹사 대표: 맡은 사업이 하는 일 한 줄 (사업 소개 문구 그대로 · 대표의 말로 꾸미지 않음) */
.dt-leader-role { margin-top: 20px; max-width: 30ch; font-size: 1.02rem; font-weight: 600; line-height: 1.6; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.dt-leader-role-k { display: block; margin-bottom: 4px; font-size: .78rem; font-weight: 700; letter-spacing: 0; color: var(--blue); }
.dt-leader-quote { margin-top: 18px; padding-left: 14px; border-left: 2px solid var(--blue); }
.dt-leader-quote p { font-size: 1rem; font-weight: 600; line-height: 1.6; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
/* 이름 묶음은 위, 사업 정보 · 안내 · 링크는 아래에 붙여 사진 높이 안에서 위아래로 정돈 */
.dt-leader-more { width: 100%; margin-top: auto; padding-top: 22px; }
/* 아래 줄: '자세히 보기 →'(왼쪽) · 안내 문구(오른쪽, 좁으면 아래로) */
.dt-leader-foot { margin-top: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; }
.dt-leader-foot::before { flex: 0 0 100%; }
.dt-leader-dl { width: 100%; border-top: 1px solid var(--line-2); }
.dt-leader-dl > div { display: grid; grid-template-columns: 68px minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.dt-leader-dl dt { font-size: .8rem; font-weight: 700; color: var(--blue); }
.dt-leader-dl dd { font-size: .95rem; font-weight: 600; line-height: 1.55; color: var(--ink-2); }
.dt-leader-dl dd .en { font-size: .84rem; letter-spacing: .06em; }
/* 지주회사 직접 운영 사업 두 개(지금 보는 사업은 블루) · 그룹사 주요 서비스: 항목 단위로만 줄바꿈 */
.dt-dd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dt-dd-chip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border-radius: 999px; background: var(--ivory); color: var(--muted); font-size: .78rem; font-weight: 600; white-space: nowrap; }
.dt-leader-dl .dt-dd-chip .en { font-size: .8rem; font-weight: 600; letter-spacing: .03em; color: var(--ink-2); }
.dt-dd-chip.is-cur { background: var(--blue-50); color: var(--blue-700); }
.dt-dd-chip.is-svc { color: var(--ink-2); font-size: .82rem; }
.dt-leader-dl .dt-dd-chip.is-cur .en { color: var(--blue); }
.dt-leader-note { display: flex; align-items: center; gap: 8px; min-height: 40px; font-size: .82rem; font-weight: 500; color: var(--muted); }
.dt-leader-note i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--blue-300); }

/* ---------- 7. 마무리 ---------- */
.dt-ask {
  position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px 56px;
  padding: clamp(30px, 5vw, 72px); border-radius: var(--radius-lg); background: var(--blue); color: #fff;
}
.dt-ask::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 90% at 100% 0%, rgba(255, 255, 255, .22), transparent 60%), linear-gradient(135deg, var(--blue) 0%, #0848B8 100%); }
.dt-ask::after { content: ""; position: absolute; right: -120px; bottom: -160px; z-index: -1; width: 460px; height: 460px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 0 0 60px rgba(255, 255, 255, .04), 0 0 0 120px rgba(255, 255, 255, .03); }
.dt-ask .eyebrow { color: rgba(255, 255, 255, .85); }
.dt-ask-title { margin-top: 18px; font-size: clamp(1.8rem, 3.4vw, 3rem); font-weight: 700; line-height: 1.25; letter-spacing: -.04em; text-wrap: balance; }
.dt-ask-desc { margin-top: 16px; max-width: 46ch; color: rgba(255, 255, 255, .82); }
.dt-ask-actions { display: grid; gap: 10px; }
.dt-ask .btn--white:hover { --btn-bg: var(--ink); --btn-fg: #fff; }

.dt-close { overflow-x: clip; }
.dt-pager { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dt-pager-card { display: grid; grid-template-columns: clamp(130px, 15vw, 210px) minmax(0, 1fr); align-items: center; gap: clamp(16px, 2vw, 28px); padding: 14px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line-2); transition: border-color .3s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease); }
.dt-pager-card:hover { border-color: transparent; box-shadow: var(--shadow); transform: translateY(-4px); }
.dt-pager-card.is-next { grid-template-columns: minmax(0, 1fr) clamp(130px, 15vw, 210px); }
.dt-pager-card.is-next .dt-pager-media { order: 2; }
.dt-pager-card.is-next .dt-pager-body { align-items: flex-end; text-align: right; }
.dt-pager-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-sm); background: var(--ivory-2); }
.dt-pager-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.dt-pager-card:hover .dt-pager-media img { transform: scale(1.07); }
.dt-pager-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-inline: 4px; }
.dt-pager-dir { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; font-weight: 600; color: var(--muted); transition: color .25s; }
.dt-pager-dir svg { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.is-prev .dt-pager-dir svg { transform: rotate(180deg); }
.dt-pager-card:hover .dt-pager-dir { color: var(--blue); }
.is-prev:hover .dt-pager-dir svg { transform: rotate(180deg) translateX(4px); }
.is-next:hover .dt-pager-dir svg { transform: translateX(4px); }
.dt-pager-name { display: inline-flex; align-items: baseline; gap: 10px; font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.2; }
.dt-pager-name .en { font-size: .9rem; font-weight: 600; color: var(--blue); letter-spacing: 0; }
.dt-pager-brand { font-size: .76rem; font-weight: 600; letter-spacing: .16em; color: var(--muted); }

.dt-others { margin-top: clamp(28px, 3.4vw, 40px); padding-top: 26px; border-top: 1px solid rgba(11, 27, 51, .12); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.dt-others-label { font-size: .92rem; font-weight: 700; }
.dt-others-list { display: flex; flex-wrap: wrap; gap: 8px; }
.dt-others-list a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: .93rem; font-weight: 600; color: var(--ink-2); transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.dt-others-list svg { width: 18px; height: 18px; color: var(--blue); transition: color .25s; }
.dt-others-list .en { font-size: .76rem; color: var(--muted); }
.dt-others-list small { font-size: .72rem; letter-spacing: .08em; color: var(--muted); }
.dt-others-list a:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.dt-others-list a:hover svg, .dt-others-list a:hover .en, .dt-others-list a:hover small { color: rgba(255, 255, 255, .75); }
.dt-others-all { margin-left: auto; min-height: 44px; }

/* ---------- 반응형 ---------- */
@media (max-width: 1180px) {
  .dt-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dt-svc-grid[style*="--n:3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dt-people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dt-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dt-steps::before, .dt-steps::after { display: none; }
  .dt-steps { padding-top: 0; }
  .dt-step::before { display: none; }
  .dt-leader-grid { grid-template-columns: 1fr; }
  .dt-leader-card { max-width: 880px; --pc-ph-w: 42%; }
  .dt-stay { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 1024px) {
  .dt-frame { aspect-ratio: 16 / 9; }
  .dt-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dt-facts > div, .dt-facts > div:first-child { padding: 14px 18px 14px 0; border-left: 0; }
  .dt-facts > div:nth-child(n+3) { border-top: 1px solid var(--line-2); }
  .dt-facts > div:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--line-2); }
  .dt-rel-head { grid-template-columns: 1fr; }
  .dt-for { grid-template-columns: 1fr; }
  .dt-for-cta { justify-self: start; }
  .dt-ask { grid-template-columns: 1fr; align-items: start; }
  .dt-ask-actions { grid-auto-flow: column; justify-content: start; }
  .dt-rows-head, .dt-row { grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr); }
  .dt-rows-head { display: none; }
  .dt-rows { border-top-color: var(--line-dark); }
  .dt-row .dt-row-cell:last-child { grid-column: 3; }
  .dt-row .dt-row-cell:nth-of-type(1) { grid-column: 3; grid-row: 1; }
  .dt-row .dt-row-cell:nth-of-type(2) { grid-column: 3; grid-row: 2; }
  .dt-row .dt-row-title { grid-row: 1 / span 2; }
  .dt-row .dt-row-num { grid-row: 1 / span 2; align-self: start; }
  .dt-row-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; display: block; margin-bottom: 2px; font-size: .78rem; font-weight: 700; color: var(--blue-300); }
}
@media (max-width: 860px) {
  .dt-hero-grid { grid-template-columns: 1fr; align-items: start; gap: 22px; }
  /* 운영 사이트: 이름·소개 → 캡처 → 바로가기 순서로 한 칸 */
  .dt-web-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "shot" "foot"; grid-template-rows: none; row-gap: 28px; }
  .dt-web-card.has-more { grid-template-areas: "head" "shot" "foot" "more"; grid-template-rows: none; }
  .dt-web-more { margin-top: 8px; }
  .dt-web-sub { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 12px 12px 18px; }
  .dt-web-sub-body { padding: 0 6px; }
  .dt-web-head { align-self: start; }
  .dt-web-foot { margin-top: 0; }
  .dt-web-desc { max-width: 46ch; }
  .dt-hero-actions { justify-content: flex-start; }
  .dt-svc-grid[style*="--n:3"] { grid-template-columns: 1fr; }
  .dt-svc { min-height: 0; }
  .dt-svc-name { margin-top: 28px; }
  .dt-svc.is-pillar .dt-svc-en { margin-top: 24px; }
  .dt-gallery { gap: 12px; }
  .dt-paths { grid-template-columns: 1fr; }
  .dt-path-hub { flex-direction: column; height: 200px; }
  .dt-hub-line { width: 2px; height: auto; flex: 1; background: repeating-linear-gradient(180deg, var(--blue-300) 0 7px, transparent 7px 14px); background-size: 2px 14px; animation-name: dtFlowY; }
  @keyframes dtFlowY { to { background-position: 0 14px; } }
  .dt-stay { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dt-stay-media { aspect-ratio: auto; min-height: 100%; }
  .dt-stay .dt-stay-desc { font-size: .94rem; }
  .dt-pager { grid-template-columns: 1fr; }
  /* 1열에서는 이전/다음 카드가 옆에서 들어오지 않고 아래에서 올라오게 (등장 전 가로 넘침 방지) */
  .js .dt-pager-card[data-reveal]:not(.is-in) { transform: translateY(28px); }
  .dt-others-all { margin-left: 0; }
}
/* 휴대폰·작은 태블릿(≤760, site.js 버튼이 작아지는 구간과 같음): 사진 문구 왼쪽 끝을 화면 x 128px에 —
   왼쪽 아래 고정 '움직임 멈추기' 버튼(x 12–120px)이 첫 화면 접히는 선 근처의 문구를 덮지 않게 (프레임 왼쪽 = 거터) */
@media (max-width: 760px) {
  .dt-quote { left: calc(128px - var(--gutter)); }
}
@media (max-width: 640px) {
  .dt-sub-ico { width: 36px; height: 36px; border-radius: 11px; }
  .dt-sub-ico svg { width: 19px; height: 19px; }
  .dt-hero-grid { gap: 20px; }
  .dt-hero-actions .btn { flex: 1 1 auto; min-height: 54px; padding-inline: 22px; font-size: 1rem; }
  .dt-facts { grid-template-columns: 1fr; }
  .dt-facts > div, .dt-facts > div:first-child, .dt-facts > div:nth-child(even) { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 13px 0; border-left: 0; border-top: 0; border-bottom: 1px solid var(--line-2); }
  /* 첫 화면 사진: 정사각에 가깝게, 모바일 가로 초점(--mx) */
  .dt-frame { aspect-ratio: 1 / 1.04; border-radius: var(--radius); }
  .dt-frame-img { object-position: var(--mx, 50%) var(--fy, 50%); transform-origin: var(--mx, 50%) var(--fy, 50%); }
  .dt-frame::after { background: linear-gradient(0deg, rgba(10, 20, 38, .78) 0%, rgba(10, 20, 38, .12) 48%, transparent 66%), linear-gradient(180deg, rgba(10, 20, 38, .4) 0%, transparent 24%); }
  /* 문구는 프레임 오른쪽 칸 (왼쪽 끝 = 화면 x 128px, 위 ≤760 규칙) */
  .dt-quote { left: calc(128px - var(--gutter)); right: 18px; bottom: 20px; max-width: none; }
  .dt-quote-label { margin-bottom: 8px; font-size: .7rem; letter-spacing: .1em; white-space: nowrap; }
  .dt-quote-label::before { display: none; }
  .dt-quote q { font-size: 1.18rem; line-height: 1.36; max-width: none; }
  .dt-frame-ctrl { top: 10px; right: 10px; bottom: auto; }
  .dt-film-btn { height: 44px; font-size: .84rem; padding-right: 14px; gap: 8px; padding-left: 6px; }
  .dt-film-btn .play-ring { width: 30px; height: 30px; }
  .dt-svc-grid, .dt-channels { grid-template-columns: 1fr; }
  .dt-web-card { padding: 28px 20px 24px; border-radius: var(--radius); row-gap: 24px; }
  .dt-web-title { margin-top: 14px; font-size: 1.75rem; }
  .dt-web-id { margin-top: 20px; padding-top: 18px; }
  .dt-web-name .en { font-size: .76rem; letter-spacing: .12em; }
  .dt-web-kind { height: 24px; padding: 0 9px; font-size: .72rem; }
  .dt-web-host { margin-top: 8px; font-size: clamp(1.8rem, 9vw, 2.3rem); }
  .dt-web-desc { margin-top: 12px; font-size: .95rem; }
  .dt-web-window { border-radius: 12px; box-shadow: 0 34px 60px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .1); }
  .dt-web-hit { border-radius: 12px; }
  .dt-web-bar { height: 30px; padding: 0 10px; gap: 8px; }
  .dt-web-dots { gap: 4px; }
  .dt-web-dots i { width: 7px; height: 7px; }
  .dt-web-url { height: 20px; padding: 0 10px; gap: 4px; font-size: .68rem; }
  .dt-web-lock { width: 9px; height: 9px; }
  .dt-web-foot { gap: 12px; }
  .dt-web-foot .btn { width: 100%; }
  /* 현장: 1열 — 사진 4:3, 3D 렌더는 정사각 */
  .dt-gallery { grid-template-columns: 1fr; }
  .dt-shot { aspect-ratio: 4 / 3; }
  .dt-shot--render { aspect-ratio: 1 / 1; }
  .dt-shot-label { left: 12px; top: 12px; height: 32px; padding: 0 12px; font-size: .82rem; }
  .dt-steps { grid-template-columns: 1fr; }
  .dt-step-title { margin-top: 16px; }
  .dt-rows-head { display: none; }
  .dt-row { grid-template-columns: 52px minmax(0, 1fr); gap: 10px 14px; padding: 24px 0; }
  .dt-row .dt-row-num { grid-row: 1 / span 3; font-size: 2rem; }
  .dt-row .dt-row-title { grid-column: 2; grid-row: 1; font-size: 1.45rem; }
  .dt-row .dt-row-cell:nth-of-type(1), .dt-row .dt-row-cell:nth-of-type(2), .dt-row .dt-row-cell:last-child { grid-column: 2; grid-row: auto; font-size: .95rem; }
  .dt-row::before { left: -10px; right: -10px; }
  .dt-stay { grid-template-columns: 1fr; }
  .dt-stay-media { aspect-ratio: 4 / 3; min-height: 0; }
  .dt-people { gap: 10px; }
  .dt-person-body { padding: 14px 14px 18px; }
  .dt-person-name { font-size: 1.15rem; }
  .dt-person-sub { font-size: .8rem; }
  .dt-person-sub.is-split > span:not(.dt-sub-dot) { display: block; }
  .dt-person-sub.is-split .dt-sub-dot { display: none; }
  .dt-person-len { left: 10px; top: 10px; height: 26px; padding: 0 9px; font-size: .78rem; }
  .dt-person-photo img { height: 82%; }
  .dt-ask-title br { display: none; }
  .dt-ask-actions { grid-auto-flow: row; justify-content: stretch; }
  .dt-ask-actions .btn { width: 100%; }
  .dt-pager-card, .dt-pager-card.is-next { grid-template-columns: 112px minmax(0, 1fr); padding: 10px; }
  .dt-pager-name { gap: 8px; font-size: clamp(1.2rem, 5.6vw, 1.5rem); white-space: nowrap; } /* 6차: 긴 분야 이름 한 줄 */
  .dt-pager-card.is-next .dt-pager-media { order: 0; }
  .dt-pager-card.is-next .dt-pager-body { align-items: flex-start; text-align: left; }
  .dt-others-list small { display: none; }
}
/* ---------- 6. 담당 대표 — 폭별 배치 (카드 생김새는 그대로)
   ≥1181  왼쪽 제목 · 오른쪽 가로형 카드 | 861–1180 제목 위 · 가로형 카드(최대 880px)
   561–860 왼쪽 제목 · 오른쪽 세로형 카드(사진 위 · 본문 아래) | ≤560 공통 규칙대로 세로형 한 장 */
@media (min-width: 1181px) and (max-width: 1320px) {
  .dt-leader-grid { grid-template-columns: minmax(0, .5fr) minmax(0, 1.5fr); }
}
@media (min-width: 561px) and (max-width: 860px) {
  .dt-leader-grid { grid-template-columns: minmax(0, 1fr) clamp(272px, 46vw, 360px); gap: 32px clamp(24px, 4vw, 40px); }
  .dt-leader-card.pcard--row { max-width: none; flex-direction: column; }
  .dt-leader-card.pcard--row .pcard-ph { flex-basis: auto; border-right: 0; border-bottom: 1px solid var(--line-2); border-radius: var(--pc-r) var(--pc-r) 0 0; }
  .dt-leader-card.pcard--row .pcard-ph::after { top: auto; left: 0; width: auto; height: 2px; transform: scaleX(0); transform-origin: left center; }
  .dt-leader-card.pcard--row:is(:hover, :focus-within) .pcard-ph::after { transform: none; }
  .dt-leader-card .pcard-body { padding: 22px 22px 12px; }
  .dt-leader-card .pcard-name { font-size: 1.7rem; }
}
@media (max-width: 560px) {
  .dt-leader-card .pcard-body { padding: 22px 20px 10px; }
}

/* 마우스가 없는 화면: 캡처 위 '새 창에서 열기' 알약은 생략 (바로 아래 버튼이 같은 링크) */
@media (hover: none) {
  .dt-web-go { display: none; }
}
/* ---------- 움직임 정책 ----------
   OS의 '애니메이션 줄이기' 설정과 관계없이 등장·줌·흐름 모션은 재생합니다(site.js).
   html.motion-off: 사용자가 '움직임 멈추기'를 고른 경우 — 모두 멈추고 바로 보이게
   html.soft-motion: OS 설정이 켜진 기기 — 스크롤 패럴랙스만 끔 */
html.motion-off .dt-frame[data-reveal], html.motion-off .dt-shot[data-reveal] { clip-path: none !important; }
html.motion-off .dt-steps .dt-step { opacity: 1 !important; transform: none !important; }
html.motion-off .dt-frame-media, html.soft-motion .dt-frame-media { transform: none !important; }
html.motion-off .dt-frame-img { scale: 1 !important; animation: none !important; transform: none !important; }
html.motion-off .dt-shot[data-reveal] img { scale: var(--z, 1) !important; transform: none !important; }
html.motion-off .dt-frame :is(.dt-quote, .dt-frame-ctrl), html.motion-off .dt-shot[data-reveal] .dt-shot-label { opacity: 1 !important; transform: none !important; }
html.motion-off .dt-hub-line, html.motion-off .dt-hub-core::after { animation: none !important; }
html.motion-off :is(.dt-row:hover .dt-row-title, .dt-shot:hover img, .dt-stay:hover .dt-stay-media img) { transform: none !important; }
/* 운영 사이트: 창 기울기(스크롤)는 움직임 멈추기와 OS 애니메이션 줄이기 기기 모두에서 끄고, 캡처는 바로 선명하게 */
html.motion-off .dt-web-window, html.soft-motion .dt-web-window { transform: none !important; }
html.motion-off .dt-web-sub:hover .dt-web-sub-shot img { transform: none; }
html.motion-off .dt-web-window { translate: none !important; }
html.motion-off .dt-web-view img { opacity: 1 !important; filter: none !important; scale: 1 !important; transform: none !important; transition: none !important; }
html.motion-off .dt-web-bar::after { animation: none !important; opacity: 0 !important; }
html.motion-off .dt-web-go { transition: none; }
/* 아주 좁은 휴대폰(≤370): 운영 회사 알약이 칸을 넘지 않게 글자·여백을 조금 줄임 (DOOGOBIO NZ · 뉴질랜드 건강식품 제조 · 해외법인) */
@media (max-width: 370px) {
  .dt-corp { gap: 6px; padding-left: 12px; font-size: .84rem; }
  .dt-corp-type { padding: 0 8px; font-size: .7rem; }
}

/* 담당 대표 주요 이력 (19차 · 문원오) */
.dt-career { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.dt-career li { position: relative; padding-left: 12px; line-height: 1.5; word-break: keep-all; }
.dt-career li::before { content: ""; position: absolute; left: 0; top: .66em; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); }