/* 테마 ③ 밤과 설탕 — Variant 시안 이식(B-10). 출처: design/variant/night/v1-2026-09-26.html (2026-09-26).
   시안 값 그대로: 바탕 #060705(가운데 #10120d 방사 그라데이션) · 밝은 금 #d4b96b · 흐린 금 #a39b7d · 어두운 올리브 #5a5641(선·푸터) · 불꽃 #c97a44, Cormorant Garamond 400/600 이탤릭(영문·가격·분류) + Noto Serif KR 300/400/600. 라운드 4. 대비: 밝은 금/바탕 11.5 · 흐린 금 7.2 · 불꽃 5.9 · 올리브 2.7(선만). 푸터 글은 #7d7862(4.6, 2026-09-26 대비 점검으로 명도만 올림). */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Noto+Serif+KR:wght@300;400;600&display=swap');
:root {
  --bg: #060705;
  --bg-center: #10120d;
  --surface: #1a1a1a;
  --ink: #d4b96b;
  --ink-2: #a39b7d;
  --ink-3: #a39b7d;
  --line: #5a5641;
  --accent: #d4b96b;
  --accent-ink: #060705;
  --accent-soft: #1a1a1a;
  --flame: #c97a44;
  --footer-ink: #7d7862; /* 푸터 글 — 시안 올리브 #5a5641(2.7:1)은 .75rem 사업자 정보가 거의 안 보여서 명도만 올림(2026-09-26 대비 점검) */
  --band: #10120d;
  --hero-bg: transparent;
  --hero-ink: #d4b96b;
  --header-bg: #060705;
  --font-sans: 'Noto Serif KR', 'Apple SD Gothic Neo', serif;
  --font-display: var(--font-sans);
  --font-en: 'Cormorant Garamond', 'Times New Roman', serif;
  --display-weight: 400;
  --display-tracking: 0;
  --step--1: 0.85rem;
  --step-0: 1rem;
  --step-1: 1.05rem;
  --step-2: 1.2rem;
  --step-3: 1.8rem;
  --step-4: 2.5rem;
  --radius: 4px;
  --radius-lg: 4px;
  --measure: none;
  --container: 736px; /* 시안 container 800 - 좌우 2rem */
  --gutter: 20px;
  --shadow: none;
}
@media (min-width: 900px) { :root { --gutter: 32px; --step-4: 4rem; } }

/* ---------- 바탕 · 글 ---------- */
html[data-theme="cafe-night"] body {
  font-weight: 300; line-height: 1.6; color: var(--ink-2);
  background-color: var(--bg);
  background-image: radial-gradient(circle at 50% 30%, var(--bg-center) 0%, var(--bg) 70%);
}
html[data-theme="cafe-night"] h1, html[data-theme="cafe-night"] h2, html[data-theme="cafe-night"] h3, html[data-theme="cafe-night"] h4 { font-weight: 400; color: var(--ink); line-height: 1.2; text-wrap: initial; }
html[data-theme="cafe-night"] a { transition: color .3s ease; }
html[data-theme="cafe-night"] a:hover { color: var(--ink); }
html[data-theme="cafe-night"] .prose, html[data-theme="cafe-night"] .prose p { color: var(--ink-2); } /* 처리방침·감사 페이지는 시안 밖 */
html[data-theme="cafe-night"] .num { font-family: var(--font-en); }

/* 버튼: 12px 24px, .95rem, 라운드 4. primary 금 바탕 + 검정 글 600 · ghost 투명 + 금 글 + 올리브 테두리 */
html[data-theme="cafe-night"] .btn, html[data-theme="cafe-night"] .hero.hero--split .btn {
  min-height: auto; padding: 12px 24px; border: 1px solid var(--ink); border-radius: var(--radius);
  background: var(--ink); color: var(--bg); font-weight: 600; font-size: .95rem; letter-spacing: .05em; font-family: var(--font-sans);
  transition: all .3s ease;
}
html[data-theme="cafe-night"] .btn:hover, html[data-theme="cafe-night"] .hero.hero--split .btn:hover { background: #e6ce85; border-color: #e6ce85; opacity: 1; }
html[data-theme="cafe-night"] .btn.ghost, html[data-theme="cafe-night"] .hero.hero--split .btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); font-weight: 300; }
html[data-theme="cafe-night"] .btn.ghost:hover, html[data-theme="cafe-night"] .hero.hero--split .btn.ghost:hover { background: transparent; border-color: var(--ink); }

