/* =============================================================================
   BLUE OCEANIS — site styles

   값은 assets/css/tokens.css 의 --bo-* 변수를 그대로 씁니다.
   브랜드 시스템에 없는 값만 여기서 정의하고, 정의한 이유를 주석으로 남깁니다.

   지키고 있는 규칙
   - 색 비율 55% white/ice-white · 25% Ocean Navy · 12% Marine Blue · 5% Aqua Blue
   - 본문은 Ocean Navy #0F3D66 또는 Charcoal #1F2937
   - Aqua Blue #4DB6E5 는 흰 배경 텍스트 금지(2.30:1). 구분선·액센트,
     또는 네이비 배경 위 텍스트(4.86:1)로만
   - @media 에는 리터럴 사용. var() 는 미디어쿼리에서 동작하지 않음
     브레이크포인트는 tokens/breakpoints.json 그대로 390 / 1024 / 1440
   ============================================================================= */

/* ------------------------------------------------------------ site 레벨 추가 */

:root {
  /* 브랜드 시스템에 반응형 타입 스케일이 없다. 데스크톱 상한은 브랜드 값
     (display-xl 64, display-l 48, h3 24) 을 그대로 두고 하한만 정한다. */
  --site-text-hero: clamp(36px, 6.4vw, 64px);
  --site-text-section: clamp(28px, 3.6vw, 48px);
  --site-text-card-title: clamp(20px, 2vw, 24px);

  /* 그리드 — tokens/breakpoints.json 의 margin 값 */
  --site-container: 1440px;
  --site-gutter: 20px;   /* mobile */

  /* 사진 위 네이비 베일. 흰 텍스트 대비를 확보하기 위한 최소 농도.
     Ocean Navy Deep → Ocean Navy 축을 유지한다. */
  --site-veil: linear-gradient(135deg, rgba(10, 46, 82, 0.93) 0%, rgba(15, 61, 102, 0.82) 100%);

  --site-border: rgba(15, 61, 102, 0.12);
}

@media (min-width: 1024px) {
  :root { --site-gutter: 48px; }
}
@media (min-width: 1440px) {
  :root { --site-gutter: 80px; }
}

/* -------------------------------------------------------------------- reset */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bo-color-white);
  color: var(--bo-color-charcoal);
  font-family: var(--bo-font-family);
  font-size: var(--bo-text-body-m-size);
  line-height: var(--bo-text-body-m-line);
  font-weight: var(--bo-font-weight-regular);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  margin: 0;
  color: var(--bo-color-ocean-navy);
  font-weight: var(--bo-font-weight-bold);
}

p { margin: 0; }

a { color: var(--bo-color-marine-blue); }

ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--bo-color-marine-blue);
  outline-offset: 3px;
  border-radius: var(--bo-radius-sm);
}

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

/* ------------------------------------------------------------------- layout */

.container {
  width: 100%;
  max-width: var(--site-container);
  margin: 0 auto;
  padding-inline: var(--site-gutter);
}

.skip-link {
  position: absolute;
  left: var(--bo-space-16);
  top: -100px;
  z-index: 100;
  padding: var(--bo-space-12) var(--bo-space-16);
  background: var(--bo-color-white);
  color: var(--bo-color-ocean-navy);
  font-weight: var(--bo-font-weight-semibold);
  text-decoration: none;
  border-radius: var(--bo-radius-md);
  box-shadow: var(--bo-shadow-lg);
  transition: top 120ms ease-out;
}
.skip-link:focus { top: var(--bo-space-16); }

.section {
  padding-block: clamp(var(--bo-space-64), 8vw, var(--bo-space-128));
}

.section-tint { background: var(--bo-color-ice-white); }

/* 스티키 헤더에 앵커 타깃이 가려지지 않게 */
[id] { scroll-margin-top: 96px; }

/* ------------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bo-color-white);
  border-bottom: 1px solid var(--site-border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bo-space-24);
  min-height: 76px;
  padding-block: var(--bo-space-12);
}

/* 헤더 락업 최소 크기 120px 규칙을 지킨다. 모바일에서도 168px 유지 */
.logo { display: block; line-height: 0; }
.logo img { width: 168px; height: auto; }

@media (min-width: 1024px) {
  .logo img { width: 224px; }
}

.site-nav { display: flex; align-items: center; }

.nav-list {
  display: flex;
  align-items: center;
  gap: var(--bo-space-24);
}

