/* =========================================================
   RTG — design-build site
   Reproduced from the client's Illustrator artboards
   (RTG-01.svg … RTG-08.svg, each a 1366x768 reference frame).
   All font-sizes / positions below are converted to vw so the
   1366px reference maps 1:1 onto a 1366px-wide viewport and
   scales proportionally from there.

   Fonts: the source files specify "Bahnschrift" (Windows system
   font) throughout. Bahnschrift can't legally be self-hosted as a
   webfont (Microsoft/Monotype restriction), so "Barlow" / "Barlow
   Semi Condensed" — the closest open-license match in weight,
   width and grotesque character — stand in here. Swap the
   @font-face / Google Fonts link for a licensed Bahnschrift webfont
   if the client licenses one through Monotype. See README.md.
   ========================================================= */

:root {
  --ink: #000000;          /* Bahnschrift text + about copy (source default fill) */
  --ink-strong: #231815;   /* Pretendard Bold — leadership names, contact address */
  --ink-body: #191919;     /* Pretendard Regular — leadership bullet lines */
  --white: #ffffff;
  --orange: #ff7a00;       /* intro + pitch section background (RTG-03/04/05.svg) */

  --font-kr: "Pretendard", -apple-system, "Malgun Gothic", sans-serif;
  --font-latin-wide: "Barlow", var(--font-kr);
  --font-latin-cond: "Barlow Semi Condensed", var(--font-kr);

  /* 1 design px on the 1366-wide artboards */
  --u: calc(100vw / 1366);

  /* shared left grid column — x=252.94 of 1366 (RTG-09~11) */
  --content-left: 18.517vw;
  --content-right: clamp(24px, 6vw, 120px);

  font-size: 16px;
}

* { box-sizing: border-box; }
/* 2026-10-15: "Work 페이지에서만 상단 메뉴 4개가 살짝 오른쪽으로 밀려있다"는
   제보 — 원인은 Work 페이지만 내용이 한 화면 안에 다 들어가서(목록 자체는
   .wk__list 안에서만 따로 스크롤되고, 문서 전체는 스크롤될 필요가 없음)
   세로 스크롤바가 아예 안 뜨는데, 다른 페이지(메인/About 등)는 내용이
   길어서 항상 세로 스크롤바가 뜹니다. 브라우저는 스크롤바가 있는 페이지는
   그만큼 화면을 좁게 쓰고 없는 페이지는 꽉 채워 쓰기 때문에, 오른쪽 끝에
   딱 붙여둔(position:fixed, right:0 기준) 메뉴의 실제 위치가 페이지마다
   스크롤바 두께(보통 15~17px)만큼 달라져 보였던 것입니다. scrollbar-gutter:
   stable로 스크롤이 필요 없는 페이지에서도 항상 그 자리를 미리 비워두게
   해서, 페이지 내용 길이와 상관없이 모든 페이지에서 메뉴 위치가 똑같이
   고정되도록 했습니다. */
html { scroll-behavior: smooth; scrollbar-gutter: stable; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-latin-wide);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* 사진 다운로드/복사 방지 (2026-10-15): 우클릭 저장, 드래그로 끌어서
   저장, 텍스트처럼 드래그해서 선택/복사하는 걸 막습니다. 완벽한 차단은
   아니고(개발자도구·화면캡처로는 여전히 가능) 가볍게 막아두는 수준이며,
   실제 "저장 메뉴" 차단은 js/protect-images.js(모든 페이지에 포함)가 함께 처리합니다. */
img {
  max-width: 100%;
  display: block;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  pointer-events: auto;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--ink); color: var(--white); }

.section-label {
  margin: 0 0 1.5em;
  font-family: var(--font-latin-cond);
  font-weight: 600;
  font-size: clamp(1rem, 1.318vw, 1.2rem); /* 18/1366 */
  line-height: 1;
}

/* ---------------------------------------------------------
   NAV — RTG / About / Work / Contact.
   2026-10-15: 원래는 디자인 원본의 uneven spacing을 그대로 재현하려고
   각 링크를 artboard x좌표(RTG 1059.35 · About 1124.38 · Work 1199.69 ·
   Contact 1271.08, 1366px 기준 vw 환산)에 position:absolute로 고정
   배치하고, 글자 크기도 vw 기준(12 * var(--u))으로 키/줄였습니다.
   그런데 (1) "화면 줄이면 글씨도 작아진다" 요청으로 글자 크기를 고정
   12px로 바꿨더니 — 이번엔 평소 보시던 넓은 모니터 기준(원래는 vw라
   화면이 넓을수록 12px보다 훨씬 크게, 예: 2560px 화면에서 약 22px로
   보였음)보다 "너무 작아졌다"는 피드백을 받았고, (2) 글자를 그냥
   키우기만 하면 고정 vw 위치(left) 간격이 좁아 큰 글자끼리 서로
   겹치는 문제가 생깁니다. 그래서 position:absolute+vw좌표 방식을
   버리고, 모바일 때부터 이미 쓰던 "flex로 오른쪽 정렬 + gap" 방식을
   전체 화면 폭에 똑같이 쓰도록 통일했습니다 — 글자가 몇 px든 flex가
   알아서 간격을 띄워주므로 겹칠 일이 없고, 디자인 원본의 "짧은 간격"
   느낌은 gap 값으로 비슷하게 맞췄습니다. */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  pointer-events: none;
  transition: background-color .25s ease;
}

.nav--solid,
.nav.is-solid { background: var(--white); }
.nav--solid { pointer-events: auto; }

.nav__inner {
  position: relative;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 56px;
  padding: 58px 50px 26px 24px;
  pointer-events: none;
}

.nav__link {
  position: relative; /* ::after(밑줄)의 기준점 — static이면 밑줄이 nav 전체 폭으로 퍼짐 */
  font-family: var(--font-latin-cond);
  /* 처음 12px → "2배 이상 키워줘"로 26px → "너무 커졌다"는 피드백으로
     다시 18px로 조정. 화면 폭이 바뀌어도 이 크기 그대로 유지됩니다. */
  font-size: 17px;
  line-height: 1;
  font-weight: 400;
  white-space: nowrap;
  pointer-events: auto;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}

.nav__link:hover::after,
.nav__link:focus-visible::after { transform: scaleX(1); }

