/* Aboreto: 메인 배너 제목용. 사이트에 직접 내장해 새로고침 때 대체 폰트가 먼저 보이는 현상을 막습니다.
   (font-display: block = 폰트가 준비될 때까지 글자를 숨기고, 준비되면 바로 제 폰트로 그립니다) */
@font-face {
    font-family: 'Aboreto';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url('../fonts/aboreto-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Aboreto';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url('../fonts/aboreto-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Khmer MN';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/KHMER-MN.TTF') format('truetype');
}

/* 원장 서명용 손글씨 폰트 */
@font-face {
    font-family: 'InkLipquid';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/THEFACESHOP_INKLIPQUID.ttf') format('truetype');
}

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');

/********************************************************** 
* Fonts
***********************************************************/ 
* {
    font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

.serif,
.serif * {
    font-family: var(--font-serif);
}

.font-display,
.font-display * {
    font-family: var(--font-display);
}

/********************************************************** 
* Common
***********************************************************/ 
:root {
    color-scheme: light only !important;
    --color-cream: #eae6d7;
    --color-cream-soft: #e3ddcc;
    --color-ink: #2b291d;
    --color-ink-soft: #5c5a44;
    --color-olive: #97a06a;
    --color-olive-deep: #737a44;
    --color-olive-mid: #7e8856;
    --color-gold: #c9d19a;
    --color-gold-mute: #8a7d4e;
    --color-dark: #2a2818;
    --color-darker: #22200f;
    --color-hero: #3a3826;
    --color-vision: #35331f;
    --color-text-cream: #f0ebd6;
    --color-text-cream-soft: #f2ecd6;
    --color-text-cream-dim: rgba(240, 235, 214, .62);
    --font-serif: 'Cormorant Garamond', Georgia, 'Pretendard Variable', 'Pretendard', sans-serif;
    --font-display: 'Playfair Display', Georgia, 'Pretendard Variable', 'Pretendard', sans-serif;
    --font-banner: 'Aboreto', 'Playfair Display', Georgia, serif;
    --font-sans: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-kr: 'Noto Sans KR', 'Pretendard Variable', 'Pretendard', sans-serif;
    --font-infant: 'Cormorant Infant', 'Cormorant Garamond', Georgia, serif;
    --c-ivory: #f3f2e9;
    --c-sage: #545c48;
    --c-ink2: #342d29;
    --c-mute: #5e5a50;
    --c-line: #d5d4c6;
    --c-olive2: #8b9280;
    --c-card: #565a4c;
    --ease-out: cubic-bezier(.2, .7, .2, 1);
    --fs-xs: 12px;
    --fs-sm: 14px;
    --fs-body: 17px;
    --fs-lead: 18px;
    --fs-h3: 20px;
    --fs-h2: 22px;
    --fs-display: clamp(30px, 2.7vw, 38px);
    --fs-hero: clamp(42px, 5.2vw, 68px);
    --fs-hero-lead: clamp(16px, 1.35vw, 22px);
    --fs-nav: 16px;
    --fs-cta: 15px;
    --fs-phone: 32px;
    --lh-body: 1.7;
    --lh-title: 1.3;
}

html {
    font-size: 16px;
}

@media (prefers-color-scheme: dark) {
    html,
    body {
        background: #eae6d7 !important;
        background-color: #eae6d7 !important;
    }
    :root {
        color-scheme: light only !important;
    }
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
b, strong { font-weight: 700; }
i, em { font-style: italic; }
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
html, body {
    font: 400 16px/1.3 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    color: #2b291d;
    background: #eae6d7;
    background-color: #eae6d7;
    word-break: keep-all;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    overflow-x: clip; /* hidden 은 body 를 스크롤 영역으로 만들어 position: sticky 가 먹지 않게 하므로 clip 사용 */
}
html.open { overflow-y: hidden !important; }
body.open { width: 100%; height: 100%; overflow-y: hidden !important; }
body * { box-sizing: border-box; word-break: keep-all; }
a:hover, a:link, a:visited, a:active {
    text-decoration: none;
    color: inherit;
}
a {
    color: inherit;
    transition: opacity .3s;
    -webkit-tap-highlight-color: transparent;
}
hr { border: 0; margin: 0; width: 100%; height: 1px; background: #fff; }
button { font-family: inherit; }
address { font-style: normal; }
* { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; vertical-align: top; }
:focus-visible {
    outline: 2px solid #97a06a;
    outline-offset: 3px;
    border-radius: 2px;
}

/********************************************************** 
* scrollbar
***********************************************************/
::-webkit-scrollbar {
    width: 8px;
    height: 100vh;
    background: transparent;
}
::-webkit-scrollbar-track {
    display: none;
    background-color: transparent;
}
::-webkit-scrollbar-thumb {
    width: 8px;
    background-color: rgba(43, 41, 29, 0.45);
    border-radius: 2rem;
}

/********************************************************** 
* helpers
***********************************************************/
.ta_c { text-align: center; }
.normal { font-weight: 400; }
.medium { font-weight: 500; }
.semibold { font-weight: 600; }
.italic { font-style: italic; }

.pc_cont_1080 { display: block; }
.m_cont_1080 { display: none; }

/********************************************************** 
* reveal
***********************************************************/
.reveal {
    transition: transform 0.8s ease-out, opacity 0.8s ease-out;
    will-change: transform, opacity;
    transition-delay: .1s;
}
.fade-in { opacity: 0; }
.fade-up { transform: translateY(36px); opacity: 0; }
.active.fade-in { opacity: 1; }
.active.fade-up { transform: translateY(0); opacity: 1; }

.active.delay_80 { transition-delay: .08s; }
.active.delay_100 { transition-delay: .1s; }
.active.delay_120 { transition-delay: .12s; }
.active.delay_140 { transition-delay: .14s; }
.active.delay_200 { transition-delay: .2s; }
.active.delay_240 { transition-delay: .24s; }
.active.delay_300 { transition-delay: .3s; }
.active.delay_400 { transition-delay: .4s; }

/********************************************************** 
* keyframes
***********************************************************/
@keyframes pv-marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes pv-bob {
    0%, 100% { transform: translateY(0); opacity: .9; }
    50% { transform: translateY(9px); opacity: .4; }
}
@keyframes pv-fadeup {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}
@keyframes pv-spin {
    to { transform: rotate(360deg); }
}
@keyframes pv-spin45 {
    from { transform: rotate(45deg); }
    to { transform: rotate(405deg); }
}
@keyframes pv-spot {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes pv-kb {
    from { transform: scale(1); }
    to { transform: scale(1.08); }
}
@keyframes pv-heroSway {
    0% { transform: scale(1) translate(0, 0); }
    50% { transform: scale(1.1) translate(-.6%, .5%); }
    100% { transform: scale(1.04) translate(.4%, -.3%); }
}
@keyframes pv-drift1 {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(90px, 64px) scale(1.24); }
    100% { transform: translate(0, 0) scale(1); }
}
@keyframes pv-drift2 {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-100px, -58px) scale(1.2); }
    100% { transform: translate(0, 0) scale(1); }
}

/********************************************************** 
* more_btn / cta
***********************************************************/
.pvbtn {
    cursor: pointer;
    transition: transform .4s var(--ease-out), background-color .45s, color .45s, box-shadow .45s;
}
.pvbtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -14px rgba(30, 28, 15, .55);
}

/**********************************************************
* Page progress
***********************************************************/
.page-progress {
    position: fixed;
    left: 0;
    top: 0;
    height: 2px;
    width: 0%;
    background: #97a06a;
    z-index: 9998;
}

p br.pvsm { display: none; }
@media (max-width: 820px) {
    p br.pvm { display: none; }
    p br.pvsm { display: inline; }
}

/* 모바일 줄바꿈: 마지막 줄에 한두 글자만 남지 않도록 줄 길이를 고르게 나눈다 (제목 · 본문 · 목록 공통)
   - 줄 수가 많은 긴 글(약관 등)은 브라우저가 자동으로 적용을 건너뛰므로 그대로 읽기 좋게 흐른다.
   - 한글은 단어 단위로 줄을 바꾸고(keep-all), 화면보다 긴 한 덩어리(영문·URL·숫자)만 강제로 꺾는다. */
@media (max-width: 720px) {
    html, body { overflow-wrap: break-word; }
    h1, h2, h3, h4, h5, h6, dt, figcaption,
    .section_title, .sub_title, .eyebrow {
        text-wrap: balance;
    }
    p, li, dd, label, blockquote, td, th, .desc {
        text-wrap: balance;
    }
}

/* 모바일: 제목·본문 안의 강제 줄바꿈(<br>)은 풀어서 화면 폭에 맞게 자연스럽게 흐르게 한다.
   (PC 폭에 맞춰 넣은 줄바꿈이 좁은 화면에서 "한 줄 + 한두 글자 + 한 줄"처럼 꺾이는 것을 막기 위함)
   예외로 줄바꿈을 그대로 두는 곳: 영문 장식 제목(.hero_title / .display_title / .philosophy_title), 짧은 라벨(.standard_label),
   서브 배너 문구(.page_hero_lead / .hero_lead), <br class="keep_br"> · <br class="br_m"> */
@media (max-width: 720px) {
    :is(h1, h2, h3, h4, .section_title, .sub_title, .difference_title):not(.hero_title, .display_title, .philosophy_title) br:not(.keep_br, .br_m),
    main p:not(.standard_label, .page_hero_lead, .hero_lead, .product_use, .eyebrow) br:not(.keep_br, .br_m) {
        display: none;
    }
}

/* 줄바꿈이 항목 구분(<br>)으로 쓰이는 정의 목록은, 항목 끝 한 단어만 남는 것만 막는다 */
@media (max-width: 720px) {
    dd { text-wrap: pretty; }
}