/* 로컬 폰트 (가변 폰트, latin / latin-ext 서브셋) */
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/CormorantGaramond-normal-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/CormorantGaramond-normal-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: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/CormorantGaramond-italic-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/CormorantGaramond-italic-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: 'DM Sans';
    font-style: normal;
    font-weight: 100 1000;
    font-display: swap;
    src: url('../fonts/DMSans-normal-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 100 1000;
    font-display: swap;
    src: url('../fonts/DMSans-normal-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: 'DM Sans';
    font-style: italic;
    font-weight: 100 1000;
    font-display: swap;
    src: url('../fonts/DMSans-italic-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'DM Sans';
    font-style: italic;
    font-weight: 100 1000;
    font-display: swap;
    src: url('../fonts/DMSans-italic-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;
}

:root {
    --cream: #f5f3ee;
    --beige: #e9e4d9;
    --sand: #ece8de;
    --brown: #50442f;
    --brown-dark: #4a3f2e;
    --ink: #2f2a22;
    --text: #6f685c;
    --gold: #a68d5f;
    --line: #d9d3c6;
    --serif: 'Cormorant Garamond', 'Times New Roman', serif;
    --sans: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
    --header-h: 72px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--serif);
    color: var(--ink);
    background: var(--cream);
    -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* 공통 요소 */
.eyebrow {
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--gold);
}
.divider {
    width: 40px;
    height: 1px;
    background: #89704A;
    margin: 32px auto;
}
.body-text {
    font-family: var(--sans);
    font-size: 11px;
    line-height: 2.1;
    color: var(--text);
}
em { font-style: italic; }

/* 헤더 */
.header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--header-h);
    padding: 0 86px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 100;
    color: #fff;
    transition: background 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
}
.header.scrolled {
    background: rgba(245, 243, 238, 0.95);
    color: var(--ink);
    box-shadow: 0 1px 0 var(--line);
}
.logo {
    font-size: 20px;
    letter-spacing: 0.02em;
}
.header .logo img {
    height: 32px;   /* 원하는 크기로 조절 */
    width: auto;    /* 비율 유지 */
}
.nav { display: flex; gap: 48px; }
.nav a {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    position: relative;
    padding: 6px 0;
}
.nav a::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s ease;
}
.nav a:hover::after,
.nav a.active::after { transform: scaleX(1); transform-origin: left; }

/* 히어로 */
.hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    max-height: 900px;
    background: url('../image/Dinar_Cream.png') center / cover no-repeat;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(40, 32, 22, 0.4);
}
.hero > * { position: relative; }
.hero .eyebrow { color: rgba(255, 255, 255, 0.85); margin-bottom: 20px; }
.hero h1 {
    font-weight: 400;
    font-size: clamp(56px, 7vw, 100px);
    line-height: 0.95;
    letter-spacing: -0.01em;
}
.hero .brand {
    font-family: var(--sans);
    font-size: 8px;
    letter-spacing: 0.32em;
    margin-top: 22px;
    opacity: 0.85;
}
.hero-bottom {
    position: absolute;
    left: 86px; right: 86px; bottom: 34px;
    display: flex;
    justify-content: space-between;
    font-family: var(--sans);
    font-size: 8px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}
.hero-bottom a { transition: opacity 0.3s; }
.hero-bottom a:hover { opacity: 0.6; }

/* 인트로 */
.intro {
    background: var(--cream);
    text-align: center;
    padding: 104px 24px 112px;
}
.intro h2, .essence h2 {
    font-weight: 400;
    font-size: clamp(36px, 4vw, 58px);
    line-height: 1.15;
    margin-top: 18px;
}
.intro h2 em { color: var(--gold); }
.intro .body-text { max-width: 420px; margin: 0 auto; }