/* 배지(시안 .tag): 불꽃색 .75rem 600, 위첨자, 바탕 없음 */
html[data-theme="cafe-night"] .badge { display: inline; width: auto; padding: 0; margin-left: 4px; border-radius: 0; background: transparent; color: var(--flame); font-size: .75rem; font-weight: 600; vertical-align: super; }
html[data-theme="cafe-night"] .badge.soldout { color: var(--ink-2); }

/* ---------- 공지 · 헤더: 가운데 상호, 왼쪽 내비, 오른쪽 예약 글자. 바탕은 단색 검정 + 올리브 가는 선(2026-09-26 승민: 시안의 그라데이션+블러 대신) ---------- */
html[data-theme="cafe-night"] .notice { background: var(--ink); color: var(--bg); font-size: .85rem; letter-spacing: .05em; }
html[data-theme="cafe-night"] .site-header { border-bottom: 1px solid rgba(90, 86, 65, .5); background: var(--bg); }
html[data-theme="cafe-night"] .site-header .row { position: relative; min-height: auto; padding-block: 1rem; justify-content: flex-start; font-size: .85rem; letter-spacing: .05em; }
html[data-theme="cafe-night"] .site-header .logo { font-size: .85rem; font-weight: 600; letter-spacing: .1em; color: var(--ink); }
html[data-theme="cafe-night"] .site-header nav { gap: 2rem; font-size: .85rem; }
html[data-theme="cafe-night"] .site-header nav a { color: var(--ink-2); }
html[data-theme="cafe-night"] .site-header nav a:hover { color: var(--ink); }
/* 폰: 시안 .btn-nav-reserve — 올리브 테두리 작은 버튼. 데스크톱: 테두리 없는 금색 글자 */
html[data-theme="cafe-night"] .site-header .btn.header-cta { display: inline-flex; padding: 4px 12px; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: .8rem; font-weight: 300; letter-spacing: .05em; margin-left: auto; }
html[data-theme="cafe-night"] .site-header .btn.header-cta:hover { background: transparent; color: var(--ink); }
@media (min-width: 900px) {
  html[data-theme="cafe-night"] .site-header .row { justify-content: center; }
  html[data-theme="cafe-night"] .site-header .logo { position: relative; z-index: 1; }
  html[data-theme="cafe-night"] .site-header nav { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
  html[data-theme="cafe-night"] .site-header .btn.header-cta { position: absolute; right: 0; top: 50%; transform: translateY(-50%); padding: 0; border: 0; font-size: .85rem; }
}

/* ---------- 첫 화면: 가운데 정렬 한 줄 흐름 — 제목·설명·평점·버튼·영업시간·4:5 사진 ---------- */
html[data-theme="cafe-night"] .hero.hero--split {
  display: flex; flex-direction: column; background: transparent; color: var(--ink-2);
  width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; padding: 2rem 0 4rem; text-align: center;
}
html[data-theme="cafe-night"] .hero.hero--split .hero__body { order: 1; width: 100%; margin: 0; padding: 0; gap: 0; justify-items: center; }
html[data-theme="cafe-night"] .hero.hero--split h1 { order: 1; font-size: var(--step-4); letter-spacing: .05em; line-height: 1.2; margin-bottom: 1rem; }
html[data-theme="cafe-night"] .hero.hero--split .hero__sub { order: 2; font-size: 1rem; color: var(--ink-2); opacity: 1; max-width: none; margin-bottom: 2rem; font-weight: 300; }
html[data-theme="cafe-night"] .hero.hero--split .hero__rating { order: 3; justify-self: center; font-family: var(--font-en); font-size: .9rem; letter-spacing: .05em; color: var(--flame); opacity: 1; gap: .35rem; margin-bottom: 2rem; }
html[data-theme="cafe-night"] .hero.hero--split .hero__rating .num { font-weight: 400; color: var(--flame); }
html[data-theme="cafe-night"] .hero.hero--split .hero__cta { order: 4; width: 100%; justify-content: center; flex-wrap: nowrap; gap: 1rem; margin: 0 0 4rem; }
html[data-theme="cafe-night"] .hero.hero--split .hero__cta .btn { flex: 1; max-width: 160px; }
html[data-theme="cafe-night"] .hero.hero--split .hours-now, html[data-theme="cafe-night"] .hero.hero--split .hero__hours { order: 5; font-size: .85rem; line-height: 1.8; color: var(--ink-2); opacity: .8; font-weight: 300; }
html[data-theme="cafe-night"] .hero.hero--split .hero__hours { order: 6; margin: 0 0 4rem; } /* 지금 영업 글줄과 한 덩어리로 */
html[data-theme="cafe-night"] .hero.hero--split .hero__media { order: 2; position: relative; width: 100%; aspect-ratio: 4 / 5; background: var(--surface); border-radius: var(--radius); overflow: hidden; }
html[data-theme="cafe-night"] .hero.hero--split .hero__media img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
html[data-theme="cafe-night"] .hero.hero--split .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--bg) 0%, transparent 40%); }
/* 시안 .mood-image: 어둡고 따뜻한 무채색 처리 */
html[data-theme="cafe-night"] .hero__media img, html[data-theme="cafe-night"] .gallery--frames .frame img { filter: brightness(.8) contrast(1.2) sepia(.2) hue-rotate(-10deg); mix-blend-mode: luminosity; opacity: .6; }
@media (min-width: 900px) {
  html[data-theme="cafe-night"] .hero.hero--split { padding: 8rem 0; }
  html[data-theme="cafe-night"] .hero.hero--split .hero__sub { font-size: 1.2rem; }
}

