/* TMG — design v1-modern
   톤: 따뜻한 미색 바탕 + 짙은 먹색 글자, 큰 타이포, 둥근 모서리, 절제된 스크롤 연출 */

/* 색·글꼴·크기 토큰은 tokens.css (var(--tmg-*)) */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--tmg-bg);
  color: var(--tmg-ink);
  font-family: var(--tmg-font);
  font-size: var(--tmg-fs-body-lg);
  line-height: 1.65;
  letter-spacing: -0.01em;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--tmg-ink); color: var(--tmg-bg); }

.wrap { width: var(--tmg-wrap); margin-inline: auto; }
main { display: block; }

/* ── 타이포 ── */
.eyebrow {
  font-size: var(--tmg-fs-sm); font-weight: var(--tmg-fw-semibold); letter-spacing: var(--tmg-ls-caps); text-transform: uppercase;
  color: var(--tmg-mute); display: flex; align-items: center; gap: 12px;
}
.eyebrow::before { content: ""; flex: none; width: 30px; height: 7px; border-inline: 1px solid currentColor; background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat; opacity: .6; }   /* 도면 치수선 모양 */
.eyebrow a:hover { color: var(--tmg-ink); }
.display {
  font-size: var(--tmg-fs-display); line-height: 1.02; font-weight: var(--tmg-fw-semibold); letter-spacing: var(--tmg-ls-display);
}
.display-md { font-size: var(--tmg-fs-display-md); }
.h2 { font-size: var(--tmg-fs-h2); line-height: 1.08; font-weight: var(--tmg-fw-semibold); letter-spacing: var(--tmg-ls-heading); }
.h3 { font-size: var(--tmg-fs-h3); line-height: 1.3; font-weight: var(--tmg-fw-semibold); letter-spacing: var(--tmg-ls-title); }
.line { display: block; overflow: hidden; padding-bottom: .06em; }
.line > span { display: inline-block; max-width: 100%; }
.display, .hero-title, .h2 { overflow-wrap: anywhere; } /* 띄어쓰기 없는 긴 단어가 화면을 넘을 때만 줄바꿈 */

/* ── 버튼·링크 ── */
.btn {
  display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 28px;
  border-radius: 999px; background: var(--tmg-ink); color: var(--tmg-bg); font-weight: var(--tmg-fw-semibold); font-size: var(--tmg-fs-body);
  transition: transform .4s var(--tmg-ease), background .3s;
}
.btn b { font-weight: var(--tmg-fw-semibold); opacity: .55; }
.btn:hover { transform: translateY(-2px); background: var(--tmg-black); }
.btn-light { background: var(--tmg-bg); color: var(--tmg-ink); }
.btn-light:hover { background: var(--tmg-white); }
.link-arrow {
  display: inline-flex; align-items: center; gap: 10px; font-weight: var(--tmg-fw-semibold); font-size: var(--tmg-fs-body-sm);
  border-bottom: 1px solid currentColor; padding-bottom: 4px;
}
.link-arrow::after { content: "→"; transition: transform .35s var(--tmg-ease); }
.link-arrow:hover::after { transform: translateX(5px); }

/* ── 헤더 ── */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50; height: 84px; padding: 0 var(--tmg-edge);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  color: var(--tmg-ink); transition: background .4s, color .4s, transform .5s var(--tmg-ease), height .4s;
}
.site-header.is-over { color: var(--tmg-white); }
.site-header.is-scrolled { background: color-mix(in srgb, var(--tmg-on-dark) 86%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--tmg-ink); height: 72px; }
.site-header.is-hidden { transform: translateY(-100%); }
.brand { display: flex; align-items: center; gap: 12px; justify-self: start; }
.brand img { width: 74px; height: auto; }
.brand-text { font-size: var(--tmg-fs-2xs); line-height: 1.25; font-weight: var(--tmg-fw-semibold); letter-spacing: -0.01em; opacity: .85; }
/* 메뉴 글자: 눈에 잘 띄게 크고 굵게(2026-10-13 — 기존 tmg.kr 헤더처럼) */
.nav { display: flex; gap: clamp(24px, 3.2vw, 60px); font-size: var(--tmg-fs-nav); font-weight: var(--tmg-fw-bold); letter-spacing: -0.01em; }
.nav a { position: relative; padding: 6px 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--tmg-ease); }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.header-tools { justify-self: end; display: flex; align-items: center; gap: 14px; }

/* KO/EN 토글 */
.lang-toggle {
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; align-items: center;
  width: 92px; height: 36px; padding: 3px; border-radius: 999px; border: 1px solid currentColor;
  font-size: var(--tmg-fs-xs); font-weight: var(--tmg-fw-bold); letter-spacing: .06em;
}
.lang-opt { position: relative; z-index: 1; text-align: center; transition: color .35s; }
.lang-knob { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px; background: currentColor; transition: transform .45s var(--tmg-ease); }
.lang-toggle.is-en .lang-knob { transform: translateX(100%); }
.site-header .lang-toggle.is-ko .lang-opt:first-child,
.site-header .lang-toggle.is-en .lang-opt:nth-child(2) { color: var(--tmg-bg); }
.site-header.is-over:not(.is-scrolled) .lang-toggle.is-ko .lang-opt:first-child,
.site-header.is-over:not(.is-scrolled) .lang-toggle.is-en .lang-opt:nth-child(2) { color: var(--tmg-ink); }
.lang-toggle:hover .lang-knob { opacity: .9; }

.menu-btn { display: none; width: 40px; height: 40px; position: relative; }
.menu-btn span { position: absolute; left: 9px; right: 9px; height: 1.5px; background: currentColor; transition: transform .4s var(--tmg-ease); }
.menu-btn span:first-child { top: 15px; } .menu-btn span:last-child { top: 24px; }
.menu-open .menu-btn span:first-child { transform: translateY(4.5px) rotate(45deg); }
.menu-open .menu-btn span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
.menu-panel {
  position: fixed; inset: 0; z-index: 40; background: var(--tmg-dark); color: var(--tmg-white); padding: 120px var(--tmg-gutter) 40px;
  display: flex; flex-direction: column; justify-content: space-between;
  opacity: 0; visibility: hidden; transition: opacity .45s var(--tmg-ease), visibility .45s;
}
.menu-panel nav { display: grid; gap: 8px; }
.menu-panel nav a { font-size: var(--tmg-fs-menu); font-weight: var(--tmg-fw-semibold); letter-spacing: var(--tmg-ls-heading); line-height: 1.15; }
.menu-contact { color: color-mix(in srgb, var(--tmg-white) 60%, transparent); }
.menu-open .menu-panel { opacity: 1; visibility: visible; }
.menu-open .site-header { color: var(--tmg-white); background: transparent; backdrop-filter: none; }

