/* ========================================
   BRAND SITE - Main Stylesheet
   Mobile First Design
   Color Palette: Fresh Green & Natural
======================================== */

/* ---- CSS Variables ---- */
:root {
  --color-black: #1b2e1c;
  --color-dark: #1e3320;
  --color-dark2: #243d26;
  --color-dark3: #2e4d30;
  --color-green: #43a047;
  --color-green-light: #81c784;
  --color-green-bright: #66bb6a;
  --color-green-dark: #2e7d32;
  --color-green-fresh: #4caf50;
  --color-lime: #8bc34a;
  --color-lime-light: #aed581;
  --color-mint: #26a69a;
  --color-accent: #f9a825;
  --color-white: #ffffff;
  --color-off-white: #f1f8e9;
  --color-gray: #6a8c6c;
  --color-gray-light: #b2d8b4;
  --color-gray-dark: #3a5a3c;
  --color-bg: #f1f8e9;
  --color-bg2: #e8f5e9;
  --color-bg3: #ffffff;
  --color-bg-dark: #1e3320;
  --color-text: #1b2e1c;
  --color-text-sub: #4a6741;

  --font-kr: 'Noto Serif KR', 'Noto Sans KR', serif;
  --font-en: 'Nunito', 'Poppins', sans-serif;
  --font-body: 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;

  --max-width: 1200px;
  --header-height: 64px;
  --transition: all 0.3s ease;
  --shadow-green: 0 4px 24px rgba(67, 160, 71, 0.18);
  --shadow-card: 0 2px 16px rgba(30, 60, 30, 0.10);
  --border-green: 1px solid rgba(67, 160, 71, 0.25);
  --radius: 14px;
  --radius-sm: 8px;
  --radius-pill: 50px;
}

/* ---- Reset & Base ---- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}

ul, ol { list-style: none; }

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

/* ---- Typography ---- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-kr);
  line-height: 1.3;
  color: var(--color-black);
}

.text-green  { color: var(--color-green); }
.text-center { text-align: center; }
.text-small  { font-size: 0.85rem; }

/* ---- Layout Utilities ---- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

.section { padding: 64px 0; }

.section-title {
  font-size: clamp(1.4rem, 5vw, 2.2rem);
  font-family: var(--font-kr);
  color: var(--color-green-dark);
  text-align: center;
  margin-bottom: 8px;
  letter-spacing: 0.03em;
}

.section-subtitle {
  font-size: clamp(0.82rem, 3vw, 0.98rem);
  color: var(--color-gray);
  text-align: center;
  margin-bottom: 40px;
  letter-spacing: 0.06em;
}

.section-divider {
  width: 60px;
  height: 3px;
  background: linear-gradient(to right, transparent, var(--color-green), var(--color-lime), transparent);
  margin: 14px auto 40px;
  border-radius: 2px;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  font-size: 0.93rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  border-radius: var(--radius-pill);
  transition: var(--transition);
  cursor: pointer;
}

.btn-green {
  background: linear-gradient(135deg, var(--color-green-dark), var(--color-green-fresh), var(--color-lime));
  color: var(--color-white);
  box-shadow: var(--shadow-green);
}

.btn-green:hover {
  background: linear-gradient(135deg, var(--color-green-fresh), var(--color-lime), var(--color-green-fresh));
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(67,160,71,0.35);
}

/* 레거시 호환 (btn-gold → btn-green) */
.btn-gold {
  background: linear-gradient(135deg, var(--color-green-dark), var(--color-green-fresh), var(--color-lime));
  color: var(--color-white);
  box-shadow: var(--shadow-green);
  border-radius: var(--radius-pill);
}

.btn-gold:hover {
  background: linear-gradient(135deg, var(--color-green-fresh), var(--color-lime));
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(67,160,71,0.35);
}

.btn-outline {
  background: transparent;
  color: var(--color-green-dark);
  border: 2px solid var(--color-green);
  border-radius: var(--radius-pill);
}

.btn-outline:hover {
  background: var(--color-green);
  color: var(--color-white);
}

/* ============================================================
   HEADER — 고정 + 스크롤 효과
============================================================ */
#site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--header-height);
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(67,160,71,0.15);
  transition: var(--transition);
}

#site-header.scrolled {
  background: rgba(255,255,255,0.98);
  box-shadow: 0 2px 20px rgba(67,160,71,0.12);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

/* Logo */
.site-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.logo-text {
  font-family: var(--font-kr);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-green-dark);
  letter-spacing: 0.03em;
  line-height: 1.1;
}

.logo-sub {
  font-size: 0.58rem;
  color: var(--color-gray);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* ---- Desktop Nav ---- */
.desktop-nav { display: none; }

.desktop-nav ul {
  display: flex;
  gap: 28px;
  align-items: center;
}

.desktop-nav a {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text-sub);
  letter-spacing: 0.03em;
  position: relative;
  padding-bottom: 4px;
}

.desktop-nav a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 2px;
  background: var(--color-green);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.desktop-nav a:hover,
.desktop-nav a.active { color: var(--color-green-dark); }

.desktop-nav a:hover::after,
.desktop-nav a.active::after { width: 100%; }

/* Header Right */
.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Language Switcher */
.lang-switcher { position: relative; }

.lang-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  font-size: 0.78rem;
  color: var(--color-text-sub);
  border: var(--border-green);
  border-radius: var(--radius-pill);
  background: transparent;
  transition: var(--transition);
}

.lang-btn:hover {
  color: var(--color-green-dark);
  border-color: var(--color-green);
  background: var(--color-bg2);
}

.lang-dropdown {
  position: absolute;
  top: calc(100% + 8px); right: 0;
  background: var(--color-white);
  border: var(--border-green);
  border-radius: var(--radius-sm);
  min-width: 130px;
  box-shadow: var(--shadow-card);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: var(--transition);
  z-index: 100;
}

.lang-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-dropdown button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  font-size: 0.85rem;
  color: var(--color-text-sub);
  transition: var(--transition);
}

.lang-dropdown button:hover,
.lang-dropdown button.active {
  color: var(--color-green-dark);
  background: var(--color-bg2);
}

/* Mobile Menu Button */
.mobile-menu-btn {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}

.mobile-menu-btn span {
  display: block;
  width: 24px; height: 2px;
  background: var(--color-green-dark);
  transition: var(--transition);
  border-radius: 2px;
}

.mobile-menu-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-btn.open span:nth-child(2) { opacity: 0; }
.mobile-menu-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile Nav Drawer */
.mobile-nav {
  position: fixed;
  top: var(--header-height);
  left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.98);
  z-index: 999;
  padding: 32px 24px;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  overflow-y: auto;
}

.mobile-nav.open { transform: translateX(0); }

.mobile-nav ul { display: flex; flex-direction: column; gap: 0; }

.mobile-nav ul li { border-bottom: 1px solid rgba(67,160,71,0.12); }

.mobile-nav ul a {
  display: block;
  padding: 18px 0;
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font-kr);
  color: var(--color-text-sub);
  letter-spacing: 0.03em;
}

.mobile-nav ul a:hover,
.mobile-nav ul a.active {
  color: var(--color-green-dark);
  padding-left: 8px;
}

.mobile-lang {
  display: flex;
  gap: 10px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: var(--border-green);
}

.mobile-lang button {
  padding: 7px 14px;
  font-size: 0.82rem;
  color: var(--color-gray);
  border: var(--border-green);
  border-radius: var(--radius-pill);
}

.mobile-lang button.active {
  color: var(--color-green-dark);
  border-color: var(--color-green);
  background: var(--color-bg2);
  font-weight: 700;
}

/* ============================================================
   SINGLE-PAGE NAV LAYOUT
   데스크탑: 왼쪽 고정 사이드바 + 오른쪽 스크롤 콘텐츠
   모바일: 상단 헤더 + 전체 스크롤
============================================================ */
@media (min-width: 1024px) {
  :root { --header-height: 0px; }

  #site-header { display: none; }

  .page-layout {
    display: flex;
    min-height: 100vh;
  }

  /* 사이드바 */
  .sidebar {
    position: fixed;
    top: 0; left: 0;
    width: 240px;
    height: 100vh;
    background: var(--color-white);
    border-right: var(--border-green);
    display: flex;
    flex-direction: column;
    padding: 36px 24px 28px;
    z-index: 200;
    overflow-y: auto;
    box-shadow: 2px 0 16px rgba(67,160,71,0.07);
  }

  .sidebar-logo {
    margin-bottom: 40px;
    padding-bottom: 24px;
    border-bottom: var(--border-green);
  }

  .sidebar-logo .logo-text {
    font-size: 1.15rem;
    color: var(--color-green-dark);
  }

  .sidebar-logo .logo-sub {
    margin-top: 3px;
    color: var(--color-gray);
  }

  .sidebar-nav ul {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
  }

  .sidebar-nav ul a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text-sub);
    border-radius: var(--radius-sm);
    transition: var(--transition);
    letter-spacing: 0.02em;
  }

  .sidebar-nav ul a .nav-icon {
    font-size: 1rem;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
  }

  .sidebar-nav ul a:hover,
  .sidebar-nav ul a.active {
    background: var(--color-bg2);
    color: var(--color-green-dark);
  }

  .sidebar-nav ul a.active {
    background: linear-gradient(90deg, rgba(67,160,71,0.15), rgba(139,195,74,0.1));
    color: var(--color-green-dark);
    font-weight: 700;
    border-left: 3px solid var(--color-green);
    padding-left: 11px;
  }

  .sidebar-bottom {
    margin-top: auto;
    padding-top: 20px;
    border-top: var(--border-green);
  }

  .sidebar-lang {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
  }

  .sidebar-lang button {
    padding: 4px 10px;
    font-size: 0.75rem;
    color: var(--color-gray);
    border: var(--border-green);
    border-radius: var(--radius-pill);
    background: transparent;
    transition: var(--transition);
  }

  .sidebar-lang button.active {
    background: var(--color-green);
    color: var(--color-white);
    border-color: var(--color-green);
    font-weight: 700;
  }

  .sidebar-reserve {
    width: 100%;
    padding: 11px 16px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-white);
    background: linear-gradient(135deg, #7a5a24, #b7893f);
    border-radius: var(--radius-pill);
    text-align: center;
    display: block;
    transition: var(--transition);
  }

  .sidebar-reserve:hover {
    background: linear-gradient(135deg, #8f6a2e, #d2a95b);
    transform: translateY(-1px);
    box-shadow: var(--shadow-green);
  }

  /* 메인 콘텐츠 영역 */
  .main-content {
    margin-left: 240px;
    flex: 1;
    width: calc(100% - 240px);
  }
}

/* 모바일: 레이아웃 단순화 */
@media (max-width: 1023px) {
  .sidebar { display: none; }
  .main-content { width: 100%; padding-top: var(--header-height); }
  .page-layout { display: block; }
}

/* ============================================================
   HERO SECTION
============================================================ */
#hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

@media (min-width: 1024px) {
  #hero { min-height: 100vh; }
}