.nav-list a {
  color: var(--bo-color-ocean-navy);
  font-size: var(--bo-text-body-s-size);
  font-weight: var(--bo-font-weight-medium);
  letter-spacing: 0.02em;
  text-decoration: none;
  padding-block: var(--bo-space-4);
  border-bottom: 2px solid transparent;
  transition: border-color 140ms ease-out, color 140ms ease-out;
}
.nav-list a:hover {
  color: var(--bo-color-marine-blue);
  border-bottom-color: var(--bo-color-aqua-blue);
}

.nav-cta {
  padding: var(--bo-space-8) var(--bo-space-16) !important;
  background: var(--bo-color-ocean-navy);
  color: var(--bo-color-white) !important;
  border-radius: var(--bo-radius-md);
  border-bottom: 0 !important;
}
.nav-cta:hover { background: var(--bo-color-marine-blue); }

/* 햄버거 버튼 — 터치 타깃 44px 이상을 확보한다 */
.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--bo-space-8);
  min-height: 44px;
  padding: var(--bo-space-8) var(--bo-space-12);
  background: none;
  border: 1px solid var(--site-border);
  border-radius: var(--bo-radius-md);
  color: var(--bo-color-ocean-navy);
  font-family: inherit;
  font-size: var(--bo-text-body-s-size);
  font-weight: var(--bo-font-weight-medium);
  cursor: pointer;
}
.burger {
  display: flex; flex-direction: column; justify-content: space-between;
  width: 20px; height: 14px;
}
.burger i {
  display: block; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform 180ms ease-out, opacity 140ms ease-out;
}
/* 열리면 X 로 바뀐다 */
.nav-toggle[aria-expanded="true"] .burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .burger i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* JS 없으면 목록이 그대로 보이게 한다. 토글은 JS 가 있을 때만 나타난다. */
@media (max-width: 1023px) {
  body.js .nav-toggle { display: flex; }

  body.js .nav-list {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--bo-space-8) var(--site-gutter) var(--bo-space-24);
    background: var(--bo-color-white);
    border-bottom: 1px solid var(--site-border);
    box-shadow: var(--bo-shadow-lg);
    max-height: calc(100vh - 76px);
    overflow-y: auto;
  }
  body.js .nav-list.is-open { display: flex; }

  body.js .nav-list li + li { border-top: 1px solid var(--site-border); }
  body.js .nav-list a {
    display: flex; align-items: center;
    min-height: 52px;                       /* 넉넉한 터치 타깃 */
    padding-block: var(--bo-space-12);
    font-size: var(--bo-text-body-l-size);
    border-bottom: 0;
  }
  body.js .nav-list li:has(> .nav-cta) { border-top: 0; }
  body.js .nav-cta {
    justify-content: center;
    margin-top: var(--bo-space-16);
  }

  .header-inner { position: relative; }
  body:not(.js) .nav-list { flex-wrap: wrap; gap: var(--bo-space-12); }

  /* 메뉴가 열려 있는 동안 배경 스크롤 잠금 */
  body.nav-open { overflow: hidden; }
}

/* --------------------------------------------------------------------- type */

.eyebrow {
  margin-bottom: var(--bo-space-16);
  color: var(--bo-color-cool-gray);
  font-size: var(--bo-text-caption-size);
  line-height: var(--bo-text-caption-line);
  font-weight: var(--bo-font-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* 네이비 배경 위에서는 Aqua Blue 가 4.86:1 로 AA 를 통과한다 */
.eyebrow-on-dark { color: var(--bo-color-aqua-blue); }

.section-title {
  font-size: var(--site-text-section);
  line-height: 1.2;
  letter-spacing: -0.015em;
  max-width: 22ch;
}

.lead {
  font-size: var(--bo-text-body-l-size);
  line-height: var(--bo-text-body-l-line);
  color: var(--bo-color-ocean-navy);
}

/* --------------------------------------------------------------------- hero */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: min(760px, 88vh);
  padding-block: clamp(var(--bo-space-80), 12vw, var(--bo-space-128));
  overflow: hidden;
}

/* 모바일 브라우저의 주소창 때문에 100vh 가 실제 화면보다 큰 문제를 피한다 */
@supports (height: 88svh) {
  .hero { min-height: min(760px, 88svh); }
}

.band-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-veil, .band-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--site-veil);
}