/* ── 히어로 ── */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 620px; color: var(--tmg-white); overflow: hidden; background: var(--tmg-dark); }
.hero-media { position: absolute; inset: 0; will-change: clip-path; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s var(--tmg-ease); }
.hero-slide.is-active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; filter: var(--tmg-grade); transform: scale(1.08); transition: transform 9s linear; }
.hero-slide.is-active img { transform: scale(1); }
/* 영상 슬라이드: 카메라 무빙이 영상 안에 있으므로 확대 효과 없이 꽉 채움 */
.hero-video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--tmg-dark); }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--tmg-black) 35%, transparent) 0%, color-mix(in srgb, var(--tmg-black) 0%, transparent) 30%, color-mix(in srgb, var(--tmg-black) 10%, transparent) 55%, color-mix(in srgb, var(--tmg-black) 55%, transparent) 100%); pointer-events: none; }
.hero-inner { position: absolute; left: 0; right: 0; bottom: clamp(48px, 9vh, 110px); }
.hero .eyebrow { color: color-mix(in srgb, var(--tmg-white) 80%, transparent); margin-bottom: 22px; }
.hero-title { font-size: var(--tmg-fs-hero); line-height: .98; font-weight: var(--tmg-fw-semibold); letter-spacing: var(--tmg-ls-display); }
.hero-caps { position: relative; height: 1.7em; margin-top: clamp(14px, 3vh, 28px); font-size: var(--tmg-fs-hero-sub); }
.hero-cap { position: absolute; left: 0; top: 0; display: inline-flex; align-items: baseline; gap: 14px; white-space: nowrap; letter-spacing: .02em; color: color-mix(in srgb, var(--tmg-white) 88%, transparent); opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .9s var(--tmg-ease), transform .9s var(--tmg-ease); }
.hero-cap.is-active { opacity: 1; transform: none; pointer-events: auto; }
.hero-cap em { font-style: normal; font-size: var(--tmg-fs-xs); font-weight: var(--tmg-fw-semibold); letter-spacing: var(--tmg-ls-caps); text-transform: uppercase; color: color-mix(in srgb, var(--tmg-white) 62%, transparent); }
.hero-cap:hover { color: var(--tmg-white); }
/* 오른쪽 아래: 영상 고르기 버튼(01~04, 재생 진행 막대). 스크롤 표시는 뺌(2026-10-13) — 본문 오른쪽 끝선에 맞춤 */
.hero-ctrl { position: absolute; right: var(--tmg-edge); bottom: clamp(48px, 9vh, 110px); display: flex; align-items: flex-end; }
.hero-pick { display: flex; gap: clamp(10px, 1.2vw, 20px); }
.hero-dot { display: grid; gap: 10px; width: clamp(44px, 3.6vw, 72px); padding: 10px 0 4px; text-align: left; color: color-mix(in srgb, var(--tmg-white) 60%, transparent); font-size: var(--tmg-fs-md); font-weight: var(--tmg-fw-semibold); letter-spacing: .08em; font-variant-numeric: tabular-nums; cursor: pointer; transition: color .35s; }
.hero-dot i { position: relative; display: block; height: 2px; background: color-mix(in srgb, var(--tmg-white) 28%, transparent); overflow: hidden; }
.hero-dot i::after { content: ""; position: absolute; inset: 0; background: var(--tmg-white); transform: scaleX(0); transform-origin: left; transition: transform .3s linear; }
.hero-dot.is-active { color: var(--tmg-white); }
.hero-dot.is-active i::after { transform: scaleX(var(--p, 0)); }
.hero-dot:hover { color: var(--tmg-white); }
.hero-dot:hover i { background: color-mix(in srgb, var(--tmg-white) 50%, transparent); }
.hero-dot:focus-visible { outline: 1px solid var(--tmg-white); outline-offset: 4px; }

/* ── 섹션 공통 ── */
section { position: relative; }
.section-head { display: grid; gap: 10px; margin-bottom: var(--tmg-sp-head); }

/* 슬라이드: 한 화면에 한 주제. 넓은 화면에서는 화면 높이를 채우고 내용을 세로 가운데에 둔다.
   site.js가 휠 한 번에 다음 슬라이드로 넘기고 잠시 멈춘다(내용이 화면보다 길면 그 안은 자유 스크롤) */
.slide { padding-block: var(--tmg-sp-section) 0; }
main > .slide:first-child { padding-top: calc(var(--tmg-header-h) + var(--tmg-sp-block)); }
@media (min-width: 901px) {
  .slide { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
    padding-block: calc(var(--tmg-header-h) + var(--tmg-slide-pad)) var(--tmg-slide-pad); }
  main > .slide:first-child { padding-top: calc(var(--tmg-header-h) + var(--tmg-slide-pad)); }
}

/* 회사 소개(홈 두 번째 화면): 제목 + 소개 문장 + 숫자를 한 화면에 */
.intro .statement-text { margin-bottom: var(--tmg-sp-block); }
.intro .stats-grid { grid-template-columns: repeat(2, 1fr); }
.intro .stat:nth-child(2) { border-right: 0; }
.intro .stat:nth-child(3) { padding-left: 0; }
.intro .stat:nth-child(n+3) { border-top: var(--tmg-border); margin-top: clamp(14px, 2.4vh, 28px); }
.intro .stat { padding-bottom: 4px; }
.statement-text { font-size: var(--tmg-fs-statement); line-height: 1.38; font-weight: var(--tmg-fw-medium); letter-spacing: var(--tmg-ls-title); max-width: 34em; }
.statement-text .w { opacity: .14; transition: opacity .3s; }
.no-anim .statement-text .w { opacity: 1; }

