body[data-header="solid"] main { padding-top: var(--header-h); }

body[data-header="solid"] main { min-height: 100svh; }

body[data-header="solid"] main:has(> .wrap > :is(.complete, .err):not([hidden])):not(:has(.steps)) {
  display: flex; flex-direction: column;
  padding-bottom: var(--header-h);
}
body[data-header="solid"] main:has(> .wrap > :is(.complete, .err):not([hidden])):not(:has(.steps)) > .wrap {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
}
body[data-header="solid"] main:not(:has(.steps)) > .wrap > :is(.complete, .err) { width: 100%; padding-block: var(--sp-8); }   
:target { scroll-margin-top: calc(var(--header-now, 93px) + 24px); }


.site-footer__slogan {
  margin-top: 18px;   
  font-family: "Linux Libertine", "Times New Roman", serif;
  font-style: italic;
  font-size: var(--fs-ui-15);
  color: var(--on-dark-dim);   
}



.page-hero {
  padding-block:var(--sp-10) var(--sp-8);
  text-align: center;
}
.page-hero .display { margin-bottom: 0; }
.page-hero__kr { margin-top: 16px; font-size: var(--fs-ui-14); font-weight: var(--fw-body); color: var(--ink-3); }


.measure     { max-width: 60ch; }
.measure--c  { max-width: 60ch; margin-inline: auto; }




.note {
  font-size: var(--fs-ui-14);
  font-weight: var(--fw-body);
  line-height: 1.85;
  color: var(--ink-3);
}
.note b { font-weight: var(--fw-strong); color: var(--ink-2); }   

.note__steps { margin: 0; padding: 0; list-style: none; }
.note__steps > li { padding-left: 1.3em; text-indent: -1.3em; }

.note--box {
  margin-top: 28px;
  padding: 18px 22px;
  background: var(--bg-note);
  font-size: var(--fs-ui-14);
  line-height: 1.8;
  color: var(--ink-2);
}




.wrap--pdp { max-width: calc(1280px + 2 * var(--gutter)); }
.pdp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 470px;   
  gap: var(--sp-8);
  align-items: start;
  padding-block: var(--sp-8) var(--sp-11);
}


.pdp__gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.pdp__thumbs { display: grid; grid-template-columns: repeat(6, minmax(0, 88px)); gap: 10px; }
.pdp__thumb {
  position: relative;
  padding: 0;
  border: 2px solid transparent;
  background: none;
  transition: border-color var(--dur-fast) var(--ease);
}
.pdp__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.pdp__thumb.is-active { border-color: var(--nanal-point); }

.pdp__stage { order: -1; position: relative; background: var(--ph-bg); touch-action: pan-y; }
.pdp__photo { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }

.pdp__photo--next { position: absolute; inset: 0; height: 100%; opacity: 0; transition: opacity .35s var(--ease); }
.pdp__photo--next.is-in { opacity: 1; }
.pdp__photo.is-contain { object-fit: contain; padding: var(--sp-5); }

.pdp__dots { display: none; }


.pdp__buy { position: sticky; top: calc(var(--header-now, var(--header-h)) + 24px); }
.pdp__badge {
  display: inline-block; margin-bottom: var(--sp-3); padding: 6px 10px;
  background: var(--nanal-point-mist);
  font-size: var(--fs-ui-12); font-weight: var(--fw-strong); color: var(--nanal-point);
}
.pdp__name {
  font-family: var(--font-kr);
  font-size: var(--fs-title);
  font-weight: var(--fw-title); line-height: 1.3; letter-spacing: 0;
}

.pdp__enname {
  margin-top: 6px;
  font-family: var(--font-latin);
  font-size: var(--fs-ui-16); font-weight: var(--fw-body);
  color: var(--ink-3);
}
.pdp__rating {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--sp-3);
  font-size: var(--fs-ui-14); color: var(--ink-2);
}
.pdp__rating .stars { --star: 14px; }
.pdp__rating b { font-weight: var(--fw-strong); color: var(--ink); }
.pdp__rating span:last-child { color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; }


.pdp__price {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px;
  margin-top: var(--sp-5); padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-ui-28); font-weight: var(--fw-strong);
}
.pdp__price em { font-style: normal; color: var(--nanal-point); }
.pdp__price strong { font-weight: inherit; }
.pdp__price s { font-size: var(--fs-ui-18); font-weight: var(--fw-body); color: var(--ink-placeholder); }


