:root {
  --point: #7D232B;
  --point-deep: #57141A;
  --gold: #D8B36A;
  --gold-soft: #F0DCB0;
  --paper: #F6F0E7;
  --ink: #1F1412;

  --page: 1440px;
  --pad: 32px;
  --edge: max(var(--pad), calc((100vw - var(--page)) / 2));
  --push: 600px;
  --gutter: 36px;
  --radius: 50px;

  --nav-h: 88px;
  --bar-h: 88px;
  --logo-h: 34px;
  --peek: 0px;
  --hero-h: calc(100svh - var(--nav-h) - var(--gutter) - var(--bar-h) - var(--peek));
  --focus: 50% 50%;
  --box-inset: 20px;
  --copy-x: 20px;
  --copy-y: 0px;
  /* 카피 블록 좌우 이동 (>> 양수) */

  --pf-w: 80%;
  --pf-x: -40px;
  --badge: #F6F0E7;
  --badge-size: 150px;
  --badge-x: 48px;
  --badge-y: 20px;
  --co-top: 535px;
  --co-right: 206px;
  --wm-w: 110%;
  /* 배경 로고 크기 */
  --wm-o: .06;
  /* 배경 로고 투명도 */

  --sans: 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

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

body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--bar-h)
}

a {
  color: inherit;
  text-decoration: none
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus)
}

.stage {
  position: relative;
  background: var(--point);
  padding: var(--nav-h) 0 var(--gutter);
  overflow: clip
}

/* 헤더 */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--point);
  transition: height .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s;
  display: flex;
  align-items: center;
  gap: 26px;
  height: var(--nav-h);
  padding: 0 var(--edge)
}

.topbar.is-stuck {
  height: calc(var(--nav-h) - 16px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .12), 0 8px 24px rgba(30, 6, 9, .28)
}

.brand {
  display: flex;
  align-items: center;
  flex: none
}

.brand__logo {
  height: var(--logo-h);
  width: auto;
  object-fit: contain;
  object-position: left center
}

.brand__tag {
  margin-left: 8px;
  padding: 5px 13px 6px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .86);
  display: inline-flex;
  align-items: center;
  gap: 7px
}

.brand__tag i {
  font-style: normal;
  color: var(--gold);
  font-size: 9px
}

.gnb {
  margin-left: auto;
  display: flex;
  gap: clamp(20px, 2.2vw, 34px)
}

.gnb a {
  position: relative;
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: rgba(255, 255, 255, .88);
  padding: 6px 0;
  transition: color .25s
}

.gnb a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .32s cubic-bezier(.2, .7, .3, 1)
}

.gnb a:hover,
.gnb a:focus-visible {
  color: #fff
}

.gnb a:hover::after,
.gnb a:focus-visible::after {
  transform: scaleX(1)
}

.gnb__out {
  color: rgba(255, 255, 255, .7)
}

.gnb__out span {
  display: inline-block;
  margin-left: 2px;
  transition: transform .25s
}

.gnb__out:hover span {
  transform: translate(2px, -2px)
}

.gnb-toggle {
  display: none;
  color: #fff;
  font-size: 14px;
  letter-spacing: .05em;
  margin-left: auto;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 999px;
  padding: 8px 16px
}

/* 좌측 제품 이미지 */
.showcase {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--edge);
  width: calc(var(--push) - 56px);
  z-index: 3;
  pointer-events: none;
  overflow: visible
}

.watermark {
  position: absolute;
  top: 36%;
  left: 34%;
  transform: translate(-50%, -50%);
  width: var(--wm-w);
  height: auto;
  opacity: var(--wm-o);
  z-index: 0;
  object-fit: contain;
  animation: wmin 1.4s cubic-bezier(.16, .84, .34, 1) forwards;
}

@keyframes wmin {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.06)
  }

  to {
    opacity: var(--wm-o);
    transform: translate(-50%, -50%) scale(1)
  }
}

.badge {
  position: absolute;
  top: calc(var(--nav-h) + 70px + var(--badge-y));
  right: var(--badge-x);
  width: var(--badge-size);
  height: var(--badge-size);
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  animation: bfade .8s cubic-bezier(.16, .84, .34, 1) 1.25s both
}

@keyframes bfade {
  from {
    opacity: 0;
    transform: translateY(16px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.badge::before,
.badge::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .55);
  opacity: 0;
  animation: pulse 3.4s cubic-bezier(.2, .55, .35, 1) 1.6s infinite
}

.badge::after {
  animation-delay: 3.3s
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: .6
  }

  70% {
    opacity: 0
  }

  100% {
    transform: scale(1.7);
    opacity: 0
  }
}

.badge__in {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--badge);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  box-shadow: 0 16px 34px rgba(30, 6, 9, .34);
  will-change: transform;
  animation: bfloat 6s ease-in-out infinite
}

@keyframes bfloat {
  0% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-14px)
  }

  100% {
    transform: translateY(0)
  }
}

.badge b {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.035em;
  color: var(--point);
  line-height: 1.1
}

.badge i {
  font-style: normal;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -.015em;
  color: rgba(87, 20, 26, .78)
}

.badge i:last-child {
  padding-top: 5px;
  margin-top: 5px;
  border-top: 1px solid rgba(87, 20, 26, .2)
}

.pf {
  position: absolute;
  bottom: 0;
  width: var(--pf-w);
  margin-left: var(--pf-x);
  height: auto;
  opacity: 0;
  filter:
    drop-shadow(0 1px 2px rgba(52, 10, 14, calc(.22 * var(--sh)))) drop-shadow(0 14px 30px rgba(40, 6, 10, calc(.34 * var(--sh))));
  animation: pfin .95s cubic-bezier(.16, .84, .34, 1) both;
}

.pf--1 {
  left: 19%;
  width: calc(var(--pf-w) * 1.05);
  z-index: 3;
  --sh: 1;
  animation-delay: .25s
}

.pf--2 {
  left: -17%;
  z-index: 2;
  --sh: .62;
  animation-delay: .5s
}

.pf--3 {
  left: 59%;
  z-index: 1;
  --sh: .45;
  animation-delay: .75s
}

@keyframes pfin {
  from {
    opacity: 0;
    transform: translateY(28px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

/* 배지에서 뻗어나오는 콜아웃 */
.callout {
  position: absolute;
  top: var(--co-top);
  right: var(--co-right);
  width: 380px;
  height: 120px;
  z-index: 6;
  pointer-events: none
}

.callout svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible
}

.callout path {
  fill: none;
  stroke: #fff;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: draw .8s cubic-bezier(.5, 0, .3, 1) 1.9s forwards
}

@keyframes draw {
  to {
    stroke-dashoffset: 0
  }
}

.callout circle {
  fill: #fff;
  opacity: 0;
  animation: dot .3s ease 1.8s forwards
}

@keyframes dot {
  to {
    opacity: 1
  }
}

.callout__card {
  position: absolute;
  left: 0;
  top: 60px;
  width: 200px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(125, 35, 43, .8);
  border-radius: 0;
  box-shadow: 0 10px 24px rgba(30, 6, 9, .3);
  clip-path: inset(0 100% 0 0);
  animation: cardopen .5s cubic-bezier(.16, .84, .34, 1) 2.6s forwards
}

@keyframes cardopen {
  to {
    clip-path: inset(0 0 0 0)
  }
}

.callout__card span {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: #fff;
  white-space: nowrap;
  opacity: 0;
  animation: bfade .4s ease 3s forwards
}

@media (max-width:1180px) {
  .callout {
    display: none
  }
}

/* 파인 홈 */
.recess {
  position: relative;
  height: calc(var(--hero-h) - var(--box-inset) * 2);
  min-height: 320px;
  margin: var(--box-inset) 0 var(--box-inset) calc(var(--edge) + var(--push));
  border-radius: var(--radius) 0 0 var(--radius);
  overflow: hidden;
  isolation: isolate;
}

.recess_new > img,
.recess_new > .recess__bg > img {
  display: block;
  width: 100%;
  height: auto;
}

.recess_new > .recess__bg {
  display: none;
  position: static;
  z-index: auto;
}

@media (max-width:860px) {
  .recess_new > img {
    display: none;
  }

  .recess_new > .recess__bg {
    display: block;
  }
}

.recess__bg {
  position: absolute;
  inset: 0;
  z-index: -2
}

.recess::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(30, 10, 12, .82) 0%, rgba(30, 10, 12, .30) 52%, rgba(87, 20, 26, .42) 100%)
}

/* 카피 */
.copy {
  position: absolute;
  left: calc(clamp(24px, 4vw, 54px) + var(--copy-x));
  right: clamp(24px, 4vw, 54px);
  top: 50%;
  transform: translateY(calc(-50% + var(--copy-y)));
  max-width: 620px;
  text-align: left;
  color: #fff
}

.copy__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--gold-soft);
  margin-bottom: 16px
}

.copy__eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--gold);
  flex: none
}

.copy__title {
  font-size: clamp(34px, 4.6vw, 56px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.035em
}

.copy__sub {
  margin-top: 18px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  color: rgba(255, 255, 255, .84);
  letter-spacing: -.01em;
  max-width: 52ch
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 28px;
  padding: 16px 30px;
  border-radius: 999px;
  background: #fff;
  color: var(--point);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.02em;
  transition: transform .25s cubic-bezier(.2, .7, .3, 1), box-shadow .25s
}

.cta span {
  transition: transform .25s
}

.cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(30, 6, 9, .3)
}

.cta:hover span {
  transform: translateX(3px)
}

.copy>* {
  opacity: 0;
  transform: translateY(16px);
  animation: rise .85s cubic-bezier(.2, .7, .3, 1) forwards
}

.copy>*:nth-child(2) {
  animation-delay: .08s
}

.copy>*:nth-child(3) {
  animation-delay: .2s
}

.copy>*:nth-child(4) {
  animation-delay: .32s
}

.copy>*:nth-child(5) {
  animation-delay: .42s
}

.copy__note {
  margin: 16px 0 0;
  max-width: 46ch;
  font-size: 13px;
  line-height: 1.65;
  letter-spacing: -.01em;
  color: rgba(255, 255, 255, .62)
}

@keyframes rise {
  to {
    opacity: 1;
    transform: none
  }
}

/* 자가체크 */
.quiz {
  display: grid;
  grid-template-columns: minmax(300px, 36%) 1fr;
  gap: clamp(40px, 5vw, 84px);
  align-content: center;
  min-height: 100svh;
  padding: clamp(76px, 8vw, 128px) var(--edge);
  background: var(--point)
}

.quiz__head {
  align-self: center;
  color: #fff
}

.quiz__title {
  font-size: clamp(29.5px, 3.35vw, 45.5px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.04em
}

.quiz__desc {
  margin-top: 18px;
  font-size: 15.5px;
  line-height: 1.75;
  letter-spacing: -.015em;
  color: rgba(255, 255, 255, .72)
}

.gauge {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 34px
}

.gauge__body {
  flex: 1;
  min-width: 0
}

.face {
  width: 62px;
  height: 62px;
  flex: none
}

.face__ring {
  fill: none;
  stroke: rgba(255, 255, 255, .28);
  stroke-width: 1.4
}

.face__eye {
  fill: var(--gold)
}

.face__mouth {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.6;
  stroke-linecap: round;
  transform-origin: 32px 38px;
  transition: transform .4s cubic-bezier(.2, .7, .3, 1)
}

.face__tear {
  fill: var(--gold-soft);
  opacity: 0;
  transform-origin: 41px 31px;
  transition: opacity .4s ease, transform .4s cubic-bezier(.2, .7, .3, 1)
}

.gauge__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px
}

.gauge__label {
  font-size: 13px;
  letter-spacing: -.01em;
  color: rgba(255, 255, 255, .6)
}

.gauge__count {
  font-size: 14px;
  color: rgba(255, 255, 255, .6);
  font-variant-numeric: tabular-nums
}

.gauge__count b {
  font-size: 22px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: -.02em
}

.gauge__bar {
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  overflow: hidden
}

.gauge__bar i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--gold);
  transition: width .45s cubic-bezier(.2, .7, .3, 1)
}

.quiz__result {
  margin-top: 24px;
  padding: 20px 22px;
  border-left: 2px solid var(--gold);
  background: rgba(255, 255, 255, .07)
}

.quiz__result b {
  display: block;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.025em;
  color: var(--gold-soft)
}

.quiz__result span {
  display: block;
  margin-top: 7px;
  font-size: 14.5px;
  line-height: 1.7;
  letter-spacing: -.015em;
  color: rgba(255, 255, 255, .78)
}

.quiz__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 15px 28px;
  border-radius: 999px;
  background: #fff;
  color: var(--point);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -.02em;
  transition: transform .25s cubic-bezier(.2, .7, .3, 1)
}

.quiz__cta span {
  transition: transform .25s
}

.quiz__cta:hover {
  transform: translateY(-2px)
}

.quiz__cta:hover span {
  transform: translateX(3px)
}

.doc {
  margin-top: 24px;
  padding: 20px 24px 22px;
  border-left: 3px solid var(--gold);
  border-radius: 0 10px 10px 0;
  background: var(--paper)
}

.doc__tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  color: rgba(125, 35, 43, .62)
}

.doc__tag::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--point)
}

.doc__title {
  display: block;
  margin-top: 9px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--point)
}

.doc__desc {
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.75;
  letter-spacing: -.015em;
  color: #6B4B47
}

.quiz__note {
  margin-top: 16px;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .5)
}

.quiz__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: center;
  gap: 12px
}

.qitem {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 84px;
  padding: 18px;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 14px;
  background: rgba(255, 255, 255, .04);
  color: #fff;
  transition: background .22s, border-color .22s, color .22s
}

.qitem:hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .38)
}

.qitem__no {
  flex: none;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .48);
  transition: color .22s
}

.qitem__tx {
  flex: 1;
  font-size: 14.5px;
  line-height: 1.45;
  letter-spacing: -.025em
}

.qitem__mark {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .34);
  position: relative;
  transition: background .22s, border-color .22s
}

.qitem__mark::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 8px;
  width: 8px;
  height: 4px;
  border-left: 1.6px solid var(--point);
  border-bottom: 1.6px solid var(--point);
  transform: rotate(-45deg) scale(.4);
  opacity: 0;
  transition: opacity .2s, transform .2s
}

.qitem[aria-pressed="true"] {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--point)
}

.qitem[aria-pressed="true"] .qitem__no {
  color: rgba(125, 35, 43, .5)
}

.qitem[aria-pressed="true"] .qitem__mark {
  background: var(--gold);
  border-color: var(--gold)
}

.qitem[aria-pressed="true"] .qitem__mark::after {
  opacity: 1;
  transform: rotate(-45deg) scale(1)
}

/* 왜 먼저 구분하는가 */
.lead {
  display: grid;
  grid-template-columns: 1fr minmax(320px, 44%);
  gap: clamp(40px, 5vw, 88px);
  align-items: center;
  align-content: center;
  padding: clamp(76px, 8vw, 128px) var(--edge);
  background: var(--paper)
}

.lead__title {
  font-size: clamp(29.5px, 3.35vw, 45.5px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.04em;
  color: var(--point)
}

.lead__sub {
  margin-top: 22px;
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: -.03em;
  color: #4A2C29
}

.lead__desc {
  margin-top: 22px;
  max-width: 52ch;
  font-size: 15.5px;
  line-height: 1.85;
  letter-spacing: -.015em;
  color: #6B4B47
}

.lead__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 28px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(125, 35, 43, .35);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.025em;
  color: var(--point);
  transition: border-color .25s
}

.lead__link span {
  display: inline-block;
  transition: transform .25s
}

