/* native.css: the accepted main design as native DOM. Loaded after styles.css,
   which still draws the household, install, support and closing rows.
   Hero sizes are cqw of the page so the type and the cropped art scale together. */

.page {
  container: page / inline-size;
  --hg: 5.57cqw; /* 64 of 1150 */
}

a.btn {
  text-decoration: none;
}

/* Header */
.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
  padding: 0 var(--hg);
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-size: clamp(21px, 2.26cqw, 26px);
  font-weight: 900;
  letter-spacing: -0.045em;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3.5cqw, 40px);
}

.site-nav ul,
.nav-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav ul {
  display: flex;
  gap: clamp(18px, 3.2cqw, 36px);
}

.site-nav ul a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav ul a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
}

.nav-book {
  min-height: 46px;
  padding: 0 30px;
  font-size: 19px;
  font-weight: 700;
}

/* Orange buttons read as large text: 19px bold */
.household .home-book,
.closing .btn-primary {
  font-size: 19px;
  font-weight: 700;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -9px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.brand:focus-visible,
.site-nav ul a:focus-visible,
.nav-toggle:focus-visible,
.nav-menu ul a:focus-visible,
.nav-menu__close:focus-visible,
.sys-seg__item:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Mobile menu: a full-screen modal sheet */
.nav-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 8px 20px 32px;
  border: 0;
  background: #fff;
  color: var(--ink);
  overflow: auto;
}

.nav-menu::backdrop {
  background: rgba(17, 17, 17, 0.35);
}

.nav-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
}

.nav-menu__brand {
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -0.045em;
}

.nav-menu__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.nav-menu ul {
  margin-top: 16px;
  border-top: 1.5px solid var(--ink);
}

.nav-menu li {
  border-bottom: 1px solid var(--line);
}

.nav-menu ul a {
  display: flex;
  align-items: center;
  min-height: 60px;
  color: var(--ink);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-decoration: none;
}

.nav-menu .btn {
  width: 100%;
  min-height: 56px;
  margin-top: 24px;
  font-size: 19px;
  font-weight: 700;
}

html.nav-open {
  overflow: hidden;
}

/* Hero: eyebrow, one-line poster title, the original art cropped below it.
   The art frame matches the source crop (y230-500 of 1150), so the title's
   foot overlaps the frame's empty top band and the arc sits between 컨 and 청. */
.hero {
  --hero-overlap: 5.9cqw; /* source y230 frame top to y298 title foot */
  --hero-under: 4.4cqw; /* the frame's blank band under the dust, x<625 */
  --hero-m-drop: 5.9cqw;
  position: relative;
}

