@charset "utf-8";

/* ═══════════════════════════════════════════════════════════
   이어봄 EOBOM — brand site
   palette derived from the 이어봄 brand deck (322.pptx)
   ═══════════════════════════════════════════════════════════ */

:root{
  /* greens */
  --ink:       #161B14;
  --forest:    #232C1F;
  --forest-2:  #2E3A28;
  --moss:      #537038;
  --olive:     #636E4B;
  --sage:      #7F936E;
  --sage-2:    #A4AE89;
  --mist:      #DBDFD0;

  /* warm neutrals */
  --paper:     #F9F8F6;
  --paper-2:   #F1EFE9;
  --clay:      #BCA09A;
  --clay-2:    #CEB9B4;
  /* clay 를 그대로 0.67 배 어둡게 한 값. 색상은 유지하고 명도만 낮춰
     페이퍼 배경 대비 2.28:1 -> 4.72:1 로 올린다 */
  --clay-dk:   #7E6B67;
  --slate:     #595F5A;

  /* semantic */
  --bg:        var(--paper);
  --fg:        var(--ink);
  --rule:      rgba(22,27,20,.12);
  --rule-dk:   rgba(255,255,255,.14);

  /* 고정 헤더 높이. 히어로 영상이 헤더에 가려 인물 머리가 잘리지 않도록 이만큼 내려서 깐다 */
  --head-h:    69px;

  --wrap:      1280px;
  /* CELAI 사이트와 좌우 여백 규격을 맞춘다 (max-width 1280px + 좌우 16px 고정).
     이전에는 clamp(20px,5vw,56px) 로 화면이 넓어질수록 여백이 커졌다. */
  --gut:       16px;
  --sec-y:     clamp(84px, 11vw, 168px);
  --r:         14px;

  --mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
          "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;

  --ease: cubic-bezier(.22,.9,.28,1);
}

/* Pretendard 에는 가나·한자가 없다. 일본어를 고르면 i18n.js 가 JP 서브셋을
   얹고, 그 글꼴을 쓰도록 스택을 갈아끼운다. CDN 이 막혀도 뒤의 OS 글꼴로
   내려앉을 뿐 글자가 깨지지는 않는다 */
html[lang="ja"]{
  --sans: "Pretendard JP Variable", "Pretendard JP", "Pretendard Variable",
          "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, system-ui, sans-serif;
}
/* body 의 word-break:keep-all 은 어절 사이에 공백이 있는 한국어를 전제한다.
   공백이 없는 일본어에 그대로 걸면 문장 하나가 통째로 끊기지 않는 덩어리가
   되어 줄바꿈 자체가 일어나지 않는다(폰에서 155px 가 화면 밖으로 나갔다).
   일본어에서는 기본 규칙으로 되돌리고, 금칙 처리만 엄격하게 둔다 */
html[lang="ja"] body{ word-break:normal; line-break:strict }

/* ── reset ───────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:76px }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-size:16px; line-height:1.7;
  font-weight:400; letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; word-break:keep-all;
}
/* 필름 라이트박스가 열려 있는 동안 뒤 페이지가 스크롤되지 않게 한다 */
body.lock{ overflow:hidden }
img,video{ display:block; max-width:100%; height:auto }
h1,h2,h3,h4,p,ul,ol,figure,blockquote{ margin:0; padding:0 }
ul,ol{ list-style:none }
a{ color:inherit; text-decoration:none }
button,input,textarea{ font:inherit; color:inherit }
button{ background:none; border:0; cursor:pointer }
::selection{ background:var(--sage-2); color:var(--ink) }

.skip{
  position:fixed; top:-100px; left:16px; z-index:200;
  background:var(--moss); color:#fff; padding:12px 20px; border-radius:8px;
  transition:top .2s var(--ease);
}
.skip:focus{ top:16px }

:focus-visible{ outline:2px solid var(--moss); outline-offset:3px; border-radius:4px }
.forest :focus-visible,.ink :focus-visible{ outline-color:var(--sage-2) }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut) }

/* ── typography atoms ────────────────────────────────────── */
.eyebrow{
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--moss);
  margin-bottom:1.4em;
}
.forest .eyebrow,.ink .eyebrow{ color:var(--sage-2) }

.h2{
  font-size:clamp(2rem, 4.6vw, 3.75rem);
  font-weight:700; line-height:1.12; letter-spacing:-.035em;
}
.h2.big{ font-size:clamp(2.4rem, 6.4vw, 5.25rem); line-height:1.05 }
.h2 em{ font-style:normal; color:var(--moss) }
.forest .h2 em,.ink .h2 em{ color:var(--sage-2) }

