/* ============================================================================
   ARUM v4 — experience layer

   Loaded AFTER components.css. Everything v4 adds on top of the v3 foundation:
   the guided-journey homepage (hero line, advance buttons, trust row, steps,
   service picker), the right-rail navigation with its soft focus-veil, and the
   floating contact dock. v3's tokens, base reset, and existing page components
   are reused untouched.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   Stages — each homepage section is a "stage" in the guided path. Free scroll
   always works; the advance buttons just spring-scroll between them.
   ------------------------------------------------------------------------- */
.stage { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.stage--alt { background: var(--shell); }

/* A quiet, secondary text link used for the "skip straight to the form"
   shortcut offered at every step so no one feels trapped on the rails. */
.link-quiet {
  display: inline-block;
  font-size: var(--size-nav);
  letter-spacing: .04em;
  color: var(--muted);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 2px;
  transition: color var(--dur-hover) ease, border-color var(--dur-hover) ease;
}
.link-quiet:hover { color: var(--accent); border-color: var(--accent); }

/* ---------------------------------------------------------------------------
   Hero — wordmark stays, but a plain-language line now sits under it so a cold
   visitor (from Reddit / Instagram / a blog) knows what ARUM is in one glance.
   ------------------------------------------------------------------------- */
.hero__line {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 3.2vw, 1.875rem);
  line-height: 1.34;
  color: var(--on-plum-strong);
  text-wrap: balance;
  margin-top: clamp(1rem, 2.5vw, 1.75rem);
  max-width: 32ch;
}
.hero__actions {
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.hero__actions .link-quiet { color: var(--on-plum-soft); border-color: var(--on-plum-faint); }
.hero__actions .link-quiet:hover { color: var(--on-plum-strong); border-color: var(--on-plum-strong); }

/* ---------------------------------------------------------------------------
   Advance affordance — the button that carries you to the next stage.
   Circular icon + label; spring-scrolls via journey.js (progressive
   enhancement — it is a real in-page anchor fallback too).
   ------------------------------------------------------------------------- */
.stage__advance {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
.advance {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--plum);
  padding: .5rem;
}
.advance__label {
  font-family: var(--font-body);
  font-size: var(--size-nav);
  letter-spacing: var(--track-button);
  text-transform: uppercase;
  line-height: 1;
}
.advance__icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid var(--field-line);
  position: relative;
  transition: background var(--dur-hover) ease, border-color var(--dur-hover) ease, transform var(--dur-hover) ease;
}
/* downward chevron drawn from two borders */
.advance__icon::after {
  content: "";
  position: absolute;
  left: 50%; top: 46%;
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--plum);
  border-bottom: 1.5px solid var(--plum);
  transform: translate(-50%, -50%) rotate(45deg);
  transition: border-color var(--dur-hover) ease;
}
.advance:hover .advance__icon { background: var(--plum); border-color: var(--plum); transform: translateY(3px); }
.advance:hover .advance__icon::after { border-color: var(--hanji); }
.advance:hover .advance__label { color: var(--accent); }
.advance:active .advance__icon { transform: scale(.94); transition: transform var(--dur-press) ease-out; }

/* ---------------------------------------------------------------------------
   Trust row — the independence angle, the top concern for cold medical traffic.
   ------------------------------------------------------------------------- */
.trust {
  list-style: none;
  margin: clamp(3rem, 7vw, 5rem) 0 0;
  padding: clamp(2rem, 4vw, 2.75rem) 0 0;
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  grid-template-columns: 1fr;
}
.trust__head {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--plum);
  margin-bottom: .4rem;
}
.trust__body { font-size: var(--size-body-service); color: var(--muted); line-height: 1.7; }

/* About lower composition: image (+ note beneath) on the left, trust to the
   right on desktop; stacked on mobile. */
#about .about__prose { max-width: var(--measure-prose); }
.about__lower {
  margin-top: clamp(2rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 2.75rem);
}
.about__media { display: flex; flex-direction: column; gap: 1.25rem; }
#about .trust { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

/* ---------------------------------------------------------------------------
   Steps — the 4-step "How it works". Vertical spine on mobile.
   ------------------------------------------------------------------------- */
.steps {
  list-style: none;
  margin: clamp(2.5rem, 6vw, 4rem) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.5rem);
  grid-template-columns: 1fr;
}
.steps__item {
  padding-left: 3.5rem;
  position: relative;
}
.steps__num {
  position: absolute;
  left: 0; top: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--accent);
  letter-spacing: var(--track-number);
}
.steps__head {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--size-h3-service);
  color: var(--plum);
  margin-bottom: .5rem;
}
.steps__body { font-size: var(--size-body-service); color: var(--muted); line-height: 1.75; max-width: 46ch; }

