/* ==========================================================
   데이지 웨딩 — 공통 스타일 (모든 페이지)
   디자인 토큰 · 폰트 · 내비게이션 · 푸터 · 공통 애니메이션
   ========================================================== */

/* ---------- 폰트 ---------- */
@font-face { font-family: 'Cheom'; src: url('../assets/fonts/cheum-L.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cheom'; src: url('../assets/fonts/cheum-R.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cheom'; src: url('../assets/fonts/cheum-B.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aram'; src: url('../assets/fonts/aram-L.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aram'; src: url('../assets/fonts/aram-R.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aram'; src: url('../assets/fonts/aram-B.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Didim'; src: url('../assets/fonts/didim-010.otf') format('opentype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Didim'; src: url('../assets/fonts/didim-020.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Didim'; src: url('../assets/fonts/didim-040.otf') format('opentype'); font-weight: 700; font-display: swap; }

/* ---------- 디자인 토큰 ---------- */
:root {
  --bg-page: #FBF8F1;
  --bg-input: #FDFCF8;
  --bg-card: #fff;
  --bg-contract: #EFEAE0;
  --tx-body: #4A4033;
  --tx-title: #5C452B;
  --tx-label: #6B6152;
  --tx-muted: #A79C87;
  --tx-faint: #B3A88F;
  --gold-deep: #8A6420;
  --gold: #B98A2F;
  --gold-focus: #C9A24B;
  --gold-border: #E8C86B;
  --brown: #6D4A2B;
  --brown-dark: #57381E;
  --border-input: #E4DBC8;
  --line: #EFE8D8;
  --line-soft: #F4EEDF;
  --green: #6E7F3C;
  --kakao: #FAE100;
  --kakao-tx: #3A2E10;
  --err: #B0492F;
  --err-bg: #FBEFEA;
  --err-border: #EDCDC0;
  --hero-dark: #2A241B;
  --serif: 'Cheom', 'Noto Serif KR', serif;
  --sans: 'Aram', 'Noto Sans KR', sans-serif;
  --display: 'Didim', 'Noto Serif KR', serif;
}

/* ---------- 베이스 ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg-page); }
body { font-family: var(--sans); color: var(--tx-body); -webkit-font-smoothing: antialiased; word-break: keep-all; line-break: strict; overflow-wrap: break-word; }

/* ===== 한글 타이포그래피 (한글 배치법칙 준수) ===== */
/* §2 제목: 균형 줄바꿈 / §3 본문: 외톨이 방지 줄바꿈 (word-break·line-break는 body에서 상속) */
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
/* §8 공통 클래스 */
.ko-text { word-break: keep-all; line-break: strict; overflow-wrap: break-word; }
.ko-title { word-break: keep-all; line-break: strict; text-wrap: balance; }
.ko-body { word-break: keep-all; line-break: strict; text-wrap: pretty; }
/* §7 URL·이메일 등 공백 없는 긴 문자열 전용 */
.breakable-text { overflow-wrap: anywhere; word-break: break-word; }
/* 구절 단위 줄바꿈: 각 구절을 <span class="ko-phrase">로 감싸면 넓은 화면은 한 줄,
   좁은 화면은 구절(쉼표) 경계에서 나뉨 — br 없이 PC·모바일 각자 자연스럽게 적응 */
.ko-phrase { display: inline-block; }
img { max-width: 100%; }
a { color: inherit; }
button { font-family: var(--sans); }
input, textarea, select { font-family: var(--sans); }
input::placeholder, textarea::placeholder { color: #C2B79F; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--gold-focus) !important; box-shadow: 0 0 0 3px rgba(201,162,75,.15); }

/* ---------- 공통 애니메이션 ---------- */
@keyframes dwUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dwFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes dwDrop { 0% { transform: translateY(0); opacity: 1; } 70% { opacity: 1; } 100% { transform: translateY(26px); opacity: 0; } }
@keyframes dwFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes dwFlareA { 0% { transform: translate(-7%,-5%) scale(1); opacity: .18; } 50% { transform: translate(5%,4%) scale(1.18); opacity: .4; } 100% { transform: translate(-7%,-5%) scale(1); opacity: .18; } }
@keyframes dwFlareB { 0% { transform: translate(6%,7%) scale(1.12); opacity: .12; } 50% { transform: translate(-5%,-4%) scale(1); opacity: .3; } 100% { transform: translate(6%,7%) scale(1.12); opacity: .12; } }
@keyframes dwBeam { 0% { transform: translateY(-20%); opacity: 0; } 12% { opacity: var(--op,1); } 88% { opacity: var(--op,1); } 100% { transform: translateY(320%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ab-beam { animation: none !important; opacity: 0 !important; } }

/* [data-reveal] 요소는 JS가 뷰포트 진입 시 나타나게 처리 */

/* ==========================================================
   내비게이션 (js/common.js 가 #dwNav 에 렌더)
   ========================================================== */
.dw-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(252,250,244,.9);
  box-shadow: 0 2px 18px rgba(92,69,43,.08);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: background .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.dw-header__inner {
  max-width: 1240px; margin: 0 auto; padding: 0 20px; height: 68px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.dw-header__logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.dw-header__logo img { height: 52px; width: auto; object-fit: contain; transition: filter .4s ease; }
.dw-nav { display: flex; align-items: center; gap: 30px; }
.dw-nav__link {
  text-decoration: none; font-size: 15px; letter-spacing: .02em;
  color: var(--tx-title); font-weight: 400; padding: 6px 2px;
  border-bottom: 2px solid transparent; transition: color .3s ease;
}
.dw-nav__link:hover { color: var(--gold); }
.dw-nav__link.is-active { color: var(--gold); font-weight: 600; border-bottom-color: #E4C165; }
.dw-nav__cta {
  text-decoration: none; font-size: 14px; font-weight: 400; letter-spacing: .02em;
  color: #FFFDF6; background: var(--brown); padding: 10px 22px; border-radius: 100px;
  box-shadow: 0 3px 10px rgba(109,74,43,.28);
  transition: transform .25s ease, background .25s ease;
}
.dw-nav__cta:hover { background: var(--brown-dark); transform: translateY(-1px); }

/* 투명 모드 (홈 상단, 스크롤 전) */
.dw-header--clear { background: rgba(30,26,18,0); box-shadow: none; border-bottom-color: rgba(255,255,255,0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); }
.dw-header--clear .dw-header__logo img { filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0,0,0,.35)); }
.dw-header--clear .dw-nav__link { color: rgba(255,253,246,.92); }
.dw-header--clear .dw-nav__link:hover { color: #FFE895; }
.dw-header--clear .dw-nav__link.is-active { color: #FFE895; border-bottom-color: rgba(255,232,149,.9); }
.dw-header--clear .dw-burger { border-color: rgba(255,255,255,.35); }
.dw-header--clear .dw-burger span { background: #FFFDF6; }

/* 모바일 버거 버튼 */
.dw-burger {
  display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  width: 44px; height: 44px; background: rgba(255,255,255,.14);
  border: 1px solid var(--border-input); border-radius: 10px; cursor: pointer; padding: 0;
}
.dw-burger span { display: block; width: 18px; height: 2px; background: var(--brown); border-radius: 2px; }
.dw-burger span:nth-child(3) { width: 12px; align-self: center; margin-right: 6px; }

@media (max-width: 859px) {
  .dw-nav { display: none; }
  .dw-burger { display: flex; }
}

/* 모바일 전체화면 메뉴 */
.dw-mobile-menu {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(251,248,241,.98);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: none; flex-direction: column;
}
.dw-mobile-menu.is-open { display: flex; animation: dwFadeIn .3s ease both; }
.dw-mobile-menu__top { display: flex; align-items: center; justify-content: space-between; height: 68px; padding: 0 20px; }
.dw-mobile-menu__top img { height: 48px; width: auto; object-fit: contain; }
.dw-mobile-menu__close { width: 44px; height: 44px; border: 1px solid var(--border-input); background: #fff; border-radius: 10px; cursor: pointer; font-size: 18px; color: var(--brown); line-height: 1; }
.dw-mobile-menu__nav { display: flex; flex-direction: column; gap: 6px; padding: 28px 28px 0; flex: 1; }
.dw-mobile-menu__link {
  text-decoration: none; font-family: var(--serif); font-size: 26px; padding: 12px 4px;
  color: var(--tx-title); font-weight: 400; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
}
.dw-mobile-menu__link.is-active { color: var(--gold); font-weight: 600; }
.dw-mobile-menu__link .arrow { font-size: 14px; color: #C9BFA9; }
.dw-mobile-menu__cta {
  margin-top: 26px; text-decoration: none; text-align: center; font-size: 16px; font-weight: 600;
  color: #FFFDF6; background: var(--brown); padding: 16px; border-radius: 100px;
  box-shadow: 0 4px 14px rgba(109,74,43,.3);
}
.dw-mobile-menu__contact { display: flex; gap: 10px; margin-top: 14px; }
.dw-mobile-menu__kakao { flex: 1; text-decoration: none; text-align: center; font-size: 15px; font-weight: 600; color: var(--kakao-tx); background: var(--kakao); padding: 14px; border-radius: 100px; }
.dw-mobile-menu__sms { flex: 1; text-decoration: none; text-align: center; font-size: 15px; font-weight: 600; color: #FFFDF6; background: var(--green); padding: 14px; border-radius: 100px; }
.dw-mobile-menu__foot { padding: 0 28px 34px; color: var(--tx-muted); font-size: 13px; }

/* 우하단 플로팅 문의 버튼 */
.dw-float { position: fixed; right: 18px; bottom: 18px; z-index: 1050; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.dw-float a { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; text-decoration: none; transition: transform .25s ease; }
.dw-float a:hover { transform: translateY(-3px) scale(1.05); }
.dw-float__kakao { background: var(--kakao); box-shadow: 0 5px 16px rgba(58,46,16,.25); }
.dw-float__sms { background: var(--green); box-shadow: 0 5px 16px rgba(74,84,40,.3); }

/* ==========================================================
   푸터 (js/common.js 가 #dwFooter 에 렌더)
   ========================================================== */
.dw-footer { background: #F3EDDD; border-top: 3px solid #EEE29B; padding: 56px 24px 40px; }
.dw-footer__inner { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.dw-footer__logo { width: 86px; height: 86px; object-fit: contain; }
.dw-footer__tagline { margin: 0; font-family: var(--serif); font-size: 16px; color: var(--brown); letter-spacing: .02em; line-height: 1.7; }
.dw-footer__tagline .since { font-size: 13px; color: var(--tx-muted); }
.dw-footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 6px; }
.dw-footer__nav a { text-decoration: none; color: var(--tx-title); font-size: 14px; }
.dw-footer__nav a:hover { color: var(--gold); }
.dw-footer__nav a.strong { font-weight: 600; }
.dw-footer__contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; color: #8B7D6B; font-size: 13px; line-height: 1.8; }
.dw-footer__contact a { color: #8B7D6B; text-decoration: none; }
.dw-footer__contact a:hover { color: var(--gold); }
.dw-footer__copy { margin: 14px 0 0; color: var(--tx-faint); font-size: 12px; }

/* ==========================================================
   공통 페이지 요소
   ========================================================== */
/* 어두운 사진 히어로 (예약/상품) */
.dw-hero {
  position: relative; min-height: clamp(340px, 50vw, 500px);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  text-align: center; padding: clamp(120px, 16vw, 170px) 24px clamp(44px, 6vw, 60px);
  overflow: hidden; background: var(--hero-dark);
}
.dw-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dw-hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24,19,12,.32) 0%, rgba(24,19,12,.28) 45%, rgba(24,19,12,.82) 100%); }
.dw-hero__body { position: relative; z-index: 2; max-width: 720px; }
.dw-hero__title { margin: 0 0 14px; font-family: var(--serif); font-size: clamp(28px, 4.6vw, 44px); font-weight: 700; color: #FFFDF6; line-height: 1.4; animation: dwUp .9s ease .2s both; }
.dw-hero__sub { margin: 0; font-size: 15px; color: rgba(255,253,246,.86); font-weight: 300; line-height: 1.8; animation: dwUp .9s ease .35s both; }

/* 밝은 텍스트 히어로 (포트폴리오/FAQ) */
.dw-hero-light { position: relative; padding: clamp(120px, 16vw, 180px) 24px clamp(40px, 6vw, 60px); text-align: center; overflow: hidden; }
.dw-hero-light h1 { margin: 0 0 16px; font-family: var(--serif); font-size: clamp(28px, 4.6vw, 44px); font-weight: 600; color: var(--tx-title); line-height: 1.4; animation: dwUp .9s ease .2s both; }
.dw-hero-light p { margin: 0; font-size: 15px; color: #8B7D6B; font-weight: 300; line-height: 1.9; animation: dwUp .9s ease .35s both; }