.lead__link:hover {
  border-color: var(--point)
}

.lead__link:hover span {
  transform: translate(2px, -2px)
}

.lead__media {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: calc(100svh - var(--nav-h) - var(--bar-h) - 80px);
  margin: 0
}

.lead__photo {
  width: 100%;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(125, 35, 43, .08)
}

.lead__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.lead__clip {
  position: absolute;
  left: -78px;
  bottom: 28px;
  width: 58%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(40, 12, 16, .26);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s cubic-bezier(.2, .7, .3, 1) .3s, transform .8s cubic-bezier(.2, .7, .3, 1) .3s
}

.lead.is-in .lead__clip {
  opacity: 1;
  transform: none
}

.lead .lead__text,
.lead .lead__media {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s cubic-bezier(.2, .7, .3, 1), transform .8s cubic-bezier(.2, .7, .3, 1)
}

.lead.is-in .lead__text,
.lead.is-in .lead__media {
  opacity: 1;
  transform: none
}

.lead.is-in .lead__media {
  transition-delay: .14s
}

/* ───────── 하단 상담 바 ───────── */
.cbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--paper);
  border-top: 1px solid rgba(125, 35, 43, .18);
  box-shadow: 0 -6px 24px rgba(30, 6, 9, .14);
  transform: translateY(110%);
  animation: barin .6s cubic-bezier(.16, .84, .34, 1) .4s forwards
}

@keyframes barin {
  to {
    transform: translateY(0)
  }
}

.cbar__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--bar-h);
  padding: 0 var(--edge)
}

.chan {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none
}

.chan__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 46px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -.015em;
  color: var(--point);
  transition: background .22s
}

.chan__btn:hover {
  background: rgba(125, 35, 43, .07)
}

.chan__btn svg {
  width: 19px;
  height: 19px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round
}

.chan__btn--kko svg,
.chan__btn--nv svg {
  fill: currentColor;
  stroke: none
}

.chan__bar {
  width: 1px;
  height: 16px;
  background: rgba(125, 35, 43, .26)
}

.fld {
  height: 46px;
  border: 1px solid rgba(125, 35, 43, .22);
  border-radius: 10px;
  background: #fff;
  font-family: inherit;
  font-size: 14.5px;
  letter-spacing: -.01em;
  color: var(--ink)
}

.fld--in {
  flex: 1;
  min-width: 0;
  padding: 0 16px
}

.fld--in::placeholder {
  color: #A8908D
}

.fld--in:focus {
  outline: 0;
  border-color: var(--point)
}

input[type=radio],
input[type=checkbox] {
  accent-color: var(--point);
  width: 15px;
  height: 15px;
  cursor: pointer
}

.agree {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  color: #5A3B39;
  cursor: pointer;
  white-space: nowrap
}

.agree__more {
  flex: none;
  padding: 6px 12px;
  border: 1px solid rgba(125, 35, 43, .26);
  border-radius: 999px;
  font-size: 12.5px;
  color: #7A5C59;
  transition: border-color .25s, color .25s
}

.agree__more:hover {
  border-color: var(--point);
  color: var(--point)
}

.cbar__submit {
  flex: none;
  height: 52px;
  padding: 0 42px;
  border-radius: 12px;
  background: var(--point);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.02em;
  transition: background .25s, transform .2s
}

.cbar__submit:hover {
  background: var(--point-deep);
  transform: translateY(-1px)
}

@media (max-width:1180px) {
  .chan__btn span {
    display: none
  }

  .chan__btn {
    padding: 0 11px
  }

  .cbar__submit {
    padding: 0 28px
  }
}

@media (max-width:980px) {
  .agree span {
    display: none
  }
}

/* 3칼럼 강점 */
.pillars__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px
}

.pillar {
  padding: 26px 26px 28px;
  border: 1px solid rgba(125, 35, 43, .16);
  border-radius: 14px;
  background: #fff;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s cubic-bezier(.2, .7, .3, 1), transform .7s cubic-bezier(.2, .7, .3, 1)
}

.pillars.is-in .pillar {
  opacity: 1;
  transform: none
}

.pillars.is-in .pillar:nth-child(2) {
  transition-delay: .12s
}

.pillars.is-in .pillar:nth-child(3) {
  transition-delay: .24s
}

.pillar__no {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--point)
}

.pillar__no::after {
  content: '';
  width: 28px;
  height: 1px;
  background: rgba(125, 35, 43, .35)
}

.pillar__title {
  margin-top: 14px;
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.35;
  color: var(--point)
}

.pillar__desc {
  margin-top: 12px;
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: -.015em;
  color: #6B4B47
}

@media (max-width:860px) {
  :root {
    --pad: 16px;
    --push: 0px;
    --gutter: 16px;
    --radius: 18px;
    --nav-h: 66px;
    --logo-h: 26px
  }

  .topbar {
    gap: 12px
  }

  .brand__tag {
    display: none
  }

  .gnb {
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--point-deep);
    border-radius: 14px;
    padding: 8px 0;
    display: none;
    z-index: 6
  }

  .gnb.is-open {
    display: flex
  }

  .gnb a {
    padding: 14px 20px;
    font-size: 15px
  }

  .gnb-toggle {
    display: block
  }

  .recess {
    border-radius: var(--radius) 0 0 var(--radius)
  }

  .showcase {
    display: none
  }

  .copy__title {
    font-size: 32px
  }

  .copy__sub {
    font-size: 15px
  }

  .copy__note {
    margin-top: 12px;
    font-size: 12px
  }

  .pillars__grid {
    grid-template-columns: 1fr
  }

  .lead {
    grid-template-columns: 1fr;
    gap: 32px;
    min-height: 0;
    padding: 60px var(--edge)
  }

  .lead__media {
    aspect-ratio: 4 / 3;
    max-height: none
  }

  .lead__clip {
    left: 12px;
    bottom: 12px;
    width: 52%
  }

  .quiz {
    grid-template-columns: 1fr;
    gap: 30px;
    min-height: 0;
    padding: 60px var(--edge)
  }

  .quiz__head {
    align-self: start
  }

  .quiz__list {
    grid-template-columns: 1fr
  }

  .qitem {
    min-height: 0;
    padding: 14px;
    gap: 10px
  }

  .qitem__tx {
    font-size: 14.5px
  }

  :root {
    --bar-h: 68px;
    --copy-y: 0px
  }

  .cbar__inner {
    gap: 8px;
    padding: 0 10px
  }

  .chan,
  .fld--in,
  .agree,
  .agree__more {
    display: none
  }

  .cbar__submit {
    flex: 1;
    height: 48px;
    padding: 0
  }
}

@media (prefers-reduced-motion:reduce) {
  *,
  *::before,
  *::after {
    animation-iteration-count: 1 !important;
    animation-duration: .01ms !important;
    transition-duration: .01ms !important
  }

  .pf,
  .copy>*,
  .badge,
  .callout circle,
  .callout__card span {
    opacity: 1;
    transform: none
  }

  .callout path {
    stroke-dashoffset: 0
  }

  .callout__card {
    clip-path: none
  }

  .watermark {
    opacity: var(--wm-o)
  }

  .badge::before,
  .badge::after {
    display: none
  }
}

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

/* ═══════════════════════════════════════════
   이하 추가 섹션 (원료 · 조제 · 4대 · 의료진 · 상담 · FAQ · 푸터)
   ═══════════════════════════════════════════ */

/* 공통 섹션 골격 */
.sec {
  padding: clamp(76px, 8vw, 128px) var(--edge);
  background: var(--paper)
}

.sec--dark {
  background: var(--point);
  color: #fff
}

.sec__head {
  max-width: 780px;
  margin-bottom: clamp(38px, 4.5vw, 62px)
}

.sec__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .1em;
  color: rgba(125, 35, 43, .68)
}

.sec__eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: rgba(125, 35, 43, .45);
  flex: none
}

.sec--dark .sec__eyebrow {
  color: var(--gold-soft)
}

.sec--dark .sec__eyebrow::before {
  background: var(--gold)
}

.sec__title {
  font-size: clamp(29.5px, 3.35vw, 45.5px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.04em;
  color: var(--point)
}

.sec--dark .sec__title {
  color: #fff
}

.sec__lede {
  margin-top: 20px;
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: -.03em;
  color: #4A2C29
}

.sec--dark .sec__lede {
  color: var(--gold-soft)
}

.sec__desc {
  margin-top: 18px;
  max-width: 56ch;
  font-size: 15.5px;
  line-height: 1.85;
  letter-spacing: -.015em;
  color: #6B4B47
}

.sec--dark .sec__desc {
  color: rgba(255, 255, 255, .72)
}

.note {
  margin-top: 28px;
  font-size: 12.5px;
  line-height: 1.7;
  letter-spacing: -.01em;
  color: rgba(107, 75, 71, .78)
}

.note--dark {
  color: rgba(255, 255, 255, .5)
}

/* 스크롤 등장 */
[data-rv] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .75s cubic-bezier(.2, .7, .3, 1), transform .75s cubic-bezier(.2, .7, .3, 1)
}

[data-rv].is-in {
  opacity: 1;
  transform: none
}

/* 사진 프레임 */
.shot {
  position: relative;
  aspect-ratio: var(--r, 4 / 3);
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(125, 35, 43, .07)
}

.shot img,
.shot video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.shot--dark {
  background: rgba(255, 255, 255, .06)
}

.shot__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 34px 18px 14px;
  background: linear-gradient(to top, rgba(30, 6, 9, .72), rgba(30, 6, 9, 0));
  font-size: 12.5px;
  line-height: 1.6;
  letter-spacing: -.02em;
  color: rgba(255, 255, 255, .9)
}

/* 03 · 원료와 조제 */
.mat__body {
  display: grid;
  grid-template-columns: minmax(280px, 34%) 1fr;
  gap: clamp(32px, 4vw, 68px);
  align-items: start
}

.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  list-style: none
}

.card {
  padding: 26px 26px 28px;
  border: 1px solid rgba(125, 35, 43, .16);
  border-radius: 14px;
  background: #fff
}

.card--dark {
  border-color: rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .04)
}

.card__no {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--point)
}

.card__no::after {
  content: '';
  width: 24px;
  height: 1px;
  background: rgba(125, 35, 43, .35)
}

.card--dark .card__no {
  color: var(--gold)
}

.card--dark .card__no::after {
  background: rgba(216, 179, 106, .45)
}

.card__title {
  margin-top: 14px;
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.035em;
  color: var(--point)
}

.card--dark .card__title {
  color: #fff
}

.card__desc {
  margin-top: 11px;
  font-size: 14.5px;
  line-height: 1.75;
  letter-spacing: -.015em;
  color: #6B4B47
}

.card--dark .card__desc {
  color: rgba(255, 255, 255, .7)
}

/* 04 · STUDY, WORK & LIFE */
.lifes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 36px);
  list-style: none
}

.lifes .is-in:nth-child(2) {
  transition-delay: .1s
}

.lifes .is-in:nth-child(3) {
  transition-delay: .2s
}

.lifes__cat {
  display: inline-block;
  margin-top: 22px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--gold)
}

.lifes__desc {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.75;
  letter-spacing: -.015em;
  color: rgba(255, 255, 255, .7)
}

.quote {
  margin: clamp(44px, 5vw, 72px) 0 0;
  padding-left: clamp(18px, 2vw, 28px);
  border-left: 3px solid var(--gold);
  font-size: clamp(19px, 2vw, 27px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -.035em;
  color: var(--gold-soft)
}

/* 06 · 의료진 */
.med__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 36px);
  list-style: none
}

.med__list .is-in:nth-child(2) {
  transition-delay: .1s
}

.med__list .is-in:nth-child(3) {
  transition-delay: .2s
}

.prof__role {
  display: inline-block;
  margin-top: 22px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--gold)
}

.prof__name {
  margin-top: 10px;
  font-size: clamp(21px, 1.8vw, 26px);
  font-weight: 700;
  letter-spacing: -.04em;
  color: #fff
}

.prof__cv {
  margin-top: 14px;
  list-style: none
}

.prof__cv li {
  position: relative;
  padding-left: 14px;
  margin-top: 7px;
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: -.015em;
  color: rgba(255, 255, 255, .7)
}

.prof__cv li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 5px;
  height: 1px;
  background: var(--gold)
}

/* 07 · 상담 안내 */
.plan__body {
  display: grid;
  grid-template-columns: 1fr minmax(320px, 40%);
  gap: clamp(32px, 4vw, 68px);
  align-items: start
}

.flow {
  list-style: none
}

.flow__it {
  padding: 26px 0;
  border-top: 1px solid rgba(125, 35, 43, .18)
}

.flow__it:first-child {
  padding-top: 0;
  border-top: 0
}

.flow .is-in:nth-child(2) {
  transition-delay: .1s
}

.flow .is-in:nth-child(3) {
  transition-delay: .2s
}

.flow__no {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--point)
}

.flow__no::after {
  content: '';
  width: 24px;
  height: 1px;
  background: rgba(125, 35, 43, .35)
}

.flow__title {
  margin-top: 12px;
  font-size: clamp(19px, 1.6vw, 23px);
  font-weight: 700;
  letter-spacing: -.035em;
  color: var(--point)
}

.flow__desc {
  margin-top: 9px;
  font-size: 15px;
  line-height: 1.75;
  letter-spacing: -.015em;
  color: #6B4B47
}

.price {
  --pp: clamp(26px, 3vw, 38px);
  padding: var(--pp);
  border: 1px solid rgba(125, 35, 43, .18);
  border-radius: 18px;
  background: #fff
}

.price__tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  color: rgba(125, 35, 43, .6)
}

.price__name {
  margin-top: 14px;
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 700;
  letter-spacing: -.04em;
  color: var(--point)
}

.price__spec {
  margin-top: 7px;
  font-size: 14.5px;
  letter-spacing: -.02em;
  color: #6B4B47
}

.price__amt {
  margin-top: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(125, 35, 43, .16);
  font-size: clamp(30px, 2.8vw, 38px);
  font-weight: 700;
  letter-spacing: -.04em;
  color: var(--point)
}

.price__amt i {
  margin-left: 4px;
  font-size: 17px;
  font-style: normal;
  font-weight: 500
}

.price__list {
  margin-top: 18px;
  list-style: none
}

.price__list li {
  position: relative;
  padding-left: 14px;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: -.015em;
  color: #6B4B47
}

.price__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 5px;
  height: 1px;
  background: var(--point)
}

.price__cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 54px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -.02em;
  transition: background .25s, transform .2s, border-color .25s
}

.btn span {
  transition: transform .25s
}

.btn:hover span {
  transform: translateX(3px)
}

.btn--fill {
  background: var(--point);
  color: #fff
}

.btn--fill:hover {
  background: var(--point-deep);
  transform: translateY(-1px)
}

.btn--line {
  border: 1px solid rgba(125, 35, 43, .3);
  color: var(--point)
}

.btn--line:hover {
  border-color: var(--point)
}

.price .gift {
  margin-top: 22px
}

/* 08 · FAQ */
.faq {
  padding-top: 0
}

.faq__list {
  border-top: 1px solid rgba(125, 35, 43, .18)
}

.fq {
  border-bottom: 1px solid rgba(125, 35, 43, .18)
}

.fq__q {
  position: relative;
  display: block;
  padding: 26px 48px 26px 0;
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--point);
  cursor: pointer;
  list-style: none;
  transition: opacity .2s
}

.fq__q::-webkit-details-marker {
  display: none
}

.fq__q:hover {
  opacity: .72
}

.fq__q::after,
.fq__q::before {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  width: 15px;
  height: 1.5px;
  background: var(--point);
  transition: transform .3s cubic-bezier(.2, .7, .3, 1)
}