/* -- 삭제된 방식 (참고) ------------------------------------------------------
   가로 반복 그라디언트 줄무늬 + 아쿠아색 파형 3겹을 얹는 방식이었는데 두 가지가
   문제였습니다. 줄무늬는 수면이 아니라 스캔라인처럼 보였고, 하단 아쿠아 파형은
   브랜드가 금지한 '클립아트 파도' 클리셰에 가까웠습니다. 아래 방식으로 교체했습니다.
   -------------------------------------------------------------------------- */

/* 히어로 수면 — 오버레이로 물을 흉내내지 않고 사진 자체를 움직인다.
     1) 같은 사진 두 겹이 서로 반대 방향으로 흐르며 교차 (bo-pan-a / bo-pan-b / bo-cross)
        회전을 0.7도만 섞으면 평행이동만 할 때보다 훨씬 물처럼 읽힌다.
        파일은 한 장이라 추가 다운로드가 없다.
     2) 크게 흐린 브랜드 색 빛 덩어리가 다른 주기로 흐름 (bo-glow-a / bo-glow-b)
     3) 하단은 장식이 아니라 다음 흰 섹션으로 넘어가는 경계선 (bo-edge-a / bo-edge-b)

   겹치는 색은 흰색이 아니라 Aqua Blue / Marine Blue Light 를 쓴다. 흰색을 겹치면
   사진이 밝은 최악의 경우 흰 본문 텍스트 대비가 4.5:1 아래로 떨어진다.
   Aqua 를 총 30% 까지 겹쳐도 최악 4.67:1 로 AA 를 유지한다 (tools/verify.py 에서 계산).

   애니메이션은 transform·opacity 만 쓴다. 합성 전용 속성이라 리페인트가 없다. */

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform, opacity;
  transform: scale(1.08);   /* 회전·이동 여유분. 애니메이션이 없어도 가장자리가 비지 않는다 */
}
.hero-bg-b { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .hero-bg-a { animation: bo-pan-a 30s ease-in-out infinite alternate; }
  .hero-bg-b {
    animation: bo-pan-b 30s ease-in-out infinite alternate,
               bo-cross 15s ease-in-out infinite alternate;
  }
}

@keyframes bo-pan-a {
  0%   { transform: scale(1.08) translate3d(0, 0, 0) rotate(0deg); }
  50%  { transform: scale(1.11) translate3d(-1.3%, -0.9%, 0) rotate(0.34deg); }
  100% { transform: scale(1.15) translate3d(-2.8%, -2.2%, 0) rotate(0.7deg); }
}
@keyframes bo-pan-b {
  0%   { transform: scale(1.15) translate3d(2.4%, 1.8%, 0) rotate(-0.62deg); }
  50%  { transform: scale(1.11) translate3d(1.1%, 0.7%, 0) rotate(-0.3deg); }
  100% { transform: scale(1.08) translate3d(0, 0, 0) rotate(0deg); }
}
@keyframes bo-cross {
  from { opacity: 0; }
  to   { opacity: .62; }
}

/* 수면에 드는 빛. blur 를 크게 줘서 덩어리 형태가 드러나지 않게 한다. */
.hero-glow {
  position: absolute;
  inset: -22%;
  z-index: -1;
  pointer-events: none;
  filter: blur(46px);
  background:
    radial-gradient(38% 26% at 26% 32%, rgba(77, 182, 229, .30), transparent 70%),
    radial-gradient(30% 22% at 70% 58%, rgba(46, 147, 212, .26), transparent 72%);
}
.hero-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(34% 20% at 54% 78%, rgba(77, 182, 229, .22), transparent 74%);
}

@media (prefers-reduced-motion: no-preference) {
  .hero-glow { animation: bo-glow-a 17s ease-in-out infinite alternate; }
  .hero-glow::after { animation: bo-glow-b 23s ease-in-out infinite alternate; }
}

@keyframes bo-glow-a {
  from { transform: translate3d(-4%, 1.6%, 0) scale(1); }
  to   { transform: translate3d(4.5%, -2.4%, 0) scale(1.12); }
}
@keyframes bo-glow-b {
  from { transform: translate3d(3.5%, 0, 0) scale(1.08); }
  to   { transform: translate3d(-3.5%, -1.6%, 0) scale(1); }
}

