/* ============================================================
   Rebeauty web — event detail (detail agent, CONTRACT §9)
   1. shared inquiry form  .rb-consult / .rb-form      (_inquiry_form.php — classic + panel; figma-editorial F1–F13)
   2. classic polish       .ds-classic …               (facts rhythm, form spacing)
   3. detail = panel       .ds / .ds-*                 (_detail_panel.php; figma-detail C5–C9, C11, C12, C14/15, C18, C21, C23, C28)
   Container queries on main (core): ≥700 wide column, ≥960 two columns (purchase panel), ≥1100 desktop web.
   The form is its own container (rbform) so its label rows adapt wherever it sits.
   ============================================================ */

/* ---------------------------------------------------------- 1. inquiry form */
.site .rb-consult, .site .ds { --rb-field-line: color-mix(in srgb, var(--fg) 52%, var(--surface)); }   /* ≥3:1 field boundary, light and dark */
.site .rb-consult {
  margin-top: 32px; scroll-margin-top: calc(var(--ds-top, 64px) + 12px);
}
.site .rb-consult-head { margin-bottom: 18px; }
.site .rb-consult-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 1.25rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em;
}
.site .rb-consult-title::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); }
.site .rb-consult-sub { margin-top: 6px; color: var(--mut); font-size: .9375rem; line-height: 1.55; }