.hero-bg {
  position: absolute; inset: 0;
  background: linear-gradient(
    160deg,
    #e8f5e9 0%,
    #c8e6c9 35%,
    #a5d6a7 65%,
    #81c784 100%
  );
  z-index: 0;
}

.hero-bg-image {
  position: absolute; inset: 0;
  background-image: url('https://images.unsplash.com/photo-1540420773420-3366772f4999?w=1400&q=80');
  background-size: cover;
  background-position: center;
  opacity: 0.22;
  z-index: 1;
}

.hero-overlay {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 60% 50%, transparent 30%, rgba(232,245,233,0.6) 100%);
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 40px 20px;
  max-width: 820px;
}

.hero-badge {
  display: inline-block;
  padding: 6px 20px;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-green-dark);
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(67,160,71,0.4);
  border-radius: var(--radius-pill);
  margin-bottom: 26px;
  backdrop-filter: blur(4px);
}

.hero-title {
  font-size: clamp(2rem, 8vw, 4rem);
  font-family: var(--font-kr);
  font-weight: 700;
  color: var(--color-black);
  line-height: 1.2;
  margin-bottom: 14px;
}

.hero-title span {
  color: var(--color-green-dark);
  display: block;
}

.hero-title .hero-title-accent {
  background: linear-gradient(135deg, var(--color-green-dark), var(--color-green), var(--color-lime));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: clamp(0.95rem, 3vw, 1.15rem);
  color: var(--color-text-sub);
  margin-bottom: 12px;
  font-weight: 500;
}

.hero-desc {
  font-size: clamp(0.82rem, 2.5vw, 0.97rem);
  color: var(--color-gray);
  margin-bottom: 36px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.85;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* 채소 아이콘 데코 */
.hero-deco {
  position: absolute;
  z-index: 2;
  font-size: 2.5rem;
  opacity: 0.18;
  pointer-events: none;
}
.hero-deco-1 { top: 12%; left: 6%; transform: rotate(-20deg); }
.hero-deco-2 { top: 20%; right: 8%; transform: rotate(15deg); }
.hero-deco-3 { bottom: 18%; left: 10%; transform: rotate(10deg); }
.hero-deco-4 { bottom: 14%; right: 6%; transform: rotate(-12deg); }

.hero-scroll-indicator {
  position: absolute;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  animation: bounce 2s infinite;
}

.hero-scroll-indicator span {
  width: 1px; height: 36px;
  background: linear-gradient(to bottom, var(--color-green), transparent);
  display: block;
}

@keyframes bounce {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(8px); }
}

/* ============================================================
   NOTICE MARQUEE BAR
============================================================ */
.notice-bar {
  background: linear-gradient(90deg, var(--color-green-dark), var(--color-green-fresh), var(--color-lime), var(--color-green-fresh), var(--color-green-dark));
  background-size: 200% 100%;
  padding: 9px 0;
  overflow: hidden;
}

.notice-bar-inner {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: marquee 28s linear infinite;
}

.notice-bar-inner:hover { animation-play-state: paused; }

.notice-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--color-white);
  font-weight: 600;
  padding: 0 36px;
  letter-spacing: 0.04em;
}

.notice-item .dot {
  width: 4px; height: 4px;
  background: rgba(255,255,255,0.7);
  border-radius: 50%;
}

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============================================================
   BRAND STORY (브랜드 소개)
============================================================ */
#brand-story {
  background: var(--color-white);
}

.brand-story-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}

.brand-story-image {
  position: relative;
}

.brand-story-image img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: var(--radius);
}

.brand-story-image::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 60%, rgba(30,51,32,0.08) 100%);
  border-radius: var(--radius);
  z-index: 1;
  pointer-events: none;
}

.brand-story-text .section-title { text-align: left; }
.brand-story-text .section-divider { margin-left: 0; }

.brand-tagline {
  font-family: var(--font-kr);
  font-size: clamp(1rem, 3.5vw, 1.2rem);
  color: var(--color-green-fresh);
  margin-bottom: 16px;
  font-weight: 600;
}

.brand-desc {
  font-size: 0.95rem;
  color: var(--color-text-sub);
  line-height: 1.9;
  margin-bottom: 28px;
}

.brand-stats {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 14px;
  margin-bottom: 32px;
}

.stat-item {
  text-align: center;
  padding: 16px 8px;
  border: var(--border-green);
  border-radius: var(--radius-sm);
  background: var(--color-bg2);
}

.stat-number {
  font-family: var(--font-kr);
  font-size: clamp(1.3rem,4vw,1.8rem);
  font-weight: 700;
  color: var(--color-green-dark);
  display: block;
}

.stat-label {
  font-size: 0.75rem;
  color: var(--color-gray);
  letter-spacing: 0.04em;
  display: block;
  margin-top: 4px;
}

/* ---- 브랜드 소개 내 FAQ 인라인 ---- */
.brand-faq-wrap {
  margin-top: 56px;
  padding-top: 48px;
  border-top: 1px dashed rgba(67,160,71,0.3);
}

.brand-faq-wrap .section-title { text-align: left; }
.brand-faq-wrap .section-divider { margin-left: 0; }

/* ============================================================
   MENU / PRODUCTS
============================================================ */
#menu { background: var(--color-bg); }

.menu-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.menu-tab {
  padding: 9px 22px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--color-text-sub);
  background: var(--color-white);
  border: var(--border-green);
  border-radius: var(--radius-pill);
  transition: var(--transition);
  cursor: pointer;
}

.menu-tab.active,
.menu-tab:hover {
  background: var(--color-green);
  color: var(--color-white);
  border-color: var(--color-green);
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 16px;
}

.menu-card {
  background: var(--color-white);
  border: var(--border-green);
  border-radius: var(--radius);
  overflow: hidden;
  transition: var(--transition);
  box-shadow: var(--shadow-card);
}

.menu-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-green);
  border-color: var(--color-green);
}

.menu-card-image {
  width: 100%; height: 140px;
  object-fit: cover;
  transition: filter 0.3s ease;
}

.menu-card:hover .menu-card-image { filter: brightness(1.05) saturate(1.1); }

.menu-card-body { padding: 14px; }

.menu-card-title {
  font-family: var(--font-kr);
  font-size: 0.95rem;
  color: var(--color-black);
  margin-bottom: 5px;
}

.menu-card-desc {
  font-size: 0.78rem;
  color: var(--color-gray);
  line-height: 1.6;
  margin-bottom: 10px;
}

.menu-card-price {
  font-size: 0.9rem;
  color: var(--color-green-dark);
  font-weight: 700;
}

.menu-card-tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.65rem;
  color: var(--color-green-dark);
  background: var(--color-bg2);
  border-radius: var(--radius-pill);
  margin-bottom: 6px;
  font-weight: 600;
}

.menu-panel { display: none; }
.menu-panel.active { display: block; }

/* ============================================================
   FEATURES / WHY US
============================================================ */
#features { background: var(--color-white); }

.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.feature-card {
  padding: 28px 22px;
  background: var(--color-bg);
  border: var(--border-green);
  border-radius: var(--radius);
  text-align: center;
  transition: var(--transition);
  box-shadow: var(--shadow-card);
}

.feature-card:hover {
  background: var(--color-bg2);
  transform: translateY(-4px);
  box-shadow: var(--shadow-green);
}

.feature-icon {
  width: 60px; height: 60px;
  margin: 0 auto 18px;
  background: linear-gradient(135deg, var(--color-bg2), var(--color-white));
  border: var(--border-green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}

.feature-title {
  font-family: var(--font-kr);
  font-size: 1rem;
  color: var(--color-green-dark);
  margin-bottom: 10px;
}

.feature-desc {
  font-size: 0.85rem;
  color: var(--color-gray);
  line-height: 1.8;
}

/* ============================================================
   GALLERY
============================================================ */
#gallery { background: var(--color-bg); }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 10px;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.gallery-item img {
  width: 100%; height: 160px;
  object-fit: cover;
  transition: all 0.4s ease;
}

.gallery-item:hover img {
  transform: scale(1.06);
  filter: brightness(1.05) saturate(1.15);
}

.gallery-item.large img { height: 330px; }

.gallery-item-overlay {
  position: absolute; inset: 0;
  background: rgba(67,160,71,0.0);
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}

.gallery-item:hover .gallery-item-overlay {
  background: rgba(67,160,71,0.15);
}

/* ============================================================
   NEWS / BLOG (FAQ 자리 대체)
============================================================ */
#blog { background: var(--color-white); }

.blog-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 12px;
}

.blog-empty-notice {
  text-align: center;
  padding: 60px 20px;
  background: var(--color-bg);
  border: 2px dashed rgba(67,160,71,0.25);
  border-radius: var(--radius);
}

.blog-empty-icon {
  font-size: 3rem;
  margin-bottom: 16px;
}

.blog-empty-notice h3 {
  font-size: 1.1rem;
  color: var(--color-green-dark);
  margin-bottom: 8px;
}

.blog-empty-notice p {
  font-size: 0.88rem;
  color: var(--color-gray);
  line-height: 1.7;
}

.blog-coming-tag {
  display: inline-block;
  margin-top: 16px;
  padding: 6px 20px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-green-dark);
  background: var(--color-bg2);
  border: var(--border-green);
  border-radius: var(--radius-pill);
}

/* ============================================================
   NEWS / POSTS
============================================================ */
#news { background: var(--color-bg); }

.news-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.news-card {
  background: var(--color-white);
  border: var(--border-green);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
  box-shadow: var(--shadow-card);
}

.news-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-green);
}

.news-card-image {
  width: 100%; height: 180px;
  object-fit: cover;
}

.news-card-body {
  padding: 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.news-tag {
  display: inline-block;
  padding: 3px 10px;
  font-size: 0.7rem;
  color: var(--color-green-dark);
  background: var(--color-bg2);
  border-radius: var(--radius-pill);
  margin-bottom: 10px;
  align-self: flex-start;
  font-weight: 600;
}

.news-title-text {
  font-family: var(--font-kr);
  font-size: 0.95rem;
  color: var(--color-black);
  margin-bottom: 8px;
  line-height: 1.5;
}

.news-excerpt {
  font-size: 0.82rem;
  color: var(--color-gray);
  line-height: 1.75;
  flex: 1;
}

.news-date {
  font-size: 0.74rem;
  color: var(--color-gray);
  margin-top: 12px;
}

/* ============================================================
   FAQ — 브랜드 소개 섹션 내부 (inline)
============================================================ */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq-item {
  background: var(--color-bg);
  border: var(--border-green);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  font-size: 0.9rem;
  font-family: var(--font-kr);
  color: var(--color-text);
  text-align: left;
  gap: 12px;
  cursor: pointer;
  transition: var(--transition);
}

.faq-question:hover,
.faq-question.open { color: var(--color-green-dark); }

.faq-icon {
  width: 22px; height: 22px;
  flex-shrink: 0;
  border: 1px solid rgba(67,160,71,0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--color-green);
  transition: transform 0.3s ease;
  background: var(--color-white);
}

.faq-question.open .faq-icon { transform: rotate(45deg); }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.faq-answer-inner {
  padding: 14px 18px 18px;
  font-size: 0.87rem;
  color: var(--color-text-sub);
  line-height: 1.8;
  border-top: 1px solid rgba(67,160,71,0.12);
}

/* ============================================================
   CONTACT / RESERVATION
============================================================ */
#contact { background: var(--color-white); }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.contact-icon {
  width: 42px; height: 42px;
  flex-shrink: 0;
  background: var(--color-bg2);
  border: var(--border-green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--color-green-dark);
}