/* 숫자 */
.stats { display: grid; gap: var(--tmg-sp-stack); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: var(--tmg-border); }
.stat { padding: clamp(14px, 2.6vh, 32px) 24px 0 0; border-right: var(--tmg-border); }
.stat:last-child { border-right: 0; }
.stat + .stat { padding-left: 24px; }
.stat-num { font-size: var(--tmg-fs-stat); line-height: 1; font-weight: var(--tmg-fw-semibold); letter-spacing: var(--tmg-ls-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-num em { font-style: normal; font-size: .38em; letter-spacing: 0; margin-left: 6px; color: var(--tmg-mute); font-weight: var(--tmg-fw-medium); }
.stat-label { margin-top: 10px; color: var(--tmg-mute); font-size: var(--tmg-fs-body-sm); }
.stats-note { margin-top: 4px; font-size: var(--tmg-fs-sm); color: var(--tmg-mute); }

/* 주요 프로젝트 스토리 */
.story { background: var(--tmg-dark); color: var(--tmg-on-dark); }
.story-pin { padding: var(--tmg-sp-section) 0; }
.story .eyebrow { color: color-mix(in srgb, var(--tmg-on-dark) 60%, transparent); }
.story-body { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 5vw, 96px); }
.story-media { position: relative; }
.story-frame { position: sticky; top: 12vh; height: 76vh; border-radius: var(--tmg-radius-lg); overflow: hidden; background: var(--tmg-dark-2); }
.story-img { position: absolute; inset: 0; opacity: 0; transform: scale(1.06); transition: opacity 1s var(--tmg-ease), transform 1.6s var(--tmg-ease); }
.story-img.is-active { opacity: 1; transform: scale(1); }
.story-img img { width: 100%; height: 100%; object-fit: cover; filter: var(--tmg-grade); }
.story-step { min-height: 82vh; display: flex; flex-direction: column; justify-content: center; gap: var(--tmg-sp-stack); padding: 40px 0; opacity: .28; transition: opacity .6s var(--tmg-ease); }
@media (min-width: 901px) {
  .story-pin { height: 100vh; height: 100svh; display: grid; grid-template-rows: auto minmax(0, 1fr);
    padding: calc(var(--tmg-header-h) + var(--tmg-slide-pad)) 0 var(--tmg-slide-pad); }
  .story-body, .story-media { min-height: 0; }
  .story-frame { position: relative; top: auto; height: 100%; }
  .story-steps { position: relative; }
  .story-step { position: absolute; inset: 0; min-height: 0; padding: 0; opacity: 0; pointer-events: none; }
  .story-step.is-active { opacity: 1; pointer-events: auto; }
}
.story-step.is-active { opacity: 1; }
.story-step-img { display: none; }
.step-no { font-size: var(--tmg-fs-md); font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.step-no span { opacity: .45; }
.step-cat { font-size: var(--tmg-fs-sm); letter-spacing: var(--tmg-ls-caps); text-transform: uppercase; color: color-mix(in srgb, var(--tmg-on-dark) 55%, transparent); }
.step-title { font-size: var(--tmg-fs-h2-sm); line-height: 1.15; font-weight: var(--tmg-fw-semibold); letter-spacing: var(--tmg-ls-heading); margin-bottom: 6px; }
.story .meta dt { color: color-mix(in srgb, var(--tmg-on-dark) 50%, transparent); }
.story .meta > div { border-color: color-mix(in srgb, var(--tmg-on-dark) 14%, transparent); }
.story .link-arrow { align-self: flex-start; margin-top: 18px; }

/* 메타 목록 */
.meta { display: grid; }
.meta > div { display: grid; grid-template-columns: 7em 1fr; gap: 16px; padding: clamp(8px, 1.4vh, 14px) 0; border-top: var(--tmg-border); }
.meta dt { color: var(--tmg-mute); font-size: var(--tmg-fs-md); padding-top: 2px; }
.meta dd { font-size: var(--tmg-fs-body); }

/* 사업분야 가로 스크롤 */
.services { padding: var(--tmg-sp-section) 0; overflow: hidden; }
@media (min-width: 901px) {
  .services { height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center;
    padding: calc(var(--tmg-header-h) + var(--tmg-slide-pad)) 0 var(--tmg-slide-pad); }
}
.services-viewport { overflow: hidden; }
.services-track { display: flex; gap: 24px; padding: 0 var(--tmg-edge); width: max-content; will-change: transform; }
/* 카드 전체(사진+설명+태그)와 위 제목이 한 화면에 들어오도록 화면 높이에 맞춰 폭을 줄임 */
.svc { width: clamp(260px, min(30vw, calc((100svh - 420px) * 4 / 3)), max(560px, 17vw)); flex: none; }   /* 와이드 화면에서는 카드도 커져 빈 곳이 없게 */
.svc-media { aspect-ratio: 4 / 3; border-radius: var(--tmg-radius-lg); overflow: hidden; background: var(--tmg-bg-2); }
.svc-media img { width: 100%; height: 100%; object-fit: cover; filter: var(--tmg-grade); transition: transform 1.2s var(--tmg-ease); }
.svc:hover .svc-media img { transform: scale(1.05); }
.svc-body { padding-top: var(--tmg-sp-stack); display: grid; gap: 4px; }
.svc-no { font-size: var(--tmg-fs-sm); letter-spacing: .1em; color: var(--tmg-mute); font-variant-numeric: tabular-nums; }
.svc-title { font-size: var(--tmg-fs-h3-lg); font-weight: var(--tmg-fw-semibold); letter-spacing: var(--tmg-ls-heading); line-height: 1.15; }
.svc-name { color: var(--tmg-mute); }
.svc ul { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.svc li, .svc-row li { font-size: var(--tmg-fs-sm); padding: 4px 11px; border: var(--tmg-border); border-radius: 999px; }

/* 분야별 프로젝트 목록 */
.cat-list { border-top: var(--tmg-border); }
.cat-list li { border-bottom: var(--tmg-border); }
.cat-list a { position: relative; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 32px; padding: clamp(8px, 1.7vh, 22px) 0; }
.cat-name { font-size: var(--tmg-fs-cat); line-height: 1.1; font-weight: var(--tmg-fw-semibold); letter-spacing: var(--tmg-ls-heading); transition: transform .6s var(--tmg-ease), color .4s; }
.cat-count { font-size: var(--tmg-fs-h4); font-variant-numeric: tabular-nums; color: var(--tmg-mute); }
.cat-arrow { font-size: var(--tmg-fs-spec); transition: transform .5s var(--tmg-ease); }
.cat-preview { position: absolute; right: 18%; top: 50%; width: clamp(200px, 30vh, 300px); aspect-ratio: 4 / 3; border-radius: var(--tmg-radius); overflow: hidden; pointer-events: none; opacity: 0; transform: translateY(-50%) scale(.85) rotate(-3deg); transition: opacity .45s var(--tmg-ease), transform .6s var(--tmg-ease); z-index: 2; }
.cat-preview img { width: 100%; height: 100%; object-fit: cover; filter: var(--tmg-grade); }
.cat-list a:hover .cat-name { transform: translateX(18px); }
.cat-list a:hover .cat-arrow { transform: translateX(8px) rotate(-45deg); }
.cat-list a:hover .cat-preview { opacity: 1; transform: translateY(-50%) scale(1) rotate(0); }
.cats-more { margin-top: var(--tmg-sp-block); }

/* CTA */
.cta { background: var(--tmg-dark); color: var(--tmg-on-dark); padding-bottom: var(--tmg-sp-section); overflow: hidden; isolation: isolate; }
.cta-bg { position: absolute; inset: 0; z-index: -1; }
.cta-bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35) brightness(.55) contrast(1.05); opacity: .55; }
.cta-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--tmg-dark) 0%, color-mix(in srgb, var(--tmg-dark) 78%, transparent) 45%, color-mix(in srgb, var(--tmg-dark) 30%, transparent) 100%); }
.cta .eyebrow { color: color-mix(in srgb, var(--tmg-on-dark) 60%, transparent); margin-bottom: var(--tmg-sp-head); }
.cta .btn { margin-top: var(--tmg-sp-block); }