.site .rb-form { container: rbform / inline-size; display: grid; gap: 16px; }
.site .rb-field { display: grid; gap: 6px; min-width: 0; }
.site .rb-ctl { min-width: 0; }
.site .rb-label { font-size: .875rem; font-weight: 600; line-height: 1.35; color: var(--fg); }
.site .rb-req {
  display: inline-block; width: 5px; height: 5px; margin-inline-start: 3px; vertical-align: .55em;
  border-radius: 50%; background: var(--danger, #d92d20);
}
.site .rb-input {
  display: block; width: 100%; min-height: 44px; padding: 10px 14px; margin: 0;
  border: 1px solid var(--rb-field-line); border-radius: var(--radius-input, 6px);
  background: var(--surface); color: var(--fg);
  font: inherit; font-size: 1rem; line-height: 1.4;
  transition: border-color .15s, box-shadow .15s;
}
.site .rb-input::placeholder { color: var(--mut); opacity: 1; }
.site .rb-textarea { min-height: 132px; resize: vertical; }
@media (hover: hover) { .site .rb-input:hover { border-color: color-mix(in srgb, var(--fg) 70%, var(--surface)); } }
.site .rb-input:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.site .rb-input:user-invalid { border-color: var(--danger, #d92d20); }
.site .rb-hint { margin-top: 6px; color: var(--mut); font-size: .8125rem; line-height: 1.5; }
.site .rb-hint--above { margin: 0 0 6px; }
.site .rb-hint a {
  display: inline-flex; align-items: center; gap: 2px; color: var(--accent-text, var(--brand)); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
}

/* consent bar (F9) — a real 20px checkbox, never a text-input box */
.site .rb-agree {
  display: flex; align-items: flex-start; gap: 10px; min-height: 48px; padding: 12px 14px;
  border-radius: var(--radius-input, 6px); background: var(--ui, var(--soft));
  font-size: .9375rem; font-weight: 600; line-height: 1.45; color: var(--fg); cursor: pointer;
}
.site .rb-agree input[type="checkbox"] {
  appearance: auto; -webkit-appearance: checkbox; flex: none;
  width: 20px; height: 20px; min-height: 0; margin: 1px 0 0; padding: 0;
  accent-color: var(--brand); cursor: pointer;
}
.site .rb-agree input[type="checkbox"]:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* submit = filled CTA pill (atoms .rb-cta) stretched on narrow forms */
.site .rb-form-submit { width: 100%; font-family: var(--font); cursor: pointer; -webkit-appearance: none; appearance: none; }
.site .rb-form-submit > span { flex: 1 1 auto; text-align: center; }
.site .rb-form-note { margin-top: 18px; color: var(--mut); font-size: .75rem; line-height: 1.55; }

/* states (anchored at #consult): error banner · success card (F12 embossed disc + F13 message) */
.site .rb-form-err {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--danger, #d92d20) 45%, transparent); border-radius: var(--radius-input, 6px);
  background: color-mix(in srgb, var(--danger, #d92d20) 8%, var(--surface)); color: var(--fg);
  font-size: .9375rem; font-weight: 600; line-height: 1.45;
}
.site .rb-form-err svg { flex: none; margin-top: 2px; color: var(--danger, #d92d20); }
.site .rb-done {
  display: grid; justify-items: center; gap: 6px; padding: 30px 20px 26px; text-align: center;
  border: 1px solid color-mix(in srgb, var(--accent-2) 35%, var(--line)); border-radius: 12px;
  background: color-mix(in srgb, var(--accent-2) 5%, var(--surface));
}
.site .rb-done-disc {
  display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 8px; border-radius: 50%;
  background: linear-gradient(145deg, var(--soft), var(--surface)); border: 1px solid var(--line);
  box-shadow: inset .5px .5px 1px rgba(0, 0, 0, .12);
}
.site .rb-done-disc > span {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--accent-2); color: var(--accent-2-fg, #fff);
}
.site .rb-done-title { font-size: 1.25rem; font-weight: 700; line-height: 1.35; }
.site .rb-done-msg { max-width: 32em; color: var(--mut); font-size: .9375rem; line-height: 1.6; }
.site .rb-done .rb-cta { margin-top: 12px; }
.site .rb-done:focus, .site .rb-form-err:focus { outline: none; }

/* label-left rows (F1) when the form itself is wide enough */
@container rbform (min-width: 520px) {
  .site .rb-field { grid-template-columns: 8.75rem minmax(0, 1fr); column-gap: 18px; align-items: start; }
  .site .rb-label { padding-top: 12px; }
  .site .rb-field--top .rb-label { padding-top: 0; }
  .site .rb-field--end > * { grid-column: 2; }
  .site .rb-form-submit { width: auto; min-width: 220px; justify-self: start; }
}
html[lang="th"] .site .rb-consult, html[lang="th"] .site .rb-form { line-height: 1.6; }
html[lang="ko"] .site .rb-consult { word-break: keep-all; }

/* ---------------------------------------------------------- 2. classic detail (event.php) polish */
.site .st-detail #consult { scroll-margin-top: 76px; }
.site.ds-classic .st-detail .rb-consult { margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--line); }
.site.ds-classic .st-facts { gap: 0; margin-top: 1.1rem; }
.site.ds-classic .st-facts .st-fact {
  padding-block: .6rem; border-bottom: 1px solid color-mix(in srgb, var(--fg) 8%, transparent); line-height: 1.55;
}
.site.ds-classic .st-facts .st-fact:last-child { border-bottom: 0; }
.site.ds-classic .st-fact dd { min-width: 0; overflow-wrap: anywhere; }
/* desktop web: detail images are ~1:3 posters — at full container width (1360px) each one is ~2400px tall.
   Keep them a readable reading column (B4). */
@media (min-width: 1024px) {
  .site.dt-web.ds-classic .st-sections { max-width: 860px; margin-inline: auto; }
}
/* price = plain (CONTRACT §14): current price only — no rate, no struck list-price row */
.site.pr-plain .st-detail .st-price-rate, .site.pr-plain .st-detail .st-price-line--was,
.site.pr-plain .st-sticky-cta .st-price-rate { display: none; }

/* ---------------------------------------------------------- 3. detail = panel */
/* JS-only controls ship with [hidden]; keep it winning over the display rules below */
.site .ds [hidden] { display: none !important; }
.site .ds {
  --ds-top: 56px;                  /* sticky header height (rb-detail JS measures the real one) */
  --ds-tabs-h: 47px;               /* tab row 46 + 1px baseline */
  --ds-cta-bottom: 0px;            /* bottom tab bar height (JS) */
  --ds-line: color-mix(in srgb, var(--fg) 11%, transparent);
  --ds-gut: var(--pad, 16px);
}
@media (min-width: 700px) { .site .ds { --ds-top: 62px; --ds-gut: 24px; } }
@media (max-width: 699px) { .site.mnav-tabs .ds { --ds-cta-bottom: 54px; } }   /* no-JS fallback = measured tab bar */
@media (min-width: 1024px) { .site.dt-app.mnav-tabs .ds { --ds-cta-bottom: 54px; } .site.dt-app.mnav-float .ds { --ds-cta-bottom: 72px; } }
@container main (min-width: 700px) { .site .ds { --ds-tabs-h: 57px; } }

.site .ds-wrap { padding-top: 2px; padding-bottom: 36px; }
.site .ds-crumb {
  display: flex; align-items: center; gap: 6px; min-height: 44px; overflow: hidden; white-space: nowrap;
  color: var(--mut); font-size: .8125rem;
}
/* each crumb is a 44px-tall target (B14); the ring sits inside because the row clips overflow */
.site .ds-crumb a { min-width: 0; padding-block: 12px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; color: var(--mut); }
.site .ds-crumb a:focus-visible { outline: 2px solid var(--border, var(--brand)); outline-offset: -2px; border-radius: 4px; }
.site .ds-crumb a:last-child { color: var(--fg); font-weight: 600; }
@media (hover: hover) { .site .ds-crumb a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 2px; } }
.site .ds-crumb svg { flex: none; opacity: .55; }

.site .ds-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.site .ds-media-col, .site .ds-buy, .site .ds-body { min-width: 0; }

/* media: square banner, contain on a blurred copy of itself (never a lossy crop) */
.site .ds-media {
  position: relative; isolation: isolate; margin: 0; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: var(--radius, 12px); background: var(--soft);
}
.site .ds-media-bg {
  position: absolute; inset: -10%; z-index: -1; width: 120%; height: 120%; max-width: none;
  object-fit: cover; filter: blur(30px) saturate(1.15); opacity: .6;
}
.site .ds-media-img { position: relative; width: 100%; height: 100%; object-fit: contain; }

/* thumb strip of detail images (C21) — jump links into the detail section */
.site .ds-strip { display: flex; gap: 8px; margin-top: 10px; padding: 0; list-style: none; }
.site .ds-strip > li { flex: 0 0 calc((100% - 40px) / 6); min-width: 0; }
.site .ds-thumb {
  position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: 8px; background: var(--soft); border: 1px solid var(--ds-line);
}
.site .ds-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: transform .3s var(--rb-ease, ease); }
@media (hover: hover) { .site .ds-thumb:hover img { transform: scale(1.04); } }
.site .ds-thumb:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.site .ds-thumb-n {
  position: absolute; inset-inline-end: 0; bottom: 0; min-width: 18px; height: 18px; padding-inline: 4px;
  display: grid; place-items: center; border-start-start-radius: 4px;
  background: rgba(17, 17, 17, .8); color: #fcfdff; font-size: .6875rem; line-height: 1; font-variant-numeric: tabular-nums;
}
.site .ds-thumb-more {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(17, 17, 17, .78); color: #fff; font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* purchase panel (C5): stacked = flat block under the media; ≥960 = bordered sticky card */
.site .ds-buy-card { display: block; }
.site .ds-buy-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; }
.site .ds-buy-eyebrow { min-width: 0; color: var(--accent-text, var(--brand)); font-size: .875rem; font-weight: 600; }
.site .ds-buy-acts { display: flex; gap: 2px; margin-inline-end: -10px; }
.site .ds-icon-btn, .site .rb-like.ds-icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--mut); cursor: pointer;
}
.site .ds-icon-btn svg { width: 20px; height: 20px; }
@media (hover: hover) { .site .ds-icon-btn:hover { background: var(--ui, var(--soft)); color: var(--fg); } }
.site .ds-icon-btn.is-done { color: var(--accent-2); }
.site .rb-like.ds-icon-btn[aria-pressed="true"] { color: var(--accent-2); }
.site .ds-icon-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 0; }

.site .ds-buy-title {
  margin-top: 4px; font-size: 1.375rem; font-weight: 700; line-height: 1.32; letter-spacing: -.02em; overflow-wrap: anywhere;
}
/* hospital · region (C12): every segment carries its leading "·"; the inner row is pulled 1.1em into a clipped
   gutter, so the dot of whichever segment starts a line (first one, or one that wrapped) is never visible */
.site .ds-buy-meta { margin-top: 6px; overflow: hidden; color: var(--mut); font-size: .9375rem; line-height: 1.45; }
.site .ds-meta-in { display: flex; flex-wrap: wrap; margin-inline-start: -1.1em; }
.site .ds-meta-in > span { min-width: 0; overflow-wrap: anywhere; }   /* the dot follows the page direction; <bdi> isolates the name */
.site .ds-meta-in > span::before { content: "·"; display: inline-block; width: 1.1em; text-align: center; opacity: .7; }
.site .ds-buy-rating { display: flex; align-items: center; gap: 5px; margin-top: 10px; color: var(--mut); font-size: .875rem; }
.site .ds-buy-rating svg { color: var(--accent-2); fill: currentColor; }
.site .ds-buy-rating b { color: var(--fg); font-weight: 700; }
.site .ds-buy-price { margin-top: 14px; }
.site .ds-buy-price .rb-price { font-size: 1.25rem; column-gap: 8px; }
.site .ds-buy-price .rb-price-was { font-size: .62em; }
/* price = plain (CONTRACT §14): current price only, in the panel and in the sticky bar */
.site.pr-plain .ds-buy-price :is(.rb-price-rate, .rb-price-was), .site.pr-plain .ds-cta .rb-price-rate { display: none; }
.site .ds-buy-vat { margin-top: 4px; color: var(--mut); font-size: .75rem; }

/* fact icon rows (C7) + period status */
.site .ds-rows { display: grid; gap: 10px; margin-top: 18px; padding: 18px 0 0; list-style: none; border-top: 1px solid var(--line); font-size: .9375rem; }
.site .ds-rows > li { display: flex; align-items: flex-start; gap: 9px; line-height: 1.5; }
.site .ds-rows > li > svg { flex: none; margin-top: 2px; color: var(--mut); }
.site .ds-row-txt { min-width: 0; overflow-wrap: anywhere; }
.site .ds-row-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.site .ds-status {
  display: inline-flex; align-items: center; gap: 5px; margin-inline-start: 8px; white-space: nowrap; vertical-align: 1px;
  color: var(--fg); font-size: .8125rem; font-weight: 700;
}
.site .ds-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); }
.site .ds-status.is-soon { color: var(--danger, #d92d20); }
.site .ds-status.is-soon::before { background: var(--danger, #d92d20); }
.skin-dark .ds-status.is-soon { color: var(--fg); }

/* real-data chips → filtered lists (C8 look, atoms .rb-chip) */
/* the link is a 44px-tall box (B14 touch target); the visible 28px chip sits inside it */
.site .ds-chips { display: flex; flex-wrap: wrap; gap: 0 8px; margin-top: 8px; padding: 0; list-style: none; }
.site .ds-chips > li { min-width: 0; max-width: 100%; }
.site .ds-chip-go { display: flex; align-items: center; min-height: 44px; max-width: 100%; color: inherit; text-decoration: none; }
.site .ds-chips .rb-chip { min-height: 28px; padding-inline: 9px 10px; font-size: .8125rem; }
@media (hover: hover) { .site .ds-chip-go:hover .rb-chip { text-decoration: underline; text-underline-offset: 2px; } }
.site .ds-chip-go:focus-visible { outline: none; }
.site .ds-chip-go:focus-visible .rb-chip { outline: 2px solid var(--border, var(--brand)); outline-offset: 2px; }

/* dual CTA (C9): consult form + messenger deep link */
.site .ds-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.site .ds-ctas .rb-cta { flex: 1 0 auto; max-width: 100%; }
.site .ds-ctas .rb-cta > span { flex: 1 1 auto; text-align: center; }
.site .ds-msg-id { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 12px; color: var(--mut); font-size: .875rem; }
.site .ds-msg-id > svg { flex: none; }
.site .ds-msg-id > span { min-width: 0; overflow-wrap: anywhere; color: var(--fg); }
.site .ds-copy {
  position: relative; min-height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--fg); font: inherit; font-size: .75rem; font-weight: 600; cursor: pointer;
}
.site .ds-copy::after { content: ""; position: absolute; inset: -7px -2px; }

/* anchor tabs (C12): sticky under the header, equal tabs on one baseline */
.site .ds-tabs {
  position: sticky; top: var(--ds-top); z-index: 20; gap: 0; padding-inline: 0;
  background: var(--bg); border-bottom-color: var(--ds-line);
}
.site .ds-tabs .rb-tab { flex: 1 0 auto; justify-content: center; padding-inline: 8px; font-size: .9375rem; }
@container main (min-width: 700px) { .site .ds-tabs .rb-tab { padding-inline: 12px; font-size: 1.0625rem; } }
@media (max-width: 699px) {
  .site .ds-tabs { max-width: none; margin-inline: calc(var(--ds-gut) * -1); padding-inline: calc(var(--ds-gut) - 8px); }
}

/* section rhythm (C14 dot titles · C15 hairlines) */
.site .ds-sec, .site .ds .rb-consult { padding-block: 30px; border-top: 1px solid var(--ds-line); scroll-margin-top: calc(var(--ds-top) + var(--ds-tabs-h) - 1px); }
.site .ds-tabs + .ds-sec { padding-top: 22px; border-top: 0; }
.site .ds .rb-consult { margin-top: 0; padding-bottom: 8px; }
.site .ds-sec-title {
  display: flex; align-items: center; gap: 8px; margin-bottom: 18px;
  font-size: 1.125rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em;
}
.site .ds-sec-title::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); }
.site .ds .rb-consult-title { font-size: 1.125rem; }
.site .ds-sub-title { margin: 28px 0 14px; font-size: 1rem; font-weight: 700; line-height: 1.35; }
.site .ds-empty { padding: 18px; border-radius: var(--radius-sm, 8px); background: var(--soft); color: var(--mut); font-size: .9375rem; }

/* fold-and-expand detail images (C18) — JS adds .is-folded; without JS every image shows */
.site .ds-fold { --ds-fold-h: 1100px; position: relative; }
.site .ds-fold-in img { display: block; width: 100%; height: auto; }
.site .ds-fold.is-folded:not(.is-short) { max-height: var(--ds-fold-h); overflow: hidden; }
.site .ds-fold.is-folded:not(.is-short)::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 110px; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 0%, transparent), var(--bg) 92%);
}
.site .ds-fold-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 48px; margin-top: 0;
  border: 1px solid var(--rb-field-line, var(--border, var(--line))); border-radius: var(--radius-input, 4px);
  background: var(--surface); color: var(--fg); font: inherit; font-size: .9375rem; font-weight: 500; cursor: pointer;
}
.site .ds-fold-btn svg { color: var(--mut); transition: transform .2s; }
.site .ds-fold-btn[aria-expanded="true"] { margin-top: 16px; }
.site .ds-fold-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (hover: hover) { .site .ds-fold-btn:hover { background: var(--ui-hover, var(--soft)); } }
.site .ds-fold-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 699px) {
  .site .ds-fold { margin-inline: calc(var(--ds-gut) * -1); }
}

