/* Clinic landing — standalone visual layer, rewritten from scratch 2026-09-19.
   WHY: the page kept regressing to the light marketing skin because every change
   was patched into the shared stylesheet stack. This file owns its own token set
   scoped to .clinic-landing so the landing can hold a different visual register
   without touching styles.css.
   Reference study (roles and ratios only, no colour copied): flex.team — dark
   base, white text in alpha tiers, one accent, compact buttons, tight negative
   tracking; recatch.cc — paper-dominant middle band, oversized headings.
   Plan: docs/plans/2026-09-19-soomi-clinic-landing-fast.md */

.clinic-landing {
  /* surfaces */
  --cl-ink: #0a0e14;
  --cl-ink-raise: #131b26;
  --cl-hair: rgba(255, 255, 255, 0.1);
  --cl-hair-strong: rgba(255, 255, 255, 0.24);
  --cl-paper: #ffffff;
  --cl-paper-alt: #f3f6fb;
  /* text on dark */
  --cl-d1: rgba(255, 255, 255, 0.96);
  --cl-d2: rgba(255, 255, 255, 0.66);
  --cl-d3: rgba(255, 255, 255, 0.44);
  /* text on paper */
  --cl-l1: #0b1420;
  --cl-l2: #47566b;
  --cl-l3: #78859a;
  --cl-rule: #e2e8f1;
  /* brand accent, two lightnesses so one hue survives both bases */
  --cl-brand: #245fc5;
  --cl-brand-press: #19499d;
  --cl-brand-lift: #63a6ff;
  --cl-brand-wash: #e9f1fd;
  /* scale */
  --cl-s1: 4px;
  --cl-s2: 8px;
  --cl-s3: 12px;
  --cl-s4: 16px;
  --cl-s5: 24px;
  --cl-s6: 32px;
  --cl-s7: 48px;
  --cl-s8: 64px;
  --cl-s9: 96px;
  --cl-s10: 128px;
  --cl-r-sm: 8px;
  --cl-r-md: 12px;
  --cl-r-lg: 20px;
  --cl-r-pill: 999px;
  --cl-serif: "Soomi Editorial", Georgia, serif;
  background: var(--cl-ink);
}

.clinic-page,
.clinic-landing main:has(> .legal-page) {
  background: var(--cl-paper);
}
.cl-wrap {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 40px;
}
.clinic-page .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── header ────────────────────────────────────────────────────────── */

.clinic-landing .site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  height: auto;
  border: 0;
  border-bottom: 1px solid rgba(11, 20, 32, 0.1);
  border-radius: 0;
  background: var(--cl-paper);
  box-shadow: none;
}
.clinic-landing .header-inner {
  max-width: 1280px;
  min-height: 60px;
  margin-inline: auto;
  padding: 10px 40px;
  gap: 32px;
}
.clinic-landing #navigation {
  display: flex;
  position: static;
  flex: 1;
  margin-left: auto;
  padding: 0;
  gap: 24px;
  border: 0;
  background: transparent;
  box-shadow: none;
  align-items: center;
  justify-content: space-between;
  overflow: visible;
}
.clinic-landing #menu-button,
.clinic-landing .header-cta {
  display: none;
}
.clinic-landing .brand {
  width: 208px;
  min-width: 52px;
  flex-shrink: 1;
}
/* White header: the wordmark PNG is blue-on-near-white, so it is used as shipped
   with no filter or blend. The earlier dark header needed both and still showed
   a grey plate (2026-09-19). */
/* `multiply` drops the PNG's near-white plate into the white header while the
   blue letters stay exactly as drawn. Without it the #f8f8f8 plate shows as a
   pale rectangle against the pure-white bar. */
.clinic-landing .brand img {
  width: 100%;
  height: auto;
  filter: none;
  mix-blend-mode: multiply;
}
.cl-nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  margin: auto;
}
.cl-nav-links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--cl-l2);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.cl-nav-links a:hover {
  color: var(--cl-l1);
}

/* ── buttons ───────────────────────────────────────────────────────── */

