/* ══════════════════════════════════════════════════════════════
   CACPM — "The name as a monument" 프로토타입 스타일
   Bebas Neue (display) + EB Garamond (text) · 팔레트 3종은 html[data-theme] 로 전환
   규칙: 눈썹 라벨·모노스페이스·번호·얇은 선·그림자·유리 효과 없음. 면의 톤 차이로 구분.
   ══════════════════════════════════════════════════════════════ */

/* ── 팔레트: 같은 구조에 색만 교체 ── */
:root,
html[data-theme="navy"]{
  --bg:#0b1a2e; --surface:#12263f; --ink:#ffffff; --muted:#a9b8ca;
  --accent:#9ccbf7; --accent-ink:#0b1a2e;
  --f1:#050e1a; --f1-ink:#ffffff; --f1-muted:#9fb0c4;
  --f2:#eef2f7; --f2-ink:#0b1a2e; --f2-muted:#47586e;
}

:root{
  --display:'Bebas Neue','Arial Narrow',Impact,sans-serif;
  --text:'EB Garamond',Georgia,'Times New Roman',serif;
  --step-small:clamp(.8125rem,.79rem + .1vw,.875rem);
  --step-body:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --step-lead:clamp(1.25rem,1.1rem + .7vw,1.625rem);
  --step-head:clamp(2.5rem,1.6rem + 3.4vw,4.5rem);
  --step-sub:clamp(1.75rem,1.3rem + 1.4vw,2.5rem);
  --giant:clamp(4rem,13vw,13rem);
  --m:clamp(16px,2.2vw,32px);
  --gap:clamp(12px,1.6vw,24px);
  --sec:clamp(96px,12vw,200px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-io:cubic-bezier(.7,0,.2,1);
}

/* ── 기본 ── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--text);font-size:var(--step-body);line-height:1.45;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p,figure,dl,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.fld-2 :focus-visible,.fld-2:focus-visible{outline-color:var(--f2-ink)}
::selection{background:var(--accent);color:var(--accent-ink)}
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--accent);color:var(--accent-ink);padding:10px 16px}
.skip:focus{left:8px}
.small{font-size:var(--step-small);line-height:1.4}
.muted{color:var(--muted)}

/* 면(field): 섹션마다 바탕색을 통째로 바꿈 */
.sec{position:relative;padding:var(--sec) var(--m);background:var(--bg);color:var(--ink)}
.fld-1{background:var(--f1);color:var(--f1-ink);--ink:var(--f1-ink);--muted:var(--f1-muted)}
.fld-2{background:var(--f2);color:var(--f2-ink);--ink:var(--f2-ink);--muted:var(--f2-muted)}
.fld-s{background:var(--surface)}
.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}

/* ── 타이포 ── */
.t-head{font-family:var(--display);font-weight:400;font-size:var(--step-head);line-height:.92;letter-spacing:-.02em;text-transform:uppercase;text-wrap:balance}
.t-sub{font-family:var(--display);font-weight:400;font-size:var(--step-sub);line-height:.95;letter-spacing:-.01em;text-transform:uppercase}
.t-lead{font-size:var(--step-lead);line-height:1.35;text-wrap:pretty}
p{text-wrap:pretty}
.num{font-variant-numeric:tabular-nums lining-nums}

/* ── 버튼 · 링크 (사각형 한 가지) ── */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;background:var(--accent);color:var(--accent-ink);font-weight:500;font-size:var(--step-body);transition:background .3s,color .3s,transform .2s var(--ease)}
.btn:hover{background:var(--ink);color:var(--bg)}
.btn:active{transform:scale(.97)}
.fld-2 .btn{background:var(--f2-ink);color:var(--f2)}
.fld-2 .btn:hover{background:var(--accent);color:var(--accent-ink)}
.btn:disabled{opacity:.5;cursor:progress}
.link{display:inline-flex;align-items:center;min-height:44px;font-weight:500;text-decoration:underline;text-underline-offset:.28em;text-decoration-thickness:1.5px;transition:color .25s,transform .2s var(--ease)}
.link:hover{color:var(--accent)}
.fld-2 .link:hover{color:var(--f2-muted)}
.link:active{transform:translateX(2px)}

