@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

/* ═══════════════════════════════════════════════════════════
   MDPICK — editorial direction (v2)
   흑백 기반, 타이포그래피 주도. 색은 사진이 들어오면 사진이 냅니다.
   ═══════════════════════════════════════════════════════════ */

:root {
  --paper:      #ffffff;
  --paper-2:    #f4f4f2;
  --ink:        #0d0d0d;
  --ink-2:      #55554f;
  --ink-3:      #8e8e88;
  --line:       #e2e2de;
  --line-2:     #cfcfc9;
  --panel:      #131413;
  --panel-2:    #1d1f1d;
  --on-panel:   #f2f3f1;
  --on-panel-2: rgba(242,243,241,.56);
  --accent:     #2f6b4f;   /* 아주 절제해서만 — 실선, 마커, hover */

  --gutter:     clamp(20px, 5vw, 64px);
  --maxw:       1440px;
  --band-y:     clamp(80px, 13vw, 190px);

  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
          "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }

/* ─────────── 레이아웃 ─────────── */
.shell { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.band { padding-block: var(--band-y); }
.band--tight { padding-block: clamp(56px, 8vw, 110px); }
.band--paper2 { background: var(--paper-2); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ─────────── 타이포 ─────────── */
.kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: .9em;
}
.kicker::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--accent);
}
.kicker--bare::before { display: none; }

.display {
  font-size: clamp(2.5rem, 6.4vw, 5.6rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.045em;
}
.h-lg {
  font-size: clamp(1.7rem, 3.4vw, 3rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.038em;
}
.h-md {
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.028em;
}
.lead {
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  font-weight: 300;
  line-height: 1.85;
  color: var(--ink-2);
  max-width: 46ch;
}
.body { font-weight: 300; line-height: 1.85; color: var(--ink-2); max-width: 60ch; }
.body + .body { margin-top: 1.2em; }
.small { font-size: 13px; font-weight: 300; line-height: 1.7; color: var(--ink-3); }
.en {
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* ─────────── 링크 ─────────── */
.more {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-2);
  transition: border-color .35s, gap .35s, color .35s;
}
.more::after { content: "→"; letter-spacing: 0; transition: transform .35s; }
.more:hover { border-color: var(--ink); gap: 1.1em; }
.more:hover::after { transform: translateX(3px); }
.more--light { color: var(--on-panel); border-color: rgba(242,243,241,.3); }
.more--light:hover { border-color: var(--on-panel); }

/* ─────────── 헤더 ─────────── */
.head {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background .5s, border-color .5s, color .5s;
  border-bottom: 1px solid transparent;
}
.head-in {
  display: flex; align-items: center; gap: clamp(20px, 4vw, 56px);
  height: 76px;
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gutter);
}
.head--over { color: var(--on-panel); }
.head--solid {
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--line);
  color: var(--ink);
}
.wordmark {
  font-size: 17px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  flex: none;
}
.gnb { display: flex; gap: clamp(16px, 2.4vw, 38px); margin-left: auto; }
.gnb a {
  font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  opacity: .72; transition: opacity .3s; position: relative; padding-block: 4px;
}
.gnb a:hover, .gnb a[aria-current="page"] { opacity: 1; }
.gnb a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: currentColor;
}
.head-tail { display: flex; align-items: center; gap: 11px; font-size: 11px; font-weight: 600; letter-spacing: .16em; }
.head-tail a, .head-tail span { opacity: .48; transition: opacity .3s; }
.head-tail a:hover { opacity: .85; }
.head-tail .is-on { opacity: 1; }
.head-tail i { display: block; width: 1px; height: 9px; background: currentColor; opacity: .28; }

.burger { display: none; width: 26px; height: 26px; position: relative; margin-left: auto; }
.burger span {
  position: absolute; left: 2px; right: 2px; height: 1px; background: currentColor;
  transition: transform .35s, opacity .25s;
}
.burger span:nth-child(1) { top: 9px; }
.burger span:nth-child(2) { top: 16px; }
body.nav-open .burger span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
body.nav-open .burger span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

@media (max-width: 880px) {
  .burger { display: block; }
  .gnb {
    position: fixed; inset: 76px 0 auto 0;
    flex-direction: column; gap: 0;
    background: var(--paper); color: var(--ink);
    padding: 8px var(--gutter) 28px;
    border-bottom: 1px solid var(--line);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity .3s, transform .3s;
  }
  body.nav-open .gnb { opacity: 1; transform: none; pointer-events: auto; }
  .gnb a { padding-block: 16px; border-bottom: 1px solid var(--line); opacity: 1; font-size: 13px; }
  .head-tail { display: none; }
}

