@charset "UTF-8";

/* =========================================================
   FIGMA COMMON CSS
   - Figma React 화면을 JSP로 전환하기 위한 공통 기준
   - header/footer 세부 스타일은 figma-layout.css에서 처리
========================================================= */

/* Font */
@font-face {
  font-family: "Pretendard";
  src: url("/fonts/Pretendard-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

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

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

@font-face {
  font-family: "Pretendard";
  src: url("/fonts/Pretendard-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Root Tokens */
:root {
  --figma-white: #ffffff;
  --figma-black: #111111;

  --figma-gray-50: #f9fafb;
  --figma-gray-100: #f3f4f6;
  --figma-gray-200: #e5e7eb;
  --figma-gray-300: #d1d5db;
  --figma-gray-400: #9ca3af;
  --figma-gray-500: #6b7280;
  --figma-gray-600: #4b5563;
  --figma-gray-700: #374151;
  --figma-gray-800: #1f2937;
  --figma-gray-900: #111827;

  --figma-blue: #1f89ff;
  --figma-blue-light: #eff6ff;

  --figma-border: #f3f4f6;
  --figma-shadow-dropdown: 0 10px 25px rgba(0, 0, 0, 0.08);

  --figma-font: "Pretendard", "NanumGothic", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  --figma-header-height: 64px;
  --figma-container-width: 1280px;

  --figma-radius-sm: 6px;
  --figma-radius-md: 8px;
  --figma-radius-lg: 12px;
  --figma-radius-xl: 16px;

  --figma-transition: 0.2s ease;
}

/* Reset */
* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--figma-font);
  font-weight: 400;
  color: var(--figma-black);
  background: var(--figma-white);
  line-height: 1.5;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.figma-mobile-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

img {
  display: block;
  max-width: 100%;
}

ul,
ol,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

/* Layout Common */
.figma-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--figma-white);
}

.figma-main {
  flex: 1;
  padding-top: var(--figma-header-height);
}

.figma-container {
  width: 100%;
  max-width: var(--figma-container-width);
  margin: 0 auto;
  padding: 0 16px;
}

.figma-section {
  padding: 96px 0;
}

.figma-section-sm {
  padding: 64px 0;
}

.figma-section-lg {
  padding: 120px 0;
}

/* Typography */
.figma-title-xl {
  font-size: 56px;
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.04em;
}

.figma-title-lg {
  font-size: 40px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.03em;
}

.figma-title-md {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.figma-text-lg {
  font-size: 18px;
  line-height: 1.7;
}

.figma-text-md {
  font-size: 16px;
  line-height: 1.7;
}

.figma-text-sm {
  font-size: 14px;
  line-height: 1.6;
}

.figma-text-xs {
  font-size: 12px;
  line-height: 1.5;
}

.figma-text-muted {
  color: var(--figma-gray-500);
}

/* Button */
.figma-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: var(--figma-radius-md);
  font-size: 14px;
  font-weight: 500;
  transition: color var(--figma-transition), background var(--figma-transition), border-color var(--figma-transition);
}

.figma-btn-primary {
  color: var(--figma-white);
  background: var(--figma-black);
}

.figma-btn-primary:hover {
  background: var(--figma-gray-800);
}

.figma-btn-outline {
  color: var(--figma-black);
  border: 1px solid var(--figma-gray-200);
  background: var(--figma-white);
}

.figma-btn-outline:hover {
  border-color: var(--figma-black);
}

/* Form */
.figma-form-row {
  display: flex;
  gap: 16px;
}

.figma-form-field {
  width: 100%;
}

.figma-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--figma-gray-800);
}

.figma-input,
.figma-select,
.figma-textarea {
  width: 100%;
  border: 1px solid var(--figma-gray-200);
  border-radius: var(--figma-radius-md);
  background: var(--figma-white);
  color: var(--figma-black);
  font-size: 15px;
  outline: none;
  transition: border-color var(--figma-transition), box-shadow var(--figma-transition);
}

.figma-input,
.figma-select {
  height: 46px;
  padding: 0 14px;
}

.figma-textarea {
  min-height: 140px;
  padding: 14px;
  resize: vertical;
}

.figma-input:focus,
.figma-select:focus,
.figma-textarea:focus {
  border-color: var(--figma-blue);
  box-shadow: 0 0 0 3px rgba(31, 137, 255, 0.12);
}

/* Display */
.figma-pc-only {
  display: block;
}

.figma-mobile-only {
  display: none;
}

/* Responsive */
@media (max-width: 1023px) {
  .figma-container {
    padding: 0 24px;
  }

  .figma-section {
    padding: 72px 0;
  }

  .figma-section-sm {
    padding: 48px 0;
  }

  .figma-section-lg {
    padding: 88px 0;
  }

  .figma-title-xl {
    font-size: 42px;
  }

  .figma-title-lg {
    font-size: 32px;
  }

  .figma-pc-only {
    display: none;
  }

  .figma-mobile-only {
    display: block;
  }
}

@media (max-width: 767px) {
  .figma-container {
    padding: 0 16px;
  }

  .figma-section {
    padding: 56px 0;
  }

  .figma-section-sm {
    padding: 40px 0;
  }

  .figma-section-lg {
    padding: 72px 0;
  }

  .figma-title-xl {
    font-size: 34px;
  }

  .figma-title-lg {
    font-size: 28px;
  }

  .figma-title-md {
    font-size: 22px;
  }

  .figma-text-lg {
    font-size: 16px;
  }

  .figma-form-row {
    flex-direction: column;
    gap: 12px;
  }
}