/**
 * Rebeauty Main CSS
 * @file rebeauty_main.css
 * @description 전역 스타일, CSS 변수, Reset, Typography, 기초 레이아웃
 * @version 1.0.0
 * @date 2025-10-11
 */

/* ========================================
   CSS VARIABLES (CSS 변수 시스템)
   ======================================== */

:root {
  /* === COLORS === */

  /* Primary Brand Colors */
  --rebeauty-color-primary: #A1B556;
  --rebeauty-color-primary-dark: #8088e0;
  --rebeauty-color-primary-light: #cfe1ff;

  /* Secondary Colors */
  --rebeauty-color-secondary: #4ec9bc;
  --rebeauty-color-secondary-dark: #3ca89d;
  --rebeauty-color-secondary-light: #7dd9d0;

  /* Neutral Colors */
  --rebeauty-color-white: #ffffff;
  --rebeauty-color-black: #000000;
  --rebeauty-color-gray-900: #111111;
  --rebeauty-color-gray-800: #1c1c1c;
  --rebeauty-color-gray-700: #333333;
  --rebeauty-color-gray-600: #666666;
  --rebeauty-color-gray-500: #999999;
  --rebeauty-color-gray-400: #aaaaaa;
  --rebeauty-color-gray-300: #cccccc;
  --rebeauty-color-gray-200: #e5e5e5;
  --rebeauty-color-gray-100: #f9f9f9;

  /* Text Colors */
  --rebeauty-color-text-primary: #000000;
  --rebeauty-color-text-secondary: #333333;
  --rebeauty-color-text-muted: #aaaaaa;
  --rebeauty-color-text-inverse: #ffffff;
  --rebeauty-color-text-link: #A1B556;
  --rebeauty-color-text-link-hover: #8088e0;

  /* Background Colors */
  --rebeauty-color-bg-primary: #ffffff;
  --rebeauty-color-bg-secondary: #f9f9f9;
  --rebeauty-color-bg-tertiary: #efefef;
  --rebeauty-color-bg-dark: #1c1c1c;

  /* Border Colors */
  --rebeauty-color-border-light: #e5e5e5;
  --rebeauty-color-border-medium: #cccccc;
  --rebeauty-color-border-dark: #999999;

  /* Status Colors */
  --rebeauty-color-success: #3fc628;
  --rebeauty-color-warning: #ffc160;
  --rebeauty-color-error: #ff2731;
  --rebeauty-color-info: #4bbdcf;

  /* === TYPOGRAPHY === */

  /* Font Families */
  --rebeauty-font-main: 'Pretendard-r', -apple-system, sans-serif;
  --rebeauty-font-bold: 'Pretendard-b', -apple-system, sans-serif;
  --rebeauty-font-medium: 'Pretendard-m', -apple-system, sans-serif;
  --rebeauty-font-light: 'Pretendard-l', -apple-system, sans-serif;
  --rebeauty-font-extra-light: 'Pretendard-el', -apple-system, sans-serif;
  --rebeauty-font-special: 'NanaBeauty', serif;
  --rebeauty-font-english: 'Lora', serif;

  /* Font Sizes */
  --rebeauty-font-size-xs: 12px;
  --rebeauty-font-size-sm: 14px;
  --rebeauty-font-size-base: 16px;
  --rebeauty-font-size-md: 18px;
  --rebeauty-font-size-lg: 20px;
  --rebeauty-font-size-xl: 24px;
  --rebeauty-font-size-2xl: 30px;
  --rebeauty-font-size-3xl: 36px;
  --rebeauty-font-size-4xl: 48px;
  --rebeauty-font-size-5xl: 60px;
  --rebeauty-font-size-6xl: 72px;

  /* Line Heights */
  --rebeauty-line-height-tight: 1.2;
  --rebeauty-line-height-base: 1.3;
  --rebeauty-line-height-relaxed: 1.6;
  --rebeauty-line-height-loose: 2;

  /* Letter Spacing */
  --rebeauty-letter-spacing-tight: -1px;
  --rebeauty-letter-spacing-normal: 0;
  --rebeauty-letter-spacing-wide: 2px;
  --rebeauty-letter-spacing-wider: 4px;

  /* === SPACING === */

  --rebeauty-spacing-0: 0;
  --rebeauty-spacing-5: 5px;
  --rebeauty-spacing-10: 10px;
  --rebeauty-spacing-15: 15px;
  --rebeauty-spacing-20: 20px;
  --rebeauty-spacing-25: 25px;
  --rebeauty-spacing-30: 30px;
  --rebeauty-spacing-40: 40px;
  --rebeauty-spacing-50: 50px;
  --rebeauty-spacing-60: 60px;
  --rebeauty-spacing-70: 70px;
  --rebeauty-spacing-80: 80px;
  --rebeauty-spacing-90: 90px;
  --rebeauty-spacing-100: 100px;
  --rebeauty-spacing-110: 110px;
  --rebeauty-spacing-120: 120px;
  --rebeauty-spacing-150: 150px;

  /* === BREAKPOINTS === */

  --rebeauty-breakpoint-mobile: 768px;
  --rebeauty-breakpoint-tablet: 992px;
  --rebeauty-breakpoint-desktop: 1270px;

  /* === LAYOUT === */

  --rebeauty-container-max-width: 1270px;
  --rebeauty-container-padding: 15px;

  /* === SHADOWS === */

  --rebeauty-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --rebeauty-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --rebeauty-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --rebeauty-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
  --rebeauty-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.2);
  --rebeauty-shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);

  /* === TRANSITIONS === */

  --rebeauty-transition-fast: 0.15s ease-in-out;
  --rebeauty-transition-base: 0.3s ease-in-out;
  --rebeauty-transition-slow: 0.5s ease-in-out;

  /* === BORDER RADIUS === */

  --rebeauty-radius-none: 0;
  --rebeauty-radius-sm: 4px;
  --rebeauty-radius-md: 8px;
  --rebeauty-radius-lg: 16px;
  --rebeauty-radius-xl: 24px;
  --rebeauty-radius-full: 9999px;
  --rebeauty-radius-circle: 50%;

  /* === Z-INDEX === */

  --rebeauty-z-dropdown: 100;
  --rebeauty-z-sticky: 200;
  --rebeauty-z-fixed: 300;
  --rebeauty-z-modal-backdrop: 400;
  --rebeauty-z-modal: 500;
  --rebeauty-z-popover: 600;
  --rebeauty-z-tooltip: 700;
}


