@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Noto+Sans+KR:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

:root {
  --background-50:#fcfcfc;
  --background-100:#f6f6f4;
  --background-200:#e8e9e3;
  --background-300:#d3d5cb;
  --background-400:#bec2b1;
  --background-500:#a9af98;
  --background-600:#959c80;
  --background-700:#7f856a;
  --background-800:#676d55;
  --background-900:#4f5340;
  --background-950:#36392b;

  --primary-50:#edf7f1;
  --primary-100:#d4f0e0;
  --primary-200:#ade2c4;
  --primary-300:#82cf9f;
  --primary-400:#60bc7b;
  --primary-500:#47a570;
  --primary-600:#3c8e5f;
  --primary-700:#31764e;
  --primary-800:#265e3e;
  --primary-900:#1b462e;
  --primary-950:#112e1e;

  --accent-50:#f5f8f1;
  --accent-100:#e5efe0;
  --accent-200:#cfdfc2;
  --accent-300:#afc69e;
  --accent-400:#90ae7b;
  --accent-500:#729659;
  --accent-600:#60804b;
  --accent-700:#4f6a3d;
  --accent-800:#3e5430;
  --accent-900:#2f4024;
  --accent-950:#1a2414;

  --secondary-50:#fafaf7;
  --secondary-100:#f2f1ea;
  --secondary-200:#e4e3d5;
  --secondary-300:#cecdb9;
  --secondary-400:#b7b69d;
  --secondary-500:#a09f82;
  --secondary-600:#89886a;
  --secondary-700:#727155;
  --secondary-800:#5c5b41;
  --secondary-900:#464531;
  --secondary-950:#24241a;

  --foreground-50:#fafafa;
  --foreground-100:#f2f2f2;
  --foreground-200:#e5e5e5;
  --foreground-300:#d0d0d0;
  --foreground-400:#b8b8b8;
  --foreground-500:#9e9e9e;
  --foreground-600:#8a8a8a;
  --foreground-700:#787878;
  --foreground-800:#696969;
  --foreground-900:#5e5e5e;
  --foreground-950:#2e2e2e;

  --font-heading:'Playfair Display',serif;
  --font-signature:'Cormorant Garamond',serif;
  --font-body:'Pretendard','Noto Sans KR',sans-serif;
  --font-label:'Pretendard','Noto Sans KR',sans-serif;
}

