/* HOM-PKG-012 매일워터 — 요금표형(PKG) · 정수기 렌탈.
   가전 브랜드 문법: 웜 화이트 지면 위에 제품 한 대씩 크게. 주인공은 제품이다.
   물색(아쿠아)은 팜뷰가 이미 쓰므로 피하고, 무채색 + 스틸블루 한 가지로 간다. IBM Plex 조판. */

:root {
  --paper:  #F2F0EC;   /* 웜 화이트 — 지면 */
  --paper2: #E7E3DC;   /* 한 단계 눌린 면 */
  --ink:    #16191C;
  --ink2:   #545C63;
  --ink3:   #8A9299;
  --steel:  #3E6E8E;   /* 유일한 액센트 */
  --line:   rgba(22, 25, 28, .14);
  --line2:  rgba(22, 25, 28, .07);
  --sans:   "IBM Plex Sans KR", "Pretendard Variable", system-ui, sans-serif;
  --mono:   "IBM Plex Mono", ui-monospace, monospace;
  --pad-x:  clamp(20px, 4vw, 44px);
}

body { background: var(--paper); color: var(--ink); font-family: var(--sans); }
::selection { background: var(--ink); color: var(--paper); }

.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--pad-x); }
.wrap--narrow { max-width: 760px; }

.flag {
  background: var(--ink); color: rgba(242, 240, 236, .7);
  text-align: center; padding: 9px 16px;
  font-size: var(--fs-xs); letter-spacing: .04em;
}

/* ── 헤더 — 선 하나로 끝낸다 ───────────────────────────── */
.hd {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
  padding: 14px var(--pad-x);
  background: rgba(242, 240, 236, .9); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line2);
}
.hd__logo { display: block; font-size: 1.125rem; font-weight: var(--fw-semibold); letter-spacing: -.03em; color: var(--ink); }
.hd__logo b { font-weight: var(--fw-normal); color: var(--ink2); }
.hd__logo small {
  display: block; margin-top: 1px; font-family: var(--mono);
  font-size: .5625rem; letter-spacing: .18em; color: var(--ink3);
}
.hd__nav { display: flex; gap: clamp(14px, 2.2vw, 28px); }
.hd__nav a { font-size: var(--fs-sm); color: var(--ink2); transition: color .16s; }
.hd__nav a:hover { color: var(--ink); }
@media (max-width: 760px) { .hd__nav { display: none; } }

.kbtn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 18px; border: 1px solid var(--ink); border-radius: 2px;
  background: var(--ink); color: var(--paper); cursor: pointer;
  font-family: var(--sans); font-size: .8125rem; font-weight: var(--fw-medium);
  transition: background .16s, color .16s;
}
.kbtn svg { width: 15px; height: 15px; }
.kbtn:hover { background: transparent; color: var(--ink); }

/* ── 히어로 CF ────────────────────────────────────────────
   밝고 맑게. 컷이 넘어가며 카피가 같은 박자로 바뀐다.
   어둡게 깔면 정수기가 아니라 위스키 광고가 된다. */
.cf {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh; display: flex; align-items: flex-end;
  background: var(--paper); color: var(--ink);
}
.cf__stage { position: absolute; inset: 0; z-index: -2; }
.cf__cut { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.cf__cut.is-on { opacity: 1; }
.cf__cut video, .cf__cut img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: brightness(1.04) contrast(.98) saturate(.94);
}
/* 컷마다 아주 느리게 밀어 준다 — 멈춰 있는 화면이 없어야 CF다 */
.cf__cut.is-on video, .cf__cut.is-on img { animation: cf-push 9s linear both; }
@keyframes cf-push { from { scale: 1.02; } to { scale: 1.11; } }
.cf__cut--prod img { object-fit: contain; background: var(--paper2); filter: none; }

/* 왼쪽 아래를 하얗게 걷어 글자 자리를 만든다 */
.cf__stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(242,240,236,.6) 0%, rgba(242,240,236,0) 24%,
                    rgba(242,240,236,.42) 60%, rgba(242,240,236,.94) 100%),
    linear-gradient(90deg, rgba(242,240,236,.78) 0%, rgba(242,240,236,.18) 38%, rgba(242,240,236,0) 62%);
}