/* ---------- 섹션 공통: 위 4rem, 컨테이너 폭 아래 1px 올리브 선, 가운데 제목 1.8rem ---------- */
html[data-theme="cafe-night"] .section { padding: 4rem 0 0; border-top: 0; }
html[data-theme="cafe-night"] .section > .container { padding-bottom: 4rem; border-bottom: 1px solid var(--line); }
html[data-theme="cafe-night"] .section.location > .container { border-bottom: 0; }
html[data-theme="cafe-night"] .section-head { display: block; text-align: center; margin-bottom: 4rem; }
html[data-theme="cafe-night"] .section-head h2 { font-size: 1.8rem; margin-bottom: .5rem; }
html[data-theme="cafe-night"] .section-head p { font-size: .9rem; color: var(--ink-2); opacity: .8; }

/* ---------- 메뉴판 한 단: 분류 제목 이탤릭 영문 서체, 이름 ··· 가격 점선, 설명 아래 줄 ---------- */
html[data-theme="cafe-night"] .menu .columns { grid-template-columns: 1fr; gap: 0; }
html[data-theme="cafe-night"] .menu .columns__group { margin-bottom: 4rem; }
html[data-theme="cafe-night"] .menu .columns__group:last-child { margin-bottom: 0; }
html[data-theme="cafe-night"] .menu .columns__cat { font-family: var(--font-en); font-style: italic; font-size: 1.2rem; font-weight: 400; color: var(--ink); padding-bottom: .5rem; margin-bottom: 2rem; border-bottom: 1px solid var(--line); }
html[data-theme="cafe-night"] .menu .mrow { gap: 4px; margin-bottom: 2rem; }
html[data-theme="cafe-night"] .menu .mrow:last-child { margin-bottom: 0; }
html[data-theme="cafe-night"] .menu .mrow__name { font-size: 1.05rem; font-weight: 400; color: var(--ink); }
html[data-theme="cafe-night"] .menu .mrow__leader { margin: 0 12px; top: -6px; border-bottom: 1px dotted var(--line); opacity: .5; }
html[data-theme="cafe-night"] .menu .mrow__price { font-family: var(--font-en); font-size: 1.1rem; color: var(--ink); }
html[data-theme="cafe-night"] .menu .mrow__desc { font-size: .9rem; color: var(--ink-2); line-height: 1.6; padding-right: 20%; }
html[data-theme="cafe-night"] .menu .sold-out .mrow__name, html[data-theme="cafe-night"] .menu .sold-out .mrow__price { color: var(--ink-2); }

