:root { --white:#FDFCFA; --black:#1A1815; --transition-theme:0.8s cubic-bezier(0.23,1,0.32,1); }

[data-theme="intro"] {
  --bg-primary:#F2F4F7; --bg-secondary:#FDFCFA; --bg-accent:#E2E8F0;
  --text-primary:#1E293B; --text-secondary:#475569;
  --accent:#24519b; --accent-light:#3b6bbd; --accent-pale:#d4e1f5;
  --border:#CBD5E1; --border-light:#E2E8F0; --highlight:#24519b;
  --nav-bg:rgba(242,244,247,0.92); --card-bg:#FDFCFA; --footer-bg:#162b4d;
}
[data-theme="hotel"] {
  --bg-primary:#F5F0EA; --bg-secondary:#FDFBF8; --bg-accent:#EDE5D8;
  --text-primary:#2E2A25; --text-secondary:#6B5E52;
  --accent:#B8956A; --accent-light:#D4B78E; --accent-pale:#E8D5B8;
  --border:#D4C4A8; --border-light:#E8DCC8; --highlight:#8B7355;
  --nav-bg:rgba(245,240,234,0.94); --card-bg:#FDFBF8; --footer-bg:#1E1A16;
}
[data-theme="stay"] {
  --bg-primary:#F2F4F7; --bg-secondary:#F8FAFC; --bg-accent:#E2E8F0;
  --text-primary:#1E293B; --text-secondary:#475569;
  --accent:#24519b; --accent-light:#3b6bbd; --accent-pale:#d4e1f5;
  --border:#CBD5E1; --border-light:#E2E8F0; --highlight:#24519b;
  --nav-bg:rgba(242,244,247,0.94); --card-bg:#F8FAFC; --footer-bg:#162b4d;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Karla','Noto Serif KR',serif;background:var(--bg-primary);color:var(--text-primary);overflow-x:hidden;-webkit-font-smoothing:antialiased;transition:background var(--transition-theme),color var(--transition-theme); word-break: keep-all; overflow-wrap: break-word;}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
img{display:block;width:100%;height:100%;object-fit:cover}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:1100;padding:28px 48px;display:flex;justify-content:space-between;align-items:center;transition:all .6s cubic-bezier(.23,1,.32,1)}
.nav.scrolled{background:var(--nav-bg);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);padding:16px 48px;box-shadow:0 1px 0 rgba(0,0,0,.04)}
.nav-logo-wrap{display:flex;align-items:center;gap:12px;text-decoration:none}
.nav-logo-img{height:32px;width:auto;object-fit:contain}
.nav-logo{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:400;letter-spacing:.35em;color:var(--text-primary);transition:color .4s}
/* For dark/intro hero themes where text should be white initially */
[data-theme="intro"] .nav:not(.scrolled) .nav-logo, 
[data-theme="intro"] .nav:not(.scrolled) .nav-logo-theme,
[data-theme="intro"] .nav:not(.scrolled) .nav-links a,
[data-theme="intro"] .nav:not(.scrolled) .nav-reserve {
  color: #fff;
}
[data-theme="intro"] .nav:not(.scrolled) .nav-theme-pill {
  background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.7);
}

.nav-logo-theme{font-family:'Noto Serif KR',serif;font-size:.7rem;font-weight:300;letter-spacing:.1em;color:var(--text-primary);opacity:0.8;margin-left:4px;transition:color .4s}

.nav-actions { display: flex; align-items: center; gap: 24px; }

.nav-links{display:flex;gap:32px;list-style:none;align-items:center}
.nav-links a{font-family:'Noto Serif KR',serif;font-size:.78rem;font-weight:300;color:var(--text-secondary);text-decoration:none;letter-spacing:.06em;transition:all .3s;position:relative}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;background:currentColor;transition:width .4s cubic-bezier(.23,1,.32,1)}
.nav-links a:hover::after{width:100%}
.nav-reserve{font-family:'Karla',sans-serif;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;padding:10px 24px;border:1px solid var(--accent);color:var(--accent);text-decoration:none;transition:all .4s}
.nav-reserve:hover{background:var(--text-primary);color:var(--bg-primary);border-color:var(--text-primary)}
.nav-theme-pill{font-family:'Karla',sans-serif;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;padding:5px 14px;border-radius:20px;background:var(--accent-pale);color:var(--text-primary);cursor:pointer;transition:all .4s;border:none}
.nav-theme-pill:hover{background:var(--accent-light)}
.nav-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer}
.nav-toggle span{width:22px;height:1.5px;background:var(--text-primary);transition:.3s}

