/* 스튜디오 꼴 — 프로토타입 스타일
   미색 바탕 · 검정 글자 · 붉은 가이드선. 12단 그리드, 큰 여백, 한글 중심 + 짧은 영문 병기. */

:root{
  --bg:#F5F4EF;          /* 미색 */
  --plate:#EAE8E1;       /* 도판 받침 */
  --ink:#121212;
  --ink-2:#3A3A38;
  --mute:#6E6D69;        /* 읽는 회색 글자 — 미색 바탕 대비 4.70:1 (WCAG AA 4.5 이상) */
  --mute-deco:#8B8A86;   /* 장식 전용(도판 + 표시) — 글자가 아니므로 대비 예외 */
  --rule:#D9D7D0;
  --guide:#E3261C;       /* 가이드선 붉은색 — 견본 수치 라벨·섹션/작업 번호 등 장식 색인에만 쓴다(미색 대비 4.18:1, 대비 예외) */
  --dot:#D2D0C9;

  --margin:56px;
  --gutter:24px;
  --header:68px;
  --sec-gap:176px;

  --sans:"Pretendard Variable",Pretendard,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}
@media (max-width:1100px){ :root{ --margin:32px; --gutter:20px; --sec-gap:128px } }
@media (max-width:640px){ :root{ --margin:20px; --gutter:16px; --header:56px; --sec-gap:96px } }

*,*::before,*::after{ box-sizing:border-box }
*{ margin:0; padding:0 }
html{ scroll-behavior:smooth; scroll-padding-top:var(--header); -webkit-text-size-adjust:100% }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.7; letter-spacing:-.008em;
  word-break:keep-all; overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:"ss06";   /* Pretendard: 숫자 1 꼬리 없음 */
}
img{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
ol,ul{ list-style:none }
:focus-visible{ outline:1.5px solid var(--guide); outline-offset:3px }

.mono{ /* 첫 화면 견본 그래픽 전용 */ font-family:var(--mono); font-size:11px; line-height:1.4; letter-spacing:.04em; text-transform:uppercase; font-weight:400 }
/* 화면 라벨: 본문과 같은 Pretendard로 통일하고 크기·굵기·색으로 위계를 준다(mono는 첫 화면 견본 그래픽에만) */
.tag{ font-family:var(--sans); font-size:12px; line-height:1.4; font-weight:500; letter-spacing:.01em; font-variant-numeric:tabular-nums }
.en{ display:block; color:var(--mute); font-size:.875em; line-height:1.55; letter-spacing:0; margin-top:.35em }
.wrap{ padding-inline:calc(var(--margin) + env(safe-area-inset-left,0px)) calc(var(--margin) + env(safe-area-inset-right,0px)) }
.skip{ position:absolute; left:-9999px }
.skip:focus{ left:var(--margin); top:8px; z-index:20; background:var(--ink); color:var(--bg); padding:6px 10px }

/* 붉은 ↗ 표식 — 명함과 같은 규칙 */
i[aria-hidden]{ font-style:normal; color:var(--guide); font-size:.72em; margin-left:.45em; vertical-align:.18em; font-family:var(--sans); font-weight:500 }

/* ───────── 헤더 ───────── */
.top{
  position:sticky; top:0; z-index:10; height:var(--header);
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-bottom:1px solid transparent; transition:border-color .3s;
}
.top.is-scrolled{ border-bottom-color:var(--rule) }
.top-in{ height:100%; display:flex; align-items:center; justify-content:space-between; padding-inline:var(--margin) }
.brand img{ height:20px; width:auto }   /* 투명 바탕 SVG(ggol.ai 가로형에서 추출) */
.nav{ display:flex; gap:36px; font-size:14px; font-weight:500; letter-spacing:-.01em }
.nav a{ position:relative; padding:6px 0 }
.nav a::after{ content:""; position:absolute; left:0; right:0; bottom:2px; height:1px; background:var(--guide); transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.2,.7,.2,1) }
.nav a:hover::after, .nav a[aria-current]::after{ transform:scaleX(1) }
.nav-card{ padding-left:36px !important; border-left:1px solid var(--rule); margin-left:0 }
.nav-card::after{ left:36px !important }
.menu-btn{ display:none }