/* facts as label │ value rows (F13 / C20 adaptation) */
.site .ds-facts { display: grid; margin: 0; border-top: 1px solid var(--ds-line); }
.site .ds-fact {
  display: grid; grid-template-columns: 6.75rem minmax(0, 1fr); gap: 4px 14px; padding-block: 12px;
  border-bottom: 1px solid var(--ds-line); font-size: .9375rem; line-height: 1.55;
}
.site .ds-fact dt { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; color: var(--mut); font-weight: 500; }
.site .ds-fact dt::after { content: ""; flex: none; width: 12px; height: 1px; margin-top: .78em; background: var(--line); }
.site .ds-fact dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.site .ds-fact--long { grid-template-columns: minmax(0, 1fr); }
.site .ds-fact--long dt::after { display: none; }
.site .ds-fact--long dd { color: var(--fg); }

/* clinic strip (C23 link bar / C25 header) */
.site .ds-hos {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 12px 14px;
  padding: 16px; border-radius: var(--radius-sm, 8px); background: var(--soft); border: 1px solid var(--ds-line);
}
.site .ds-hos-mono {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 8px;
  background: var(--ramp-3, var(--surface)); border: 1px solid var(--ds-line);
  color: var(--accent-text, var(--brand)); font-family: var(--font-head); font-size: 1.375rem; font-weight: 700;
}
.site .ds-hos-txt { min-width: 0; }
.site .ds-hos-name { font-size: 1.0625rem; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.site .ds-hos-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; margin-top: 4px; color: var(--mut); font-size: .8125rem; line-height: 1.5; }
.site .ds-hos-stats > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.site .ds-hos-stats svg { opacity: .8; }
.site .ds-hos-rt svg { color: var(--accent-2); fill: currentColor; }
.site .ds-hos-rt b { color: var(--fg); }
.site .ds-hos-go { grid-column: 1 / -1; justify-self: stretch; }
.site .ds-hos-go > span { flex: 1 1 auto; text-align: center; }