.contact-item-content h4 {
  font-size: 0.8rem;
  color: var(--color-green-dark);
  margin-bottom: 3px;
  font-weight: 700;
}

.contact-item-content p {
  font-size: 0.88rem;
  color: var(--color-text-sub);
  line-height: 1.65;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--color-bg);
  padding: 28px 24px;
  border-radius: var(--radius);
  border: var(--border-green);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.form-group label {
  font-size: 0.78rem;
  color: var(--color-text-sub);
  font-weight: 600;
}

.form-group input,
.form-group textarea,
.form-group select {
  padding: 11px 13px;
  background: var(--color-white);
  border: var(--border-green);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 0.9rem;
  font-family: inherit;
  transition: border-color 0.3s ease;
  width: 100%;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--color-green);
  background: var(--color-bg2);
}

.form-group textarea {
  resize: vertical;
  min-height: 90px;
}

.form-group select option {
  background: var(--color-white);
  color: var(--color-text);
}

/* ============================================================
   FOOTER
============================================================ */
#site-footer {
  background: var(--color-dark);
  border-top: 3px solid var(--color-green);
  padding: 52px 0 24px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  margin-bottom: 36px;
}

.footer-brand .logo-text {
  font-size: 1.25rem;
  color: var(--color-green-light);
  margin-bottom: 12px;
  display: block;
}

.footer-brand p {
  font-size: 0.85rem;
  color: var(--color-gray-light);
  line-height: 1.8;
  margin-bottom: 20px;
}

.footer-sns { display: flex; gap: 10px; }

.sns-link {
  width: 36px; height: 36px;
  background: rgba(129,199,132,0.15);
  border: 1px solid rgba(129,199,132,0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: var(--color-green-light);
  transition: var(--transition);
}

.sns-link:hover {
  background: var(--color-green);
  color: var(--color-white);
  border-color: var(--color-green);
}

.footer-nav h4 {
  font-size: 0.84rem;
  color: var(--color-green-light);
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.footer-nav ul { display: flex; flex-direction: column; gap: 9px; }

.footer-nav ul a {
  font-size: 0.83rem;
  color: var(--color-gray-light);
}

.footer-nav ul a:hover { color: var(--color-green-light); }

.footer-bottom {
  padding-top: 22px;
  border-top: 1px solid rgba(129,199,132,0.15);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
}

.footer-legal {
  font-size: 0.74rem;
  color: var(--color-gray);
  line-height: 1.7;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.footer-links a {
  font-size: 0.74rem;
  color: var(--color-gray);
}

.footer-links a:hover { color: var(--color-green-light); }

/* ============================================================
   BACK TO TOP
============================================================ */
#back-to-top {
  position: fixed;
  bottom: 24px; right: 20px;
  width: 44px; height: 44px;
  background: var(--color-green);
  color: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 4px 16px rgba(67,160,71,0.4);
  opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: var(--transition);
  z-index: 500;
  cursor: pointer;
}

#back-to-top.visible {
  opacity: 1; visibility: visible;
  transform: translateY(0);
}

#back-to-top:hover {
  background: var(--color-green-dark);
  transform: translateY(-4px);
}

/* ============================================================
   TOAST NOTIFICATION
============================================================ */
.toast {
  position: fixed;
  bottom: 80px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--color-white);
  border: var(--border-green);
  color: var(--color-text);
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-size: 0.88rem;
  opacity: 0;
  box-shadow: var(--shadow-green);
  transition: all 0.3s ease;
  z-index: 9999;
  white-space: nowrap;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   RESPONSIVE — TABLET (768px+)
============================================================ */
@media (min-width: 768px) {
  :root { --header-height: 72px; }
  .section { padding: 80px 0; }

  .desktop-nav { display: flex; }
  .mobile-menu-btn { display: none; }

  .brand-story-grid { grid-template-columns: 1fr 1fr; }
  .brand-story-image img { height: 360px; }

  .menu-grid { grid-template-columns: repeat(3,1fr); }
  .menu-card-image { height: 180px; }

  .features-grid { grid-template-columns: repeat(2,1fr); }

  .gallery-grid { grid-template-columns: repeat(3,1fr); }
  .gallery-item img { height: 200px; }
  .gallery-item.large img { height: 410px; }

  .news-grid { grid-template-columns: repeat(2,1fr); }

  .contact-grid { grid-template-columns: 1fr 1fr; }

  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; }
}

/* ============================================================
   RESPONSIVE — DESKTOP with SIDEBAR (1024px+)
============================================================ */
@media (min-width: 1024px) {
  .section { padding: 90px 0; }

  .desktop-nav { display: none; } /* 사이드바로 대체 */
  .mobile-menu-btn { display: none; }

  .menu-grid { grid-template-columns: repeat(4,1fr); }
  .features-grid { grid-template-columns: repeat(4,1fr); }
  .news-grid { grid-template-columns: repeat(3,1fr); }

  .gallery-grid { grid-template-columns: repeat(4,1fr); }
  .gallery-item img { height: 210px; }
  .gallery-item.large img { height: 430px; }
}

/* ============================================================
   ANIMATIONS
============================================================ */
.fade-in {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-delay-1 { transition-delay: 0.1s; }
.fade-in-delay-2 { transition-delay: 0.2s; }
.fade-in-delay-3 { transition-delay: 0.3s; }
.fade-in-delay-4 { transition-delay: 0.4s; }

/* Green shimmer */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

.green-shimmer {
  background: linear-gradient(
    90deg,
    var(--color-green-dark) 20%,
    var(--color-lime)       50%,
    var(--color-green-dark) 80%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
}


/* ============================================================
   PATCH: Transparent desktop top navigation + separate pages
   - Desktop sidebar is promoted to a transparent top glass bar.
   - Mobile header/drawer rules stay under max-width:1023px unchanged.
   - Separate page files show one content section without damaging mobile layout.
============================================================ */
@media (min-width: 1024px) {
  .page-layout {
    display: block;
    min-height: 100vh;
  }

  .sidebar {
    position: fixed;
    top: 18px;
    left: 50%;
    right: auto;
    width: min(1180px, calc(100% - 48px));
    height: auto;
    min-height: 68px;
    transform: translateX(-50%);
    background: rgba(255, 252, 244, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.68);
    border-radius: 999px;
    box-shadow: 0 18px 46px rgba(42, 32, 18, 0.11);
    backdrop-filter: blur(22px) saturate(115%);
    -webkit-backdrop-filter: blur(22px) saturate(115%);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 22px;
    padding: 10px 16px 10px 22px;
    z-index: 1200;
    overflow: visible;
  }

  .sidebar-logo {
    margin: 0;
    padding: 0 18px 0 0;
    border-bottom: 0;
    border-right: 1px solid rgba(91, 70, 42, 0.18);
    flex: 0 0 auto;
  }

  .sidebar-logo .logo-text {
    font-size: 1.02rem;
    text-shadow: 0 1px 18px rgba(255,255,255,0.7);
  }

  .sidebar-logo .logo-sub {
    font-size: 0.52rem;
    color: rgba(88, 72, 48, 0.70);
  }

  .sidebar-nav {
    flex: 1 1 auto;
    min-width: 0;
  }

  .sidebar-nav ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 1;
    flex-wrap: nowrap;
  }

  .sidebar-nav ul a {
    gap: 6px;
    padding: 9px 10px;
    font-size: 0.82rem;
    white-space: nowrap;
    border-radius: 999px;
    color: rgba(58, 48, 34, 0.88);
  }

  .sidebar-nav ul a .nav-icon {
    font-size: 0.95rem;
    width: auto;
  }

  .sidebar-nav ul a:hover,
  .sidebar-nav ul a.active {
    background: rgba(255, 255, 255, 0.72);
    color: #3b3123;
  }

  .sidebar-nav ul a.active {
    border-left: 0;
    padding-left: 10px;
    background: linear-gradient(90deg, rgba(183, 137, 63, 0.22), rgba(255,255,255,0.66));
    box-shadow: inset 0 0 0 1px rgba(154, 114, 48, 0.18);
  }

  .sidebar-bottom {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
  }

  .sidebar-lang {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    margin: 0;
  }

  .sidebar-lang button {
    padding: 5px 8px;
    font-size: 0.68rem;
    background: rgba(255,255,255,0.54);
  }

  .sidebar-reserve {
    width: auto;
    min-width: 96px;
    padding: 9px 15px;
    font-size: 0.78rem;
  }

  .main-content {
    margin-left: 0;
    width: 100%;
  }

  #hero {
    padding-top: 100px;
  }
}

@media (min-width: 1024px) and (max-width: 1240px) {
  .sidebar { width: calc(100% - 28px); gap: 10px; padding-left: 14px; padding-right: 12px; }
  .sidebar-logo { padding-right: 10px; }
  .sidebar-nav ul a { padding: 8px 7px; font-size: 0.76rem; }
  .sidebar-nav ul a .nav-icon { display: none; }
  .sidebar-lang button { padding: 4px 7px; }
  .sidebar-reserve { min-width: 84px; padding: 8px 12px; }
}

body.page-single .main-content > section {
  display: none;
}

body.page-single .main-content > section.active-page-section {
  display: flex;
  min-height: 100svh;
  padding-top: calc(var(--header-height) + 48px);
}

body.page-single .main-content > section.active-page-section:not(#hero) {
  display: block;
}

@media (min-width: 1024px) {
  body.page-single .main-content > section.active-page-section {
    padding-top: 132px;
  }
}

@media (max-width: 1023px) {
  body.page-single .main-content > section.active-page-section {
    padding-top: calc(var(--header-height) + 36px);
  }
}


/* ============================================================
   PATCH: Home first screen neutral ivory/brown palette
   첫 화면의 녹색 덩어리감을 제거하고 아이보리/한지/브라운 톤으로 정리
============================================================ */
body.page-home #hero {
  background: #f7f0e4;
}

body.page-home .hero-bg {
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0) 34%),
    linear-gradient(145deg, #fbf6ed 0%, #eadcc8 48%, #d9c2a3 100%);
}

body.page-home .hero-bg-image {
  background-image: url('https://images.unsplash.com/photo-1540420773420-3366772f4999?w=1400&q=80');
  filter: grayscale(0.52) sepia(0.34) saturate(0.82) brightness(1.02);
  opacity: 0.15;
}

body.page-home .hero-overlay {
  background:
    radial-gradient(ellipse at 55% 48%, rgba(255,255,255,0.08) 0%, rgba(74,49,26,0.10) 100%),
    linear-gradient(180deg, rgba(255,250,240,0.20), rgba(74,49,26,0.08));
}

body.page-home .hero-badge {
  color: #6b4b22;
  background: rgba(255, 252, 244, 0.74);
  border-color: rgba(135, 97, 45, 0.32);
  box-shadow: 0 8px 24px rgba(80, 58, 31, 0.08);
}

