:root {
  --bg: #faf9f6;
  --bg-alt: #f2f0ea;
  --ink: #1a1a1a;
  --ink-soft: #52524f;
  --navy: #16234a;
  --navy-deep: #0e1730;
  --gold: #a9895f;
  /* Darker gold for small text — the display gold fails contrast at caption sizes. */
  --gold-ink: #8a6a3d;
  /* (주)부명 signature blue, per the CI color system. */
  --signature: #0066b3;
  --line: rgba(26, 26, 26, 0.12);
  --line-invert: rgba(255, 255, 255, 0.18);
  /* One corporate sans-serif family site-wide — the "--serif" name is kept
     so existing component rules don't need touching, it just points at the
     same face as body text, at a heavier weight for contrast. */
  --serif: "IBM Plex Sans KR", "Noto Sans KR", sans-serif;
  --sans: "IBM Plex Sans KR", "Noto Sans KR", sans-serif;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { overflow-x: hidden; }
body {
  margin: 0;
  /* .phi-item의 hover 배경이 100vw로 뷰포트 전체 폭을 채우는데, 세로 스크롤바가
     있으면 100vw가 실제 보이는 폭보다 스크롤바 두께만큼 더 커져서 가로 스크롤이
     생긴다 — 그 미세한 초과분을 여기서 숨긴다. */
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Korean must wrap at word boundaries, not mid-word. */
  word-break: keep-all;
  overflow-wrap: break-word;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 32px; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 40px;
  mix-blend-mode: normal;
  transition: background .35s ease, box-shadow .35s ease, padding .35s ease;
}
.site-header.scrolled {
  background: rgba(250, 249, 246, 0.92);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 var(--line);
  padding: 14px 40px;
}
.brand-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: 0.04em;
  color: var(--navy);
}
.brand-mark img { height: 30px; width: auto; }
.site-header.scrolled .brand-mark,
.site-header.scrolled .main-nav a,
.site-header.scrolled .lang-btn,
.site-header.scrolled .menu-btn { color: var(--navy); }
.site-header:not(.scrolled) .brand-mark,
.site-header:not(.scrolled) .main-nav a,
.site-header:not(.scrolled) .lang-btn,
.site-header:not(.scrolled) .menu-btn { color: #fff; }

.main-nav { display: flex; gap: 34px; }
.main-nav a {
  font-size: 14px;
  letter-spacing: 0.02em;
  opacity: 0.88;
  position: relative;
  padding-bottom: 2px;
}
.main-nav a:hover { opacity: 1; }

/* ---------- 브랜드 메가 메뉴 (헤더의 "브랜드"에 마우스를 올리면 펼쳐짐) ---------- */
.nav-mega { position: relative; display: flex; align-items: center; }
.nav-mega-trigger {
  font-size: 14px;
  letter-spacing: 0.02em;
  opacity: 0.88;
  padding-bottom: 2px;
}
.nav-mega:hover .nav-mega-trigger { opacity: 1; }
/* 트리거와 말풍선 사이의 빈 틈도 패널 안에 포함시켜, 마우스가 그 틈을 지날 때
   :hover가 끊겨 메뉴가 먼저 닫히는 문제를 막는다. */
.nav-mega-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 18px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease;
  z-index: 60;
}
.nav-mega:hover .nav-mega-panel,
.nav-mega:focus-within .nav-mega-panel { opacity: 1; visibility: visible; }
.nav-mega-bubble {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
  padding: 22px 26px 24px;
  min-width: 540px;
  color: var(--ink);
}
.nav-mega-bubble::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 3px;
}
.nav-mega-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}
.nav-mega-grid + .nav-mega-title { margin-top: 20px; }
.nav-mega-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 10px;
}
.nav-mega-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  transition: background 0.18s ease;
}
.nav-mega-item:hover { background: var(--bg-alt); }
.nav-mega-logo {
  width: 46px;
  height: 34px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.nav-mega-logo img { max-width: 80%; max-height: 70%; object-fit: contain; }
.nav-mega-name { font-size: 13px; font-weight: 500; color: var(--ink); }

.header-right { display: flex; align-items: center; gap: 18px; }
.menu-btn { display: none; }
.lang-btn {
  border: 1px solid currentColor;
  background: transparent;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  letter-spacing: 0.06em;
  cursor: pointer;
  opacity: 0.9;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--navy-deep);
}
.hero img.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14,23,48,.28) 0%, rgba(14,23,48,.18) 38%, rgba(14,23,48,.82) 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  color: #fff;
  padding: 0 40px 96px;
  max-width: 780px;
}
.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,.75);
  margin-bottom: 26px;
}
.hero-eyebrow::before {
  content: "";
  width: 36px; height: 1px;
  background: var(--gold);
  display: inline-block;
}
.hero h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(24px, 3.2vw, 40px);
  line-height: 1.34;
  margin: 0 0 22px;
  letter-spacing: -0.01em;
}
.hero h1 em {
  font-style: normal;
  color: var(--gold);
}
.hero p.lead {
  font-size: 14.5px;
  color: rgba(255,255,255,.82);
  max-width: 520px;
  margin: 0 0 36px;
}
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(255,255,255,.5);
  padding-bottom: 6px;
  transition: border-color .25s ease, gap .25s ease;
}
.hero-cta:hover { border-color: #fff; gap: 16px; }
.scroll-hint {
  position: absolute;
  right: 40px;
  bottom: 40px;
  z-index: 2;
  color: rgba(255,255,255,.6);
  font-size: 11px;
  letter-spacing: 0.18em;
  writing-mode: vertical-rl;
  display: flex;
  align-items: center;
  gap: 12px;
}
.scroll-hint::after {
  content: "";
  width: 1px; height: 46px;
  background: rgba(255,255,255,.4);
}

/* ---------- Section shell ---------- */
section { position: relative; }
.section-pad { padding: 120px 0; }
.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--gold-ink);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--gold-ink); }
h2.section-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(19px, 1.9vw, 26px);
  line-height: 1.45;
  margin: 0 0 14px;
  max-width: 640px;
}
.section-body {
  color: var(--ink-soft);
  font-size: 13.5px;
  max-width: 520px;
}

