@charset "UTF-8";
/* ============================================================
   WJ DESIGN — renewal sketch  v2 (International Editorial)
   차용: Vincent Van Duysen · Norm Architects (웜 모노크롬, 사진 지배, 조용한 타이포)
        YOO Interior (섹션스냅+대문자 헤더) · Pelizzari (느린 시네마틱 리빌)
   원칙: "사진이 유일한 색" · 타입은 물러나고 마이크로 라벨이 시그니처 · 여백=럭셔리
   ============================================================ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,700;1,9..144,400;1,9..144,700&display=swap');

:root{
  /* warm travertine / greige monochrome */
  --ink:#0e0d0b;          /* near-black — 2026-07-15 사용자 지시("웜 다크브라운 느낌 싫어, 더 어둡게"): #1c1712(H30 S21.7% L9%) → H30 S10% L5%, 채도 절반 이하로 낮추고 명도도 낮춤 */
  --ink-soft:#4c4c4c;      /* 보조 텍스트용 무채색 다크그레이 */
  --paper:#efedeb;        /* travertine off-white — 2026-07-15 채도 추가 축소(#f1eee9, S22.2%→S11.1%, L·H 동일). 이전 정정: #f4efe6, S38.9%→S20% */
  --paper-2:#e1dfdc;      /* warm greige — 2026-07-15 채도 추가 축소(#e4e0d9, S16.9%→S8.5%, --paper와 동일 비율). 이전 정정: #e9e1d3, S33.4%→S17% */
  --stone:#9a9082;        /* warm gray — micro labels */
  --stone-2:#c8bfb0;
  --line:rgba(28,23,18,.13);
  --line-light:rgba(244,239,230,.20);
  --accent:#a63437;       /* brick red — 2026-07-21 사용자 지시로 웜 타우프에서 교체 */

  /* 2026-07-14 하드코딩 색상 감사 → 토큰화. 기존 --ink/--white/--black과 유사한 값은 그 계열로 흡수(RGB triplet+alpha),
     확실히 다른 계열(플레이스홀더 그라디언트·카카오 브랜드)만 별도 신규 토큰으로 등록. */
  --white:#fff;
  --black:#000;
  --black-soft:#383838;    /* pure black보다 명도가 확실히 높은 다크 그레이 */
  --white-rgb:255,255,255;
  --black-rgb:0,0,0;
  --ink-rgb:28,23,18;        /* rgba(20,15,10,*)·rgba(18,13,9,*) 스크림 2종 → --ink 계열로 흡수(시각적으로 구분 불가) */
  --ink-soft-rgb:76,69,59;   /* rgba(60,50,40,*) CTA 라디얼 하이라이트 → --ink-soft 계열로 흡수 */

  /* .ph 플레이스홀더(실사진 없을 때 가짜 배경) 전용 — 브랜드 팔레트 아님, 별도 등록 */
  --ph-warm-1:#d8ccb8; --ph-warm-2:#b6a690; --ph-warm-3:#7c6d58;
  --ph-flat:#f5f5f5;   /* .ph--warm — 플랫 컬러 (2026-08-11 .ph--cool 및 --ph-cool-* 제거) */

  /* 카카오톡 공식 브랜드 컬러(외부 규정 고정값) — 사이트 자체 팔레트 아님 */
  --kakao-bg:#FEE500;
  --kakao-ink:#181600;

  /* 네이버 블로그 공식 브랜드 컬러(외부 규정 고정값) — 사이트 자체 팔레트 아님 */
  --naver-green:#03C75A;

  --serif:'Pretendard','Noto Sans KR',system-ui,-apple-system,sans-serif;
  --serif-ko:'Pretendard','Noto Sans KR',system-ui,-apple-system,sans-serif;
  --sans:'Pretendard','Noto Sans KR',system-ui,-apple-system,sans-serif;
  --serif-point:'Fraunces','Noto Serif KR','Noto Serif',serif; /* 2026-07-21 Cormorant Garamond→Fraunces 교체(사용자가 두툼+기울기 있는 레퍼런스 이미지 제시, SIL OFL·무료). 첫 적용처: about.html .brand__slogan("Change of Life"). 라틴은 Fraunces 볼드 이탤릭(SOFT/WONK 가변축으로 잉크블롭 세리프 연출), 한글이 들어올 경우 Noto Serif KR로 폴백(이탤릭 없어 정자로 표시). 굵기는 사이트 규칙대로 400/700만 로드 */

  --pad:20px;   /* 좌우 기본 여백 — 모바일(≤700)에서는 16px */
  --head-center:50px;   /* 헤더 로고의 세로 중심 — 메뉴 오버레이 로고·닫기 버튼도 동일 기준 사용 */
  --maxw:1500px;
  --maxw-wide:1760px;   /* 사진 그리드 전용 확장 폭(프로젝트 목록) */
  --ease:cubic-bezier(.19,1,.22,1);   /* slow, cinematic */

  /* 2026-07-14 border-radius 유사값 감사 → 통일. .chip 4px(최근 의도적 정정)를 기준으로
     .trust의 2px 드리프트를 흡수. 알약·원형은 의미가 달라 값은 그대로 두되 반복 raw 숫자를 토큰화. */
  /* 2026-07-14(후속, 사용자 지시): 알약 radius(100px) 전부 폐기 — --radius-pill 삭제, 기존 사용처(.btn/.cta-pill/.btn-sm/.kakao-cta/.select__menu/.consult-fab a 등) 전부 --radius-sm(4px)로 통일 */
  --radius:0;            /* 2026-08-11 감사: 값이 모두 0이던 --radius-sm/md/circle 3종 통합(사각 모서리 표준). 둥글게 하려면 이 한 값만 조정 */

  /* 2026-07-14 font-size(19종)·letter-spacing(23종) 미세 클러스터 감사 → 소수 토큰으로 통일(사용자 승인: "과감하게").
     소형 라벨류(1rem 미만) font-size와 트래킹용 letter-spacing만 대상 — 대형 디스플레이 헤드라인의
     음수 letter-spacing(-.01~-.02em 등)은 기존 line-height 150% 예외와 동일한 이유로 제외(스케일별 의도된 타이트함). */
  /* 2026-07-14(2차): 사이트 전체 최소 폰트 사이즈 14px 하한 규칙 적용 — 2xs/sm이 14px 아래였던 값을 바닥으로 인상 */
  --fs-2xs:14px;     /* 기존 .64rem(10.24px) → 14px 바닥 적용 — 초소형 배지·마이크로 라벨 */
  --fs-sm:14px;      /* 기존 .78rem(12.48px) → 14px 바닥 적용 — 보조 라벨·메타 텍스트 */
  --fs-md:18px;  /* 데스크톱 본문·설명 텍스트: 18px */

  /* 2026-08-11 감사: 반응형 타이틀 clamp 38종 → 5단 토큰으로 통합(desktop 최대크기 기준 버킷).
     min은 모바일, max는 데스크톱. 새 타이틀은 raw clamp 대신 이 토큰을 사용할 것. */
  --fs-display:clamp(58px,10vw,144px);  /* 페이지 히어로 대형 타이틀 */
  --fs-h1:clamp(40px,6vw,84px);         /* 대형 헤드라인 */
  --fs-h2:clamp(32px,5vw,54px);         /* 섹션 타이틀 */
  --fs-h3:clamp(24px,3vw,38px);         /* 서브 타이틀 */
  --fs-h4:clamp(18px,2vw,26px);         /* 소형 타이틀·리드 */

  --ls-tight:0;   /* 2026-07-14(3차): 사용자 지시로 전체 자간 0 통일 */
  --ls-label:0;
  --ls-wide:0;
  --ls-widest:0;

  /* ============================================================
     SEMANTIC TOKENS (2026-07-14, 5차) — 원시 토큰(--ink/--paper 등)을
     역할(의미) 기준으로 한 번 더 감싼 별칭 레이어. 사용처는 원시 색상값이
     아니라 이 의미 이름을 참조해야 함(예: 다크 배경 = --surface-inverse).
     원시 토큰 자체는 그대로 두고, 새 컴포넌트/리팩터링부터 이 레이어를 사용.
     ============================================================ */
  --surface:var(--paper);            /* 기본(밝은) 배경 */
  --surface-alt:var(--paper-2);      /* 보조 밝은 배경(웜 그레이지) */
  --surface-inverse:var(--ink);      /* 다크 배경(오버레이 메뉴·다크 패널·푸터 등) */
  --surface-inverse-soft:var(--ink-soft); /* 다크 배경 중 한 단계 옅은 톤 */

  --text-default:var(--ink);         /* 기본 본문 텍스트(밝은 배경 위) */
  --text-subtle:var(--black-soft);   /* 기본 블랙보다 한 톤 부드러운 강조 텍스트 */
  --text-secondary:var(--ink-soft);  /* 보조 본문 텍스트(리드 문단 등, 밝은 배경) */
  --text-inverse:var(--paper);       /* 다크 배경 위 텍스트 */
  --text-muted:var(--black-soft);    /* 2026-08-06 사용자 지시: 연한 베이지(--stone #9a9082) → 블랙보다 한 단계 낮은 그레이(#383838). 베이지 테두리(.chip:hover)는 --border-muted로 분리 유지 */
  --text-muted-inverse:var(--stone-2); /* 보조 텍스트(다크 배경 위, hover 등) */

  --border-default:var(--line);      /* 밝은 배경 위 구분선 */
  --border-inverse:var(--line-light);/* 다크 배경 위 구분선(오버레이 메뉴 리스트 등) */
  --border-muted:var(--stone);       /* 옅은 강조 보더(hover 등) */
  --border-strong:var(--ink);        /* 강조/포커스 보더 */
  --state-hover:var(--stone-2);      /* hover 상태 배경·보더(버튼 등) */
  --state-danger:#c0392b;            /* 필수입력 표시(*) 등 기능적 경고색 — 브랜드 팔레트 아님, 웜톤에 맞춘 벽돌색 red */
  --text-placeholder:#9a9a9a;        /* 2026-08-11 감사: 플레이스홀더·비활성 탭 중립 회색 raw #9a9a9a(5곳) 토큰화. --stone(웜)과 달리 순중립 그레이 */
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  color:var(--text-default);
  background:var(--surface);
  font-weight:400;
  line-height:1.8;
  letter-spacing:var(--ls-tight);
  -webkit-font-smoothing:antialiased;
  word-break:keep-all; /* 2026-07-21: 한글 텍스트가 어절 중간에서 끊기지 않도록 사이트 전체 적용 */
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--surface-inverse);color:var(--text-inverse)}

