@charset "UTF-8";
/* ==========================================================================
   HERSHE – 리쥬란 | Rejuran® page (Figma "Rejuran VER 02", node 81:26)
   Self-contained: every selector is scoped to body.rj or prefixed `rj-`, so this
   file can sit next to assets/css/hershe.css without either overriding the other.

   Palette – sampled from the Rejuran line-up page and the PN water-drop image:
     Charcoal #0F1315 (ink, dark surfaces) · Rejuran Teal #00BAB3 (accent, primary CTA)
     Deep Teal #00756F (teal text on light grounds, AA contrast)
     Aubergine #2C162A (water-drop backdrop – PN section) · Glass Mist #E8EEF1 (drop highlight – section grounds)
     Cool White #F7F8F8 (page) · Silver #B9B9B9 / Graphite #272B2D (copy and rules on charcoal)
     Light Lavender #EAE4EF kept as a subtle accent (info boxes, menu hover).
   ========================================================================== */

.rj {
  --rj-white: #F7F8F8;
  --rj-mist: #E8EEF1;
  --rj-lavender: #EAE4EF;
  --rj-ink: #0F1315;
  --rj-aubergine: #2C162A;
  --rj-teal: #00BAB3;
  --rj-teal-deep: #00756F;
  --rj-silver: #B9B9B9;
  --rj-graphite: #272B2D;
  --rj-charcoal: #0F1315;

  --rj-text: rgba(15, 19, 21, .92);        /* charcoal – body copy */
  --rj-muted: rgba(15, 19, 21, .68);       /* charcoal – secondary copy */
  --rj-faint: rgba(15, 19, 21, .55);       /* charcoal – fine print */
  --rj-line: rgba(15, 19, 21, .12);        /* charcoal – hairlines */
  --rj-line-strong: rgba(15, 19, 21, .22);
  --rj-on-dark: #DCE3E7;                   /* glass tint – copy on aubergine / charcoal */
  --rj-on-dark-line: rgba(220, 227, 231, .2);
  --rj-teal-tint: rgba(0, 186, 179, .12);  /* teal – DOT badge fill */

  --rj-sans: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --rj-serif: "Noto Serif KR", "AppleMyungjo", "Batang", Georgia, serif;
  --rj-ease: cubic-bezier(.22, .61, .36, 1);
  --rj-gutter: clamp(24px, 6.667vw, 96px);

  margin: 0;
  background: var(--rj-white);
  color: var(--rj-text);
  font-family: var(--rj-sans);
  font-size: 16px;
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
.rj *, .rj *::before, .rj *::after { box-sizing: border-box; }
.rj :where(h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; padding: 0; }
.rj :where(ul, ol) { list-style: none; }
.rj :where(img) { display: block; max-width: 100%; height: auto; }
.rj :where(a) { color: inherit; text-decoration: none; }
.rj :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.rj :where(a, button, [tabindex]):focus-visible { outline: 2px solid var(--rj-teal); outline-offset: 3px; border-radius: 2px; }
.rj [id] { scroll-margin-top: 72px; }

.rj-wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding-inline: var(--rj-gutter); }
.rj-section { padding-block: 104px; }
.rj-section--lavender { background: var(--rj-mist); }
.rj-section--plum { background: var(--rj-ink); color: var(--rj-white); }

.rj-reg { font-size: .42em; vertical-align: super; line-height: 0; margin-left: 1px; font-family: var(--rj-sans); font-weight: 400; }

/* ---------- Shared type ---------- */
.rj-head { display: flex; flex-direction: column; gap: 20px; color: var(--rj-ink); }
.rj-eyebrow { font-size: 13px; line-height: 1.4; color: var(--rj-teal-deep); }
.rj-h2 { font-family: var(--rj-serif); font-weight: 500; font-size: clamp(28px, 2.917vw, 42px); line-height: 1.5; color: var(--rj-ink); letter-spacing: -.01em; }
.rj-lead { font-size: 17px; line-height: 1.9; color: var(--rj-muted); }
.rj-small { font-size: 12px; line-height: 1.8; color: var(--rj-muted); }
.rj-source { font-size: 11px; line-height: 1.6; color: var(--rj-faint); }
.rj-note { display: block; font-size: 11px; line-height: 1.8; color: var(--rj-muted); }

/* ---------- Buttons ---------- */
.rj-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 24px;
  height: 54px; padding: 0 24px; border: 1px solid var(--rj-ink); border-radius: 4px;
  font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; isolation: isolate;
  transition: transform .35s var(--rj-ease), box-shadow .35s var(--rj-ease), color .3s, background-color .3s, border-color .3s;
}
.rj-btn::before { /* soft sheen that sweeps across on hover */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(247, 248, 248, .22) 50%, transparent 70%);
  transform: translateX(-100%); transition: transform .7s var(--rj-ease);
}
.rj-btn--solid { background: var(--rj-teal); border-color: var(--rj-teal); color: var(--rj-ink); }
.rj-btn--light { background: var(--rj-white); border-color: var(--rj-white); color: var(--rj-ink); }
.rj-arr { font-size: 17px; line-height: 1; display: inline-block; transition: transform .35s var(--rj-ease); }
@media (hover: hover) {
  .rj-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -14px rgba(15, 19, 21, .45); }
  .rj-btn:hover::before { transform: translateX(100%); }
  .rj-btn:hover .rj-arr { transform: translate(3px, -3px); }
  .rj-btn--light:hover { box-shadow: 0 12px 26px -14px rgba(15, 19, 21, .6); }
  .rj-btn--light:hover::before { background: linear-gradient(110deg, transparent 30%, rgba(0, 186, 179, .16) 50%, transparent 70%); }
}
.rj-btn:focus-visible .rj-arr { transform: translate(3px, -3px); }

