/* ==========================================================================
   v2 additions (2026-10-02) — Figma redesign components actually in use.
   Appended, not merged into style.css, so the base system stays diffable.
   Uses only tokens already defined in style.css — no new colors invented.

   🔴 2026-10-02: an earlier draft of this file also defined .infra-grid and
   .sourcing-card — both already exist in style.css (real, in production use
   by business.html / stock.html) with different rules. Loading after
   style.css meant this file silently overrode them. Removed. Before adding
   any new class here, grep style.css first — don't redefine an existing name.
   ========================================================================== */

/* ---------- Dark hero (Home / How It Works / About / Media / Contact / Stock) */
.hero-dark {
  background: var(--navy-950);
  padding-block: clamp(80px, 9vw, 140px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Optional photo background — free stock (Pexels, no attribution required),
   scrimmed with the brand navy so text stays AA-legible. Used sparingly:
   Home + How It Works only, so the site stays "global minimal" (디자인방향.md)
   rather than a stock-photo wall. */
.hero-dark--photo { background-size: cover; background-position: center; }
.hero-dark--photo::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,26,51,.88) 0%, rgba(8,26,51,.80) 45%, rgba(8,26,51,.94) 100%);
}
.hero-dark--photo .container { position: relative; z-index: 1; }
.hero-dark .container { display: flex; flex-direction: column; align-items: center; }
.hero-dark .overline--accent { color: var(--orange-500); }
.hero-dark h1 { color: #fff; max-width: 880px; margin-top: var(--sp-3); }
.hero-dark .hero-dark__sub {
  margin-top: var(--sp-5); max-width: 640px; color: var(--text-on-dark-sub);
  font-size: var(--fs-body-lg); line-height: 1.6;
}
.hero-dark .btn-row { justify-content: center; margin-top: var(--sp-7); }
.hero-dark .hero-dark__fine { margin-top: var(--sp-4); font-size: var(--fs-small); color: var(--text-on-dark-sub); }

/* ---------- Stat band (CRM trust numbers — index.html) ------------------- */
.stat-band { background: var(--navy-900); padding-block: var(--sp-8); }
.stat-band__grid { display: grid; gap: var(--sp-7); }
@media (min-width: 900px) { .stat-band__grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } }
.stat-band__item .num { font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); font-weight: 800; color: var(--orange-500); line-height: 1; }
.stat-band__item p { margin-top: var(--sp-3); color: var(--text-on-dark-sub); font-size: var(--fs-body); line-height: 1.55; max-width: 320px; }

/* ---------- Process teaser row (index.html — full steps live in business.html .steps) */
.process-teaser { padding-block: var(--section-y); }
.process-teaser__grid { display: grid; gap: var(--sp-4); margin-top: var(--sp-7); }
@media (min-width: 900px) { .process-teaser__grid { grid-template-columns: repeat(5, 1fr); } }
.process-step { background: var(--bg-alt); border-radius: 12px; padding: var(--sp-5) var(--sp-4); text-align: center; }
.process-step .n { font-size: 1.5rem; font-weight: 800; color: var(--orange-500); }
.process-step p { margin-top: var(--sp-2); font-size: var(--fs-small); font-weight: 600; color: var(--text-primary); }

/* ---------- YouTube feature (index.html — English channel, click-to-play) ----
   Facade: no third-party request until the visitor presses play. */
.yt-feature { background: var(--navy-950); padding-block: var(--section-y); }
.yt-feature__head { max-width: 62ch; }
.yt-feature__head .h2 { margin-top: var(--sp-3); color: #fff; }
.yt-feature__head p { margin-top: var(--sp-4); color: var(--text-on-dark-sub); font-size: var(--fs-body-lg); line-height: 1.6; }
.yt-feature__grid { display: grid; gap: var(--sp-6); margin-top: var(--sp-7); align-items: start; }
@media (min-width: 960px) { .yt-feature__grid { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: var(--sp-7); } }

.yt-player { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--navy-900); }
.yt-player img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-player__play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(8,26,51,0) 55%, rgba(8,26,51,.55) 100%);
  text-decoration: none; cursor: pointer;
}
.yt-player__btn {
  width: 76px; height: 76px; border-radius: 50%; background: var(--orange-500); color: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 28px rgba(0,0,0,.35);
  transition: transform .15s ease;
}
.yt-player__play:hover .yt-player__btn, .yt-player__play:focus-visible .yt-player__btn { transform: scale(1.07); }
.yt-player__play:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.yt-player__meta { position: absolute; left: var(--sp-4); bottom: var(--sp-3); color: #fff; font-size: var(--fs-small); font-weight: 600; }
.yt-feature__note { margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--text-on-dark-sub); line-height: 1.55; }

.yt-side h3 { font-size: var(--fs-small); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-500); }
.yt-chapters { list-style: none; margin: var(--sp-3) 0 0; padding: 0; border-top: 1px solid rgba(255,255,255,.16); }
.yt-chapters li { border-bottom: 1px solid rgba(255,255,255,.16); }
.yt-chapters a {
  display: flex; gap: var(--sp-3); align-items: baseline; padding: var(--sp-3) var(--sp-2);
  color: #fff; text-decoration: none; font-size: var(--fs-body); line-height: 1.4;
}
.yt-chapters a:hover, .yt-chapters a:focus-visible { background: rgba(255,255,255,.07); }
.yt-chapters a[aria-current="true"] { background: rgba(255,107,44,.16); }
.yt-chapters .t { flex: none; min-width: 3.2em; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--orange-500); }

.yt-facts { display: grid; gap: var(--sp-4); margin-top: var(--sp-7); padding-top: var(--sp-6); border-top: 1px solid rgba(255,255,255,.16); }
@media (min-width: 720px) { .yt-facts { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } }
.yt-facts .num { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem); font-weight: 800; color: #fff; line-height: 1.1; }
.yt-facts p { margin-top: var(--sp-2); color: var(--text-on-dark-sub); font-size: var(--fs-small); line-height: 1.55; max-width: 34ch; }

.yt-feature__foot { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6); align-items: center; margin-top: var(--sp-7); }
.yt-feature__cadence { color: var(--text-on-dark-sub); font-size: var(--fs-small); margin: 0; }
.yt-feature__src { margin-top: var(--sp-5); font-size: var(--fs-small); color: var(--text-on-dark-sub); line-height: 1.55; max-width: 90ch; }

/* More from the channel (index.html) */
.yt-more { margin-top: var(--sp-7); padding-top: var(--sp-6); border-top: 1px solid rgba(255,255,255,.16); }
.yt-more h3 { font-size: var(--fs-small); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-500); }
.yt-more__grid { display: grid; gap: var(--sp-5); margin-top: var(--sp-4); }
@media (min-width: 720px) { .yt-more__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); } }
.yt-more__card { display: block; text-decoration: none; color: #fff; }
.yt-more__card img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; display: block; }
.yt-more__tag { display: block; margin-top: var(--sp-3); font-size: var(--fs-small); font-weight: 600; color: var(--text-on-dark-sub); }
.yt-more__title { display: block; margin-top: var(--sp-1); font-size: var(--fs-body-lg); font-weight: 600; line-height: 1.35; }
.yt-more__card:hover .yt-more__title, .yt-more__card:focus-visible .yt-more__title { color: var(--orange-500); }