/* ============================================================
   오셔너블 홈페이지 — 슈퍼프롬프트(VANTA/LOOP 도면) 적용 실험판
   브랜드 값의 유일한 원천: ../homepage/CLAUDE.md §2 (여기서는 변수로만)
   히어로 블록은 ../homepage/css/style.css에서 무수정 이식 (보존 구간)
   모션 설계 수치(430vh·.92 스케일·42px 리빌 등)는 슈퍼프롬프트 도면 값
   ============================================================ */

:root {
  /* 컬러 토큰 — 수정본과 동일 */
  --oc-yellow: #d5fe53;
  --oc-green: #1c6450;
  --oc-green-active: #14503f;
  --oc-ink: #211815;
  --oc-bg: #f7f5f0;
  --oc-surface: #ffffff;
  --oc-hairline: #e5e1d8;
  --oc-ink-muted: #6e6459;
  /* 2026-08-21: #a39a8e 는 밝은 배경에서 2.55:1로 WCAG AA(4.5) 미달이었다.
     TECH 탭의 선택 안 된 소재명·도해 범례가 전부 여기 걸려 있었다 → 4.51:1 */
  --oc-ink-faint: #736a5f;
  --oc-placeholder: #736a5f;   /* 미확정 값 표시 — 3.68:1 → 4.92:1 */
  --oc-ink-faint-on-dark: #a39a8e;   /* 잉크 바탕 위의 흐린 글자 (밝은 바탕용은 --oc-ink-faint) */
  --oc-surface-tint-1: #e9e4d8;      /* 이미지 자리 그라디언트 위 */
  --oc-surface-tint-2: #d8d1c2;      /* 이미지 자리 그라디언트 아래 */
  --oc-error: #a4501f;               /* 폼 오류 글자 — 오렌지에서 파생 */
  --oc-sky: #a2caf9;        /* ⚠️ 공식 RGB 디자이너 확인 미결 */
  --oc-light-green: #b8e2b0;
  --oc-orange: #fa9964;
  --oc-lavender: #cfc8fc;
  --oc-gray: #c0b9ad;
  --oc-line: rgba(33, 24, 21, 0.16);   /* 도면의 rules 대응 */

  /* ── 타이포·여백 스케일 (2026-08-21) ──
     페이지가 여러 세션에 걸쳐 만들어져 **같은 역할인데 값이 제각각**이었다.
     섹션 제목만 37·42·43·44·46·48·58px 여덟 가지였다(실측).
     역할별로 한 값만 두고 여기서만 고친다. */
  --fs-section-title: clamp(30px, 3.1vw, 44px);   /* 섹션 제목 */
  --fs-statement: clamp(34px, 4vw, 58px);         /* 한 단계 위 — 절 전체를 여는 문장 */
  --fs-lead: 21px;                                /* 섹션 도입 문단 */
  --fs-body: 20px;                                /* 본문 */
  --sec-y: 120px;                                 /* 섹션 세로 여백 */
  --oc-maxw: 1320px;                              /* 콘텐츠 최대 폭 */


  /* 폰트 토큰 */
  --oc-font-display: 'Paperlogy', 'Pretendard Variable', Pretendard, sans-serif;
  --oc-font-body: 'Pretendard Variable', Pretendard, sans-serif;
  --oc-font-en: 'Outfit', sans-serif;

  --gutter: clamp(24px, 4vw, 56px);
}

@font-face {
  font-family: 'Paperlogy';
  font-weight: 700;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-7Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Paperlogy';
  font-weight: 600;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-6SemiBold.woff2') format('woff2');
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--oc-bg);
  font-family: var(--oc-font-body);
  color: var(--oc-ink);
}
img, video { display: block; max-width: 100%; }
a { color: var(--oc-green); text-decoration: none; }
a:hover { color: var(--oc-green-active); }

.eyebrow {
  font-family: var(--oc-font-en);
  font-size: 22px;   /* 2026-08-16 사용자: 섹션 라벨(INTRO 등) 레벨 전체 확대 (구 17px) */
  font-weight: 600;
  letter-spacing: 2.5px;
  color: var(--oc-green);
}
.eyebrow--on-ink { color: var(--oc-yellow); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- 로더 (도면 §Site-wide) ---------- */

.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--oc-ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.loader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
/* 2026-08-16 사용자: 로더가 너무 작다 — 훨씬 확대 */
.loader__mark {
  height: clamp(110px, 16vh, 170px);
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
.loader__word {
  font-family: var(--oc-font-en);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 600;
  letter-spacing: 10px;
  color: rgba(255, 255, 255, 0.85);
}
.loader__line {
  width: clamp(260px, 30vw, 420px);
  height: 3px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}
.loader__line-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--oc-yellow);
  transform: translateX(-100%);
  animation: loadbar 1.1s ease-out forwards;
}
@keyframes loadbar { to { transform: translateX(0); } }
.loader.is-done {
  transition: clip-path 0.9s cubic-bezier(0.65, 0, 0.35, 1);
  clip-path: inset(0 0 100% 0);   /* 위로 걷히는 리빌 */
  pointer-events: none;
}
html.is-loading { overflow: hidden; }
/* no-JS: 로더가 스크롤을 영영 잠그지 않도록 자동 소멸 */
html:not(.js) .loader { animation: loader-auto-hide 0.1s 1.2s forwards; }
@keyframes loader-auto-hide { to { visibility: hidden; opacity: 0; } }

/* ---------- 커스텀 커서 (도면: 18px 원 + difference, 인터랙티브 54px) ---------- */

.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  html.js .cursor {
    display: block;
    position: fixed;
    top: -100px; left: -100px;   /* 첫 mousemove 전에는 화면 밖 */
    width: 18px; height: 18px;
    border: 1.5px solid #fff;
    border-radius: 50%;
    mix-blend-mode: difference;
    pointer-events: none;
    z-index: 90;
    transform: translate(-50%, -50%);
    transition: width 0.25s ease, height 0.25s ease;
  }
  html.js .cursor.is-active { width: 54px; height: 54px; }
}

/* ---------- 헤더 — 히어로 위 오버레이 (도면 §Header) ---------- */

.header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: grid;
  /* 2026-08-17 수정: 1fr auto 1fr은 좌우 칸을 **강제로 같은 폭**으로 만든다.
     왼쪽에는 로고(약 140px)뿐인데 오른쪽에는 언어 전환기+버튼(약 400px)이 들어가,
     1080~1440px(노트북 폭)에서 오른쪽이 제 폭을 못 받아 버튼 글자가 쪼개졌다
     — 한국어 5줄·일본어 7줄까지 갈라졌다. minmax(max-content, 1fr)로 두면
     **내용 폭은 반드시 확보하면서** 여유가 있을 때만 좌우가 같아져 메뉴가 가운데 온다. */
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  column-gap: clamp(16px, 2vw, 40px);
  align-items: center;
  padding: 26px var(--gutter);
}
.header__brand img {
  height: 34px;
  filter: brightness(0) invert(1);   /* 영상 위 백색 반전 */
}
.header__nav {
  display: flex;
  justify-content: center;
  gap: 104px;   /* 2026-08-16 사용자: 메뉴 간격 더 벌리기 (구 48px) */
  font-family: var(--oc-font-en);
  font-size: 18px;   /* 2026-08-16 사용자: 헤더 레벨 전체 확대 (구 15px) */
  font-weight: 500;
  letter-spacing: 1px;
}
.header__nav a { color: rgba(255, 255, 255, 0.9); }
.header__nav a:hover { color: var(--oc-yellow); }
.header__nav a[aria-current="page"] { color: var(--oc-yellow); }
.header__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}
.header__lang {
  font-family: var(--oc-font-en);
  font-size: 17px;   /* 2026-08-16: 헤더 레벨 확대 (구 12px) */
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.7);
}
.header__cta {
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #fff;
  font-size: 17px;   /* 2026-08-16: 헤더 레벨 확대 (구 14px) */
  font-weight: 500;
  padding: 11px 26px;
  border-radius: 9999px;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.header__cta:hover {
  background: var(--oc-yellow);
  border-color: var(--oc-yellow);
  color: var(--oc-ink);
}

/* ============================================================
   히어로 — ../homepage/css/style.css에서 무수정 이식 (보존 구간)
   (변경: min-height 84vh→100svh — 오버레이 헤더 도입에 따른 것 하나뿐)
   ============================================================ */

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.hero__bg {
  position: absolute;
  inset: 0;
  /* 폴백: 영상 로드 전·미지원 환경에서는 포스터 정지컷 (새 히어로 영상에서 추출) */
  background: url('../assets/img/hero_poster.jpg') center / cover no-repeat;
}
@media (max-width: 767px) {
  .hero__bg { background-image: url('../assets/img/hero_poster_mobile.jpg'); }
}
.hero__bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(33, 24, 21, 0.25); /* 가독성용 잉크 오버레이 */
}
.hero__inner {
  position: relative;
  padding: 60px 24px;
}

