@charset "utf-8";
/* ==========================================================================
   법률사무소 올본 (OLBON LAW OFFICE) — common.css
   공통 토큰 / 리셋 / 타이포 / 헤더·GNB / 푸터 / 퀵바 / 폼 / 서브비주얼
   ========================================================================== */

/* Pretendard (CDN) — 오프라인 환경이면 아래 @import 를 지우고 로컬 폰트를 연결하세요. */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

/* --------------------------------------------------------------------------
   1. Design Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Color */
  --navy: #0f2540;
  --navy-800: #16324f;
  --navy-600: #24466a;
  --gold: #b08d57;
  --gold-light: #c9a97a;
  --gold-dark: #8f7043;
  /* 밝은 배경 위 작은 글씨용 골드 — WCAG AA(4.5:1) 확보 */
  --gold-text: #8f7043;
  /* 로고 전용 — 어두운 배경 위 샴페인 골드 */
  --champagne: #d9c08f;
  --gray-bg: #f5f6f8;
  --gray-line: #e3e6ea;
  --gray-text: #6b7280;
  --text: #222222;
  --white: #ffffff;

  /* Layout */
  --container: 1280px;
  --gutter: 24px;
  --section-pad: 120px;
  --header-h: 88px;
  --header-h-scrolled: 70px;

  /* Motion */
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur: 0.35s;

  /* Radius / Shadow */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
  --shadow-sm: 0 2px 10px rgba(15, 37, 64, 0.06);
  --shadow-md: 0 10px 30px rgba(15, 37, 64, 0.1);
  --shadow-lg: 0 20px 50px rgba(15, 37, 64, 0.14);
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol, li, form, fieldset, legend, table, th, td {
  margin: 0; padding: 0;
}
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; vertical-align: middle; border: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }
address { font-style: normal; }
fieldset { border: 0; }
legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg { display: block; }

body {
  font-family: "Pretendard Variable", Pretendard, "Noto Sans KR", -apple-system,
    BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: -0.02em;
  color: var(--text);
  background: var(--white);
  word-break: keep-all;
  overflow-wrap: break-word;
}
body.is-locked { overflow: hidden; }

/* 접근성: 스크린리더 전용 / 건너뛰기 링크 */
.blind {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 50%; top: -100px; z-index: 9999;
  transform: translateX(-50%);
  padding: 12px 24px; background: var(--navy); color: #fff;
  border-radius: 0 0 var(--r-md) var(--r-md);
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 0; }