/* ─────────── 히어로 ─────────── */
.hero {
  position: relative;
  min-height: min(100svh, 900px);
  background: var(--panel);
  color: var(--on-panel);
  display: flex; align-items: flex-end;
  padding-block: 140px clamp(48px, 8vw, 90px);
  overflow: hidden;
}
/* 히어로 배경사진.
   레이어 순서: ① 어둡게 덮는 층 ② 사진 ③ 사진이 안 뜰 때의 대체 배경
   글자가 잘 안 보이면 ①의 rgba 마지막 숫자를 키우세요 (1에 가까울수록 어두움). */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(9,10,9,.14) 0%, rgba(9,10,9,.36) 55%, rgba(9,10,9,.66) 100%),
    url("../img/hero.jpg"),
    linear-gradient(180deg, #191b19 0%, #101110 62%, #0b0c0b 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(242,243,241,.026) 1px, transparent 1px);
  background-size: 100% 64px;
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.hero-in { position: relative; z-index: 2; width: 100%; }
.hero .display { max-width: 16ch; }
.hero-meta {
  margin-top: clamp(36px, 6vw, 64px);
  padding-top: 26px;
  border-top: 1px solid rgba(242,243,241,.18);
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end;
}
.hero-sub { font-weight: 300; color: var(--on-panel-2); max-width: 38ch; line-height: 1.8; }

.scroll-cue {
  position: absolute; left: var(--gutter); bottom: 22px; z-index: 2;
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--on-panel-2);
  display: flex; align-items: center; gap: 10px;
}
.scroll-cue i { display: block; width: 1px; height: 26px; background: rgba(242,243,241,.4); position: relative; overflow: hidden; }
.scroll-cue i::after {
  content: ""; position: absolute; inset: 0; background: var(--on-panel);
  animation: cue 2.4s cubic-bezier(.7,0,.3,1) infinite;
}
@keyframes cue { 0% { transform: translateY(-100%); } 60%,100% { transform: translateY(100%); } }

/* ─────────── 스테이트먼트 ─────────── */
.statement {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(28px, 6vw, 90px);
  align-items: start;
}
@media (max-width: 820px) { .statement { grid-template-columns: 1fr; } }
.statement .h-lg { max-width: 22ch; }

/* ─────────── 비즈니스 밴드 ─────────── */
.slab {
  position: relative;
  background: var(--panel);
  color: var(--on-panel);
  overflow: hidden;
  min-height: clamp(360px, 46vw, 560px);
  display: flex; align-items: flex-end;
  padding: clamp(28px, 5vw, 64px);
  isolation: isolate;
}
.slab + .slab { margin-top: 2px; }

/* ── 사업 밴드 배경사진 ──
   HTML의 data-ghost 값으로 사진을 연결합니다. 페이지를 고칠 필요 없이
   여기서만 바꾸면 한글·영문 양쪽에 동시에 반영됩니다.
   덮는 층의 숫자를 키우면 어두워지고(글자 잘 보임), 줄이면 사진이 살아납니다. */
.slab[data-ghost="SOURCING"],
.slab[data-ghost="ENTRY"]        { --slab-img: url("../img/sourcing.jpg"); }
.slab[data-ghost="CHANNELS"]     { --slab-img: url("../img/channels.jpg"); }
.slab[data-ghost="OPERATION"],
.slab[data-ghost="COMPLIANCE"],
.slab[data-ghost="HANDLED"]      { --slab-img: url("../img/operation.jpg"); }
.slab[data-ghost="EUROPE"]       { --slab-img: url("../img/europe.jpg"); }
.slab[data-ghost="VISION"],
.slab[data-ghost="CONTACT"],
.slab[data-ghost="INCLUDE"]      { --slab-img: url("../img/vision.jpg"); }