.cf__in {
  position: relative; z-index: 1; width: 100%;
  max-width: 1180px; margin-inline: auto;
  padding: clamp(96px,16vh,180px) var(--pad-x) clamp(40px,7vh,72px);
}
.cf__brand { font-size: 1.125rem; font-weight: var(--fw-semibold); letter-spacing: -.03em; }
.cf__brand b { font-weight: var(--fw-normal); color: var(--ink2); }
.cf__brand span {
  display: block; margin-top: 2px; font-family: var(--mono);
  font-size: .5625rem; letter-spacing: .18em; color: var(--ink3);
}

/* 카피 — 자리를 겹쳐 두어 컷이 바뀌어도 높이가 안 흔들린다 */
.cf__copy { position: relative; margin-top: clamp(28px,5vh,56px); min-height: 2.6em; }
.cf__line {
  position: absolute; inset: 0 auto auto 0;
  font-size: clamp(1.75rem,5.2vw,3.5rem); font-weight: var(--fw-semibold);
  line-height: 1.22; letter-spacing: -.045em; white-space: nowrap;
  text-shadow: 0 1px 26px rgba(242,240,236,.85);
  opacity: 0; translate: 0 .32em; filter: blur(6px);
  transition: opacity .6s ease, translate .6s cubic-bezier(.2,.8,.3,1), filter .6s ease;
}
.cf__line.is-on { opacity: 1; translate: 0 0; filter: none; }
.cf__line em { font-style: normal; color: var(--steel); }
@media (max-width: 660px) { .cf__line { white-space: normal; } .cf__copy { min-height: 4.4em; } }

.cf__price { margin-top: clamp(24px,4vh,44px); font-size: var(--fs-md); color: var(--ink2); }
/* Plex Mono 는 400/500 만 불러온다. 700 을 주면 브라우저가 가짜 볼드를 그려 획이 번진다. */
.cf__price b { font-family: var(--mono); font-weight: 500; font-size: 1.5rem; color: var(--ink); letter-spacing: -.01em; }
.cf__price .won { font-family: var(--sans); font-weight: var(--fw-medium); }

.cf__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.cf__btn {
  display: inline-block; padding: 14px 26px; border-radius: 2px; cursor: pointer;
  border: 1px solid var(--ink); background: transparent; color: var(--ink);
  font-family: var(--sans); font-size: .875rem; font-weight: var(--fw-medium);
  transition: background .18s, color .18s;
}
.cf__btn:hover { background: var(--ink); color: var(--paper); }
.cf__btn--k { background: var(--ink); color: var(--paper); }
.cf__btn--k:hover { background: transparent; color: var(--ink); }