/* ---------- type ---------- */
.display{font-family:var(--serif);font-weight:400;line-height:1;letter-spacing:0}
.display-ko{font-family:var(--serif-ko);font-weight:400;line-height:1.15;letter-spacing:0}
/* micro-label = signature typographic gesture */
.eyebrow{
  font-size:var(--fs-2xs);font-weight:700;letter-spacing:var(--ls-widest);text-transform:uppercase;
  color:var(--text-muted);display:inline-block;
}
.eyebrow.on-dark{color:var(--text-muted-inverse)}
.lede{font-size:var(--fs-md);color:var(--text-secondary);max-width:44ch;font-weight:400;line-height:1.8}
.on-dark .lede,.panel--dark .lede{color:var(--text-muted-inverse)}

/* ---------- header ---------- */
.site-head{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:flex-end;
  padding:32px var(--pad);
  background-color:var(--surface);
  color:var(--text-default);pointer-events:none;text-shadow:none;
  transition:color .4s var(--ease),text-shadow .4s var(--ease),background-color .4s var(--ease),transform .4s var(--ease);
}
.site-head.scrolled{background-color:var(--surface)}
/* revealed on scroll-up while floating over content → pure white fill (dark text/logo) */
.site-head.floating,
.project-detail .site-head.floating{background-color:var(--white);color:var(--text-default)}
.project-detail .site-head.floating .brand__logo{filter:none}
.site-head.hide{transform:translateY(-100%)}
.site-head a,.site-head button{pointer-events:auto}
/* 2026-07-21: 메인 제외 전 페이지 헤더 로고 — 중앙정렬 폐기, 좌측 정렬 + 약간 확대. 태그라인(<small>)은 숨김(메인만 별도 재노출) */
.brand{text-align:left;
  font-family:var(--serif);font-weight:700;font-size:29px;letter-spacing:var(--ls-tight);line-height:1}
.site-head .brand{position:absolute;left:var(--pad);top:50%;transform:translateY(-50%)}
.brand__logo{display:block;width:132px;height:auto}
@media(max-width:700px){.brand__logo{width:96px}}
.brand small{display:none;font-family:var(--sans);font-weight:400;font-size:var(--fs-2xs);letter-spacing:var(--ls-widest);margin-top:6px}
.menu-btn{background:none;border:none;color:inherit;cursor:pointer;font-family:var(--sans);
  width:36px;height:36px;padding:0;display:flex;align-items:center;justify-content:center}
.menu-btn i{width:24px;height:2px;background:currentColor;display:inline-block;position:relative}
.menu-btn i::after{content:"";position:absolute;left:0;top:-7px;width:24px;height:2px;background:currentColor}

/* ---------- overlay menu ---------- */
html.nav-open,html.nav-open body{overflow:hidden;height:100%}
.nav-overlay{position:fixed;inset:0;z-index:80;background:var(--surface);color:var(--text-default);
  display:flex;flex-direction:column;justify-content:center;padding:var(--pad);
  transform:translateX(100%);transition:transform .9s var(--ease)}
.nav-overlay.open{transform:none}
.nav-overlay ol{list-style:none;counter-reset:n;width:100%;max-width:var(--maxw);margin:0 auto}
.nav-overlay li{counter-increment:n;border-bottom:1px solid var(--border-default)}
.nav-overlay ol a{font-family:var(--sans);font-weight:700;font-size:var(--fs-h1);line-height:1;letter-spacing:0;text-transform:uppercase;
  display:flex;align-items:center;gap:2px;color:var(--text-default);padding:clamp(24px,3.4vw,38px) 0;
  transition:color .4s var(--ease),transform .5s var(--ease)}
.nav-overlay ol a::before{display:none}
/* menu label: hollow/outline by default, fills solid from the bottom up on hover */
.nav-label{position:relative;display:inline-block;color:transparent;-webkit-text-stroke:1px var(--text-default)}
.nav-label::after{content:attr(data-text);position:absolute;inset:0;color:var(--text-default);
  clip-path:inset(100% 0 0 0);transition:clip-path .9s cubic-bezier(.16,1,.3,1)}
/* iOS 는 터치한 요소에 :hover 가 남아 효과가 고착된다 — 움직임·확대 hover 는 마우스 기기에서만(2026-10-14 수정요청) */
@media(hover:hover) and (pointer:fine){.nav-overlay ol a:hover .nav-label::after{clip-path:inset(0 0 0 0)}}
.nav-overlay ol a .nav-ko{font-family:var(--sans);font-weight:400;font-size:clamp(16px,1.5vw,20px);text-transform:none;color:var(--text-secondary);margin-left:8px;white-space:nowrap;flex:none;align-self:flex-end;margin-bottom:4px}
.nav-overlay ol a::after{content:"⟶";margin-left:auto;font-size:32px;font-weight:400;color:var(--text-secondary);opacity:1;transform:none;transition:opacity .4s var(--ease),transform .5s var(--ease)}
@media(hover:hover) and (pointer:fine){.nav-overlay ol a:hover{color:var(--text-secondary);transform:translateX(16px)}
.nav-overlay ol a:hover::after{opacity:1;transform:none}}
/* two-column menu: nav list (left) + image index (right) */
.nav-inner{width:100%;max-width:none;margin:clamp(130px,16vh,180px) 0 0;display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(32px,6vw,112px);align-items:stretch}
.nav-inner ol{max-width:none;align-self:start;zoom:.82}
.nav-gallery{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:clamp(9px,1.1vw,14px);min-height:0}  /* 2026-08-11 복구: JS가 className으로 생성하는 요소라 고아 오판돼 삭제됐던 것 */
.ng{position:relative;overflow:hidden;background:var(--surface-alt);min-height:0;isolation:isolate;transform:translateZ(0);container-type:size}   /* iOS overflow:hidden 클리핑 버그로 이미지가 틀 밖으로 새는 것 방지 */
.ng img{position:absolute;top:0;bottom:0;left:0;width:auto;min-width:100%;max-width:none;height:100%;object-fit:cover;display:block;transition:transform 1.4s var(--ease);animation:navGalleryDrift 26s ease-in-out infinite alternate}  /* 2026-11-10 사진 비율 그대로 칸 높이에 맞추고 남는 가로만 흐른다 — 전엔 칸 너비 180% 틀에 cover 라 오른쪽 두 칸이 위아래까지 잘려 확대돼 보였다 */
@media(hover:hover) and (pointer:fine){.ng:hover img{animation-play-state:paused;transform:scale(1.05)}}
@keyframes navGalleryDrift{from{transform:translateX(calc(100cqw - 100%))}to{transform:translateX(0)}}  /* 100cqw = 칸 너비(.ng container) — 사진 오른쪽 끝에서 왼쪽 끝까지 */
.ng--a img{width:max(100%,75cqh)}  /* 2026-11-10 왼쪽 큰 칸은 키가 커서 칸 높이에 맞춘 가로 사진이 오른쪽 칸보다 몇 배 멀리 흘렀다 — 흐르는 틀을 3:4(높이의 75%)로 묶어 사진 가운데만 흐르게 해 두 칸과 움직임을 맞춘다 */
.ng--a{grid-column:1;grid-row:1/3}
.ng--b{grid-column:2;grid-row:1}
.ng--c{grid-column:2;grid-row:2}
@media(max-width:960px){.nav-overlay{justify-content:flex-start;overflow-y:auto;overscroll-behavior:contain}.nav-inner{grid-template-columns:1fr;margin:88px 0 32px}.nav-gallery{display:grid;width:100%;min-height:clamp(240px,45vw,420px)}.nav-overlay ol a{font-weight:700}.nav-overlay ol a::after{font-size:24px;font-weight:400}.nav-overlay .nav-foot{margin-top:0;gap:24px 20px}}
.nav-close{position:absolute;top:var(--head-center);transform:translateY(-50%);right:var(--pad);z-index:5;background:none;border:none;color:var(--text-default);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:opacity .3s var(--ease)}  /* 2026-08-06 좌측 로고(.nav-brand)와 같은 세로 중심선에 맞춤 */
.nav-close svg{width:32px;height:32px}
.nav-close:hover{opacity:.7}
/* menu overlay: WJ DESIGN logo pinned top-left, matching the site header's brand position (left:--pad, vertical center = 1.9rem padding + half the 36px control) */
.nav-brand{position:absolute;left:var(--pad);top:var(--head-center);transform:translateY(-50%);z-index:5;display:inline-flex;align-items:center}
.nav-brand .brand__logo{display:block;width:132px;height:auto}
@media(max-width:700px){.nav-brand .brand__logo{width:96px}}
.nav-foot{margin-top:auto;padding:48px 0 24px;display:flex;gap:40px;flex-wrap:wrap;font-size:14px;color:var(--text-secondary);letter-spacing:var(--ls-label);text-transform:uppercase}
.social-link{display:inline-flex;align-items:center;gap:8px;color:var(--text-default);transition:opacity .3s var(--ease)}
.social-link .social-icon{width:15px;height:15px;flex:none;color:var(--text-secondary)}
.social-link:hover{opacity:.7}