.lead{
  margin-top:1.6em; max-width:52ch;
  font-size:clamp(1rem, 1.35vw, 1.1875rem); line-height:1.78; color:var(--slate);
  /* 한국어 원고는 52ch 안에서 문장마다 한 줄로 떨어지지만, 같은 뜻에 1.5배
     폭이 드는 언어들은 그렇지 않아 마지막 줄에 한 단어만 남곤 한다.
     pretty 는 그 줄만 끌어올린다 — 미지원 브라우저는 지금 동작 그대로다 */
  text-wrap:pretty;
}
.forest .lead,.ink .lead{ color:rgba(255,255,255,.66) }
.lead b{ font-weight:600; color:var(--fg) }
.forest .lead b,.ink .lead b{ color:#fff }
.lead.center{ margin-inline:auto }

.sec{ padding-block:var(--sec-y); position:relative }
.sec-head{ margin-bottom:clamp(48px, 6vw, 88px) }
/* 리드 문단 없이 h2만 있는 헤드는 아래 여백이 과하게 남는다 */
.sec-head:not(:has(.lead)){ margin-bottom:clamp(32px, 4vw, 56px) }
.sec-head.center{ text-align:center }

.paper{ background:var(--paper); color:var(--ink) }
.forest{ background:var(--forest); color:#fff }
.ink{ background:var(--ink); color:#fff }
.forest .h2,.ink .h2{ color:#fff }

.nm{ display:none }
@media (min-width:760px){ .nm{ display:inline } }

/* ── buttons ─────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  padding:.95em 1.7em; border-radius:100px;
  font-size:.9375rem; font-weight:600; letter-spacing:-.01em;
  /* body 의 1.7 은 문단용 행간이라 한 줄짜리 버튼에 7.5px 의 죽은 여백을 만든다 */
  line-height:1;
  border:1px solid transparent; white-space:nowrap;
  transition:background .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover{ transform:translateY(-2px) }
.btn:active{ transform:translateY(0) }

.btn-fill{ background:var(--moss); color:#fff }
.btn-fill:hover{ background:#455E2F }

.btn-ghost{ border-color:rgba(255,255,255,.32); color:#fff; backdrop-filter:blur(8px) }
.btn-ghost:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.55) }

/* .btn 의 line-height:1 을 물려받아 높이가 30px 까지 내려가므로 패딩으로 탭 타깃을 되돌린다 */
/* 헤더 우측의 유일한 행동 버튼이다. 언어 스위처가 옆에 붙으면서 테두리만 있는
   요소가 둘이 되어 위계가 사라졌다 — 채워서 유틸리티와 행동을 갈라 놓는다.
   흰 글자 / --moss 5.29:1 로 대비는 AA 를 넘는다 */
.btn-sm{
  padding:.95em 1.2em; font-size:.8125rem;
  background:var(--moss); border-color:var(--moss); color:#fff;
}
.btn-sm:hover{ background:#455E2F; border-color:#455E2F }

.ic-play{
  width:0; height:0; border-style:solid;
  border-width:5px 0 5px 8px; border-color:transparent transparent transparent currentColor;
}

/* ═══════════════ HEADER ═══════════════ */
.site-head{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.head-in{
  max-width:var(--wrap); margin-inline:auto; padding:14px var(--gut);
  display:flex; align-items:center; gap:24px;
}

.brand{ display:flex; align-items:center; flex:0 0 auto }
/* 마크와 워드마크가 한 이미지라 높이만 잡고 폭은 비율대로 따라오게 둔다 */
.brand img{ height:27px; width:auto }

.nav{ display:flex; gap:clamp(14px,2vw,30px); margin-left:auto; font-size:.875rem; font-weight:500 }
.nav a{ color:var(--slate); transition:color .2s var(--ease) }
.nav a:hover{ color:var(--moss) }
/* 넓은 화면에서는 헤더 우측의 문의 버튼이 이 역할을 한다 */
.nav-cta{ display:none }

.head-act{ display:flex; align-items:center; gap:12px; flex:0 0 auto }

/* ── language switcher ───────────────────────────────────── */
.lang{ position:relative; flex:0 0 auto }
.lang-btn{
  display:flex; align-items:center; gap:6px;
  padding:.7em .8em; border-radius:100px;
  font-size:.8125rem; font-weight:600; letter-spacing:.02em; line-height:1;
  color:var(--slate); border:1px solid transparent;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.lang-btn:hover{ color:var(--moss) }
.lang-btn[aria-expanded="true"]{ color:var(--moss); border-color:var(--rule) }
.lang-btn b{ font-weight:600 }
.lang-btn .globe{ width:16px; height:16px }
.lang-btn .chev{ width:11px; height:11px; opacity:.7; transition:transform .25s var(--ease) }
.lang-btn[aria-expanded="true"] .chev{ transform:rotate(180deg) }

.lang-menu{
  position:absolute; top:calc(100% + 10px); right:0; z-index:110;
  min-width:170px; padding:6px; display:grid; gap:2px;
  background:var(--paper); border:1px solid var(--rule); border-radius:12px;
  box-shadow:0 16px 44px rgba(22,27,20,.16);
}
/* display:grid 가 UA 의 [hidden]{display:none} 을 이기므로 명시한다 */
.lang-menu[hidden]{ display:none }
.lang-menu button{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  width:100%; padding:9px 12px; border-radius:8px;
  font-size:.875rem; font-weight:500; text-align:left; color:var(--slate);
  transition:background .18s var(--ease), color .18s var(--ease);
}
.lang-menu button:hover{ background:var(--paper-2); color:var(--ink) }
.lang-menu button[aria-current="true"]{ color:var(--moss); font-weight:600 }
.lang-menu button[aria-current="true"]::after{ content:'✓'; font-size:.75rem }

/* both bars are pinned to the exact centre and only ever rotate, so the open
   state is a true X regardless of how the box gets laid out */
.burger{ display:none; position:relative; width:38px; height:38px; border-radius:8px }
.burger span{
  position:absolute; left:50%; top:50%; width:19px; height:1.5px;
  background:var(--ink); border-radius:1px;
  transition:transform .3s var(--ease);
}
.burger span:first-child{ transform:translate(-50%,-50%) translateY(-3.5px) }
.burger span:last-child{ transform:translate(-50%,-50%) translateY(3.5px) }
.burger[aria-expanded="true"] span:first-child{ transform:translate(-50%,-50%) rotate(45deg) }
.burger[aria-expanded="true"] span:last-child{ transform:translate(-50%,-50%) rotate(-45deg) }

@media (max-width:900px){
  .nav{
    position:fixed; inset:64px 0 auto 0; flex-direction:column; gap:0;
    background:rgba(249,248,246,.97); backdrop-filter:blur(20px);
    border-bottom:1px solid var(--rule); padding:8px var(--gut) 20px;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .28s var(--ease), transform .28s var(--ease);
  }
  .nav.open{ opacity:1; transform:none; pointer-events:auto }
  .nav a{ padding:14px 0; border-bottom:1px solid var(--rule); font-size:1rem; color:var(--ink) }
  /* 버거가 뜨는 폭에서는 문의 버튼을 헤더에서 내린다. 로고·언어·버거만 남아야
     독일어(Zusammenarbeit)나 영어(Partner with us) 같은 긴 라벨에서도 한 줄에
     여유가 생긴다. 행동은 메뉴 안 마지막 항목이 이어받는다 */
  .head-act .btn-sm{ display:none }
  .nav-cta{ display:block; color:var(--moss); font-weight:600; border-bottom:0 }
  /* 옆에 버거가 서는 폭이다. 화살표까지 두면 여는 표시가 둘이 되고, 작은
     글리프가 나란히 붙어 지저분해진다. 지구본과 코드만 남긴다 */
  .lang-btn .chev{ display:none }
  .burger{ display:block }
  /* .nav 가 fixed 가 되면서 flex 흐름에서 빠지고, 거기 걸려 있던
     margin-left:auto 도 함께 무력화된다. 우측 정렬을 .head-act 가 이어받는다 */
  /* 문의 버튼이 빠지면서 12px 간격이 언어와 버거 사이에만 남았다. 버거 막대는
     38px 상자 안에 19px 로 그려져 좌우로 9.5px 씩 비어 있으므로, 눈에 보이는
     간격은 KO-버거가 32.5px 인데 버거-화면끝은 25.5px 이다. 오른쪽 묶음이
     한 덩어리로 안 읽히고 언어만 왼쪽으로 떨어져 보인다. 4px 로 줄이면
     24.5px 대 25.5px 로 맞는다. 두 요소 다 24px 을 넘는 탭 타깃이라 붙여도
     오조작 위험이 늘지 않는다 */
  .head-act{ margin-left:auto; gap:4px }
}

/* 헤더에 로고·언어·버거만 남으므로 좁은 화면에서도 지구본·언어 코드·화살표를
   그대로 둔다. 360px 에서도 100px 넘게 남는다 */

/* ═══════════════ HERO ═══════════════ */
/* 텍스트를 다음 섹션으로 넘기면서 히어로는 영상 전용이 됐다. 글자를 얹지
   않으니 크롭을 감수할 이유가 없어, 모든 폭에서 원본 16:9 를 그대로 깐다.
   스크림도 필요 없다 — 유일한 요소인 버튼이 단색 채움이라 배경과 무관하게
   읽힌다(흰 글자 / --moss 5.29:1). */
/* 영상도 다른 섹션과 같은 컨테이너 안에 둔다. full-bleed 로 두면 화면이
   넓어질수록 영상만 계속 커지면서 1280px 로 고정된 본문과 어긋난다.
   헤더가 불투명이므로 그 높이만큼 위를 비운다. */
.hero{
  position:relative;
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding:calc(var(--head-h) + clamp(16px,2vw,28px)) var(--gut) 0;
}
.hero-vid{
  width:100%; height:auto; aspect-ratio:16/9;
  object-fit:cover; display:block; border-radius:var(--r);
}
.hero-cta{
  position:absolute; z-index:2;
  right:calc(var(--gut) + clamp(16px,2vw,28px));
  bottom:clamp(16px,2.4vw,28px);
  display:flex; flex-wrap:wrap; gap:12px;
}
/* 버튼은 167x46 고정인데 영상만 줄어들어 폰에서 영상 폭의 절반을 덮었다
   (375px 기준 48.6%). 폰에서만 축소해 비율을 되돌린다 */
@media (max-width:560px){
  .hero-cta{
    right:calc(var(--gut) + 10px); bottom:10px;
  }
  .hero-cta .btn{
    font-size:.75rem; padding:.7em 1.1em; gap:.45em;
    position:relative;
  }
  /* 축소하면 높이가 31px 이라 터치 타깃 권장치(44px)에 못 미친다.
     보이는 크기는 그대로 두고 눌리는 영역만 상하로 넓힌다 */
  .hero-cta .btn::after{
    content:''; position:absolute; inset:-7px -4px;
  }
}

/* ═══════════════ STATS ═══════════════ */
.stats{
  display:grid; gap:1px; background:var(--rule);
  border:1px solid var(--rule); border-radius:var(--r); overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.stat{ background:var(--paper); padding:clamp(28px,3.4vw,44px) }
.stat-n{
  font-size:clamp(1.65rem,3.3vw,2.5rem); font-weight:700; line-height:1.08;
  letter-spacing:-.05em; color:var(--moss); display:flex; align-items:baseline; gap:2px;
}
/* '30분+' 의 + 는 장식이 아니라 '이상'이라는 뜻을 지고 있으므로 숫자와 같은 색으로 묶는다.
   부모의 align-items:baseline 을 그대로 받으면 큰 글자 옆에서 5px 내려앉으므로 이 항목만 가운데로 */
.stat-n i{ font-style:normal; font-size:.65em; color:var(--moss); align-self:center }
/* 세 번째 카드만 숫자 슬롯에 숫자가 아닌 문구가 들어간다. 한 줄을 넘기면
   그 카드의 제목·출처가 다른 두 카드보다 내려앉아 행이 어긋난다.
   '정보 접근의 장벽' 은 8글자라 여유가 25% 지만, 같은 뜻의 라틴 문자는
   17~18자가 되어 3열이 시작되는 830~960px 구간에서 여유가 0 이 된다
   (영어가 가장 빡빡했다). 그 폭에서 이 슬롯이 담는 한계가 라틴 13~15자다.
   한국어는 그대로 두고 나머지 언어에서만 한 단계 내려 여유를 만든다 */
.stat-word{ white-space:nowrap }
html:not([lang="ko"]) .stat-word{
  white-space:normal;
  font-size:clamp(1.4rem, 2.8vw, 2.125rem);
}
.stat h3{ margin-top:.85em; font-size:1.0625rem; font-weight:600; letter-spacing:-.02em }
.stat h3 i{ font-style:normal; color:var(--moss) }
.stat-meta{ margin-top:.45em; font-size:.8125rem; line-height:1.55; color:var(--slate) }

/* ═══════════════ SPEC GRID ═══════════════ */
/* 4 타일 — 3열로 두면 마지막 하나가 2행에 혼자 남는다. 2열(2×2)과
   4열(1×4)만 쓴다. 넓은 화면의 1×4 는 입력→처리→생성→출력 순서를
   가로 한 줄로 읽히게 하는 효과도 있다. */
.specs{
  display:grid; gap:1px; background:var(--rule-dk);
  border:1px solid var(--rule-dk); border-radius:var(--r); overflow:hidden;
  grid-template-columns:1fr;
}
@media (min-width:620px){ .specs{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1120px){ .specs{ grid-template-columns:repeat(4,1fr) } }
.spec{
  background:var(--forest); padding:clamp(26px,2.8vw,38px);
  transition:background .3s var(--ease);
}
.spec:hover{ background:var(--forest-2) }
.spec-ic{ display:block; color:var(--sage-2) }
.spec-ic svg{ width:30px; height:30px }
.spec h3{ margin-top:1.5em; font-size:1.0625rem; font-weight:600; letter-spacing:-.02em; color:#fff }
.spec p{ margin-top:.65em; font-size:.9375rem; line-height:1.72; color:rgba(255,255,255,.6) }

/* 제조 과정 스트립 — 옛 CRAFT 섹션을 플랫폼 안으로 흡수한 자리 */
.plat-craft{ margin-top:clamp(48px,6vw,88px) }
.plat-craft-h{
  margin-bottom:clamp(24px,3vw,40px);
  font-size:clamp(1.375rem,2.4vw,2rem); font-weight:700;
  letter-spacing:-.035em; line-height:1.25; color:#fff;
}
.plat-craft-h em{ font-style:normal; color:var(--sage-2) }

/* ═══════════════ STEPS ═══════════════ */
/* 가로 구분선을 쓰지 않는다. 좌우 교차 배치와 01·02·03 번호가 이미 행을
   구분하고 있어 중복이었고, 무엇보다 선이 빈 공간을 가로지르며 그 폭을
   눈에 보이게 만들어 허전함을 오히려 강조했다. 각 스텝을 면으로 묶으면
   같은 여백이 '빈 곳'이 아니라 '카드 안 패딩'으로 읽힌다. */
.steps{ display:grid; gap:clamp(12px,1.4vw,20px) }
.step{
  background:var(--paper-2); border-radius:var(--r);
  display:grid; gap:clamp(20px,2.6vw,44px); align-items:center;
  padding:clamp(20px,2.4vw,32px);
  grid-template-columns:1fr;
}
@media (min-width:820px){
  .step{ grid-template-columns:minmax(0,.42fr) minmax(0,.58fr) }
  /* 짝수 행은 미디어를 오른쪽으로 보내는데, 칼럼 비율을 그대로 두면
     미디어가 넓은 쪽(.58)으로 들어가 이미지만 27% 커진다. 비율도 함께
     뒤집어 어느 행이든 이미지 폭이 같게 유지한다 */
  .step:nth-child(even){ grid-template-columns:minmax(0,.58fr) minmax(0,.42fr) }
  .step:nth-child(even) .step-media{ order:2 }
}
/* 16:10 이면 이미지가 텍스트보다 126px 높아 위아래로 여백이 크게 남는다.
   16:9 로 낮춰 두 칼럼의 높이 차를 줄인다.
   카드 안에 들어가므로 라운드는 바깥(14px)보다 작게 잡아 겹쳐 보이지 않게 한다 */
.step-media img{
  width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:10px;
}
/* 13px 일 때는 넘어갔지만 17px 로 키우니 --clay(2.28:1) 가 바랜 티가 났다.
   초록으로 바꾸면 다른 강조 요소와 섞이므로 색상은 두고 명도만 낮춘다 */
/* 본문 19px 과 2px 차이면 라벨도 디스플레이도 아닌 애매한 자리가 된다.
   제목(38px) 대비 0.63 배로 올려 본문 위 티어를 확실히 잡는다.
   자간은 크기에 반비례해야 한다 — 13px 에 쓰던 .2em 을 24px 에 그대로 두면
   실제 간격이 2.6px -> 3.8px 로 오히려 벌어져 '01' 이 '0 1' 로 읽힌다.
   모노 폰트는 이미 글자폭이 넓으므로 디스플레이 크기에서는 자간을 거의 뺀다 */
.step-tx .num{
  font-family:var(--mono); font-size:1.5rem; font-weight:500;
  /* body 의 1.7 을 상속하면 24px 글자에 41px 줄상자가 잡혀 숫자 아래로
     8px 가량의 빈 공간이 생긴다. 제목과 붙이려면 이것부터 걷어내야 한다 */
  line-height:1.15;
  letter-spacing:.02em; color:var(--clay-dk);
}
/* 번호는 제목에 속한 요소이므로 제목-본문 간격(16px)보다 좁아야 한 덩어리로
   읽힌다. .5em(19px) 이면 셋이 등간격이라 그룹이 만들어지지 않았다 */
.step-tx h3{
  /* 최솟값이 1.625rem(26px) 이면 모바일에서 섹션 h2(32px) 와 6px 차이로
     붙어 위계가 무너진다. 데스크톱은 22px 벌어져 문제가 없으므로 최솟값만
     내려 같은 급인 제조 스트립 h3(22px) 와 맞춘다 */
  margin-top:.18em; font-size:clamp(1.375rem,2.9vw,2.375rem);
  font-weight:700; letter-spacing:-.035em;
  /* body 의 1.7 을 상속하면 38px 제목에 65px 줄상자가 잡혀 위아래로 13px 씩
     죽은 여백이 붙는다. 번호와의 간격이 넓어 보이던 실제 원인 */
  line-height:1.2;
}
/* 세 스텝의 본문 줄 수를 2줄로 맞춘다. 원고 길이가 달라 38ch 에서는 02 번만
   3줄이 됐다. 40ch 가 임계점이지만 경계에 걸치면 원고가 한 글자만 늘어도
   3줄로 넘어가므로 42ch 로 여유를 둔다 */
.step-tx h3+p{
  margin-top:.85em; color:var(--slate);
  font-size:clamp(1.0625rem,1.35vw,1.1875rem); line-height:1.75;
  /* CSS 에 한국어 구절 단위 줄바꿈을 보장하는 속성은 없다. keep-all 은 어절
     안쪽만 막고, balance 는 원고가 3글자 늘자 결과가 뒤집혔다 — 줄 길이만
     맞출 뿐 의미를 모르기 때문이다. pretty 는 부작용 없는 선에서만 쓴다 */
  text-wrap:pretty;
}
/* 측정 폭 제한은 2단 레이아웃에서만. 1단일 때 걸면 카드는 넓은데 텍스트만
   좁게 접혀 오른쪽에 빈 공간이 남고, 줄 끝이 어중간하게 끊겨 보인다.
   세 스텝을 2줄로 맞추는 임계점은 44ch 지만, 경계에 걸치면 원고가 한 글자만
   늘어도 3줄로 넘어가므로 46ch 로 여유를 둔다 */
@media (min-width:820px){
  .step-tx h3+p{ max-width:46ch }
}

/* ═══════════════ FILM LIGHTBOX ═══════════════ */
/* 전용 섹션을 없애고 히어로 CTA가 여는 오버레이로 바꿨다.
   main.js 가 재생 시 #player 에 .playing 을 붙이므로 그것만으로 열고 닫는다. */
.player{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  padding:clamp(16px,4vw,56px);
  background:rgba(14,18,12,.94); backdrop-filter:blur(10px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .35s var(--ease), visibility .35s;
}
.player.playing{ opacity:1; visibility:visible; pointer-events:auto }
.player video{
  width:min(1120px,100%); aspect-ratio:16/9;
  border-radius:var(--r); background:#000; display:block;
}
.player-close{
  position:absolute; top:clamp(12px,2.4vw,28px); right:clamp(12px,2.4vw,28px);
  width:44px; height:44px; display:grid; place-items:center;
  border-radius:50%; color:#fff;
  border:1px solid rgba(255,255,255,.28);
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.player-close:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.55) }
.player-close svg{ width:20px; height:20px }

/* ═══════════════ CRAFT GRID (플랫폼 섹션 안) ═══════════════ */
.craft-grid{
  display:grid; gap:clamp(12px,1.4vw,20px);
  grid-template-columns:repeat(2,1fr);
}
.cf{ position:relative; border-radius:var(--r); overflow:hidden; background:var(--paper-2) }
.cf img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  transition:transform .7s var(--ease);
}
.cf:hover img{ transform:scale(1.035) }

@media (min-width:860px){
  /* fixed row heights so every tile's image fills its cell — an auto row would
     stretch the figure past the image and leave a band of background */
  .craft-grid{
    grid-template-columns:repeat(6,1fr);
    grid-template-rows:clamp(260px,24vw,420px) clamp(200px,18vw,300px);
  }
  .cf-a{ grid-column:span 4 }
  .cf-b,.cf-c,.cf-d,.cf-e{ grid-column:span 2 }
  .cf img{ height:100%; aspect-ratio:auto }
}
.cf figcaption{
  position:absolute; left:0; bottom:0; padding:14px 18px;
  font-size:.75rem; font-weight:600; letter-spacing:.04em; color:#fff;
  text-shadow:0 1px 14px rgba(0,0,0,.6);
}
.cf figcaption b{ font-family:var(--mono); font-weight:500; letter-spacing:.14em; opacity:.7 }

/* ═══════════════ USE CASES RAIL ═══════════════ */
.rail{
  margin-top:clamp(8px,1vw,16px);
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  /* percentage resolves against .rail's own width, so the first card lines up
     with the section heading while the last one still bleeds off-screen.
     scroll-padding must match, or mandatory snap yanks the gutter away. */
  --edge:max(var(--gut), calc((100% - var(--wrap)) / 2 + var(--gut)));
  scroll-padding-inline:var(--edge);
}
.rail::-webkit-scrollbar{ display:none }
.rail-track{
  display:flex; gap:clamp(12px,1.4vw,20px);
  padding-inline:var(--edge); padding-block:4px 8px; width:max-content;
}
.uc{
  scroll-snap-align:start;
  width:clamp(260px,30vw,380px); flex:0 0 auto;
  border:1px solid var(--rule-dk); border-radius:var(--r); overflow:hidden;
  background:var(--forest); display:flex; flex-direction:column;
}
.uc img{ width:100%; aspect-ratio:4/3; object-fit:cover }
.uc div{ padding:clamp(20px,2.2vw,28px); flex:1 }
.uc .eyebrow{
  margin-bottom:.9em; font-family:var(--sans); font-size:.75rem;
  font-weight:600; letter-spacing:.04em; text-transform:none;
}
.uc h3{ font-size:1.125rem; font-weight:600; letter-spacing:-.025em; color:#fff; line-height:1.4 }
.uc h3+p{ margin-top:.6em; font-size:.875rem; line-height:1.72; color:rgba(255,255,255,.58) }

/* rail 컨트롤 — 도트는 모바일에서만, 화살표는 전 화면 */
.rail-nav{
  margin-top:clamp(24px,3vw,40px);
  display:flex; align-items:center; justify-content:center; gap:clamp(14px,2vw,22px);
}
/* display:flex 가 UA 의 [hidden]{display:none} 을 이기므로 명시한다 */
.rail-nav[hidden]{ display:none }
.rail-arw{
  width:44px; height:44px; flex:0 0 auto; display:grid; place-items:center;
  border:1px solid var(--rule-dk); border-radius:50%; color:#fff;
  transition:background .25s var(--ease), border-color .25s var(--ease), opacity .25s var(--ease);
}
.rail-arw svg{ width:19px; height:19px }
.rail-arw:hover:not(:disabled){ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.5) }
.rail-arw:disabled{ opacity:.26; cursor:default }

.rail-dots{ display:none; align-items:center; gap:8px }
.rail-dot{
  width:7px; height:7px; padding:0; border-radius:50%;
  background:rgba(255,255,255,.3);
  transition:background .3s var(--ease), width .3s var(--ease), border-radius .3s var(--ease);
}
.rail-dot[aria-current="true"]{ width:22px; border-radius:4px; background:var(--sage-2) }
@media (max-width:760px){ .rail-dots{ display:flex } }

/* ═══════════════ VISION ═══════════════ */
.vision{ text-align:center }
.vision .sec-head{ margin-bottom:clamp(36px,4.5vw,64px) }
/* 선화 다이어그램이 있던 자리 — 브랜드 필름 실사 컷으로 교체되면서
   페이퍼 카드가 아니라 미디어 프레임이 됐다 */
.eco{
  max-width:980px; margin-inline:auto;
  border-radius:var(--r); overflow:hidden; background:var(--ink);
}
.eco video{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block }
.vision-lines{
  margin-top:clamp(44px,6vw,88px);
  display:grid; gap:clamp(10px,1.2vw,18px);
}
.vision-lines p{
  font-size:clamp(1.25rem,2.8vw,2.25rem); font-weight:600;
  letter-spacing:-.035em; color:rgba(255,255,255,.42); line-height:1.32;
}
.vision-lines em{ font-style:normal; color:#fff }

/* ═══════════════ CTA ═══════════════ */
.cta{ background:var(--moss); color:#fff }
.cta .h2{ color:#fff }
/* 기본 .h2 em 은 --moss 라 moss 배경 위에서 사라진다 */
.cta .h2 em{ color:var(--mist) }
.cta .lead{ color:rgba(255,255,255,.78) }
.cta-in{
  display:grid; gap:clamp(36px,5vw,80px); align-items:start;
  grid-template-columns:1fr;
}
@media (min-width:900px){ .cta-in{ grid-template-columns:.9fr 1.1fr } }

.cta-form{ display:grid; gap:18px; grid-template-columns:repeat(2,1fr) }
/* 봇 미끼 칸. display:none 이면 일부 봇이 건너뛰므로 화면 밖으로만 밀어낸다.
   aria-hidden 과 tabindex="-1" 이 붙어 있어 스크린리더와 탭 이동에서는 빠진다 */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
.fld{ display:flex; flex-direction:column; gap:.6em }
.fld-full{ grid-column:1/-1 }
/* 12px / 흰색 72% 는 moss 배경 위에서 3.78:1 이라 AA(4.5:1)에 미달이었다.
   3:1 완화는 18.66px 이상 볼드에만 적용되므로 이 크기는 해당되지 않는다.
   13px 로 키우고 불투명도를 올려 4.6:1 을 만든다.
   자간은 크기에 반비례해야 하므로 .04em 은 함께 줄인다 */
.fld label{ font-size:.8125rem; font-weight:600; letter-spacing:.02em; color:rgba(255,255,255,.88) }
.fld input,.fld textarea{
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.24);
  border-radius:10px; padding:.9em 1.1em; color:#fff; font-size:.9375rem;
  transition:border-color .25s var(--ease), background .25s var(--ease);
  resize:vertical;
}
/* .42 는 2.07:1 이라 밝은 곳의 폰에서는 사실상 보이지 않았다. 라벨이 따로
   있어 필수 정보는 아니지만 예시 문구는 읽혀야 쓸모가 있다.
   기준면은 moss 가 아니라 흰색 10% 가 얹힌 입력칸 배경이라 같은 불투명도라도
   대비가 덜 벌어진다 — 그 면 기준 3:1 이 되는 값이 .68 이다.
   입력한 글자(4.5:1)보다는 확실히 흐려 둘이 섞이지 않는다 */
.fld input::placeholder,.fld textarea::placeholder{ color:rgba(255,255,255,.68) }
.fld input:focus,.fld textarea:focus{ outline:none; border-color:#fff; background:rgba(255,255,255,.16) }
.fld input:user-invalid{ border-color:var(--clay-2) }
.fld-act{ display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:16px; margin-top:6px }
.fld-act .btn-fill{ background:#fff; color:var(--moss) }
.fld-act .btn-fill:hover{ background:var(--ink); color:#fff }
.form-note{ font-size:.8125rem; color:rgba(255,255,255,.8) }
@media (max-width:560px){ .cta-form{ grid-template-columns:1fr } }

/* ═══════════════ FOOTER ═══════════════ */
.site-foot{ background:var(--ink); color:#fff }
/* 브랜드·사업자 정보는 좌측에 쌓고 약관은 우측 하단에 붙인다.
   저작권과 영문 태그라인은 그 아래 구분선 바로 따로 뺀다 */
.foot-in{
  padding:clamp(44px,5.5vw,72px) var(--gut) clamp(32px,4vw,48px);
  display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,48px);
  justify-content:space-between; align-items:flex-end;
}
/* 어두운 배경용 화이트 로고라 별도 반전 필터를 걸지 않는다 */
.foot-brand img{ height:32px; width:auto; opacity:.9 }
/* 줄바꿈은 마크업의 br 로 의미 단위(— 앞)에서만 일어나게 하고,
   max-width 로 인한 임의 折行은 두지 않는다 */
.foot-brand p{ margin-top:1.1em; font-size:.8125rem; line-height:1.7; color:rgba(255,255,255,.42) }

.foot-biz{ margin-top:clamp(20px,2.4vw,28px); display:grid; gap:5px }
.foot-biz p{ font-size:.75rem; line-height:1.7; color:rgba(255,255,255,.45) }
.foot-biz .lb{ font-weight:600; color:rgba(255,255,255,.62) }
.foot-biz .sep{ margin-inline:8px; opacity:.35 }
.foot-biz a{ color:inherit; transition:color .2s var(--ease) }
.foot-biz a:hover{ color:#fff }

/* 저작권과 영문 태그라인만 구분선 아래로. 좁은 화면에서는 줄바꿈돼 쌓인다 */
.foot-bot{
  border-top:1px solid rgba(255,255,255,.1);
  padding-block:clamp(18px,2.2vw,24px);
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:10px 20px;
}
.foot-copy{ font-size:.75rem; color:rgba(255,255,255,.38) }
/* 히어로에서 옮겨온 영문 태그라인. 배경이 단색 --ink 라 대비가 항상 보장된다
   — 움직이는 영상 위에서는 컷에 따라 3.3:1 까지 떨어졌다 */
.foot-tag{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--sage-2);
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important }
}