.slab[data-ghost] {
  background-image:
    linear-gradient(100deg, rgba(13,14,13,.90) 0%, rgba(13,14,13,.74) 42%, rgba(13,14,13,.46) 100%),
    linear-gradient(180deg, rgba(13,14,13,.30) 0%, rgba(13,14,13,.55) 100%),
    var(--slab-img, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* 사진 위에서는 본문 글자를 조금 더 또렷하게 (사진 없을 때보다 투명도를 낮춤) */
.slab[data-ghost] p     { color: rgba(242,243,241,.74); }
.slab[data-ghost] .slab-idx { color: rgba(242,243,241,.72); }

/* 좁은 화면에서는 사진의 밝은 가운데가 크롭돼 들어오므로 더 어둡게 덮는다 */
@media (max-width: 900px) {
  .slab[data-ghost] {
    background-image:
      linear-gradient(100deg, rgba(13,14,13,.94) 0%, rgba(13,14,13,.86) 42%, rgba(13,14,13,.68) 100%),
      linear-gradient(180deg, rgba(13,14,13,.42) 0%, rgba(13,14,13,.66) 100%),
      var(--slab-img, none);
  }
}
.slab--alt { background: var(--panel-2); }
/* 사진 교체 지점: .slab { background-image: url(...); background-size: cover; } */
.slab::before {
  content: attr(data-ghost);
  position: absolute; right: -.06em; bottom: -.28em;
  font-size: clamp(6rem, 19vw, 17rem);
  font-weight: 700; letter-spacing: -.05em; line-height: .8;
  color: rgba(242,243,241,.05);
  pointer-events: none; user-select: none; z-index: -1;
  white-space: nowrap;
}
.slab-idx {
  position: absolute; top: clamp(24px, 4vw, 46px); left: clamp(28px, 5vw, 64px);
  font-size: 12px; font-weight: 500; letter-spacing: .2em; color: var(--on-panel-2);
}
.slab-body { max-width: 52ch; }
.slab-title {
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  line-height: 1.15; margin-bottom: .5em;
}
.slab-kr { font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-weight: 500; letter-spacing: -.03em; margin-bottom: .8em; }
.slab p { font-weight: 300; color: var(--on-panel-2); line-height: 1.85; }
.slab .more { margin-top: clamp(22px, 3vw, 34px); }

/* ─────────── 유통 단계 다이어그램 ─────────── */
.chain-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5vw, 72px);
}
@media (max-width: 780px) { .chain-grid { grid-template-columns: 1fr; } }
.chain-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 14px; border-bottom: 1px solid var(--ink); margin-bottom: 4px;
}
.chain-head b { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.chain-head span { font-size: 12px; color: var(--ink-3); letter-spacing: .08em; }
.chain-row {
  display: flex; align-items: center; gap: 16px;
  padding: 17px 0; border-bottom: 1px solid var(--line);
  font-size: 15px; font-weight: 300; color: var(--ink-2);
}
.chain-row b { font-size: 11px; font-weight: 500; letter-spacing: .1em; color: var(--ink-3); min-width: 20px; }
.chain--ours .chain-row { color: var(--ink); font-weight: 500; }
.chain--ours .chain-row b { color: var(--accent); }
.chain--muted .chain-row { color: var(--ink-3); }
.chain-note { margin-top: 18px; font-size: 13px; font-weight: 300; color: var(--ink-3); }
.chain--ours .chain-note { color: var(--accent); }

/* ─────────── 수치 ─────────── */
.figures { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); }
@media (max-width: 720px) { .figures { grid-template-columns: repeat(2, 1fr); } }
.fig { padding: clamp(24px, 3vw, 40px) 0; border-bottom: 1px solid var(--line); padding-right: 20px; }
.fig b {
  display: block; font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 500;
  letter-spacing: -.045em; line-height: 1; margin-bottom: 12px;
}
.fig span { font-size: 12px; letter-spacing: .1em; color: var(--ink-3); }

/* ─────────── 브랜드 목록 ─────────── */
.roster { border-top: 1px solid var(--ink); }
.roster-row {
  display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr) auto;
  gap: 20px; align-items: baseline;
  padding: clamp(20px, 2.6vw, 34px) 0;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 700px) {
  .roster-row { grid-template-columns: 1fr; gap: 6px; }
}
.roster-name { font-size: clamp(1.4rem, 2.6vw, 2.1rem); font-weight: 500; letter-spacing: -.035em; }
.roster-cat { font-size: 14px; font-weight: 300; color: var(--ink-2); }
.roster-tag {
  font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap;
}
.roster-tag--official { color: var(--accent); }
.roster-row--muted .roster-name { color: var(--ink-3); font-weight: 400; }

/* ─────────── 티커 ─────────── */
.ticker { overflow: hidden; border-block: 1px solid var(--line); padding-block: 20px; }
.ticker-track { display: flex; gap: 3.5rem; width: max-content; animation: slide 44s linear infinite; }
.ticker span {
  font-size: clamp(1.1rem, 2vw, 1.6rem); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
  display: flex; align-items: center; gap: 3.5rem; white-space: nowrap;
}
.ticker span::after { content: ""; width: 5px; height: 5px; background: var(--accent); border-radius: 50%; }
@keyframes slide { to { transform: translateX(-50%); } }
.ticker:hover .ticker-track { animation-play-state: paused; }

