/* ============================================================
   공통 스타일 (회사소개 · 제품 페이지)

   모든 규칙은 페이지 루트(.company-page / .product-page) 아래로
   스코프되어 있다. 그누보드 등 외부 페이지에 include해도
   바깥 문서의 스타일을 건드리지 않고, 바깥 스타일의 영향도
   최소화하는 샌드박스 구조다. (CSS 중첩 문법 사용)

   문서 최상위(html/body) 규칙은 단독 실행용 css/standalone.css에
   분리되어 있으며, 임베드(php)에서는 포함하지 않는다.
   ============================================================ */

.company-page,
.product-page {
  /* ── 디자인 토큰 ── */
  --font-sans: 'Wanted Sans Variable', 'Wanted Sans', 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --font-serif: 'Yeongwol', serif;
  --font-sign: 'GwangbokLeeEunSuk', cursive;
  --color-primary: #1565C0;
  --color-primary-hover: #0071e3;
  --color-navy: #0D47A1;
  --color-sky: #3a8afd;
  --color-accent-red: #ff1d25;
  --color-text: #101418;
  --color-text-soft: rgba(16, 20, 24, 0.7);
  --color-text-mute: rgba(16, 20, 24, 0.45);
  --color-text-disabled: rgba(16, 20, 24, 0.375);
  --color-line: rgba(16, 20, 24, 0.1);
  --color-line-strong: rgba(16, 20, 24, 0.22);
  --color-bg: #ffffff;
  --color-bg-soft: #f4f6f8;
  --color-slot-stripe: rgba(16, 20, 24, 0.035);
  --color-ink: #0b1420;
  --color-ink-deep: #060b12;
  --color-ink-black: #04080f;
  --radius-sm: 0.25rem;
  --radius-md: 0.875rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --focus-ring: 0 0 0 0.1875rem rgba(21, 101, 192, 0.28);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --shell: 80rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* 타입 스케일 — 같은 depth는 같은 토큰을 쓴다 */
  --type-title: clamp(2.5rem, 6vw, 5.5rem);            /* 섹션 제목 (section-title / ocean-title) */
  --type-scene-title: clamp(2.75rem, 6.5vw, 6.5rem);   /* 풀블리드 장면 제목 (salt / cook) */
  --type-card-title: clamp(1.5rem, 2.5vw, 2.25rem);    /* 카드·공정 단계 제목 */
  --type-lead: clamp(1.05rem, 1.6vw, 1.35rem);         /* 섹션 도입 문단 */
  --leading-title: 1.08;
  --leading-body: 1.8;

  /* ── 페이지 루트 기본값 ── */
  min-width: 20rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text);
  word-break: keep-all;
  /* 가장자리에 걸치는 장식 요소가 문서 폭을 넓히지 않도록 자체 차단 */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* ── 최소 리셋 (스코프 내부에만 적용) ── */
  & *,
  & *::before,
  & *::after {
    box-sizing: border-box;
  }

  & h1, & h2, & h3, & p, & ol, & figure, & blockquote {
    margin: 0;
  }

  & ol {
    padding: 0;
  }

  & a {
    color: inherit;
  }

  & button {
    font: inherit;
  }

  & :focus-visible {
    outline: .1875rem solid var(--color-primary);
    outline-offset: .1875rem;
  }

  /* ── 공통 유틸 ── */
  .nowrap {
    white-space: nowrap;
  }

  .skip-link {
    position: fixed;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 1000;
    padding: var(--space-3) var(--space-4);
    color: #fff;
    background: var(--color-primary);
    transform: translateY(-200%);
    transition: transform 140ms ease-out;
  }

  .skip-link:focus {
    transform: translateY(0);
  }

  /* ── 사이트 헤더 ── */
  .site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    min-height: 4.5rem;
    padding: 0 clamp(1rem, 4vw, 3rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    background: linear-gradient(to bottom, rgba(4, 8, 15, .7), transparent);
    transition: color 260ms ease, background-color 260ms ease, border-color 260ms ease, backdrop-filter 260ms ease;
  }

  .site-header.is-scrolled {
    color: var(--color-text);
    background: rgba(247, 244, 238, .9);
    border-color: var(--color-line-strong);
    backdrop-filter: blur(1rem) saturate(1.2);
  }

  .site-header--ocean.is-scrolled {
    color: #eefbff;
    background: rgba(3, 21, 31, .86);
    border-color: rgba(69, 199, 232, .18);
  }

  .site-brand {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    font-family: var(--font-serif);
    font-size: 1.2rem;
    text-decoration: none;
  }

  .site-nav {
    display: flex;
    gap: clamp(1rem, 3vw, 2.5rem);
  }

  .site-nav a {
    position: relative;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
  }

  .site-nav a::before {
    content: attr(data-index);
    font-size: .625rem;
    opacity: .45;
  }

  .site-nav a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: .25rem;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 260ms var(--ease-out);
  }

  .site-nav a:hover::after,
  .site-nav a[aria-current='page']::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  .site-nav a:active,
  .text-link:active {
    transform: scale(.98);
  }

  /* ── 스크롤 진행바 ── */
  .scroll-progress {
    position: fixed;
    inset: 0 0 auto;
    z-index: 120;
    width: 100%;
    height: .1875rem;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
  }

  .scroll-progress--ocean {
    background: var(--sea-400);
  }

  /* ── 섹션 골격 ── */
  .section-shell {
    width: min(calc(100% - clamp(2rem, 8vw, 6rem)), var(--shell));
    margin-inline: auto;
  }

  .section-pad {
    padding-block: clamp(6rem, 12vw, 10rem);
  }

  .section-index {
    margin-bottom: var(--space-10);
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--color-primary);
  }

  .section-index--ocean {
    color: var(--sea-650);
  }

  .section-index--light {
    color: rgba(255, 255, 255, .55);
  }

  .section-title,
  .ocean-title {
    font-family: var(--font-serif);
    font-size: var(--type-title);
    font-weight: 400;
    line-height: var(--leading-title);
    letter-spacing: -.035em;
  }

  .lead {
    font-size: var(--type-lead);
    line-height: var(--leading-body);
  }

  /* 제목 → 본문, 도입 문단 사이 간격 통일 */
  .section-title+p,
  .section-title+.lead,
  .ocean-title+p,
  .ocean-title+.lead {
    margin-top: var(--space-8);
  }

  .lead+.lead {
    margin-top: var(--space-5);
  }

  .text-link {
    min-height: 3rem;
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    transition: gap 260ms var(--ease-out), opacity 140ms ease;
  }

  .text-link:hover {
    gap: var(--space-6);
  }

  .text-link::after {
    content: '→';
  }

  .text-link--light {
    color: #fff;
  }

  /* ── 스크롤 진입 연출 — site.js가 is-visible을 토글한다 ── */
  & [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 2rem, 0);
    transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
    transition-delay: calc(var(--delay, 0) * 90ms);
  }

  & [data-delay='1'] {
    --delay: 1;
  }

  & [data-delay='2'] {
    --delay: 2;
  }

  & [data-delay='3'] {
    --delay: 3;
  }

  & [data-delay='4'] {
    --delay: 4;
  }

  & [data-delay='5'] {
    --delay: 5;
  }

  & [data-reveal].is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  /* ── 파트너 마퀴 ── */
  .marquee {
    overflow: hidden;
  }

  .marquee-track {
    display: flex;
    width: max-content;
    gap: 3rem;
    will-change: transform;
  }

  .marquee-group {
    display: flex;
    flex: none;
    gap: 3rem;
    align-items: baseline;
  }

  /* ── 사이트 푸터 ── */
  .site-footer {
    padding: var(--space-12) clamp(1rem, 4vw, 3rem);
    display: flex;
    justify-content: space-between;
    gap: var(--space-8);
    color: rgba(255, 255, 255, .55);
    background: var(--color-ink-black);
    font-size: .75rem;
    line-height: 1.8;
  }

  .site-footer strong {
    display: block;
    margin-bottom: var(--space-2);
    color: #fff;
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 400;
  }

  .site-footer--ocean {
    background: #020f16;
  }
}

/* ── 반응형 (공통) ── */

@media (max-width: 720px) {

  .company-page,
  .product-page {
    .site-header {
      min-height: 4rem;
    }

    .site-nav {
      gap: var(--space-4);
    }

    .site-nav a {
      font-size: .75rem;
    }

    .site-nav a::before {
      display: none;
    }

    .section-shell {
      width: min(calc(100% - 2rem), var(--shell));
    }

    .section-pad {
      padding-block: var(--space-24);
    }

    .section-index {
      margin-bottom: var(--space-8);
    }

    .site-footer {
      flex-direction: column;
    }
  }
}

/* ── 모션 최소화 환경: 모든 연출 해제 ── */

@media (prefers-reduced-motion: reduce) {

  .company-page,
  .product-page {

    & *,
    & *::before,
    & *::after {
      scroll-behavior: auto !important;
      animation-duration: .01ms !important;
      animation-delay: 0ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
      transition-delay: 0ms !important;
    }

    & [data-reveal] {
      opacity: 1;
      transform: none;
    }

    .marquee-track {
      width: auto;
      flex-wrap: wrap;
    }

    .marquee-group[aria-hidden='true'] {
      display: none;
    }
  }
}