/*
 * =========================================================
 * Luxury Clean / Index Page
 * Figma: index / PC 1440 + Mobile 428
 * =========================================================
 *
 * 공통 토큰: ../../css/styleGuide.css
 * 공통 컴포넌트: ../../components/component.css
 */

html {
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  overflow-x: hidden;
}

.home-container {
  width: min(calc(100% - (var(--lc-semantic-space-page-gutter-desktop) * 2)),
      var(--lc-semantic-layout-container-desktop));
  margin-inline: auto;
}

.home-header__brand,
.home-header__brand picture {
  display: block;
}

.home-section {
  padding-block: var(--lc-semantic-space-section-y-desktop);
  background: var(--lc-semantic-color-bg-base);
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-section--subtle {
  background: var(--lc-semantic-color-bg-subtle);
}

.home-section__inner {
  display: flex;
  flex-direction: column;
  gap: var(--lc-space-36);
}

.home-section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--lc-space-12);
}

.home-section-head--wide {
  width: 100%;
}

.home-section-head__eyebrow {
  color: var(--lc-semantic-color-brand-primary);
  font-size: 20px;
  line-height: 1.4;
  font-weight: 700;
}

.home-section-head__title {
  color: var(--lc-semantic-color-text-heading);
  font-size: var(--lc-type-desktop-section-size);
  line-height: var(--lc-type-desktop-section-line-height);
  font-weight: 700;
}

.home-section-head__description {
  color: var(--lc-semantic-color-text-secondary);
  font-size: var(--lc-type-desktop-body-l-size);
  line-height: var(--lc-type-desktop-body-l-line-height);
  font-weight: 400;
}

.home-section-head--inverse .home-section-head__title,
.home-section-head--inverse .home-section-head__description {
  color: var(--lc-semantic-color-text-inverse);
}

/* =========================================================
   HERO
   ========================================================= */

.home-hero {
  position: relative;
  height: 640px;
  overflow: hidden;
  color: var(--lc-semantic-color-text-inverse);
}

.home-hero__media,
.home-hero__media img,
.home-contact__media,
.home-contact__media img,
.home-feature-card__media,
.home-feature-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.home-hero__media img,
.home-contact__media img,
.home-feature-card__media img {
  object-fit: cover;
}

.home-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(3.82, 10.20, 19.13, 0.82) 0%, rgba(3.82, 10.20, 19.13, 0.58) 58%, rgba(3.82, 10.20, 19.13, 0.22) 100%);
  overflow: hidden;
}

.home-hero__content {
  position: relative;
  z-index: 1;
  height: 100%;
  padding-top: 140px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--lc-space-24);
}

.home-hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--lc-space-24);
}

.home-hero__heading {
  display: flex;
  flex-direction: column;
  gap: var(--lc-space-12);
}

.home-hero__eyebrow {
  font-size: var(--lc-type-desktop-title-size);
  line-height: 1.4;
  font-weight: 500;
}

.home-hero__title {
  margin: 0;
  font-size: var(--lc-type-desktop-display-size);
  line-height: var(--lc-type-desktop-display-line-height);
  font-weight: 700;
  letter-spacing: 0;
}

.home-hero__description {
  font-size: var(--lc-type-desktop-title-size);
  line-height: 1.5;
  font-weight: 400;
}

.home-hero__actions,
.home-contact__actions {
  display: flex;
  gap: var(--lc-space-12);
}

/* =========================================================
   TRUST
   ========================================================= */

.home-trust {
  padding-block: 22px;
  background: var(--lc-semantic-color-bg-subtle);
}

.home-trust__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--lc-space-14);
}

.home-trust-card {
  min-width: 0;
  height: 97px;
  padding: var(--lc-space-24) var(--lc-space-20);

  display: flex;
  flex-direction: column;
  gap: var(--lc-space-6);

  border: 1px solid var(--lc-semantic-color-border-default);
  border-radius: var(--lc-semantic-radius-card);
  background: var(--lc-semantic-color-bg-base);
}

.home-trust-card strong {
  color: var(--lc-semantic-color-text-primary);
  font-size: var(--lc-type-desktop-body-l-size);
  line-height: 1.333;
  font-weight: 700;
}

.home-trust-card span {
  color: var(--lc-semantic-color-text-secondary);
  font-size: var(--lc-type-desktop-body-s-size);
  line-height: 1.4;
}

/* =========================================================
   REUSABLE CARD GRIDS
   ========================================================= */

.home-card-grid {
  display: grid;
  gap: var(--lc-space-14);
}

.home-card-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home-card-grid .lc-info-card {
  width: 100%;
}

.home-problem {
  display: flex;
  flex-direction: column;
  gap: var(--lc-space-20);
}

.home-problem-card {
  min-height: 200px;
  border-radius: var(--lc-semantic-radius-card);
}