/* ---------------------------------------------------------
   01+02 — HERO + INTRO PHOTO, merged into one scroll-pinned
   sequence (see the HTML comment above #heroIntroWrap for why).
   The logo is reproduced 1:1 from RTG-01/02 — full size, dead-
   centered in the viewport, exactly as designed — and simply
   sits BEHIND the curtain/photo layers in paint order, so the
   rising orange curtain naturally covers it as you scroll.

   The curtain/photo motion itself is reproduced from two of the
   client's own SVG keyframes:
     RTG-04.svg — the settled end state: orange fills the full
       1366x768 frame, photo at 900.36x561.6 (65.92vw wide,
       2501:1561 ratio, size never changes), centered
       horizontally, top edge at 118.82/768 = 15.47vh.
     RTG-03.svg — a mid-scroll keyframe the client exported to
       show the motion: the orange field covers only the bottom
       50.95% of the frame (curtain rising from below), while the
       photo — ALWAYS AT ITS FULL FINAL SIZE, never growing — is
       still mostly below the fold, so only its top ~126px edge
       peeks above the bottom of the viewport. Checked against the
       "constant size, just sliding up" model: at this keyframe
       the photo's top would sit at 643.37/768 = 83.77vh, which
       clips against the 100vh viewport bottom to a visible sliver
       of (100 - 83.77) = 16.23vh ≈ 125px — matches the sampled
       126px almost exactly, confirming the photo never resizes,
       it only translates into place.
   #heroIntroWrap is a scroll track (130svh — just enough runway
   for the curtain/photo motion, no separate dead-white hero
   screen in front of it anymore); #home pins to the viewport
   (position: sticky) while js/script.js reads scroll progress
   through that track and drives --curtain (the orange panel's
   height, growing from the bottom) and --frame-top (the photo's
   vertical position, sliding up — width/height of the photo box
   itself are fixed by CSS alone and never touched by JS, so it
   can't ever grow/shrink or distort).
--------------------------------------------------------- */
.hero-intro-wrap {
  position: relative;
  height: 130svh;
}

.hero-intro {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6vw;
  --curtain-scale: 0;
  --frame-top: 135vh;
}

.hero-svg {
  position: relative;
  z-index: 1; /* behind the curtain/photo so they cover it as they rise */
  width: min(92vw, 1400px);
  height: auto;
  cursor: pointer;
  overflow: visible;
}

/* role="button"/tabindex on the SVG makes the browser draw its default
   focus-rect (a box around the whole mark) on click — remove that, but
   keep a visible ring for keyboard (Tab) users */
.hero-svg:focus { outline: none; }
.hero-svg:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }

.cutout { fill: var(--white); }
.hero-svg .hero-mark path,
.hero-svg .hero-mark polygon { fill: var(--ink); }
.hero-svg .hero-mark .cutout { fill: var(--white); }

.hero-mark { transition: opacity .5s ease; }

/* 2026-10: svg 안의 <text>였을 때는 CSS font-size(vw/clamp)로 정해둔
   값이 svg 자체의 viewBox 축소 비율(width: min(92vw,1400px) ÷ 1366)로
   한 번 더 곱해져서, 모바일처럼 svg가 많이 작아지는 화면에서는 문구가
   거의 안 보일 만큼(3~4px) 작아지는 이중 축소 문제가 있었습니다. 일반
   HTML 텍스트로 빼서 svg 축소와 무관하게 독립적으로 크기를 줍니다. */
.hero-text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-family: var(--font-latin-cond);
  font-weight: 300; /* Bahnschrift-LightSemiCondensed in the source */
  color: var(--ink);
  font-size: clamp(1.1rem, 1.757vw, 1.8rem);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease .05s;
}

.hero-intro:has(#heroSvg:hover) .hero-text-overlay,
.hero-intro:has(#heroSvg.is-active) .hero-text-overlay { opacity: 1; }

.hero-svg:hover .hero-mark,
.hero-svg.is-active .hero-mark { opacity: 0; }

.intro__curtain {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%; /* always full height; the reveal itself is a transform
                    (scaleY), not a height change — see comment below */
  transform: scaleY(var(--curtain-scale));
  transform-origin: bottom; /* bottom-anchored, same as the old height
                                animation: scaling from the bottom edge
                                grows the panel upward the same way a
                                growing height would, but doesn't force
                                a layout recalc on every scroll frame */
  background: var(--orange);
  z-index: 2;
  pointer-events: none; /* purely visual — must never steal the logo's
                            :hover as it rises up and covers it while
                            scrolling, or the hover state flickers */
  will-change: transform;
}

.intro__frame {
  position: absolute;
  left: 50%;
  top: 0;
  width: 65.92vw;
  aspect-ratio: 2501 / 1561; /* fixed size always — only the translateY
                                 offset below ever animates */
  /* top은 0으로 고정해두고 세로 이동은 translate(..., --frame-top)로—
     top을 직접 바꾸면 스크롤할 때마다 레이아웃을 다시 계산해야 해서
     폰에서 버벅였던 원인 중 하나였습니다(.intro__curtain과 같은 이유,
     위 주석 참고). transform은 레이아웃을 건드리지 않고 GPU 합성만으로
     처리되어 훨씬 부드럽습니다. */
  transform: translate(-50%, var(--frame-top));
  overflow: hidden;
  z-index: 3;
  pointer-events: none; /* same reason as .intro__curtain above */
  will-change: transform;
}

.intro__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
}

.intro__img--a.is-visible,
.intro__img--b.is-visible { opacity: .9; } /* matches RTG-03's photo opacity: .9 */

@media (prefers-reduced-motion: reduce) {
  /* skip the scroll-jacked reveal entirely: show the settled
     RTG-03 state as a normal static section (the logo is part of
     the scroll story, not the resting state, so it's hidden here) */
  .hero-intro-wrap { height: auto; }
  .hero-intro { position: relative; height: 100svh; }
  .hero-svg { display: none; }
  .intro__curtain { transform: scaleY(1) !important; }
  .intro__frame {
    transform: translate(-50%, 27.21vh) !important;
  }
}

/* ---------------------------------------------------------
   03 — PITCH — same orange field continues; headline (Pretendard
   Bold 48px) + 01/02/03 three-column feature grid. Reproduced from
   the client's latest RTG-05.svg (headline baseline at 233.44/768 =
   30.4vh from the top of the section — much more top space than the
   section's own flow previously gave it — then the 3-column grid
   following at its already-correct spacing below).
   Left/right gutter is its own narrow ~4.2vw, not the --content-left
   column the rest of the site uses — this grid runs much wider.
--------------------------------------------------------- */
.pitch {
  background: var(--orange);
  padding: clamp(100px, 25.84vh, 260px) 4.21vw clamp(160px, 24vh, 280px);
}

.pitch__headline {
  margin: 0 0 clamp(70px, 14vw, 200px);
  max-width: 72vw; /* wide enough that the 2nd line (~70.7vw as rendered
                       in the substituted web font) stays on one line —
                       60vw was wrapping it onto an unwanted 3rd line */
  font-family: var(--font-kr);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.514vw, 3.4rem); /* 48/1366 */
  line-height: 1.667; /* 80/48 */
  color: var(--white);
}