/* ── 서브 페이지 ── */
.page-head { padding: calc(var(--tmg-header-h) + var(--tmg-sp-block)) 0 var(--tmg-sp-head); display: grid; gap: 10px; }
.page-head.is-inner { padding: 0 0 var(--tmg-sp-head); }
.page-head .display { font-size: var(--tmg-fs-page-title); line-height: 1.08; }
.page-sub { font-size: var(--tmg-fs-body-lg); color: var(--tmg-mute); max-width: 72em; }
.page-sub-sep { margin: 0 6px; opacity: .5; }
.page-sub b { color: var(--tmg-ink); font-weight: var(--tmg-fw-semibold); }
.subtabs { display: flex; gap: 8px; margin-bottom: var(--tmg-sp-block); }
.slide .subtabs { margin-bottom: var(--tmg-sp-head); }
.subtabs a, .chip { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border-radius: 999px; border: var(--tmg-border); font-size: var(--tmg-fs-body-sm); font-weight: var(--tmg-fw-medium); transition: background .3s, color .3s, border-color .3s; }
.subtabs a:hover, .chip:hover { border-color: var(--tmg-ink); }
.subtabs a[aria-current], .chip[aria-current] { background: var(--tmg-ink); color: var(--tmg-bg); border-color: var(--tmg-ink); }
.chip sup { font-size: var(--tmg-fs-2xs); opacity: .6; top: 0; }

/* 프로젝트 목록 */
.list-tools { position: sticky; top: var(--tmg-sticky-top); z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap;
  margin-bottom: var(--tmg-sp-head); padding: 12px 0; background: var(--tmg-bg);
  box-shadow: 0 0 0 100vmax var(--tmg-bg); clip-path: inset(0 -100vmax); transition: top .5s var(--tmg-ease); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.search input { width: min(340px, 80vw); height: 40px; padding: 0 18px 0 44px; border-radius: 999px; border: var(--tmg-border); background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23141414' stroke-width='1.6'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='m13 13 4 4'/%3E%3C/svg%3E") 16px 50% no-repeat; font: inherit; font-size: var(--tmg-fs-body-sm); color: var(--tmg-ink); outline: none; transition: border-color .3s; }
.search input:focus { border-color: var(--tmg-ink); }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 2.6vw, 40px) clamp(18px, 1.8vw, 28px); padding-bottom: var(--tmg-sp-section); }
.grid-empty { padding-bottom: 120px; color: var(--tmg-mute); }
.card { display: grid; gap: 14px; }
.card[hidden] { display: none; }
.card-media { aspect-ratio: 4 / 3; border-radius: var(--tmg-radius-lg); overflow: hidden; background: var(--tmg-bg-2); }
.card-media img { width: 100%; height: 100%; object-fit: cover; filter: var(--tmg-grade); transition: transform 1.1s var(--tmg-ease), filter .6s; }
.card:hover .card-media img { transform: scale(1.06); filter: saturate(1) contrast(1.04); }
.card-body { display: grid; gap: 6px; }
.card-cat { font-size: var(--tmg-fs-xs); letter-spacing: var(--tmg-ls-caps); text-transform: uppercase; color: var(--tmg-mute); }
.card-title { font-size: var(--tmg-fs-card); font-weight: var(--tmg-fw-semibold); letter-spacing: var(--tmg-ls-title); line-height: 1.3; }
.card-sub { font-size: var(--tmg-fs-md); color: var(--tmg-mute); }

/* 프로젝트 상세 */
.detail-head { padding: calc(var(--tmg-header-h) + var(--tmg-sp-block)) 0 var(--tmg-sp-block); display: grid; gap: var(--tmg-sp-stack); }
.meta-row { grid-template-columns: repeat(4, 1fr); gap: 0 24px; }
.meta-row > div { grid-template-columns: 1fr; gap: 6px; }
.detail-media { padding: 0 var(--tmg-edge); }
.detail-frame { border-radius: var(--tmg-radius-lg); overflow: hidden; height: min(80vh, 920px); background: var(--tmg-bg-2); }
.detail-frame img { width: 100%; height: 100%; object-fit: cover; filter: var(--tmg-grade); }
.detail-specs { padding: var(--tmg-sp-section) 0; display: grid; grid-template-columns: 1fr 2.2fr; gap: 40px; }
.specs { display: grid; }
.specs li { font-size: var(--tmg-fs-spec); line-height: 1.25; font-weight: var(--tmg-fw-medium); letter-spacing: var(--tmg-ls-heading); padding: 16px 0; border-top: var(--tmg-border); }
.specs li:last-child { border-bottom: var(--tmg-border); }
.specs [data-count] { font-weight: var(--tmg-fw-bold); font-variant-numeric: tabular-nums; }
.pn-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-bottom: 60px; }
.pn { position: relative; display: block; border-radius: var(--tmg-radius-lg); overflow: hidden; aspect-ratio: 16 / 8; color: var(--tmg-white); background: var(--tmg-dark); }
.pn-next { grid-column: 2; text-align: right; }
.pn-media, .pn-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pn-media img { filter: var(--tmg-grade) brightness(.78); transition: transform 1.1s var(--tmg-ease); }
/* 사진이 밝아도 글씨가 보이게 위·아래를 어둡게 */
.pn-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--tmg-black) 55%, transparent) 0%, color-mix(in srgb, var(--tmg-black) 0%, transparent) 38%, color-mix(in srgb, var(--tmg-black) 0%, transparent) 50%, color-mix(in srgb, var(--tmg-black) 70%, transparent) 100%); }
.pn:hover .pn-media img { transform: scale(1.05); }
.pn-label, .pn-title { position: absolute; left: 28px; right: 28px; }
.pn-label { top: 22px; display: flex; align-items: center; gap: 12px; font-size: var(--tmg-fs-body); font-weight: var(--tmg-fw-semibold); letter-spacing: -0.01em; }
.pn-next .pn-label { flex-direction: row-reverse; }
.pn-arrow { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; background: var(--tmg-white); color: var(--tmg-ink); font-style: normal; font-size: var(--tmg-fs-title); transition: transform .45s var(--tmg-ease); }
.pn-prev:hover .pn-arrow { transform: translateX(-5px); }
.pn-next:hover .pn-arrow { transform: translateX(5px); }
.pn-title { bottom: 24px; font-size: var(--tmg-fs-h3-lg); font-weight: var(--tmg-fw-semibold); letter-spacing: var(--tmg-ls-title); line-height: 1.2; text-shadow: 0 1px 12px color-mix(in srgb, var(--tmg-black) 35%, transparent); }
.back-link { padding-bottom: var(--tmg-sp-section); }