.rj-textlink { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--rj-teal-deep); background: linear-gradient(var(--rj-teal), var(--rj-teal)) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size .4s var(--rj-ease); }
.rj-arr--down { font-size: 14px; }
@media (hover: hover) {
  .rj-textlink:hover { background-size: 100% 1px; }
  .rj-textlink:hover .rj-arr--down { transform: translateY(3px); }
}

/* ---------- Hero (Figma 81:44) ---------- */
.rj-hero { display: flex; align-items: center; gap: 64px; padding-block: 64px;margin-top: 80px; }
.rj-hero__text { flex: 0 1 580px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.rj-hero__crumb { font-size: 12px; color: var(--rj-muted); }
.rj-hero__title { font-family: var(--rj-serif); font-weight: 500; font-size: clamp(40px, 4.444vw, 64px); line-height: 1.4; color: var(--rj-ink); letter-spacing: -.015em; }
.rj-hero__name { font-size: 28px; font-weight: 500; line-height: 1.3; color: var(--rj-charcoal); }
.rj-hero__name .rj-reg { font-size: 14px; vertical-align: top; position: relative; top: -.35em; line-height: 1; }
.rj-hero__desc { font-size: 18px; line-height: 1.9; color: var(--rj-muted); }
.rj-hero__actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.rj-hero__keys { display: flex; gap: 16px; padding-top: 24px; border-top: 1px solid var(--rj-line); font-size: 13px; color: var(--rj-teal-deep); }
.rj-hero__keys li { flex: 1 1 0; min-width: 0; }
.rj-hero__keys a { display: inline-block; padding: 2px 0; background: linear-gradient(var(--rj-teal), var(--rj-teal)) 0 100% / 0 1px no-repeat; transition: background-size .4s var(--rj-ease); }
@media (hover: hover) { .rj-hero__keys a:hover { background-size: 100% 1px; } }

.rj-hero__media { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.rj-hero__photo { position: relative; height: 640px; border-radius: 8px; overflow: hidden; background: var(--rj-mist); }
.rj-hero__photo .rj-float { position: absolute; inset: 0; animation: rj-drift 14s ease-in-out infinite alternate; }
.rj-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.rj-hero__curve { position: absolute; left: 57.6%; top: 50%; width: 49.7%; height: auto; aspect-ratio: 3 / 7; transform: translate(-50%, -50%) rotate(22deg); pointer-events: none; animation: rj-curve 18s ease-in-out infinite alternate; }

/* ---------- Intro (Figma 81:69) ---------- */
.rj-intro__row { display: flex; gap: 96px; align-items: flex-start; }
.rj-intro__row > .rj-head { flex: 0 0 530px; }
.rj-intro__body { flex: 1 1 0; min-width: 0; padding-top: 40px; display: flex; flex-direction: column; gap: 20px; }
.rj-intro__body > p { font-size: 17px; line-height: 1.9; color: var(--rj-muted); }
.rj-dot { background: var(--rj-teal-tint); border: 1px solid var(--rj-teal); border-radius: 6px; padding: 16px; color: var(--rj-charcoal); display: flex; flex-direction: column; gap: 10px; }
.rj-dot__head { font-size: 11px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.rj-dot__head strong, .rj-dot--badge strong { font-weight: 700; }
.rj-dot__text { font-size: 12px; line-height: 1.8; }
.rj-facts { display: flex; gap: 32px; margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--rj-line); }
.rj-facts > div { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.rj-facts dt { font-size: 12px; color: var(--rj-muted); }
.rj-facts dd { font-size: 15px; color: var(--rj-charcoal); }

/* ---------- Product image swap (box ⇄ syringe) ---------- */
.rj-swap { position: relative; display: block; flex: none; }
.rj-swap > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .55s var(--rj-ease), transform .7s var(--rj-ease); }
.rj-swap__alt { opacity: 0; transform: translateY(6px) scale(.97); }
.rj-swap.is-on .rj-swap__base,
.rj-swap:focus-visible .rj-swap__base,
.rj-card:focus-visible .rj-swap__base { opacity: 0; transform: translateY(-4px) scale(.97); }
.rj-swap.is-on .rj-swap__alt,
.rj-swap:focus-visible .rj-swap__alt,
.rj-card:focus-visible .rj-swap__alt { opacity: 1; transform: none; }
@media (hover: hover) {
  .rj-swap:hover .rj-swap__base, .rj-card:hover .rj-swap__base { opacity: 0; transform: translateY(-4px) scale(.97); }
  .rj-swap:hover .rj-swap__alt, .rj-card:hover .rj-swap__alt { opacity: 1; transform: none; }
}
.rj-swap[data-rj-tap] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rj-swap--card { grid-area: media; width: 60px; height: 92px; border-radius: 6px; overflow: hidden; background: var(--rj-mist); transition: background-color .45s var(--rj-ease); }
/* The product PNGs carry ~30% transparent margin, so they are drawn larger than the tile to let the product fill it. */
.rj-swap--card > img { inset: -16% -30%; width: 160%; max-width: none; height: 132%; }
.rj-swap--prod { width: 120px; height: 150px; border-radius: 4px; }
.rj-swap--pn { width: 160px; height: 200px; border-radius: 4px; }

/* ---------- Three choices (Figma 81:91) ---------- */
.rj-choose .rj-wrap { display: flex; flex-direction: column; gap: 36px; }
.rj-cards { display: flex; gap: 16px; }
.rj-cards > li { flex: 1 1 0; min-width: 0; display: flex; }
/* Compact card: product tile on the left; tag, name and description on the right. */
.rj-card {
  position: relative; flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto 1fr;
  grid-template-areas: "media top" "media name" "media desc"; column-gap: 16px; row-gap: 2px; padding: 12px 16px 12px 12px;
  border: 1px solid var(--rj-line-strong); border-radius: 8px; background: var(--rj-white); color: var(--rj-ink);
  transition: transform .45s var(--rj-ease), box-shadow .45s var(--rj-ease), background-color .45s var(--rj-ease), border-color .45s, color .45s;
}
.rj-card__top { grid-area: top; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--rj-muted); }
.rj-card__dot { flex: none; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--rj-ink); transition: background-color .35s, border-color .35s, transform .35s var(--rj-ease); }
.rj-card__name { grid-area: name; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; font-size: 19px; font-weight: 500; line-height: 1.45; }
.rj-card__en { font-size: 12px; font-weight: 400; color: var(--rj-muted); }
.rj-card__desc { grid-area: desc; font-size: 13px; line-height: 1.6; color: var(--rj-muted); }
/* Hover, keyboard focus and the selected card use a light Rejuran ocean blue (the water identity) with dark
   blue-teal text. Selected is the deeper blue with a 2px ocean border and a filled aqua dot; hover is a lighter
   blue that lifts. The muted text is a touch darker than #4F737B so the small copy keeps 4.5:1 on the selected blue. */
