/* ============================================================
   JOA HOTEL — 전체 스타일시트 v5
   Color Palette:
     Navy Dark  : #0D1B2A
     Navy       : #1A2E44
     White      : #FFFFFF
     Silver     : #B0B8C1
     Gold       : #C9A96E
   ============================================================ */

:root {
  --navy-dark   : #0D1B2A;
  --navy        : #1A2E44;
  --navy-light  : #1E3A52;
  --silver      : #B0B8C1;
  --silver-light: #D6DBE0;
  --silver-ultra: #F0F2F4;
  --gold        : #C9A96E;
  --gold-light  : #DFC08A;
  --white       : #FFFFFF;
  --off-white   : #F8F9FA;
  --text-dark   : #1A1A2E;
  --text-mid    : #4A5568;
  --text-light  : #718096;
  --border      : #E2E8F0;
  --shadow-sm   : 0 2px 8px rgba(13,27,42,.08);
  --shadow-md   : 0 4px 20px rgba(13,27,42,.12);
  --shadow-lg   : 0 8px 40px rgba(13,27,42,.18);
  --radius-sm   : 4px;
  --radius-md   : 8px;
  --radius-lg   : 16px;
  --transition  : all .3s cubic-bezier(.4,0,.2,1);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; font-size: 16px; }
body  {
  font-family: 'Noto Sans KR', sans-serif;
  color: var(--text-dark);
  background: var(--white);
  line-height: 1.7;
  overflow-x: hidden;
}
img   { max-width: 100%; height: auto; display: block; }
a     { text-decoration: none; color: inherit; transition: var(--transition); }
ul    { list-style: none; }

/* ============================================================
   HEADER
   ============================================================ */
#header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  transition: var(--transition);
  background: transparent;
}
#header.scrolled {
  background: var(--navy-dark);
  box-shadow: 0 2px 30px rgba(0,0,0,.35);
}
/* 히어로가 흰 배경이므로 헤더 초기 상태 = 네이비 */
#header.hero-visible {
  background: var(--navy-dark);
}

.nav-container {
  max-width: 1400px; margin: 0 auto; padding: 0 2rem;
  height: 80px; display: flex; align-items: center; justify-content: space-between;
}
.nav-logo { display: flex; flex-direction: column; line-height: 1; cursor: pointer; }
.logo-main {
  font-family: 'Playfair Display', serif; font-size: 1.5rem;
  font-weight: 700; letter-spacing: .15em; color: var(--white);
}
.logo-sub { font-size: .7rem; letter-spacing: .2em; color: var(--gold); font-weight: 500; }

.nav-menu { display: flex; align-items: center; gap: .25rem; }
.nav-menu li a {
  color: rgba(255,255,255,.85); font-size: .88rem; font-weight: 500;
  letter-spacing: .03em; padding: .5rem .9rem;
  border-radius: var(--radius-sm); transition: var(--transition);
}
.nav-menu li a:hover { color: var(--gold); }
.nav-cta a {
  background: var(--gold) !important; color: var(--navy-dark) !important;
  font-weight: 700 !important; padding: .55rem 1.1rem !important;
  border-radius: var(--radius-md) !important;
}
.nav-cta a:hover {
  background: var(--gold-light) !important; transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(201,169,110,.4) !important;
}
.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 5px;
}
.nav-toggle span { display: block; width: 25px; height: 2px; background: var(--white); transition: var(--transition); }

/* ============================================================
   HERO — 배경 이미지 없음 / 순수 네이비 텍스트 히어로
   ============================================================ */