/* ----- 효과 B: 블러 등장 (reactbits Blur Text 패턴, 2026-08-10 사용자 채택) ----- */
.hero__title .bw {
  display: inline-block;
  filter: blur(16px);
  opacity: 0;
  transform: translateY(14px);
  animation: b-in 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
@keyframes b-in {
  to { filter: blur(0); opacity: 1; transform: none; }
}
@keyframes b-fade {
  to { opacity: 0.95; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__title .bw { filter: none; opacity: 1; transform: none; animation: none; }
}
.hero__title {
  font-family: var(--oc-font-display);
  font-size: clamp(56px, 7vw, 100px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  color: #fff;
  text-shadow: 0 2px 24px rgba(33, 24, 21, 0.35);
}
/* 영문 히어로 제목 — 국문 제목과 비슷한 시각 크기를 내기 위해 영문 서체로 교체하고 자간을 조인다 */
.hero__title--en {
  font-family: var(--oc-font-en);
  font-size: clamp(28px, 5.6vw, 82px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
/* 좁은 화면에서는 지정 줄바꿈을 풀고 자연 줄바꿈에 맡긴다 (가로 넘침 방지) */
@media (max-width: 767px) {
  .br-wide { display: none; }
  .hero__title--en { font-size: clamp(26px, 7.4vw, 34px); }
}

/* 히어로 상단 마이크로카피 (도면 §Hero — 추가 요소, 보존 구간 밖) */
.hero__micro {
  position: absolute;
  top: 92px;
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  justify-content: flex-end;   /* 2026-08-16: 좌측 문구 삭제 후 우측 정렬만 */
  font-family: var(--oc-font-en);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.75);
  z-index: 2;
  text-transform: uppercase;
}
html.js .hero__micro { opacity: 0; animation: b-fade 1s ease 1.6s forwards; }

/* ---------- 포털 — 미디어 확대 (도면 §2: 430vh + sticky 100vh) ---------- */

/* 정적 풀블리드 미디어 밴드 — 스크럽 제거 후 재정리 (260816).
   코너 타이포(OCEAN/ABLE)·점은 스크럽 전용 요소라 삭제 */
.portal {
  position: relative;
  overflow: hidden;
}
.portal__frame {
  position: relative;
  margin: 0;
  width: 100%;
  height: min(84vh, 940px);
  overflow: hidden;
}
.portal__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.portal__duotone {
  position: absolute;
  inset: 0;
  background: var(--oc-green);
  mix-blend-mode: multiply;
  opacity: 0.18;
}
/* 2026-08-16 사용자: "/" 제거, 글자색을 "/"의 옐로우로 */
.portal__title {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--oc-font-en);
  font-weight: 700;
  font-size: clamp(60px, 10vw, 150px);
  letter-spacing: -0.03em;
  color: var(--oc-yellow);
  text-shadow: 0 2px 30px rgba(33, 24, 21, 0.45);
  pointer-events: none;
}

/* ---------- 인트로 폴드 (도면 §3: 290vh sticky 에디토리얼) ---------- */

/* 정돈된 스테이트먼트 섹션 — 100vh 스테이지·플로팅 이미지 삭제 (260816) */
.intro {
  position: relative;
  background: var(--oc-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 52px;
  padding: 130px var(--gutter) 140px;
}
.intro__label { align-self: flex-start; }

/* 스테이트먼트 — 수정본 타이포·워드 리빌·마커 유지 */
.intro__statement {
  font-family: var(--oc-font-display);
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.25px;
  max-width: 900px;
  margin: 0;
  text-align: center;
  text-wrap: pretty;
}
html.js .intro__statement .w {
  color: rgba(33, 24, 21, 0.16);
  transition: color 0.3s ease;
}
html.js .intro__statement .w.on { color: var(--oc-ink); }
@media (prefers-reduced-motion: reduce) {
  html.js .intro__statement .w { color: var(--oc-ink); transition: none; }
}
.marker {
  /* 옐로우는 형광펜 — 글자색이 아니라 배경 마커로만 (DESIGN-oceanable.md)
     리빌 시 왼쪽→오른쪽으로 긋는 애니메이션. no-JS에서는 처음부터 그어진 상태 */
  background-image: linear-gradient(transparent 60%, var(--oc-yellow) 60%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transition: background-size 0.9s ease 0.45s;
  padding: 0 4px;
}
html.js .marker { background-size: 0% 100%; }
html.js .is-visible .marker,
html.js .intro.is-visible .marker { background-size: 100% 100%; }

/* ---------- 매니페스토 (도면 §4: 440vh 니어블랙 + 콜라주) ---------- */

.manifesto { position: relative; background: var(--oc-ink); }
.manifesto__stage {
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.manifesto__type {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.08em;
  font-family: var(--oc-font-display);
  font-size: clamp(56px, 8.5vw, 130px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  text-align: center;
  z-index: 2;
  position: relative;
}
.manifesto__item {
  position: absolute;
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
  z-index: 1;
}
.manifesto__item img { width: 100%; height: 100%; object-fit: cover; }
.manifesto__item--1 { top: 12vh; left: 8vw;  width: clamp(140px, 17vw, 300px); height: clamp(180px, 22vw, 380px); }
.manifesto__item--2 { bottom: 14vh; right: 9vw; width: clamp(150px, 19vw, 330px); height: clamp(120px, 14vw, 250px); }
.manifesto__item--3 { bottom: 10vh; left: 14vw; width: clamp(120px, 14vw, 240px); height: clamp(120px, 14vw, 240px); }
.manifesto__item--4 {
  top: 16vh; right: 14vw;
  width: clamp(110px, 13vw, 220px); height: clamp(110px, 13vw, 220px);
  background: var(--oc-green);
  display: flex; align-items: center; justify-content: center;
}
.manifesto__orb {
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--oc-yellow), rgba(213, 254, 83, 0.15) 70%);
  filter: blur(1px);
}
.manifesto__item--5 {
  top: 44vh; left: 4vw;
  width: clamp(100px, 11vw, 190px); height: clamp(100px, 11vw, 190px);
  background: var(--oc-bg);
  display: flex; align-items: center; justify-content: center;
}
.manifesto__item--5 img { width: 56%; height: auto; }
/* .manifesto__index — 작은 글씨 정리로 삭제 (260816) */

/* ---------- 스택 프로젝트 (도면 §5: pin + .92/-28px/brightness .45) ---------- */

.projects { position: relative; }
.project {
  position: relative;
  height: 96vh;
  overflow: hidden;
  border-radius: 28px 28px 0 0;   /* 도면: rounded top corners */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--oc-ink);
}
.project__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(33, 24, 21, 0.12) 40%, rgba(33, 24, 21, 0.68) 100%);
}
.project__head {
  position: absolute;
  top: 36px;
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.project__badge {
  background: var(--oc-yellow);
  color: var(--oc-ink);
  font-family: var(--oc-font-en);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1.5px;
  padding: 7px 16px;
  border-radius: 9999px;
}
.project__num {
  margin-left: auto;
  font-family: var(--oc-font-en);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.85);
}
.project__body {
  position: relative;
  padding: 0 var(--gutter) 56px;
  color: #fff;
  max-width: 860px;
}
.project__title {
  font-family: var(--oc-font-display);
  font-size: clamp(34px, 4.6vw, 64px);
  font-weight: 700;
  line-height: 1.12;
  margin: 0 0 14px;
  text-shadow: 0 2px 24px rgba(33, 24, 21, 0.4);
}
.project__meta {
  font-size: clamp(15px, 1.4vw, 19px);
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
}
.project__cta {
  /* 도면: 하단 우측 paper 원형 CTA */
  position: absolute;
  right: var(--gutter);
  bottom: 44px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: var(--oc-bg);
  color: var(--oc-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  padding: 12px;
  transition: transform 0.35s ease, background 0.35s ease;
}
.project__cta:hover { background: var(--oc-yellow); transform: scale(1.06); }

/* ---------- 수치·인증 — 잉크 밴드 (수정본 stats 계승) ---------- */

.proven {
  background: var(--oc-ink);
  padding: 130px var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.proven__head { display: flex; flex-direction: column; gap: 14px; }
.proven__title {
  font-family: var(--oc-font-display);
  font-size: clamp(34px, 3.4vw, 48px);
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.proven__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 48px;
}
.stat { display: flex; flex-direction: column; gap: 12px; }
.stat__label {
  font-family: var(--oc-font-en);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.6);
}
.stat__value {
  font-family: var(--oc-font-display);
  font-size: clamp(38px, 3.6vw, 54px);
  font-weight: 700;
  line-height: 1;
  color: var(--oc-yellow);
}

/* ---------- 진행 프로젝트 — 룰드 행 + 호버 그린 반전 (도면 §7 rows) ---------- */

.ongoing {
  padding: 130px var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 44px;
  background: var(--oc-bg);
}
.ongoing__head { display: flex; flex-direction: column; gap: 14px; }
.ongoing__title {
  font-family: var(--oc-font-display);
  font-size: clamp(34px, 3.4vw, 48px);
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
}
.ongoing__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--oc-line);
}
.ongoing__list li {
  display: flex;
  align-items: baseline;
  gap: 32px;
  padding: 30px 20px;
  border-bottom: 1px solid var(--oc-line);
  transition: background 0.3s ease, color 0.3s ease, padding-left 0.3s ease;
}
/* 도면: 행 호버 시 채움+백색 타이포 (블루 → 브랜드 그린) */
.ongoing__list li:hover { background: var(--oc-green); padding-left: 32px; }
.ongoing__list li:hover h3 { color: #fff; }
.ongoing__list li:hover p { color: rgba(255, 255, 255, 0.8); }
.ongoing__list li:hover .ongoing__num { color: var(--oc-yellow); }
.ongoing__list li:hover .ongoing__tag { border-color: rgba(255, 255, 255, 0.4); color: #fff; background: transparent; }
.ongoing__num {
  font-family: var(--oc-font-en);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--oc-green);
  flex: none;
  width: 40px;
  transition: color 0.3s ease;
}
.ongoing__list h3 {
  font-family: var(--oc-font-display);
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 6px;
  transition: color 0.3s ease;
}
.ongoing__list p {
  font-size: 18px;
  color: var(--oc-ink-muted);
  margin: 0;
  transition: color 0.3s ease;
}
.ongoing__list div { flex: 1; }
.ongoing__tag {
  align-self: center;
  flex: none;
  background: var(--oc-surface);
  border: 1px solid var(--oc-hairline);
  font-size: 16px;
  font-weight: 500;
  color: var(--oc-ink-muted);
  padding: 6px 14px;
  border-radius: 9999px;
  transition: all 0.3s ease;
}

/* ---------- 핵심기술 — 캐퍼빌리티 카드 3장 (도면 §7 cards) ---------- */

.capability {
  padding: 0 var(--gutter) 140px;
  display: flex;
  flex-direction: column;
  gap: 44px;
  background: var(--oc-bg);
}
.capability__head { display: flex; flex-direction: column; gap: 14px; }
.capability__title {
  font-family: var(--oc-font-display);
  font-size: clamp(34px, 3.4vw, 48px);
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
}
.capability__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.cap {
  border-radius: 20px;
  overflow: hidden;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 480px;
}
.cap--green { background: var(--oc-green); color: #fff; }
.cap--paper { background: var(--oc-surface); border: 1px solid var(--oc-hairline); }
.cap--yellow { background: var(--oc-yellow); }
.cap__tag {
  align-self: flex-start;
  font-family: var(--oc-font-en);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2px;
  padding: 7px 16px;
  border-radius: 9999px;
}
.cap--green .cap__tag { background: var(--oc-yellow); color: var(--oc-ink); }
.cap--paper .cap__tag { background: var(--oc-yellow); color: var(--oc-ink); }
.cap--yellow .cap__tag { background: var(--oc-ink); color: #fff; }
.cap__desc {
  font-size: 18px;
  line-height: 1.7;
  margin: 0;
  flex: 1;
}
.cap--green .cap__desc { color: rgba(255, 255, 255, 0.92); }
.cap--paper .cap__desc { color: var(--oc-ink-muted); }
.cap__img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 12px;
}

/* ---------- 컨택트 (도면 §11: 잉크 + 오프캔버스 원) ---------- */

.contact {
  position: relative;
  min-height: 80vh;
  background: var(--oc-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 120px var(--gutter);
}
.contact__circle {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.contact__circle--a { width: 56vw; height: 56vw; left: -18vw; top: -22vw; }
.contact__circle--b { width: 44vw; height: 44vw; right: -16vw; bottom: -20vw; border-color: rgba(213, 254, 83, 0.25); }
.contact__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.contact__title {
  font-family: var(--oc-font-display);
  font-size: clamp(38px, 5vw, 68px);
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  margin: 0;
}
.contact__title em {
  font-style: normal;
  color: var(--oc-yellow); /* 잉크 블랙 위에서는 옐로우 글자색 허용 (브랜드 가이드 승인 조합) */
}
.contact__cta {
  background: var(--oc-bg);
  color: var(--oc-ink);
  font-size: 17px;
  font-weight: 600;
  padding: 18px 44px;
  border-radius: 9999px;
  transition: background 0.3s ease, transform 0.3s ease;
}
.contact__cta:hover { background: var(--oc-yellow); color: var(--oc-ink); transform: scale(1.04); }
.contact__info {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}
.contact__info a { color: rgba(255, 255, 255, 0.85); }
.contact__info a:hover { color: var(--oc-yellow); }

/* ---------- 스크롤 리빌 (도면: 42px 페이드-라이즈) ---------- */

html.js .reveal {
  opacity: 0;
  transform: translateY(42px);
}
.reveal { transition: opacity 0.8s ease, transform 0.8s ease; }
html.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .marker { background-size: 100% 100% !important; transition: none; }
  .hero__bg video { display: none; } /* 움직임 최소화: 영상 대신 포스터 */
}

/* ---------- 반응형 (도면: 375/768/1440/1920 가로 넘침 금지) ---------- */

@media (max-width: 960px) {
  .header { padding: 18px 24px; }
  .header__nav { gap: 44px; }   /* 2026-08-16: 데스크탑 간격 확대에 비례 (구 22px) */
  .proven__grid { grid-template-columns: repeat(2, 1fr); }
  .capability__grid { grid-template-columns: 1fr; }
  .cap { min-height: 0; }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .ongoing__tag { display: none; }
  .manifesto__item--5 { display: none; }
  .project { height: 82svh; }   /* 도면: 모바일 프로젝트 패널 ≈78svh */
  .project__cta { width: 96px; height: 96px; font-size: 13px; bottom: 28px; }
  .portal__frame { height: min(60vh, 640px); }
}

@media (max-width: 600px) {
  /* 2026-08-17: 햄버거와 같은 1080px로 옮김 — 아래 모바일 내비 블록 참조.
     600px으로 두면 601~1080px에서 데스크탑 메뉴와 햄버거가 함께 보인다. */
  .header__lang { display: none; }
  .hero { min-height: 620px; }
  .hero__micro { top: 78px; font-size: 11px; }
  .proven__grid { grid-template-columns: 1fr; }
  .project__title { font-size: clamp(30px, 8vw, 40px); }
}

/* ============================================================
   CONTACT 페이지 (2026-08-17) — 문의 유형 분리 폼 + 오시는 길 지도 2곳
   기존 사이트 oceanable.co.kr/contact의 3요소(연구소 지도·본사 지도·문의 폼) 계승
   ============================================================ */

.inquiry {
  padding: var(--sec-y) var(--gutter) var(--sec-y);
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
}
.inquiry__head { display: flex; flex-direction: column; gap: 14px; }
.inquiry__title {
  font-family: var(--oc-font-display);
  font-size: var(--fs-section-title);
  font-weight: 700;
  margin: 0;
}
.inquiry__lead { font-size: var(--fs-lead); color: var(--oc-ink-muted); margin: 0; }

/* ----- 문의 유형 선택 ----- */
.itype {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.itype__opt { cursor: pointer; }
.itype__opt input { position: absolute; opacity: 0; pointer-events: none; }
.itype__box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 26px 24px;
  background: var(--oc-surface);
  border: 1px solid var(--oc-hairline);
  border-radius: 16px;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.itype__opt:hover .itype__box { transform: translateY(-3px); }
.itype__opt input:checked + .itype__box {
  background: var(--oc-green);
  border-color: var(--oc-green);
}
.itype__opt input:focus-visible + .itype__box { outline: 3px solid var(--oc-yellow); outline-offset: 2px; }
.itype__name {
  font-family: var(--oc-font-display);
  font-size: 21px;
  font-weight: 700;
}
.itype__desc { font-size: 18px; color: var(--oc-ink-muted); line-height: 1.5; }
.itype__opt input:checked + .itype__box .itype__name { color: #fff; }
.itype__opt input:checked + .itype__box .itype__desc { color: rgba(255, 255, 255, 0.82); }

/* ----- 폼 ----- */
.iform { display: flex; flex-direction: column; gap: 26px; }
.iform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.ifield { display: flex; flex-direction: column; gap: 10px; }
.ifield__label {
  font-size: 17px;
  font-weight: 600;
  color: var(--oc-ink);
}
.ifield__label em { font-style: normal; color: var(--oc-green); }
.ifield input,
.ifield select,
.ifield textarea {
  font-family: var(--oc-font-body);
  font-size: 17px;
  color: var(--oc-ink);
  background: var(--oc-surface);
  border: 1px solid var(--oc-hairline);
  border-radius: 10px;
  padding: 14px 16px;
  width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ifield textarea { resize: vertical; line-height: 1.6; }
.ifield input:focus,
.ifield select:focus,
.ifield textarea:focus {
  outline: none;
  border-color: var(--oc-green);
  box-shadow: 0 0 0 3px rgba(28, 100, 80, 0.12);
}

/* ----- 개인정보 동의 ----- */
.iconsent { display: flex; flex-direction: column; gap: 12px; }
.iconsent__box {
  max-height: 190px;
  overflow-y: auto;
  background: var(--oc-surface);
  border: 1px solid var(--oc-hairline);
  border-radius: 12px;
  padding: 22px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--oc-ink-muted);
}
/* 약관은 스크롤 상자 안의 세칙이라 본문(20px)보다 한 단계 작게 둔다 — 의도된 예외 */
.iconsent__box p { margin: 0 0 14px; }
.iconsent__box p:last-child { margin-bottom: 0; }
.iconsent__box strong { color: var(--oc-ink); }
.icheck { display: flex; align-items: center; gap: 10px; font-size: 17px; cursor: pointer; }
.icheck input { width: 19px; height: 19px; accent-color: var(--oc-green); }

.iform__submit { align-self: flex-start; border: none; cursor: pointer; font-family: var(--oc-font-body); }
.iform__note {
  margin: 0;
  font-size: 17px;
  padding: 14px 18px;
  border-radius: 10px;
}
.iform__note--ok { background: rgba(28, 100, 80, 0.08); color: var(--oc-green); }
.iform__note--error { background: rgba(250, 153, 100, 0.14); color: var(--oc-error); }

/* ----- 오시는 길 ----- */
.places {
  padding: 0 var(--gutter) 120px;
  display: flex;
  flex-direction: column;
  gap: 44px;
  max-width: var(--oc-maxw);
  margin: 0 auto;
  width: 100%;
}
.places__head { display: flex; flex-direction: column; gap: 14px; }
.places__title {
  font-family: var(--oc-font-display);
  font-size: var(--fs-section-title);
  font-weight: 700;
  margin: 0;
}
.place {
  display: grid;
  /* 2026-08-17: 340px 고정이라 로마자 주소가 'Geumcheon-/gu'처럼 갈라졌다.
     한국어 주소는 짧아 문제가 없었다 — 언어마다 길이가 달라지는 자리다. */
  grid-template-columns: clamp(340px, 38%, 440px) 1fr;
  gap: 32px;
  align-items: start;
}
.place__info { display: flex; flex-direction: column; gap: 12px; padding-top: 6px; }
.place__name {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.place__en {
  font-family: var(--oc-font-en);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 700;
  color: var(--oc-green);
  letter-spacing: -0.01em;
}
.place__ko {
  font-family: var(--oc-font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--oc-ink);
}
.place__addr { font-size: 18px; line-height: 1.7; color: var(--oc-ink-muted); margin: 0; }
.place__link { font-size: 17px; font-weight: 500; align-self: flex-start; }
.place__map {
  border: 1px solid var(--oc-hairline);
  border-radius: 16px;
  overflow: hidden;
  background: var(--oc-surface);
}
.place__map iframe { display: block; width: 100%; height: 380px; border: 0; }

@media (max-width: 960px) {
  .itype { grid-template-columns: 1fr; }
  .iform__row { grid-template-columns: 1fr; }
  .place { grid-template-columns: 1fr; gap: 20px; }
  .place__map iframe { height: 300px; }
}

/* ============================================================
   ABOUT 페이지 (2026-08-17) — 비전 · 미션 · 문제 정의 · 증명(특허/시험) · 회사 개요
   ============================================================ */

.pillar {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 40px;
  padding: var(--sec-y) var(--gutter) 0;
  max-width: var(--oc-maxw);
  margin: 0 auto;
  width: 100%;
}
.pillar--vision { padding-top: 130px; }
.pillar__label { display: flex; flex-direction: column; gap: 12px; }
.pillar__title {
  font-family: var(--oc-font-display);
  font-size: var(--fs-section-title);
  font-weight: 700;
  margin: 0;
}
.pillar__body { display: flex; flex-direction: column; gap: 20px; padding-top: 6px; }
.pillar__lead {
  font-family: var(--oc-font-display);
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 600;
  line-height: 1.45;
  margin: 0;
}
.pillar__desc { font-size: var(--fs-lead); line-height: 1.8; color: var(--oc-ink-muted); margin: 0; }
.pillar__desc strong { color: var(--oc-ink); font-weight: 600; }

.mission { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--oc-line); }
.mission li {
  display: flex;
  gap: 24px;
  align-items: baseline;
  padding: 22px 4px;
  border-bottom: 1px solid var(--oc-line);
}
.mission__num {
  font-family: var(--oc-font-en);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--oc-green);
  flex: none;
  width: 34px;
}
.mission li p { margin: 0; font-size: 21px; line-height: 1.7; }

/* ----- 문제 정의 (잉크 배경) ----- */
.problem {
  background: var(--oc-ink);
  color: #fff;
  margin-top: var(--sec-y);
  padding: 120px var(--gutter);
}
.problem__inner { max-width: var(--oc-maxw); margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.problem__title {
  font-family: var(--oc-font-display);
  font-size: var(--fs-statement);
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 30px;
}
.problem__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.problem__item {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 26px;
  border-top: 2px solid var(--oc-yellow);
}
.problem__num {
  font-family: var(--oc-font-en);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--oc-yellow);
}
.problem__item h3 {
  font-family: var(--oc-font-display);
  font-size: 28px;
  font-weight: 700;
  margin: 0;
  color: #fff;
}
.problem__item p {
  font-size: var(--fs-body);
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}
.problem__item strong { color: var(--oc-yellow); font-weight: 600; }

/* ----- 증명 (특허 · 시험 인증) ----- */
.proof {
  padding: var(--sec-y) var(--gutter) 0;
  max-width: var(--oc-maxw);
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.proof__head { display: flex; flex-direction: column; gap: 14px; }
.proof__title {
  font-family: var(--oc-font-display);
  font-size: var(--fs-section-title);
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}
.proof__block { display: flex; flex-direction: column; gap: 22px; }
.proof__blockhead { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.proof__subtitle {
  font-family: var(--oc-font-display);
  font-size: 30px;
  font-weight: 700;
  margin: 0;
}
.proof__meta { font-size: 17px; color: var(--oc-ink-muted); margin: 0; }
.proof__note { font-size: 18px; color: var(--oc-ink-faint); margin: 0; }

.patent { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--oc-line); }
.patent li {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  padding: 22px 4px;
  border-bottom: 1px solid var(--oc-line);
}
.patent__tag {
  flex: none;
  background: var(--oc-green);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 5px 14px;
  border-radius: 9999px;
}
.patent__tag--pending { background: var(--oc-surface); color: var(--oc-ink-muted); border: 1px solid var(--oc-hairline); }
.patent h4 { font-family: var(--oc-font-display); font-size: 23px; font-weight: 600; margin: 0 0 4px; }
.patent p { margin: 0; }

.cert { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cert__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--oc-surface);
  border: 1px solid var(--oc-hairline);
  border-radius: 16px;
  padding: 30px 26px;
}
.cert__value {
  font-family: var(--oc-font-display);
  font-size: clamp(28px, 2.6vw, 38px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--oc-green);
}
.cert__name { font-size: 18px; font-weight: 600; }
.cert__org { font-size: 18px; color: var(--oc-ink-muted); line-height: 1.5; }

/* 회사 개요 여백 (기존 .facts 재사용) */
.facts {
  max-width: var(--oc-maxw);
  margin: 0 auto;
  width: 100%;
}

@media (max-width: 960px) {
  .pillar { grid-template-columns: 1fr; gap: 22px; padding-top: 80px; }
  .problem { margin-top: 90px; padding: 90px var(--gutter); }
  .problem__grid { grid-template-columns: 1fr; gap: 34px; }
  .proof { padding-top: 90px; gap: 44px; }
  .cert { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .cert { grid-template-columns: 1fr; }
  .patent li { flex-direction: column; gap: 10px; }
  .patent__tag { align-self: flex-start; }
}

/* 버튼 (홈 style.css와 동일 정의 — 서브페이지에서도 필요) */
.btn {
  display: inline-block;
  font-size: 18px;
  font-weight: 500;
  padding: 14px 32px;
  border-radius: 9999px;
}
.btn--primary { background: var(--oc-green); color: #fff; }
.btn--primary:hover { background: var(--oc-green-active); color: #fff; }
.iform__submit { font-size: 17px; padding: 16px 40px; }

/* ============================================================
   마퀴 + 푸터 — 홈(css/style.css)과 동일 (2026-08-17 사용자: 서브페이지 하단 통일)
   ============================================================ */

.marquee { overflow: hidden; padding: 34px 0; }
.marquee__track {
  display: flex;
  white-space: nowrap;
  width: max-content;
  animation: marquee 28s linear infinite;
}
.marquee__track span {
  font-family: var(--oc-font-en);
  font-size: clamp(64px, 9vw, 140px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--oc-green);
}
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

.footer {
  margin: 0 24px 24px;
  background: var(--oc-ink);
  border-radius: 32px;
  padding: 90px 56px 44px;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.footer__title {
  /* 2026-08-21: 한국어가 낱말 중간에서 갈라졌다 — "바이오매스가 산 / 업 표준이".
     CSS 기본 word-break:normal은 한글을 **아무 글자 사이에서나** 끊는다.
     한국어에는 keep-all이 맞다. 중국어·일본어는 띄어쓰기가 없어 keep-all을
     걸면 오히려 넘치므로, build.py가 그 두 언어에서 normal로 되돌린다. */
  word-break: keep-all;
  font-family: var(--oc-font-display);
  font-size: clamp(30px, 3.1vw, 44px);   /* 260817 새 카피 길이에 맞춰 조정 */
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  margin: 0;
  max-width: 900px;
}
.footer__title em { font-style: normal; color: var(--oc-yellow); }
.footer__cta {
  flex: none;
  /* 2026-08-17 사용자: 헤더 "문의하기 ↗"와 같은 스타일로 통일 (초록 필 → 투명+흰 테두리) */
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  padding: 11px 26px;
  border-radius: 9999px;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.footer__cta:hover {
  background: var(--oc-yellow);
  border-color: var(--oc-yellow);
  color: var(--oc-ink);
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.4fr;
  gap: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 48px;
}
.footer__brand { display: flex; flex-direction: column; gap: 20px; }
.footer__logo { height: 30px; align-self: flex-start; filter: invert(1) brightness(1.4); }
.footer__tagline {
  font-family: var(--oc-font-en);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--oc-ink-faint);
  margin: 0;
  font-size: 18px;
}
.footer__col { display: flex; flex-direction: column; gap: 0; }
.footer__col-title {
  font-family: var(--oc-font-en);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--oc-yellow);
  margin-bottom: 6px;
}
.footer__col a { color: rgba(255, 255, 255, 0.85); font-size: 17px; line-height: 1.7; }
.footer__col a:hover { color: var(--oc-yellow); }
.footer__col p { color: rgba(255, 255, 255, 0.75); font-size: 17px; line-height: 1.7; margin: 0; }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 26px;
  flex-wrap: wrap;
  gap: 16px;
}
.footer__copy { font-size: 17px; color: var(--oc-ink-faint); }
.footer__lang {
  font-family: var(--oc-font-en);
  font-size: 16px;
  letter-spacing: 1px;
  color: var(--oc-ink-faint);
}

@media (max-width: 960px) {
  /* 2026-08-21 사용자: 푸터 첫 절 "바이오매스가 산업 표준이 되어"를 한 줄에.
     마크업에는 그 자리에 <br>이 이미 있는데, 30px에서 이 절은 363px가 필요한 반면
     모바일 상자는 240~334px뿐이라 앞줄이 먼저 접혔다.
     → 여백을 조여 상자를 넓히고, 글자를 화면 폭에 비례시켜 항상 들어가게 한다. */
  .footer { margin: 0 10px 10px; padding: 56px 20px 30px; }
  .footer__title { font-size: clamp(20px, 6.7vw, 30px); }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================================
   하위 페이지 공통 (about·tech·product·contact) — 복구·정리 2026-08-17
   ============================================================ */

.page-hero {
  position: relative;
  background: var(--oc-ink);
  color: #fff;
  min-height: 52svh;               /* 260817 사용자: 고동색 영역 절반으로 */
  padding: 170px var(--gutter) 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  overflow: hidden;
}
.page-hero__title {
  font-family: var(--oc-font-display);
  font-size: clamp(40px, 5.6vw, 80px);
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
  max-width: 1000px;
}
.page-hero__lead {
  font-size: clamp(18px, 1.7vw, 23px);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
  /* 2026-08-17: 760px 상자에 영문 리드는 942px가 필요해
     'surface-/treatment industry.'로 갈라졌다. ko 728 · zh 575 · ja 779px라 영향 없다. */
  max-width: 960px;
}
.page-hero__circle {
  position: absolute;
  right: -14vw;
  top: -12vw;
  width: 52vw;
  height: 52vw;
  border-radius: 50%;
  border: 1px solid rgba(213, 254, 83, 0.25);
  pointer-events: none;
}
@media (max-width: 600px) {
  .page-hero { min-height: 380px; padding-top: 140px; }
}

/* 페이지용 정적 스테이트먼트 */
.statement-static { display: flex; justify-content: center; padding: 130px var(--gutter); }
.statement-static p {
  font-family: var(--oc-font-display);
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.25px;
  max-width: 900px;
  margin: 0;
  text-align: center;
  text-wrap: pretty;
}

/* 회사 개요 등 룰드 행 */
.facts {
  padding: 110px var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 44px;
  max-width: var(--oc-maxw);
  margin: 0 auto;
  width: 100%;
}
.facts__title {
  font-family: var(--oc-font-display);
  font-size: var(--fs-section-title);
  font-weight: 700;
  margin: 0;
}
.facts__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--oc-line); }
.facts__list li {
  display: flex;
  gap: 32px;
  align-items: baseline;
  padding: 24px 8px;
  border-bottom: 1px solid var(--oc-line);
}
.facts__key {
  flex: none;
  width: 180px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--oc-green);
}
.facts__val { font-size: 19px; margin: 0; line-height: 1.6; }

/* 제품 스펙 (product.html) */
.spec {
  padding: 0 var(--gutter) 120px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: var(--oc-maxw);
  margin: 0 auto;
  width: 100%;
}
.spec__head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.spec__num {
  font-family: var(--oc-font-en);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--oc-green);
}
.spec__title {
  font-family: var(--oc-font-display);
  font-size: var(--fs-section-title);
  font-weight: 700;
  margin: 0;
}
.spec__desc { font-size: var(--fs-lead); line-height: 1.7; color: var(--oc-ink-muted); margin: 0; max-width: 820px; }
/* 2026-08-17: max-height는 커버 크롭이 아니라 '위에서 잘라내기'라 사진 중앙이 안 보였다.
   고정 높이를 줘야 img의 height:100%가 풀리고 object-fit:cover가 중앙 기준으로 작동한다. */
.spec__media { border-radius: 16px; overflow: hidden; height: 380px; }
.spec__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
@media (max-width: 760px) { .spec__media { height: 260px; } }
.spec__table-wrap {
  background: var(--oc-surface);
  border: 1px solid var(--oc-hairline);
  border-radius: 16px;
  overflow-x: auto;
}
.spec table { width: 100%; border-collapse: collapse; font-size: 19px; min-width: 640px; }
.spec th {
  text-align: left;
  font-family: var(--oc-font-en);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--oc-green);
  padding: 18px 24px;
  border-bottom: 1px solid var(--oc-hairline);
  white-space: nowrap;
}
.spec td { padding: 18px 24px; border-bottom: 1px solid var(--oc-hairline); vertical-align: top; line-height: 1.6; }
.spec tr:last-child td { border-bottom: none; }
.spec td strong { font-family: var(--oc-font-en); font-weight: 600; }

/* 콘텐츠 수령 대기 자리표시 */
.placeholder-card {
  margin: 0 var(--gutter) 120px;
  border: 1px dashed var(--oc-gray);
  border-radius: 16px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: var(--oc-maxw);
}
.placeholder-card p { margin: 0; color: var(--oc-ink-muted); font-size: 17px; }
.placeholder-label { font-family: monospace; font-size: 17px; color: var(--oc-placeholder); }

@media (max-width: 960px) {
  .facts__key { width: 120px; }
}

/* 특허 등록번호 행 (260817) */
.patent__no { margin: 0; font-size: 18px; color: var(--oc-ink-muted); }

/* 비전 — 영문 태그라인 병기 (260817) */
.pillar__en {
  font-family: var(--oc-font-en);
  font-size: clamp(17px, 1.3vw, 18px);   /* 17px 미만 금지 — 260817 */
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--oc-green);
  margin: -8px 0 0;
}

/* 회사 개요 — 글자 확대 + 키/값 동일 크기(색만 구분) 260817 */
.facts__key {
  width: 220px;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--oc-green);
}
.facts__val { font-size: 21px; color: var(--oc-ink); }
.facts__val .placeholder-label { font-size: 21px; font-family: var(--oc-font-body); }
.facts__list li { padding: 26px 8px; }
@media (max-width: 960px) {
  .facts__key { width: 150px; font-size: 18px; }
  .facts__val, .facts__val .placeholder-label { font-size: 18px; }
}

/* ============================================================
   특허증·인증서 이미지 갤러리 (260817)
   ============================================================ */

.cdoc__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.cdoc { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.cdoc__thumb {
  display: block;
  background: var(--oc-surface);
  border: 1px solid var(--oc-hairline);
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 1 / 1.414;          /* A4 비율 */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cdoc__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
a.cdoc__thumb:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(33, 24, 21, 0.14); }
.cdoc__thumb--wide { aspect-ratio: 1.294 / 1; }
.cdoc__thumb--wide img { object-fit: contain; object-position: center; background: var(--oc-surface); }
.cdoc__thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  aspect-ratio: 1.294 / 1;
  border-style: dashed;
  border-color: var(--oc-gray);
  color: var(--oc-ink-muted);
  font-size: 18px;
  line-height: 1.6;
}
.cdoc__title {
  font-family: var(--oc-font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.45;
  margin: 0;
}
.cdoc__meta { font-size: 17px; color: var(--oc-ink-muted); margin: 0; }

@media (max-width: 1200px) { .cdoc__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .cdoc__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 520px)  { .cdoc__grid { grid-template-columns: 1fr; } }

/* 특허 썸네일은 클릭 불가 (사용자 260817) */
div.cdoc__thumb { cursor: default; }
div.cdoc__thumb:hover { transform: none; box-shadow: none; }

/* ============================================================
   TECH — 소재 탭 + 도해 (260817)
   ============================================================ */

.mtech {
  padding: var(--sec-y) var(--gutter) 40px;
  max-width: var(--oc-maxw);
  margin: 0 auto;
  width: 100%;
}
.mtech__nav {
  display: flex;
  gap: 12px;
  border-bottom: 1px solid var(--oc-line);
  padding-bottom: 0;
  margin-bottom: 60px;
  flex-wrap: wrap;
}
.mtech__nav button {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 14px 26px 18px 4px;
  cursor: pointer;
  font-family: var(--oc-font-body);
  transition: border-color 0.25s ease;
}
.mtech__en {
  font-family: var(--oc-font-en);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--oc-ink-faint);
  transition: color 0.25s ease;
}
.mtech__ko { font-size: 18px; color: var(--oc-ink-faint); transition: color 0.25s ease; }
.mtech__nav button[aria-selected="true"] { border-bottom-color: var(--oc-green); }
.mtech__nav button[aria-selected="true"] .mtech__en { color: var(--oc-green); }
.mtech__nav button[aria-selected="true"] .mtech__ko { color: var(--oc-ink); }
.mtech__nav button:hover .mtech__en { color: var(--oc-ink); }

.mtech__panel { display: none; }
.mtech__panel.is-on { display: block; }

.mblock { margin-bottom: 96px; }
.mblock__head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 20px; }
.mblock__no {
  font-family: var(--oc-font-en);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--oc-green);
}
.mblock__title {
  font-family: var(--oc-font-display);
  font-size: var(--fs-section-title);
  font-weight: 700;
  margin: 0;
  line-height: 1.25;
}
.mblock__lead {
  font-size: var(--fs-lead);
  line-height: 1.8;
  color: var(--oc-ink-muted);
  margin: 0 0 34px;
  max-width: 900px;
}
.mblock__lead strong { color: var(--oc-ink); font-weight: 600; }