.fq__q::before {
  transform: rotate(90deg)
}

.fq[open] .fq__q::before {
  transform: rotate(0)
}

.fq__a {
  padding: 0 10% 28px 0;
  font-size: 15px;
  line-height: 1.85;
  letter-spacing: -.015em;
  color: #6B4B47
}

/* 마지막 CTA */
.fin {
  padding: clamp(80px, 8vw, 132px) var(--edge);
  background: var(--point);
  color: #fff;
  text-align: center
}

.fin__in {
  max-width: 720px;
  margin: 0 auto
}

.fin .sec__eyebrow {
  color: var(--gold-soft)
}

.fin .sec__eyebrow::before {
  background: var(--gold)
}

.fin__title {
  font-size: clamp(29.5px, 3.55vw, 47.5px);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -.04em
}

.fin__sub {
  margin-top: 20px;
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: -.03em;
  color: var(--gold-soft)
}

.fin__desc {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: -.015em;
  color: rgba(255, 255, 255, .72)
}

.fin .note--dark {
  margin-top: 18px
}

/* 푸터 */
.foot {
  padding: clamp(52px, 5vw, 78px) var(--edge) clamp(44px, 4vw, 64px);
  background: var(--point-deep);
  color: rgba(255, 255, 255, .7)
}

.foot__brand {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, .14)
}

.foot__logo {
  height: 30px;
  width: auto;
  object-fit: contain;
  flex: none
}

.foot__name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: #fff
}

.foot__name i {
  margin-left: 8px;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--gold)
}

.foot__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
  padding: 34px 0
}

.foot__col b {
  display: block;
  margin-bottom: 14px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--gold)
}

.foot__col p,
.foot__col a {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: -.015em;
  color: rgba(255, 255, 255, .7);
  transition: color .22s
}

.foot__col a:hover {
  color: #fff
}

.foot__biz {
  color: rgba(255, 255, 255, .62) !important
}

.foot__copy {
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .42)
}

/* 반응형 */
@media (max-width:1180px) {

  .mat__body,
  .plan__body,
  .mix,
  .med__quote {
    grid-template-columns: 1fr
  }

  .mat__media {
    max-width: 520px
  }
}

@media (max-width:980px) {

  .lifes,
  .med__list {
    grid-template-columns: 1fr 1fr
  }
}

@media (max-width:860px) {
  .sec {
    padding: 60px var(--edge)
  }

  .cards,
  .lifes,
  .med__list {
    grid-template-columns: 1fr
  }

  .proof {
    grid-template-columns: 1fr 1fr;
    gap: 12px
  }

  .mat__media {
    max-width: none
  }

  .fin {
    padding: 60px var(--edge)
  }

  .foot__cols {
    grid-template-columns: 1fr;
    gap: 26px
  }

  .fq__a {
    padding-right: 0
  }

  .btn {
    height: 50px
  }
}

@media (prefers-reduced-motion:reduce) {
  [data-rv] {
    opacity: 1;
    transform: none
  }
}

.plan__left .shot {
  margin-bottom: clamp(28px, 3vw, 44px)
}

.gift {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 22px
}

.gift .shot:first-child {
  grid-column: 1 / -1
}

.shot--light {
  background: #fff
}

.prof .shot {
  margin-bottom: 24px
}

.prof {
  padding: 0
}

.prof .shot {
  border-radius: 16px;
  box-shadow: 0 26px 56px rgba(30, 6, 9, .46)
}

.prof__role {
  margin-top: 0
}

/* ───────── v4 개편 ───────── */
.bridge {
  max-width: 720px;
  margin: clamp(40px, 4.5vw, 66px) auto 0;
  padding-top: clamp(32px, 3.5vw, 48px);
  border-top: 1px solid rgba(125, 35, 43, .18);
  text-align: center;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.8;
  letter-spacing: -.03em;
  color: #6B4B47
}

.bridge b {
  display: inline-block;
  margin-top: 6px;
  font-weight: 600;
  color: var(--point)
}

/* 전승 가미방 */
.mix {
  display: grid;
  grid-template-columns: minmax(280px, 40%) 1fr;
  gap: clamp(28px, 3.4vw, 60px);
  align-items: center;
  margin-top: clamp(46px, 5vw, 76px);
  padding-top: clamp(40px, 4vw, 64px);
  border-top: 1px solid rgba(255, 255, 255, .16)
}

.mix__title {
  margin-top: 4px;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 700;
  line-height: 1.38;
  letter-spacing: -.04em;
  color: #fff
}

.mix__lede {
  margin-top: 16px;
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: -.03em;
  color: var(--gold-soft)
}

.mix__desc {
  margin-top: 14px;
  max-width: 54ch;
  font-size: 15px;
  line-height: 1.85;
  letter-spacing: -.015em;
  color: rgba(255, 255, 255, .72)
}

/* 증거 이미지 */
.proof {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(40px, 4.5vw, 66px);
  list-style: none
}

.proof .is-in:nth-child(2) {
  transition-delay: .08s
}

.proof .is-in:nth-child(3) {
  transition-delay: .16s
}

.proof .is-in:nth-child(4) {
  transition-delay: .24s
}

.proof__cap {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: -.02em;
  color: rgba(255, 255, 255, .62)
}

.mat__cta {
  margin-top: clamp(34px, 4vw, 54px)
}

.btn--ghost {
  border: 1px solid rgba(255, 255, 255, .4);
  color: #fff
}

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

/* 의료진 (밝은 배경) */
.med__quote {
  display: grid;
  grid-template-columns: minmax(280px, 46%) 1fr;
  gap: clamp(28px, 3.4vw, 56px);
  align-items: center;
  margin-top: clamp(40px, 4.5vw, 68px)
}

.quote--light {
  color: var(--point)
}

.lead__quote {
  margin-top: clamp(24px, 2.6vw, 34px);
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.7
}

/* 가격 보조 문구 */
.price__soon {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(125, 35, 43, .06);
  font-size: 13px;
  line-height: 1.65;
  letter-spacing: -.02em;
  color: #6B4B47
}

.price__fine {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.65;
  color: rgba(107, 75, 71, .72)
}

/* 최종 CTA 버튼 묶음 */
.fin__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center
}

.fin__cta .cta {
  margin-top: 28px
}

.fin__cta .btn--ghost {
  margin-top: 28px;
  height: 54px
}

/* 모바일 고정 CTA */
.cbar__quick {
  display: none
}

@media (max-width:1180px) {
  .proof {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media (max-width:860px) {
  .mix {
    grid-template-columns: 1fr
  }

  .med__quote {
    grid-template-columns: 1fr
  }

  .bridge {
    text-align: left
  }

  .cbar__quick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 48px;
    border: 1px solid rgba(125, 35, 43, .3);
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--point)
  }

  .cbar__submit {
    flex: 1;
    height: 48px;
    padding: 0;
    border-radius: 999px
  }
}

/* ───────── 모바일 세부 조정 ───────── */
@media (max-width:860px) {

  /* 필요한 순간: 가로형 카드로 압축 */
  .lifes {
    gap: 12px
  }

  .lifes__it {
    display: grid;
    grid-template-columns: 116px 1fr;
    gap: 16px;
    align-items: center;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 14px;
    background: rgba(255, 255, 255, .04)
  }

  .lifes__it .shot {
    --r: 1/1 !important;
    border-radius: 10px
  }

  .lifes__cat {
    margin-top: 0
  }

  .lifes__desc {
    margin-top: 6px;
    font-size: 14px
  }

  /* 원료 대표 컷은 과하게 길지 않게 */
  .mat__media {
    --r: 4/5 !important
  }

  .mix {
    gap: 22px;
    margin-top: 40px;
    padding-top: 34px
  }



  .proof__cap {
    font-size: 12px
  }

  .quote {
    font-size: 19px;
    padding-left: 16px
  }

  .lead__quote {
    font-size: 16px
  }

  .price {
    --pp: 22px;
    padding: var(--pp)
  }

  .price__cta .btn,
  .fin__cta .cta,
  .fin__cta .btn {
    width: 100%;
    justify-content: center
  }

  .fin__cta {
    flex-direction: column;
    gap: 10px
  }

  .fin__cta .btn--ghost {
    margin-top: 0
  }

  .sec__head {
    margin-bottom: 30px
  }

  .mat__cta .btn {
    width: 100%;
    justify-content: center
  }
}

/* ───────── 히어로 모바일 최적화 ───────── */
@media (max-width:860px) {
  :root {
    --copy-x: 0px;
    --badge-size: 104px;
    --badge-x: 16px;
    --badge-y: 0px
  }

  /* 박스는 화면을 채우되 내용에 따라 자라도록 */
  .recess {
    height: auto;
    min-height: calc(100svh - var(--nav-h) - var(--bar-h) - 28px);
    display: flex;
    align-items: flex-end;
    margin: 14px 0 0 14px;
    border-radius: 22px 0 0 22px
  }

  /* 하단 카피 위 가독성 확보 */
  .recess::before {
    background: linear-gradient(to top, rgba(30, 10, 12, .9) 0%, rgba(30, 10, 12, .58) 44%, rgba(87, 20, 26, .34) 100%)
  }

  /* 절대배치 → 흐름 배치로 전환해 배지와 겹치지 않게 */
  .copy {
    position: static;
    transform: none;
    max-width: none;
    width: 100%;
    padding: 0 22px 26px
  }

  .copy__eyebrow {
    align-items: flex-start;
    margin-bottom: 12px;
    font-size: 12.5px;
    line-height: 1.5
  }

  .copy__eyebrow::before {
    margin-top: 9px
  }

  .copy__title {
    font-size: 33px;
    line-height: 1.22
  }

  /* 데스크톱용 강제 줄바꿈 해제 */
  .copy__sub br {
    display: none
  }

  .copy__sub {
    margin-top: 14px;
    font-size: 15.5px;
    line-height: 1.72;
    max-width: none
  }

  /* 탭 영역 확보 */
  .cta {
    margin-top: 22px;
    width: 100%;
    justify-content: center;
    height: 54px;
    padding: 0 20px
  }

  .copy__note {
    margin-top: 14px;
    max-width: none;
    font-size: 12px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .62)
  }

  /* 배지: 우측 상단으로 이동 */
  .badge {
    top: calc(var(--nav-h) + 45px)
  }

  .badge b {
    font-size: 21px
  }

  .badge i {
    font-size: 10.5px
  }
}

@media (max-width:380px) {
  .copy__title {
    font-size: 30px
  }

  .copy__sub {
    font-size: 15px
  }

  :root {
    --badge-size: 94px
  }
}

/* ───────── 모바일 세부 조정 ───────── */
@media (max-width:860px) {

  /* 필요한 순간: 가로형 카드로 압축 */
  .lifes {
    gap: 12px
  }

  .lifes__it {
    display: grid;
    grid-template-columns: 116px 1fr;
    gap: 16px;
    align-items: center;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 14px;
    background: rgba(255, 255, 255, .04)
  }

  .lifes__it .shot {
    --r: 1/1 !important;
    border-radius: 10px
  }

  .lifes__cat {
    margin-top: 0
  }

  .lifes__desc {
    margin-top: 6px;
    font-size: 14px
  }

  /* 원료 대표 컷은 과하게 길지 않게 */
  .mat__media {
    --r: 4/5 !important
  }

  .mix {
    gap: 22px;
    margin-top: 40px;
    padding-top: 34px
  }



  .proof__cap {
    font-size: 12px
  }

  .quote {
    font-size: 19px;
    padding-left: 16px
  }

  .lead__quote {
    font-size: 16px
  }

  .price {
    --pp: 22px;
    padding: var(--pp)
  }

  .price__cta .btn,
  .fin__cta .cta,
  .fin__cta .btn {
    width: 100%;
    justify-content: center
  }

  .fin__cta {
    flex-direction: column;
    gap: 10px
  }

  .fin__cta .btn--ghost {
    margin-top: 0
  }

  .sec__head {
    margin-bottom: 30px
  }

  .mat__cta .btn {
    width: 100%;
    justify-content: center
  }
}

/* ───────── 히어로 모바일 최적화 ───────── */
@media (max-width:860px) {
  :root {
    --copy-x: 0px;
    --badge-size: 104px;
    --badge-x: 16px;
    --badge-y: 0px
  }

  /* 박스는 화면을 채우되 내용에 따라 자라도록 */
  .recess {
    height: auto;
    min-height: calc(100svh - var(--nav-h) - var(--bar-h) - 28px);
    display: flex;
    align-items: flex-end;
    margin: 14px 0 0 14px;
    border-radius: 22px 0 0 22px
  }

  /* 하단 카피 위 가독성 확보 */
  .recess::before {
    background: linear-gradient(to top, rgba(30, 10, 12, .9) 0%, rgba(30, 10, 12, .58) 44%, rgba(87, 20, 26, .34) 100%)
  }

  /* 절대배치 → 흐름 배치로 전환해 배지와 겹치지 않게 */
  .copy {
    position: static;
    transform: none;
    max-width: none;
    width: 100%;
    padding: 0 22px 26px
  }

  .copy__eyebrow {
    align-items: flex-start;
    margin-bottom: 12px;
    font-size: 12.5px;
    line-height: 1.5
  }

  .copy__eyebrow::before {
    margin-top: 9px
  }

  .copy__title {
    font-size: 33px;
    line-height: 1.22
  }

  /* 데스크톱용 강제 줄바꿈 해제 */
  .copy__sub br {
    display: none
  }

  .copy__sub {
    margin-top: 14px;
    font-size: 15.5px;
    line-height: 1.72;
    max-width: none
  }

  /* 탭 영역 확보 */
  .cta {
    margin-top: 22px;
    width: 100%;
    justify-content: center;
    height: 54px;
    padding: 0 20px
  }

  .copy__note {
    margin-top: 14px;
    max-width: none;
    font-size: 12px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .62)
  }

  /* 배지: 우측 상단으로 이동 */
  .badge {
    top: calc(var(--nav-h) + 45px)
  }

  .badge b {
    font-size: 21px
  }

  .badge i {
    font-size: 10.5px
  }
}

@media (max-width:380px) {
  .copy__title {
    font-size: 30px
  }

  .copy__sub {
    font-size: 15px
  }

  :root {
    --badge-size: 94px
  }
}

/* 하단 상담 바 요소 기본 숨김 */
.cbar__x,
.cbar__scrim,
.cbar__title {
  display: none
}


/* ───────── 필요한 순간: 작은 썸네일 스트립 ───────── */
.strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 540px;
  list-style: none
}

.strip__it .shot {
  border-radius: 12px
}

.lines {
  display: grid;
  grid-auto-rows: 1fr;
  margin-top: clamp(26px, 3vw, 38px);
  list-style: none
}

.line {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 20px;
  align-items: baseline;
  align-content: center;
  padding: 18px 0;
  border-top: 1px solid rgba(125, 35, 43, .16)
}

.line__cat {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--point)
}

.line__tx {
  font-size: 15px;
  line-height: 1.75;
  letter-spacing: -.02em;
  color: #6B4B47
}

/* 붉은 섹션이 연달아 올 때 경계 */
.mat {
  border-top: 1px solid rgba(255, 255, 255, .14)
}