.home-conclusion {
  min-height: 74px;
  padding: 16px var(--lc-space-24);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lc-space-24);

  border-radius: var(--lc-semantic-radius-card);
  background: var(--lc-semantic-color-bg-brand-soft);
}

.home-conclusion strong {
  color: var(--lc-semantic-color-text-primary);
  font-size: var(--lc-type-desktop-title-size);
  line-height: 1.4;
  font-weight: 700;
}

.home-conclusion span {
  flex: 0 0 auto;
  padding: var(--lc-space-12);

  border-radius: var(--lc-semantic-radius-pill);
  background: var(--lc-semantic-color-brand-action);
  color: var(--lc-semantic-color-text-inverse);

  font-size: var(--lc-type-desktop-caption-size);
  line-height: 1.4;
  font-weight: 700;
}

/* =========================================================
   SERVICE
   ========================================================= */

.home-service {
  display: flex;
  flex-direction: column;
}

.home-service__tabs {
  border-bottom: 2px solid var(--lc-semantic-color-border-default);
}

.home-service__tabs .lc-tab:not(.is-active) {
  font-weight: 500;
}

.home-service__image {
  width: 100%;
  height: 352px;
  padding-top: var(--lc-space-32);
  display: block;
}

.home-service__image img {
  width: 100%;
  height: 320px;
  display: block;
  object-fit: cover;
  border-radius: 12px;
}

.home-service__detail {
  padding-top: var(--lc-space-48);
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr);
}

.home-service__copy {
  display: flex;
  flex-direction: column;
  gap: var(--lc-space-12);
}

.home-service__copy h3 {
  color: var(--lc-semantic-color-text-heading);
  font-size: var(--lc-type-desktop-heading-l-size);
  line-height: var(--lc-type-desktop-heading-l-line-height);
  font-weight: 700;
}

.home-service__copy p {
  color: var(--lc-semantic-color-text-secondary);
  font-size: var(--lc-type-desktop-body-m-size);
  line-height: var(--lc-type-desktop-body-m-line-height);
}

.home-service__scope {
  margin: 0;
  padding: 0;
  list-style: none;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 0;
}

.home-service__scope li {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--lc-space-8);

  color: var(--lc-semantic-color-text-primary);
  font-size: var(--lc-type-desktop-title-size);
  line-height: 1.4;
  font-weight: 400;
  white-space: nowrap;
}

.home-service__scope img {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
}

/* =========================================================
   WHY LUXURY CLEAN
   ========================================================= */

.home-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lc-space-14);
}

.home-feature-card {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  padding: var(--lc-space-28);

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--lc-space-14);

  border-radius: var(--lc-semantic-radius-card-lg);
  color: var(--lc-semantic-color-text-inverse);
}

.home-feature-card__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(25, 31, 40, 0.90) 31%, rgba(25, 31, 40, 0.08) 66%);
}

.home-feature-card__copy,
.home-feature-card__tags {
  position: relative;
  z-index: 1;
}

.home-feature-card__copy {
  display: flex;
  flex-direction: column;
  gap: var(--lc-space-14);
}

.home-feature-card__copy h3 {
  font-size: var(--lc-type-desktop-heading-m-size);
  line-height: var(--lc-type-desktop-heading-m-line-height);
  font-weight: 700;
}

.home-feature-card__copy p {
  font-size: var(--lc-type-desktop-body-m-size);
  line-height: var(--lc-type-desktop-body-m-line-height);
}

.home-feature-card__tags {
  display: flex;
  align-items: center;
  gap: var(--lc-space-10);
}

/* =========================================================
   REAL CASES
   ========================================================= */

.home-case {
  display: grid;
  grid-template-columns: 736px minmax(0, 1fr);
  gap: var(--lc-space-24);
}

.home-case__image {
  height: 400px;
  display: block;
}

.home-case__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--lc-semantic-radius-card-lg);
}

.home-case__info {
  min-height: 400px;
  padding: 34px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  border: 1px solid var(--lc-semantic-color-border-default);
  border-radius: var(--lc-semantic-radius-card-lg);
  background: var(--lc-semantic-color-bg-subtle);
}

.home-case__top {
  display: flex;
  flex-direction: column;
  gap: var(--lc-space-12);
}

.home-case__top span {
  color: var(--lc-semantic-color-brand-primary);
  font-size: var(--lc-type-desktop-caption-size);
  line-height: 1.4;
  font-weight: 700;
}

.lc-info-card__title {
  font-weight: 700;
}

.home-case__top h3 {
  color: var(--lc-semantic-color-text-heading);
  font-size: var(--lc-type-desktop-heading-l-size);
  line-height: var(--lc-type-desktop-heading-l-line-height);
  font-weight: 700;
}