body.page-home .hero-title,
body.page-home .hero-title span {
  color: #2f261c;
}

body.page-home .hero-title .hero-title-accent {
  background: linear-gradient(135deg, #4a3420, #8f6831, #c7a25a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

body.page-home .hero-subtitle {
  color: #5b4936;
}

body.page-home .hero-desc {
  color: #6e604f;
}

body.page-home .hero-deco {
  opacity: 0.09;
  filter: grayscale(1) sepia(0.5) saturate(0.6);
}

body.page-home .hero-scroll-indicator span {
  background: linear-gradient(to bottom, rgba(118,82,38,0.58), transparent);
}

body.page-home .hero-actions .btn-green {
  background: linear-gradient(135deg, #6f4f24, #b4873e);
  box-shadow: 0 8px 28px rgba(91, 63, 28, 0.20);
}

body.page-home .hero-actions .btn-green:hover {
  background: linear-gradient(135deg, #7f5b2a, #cfaa5f);
}

body.page-home .hero-actions .btn-outline {
  color: #5d421f;
  border-color: rgba(111, 79, 36, 0.46);
  background: rgba(255, 252, 244, 0.34);
}

body.page-home .hero-actions .btn-outline:hover {
  color: #fff;
  background: #7a5a24;
  border-color: #7a5a24;
}

body.page-home .notice-bar {
  background: linear-gradient(90deg, #5b3e1d, #8f6831, #c7a25a, #8f6831, #5b3e1d);
  background-size: 200% 100%;
}


/* ============================================================
   PATCH: Deeper home green removal
   스크린샷 기준 첫 화면에 남은 초록 오버레이/텍스트/언어버튼 제거
============================================================ */
body.page-home .hero-bg {
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0) 34%),
    linear-gradient(145deg, #fff8ec 0%, #ead8be 52%, #caa77c 100%) !important;
}

body.page-home .hero-bg-image {
  filter: grayscale(0.86) sepia(0.58) saturate(0.48) brightness(1.08) contrast(0.92) !important;
  opacity: 0.23 !important;
}

body.page-home .hero-overlay {
  background:
    linear-gradient(90deg, rgba(255, 247, 232, 0.76), rgba(255, 247, 232, 0.58), rgba(121, 80, 35, 0.14)),
    radial-gradient(ellipse at 50% 45%, rgba(255, 250, 240, 0.44) 0%, rgba(105, 70, 34, 0.18) 100%) !important;
}

body.page-home .logo-text,
body.page-home .sidebar-logo .logo-text {
  color: #5a3d1d !important;
}

body.page-home .hero-badge {
  color: #65461f !important;
  border-color: rgba(126, 84, 36, 0.28) !important;
}

body.page-home .hero-title,
body.page-home .hero-title span,
body.page-home .hero-title .hero-title-accent {
  color: #3a2a1d !important;
  background: none !important;
  -webkit-text-fill-color: #3a2a1d !important;
  text-shadow: 0 2px 24px rgba(255, 247, 232, 0.58);
}

body.page-home .hero-subtitle { color: #4b3a2a !important; }
body.page-home .hero-desc { color: #5f5143 !important; }

body.page-home .hero-actions .btn-green {
  background: linear-gradient(135deg, #6a461e, #a97a35) !important;
  color: #fff !important;
  border-color: transparent !important;
}

body.page-home .hero-actions .btn-outline {
  color: #5b3d1a !important;
  border-color: rgba(95, 62, 25, 0.55) !important;
  background: rgba(255, 248, 236, 0.42) !important;
}

@media (min-width: 1024px) {
  body.page-home .sidebar-nav ul a.active,
  body.page-home .sidebar-lang button.active {
    background: linear-gradient(90deg, rgba(170, 119, 43, 0.24), rgba(255,255,255,0.68)) !important;
    color: #4a3218 !important;
    border-color: rgba(126,84,36,0.22) !important;
  }
}


/* ============================================================
   PATCH: Make desktop menu glass more transparent
   상단 메뉴 바를 더 투명하게: 배경 덩어리감 제거, 텍스트 가독성만 유지
============================================================ */
@media (min-width: 1024px) {
  .sidebar {
    background: rgba(255, 250, 238, 0.28) !important;
    border-color: rgba(255, 255, 255, 0.36) !important;
    box-shadow: 0 14px 38px rgba(42, 32, 18, 0.08) !important;
    backdrop-filter: blur(16px) saturate(105%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(105%) !important;
  }

  .sidebar-logo {
    border-right-color: rgba(91, 70, 42, 0.10) !important;
  }

  .sidebar-nav ul a {
    background: transparent !important;
    color: rgba(42, 32, 22, 0.88) !important;
    text-shadow: 0 1px 10px rgba(255, 248, 236, 0.62);
  }

  .sidebar-nav ul a:hover,
  .sidebar-nav ul a.active {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #332617 !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.24) !important;
  }

  .sidebar-lang button {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(91, 70, 42, 0.14) !important;
    color: rgba(54, 40, 24, 0.82) !important;
  }

  .sidebar-lang button.active {
    background: rgba(255, 255, 255, 0.28) !important;
    color: #3c2b17 !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22) !important;
  }

  .sidebar-reserve {
    background: rgba(111, 77, 31, 0.76) !important;
    box-shadow: 0 8px 22px rgba(75, 50, 20, 0.16) !important;
  }

  .sidebar-reserve:hover {
    background: rgba(111, 77, 31, 0.88) !important;
  }
}


/* ============================================================
   PATCH: Clean transparent nav no icons no borders
   메뉴 이모티콘/테두리/버튼 박스 제거, 투명하고 깔끔한 상단 네비
============================================================ */
@media (min-width: 1024px) {
  .sidebar {
    background: rgba(255, 248, 235, 0.10) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: blur(10px) saturate(100%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(100%) !important;
    top: 16px !important;
    min-height: 56px !important;
    padding: 8px 18px !important;
  }

  .sidebar-logo {
    border: 0 !important;
    padding-right: 20px !important;
  }

  .sidebar-nav ul {
    gap: 22px !important;
  }

  .sidebar-nav ul a,
  .sidebar-nav ul a:hover,
  .sidebar-nav ul a.active {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 6px 0 !important;
    color: rgba(43, 34, 24, 0.92) !important;
    text-shadow: 0 1px 12px rgba(255, 248, 236, 0.75) !important;
    font-weight: 700 !important;
  }

  .sidebar-nav ul a.active,
  .sidebar-nav ul a:hover {
    color: #1f1710 !important;
    text-decoration: underline;
    text-underline-offset: 7px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(82, 57, 25, 0.45);
  }

  .sidebar-nav ul a .nav-icon {
    display: none !important;
  }

  .sidebar-lang button,
  .sidebar-lang button.active {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: rgba(55, 42, 26, 0.78) !important;
    padding: 4px 3px !important;
  }

  .sidebar-reserve {
    background: rgba(95, 65, 27, 0.74) !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #fff !important;
  }
}

@media (min-width: 1024px) and (max-width: 1240px) {
  .sidebar-nav ul { gap: 14px !important; }
  .sidebar-nav ul a { font-size: 0.76rem !important; }
}


/* ============================================================
   PATCH: User supplied hero background photo
   첨부한 음식 사진을 첫 화면 배경으로 적용
============================================================ */
body.page-home .hero-bg {
  background: #f4ecdf !important;
}

body.page-home .hero-bg-image {
  background-image: url(/images/hero-bg-namsan-rice.jpg?v=20260904) !important;
  background-size: cover !important;
  background-position: center center !important;
  filter: grayscale(0.10) sepia(0.18) saturate(0.92) brightness(1.02) contrast(0.96) !important;
  opacity: 0.46 !important;
}

body.page-home .hero-overlay {
  background:
    linear-gradient(90deg, rgba(250, 244, 233, 0.86) 0%, rgba(250, 244, 233, 0.67) 42%, rgba(250, 244, 233, 0.44) 100%),
    radial-gradient(ellipse at center, rgba(255,255,255,0.32) 0%, rgba(80,55,30,0.10) 100%) !important;
}

@media (max-width: 720px) {
  body.page-home .hero-bg-image {
    background-position: 47% center !important;
    opacity: 0.40 !important;
  }
  body.page-home .hero-overlay {
    background: linear-gradient(180deg, rgba(250,244,233,0.88), rgba(250,244,233,0.62)) !important;
  }
}


/* ============================================================
   PATCH: Remove hero/menu blur
   첫 화면 배경사진과 상단 메뉴 블러 제거
============================================================ */
body.page-home .hero-bg-image {
  filter: none !important;
}

body.page-home .hero-badge,
#site-header {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

@media (min-width: 1024px) {
  .sidebar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}


/* ============================================================
   PATCH: Clear hero photo no white veil
   배경사진을 뿌옇게 만드는 흰 오버레이 제거, 사진 선명도 확보
============================================================ */
body.page-home .hero-bg {
  background: #1f1710 !important;
}

body.page-home .hero-bg-image {
  background-image: url(/images/hero-bg-namsan-rice.jpg?v=20260904-clear) !important;
  background-size: cover !important;
  background-position: center center !important;
  opacity: 0.92 !important;
  filter: none !important;
}

body.page-home .hero-overlay {
  background:
    linear-gradient(180deg, rgba(20,14,8,0.18) 0%, rgba(20,14,8,0.08) 42%, rgba(20,14,8,0.24) 100%),
    radial-gradient(ellipse at center, rgba(255,245,225,0.06) 0%, rgba(20,14,8,0.18) 100%) !important;
}

body.page-home .hero-title,
body.page-home .hero-title span,
body.page-home .hero-title .hero-title-accent {
  color: #fff7e8 !important;
  -webkit-text-fill-color: #fff7e8 !important;
  text-shadow: 0 3px 18px rgba(0,0,0,0.50) !important;
}

body.page-home .hero-subtitle,
body.page-home .hero-desc {
  color: rgba(255, 248, 235, 0.96) !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.48) !important;
}

body.page-home .hero-badge {
  background: rgba(255, 248, 235, 0.42) !important;
  color: #2d2115 !important;
  border: 0 !important;
}

@media (max-width: 720px) {
  body.page-home .hero-bg-image {
    opacity: 0.88 !important;
    background-position: center center !important;
  }
  body.page-home .hero-overlay {
    background: linear-gradient(180deg, rgba(20,14,8,0.20), rgba(20,14,8,0.30)) !important;
  }
}


/* ============================================================
   PATCH: Hero rolling background photos
   첫 화면 배경사진 2장 자동 롤링
============================================================ */
body.page-home .hero-bg-image {
  background-image: none !important;
  opacity: 1 !important;
  filter: none !important;
}

body.page-home .hero-bg-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  opacity: 0;
  transform: scale(1.035);
  animation: heroPhotoRolling 12s infinite ease-in-out;
  will-change: opacity, transform;
}

body.page-home .hero-bg-slide-1 {
  background-image: url('/images/hero-bg-namsan-rice.jpg?v=20260904-roll1');
}

body.page-home .hero-bg-slide-2 {
  background-image: url('/images/hero-bg-namsan-cutlet.jpg?v=20260904-roll2');
  animation-delay: 6s;
}

@keyframes heroPhotoRolling {
  0%   { opacity: 0; transform: scale(1.035); }
  8%   { opacity: 0.92; }
  42%  { opacity: 0.92; }
  50%  { opacity: 0; transform: scale(1.075); }
  100% { opacity: 0; transform: scale(1.035); }
}

@media (max-width: 720px) {
  body.page-home .hero-bg-slide {
    background-position: center center;
    animation-duration: 12s;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-home .hero-bg-slide {
    animation: none !important;
  }
  body.page-home .hero-bg-slide-1 { opacity: 0.9 !important; }
  body.page-home .hero-bg-slide-2 { opacity: 0 !important; }
}


/* ============================================================
   PATCH: Hero rolling background photos 4 sequential
   배경사진 4장 순서대로 롤링: 밥 → 돈가스 → 전 → 추가사진
============================================================ */
body.page-home .hero-bg-image {
  background-image: none !important;
  opacity: 1 !important;
  filter: none !important;
}

body.page-home .hero-bg-slide {
  position: absolute !important;
  inset: 0 !important;
  background-size: cover !important;
  background-position: center center !important;
  opacity: 0;
  transform: scale(1.025);
  animation-name: heroPhotoRolling4 !important;
  animation-duration: 24s !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
  will-change: opacity, transform;
}

body.page-home .hero-bg-slide-1 {
  background-image: url('/images/hero-bg-namsan-rice.jpg?v=20260904-roll4-1') !important;
  animation-delay: 0s !important;
}
body.page-home .hero-bg-slide-2 {
  background-image: url('/images/hero-bg-namsan-cutlet.jpg?v=20260904-roll4-2') !important;
  animation-delay: 6s !important;
}
body.page-home .hero-bg-slide-3 {
  background-image: url('/images/hero-bg-namsan-jeon.jpg?v=20260904-roll4-3') !important;
  animation-delay: 12s !important;
}
body.page-home .hero-bg-slide-4 {
  background-image: url('/images/hero-bg-namsan-dish4.jpg?v=20260904-roll4-4') !important;
  animation-delay: 18s !important;
}

@keyframes heroPhotoRolling4 {
  0%   { opacity: 0; transform: scale(1.025); }
  4%   { opacity: 0.92; }
  21%  { opacity: 0.92; }
  25%  { opacity: 0; transform: scale(1.065); }
  100% { opacity: 0; transform: scale(1.025); }
}

@media (max-width: 720px) {
  body.page-home .hero-bg-slide {
    background-position: center center !important;
    animation-duration: 24s !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-home .hero-bg-slide { animation: none !important; }
  body.page-home .hero-bg-slide-1 { opacity: 0.9 !important; }
  body.page-home .hero-bg-slide-2,
  body.page-home .hero-bg-slide-3,
  body.page-home .hero-bg-slide-4 { opacity: 0 !important; }
}


/* ============================================================
   PATCH: Remove selected nav/lang visual state
   홈/KO 선택 표시처럼 보이는 활성 배경·밑줄 제거
============================================================ */
@media (min-width: 1024px) {
  .sidebar-nav ul a,
  .sidebar-nav ul a:hover,
  .sidebar-nav ul a.active,
  body.page-home .sidebar-nav ul a.active,
  body.page-home .sidebar-lang button.active,
  .sidebar-lang button,
  .sidebar-lang button.active {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
  }

  .sidebar-nav ul a.active,
  .sidebar-nav ul a:hover {
    color: rgba(43, 34, 24, 0.92) !important;
  }

  .sidebar-lang button,
  .sidebar-lang button.active {
    color: rgba(55, 42, 26, 0.70) !important;
    font-weight: 600 !important;
  }
}


/* ============================================================
   PATCH: Use supplied Namsan logo image
   텍스트 로고를 첨부 로고 이미지로 교체
============================================================ */
.logo-img {
  display: block;
  width: auto;
  height: 48px;
  object-fit: contain;
}

@media (min-width: 1024px) {
  .sidebar .logo-img {
    height: 50px;
    max-width: 96px;
  }
  .footer-brand .logo-img {
    height: 82px;
    max-width: 140px;
    margin-bottom: 12px;
  }
}

@media (max-width: 1023px) {
  #site-header .logo-img {
    height: 46px;
    max-width: 92px;
  }
  .footer-brand .logo-img {
    height: 76px;
    max-width: 132px;
    margin-bottom: 12px;
  }
}

@media (max-width: 420px) {
  #site-header .logo-img {
    height: 42px;
    max-width: 84px;
  }
}


/* ============================================================
   PATCH: Fix oversized logo everywhere
   로고가 히어로 전체를 덮는 문제 강제 수정
============================================================ */
.site-logo {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.site-logo .logo-img,
.sidebar .site-logo .logo-img,
#site-header .site-logo .logo-img {
  width: auto !important;
  height: 44px !important;
  max-width: 88px !important;
  max-height: 44px !important;
  object-fit: contain !important;
}

.footer-brand .logo-img {
  width: auto !important;
  height: 72px !important;
  max-width: 132px !important;
  max-height: 72px !important;
  object-fit: contain !important;
}

@media (min-width: 1024px) {
  .sidebar-logo {
    width: 96px !important;
    max-width: 96px !important;
    overflow: hidden !important;
  }
  .sidebar-logo .site-logo,
  .sidebar-logo .logo-img {
    width: 86px !important;
    height: 46px !important;
    max-width: 86px !important;
    max-height: 46px !important;
  }
}

@media (max-width: 1023px) {
  #site-header .site-logo {
    width: 86px !important;
    max-width: 86px !important;
  }
  #site-header .logo-img {
    width: 80px !important;
    height: 42px !important;
    max-width: 80px !important;
    max-height: 42px !important;
  }
}


/* ============================================================
   PATCH: Logo before brand wordmark
   로고는 브랜드명 앞에 작게 배치하고 브랜드명 텍스트 유지
============================================================ */
.site-logo {
  flex-direction: row !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: visible !important;
}

.logo-wordmark {
  display: inline-block !important;
  font-family: var(--font-kr) !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  color: #4b3218 !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  text-shadow: 0 1px 12px rgba(255,248,236,0.72) !important;
}

.site-logo .logo-img,
.sidebar .site-logo .logo-img,
#site-header .site-logo .logo-img {
  width: 28px !important;
  height: 32px !important;
  max-width: 28px !important;
  max-height: 32px !important;
  object-fit: contain !important;
}

@media (min-width: 1024px) {
  .sidebar-logo {
    width: auto !important;
    max-width: none !important;
    padding-right: 18px !important;
  }
  .sidebar-logo .site-logo {
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
  }
  .sidebar-logo .logo-img {
    width: 30px !important;
    height: 34px !important;
    max-width: 30px !important;
    max-height: 34px !important;
  }
  .sidebar-logo .logo-wordmark {
    font-size: 1.02rem !important;
  }
}

@media (max-width: 1023px) {
  #site-header .site-logo {
    width: auto !important;
    max-width: 150px !important;
  }
  #site-header .logo-img {
    width: 26px !important;
    height: 30px !important;
    max-width: 26px !important;
    max-height: 30px !important;
  }
  #site-header .logo-wordmark {
    font-size: 1rem !important;
  }
}


/* ============================================================
   PATCH: Blue Ribbon notice bar
   하단 스크롤 공지 내용을 블루리본 수상/선정 이력으로 정리
============================================================ */
body.page-home .notice-bar,
.notice-bar {
  background: linear-gradient(90deg, #143f75, #1f62a8, #2e7fc8, #1f62a8, #143f75) !important;
  background-size: 200% 100% !important;
}

.notice-item {
  color: #ffffff !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
}

.notice-item .dot {
  width: 7px !important;
  height: 7px !important;
  background: #b9dcff !important;
  box-shadow: 0 0 0 3px rgba(185,220,255,0.18) !important;
}


/* ============================================================
   PATCH: Warm gold notice bar instead of blue
   블루리본 내용은 유지하되 컬러는 홈페이지 톤에 맞는 브라운/골드로 변경
============================================================ */
body.page-home .notice-bar,
.notice-bar {
  background: linear-gradient(90deg, #4a2f16, #7a5526, #b88a42, #7a5526, #4a2f16) !important;
  background-size: 200% 100% !important;
  border-top: 1px solid rgba(255, 236, 190, 0.20) !important;
  border-bottom: 1px solid rgba(63, 39, 16, 0.18) !important;
}

.notice-item {
  color: #fff7e8 !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 7px rgba(0,0,0,0.26) !important;
}

.notice-item .dot {
  background: #f4d58d !important;
  box-shadow: 0 0 0 3px rgba(244,213,141,0.18) !important;
}


/* ============================================================
   PATCH: Warm brand story agenda continuity
   히어로/공지바에서 브랜드 이야기로 자연스럽게 이어지는 브라운·아이보리 톤
============================================================ */
#brand-story {
  background: linear-gradient(180deg, #fbf7ee 0%, #f4eadb 100%) !important;
  position: relative;
}

#brand-story::before {
  content: ;
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 42px;
  background: linear-gradient(180deg, rgba(74,47,22,0.10), rgba(251,247,238,0));
  pointer-events: none;
}

#brand-story .section-title,
#brand-story .brand-tagline,
#brand-story .stat-number {
  color: #6a461e !important;
}

#brand-story .section-divider {
  background: linear-gradient(90deg, #6a461e, #c79a50) !important;
}

#brand-story .brand-desc,
#brand-story .stat-label {
  color: #5f5143 !important;
}

