:root {
  --primary: #ff501a;
  --ink: #111;
  --ink-2: #3a3f47;
  --ink-3: #5b616b;
  --paper: #f5f6f7;
  --line: #e3e6ea;
  --line-strong: #d6dae0;
  --seg-line: #c9ced6;
  --outer: #e9ebee;
  --gutter: 64px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--outer);
  color: var(--ink);
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: break-word;
}

h1,
h2,
p {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.page {
  max-width: 1150px;
  margin: 0 auto;
  background: #fff;
  overflow: hidden;
}

/* Raster artboards: shown exactly as supplied */
.upper picture,
.plate picture {
  display: block;
}

.upper img,
.plate img {
  display: block;
  width: 100%;
  height: auto;
}

.plate {
  position: relative;
  margin: 0;
  container-type: inline-size;
}

/* Only the system half of the plate is shown. The crop ends on the source's
   section line (PC y693 of 1482 wide, phone y1104 of 877 wide), so that raster
   line is the divider above the household row. */
.plate-crop {
  height: 46.76cqw;
  overflow: hidden;
}

/* Native legibility overlays on the plate artboard.
   Positions are cqw of the plate width, taken from source artboard coordinates
   (PC 1482 wide, phone 877 wide). Only the system tab bar and basis line are masked. */
.plate-ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.plate-ui--m {
  display: none;
}

/* The 2px white ring hides the raster bar's anti-aliased outline */
.seg {
  --h: max(44px, 4.5cqw);
  position: absolute;
  top: calc(var(--cy) - var(--h) / 2);
  left: calc(var(--x) - 1px);
  display: flex;
  width: calc(var(--w) + 2px);
  height: var(--h);
  border: 1px solid var(--seg-line);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 2px #fff;
  overflow: hidden;
  font-size: clamp(16px, 1.6cqw, 18px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.seg-item {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.seg-item.is-active {
  border-radius: 999px;
  background: var(--primary);
  color: var(--ink);
  font-weight: 700;
}

a.seg-item {
  pointer-events: auto;
}

a.seg-item:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -4px;
}

.basis {
  position: absolute;
  top: var(--y);
  left: calc(var(--x) - 2px);
  padding: 0 2px;
  background: #fff;
  color: var(--ink-2);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.plate-ui--pc .seg--sys {
  --x: 3.78cqw;
  --w: 29.28cqw;
  --cy: 18.35cqw;
}

/* The raster line outgrows 16px text on wide plates; min-width covers its
   tail while staying in the white space left of the product. */
.plate-ui--pc .basis--sys {
  --x: 3.78cqw;
  --y: 29.3cqw;
  min-width: 18cqw;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 8px;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  cursor: pointer;
}

.btn-outline {
  border: 1.5px solid var(--ink);
  background: transparent;
  color: var(--ink);
}

.btn-primary {
  border: 0;
  background: var(--primary);
  color: #fff;
}

.btn:focus-visible,
.text-link:focus-visible,
.footer a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

/* Household: title and choices, product scene, price.
   Side padding follows the plate's content edge (57 of 1482). The scene runs
   to the row's bottom edge, so cropped art ends on the install row's line. */
.household {
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 34fr) minmax(0, 36fr) minmax(0, 24fr);
  grid-template-rows: 1fr auto auto 1fr;
  grid-template-areas:
    'intro stage .'
    'intro stage offer'
    'intro stage book'
    'intro stage .';
  column-gap: 3%;
  padding: 0 3.85%;
  background: #fff;
}

.home-intro {
  grid-area: intro;
  align-self: center;
  min-width: 0;
}

/* Pretendard stops at 900, so weight comes from size and tighter tracking */
.home-title {
  font-size: clamp(24px, 3.83cqw, 44px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.055em;
  white-space: nowrap;
}

.home-tabs {
  display: flex;
  width: 100%;
  max-width: 360px;
  height: 46px;
  margin-top: 24px;
  border: 1px solid var(--seg-line);
  border-radius: 999px;
  background: #fff;
}

.home-tab {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: clamp(16px, 1.6vw, 18px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
}

.home-tab[aria-pressed='true'] {
  background: var(--primary);
  font-weight: 700;
}

.home-tab[aria-pressed='false']:hover {
  background: var(--paper);
}

.home-tab[aria-pressed='false'] + .home-tab[aria-pressed='false']::before {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 1px;
  background: var(--line-strong);
}

.home-tab:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -4px;
}

/* Each product is framed on its own. Offsets come from each asset's visible
   outline (floor x375-680 y50-1470 of 1024x1536, wall x75-1720 of 1782). */
.home-stage {
  grid-area: stage;
  position: relative;
  height: clamp(240px, 26cqw, 300px);
  container-type: size;
  overflow: hidden;
}

.home-art {
  position: absolute;
  display: none;
  max-width: none;
}

/* Wall: the full column width, centred as before */
.household[data-home='wall'] .home-art--wall {
  display: block;
  top: 50%;
  left: 0;
  width: 100%;
  height: auto;
  transform: translateY(-50%);
}

/* Floor: a close-up of the upper body. At a 300px stage the art is 630px
   tall, so the body is about 125px wide; the first circle sits whole and the
   second is cut by the row's edge. The body centre (x527.5 of 1536 tall) sits
   right of the column centre, toward the price. */
.household[data-home='floor'] .home-art--floor {
  display: block;
  top: 3cqh;
  left: calc(57cqw - 72.1cqh);
  width: auto;
  height: 210cqh;
}

/* Pair: one centred group. The wall's visible width is 0.6 of the floor's
   full visible height. --u shrinks with narrow stages; --ft then drops the
   floor so it still meets the bottom edge. */
/* Pair group, centred: floor outline 90u tall, 6u gap, wall outline 62u wide (87.3u total).
   Offsets remove each source's transparent margin (floor x375/y50, wall x75). */
.household[data-home='pair'] .home-stage {
  --u: min(1cqh, 1.1cqw);
}

.household[data-home='pair'] .home-art--floor {
  display: block;
  top: calc(50cqh - var(--u) * 48.17);
  left: calc(50cqw - var(--u) * 67.44);
  width: auto;
  height: calc(var(--u) * 97.35);
}

.household[data-home='pair'] .home-art--wall {
  display: block;
  top: calc(50cqh - var(--u) * 41);
  left: calc(50cqw - var(--u) * 21.17);
  width: calc(var(--u) * 67.16);
  height: auto;
}

.home-offer {
  grid-area: offer;
  min-width: 0;
}

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

.home-amount {
  font-size: clamp(26px, 3.83cqw, 44px);
  font-weight: 900;
  letter-spacing: -0.045em;
}

.home-from {
  font-size: clamp(15px, 1.92cqw, 22px);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.home-basis,
.home-count {
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.home-basis {
  margin-top: 10px;
  color: var(--ink-2);
  font-weight: 500;
}

.home-count {
  display: none;
  margin-top: 2px;
  color: var(--ink);
  font-weight: 600;
}

.household[data-home='pair'] .home-count {
  display: block;
}

.nw {
  white-space: nowrap;
}

.home-book {
  grid-area: book;
  width: 100%;
  margin-top: 18px;
  padding: 0 12px;
  font-size: 17px;
  font-weight: 700;
}

/* Installation row */
.install {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 28px var(--gutter);
  border-top: 1px solid var(--line);
}

.install-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

/* Support: heading and link on the left, questions on the right */
.support {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    'head list'
    'link list';
  column-gap: 72px;
  padding: 72px var(--gutter) 80px;
  border-top: 1px solid var(--line);
  background: var(--paper);
}

.support-title {
  grid-area: head;
  margin-top: -6px;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.025em;
}

.faq {
  grid-area: list;
  border-top: 1px solid var(--ink);
}

.faq details {
  border-bottom: 1px solid var(--line-strong);
}

.faq summary {
  position: relative;
  display: block;
  padding: 20px 40px 20px 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.01em;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '+';
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  color: var(--ink-3);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}

.faq details[open] summary::after {
  content: '−';
}

.faq details p {
  margin-top: -4px;
  padding: 0 40px 22px 0;
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.65;
}

.text-link {
  grid-area: link;
  align-self: start;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 16px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
}

/* Closing booking row */
.closing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  padding: 40px var(--gutter);
  border-top: 1px solid var(--line);
}

.closing-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.closing .btn-primary {
  flex-shrink: 0;
  min-height: 56px;
  padding: 0 32px;
  font-size: 18px;
  font-weight: 700;
}

/* Footer */
.footer {
  padding: 28px var(--gutter) 32px;
  border-top: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-3);
  font-size: 14px;
  line-height: 1.7;
}

.footer-brand {
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
}

.footer-phone a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.footer-info span + span::before {
  content: '/';
  margin: 0 8px;
  color: #a3a8b0;
}

/* Prototype notice */
.note {
  width: min(400px, calc(100vw - 40px));
  padding: 28px;
  border: 0;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
}

.note::backdrop {
  background: rgba(17, 17, 17, 0.45);
}

.note-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.015em;
}

.note-text {
  margin-top: 8px;
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.6;
}

.note form {
  margin-top: 22px;
}

.note-close {
  width: 100%;
}

/* Tablet */
@media (max-width: 1024px) {
  :root {
    --gutter: 40px;
  }

  /* Narrower rows give the price column room for 180,000 and the button */
  .household {
    grid-template-columns: minmax(0, 32fr) minmax(0, 34fr) minmax(0, 28fr);
  }

  .support {
    column-gap: 48px;
    padding-top: 56px;
    padding-bottom: 64px;
  }

  .support-title {
    font-size: 28px;
  }
}

/* Phone */
@media (max-width: 650px) {
  :root {
    --gutter: 20px;
  }

  .plate-crop {
    height: 125.88cqw;
  }

  .plate-ui--pc {
    display: none;
  }

  .plate-ui--m {
    display: block;
  }

  /* The bar is centred on the old raster bar so the 44px height stays in the
     white gap between heading and price. */
  .plate-ui--m .seg {
    --h: max(44px, 7.8cqw);
    font-size: 16px;
  }

  .plate-ui--m .seg--sys {
    --x: 6.38cqw;
    --w: 52.91cqw;
    --cy: 24.12cqw;
  }

  .plate-ui--m .basis {
    line-height: 20px;
  }

  .plate-ui--m .basis--sys {
    --x: 6.38cqw;
    --y: 42.3cqw;
  }

  /* Household: one full-width scene. Art hangs from the top left, the price
     sits bottom right on the scene's edge, directly above the button. The
     scene height is fixed, so the price and button never move between tabs.
     At 375 the scene is 327 wide; 180,000원부터 at 32/16px is about 170. */
  .household {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 166px auto;
    grid-template-areas:
      'intro'
      'stage'
      'book';
    row-gap: 12px;
    padding: 20px 6.38%;
  }

  .home-intro {
    align-self: start;
  }

  .home-title {
    font-size: min(32px, 8.53cqw);
    line-height: 1.1;
  }

  .home-tabs {
    max-width: none;
    margin-top: 12px;
  }

  .home-tab {
    font-size: 16px;
  }

  .home-stage {
    height: 166px;
  }

  /* About 207px of visible wall; its lower right edge stays above the price */
  .household[data-home='wall'] .home-art--wall {
    top: -2px;
    left: -9px;
    width: 224px;
    transform: none;
  }

  /* About 80px of visible body: the first circle whole, the second cut by
     the scene's edge. Body centre (137px into the art) at 30% of the scene. */
  .household[data-home='floor'] .home-art--floor {
    top: -6px;
    left: calc(30% - 137px);
    height: 400px;
  }

  /* Floor price beside the first circle instead of at the scene's foot */
  .household[data-home='floor'] .home-offer {
    align-self: center;
  }

  /* Floor on the content edge, wall beside its upper body at 0.6 of its height */
  /* Floor outline ~155px tall at x4..37; wall outline ~105px wide at x48..153 beside its upper body,
     leaving the right-bottom offer clear. */
  .household[data-home='pair'] .home-art--floor {
    top: 0;
    left: -37px;
    height: 168px;
  }

  .household[data-home='pair'] .home-art--wall {
    top: 10px;
    left: 43px;
    width: 114px;
  }

  .home-offer {
    grid-area: stage;
    position: relative;
    z-index: 1;
    align-self: end;
    justify-self: end;
    text-align: right;
  }

  .home-price {
    flex-wrap: nowrap;
    justify-content: flex-end;
    white-space: nowrap;
  }

  .home-amount {
    font-size: min(32px, 8.53cqw);
  }

  .home-from {
    font-size: 16px;
  }

  .home-basis {
    margin-top: 4px;
  }

  .home-book {
    min-height: 50px;
    margin-top: 0;
  }

  .install {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .install-title {
    font-size: 17px;
  }

  .support {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas:
      'head'
      'list'
      'link';
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .support-title {
    margin: 0 0 16px;
    font-size: 24px;
  }

  .support-title br {
    display: none;
  }

  .faq summary {
    padding: 18px 32px 18px 0;
    font-size: 17px;
  }

  .faq details p {
    padding: 0 0 20px;
    font-size: 16px;
  }

  .text-link {
    margin-top: 12px;
  }

  .closing {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .closing-title {
    font-size: 21px;
  }

  .closing .btn-primary {
    width: 100%;
  }

  .footer {
    padding-top: 24px;
    padding-bottom: 28px;
  }

  .footer-info span {
    display: block;
  }

  .footer-info span + span::before {
    content: none;
  }
}