/* ========================================
   FONT FACES (폰트 정의)
   ======================================== */

@font-face {
  font-family: 'Pretendard-b';
  src: url('../fonts/Pretendard-Bold.woff2') format('woff2');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard-r';
  src: url('../fonts/Pretendard-Regular.woff2') format('woff2');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard-m';
  src: url('../fonts/Pretendard-Medium.woff2') format('woff2');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard-l';
  src: url('../fonts/Pretendard-Light.woff2') format('woff2');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard-el';
  src: url('../fonts/Pretendard-ExtraLight.woff2') format('woff2');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'NanaBeauty';
  src: url('../fonts/nanabeauty.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lora';
  src: url('../fonts/Lora-Regular.eot');
  src: url('../fonts/Lora-Regular.eot?#iefix') format('embedded-opentype'),
       url('../fonts/Lora-Regular.woff') format('woff'),
       url('../fonts/Lora-Regular.woff2') format('woff2');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'LibreBaskerville';
  src: url('../fonts/LibreBaskerville-Regular.woff') format('woff'),
       url('../fonts/LibreBaskerville-Regular.woff2') format('woff2');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GmarketSansTTFLight';
  src: url('../fonts/GmarketSansTTFLight.eot') format('woff');
  src: url('../fonts/GmarketSansTTFLight.eot?#iefix') format('embedded-opentype'),
       url('../fonts/GmarketSansTTFLight.woff') format('woff'),
       url('../fonts/GmarketSansTTFLight.woff2') format('woff2');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GmarketSansTTFMedium';
  src: url('../fonts/GmarketSansTTFMedium.eot') format('woff');
  src: url('../fonts/GmarketSansTTFMedium.eot?#iefix') format('embedded-opentype'),
       url('../fonts/GmarketSansTTFMedium.woff') format('woff'),
       url('../fonts/GmarketSansTTFMedium.woff2') format('woff2');
  font-style: normal;
  font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=Baskervville:ital@0;1&family=Lora:ital,wght@0,400..700;1,400..700&family=Noto+Sans+KR:wght@100..900&display=swap');


/* ========================================
   CSS RESET (리셋)
   ======================================== */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, input, textarea,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, main,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  box-sizing: border-box;
}

article, aside, details, figcaption, figure, main,
footer, header, hgroup, menu, nav, section {
  display: block;
}

button {
  font: inherit;
  font-size: 100%;
  padding: 0;
  box-sizing: border-box;
  cursor: pointer;
}

ol, ul, dl {
  list-style: none;
}

img {
  vertical-align: bottom;
}

a {
  text-decoration: none;
  color: initial;
  outline: none !important;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

select {
  color: var(--rebeauty-color-text-primary);
  background: transparent;
}

textarea {
  resize: none;
}

input[type=text],
input[type=password],
textarea {
  font-size: inherit;
}

h1, h2, h3, h4, h5, h6, p, a, label, button, span, em, select, option, input, textarea, th, td, dt, dd, dl {
  margin-bottom: 0;
}

sub, sup {
  position: inherit;
  vertical-align: baseline;
}

select, select.select,
input[type='tel'], input[type='url'], input[type='number'],
input[type='email'], input[type='text'], input[type='password'],
input.text, input.password {
  margin: 0;
}


/* ========================================
   BASE STYLES (기본 스타일)
   ======================================== */

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--rebeauty-font-main);
  font-size: var(--rebeauty-font-size-base);
  letter-spacing: var(--rebeauty-letter-spacing-tight);
  line-height: var(--rebeauty-line-height-base);
  color: var(--rebeauty-color-text-primary);
  background-color: var(--rebeauty-color-bg-primary);
}