/* 컷 진행 표시 */
.cf__bars { display: flex; gap: 8px; margin-top: clamp(28px,5vh,52px); }
.cf__bars button {
  width: 46px; height: 2px; padding: 0; border: 0; cursor: pointer;
  background: rgba(22,25,28,.22);
}
.cf__bars button i { display: block; height: 100%; width: 0; background: var(--ink); }
.cf__bars button.is-done i { width: 100%; }
.cf__bars button.is-on i { animation: cf-bar 4.2s linear both; }
@keyframes cf-bar { from { width: 0; } to { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .cf__cut.is-on video, .cf__cut.is-on img { animation: none; }
  .cf__bars button.is-on i { animation: none; width: 100%; }
  .cf__line { transition: none; }
}

/* ── 공통 조판 ────────────────────────────────────────── */
.band { padding-block: clamp(56px, 8vw, 112px); }
.band + .band { border-top: 1px solid var(--line2); }
.eye { font-family: var(--mono); font-size: .6875rem; letter-spacing: .24em; color: var(--steel); text-transform: uppercase; }
.ttl { margin-top: var(--sp-4); font-size: clamp(1.5rem, 3.6vw, 2.5rem); font-weight: var(--fw-semibold); line-height: 1.24; letter-spacing: -.04em; }
.sub { margin-top: var(--sp-4); max-width: 40em; font-size: var(--fs-md); line-height: 1.8; color: var(--ink2); }
.fine { margin-top: clamp(28px, 4vw, 44px); font-size: var(--fs-xs); color: var(--ink3); line-height: 1.95; }

/* ── 약정 토글 — 모델을 훑는 내내 따라온다 ─────────────────── */
.term {
  position: sticky; top: 62px; z-index: 30;
  display: flex; gap: 1px; margin-top: clamp(28px, 4vw, 44px);
  width: max-content; max-width: 100%;
  background: var(--line); border: 1px solid var(--line);
}
.term button {
  padding: 12px 22px; border: 0; cursor: pointer;
  background: var(--paper); color: var(--ink2);
  font-family: var(--sans); font-size: .8125rem; font-weight: var(--fw-medium); white-space: nowrap;
  transition: background .16s, color .16s;
}
.term button:hover { color: var(--ink); }
.term button.is-on { background: var(--ink); color: var(--paper); }
@media (max-width: 560px) { .term button { padding: 11px 13px; font-size: .75rem; } }

/* ── 모델 — 좌우 교차, 제품이 화면을 먹는다 ───────────────── */
.models { margin-top: clamp(40px, 6vw, 76px); display: grid; gap: clamp(56px, 9vw, 124px); }
.model { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 900px) {
  .model { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); }
  .model > .model__shot { grid-column: 1; }
  .model > .model__body { grid-column: 2; }
  /* 짝수 행은 좌우를 바꾼다. 열 폭까지 뒤집어야 제품이 계속 넓은 쪽에 남는다 */
  .model:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); }
  .model:nth-child(even) > .model__shot { grid-column: 2; }
  .model:nth-child(even) > .model__body { grid-column: 1; }
}

.model__shot { position: relative; overflow: hidden; background: var(--paper2); }
.model__shot img { display: block; width: 100%; height: auto; transition: scale .9s cubic-bezier(.16, .8, .24, 1); }
.model:hover .model__shot img { scale: 1.035; }
.model__no { position: absolute; top: 16px; left: 18px; z-index: 1; font-family: var(--mono); font-size: .75rem; letter-spacing: .12em; color: var(--ink3); }
.model__tag {
  position: absolute; top: 14px; right: 14px; z-index: 1;
  padding: 6px 12px; background: var(--steel); color: #fff;
  font-size: .625rem; letter-spacing: .1em; font-weight: var(--fw-medium);
}

.model__name { font-size: clamp(1.25rem, 2.6vw, 1.75rem); font-weight: var(--fw-semibold); letter-spacing: -.035em; }
.model__note { margin-top: 7px; font-size: var(--fs-sm); color: var(--ink3); }
.model__price {
  display: flex; align-items: baseline; gap: 9px;
  margin-top: var(--sp-5); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line);
}
.model__price b {
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(2rem, 4.6vw, 2.75rem); letter-spacing: -.05em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.model__price span { font-size: var(--fs-sm); color: var(--ink3); }
.model__price.is-roll b { animation: roll .4s cubic-bezier(.2, .8, .3, 1); }
@keyframes roll { from { opacity: 0; translate: 0 .28em; } }

/* 스펙 — 점선 리더로 가전 카탈로그 조판 */
.model__spec { margin-top: var(--sp-4); }
.model__spec div { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line2); }
.model__spec dt { font-size: var(--fs-sm); color: var(--ink3); white-space: nowrap; }
.model__spec .dot { flex: 1; border-bottom: 1px dotted var(--line); translate: 0 -3px; }
.model__spec dd { margin: 0; font-family: var(--mono); font-size: .8125rem; white-space: nowrap; font-variant-numeric: tabular-nums; }

.pbtn {
  display: inline-block; margin-top: var(--sp-5);
  padding: 13px 26px; border: 1px solid var(--ink); border-radius: 2px;
  background: transparent; color: var(--ink); cursor: pointer;
  font-family: var(--sans); font-size: .8125rem; font-weight: var(--fw-medium);
  transition: background .16s, color .16s;
}
.pbtn:hover { background: var(--ink); color: var(--paper); }