#brand-story .brand-story-image img {
  filter: sepia(0.12) saturate(0.92) contrast(0.96) !important;
  box-shadow: 0 18px 42px rgba(78, 51, 24, 0.13) !important;
}

#brand-story .brand-story-image::after {
  background: linear-gradient(to bottom, transparent 58%, rgba(74,47,22,0.10) 100%) !important;
}

#brand-story .stat-item {
  background: rgba(255, 250, 240, 0.78) !important;
  border: 1px solid rgba(135, 97, 45, 0.20) !important;
  box-shadow: 0 10px 26px rgba(78, 51, 24, 0.06) !important;
}

#brand-story .btn-green {
  background: linear-gradient(135deg, #6a461e, #b4873e) !important;
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(91, 63, 28, 0.16) !important;
}

#brand-story .btn-green:hover {
  background: linear-gradient(135deg, #7a5526, #c79a50) !important;
}

#brand-story .brand-faq-wrap {
  border-top-color: rgba(135, 97, 45, 0.24) !important;
}

@media (max-width: 720px) {
  #brand-story {
    background: linear-gradient(180deg, #fbf7ee 0%, #f5ecdf 100%) !important;
  }
}


/* ============================================================
   PATCH: Brand story black and white photo
   브랜드 이야기 사진을 흑백 다큐멘터리 톤으로 정리
============================================================ */
#brand-story .brand-story-image img {
  filter: grayscale(1) contrast(1.04) brightness(0.96) !important;
  object-position: center center !important;
}
#brand-story .brand-tagline {
  color: #5f3d1d !important;
}