@media (max-width:640px){
  .brand img{ height:17px }
  .menu-btn{ display:block; height:40px; padding:0 2px; font-size:13px }
  .nav{
    position:fixed; inset:var(--header) 0 auto 0; height:calc(100svh - var(--header));
    flex-direction:column; gap:0; padding:24px var(--margin) 40px; background:var(--bg);
    font-size:34px; font-weight:700; letter-spacing:-.035em;
    visibility:hidden; opacity:0; transform:translateY(-6px); transition:opacity .25s, transform .25s, visibility 0s .25s;
  }
  .nav a{ padding:14px 0; border-bottom:1px solid var(--rule) }
  .nav a::after{ display:none }
  .nav-card{ padding-left:0 !important; border-left:0 }
  .top.is-open .nav{ visibility:visible; opacity:1; transform:none; transition:opacity .25s, transform .25s }
  .top.is-open{ background:var(--bg) }
}

/* ───────── 첫 화면: 글꼴 견본 ───────── */
.hero{
  display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gutter);
  grid-template-rows:auto 1fr auto;
  grid-template-areas:
    "meta meta meta meta meta meta meta meta meta meta meta meta"
    "text text text text text stage stage stage stage stage stage stage"
    "sub  sub  sub  sub  sub  stage stage stage stage stage stage stage";
  min-height:calc(100svh - var(--header)); max-height:1000px;
  padding-bottom:56px;
}
.hero-meta{ grid-area:meta; display:flex; justify-content:space-between; color:var(--mute); padding:14px 0 12px; border-bottom:1px solid var(--ink) }
.hero-meta b{ color:var(--ink); font-weight:500 }
.hero-meta output{ color:var(--ink); font-variant-numeric:tabular-nums; display:inline-block; min-width:3ch; text-align:right }

.hero-text{ grid-area:text; padding-top:128px; padding-right:24px }   /* 문장 윗선을 견본의 INK TOP 가이드선 높이에 맞춘다 */
.hero-statement{
  font-size:clamp(40px, 5.3vw, 80px); font-weight:700; line-height:1.14; letter-spacing:-.045em;
}
.hero-statement .vw{ font-weight:var(--wght, 760); transition:none }
/* ○○ 자리 단어 순환: 글자마다 굵기가 얇아지며 사라지고, 새 단어가 얇게 나타나 굵어진다(견본 굵기 축과 같은 언어) */
.rot{ display:inline-block; white-space:nowrap; transition:width .5s cubic-bezier(.2,.7,.2,1) }
.rot .ch{ display:inline-block; font-weight:700;
  transition:font-weight .55s cubic-bezier(.3,.6,.2,1) calc(var(--i) * 70ms), opacity .35s ease calc(var(--i) * 70ms) }
.rot.is-out .ch{ font-weight:100; opacity:0; transition:font-weight .4s cubic-bezier(.5,0,.8,.4) calc(var(--i) * 70ms), opacity .25s ease calc(var(--i) * 70ms + 220ms) }
.rot.is-pre .ch{ font-weight:100; opacity:0; transition:none }
.rot-measure{ position:absolute; visibility:hidden; pointer-events:none; width:auto !important; transition:none }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap }

.hero-sub{ grid-area:sub; align-self:end; padding-right:24px }
.hero-desc{ font-size:16px; line-height:1.65; max-width:30em; color:var(--ink-2) }
.hero-desc .en{ font-size:14px }
.def{ display:flex; flex-wrap:wrap; column-gap:10px; align-items:baseline; margin-top:28px; padding:14px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); font-size:14px; color:var(--mute); line-height:1.5 }
.def b{ color:var(--ink); font-weight:700; font-size:15px }
.def .pos{ font-size:12.5px }
.cta{ display:flex; gap:0; margin-top:0 }
.cta a{ flex:1; display:flex; align-items:baseline; gap:8px; padding:16px 0 4px; font-size:15px; font-weight:600; letter-spacing:-.01em }
.cta a + a{ padding-left:20px; border-left:1px solid var(--rule) }
.cta a i{ margin-left:auto; font-size:13px; vertical-align:0 }
.cta a:hover > span:first-child{ text-decoration:underline; text-decoration-color:var(--guide); text-underline-offset:5px; text-decoration-thickness:1px }