/* 회사소개 */
.about-media { border-radius: var(--tmg-radius-lg); overflow: hidden; aspect-ratio: 21 / 9; }
.about-media img { width: 100%; height: 100%; object-fit: cover; filter: var(--tmg-grade); }
@media (min-width: 901px) {
  .split { display: grid; }
  .split-media { min-height: 0; }
  .about-intro .prose, .about-message .prose { max-width: 40em; }
  .about-message .prose { font-size: var(--tmg-fs-body-lg); line-height: 1.8; }
  :lang(en) .about-intro .prose { font-size: var(--tmg-fs-body-lg); line-height: 1.65; }   /* 영문은 문장이 길어 한 화면에 들어가게 */
  :lang(en) .about-message .prose { font-size: var(--tmg-fs-body); line-height: 1.75; }
  /* 제목·탭·사진이 정확히 한 화면: 사진이 남는 높이를 채움 */
  .about-top { height: 100vh; height: 100svh; justify-content: flex-start; }
  .about-top .about-media { aspect-ratio: auto; flex: 1 1 0; min-height: 160px; }
  .about-intro .prose { font-size: var(--tmg-fs-h4); line-height: 1.6; letter-spacing: var(--tmg-ls-title); color: var(--tmg-ink); }
}
/* 반반 화면 — 글 칸은 본문 시작선, 사진 칸은 화면 오른쪽(또는 왼쪽) 끝까지. 2026-10-12 통화: 흰 바탕에 글만 있으면 허전함 */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); column-gap: clamp(32px, 5vw, 128px); padding-left: var(--tmg-edge); }
.split.is-flip { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); padding-left: 0; padding-right: var(--tmg-edge); }
.split-body { align-self: center; display: grid; align-content: center; gap: 0; min-width: 0; }
.split-media { position: relative; margin: 0; min-height: 0; display: grid; }
.split-photo { display: block; position: relative; overflow: hidden; border-radius: var(--tmg-radius-lg) 0 0 var(--tmg-radius-lg); background: var(--tmg-bg-2); }
.is-flip .split-photo { border-radius: 0 var(--tmg-radius-lg) var(--tmg-radius-lg) 0; }
.split-photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); filter: var(--tmg-grade); transition: transform 1.6s var(--tmg-ease); }
.split-photo:hover img { transform: scale(1.03); }
.split-media figcaption { position: absolute; left: 24px; bottom: 20px; display: grid; gap: 2px; color: var(--tmg-white); font-size: var(--tmg-fs-md); font-weight: var(--tmg-fw-semibold); text-shadow: 0 1px 10px color-mix(in srgb, var(--tmg-black) 45%, transparent); pointer-events: none; }
.split-media figcaption em { font-style: normal; font-size: var(--tmg-fs-2xs); letter-spacing: var(--tmg-ls-caps); text-transform: uppercase; opacity: .8; }
.is-flip .split-media figcaption { left: auto; right: 24px; text-align: right; }
/* 도면 맞춤표: 사진 모서리 바깥의 작은 꺾쇠 */
.split-media::before, .split-media::after { content: ""; position: absolute; width: 14px; height: 14px; border: 0 solid var(--tmg-line-strong); pointer-events: none; }
.split-media::before { left: -12px; top: -12px; border-width: 1px 0 0 1px; }
.split-media::after { left: -12px; bottom: -12px; border-width: 0 0 1px 1px; }
.is-flip .split-media::before { left: auto; right: -12px; border-width: 1px 1px 0 0; }
.is-flip .split-media::after { left: auto; right: -12px; border-width: 0 1px 1px 0; }
/* 겹쳐 놓은 작은 사진(회사 개요) */
.split-inset { position: absolute; left: clamp(-80px, -4vw, -32px); bottom: clamp(48px, 9vh, 96px); width: clamp(150px, 15vw, 300px); aspect-ratio: 4 / 3; border-radius: var(--tmg-radius); overflow: hidden; border: 6px solid var(--tmg-bg); box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--tmg-black) 55%, transparent); }
.split-inset img { width: 100%; height: 100%; object-fit: cover; filter: var(--tmg-grade); }
.about-intro .split-media figcaption { left: auto; right: 24px; text-align: right; }
.pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; margin-top: var(--tmg-sp-block); border-top: var(--tmg-border); }
.pillars li { display: grid; gap: 6px; align-content: start; padding-top: clamp(12px, 2vh, 20px); }
.pillars h3 { display: flex; align-items: center; gap: 10px; font-size: var(--tmg-fs-body-lg); font-weight: var(--tmg-fw-semibold); letter-spacing: var(--tmg-ls-title); }
.pillars h3::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--tmg-primary-600); }
.pillars p { font-size: var(--tmg-fs-md); line-height: 1.7; color: var(--tmg-mute); }
/* 회장 인사말: 큰 따옴표 */
.about-message .section-head { position: relative; }
.about-message .section-head::before { content: "\201C"; position: absolute; right: 0; top: -.3em; font-family: var(--tmg-font-serif); font-size: var(--tmg-fs-quote); line-height: 1; font-weight: var(--tmg-fw-bold); color: var(--tmg-primary-100); pointer-events: none; }
.prose { max-width: 920px; display: grid; gap: var(--tmg-sp-stack); font-size: var(--tmg-fs-lead); line-height: 1.8; color: var(--tmg-ink-2); }
.sign { margin-top: 8px; font-weight: var(--tmg-fw-semibold); color: var(--tmg-ink); }
.story-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: var(--tmg-border); }
.story-item { padding: clamp(14px, 2.4vh, 26px) 22px clamp(16px, 2.8vh, 30px) 0; border-bottom: var(--tmg-border); display: grid; gap: 8px; align-content: start; min-width: 0; }
.story-item:not(:nth-child(4n)) { border-right: var(--tmg-border); }
.story-item:not(:nth-child(4n+1)) { padding-left: 22px; }
.story-no { font-size: var(--tmg-fs-sm); letter-spacing: var(--tmg-ls-caps); color: var(--tmg-mute); font-variant-numeric: tabular-nums; }
.story-item h3 { font-size: var(--tmg-fs-title); font-weight: var(--tmg-fw-semibold); letter-spacing: var(--tmg-ls-title); }
.story-item p { font-size: var(--tmg-fs-md); line-height: 1.65; color: var(--tmg-mute); }

