/* 카드·팝업 위치·팝업 버튼 — 2026-10-31 구조 정리로 index.html <style> 1420~1450줄에서 옮김. 파일 번호 순서대로 읽어야 함(뒤 규칙이 앞 규칙을 덮음) */
/* ==========================================================================
   ★ 카드·팝업 위치·팝업 버튼 (2026-10-23 03:57 결정, claude/next-layout-popups.md)
   ========================================================================== */
/* 1. 메뉴 화면 카드 위치 (안 B): 모든 메뉴 카드가 메뉴 막대 아래 같은 자리에서 시작, 내용이 늘면 아래로만 자람 (세로 가운데 정렬 없음)
      위 여백 = PC 화면 높이의 약 8%(최소 40px) · 폰 24px — 첫 화면(아이콘 4개)은 그대로 */
body:not(.at-home) .wrap{padding-top:max(40px,8vh)}
@media (max-width:599px){body:not(.at-home) .wrap{padding-top:24px}}
/* 2. 팝업 창 위치: 진행·완료·같은 내용·저장 안 함 창도 백업·공유 창처럼 화면 가운데 고정 + 뒤는 어두운 가림막 (오늘 운세 저장 완료 창도 가운데) */
.load-overlay{position:fixed;inset:0;z-index:60;padding:16px;border-radius:0;align-items:center;background:var(--scrim)}
.load-overlay.at-bottom{align-items:center;padding-bottom:16px}
/*    가림막은 화면 높이의 25%씩 위아래로 더 크게 = 화면의 1.5배 (2026-10-23 06:31 사용자 결정 — 10/25 50%로 늘려 봤으나 효과 없어 25%로 되돌림), 06:0x의 120px 대신 화면 크기에 비례)
      아이폰 사파리에서 화면을 밀어 올린 직후 창을 띄우면 아래 화면 바탕(약 화면의 1/8)이 드러나 가림막 없는 빈 칸이 생겼음
      위아래를 같은 만큼 늘려 창은 그대로 보이는 화면 가운데 — 백업·공유 창(.share-ov)도 같게 (메뉴 가림막 .scrim은 10/15 결정으로 꺼져 있어 해당 없음) */
.load-overlay,.share-ov{top:-25%;bottom:-25%;padding-top:16px;padding-bottom:16px}
/*    2026-10-25: 아이폰 사파리는 화면 아래(홈 막대 자리·주소창이 접히며 드러나는 자리)를 페이지 안쪽 요소가 아니라 페이지 바탕색으로 칠해 가림막이 못 덮음
      → 팝업이 떠 있는 동안(html.pop-lock, front-end.js MyconPopLock) 페이지 바깥 바탕(html)을 가림막을 덮은 색으로 (미색 #f7f4ee 위 검정 50% = #7c7a77), 닫으면 원래대로 */
html.pop-lock{background:#7c7a77}html.pop-lock body{min-height:100vh} /* 바깥(사파리가 칠하는 곳)만 어둡게 — body는 제 바탕 그대로 화면을 채워, 가림막 아래 빈 곳이 더 어두워지지 않게 */
/*    떠 있는 동안 뒤 화면 스크롤 막음 — front-end.js MyconPopLock이 손가락 밀기·휠·스크롤 키만 막음 (2026-10-23 05:2x)
      화면(body)을 고정하는 방식은 쓰지 않음: 아이폰 사파리에서 주소창이 접힌 만큼 화면 아래에 빈 칸이 생겼음 */
/*    창은 화면 맨 바깥(body 바로 아래)으로 옮겨 띄움 — front-end.js "팝업 창 옮기기" (메뉴 카드의 container-type 때문에 최신 크롬에서는 카드 안에 든 창이 카드 기준으로 떠서, 가림막이 카드에만 깔렸음)
      옮긴 창은 원래 있던 화면(data-from)이 보일 때만 보임 — 예전처럼 다른 메뉴로 가면 그 창은 안 보임 */
body:not([data-view="today"]) .load-overlay[data-from="today"],body:not([data-view="saju"]) .load-overlay[data-from="saju"],body:not([data-view="theme"]) .load-overlay[data-from="theme"],body:not([data-view="counsel"]) .load-overlay[data-from="counsel"],body:not([data-view="vault"]) .share-ov[data-from="vault"]{display:none!important}
/* 4. 팝업 버튼 크기 — 창 기준 공통
      작은 팝업 창 폭 260px · 버튼 너비 = 창 폭의 75%(약 195px)로 가운데, 글자 길이와 상관없이 같은 너비
      (창 안쪽 폭 = 창 폭 - 좌우 여백 40px - 테두리 2px 이라 75% + 31.5px = 창 폭의 75%) · 두 개면 위아래, 사이 8px */
.load-card{width:260px;padding-left:20px;padding-right:20px}
.load-card .pop-btn{width:calc(75% + 31.5px);max-width:100%;margin-left:auto;margin-right:auto}
.pop-btn+.pop-btn{margin-top:0}
.pop-btn:not([hidden])~.pop-btn:not([hidden]){margin-top:-8px} /* 보이는 버튼끼리만 사이 8px (창 gap 16px - 8px), 숨은 버튼이 끼어도 안내 문장과의 간격은 그대로 */
/*    제목 있는 창(백업 만들기·불러오기·공유 이미지, 380px): 높이·글자는 공통(0.9rem · 위아래 11px · 알약), 너비는 입력칸·이미지와 같은 폭(꽉 참) */
.share-actions button{font-size:.9rem;line-height:1.3;padding-top:11px;padding-bottom:11px}