/* ═══════════════════════════════════════════════════════════
   FLATDESIGN — site.css
   원칙 1. 색은 쓰지 않는다. 흑백과 여백만으로 위계를 만든다.
   원칙 2. 사진은 크게 쓰지 않는다. 같은 비율로 잘라 격자에 넣는다.
   원칙 3. 모바일에서도 사진은 2열을 유지한다. 작을수록 잘 보인다.
   ═══════════════════════════════════════════════════════════ */

:root{
  --ground:#FAFAF8;
  --surface:#FFFFFF;
  --surface-2:#EFEFEB;
  --ink:#14140F;
  --ink-soft:#6B6B62;
  --ink-faint:#A5A59C;
  --line:#E3E3DD;
  --line-2:#CDCDC5;

  --sans:"Inter","IBM Plex Sans KR",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --maxw:1340px;
  --pad:clamp(20px,5vw,56px);
  --sec:clamp(84px,11vw,168px);
  --navh:66px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  font-weight:400;
  line-height:1.7;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:-.025em;line-height:1.06;text-wrap:balance}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

:focus-visible{outline:1.5px solid var(--ink);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--ground);padding:12px 18px}
.skip:focus{left:0}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}

/* ── 라벨 · 소문자 금지 영역 ───────────────────────────── */
.eyebrow{
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:400;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 clamp(20px,3vw,34px);
}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ── 미입력 값 표시 ────────────────────────────────────── */
.ph{
  font-style:normal;
  background:#FFF3B0;
  color:#6B5A00;
  padding:0 .35em;
  border-radius:2px;
  font-size:.92em;
}

/* ═════════════════ 헤더 ═════════════════ */
.nav{
  position:fixed;inset:0 0 auto;z-index:100;
  height:var(--navh);
  background:rgba(250,250,248,0);
  border-bottom:1px solid transparent;
  transition:background .35s ease,border-color .35s ease,backdrop-filter .35s ease;
}
.nav.solid{
  background:rgba(250,250,248,.86);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom-color:var(--line);
}
.nav-in{
  max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);
  height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;
}
/* ── 워드마크 ──────────────────────────────────────────
   명함과 같은 구성: 위쪽 가로줄 + 가는 지오메트릭 산세리프 + 넓은 자간.
   A 는 가로획이 없다. 폰트로는 안 되므로 SVG 삼각형으로 그려 끼운다. */
.logo{
  display:inline-flex;flex-direction:column;align-items:stretch;
  gap:5px;color:var(--ink);white-space:nowrap;
}
.logo-rule{display:block;height:1px;background:currentColor}
.logo-w{
  display:block;
  font-family:"Jost",var(--sans);
  font-weight:300;
  font-size:15px;
  line-height:1;
  letter-spacing:.34em;
}
.logo-a{
  display:inline-block;
  width:.6em;height:.72em;          /* 폰트의 캡 하이트에 맞춘 값 */
  vertical-align:baseline;           /* 밑변이 베이스라인에 정확히 앉는다 */
  fill:none;stroke:currentColor;
  stroke-width:7;stroke-linejoin:miter;stroke-linecap:butt;
  overflow:visible;
}
.foot-tag{
  margin-top:9px;
  font-size:11px;letter-spacing:.02em;color:var(--ink-faint);
}
.nav-menu{display:flex;gap:clamp(20px,2.6vw,40px)}
.nav-menu a{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  color:var(--ink-soft);padding-block:6px;position:relative;
  transition:color .25s ease;
}
.nav-menu a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--ink);transform:scaleX(0);transform-origin:left;
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.nav-menu a:hover{color:var(--ink)}
.nav-menu a:hover::after,.nav-menu a[aria-current]::after{transform:scaleX(1)}
.nav-menu a[aria-current]{color:var(--ink)}

.nav-btn{display:none;width:40px;height:40px;margin-right:-10px;position:relative}
.nav-btn span{
  position:absolute;left:9px;right:9px;height:1px;background:var(--ink);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .2s ease;
}
.nav-btn span:first-child{top:17px}
.nav-btn span:last-child{top:23px}
.nav-btn[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}
.nav-btn[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)}

