/* Home content uses the wider measure; scoped to .page-home only. */
.page-home .site-main .container {
  width: min(100% - 2rem, var(--container-wide));
}

/* ---- Hero -----------------------------------------------------------------
   One column, left aligned. The weight comes from type size and air, not from
   an illustration — the band still reads if every image on the site fails.
   Below the CTAs, the three facts that actually qualify this company. */
.home-hero {
  padding: var(--space-7) 0 var(--space-6);
  background: var(--color-primary-dark);
  border-bottom: 3px solid var(--color-accent);
  color: #fff;
}

.home-hero-copy {
  max-width: 46rem;
}

.home-hero h1 {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-4xl);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.035em;
  word-break: keep-all;
}

.home-hero-lead {
  margin: 0 0 var(--space-6);
  font-size: var(--fs-lg);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: 0.01em;
}

/* Below ~480px the two Korean CTA labels cannot share a row without shrinking
   to stubs, so they take the full width instead of stacking at half measure. */
.home-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.home-cta .btn {
  flex: 1 1 100%;
}

@media (min-width: 480px) {
  .home-cta .btn {
    flex: 0 0 auto;
  }
}

/* Primary CTA sits on the navy hero → invert to a white button with navy text. */
.home-cta .btn-primary {
  background: #fff;
  color: var(--color-primary-dark);
  border-color: #fff;
}

.home-cta .btn-primary:hover {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.88);
  color: var(--color-primary-dark);
}

.home-cta .btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}

.home-cta .btn-ghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

/* ---- 이용정보 -------------------------------------------------------------
   The three things people phone up to ask for. Sits directly under the hero on
   a soft band so it separates from the white page without becoming a row of
   cards. The site's declaration line is inverted here: the label stays small
   and tracked, the value carries the weight, because the value is what the
   reader came for. */
.home-info {
  background: var(--color-soft);
  border-bottom: 1px solid var(--color-rule);
  padding: var(--space-6) 0;
}

.home-info-grid {
  display: grid;
  gap: 0;
}

/* 서울 사무소 — 한 줄을 통째로 쓰는 안내 블록. 아래 세 값과 같은 표기를 쓰되
   폭을 나눠 갖지 않아 긴 주소가 자연스럽게 흐른다. */
.home-info-office {
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-rule-strong);
}

.home-info-office .home-info-addr {
  max-width: var(--measure-prose);
}

.home-info-item {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-rule-strong);
  /* A grid item defaults to min-width:auto, which the nowrap account number
     would raise to its own width. Column widths are decided by the track
     definitions below; the item follows them. */
  min-width: 0;
}

.home-info-item:first-child {
  border-top: 0;
  padding-top: 0;
}

.home-info-label {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-accent-dark);
}

.home-info-value {
  display: block;
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--color-primary-dark);
  word-break: keep-all;
}

/* The phone number is the single loudest value on the band. */
.home-info-tel {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.home-info-tel:hover,
.home-info-tel:focus-visible {
  color: var(--color-accent-dark);
}

/* The account number is scanned digit by digit and must never wrap mid-number,
   so it gets tabular figures and its own line. It sits just under the phone
   number in size — loud enough to find, not louder than 고객센터. */
.home-info-account {
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Addresses are read, not scanned — they get the taller line. */
.home-info-addr {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.6;
}

.home-info-addr-ru {
  word-break: normal;
  overflow-wrap: anywhere;
}

.home-info-sub {
  margin: var(--space-2) 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-muted);
  word-break: keep-all;
}

.home-info-sub a {
  color: var(--color-primary);
  font-weight: 600;
}

@media (min-width: 768px) {
  .home-info {
    padding: var(--space-7) 0;
  }

  /* Two across on a tablet. Four columns here would leave each one too narrow
     for the account number and the Moscow address. */
  .home-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-7);
    row-gap: var(--space-5);
  }

  .home-info-item {
    padding: 0;
    border-top: 0;
  }

  /* Vertical hairlines instead of stacked rules once they sit side by side. */
  .home-info-item:nth-child(even) {
    padding-left: var(--space-6);
    border-left: 1px solid var(--color-rule-strong);
  }
}