.mfig {
  background: var(--oc-surface);
  border: 1px solid var(--oc-hairline);
  border-radius: 20px;
  padding: 36px;
}
.mfig svg { width: 100%; height: auto; display: block; }
.mfig__caps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--oc-line);
}
.mfig__caps > div { display: flex; flex-direction: column; gap: 8px; }
.mfig__no {
  font-family: var(--oc-font-en);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--oc-green);
}
.mfig__caps b { font-family: var(--oc-font-display); font-size: 21px; font-weight: 700; }
.mfig__caps p { margin: 0; font-size: 19px; line-height: 1.7; color: var(--oc-ink-muted); }
.mfig__note { margin: 22px 0 0; font-size: 17px; color: var(--oc-ink-faint); }
/* 제품 페이지 제품명 (2026-08-17: 홈과 같은 3종 축) */
.spec__pname {
  font-family: var(--oc-font-en);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 1.6px;
  color: var(--oc-green);
}

/* ===== 트랙션식 좌우 대조 단면 패널 (2026-08-17) ===== */
.tdfig {
  border: 2px solid var(--oc-ink);
  border-radius: 18px;
  overflow: hidden;
  background: var(--oc-surface);
}
.tdfig__panels { display: grid; grid-template-columns: 1fr 1fr; }
.tdfig__panel { padding: 24px 24px 20px; }
.tdfig__panel + .tdfig__panel { border-left: 2px solid var(--oc-ink); }
.tdfig__ptitle {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--oc-font-display);
  font-size: 22px; font-weight: 700;
}
.tdfig__sq { width: 15px; height: 15px; border: 2px solid var(--oc-ink); }
.tdfig__sq--ink { background: var(--oc-ink); }
.tdfig__sq--y { background: var(--oc-yellow); }
.tdfig__psub {
  font-family: var(--oc-font-en);
  font-size: 17px; font-weight: 500; letter-spacing: 1.6px;
  color: var(--oc-ink-faint);
  margin: 6px 0 18px 25px;
}
.tdfig__psub--y { color: var(--oc-green); }
.tdfig__panel svg { width: 100%; height: auto; display: block; }
.tdsvg__lab {
  font-family: var(--oc-font-en); font-size: 17px; font-weight: 600;
  letter-spacing: 1.5px; fill: var(--oc-ink); opacity: .6;
}
.tdsvg__no {
  font-family: var(--oc-font-en); font-size: 17px; font-weight: 600;
  letter-spacing: 1px; fill: #ffffff; text-anchor: middle;
}
.tdfig__legend {
  display: flex; flex-wrap: wrap; gap: 12px 30px;
  margin: 0; padding: 18px 24px;
  list-style: none;
  border-top: 2px solid var(--oc-ink);
  background: var(--oc-bg);
}
.tdfig__legend li {
  display: flex; align-items: center; gap: 9px;
  font-size: 17px; color: var(--oc-ink);
}
.tdnotes { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 28px; }
.tdnotes__col { padding: 0 28px 0 0; }
.tdnotes__col + .tdnotes__col { padding: 0 0 0 28px; border-left: 1px solid var(--oc-line); }
.tdnotes__label {
  display: block;
  font-family: var(--oc-font-en);
  font-size: 17px; font-weight: 600; letter-spacing: 1.6px;
  color: var(--oc-ink-faint);
  margin-bottom: 20px;
}
.tdnotes__label--y { color: var(--oc-green); }
.tdnote { display: flex; gap: 16px; margin-bottom: 24px; }
.tdnote__no {
  flex: none;
  width: 32px; height: 26px; border-radius: 3px;
  background: var(--oc-ink); color: #fff;
  font-family: var(--oc-font-en); font-size: 17px; font-weight: 600;
  letter-spacing: 1px; text-align: center; line-height: 26px;
}
.tdnote__no--y { background: var(--oc-green); }
.tdnote b { display: block; font-family: var(--oc-font-display); font-size: 22px; font-weight: 700; margin-bottom: 7px; }
.tdnote p { margin: 0; font-size: var(--fs-body); line-height: 1.72; color: var(--oc-ink-muted); word-break: keep-all; }
.tdnote em { font-style: normal; background-image: linear-gradient(transparent 62%, var(--oc-yellow) 62%); }
@media (max-width: 900px) {
  .tdfig__panels { grid-template-columns: 1fr; }
  .tdfig__panel + .tdfig__panel { border-left: 0; border-top: 2px solid var(--oc-ink); }
  .tdnotes { grid-template-columns: 1fr; gap: 8px; }
  .tdnotes__col { padding: 0; }
  .tdnotes__col + .tdnotes__col { padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--oc-line); }
}