/* ── 헤더: 배경 없이 흰 글자, 밝은 면 위에서는 반전 ── */
.hd{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px var(--m);color:#fff;transition:transform .5s var(--ease),color .3s}
.hd.is-light{color:var(--f2-ink)}
.hd.is-light .hd__logo img{filter:brightness(0)}
.hd.is-hidden{transform:translateY(-110%)}
.hd:focus-within{transform:none}
.hd__logo img{height:34px;width:auto;filter:brightness(0) invert(1)}
.hd__nav{display:flex;gap:clamp(18px,2.4vw,36px);font-size:var(--step-body)}
.hd__nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;transition:opacity .25s}
.hd__nav a:hover{opacity:.65}
.hd__nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:2px}
.hd__burger{display:none;min-height:44px;padding:0 4px;font-size:var(--step-body);font-weight:500}
@media (max-width:860px){
  .hd__nav{display:none}
  .hd__burger{display:block}
}
.menu{position:fixed;inset:0;z-index:55;background:var(--bg);color:var(--ink);padding:100px var(--m) 28px;display:flex;flex-direction:column;justify-content:space-between;visibility:hidden;opacity:0;transition:opacity .4s var(--ease),visibility .4s}
.menu-open .menu{visibility:visible;opacity:1}
.menu__nav a{display:block;font-family:var(--display);font-size:clamp(3.5rem,18vw,6rem);line-height:.98;text-transform:uppercase;padding:2px 0}
.menu__foot{display:grid;gap:4px;color:var(--muted)}
.menu__foot a{display:inline-flex;align-items:center;min-height:44px}

/* ── 히어로: 이름이 건축물 ── */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;background:var(--f1);color:#fff;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity 1.6s ease,transform 9s linear}
.hero__media img.is-on{opacity:1;transform:scale(1)}
.hero__veil{position:absolute;inset:0;z-index:-1;background:rgba(4,10,8,.44)}
.hero__foot{position:absolute;left:var(--m);right:var(--m);bottom:clamp(14px,2.4vh,30px)}
.hero__top{margin-bottom:clamp(10px,2vh,24px)}
.hero__cta{position:absolute;top:clamp(76px,10vh,104px);right:var(--m)}
.hero__lede{max-width:34ch;font-size:var(--step-body);line-height:1.3;min-height:2.6em;transition:opacity .25s}
.hero__lede.is-swap{opacity:0}
.monument{display:flex;justify-content:space-between;align-items:flex-end;overflow:hidden;font-family:var(--display);font-weight:400;line-height:.78;letter-spacing:-.02em;text-transform:uppercase;
  font-size:min(calc(94vw / (var(--n,5) * .41)),56svh);padding-top:.04em}
.monument__l{display:block;padding:0;transform:translateY(105%);transition:transform 1.1s var(--ease),color .3s;color:inherit}
.ready .monument__l{transform:none;transition-delay:calc(var(--i,0) * 70ms + 120ms),0s}
button.monument__l{font-size:inherit;line-height:inherit;font-family:inherit;text-transform:inherit}
button.monument__l:hover,button.monument__l:focus-visible,button.monument__l.is-live{color:var(--accent)}
button.monument__l:focus-visible{outline-offset:-4px}
.no-js .monument__l{transform:none}
/* 하위 페이지 히어로는 낮게 */
.hero--sub{height:92svh;min-height:560px}
@media (max-width:860px){
  .monument{font-size:min(calc(94vw / (var(--n,5) * .41)),40svh)}
}

/* ── 공통: 입장 애니메이션 (JS 가 html.js 를 붙인 경우에만 숨김) ── */
.js [data-in]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.js [data-in].in{opacity:1;transform:none}
.js [data-img]{overflow:hidden}
.js [data-img] img{transform:scale(1.12);transition:transform 1.6s var(--ease)}
.js [data-img].in img{transform:scale(1)}
.par{position:relative;overflow:hidden}
.par > img{position:absolute;left:0;top:-12% !important;width:100%;height:124% !important;object-fit:cover;will-change:transform}

/* ── 소개: 제목 · 노트 · 사실 줄 ── */
.intro__row1{align-items:end}
.intro__title{grid-column:1 / span 6}
.intro__note{grid-column:9 / span 4;font-size:var(--step-body);max-width:30ch}
.intro__facts{display:flex;flex-wrap:wrap;justify-content:space-between;gap:36px 24px;margin-top:clamp(72px,9vw,140px)}
.fact{flex:0 1 auto;min-width:150px}
.fact strong{display:block;font-weight:400;font-size:var(--step-sub);line-height:1.05;font-variant-numeric:tabular-nums lining-nums}
.fact span{display:block;margin-top:6px;color:var(--muted);font-size:var(--step-small);max-width:22ch}
.intro__photo{margin:clamp(48px,6vw,96px) 0 0 auto;width:min(100%,calc(41.66% - 12px));aspect-ratio:4/3}
@media (max-width:860px){
  .intro__title,.intro__note{grid-column:1 / -1}
  .intro__note{margin-top:20px}
  .intro__facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .intro__photo{width:100%}
}