/* ── 방문 관리 — 지면을 뒤집어 대비를 만든다 ───────────────── */
.care { background: var(--ink); color: var(--paper); }
.care .eye { color: #8FB4CC; }
.care .sub { color: rgba(242, 240, 236, .6); }
.care__list { list-style: none; margin: clamp(36px, 5vw, 60px) 0 0; padding: 0; display: grid; gap: 1px; background: rgba(242, 240, 236, .14); }
@media (min-width: 760px)  { .care__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .care__list { grid-template-columns: repeat(4, 1fr); } }
.care__list li { background: var(--ink); padding: var(--sp-6) var(--sp-5) var(--sp-7); }
.care__list em { display: block; font-style: normal; font-family: var(--mono); font-size: .75rem; letter-spacing: .12em; color: #8FB4CC; }
.care__list b { display: block; margin-top: var(--sp-4); font-size: var(--fs-md); font-weight: var(--fw-semibold); letter-spacing: -.02em; }
.care__list p { margin-top: 10px; font-size: var(--fs-sm); line-height: 1.8; color: rgba(242, 240, 236, .58); }
.care__note { margin-top: var(--sp-6); font-size: var(--fs-sm); color: rgba(242, 240, 236, .5); }

/* ── 필터 4단계 ──────────────────────────────────────── */
.filter__in { display: grid; gap: clamp(32px, 5vw, 64px); }
@media (min-width: 900px) { .filter__in { grid-template-columns: minmax(0, 1fr) minmax(0, .78fr); align-items: start; } }
.steps { list-style: none; margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; }
.steps li {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 4px var(--sp-4);
  padding: var(--sp-5) 0; border-top: 1px solid var(--line);
}
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps .fno {
  grid-row: span 2; align-self: start;
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--steel); color: var(--steel);
  font-family: var(--mono); font-size: .8125rem;
}
.steps b { font-size: var(--fs-md); font-weight: var(--fw-semibold); letter-spacing: -.02em; }
.steps i { grid-column: 2; font-style: normal; font-size: var(--fs-sm); color: var(--ink3); }
.steps em { grid-row: 1; grid-column: 3; font-style: normal; font-family: var(--mono); font-size: .75rem; color: var(--ink2); }
.filter__shot { margin: 0; }
.filter__shot img { display: block; width: 100%; height: auto; background: var(--paper2); }
.filter__shot figcaption { margin-top: var(--sp-4); font-size: var(--fs-xs); color: var(--ink3); line-height: 1.8; }

/* ── 설치 장소 ───────────────────────────────────────── */
.place__grid { display: grid; gap: clamp(20px, 3vw, 32px); margin-top: clamp(32px, 4vw, 48px); }
@media (min-width: 820px) { .place__grid { grid-template-columns: repeat(3, 1fr); } }
.place__grid article { background: var(--paper2); }
.place__grid img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.place__grid div { padding: var(--sp-5); }
.place__grid b { font-size: var(--fs-md); font-weight: var(--fw-semibold); letter-spacing: -.02em; }
.place__grid p { margin-top: 9px; font-size: var(--fs-sm); line-height: 1.75; color: var(--ink2); }

/* ── FAQ ─────────────────────────────────────────────── */
.qna__list { margin-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  list-style: none; cursor: pointer; position: relative;
  padding: var(--sp-5) 40px var(--sp-5) 0;
  font-size: var(--fs-md); font-weight: var(--fw-medium); letter-spacing: -.02em;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; translate: 0 -50%;
  font-family: var(--mono); font-size: 1.125rem; color: var(--steel); transition: rotate .22s;
}
.faq__item[open] summary::after { rotate: 45deg; }
.faq__item p { padding: 0 0 var(--sp-5); font-size: var(--fs-base); line-height: 1.85; color: var(--ink2); }

/* ── 푸터 ────────────────────────────────────────────── */
.ft { padding-block: clamp(48px, 6vw, 80px); border-top: 1px solid var(--line); }
.ft__info { display: grid; grid-template-columns: 78px 1fr; gap: 10px var(--sp-5); margin-top: var(--sp-6); }
.ft__info dt { font-size: var(--fs-sm); color: var(--ink3); }
.ft__info dd { margin: 0; font-size: var(--fs-sm); }
.ft__note { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--line2); font-size: var(--fs-xs); line-height: 1.95; color: var(--ink3); }
.ft__note b { color: var(--ink2); }