.home-case__top p {
  color: var(--lc-semantic-color-text-secondary);
  font-size: var(--lc-type-desktop-body-m-size);
  line-height: var(--lc-type-desktop-body-m-line-height);
}

.home-case__stats {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--lc-space-6);
}

.home-case__stats>div {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.home-case__stats dt {
  color: var(--lc-semantic-color-text-secondary);
  font-size: var(--lc-type-desktop-body-s-size);
  line-height: 1.4;
}

.home-case__stats dd {
  margin: 0;
  color: var(--lc-semantic-color-text-primary);
  font-size: var(--lc-type-desktop-body-s-size);
  line-height: 1.357;
  font-weight: 700;
  text-align: right;
}

/* =========================================================
   PROCESS
   ========================================================= */

.home-process-card {
  min-height: 160px;
  border-radius: var(--lc-semantic-radius-card);
}

/* =========================================================
   CONTACT
   ========================================================= */

.home-contact {
  position: relative;
  min-height: 442px;
  overflow: hidden;
  padding-block: var(--lc-semantic-space-section-y-desktop);
}

.home-contact__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.20) 43%, rgba(0, 0, 0, 0) 70%);
}

.home-contact__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--lc-space-24);
}

/* =========================================================
   FAQ
   ========================================================= */

.home-faq {
  display: grid;
  grid-template-columns: 332px minmax(0, 832px);
  gap: var(--lc-space-36);
  align-items: start;
}

.home-faq__intro {
  display: flex;
  flex-direction: column;
  gap: var(--lc-space-24);
}

.home-faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--lc-space-12);
}

.home-faq__list .lc-accordion {
  width: 100%;
}

.home-faq__list .lc-accordion__answer {
  word-break: keep-all;
}

.home-faq__intro a {
  width: 156px;
}

/* =========================================================
   MOBILE / 428
   ========================================================= */