/* ---------- 공간: 사진 위 라벨(alt) — 첫 장 가로 21:9, 다음 두 장 4:5, 나머지 3:2 ---------- */
html[data-theme="cafe-night"] .gallery--frames .gallery__list { gap: 1rem; }
html[data-theme="cafe-night"] .gallery--frames .frame { position: relative; padding: 0; background: #111; border-radius: var(--radius); overflow: hidden; box-shadow: none; }
html[data-theme="cafe-night"] .gallery--frames .frame img { width: 100%; height: 100%; aspect-ratio: 3 / 2; background: #111; }
html[data-theme="cafe-night"] .gallery--frames li:nth-child(2) .frame img, html[data-theme="cafe-night"] .gallery--frames li:nth-child(3) .frame img { aspect-ratio: 4 / 5; }
html[data-theme="cafe-night"] .gallery--frames .frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6, 7, 5, .8) 0%, transparent 50%); }
html[data-theme="cafe-night"] .gallery--frames .frame figcaption { position: absolute; z-index: 2; left: 1rem; bottom: 1rem; margin: 0; font-style: normal; font-size: .85rem; color: var(--ink); text-shadow: 0 2px 4px rgba(0, 0, 0, .8); }
@media (min-width: 900px) {
  html[data-theme="cafe-night"] .gallery--frames .gallery__list { grid-template-columns: repeat(2, 1fr); }
  html[data-theme="cafe-night"] .gallery--frames li:first-child { grid-column: 1 / -1; }
  html[data-theme="cafe-night"] .gallery--frames li:first-child .frame img { aspect-ratio: 21 / 9; }
}

/* ---------- 오시는 길: 가운데 — 주소, 불꽃 테두리 상세, 교통·주차 두 줄, 지도 버튼 2개. 표·지도 자리는 시안에 없음 ---------- */
html[data-theme="cafe-night"] .location .loc__grid { display: block; }
html[data-theme="cafe-night"] .location .loc__info { gap: 0; text-align: center; justify-items: center; }
html[data-theme="cafe-night"] .location .loc__addr { gap: 0; margin-bottom: 2rem; justify-items: center; }
html[data-theme="cafe-night"] .location .loc__addr strong { font-size: 1.1rem; font-weight: 400; color: var(--ink); margin-bottom: .5rem; }
html[data-theme="cafe-night"] .location .loc__addr > span:not(.small) { display: inline-block; margin: 1rem 0; padding: 4px 12px; border: 1px solid var(--flame); border-radius: var(--radius); background: rgba(201, 122, 68, .05); color: var(--flame); font-weight: 600; font-size: .95rem; }
html[data-theme="cafe-night"] .location .loc__addr .small { font-size: .9rem; color: var(--ink-2); line-height: 1.8; }
html[data-theme="cafe-night"] .location .loc__hours, html[data-theme="cafe-night"] .location .loc__map { display: none; }
html[data-theme="cafe-night"] .location .loc__cta { justify-content: center; gap: 1rem; flex-wrap: nowrap; width: 100%; }
html[data-theme="cafe-night"] .location .loc__cta .btn { background: transparent; color: var(--ink); border-color: var(--line); font-weight: 300; padding: 10px 20px; font-size: .85rem; flex: 1; }
html[data-theme="cafe-night"] .location .loc__cta .btn:hover { border-color: var(--ink); }
html[data-theme="cafe-night"] .location .loc__cta .btn:nth-child(3) { display: none; } /* 시안엔 지도 버튼 2개뿐 — 전화는 하단 바·푸터에 */

/* ---------- 푸터: 가운데 .75rem 올리브, 줄 간격 2 ---------- */
html[data-theme="cafe-night"] .footer { border-top: 0; padding-block: 4rem; text-align: center; font-size: .75rem; line-height: 2; color: var(--footer-ink); }
html[data-theme="cafe-night"] .footer .footer__grid { gap: 0; }
html[data-theme="cafe-night"] .footer .footer__brand strong { font-size: .75rem; font-weight: 300; color: var(--footer-ink); }
html[data-theme="cafe-night"] .footer .footer__links { justify-content: center; gap: 0 1rem; }
html[data-theme="cafe-night"] .footer .footer__copy { color: var(--footer-ink); }
html[data-theme="cafe-night"] .footer .small { font-size: .75rem; }
html[data-theme="cafe-night"] .example-note { color: var(--ink-2); border-top: 1px solid var(--line); }
html[data-theme="cafe-night"] .mobile-bar { background: var(--bg); border-top-color: var(--line); }
html[data-theme="cafe-night"] .mobile-bar a:not(.primary) { color: var(--ink-2); }
html[data-theme="cafe-night"] .mobile-bar a:not(.primary) strong { color: var(--ink); }


