@charset "utf-8";
/* 01. 글꼴 · 디자인 변수 (색, 글자 크기, 폭은 여기서만 관리, 1rem = 10px) */
@font-face {font-family: 'Pretendard';font-weight: 400;font-style: normal;font-display: swap;src: url('../fonts/Pretendard-Regular.woff2') format('woff2');}
@font-face {font-family: 'Pretendard';font-weight: 500;font-style: normal;font-display: swap;src: url('../fonts/Pretendard-Medium.woff2') format('woff2');}
@font-face {font-family: 'Pretendard';font-weight: 700;font-style: normal;font-display: swap;src: url('../fonts/Pretendard-Bold.woff2') format('woff2');}
@font-face {font-family: 'Pretendard';font-weight: 800;font-style: normal;font-display: swap;src: url('../fonts/Pretendard-ExtraBold.woff2') format('woff2');}
:root {--bg: #F8F5EF;--soft: #FFFEFB;--beige: #EEE8DE;--text: #292C29;--text-2: #77766F;--text-3: #5E5D56;--accent: #727F70;--accent-deep: #5D6A5B;--line: #E6E0D7;--footer: #4A4944;--font-base: 'Pretendard', 'Malgun Gothic', sans-serif;--font-serif: Georgia, 'Times New Roman', 'Noto Serif KR', serif;--container-width: 144rem;--wide-width: 180rem;--page-gutter: 7.2rem;--header-height: 10rem;--header-height-s: 7.2rem;--ease: cubic-bezier(.22, .8, .2, 1);--radius: 2rem;}
:root {--fs-display: clamp(4.8rem, 5.6vw, 10rem);--fs-h2: clamp(3.4rem, 3.5vw, 5.6rem);--fs-h3: clamp(2.2rem, 1.7vw, 2.8rem);--fs-lead: clamp(1.8rem, 1.25vw, 2.2rem);--fs-body: 1.8rem;--fs-small: 1.5rem;--fs-label: 1.3rem;}
html {scroll-behavior: smooth;scroll-padding-top: calc(var(--header-height-s) + 2rem);}
body {color: var(--text);background: var(--bg);font: 400 var(--fs-body)/1.75 var(--font-base);}
body.menu_open {overflow: hidden;}
.container {width: 100%;max-width: calc(var(--container-width) + var(--page-gutter) * 2);padding-inline: var(--page-gutter);margin-inline: auto;}
.container.is_wide {max-width: calc(var(--wide-width) + var(--page-gutter) * 2);}
.sr_only {position: absolute;width: .1rem;height: .1rem;padding: 0;overflow: hidden;clip-path: inset(50%);white-space: nowrap;}
.skip_link {position: fixed;left: 1.6rem;top: -10rem;z-index: 1000;padding: 1.2rem 2rem;background: var(--accent-deep);color: #fff;font-weight: 700;}
.skip_link:focus {top: 1.6rem;}
.ico {width: 4.4rem;height: 4.4rem;fill: none;stroke: currentColor;stroke-width: 1.4;stroke-linecap: round;stroke-linejoin: round;}
.arrow {display: inline-grid;place-items: center;width: 2.4rem;height: 2.4rem;overflow: hidden;}
.arrow svg {width: 100%;height: 100%;fill: none;stroke: currentColor;stroke-width: 1.8;stroke-linecap: round;stroke-linejoin: round;transition: transform .45s var(--ease);}
a:hover .arrow svg, button:hover .arrow svg, a:focus-visible .arrow svg {transform: translateX(.6rem);}
/* 02. 버튼 · 공통 제목 */
.btn {display: inline-flex;align-items: center;justify-content: center;gap: 1.4rem;min-height: 6rem;padding: 0 3.6rem;border: .1rem solid transparent;border-radius: 10rem;font-size: 1.7rem;font-weight: 700;letter-spacing: -.01em;transition: background .35s, color .35s, border-color .35s;}
.btn_primary {background: var(--accent-deep);color: #fff;}
.btn_primary:hover, .btn_primary:focus-visible {background: var(--text);}
.btn_line {border-color: var(--text);color: var(--text);}
.btn_line:hover, .btn_line:focus-visible {background: var(--text);color: var(--bg);}
.btn_sm {min-height: 4.8rem;padding: 0 2.6rem;font-size: 1.5rem;}
.eyebrow {display: flex;align-items: center;gap: 1.4rem;margin-bottom: 2.6rem;font: 400 1.6rem/1 var(--font-serif);letter-spacing: .24em;text-transform: uppercase;color: var(--accent-deep);}
.eyebrow::before {content: '';width: 4rem;height: .1rem;background: currentColor;transform-origin: left;transition: transform 1s .3s var(--ease);}
.reveal_ready:not(.is_visible) .eyebrow::before, .eyebrow.reveal_ready:not(.is_visible)::before {transform: scaleX(0);}
.section_title {font-size: var(--fs-h2);font-weight: 300;line-height: 1.38;letter-spacing: -.04em;color: var(--text);}
.section_title strong {font-weight: 700;}
.section_desc {margin-top: 3rem;font-size: var(--fs-lead);line-height: 1.85;color: var(--text-3);}
/* 03. 헤더 (스크롤하면 줄어들고 아이보리 배경) */
.header {position: fixed;inset: 0 0 auto;z-index: 100;height: var(--header-height);transition: height .45s var(--ease), background .35s, box-shadow .35s;}
.header_inner {display: flex;align-items: center;justify-content: space-between;gap: 4rem;max-width: calc(var(--wide-width) + var(--page-gutter) * 2);height: 100%;padding-inline: var(--page-gutter);margin-inline: auto;}
.header.is_scrolled {height: var(--header-height-s);background: rgba(248, 245, 239, .94);backdrop-filter: blur(1.4rem);box-shadow: 0 .1rem 0 var(--line);}
.logo {display: inline-flex;align-items: center;gap: 1.4rem;flex-shrink: 0;}
.logo_mark {width: 4.6rem;height: 4.6rem;color: var(--accent-deep);transition: transform .45s var(--ease);}
.header.is_scrolled .logo_mark {transform: scale(.86);}
.logo_text {display: grid;line-height: 1.15;}
.logo_text strong {font: 400 2rem/1 var(--font-serif);letter-spacing: .14em;}
.logo_text small {margin-top: .5rem;font-size: 1.3rem;font-weight: 500;letter-spacing: .3em;color: var(--text-3);}
.gnb_list {display: flex;gap: clamp(2.4rem, 3.2vw, 5.6rem);}
.gnb_list a {position: relative;display: block;padding-block: 1rem;font-size: 1.6rem;font-weight: 500;white-space: nowrap;transition: color .3s;}
.gnb_list a::after {content: '';position: absolute;left: 0;right: 0;bottom: .2rem;height: .1rem;background: var(--accent-deep);transform: scaleX(0);transform-origin: left;transition: transform .45s var(--ease);}
.gnb_list a:hover::after, .gnb_list a:focus-visible::after, .gnb_list a.is_active::after {transform: scaleX(1);}
.gnb_list a.is_active {color: var(--accent-deep);font-weight: 700;}
.header_util {display: flex;align-items: center;gap: 1.6rem;}
.gnb_toggle {display: none;width: 4.8rem;height: 4.8rem;place-content: center;gap: .7rem;}
.gnb_toggle span {display: block;width: 2.8rem;height: .2rem;background: var(--text);}
/* 04. 모바일 전체 메뉴 */
.gnb_panel {width: 100%;max-width: none;height: 100vh;height: 100dvh;max-height: none;margin: 0;padding: 2rem var(--page-gutter) 4rem;color: var(--text);background: var(--bg);}
.gnb_panel[open] {display: flex;flex-direction: column;animation: menu_in .35s var(--ease);}
.gnb_panel::backdrop {background: var(--bg);}
.panel_head {display: flex;align-items: center;justify-content: space-between;min-height: 6.4rem;}
.gnb_close {display: grid;place-items: center;width: 4.8rem;height: 4.8rem;font-size: 3.6rem;line-height: 1;}
.panel_nav {margin-block: auto;padding-block: 3rem;}
.panel_nav a {display: flex;align-items: baseline;gap: 2rem;padding-block: 1.4rem;border-bottom: .1rem solid var(--line);font-size: clamp(2.6rem, 7vw, 4rem);font-weight: 300;letter-spacing: -.04em;}
.panel_nav a span {font: 400 1.4rem/1 var(--font-serif);letter-spacing: .12em;color: var(--accent-deep);}
.panel_cta {display: grid;gap: 1.2rem;}
@keyframes menu_in {from {opacity: 0;} to {opacity: 1;}}
/* 05. 푸터 (짙은 웜그레이) */
.footer {background: var(--footer);color: rgba(248, 245, 239, .78);}
.footer_top {display: flex;align-items: flex-start;justify-content: space-between;gap: 8rem;padding-block: 9rem 6rem;}
.footer .logo {color: #fff;}
.footer .logo_mark {color: #b9c4b6;}
.footer .logo_text small {color: rgba(248, 245, 239, .6);}
.footer_info {display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 3rem 8rem;font-size: 1.5rem;}
.footer_info dl {display: grid;grid-template-columns: 8.6rem 1fr;gap: 1.2rem 1rem;align-content: start;}
.footer_info dt {color: rgba(248, 245, 239, .5);}
.footer_bottom {display: flex;justify-content: space-between;gap: 3rem;padding-block: 3rem 4rem;border-top: .1rem solid rgba(248, 245, 239, .14);font-size: 1.3rem;line-height: 1.8;color: rgba(248, 245, 239, .55);}
.footer_bottom a {text-decoration: underline;text-underline-offset: .4rem;color: rgba(248, 245, 239, .85);}
.footer_note {max-width: 80rem;}
/* 06. 모바일 하단 예약 바 · 맨 위로 */
.m_bar {display: none;}
.btn_top {position: fixed;right: 2.8rem;bottom: 2.8rem;z-index: 50;display: grid;place-items: center;width: 5.6rem;height: 5.6rem;border-radius: 50%;background: var(--soft);box-shadow: 0 0 0 .1rem var(--line);color: var(--text);font-size: 2.2rem;visibility: hidden;opacity: 0;transition: opacity .3s, visibility .3s, background .3s, color .3s;}
.btn_top:hover {background: var(--accent-deep);color: #fff;}
.btn_top.is_visible {visibility: visible;opacity: 1;}
/* 07. 스크롤 등장 (끝나면 JS 가 클래스를 제거해 호버 효과와 충돌하지 않게 함) */
.reveal_ready {opacity: 0;transform: translateY(4rem);transition: opacity 1s var(--ease), transform 1s var(--ease);transition-delay: var(--d, 0s);}
.reveal_ready.is_visible {opacity: 1;transform: none;}
.reveal_ready.is_curtain {opacity: 1;transform: none;clip-path: inset(0 0 98% 0);transition: clip-path 1.4s var(--ease);transition-delay: var(--d, 0s);}
.reveal_ready.is_curtain.is_visible {clip-path: inset(0);}
.slot_img {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(var(--sc, 1));transition: transform 1.4s var(--ease);}
.slot_img[data-parallax] {--sc: 1.12;transition: none;}
.slot_img[hidden] {display: none;}
.slot_label {position: absolute;left: 2rem;top: 2rem;z-index: 6;display: none;padding: .8rem 1.2rem;border: .1rem dashed rgba(94, 93, 86, .55);border-radius: .6rem;background: rgba(255, 254, 251, .75);font: 400 1.2rem/1.5 var(--font-serif);letter-spacing: .08em;color: var(--text-3);pointer-events: none;}
.is_empty > .slot_label {display: block;}
.has_img > .deco {display: none;}
/* 08. 반응형 (1280 / 1024 / 768) */
@media (max-width: 1280px) {
:root {--page-gutter: 5rem;}
.gnb_list {gap: 2.4rem;}
.footer_top {flex-direction: column;gap: 5rem;}
}
@media (max-width: 1024px) {
:root {--page-gutter: 4rem;--header-height: 8.4rem;--header-height-s: 6.8rem;}
.gnb, .header_util .btn {display: none;}
.gnb_toggle {display: grid;}
.footer_info {grid-template-columns: 1fr;}
.btn_top {bottom: 9rem;}
}
@media (max-width: 768px) {
:root {--page-gutter: 2rem;--header-height: 7.2rem;--header-height-s: 6.4rem;}
.logo_mark {width: 4rem;height: 4rem;}
.logo_text strong {font-size: 1.8rem;}
.btn {min-height: 5.6rem;padding: 0 2.8rem;}
.footer_top {padding-block: 6rem 4rem;}
.footer_info dl {grid-template-columns: 7.6rem 1fr;}
.footer_bottom {flex-direction: column;gap: 1.2rem;padding-bottom: 11rem;}
.m_bar {position: fixed;left: 0;right: 0;bottom: 0;z-index: 90;display: grid;grid-template-columns: 1fr 1fr;gap: 1rem;padding: 1.2rem 2rem calc(1.2rem + env(safe-area-inset-bottom));background: rgba(248, 245, 239, .96);box-shadow: 0 -.1rem 0 var(--line);backdrop-filter: blur(1.2rem);}
.m_bar .btn {min-height: 5.4rem;padding: 0 1.6rem;}
.btn_top {bottom: 8.6rem;right: 1.6rem;width: 4.8rem;height: 4.8rem;}
}
@media (prefers-reduced-motion: reduce) {
html {scroll-behavior: auto;}
*, *::before, *::after {animation-duration: .01ms !important;animation-iteration-count: 1 !important;transition-duration: .01ms !important;}
.reveal_ready {opacity: 1;transform: none;}
}