/* Reset */
html { overflow-y: scroll; scroll-behavior: smooth; }
body { margin: 0; padding: 0; font-size: 16px; font-family: var(--font-body); background: var(--background-50); color: var(--foreground-950); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,figcaption,blockquote,dl,dd { margin: 0; padding: 0; }
ul,ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input,textarea,select { font-family: inherit; }
*,*::before,*::after { box-sizing: border-box; }

/* No-js fallback */
.no-js [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important; }

/* Utility classes */
.cl-container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 32px; }
.cl-section-title { font-size: 2.5rem; font-weight: 700; color: var(--foreground-950); line-height: 1.3; font-family: var(--font-body); }
.cl-section-subtitle { font-size: 1rem; color: var(--foreground-600); line-height: 1.6; margin-top: 16px; }
.cl-btn-primary { display: inline-block; padding: 14px 36px; background: var(--primary-500); color: #ffffff; border-radius: 50px; font-weight: 600; font-size: 1rem; text-decoration: none; transition: all 0.3s ease; white-space: nowrap; }
.cl-btn-primary:hover { background: var(--primary-600); }
.cl-btn-outline { display: inline-block; padding: 14px 36px; background: transparent; color: var(--primary-500); border: 1px solid var(--primary-500); border-radius: 50px; font-weight: 600; font-size: 1rem; text-decoration: none; transition: all 0.3s ease; white-space: nowrap; }
.cl-btn-outline:hover { background: var(--primary-500); color: #ffffff; }
.cl-label-badge { display: inline-block; padding: 6px 18px; background: var(--primary-100); color: var(--primary-700); border-radius: 30px; font-size: 0.875rem; font-weight: 600; }

/* ========================================
   NAVBAR
   ======================================== */
.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: all 0.5s ease; background: transparent; }
.navbar.scrolled { background: rgba(252,252,252,0.95); backdrop-filter: blur(12px); box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }
.navbar-inner { display: flex; align-items: center; justify-content: space-between; height: 80px; padding: 0 24px; }
.navbar-logo { display: flex; align-items: center; flex-shrink: 0; }
.navbar-logo-img { height: 48px; width: auto; object-fit: contain; transition: all 0.5s ease; }
.navbar-desktop { display: none; }
.nav-desktop-item { position: relative; display: inline-block; }
.nav-desktop-link { display: inline-block; font-size: 0.875rem; font-weight: 500; transition: color 0.3s ease; padding: 24px 0; color: rgba(255,255,255,0.9); }
.navbar.scrolled .nav-desktop-link { color: var(--foreground-700); }
.nav-desktop-link:hover { color: var(--primary-500); }
.nav-desktop-dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: 8px; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; }
.nav-desktop-item:hover .nav-desktop-dropdown { opacity: 1; visibility: visible; }
.nav-desktop-dropdown-inner { background: #ffffff; border-radius: 12px; border: 1px solid var(--background-200); box-shadow: 0 10px 40px rgba(0,0,0,0.1); padding: 12px; min-width: 180px; }
.nav-desktop-dropdown-inner ul { display: flex; flex-direction: column; gap: 4px; }
.nav-desktop-dropdown-inner a { display: block; padding: 10px 16px; font-size: 0.875rem; color: var(--foreground-700); border-radius: 8px; transition: background 0.2s ease, color 0.2s ease; white-space: nowrap; }
.nav-desktop-dropdown-inner a:hover { background: var(--primary-100); color: var(--primary-600); }
.navbar-hamburger { display: flex; align-items: center; padding: 8px 12px; border-radius: 6px; transition: background 0.3s ease; flex-shrink: 0; }
.navbar-hamburger:hover { background: rgba(255,255,255,0.1); }
.hamburger-icon-wrap { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.hamburger-icon { font-size: 24px; transition: color 0.3s ease; color: #ffffff; }
.navbar.scrolled .hamburger-icon { color: var(--foreground-950); }

#site-header .m_tel{width:23px;position:absolute;right:80px;top:25px;filter:invert(1);}
#site-header.scrolled .m_tel{top:25px;filter:invert(0);}

.place_badge{background: var(--primary-500);color:#fff;font-size:15px;display:inline-block;padding:6px 12px;border-radius:20px; position:absolute;right:90px;top:22px;text-align:center;}
@media (max-width: 1440px) {
.place_badge{right:auto;top:auto;position:relative;font-size:13px;}
}
@media (max-width: 1060px) {
.place_badge{right:50px;margin-left:auto;}
}
@media screen and (max-width:768px){
#site-header .m_tel{width:23px;right:70px;top:25px;}
#site-header.scrolled .m_tel{width:23px;right:60px;top:25px;}
}
@media screen and (max-width:480px){
#site-header .m_tel{top:17px;}
#site-header.scrolled .m_tel{top:17px;}
.place_badge{font-size:12px;}
}


/* ========================================
   MEGA MENU
   ======================================== */
.mega-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); display: flex; align-items: flex-start; justify-content: center; padding: 80px 16px 32px; overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
.mega-overlay.open { opacity: 1; visibility: visible; }
.mega-panel { background: #ffffff; border-radius: 24px; box-shadow: 0 25px 80px rgba(0,0,0,0.25); width: 100%; max-width: 1024px; padding: 40px; overflow: hidden; }
.mega-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
.mega-panel-logo-img { height: 40px; width: auto; object-fit: contain; }
.mega-close-btn { display: flex; align-items: center; padding: 8px 12px; border-radius: 50px; transition: background 0.3s ease; }
.mega-close-btn:hover { background: var(--background-100); }
.mega-close-icon-wrap { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.mega-close-icon-wrap i { font-size: 24px; color: var(--foreground-950); }
.mega-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 40px; }
.mega-category-label { display: inline-block; font-size: 1.125rem; font-weight: 600; color: var(--foreground-950); margin-bottom: 12px; transition: color 0.2s ease; }
.mega-category-label:hover { color: var(--primary-500); }
.mega-subs { display: flex; flex-direction: column; gap: 8px; }
.mega-subs a { display: block; font-size: 0.875rem; color: var(--foreground-500); padding: 4px 0; transition: color 0.2s ease; }
.mega-subs a:hover { color: var(--primary-500); }

/* ========================================
   HERO
   ======================================== */
.hero { position: relative; width: 100%; height: 100dvh; min-height: 600px; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; }
.hero-bg-img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.15); }
.hero-bg-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0.4), rgba(0,0,0,0.65)); }
.hero-content { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; text-align: center; padding: 0 8px; padding-bottom: 192px; }