.pdp__info { margin: 0; padding-block: var(--sp-4); font-size: var(--fs-ui-14); font-weight: var(--fw-body); }
.pdp__info div { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.pdp__info div + div { margin-top: 6px; }
.pdp__info dt { color: var(--ink-3); }
.pdp__info dd { margin: 0; color: var(--ink); text-align: right; }
.pdp__info dd span { color: var(--ink-3); }

.pdp__opt {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.pdp__total { display: flex; align-items: baseline; gap: 10px; font-size: var(--fs-ui-15); font-weight: var(--fw-ui); color: var(--ink-2); }
.pdp__total strong { font-size: var(--fs-ui-24); font-weight: var(--fw-strong); color: var(--ink); }
.pdp__count { margin-left: -6px; font-size: var(--fs-ui-14); font-weight: var(--fw-body); }   

.pdp__earn { margin-top: 4px; text-align: right; font-size: var(--fs-ui-13); font-weight: var(--fw-body); color: var(--nanal-point); }
.pdp__earn b { font-weight: var(--fw-strong); }

@media (max-width: 480px) {
  .pdp__total { flex-wrap: wrap; justify-content: flex-end; row-gap: 0; }
  .pdp__total > span:first-child { flex-basis: 100%; text-align: right; font-size: var(--fs-ui-13); }
}

.pdp__actions { margin-top: var(--sp-5); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn--full { width: 100%; min-width: 0; }

.pdp .pdp__acc { max-width: none; margin-top: var(--sp-5); }   

.pdp__buy > .pdp__acc { margin-top: 0; }
.pdp__buy > .pdp__acc:not([hidden]) + .pdp__opt { border-top: 0; }   

.pdp__buy > .pdp__acc > .acc__item > .acc__q { padding: 12px 0; font-size: var(--fs-ui-14); font-weight: var(--fw-body); color: var(--ink-3); }
.pdp__buy > .pdp__acc > .acc__item > .acc__q::after { flex-basis: 16px; height: 16px; background: var(--ink-3); }
.pdp__acc > .acc__item > .acc__q { padding: 16px 0; font-size: var(--fs-ui-16); font-weight: var(--fw-ui); }
.pdp__acc > .acc__item > .acc__q::after {
  content: "";
  flex: 0 0 20px; height: 20px;
  background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pdp__acc > .acc__item > .acc__a { padding-bottom: var(--sp-4); font-size: var(--fs-ui-14); font-weight: var(--fw-body); line-height: 1.7; }

.pdp-ing { margin: 0; }
.pdp-ing div + div { margin-top: var(--sp-4); }
.pdp-ing dt { color: var(--ink); font-weight: var(--fw-strong); }
.pdp-ing dt span { margin-left: 4px; color: var(--ink-3); font-weight: var(--fw-body); }
.pdp-ing dd { margin: 2px 0 0; color: var(--ink-2); }
.pdp-ing__note { margin-top: var(--sp-4); font-size: var(--fs-ui-12); color: var(--ink-3); }


@media (min-width: 861px) and (max-width: 1100px) {
  .pdp { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--sp-6); }
}

@media (max-width: 860px) {
  .pdp { padding-top: 0; gap: var(--sp-6); }
  .pdp__gallery { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-inline: calc(var(--gutter) * -1); }
  .pdp__stage { order: -1; }
  .pdp__thumbs { display: none; }
  .pdp__dots {
    position: absolute; left: 0; right: 0; bottom: var(--sp-4); z-index: 2;
    display: flex; justify-content: center; gap: 8px;
  }
  .pdp__dots i { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 20%, transparent); transition: background var(--dur-fast) var(--ease); }
  .pdp__dots i.is-active { background: var(--ink); }
  .pdp__price { font-size: var(--fs-ui-24); }
  .pdp__total strong { font-size: var(--fs-ui-20); }
}



.pdp-detail { padding-block: var(--sp-9); }
.pdp-detail__img { max-width: 760px; margin-inline: auto; }   
.pdp-detail__img img,
.pdp-detail__img video { display: block; width: 100%; height: auto; }   

.pdp-detail .pdp-detail__info { max-width: none; margin-top: var(--sp-9); }
.pdp-detail__info .acc__a { color: var(--ink-2); }

.pdp-detail__info > .acc__item:has(> .acc__q[aria-controls="spec"][aria-expanded="true"]) { border-bottom: 0; }

@media (min-width: 761px) { .pdp-detail__info .spec th { width: 240px; } }
.pdp-detail__more { margin-top: var(--sp-4); }

.pdp-sec { padding-block:var(--sp-11); border-top: var(--hair); }
.pdp-sec__head { text-align: center; margin-bottom: var(--sp-8); }
.pdp-sec__head .display { margin-bottom: 18px; }


.texture { background: var(--dark); color: var(--on-dark); --nanal-point: var(--lav-300); border-top: 0; }
.texture .pdp-sec__head p { color: var(--on-dark-dim); }
.texture__words {
  margin-top:var(--sp-8);
  display: flex; flex-wrap: wrap; justify-content: center;
  gap:var(--sp-8);
  font-family: var(--font-kr);
  font-size:var(--fs-ui-24);
  font-weight: var(--fw-body); letter-spacing: .18em; text-transform: uppercase;
  color: var(--lav-300);
}


.ing__name {
  font-family: var(--font-kr);
  font-size: var(--fs-ui-24);
  font-weight: var(--fw-body); letter-spacing: .1em; text-transform: uppercase;
}


.howto { display: grid; grid-template-columns: repeat(3, 1fr); gap:var(--sp-8); counter-reset: step; }
.howto__step { text-align: center; }
.howto__num {
  font-family: var(--font-kr);
  font-size: var(--fs-ui-13); letter-spacing: .2em; color: var(--nanal-point);
  display: block; margin-bottom: 20px;
}
.howto__en { font-family: var(--font-kr); font-size: var(--fs-ui-16); font-weight: var(--fw-body); line-height: 1.5; }
.howto__kr { margin-top: 14px; font-size: var(--fs-ui-14); font-weight: var(--fw-body); color: var(--ink-2); line-height: 1.95; }


.routine {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap:var(--sp-7);
  margin-top: var(--sp-7);
}
.routine__item {
  font-family: var(--font-kr);
  font-size: var(--fs-ui-16);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
}
.routine__item--key {
  color: var(--ink);
  padding: 14px 26px;
  border: 1px solid var(--nanal-point);
}
.routine__sep { color: var(--nanal-point); }


.acc { max-width: var(--w-text); margin-inline: auto; border-top: var(--hair); }

.acc[data-filtered] .order-row__type { display: none; }
.acc__item { border-bottom: var(--hair); }
.acc__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-block: 22px;
  text-align: left;
  font-size: var(--fs-ui-15); font-weight: var(--fw-ui);
}

.acc__q::after {
  content: "";
  flex: none; width: 20px; height: 20px;
  color: var(--nanal-point);
  background: currentColor;   
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--dur) var(--ease);
}
.acc__q[aria-expanded="true"]::after { transform: rotate(45deg); }
.acc__a { padding-bottom: 26px; font-size: var(--fs-ui-14); font-weight: var(--fw-body); color: var(--ink-2); line-height: 2.05; }
.acc__a p + p { margin-top: .9em; }