/* ---------- Philosophy ---------- */
.philosophy { background: var(--bg); }
.phi-item {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 72px;
  align-items: center;
  padding: 78px 0;
  border-top: 1px solid var(--line);
  position: relative;
  z-index: 0;
}
.phi-item:last-child { border-bottom: 1px solid var(--line); }
/* brand-card/infra-card와 같은 느낌으로, 블록(철학 포함 4개 전부)에 마우스를
   올리면 배경이 흰색으로 밝아진다. .wrap이 좌우 32px 여백을 두고 가운데 정렬돼
   있어서 배경을 item 박스 안에만 칠하면 화면 좌우가 잘려 보이므로, 실제 칠하는
   면은 별도의 ::before로 뷰포트 전체 폭까지 뻗게 하고 글/사진(z-index:0, 이 요소
   기준 위 레이어)은 그대로 원래 폭 안에 둔다 — 이 조합이 "배경만 꽉 차 보이게"
   하는 표준적인 방법이다. */
.phi-item::before {
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: transparent;
  transition: background .3s ease;
  z-index: -1;
  pointer-events: none;
}
/* 철학(첫 블록)은 섹션 맨 위, 히어로 바로 다음이라 위쪽에 section-pad의 120px
   여백이 그대로 남는다 — hover 흰 배경이 그 여백 밑에서부터 시작되면 히어로와
   흰 배경 사이에 원래 배경색(--bg) 띠가 남아 "잘린" 것처럼 보인다. 그 120px을
   위로 마저 덮어서 히어로 바로 아래부터 흰 배경이 시작되게 한다. */
