/* =========================================================
   DOOGO GROUP — leadership.css (두고 피플)
   두고 피플(대표이사 4 · 총괄이사 2)을 프로필 카드(.pcard · base.css 공통) 한 그리드로 (문원오 카드 = #ceo) · 짧은 그룹 소개(1 + 5 트리) · 프로필 상세(dialog)
   움직임 멈추기(html.motion-off)를 고르면 모두 멈춘 최종 상태로 보입니다.
   ========================================================= */

/* 앵커 위치 보정 (헤더 높이 + 여유) */
main section[id] { scroll-margin-top: calc(var(--header-h) + 24px); }

/* '확정 후 게시' 같은 안내 문구는 작은 글씨이므로 명도 대비를 확보 (WCAG AA) */
main .note { color: var(--muted); }

/* ---------- HERO ---------- */
.ld-hero { padding-bottom: clamp(56px, 7vw, 104px); isolation: isolate; }
.ld-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(50% 70% at 100% 0%, rgba(10, 93, 226, .09), transparent 70%);
}
.ld-hero-word {
  position: absolute; z-index: -1; right: -.04em; bottom: -.43em; pointer-events: none; white-space: nowrap;
  font-size: clamp(5rem, 15vw, 15.5rem); font-weight: 700; line-height: 1; letter-spacing: -.04em; color: rgba(11, 27, 51, .035);
}
.ld-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: end; gap: 48px clamp(40px, 6vw, 96px); }
.ld-hero .h1 { max-width: none; }
.ld-hero .lead { max-width: 40ch; }
.ld-hero-index { padding: 22px 24px 10px; border-radius: var(--radius-lg); background: rgba(255, 255, 255, .86); border: 1px solid var(--line-2); box-shadow: 0 30px 60px -40px rgba(11, 27, 51, .35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ld-hero-index-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1.5px solid var(--ink); font-size: 1rem; font-weight: 700; letter-spacing: -.02em; }
.ld-hero-index-label .en { order: 2; font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--blue); }
.ld-hero-index ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.ld-hero-index a {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) 16px; align-items: center; gap: 8px; min-height: 60px; padding-block: 8px;
  border-bottom: 1px solid var(--line-2); transition: color .25s var(--ease), padding .35s var(--ease);
}
.ld-hero-index li:nth-last-child(-n+2) a { border-bottom: 0; }
.ld-hero-index .num { font-size: .74rem; font-weight: 600; color: var(--blue); }
.ld-idx-co { display: grid; min-width: 0; line-height: 1.35; }
.ld-idx-co b { font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
.ld-idx-co small { font-size: .78rem; font-weight: 500; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-hero-index .ico { width: 16px; height: 16px; opacity: 0; transform: translateX(-6px); transition: opacity .25s var(--ease), transform .35s var(--ease); }
.ld-hero-index a:hover { color: var(--blue); padding-left: 4px; }
.ld-hero-index a:hover .ico { opacity: 1; transform: none; }

/* 작은 표시 칩 (지주회사 / 뉴질랜드) */
.ld-tag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--ivory-2); color: var(--ink-2); font-size: .7rem; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.ld-tag:empty { display: none; }
.ld-tag svg { width: 12px; height: 12px; }
.ld-tag--hold { background: var(--navy); color: #fff; }
.ld-tag--global { background: var(--blue-50); color: var(--blue-700); }

/* ---------- 두고 피플 ---------- */
/* 섹션 머리: 제목은 왼쪽, 설명은 오른쪽 칸 아래쪽에 맞춰 */
.ld-leaders .sec-head--split .lead { max-width: 46ch; }
@media (min-width: 861px) {
  .ld-leaders .sec-head--split { grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); }
  .ld-leaders .sec-head--split .lead { grid-column: 2; grid-row: 1; align-self: end; }
}

/* ----- 짧은 그룹 소개: 1 + 5 트리 (DOOGO HOLDINGS → 그룹사 5) ----- */
.ld-brief {
  --lc: rgba(111, 162, 242, .45);
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); align-items: center; gap: 28px clamp(32px, 4vw, 64px);
  margin-bottom: 20px; padding: clamp(26px, 3vw, 40px) clamp(24px, 3.2vw, 44px); border-radius: var(--radius-lg);
  background: var(--navy); color: #fff;
}
.ld-brief::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(55% 120% at 100% 0%, rgba(10, 93, 226, .42), transparent 65%), radial-gradient(40% 90% at 0% 100%, rgba(76, 141, 246, .14), transparent 70%);
}
.ld-brief-eyebrow { font-size: .7rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--blue-300); }
.ld-brief-num { display: grid; gap: 8px; margin-top: 12px; }
.ld-brief-num .en { display: flex; align-items: baseline; font-size: clamp(3.4rem, 5vw, 4.6rem); font-weight: 600; line-height: .9; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.ld-brief-num .en i { font-style: normal; font-weight: 300; font-size: .62em; color: var(--blue-300); margin-inline: .1em; }
.ld-brief-unit { font-size: .9rem; font-weight: 600; color: var(--on-dark-2); white-space: nowrap; }
.ld-brief-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 10px; font-size: .88rem; font-weight: 600; color: #fff; transition: color .25s var(--ease); }
.ld-brief-link .ico { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.ld-brief-link:hover { color: var(--blue-300); }
.ld-brief-link:hover .ico { transform: translateX(3px); }

.ld-tree { --stem: 30px; --drop: 22px; --g: 10px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
.ld-tree-root {
  grid-column: 2; position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 16px 8px 8px; border-radius: 999px;
  background: #fff; color: var(--ink); box-shadow: 0 16px 34px -16px rgba(10, 93, 226, .9);
}
.ld-tree-root img { width: 32px; height: 32px; border-radius: 9px; }
.ld-tree-root .en { font-size: 1.02rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.ld-tree-root small { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--navy); color: #fff; font-size: .7rem; font-weight: 700; }
/* 운영 브랜드(DOOGO CLASS · DOOGOFOOD): 뿌리 오른쪽으로 점선 가지 */
.ld-tree-direct { grid-column: 3; justify-self: start; position: relative; display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px 14px; padding-left: 40px; }
.ld-tree-direct::before { content: ""; position: absolute; left: 6px; top: 50%; width: 26px; border-top: 1.5px dashed var(--lc); transform-origin: left center; }
.ld-tree-direct a { display: inline-flex; align-items: center; gap: 3px; min-height: 30px; font-size: .84rem; font-weight: 600; letter-spacing: .02em; color: #fff; white-space: nowrap; transition: color .25s var(--ease); }
.ld-tree-direct a .ico { width: 13px; height: 13px; color: var(--blue-300); transition: transform .3s var(--ease); }
.ld-tree-direct a:hover { color: var(--blue-300); }
.ld-tree-direct a:hover .ico { transform: translate(2px, -2px); }
/* 줄기 → 가로선 → 그룹사마다 내려가는 선 */
.ld-tree-stem { grid-column: 1 / -1; justify-self: center; position: relative; display: block; width: 1.5px; height: var(--stem); background: var(--lc); transform-origin: top center; overflow: hidden; }
.ld-tree-list { grid-column: 1 / -1; position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--g); padding-top: var(--drop); }
.ld-tree-list::before { /* 가로선 (첫 칸 가운데 ~ 마지막 칸 가운데) */
  content: ""; position: absolute; top: 0; height: 1.5px; margin-top: -.75px; background: var(--lc);
  left: calc((100% - 4 * var(--g)) / 10); right: calc((100% - 4 * var(--g)) / 10); transform-origin: center;
}
.ld-tree-list li { position: relative; display: flex; min-width: 0; }
.ld-tree-list li::before { /* 내려가는 선 */
  content: ""; position: absolute; left: 50%; bottom: 100%; width: 1.5px; height: var(--drop); margin-left: -.75px; background: var(--lc); transform-origin: top center;
}
.ld-tree-list li::after { /* 가로선과 만나는 점 */
  content: ""; position: absolute; left: 50%; top: calc(-1 * var(--drop)); width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--blue-300);
}
.ld-tree-list a {
  flex: 1; min-width: 0; display: grid; justify-items: center; gap: 2px; padding: 12px 8px 11px; border-radius: 14px; text-align: center;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--line-dark); color: #fff;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), transform .4s var(--ease);
}
.ld-tree-list b { max-width: 100%; font-size: .9rem; font-weight: 600; letter-spacing: .02em; line-height: 1.3; text-wrap: balance; } /* 말줄임 없이: 좁으면 글자를 줄이고, 그래도 모자라면 두 줄로 */
.ld-tree-list small { font-size: .74rem; font-weight: 600; color: var(--on-dark-3); white-space: nowrap; }
.ld-tree-list a:hover { background: rgba(10, 93, 226, .32); border-color: rgba(111, 162, 242, .6); transform: translateY(-3px); }
/* 흐르는 빛: 그려진 뒤 화면에 보이는 동안만 줄기 → 가지 방향으로 (leadership.js: .is-live) */
.ld-tree-stem::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0 30%, #fff 80%, transparent 100%); transform: translateY(-100%); opacity: 0; }
.ld-brief.is-live .ld-tree-stem::after { animation: ldFlowV 3.6s linear infinite; }
@keyframes ldFlowV { 0% { opacity: 1; transform: translateY(-100%); } 22% { opacity: 1; transform: translateY(100%); } 23%, 100% { opacity: 0; transform: translateY(100%); } }
.ld-brief.is-live .ld-tree-list li::after { animation: ldNodePing 3.6s var(--ease) infinite; animation-delay: calc(.75s + var(--k) * .08s); }
@keyframes ldNodePing { 0% { box-shadow: 0 0 0 0 rgba(111, 162, 242, .7); } 40%, 100% { box-shadow: 0 0 0 9px rgba(111, 162, 242, 0); } }

/* 등장 (leadership.js: .is-armed → 화면 30% 들어오면 .is-play, 완전히 벗어나면 되돌려 다시 재생) */
.ld-brief.is-armed .ld-tree-root { opacity: 0; transform: translateY(10px) scale(.94); }
.ld-brief.is-armed .ld-tree-direct::before { transform: scaleX(0); }
.ld-brief.is-armed .ld-tree-direct > * { opacity: 0; transform: translateX(-8px); }
.ld-brief.is-armed .ld-tree-stem { transform: scaleY(0); }
.ld-brief.is-armed .ld-tree-list::before { transform: scaleX(0); }
.ld-brief.is-armed .ld-tree-list li::before { transform: scaleY(0); }
.ld-brief.is-armed .ld-tree-list li::after { transform: scale(0); }
.ld-brief.is-armed .ld-tree-list a { opacity: 0; transform: translateY(14px); }
.ld-brief.is-armed .ld-brief-head > * { opacity: 0; transform: translateY(16px); }
.ld-brief.is-play .ld-brief-head > * { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .8s var(--ease); }
.ld-brief.is-play .ld-brief-head > :nth-child(2) { transition-delay: .08s; }
.ld-brief.is-play .ld-brief-head > :nth-child(3) { transition-delay: .16s; }
.ld-brief.is-play .ld-tree-root { opacity: 1; transform: none; transition: opacity .6s var(--ease) .1s, transform .8s cubic-bezier(.2, 1.3, .4, 1) .1s; }
.ld-brief.is-play .ld-tree-direct::before { transform: none; transition: transform .45s var(--ease-in-out) .5s; }
.ld-brief.is-play .ld-tree-direct > * { opacity: 1; transform: none; transition: opacity .5s var(--ease) .75s, transform .6s var(--ease) .75s; }
.ld-brief.is-play .ld-tree-stem { transform: none; transition: transform .4s var(--ease-in-out) .5s; }
.ld-brief.is-play .ld-tree-list::before { transform: none; transition: transform .55s var(--ease-in-out) .85s; }
.ld-brief.is-play .ld-tree-list li::before { transform: none; transition: transform .3s var(--ease) calc(1.25s + var(--k) * .12s); }
.ld-brief.is-play .ld-tree-list li::after { transform: none; transition: transform .35s cubic-bezier(.2, 1.4, .4, 1) calc(1.2s + var(--k) * .12s); }
.ld-brief.is-play .ld-tree-list a { opacity: 1; transform: none; transition: opacity .55s var(--ease) calc(1.4s + var(--k) * .12s), transform .7s var(--ease) calc(1.4s + var(--k) * .12s), background-color .3s var(--ease), border-color .3s var(--ease); }
.ld-brief.is-play .ld-tree-list a:hover { transform: translateY(-3px); transition-delay: 0s; }

/* ----- 프로필 카드(.pcard · 생김새는 base.css 공통)를 크게 -----
   데스크톱 3열 × 2줄(카드 약 370–410px · 위 제목·소개와 같은 폭) · 태블릿 2열 · 휴대폰(680px 이하) 가로 스와이프. 모든 줄 · 모든 카드가 같은 높이.
   카드 어디를 눌러도 상세(dialog)가 열리고(.pcard-stretch), 운영 브랜드 · 사업 보기 링크는 그 위로 올라옴 */
.ld-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 48px 40px; margin-top: clamp(48px, 5vw, 72px); }
.ld-card { scroll-margin-top: calc(var(--header-h) + 24px); }
.ld-card.pcard { --pc-r: 22px; }
.ld-card.pcard:hover, .ld-card.pcard:focus-within { box-shadow: 0 34px 60px -38px rgba(11, 27, 51, .38); }
.ld-card:target { box-shadow: 0 0 0 2px var(--blue), 0 34px 60px -38px rgba(11, 27, 51, .38); }
.ld-idx { position: absolute; z-index: 1; left: 20px; top: 18px; font-size: .9rem; font-weight: 600; line-height: 1; color: var(--ink); }
.ld-idx small { margin-left: 3px; font-size: .7rem; color: rgba(11, 27, 51, .45); }
.ld-card .pcard-soon { left: 16px; bottom: 16px; }
.ld-card .pcard-body { padding: 24px 26px 14px; }
.ld-card .pcard-name { font-size: clamp(1.45rem, 1.2rem + .7vw, 1.8rem); letter-spacing: -.045em; }
.ld-card .pcard-name small { font-size: .56em; }
.ld-co-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 24px; margin-top: 8px; }
.ld-co-line .pcard-co { margin-top: 0; font-size: .8rem; }
.ld-card .pcard-field { margin-top: 4px; font-size: .95rem; color: var(--ink-2); font-weight: 600; }
/* 역할 한 줄: 주요 서비스 (DOOGO HOLDINGS 는 운영 브랜드 링크) */
.ld-card-facts { width: 100%; margin-top: 10px; }
.ld-card-facts > div { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; min-height: 30px; }
.ld-card-facts dt { flex: none; font-size: .78rem; font-weight: 600; color: var(--muted); }
.ld-card-facts dd { font-size: .9rem; font-weight: 500; letter-spacing: -.015em; color: var(--muted); }
/* 운영 브랜드(DOOGO CLASS · DOOGOFOOD): 실제 사이트로 (새 창) */
.ld-direct { display: flex; flex-wrap: wrap; align-items: center; gap: 0 9px; }
.ld-direct a { display: inline-flex; align-items: center; min-height: 34px; font-size: .84rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap; color: var(--blue-700); background: linear-gradient(currentColor, currentColor) 0 calc(100% - 7px) / 0 1px no-repeat; transition: background-size .35s var(--ease), color .25s var(--ease); }
.ld-direct a:hover { background-size: 100% 1px; color: var(--blue); }
.ld-direct a .ico { flex: none; width: 12px; height: 12px; margin-left: 3px; transition: transform .3s var(--ease); } /* 새 창 외부 링크 표시 */
.ld-direct a:hover .ico { transform: translate(2px, -2px); }
.ld-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--muted-2); }
/* 아래: 구분선(공통) → 자세히 보기(상세 열기) · 사업 보기 */
.ld-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px; }
.ld-card-foot::before { flex: 0 0 100%; margin-top: 18px; }
.ld-go { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px 0 14px; border-radius: 999px; border: 1px solid var(--line); font-size: .8rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); }
.ld-go .ico { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.ld-go:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.ld-go:hover .ico { transform: translateX(2px); }
.ld-note { margin-top: 32px; display: flex; align-items: flex-start; gap: 8px; }
.ld-note::before { content: "i"; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; border: 1px solid currentColor; font-family: var(--font-en); font-size: .7rem; font-weight: 600; flex: none; }
/* 휴대폰 가로 스와이프: 번호 · 진행 막대 · 이전/다음 (leadership.js 가 넘칠 때만 보여 줌) */
.ld-ctrl { display: none; align-items: center; gap: 14px; margin-top: 4px; }
.ld-ctrl-count { flex: none; min-width: 56px; font-size: .86rem; color: var(--muted); }
.ld-ctrl-count b { font-weight: 600; color: var(--ink); }
.ld-ctrl-bar { position: relative; flex: 1; height: 2px; border-radius: 2px; overflow: hidden; background: var(--line); }
.ld-ctrl-bar i { position: absolute; inset: 0; background: var(--ink); transform-origin: left center; transform: scaleX(var(--p, .2)); transition: transform .35s var(--ease); }
.ld-ctrl-btns { display: flex; gap: 8px; }
.ld-ctrl-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid rgba(11, 27, 51, .16); color: var(--ink); transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), opacity .3s var(--ease); }
.ld-ctrl-btn .ico { width: 18px; height: 18px; }
.ld-ctrl-btn[data-ld-prev] .ico { transform: rotate(180deg); }
.ld-ctrl-btn:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: #fff; }
.ld-ctrl-btn:disabled { opacity: .35; cursor: default; }