.spec { width: 100%; border-collapse: collapse; border-top: var(--hair); font-size: var(--fs-ui-13); font-weight: var(--fw-body); }   
.spec th, .spec td { padding: 13px 16px; border-bottom: var(--hair); text-align: left; vertical-align: top; }
.spec th { width: 34%; font-weight: var(--fw-ui); color: var(--ink-3); background: var(--paper-2); }
.spec td { color: var(--ink-2); }

.spec td { overflow-wrap: anywhere; }
@media (max-width: 560px) { .spec th, .spec td { padding: 12px 10px; } .spec th { width: 96px; } }





.dayscroll { position: relative; height: 400vh; margin-top: var(--sp-9); }
.dayscroll__stage {
  position: sticky; top: 0;
  isolation: isolate;        
  height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--sp-6);
  overflow: hidden;
}


.dayscroll__glow {
  position: absolute; z-index: 0;   
  left: 50%; top: 50%;
  width: min(1200px, 120vw); aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(calc(.5 + var(--p, 0) * .7));
  background: radial-gradient(circle,
    rgba(var(--rgb-lilac), calc(.30 + var(--p, 0) * .34)) 0%,
    rgba(var(--rgb-lilac), 0) 62%);
  pointer-events: none;
}


.dayscroll__words {
  position: relative; z-index: 1;
  margin: 0;
  width: 100%;
  min-height: 1.1em;
  display: grid;
  place-items: center;
  font-family: var(--font-kr);
  
  font-size: clamp(24px, 4.4vw, 62px);
  font-weight: var(--fw-body);
  line-height: 1.04;
  letter-spacing: .06em;
}
.dayscroll.is-on .dayword {
  position: absolute;
  white-space: nowrap;
  opacity: 0;
  will-change: opacity, transform, filter;
}

.dayscroll.is-on .dayword,
.dayscroll.is-on .dayscroll__kr {
  transform: translateY(34px) scale(.9);
  filter: blur(9px);
  transition: opacity var(--dur-move) var(--ease), transform .8s var(--ease), filter .8s var(--ease);
}
.dayscroll.is-on .dayword.is-shown,
.dayscroll.is-on .dayscroll__kr.is-shown { opacity: 1; transform: none; filter: none; }
.dayscroll.is-on .dayword.is-past { opacity: 0; transform: translateY(-24px) scale(1.16); filter: blur(12px); }

.dayword { display: block; text-align: center; }

.dayscroll__kr {
  position: relative; z-index: 1;
  margin: 0;
  max-width: 34ch;
  text-align: center;
  font-size: var(--fs-ui-18);
  font-weight: var(--fw-body);
  line-height: 2;
  color: var(--ink-2);
}
.dayscroll.is-on .dayscroll__kr { opacity: 0; }