/* ============================================================ SECTION-SNAP */
.snap{height:100vh;height:100svh;overflow-y:scroll;scroll-snap-type:y mandatory;scroll-behavior:smooth;scrollbar-width:none}
.snap::-webkit-scrollbar{display:none}
.panel{height:100vh;height:100svh;scroll-snap-align:start;scroll-snap-stop:always;
  position:relative;display:flex;flex-direction:column;justify-content:center;
  padding:112px var(--pad) 80px;overflow:hidden}
.panel--paper-2{background:var(--surface-alt)}

/* dot nav */
.dots{position:fixed;right:calc(var(--pad) * .5);top:50%;transform:translateY(-50%);z-index:55;display:flex;flex-direction:column;gap:16px;mix-blend-mode:difference}
.dots button{width:6px;height:6px;border-radius:1000px;border:1px solid var(--white);background:transparent;cursor:pointer;padding:0;transition:.4s var(--ease)}
.dots button.active{background:var(--white);transform:scale(1.4)}
@media(max-width:700px){
  .dots{display:flex;top:auto;right:50%;bottom:calc(var(--pad) + 56px);transform:translateX(50%);flex-direction:row;gap:12px;mix-blend-mode:normal}
}

/* scroll cue */
.cue{position:absolute;left:var(--pad);bottom:35px;display:flex;align-items:center;gap:12px;font-size:var(--fs-2xs);letter-spacing:var(--ls-wide);text-transform:uppercase;color:inherit}
.cue span{display:block;width:54px;height:1px;background:currentColor;position:relative;overflow:hidden;opacity:.6}
.cue span::after{content:"";position:absolute;inset:0;background:var(--white);animation:cue 3s var(--ease) infinite}
@keyframes cue{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}

/* ---------- placeholder imagery (warm neutral) ---------- */
.ph{position:relative;background:var(--surface-alt);overflow:hidden;isolation:isolate}
.ph::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 70% 20%,rgba(var(--white-rgb),.85),rgba(var(--white-rgb),0) 48%),
    radial-gradient(150% 130% at 26% 104%,rgba(var(--ink-rgb),.34),rgba(var(--ink-rgb),0) 56%),
    linear-gradient(155deg,var(--ph-warm-1) 0%,var(--ph-warm-2) 46%,var(--ph-warm-3) 100%);}
.ph::after{content:"";position:absolute;inset:0;opacity:.42;mix-blend-mode:overlay;
  background-image:repeating-linear-gradient(118deg,rgba(var(--white-rgb),.04) 0 2px,rgba(var(--black-rgb),.05) 2px 4px)}
.ph--warm::before{background:var(--ph-flat)}
.ph--warm::after{display:none}

/* ---------- real photography (overrides the fake gradient painter) ----------
   set per element:  style="--img:url('img/living.jpg')"  ·  keeps ken-burns */
.ph.ph--photo::before{
  background:var(--img) var(--img-pos,center) / cover no-repeat;
  mix-blend-mode:normal;
}
.ph.ph--photo::after{           /* soft bottom scrim so white labels stay legible */
  opacity:1;mix-blend-mode:normal;
  background:linear-gradient(0deg,rgba(var(--ink-rgb),.42),rgba(var(--ink-rgb),0) 46%);
}

.ph__tag{position:absolute;left:18px;bottom:16px;z-index:2;font-size:var(--fs-2xs);letter-spacing:var(--ls-wide);text-transform:uppercase;color:rgba(var(--white-rgb),.8)}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.13)}}

/* ============================================================ HOME */
/* hero — photography dominant, quiet type */
.hero .ph{position:absolute;inset:0;z-index:0}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(102deg,rgba(var(--ink-rgb),.6) 0%,rgba(var(--ink-rgb),.22) 48%,rgba(var(--ink-rgb),0) 76%),
             linear-gradient(0deg,rgba(var(--ink-rgb),.5),rgba(var(--ink-rgb),0) 44%)}
.hero h1{font-size:var(--fs-display);font-weight:400;letter-spacing:0;text-shadow:0 2px 50px rgba(var(--black-rgb),.3)}
.hero .sub{font-family:var(--sans);font-weight:400;letter-spacing:var(--ls-widest);text-transform:uppercase;font-size:14px;margin-top:24px;padding-left:.4em;color:rgba(var(--white-rgb),.86)}
.hero .social{position:absolute;right:0;bottom:35px;display:flex;gap:24px;font-size:var(--fs-2xs);letter-spacing:var(--ls-wide);text-transform:uppercase;z-index:3}

/* signature — image dominant */
.signature .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,64px);align-items:center;height:100%}
.signature .feature{aspect-ratio:4/5;height:min(70vh,720px)}
.signature .meta .num{font-family:var(--serif);color:var(--text-muted-inverse);font-size:24px;font-weight:700}
.signature .meta h3{font-size:var(--fs-h2);margin:10px 0 20px;font-weight:400}
@media(max-width:960px){.signature .grid{grid-template-columns:1fr;gap:24px}.signature .feature{aspect-ratio:16/10;height:auto}}

/* process */
.proc .steps{display:flex;gap:0;margin-top:48px;border-top:1px solid var(--border-default);overflow-x:auto}
.proc .step{flex:1 0 auto;min-width:130px;padding:24px 20px 32px;border-right:1px solid var(--border-default)}
.proc .step:last-child{border-right:none}
.proc .step .n{font-family:var(--serif);color:var(--text-muted);font-size:19px}
.proc .step .t{margin-top:10px;font-size:var(--fs-md);font-weight:400}

/* cta */
.cta{text-align:center;align-items:center}
.cta h2{font-size:var(--fs-h1);font-weight:400}
.cta .btn{margin-top:40px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:16px;font-size:var(--fs-2xs);letter-spacing:var(--ls-wide);text-transform:uppercase;
  padding:16px 32px;border:1px solid currentColor;border-radius:var(--radius);transition:.45s var(--ease)}
.btn:hover{background:currentColor}
.btn:hover span{color:var(--text-default)}
.panel--dark .btn:hover span,.on-dark .btn:hover span{color:var(--text-default)}
.btn--fill{background:var(--surface);color:var(--text-default);border-color:var(--text-inverse)}
.btn--fill:hover{background:var(--state-hover);border-color:var(--text-muted-inverse)}

.inquiry-submit{width:100%;justify-content:center;border:none;background:var(--surface-inverse);color:var(--text-inverse)}
.inquiry-submit span{color:inherit}
.inquiry-submit:hover{background:var(--surface-inverse);color:var(--text-inverse);border-color:var(--text-inverse);filter:brightness(.92)}
.inquiry-submit:hover span{color:var(--text-inverse)}

/* ============================================================ STANDARD PAGES */
/* 프로젝트 상세 전용 — 상단 화면 꽉 채우는 대문(커버) 이미지 */
.project-cover{width:100vw;height:100vh;height:100svh;position:relative;left:50%;margin-left:-50vw;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad)}
.project-cover .ph{position:absolute;inset:0}
.project-cover::before{content:"";position:absolute;inset:0;background:rgba(var(--black-rgb),.35);mix-blend-mode:multiply;z-index:1}
.project-cover__in{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;width:100%;text-align:center}
/* 다크 오버레이 위 텍스트는 흰색으로 통일, 센터 정렬 */
.project-cover__in h1,
.project-cover__in .eyebrow,
.project-cover__in .lede{color:var(--text-inverse)}
/* about.html .about-hero__title와 동일한 크기로 통일(2026-07-21) — 원래 88px 고정값이었음 */
.project-cover__in h1{font-size:var(--fs-display);font-weight:700;
  /* about.html .about-hero__title와 동일한 그라데이션 텍스트(2026-07-21) — 다크 커버 위 흰색 그라데이션 */
  background:linear-gradient(90deg,rgba(var(--white-rgb),.55),var(--white) 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.project-cover__in h1.project-cover__title{position:relative;background:none;color:transparent;-webkit-text-stroke:1px var(--white)}
.project-cover__in h1.project-cover__title::after{content:attr(data-text);position:absolute;inset:0;color:var(--white);-webkit-text-stroke:0;
  clip-path:inset(100% 0 0 0);animation:projectCoverTitleFill 1.5s cubic-bezier(.15,.85,.2,1) 0s forwards}
@keyframes projectCoverTitleFill{to{clip-path:inset(0 0 0 0)}}
.project-cover__in .eyebrow{font-size:16px}
.project-cover__in .lede{margin:20px auto 0;max-width:none;white-space:nowrap}

.page-hero{min-height:78vh;display:flex;flex-direction:column;justify-content:flex-end;padding:180px var(--pad) 80px;background:var(--surface);color:var(--text-default);position:relative;overflow:hidden}
/* project(portfolio)·contact 페이지 히어로만 120px 낮춰 타이틀을 위로 올림 */
.project-page .page-hero,
.contact-page .page-hero{min-height:calc(78vh - 120px)}
.page-hero__in{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;width:100%;text-align:center}
.page-hero h1{font-size:80px;font-weight:400}
.page-hero .lede{margin:20px auto 0;color:var(--text-secondary)}

section.section{padding:clamp(64px,10vw,144px) var(--pad)}
.section__in{max-width:var(--maxw);margin:0 auto}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,112px);align-items:center}
.split.narrow{grid-template-columns:.75fr 1.25fr}
@media(max-width:960px){.split,.split.narrow{grid-template-columns:1fr;gap:32px}}
.h-lg{font-size:var(--fs-h2);font-weight:400}
.h-md{font-size:var(--fs-h3);font-weight:400}
.muted{color:var(--text-secondary)}
.rule{height:1px;background:var(--border-default);margin:clamp(40px,5vw,72px) 0}

/* ---------- YOO-tone section header (shared · number + uppercase EN + rule) ---------- */
.section-head{display:flex;align-items:baseline;gap:24px;flex-wrap:wrap;
  margin-bottom:clamp(42px,5vw,64px);padding-bottom:20px;border-bottom:1px solid var(--border-default)}
