/* Patient readability layer. Load AFTER page styles; content and clinical logic stay intact. */
:root {
  --reading-measure: 68ch;
  --reading-muted: #5d574d;
  --reading-bronze: #756047;
  --reading-anchor-offset: 100px;
}
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 0; }
body :is(main, .container, .webdoc-hero__inner, .webdoc-layout, .recovery-guide) { min-inline-size: 0; }
body main:not(.messages) :is(h1, h2, h3, h4, p, li, dt, dd, a, summary, blockquote, label) {
  overflow-wrap: anywhere;
  word-break: normal;
}
html:lang(ko) body main:not(.messages) :is(h1, h2, h3, h4, p, li, dt, dd, summary, blockquote) { word-break: keep-all; }
html:lang(ko) body main:not(.messages) :is(h1, h2, h3, h4) { font-family: var(--sans); }
html:lang(en) body main:not(.messages) :is(h1, h2, h3, h4) { hyphens: auto; }
body main:not(.messages) :is(h1, h2, h3, h4) { max-inline-size: 100%; white-space: normal; text-wrap: pretty; }
body main:not(.messages) :is(h1, .display) { font-size: clamp(2rem, 1.45rem + 2.1vw, 3.75rem); line-height: 1.25; letter-spacing: -.035em; }
body main:not(.messages) :is(h2.section-title, .section-title, .doctor-copy h2, .system-intro h2, .webdoc-conversion h2) {
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.8rem); line-height: 1.3; letter-spacing: -.03em;
}
body main:not(.messages) :is(h3, h4) { line-height: 1.4; }
body main:not(.messages) :is(.aesthetic-compare h3, .aesthetic-role h3, .evidence-panel h3, .evidence-panel h3.kr, .rm-section-header h2) {
  font-size: clamp(1.4rem, 1.1rem + 1vw, 2.1rem); line-height: 1.4; letter-spacing: -.025em;
}
body main:not(.messages) .ip-card .tm { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); line-height: 1.35; overflow-wrap: anywhere; }
body main:not(.messages) [id] { scroll-margin-top: var(--reading-anchor-offset); }
body main:not(.messages) :is(.prose, .article-body) { max-inline-size: var(--reading-measure); font-size: 1rem; line-height: 1.85; }
body main:not(.messages) :is(.prose, .article-body) :is(p, ul, ol) { margin-block: 0 1.15em; }
body main:not(.messages) :is(.prose, .article-body) :is(h2, h3) { margin-block: 1.8em .7em; }
body main:not(.messages) :is(.prose, .article-body) h2 { font-size: clamp(1.45rem, 1.2rem + .9vw, 2rem); line-height: 1.4; }
body main:not(.messages) :is(.prose, .article-body) h3 { font-size: 1.2rem; }
body main:not(.messages) :is(.prose, .article-body, .answer) li + li { margin-block-start: .4em; }
body main:not(.messages) :is(.lead, .hero-copy, .webdoc-hero__dek, .aesthetic-hero-lead) {
  max-inline-size: var(--reading-measure); font-size: clamp(1rem, .94rem + .25vw, 1.125rem); line-height: 1.8;
}
body main:not(.messages) :is(.small-note, .webdoc-byline, .aesthetic-byline, .recovery-review) { font-size: .875rem; line-height: 1.7; }
body main:not(.messages) :is(.small-note, .page-hero p, .aesthetic-section-lead) { color: var(--reading-muted); }
body .section.dark :is(.small-note, .lead, .program-step p) { color: #ded6c8; }
body :is(.webdoc-outline li, .webdoc-topic-nav__head > p:last-child, .aesthetic-role p, .aesthetic-care-note p, .aesthetic-location-strip p) { color: #ded6c8; }
body .aesthetic-program-card p { color: #ded6c8; }
body .aesthetic-program-card:nth-child(n+2) p { color: #544b3e; }
body .concern-finder-grid span { color: #544b3e; }
body main:not(.messages) :is(.container, .intro-grid, .doctor-grid, .signature-grid, .axis-grid, .axis-detail-grid, .topic-grid, .related-grid, .aesthetic-card-grid, .section-head, .webdoc-layout, .webdoc-intro, .form-row) > * { min-inline-size: 0; }
body main:not(.messages) :is(img, video, svg, iframe) { max-inline-size: 100%; }
body main:not(.messages) :is(.button, .text-link, .channel-action, .system-tabs a, .aesthetic-program-tabs a) {
  min-block-size: 44px; max-inline-size: 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.45;
}
body main:not(.messages) .button { text-align: center; padding-block: 12px; }
body main:not(.messages) .button-row { flex-wrap: wrap; gap: 10px; }
body main:not(.messages) summary { min-block-size: 48px; line-height: 1.55; cursor: pointer; }
body main:not(.messages) details .answer { font-size: 1rem; line-height: 1.8; }
body :is(a, button, summary, input, select, textarea):focus-visible { outline: 3px solid #9b733e; outline-offset: 4px; }
body main:not(.messages) [tabindex="-1"]:focus-visible { outline: 2px solid #9b733e; outline-offset: 6px; }

/* Numbers precede headings in normal flow, rather than occupying the card background. */
.equipment-photo-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; }
.equipment-photo-layout > * { min-width: 0; }
.equipment-photo-layout > img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 22px; }
body :is(.axis-card, .related-card)::before {
  position: static; display: block; margin: 0 0 12px; color: var(--reading-bronze);
  font-family: var(--sans); font-size: .875rem; font-weight: 650; line-height: 1.4; letter-spacing: .06em;
}
body :is(.axis-detail-card .axis-number, .signature-card .card-number, .program-step .step, .topic-card__index, .aesthetic-program-card .program-no, .recovery-preview-card > span, .rm-intro-card .num) {
  position: static; font-family: var(--sans); font-size: .875rem; font-weight: 650; line-height: 1.4; letter-spacing: .05em;
}
body .axis-detail-card .axis-number { color: var(--reading-bronze); flex-wrap: wrap; gap: 8px; }
body .aesthetic-assessment-card::before { margin-bottom: 12px; font-family: var(--sans); font-size: .875rem; color: var(--reading-bronze); }
body .aesthetic-program-card::after { content: none; }
body :is(.axis-card b, .axis-detail-card h3, .program-step h3, .signature-card h3, .aesthetic-program-card h2, .aesthetic-program-card h3, .topic-card h2, .related-card h3, .recovery-preview-card h3) {
  margin-block-start: 14px; font-size: clamp(1.2rem, 1.05rem + .6vw, 1.65rem); line-height: 1.45; letter-spacing: -.02em;
}
body .signature-card h3 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); }
body .signature-card .text-link { position: static; margin-top: 22px; align-self: flex-start; }
body .signature-card .mini-axis { margin-top: 22px; }
body :is(.axis-card, .axis-detail-card, .program-step, .aesthetic-assessment-card, .topic-card, .related-card, .recovery-preview-card) { min-block-size: 0; }
body :is(.signature-card, .aesthetic-program-card) { min-block-size: 0; padding: clamp(24px, 3vw, 38px); }
body :is(.signature-card, .aesthetic-program-card) p { font-size: 1rem; line-height: 1.8; margin-block: 18px 22px; }
body :is(.topic-card, .related-card, .axis-card, .axis-detail-card, .aesthetic-assessment-card, .program-step) p { font-size: .9375rem; line-height: 1.75; }
body .related-card__arrow { position: static; display: block; margin-top: 16px; }
body .section { padding-block: clamp(48px, 6vw, 84px); }
body .section-head { gap: 24px; margin-bottom: 30px; }
body .webdoc-layout { padding-block: clamp(44px, 6vw, 76px); gap: clamp(28px, 5vw, 60px); }
body .answer-card blockquote p { font-size: clamp(1.0625rem, 1rem + .4vw, 1.3rem); line-height: 1.8; }
body .webdoc-hero--detail :is(.webdoc-hero__inner, .webdoc-hero__copy) { min-block-size: 0; }
body .webdoc-hero--detail { min-block-size: 0; }
body .webdoc-hero__inner { padding-block: clamp(46px, 6vw, 80px); }
body .webdoc-breadcrumb { margin-bottom: 24px; }
body .recovery-review { color: var(--reading-muted); }
body .footer-legal { color: #c8c0b3; font-size: .75rem; line-height: 1.7; }

@media (max-width: 760px) {
  .equipment-photo-layout { grid-template-columns: 1fr; gap: 24px; }
  :root { --container: min(1240px, calc(100% - 36px)); --reading-anchor-offset: 88px; }
  body { --webdoc-max: min(1160px, calc(100% - 36px)); }
  body main:not(.messages) :is(h1, .display, .hero h1, .aesthetic-hero h1, .webdoc-hero h1, .recovery-hero h1) {
    font-size: clamp(1.875rem, 1.3rem + 2.8vw, 2.5rem); line-height: 1.3; letter-spacing: -.035em;
  }
  body main:not(.messages) :is(.section-title, .doctor-copy h2, .system-intro h2, .webdoc-conversion h2, .aesthetic-care-note h2, .aesthetic-location-strip h2) {
    font-size: clamp(1.5rem, 1.15rem + 1.7vw, 2rem); line-height: 1.4;
  }
  body .hero h1 span { font-size: .65em; line-height: 1.45; margin-top: 12px; }
  body .aesthetic-hero h1 :is(.kr-line, .local-line) { font-size: 1.2rem; line-height: 1.5; margin-top: 16px; }
  body :is(.hero, .hero > .container, .aesthetic-hero, .aesthetic-hero > .container, .webdoc-hero, .webdoc-hero__inner) { min-block-size: 0; }
  body .hero > .container { padding-block: 40px 46px; align-items: flex-start; }
  body .aesthetic-hero > .container { padding-block: 40px 46px; gap: 28px; }
  body :is(.hero-content, .webdoc-hero__copy, .webdoc-hero--detail .webdoc-hero__copy) { inline-size: 100%; }
  body .page-hero { padding-block: 42px 36px; }
  body .webdoc-hero__inner { padding-block: 36px 46px; }
  body .webdoc-intro { margin-top: 18px; }
  body .webdoc-topic-nav { padding: 24px 18px; }
  body :is(.answer-card, .webdoc-outline, .aesthetic-direct-answer, .aesthetic-care-note, .aesthetic-location-strip) { padding: 24px 20px; border-radius: 20px; }
  body :is(.axis-card, .axis-detail-card, .topic-card, .related-card, .aesthetic-assessment-card, .program-step) { padding: 22px; }
  body :is(.aesthetic-program-card, .signature-card) { min-height: 0; border-radius: 22px; padding: 26px 22px; }
  body :is(.aesthetic-program-card h2, .aesthetic-program-card h3, .signature-card h3) { margin-top: 16px; }
  body :is(.intro-grid, .doctor-grid, .webdoc-layout) { gap: 30px; }
  body :is(.axis-grid, .axis-detail-grid, .aesthetic-assessment-grid, .concern-finder-grid, .topic-grid, .related-grid) { grid-template-columns: minmax(0, 1fr); }
  body .aesthetic-orbit { inline-size: min(64vw, 240px); }
  body .eyebrow { font-size: .7rem; letter-spacing: .12em; gap: 8px; }
  body .eyebrow::before { flex-shrink: 0; inline-size: 20px; }
  body .vector-line { font-size: clamp(.66rem, 2.9vw, .86rem); letter-spacing: .02em; padding: 18px 12px; white-space: nowrap; }
  body main:not(.messages) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { font-size: 16px; max-inline-size: 100%; }
  body .recovery-guide { padding-inline: 18px; }
  body .recovery-hero { padding-block: 42px 34px; margin-bottom: 32px; }
  body .rm-hero { padding-block: 42px 38px; }
  body .rm-section { padding-block: 48px; }
  body .rm-section-header { margin-bottom: 30px; }
  body :is(.quick-answer-section, .summary-table-section) { margin-block: 36px; }
  body .combined-notice { padding: 24px 20px; margin-block: 32px; }
  body .summary-table-wrap { max-inline-size: 100%; overscroll-behavior-inline: contain; }
  body .brand { min-inline-size: 0; }
  body .nav-shell { gap: 8px; }
  body .main-nav > a { white-space: normal; line-height: 1.45; }
  body .site-footer { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  /* Reserve a compact, non-overlapping row for two independently accessible controls. */
  body :is(.quick-contact, .october-calendar-widget) { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); max-inline-size: calc(50vw - 24px); }
  body .quick-contact { right: 12px; }
  body .october-calendar-widget { left: 12px; }
  body :is(.quick-contact-button, .october-calendar-launch) { max-inline-size: 100%; min-height: 46px; gap: 6px; padding: 6px 10px; font-size: .75rem; }
  body .quick-contact-label { white-space: normal; line-height: 1.3; }
  body .quick-contact-icon { width: 30px; height: 30px; flex-basis: 30px; }
  body .quick-contact-icon::before { left: 6px; top: 6px; }
  body .quick-contact-icon::after { left: 9px; top: 18px; }
  body .october-calendar-icon { width: 28px; height: 30px; font-size: 16px; }
  body .october-calendar-panel { position: absolute; bottom: calc(100% + 12px); left: 0; max-width: none; width: min(calc(100vw - 40px), 400px); max-height: min(70dvh, 620px); padding: 18px; }
  body .quick-contact-panel { position: absolute; bottom: calc(100% + 12px); right: 0; width: min(calc(100vw - 40px), 400px); max-width: none; max-height: min(70dvh, 620px); }
  body .quick-channel { min-height: 44px; overflow-wrap: anywhere; }
}
@media (max-width: 380px) {
  body .brand-copy b { font-size: 15px; }
  body .brand-copy small { letter-spacing: .16em; }
  body .brand { gap: 7px; }
  body .brand::before { inline-size: 30px; block-size: 30px; flex-basis: 30px; }
  body .button-row > .button { flex: 1 1 100%; }
  body .october-calendar-icon { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}