/* ---------------------------------------------------------------------------
   Service picker — the accordion that doubles as the intent "quiz". Opening one
   collapses the others so the visitor focuses on their choice; the CTA carries
   the choice into the form (journey.js pre-selects "area of interest").
   ------------------------------------------------------------------------- */
.picker {
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--hairline);
}
.picker__item { border-bottom: 1px solid var(--hairline); }
.picker__head {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "title chev" "hint chev";
  align-items: center;
  gap: 0 1rem;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: clamp(1.25rem, 3vw, 1.75rem) 0;
  transition: padding-left var(--dur-row) var(--ease-reveal);
}
.picker__head:hover { padding-left: .5rem; }
.picker__title {
  grid-area: title;
  font-family: var(--font-display);
  font-size: var(--size-h3-service);
  color: var(--plum);
  line-height: 1.2;
}
.picker__hint {
  grid-area: hint;
  font-size: var(--size-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--micro);
  margin-top: .35rem;
}
.picker__chev {
  grid-area: chev;
  width: 1.5rem; height: 1.5rem;
  position: relative;
}
.picker__chev::before,
.picker__chev::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background: var(--plum);
  transition: transform var(--dur-row) var(--ease-reveal), opacity var(--dur-row) ease;
}
.picker__chev::before { width: 14px; height: 1.5px; transform: translate(-50%, -50%); }
.picker__chev::after  { width: 1.5px; height: 14px; transform: translate(-50%, -50%); }
.picker__head[aria-expanded="true"] .picker__chev::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }
.picker__head[aria-expanded="true"] .picker__title { color: var(--accent); }

/* grid-rows collapse animation — no fixed max-height guessing */
.picker__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-row) var(--ease-reveal);
}
.picker__panel.is-open { grid-template-rows: 1fr; }
.picker__inner { overflow: hidden; }
.picker__list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0 0 0 .1rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem 1.5rem;
  font-size: var(--size-body-service);
  color: var(--muted);
}
.picker__cta { margin-bottom: clamp(1.25rem, 3vw, 1.75rem); }

/* ---------------------------------------------------------------------------
   Right rail — the "different navigation bar on the side" (desktop). Vertical
   page links + section progress on the homepage. Hover/focus raises a soft
   purple focus-veil over the page and grows the hovered label.
   Hidden on touch / narrow screens, where the top header + drawer take over.
   ------------------------------------------------------------------------- */
.focus-veil {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(270deg,
              rgba(71, 42, 62, .55) 0%,
              rgba(71, 42, 62, .34) 26%,
              rgba(71, 42, 62, .06) 62%,
              rgba(71, 42, 62, 0) 100%);
  transition: opacity var(--dur-header) var(--ease-reveal);
}
.focus-veil.is-active { opacity: 1; }

.rail {
  position: fixed;
  top: 50%;
  right: clamp(1rem, 2.4vw, 2.25rem);
  transform: translateY(-50%);
  z-index: 45;
  display: none;                 /* shown only on fine pointers via MQ below */
  flex-direction: column;
  align-items: flex-end;
  gap: .1rem;
}
.rail__item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .8rem;
  padding: .55rem 0;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: none;
  text-align: right;
}
.rail__label {
  font-family: var(--font-body);
  font-size: var(--size-nav);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  line-height: 1;
  transform-origin: right center;
  transition: transform var(--dur-header) var(--ease-reveal), color var(--dur-header) ease;
}
.rail__tick {
  width: 1.5rem; height: 1px;
  background: var(--field-line);
  flex: none;
  transform-origin: right center;
  transition: transform var(--dur-header) var(--ease-reveal), background var(--dur-header) ease;
}
/* On hover of the whole rail the veil is up (added by rail.js); each item lifts
   its own label. The hovered item grows most; current section stays marked. */
.rail__item:hover .rail__label,
.rail__item:focus-visible .rail__label { color: var(--on-plum-strong); transform: scale(1.32); }
.rail__item:hover .rail__tick,
.rail__item:focus-visible .rail__tick { background: var(--on-plum-strong); transform: scaleX(1.6); }
.rail.is-lit .rail__label { color: var(--on-plum-soft); }
.rail.is-lit .rail__tick { background: var(--on-plum-faint); }
.rail__item.is-current .rail__label { color: var(--plum); font-weight: 500; }
.rail__item.is-current .rail__tick { background: var(--accent); transform: scaleX(1.4); }
.rail.is-lit .rail__item.is-current .rail__label { color: var(--on-plum-strong); }
.rail.is-lit .rail__item.is-current .rail__tick { background: var(--accent); }