/* 조직도 */
.org { padding-bottom: clamp(100px, 10vw, 160px); display: grid; justify-items: center; gap: 28px; }
.org-top span { display: inline-flex; padding: 18px 48px; border-radius: 999px; background: var(--tmg-ink); color: var(--tmg-bg); font-size: var(--tmg-fs-title); font-weight: var(--tmg-fw-semibold); }
.org-staff { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.org-staff span { padding: 12px 26px; border-radius: 999px; border: 1px solid var(--tmg-ink); font-weight: var(--tmg-fw-medium); }
.org-divs { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; }
.org-div { background: var(--tmg-card); border-radius: var(--tmg-radius-lg); padding: 28px 26px; }
.org-div h3 { font-size: var(--tmg-fs-title); font-weight: var(--tmg-fw-semibold); letter-spacing: var(--tmg-ls-title); padding-bottom: 16px; margin-bottom: 12px; border-bottom: var(--tmg-border); }
.org-div li { padding: 8px 0; color: var(--tmg-mute); font-size: var(--tmg-fs-body-sm); }
.org-top b { font-weight: var(--tmg-fw-semibold); margin-left: 10px; opacity: .85; }
.org-div h3:has(+ .org-head) { border-bottom: 0; padding-bottom: 4px; margin-bottom: 0; }
.org-head { font-size: var(--tmg-fs-md); color: var(--tmg-mute); padding-bottom: 16px; margin-bottom: 12px; border-bottom: var(--tmg-border); }
.org-teams { margin: 6px 0 0; padding-left: 14px; border-left: var(--tmg-border); }
.org-teams li { padding: 4px 0; font-size: var(--tmg-fs-md); }

/* 조직도 — 가지치기 트리 */
.org-tree { --tw: 2px; padding-bottom: var(--tmg-sp-section); display: grid; justify-items: center; }
.ot-top span { display: inline-flex; align-items: baseline; gap: 10px; padding: 18px 40px; border-radius: var(--tmg-radius); background: var(--tmg-primary-800); color: var(--tmg-white); font-size: var(--tmg-fs-title); font-weight: var(--tmg-fw-semibold); box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--tmg-primary-800) 60%, transparent); }
.ot-top b { font-weight: var(--tmg-fw-semibold); opacity: .9; }
.ot-staff { position: relative; width: min(820px, 100%); display: grid; grid-template-columns: 1fr 1fr; column-gap: 96px; row-gap: 16px; padding: 30px 0 34px; }
.ot-staff::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: var(--tw) solid var(--tmg-line-strong); transform: translateX(-1px); }
.ot-staff-item { position: relative; display: flex; }
.ot-staff-item.is-left { grid-column: 1; justify-content: flex-end; }
.ot-staff-item.is-right { grid-column: 2; justify-content: flex-start; }
.ot-staff-item span { padding: 12px 24px; border-radius: var(--tmg-radius); background: var(--tmg-primary-700); color: var(--tmg-white); font-weight: var(--tmg-fw-medium); font-size: var(--tmg-fs-body-sm); white-space: nowrap; }
.ot-staff-item::after { content: ""; position: absolute; top: 50%; width: 48px; border-top: var(--tw) solid var(--tmg-line-strong); }
.ot-staff-item.is-left::after { right: -48px; }
.ot-staff-item.is-right::after { left: -48px; }
.ot-divs { --gap: 16px; position: relative; width: 100%; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--gap); padding-top: 30px; }
.ot-divs::before { content: ""; position: absolute; top: 0; left: calc((100% - (var(--n) - 1) * var(--gap)) / var(--n) / 2); right: calc((100% - (var(--n) - 1) * var(--gap)) / var(--n) / 2); border-top: var(--tw) solid var(--tmg-line-strong); }
.ot-div { position: relative; display: grid; align-content: start; gap: 14px; min-width: 0; }
.ot-div::before { content: ""; position: absolute; left: 50%; top: -30px; height: 30px; border-left: var(--tw) solid var(--tmg-line-strong); transform: translateX(-1px); }
.ot-div-box { display: grid; gap: 4px; text-align: center; padding: 16px 12px; border-radius: var(--tmg-radius); background: var(--tmg-primary-800); color: var(--tmg-white); }
.ot-div-box strong { font-size: var(--tmg-fs-body); font-weight: var(--tmg-fw-semibold); letter-spacing: var(--tmg-ls-title); line-height: 1.35; }
.ot-div-box span { font-size: var(--tmg-fs-md); opacity: .82; }
.ot-units, .ot-teams { list-style: none; margin: 0; padding: 0 0 0 22px; display: grid; gap: 10px; position: relative; }
.ot-units { margin-left: 18px; }
.ot-units::before, .ot-teams::before { content: ""; position: absolute; left: 0; top: -14px; bottom: 18px; border-left: var(--tw) solid var(--tmg-line-strong); }
.ot-teams { margin-top: 10px; gap: 8px; }
.ot-teams::before { top: -10px; bottom: 16px; }
.ot-units li { position: relative; }
.ot-units li::before { content: ""; position: absolute; left: -22px; top: 19px; width: 22px; border-top: var(--tw) solid var(--tmg-line-strong); }
.ot-teams li::before { top: 16px; }
.ot-unit, .ot-team { display: block; padding: 9px 12px; border-radius: 10px; font-size: var(--tmg-fs-body-sm); line-height: 1.35; }
.ot-unit { background: var(--tmg-card); border: var(--tmg-border); color: var(--tmg-ink); }
.ot-team { background: var(--tmg-bg-2); color: var(--tmg-mute); font-size: var(--tmg-fs-md); padding: 7px 12px; }

/* 실적 사진 */
.gallery { display: grid; gap: var(--tmg-sp-head); padding-bottom: var(--tmg-sp-section); }
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 20px; }
.gal-item { margin: 0; display: grid; gap: 10px; }
.gal-item img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--tmg-radius); background: var(--tmg-bg-2); }
.gal-item figcaption { font-size: var(--tmg-fs-md); color: var(--tmg-mute); }
.svc-detail-img { margin: 0 0 6px; border-radius: var(--tmg-radius); overflow: hidden; aspect-ratio: 16 / 10; background: var(--tmg-bg-2); }
.svc-detail-img img { width: 100%; height: 100%; object-fit: cover; }

