/* INLOOK Company Custom Styles - Pretendard Primary */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;800&display=swap');

:root {
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-serif: 'Cinzel', serif;
  --color-primary: #121316;
  --color-accent: #c5a880;
  --color-accent-hover: #b39266;
  --color-surface: #1e2024;
  --color-bg-light: #fbfbf9;
}

html {
  font-size: 110%; /* 사이트 전체 폰트 크기 추가 5% 업 (기본 16px -> 17.6px) */
}

html, body {
  font-family: var(--font-sans) !important;
  background-color: #fcfbfa;
  color: #22252a;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.015em;
}

/* Universal Pretendard Font Application (Preserves Font Awesome icons) */
*:not(i):not([class*="fa-"]):not([class*="fa"]):not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands) {
  font-family: var(--font-sans);
}

/* Font Awesome Icon Font Preservation */
.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands, [class^="fa-"], [class*=" fa-"] {
  font-family: var(--fa-style-family, "Font Awesome 6 Free"), "Font Awesome 6 Free", "FontAwesome" !important;
  letter-spacing: normal !important;
}
.fa-brands, [class^="fa-brands-"], [class*=" fa-brands-"] {
  font-family: "Font Awesome 6 Brands" !important;
}

input, button, select, textarea, optgroup, option, table, th, td, h1, h2, h3, h4, h5, h6, p, span, a, div {
  font-family: var(--font-sans);
}

.font-serif-brand {
  font-family: var(--font-serif);
  letter-spacing: 0.08em;
}

/* Glassmorphism */
.glass-nav {
  background: rgba(18, 19, 22, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.glass-card-dark {
  background: rgba(30, 32, 36, 0.85);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #c5a880;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #a98d66;
}

/* Hide scrollbar utility */
.no-scrollbar::-webkit-scrollbar {
  display: none !important;
}
.no-scrollbar {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

/* Texture Pattern Overlays */
.marble-texture-overlay {
  background-image: radial-gradient(rgba(197, 168, 128, 0.15) 1px, transparent 0);
  background-size: 24px 24px;
}

/* Interactive Card Animations */
.material-card {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.material-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.12), 0 10px 15px -5px rgba(197, 168, 128, 0.15);
}

/* Visualizer Canvas Area */
.visualizer-room-frame {
  position: relative;
  background-size: cover;
  background-position: center;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  transition: all 0.5s ease;
}

/* Gold Gradient Text & Buttons */
.text-gold-gradient {
  background: linear-gradient(135deg, #dfc097 0%, #c5a880 50%, #99784f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn-gold {
  background: linear-gradient(135deg, #c5a880 0%, #a88a60 100%);
  color: #ffffff;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 14px rgba(197, 168, 128, 0.35);
}
.btn-gold:hover {
  background: linear-gradient(135deg, #d3b78f 0%, #b8986c 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(197, 168, 128, 0.45);
}

/* Badge Styles */
.badge-best {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}
.badge-new {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
}