@charset "UTF-8";
/* ==========================================================================
   리뉴얼 디자인 테마 — 운영 페이지용 (reserve.html · reserve-admin.html · admin.html)

   이 세 페이지는 Firebase·GitHub API 스크립트에 묶여 있어 React 리뉴얼(site/)로
   옮기지 않고, 기존 style.css 위에 이 파일을 덧씌워 리뉴얼 사이트와 같은 모습으로 맞춥니다.
   1) 기존 토큰(--accent, --ink …)을 리뉴얼 팔레트로 다시 매핑 → 기존 컴포넌트가 자동으로 따라옴
   2) 리뉴얼의 내비·서브히어로·푸터를 rn- 접두사로 이식 (기존 .nav/.footer-* 와 이름 충돌 방지)
   3) 카드·버튼·입력창 등을 리뉴얼의 유리(glass) 표면과 알약형 버튼으로 재스킨
   색을 바꾸려면 site/src/index.css 의 :root 와 아래 --rn-* 값을 함께 고치세요.
   ========================================================================== */

:root {
  /* 리뉴얼 팔레트 (site/src/index.css 와 동일) */
  --rn-bg: #faf6f2;
  --rn-main: #c9a9a0;
  --rn-point: #7c6e66;
  --rn-ink: #3e3430;
  --rn-ink-soft: #5e524c;
  --rn-blush: #efe3dc;
  --rn-sand: #e8d8ce;
  --rn-rose-deep: #a27f75;
  --rn-line: rgba(124, 110, 102, 0.18);
  --rn-glass: rgba(255, 255, 255, 0.42);
  --rn-glass-strong: rgba(255, 255, 255, 0.62);
  --rn-glass-border: rgba(255, 255, 255, 0.75);
  --rn-glass-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 30px 60px -28px rgba(124, 110, 102, 0.35);
  --rn-font-display: 'Wanted Sans Variable', 'Wanted Sans', 'Pretendard JP Variable', 'Pretendard Variable', system-ui, sans-serif;
  --rn-font-sans: 'Pretendard JP Variable', 'Pretendard JP', 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  --rn-gutter: clamp(16px, 4vw, 56px);
  --rn-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* 기존 style.css 토큰 → 리뉴얼 팔레트 */
  --accent: #7c6e66;
  --accent-hover: #645750;
  --accent-rgb: 124 110 102;
  --blue: #7c6e66;
  --ink: 62 52 48;
  --text-primary: #3e3430;
  --text-secondary: #4b403b;
  --text-tertiary: #5e524c;   /* 크림 배경 위 7.0:1 */
  --text-quiet: rgba(124, 110, 102, 0.5);
  --ink-100: #efe3dc;
  --bg: #faf6f2;
  --bg-soft: #f6efea;
  --bg-soft-2: #efe3dc;
  --border: rgba(124, 110, 102, 0.18);
  --radius-md: 20px;
  --gradient-brand: linear-gradient(90deg, #e8d8ce, #c9a9a0, #7c6e66);
  --shadow-lg: 0 30px 60px -28px rgba(124, 110, 102, 0.45);
  --container: 1220px;
  color-scheme: light;
}

body {
  background: var(--rn-bg);
  color: var(--rn-ink);
  font-family: var(--rn-font-sans);
  font-weight: 500;
  letter-spacing: 0.0057em;
  overflow-x: clip;
}
h1, h2, h3, h4 { font-family: var(--rn-font-display); color: var(--rn-ink); }
:focus-visible { outline: 2px solid var(--rn-point); outline-offset: 3px; }
::selection { background: var(--rn-main); color: var(--rn-ink); }
.container { padding: 0 var(--rn-gutter); }

/* ───── 배경 버블 (유리 표면이 흐릴 대상) ───── */
.rn-ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.rn-ambient i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55; }
.rn-ambient .a1 { width: 46vmax; height: 46vmax; left: -12vmax; top: 30vh; background: radial-gradient(circle at 35% 35%, #fff, var(--rn-main) 60%, transparent 72%); }
.rn-ambient .a2 { width: 38vmax; height: 38vmax; right: -10vmax; top: 60vh; background: radial-gradient(circle at 40% 30%, #fff, var(--rn-sand) 55%, transparent 72%); }
.rn-ambient .a3 { width: 30vmax; height: 30vmax; left: 35vw; top: -10vh; background: radial-gradient(circle at 40% 30%, #fff, var(--rn-blush) 55%, transparent 72%); }

.rn-glass {
  background: linear-gradient(140deg, var(--rn-glass-strong), var(--rn-glass));
  border: 1px solid var(--rn-glass-border);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  box-shadow: var(--rn-glass-shadow);
}

/* ───── 내비게이션 (리뉴얼 .nav 이식) ───── */
.skip-link { background: var(--rn-ink); }
.rn-nav {
  position: fixed; z-index: 50; top: 16px; left: 50%; translate: -50% 0;
  width: min(1100px, calc(100% - 32px));
  display: flex; align-items: center; gap: 24px; padding: 8px 8px 8px 18px;
  border-radius: 999px;
  transition: transform .45s var(--rn-ease);
}
.rn-nav.is-hidden { transform: translateY(-110px); }
.rn-brand { display: flex; align-items: center; gap: 10px; font-family: var(--rn-font-display); font-weight: 800; font-size: 20px; letter-spacing: -0.012em; color: var(--rn-ink); }
.rn-brand img { width: 26px; height: 30px; }
.rn-menu { display: flex; gap: 2px; margin-left: auto; }
.rn-item { position: relative; }
.rn-item > a { display: block; padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; letter-spacing: 0.0145em; color: var(--rn-ink-soft); transition: color .3s, background .3s; }
.rn-item > a:hover, .rn-item.is-open > a { color: var(--rn-ink); background: rgba(255,255,255,.6); }
.rn-item::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 14px; }
.rn-drop {
  position: absolute; top: calc(100% + 12px); left: 50%; translate: -50% -6px; min-width: 190px; padding: 8px; border-radius: 20px;
  display: grid; gap: 2px;
  background: linear-gradient(140deg, rgba(255,255,255,.88), rgba(255,255,255,.72));
  border: 1px solid var(--rn-glass-border); box-shadow: var(--rn-glass-shadow);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  opacity: 0; visibility: hidden; transition: opacity .2s, translate .25s var(--rn-ease), visibility .2s;
}
.rn-item.is-open .rn-drop { opacity: 1; visibility: visible; translate: -50% 0; }
.rn-drop a { padding: 10px 14px; border-radius: 12px; font-size: 14px; font-weight: 500; color: var(--rn-ink-soft); white-space: nowrap; transition: background .25s, color .25s; }
.rn-drop a:hover, .rn-drop a:focus-visible { background: var(--rn-blush); color: var(--rn-ink); }
.rn-cta { padding: 11px 20px; border-radius: 999px; font-family: var(--rn-font-display); font-size: 14px; font-weight: 600; letter-spacing: 0.0145em; background: var(--rn-point); color: #fff; white-space: nowrap; }
.rn-cta:hover { background: var(--accent-hover); }
.rn-progress-clip { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.rn-progress { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--rn-progress, 0));
  background: linear-gradient(90deg, var(--rn-sand), var(--rn-main), var(--rn-point)); }
.rn-burger { display: none; position: relative; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.6); }
.rn-burger i { position: absolute; left: 13px; right: 13px; height: 2px; border-radius: 2px; background: var(--rn-ink); transition: transform .35s var(--rn-ease), top .35s var(--rn-ease); }
.rn-burger i:first-child { top: 17px; }
.rn-burger i:last-child { top: 25px; }
.rn-burger[aria-expanded="true"] i:first-child { top: 21px; transform: rotate(45deg); }
.rn-burger[aria-expanded="true"] i:last-child { top: 21px; transform: rotate(-45deg); }
.rn-mnav { position: fixed; inset: 0; z-index: 45; overflow-y: auto; background: rgba(250,246,242,.86); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.rn-mnav.is-open { opacity: 1; visibility: visible; }
.rn-mnav-inner { padding: 104px 24px 40px; display: grid; gap: 8px; }
.rn-mnav-group { padding: 16px 0; border-bottom: 1px solid var(--rn-line); }
.rn-mnav-top { display: block; font-family: var(--rn-font-display); font-weight: 800; font-size: 28px; letter-spacing: -0.0236em; color: var(--rn-ink); }
.rn-mnav-sub { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }
.rn-mnav-sub a { font-size: 15px; color: var(--rn-ink-soft); padding: 4px 0; }
.rn-mnav-cta { margin-top: 20px; justify-content: center; min-height: 50px; font-size: 16px; }
@media (max-width: 960px) {
  .rn-menu { display: none; }
  .rn-cta { margin-left: auto; }
  .rn-burger { display: block; }
}

/* ───── 서브 히어로 (리뉴얼 .subhero 이식) ───── */
.rn-subhero { position: relative; min-height: max(380px, 42svh); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse at 50% 55%, var(--rn-blush), transparent 70%); }
.rn-subhero-inner { width: 100%; max-width: 1320px; margin: 0 auto; padding: 140px var(--rn-gutter) 40px; }
.rn-breadcrumb { display: flex; gap: 8px; align-items: center; font-size: 13px; letter-spacing: 0.0194em; color: var(--rn-ink-soft); margin-bottom: 18px; }
.rn-breadcrumb a:hover { color: var(--rn-ink); text-decoration: underline; text-underline-offset: 3px; }
.rn-breadcrumb [aria-current] { color: var(--rn-point); }
.rn-subhero-title { margin: 0; font-family: var(--rn-font-display); font-weight: 800; font-size: clamp(44px, 7vw, 104px); line-height: 1.05; letter-spacing: -0.045em; word-break: keep-all; }
.rn-subhero-en { margin: 10px 0 0; font-family: var(--rn-font-display); font-size: 13px; font-weight: 600; letter-spacing: .2em; color: var(--rn-point); }
.rn-subhero-lead { margin: 18px 0 0; max-width: 640px; color: var(--rn-ink-soft); font-size: 18px; line-height: 1.5; word-break: keep-all; }

/* ───── 푸터 (리뉴얼 .footer 이식) ───── */
.rn-footer { max-width: 1320px; margin: 0 auto; padding: 0 var(--rn-gutter) 48px; color: var(--rn-ink-soft); font-size: 14px; letter-spacing: 0.0145em; }
.rn-footer-top { padding-top: 56px; border-top: 1px solid var(--rn-line); display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); }
.rn-footer-logos { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.rn-footer-lockup { height: 52px; width: auto; }
.rn-footer-mju { height: 32px; width: auto; padding-left: 20px; border-left: 1px solid var(--rn-line); }
.rn-footer-brand p { margin: 0; max-width: 460px; line-height: 1.6; word-break: keep-all; text-align: left; }
.rn-footer-col h5 { margin: 4px 0 14px; font-family: var(--rn-font-display); font-size: 14px; font-weight: 700; color: var(--rn-ink); }
.rn-footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rn-footer-col a { color: var(--rn-ink-soft); transition: color .2s; }
.rn-footer-col a:hover { color: var(--rn-ink); }
.rn-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--rn-line); font-size: 13px; letter-spacing: 0.0194em; }
.rn-footer-bottom img { height: 34px; width: auto; }
@media (max-width: 860px) {
  .rn-footer-top { grid-template-columns: 1fr 1fr; }
  .rn-footer-brand { grid-column: 1 / -1; }
}
.rn-minifoot { max-width: 1220px; margin: 0 auto; padding: 32px var(--rn-gutter) 40px; font-size: 13px; color: var(--rn-ink-soft); border-top: 1px solid var(--rn-line); }

/* ───── 관리자 상단 바 (리뉴얼 내비와 같은 유리 알약) ───── */
.rn-adminbar {
  position: sticky; top: 12px; z-index: 50;
  width: min(1160px, calc(100% - 32px)); margin: 12px auto 0;
  display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 18px; border-radius: 999px;
}
.rn-adminbar .rn-brand { font-size: 18px; }
.rn-adminbar-title { padding-left: 12px; border-left: 1px solid var(--rn-line); font-size: 14px; font-weight: 600; color: var(--rn-ink-soft); white-space: nowrap; }
.rn-adminbar-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.rn-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 0; border-radius: 999px;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--rn-ink-soft); background: rgba(255,255,255,.6);
  cursor: pointer; white-space: nowrap; transition: background .25s, color .25s;
}
.rn-chip:hover { background: #fff; color: var(--rn-ink); }
.rn-chip--solid { background: var(--rn-point); color: #fff; }
.rn-chip--solid:hover { background: var(--accent-hover); color: #fff; }
@media (max-width: 720px) {
  .rn-adminbar { border-radius: 24px; flex-wrap: wrap; padding: 10px 10px 10px 16px; }
  .rn-adminbar-title { font-size: 13px; }
  .rn-adminbar-actions { margin-left: 0; width: 100%; justify-content: flex-start; }
  .rn-hide-sm { display: none; }
}

/* ───── 공통 컴포넌트 재스킨 ───── */
.eyebrow {
  font-family: var(--rn-font-display); font-size: 13px; font-weight: 600; letter-spacing: .2em;
  color: var(--rn-point); border-bottom: 0; padding: 0; margin-bottom: 14px; gap: 12px;
}
.eyebrow .dot { width: 32px; height: 1px; border-radius: 0; background: var(--rn-main); }
.section-head h2 { font-weight: 700; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.3; letter-spacing: -0.0282em; }
.section-head p { color: var(--rn-ink-soft); font-size: 16px; }
.panel-title { font-family: var(--rn-font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.012em; }
.panel-hint { color: var(--rn-ink-soft); }

.card, .glass-card {
  background: linear-gradient(140deg, var(--rn-glass-strong), var(--rn-glass));
  border: 1px solid var(--rn-glass-border);
  border-radius: 24px;
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  box-shadow: var(--rn-glass-shadow);
}
.card:hover { background: linear-gradient(140deg, rgba(255,255,255,.72), rgba(255,255,255,.5)); border-color: var(--rn-glass-border); }
.card h3 { font-weight: 700; letter-spacing: -0.0194em; }
.card p { color: var(--rn-ink-soft); }
.card .tags span, .tag {
  display: inline-block; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px;
  background: rgba(201,169,160,.22); color: var(--rn-ink); border: 0;
}

.btn { font-family: var(--rn-font-display); font-weight: 600; letter-spacing: 0.0057em;
  transition: transform .4s var(--rn-ease), box-shadow .4s var(--rn-ease), background .3s, color .3s, border-color .3s; }
.btn--primary { background: var(--rn-point); color: #fff; box-shadow: 0 14px 30px -12px rgba(124,110,102,.7); }
.btn--primary:hover { background: var(--accent-hover); box-shadow: 0 20px 40px -14px rgba(124,110,102,.8); }
.btn--primary:disabled { opacity: .6; cursor: progress; transform: none; }
.btn--outline { color: var(--rn-ink); background: rgba(255,255,255,.55); border-color: var(--rn-glass-border);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 8px 20px -14px rgba(124,110,102,.5); }
.btn--outline:hover { background: #fff; border-color: var(--rn-glass-border); color: var(--rn-ink); }
.btn--danger { background: rgba(255,255,255,.7); color: #b42318; border-color: rgba(217,45,32,.25); }
.btn--danger:hover { background: #fef3f2; }

.field label { color: var(--rn-ink); font-weight: 600; }
.field input, .field select, .field textarea {
  border: 1px solid var(--rn-line); border-radius: 14px; background: rgba(255,255,255,.75); color: var(--rn-ink);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.field input[type="file"] { padding: 10px 12px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--rn-point); background: #fff; box-shadow: 0 0 0 4px rgba(124,110,102,.16);
}
.field .hint, .field label .hint { color: var(--rn-ink-soft); }
details summary { color: var(--rn-ink); }
details a, .card a:not(.btn) { color: var(--rn-point); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rn-main); }
code { font-size: .92em; padding: 1px 6px; border-radius: 6px; background: rgba(201,169,160,.2); }

.status-msg { border-radius: 14px; }
.admin-row { border-bottom-color: var(--rn-line); }
.admin-row .title { color: var(--rn-ink); }
.admin-row .meta { color: var(--rn-ink-soft); }

/* 관리자 탭: 밑줄 탭 → 리뉴얼 목차 칩 */
.subnav { background: transparent; border-bottom: 0; }
.subnav ul { gap: 8px; padding: 2px; }
.subnav a {
  padding: 9px 16px; border: 1px solid var(--rn-glass-border); border-radius: 999px;
  font-family: var(--rn-font-display); font-size: 14px; font-weight: 600; color: var(--rn-ink-soft);
  background: rgba(255,255,255,.6); box-shadow: 0 8px 20px -14px rgba(124,110,102,.5);
  transition: background .3s, color .3s;
}
.subnav a:hover { background: #fff; color: var(--rn-ink); border-bottom-color: var(--rn-glass-border); }
.subnav a.active { background: var(--rn-point); color: #fff; border-color: var(--rn-point); }

.toast { border-radius: 18px; color: var(--rn-ink); background: rgba(255,255,255,.78); border-color: var(--rn-glass-border); }

.space-photo { border-radius: 24px; border: 1px solid var(--rn-glass-border); box-shadow: var(--rn-glass-shadow); }
.space-photo figcaption { background: rgba(255,255,255,.7); border-top-color: var(--rn-line); color: var(--rn-ink-soft); }
.space-specs li { border-bottom-color: var(--rn-line); }
.space-specs .ic { color: var(--rn-point); }
.space-specs b { color: var(--rn-ink); }
.space-specs span { color: var(--rn-ink-soft); }

.skeleton { background: rgba(201,169,160,.18); }