/* 도화서원 콘텐츠 메인(영상) 상단 바 기준 · 2026-11-08
   바     : 높이 64px(+기기 안전영역), 로고 왼쪽 18px·높이 36px, 메뉴 버튼 오른쪽 10px, 세로 가운데 정렬
   메뉴   : 배경·테두리·박스 없음, 터치 영역 44px, 아이콘 26px·선 굵기 1.8, 그림자로 영상 위 대비 확보
   색     : 로고와 같은 톤 (영상 위 흰색 / 밝은 배경의 어두운 로고 옆은 남색)
   적용   : 연애·재회·운명 타로, 탄생 타로, 신년 사주, 연애 사주, 아이의 첫 이름 (메뉴 버튼 모양은 운세 화면에도 적용) */
:root{--dohwa-bar-h:64px;--dohwa-bar-left:18px;--dohwa-bar-right:10px;--dohwa-logo-h:36px;--dohwa-menu-icon:26px}

/* 바 위치·높이 */
html body .love-app .love-header,
html body .ls-video-intro .ls-scene-header,
html body .ny-header > .fortune-box-topbar,
html body .bt-site-header > .fortune-box-topbar{
  box-sizing:border-box!important;height:calc(var(--dohwa-bar-h) + env(safe-area-inset-top))!important;min-height:0!important;max-height:none!important;
  padding:env(safe-area-inset-top) var(--dohwa-bar-right) 0 var(--dohwa-bar-left)!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important}
html body .bn-scene-header{padding:env(safe-area-inset-top) var(--dohwa-bar-right) 0 var(--dohwa-bar-left)!important}
html body .ls-video-intro .ls-scene-header > .fortune-box-topbar,
html body .bn-scene-header > .fortune-box-topbar{
  flex:1 1 auto!important;width:100%!important;height:var(--dohwa-bar-h)!important;margin:0!important;padding:0!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important}
html body .love-app .love-header > *{position:relative!important;inset:auto!important}
html body .love-app .love-header > *,
html body :is(.ls-video-intro .ls-scene-header,.ny-header,.bt-site-header,.bn-scene-header) .fortune-box-topbar > *{margin:0!important}

/* 로고 */
html body .love-app .love-header .love-brand img,
html body :is(.ls-video-intro .ls-scene-header,.ny-header,.bt-site-header,.bn-scene-header) .fortune-box-brand img{
  height:var(--dohwa-logo-h)!important;width:auto!important;max-width:none!important}