.phi-item.phi-lead::before { top: -120px; }
.phi-item:hover::before { background: #fff; }
.phi-item.reverse .phi-media { order: 2; }

/* Opening block: no photo, wider measure, sets the section's voice. */
.phi-item.phi-lead {
  display: block;
  border-top: 0;
  padding: 0 0 84px;
}
.phi-lead .phi-title {
  font-size: clamp(21px, 2.4vw, 32px);
  max-width: 720px;
  margin-bottom: 22px;
}
.phi-lead .phi-body { max-width: 560px; font-size: 14px; }

/* 사진 여러 장을 겹쳐놓고 크로스페이드하려면, 크기를 이미지가 아니라 이 감싸는
   상자(container)가 갖고 있어야 한다 — 이미지 각각에 aspect-ratio를 주면 여러 장이
   겹쳐질 자리 자체가 안 생긴다. 반응형(폭이 줄어들 때 비율이 바뀌는 것)도 이제 이
   상자 기준으로 동작한다. */
.phi-media {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.phi-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease, transform 6s ease;
  transform: scale(1.04);
}
.phi-media img.active { opacity: 1; transform: scale(1); }
/* 사진 영역에 직접 마우스를 올리면 그 사진만 살짝 확대·채도가 올라간다 —
   블록 전체가 아니라 사진 위에 있을 때만 반응한다. 태그 색 채움은
   블록 전체(.phi-item:hover) 기준으로 그대로 둔다 — 이미 정상 동작. */
.phi-media:hover img.active { transform: scale(1.06); filter: saturate(1.15); }
.phi-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--gold-ink);
  letter-spacing: 0.14em;
  margin-bottom: 14px;
}
.phi-title {
  font-family: var(--serif);
  font-size: clamp(17px, 1.7vw, 22px);
  line-height: 1.55;
  margin: 0 0 14px;
}
.phi-body { color: var(--ink-soft); font-size: 13.5px; margin: 0; }
.phi-tags { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }
.phi-tags span {
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: var(--navy);
  border: 1px solid var(--line);
  padding: 5px 12px;
  border-radius: 999px;
  background: transparent;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.phi-item:hover .phi-tags span {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* ---------- Brands ---------- */
.brands { background: var(--bg-alt); }
.brand-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 56px; flex-wrap: wrap; }
.brand-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
/* 브랜드 개수가 4의 배수가 아니면 마지막 줄에 카드가 다 채워지지 않는다.
   예전에는 마지막 카드를 그 줄 전체로 늘려서 채웠지만, 그러면 마우스오버
   영역까지 한 줄 전체로 커져버려 카드 하나처럼 보이지 않았다. 이제는 카드
   자체 테두리(border-right/bottom)로 격자선을 그리고, 남는 칸은 그냥 빈
   공간(배경색)으로 두어 카드 크기는 다른 브랜드와 항상 동일하게 유지한다. */
.brand-card {
  position: relative;
  background: var(--bg-alt);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 30px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 168px;
  transition: background .3s ease, box-shadow .3s ease, transform .3s ease;
}
.brand-card:hover { background: #fff; box-shadow: 0 18px 40px rgba(15,23,42,.1); transform: translateY(-3px); z-index: 1; }
/* Every logo occupies the same 68px band so the names below stay on one baseline. */
.brand-card img { height: 68px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; margin-bottom: 16px; }
.brand-card img.logo-normal { padding: 17px 0; }
.brand-card h3 { font-family: var(--serif); font-size: 16px; margin: 0 0 8px; font-weight: 500; }
.brand-card p { font-size: 12px; color: var(--ink-soft); margin: 0; }
.brand-card .go { margin-top: 20px; font-size: 12px; letter-spacing: .06em; color: var(--navy); opacity: .6; transition: opacity .25s ease, letter-spacing .25s ease; }
.brand-card:hover .go { opacity: 1; letter-spacing: .1em; }

/* ---------- Shared logo card ----------
   One treatment for every partner/brand logo on the page: same frame, same
   optical size, contained (never cropped). Only the color behaviour differs. */
.logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 92px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.logo-card:not(.placeholder):hover { box-shadow: 0 10px 24px rgba(15,23,42,.08); border-color: rgba(26,26,26,.2); }
.logo-card img {
  max-height: 46px;
  max-width: 82%;
  width: auto;
  object-fit: contain;
}
#retail-grid .logo-card { height: 110px; }
#retail-grid .logo-card img {
  max-height: 78px;
  max-width: 100%;
}
.logo-card.muted img {
  filter: grayscale(1);
  opacity: .7;
  transition: opacity .25s ease, filter .25s ease;
}
.logo-card.muted:hover img { filter: grayscale(0); opacity: 1; }
.logo-card.placeholder {
  background: transparent;
  border-style: dashed;
}
.logo-card.placeholder span { font-size: 10.5px; color: var(--ink-soft); opacity: .55; text-align: center; }

.imported-strip {
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}
.imported-strip .label {
  display: block;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: .02em;
  font-size: 12px;
  margin-bottom: 18px;
}
.imported-logo-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

/* ---------- Domestic distributors ---------- */
.distributors { background: var(--bg-alt); }
.distributor-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 12px;
}