/* 2026-10: the original RTG-05 had 3 contiguous zero-gap tracks
   hand-sized to the old, shorter copy — once the headings grew and
   a subtitle line was added, those fixed widths broke (col 3 pushed
   right, 02 off-centre). First fix was equal 1fr tracks + a real
   gap, but that just traded one problem for another: with equal-
   width columns the *box* gaps were even, but column 2's heading
   ("02  System Driven Management") is far longer than column 1's or
   3's, so it nearly filled its box and the *visible* gap after it
   looked much tighter than the gap after column 1 — exactly the
   "2 and 3 are too close, push 3 right" issue reported. Switched to
   flex + space-between: each column shrinks to its own content width
   (so the gap is measured from real text edge to real text edge, not
   from an arbitrary equal-width box edge) and the leftover space is
   split evenly between the three gaps, so they stay visually equal
   no matter how the copy changes later. */
.pitch__grid {
  display: flex;
  justify-content: space-between;
  column-gap: 24px; /* floor so columns never touch if content ever grows */
  row-gap: 48px;
}

.pitch__col {
  flex: 0 0 auto;
}

.pitch__col h3 {
  margin: 0 0 .5em;
  font-family: var(--font-kr);
  font-weight: 600;
  font-size: clamp(1.15rem, 2.343vw, 2.1rem); /* 32/1366 */
  color: var(--white);
  letter-spacing: -.02em;
}

/* new 2026-10 subtitle line (RTG-05.svg cls-2: 18px SemiBold) between
   the h3 and the body paragraph — same weight as h3, a step smaller */
.pitch__col-sub {
  margin: 0 0 1.4em;
  font-family: var(--font-kr);
  font-weight: 600;
  font-size: clamp(0.85rem, 1.757vw, 1.6rem); /* 24/1366 */
  color: var(--white);
  opacity: .85;
  letter-spacing: -.02em;
}

.pitch__col p {
  margin: 0;
  font-family: var(--font-kr);
  font-weight: 300;
  font-size: clamp(0.85rem, 1.171vw, 1.05rem); /* 16/1366 */
  line-height: 1.75; /* 28/16 */
  color: var(--white);
  opacity: .7;
  white-space: nowrap; /* lines are broken by hand (<br>) as in RTG-05 */
}

/* ---------------------------------------------------------
   03 — WORK / GALLERY — full-bleed, aspect ratios taken from
   each linked image's real width/height in RTG-04 / RTG-05
--------------------------------------------------------- */
.work {
  position: relative;
  padding: clamp(90px, 15vh, 180px) 0; /* more breathing room above/below the
                                           photo row itself */
  margin-top: clamp(120px, 18vh, 220px); /* additional white gap on top of .pitch's own bottom padding */
}

.work__track {
  display: flex;
  gap: clamp(2px, 0.35vw, 6px);
  overflow-x: auto;
  overflow-y: hidden;
  /* no CSS scroll-behavior: smooth here — the arrow buttons ask for smooth
     scrolling explicitly on their own scrollBy() call; applying it globally
     made every wheel tick (js/script.js) restart a smooth-scroll animation
     out from under the previous one, which is what caused the stutter */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.work__track::-webkit-scrollbar { display: none; }

.work__item {
  flex: 0 0 auto;
  height: clamp(280px, 46vw, 560px);
  margin: 0;
}

/* Each .work__item's aspect-ratio is now set inline in index.html instead of
   here via :nth-child — js/script.js clones the first/last item for the
   seamless wheel loop, which would shift every :nth-child index and apply
   the wrong ratio to the wrong (and the cloned) items. */

/* photos that belong to a project open its detail page */
.work__link { flex: 0 0 auto; display: block; }
.work__link .work__item img { transition: opacity .3s ease; }
.work__link:hover .work__item img { opacity: .85; }

.work__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work__arrow {
  /* just the glyph — no circle/border/background, kept small so it doesn't
     compete with the photos; the button's own box is a bit larger than the
     visible icon purely for a comfortable click/tap target. */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: clamp(40px, 3.6vw, 52px);
  height: clamp(40px, 3.6vw, 52px);
  border: none;
  background: transparent;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity .2s ease, transform .2s ease;
}

.work__arrow svg { width: 24px; height: 24px; }

.work__arrow:hover { opacity: 1; transform: translateY(-50%) scale(1.15); }
.work__arrow--left  { left: clamp(6px, 1.4vw, 18px); }
.work__arrow--right { right: clamp(6px, 1.4vw, 18px); }

/* ---------------------------------------------------------
   04 — LEADERSHIP — col1 x=252.94 (18.52vw), col2 x=897.65 (65.71vw)
   (gap between the two co-CEOs widened in the latest RTG-09)
   name 18px, body 14px/24.86 line-height
--------------------------------------------------------- */
.leadership {
  padding: clamp(120px, 20vh, 240px) var(--content-right) clamp(50px, 8vh, 100px) var(--content-left); /* more gap so it doesn't share one screen with the work gallery */
}

.leadership__inner { max-width: 1200px; }

.leadership__grid {
  display: grid;
  /* 2026-10: 예전엔 1번째 칸 너비를 calc(65.714vw - var(--content-left))로
     뷰포트 기준(vw)으로 정했는데, --content-left도 똑같이 vw 단위라 두
     값이 서로 비례해서 사실상 항상 "47.197vw" 고정값이 되어버렸고, 그게
     .leadership__inner의 max-width:1200px 제한과 안 맞았습니다 — 화면이
     넓을수록(특히 1920px 이상 와이드 모니터) 1번째 칸은 뷰포트에 비례해
     계속 커지는데, 전체 그리드 폭은 1200px에서 멈춰버리니 2번째 칸(전승준
     공동대표)이 갈수록 짜부러져서, 아주 넓은 화면에서는 폭이 30px대까지
     줄어들어 글자가 한 글자씩 세로로 줄바꿈되는 문제가 있었습니다(제작자
     본인 모니터처럼 1920px 미만에서는 안 보이다가 더 넓은 모니터에서만
     나타남). 두 칸 모두 그리드 자신의 실제 폭(뷰포트가 아니라, 1200px로
     막힌 뒤의 폭 포함) 기준 비율로 나누도록 fr 단위로 바꿔서, 어떤 화면
     너비에서도 5:3 비율이 항상 유지되도록 고쳤습니다(1366px 기준 디자인
     시안의 원래 비율과 거의 동일, 0.3px 이내 오차). */
  grid-template-columns: 5fr 3fr;
  column-gap: 0;
  row-gap: 40px;
}

.leader h3 {
  margin: 0 0 1.128em; /* 38.3-18 = 20.3px @18px */
  font-family: var(--font-kr);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.318vw, 1.3rem); /* 18/1366 */
  color: var(--ink-strong);
  letter-spacing: -.02em;
}

