/* Shared by Cafe24 visitor pages. The operations team's preview has its own viewport. */
:root {
  color-scheme: light;
  color-scheme: only light;
  --public-font: "Noto Sans KR", sans-serif;
  --public-footer-color: #edf3ee;
}
html > body[data-visitor-page][data-route] {
  --public-design-width: 390;
  --public-desktop-width: 480;
  --public-shell-width: calc(var(--public-desktop-width) * 1px);
  --public-content-scale: 1;
  width: min(100%, var(--public-shell-width));
  margin-inline: auto;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--public-font);
  color: var(--ink, #24251f);
  background: var(--public-page-background, #fff);
}

/* One physical header size for home, menu destinations and the open menu.
   Headers embedded inside Pen article artboards keep their own design scale. */
body[data-visitor-page] > .hs-head,
body[data-visitor-page] .hs-menu-panel > .hs-head {
  --header-height: 64px;
  --header-gutter: 20px;
  --header-logo-width: 128px;
  --header-button-size: 44px;
  --header-button-offset: -10px;
  --header-icon-size: 24px;
  flex: none;
  zoom: 1;
  height: calc(var(--header-height) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) max(var(--header-gutter), env(safe-area-inset-right, 0px)) 0 max(var(--header-gutter), env(safe-area-inset-left, 0px));
}
body[data-visitor-page] :is(body > .hs-head, .hs-menu-panel > .hs-head) .hs-logo img { width: var(--header-logo-width); }
body[data-visitor-page] :is(body > .hs-head, .hs-menu-panel > .hs-head) .hs-toggle {
  width: var(--header-button-size);
  height: var(--header-button-size);
  margin-right: var(--header-button-offset);
}
body[data-visitor-page] :is(body > .hs-head, .hs-menu-panel > .hs-head) .hs-toggle img {
  width: var(--header-icon-size);
  height: var(--header-icon-size);
}
@media (min-width: 480px) {
  body[data-visitor-page] > .hs-head,
  body[data-visitor-page] .hs-menu-panel > .hs-head {
    --header-height: 79px;
    --header-gutter: 24px;
    --header-logo-width: 158px;
    --header-button-size: 54px;
    --header-button-offset: -12px;
    --header-icon-size: 30px;
  }
}

/* Native controls and the numeric clock in the original Pen export. */
body[data-visitor-page] :is(button, input, select, textarea, optgroup, option, .hs-status) {
  font-family: var(--public-font);
}
body[data-visitor-page] [data-pencil-id][style*="font-family: Inter" i] {
  font-family: var(--public-font) !important;
}
body[data-visitor-page] :is(textarea, select, input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"]) {
  color: var(--ink, #24251f);
}

/* Use the same reading ink on home, directory, article and contact surfaces.
   Titles, status colors, image overlays and reversed panels have separate roles. */
body[data-visitor-page] :is(
  .hs-home .hs-intro p, .hs-story p, .hs-menu-row small, .hs-menu-more a, .hs-menu-foot, .hs-foot,
  .live-story p, .live-detail > p, .live-detail dd, .live-article > p:not(.live-summary),
  .live-seed-summary, .live-photo figcaption, .live-byline, .live-article .live-date,
  .hf-author-article p, .hf-clinic-section > p, .hf-clinic-map p, .hf-related p, .hf-coming p,
  .clinic-card .clinic-card-fact, .live-map-label, .live-map-status, .live-location-status,
  .hf-source p, .hjc-article .hjc-toc p, .hjc-prose .hf-photo-note p, .hp-photo figcaption,
  .hj-article-author-role, .hjc-sources-v8, .hjc-sources-v8 .hjc-sources-title, .hjc-sources-v8 a,
  .hf-muted, .hf-date, .hf-count,
  .brand-small, .brand-eyebrow, .brand-privacy .privacy-intro .privacy-date, .brand-page .inquiry-form p:not(.notice)
):not(:where(.brand-dark *, .hf-profile-info *, .hf-care-summary *, .hjc-key *, .hf-signals *, .hf-do-dont *, .hp-do-dont *)) {
  color: var(--ink, #24251f);
}
/* Older Pen text nodes carry literal inline colors. Match only their neutral text ink. */
body[data-visitor-page] [data-pencil-id][style*="; color: #62675f" i] {
  color: var(--ink, #24251f) !important;
}

@media (min-width: 480px) {
  html > body[data-visitor-page][data-route] {
    --public-content-scale: calc(var(--public-desktop-width) / var(--public-design-width));
  }
}

@media (pointer: coarse) and (max-width: 767px),
       (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  html > body[data-visitor-page][data-route] { --public-shell-width: 100%; }

  /* Safari derives the underpage color from both html and body. Share their
     backing color, while keeping the header and content surfaces white. */
  html:has(> body[data-visitor-page] > [data-shared-footer]):not(:has(.hf-sticky-cta, .hj-shared-sticky)) {
    --public-page-background: #fff;
    background-color: var(--public-page-background);
  }
  html[data-public-bottom-edge]:has(> body[data-visitor-page] > [data-shared-footer]):not(:has(.hf-sticky-cta, .hj-shared-sticky, .hs-menu-dialog[open])) {
    --public-page-background: var(--public-footer-color);
  }
  body[data-visitor-page]:has(> [data-shared-footer]) > :is(header, main) { background-color: #fff; }
  body[data-visitor-page]:has(> [data-shared-footer]) > .public-pager {
    margin: 0;
    padding: 24px;
    background-color: #fff;
  }
}

/* Flowing pages scale from the same design grid as the home. Fixed Pen artboards
   size themselves to their container. Each piece of content is scaled once. */
body[data-visitor-page]:not([data-route="home"]) > :is(header:not(.hs-head), main:not(:has(.pen-viewport)), .public-pager),
body[data-visitor-page] .hs-menu-panel > main {
  zoom: var(--public-content-scale);
}
body[data-visitor-page][data-route] :is(.brand-page, .detail-pen-screen) { max-width: none; }
/* The map SDK reads pointer positions and canvas dimensions in screen pixels. */
body[data-visitor-page] .hf-document .hf-clinic-map-canvas { zoom: calc(1 / var(--public-content-scale)); }

/* Use the full remaining height inside the column on short pages. The pager is
   emitted after the footer on some lists and belongs with the list. */
body[data-visitor-page]:has(> .hs-foot) { display: flex; flex-direction: column; }
body[data-visitor-page]:has(> .hs-foot) > :is(header, main, .public-pager) { flex: none; }
/* The approved Pen footer is shared by regular and legacy visitor pages.
   Keep equal physical gutters even on devices with asymmetric safe areas. */
body[data-visitor-page] .hs-foot[data-shared-footer] {
  --footer-gutter: max(20px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  box-sizing: border-box;
  gap: 14px;
  width: 100%;
  padding: 15px var(--footer-gutter) calc(15px + env(safe-area-inset-bottom, 0px));
  background: var(--public-footer-color);
  color: var(--ink, #24251f);
  font-family: var(--public-font);
  font-weight: 400;
  text-align: center;
}
body[data-visitor-page] > .hs-foot[data-shared-footer] { order: 1; flex: 1 0 auto; }
body[data-visitor-page] .hs-foot[data-shared-footer] nav { display: flex; flex-direction: column; gap: 0; width: 100%; margin: 0; }
body[data-visitor-page] .hs-foot[data-shared-footer] .hs-foot-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0 16px; min-height: 40px; margin: 0; padding: 0;
}
body[data-visitor-page] .hs-foot[data-shared-footer] .hs-foot-settings { display: contents; }
body[data-visitor-page] .hs-foot[data-shared-footer] .hs-foot-settings:empty { display: none; }
body[data-visitor-page] .hs-foot[data-shared-footer] :is(nav a, .hja-consent-settings) {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent; box-shadow: none; color: var(--ink, #24251f);
  font-family: var(--public-font); font-size: 13px; font-weight: 400;
  line-height: 20px; letter-spacing: 0; text-align: center; text-decoration: none;
  white-space: nowrap; cursor: pointer;
}
body[data-visitor-page] .hs-foot[data-shared-footer] :is(nav a, .hja-consent-settings):focus-visible {
  outline: 2px solid var(--orange, #f15a3b); outline-offset: 4px;
}
body[data-visitor-page] .hs-foot[data-shared-footer] .hs-foot-rule { flex: none; height: 1px; width: 100%; background: #24251f1a; }
body[data-visitor-page] .hs-foot[data-shared-footer] .hs-foot-meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0 12px; min-height: 38px; margin: 0; padding: 0;
}
body[data-visitor-page] .hs-foot[data-shared-footer] .hs-foot-meta small {
  margin: 0; color: var(--ink, #24251f); font-family: var(--public-font);
  font-size: 12px; font-weight: 400; line-height: 18px; letter-spacing: 0;
}

/* Let the menu slide along the physical column. Keeping its animated panel out
   of the zoomed content also makes opening and closing use the same distance. */
body[data-visitor-page] .hs-menu-panel {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
body[data-visitor-page] .hs-menu-panel > main { display: flex; flex: 1 0 auto; }
body[data-visitor-page] .hs-menu { min-height: 0; padding-bottom: max(28px, env(safe-area-inset-bottom)); }

/* Keep the current page in view as the menu slides across its column. */
html:has(.hs-menu-dialog[open]) { overflow: hidden; }
html:has(.hs-menu-dialog[open][data-scroll-gutter]) { scrollbar-gutter: stable; }
.hs-menu-dialog {
  position: fixed;
  inset: 0;
  width: min(100%, var(--public-shell-width));
  max-width: none;
  height: 100%;
  height: 100dvh;
  max-height: none;
  margin: 0 auto;
  padding: 0;
  border: 0;
  /* Offscreen close-button focus must not scroll the clipping layers horizontally. */
  overflow: clip;
  background: transparent;
  color: inherit;
  font: inherit;
}
.hs-menu-dialog::backdrop { background: transparent; }
.hs-menu-dialog .hs-menu-viewport { height: 100%; overflow: clip; background: transparent; }
.hs-menu-dialog .hs-menu-panel {
  height: 100%;
  min-height: 0;
  overflow: hidden auto;
  overscroll-behavior: contain;
  animation: none;
  transform: translateX(100%);
}
.hs-menu-dialog[data-open] .hs-menu-panel { transform: translateX(0); }
.hs-menu-dialog .hs-menu-panel > header { flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .hs-menu-dialog .hs-menu-panel { transition: transform 280ms cubic-bezier(.22, .68, .15, 1); }
}

/* Fixed controls are positioned against the viewport, independently of main. */
body[data-visitor-page] :is(.hf-sticky-cta, .hj-shared-sticky) {
  box-sizing: border-box;
  width: min(100%, var(--public-shell-width));
  padding-inline: max(calc(20px * var(--public-content-scale)), env(safe-area-inset-left)) max(calc(20px * var(--public-content-scale)), env(safe-area-inset-right));
  padding-bottom: max(calc(14px * var(--public-content-scale)), env(safe-area-inset-bottom));
}
body[data-visitor-page] :is(.hf-sticky-cta, .hj-shared-sticky) > * { zoom: var(--public-content-scale); }
body[data-visitor-page] .hf-toast { box-sizing: border-box; width: calc(min(100%, var(--public-shell-width)) - 40px); }

/* Column directory: approved header stays unchanged; search is one white field. */
.columns-directory { width: 100%; background: #fff; }
.columns-directory-content { display: flex; flex-direction: column; gap: 24px; padding: 24px 20px 32px; }
.columns-directory-intro { display: grid; gap: 4px; }
.columns-directory .columns-directory-intro h1 {
  margin: 0;
  color: var(--ink, #24251f);
  font-size: 24px;
  line-height: 34px;
  font-weight: 800;
  letter-spacing: -.04em;
}
.columns-directory .columns-directory-intro p { margin: 0; color: #62675f; font-size: 14px; line-height: 21px; }
.columns-directory .columns-search {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  height: 48px;
  padding-left: 12px;
  border: 2px solid var(--orange, #F15A3B);
  border-radius: 6px;
  background: #fff;
}
.columns-directory .columns-search:focus-within { box-shadow: 0 0 0 3px #f15a3b20; }
.columns-directory .columns-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  color: var(--ink, #24251f);
  font-size: 16px;
  line-height: 22px;
}
.columns-directory .columns-search input::placeholder { color: #62675f; opacity: 1; }
.columns-directory .columns-search input:focus-visible { outline: none !important; }
/* Keep the native search-clear behavior, with the same green as the search icon. */
.columns-directory .columns-search input[type="search"]::-webkit-search-cancel-button {
  --search-clear-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3L3 13' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-inline: 4px 0;
  background-color: var(--green, #245440);
  -webkit-mask: var(--search-clear-icon) center / contain no-repeat;
  mask: var(--search-clear-icon) center / contain no-repeat;
  cursor: pointer;
}
.columns-directory .columns-search-button {
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--green, #245440);
  border-radius: 4px;
}
.columns-topics { min-width: 0; }
.columns-topics-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 38px; }
.columns-directory .columns-topics-heading h2 { color: var(--green, #245440); font-size: 17px; line-height: 26px; font-weight: 700; }
.columns-topics-heading > span { flex: none; color: #62675f; font-size: 12px; line-height: 20px; }