/* 수면선 — 히어로와 다음 흰 섹션의 경계. 그래서 색을 아쿠아가 아니라
   다음 섹션과 같은 흰색으로 쓴다. 파장 960, 진폭 ±12 로 완만하게 잡아
   파도 그림처럼 보이지 않게 했다. */
.hero-edge {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  z-index: 0;
  width: 100%;
  height: clamp(56px, 8vh, 112px);
  pointer-events: none;
}
.hero-edge path { transform-box: view-box; }
.hero-edge .edge-back { fill: rgba(255, 255, 255, .28); }
.hero-edge .edge-front { fill: var(--bo-color-white); }

@media (prefers-reduced-motion: no-preference) {
  .hero-edge .edge-back { animation: bo-edge-a 34s linear infinite; }
  .hero-edge .edge-front { animation: bo-edge-b 22s linear infinite; }
}

/* 파장 960 만큼 밀면 이음매 없이 반복된다 */
@keyframes bo-edge-a {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-960px, 0, 0); }
}
@keyframes bo-edge-b {
  from { transform: translate3d(-960px, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

.hero-inner { max-width: 900px; position: relative; z-index: 1; }

.hero-title {
  font-size: var(--site-text-hero);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--bo-color-white);
}

.hero-lead {
  margin-top: var(--bo-space-24);
  max-width: 62ch;
  color: var(--bo-color-white);
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bo-space-16);
  margin-top: var(--bo-space-40);
}

/* ------------------------------------------------------------------ buttons */

.btn {
  display: inline-block;
  padding: var(--bo-space-16) var(--bo-space-32);
  border-radius: var(--bo-radius-md);
  font-size: var(--bo-text-body-m-size);
  font-weight: var(--bo-font-weight-semibold);
  text-decoration: none;
  transition: background-color 140ms ease-out, color 140ms ease-out;
}

/* 흰 배경 + 네이비 글자 = 11.17:1 */
.btn-primary {
  background: var(--bo-color-white);
  color: var(--bo-color-ocean-navy);
}
.btn-primary:hover { background: var(--bo-color-ice-white); }

.btn-ghost {
  color: var(--bo-color-white);
  border: 1px solid rgba(255, 255, 255, 0.55);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--bo-color-white);
}

/* -------------------------------------------------------------------- about */

.about-grid {
  display: grid;
  gap: var(--bo-space-40);
}

@media (min-width: 1024px) {
  .about-grid {
    grid-template-columns: 5fr 7fr;
    gap: var(--bo-space-80);
    align-items: start;
  }
}

.about-head h2 {
  font-size: var(--site-text-section);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.about-body > * + * { margin-top: var(--bo-space-24); }

.promise {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bo-space-12) var(--bo-space-24);
  margin-top: var(--bo-space-32);
  padding-top: var(--bo-space-24);
  border-top: 2px solid var(--bo-color-aqua-blue);
}
.promise li {
  color: var(--bo-color-ocean-navy);
  font-size: var(--bo-text-body-s-size);
  font-weight: var(--bo-font-weight-semibold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* -------------------------------------------------------------------- cards */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--bo-space-24);
  margin-top: var(--bo-space-48);
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--bo-color-white);
  border-radius: var(--bo-radius-lg);
  overflow: hidden;
  box-shadow: var(--bo-shadow-sm);
  transition: box-shadow 160ms ease-out, transform 160ms ease-out;
}
.card:hover {
  box-shadow: var(--bo-shadow-lg);
  transform: translateY(-2px);
}

.card-media { margin: 0; }
.card-media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.card h3 {
  margin: var(--bo-space-24) var(--bo-space-24) 0;
  font-size: var(--site-text-card-title);
  line-height: var(--bo-text-h3-line);
  font-weight: var(--bo-font-weight-semibold);
}

.card p {
  margin: var(--bo-space-12) var(--bo-space-24) var(--bo-space-32);
  font-size: var(--bo-text-body-m-size);
  line-height: var(--bo-text-body-m-line);
}

/* ------------------------------------------------------------- 취급 품목 */

.range-title {
  margin-top: var(--bo-space-64);
  font-size: var(--bo-text-h3-size);
  line-height: var(--bo-text-h3-line);
  font-weight: var(--bo-font-weight-semibold);
}

.range {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--bo-space-32) var(--bo-space-40);
  margin: var(--bo-space-24) 0 0;
}

/* 품목이 여덟이다. auto-fit 에 맡기면 폭에 따라 5+3 처럼 갈라진다.
   1024 에서 2열, 1280 부터 4열로 고정하면 어디서나 줄이 딱 맞는다. */
