/* ══════════════════════════════════════════════════════════════
   common.css — 세 화면 공통 디자인 토큰
   화면별 이미지 URL 변수(--hero-img-*, --icon-*, --bg-* 등)와
   화면 고유 색(예: jae-detail 의 --sig-*)은 각 HTML 의 :root 에 남깁니다.
   ══════════════════════════════════════════════════════════════ */
:root{
  /* 바탕 · 종이 */
  --paper:#efe9e0; --paper-2:#e5ddd0; --card:#f6f1e8;
  /* 먹빛 글자 · 선 */
  --ink:#2c2733; --ink-2:#4b4550; --ink-3:#6f6877; --line:#cfc5b8;
  /* 보라 · 금 · 인장 */
  --purple:#6b5b95; --purple-soft:#d8cee8; --purple-deep:#2a2440; --gold:#b79a5a; --seal:#b0402e;
  /* 오행 5색 */
  --mok:#2F7D63; --hwa:#B5402F; --to:#B8892C; --geum:#8A8B90; --su:#31446E;
  /* 쉬운 3색 신호 */
  --good:#5f9e4a; --soso:#d8a63a; --care:#cf4b3a;
  /* 공통 이징 */
  --ease:cubic-bezier(.4,0,.2,1);
  /* ★ z-index 단일 소스 (FIX-7 · 하드코딩 금지, 전부 이 변수 경유) — 층: 탭바 < 딤 < 시트 */
  /*   현재 .hback(딤)은 .hsheet(z-sheet) 안에 중첩(소스순서로 패널 아래) + 탭바 위까지만 덮어 탭바 클릭 허용(FIX-8).
       → --z-dim 은 딤을 루트 형제로 분리할 때를 위한 예약 티어. .hsheet 는 pointer-events:none 라 탭바(z-tabbar)로 클릭 통과. */
  --z-tabbar:40; --z-dim:45; --z-sheet:50; --z-menu:60;
}

/* ══════════════════════════════════════════════════════════════
   FIX-13 화면 뼈대 단일 소스 — 헤더(☰/🔔) · 세줄메뉴 · 준비중시트 · 4탭 배경
   ★ 5탭 공통. 여기 한 곳만 고치면 전 화면 반영(원칙 4). 오늘(index)의 hero .bg 는 무접촉.
   ══════════════════════════════════════════════════════════════ */
/* ── 헤더 (4탭 기본 = sticky·blur. 오늘은 index 인라인이 absolute·hero위로 override) ── */
.topbar{position:sticky;top:0;z-index:9;display:flex;align-items:center;justify-content:space-between;padding:14px;background:rgba(239,233,224,.86);backdrop-filter:blur(8px);border-bottom:1px solid rgba(207,197,184,.5)}
.topbar h1{font-family:"Noto Serif KR",serif;font-weight:600;font-size:16px;letter-spacing:.12em;color:var(--ink);margin:0}
.ibtn{background:none;border:none;padding:6px;cursor:pointer;line-height:0}
.ibtn svg{width:23px;height:23px;color:var(--ink-2)}

/* ── 4탭 공통 배경(옅은 산수화) — ★ 오늘 제외. 진하기는 여기 한 곳(opacity)에서만 조정(§6·원칙6: 배포 후 육안 측정) ── */
.bgp{position:absolute;inset:0;z-index:0;background-image:var(--bg-easy);background-size:cover;background-position:center top;background-repeat:no-repeat;opacity:.30;pointer-events:none;display:none}   /* ★ 배경 잠정 비활성(사용자 요청 2026-07-16) · 복구 시 display:none 제거 + opacity(현 .30) 조정 · 파일/변수/_bak 유지 */
.phone[data-mode="pro"] .bgp{background-image:var(--bg-pro);opacity:.24}                                                                                       /* 잠정 .10→.16→.24 */

/* ── 세줄 메뉴(☰) 좌측 패널 ──
   ★ FIX-13b: 오버레이를 앱 폭(430px) 중앙 컬럼으로 제약(뷰포트 전체 아님) → PC 넓은 화면에서 앱 안에서 슬라이드·딤도 앱만 덮음 */