.section-head__en{font-family:var(--sans);font-weight:700;font-size:var(--fs-h1);
  letter-spacing:0;text-transform:uppercase;line-height:1}

/* ---------- section-swap sticky bar (YOO-style current/next label — large, bold, not micro-caps) ---------- */
.sec-swap{position:sticky;top:64px;z-index:20;display:flex;align-items:baseline;gap:24px;
  padding:16px var(--pad);background:var(--surface);border-bottom:1px solid var(--border-default)}

/* ---------- line-mask headline reveal ---------- */
.lr-line{display:block;overflow:hidden}
.lr-inner{display:block;transform:translateY(112%);transition:transform 1.1s var(--ease)}
.line-reveal.in .lr-line:nth-child(1) .lr-inner{transition-delay:0s}
.line-reveal.in .lr-line:nth-child(2) .lr-inner{transition-delay:.09s}
.line-reveal.in .lr-line:nth-child(3) .lr-inner{transition-delay:.18s}
.line-reveal.in .lr-inner{transform:none}

/* ---------- image zoom-settle reveal + hover micro-zoom (YOO-style photo motion) ---------- */
.img-reveal{overflow:hidden}
.img-reveal > *{transform:scale(1.16);transition:transform 1.4s var(--ease)}
.img-reveal.in > *{transform:scale(1)}
@media(hover:hover) and (pointer:fine){.img-reveal:hover > *{transform:scale(1.05)}}

/* ---------- photo caption rhythm (image → category → title, YOO-measured gaps) ---------- */
.img-cap{margin-top:16px;font-family:var(--sans)}

/* ---------- doc/spec (title + lead + hover-reveal certificate cards) ---------- */
.spec-title{font-family:var(--sans);font-weight:700;font-size:var(--fs-h2);
  line-height:1.15;letter-spacing:-.02em;margin-bottom:24px}
.spec-lead{font-size:var(--fs-md);font-weight:400;color:var(--text-secondary);line-height:1.5;max-width:48ch;margin-bottom:clamp(42px,5vw,64px)}

/* 2026-07-21: 등록증 여러 건(현재 2건)을 카드로 배치 — 기본은 사진만, 하단 그라디언트 스크림 위 팩트리스트는
   호버(데스크톱)·포커스(키보드) 시에만 노출. 레퍼런스: 그레이스케일 인물카드 + 하단 스크림(타이틀+구분선+2단 정보) */
.spec-cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,48px)}    /* 사진은 그대로, 호버 시 정보만 노출 — 사이트 공용 .img-reveal:hover 마이크로줌 무효화 */
.spec-card__info{position:absolute;left:0;right:0;bottom:0;
  padding:clamp(22px,3vw,32px);
  background:linear-gradient(to top,rgba(var(--black-rgb),.92) 0%,rgba(var(--black-rgb),.72) 65%,rgba(var(--black-rgb),0) 100%);
  opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease),transform .45s var(--ease);pointer-events:none}
.spec-card__info .spec-meta{border-top:none;max-width:none}
.spec-card__info .spec-meta div{grid-template-columns:104px 1fr;border-bottom-color:rgba(var(--white-rgb),.18)}
.spec-card__info .spec-meta div:last-child{border-bottom:none}
.spec-card__info .spec-meta dt{color:rgba(var(--white-rgb),.55)}
.spec-card__info .spec-meta dd{color:var(--white)}
.spec-meta{border-top:1px solid var(--border-default)}
.spec-meta div{display:grid;grid-template-columns:104px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--border-default)}
.spec-meta dt{font-size:var(--fs-2xs);font-weight:400;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted)}
.spec-meta dd{font-size:var(--fs-md);font-weight:400;color:var(--text-default);line-height:1.5}

/* ---------- stacked value rows (YOO-style oversized label list, dim-on-hover) ---------- */
.values-stack{border-top:1px solid var(--border-default)}

/* portfolio filter */
/* section.section / .section__in과 동일한 2단 구조(외곽 padding:var(--pad) + 내부 max-width 중앙정렬)로
   화면 크기와 무관하게 좌우 여백이 항상 일치하도록 함 */
.filter-panel{padding:48px var(--pad)}
.page-hero__reload,.hero-title-link{display:inline-block;color:inherit}
.hero-title-link{position:relative;z-index:1}
.filter-panel__in{max-width:var(--maxw);margin:0 auto;display:grid;gap:20px}
.filter-top{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:32px 40px}
.search-box{position:relative;flex:0 1 320px;max-width:420px}
.search-box input{width:100%;font-family:var(--sans);font-size:var(--fs-md);color:var(--text-default);
  background:transparent;border:none;border-bottom:1px solid var(--border-default);padding:12px 32px 12px 0;transition:.35s var(--ease)}
.search-box input::placeholder{color:var(--text-placeholder)}  /* 2026-08-06 --text-muted가 다크그레이로 바뀌며 플레이스홀더가 너무 진해져, 중립 회색으로 분리 */
.search-box input:focus{outline:none;border-color:var(--text-default)}
.search-box svg{position:absolute;right:0;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--text-muted);pointer-events:none}
.fg-row{display:grid;gap:16px;flex:1 1 700px}
/* 2026-08-11 모바일·태블릿(≤960): 검색창을 필터 영역 위로 */
@media(max-width:960px){
  .filter-top{flex-direction:column}
  .search-box{order:-1;flex:none;width:100%;max-width:none}
  .fg-row{flex:none;width:100%}
}

/* 모바일 좌우 여백: 20px → 16px (전 페이지 공통 토큰) */
@media(max-width:700px){ :root{--pad:16px} }
/* ---------- 모바일 필터: 트리거 버튼 + 바텀시트 (데스크톱은 기존 그대로) ---------- */
.filter-trigger{display:none}
.fg-sheet__head,.fg-sheet__foot{display:none}
.fg-dim{display:none}
@media(max-width:700px){
  /* 필터 버튼: 블랙 배경 + 화이트 텍스트·아이콘, 보기 개수 셀렉트와 같은 줄(좌측)
     — 기본 .list-toolbar__in 규칙이 이 블록보다 아래에 있어 선택자를 한 단계 더 구체적으로 지정 */
  .list-toolbar .list-toolbar__in{justify-content:space-between;align-items:center;gap:10px}
  .filter-trigger{display:inline-flex;align-items:center;gap:8px;
    font-family:var(--sans);font-size:14px;color:var(--white);cursor:pointer;
    padding:10px 16px;background:var(--ink);border:1px solid var(--ink);border-radius:var(--radius)}
  .filter-trigger__ic{width:18px;height:18px;flex:none;color:var(--white)}
  .filter-trigger__count{min-width:20px;height:20px;padding:0 6px;border-radius:999px;
    background:var(--white);color:var(--ink);font-size:11px;font-weight:700;
    display:inline-flex;align-items:center;justify-content:center}
  .filter-trigger__count[hidden]{display:none}   /* 선택 0개면 뱃지 숨김 */
  .filter-trigger[aria-expanded="true"]{opacity:.86}

  /* 바텀시트 */
  .fg-sheet{position:fixed;left:0;right:0;bottom:0;z-index:180;
    background:var(--surface);border-radius:16px 16px 0 0;
    padding:8px 20px calc(16px + env(safe-area-inset-bottom));
    max-height:76vh;overflow:auto;-webkit-overflow-scrolling:touch;
    transform:translateY(101%);transition:transform .32s var(--ease);
    box-shadow:0 -8px 40px rgba(var(--black-rgb),.18)}
  .fg-sheet.is-open{transform:translateY(0)}
  .fg-sheet__head{display:flex;align-items:center;justify-content:space-between;
    padding:12px 0 14px;position:sticky;top:0;background:var(--surface);z-index:2}
  /* 시트 상단 그랩바 */
  .fg-sheet__head::before{content:"";position:absolute;left:50%;top:2px;transform:translateX(-50%);
    width:40px;height:4px;border-radius:999px;background:var(--border-default)}
  .fg-sheet__title{font-family:var(--sans);font-size:16px;font-weight:700;color:var(--text-default)}
  .fg-sheet__close{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;
    border:none;background:none;color:var(--text-secondary);cursor:pointer}
  .fg-sheet__close svg{width:20px;height:20px}
  .fg-sheet .fg-row{gap:24px;padding-bottom:24px}
  .fg-sheet__foot{display:flex;gap:10px;position:sticky;bottom:0;background:var(--surface);
    padding:14px 0 6px;border-top:1px solid var(--border-default)}
  .fg-sheet__reset,.fg-sheet__apply{flex:1;font-family:var(--sans);font-size:15px;cursor:pointer;
    height:48px;border-radius:var(--radius)}
  .fg-sheet__reset{flex:0 0 34%;background:var(--surface);color:var(--text-default);border:1px solid var(--border-default)}
  .fg-sheet__apply{background:var(--ink);color:var(--white);border:1px solid var(--ink);font-weight:700}

  /* 닫힌 상태에서도 요소가 남아 클릭을 가로채지 않도록 visibility·pointer-events로 제어 */
  .fg-dim{display:block;position:fixed;inset:0;z-index:170;background:rgba(var(--black-rgb),.45);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .3s var(--ease),visibility 0s linear .3s}
  .fg-dim.is-open{opacity:1;visibility:visible;pointer-events:auto;
    transition:opacity .3s var(--ease),visibility 0s}
  body.filter-open{overflow:hidden}
}