/* ───────── 피로 체크: 모바일에서 결과를 문항 아래로 ───────── */
@media (max-width:860px) {
  .quiz {
    gap: 0
  }

  .quiz__head {
    display: contents
  }

  .quiz__head .sec__eyebrow {
    order: 1
  }

  .quiz__title {
    order: 2
  }

  .quiz__desc {
    order: 3
  }

  .quiz__list {
    order: 4;
    margin-top: 24px
  }

  .gauge {
    order: 5
  }

  .doc {
    order: 6
  }

  .quiz__cta {
    order: 7;
    width: 100%;
    justify-content: center
  }

  .quiz__note {
    order: 8
  }

  /* 썸네일 스트립 */
  .strip {
    gap: 8px;
    max-width: none
  }

  .line {
    grid-template-columns: 74px 1fr;
    gap: 14px;
    padding: 16px 0
  }

  .line__tx {
    font-size: 14px;
    line-height: 1.7
  }
}

/* ───────── 모바일 단계형 피로 체크 ───────── */
.quiz__start {
  display: none
}

.qf[hidden],
.qf__stage[hidden],
.qf__done[hidden] {
  display: none
}

.qf {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink)
}

body.qf-on {
  overflow: hidden
}

.qf__top {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(125, 35, 43, .14);
  background: var(--paper)
}

.qf__back,
.qf__x {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 19px;
  line-height: 1;
  color: var(--point);
  transition: background .2s
}

.qf__back:active,
.qf__x:active {
  background: rgba(125, 35, 43, .09)
}

.qf__prog {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: rgba(125, 35, 43, .15);
  overflow: hidden
}

.qf__prog i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--point);
  transition: width .38s cubic-bezier(.2, .7, .3, 1)
}

.qf__count {
  flex: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: rgba(107, 75, 71, .7)
}

.qf__count b {
  font-size: 15px;
  color: var(--point)
}

.qf__stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 34px 22px calc(26px + env(safe-area-inset-bottom))
}

.qf__no {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  color: rgba(125, 35, 43, .55)
}

.qf__q {
  margin-top: 14px;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.44;
  letter-spacing: -.04em;
  color: var(--point)
}

.qf__hint {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: -.02em;
  color: #6B4B47
}

.qf__ans {
  display: grid;
  gap: 10px;
  margin-top: auto;
  padding-top: 32px
}

.qf__btn {
  height: 60px;
  border: 1px solid rgba(125, 35, 43, .28);
  border-radius: 999px;
  background: #fff;
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -.025em;
  color: var(--point);
  transition: transform .16s cubic-bezier(.2, .7, .3, 1), box-shadow .2s
}

.qf__btn--yes {
  border-color: var(--point);
  background: var(--point);
  color: #fff
}

.qf__btn--yes.is-sel {
  box-shadow: 0 0 0 2px var(--gold)
}

.qf__btn.is-tap {
  transform: scale(.97)
}

.qf__done {
  flex: 1;
  overflow-y: auto;
  padding: 34px 22px calc(30px + env(safe-area-inset-bottom))
}

.qf__tag {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  color: rgba(125, 35, 43, .55)
}

.qf__score {
  margin-top: 10px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -.03em;
  color: #6B4B47
}

.qf__score b {
  font-size: 52px;
  font-weight: 700;
  letter-spacing: -.05em;
  color: var(--point)
}

.qf__score i {
  margin-left: 6px;
  font-style: normal
}

.qf__done .doc {
  margin-top: 22px
}

.qf__acts {
  display: grid;
  gap: 10px;
  margin-top: 26px
}

.qf__acts .btn {
  width: 100%;
  justify-content: center
}

.qf__link {
  margin-top: 4px;
  padding: 10px;
  font-size: 14px;
  letter-spacing: -.02em;
  color: rgba(107, 75, 71, .8);
  text-decoration: underline;
  text-underline-offset: 3px
}

.qf__note {
  margin-top: 20px;
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(107, 75, 71, .7)
}

@media (max-width:860px) {

  /* 문항 목록은 단계형 플로우로 대체 */
  .quiz__list {
    display: none
  }

  .quiz__start {
    order: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 26px;
    height: 56px;
    border-radius: 999px;
    background:var(--point);/*#7D232B;#fff;*/
    color: #fff; /*var(--point);*/
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.02em
  }

  .quiz__start:active {
    transform: scale(.99)
  }
}

@media (max-width:380px) {
  .qf__q {
    font-size: 23px
  }

  .qf__btn {
    height: 56px;
    font-size: 16px
  }
}

@media (max-width:860px) {

  /* 체크 전에는 결과 영역을 감춘다 */
  .quiz .gauge,
  .quiz #qzDoc,
  .quiz .quiz__cta {
    display: none
  }

  .quiz.has-result .gauge {
    display: flex
  }

  .quiz.has-result #qzDoc {
    display: block
  }

  .quiz.has-result .quiz__cta {
    display: inline-flex
  }
}

/* ───────── 의료진: 모바일 좌·우·좌 배치 ───────── */
@media (max-width:860px) {
  .med__list {
    gap: 0
  }

  .prof {
    display: grid;
    grid-template-columns: 182px 1fr;
    gap: 16px;
    align-items: center;
    padding: 30px 0;
    border: 0;
    border-radius: 0;
    background: none;
    border-top: 1px solid rgba(255, 255, 255, .16)
  }

  .prof:first-child {
    padding-top: 4px;
    border-top: 0
  }

  .prof .shot {
    margin-bottom: 0;
    border-radius: 14px;
    box-shadow: 0 18px 38px rgba(30, 6, 9, .42)
  }

  /* 두 번째 원장은 사진을 오른쪽으로 */
  .prof:nth-child(even) {
    grid-template-columns: 1fr 182px
  }

  .prof:nth-child(even) .shot {
    order: 2
  }

  .prof:nth-child(even) .prof__body {
    text-align: right
  }

  .prof:nth-child(even) .prof__role::after {
    content: '';
    display: block
  }

  .prof:nth-child(even) .prof__cv li {
    padding-left: 0;
    padding-right: 14px
  }

  .prof:nth-child(even) .prof__cv li::before {
    left: auto;
    right: 0
  }

  .prof__body {
    align-self: start;
    padding-top: 6px
  }

  .prof__role {
    display: inline-block;
    margin-top: 0;
    font-size: 11.5px
  }

  .prof__name {
    margin-top: 6px;
    font-size: 24px
  }

  .prof__cv {
    margin-top: 12px
  }

  .prof__cv li {
    margin-top: 6px;
    font-size: 13.5px;
    line-height: 1.65
  }
}

@media (max-width:380px) {
  .prof {
    grid-template-columns: 160px 1fr;
    gap: 12px
  }

  .prof:nth-child(even) {
    grid-template-columns: 1fr 160px
  }
}

/* 한국어 줄바꿈: 단어 중간에서 끊기지 않게 */
body {
  word-break: keep-all;
  overflow-wrap: break-word
}

/* ───────── 모바일 의료진: 컷아웃 그대로 띄우기 ───────── */
@media (max-width:860px) {

  /* pf01~03은 투명 PNG → 흰 프레임 없이 배경 위에 바로 올린다 */
  .prof .shot {
    aspect-ratio: auto !important;
    overflow: visible;
    border-radius: 0;
    background: none;
    box-shadow: none
  }

  .prof .shot {
    margin-bottom: 5px
  }

  .prof .shot img {
    height: auto;
    object-fit: contain;
    filter:
      drop-shadow(0 1px 2px rgba(52, 10, 14, .14)) drop-shadow(0 12px 26px rgba(40, 6, 10, .22))
  }

  .prof {
    align-items: end
  }

  /* 단체컷은 텍스트 뒤 배경으로 은은하게 */
  .med__quote {
    position: relative;
    display: block;
    margin: 36px calc(var(--edge) * -1) -60px;
    padding: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden
  }

  .med__quote .shot {
    position: absolute;
    inset: 0;
    z-index: 0;
    margin: 0;
    aspect-ratio: auto !important;
    border-radius: 0;
    box-shadow: none
  }

  .med__quote .shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 12%;
    opacity: .62
  }

  .med__quote .shot::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(to bottom, var(--point) 0%, rgba(125, 35, 43, .74) 24%, rgba(125, 35, 43, .36) 60%, rgba(125, 35, 43, .26) 100%)
  }


}

/* 썸네일 위 카테고리 라벨 */
.strip__it .shot {
  position: relative
}

.strip__cat {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 10px 9px;
  background: linear-gradient(to top, rgba(30, 6, 9, .78), rgba(30, 6, 9, 0));
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-align: center;
  color: var(--gold-soft)
}

@media (max-width:860px) {
  .strip__cat {
    padding: 20px 6px 8px;
    font-size: 11.5px;
    letter-spacing: .1em
  }
}

/* ───────── 모바일 히어로: 라운드 박스 없이 전체 화면 ───────── */
@media (max-width:860px) {
  .stage {
    padding-bottom: 0
  }

  .recess {
    margin: 0;
    border-radius: 0;
    min-height: calc(var(--vh, 100svh) - var(--nav-h) - var(--bar-h))
  }

  .copy {
    padding: 0 22px 32px
  }
}

/* ───────── 대표 컷 3장 교차 페이드 (3초씩) ───────── */
.xfade img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

/* 데스크톱은 첫 컷만 */
.xfade img:nth-child(n+2) {
  opacity: 0
}

@media (max-width:860px) {
  .xfade img:nth-child(1) {
    animation: xf3a 9s ease-in-out infinite
  }

  .xfade img:nth-child(2) {
    animation: xf3b 9s ease-in-out infinite
  }

  .xfade img:nth-child(3) {
    animation: xf3c 9s ease-in-out infinite
  }
}

@keyframes xf3a {

  0%,
  32% {
    opacity: 1
  }

  38%,
  95% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@keyframes xf3b {

  0%,
  32% {
    opacity: 0
  }

  38%,
  65% {
    opacity: 1
  }

  71%,
  100% {
    opacity: 0
  }
}

@keyframes xf3c {

  0%,
  65% {
    opacity: 0
  }

  71%,
  95% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

@media (prefers-reduced-motion:reduce) {
  .xfade img:nth-child(n+2) {
    opacity: 0
  }
}

/* ───────── 모바일 자가체크 진입 카드 ───────── */
.qstart {
  display: none
}

@media (max-width:860px) {
  .qstart {
    order: 4;
    display: block;
    position: relative;
    margin-top: 26px;
    padding: 22px 20px 20px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 18px;
    background: rgba(255, 255, 255, .06)
  }

  .qstart__head {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .16)
  }

  .qstart__badge {
    align-self: flex-start;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--point-deep)
  }

  .qstart__title {
    margin-top: 4px;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.035em;
    color: #fff
  }

  .qstart__meta {
    font-size: 13px;
    letter-spacing: -.02em;
    color: rgba(255, 255, 255, .62)
  }

  /* 실제 문항을 살짝 보여줘 설문임을 드러낸다 */
  .qstart__peek {
    position: relative;
    margin-top: 6px;
    padding-bottom: 8px;
    list-style: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 42%, rgba(0, 0, 0, .15) 100%);
    mask-image: linear-gradient(to bottom, #000 42%, rgba(0, 0, 0, .15) 100%)
  }

  .qpeek {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    font-size: 14px;
    line-height: 1.45;
    letter-spacing: -.025em;
    color: rgba(255, 255, 255, .82)
  }

  .qpeek:last-child {
    border-bottom: 0
  }

  .qpeek__mark {
    flex: none;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .38)
  }

  .quiz__start {
    order: 0;
    margin-top: 16px;
    height: 54px
  }
}

/* 단계형 플로우 표정 아이콘 */
.qf__face {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  padding: 20px 0
}

.qf__face .face {
  width: 108px;
  height: 108px
}

.qf__face--big {
  flex: none;
  min-height: 0;
  justify-content: flex-start;
  padding: 0 0 14px
}

.qf__face--big .face {
  width: 76px;
  height: 76px
}

.qf__face .face__ring {
  stroke: rgba(125, 35, 43, .24)
}

.qf__face .face__eye {
  fill: var(--point)
}

.qf__face .face__mouth {
  stroke: var(--point)
}

.qf__face .face__tear {
  fill: var(--gold)
}

/* ───────── 모바일 상담 바텀시트 ───────── */
@media (max-width:860px) {
  .cbar {
    border-radius: 22px 22px 0 0;
    transition: box-shadow .32s cubic-bezier(.2, .7, .3, 1)
  }

  .cbar__inner {
    max-height: var(--bar-h);
    overflow: hidden;
    transition: max-height .38s cubic-bezier(.2, .7, .3, 1), padding .38s cubic-bezier(.2, .7, .3, 1)
  }

  .cbar__scrim {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(30, 6, 9, .5);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    animation: scrimin .28s ease both
  }

  .cbar__scrim[hidden] {
    display: none
  }

  /* 우측 상단 닫기 */
  .cbar.is-open .cbar__x {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 8px;
    right: 10px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    color: rgba(107, 75, 71, .8);
    transition: background .2s
  }

  .cbar.is-open .cbar__x:active {
    background: rgba(125, 35, 43, .09)
  }

  .cbar.is-open {
    box-shadow: 0 -18px 44px rgba(30, 6, 9, .3)
  }

  .cbar.is-open .cbar__inner {
    max-height: 460px !important;
    height: auto !important;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 10px;
    padding: 24px 20px calc(20px + env(safe-area-inset-bottom))
  }

  .cbar.is-open .cbar__title {
    display: block;
    flex: 1 1 100%;
    order: 1
  }

  .cbar__title b {
    display: block;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.035em;
    color: var(--point)
  }

  .cbar__title span {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.6;
    letter-spacing: -.02em;
    color: #6B4B47
  }

  /* iOS는 16px 미만 입력창에 자동 확대가 걸린다 */
  .fld,
  .cbar.is-open .fld--in {
    font-size: 16px
  }

  .cbar.is-open .fld--in {
    display: block;
    flex: 1 1 100%;
    order: 2;
    height: 52px;
    border-radius: 12px
  }

  .cbar.is-open .agree {
    display: inline-flex;
    order: 3;
    flex: 1 1 auto;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: #4A2C29
  }

  /* 좁은 화면에서 라벨을 숨기는 기본 규칙을 시트에서는 해제 */
  .cbar.is-open .agree span {
    display: inline
  }

  .cbar.is-open .agree input {
    width: 18px;
    height: 18px;
    flex: none
  }

  .cbar.is-open .agree__more {
    display: inline-block;
    order: 4;
    flex: 0 0 auto;
    padding: 5px 10px;
    font-size: 12.5px;
    color: var(--point);
    border-color: rgba(125, 35, 43, .32)
  }

  .cbar.is-open .cbar__quick {
    display: none
  }

  .cbar.is-open .cbar__submit {
    order: 5;
    flex: 1 1 100%;
    height: 54px;
    border-radius: 999px
  }
}

@keyframes scrimin {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

/* ───────── STUDY/WORK/LIFE: PC는 초안(3단 카드) 유지 ───────── */
.line__title {
  display: none
}

@media (min-width:861px) {
  .life {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: clamp(20px, 2.6vw, 36px);
    row-gap: 22px;
    align-items: start
  }

  .life .sec__head {
    grid-column: 1 / -1
  }

  .life .strip,
  .life .lines {
    display: contents
  }

  .life .strip__it .shot {
    --r: 4/5 !important;
    border-radius: 16px
  }

  .life .strip__cat {
    display: none
  }

  .life .line {
    display: block;
    padding: 0;
    border-top: 0
  }

  .life .line__cat {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    color: rgba(125, 35, 43, .7)
  }

  .life .line__title {
    display: block;
    margin-top: 12px;
    font-size: clamp(17px, 1.4vw, 21px);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -.035em;
    color: var(--point)
  }

  .life .line__tx {
    margin-top: 10px;
    font-size: 14.5px
  }
}

/* ───────── PC: 단체컷을 인용구 배경으로 (위→아래 그라데이션) ───────── */
@media (min-width:861px) {
  .med__quote {
    position: relative;
    display: block;
    margin: clamp(48px, 5vw, 78px) calc(var(--edge) * -1) calc(clamp(76px, 8vw, 128px) * -1);
    padding: 0;
    aspect-ratio: 21 / 8;
    overflow: hidden
  }

  .med__quote .shot {
    position: absolute;
    inset: 0;
    z-index: 0;
    margin: 0;
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none
  }

  .med__quote .shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 12%;
    opacity: .55
  }

  .med__quote .shot::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(to bottom, var(--point) 0%, rgba(125, 35, 43, .78) 26%, rgba(125, 35, 43, .38) 62%, rgba(125, 35, 43, .28) 100%)
  }


}