.hero-section {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(160deg, var(--navy-dark) 0%, #112030 50%, var(--navy) 100%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

/* 배경 장식 — 텍스처 느낌의 원형 그라데이션 */
.hero-section::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 40%, rgba(201,169,110,.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 70%, rgba(30,58,82,.4) 0%, transparent 60%);
  pointer-events: none;
}

/* 배경 패턴 — 미세한 도트 */
.hero-section::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.hero-inner {
  position: relative; z-index: 2;
  width: 100%; max-width: 1200px;
  margin: 0 auto; padding: 10rem 2rem 6rem;
  display: flex; flex-direction: column; align-items: center;
  gap: 4rem;
}

/* 텍스트 블록 */
.hero-text-block { text-align: center; max-width: 860px; }

.hero-eyebrow {
  display: inline-block;
  font-size: .82rem; font-weight: 600; letter-spacing: .3em;
  color: var(--gold); text-transform: uppercase;
  margin-bottom: 1.75rem;
  padding: .4rem 1.4rem;
  border: 1px solid rgba(201,169,110,.35);
  border-radius: 50px;
  background: rgba(201,169,110,.08);
}

.hero-title {
  display: flex; flex-direction: column; align-items: center;
  gap: .2rem; margin-bottom: 1.75rem;
  line-height: 1.1;
}
.hero-title-thin {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 300; color: rgba(255,255,255,.75);
  letter-spacing: .1em;
}
.hero-title-bold {
  font-family: 'Playfair Display', serif;
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 700; color: var(--white);
  letter-spacing: .05em;
}

.hero-subtitle {
  font-size: clamp(.95rem, 1.5vw, 1.1rem);
  color: rgba(255,255,255,.65);
  line-height: 1.9; margin-bottom: 2.5rem; font-weight: 300;
}

.hero-tags {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .65rem; margin-bottom: 3rem;
}
.hero-tags span {
  display: inline-flex; align-items: center; gap: .45rem;
  color: rgba(255,255,255,.85); font-size: .83rem; font-weight: 500;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
  padding: .45rem 1.1rem; border-radius: 50px;
  transition: var(--transition);
}
.hero-tags span:hover {
  background: rgba(201,169,110,.15);
  border-color: rgba(201,169,110,.4);
  color: var(--gold);
}
.hero-tags span i { color: var(--gold); font-size: .8rem; }

.hero-btns {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem;
}

/* 버튼 공용 */
.btn-primary {
  display: inline-flex; align-items: center; gap: .55rem;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--navy-dark);
  font-size: .95rem; font-weight: 700;
  padding: .95rem 2.2rem; border: none;
  border-radius: var(--radius-md); cursor: pointer;
  transition: var(--transition); font-family: 'Noto Sans KR', sans-serif;
  letter-spacing: .02em;
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(201,169,110,.45);
}
.btn-secondary {
  display: inline-flex; align-items: center; gap: .55rem;
  background: rgba(255,255,255,.08);
  color: var(--white); font-size: .95rem; font-weight: 500;
  padding: .95rem 2.2rem;
  border: 1.5px solid rgba(255,255,255,.3);
  border-radius: var(--radius-md); cursor: pointer;
  transition: var(--transition); font-family: 'Noto Sans KR', sans-serif;
  letter-spacing: .02em;
}
.btn-secondary:hover {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.6);
  transform: translateY(-3px);
}
.btn-outline {
  display: inline-flex; align-items: center; gap: .55rem;
  background: transparent; color: rgba(255,255,255,.65);
  font-size: .95rem; font-weight: 500;
  padding: .95rem 2.2rem;
  border: 1.5px solid rgba(255,255,255,.15);
  border-radius: var(--radius-md); cursor: pointer;
  transition: var(--transition); font-family: 'Noto Sans KR', sans-serif;
  letter-spacing: .02em;
}
.btn-outline:hover {
  color: var(--white);
  border-color: rgba(255,255,255,.4);
  background: rgba(255,255,255,.06);
  transform: translateY(-3px);
}

/* 히어로 정보 카드 행 */
.hero-info-cards {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  overflow: hidden;
  width: 100%; max-width: 900px;
}
.hi-card {
  flex: 1; min-width: 120px;
  display: flex; flex-direction: column; align-items: center;
  gap: .35rem; padding: 1.6rem 1rem;
  background: rgba(255,255,255,.04);
  transition: var(--transition);
}
.hi-card:hover { background: rgba(201,169,110,.1); }
.hi-card > i { color: var(--gold); font-size: 1.1rem; }
.hi-card .hi-label { font-size: .7rem; color: var(--silver); letter-spacing: .12em; text-transform: uppercase; }
.hi-card strong { font-size: .92rem; color: var(--white); font-weight: 600; }
.hi-card-cta { background: rgba(201,169,110,.08); }
.hi-card-cta strong a { color: var(--gold); font-weight: 700; }
.hi-card-cta strong a:hover { color: var(--gold-light); }

/* 세탁/건조기 안내 — 카드 하단 풀폭 배너 */
.hi-laundry {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  padding: 1rem 1.5rem;
  background: rgba(201,169,110,.1);
  border-top: 1px solid rgba(201,169,110,.2);
}
.hi-laundry i {
  color: var(--gold); font-size: 1.1rem; flex-shrink: 0;
}
.hi-laundry span {
  color: var(--gold);
  font-size: .92rem; font-weight: 700;
  letter-spacing: .04em;
}

/* 스크롤 유도 */
.hero-scroll {
  position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%);
  z-index: 3; display: flex; flex-direction: column; align-items: center; gap: .5rem;
  cursor: pointer; color: rgba(255,255,255,.45);
  font-size: .6rem; letter-spacing: .25em; font-weight: 500;
  transition: var(--transition);
}
.hero-scroll:hover { color: rgba(255,255,255,.75); }
.scroll-line {
  width: 1px; height: 44px;
  background: linear-gradient(to bottom, rgba(255,255,255,.45), transparent);
  animation: scrollPulse 2.2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { transform: scaleY(1); opacity: .8; }
  50%       { transform: scaleY(.45); opacity: .2; }
}

/* ============================================================
   SECTION COMMONS
   ============================================================ */