/* 연혁 */
.hist { padding-bottom: var(--tmg-sp-section); display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.6fr); gap: clamp(32px, 4.5vw, 96px); align-items: start; }
/* 크기·위치 고정 — 헤더가 숨고 나타나도 사진이 커졌다 작아지지 않게(2026-10-12) */
.hist-media { position: sticky; top: calc(var(--tmg-header-h) + 24px); margin: 0; height: min(calc(100vh - var(--tmg-header-h) - 48px), 820px); border-radius: var(--tmg-radius-lg); overflow: hidden; }
.hist-media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; filter: var(--tmg-grade); }
.hist-rows { min-width: 0; }
.hist-row:first-child { border-top: 0; padding-top: 0; }
.hist .hist-row { grid-template-columns: clamp(110px, 10vw, 200px) minmax(0, 1fr); }
.hist-row { display: grid; grid-template-columns: 1fr 1.6fr; gap: 32px; padding: clamp(20px, 3vh, 32px) 0; border-top: var(--tmg-border); }
.hist-year { font-size: var(--tmg-fs-year); line-height: .95; font-weight: var(--tmg-fw-semibold); letter-spacing: var(--tmg-ls-display); font-variant-numeric: tabular-nums; }
.hist-row li { padding: 10px 0; font-size: var(--tmg-fs-lead); border-bottom: var(--tmg-border); }
.hist-row li:last-child { border-bottom: 0; }

/* 사업분야 페이지 — 분야마다 [사진+소개] [상세 설명] [분야별 역량]이 각각 한 화면 */
.svc-row { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 4.5vw, 88px); align-items: center; }
.svc-row.is-rev .svc-row-media { order: 2; }
.svc-row-media { border-radius: var(--tmg-radius-lg); overflow: hidden; aspect-ratio: 5 / 4; }
.svc-row-media img { width: 100%; height: 100%; object-fit: cover; filter: var(--tmg-grade); }
@media (min-width: 901px) {
  .svc-row-media { aspect-ratio: auto; height: clamp(240px, calc(100svh - var(--tmg-header-h) - 2 * var(--tmg-slide-pad) - 8px), 760px); }
  .svc-slide.is-first .svc-row-media { height: clamp(220px, calc(100svh - var(--tmg-header-h) - 2 * var(--tmg-slide-pad) - 9.5vh - 60px), 680px); }
}
.svc-row-body { display: grid; gap: var(--tmg-sp-stack); align-content: center; }
.svc-row-body .h2 { margin-top: -4px; }
.svc-row-body ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 4px; }
.svc-row-body .link-arrow { justify-self: start; }
.svc-desc { font-size: var(--tmg-fs-body); line-height: 1.75; color: var(--tmg-mute); max-width: 640px; }
.svc-lead { font-size: var(--tmg-fs-title); font-weight: var(--tmg-fw-semibold); letter-spacing: var(--tmg-ls-title); color: var(--tmg-ink); }
.svc .svc-lead { font-size: var(--tmg-fs-body-sm); font-weight: var(--tmg-fw-medium); color: var(--tmg-mute); margin: 2px 0 4px; }
.svc-section { display: grid; gap: var(--tmg-sp-block); }
.svc-section.has-img { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.svc-section-body { display: grid; gap: var(--tmg-sp-stack); font-size: var(--tmg-fs-body); line-height: 1.8; color: var(--tmg-mute); max-width: 820px; }
.svc-section-img { margin: 0; border-radius: var(--tmg-radius); overflow: hidden; }
.svc-section-img img { width: 100%; height: auto; max-height: calc(100svh - var(--tmg-header-h) - 2 * var(--tmg-slide-pad) - 120px); object-fit: cover; display: block; }
.list-intro { font-size: var(--tmg-fs-lead); line-height: 1.75; color: var(--tmg-mute); max-width: 900px; margin-bottom: 28px; }
.svc-details { display: grid; gap: var(--tmg-sp-stack); }
.is-combined .svc-details { margin-top: var(--tmg-sp-block); }
.svc-details-title { font-size: var(--tmg-fs-title); font-weight: var(--tmg-fw-semibold); letter-spacing: var(--tmg-ls-title); }
.is-combined .svc-section-img img { max-height: min(34vh, 380px); }
.svc-details-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 0; border-top: var(--tmg-border); }
.svc-detail { padding: clamp(14px, 2.4vh, 24px) 22px clamp(16px, 2.6vh, 28px) 0; border-bottom: var(--tmg-border); display: grid; gap: 8px; align-content: start; min-width: 0; }
.svc-detail + .svc-detail { padding-left: 22px; border-left: var(--tmg-border); }
.svc-detail h3 { font-size: var(--tmg-fs-body-lg); font-weight: var(--tmg-fw-semibold); letter-spacing: var(--tmg-ls-title); }
.svc-detail p { font-size: var(--tmg-fs-md); line-height: 1.7; color: var(--tmg-mute); }

/* 연락처 */
.contact { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(32px, 5vw, 88px); }
.contact-info { display: grid; gap: var(--tmg-sp-stack); align-content: start; }
.contact-info .link-arrow { justify-self: start; }
.contact-map { --map-h: clamp(280px, calc(100svh - var(--tmg-header-h) - 2 * var(--tmg-slide-pad) - 12vh - 70px), 560px); border-radius: var(--tmg-radius-lg); overflow: hidden; background: var(--tmg-bg-2); height: var(--map-h); }
.contact-map .root_daum_roughmap { width: 100% !important; }
.contact-map .root_daum_roughmap .wrap_map { height: var(--map-h) !important; }
.contact-map .root_daum_roughmap .cont, .contact-map .root_daum_roughmap .wrap_controllers { display: none !important; }

/* 약관 */
.legal { max-width: 920px; padding-bottom: var(--tmg-sp-section); font-size: var(--tmg-fs-body-sm); line-height: 1.85; color: var(--tmg-ink-2); }
.legal h3, .legal h4 { font-size: var(--tmg-fs-title); margin: 40px 0 12px; letter-spacing: var(--tmg-ls-title); }
.legal p, .legal li { margin: 6px 0; }
.legal table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: var(--tmg-fs-md); }
.legal th, .legal td { border: var(--tmg-border); padding: 10px; text-align: left; }