/* ---------------------------------------------------------------------------
   Floating contact dock — persistent low-friction way to reach out from any
   page. WhatsApp / DM are PLACEHOLDERS (see js/config.js) falling back to email.
   ------------------------------------------------------------------------- */
.dock {
  position: fixed;
  right: clamp(1rem, 2.4vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 46;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .8rem 1.25rem;
  background: var(--plum);
  color: var(--on-plum-strong);
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(46, 32, 40, .28);
  font-size: var(--size-nav);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  transition: background var(--dur-hover) ease, transform var(--dur-hover) ease;
}
.dock:hover { background: var(--accent-hover); color: var(--on-plum-strong); transform: translateY(-2px); }
.dock:active { transform: scale(.96); transition: transform var(--dur-press) ease-out; }
.dock__dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--sage); flex: none; }
.dock__ph {
  position: absolute;
  bottom: calc(100% + .5rem);
  right: 0;
  white-space: nowrap;
  font-size: var(--size-micro);
  letter-spacing: var(--track-micro);
  color: var(--accent);
  background: var(--shell);
  border: 1px solid var(--hairline);
  padding: .25rem .5rem;
  border-radius: var(--radius);
}

/* ---------------------------------------------------------------------------
   Responsive — the rail is a desktop, fine-pointer affordance. On touch and
   narrow screens the existing top header + mobile drawer remain the nav, and
   the dock shrinks to an icon-free pill.
   ------------------------------------------------------------------------- */
.rail__sep {
  width: 1.5rem;
  height: 1px;
  background: var(--hairline);
  margin: .8rem 0;
  align-self: flex-end;
  transition: background var(--dur-header) ease;
}
.rail.is-lit .rail__sep { background: var(--on-plum-faint); }

@media (min-width: 60em) and (pointer: fine) {
  .rail { display: flex; }
  /* With the rail present, the desktop top-nav links are redundant — the rail
     is the wayfinding. Keep the wordmark; drop the duplicate link row. */
  .has-rail .nav-desktop { display: none; }

  /* Reserve a right gutter wider than the rail's footprint (~198px from the
     right edge) so content NEVER runs under the rail at rest. Backgrounds and
     the hero gradient stay full-bleed; only the content column insets. The
     hover focus-veil still sweeps over content on purpose — that's the reveal. */
  .has-rail { --rail-reserve: 13.5rem; }
  .has-rail .hero { padding-right: var(--rail-reserve); }
  .has-rail .section { padding-right: var(--rail-reserve); }
  .has-rail .guide__body { padding-right: var(--rail-reserve); }
}

/* Pre-fill highlight: when a service choice sets "Area of interest", flash the
   field so the hand-off from the picker to the form is visible, not silent. */
.field select.is-prefilled {
  animation: prefill-flash 1.6s var(--ease-reveal);
}
@keyframes prefill-flash {
  0%, 100% { background-color: transparent; }
  18%      { background-color: var(--jade-wash); }
}
@media (prefers-reduced-motion: reduce) {
  .field select.is-prefilled { animation: none; }
}

@media (max-width: 51.25em) {
  .picker__list { grid-template-columns: 1fr; }
  .trust { grid-template-columns: 1fr; }
  .dock { padding: .75rem 1.1rem; }
}

@media (min-width: 51.3125em) {
  .trust { grid-template-columns: repeat(2, 1fr); column-gap: clamp(1.5rem, 4vw, 3rem); }
  .steps { grid-template-columns: repeat(2, 1fr); column-gap: clamp(2rem, 5vw, 4rem); }
  .hero__actions { flex-direction: row; align-items: center; gap: 1.75rem; }
  /* Stacked variant keeps the "skip" link below the button on desktop too. */
  .hero__actions--stack { flex-direction: column; align-items: center; gap: 1.1rem; }

  /* About lower (v4 homepage): image on the left with the 아름다움 note beneath
     it, and the trust points to the right of the image. */
  #about .about__lower {
    grid-template-columns: minmax(0, 24rem) 1fr;
    align-items: start;
    column-gap: clamp(2rem, 5vw, 4rem);
  }
  #about .trust {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }
}

/* ---------------------------------------------------------------------------
   Guides — index listing + long-form article. The discovery engine: pages
   built to rank, be linked from Reddit/blogs, and read well when shared.
   ------------------------------------------------------------------------- */