.section-container { max-width: 1300px; margin: 0 auto; padding: 0 2rem; }
.section-label {
  font-family: 'Playfair Display', serif; font-size: .75rem; font-weight: 600;
  letter-spacing: .3em; color: var(--gold); text-transform: uppercase; margin-bottom: .75rem;
}
.section-title {
  font-size: clamp(2rem, 4vw, 3rem); font-weight: 700;
  color: var(--navy-dark); line-height: 1.2; letter-spacing: -.02em;
}
.section-divider {
  width: 56px; height: 3px;
  background: linear-gradient(to right, var(--gold), var(--gold-light));
  margin: 1.5rem 0; border-radius: 2px;
}
.center-divider { margin: 1.5rem auto; }
.section-desc {
  font-size: 1rem; color: var(--text-mid); line-height: 1.8;
  text-align: center; max-width: 750px; margin: 0 auto;
}
.section-desc strong { color: var(--navy-dark); }
.section-desc-left { font-size: 1rem; color: var(--text-mid); line-height: 1.8; }
.section-header.center { text-align: center; }
.section-header { margin-bottom: 3rem; }

/* ============================================================
   ABOUT
   ============================================================ */
.about-section { padding: 7rem 0; background: var(--off-white); }
.about-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: center;
}
.about-desc { font-size: 1rem; color: var(--text-mid); line-height: 1.9; margin-bottom: 1rem; }
.about-quote {
  font-style: italic; color: var(--navy); font-size: 1.1rem;
  border-left: 3px solid var(--gold); padding-left: 1.5rem;
  margin: 2rem 0; font-weight: 500;
}
.about-features { display: flex; flex-direction: column; gap: 1.2rem; margin-top: 2rem; }
.feature-item { display: flex; align-items: flex-start; gap: 1rem; }
.feature-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
}
.feature-icon i { color: var(--gold); font-size: 1rem; }
.feature-text strong { display: block; font-weight: 600; color: var(--navy-dark); font-size: .95rem; margin-bottom: .2rem; }
.feature-text span  { font-size: .85rem; color: var(--text-light); }

.about-images { display: flex; flex-direction: column; gap: 1rem; }
.about-img-wrap {
  width: 100%; height: 420px;
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg);
}
.about-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 40%;
  transition: transform .6s ease;
  filter: contrast(1.04) brightness(1.02) saturate(1.04);
}
.about-img-wrap:hover img { transform: scale(1.03); }

.about-stats {
  display: flex; justify-content: space-around;
  background: var(--navy-dark); border-radius: var(--radius-lg); padding: 1.6rem;
}
.stat-item { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.stat-number {
  font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 700; color: var(--gold);
}
.stat-label { font-size: .75rem; color: var(--silver); letter-spacing: .1em; }

/* ============================================================
   GALLERY — 작품 감상형 레이아웃 (핵심)
   ============================================================ */
.gallery-section {
  background: var(--navy-dark);
  padding: 6rem 0 7rem;
}

/* 갤러리 헤더 */
.gallery-header {
  text-align: center;
  padding: 0 2rem 4rem;
  max-width: 900px; margin: 0 auto;
}
.gold-label { color: var(--gold) !important; }
.gallery-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  font-weight: 700; color: var(--white);
  letter-spacing: .02em; line-height: 1.2;
}
.gallery-divider {
  width: 56px; height: 2px;
  background: linear-gradient(to right, var(--gold), var(--gold-light));
  margin: 1.5rem auto; border-radius: 2px;
}
.gallery-subtitle {
  font-size: 1rem; color: var(--silver);
  letter-spacing: .06em; font-weight: 300;
}

/* ── 아트보드 컨테이너 ── */
.gallery-artboard {
  max-width: 1320px; margin: 0 auto;
  padding: 0 2.5rem;
  display: flex; flex-direction: column;
  gap: 2.5rem;          /* 행 사이 여백 */
}

/* ── 공통 행 ── */
.art-row { width: 100%; }

/* 1장 풀 와이드 */
.art-row-full { }

/* 2장 나란히 */
.art-row-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}

/* ── figure 공통 ── */
.art-fig {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #071018;
  box-shadow: 0 8px 40px rgba(0,0,0,.5);
  cursor: default;
  transition: box-shadow .4s ease, transform .4s ease;
}
.art-fig:hover {
  box-shadow: 0 16px 60px rgba(0,0,0,.7);
  transform: translateY(-4px);
}

/* ── 이미지 ── */
.art-fig img {
  width: 100%;
  display: block;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.25,.46,.45,.94),
              filter .5s ease;
  filter: brightness(1.0) contrast(1.05) saturate(1.08);
}
.art-fig:hover img {
  transform: scale(1.04);
  filter: brightness(1.04) contrast(1.06) saturate(1.1);
}

/* ── 풀 와이드 이미지 높이 ── */
.art-row-full .art-fig img {
  height: 580px;
  object-position: center center;
}
/* 전경 사진은 건물 중심 */
.art-fig-exterior img {
  object-position: center 38%;
}

/* ── 듀오 이미지 높이 ── */
.art-row-duo .art-fig img {
  height: 480px;
  object-position: center center;
}