/* ---------- Retail marquee ---------- */
.retail { background: var(--bg); }
.marquee {
  margin-top: 50px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: scroll-x 38s linear infinite;
}
.marquee .logo-card { width: 152px; height: 96px; flex-shrink: 0; overflow: hidden; }
.marquee .logo-card img { max-height: 80px; max-width: none; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes scroll-x {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Export CTA ---------- */
.export-band {
  position: relative;
  background: var(--navy-deep);
  color: #fff;
  padding: 110px 0;
  text-align: center;
  overflow: hidden;
}
.export-band .export-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.75;
}
.export-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14,23,48,.72) 0%, rgba(14,23,48,.6) 50%, rgba(14,23,48,.76) 100%);
}
.export-band .wrap { position: relative; z-index: 1; }
.export-band .eyebrow { justify-content: center; color: var(--gold); }
.export-band .eyebrow::before { display: none; }
.export-band h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(19px, 2.2vw, 28px);
  max-width: 640px;
  margin: 0 auto 16px;
  line-height: 1.45;
}
.export-band .export-body {
  color: rgba(255,255,255,.78);
  max-width: 480px;
  margin: 0 auto 36px;
  font-size: 13.5px;
}
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255,255,255,.5);
  padding: 14px 34px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: .06em;
  transition: background .25s ease, border-color .25s ease;
}
.btn-outline:hover { background: #fff; color: var(--navy-deep); border-color: #fff; }

/* ---------- Footer ---------- */
footer.site-footer {
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: 56px 0 34px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.foot-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 40px; }
.foot-brand img { height: 24px; margin-bottom: 14px; }
.foot-brand .name { color: var(--ink); font-weight: 600; margin-bottom: 10px; font-size: 13px; }
.foot-cols { display: flex; gap: 64px; }
.foot-col h4 { font-size: 11.5px; letter-spacing: .08em; color: var(--ink); margin: 0 0 14px; }
.foot-col a { display: block; margin-bottom: 9px; opacity: .85; }
.foot-col a:hover { opacity: 1; }
.foot-bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
  gap: 12px;
}
.foot-legal { display: flex; gap: 20px; }
.foot-legal span, .foot-legal a { cursor: pointer; opacity: .8; }

/* ==================== About page ==================== */

/* ---------- Page hero (shorter than the home hero) ---------- */
.page-hero {
  position: relative;
  min-height: 52vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--navy-deep);
  padding-top: 90px;
}
.page-hero img.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .5;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14,23,48,.55) 0%, rgba(14,23,48,.45) 45%, rgba(14,23,48,.88) 100%);
}
.page-hero .wrap { position: relative; z-index: 1; color: #fff; padding-bottom: 64px; }
.page-hero .eyebrow { justify-content: flex-start; color: var(--gold); margin-bottom: 20px; }
.page-hero h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(26px, 3.4vw, 42px);
  margin: 0 0 16px;
}
.page-hero p { color: rgba(255,255,255,.78); max-width: 560px; font-size: 14px; margin: 0; }

/* ---------- CEO message ---------- */
.ceo-section { background: var(--bg); }
.ceo-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 80px; align-items: start; }
.ceo-side { position: sticky; top: 120px; }
.ceo-side .eyebrow { margin-bottom: 20px; }
.ceo-side h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(21px, 2.2vw, 28px);
  line-height: 1.5;
  margin: 0;
}
.ceo-body p {
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.9;
  margin: 0 0 22px;
}
.ceo-signoff { display: flex; align-items: center; gap: 20px; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.ceo-signoff img { height: 46px; width: auto; }
.ceo-signoff .name { font-family: var(--serif); font-size: 15px; color: var(--ink); }
.ceo-signoff .role { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }

/* ---------- History timeline ---------- */
.history-section { background: var(--bg-alt); }
.timeline { margin-top: 48px; position: relative; }
.timeline::before {
  content: "";
  position: absolute;
  left: 160px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--line);
}
.tl-row {
  position: relative;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 40px;
  align-items: center;
  min-height: 96px;
  padding: 18px 0;
  transition: background .25s ease;
}
.tl-row:hover { background: rgba(169, 137, 95, 0.08); }
/* The dot sits exactly on the timeline's vertical line (left: 160px), so its
   own left offset must shift back by half its own width to stay centered. */