@media (min-width: 1024px) {
  .range { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1280px) {
  .range { grid-template-columns: repeat(4, 1fr); }
}
.range-item {
  padding-top: var(--bo-space-16);
  border-top: 2px solid var(--bo-color-aqua-blue);
}

/* 품목 사진은 모달을 여는 버튼이다. 버튼 기본 스타일을 지우고 사진만 남긴다. */
.range-open {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  border-radius: var(--bo-radius-md);
}
.range-open:focus-visible {
  outline: 3px solid var(--bo-color-aqua-blue);
  outline-offset: 3px;
}
.range-open .range-thumb { transition: transform .35s var(--bo-ease, ease), filter .35s ease; }
.range-open:hover .range-thumb,
.range-open:focus-visible .range-thumb { filter: brightness(.86); }

/* 사진 위에 얹히는 안내. 손가락으로 만지는 화면에서는 hover 가 없으므로
   항상 보이게 두고, 마우스가 있는 화면에서만 hover 로 드러낸다. */
.range-open-hint {
  position: absolute;
  left: 50%;
  top: calc(50% - var(--bo-space-12) / 2);
  transform: translate(-50%, -50%);
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(15, 61, 102, .88);
  color: #fff;
  font-size: var(--bo-text-caption-size);
  font-weight: var(--bo-font-weight-semibold);
  letter-spacing: .02em;
  white-space: nowrap;
  pointer-events: none;
}
@media (hover: hover) {
  .range-open-hint { opacity: 0; transition: opacity .25s ease; }
  .range-open:hover .range-open-hint,
  .range-open:focus-visible .range-open-hint { opacity: 1; }
}

/* ---------------------------------------------------------- 품목 모달 */

.item-modal {
  width: min(1120px, calc(100vw - 32px));
  /* dvh 를 못 읽는 브라우저(Safari 15.3 이하)를 위해 vh 를 먼저 둔다 */
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--bo-radius-lg, 14px);
  background: #fff;
  color: var(--bo-color-charcoal);
  overflow: hidden;
}
.item-modal::backdrop { background: rgba(10, 34, 57, .68); }

.item-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bo-space-16);
  /* 스페이싱 스케일에 20 은 없다(4·8·12·16·24…). --bo-space-20 을 쓰면 정의되지 않은
     변수 때문에 padding 선언 전체가 무효가 되어 0 이 되고, 제목이 모달 왼쪽 끝에 붙는다. */
  padding: var(--bo-space-16) var(--bo-space-24);
  border-bottom: 1px solid #E5EAF0;
  background: #fff;
}
.item-modal-head h2 {
  margin: 0;
  font-size: var(--bo-text-h3-size);
  line-height: var(--bo-text-h3-line);
  color: var(--bo-color-ocean-navy);
}
.item-modal-head h2 span {
  display: block;
  margin-top: 2px;
  color: var(--bo-color-marine-blue);
  font-size: var(--bo-text-caption-size);
  font-weight: var(--bo-font-weight-medium);
  letter-spacing: .02em;
}
/* 닫기 버튼은 손가락으로 누를 수 있어야 한다. 44px 를 지킨다. */
.item-modal-close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 1px solid #D8E0E8;
  border-radius: 50%;
  background: #fff;
  color: var(--bo-color-ocean-navy);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.item-modal-close:hover { background: var(--bo-color-ice-white); }
.item-modal-close:focus-visible {
  outline: 3px solid var(--bo-color-aqua-blue);
  outline-offset: 2px;
}

.item-modal-body {
  padding: var(--bo-space-24);
  overflow-y: auto;
  max-height: calc(100vh - 32px - 86px);
  max-height: calc(100dvh - 32px - 86px);
  -webkit-overflow-scrolling: touch;
}
.item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--bo-space-16);
  margin: 0;
  padding: 0;
  list-style: none;
}
.item-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--bo-radius-md);
  background: var(--bo-color-ice-white);
}
.item-modal-note {
  margin: var(--bo-space-24) 0 0;
  color: var(--bo-color-cool-gray);
  font-size: var(--bo-text-caption-size);
  line-height: var(--bo-text-caption-line);
}