.dayring {
  position: relative; z-index: 1;
  width: min(520px, 62vh, 84vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.dayring__svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  transform: rotate(-90deg);          
  overflow: visible;
}
.dayring__track,
.dayring__fill {
  fill: none;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.dayring__track { stroke: var(--line); }
.dayring__fill {
  stroke: var(--nanal-point);
  stroke-linecap: round;
  stroke-dasharray: 100;              
  stroke-dashoffset: calc(100 - var(--p, 0) * 100);
}

.dayscroll:not(.is-on) .dayring__svg { display: none; }

@media (max-width: 560px) {
  
  .dayscroll { height: 340vh; }
}

@media (prefers-reduced-motion: reduce) {
  
  .dayscroll { height: auto; }
  .dayscroll__stage { position: static; height: auto; padding-block: var(--sp-9); }
  .dayscroll__glow, .dayring__svg { display: none; }
  .dayring { width: auto; aspect-ratio: auto; }
  .dayscroll.is-on .dayword,
  .dayscroll.is-on .dayscroll__kr { position: static; opacity: 1 !important;
    transform: none !important; filter: none !important; }
  .dayscroll__words { display: grid; gap: 10px; }
}



@media (max-width: 860px) {
  .pdp { grid-template-columns: 1fr; }
  .pdp__buy { position: static; }
}

@media (max-width: 768px) {
  .howto { grid-template-columns: 1fr; }

  
  .routine { flex-direction: column; }
  .routine__sep { transform: rotate(90deg); display: inline-block; }

  
  .texture__words { gap: 18px; }
}




.tbd {
  border-bottom: 1px dotted var(--nanal-point);
  color: var(--nanal-point);
}
.tbd::after { content: " *"; }





.doc { display: grid; grid-template-columns: 180px 1fr; grid-template-areas: ". title" "nav main"; grid-template-rows: auto 1fr;
       gap: 0 var(--sp-9); align-items: start;
       padding-block: var(--sp-9) var(--sp-12); }
.doc > .doc__nav { grid-area: nav; margin-top: calc(28px + 14px - 38px); }   

.doc:has(> .doc__body > p:first-child) > .doc__nav { margin-top: -38px; }
.doc > .doc__body { grid-area: main; }
.doc__title {
  grid-area: title;
  margin-bottom: var(--sp-7);
  font-size: var(--fs-ui-28); font-weight: var(--fw-title); line-height: 1.3; color: var(--ink);
}


.doc--plain { display: block; padding-block: 0 var(--sp-9); }

.doc__nav { position: sticky; top: calc(var(--header-now, 93px) + 40px); }

.doc__nav-title {
  padding: 14px 0 6px; line-height: 18px;
  font-size: var(--fs-ui-12); font-weight: var(--fw-strong); color: transparent;
  border-bottom: 1px solid var(--ink);
  transition: color var(--dur-fast) var(--ease);
}

.doc__nav-title.is-shown { color: var(--ink-3); }
.doc__nav a { display: block; padding-block: 15px; border-bottom: var(--hair);
              font-size: var(--fs-ui-15); font-weight: var(--fw-ui); color: var(--ink-2); transition: color var(--dur-fast) var(--ease); }
.doc__nav a:hover { color: var(--ink); }

.doc__nav a.is-active { color: var(--ink); font-weight: var(--fw-strong); }

.doc__body { max-width: var(--w-text); }

.doc__body h2 {
  font-size: var(--fs-ui-20); font-weight: var(--fw-strong); letter-spacing: -.01em; text-transform: none; line-height: 28px;
  padding-bottom: 14px; border-bottom: var(--rule-title); margin-bottom: 20px;
}
.doc__body section + section { margin-top: var(--sp-9); }

.doc__body > p + section { margin-top: var(--sp-7); }

.doc__body * + h2 { margin-top: var(--sp-7); }
.doc__body h3 { font-size: var(--fs-ui-16); font-weight: var(--fw-strong); margin-top: 30px; margin-bottom: 12px; }

.doc__body p, .doc__body li { font-size: var(--fs-ui-15); font-weight: var(--fw-body); color: var(--ink-2); line-height: 1.8; }
.doc__body p + p,
.doc__body ul + p, .doc__body ol + p { margin-top: 1em; }   
.doc__body ol, .doc__body ul { margin-top: 10px; display: grid; gap: 7px; }
.doc__body ol { counter-reset: n; }
.doc__body ol > li { counter-increment: n; padding-left: 24px; position: relative; }
.doc__body ol > li::before { content: counter(n) "."; position: absolute; left: 0; color: var(--ink-3); }
.doc__body ul > li,
.bullets > li { padding-left: 16px; position: relative; }
.doc__body ul > li::before,
.bullets > li::before { content: "·"; position: absolute; left: 4px; color: var(--ink-3); }   
.bullets { display: grid; gap: 10px; font-size: var(--fs-ui-15); font-weight: var(--fw-body); color: var(--ink-2); line-height: 1.7; }
.doc__body table { width: 100%; border-collapse: collapse; margin-top: 16px; border-top: var(--hair); font-size: var(--fs-ui-14); font-weight: var(--fw-body); }   
.doc__body th, .doc__body td { padding: 12px 14px; border-bottom: var(--hair); text-align: left; vertical-align: top; }
.doc__body th { background: var(--paper-2); font-weight: var(--fw-ui); color: var(--ink-3); width: 30%; }

.doc__body thead th { width: auto; }
.doc__body .t-fit-last :is(th, td):last-child { width: 1%; white-space: nowrap; }   

.doc__body h2:has(+ table) { margin-bottom: 0; }
.doc__body h2 + table { margin-top: 0; border-top: 0; }
.doc__body table + p { margin-top: 20px; }   


.complete { max-width: 560px; margin-inline: auto; padding-block:var(--sp-11) var(--sp-12); text-align: center; }

.steps + .complete { padding-top: 0; }
.complete--form { max-width: var(--w-form); }   
.complete .lead { text-wrap: pretty; }   
.complete__no {
  margin-top: 28px; padding: 16px; background: var(--paper-2);
  font-size: var(--fs-ui-13); font-weight: var(--fw-body); color: var(--ink-2);
}
.complete__no b { font-weight: var(--fw-strong); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: 0; }   
.complete__recap { margin-top: var(--sp-7); border-top: var(--rule-title); text-align: left; }

.detail-sec__title + .complete__recap,
.detail-sec__title + .notice-list { margin-top: 0; border-top: 0; }   
.complete__recap div { display: flex; justify-content: space-between; gap: 20px; padding-block: 14px; border-bottom: var(--hair); font-size: var(--fs-ui-14); font-weight: var(--fw-ui); }   
.complete__recap div:last-child { border-bottom: 0; }   
.complete__recap dt { color: var(--ink-3); }
.complete__recap dd { margin: 0; color: var(--ink); text-align: right; }
.complete__actions { margin-top:var(--sp-7); display: grid; gap: 10px; }


@media (max-width: 560px) {
  .doc__body table:not(:has(thead)),
  .doc__body table:not(:has(thead)) tbody,
  .doc__body table:not(:has(thead)) tr { display: block; width: 100%; }
  .doc__body table:not(:has(thead)) th,
  .doc__body table:not(:has(thead)) td { display: block; width: auto; border-bottom: 0; padding: 0; }
  .doc__body table:not(:has(thead)) th {
    background: transparent; padding-top: 16px; padding-bottom: 4px;
    font-size: var(--fs-ui-13); font-weight: var(--fw-strong); color: var(--ink-3);
  }
  .doc__body table:not(:has(thead)) td { padding-bottom: 16px; border-bottom: var(--hair); }

  
  .doc__body table:has(thead) th,
  .doc__body table:has(thead) td { padding: 10px 8px; font-size: var(--fs-ui-13); }
  

  .complete__recap div { flex-direction: column; gap: 4px; }
  .complete__recap dd { text-align: left; }

}

@media (max-width: 1024px) {
  
  
  .doc { grid-template-columns: 1fr; grid-template-areas: "nav" "title" "main"; grid-template-rows: auto; padding-top: calc(84px - var(--header-h)); }
  .doc > .doc__nav,
  .doc:has(> .doc__body > p:first-child) > .doc__nav { margin-top: 0; }   
  .doc__title { margin: var(--sp-6) 0 var(--sp-5); font-size: var(--fs-ui-24); }
  .doc__body { max-width: none; }   
  
  .doc__nav {
    position: sticky; top: var(--header-now, 84px); z-index: 20;
    display: flex; flex-wrap: nowrap; gap: 0 var(--sp-5);
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    background: var(--paper);
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);   
    border-top: 0; border-bottom: var(--hair);
  }
  .doc__nav::-webkit-scrollbar { display: none; }
  
  .doc__nav::before,
  .doc__nav::after {
    content: ""; position: sticky; flex: none; width: 48px; z-index: 1;
    pointer-events: none; opacity: 0; transition: opacity var(--dur-fast) var(--ease);
  }
  .doc__nav::before { order: -1; left: calc(var(--gutter) * -1); margin-right: calc(-48px - var(--sp-5)); background: linear-gradient(270deg, transparent, var(--paper)); }
  .doc__nav::after  { right: calc(var(--gutter) * -1); margin-left: calc(-48px - var(--sp-5)); background: linear-gradient(90deg, transparent, var(--paper)); }
  .doc__nav:is([data-more="start"], [data-more="both"])::before,
  .doc__nav:is([data-more="end"], [data-more="both"])::after { opacity: 1; }
  .doc__nav-title { display: none; }
  
  .doc__nav a {
    border-bottom: 0; white-space: nowrap;
    padding-block: 14px;
  }
  .doc__nav a:hover { color: var(--ink); }
  .doc__nav a.is-active {
    color: var(--ink); font-weight: var(--fw-strong);
    box-shadow: inset 0 -2px 0 var(--ink);
  }
  
  :target { scroll-margin-top: calc(var(--header-now, 84px) + 72px); }
}





.u-sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}



