/* ==========================================================
   TRACLE 공통 셸 — tracle.co.kr 시각언어 (B안)
   ⚠️ 캐시버스터: 이 파일(또는 site.js)을 고치면 8개 HTML의 ?v= 값을 올릴 것 (현행 v=20260717c)
   토큰 SSoT = .claude/reference/dna/tracle-dna.json 실측
   8페이지 공유: index(메인) + 서브 7종

   전사물 실측 요약
     팔레트  #FFFFFF 98.6% / #000000 21.2% / #111111 13.9% / #F5F5F7 8%
             → accent 색이 없다. 강조는 검정·굵기·면(#F5F5F7) 대비로 한다.
     다크    #111111 은 맨 끝 1개 섹션(푸터)에만. 중간 다크 밴드 금지 (고객 "배경이 너무 어둡다" 2회)
     컨테이너 width:90%; max-width:1200px  (렌더 rect 1200@1440 · 351@390)
     리듬    padding-top:120px 일관 (태블릿 80 · 모바일 50) + pdb 30/120
     라운드  0  (radii: [] — 원형 아이콘 50% 만 예외)
     그림자  rgba(0,0,0,.1) 2px 2px 10px 0px  1종뿐
     본문    14px / 25.2px / #000000 / Pretendard
   ========================================================== */