.rj-cards {
  --rj-card-ocean-hover: #EAF7FA;
  --rj-card-ocean-selected: #D9F0F4;
  --rj-card-ocean-border: #76BDCA;
  --rj-card-ocean-text: #163C46;
  --rj-card-ocean-muted: #476A72;
  --rj-card-ocean-dot: #00AABD;
}
.rj-card.is-selected { background: var(--rj-card-ocean-selected); border-color: var(--rj-card-ocean-border); box-shadow: inset 0 0 0 1px var(--rj-card-ocean-border); color: var(--rj-card-ocean-text); }
.rj-card.is-selected .rj-card__top, .rj-card.is-selected .rj-card__en, .rj-card.is-selected .rj-card__desc { color: var(--rj-card-ocean-muted); }
.rj-card.is-selected .rj-card__dot { background: var(--rj-card-ocean-dot); border-color: var(--rj-card-ocean-dot); box-shadow: 0 0 0 4px rgba(0, 170, 189, .2); }
.rj-card.is-selected .rj-swap--card { background: #F4FAFB; }
.rj-card:focus-visible { border-radius: 8px; border-color: var(--rj-card-ocean-border); }
.rj-card:not(.is-selected):focus-visible { background: var(--rj-card-ocean-hover); }
@media (hover: hover) {
  .rj-card:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -28px rgba(22, 60, 70, .5); border-color: var(--rj-card-ocean-border); }
  .rj-card:not(.is-selected):hover { background: var(--rj-card-ocean-hover); }
  .rj-card.is-selected:hover { box-shadow: inset 0 0 0 1px var(--rj-card-ocean-border), 0 22px 40px -28px rgba(22, 60, 70, .5); }
  .rj-card:hover .rj-card__dot { transform: scale(1.15); }
}

/* ---------- Product selector ⇄ product guide (scroll story) ----------
   .rj-story wraps the three-choices intro, the selector, its notes and the product guide. The selector is
   sticky inside it, directly below the site's fixed menu bar, so it is released where the story ends: the
   bottom of the product guide, right after Rejuran I. --rj-index-h (site menu bar) / --rj-picker-h are fallbacks that the
   page's inline script replaces with measured heights; the scroll margins keep anchored headings clear of both bars. */