/* 견본 무대: 오른쪽 끝까지 흘려 둔다 */
.stage{
  grid-area:stage; position:relative; margin-right:calc(-1 * var(--margin)); margin-bottom:-56px;
  min-height:560px;
  background-image:radial-gradient(circle, var(--dot) .9px, transparent 1.1px);
  background-size:16px 16px; background-position:8px 8px;
  border-left:1px solid var(--rule);
  touch-action:pan-y; cursor:ew-resize;
}
.stage svg{ position:absolute; inset:0 0 64px 0; width:100%; height:calc(100% - 64px); overflow:visible }
.stage .lbl{ paint-order:stroke; stroke:var(--bg); stroke-width:4px; stroke-linejoin:round; font-family:var(--mono); font-size:11px; fill:var(--guide); letter-spacing:.04em }
.axis{
  position:absolute; left:0; right:var(--margin); bottom:0; height:64px;
  display:flex; align-items:center; gap:14px; padding-left:28px;
  color:var(--mute); border-top:1px solid var(--rule); cursor:default;
}
.axis input{ flex:1; appearance:none; -webkit-appearance:none; background:transparent; height:28px; cursor:pointer }
.axis input::-webkit-slider-runnable-track{
  height:9px;
  background:
    linear-gradient(var(--ink),var(--ink)) 0 100%/100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px calc(100% / 35)) 0 100%/100% 5px no-repeat;
}
.axis input::-moz-range-track{ height:1px; background:var(--ink) }
.axis input::-webkit-slider-thumb{ -webkit-appearance:none; width:13px; height:13px; margin-top:2px; border-radius:50%; background:var(--bg); border:1.5px solid var(--guide) }
.axis input::-moz-range-thumb{ width:11px; height:11px; border-radius:50%; background:var(--bg); border:1.5px solid var(--guide) }

@media (max-width:1100px){
  .hero{
    grid-template-columns:repeat(6, minmax(0,1fr)); grid-template-rows:auto auto auto auto;
    grid-template-areas:"meta meta meta meta meta meta" "text text text text text text" "stage stage stage stage stage stage" "sub sub sub sub sub sub";
    min-height:0; max-height:none; padding-bottom:0;
  }
  .hm-mid{ display:none }
  /* 1100px 이하: 첫 화면은 견본과 굵기 축만. 문장은 문의 섹션으로 옮겨 보이고(h1은 화면 낭독용으로만 남김), 설명·뜻풀이·버튼은 숨긴다 */
  .hero-text{ padding:0 }
  .hero-statement > [aria-hidden]{ display:none }
  .hero-sub{ display:none !important }
  .hero-statement{ font-size:clamp(40px, 7.4vw, 64px) }
  .stage{ margin:0 calc(-1 * var(--margin)); min-height:0; height:clamp(420px, 78vw, 640px); border-left:0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule) }
  .axis{ right:var(--margin); padding-left:var(--margin) }
  .hero-sub{ padding:40px 0 0; display:grid; grid-template-columns:1fr 1fr; column-gap:var(--gutter) }
  .hero-desc{ grid-column:1 / -1 }
  .def, .cta{ grid-column:1 / -1 }
}
@media (max-width:640px){
  .hero-meta{ font-size:10px }
  .hero-statement{ font-size:clamp(36px, 10.6vw, 44px); letter-spacing:-.05em }
  .stage{ height:clamp(400px, 112vw, 480px); border-top:0 }
  .stage .lbl{ font-size:9.5px }
  .axis{ height:56px; gap:10px }
  .stage svg{ inset:0 0 56px 0; height:calc(100% - 56px) }
  .hero-sub{ padding-top:28px; display:block }
  .hero-desc{ font-size:15px }
  .def{ font-size:13px; margin-top:24px }
  .cta{ flex-direction:column }
  .cta a{ padding:14px 0; border-bottom:1px solid var(--rule) }
  .cta a + a{ padding-left:0; border-left:0 }
}

/* ───────── 섹션 공통 ───────── */
.sec{ margin-top:var(--sec-gap) }
.sec-head{
  display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gutter);
  border-top:1px solid var(--ink); padding-top:20px; margin-bottom:72px; align-items:start;
}
.sec-no{ grid-column:1 / 2; color:var(--guide); padding-top:9px }
.sec-head h2{ grid-column:2 / 6; font-size:36px; line-height:1.2; font-weight:700; letter-spacing:-.04em }
.sec-lead{ grid-column:7 / 13; font-size:22px; line-height:1.55; letter-spacing:-.025em; font-weight:500; padding-top:3px; text-wrap:pretty }
.sec-lead .en{ font-size:15px; font-weight:400; margin-top:10px; letter-spacing:0 }
.sec-count{ grid-column:7 / 13; color:var(--mute); margin-top:28px }

