@charset "UTF-8";
/* ============================================================
   lang.css — 언어 전환 드롭다운 (views/layouts/partials/lang-switch.php)
   GNB(어두운 헤더)와 랜딩 좌측 레일 양쪽에서 같은 스킨을 쓴다.
   색은 currentColor 기반이라 감싸는 영역의 글자색을 그대로 따른다.
   ============================================================ */

.ir-lang {
    position: relative;
    flex-shrink: 0;
    font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
    line-height: 1.4;
}

.ir-lang__toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 9px;
    border: 1px solid currentColor;
    border-color: rgba(255, 255, 255, 0.32);
    border-radius: 2px;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 12px;
    letter-spacing: 0.04em;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease;
}
.ir-lang__toggle:hover,
.ir-lang[data-open] .ir-lang__toggle { border-color: #c8a97e; color: #dbbd95; }
.ir-lang__toggle:focus-visible { outline: 2px solid #aa8964; outline-offset: 3px; }

.ir-lang__globe { flex-shrink: 0; opacity: .85; }

/* 라벨(KO/EN/简/繁/JA)은 대문자·한자라 글리프가 베이스라인 위쪽에만 실린다.
   flex 의 align-items:center 는 '줄상자'를 가운데 두므로, 아래쪽 디센더 여백만큼
   글자가 위로 떠 보인다(잉크 중심이 베이스라인 −6px, 버튼 중심보다 약 1.2px 위).
   지구본·캐럿은 이미 정확히 중앙이라 라벨만 내려 광학 중심을 맞춘다.
   크롬은 세로로 텍스트를 정수 픽셀에 스냅하므로 em 소수값은 의미가 없다 — 정수로 둔다. */
.ir-lang__code {
    font-weight: 500;
    position: relative;
    top: 2px;
}
.ir-lang__caret { flex-shrink: 0; opacity: .7; transition: transform .2s ease; }
.ir-lang[data-open] .ir-lang__caret { transform: rotate(180deg); }

/* ── 드롭다운 ─────────────────────────────────────── */
.ir-lang__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1200;
    min-width: 132px;
    margin: 0;
    padding: 5px 0;
    list-style: none;
    background: #f7f5f0;
    border: 1px solid #dedbd3;
    border-radius: 2px;
    box-shadow: 0 14px 28px rgba(32, 39, 61, 0.22);
}
.ir-lang__menu[hidden] { display: none !important; }
.ir-lang__menu li { margin: 0; padding: 0; }

.ir-lang__menu a {
    display: block;
    padding: 8px 14px;
    color: #2c3963;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}
.ir-lang__menu a:hover { background: #ece8df; color: #8e6b3e; }
.ir-lang__menu a[aria-current="true"] {
    color: #8e6b3e;
    font-weight: 600;
    background: #f0ece3;
}

/* 위로 열리는 변형 — 화면 하단에 붙는 랜딩 좌측 레일용 */
.ir-lang--up .ir-lang__menu { top: auto; bottom: calc(100% + 6px); }

/* 좌측 레일 변형 — 레일 폭을 꽉 채운다 */
.ir-lang--rail { display: block; margin-bottom: 12px; }
.ir-lang--rail .ir-lang__toggle {
    width: 100%;
    justify-content: center;
    height: 32px;
    border-color: rgba(255, 255, 255, 0.16);
    font-family: 'JetBrains Mono', Consolas, 'Noto Sans KR', monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: #8A90AD;
}
.ir-lang--rail .ir-lang__toggle:hover,
.ir-lang--rail[data-open] .ir-lang__toggle { border-color: #C8A97E; color: #E3CBA4; }
.ir-lang--rail .ir-lang__menu { left: 0; right: 0; min-width: 0; }
/* 변형별 보정값은 글꼴·크기가 달라 각각 실측해 정했다.
   레일(11px 모노)은 1px, 모바일 상단바(11px 산세리프)는 보정 없이 이미 중앙. */
.ir-lang--rail .ir-lang__code { top: 1px; }
.ir-lang--bar  .ir-lang__code { top: 0; }

/* 드로어 변형 — 밝은 패널 위에 놓이므로 어두운 글자·테두리로 바꾼다 */
.ir-lang--panel .ir-lang__toggle { border-color: #ccc6b9; color: #2c3963; }
.ir-lang--panel .ir-lang__toggle:hover,
.ir-lang--panel[data-open] .ir-lang__toggle { border-color: #8e6b3e; color: #8e6b3e; }

/* 모바일 상단바 변형 — 버거 버튼 옆.
   .lp-topbar__row 는 space-between 이라 auto 마진으로 오른쪽에 붙인다. */
.ir-lang--bar .ir-lang__toggle { height: 30px; padding: 0 8px; font-size: 11px; }
.lp-topbar__row .ir-lang { margin-left: auto; }
.lp-topbar__row .ir-lang__toggle { border-color: rgba(255, 255, 255, 0.22); color: #DCD7CE; }

@media (max-width: 760px) {
    .ir-lang__toggle { height: 30px; padding: 0 7px; gap: 5px; font-size: 11px; }
    .ir-lang__globe  { width: 13px; height: 13px; }
    .ir-lang__menu   { min-width: 124px; }
    .ir-lang__menu a { padding: 9px 13px; font-size: 13px; }
}

/* 한국어가 아닐 때만 조인다.
   예약 채널 라벨(Naver Booking / カカオトーク …)이 원문보다 길어 헤더가 넘칠 수 있다.
   좁은 화면에서는 gnb.css 가 이미 라벨을 아이콘만 남기고 감추므로, 여기서는
   태블릿 구간의 글자·여백과 아주 좁은 화면의 언어 버튼만 손본다. */
@media (max-width: 400px) {
    html:not([lang="ko"]) .ir-header .ir-lang__toggle { padding: 0 6px; gap: 4px; }
    html:not([lang="ko"]) .ir-header .ir-lang__caret { display: none; }
}

/* ============================================================
   히어로 헤드라인 — 한국어가 아닐 때만 적용
   원문 "맞춤탄력 리프팅"(8자)이 번역되면 "オーダーメイド ハリリフティング",
   "Custom firmness lifting" 처럼 두세 배로 길어진다. 히어로 텍스트 블록은
   1280px 폭을 그대로 쓰기 때문에, 그대로 두면 제목이 인물 사진 위를 가로지르고
   본문이 아래로 밀린다. 폭을 잡아 주고 크기를 한 단계 낮춰 원래 자리에 앉힌다.
   한국어 화면은 이 규칙에 걸리지 않는다.
   ============================================================ */
html:not([lang="ko"]) .uc-hero__heading,
html:not([lang="ko"]) .uc-hero__sub,
html:not([lang="ko"]) .uc-hero__desc,
html:not([lang="ko"]) .pg-hero__heading,
html:not([lang="ko"]) .rd-hero__title,
html:not([lang="ko"]) .pr-hero__title,
html:not([lang="ko"]) .prep__title {
    max-width: 36rem;
}
html:not([lang="ko"]) .uc-hero__heading,
html:not([lang="ko"]) .pg-hero__heading,
html:not([lang="ko"]) .rd-hero__title,
html:not([lang="ko"]) .pr-hero__title,
html:not([lang="ko"]) .prep__title {
    font-size: 2.25rem;
    line-height: 1.28;
    text-wrap: balance;
}
html:not([lang="ko"]) .uc-hero__sub {
    font-size: 1.375rem;
    line-height: 1.45;
    text-wrap: balance;
}

@media (max-width: 760px) {
    html:not([lang="ko"]) .uc-hero__heading,
    html:not([lang="ko"]) .pg-hero__heading,
    html:not([lang="ko"]) .rd-hero__title,
    html:not([lang="ko"]) .pr-hero__title,
    html:not([lang="ko"]) .prep__title {
        max-width: none;
        font-size: 1.625rem;
        line-height: 1.26;
    }
    html:not([lang="ko"]) .uc-hero__sub { max-width: none; font-size: 1rem; }
    html:not([lang="ko"]) .uc-hero__desc { max-width: none; }
}

/* ============================================================
   3열 그리드 — 한국어가 아닐 때만 적용
   `grid-template-columns: repeat(3, 1fr)` 의 1fr 은 최소값이 auto(=min-content)라,
   칸 안의 글이 길면 칸이 제 몫보다 넓어지고 그리드 전체가 오른쪽으로 흘러넘친다.
   (일본어 /birth /laser 에서 100px 이상 가로 스크롤이 생겼다)
   칸의 최소 폭을 0 으로 눌러 1fr 이 실제로 균등 분할되게 한다.
   ============================================================ */
html:not([lang="ko"]) .bt-changes-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html:not([lang="ko"]) .bt-changes-item { min-width: 0; }
html:not([lang="ko"]) .bt-changes-item__title,
html:not([lang="ko"]) .bt-changes-item .uc-text { overflow-wrap: break-word; }

/* ============================================================
   가로 넘침 방지 — 한국어가 아닐 때만 적용
   flex/grid 자식은 기본 최소폭이 min-content 라, 번역으로 길어진 글이
   컨테이너보다 넓어지면 접히지 않고 그대로 화면 밖으로 밀린다.
   (모바일 390px 에서 /booster /birth /rituo 등이 최대 315px 넘쳤다)
   본문 영역의 텍스트 컨테이너에 한해 최소폭을 0 으로 눌러 접히게 한다.
   이미지·아이콘은 원래 크기를 지켜야 하므로 제외한다.
   ============================================================ */
html:not([lang="ko"]) .site-main div,
html:not([lang="ko"]) .site-main section,
html:not([lang="ko"]) .site-main article,
html:not([lang="ko"]) .site-main p,
html:not([lang="ko"]) .site-main h1,
html:not([lang="ko"]) .site-main h2,
html:not([lang="ko"]) .site-main h3,
html:not([lang="ko"]) .site-main h4,
html:not([lang="ko"]) .site-main li,
html:not([lang="ko"]) .site-main dl,
html:not([lang="ko"]) .site-main dt,
html:not([lang="ko"]) .site-main dd,
html:not([lang="ko"]) .site-main span,
html:not([lang="ko"]) .site-main td,
html:not([lang="ko"]) .site-main th {
    min-width: 0;
    /* overflow-wrap:anywhere 는 break-word 와 달리 요소의 min-content 폭까지 줄인다.
       flex 컨테이너가 자식을 fit-content 로 재는 자리(예: .uc-detail-row 세로 배치)에서
       일본어·중국어처럼 띄어쓰기가 없는 긴 문장이 칸을 밀어내는 것을 막는 핵심. */
    overflow-wrap: anywhere;
}

/* 랜딩(/)은 .site-main 이 아니라 .lp 안에 있어 같은 그물을 따로 쳐 준다. */
html:not([lang="ko"]) .lp div,
html:not([lang="ko"]) .lp section,
html:not([lang="ko"]) .lp article,
html:not([lang="ko"]) .lp p,
html:not([lang="ko"]) .lp h1,
html:not([lang="ko"]) .lp h2,
html:not([lang="ko"]) .lp h3,
html:not([lang="ko"]) .lp h4,
html:not([lang="ko"]) .lp li,
html:not([lang="ko"]) .lp dl,
html:not([lang="ko"]) .lp dt,
html:not([lang="ko"]) .lp dd,
html:not([lang="ko"]) .lp span,
html:not([lang="ko"]) .lp td,
html:not([lang="ko"]) .lp th {
    min-width: 0;
    overflow-wrap: anywhere;
}


/* GNB 1뎁스 — 번역 라벨(Signature treatments 등)이 길어 390px 에서 넘친다.
   한국어가 아닐 때만 글자와 간격을 좁힌다. */
@media (max-width: 760px) {
    html:not([lang="ko"]) .ir-primary { gap: 6px; }
    html:not([lang="ko"]) .ir-primary button { font-size: 11.5px; }
}
@media (max-width: 400px) {
    html:not([lang="ko"]) .ir-primary { gap: 4px; }
    html:not([lang="ko"]) .ir-primary button { font-size: 11px; }
}

/* 부위 태그 알약 — 한국어 라벨(예: "이마·미간") 기준으로 폭 7.5rem, nowrap 고정이라
   번역문("Nasolabial folds & mouth area")이 알약과 화면 밖으로 삐져나온다.
   한국어가 아닐 때만 내용에 맞춰 늘고 접히게 한다. */
html:not([lang="ko"]) .uc-guide-tag {
    width: auto;
    max-width: 100%;
    white-space: normal;
}

/* ============================================================
   선 · 결 · 톤 탭 (/prepare/{slug}) — 한국어가 아닐 때만 적용
   한국어는 '선/결/톤' 한 글자라 27px 큰 글자가 어울리지만, 번역하면
   LINE / TEXTURE / TONE, 线条 / 肤质 / 肤色 처럼 길어져 칸이 서로 다른 폭으로
   벌어지고 글자가 테두리에 닿는다. 칸을 균등 분할하고 글자를 줄인다.
   (아래 작은 영문 라벨은 focus.js 가 큰 글자와 같은 말이 되면 hidden 처리한다)
   ============================================================ */
html:not([lang="ko"]) .category-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html:not([lang="ko"]) .category-tabs strong { font-size: 18px; line-height: 1.5; padding: 0 4px; }
html:not([lang="ko"]) .category-tabs span[hidden] { display: none; }
html[lang="en"] .category-tabs strong { font-size: 14px; letter-spacing: .03em; }
html[lang="en"] .category-tabs a { padding: 17px 0 15px; }