.rj-story { --rj-index-h: 66px; --rj-picker-h: 138px; }
.rj-story .rj-choose { padding-bottom: 26px; }
.rj-picker {
  position: sticky; top: var(--rj-index-h); z-index: 9; padding-block: 10px; /* 9: under the site's #header (z-index 10) so its dropdown menus open over the cards */
  background: rgba(232, 238, 241, .95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: box-shadow .35s var(--rj-ease);
}
.rj-picker.is-stuck { box-shadow: 0 1px 0 var(--rj-line), 0 18px 28px -24px rgba(15, 19, 21, .55); }
.rj-story .rj-choose__notes { padding-top: 36px; }
.rj-choose__notes .rj-wrap { display: flex; flex-direction: column; gap: 36px; }
.rj-story .rj-guide[id] { scroll-margin-top: calc(var(--rj-index-h) + var(--rj-picker-h)); }
.rj-story .rj-prod[id] { scroll-margin-top: calc(var(--rj-index-h) + var(--rj-picker-h) + 8px); }

/* ---------- Product guide (Figma 81:103) ---------- */
.rj-guide .rj-wrap { display: flex; flex-direction: column; gap: 56px; }
.rj-guide__row { display: flex; gap: 80px; align-items: flex-start; }
.rj-guide__aside { flex: 0 0 500px; display: flex; flex-direction: column; gap: 32px; }
.rj-guide__aside > .rj-head { margin-bottom: 24px; } /* the guide heading opens the left column */
.rj-guide__figure { display: flex; flex-direction: column; gap: 16px; }
.rj-guide__photo { height: 660px; border-radius: 8px; overflow: hidden; background: var(--rj-mist); }
.rj-guide__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--rj-ease); }
@media (hover: hover) { .rj-guide__photo:hover img { transform: scale(1.025); } }
.rj-guide__figure figcaption { display: flex; flex-direction: column; gap: 16px; }
.rj-guide__cap { font-size: 12px; line-height: 1.8; color: var(--rj-muted); }
.rj-guide__basis { display: flex; flex-direction: column; gap: 16px; }
.rj-guide__basis-title { font-family: var(--rj-serif); font-size: 24px; color: var(--rj-ink); }
.rj-guide__list { flex: 1 1 0; min-width: 0; }