.site .ds-rel { margin-top: 0; }
/* related offers (A2): the body column is only ~570px in a 1024 two-column page, too narrow for the layout's card-min
   (280px → one 568px card per row). Use its own track minimum: 2 columns there, 3 at 1440, never fewer than 2.
   List-row cards (horizontal / ranked) keep their own one-column rules. */
@media (min-width: 700px) {
  .site:not(.card-horizontal):not(.card-ranked) .st-grid.ds-rel {
    grid-template-columns: repeat(auto-fill, minmax(min(200px, calc((100% - var(--gap, 18px)) / 2)), 1fr));
  }
}

/* mobile / app-column sticky dual CTA (C11) — only with sticky_cta (.cta-on) and while the layout is stacked.
   z 29: under the sticky headers (30) and the tab bar / float capsule (35) — at the page end the bar returns to its
   in-flow spot and scrolls away with the page, so it must pass UNDER the header, never over it (P3). */
.site .ds-cta { display: none; }
.site.cta-on .ds-cta {
  position: sticky; bottom: var(--ds-cta-bottom); z-index: 29;
  display: flex; align-items: center; gap: 10px;
  padding: 10px var(--ds-gut) calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  transition: transform .25s var(--rb-ease, ease), opacity .2s, visibility .25s;
}
.site.cta-on.mnav-tabs .ds-cta { padding-bottom: 10px; }
.site.cta-on .ds-cta.is-away { transform: translateY(100%); opacity: 0; visibility: hidden; }
.site .ds-cta-price { flex: 1 1 auto; min-width: 0; font-size: 1rem; }
.site .ds-cta-btns { display: flex; flex: none; gap: 8px; }
/* text on a brand fill → the contrast-safe pair (CONTRACT §14); hover adds a halo instead of shifting the fill */
.site .ds-bar-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 16px;
  border: 1px solid transparent; border-radius: var(--radius-btn, 10px);
  background: var(--brand-safe, var(--brand)); color: var(--brand-safe-fg, var(--accent-fg, #fff));
  font-size: .9375rem; font-weight: 700; line-height: 1.1; white-space: nowrap; text-decoration: none;
  transition: box-shadow .15s;
}
.site .ds-bar-btn--ghost { padding-inline: 12px; background: var(--surface); color: var(--fg); border-color: color-mix(in srgb, var(--fg) 22%, transparent); }
@media (hover: hover) {
  .site .ds-bar-btn:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-safe, var(--brand)) 24%, transparent); }
  .site .ds-bar-btn--ghost:hover { background: var(--ui-hover, var(--soft)); box-shadow: none; }
}
.site .ds-bar-btn:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
@container main (max-width: 419px) {
  .site .ds-bar-btn--ghost { padding-inline: 0; width: 44px; }
  .site .ds-bar-btn--ghost > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.site.pv-thumb .ds-cta { display: none; }
/* FAB (chrome's .rb-fab — same consult job) steps aside wherever this bar is laid out (P1/A5). The bar shows while
   container main < 960px: always in the 600px dt-app column (≥1024), and below ~960px viewport elsewhere.
   html.ds-cta-on is set by the panel script from the bar's real display (covers the scrollbar-width edge too). */
@media (max-width: 959px) { .site.ds-panel.cta-on .rb-fab { display: none; } }
@media (min-width: 1024px) { .site.ds-panel.cta-on.dt-app .rb-fab { display: none; } }
html.ds-cta-on .site .rb-fab { display: none; }
/* two columns (container main ≥960 — dt-web/dt-wide ≥960, dt-app 960–1023): the sticky purchase panel keeps its own
   consult + messenger CTAs on screen, and on laptop heights (1280×720, 1024×700) the fixed FAB lands on them */
@media (min-width: 960px) { .site.ds-panel:not(.dt-app) .rb-fab { display: none; } }
@media (min-width: 960px) and (max-width: 1023px) { .site.ds-panel.dt-app .rb-fab { display: none; } }

/* wider single column (tablet / wide app column): roomier media, card panel, side-by-side clinic strip */
@container main (min-width: 700px) {
  .site .ds-media { aspect-ratio: 4 / 3; }
  .site .ds-strip { gap: 10px; }
  .site .ds-strip > li { flex-basis: calc((100% - 50px) / 6); max-width: 120px; }
  .site .ds-buy-card { padding: 18px 20px 20px; border: 1px solid var(--line); border-radius: var(--radius-sm, 8px); background: var(--surface); }
  .site .ds-sec, .site .ds .rb-consult { padding-block: 40px; }
  .site .ds-sec-title { margin-bottom: 24px; font-size: 1.25rem; }
  .site .ds .rb-consult-title { font-size: 1.25rem; }
  .site .ds .rb-consult-head { margin-bottom: 24px; }
  .site .ds-fold { --ds-fold-h: 1300px; }
  .site .ds-fact { grid-template-columns: 8rem minmax(0, 1fr); }
  .site .ds-fact--long { grid-template-columns: 8rem minmax(0, 1fr); }
  .site .ds-fact--long dt::after { display: block; }
  .site .ds-hos { grid-template-columns: 60px minmax(0, 1fr) auto; padding: 18px 20px; }
  .site .ds-hos-mono { width: 60px; height: 60px; font-size: 1.5rem; }
  .site .ds-hos-go { grid-column: auto; justify-self: end; }
}

/* two columns: content + sticky purchase panel (dt-web desktop) */
@container main (min-width: 960px) {
  .site .ds-grid {
    grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "media buy" "body buy";
    column-gap: 36px; row-gap: 28px; align-items: start;
  }
  .site .ds-media-col { grid-area: media; }
  .site .ds-body { grid-area: body; }
  .site .ds-buy {
    grid-area: buy; align-self: start; position: sticky; top: calc(var(--ds-top) + 20px);
    max-height: calc(100vh - var(--ds-top) - 40px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  }
  .site .ds-tabs { margin-top: 4px; }
  .site.cta-on .ds-cta { display: none; }
}
@container main (min-width: 1100px) {
  .site .ds-grid { grid-template-columns: minmax(0, 1fr) 382px; column-gap: 44px; }
  .site .ds-buy-title { font-size: 1.5rem; }
  .site .ds-buy-price .rb-price { font-size: 1.375rem; }
}

/* RTL: chevrons/arrows mirror via atoms (.rb-dir); the strip badge and grid areas follow the inline direction */
html[lang="ko"] .site .ds { word-break: keep-all; }
html[lang="th"] .site .ds-buy, html[lang="th"] .site .ds-facts { line-height: 1.6; }
html[lang="ar"] .site .ds [class*="ds-"], html[lang="th"] .site .ds [class*="ds-"] { letter-spacing: 0; }
@media (prefers-reduced-motion: reduce) {
  .site .ds-cta, .site .ds-thumb img, .site .ds-fold-btn svg { transition: none; }
}