/* ── 캡션 ── */
.art-fig figcaption {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top,
    rgba(5,15,28,.92) 0%,
    rgba(5,15,28,.55) 50%,
    transparent 100%
  );
  color: var(--white);
  padding: 3rem 1.8rem 1.4rem;
  font-size: .9rem;
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1.5;
  pointer-events: none;
  transform: translateY(0);
  transition: padding .4s ease;
}
.art-fig:hover figcaption { padding-bottom: 1.8rem; }

.fig-badge {
  display: inline-block;
  background: var(--gold);
  color: var(--navy-dark);
  font-size: .65rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  padding: .22rem .75rem;
  border-radius: 3px;
  margin-bottom: .45rem;
  display: block; width: fit-content;
}

/* ============================================================
   ROOMS — 텍스트 전용 카드
   ============================================================ */
.rooms-section { padding: 7rem 0; background: var(--white); }

.room-cards-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 2rem; margin-bottom: 3rem;
}
.room-text-card {
  background: var(--off-white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 2rem;
  transition: var(--transition);
}
.room-text-card:hover {
  border-color: var(--navy);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}
.room-text-card-vip {
  background: linear-gradient(135deg, var(--navy-dark) 0%, #1A2E44 100%);
  border-color: rgba(201,169,110,.35);
}
.room-text-card-vip:hover { border-color: var(--gold); }

.rtc-top { margin-bottom: 1.25rem; }
.rtc-badge {
  display: inline-block; background: var(--navy-dark); color: var(--gold);
  font-size: .68rem; font-weight: 700; letter-spacing: .25em;
  padding: .25rem .75rem; border-radius: var(--radius-sm); margin-bottom: .75rem;
}
.rtc-badge-gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--navy-dark);
}
.rtc-title { font-size: 1.5rem; font-weight: 700; color: var(--navy-dark); margin-bottom: .25rem; }
.room-text-card-vip .rtc-title { color: var(--white); }
.rtc-tagline { font-size: .9rem; color: var(--text-mid); }
.room-text-card-vip .rtc-tagline { color: var(--gold); }

.rtc-specs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.rtc-specs span {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .82rem; color: var(--text-mid);
  background: var(--white); border: 1px solid var(--border);
  padding: .3rem .7rem; border-radius: 50px;
}
.rtc-specs span i { color: var(--gold); }
.room-text-card-vip .rtc-specs span {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.15);
  color: var(--silver-light);
}

.rtc-desc {
  font-size: .92rem; color: var(--text-mid); line-height: 1.85;
  margin-bottom: 1.25rem; padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.room-text-card-vip .rtc-desc {
  color: rgba(255,255,255,.72);
  border-bottom-color: rgba(255,255,255,.1);
}

.rtc-amenities {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: .4rem; margin-bottom: 1.25rem;
}
.rtc-amenities span {
  display: flex; align-items: center; gap: .4rem;
  font-size: .82rem; color: var(--text-mid);
}
.rtc-amenities span i { color: var(--gold); font-size: .65rem; }
.room-text-card-vip .rtc-amenities span { color: var(--silver-light); }

.rtc-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.rtc-tags span {
  font-size: .78rem; font-weight: 500; color: var(--navy);
  background: var(--white); border: 1px solid var(--border);
  padding: .25rem .7rem; border-radius: 50px;
}
.room-text-card-vip .rtc-tags span {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.15);
  color: var(--silver-light);
}

.vip-call-btn {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; margin-top: 1.25rem;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--navy-dark); font-size: .9rem; font-weight: 700;
  padding: .85rem; border-radius: var(--radius-md); transition: var(--transition);
}
.vip-call-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(201,169,110,.4); }

.rooms-cta {
  text-align: center; padding: 2.5rem;
  background: var(--off-white); border-radius: var(--radius-lg); border: 1px solid var(--border);
}
.rooms-cta p { font-size: 1rem; color: var(--text-mid); margin-bottom: 1rem; }
.rooms-cta-btn {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--navy-dark); color: var(--white);
  font-size: 1rem; font-weight: 600; padding: .9rem 2.5rem;
  border-radius: var(--radius-md); transition: var(--transition);
}
.rooms-cta-btn:hover {
  background: var(--navy);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ============================================================
   AMENITIES BANNER
   ============================================================ */
.amenities-banner {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  padding: 2.5rem 0;
  border-top: 1px solid rgba(201,169,110,.25);
}
.amenities-container {
  max-width: 1300px; margin: 0 auto; padding: 0 2rem;
  display: flex; justify-content: space-around; flex-wrap: wrap; gap: 1rem;
}
.amenity-badge {
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  color: var(--white);
}
.amenity-badge i    { font-size: 1.5rem; color: var(--gold); }
.amenity-badge span { font-size: .8rem; font-weight: 500; letter-spacing: .05em; color: var(--silver-light); }

/* ============================================================
   NOTICE
   ============================================================ */
.notice-section { padding: 7rem 0; background: var(--off-white); }

/* 공지사항 헤더 — 제목 + 글쓰기 버튼 가로 배치 */
.notice-section-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 1.5rem; margin-bottom: 3rem;
}
.notice-header-left  { flex: 1; }
.notice-header-right { flex-shrink: 0; padding-bottom: .25rem; }