@media (max-width: 639px) {
  .item-modal {
    width: 100vw;
    max-width: 100vw;
    max-height: 100vh;
    max-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
  }
  .item-modal-head { padding: var(--bo-space-16); }
  .item-modal-body {
    padding: var(--bo-space-16);
    max-height: calc(100vh - 78px);
    max-height: calc(100dvh - 78px);
  }
  .item-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--bo-space-12); }
}

/* 모달이 열린 동안 뒤 화면이 같이 스크롤되지 않게 한다 */
body.modal-open { overflow: hidden; }

/* 품목 사진. dl 안에서 div 는 dt/dd 만 담을 수 있어 dt 안에 넣었다.
   4:3 로 고정해 여덟 장의 높이가 어긋나지 않게 한다. 참치만 원본이 500px 대라
   960 판이 없고 srcset 없이 480 을 쓴다. */
.range-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--bo-radius-md);
  margin-bottom: var(--bo-space-12);
  background: var(--bo-color-ice-white);
}
.range dt {
  color: var(--bo-color-ocean-navy);
  font-size: var(--bo-text-body-l-size);
  line-height: var(--bo-text-body-l-line);
  font-weight: var(--bo-font-weight-semibold);
}
.range dd {
  margin: var(--bo-space-4) 0 0;
  font-size: var(--bo-text-body-s-size);
  line-height: var(--bo-text-body-s-line);
}

/* 산지. Marine Blue 는 흰 배경에서 5.28:1 로 AA 를 통과한다 */
.range .range-origin {
  margin-top: var(--bo-space-8);
  color: var(--bo-color-marine-blue);
  font-size: var(--bo-text-caption-size);
  line-height: var(--bo-text-caption-line);
  font-weight: var(--bo-font-weight-medium);
  letter-spacing: .02em;
}

.range-note {
  margin-top: var(--bo-space-32);
  max-width: 62ch;
  color: var(--bo-color-cool-gray);
  font-size: var(--bo-text-body-s-size);
  line-height: var(--bo-text-body-s-line);
}

/* ------------------------------------------------------------------ pillars */

/* 4기둥이라 2x2 로 고정한다. auto-fit 으로 두면 1440 에서 3+1 로 깨져
   마지막 항목만 아래 줄에 남는다. */
.pillars {
  display: grid;
  gap: var(--bo-space-40) var(--bo-space-48);
  margin-top: var(--bo-space-48);
}

@media (min-width: 1024px) {
  .pillars {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--bo-space-48) var(--bo-space-80);
  }
}

.pillar {
  padding-top: var(--bo-space-24);
  border-top: 1px solid var(--site-border);
}

/* Aqua Blue 는 흰 배경 텍스트로 못 쓴다(2.30:1). 번호는 Marine Blue 5.28:1 */
.pillar-index {
  display: block;
  margin-bottom: var(--bo-space-12);
  color: var(--bo-color-marine-blue);
  font-size: var(--bo-text-body-s-size);
  font-weight: var(--bo-font-weight-bold);
  letter-spacing: 0.12em;
}

.pillar h3 {
  font-size: var(--bo-text-h3-size);
  line-height: var(--bo-text-h3-line);
  font-weight: var(--bo-font-weight-semibold);
}

.pillar p { margin-top: var(--bo-space-12); }

.pillar-note {
  color: var(--bo-color-cool-gray);
  font-size: var(--bo-text-body-s-size);
  line-height: var(--bo-text-body-s-line);
}

/* --------------------------------------------------------------------- band */

.band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(var(--bo-space-64), 9vw, var(--bo-space-128));
}

.band-inner { max-width: 940px; }

.band-title {
  max-width: 24ch;
  color: var(--bo-color-white);
  font-size: var(--site-text-section);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.audience {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--bo-space-16) var(--bo-space-40);
  margin-top: var(--bo-space-40);
}
.audience li {
  padding-top: var(--bo-space-16);
  border-top: 2px solid var(--bo-color-aqua-blue);
  color: var(--bo-color-white);
  font-size: var(--bo-text-body-l-size);
  line-height: var(--bo-text-body-l-line);
}

/* ------------------------------------------------------------------ contact */

.contact { background: var(--bo-color-ice-white); }
.contact-inner { max-width: 780px; }

.contact-lead {
  margin-top: var(--bo-space-24);
  font-size: var(--bo-text-body-l-size);
  line-height: var(--bo-text-body-l-line);
}