.fg{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:start;gap:16px}
.fg .gk{padding-top:10px;font-family:var(--sans);font-size:16px;font-weight:400;letter-spacing:0;color:var(--text-default)}
.fg .chips{display:flex;flex-wrap:wrap;gap:8px}
@media(max-width:700px){.fg{grid-template-columns:1fr;gap:6px}.fg .gk{padding-top:0}}
.chip{display:inline-flex;align-items:center;height:40px;background:none;border:1px solid var(--border-default);border-radius:var(--radius);padding:0 16px;font-size:14px;font-weight:400;color:var(--text-secondary);cursor:pointer;transition:.25s var(--ease);font-family:var(--sans)}
.chip:hover{border-color:var(--border-muted)}
.chip.active{background:var(--surface-inverse);color:var(--text-inverse);border-color:var(--text-default)}

/* active filter tags + reset */
.active-filters{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:transparent;border-top:1px solid var(--border-default);padding:24px 0}  /* 2026-08-11 박스 제거 → 투명 + 상단 보더라인, 좌우 패딩 0 */
.active-filters[hidden]{display:none}
.active-filters__tags{display:flex;flex-wrap:wrap;gap:10px}
.active-filters__tag{display:inline-flex;align-items:center;gap:4px;height:40px;padding:0 8px 0 12px;
  border:1px solid var(--border-default);border-radius:var(--radius);background:var(--surface);
  font-family:var(--sans);font-size:14px;color:var(--text-default)}  /* 2026-08-11 복구: JS 생성 클래스 고아 오판 삭제분 */
.active-filters__tag button{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  appearance:none;-webkit-appearance:none;border:none;outline:none;background:none;box-shadow:none;border-radius:0;
  color:var(--text-muted);cursor:pointer;transition:.2s var(--ease);font-size:22px;line-height:1}
.active-filters__tag button:hover{color:var(--text-default)}
.active-filters__tag button svg{width:16px;height:16px;display:block}  /* 2026-08-11 × 텍스트 → 얇은 stroke SVG(굵기 완화) */
.active-filters__reset{background:none;border:none;cursor:pointer;font-family:var(--sans);font-size:14px;
  color:var(--text-muted);text-decoration:underline;text-underline-offset:.2em;transition:.2s var(--ease)}
.active-filters__reset:hover{color:var(--text-default)}
.card .price{font-size:var(--fs-sm);color:var(--text-muted);margin-top:6px;letter-spacing:var(--ls-label)}

/* 프로젝트 목록(사진 그리드): 대형 화면에서 좌우 여백이 과해 보이지 않도록 본문 폭만 확장.
   텍스트 위주 페이지(회사소개·프로세스 등)는 가독성을 위해 기존 1500px 유지 */
.project-page .filter-panel__in,
.project-page .list-toolbar__in,
.project-page .sec-projects .section__in{max-width:var(--maxw-wide)}

.grid-work{display:grid;grid-template-columns:repeat(3,1fr);row-gap:48px;column-gap:8px}
@media(max-width:960px){.grid-work{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.grid-work{grid-template-columns:1fr}}
.card{display:block;cursor:pointer;transition:opacity .3s var(--ease);position:relative}
.card .ph{aspect-ratio:4/3;transition:.7s var(--ease);border-radius:0;overflow:hidden}
.grid-work .card .ph{clip-path:inset(0 50% 0 0);transition:clip-path 1.3s var(--ease)}
.grid-work .card.in .ph{clip-path:inset(0 0 0 0)}
.card .ph::before{transition:transform 1.4s var(--ease)}
@media(hover:hover) and (pointer:fine){.card:hover .ph::before{transform:scale(1.06)}}
/* 카드 타이틀 — 이미지 밑 상시노출(2026-07-15 호버 오버레이 실험 롤백)
   2026-07-29 로케이션(.loc)·태그(.tags) 축 제거 — 카드는 타이틀 단일 정보로 확정 */
.card__overlay{position:static;opacity:1;background:none;padding:0}
.card__overlay h3{font-family:var(--serif);font-size:24px;font-weight:700;color:var(--text-default);margin-top:8px}
.card__overlay h3 em{font-family:var(--sans);font-size:16px;font-style:normal;font-weight:400;white-space:nowrap}
@media(prefers-reduced-motion:reduce){.grid-work .card .ph{clip-path:none;transition:none}}

/* pagination */
.pagination{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:clamp(45px,5vw,72px);flex-wrap:wrap;min-height:40px}
.pagination button{min-width:40px;height:40px;padding:0 10px;border:none;background:none;border-radius:var(--radius);
  font-family:var(--sans);font-size:var(--fs-sm);color:var(--text-secondary);cursor:pointer;transition:.25s var(--ease);letter-spacing:var(--ls-tight)}
.pagination button:hover:not(:disabled){background:var(--surface-alt);color:var(--text-default)}
.pagination button.active{background:var(--surface-inverse);color:var(--text-inverse)}
.pagination button:disabled{opacity:.32;cursor:default}
.pagination .pg-arrow{font-size:16px}
.trust .lic{aspect-ratio:3/4}
@media(max-width:700px){.trust .lic{max-width:150px}}

/* detail (2-row x 3-col spec grid, right-anchored within the section — YOO reference) */
.spec{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 48px;margin-left:auto;max-width:820px}
.spec div{padding-bottom:10px;border-bottom:1px solid var(--border-default);
  font-size:17px;font-weight:400;color:var(--text-default)}
@media(max-width:700px){.spec{grid-template-columns:repeat(2,1fr);max-width:none;margin-left:0;gap:32px}.spec div{font-size:14px}}
@media(max-width:420px){.spec{grid-template-columns:1fr}}
.spec div span{display:block;font-size:var(--fs-2xs);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--text-muted);margin-bottom:6px}
/* 프로젝트 상세 개요: 좌측 유튜브 첨부 + 우측 스펙 */
.overview-row{display:flex;gap:clamp(32px,4vw,64px);align-items:flex-start}
.overview-row .spec{flex:1;min-width:0}
.project-video{flex:0 0 clamp(300px,38%,520px);margin:0}
.project-video[hidden]{display:none}
.project-video__frame{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:none;
  border-radius:4px;overflow:hidden;background:var(--surface-alt);cursor:pointer}
.project-video__thumb{position:absolute;inset:0;background:var(--img,none) center/cover no-repeat;
  transition:transform .7s var(--ease)}
@media(hover:hover) and (pointer:fine){.project-video__frame:hover .project-video__thumb{transform:scale(1.04)}}
.project-video__frame::after{content:"";position:absolute;inset:0;background:rgba(var(--black-rgb),.16);
  transition:background .3s var(--ease)}