/* ── 상담 모달 ───────────────────────────────────────── */
.book { width: min(520px, calc(100vw - 32px)); border: 0; border-radius: 2px; padding: 0; margin: auto; background: var(--paper); color: var(--ink); }
.book::backdrop { background: rgba(22, 25, 28, .58); backdrop-filter: blur(3px); }
.book[open] { animation: bookin .28s cubic-bezier(.2, .7, .3, 1); }
@keyframes bookin { from { opacity: 0; translate: 0 12px; } }
.book__in { position: relative; padding: clamp(24px, 4vw, 36px); }
.book__x {
  position: absolute; top: 8px; right: 8px; width: 38px; height: 38px;
  border: 0; background: none; cursor: pointer; color: var(--ink3); font-size: 1.375rem; line-height: 1;
}
.book__x:hover { color: var(--ink); }
.book__eye { font-family: var(--mono); font-size: .6875rem; letter-spacing: .24em; color: var(--steel); text-transform: uppercase; }
.book__ttl { margin-top: var(--sp-3); font-size: var(--fs-xl); font-weight: var(--fw-semibold); letter-spacing: -.035em; line-height: 1.3; }
.book__sub { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--ink3); line-height: 1.7; }
.book__grid { margin-top: var(--sp-6); display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.book__wide { grid-column: 1 / -1; }
.book__grid label { display: block; font-size: var(--fs-xs); letter-spacing: .04em; color: var(--ink3); }
.book__grid input, .book__grid select {
  display: block; width: 100%; margin-top: 7px; padding: 11px 12px; border-radius: 2px;
  background: #fff; color: var(--ink); border: 1px solid var(--line);
  font-family: var(--sans); font-size: var(--fs-sm);
}
.book__grid input:focus, .book__grid select:focus { outline: none; border-color: var(--steel); }
.book__rate { margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5); background: var(--paper2); font-size: var(--fs-sm); color: var(--ink2); }
.book__rate b { font-family: var(--mono); font-size: var(--fs-lg); color: var(--ink); letter-spacing: -.04em; }
.book__prev {
  margin: var(--sp-4) 0 0; padding: var(--sp-4) var(--sp-5);
  background: #fff; border: 1px solid var(--line);
  font-family: var(--mono); font-size: .75rem; line-height: 1.85; color: var(--ink2); white-space: pre-wrap;
}
.book__fine { margin-top: var(--sp-4); font-size: var(--fs-xs); color: var(--ink3); }
@media (max-width: 520px) {
  .book { width: 100%; max-width: none; margin: auto 0 0; }
  .book__grid { grid-template-columns: 1fr; }
}

/* 하단 고정 바 — 모바일에서만 */
.cta-bar {
  position: fixed; z-index: 45; inset: auto 0 0 0; display: none; gap: 1px;
  background: var(--line); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.cta-bar a, .cta-bar button {
  flex: 1; padding: 15px 8px; border: 0; cursor: pointer; text-align: center;
  background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: .8125rem; font-weight: var(--fw-medium);
}
.cta-bar .is-main { background: var(--ink); color: var(--paper); }
@media (max-width: 760px) {
  .cta-bar { display: flex; }
  body.has-cta-bar { padding-bottom: 60px; }
  .term { top: 58px; }
}

:focus-visible { outline: 2px solid var(--steel); outline-offset: 2px; }

/* 스크롤 등장 — 밀어 올리기만 한다.
   opacity 를 건드리면 뷰포트보다 큰 요소에서 entry 구간이 끝나지 않아 내용이 숨는다.
   translate 만 쓰면 최악의 경우에도 24px 어긋날 뿐 항상 보인다. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .care__list li, .steps li, .place__grid article, .model__body {
      animation: rise linear both; animation-timeline: view(); animation-range: cover 0% cover 30%;
    }
    @keyframes rise { from { translate: 0 24px; } to { translate: 0 0; } }
  }
}