/* 메뉴 버튼 (공통 모양) */
html body .love-app .love-header [data-open-menu],
html body .fortune-box-topbar button[data-menu-open],
html body .zodiac-topbar .zodiac-menu{
  box-sizing:border-box!important;display:grid!important;place-items:center!important;
  flex:0 0 44px!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;
  position:relative!important;inset:auto!important;margin:0!important;padding:9px!important;
  background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  color:#fff;filter:drop-shadow(0 1px 3px rgba(17,14,32,.5))}
html body .love-app .love-header [data-open-menu]:hover,
html body .fortune-box-topbar button[data-menu-open]:hover,
html body .zodiac-topbar .zodiac-menu:hover{background:transparent!important}
html body .love-app .love-header [data-open-menu] svg,
html body .fortune-box-topbar button[data-menu-open] svg,
html body .zodiac-topbar .zodiac-menu svg{width:var(--dohwa-menu-icon)!important;height:var(--dohwa-menu-icon)!important;stroke-width:1.8px!important}

/* 밝은 상단 + 어두운 로고(연애 사주): 아이콘도 남색 */
html body .ls-video-intro .ls-scene-header .fortune-box-topbar button[data-menu-open]{color:#1f2b45!important;filter:drop-shadow(0 1px 2px rgba(255,255,255,.6))!important}

/* 영상 일시정지 버튼 기준
   위치 : 메뉴 버튼과 같은 세로줄(오른쪽 10px), 상단 바 아래 8px
   모양 : 44px 원, 반투명 남색 배경 + 흐림, 흰 테두리 1px, 아이콘 18px(선 2.2) / 글자 아이콘 15px 굵게 */
html body :is(.love-intro-video-control,.destiny-intro-video-control,.ls-video-toggle,.ny-video-toggle,.bn-video-toggle,.bt-motion){
  position:absolute!important;top:calc(var(--dohwa-bar-h) + 8px + env(safe-area-inset-top))!important;right:var(--dohwa-bar-right)!important;left:auto!important;bottom:auto!important;
  box-sizing:border-box!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;margin:0!important;padding:0!important;
  place-items:center!important;align-items:center!important;justify-content:center!important;
  border:1px solid rgba(255,255,255,.62)!important;border-radius:50%!important;
  background:rgba(20,24,44,.32)!important;-webkit-backdrop-filter:blur(3px)!important;backdrop-filter:blur(3px)!important;
  box-shadow:0 1px 6px rgba(12,10,28,.18)!important;color:#fff!important;transform:none!important;
  font:700 15px/1 -apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif!important;letter-spacing:0!important;text-shadow:none!important}
html body :is(.love-intro-video-control,.destiny-intro-video-control,.ls-video-toggle,.ny-video-toggle,.bn-video-toggle,.bt-motion) svg{width:18px!important;height:18px!important}
html body :is(.love-intro-video-control,.destiny-intro-video-control,.ls-video-toggle,.ny-video-toggle,.bn-video-toggle,.bt-motion) svg *{stroke-width:2.2px!important}
html body :is(.love-intro-video-control,.destiny-intro-video-control,.ls-video-toggle,.ny-video-toggle,.bn-video-toggle,.bt-motion) span{font:inherit!important;line-height:1!important}

/* 오늘의 운세(안내·상자 화면): 장면 안쪽 여백(위 8px·좌우 22px)을 상쇄해 같은 기준 위치에 둠.
   아래 내용이 시작하는 위치(8px + 48px = 56px)는 그대로 유지 */
html body .fortune-box-scene > .fortune-box-topbar{
  box-sizing:border-box!important;flex:0 0 var(--dohwa-bar-h)!important;height:var(--dohwa-bar-h)!important;min-height:0!important;padding:0!important;
  margin:-8px calc(var(--dohwa-bar-right) - 22px) -8px calc(var(--dohwa-bar-left) - 22px)!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important}
@media(max-width:370px){html body .fortune-box-scene > .fortune-box-topbar{margin-left:calc(var(--dohwa-bar-left) - 18px)!important;margin-right:calc(var(--dohwa-bar-right) - 18px)!important}}
@media(max-height:480px){html body .fortune-box-scene > .fortune-box-topbar{margin-top:0!important;margin-bottom:-20px!important}}
html body .fortune-box-scene > .fortune-box-topbar > *{margin:0!important}
html body .fortune-box-scene > .fortune-box-topbar .fortune-box-brand img{height:var(--dohwa-logo-h)!important;width:auto!important;max-width:none!important}

/* 무료 콘텐츠 결과 화면 공유 버튼 기준 (오늘의 운세 · 띠별 운세 · 탄생 타로 · 아이의 첫 이름)
   문구 "공유하기" · 공유 아이콘 18px · 카카오 노랑 · 모서리 12px · 높이 48px · 14px 굵게
   옆 버튼(이미지 저장 · 오늘의 한마디)은 색은 그대로, 높이·모서리·글자 크기만 맞춤 */
html body .sr-actions button.sr-kakao,
html body[data-page="birth-tarot"] #bt-share,
html body .zodiac-reading-actions .zodiac-share-button,
html body .bn-page .bn-result-actions-v2 .bn-share-open{
  display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;
  min-height:48px!important;padding:10px 12px!important;border:1px solid #f5d800!important;border-radius:12px!important;
  background:#fee500!important;color:#191600!important;box-shadow:none!important;text-shadow:none!important;
  font-family:inherit;font-size:14px!important;font-weight:700!important;line-height:1.3!important;letter-spacing:0!important}
html body .sr-actions button.sr-kakao > :is(svg,img),
html body[data-page="birth-tarot"] #bt-share > :is(svg,img),
html body .zodiac-reading-actions .zodiac-share-button > :is(svg,img),
html body .bn-page .bn-result-actions-v2 .bn-share-open > :is(svg,img){display:none!important}
html body .sr-actions button.sr-kakao::before,
html body[data-page="birth-tarot"] #bt-share::before,
html body .zodiac-reading-actions .zodiac-share-button::before,
html body .bn-page .bn-result-actions-v2 .bn-share-open::before{
  content:""!important;display:block!important;flex:none!important;width:18px!important;height:18px!important;background:currentColor!important;
  -webkit-mask:url("/images/ui-share-20261108.svg") center/contain no-repeat;mask:url("/images/ui-share-20261108.svg") center/contain no-repeat}
html body .sr-actions button.sr-kakao:disabled,
html body[data-page="birth-tarot"] #bt-share:disabled,
html body .zodiac-reading-actions .zodiac-share-button:disabled,
html body .bn-page .bn-result-actions-v2 .bn-share-open:disabled{opacity:.6!important}
html body .sr-actions > button,
html body[data-page="birth-tarot"] :has(> #bt-share) > .bt-action,
html body .zodiac-reading-actions > button{min-height:48px!important;border-radius:12px!important;font-size:14px!important;font-weight:700!important}

/* 결제·무료 화면 메뉴 버튼 통일 (2026-11-08 추가)
   모든 메뉴 버튼: 터치 영역 44px · 아이콘 26px(선 1.8) · 오른쪽 10px · 박스 없음
   밝은 배경(결과·결제 화면) 위에서는 남색(#111d43)·그림자 없음 */
html body .love-app.is-light .love-header [data-open-menu],
html body:has([data-newyear-checkout-options]) .ny-header .fortune-box-topbar button[data-menu-open]{color:#111d43!important;filter:none!important}

/* 결제 전용 머리말(운명·재회 결제, 결제 테스트): 같은 높이·여백·로고·버튼 */
html body .checkout-site-header{box-sizing:border-box!important;height:calc(var(--dohwa-bar-h) + env(safe-area-inset-top))!important;min-height:0!important;padding:env(safe-area-inset-top) var(--dohwa-bar-right) 0 var(--dohwa-bar-left)!important}
html body .checkout-site-header img{height:var(--dohwa-logo-h)!important;width:auto!important}
html body .checkout-site-header button[data-checkout-menu-open]{box-sizing:border-box!important;display:grid!important;place-items:center!important;width:44px!important;height:44px!important;padding:9px!important;margin:0!important;border:0!important;background:transparent!important;color:#111d43!important;filter:none!important}
html body .checkout-site-header button[data-checkout-menu-open] svg{width:var(--dohwa-menu-icon)!important;height:var(--dohwa-menu-icon)!important;stroke-width:1.8px!important}

/* 오늘의 운세 결과 화면: 장면 좌우 여백이 8px이라 위 기준(22px)으로 밀면 화면 밖으로 나감 → 8px 기준으로 보정 */
html body .scroll-result-scene.fortune-box-scene > .fortune-box-topbar{margin-left:calc(var(--dohwa-bar-left) - 8px)!important;margin-right:calc(var(--dohwa-bar-right) - 8px)!important}

/* 공통 머리말(홈·목록·무료 목록): 메뉴 버튼만 같은 크기·두께로 */
html body .site-header .header-actions button[data-menu-open]{box-sizing:border-box!important;width:44px!important;height:44px!important;padding:9px!important;margin-right:calc(var(--dohwa-bar-right) - 17px)!important;border:0!important;background:transparent!important}
html body .site-header .header-actions button[data-menu-open] svg{width:var(--dohwa-menu-icon)!important;height:var(--dohwa-menu-icon)!important;stroke-width:1.8px!important}

/* 띠별운세 결과·전체 화면(.zodiac-reading-page, 좌우 여백 14px): 로고 왼쪽 18px · 메뉴 오른쪽 10px */
html body .zodiac-reading-page>.zodiac-topbar{margin-left:calc(var(--dohwa-bar-left) - 14px)!important;margin-right:calc(var(--dohwa-bar-right) - 14px)!important}

/* 오늘의 운세 결과(두루마리) 화면 메뉴: 장면 위 여백이 9px 이라 1px 내려가던 것을 기준(가운데 32px)에 맞춤 (아래 내용 위치는 그대로).
   밝은 달 위에서도 보이도록 흰색 + 진한 그림자 */
html body .scroll-result-scene.fortune-box-scene > .fortune-box-topbar{margin-top:-9px!important;margin-bottom:-7px!important}
html body .scroll-result-scene.fortune-box-scene > .fortune-box-topbar button[data-menu-open]{color:#fff!important;filter:none!important}

/* 무료 운세(오늘의 운세 · 띠별 운세 · 탄생 타로 · 아이의 첫 이름) 상단 메뉴: 그림자 없음 */
html body .fortune-box-scene .fortune-box-topbar button[data-menu-open],
html body .zodiac-topbar .zodiac-menu,
html body .bt-site-header .fortune-box-topbar button[data-menu-open],
html body .bn-scene-header .fortune-box-topbar button[data-menu-open]{-webkit-filter:none!important;filter:none!important;box-shadow:none!important;text-shadow:none!important}
html body .fd-scene .fortune-box-topbar button[data-menu-open]{-webkit-filter:none!important;filter:none!important;box-shadow:none!important}