.clinic-landing [data-form="clinic-consult"],
#clinic-consult-form .button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  padding: 11px 20px;
  border: 0;
  border-radius: var(--cl-r-md);
  background: var(--cl-brand);
  color: #fff;
  font: 700 14px/1.4 var(--display);
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
  transition: background 0.16s ease;
}
.clinic-landing [data-form="clinic-consult"]:hover,
#clinic-consult-form .button:not(:disabled):hover {
  background: var(--cl-brand-press);
}
/* On the dark closing band the primary inverts to paper, as both references do.
   The header is white, so it keeps the filled brand button. */
.cl-consult [data-form] {
  background: #fff;
  color: var(--cl-ink);
}
.cl-consult [data-form]:hover {
  background: var(--cl-brand-wash);
}
.cl-consult [data-form] {
  min-height: 52px;
  padding: 15px 28px;
  font-size: 16px;
}

/* ── hero ──────────────────────────────────────────────────────────── */

.cl-hero {
  /* One size for the headline, shared with the mark's overlap below. 10% under the
     first pass (review, 2026-09-19). */
  --cl-h1: clamp(34px, 5vw, 68px);
  position: relative;
  background: var(--cl-ink);
  padding: 148px 0 var(--cl-s9);
  overflow: hidden;
}
/* Hero mark: the logo's infinity loop as a soft band of light with stars along it
   (heroMark() in clinic-landing.js). It sits in the flow under the headline and is
   pulled up so its top half runs behind the last headline line; the rest shows in
   the gap above the question box. Review history is in the script comment. */
.cl-hero-mark {
  position: relative;
  z-index: 0;
  display: block;
  /* One proportion for every screen (review, 2026-09-19: huge on a PC, fine on a
     phone — a fixed pixel width cannot be right for both). The loop is sized from
     the headline itself: 5em wide, about four fifths of the last line (~6.4em), so
     it reads the same on a phone and on a desktop. It is pulled up by the flex gap
     plus half its own height (800:300 viewBox → 0.94em), so it sits half behind
     the last line and half above the question box. */
  width: calc(var(--cl-h1) * 5);
  max-width: 100%;
  height: auto;
  margin: calc(-1 * (var(--cl-s5) + var(--cl-h1) * 0.94)) auto 0;
  pointer-events: none;
  overflow: visible;
}
/* Second pass (review, 2026-09-19): "more subtle". The loop is a hint of light,
   not a drawn logo — every layer sits at roughly half its first opacity. */
