/* ============================================================
   오셔너블 홈페이지 — 하이브리드 본선 (홈 전용)
   베이스: 기존 작업본(오셔너블/homepage) 스타일 전체
   입힌 것: 슈퍼프롬프트 히어로 섹션(오버레이 헤더 + 100svh + 마이크로카피) — 맨 아래 블록
   서브페이지(about·tech·product)는 css/pages.css 사용
   브랜드 값의 유일한 원천: CLAUDE.md §2 (여기서는 변수로만 정의)
   ============================================================ */

: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;

  /* ── 타이포·여백 스케일 (2026-08-21) ──
     페이지가 여러 세션에 걸쳐 만들어져 **같은 역할인데 값이 제각각**이었다.
     섹션 제목만 37·42·43·44·46·48·58px 여덟 가지였다(실측).
     역할별로 한 값만 두고 여기서만 고친다. pages.css와 같은 값이어야 한다. */
  --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;
}

@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; }

body {
  margin: 0;
  background: var(--oc-bg);
  font-family: var(--oc-font-body);
  color: var(--oc-ink);
}

a { color: var(--oc-green); text-decoration: none; }
a:hover { color: var(--oc-green-active); }

img { max-width: 100%; }

/* ---------- 공통 요소 ---------- */

.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; }
.btn--ghost {
  background: var(--oc-surface);
  color: var(--oc-ink);
  border: 1px solid var(--oc-hairline);
}
.btn--ghost:hover { color: var(--oc-ink); }

.eyebrow {
  font-family: var(--oc-font-en);
  font-size: 22px; /* 슈퍼프롬프트 이식 §13 (260817): 17px → 22px 확대 */
  font-weight: 600;
  letter-spacing: 2.5px;
  color: var(--oc-green);
}

.placeholder-label {
  font-family: monospace;
  font-size: 17px;
  color: var(--oc-placeholder);
}

/* ---------- 히어로 — 현 사이트 구성 재현 (풀블리드 바다 + 중앙 흰 문장) ---------- */