.shmenu{position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;overflow:hidden;z-index:var(--z-menu);display:none}
.shmenu.on{display:block}
.shmenu-dim{position:absolute;inset:0;background:rgba(20,16,26,.42);opacity:0;transition:opacity .25s var(--ease)}
.shmenu.on .shmenu-dim{opacity:1}
.shmenu-panel{position:absolute;top:0;left:0;bottom:0;width:81%;max-width:320px;background:var(--paper);box-shadow:2px 0 24px rgba(0,0,0,.22);padding:22px 20px calc(22px + env(safe-area-inset-bottom));overflow-y:auto;transform:translateX(-102%);transition:transform .28s var(--ease);display:flex;flex-direction:column;gap:6px}
.shmenu.on .shmenu-panel{transform:translateX(0)}
.shmenu-acct{display:flex;align-items:center;gap:10px;font-family:"Noto Serif KR",serif;font-size:15px;color:var(--ink);padding:6px 4px 14px}
.shmenu-acct .em{font-size:22px;line-height:1}
.shmenu hr{border:none;border-top:1px solid var(--line);margin:8px 0}
.shmenu-item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:none;border:none;border-radius:11px;padding:12px 10px;font-family:"Noto Sans KR",sans-serif;font-size:14px;color:var(--ink-2);cursor:pointer;text-decoration:none}
.shmenu-item:active{background:var(--card)}
.shmenu-item .em{font-size:17px;width:22px;text-align:center;flex:none}
.shmenu-item .sub{margin-left:auto;font-size:11px;color:var(--ink-3)}
.shmenu-item.danger{color:var(--care)}
.shmenu-modeseg{display:flex;gap:6px;margin-left:auto}
.shmenu-modeseg button{font-family:"Noto Sans KR",sans-serif;font-size:12px;padding:5px 12px;border-radius:14px;border:1px solid var(--line);background:none;color:var(--ink-3);cursor:pointer}
.shmenu-modeseg button.on{background:var(--purple-deep);color:var(--paper);border-color:var(--purple-deep)}

/* ── 준비중/안내 시트(하단) — 알림·탈퇴 공용 · ★ FIX-13b: 메뉴와 동일하게 앱 폭 중앙 컬럼 제약 ── */
.shsheet{position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;overflow:hidden;z-index:var(--z-menu);display:none}
.shsheet.on{display:block}
.shsheet-dim{position:absolute;inset:0;background:rgba(20,16,26,.42)}
.shsheet-card{position:absolute;left:0;right:0;bottom:0;background:var(--paper);border-radius:22px 22px 0 0;padding:24px 22px calc(20px + env(safe-area-inset-bottom));box-shadow:0 -6px 30px rgba(0,0,0,.2);transform:translateY(100%);transition:transform .28s var(--ease)}
.shsheet.on .shsheet-card{transform:translateY(0)}
.shsheet-card .st{font-family:"Noto Serif KR",serif;font-weight:600;font-size:15px;color:var(--ink);margin:0 0 8px}
.shsheet-card p{font-size:13px;line-height:1.75;color:var(--ink-2);margin:0 0 18px}
.shsheet-card .ph{color:var(--purple);font-weight:500}
.shsheet-card button{display:block;width:100%;padding:13px;border:none;border-radius:13px;background:var(--purple-deep);color:var(--paper);font-family:"Noto Serif KR",serif;font-size:14px;cursor:pointer}
/* ★ STEP 16: 확인 시트 액션 영역 — 버튼 세로 스택(기존 단일 버튼 스타일 재사용). danger=파괴 동작(탈퇴). */
#shSheetAct button + button{margin-top:9px}
.shsheet-card button.danger{background:var(--seal);color:#fff}
.shsheet-card button:disabled{opacity:.6;cursor:default}

/* ★ STEP 14 ③c: meId 미해석 시 빈 상태 유도(로그인/온보딩/재시도) — 문구·버튼만 공통, 삽입 위치는 화면별.
   목업(남의 사주)으로 채우지 않는다 = "틀린 값보다 빈 값"(FIX-9 원칙 선취). */
.empty-cta{text-align:center;padding:26px 18px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.empty-cta .ec-t{font-family:"Noto Serif KR",serif;font-weight:600;font-size:15px;color:var(--ink);margin-bottom:7px}
.empty-cta .ec-d{font-size:12.5px;line-height:1.7;color:var(--ink-3);margin-bottom:16px}
.empty-cta .ec-b{display:inline-block;padding:11px 22px;border:none;border-radius:12px;background:var(--purple-deep);color:var(--paper);font-family:"Noto Serif KR",serif;font-size:13.5px;cursor:pointer}
.empty-cta .ec-b:active{transform:scale(.97)}
.empty-cta[data-kind="login"] .ec-b{background:#FEE500;color:#191600}