/* 최상단에서 당길 때 생기는 브라우저 고무줄 스크롤(사진 늘어남) 억제 */
html {
  overscroll-behavior-y: none
}

body {
  overscroll-behavior-y: none
}

/* ───────── 모바일 가격 카드: 제품 사진 키우기 ───────── */
@media (max-width:860px) {
  .price {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start
  }

  .price>* {
    flex: 1 1 100%
  }

  /* 3장을 카드의 직계 항목으로 풀어 배치 순서를 바꾼다 */
  .gift {
    display: contents
  }

  /* 1번 패키징 컷은 상품명 위로, 크게 */
  .gift .shot:first-child {
    order: -1;
    flex: 1 1 100%;
    --r: 4/3 !important;
    margin: 0 0 22px;
    border-radius: 14px
  }

  /* 나머지 2장은 정보 아래 2단 */
  .gift .shot:nth-child(n+2) {
    order: 9;
    flex: 0 0 calc(33.333% - 6px);
    --r: 1/1 !important;
    margin-top: 22px
  }

  .gift .shot:nth-child(n+3) {
    margin-left: 9px
  }

  .price__cta {
    order: 10
  }

  .price__fine {
    order: 11
  }
}

/* ───────── 원내 전경 밴드 ───────── */
.lobby {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--paper)
}

.lobby img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 46%
}

.lobby::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  background: linear-gradient(to top, rgba(30, 6, 9, .62), rgba(30, 6, 9, 0));
  pointer-events: none
}

.lobby__cap {
  position: absolute;
  left: var(--edge);
  bottom: clamp(18px, 2.2vw, 30px);
  z-index: 1;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 2px 10px rgba(30, 6, 9, .5)
}

@media (max-width:860px) {
  .lobby {
    aspect-ratio: 16 / 10
  }

  .lobby__cap {
    font-size: 12.5px
  }
}

/* ───────── 상담 3단계: 연결형 스테퍼 ───────── */
.flow {
  position: relative
}

.flow__it {
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr;
  column-gap: 18px;
  padding: 0 0 clamp(26px, 3vw, 38px);
  border-top: 0
}

.flow__it:last-child {
  padding-bottom: 0
}

/* 단계를 잇는 세로선 */
.flow__it:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 22px;
  top: 52px;
  bottom: 4px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(to bottom, rgba(125, 35, 43, .38), rgba(125, 35, 43, .12))
}

.flow__no {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(125, 35, 43, .28);
  border-radius: 50%;
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--point);
  z-index: 1
}

.flow__no::after {
  display: none
}

/* 마지막 단계는 채워서 마무리감 */
.flow__it:last-child .flow__no {
  border-color: var(--point);
  background: var(--point);
  color: #fff
}

.flow__title {
  grid-column: 2;
  grid-row: 1;
  margin-top: 9px
}

.flow__desc {
  grid-column: 2;
  grid-row: 2;
  margin-top: 7px
}

@media (max-width:860px) {
  .flow__it {
    grid-template-columns: 40px 1fr;
    column-gap: 14px
  }

  .flow__it:not(:last-child)::before {
    left: 19px;
    top: 46px
  }

  .flow__no {
    width: 40px;
    height: 40px;
    font-size: 13px
  }

  .flow__title {
    margin-top: 7px;
    font-size: 19px
  }
}

/* 3단계 간격 균일화 + 진행 애니메이션 */
.flow {
  display: grid;
  grid-auto-rows: 1fr
}

.flow__it {
  align-content: start
}

.flow__it:last-child .flow__no {
  border-color: rgba(125, 35, 43, .28);
  background: #fff;
  color: var(--point)
}

.flow__no {
  animation: stepOn 4.8s ease-in-out infinite;
  transition: none
}

.flow__it:nth-child(2) .flow__no {
  animation-delay: 1.6s
}

.flow__it:nth-child(3) .flow__no {
  animation-delay: 3.2s
}

@keyframes stepOn {

  0%,
  4% {
    border-color: rgba(125, 35, 43, .28);
    background: #fff;
    color: var(--point);
    box-shadow: 0 0 0 0 rgba(125, 35, 43, 0)
  }

  9%,
  27% {
    border-color: var(--point);
    background: var(--point);
    color: #fff;
    box-shadow: 0 0 0 6px rgba(125, 35, 43, .12)
  }

  33%,
  100% {
    border-color: rgba(125, 35, 43, .28);
    background: #fff;
    color: var(--point);
    box-shadow: 0 0 0 0 rgba(125, 35, 43, 0)
  }
}

@media (prefers-reduced-motion:reduce) {
  .flow__no {
    animation: none
  }

  .flow__it:last-child .flow__no {
    border-color: var(--point);
    background: var(--point);
    color: #fff
  }
}

/* ───────── 모바일 하단 CTA 바 리디자인 ───────── */
@media (max-width:860px) {
  :root {
    --bar-h: 76px
  }

  .cbar {
    background: rgba(246, 240, 231, .88);
    -webkit-backdrop-filter: saturate(140%) blur(16px);
    backdrop-filter: saturate(140%) blur(16px);
    border-top: 1px solid rgba(125, 35, 43, .14);
    box-shadow: 0 -12px 34px rgba(30, 6, 9, .16)
  }

  .cbar__inner {
    gap: 10px;
    padding: 0 14px calc(env(safe-area-inset-bottom) / 2)
  }

  /* 보조 버튼은 가볍게 */
  .cbar__quick {
    flex: 0 0 38%;
    height: 52px;
    border: 0;
    border-radius: 14px;
    background: rgba(125, 35, 43, .08);
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -.03em;
    color: var(--point);
    transition: background .2s
  }

  .cbar__quick:active {
    background: rgba(125, 35, 43, .14)
  }

  /* 주 버튼에 무게 */
  .cbar__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1 1 auto;
    height: 52px;
    padding: 0 18px;
    border-radius: 14px;
    background: linear-gradient(135deg, #8E2A33 0%, var(--point) 45%, #611820 100%);
    box-shadow: 0 10px 22px rgba(125, 35, 43, .34);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.03em;
    color: #fff
  }

  .cbar__submit span {
    transition: transform .25s
  }

  .cbar__submit:active {
    transform: translateY(1px);
    box-shadow: 0 6px 14px rgba(125, 35, 43, .3)
  }

  .cbar__submit:active span {
    transform: translateX(3px)
  }

  /* 시트가 열리면 주 버튼은 풀폭 필 버튼 */
  .cbar.is-open .cbar__submit {
    border-radius: 999px;
    height: 54px;
    box-shadow: 0 10px 24px rgba(125, 35, 43, .3)
  }
}

/* ───────── 모바일 하단 바: 카카오·네이버 + 상담 신청 ───────── */
@media (max-width:860px) {
  .cbar__quick {
    display: none !important
  }

  .chan {
    display: flex;
    flex: 0 0 auto;
    gap: 8px
  }

  .chan__bar {
    display: none
  }

  .chan__btn {
    justify-content: center;
    gap: 0;
    width: 52px;
    height: 52px;
    padding: 0;
    border-radius: 14px;
    background: rgba(125, 35, 43, .08);
    font-size: 0;
    color: var(--point);
    transition: background .2s
  }

  .chan__btn:active {
    background: rgba(125, 35, 43, .16)
  }

  .chan__btn svg {
    width: 23px;
    height: 23px
  }

  .cbar__submit {
    flex: 1 1 auto
  }

  /* 시트가 열리면 채널 버튼은 숨김 */
  .cbar.is-open .chan {
    display: none
  }
}

/* 하단 CTA 바: 스크롤 중 흔들림 방지(합성 레이어 고정) */
@media (max-width:860px) {
  .cbar {
    animation: none;
    transform: translate3d(0, 0, 0);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    backdrop-filter: saturate(140%) blur(12px)
  }

  .cbar__scrim {
    transform: translate3d(0, 0, 0)
  }
}

/* ───────── 진료 원칙: 사진 제거하고 영상을 크게 ───────── */
.lead__photo {
  display: none
}

.lead__media {
  aspect-ratio: 3 / 4
}

.lead__clip {
  position: static;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 24px 52px rgba(40, 12, 16, .24)
}

@media (max-width:860px) {
  .lead__media {
    aspect-ratio: 3 / 4;
    max-height: none
  }

  .lead__clip {
    width: 100%;
    height: 100%;
    border-radius: 16px;
    box-shadow: 0 18px 36px rgba(40, 12, 16, .2)
  }
}

/* ───────── 자가체크 미리보기: 체크 채워지는 애니메이션 ───────── */
@media (max-width:860px) {
  .qpeek__mark {
    position: relative;
    animation: peekFill 6s ease-in-out infinite
  }

  .qpeek__mark::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 6px;
    width: 7px;
    height: 3.5px;
    border-left: 1.7px solid var(--point);
    border-bottom: 1.7px solid var(--point);
    transform: rotate(-45deg) scale(.4);
    opacity: 0;
    animation: peekCheck 6s ease-in-out infinite
  }

  .qpeek:nth-child(2) .qpeek__mark,
  .qpeek:nth-child(2) .qpeek__mark::after {
    animation-delay: .35s
  }

  .qpeek:nth-child(3) .qpeek__mark,
  .qpeek:nth-child(3) .qpeek__mark::after {
    animation-delay: .7s
  }

  .qpeek:nth-child(4) .qpeek__mark,
  .qpeek:nth-child(4) .qpeek__mark::after {
    animation-delay: 1.05s
  }
}

@keyframes peekFill {

  0%,
  6% {
    background: transparent;
    border-color: rgba(255, 255, 255, .38)
  }

  14%,
  70% {
    background: var(--gold);
    border-color: var(--gold)
  }

  78%,
  100% {
    background: transparent;
    border-color: rgba(255, 255, 255, .38)
  }
}

@keyframes peekCheck {

  0%,
  8% {
    opacity: 0;
    transform: rotate(-45deg) scale(.4)
  }

  16%,
  70% {
    opacity: 1;
    transform: rotate(-45deg) scale(1)
  }

  78%,
  100% {
    opacity: 0;
    transform: rotate(-45deg) scale(.4)
  }
}

/* 하단 바 채널 버튼: 브랜드 컬러 */
@media (max-width:860px) {
  .chan__btn--kko {
    background: #FEE500;
    color: #191600
  }

  .chan__btn--kko:active {
    background: #EDD500
  }

  .chan__btn--kko svg {
    fill: #191600
  }

  .chan__btn--nv {
    background: #03C75A;
    color: #fff
  }

  .chan__btn--nv:active {
    background: #02B050
  }

  .chan__btn--kko svg {
    width: 23px;
    height: 23px
  }

  .chan__btn--nv svg {
    width: 19px;
    height: 19px
  }
}

/* 의료진 인용구를 섹션 도입부로 */
.med__saying {
  margin-top: clamp(22px, 2.6vw, 32px);
  font-size: clamp(17px, 1.7vw, 23px);
  line-height: 1.66
}

/* iOS: fixed + backdrop-filter 조합에서 배경 박스가 스크롤과 따로 노는 문제 → 블러 제거하고 단색 고정 */
@media (max-width:860px) {
  .cbar {
    animation: none;
    transform: none;
    will-change: auto;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--paper);
    border-top: 1px solid rgba(125, 35, 43, .14);
    box-shadow: 0 -10px 28px rgba(30, 6, 9, .14)
  }
}

/* ───────── 가격 카드: 대표 컷을 카드 상단에 꽉 차게 ───────── */
.price {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  overflow: hidden
}

.price>* {
  flex: 1 1 100%
}

.gift {
  display: contents
}

.gift .shot:first-child {
  order: -1;
  flex: 1 1 100%;
  --r: 4/3 !important;
  margin: calc((var(--pp) + 1px) * -1) calc((var(--pp) + 1px) * -1) clamp(20px, 2.4vw, 28px);
  border-radius: 18px 18px 0 0
}

.gift .shot:nth-child(n+2) {
  order: 9;
  flex: 0 0 calc(50% - 5px);
  --r: 1/1 !important;
  margin-top: clamp(18px, 2vw, 24px)
}

.gift .shot:nth-child(n+3) {
  margin-left: 10px
}

.price__cta {
  order: 10
}

.price__fine {
  order: 11
}

/* ───────── 3포인트: 아이콘 + 세로 구분선 ───────── */
.pillars__grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 0
}

.pillar {
  padding: 0 clamp(10px, 2vw, 30px);
  border: 0;
  border-left: 1px solid rgba(125, 35, 43, .16);
  border-radius: 0;
  background: none;
  text-align: center
}

.pillar:first-child {
  border-left: 0
}

.pillar__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: rgba(125, 35, 43, .07)
}

.pillar__ico svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--point);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round
}

.pillar__title {
  margin-top: 0;
  font-size: clamp(16px, 1.5vw, 21px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -.035em;
  color: var(--point)
}

.pillar__desc {
  margin-top: 12px;
  font-size: 14.5px;
  line-height: 1.7
}

@media (max-width:860px) {
  .pillars__grid {
    grid-template-columns: repeat(3, 1fr)
  }

  .pillar {
    padding: 0 8px
  }

  .pillar:not(:first-child) {
    margin-top: 0;
    padding-top: 0;
    border-top: 0
  }

  .pillar__ico {
    width: 44px;
    height: 44px;
    margin-bottom: 12px
  }

  .pillar__ico svg {
    width: 23px;
    height: 23px
  }

  .pillar__title {
    font-size: 14.5px;
    line-height: 1.4;
    letter-spacing: -.045em
  }

  .pillar__desc {
    display: none
  }
}

/* ───────── 최종 CTA: 카카오 · 네이버 2단 ───────── */
.fin__cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 520px;
  margin: clamp(26px, 3vw, 34px) auto 0
}

.btn--kko,
.btn--nv {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  height: 58px;
  margin-top: 0;
  border: 0;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.03em;
  transition: transform .2s, filter .2s
}

.btn--kko svg,
.btn--nv svg {
  width: 19px;
  height: 19px;
  flex: none;
  fill: currentColor;
  stroke: none
}

.btn--kko {
  background: #FEE500;
  color: #191600
}

.btn--nv {
  background: #03C75A;
  color: #fff
}

.btn--nv svg {
  width: 16px;
  height: 16px
}

.btn--kko:hover,
.btn--nv:hover {
  transform: translateY(-2px);
  filter: brightness(1.04)
}

@media (max-width:860px) {
  .fin__cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex-direction: unset;
    gap: 8px
  }

  .fin__cta .btn {
    width: 100%;
    height: 54px;
    font-size: 15px
  }
}

@media (max-width:380px) {

  .btn--kko,
  .btn--nv {
    font-size: 13.5px;
    gap: 6px
  }
}

/* ───────── 전환 메시지 ───────── */
.bridge {
  max-width: 760px;
  margin: clamp(44px, 5vw, 72px) auto 0;
  padding-top: clamp(36px, 4vw, 54px);
  border-top: 1px solid rgba(125, 35, 43, .18);
  text-align: center
}