.hero {
  position: relative;
  min-height: 100svh; /* 슈퍼프롬프트 히어로 이식(260816): 84vh → 풀뷰포트 (오버레이 헤더 대응) */
  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;
}
.hero__symbol {
  /* Notpla식 중앙 소형 로고 — 흰색 반전 */
  height: 44px;
  margin-bottom: 28px;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

/* ----- 효과 B: 블러 등장 (reactbits Blur Text 패턴, 2026-08-10 사용자 채택) ----- */
.js .hero__symbol {
  opacity: 0;
  animation: b-fade 0.8s ease 0.1s forwards;
}
.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;
}
.js .hero__tagline {
  opacity: 0;
  animation: b-fade 1s ease 1.4s forwards;
}
@keyframes b-in {
  to { filter: blur(0); opacity: 1; transform: none; }
}
@keyframes b-fade {
  to { opacity: 0.95; }
}
@media (prefers-reduced-motion: reduce) {
  .js .hero__symbol, .js .hero__tagline { opacity: 1; animation: none; }
  .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__tagline {
  font-family: var(--oc-font-en);
  /* 2026-08-10 사용자 지시: 기존 14px의 2배 — 데스크톱 28px, 좁은 화면은 비례 축소 */
  font-size: clamp(18px, 2.2vw, 28px);
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin: 28px 0 0;
}

/* 2026-08-17 사용자: "가로로 끝까지 들어간다" — 트랙션처럼 콘텐츠 최대 폭을 묶어
   넓은 화면에서 좌우 여백이 생기게 한다. 히어로·마퀴·푸터는 풀블리드 유지. */
.statement,
.tech,
.products,
.ongoing {
  width: 100%;
  max-width: var(--oc-maxw);
  margin-left: auto;
  margin-right: auto;
}

/* ---------- 스테이트먼트 ---------- */

.statement {
  display: flex;
  justify-content: center;
  padding: 140px 56px 120px;
}
.statement p {
  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;
}
/* 스크롤 워드 리빌 — JS가 단어를 .w로 감싼다. no-JS에서는 그냥 잉크색 */
.js .statement .w {
  color: rgba(33, 24, 21, 0.16);
  transition: color 0.3s ease;
}
.js .statement .w.on { color: var(--oc-ink); }
@media (prefers-reduced-motion: reduce) {
  .js .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;
}
.js .marker { background-size: 0% 100%; }
.js .is-visible .marker { background-size: 100% 100%; }

/* ---------- 스크롤 리빌 ---------- */

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

/* ---------- 핵심기술 (WHY/HOW/WHAT 3컷) ---------- */

.tech {
  padding: 0 56px 130px;
  display: flex;
  flex-direction: column;
  gap: 44px;
}
.tech__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tech__title {
  font-family: var(--oc-font-display);
  font-size: var(--fs-section-title);   /* 고정 44px이라 모바일에서 안 줄었다 */
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
}
.tech__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
/* 소재 3종 카드 (2026-08-17: WHY/HOW/WHAT 사진 3컷 → 미니 도해 카드로 교체).
   구 규칙 .tech__item / .tech__tag 는 이 교체로 쓰이지 않아 삭제했다. */
.matcard {
  display: flex;
  flex-direction: column;
  background: var(--oc-surface);
  border: 1px solid var(--oc-hairline);
  border-radius: 16px;
  overflow: hidden;
  color: var(--oc-ink);
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), border-color .3s;
}
.matcard:hover {
  color: var(--oc-ink);
  border-color: var(--oc-ink);
  transform: translateY(-6px);
}
.matcard__fig {
  height: 280px;
  background: var(--oc-bg);
  border-bottom: 1px solid var(--oc-hairline);
  display: flex;
  align-items: center;
  justify-content: center;
}
.matcard__fig svg {
  height: 84%;
  width: auto;
  display: block;
}
.matcard__body {
  padding: 24px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
/* 2026-08-17 사용자: 배지와 제목을 같은 줄에 두고 카드 높이를 줄인다 */
.matcard__top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.matcard__en {
  background: var(--oc-yellow);
  font-family: var(--oc-font-en);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 1.6px;
  padding: 6px 15px;
  border-radius: 9999px;
}
.matcard__ko {
  font-family: var(--oc-font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}
.matcard p {
  font-size: 20px;
  line-height: 1.7;
  color: var(--oc-ink-muted);
  margin: 0;
  word-break: keep-all;
}

/* ---------- 진행 프로젝트 ---------- */

.ongoing {
  padding: 0 56px 130px;
  display: flex;
  flex-direction: column;
  gap: 44px;
}
.ongoing__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ongoing__title {
  font-family: var(--oc-font-display);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
}
.ongoing__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--oc-hairline);
}
.ongoing__list li {
  display: flex;
  align-items: baseline;
  gap: 32px;
  padding: 26px 8px;
  border-bottom: 1px solid var(--oc-hairline);
  transition: background 0.25s ease;
}
.ongoing__list li:hover { background: var(--oc-surface); }
.ongoing__num {
  font-family: var(--oc-font-en);
  font-size: 18px; /* 2026-08-10 사용자: 라벨 확대 */
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--oc-green);
  flex: none;
  width: 40px;
}
.ongoing__list h3 {
  font-family: var(--oc-font-display);
  font-size: 25px;
  font-weight: 600;
  margin: 0 0 6px;
}
.ongoing__list p {
  font-size: 17px;
  color: var(--oc-ink-muted);
  margin: 0;
}
.ongoing__list div { flex: 1; }
.ongoing__tag {
  /* Notpla식 분야 태그 필 */
  align-self: center;
  flex: none;
  background: var(--oc-surface);
  border: 1px solid var(--oc-hairline);
  font-family: var(--oc-font-body);
  font-size: 17px;
  font-weight: 500;
  color: var(--oc-ink-muted);
  padding: 6px 14px;
  border-radius: 9999px;
}

/* ---------- 수치·인증 밴드 ---------- */

.stats {
  margin: 0 56px 130px;
  background: var(--oc-surface);
  border: 1px solid var(--oc-hairline);
  border-radius: 20px;
  padding: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stat__label {
  font-family: var(--oc-font-en);
  font-size: 18px; /* 2026-08-10 사용자: 라벨 확대 */
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--oc-ink-muted);
}
.stat__value {
  font-family: var(--oc-font-display);
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  color: var(--oc-green);
}

/* ---------- 제품 ---------- */