/* 스토리 */
.story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 620px;
}
.story-img {
    background: url('../image/Dinar_Skincare_all.png') center / cover no-repeat;
}
.story-text {
    background: var(--beige);
    padding: 80px 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.story-text h2 {
    font-weight: 400;
    font-size: clamp(36px, 3.6vw, 52px);
    line-height: 1.2;
    margin-top: 26px;
}
.story-text .divider { margin: 40px 0; }
.story-text .body-text { max-width: 330px; }
.story-text .body-text + .body-text { margin-top: 18px; }

/* 철학 */
.philosophy {
    background: var(--brown);
    color: #efe9dc;
    text-align: center;
    padding: 110px 24px 112px;
}
.philosophy .eyebrow { color: rgba(239, 233, 220, 0.6); }
.philosophy blockquote {
    font-size: clamp(32px, 3.8vw, 54px);
    line-height: 1.25;
    max-width: 680px;
    margin: 26px auto 0;
    font-weight: 400;
}
.philosophy blockquote em { color: #c9b07c; }
.philosophy .divider { background: #CDB68D; }
.philosophy cite {
    font-family: var(--sans);
    font-style: normal;
    font-size: 8px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(239, 233, 220, 0.6);
}

/* 원칙 */
.principles {
    background: var(--cream);
    padding: 100px 100px 116px;
    text-align: center;
}
.principles h2 {
    font-weight: 400;
    font-size: clamp(36px, 3.8vw, 54px);
    margin-top: 18px;
}
.principle-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 70px;
    text-align: left;
}
.principle {
    border-top: 1px solid var(--line);
    padding-top: 30px;
}
.principle .num {
    font-size: 20px;
    color: var(--gold);
    letter-spacing: 0.05em;
}
.principle h3 {
    font-weight: 400;
    font-size: 26px;
    margin: 20px 0 14px;
}
.principle .body-text { max-width: 260px; font-size: 10px; line-height: 1.9; }

/* 이미지 배너 */
.banner {
    position: relative;
    height: 488px;
    background: url('../image/Dinar_MildCleanser.png') center / cover no-repeat;
    display: flex;
    align-items: flex-end;
    padding: 0 86px 104px;
}

.banner p {
    position: relative;
    color: #fff;
    font-size: clamp(30px, 3.4vw, 48px);
    line-height: 1.1;
    text-shadow: 0 1px 20px rgba(0, 0, 0, 0.08);
}
.banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(40, 32, 22, 0.3);
}
/* 에센스 */
.essence {
    background: var(--sand);
    text-align: center;
    padding: 100px 24px 150px;
}
.essence .body-text { margin-top: 22px; font-size: 10px; line-height: 1.9; }

/* 푸터 */
.footer {
    background: var(--brown-dark);
    color: rgba(239, 233, 220, 0.75);
    padding: 44px 86px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.footer .logo { font-size: 18px; }
.footer .logo img {
    height: 32px;   /* 원하는 크기로 조절 */
    width: auto;    /* 비율 유지 */
}
.footer .small {
    font-family: var(--sans);
    font-size: 8px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

/* 스크롤 등장 애니메이션 */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease, transform 1s ease;
}
.reveal.visible { opacity: 1; transform: none; }

/* 반응형 */
@media (max-width: 960px) {
    .header, .footer { padding-left: 32px; padding-right: 32px; }
    .hero-bottom { left: 32px; right: 32px; }
    .story { grid-template-columns: 1fr; }
    .story-img { min-height: 480px; }
    .story-text { padding: 72px 32px; }
    .principles { padding: 90px 32px; }
    .principle-list { grid-template-columns: 1fr; gap: 48px; }
    .banner { padding: 0 32px 72px; height: 420px; }
}
@media (max-width: 640px) {
    :root { --header-h: 64px; }
    .header { padding: 0 16px; }
    .logo { font-size: 17px; }
    .nav { gap: 16px; }
    .nav a { font-size: 9px; letter-spacing: 0.14em; }
    .hero-bottom { left: 16px; right: 16px; flex-direction: column; gap: 10px; align-items: center; }
    .story-img { min-height: 380px; }
    .story-text { padding: 64px 24px; }
    .principles { padding: 80px 24px; }
    .banner { padding: 0 24px 56px; height: 340px; }
    .footer { flex-direction: column; gap: 14px; text-align: center; padding: 40px 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}