.leader ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.leader li {
  font-family: var(--font-kr);
  font-weight: 400;
  font-size: clamp(0.85rem, 1.025vw, 0.98rem); /* 14/1366 */
  line-height: 1.776; /* 24.86/14 */
  color: var(--ink-body);
  letter-spacing: -.02em;
}

/* ---------------------------------------------------------
   05 — CONTACT — address x=252.94, email x=696.4 (50.98vw),
   phone x=1023.77 (74.95vw)
--------------------------------------------------------- */
.contact {
  /* 2026-10-19: 좌우 여백이 항상 똑같아야 한다는 요청으로, 왼쪽만 화면
     폭에 따라 훨씬 넓어지는 --content-left 대신 좌우 모두
     --content-right(24px~120px, 반응형)를 씁니다. 아래 Footer(.footer--main)
     도 폭이 계속 맞아야 하므로 똑같이 바꿨습니다 — 그 대신 Footer
     로고가 사이트의 다른 섹션들(Nav/Hero 등, --content-left 기준)보다는
     살짝 더 왼쪽에 옵니다. */
  padding: clamp(160px, 14.33vw, 260px) var(--content-right) clamp(90px, 10vw, 180px) var(--content-right);
}

/* 2026-10-19: 와이드 모니터에서는 Footer 폭(= .contact의 padding 안쪽
   전체 폭)에 그대로 맞추면 세 항목 사이 간격이 너무 넓어져서, 최대
   1300px로 다시 캡을 씌웠습니다(아래 Footer 줄도 똑같이 1300px 캡을
   맞춰서 두 줄은 계속 서로 일치합니다). 화면이 1300px+패딩보다 좁으면
   전처럼 패딩 안쪽을 꽉 채웁니다.
   margin:0 auto 필수 — 캡이 걸리는 와이드 화면에서 이게 없으면 또
   왼쪽 패딩 바로 뒤에 붙어버려서 오른쪽 여백만 커지는 예전 문제가
   그대로 재발합니다(양옆 패딩 자체는 이미 동일하지만, 1300px로 막힌
   뒤 남는 여유 폭을 좌우로 똑같이 나눠줘야 함). */
.contact__inner { max-width: 1300px; margin: 0 auto; }

/* justify-content:space-between으로 첫 항목(주소)은 왼쪽 끝에,
   마지막 항목(전화번호)은 오른쪽 끝에 딱 붙고, 가운데 간격은 남는
   폭만큼 자동으로 벌어집니다 — 예전 그리드(43.007%/31.75%/1fr)처럼
   전화번호 뒤에 빈 칸이 남거나 폭이 좁아지며 글자가 줄바꿈되는 문제가
   없습니다. */
.contact__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: clamp(24px, 4vw, 80px);
  row-gap: 10px;
}

.contact__row p {
  margin: 0;
  font-size: clamp(1rem, 1.318vw, 1.2rem); /* 18/1366 */
}

.contact__address {
  font-family: var(--font-kr);
  font-weight: 400; /* Pretendard Regular — matches .contact__email/.contact__phone's weight */
  color: var(--ink-strong);
  letter-spacing: -.02em;
}

.contact__email a,
.contact__phone a {
  font-family: var(--font-latin-cond);
  font-weight: 400;
  color: var(--ink);
}

.contact__email a:hover,
.contact__phone a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------------------------------------------------------
   06 — FOOTER — boxed mark, reproduced from RTG-08's own
   viewBox (already cropped to the mark's bounds)
--------------------------------------------------------- */
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: clamp(60px, 9.96vw, 140px) 24px clamp(48px, 8vh, 96px);
}

.footer__mark {
  width: clamp(140px, 11.5vw, 220px);
  height: auto;
}

.footer__legal {
  margin: 0;
  font-family: var(--font-latin-cond);
  font-size: 0.78rem;
  color: var(--ink-body);
  letter-spacing: 0.02em;
}

/* 2026-10: 확장형 Footer — 주황 배경에 로고 + 연락처 + 인재채용/
   회사소개서 링크를 한 줄로 배치. 처음엔 index.html에서만 쓰다가
   2026-10-15에 about.html도 똑같이 쓰도록 바뀌었습니다(work.html /
   project.html은 아직 footer 자체가 없음) — .footer--main이 붙은
   경우에만 적용됩니다. */
.footer--main {
  flex-direction: column;
  align-items: stretch;
  gap: clamp(16px, 2.5vw, 28px);
  background: var(--orange);
  /* 2026-10-19: 위 Contact 섹션과 좌우 폭이 항상 같아야 해서, 거기 맞춰
     왼쪽도 --content-left 대신 --content-right로 바꿨습니다(양쪽 다
     동일한 여백). */
  padding: clamp(48px, 6vw, 90px) var(--content-right) clamp(28px, 4vw, 48px) var(--content-right);
}