.bridge__hook {
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -.045em;
  color: var(--point)
}

.bridge__sub {
  margin-top: clamp(14px, 1.6vw, 20px);
  font-size: clamp(14.5px, 1.2vw, 16.5px);
  line-height: 1.85;
  letter-spacing: -.025em;
  color: #6B4B47
}

@media (max-width:860px) {
  .bridge__hook {
    font-size: 23px;
    line-height: 1.42
  }

  .bridge__sub br {
    display: none
  }
}

/* 히어로 배경을 별도 레이어로 고정해 오버스크롤 시 늘어나 보이지 않게 */
@media (max-width:860px) {

  html,
  body {
    overscroll-behavior: none
  }

  .recess__bg {
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden
  }
}

/* ───────── 섹션 사이 로고 구분자 ───────── */
.mat {
  border-top: 0;
  margin-top: -1px;
  padding-top: clamp(56px, 6vw, 96px)
}

.seal {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(84px, 9vw, 140px)
}

.seal img {
  width: auto;
  height: clamp(34px, 4vw, 54px);
  object-fit: contain;
  opacity: 1
}

/* 강조 단어 */
.sec__title em {
  font-style: normal;
  color: var(--gold)
}

/* ───────── 로고 구분자: 위아래 여백 균일 ───────── */
.mat {
  padding-top: 0
}

.seal {
  --gap: clamp(112px, 12vw, 180px);
  margin-bottom: var(--gap);
  padding-top: calc(var(--gap) - clamp(76px, 8vw, 128px))
}

/* 섹션 중간 구분자는 위아래 동일 여백 */
.seal--mid {
  margin: var(--gap) 0;
  padding-top: 0
}

/* 04 카드 아래 선 제거 */
.mix {
  margin-top: 0;
  padding-top: 0;
  border-top: 0
}

@media (max-width:860px) {
  .seal {
    padding-top: calc(var(--gap) - 60px)
  }

  .seal--mid {
    padding-top: 0
  }
}

/* 밝은 섹션용 로고 구분자 (브랜드 레드) */
.plan {
  padding-top: 0
}

.seal--ink {
  display: flex;
  justify-content: center
}

.seal--ink i {
  display: block;
  height: clamp(34px, 4vw, 54px);
  aspect-ratio: 5774 / 3229;
  background: var(--point);
  -webkit-mask: url("./logo.png") center / contain no-repeat;
  mask: url("./logo.png") center / contain no-repeat
}

/* 의료진: 소속 직함 줄 */
.prof__title {
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.5;
  letter-spacing: -.02em;
  color: var(--gold-soft)
}

.prof__cv {
  margin-top: 16px
}

@media (max-width:860px) {
  .prof__title {
    font-size: 12.5px;
    margin-top: 4px
  }

  .prof__cv {
    margin-top: 12px
  }
}

/* ───────── 푸터 확장 ───────── */
.foot__name i {
  display: block;
  margin: 0 0 2px;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--gold)
}

.foot__sub {
  color: rgba(255, 255, 255, .5) !important
}

.foot__tel {
  font-weight: 600;
  letter-spacing: -.02em;
  color: #fff !important
}

.foot__chan {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .14)
}

.foot__chan a {
  display: block;
  margin-top: 7px;
  font-size: 13.5px
}

/* 진료시간 */
.hours {
  margin: 0
}

.hours>div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .09)
}

.hours>div:last-child {
  border-bottom: 0
}

.hours dt {
  font-size: 13.5px;
  color: rgba(255, 255, 255, .62);
  white-space: nowrap
}

.hours dd {
  margin: 0;
  font-size: 13.5px;
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-align: right
}

.hours__lunch dd i {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-style: normal;
  color: rgba(255, 255, 255, .45)
}

.foot__biz {
  line-height: 1.75
}

@media (max-width:860px) {
  .hours>div {
    padding: 8px 0
  }

  .foot__chan a {
    display: inline-block;
    margin-right: 16px
  }
}

/* ───────── PC: 상담 3단계를 가격 카드 높이에 맞춰 배분 ───────── */
@media (min-width:861px) {
  .plan__body {
    align-items: stretch
  }

  .plan__left {
    display: flex;
    flex-direction: column
  }

  .flow {
    flex: 1
  }

  .flow__it {
    grid-template-columns: 56px 1fr;
    column-gap: 22px;
    padding-bottom: 0
  }

  .flow__it:not(:last-child)::before {
    left: 27px;
    top: 64px;
    bottom: 8px
  }

  .flow__no {
    width: 56px;
    height: 56px;
    font-size: 15px
  }

  .flow__title {
    margin-top: 12px;
    font-size: clamp(21px, 1.9vw, 26px)
  }

  .flow__desc {
    margin-top: 9px;
    font-size: 16px;
    line-height: 1.8
  }
}

/* 진료 원칙: 본문 확대 */
.lead__desc {
  font-size: clamp(16px, 1.35vw, 17.5px);
  line-height: 1.88;
  max-width: 54ch
}

.lead__desc+.lead__desc {
  margin-top: 18px
}

.lead__sub {
  margin-top: 18px
}

/* ───────── STUDY·WORK·LIFE 본문 확장 ───────── */
.life__lede {
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: -.03em;
  color: #4A2C29;
  max-width: 46ch
}

.life__saying {
  margin-top: clamp(32px, 3.6vw, 52px)
}

.line__title {
  display: block;
  margin-top: 8px;
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.035em;
  color: var(--point)
}

@media (max-width:860px) {
  .line {
    display: block;
    padding: 18px 0
  }

  .line__cat {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    color: rgba(125, 35, 43, .68)
  }

  .line__title {
    margin-top: 6px;
    font-size: 18px
  }

  .line__tx {
    margin-top: 9px;
    font-size: 14.5px;
    line-height: 1.8
  }
}

/* ───────── 서브타이틀 일괄 확대 ───────── */
.sec__desc {
  font-size: clamp(16.5px, 1.5vw, 19px);
  line-height: 1.8;
  max-width: 52ch
}

.sec__lede {
  font-size: clamp(17px, 1.5vw, 21px)
}

.quiz__desc {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.8
}

.lead__sub {
  font-size: clamp(18px, 1.6vw, 22px)
}

.fin__sub {
  font-size: clamp(17px, 1.5vw, 21px)
}

/* ───────── 전승 가미방 블록: 영상 위 · 본문 아래 ───────── */
.mix {
  display: block
}

.mix__media {
  max-width: 900px;
  margin-bottom: clamp(32px, 4vw, 56px)
}

.mix__text {
  max-width: 68ch
}

.mix__title {
  margin-top: 0
}

.mix__lede {
  margin-top: 16px;
  font-size: clamp(17px, 1.5vw, 21px)
}

.mix__desc {
  margin-top: 20px;
  max-width: none;
  font-size: clamp(16px, 1.35vw, 17.5px);
  line-height: 1.88
}

@media (max-width:860px) {
  .mix__lede br {
    display: none
  }

  .mix__desc {
    margin-top: 16px;
    font-size: 15.5px;
    line-height: 1.82
  }
}

/* PC: 원료 카드 4장을 좌측 사진 높이에 맞춤 */
@media (min-width:861px) {
  .mat__body {
    align-items: stretch
  }

  .cards {
    grid-auto-rows: 1fr
  }

  .card {
    display: flex;
    flex-direction: column;
    justify-content: center
  }
}

/* PC: 전승 가미방은 좌 영상 · 우 본문 */
@media (min-width:861px) {
  .mix {
    display: grid;
    grid-template-columns: minmax(300px, 38%) 1fr;
    gap: clamp(30px, 3.6vw, 60px);
    align-items: start
  }

  .mix__media {
    max-width: none;
    margin-bottom: 0;
    position: sticky;
    top: calc(var(--nav-h) + 28px)
  }

  .mix__text {
    max-width: none
  }
}

/* ───────── STUDY·WORK·LIFE 사진 3장씩 ───────── */
.shots3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 16px;
  list-style: none
}

.shots3 .shot {
  border-radius: 8px
}

.life__saying {
  grid-column: 1 / -1
}

@media (min-width:861px) {
  .life .line {
    display: block;
    padding: 0;
    border-top: 0
  }

  .shots3 {
    gap: 8px;
    margin-bottom: 20px
  }

  .shots3 .shot {
    border-radius: 10px
  }
}

@media (max-width:860px) {
  .shots3 {
    gap: 5px;
    margin-bottom: 14px
  }

  .shots3 .shot {
    border-radius: 7px
  }
}

/* 최종 CTA: 유튜브 추가 (3단) */
.fin__cta {
  grid-template-columns: repeat(3, 1fr);
  max-width: 760px
}

.btn--yt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  height: 58px;
  margin-top: 0;
  border: 0;
  border-radius: 999px;
  background: #FF0000;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.03em;
  transition: transform .2s, filter .2s
}

.btn--yt svg {
  width: 21px;
  height: 21px;
  flex: none;
  fill: currentColor;
  stroke: none
}

.btn--yt:hover {
  transform: translateY(-2px);
  filter: brightness(1.06)
}

@media (max-width:860px) {
  .fin__cta {
    grid-template-columns: 1fr 1fr
  }

  .fin__cta .btn--yt {
    grid-column: 1 / -1;
    height: 54px;
    font-size: 15px
  }
}

/* PC에서만: 가로 구도 사진이라 정사각 크롭 대신 4:3 (모바일은 1:1 유지) */
@media (min-width:861px) {
  .shots3 .shot {
    --r: 4/3 !important
  }
}

/* ───────── PC: STUDY·WORK·LIFE 대표컷 1장 크게 · 3장 교차 페이드 ───────── */
@media (min-width:861px) {
  .shots3 {
    display: block;
    position: relative;
    aspect-ratio: 4 / 3;
    margin-bottom: 20px;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(125, 35, 43, .07)
  }

  .shots3 li {
    position: absolute;
    inset: 0
  }

  .shots3 .shot {
    position: absolute;
    inset: 0;
    aspect-ratio: auto !important;
    border-radius: 0
  }

  .shots3 li:nth-child(1) {
    animation: xf3a 9s ease-in-out infinite
  }

  .shots3 li:nth-child(2) {
    animation: xf3b 9s ease-in-out infinite
  }

  .shots3 li:nth-child(3) {
    animation: xf3c 9s ease-in-out infinite
  }

  /* 세 칸이 동시에 넘어가지 않도록 시차 */
  .line:nth-child(2) .shots3 li {
    animation-delay: -1.2s
  }

  .line:nth-child(3) .shots3 li {
    animation-delay: -2.4s
  }
}

@media (prefers-reduced-motion:reduce) {
  .shots3 li:nth-child(n+2) {
    opacity: 0
  }
}

/* ───────── 증빙 서류 2장 교차 페이드 (2초씩) ───────── */
.xfade2 img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.xfade2 img:nth-child(1) {
  animation: xf2a 4s ease-in-out infinite
}

.xfade2 img:nth-child(2) {
  animation: xf2b 4s ease-in-out infinite
}

@keyframes xf2a {

  0%,
  44% {
    opacity: 1
  }

  50%,
  94% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@keyframes xf2b {

  0%,
  44% {
    opacity: 0
  }

  50%,
  94% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

@media (prefers-reduced-motion:reduce) {
  .xfade2 img:nth-child(2) {
    opacity: 0
  }
}

/* 이미지·영상 우클릭 및 드래그 방지 */
img,
video {
  -webkit-user-drag: none;
  user-select: none
}

/* PC 하단 바: 채널은 왼쪽, 신청 버튼은 오른쪽 끝 */
@media (min-width:861px) {
  .cbar__submit {
    margin-left: auto
  }
}

/* ───────── PC: 하단 바 대신 우측 원형 퀵 버튼 ───────── */
.side {
  display: none
}

@media (min-width:861px) {
  .cbar {
    display: none
  }

  body {
    padding-bottom: 0
  }

  .side {
    position: fixed;
    right: clamp(18px, 2vw, 32px);
    bottom: clamp(22px, 3vh, 40px);
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px
  }

  /* 원 안에 아이콘 + 텍스트 */
  .side__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 74px;
    height: 74px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(30, 6, 9, .24);
    transition: transform .22s cubic-bezier(.2, .7, .3, 1), box-shadow .22s
  }

  .side__ico {
    display: grid;
    place-items: center;
    width: auto;
    height: auto;
    background: none;
    border: 0;
    box-shadow: none
  }

  .side__ico svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    stroke: none
  }

  .side__ico--line svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round
  }

  .side__tx {
    padding: 0;
    background: none;
    box-shadow: none;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.2;
    white-space: nowrap;
    color: inherit
  }

  .side__btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 30px rgba(30, 6, 9, .3)
  }

  .side__btn--kko {
    background: #FEE500;
    color: #191600
  }

  .side__btn--nv {
    background: #03C75A;
    color: #fff
  }

  .side__btn--cta {
    background: var(--gold);
    color: var(--point-deep)
  }

  .side__btn--top {
    background: var(--paper);
    color: var(--point);
    border: 1px solid rgba(125, 35, 43, .18)
  }
}

/* 푸터 상담 채널: 가로 배치 */
.foot__chan {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px
}

.foot__chan a {
  display: inline-block;
  margin-top: 0;
  white-space: nowrap
}

/* 3포인트: 아이콘 위 사진 */
.pillar__shot {
  margin-bottom: clamp(14px, 1.6vw, 20px);
  border-radius: 12px
}

.pillar__ico {
  margin-bottom: 14px
}

@media (max-width:860px) {
  .pillar__shot {
    margin-bottom: 10px;
    border-radius: 8px
  }

  .pillar__ico {
    margin-bottom: 10px
  }
}

/* 푸터: 채널 링크를 브랜드 줄 우측으로 */
.foot__chan {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  margin-left: auto
}

.foot__brand {
  flex-wrap: wrap;
  gap: 12px 20px
}

@media (max-width:860px) {
  .foot__chan {
    flex-basis: 100%;
    margin-left: 0;
    margin-top: 4px;
    gap: 8px 16px
  }

  .foot__chan a {
    font-size: 13px
  }
}

/* 3칼럼 아래 한 줄 */
/* 전환 섹션 (독립) */
.turn .bridge {
  margin-top: 0;
  padding-top: 0;
  border-top: 0
}

/* 3포인트 아래 한 줄 */
.pillars__saying {
  margin: clamp(64px, 7.5vw, 108px) auto 0;
  text-align: center;
  font-size: clamp(20px, 2.2vw, 29px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -.045em;
  color: var(--point)
}

/* 전환 섹션(독립) */
.turn .bridge {
  margin-top: 0;
  padding-top: 0;
  border-top: 0
}

/* PC: 하단 바가 없어졌으므로 히어로가 화면을 꽉 채우도록 */
@media (min-width:861px) {
  :root {
    --bar-h: 0px;
    --gutter: 0px
  }
}

/* ───────── 전환 섹션: 지친 일상 (와이드 밴드) ───────── */
.tired {
  position: relative;
  margin: clamp(40px, 4.5vw, 64px) calc(var(--edge) * -1) 0;
  list-style: none
}

.tired .shot {
  border-radius: 0;
  background: none
}

/* 원본이 차분한 저채도 컷이라 살짝만 눌러 '지친 상태'로 읽히게 */
.tired img {
  filter: saturate(.78) contrast(.97) brightness(.98)
}

/* 위쪽을 종이색으로 흘려 문장에서 이미지로 자연스럽게 넘어가도록 */
.tired::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 34%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--paper) 0%, rgba(246, 240, 231, .35) 55%, rgba(246, 240, 231, 0) 100%)
}

@media (min-width:861px) {
  .tired {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px
  }
}

