@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@300;400;500;600;700&display=swap");

html { scroll-behavior: auto; }
body { margin: 0; min-height: 100vh; }
.heer-glyph { display: inline-grid; min-width: 15px; place-items: center; line-height: 1; font-style: normal; }

:root {
  --cream: #f5f2f0;
  --paper: #fffdfb;
  --surface: #f9f5f2;
  --terracotta: #905e4e;
  --rust: #854e3c;
  --dark: #302824;
  --muted: #6b5f59;
  --line: #d6c6b8;
  --heer-page-gradient: linear-gradient(
    135deg,
    #FFFDFB 0%,
    #FCF7F3 50%,
    #FAF3EE 100%
  );
}

body { background: var(--paper); }
.identity-section,
.why-process,
.medical-services,
.partners-section,
.news-section { background: var(--heer-page-gradient) !important; }
.before-after { background: #f3eee9 !important; }

.hero-review > [hidden] { display: none !important; }
.hero-review > .partners-section:not([hidden]),
.hero-review > .news-section:not([hidden]) { display: block !important; }
.tab-page {
  position: relative;
  min-height: max(calc(100svh - 92px), 760px);
  scroll-margin-top: 92px;
  overflow: hidden;
}
.tab-page-item {
  position: relative;
  z-index: 2;
  transform-origin: center;
}
.tab-page .news-grid { position: relative; z-index: 2; }
.tab-page > .company-layout-toolbar { z-index: 6; }

.partners-section {
  padding: clamp(76px, 8vw, 126px) clamp(28px, 7vw, 118px) clamp(84px, 9vw, 132px);
}
.partner-hero {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  gap: clamp(42px, 8vw, 130px);
  align-items: end;
  max-width: 1440px;
  margin: 0 auto clamp(54px, 6vw, 88px);
}
.partner-heading .eyebrow {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 22px;
  color: var(--rust);
  letter-spacing: .16em;
}
.partner-heading .eyebrow::before { content: ""; width: 54px; height: 1px; background: currentColor; }
.partner-heading h2 {
  margin: 0;
  color: var(--dark);
  font-family: var(--font-editorial);
  font-size: clamp(46px, 5vw, 78px);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: 1.22;
}
.partner-lead {
  padding: 0 0 10px clamp(26px, 3vw, 48px);
  border-left: 1px solid rgba(133,78,60,.38);
}
.partner-lead span { color: var(--rust); font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.partner-lead p { max-width: 390px; margin: 22px 0 0; color: var(--muted); font-size: 15px; line-height: 1.9; }
.partner-network-grid {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 24px;
  max-width: 1440px;
  margin: 0 auto;
}
.partner-clinic-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 240px);
  gap: 24px;
  align-items: stretch;
}
.partner-network-panel {
  overflow: hidden;
  border: 1px solid rgba(133,78,60,.22);
  border-radius: 4px;
  background: rgba(255,253,251,.78);
}
.partner-network-panel > header {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  min-height: 70px;
  padding: 0 clamp(24px, 3vw, 48px);
  border-bottom: 1px solid rgba(133,78,60,.18);
}
.partner-network-panel > header span { color: var(--rust); font-size: 11px; letter-spacing: .12em; }
.partner-network-panel > header h3 { margin: 0; font-family: var(--font-editorial); font-size: 20px; font-weight: 500; }
.partner-network-panel > header small { color: #927b70; font-size: 9px; letter-spacing: .17em; }
.partner-logo-grid { display: grid; background: rgba(255,255,255,.3); }
.partner-hospital-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.partner-clinic-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.partner-logo-card {
  position: relative;
  display: grid;
  min-height: 190px;
  place-items: center;
  align-content: center;
  gap: 22px;
  padding: 34px 28px 24px;
  border-right: 1px solid rgba(133,78,60,.14);
  border-bottom: 1px solid rgba(133,78,60,.14);
  background: rgba(255,253,251,.9);
  transition: background-color .2s ease;
}
.partner-logo-card:hover { background: #fff; }
.partner-logo-card img { display: block; width: min(100%, 290px); height: 82px; object-fit: contain; }
.partner-logo-card span { color: #8a786f; font-size: 10px; letter-spacing: .04em; }
.partner-card-heer { gap: 8px; background: rgba(255,253,251,.9); }
.partner-card-heer img { width: auto; max-width: 96px; height: 104px; }
.partner-card-heer em {
  color: var(--rust);
  font-family: var(--font-body);
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .18em;
}
.partner-summary {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 100%;
  padding: 34px 26px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 28px;
  border-left: 1px solid rgba(133,78,60,.28);
}
.partner-count {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: var(--rust);
}
.partner-count strong { font-family: var(--font-editorial); font-size: 48px; font-weight: 400; letter-spacing: -.05em; }
.partner-count sup { font-family: var(--font-body); font-size: 16px; }
.partner-count span { font-size: 9px; line-height: 1.7; letter-spacing: .17em; }
.partners-section .partner-note {
  position: relative;
  z-index: 2;
  margin: 0;
  color: #8b7a72;
  font-size: 11px;
  line-height: 1.8;
  text-align: center;
}

.news-section {
  isolation: isolate;
  padding: clamp(78px, 8vw, 126px) clamp(26px, 7vw, 112px) clamp(96px, 10vw, 150px);
}
.news-section::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(72vw, 1040px);
  height: min(58vw, 720px);
  right: -14vw;
  top: 10%;
  border: 1px solid rgba(133,78,60,.18);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 42%, rgba(255,255,255,.82), rgba(225,204,190,.23) 55%, rgba(255,255,255,0) 72%);
  transform: rotate(-12deg);
}
.news-section > .section-heading { position: relative; z-index: 2; max-width: 1440px; margin: 0 auto clamp(46px, 5vw, 72px); }
.news-section > .section-heading h2 { font-family: var(--font-editorial); font-size: clamp(54px, 6vw, 88px); font-weight: 400; letter-spacing: -.04em; }
.news-section .news-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
  max-width: 1440px;
  margin: 0 auto;
  align-items: start;
}
.news-section .news-grid article {
  position: relative;
  overflow: hidden;
  padding: 12px;
  border: 1px solid rgba(133,78,60,.16);
  border-radius: 18px;
  background: rgba(255,253,251,.96);
  box-shadow: 0 28px 64px rgba(79,47,34,.18), 0 8px 18px rgba(79,47,34,.09);
}
.news-section .news-grid article:nth-child(2) { margin-top: 42px; }
.news-section .news-grid article:nth-child(3) { margin-top: 12px; }
.news-card-image {
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 11px;
  background: #f5eeea;
}
.news-section .news-grid .news-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.news-card-copy { padding: 24px 10px 12px; }
.news-card-copy p {
  margin: 0 0 10px;
  color: var(--rust);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
}
.news-card-copy h3 {
  min-height: 58px;
  margin: 0;
  color: var(--dark);
  font-family: var(--font-editorial);
  font-size: clamp(20px, 1.8vw, 28px);
  font-weight: 500;
  line-height: 1.45;
}
.news-card-copy button {
  display: flex;
  width: 100%;
  margin-top: 22px;
  padding: 15px 0 4px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(133,78,60,.22);
  color: #5f4b43;
  cursor: pointer;
  font-size: 12px;
}
.news-card-copy button:hover { color: var(--rust); }
.news-section > footer {
  position: relative;
  z-index: 2;
  display: flex;
  max-width: 1440px;
  margin: 72px auto 0;
  padding-top: 24px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(133,78,60,.24);
  color: #806d64;
  font-size: 11px;
}
.news-section > footer > div { display: flex; align-items: center; gap: 18px; }