.footer--main .footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  /* 2026-10-19: 위 .contact__inner와 똑같이 최대 1300px 캡 + margin:0
     auto로 맞췄습니다 — 캡만 걸고 가운데 정렬을 안 하면 Contact 쪽과
     똑같이 왼쪽에 붙어 오른쪽 여백만 커지는 문제가 생깁니다.
     width:100%도 꼭 필요합니다 — 이 줄은 .footer--main(flex column)의
     자식(flex item)이라, margin:auto를 쓰면 flex의 기본 "꽉 채우기"
     동작이 꺼지면서 내용물 크기로 쪼그라들어 버립니다(그러면 폭이
     Contact 쪽보다 훨씬 좁아짐) — width:100%로 다시 꽉 채우게
     고정합니다. */
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
}

.footer--main .footer__mark {
  width: clamp(90px, 7vw, 130px);
  flex: none;
}

/* 로고 안쪽(네거티브 스페이스/글자 홈)을 주황으로 — 주황 배경 위에서
   박스 속이 뚫려 배경이 비쳐 보이는 느낌. .cutout 자체는 전역에서
   흰색(흰 배경용)이므로, 이 footer 안에서만 덮어씁니다. */
.footer--main .footer__mark .cutout { fill: var(--orange); }

.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer__contact p { margin: 0; }

.footer__email a,
.footer__phone a {
  font-family: var(--font-latin-cond);
  font-weight: 400;
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  color: var(--ink-strong);
}

.footer__email a:hover,
.footer__phone a:hover { text-decoration: underline; text-underline-offset: 3px; }

.footer__address {
  font-family: var(--font-kr);
  font-weight: 400;
  font-size: clamp(0.8rem, 0.95vw, 0.9rem);
  color: var(--ink-strong);
  letter-spacing: -.01em;
}

.footer__links {
  display: flex;
  gap: clamp(20px, 2.5vw, 36px);
  margin-left: auto;
}

.footer__link {
  font-family: var(--font-kr);
  font-weight: 500;
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  color: var(--ink-strong);
  letter-spacing: -.01em;
}

.footer__link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 2026-10-19: 저작권 줄도 위 .footer__row와 똑같이 1300px 캡 +
   margin:0 auto + width:100%를 줘서, 로고(= footer__row의 왼쪽 끝)와
   항상 같은 왼쪽 선에 맞도록 했습니다 — 안 그러면 이 줄만 옛날처럼
   패딩 바로 안쪽(더 왼쪽)에 남아 로고보다 왼쪽으로 삐져나와 보입니다. */
.footer--main .footer__legal {
  color: var(--ink-strong);
  opacity: .65;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
}

@media (max-width: 700px) {
  .footer--main { padding: 40px 24px 32px; }
  /* margin:0으로 덮어쓰지 않으면 위에서 추가한 margin:0 auto가 그대로
     적용돼 폰 화면에서 이 줄(로고+연락처)만 가운데로 쏠려 저작권
     줄(.footer__legal, 그대로 왼쪽 정렬)과 어긋납니다. */
  .footer--main .footer__row { flex-direction: column; align-items: flex-start; gap: 20px; width: auto; margin: 0; }
  .footer__links { margin-left: 0; }
}

/* =========================================================
   ABOUT PAGE (about.html) — RTG-13 ~ RTG-17
   All sizes are artboard px × --u (1 design px at 1366 wide),
   so the page scales exactly like the 1366×768 artboards.
   ========================================================= */
/* --- intro band: orange 0–284, Pretendard Medium 20 / 36.
   RTG-13.svg has this text at x=45.08, but that leaves it starting
   to the left of "Philosophy" below (.ab-sec__heading, x≈118.56) —
   2026-10: lined up with that instead, since the two reading top to
   bottom look better left-aligned than following the SVG's x exactly. */
.ab-intro {
  background: var(--orange);
  height: calc(284 * var(--u));
  padding: calc(130 * var(--u)) var(--content-right) 0 calc(118.56 * var(--u));
}

.ab-intro__text {
  margin: 0;
  font-family: var(--font-kr);
  font-weight: 500;
  font-size: max(15px, calc(20 * var(--u)));
  line-height: 1.8; /* 36/20 */
  letter-spacing: -.01em;
  color: var(--ink);
}

/* --- the sticky Philosophy/Services tab bar (and its scrollspy JS in
       js/about.js) was removed 2026-10: the client's actual new design
       (RTG-13/14/15.svg) isn't a tabbed switcher, it's a plain page —
       each section carries its own heading right in the flow (see
       .ab-sec__heading below) and Philosophy/Services simply appear one
       after another as you scroll, same as every other page on the
       site. See about.html for the section comments. --- */

/* shared orange section heading used by both Philosophy ("Philosophy",
   English-only per RTG-14.svg) and Services ("Services 사업분야", per
   RTG-15.svg) — both sit at the same x≈118.56 left indent as the
   content below them */
.ab-sec__heading {
  margin: 0 0 calc(40 * var(--u)) calc(118.56 * var(--u));
  font-family: var(--font-kr);
  font-weight: 600;
  font-size: max(22px, calc(36 * var(--u)));
  letter-spacing: -.01em;
  color: var(--orange);
}

.ab-sec__heading-kr { margin-left: .3em; }

/* --- PHILOSOPHY: 2026-10 재작업. 처음엔 1/2/3을 가로로 나란히 둔 3칼럼
   그리드로 잘못 만들었었는데, RTG-14.svg 원본 좌표를 보면 모든 소제목이
   x≈118.56, 모든 본문이 x≈557에 있어서 — 왼쪽 "제목 칸" + 오른쪽
   "본문 칸"으로 된 한 행(row)이 1/2/3 세 번 세로로 반복되는 구조. 행
   사이 간격(110u)도 SVG의 각 블록 y좌표 차이를 그대로 땄음 --- */
.ab-philo {
  padding: calc(80 * var(--u)) 0 calc(140 * var(--u));
}