.tl-row::before {
  content: "";
  position: absolute;
  left: 155.5px;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold-ink);
  transition: transform .25s ease;
}
.tl-row:hover::before { transform: translateY(-50%) scale(1.35); }
.tl-year { font-family: var(--serif); font-size: 14px; color: var(--ink-soft); transition: color .25s ease; }
.tl-row:hover .tl-year { color: var(--navy); }
.tl-body ul { margin: 0; padding-left: 18px; color: var(--ink-soft); font-size: 13px; }
.tl-body li { margin-bottom: 4px; }
.tl-body li:last-child { margin-bottom: 0; }

/* Featured years (recent, higher weight): larger type, no photo — weight comes
   from typography and a taller row, not imagery. */
.tl-row.featured { min-height: 168px; }
.tl-row.featured::before { width: 11px; height: 11px; left: 154.5px; }
.tl-row.featured .tl-year { font-size: 15px; color: var(--ink); font-weight: 600; }
.tl-text h4 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 12px;
}
.tl-text ul { margin: 0; padding-left: 18px; color: var(--ink-soft); font-size: 13.5px; }
.tl-text li { margin-bottom: 5px; }
.tl-row:not(.featured):not(:last-child) { border-bottom: 1px dashed var(--line); }

/* ---------- Infra cards ---------- */
.infra-section { background: var(--bg); }
.infra-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.infra-card {
  position: relative;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  transition: box-shadow .3s ease, transform .3s ease;
}
.infra-card:hover { box-shadow: 0 18px 40px rgba(15, 23, 42, .12); transform: translateY(-3px); z-index: 1; }
.infra-card .infra-media { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--navy-deep); }
.infra-card .infra-media img,
.infra-card .infra-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.infra-card .infra-media img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease, transform .5s ease;
}
.infra-card .infra-media img.active { opacity: 1; }
.infra-card:hover .infra-media img.active,
.infra-card:hover .infra-media video { transform: scale(1.05); }
.infra-card .infra-media.empty {
  display: flex;
  align-items: center;
  justify-content: center;
}
.infra-card .infra-media.empty span {
  font-family: var(--serif);
  color: rgba(255,255,255,.35);
  font-size: 13px;
  letter-spacing: .1em;
}
.infra-card .infra-body { padding: 30px 34px; }
.infra-card .eyebrow { margin-bottom: 14px; }
.infra-card h3 { font-family: var(--serif); font-size: 17px; font-weight: 500; margin: 0 0 10px; }
.infra-card p { font-size: 13px; color: var(--ink-soft); margin: 0 0 16px; }
.infra-card .phi-tags span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--line);
  padding: 5px 13px;
  border-radius: 999px;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.infra-card:hover .phi-tags span { background: var(--signature); border-color: var(--signature); color: #fff; }

/* ---------- CI section ---------- */
.ci-section { background: var(--bg-alt); }
.ci-grid { margin-top: 48px; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 60px; }
.ci-mark {
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 30px;
  text-align: center;
  transition: box-shadow .3s ease, transform .3s ease;
}
.ci-mark:hover { box-shadow: 0 18px 40px rgba(15, 23, 42, .1); transform: translateY(-3px); }
.ci-mark img { height: 210px; width: auto; max-width: 100%; margin-bottom: 18px; transition: transform .3s ease; }
.ci-mark:hover img { transform: scale(1.06); }
.ci-mark .subtitle { font-family: var(--serif); font-size: 16px; color: var(--ink); }
.ci-mark .caption { font-size: 11.5px; color: var(--ink-soft); margin-top: 6px; letter-spacing: .04em; }
.ci-list { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.ci-item {
  background: #fff;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 24px;
  align-items: start;
  flex: 1;
  transition: background .25s ease;
}
.ci-item:hover { background: var(--bg-alt); }
.ci-item .ci-num { font-family: var(--serif); font-size: 13px; color: var(--gold-ink); letter-spacing: .04em; padding-top: 2px; }
.ci-item h3 { font-family: var(--serif); font-size: 16px; font-weight: 500; margin: 0 0 8px; }
.ci-item p { font-size: 13px; color: var(--ink-soft); margin: 0; }
.ci-swatch { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; }
.ci-swatch .chip { width: 22px; height: 22px; border-radius: 5px; border: 1px solid var(--line); }
.ci-swatch code { font-size: 12px; color: var(--ink-soft); }

/* ---------- Reveal animation ---------- */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
[data-reveal].in { opacity: 1; transform: translateY(0); }

/* ---------- Mobile ---------- */
/* ---------- Mobile nav overlay ---------- */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--navy-deep);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-nav.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.mobile-nav nav { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.mobile-nav a {
  font-family: var(--serif);
  font-size: 22px;
  color: #fff;
  opacity: .88;
}
.mobile-nav a:hover { opacity: 1; }
body.nav-open { overflow: hidden; }

@media (max-width: 900px) {
  .main-nav { display: none; }
  .menu-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 34px;
    height: 34px;
    border: none;
    background: none;
    cursor: pointer;
    z-index: 200;
    position: relative;
  }
  .menu-btn span {
    display: block;
    width: 100%;
    height: 1.5px;
    background: currentColor;
    transition: transform .25s ease, opacity .25s ease;
  }
  .menu-btn.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .menu-btn.open span:nth-child(2) { opacity: 0; }
  .menu-btn.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .menu-btn.open { color: #fff !important; }
  .phi-item { grid-template-columns: 1fr; gap: 26px; padding: 52px 0; }
  .phi-item.reverse .phi-media { order: 0; }
  .phi-item.phi-lead { padding-bottom: 56px; }
  /* 좁은 화면에서는 사진이 위, 글이 아래로 쌓이면서 태그가 옅은 테두리만으로는
     눈에 잘 안 띄어서, 이 폭에서는 배경을 채운 알약 형태로 바꾼다. */
  .phi-tags span {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
  }
  .brand-grid { grid-template-columns: repeat(2, 1fr); }
  .distributor-grid { grid-template-columns: repeat(4, 1fr); }
  .imported-logo-grid { grid-template-columns: repeat(3, 1fr); }
  .foot-top { flex-direction: column; }
  .foot-cols { gap: 40px; }

  .ceo-grid { grid-template-columns: 1fr; gap: 32px; }
  .ceo-side { position: static; }
  .timeline::before { left: 8px; }
  .tl-row { grid-template-columns: 1fr; gap: 8px; align-items: start; padding: 20px 0 20px 26px; }
  .tl-row::before { left: 3.5px; top: 24px; transform: none; }
  .tl-row:hover::before { transform: scale(1.35); }
  .tl-row.featured::before { left: 2.5px; }
  .infra-grid { grid-template-columns: 1fr; }
  .ci-grid { grid-template-columns: 1fr; }
  .ci-item { grid-template-columns: 1fr; gap: 8px; }

  /* Narrow portrait viewports show only a thin vertical slice of the wide
     hero photo under object-fit: cover; shift the focal point right so the
     cat and dog (positioned right-of-center in the source image) stay in
     frame instead of the empty wall/plant area on the left. */
  .hero img.hero-bg { object-position: 78% center; }
}

/* ---------- Corporate weight tuning ----------
   Now that headings share the same face as body text (no display serif),
   they need real weight to still read as headings instead of just "bigger
   text." Centralized here instead of touching each rule above. */
.brand-mark,
.ci-mark .subtitle,
.tl-year,
.ci-item .ci-num,
.mobile-nav a,
.ceo-signoff .name {
  font-weight: 600;
}
.hero h1,
h2.section-title,
.export-band h2,
.page-hero h1,
.ceo-side h2,
.tl-text h4,
.brand-card h3,
.infra-card h3,
.ci-item h3,
.phi-title {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* 아무도없개 로고가 다른 유통사 로고 대비 작아 보여서 20% 확대 */
img[alt="아무도없개"] {
  transform: scale(1.2);
}

/* 개인정보처리방침 / 이용약관 팝업 (푸터) */
.legal-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: rgba(14, 23, 48, 0.8);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.legal-modal-backdrop.open { opacity: 1; pointer-events: auto; }
.legal-modal-card {
  position: relative;
  background: #fff;
  border-radius: 10px;
  max-width: 760px;
  width: 100%;
  max-height: 82vh;
  overflow-y: auto;
  padding: 40px 32px 32px;
  transform: scale(0.97);
  transition: transform 0.25s ease;
}
.legal-modal-backdrop.open .legal-modal-card { transform: scale(1); }
.legal-modal-title { margin: 0 0 20px; font-size: 1.3rem; font-weight: 700; color: var(--ink); }
.legal-modal-body {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: 0.85rem;
  line-height: 1.7;
  color: #374151;
  margin: 0;
}
.legal-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(15, 23, 42, 0.08);
  color: var(--ink);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}
.legal-modal-close:hover { background: rgba(15, 23, 42, 0.16); }