/* ============================================================
   PATCH: Home keeps FAQ and moves lower content to menu pages
   홈은 히어로 + 블루리본 공지 + 브랜드 이야기/FAQ까지만 노출.
   아래 상세 콘텐츠는 각 상단 메뉴의 별도 페이지에서 노출.
============================================================ */
body.page-home #menu,
body.page-home #features,
body.page-home #gallery,
body.page-home #news,
body.page-home #blog,
body.page-home #contact {
  display: none !important;
}

body.page-home #brand-story {
  padding-bottom: 78px !important;
}

body.page-home .brand-faq-wrap {
  display: block !important;
}


/* ============================================================
   PATCH: Landing tone for FAQ and footer no green
   랜딩 페이지 톤으로 FAQ/푸터/하단 버튼까지 초록 제거
============================================================ */
body.page-home .brand-faq-wrap {
  border-top-color: rgba(126, 84, 36, 0.20) !important;
}

body.page-home .faq-item {
  background: rgba(255, 250, 240, 0.82) !important;
  border: 1px solid rgba(126, 84, 36, 0.18) !important;
  box-shadow: 0 10px 24px rgba(78, 51, 24, 0.055) !important;
}

body.page-home .faq-question,
body.page-home .faq-question:hover,
body.page-home .faq-question.open {
  color: #49341f !important;
}

body.page-home .faq-icon {
  color: #7a5526 !important;
  border-color: rgba(126, 84, 36, 0.18) !important;
  background: rgba(255, 248, 236, 0.74) !important;
}

body.page-home .faq-answer {
  color: #5f5143 !important;
}

#site-footer {
  background: linear-gradient(180deg, #3b2816 0%, #25190f 100%) !important;
  border-top: 1px solid rgba(196, 151, 76, 0.28) !important;
  color: rgba(255, 247, 232, 0.82) !important;
}

.footer-brand p,
.footer-nav ul a,
.footer-legal,
.footer-links a {
  color: rgba(255, 247, 232, 0.72) !important;
}

.footer-nav h4 {
  color: #d9b36a !important;
}

.footer-sns a {
  color: #f3ddaf !important;
  border-color: rgba(217, 179, 106, 0.25) !important;
  background: rgba(255, 248, 236, 0.05) !important;
}

.footer-sns a:hover {
  background: rgba(183, 137, 63, 0.28) !important;
  border-color: rgba(217, 179, 106, 0.48) !important;
}

.footer-bottom {
  border-top-color: rgba(217, 179, 106, 0.18) !important;
}

.footer-links a:hover,
.footer-nav ul a:hover {
  color: #f0cf8b !important;
}

#back-to-top {
  background: rgba(111, 79, 36, 0.92) !important;
  color: #fff7e8 !important;
  box-shadow: 0 10px 26px rgba(64, 39, 16, 0.22) !important;
}

#back-to-top:hover {
  background: #8f6831 !important;
}

body.page-home .section-title,
body.page-home .section-subtitle {
  color: #5a3d1d !important;
}

body.page-home .section-divider {
  background: linear-gradient(to right, transparent, #7a5526, #c79a50, transparent) !important;
}


/* ============================================================
   PATCH: Keep all moved content visible as menu items
   홈에서 숨긴 하위 콘텐츠들이 상단 메뉴 항목으로 분명히 보이도록 정리
============================================================ */
@media (min-width: 1024px) {
  .sidebar {
    width: min(1240px, calc(100% - 24px)) !important;
    padding: 8px 14px !important;
    gap: 14px !important;
  }

  .sidebar-logo {
    flex: 0 0 auto !important;
    padding-right: 12px !important;
  }

  .sidebar-nav {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: block !important;
  }

  .sidebar-nav ul {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    flex-wrap: nowrap !important;
  }

  .sidebar-nav li {
    display: block !important;
    flex: 0 0 auto !important;
  }

  .sidebar-nav ul a {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 0.82rem !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
    color: rgba(35, 26, 17, 0.96) !important;
  }
}

@media (min-width: 1024px) and (max-width: 1160px) {
  .sidebar-nav ul { gap: 9px !important; }
  .sidebar-nav ul a { font-size: 0.76rem !important; }
  .sidebar-reserve { min-width: 76px !important; padding-left: 9px !important; padding-right: 9px !important; }
  .sidebar-lang { display: none !important; }
}

@media (max-width: 1023px) {
  .mobile-nav ul a {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}


/* ============================================================
   PATCH: Degreen hero and top sections all pages
   홈뿐 아니라 각 메뉴 페이지의 상단 히어로/버튼/텍스트까지 랜딩 톤으로 통일
============================================================ */
#hero {
  background: #1f1710 !important;
}

#hero .hero-bg {
  background: #1f1710 !important;
}

#hero .hero-bg-image {
  background-image: none !important;
  opacity: 1 !important;
  filter: none !important;
}

#hero .hero-bg-slide {
  position: absolute !important;
  inset: 0 !important;
  background-size: cover !important;
  background-position: center center !important;
  opacity: 0;
  transform: scale(1.025);
  animation-name: heroPhotoRolling4 !important;
  animation-duration: 24s !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
  will-change: opacity, transform;
}

#hero .hero-bg-slide-1 {
  background-image: url(/images/hero-bg-namsan-rice.jpg?v=20260904-all-1) !important;
  animation-delay: 0s !important;
}
#hero .hero-bg-slide-2 {
  background-image: url(/images/hero-bg-namsan-cutlet.jpg?v=20260904-all-2) !important;
  animation-delay: 6s !important;
}
#hero .hero-bg-slide-3 {
  background-image: url(/images/hero-bg-namsan-jeon.jpg?v=20260904-all-3) !important;
  animation-delay: 12s !important;
}
#hero .hero-bg-slide-4 {
  background-image: url(/images/hero-bg-namsan-dish4.jpg?v=20260904-all-4) !important;
  animation-delay: 18s !important;
}

#hero .hero-overlay {
  background:
    linear-gradient(180deg, rgba(20,14,8,0.18) 0%, rgba(20,14,8,0.08) 42%, rgba(20,14,8,0.24) 100%),
    radial-gradient(ellipse at center, rgba(255,245,225,0.06) 0%, rgba(20,14,8,0.18) 100%) !important;
}

#hero .hero-badge {
  background: rgba(255, 248, 235, 0.42) !important;
  color: #2d2115 !important;
  border: 0 !important;
}

#hero .hero-title,
#hero .hero-title span,
#hero .hero-title .hero-title-accent {
  color: #fff7e8 !important;
  background: none !important;
  -webkit-text-fill-color: #fff7e8 !important;
  text-shadow: 0 3px 18px rgba(0,0,0,0.50) !important;
}

#hero .hero-subtitle,
#hero .hero-desc {
  color: rgba(255, 248, 235, 0.96) !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.48) !important;
}

#hero .btn-green {
  background: linear-gradient(135deg, #6a461e, #a97a35) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 8px 24px rgba(91, 63, 28, 0.18) !important;
}

#hero .btn-green:hover {
  background: linear-gradient(135deg, #7a5526, #c79a50) !important;
}

#hero .btn-outline {
  color: #fff7e8 !important;
  border-color: rgba(255, 247, 232, 0.62) !important;
  background: rgba(255, 248, 236, 0.12) !important;
}

#hero .btn-outline:hover {
  color: #fff !important;
  background: rgba(122, 85, 38, 0.82) !important;
  border-color: rgba(122, 85, 38, 0.82) !important;
}

#hero .hero-scroll-indicator span {
  background: linear-gradient(to bottom, rgba(244,213,141,0.72), transparent) !important;
}

#hero .hero-deco {
  display: none !important;
}

@media (max-width: 720px) {
  #hero .hero-bg-slide {
    background-position: center center !important;
  }
  #hero .hero-overlay {
    background: linear-gradient(180deg, rgba(20,14,8,0.20), rgba(20,14,8,0.30)) !important;
  }
}


/* ============================================================
   PATCH: Warm menu card structure no green
   메뉴 페이지는 참고 이미지처럼 탭 + 카드 그리드 구조 유지, 컬러는 랜딩 톤으로 통일
============================================================ */
#menu {
  background: linear-gradient(180deg, #fbf7ee 0%, #f4eadb 100%) !important;
}

#menu .section-title {
  color: #5a3d1d !important;
}

#menu .section-subtitle {
  color: #76644f !important;
}

#menu .section-divider {
  background: linear-gradient(to right, transparent, #7a5526, #c79a50, transparent) !important;
}

.menu-tabs {
  gap: 10px !important;
  margin-bottom: 28px !important;
}

.menu-tab {
  color: #5a4632 !important;
  background: rgba(255, 252, 244, 0.86) !important;
  border: 1px solid rgba(126, 84, 36, 0.18) !important;
  box-shadow: 0 6px 18px rgba(78, 51, 24, 0.045) !important;
}