/* Mobile layout */
.hero-layout-mobile { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.hero-layout-mobile .hero-left { font-family: var(--font-heading); font-size: 3rem; color: #ffffff; font-weight: 400; letter-spacing: 0.05em; line-height: 1.2; text-align: center; }
.hero-layout-mobile .hero-line { width: 64px; height: 1px; background: rgba(255,255,255,0.6); }
.hero-layout-mobile .hero-right-kr { font-family: var(--font-body); font-size: 1.5rem; font-weight: 600; color: #ffffff; line-height: 1.5; }
.hero-layout-mobile .hero-right-sub { font-family: var(--font-body); font-size: 1.25rem; font-weight: 500; color: #ffffff; line-height: 1.5; margin-top: 6px; }

/* Desktop layout */
.hero-layout { display: none; }
.hero-desktop-group { display: flex; align-items: flex-end; gap: 12px; }
.hero-left { font-family: var(--font-heading); font-size: 2.5rem; color: #ffffff; font-weight: 400; letter-spacing: 0.05em; line-height: 1.35; text-align: center; transition: opacity 1s ease, transform 1s ease; }
.hero-line { width: 64px; height: 1px; background: rgba(255,255,255,0.8); margin-bottom: 12px; transition: opacity 1s ease, width 1s ease, height 1s ease; }
.hero-right { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; transition: opacity 1s ease, transform 1s ease; }
.hero-right-kr { font-family: var(--font-body); font-size: 1.25rem; font-weight: 600; color: #ffffff; line-height: 1.5; }
.hero-right-sub { font-family: var(--font-body); font-size: 1.125rem; font-weight: 500; color: #ffffff; line-height: 1.5; }

/* Responsive */
@media (min-width: 768px) {
  .hero-layout-mobile { display: none; }
  .hero-layout { display: flex; flex-direction: row; align-items: flex-end; justify-content: center; }
  .hero-left { font-size: 4.5rem; text-align: left; }
  .hero-line { width: 112px; height: 1px; }
  .hero-right { align-items: flex-start; text-align: left; padding-bottom: 8px; margin-left: 24px; }
  .hero-right-kr { font-size: 1.75rem; }
  .hero-right-sub { font-size: 1.5rem; }
  .hero-content { padding-bottom: 176px; }
}

@media (min-width: 1024px) {
  .hero-desktop-group { gap: 16px; }
  .hero-left { font-size: 6rem; }
  .hero-line { width: 256px; margin-bottom: 16px; }
  .hero-right { padding-bottom: 12px; margin-left: 40px; }
  .hero-right-kr { font-size: 2.125rem; }
  .hero-right-sub { font-size: 1.75rem; }
}

#hero-scroll { transition: opacity 0.7s ease; }
.hero-scroll { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 10; }
.hero-scroll-mouse { width: 24px; height: 40px; border: 2px solid rgba(255,255,255,0.3); border-radius: 50px; display: flex; justify-content: center; padding-top: 8px; }
.hero-scroll-dot { width: 4px; height: 8px; background: rgba(255,255,255,0.5); border-radius: 50px; animation: bounce 2s infinite; }

/* ========================================
   MARQUEE
   ======================================== */
.marquee-section { padding: 56px 0; background: var(--background-50); overflow: hidden; }
.marquee-track { display: flex; width: max-content; animation: marquee-scroll 80s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }
.marquee-text { font-family: var(--font-heading); font-size: 3rem; color: var(--primary-500); opacity: 0.3; white-space: nowrap; padding: 0 24px; user-select: none; }

/* ========================================
   QUICK MENU
   ======================================== */
.quick-menu { position: fixed; bottom: 24px; right: 24px; z-index: 50; display: flex; flex-direction: column; align-items: center; gap: 12px; max-height:120px;}
.quick-menu.open{max-height:600px;}
.quick-items { display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity,max-height 0.7s ease, transform 0.5s ease; max-height:0px;}
.quick-items.open { opacity: 1; transform: translateY(0); pointer-events: auto; max-height:600px;}
.quick-item { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 50px; background: var(--primary-500); color: #ffffff; font-size: 0.875rem; font-weight: 500; transition: background 0.2s ease; white-space: nowrap; min-width: 130px; justify-content: center; text-decoration: none; opacity: 0; }
.quick-item:hover { background: var(--primary-600); }
.quick-item-icon { width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; }
.quick-item-icon i { font-size: 16px; }
.quick-item-blog-img { /*width: 12px; height: 12px;*/ object-fit: contain; filter: brightness(0) invert(1); }
.quick-toggle { width: 56px; height: 56px; border-radius: 50%; background: var(--primary-500); color: #ffffff; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease; border: none; cursor: pointer; margin-right:-60px;}
.quick-toggle:hover { background: var(--primary-600); }
.quick-toggle-dots { display: flex; align-items: center; gap: 4px; }
.quick-dot { width: 6px; height: 6px; border-radius: 50%; background: #ffffff; }
.quick-dot:nth-child(1) { animation: dot-float-1 1.2s ease-in-out infinite; }
.quick-dot:nth-child(2) { animation: dot-float-2 1.2s ease-in-out infinite 0.15s; }
.quick-dot:nth-child(3) { animation: dot-float-3 1.2s ease-in-out infinite 0.3s; }
.quick-toggle-close { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.quick-toggle-close i { font-size: 24px; }
.quick-scroll-top { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--background-300); background: #ffffff; color: var(--foreground-500); display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; cursor: pointer; margin-right:-60px;}
.quick-scroll-top:hover { background: var(--background-100); color: var(--primary-500); }
@media (max-width: 767px) {
  .quick-menu { right: 8px; }
  .quick-item{padding:3px 3px;font-size:0;min-width:auto;gap:0;width:36px;height:36px;}
  .quick-item.pc{display:none;}
  .quick-toggle{margin-right:0px;width:40px;height:40px;}
  .quick-scroll-top{margin-right:0px;}
  .quick-item-icon{width:17px;height:17px;}
  .quick-item-icon.big{width:30px;height:auto;}
  .quick-item-icon i{font-size:21px;}
  .quick-item-blog-img{}
}

/* ========================================
   ANIMATIONS
   ======================================== */
@keyframes marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes bar-grow { 0% { width: 0; } 100% { width: 100%; } }
@keyframes char-pop { 0% { opacity: 0; transform: translateY(20px) scale(0.9); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes fade-in-up { 0% { opacity: 0; transform: translateY(50px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes fade-in-up-small { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes line-reveal { 0% { opacity: 0; transform: translateY(30px); clip-path: inset(100% 0 0 0); } 100% { opacity: 1; transform: translateY(0); clip-path: inset(0 0 0 0); } }
@keyframes living-image { 0% { transform: scale(1) translate(0, 0); } 50% { transform: scale(1.05) translate(-1%, -0.5%); } 100% { transform: scale(1) translate(0, 0); } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes dot-float-1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes dot-float-2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes dot-float-3 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes quick-expand { 0% { opacity: 0; transform: translateY(20px) scale(0.9); } 100% { opacity: 1; transform: translateY(0) scale(1); } }

.cl-animate-fade-in-up { opacity: 0; }
.cl-animate-fade-in-up.is-visible { animation: fade-in-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.cl-animate-fade-in-up-small { opacity: 0; }
.cl-animate-fade-in-up-small.is-visible { animation: fade-in-up-small 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.cl-animate-line { opacity: 0; }
.cl-animate-line.is-visible { animation: line-reveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.cl-char-reveal { display: inline-block; opacity: 0; animation: char-pop 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.cl-bar-grow { width: 0; animation: bar-grow 1s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.cl-delay-100 { animation-delay: 0.1s !important; }
.cl-delay-200 { animation-delay: 0.2s !important; }
.cl-delay-300 { animation-delay: 0.3s !important; }
.cl-delay-400 { animation-delay: 0.4s !important; }
.cl-delay-500 { animation-delay: 0.5s !important; }
.cl-delay-600 { animation-delay: 0.6s !important; }
.cl-delay-700 { animation-delay: 0.7s !important; }
.cl-delay-800 { animation-delay: 0.8s !important; }

/* Scroll reveal */
[data-reveal] { opacity: 0; transform: translateY(48px); transition: opacity 0.7s ease, transform 0.7s ease; }
[data-reveal].revealed { opacity: 1; transform: translateY(0); }
[data-reveal="line"] { opacity: 0; transform: translateY(30px); clip-path: inset(100% 0 0 0); transition: none; }
[data-reveal="line"].revealed { animation: line-reveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--background-100); }
::-webkit-scrollbar-thumb { background: var(--primary-300); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary-400); }

/* ========================================
   RESPONSIVE
   ======================================== */
@media (min-width: 768px) {
  .navbar-inner { padding: 0 48px; }
  .hero-text-group { gap: 40px; padding-top: 96px; }
  .hero-kr-big { font-size: 3.75rem; }
  .hero-kr-small { font-size: 2.25rem; }
  .hero-eng-divider { gap: 32px; }
  .hero-eng-divider-text { font-size: 1.25rem; }
  .marquee-section { padding: 80px 0; }
  .marquee-text { font-size: 4.5rem; }
  .mega-overlay { padding: 96px 16px 32px; }
  .mega-panel { padding: 56px; }
  .mega-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .navbar-desktop { display: flex; align-items: center; gap: 48px; }
  .hero-kr-big { font-size: 4.5rem; }
  .hero-kr-small { font-size: 3rem; }
  .hero-eng-divider-text { font-size: 1.5rem; }
  .marquee-text { font-size: 6rem; }
  .mega-grid { grid-template-columns: repeat(4, 1fr); }
}