.ba { max-width: var(--w); margin-inline: auto; }

.ba__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  --pos: 50%;
  cursor: ew-resize;
  user-select: none;
}
.ba__layer { position: absolute; inset: 0; }
.ba__layer .ph { height: 100%; }

.ba__layer--before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }

.ba__divider {
  position: absolute; top: 0; bottom: 0;
  left: var(--pos);
  width: 1px;
  background: var(--on-image);
  pointer-events: none;
}
.ba__knob {
  position: absolute; top: 50%; left: var(--pos);
  transform: translate(-50%, -50%);
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  display: grid; place-items: center;
  font-family: var(--font-kr);
  font-size: var(--fs-ui-13);
  letter-spacing: .1em;
  pointer-events: none;
}


.ba__range {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  opacity: 0;
  cursor: ew-resize;
  appearance: none;
  background: none;
}
.ba__range:focus-visible ~ .ba__knob { outline: 2px solid var(--nanal-point); outline-offset: 3px; }

.ba__labels {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.ba__label {
  padding: 11px 18px;
  font-size: var(--fs-ui-12);
  font-weight: var(--fw-strong);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.ba__label--before { background: var(--paper-2); color: var(--ink-3); }
.ba__label--after  { background: var(--nanal-point); color: var(--paper); text-align: right; }


.ba__note {
  margin-top: var(--sp-3);
  text-align: right;
  font-size: var(--fs-ui-12);
  font-weight: var(--fw-body);
  line-height: 1.9;
  color: var(--ink-3);
}

@media (max-width: 768px) {
  .ba__frame { aspect-ratio: 4 / 5; }
  .ba__note { text-align: left; }
}



.sci { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-9); align-items: center; }
.sci__media .ph { aspect-ratio: 1 / 1; }

.sci__body h3 {
  font-family: var(--font-kr);
  font-size: var(--fs-title);
  font-weight: var(--fw-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: var(--sp-5);
}
.sci__body p {
  font-size: var(--fs-ui-16);
  font-weight: var(--fw-body);
  color: var(--ink-2);
  line-height: 2;
}
.sci__body p + p { margin-top: 1em; }
.sci__term {
  display: inline-block;
  padding: 3px 9px;
  background: var(--nanal-point-mist);
  color: var(--nanal-point);
  font-size: var(--fs-ui-13);
  letter-spacing: .04em;
}


.sci__ref {
  max-width: var(--w-text);
  margin: var(--sp-9) auto 0;
  padding-top: var(--sp-5);
  border-top: var(--hair);
  font-size: var(--fs-ui-12);
  font-weight: var(--fw-body);
  line-height: 2;
  color: var(--ink-3);
}
.sci__ref cite { font-style: italic; }

@media (max-width: 860px) { .sci { grid-template-columns: 1fr; gap: var(--sp-7); } }



.vs { max-width: var(--w-text); margin-inline: auto; }
.vs__head, .vs__row {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: var(--sp-4);
  align-items: start;
}
.vs__head {
  padding-bottom: var(--sp-4);
  border-bottom: var(--hair-strong);
}
.vs__head span {
  font-family: var(--font-kr);
  font-size: var(--fs-ui-13);
  font-weight: var(--fw-strong);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.vs__head .is-key { color: var(--nanal-point); }

.vs__row { padding-block: var(--sp-5); border-bottom: var(--hair); }
.vs__label {
  font-size: var(--fs-ui-13);
  font-weight: var(--fw-ui);
  color: var(--ink-3);
}
.vs__row p {
  margin: 0;
  font-size: var(--fs-ui-14);
  font-weight: var(--fw-body);
  color: var(--ink-2);
  line-height: 1.85;
}
.vs__row p.is-key { color: var(--ink); font-weight: var(--fw-ui); }

@media (max-width: 560px) {
  .vs__head { display: none; }
  .vs__row  { grid-template-columns: 1fr; gap: var(--sp-2); }
  .vs__row p::before {
    content: attr(data-src);
    display: block;
    font-size: var(--fs-ui-12);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 4px;
  }
}



.worry { max-width: var(--w-text); margin-inline: auto; }
.worry__list { border-top: var(--hair-strong); }
.worry__list li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--sp-4);
  align-items: baseline;
  padding-block: var(--sp-5);
  border-bottom: var(--hair);
  font-size: var(--fs-ui-18);
  font-weight: var(--fw-body);
  color: var(--ink);
}
.worry__mark {
  width: 13px; height: 13px;
  border: 1px solid var(--nanal-point);
  display: block;
}
.worry__answer {
  margin-top: var(--sp-9);
  text-align: center;
}
.worry__answer p {
  font-size: var(--fs-ui-18);
  font-weight: var(--fw-body);
  color: var(--ink-2);
  line-height: 2;
}
.worry__answer strong { font-weight: var(--fw-ui); color: var(--ink); }



.chapter-blocks { max-width: var(--w-text); margin-inline: auto; }

.ing-block {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: var(--sp-7);
  padding-block: var(--sp-9);
  border-top: var(--hair);
}
.ing-block:first-child { border-top: var(--hair-strong); }

.ing-block__label {
  font-family: var(--font-kr);
  font-size: var(--fs-ui-12);
  font-weight: var(--fw-strong);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--nanal-point);
  padding-top: 6px;
}
.ing-block__title {
  font-family: var(--font-kr);
  font-size: var(--fs-title);
  font-weight: var(--fw-body);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ing-block__lead {
  margin-top: var(--sp-2);
  font-family: var(--font-kr);
  font-size: var(--fs-ui-18);
  font-weight: var(--fw-body);
  color: var(--ink-3);
}
.ing-block__text {
  margin-top: var(--sp-5);
  font-size: var(--fs-ui-16);
  font-weight: var(--fw-body);
  color: var(--ink-2);
  line-height: 2;
}
.ing-block .vs,
.ing-block .sci__ref { margin-top: var(--sp-6); max-width: none; }
.ing-block .sci {
  margin-top: var(--sp-6);
  gap: var(--sp-6);
  grid-template-columns: 200px 1fr;   
  align-items: start;
}
@media (max-width: 560px) { .ing-block .sci { grid-template-columns: 1fr; } }

@media (max-width: 768px) {
  .ing-block { grid-template-columns: 1fr; gap: var(--sp-4); }
  .ing-block__label { padding-top: 0; }
}





.pdp-rv { border-top: 0; }   

.pdp-rv__title {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: var(--sp-5); font-size: var(--fs-ui-24); font-weight: var(--fw-strong);
}

.stars {
  --star: 16px;
  display: inline-block; flex: none; vertical-align: -2px;
  width: calc(var(--star) * 5); height: var(--star);
  background: linear-gradient(to right, var(--nanal-point) calc(var(--score, 5) * 20%), var(--line) 0);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E") left center / var(--star) var(--star) repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E") left center / var(--star) var(--star) repeat-x;
}
.stars--l { --star: 22px; }
.stars--one { --star: 14px; width: var(--star); background: var(--nanal-point); }   