.ab-philo__rows {
  display: flex;
  flex-direction: column;
  gap: calc(75 * var(--u)); /* 2026-10: 줄여달라는 요청으로 110u → 75u */
  padding: 0 calc(118.56 * var(--u));
}

.ab-philo__row {
  display: grid;
  grid-template-columns: calc(360 * var(--u)) 1fr;
  column-gap: calc(40 * var(--u));
  align-items: start;
}

.ab-philo__label h3 {
  margin: 0;
  font-family: var(--font-kr);
  font-weight: 600;
  font-size: max(20px, calc(30 * var(--u)));
  line-height: 1.2;
  letter-spacing: -.01em;
  text-align: left;
}

/* 2026-10-15: 원래 RTG-14.svg 원본 디자인엔 1번 행에 소제목이 없어서
   2번/3번 행에만 썼었는데, 1번 행에도 소제목("기술과 공학 중심의
   품질 관리")을 추가해달라는 요청으로 이제 세 행 모두 씁니다. */
.ab-philo__sub {
  margin: calc(15.8 * var(--u)) 0 0;
  font-family: var(--font-kr);
  font-weight: 600;
  font-size: max(12px, calc(14 * var(--u))); /* 14px — SVG의 cls-11, 예전엔 18px로 잘못 썼었음 */
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ink);
}

.ab-philo__content p {
  margin: 0;
  font-family: var(--font-kr);
  font-weight: 400;
  font-size: max(13px, calc(14 * var(--u)));
  line-height: calc(30 * var(--u));
  text-align: justify;
  color: var(--ink);
}

/* --- SERVICES: 2026-10 revision. Was two separate sections (a plain
   centred Approach list + a 4-photo Services strip with title-only
   labels) — merged per client request into this single section,
   reproduced from RTG-15.svg: an orange "Services 사업분야" heading
   (indented, via .ab-sec__heading) over a full-bleed 2x2 grid of photo
   cards (no left/right gutter, unlike the heading — matches the
   reference layout), each with a title, a short subtitle (the
   4th/공공매입임대주택 card has none, per the SVG) and a body
   paragraph. See the section comment in about.html for the photo
   substitutions. --- */
.ab-services {
  /* 2026-10-15: 아래 여백(Footer 시작 전 흰 여백)이 너무 좁다는 피드백으로
     60u(1366px 기준 약 60px)에서 넉넉하게 키웠습니다. */
  padding: calc(110 * var(--u)) 0 clamp(100px, 11vw, 200px); /* enough clearance that the heading never sits under the fixed nav */
}

.ab-services__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: calc(2 * var(--u));
  height: calc(100svh - 110 * var(--u) - 76 * var(--u)); /* 76u ≈ heading's own line-height + bottom margin */
  min-height: 560px;
}

/* 2026-10: text used to be align-items:center (vertically centered as
   a block). That centered each card's h3+sub+body stack on its OWN
   total height, so a card with a 2-line body (or, for the public-
   housing card, no subtitle at all) had a different stack height and
   its heading landed at a different y than the other cards' headings
   — exactly the "titles/subtitles/body don't line up row to row"
   problem reported. Anchoring to a fixed padding-top instead pins
   every heading to the same y regardless of how its own body wraps;
   see the invisible &nbsp; subtitle on the public-housing card in
   about.html, which reserves that row's height so its body still
   starts at the same y as the other three cards' bodies. */
.ab-services__item {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: calc(80 * var(--u));
  background: #222;
  min-height: 260px;
}

.ab-services__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* uniform dark overlay for legible white text over any photo — the
   source SVG only darkened the right-hand cards (its own two photos
   were already darker on the left), but since 3 of our 4 photos are
   different substitutes, a consistent overlay reads better here */
.ab-services__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .4);
}

.ab-services__text {
  position: relative;
  z-index: 1;
  max-width: 80%;
  text-align: center;
  color: var(--white);
}

.ab-services__text h3 {
  margin: 0;
  font-family: var(--font-kr);
  font-weight: 600;
  font-size: max(18px, calc(36 * var(--u)));
  line-height: 1.2;
  letter-spacing: -.02em;
}

.ab-services__sub {
  margin: calc(8 * var(--u)) 0 0;
  font-family: var(--font-kr);
  font-weight: 600;
  font-size: max(12px, calc(18 * var(--u)));
  line-height: 1.2; /* explicit, not "normal" — the public-housing card's
    invisible &nbsp; placeholder (see about.html) renders with a plain
    space glyph that gets slightly different "normal" line metrics than
    the other cards' real Korean text, which threw the body paragraph
    below it off by a few px; a fixed line-height makes all 4 identical */
  letter-spacing: -.02em;
  opacity: .85;
}

.ab-services__body {
  margin: calc(24 * var(--u)) 0 0;
  font-family: var(--font-kr);
  font-weight: 200;
  font-size: max(12px, calc(14 * var(--u)));
  line-height: 1.6;
  opacity: .85;
}

/* =========================================================
   WORK PAGE (work.html) — RTG-12
   "Work" 116.89px at x 57.43 (baseline 233.89); photo 625×390
   at (57.43, 292.81); list x 801.81 → 1315.23, rows 51.55 apart
   ========================================================= */
.wk {
  padding: 0 calc(50.77 * var(--u)) calc(60 * var(--u)) calc(57.43 * var(--u));
}

.wk__title {
  margin: 0;
  padding-top: calc(68.7 * var(--u));   /* 60 less than RTG-12 — gap under the nav tightened */
  height: calc(210.38 * var(--u));
  font-family: var(--font-latin-cond);
  font-weight: 400;
  font-size: max(56px, calc(116.89 * var(--u)));
  line-height: 1;
  letter-spacing: -.02em;
}

/* Photo and list form one fixed block: both start on the same top line
   and end on the same bottom line (the photo's 390 height). Only the
   list scrolls, inside its own box. */
.wk__body {
  --wk-h: calc(625.25 * var(--u) * 1560 / 2501);
  display: grid;
  grid-template-columns: calc(625.25 * var(--u)) 1fr;
  column-gap: calc(91.76 * var(--u)); /* list starts at x 774.44 (RTG-12) */
  align-items: start;
}

.wk__media { position: relative; }

.wk__list {
  height: var(--wk-h);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  /* soft fade at the bottom edge hints that the list continues */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent);
}