/* 좌우 대조 도해용 2단 캡션 (2026-08-17) */
.mfig__caps--2 { grid-template-columns: repeat(2, 1fr); }
.mfig__no--ko { font-family: var(--oc-font-display); font-size: 19px; letter-spacing: 0; }
.mblock__sub {
  font-family: var(--oc-font-display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.3;
  margin: 60px 0 0;
}
@media (max-width: 860px) { .mfig__caps--2 { grid-template-columns: 1fr; } }

.mlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--oc-line); }
.mlist li { display: flex; gap: 32px; align-items: baseline; padding: 24px 6px; border-bottom: 1px solid var(--oc-line); }
.mlist__k {
  /* 2026-08-17: width 90px 고정이라 영문 'Equipment'(124px)가 넘쳐 본문과 붙었다.
     라벨은 언어마다 길이가 달라진다 — 최소 폭만 잡고 내용에 맞춰 늘어나게 둔다. */
  flex: 0 0 auto;
  min-width: 90px;
  max-width: 200px;
  font-family: var(--oc-font-display);
  font-size: 21px;
  font-weight: 700;
  color: var(--oc-green);
}
.mlist p { margin: 0; font-size: 21px; line-height: 1.75; }

.mspec { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; }
.mspec > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--oc-line);
}
.mspec b { font-size: 21px; font-weight: 600; }
.mspec span { font-family: var(--oc-font-en); font-size: 18px; color: var(--oc-ink-muted); white-space: nowrap; }

