/*
Theme Name: 강남 디저트 가라오케 (Gangnam Dessert Karaoke)
Theme URI: https://dessert-k.withmysite.com
Author: Dessert Karaoke
Author URI: https://dessert-k.withmysite.com
Description: 강남 논현동 엘리에나호텔 B1·B2층 디저트가라오케 공식 럭셔리 화이트톤 에디토리얼 프리미엄 워드프레스 테마. 실시간 견적 계산기, 7대 테마 룸 쇼케이스, 크로마키 투명 인물 워킹 모션, 반응형 예약 모달 완비.
Version: 1.0.0
Tested up to: 6.7
Requires PHP: 7.4
License: Proprietary
License URI: https://dessert-k.withmysite.com
Text Domain: gangnam-dessert-karaoke
Tags: one-column, custom-background, custom-colors, custom-menu, featured-images, full-site-editing, theme-options
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@300;400;500;600&family=Space+Grotesk:wght@300;400;500;600;700&family=Syne:wght@400;600;700;800&family=Cinzel:wght@400;500;600;700;800&display=swap');
@import url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff');
@import url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff');
@import url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff');

@font-face {
  font-family: 'GmarketSans';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GmarketSans';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GmarketSans';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
  font-weight: 700;
  font-weight: 800;
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-brand-red: #E50914;
  --color-brand-red-dark: #B30710;
  --color-brand-red-light: #FF334B;
  --color-editor-bg: #F4F4F3;
  --color-editor-dark: #121212;
}

* {
  font-family: "GmarketSans", "Noto Sans KR", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: -0.02em;
}

body {
  background-color: var(--color-editor-bg);
  color: var(--color-editor-dark);
  overflow-x: hidden;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #EAEAEA;
}
::-webkit-scrollbar-thumb {
  background: #C4C4C4;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-brand-red);
}

/* Custom Editorial Grayscale Filter */
.grayscale-editorial {
  filter: grayscale(100%) contrast(115%) brightness(95%);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.grayscale-editorial:hover {
  filter: grayscale(0%) contrast(100%) brightness(100%);
}

.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

/* Subtle Paper Grain Overlay */
.paper-grain {
  position: relative;
}

.paper-grain::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.04;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  z-index: 50;
}

@keyframes red-glow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(229, 9, 20, 0.3), 0 0 10px rgba(229, 9, 20, 0.2);
  }
  50% {
    box-shadow: 0 0 15px rgba(229, 9, 20, 0.6), 0 0 25px rgba(229, 9, 20, 0.4);
  }
}

.animate-red-glow {
  animation: red-glow 2s infinite ease-in-out;
}

@keyframes breathing-zoom {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.07);
  }
}

.animate-breathing-zoom {
  animation: breathing-zoom 16s infinite ease-in-out;
  transform-origin: bottom right;
}

@keyframes phone-ring {
  0%, 60%, 100% {
    transform: rotate(0deg) translateX(0);
  }
  3%, 9%, 15%, 21% {
    transform: rotate(-1.8deg) translateX(-1.5px);
  }
  6%, 12%, 18%, 24% {
    transform: rotate(1.8deg) translateX(1.5px);
  }
  27% {
    transform: rotate(0deg) translateX(0);
  }
}

.animate-phone-ring {
  animation: phone-ring 3s infinite ease-in-out;
}