.hero-eyebrow {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-top: clamp(14px, 2cqw, 24px);
  padding: 0 var(--hg);
  color: var(--ink);
  font-size: clamp(15px, 1.65cqw, 19px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.hero-check {
  flex: none;
  width: 1.45em;
  height: 1.45em;
}

/* Pretendard stops at 900, so the weight comes from size and tight tracking */
.hero-title {
  position: relative;
  margin-top: 0.03em;
  padding: 0 var(--hg);
  color: var(--ink);
  font-size: 18.4cqw;
  font-weight: 900;
  line-height: 0.86;
  letter-spacing: -0.06em;
  word-spacing: 0.22em;
  white-space: nowrap;
  font-synthesis: none;
}

.hero-art {
  position: relative;
  pointer-events: none;
}

/* Multiply keeps the art's white ground from covering type it overlaps */
.hero-art__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
}

.hero-art--pc {
  aspect-ratio: 1150 / 270;
  margin-top: calc(-1 * var(--hero-overlap));
}

.hero-art--m {
  display: none;
}

/* Motion layer: same viewBox as the art it sits in */
.fin-motion {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.hero-body {
  position: relative;
  margin-top: calc(-1 * var(--hero-under));
  padding: 0 var(--hg);
}

.hero-sub {
  font-size: clamp(28px, 3.83cqw, 44px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.045em;
}

.hero-desc {
  margin-top: 12px;
  color: var(--ink-2);
  font-size: clamp(17px, 1.83cqw, 21px);
  line-height: 1.5;
  letter-spacing: -0.02em;
}

.hero-cta {
  min-width: clamp(280px, 32.4cqw, 372px);
  min-height: 56px;
  margin-top: 24px;
  padding: 0 28px;
  font-size: 19px;
  font-weight: 700;
}

/* Booking steps: labels with long rules between them */
.steps {
  display: flex;
  margin: clamp(20px, 2.8cqw, 32px) 0 0;
  padding: 0 calc(var(--hg) + 6.6cqw);
  list-style: none;
}

.steps li {
  display: flex;
  align-items: flex-end;
  min-width: 0;
}

.steps li:not(:last-child) {
  flex: 1 1 0;
}

.step-label {
  display: block;
  flex: none;
}

.step-n {
  display: block;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.step-t {
  display: block;
  margin-top: 2px;
  font-size: clamp(16px, 1.6cqw, 18px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.015em;
  white-space: nowrap;
}

.step-arrow {
  position: relative;
  flex: 1 1 auto;
  height: 1px;
  margin: 0 clamp(16px, 5.6cqw, 64px) 0.68em;
  background: var(--ink-2);
}

.step-arrow::after {
  content: '';
  position: absolute;
  top: -4px;
  right: 1px;
  width: 8px;
  height: 8px;
  border-top: 1px solid var(--ink-2);
  border-right: 1px solid var(--ink-2);
  transform: rotate(45deg);
}

/* Promises: four drawings under one rule, thin dividers, no cards */
.trust {
  margin: clamp(24px, 3cqw, 32px) var(--hg) 0;
  padding: clamp(24px, 2.6cqw, 30px) 0 clamp(48px, 6cqw, 72px);
  border-top: 1px solid var(--ink-2);
}

.trust-title {
  font-size: clamp(28px, 3.66cqw, 42px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.05em;
}

.promises {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: clamp(16px, 2cqw, 24px) 0 0;
  padding: 0;
  list-style: none;
}

.promise {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 6px 12px 10px;
  text-align: center;
}

.promise + .promise {
  border-left: 1px solid var(--line-strong);
}

.promise-icon {
  display: block;
  width: clamp(96px, 11cqw, 128px);
  height: auto;
}

.promise-t {
  font-size: clamp(15px, 1.6cqw, 18px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.02em;
}

/* System cleaning: copy left, standalone product drawing right.
   The stage height is fixed, so switching products never moves the page. */
.sys {
  display: grid;
  grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  grid-template-rows: 1fr auto auto auto auto 1fr;
  grid-template-areas:
    '. stage'
    'title stage'
    'seg stage'
    'offer stage'
    'act stage'
    '. stage';
  column-gap: 2cqw;
  padding: clamp(40px, 5cqw, 64px) 3cqw clamp(40px, 5cqw, 64px) var(--hg);
  border-bottom: 1px solid var(--line);
  background: #fff;
  overflow: hidden; /* the enlarged drawing is cropped at the section edges */
}

.sys-title {
  grid-area: title;
  position: relative;
  z-index: 1; /* may run past the column into the drawing's empty upper left */
  font-size: clamp(32px, 7.4cqw, 84px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.055em;
  white-space: nowrap;
}

.sys-seg {
  grid-area: seg;
  display: flex;
  width: min(100%, 260px);
  height: 46px;
  margin-top: clamp(16px, 2cqw, 24px);
  border: 1px solid var(--seg-line);
  border-radius: 999px;
  background: #fff;
}

.sys-seg__item {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 44px;
  border-radius: 999px;
  color: var(--ink);
  font-size: clamp(16px, 1.6cqw, 18px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.sys-seg__item[aria-current='true'] {
  background: var(--primary);
  font-weight: 700;
}

.sys-seg__item:not([aria-current='true']):hover {
  background: var(--paper);
}

.sys-offer {
  grid-area: offer;
  margin-top: clamp(18px, 2.4cqw, 28px);
}

.sys-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 4px;
  color: var(--primary);
  line-height: 1;
}

.sys-amount {
  font-size: clamp(44px, 6.1cqw, 70px);
  font-weight: 900;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}

.sys-from {
  font-size: clamp(20px, 2.6cqw, 30px);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.sys-basis {
  margin-top: 10px;
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.sys-actions {
  grid-area: act;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: clamp(22px, 2.8cqw, 32px);
}

.sys-book {
  min-width: min(100%, 264px);
  min-height: 56px;
  padding: 0 28px;
  font-size: 19px;
  font-weight: 700;
}

.sys-more {
  grid-area: auto;
  margin-top: 10px;
  font-size: 16px;
}

.sys-stage {
  grid-area: stage;
  position: relative;
  align-self: center;
  height: clamp(300px, 36cqw, 420px);
}

/* styles.css sets .plate img to block/auto; the drawings keep their own proportions */
.plate.sys .sys-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.plate.sys .sys-art[hidden] {
  display: none;
}

/* Phone drawings: the original frontal crops, shown only at 650px and below */
.plate.sys .sys-art-m {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
}

/* PC: the drawing reads at the poster's close crop and bleeds off the right edge.
   The stage keeps its height; only the visible drawing grows, and .sys clips it. */
@media (min-width: 651px) {
  .plate.sys .sys-art {
    transform: translateX(6.5cqw) scale(1.35);
    mix-blend-mode: multiply;
    pointer-events: none;
  }
}

/* Household row shares the page gutter so its title and button align with the rows around it */
.household {
  padding-left: var(--hg);
  padding-right: var(--hg);
}

/* Shared footer, identical to the app */
footer#ft.ft{margin:0;padding:0;border:0;background:#f4f4f2}
.wrap.fin-footer{max-width:1150px;width:calc(100% - 40px);margin:0 auto;padding:40px 0 48px;box-sizing:border-box;font-size:15px;line-height:1.6;color:#5b5b5b;word-break:keep-all}
.fin-footer__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px}
.fin-footer__name{font-size:17px;font-weight:800;color:#111}
.fin-footer__tel a{display:inline-flex;align-items:center;min-height:44px;font-size:17px;font-weight:800;color:#111;text-decoration:underline;text-underline-offset:4px}
.fin-footer__facts{display:flex;flex-wrap:wrap;gap:4px 24px;margin:14px 0 0}
.fin-footer__facts div{display:flex;gap:8px}
.fin-footer__facts dt{font-weight:600;color:#5b5b5b}
.fin-footer__facts dd{margin:0;color:#3d3d3d}
.fin-footer__links{display:flex;gap:20px;margin-top:6px}
.fin-footer__links a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;color:#2a2a2a;text-decoration:underline;text-underline-offset:4px}
.fin-footer a:focus-visible{outline:3px solid #111;outline-offset:3px;border-radius:3px}
@media (max-width:650px){
  .wrap.fin-footer{padding:32px 0 40px}
  .fin-footer__facts{flex-direction:column;gap:2px}
}

/* Phone: 에어컨/청소 stacked left, the original cassette and arc upper right.
   Title and art share one grid cell; the art frame matches the source crop
   (y95-315 of 376), so both scale with the page width. */
@media (max-width: 650px) {
  .page {
    --hg: 5.32cqw; /* 20 of 376 */
  }

  .site-head {
    min-height: 60px;
  }

  .brand {
    font-size: 21px;
  }

  .site-nav {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .hero-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
  }

  .hero-eyebrow {
    grid-area: 1 / 1;
    margin-top: 3.2cqw;
    font-size: 14px;
  }

  .hero-title {
    grid-area: 2 / 1;
    align-self: start;
    margin-top: 3.6cqw;
    font-size: 21cqw;
    line-height: 0.93;
    letter-spacing: -0.065em;
    word-spacing: normal;
    white-space: normal;
  }

  .hero-title span {
    display: block;
    width: max-content;
  }

  .hero-art--pc {
    display: none;
  }

  .hero-art--m {
    display: block;
    grid-area: 1 / 1 / 4 / 2;
    align-self: start;
    aspect-ratio: 376 / 220;
    margin-top: var(--hero-m-drop);
  }

  .hero-body {
    margin-top: -2.6cqw;
  }

  .hero-sub {
    font-size: min(28px, 7.45cqw);
    line-height: 1.25;
  }

  .hero-sub .nw {
    display: block;
  }

  .hero-desc {
    margin-top: 10px;
    font-size: 18px;
  }

  .hero-cta {
    display: flex;
    width: 100%;
    min-width: 0;
    margin-top: 20px;
  }

  .steps {
    margin-top: 18px;
    padding: 0 var(--hg);
  }

  .step-n {
    font-size: 12px;
  }

  .step-t {
    font-size: 15px;
  }

  .step-arrow {
    flex: 0 0 16px;
    margin: 0 auto 0.68em;
  }

  .trust {
    margin-top: 20px;
    padding: 22px 0 28px;
  }

  .trust-title {
    font-size: min(30px, 8cqw);
  }

  .promises {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 10px;
  }

  .promise {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 8px 0;
    text-align: left;
  }

  .promise + .promise {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .promise-icon {
    width: 96px;
  }

  .promise-t {
    font-size: 18px;
  }

  .sys {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas:
      'title'
      'seg'
      'offer'
      'stage'
      'act';
    padding: 32px var(--hg) 28px;
  }

  .sys-title {
    font-size: min(40px, 11.4cqw);
  }

  .sys-seg {
    width: min(100%, 240px);
    margin-top: 14px;
  }

  .sys-seg__item {
    font-size: 16px;
  }

  .sys-offer {
    margin-top: 14px;
  }

  .sys-amount {
    font-size: min(44px, 12.6cqw);
  }

  .sys-from {
    font-size: 18px;
  }

  .sys-basis {
    margin-top: 6px;
  }

  /* The stage runs the full page width at the crop's ratio, so both products
     share one height. Inside .plate, cqw is its content box (89.36% of the page),
     so the 5.32% page gutter is restated as 5.95cqw. */
  .sys-stage {
    align-self: auto;
    height: auto;
    aspect-ratio: 877 / 480;
    margin: 12px -5.95cqw 0;
  }

  .plate.sys .sys-art {
    display: none;
  }

  .plate.sys .sys-art-m {
    display: block;
  }

  .plate.sys .sys-art-m[hidden] {
    display: none;
  }

  .sys-actions {
    align-items: stretch;
    margin-top: 16px;
  }

  .sys-book {
    width: 100%;
    min-height: 54px;
  }

  .sys-more {
    align-self: center;
  }
}