/* 글쓰기 버튼 */
.notice-write-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--navy-dark); color: var(--white);
  font-size: .88rem; font-weight: 600; letter-spacing: .04em;
  padding: .75rem 1.5rem; border: none;
  border-radius: var(--radius-md); cursor: pointer;
  transition: var(--transition); font-family: 'Noto Sans KR', sans-serif;
}
.notice-write-btn:hover {
  background: var(--navy);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(13,27,42,.2);
}
.notice-write-btn i { color: var(--gold); }

.notice-layout  { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.notice-list    { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.notice-loading { padding: 3rem; text-align: center; color: var(--text-light); font-size: .9rem; }
.notice-loading i { color: var(--gold); margin-right: .5rem; }
.notice-item {
  padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: var(--transition);
  display: flex; flex-direction: column; gap: .3rem;
}
.notice-item:last-child { border-bottom: none; }
.notice-item:hover { background: var(--silver-ultra); }
.notice-item.active { background: var(--navy-dark); }
.notice-item.active .notice-item-title { color: var(--gold); }
.notice-item.active .notice-item-date  { color: var(--silver); }
.notice-item.active .notice-cat-badge  { background: rgba(255,255,255,.15); color: var(--silver-light); }
.notice-item-header { display: flex; align-items: center; gap: .5rem; }
.notice-pin-badge {
  background: var(--gold); color: var(--navy-dark);
  font-size: .6rem; font-weight: 700; padding: .15rem .5rem;
  border-radius: 2px; letter-spacing: .05em; flex-shrink: 0;
}
.notice-cat-badge {
  font-size: .7rem; color: var(--text-light); background: var(--silver-ultra);
  padding: .1rem .5rem; border-radius: 2px; flex-shrink: 0;
}
.notice-item-title { font-size: .9rem; font-weight: 600; color: var(--navy-dark); line-height: 1.4; }
.notice-item-date  { font-size: .75rem; color: var(--text-light); }
.notice-pagination { display: flex; justify-content: center; gap: .5rem; padding: 1rem; }
.page-btn {
  width: 32px; height: 32px; border: 1px solid var(--border);
  background: var(--white); color: var(--text-mid); font-size: .8rem;
  border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition);
  font-family: 'Noto Sans KR', sans-serif;
}
.page-btn.active { background: var(--navy-dark); color: var(--white); border-color: var(--navy-dark); }
.page-btn:hover:not(.active) { background: var(--silver-ultra); }
.notice-detail-wrap { position: sticky; top: 100px; }
.notice-detail-placeholder {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 4rem 2rem; text-align: center; color: var(--text-light); box-shadow: var(--shadow-sm);
}
.notice-detail-placeholder i {
  font-size: 3rem; color: var(--silver-light); margin-bottom: 1rem; display: block;
}
.notice-detail-placeholder p { font-size: .9rem; }
.notice-detail-content {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 2rem; box-shadow: var(--shadow-sm);
  animation: fadeInUp .3s ease;
}
.notice-detail-cat {
  display: inline-block; background: var(--navy-dark); color: var(--gold);
  font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  padding: .3rem .75rem; border-radius: var(--radius-sm); margin-bottom: 1rem;
}
.notice-detail-title { font-size: 1.2rem; font-weight: 700; color: var(--navy-dark); line-height: 1.4; margin-bottom: .75rem; }
.notice-detail-date  { font-size: .8rem; color: var(--text-light); margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
.notice-detail-body  { font-size: .9rem; color: var(--text-mid); line-height: 2; white-space: pre-wrap; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   LOCATION
   ============================================================ */
.location-section { padding: 7rem 0; background: var(--white); }
.location-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: start; }
.location-grid-single { max-width: 720px; }
.location-map  { height: 500px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.location-card { background: var(--off-white); border-radius: var(--radius-lg); padding: 2rem; margin-bottom: 1rem; }
.location-item { display: flex; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--border); }
.location-item:last-child { border-bottom: none; }
.loc-icon {
  width: 44px; height: 44px; background: var(--navy-dark); border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.loc-icon i { color: var(--gold); font-size: 1rem; }
.loc-text strong { display: block; font-size: .8rem; font-weight: 700; color: var(--navy-dark); letter-spacing: .1em; text-transform: uppercase; margin-bottom: .35rem; }
.loc-text p     { font-size: .9rem; color: var(--text-mid); line-height: 1.6; }
.loc-text a     { color: var(--gold); font-weight: 600; font-size: 1.1rem; }
.loc-text small { display: block; font-size: .75rem; color: var(--text-light); margin-top: .25rem; }

.map-link-btn {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; background: var(--navy-dark); color: var(--white);
  font-size: .9rem; font-weight: 600; padding: .9rem;
  border-radius: var(--radius-md); transition: var(--transition);
  margin-bottom: .75rem; letter-spacing: .05em;
}
.map-link-btn:hover { background: var(--navy-light); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.kakao-btn       { background: #FEE500; color: #3A1D1D; }
.kakao-btn:hover { background: #F5D800; color: #3A1D1D; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: #0A1520; color: var(--white); padding: 4rem 0 2rem; }
.footer-container { max-width: 1300px; margin: 0 auto; padding: 0 2rem; }
.footer-top {
  display: grid; grid-template-columns: 2fr 1fr 1.5fr; gap: 4rem;
  padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 2rem;
}
.footer-logo    { font-family: 'Playfair Display', serif; font-size: 1.8rem; font-weight: 700; letter-spacing: .15em; color: var(--white); margin-bottom: .25rem; }
.footer-logo-ko { font-size: .75rem; letter-spacing: .25em; color: var(--gold); margin-bottom: 1rem; }
.footer-tagline { font-size: .85rem; color: var(--silver); line-height: 1.8; }
.footer-links h4, .footer-contact h4 {
  font-size: .8rem; font-weight: 700; letter-spacing: .2em;
  color: var(--gold); text-transform: uppercase; margin-bottom: 1.25rem;
}
.footer-links ul   { display: flex; flex-direction: column; gap: .6rem; }
.footer-links a    { font-size: .85rem; color: var(--silver); transition: var(--transition); }
.footer-links a:hover { color: var(--gold); padding-left: 5px; }
.footer-contact p  {
  display: flex; align-items: flex-start; gap: .65rem;
  font-size: .85rem; color: var(--silver); margin-bottom: .75rem; line-height: 1.6;
}
.footer-contact i     { color: var(--gold); margin-top: .15rem; flex-shrink: 0; }
.footer-contact a     { color: var(--white); }
.footer-contact a:hover { color: var(--gold); }
.footer-bottom    { text-align: center; }
.footer-bottom p  { font-size: .8rem; color: rgba(176,184,193,.45); }

/* ============================================================
   TOP / CALL FLOAT BUTTONS
   ============================================================ */
.top-btn {
  position: fixed; bottom: 6.5rem; right: 2rem;
  width: 48px; height: 48px; background: var(--navy-dark); color: var(--white);
  border: none; border-radius: 50%; cursor: pointer; font-size: 1rem;
  box-shadow: var(--shadow-md); transition: var(--transition);
  opacity: 0; pointer-events: none; z-index: 100;
  display: flex; align-items: center; justify-content: center;
}
.top-btn.visible { opacity: 1; pointer-events: all; }
.top-btn:hover   { background: var(--navy); transform: translateY(-3px); }

.call-float-btn {
  display: none; position: fixed; bottom: 2rem; right: 2rem;
  width: 56px; height: 56px;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--navy-dark); border-radius: 50%; font-size: 1.2rem;
  box-shadow: 0 4px 20px rgba(201,169,110,.5); z-index: 100;
  align-items: center; justify-content: center; transition: var(--transition);
}
.call-float-btn:hover { transform: scale(1.1); }

/* ============================================================
   NOTICE DETAIL — 수정/삭제 버튼
   ============================================================ */
.notice-detail-actions {
  display: flex; gap: .5rem; margin-bottom: 1.25rem;
  padding-bottom: 1.25rem; border-bottom: 1px solid var(--border);
}
.nd-edit-btn, .nd-delete-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8rem; font-weight: 600; padding: .45rem 1rem;
  border-radius: var(--radius-sm); cursor: pointer;
  transition: var(--transition); font-family: 'Noto Sans KR', sans-serif;
  border: 1px solid transparent;
}
.nd-edit-btn {
  background: var(--off-white); color: var(--navy-dark);
  border-color: var(--border);
}
.nd-edit-btn:hover { background: var(--silver-ultra); border-color: var(--navy); }
.nd-delete-btn {
  background: #FFF5F5; color: #C53030;
  border-color: #FED7D7;
}
.nd-delete-btn:hover { background: #FED7D7; }

/* ============================================================
   공지사항 작성/수정 모달
   ============================================================ */
.notice-modal-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(5,15,28,.72);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.notice-modal-overlay.active {
  opacity: 1; pointer-events: all;
}

.notice-modal {
  background: var(--white);
  border-radius: var(--radius-lg);
  width: 100%; max-width: 620px;
  max-height: 92vh; overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
  transform: translateY(24px) scale(.97);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
  scrollbar-width: thin;
}
.notice-modal-overlay.active .notice-modal {
  transform: translateY(0) scale(1);
}

/* 모달 헤더 */
.nm-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.6rem 2rem 1.3rem;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--white); z-index: 1;
}
.nm-title {
  font-size: 1.05rem; font-weight: 700; color: var(--navy-dark);
  display: flex; align-items: center; gap: .5rem;
}
.nm-title i { color: var(--gold); }
.nm-close {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  background: var(--silver-ultra); color: var(--text-mid);
  border: none; border-radius: 50%; cursor: pointer; font-size: .9rem;
  transition: var(--transition);
}
.nm-close:hover { background: var(--border); color: var(--navy-dark); }

/* 모달 바디 */
.nm-body { padding: 1.75rem 2rem; display: flex; flex-direction: column; gap: 1.25rem; }

.nm-row-flex { display: flex; align-items: flex-end; gap: 1rem; }

.nm-field { display: flex; flex-direction: column; gap: .45rem; }
.nm-label {
  font-size: .78rem; font-weight: 700; color: var(--navy-dark);
  letter-spacing: .08em; text-transform: uppercase;
}
.nm-required { color: #E53E3E; }

.nm-input, .nm-select, .nm-textarea {
  width: 100%; padding: .75rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  font-family: 'Noto Sans KR', sans-serif;
  font-size: .92rem; color: var(--text-dark);
  background: var(--white);
  transition: border-color .2s ease, box-shadow .2s ease;
  outline: none;
}
.nm-input:focus, .nm-select:focus, .nm-textarea:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(26,46,68,.1);
}
.nm-textarea {
  resize: vertical; min-height: 180px; line-height: 1.7;
}
.nm-select { appearance: none; cursor: pointer; }

.nm-char-count {
  font-size: .72rem; color: var(--text-light);
  text-align: right; margin-top: -.2rem;
}

/* 고정 체크박스 커스텀 */
.nm-field-pin { justify-content: flex-end; padding-bottom: .55rem; }
.nm-label-pin {
  display: flex; align-items: center; gap: .5rem;
  cursor: pointer; user-select: none;
  font-size: .82rem; font-weight: 600; color: var(--text-mid);
  text-transform: none; letter-spacing: 0;
}
.nm-label-pin input[type="checkbox"] { display: none; }
.nm-pin-custom {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  color: var(--silver); font-size: .8rem; transition: var(--transition);
}
.nm-label-pin input:checked + .nm-pin-custom {
  background: var(--gold); border-color: var(--gold); color: var(--navy-dark);
}

/* 모달 푸터 */
.nm-footer {
  padding: 1.2rem 2rem 1.6rem;
  border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: .75rem;
  position: sticky; bottom: 0; background: var(--white);
}
.nm-btn-cancel {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .75rem 1.5rem; border: 1.5px solid var(--border);
  background: var(--white); color: var(--text-mid);
  font-size: .88rem; font-weight: 600;
  border-radius: var(--radius-md); cursor: pointer;
  transition: var(--transition); font-family: 'Noto Sans KR', sans-serif;
}
.nm-btn-cancel:hover { background: var(--silver-ultra); }
.nm-btn-submit {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .75rem 1.8rem;
  background: linear-gradient(135deg, var(--navy-dark), var(--navy));
  color: var(--white); font-size: .88rem; font-weight: 700;
  border: none; border-radius: var(--radius-md); cursor: pointer;
  transition: var(--transition); font-family: 'Noto Sans KR', sans-serif;
}
.nm-btn-submit:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(13,27,42,.3); }
.nm-btn-submit:disabled {
  opacity: .55; cursor: not-allowed; transform: none; box-shadow: none;
}
.nm-btn-submit i { transition: var(--transition); }

/* ============================================================
   삭제 확인 모달
   ============================================================ */
.confirm-modal-overlay {
  position: fixed; inset: 0; z-index: 2100;
  background: rgba(5,15,28,.75); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.confirm-modal-overlay.active { opacity: 1; pointer-events: all; }

.confirm-modal {
  background: var(--white); border-radius: var(--radius-lg);
  width: 100%; max-width: 400px; padding: 2.5rem 2rem;
  text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.4);
  transform: scale(.93); transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.confirm-modal-overlay.active .confirm-modal { transform: scale(1); }

.cm-icon {
  width: 60px; height: 60px; margin: 0 auto 1.25rem;
  background: #FFF5F5; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.cm-icon i { font-size: 1.5rem; color: #E53E3E; }
.cm-title { font-size: 1.05rem; font-weight: 700; color: var(--navy-dark); margin-bottom: .5rem; }
.cm-desc  { font-size: .88rem; color: var(--text-mid); margin-bottom: 2rem; }
.cm-btns  { display: flex; gap: .75rem; justify-content: center; }
.cm-btn-cancel {
  flex: 1; padding: .8rem 1rem; max-width: 140px;
  background: var(--off-white); color: var(--text-mid);
  border: 1.5px solid var(--border); border-radius: var(--radius-md);
  font-size: .9rem; font-weight: 600; cursor: pointer;
  transition: var(--transition); font-family: 'Noto Sans KR', sans-serif;
}
.cm-btn-cancel:hover { background: var(--border); }
.cm-btn-delete {
  flex: 1; padding: .8rem 1rem; max-width: 140px;
  background: #E53E3E; color: var(--white);
  border: none; border-radius: var(--radius-md);
  font-size: .9rem; font-weight: 700; cursor: pointer;
  transition: var(--transition); font-family: 'Noto Sans KR', sans-serif;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
}
.cm-btn-delete:hover { background: #C53030; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(229,62,62,.4); }

/* ============================================================
   토스트 알림
   ============================================================ */
.toast-container {
  position: fixed; bottom: 7rem; left: 50%; transform: translateX(-50%);
  z-index: 3000; display: flex; flex-direction: column;
  align-items: center; gap: .5rem; pointer-events: none;
}
.toast {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--navy-dark); color: var(--white);
  font-size: .88rem; font-weight: 500; padding: .85rem 1.6rem;
  border-radius: 50px; box-shadow: 0 8px 24px rgba(0,0,0,.3);
  animation: toastIn .35s cubic-bezier(.34,1.56,.64,1) forwards;
  pointer-events: none;
}
.toast.success i { color: #68D391; }
.toast.error   i { color: #FC8181; }
.toast.info    i { color: var(--gold); }
.toast.hide      { animation: toastOut .3s ease forwards; }

@keyframes toastIn {
  from { opacity: 0; transform: translateY(16px) scale(.92); }
  to   { opacity: 1; transform: translateY(0)  scale(1); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(10px); }
}

/* ============================================================
   AOS
   ============================================================ */
[data-aos] { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
[data-aos="fade-right"] { transform: translateX(-28px); }
[data-aos="fade-left"]  { transform: translateX(28px); }
[data-aos].aos-animate  { opacity: 1; transform: translate(0); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
  .gallery-artboard { padding: 0 1.5rem; gap: 2rem; }
  .art-row-duo { gap: 2rem; }
  .art-row-full .art-fig img { height: 500px; }
  .art-row-duo .art-fig img  { height: 420px; }
}

@media (max-width: 1024px) {
  .about-grid, .location-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .notice-layout { grid-template-columns: 1fr; }
  .notice-detail-wrap { position: static; }
  .art-row-full .art-fig img { height: 440px; }
  .art-row-duo .art-fig img  { height: 360px; }
}

@media (max-width: 768px) {
  /* Nav */
  .nav-toggle { display: flex; }
  .nav-menu {
    display: none; position: fixed; top: 80px; left: 0; right: 0;
    background: var(--navy-dark); flex-direction: column;
    padding: 1rem; gap: 0; box-shadow: var(--shadow-lg);
  }
  .nav-menu.open { display: flex; }
  .nav-menu li a { display: block; padding: 1rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,.05); }

  /* Hero */
  .hero-inner { padding: 8rem 1.5rem 4rem; gap: 3rem; }
  .hero-btns  { flex-direction: column; align-items: center; }
  .btn-primary, .btn-secondary, .btn-outline { width: 100%; max-width: 300px; justify-content: center; }
  .hero-info-cards { border-radius: var(--radius-md); }
  .hi-card { min-width: 100px; padding: 1.2rem .75rem; }

  /* Gallery */
  .gallery-section { padding: 4rem 0 5rem; }
  .gallery-artboard { padding: 0 1.2rem; gap: 1.5rem; }
  .art-row-duo { grid-template-columns: 1fr; gap: 1.5rem; }
  .art-row-full .art-fig img { height: 280px; }
  .art-row-duo .art-fig img  { height: 280px; }

  /* Sections */
  .section-container { padding: 0 1.25rem; }
  .about-section, .rooms-section, .notice-section, .location-section { padding: 4.5rem 0; }

  /* Notice header */
  .notice-section-header { flex-direction: column; align-items: flex-start; }

  /* Notice modal */
  .notice-modal { max-height: 96vh; }
  .nm-body      { padding: 1.25rem 1.25rem; }
  .nm-header, .nm-footer { padding-left: 1.25rem; padding-right: 1.25rem; }
  .nm-row-flex  { flex-direction: column; gap: .75rem; }
  .nm-field-pin { justify-content: flex-start; padding-bottom: 0; }

  /* Rooms */
  .room-cards-grid { grid-template-columns: 1fr; }

  /* Footer */
  .footer-top { grid-template-columns: 1fr; gap: 2rem; }

  /* Map */
  .location-map { height: 300px; }

  /* Float call */
  .call-float-btn { display: flex; }

  /* Amenities */
  .amenities-container { gap: 1.5rem; }
  .amenity-badge { flex-basis: calc(25% - 1rem); }
}

@media (max-width: 480px) {
  .hero-title-thin { font-size: 1.5rem; }
  .hero-title-bold { font-size: 2.8rem; }
  .section-title   { font-size: 1.8rem; }
  .gallery-title   { font-size: 1.8rem; }
  .art-row-full .art-fig img { height: 230px; }
  .art-row-duo .art-fig img  { height: 230px; }
  .hi-card { min-width: 80px; }
  .amenity-badge { flex-basis: calc(33% - 1rem); }
}