/* ---------- 대표 상세 (dialog) ---------- */
.ld-modal {
  width: min(940px, calc(100vw - 48px)); max-width: none; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
  padding: 0; border: 0; border-radius: 28px; background: #fff; color: var(--ink); overflow: hidden; box-shadow: var(--shadow-lg);
}
.ld-modal::backdrop { background: rgba(5, 12, 26, .62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.ld-modal[open] { animation: ldModalIn .55s var(--ease); }
.ld-modal[open]::backdrop { animation: ldFadeIn .4s var(--ease); }
.ld-modal.is-closing { animation: ldModalOut .26s var(--ease-in-out) forwards; }
.ld-modal.is-closing::backdrop { animation: ldFadeOut .26s var(--ease-in-out) forwards; }
@keyframes ldModalIn { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ldModalOut { to { opacity: 0; transform: translateY(14px) scale(.98); } }
@keyframes ldFadeIn { from { opacity: 0; } }
@keyframes ldFadeOut { to { opacity: 0; } }
.ld-m-in { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: 560px; max-height: inherit; overflow: auto; overscroll-behavior: contain; }
/* 상세 사진 칸도 카드와 같은 생김새(.pcard-ph): 순백 + 두고 심볼 + 사진(아래 정렬) · 없으면 실루엣 + '사진 준비 중' */
.ld-m-visual.pcard-ph { aspect-ratio: auto; min-height: 100%; border-radius: 0; border-bottom: 0; border-right: 1px solid var(--line-2); }
.ld-m-visual .pcard-img[hidden], .ld-m-visual.has-photo .pcard-sil, .ld-m-visual.has-photo .pcard-soon { display: none; }
.ld-m-visual .pcard-soon { left: 50%; bottom: 22px; translate: -50% 0; }
.ld-m-body { display: flex; flex-direction: column; align-items: flex-start; padding: 52px 44px 104px; }
.ld-m-co { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 1.05rem; font-weight: 600; color: var(--ink-2); }
.ld-m-co .ld-co { letter-spacing: .1em; font-size: .86rem; color: var(--blue); }
.ld-m-name { margin-top: 8px; font-size: clamp(2.3rem, 4.2vw, 3.2rem); font-weight: 700; line-height: 1.1; letter-spacing: -.045em; }
.ld-m-name small { font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; color: var(--muted); }
.ld-m-facts { width: 100%; margin-top: 28px; border-top: 1.5px solid var(--ink); }
.ld-m-facts > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 52px; padding-block: 6px; border-bottom: 1px solid var(--line); }
.ld-m-facts > div[hidden] { display: none; }
.ld-m-facts dt { font-size: .86rem; color: var(--muted); }
.ld-m-facts dd { font-weight: 600; letter-spacing: -.015em; line-height: 1.6; }
.ld-m-facts dd.is-pending { font-weight: 500; color: var(--muted); }
.ld-m-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; }
.ld-m-area, .ld-m-ext { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--blue); }
.ld-m-ext { letter-spacing: .02em; color: var(--blue-700); }
.ld-m-area .ico, .ld-m-ext .ico { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.ld-m-area:hover .ico { transform: translateX(3px); }
.ld-m-ext:hover .ico { transform: translate(2px, -2px); }
.ld-m-quote { margin-top: 22px; padding-left: 16px; border-left: 3px solid var(--blue); }
.ld-m-quote[hidden] { display: none; }
.ld-m-quote p { font-size: 1.12rem; font-weight: 700; line-height: 1.55; letter-spacing: -.03em; }
.ld-m-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.ld-m-nav { position: absolute; right: 32px; bottom: 26px; display: flex; align-items: center; gap: 14px; }
.ld-m-step { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); color: var(--ink); transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease); }
.ld-m-step:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.ld-m-step .ico { width: 18px; height: 18px; }
.ld-m-step[data-m-step="-1"] .ico { transform: rotate(180deg); }
.ld-m-count { min-width: 64px; text-align: center; font-size: .9rem; color: var(--muted); }
.ld-m-count b { font-weight: 600; color: var(--ink); }
.ld-m-close { position: absolute; z-index: 3; right: 18px; top: 18px; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--ivory); color: var(--ink); transition: background-color .25s var(--ease), color .25s var(--ease); }
.ld-m-close:hover { background: var(--ink); color: #fff; }
.ld-m-close svg { width: 20px; height: 20px; }
/* 이전/다음 대표로 바꿀 때 내용이 살짝 빠졌다 들어옵니다 */
.ld-m-body > * { transition: opacity .22s var(--ease), transform .3s var(--ease); }
.ld-m-visual :is(.pcard-img, .pcard-sil) { transition: opacity .22s var(--ease), translate .3s var(--ease); }
.ld-m-in.is-swap .ld-m-body > * { opacity: 0; transform: translateY(8px); }
.ld-m-in.is-swap .ld-m-visual :is(.pcard-img, .pcard-sil) { opacity: 0; translate: 0 10px; }
html.is-locked .ld-modal { overscroll-behavior: contain; }

/* ---------- 반응형 ---------- */
/* 1260px 이하: '회사로 찾기'를 제목 아래 한 줄 너비로 펼쳐 영문 회사명이 잘리지 않게 (3열 × 2줄) */
@media (max-width: 1260px) {
  .ld-hero-grid { grid-template-columns: 1fr; }
  .ld-hero-index { max-width: none; }
  .ld-hero-index ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ld-hero-index li:nth-last-child(3) a { border-bottom: 0; }
}
/* 1240px 이하: 그룹 소개를 한 칸으로 — 숫자 줄 위, 트리는 패널 전체 너비 (그룹사 이름이 줄바꿈 없이 한 줄) */
@media (max-width: 1240px) {
  .ld-brief { grid-template-columns: 1fr; gap: 26px; }
  .ld-brief-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 28px; }
  .ld-brief-head .ld-brief-eyebrow { flex-basis: 100%; }
  .ld-brief-num { grid-auto-flow: column; align-items: baseline; gap: 14px; margin-top: 6px; }
  .ld-brief-link { margin: 0 0 0 auto; }
}
@media (max-width: 1180px) {
  .ld-grid { gap: 40px 24px; }
  .ld-card .pcard-body { padding: 22px 22px 12px; }
  .ld-direct { gap: 0 8px; }
  .ld-direct a { font-size: .8rem; letter-spacing: 0; }
}
/* 태블릿: 2열 (카드 약 340–390px · 넓은 태블릿은 가운데) */
@media (max-width: 1024px) {
  .ld-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; max-width: 800px; margin-inline: auto; }
}
@media (max-width: 860px) {
  .ld-hero-index { max-width: 640px; }
  .ld-hero-index ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ld-hero-index li:nth-last-child(3) a { border-bottom: 1px solid var(--line-2); }
  .ld-tree { --g: 8px; }
  .ld-tree-list a { padding-inline: 4px; }
  .ld-tree-list b { font-size: .78rem; letter-spacing: 0; }
  .ld-tree-root .en { font-size: .94rem; }
}
/* 태블릿 세로(681–860px): 운영 브랜드 두 링크를 뿌리 오른쪽에 세로로 쌓아 패널 안에 둠 (첫 링크가 점선 높이) */
@media (max-width: 860px) and (min-width: 681px) {
  .ld-tree-root { grid-row: 1; }
  .ld-tree-direct { grid-row: 1 / span 2; align-self: start; grid-template-columns: auto; gap: 0; margin-top: 11px; padding-left: 34px; }
  .ld-tree-direct::before { top: 13px; width: 22px; }
  .ld-tree-direct a { min-height: 26px; font-size: .8rem; }
  .ld-tree-stem { grid-row: 2; }
  .ld-tree-list { grid-row: 3; }
}
@media (max-width: 720px) and (min-width: 681px) { .ld-tree-list b { font-size: .74rem; } }
/* 휴대폰: 가로 스와이프 (카드 약 78vw → 다음 카드가 살짝 보임) · 넘침은 카드 줄 안에서만 */
@media (max-width: 680px) {
  .ld-grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(78vw, 340px); grid-auto-rows: auto; gap: 14px;
    max-width: none; margin: 36px calc(var(--gutter) * -1) 0; padding: 6px var(--gutter) 26px;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none;
  }
  .ld-grid::-webkit-scrollbar { display: none; }
  .ld-card { scroll-snap-align: start; }
  .ld-ctrl:not([hidden]) { display: flex; }
  .ld-card .pcard-body { padding: 20px 20px 10px; }
  .ld-note { margin-top: 20px; }
}
@media (max-width: 760px) {
  .ld-modal { inset: auto 0 0 0; margin: 0; width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: 24px 24px 0 0; }
  .ld-modal[open] { animation: ldSheetIn .5s var(--ease); }
  .ld-modal.is-closing { animation: ldSheetOut .26s var(--ease-in-out) forwards; }
  @keyframes ldSheetIn { from { transform: translateY(100%); } to { transform: none; } }
  @keyframes ldSheetOut { to { transform: translateY(100%); } }
  .ld-m-in { grid-template-columns: 1fr; min-height: 0; }
  /* 휴대폰 상세: 카드와 같은 상반신(머리 위 여백 ~ 허리)이 잘리지 않고 다 보이게 — 사진 전체를 칸 높이에 맞춰 넣음 */
  .ld-m-visual.pcard-ph { height: clamp(320px, 52vh, 440px); min-height: 0; border-right: 0; border-bottom: 1px solid var(--line-2); }
  .ld-m-visual.pcard-ph::before { width: auto; height: 74%; top: 10%; }
  .ld-m-visual :is(.pcard-img, .pcard-sil) { height: 100%; }
  .ld-m-visual .pcard-img { object-fit: contain; object-position: 50% 100%; }
  .ld-m-visual .pcard-sil { -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: 50% 100%; mask-position: 50% 100%; }
  .ld-m-visual .pcard-soon { bottom: 14px; }
  .ld-m-body { padding: 26px 20px 28px; }
  .ld-m-name { font-size: 2.2rem; }
  .ld-m-facts > div { grid-template-columns: 76px minmax(0, 1fr); min-height: 48px; }
  .ld-m-quote p { font-size: 1.02rem; }
  .ld-m-actions .btn { flex: 1 1 auto; }
  .ld-m-nav { position: sticky; z-index: 2; right: auto; bottom: 0; justify-content: space-between; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .94); border-top: 1px solid var(--line-2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .ld-m-close { right: 14px; top: 14px; background: rgba(255, 255, 255, .86); }
}
/* 모바일 트리: 뿌리 아래로 세로 줄기 → 그룹사마다 가지 */
@media (max-width: 680px) {
  .ld-tree { --spine: 23px; --arm: 18px; grid-template-columns: 1fr; justify-items: start; }
  .ld-tree::before { /* 세로 줄기: 뿌리 아래 ~ 마지막 그룹사 가운데 */
    content: ""; position: absolute; left: var(--spine); top: 48px; bottom: 22px; width: 1.5px; margin-left: -.75px; background: var(--lc); transform-origin: top center;
  }
  .ld-tree-root { grid-column: 1; }
  .ld-tree-direct { grid-column: 1; margin-top: 8px; padding-left: calc(var(--spine) + var(--arm) + 4px); }
  .ld-tree-direct::before { left: var(--spine); width: calc(var(--arm) + 2px); }
  .ld-tree-stem { display: none; }
  .ld-tree-list { grid-column: 1; width: 100%; grid-template-columns: 1fr; gap: 8px; margin-top: 10px; padding: 0 0 0 calc(var(--spine) + var(--arm)); }
  .ld-tree-list::before { display: none; }
  .ld-tree-list li::before { left: calc(-1 * var(--arm)); bottom: auto; top: 50%; width: var(--arm); height: 1.5px; margin: -.75px 0 0; transform-origin: left center; }
  .ld-tree-list li::after { left: calc(-1 * var(--arm)); top: 50%; }
  .ld-tree-list a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 8px 14px; text-align: left; }
  .ld-brief.is-armed .ld-tree::before { transform: scaleY(0); }
  .ld-brief.is-play .ld-tree::before { transform: none; transition: transform 1s var(--ease-in-out) .45s; }
  .ld-brief.is-armed .ld-tree-list li::before { transform: scaleX(0); }
  .ld-brief.is-play .ld-tree-list li::before { transform: none; transition: transform .3s var(--ease) calc(.7s + var(--k) * .14s); }
  .ld-brief.is-play .ld-tree-list li::after { transition-delay: calc(.65s + var(--k) * .14s); }
  .ld-brief.is-armed .ld-tree-list a { transform: translateX(-12px); }
  .ld-brief.is-play .ld-tree-list a { transition-delay: calc(.85s + var(--k) * .14s), calc(.85s + var(--k) * .14s), 0s, 0s; }
  .ld-brief.is-play .ld-tree-list a:hover { transform: none; }
}
@media (max-width: 560px) {
  .ld-hero-word { bottom: -.12em; }
  .ld-hero-index { padding: 18px 16px 6px; }
  .ld-hero-index ul { column-gap: 12px; }
  .ld-hero-index a { grid-template-columns: 22px minmax(0, 1fr); min-height: 56px; gap: 6px; }
  .ld-hero-index .ico { display: none; }
  .ld-idx-co b { font-size: .8rem; letter-spacing: 0; }
  .ld-idx-co small { font-size: .72rem; }

  .ld-brief { padding: 24px 18px 22px; border-radius: 22px; gap: 22px; }
  .ld-brief-num .en { font-size: 3.2rem; }
  .ld-brief-link { margin: 0; }
  .ld-tree-root { min-height: 44px; padding: 6px 12px 6px 6px; gap: 8px; }
  .ld-tree-root img { width: 32px; height: 32px; }
  .ld-tree-root .en { font-size: .94rem; }
}
/* 아주 좁은 폭(≤400px): '회사로 찾기' 번호 칸을 빼서 영문 회사명이 잘리지 않게 */
@media (max-width: 400px) {
  .ld-hero-index a { grid-template-columns: minmax(0, 1fr); padding-block: 9px; }
  .ld-hero-index .num { display: none; }
  .ld-idx-co small { font-size: .7rem; }
}