.wk__list::-webkit-scrollbar { display: none; }

.wk__list.is-end {
  -webkit-mask-image: none;
          mask-image: none;
}

.wk__frame {
  position: relative;
  height: var(--wk-h); /* always fixed — never grows/shrinks with the hovered photo */
  width: auto;
  max-width: calc(625.25 * var(--u)); /* don't overflow the column for an extra-wide photo */
  aspect-ratio: 2501 / 1560; /* default until js/work.js knows the hovered photo's own ratio */
  justify-self: start; /* don't stretch to fill the grid column — width follows height × ratio */
  overflow: hidden;
  background: transparent;
  transition: background-color .4s ease;
}

.wk__frame.is-empty { background: #eeeeee; }

.wk__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* frame is now sized to each photo's own ratio (js/work.js) — contain avoids any crop while it loads */
  opacity: 0;
  transform: translateX(0);
  transition: opacity .45s ease, transform .4s ease;
}

.wk__img.is-visible { opacity: .9; } /* RTG-12 photo opacity */

/* name 774.44 · designer 989 · category right edge 1200.3 · year right edge 1315.23 */
.wk-row {
  display: grid;
  grid-template-columns: calc(214.56 * var(--u)) 1fr auto calc(114.93 * var(--u));
  align-items: last baseline;
  height: calc(51.55 * var(--u));
  padding-bottom: calc(6.7 * var(--u));
  border-bottom: 1px solid rgba(0, 0, 0, .18);
  font-size: max(11px, calc(12 * var(--u)));
  line-height: 1;
  cursor: pointer;
  outline: none;
}

.wk-row > span { align-self: end; }

/* first row is cut down to its text so the first project name's top
   sits exactly on the photo's top edge */
.wk-row:first-child { height: calc(12 * var(--u) + 6.7 * var(--u) + 2px); }

.wk-row__name,
.wk-row__designer,
.wk-row__cat {
  font-family: var(--font-kr);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -.01em;
}