@media (max-width:1100px){
  .sec-head{ grid-template-columns:repeat(6, minmax(0,1fr)); margin-bottom:56px }
  .sec-head h2{ grid-column:2 / 7 }
  .sec-lead, .sec-count{ grid-column:2 / 7; margin-top:28px }
  .sec-count{ margin-top:20px }
}
@media (max-width:640px){
  .sec-head{ grid-template-columns:40px 1fr; column-gap:0; margin-bottom:44px }
  .sec-no{ grid-column:1; padding-top:7px }
  .sec-head h2{ grid-column:2; font-size:30px }
  .sec-lead, .sec-count{ grid-column:1 / -1; font-size:19px }
  .sec-lead .en{ font-size:14px }
  .sec-count{ font-size:12px }
}

/* ───────── 02 프로젝트: 견본첩 스택 ─────────
   패널마다 화면 높이(헤더 제외)를 차지하고 sticky로 붙는다. 다음 패널이 올라와 앞 패널을 덮고,
   덮이는 패널은 JS가 넣는 --p(0→1)만큼 살짝 줄고 옅어진다. .is-stacked가 없으면(동작 줄이기·낮은 화면·JS 없음) 일반 목록 */
.wrap-in{ margin-inline:calc(var(--margin) + env(safe-area-inset-left,0px)) calc(var(--margin) + env(safe-area-inset-right,0px)) }
.stack{ position:relative }
.proj{ position:relative; background:var(--bg) }
.proj-in{ height:100%; transform-origin:50% 0; will-change:transform }
.stack.is-stacked .proj{ position:sticky; top:var(--header); height:calc(100svh - var(--header)); z-index:var(--z) }
.stack.is-stacked .proj + .proj{ box-shadow:0 -1px 0 var(--rule) }
.stack.is-stacked .proj-in{ transform:scale(calc(1 - .045 * var(--p, 0))); opacity:calc(1 - .5 * var(--p, 0)) }

.frame{ position:relative; display:block; width:100%; overflow:hidden; cursor:zoom-in; background:var(--plate) }
.frame img{ width:100%; height:100%; display:block; transition:transform .8s cubic-bezier(.2,.7,.2,1) }
.frame:hover img{ transform:scale(1.02) }
.frame-tag{ position:absolute; right:12px; bottom:12px; padding:5px 9px 5px 10px; background:color-mix(in srgb, var(--bg) 88%, transparent); color:var(--ink); font-size:12px; border-radius:2px }
.frame-tag b{ font:300 15px/0 var(--sans); color:var(--guide); margin-left:4px; vertical-align:-1px }

.cap-idx{ display:flex; justify-content:space-between; gap:12px; color:var(--mute) }
.cap-idx span:first-child{ color:var(--guide) }
.cap h3{ font-size:24px; font-weight:700; letter-spacing:-.035em; line-height:1.28; margin-top:14px }
.cap h3 small{ display:block; font-size:14px; font-weight:400; color:var(--mute); letter-spacing:-.01em; margin-top:3px }
.cap-desc{ font-size:15px; line-height:1.6; margin-top:10px; color:var(--ink-2) }
.cap-desc .en{ font-size:13px }
.facts{ display:grid; grid-template-columns:64px 1fr; margin-top:16px; border-top:1px solid var(--rule); font-size:13.5px; line-height:1.5 }
.facts dt{ color:var(--mute); padding:9px 0 8px; border-bottom:1px solid var(--rule); font-size:12px; line-height:1.7 }
.facts dd{ padding:8px 0 7px; border-bottom:1px solid var(--rule) }
.refs{ display:flex; flex-wrap:wrap; gap:4px 18px }
.refs a::after{ content:"↗"; color:var(--guide); font-size:10px; margin-left:4px; vertical-align:2px }
.refs a:hover{ text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--rule) }

/* 데스크톱: 도판 8단 + 설명 4단, 설명은 아래에 붙인다 */
@media (min-width:1101px){
  .proj-in{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gutter); padding:28px var(--margin) 40px }
  .frame{ grid-column:1 / 9; height:100%; min-height:520px }
  .cap{ grid-column:9 / 13; align-self:end; padding-left:12px }
  .stack:not(.is-stacked) .proj{ height:min(860px, 92vh) }
  .cap h3{ font-size:30px }
}
/* 태블릿·모바일: 도판은 좌우 끝까지, 설명은 아래 */
@media (max-width:1100px){
  .proj-in{ display:flex; flex-direction:column }
  .frame{ flex:1 1 auto; min-height:0 }
  .cap{ flex:none; padding:18px var(--margin) 26px }
  .stack:not(.is-stacked) .frame{ aspect-ratio:4 / 5; flex:none }
  .stack:not(.is-stacked) .proj{ margin-bottom:24px }
}
@media (min-width:641px) and (max-width:1100px){
  .cap{ display:grid; grid-template-columns:1fr 1fr; column-gap:var(--gutter); padding-top:22px; padding-bottom:30px }
  .cap-idx, .cap h3{ grid-column:1 / -1 }
  .cap-desc{ grid-column:1 }
  .facts{ grid-column:2; margin-top:10px }
}
@media (max-width:640px){
  .cap h3{ font-size:21px; margin-top:10px }
  .cap-desc{ font-size:14.5px; margin-top:8px }
  .facts{ margin-top:12px; font-size:13px }
}