.rj-prod { display: flex; flex-direction: column; gap: 20px; padding-block: 32px; border-top: 1px solid var(--rj-line); }
.rj-prod__eyebrow { font-size: 12px; color: var(--rj-teal-deep); }
.rj-prod__name { font-family: var(--rj-serif); font-weight: 500; font-size: clamp(28px, 2.361vw, 34px); line-height: 1.4; color: var(--rj-ink); }
.rj-prod__name .rj-reg { font-size: 16px; vertical-align: top; position: relative; top: .2em; line-height: 1; }
.rj-prod__note { font-size: 11px; color: var(--rj-faint); }
.rj-prod__media { display: flex; }
.rj-prod__desc { font-size: 16px; line-height: 1.9; color: var(--rj-muted); }
.rj-box { background: var(--rj-lavender); border-radius: 6px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.rj-box__title { font-size: 12px; font-weight: 500; color: var(--rj-ink); }
.rj-box__text { font-size: 13px; line-height: 1.8; color: var(--rj-muted); }
.rj-box--detail .rj-box__title { font-weight: 400; }
.rj-box--detail .rj-box__text { font-size: 11px; }
.rj-prod:target .rj-prod__name { animation: rj-target 1.6s var(--rj-ease); }

/* Desktop: one screen per product. --rj-screen is the viewport height left under the site's menu bar and the product
   selector. Each article fills it (content centred, nothing clipped: a longer article simply grows), and the left column
   (guide heading, photo, caption, "내 피부를 이해하는 시간.") is sticky in it with the photo giving way so the column
   always fits. The column is sticky inside .rj-guide__row, whose bottom is the end of Rejuran I, so it is released there.
   The guide anchor lands on the first product screen (the section's top padding sits under the two bars). Moving one
   screen at a time is done by the page's inline script; without it the screens simply scroll. */
@media (min-width: 1024px) {
  .rj-story { --rj-screen: calc(100svh - var(--rj-index-h) - var(--rj-picker-h)); --rj-guide-pt: 104px; }
  .rj-story .rj-guide { padding-top: var(--rj-guide-pt); }
  .rj-story .rj-guide[id] { scroll-margin-top: calc(var(--rj-index-h) + var(--rj-picker-h) - var(--rj-guide-pt)); }

  .rj-guide__aside { position: sticky; top: calc(var(--rj-index-h) + var(--rj-picker-h) + 24px); max-height: calc(var(--rj-screen) - 48px); gap: 18px; }
  .rj-guide__aside > .rj-head { gap: 12px; margin-bottom: 0; }
  .rj-guide__aside .rj-h2 { font-size: clamp(24px, 2.25vw, 32px); line-height: 1.4; }
  .rj-guide__figure { flex: 0 1 auto; min-height: 0; gap: 10px; }
  .rj-guide__photo { flex: 0 1 660px; height: auto; min-height: 160px; }
  .rj-guide__photo img { object-position: 50% 30%; }

  .rj-story .rj-prod { min-height: var(--rj-screen); justify-content: center; gap: clamp(12px, 1.8svh, 20px); padding-block: clamp(20px, 3svh, 32px); }
  .rj-story .rj-prod[id] { scroll-margin-top: calc(var(--rj-index-h) + var(--rj-picker-h)); }
  .rj-story .rj-swap--prod { width: auto; height: clamp(110px, 14svh, 150px); aspect-ratio: 4 / 5; }
  .rj-story .rj-box { padding: 14px 16px; gap: 6px; }
}

/* Narrower or shorter desktop screens: the product image moves up beside the eyebrow and name (drawn larger inside its
   tile, as in the selector cards, because the PNGs carry wide transparent margins) and the description tightens, so the
   longest article (Rejuran HB) still fits one screen. The image is positioned in the grid area of those two rows. */
@media (min-width: 1024px) and (max-width: 1279px), (min-width: 1024px) and (max-height: 879px) {
  .rj-story .rj-prod { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; justify-content: normal; }
  .rj-story .rj-prod__media { position: absolute; grid-row: 1 / 3; grid-column: 1; top: 0; right: 0; bottom: 0; width: 64px; }
  .rj-story .rj-swap--prod { width: 100%; height: 100%; }
  .rj-story .rj-swap--prod > img { inset: -16% -30%; width: 160%; max-width: none; height: 132%; }
  .rj-story .rj-prod__eyebrow, .rj-story .rj-prod__name { padding-right: 88px; }
  .rj-story .rj-prod__desc { font-size: 15px; line-height: 1.75; }
}

/* ---------- PN story (Figma 81:148) ---------- */
.rj-pn__grid {
  display: grid; grid-template-columns: 520px minmax(0, 1fr); column-gap: 80px; row-gap: 56px; align-items: center;
  grid-template-areas: "concept concept" "msg products" "panels panels" "foot foot";
}
.rj-pn__concept { grid-area: concept; display: flex; flex-direction: column; gap: 12px; }
.rj-pn__frame { position: relative; height: 480px; border-radius: 8px; overflow: hidden; background: var(--rj-charcoal); }
.rj-pn__drop { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; animation: rj-breathe 12s ease-in-out infinite alternate; }
/* Water tone for the concept photo, whose backdrop is baked in plum. Inside the frame only (the section stays charcoal):
   a `hue` blend layer swaps every pixel's hue for aqua → deep cyan-blue while keeping its own saturation and lightness,
   so the plum turns to deep water and the droplet's near-neutral silver highlights stay clear (a plain hue-rotate would
   tint the droplet green). A faint light from above adds the luminous water feel. */
.rj-pn__frame { isolation: isolate; }
.rj-pn__drop { filter: saturate(1.5) brightness(1.15); }
.rj-pn__frame::before, .rj-pn__frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.rj-pn__frame::before { z-index: 1; background: radial-gradient(70% 90% at 50% 0%, rgba(90, 205, 230, .16), rgba(90, 205, 230, 0) 70%); mix-blend-mode: screen; }
.rj-pn__frame::after { z-index: 2; background: linear-gradient(180deg, #17A6C4, #15669C); mix-blend-mode: hue; }
.rj-pn__concept figcaption { font-size: 11px; line-height: 1.8; color: var(--rj-on-dark); }

.rj-pn__msg { grid-area: msg; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.rj-pn__eyebrow { font-size: 13px; color: var(--rj-on-dark); }
.rj-pn__big { font-family: var(--rj-serif); font-weight: 500; font-size: clamp(56px, 5vw, 72px); line-height: 1.25; color: var(--rj-white); }
.rj-pn__title { font-family: var(--rj-serif); font-weight: 400; font-size: clamp(26px, 2.222vw, 32px); line-height: 1.5; color: var(--rj-white); }
.rj-pn__sub { font-size: 17px; color: var(--rj-on-dark); }
.rj-pn__desc { font-size: 16px; line-height: 1.9; color: var(--rj-on-dark); }
.rj-pn__small { font-size: 14px; line-height: 1.8; color: var(--rj-on-dark); }
.rj-dot--badge { flex-direction: row; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 4px; font-size: 11px; background: #DCF2F1; background: color-mix(in srgb, #00BAB3 16%, #F7F8F8); }

.rj-pn__products { grid-area: products; display: flex; flex-direction: column; gap: 20px; }
.rj-pn__row { display: flex; justify-content: center; gap: 16px; }
.rj-pn__row li { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rj-pn__label { font-size: 11px; color: var(--rj-on-dark); }
.rj-pn__caption { font-size: 11px; line-height: 1.8; color: var(--rj-on-dark); }

.rj-pn__panels { grid-area: panels; display: flex; gap: 24px; align-self: stretch; }
.rj-panel { flex: 1 1 0; min-width: 0; background: var(--rj-white); border-radius: 8px; padding: 32px; display: flex; flex-direction: column; gap: 18px; transition: transform .45s var(--rj-ease), box-shadow .45s var(--rj-ease); }
.rj-panel__title { font-family: var(--rj-serif); font-size: 28px; line-height: 1.3; color: var(--rj-ink); }
.rj-panel__text { font-size: 14px; line-height: 1.9; color: var(--rj-muted); }
@media (hover: hover) { .rj-panel:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -26px rgba(15, 19, 21, .7); } }

.rj-pn__foot { grid-area: foot; display: flex; gap: 16px; padding-top: 24px; border-top: 1px solid var(--rj-on-dark-line); font-size: 12px; color: var(--rj-on-dark); }
.rj-pn__foot-title { white-space: nowrap; }
.rj-pn__foot p:last-child { line-height: 1.8; }

/* ---------- Consultation flow (Figma 81:189) ---------- */
.rj-flow .rj-wrap { display: flex; flex-direction: column; gap: 48px; }
/* Image ≈ 38% and steps ≈ 62% of the row; each step and its divider spans the whole right column. */
.rj-flow__row { display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); gap: 64px; align-items: start; }
.rj-flow__photo { position: relative; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: var(--rj-mist); }
.rj-flow__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.rj-flow__photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 37.5%; background: linear-gradient(200.6deg, rgba(232, 238, 241, 0) 25%, rgba(232, 238, 241, .7) 75%); }
.rj-steps { min-width: 0; }
.rj-step { display: flex; flex-direction: column; gap: 18px; padding-top: 24px; border-top: 1px solid var(--rj-line-strong); }
.rj-step + .rj-step { margin-top: 0; }
.rj-step__no { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--rj-teal-deep); }
.rj-step__badge { display: none; }
.rj-step__title { font-family: var(--rj-serif); font-weight: 400; font-size: 28px; line-height: 1.3; color: var(--rj-ink); }
.rj-step__text { max-width: 38em; font-size: 16px; line-height: 1.9; color: var(--rj-muted); padding-bottom: 4px; }
.rj-flow__note { font-size: 13px; line-height: 1.8; color: var(--rj-faint); }

/* ---------- FAQ (Figma 81:198) ---------- */
.rj-faq__row { display: flex; gap: 96px; align-items: flex-start; }
.rj-faq__intro { flex: 0 0 340px; display: flex; flex-direction: column; gap: 24px; }
.rj-faq__lead { font-size: 14px; line-height: 1.9; color: var(--rj-muted); }
.rj-faq__list { flex: 1 1 0; min-width: 0; }
.rj-faq__item { border-top: 1px solid var(--rj-line); }
.rj-faq__q button { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 28px 0 0; text-align: left; font-size: 18px; font-weight: 500; line-height: 1.6; color: var(--rj-ink); }
.rj-faq__icon { position: relative; flex: none; width: 14px; height: 14px; margin-top: .45em; }
.rj-faq__icon::before, .rj-faq__icon::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor; transition: transform .35s var(--rj-ease); }
.rj-faq__icon::after { transform: rotate(90deg); }
.rj-faq__item.is-open .rj-faq__icon::after { transform: rotate(0deg); }
.rj-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--rj-ease); }
.rj-faq__a-in { overflow: hidden; }
.rj-faq__a p { padding-top: 16px; font-size: 15px; line-height: 1.9; color: var(--rj-muted); opacity: 0; transition: opacity .35s; }
.rj-faq__item.is-open .rj-faq__a { grid-template-rows: 1fr; }
.rj-faq__item.is-open .rj-faq__a p { opacity: 1; }
.rj-faq__item { padding-bottom: 28px; }
@media (hover: hover) { .rj-faq__q button:hover .rj-faq__icon { color: var(--rj-teal); } }