.cl-mark-haze {
  fill: none;
  stroke: url(#cl-mark-ink);
  stroke-width: 40;
  opacity: 0.22;
}
.cl-mark-soft {
  fill: none;
  stroke: url(#cl-mark-ink);
  stroke-width: 9;
  opacity: 0.24;
}
.cl-mark-line {
  fill: none;
  stroke: url(#cl-mark-ink);
  stroke-width: 1.2;
  opacity: 0.34;
}
.cl-mark-star {
  fill: rgba(214, 232, 255, 0.5);
}
.cl-mark-far {
  fill: rgba(170, 205, 255, 0.26);
}
.cl-mark-bright {
  fill: rgba(255, 255, 255, 0.85);
  filter: drop-shadow(0 0 4px rgba(140, 190, 255, 0.7));
  animation: cl-mark-twinkle 3.4s ease-in-out 8;
}
/* A few faint stars above and around the headline, so the top of the hero is not
   flat either. Static, painted as tiny gradients — nothing to load, nothing moving. */
.cl-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 420px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1.6px 1.6px at 9% 22%, rgba(255, 255, 255, 0.75), transparent 100%),
    radial-gradient(1.2px 1.2px at 17% 58%, rgba(190, 215, 255, 0.6), transparent 100%),
    radial-gradient(1.8px 1.8px at 26% 14%, rgba(255, 255, 255, 0.6), transparent 100%),
    radial-gradient(1.1px 1.1px at 34% 40%, rgba(190, 215, 255, 0.5), transparent 100%),
    radial-gradient(1.4px 1.4px at 43% 9%, rgba(255, 255, 255, 0.7), transparent 100%),
    radial-gradient(1.1px 1.1px at 52% 27%, rgba(190, 215, 255, 0.45), transparent 100%),
    radial-gradient(1.7px 1.7px at 61% 12%, rgba(255, 255, 255, 0.65), transparent 100%),
    radial-gradient(1.2px 1.2px at 69% 47%, rgba(190, 215, 255, 0.55), transparent 100%),
    radial-gradient(1.5px 1.5px at 78% 19%, rgba(255, 255, 255, 0.7), transparent 100%),
    radial-gradient(1.1px 1.1px at 85% 62%, rgba(190, 215, 255, 0.5), transparent 100%),
    radial-gradient(1.9px 1.9px at 92% 30%, rgba(255, 255, 255, 0.6), transparent 100%),
    radial-gradient(1.2px 1.2px at 96% 8%, rgba(190, 215, 255, 0.55), transparent 100%),
    radial-gradient(1.3px 1.3px at 4% 70%, rgba(190, 215, 255, 0.45), transparent 100%),
    radial-gradient(1.4px 1.4px at 57% 66%, rgba(255, 255, 255, 0.4), transparent 100%);
}
.cl-mark-bright-1 {
  animation-delay: 1.1s;
}
.cl-mark-bright-2 {
  animation-delay: 2.2s;
}
@keyframes cl-mark-twinkle {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cl-mark-bright {
    animation: none;
  }
}
.cl-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Review (2026-09-19): the hero read as one flat black slab. The ink stays at
     the top for the headline, then opens into brand blue behind the question box
     and the answer panel — a horizon, the way the references end their heroes in
     colour. No scrim is needed over the headline: the drawn field is masked out
     there already. */
  /* Positioned in px from the top, not in %: the hero is far taller than the
     viewport, so a %-anchored glow landed below the fold and the first screen
     stayed black. */
  background:
    radial-gradient(1200px 560px at 62% 600px, rgba(36, 95, 197, 0.72) 0%, rgba(30, 74, 160, 0.4) 42%, rgba(18, 40, 90, 0) 76%),
    radial-gradient(58% 420px at 16% 120px, rgba(38, 92, 190, 0.3) 0%, rgba(38, 92, 190, 0) 68%),
    linear-gradient(180deg, rgba(10, 14, 20, 0) 0, rgba(13, 32, 72, 0.9) 640px, rgba(16, 42, 92, 1) 100%);
}
.cl-hero > * {
  position: relative;
  z-index: 1;
}
/* Centred, like the references the page is measured against. */
.cl-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cl-s5);
  text-align: center;
}
.cl-hero-inner > :not(.cl-hero-mark) {
  position: relative;
  z-index: 1;
}
/* Who this is for, in brand blue and without the dot marker (review, 2026-09-19).
   --cl-brand-lift is the blue tuned for the dark base. */
.cl-audience {
  margin: 0;
  color: var(--cl-brand-lift);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.005em;
  word-break: keep-all;
}

.cl-hero-stage {
  margin-top: var(--cl-s5);
}
.cl-hero h1 {
  margin: 0;
  font-size: var(--cl-h1);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.038em;
  color: var(--cl-d1);
}

/* ── section rhythm ────────────────────────────────────────────────── */

.cl-section {
  padding-block: 88px;
  scroll-margin-top: 88px;
}
.cl-kicker {
  display: block;
  margin: 0 0 var(--cl-s4);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cl-brand);
}
.clinic-page h2 {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 50px);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.034em;
  color: var(--cl-l1);
}
.clinic-page h3 {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.028em;
  color: var(--cl-l1);
}
.clinic-page p,
.clinic-page li,
.clinic-page dd {
  overflow-wrap: break-word;
}
.cl-caption {
  font-size: 13px;
  line-height: 1.7;
  color: var(--cl-l3);
}

.cl-lead {
  margin: var(--cl-s5) 0 0;
  max-width: 56ch;
  font-size: 17px;
  line-height: 1.72;
  color: var(--cl-l2);
}
.cl-example-notice {
  margin: var(--cl-s4) 0 0;
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.75;
  color: var(--cl-l3);
}
/* ── signal: the scene from the 60-second film ─────────────────────────
   The one motion sequence on the page (marketing rule: one proof sequence).
   Card colours are the film's own (usageCard in its build.cjs), kept so the
   page and the film show the same object. */

/* One connected story (2026-09-19 review: the signal scene standing alone, then
   two product sections, did not read as a story). Problem → 수미 asks → 케어루프
   raises it → staff call. Each step is copy beside the screen that does it, joined
   by one numbered rail so it reads top to bottom as a single flow. */