/* ───────── 공통 행(문의의 Tel) ───────── */
.rows{
  display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gutter);
}
.rows > dt{ grid-column:2 / 7; color:var(--mute); padding:22px 0; border-top:1px solid var(--rule) }
.rows > dd{ grid-column:7 / 13; padding:18px 0 26px; border-top:1px solid var(--rule) }

@media (max-width:1100px){
  .rows{ grid-template-columns:repeat(6, minmax(0,1fr)) }
  .rows > dt{ grid-column:2 / 3 }
  .rows > dd{ grid-column:3 / 7 }
}
@media (max-width:640px){
  .rows{ grid-template-columns:1fr }
  .rows > dt{ grid-column:1; padding:16px 0 0 }
  .rows > dd{ grid-column:1; border-top:0; padding:8px 0 24px }
}

/* ───────── 01 소개 안의 서비스 ───────── */
.services{ border-top:1px solid var(--rule) }
.services > li{
  display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gutter);
  padding:30px 0 34px; border-bottom:1px solid var(--rule); align-items:baseline;
}
.svc-no{ grid-column:1 / 2; color:var(--mute) }
.services h3{ grid-column:2 / 7; font-size:clamp(26px, 2.5vw, 36px); font-weight:700; letter-spacing:-.045em; line-height:1.2 }
.services p{ grid-column:7 / 12; font-size:17px; line-height:1.6; letter-spacing:-.015em }
.services p .en{ font-size:14px }
/* 1.4 폰트 기술: 하위 항목 목록 — 설명 칸(7단)에 넣고, 항목 사이는 가는 선 대신 간격으로만 나눈다 */
.svc-sub{ grid-column:7 / 12; display:grid; row-gap:18px; font-size:15px; line-height:1.6; letter-spacing:-.015em; color:var(--ink-2) }
.svc-sub b{ display:block; font-size:17px; font-weight:600; color:var(--ink); letter-spacing:-.02em; margin-bottom:2px }
.svc-sub .en{ font-size:13.5px }
.nb{ white-space:nowrap }   /* 가운뎃점이 줄 머리로 넘어가지 않게 */
.services > li{ transition:background-color .3s }
.services > li:hover h3{ font-weight:820 }
.services h3{ transition:font-weight .45s cubic-bezier(.2,.7,.2,1) }

@media (max-width:1100px){
  .services > li{ grid-template-columns:repeat(6, minmax(0,1fr)) }
  .svc-no{ grid-column:1 / 2 }
  .services h3{ grid-column:2 / 4 }
  .services p{ grid-column:4 / 7; font-size:16px }
  .svc-sub{ grid-column:4 / 7 }
}
@media (max-width:640px){
  .services > li{ grid-template-columns:40px 1fr; column-gap:0; padding:24px 0 26px }
  .svc-no{ grid-column:1 }
  .services h3{ grid-column:2; font-size:26px }
  .services p{ grid-column:2; margin-top:12px; font-size:15.5px }
  .svc-sub{ grid-column:2; margin-top:16px; row-gap:16px; font-size:14.5px }
  .svc-sub b{ font-size:15.5px }
}