/* ---------- Safety notice (Figma 81:220) ---------- */
.rj-safety { padding-block: 36px; }
.rj-safety .rj-wrap { display: flex; flex-direction: column; gap: 16px; }
.rj-safety__title { font-size: 15px; font-weight: 500; color: var(--rj-ink); }
.rj-safety__text { font-size: 15px; line-height: 1.9; color: var(--rj-charcoal); }
.rj-safety__small { font-size: 12px; line-height: 1.8; color: var(--rj-muted); }

/* ---------- Motion ---------- */
.rj-float--a, .rj-float--b, .rj-float--c { animation: rj-float 6.5s ease-in-out infinite; }
.rj-float--b { animation-delay: -2.2s; animation-duration: 7.2s; }
.rj-float--c { animation-delay: -4.4s; animation-duration: 6.8s; }
@keyframes rj-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes rj-drift { from { transform: scale(1.045) translateY(6px); } to { transform: scale(1.045) translateY(-6px); } }
@keyframes rj-curve { from { transform: translate(-50%, -50%) rotate(22deg); } to { transform: translate(-50%, -51.5%) rotate(25deg); } }
@keyframes rj-breathe { from { transform: scale(1); } to { transform: scale(1.04); } }
@keyframes rj-target { 0% { color: var(--rj-teal); } 100% { color: var(--rj-ink); } }