@media (max-width: 860px) {
  .mfig { padding: 22px; }
  .mfig__caps { grid-template-columns: 1fr; gap: 22px; }
  .mspec { grid-template-columns: 1fr; }
  .mlist li { flex-direction: column; gap: 8px; }
  .mlist__k { width: auto; }
  .mblock { margin-bottom: 64px; }
}

/* ===== 언어 전환기 (2026-08-17) — KO / EN / 中文 / 日文 =====
   국기 + 코드를 함께 둔다. 국기만 두면 "국기 = 언어"라는 오해가 생기고,
   아이콘이 안 보이는 환경에서도 뜻이 전달되어야 한다. */
.lang-sw {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--oc-font-en);
  font-size: 18px;   /* 17px 미만 금지 — 260817 */
  font-weight: 500;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.lang-sw a,
.lang-sw .is-on { display: inline-flex; align-items: center; gap: 6px; }
.lang-sw svg { display: block; flex: 0 0 auto; border-radius: 1px; }
.lang-sw i { font-style: normal; color: rgba(255, 255, 255, 0.45); }
.lang-sw a { color: rgba(255, 255, 255, 0.62); }
.lang-sw a:hover { color: #fff; }
.lang-sw .is-on { color: var(--oc-yellow); font-weight: 600; }
/* 좁은 화면에서는 헤더 한 줄을 넘긴다 — 푸터 전환기만 남긴다 */
@media (max-width: 1080px) { .lang-sw--head { display: none; } }
.lang-sw--head { margin-right: 4px; }

/* 미공개 고지 블록 (2026-08-17) — "자료 대기"가 아니라 "일부러 안 밝힌다"로 읽혀야 한다.
   그래서 점선 플레이스홀더가 아니라 실선 박스로 둔다. */
.mnote {
  border: 2px solid var(--oc-ink);
  border-radius: 16px;
  background: var(--oc-surface);
  padding: 30px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mnote__label {
  align-self: flex-start;
  background: var(--oc-ink);
  color: #fff;
  font-family: var(--oc-font-body);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 8px 18px;
  border-radius: 9999px;
}
.mnote p { margin: 0; font-size: 20px; line-height: 1.7; color: var(--oc-ink-muted); }
.mnote a { color: var(--oc-green); text-decoration: underline; }

/* ===== 모바일 내비 (2026-08-17 신설) =====
   문제: 1080px 이하에서 .header__nav가 display:none인데 대체 UI가 없어
        ABOUT·TECH·PRODUCT에 도달할 수 없었다(푸터까지 내려가야 했다).
   해법: 햄버거 + 전체화면 메뉴. 그리고 **모바일에서만 헤더를 고정**한다 —
        헤더가 position:absolute라 스크롤하면 사라져, 햄버거만 넣으면
        맨 위로 되돌아가야 눌리는 반쪽짜리가 된다.
   ⚠️ 이 블록은 style.css(홈)와 pages.css(서브)에 **같은 값으로** 들어간다.
      한쪽만 고치면 홈과 서브의 헤더가 어긋난다. */

.navtoggle { display: none; }
.mobilenav { display: none; }

@media (max-width: 1080px) {
  /* 헤더 고정 — 스크롤해도 메뉴에 닿을 수 있게 */
  .header {
    position: fixed;
    /* padding은 애니메이션하지 않는다 — 레이아웃을 매 프레임 다시 계산해 흔들린다.
       대신 모바일 헤더 높이를 처음부터 고정해 두고 배경만 바뀌게 한다. */
    padding-top: 15px;
    padding-bottom: 15px;
    transition: background-color 0.25s ease, backdrop-filter 0.25s ease;
  }
  /* 스크롤하면 잉크 배경을 깔아 흰 글자를 읽히게 한다.
     색을 뒤집지 않는 이유: 로고·메뉴가 전부 흰색 반전 상태라 배경만 주면 된다 */
  .header.is-stuck {
    background: rgba(33, 24, 21, 0.94);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
  }

  .header__nav { display: none; }   /* 햄버거가 대신한다 */

  .navtoggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 48px;               /* 터치 타깃 48px — 손가락 기준 최소치 */
    height: 48px;
    padding: 0 9px;
    margin-left: 4px;
    background: none;
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .navtoggle span {
    display: block;
    height: 2px;
    width: 100%;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.28s ease, opacity 0.18s ease;
  }
  /* 열리면 X — 가운데 획을 지우고 위아래를 교차시킨다 */
  .navtoggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .navtoggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .navtoggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* 좁은 화면에서는 헤더의 "문의하기"를 감춘다 — 메뉴 안에 CONTACT가 있다 */
  @media (max-width: 560px) {
    .header__cta { display: none; }
  }

  .mobilenav {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 19;                /* 헤더(20)보다 아래 — 햄버거가 위에 남아야 닫을 수 있다 */
    flex-direction: column;
    /* 2026-08-21: justify-content:center였다. 내용이 화면 한가운데 떠서
       헤더 아래와 화면 아래에 각각 ~150px씩 빈 공간이 생겼다.
       메뉴는 위에서 시작하고 언어 전환기는 바닥으로 보낸다(아래 margin-top:auto).
       읽는 순서(어디로 갈까 → 무슨 언어로)와 시선의 순서가 같아진다. */
    justify-content: flex-start;
    gap: 0;
    padding: 104px clamp(24px, 7vw, 56px) 40px;
    background: var(--oc-ink);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s;
    overflow-y: auto;
  }
  .mobilenav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .mobilenav__links {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .mobilenav__links a {
    font-family: var(--oc-font-en);
    /* 2026-08-17: 35px는 너무 컸다(사용자 지적) → 한 단계 내린다.
       화면을 꽉 채우지 않으면서도 손가락 타깃은 넉넉하다(패딩 포함 약 50px). */
    font-size: clamp(27px, 7vw, 40px);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #fff;
    padding: 9px 0;
  }
  .mobilenav__links a:hover,
  .mobilenav__links a:focus-visible { color: var(--oc-yellow); }

  /* 문의하기 — 메뉴 안의 전환 버튼(사용자 260817 "문의하기도 없다").
     헤더 CTA는 좁은 화면에서 감추므로, 모바일에서는 이 버튼이 유일한 문의 경로다.
     거대 메뉴 링크 스타일을 물려받지 않도록 크기·색을 따로 준다. */
  /* ⚠️ 선택자를 .mobilenav__links a.mobilenav__cta 로 쓴다.
     .mobilenav__cta 하나만 쓰면 위의 .mobilenav__links a (명시도 0,2,1)에 져서
     글자가 21px가 아니라 35px로 나왔고, 21px 기준으로 잡은 알약 여백을 넘쳤다.
     — 사용자 지적 "문의하기는 글자가 전체 외곽선을 넘친다" (2026-08-17) */
  .mobilenav__links a.mobilenav__cta {
    align-self: flex-start;
    margin-top: 20px;
    padding: 13px 28px;
    border-radius: 9999px;
    background: var(--oc-yellow);
    color: var(--oc-ink);
    font-family: var(--oc-font-body);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.2px;
    white-space: nowrap;
  }
  .mobilenav__links a.mobilenav__cta:hover,
  .mobilenav__links a.mobilenav__cta:focus-visible { background: #fff; color: var(--oc-ink); }

  .lang-sw--mob {
    margin-top: auto;           /* 바닥에 앉힌다 */
    /* 4개 언어가 한 줄에 들어가야 한다(사용자 지적 — 두 줄이었다).
       390px 화면의 안쪽 폭이 약 336px이라 20px·gap 12px로는 넘쳤다.
       17px는 글자 크기 하한이다(CLAUDE.md §4-9) — 더 줄이지 말고 여백·국기를 줄인다. */
    font-size: 17px;
    gap: 5px;
    flex-wrap: nowrap;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }
  .lang-sw--mob svg { width: 18px; height: 12px; }
  .lang-sw--mob a, .lang-sw--mob .is-on { padding: 10px 1px; }


  /* 포커스 링을 브랜드 색으로. 지우지는 않는다 — 키보드 사용자가 위치를 잃는다 */
  .navtoggle:focus-visible,
  .mobilenav__links a:focus-visible {
    outline: 2px solid var(--oc-yellow);
    outline-offset: 3px;
    border-radius: 4px;
  }
  /* 헤더가 고정이라 해시로 이동하면 대상이 헤더 밑에 깔린다.
     홈의 소재 카드가 tech.html#mat-rosin 으로 직행하므로 반드시 필요하다. */
  [id^="mat-"], .mtech, section[id] {
    scroll-margin-top: 88px;
  }


  /* 푸터 언어 전환기 — 320px 화면에서 325px라 **문서 전체에 가로 스크롤**을 만들었다.
     (레이아웃 뷰포트가 320→365로 늘어나 육안·기존 검증으로는 안 잡혔다. 2026-08-17)
     메뉴 안 전환기와 달리 푸터는 세로로 접혀도 되므로 wrap을 허용해 어떤 폭에서도 안전하게 둔다. */
  .lang-sw--foot {
    flex-wrap: wrap;
    row-gap: 12px;
    gap: 6px;
    font-size: 17px;
  }
  .lang-sw--foot svg { width: 18px; height: 12px; }


  /* ── 현재 페이지 표시 ──
     지금까지 메뉴가 "내가 어디에 있는지"를 말해 주지 않았다. 표시 방법은 새로 만들지 않고
     언어 전환기가 이미 쓰는 규칙(현재 항목 = 옐로우)을 그대로 따른다. */
  .mobilenav__links a[aria-current="page"] { color: var(--oc-yellow); }

  /* ── 열릴 때 항목이 차례로 들어온다 ──
     오버레이 전체가 한 번에 페이드되면 "창이 떴다"로 끝난다.
     한 박자씩 밀어 넣으면 목록을 읽는 순서가 생긴다. 하나의 연출만 둔다. */
  .mobilenav__links a,
  .lang-sw--mob {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .mobilenav.is-open .mobilenav__links a,
  .mobilenav.is-open .lang-sw--mob { opacity: 1; transform: none; }
  .mobilenav.is-open .mobilenav__links a:nth-child(1) { transition-delay: 0.05s; }
  .mobilenav.is-open .mobilenav__links a:nth-child(2) { transition-delay: 0.10s; }
  .mobilenav.is-open .mobilenav__links a:nth-child(3) { transition-delay: 0.15s; }
  .mobilenav.is-open .mobilenav__links a:nth-child(4) { transition-delay: 0.20s; }
  .mobilenav.is-open .mobilenav__links a:nth-child(5) { transition-delay: 0.27s; }
  .mobilenav.is-open .lang-sw--mob { transition-delay: 0.33s; }

  /* 고정 헤더가 본문 위로 지나갈 때 경계가 없어 글자가 배경에 붙어 보였다 */
  .header.is-stuck { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }

  /* 메뉴가 열린 동안 뒤 본문 스크롤을 막는다 */
  body.is-navopen { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .mobilenav, .navtoggle span, .header { transition: none; }
}

/* [hidden]은 UA 스타일이라 .mobilenav{display:flex}에 진다 — 명시적으로 이긴다.
   JS가 뜨기 전(또는 JS 실패 시) 오버레이가 화면을 덮는 것을 막는 안전장치. */
.mobilenav[hidden] { display: none; }

/* ===== 모바일: 넓은 표와 소재 탭 (2026-08-17) =====
   모바일에서 띄워 보고 찾은 두 가지를 고친다. */

/* ① 넓은 표 — 가로로 밀리는데 밀 수 있다는 표시가 없어 "잘린 버그"처럼 보였다.
   표 폭 640px / 칸 폭 340px. background-attachment의 local·scroll 차이를 이용해
   **더 밀 곳이 남았을 때만** 그림자가 보인다(스크립트 없이 자동으로 사라진다). */
.spec__table-wrap {
  background:
    linear-gradient(to right, var(--oc-surface) 30%, rgba(255, 255, 255, 0)) left center / 44px 100% no-repeat local,
    linear-gradient(to left,  var(--oc-surface) 30%, rgba(255, 255, 255, 0)) right center / 44px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,   rgba(33, 24, 21, 0.30), rgba(33, 24, 21, 0)) left center / 26px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(33, 24, 21, 0.30), rgba(33, 24, 21, 0)) right center / 26px 100% no-repeat scroll,
    var(--oc-surface);
  -webkit-overflow-scrolling: touch;
}

/* ② 소재 탭 — 좁은 화면에서 3개(합 578px)가 342px 칸에 접혀 3줄이 되면서
   "탭"이 아니라 회색 목록처럼 읽혔다. 세로 카드형 선택지로 바꿔
   선택 상태가 한눈에 보이게 한다. 가로 스크롤로 만들지 않은 이유:
   라벨이 2줄(EN + 국문 용도)이라 옆으로 미는 탭바에는 맞지 않는다. */
@media (max-width: 860px) {
  .mtech__nav {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 10px;
    border-bottom: 0;
    margin-bottom: 40px;
  }
  .mtech__nav button {
    width: 100%;
    padding: 16px 18px;
    background: var(--oc-surface);
    border: 1px solid var(--oc-hairline);
    border-left: 4px solid transparent;
    border-radius: 12px;
    transition: border-color 0.25s ease, background-color 0.25s ease;
  }
  .mtech__nav button[aria-selected="true"] {
    border-color: var(--oc-green);
    background: rgba(28, 100, 80, 0.07);
  }
}

/* 좁은 화면에서는 표의 여백·글자를 조여 가로로 미는 거리를 줄인다.
   min-width 640px는 데스크탑 기준이라 342px 화면에서는 거의 두 배를 밀어야 했다.
   글자는 17px 아래로 내리지 않는다(CLAUDE.md §4-9). */
@media (max-width: 560px) {
  .spec table { min-width: 520px; font-size: 17px; }
  .spec th { padding: 14px 14px; font-size: 17px; letter-spacing: 1px; }
  .spec td { padding: 14px 14px; }
}

/* ===== 줄바꿈 다듬기 (2026-08-17) =====
   비한국어에서 제목 마지막 줄에 단어 하나만 남는(고아 단어) 경우가 많았다.
   영문 20건 — "performance" · "materials." · "coating" · "properties." 등.
   한국어는 0건이었다. 카피 길이가 언어마다 달라 생기는 문제라 카피가 아니라 조판으로 잡는다.
   text-wrap: balance = 제목의 줄 길이를 고르게 / pretty = 문단의 마지막 줄 고아 방지.
   지원하지 않는 브라우저는 무시하므로 한국어 조판이 나빠지지 않는다. */
.page-hero__title,
.card__title,
.footer__title,
.problem__title,
.mtech__title,
.inquiry__title,
.places__title,
.tech__title,
.products__title {
  text-wrap: balance;
}
.page-hero__lead,
.card__desc,
.matcard p,
.inquiry__lead,
.mblock__lead,
.spec__desc {
  text-wrap: pretty;
}

/* 클래스가 없는 제목도 포함 — about의 h3 "So we chose to redesign the properties."가
   마지막 줄에 단어 하나만 남겼다. balance는 6줄 이하에만 적용돼 본문에는 영향이 없다. */
h1, h2, h3 { text-wrap: balance; }

/* 제품 페이지의 출시 예정 배지 — style.css(홈)에만 규칙이 있어 여기서는
   스타일 없이 16px 맨 글자로 나왔다. 같은 클래스가 페이지마다 달라 보이면 안 된다.
   위치는 마크업의 인라인 style(position:static)이 정하므로 여기서는 모양만 준다. */
.card__badge {
  display: inline-block;
  background: var(--oc-yellow);
  color: var(--oc-ink);
  font-family: var(--oc-font-en);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 6px 14px;
  border-radius: 9999px;
}

/* 좁은 화면에서 회사 개요 행이 4px 넘쳤다(아이폰 SE 375px).
   라벨 폭이 고정이라 값이 밀려난다 — 세로로 쌓는다. */
@media (max-width: 560px) {
  .facts__list li { flex-direction: column; gap: 6px; padding: 18px 4px; }
  .facts__key { width: auto; }
}

/* 터치 타깃 넓히기 — 언어 전환기(50×23)와 푸터 연락처(120×20)가 손가락에 작다.
   글자 크기는 그대로 두고 여백만 준다. */
@media (max-width: 1080px) {
  .lang-sw a, .lang-sw .is-on { padding: 10px 4px; }
  .footer__col a { display: inline-block; padding: 6px 0; }
}

/* 남은 터치 타깃 — "지도에서 열기"(112×20)와 동의 체크박스(19×19).
   라디오는 카드 전체(label.itype__opt)가 눌리므로 그대로 둔다. */
@media (max-width: 1080px) {
  .place__link { display: inline-block; padding: 10px 0; }
  .icheck input[type="checkbox"] { width: 24px; height: 24px; }
  .icheck { align-items: center; gap: 12px; }
}

/* 움직임 최소화 설정에서는 등장 연출을 끄되, 보이기는 해야 한다 */
@media (prefers-reduced-motion: reduce) {
  .mobilenav__links a,
  .lang-sw--mob { opacity: 1; transform: none; transition: none; }
}

/* ── 브라우저 기본 표면도 브랜드로 ──
   선택 영역·포커스 링은 그리지 않아도 화면에 나온다. 기본값으로 두면
   페이지가 "조립된" 티가 난다. 팔레트에서 색을 준다. */
::selection { background: var(--oc-yellow); color: var(--oc-ink); }

/* ===== 한국어 줄바꿈 규칙 (2026-08-21 전역 적용) =====
   CSS 기본값 word-break:normal 은 한글을 **아무 글자 사이에서나** 끊는다.
   그래서 "바이오매스가 산 / 업 표준이", "제조 / 방법", "라미네이 / 팅" 처럼
   낱말 한가운데가 갈라졌다 — 한국어 5페이지 × 5개 폭에서 192종이 나왔다.
   한국어 조판은 낱말 단위로 끊는 keep-all 이 맞다.

   overflow-wrap:break-word 를 함께 둔다 — keep-all 만 걸면 상자보다 긴 낱말
   (긴 화학명·URL 등)이 통째로 넘친다. 이 한 줄이 그 경우에만 끊어 준다.

   ⚠️ 중국어·일본어는 띄어쓰기가 없어 keep-all 이면 끊을 자리가 사라져 크게 넘친다
      (푸터 제목 실측: zh 80px · ja 197px). build.py 가 그 두 언어에서 되돌린다. */
body {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ── 어두운 바탕에서는 흐린 잉크색을 되돌린다 (2026-08-21) ──
   --oc-ink-faint 는 밝은 배경(#f7f5f0)에서 4.5:1을 넘기려고 어둡게 잡았다.
   그 값을 잉크 배경 위에 그대로 쓰면 반대로 안 보인다.
   커스텀 속성은 상속되므로 **이 한 줄로** 안쪽 전부가 밝은 값을 쓴다. */
.footer, .page-hero, .problem { --oc-ink-faint: var(--oc-ink-faint-on-dark); }

/* ── 이미지 비율 유지 (2026-08-22) ──
   HTML에 width·height 속성을 넣었다(로드 전 자리를 잡아 글이 밀리지 않게).
   그 상태에서 CSS가 폭만 줄이면 높이는 속성값 그대로라 찌그러진다 → height:auto 로 받는다.
   더 구체적인 규칙(.header__brand img 등)이 높이를 정하는 곳은 그대로 이긴다. */
img { height: auto; }

/* ── 내비는 콘텐츠가 아니라 컨트롤이다 (2026-08-22) ──
   메뉴 글자를 잡아끌면 브라우저가 링크 고스트(글자+URL 말풍선)를 띄웠다.
   읽으라고 둔 문장이 아니라 누르라고 둔 항목이므로 끌리지 않게 한다. */
.header__nav a, .header__brand, .header__cta,
.mobilenav__links a, .lang-sw a, .lang-sw .is-on, .navtoggle {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}