/* ───────── 03 문의 ───────── */
#contact .sec-head{ margin-bottom:40px }   /* 리드 바로 아래 메일이 이어지게 */
/* 페이지는 문의로 끝난다(하단 없음): 전화 행 아래 가는 마감선 + 화면 폭에 맞춘 끝 여백 */
#contact{ padding-bottom:calc(clamp(96px, 11vw, 160px) + env(safe-area-inset-bottom, 0px)) }
#contact .rows-tight > dt, #contact .rows-tight > dd{ border-bottom:1px solid var(--rule) }   /* 윗선과 같은 축에서 시작 */
@media (max-width:640px){ #contact .rows-tight > dt{ border-bottom:0 } }
.contact-statement{ display:none }
.contact-statement .vw{ font-weight:var(--wght, 760) }
@media (max-width:1100px){
  .contact-statement{ display:block; grid-column:2 / 7; margin-top:36px;
    font-size:clamp(40px, 7.4vw, 64px); font-weight:700; line-height:1.14; letter-spacing:-.045em }
}
@media (max-width:640px){
  .contact-statement{ grid-column:1 / -1; margin-top:30px; font-size:clamp(36px, 10.6vw, 44px); letter-spacing:-.05em }
}
.reach{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gutter) }
.mail{
  grid-column:7 / 13; display:block; padding:0 0 28px;
  font-size:clamp(22px, 1.95vw, 28px); font-weight:600; letter-spacing:-.025em; line-height:1.3;
  transition:font-weight .5s cubic-bezier(.2,.7,.2,1);
}
.mail:hover{ font-weight:760 }
.mail i{ font-size:.6em; vertical-align:.45em; margin-left:.3em }
.reach .rows{ grid-column:1 / 13 }
.rows-tight > dd{ padding:16px 0 20px; font-size:18px; font-weight:500; letter-spacing:-.015em }
.rows-tight > dd .en{ font-size:14px; font-weight:400; margin-top:2px }
.rows-tight > dd a:hover{ text-decoration:underline; text-underline-offset:5px; text-decoration-color:var(--guide); text-decoration-thickness:1px }
.rows-tight > dt{ padding:20px 0 }

@media (max-width:1100px){
  .reach{ grid-template-columns:repeat(6, minmax(0,1fr)) }
  .mail{ grid-column:3 / 7; font-size:24px }
  .reach .rows{ grid-column:1 / 7 }
}
@media (max-width:640px){
  .reach{ grid-template-columns:1fr }
  .mail{ grid-column:1; font-size:22px; letter-spacing:-.02em; padding-bottom:22px }
  .reach .rows{ grid-column:1 }
  .rows-tight > dt{ padding:16px 0 0 }
  .rows-tight > dd{ padding:6px 0 18px }
}

/* ───────── 라이트박스 ───────── */
.lb{
  position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none;
  border:0; background:var(--bg); color:var(--ink);
  display:none; grid-template-rows:auto 1fr auto; padding:0 var(--margin);
}
.lb[open]{ display:grid; animation:lbIn .28s ease-out }
.lb::backdrop{ background:var(--bg) }
@keyframes lbIn{ from{ opacity:0 } to{ opacity:1 } }
.lb-bar{ display:flex; align-items:center; gap:24px; height:var(--header); border-bottom:1px solid var(--ink) }
.lb-bar #lbProject{ color:var(--ink) }
.lb-bar #lbCount{ color:var(--mute); font-variant-numeric:tabular-nums }
.lb-close{ margin-left:auto; height:40px; font:inherit; letter-spacing:inherit; text-transform:inherit }
.lb-close:hover{ color:var(--guide) }
.lb-fig{ min-height:0; display:flex; align-items:center; justify-content:center; padding:32px 0 }
.lb-fig img{ max-width:100%; max-height:100%; object-fit:contain; box-shadow:0 0 0 1px var(--rule) }
.lb-foot{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding:16px 0 24px; border-top:1px solid var(--rule) }
.lb-cap{ font-size:14px; line-height:1.55 }
.lb-cap b{ font-weight:600 }
.lb-cap .muted{ display:block; color:var(--mute); font-size:12.5px; margin-top:2px }
.lb-nav{ display:flex; gap:28px; flex:none }
.lb-nav button{ font:inherit; letter-spacing:inherit; text-transform:inherit; height:32px }
.lb-nav button:hover{ color:var(--guide) }
@media (max-width:640px){
  .lb-bar{ gap:14px; font-size:12px }
  .lb-foot{ flex-direction:column; gap:12px }
  .lb-nav{ width:100%; justify-content:space-between }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition:none !important; animation:none !important }
}

/* 정렬 보정: 표의 가로줄이 거터에서 끊기지 않게 */
.rows > dt{ margin-right:calc(-1 * var(--gutter)) }
@media (max-width:640px){ .rows > dt{ margin-right:0 } }
.ar{ font-family:var(--sans); font-size:1.15em; line-height:1 }   /* JetBrains Mono 부분 글꼴에 화살표가 없어 본문 서체로 */
.lb-fig:focus{ outline:none }