/* Entrance reveal: hidden only when JS is running (html.rj-js), never in the failsafe state. */
.rj [data-rj-reveal] { transition: opacity .9s var(--rj-ease), transform .9s var(--rj-ease); transition-delay: var(--rj-d, 0s); }
.rj-js .rj [data-rj-reveal]:not(.is-in) { opacity: 0; transform: translateY(22px); }
.rj-js .rj [data-rj-reveal="fade"]:not(.is-in) { transform: scale(.985); }
.rj-js.rj-reveal-all .rj [data-rj-reveal] { opacity: 1; transform: none; }

/* Repeatable text fade-up. Uses `translate` (paint-only, never moves layout) so it composes with
   hover transforms. Fades in on entry with the element's --rj-d stagger; resets instantly
   (no transition) only once rejuran.js sees the element fully outside the viewport. */
.rj [data-rj-text] { transition: opacity .85s var(--rj-ease) var(--rj-d, 0s), translate .85s var(--rj-ease) var(--rj-d, 0s); }
.rj-js .rj [data-rj-text]:not(.is-text-in) { opacity: 0; translate: 0 18px; transition-duration: 0s; transition-delay: 0s; }
.rj-js.rj-reveal-all .rj [data-rj-text] { opacity: 1; translate: none; }
.rj .rj-panel[data-rj-text] { transition: opacity .85s var(--rj-ease) var(--rj-d, 0s), translate .85s var(--rj-ease) var(--rj-d, 0s), transform .45s var(--rj-ease), box-shadow .45s var(--rj-ease); }

@media (prefers-reduced-motion: reduce) {
  .rj *, .rj *::before, .rj *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .rj-js .rj [data-rj-reveal]:not(.is-in) { opacity: 1; transform: none; }
  .rj-js .rj [data-rj-text]:not(.is-text-in) { opacity: 1; translate: none; }
  .rj-swap > img { transform: none !important; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1279px) {
  .rj-intro__row { gap: 64px; }
  .rj-intro__row > .rj-head { flex-basis: 420px; }
  .rj-guide__row { gap: 56px; }
  .rj-guide__aside { flex-basis: 42%; }
  .rj-pn__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; }
  .rj-flow__row { gap: 48px; }
  .rj-faq__row { gap: 64px; }
  .rj-faq__intro { flex-basis: 300px; }
}