/* ---------- 2026-09-29 taste-skill 병합 + 연출 — 승민 "지금 강도가 제일 좋아요, 전부 샘플 사이트" ----------
   이야기 하나: "촛불 하나 켜진 밤의 디저트 바" — 사진 위 촛불빛이 은은하게 일렁이고, 금색 제목에 빛이 한 번씩 스친다, 메뉴는 어둠에서 떠오른다.
   공통: 첫 화면 글이 차례로 톡 떠오름 · 섹션 제목·항목·카드가 들어오면 튀어 오르듯 · 사진은 당겨졌다 제자리.
   전부 CSS(스크롤 타임라인 view(), 안 되는 브라우저는 그냥 보임) · transform·opacity·clip-path · 모션 줄이기면 멈춤. */
@media (prefers-reduced-motion: no-preference) {
  html[data-theme="cafe-night"] .hero .hero__body > * { animation: nt-in .9s cubic-bezier(.34, 1.3, .64, 1) backwards; }
  html[data-theme="cafe-night"] .hero .hero__body > :nth-child(2) { animation-delay: .12s; }
  html[data-theme="cafe-night"] .hero .hero__body > :nth-child(3) { animation-delay: .24s; }
  html[data-theme="cafe-night"] .hero .hero__body > :nth-child(4) { animation-delay: .36s; }
  html[data-theme="cafe-night"] .hero .hero__body > :nth-child(n+5) { animation-delay: .48s; }
  @supports (animation-timeline: view()) {
    html[data-theme="cafe-night"] .section-head, html[data-theme="cafe-night"] .features .feat, html[data-theme="cafe-night"] .staff .person, html[data-theme="cafe-night"] .reviews .review, html[data-theme="cafe-night"] .faq__item, html[data-theme="cafe-night"] .loc__block, html[data-theme="cafe-night"] .loc__col, html[data-theme="cafe-night"] .pricing .plan, html[data-theme="cafe-night"] .plan-card, html[data-theme="cafe-night"] .menu .mrow, html[data-theme="cafe-night"] .columns__cat, html[data-theme="cafe-night"] .notices__list li, html[data-theme="cafe-night"] .case, html[data-theme="cafe-night"] .process .steps li, html[data-theme="cafe-night"] .sched__table tbody tr, html[data-theme="cafe-night"] .contact .form { animation: nt-up linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
    html[data-theme="cafe-night"] .gallery img, html[data-theme="cafe-night"] .case img { animation: nt-settle linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
  }
}
@keyframes nt-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes nt-up { from { opacity: 0; transform: translateY(40px) scale(.97); } 70% { opacity: 1; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes nt-settle { from { transform: scale(1.12); } to { transform: none; } }

html[data-theme="cafe-night"] .hero.hero--split .hero__media::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5; background: radial-gradient(60% 45% at 50% 60%, rgba(255, 190, 110, .22), rgba(255, 190, 110, 0) 70%); }
html[data-theme="cafe-night"] .hero.hero--split h1 { background: linear-gradient(100deg, currentColor 42%, #fff4cf 50%, currentColor 58%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; }
@media (prefers-reduced-motion: no-preference) {
  html[data-theme="cafe-night"] .hero.hero--split .hero__media::before { animation: nt-candle 3.2s ease-in-out infinite; }
  html[data-theme="cafe-night"] .hero.hero--split h1 { -webkit-text-fill-color: transparent; animation: nt-shine 7s ease-in-out 1.5s infinite; }
  html[data-theme="cafe-night"] .hero.hero--split .hero__media img { animation: nt-light 2.2s ease-out .3s backwards; }
  @supports (animation-timeline: view()) {
    html[data-theme="cafe-night"] .gallery--frames .frame img { animation: nt-light linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  }
}
@keyframes nt-candle { 0%, 100% { opacity: .45; transform: scale(1); } 20% { opacity: .7; transform: scale(1.03); } 35% { opacity: .5; } 55% { opacity: .8; transform: scale(1.05) translateY(-4px); } 75% { opacity: .55; } }
@keyframes nt-shine { 0%, 60% { background-position: 100% 0; } 80%, 100% { background-position: 0 0; } }
@keyframes nt-light { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }

/* 사진이 당겨졌다 제자리로 오는 동안 칸 밖으로 나가 가로 스크롤을 만들지 않게 */
html[data-theme="cafe-night"] .gallery__list > li, html[data-theme="cafe-night"] .gallery .frame, html[data-theme="cafe-night"] .case { overflow: clip; }