.rv-summary {
  padding: var(--sp-7) var(--sp-8);
  background: var(--paper-2);
}

.rv-summary__stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center; }

.rv-summary__score { display: grid; justify-items: center; gap: 12px; }
.rv-summary__score .stars { --star: 30px; }
.rv-summary__num {
  font-size: 48px; font-weight: var(--fw-strong);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.rv-summary__count { margin-top: 2px; font-size: var(--fs-ui-16); font-weight: var(--fw-body); color: var(--ink-2); }
.rv-summary__count b { font-weight: var(--fw-strong); color: var(--ink); }

.rv-summary__bars { display: grid; gap: 12px; margin: 0; }
.rv-summary__bars > div {
  display: grid; grid-template-columns: 40px 1fr 32px; gap: 14px; align-items: center;
}
.rv-summary__bars dt { font-size: var(--fs-ui-15); font-weight: var(--fw-body); color: var(--ink-2); }
.rv-summary__bars dd { margin: 0; }
.rv-summary__bars dd:nth-of-type(1) { height: 6px; background: var(--line); }   
.rv-summary__bars i {
  display: block; height: 100%; background: var(--nanal-point);
  transform: scaleX(var(--r, 0)); transform-origin: left center;
}
.rv-summary__n { font-size: var(--fs-ui-15); color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }


.rv-ai { margin-top: var(--sp-7); padding-top: var(--sp-7); border-top: var(--hair); }
.rv-ai__head { position: relative; display: flex; align-items: center; gap: 4px; }
.rv-ai__label { font-size: var(--fs-ui-14); font-weight: var(--fw-ui); color: var(--ink-3); }
.rv-ai__info { display: flex; }
.rv-ai__i {
  display: grid; place-items: center; width: 28px; height: 28px; margin: -6px 0; padding: 0;
  color: var(--ink-3); transition: color var(--dur-fast) var(--ease);
}
.rv-ai__i:hover, .rv-ai__i[aria-expanded="true"] { color: var(--ink); }
.rv-ai__i .icon { width: 16px; height: 16px; }

.rv-ai__tip {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 5;
  width: max-content; max-width: min(320px, 100%);
  padding: 12px 14px; background: var(--ink); color: var(--paper);
  font-size: var(--fs-ui-13); font-weight: var(--fw-body); line-height: 1.6;
}
.rv-ai__tip::before {
  content: ""; position: absolute; top: -5px; left: calc(var(--tip-x, 90px) - 5px);
  width: 10px; height: 10px; background: inherit; transform: rotate(45deg);
}

.rv-ai__title { margin-top: 12px; font-size: var(--fs-ui-24); font-weight: var(--fw-strong); line-height: 1.4; color: var(--ink); text-wrap: balance; }
.rv-ai__text { margin-top: 10px; font-size: var(--fs-ui-16); font-weight: var(--fw-body); line-height: 1.75; color: var(--ink-2); }
.rv-ai__tags { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rv-ai__tags li { padding: 7px 13px; border: var(--hair); font-size: var(--fs-ui-14); font-weight: var(--fw-body); color: var(--ink-2); }   


.pdp-rv__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  margin: var(--sp-8) 0 var(--sp-4);
}
.pdp-rv__head--list { scroll-margin-top: calc(var(--header-now, var(--header-h)) + 60px); }   
.pdp-rv__sub { font-size: var(--fs-ui-18); font-weight: var(--fw-strong); }
.pdp-rv__notice { margin: var(--sp-7) 0 0; text-align: center; font-size: var(--fs-ui-14); color: var(--ink-3); }   

.pdp-rv__head .check { align-items: center; }
.pdp-rv__head .check input[type="checkbox"] { margin-top: 0; }


.rv-photos__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.rv-photos__item {
  position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden;
  padding: 0; border: 0; background: var(--paper-2); cursor: pointer;
}
.rv-photos__item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur) var(--ease); }
.rv-photos__item:hover img { transform: scale(1.04); }
.rv-photos__item:focus-visible { outline: 1px solid var(--nanal-point); outline-offset: 2px; }
.rv-photos__more {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: 2px;
  background: color-mix(in srgb, var(--ink) 62%, transparent);
  color: var(--paper); font-size: var(--fs-ui-14); font-weight: var(--fw-ui);
}
.rv-photos__more b { font-size: var(--fs-ui-24); font-weight: var(--fw-strong); line-height: 1.2; }