@media (max-width: 767px) {
  .home-container {
    width: calc(100% - (var(--lc-semantic-space-page-gutter-mobile) * 2));
    max-width: var(--lc-semantic-layout-content-mobile);
  }

  .home-section {
    padding-block: var(--lc-semantic-space-section-y-mobile);
  }

  .home-section__inner {
    gap: var(--lc-space-32);
  }

  .home-section-head__eyebrow {
    font-size: 14.4px;
    line-height: 1.4;
  }

  .home-section-head__title {
    max-width: 100%;
    font-size: var(--lc-type-mobile-section-size);
    line-height: var(--lc-type-mobile-section-line-height);
  }

  .home-section-head__description {
    max-width: 100%;
    font-size: 14.4px;
    line-height: 1.5;
  }

  /* Hero */
  .home-hero {
    height: 500px;
  }

  .home-hero__overlay {
    background: linear-gradient(90deg, rgba(3.82, 10.20, 19.13, 0.82) 0%, rgba(3.82, 10.20, 19.13, 0.58) 58%, rgba(3.82, 10.20, 19.13, 0.22) 100%);
  }

  .home-hero__content {
    height: 100%;
    padding-top: 64px;
    padding-bottom: 24px;
    justify-content: space-between;
    gap: 0;
  }

  .home-hero__copy {
    gap: var(--lc-space-20);
  }

  .home-hero__heading {
    gap: var(--lc-space-10);
  }

  .home-hero__eyebrow {
    font-size: 14.4px;
  }

  .home-hero__title {
    font-size: var(--lc-type-mobile-display-size);
    line-height: var(--lc-type-mobile-display-line-height);
  }

  .home-hero__description {
    font-size: var(--lc-type-mobile-body-size);
    line-height: var(--lc-type-mobile-body-line-height);
  }

  .home-hero__actions,
  .home-contact__actions {
    width: 100%;
    flex-direction: column;
    gap: var(--lc-space-8);
  }

  .home-hero__actions .lc-btn,
  .home-contact__actions .lc-btn,
  .home-faq__intro .lc-btn {
    width: 100%;
  }

  /* Trust */
  .home-trust {
    padding-block: var(--lc-space-20);
  }

  .home-trust__grid {
    grid-template-columns: 1fr;
    gap: var(--lc-space-8);
  }

  .home-trust-card {
    height: 97px;
    border-radius: var(--lc-semantic-radius-card-sm);
  }

  .home-trust-card strong {
    font-size: 16.2px;
  }

  .home-trust-card span {
    font-size: var(--lc-type-mobile-body-s-size);
    line-height: var(--lc-type-mobile-body-s-line-height);
  }

  /* Problem / Process */
  .home-card-grid--four {
    grid-template-columns: 1fr;
    gap: var(--lc-space-8);
  }

  .home-problem-card {
    min-height: 160px;
  }

  .home-conclusion {
    min-height: 74px;
    justify-content: center;
    text-align: center;
  }

  .home-conclusion strong {
    font-size: 14.4px;
    line-height: 1.4;
    font-weight: 700;
  }

  .home-conclusion span {
    display: none;
  }

  /* Service */
  .home-service__tabs {
    width: 100%;
    overflow-x: auto;
  }

  .home-service__tabs .lc-tab {
    font-size: 16.2px;
  }

  .home-service__tabs .lc-tab:not(.is-active) {
    font-weight: 500;
  }

  .home-service__image {
    height: 232px;
  }

  .home-service__image img {
    height: 200px;
  }

  .home-service__detail {
    padding-top: var(--lc-space-48);
    display: flex;
    flex-direction: column;
    gap: var(--lc-space-24);
  }

  .home-service__copy h3 {
    font-size: var(--lc-type-mobile-section-size);
    line-height: var(--lc-type-mobile-section-line-height);
  }

  .home-service__copy p {
    font-size: var(--lc-type-mobile-body-size);
    line-height: var(--lc-type-mobile-body-line-height);
  }

  .home-service__scope {
    grid-template-columns: 1fr;
    gap: var(--lc-space-14);
  }

  .home-service__scope li {
    font-size: 14.4px;
    line-height: 1.4;
    font-weight: 700;
    white-space: normal;
  }

  /* Feature cards */
  .home-feature-grid {
    grid-template-columns: 1fr;
    gap: var(--lc-space-12);
  }

  .home-feature-card {
    min-height: 240px;
    padding: var(--lc-space-20);
  }

  .home-feature-card__copy h3 {
    font-size: 19.9px;
    line-height: 1.286;
    font-weight: 700;
  }

  .home-feature-card__copy p {
    font-size: var(--lc-type-mobile-body-s-size);
    line-height: 1.5;
  }

  .home-feature-card__tags {
    gap: var(--lc-space-10);
  }

  /* Case */
  .home-case {
    grid-template-columns: 1fr;
    gap: var(--lc-space-16);
  }

  .home-case__image {
    height: 220px;
  }

  .home-case__info {
    min-height: 330px;
    padding: var(--lc-space-24);
  }

  .home-case__top h3 {
    font-size: 21.6px;
    line-height: 1.4;
    font-weight: 700;
  }

  .home-case__top p {
    font-size: var(--lc-type-mobile-body-size);
    line-height: var(--lc-type-mobile-body-line-height);
  }

  .home-case__stats dt {
    font-size: var(--lc-type-mobile-body-s-size);
    line-height: var(--lc-type-mobile-body-s-line-height);
  }

  .home-case__stats dd {
    font-size: 12.6px;
  }

  .home-process-card {
    min-height: 130px;
  }

  /* Contact */
  .home-contact {
    min-height: 460px;
    padding-block: var(--lc-space-64);
  }

  .home-contact__shade {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0.16) 65%, rgba(0, 0, 0, 0.02) 100%);
  }

  .home-contact__content {
    gap: var(--lc-space-24);
  }

  /* FAQ */
  .home-faq {
    display: flex;
    flex-direction: column;
    gap: var(--lc-space-24);
  }

  .home-faq__intro {
    gap: var(--lc-space-20);
  }

  .home-faq__list {
    gap: var(--lc-space-8);
    width: 100%;
  }

  .home-faq__list .lc-accordion__answer {
    font-size: var(--lc-type-mobile-body-size);
  }
}


/* =========================================================
   Figma exact section heading rhythm
   Eyebrow → Title: 4px
   Title → Description: 12px
   ========================================================= */

.home-section-head {
  gap: var(--lc-space-4);
}

.home-section-head__description {
  margin-top: var(--lc-space-8);
}


/* =========================================================
   Figma exact section frame heights
   Desktop 1440 / Mobile 428
   ========================================================= */

@media (min-width: 768px) {
  .home-trust {
    height: 141px;
  }

  #regular-care {
    overflow: hidden;
  }

  #service {
    overflow: hidden;
  }

  #why-luxury-clean {
    overflow: hidden;
  }

  #cases {
    overflow: hidden;
  }

  #process {
    overflow: hidden;
  }

  #contact {
    height: 442px;
  }
}

@media (max-width: 767px) {
  .home-trust {
    height: 452px;
  }

  #regular-care {
    height: 1074px;
    overflow: hidden;
  }

  #service {
    overflow: hidden;
  }

  #why-luxury-clean {
    overflow: hidden;
  }

  #cases {
    overflow: hidden;
  }

  #process {
    overflow: hidden;
  }

  #contact {
    height: 460px;
  }

  #faq {
    overflow: hidden;
  }

  /* Figma mobile text frames intentionally use a narrower title column. */
  .home-section-head__title {
    max-width: 100%;
  }

  .home-section-head__description {
    max-width: 100%;
  }

  #why-luxury-clean .home-section-head__description {
    width: 388px;
  }
}