@media (max-width: 1023px) {
  .rj-section { padding-block: 88px; }
  .rj-hero { gap: 40px; }
  .rj-hero__photo { height: 560px; }
  .rj-intro__row { flex-direction: column; gap: 28px; }
  .rj-intro__row > .rj-head { flex-basis: auto; }
  .rj-intro__body { padding-top: 0; }
  .rj-facts { flex-wrap: wrap; row-gap: 24px; margin-top: 44px; }
  .rj-facts > div { flex-basis: calc(50% - 16px); }
  .rj-story { --rj-picker-h: 125px; }
  .rj-card { column-gap: 12px; padding: 10px 12px 10px 10px; }
  .rj-swap--card { width: 48px; height: 76px; }
  .rj-card__name { font-size: 17px; }
  .rj-card__en { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rj-card__desc { font-size: 12px; line-height: 1.55; }
  .rj-guide__row { flex-direction: column; gap: 40px; }
  .rj-guide__aside { flex-basis: auto; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: end; }
  .rj-guide__aside > .rj-head { grid-column: 1 / -1; }
  .rj-guide__photo { height: 520px; }
  .rj-guide__list { width: 100%; }
  .rj-pn__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "concept" "msg" "products" "panels" "foot"; align-items: stretch; }
  .rj-pn__frame { height: 420px; }
  .rj-pn__panels { flex-direction: column; }
  .rj-flow__row { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .rj-flow__photo { aspect-ratio: 16 / 9; }
  .rj-flow__photo::after { display: none; } /* the side-by-side bottom fade would cut across the face in a wide crop */
  .rj-faq__row { flex-direction: column; gap: 40px; }
  .rj-faq__intro { flex-basis: auto; }
}

/* Mobile – follows Figma "Rejuran VER 02 · 모바일" (node 81:248, 390 px) */
@media (max-width: 767px) {
  .rj { --rj-gutter: 24px; }
  .rj [id] { scroll-margin-top: 64px; }
  .rj-section { padding-block: 72px; }

  .rj-hero { flex-direction: column; align-items: stretch; gap: 40px; padding-block: 48px; }
  .rj-hero__text { flex-basis: auto; gap: 24px; }
  .rj-hero__title { font-size: 38px; }
  .rj-hero__name { font-size: 20px; margin-top: -8px; }
  .rj-hero__name .rj-reg { font-size: 10px; }
  .rj-hero__desc { font-size: 15px; line-height: 1.85; }
  .rj-hero__actions { gap: 20px; }
  .rj-hero__keys { font-size: 12px; gap: 12px; }
  .rj-hero__photo { height: auto; aspect-ratio: 342 / 420; }

  .rj-eyebrow { display: inline-flex; align-items: center; gap: 8px; }
  .rj-eyebrow::before { content: ""; width: 3px; height: 14px; border-radius: 1px; background: var(--rj-teal); }
  .rj-head { gap: 16px; }
  .rj-h2 { font-size: 28px; }
  .rj-lead { font-size: 15px; line-height: 1.85; }

  .rj-intro__body > p { font-size: 15px; line-height: 1.85; }
  .rj-facts { flex-direction: column; gap: 24px; margin-top: 44px; }
  .rj-facts > div { flex-direction: row; justify-content: space-between; gap: 16px; }
  .rj-facts dd { font-size: 13px; text-align: right; }

  /* Selector: three mini cards in one row (tile + name); tag and description stay in the markup for screen readers. */
  .rj-story { --rj-index-h: 58px; --rj-picker-h: 111px; }
  .rj-picker { padding-block: 8px; }
  .rj-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .rj-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; grid-template-areas: "media" "name"; row-gap: 6px; padding: 8px 6px 9px; border-radius: 6px; }
  .rj-card__top { position: absolute; top: 13px; right: 11px; z-index: 1; }
  .rj-card:focus-visible { border-radius: 6px; }
  .rj-card__dot { width: 8px; height: 8px; }
  .rj-card__tag, .rj-card__desc { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rj-swap--card { width: 100%; height: 52px; }
  .rj-card__name { justify-content: center; font-size: 13px; line-height: 1.35; text-align: center; }

  .rj-guide .rj-wrap { gap: 36px; }
  .rj-guide__row { gap: 36px; }
  .rj-guide__aside { display: flex; gap: 24px; align-items: stretch; } /* full-width blocks (the tablet grid aligns to the end) */
  .rj-guide__aside > .rj-head { margin-bottom: 12px; }
  .rj-guide__photo { height: auto; aspect-ratio: 342 / 330; }
  .rj-guide__basis-title { font-size: 20px; }
  .rj-prod__name { font-size: 28px; }
  .rj-prod__en { font-family: var(--rj-sans); font-weight: 400; font-size: 17px; }
  .rj-prod__name .rj-reg { font-size: 9px; top: .9em; }
  .rj-prod__media { justify-content: center; height: 220px; border-radius: 6px; }
  .rj-swap--prod { width: 200px; height: 220px; }
  .rj-prod__desc { font-size: 15px; line-height: 1.85; }

  /* PN: Figma mobile moves the concept image between the DOT badge and the CTA */
  .rj-pn__grid { display: flex; flex-direction: column; align-items: stretch; gap: 24px; }
  .rj-pn__eyebrow, .rj-pn__big { align-self: flex-start; }
  .rj-pn__msg { display: contents; }
  .rj-pn__eyebrow { order: 1; } .rj-pn__big { order: 2; } .rj-pn__title { order: 3; } .rj-pn__sub { order: 4; }
  .rj-pn__desc { order: 5; } .rj-pn__small { order: 6; } .rj-dot--badge { order: 7; align-self: flex-start; }
  .rj-pn__concept { order: 8; margin-top: 8px; }
  .rj-pn__cta { order: 9; width: 100%; margin-top: 8px; }
  .rj-pn__products { order: 10; margin-top: 24px; }
  .rj-pn__panels { order: 11; margin-top: 20px; gap: 12px; }
  .rj-pn__foot { order: 12; margin-top: 20px; flex-direction: column; gap: 8px; }
  .rj-pn__eyebrow { display: inline-flex; align-items: center; gap: 8px; }
  .rj-pn__eyebrow::before { content: ""; width: 3px; height: 14px; border-radius: 1px; background: var(--rj-teal); }
  .rj-pn__big { font-size: 52px; }
  .rj-pn__title { font-size: 26px; }
  .rj-pn__desc { font-size: 15px; line-height: 1.85; }
  .rj-pn__frame { height: auto; aspect-ratio: 342 / 300; }
  .rj-pn__row { gap: 8px; }
  .rj-swap--pn { width: 100px; height: 130px; }
  .rj-panel { padding: 24px; border-radius: 6px; }
  .rj-panel__title { font-size: 24px; }

  .rj-flow .rj-wrap { gap: 48px; }
  .rj-flow__photo { display: none; }
  .rj-step__badge { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--rj-ink); color: var(--rj-white); font-size: 11px; font-weight: 500; }
  .rj-step__title { font-size: 26px; }
  .rj-step__text { font-size: 15px; line-height: 1.85; }
  .rj-flow__note { display: none; }

  .rj-faq { padding-block: 64px; }
  .rj-faq__row { gap: 36px; }
  .rj-faq__q button { font-size: 16px; gap: 16px; }
  .rj-faq__a p { font-size: 14px; line-height: 1.85; }

  .rj-safety__text { font-size: 14px; }
}

@media (max-width: 359px) {
  .rj-hero__title { font-size: 32px; }
  .rj-hero__keys { flex-direction: column; gap: 8px; }
}

/* hershe9.com layout: the site's #wrap has an inline overflow:hidden, which switches off position:sticky for the
   product selector and the guide column. "clip" still hides sideways overflow but lets sticky work.
   This file only loads on this page, so other pages keep #wrap as it is. */
#wrap { overflow: visible !important; overflow-x: clip !important; }