/* ── 수치: 조용한 숫자 줄 ── */
.figs{padding-block:clamp(120px,18vh,220px)}
.figs__head{grid-column:2 / span 6;margin-bottom:56px}
.figs__list{grid-column:2 / span 6;display:grid;gap:28px}
.figs__row{display:grid;grid-template-columns:132px minmax(0,1fr);column-gap:24px;align-items:baseline}
.figs__row dt{text-align:right;font-size:var(--step-lead);font-weight:500;font-variant-numeric:tabular-nums lining-nums}
.figs__row dd{max-width:40ch;font-size:var(--step-body);color:var(--muted)}
.figs__photo{grid-column:9 / span 3;grid-row:1 / span 2;align-self:start;margin-top:80px;aspect-ratio:1}
@media (max-width:860px){
  .figs__head,.figs__list{grid-column:1 / -1}
  .figs__row{grid-template-columns:96px minmax(0,1fr)}
  .figs__row dt{font-size:1.5rem}
  .figs__photo{grid-column:1 / -1;grid-row:auto;margin:48px 0 0 auto;width:56%}
}

/* ── 작업: 거대한 제목 + 들쭉날쭉한 벽 ── */
.work{padding-inline:0;padding-bottom:calc(var(--sec) * .7)}
.work__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:0 var(--m);margin-bottom:32px}
.work__title{font-family:var(--display);font-weight:400;font-size:var(--giant);line-height:.86;letter-spacing:-.03em;text-transform:uppercase}
.wall{display:flex;flex-wrap:wrap;gap:8px;padding:0 var(--m)}
.wall__row{display:flex;gap:8px;width:100%}
.tile{display:block;position:relative;min-width:0;flex:1 1 0;text-align:left;color:inherit;transition:opacity .4s}
.tile__img{display:block;overflow:hidden;background:var(--surface);height:calc(100% - 34px)}
.tile__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.tile:hover .tile__img img{transform:scale(1.04)}
.tile__cap{display:flex;justify-content:space-between;gap:12px;height:34px;align-items:flex-end;font-size:var(--step-small)}
.tile__cap span:last-child{color:var(--muted);font-variant-numeric:tabular-nums}
.tile:active{transform:scale(.99)}
@media (hover:hover){.wall:hover .tile:not(:hover){opacity:.5}}
.wall:not(.wall--built) .tile{flex:1 1 30%;height:300px}
.wall--m{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.wall--m .tile{height:auto}
.wall--m .tile__img{height:auto;aspect-ratio:4/5}
.wall--m .tile:nth-child(3n+1){grid-column:1 / -1}
.wall--m .tile:nth-child(3n+1) .tile__img{aspect-ratio:4/3}

/* ── 서비스 이름 열 ── */
.feat__head{grid-column:1 / -1;margin-bottom:clamp(64px,8vw,120px)}
.feat__cols{display:contents}
.feat__col{grid-column:span 3}
.feat__col h3{font-size:var(--step-body);font-weight:500;line-height:1.25;margin-bottom:18px}
.feat__col li{margin:0}
.feat__col button{display:block;width:100%;text-align:left;min-height:28px;padding:2px 0;font-size:var(--step-body);line-height:1.25;color:var(--muted);transition:color .25s}
.feat__col button:hover,.feat__col button:focus-visible,.feat__col button.is-on{color:var(--ink)}
.feat__sum{display:none}
.feat__desc{grid-column:1 / -1;margin-top:clamp(56px,6vw,96px);min-height:3.2em;max-width:60ch;font-size:var(--step-lead);line-height:1.3;color:var(--ink);transition:opacity .25s}
@media (max-width:860px){
  .feat__col{grid-column:1 / -1;margin-bottom:40px}
  .feat__col button{font-size:var(--step-body);line-height:1.4;min-height:44px;display:flex;align-items:center}
  .feat__sum{display:block;margin-top:12px;color:var(--muted);font-size:var(--step-body)}
  .feat__desc{display:none}
}

/* ── 회사 소개: 옆 사실 + 넓은 문단 ── */
.about{padding-block:calc(var(--sec) * .9)}
.about__side{grid-column:1 / span 3;display:grid;gap:20px;align-content:start}
.about__side dt{color:var(--muted);font-size:var(--step-small)}
.about__side dd{font-size:var(--step-body)}
.about__body{grid-column:5 / span 8}
.about__body p{font-size:var(--step-lead);line-height:1.35;max-width:46ch}
.about__body p + p{margin-top:20px}
.about__sign{margin-top:28px;color:var(--muted);font-size:var(--step-body)}
.about__lists{margin-top:clamp(72px,9vw,140px);align-items:start}
.about__lists > h3{grid-column:1 / span 3;font-size:var(--step-body);font-weight:500}
.about__col{grid-column:span 4}
.about__col li{display:flex;justify-content:space-between;gap:20px;padding:6px 0;font-size:var(--step-body)}
.about__col li span:last-child{color:var(--muted);text-align:right}
@media (max-width:860px){
  .about__side,.about__body,.about__lists > h3,.about__col{grid-column:1 / -1}
  .about__side{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:36px;order:2}
  .about__body{order:1}
  .about__col{margin-top:32px}
}

/* ── 신뢰 로고 (밝은 면) ── */
.logos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(24px,3vw,48px) clamp(20px,3vw,48px);align-items:center;margin-top:clamp(48px,6vw,88px)}
.logos img{width:100%;max-height:56px;object-fit:contain;filter:grayscale(1);opacity:.75;transition:filter .3s,opacity .3s,transform .3s var(--ease)}
.logos img:hover{filter:none;opacity:1;transform:translateY(-2px)}
@media (max-width:860px){.logos{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ── 문의: 이메일이 곧 디스플레이 타입 ── */
.contact{padding-block:clamp(72px,9vw,140px) clamp(48px,6vw,96px)}
.contact__ask{max-width:24ch;font-size:var(--step-lead);line-height:1.3}
.contact__mail{display:block;margin:clamp(40px,8vw,120px) 0 clamp(48px,6vw,96px);font-family:var(--display);font-size:clamp(3rem,10vw,11rem);line-height:.86;letter-spacing:-.025em;text-transform:uppercase;word-break:break-word;transition:color .3s}
.contact__mail:hover{color:var(--f2-muted)}
.contact__body{align-items:start;row-gap:40px}
.contact__info{grid-column:1 / span 4;display:grid;gap:18px;align-content:start}
.contact__info dt{color:var(--muted);font-size:var(--step-small)}
.contact__info dd{font-size:var(--step-body)}
.contact__info a{display:inline-flex;align-items:center;min-height:44px}
.form{grid-column:6 / span 7;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px;align-content:start}
.field{display:flex;flex-direction:column;gap:6px}
.field--full{grid-column:1 / -1}
.field span{font-size:var(--step-small);color:var(--muted)}
.field input,.field textarea,.field select{width:100%;padding:10px 0 12px;border:0;border-bottom:2px solid color-mix(in srgb,currentColor 25%,transparent);background:transparent;font:inherit;font-size:var(--step-body);color:inherit;border-radius:0;outline:none;transition:border-color .3s}
.field select option{color:#111}
.field textarea{resize:vertical;min-height:110px}
.field input:focus,.field textarea:focus,.field select:focus{border-bottom-color:currentColor}
.form__foot{grid-column:1 / -1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px}
.form__note{color:var(--muted);font-size:var(--step-small)}
.form__msg{grid-column:1 / -1;padding:14px 18px;background:color-mix(in srgb,currentColor 9%,transparent);font-size:var(--step-body)}
@media (max-width:860px){
  .contact__info,.form{grid-column:1 / -1}
  .form{grid-template-columns:1fr}
  .contact__mail{font-size:clamp(2.5rem,13.5vw,6rem)}
}

/* ── 푸터: 이름이 먼저 ── */
.ft{background:var(--f1);color:var(--f1-ink);--ink:var(--f1-ink);--muted:var(--f1-muted);padding:clamp(120px,14vw,220px) var(--m) 28px;overflow:hidden}
.ft__name{display:flex;justify-content:space-between;font-family:var(--display);font-weight:400;line-height:.8;letter-spacing:-.02em;text-transform:uppercase;font-size:min(calc(94vw / (5 * .41)),56svh);padding-top:.04em;margin-bottom:clamp(40px,5vw,80px)}
.ft__name span{display:block}
.ft__row{align-items:start;row-gap:40px}
.ft__places{grid-column:1 / span 5;display:grid;gap:4px}
.ft__places a,.ft__places p{display:flex;align-items:center;min-height:44px;font-size:var(--step-lead);line-height:1.15;transition:color .25s}
.ft__places a:hover{color:var(--accent)}
.ft__links{grid-column:7 / span 6;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.ft__links h3{font-size:var(--step-small);font-weight:400;color:var(--muted);margin-bottom:10px}
.ft__links a{display:flex;align-items:center;min-height:44px;font-size:var(--step-body);transition:color .25s}
.ft__links a:hover{color:var(--accent)}
.ft__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:clamp(56px,7vw,112px);font-size:var(--step-small);color:var(--muted)}
.ft__bottom a{display:inline-flex;align-items:center;min-height:44px}
.ft__bottom a:hover{color:var(--ink)}
@media (max-width:860px){
  .ft__places,.ft__links{grid-column:1 / -1}
  .ft__links{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── 하위 페이지: 소개 블록 ── */
.lede2{padding-block:calc(var(--sec) * .8)}
.lede2__txt{grid-column:1 / span 7}
.lede2__txt p{font-size:var(--step-lead);line-height:1.3;max-width:34ch}
.lede2__side{grid-column:9 / span 4;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px;align-content:start}
@media (max-width:860px){
  .lede2__txt,.lede2__side{grid-column:1 / -1}
  .lede2__side{margin-top:40px}
}

/* 가치 3개: 큰 단어 */
.vals{margin-top:clamp(56px,7vw,104px);align-items:start}
.val{grid-column:span 4}
.val:nth-child(2){margin-top:clamp(40px,7vw,120px)}
.val:nth-child(3){margin-top:clamp(80px,14vw,240px)}
.val__img{aspect-ratio:4/3;margin-bottom:24px;background:var(--surface)}
.val__img img{width:100%;height:100%;object-fit:cover}
.val h3{font-family:var(--display);font-weight:400;font-size:var(--step-head);line-height:.9;text-transform:uppercase}
.val .small{margin-top:8px;color:var(--muted)}
.val p:last-child{margin-top:14px;max-width:34ch}
@media (max-width:860px){
  .val{grid-column:1 / -1;margin-top:48px !important}
}

/* 미션 · 비전: 큰 문장 */
.mv{margin-top:clamp(48px,6vw,96px);align-items:start}
.mv__item{grid-column:span 6}
.mv__item:nth-child(2){margin-top:clamp(56px,9vw,160px)}
.mv__img{aspect-ratio:4/3;background:var(--surface);margin-bottom:28px}
.mv__item h3{font-size:var(--step-small);font-weight:500;color:var(--muted);margin-bottom:10px}
.mv__text{font-size:var(--step-lead);line-height:1.2;max-width:26ch;text-wrap:balance}
.mv__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.mv__tags li{padding:6px 14px;background:var(--surface);font-size:var(--step-small)}
@media (max-width:860px){
  .mv__item{grid-column:1 / -1}
  .mv__item:nth-child(2){margin-top:56px}
}

/* ── 서비스 상세 ── */
.cats{display:grid;gap:clamp(96px,12vw,200px)}
.cat{align-items:start;row-gap:32px}
.cat__aside{grid-column:1 / span 5}
.cat__img{margin-top:28px;aspect-ratio:4/3;background:var(--surface)}
.cat__img img{width:100%;height:100%;object-fit:cover}
.cat__rows{grid-column:7 / span 6;display:grid;gap:44px}
.svc h3{font-size:var(--step-lead);font-weight:500;line-height:1.15;margin:6px 0 8px;text-wrap:balance}
.svc .small{color:var(--muted)}
.svc p:last-child{max-width:52ch;margin-top:0}
@media (max-width:860px){
  .cat__aside{grid-column:1 / -1;position:static}
  .cat__rows{grid-column:1 / -1}
}
.promise{font-family:var(--display);font-size:min(var(--giant),14vw);line-height:.88;letter-spacing:-.03em;text-transform:uppercase;text-wrap:balance}
.promise span{color:var(--muted)}
.fld-2 .promise span{color:var(--f2-muted)}

/* ── 프로젝트 페이지 ── */
.pbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:0 var(--m);margin-bottom:28px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:44px;padding:0 18px;background:var(--surface);font-size:var(--step-body);display:inline-flex;align-items:center;gap:8px;transition:background .25s,color .25s,transform .2s var(--ease)}
.chip small{opacity:.65;font-size:var(--step-small)}
.chip:hover{background:color-mix(in srgb,var(--ink) 16%,var(--surface))}
.chip:active{transform:scale(.97)}
.chip.is-on{background:var(--accent);color:var(--accent-ink)}
.pbar p{color:var(--muted);font-size:var(--step-small)}
.feature{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:end;width:100%;text-align:left;margin-bottom:clamp(72px,9vw,150px)}
.feature__img{aspect-ratio:16/10;background:var(--surface)}
.feature__img img{width:100%;height:100%;object-fit:cover}
.feature__body{display:grid;gap:14px;padding-bottom:8px}
.feature__body p{max-width:34ch}
@media (max-width:860px){.feature{grid-template-columns:1fr}}

/* ── 모달 ── */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px;visibility:hidden;opacity:0;transition:opacity .35s var(--ease),visibility .35s}
.modal.is-open{visibility:visible;opacity:1}
.modal__bg{position:absolute;inset:0;background:rgba(0,0,0,.68)}
.modal__panel{position:relative;width:min(1080px,100%);max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);overflow:auto;background:var(--surface);color:var(--ink);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);transform:translateY(24px);transition:transform .5s var(--ease)}
.modal.is-open .modal__panel{transform:none}
.modal__media{background:var(--bg);min-height:320px}
.modal__media img{width:100%;height:100%;object-fit:cover}
.modal--portrait .modal__panel{width:min(880px,100%);grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}
.modal--noimg .modal__media{display:none}
.modal--noimg .modal__panel{grid-template-columns:1fr;width:min(640px,100%)}
.modal__body{padding:clamp(28px,4vw,48px)}
.modal__body h2{font-family:var(--display);font-weight:400;font-size:var(--step-sub);line-height:.95;text-transform:uppercase;margin:6px 0 16px}
.modal__body p{color:var(--ink)}
.modal__body .small{color:var(--muted)}
.modal__body dl{margin-top:28px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.modal__body dt{font-size:var(--step-small);color:var(--muted)}
.modal__body ul{margin-top:10px}
.modal__body li{padding:6px 0;font-size:var(--step-body)}
.modal__edu{margin-top:20px}
.modal__exp{margin-top:28px}
.modal__x{position:absolute;right:12px;top:12px;z-index:2;min-width:44px;min-height:44px;padding:0 14px;background:var(--accent);color:var(--accent-ink);font-weight:500;transition:transform .2s var(--ease)}
.modal__x:active{transform:scale(.96)}
.modal-open{overflow:hidden}
@media (max-width:860px){
  .modal__panel,.modal--portrait .modal__panel{grid-template-columns:1fr}
  .modal__media{min-height:0;aspect-ratio:16/10}
  .modal--portrait .modal__media{aspect-ratio:4/3}
}

/* ── 팀 ── */
.stat-row{display:flex;flex-wrap:wrap;gap:28px 64px;margin-top:0}
.dept{align-items:start;row-gap:24px;margin-bottom:clamp(56px,7vw,112px)}
.dept__name{grid-column:1 / span 3}
.dept__name .t-sub{display:block}
.dept__name .small{display:block;margin-top:6px;color:var(--muted)}
.members{grid-column:4 / span 9;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 16px}
.member{display:block;width:100%;text-align:left;transition:transform .3s var(--ease)}
.member:active{transform:scale(.98)}
.member__img{display:flex;align-items:center;justify-content:center;aspect-ratio:3/4;overflow:hidden;background:var(--surface)}
.member__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.member:hover .member__img img{transform:scale(1.04)}
.member__ini{font-family:var(--display);font-size:var(--step-sub);color:var(--muted)}
.member strong{display:block;margin-top:10px;font-weight:500;font-size:var(--step-body);line-height:1.2}
.member span.role{display:block;font-size:var(--step-small);color:var(--muted)}
@media (max-width:1024px){.members{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){
  .dept__name,.members{grid-column:1 / -1}
  .members{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── 움직임 줄이기 ── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-in],.js [data-img] img,.monument__l{transform:none !important;opacity:1 !important;transition:none !important}
  .hero__media img{transition:none;transform:none}
}

/* 인용문: 문장 크기(데스크톱 36px · 폰 24px 이하) */
.quote{margin:0 0 28px;font-size:clamp(1.5rem,1rem + 1.6vw,2.25rem);line-height:1.2;max-width:24ch;text-wrap:balance}
.quote p{font-size:inherit}
.phil{max-width:34ch}