.guides-intro__lede { max-width: 40ch; margin-top: 1.25rem; }

.guide-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: 1fr;
}
.guide-card {
  position: relative;
  border: 1px solid var(--hairline);
  background: var(--hanji);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: .75rem;
  transition: transform var(--dur-hover) ease, box-shadow var(--dur-hover) ease, border-color var(--dur-hover) ease;
}
.guide-card__link { display: flex; flex-direction: column; gap: .75rem; color: inherit; }
.guide-card:not(.is-soon):hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(46,32,40,.12); border-color: var(--field-line); }
.guide-card__tag {
  font-size: var(--size-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--accent);
}
.guide-card__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--size-h3-service);
  line-height: 1.2;
  color: var(--plum);
}
.guide-card__excerpt { font-size: var(--size-body-service); color: var(--muted); line-height: 1.7; }
.guide-card__more { font-size: var(--size-nav); letter-spacing: .04em; color: var(--accent); margin-top: .25rem; }
.guide-card__soon {
  font-size: var(--size-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--micro);
  margin-top: .25rem;
}
.guide-card.is-soon { background: transparent; opacity: .82; }

@media (min-width: 51.3125em) {
  .guide-grid { grid-template-columns: repeat(2, 1fr); }
  .guide-card--feature { grid-column: 1 / -1; }
  .guide-card--feature .guide-card__title { font-size: clamp(1.75rem, 3vw, 2.375rem); max-width: 22ch; }
}

/* ---- Article ---- */
.shell--prose { max-width: var(--measure-prose); }
.guide__head { padding-bottom: 0; }
.guide__crumbs {
  font-size: var(--size-nav);
  letter-spacing: .04em;
  color: var(--muted);
  margin-bottom: 1.5rem;
}
.guide__crumbs a { color: var(--accent); }
.guide__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.12;
  color: var(--plum);
  text-wrap: balance;
}
.guide__standfirst {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  line-height: 1.45;
  color: var(--muted);
  margin-top: 1.25rem;
}
.guide__meta {
  font-size: var(--size-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--micro);
  margin-top: 1.5rem;
}
.guide__body { padding-bottom: var(--section-y); }
.guide__body > p { font-size: var(--size-body-intro); line-height: var(--leading-body); color: var(--ink); margin-top: 1.5rem; }
.guide__body h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--size-h3-pillar);
  color: var(--plum);
  line-height: 1.2;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.guide__list { margin: 1.25rem 0 0; padding-left: 1.25rem; }
.guide__list li { font-size: var(--size-body-intro); line-height: 1.8; color: var(--ink); margin-bottom: .65rem; }
.guide__aside { font-size: var(--size-body-service); color: var(--micro); font-style: normal; margin-top: .75rem; }

.callout {
  margin: clamp(2rem, 4vw, 2.75rem) 0 0;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--jade-wash);
  border-left: 2px solid var(--sage);
}
.callout__label {
  font-size: var(--size-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--plum);
  margin-bottom: .5rem;
}
.callout p:last-child { font-size: var(--size-body-service); line-height: 1.75; color: var(--ink); }

.guide-cta {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding: clamp(2rem, 5vw, 3rem);
  background: var(--plum);
  color: var(--on-plum-strong);
  border-radius: var(--radius);
}
.guide-cta__kicker { font-size: var(--size-micro); letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--on-plum-quiet); }
.guide-cta__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--size-h3-pillar);
  line-height: 1.2;
  color: var(--on-plum-strong);
  margin: .75rem 0;
  text-wrap: pretty;
}
.guide-cta__body { color: var(--on-plum-soft); font-size: var(--size-body-service); line-height: 1.7; }
.guide-cta__actions { display: flex; align-items: center; gap: 1.5rem; margin-top: 1.75rem; flex-wrap: wrap; }
.guide-cta__actions .link-quiet { color: var(--on-plum-soft); border-color: var(--on-plum-faint); }
.guide-cta__actions .link-quiet:hover { color: var(--on-plum-strong); border-color: var(--on-plum-strong); }

.guide__disclaimer {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
  font-size: var(--size-body-service);
  color: var(--micro);
  line-height: 1.7;
}

/* Motion / transparency preferences ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .advance:hover .advance__icon,
  .advance:active .advance__icon { transform: none; }
  .rail__item:hover .rail__label,
  .rail__item:focus-visible .rail__label { transform: none; }
  .rail__item:hover .rail__tick,
  .rail__item:focus-visible .rail__tick { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .focus-veil { background: rgba(71, 42, 62, .5); }
}