:root{
  /* ── tracle 토큰 (index.html 인라인과 동일 SSoT) ── */
  --bg:#FFFFFF;
  --surface:#F5F5F7;
  --dark:#111111;
  --fg:#000000;
  --muted:#5A5A5F;
  --line:#E3E3E6;
  --line-dark:rgba(255,255,255,.16);
  --container:1200px;
  --ease:cubic-bezier(0.16,1,0.3,1);
  --flat-shadow:rgba(0,0,0,.1) 2px 2px 10px 0px;

  /* ── 레거시 별칭 : A안 변수명 → tracle 값 ──
     서브 7종 HTML이 var(--ink)·var(--gold)·var(--band) 를 직접 참조한다.
     변수명을 지우면 그 페이지들이 깨지므로, 이름은 남기고 값만 tracle로 되돌린다.
     (--gold 계열은 tracle에 accent가 없으므로 검정/회색으로 흡수된다) */
  --ink:#000000;
  --ink-70:#5A5A5F;
  --ink-50:#6B6B70;          /* #77777D는 연회색 면에서 4.09:1로 AA 미달 -> 4.87:1 */
  --gold:#111111;
  --gold-ink:#000000;
  --gold-soft:#E3E3E6;
  --soil:#5A5A5F;
  --band:#111111;
  --band-fg:#FFFFFF;
  --band-fg-70:rgba(255,255,255,.72);
  --ok:#000000;
  --no:#A4503F;              /* 폼 오류 — 기능색이라 유일하게 유채색 유지 */

  --font-kr:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --font-en:var(--font-kr);  /* Sora 제거 — 고객 "영문 삭제" 2회 지시. 별칭만 남겨 6페이지 보호 */

  --wrap:min(90%,1200px);    /* 전사물 실측: width:90% / max-width:1200px */
  --read:min(90%,1200px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html,body{overflow-x:clip}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-kr);
  font-size:14px;            /* 전사물 본문 14px */
  line-height:1.8;           /* 전사물 lh 25.2px */
  font-weight:400;
  word-break:keep-all;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,video{display:block;max-width:100%}
em,i{font-style:normal}      /* 한국어 이탤릭 금지 — 강조는 굵기·색·밑줄로 */
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.dark :focus-visible,.footer :focus-visible,.m-panel :focus-visible{outline-color:#fff}
.en{font-family:var(--font-en)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:1rem;top:1rem;z-index:99;background:var(--dark);color:#fff;padding:.7rem 1.2rem;transform:translateY(calc(-100% - 1.5rem));opacity:0;pointer-events:none;transition:transform .4s var(--ease),opacity .4s var(--ease)}
.skip:focus{transform:none;opacity:1;pointer-events:auto}

/* ==========================================================
   서브 7종 공통 (product·principle·howto·history·support·contact·promo)
   ========================================================== */

/* ---------- 서브 페이지 — 헤더 통일(site_header) 부속 ----------
   메인은 히어로가 fixed 헤더 뒤로 깔리지만 서브는 히어로가 없다.
   .is_sub 가 헤더 높이만큼 본문을 밀어 콘텐츠가 헤더에 가리지 않게 한다. */
body.is_sub{padding-top:80px}
@media (max-width:900px){body.is_sub{padding-top:60px}}
/* 현재 페이지 표시 — is_solid(밝은 헤더) 기준 */
.site_header.is_solid .gnb a[aria-current="page"]{color:var(--fg)}
.site_header.is_solid .gnb a[aria-current="page"]::after{transform:scaleX(1)}
.site_header:not(.is_solid) .gnb a[aria-current="page"]::after{transform:scaleX(1)}

/* ---------- SUB HERO ----------
   구 A안은 딥포레스트 밴드 + 골드 점선 원이었다.
   전사물은 다크를 맨 끝 1곳에만 쓰므로 흰 면 + 검정 타이포로 전환한다
   (중간 다크 밴드 = 고객이 두 번 지적한 그 문제). */
.subhero{position:relative;background:var(--bg);color:var(--fg);padding:120px 0 0}
.subhero::before,.subhero::after{display:none}
.sh-in{position:relative;z-index:2;width:var(--wrap);margin-inline:auto}
.sh-crumb{display:flex;align-items:center;gap:.5rem;font-size:12px;color:var(--muted);margin-bottom:28px}
.sh-crumb a:hover{color:var(--fg)}
.sh-en{display:block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;font-weight:600}
.subhero h1{font-size:42px;font-weight:700;line-height:1.25;letter-spacing:-.02em}
.sh-lead{margin-top:16px;max-width:52ch;color:var(--muted);font-size:16px;line-height:1.75}

/* ---------- SUB HERO 사진 밴드 (2026-07-17 · v2 세로 분리) ----------
   서브 7종 상단 주방컷(고객 촬영 45MP 크롭 · 2400x1028 · 21:9).
   어둡게 덮지 않는다 — 딥포레스트 밴드는 고객이 두 번 반려한 그 문제다.

   v1(가로 스크림 · 좌 텍스트존/우측에서 주방 드러남)은 2026-07-17 폐기.
   실측: 텍스트가 화면의 78~84%를 차지(support는 .entry 3열 진입로가 컨테이너
   전폭을 구조적으로 요구)해 "우측" 공간이 16%뿐 → 화면 중앙 렌더 sd 1.5 =
   사진이 사실상 안 보였다. 스크림 alpha 문제가 아니라 텍스트존·사진존 겹침.
   ⇒ v2 = 모바일에서 시각 검증된 세로 분리를 PC로 통일:
      텍스트는 상단 순수 흰 면 · 사진은 하단 스트립(밴드 폭 100%)에서 드러남.
      두 존이 세로로 분리돼 겹침이 구조적으로 불가능하다.

   검증 축 2개 — "로드됐나"가 아니라 "보이나":
     ① 텍스트 WCAG ≥ 4.5:1 — 텍스트 하한(padding-bottom 280px)이 스크림
        솔리드 화이트 시작(260px)보다 위 = 텍스트는 항상 순수 흰 면 위(구조 보장)
     ② 사진 가시성 — 하단 150px 스트립을 50px 창으로 훑어 sd ≥ 30인 창이
        밴드 폭의 30% 이상 (+ 상대축: 스크림 잔존 대비 = 원본 sd의 60%+)
        ⚠️ garden-view(contact)는 원판이 소프트 포커스라 절대축 물리 불가(최대 8%) —
        스크림 손실은 0에 가깝게 열어 둠. 자산 교체 여부는 위버 판단 대기.
   측정 = outputs/20260717_0002/scrim-contrast.py (WCAG+sd 2축 · 자산/스크림 변경 시 재실행)
   ⚠️ 페이지별 subhero background-image는 각 HTML <head>의 인라인 <style data-subhero-photo>가 소유한다(문서 기준 assets/ 경로).
      이유(양채널 제약·2026-07-17 실측 확정):
      ① OD 프리뷰는 이 파일을 재작성 없이 문서에 인라인 → 여기 쓴 상대 경로(파일명만)는 assets/ 접두어를 잃고 404(OD에서만 배경 소멸·4회 반려의 근원).
      ② HTML에서 --sh-img에 assets 경로를 넣어 var() 경유로 쓰면 크로미움이 치환 지점(스타일시트) 기준으로 풀어 이중 assets 경로 404.
      ⚠️ 이 주석엔 CSS 경로 함수(소괄호 문법) 리터럴을 쓰지 말 것 — 배포 참조검사가 소괄호 안 문자열을 존재하지 않는 파일로 오인해 배포가 막힌다(2026-07-19 실측·이 주석 자체가 그 사고였다).
      ⇒ var() 없이 페이지 <head> 인라인 <style>에 완전한 규칙만이 일반 브라우저·OD 프리뷰·배포 3채널 모두에서 산다. */
.subhero.has-photo{padding:120px 0 280px;overflow:hidden;isolation:isolate}
.subhero.has-photo::before{
  display:block;content:"";position:absolute;inset:0;z-index:0;
  background-size:cover;background-repeat:no-repeat;
  background-position:var(--sh-pos,50% 50%);
}
/* 여분(교체·A/B): subhero-window-garden.jpg */
.subhero.has-photo::after{
  display:block;content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,
    rgba(255,255,255,0) 0,
    rgba(255,255,255,.1) 120px,
    rgba(255,255,255,.5) 190px,
    rgba(255,255,255,.9) 235px,
    #FFFFFF 260px);
}
/* history(counter-wide)만 줌 — 이 사진은 하단 대역이 민무늬 카운터 면이라
   어떤 위치·스크림으로도 창(50px) sd 30을 못 넘는다(전수 스윕 실측 0%).
   145% 줌 + 상단 정렬로 디테일 대역을 스트립에 넣는다(0% → 36% PASS).
   auto 145%는 뷰포트 ~2000px까지만 폭을 덮는다 — 그 위는 cover 폴백(측정 기준 1440). */
@media (min-width:901px) and (max-width:2000px){
  .subhero[data-photo="counter-wide"]::before{background-size:auto 145%;background-position:50% 0}
}

/* ---------- 섹션 공통 (전사물 리듬 pdt_120 / pdb_30) ---------- */
.sec{padding:120px 0 30px}
.sec-tint{background:var(--surface);padding:120px 0}
.sec-band{background:var(--surface);color:var(--fg)}     /* 구 딥포레스트 밴드 → 연회색 면 */
.sec-band .s-head p,.sec-band .s-lead{color:var(--muted)}
.wrap{width:var(--wrap);margin-inline:auto}
.read{width:var(--read);margin-inline:auto}
.s-head{margin-bottom:44px}
.s-eyebrow{display:block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;font-weight:600}
.sec-band .s-eyebrow{color:var(--muted)}
.s-head h2{font-size:42px;font-weight:700;line-height:1.25;letter-spacing:-.02em}
.s-head p{margin-top:16px;color:var(--muted);max-width:56ch;font-size:16px;line-height:1.75}
.s-head.row{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1rem}
.s-head.row p{margin-top:0;max-width:38ch}

/* 버튼 — 각짐 */
.btn{display:inline-flex;align-items:center;gap:.55rem;min-height:48px;padding:.72rem 1.65rem;font-weight:600;font-size:15px;transition:background-color .5s var(--ease),border-color .5s var(--ease),color .5s var(--ease)}
.btn-solid{background:var(--dark);color:#fff}
.btn-solid:hover{background:#333333}
.btn-gold{background:var(--dark);color:#fff}
.btn-gold:hover{background:#333333}
.btn-ghost{border:1px solid var(--line);color:var(--fg);background:var(--bg)}
.btn-ghost:hover{border-color:var(--dark);background:var(--surface)}
.sec-band .btn-ghost{border-color:var(--line);color:var(--fg);background:var(--bg)}
.sec-band .btn-ghost:hover{border-color:var(--dark);background:var(--bg)}

/* 카드 — 각짐·그림자 없음 */
.card{background:var(--surface);border:1px solid var(--line);padding:clamp(1.3rem,2.2vw,1.9rem)}
.card h3{font-size:20px;font-weight:700;margin-bottom:.5rem;line-height:1.4}
.card p{color:var(--muted);font-size:14px;line-height:1.8}
.sec-band .card{background:var(--bg);border-color:var(--line)}
.sec-band .card p{color:var(--muted)}

/* 표 */
.tbl-shell{border:1px solid var(--line);overflow:hidden;background:var(--bg)}
table.dt{width:100%;border-collapse:collapse;font-size:14px}
table.dt caption{text-align:left;padding:1.1rem 1.3rem .2rem;font-weight:600;color:var(--muted);font-size:13px}
table.dt th,table.dt td{padding:.95rem 1.3rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
table.dt thead th{background:var(--surface);font-weight:700;font-size:13px;letter-spacing:.01em;white-space:nowrap}
table.dt tbody tr:last-child th,table.dt tbody tr:last-child td{border-bottom:0}
table.dt tbody th{font-weight:700;white-space:nowrap;width:clamp(120px,18%,190px)}
table.dt td b{font-weight:700}
.mark-o{color:var(--ok);font-weight:700}
.mark-x{color:var(--muted);font-weight:400}   /* tracle엔 빨강이 없다 — 검정/회색 대비로 */
@media (max-width:760px){
  table.dt,table.dt tbody,table.dt tr,table.dt td,table.dt th{display:block;width:100%}
  table.dt thead{display:none}
  table.dt tbody tr{border-bottom:1px solid var(--line);padding:.5rem 0}
  table.dt tbody tr:last-child{border-bottom:0}
  table.dt tbody th{width:auto;padding:.9rem 1.2rem .2rem;font-size:15px}
  table.dt td{border-bottom:0;padding:.25rem 1.2rem;display:flex;gap:.7rem}
  table.dt td::before{content:attr(data-l);flex:0 0 88px;font-weight:600;color:var(--muted);font-size:13px}
  table.dt td:last-child{padding-bottom:.9rem}
}

/* 리스트 */
.ck{display:grid;gap:.6rem}
.ck li{list-style:none;display:flex;gap:.65rem;color:var(--muted);font-size:14px;line-height:1.8}
.ck li::before{content:"";flex:0 0 5px;height:5px;margin-top:.72rem;background:var(--dark)}
.sec-band .ck li{color:var(--muted)}

/* 알림 박스 — 각짐 */
.note{border-left:2px solid var(--dark);background:var(--surface);padding:1rem 1.2rem;font-size:14px;line-height:1.8;color:var(--muted)}
.note b{color:var(--fg)}
.note.warn{border-left-color:var(--no);background:rgba(164,80,63,.06)}

/* pending 배지 */
.pending{display:inline-flex;align-items:center;gap:.4rem;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--muted);background:var(--surface);border:1px dashed var(--line);padding:.28rem .65rem}

/* 폼 */
.form{display:grid;gap:1.15rem}
.f-row{display:grid;gap:.45rem}
.f-row label{font-weight:600;font-size:14px}
.f-row label .req{color:var(--no);margin-left:.15rem}
.f-in,select,textarea{width:100%;min-height:48px;padding:.8rem 1rem;border:1px solid var(--line);background:var(--bg);color:var(--fg);font:inherit;font-size:14px;transition:border-color .35s var(--ease)}
textarea{min-height:150px;resize:vertical;line-height:1.7}
.f-in:focus,select:focus,textarea:focus{border-color:var(--dark);outline:none}
.f-in[aria-invalid="true"]{border-color:var(--no);background:rgba(164,80,63,.04)}
.f-split{display:flex;align-items:center;gap:.5rem}
.f-split .f-in{text-align:center}
.f-split span{color:var(--muted)}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}
.f-err{font-size:13px;color:var(--no);font-weight:600;min-height:1.1em}
.f-agree{display:flex;gap:.65rem;align-items:flex-start;padding:.4rem 0}
.f-agree input{width:22px;height:22px;margin-top:.15rem;accent-color:var(--dark);flex:0 0 auto}
.f-agree label{font-size:14px;color:var(--muted);font-weight:500}
.privacy{border:1px solid var(--line);background:var(--surface);padding:1.1rem 1.2rem;max-height:190px;overflow-y:auto;font-size:13px;color:var(--muted)}
.privacy p{margin-bottom:.55rem}
.privacy ol{padding-left:1.15rem;display:grid;gap:.35rem}
.f-done{display:none;border:1px solid var(--dark);background:var(--surface);padding:1rem 1.2rem;font-weight:600;color:var(--fg)}
.f-done.on{display:block}
@media (max-width:700px){.f-grid{grid-template-columns:1fr}}

/* 아코디언 */
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{display:flex;align-items:flex-start;gap:1rem;padding:1.25rem .3rem;cursor:pointer;list-style:none;font-weight:600;font-size:16px;transition:color .35s var(--ease)}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--muted)}
.acc summary .qn{flex:0 0 auto;font-size:14px;font-weight:700;color:var(--fg);padding-top:.16rem}
.acc summary .qt{flex:1}
.acc summary .arw{flex:0 0 auto;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);transition:transform .5s var(--ease),background-color .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease)}
.acc details[open] summary .arw{transform:rotate(45deg);background:var(--dark);border-color:var(--dark);color:#fff}
.acc .ans{padding:0 .3rem 1.4rem 2.6rem;color:var(--muted);font-size:14px;line-height:1.85;max-width:78ch}
@media (max-width:560px){.acc .ans{padding-left:.3rem}}

/* 미디어 프레임 — 각짐 */
.fig{border:1px solid var(--line);background:var(--surface);overflow:hidden}
.fig img{width:100%;height:auto}
.fig figcaption{padding:.85rem 1.2rem;font-size:13px;color:var(--muted);border-top:1px solid var(--line)}
.fig-plain img{width:100%;height:auto}

/* ---------- FOOTER — 전사물의 '맨 끝 #111' 1곳 (메인 site_footer와 동일 톤) ---------- */
.footer{padding:64px 0 56px;background:var(--dark);color:#fff}
.ft-wrap{width:var(--wrap);margin-inline:auto}
.ft-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:1.8rem;border-bottom:1px solid var(--line-dark)}
.ft-brand{display:flex;flex-direction:column;gap:.5rem}
.ft-brand img{height:24px;width:auto;filter:brightness(0) invert(1)}
.ft-brand small{font-weight:500;font-size:13px;color:rgba(255,255,255,.6)}
.ft-legal{display:flex;gap:1.4rem}
.ft-legal a{font-size:14px;font-weight:500;color:rgba(255,255,255,.86);min-height:44px;display:inline-flex;align-items:center;transition:color .4s var(--ease)}
.ft-legal a:hover{color:#fff}
.ft-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.65rem 2.4rem;padding:1.7rem 0;color:rgba(255,255,255,.78);font-size:14px}
.ft-info div{display:flex;gap:.6rem}
.ft-info dt{font-weight:600;color:#fff;flex-shrink:0}
.ft-info a{text-decoration:underline;text-underline-offset:3px}
.ft-info a:hover{color:#fff}
.copy{font-size:14px;color:rgba(255,255,255,.52)}   /* .44는 #111 위 4.38:1로 AA 미달 */

/* ---------- 스크롤 리빌 (메인·서브 공용) ----------
   .js 게이팅 : JS가 살아있을 때만 숨긴다. JS 실패 시 콘텐츠가 빈 화면에 갇히지 않게 하는 안전값.
   --d(서브 stagger)와 .d1~.d3(메인) 두 방식을 함께 지원한다. */
.rv{transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--d,0)*90ms)}
.js .rv{opacity:0;transform:translateY(26px)}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:.08s}
.js .rv.d2{transition-delay:.16s}
.js .rv.d3{transition-delay:.24s}

@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
}

/* ---------- 서브 반응형 (전사물 리듬: 태블릿 80 · 모바일 50) ---------- */
@media (max-width:900px){
  .sec{padding:80px 0 30px}
  .sec-tint{padding:80px 0}
  .subhero{padding:80px 0 0}
  .s-head{margin-bottom:34px}
  .s-head h2,.subhero h1{font-size:34px}
  .gnb-in{min-height:60px}
  /* 사진 밴드: 좁은 화면에선 텍스트가 폭을 다 쓰므로 스크림을 세로로 돌린다.
     텍스트는 상단 흰 면 · 주방은 하단 스트립에서 드러남 (실측 5.95:1) */
  .subhero.has-photo{padding:80px 0 190px}
  .subhero.has-photo::after{
    background:linear-gradient(180deg,
      #FFFFFF 0%,rgba(255,255,255,.97) 58%,rgba(255,255,255,.92) 70%,
      rgba(255,255,255,.52) 84%,rgba(255,255,255,.18) 100%);
  }
}
@media (max-width:640px){
  .sec{padding:50px 0 30px}
  .sec-tint{padding:50px 0}
  .subhero{padding:50px 0 0}
  .subhero.has-photo{padding:50px 0 168px}
  .s-head h2,.subhero h1{font-size:28px}
  .s-head p,.sh-lead{font-size:15px}
  .footer{padding:50px 0 44px}
}


/* ==========================================================
   MAIN (index.html) — 게이트웨이
   index.html 인라인 <style>에서 그대로 이관 (검수 통과본 · 렌더 불변)
   네임스페이스 분리: 메인은 site_header / banner_wrap / gate_ / film_ / site_footer 계열,
   서브는 gnb / subhero / sec / card / footer 계열 — 클래스가 겹치지 않는다.
   ========================================================== */
/* 전사물 리듬 — .inner_container / .pdt_120 / .pdb_30 / .pdb_120 */
.inner{width:90%;max-width:var(--container);margin:0 auto}
.pdt_120{padding-top:120px}
.pdb_30{padding-bottom:30px}
.pdb_120{padding-bottom:120px}

/* 섹션 타이틀 — 전사물은 Alata 52px, 국내용은 영문 미사용이라 Pretendard 한글 (고객 #3·#4 '영문 삭제') */
.sec_head{margin-bottom:44px}
.sec_title{
  font-size:42px;font-weight:700;line-height:1.25;letter-spacing:-.02em;color:var(--fg);
}
.sec_lead{margin-top:16px;font-size:16px;font-weight:400;line-height:1.75;color:var(--muted)}

/* ── 헤더 (전사물 h=80 · 히어로 위 오버레이 → 스크롤 시 흰 배경) ───────── */
.site_header{
  position:fixed;top:0;left:0;right:0;height:80px;z-index:60;
  display:flex;align-items:center;
  transition:background .45s var(--ease),border-color .45s var(--ease);
  border-bottom:1px solid transparent;
}
.site_header::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,.34),rgba(0,0,0,0));
  transition:opacity .45s var(--ease);
}
.site_header.is_solid{background:var(--bg);border-bottom-color:var(--line)}
.site_header.is_solid::before{opacity:0}
.head_row{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;height:44px}
.brand img{height:26px;width:auto;transition:filter .45s var(--ease)}
.site_header:not(.is_solid) .brand img{filter:brightness(0) invert(1)}
.gnb{display:flex;align-items:center;gap:4px}
.gnb a{
  display:flex;align-items:center;height:44px;padding:0 16px;
  font-size:15px;font-weight:600;letter-spacing:-.01em;color:#fff;
  position:relative;transition:color .35s var(--ease);
}
.site_header.is_solid .gnb a{color:var(--fg)}
.gnb a::after{
  content:'';position:absolute;left:16px;right:16px;bottom:9px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
}
.gnb a:hover::after,.gnb a:focus-visible::after{transform:scaleX(1)}
.nav_toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center}
.nav_toggle span{display:block;width:20px;height:1.5px;background:#fff;position:relative;transition:background .45s var(--ease)}
.nav_toggle span::before,.nav_toggle span::after{
  content:'';position:absolute;left:0;width:20px;height:1.5px;background:inherit;
  transition:transform .4s var(--ease);
}
.nav_toggle span::before{top:-6px}
.nav_toggle span::after{top:6px}
.site_header.is_solid .nav_toggle span{background:var(--fg)}
.is_open .nav_toggle span{background:transparent}
.is_open .nav_toggle span::before{transform:translateY(6px) rotate(45deg);background:var(--fg)}
.is_open .nav_toggle span::after{transform:translateY(-6px) rotate(-45deg);background:var(--fg)}

/* ── 히어로 (전사물 banner_wrap h=900 / mobile 844) ───────────────────── */
.banner_wrap{position:relative;height:900px;overflow:hidden;background:var(--surface)}
.b_slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s var(--ease);pointer-events:none}
.b_slide.active{opacity:1;pointer-events:auto}
.b_slide picture,.b_slide img{position:absolute;inset:0;width:100%;height:100%}
.b_slide img{object-fit:cover;transform:scale(1.06);transition:transform 8s var(--ease)}
.b_slide.active img{transform:scale(1)}
/* 오버레이 — 얇게 깐다(.18~.24). 화면 전체를 어둡게 하면 고객이 두 번 지적한
   "배경이 너무 어둡다"로 되돌아간다. 가독은 아래 .b_copy::before 스크림이 담당한다.
   상단만 조금 진한 건 헤더(흰 로고·메뉴) 가독용. */