.wk-row__name { padding-right: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-row__cat { white-space: nowrap; }

.wk-row__year {
  justify-self: end;
  font-family: var(--font-latin-cond);
  font-weight: 400;
}

.wk-row:focus-visible .wk-row__name { text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================
   PROJECT DETAIL (project.html) — RTG-17
   title 21px SemiBold at (57.43, 119.16); info 12px, 21.7 apart from
   172.62; photo fixed 499.2 high from y 161.32, centred, width follows
   the photo; bottom row 21px SemiBold on baseline 736.82.
   The page is one fixed screen — the wheel changes the photo.
   ========================================================= */
body.is-project { overflow: hidden; }

.pj {
  position: relative;
  height: 100svh;
  min-height: calc(560 * var(--u));
  overflow: hidden;
}

.pj__head {
  position: absolute;
  left: calc(57.43 * var(--u));
  top: calc(101.4 * var(--u));
  z-index: 2;
  max-width: calc(210 * var(--u));
}

.pj__title {
  margin: 0;
  font-family: var(--font-kr);
  font-weight: 600;
  font-size: max(17px, calc(21 * var(--u)));
  line-height: 1;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.pj__info {
  margin: calc(35.3 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
}

.pj__info li {
  font-family: var(--font-kr);
  font-weight: 400;
  font-size: max(11px, calc(12 * var(--u)));
  line-height: calc(21.7 * var(--u));
  color: var(--ink-body);
}

.pj__stage {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(161.32 * var(--u));
  height: min(calc(499.2 * var(--u)), calc(100svh - 268.8 * var(--u)));
  cursor: pointer;
}

.pj__stage.is-empty {
  left: 50%;
  right: auto;
  width: calc(800.32 * var(--u));
  transform: translateX(-50%);
  background: #eeeeee;
  cursor: default;
}

.pj__img {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: auto;
  max-width: none;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity .5s ease;
  user-select: none;
  -webkit-user-drag: none;
}

.pj__img.is-visible { opacity: 1; }

.pj__foot {
  position: absolute;
  left: calc(57.43 * var(--u));
  right: calc(50.77 * var(--u));
  bottom: calc(31.18 * var(--u) - 0.154em); /* baseline at y 736.82 */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  font-family: var(--font-kr);
  font-weight: 600;
  font-size: max(16px, calc(21 * var(--u)));
  line-height: 1;
  letter-spacing: -.01em;
}

.pj__cat { justify-self: center; }
.pj__year { justify-self: end; }

/* ---------------------------------------------------------
   RESPONSIVE — phone widths
--------------------------------------------------------- */
@media (max-width: 700px) {
  :root {
    --content-left: 24px;
    --content-right: 24px;
  }

  /* 2026-10-15: 이제 .nav__inner 기본 자체가 flex+오른쪽 정렬이라(위
     NAV 주석 참고) 여기서는 폰 화면에 맞게 gap/padding/글자 크기만
     더 좁게 줄여줍니다. */
  .nav__inner {
    gap: 16px;
    padding: 20px 20px;
  }
  .nav__link {
    font-size: 15px;
  }

  .leadership__grid {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }

  .contact__row {
    flex-direction: column;
    row-gap: 8px;
  }

  .work__item { height: 62vw; }

  /* 2026-10: 이 아래 텍스트("설계와 시공사이...")가 뜨기 전까지 주황
     배경만 끝없이 이어지는 빈 여백이 폰에서 유독 너무 넓었던 문제.
     원인: 바로 위 히어로 섹션(.hero-intro, 100svh)에 자리잡는 사진은
     가로:세로 2501:1561 고정 비율이라 — 가로로 넓고 낮은 데스크톱
     화면에서는 화면을 거의 채우지만, 세로로 길쭉한 폰 화면(폭 100vw
     기준 사진 세로는 약 62vw)에서는 사진 아래로 화면 높이의 거의
     절반 가까이가 빈 주황색으로 남고, 그 다음 .pitch 자신의 상단
     padding(25.84vh, 최대 260px)까지 더해져 사진부터 문구까지 거리가
     한 화면 높이 가까이 됐던 것입니다.
     (처음엔 .hero-intro 자체 높이를 모바일에서 줄여볼까 했는데, 그러면
     스크롤하기 전 맨 처음 로고가 뜨는 화면에서 로고 박스가 뷰포트보다
     짧아져서 그 아래로 흰 여백이 그대로 남아버리는 — 즉 "처음 들어왔을
     때 화면이 덜 채워진" 새로운 문제가 생겨서 포기했습니다.)
     실제로 고친 방법: .hero-intro의 높이/애니메이션은 그대로 두고,
     바로 다음에 오는 .pitch를 음수 margin-top으로 그 빈 공간 위로
     끌어올려 겹치게 했습니다 — 어차피 둘 다 같은 주황색이라 겹치는
     경계가 보이지 않습니다. 다만 .hero-intro가 position:sticky라
     원래는 자신보다 뒤에 오는 일반 문서흐름 요소(.pitch) 위에 그려져서
     겹친 부분의 글씨가 계속 가려지는 부작용이 있었는데, .pitch에도
     position:relative를 줘서(별도 z-index 없이, DOM 순서상 .pitch가
     더 뒤에 있으므로) .pitch가 .hero-intro 위로 그려지도록 바로잡아
     해결했습니다. */
  .pitch {
    position: relative;
    margin-top: -30vh;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: clamp(40px, 9vh, 90px);
  }
  .pitch__headline { max-width: none; }
  /* .pitch__grid은 2026-10에 grid(1fr 트랙)에서 flex+space-between으로
     바뀌었는데, 이 모바일 규칙이 예전 grid-template-columns:1fr 그대로
     남아있어서 flex 컨테이너에는 아무 효과가 없었습니다 — 그 결과 모바일
     에서도 3개 칼럼이 flex-direction:row로 한 줄에 나란히 서려다 글자가
     줄바꿈 안 되는(white-space:nowrap) 긴 문단 폭만큼 옆으로 삐져나가
     페이지 전체가 좌우로 스크롤되는 문제가 있었습니다. flex-direction:
     column으로 세로로 쌓이게 고쳤습니다. */
  .pitch__grid { flex-direction: column; row-gap: 36px; }
  .pitch__col { width: 100%; }
  .pitch__col p { white-space: normal; }
  .intro__frame { width: 100%; }

  /* about */
  .ab-intro { height: auto; padding: 96px 24px 40px; }
  .ab-intro__text br { display: none; }
  .ab-sec__heading { margin-left: 0; padding: 0 24px; font-size: 22px; margin-bottom: 24px; }
  .ab-philo { padding: 48px 0 56px; }
  .ab-philo__rows { padding: 0 24px; gap: 48px; }
  .ab-philo__row { grid-template-columns: 1fr; row-gap: 12px; }
  .ab-philo__label h3 { white-space: normal; }
  .ab-philo__content p { line-height: 1.9; }
  .ab-services { padding: 0 0 56px; }
  .ab-services__grid { grid-template-columns: 1fr; grid-template-rows: none; height: auto; min-height: 0; gap: 8px; }
  /* 데스크톱의 align-items:flex-start + 고정 padding-top은 2x2 그리드에서
     "같은 줄(행)에 있는 카드끼리 제목 높이를 맞추기" 위한 거였는데,
     모바일은 grid-template-columns:1fr라 카드가 한 줄에 하나씩만 있어서
     맞춰야 할 "같은 행의 다른 카드"가 없습니다 — 그래서 각 카드 글씨가
     그 카드 사진 높이 안에서 세로 중앙에 오도록 되돌렸습니다. */
  .ab-services__item { aspect-ratio: 4 / 3; min-height: 0; align-items: center; padding-top: 0; }
  .ab-services__text h3 { font-size: 20px; white-space: normal; }
  .ab-services__sub { font-size: 13px; }
  .ab-services__body { font-size: 13px; }


  /* work */
  .wk { padding: 0 20px 80px; }
  .wk__title { height: auto; padding: 96px 0 32px; }
  .wk__body { grid-template-columns: 1fr; row-gap: 24px; }
  .wk__media { position: sticky; top: 58px; z-index: 2; background: var(--white); padding-bottom: 12px; }
  .wk__list { height: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .wk-row:first-child { height: 48px; }
  .wk-row { grid-template-columns: 1fr auto auto; column-gap: 16px; height: 48px; padding-bottom: 12px; font-size: 13px; }
  .wk-row__designer { display: none; }

  /* project detail */
  .pj { height: 100svh; min-height: 0; }
  .pj__head { left: 20px; top: 70px; max-width: none; right: 20px; }
  .pj__title { white-space: normal; font-size: 20px; }
  .pj__info { margin-top: 12px; }
  .pj__info li { line-height: 1.7; font-size: 12px; }
  .pj__stage { top: 210px; height: calc(100svh - 300px); }
  .pj__stage.is-empty { width: calc(100% - 40px); }
  .pj__img { height: auto; max-height: 100%; width: auto; max-width: calc(100vw - 40px); top: 50%; transform: translate(-50%, -50%); }
  .pj__foot { left: 20px; right: 20px; bottom: 24px; font-size: 15px; }
}

/* 2026-10: 사이트 전체를 와이드 모니터 찌그러짐 버그(Leadership/Contact)
   점검하다가 같이 발견한, 별개의 가로 스크롤 버그 — .pitch__col이
   flex-shrink:0 + white-space:nowrap(손으로 줄바꿈 넣은 디자인 유지
   목적)이라 칼럼 자체가 줄어들지 않고 글자 폭 그대로 버텨서, 모바일
   전환점(700px)과 3칼럼이 넉넉히 들어가는 폭(대략 930px) 사이 —
   노트북 창을 반만 띄웠을 때나 일부 태블릿 가로 모드 같은 흔한 폭
   (701~1024px)에서 — 페이지가 옆으로 밀려 스크롤되는 문제가 있었습니다.
   전용 중간 분기점을 추가해 이 구간에서도 모바일과 같은 방식(세로로
   쌓기)으로 전환되게 했습니다. 다른 요소는 700px 분기점 그대로 두고
   pitch 칼럼만 따로 분기한 것 — 이 구간에서 실제로 넘치는 건 이것뿐
   이었습니다. */
@media (max-width: 1024px) {
  .pitch__grid { flex-direction: column; row-gap: 36px; }
  .pitch__col { width: 100%; }
  .pitch__col p { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-mark, .hero-text-overlay, .work__track { transition: none; }
}