/* ★ 2026-08-27 — color-scheme 선언이 없으면 안드로이드 크롬이 다크모드에서
   «자동 다크 테마» 로 배경·글자를 알고리즘 반전시킨다. 흰 띠·깨진 가장자리가 그 증상이다.
   이 사이트는 라이트 디자인이므로 명시해서 손대지 못하게 한다. */
:root { color-scheme: light; }

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?2kco5d');
  src:  url('fonts/icomoon.eot?2kco5d#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?2kco5d') format('truetype'),
    url('fonts/icomoon.woff?2kco5d') format('woff'),
    url('fonts/icomoon.svg?2kco5d#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-icon-ava:before {
  content: "\e900";
}

/* ═════════════════════════════════════════════════════════════
   글로벌 UX 패치 (전 페이지 공통)
   1) 배경/UI 요소 드래그 선택 차단
   2) 스크롤바 호버 시 항상 화살표 커서
   3) 클릭 가능한 요소만 pointer, 입력 가능한 요소만 text
   ═════════════════════════════════════════════════════════════ */

/* 기본 — 모든 비-텍스트 요소는 선택 불가 + 화살표 커서 */
html, body {
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* 텍스트 입력·선택 명시적 허용 */
input, textarea, select,
[contenteditable="true"], [contenteditable=""],
.selectable, .allow-select, .allow-select *,
pre code, .copy-target, .copy-target * {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default;
}

/* 입력란·편집 가능 영역만 text 커서 */
input[type="text"], input[type="search"], input[type="email"],
input[type="number"], input[type="tel"], input[type="password"],
input[type="url"], input:not([type]), textarea,
[contenteditable="true"], [contenteditable=""] {
  cursor: text;
}

/* 명시적으로 클릭 가능한 요소만 pointer */
a, button, [role="button"], [onclick],
input[type="checkbox"], input[type="radio"], input[type="submit"], input[type="button"],
input[type="file"], select,
label[for],
summary {
  cursor: pointer;
}

a:disabled, button:disabled, button[disabled], input[disabled] {
  cursor: not-allowed;
}

/* 드래그 가능 표시 */
[draggable="true"] {
  cursor: grab;
}
[draggable="true"]:active {
  cursor: grabbing;
}

/* 스크롤바 호버 시 항상 화살표 커서 (Webkit) */
::-webkit-scrollbar,
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece,
::-webkit-scrollbar-button,
::-webkit-scrollbar-corner,
::-webkit-resizer {
  cursor: default !important;
}

/* 텍스트 콘텐츠 페이지 (블로그·상담·환자 메모 등) — 선택 가능하게 */
.prose, .prose *,
[data-selectable="true"], [data-selectable="true"] *,
.markdown-body, .markdown-body * {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}

/* 인쇄 시 모든 요소 선택 가능 (PDF 변환 시 텍스트 추출용) */
@media print {
  * {
    -webkit-user-select: text !important;
    user-select: text !important;
  }
}

/* ═════════════════════════════════════════════════════════════
   한국어 줄바꿈 — 글자 단위 X, 단어/어절 단위로 자연스럽게
   ═════════════════════════════════════════════════════════════ */
html, body {
  word-break: keep-all;
  overflow-wrap: break-word;
}
.word-keep, .break-keep {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 모달 열릴 때 우측 floating sidebar 숨김 (모바일에서 화살표 가림 방지) */
body.modal-open .floating-sidebar {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
 * ★ AVA Premium UI v2 — Editorial Typography + Trust Badges + Scroll Reveal
 * (2026-05-05) Apple·Hermès 스타일 마이크로 인터랙션 + 시각적 우아함
 * ═══════════════════════════════════════════════════════════════════ */

/* ─── Editorial Typography — 대형 세리프 캐치프레이즈 ─── */
.ava-spotlight {
  text-align: center;
  padding: 80px 24px;
  background: linear-gradient(180deg, #FBFAF8 0%, #F5F2EC 100%);
  position: relative;
  overflow: hidden;
}
.ava-spotlight::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(168,140,100,0.06) 0%, transparent 60%);
  pointer-events: none;
}
.ava-spotlight .ava-spotlight-eyebrow {
  font-family: 'Montserrat', 'Pretendard Variable', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 4px; text-transform: uppercase;
  color: var(--ava-gold-strong, #7A6136);
  margin-bottom: 28px;
  position: relative; z-index: 1;
}
.ava-spotlight .ava-spotlight-quote {
  font-family: 'Playfair Display', 'MaruBuri', serif;
  font-style: italic;
  font-size: clamp(22px, 4.2vw, 44px);
  line-height: 1.5;
  color: #2A2420;
  font-weight: 400;
  max-width: 920px;
  margin: 0 auto 24px;
  position: relative; z-index: 1;
}
.ava-spotlight .ava-spotlight-quote em {
  font-style: italic;
  color: #A88C64;
  background: linear-gradient(120deg, transparent 0%, transparent 50%, rgba(168,140,100,0.12) 50%, rgba(168,140,100,0.12) 100%);
  padding: 0 4px;
}
.ava-spotlight .ava-spotlight-attribution {
  font-family: 'Pretendard Variable', sans-serif;
  font-size: 13px; letter-spacing: 0.5px;
  color: #7A7268;
  margin-top: 8px;
  position: relative; z-index: 1;
}
.ava-spotlight .ava-spotlight-attribution::before {
  content: '— ';
  color: #A88C64;
}
@media (max-width: 640px) {
  .ava-spotlight { padding: 56px 20px; }
  .ava-spotlight .ava-spotlight-quote { font-size: 22px; line-height: 1.55; }
}

/* ─── Trust Badges — 5성급 신뢰 배지 그리드 ─── */
.ava-trust-badges {
  padding: 60px 24px 70px;
  background: #fff;
  border-top: 1px solid #E5E0D6;
  border-bottom: 1px solid #E5E0D6;
}
.ava-trust-badges-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.ava-trust-badges-eyebrow {
  text-align: center;
  font-family: 'Montserrat', 'Pretendard Variable', sans-serif;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 4px; text-transform: uppercase;
  color: var(--ava-gold-strong, #7A6136);
  margin-bottom: 14px;
}
.ava-trust-badges-title {
  text-align: center;
  font-family: 'MaruBuri', 'Playfair Display', serif;
  font-size: clamp(20px, 3vw, 30px);
  font-weight: 400;
  color: #2A2420;
  letter-spacing: 0.3px;
  margin-bottom: 40px;
}
.ava-trust-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.ava-trust-badge {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 24px 16px;
  background: #FBFAF8;
  border: 1px solid #E5E0D6;
  border-radius: 12px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ava-trust-badge:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(168,140,100,0.18);
  border-color: #A88C64;
}
.ava-trust-badge .icon {
  font-size: 28px;
  color: #A88C64;
  margin-bottom: 14px;
  line-height: 1;
}
.ava-trust-badge .label {
  font-family: 'Pretendard Variable', sans-serif;
  font-size: 13.5px; font-weight: 700;
  color: #2A2420;
  letter-spacing: 0.3px;
  margin-bottom: 6px;
}
.ava-trust-badge .desc {
  font-family: 'Pretendard Variable', sans-serif;
  font-size: 11.5px; line-height: 1.55;
  color: #7A7268;
}
@media (max-width: 1024px) {
  .ava-trust-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .ava-trust-grid { grid-template-columns: 1fr; gap: 12px; }
  .ava-trust-badge { padding: 20px 16px; }
}

/* ─── Scroll Reveal — Intersection Observer 마이크로 애니메이션 ─── */
.reveal-up,
.reveal-stagger .reveal-child {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal-fade {
  opacity: 0;
  transition: opacity 1.1s ease-out;
  will-change: opacity;
}
.reveal-up.revealed,
.reveal-stagger .reveal-child.revealed {
  opacity: 1;
  transform: translateY(0);
}
.reveal-fade.revealed {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .reveal-up, .reveal-fade, .reveal-stagger .reveal-child {
    opacity: 1; transform: none; transition: none;
  }
}

/* ═════════════════════════════════════════════════════════════
   다국어 타이포그래피 최적화 (V32 Localization Engine)
   1) 태국어(th): 자음/모음 세로 겹침 방지를 위해 줄간격 확보
   2) 영어/러시아어/인도네시아어(en/ru/id): 알파벳 긴 텍스트의 가독성 및
      레이아웃 겹침 방지를 위해 자간 및 여백 미세 조율
   ═════════════════════════════════════════════════════════════ */

/* 태국어(th) 글로벌 타이포 튜닝 */
html[lang="th"] body,
[lang="th"] {
  line-height: 1.625 !important; /* leading-relaxed 강제 */
  letter-spacing: -0.005em !important;
}

/* 알파벳 기반 긴 텍스트 (en, ru, id) 글로벌 타이포 튜닝 */
html[lang="en"] body,
html[lang="ru"] body,
html[lang="id"] body,
[lang="en"], [lang="ru"], [lang="id"] {
  letter-spacing: -0.015em !important; /* 자간을 좀 더 조여서 겹침 방지 및 모던한 룩 제공 */
  word-spacing: -0.02em;
  word-break: break-word; /* 불규칙적인 줄바꿈 방지 */
}

/* 다국어 폰트 렌더링 최적화 */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ─── 모바일 플로팅 요소 공간 SSoT (2026-05-27) ─────────────
   모든 floating 컴포넌트(챗봇·카톡·예약·맨위로·장바구니)가 본 변수 참조.
   • 기본: 홈바(safe-area)만 보정
   • body.has-tabbar (모바일 ≤767px): 탭바 높이 56px + safe-area
   • body.consult-bar-visible (모바일 ≤767px): 탭바 + consult-bar 124px + 간격 10px + safe
   상세: implementation_plan.md (2026-05-27) */
:root {
  --ava-bottom-safe: env(safe-area-inset-bottom, 0px);
}
@media (max-width: 767px) {
  body.has-tabbar {
    --ava-bottom-safe: calc(56px + env(safe-area-inset-bottom, 0px));
  }
  body.consult-bar-visible {
    --ava-bottom-safe: calc(190px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ─── 히어로 문구 유동 크기 (hero-fluid, 2026-08-02) ─────────────
   왜: 히어로 이미지는 화면을 꽉 채우는데 문구는 md 이상에서 고정 크기였다.
       (md:text-4xl = 36px, md:text-5xl = 48px)
       그래서 1440px 에서는 맞아 보여도 2560px 모니터에서는 그림만 커지고
       글자는 그대로라 상대적으로 작아 보였다 — 원장 지적.
   방법: 화면 폭(vw)에 비례하되 위아래 한계를 둔다(clamp).
       아래 한계 = 지금 크기(작아지지 않는다), 위 한계 = 너무 커지지 않게.
       --hero-lang-scale 은 그대로 곱한다 — 태국어·러시아어처럼 긴 언어는 자동으로 작아진다.
   ※ 부트 히어로(#ava-boot-text)도 같은 .hero-text-container 를 쓰므로 함께 적용된다. */
@media (min-width: 768px) {
  .hero-text-container .md\:text-base { font-size: clamp(1rem,     calc(1.10vw * var(--hero-lang-scale, 1)), 1.60rem) !important; }
  .hero-text-container .md\:text-lg   { font-size: clamp(1.125rem, calc(1.25vw * var(--hero-lang-scale, 1)), 2.00rem) !important; }
  .hero-text-container .md\:text-xl   { font-size: clamp(1.25rem,  calc(1.45vw * var(--hero-lang-scale, 1)), 2.20rem) !important; }
  .hero-text-container .md\:text-2xl  { font-size: clamp(1.5rem,   calc(1.70vw * var(--hero-lang-scale, 1)), 2.60rem) !important; }
  .hero-text-container .md\:text-3xl  { font-size: clamp(1.875rem, calc(2.15vw * var(--hero-lang-scale, 1)), 3.40rem) !important; }
  .hero-text-container .md\:text-4xl  { font-size: clamp(2.25rem,  calc(2.60vw * var(--hero-lang-scale, 1)), 4.50rem) !important; }
  .hero-text-container .md\:text-5xl  { font-size: clamp(3rem,     calc(3.35vw * var(--hero-lang-scale, 1)), 6.00rem) !important; }
  /* 수술 상세 6종의 대제목이 md:text-7xl(72px) 고정이었다 — lg 단계가 없어
     스킨클리닉(lg:text-8xl)과 달리 큰 화면에서 혼자 작아 보였다. (2026-08-02 2차)
     vw 값은 1440px 에서 지금 크기와 같아지도록 잡았다 — 그 아래로는 절대 안 줄어든다. */
  .hero-text-container .md\:text-6xl  { font-size: clamp(3.75rem,  calc(4.17vw * var(--hero-lang-scale, 1)), 7.50rem) !important; }
  .hero-text-container .md\:text-7xl  { font-size: clamp(4.5rem,   calc(5.00vw * var(--hero-lang-scale, 1)), 9.00rem) !important; }
  /* 글자가 커지면 줄 간격도 같이 조여 준다 — 안 그러면 두 줄이 벌어져 보인다 */
  .hero-text-container .md\:text-4xl,
  .hero-text-container .md\:text-5xl,
  .hero-text-container .md\:text-6xl,
  .hero-text-container .md\:text-7xl { line-height: 1.12 !important; }
}

/* ─── 모바일 메인 히어로 텍스트 최적화 (2026-05-27) ─────────────
   • 모바일 해상도 (width < 768px) 에서 이미지 위에 얹힌 텍스트의 정합성 유지 및 모델 얼굴 가림 방지
   • 스코프는 오직 .hero-text-container 내부로 한정하여 전역 스타일 오염 원천 차단 */
@media (max-width: 767px) {
  .hero-text-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .hero-text-container.hero-left,
  .hero-text-container.hero-right {
    max-width: 55% !important;
    top: auto !important;
    bottom: 16% !important;
    transform: none !important;
  }
  /* 다국어 비율 보존 비례 축소 — hero 내부 전용 */
  .hero-text-container .text-xs { font-size: calc(0.75rem * var(--hero-lang-scale, 1)) !important; }
  .hero-text-container .text-sm { font-size: calc(0.875rem * var(--hero-lang-scale, 1)) !important; }
  .hero-text-container .text-base { font-size: calc(1rem * var(--hero-lang-scale, 1)) !important; }
  .hero-text-container .text-lg { font-size: calc(1.125rem * var(--hero-lang-scale, 1)) !important; }
  .hero-text-container .text-xl { font-size: calc(1.25rem * var(--hero-lang-scale, 1)) !important; }
  .hero-text-container .text-2xl { font-size: calc(1.5rem * var(--hero-lang-scale, 1)) !important; }
  .hero-text-container .text-3xl { font-size: calc(1.875rem * var(--hero-lang-scale, 1)) !important; }
  .hero-text-container .text-4xl { font-size: calc(2.25rem * var(--hero-lang-scale, 1)) !important; }
  .hero-text-container .text-5xl { font-size: calc(3rem * var(--hero-lang-scale, 1)) !important; }
}


/* ── 터치 타겟 보정 (2026-08-27) ────────────────────────────────────────────
   실측: 모바일 390px 에서 눌리는 요소 50개가 44px 미만이었다. 그중 최악은
   언어 국기 7개로 16×12px — 사실상 언어 전환이 안 되는 크기였다.

   ★ (pointer: coarse) 로 감싼다 — 손가락으로 여는 기기에만 적용.
     마우스는 지금 크기로 정확히 눌리고, 데스크탑까지 키우면 헤더가 무너진다.
   ★ 국기는 box-sizing:content-box + 세로 음수 마진.
     padding 이 «칠 수 있는 상자» 를 44px 로 넓히고, 음수 마진이 «자리» 는
     원래대로 되돌린다 → 헤더 높이는 그대로인데 탭은 잡힌다.
     가로는 음수 마진을 주지 «않는다» — 주면 이웃 국기끼리 판정이 겹쳐
     한국어를 누르려다 영어가 켜진다. */
@media (pointer: coarse) {
  .ava-tt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }
  /* ★ 2026-08-27 2차 — 44px 를 «실제 크기» 로 주면 그 행이 통째로 부풀어
     위쪽 행(바로가기 알약)을 화면 밖으로 밀어낸다 (main 에서 top 0 → 잘림).
     알약과 같은 방식으로 «보이는 크기는 그대로», 눌리는 영역만 넓힌다. */
  .ava-tt-icon { position: relative; }
  .ava-tt-icon::after {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 44px; height: 44px;
  }
  .ava-tt-flag {
    box-sizing: content-box;
    padding: 16px 5px;
    margin-top: -16px;
    margin-bottom: -16px;
  }
}

/* ── 가로 스크롤 표: 스크롤바를 «항상» 보이게 (2026-08-27) ──────────────
   시술 비교표는 모바일 화면보다 넓다 (실측 500~780px / 상자 356px).
   열이 3~5개라 억지로 줄이면 못 읽으니 가로 스크롤은 유지한다.
   문제는 «스크롤이 되는 줄 모른다» 는 것 — 모바일 스크롤바는 손댈 때만 잠깐 뜬다.
   그래서 표가 그냥 잘린 것처럼 보였다 (원장: 「반만 나오고 반은 안나와」).

   ⚠ 먼저 시도한 «스크롤 그림자»(background-attachment: local/scroll) 는 실패했다 —
     표 셀이 자기 배경을 칠해 컨테이너에 깔린 그림자를 덮어 버린다.
     스크롤바를 상시 노출하는 쪽이 확실하다.

   ⚠ 좌우 화살표 스트립(.scrollbar-hide/.hide-scroll)은 제외 — 거긴 일부러 감춘 것이다. */
@media (max-width: 767px) {
  .overflow-x-auto:not(.scrollbar-hide):not(.hide-scroll) {
    scrollbar-width: thin;
    scrollbar-color: rgba(42,36,32,.38) rgba(42,36,32,.08);
    padding-bottom: 2px;
  }
  .overflow-x-auto:not(.scrollbar-hide):not(.hide-scroll)::-webkit-scrollbar {
    height: 6px; -webkit-appearance: none;
  }
  .overflow-x-auto:not(.scrollbar-hide):not(.hide-scroll)::-webkit-scrollbar-track {
    background: rgba(42,36,32,.08); border-radius: 3px;
  }
  .overflow-x-auto:not(.scrollbar-hide):not(.hide-scroll)::-webkit-scrollbar-thumb {
    background: rgba(42,36,32,.38); border-radius: 3px;
  }
}

/* ── 시술 비교표를 모바일 화면에 «들어가게» (2026-08-27) ────────────────────
   표에 min-w-[500px]~[780px] 가 박혀 있어 356px 화면에서 절반이 잘렸다
   (원장: 「반만 나오고 반은 안나와」).

   열을 억지로 줄이면 못 읽으니, 대신 «남는 공간» 을 회수한다 —
   셀 좌우 여백이 20px 씩(열당 40px) 이라 3열이면 그것만 120px 다.
   여백 8px · 글자 12px 로 줄이고 min-width 를 풀면 대부분 그대로 들어간다.

   실측 (390px, antiaging·eyesurgery 표 8개)
     500px → 356px ✅   640px → 356px ✅   780px(8열) → 356px ✅
     780px(12열) → 387px ↔ 이건 여전히 넘쳐 가로 스크롤로 남는다 (2개)
   남는 것들을 위해 위쪽 «상시 스크롤바» 규칙을 같이 둔다. */
@media (max-width: 767px) {
  .overflow-x-auto table { min-width: 0 !important; }
  .overflow-x-auto table th,
  .overflow-x-auto table td {
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 12px !important;
    line-height: 1.45;
    word-break: keep-all;      /* 한국어는 어절 단위로 끊어야 읽힌다 */
  }
}

/* ── 헤더 알약 버튼 (2026-08-27) ────────────────────────────────────────────
   「Skin Clinic 바로가기」와 언어 선택기가 둥근 덩어리처럼 보였다.
   원인 둘:
     ① .ava-tt 가 min-height:44px 를 강제해 짧은 내용이 세로로 부풀었다
        (지구본은 50x44 = 비율 1.13, 사실상 원형)
     ② ava-tw.css 는 «미리 빌드된 정적 파일» 이라 거기 없는 Tailwind 클래스는
        조용히 무시된다 — px-2.5 · gap-1.5 가 0건이라 패딩이 아예 안 먹었다

   보이는 알약은 30px 로 낮추고, «눌리는 영역만» ::after 로 44px 까지 넓힌다.
   테두리는 padding box 를 따라가므로 겉모습은 그대로 알약이다. */
.ava-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* 2026-08-27 2차: 30px 이면 담는 행(h-6=24px)을 넘어 화면 최상단에 붙어 잘렸다.
     26px 로 줄이고 행은 h-7(28px) 로 키워 위아래 여유를 만든다. */
  min-height: 26px;
  padding: 2px 12px;
  border-radius: 999px;
  border-width: 1px;
  line-height: 1;
  white-space: nowrap;
  position: relative;
}
@media (pointer: coarse) {
  .ava-pill::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 44px;
  }
}

/* ── 열이 많은 표는 조금 더 조인다 (2026-08-27) ──────────────────────────
   앞 규칙(여백 8px·글자 12px)으로 표 8개 중 6개가 화면에 들어왔는데
   6열짜리 둘이 387~388px 로 «31px» 만 넘쳐 계속 가로 스크롤이었다.
   6열이면 좌우 여백만 6x2x8 = 96px 다 — 거기서 36px 을 회수하면 들어간다.

   :has() 로 «6번째 칸이 있는 표» 만 골라낸다. 3열짜리는 지금 여백을 유지한다.
   ⚠ :has() 를 모르는 옛 브라우저에서는 규칙이 무시되고 지금처럼 가로 스크롤로 남는다
     — 깨지지 않고 그대로 동작하므로 폴백이 필요 없다. */
@media (max-width: 767px) {
  .overflow-x-auto table:has(tr > *:nth-child(6)) th,
  .overflow-x-auto table:has(tr > *:nth-child(6)) td {
    padding-left: 5px !important;
    padding-right: 5px !important;
    font-size: 11px !important;
    letter-spacing: -0.3px;
  }
}

/* ── 예약 모달 — 휴대폰에서 시간 선택이 화면 밖으로 밀리던 것 (2026-09-01) ──────
   원장 신고: 휴대폰으로 상담하기 → 달력은 뜨는데 «날짜를 눌러도 전환되는 게 없다».

   무엇이 문제였나
     본문이 md 이상에서만 가로 3단(달력·시간·폼)이고, 좁은 화면에선 세로로 쌓인다.
     그런데 세 패널 모두 h-full + shrink-0 이라 «각자 화면 높이만큼» 차지해서
     달력 하나가 본문을 다 먹었다. 게다가 본문이 overflow:hidden 이라
     아래로 스크롤해서 시간 선택으로 갈 수조차 없었다.
     날짜를 누르면 상태는 바뀌는데 바뀐 화면이 «보이지 않으니» 먹통처럼 보인다.

   왜 여기(CSS)에서 고치나
     ava-tw.css 는 «정적 파일» 이다. md:h-full·md:overflow-hidden 같은 변형은
     그 안에 없어서 클래스만 적으면 조용히 무시된다(실측). Tailwind 로는 못 고친다. */
@media (max-width: 767px) {
  .rsv-body  { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .rsv-panel { height: auto; flex-shrink: 1; overflow: visible; border-right: 0; }
  .rsv-panel + .rsv-panel { border-top: 1px solid var(--ava-line, #EFEAE0); }
}

/* ── 예약 달력 — 오늘 표시 · 지난 날짜 흐리게 (2026-09-01 원장 요청) ────────
   「처음 달력이 뜨는데 비어 있다. 당일을 표시해주고, 이전 날짜는 흐리게 해서
     선택 못 하게 했으면 좋겠다.」

   Tailwind 유틸리티로 안 하는 이유
     ava-tw.css 는 «정적 파일» 이라 그 안에 없는 클래스는 조용히 무시된다.
     달력처럼 «보이느냐» 가 전부인 것을 거기에 맡기면 먹었는지 알 수가 없다.
     (예약 모달 레이아웃도 같은 이유로 여기서 고쳤다) */
.rsv-day { cursor: pointer; color: #3B3833; font-weight: 500; }
.rsv-day:hover { background: #F4F1EA; }
.rsv-day:focus-visible { outline: 2px solid var(--ava-primary-strong, #8A6B2F); outline-offset: 1px; }

/* 일요일 */
.rsv-day-sun { color: #C1554A; }
.rsv-day-sun:hover { background: #FBEFEE; }

/* 지난 날짜 — 흐리게, 손이 안 가게 */
.rsv-day-past { color: #CFC9BE; font-weight: 400; cursor: default; pointer-events: none; }
.rsv-day-past:hover { background: transparent; }

/* 오늘 — 테두리와 아래 점으로 «여기가 오늘» 임을 알린다 */
.rsv-day-today { box-shadow: inset 0 0 0 1.5px var(--ava-primary, #B79A5B); font-weight: 700; }
.rsv-day-dot {
  position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--ava-primary, #B79A5B);
}

/* 고른 날짜 — 오늘 표시보다 우선한다 */
.rsv-day-on,
.rsv-day-on.rsv-day-today {
  background: var(--ava-primary, #B79A5B); color: #fff; font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,.18); transform: scale(1.1);
}
.rsv-day-on:hover { background: var(--ava-primary-strong, #8A6B2F); }

/* ── 일본어 히어로 제목 (2026-09-04) ──
   「目を閉じても分からない…」처럼 띄어쓰기 없는 긴 제목이 390px 에서 좌우로 잘렸다(실측).
   원인은 위 keep-all — 한국어엔 맞지만 일본어는 어절 경계가 없어 한 줄이 통째로 화면을 넘는다.
   일본어 제목만 글자 단위 줄바꿈을 허용하고 모바일에서 한 단계 작게. */
html[lang="ja"] h1, html[lang="ja"] h2, html[lang="ja"] h3 {
  word-break: normal;
  overflow-wrap: anywhere;
  line-break: strict;
}
@media (max-width: 767px) {
  html[lang="ja"] h1.text-5xl, html[lang="ja"] h2.text-5xl { font-size: 2.1rem; line-height: 1.25; }
}

/* ── 외국어 홈 히어로 부제 (2026-09-04) ──
   영어 부제 「DR. KIM SEUNGSOO — … ONE SURGEON, START TO FINISH」가 1366px 에서 오른쪽이 잘렸다(실측).
   안쪽 whitespace-nowrap(한국어 「1 : 1 책임 집도」를 한 덩어리로 두려는 것)이 알파벳 문장엔 너무 길다.
   한국어가 아닐 때만 줄바꿈을 허용하고 자간을 한 단계 줄인다. */
html:not([lang="ko"]) .animate-fade-in-up .whitespace-nowrap { white-space: normal; }
html:not([lang="ko"]) .animate-fade-in-up.tracking-widest { letter-spacing: .06em; }
html:not([lang="ko"]) .animate-fade-in-up .whitespace-nowrap { letter-spacing: .08em; }

/* ── 스킨클리닉 헤더 카테고리(외국어) — 2026-09-05 ──
   영어 라벨(Volume Boosters·Dermal Fillers…)이 한국어 폭에 맞춘 헤더 안에서 낱말 중간에 꺾여
   「Volu me」처럼 보였다(실측). 외국어에서는 줄바꿈을 막고 한 단계 작게. */
html:not([lang="ko"]) header nav.absolute[style] { font-size: 12px; gap: 14px; letter-spacing: -0.01em; }
html:not([lang="ko"]) header nav.absolute[style] > * { white-space: nowrap; }
html:not([lang="ko"]) header nav.absolute[style] > *:nth-last-child(-n+2) { display: none; }  /* VIP·이벤트는 알약 바에 있다 — 우측 로그인과 겹치던 두 항목 */

/* ── 일본어·중국어 줄바꿈 (2026-09-05) ──
   위 keep-all 은 한국어 어절용이다. 띄어쓰기가 없는 일본어·중국어에선 문장 하나가 한 줄로 붙어
   화면 밖으로 나갔다(실측: /jp/skin/ 부제). CJK 기본값(normal)으로 되돌린다. */
html[lang="ja"], html[lang="ja"] body, html[lang="zh-CN"], html[lang="zh-CN"] body { word-break: normal; overflow-wrap: anywhere; }

/* AVA header & contact navigation — shared by live, translated and static pages. */
.ava-header-tools{gap:10px!important;}
.ava-header-social{display:flex;align-items:center;gap:2px;margin-right:3px;}
.ava-header-social>a{width:34px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:50%;opacity:.85;transition:background .18s,opacity .18s;}
.ava-header-social>a:hover{opacity:1;background:rgba(168,140,100,.15);}
.ava-language-button.ava-pill{display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 13px!important;border:1px solid rgba(65,60,53,.32)!important;border-radius:22px!important;background:transparent!important;color:#443d34!important;font-family:inherit;font-size:12px!important;font-weight:600;line-height:1.2;box-shadow:none;cursor:pointer;white-space:nowrap;}
.ava-language-button>svg:first-child{width:17px;height:17px;}
.ava-language-caption{font-size:9px;letter-spacing:1px;color:inherit;opacity:.8;font-weight:600;}
.ava-language-button.ava-pill:hover{background:rgba(90,80,65,.05)!important;border-color:rgba(65,60,53,.55)!important;}
.ava-language-button:focus-visible,.ava-contact-rail a:focus-visible,.ava-contact-rail button:focus-visible,.ava-header-social>a:focus-visible,.ava-bottom-tabbar a:focus-visible,.ava-bottom-tabbar button:focus-visible{outline:2px solid #a88c64;outline-offset:4px;}
.ava-lang-menu{background:#fffcf8!important;backdrop-filter:none!important;color:#433a30!important;border:1px solid #e5ddd1!important;box-shadow:0 12px 40px #20160c26!important;min-width:185px!important;padding:7px!important;max-height:calc(100dvh - 110px);overflow-y:auto;}
.ava-lang-menu a,.ava-lang-menu button{color:#61574c!important;width:100%;font-family:inherit;font-size:13px!important;min-height:44px!important;text-decoration:none!important;}
.ava-lang-menu a:hover,.ava-lang-menu button:hover{background:#f1ece4!important;color:#332c24!important;}
.ava-lang-menu [aria-current=page],.ava-lang-menu [aria-selected=true]{background:#eee7dd!important;color:#55432e!important;font-weight:700;}
.ava-language-check{width:16px;flex:none;color:#7d6340;}
.ava-static-language>summary::-webkit-details-marker{display:none;}
.ava-chrome-tip{position:relative;}
.ava-chrome-tip::after{content:attr(data-tooltip);position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);background:#39322b;color:#fff;padding:8px 12px;border-radius:7px;font-family:inherit;font-size:12px;font-weight:500;line-height:1.3;white-space:nowrap;box-shadow:0 4px 16px #0002;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s;}
.ava-chrome-tip:hover::after,.ava-chrome-tip:focus-visible::after{opacity:1;visibility:visible;}
.ava-header-social .ava-chrome-tip::after{right:0;top:calc(100% + 10px);transform:none;}
.ava-contact-rail{position:fixed;right:24px;top:50%;transform:translateY(-50%);z-index:990;display:flex;flex-direction:column;align-items:center;gap:10px;}
.ava-contact-button{width:70px;min-height:70px;padding:11px 5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border-radius:23px;border:1px solid #d9cec0;box-shadow:0 5px 20px #30271a17;cursor:pointer;font-family:inherit;text-decoration:none!important;transition:box-shadow .18s,background .18s;}
.ava-contact-button span{font-size:11px;line-height:1.2;font-weight:600;max-width:100%;overflow-wrap:anywhere;}
.ava-contact-kakao{background:#f8e66f;color:#392f1c!important;border-color:#e9d968;}
.ava-contact-kakao:hover{background:#ffed83;box-shadow:0 7px 22px #30271a2b;}
.ava-contact-book{background:#76624b;color:white!important;border-color:#76624b;}
.ava-contact-book:hover{background:#604e3a;box-shadow:0 7px 22px #30271a2b;}
.ava-contact-top{display:flex;width:38px;height:38px;align-items:center;justify-content:center;border:1px solid #dfd6ca;border-radius:50%;color:#716554;background:#fffdf9;position:absolute;top:calc(100% + 14px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s;}
.ava-page-scrolled .ava-contact-top{opacity:1;visibility:visible;pointer-events:auto;}
.ava-bottom-tabbar{display:none;}
@media(min-width:768px) and (max-width:1199px){.ava-language-caption{display:none;}.ava-header-social{display:none;}.ava-contact-rail{right:14px;}.ava-contact-button{width:62px;min-height:64px;border-radius:21px;}}
@media(max-width:767px){
 .ava-site-header{height:84px!important;}.ava-header-tools{gap:3px!important;}.ava-header-social,.ava-language-caption{display:none;}
 .ava-header-account{height:18px!important;margin-bottom:4px!important;}.ava-header-account>a,.ava-header-account>div.w-\[1px\]{display:none!important;}
 .ava-header-account button{font-size:10px!important;min-height:18px!important;line-height:1;padding:0 4px!important;}
 .ava-language-button.ava-pill{min-height:42px;gap:6px;padding:0 10px!important;font-size:12px!important;}
 .ava-contact-rail{display:none!important;}
 .ava-bottom-tabbar{display:block;position:fixed;bottom:0;left:0;right:0;z-index:985;padding:6px 10px calc(6px + env(safe-area-inset-bottom,0px));border-top:1px solid #e2dacd;background:#fffcf8;box-shadow:0 -3px 18px #30271a0d;}
 .ava-bottom-tabbar>div{height:44px;display:grid;grid-template-columns:.8fr 1.15fr 1.15fr;gap:6px;}
 .ava-bottom-tabbar a,.ava-bottom-tabbar button{display:flex;align-items:center;justify-content:center;gap:7px;border-radius:10px;line-height:1.2;font-family:inherit;font-size:12px;font-weight:600;color:#5d5142;text-decoration:none;border:0;background:transparent;}
 .ava-bottom-tabbar .ava-mobile-kakao{background:#f8e66f;color:#392f1c;}
 .ava-bottom-tabbar button{background:#76624b;color:#fff;}
 body.has-tabbar{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))!important;}
}
@media(prefers-reduced-motion:reduce){.ava-contact-rail *,.ava-chrome-tip::after,.ava-language-button{transition:none!important;}}
@media print{.ava-contact-rail,.ava-bottom-tabbar{display:none!important;}}

.ava-derm-header nav{position:static!important;transform:none!important;flex:1;justify-content:center;margin:0 20px;gap:clamp(8px,.8vw,16px)!important;font-size:calc(clamp(11px,.84vw,14px)*var(--lang-scale))!important;}
.ava-derm-header nav>button,.ava-derm-header nav>div>button{white-space:nowrap;}
@media(min-width:1024px) and (max-width:1279px){.ava-derm-header nav{display:none!important;}.ava-derm-mobile-nav{display:flex!important;}}

.ava-contact-whatsapp,.ava-bottom-tabbar .ava-mobile-whatsapp,.ava-contact-line,.ava-bottom-tabbar .ava-mobile-line{background:#e2eee3;color:#29553c!important;border-color:#c6dacb;}
.ava-contact-whatsapp:hover,.ava-contact-line:hover{background:#d5e8d8;}
.ava-contact-telegram,.ava-bottom-tabbar .ava-mobile-telegram{background:#e0eef7;color:#1c4c70!important;border-color:#bfd8e9;}
.ava-contact-telegram:hover{background:#d1e5f3;}

/* Calm homepage hierarchy; shared by live and static snapshots. */
.ava-hero-shade-horizontal{background:linear-gradient(90deg,rgba(0,0,0,.42),rgba(0,0,0,.06) 50%,rgba(0,0,0,.36))}
.ava-hero-shade-vertical{background:linear-gradient(180deg,rgba(0,0,0,.32),transparent 35%,rgba(0,0,0,.25))}
.ava-hero-center-shade,#ava-boot-text{background:radial-gradient(ellipse at center,rgba(0,0,0,.36),rgba(0,0,0,.08) 75%)}
.hero-center .animate-scale-loop{animation:none}
.hero-center>div:last-child{max-width:860px;padding:0 24px}
.hero-center>div:last-child>span{font-family:inherit;letter-spacing:.01em!important;line-height:1.7!important;font-size:clamp(14px,1.3vw,20px)!important}
.ava-header-social .ava-social-naver{color:#03a94d}
.ava-header-social .ava-social-instagram{color:#c13584}
.ava-social-instagram svg{background:linear-gradient(35deg,#f9ce34,#ee2a7b 50%,#6228d7);color:white;border-radius:6px;padding:3px;width:23px;height:23px}
.ava-contact-secondary{background:#fbfaf8;color:#76624b;border:1px solid #e5ded3}
.ava-contact-rail .ava-contact-button{min-height:64px;width:64px;border-radius:20px}
@media(max-height:700px) and (min-width:768px){.ava-contact-rail{gap:7px}.ava-contact-rail .ava-contact-button{min-height:54px;padding:7px 4px;border-radius:17px}}


/* Shared quick-consult layout: static review pages use the same form as main. */
.consult-bar-wrapper{background:#fbfaf8;border:1px solid #ded5c9;box-shadow:0 6px 28px rgba(52,42,30,.13);backdrop-filter:none;border-radius:18px;padding:14px 18px;width:calc(100% - 144px);max-width:1160px;left:calc(50% - 38px);bottom:16px;display:block;transform:translateX(-50%);transition:opacity .22s ease,transform .22s ease;color:#443c33;z-index:980}
.consult-bar-wrapper.hidden-bar{pointer-events:none;visibility:hidden;transform:translateX(-50%) translateY(30px)}
body.has-cookie-banner .consult-bar-wrapper,body.modal-open .consult-bar-wrapper{visibility:hidden;pointer-events:none;opacity:0}
.consult-bar-wrapper .ava-consult-tagline{font-family:inherit;font-weight:500;font-size:12px;line-height:1.5;color:#706253;margin:0 0 8px;letter-spacing:.01em}
.ava-consult-row{display:flex;align-items:center;gap:16px;width:100%}
.ava-consult-fields{display:flex;gap:8px;flex:1;min-width:0}
.consult-bar-wrapper .consult-input-new{height:44px;border:1px solid #ddd5ca;border-radius:9px;background:#fff;color:#302a24;padding:0 12px;text-align:left;font-family:inherit;font-size:13px;min-width:0;box-sizing:border-box}
.consult-bar-wrapper .consult-input-new::placeholder{color:#7a736a;opacity:1}
.consult-bar-wrapper .consult-f-name{flex:1 1 0;width:0}.consult-bar-wrapper .consult-f-phone{flex:1.5 1 0;width:0}.consult-bar-wrapper .consult-f-memo{flex:2.2 1 0;width:0}
.ava-consult-actions{display:flex;align-items:center;gap:14px;flex-shrink:0}
.ava-consult-privacy{display:flex;align-items:center;gap:4px;flex-wrap:wrap;font-size:12px;color:#51483e;cursor:pointer;max-width:190px}
.ava-consult-privacy input{width:16px;height:16px;accent-color:#76624b;margin:0 2px 0 0}
.ava-consult-policy{text-decoration:underline;text-underline-offset:3px;color:#655441;cursor:pointer}
.consult-bar-wrapper .consult-btn-new{height:44px;border-radius:9px;background:#76624b;font-family:inherit;font-weight:600;font-size:14px;line-height:1.2;padding:0 20px;width:auto;letter-spacing:0;flex:none}
.consult-bar-wrapper .consult-btn-new:hover{background:#5e4c39;transform:none}

@media(min-width:768px) and (max-width:1150px){.consult-bar-wrapper{width:calc(100% - 124px);left:calc(50% - 36px);padding:12px 14px}.ava-consult-row{flex-wrap:wrap;gap:10px}.ava-consult-fields{flex-basis:100%}.ava-consult-actions{width:100%;justify-content:space-between}.ava-consult-privacy{max-width:none}}
@media(max-width:767px){.consult-bar-wrapper{display:none!important}}

/* Transparent controls and quiet glass surfaces; no layout or submission changes. */
.ava-language-button.ava-pill[class*="text-white"]{color:rgba(255,255,255,.95)!important;border-color:rgba(255,255,255,.48)!important;text-shadow:0 1px 4px rgba(0,0,0,.18)}
.ava-language-button.ava-pill[class*="text-white"]:hover{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.75)!important}
.consult-bar-wrapper.consult-bar-wrapper{background:rgba(31,32,33,.86);border:1px solid rgba(255,255,255,.18);border-radius:16px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 5px 22px rgba(0,0,0,.16);color:#f7f5f1}
.consult-bar-wrapper.consult-bar-wrapper .ava-consult-tagline{color:#e0dcd6}
.consult-bar-wrapper .ava-consult-privacy,.consult-bar-wrapper .ava-consult-policy{color:#ece8e1}
.consult-bar-wrapper.consult-bar-wrapper .consult-input-new{background:rgba(255,255,255,.97);border-color:rgba(255,255,255,.25);border-radius:8px;color:#373431}
.consult-bar-wrapper.consult-bar-wrapper .consult-btn-new{background:#d5c8b5;color:#302d29;border:1px solid rgba(255,255,255,.15);border-radius:8px;font-weight:600;box-shadow:none}
.consult-bar-wrapper.consult-bar-wrapper .consult-btn-new:hover{background:#e2d8c9;transform:none}
.consult-bar-wrapper.consult-bar-wrapper .consult-btn-new:focus-visible{outline:2px solid #fff;outline-offset:3px}
.consult-bar-wrapper .ava-consult-privacy input{accent-color:#d5c8b5}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.consult-bar-wrapper.consult-bar-wrapper{background:#292a2b}}

/* Shared navigation controls across landing, surgery and skin. */
.ava-account-button{font-family:inherit!important;font-size:12px!important;font-weight:600!important;letter-spacing:.06em!important;line-height:1.2!important;min-height:32px;padding:6px 8px!important;border:1px solid transparent!important;border-radius:6px!important;background:transparent!important;-webkit-text-stroke:0!important;text-shadow:none!important;transition:opacity .18s!important;white-space:nowrap}
.ava-account-button:hover{opacity:.72!important}
.ava-account-button:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.ava-site-header [data-ava-subnav-bar],.ava-menu-surface{background:rgba(250,249,246,.90)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-color:rgba(105,93,76,.14)!important;box-shadow:0 8px 22px rgba(35,30,24,.08)!important}
#lang-trigger.ava-language-button{letter-spacing:normal;backdrop-filter:none;-webkit-backdrop-filter:none}
#lang-menu.ava-lang-menu .dot{width:14px;height:auto;background:none;opacity:0;border-radius:0}
#lang-menu.ava-lang-menu .dot:before{content:'✓';font-size:12px}
#lang-menu.ava-lang-menu a[aria-current=true] .dot{opacity:1}
#lang-menu.ava-lang-menu a{padding:9px 12px}
#lang-menu.ava-lang-menu a[aria-current=true]{background:#f1ebe1!important;color:#594934!important}
#lang-menu.ava-lang-menu a:hover{background:#f6f1e8!important;color:#594934!important}
/* Titles keep the full panel width, independently of the number/length of filters. */
.ava-treatment-heading{display:flex;flex-direction:column;gap:24px;margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid #eee9e2;min-width:0}
.ava-treatment-title{font-size:clamp(25px,2.3vw,34px);line-height:1.2;letter-spacing:-.025em;word-break:normal;overflow-wrap:normal;text-wrap:balance}
.ava-treatment-heading>div:first-child{width:100%;min-width:0}
.ava-treatment-heading p{line-height:1.65;max-width:62ch}
.ava-treatment-filters{display:flex;flex-wrap:wrap;gap:8px;padding-top:18px;border-top:1px solid #f0ece6;width:100%;min-width:0}
.ava-treatment-filters>button{max-width:100%;min-height:36px;text-align:left;white-space:normal;word-break:normal;overflow-wrap:break-word;line-height:1.4}
.ava-treatment-panel{min-width:0}
@media(max-width:767px){.ava-treatment-heading{gap:16px}.ava-treatment-filters{gap:6px}.ava-treatment-filters>button{min-height:40px;padding:8px 11px;font-size:12px}}
/* Journal: one editorial feature and two quieter stories. */
.ava-journal-home{max-width:1280px;margin:0 auto;padding:88px 40px 100px;color:#302c27}
.ava-journal-intro{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end;margin-bottom:36px;padding-bottom:28px;border-bottom:1px solid #d9d0c3}
.ava-journal-eyebrow{font-size:11px!important;font-weight:600;letter-spacing:.2em;line-height:1.5;color:#75644c;margin:0 0 14px}
.ava-journal-eyebrow .icon-icon-ava{font-size:34px;vertical-align:middle;letter-spacing:0;margin-right:12px}
.ava-journal-home .ava-journal-intro h2{font-family:Georgia,'Times New Roman',serif;font-size:clamp(34px,3.4vw,48px);font-weight:400;line-height:1.1;letter-spacing:-.025em;margin:0}
.ava-journal-intro p:not(.ava-journal-eyebrow){font-size:15px;line-height:1.85;color:#625b52;margin:0 0 14px}
.ava-journal-all{display:inline-flex;gap:20px;font-size:13px;font-weight:600;padding:8px 0;color:#51412d;text-decoration:none}
.ava-journal-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:0 38px}
.ava-journal-grid[hidden],.ava-journal-welcome[hidden]{display:none}
.ava-journal-story{display:flex;flex-direction:column;padding:28px 0;color:inherit;text-decoration:none;border-bottom:1px solid #ded7cc;min-width:0}
.ava-journal-feature{grid-row:span 2;padding:36px;background:#efe9df;border:1px solid #e4dbce;border-radius:3px;position:relative;overflow:hidden}
.ava-journal-home .ava-journal-story h3{font-family:Georgia,'Times New Roman',serif;font-size:25px;font-weight:400;line-height:1.22;letter-spacing:-.015em;margin:0 0 16px;text-wrap:pretty}
.ava-journal-home .ava-journal-feature h3{font-size:clamp(30px,3vw,41px);margin-top:35px}
.ava-journal-cover{margin:-36px -36px 25px;position:relative}
.ava-journal-cover img{display:block;width:100%;height:240px;object-fit:cover;object-position:center 52%}
.ava-journal-cover figcaption{position:absolute;bottom:0;left:0;right:0;padding:28px 22px 14px;background:linear-gradient(transparent,rgba(36,30,24,.72));color:#fff;font-size:9px;letter-spacing:.16em;line-height:1.5}
.ava-journal-home .ava-journal-cover~h3{margin-top:0}
.ava-journal-excerpt{font-size:14px;line-height:1.75;color:#62594e;margin:0 0 24px}
.ava-journal-story-foot{display:flex;gap:16px;justify-content:space-between;margin-top:auto;padding-top:20px;font-size:11px;color:#695b48}
.ava-journal-story:hover h3,.ava-journal-all:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.ava-journal-story:focus-visible,.ava-journal-all:focus-visible{outline:2px solid #806337;outline-offset:5px}
.ava-journal-welcome{display:grid;grid-template-columns:1.1fr 1fr;background:#f3efe8;align-items:center}
.ava-journal-welcome img{width:100%;height:340px;object-fit:cover;object-position:center}
.ava-journal-welcome>div{padding:36px 44px}
.ava-journal-home .ava-journal-welcome h3{font:400 clamp(28px,2.5vw,38px)/1.2 Georgia,serif;letter-spacing:-.02em;margin:0 0 18px}
.ava-journal-welcome p:not(.ava-journal-eyebrow){font-size:14px;line-height:1.8;color:#625b52}
.ava-journal-welcome a{display:inline-block;font-size:13px;color:#51412d;margin-top:16px;text-decoration:none}
@media(max-width:767px){.ava-journal-home{padding:56px 24px 64px}.ava-journal-intro{grid-template-columns:1fr;gap:24px}.ava-journal-grid{grid-template-columns:1fr}.ava-journal-feature{grid-row:auto;padding:28px}.ava-journal-home .ava-journal-feature h3{margin-top:16px}.ava-journal-welcome{grid-template-columns:1fr}.ava-journal-welcome img{height:240px}.ava-journal-welcome>div{padding:28px}.ava-journal-home .ava-journal-intro h2{font-size:36px}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.ava-site-header [data-ava-subnav-bar],.ava-menu-surface{background:#faf9f6!important}}

/* Keep long translated menus away from account and language controls. */
.ava-derm-header nav{min-width:0}
@media(min-width:1024px) and (max-width:1679px){.ava-derm-header nav{display:none!important}.ava-derm-mobile-nav{display:flex!important}}
.ava-contact-rail .ava-contact-button span{font-size:10px;white-space:nowrap;overflow-wrap:normal}

.ava-account-button,.ava-language-button.ava-pill{font-family:Inter,'Pretendard Variable','Noto Sans KR',sans-serif!important}

@media(max-width:767px){.ava-journal-cover{margin:-28px -28px 24px}.ava-journal-cover img{height:210px}.ava-journal-story-foot{flex-wrap:wrap}}