/* 키보드 포커스 스타일 유지 (WCAG 2.4.7) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5 { font-weight: 700; line-height: 1.35; letter-spacing: -0.03em; }
.h1, h1 { font-size: 48px; }
.h2, h2 { font-size: 36px; }
.h3, h3 { font-size: 24px; }
.h4, h4 { font-size: 20px; }

.sec-head { margin-bottom: 56px; text-align: center; }
.sec-head.is-left { text-align: left; }
.sec-eyebrow {
  display: inline-block; margin-bottom: 14px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold-text);
}
.sec-eyebrow::after {
  content: ""; display: block; width: 28px; height: 2px;
  margin: 10px auto 0; background: var(--gold);
}
.sec-head.is-left .sec-eyebrow::after { margin-left: 0; }
.sec-title { font-size: 36px; color: var(--navy); }
.sec-title .pt { color: var(--gold); }
.sec-desc { margin-top: 18px; font-size: 17px; color: var(--gray-text); }

.text-gold { color: var(--gold); }
.text-navy { color: var(--navy); }
.text-muted { color: var(--gray-text); }

/* --------------------------------------------------------------------------
   4. Layout helpers
   -------------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section-pad) 0; }
.section--gray { background: var(--gray-bg); }
.section--navy { background: var(--navy); color: #fff; }
.section--navy .sec-title { color: #fff; }
.section--navy .sec-desc { color: rgba(255, 255, 255, 0.72); }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 30px;
  font-size: 16px; font-weight: 600; letter-spacing: -0.02em;
  border: 1px solid transparent; border-radius: var(--r-sm);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-600); }
/* 골드 버튼: 브랜드 컬러(#B08D57) 유지 + 텍스트는 네이비 → 대비 5.00:1 (AA) */
.btn--gold { background: var(--gold); color: var(--navy); }
.btn--gold:hover { background: var(--gold-light); color: var(--navy); }
.btn--line { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn--line:hover { background: var(--navy); color: #fff; }
.btn--line-white { border-color: rgba(255, 255, 255, 0.6); color: #fff; }
.btn--line-white:hover { background: #fff; color: var(--navy); }
.btn--sm { min-height: 42px; padding: 0 20px; font-size: 14px; }
.btn--lg { min-height: 60px; padding: 0 40px; font-size: 17px; }
.btn--block { width: 100%; }
.btn .ico-arrow { width: 16px; height: 16px; fill: currentColor; }

.link-more {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--gold-text);
}
.link-more::after {
  content: ""; width: 14px; height: 1px; background: currentColor;
  transition: width var(--dur) var(--ease);
}
.link-more:hover::after { width: 24px; }

/* --------------------------------------------------------------------------
   6. Logo (SVG) — 색상 규칙
      · 밝은 배경  → 네이비 #0F2540      (--navy)
      · 어두운 배경 → 샴페인 골드 #D9C08F (--champagne)
      심볼 SVG 내부가 fill="currentColor" 이므로 부모의 color 값만 바꾸면 됩니다.
      심볼 원본: assets/js/layout.js 의 LOGO_SYMBOL_SVG
      단색 파일: assets/images/logo-navy.svg / logo-champagne.svg
   -------------------------------------------------------------------------- */
.logo { display: inline-flex; align-items: center; gap: 13px; color: var(--navy); }
.logo__mark { width: 42px; height: 47px; flex: none; }
.logo__mark svg { width: 100%; height: 100%; fill: currentColor; }
.logo__mark img { width: 100%; height: 100%; object-fit: contain; }
.logo__text { display: flex; flex-direction: column; line-height: 1.1; }
.logo__ko { font-size: 17px; font-weight: 700; letter-spacing: -0.03em; }
.logo__en { font-size: 10px; font-weight: 600; letter-spacing: 0.22em; opacity: 0.75; }
/* 어두운 배경 위 (헤더 투명 상태 / 푸터 / 모바일 메뉴) → 샴페인 골드 */
.logo--on-dark { color: var(--champagne); }

/* --------------------------------------------------------------------------
   7. Header + GNB
   -------------------------------------------------------------------------- */
.header {
  position: fixed; top: 0; left: 0; z-index: 200; width: 100%;
  height: var(--header-h);
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  transition: height var(--dur) var(--ease), background var(--dur) var(--ease),
    border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter);
}
/* 투명 상태(메인 히어로 위) 기본 글자색 — 로고는 샴페인 골드 */
.header .logo { color: var(--champagne); }
.header .gnb__link { color: #fff; }
.header__tel { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.header__toggle span { background: #fff; }

/* 스크롤 후 / 서브페이지 : 흰 배경 */
.header.is-solid {
  height: var(--header-h-scrolled);
  background: #fff;
  border-bottom-color: var(--gray-line);
  box-shadow: var(--shadow-sm);
}
.header.is-solid .logo { color: var(--navy); }
.header.is-solid .gnb__link { color: var(--text); }
.header.is-solid .header__tel { color: var(--navy); border-color: var(--navy); }
.header.is-solid .header__toggle span { background: var(--navy); }
/* 드롭다운이 열려 있을 때도 흰 배경 유지 */
.header.is-open { background: #fff; }

/* GNB */
.gnb { display: flex; height: 100%; }
.gnb__item { position: relative; height: 100%; }
.gnb__link {
  display: flex; align-items: center; height: 100%; padding: 0 26px;
  font-size: 17px; font-weight: 600; white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.gnb__item:hover > .gnb__link,
.gnb__item.is-current > .gnb__link { color: var(--gold-text) !important; }
/* 헤더가 투명(어두운 배경)일 때는 밝은 골드로 — 명도 대비 확보 */
.header:not(.is-solid) .gnb__item:hover > .gnb__link,
.header:not(.is-solid) .gnb__item.is-current > .gnb__link { color: var(--gold-light) !important; }
.gnb__item.is-current > .gnb__link { position: relative; }
.gnb__item.is-current > .gnb__link::after {
  content: ""; position: absolute; left: 26px; right: 26px; bottom: 22px;
  height: 2px; background: var(--gold);
}

/* 2depth 드롭다운 */
.gnb__sub {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 190px; padding: 14px 0;
  background: #fff; border: 1px solid var(--gray-line); border-top: 2px solid var(--gold);
  border-radius: 0 0 var(--r-md) var(--r-md); box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.gnb__item:hover > .gnb__sub,
.gnb__item:focus-within > .gnb__sub {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.gnb__sub a {
  display: block; padding: 9px 24px; font-size: 15px; color: var(--text);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.gnb__sub a:hover { color: var(--gold-text); background: var(--gray-bg); }

/* 우측 전화 CTA */
.header__util { display: flex; align-items: center; gap: 14px; }
.header__tel {
  display: inline-flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 20px;
  border: 1px solid; border-radius: 100px;
  font-size: 16px; font-weight: 700; letter-spacing: 0.01em;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.header__tel svg { width: 16px; height: 16px; fill: currentColor; }
.header__tel small { display: block; font-size: 11px; font-weight: 500; opacity: 0.7; letter-spacing: 0; }
.header__tel:hover { background: var(--gold); border-color: var(--gold) !important; color: #fff !important; }

/* 햄버거 */
.header__toggle {
  display: none; position: relative; width: 44px; height: 44px;
}
.header__toggle span {
  position: absolute; left: 11px; width: 22px; height: 2px; border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), background var(--dur) var(--ease);
}
.header__toggle span:nth-child(1) { top: 15px; }
.header__toggle span:nth-child(2) { top: 21px; }
.header__toggle span:nth-child(3) { top: 27px; }

/* --------------------------------------------------------------------------
   8. Mobile full-screen navigation
   -------------------------------------------------------------------------- */
.mnav {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 300;
  display: flex; flex-direction: column;
  background: var(--navy); color: #fff;
  transform: translateX(100%); visibility: hidden;
  transition: transform 0.4s var(--ease), visibility 0.4s;
  overflow-y: auto; overscroll-behavior: contain;
}
.mnav.is-active { transform: translateX(0); visibility: visible; }
.mnav__top {
  display: flex; align-items: center; justify-content: space-between;
  height: 70px; padding: 0 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  flex: none;
}
.mnav__close { position: relative; width: 44px; height: 44px; }
.mnav__close::before, .mnav__close::after {
  content: ""; position: absolute; left: 11px; top: 21px;
  width: 22px; height: 2px; background: #fff; border-radius: 2px;
}
.mnav__close::before { transform: rotate(45deg); }
.mnav__close::after { transform: rotate(-45deg); }
.mnav__body { flex: 1; padding: 10px 20px 40px; }
.mnav__item { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.mnav__link {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 18px 4px; font-size: 20px; font-weight: 700; text-align: left;
}
.mnav__link .arw {
  width: 10px; height: 10px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(45deg); transition: transform var(--dur) var(--ease); flex: none;
}
.mnav__item.is-open .mnav__link { color: var(--gold); }
.mnav__item.is-open .mnav__link .arw { transform: rotate(-135deg); }
.mnav__sub { display: none; padding: 4px 4px 18px; }
.mnav__item.is-open .mnav__sub { display: block; }
.mnav__sub a {
  display: block; padding: 9px 0 9px 14px; font-size: 16px;
  color: rgba(255, 255, 255, 0.78); border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.mnav__sub a:hover { color: var(--gold); }
.mnav__foot { padding: 24px 20px 40px; background: rgba(0, 0, 0, 0.18); flex: none; }
.mnav__tel { display: block; font-size: 26px; font-weight: 800; color: var(--gold); }
.mnav__foot p { font-size: 14px; color: rgba(255, 255, 255, 0.66); }

/* --------------------------------------------------------------------------
   9. Quick side bar / mobile bottom bar
   -------------------------------------------------------------------------- */
.quick {
  position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 150;
  width: 76px; background: #fff; border: 1px solid var(--gray-line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md); overflow: hidden;
}
.quick__head {
  padding: 12px 6px; background: var(--navy); color: #fff; text-align: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
}
.quick__list li + li { border-top: 1px solid var(--gray-line); }
.quick__list a, .quick__list button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 100%; padding: 14px 4px; font-size: 11.5px; font-weight: 600; color: var(--navy);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.quick__list a:hover, .quick__list button:hover { background: var(--gray-bg); color: var(--gold-text); }
.quick__list svg { width: 22px; height: 22px; fill: currentColor; }
.quick__top { border-top: 1px solid var(--gray-line); background: var(--gray-bg); }

/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */
.footer { background: var(--navy); color: rgba(255, 255, 255, 0.72); font-size: 14px; }
.footer__top { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.footer__top .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 26px; padding-bottom: 26px; }
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.footer__links a { font-size: 14px; color: rgba(255, 255, 255, 0.8); }
.footer__links a:hover { color: var(--gold); }
.footer__links a.is-strong { color: #fff; font-weight: 700; }
.footer__main .container { display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; padding-top: 48px; padding-bottom: 48px; }
.footer__info { max-width: 720px; }
.footer__info dl { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 18px; }
.footer__info dl > div { display: flex; gap: 8px; }
.footer__info dt { color: rgba(255, 255, 255, 0.5); }
.footer__copy { margin-top: 22px; font-size: 13px; color: rgba(255, 255, 255, 0.45); }
.footer__notice {
  margin-top: 14px; padding: 12px 16px; font-size: 12.5px; line-height: 1.65;
  color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.05); border-radius: var(--r-sm);
}
.footer__cta { display: flex; flex-direction: column; gap: 12px; min-width: 240px; }
.footer__cta .tel { font-size: 30px; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.footer__cta .tel span { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; color: var(--gold); }
.footer__cta .time { font-size: 13.5px; }
.footer__sns { display: flex; gap: 8px; }
.footer__sns a {
  flex: 1; text-align: center; padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.28); border-radius: var(--r-sm);
  font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, 0.85);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.footer__sns a:hover { background: var(--champagne); border-color: var(--champagne); color: var(--navy); }

/* --------------------------------------------------------------------------
   11. Sub visual + Breadcrumb
   -------------------------------------------------------------------------- */
.subvisual {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 340px; margin-top: var(--header-h-scrolled);
  background: var(--navy) center/cover no-repeat;
  color: #fff; text-align: center; overflow: hidden;
}
/* 이미지가 없어도 깨지지 않도록 그라데이션 폴백을 기본값으로 둡니다.
   실제 이미지 사용 시: style="background-image:url('assets/images/sub-xxx.jpg')" 추가 */
.subvisual::before {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(135deg, #0f2540 0%, #17385c 55%, #0c1d33 100%);
  opacity: 0.92;
}
.subvisual::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background-image: radial-gradient(rgba(176, 141, 87, 0.25) 1px, transparent 1px);
  background-size: 22px 22px; opacity: 0.5;
}
/* 배경 사진이 지정된 서브비주얼 : 인물이 오른쪽에 오도록 위치 조정 + 오버레이 */
.subvisual.has-photo { background-position: center 30%; }
.subvisual.has-photo::before {
  background: linear-gradient(90deg, rgba(8, 20, 35, 0.95) 0%, rgba(8, 20, 35, 0.88) 40%, rgba(8, 20, 35, 0.6) 72%, rgba(8, 20, 35, 0.4) 100%);
  opacity: 1;
}
.subvisual.has-photo::after { opacity: 0.22; }
@media (max-width: 767px) {
  /* 모바일에서는 인물이 화면 밖으로 잘리므로 위아래 그라데이션으로 전환 */
  .subvisual.has-photo::before {
    background: linear-gradient(180deg, rgba(8, 20, 35, 0.9) 0%, rgba(8, 20, 35, 0.84) 100%);
  }
}
.subvisual__inner { position: relative; z-index: 2; padding: 0 var(--gutter); }
.subvisual__en { font-size: 12px; font-weight: 700; letter-spacing: 0.24em; color: var(--gold); text-transform: uppercase; }
.subvisual__title { margin-top: 12px; font-size: 44px; }
.subvisual__desc { margin-top: 14px; font-size: 17px; color: rgba(255, 255, 255, 0.78); }

.breadcrumb { border-bottom: 1px solid var(--gray-line); background: #fff; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; height: 56px; font-size: 13.5px; color: var(--gray-text); }
.breadcrumb li { display: flex; align-items: center; gap: 8px; }
.breadcrumb li + li::before {
  content: ""; width: 6px; height: 6px; border-right: 1px solid #b9bec6; border-bottom: 1px solid #b9bec6;
  transform: rotate(-45deg);
}
.breadcrumb li[aria-current] { color: var(--navy); font-weight: 600; }
.breadcrumb svg { width: 14px; height: 14px; fill: currentColor; }

/* --------------------------------------------------------------------------
   12. Forms
   -------------------------------------------------------------------------- */
.form-row { margin-bottom: 18px; }
.form-row label, .form-label {
  display: block; margin-bottom: 8px; font-size: 14.5px; font-weight: 600; color: var(--navy);
}
.form-label .req, .form-row label .req { color: #d64545; margin-left: 2px; }
.form-control {
  width: 100%; min-height: 52px; padding: 12px 16px;
  background: #fff; border: 1px solid var(--gray-line); border-radius: var(--r-sm);
  font-size: 15.5px; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.form-control::placeholder { color: #a5abb4; }
.form-control:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176, 141, 87, 0.15); outline: none; }
textarea.form-control { min-height: 140px; resize: vertical; line-height: 1.7; }
select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 11px;
  padding-right: 42px;
}
.form-control.is-error { border-color: #d64545; background: #fff7f7; }
.form-error { display: none; margin-top: 6px; font-size: 13px; color: #d64545; }
.form-error.is-visible { display: block; }

.agree-box {
  padding: 18px 20px; background: var(--gray-bg); border: 1px solid var(--gray-line);
  border-radius: var(--r-sm); font-size: 13px; line-height: 1.75; color: var(--gray-text);
  max-height: 150px; overflow-y: auto;
}
.agree-box strong { display: block; margin-bottom: 6px; color: var(--navy); font-size: 13.5px; }
.agree-box dl { display: grid; grid-template-columns: 92px 1fr; gap: 4px 10px; margin-top: 8px; }
.agree-box dt { font-weight: 600; color: var(--navy); }
.checkbox { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; font-size: 14.5px; cursor: pointer; }
.checkbox input { width: 19px; height: 19px; margin-top: 3px; accent-color: var(--gold); flex: none; }

/* 스팸 봇 차단용 허니팟 — 화면에는 보이지 않습니다 */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* 전송 실패 안내 */
.form-fail {
  margin-top: 16px; padding: 16px 18px;
  background: #fff7f7; border: 1px solid #f0c9c9; border-radius: var(--r-sm);
  font-size: 14.5px; line-height: 1.65; color: #7d3a3a;
}
.form-fail[hidden] { display: none; }
.form-fail b { color: #c23b3b; }
.form-fail__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.form-fail__btns .btn { flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   13. Cards / Badges / Misc
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; height: 30px; padding: 0 13px;
  border-radius: 100px; font-size: 13px; font-weight: 700; letter-spacing: -0.01em;
}
.badge--gold { background: rgba(176, 141, 87, 0.13); color: var(--gold-dark); }
.badge--navy { background: rgba(15, 37, 64, 0.08); color: var(--navy); }
.badge--outline { border: 1px solid var(--gold); color: var(--gold); }

.tag {
  display: inline-flex; align-items: center; height: 26px; padding: 0 11px;
  background: var(--navy); color: #fff; border-radius: var(--r-sm);
  font-size: 12.5px; font-weight: 700;
}
.tag--ip { background: var(--gold); }

/* 이미지 없는 상태 대비 플레이스홀더 */
.ph {
  position: relative; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #e9ecf1 0%, #dfe4ea 100%);
  color: #98a0ab; font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  overflow: hidden;
}
.ph::after {
  content: ""; position: absolute; top: 10px; right: 10px; bottom: 10px; left: 10px; border: 1px dashed rgba(15, 37, 64, 0.16);
  pointer-events: none;
}
.ph--navy { background: linear-gradient(135deg, #17385c 0%, #0f2540 100%); color: rgba(255, 255, 255, 0.5); }
.ph--navy::after { border-color: rgba(255, 255, 255, 0.18); }
/* 실제 이미지가 들어간 경우: 점선 안내 테두리 제거 */
.ph.has-img { background: var(--navy); }
.ph.has-img::after { display: none; }
.ph img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

/* aspect-ratio 미지원 브라우저(iOS 15 미만 등) 폴백 — padding 비율로 높이 확보 */
@supports not (aspect-ratio: 1 / 1) {
  .ph { height: 0; }
  .intro__photo .ph, .profile__photo .ph { padding-bottom: 125%; }  /* 4:5 */
  .greeting__photo .ph { padding-bottom: 133.33%; }                 /* 3:4 */
  .field-intro__visual .ph { padding-bottom: 75%; }                 /* 4:3 */
  .map__embed .ph { height: 100%; padding-bottom: 0; }
}

/* 개인정보 등 텍스트 문서 */
.doc { font-size: 15.5px; line-height: 1.85; color: #444; }
.doc h2 { margin: 44px 0 14px; font-size: 22px; color: var(--navy); }
.doc h2:first-child { margin-top: 0; }
.doc p + p { margin-top: 12px; }
.doc ul { margin: 10px 0 0 2px; }
.doc ul li { position: relative; padding-left: 14px; }
.doc ul li::before { content: ""; position: absolute; left: 0; top: 13px; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }

/* 토스트 (전화번호 안내 / 복사 완료) */
.toast {
  position: fixed; left: 50%; bottom: 84px; z-index: 500;
  transform: translate(-50%, 12px);
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px;
  max-width: calc(100% - 32px); padding: 12px 18px;
  background: rgba(15, 37, 64, 0.96); color: #fff; border-radius: 100px;
  font-size: 13.5px; line-height: 1.45; text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}
.toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.toast b { color: var(--champagne); font-size: 15.5px; font-weight: 800; }
.toast button {
  padding: 6px 13px; border-radius: 100px; background: rgba(255, 255, 255, 0.18);
  color: #fff; font-size: 12.5px; font-weight: 600;
}
.toast button:hover { background: rgba(255, 255, 255, 0.3); }
@media (min-width: 1025px) { .toast { bottom: 28px; } }

/* 고지 문구 */
.disclaimer {
  margin-top: 40px; padding: 20px 24px;
  background: var(--gray-bg); border-left: 3px solid var(--gold); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 13.5px; line-height: 1.75; color: var(--gray-text);
}
.disclaimer strong { color: var(--navy); }

/* --------------------------------------------------------------------------
   14. Responsive — Tablet (≤1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root { --section-pad: 88px; --header-h: 70px; --header-h-scrolled: 64px; }
  .h1, h1 { font-size: 38px; }
  .h2, h2, .sec-title { font-size: 30px; }
  .h3, h3 { font-size: 21px; }
  .subvisual { height: 280px; }
  .subvisual__title { font-size: 34px; }

  .logo__mark { width: 36px; height: 40px; }
  .logo__ko { font-size: 16px; }
  .gnb, .header__tel { display: none; }
  .header__toggle { display: block; }
  .quick { display: none; }

  /* 모바일 하단 고정 바 */
  .quickbar {
    position: fixed; left: 0; bottom: 0; z-index: 150; display: flex; width: 100%;
    background: var(--navy); border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .quickbar a, .quickbar button {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 9px 2px; font-size: 11px; font-weight: 600; color: #fff;
  }
  .quickbar a + a, .quickbar a + button { border-left: 1px solid rgba(255, 255, 255, 0.12); }
  .quickbar svg { width: 19px; height: 19px; fill: currentColor; }
  .quickbar .is-point { color: var(--gold); }
  body { padding-bottom: 62px; }
}
@media (min-width: 1025px) { .quickbar { display: none; } }

/* --------------------------------------------------------------------------
   15. Responsive — Mobile (≤767px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  :root { --section-pad: 64px; --gutter: 20px; }
  body { font-size: 15.5px; }
  .h1, h1 { font-size: 30px; }
  .h2, h2, .sec-title { font-size: 25px; }
  .h3, h3 { font-size: 19px; }
  .sec-head { margin-bottom: 36px; }
  .sec-desc { font-size: 15.5px; }
  .subvisual { height: 220px; }
  .subvisual__title { font-size: 28px; }
  .subvisual__desc { font-size: 15px; }
  .breadcrumb ol { height: 48px; font-size: 12.5px; }
  .btn { min-height: 50px; }
  .btn--lg { min-height: 54px; font-size: 16px; }

  .footer__top .container { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer__main .container { flex-direction: column; gap: 30px; }
  .footer__info dl { flex-direction: column; gap: 2px; }
  .footer__cta .tel { font-size: 26px; }
}

/* --------------------------------------------------------------------------
   16. Motion 저감 설정 존중
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-aos] { opacity: 1 !important; transform: none !important; }
}

/* 인쇄 */
@media print {
  .header, .mnav, .quick, .quickbar, .footer__cta { display: none !important; }
  body { padding-bottom: 0; }
}