/* REVEAL */
.reveal{opacity:0;transform:translateY(36px);transition:all .9s cubic-bezier(.23,1,.32,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-d1{transition-delay:.12s}.reveal-d2{transition-delay:.24s}.reveal-d3{transition-delay:.36s}

/* FOOTER */
.footer{background:var(--footer-bg);color:rgba(247,244,239,.6);padding:72px 48px 40px;transition:background var(--transition-theme)}
.footer-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px}
.f-logo{font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:400;letter-spacing:.3em;color:rgba(247,244,239,.85);text-decoration:none;display:inline-block;margin-bottom:16px}
.footer-tagline{font-family:'Noto Serif KR',serif;font-size:.8rem;font-weight:200;line-height:1.8;color:rgba(247,244,239,.35)}
.footer-col-title{font-family:'Karla',sans-serif;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin-bottom:20px}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-links a{font-family:'Noto Serif KR',serif;font-size:.8rem;font-weight:200;color:rgba(247,244,239,.45);text-decoration:none;transition:color .3s}
.footer-links a:hover{color:rgba(247,244,239,.85)}
.footer-bottom{max-width:1100px;margin:48px auto 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;align-items:center}
.footer-copy{font-family:'Karla',sans-serif;font-size:.65rem;letter-spacing:.1em;color:rgba(247,244,239,.25)}
.footer-sns{display:flex;gap:18px}
.footer-sns a{font-family:'Karla',sans-serif;font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(247,244,239,.25);text-decoration:none;transition:color .3s}
.footer-sns a:hover{color:var(--accent-light)}

/* TOAST */
.theme-toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%) translateY(80px);z-index:9999;padding:14px 32px;background:var(--text-primary);color:var(--bg-primary);font-family:'Noto Serif KR',serif;font-size:.82rem;font-weight:300;letter-spacing:.08em;box-shadow:0 8px 32px rgba(0,0,0,.15);opacity:0;transition:all .5s cubic-bezier(.23,1,.32,1);pointer-events:none}
.theme-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(max-width:1024px){
  .footer-inner{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .nav{padding:18px 20px}.nav.scrolled{padding:12px 20px}.nav-toggle{display:flex}
  
  .nav-links{
    display: flex;
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    height: 100vh;
    background: var(--bg-secondary);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;
    transition: right 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: -10px 0 30px rgba(0,0,0,0.05);
    z-index: 1001;
  }
  
  .nav-links.show {
    right: 0;
  }

  .nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.3);
    backdrop-filter: blur(4px);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s;
  }

  .nav-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  .nav-links a {
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--text-primary) !important;
    letter-spacing: 0.1em;
  }

  .nav-links li {
    width: 100%;
    text-align: center;
  }

  .nav-links .nav-reserve {
    border: none;
    padding: 0;
    font-size: 1.25rem;
    color: var(--accent) !important;
  }

  .nav-theme-pill {
    font-size: 0.75rem;
    padding: 10px 24px;
  }

  .nav-toggle {
    z-index: 1002;
    margin-left: 12px;
  }

  .nav-theme-pill.theme-switcher {
    padding: 6px 12px;
    font-size: 0.55rem;
  }

  .nav-toggle.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-toggle.active span:nth-child(2) { opacity: 0; }
  .nav-toggle.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .footer-inner{grid-template-columns:1fr;gap:32px}.footer-bottom{flex-direction:column;gap:12px;text-align:center}
}

@media(max-width:380px){
  .nav{padding:14px 16px}
  .nav-logo-wrap{gap:6px}
  .nav-logo-img{height:24px}
  .nav-logo{font-size:1.1rem; letter-spacing: 0.15em;}
  .nav-logo-theme{font-size:0.55rem; margin-left:2px}
  .nav-actions{gap:8px}
  .nav-theme-pill.theme-switcher{padding:5px 8px; font-size:0.48rem; letter-spacing:0.05em}
  .nav-toggle{margin-left:8px}
  
  .footer-inner{gap:24px; padding: 0 8px;}
}