@media(hover:hover) and (pointer:fine){.project-video__frame:hover::after{background:rgba(var(--black-rgb),.06)}}
.project-video__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:68px;height:48px;display:block;transition:transform .3s var(--ease)}
.project-video__play svg{width:100%;height:100%;display:block}
.project-video__play .yt-bg{fill:#212121;fill-opacity:.82;transition:fill-opacity .3s}
@media(hover:hover) and (pointer:fine){.project-video__frame:hover .project-video__play{transform:translate(-50%,-50%) scale(1.06)}
.project-video__frame:hover .project-video__play .yt-bg{fill:#f00;fill-opacity:1}}
.project-video__cap{margin-top:12px}
.project-video__link{font-family:var(--sans);font-size:var(--fs-2xs);letter-spacing:var(--ls-wide);
  text-transform:uppercase;color:var(--text-secondary);text-decoration:none;border-bottom:1px solid transparent}
.project-video__link:hover{color:var(--text-default);border-bottom-color:var(--text-default)}
/* 재생 시 iframe이 프레임 자리를 그대로 차지 */
.project-video__embed{width:100%;aspect-ratio:16/9;border:0;border-radius:4px;display:block}
@media(max-width:960px){
  .overview-row{flex-direction:column}
  .project-video{flex:none;width:100%}
  .overview-row .spec{width:100%;margin-left:0}
}

.keypoints{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;counter-reset:keypoint}
.keypoints .keypoint{counter-increment:keypoint;border-top:1px solid var(--border-default);padding-top:16px}
.keypoints .keypoint::before{content:"0" counter(keypoint);font-family:var(--serif);color:var(--text-muted);font-size:21px}
.keypoints .keypoint p{margin-top:10px;font-size:var(--fs-md);color:var(--text-secondary);line-height:1.8}
@media(max-width:700px){.keypoints{grid-template-columns:1fr}}
.narr{max-width:52ch;margin:0 auto;font-size:16px;color:var(--text-secondary);line-height:1.8}
.narr p{margin:24px 0}
.detail-figs{display:grid;grid-template-columns:1fr 1fr;gap:300px clamp(19px,2vw,26px);padding-top:40px}
.detail-figs .fig{display:flex;flex-direction:column;gap:16px}
/* left→right clip-path unfold on scroll-in (same language as about.html's .img-reveal) */
.detail-figs .fig .ph{aspect-ratio:3/4;border-radius:4px;
  clip-path:inset(0 50% 0 0);transition:clip-path 1.1s var(--ease)}
.detail-figs .fig.in .ph{clip-path:inset(0 0% 0 0)}
.detail-figs .fig.wide{grid-column:1/-1}
.detail-figs .fig.wide .ph{aspect-ratio:16/9}
.detail-figs .fig.align-left{grid-column:1}
.detail-figs .fig.align-right{grid-column:2}
/* 자유 구성용 모디파이어: 크기(sm/xs) + 세로정렬(top/mid/bottom) + 가로정렬(hleft/hcenter/hright).
   페어마다 조합을 달리 배정해 획일적이지 않은 편집형 갤러리를 만든다. */
.detail-figs .fig--sm{width:70%}
.detail-figs .fig--xs{width:56%}
.detail-figs .fig--top{align-self:start}
.detail-figs .fig--mid{align-self:center}
.detail-figs .fig--bottom{align-self:end}
.detail-figs .fig--hleft{margin-right:auto}
.detail-figs .fig--hcenter{margin-left:auto;margin-right:auto}
.detail-figs .fig--hright{margin-left:auto}
.detail-figs .ph.ph--photo::after{display:none}   /* caption now lives below, no need for the legibility scrim */
.fig__cap{font-family:var(--sans);font-size:17px;font-weight:400;letter-spacing:var(--ls-wide);
  text-transform:uppercase;color:var(--text-secondary)}
@media(max-width:700px){
  .fig__cap{font-size:14px}
  .detail-figs{grid-template-columns:1fr}
  .detail-figs .fig.align-left,.detail-figs .fig.align-right{grid-column:1}
}
.detail-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:flex-start;position:relative;min-height:clamp(288px,34vw,480px);margin-bottom:28.8px;border-top:1px solid var(--border-default);padding-top:32px;font-size:var(--fs-h1);letter-spacing:var(--ls-label)}
.detail-nav a{z-index:2}
.detail-nav__prev{justify-self:start}
.detail-nav__list{justify-self:center}
.detail-nav__next{justify-self:end}
.detail-nav__action{display:flex;align-items:center;gap:clamp(13px,1.6vw,24px)}
.detail-nav__arrow{display:inline-flex;width:clamp(32px,3vw,45px);color:var(--text-default);flex:none}
.detail-nav__arrow svg{width:100%;height:auto;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.detail-nav__label{position:relative;display:inline-block;font-family:var(--sans);font-weight:700;line-height:1;color:transparent;-webkit-text-stroke:1px var(--text-default)}
.detail-nav__label::after{content:attr(data-text);position:absolute;inset:0;color:var(--text-default);-webkit-text-stroke:0;clip-path:inset(100% 0 0 0);transition:clip-path .8s cubic-bezier(.16,1,.3,1)}
.detail-nav a:focus-visible .detail-nav__label{color:transparent}
.detail-nav a:focus-visible .detail-nav__label::after{clip-path:inset(0 0 0 0)}
@media(hover:hover) and (pointer:fine){.detail-nav a:hover .detail-nav__label{color:transparent}
.detail-nav a:hover .detail-nav__label::after{clip-path:inset(0 0 0 0)}}
/* 미리보기를 각 링크 기준으로 자기 라벨 아래에 표시(기존 컨테이너 중앙 → LIST와 겹침 해소) */
.detail-nav__prev,.detail-nav__next{position:relative}
.detail-nav__preview{position:absolute;z-index:1;top:calc(100% + 26px);width:clamp(220px,28vw,430px);aspect-ratio:4/3;overflow:hidden;
  opacity:0;transform:translateY(14px) scale(.96);transition:opacity .5s var(--ease),transform .7s var(--ease);pointer-events:none}
.detail-nav__prev .detail-nav__preview{left:0}          /* PRE 하단·좌측 정렬 */
.detail-nav__next .detail-nav__preview{right:0}         /* NEXT 하단·우측 정렬 */
.detail-nav__preview img{width:100%;height:100%;object-fit:cover;display:block}
.detail-nav a:focus-visible .detail-nav__preview{opacity:1;transform:translateY(0) scale(1)}
@media(hover:hover) and (pointer:fine){.detail-nav a:hover .detail-nav__preview{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:700px){.detail-nav{min-height:144px;font-size:var(--fs-h2)}.detail-nav__preview{display:none}.detail-nav__action{gap:6px}.detail-nav__arrow{width:24px}}

/* form */
.consult-simple{max-width:640px}
.consult-simple .field{margin-bottom:40px}
.privacy-consent{margin:-6px 0 16px}
.privacy-consent strong{display:block;margin-bottom:10px;font-size:var(--fs-sm);font-weight:700;color:var(--text-default)}
.privacy-consent__scroll{height:132px;overflow-y:auto;padding:8px 16px 16px;border:1px solid var(--border-default);background:color-mix(in srgb,var(--surface-alt) 45%,var(--surface));font-size:14px;line-height:1.5;color:var(--text-secondary);white-space:normal}
.privacy-consent__scroll p{margin:0}
.privacy-consent__scroll p+p{margin-top:20px}
.privacy-consent__scroll h4{margin:24px 0 8px;font-size:14px;font-weight:700;color:var(--text-default)}
.privacy-consent__scroll ul{margin:8px 0 0;padding-left:16px}
.privacy-consent__scroll li+li{margin-top:4px}
.privacy-consent__checkbox{-webkit-appearance:none;appearance:none;width:14px;height:14px;flex:0 0 14px;border:1px solid var(--border-muted);background:transparent;display:grid;place-content:center;cursor:pointer}
.privacy-consent__checkbox::after{content:"";width:4px;height:7px;border:solid var(--text-inverse);border-width:0 1.5px 1.5px 0;transform:translateY(-1px) rotate(45deg) scale(0);transition:transform .16s var(--ease)}
.privacy-consent__checkbox:checked{background:var(--surface-inverse);border-color:var(--surface-inverse)}
.privacy-consent__checkbox:checked::after{transform:translateY(-1px) rotate(45deg) scale(1)}
.privacy-consent__checkbox:focus-visible{outline:2px solid var(--border-strong);outline-offset:2px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
.field label{font-size:var(--fs-2xs);font-weight:700;letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--text-secondary);margin-top:4px}
.field label b{color:var(--state-danger);font-weight:400}
.field input,.field select,.field textarea{font-family:var(--sans);font-size:var(--fs-md);color:var(--text-default);background:transparent;border:none;border-bottom:1px solid var(--border-default);padding:12px 0;transition:.35s var(--ease)}
.field input::placeholder,.field textarea::placeholder{color:var(--text-placeholder)}  /* 2026-08-06 검색창과 동일한 중립 회색으로 통일 */
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--text-default)}
.field textarea{min-height:120px;resize:vertical}
.field input[type=date]{cursor:pointer}
.addr-row{display:flex;gap:12px;align-items:flex-end}
.addr-row .field{flex:1;margin-bottom:0}
.addr-row .btn-sm,.file-upload__trigger{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border:1px solid var(--border-strong);border-radius:var(--radius);padding:12px 20px;font-size:var(--fs-2xs);letter-spacing:var(--ls-wide);text-transform:uppercase;background:none;cursor:pointer}
.file-upload{display:flex;align-items:center}
.file-upload__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
.kakao-cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:var(--surface-inverse);color:var(--text-inverse);padding:16px 32px;border:none;border-radius:var(--radius);font-weight:400;font-size:var(--fs-2xs);letter-spacing:var(--ls-wide);margin-top:8px;transition:filter .25s var(--ease)}
.kakao-cta:hover{background:var(--surface-inverse);color:var(--text-inverse);filter:brightness(.92)}
.kakao-cta .ic{width:20px;height:20px;display:inline-block;flex:none;color:var(--text-inverse)}
.kakao-cta .ic svg{width:100%;height:100%;display:block}

/* ---------- custom select (design-system dropdown — replaces native <select>) ---------- */
.select{position:relative}
.select__trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  font-family:var(--sans);font-size:var(--fs-md);color:var(--text-default);background:transparent;
  border:none;border-bottom:1px solid var(--border-default);padding:12px 0;cursor:pointer;text-align:left;
  transition:border-color .35s var(--ease)}
.select__value.is-placeholder{color:var(--text-placeholder)}
.select__chevron{width:18px;height:18px;flex:none;color:var(--text-muted);transition:transform .3s var(--ease)}
.select.open .select__trigger{border-color:var(--border-strong)}
.select.open .select__chevron{transform:rotate(180deg)}
.select__menu{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:10;margin:0;padding:6px;
  background:var(--surface);border:1px solid var(--border-default);border-radius:var(--radius);list-style:none;
  box-shadow:0 12px 32px rgba(var(--ink-rgb),.14);max-height:280px;overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s}
.select.open .select__menu{opacity:1;visibility:visible;transform:none}
.select__option{padding:10px 12px;font-size:var(--fs-md);color:var(--text-default);cursor:pointer;border-radius:var(--radius);transition:background .2s var(--ease)}
.select__option:hover{background:var(--surface-alt)}
.select__option.selected{font-weight:700}

/* ---------- custom date picker (design-system calendar — replaces native <input type=date>) ---------- */
.datepicker{position:relative}
.datepicker__trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  font-family:var(--sans);font-size:var(--fs-md);color:var(--text-default);background:transparent;
  border:none;border-bottom:1px solid var(--border-default);padding:12px 0;cursor:pointer;text-align:left;
  transition:border-color .35s var(--ease)}
.datepicker__value.is-placeholder{color:var(--text-placeholder)}
.datepicker__icon{width:18px;height:18px;flex:none;color:var(--text-muted)}
.datepicker.open .datepicker__trigger{border-color:var(--border-strong)}
.datepicker__panel{position:absolute;left:0;top:calc(100% + 6px);z-index:10;width:min(320px,100%);padding:20px;
  background:var(--surface);border:1px solid var(--border-default);border-radius:var(--radius);
  box-shadow:0 12px 32px rgba(var(--ink-rgb),.14);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s}
.datepicker.open .datepicker__panel{opacity:1;visibility:visible;transform:none}
.datepicker__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.datepicker__month{font-weight:700;font-size:var(--fs-md);color:var(--text-default);background:none;border:none;font-family:var(--sans);cursor:pointer;padding:2px 8px;border-radius:var(--radius);transition:background .2s var(--ease)}
.datepicker__month:hover{background:var(--surface-alt)}
.datepicker__nav{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius);transition:color .25s var(--ease),background .25s var(--ease)}
.datepicker__nav:hover{color:var(--text-default);background:var(--surface-alt)}
.datepicker__nav svg{width:16px;height:16px}
.datepicker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:6px}
.datepicker__weekdays span{text-align:center;font-size:var(--fs-2xs);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--text-muted)}
.datepicker__weekdays span:first-child{color:var(--state-danger)}
.datepicker__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.datepicker__day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:none;border:none;
  border-radius:var(--radius);font-family:var(--sans);font-size:var(--fs-sm);color:var(--text-default);cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease)}