.news-detail-overlay {
  position: fixed;
  z-index: 120;
  display: grid;
  padding: clamp(18px, 4vw, 54px);
  place-items: center;
  inset: 0;
  background: rgba(39,29,25,.74);
  backdrop-filter: blur(8px);
}
.hero-review > .news-detail-overlay { display: grid !important; }
.news-detail-dialog {
  position: relative;
  display: grid;
  overflow: hidden;
  grid-template-columns: minmax(0, 1.22fr) minmax(360px, .78fr);
  width: min(1180px, 100%);
  max-height: calc(100svh - clamp(36px, 8vw, 108px));
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 22px;
  background: #fffdfb;
  box-shadow: 0 36px 100px rgba(22,13,10,.34);
}
.news-detail-close {
  position: absolute;
  z-index: 3;
  display: grid;
  width: 42px;
  height: 42px;
  top: 18px;
  right: 18px;
  place-items: center;
  border: 1px solid rgba(133,78,60,.25);
  border-radius: 50%;
  background: rgba(255,253,251,.94);
  color: var(--dark);
  cursor: pointer;
  font-size: 23px;
}
.news-detail-visual {
  overflow: auto;
  padding: clamp(20px, 3vw, 42px);
  background: linear-gradient(135deg, #f8efed, #fffdfb 58%, #f4e5e2);
}
.news-detail-visual img {
  display: block;
  width: min(100%, 640px);
  height: auto;
  margin: 0 auto;
  border-radius: 14px;
  box-shadow: 0 22px 54px rgba(79,47,34,.16);
}
.news-detail-copy {
  display: flex;
  padding: clamp(62px, 6vw, 94px) clamp(30px, 4vw, 58px) 48px;
  justify-content: center;
  flex-direction: column;
  border-left: 1px solid rgba(133,78,60,.16);
}
.news-detail-copy > p {
  margin: 0 0 18px;
  color: var(--rust);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
}
.news-detail-copy h2 {
  margin: 0;
  color: var(--dark);
  font-family: var(--font-editorial);
  font-size: clamp(30px, 2.8vw, 44px);
  font-weight: 400;
  line-height: 1.3;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.news-detail-placeholder {
  display: grid;
  margin-top: 52px;
  padding-top: 26px;
  gap: 10px;
  border-top: 1px solid rgba(133,78,60,.22);
}
.news-detail-placeholder strong { color: #584841; font-size: 15px; font-weight: 500; }
.news-detail-placeholder span { color: #8b7a72; font-size: 12px; line-height: 1.8; }

.legal-footer {
  position: relative;
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(220px, 1.1fr) minmax(260px, 1.6fr) auto;
  gap: 22px 44px;
  align-items: start;
  padding: 38px clamp(28px, 6vw, 96px) 30px;
  color: #66564f;
  border-top: 1px solid rgba(133,78,60,.22);
  background: #f1e9e3;
  font-size: 10px;
}
.hero-review > .legal-footer { display: grid !important; }
.legal-footer-brand strong { color: var(--rust); font-family: var(--font-editorial); font-size: 18px; font-weight: 500; letter-spacing: .08em; }
.legal-footer-brand p { margin: 10px 0 0; line-height: 1.7; }
.legal-footer-links { display: flex; gap: 28px; }
.legal-footer-links a { color: var(--dark); font-size: 12px; font-weight: 600; text-decoration: none; }
.legal-footer-links a:hover,
.legal-footer-links a:focus-visible { color: var(--rust); text-decoration: underline; text-underline-offset: 5px; }
.legal-footer-contact { display: grid; justify-items: end; gap: 7px; white-space: nowrap; }
.legal-footer-pending { grid-column: 1 / 3; margin: 0; color: #8b7a72; line-height: 1.7; }
.legal-footer > small { justify-self: end; color: #8b7a72; }

.opening-screen .language-list.layout-item {
  width: min(1080px, 78vw);
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(10px, 1.5vw, 22px);
}
.hero-review .flag-zh { background: #de2910; }
.hero-review .flag-zh .flag-icon {
  object-fit: contain;
  object-position: center;
  background: #de2910;
}

.hero-review > .before-after {
  display: block;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
.before-scene.before-layout-item {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  aspect-ratio: 1672 / 941;
  margin: 0;
  transform-origin: center;
}
.before-reference-image {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1672 / 941;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}
.before-copy {
  z-index: 4;
  box-sizing: border-box;
  margin: 0;
  color: #35251f;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.before-copy-eyebrow {
  color: #744931;
  font-family: var(--font-body);
  font-size: clamp(12px, 1.42vw, 24px);
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.25;
}
.before-copy-title {
  font-family: var(--font-editorial);
  font-size: clamp(42px, 5vw, 84px);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: 1.25;
}
.before-copy-description {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.48vw, 25px);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.75;
}
.before-copy-prompt {
  color: #3f3029;
  font-family: var(--font-editorial);
  font-size: clamp(12px, 1.18vw, 20px);
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
}
.before-case-hotspots {
  position: absolute;
  z-index: 3;
  inset: 0;
}
.case-hotspot {
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 14px;
  color: transparent;
  background: transparent;
  cursor: pointer;
}
.case-hotspot span {
  opacity: 0;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}
@media (min-width: 701px) {
  .case-hotspot {
    font-family: var(--font-editorial);
    font-size: clamp(12px, 1.1vw, 18px);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -.035em;
  }
  .case-hotspot span {
    box-sizing: border-box;
    width: 100%;
    padding: clamp(2px, .28vw, 5px) clamp(3px, .42vw, 7px);
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-align: center;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    text-wrap: balance;
  }
}
.case-hotspot:hover,
.case-hotspot:focus-visible {
  border-color: transparent;
  outline: none;
}
.case-hotspot.is-editing {
  color: #fff;
  background: rgba(48,40,36,.72);
  outline: 2px dashed #fff;
  outline-offset: 2px;
}
.case-hotspot.is-editing span { opacity: 1; }
.case-hotspot.is-active-layout {
  outline: 3px solid #f2b48d;
  outline-offset: 3px;
}
.case-hotspot-eye { width: 8.25%; height: 6.3%; }
.case-hotspot-lips { width: 11.8%; height: 6.4%; }
.case-hotspot-skin { width: 7.85%; height: 6.1%; }
.case-hotspot-nose { width: 9.1%; height: 6.7%; }
.case-hotspot-hair { width: 8.7%; height: 6.4%; }
.case-hotspot-dental { width: 9.5%; height: 7.1%; }
.case-hotspot-lifting { width: 9.55%; height: 7.1%; }
.case-hotspot-breast { width: 10.8%; height: 7.9%; }

.precision-layout-toolbar {
  position: fixed;
  z-index: 90;
  top: 96px;
  right: 18px;
  left: auto;
  flex-wrap: wrap;
  width: min(560px, calc(100% - 36px));
  justify-content: flex-end;
  touch-action: none;
}

.layout-control-title {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  padding: 7px 13px;
  border: 1px solid rgba(146, 146, 156, .5);
  border-radius: 999px;
  color: #292a2c;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 8px 24px rgba(41, 42, 44, .12);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}

.logo-control-toolbar {
  z-index: 110;
}

.layout-precision-panel {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(190px, 1fr);
  width: 100%;
  padding: 13px;
  gap: 10px 12px;
  align-items: end;
  border: 1px solid rgba(146, 146, 156, .5);
  border-radius: 14px;
  color: #292a2c;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 16px 36px rgba(41, 42, 44, .18);
  backdrop-filter: blur(12px);
}

.layout-precision-panel.is-collapsed {
  padding: 8px 10px;
}

.layout-panel-handle {
  display: flex;
  grid-column: 1 / -1;
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #dedee0;
  cursor: move;
  user-select: none;
}

.layout-precision-panel.is-collapsed .layout-panel-handle {
  border-bottom: 0;
}

.layout-panel-handle > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #292a2c;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.layout-panel-handle > div {
  display: flex;
  gap: 5px;
}

.layout-panel-handle button {
  min-height: 28px;
  padding: 5px 8px;
  border-radius: 7px;
  font-size: 10px;
}

.layout-element-picker,
.layout-nudge-controls,
.layout-size-controls {
  display: grid;
  gap: 6px;
}

.layout-element-picker > span,
.layout-nudge-controls > span,
.layout-size-controls > span {
  color: #6f7074;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.layout-element-picker select {
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid #dedee0;
  border-radius: 8px;
  color: #292a2c;
  background: #f7f7f5;
  cursor: pointer;
  font-size: 12px;
}

.layout-nudge-controls {
  grid-template-columns: repeat(4, minmax(34px, 1fr));
}

.layout-nudge-controls > span {
  grid-column: 1 / -1;
}

.layout-size-controls {
  grid-column: 1 / -1;
  grid-template-columns: 1fr 34px 34px;
  align-items: center;
}

.layout-precision-panel .layout-nudge-controls button,
.layout-precision-panel .layout-size-controls button,
.layout-precision-panel .layout-reset-selected {
  min-height: 34px;
  justify-content: center;
  padding: 6px 9px;
  border-radius: 8px;
  color: #fff;
  background: #292a2c;
}

.layout-position-readout {
  align-self: center;
  color: #6f7074;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.layout-precision-panel .layout-reset-selected {
  justify-self: start;
}

.layout-precision-panel > small {
  grid-column: 1 / -1;
  color: #6f7074;
  font-size: 10px;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .precision-layout-toolbar {
    position: fixed;
    top: 82px;
    right: 12px;
    left: auto;
    width: calc(100% - 24px);
  }

  .layout-precision-panel {
    grid-template-columns: 1fr;
    max-height: 62vh;
    overflow: auto;
  }

  .layout-panel-handle {
    align-items: flex-start;
    flex-direction: column;
  }
}

.granular-editable {
  position: relative;
  cursor: grab;
  outline: 1px dashed rgba(133, 78, 60, .68);
  outline-offset: 5px;
  touch-action: none;
  user-select: none;
}
.opening-screen .granular-editable { outline-color: rgba(255,255,255,.84); }
.granular-editable.is-active-layout {
  z-index: 4;
  outline: 2px solid var(--rust);
  outline-offset: 7px;
}
.opening-screen .granular-editable.is-active-layout { outline-color: #fff; }
.granular-editable:active { cursor: grabbing; }

.header-layout-toolbar {
  position: absolute;
  z-index: 20;
  top: 8px;
  right: 84px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.header-layout-toolbar button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid rgba(133,78,60,.34);
  border-radius: 999px;
  color: var(--dark);
  background: rgba(255,253,251,.94);
  cursor: pointer;
  font-size: 10px;
}
.header-layout-toolbar button.active { color: #fff; background: var(--terracotta); }
.header-layout-toolbar .layout-selection-label { min-height: 30px; font-size: 10px; }

.layout-reset-floating {
  position: absolute;
  z-index: 7;
  top: 18px;
  right: 310px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  border: 1px solid rgba(138, 78, 61, .42);
  border-radius: 999px;
  color: #fff;
  background: rgba(48, 40, 36, .86);
  cursor: pointer;
  font-size: 12px;
}

.layout-reset-floating svg { width: 15px; height: 15px; }
.opening-screen > .layout-reset-floating { top: 20px; color: #fff; border-color: rgba(255,255,255,.45); background: rgba(34,24,19,.72); }

.medical-services { position: relative; overflow: hidden; }
.hero-review > .medical-services { display: block; }
.medical-services > .section-heading,
.medical-services > .service-grid { position: relative; z-index: 2; }
.medical-services > .company-layout-toolbar { z-index: 6; }
.services-layout-grid {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(138,78,61,.2) 1px, transparent 1px),
    linear-gradient(rgba(138,78,61,.2) 1px, transparent 1px);
  background-size: 5% 5%;
}
.services-layout-grid::before,
.services-layout-grid::after { content: ""; position: absolute; background: rgba(138,78,61,.72); }
.services-layout-grid::before { width: 2px; top: 0; bottom: 0; left: 50%; }
.services-layout-grid::after { height: 2px; top: 50%; left: 0; right: 0; }

.service-card-flip {
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  perspective: 1400px;
  transform-origin: center;
  transition: transform .2s ease;
}
.medical-services .service-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
.medical-services .service-card-flip,
.medical-services .service-card-flip:nth-child(n) { grid-column: span 2; width: 100%; }
.medical-services .service-card-flip.service-featured { grid-column: span 5; }
.service-card-flip.is-editing {
  cursor: grab;
  outline: 2px solid #7a4a3b;
  outline-offset: 5px;
  touch-action: none;
}
.service-card-flip.is-editing:active { cursor: grabbing; }
.service-card-inner {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1.08 / 1;
}
.service-featured .service-card-inner { aspect-ratio: 1.65 / 1; }
.service-card-face {
  position: absolute;
  inset: 0;
  display: flex;
  overflow: hidden;
  border-radius: 10px;
  transform-origin: center;
  transition: opacity .18s ease, transform .42s cubic-bezier(.2,.72,.2,1);
  box-shadow: 0 10px 26px rgba(74,52,40,.1);
}
.service-card-front { flex-direction: column; opacity: 1; transform: scaleX(1); }
.service-card-front img { width: 100%; min-height: 0; flex: 1 1 auto; object-fit: cover; }
.service-front-label {
  display: grid;
  min-height: 78px;
  flex: 0 0 auto;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 12px 16px;
  color: #fff;
  background: linear-gradient(150deg, #a7664f, #884c39);
}
.service-featured .service-front-label { min-height: 92px; }
.service-front-label strong { font-family: var(--font-editorial); font-size: 20px; font-weight: 500; }
.service-featured .service-front-label strong { font-size: 28px; }
.service-front-label em { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; font-style: normal; font-weight: 300; }
.service-front-label b { font-size: 18px; font-weight: 300; line-height: 1; }
.service-card-back {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px;
  color: #fff8f3;
  background: linear-gradient(150deg, #a7664f, #884c39);
  opacity: 0;
  transform: scaleX(.04);
}
.service-card-flip.is-flipped .service-card-front { opacity: 0; transform: scaleX(.04); pointer-events: none; }
.service-card-flip.is-flipped .service-card-back { opacity: 1; transform: scaleX(1); }
.service-card-back small { opacity: .72; font-size: 9px; font-style: normal; letter-spacing: .12em; }
.service-card-back strong { margin: 20px 0 16px; font-family: var(--font-editorial); font-size: 23px; font-weight: 500; }
.service-card-back p { margin: 0 0 42px; color: rgba(255,255,255,.86); font-size: 13px; }
.service-card-back em { font-size: 12px; font-style: normal; }

.case-overlay {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(47,39,35,.72);
}
.hero-review > .case-overlay { display: grid !important; }
.case-overlay .case-dialog { position: relative; width: min(720px, calc(100vw - 40px)); }
.case-overlay .dialog-x { position: absolute; z-index: 2; top: 16px; right: 16px; cursor: pointer; }
.case-pending {
  display: grid;
  min-height: 280px;
  margin-top: 28px;
  place-content: center;
  gap: 12px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f9f5f2;
}
.case-pending strong { font-family: var(--font-editorial); font-size: 28px; font-weight: 500; }
.case-pending p { margin: 0; color: var(--muted); font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  .service-card-inner { transition-duration: .01ms; }
}

@media (max-width: 900px) {
  .layout-reset-floating { right: auto; left: 16px; top: 70px; }
}

@media (max-width: 1100px) {
  .medical-services .service-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .medical-services .service-card-flip.service-featured { grid-column: span 3; }
  .medical-services .service-card-flip,
  .medical-services .service-card-flip:nth-child(n) { grid-column: span 2; }
  .medical-services .service-card-flip.service-featured { grid-column: span 3; }
}

@media (max-width: 1000px) {
  .site-header {
    grid-template-columns: 74px minmax(0, 1fr) 44px;
    gap: 8px;
    height: 74px;
    padding: 0 14px;
  }
  .site-header nav {
    display: flex;
    justify-content: flex-start;
    gap: 22px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .site-header nav::-webkit-scrollbar { display: none; }
  .site-header nav a { flex: 0 0 auto; padding: 27px 0 23px; font-size: 13px; }
  .site-header nav a.news-image-link { padding: 21px 0 18px; }
  .news-tab-image { width: 70px; }
  .tab-page { min-height: max(calc(100svh - 74px), 720px); scroll-margin-top: 74px; }
  .partner-hero { grid-template-columns: 1fr; gap: 30px; }
  .partner-lead { max-width: 620px; }
  .legal-footer { grid-template-columns: 1fr 1fr; }
  .legal-footer-contact { justify-items: start; }
  .legal-footer-pending { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .opening-screen .language-list.layout-item { width: 92vw; gap: 2vw; }
  .hero-review > .before-after { overflow-x: auto; overflow-y: hidden; }
  .before-scene.before-layout-item { min-width: 900px; }
  .medical-services .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .medical-services .service-card-flip,
  .medical-services .service-card-flip:nth-child(n) { grid-column: span 1; }
  .medical-services .service-card-flip.service-featured { grid-column: span 2; }
  .partners-section { padding-inline: 20px; }
  .partner-heading h2 { font-size: clamp(39px, 11vw, 58px); }
  .partner-network-panel > header { grid-template-columns: 38px 1fr; }
  .partner-network-panel > header small { display: none; }
  .partner-clinic-row { grid-template-columns: 1fr; }
  .partner-hospital-grid,
  .partner-clinic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partner-logo-card { min-height: 160px; padding-inline: 18px; }
  .partner-logo-card img { height: 66px; }
  .partner-summary { min-height: 180px; border-top: 1px solid rgba(133,78,60,.28); border-left: 0; }
  .news-section { padding-inline: 20px; }
  .news-section .news-grid { grid-template-columns: 1fr; gap: 24px; }
  .news-section .news-grid article:nth-child(n) { margin-top: 0; }
  .news-section > footer { margin-top: 46px; }
  .news-detail-overlay { padding: 14px; }
  .news-detail-dialog {
    display: block;
    overflow: auto;
    max-height: calc(100svh - 28px);
    border-radius: 16px;
  }
  .news-detail-visual { overflow: visible; padding: 54px 18px 18px; }
  .news-detail-copy { padding: 34px 26px 42px; border-top: 1px solid rgba(133,78,60,.16); border-left: 0; }
  .news-detail-placeholder { margin-top: 34px; }
  .legal-footer { grid-template-columns: 1fr; gap: 20px; padding-inline: 22px; }
  .legal-footer-links { flex-wrap: wrap; gap: 14px 24px; }
  .legal-footer-pending { grid-column: 1; }
  .legal-footer > small { justify-self: start; }
}

@media (max-width: 480px) {
  .medical-services .service-grid { grid-template-columns: 1fr; }
  .medical-services .service-card-flip,
  .medical-services .service-card-flip:nth-child(n),
  .medical-services .service-card-flip.service-featured { grid-column: 1; }
  .partner-hospital-grid,
  .partner-clinic-grid { grid-template-columns: 1fr; }
}

/* ==========================================================
   HEER SEOUL — FINAL VISUAL DESIGN SYSTEM
   Modern Korean Medical Concierge / Quiet Luxury
   ========================================================== */

:root {
  --cream: #f7f7f5;
  --paper: #f7f7f5;
  --surface: #eeedef;
  --terracotta: #92929c;
  --rust: #74747f;
  --dark: #292a2c;
  --muted: #6f7074;
  --line: #dedee0;
  --warm-care: #e7ddd7;
  --pure-white: #ffffff;
  --font-editorial: "Source Han Serif K", "Source Han Serif KR", "본명조", "Noto Serif CJK KR", "Noto Serif KR", serif;
  --font-body: "Source Han Serif K", "Source Han Serif KR", "본명조", "Noto Serif CJK KR", "Noto Serif KR", serif;
  --heer-page-gradient: linear-gradient(135deg, #fffdfb 0%, #fcf7f3 50%, #faf3ee 100%);
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--font-body);
}

body {
  color: var(--dark);
  background: #fffdfb;
  font-weight: 400;
}

/* Neutral page rhythm; photography remains the source of warmth. */
.identity-section,
.why-process,
.medical-services,
.partners-section,
.news-section {
  background: var(--heer-page-gradient) !important;
}

.before-after {
  background: var(--heer-page-gradient) !important;
}

.site-header {
  color: var(--dark);
  border-bottom-color: rgba(41, 42, 44, .10);
  background: rgba(247, 247, 245, .94);
  backdrop-filter: blur(18px) saturate(115%);
}

.site-header nav a {
  color: var(--secondary-text, #6f7074);
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: -.01em;
}

.site-header nav a:hover,
.site-header nav a:focus-visible,
.site-header nav a.active {
  color: var(--dark);
  border-color: #92929c;
}

.globe img {
  filter: grayscale(1) contrast(.86);
}

.identity-copy h1,
.why-title h2,
.process-title h2,
.section-heading h2,
.partner-heading h2,
.before-title,
.news-detail-copy h2 {
  color: var(--dark);
  font-family: var(--font-editorial);
  font-weight: 400;
  letter-spacing: -.025em;
}

.identity-copy > p,
.why-description,
.partner-lead p,
.before-description,
.section-heading > p,
.process-step p,
.why-card p {
  color: var(--muted);
  font-family: var(--font-body);
}

.eyebrow,
.partner-heading .eyebrow,
.partner-lead span,
.news-card-copy p,
.news-detail-copy > p,
.service-card-back small {
  color: #74747f;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: .12em;
}

.partner-heading .eyebrow::before,
.process-steps-line {
  background: #bfc0c3;
}

/* Cards: soft precision, restrained borders, no floating SaaS look. */
.why-card.process-layout-item,
.partner-network-panel,
.partner-logo-card,
.case-pending {
  border-color: #dedee0;
  background: rgba(255, 255, 255, .84);
  box-shadow: none;
}

.why-card.process-layout-item {
  border-radius: 16px;
}

.why-card.selected {
  color: var(--dark);
  border-color: #d6ccca;
  background: #e7ddd7;
}

.why-card.selected p {
  color: #626266;
}

.process-step > span {
  color: var(--dark);
  border-color: #bfc0c3;
  background: #ffffff;
}

.process-step.step-1 > span {
  color: #ffffff;
  border-color: #292a2c;
  background: #292a2c;
}

.partner-lead,
.partner-summary,
.partner-summary:last-child {
  border-color: #cfd0d3;
}

.partner-network-panel > header,
.partner-logo-card {
  border-color: #dedee0;
}

.partner-network-panel > header span,
.partner-count,
.legal-footer-brand strong {
  color: #74747f;
}

.partner-network-panel > header small,
.partner-logo-card span,
.partners-section .partner-note {
  color: var(--muted);
}

.partner-logo-card:hover {
  background: #ffffff;
}

/* Medical cards retain their original charcoal flip treatment. */
.service-card-face {
  border: 1px solid #dedee0;
  border-radius: 16px;
  box-shadow: none;
}

.service-front-label,
.service-card-back {
  color: #ffffff;
  background: linear-gradient(145deg, #3a3a3d 0%, #292a2c 100%);
}

.service-front-label strong,
.service-card-back strong {
  font-weight: 400;
}

.service-card-back p {
  color: rgba(255, 255, 255, .78);
}

/* NEWS deliberately keeps a layered composition and a quiet drop shadow. */
.news-section::before {
  border-color: rgba(146, 146, 156, .18);
  background: radial-gradient(circle at 34% 42%, rgba(255,255,255,.82), rgba(250,243,238,.62) 55%, rgba(255,255,255,0) 72%);
}

.news-section .news-grid article {
  border-color: rgba(146, 146, 156, .22);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 22px 48px rgba(41, 42, 44, .10), 0 5px 14px rgba(41, 42, 44, .05);
}

.news-card-image {
  background: #eeedef;
}

.news-card-copy h3 {
  color: var(--dark);
  font-weight: 400;
}

.news-card-copy button {
  color: var(--dark);
  border-top-color: #dedee0;
  font-weight: 500;
}

.news-card-copy button:hover,
.news-card-copy button:focus-visible {
  color: #74747f;
}

.news-detail-overlay,
.case-overlay {
  background: rgba(41, 42, 44, .72);
}

.news-detail-dialog,
.case-dialog {
  border-color: rgba(255, 255, 255, .72);
  background: #ffffff;
  box-shadow: 0 32px 80px rgba(41, 42, 44, .22);
}

.news-detail-visual {
  background: linear-gradient(120deg, #f8f8f7 0%, #eeeff2 55%, #e5e3e5 100%);
}

.news-detail-visual img {
  box-shadow: 0 18px 42px rgba(41, 42, 44, .10);
}

.news-detail-copy,
.news-detail-placeholder,
.news-detail-close {
  border-color: #dedee0;
}

.news-detail-placeholder strong {
  color: var(--dark);
}

.news-detail-placeholder span {
  color: var(--muted);
}

/* Footer/legal area: functional sans-serif and clear neutral hierarchy. */
.legal-footer {
  color: var(--muted);
  border-top-color: #d7d7da;
  background: #eeedef;
  font-family: var(--font-body);
}

.legal-footer-links a {
  color: var(--dark);
  font-weight: 500;
}

.legal-footer-links a:hover,
.legal-footer-links a:focus-visible {
  color: #74747f;
}

.legal-footer-pending,
.legal-footer > small {
  color: var(--muted);
}

/* Editing controls stay readable without reintroducing the former brown UI. */
.company-layout-toolbar button,
.layout-reset-floating,
.header-layout-toolbar button {
  border-color: rgba(146, 146, 156, .46);
  color: #ffffff;
  background: rgba(41, 42, 44, .88);
}

.company-layout-toolbar button.active,
.layout-toolbar button.active,
.header-layout-toolbar button.active {
  color: #ffffff;
  border-color: #92929c;
  background: #74747f;
}

.layout-selection-label,
.company-layout-toolbar .layout-selection-label,
.header-layout-toolbar .layout-selection-label {
  color: var(--dark);
  border-color: #dedee0;
  background: rgba(255, 255, 255, .96);
}

.page-layout-grid,
.services-layout-grid {
  background-image:
    linear-gradient(90deg, rgba(146,146,156,.22) 1px, transparent 1px),
    linear-gradient(rgba(146,146,156,.22) 1px, transparent 1px);
}

.page-layout-grid::before,
.page-layout-grid::after,
.services-layout-grid::before,
.services-layout-grid::after {
  background: rgba(116, 116, 127, .62);
}

.page-layout-item.is-active-layout,
.process-layout-item.is-active-layout,
.service-card-flip.is-editing,
.granular-editable.is-active-layout {
  outline-color: #74747f;
}

@media (max-width: 700px) {
  .service-card-face { border-radius: 14px; }
  .news-section .news-grid article { box-shadow: 0 16px 34px rgba(41, 42, 44, .09); }
}

/* Seven equally sized treatment cards: 4 + 3 centered on desktop. */
.medical-services .service-grid {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: clamp(16px, 1.7vw, 26px);
}

.medical-services .service-card-flip,
.medical-services .service-card-flip:nth-child(n),
.medical-services .service-card-flip.service-featured {
  grid-column: span 2;
  width: 100%;
}

.medical-services .service-card-flip:nth-child(5) {
  grid-column: 2 / span 2;
}

.medical-services .service-card-flip:nth-child(6),
.medical-services .service-card-flip:nth-child(7) {
  grid-column: span 2;
}

.service-card-inner,
.service-featured .service-card-inner {
  aspect-ratio: 1.08 / 1;
}

.service-featured .service-front-label {
  min-height: 78px;
}

.service-featured .service-front-label strong,
.service-front-label strong {
  font-size: 20px;
}

/* NEWS keeps its dedicated golden navigation glow. */
.site-header nav a.news-image-link,
.site-header nav a.news-image-link:hover,
.site-header nav a.news-image-link:focus-visible,
.site-header nav a.news-image-link.active {
  border-color: transparent;
}

.news-tab-image {
  filter:
    drop-shadow(0 0 6px rgba(207, 166, 77, .72))
    drop-shadow(0 4px 10px rgba(151, 105, 21, .34));
}

.news-image-link:hover .news-tab-image,
.news-image-link:focus-visible .news-tab-image,
.news-image-link.active .news-tab-image {
  filter:
    drop-shadow(0 0 9px rgba(226, 188, 91, .94))
    drop-shadow(0 6px 14px rgba(151, 105, 21, .44));
}

@media (max-width: 1100px) {
  .medical-services .service-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .medical-services .service-card-flip,
  .medical-services .service-card-flip:nth-child(n),
  .medical-services .service-card-flip.service-featured {
    grid-column: span 2;
  }

  .medical-services .service-card-flip:nth-child(5) {
    grid-column: span 2;
  }

  .medical-services .service-card-flip:nth-child(7) {
    grid-column: 3 / span 2;
  }
}

@media (max-width: 700px) {
  .medical-services .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .medical-services .service-card-flip,
  .medical-services .service-card-flip:nth-child(n),
  .medical-services .service-card-flip.service-featured {
    grid-column: span 1;
  }
}

@media (max-width: 480px) {
  .medical-services .service-grid {
    grid-template-columns: 1fr;
  }

  .medical-services .service-card-flip,
  .medical-services .service-card-flip:nth-child(n),
  .medical-services .service-card-flip.service-featured {
    grid-column: 1;
  }
}

/* Page 2 — selectable editorial cards with a restrained reading zoom. */
.why-card.process-layout-item {
  transition:
    scale .28s cubic-bezier(.2, .72, .2, 1),
    border-color .28s ease,
    background-color .28s ease,
    box-shadow .28s ease;
}

.why-card.process-layout-item:not(.is-editing):hover,
.why-card.process-layout-item:not(.is-editing):focus-within {
  z-index: 4;
  scale: 1.045;
  border-color: #bfc0c3;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 18px 42px rgba(41, 42, 44, .11);
}

.why-card.process-layout-item.selected:not(.is-editing):hover,
.why-card.process-layout-item.selected:not(.is-editing):focus-within {
  border-color: #cfc3bf;
  background: #eee5e0;
}

/* Company introduction — restrained warm mineral background. */
.identity-section {
  isolation: isolate;
  background:
    linear-gradient(138deg, rgba(255, 255, 255, .58) 0%, rgba(255, 255, 255, 0) 44%),
    linear-gradient(135deg, #fffdfb 0%, #fcf7f3 50%, #faf3ee 100%);
}

.identity-section::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  inset: -24%;
  pointer-events: none;
  background: linear-gradient(
    126deg,
    transparent 30%,
    rgba(126, 105, 88, .095) 49%,
    transparent 70%
  );
  filter: blur(68px);
  opacity: .64;
  transform: translateX(-14%) rotate(-2deg);
}

.identity-section::after {
  display: none;
}

.identity-section > :not(.page-layout-grid):not(.company-layout-toolbar) {
  z-index: 2;
}

/* One replaceable HEER VIP brand asset is shared by the page and header. */
.heer-brand-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The supplied high-resolution PNG remains untouched. Two clipped copies make
   the monogram and its wording independently movable and scalable in edit mode. */
.brand-logo-piece {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  object-fit: contain;
  pointer-events: auto;
}

.brand-logo-symbol {
  clip-path: inset(0 0 27.3% 0);
}

.brand-logo-text {
  clip-path: inset(72.7% 0 0 0);
}

.header-logo {
  position: relative;
  display: grid;
  width: 72px;
  height: 82px;
  place-items: center;
}

.header-logo .heer-brand-logo {
  width: 54px;
  height: 78px;
}

.identity-copy.page-layout-item {
  width: min(48vw, 790px);
}

.identity-mark.page-layout-item {
  isolation: isolate;
  width: min(24vw, 350px);
  aspect-ratio: 535 / 796;
}

.identity-mark .brand-logo-piece {
  z-index: 2;
  filter: drop-shadow(0 24px 38px rgba(70, 71, 76, .13));
}

.layout-selection-picker {
  display: grid;
  grid-template-columns: auto minmax(150px, 230px);
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 4px 5px 4px 11px;
  border: 1px solid rgba(121, 125, 135, .25);
  border-radius: 999px;
  color: #4a4c52;
  background: rgba(255, 255, 255, .96);
  font-size: 10px;
  font-weight: 600;
}

.layout-selection-picker select {
  min-width: 0;
  padding: 5px 24px 5px 9px;
  border: 1px solid rgba(121, 125, 135, .22);
  border-radius: 999px;
  color: #303137;
  background: #fff;
  cursor: pointer;
  font-size: 11px;
}

.layout-selection-picker select:focus-visible {
  outline: 2px solid rgba(128, 112, 135, .45);
  outline-offset: 2px;
}

.identity-mark .heer-brand-logo {
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 24px 38px rgba(70, 71, 76, .13));
}

/* Keep the supplied metallic logo visually dominant: no rings or 3D ellipses. */
.identity-mark::before,
.identity-mark::after {
  display: none;
}

@media (max-width: 1000px) {
  .header-logo {
    width: 62px;
    height: 62px;
  }

  .header-logo .heer-brand-logo {
    width: 45px;
    height: 66px;
  }

  .identity-copy.page-layout-item {
    width: 55vw;
  }

  .identity-mark.page-layout-item {
    width: 27vw;
  }
}

@media (max-width: 700px) {
  .identity-copy.page-layout-item {
    width: 86vw;
  }

  .identity-mark.page-layout-item {
    width: 38vw;
  }
}

/* Larger partner network statement. */
.partner-clinic-row {
  display: block;
}

.partner-count {
  gap: 24px;
}

.partner-count strong {
  font-size: clamp(58px, 4.8vw, 76px);
  line-height: 1;
}

.partner-count sup {
  font-size: clamp(19px, 1.5vw, 26px);
}

.partner-count span {
  font-size: clamp(11px, .8vw, 14px);
  line-height: 1.55;
}

@media (max-width: 700px) {
  .partner-clinic-row {
    grid-template-columns: 1fr;
  }
}

/* Restrained silver treatment for the English label only. */
.service-card-back small {
  color: #dadddf;
  -webkit-text-stroke: .12px rgba(255, 255, 255, .72);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .42),
    0 2px 5px rgba(40, 32, 28, .3);
}

/* Complete treatment lists on the reverse of the seven equal cards. */
.service-card-inner,
.service-featured .service-card-inner {
  aspect-ratio: 1 / 1.08;
}

.service-card-back {
  align-items: center;
  justify-content: center;
  padding: 22px 20px;
  text-align: center;
}

.service-back-content {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transform-origin: center;
}

.service-card-back small {
  font-size: clamp(10px, .68vw, 11px);
  line-height: 1.2;
}

.service-card-back strong {
  margin: 10px 0 9px;
  font-size: clamp(22px, 1.45vw, 24px);
  line-height: 1.25;
}

.service-back-list {
  display: grid;
  width: 100%;
  gap: 5px;
  margin: 0;
  padding: 0;
  color: rgba(255, 255, 255, .9);
  font-family: var(--font-body);
  font-size: clamp(12px, .88vw, 14px);
  font-weight: 400;
  line-height: 1.34;
  list-style: none;
  text-align: center;
}

.service-back-list li {
  min-width: 0;
  overflow-wrap: anywhere;
}

.service-card-back em {
  margin-top: 12px;
  padding-top: 0;
  font-size: 12px;
}

@media (max-width: 700px) {
  .service-back-list {
    font-size: 12px;
  }
}

/* Before/after controls are real buttons layered over the baked artwork. */
.case-hotspot {
  isolation: isolate;
  transition:
    transform .24s cubic-bezier(.2, .72, .2, 1),
    box-shadow .24s ease,
    filter .24s ease;
}

.case-hotspot:not(.is-editing) {
  border: 1px solid rgba(178, 138, 67, .72);
  color: #b45f36;
  background: linear-gradient(145deg, rgba(255,255,255,.99), rgba(250,247,242,.98));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.82),
    0 5px 12px rgba(41,42,44,.18);
}

.case-hotspot:not(.is-editing) span {
  position: relative;
  z-index: 1;
  opacity: 1;
  color: #b45f36;
  text-shadow: 0 1px 0 #ffffff, 0 2px 5px rgba(180,95,54,.13);
}

@media (max-width: 700px) {
  .case-hotspot:not(.is-editing) span {
    font-family: var(--font-editorial);
    font-size: clamp(12px, 1.45vw, 24px);
    font-weight: 500;
    letter-spacing: -.035em;
  }
}

/* Keep every baked line endpoint centred under its button. The editor uses the
   same wrapping as the visitor view; explicit Studio dimensions still win. */
@media (min-width: 701px) {
  .case-hotspot:not([data-heer-studio-height="true"]) { height: auto !important; }
  .case-hotspot-eye { min-height: 6.3%; }
  .case-hotspot-lips { min-height: 6.4%; }
  .case-hotspot-skin { min-height: 6.25%; }
  .case-hotspot-nose { min-height: 6.85%; }
  .case-hotspot-hair { min-height: 6.4%; }
  .case-hotspot-dental { min-height: 7.1%; }
  .case-hotspot-lifting { min-height: 6.95%; }
  .case-hotspot-breast { min-height: 7.9%; }

  html:lang(ko) .case-hotspot,
  html:lang(zh) .case-hotspot { font-size: clamp(13px, 1.4vw, 23px); }
  html:lang(en) .case-hotspot,
  html:lang(vi) .case-hotspot,
  html:lang(ru) .case-hotspot { font-size: clamp(12px, 1.08vw, 18px); }
  html:lang(fr) .case-hotspot { font-size: clamp(12px, 1.02vw, 17px); line-height: 1.14; }
  html:lang(mn) .case-hotspot { font-size: clamp(12px, .96vw, 16px); line-height: 1.1; letter-spacing: -.045em; }

  /* Wider locale-specific frames preserve readable type without moving the
     centres, so the connector lines baked into the image remain aligned. */
  html:lang(mn) .case-hotspot-eye:not([data-heer-studio-width="true"]) { width: 13.8% !important; }
  html:lang(mn) .case-hotspot-lips:not([data-heer-studio-width="true"]) { width: 13% !important; }
  html:lang(mn) .case-hotspot-skin:not([data-heer-studio-width="true"]) { width: 8% !important; }
  html:lang(mn) .case-hotspot-nose:not([data-heer-studio-width="true"]) { width: 12% !important; }
  html:lang(mn) .case-hotspot-hair:not([data-heer-studio-width="true"]) { width: 14% !important; }
  html:lang(mn) .case-hotspot-dental:not([data-heer-studio-width="true"]) { width: 12.5% !important; }
  html:lang(mn) .case-hotspot-lifting:not([data-heer-studio-width="true"]) { width: 17% !important; }
  html:lang(mn) .case-hotspot-breast:not([data-heer-studio-width="true"]) { width: 15.8% !important; }

  html:lang(fr) .case-hotspot-eye:not([data-heer-studio-width="true"]) { width: 13.8% !important; }
  html:lang(fr) .case-hotspot-lips:not([data-heer-studio-width="true"]) { width: 15.5% !important; }
  html:lang(fr) .case-hotspot-skin:not([data-heer-studio-width="true"]) { width: 8% !important; }
  html:lang(fr) .case-hotspot-nose:not([data-heer-studio-width="true"]) { width: 12% !important; }
  html:lang(fr) .case-hotspot-hair:not([data-heer-studio-width="true"]) { width: 13.5% !important; }
  html:lang(fr) .case-hotspot-dental:not([data-heer-studio-width="true"]) { width: 11.5% !important; }
  html:lang(fr) .case-hotspot-lifting:not([data-heer-studio-width="true"]) { width: 9.5% !important; }
  html:lang(fr) .case-hotspot-breast:not([data-heer-studio-width="true"]) { width: 14.5% !important; }

  html:lang(en) .case-hotspot-eye:not([data-heer-studio-width="true"]),
  html:lang(ru) .case-hotspot-eye:not([data-heer-studio-width="true"]) { width: 11.5% !important; }
  html:lang(en) .case-hotspot-hair:not([data-heer-studio-width="true"]),
  html:lang(ru) .case-hotspot-hair:not([data-heer-studio-width="true"]) { width: 12.5% !important; }
  html:lang(en) .case-hotspot-breast:not([data-heer-studio-width="true"]),
  html:lang(ru) .case-hotspot-breast:not([data-heer-studio-width="true"]) { width: 12.5% !important; }
}

html:lang(mn) .before-copy-title,
html:lang(fr) .before-copy-title,
html:lang(ru) .before-copy-title,
html:lang(vi) .before-copy-title {
  font-size: clamp(34px, 3.8vw, 64px);
  line-height: 1.16;
}
html:lang(mn) .before-copy-description,
html:lang(fr) .before-copy-description,
html:lang(ru) .before-copy-description,
html:lang(vi) .before-copy-description {
  font-size: clamp(14px, 1.2vw, 21px);
  line-height: 1.55;
}
html:lang(mn) .before-copy-prompt,
html:lang(fr) .before-copy-prompt,
html:lang(ru) .before-copy-prompt,
html:lang(vi) .before-copy-prompt { font-size: clamp(12px, 1.08vw, 18px); }

.case-hotspot:not(.is-editing):hover,
.case-hotspot:not(.is-editing):focus-visible {
  z-index: 5;
  transform: translate(-50%, -50%) scale(1.065) !important;
  border-color: rgba(178, 138, 67, .82);
  background: linear-gradient(145deg, #ffffff, #faf7f2);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.9),
    0 16px 30px rgba(41,42,44,.25),
    0 6px 12px rgba(41,42,44,.13);
  outline: none;
  filter: brightness(1.025);
  backdrop-filter: none;
}

/* Premium silver typography without glow, kept dark enough for perfect readability. */
.partner-count {
  color: #686d73;
}

.partner-count strong,
.partner-count sup,
.partner-count span {
  background: linear-gradient(
    155deg,
    #30363c 0%,
    #70777e 17%,
    #e4e7e9 35%,
    #8a9198 49%,
    #f3f4f5 63%,
    #697078 80%,
    #343a40 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: saturate(.7) contrast(1.14);
  text-shadow:
    0 1px 0 rgba(255,255,255,.82),
    0 2px 2px rgba(45,51,57,.16);
}

.partner-count strong {
  display: inline-flex;
  align-items: flex-start;
  overflow: visible;
  padding: .1em .08em .08em 0;
  -webkit-text-stroke: .3px rgba(47,53,59,.28);
}

.partner-count sup {
  position: static;
  flex: 0 0 auto;
  margin: .08em 0 0 .04em;
  line-height: 1;
  -webkit-text-stroke: .2px rgba(47,53,59,.3);
}

.partner-count span {
  font-weight: 700;
  -webkit-text-stroke: .15px rgba(47,53,59,.22);
}

.partners-section .partner-note {
  font-weight: 500;
  text-shadow: 0 3px 14px rgba(178, 138, 67, .13);
}

/* Six equal clinic frames per desktop row. */
.partner-clinic-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.partner-clinic-grid .partner-logo-card {
  min-width: 0;
  padding: 26px 14px 20px;
}

.partner-summary-below {
  min-height: 0;
  margin: clamp(38px, 4vw, 62px) auto 0;
  padding: 0 20px;
  gap: 18px;
  border: 0;
  background: transparent;
}

.partner-summary-below .partner-count {
  width: 100%;
  gap: 18px;
}

.partner-summary-below .partner-count span {
  font-size: clamp(12px, .9vw, 15px);
  letter-spacing: .14em;
}

.partner-summary-below .partner-note {
  color: #6d625d;
  font-size: clamp(11px, .78vw, 13px);
  line-height: 1.75;
  letter-spacing: .015em;
  text-shadow: none;
}

.partner-clinic-grid img[src$="/qa-plastic-surgery.png"] {
  width: min(100%, 150px);
  height: 112px;
}

.partner-clinic-grid img[src$="/view-plastic-surgery.png"] {
  width: min(100%, 190px);
  height: 104px;
}

.partner-clinic-grid .partner-logo-card img {
  width: min(100%, 180px);
  height: 104px;
}

.partner-clinic-grid .partner-card-heer img {
  width: auto;
  max-width: 88px;
  height: 96px;
}

.partner-clinic-grid .partner-card-heer em,
.partner-clinic-grid .partner-card-heer span {
  width: 100%;
  justify-self: center;
  text-align: center;
}

.partner-clinic-grid img[src$="/chaum.png"] {
  object-fit: cover;
  object-position: 50% 50%;
}

.partner-clinic-grid img[src$="/gangnam-grand-eye-clinic.png"] {
  object-fit: cover;
  object-position: 50% 74%;
}

@media (max-width: 1180px) {
  .partner-clinic-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .partner-clinic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .partner-clinic-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .why-card.process-layout-item,
  .case-hotspot {
    transition: none;
  }
}

/* Treatment cards — visibly levitate at rest, then zoom in without moving. */
.service-card-flip {
  cursor: pointer;
  position: relative;
  z-index: 1;
  border-radius: 16px;
  box-shadow:
    0 24px 46px rgba(41, 42, 44, .19),
    0 7px 16px rgba(41, 42, 44, .11);
  transform: scale(1);
  transform-origin: center;
  transition:
    transform .28s cubic-bezier(.2, .72, .2, 1),
    box-shadow .28s ease;
  will-change: transform;
}

.service-card-face {
  box-shadow:
    0 12px 24px rgba(41, 42, 44, .08),
    0 3px 8px rgba(41, 42, 44, .06);
}

.service-card-flip:not(.is-flipped):not(.is-editing):hover,
.service-card-flip:not(.is-flipped):not(.is-editing):focus-within {
  z-index: 8;
  transform: scale(1.045);
  box-shadow:
    0 32px 62px rgba(41, 42, 44, .24),
    0 10px 22px rgba(41, 42, 44, .14);
}

.service-card-flip:not(.is-flipped):not(.is-editing):hover .service-card-face,
.service-card-flip:not(.is-flipped):not(.is-editing):focus-within .service-card-face {
  border-color: #c7c8cc;
}

.legal-footer {
  background: #ffffff;
  border-top-color: #dedee0;
}

@media (prefers-reduced-motion: reduce) {
  .service-card-flip {
    transition: none;
  }

  .service-card-flip:not(.is-flipped):not(.is-editing):hover,
  .service-card-flip:not(.is-flipped):not(.is-editing):focus-within {
    transform: scale(1);
  }
}

/* Final partner alignment: one shared logo zone, captions on one baseline, +5% scale. */
.partner-clinic-grid .partner-logo-card {
  grid-template-rows: 109px 18px;
  align-content: center;
  justify-items: center;
  gap: 12px;
}

.partner-clinic-grid .partner-logo-card img {
  width: min(100%, 189px);
  height: 109px;
  align-self: center;
  justify-self: center;
  object-fit: contain;
  object-position: 50% 50%;
}

.partner-clinic-grid .partner-logo-card > span {
  align-self: end;
  justify-self: center;
  text-align: center;
}

.partner-clinic-grid .partner-card-heer {
  grid-template-rows: 101px auto 18px;
  gap: 5px;
}

.partner-clinic-grid .partner-card-heer img {
  width: auto;
  max-width: 92px;
  height: 101px;
}

.partner-clinic-grid .partner-logo-card img[src$="/qa-plastic-surgery.png"] {
  width: min(100%, 158px);
  height: 109px;
}

.partner-clinic-grid .partner-logo-card img[src$="/view-plastic-surgery.png"] {
  width: min(100%, 199px);
  height: 109px;
}

.partner-clinic-grid .partner-logo-card img[src$="/chaum.png"] {
  object-fit: cover;
  object-position: 50% 50%;
}

.partner-clinic-grid .partner-logo-card img[src$="/gangnam-grand-eye-clinic.png"] {
  object-fit: cover;
  object-position: 50% 74%;
}

/* Copper finish matched to the HEER VIP mark, with readable dark-to-light contrast. */
.partner-count {
  color: #744b3e;
}

.partner-count strong,
.partner-count sup,
.partner-count span {
  background: linear-gradient(
    150deg,
    #4a3028 0%,
    #795043 20%,
    #c08a6f 38%,
    #825544 54%,
    #d1a083 70%,
    #71483b 84%,
    #432b25 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: saturate(.88) contrast(1.08);
  text-shadow:
    0 1px 0 rgba(255,255,255,.62),
    0 2px 2px rgba(70,42,33,.14);
}

.partner-count strong,
.partner-count sup,
.partner-count span {
  -webkit-text-stroke-color: rgba(82,49,39,.22);
}

/* Treatment cards: replace charcoal blue-grey with a soft pearl-grey surface. */
.service-front-label,
.service-card-back {
  color: #34383d;
  background: linear-gradient(145deg, #f1f2f3 0%, #e5e6e8 48%, #d8dade 100%);
}

.service-front-label strong,
.service-front-label em,
.service-front-label b,
.service-card-back strong,
.service-card-back em {
  color: #34383d;
}

.service-card-back small {
  color: #6c737a;
  -webkit-text-stroke: 0;
  text-shadow: 0 1px 0 rgba(255,255,255,.72);
}

.service-back-list,
.service-card-back p {
  color: #4b5056;
}

/* Keep every non-presentation section on the original HEER reference palette. */
:root {
  --heer-page-gradient: linear-gradient(
    135deg,
    #fffdfb 0%,
    #fcf7f3 50%,
    #faf3ee 100%
  );
}

body {
  background: #fffdfb;
}

/* Exact directional canvas wave, limited to the company presentation section. */
.identity-section {
  background-color: #fffdfb !important;
  background-image: none !important;
}

.identity-section > .identity-directional-wave {
  position: absolute;
  inset: 0;
  z-index: 0 !important;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  contain: paint;
  background: linear-gradient(
    135deg,
    #fffdfb 0%,
    #fdf9f6 35%,
    #f9f1ec 68%,
    #fffdfb 100%
  );
}

.identity-directional-wave-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.directional-wave-controls {
  display: none;
  position: fixed;
  top: 82px;
  right: 18px;
  z-index: 10000 !important;
  width: min(300px, calc(100vw - 36px));
  box-sizing: border-box;
  padding: 16px;
  border: 1px solid rgba(154, 107, 79, .16);
  border-radius: 16px;
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 10px 30px rgba(80, 60, 40, .1);
  backdrop-filter: blur(16px);
  color: #4a3a30;
  pointer-events: auto;
}

.directional-wave-controls-title,
.directional-wave-controls-subtitle {
  margin: 0;
}

.directional-wave-controls-title {
  margin-bottom: 6px;
  color: #9a6b4f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.directional-wave-controls-subtitle {
  margin-bottom: 12px;
  font-size: 11px;
  line-height: 1.45;
  opacity: .62;
}

.directional-wave-control {
  display: block;
  margin: 12px 0;
  font-size: 12px;
}

.directional-wave-control > span {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.directional-wave-control input {
  display: block;
  width: 100%;
  accent-color: #9a6b4f;
}

.directional-wave-control-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.directional-wave-control-actions button {
  padding: 9px 12px;
  border: 1px solid rgba(154, 107, 79, .22);
  border-radius: 999px;
  background: #fff;
  color: #6a4f3f;
  font-size: 12px;
  cursor: pointer;
}

.directional-wave-controls pre {
  margin: 12px 0 0;
  padding: 10px;
  overflow: auto;
  border-radius: 10px;
  background: rgba(255, 255, 255, .55);
  font-size: 11px;
}

.identity-section::before {
  display: none;
}

/* Updated company story: editorial copy on the right, six services aligned low. */
.identity-copy.page-layout-item {
  width: min(50vw, 800px);
}

.identity-copy h1 {
  margin-bottom: 14px;
  font-size: clamp(39.9px, 3.6225vw, 60.9px);
}

.identity-story-lead {
  margin: 0 0 20px;
  color: var(--dark);
  font-family: var(--font-editorial);
  font-size: clamp(22.05px, 1.8375vw, 30.45px);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -.025em;
  word-break: keep-all;
}

.identity-story-body {
  display: grid;
  gap: 11px;
}

.identity-story-body p {
  margin: 0;
  color: #5f6065;
  font-family: var(--font-body);
  font-size: clamp(13.65px, .9555vw, 15.75px);
  font-weight: 400;
  line-height: 1.68;
  letter-spacing: -.012em;
  word-break: keep-all;
}

.identity-story-body .identity-story-closing {
  color: #3f4044;
  font-weight: 500;
}

.identity-benefits.page-layout-item {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  width: min(88vw, 1440px);
  gap: clamp(10px, 1.15vw, 20px);
  align-items: stretch;
}

.identity-benefits > span {
  display: flex;
  min-height: 52px;
  align-items: center;
  padding: 8px 12px 8px 14px;
  color: #4d4e52;
  border-left: 2px solid rgba(166, 120, 59, .72);
  font-family: var(--font-body);
  font-size: clamp(11.55px, .819vw, 13.65px);
  font-weight: 500;
  line-height: 1.45;
  word-break: keep-all;
}

/* Golden English headings on the reverse of the medical-service cards. */
.service-card-back small {
  color: #93651f;
  font-weight: 600;
  -webkit-text-stroke: 0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .76);
}

/* Footer brand lockup. */
.legal-footer-brand p {
  margin-top: 5px;
  color: #85868a;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: .13em;
  line-height: 1.35;
}

@media (max-width: 1000px) {
  .identity-copy.page-layout-item {
    width: 55vw;
  }

  .identity-story-body {
    gap: 8px;
  }

  .identity-benefits.page-layout-item {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 90vw;
  }
}

@media (max-width: 700px) {
  .identity-section {
    min-height: 1120px;
  }

  .identity-copy.page-layout-item {
    width: 86vw;
  }

  .identity-story-lead {
    font-size: 22.05px;
  }

  .identity-story-body p {
    font-size: 13.65px;
    line-height: 1.62;
  }

  .identity-benefits.page-layout-item {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 88vw;
  }

  .identity-benefits > span {
    min-height: 44px;
    padding-block: 6px;
  }
}

/* Swipe carousel: drag between complete before/after cases, without an overlay divider. */
.case-dialog.case-dialog-swipe {
  width: min(980px, calc(100vw - 40px));
  max-height: calc(100svh - 40px);
  overflow: auto;
}

.case-swipe-gallery {
  width: 100%;
  margin-top: 22px;
}

.case-swipe-viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  border-radius: 14px;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.case-swipe-viewport.is-dragging {
  cursor: grabbing;
}

.case-swipe-viewport:focus-visible {
  outline: 3px solid rgba(147, 101, 31, .5);
  outline-offset: 4px;
}

.case-swipe-track {
  display: flex;
  width: 100%;
  transition: transform .46s cubic-bezier(.22, .74, .18, 1);
  will-change: transform;
}

.case-swipe-viewport.is-dragging .case-swipe-track {
  transition: none;
}

.case-swipe-slide {
  flex: 0 0 100%;
  min-width: 0;
  padding: 2px;
}

.case-swipe-title {
  margin: 0 0 10px;
  color: #6a6a70;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-align: left;
}

.case-swipe-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.case-swipe-pair figure {
  position: relative;
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(41, 42, 44, .12);
  border-radius: 12px;
  background: #e5e5e2;
  box-shadow: 0 14px 32px rgba(41, 42, 44, .11);
}

.case-swipe-pair img {
  display: block;
  width: 100%;
  aspect-ratio: 430 / 315;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

.case-swipe-pair figcaption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .62);
  border-radius: 999px;
  color: #fff;
  background: rgba(35, 35, 37, .56);
  backdrop-filter: blur(8px);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  pointer-events: none;
}

.case-swipe-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
  color: #55565a;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
}

.case-swipe-status i {
  display: flex;
  gap: 6px;
}

.case-swipe-status b {
  display: block;
  width: 18px;
  height: 3px;
  border-radius: 999px;
  background: #d5d5d8;
  transition: width .25s ease, background-color .25s ease;
}

.case-swipe-status b.active {
  width: 30px;
  background: #b28a43;
}

.case-swipe-instruction {
  margin: 10px 0 0;
  color: #66676b;
  font-size: 12px;
  text-align: center;
}

@media (max-width: 700px) {
  .case-dialog.case-dialog-swipe {
    width: calc(100vw - 24px);
    padding: 42px 14px 24px !important;
  }

  .case-swipe-gallery {
    margin-top: 17px;
  }

  .case-swipe-viewport {
    border-radius: 10px;
  }

  .case-swipe-pair {
    gap: 7px;
  }

  .case-swipe-pair figure {
    border-radius: 8px;
  }

  .case-swipe-pair figcaption {
    left: 7px;
    bottom: 7px;
    padding: 5px 7px;
    font-size: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .identity-directional-wave-canvas {
    animation: none;
  }
}

/* Each before/after category can contain complete posters or paired photographs. */
.case-swipe-combined { display: grid; place-items: center; background: #f4f3f0; border: 1px solid #dcd9d2; border-radius: 12px; overflow: hidden; }
.case-swipe-combined img { display: block; width: 100%; height: min(68svh, 680px); pointer-events: none; }
.case-swipe-description { margin: 16px 0 0; text-align: left; white-space: pre-wrap; line-height: 1.65; font-size: 14px; }
.case-swipe-navigation { display: flex; align-items: center; gap: 3px; }
.case-swipe-navigation button { display: grid; place-items: center; width: 36px; min-height: 36px; border: 0; background: transparent; color: #685539; cursor: pointer; }
.case-swipe-navigation button:disabled { opacity: .35; cursor: default; }.case-swipe-navigation button:focus-visible { outline: 2px solid #b28a43; outline-offset: 1px; border-radius: 4px; }
.case-swipe-dot::after { content: ""; display: block; width: 12px; height: 4px; border-radius: 8px; background: #d5d5d8; }.case-swipe-dot.active::after { width: 22px; background: #b28a43; }
@media (prefers-reduced-motion:reduce) { .case-swipe-track { transition: none; } }