@media (max-width:759px){
  .nav-btn{display:block}
  .nav-menu{
    position:fixed;inset:var(--navh) 0 auto;
    flex-direction:column;gap:0;
    background:var(--ground);
    border-bottom:1px solid var(--line);
    padding:8px var(--pad) 28px;
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:transform .4s cubic-bezier(.2,.7,.2,1),opacity .3s ease;
  }
  .nav-menu.open{transform:none;opacity:1;pointer-events:auto}
  .nav-menu a{font-size:13px;letter-spacing:.18em;padding-block:15px;border-bottom:1px solid var(--line)}
  .nav-menu a::after{display:none}
  .nav-menu a:last-child{border-bottom:0}
}

/* ═════════════════ 사진 틀 ═════════════════
   모든 사진은 여기를 통과한다. 비율·보정·확대가 한곳에서 통일된다. */
.frame{
  position:relative;overflow:hidden;
  background:var(--surface-2);
  aspect-ratio:4/5;
}
.frame img{
  width:100%;height:100%;object-fit:cover;
  /* 폰 카메라마다 다른 채도·대비를 한 톤으로 눌러준다 */
  filter:saturate(.9) contrast(1.04) brightness(1.01);
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.frame.empty::after{
  content:attr(data-file);
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  color:var(--ink-faint);text-align:center;padding:10px;
  word-break:break-all;
}
.frame.empty{
  background:
    repeating-linear-gradient(45deg,#EDEDE9 0 8px,#F3F3EF 8px 16px);
}
.frame-w{aspect-ratio:3/2}
.frame-s{aspect-ratio:1/1}

/* ═════════════════ 히어로 ═════════════════ */
.hero{padding-top:calc(var(--navh) + clamp(56px,11vw,132px))}
.hero h1{
  font-size:clamp(2.7rem,8.4vw,6.4rem);
  letter-spacing:-.04em;
  line-height:.97;
  max-width:14ch;
}
.hero-ko{
  margin-top:clamp(22px,3vw,34px);
  font-size:clamp(14px,1.5vw,17px);
  color:var(--ink-soft);
  letter-spacing:-.01em;
  max-width:30ch;
}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:8px 28px;
  margin-top:clamp(34px,5vw,58px);
  padding-top:20px;
  border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint);
}

/* 히어로 아래 사진 띠 — 데스크톱 3열, 모바일 가로 스크롤 */
.strip{margin-top:clamp(44px,6vw,80px)}
.strip-in{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(8px,1.2vw,16px);
}
@media (max-width:679px){
  .strip-in{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:8px;padding-inline:var(--pad);
    margin-inline:calc(var(--pad) * -1);
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .strip-in::-webkit-scrollbar{display:none}
  .strip-in .frame{flex:0 0 72%;scroll-snap-align:start}
}

/* ═════════════════ 섹션 ═════════════════ */
.sec{padding-block:var(--sec)}
.sec-line{border-top:1px solid var(--line)}
.sec-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
  margin-bottom:clamp(34px,5vw,60px);
}
.sec-head .eyebrow{margin-bottom:14px}
.sec h2{font-size:clamp(1.9rem,4.4vw,3.3rem);letter-spacing:-.035em}
.lede{
  margin-top:18px;max-width:44ch;
  color:var(--ink-soft);font-size:clamp(14px,1.4vw,16px);
}
.more{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);
  border-bottom:1px solid var(--line-2);padding-bottom:3px;
  transition:color .25s ease,border-color .25s ease;
  white-space:nowrap;
}
.more:hover{color:var(--ink);border-color:var(--ink)}

/* ═════════════════ 시공 사례 격자 ═════════════════ */
.works{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(26px,4vw,54px) clamp(10px,1.6vw,20px);
}
@media (min-width:820px){
  .works{grid-template-columns:repeat(3,1fr)}
}
.work{display:block}
.work:hover .frame img{transform:scale(1.035)}
.work-m{margin-top:14px}
.work-c{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  color:var(--ink-faint);display:block;margin-bottom:7px;
}
.work h3{
  font-size:clamp(14px,1.5vw,17px);
  letter-spacing:-.01em;line-height:1.3;
  text-transform:uppercase;
}
.work-s{
  margin-top:5px;
  font-size:11.5px;color:var(--ink-faint);
  letter-spacing:.01em;line-height:1.5;
}