/* 모바일: 세 장을 한 자리에서 교차 (잘라내지 않고 넓게) */
@media (max-width:860px) {
  .tired {
    aspect-ratio: 16 / 9;
    overflow: hidden
  }

  .tired li {
    position: absolute;
    inset: 0
  }

  .tired .shot {
    position: absolute;
    inset: 0;
    aspect-ratio: auto !important
  }

  .tired li:nth-child(1) {
    animation: xf3a 9s ease-in-out infinite
  }

  .tired li:nth-child(2) {
    animation: xf3b 9s ease-in-out infinite
  }

  .tired li:nth-child(3) {
    animation: xf3c 9s ease-in-out infinite
  }
}

@media (prefers-reduced-motion:reduce) {
  .tired li:nth-child(n+2) {
    opacity: 0
  }
}

/* PC: 섹션은 화면을 채우되, 사진 박스는 상하 여백을 유지 */
@media (min-width:861px) {
  :root {
    --box-inset: 22px
  }
}

/* 전환 섹션도 로고 구분자로 시작 */
.turn {
  padding-top: 0
}

/* 3포인트 → 전환 구분자: 위아래 여백을 구분자에서 직접 통제 */
.pillars {
  padding-bottom: 0
}

.turn .seal {
  --gap: clamp(96px, 10vw, 150px);
  padding-top: var(--gap);
  margin-bottom: var(--gap)
}

/* 3포인트 아래 한 줄: 환자에게 건네는 말처럼 따옴표 */
.pillars__saying::before,
.pillars__saying::after {
  /* Pretendard 따옴표는 직선형이라 곡선이 살아 있는 세리프로 */
  font-family: Georgia, 'Times New Roman', 'Nanum Myeongjo', serif;
  color: var(--point);
  font-size: 2.1em;
  font-weight: 400;
  line-height: 0;
  vertical-align: -.28em
}

.pillars__saying::before {
  content: '\201C';
  margin-right: .08em
}

.pillars__saying::after {
  content: '\201D';
  margin-left: .06em
}

/* ───────── 3포인트 정리: 아이콘 제거 · 위계 강화 ───────── */
.pillar {
  border-left: 0
}

.pillar__shot {
  margin-bottom: clamp(18px, 2vw, 26px)
}

.pillar__title {
  font-size: clamp(19px, 1.9vw, 27px);
  line-height: 1.4
}

.pillar__title em {
  font-style: normal;
  color: var(--gold-deep, #A8802F)
}

.pillar__desc {
  margin-top: 14px;
  font-size: clamp(15px, 1.3vw, 16px);
  line-height: 1.8
}

@media (max-width:860px) {
  .pillar__title {
    font-size: 15px;
    line-height: 1.35
  }
}

/* PC 히어로: 아래 여백은 스테이지 패딩으로 확정 (마진이 먹지 않는 경우 방지) */
@media (min-width:861px) {
  .stage {
    padding-bottom: var(--box-inset)
  }

  .recess {
    margin-bottom: 0
  }
}

/* ───────── PC: 지친 일상 3컷을 한 장처럼 겹쳐 잇기 ───────── */
@media (min-width:861px) {
  .turn {
    padding-bottom: 0
  }

  .tired {
    display: flex;
    gap: 0
  }

  .tired li {
    flex: 1 1 0;
    min-width: 0
  }

  /* 겹침 폭이 페이드 폭보다 넓어야 아래 사진이 끝까지 받쳐준다.
     (겹침이 좁으면 두 장 다 반투명한 구간이 생겨 배경이 비친다) */
  .tired li+li {
    margin-left: -7%
  }

  .tired li+li .shot {
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 4%, #000 9%);
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 4%, #000 9%)
  }
}

/* ───────── "다정함은 체력에서 나옵니다." 여백 확대 + 시차 등장 ───────── */
.pillars__saying {
  margin-top: clamp(104px, 11vw, 168px);
  margin-bottom: clamp(16px, 1.6vw, 24px)
}

/* 위 3칼럼이 먼저 자리를 잡은 뒤 뒤늦게 떠오르도록 */
.pillars__saying[data-rv] {
  transition-delay: .7s;
  transition-duration: .9s
}

@media (prefers-reduced-motion:reduce) {
  .pillars__saying[data-rv] {
    transition-delay: 0s
  }
}

/* ───────── 상담 3단계 · 구성과 가격 섹션 분리 ───────── */
.buy {
  padding-top: 0
}

/* 좌: 구매 안내 / 우: 가격 카드 */
.buy__body {
  display: grid;
  gap: clamp(32px, 4vw, 68px);
  align-items: start
}

.binfo__row {
  padding: clamp(18px, 2vw, 24px) 0;
  border-top: 1px solid rgba(125, 35, 43, .14)
}

.binfo__row:last-child {
  border-bottom: 1px solid rgba(125, 35, 43, .14)
}

.binfo__dt {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--point)
}

.binfo__dd {
  margin-top: 8px;
  font-size: clamp(15px, 1.3vw, 16px);
  line-height: 1.8;
  letter-spacing: -.02em;
  color: #6B4B47;
  word-break: keep-all
}

/* 제품 컷 2장 */
.buypic {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: clamp(28px, 3vw, 40px)
}

@media (min-width:1181px) {

  /* 3단계: 진료 사진 좌 · 단계 우 */
  .plan__body--split {
    grid-template-columns: minmax(0, 44%) 1fr;
    align-items: center
  }

  .plan__body--split .plan__shot {
    margin-bottom: 0
  }

  .plan__body--split .flow__it {
    padding: 22px 0
  }

  .binfo {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: clamp(24px, 2.6vw, 40px)
  }

  /* 2×2 배치에서 위쪽 두 칸만 윗선, 아래 두 칸만 밑선 */
  .binfo__row:nth-child(-n+2) {
    border-top: 1px solid rgba(125, 35, 43, .14)
  }

  .binfo__row:nth-child(n+3) {
    border-top: 1px solid rgba(125, 35, 43, .14);
    border-bottom: 1px solid rgba(125, 35, 43, .14)
  }

  .binfo__row:last-child {
    border-bottom: 1px solid rgba(125, 35, 43, .14)
  }
}

/* ═════════ 처방 안내: 대표 구성 3 + 수량표 ═════════ */
.packs {
  display: grid;
  gap: clamp(14px, 1.6vw, 20px);
  list-style: none
}

.pack {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(125, 35, 43, .16);
  border-radius: 18px;
  background: #fff;
  overflow: hidden
}

.pack__shot {
  border-radius: 0;
  flex: none
}

.pack__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(22px, 2.4vw, 30px)
}

.pack__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: rgba(125, 35, 43, .62)
}

.pack__qty {
  margin-top: 10px;
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.05em;
  color: var(--point)
}

.pack__qty i {
  margin-left: 3px;
  font-size: .46em;
  font-style: normal;
  font-weight: 600
}

.pack__amt {
  margin-top: 12px;
  padding-bottom: clamp(14px, 1.6vw, 18px);
  border-bottom: 1px solid rgba(125, 35, 43, .14);
  font-size: clamp(21px, 1.9vw, 26px);
  font-weight: 700;
  letter-spacing: -.04em;
  color: var(--ink)
}

.pack__amt i {
  margin-left: 3px;
  font-size: 15px;
  font-style: normal;
  font-weight: 500
}

.pack__unit {
  margin-top: 14px;
  font-size: 14.5px;
  letter-spacing: -.02em;
  color: #6B4B47
}

.pack__unit s {
  margin: 0 2px 0 4px;
  color: rgba(107, 75, 71, .5);
  text-decoration-thickness: 1px
}

.pack__unit b {
  font-weight: 700;
  color: var(--point)
}

.pack__save {
  align-self: flex-start;
  margin-top: 10px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(125, 35, 43, .07);
  font-size: 12.5px;
  letter-spacing: -.02em;
  color: var(--point)
}

.pack__save b {
  font-weight: 700
}

.pack__desc {
  margin-top: auto;
  padding-top: clamp(16px, 1.8vw, 22px);
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: -.02em;
  color: #6B4B47;
  word-break: keep-all
}

/* 가장 많이 선택하는 구성 강조 */
.pack--pick {
  border-color: rgba(125, 35, 43, .42);
  box-shadow: 0 14px 34px -22px rgba(87, 20, 26, .55)
}

.pack--pick .pack__eyebrow {
  color: var(--point)
}

/* ── 수량표 ── */
.ptable {
  margin-top: clamp(28px, 3.2vw, 44px);
  overflow-x: auto;
  border: 1px solid rgba(125, 35, 43, .16);
  border-radius: 16px;
  background: #fff
}

.ptable table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums
}

.ptable caption {
  padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 26px) 0;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: rgba(125, 35, 43, .62)
}

.ptable th,
.ptable td {
  padding: clamp(13px, 1.5vw, 17px) clamp(12px, 1.4vw, 18px);
  text-align: right;
  font-size: clamp(14px, 1.2vw, 15.5px);
  letter-spacing: -.02em;
  white-space: nowrap
}

.ptable thead th {
  border-bottom: 1px solid rgba(125, 35, 43, .18);
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(107, 75, 71, .8)
}

.ptable th:first-child,
.ptable td:first-child {
  padding-left: clamp(18px, 2vw, 26px);
  text-align: left
}

.ptable th:last-child,
.ptable td:last-child {
  padding-right: clamp(18px, 2vw, 26px)
}

.ptable tbody th {
  font-weight: 700;
  color: var(--point)
}

.ptable tbody tr+tr th,
.ptable tbody tr+tr td {
  border-top: 1px solid rgba(125, 35, 43, .1)
}

.ptable tbody td {
  color: var(--ink)
}

.ptable__none {
  color: rgba(107, 75, 71, .38) !important
}

.ptable__save {
  font-weight: 700;
  color: var(--point) !important
}



.buy .binfo {
  margin-top: clamp(28px, 3.2vw, 44px)
}

/* ═════════ 1년 정기 구독 ═════════ */
.subs {
  padding-top: 0
}

.subs__head {
  max-width: 860px
}

.subs__list {
  display: grid;
  gap: clamp(14px, 1.6vw, 20px);
  list-style: none
}

.sub {
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 38px);
  border: 1px solid rgba(125, 35, 43, .16);
  border-radius: 18px;
  background: #fff
}

.sub__name {
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--point)
}

.sub__name em {
  font-style: normal;
  letter-spacing: 0
}

.sub__struct {
  margin-top: 9px;
  font-size: 14px;
  letter-spacing: -.02em;
  color: #6B4B47
}

.sub__amt {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 10px;
  margin-top: clamp(18px, 2vw, 24px);
  padding-bottom: clamp(16px, 1.8vw, 22px);
  border-bottom: 1px solid rgba(125, 35, 43, .14);
  font-size: clamp(28px, 2.8vw, 38px);
  font-weight: 700;
  letter-spacing: -.045em;
  color: var(--point)
}

.sub__amt i {
  margin-left: 2px;
  font-size: 16px;
  font-style: normal;
  font-weight: 500
}

.sub__amt span {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(107, 75, 71, .7)
}

.sub__meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: clamp(16px, 1.8vw, 20px);
  list-style: none
}

.sub__meta li {
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(125, 35, 43, .05)
}

.sub__meta span {
  display: block;
  font-size: 12px;
  letter-spacing: -.01em;
  color: rgba(107, 75, 71, .8)
}

.sub__meta b {
  display: block;
  margin-top: 5px;
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--ink)
}

.sub__save {
  align-self: flex-start;
  margin-top: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(125, 35, 43, .07);
  font-size: 12.5px;
  letter-spacing: -.02em;
  color: var(--point)
}

.sub__save b {
  font-weight: 700
}

.sub__desc {
  margin-top: auto;
  padding-top: clamp(18px, 2vw, 24px);
  font-size: clamp(14.5px, 1.25vw, 16px);
  line-height: 1.75;
  letter-spacing: -.025em;
  color: #4A2C29;
  word-break: keep-all
}

.sub--sig {
  border-color: rgba(125, 35, 43, .42);
  box-shadow: 0 14px 34px -22px rgba(87, 20, 26, .55)
}

.subs__close {
  margin-top: clamp(32px, 3.6vw, 48px);
  text-align: center;
  font-size: clamp(16px, 1.6vw, 21px);
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: -.035em;
  color: var(--point);
  word-break: keep-all
}

@media (min-width:861px) {
  .packs {
    grid-template-columns: repeat(2, 1fr)
  }

  .subs__list {
    grid-template-columns: repeat(2, 1fr)
  }
}

/* 모바일: 대표 구성은 사진을 좌측에 작게 */
@media (max-width:860px) {
  .pack {
    flex-direction: row
  }

  .pack__shot {
    width: 38%;
    max-width: 160px;
    --r: 3/4 !important
  }

  .pack__body {
    padding: 20px
  }

  .pack__desc {
    display: none
  }

  .subs__close br {
    display: none
  }
}

/* 좁은 화면: 표를 한 화면에 담기 */
@media (max-width:600px) {
  .ptable table {
    min-width: 0
  }

  .ptable .tsm {
    display: none
  }

  .ptable th,
  .ptable td {
    padding: 12px 8px;
    font-size: 13px
  }

  .ptable th:first-child,
  .ptable td:first-child {
    padding-left: 16px
  }

  .ptable th:last-child,
  .ptable td:last-child {
    padding-right: 16px
  }
}

/* ───────── 수량표 + 안내를 한 장의 흰 카드로 ───────── */
.pbox {
  margin-top: clamp(28px, 3.2vw, 44px);
  border: 1px solid rgba(125, 35, 43, .16);
  border-radius: 18px;
  background: #fff;
  overflow: hidden
}

.pbox .ptable {
  margin-top: 0;
  border: 0;
  border-radius: 0;
  background: none
}

/* 10환 ↔ 30환 구분선 제거 (정가 구간 / 절약 구간을 한 덩어리로) */
.ptable tbody tr:nth-child(3)>th,
.ptable tbody tr:nth-child(3)>td {
  border-top: 0
}

.pbox .binfo {
  margin-top: 0;
  padding: 0 clamp(18px, 2vw, 26px) clamp(20px, 2.2vw, 28px)
}

/* 카드 안에서는 아래쪽 테두리 없이 여백으로 마무리 */
.pbox .binfo__row:last-child,
.pbox .binfo__row:nth-child(n+3) {
  border-bottom: 0
}

/* 표와 안내 사이는 카드 폭을 가로지르는 한 줄로 */
.pbox .binfo {
  border-top: 1px solid rgba(125, 35, 43, .14);
  padding-top: clamp(4px, .6vw, 8px)
}

.pbox .binfo__row:first-child {
  border-top: 0
}

@media (min-width:1181px) {
  .pbox .binfo__row:nth-child(2) {
    border-top: 0
  }
}

/* ───────── 정기 구독 카드에 제품 컷 ───────── */
.sub {
  padding: 0;
  overflow: hidden
}

.sub__shot {
  border-radius: 0;
  flex: none
}

.sub__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(26px, 3vw, 38px)
}

/* ───────── 정기 구독 아이브로우를 뱃지로 ───────── */
.subs__badge {
  display: inline-block;
  margin-bottom: clamp(16px, 1.8vw, 22px);
  padding: clamp(9px, 1vw, 12px) clamp(16px, 1.8vw, 22px);
  border: 1px solid rgba(125, 35, 43, .28);
  border-radius: 999px;
  background: rgba(125, 35, 43, .06);
  font-size: clamp(14px, 1.25vw, 16.5px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.025em;
  color: var(--point);
  word-break: keep-all
}

/* ───────── 정기 구독 섹션 배경: 금박 용기 상자 ───────── */
.subs {
  position: relative;
  overflow: hidden
}

/* 사진 레이어 */
.subs::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("./subs-bg.webp") center / cover no-repeat;
  opacity: .22;
  pointer-events: none
}