/* ---------- 움직임 멈추기 (사용자가 왼쪽 아래 버튼으로 고른 경우만) ---------- */
html.motion-off .ld-brief .ld-brief-head > *, html.motion-off .ld-brief .ld-tree-root, html.motion-off .ld-brief .ld-tree-direct > *,
html.motion-off .ld-brief .ld-tree-list a { opacity: 1 !important; transform: none !important; }
html.motion-off .ld-brief .ld-tree-direct::before, html.motion-off .ld-brief .ld-tree-stem, html.motion-off .ld-brief .ld-tree-list::before,
html.motion-off .ld-brief .ld-tree-list li::before, html.motion-off .ld-brief .ld-tree-list li::after, html.motion-off .ld-brief .ld-tree::before { transform: none !important; }
html.motion-off .ld-tree-stem::after, html.motion-off .ld-tree-list li::after { animation: none !important; }
html.motion-off .ld-modal[open], html.motion-off .ld-modal[open]::backdrop, html.motion-off .ld-modal.is-closing, html.motion-off .ld-modal.is-closing::backdrop { animation: none !important; }
html.motion-off .ld-m-in.is-swap .ld-m-body > * { opacity: 1; transform: none; }
html.motion-off .ld-m-in.is-swap .ld-m-visual :is(.pcard-img, .pcard-sil) { opacity: 1; translate: none; }
html.motion-off .ld-grid { scroll-behavior: auto; }

/* ---------- 이력 (19차 · 문원오 대표) ---------- */
.ld-card-facts > .ld-career-row { align-items: flex-start; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line-2); }
.ld-career-row dt { padding-top: 2px; }
.ld-career { display: grid; gap: 3px; flex: 1 1 200px; min-width: 0; }
.ld-career li, .ld-m-career li { position: relative; padding-left: 12px; font-size: .86rem; line-height: 1.5; color: var(--ink-2); word-break: keep-all; }
.ld-career li::before, .ld-m-career li::before { content: ""; position: absolute; left: 0; top: .66em; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); }
.ld-m-career { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.ld-m-career li { font-size: .92rem; color: var(--ink); }