/* ── 푸터 ── */
.site-footer { background: var(--tmg-dark); color: color-mix(in srgb, var(--tmg-on-dark) 70%, transparent); padding: clamp(48px, 7vh, 80px) 0 clamp(28px, 4vh, 40px); font-size: var(--tmg-fs-md); }
.cta + .site-footer, .site-footer { border-top: 1px solid color-mix(in srgb, var(--tmg-on-dark) 10%, transparent); }
.footer-top { display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px; padding-bottom: clamp(28px, 5vh, 56px); border-bottom: 1px solid color-mix(in srgb, var(--tmg-on-dark) 12%, transparent); }
.footer-logo { width: min(340px, 100%); }
.footer-info { display: grid; gap: 10px; }
.footer-info span { display: inline-block; width: 64px; color: color-mix(in srgb, var(--tmg-on-dark) 40%, transparent); }
.footer-info a:hover { color: var(--tmg-white); }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 28px; font-size: var(--tmg-fs-sm); }
.footer-bottom nav { display: flex; gap: 24px; }
.footer-bottom a:hover { color: var(--tmg-white); }

/* ── 스크롤 등장(JS가 있을 때만 숨김) ── */
.js:not(.no-anim) [data-reveal] { opacity: 0; transform: translateY(32px); }
.js:not(.no-anim) .line > span { transform: translateY(105%); }
.no-anim [data-reveal], .no-anim .line > span { opacity: 1 !important; transform: none !important; }

/* ── 반응형 ── */
/* 와이드·울트라와이드(2026-10-12 통화): 글 칸은 읽기 좋은 폭에서 멈추고 사진이 나머지를 채움, 목록은 칸 수를 늘림 */
@media (min-width: 2200px) {
  .split { grid-template-columns: minmax(0, 1000px) minmax(0, 1fr); }
  .split.is-flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1000px); }
  .grid { grid-template-columns: repeat(4, 1fr); }
  .story-body { grid-template-columns: 1.5fr 1fr; }
  .story-steps { max-width: 900px; }
}
@media (min-width: 3400px) {
  .grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .org-divs { grid-template-columns: repeat(2, 1fr); }
  .story-list, .svc-details-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-detail + .svc-detail { border-left: 0; padding-left: 0; }
  .ot-divs { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }
  .ot-divs::before, .ot-div::before { display: none; }
  .ot-div { padding-top: 18px; border-top: var(--tw) solid var(--tmg-line-strong); }
  .story-item:nth-child(n) { border-right: 0; padding-left: 0; }
  .story-item:nth-child(odd) { border-right: var(--tmg-border); }
  .story-item:nth-child(even) { padding-left: 26px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(3) { padding-left: 0; }
  .stat:nth-child(n+3) { border-top: var(--tmg-border); margin-top: 36px; }
}
@media (max-width: 900px) {
  body { font-size: var(--tmg-fs-body); }
  .site-header { grid-template-columns: 1fr auto; height: 68px; }
  .site-header.is-scrolled { height: 64px; }
  .nav { display: none; }
  .menu-btn { display: block; }
  .brand img { width: 62px; }
  .brand-text { display: none; }
  .hero-ctrl { left: var(--tmg-edge); right: auto; bottom: 22px; }
  .hero-inner { bottom: 76px; }
  .story-body { grid-template-columns: 1fr; }
  .story-media { display: none; }
  .story-step { min-height: 0; opacity: 1; padding: 0 0 72px; }
  .story-step-img { display: block; border-radius: var(--tmg-radius-lg); overflow: hidden; aspect-ratio: 4 / 3; margin-bottom: 18px; }
  .story-step-img img { width: 100%; height: 100%; object-fit: cover; filter: var(--tmg-grade); }
  .services-viewport { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .services-viewport::-webkit-scrollbar { display: none; }
  .svc { width: 82vw; scroll-snap-align: start; }
  .cat-list a { grid-template-columns: 1fr auto; gap: 16px; }
  .cat-arrow, .cat-preview { display: none; }
  .meta-row { grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .detail-frame { height: 62vh; }
  .detail-specs { grid-template-columns: 1fr; }
  .pn-wrap { grid-template-columns: 1fr; }
  .pn-next { grid-column: auto; }
  .hist .hist-row { grid-template-columns: 1fr; gap: 12px; }
  .svc-row, .contact, .svc-section.has-img { grid-template-columns: 1fr; }
  .split, .split.is-flip { grid-template-columns: 1fr; padding-inline: 0; row-gap: var(--tmg-sp-block); }
  .split-body { padding-inline: var(--tmg-gutter); }
  .split-media { order: 2; margin-left: var(--tmg-gutter); aspect-ratio: 4 / 3; }
  .is-flip .split-media { margin: 0 var(--tmg-gutter) 0 0; }
  .split-media::before, .split-media::after, .split-inset { display: none; }
  .pillars { grid-template-columns: 1fr; }
  .hist { grid-template-columns: 1fr; }
  .hist-media { position: relative; top: auto; height: auto; aspect-ratio: 16 / 9; }
  .pn-next { text-align: left; }
  .pn-next .pn-label { flex-direction: row; }
  .contact-map { --map-h: 360px; }
  .ot-divs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-row.is-rev .svc-row-media { order: 0; }
  .footer-top { grid-template-columns: 1fr; }
  .about-media { aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
  .grid, .org-divs, .story-list, .svc-details-grid, .ot-divs { grid-template-columns: 1fr; }
  .ot-staff { grid-template-columns: 1fr; justify-items: center; row-gap: 12px; padding: 24px 0; }
  .ot-staff::before { z-index: -1; }
  .ot-staff-item.is-left, .ot-staff-item.is-right { grid-column: 1; grid-row: auto !important; justify-content: center; }
  .ot-staff-item::after { display: none; }
  .story-item:nth-child(n) { border-right: 0; padding-left: 0; }
  .stats-grid { grid-template-columns: 1fr; }
  .stat, .stat + .stat { padding: 28px 0 0; border-right: 0; }
  .stat:nth-child(n+2) { border-top: var(--tmg-border); margin-top: 28px; }
  .list-tools { flex-direction: column; align-items: stretch; }
  .search input { width: 100%; }
  .meta > div { grid-template-columns: 5.5em 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
.menu-open .site-header .lang-toggle.is-ko .lang-opt:first-child,
.menu-open .site-header .lang-toggle.is-en .lang-opt:nth-child(2) { color: var(--tmg-dark); }
/* 그리드 칸이 내용 길이 때문에 화면 밖으로 늘어나지 않게 */
.page-head, .detail-head { grid-template-columns: minmax(0, 1fr); }
.meta > div, .meta dd { min-width: 0; }
.meta dd { overflow-wrap: anywhere; }