.contact-mail { margin-top: var(--bo-space-32); }
.contact-mail a {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: var(--bo-font-weight-semibold);
  line-height: 1.3;
  text-decoration: none;
  border-bottom: 2px solid var(--bo-color-aqua-blue);
}
.contact-mail a:hover { color: var(--bo-color-ocean-navy); }

/* 대표 회선이 개설되면 index.html 의 주석을 되살려 다시 쓰는 규칙입니다.
   지금은 전화 항목을 빼둔 상태라 적용되는 요소가 없습니다. */
.contact-phone {
  margin-top: var(--bo-space-8);
  font-size: var(--bo-text-body-l-size);
  line-height: var(--bo-text-body-l-line);
}
.contact-phone a {
  font-weight: var(--bo-font-weight-medium);
  text-decoration: none;
}
.contact-phone a:hover { color: var(--bo-color-ocean-navy); }

.contact-meta {
  margin-top: var(--bo-space-24);
  color: var(--bo-color-cool-gray);
  font-size: var(--bo-text-body-s-size);
}

/* 사기 예방 안내. 수산물·상품 무역은 BEC(송금지시 변경 사기) 표적 업종이라
   대외 페이지에 명시한다. 강조는 좌측 Aqua Blue 룰로만 — 배경은 흰색을 유지해
   본문 대비를 지킨다. */
.notice {
  margin-top: var(--bo-space-48);
  padding: var(--bo-space-24) var(--bo-space-24) var(--bo-space-24) var(--bo-space-32);
  background: var(--bo-color-white);
  border-left: 3px solid var(--bo-color-aqua-blue);
  border-radius: 0 var(--bo-radius-md) var(--bo-radius-md) 0;
  box-shadow: var(--bo-shadow-sm);
}
.notice-title {
  margin-bottom: var(--bo-space-8);
  font-size: var(--bo-text-body-m-size);
  line-height: var(--bo-text-body-m-line);
  font-weight: var(--bo-font-weight-semibold);
}
.notice p {
  color: var(--bo-color-charcoal);
  font-size: var(--bo-text-body-s-size);
  line-height: var(--bo-text-body-s-line);
}

/* ------------------------------------------------------------------- footer */

.site-footer {
  background: var(--bo-color-ocean-navy);
  color: var(--bo-color-white);
  padding-block: var(--bo-space-64);
}

.footer-inner {
  display: grid;
  gap: var(--bo-space-40);
}

@media (min-width: 1024px) {
  .footer-inner {
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: var(--bo-space-64);
  }
  .footer-legal { text-align: right; }
}

.footer-brand img { width: 220px; height: auto; }

.footer-tagline {
  margin-top: var(--bo-space-16);
  color: var(--bo-color-aqua-blue);
  font-size: var(--bo-text-body-s-size);
  font-weight: var(--bo-font-weight-medium);
  letter-spacing: 0.04em;
}

.footer-legal p {
  font-size: var(--bo-text-body-s-size);
  line-height: var(--bo-text-body-s-line);
  color: rgba(255, 255, 255, 0.86);
}
.footer-entity {
  color: var(--bo-color-white) !important;
  font-weight: var(--bo-font-weight-semibold);
}
.footer-legal a { color: var(--bo-color-white); }
.footer-copy { margin-top: var(--bo-space-16) !important; }

/* ------------------------------------------------------------- 맨 위로 */

.to-top {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  z-index: 60;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: var(--bo-color-ocean-navy);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--bo-radius-full);
  color: var(--bo-color-white);
  box-shadow: var(--bo-shadow-lg);
  cursor: pointer;
  transition: background-color 140ms ease-out, transform 140ms ease-out;
}
.to-top[hidden] { display: none; }
.to-top:hover { background: var(--bo-color-marine-blue); transform: translateY(-2px); }
.to-top svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ------------------------------------------------------ 문단 양쪽 맞춤 */

/* 폭이 넉넉한 본문 단락만 양쪽 맞춤한다. 카드처럼 좁은 단은 단어 사이가
   벌어져 오히려 읽기 나빠지므로 제외한다. 영문은 하이픈을 켜서 공백이
   과하게 벌어지는 것을 막는다. */
.about-body p,
.contact-lead {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* 좁은 화면에서는 한 줄에 들어가는 글자 수가 적어 양쪽 맞춤이 불리하다 */
@media (max-width: 640px) {
  .about-body p,
  .contact-lead {
    text-align: left;
    hyphens: manual;
    -webkit-hyphens: manual;
  }
}