/* ========================================
   LAYOUT (레이아웃)
   ======================================== */

.rebeauty_container {
  max-width: var(--rebeauty-container-max-width);
  width: 100%;
  padding: 0 var(--rebeauty-container-padding);
  margin: 0 auto;
}

.rebeauty_container--fluid {
  max-width: 100%;
}

.rebeauty_container--narrow {
  max-width: 1050px;
}

.rebeauty_wrapper {
  width: 100%;
}

.rebeauty_section {
  width: 100%;
}

.rebeauty_clearfix:before,
.rebeauty_clearfix:after {
  display: block;
  content: '';
  line-height: 0;
}

.rebeauty_clearfix:after {
  clear: both;
}


/* ========================================
   UTILITY CLASSES (유틸리티 클래스)
   ======================================== */

/* === Display === */
.rebeauty_d-none { display: none !important; }
.rebeauty_d-block { display: block !important; }
.rebeauty_d-inline { display: inline !important; }
.rebeauty_d-inline-block { display: inline-block !important; }
.rebeauty_d-flex { display: flex !important; }
.rebeauty_d-inline-flex { display: inline-flex !important; }
.rebeauty_d-grid { display: grid !important; }

/* === Position === */
.rebeauty_pos-static { position: static !important; }
.rebeauty_pos-relative { position: relative !important; }
.rebeauty_pos-absolute { position: absolute !important; }
.rebeauty_pos-fixed { position: fixed !important; }
.rebeauty_pos-sticky { position: sticky !important; }

/* === Text Alignment === */
.rebeauty_text-left { text-align: left !important; }
.rebeauty_text-center { text-align: center !important; }
.rebeauty_text-right { text-align: right !important; }
.rebeauty_text-justify { text-align: justify !important; }

/* === Flex Utilities === */
.rebeauty_flex-row { flex-direction: row !important; }
.rebeauty_flex-column { flex-direction: column !important; }
.rebeauty_flex-wrap { flex-wrap: wrap !important; }
.rebeauty_flex-nowrap { flex-wrap: nowrap !important; }

.rebeauty_justify-start { justify-content: flex-start !important; }
.rebeauty_justify-center { justify-content: center !important; }
.rebeauty_justify-end { justify-content: flex-end !important; }
.rebeauty_justify-between { justify-content: space-between !important; }
.rebeauty_justify-around { justify-content: space-around !important; }
.rebeauty_justify-evenly { justify-content: space-evenly !important; }

