: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; }
body {
  margin: 0;
  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; }
.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);
}
.phi-item:last-child { border-bottom: 1px solid var(--line); }
.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; }

.phi-media { margin: 0; overflow: hidden; }
.phi-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .5s ease;
}
.phi-media:hover img { transform: scale(1.05); }
.phi-media figcaption {
  margin-top: 12px;
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  opacity: .75;
}
.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;
}

/* ---------- 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);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.brand-card {
  position: relative;
  background: var(--bg-alt);
  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;
}
.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 { 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:hover .infra-media img,
.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; }
  .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); }