.cl-story-head h2 {
  max-width: 16ch;
}
.cl-steps {
  display: grid;
  gap: var(--cl-s8);
  margin: var(--cl-s7) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.cl-step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: var(--cl-s8);
  padding-left: var(--cl-s8);
  counter-increment: step;
}
.cl-step::before {
  content: "0" counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cl-brand);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cl-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 16px;
  top: 42px;
  bottom: calc(var(--cl-s8) * -1 + 8px);
  width: 2px;
  background: var(--cl-rule);
}
.cl-step-tag {
  margin: 0 0 var(--cl-s3);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cl-brand);
}
.cl-step-copy > p:not(.cl-step-tag) {
  margin: var(--cl-s4) 0 0;
  max-width: 44ch;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--cl-l2);
  word-break: keep-all;
}
.cl-step-visual {
  min-width: 0;
}
.cl-step .screen-gallery {
  grid-template-columns: 1fr;
}
.cl-step .product-preview-console {
  border: 1px solid var(--cl-rule);
  box-shadow: 0 14px 36px rgba(12, 28, 60, 0.1);
}
.cl-step .product-preview-phone {
  width: 250px;
}
/* The step copy already says what each screen is; its caption stays for screen
   readers only. */
.cl-step .screen-example figcaption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* The product's English menu names mean nothing to a first-time visitor. */
.clinic-page .preview-current-menu {
  display: none;
}
.cl-signal-action {
  margin-top: var(--cl-s6);
}
.cl-usage-card {
  padding: var(--cl-s5) var(--cl-s5) var(--cl-s4);
  border: 1px solid #c7d7f1;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(23, 63, 121, 0.09);
}
.cl-uc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--cl-s3);
  min-height: 62px;
}
.cl-uc-head p {
  margin: 0;
}
.cl-uc-head p > span:first-child {
  display: block;
  font-size: 12.5px;
  color: #626979;
}
.cl-uc-head strong {
  display: block;
  margin-top: 2px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #111318;
}
.cl-uc-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.cl-uc-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}
.cl-uc-pass {
  background: #eaf3ef;
  color: #226142;
}
.cl-uc-risk {
  background: #fbecef;
  color: #9b263d;
}
.cl-uc-chart {
  display: block;
  width: 100%;
  height: auto;
  margin-top: var(--cl-s3);
}
.cl-uc-grid {
  stroke: #dce3ed;
  stroke-width: 1;
}
.cl-uc-axis {
  fill: #626979;
  font-size: 15px;
}
rect.cl-uc-bar {
  fill: #6b94d8;
}
rect.cl-uc-short {
  fill: #d94452;
}
.cl-uc-miss rect {
  fill: #d94452;
  opacity: 0.09;
}
.cl-uc-miss circle {
  fill: #d94452;
}
.cl-uc-trend {
  stroke: #173f79;
  stroke-width: 4;
  stroke-dasharray: 9 7;
  stroke-linecap: round;
}
.cl-uc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--cl-s5);
  margin: var(--cl-s2) 0 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  color: #626979;
}
.cl-uc-legend li::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  border-radius: 3px;
  vertical-align: -1px;
  background: #6b94d8;
}
.cl-uc-legend .cl-uc-key-short::before {
  background: #d94452;
}
.cl-uc-legend .cl-uc-key-trend::before {
  height: 0;
  width: 18px;
  border-radius: 0;
  border-top: 3px dashed #173f79;
  background: none;
  vertical-align: 3px;
}
/* Armed by setupClinicSignal(); plays once when the card is really on screen.
   Without the script, and under prefers-reduced-motion (the script does not
   arm), everything above is simply visible. */