.products {
  padding: 0 56px 120px;
  display: flex;
  flex-direction: column;
  gap: 44px;
}
.products__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
.products__heading {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.products__title {
  font-family: var(--oc-font-display);
  font-size: var(--fs-section-title);   /* 고정 44px이라 모바일에서 안 줄었다 */
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
}
.products__all { font-size: 17px; font-weight: 500; }
.products__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.card {
  background: var(--oc-surface);
  border: 1px solid var(--oc-hairline);
  border-radius: 16px;
  overflow: hidden;
}
.card__media {
  height: 300px;
  background: linear-gradient(160deg, var(--oc-surface-tint-1), var(--oc-surface-tint-2));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.card:hover .card__media img { transform: scale(1.05); }
.card {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(33, 24, 21, 0.1);
}
.card__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--oc-yellow);
  font-family: var(--oc-font-en);
  /* 17px 미만 금지 — 사용자 지시(세 번 지적). 2026-08-17에 16→18 */
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 5px 12px;
  border-radius: 9999px;
  color: var(--oc-ink);
}
.card__body {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* 2026-08-17 사용자: 카드에 제품명 표기 */
.card__pname {
  display: block;
  font-family: var(--oc-font-en);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 1.6px;
  color: var(--oc-green);
  margin-bottom: 6px;
}
.card__title {
  font-family: var(--oc-font-display);
  font-size: 31px;
  font-weight: 600;
  margin: 0;
}
.card__desc {
  font-size: 17px;
  line-height: 1.6;
  color: var(--oc-ink-muted);
  margin: 0;
}

/* ---------- 푸터 ---------- */

.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: 18px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--oc-ink-faint);
  margin: 0;
}
.footer__col {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.footer__col-title {
  font-family: var(--oc-font-en);
  font-size: 18px; /* 2026-08-10 사용자: 라벨 확대 */
  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;   /* CONTACT 문단과 행 높이 일치 (260817) */
}
.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) {
  .hero__inner, .statement, .products, .tech, .ongoing { padding-left: 24px; padding-right: 24px; }
  .tech__grid { grid-template-columns: 1fr; }
  .stats { margin: 0 24px 90px; grid-template-columns: repeat(2, 1fr); padding: 40px; }
  .products__grid { grid-template-columns: 1fr; }
  /* 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; }
  .ongoing__tag { display: none; }
}

@media (max-width: 600px) {
  .hero { min-height: 620px; }
  .stats { grid-template-columns: 1fr; }
  .statement { padding-top: 90px; padding-bottom: 80px; }
}

/* ============================================================
   슈퍼프롬프트 이식 §1 — 히어로 섹션 (2026-08-16 사용자 지정)
   오버레이 헤더(투명, 영상 위) + Scroll to explore 마이크로카피
   ============================================================ */

.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 clamp(24px, 4vw, 56px);
}
.header__brand img {
  height: 34px;
  filter: brightness(0) invert(1);   /* 영상 위 백색 반전 */
}
.header__nav {
  display: flex;
  justify-content: center;
  gap: clamp(28px, 4.4vw, 104px);
  font-family: var(--oc-font-en);
  font-size: 18px;
  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;
  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;
  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);
}

.hero__micro {
  position: absolute;
  top: 92px;
  left: clamp(24px, 4vw, 56px);
  right: clamp(24px, 4vw, 56px);
  display: flex;
  justify-content: flex-end;
  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;
}
.js .hero__micro { opacity: 0; animation: b-fade 1s ease 1.6s forwards; }

@media (max-width: 960px) {
  .header { padding: 18px 24px; }
  .header__nav { gap: 44px; }
}
@media (max-width: 600px) {
  /* 2026-08-17: 햄버거와 같은 1080px로 옮김 — 아래 모바일 내비 블록 참조.
     600px으로 두면 601~1080px에서 데스크탑 메뉴와 햄버거가 함께 보인다. */
  .header__lang { display: none; }
  .hero__micro { top: 78px; font-size: 11px; }
}

/* ============================================================
   슈퍼프롬프트 이식 §12 — OCEANABLE® 마퀴 띠 (2026-08-17 사용자 지정)
   푸터 직전, 그린 대형 타이포가 흘러가는 풀와이드 밴드
   ============================================================ */

.marquee {
  overflow: hidden;
  padding: 34px 0;
}
/* 히어로 직하단 마퀴 (260817): 아래 스테이트먼트의 140px 상단 여백과 균형 */
.marquee--top { padding: 44px 0 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; }
}

/* ============================================================
   슈퍼프롬프트 이식 §1·§2·§3 (2026-08-17 사용자 지정)
   로더 · 커스텀 커서 · 마그네틱 버튼
   ============================================================ */

/* ----- §1 로더: 잉크 배경 + 심볼 + 옐로우 라인, 로드 후 위로 걷힘 ----- */
.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: 26px;
}
.loader__mark {
  height: clamp(110px, 16vh, 170px);   /* 260816 사용자: 크게 */
  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; } }

/* ----- §2 커스텀 커서: 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; }
}
/* §3 마그네틱은 JS transform만 사용 — 추가 CSS 불필요 */

/* ===== 언어 전환기 (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 신설) =====
   문제: 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) =====
   비한국어에서 제목 마지막 줄에 단어 하나만 남는(고아 단어) 경우가 많았다.
   영문 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; }

/* 터치 타깃 넓히기 — pages.css와 같은 값 (헤더·푸터는 두 파일에 중복 정의된다) */
@media (max-width: 1080px) {
  .lang-sw a, .lang-sw .is-on { padding: 10px 4px; }
  .footer__col a { display: inline-block; padding: 6px 0; }
}

/* 움직임 최소화 설정에서는 등장 연출을 끄되, 보이기는 해야 한다 */
@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;
}