.menu-tab.active,
.menu-tab:hover {
  color: #fff7e8 !important;
  background: linear-gradient(135deg, #6a461e, #a97a35) !important;
  border-color: rgba(106, 70, 30, 0.32) !important;
  box-shadow: 0 8px 22px rgba(91, 63, 28, 0.14) !important;
}

.menu-card {
  background: rgba(255, 252, 244, 0.94) !important;
  border: 1px solid rgba(126, 84, 36, 0.13) !important;
  box-shadow: 0 10px 28px rgba(78, 51, 24, 0.08) !important;
}

.menu-card:hover {
  border-color: rgba(183, 137, 63, 0.28) !important;
  box-shadow: 0 16px 36px rgba(78, 51, 24, 0.14) !important;
}

.menu-card-image {
  filter: sepia(0.12) saturate(0.92) contrast(0.97) !important;
}

.menu-card:hover .menu-card-image {
  filter: sepia(0.08) saturate(1.02) brightness(1.02) !important;
}

.menu-card-tag {
  color: #7a5526 !important;
  background: rgba(244, 213, 141, 0.22) !important;
  border: 1px solid rgba(183, 137, 63, 0.18) !important;
}

.menu-card-title {
  color: #2f261c !important;
}

.menu-card-desc {
  color: #6a5b49 !important;
}

.menu-card-price {
  color: #7a5526 !important;
  font-weight: 800 !important;
}

@media (max-width: 720px) {
  .menu-tabs {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    padding-bottom: 8px !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .menu-tab {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
  .menu-grid {
    gap: 16px !important;
  }
}


/* ============================================================
   PATCH: Force separate menu pages to show only their own content
   메뉴별 별도 페이지에서는 히어로/공지/다른 섹션을 숨기고 해당 메뉴 콘텐츠만 표시
============================================================ */
body.page-single #hero,
body.page-single .notice-bar,
body.page-single .main-content > section:not(.active-page-section) {
  display: none !important;
}

body.page-single .main-content > section.active-page-section {
  display: block !important;
  min-height: auto !important;
  padding-top: 118px !important;
  padding-bottom: 84px !important;
}

body.page-single #menu.active-page-section,
body.page-single #features.active-page-section,
body.page-single #gallery.active-page-section,
body.page-single #news.active-page-section,
body.page-single #blog.active-page-section,
body.page-single #contact.active-page-section,
body.page-single #brand-story.active-page-section {
  background: linear-gradient(180deg, #fbf7ee 0%, #f4eadb 100%) !important;
}

@media (max-width: 1023px) {
  body.page-single .main-content > section.active-page-section {
    padding-top: calc(var(--header-height) + 34px) !important;
  }
}


/* ============================================================
   PATCH: Match internal pages to landing warm photo tone
   첫 페이지의 어둡고 따뜻한 음식사진 톤과 내부 메뉴 페이지 톤 통일
============================================================ */
body.page-single {
  background:
    linear-gradient(180deg, rgba(34, 25, 17, 0.54), rgba(80, 58, 35, 0.22)),
    url('/images/hero-bg-namsan-rice.jpg?v=internal-tone') center center / cover fixed,
    #2f251b !important;
  color: #2f261c !important;
}

body.page-single .main-content > section.active-page-section {
  background:
    linear-gradient(180deg, rgba(247, 240, 226, 0.90) 0%, rgba(235, 222, 202, 0.92) 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.page-single .container {
  position: relative;
}

body.page-single .section-title {
  color: #3b2a1b !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.34) !important;
}

body.page-single .section-subtitle {
  color: #796653 !important;
}

body.page-single .section-divider {
  background: linear-gradient(to right, transparent, #76542a, #c49a55, transparent) !important;
  opacity: 0.82 !important;
}

/* 메뉴 페이지: 초록 느낌을 줄이고 랜딩의 브라운/골드 음식 톤으로 */
body.page-menu #menu.active-page-section {
  background:
    linear-gradient(180deg, rgba(247, 240, 226, 0.92) 0%, rgba(230, 215, 192, 0.94) 100%) !important;
}

body.page-menu .menu-tabs {
  background: rgba(255, 248, 235, 0.34) !important;
  border-radius: 999px !important;
  padding: 8px !important;
  width: fit-content !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-shadow: 0 10px 30px rgba(58, 38, 19, 0.07) !important;
}

body.page-menu .menu-tab {
  color: #5a4632 !important;
  background: rgba(255, 252, 244, 0.72) !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.page-menu .menu-tab.active,
body.page-menu .menu-tab:hover {
  color: #fff7e8 !important;
  background: rgba(122, 85, 38, 0.92) !important;
  box-shadow: 0 8px 20px rgba(91, 63, 28, 0.16) !important;
}

body.page-menu .menu-card {
  background: rgba(255, 250, 240, 0.86) !important;
  border: 1px solid rgba(132, 95, 50, 0.10) !important;
  box-shadow: 0 16px 34px rgba(58, 38, 19, 0.09) !important;
}

body.page-menu .menu-card-image {
  filter: grayscale(0.30) sepia(0.26) saturate(0.72) brightness(0.96) contrast(0.94) !important;
}

body.page-menu .menu-card:hover .menu-card-image {
  filter: grayscale(0.12) sepia(0.18) saturate(0.86) brightness(0.98) contrast(0.96) !important;
}

body.page-menu .menu-card-tag {
  color: #6d4a22 !important;
  background: rgba(218, 183, 118, 0.20) !important;
  border: 0 !important;
}

body.page-menu .menu-card-title { color: #2f261c !important; }
body.page-menu .menu-card-desc { color: #665746 !important; }
body.page-menu .menu-card-price { color: #6a461e !important; }

/* 나머지 내부 페이지도 같은 랜딩 계열로 */
body.page-single .feature-card,
body.page-single .news-card,
body.page-single .blog-empty-notice,
body.page-single .contact-form,
body.page-single .contact-item,
body.page-single .faq-item,
body.page-single .stat-item {
  background: rgba(255, 250, 240, 0.86) !important;
  border: 1px solid rgba(132, 95, 50, 0.12) !important;
  box-shadow: 0 14px 32px rgba(58, 38, 19, 0.08) !important;
}

body.page-single .feature-icon,
body.page-single .contact-icon,
body.page-single .faq-icon {
  color: #6a461e !important;
  background: rgba(218, 183, 118, 0.18) !important;
  border-color: rgba(132,95,50,0.12) !important;
}

body.page-single .feature-card h3,
body.page-single .news-title-text,
body.page-single .blog-empty-notice h3,
body.page-single .contact-item-content h4,
body.page-single .faq-question {
  color: #3b2a1b !important;
}

body.page-single .feature-card p,
body.page-single .news-excerpt,
body.page-single .blog-empty-notice p,
body.page-single .contact-item-content p,
body.page-single .faq-answer,
body.page-single .brand-desc {
  color: #665746 !important;
}

body.page-single img:not(.logo-img) {
  filter: grayscale(0.18) sepia(0.18) saturate(0.82) brightness(0.97) contrast(0.96) !important;
}

@media (max-width: 720px) {
  body.page-single {
    background-attachment: scroll !important;
  }
  body.page-menu .menu-tabs {
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* ============================================================
   PATCH: Real Naver menu content card polish
   네이버 플레이스 실제 메뉴 이미지/가격 기반 카드 정리, 그린 금지
============================================================ */
.real-menu-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
}
.real-menu-card .menu-card-image {
  height: 190px !important;
  object-fit: cover !important;
}
.menu-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 9px;
}
.menu-recommend {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  color: #fff7e8;
  background: rgba(122, 85, 38, 0.88);
}
.menu-card-desc.muted {
  color: rgba(102, 87, 70, 0.70) !important;
}
@media (max-width: 720px) {
  .real-menu-grid { grid-template-columns: 1fr !important; }
  .real-menu-card .menu-card-image { height: 210px !important; }
}


/* ============================================================
   PATCH: Footer below active separate page content
   별도 페이지에서 푸터가 콘텐츠보다 먼저 보이는 현상 방지
============================================================ */
body.page-single #site-footer {
  display: block !important;
  clear: both !important;
}

body.page-single .main-content > section.active-page-section + #site-footer {
  margin-top: 0 !important;
}


/* ============================================================
   PATCH: Menu optimized local images
   외부 네이버 원본 이미지 대신 로컬 최적화 WebP 사용
============================================================ */
.real-menu-card .menu-card-image {
  background: #eadcc8 !important;
}


/* ============================================================
   PATCH: Brand story implementation spec 20260904
   GPT 명세 반영: 외부 reference 이미지 미사용, warm/modern tone 유지
============================================================ */
#brand-story {
  background:
    linear-gradient(180deg, rgba(41, 30, 21, 0.04), rgba(255,255,255,0) 22%),
    radial-gradient(circle at 12% 8%, rgba(178, 132, 62, 0.13), transparent 32%),
    #f3eadc !important;
  color: #352719;
}

.story-container { max-width: 1180px; }
.story-page-head { max-width: 820px; margin: 0 auto 52px; text-align: center; }
.story-eyebrow {
  margin: 0 0 12px;
  color: #a27835;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.brand-story-grid {
  align-items: center !important;
  gap: clamp(28px, 5vw, 72px) !important;
}
.brand-story-image img,
.story-photo img {
  display: block;
  width: 100%;
  object-fit: cover;
  border-radius: 22px;
  background: #eadcc8;
  box-shadow: 0 24px 70px rgba(62, 42, 22, 0.18);
}
.brand-story-image img { aspect-ratio: 4 / 3; height: auto !important; filter: grayscale(1) sepia(.14) contrast(1.02); }
.brand-story-image::after { background: linear-gradient(to bottom, transparent 58%, rgba(52,35,19,.18) 100%) !important; border-radius: 22px; }

.brand-tagline {
  color: #7b5728 !important;
  font-size: clamp(1.02rem, 2.5vw, 1.28rem) !important;
  line-height: 1.7;
}
.brand-desc {
  color: #5f4b36 !important;
  font-size: 1rem !important;
  line-height: 2.05 !important;
}
.story-stats .stat-item,
.stat-item {
  border: 1px solid rgba(125, 88, 40, .18) !important;
  background: rgba(255, 250, 240, .72) !important;
  box-shadow: 0 12px 36px rgba(75, 50, 24, .08);
}
.story-stats .stat-number,
.stat-number { color: #6f4b20 !important; font-size: clamp(1.05rem, 2.2vw, 1.55rem); }
.story-stats .stat-label,
.stat-label { color: #735f49 !important; line-height: 1.45; }
.story-cta,
.btn-brown {
  background: linear-gradient(135deg, #6f4b20, #b28640) !important;
  color: #fffaf0 !important;
  border: none !important;
  box-shadow: 0 12px 32px rgba(90, 57, 24, .22) !important;
}

.story-chapter {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  margin: clamp(48px, 8vw, 92px) 0;
}
.story-chapter:nth-of-type(even) { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
.story-copy h3,
.story-table-copy h3 {
  color: #332416;
  font-size: clamp(1.7rem, 4vw, 3.2rem);
  line-height: 1.18;
  margin: 0 0 22px;
  letter-spacing: -0.04em;
}
.story-copy p,
.story-table-copy p { color: #604b35; line-height: 2; margin: 0 0 14px; }
.story-copy blockquote {
  margin: 28px 0 0;
  padding: 22px 24px;
  border-left: 3px solid #b28640;
  color: #4f351c;
  background: rgba(255,250,240,.62);
  border-radius: 0 16px 16px 0;
  line-height: 1.9;
  font-weight: 700;
}
.story-note {
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(178, 134, 64, .12);
  color: #775832;
  font-size: .86rem;
  line-height: 1.7;
}
.story-photo figcaption,
.story-placeholder figcaption {
  margin-top: 10px;
  color: #7d6a55;
  font-size: .82rem;
  line-height: 1.5;
}
.story-photo-large img { aspect-ratio: 3 / 2; }
.story-photo-tall img { aspect-ratio: 4 / 5; filter: sepia(.18) saturate(.9) contrast(1.03); }

.story-before-today {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.story-placeholder {
  margin: 0;
  min-height: 260px;
  border-radius: 22px;
  border: 1px dashed rgba(122, 86, 41, .34);
  background:
    linear-gradient(135deg, rgba(255,250,240,.72), rgba(218,197,165,.66)),
    repeating-linear-gradient(-45deg, rgba(125,88,40,.045), rgba(125,88,40,.045) 8px, transparent 8px, transparent 16px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #8c6a35;
  text-align: center;
  padding: 22px;
}
.story-placeholder span { font-weight: 900; letter-spacing: .16em; font-size: .86rem; }
.story-collage {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
}
.story-collage .story-photo-tall { grid-row: 1 / span 2; margin: 0; }
.story-collage .story-detail { min-height: 170px; }

.story-table-hero {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  margin: clamp(56px, 9vw, 110px) 0;
  min-height: clamp(420px, 58vw, 680px);
  background: #2f2115;
  box-shadow: 0 26px 80px rgba(56, 36, 18, .24);
}
.story-table-image {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(47,33,21,.86) 0%, rgba(47,33,21,.52) 42%, rgba(47,33,21,.12) 100%),
    url('/images/hero-bg-namsan-cutlet.jpg?v=20260904');
  background-size: cover;
  background-position: center;
  filter: sepia(.13) saturate(.94) contrast(1.05);
}
.story-table-copy {
  position: relative;
  z-index: 1;
  max-width: 540px;
  padding: clamp(32px, 7vw, 72px);
}
.story-table-copy h3,
.story-table-copy p { color: #fff3de; }
.story-table-copy .story-eyebrow { color: #d9b66e; }
.story-owners { min-height: 360px; }

.brand-faq-wrap {
  border-top: 1px dashed rgba(125, 88, 40, .24) !important;
}

@media (min-width: 900px) {
  .brand-story-short { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) !important; }
}
@media (max-width: 899px) {
  .story-page-head { text-align: left; margin-bottom: 34px; }
  .story-chapter,
  .story-chapter:nth-of-type(even) { grid-template-columns: 1fr; margin: 44px 0; }
  .story-before-today { grid-template-columns: 1fr; }
  .story-collage { grid-template-columns: 1fr; grid-template-rows: auto; }
  .story-collage .story-photo-tall { grid-row: auto; }
  .story-table-hero { border-radius: 22px; min-height: auto; }
  .story-table-image { position: relative; display: block; height: 310px; background-image: url('/images/hero-bg-namsan-cutlet.jpg?v=20260904'); }
  .story-table-copy { padding: 26px 22px 30px; background: #372719; max-width: none; }
  .brand-stats { grid-template-columns: 1fr !important; }
  .story-placeholder { min-height: 210px; }
}


/* ============================================================
   PATCH: GPT reference brand story photo layout 20260904
   첨부 사진을 GPT가 제안한 좌측 텍스트 + 우측 사진 카드 구성으로 배치
============================================================ */
body.page-brand #brand-story {
  background: #f4edde !important;
}
body.page-brand .story-chapter {
  align-items: center;
}
body.page-brand .story-gpt-place,
body.page-brand .story-gpt-philosophy {
  grid-template-columns: minmax(280px, .82fr) minmax(0, 1.45fr) !important;
  gap: clamp(28px, 5vw, 70px);
  padding: clamp(18px, 3vw, 28px) 0;
}
.story-photo-pair {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.story-photo-card {
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(255,250,240,.92);
  box-shadow: 0 18px 46px rgba(66,45,24,.13);
}
.story-photo-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  object-position: center;
}
.story-photo-card figcaption {
  padding: 14px 18px 17px;
  margin: 0;
  background: rgba(255,250,240,.94);
  border-top: 1px solid rgba(132, 94, 45, .12);
}
.story-photo-card figcaption strong {
  display: block;
  margin-bottom: 6px;
  color: #8b642c;
  font-size: .74rem;
  letter-spacing: .18em;
}
.story-photo-card figcaption span {
  color: #604a32;
  font-size: .88rem;
}
.story-gpt-collage {
  display: grid !important;
  grid-template-columns: minmax(0, 1.18fr) minmax(220px, .82fr);
  grid-template-rows: 1fr 1fr;
  gap: 18px;
}
.story-photo-main-food {
  grid-row: 1 / span 2;
  margin: 0;
}
.story-photo-main-food img {
  width: 100%;
  height: 100%;
  min-height: 430px;
  aspect-ratio: 1.15 / 1;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 18px 46px rgba(66,45,24,.13);
}
.story-photo-overlay-card {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  min-height: 205px;
  box-shadow: 0 18px 46px rgba(66,45,24,.13);
}
.story-photo-overlay-card img {
  width: 100%;
  height: 100%;
  min-height: 205px;
  object-fit: cover;
  border-radius: 18px;
}
.story-photo-overlay-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(50,34,20,.56), rgba(50,34,20,.08));
}
.story-photo-overlay-card figcaption {
  position: absolute;
  left: 20px;
  bottom: 18px;
  z-index: 1;
  color: #fff7e9;
  font-weight: 700;
  line-height: 1.55;
  font-size: .95rem;
  text-shadow: 0 2px 8px rgba(0,0,0,.24);
}
.story-table-image {
  background-image:
    linear-gradient(90deg, rgba(47,33,21,.86) 0%, rgba(47,33,21,.52) 42%, rgba(47,33,21,.12) 100%),
    url('/images/brand/story/07-signature-table.webp?v=20260904b') !important;
}
.story-copy .story-eyebrow + h3 {
  font-weight: 800;
}
.story-copy p + p {
  margin-top: 8px;
}
@media (max-width: 899px) {
  body.page-brand .story-gpt-place,
  body.page-brand .story-gpt-philosophy {
    grid-template-columns: 1fr !important;
  }
  .story-photo-pair,
  .story-gpt-collage {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }
  .story-photo-main-food { grid-row: auto; }
  .story-photo-main-food img { min-height: 300px; aspect-ratio: 4 / 3; }
  .story-photo-overlay-card,
  .story-photo-overlay-card img { min-height: 210px; }
}


/* ============================================================
   PATCH: OUR TABLE natural Korean line breaks 20260904
   긴 한글 제목이 한 글자 단위로 떨어지지 않도록 폭/줄바꿈 보정
============================================================ */
.story-table-copy {
  max-width: min(680px, 62%) !important;
}
.story-table-copy h3 {
  font-size: clamp(2.15rem, 4.15vw, 4.05rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.055em;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  text-wrap: balance;
}
.story-table-copy p {
  max-width: 580px;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}
@media (max-width: 899px) {
  .story-table-copy {
    max-width: none !important;
  }
  .story-table-copy h3 {
    font-size: clamp(1.85rem, 8vw, 2.65rem) !important;
    line-height: 1.18 !important;
  }
}


/* ============================================================
   PATCH: Portrait bibimbap no-crop philosophy photo 20260904
   세로 산채비빔밥 사진이 잘리지 않도록 좌측 메인 카드만 contain 처리
============================================================ */
.story-photo-portrait-food {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 430px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,250,240,.86), rgba(226,211,186,.72) 58%, rgba(174,130,67,.18)),
    #efe4d3;
  box-shadow: 0 18px 46px rgba(66,45,24,.13);
  overflow: hidden;
}
.story-photo-portrait-food img {
  width: auto !important;
  height: min(640px, 100%) !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 16px !important;
  box-shadow: 0 14px 36px rgba(45,31,18,.16);
}
@media (max-width: 899px) {
  .story-photo-portrait-food {
    min-height: auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }
  .story-photo-portrait-food img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
  }
}


/* ============================================================
   PATCH: Sitewide two tastes USP 20260904
   전체 메시지: 남산돈까스 + 산채비빔밥을 한 상에
============================================================ */
.hero-bg-slide-1,
.hero-bg-slide-2,
.hero-bg-slide-3,
.hero-bg-slide-4 {
  background-image: url('/images/brand/story/07-signature-table.webp?v=20260904b') !important;
  background-position: center 52% !important;
}
.hero-deco { display: none !important; }
.hero-badge { color:#f7e5bd !important; border-color: rgba(222,185,112,.36) !important; background: rgba(57,37,21,.34) !important; }
.hero-title, .hero-title span { word-break: keep-all !important; overflow-wrap: normal !important; }
.hero-title .hero-title-accent { color:#fff3dd !important; -webkit-text-fill-color: initial !important; background:none !important; }
.hero-subtitle, .hero-desc { word-break: keep-all !important; }
.menu-usp-head { text-align:center; max-width: 860px; margin: 0 auto 36px; }
.menu-usp-head .section-title { word-break: keep-all; }
.menu-tabs { gap: 10px !important; align-items: stretch; }
.menu-tab { display:flex; flex-direction:column; gap:4px; min-width: 148px; line-height:1.25; border-color: rgba(126,88,39,.22) !important; }
.menu-tab strong { font-size:.72rem; letter-spacing:.12em; color: inherit; }
.menu-tab span { font-size:.78rem; font-weight:700; }
.usp-menu-grid .menu-card-featured { grid-column: span 2; display:grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.usp-menu-grid .menu-card-featured .menu-card-image { height:100%; min-height:310px; }
.usp-menu-grid .menu-card-featured .menu-card-body { padding: clamp(20px,3vw,34px); display:flex; flex-direction:column; justify-content:center; }
.usp-menu-grid .menu-card-featured .menu-card-title { font-size: clamp(1.35rem,2.8vw,2.15rem); word-break: keep-all; }
.usp-menu-grid .menu-card-featured .menu-card-desc { font-size: 1rem; line-height:1.9; color:#5f4b36; }
.audience-grid { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:18px; margin: 34px 0 54px; }
.audience-card, .ingredient-card, .final-cta {
  background: rgba(255,250,240,.76); border:1px solid rgba(126,88,39,.18); border-radius:22px; box-shadow:0 16px 42px rgba(70,46,22,.09);
}
.audience-card { padding: 28px 24px; }
.audience-card h3 { color:#3a2818; font-size: clamp(1.25rem,2vw,1.7rem); line-height:1.35; margin-bottom:14px; word-break: keep-all; }
.audience-card p { color:#65513d; line-height:1.85; }
.ingredient-proof { display:grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap:30px; align-items:center; margin-top: 30px; }
.ingredient-grid { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:14px; }
.ingredient-card { padding: 24px 22px; }
.ingredient-card strong { display:block; color:#6f4b20; font-size:1.1rem; margin-bottom:8px; }
.ingredient-card span { color:#65513d; }
.final-cta { text-align:center; padding: clamp(28px,5vw,52px); margin-bottom:34px; }
.final-cta h3 { color:#332416; font-size:clamp(1.7rem,3vw,2.55rem); margin-bottom:12px; word-break:keep-all; }
.final-cta p { color:#604b35; margin-bottom:22px; }
.final-cta .hero-actions { justify-content:center; }
@media (max-width: 899px) {
  .usp-menu-grid .menu-card-featured { grid-column: auto; grid-template-columns: 1fr; }
  .usp-menu-grid .menu-card-featured .menu-card-image { min-height:220px; height:220px; }
  .audience-grid, .ingredient-proof, .ingredient-grid { grid-template-columns:1fr; }
  .menu-tab { min-width: 132px; }
}


/* ============================================================
   PATCH: Philosophy sesame-oil portrait focus 20260904
   참기름 세로 사진이 잘리지 않고 따뜻한 여백 안에 보이도록 조정
============================================================ */
.story-gpt-philosophy .story-photo-portrait-food img {
  max-height: 660px !important;
  object-fit: contain !important;
  object-position: center !important;
}
.story-gpt-philosophy .story-photo-portrait-food {
  background:
    radial-gradient(circle at 58% 44%, rgba(255,248,232,.92), rgba(230,211,178,.76) 62%, rgba(178,130,62,.16)),
    #f0e5d3 !important;
}

/* Header Instagram CTA */
.header-instagram-link {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.header-instagram-link .fab {
  font-size: 1rem;
  line-height: 1;
}

/* Sidebar Instagram CTA */
.sidebar-instagram-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.sidebar-instagram-link .fab,
.sidebar-nav .fab,
.mobile-nav .fab {
  font-size: 1rem;
  line-height: 1;
  margin-right: 6px;
}