.datepicker__day:hover{background:var(--surface-alt)}
.datepicker__grid .datepicker__day:nth-child(7n+1){color:var(--state-danger)}
.datepicker__day.is-today{font-weight:700;color:var(--accent)}
.datepicker__day.is-selected{background:var(--surface-inverse);color:var(--text-inverse);font-weight:700}
.datepicker__day:empty{cursor:default;pointer-events:none}
.datepicker__months{display:none;grid-template-columns:repeat(3,1fr);gap:6px}
.datepicker__months.is-visible{display:grid}
.datepicker__month-cell{padding:12px 0;display:flex;align-items:center;justify-content:center;background:none;border:none;
  border-radius:var(--radius);font-family:var(--sans);font-size:var(--fs-sm);color:var(--text-default);cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease)}
.datepicker__month-cell:hover{background:var(--surface-alt)}
.datepicker__month-cell.is-current{font-weight:700;color:var(--accent)}

/* ---------- list toolbar (보기 개수 선택) ---------- */
.list-toolbar{padding:0 var(--pad)}
.list-toolbar__in{max-width:var(--maxw);margin:0 auto;display:flex;justify-content:flex-end}
.select--compact{width:auto}
.select--compact .select__trigger{width:auto;border:1px solid var(--border-default);border-radius:var(--radius);
  padding:10px 16px;font-size:14px}
.select--compact.open .select__trigger{border-color:var(--border-strong)}
.select--compact .select__menu{left:auto;right:0;width:max-content;min-width:100%}
.select--compact .select__option{font-size:14px;padding:8px 10px}

/* ---------- inquiry two-column layout (contact.html: left section-select nav, right content panel) ---------- */
.inquiry-layout{display:grid;grid-template-columns:minmax(160px,420px) minmax(0,680px);gap:clamp(40px,6vw,80px);align-items:start}
.inquiry-nav{display:flex;flex-direction:column;position:sticky;top:120px}
.inquiry-nav__item{display:flex;align-items:baseline;gap:16px;padding:clamp(21px,2.5vw,30px) 0;border-bottom:1px solid var(--border-default);
  background:none;border-top:none;border-left:none;border-right:none;text-align:left;cursor:pointer;font-family:var(--sans);
  color:var(--text-placeholder);transition:color .35s var(--ease)}  /* 2026-08-06 비활성 탭 = 중립 회색(활성 --text-default와 명확히 구분). 이전엔 --text-muted였으나 그 토큰이 다크그레이로 바뀌며 대비가 사라져 분리 */
.inquiry-nav__item:first-child{padding-top:4px}
.inquiry-nav__item .n{font-size:var(--fs-md);font-weight:700}
.inquiry-nav__item .t{font-size:var(--fs-h2);font-weight:700;text-transform:uppercase;letter-spacing:0;line-height:1}
.inquiry-nav__item.active,.inquiry-nav__item:hover{color:var(--text-default)}
.inquiry-panels{min-width:0}
.inquiry-panel{display:none}
.inquiry-panel.active{display:block}
@media(max-width:700px){
  .inquiry-layout{grid-template-columns:1fr}
  /* 상담문의 탭: 가로 슬라이드(넘침 숨김) + 우측 페이드로 더 있음을 암시, 타이틀 24px */
  .inquiry-nav{position:static;flex-direction:row;flex-wrap:nowrap;border-top:none;border-bottom:1px solid var(--border-default);
    overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;
    -webkit-mask-image:linear-gradient(to right,#000 82%,transparent);mask-image:linear-gradient(to right,#000 82%,transparent)}
  .inquiry-nav::-webkit-scrollbar{display:none}
  .inquiry-nav__item{border-bottom:none;padding:12px 16px;flex:none;white-space:nowrap;gap:4px}
  /* 첫 버튼만 상단 패딩(.3rem)이 달라 어긋나던 것을 나머지(.8rem)와 통일 */
  .inquiry-nav__item:first-child{padding-top:12px}
  .inquiry-nav__item .t{font-size:var(--fs-h3)}  /* 2026-08-11 raw 24px → 토큰화(모바일 --fs-h3=24px 동일) */
  /* 활성 패널: 상·하단 패딩 40px, 패널 타이틀 20 / 본문 14 */
  .inquiry-panel.active{padding-top:40px;padding-bottom:40px}
  .inquiry-panel h3{font-size:20px;margin-bottom:12px!important}
  .inquiry-panel p{font-size:14px}
}

/* footer (YOO Interior reference layout: light bg, brand+tagline / large bold nav list /
   small arrow-link socials / compact business info, spread across the row) */
.site-foot{background:var(--surface);color:var(--text-default);border-top:1px solid var(--border-default);
  padding:clamp(56px,6vw,80px) var(--pad)}
.site-foot__in{max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:48px 32px}
.foot-brand__logo{display:block;width:170px;height:auto}
.foot-nav{display:flex;flex-direction:column;gap:2px}
.foot-nav a{font-family:var(--sans);font-weight:700;font-size:var(--fs-h4);line-height:1.5;
  letter-spacing:0;text-transform:uppercase;color:var(--text-default);text-decoration:none;transition:opacity .3s var(--ease)}
.foot-nav a:hover{opacity:.5}
.foot-social{display:flex;flex-direction:column;gap:10px;padding-top:4px}
.foot-social a{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--text-secondary);text-decoration:none;transition:color .3s var(--ease)}
.foot-social__icon{display:block;width:15px;height:15px;flex:none;color:var(--text-secondary)}
.foot-social a:hover{color:var(--text-default)}
.foot-info{padding-top:4px;font-size:var(--fs-sm);color:var(--text-secondary);display:grid;gap:0;
  align-self:flex-start;align-content:start;grid-auto-rows:max-content}
.foot-info p{margin:0 0 4px}
.foot-info p:last-child{margin-bottom:0}
.foot-info strong{color:var(--text-default);font-weight:700}
.foot-bottom{max-width:var(--maxw);margin:48px auto 0;padding-top:24px;border-top:none;
  display:flex;justify-content:space-between;font-size:var(--fs-2xs);color:var(--text-muted);letter-spacing:var(--ls-label);
  text-transform:uppercase;flex-wrap:wrap;gap:16px}
.site-foot .foot-brand__name,.site-foot .foot-brand__tag,.site-foot .foot-nav a,
.site-foot .foot-social a,.site-foot .foot-info{font-size:16px}
.site-foot .foot-bottom{font-size:14px}
@media(max-width:700px){.site-foot__in{flex-direction:column;gap:40px}}

/* reveal — slower, cinematic */
[data-reveal]{opacity:0;transform:translateY(30px);transition:opacity 1.3s var(--ease),transform 1.3s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal].d1{transition-delay:.12s}[data-reveal].d2{transition-delay:.24s}[data-reveal].d3{transition-delay:.36s}

/* intro */
.intro{position:fixed;inset:0;z-index:120;background:var(--surface-inverse);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;transition:opacity 1s var(--ease),visibility 1s}
.intro.done{opacity:0;visibility:hidden}
/* 2026-08-11 인트로: 텍스트가 외곽선(라인)만 있다가 면으로 채워지는 연출(.nav-label과 동일 방식, 자동 재생) */
.intro .wm{font-family:var(--serif);text-align:center;line-height:1}
.intro .wm__mark{position:relative;display:inline-block;font-size:var(--fs-display);font-weight:700;letter-spacing:var(--ls-label);
  -webkit-text-stroke:1.3px var(--text-inverse);color:transparent}
.intro .wm__mark::after{content:attr(data-text);position:absolute;inset:0;color:var(--text-inverse);-webkit-text-stroke:0;
  clip-path:inset(100% 0 0 0);animation:introFill 1.6s cubic-bezier(.16,1,.3,1) .3s forwards}  /* 2026-08-11 빠르게 갔다가 천천히(강한 ease-out) + 길게 */
@keyframes introFill{to{clip-path:inset(0 0 0 0)}}

/* consult fab — vertical ribbon tabs flush to the right edge (icon on top, label running vertically underneath) */
.consult-fab{position:fixed;right:0;bottom:30px;z-index:70;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.consult-fab a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  width:40px;padding:12px 0;border-radius:0;line-height:1;font-weight:700;letter-spacing:.02em;
  transition:filter .25s var(--ease)}
.consult-fab a:hover{filter:brightness(.94)}
.consult-fab a .lbl{display:block;writing-mode:vertical-rl;text-orientation:mixed;font-size:14px;letter-spacing:-.08em}
.consult-fab .kakao{background:var(--white);color:var(--kakao-ink)}
.consult-fab .call{background:var(--surface-inverse);color:var(--text-inverse)}
.consult-fab .call:hover{background:var(--surface-inverse);color:var(--text-inverse)}
.consult-fab .call:hover .lbl{color:var(--text-inverse)}
/* 상담문의: 휴대폰은 바로 전화, PC(마우스 기기)는 전화를 걸 수 없으니 상담 신청 폼으로(2026-10-14 수정요청) */
.consult-fab .call--form{display:none}
@media(hover:hover) and (pointer:fine){.consult-fab .call--tel{display:none}.consult-fab .call--form{display:flex}}
.consult-fab .ic{width:20px;height:20px;display:inline-block}
.consult-fab .ic svg{width:100%;height:100%;display:block}

/* ============================================================ HOME · fixed-frame case showcase
   text & UI stay pinned (position:fixed) — only the 시공사례 photos scroll through the viewport */
/* 페이지는 스크롤하지 않는다 — 휠·스와이프·키보드는 script.js 가 받아 한 장씩 넘긴다(무한 슬라이드, 2026-11-03 미팅).
   overscroll-behavior:none 은 트랙패드 가로 밀기의 뒤로 가기 · 당겨서 새로고침을 막는다 */
html.home{overflow:hidden;overscroll-behavior:none;background:var(--surface-inverse);--frame-m:0px;--frame-m-top:0px;--frame-m-bottom:0px}

/* picture-frame margin:stage/scrim/frame/dots/fab inset from the viewport edge (photo clipped
   so the Ken Burns zoom can't spill past the mat), revealing html.home's --ink background as a border.
   header/logo live OUTSIDE the photo in the top margin band; title/subtitle live OUTSIDE the photo in the
   (taller) bottom margin band — both bands sized just enough for their own content. */
.home .stage,.home .frame{top:var(--frame-m-top);right:var(--frame-m);bottom:var(--frame-m-bottom);left:var(--frame-m);overflow:hidden;transition:top .5s var(--ease)}
/* scrolling down collapses the top margin away (photo slides up to fill it), in sync with the header hiding */
.home.hide-top .stage,.home.hide-top .frame{top:0}
.home .site-head{color:var(--text-inverse);text-shadow:0 2px 40px rgba(var(--black-rgb),.3);
  background-color:transparent;
  /* 헤더 높이·로고 위치는 전 페이지 공통(.site-head의 padding:32px var(--pad)) 유지 — 메인만 달라지지 않도록 */
  transition:color .4s var(--ease),text-shadow .4s var(--ease),background-color .4s var(--ease),transform .4s var(--ease),opacity .3s var(--ease)}
/* 상세페이지(project.html) — 상단 다크 커버 이미지 위에 얹히는 헤더, 배경 투명 + 흰 텍스트/아이콘 */
.project-detail .site-head{color:var(--text-inverse);background-color:transparent}
.project-detail .site-head.scrolled{background-color:var(--surface);color:var(--text-default)}
.project-detail .site-head:not(.scrolled):not(.floating) .brand__logo{filter:brightness(0) invert(1)}
/* logo centered horizontally (huge, matches other pages' page-hero h1 scale); top offset matches
   the menu button's own top (site-head padding) so they still sit on the same line */
/* 메인도 서브페이지와 동일하게 로고는 헤더 좌측 상단(.site-head .brand 규칙 사용).
   사진 위라 흰색으로 반전 */
.home .site-head .brand__logo{filter:brightness(0) invert(1)}

/* same gradient-text treatment as about.html's .about-hero__title */
/* default: hollow/outline only. On hover, a filled copy (::after) wipes in from the bottom up via clip-path. */
/* 메인 히어로: 텍스트 로고 대신 실제 로고 SVG를 크게 노출(흰색으로 반전) */
/* 메인 히어로 태그라인: 로고 축소에 맞춰 한 단계 작게(기본 --fs-h3의 약 80%) + 얇은 굵기
   (디자인 시스템 굵기 트랙 400/700 중 400 사용) */
/* dots: no left/right margin band anymore, so back to the default placement inside the photo */
/* consult-fab is now the same circular treatment site-wide (see shared rules above) — no home-only override needed */

/* fixed crossfade stage — images stay put and fade in/out as slides change */
.stage{position:fixed;inset:0;z-index:0;background:var(--surface-inverse)}
/* 하단 딤 — 밝은 시공사진에서도 로고·태그라인이 또렷하게 보이도록 소폭 강화(20%/.4 → 34%/.5) */
.home .stage::after{content:'';position:absolute;inset:auto 0 0 0;height:40%;
  background:linear-gradient(to top,rgba(var(--ink-rgb),.5),rgba(var(--ink-rgb),.18) 45%,rgba(var(--ink-rgb),0));pointer-events:none}
@keyframes kbz{from{transform:scale(1)}to{transform:scale(1.08)}}
.stage__img{position:absolute;inset:0;opacity:0;background:var(--img) center center/cover no-repeat;
  transform:scale(1.08);transform-origin:60% 44%;transition:opacity 1s ease-in-out;will-change:opacity,transform}
.stage__img.on{opacity:1;animation:kbz 4s var(--ease) forwards}

/* gesture surface — 화면 전체를 덮는 투명한 판. 터치를 브라우저 스크롤·확대 대신 슬라이드 넘김으로 받는다 */
.showcase{position:fixed;inset:0;z-index:2;touch-action:none}

/* closing-CTA line now lives right under the WJ DESIGN wordmark (nested inside .brand) instead of as its own fixed block */
.cta-inner{position:relative;z-index:2;color:var(--text-inverse);max-width:var(--maxw);padding:0 var(--pad)}
.cta-inner h2{font-size:var(--fs-h3);font-weight:700;text-align:center;white-space:nowrap;margin-top:10px}
.cta-inner .cta-foot{margin-top:48px;display:flex;gap:32px;justify-content:center;flex-wrap:wrap;
  font-size:var(--fs-2xs);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted-inverse)}