.cl-signal.is-armed .cl-uc-bar {
  opacity: 0;
  transform: scaleY(0.02);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cl-signal.is-armed .cl-uc-pass,
.cl-signal.is-armed .cl-uc-risk,
.cl-signal.is-armed .cl-uc-trend {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.cl-signal.is-armed .cl-uc-trend {
  transform: none;
  transition: opacity 0.9s ease;
}
.cl-signal.is-live .cl-uc-bar {
  opacity: 1;
  transform: none;
}
.cl-signal.is-live .cl-uc-miss rect {
  opacity: 0.09;
}
.cl-signal.is-live .cl-uc-pass,
.cl-signal.is-live .cl-uc-risk,
.cl-signal.is-live .cl-uc-trend {
  opacity: 1;
  transform: none;
}
.cl-signal.is-live .cl-uc-pass {
  transition-delay: 1.5s;
}
.cl-signal.is-live .cl-uc-trend {
  transition-delay: 2.5s;
}
.cl-signal.is-live .cl-uc-risk {
  transition-delay: 3.5s;
}

/* ── patient-guidance section: copy beside the live 수미 screens ─────── */

.cl-product {
  background: var(--cl-paper-alt);
  border-top: 1px solid var(--cl-rule);
}
.cl-duo {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: var(--cl-s8);
}
.cl-duo h2 {
  font-size: clamp(26px, 2.8vw, 40px);
}
.cl-duo .screen-gallery {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cl-s5);
  max-width: 560px;
  margin-inline: auto;
}
.cl-duo .product-preview-phone {
  width: 220px;
}
.cl-duo-visual .cl-example-notice {
  margin: var(--cl-s5) auto 0;
  max-width: 560px;
  text-align: center;
}
.cl-human {
  margin: var(--cl-s5) 0 0;
}
.cl-human dt {
  font-size: 15px;
  font-weight: 700;
  color: var(--cl-brand);
}
.cl-human dd {
  margin: 6px 0 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--cl-l2);
  word-break: keep-all;
}
.cl-story > .cl-example-notice {
  margin-top: var(--cl-s7);
}

/* ── consult (dark close) ──────────────────────────────────────────── */

.cl-consult {
  background: var(--cl-ink);
  padding-block: var(--cl-s10);
  border-top: 1px solid var(--cl-hair);
}
.cl-consult .cl-kicker {
  color: var(--cl-brand-lift);
}
.cl-consult h2 {
  max-width: 20ch;
  font-size: clamp(30px, 4vw, 58px);
  color: var(--cl-d1);
}
.cl-consult h2 + p {
  margin: var(--cl-s6) 0 0;
  max-width: 68ch;
  font-size: 17px;
  line-height: 1.85;
  color: var(--cl-d2);
  word-break: keep-all;
}
#clinic-proof {
  scroll-margin-top: 96px;
}
.cl-consult .button {
  margin: var(--cl-s7) 0 var(--cl-s4);
}
.cl-consult .cl-caption {
  color: var(--cl-d3);
}

/* ── focus ─────────────────────────────────────────────────────────── */

.clinic-landing :focus-visible {
  outline: 3px solid var(--cl-brand);
  outline-offset: 3px;
}
.cl-consult :focus-visible,
.cl-hero :focus-visible {
  outline-color: var(--cl-brand-lift);
}

/* ── footer overrides (legal pages use this class too) ─────────────── */

.clinic-landing #footer {
  background: var(--cl-ink);
  border-top: 1px solid var(--cl-hair);
  border-radius: 0;
}
.clinic-landing #footer [data-form] {
  margin-block: var(--cl-s2);
}
.clinic-landing #footer a {
  min-height: 44px;
}
.clinic-landing #footer .ft-social a {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  line-height: 1;
}
.clinic-landing #footer .ft-social svg {
  display: block;
  width: 20px;
  height: 20px;
  flex: none;
}
.clinic-landing #footer .ft-inner > *,
.clinic-landing #footer .ft-nav-group {
  min-width: 0;
  overflow-wrap: anywhere;
}
.clinic-landing #footer .ft-logo {
  max-width: 100%;
}
.clinic-landing .sleep-local-path {
  overflow-wrap: anywhere;
}