.rv-photos__all { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rv-photos__all img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--paper-2); }


.rv__photo { display: block; padding: 0; border: 0; background: none; cursor: pointer; }
.rv__photo:focus-visible { outline: 1px solid var(--nanal-point); outline-offset: 2px; }


.modal .modal__box--rv { max-width: 960px; }   
.modal__box--rv .rv-view { overflow: auto; }
.rv-view { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.rv-view__media { position: relative; display: grid; align-content: center; background: var(--paper-2); }
.rv-view__img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }

@media (min-width: 761px) {
  .rv-view__img { width: auto; max-width: 100%; max-height: calc(84vh - 104px); margin-inline: auto; }
}
.rv-view__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; display: grid; place-items: center;
  padding: 0; border: 0; background: rgba(255, 255, 255, .86); color: var(--ink); cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.rv-view__nav:hover { background: var(--paper); }
.rv-view__nav .icon { width: 22px; height: 22px; }
.rv-view__nav--prev { left: 12px; }
.rv-view__nav--next { right: 12px; }
.rv-view__count {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  padding: 4px 10px; background: rgba(var(--rgb-ink), .6); color: var(--paper);
  font-size: var(--fs-ui-12); font-variant-numeric: tabular-nums;
}
.rv-view__count b { font-weight: var(--fw-strong); }
.rv-view__info { padding: var(--sp-5) var(--sp-6); display: flex; flex-direction: column; align-items: flex-start; }
.rv-view__info .rv__who span + span { margin-left: 8px; }
.rv-view__info .rv__who span:first-child { margin-left: 0; font-size: inherit; font-weight: inherit; color: inherit; }
.rv-view__thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-4); }
.rv-view__thumbs:empty { display: none; }
.rv-view__thumbs button { width: 56px; padding: 0; border: 2px solid transparent; background: none; cursor: pointer; }
.rv-view__thumbs button.is-active { border-color: var(--nanal-point); }
.rv-view__thumbs img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.rv-view__body { margin-top: var(--sp-4); font-size: var(--fs-ui-15); font-weight: var(--fw-body); line-height: 1.7; color: var(--ink); }
.rv-view__all { margin-top: auto; padding: var(--sp-5) 0 0; font-size: var(--fs-ui-14); background: none; border: 0; cursor: pointer; }
@media (max-width: 760px) {
  .rv-view { grid-template-columns: minmax(0, 1fr); }
  .rv-view__info { padding: var(--sp-5); }
  .rv-view__nav { width: 36px; height: 36px; }
}

.rv-list { list-style: none; margin: 0; padding: 0; border-top: var(--hair); }
.rv { padding: var(--sp-6) 0; border-bottom: var(--hair); }