.rebeauty_align-start { align-items: flex-start !important; }
.rebeauty_align-center { align-items: center !important; }
.rebeauty_align-end { align-items: flex-end !important; }
.rebeauty_align-stretch { align-items: stretch !important; }
.rebeauty_align-baseline { align-items: baseline !important; }

/* === Size Utilities === */
.rebeauty_w-100 { width: 100% !important; }
.rebeauty_w-auto { width: auto !important; }
.rebeauty_h-100 { height: 100% !important; }
.rebeauty_h-auto { height: auto !important; }

/* === Border === */
.rebeauty_border-none { border: none !important; }
.rebeauty_border-radius-none { border-radius: 0 !important; }
.rebeauty_border-radius-sm { border-radius: var(--rebeauty-radius-sm) !important; }
.rebeauty_border-radius-md { border-radius: var(--rebeauty-radius-md) !important; }
.rebeauty_border-radius-lg { border-radius: var(--rebeauty-radius-lg) !important; }
.rebeauty_border-radius-full { border-radius: var(--rebeauty-radius-full) !important; }
.rebeauty_border-radius-circle { border-radius: var(--rebeauty-radius-circle) !important; }

/* === Color Utilities === */
.rebeauty_color-primary { color: var(--rebeauty-color-primary) !important; }
.rebeauty_color-secondary { color: var(--rebeauty-color-secondary) !important; }
.rebeauty_color-white { color: var(--rebeauty-color-white) !important; }
.rebeauty_color-black { color: var(--rebeauty-color-black) !important; }
.rebeauty_color-gray { color: var(--rebeauty-color-gray-600) !important; }

.rebeauty_bg-primary { background-color: var(--rebeauty-color-primary) !important; }
.rebeauty_bg-secondary { background-color: var(--rebeauty-color-secondary) !important; }
.rebeauty_bg-white { background-color: var(--rebeauty-color-white) !important; }
.rebeauty_bg-black { background-color: var(--rebeauty-color-bg-dark) !important; }
.rebeauty_bg-gray-100 { background-color: var(--rebeauty-color-gray-100) !important; }


/* ========================================
   RESPONSIVE UTILITIES (반응형 유틸리티)
   ======================================== */

/* Mobile: Hide on mobile, show on larger screens */
.rebeauty_hide-mobile { display: block; }

/* Tablet: Hide on tablet and below */
.rebeauty_hide-tablet { display: block; }

/* Desktop: Hide on desktop and above */
.rebeauty_hide-desktop { display: none; }

/* Show only on mobile */
.rebeauty_show-mobile { display: none; }

/* Show only on tablet */
.rebeauty_show-tablet { display: none; }

/* Show only on desktop */
.rebeauty_show-desktop { display: block; }

@media (max-width: 768px) {
  .rebeauty_hide-mobile { display: none !important; }
  .rebeauty_show-mobile { display: block !important; }
  .rebeauty_hide-desktop { display: block !important; }
  .rebeauty_show-desktop { display: none !important; }
}

@media (min-width: 769px) and (max-width: 992px) {
  .rebeauty_hide-tablet { display: none !important; }
  .rebeauty_show-tablet { display: block !important; }
}

@media (min-width: 993px) {
  .rebeauty_hide-desktop { display: none !important; }
  .rebeauty_show-desktop { display: block !important; }
}


/* ========================================
   LEGACY SUPPORT (기존 클래스 호환성)
   TODO: Phase 3 완료 후 제거 예정
   ======================================== */

/* Temporary aliases for gradual migration - will be removed after all HTML/PHP files are updated */
.container {
  max-width: var(--rebeauty-container-max-width);
  width: 100%;
  padding: 0 var(--rebeauty-container-padding);
  margin: 0 auto;
}

.clearfix:before, .clearfix:after {
  display: block;
  content: '';
  line-height: 0;
}

.clearfix:after {
  clear: both;
}

.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.border-none { border: none !important; }
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.block-768 { display: none; }
.block-992 { display: none; }

@media (max-width: 992px) {
  .block-992 { display: block; }
}

@media (max-width: 768px) {
  .block-768 { display: block; }
}