/* ==========================================================================
   717STUDIO — style.css
   1. Font  2. Design tokens  3. Bootstrap 변수 오버라이드  4. Base  5. Section 공통  6. Utility
   ========================================================================== */

/* 1. Font ---------------------------------------------------------------- */
/* Pretendard Variable — 용량을 줄이기 위해 두 파일로 나눈다.
   1) .used  : 사이트에서 실제 쓰는 글자(약 540자)만 담은 경량본(약 83KB). 항상 이것을 먼저 받는다.
   2) .subset: 한글 KS X 1001 2,350자 전체(약 453KB). 문구를 고쳐 .used 에 없는 한글이 생길 때만 내려받는다.
   두 선언의 font-weight 범위가 같아야 unicode-range 우선순위가 동작한다. 뒤에 선언한 .used 가 우선한다.
   재생성: README "폰트 경량본 다시 만들기" 참고 */
@font-face {
  font-family: "Pretendard Variable";
  src: url("../fonts/PretendardVariable.subset.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+ac00-d7a3;
}

@font-face {
  font-family: "Pretendard Variable";
  src: url("../fonts/PretendardVariable.used.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+20-7e, U+b7, U+d7, U+2014, U+2039-203b, U+20a9, U+2190, U+2192, U+24d2, U+2605, U+ac00-ac01, U+ac04, U+ac08, U+ac10, U+ac12, U+ac19, U+ac1d, U+ac24, U+ac31, U+ac70, U+ac74, U+ac78, U+ac80, U+ac83, U+ac8c, U+aca0, U+aca8-aca9, U+acb0, U+acbd, U+acc4, U+ace0, U+acf5, U+acfc, U+ad00, U+ad04, U+ad11, U+ad50, U+ad6c-ad6d, U+ad74, U+ad81, U+ad8c, U+adc0, U+addc, U+ade0, U+adf8, U+adfc, U+ae08, U+ae0b, U+ae30, U+ae34, U+ae38, U+ae4c, U+ae54, U+aed8, U+af3c, U+afb8, U+afbc, U+afc8, U+b00c, U+b010, U+b054, U+b05d, U+b098, U+b09c, U+b0a0, U+b0a8, U+b0b4, U+b0b8, U+b108, U+b118, U+b123-b124, U+b137, U+b155, U+b178, U+b192, U+b204, U+b208, U+b20c, U+b274, U+b294, U+b298, U+b2a5, U+b2c8, U+b2d8, U+b2e4, U+b2e8, U+b2eb, U+b2f4-b2f5, U+b2f9, U+b300, U+b354, U+b370-b371, U+b378, U+b3c4, U+b3cc, U+b3d9, U+b418, U+b41c, U+b420, U+b429, U+b450, U+b4a4, U+b4dc, U+b4e0, U+b4e4, U+b4f1, U+b514, U+b530, U+b54c, U+b5a4, U+b5bb, U+b5c0, U+b610, U+b6f4, U+b77c-b77d, U+b798, U+b7a8, U+b7b5, U+b7c9, U+b7ec, U+b7fd, U+b800, U+b808-b809, U+b80c, U+b824-b825, U+b828, U+b82c, U+b835, U+b840, U+b85c-b85d, U+b864, U+b8cc, U+b958, U+b974, U+b978, U+b97c, U+b984-b985, U+b9ac-b9ad, U+b9b0, U+b9bc-b9bd, U+b9c1, U+b9c8, U+b9cc, U+b9ce, U+b9d0, U+b9de, U+b9e4, U+b9f5, U+ba38, U+ba3c, U+ba4d, U+ba54, U+ba70, U+ba74, U+ba85, U+baa8-baa9, U+babb, U+bb34, U+bb36, U+bb38, U+bb3b-bb3c, U+bbc0, U+bbf8, U+bc00, U+bc14-bc16, U+bc18, U+bc1b-bc1c, U+bc29, U+bc30, U+bc84, U+bc88, U+bc94-bc95, U+bca0, U+bca4, U+bcc0, U+bcc4, U+bcf4, U+bcf8, U+bd80, U+bd84, U+bd88, U+bd99, U+bdf0, U+be14, U+be44, U+be48, U+be60, U+c058, U+c0ac-c0ad, U+c0b0, U+c0b4, U+c0c1, U+c0c8-c0c9, U+c0dd, U+c11c-c11d, U+c120, U+c124, U+c131, U+c138-c139, U+c140, U+c154, U+c158, U+c18c-c18d, U+c1a1, U+c1fc, U+c218, U+c21c, U+c228, U+c22b, U+c2a4, U+c2b5, U+c2dc, U+c2e0, U+c2e3-c2e4, U+c2ec, U+c2fc, U+c378-c379, U+c544, U+c548, U+c54a, U+c54c, U+c558-c559, U+c55e, U+c561, U+c575, U+c57c-c57d, U+c591, U+c5b4-c5b5, U+c5b8, U+c5bc, U+c5c5-c5c6, U+c5c8, U+c5d0, U+c5ec-c5ed, U+c5f0, U+c5f4, U+c600-c601, U+c608, U+c624, U+c628, U+c635, U+c640, U+c644, U+c678, U+c694, U+c6a9, U+c6b0, U+c6b4, U+c6b8, U+c6c0, U+c6c3, U+c6cc, U+c6d0, U+c6d4, U+c704, U+c720, U+c728, U+c73c, U+c740, U+c744, U+c74c, U+c751, U+c758, U+c774, U+c778, U+c77c-c77d, U+c784-c785, U+c788, U+c790-c791, U+c798, U+c7a0, U+c7a5, U+c7ac, U+c800-c801, U+c804, U+c808, U+c810-c811, U+c815, U+c81c, U+c870-c871, U+c874, U+c885, U+c88b-c88c, U+c8fc, U+c900, U+c904, U+c911, U+c918, U+c988, U+c99d, U+c9c0-c9c1, U+c9c4, U+c9c8, U+c9d0-c9d1, U+c9dc, U+c9e7, U+c9f8, U+cabd, U+cc28-cc29, U+cc30, U+cc38, U+cc3d-cc3e, U+cc44, U+cc59, U+cc98, U+cc9c, U+cca0, U+ccab, U+ccad, U+ccb4, U+ccd0, U+cd08, U+cd2c, U+cd5c, U+cd94, U+cd9c, U+cda9, U+cdb0, U+cde8, U+ce20, U+ce35, U+ce58-ce59, U+ce5c, U+ce68-ce69, U+ce74, U+cee4, U+cee8, U+ceec, U+cef7, U+cf54, U+d06c, U+d070, U+d074, U+d07c, U+d0a4, U+d0c0-d0c1, U+d0c8, U+d0d5, U+d0dc-d0dd, U+d0ed, U+d130, U+d14c-d14d, U+d1a0-d1a1, U+d1a4, U+d1b1, U+d1b5, U+d22c, U+d29c, U+d2b8-d2b9, U+d2bc, U+d2f0, U+d301, U+d30c, U+d310, U+d398, U+d3b8, U+d3c9, U+d3d0, U+d3ec-d3ed, U+d3f0, U+d3f4, U+d45c, U+d488, U+d504, U+d508, U+d50c, U+d544, U+d551, U+d558-d559, U+d55c, U+d560, U+d568-d569, U+d56d, U+d574-d575, U+d588-d589, U+d5a5, U+d5c8, U+d5e4, U+d604, U+d615, U+d638, U+d648, U+d654-d655, U+d658, U+d65c, U+d68c, U+d6a8, U+d6c4, U+d734, U+d770, U+d788, U+d78c;
}

/* 고운돋움 (Gowun Dodum, OFL) — 히어로 해시태그 전용. "#목동증명사진여권프로필가족" 글자만 담은 서브셋.
   해시태그 문구를 바꾸면 새 글자가 포함된 서브셋으로 다시 만들어야 한다. */
@font-face {
  font-family: "Gowun Dodum";
  src: url("../fonts/GowunDodum-hashtag.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 2. Design tokens ------------------------------------------------------- */
:root {
  /* Color */
  --c-black: #111111;
  --c-white: #ffffff;
  --c-gold: #b89b6a;
  --c-gold-dark: #77602f; /* 흰 배경 위 작은 글씨용 (대비 확보) */
  --c-ivory: #f5f1ea;
  --c-charcoal: #444444;
  --c-gray: #6b6b6b; /* 작은 글씨용 회색 (흰·아이보리 배경 대비 4.8:1 이상) */
  --c-line: #e6e2da;
  --c-no: #a53a2a; /* 주차 불가·휴무 등 부정 안내 */
  --c-open: #25693f; /* 영업 중 */

  /* Font */
  --font-base: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  /* Spacing */
  --space-section: 96px;
  --space-section-sm: 56px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;

  /* Layout */
  --header-h: 72px;
  --mobile-bar-h: 60px;
  --radius: 2px;
  --transition: 0.25s ease;
}

/* 3. Bootstrap 변수 오버라이드 --------------------------------------------- */
:root,
[data-bs-theme="light"] {
  --bs-body-font-family: var(--font-base);
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.7;
  --bs-body-color: var(--c-charcoal);
  --bs-body-color-rgb: 68, 68, 68;
  --bs-body-bg: var(--c-white);
  --bs-heading-color: var(--c-black);
  --bs-link-color: var(--c-black);
  --bs-link-color-rgb: 17, 17, 17;
  --bs-link-hover-color: var(--c-gold-dark);
  --bs-link-hover-color-rgb: 143, 118, 74;
  --bs-border-color: var(--c-line);
  --bs-border-radius: var(--radius);
  --bs-border-radius-sm: var(--radius);
  --bs-border-radius-lg: var(--radius);
  --bs-primary: var(--c-black);
  --bs-primary-rgb: 17, 17, 17;
  --bs-secondary: var(--c-gold);
  --bs-secondary-rgb: 184, 155, 106;
  --bs-focus-ring-color: rgba(184, 155, 106, 0.45);
}

/* 버튼: 블랙 기본, 골드 아웃라인 보조 */
.btn {
  --bs-btn-border-radius: var(--radius);
  --bs-btn-font-weight: 600;
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-padding-y: 0.7rem;
  letter-spacing: 0.02em;
  transition: all var(--transition);
}

.btn-dark,
.btn-primary {
  --bs-btn-bg: var(--c-black);
  --bs-btn-border-color: var(--c-black);
  --bs-btn-color: var(--c-white);
  --bs-btn-hover-bg: var(--c-gold-dark);
  --bs-btn-hover-border-color: var(--c-gold-dark);
  --bs-btn-hover-color: var(--c-white);
  --bs-btn-active-bg: var(--c-gold-dark);
  --bs-btn-active-border-color: var(--c-gold-dark);
  --bs-btn-active-color: var(--c-white);
}

.btn-outline-dark {
  --bs-btn-color: var(--c-black);
  --bs-btn-border-color: var(--c-black);
  --bs-btn-hover-bg: var(--c-black);
  --bs-btn-hover-border-color: var(--c-black);
  --bs-btn-hover-color: var(--c-white);
  --bs-btn-active-bg: var(--c-black);
  --bs-btn-active-border-color: var(--c-black);
}

.btn-gold {
  --bs-btn-bg: var(--c-gold);
  --bs-btn-border-color: var(--c-gold);
  --bs-btn-color: var(--c-black);
  --bs-btn-hover-bg: var(--c-white);
  --bs-btn-hover-border-color: var(--c-white);
  --bs-btn-hover-color: var(--c-black);
  --bs-btn-active-bg: var(--c-white);
  --bs-btn-active-border-color: var(--c-white);
  --bs-btn-active-color: var(--c-black);
}

/* 4. Base ---------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  transition: color var(--transition);
}

:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 2px;
}

::selection {
  background: var(--c-gold);
  color: var(--c-black);
}

/* 5. Section 공통 -------------------------------------------------------- */
.section {
  padding-top: var(--space-section-sm);
  padding-bottom: var(--space-section-sm);
}

.section-dark {
  background: var(--c-black);
  color: rgba(255, 255, 255, 0.82);
  --bs-heading-color: var(--c-white);
}

.section-ivory {
  background: var(--c-ivory);
}

.section-title {
  margin-bottom: var(--space-4);
}

.section-title .eyebrow {
  display: block;
  margin-bottom: var(--space-1);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-gold-dark);
}

.section-dark .section-title .eyebrow {
  color: var(--c-gold);
}

@media (min-width: 992px) {
  .section {
    padding-top: var(--space-section);
    padding-bottom: var(--space-section);
  }
}

/* 6. Utility ------------------------------------------------------------- */
.text-gold {
  color: var(--c-gold) !important;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}