/* ═════════════════ 영역(SCOPE) ═════════════════ */
.scopes{display:grid;gap:0;border-top:1px solid var(--line)}
.scope{
  display:grid;gap:10px 40px;
  grid-template-columns:1fr;
  padding-block:clamp(26px,3.6vw,44px);
  border-bottom:1px solid var(--line);
}
@media (min-width:760px){
  .scope{grid-template-columns:80px minmax(0,1.1fr) minmax(0,1.4fr);align-items:start}
}
.scope-n{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--ink-faint);padding-top:4px}
.scope h3{font-size:clamp(1.15rem,2.2vw,1.6rem);letter-spacing:-.02em;text-transform:uppercase}
.scope-ko{font-size:12px;color:var(--ink-faint);margin-top:6px}
.scope p{color:var(--ink-soft);font-size:14px;max-width:46ch}
.scope ul{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px}
.scope li{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);border:1px solid var(--line);border-radius:100px;padding:4px 11px;
}

/* ═════════════════ 프로세스 ═════════════════ */
.steps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:680px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.steps{grid-template-columns:repeat(5,1fr)}}
.step{background:var(--ground);padding:clamp(24px,3vw,34px) clamp(20px,2.4vw,28px)}
.step-n{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--ink-faint);display:block;margin-bottom:clamp(28px,4vw,52px)}
.step h3{font-size:clamp(1rem,1.6vw,1.25rem);letter-spacing:-.01em;text-transform:uppercase}
.step-ko{font-size:11.5px;color:var(--ink-faint);margin-top:5px}
.step p{margin-top:12px;font-size:13px;color:var(--ink-soft);line-height:1.65}

/* ═════════════════ 숫자 ═════════════════ */
.facts{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(28px,4vw,44px) clamp(16px,3vw,40px);
}
@media (min-width:760px){.facts{grid-template-columns:repeat(3,1fr)}}
.fact{border-top:1px solid var(--ink);padding-top:16px}
.fact b{display:block;font-size:clamp(1.9rem,4.4vw,3rem);font-weight:300;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.fact span{display:block;margin-top:10px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}

/* ═════════════════ 문의 유도 ═════════════════ */
.cta{border-top:1px solid var(--line);padding-block:var(--sec)}
.cta-h{font-size:clamp(2.2rem,6.4vw,4.6rem);letter-spacing:-.04em;line-height:1}
.cta-links{
  margin-top:clamp(40px,6vw,72px);
  display:grid;gap:0;border-top:1px solid var(--line);
}
.cta-link{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding-block:clamp(16px,2.2vw,24px);
  border-bottom:1px solid var(--line);
  transition:padding-inline .4s cubic-bezier(.2,.7,.2,1);
}
.cta-link:hover{padding-inline:10px}
.cta-link .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--ink-faint)}
.cta-link .v{font-size:clamp(14px,1.8vw,19px);letter-spacing:-.01em;text-align:right}

/* ═════════════════ 푸터 ═════════════════ */
.foot{border-top:1px solid var(--line);padding-block:clamp(40px,5vw,64px) clamp(32px,4vw,48px)}
.foot-top{display:flex;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;align-items:flex-start}
.logo-f .logo-w{font-size:14px}
.foot-nav{display:flex;flex-wrap:wrap;gap:10px 24px}
.foot-nav a{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--ink-soft);transition:color .25s ease}
.foot-nav a:hover{color:var(--ink)}
.foot-legal{margin-top:clamp(40px,6vw,72px);padding-top:24px;border-top:1px solid var(--line)}
.foot-legal dl{display:flex;flex-wrap:wrap;gap:6px 26px;margin:0}
.foot-legal div{display:flex;gap:8px;align-items:baseline}
.foot-legal dt{font-size:10.5px;color:var(--ink-faint);letter-spacing:.02em;white-space:nowrap}
.foot-legal dd{margin:0;font-size:11.5px;color:var(--ink-soft)}
.copy{margin-top:22px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--ink-faint)}

/* ═════════════════ 등장 효과 ═════════════════ */
.rise{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.rise.in{opacity:1;transform:none}