/* 서울 사무소가 위로 빠져 세 값만 남는다. 계좌번호가 줄바꿈 없이 들어가는
   폭이 되는 지점부터 한 줄에 셋을 놓는다. */
@media (min-width: 1024px) {
  .home-info-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-6);
    row-gap: 0;
  }

  .home-info-item:nth-child(even),
  .home-info-item + .home-info-item {
    padding-left: var(--space-5);
    border-left: 1px solid var(--color-rule-strong);
  }
}

/* ---- Section headers carry the signature orange keyline ---- */
.page-home .section-title {
  position: relative;
  padding-top: var(--space-4);
}

.page-home .section-title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2rem;
  height: 3px;
  background: var(--color-accent);
}

/* ---- Core services --------------------------------------------------------
   The two things INTERSKA actually performs. Ruled columns, not cards: the
   guides live one section below and no longer double as services. */
.home-services {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--color-rule);
}

.home-service {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-rule);
  color: inherit;
  text-decoration: none;
}

.home-service .hs-index {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-accent-dark);
}

.home-service h3 {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-primary-dark);
}

.home-service p {
  margin: 0;
  max-width: 30rem;
  color: var(--color-muted);
  word-break: keep-all;
}

.home-service .hs-more {
  margin-top: var(--space-2);
  color: var(--color-primary);
  font-weight: 700;
  font-size: var(--fs-sm);
}

.home-service:hover .hs-more,
.home-service:focus-visible .hs-more {
  color: var(--color-accent-dark);
}

.home-service:hover h3 {
  color: var(--color-primary);
}

/* ---- Usage steps — a real ordered sequence, so it is numbered ---- */
.home-steps {
  counter-reset: step;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-rule);
}

.home-steps li {
  position: relative;
  padding: var(--space-4) 0 var(--space-4) 3rem;
  border-bottom: 1px solid var(--color-rule);
}

.home-steps li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: var(--space-4);
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--color-accent-dark);
}

.home-steps strong {
  display: block;
  margin-bottom: 0.15rem;
  font-size: var(--fs-md);
  color: var(--color-primary-dark);
}

.home-steps span {
  color: var(--color-muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
  word-break: keep-all;
}

/* ---- Guides ---- */
.home-guides {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--color-rule);
}

.home-guide-card a {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-rule);
  text-decoration: none;
  color: inherit;
}

.home-guides h3 {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--color-primary-dark);
}

.home-guide-card a:hover h3,
.home-guide-card a:focus-visible h3 {
  color: var(--color-accent-dark);
}

.home-guides p {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--fs-sm);
  word-break: keep-all;
}

/* ---- Support + notices ---- */
.home-support {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

.home-support-contact {
  margin: 0;
}

.home-support-phone {
  display: inline-block;
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-primary-dark);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.home-support-phone:hover {
  color: var(--color-accent-dark);
}

.home-support-hours {
  margin: var(--space-2) 0 0;
  color: var(--color-muted);
  font-size: var(--fs-sm);
}

.home-notice-card h2 {
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-primary-dark);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-primary-dark);
}

.home-notice-more {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-sm);
}

/* ---- Featured products — same grid language as /shop ---- */
.home-shop-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-4);
}

.home-shop-foot {
  margin: var(--space-6) 0 0;
}

@media (min-width: 768px) {
  .home-hero {
    padding: var(--space-8) 0 var(--space-7);
  }

  .home-steps {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-7);
  }

  /* Both services sit on one row — one shared rule under the pair, not two
     segments interrupted by the column gap. */
  .home-services {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-7);
    border-bottom: 1px solid var(--color-rule);
  }

  .home-service {
    border-bottom: 0;
    padding-bottom: var(--space-6);
  }

  .home-guides {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-6);
    border-bottom: 1px solid var(--color-rule);
  }

  .home-guide-card a {
    height: 100%;
    border-bottom: 0;
    padding-bottom: var(--space-5);
  }

  .home-support {
    grid-template-columns: 0.75fr 1.25fr;
    column-gap: var(--space-7);
  }

  .home-shop-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6) var(--space-5);
  }
}