.cta-inner .btn{height:44px;padding:0 32px}
@media(max-width:700px){.cta-inner h2{font-size:16px;white-space:normal}}
@media(max-width:700px){.consult-fab{top:50%;bottom:auto;transform:translateY(-50%)}}

/* Mobile section headings */
@media(max-width:700px){
  :root{--fs-md:14px}
  .section-head__en,
  .spec-title,
  .about-intro__quote,
  .vision__title,
  .office__title,
  .philosophy__title{font-size:28px!important}
}

/* ── 모바일 폴리시(2026-08-06): 히어로 대형 타이틀 축소 + 상담 리본 정리 ──
   히어로 타이틀이 clamp 최소값(57.6px) 탓에 좁은 화면에서 폭을 넘겨 잘리고
   우측 세로 상담 리본과 겹치던 문제. portfolio/contact는 인라인 clamp라 !important 필요. */
@media(max-width:600px){
  .page-hero h1,
  .project-cover__in h1,
  .about-hero__title,
  .process-hero__title{font-size:clamp(42px,13vw,56px)!important;line-height:1.05}
  /* ↑ 2026-08-11: 감사 때 이 모바일 히어로가 --fs-h2(5vw·모바일 32px 바닥)로 잘못 묶여 작아졌던 것을
     전용 반응형 clamp로 복구(375px≈49px). 히어로는 모바일 스케일 슬로프가 커야 해 공용 h2 토큰과 분리. */
  /* 상담 리본이 좁아지도록 라벨 글자·패딩 축소(히어로 텍스트와 겹침 완화) */
  .consult-fab a{padding:12px 6px}
  .consult-fab a .lbl{font-size:12px}
}
@media(max-width:700px){
  /* 프로젝트 상세 갤러리: 데스크톱의 시원한 300px 세로 간격이 모바일에선 과도한 빈 공간 — 축소 */
  .detail-figs{row-gap:48px!important}
  /* 스펙 6항목이 1열로 길게 쌓이던 것을 2열로 압축 */
  .project-cover ~ .section .spec{grid-template-columns:1fr 1fr}
}

/* ── 모바일 푸터 정리(2026-08-06, 사용자 지정 값) ──
   기존 "푸터 16px 통일" 규칙(.site-foot ...)을 이기도록 동일 specificity로 맞춰 뒤에 배치 */
@media(max-width:700px){
  /* 푸터 블록(브랜드·네비·SNS·정보) 간 세로 간격 32px */
  .site-foot__in{gap:32px}
  .foot-brand__logo{width:140px}
  /* SNS: 세로 → 가로 1행, 아이콘·글자 14px */
  .site-foot .foot-social{flex-direction:row;flex-wrap:wrap;gap:16px}
  .site-foot .foot-social a{font-size:14px;gap:4px}
  .foot-social__icon{width:14px;height:14px}
  /* 사업자 정보 14px, 줄 간 하단마진(4px) 제거 */
  .site-foot .foot-info{font-size:14px}
  .foot-info p{margin-bottom:0}
  /* 맨 밑 span 2개 12px, 갭 제거, 상단 마진 제거 · 패딩 36px */
  .site-foot .foot-bottom{font-size:12px;gap:0}
  .foot-bottom{margin-top:0;padding-top:36px}
}

/* ── 모바일 오버레이 메뉴 X 버튼: 24px, 우측 상단 붙임(2026-08-06, 사용자 지정) ── */
@media(max-width:700px){
  .nav-close{right:16px}  /* 세로 위치는 base 규칙(좌측 로고와 동일 중심선) 사용 — 모바일에서 X를 로고 높이까지 내림 */
  .nav-close svg{width:24px;height:24px}
}

/* ── 모바일 프로젝트 목록 카드: 타이틀 18px, 카드 간 갭 36px(2026-08-06, 사용자 지정) ── */
@media(max-width:700px){
  .card__overlay h3{font-size:18px}
  .grid-work{row-gap:36px}
}

/* ================= 태블릿(701~960px) 전용 조정 (2026-08-11~, 사용자 지정) ================= */
@media(min-width:701px) and (max-width:960px){
  /* 프로젝트 상세 갤러리: 데스크톱 300px 세로 간격이 태블릿에선 과함 → 축소 */
  .detail-figs{row-gap:120px}
  /* 상담문의 좌측 탭: 모바일과 동일하게 가로 슬라이드+우측 페이드, 단 조금 더 크게 */
  .inquiry-layout{grid-template-columns:1fr}
  .inquiry-nav{position:static;flex-direction:row;flex-wrap:nowrap;border-top:none;border-bottom:1px solid var(--border-default);
    overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;
    -webkit-mask-image:linear-gradient(to right,#000 82%,transparent);mask-image:linear-gradient(to right,#000 82%,transparent)}
  .inquiry-nav::-webkit-scrollbar{display:none}
  .inquiry-nav__item{border-bottom:none;padding:12px 16px;flex:none;white-space:nowrap;gap:6px}
  .inquiry-nav__item:first-child{padding-top:12px}
  .inquiry-nav__item .t{font-size:var(--fs-h3)}  /* 2026-08-11 raw 30px → --fs-h3(태블릿 24~29px, 원래 30px에 근접) */
}