.b_slide::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(0,0,0,.38) 0%,
    rgba(0,0,0,.18) 18%,
    rgba(0,0,0,.18) 70%,
    rgba(0,0,0,.24) 100%);
}
.b_copy{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:#fff;padding:40px 24px 0;
}
/* 텍스트 스크림 — 카피 뒤 타원 영역만 어둡게. 가장자리는 완전 투명이라
   주방 배경의 밝기가 그대로 남는다(전사물 히어로도 밝은 주방 위 흰 텍스트다).
   실효 배경 ≈ 94 → 흰 글씨 대비 6.7:1 (AA 통과), 타원 밖은 ≈ 188로 밝게 유지. */
.b_copy::before{
  content:'';position:absolute;left:50%;top:50%;z-index:-1;
  width:min(1180px,92%);height:min(600px,68%);
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center,
    rgba(0,0,0,.50) 0%,
    rgba(0,0,0,.42) 42%,
    rgba(0,0,0,.22) 66%,
    rgba(0,0,0,0) 80%);
  pointer-events:none;
}
.b_copy > *{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.b_slide.active .b_copy > *{opacity:1;transform:none}
.b_slide.active .b_copy > :nth-child(1){transition-delay:.18s}
.b_slide.active .b_copy > :nth-child(2){transition-delay:.30s}
.b_slide.active .b_copy > :nth-child(3){transition-delay:.42s}
.b_slide.active .b_copy > :nth-child(4){transition-delay:.54s}
/* weight 600 — 20px bold 이상이면 WCAG '큰 텍스트'라 대비 기준이 3:1(실측 4.1:1 통과) */
.b_kicker{font-size:20px;font-weight:600;line-height:1.7;letter-spacing:-.01em;color:#fff}
.b_sub{margin-top:10px;font-size:26px;font-weight:400;line-height:1.5;letter-spacing:-.02em}
.b_main{margin-top:26px;font-size:60px;font-weight:700;line-height:1.15;letter-spacing:-.035em}
.b_resoil{margin-top:18px;font-size:30px;font-weight:600;line-height:1.3;letter-spacing:.01em;color:rgba(255,255,255,.94)}
.b_single{font-size:52px;font-weight:700;line-height:1.25;letter-spacing:-.035em;max-width:20ch}
.b_nav{
  position:absolute;left:50%;bottom:44px;transform:translateX(-50%);z-index:3;
  display:flex;align-items:center;gap:4px;
}
.b_dot{
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
}
.b_dot span{display:block;width:34px;height:2px;background:rgba(255,255,255,.4);transition:background .5s var(--ease)}
.b_dot[aria-current="true"] span{background:#fff}
.b_dot:hover span{background:rgba(255,255,255,.75)}

/* ── 게이트웨이 3카드 (기획서 slide_01: 좌 큰 카드 + 우 2카드) ─────────── */
.gate_grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(0,auto);gap:20px}
.gate_card{
  position:relative;display:flex;flex-direction:column;
  background:var(--surface);            /* 고객 #5 — 어두운 배경 이미지 삭제·전체 밝게 */
  padding:48px 44px;overflow:hidden;
  transition:background .55s var(--ease);
}
.gate_card:hover{background:#EFEFF2}
.gate_card.is_company{grid-row:span 2}
.gate_title{font-size:26px;font-weight:700;line-height:1.3;letter-spacing:-.025em;color:var(--fg)}
.gate_text{margin-top:16px;font-size:15px;font-weight:400;line-height:1.85;color:var(--muted);max-width:34ch}
.gate_go{
  margin-top:auto;padding-top:32px;
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  min-height:44px;font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--fg);
}
.gate_go svg{width:15px;height:15px;transition:transform .5s var(--ease)}
.gate_card:hover .gate_go svg,.gate_go:focus-visible svg{transform:translateX(5px)}
.gate_go span{position:relative}
.gate_go span::after{
  content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.gate_card:hover .gate_go span::after{transform:scaleX(1)}
/* 회사소개 — 하단 순환 다이어그램(고객 자산·밝은 톤) */
.gate_media{margin-top:36px;flex:1;display:flex;align-items:flex-end;justify-content:center;min-height:0}
.gate_media img{width:100%;max-width:420px;height:auto;object-fit:contain}
/* 제품소개 / 고객지원 — 텍스트 좌 · 이미지 우 */
.gate_card.is_split{flex-direction:row;align-items:stretch;gap:24px;padding-right:0}
.gate_split_body{display:flex;flex-direction:column;flex:1 1 52%;min-width:0}
.gate_split_fig{flex:1 1 48%;position:relative;min-width:0;margin:-48px 0 -48px}
.gate_split_fig img{width:100%;height:100%;object-fit:cover}
/* 제품컷 — 크롭 0 · 고객이 준 여백 그대로(BRIEF §3) · 전사물 방식대로 연회색 면 위에 얹음 */
/* 위버 확정 2026-07-18: 제품이 박스의 39.8%만 채워 박스 대비 작다 지적 → 크롭 없이 하단접지로 박스 77% 채움. 모바일은 과대 반려 이력으로 미변경. */
.gate_split_fig.is_product{background:var(--surface);display:flex;align-items:flex-end;justify-content:center;padding:0 6px}
.gate_split_fig.is_product img{
  width:auto;height:100%;max-height:380px;object-fit:contain;
  transition:transform .7s var(--ease);
}
.gate_card:hover .gate_split_fig.is_product img{transform:translateY(-6px)}

/* ── 자동형 동작 영상 (고객 #7~#9·#11) ───────────────────────────────── */
.film_frame{
  position:relative;background:var(--surface);   /* 고객 #8 — 딥포레스트 밴드 제거·밝게 */
  aspect-ratio:16/9;overflow:hidden;
}
.film_frame video{
  width:100%;height:100%;
  object-fit:contain;                            /* 고객 #12 — 제품컷 확대·크롭 금지 */
  background:var(--surface);
}
.film_btn{
  position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.04);transition:opacity .5s var(--ease),background .5s var(--ease);
}
.film_btn:hover{background:rgba(255,255,255,.0)}
.film_btn.is_hidden{opacity:0;pointer-events:none}
.film_btn span{
  display:flex;align-items:center;justify-content:center;
  width:84px;height:84px;border-radius:50%;
  background:rgba(17,17,17,.82);box-shadow:var(--flat-shadow);
  transition:transform .5s var(--ease),background .5s var(--ease);
}
.film_btn:hover span{transform:scale(1.06);background:rgba(17,17,17,.94)}
.film_btn svg{width:26px;height:26px;margin-left:4px;fill:#fff}
.film_note{
  margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-size:13px;color:var(--muted);
}
.film_fallback{
  position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  text-align:center;padding:24px;font-size:14px;color:var(--muted);
}
.film_frame.has_error .film_fallback{display:flex}
.film_frame.has_error .film_btn{display:none}

/* ── 푸터 (전사물 — 맨 끝 #111 한 곳) ────────────────────────────────── */
.site_footer{background:var(--dark);color:#fff;padding:64px 0 56px}
.foot_top{display:flex;align-items:flex-start;justify-content:space-between;gap:40px;flex-wrap:wrap}
.foot_logo img{height:24px;width:auto;filter:brightness(0) invert(1)}
.foot_links{display:flex;align-items:center;gap:2px}
.foot_links a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 14px;
  font-size:14px;font-weight:500;color:rgba(255,255,255,.86);
  transition:color .4s var(--ease);
}
.foot_links a:first-child{padding-left:0}
.foot_links a:hover{color:#fff}
.foot_info{
  margin-top:34px;padding-top:30px;border-top:1px solid var(--line-dark);
  display:flex;flex-direction:column;gap:6px;
}
/* 고객 #10 — 푸터 글씨 크기 통일(전부 14px) · 주소 한 줄 */
.foot_info p{font-size:14px;font-weight:400;line-height:1.7;color:rgba(255,255,255,.78);white-space:nowrap}
.foot_info p span{color:rgba(255,255,255,.5);margin:0 10px}
.foot_info p b{font-weight:600;color:#fff}
.foot_copy{margin-top:26px;font-size:14px;color:rgba(255,255,255,.52)}

/* ── 스크롤 reveal (IntersectionObserver 전용 — scroll 이벤트 리스너 미사용) ──
   ⚠️ 초기 숨김은 html.js 게이팅 — JS 미실행·IO 미발동(캡처 툴·구형 브라우저)이면
   콘텐츠가 opacity:0에 갇혀 통째로 빈 화면이 된다. 기본은 '보임'이 안전값. */

/* ── 반응형 (전사물: 태블릿 pdt 80 / 모바일 pdt 50 · container 90%) ────── */
@media (max-width:1180px){
  .b_main{font-size:52px}
  .gate_card{padding:40px 34px}
  .gate_card.is_split{padding-right:0}
  .gate_split_fig{margin:-40px 0}
}
@media (max-width:900px){
  .pdt_120{padding-top:80px}
  .pdb_120{padding-bottom:80px}
  .sec_title{font-size:34px}
  .sec_head{margin-bottom:34px}
  .gnb{display:none}
  .gnb.is_open{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:fixed;top:60px;left:0;right:0;
    background:var(--bg);border-bottom:1px solid var(--line);
    padding:8px 5% 20px;
  }
  .gnb.is_open a{color:var(--fg);height:52px;padding:0 4px;font-size:16px}
  .gnb.is_open a::after{display:none}
  .nav_toggle{display:flex}
  .site_header{height:60px}
  .banner_wrap{height:844px}
  .b_main{font-size:44px}
  .b_single{font-size:38px}
  .b_sub{font-size:22px}
  .b_kicker{font-size:16px}
  .b_resoil{font-size:26px}
  .gate_grid{grid-template-columns:1fr;gap:16px}
  .gate_card.is_company{grid-row:auto}
  .gate_media{margin-top:28px}
  .gate_media img{max-width:340px}
}
@media (max-width:640px){
  .pdt_120{padding-top:50px}
  .pdb_120{padding-bottom:50px}
  .sec_title{font-size:28px}
  .sec_lead{font-size:15px}
  .banner_wrap{height:844px}   /* 전사물 모바일 실측 844px */
  .b_main{font-size:36px}
  .b_single{font-size:30px}
  .b_sub{font-size:19px}
  .b_kicker{font-size:15px}
  .b_resoil{font-size:22px}
  .b_copy{padding:60px 20px 0}
  .gate_card{padding:34px 26px}
  .gate_title{font-size:22px}
  .gate_text{font-size:14px}
  .gate_card.is_split{flex-direction:column;padding:34px 26px}
  .gate_split_fig{margin:26px -26px -34px;height:210px}
  .gate_split_fig.is_product{padding:16px 8px}
  .gate_split_fig.is_product img{max-height:190px}
  .film_note{flex-direction:column;align-items:flex-start;gap:6px}
  .film_btn i{width:64px;height:64px}
  .film_btn svg{width:20px;height:20px}
  .site_footer{padding:50px 0 44px}
  .foot_top{flex-direction:column;gap:22px}
  .foot_links{flex-wrap:wrap;margin-left:-14px}
  .foot_links a:first-child{padding-left:14px}
  .foot_info p{white-space:normal}
  .foot_info p span{display:none}
  .foot_info p b{display:block}
}
@media (prefers-reduced-motion:reduce){
  .b_slide,.b_slide img,.b_copy > *,.rv,.gate_go svg,.film_btn span,.gate_split_fig.is_product img{
    transition-duration:.01ms !important;transform:none !important;
  }
  .rv{opacity:1}
  .b_copy > *{opacity:1}
}

/* ---------- howto 실물 사진 편입 (2026-07-17) ----------
   고객 지적 "시각적 이미지가 반영된 것이 적다" → howto가 최약체였다(img 3개·미디어 점유 13.2%).
   미사용 고객 자산 4컷 편입. 라운드 0 · 그림자 0 · 헤어라인 보더만 = 전사물 언어 유지.
   다크 밴드는 추가하지 않는다(.console만 기승인 예외).

   ⚠️ 배율 정규화 — 고객이 준 두 실물컷은 촬영 배율이 다르다.
   '88' 숫자 블록 실측: 일반형 155x108 / 자동형 110x77 = 정확히 1.40배.
   원본 파일 변형이 금지라 CSS로만 잡는다 — 자동형에 scale(1.4)를 걸어 두 컷의
   표시창이 같은 크기로 렌더되게 하고, 그래야 버튼 개수 차이(2개 vs 3개)만 남는다.
   object-position Y = 발광부 중심(일반형 y897 / 자동형 y774.5)을 프레임 중앙에 놓는 값.
   aspect 3/4 기준 가시 대역 1440px에서 역산했다 — 프레임 비율을 바꾸면 이 값도 다시 잡아야 한다. */
.led-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:44px}
.led-shot{margin:0}
.led-frame{aspect-ratio:3/4;overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.led-frame img{display:block;width:100%;height:100%;object-fit:cover}
.led-frame[data-model="standard"] img{object-position:50% 37%}
.led-frame[data-model="auto"] img{object-position:50% 11%;transform:scale(1.4);transform-origin:51% 50%}
.led-shot figcaption{margin-top:14px;font-size:14px;line-height:1.7;color:var(--muted)}
.led-shot figcaption b{color:var(--fg);font-weight:700}

/* 사진 밴드 — 미생물 초기관리(와이드 크롭) · 퇴비(원본 비율·업스케일 회피) */
.shot-band{margin:0 0 44px}
.shot-band img{display:block;width:100%;height:auto;border:1px solid var(--line)}
.shot-band.crop img{aspect-ratio:16/9;object-fit:cover;object-position:50% 45%}
.shot-band.narrow{max-width:860px}
.shot-band figcaption{margin-top:14px;font-size:14px;line-height:1.7;color:var(--muted)}

@media(max-width:640px){
  .led-pair{grid-template-columns:1fr;gap:32px}
}