/* ── tablet ────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .cl-wrap {
    padding-inline: 28px;
  }
  .clinic-landing .header-inner {
    padding-inline: 28px;
  }
  .cl-section {
    padding-block: var(--cl-s9);
  }
  .cl-step,
  .cl-duo {
    grid-template-columns: 1fr;
    gap: var(--cl-s6);
  }
  .cl-story-head h2 {
    max-width: none;
  }
}

/* ── phone ─────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .clinic-landing .header-inner {
    padding: 8px 20px;
    min-height: 56px;
    flex-wrap: nowrap;
    gap: 12px;
  }
  .clinic-landing .brand {
    width: 152px;
  }
  .clinic-landing #navigation {
    flex: 1;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 8px;
  }
  /* Phone header: logo · 도입 문의 · three-line menu (review, 2026-09-19 — the
     section links had simply disappeared on phones). The button and its open/close,
     Escape and link-click behaviour are the site's own (#menu-button, setMenu in
     app.js); only the landing's layout is set here. The CTA stays in the bar, the
     links drop down under it. */
  .clinic-landing #menu-button {
    order: 3;
    display: flex;
    flex: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--cl-r-sm);
    background: transparent;
    cursor: pointer;
  }
  .clinic-landing #menu-button span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--cl-l1);
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .clinic-landing #menu-button[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .clinic-landing #menu-button[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  .clinic-landing #menu-button[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  .clinic-landing #navigation .cl-nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 4px 20px 12px;
    background: var(--cl-paper);
    border-bottom: 1px solid var(--cl-rule);
    box-shadow: 0 18px 30px rgba(11, 20, 32, 0.12);
  }
  .clinic-landing #navigation.open .cl-nav-links {
    display: flex;
  }
  .clinic-landing #navigation .cl-nav-links a {
    min-height: 52px;
    border-top: 1px solid var(--cl-rule);
    font-size: 16px;
    font-weight: 600;
    color: var(--cl-l1);
  }
  .clinic-landing #navigation .cl-nav-links a:first-child {
    border-top: 0;
  }
  .clinic-landing #navigation .button {
    padding: 9px 14px;
    min-height: 44px;
    font-size: 13px;
  }
  .cl-wrap {
    padding-inline: 20px;
  }
  .cl-hero {
    padding: 104px 0 var(--cl-s7);
  }
  /* Same loop, same proportion; only the flex gap above it is smaller here. */
  .cl-hero-mark {
    margin-top: calc(-1 * (var(--cl-s4) + var(--cl-h1) * 0.94));
  }
  /* The phone hero is tall and narrow, so the blue horizon starts higher: it
     reaches up behind the question box instead of staying under the panel. */
  .cl-hero::after {
    background:
      radial-gradient(620px 460px at 70% 520px, rgba(36, 95, 197, 0.78) 0%, rgba(30, 74, 160, 0.42) 44%, rgba(18, 40, 90, 0) 78%),
      linear-gradient(180deg, rgba(10, 14, 20, 0) 0, rgba(13, 32, 72, 0.92) 520px, rgba(16, 42, 92, 1) 100%);
  }
  .cl-hero-inner {
    gap: var(--cl-s4);
  }
  .cl-audience {
    font-size: 13.5px;
  }
  .cl-hero h1 {
    max-width: 100%;
    letter-spacing: -0.03em;
  }
  .cl-hero-stage {
    margin-top: var(--cl-s4);
  }
  .cl-section {
    padding-block: var(--cl-s8);
  }
  .cl-steps {
    gap: var(--cl-s8);
    margin-top: var(--cl-s7);
  }
  .cl-step {
    padding-left: 0;
    padding-top: 46px;
  }
  .cl-step:not(:last-child)::after {
    display: none;
  }
  .cl-step .product-preview-phone {
    width: 220px;
  }
  .cl-duo .product-preview-phone {
    width: 150px;
  }
  .cl-duo .screen-gallery {
    gap: var(--cl-s4);
  }
  .cl-usage-card {
    padding: var(--cl-s4);
  }
  .cl-uc-badges {
    justify-content: flex-start;
  }
  .cl-uc-axis {
    font-size: 19px;
  }
  .cl-consult {
    padding-block: var(--cl-s8);
  }
  .cl-consult .button {
    margin-top: var(--cl-s6);
  }
  .clinic-landing #footer .ft-info {
    font-size: 13px;
  }
  .clinic-landing #footer .ft-inner,
  .clinic-landing #footer .ft-nav {
    grid-template-columns: minmax(0, 1fr);
  }
  .clinic-landing #footer .ft-nav-group ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container (max-width: 700px) {
  .clinic-landing .cl-nav-links {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:has(.clinic-page) {
    scroll-behavior: auto;
  }
  .clinic-page * {
    animation: none !important;
    transition: none !important;
  }
}