/* ─────────── 정보 테이블 ─────────── */
.facts { border-top: 1px solid var(--ink); }
.facts div {
  display: grid; grid-template-columns: minmax(120px, 200px) 1fr;
  gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line);
}
@media (max-width: 620px) { .facts div { grid-template-columns: 1fr; gap: 4px; } }
.facts dt { font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.facts dd { margin: 0; font-weight: 300; }

/* ─────────── 연혁 ─────────── */
.chrono { border-top: 1px solid var(--ink); }
.chrono-row {
  display: grid; grid-template-columns: 140px 1fr; gap: clamp(16px, 4vw, 48px);
  padding: clamp(24px, 3vw, 42px) 0; border-bottom: 1px solid var(--line);
}
@media (max-width: 620px) { .chrono-row { grid-template-columns: 1fr; gap: 8px; } }
.chrono-when { font-size: 13px; font-weight: 500; letter-spacing: .14em; color: var(--accent); }

/* ─────────── 폼 ─────────── */
.form { display: grid; gap: 26px; max-width: 620px; }
.f-row { display: grid; gap: 8px; }
.f-row label { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.f-row input, .f-row select, .f-row textarea {
  font: inherit; font-weight: 300; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--line-2);
  padding: 10px 0; border-radius: 0;
  transition: border-color .3s;
}
.f-row textarea { min-height: 130px; resize: vertical; }
.f-row input:focus, .f-row select:focus, .f-row textarea:focus { outline: 0; border-bottom-color: var(--ink); }
.f-submit {
  justify-self: start; margin-top: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  padding: 16px 34px; background: var(--ink); color: var(--paper);
  transition: background .3s;
}
.f-submit:hover { background: var(--accent); }
.f-status { font-size: 13px; color: var(--ink-3); }

/* ─────────── 푸터 ─────────── */
.foot { background: var(--panel); color: var(--on-panel); padding-block: clamp(56px, 8vw, 96px) 30px; }
.foot-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: clamp(24px, 5vw, 60px); }
@media (max-width: 780px) { .foot-top { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
.foot h4 { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--on-panel-2); margin-bottom: 18px; }
.foot li { margin-bottom: 10px; font-weight: 300; font-size: 14px; color: var(--on-panel-2); }
.foot a:hover { color: var(--on-panel); }
.foot-bottom {
  margin-top: clamp(40px, 6vw, 72px); padding-top: 22px;
  border-top: 1px solid rgba(242,243,241,.14);
  display: flex; flex-wrap: wrap; gap: 10px 30px; justify-content: space-between;
  font-size: 11px; font-weight: 300; color: rgba(242,243,241,.4); line-height: 1.7;
}
.foot-legal { max-width: 66ch; }

/* ─────────── 채울 곳 표시 ─────────── */
.tbd {
  color: var(--accent);
  border-bottom: 1px dotted currentColor;
  font-weight: 400;
}
.slab .tbd, .foot .tbd, .hero .tbd { color: #8fd0ac; }
body.tbd-off .tbd { border-bottom-color: transparent; color: inherit; opacity: .55; }
.tbd-toggle {
  position: fixed; right: 16px; bottom: 16px; z-index: 200;
  font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  background: var(--ink); color: var(--paper); padding: 10px 16px;
}

/* ─────────── 스크롤 등장 ───────────
   .js 클래스는 <head> 인라인 스크립트가 붙입니다.
   JS가 죽거나 막히면 이 규칙 자체가 적용되지 않아 내용이 그대로 보입니다. */
.js .rv { opacity: 0; transform: translateY(22px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.js .rv.in { opacity: 1; transform: none; }
.js .rv-2 { transition-delay: .09s; }
.js .rv-3 { transition-delay: .18s; }
.js .rv-4 { transition-delay: .27s; }

@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; transition: none; }
  .ticker-track, .scroll-cue i::after { animation: none; }
  html { scroll-behavior: auto; }
}

/* ─────────── 페이지 헤더 ─────────── */
.page-top { padding-block: clamp(140px, 17vw, 220px) clamp(40px, 6vw, 76px); }
.page-top .display { max-width: 18ch; }

/* 연락처 링크 (메일·전화) */
.facts dd a, .foot-top li a[href^="mailto"], .foot-top li a[href^="tel"] {
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: opacity .25s;
}
.facts dd a:hover, .foot-top li a[href^="mailto"]:hover, .foot-top li a[href^="tel"]:hover { opacity: .7; }