/* 위아래를 종이색으로 흘려 앞뒤 섹션과 이어지게 */
.subs::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
      var(--paper) 0%,
      rgba(246, 240, 231, .32) 18%,
      rgba(246, 240, 231, .32) 82%,
      var(--paper) 100%)
}

.subs>* {
  position: relative;
  z-index: 1
}


/* ═══════════════════════════════════════════════════
   타이포 스케일 통일 (크기 · 굵기 · 자간)
   PC 1440 → 모바일 390 기준. 히어로(.copy__*)는 제외.
   ═══════════════════════════════════════════════════ */
:root {
  --fs-d2: clamp(30px, 3.4vw, 46px);
  /* 섹션 제목 */
  --fs-d3: clamp(27px, 2.8vw, 38px);
  /* 가격·수량 숫자 */
  --fs-d4: clamp(22px, 2.3vw, 30px);
  /* 문장형 강조 */
  --fs-h1: clamp(21px, 2vw, 27px);
  /* 큰 카드 제목 */
  --fs-h2: clamp(17.5px, 1.55vw, 21px);
  /* 카드 제목 */
  --fs-lede: clamp(17px, 1.55vw, 21px);
  /* 리드문 */
  --fs-b1: clamp(15.5px, 1.25vw, 17px);
  /* 본문 */
  --fs-b2: clamp(14.5px, 1.15vw, 15.5px);
  /* 보조 본문 */
  --fs-b3: clamp(13.5px, 1.05vw, 14px);
  /* 카드 설명·리스트 */
  --fs-cap: clamp(12.5px, .95vw, 13px);
  /* 캡션·주석 */
  --fs-label: 12px;
  /* 아이브로우·태그 */

  --ls-d: -.045em;
  --ls-h: -.035em;
  --ls-b: -.02em;
  --ls-c: -.015em;
}

/* ── D2 · 섹션 제목 ── */
.sec__title,
.quiz__title,
.lead__title,
.fin__title {
  font-size: var(--fs-d2);
  font-weight: 700;
  letter-spacing: var(--ls-d)
}

/* ── D3 · 숫자 강조 ── */
.pack__qty,
.sub__amt {
  font-size: var(--fs-d3);
  font-weight: 700;
  letter-spacing: var(--ls-d)
}

/* ── D4 · 문장형 강조 ── */
.bridge__hook,
.pillars__saying,
.mix__title {
  font-size: var(--fs-d4);
  font-weight: 700;
  letter-spacing: var(--ls-d)
}

/* ── H1 · 큰 카드 제목 ── */
.pillar__title,
.flow__title,
.prof__name,
.pack__amt {
  font-size: var(--fs-h1);
  font-weight: 700;
  letter-spacing: var(--ls-h)
}

/* ── H2 · 카드 제목 ── */
.card__title,
.line__title,
.life .line__title,
.doc__title,
.fq__q,
.sub__name,
.qstart__title {
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: var(--ls-h)
}

/* ── LEDE · 리드문 ── */
.sec__lede,
.sec__desc,
.mix__lede,
.lead__sub,
.fin__sub,
.quiz__desc,
.subs__close {
  font-size: var(--fs-lede);
  font-weight: 600;
  letter-spacing: var(--ls-h)
}

/* ── B1 · 본문 ── */
.mix__desc,
.lead__desc,
.pillar__desc,
.flow__desc,
.binfo__dd,
.sub__desc,
.fq__a,
.subs__badge {
  font-size: var(--fs-b1);
  letter-spacing: var(--ls-b)
}

.mix__desc,
.lead__desc,
.pillar__desc,
.flow__desc,
.binfo__dd,
.sub__desc,
.fq__a {
  font-weight: 400
}

.subs__badge {
  font-weight: 600
}

/* ── B2 · 보조 본문 · 버튼 ── */
.btn,
.fin__cta .btn,
.fin__cta .btn--yt,
.cta,
.quiz__cta,
.quiz__start,
.gnb a,
.foot__tel,
.foot__name,
.doc__desc,
.fin__desc,
.qitem__tx,
.pack__unit,
.ptable th,
.ptable td {
  font-size: var(--fs-b2);
  letter-spacing: var(--ls-b)
}

.btn,
.fin__cta .btn,
.fin__cta .btn--yt,
.cta,
.quiz__cta,
.quiz__start,
.foot__tel,
.foot__name {
  font-weight: 600
}

.gnb a,
.doc__desc,
.fin__desc,
.qitem__tx,
.pack__unit,
.ptable td {
  font-weight: 400
}

.ptable th,
.ptable tbody th,
.ptable__save {
  font-weight: 600
}

/* ── B3 · 카드 설명 · 리스트 ── */
.card__desc,
.pack__desc,
.line__tx,
.life .line__tx,
.sub__struct,
.prof__title,
.foot__list li,
.foot dt,
.foot dd {
  font-size: var(--fs-b3);
  font-weight: 400;
  letter-spacing: var(--ls-b)
}

/* ── CAP · 캡션 · 주석 ── */
.shot__cap,
.proof__cap,
.lobby__cap,
.foot__sub,
.foot__biz,
.foot__copy,
.note,
.quiz__note,
.pack__save,
.sub__save,
.gauge__label,
.gauge__count,
.flow__no,
.binfo__dt,
.ptable caption {
  font-size: var(--fs-cap);
  letter-spacing: var(--ls-c)
}

.shot__cap,
.proof__cap,
.lobby__cap,
.foot__sub,
.foot__biz,
.foot__copy,
.note,
.quiz__note,
.pack__save,
.sub__save,
.gauge__label,
.gauge__count {
  font-weight: 400
}

.flow__no,
.binfo__dt,
.ptable caption {
  font-weight: 600
}

/* ── LABEL · 아이브로우 · 태그 ── */
.sec__eyebrow,
.fin .sec__eyebrow,
.doc__tag,
.line__cat,
.life .line__cat,
.prof__role,
.pack__eyebrow,
.card__no,
.card--dark .card__no,
.qitem__no,
.qstart__badge,
.qstart__meta {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .06em
}

/* ── 스케일 보정: 인용구 · 잔여 항목 ── */
.quote {
  font-size: var(--fs-h1);
  font-weight: 600;
  letter-spacing: var(--ls-h)
}

.lead__quote {
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: var(--ls-h)
}

.bridge__sub {
  font-size: var(--fs-b1);
  font-weight: 400;
  letter-spacing: var(--ls-b)
}

.ptable thead th {
  font-size: var(--fs-cap);
  font-weight: 600;
  letter-spacing: var(--ls-c)
}

.foot__col a {
  font-size: var(--fs-b3);
  font-weight: 400;
  letter-spacing: var(--ls-b)
}

.foot__col b {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .06em
}

/* 단위 표기(원·환)는 본문 굵기에 맞춤 */
.pack__qty i,
.pack__amt i,
.sub__amt i,
.foot__name i {
  font-weight: 600
}

/* ── 스케일 보정 2 ── */
.foot__chan a {
  font-size: var(--fs-b3);
  font-weight: 400;
  letter-spacing: var(--ls-b)
}

.foot__col .foot__tel {
  font-size: var(--fs-b1);
  font-weight: 600;
  letter-spacing: var(--ls-b)
}

.sub__amt span,
.qf__no,
.qf__tag {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .06em
}

.foot .foot__sub,
.foot .foot__biz,
.foot .foot__copy {
  font-size: var(--fs-cap);
  font-weight: 400;
  letter-spacing: var(--ls-c)
}

/* ═════════ 네이버 방문자 리뷰 ═════════ */
.revs {
  padding-top: 0
}

/* 네이버 뱃지 */
.revs__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: clamp(16px, 1.8vw, 22px);
  padding: clamp(8px, .9vw, 11px) clamp(15px, 1.6vw, 19px);
  border: 1px solid rgba(3, 199, 90, .32);
  border-radius: 999px;
  background: rgba(3, 199, 90, .07);
  font-size: var(--fs-b2);
  font-weight: 600;
  letter-spacing: var(--ls-b);
  color: #0F7C41
}

.revs__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 5px;
  background: #03C75A;
  flex: none
}

.revs__n svg {
  width: 9px;
  height: 9px;
  fill: #fff
}

/* ── 캡처 모음 ── */
.revs__wrap {
  position: relative
}

.rv {
  border-radius: 14px;
  border: 1px solid rgba(31, 20, 18, .1);
  background: #fff;
  overflow: hidden;
  box-shadow: 0 12px 30px -24px rgba(31, 20, 18, .5)
}

.rv img {
  display: block;
  width: 100%;
  height: auto
}

.revs__hint {
  display: none
}

.revs__cta {
  display: flex;
  margin-top: clamp(28px, 3.2vw, 42px)
}

.btn--nv {
  gap: 10px;
  border-color: rgba(3, 199, 90, .45);
  color: #0F7C41
}

.btn--nv:hover {
  border-color: #03C75A;
  background: rgba(3, 199, 90, .07)
}

.revs__n--btn {
  width: 17px;
  height: 17px;
  border-radius: 4px
}

.revs__n--btn svg {
  width: 8px;
  height: 8px
}

/* PC: 3단 메이슨리 — 캡처 세로 길이가 달라도 잘리지 않게 */
@media (min-width:861px) {
  .revs__grid {
    columns: 3;
    column-gap: clamp(16px, 1.8vw, 24px)
  }

  .rv {
    break-inside: avoid;
    margin-bottom: clamp(16px, 1.8vw, 24px)
  }

  .revs__cta .btn {
    width: 100%;
    max-width: 360px
  }
}

/* 모바일: 옆으로 미는 캐러셀 */
@media (max-width:860px) {
  .revs__grid {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 calc(var(--edge) * -1);
    padding: 0 var(--edge) 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none
  }

  .revs__grid::-webkit-scrollbar {
    display: none
  }

  .rv {
    flex: 0 0 76%;
    scroll-snap-align: start
  }

  .revs__hint {
    display: block;
    margin-top: 12px;
    text-align: center;
    font-size: var(--fs-cap);
    letter-spacing: var(--ls-c);
    color: rgba(107, 75, 71, .6)
  }

  .revs__cta .btn {
    width: 100%
  }
}


/* ───────── 추천 뱃지 (사진 좌측 상단 · 펄스) ───────── */
.pack__rec {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  padding: 10px 18px 11px;
  border-radius: 999px;
  background: var(--point);
  box-shadow: 0 8px 20px -10px rgba(87, 20, 26, .8);
  font-size: var(--fs-b1);
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
  color: #fff
}

.pack__rec::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  animation: recPulse 2.2s cubic-bezier(.3, .7, .4, 1) infinite
}

@keyframes recPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(125, 35, 43, .55)
  }

  72% {
    box-shadow: 0 0 0 12px rgba(125, 35, 43, 0)
  }

  100% {
    box-shadow: 0 0 0 0 rgba(125, 35, 43, 0)
  }
}

@media (prefers-reduced-motion:reduce) {
  .pack__rec::after {
    animation: none
  }
}

@media (max-width:860px) {
  .pack__rec {
    top: 10px;
    left: 10px;
    padding: 8px 13px 9px
  }
}

/* ───────── 수량표: 1환 → 100환 순차 하이라이트 ───────── */
.ptable tbody tr {
  animation: rowGlow 15s ease-in-out infinite
}

.ptable tbody tr:nth-child(1) {
  animation-delay: 0s
}

.ptable tbody tr:nth-child(2) {
  animation-delay: 3s
}

.ptable tbody tr:nth-child(3) {
  animation-delay: 6s
}

.ptable tbody tr:nth-child(4) {
  animation-delay: 9s
}

.ptable tbody tr:nth-child(5) {
  animation-delay: 12s
}

@keyframes rowGlow {
  0% {
    background-color: rgba(125, 35, 43, 0)
  }

  7% {
    background-color: rgba(125, 35, 43, .085)
  }

  13% {
    background-color: rgba(125, 35, 43, .085)
  }

  20% {
    background-color: rgba(125, 35, 43, 0)
  }

  100% {
    background-color: rgba(125, 35, 43, 0)
  }
}

/* 표 안 추천 뱃지 */
.ptable__rec {
  display: inline-block;
  margin-left: 8px;
  padding: 4px 9px 5px;
  border-radius: 999px;
  background: var(--point);
  vertical-align: 1px;
  font-size: var(--fs-label);
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
  color: #fff
}

@media (prefers-reduced-motion:reduce) {
  .ptable tbody tr {
    animation: none
  }

  .ptable tbody tr:last-child {
    background-color: rgba(125, 35, 43, .05)
  }
}

/* ───────── 구매 안내: 좌측 라인 아이콘 ───────── */
.binfo__row {
  display: grid;
  grid-template-columns: 26px 1fr;
  column-gap: 14px;
  align-items: start
}

.binfo__row::before {
  content: '';
  grid-row: 1 / 3;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  background: var(--point);
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat
}

.binfo__dt,
.binfo__dd {
  grid-column: 2
}

.binfo__row:nth-child(1) { --ico: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.55'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M1.6%206.6h10.9v8.9H1.6z'/%3E%3Cpath%20d='M12.5%209.6h4.1l3%203v2.9h-7.1z'/%3E%3Ccircle%20cx='6'%20cy='17.6'%20r='2'/%3E%3Ccircle%20cx='16.6'%20cy='17.6'%20r='2'/%3E%3Cpath%20d='M8%2017.6h6.6'/%3E%3C/svg%3E") }
.binfo__row:nth-child(2) { --ico: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.55'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M10.6%203.2a1.4%201.4%200%200%201%202.8%200v6.1l7.2%204.1v2.2l-7.2-2.1v4.2l2.5%201.8v1.5L12%2019.9l-3.9%201.1v-1.5l2.5-1.8v-4.2l-7.2%202.1v-2.2l7.2-4.1z'/%3E%3C/svg%3E") }
.binfo__row:nth-child(3) { --ico: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.55'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3.4%209.6h17.2'/%3E%3Cpath%20d='M5.1%209.6c0%203.9%203%206.5%206.9%206.5s6.9-2.6%206.9-6.5'/%3E%3Cpath%20d='M12%2016.1v3.6'/%3E%3Cpath%20d='M8.3%2019.7h7.4'/%3E%3Cpath%20d='M16.4%202.9%2011.2%208.2'/%3E%3C/svg%3E") }
.binfo__row:nth-child(4) { --ico: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.55'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20.4%2012.4c0%203.9-3.8%207-8.4%207-1%200-2-.15-2.9-.42L4%2020.6l1.3-3.6C4%2015.7%203.2%2014.1%203.2%2012.4c0-3.9%203.8-7%208.4-7s8.8%203.1%208.8%207z'/%3E%3Cpath%20d='M8.6%2010.6h6.8'/%3E%3Cpath%20d='M8.6%2013.8h4.2'/%3E%3C/svg%3E") }

@media (max-width:600px) {
  .binfo__row {
    grid-template-columns: 22px 1fr;
    column-gap: 12px
  }

  .binfo__row::before {
    width: 22px;
    height: 22px
  }
}

/* Reduced motion: keep slides and the badge static instead of looping rapidly. */
@media (prefers-reduced-motion: reduce) {
  .xfade img,
  .xfade2 img,
  .shots3 li,
  .tired li,
  .badge__in {
    animation: none !important;
  }

  .xfade img:first-child,
  .xfade2 img:first-child,
  .shots3 li:first-child,
  .tired li:first-child {
    opacity: 1;
  }

  .badge__in {
    transform: none;
  }
}