.rv .link-plain + .link-plain { margin-left: var(--sp-4); }
.rv__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.rv__meta { font-size: var(--fs-ui-14); font-weight: var(--fw-body); color: var(--ink-3); }

.rv__body { margin-top: 12px; font-size: var(--fs-ui-16); font-weight: var(--fw-body); line-height: 1.75; color: var(--ink); }
.rv__media { display: flex; gap: 10px; margin-top: 14px; }
.rv__media .ph,
.rv__media img { width: 96px; aspect-ratio: 1; }
.rv__media img { display: block; height: auto; object-fit: cover; }


.pdp-rv .rv { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--sp-6); padding-block: var(--sp-7); }
.rv__who { margin-top: 12px; font-size: var(--fs-ui-15); font-weight: var(--fw-ui); }
.rv__who span { margin-left: 8px; font-size: var(--fs-ui-14); font-weight: var(--fw-body); color: var(--ink-3); }
.rv__date { margin-top: 4px; font-size: var(--fs-ui-14); font-weight: var(--fw-body); color: var(--ink-3); }
.pdp-rv .rv .stars { --star: 18px; }
.pdp-rv .rv__media { margin: 0 0 var(--sp-4); }
.pdp-rv .rv__media .ph,
.pdp-rv .rv__media img { width: 120px; }
.pdp-rv .rv__body { margin-top: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.pdp-rv .rv.is-open .rv__body { display: block; -webkit-line-clamp: unset; }
.rv__more {
  display: flex; align-items: center; gap: 4px; margin: var(--sp-3) 0 0 auto;
  font-size: var(--fs-ui-14); font-weight: var(--fw-ui); color: var(--ink-3);
  transition: color var(--dur-fast) var(--ease);
}
.rv__more[hidden] { display: none; }
.rv__more:hover { color: var(--ink); }
.rv__more .icon { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease); }
.rv.is-open .rv__more .icon { transform: rotate(180deg); }
.rv[hidden] { display: none; }

@media (max-width: 720px) {
  .rv-summary { padding: var(--sp-6) var(--sp-5); }
  .rv-summary__stats { grid-template-columns: 1fr; gap: var(--sp-6); }
  .rv-summary__num { font-size: 40px; }
  .rv-summary__score .stars { --star: 26px; }
  .rv-summary__bars { gap: 10px; }
  .rv__media .ph, .rv__media img { width: 76px; }
  
  .pdp-rv .rv { grid-template-columns: 1fr; gap: var(--sp-4); padding-block: var(--sp-6); }
  .rv__side { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
  .rv__who, .rv__date { margin-top: 0; }
  .pdp-rv .rv__media .ph, .pdp-rv .rv__media img { width: 88px; }
  .rv-photos__all { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .pdp-rv .rv .stars { --star: 16px; }
  .rv-ai { margin-top: var(--sp-6); padding-top: var(--sp-6); }
  .rv-ai__title { font-size: var(--fs-ui-20); }
  .rv-ai__text { font-size: var(--fs-ui-15); }
  .rv-photos__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .rv-photos__grid li:nth-child(n+4):not(:last-child) { display: none; }   
  .pdp-rv__title .stars { --star: 18px; }
}



.pdp-tabs {
  position: sticky; top: calc(var(--header-now, var(--header-h)) - 1px); z-index: 40;
  transition: top var(--dur) var(--ease);
  background: var(--paper);
}

.pdp-tabs__list { display: flex; border-bottom: var(--hair); overflow-x: auto; scrollbar-width: none; }
.pdp-tabs__list::-webkit-scrollbar { display: none; }
.pdp-tabs a {
  flex: 1 1 0;   
  padding: 17px 18px; text-align: center; white-space: nowrap;
  font-size: var(--fs-ui-16); font-weight: var(--fw-ui); color: var(--ink-3);   
  border-bottom: 2px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.pdp-tabs a:hover { color: var(--ink); }
.pdp-tabs a.is-active { color: var(--ink); font-weight: var(--fw-strong); border-bottom-color: var(--ink); }   
.pdp-tabs span { color: var(--nanal-point); font-variant-numeric: tabular-nums; }


.buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; align-items: center; gap: var(--sp-4);
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: var(--paper); border-top: 1px solid var(--ink);
}
.buybar__info { min-width: 0; }
.buybar__name { font-size: var(--fs-ui-13); font-weight: var(--fw-body); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   
.buybar__price { margin-top: 2px; font-size: var(--fs-ui-16); font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; }
.buybar__actions { display: flex; gap: 8px; margin-left: auto; }
.buybar__actions .btn { min-width: 0; padding: 0 16px; font-size: var(--fs-ui-14); min-height: 50px; }   

@media (max-width: 860px) {
  .buybar { display: flex; }
  body[data-page="shop"] { padding-bottom: 78px; }
  .pdp-tabs a { padding: 15px 14px; font-size: var(--fs-ui-15); }
}


.page-hero--plain { padding-bottom: var(--sp-7); }


.complete__check {
  display: block; width: 56px; height: 56px;
  margin: 0 auto var(--sp-6);
  color: var(--ink);   
}
.complete__check svg { width: 100%; height: 100%; display: block; }

.complete__check svg * { vector-effect: non-scaling-stroke; }

.complete__check svg [x2="12.01"] { vector-effect: none; }
.complete__check--alert { color: var(--state-error); }


.ba__label,
.ing__name,
.pdp__price { letter-spacing: -.01em; text-transform: none; }
.pdp__price { font-variant-numeric: tabular-nums; }