/* Design System & Variables */
[data-theme="dark"], :root {
  /* ⚠️ 2026-09-25 — 상태 표시줄(시각·배터리) 높이. **어두운 화면·밝은 화면 모두** 여기서 정의됩니다.
     전에는 밝은 화면 칸([data-theme="light"])에만 있어서, 기본인 어두운 화면에서는 값이 없었고
     머리말·창의 «상태 표시줄 아래로 내리기»(2026-09-23)가 어두운 화면에서 통째로 무효였습니다.
     (「저번 오류가 또 났어」·「위에 이름이 가려서 나와」의 뿌리) 밝은 화면 칸으로 되돌리지 마십시오. */
  --safe-top: env(safe-area-inset-top, 0px);
  --bg-color: #16120d; /* Deep twilight indigo matching the starry sky */
  --surface-color: rgba(32, 25, 17, 0.5); /* Semi-transparent cozy container */
  /* ⚠️ 2026-09-26 화면 바탕을 «불투명»하게 — 아래 body 설명 참조. --page-end 는 --surface-color 를 흰 바탕에 얹은 색,
        --page-gap 은 아래 탭 막대가 실제로 보이는 색(아이폰 홈 화면 앱 아래 빈 띠를 막대처럼 보이게) */
  --page-end: #8f8c88;
  --page-gap: #242018;   /* 폰 캡처에서 잰 막대 색 (36,32,24) */
  --surface-glow: rgba(216, 174, 106, 0.12); /* 2026-10-10 옛 보랏빛 → 금빛 번짐 */
  --border-color: rgba(255, 255, 255, 0.08); /* Minimalist border */
  --text-primary: #f2e9d8; /* Warm soft white */
  --text-secondary: #a79c87; /* Poetic twilight violet */
  --nav-bg: rgba(18, 14, 9, 0.65); /* Cozy twilight footer */
  --glass-backdrop: blur(18px); /* Smooth modern glassmorphism */
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.35);
  
  --accent-gold: #d8ae6a; /* 깊은 금 — 2026-08-30 「먹과 한지」 옷의 금색 */
  /* ⚠️ 낙관(도장) 빛깔 — 순교자의 붉음입니다. **한 화면에 한 점**만 쓰십시오.
        제목 옆 낙관과 「실천했어요」의 인주 표시, 딱 둘입니다. 늘리면 값이 떨어집니다. */
  --seal-red: #b5472f;
  /* 2026-10-10 디자인 시스템 정리 — 낙관 빨강을 «글자»로 쓸 때의 빛. --seal-red 는 글자로 쓰면
     바탕과의 명암 차이가 모자랍니다(3.5:1). 글자에는 이 값을 씁니다(5.7:1). */
  --seal-ink: #d4735a;
  /* 선·테두리를 그리는 먹의 빛(rgb 세 숫자). 어두운 화면은 흰빛·한지빛, 밝은 화면은 먹빛.
     ⚠️ 예전에는 rgba(255,255,255,.1) 처럼 흰빛을 박아 두어 밝은 화면에서 선이 사라졌습니다. */
  --line-rgb: 255, 255, 255;
  --hanji-rgb: 242, 233, 216;
  /* 늘 어두운(또는 짙은 색) 바탕 위에 얹는 글자 — 순수한 흰색 대신 한지빛 흰색 */
  --on-dark: #fbf6ec;
  /* 금색으로 «꽉 채운» 자리에 얹는 글자색.
     ⚠️ 어두운 화면과 밝은 화면에서 서로 반대여야 합니다 — 한쪽에 맞추면 다른 쪽이 안 보입니다. */
  --on-gold: #23180a;
  /* 금색 그라디언트의 «끝» 색. 밝은 화면에서는 이쪽도 어두워야 흰 글자가 읽힙니다. */
  --gold-grad-end: #e5b800;
  /* 카드 안에서 한 단 더 짙게 깔리는 판. 밝은 화면에서는 거꾸로 한 단 «옅게» 깔립니다.
     ⚠️ 어두운 색을 그대로 박아 두면 밝은 화면에서 어두운 글자가 어두운 판에 얹힙니다. */
  --panel-deep: rgba(10, 8, 5, 0.9);
  /* 카드 안에 깔리는 판 네 단계.
     ⚠️ 예전에는 rgba(10,8,5,.3) rgba(28,22,15,.55) rgba(22,18,43,.4) … 처럼
        어두운 색이 **35군데**에 그대로 박혀 있었습니다. 밝은 화면에서도 그 자리만
        어두운 채로 남고 그 위에 어두운 글자가 얹혀, 대비 미달이 50건이었습니다.
        새 판을 깔 때는 반드시 아래 넷 중에서 고르십시오. */
  --sunken:   rgba(10, 8, 5, 0.40);   /* 살짝 파인 홈 */
  --sunken-2: rgba(10, 8, 5, 0.60);   /* 홈 · 손 얹었을 때 */
  --panel:    rgba(28, 22, 15, 0.62);   /* 한 단 올라온 판 */
  --panel-2:  rgba(28, 22, 15, 0.80);   /* 판 · 손 얹었을 때 */
  /* ⚠️ 2026-09-07. --panel-2 와 같은 색이지만 투명도를 자리마다 다르게 줘야 할 때
     (지도 위에 뜨는 시트처럼 위는 투명, 아래는 짙어지는 그라디언트) 쓰는 «숫자만» 버전.
     rgba(var(--panel-2-rgb), 0.3) 처럼 알파값을 자유롭게 넣을 수 있습니다. */
  --panel-2-rgb: 28, 22, 15;
  /* ⚠️ 예전 이름은 그대로 두되 색은 금빛 계열로 모았습니다 (2026-08-21).
     라벤더 하나만 다른 색줄기여서, 한지·금빛인 앱에서 늘 튀었습니다.
     이름을 바꾸면 28군데를 다 손대야 하므로 값만 바꿉니다.
     한지 위 4.99:1 · 밤빛 위 8.73:1 — 둘 다 기준(4.5)을 넘습니다. */
  --accent-umber: #d8a373; /* 2026-10-10 이름 바꿈: 옛 --accent-purple(이름만 보라, 빛은 갈색) */
  --accent-purple: var(--accent-umber); /* 옛 이름 — 새로 쓰지 마십시오. 따뜻한 청동빛 — 금색의 둘째 톤 */
  
  /* ── 덕 네 색 — 수묵담채 안료 (2026-09-04) ────────────────────────
     ⚠️ 전에는 #76aae4(하늘) · #f5b041(주황) · #48c9b0(청록) · #ec7063(코랄) 이었습니다.
        형광 UI 색이라 먹·한지·금빛인 이 앱에서 늘 따로 놀았습니다.
        쪽빛 · 황토 · 석록 · 연지 — 실제로 쓰던 안료 계열로 낮췄습니다.
     ⚠️ 애덕을 «낙관의 붉음»(--seal-red #b5472f)만큼 진하게 만들지 마십시오.
        붉음은 한 화면에 한 점뿐입니다. 연지는 그보다 흐려야 합니다. */
  --color-faith: #7c9fc0;      /* 쪽빛 */
  --color-fortitude: #c69a55;  /* 황토 */
  --color-courage: #6f9e86;    /* 석록 */
  --color-love: #c58279;       /* 연지 */
  --color-exp: #8faa7e;        /* 두록 */
  /* 종이에 옅게 그어 둔 자국 — 붓획이 아직 안 지나간 자리 */
  --ink-line: rgba(214, 200, 176, 0.20);

  /* ── 붓획 모양 두 벌 (2026-09-04) ──────────────────────────────────
     ⚠️ 그림 파일이 아닙니다. 한지 조각 마커(.shrine-marker-avatar)와 같은 수법으로,
        «한 번에 그은 붓획»의 윤곽을 CSS 안에 직접 그려 두고 마스크로 씌웁니다.
        양 끝이 가늘게 빠지고 가운데가 도톰합니다.
     ⚠️ 새 파일을 만들지 마십시오 — 오프라인 우선인 이 앱에서 그림 하나가 곧 내려받기입니다.
     ⚠️ preserveAspectRatio='none' 이라 칸 크기에 따라 늘어납니다. 그래서 40%만 찬
        막대도 «그만큼 짧게 그은 한 획»으로 읽힙니다. 일부러 그렇게 둔 것입니다.
     --brush-h : 가로획 (막대) · --brush-v : 세로획 (제목 옆 표) */
  --brush-h: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'><path d='M2 12 Q7 7.2 24 6.6 Q68 5.4 110 6.4 Q150 7.4 179 9 Q191 9.8 198 11.9 Q191 14 179 15.4 Q150 17 110 17.8 Q68 18.8 24 17.6 Q7 17.2 2 12 Z'/></svg>");
  --brush-h-faint: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'><path d='M2 12 Q8 7.6 26 7.2 Q70 6.2 112 7 Q152 7.8 180 9.2 Q192 9.9 198 11.8 Q192 13.8 180 15.2 Q152 16.6 112 17.4 Q70 18.2 26 17.2 Q8 16.8 2 12 Z'/></svg>");
  --brush-v: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 200' preserveAspectRatio='none'><path d='M12 2 Q7.4 8 6.8 26 Q5.6 70 6.6 112 Q7.6 152 9.2 180 Q10 192 12 198 Q14 192 15.4 180 Q17 152 17.8 112 Q18.8 70 17.6 26 Q17.2 8 12 2 Z'/></svg>");
  /* 먹이 고르지 않게 먹히는 결 — 붓이 지나간 자국 */
  --brush-grain: repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 1px, transparent 1px 9px);

  /* ── 글자 크기 여덟 단계 (2026-08-21) ──────────────────────────
     ⚠️ 예전에는 0.58rem 부터 1.4rem 까지 **58가지**가 흩어져 있었습니다.
        0.72 와 0.73, 0.74 와 0.75 처럼 눈에 안 보이는 차이가 대부분이었습니다.
        새 글자 크기를 쓸 때는 반드시 아래 여덟 개 중에서 고르십시오. */
  /* ⚠️ 2026-08-30 — 여덟 단계 전부를 한 단계씩 키웠습니다 (「C의 큰 글자」).
        francisco 님이 고른 새 옷의 절반입니다. 단계 수는 여덟 그대로입니다.
        값을 바꾸면 .agents/uistyle.js 의 FONTS 목록도 함께 바꿔야 합니다. */
  --fs-xxs: 0.66rem;   /* 꼬리표·출처 */
  --fs-xs:  0.75rem;   /* 작은 주석 */
  --fs-sm:  0.81rem;   /* 안내 글 */
  --fs-md:  0.86rem;   /* 본문 보조 */
  --fs-base:0.95rem;   /* 본문 */
  --fs-lg:  1.06rem;   /* 카드 제목 */
  --fs-xl:  1.22rem;   /* 큰 제목 */
  --fs-2xl: 1.48rem;   /* 화면 제목 */

  /* ── 모서리 네 단계 ──────────────────────────────────────────
     ⚠️ 예전에는 2·4·5·6·8·9·10·11·12·14·16·20·24px **열두 가지**였습니다.
        새 모서리를 줄 때는 아래 넷 중에서 고르십시오 (동그라미는 50%, 알약은 999px). */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;

  /* ── 카드 한 벌 ─────────────────────────────────────────────
     ⚠️ 카드 배경이 다섯 가지, 금색 채움 투명도가 .07/.09/.10/.15/.16 다섯 가지였습니다.
        거의 같은 색인데 전부 달랐습니다. 새 카드는 아래 값을 쓰십시오. */
  --card-bg: rgba(255, 255, 255, 0.035);
  --card-border: rgba(216, 174, 106, 0.22);
  --gold-soft: rgba(216, 174, 106, 0.12);
  --gold-soft-border: rgba(216, 174, 106, 0.30);

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
}

/* ── 밝은 화면 색 표 — 지금은 «잠들어» 있습니다 (2026-08-27) ──────────────
 *
 * ⚠️ 밝은 화면을 거두었습니다. 머리 띠의 해/달 단추를 없앴으므로
 *    이 블록은 아무 데도 안 걸립니다. 까닭은 components/themeToggle.js 머리말에.
 *
 * ⚠️ 지우지 않고 남긴 것은 되살릴 수 있게 하기 위함입니다.
 *    다만 **단추만 다시 달면 안 됩니다.** 아래를 먼저 고치십시오 —
 *    이 색들은 토큰을 안 쓰고 «굳혀» 둔 자리라 화면을 바꿔도 안 따라옵니다.
 *    그래서 밝은 화면에서 적어 넣는 글자가 1.29:1 로 안 보였습니다.
 *
 *      · .adoration-intention select / .adoration-closing-note textarea  → background: #171329
 *      · .spiritual-section textarea / .confession-prep-modal textarea   → background: #171329
 *      · .confession-mode-choice button                                  → background: rgba(14,12,34,.58)
 *      · .verification-center                                            → 그러데이션 끝이 rgba(22,17,11,.9)
 *        (밝은 화면에서 GPS 칸만 혼자 잿빛으로 떴습니다)
 *      · 그 밖에 style.css 안에서 background 에 어두운 색을 굳혀 둔 곳 스무남은 자리
 *
 *    고칠 때는 이미 있는 --sunken / --sunken-2 / --panel / --panel-2 를 쓰십시오.
 *    이 넷은 두 화면에서 각각 다른 값으로 정해져 있어 알아서 뒤집힙니다.
 *
 * ⚠️ 되살리신다면 시험도 함께 고치십시오. 지난번 「밝은 화면 75곳 → 0곳」은
 *    **화면을 돌아다니며 보이는 글자만** 잰 것이었습니다. 흐름 안쪽의
 *    적어 넣는 칸은 한 번도 안 재였고, 그래서 0곳이라는 말이 사실이 아니었습니다.
 *    다시 켜신다면 «적는 칸»부터 재는 시험을 먼저 만드십시오.
 */
[data-theme="light"] {
  /* ⚠️ 2026-09-04 — 밝은 화면 바탕이 «푸른 회색»(#f4f6fa)이었습니다.
        그림(성물 44장·멘토·동반자·순례자)의 종이색은 재 보니 죄다 #fcf0e0 로
        따뜻한 상아빛인데, 바탕은 정반대 방향(파랑이 빨강보다 높음)이었습니다.
        그래서 밝은 화면에서 그림이 «누런 얼룩»처럼 떴습니다.
        한지빛으로 옮기고, 글자도 보랏빛 회색에서 먹빛으로 바꿨습니다.
        ⚠️ 다시 푸른 계열로 되돌리지 마십시오 — 그림과 어긋납니다. */
  /* ⚠️ 2026-09-04 두 번째 고침 — francisco 님: 「너무 밝으면 눈 아픈데」.
        #f6f0e3 은 밝기 0.875 로, 걷어낸 푸른 회색(#f4f6fa · 0.920)보다 조금 낮을 뿐
        여전히 흰빛에 가까웠습니다. 한 단 낮춰 0.797 로 잡습니다.
        카드도 순백(255,255,255)에서 상아빛으로 함께 내립니다 — 눈이 부신 것은
        바탕보다 «카드»입니다. 화면의 대부분이 카드이기 때문입니다.
        ⚠️ 더 낮추면(#e6dac3 · 0.724) 누런 마분지처럼 보이고, 햇빛 아래에서
           글자 대비가 빠듯해집니다. 성지를 «걸어 다니며» 보는 앱입니다. */
  /* ⚠️ 2026-09-04 세 번째 — 앞서 --bg-color 만 낮췄더니 화면은 거의 그대로였습니다.
        .app-container 가 화면 전체를 --surface-color 로 «덮어» 칠하기 때문입니다.
        재 보니 실제로 칠해지는 색은 #faf3e9 로, 손대기 전과 다를 바가 없었습니다.
        ⚠️ 밝기를 낮추실 때는 --bg-color 만 보지 마십시오. 눈에 들어오는 것은
           --surface-color(화면 판)와 --panel*(카드)입니다. 셋을 함께 내려야 합니다. */
  /* ⚠️ 2026-09-23 francisco: 「위를 누를 수가 없어」 (아이폰 화면 캡처)
     viewport-fit=cover 라 앱이 상태 표시줄(시각·배터리) «아래까지» 그려집니다.
     머리말(앱 이름·길벗 띠·밝기 단추)이 그 아래로 들어가 눌리지 않았습니다.
     아이폰은 상태 표시줄 자리를 건드리게 두지 않습니다 — 그만큼 내려 그립니다.
     ⚠️ .app-header 의 위 여백에서 이 값을 빼지 마십시오. 빼면 또 가려집니다. */
  /* --safe-top 은 맨 위 :root 칸으로 옮겼습니다 (2026-09-25 — 여기 두면 밝은 화면에서만 정의됐습니다) */
  --bg-color: #efe6d4;
  --surface-color: rgba(244, 236, 221, 0.86);
  --page-end: #f6efe2;
  --page-gap: #fbf9f6;
  --surface-glow: rgba(198, 154, 85, 0.10);
  --border-color: rgba(0, 0, 0, 0.07);
  --text-primary: #33291f;
  --text-secondary: #6b6152;
  --nav-bg: rgba(255, 255, 255, 0.78);
  --glass-backdrop: blur(18px);
  --glass-shadow: 0 8px 32px 0 rgba(13, 10, 28, 0.05);
  
  /* ⚠️ #be9240 은 흰 바탕에서 2.63:1 이었습니다 — 밝은 화면 글자 75곳이 대비 미달이었습니다.
     제목·링크·「?」 단추까지 전부 이 색이라 밝은 화면이 사실상 안 읽혔습니다.
     #8a6a1f 은 바탕 4.66:1 · 흰 카드 5.05:1 로 기준(4.5)을 넘습니다. (2026-08-21)
     ⚠️ 이 색을 다시 밝게 되돌리려면 반드시 contrast 시험을 함께 돌리십시오. */
  /* ⚠️ 2026-09-04 — 밝은 화면 바탕을 한 단 낮추자(#f6f0e3 → #efe6d4) 이 금색이
        판 위에서 4.34~4.41:1 로 떨어져 아홉 곳이 대비 미달이 됐습니다.
        바탕을 낮추면 그 위의 «글자도 함께» 낮춰야 합니다. 한 단 더 짙게 잡습니다. */
  --accent-gold: #7f611c;
  /* 밝은 화면에서는 금색이 어두우므로 그 위 글자는 흰색입니다 (5.05:1) */
  --on-gold: #fbf6ec;
  --gold-grad-end: #6f5410;
  /* ⚠️ 2026-09-04: 순백 카드는 눈이 부십니다. 상아빛으로 내립니다. */
  --panel-deep: rgba(249, 242, 229, 0.94);
  --sunken:   rgba(0, 0, 0, 0.045);
  --sunken-2: rgba(0, 0, 0, 0.075);
  --panel:    rgba(249, 242, 229, 0.82);
  --panel-2:  rgba(249, 242, 229, 0.94);
  --panel-2-rgb: 249, 242, 229;
  --accent-umber: #8a5a2b;
  --accent-purple: var(--accent-umber);
  --seal-ink: #9c3a25;
  --line-rgb: 74, 60, 40;
  --hanji-rgb: 74, 60, 40; /* ↑ 2026-10-10. 아래는 옛 줄의 설명: 밝은 화면용 짙은 청동 (한지 위 4.99:1) */
  
  /* ⚠️ 네 가지 덕 색은 밝은 화면에서 흰 카드 위 2.1~3.8:1 이었습니다 — 기준(4.5) 미달.
     같은 색조를 유지하면서 명도만 내렸습니다 (5.9~7.2:1). (2026-08-21)
     ⚠️ 다시 밝게 되돌리려면 반드시 lightcontrast 시험을 함께 돌리십시오. */
  /* ⚠️ 2026-09-04 — 어두운 화면과 짝이 되게 안료 계열로 옮겼습니다.
        밝은 화면에서는 그대로 쓰면 대비가 모자라 한 단 짙게 잡습니다.
        바꾸실 때는 반드시 contrast·themecontrast 시험을 함께 돌리십시오. */
  --color-faith: #2f5c85;      /* 쪽빛 */
  --color-fortitude: #7a5417;  /* 황토 */
  --color-courage: #215f4c;    /* 석록 */
  --color-love: #96453a;       /* 연지 — 낙관(--seal-red)보다 흐리게 */
  --color-exp: #3d6b32;        /* 두록 */
  --ink-line: rgba(90, 74, 52, 0.16);
}

/* ⚠️ 2026-09-25 francisco 「파란색 글씨가 안보여」 — 색을 안 정한 링크가 브라우저 기본 파랑(#0000ee)으로 나와
   어두운 바탕에서 안 보였습니다(오늘 만나는 분 「주교회의 약전 원문 보기」 · 최양업 신부 화면 출처 9곳).
   모든 링크의 바탕색을 앱의 금빛으로 둡니다. :where() 라 무게가 0 이어서, 따로 색을 정한 링크는 그대로입니다. */
:where(a), :where(a:visited) { color: var(--accent-gold); }

/* Global Setup */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: var(--font-primary);
  -webkit-tap-highlight-color: transparent;
}

/* ⚠️ 2026-09-24 — 문서가 통째로 튕겨 올라가면 머리말이 상태 표시줄 밑으로 들어갑니다(아이폰).
   스크롤하는 곳은 .app-content 하나뿐입니다. 문서의 고무줄 튕김은 막습니다 (app.js pinAppFrame 과 짝). */
html, body { overscroll-behavior: none; }
/* ⚠️ 2026-09-26 francisco 「화면색이 이상해」 (아이폰 홈 화면 앱 캡처 — 화면 전체가 잿빛으로 뿌옇게)
   예전에는 body 바탕이 반투명(끝 색이 --surface-color 50%)이라 브라우저가 그것을 «문서 바탕»으로 옮겨 칠했습니다.
   body 를 fixed 로 둔 아이폰 홈 화면 앱에서 그 바탕이 칠해지지 않아, 반투명 화면 판(.app-container) 뒤로 흰색이 비쳤습니다
   (캡처 색 142,138,135 = 판 50% + 흰 바탕과 같음).
   → html 에 불투명 바탕을 두어 옮겨 칠하기를 끄고, body 는 흰 바탕에 얹었을 때와 «같은 색»의 불투명 그라디언트로 칠합니다.
     다른 폰·컴퓨터에서 보이는 색은 그대로입니다. html 바탕은 아이폰 아래 빈 띠에만 보입니다(탭 막대 색). */
html { background: var(--page-gap); }
body {
  background: linear-gradient(135deg, var(--bg-color) 0%, var(--page-end) 100%);
  color: var(--text-primary);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;   /* ⚠️ 아이폰 — 아래 .app-container 설명 참조 */
  line-height: 1.55;
  /* ⚠️ 글자 크기를 안 적은 글은 브라우저 기본(1rem)으로 새어 나갑니다.
        여덟 단계 밖의 값이라, 기본을 본문 단계로 잡아 둡니다 (2026-08-30). */
  font-size: var(--fs-base);
  transition: background 0.3s ease;
  /* ⚠️ 한글은 낱자 사이 **아무 데서나** 줄이 끊깁니다.
        「기도를 바치 / 어」 「짧게 정리 / 해 보세요」 처럼 어절이 갈라졌습니다.
        글상자마다 따로 적다 보니 자꾸 빠뜨려서, 여기 한 번만 두고 물려받게 합니다 (2026-08-30).
        ⚠️ 지우지 마십시오. 지우면 앱 곳곳에서 조용히 다시 갈라집니다.
        띄어쓰기 없는 아주 긴 글자(주소 같은 것)는 아래 한 줄이 받아 줍니다. */
  word-break: keep-all;
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4 {
  line-height: 1.3;
}

p {
  line-height: 1.6;
}

button {
  line-height: 1.35;
}

/* App Layout Container */
/* ⚠️ 아이폰 사파리에서 100vh 는 «주소창이 접힌» 높이입니다 (2026-09-02).
   주소창이 펼쳐져 있을 때는 보이는 화면이 그보다 100px 남짓 짧아서, 이 상자 바닥에
   붙인 탭 막대가 화면 밖으로 밀립니다. 100dvh 는 «지금 실제로 보이는» 높이입니다.
   ⚠️ 두 줄을 이 순서로 두십시오 — dvh 를 모르는 옛 브라우저는 앞줄(vh)을 씁니다.
   ⚠️ 데스크톱 브라우저 흉내로는 둘이 늘 같아서 확인이 안 됩니다. 실기기에서만 보입니다. */
.app-container {
  width: 100%;
  max-width: 480px;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--surface-color);
  /* ⚠️ 여기에 backdrop-filter 를 두면 안 됩니다 (2026-08-21).
     이 상자가 backdrop root 가 되어 **안쪽**의 .app-header · .app-nav-bar 가
     제 뒤의 내용을 못 봅니다. 그래서 흐림이 통째로 무효가 되고,
     마지막 카드 글자가 하단 탭 막대에 그대로 비쳐 보였습니다.
     이 상자는 어차피 페이지 바탕 위에만 얹히므로 흐릴 것이 없습니다. */
  box-shadow: var(--glass-shadow);
  border: 1px solid var(--border-color);
}
/* ⚠️ 2026-09-26 — 아이폰 홈 화면 앱(standalone)에서 아래 탭 막대 밑에 흰 띠가 남았습니다(캡처).
   상태표시줄까지 화면을 쓰는 앱에서는 100vh/100dvh 가 상태표시줄 높이만큼 짧게 잡힙니다.
   홈 화면 앱일 때만 화면 네 귀퉁이에 붙여(fixed · inset 0) 꽉 채웁니다. 사파리·안드로이드는 그대로. */
/*    → 틀만 fixed 로 하거나 화면 높이를 재어 늘리는 것은 안 됐습니다(막대가 잘림).
      몸통(body)을 fixed · inset 0 으로 두면 실제 화면에 맞춰지고, 틀은 그 100% 를 씁니다.
      html.ios-standalone 은 app.js markIosStandalone 이 아이폰 홈 화면 앱에서만 붙입니다. */
html.ios-standalone body { position: fixed; inset: 0; min-height: 0; }
html.ios-standalone .app-container { height: 100%; max-height: none; }
/* ⚠️ 2026-09-26 — 그래도 아래 흰 띠가 남는 까닭: iOS 26 홈 화면 앱의 WebKit 버그(화면이 상태 표시줄 높이만큼 짧게 잡힘, WebKit 301108).
   그 띠에는 앱을 그릴 수 없어서(늘리면 막대가 잘림 — w89) 색만 탭 막대와 같게 칠합니다(html 바탕 --page-gap).
   그 띠가 이미 홈 막대 자리를 비워 주므로, 짧게 잡힌 때(ios-short-viewport)에는 막대 아래 여백을 두지 않습니다.
   app.js markIosStandalone 이 화면 높이와 앱 높이가 20px 넘게 다를 때만 붙입니다 — 애플이 고치면 저절로 빠집니다. */
html.ios-short-viewport .app-nav-bar { height: 66px; padding-bottom: 0; }
/* 2026-09-26 francisco 「아래 부분 이상한데」 — 막대와 빈 띠 사이에 화면 판(.app-container)의 1px 테두리가 금처럼 보였습니다.
   홈 화면 앱은 화면 전체가 앱이라 판 테두리·그림자가 필요 없습니다(컴퓨터 브라우저에서는 그대로). */
html.ios-standalone .app-container { border: 0; box-shadow: none; }
.screen-diag-btn { display: none; }
html.ios-standalone .screen-diag-btn { display: block; }

/* 하루 한 장면 (2026-09-29) — 증인의 눈 그림을 하루 한 장씩. app.js renderDailyScene */
/* 그날의 수첩 (2026-09-30) — 하루 한 장면의 마지막 장면 아래 · modal-sujeop */
.daily-scene-card .ds-sujeop-btn { min-height: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(216,174,106,.45); background: transparent; color: var(--accent-gold); font-size: var(--fs-xs); font-weight: 700; cursor: pointer; }
.daily-scene-card .ds-sujeop { margin-top: 14px; padding: 14px 14px 12px; border-radius: 12px; background: rgba(216,174,106,.08); border: 1px solid rgba(216,174,106,.28); }
.ds-sujeop .sj-eyebrow { margin: 0; font-size: var(--fs-xs); color: var(--text-secondary); font-weight: 700; }
.ds-sujeop .sj-title { margin: 4px 0 0; font-family: var(--font-serif); font-size: var(--fs-md); color: var(--accent-gold); font-weight: 700; word-break: keep-all; }
.ds-sujeop .sj-note { margin: 8px 0 0; font-family: var(--font-serif); font-size: var(--fs-sm); line-height: 1.7; color: var(--text-primary); word-break: keep-all; }
.ds-sujeop .sj-open { display: block; width: 100%; min-height: 48px; margin-top: 10px; border-radius: 999px; border: 1.5px solid var(--accent-gold); background: rgba(216,174,106,.14); color: var(--text-primary); font-size: var(--fs-sm); font-weight: 700; cursor: pointer; }
.sujeop-modal { position: relative; max-width: 560px; }
#modal-sujeop .modal-body { max-height: 68vh; overflow-y: auto; }
#modal-sujeop .sj-meta { margin: 0 0 10px; font-size: var(--fs-xs); color: var(--text-secondary); }
#modal-sujeop .sj-p { margin: 0 0 12px; font-family: var(--font-serif); font-size: var(--fs-md); line-height: 1.85; color: var(--text-primary); word-break: keep-all; }
#modal-sujeop .sj-note-box { margin: 16px 0 6px; padding: 14px 16px; border-left: 3px solid var(--accent-gold); background: rgba(216,174,106,.08); border-radius: 0 10px 10px 0; font-family: var(--font-serif); font-size: var(--fs-md); line-height: 1.7; color: var(--text-primary); word-break: keep-all; }
#modal-sujeop .sj-note-box span:not(.sj-note-text) { display: block; margin-bottom: 4px; font-family: var(--font-primary); font-size: var(--fs-xs); color: var(--accent-gold); font-weight: 700; }
#modal-sujeop .sj-note-box small { display: block; margin-top: 4px; font-family: var(--font-primary); font-size: var(--fs-xs); color: var(--text-secondary); }
#modal-sujeop .sj-question { margin: 14px 0 0; padding: 12px 14px; border-radius: var(--r-sm); border: 1px dashed rgba(216,174,106,.45); font-size: var(--fs-sm); line-height: 1.6; color: var(--text-primary); word-break: keep-all; }
#modal-sujeop .sj-next { margin: 14px 0 0; font-size: var(--fs-sm); color: var(--accent-gold); font-style: italic; word-break: keep-all; }
#modal-sujeop .sj-facts { margin: 14px 0 0; font-size: var(--fs-xs); line-height: 1.6; color: var(--text-secondary); word-break: keep-all; }
#modal-sujeop .sj-facts a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent-gold); }
#modal-sujeop .sj-write { display: block; width: 100%; min-height: 52px; margin-top: 14px; border-radius: 999px; border: 1.5px solid var(--accent-gold); background: rgba(216,174,106,.14); color: var(--text-primary); font-size: var(--fs-base); font-weight: 700; cursor: pointer; }
#modal-sujeop .modal-footer.sujeop-nav { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 10px; }
#modal-sujeop .sujeop-nav .modal-btn { flex: 0 1 auto; width: auto; min-width: 104px; min-height: 44px; margin: 0; }
#modal-sujeop .sujeop-nav .modal-btn:disabled { opacity: .4; }
/* 이달의 성월 · 사순 · 부활 (2026-09-29) — app.js renderMonthCard. 묵주기도 성월 카드와 같은 모양 */
.month-card[hidden] { display: none !important; }
.month-card .mc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.month-card .mc-head h3 { margin: 0; }
.month-card .mc-season { font-size: var(--fs-xs); color: var(--accent-gold); font-weight: 700; }
.month-card .mc-today { margin: 8px 0 0; font-family: var(--font-serif); font-size: var(--fs-md); line-height: 1.6; color: var(--accent-gold); word-break: keep-all; }
.month-card .mc-lead { margin: 8px 0 0; font-size: var(--fs-sm); line-height: 1.65; color: var(--text-primary); word-break: keep-all; }
.month-card .mc-lead-season { color: var(--text-secondary); }
.month-card .mc-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 52px; margin-top: 12px; border-radius: 999px; border: 1.5px solid var(--accent-gold); background: rgba(216,174,106,.14); color: var(--text-primary); font-size: var(--fs-base); font-weight: 700; cursor: pointer; }
.month-card .mc-btn small, .month-card .mc-btn-sub small { font-size: var(--fs-xs); font-weight: 400; opacity: .8; }
.month-card .mc-btn-sub { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-top: 8px; border-radius: 999px; border: 1px solid rgba(216,174,106,.5); background: transparent; color: var(--accent-gold); font-size: var(--fs-sm); font-weight: 700; cursor: pointer; }
.month-card .mc-done { margin: 10px 0 0; font-size: var(--fs-sm); color: var(--accent-gold); }
.month-card .mc-beads { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.month-card .mc-beads i { width: 9px; height: 9px; border-radius: 50%; background: var(--accent-gold); opacity: .85; }
.month-card .mc-count { margin: 6px 0 0; font-size: var(--fs-xs); color: var(--text-secondary); }
/* 대림·성탄 구유 (2026-09-29) — app.js renderCribCard */
.crib-card[hidden] { display: none !important; }
.crib-card .crib-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.crib-card .crib-head h3 { margin: 0; }
.crib-card .crib-when { font-size: var(--fs-xs); color: var(--accent-gold); font-weight: 700; }
.crib-card .crib-figure { position: relative; margin: var(--space-sm) 0 10px; border-radius: var(--r-sm); overflow: hidden; background: #efe3cc; aspect-ratio: 4 / 3; }
.crib-card .crib-figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.crib-card .crib-back { position: absolute; right: 8px; bottom: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 0; background: rgba(20,16,12,.72); color: var(--on-dark); font-size: var(--fs-xs); font-weight: 700; cursor: pointer; }
.crib-card .crib-text { margin: 0; font-family: var(--font-serif); font-size: var(--fs-md); line-height: 1.7; color: var(--text-primary); word-break: keep-all; }
.crib-card .crib-text b { color: var(--accent-gold); margin-right: 4px; }
.crib-card .crib-thumbs { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 12px; }
.crib-card .crib-thumb { position: relative; aspect-ratio: 1; min-height: 44px; padding: 0; border-radius: var(--r-xs); overflow: hidden; border: 2px solid transparent; background: rgba(216,174,106,.12); cursor: pointer; }
.crib-card .crib-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crib-card .crib-thumb.is-on { border-color: var(--accent-gold); }
.crib-card .crib-thumb.is-locked { cursor: default; border: 1px dashed rgba(216,174,106,.35); }
.crib-card .crib-thumb.is-locked span { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-secondary); font-size: var(--fs-xs); }
.crib-card .crib-sub { margin: 0 0 4px; font-size: var(--fs-xs); font-weight: 700; color: var(--text-secondary); }
.crib-card .crib-wreath { margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(216,174,106,.3); text-align: center; }
.crib-card .crib-wreath .crib-sub { text-align: left; }
.crib-card .crib-wreath-svg { display: block; width: 100%; max-width: 300px; margin: 0 auto; }
.crib-card .cw-candle { cursor: pointer; outline: none; }
/* 2026-09-30 아직인 초 — 비쳐 보이지 않게 투명 대신 어둡게 (둥근 대림환 뒤가 비쳐 보였습니다) */
.crib-card .cw-candle.is-wait { filter: saturate(.4) brightness(.55); cursor: default; }
.crib-card .cw-candle .cw-flame { opacity: 0; transition: opacity .6s ease; transform-box: fill-box; transform-origin: 50% 100%; }
.crib-card .cw-candle.is-lit .cw-flame { opacity: 1; animation: cwFlicker 3.6s ease-in-out infinite; }
.crib-card .cw-candle:focus-visible rect:first-child { stroke: var(--accent-gold); stroke-width: 2; }
/* 2026-09-30 「거룩하고 세련되게」 — 흔들림을 더 느리고 잔잔하게 */
@keyframes cwFlicker { 0%,100% { transform: scale(1,1); } 45% { transform: scale(.97,1.03); } 75% { transform: scale(1.02,.98); } }
@media (prefers-reduced-motion: reduce) { .crib-card .cw-candle.is-lit .cw-flame { animation: none; } }
[data-theme="light"] .crib-card .cw-shade { opacity: .4; }
.crib-card .crib-wreath-hint { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--text-secondary); }
.crib-card .crib-straw { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed rgba(216,174,106,.3); }
/* 2026-09-30 짚 한 올 — 붓그림 석 장 (빈 구유 위에 짚 가득한 구유를 아래에서부터 드러냄) */
.crib-card .crib-manger-pic { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-sm); overflow: hidden; background: #1d2230; }
.crib-card .crib-manger-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.crib-card .crib-manger-pic .cmp-straw {
  -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--straw-top, 77%) - 4%), #000 var(--straw-top, 77%));
          mask-image: linear-gradient(to bottom, transparent calc(var(--straw-top, 77%) - 4%), #000 var(--straw-top, 77%));
  opacity: var(--straw-op, 1);
}
.crib-card .crib-straw-text p { margin: 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--text-primary); word-break: keep-all; }
.crib-card .crib-straw-text .crib-sub { color: var(--text-secondary); }
.crib-card .crib-straw-text b { color: var(--accent-gold); }
.crib-card .crib-done { color: var(--accent-gold) !important; margin-top: 2px !important; }
.crib-card .crib-muted { color: var(--text-secondary) !important; margin-top: 2px !important; }
.crib-card .crib-note { margin: 12px 0 0; font-size: var(--fs-xs); color: var(--text-secondary); }
.daily-scene-card[hidden] { display: none !important; }
.daily-scene-card .ds-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.daily-scene-card .ds-head h3 { margin: 0; }
.daily-scene-card .ds-story { font-size: var(--fs-xs); color: var(--text-secondary); }
.daily-scene-card .ds-figure { margin: var(--space-sm) 0 10px; border-radius: var(--r-sm); overflow: hidden; background: #efe3cc; aspect-ratio: 4 / 3; }
.daily-scene-card .ds-figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.daily-scene-card .ds-text { margin: 0; font-family: var(--font-serif); font-size: var(--fs-md); line-height: 1.75; color: var(--text-primary); word-break: keep-all; }
.daily-scene-card .ds-src { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--text-secondary); }
/* 근거 고리도 손가락이 닿게 44px (tapsize) */
.daily-scene-card .ds-src a { display: inline-flex; align-items: center; min-height: 44px; }
.daily-scene-card .ds-invocation { margin: var(--space-md) 0 0; text-align: center; font-family: var(--font-serif); color: var(--accent-gold); font-size: var(--fs-md); line-height: 1.6; word-break: keep-all; }
.daily-scene-card .ds-shrine-btn { display: block; width: 100%; min-height: 48px; margin-top: 10px; border-radius: 999px; border: 1px solid rgba(216,174,106,.5); background: transparent; color: var(--accent-gold); font-size: var(--fs-sm); font-weight: 700; cursor: pointer; }
.daily-scene-card .tts-bar { justify-content: flex-start; }
.daily-scene-card .ds-next { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed rgba(216,174,106,.3); color: var(--text-secondary); font-size: var(--fs-sm); }
.daily-scene-card .ds-next-thumb { width: 64px; height: 48px; flex-shrink: 0; border-radius: var(--r-xs); object-fit: cover; filter: blur(3px) grayscale(.6); opacity: .7; }
body.easy-mode .daily-scene-card .ds-text { font-size: var(--fs-base); }

/* 10월 묵주기도 성월 (2026-09-29) — app.js renderRosaryMonth */
.rosary-month-card[hidden] { display: none !important; }
.rosary-month-card h3 { margin: 0 0 4px; }
.rosary-month-card .rm-lead { margin: 0; color: var(--text-secondary); font-size: var(--fs-sm); }
.rosary-month-card .rm-decade { margin: 10px 0 0; font-family: var(--font-serif); font-size: var(--fs-md); line-height: 1.6; color: var(--text-primary); word-break: keep-all; }
.rosary-month-card .rm-decade span { display: block; font-family: var(--font-primary); font-size: var(--fs-xs); color: var(--accent-gold); font-weight: 700; margin-bottom: 2px; }
.rosary-month-card .rm-done { margin: 8px 0 0; font-size: var(--fs-sm); color: var(--accent-gold); }
.rosary-month-card .rm-btn { display: block; width: 100%; min-height: 52px; margin-top: 12px; border-radius: 999px; border: 1.5px solid var(--accent-gold); background: rgba(216,174,106,.14); color: var(--text-primary); font-size: var(--fs-base); font-weight: 700; cursor: pointer; }
.rosary-month-card .rm-btn-sub { display: block; width: 100%; min-height: 44px; margin-top: 8px; border-radius: 999px; border: 1px solid rgba(216,174,106,.35); background: transparent; color: var(--accent-gold); font-size: var(--fs-sm); font-weight: 700; cursor: pointer; }
.rosary-month-card .rm-beads { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 14px; }
.rosary-month-card .rm-beads i { width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f3dc98, var(--accent-gold) 60%, #8a6424); box-shadow: 0 0 4px rgba(216,174,106,.45); }
.rosary-month-card .rm-beads i:nth-child(10n) { width: 13px; height: 13px; margin-right: 6px; }
.rosary-month-card .rm-count { margin: 6px 0 0; font-size: var(--fs-xs); color: var(--text-secondary); }

/* 지난 기도 다시 만나기 (2026-09-29) — app.js renderPrayerMemory */
.prayer-memory-card[hidden] { display: none !important; }
.prayer-memory-card h3 { margin: 0 0 4px; }
.prayer-memory-card .pm-lead { margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); }
.prayer-memory-card .pm-body { margin: 10px 0 0; padding: 10px 14px; border-left: 2px solid rgba(216,174,106,.5); }
.prayer-memory-card .pm-title { margin: 0; font-family: var(--font-serif); font-size: var(--fs-md); font-weight: 700; color: var(--text-primary); word-break: keep-all; }
.prayer-memory-card .pm-content { margin: 4px 0 0; font-family: var(--font-serif); font-size: var(--fs-md); line-height: 1.65; color: var(--text-primary); white-space: pre-line; word-break: keep-all; }
.prayer-memory-card .pm-thanks { margin: 8px 0 0; font-size: var(--fs-sm); color: var(--accent-gold); line-height: 1.6; word-break: keep-all; }
.prayer-memory-card .pm-count, .prayer-memory-card .pm-done { margin: 8px 0 0; font-size: var(--fs-sm); color: var(--text-secondary); }
.prayer-memory-card .pm-done { color: var(--accent-gold); }
.prayer-memory-card .pm-btn { display: block; width: 100%; min-height: 52px; margin-top: 12px; border-radius: 999px; border: 1.5px solid var(--accent-gold); background: rgba(216,174,106,.14); color: var(--text-primary); font-size: var(--fs-base); font-weight: 700; cursor: pointer; }
.prayer-memory-card .pm-btn-sub { display: block; width: 100%; min-height: 44px; margin-top: 8px; border-radius: 999px; border: 1px solid rgba(216,174,106,.35); background: transparent; color: var(--accent-gold); font-size: var(--fs-sm); font-weight: 700; cursor: pointer; }
.prayer-memory-card .pm-btn-sub.quiet { border-color: transparent; color: var(--text-secondary); font-weight: 400; }

/* 먼저 떠난 분 기억하기 (2026-09-29) — app.js renderDepartedCard · renderDepartedList */
.departed-card[hidden] { display: none !important; }
.departed-card h3 { margin: 0 0 4px; }
.departed-card .dp-lead { margin: 0; font-family: var(--font-serif); font-size: var(--fs-md); line-height: 1.6; color: var(--text-primary); word-break: keep-all; }
.departed-card .dp-names { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 12px 0 0; }
.departed-card .dp-names span { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(216,174,106,.35); background: rgba(216,174,106,.06); font-family: var(--font-serif); font-size: var(--fs-sm); color: var(--text-primary); }
.departed-card .dp-invite { margin: 10px 0 0; font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.6; word-break: keep-all; }
.departed-card .dp-done { margin: 10px 0 0; font-size: var(--fs-sm); color: var(--accent-gold); }
.departed-card .dp-btn, .departed-section .dp-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 56px; margin-top: 12px; border-radius: 999px; border: 1.5px solid var(--accent-gold); background: rgba(216,174,106,.14); color: var(--text-primary); font-size: var(--fs-base); font-weight: 700; cursor: pointer; }
.departed-card .dp-btn small, .departed-section .dp-btn small { font-size: var(--fs-xs); font-weight: 400; color: var(--text-secondary); }
.departed-card .dp-btn-sub { display: block; width: 100%; min-height: 44px; margin-top: 8px; border-radius: 999px; border: 1px solid rgba(216,174,106,.35); background: transparent; color: var(--accent-gold); font-size: var(--fs-sm); font-weight: 700; cursor: pointer; }
.departed-section #departed-list { margin: 8px 0 10px; }
.departed-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 8px 0; border-bottom: 1px dashed rgba(216,174,106,.2); }
.departed-row .departed-name { font-family: var(--font-serif); color: var(--text-primary); }
.departed-row small { color: var(--text-secondary); font-size: var(--fs-xs); }
.departed-row .departed-actions { margin-left: auto; display: flex; gap: 6px; }
.departed-row .departed-actions button { min-height: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(216,174,106,.3); background: transparent; color: var(--accent-gold); font-size: var(--fs-xs); cursor: pointer; }

/* 기도 촛불 (2026-09-29) — 눌러 켜고 「후」 불어 끔. 그림은 묵상 촛불(.breath-candle) 그대로, 크기만 줄임. app.js prayerCandleHTML */
.prayer-candle-box { margin: 4px 0 10px; text-align: center; }
.prayer-candle-btn { display: block; width: 208px; height: 184px; margin: 0 auto; cursor: pointer; -webkit-tap-highlight-color: transparent; border-radius: 16px; }
.prayer-candle-btn:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 2px; }
.prayer-candle-btn .breath-ring.breath-candle { margin: 0 auto; transform: scale(.7); transform-origin: 50% 0; }
/* 꺼진 초: 불꽃 · 빛 없음 */
.prayer-candle:not(.is-lit) .candle-tilt { opacity: 0; transform: scale(.2); }
.prayer-candle:not(.is-lit) .candle-glow { opacity: 0 !important; }
.prayer-candle .candle-tilt { transition: opacity .5s ease, transform .5s ease; transform-origin: 50% 100%; }
.prayer-candle.is-lit .candle-glow { opacity: .9; transform: scale(1); transition: opacity 1.2s ease; }
.prayer-candle.is-lighting .candle-tilt { animation: pc-catch .9s ease-out; }
/* 2026-09-30 불고 있는 동안 불꽃이 입김만큼 눕고 작아짐 (app.js startBlowListen 이 --blow 0~1) */
.prayer-candle.is-lit .candle-tilt { transform: rotate(calc(var(--blow, 0) * -28deg)) scale(calc(1 - var(--blow, 0) * .45)); transition: transform .12s ease-out, opacity .5s ease; }
@keyframes pc-catch { 0% { opacity: 0; transform: scale(.2); } 60% { opacity: 1; transform: scale(1.15); } 100% { transform: scale(1); } }
/* 불어 끈 뒤: 가는 연기 한 줄기 */
.prayer-candle .pc-smoke { position: absolute; left: 50%; top: 40px; width: 14px; height: 60px; margin-left: -7px; opacity: 0; pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 70%, rgba(220,215,205,.55), rgba(220,215,205,0) 70%); filter: blur(3px); }
.prayer-candle.is-out .pc-smoke { animation: pc-smoke 1.8s ease-out forwards; }
@keyframes pc-smoke { 0% { opacity: .8; transform: translateY(8px) scaleX(.6); } 100% { opacity: 0; transform: translateY(-40px) scaleX(1.6); } }
.prayer-candle-hint { margin: 0 0 6px; font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.6; word-break: keep-all; }
@media (prefers-reduced-motion: reduce) { .prayer-candle.is-lighting .candle-tilt, .prayer-candle.is-out .pc-smoke { animation: none; } }
/* 2026-09-26 「아래 채우기」 시험 (francisco 폰에서 잰 값: 화면 874 · 창/dvh 812 · vh/lvh 874 · 안전 위 62 · 아래 34).
   빈 띠(812~874)는 html 바탕색으로 칠해지고 있었음(캡처 색이 --page-gap 과 같음) → 그 자리도 그릴 수 있는 곳.
   그래서 fixed 를 풀고 틀을 100lvh(=화면 874)로 둡니다. 막대 아래 여백은 보통 때처럼 홈 막대의 절반.
   2026-09-27 francisco 폰에서 켜 보니 막대가 화면 끝까지 닿고 잘림 없음 → 홈 화면 앱에서 기본으로 켬.
   「화면 크기 재기」 창에서 끌 수 있습니다(pilgrimage_ios_fill = '0'). ⚠️ 100dvh 로 되돌리지 마십시오 — 이 폰에서 dvh 는 812(짧음). */
html.ios-standalone.ios-fill body { position: static; inset: auto; min-height: 100lvh; }
html.ios-standalone.ios-fill .app-container { height: 100lvh; max-height: none; }
html.ios-fill.ios-short-viewport .app-nav-bar { height: calc(66px + env(safe-area-inset-bottom, 0px) * 0.5); padding-bottom: calc(env(safe-area-inset-bottom, 0px) * 0.5); }
html.ios-fill.ios-short-viewport body.easy-mode .app-nav-bar { height: calc(70px + env(safe-area-inset-bottom, 0px) * 0.5); padding-bottom: calc(env(safe-area-inset-bottom, 0px) * 0.5); }
html.ios-short-viewport body.easy-mode .app-nav-bar { height: 70px; padding-bottom: 0; }

/* ⚠️ 아래 요소들은 글자 크기 규칙이 아예 없어서 **브라우저 기본값**이 새어 나왔습니다.
   단추 13.33px(0.833rem), h3 18.72px(1.17rem) — 정해 둔 여덟 단계 어디에도 없는 값입니다.
   선택자를 요소 이름만으로 두었으므로 클래스가 붙은 기존 규칙이 그대로 이깁니다. (2026-08-21) */
button, input, select, textarea { font-size: var(--fs-md); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-base); }

/* ⚠️ 목록 앞의 점(•)을 앱 전체에서 뺍니다 (2026-08-30).
      성찰 질문 · 고해 준비의 「마음에 남은 질문」 · 만남의 되새김 …
      곳곳에서 점이 붙은 줄과 안 붙은 줄이 섞여 있었습니다.
      이 앱의 글은 «묻는 말»과 «기도문»이라 점을 찍으면 장보기 목록처럼 보입니다.
      · <ul><li> 는 그대로 둡니다 — 화면을 읽어 주는 기계에게는 «몇 가지짜리 목록»이라고
        알려 주어야 합니다. **점만 감추는 것이지 목록을 없애는 것이 아닙니다.**
      · 새 목록을 만들 때 여기 말고 그 자리에서 다시 점을 켜지 마십시오.
        (`.agents/bullets.js` 가 점이 남은 목록을 잡아냅니다) */
ul { list-style: none; margin: 0; padding: 0; }
li + li { margin-top: 3px; }
/* ⚠️ 점을 뺐으면 **왼쪽 정렬**이 함께 가야 합니다.
      창 본문은 가운데 정렬(.modal-body)인데, 점이 사라지자 왼쪽을 잡아 주던 것이
      없어져 「…노력했는 / 가?」처럼 여러 줄 질문이 들쭉날쭉해졌습니다.
      묻는 말은 한 줄로 안 끝납니다. 목록은 왼쪽에 붙여 둡니다. */
ul li {
  text-align: left;
  /* 한글은 낱자 사이 아무 데서나 끊깁니다 — 「…노력했는 / 가?」가 실제로 그랬습니다 */
  word-break: keep-all;
}

/* Top Header */
.app-header {
  padding: calc(16px + var(--safe-top)) 20px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  background: var(--nav-bg);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.holy-cross {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}
/* ⚠️ 2026-09-06. 자로 그은 얇은 십자가(선 아이콘)에서 붓으로 그린 순교자의
   십자가(끝이 벌어진 모양, 황토 물)로 바꿨습니다 — 색이 이미 그림 안에
   있으니 금빛 번짐(drop-shadow)은 뗐습니다. 어두운 화면에서만 살짝 뜨도록
   다른 붓 그림과 같은 옅은 한지 빛만 둡니다. */
[data-theme="dark"] .holy-cross { filter: drop-shadow(0 0 1.5px rgba(233, 222, 200, 0.5)); }

.header-logo h1 {
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.5px;
  /* ⚠️ 예전에는 #fff 에서 금색으로 흐르는 글자였습니다.
     밝은 화면에서는 흰 글자가 흰 바탕에 얹혀 앱 이름이 통째로 안 보였습니다.
     첫 색을 그 화면의 글자색으로 두면 어느 쪽에서든 읽힙니다. (2026-08-21) */
  background: linear-gradient(135deg, var(--text-primary) 40%, var(--accent-gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}

/* ⚠️ 2026-09-06. 금빛 번쩍이는 알약 두 개(게임 HUD 느낌)가 붓으로 그린
   십자가·낙관 옆에서 계속 어색하고 약해 보인다는 지적을 받았습니다.
   알약(둥근 테두리 상자)을 걷어내고 글자만 남겼습니다. 밑줄로 무게를
   주려 했으나 그것도 별로라 해서 뗐습니다 — 이제 상자도 선도 없이,
   색(금색)과 굵기·크기 차이만으로 「번째 길」 쪽에 눈이 가게 합니다. */
.user-level-badge {
  background: none;
  color: var(--accent-gold);
  padding: 0;
  font-size: var(--fs-md);
  font-weight: 700;
  white-space: nowrap;
  font-family: var(--font-heading);
}

/* Main Content Area */
.app-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 20px 100px 20px;
  /* ⚠️ 아이폰 홈 표시줄(아래 가로 막대) 만큼 더 띄웁니다. 없는 기기에서는 0 입니다.
     index.html 의 viewport 에 viewport-fit=cover 가 있어야 이 값이 살아납니다. */
  padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
  position: relative;
}

/* Hide scrollbars but keep scrolling functionality */
.app-content::-webkit-scrollbar {
  width: 4px;
}
.app-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--r-sm);
}

/* SPA Screens View */
.app-view {
  display: none;
  flex-direction: column;
  gap: 20px;
  animation: fadeIn 0.4s ease forwards;
}

.app-view.active {
  display: flex;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.view-header h2 {
  font-size: var(--fs-2xl);
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--text-primary);
}

/* ⚠️ 「오늘」 제목만 낙관을 답니다 — Main.dc.html 시안처럼
   글줄과 도장을 같은 flex 축에 두어 가운데를 맞춥니다.
   vertical-align 로 글자 속에 끼워 넣으면 글줄 높이에 따라
   도장이 아래로 처져 보입니다 (2026-08-30 francisco 님 지적). */
.today-view-header h2 {
  display: flex;
  align-items: center;
}

.view-header p {
  font-size: var(--fs-md);
  color: var(--text-secondary);
  line-height: 1.4;
}

/* 1. MAP VIEW STYLING */
.map-wrapper {
  position: relative;
  width: 100%;
  /* ⚠️ 고정 490px 이면 아래 「가까운 성지」 카드가 화면 밖으로 밀려나 안 보였습니다.
     화면 높이에 맞춰 줄어들게 두고, 카드가 들어설 자리를 남깁니다. */
  height: clamp(240px, 38vh, 420px);
  border-radius: var(--r-md);
  overflow: hidden; /* 구글 지도가 래퍼 영역 안에서만 동작하도록 제한 */
  border: 2px solid var(--accent-gold);
  box-shadow: inset 0 0 40px rgba(0,0,0,0.8), 0 10px 30px rgba(0,0,0,0.5);
}

#map {
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* 한지 고지도 종이 질감 오버레이 */
.hanji-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 지도 조작 터치 이벤트 통과 */
  z-index: 5;
  mix-blend-mode: multiply; /* 맵 색상과 한지 질감 융합 */
  opacity: 0.24;
  /* 한지 특유의 거친 섬유결과 얼룩진 세피아 고도(古圖) 질감 구현 */
  background: 
    radial-gradient(circle at 50% 50%, rgba(244, 230, 200, 0.3), rgba(215, 185, 145, 0.7)),
    repeating-radial-gradient(circle, rgba(139, 115, 85, 0.05) 0px, rgba(139, 115, 85, 0.05) 3px, transparent 3px, transparent 6px),
    repeating-linear-gradient(45deg, rgba(139, 115, 85, 0.03) 0px, rgba(139, 115, 85, 0.03) 1px, transparent 1px, transparent 4px);
  background-blend-mode: overlay;
}

/* Floating GPS Simulator Panel */
.gps-simulator-panel {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  z-index: 10;
  background: var(--panel-2);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border: 1px solid var(--border-color);
  border-radius: var(--r-md);
  padding: 12px;
  box-shadow: var(--glass-shadow);
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.gps-simulator-panel .panel-body {
  transition: max-height 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.25s ease, margin-top 0.3s;
  overflow: hidden;
  max-height: 500px;
  opacity: 1;
}

.gps-simulator-panel.collapsed .panel-body {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

.gps-simulator-panel.collapsed {
  padding-bottom: 8px;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.panel-header h3 {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--accent-gold);
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background: #39ff14;
  border-radius: 50%;
  box-shadow: 0 0 8px #39ff14;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(57, 255, 20, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(57, 255, 20, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(57, 255, 20, 0); }
}

/* 지역 탭 바 레이아웃 */
.simulator-region-tabs {
  display: flex;
  flex-wrap: wrap; /* 줄바꿈을 허용하여 모든 지역 필터 버튼이 화면 밖으로 잘리지 않고 한눈에 보이게 수정 */
  gap: 6px 5px;
  margin-top: 8px;
  margin-bottom: 10px;
  width: 100%;
}

/* 탭 개별 버튼 스타일 */
.region-tab-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(var(--line-rgb), 0.1);
  color: var(--text-secondary);
  padding: 4px 10px; /* 콤팩트 패딩으로 모바일 2줄 배치가 슬림하게 이루어짐 */
  font-size: var(--fs-xs);
  border-radius: var(--r-lg);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.region-tab-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

/* 활성화된 탭 하이라이트 */
.region-tab-btn.active {
  background: linear-gradient(135deg, rgba(216, 174, 106, 0.2), rgba(216, 174, 106, 0.05));
  border-color: var(--accent-gold);
  color: var(--accent-gold);
  font-weight: 600;
  box-shadow: 0 0 8px rgba(216, 174, 106, 0.2);
}

/* 아코디언 폴더 섹션 */
.shrine-region-accordion {
  margin-bottom: 8px;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.02);
}

/* 아코디언 헤더 스타일 */
.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  user-select: none;
  transition: background 0.2s;
}
.accordion-header:hover {
  background: rgba(255, 255, 255, 0.08);
}

.accordion-title-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 폴더 아이콘 회전 */
.folder-icon {
  font-size: var(--fs-xs);
  color: var(--accent-gold);
  transition: transform 0.2s;
  display: inline-block;
}
.folder-icon.open {
  transform: rotate(0deg);
}

/* 완주 현황 뱃지 */
.shrine-count-badge {
  font-size: var(--fs-xs);
  padding: 2px 8px;
  border-radius: var(--r-sm);
  background: rgba(255, 215, 0, 0.15);
  color: var(--accent-gold);
  border: 1px solid rgba(255, 215, 0, 0.3);
  font-weight: 600;
}

/* 열기/접기 텍스트 가이드 */
.toggle-status {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

/* 아코디언 바디 접기 트랜지션 */
.accordion-body {
  max-height: 1800px;
  transition: max-height 0.3s ease-out, opacity 0.2s ease-out;
  opacity: 1;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(0, 0, 0, 0.2);
}
.accordion-body.collapsed {
  max-height: 0;
  opacity: 0;
  padding: 0;
  overflow: hidden;
  border-top: none;
}

.simulator-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
  width: 100%;
  max-height: 220px; /* 지도 크기를 고려하여 리스트 높이를 적절히 제한 */
  overflow-y: auto;  /* 리스트가 길어지면 내부 스크롤 활성화 */
  padding-right: 4px;
}

.sim-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(var(--line-rgb), 0.1);
  color: var(--text-primary);
  padding: 10px 14px; /* 클릭 영역을 넓혀 모바일 터치 편의성 증가 */
  font-size: var(--fs-md);
  border-radius: var(--r-xs);
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;             /* 너비를 100%로 채움 */
  justify-content: flex-start; /* 아이콘과 텍스트를 왼쪽으로 깔끔하게 정렬 */
  white-space: normal;      /* 긴 성지 이름이 줄바꿈될 수 있도록 허용 */
  word-break: keep-all;     /* 한글 어절이 어색하게 끊어지지 않도록 설정 */
  text-align: left;
}

.sim-btn:hover {
  background: var(--accent-umber);
  border-color: var(--accent-umber);
  transform: translateY(-1px);
}

/* 시뮬레이터 스크롤바 미학적 커스텀 */
.simulator-controls::-webkit-scrollbar {
  width: 6px;
}
.simulator-controls::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: var(--r-xs);
}
.simulator-controls::-webkit-scrollbar-thumb {
  background: rgba(255, 215, 0, 0.3);
  border-radius: var(--r-xs);
}
.simulator-controls::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 215, 0, 0.6);
}

.sim-btn.btn-danger {
  border-color: rgba(255, 46, 147, 0.4);
}
.sim-btn.btn-danger:hover {
  background: var(--color-love);
  border-color: var(--color-love);
}

.coord-display {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  /* ⚠️ 2026-09-13. 늘 검정 반투명이라 밝은 화면에서 어둡게 남았습니다. */
  background: var(--sunken);
  padding: 6px 10px;
  border-radius: var(--r-xs);
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid var(--border-color);
}

.sim-status {
  color: var(--accent-gold);
  font-weight: 600;
  margin-top: 2px;
}

/* 2. PILGRIMAGE VIEW STYLING */
.verification-center {
  background: linear-gradient(145deg, var(--surface-color), var(--panel-deep));
  border: 1px solid var(--border-color);
  border-radius: var(--r-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.location-status-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.status-icon {
  width: 44px;
  height: 44px;
  /* ⚠️ 보랏빛 판이 앱 안에서 여기만 튀었습니다. 금빛 결로 맞춥니다. */
  background: var(--gold-soft);
  border: 1px solid var(--gold-soft-border);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-gold);
  flex: none;
}

.status-icon svg {
  width: 24px;
  height: 24px;
}

.status-details h4 {
  font-size: var(--fs-base);
  font-weight: 600;
  margin-bottom: 2px;
}

.status-details p {
  font-size: var(--fs-md);
  color: var(--text-secondary);
}

.verify-action-btn {
  width: 100%;
  /* ⚠️ 여기만 네온 보라(#7209b7)였습니다. 앱 전체가 한지·금빛인데 이 단추 하나가 튀었습니다.
     이 화면의 「주 단추」이므로 금색으로 꽉 채웁니다. (2026-08-21) */
  background: linear-gradient(135deg, var(--accent-gold), var(--gold-grad-end));
  border: 1px solid rgba(var(--line-rgb), 0.1);
  color: var(--on-gold);
  padding: 14px;
  font-size: var(--fs-lg);
  font-weight: 700;
  border-radius: var(--r-md);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 18px rgba(216, 174, 106, 0.28);
  transition: all 0.3s;
}

.verify-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(216, 174, 106, 0.42);
}

.verify-icon {
  width: 20px;
  height: 20px;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.shrine-item-card {
  background: var(--panel);
  border: 1px solid var(--border-color);
  border-radius: var(--r-md);
  padding: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.3s;
}

.shrine-item-card.visited {
  background: rgba(128, 237, 153, 0.05);
  border-color: rgba(128, 237, 153, 0.2);
}

.shrine-info h4 {
  font-size: var(--fs-base);
  font-weight: 600;
  margin-bottom: 2px;
}

.shrine-info .shrine-meta {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.shrine-info .shrine-meta strong {
  color: var(--accent-gold);
}

.shrine-status-badge {
  padding: 4px 8px;
  border-radius: var(--r-xs);
  font-size: var(--fs-xs);
  font-weight: 700;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
}

.shrine-item-card.visited .shrine-status-badge {
  background: rgba(128, 237, 153, 0.15);
  color: var(--color-exp);
  box-shadow: inset 0 0 5px rgba(128, 237, 153, 0.1);
}

/* 3. MY PAGE VIEW STYLING */
.mentor-selection-card {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: var(--r-lg);
  padding: 20px;
}

.mentor-selection-card h3 {
  font-size: var(--fs-xl);
  color: var(--accent-gold);
  margin-bottom: 6px;
  text-align: center;
}

.mentor-intro {
  font-size: var(--fs-md);
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.6;
  margin-bottom: var(--space-lg);
}

.mentor-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.mentor-card {
  background: var(--sunken-2);
  border: 1px solid var(--border-color);
  border-radius: var(--r-md);
  padding: 16px;
  cursor: pointer;
  transition: all 0.3s;
}

.mentor-card:hover {
  border-color: var(--accent-gold);
  background: var(--panel-2);
  transform: translateY(-2px);
}

/* ── 멘토는 「족자」에 겁니다 (2026-09-02) ──────────────────────────────
   ⚠️ 전에는 80px 동그라미였습니다. 그림을 수묵담채로 갈면서 버렸습니다 —
      새 그림은 «한지째로» 그려진 그림이라, 원으로 자르면 종이가 잘려 나가
      「그림」이 아니라 「오려낸 얼굴」이 됩니다.
   ⚠️ 조선에서 어른의 초상은 실제로 족자로 걸었습니다. 순례자 패(내가 지니는 것)와
      나란히 놓여도 «걸어 두고 우러르는 것»으로 갈라 읽힙니다.
   ⚠️ 축(::before·::after)은 그림보다 좌우로 5px 씩 넓습니다. 그래야 «걸린» 티가 납니다.
      그래서 이 상자에 overflow:hidden 을 주면 안 됩니다 — 축이 잘립니다.
   ⚠️ 크기를 바꾸실 때: 축 두께(6px)와 비단 여백(4px)까지 함께 보십시오.
      값 셋이 서로 물려 있습니다. --jokja-w 하나만 고치면 나머지가 따라옵니다. */
.mentor-avatar {
  --jokja-w: 76px;
  position: relative;
  width: var(--jokja-w);
  height: calc(var(--jokja-w) * 1.34);   /* 그림 3:4 + 축·여백 */
  margin: 0 auto 12px;
  padding: 10px 4px;                     /* 위아래는 축 자리, 좌우는 비단 자리 */
  box-sizing: border-box;
  background: linear-gradient(180deg, #2e2519, #241d14);
  border-left: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
  border-top: 0;
  border-bottom: 0;
  border-radius: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  background-size: cover;
  background-position: center 20%;
  overflow: visible;
}
/* 위아래 나무 축 */
.mentor-avatar::before,
.mentor-avatar::after {
  content: '';
  position: absolute;
  left: -5px;
  right: -5px;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(180deg, #6b5636, #3d3020);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.mentor-avatar::before { top: 0; }
.mentor-avatar::after  { bottom: 0; }

.mentor-avatar span {
  display: none; /* Hide placeholder text since we are rendering character portraits */
}

.mentor-avatar.kdg {
  background-image: url('mentor_andrew.webp');
  border-color: var(--accent-gold);
  box-shadow: 0 0 12px rgba(216, 174, 106, 0.55);
}

/* ⚠️ 족자에 걸린 그림 자체. 동그랗게 자르지 마십시오 (위 .mentor-avatar 머리글 참조). */
.mentor-img {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
  object-position: center 20%;   /* 상반신 그림이라 얼굴이 위쪽입니다 */
  display: block;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
}

.mentor-avatar.khj {
  background-image: url('mentor_agnes.webp');
  border-color: #ec4899;
  box-shadow: 0 0 12px rgba(236, 72, 153, 0.6);
}

.mentor-avatar.cye {
  background-image: url('mentor_thomas.webp');
  border-color: #0ea5e9;
  box-shadow: 0 0 12px rgba(14, 165, 233, 0.6);
}

/* ⚠️ 「.mentor-avatar.mary」를 걷어냈습니다 (2026-09-02).
   성모님을 멘토 넷째 분으로 두려다 만 자취였습니다. 이 class 를 붙이는 코드가
   app.js·index.html 어디에도 없어(전수 확인) 화면에 한 번도 나온 적이 없고,
   그런데도 mentor_mary.webp 를 서비스워커가 계속 미리 받아 두고 있었습니다.
   그림 파일과 서비스워커 목록에서도 함께 뺐습니다.
   ⚠️ 성모님은 지금 «동반자»(companion_mother_mary.webp)로 모시고 있습니다.
      멘토로 되살리시려면 그림·CSS·app.js 세 곳을 한꺼번에 보십시오. */

.mentor-card h4 {
  font-size: var(--fs-lg);
  text-align: center;
  margin-bottom: 6px;
}

.mentor-desc {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-md);
  text-align: center;
}

.mentor-bonus {
  font-size: var(--fs-xs);
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.03);
  padding: var(--space-sm);
  border-radius: var(--r-xs);
  text-align: center;
  margin-bottom: var(--space-md);
}

.select-mentor-btn {
  width: 100%;
  padding: 8px;
  font-size: var(--fs-md);
  font-weight: 700;
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: var(--r-xs);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sim-btn-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-xs);
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(var(--line-rgb), 0.2);
}

.mentor-card:hover .select-mentor-btn {
  background: var(--accent-gold);
  color: var(--on-gold);
  border-color: var(--accent-gold);
}

/* Active Profile Panel */
.profile-panel {
  display: flex;
  flex-direction: column;
  /* 글자를 키우면서(2026-08-30) 「나」 첫 화면이 1,000px 을 17px 넘겼습니다.
     카드 사이만 살짝 좁힙니다 — 카드 안 여백은 그대로입니다. */
  gap: 14px;
}

.profile-panel.hidden {
  display: none;
}

.mentor-active-card {
  /* ⚠️ 여기에 rgba(10,8,5,.9) 를 박아 두었더니 밝은 화면에서도 이 카드만 어두웠고,
     「멘토 변경」과 「4 / 19 EXP」가 어두운 글자로 얹혀 안 보였습니다. (2026-08-21) */
  background: linear-gradient(135deg, var(--surface-color) 0%, var(--panel-deep) 100%);
  border: 1px solid var(--border-color);
  border-radius: var(--r-lg);
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.mentor-active-card::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

.mentor-profile-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ⚠️ 지금 모시고 있는 멘토도 같은 족자입니다 (2026-09-02).
      멘토 카드와 «다른 모양»으로 두면 같은 분이 자리마다 달리 보입니다. */
.active-avatar {
  --jokja-w: 64px;
  position: relative;
  width: var(--jokja-w);
  height: calc(var(--jokja-w) * 1.34);
  padding: 9px 4px;
  box-sizing: border-box;
  border: 0;
  border-left: 1px solid var(--accent-gold);
  border-right: 1px solid var(--accent-gold);
  border-radius: 0;
  background: linear-gradient(180deg, #2e2519, #241d14);
  background-size: cover;
  background-position: center 20%;
  color: var(--on-dark);
  font-weight: 700;
  font-size: var(--fs-md);
  overflow: visible;
}
.active-avatar::before,
.active-avatar::after {
  content: '';
  position: absolute;
  left: -5px;
  right: -5px;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(180deg, #6b5636, #3d3020);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.active-avatar::before { top: 0; }
.active-avatar::after  { bottom: 0; }

.active-avatar.kdg {
  background-image: url('mentor_andrew.webp');
  border-color: var(--accent-gold);
  box-shadow: 0 0 15px rgba(216, 174, 106, 0.55);
}
.active-avatar.khj {
  background-image: url('mentor_agnes.webp');
  border-color: var(--color-love);
  box-shadow: 0 0 15px rgba(236, 72, 153, 0.6);
}
.active-avatar.cye {
  background-image: url('mentor_thomas.webp');
  border-color: #0ea5e9;
  box-shadow: 0 0 15px rgba(14, 165, 233, 0.6);
}
/* ⚠️ 「.active-avatar.mary」도 같은 이유로 걷어냈습니다 (2026-09-02) —
   위 .mentor-avatar.mary 자리의 설명을 보십시오. */

.active-details {
  flex: 1;
}

.mentor-label {
  font-size: var(--fs-sm);
  color: var(--accent-gold);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.active-details h3 {
  font-size: var(--fs-xl);
  font-weight: 700;
  margin-bottom: 6px;
}

.user-level-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-lv {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--accent-gold);
}

.exp-bar-wrapper {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--r-xs);
  overflow: hidden;
}

.exp-bar {
  height: 100%;
  background: var(--color-exp);
  box-shadow: 0 0 8px var(--color-exp);
  transition: width 0.4s ease;
}

.user-exp-text {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  font-family: var(--font-heading);
}

/* Stats Progress bars card */
.stats-card {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: var(--r-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stats-card h3 {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text-primary);
  /* 곧은 막대 → 붓으로 내리그은 획 (2026-09-04, 아래 .brush-tick 규칙) */
  padding-left: 8px;
}

.stat-progress-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-md);
}

.stat-title {
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.stat-icon {
  font-size: var(--fs-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.stat-icon svg {
  width: 14px;
  height: 14px;
}
.stat-icon.faith { color: var(--color-faith); }
.stat-icon.fortitude { color: var(--color-fortitude); }
.stat-icon.courage { color: var(--color-courage); }
.stat-icon.love { color: var(--color-love); }

.stat-val {
  font-weight: 700;
  font-family: var(--font-heading);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  text-align: right;
}

/* ── 덕 막대 — 붓으로 그은 획 (2026-09-04) ──────────────────────────
   ⚠️ 전에는 곧은 알약에 «형광 그라디언트»와 «색 빛무리»가 붙어 있었습니다 —
      애덕 #ff60ad(형광 분홍) · 용기 #80ffd7(형광 민트) · 신덕 #64b5f6 · 굳셈 #ffb74d,
      넷 다 box-shadow 로 빛까지 뿜었습니다. 지도의 파란 「마음」 막대와 같은 수법이라
      함께 걷어냅니다.
   ⚠️ 빛무리(box-shadow)와 두 번째 형광색을 다시 넣지 마십시오.
      색은 --color-* 하나만 씁니다. */
.progress-container {
  width: 100%;
  height: 12px;
  background: var(--ink-line);
  border: none;
  border-radius: 0;
  overflow: visible;
  -webkit-mask-image: var(--brush-h-faint);
          mask-image: var(--brush-h-faint);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

.progress-bar {
  height: 100%;
  width: 0%;
  border-radius: 0;
  box-shadow: none;
  transition: width 0.6s cubic-bezier(0.1, 0.8, 0.3, 1);
  background-image: var(--brush-grain);
  background-repeat: repeat;
  background-size: 11px 100%;
  -webkit-mask-image: var(--brush-h);
          mask-image: var(--brush-h);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

.progress-bar.faith     { background-color: var(--color-faith); }
.progress-bar.fortitude { background-color: var(--color-fortitude); }
.progress-bar.courage   { background-color: var(--color-courage); }
.progress-bar.love      { background-color: var(--color-love); }

/* ── 글씨 크기 설정 ───────────────────────────── */
.font-scale-card {
  background: var(--sunken);
  border: 1px solid var(--border-color);
  border-radius: var(--r-md);
  padding: 16px 14px;
  margin-bottom: 14px;
}
.font-scale-card h3 {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--accent-gold);
  margin: 0 0 6px;
}
.font-scale-desc {
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 0 12px;
}
.font-scale-options {
  display: flex;
  gap: 8px;
}
.font-scale-btn {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 6px;
  background: var(--surface-color);
  border: 1.5px solid var(--border-color);
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}
.font-scale-btn:hover {
  border-color: rgba(216, 174, 106, 0.5);
}
/* 미리보기 글자는 일부러 px 로 고정합니다 — 루트 크기가 바뀌어도
   세 버튼의 크기 차이가 그대로 보여야 무엇을 고르는지 알 수 있습니다. */
.font-scale-sample {
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
}
.font-scale-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
}
.font-scale-btn.active {
  border-color: var(--accent-gold);
  background: rgba(216, 174, 106, 0.12);
  color: var(--accent-gold);
  box-shadow: 0 0 12px rgba(216, 174, 106, 0.18);
}
.font-scale-btn.active .font-scale-sample {
  color: var(--accent-gold);
}

.reset-mentor-btn {
  background: transparent;
  border: 1px solid rgba(255, 46, 147, 0.3);
  color: var(--color-love);
  padding: 10px;
  font-size: var(--fs-md);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all 0.2s;
}
.reset-mentor-btn:hover {
  background: rgba(255, 46, 147, 0.1);
}
.mentor-card-change-btn {
  position: relative;
  width: 100%;
  margin-top: var(--space-lg);
  color: var(--accent-gold);
  border-color: rgba(216, 174, 106, 0.4);
}
.mentor-card-change-btn:hover {
  background: rgba(216, 174, 106, 0.1);
}

/* 전체 초기화 버튼 — 되돌릴 수 없는 동작이므로 시각적으로 더 낮은 위계 + 경고색 */
.reset-all-btn {
  background: transparent;
  border: 1px solid rgba(200, 60, 60, 0.35);
  color: rgba(220, 100, 100, 0.9);
  padding: 10px;
  margin-top: 10px;
  font-size: var(--fs-sm);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all 0.2s;
}
.reset-all-btn:hover {
  background: rgba(200, 60, 60, 0.12);
  color: #ff6b6b;
}

/* GPS 시뮬레이터 → 실제 위치 복귀 버튼 */
.resume-gps-btn {
  width: 100%;
  margin-bottom: 8px;
  padding: 8px;
  background: rgba(76, 175, 120, 0.12);
  border: 1px solid rgba(76, 175, 120, 0.45);
  color: #6fd39b;
  border-radius: var(--r-xs);
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.resume-gps-btn:hover {
  background: rgba(76, 175, 120, 0.22);
}

/* App Bottom Navigation Bar */
.app-nav-bar {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 80px;
  /* ⚠️ 아이폰 홈 표시줄이 탭 막대를 덮지 않게, 그만큼 막대를 키우고 안쪽 여백으로 씁니다 */
  /* ⚠️ 2026-09-26 francisco 「밑에 너무 넓어 글자 그림 위로 넓어」 — 예전 아래 여백(홈 막대 높이)은 바로 아래
     `padding: 0 8px` 에 덮여 무효였고, 단추(71px)가 80+홈 막대 높이 한가운데 떠서 그림 위·글자 아래가 넓었습니다.
     이제 단추를 줄이고(.nav-tab-btn 위아래 6px) 막대 66px + 홈 막대의 절반(쉬운 화면과 같은 방식). */
  height: calc(66px + env(safe-area-inset-bottom, 0px) * 0.5);
  box-sizing: border-box;
  background: var(--nav-bg);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 100;
  padding: 0 8px calc(env(safe-area-inset-bottom, 0px) * 0.5);
}

.nav-tab-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s;
  padding: 6px 18px;
  border-radius: var(--r-sm);
}

.nav-tab-btn svg {
  width: 25px;
  height: 25px;
  stroke: var(--text-secondary);
}

.nav-tab-btn span {
  font-size: var(--fs-sm);
  font-weight: 500;
}

.nav-tab-btn:hover {
  color: var(--text-primary);
}

.nav-tab-btn:hover svg {
  stroke: var(--text-primary);
}

.nav-tab-btn.active {
  color: var(--accent-gold);
}

.nav-tab-btn.active svg {
  stroke: var(--accent-gold);
  filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.45));
}

/* MODAL STYLING */
.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  z-index: 999;
  display: none;
  justify-content: center;
  align-items: center;
  padding: 20px;
  /* ⚠️ 2026-09-25 francisco 「위에 이름이 가려서 나와」 (아이폰 — 약전 창 머리의 이름이 시각·배터리 줄 밑)
     앱은 상태 표시줄 안쪽까지 그리므로(viewport-fit=cover) 창도 안전 영역만큼 내려 둡니다. 아래도 홈 막대만큼. */
  padding-top: calc(20px + var(--safe-top));
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  animation: fadeIn 0.3s ease;
}

.modal-overlay.active {
  display: flex;
}

.modal-card {
  width: 100%;
  max-width: 380px;
  /* ⚠️ 2026-09-06 밝은 화면을 되살리며 고침 — 굳힌 색(#141126)이라 밝은 화면에서도
     계속 어두운 채였습니다. 이 상자 «안»에서 열리는 모든 흐름(고해성사 준비·
     성체조배·오늘의 순례·묵상)의 글자·단추가 전부 이 배경 위에 놓이므로,
     여기 하나를 토큰으로 바꾸면 그 안쪽이 대부분 함께 따라옵니다. */
  background: var(--panel-2);
  border: 1px solid var(--border-color);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
  animation: scaleUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes scaleUp {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.modal-header {
  padding: 24px 20px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.modal-header.success {
  background: linear-gradient(180deg, rgba(128, 237, 153, 0.1) 0%, transparent 100%);
  border-bottom: 1px solid rgba(128, 237, 153, 0.15);
}

.modal-header.mission {
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.08) 0%, transparent 100%);
  border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

@keyframes pulseGold {
  0% { transform: scale(1); box-shadow: 0 0 10px rgba(255, 215, 0, 0.4); }
  50% { transform: scale(1.05); box-shadow: 0 0 20px rgba(255, 215, 0, 0.6); }
  100% { transform: scale(1); box-shadow: 0 0 10px rgba(255, 215, 0, 0.4); }
}

.scroll-icon {
  width: 44px;
  height: 44px;
  color: var(--accent-gold);
}

.modal-header h2 {
  font-size: var(--fs-xl);
  font-weight: 700;
}

.modal-body {
  padding: 20px;
  text-align: center;
}

.congrats-text {
  font-size: var(--fs-md);
  color: var(--text-secondary);
  margin-bottom: 16px;
}

#success-stat-reward {
  color: var(--color-courage);
}

.exp-gain {
  color: var(--color-exp);
  font-size: var(--fs-md);
  margin-top: 4px;
}

.instruction-text {
  font-size: var(--fs-md);
  color: var(--text-secondary);
  line-height: 1.4;
}

.modal-footer {
  padding: 16px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.modal-btn {
  width: 100%;
  min-height: 44px;   /* 43px 이라 1px 모자랐습니다 (2026-08-29) */
  padding: 12px;
  background: var(--accent-gold);
  border: none;
  color: var(--on-gold);
  font-size: var(--fs-base);
  font-weight: 700;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 0.2s;
}

.modal-btn:hover {
  background: #e5b800;
}

/* ⚠️ 2026-09-19 francisco: 「금색으로 바꿔줘」 — 「자유기도를 바치고 순례 시작」·「기도 완료」 같은
   마침 단추가 이 앱에서 혼자 형광 청록(#00f5d4→#00bbf9)이었습니다. 「성지 방문 인증하기」
   (.verify-action-btn)와 같은 금빛 그러데이션으로 맞춥니다. 글자는 --on-gold
   (어두운 화면 짙은 먹 · 밝은 화면 흰색) — 두 화면 모두 대비 4.5:1 이상. 청록으로 되돌리지 마십시오. */
.modal-btn.complete {
  background: linear-gradient(135deg, var(--accent-gold), var(--gold-grad-end));
  color: var(--on-gold);
}
.modal-btn.complete:hover {
  opacity: 0.9;
}

.modal-btn.secondary {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}
/* ⚠️ 2026-09-06. 밝은 화면의 모달 판(--panel-2, 옅은 상아빛) 위에서 --text-secondary
   가 4.08:1 로 기준에 살짝 못 미쳤습니다. 밝은 화면에서만 조금 더 짙은 글자로. */
[data-theme="light"] .modal-btn.secondary { color: var(--text-primary); }

.modal-btn.secondary:hover {
  background: var(--surface-color);
  color: var(--text-primary);
}

/* Mission Quest Box */
.mission-quest-box {
  background: rgba(255, 215, 0, 0.04);
  border: 1px dashed rgba(255, 215, 0, 0.3);
  border-radius: var(--r-md);
  padding: 20px;
  margin-bottom: 16px;
  position: relative;
}

.quest-shrine-label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent-gold);
  background: rgba(255, 215, 0, 0.15);
  padding: 3px 8px;
  border-radius: var(--r-xs);
  position: absolute;
  top: -10px;
  left: 20px;
}

.quest-text {
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--text-primary);
  margin-top: 4px;
}

/* ⚠️ 2026-09-11 — 「이곳에서 찾아보기」. 기도 미션 «아래»에 조용히 덧붙는 칸입니다.
   기도글보다 크게 만들지 마십시오. 주인공은 여전히 기도입니다.
   ⚠️ hidden 을 display 로 이길 수 있으므로 !important 가 필요합니다 (AGENTS.md 5-e). */
.quest-find[hidden] { display: none !important; }
.quest-find {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 215, 0, 0.22);
  text-align: left;
}
.quest-find-label {
  display: inline-block;
  margin-bottom: 5px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--accent-gold);
  letter-spacing: 0.02em;
}
.quest-find-text {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-primary);
  word-break: keep-all;
}
.quest-find-note {
  margin: 5px 0 0;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-secondary);
  word-break: keep-all;
}

.mission-rewards-info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-md);
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.reward-pill {
  padding: 3px 8px;
  border-radius: var(--r-lg);
  font-weight: 700;
  background: rgba(0, 245, 212, 0.15);
  color: var(--color-courage);
}

.reward-pill.exp {
  background: rgba(128, 237, 153, 0.15);
  color: var(--color-exp);
}

.prayer-helper {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  font-style: italic;
}

/* Toast Message */
/* ⚠️ 예전에는 white-space: nowrap 이라 긴 문장이 줄바꿈되지 않고 화면 밖으로 잘렸습니다.
      미사 안내처럼 성지 이름과 시간이 함께 들어가는 문구는 대부분 한 줄에 안 들어갑니다.
      이제 줄바꿈을 허용하고 폭을 화면에 맞춥니다. */
.toast-message {
  position: absolute;
  /* ⚠️ top:80px 이면 화면 제목 위에 딱 얹혀서 「성지 순례」가 통째로 가려집니다.
     실제로 캡처마다 제목이 안 보였습니다.
     알림은 화면 아래(하단 탭 바로 위)에서 올라오게 둡니다 — 읽고 나면 지나가고,
     그 자리에는 가려서 곤란한 것이 없습니다. */
  top: auto;
  bottom: 92px;   /* 하단 탭(80px) 바로 위 */
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  max-width: min(calc(100% - 32px), 360px);
  background: rgba(22, 17, 11, 0.95);
  border: 1px solid var(--accent-gold);
  color: var(--on-dark);
  padding: 10px 20px;
  border-radius: var(--r-lg);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.5;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  box-shadow: 0 5px 15px rgba(0,0,0,0.5);
  text-align: center;
  white-space: pre-line;      /* \n 을 줄바꿈으로, 긴 줄은 자동으로 접기 */
  /* ⚠️ 한글은 낱자 사이 아무 데서나 줄이 끊깁니다.
        이 한 줄이 없어서 「기도를 바치 / 어 은총이」로 끊겨 있었습니다 (2026-08-29).
        keep-all 을 지우지 마십시오 — 앱의 다른 글상자는 다 이렇게 두었습니다.
        (`.agents/hangulbreak.js` 가 어절 한가운데서 끊긴 곳을 잡아냅니다) */
  word-break: keep-all;
  /* 띄어쓰기 없는 아주 긴 글자(주소 같은 것)는 어쩔 수 없이 끊습니다 */
  overflow-wrap: break-word;
}

/* 직접 닫는 알림 — 미사 시간처럼 읽고 나서 닫아야 하는 안내 */
.toast-message.sticky {
  pointer-events: auto;       /* 닫기 버튼을 누를 수 있어야 하므로 */
  /* ⚠️ 폭을 지정하지 않으면 글자에 맞춰 좁아져서, 가운데 정렬된 문구가
        "화 20:00 · 수 10:00 · 목" 처럼 아무 데서나 끊깁니다. */
  width: min(calc(100vw - 32px), 340px);
  max-width: none;
  padding: 16px 18px 14px;
  border-radius: var(--r-md);
  border-width: 2px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.toast-message.sticky .toast-title {
  display: block;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--accent-gold);
  text-align: center;
  line-height: 1.45;
}
.toast-message.sticky .toast-text {
  display: block;
  font-size: var(--fs-base);
  font-weight: 500;
  text-align: left;           /* 시간 목록은 왼쪽 정렬이 훨씬 읽기 쉽습니다 */
  line-height: 1.7;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.07);
}
.toast-message.sticky .toast-close-btn {
  align-self: center;
}
.toast-close-btn {
  padding: 7px 22px;
  font-size: var(--fs-md);
  font-weight: 700;
  color: #2e2820;
  background: var(--accent-gold);
  border: none;
  border-radius: var(--r-lg);
  cursor: pointer;
  min-height: 44px;
  flex-shrink: 0;
}
.toast-close-btn:hover,
.toast-close-btn:focus-visible {
  background: #ffdf9e;
}
/* 밝은 화면에서는 금빛이 짙어져 먹빛 글자가 안 읽힙니다 (2.5:1) — 종이빛 글자로 (2026-09-26) */
[data-theme="light"] .toast-close-btn { color: #fff8ec; }
[data-theme="light"] .toast-close-btn:hover, [data-theme="light"] .toast-close-btn:focus-visible { color: #2e2820; }

.toast-message.active {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* 화면이 낮으면 하단 탭이 낮아지므로 알림도 따라 내립니다 */
@media (max-height: 700px) {
  .toast-message { bottom: 88px; }
}

/* ⚠️ 2026-09-19 — 창(모달)이 열려 있을 때 «직접 닫는 알림»이 아래쪽에 뜨면 창의 주 단추를 덮었습니다.
   성지 인증 뒤 「기도 봉헌 및 미션 완료」가 「순례의 자취를 받았습니다」 알림에 가려 눌리지 않았습니다
   (.agents/visitgps.js 의 「클릭 실패」가 이것이었습니다). 창이 열려 있으면 알림을 위로 올립니다 —
   창의 단추는 늘 아래에 있고, 위에는 제목뿐입니다. */
body:has(.modal-overlay.active) .toast-message {
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  bottom: auto;
  transform: translateX(-50%) translateY(-20px);
}
body:has(.modal-overlay.active) .toast-message.active {
  transform: translateX(-50%) translateY(0);
}

@keyframes gpsPulse {
  0% { transform: scale(0.5); opacity: 0; }
  25% { opacity: 0.8; }
  100% { transform: scale(1.5); opacity: 0; }
}

.custom-shrine-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible !important;
}

/* ⚠️ 2026-09-02. 전에는 «청동 메달 → 순례하면 황금 메달» 동그라미였습니다 (게임 찌꺼기).
   이제 성물 그림을 **한지 조각**에 담고(동반자 조각과 같은 모양), 순례한 곳에는
   **붉은 낙관(도장)**이 찍힙니다. 순례 전에는 옅게 바랜 종이, 순례 후에는 제 색입니다.
   동그라미·메달·황금 테두리로 되돌리지 마십시오. */
.shrine-marker-avatar {
  width: 44px;
  height: 44px;
  background-size: cover;
  background-position: center;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s ease;
  box-sizing: border-box;
  will-change: transform;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 112' preserveAspectRatio='none'><path d='M3 5 Q22 1 46 4 Q70 7 93 3 L94 62 Q92 90 93 108 Q68 112 45 109 Q22 106 4 110 Q6 80 3 55 Z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 112' preserveAspectRatio='none'><path d='M3 5 Q22 1 46 4 Q70 7 93 3 L94 62 Q92 90 93 108 Q68 112 45 109 Q22 106 4 110 Q6 80 3 55 Z'/></svg>");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  /* 순례 전 — 바랜 종이 */
  filter: sepia(0.35) saturate(0.7) brightness(0.95);
}

/* 마스크는 그림자를 함께 잘라 버리므로, 종이 테두리와 그림자는 바깥 상자에 둡니다.
   (순례자 그림의 흰 스티커 테두리와 같은 느낌 — 오려 붙인 종이) */
.custom-shrine-marker {
  filter: drop-shadow(1.5px 0 0 #f5efe2) drop-shadow(-1.5px 0 0 #f5efe2)
          drop-shadow(0 1.5px 0 #f5efe2) drop-shadow(0 -1.5px 0 #f5efe2)
          drop-shadow(0 2px 3px rgba(20, 14, 30, 0.45));
}

.custom-shrine-marker.visited .shrine-marker-avatar {
  /* 순례 후 — 제 색 */
  filter: none;
}

.shrine-marker-label {
  margin-top: 4px;
  background: #f4eedb; /* 조선 고서 한지 종이색 */
  border: 1px solid #8b7355; /* 전통 갈색 경계 */
  color: #2b1f1d; /* 진한 먹물색 */
  font-family: 'Sunrye Myeongjo', 'Noto Serif KR', serif;
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 3px 7px;
  border-radius: var(--r-xs);
  white-space: nowrap;
}

.custom-shrine-marker.visited .shrine-marker-label {
  background: #f4eedb;
  border-color: #b8321e; /* 순례한 곳은 인주빛 테두리 */
  color: #2b1f1d;
  font-weight: 800;
}

.visited-check-badge {
  /* 붉은 낙관(도장) — 인주 빛, 종이빛 십자가. 전에는 황금 그라데이션 ✓ 였습니다.
     한지 조각의 오른쪽 아래 귀에 걸칩니다 (조각 밖의 형제 요소 — 마스크에 안 잘리게) */
  position: absolute;
  top: 30px;
  right: -4px;
  width: 16px;
  height: 16px;
  background: #b8321e;
  color: #f5efe2;
  font-size: 11px;
  font-weight: 900;
  line-height: 16px;
  text-align: center;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(245, 239, 226, 0.7);
  transform: rotate(-6deg);
}

/* Inventory Card & Slots Styling */
.inventory-card {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: var(--r-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.inventory-card h3 {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text-primary);
  /* 곧은 막대 → 붓으로 내리그은 획 (2026-09-04, 아래 .brush-tick 규칙) */
  padding-left: 8px;
}

.inventory-slots {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inventory-item-slot {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 10px;
  background: var(--sunken);
  border: 1px solid var(--border-color);
  border-radius: var(--r-sm);
}

.inventory-item-avatar {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.03);
  border: 1.5px solid var(--border-color);
  border-radius: var(--r-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}

.inventory-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.inventory-item-info {
  flex: 1;
  min-width: 0;   /* 긴 성물 이름이 [동반] 버튼을 밀어내지 않도록 */
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.inventory-item-info h4 {
  font-size: var(--fs-xl);
  word-break: keep-all;
  line-height: 1.35;
  font-weight: 600;
  color: var(--accent-gold);
}

.inventory-item-info p {
  font-size: var(--fs-base);
  word-break: keep-all;
  color: var(--text-secondary);
  line-height: 1.45;
}

.inventory-bonus-badge {
  align-self: flex-start;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-exp);
  background: rgba(128, 237, 153, 0.1);
  padding: 2px 6px;
  border-radius: var(--r-xs);
  border: 1px solid rgba(128, 237, 153, 0.2);
  margin-top: 2px;
}

.empty-inventory-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border: 1px dashed var(--border-color);
  border-radius: var(--r-sm);
  text-align: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.15);
}

@keyframes slideUpGlow {
  from { transform: translateY(15px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes ringPulse {
  0% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.4); }
  50% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.7); }
  100% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.4); }
}

.discovered-item-details {
  flex: 1;
}

.item-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--accent-gold);
  margin-bottom: 2px;
}

.discovered-item-details h4 {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.discovered-item-details p {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.3;
  margin-bottom: 4px;
}

.item-bonus-badge {
  font-size: var(--fs-xxs);
  font-weight: 700;
  color: var(--color-exp);
  background: rgba(128, 237, 153, 0.15);
  padding: 1px 6px;
  border-radius: var(--r-xs);
  border: 1px solid rgba(128, 237, 153, 0.2);
}

/* 지금 서 있는 등급의 한 줄 경구 (2026-08-30)
   ⚠️ 숫자를 대신하는 자리입니다. 눈에 띄게 키우지 마십시오 — 조용히 읽히는 편이 맞습니다. */
.rank-phrase {
  margin: 6px 0 0;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  word-break: keep-all;
}

/* 일상 속 애덕 실천 — 2026-08-30 순례 탭의 「애덕」 서브탭에서 「오늘」 탭
   「오늘의 작은 실천」 카드 속 <details> 로 옮겨 왔습니다 (francisco 님 요청:
   "다른 곳이랑 합치면 좋을 것 같다"). 예전엔 여기만 분홍·자홍색(#c9186c 등)이
   튀는 단추였는데, 그 색이 「먹과 한지」 전체 톤과 안 맞아 더 도드라져 보였던
   것도 한 이유였습니다 — 이제 --color-love 톤 하나로만 차분히 맞춥니다. */
.charity-more { margin-top: 10px; }
.charity-more .charity-reset-note { margin: 4px 0 10px; }
.charity-more .charity-cards-container { margin-top: 0; }

.charity-cards-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.charity-item-card {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: var(--r-md);
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  transition: border-color 0.3s, background 0.3s;
}

.charity-item-card:hover {
  background: var(--surface-glow);
  border-color: var(--accent-umber);
}

.charity-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.charity-info h4 {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text-primary);
}

.charity-info p {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.35;
}

.charity-reward-label {
  align-self: flex-start;
  font-size: var(--fs-xxs);
  font-weight: 700;
  color: var(--color-love);
  background: rgba(236, 112, 99, 0.12);
  padding: 2px 6px;
  border-radius: var(--r-xs);
  border: 1px solid rgba(236, 112, 99, 0.22);
  margin-top: 2px;
}

.charity-action-btn {
  background: transparent;
  color: var(--color-love);
  border: 1px solid rgba(236, 112, 99, 0.4);
  font-size: var(--fs-sm);
  font-weight: 700;
  padding: 8px 14px;
  min-height: 44px;
  border-radius: 999px;
  cursor: pointer;
  transition: opacity 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}

.charity-action-btn:hover {
  opacity: 0.82;
}

.charity-action-btn.completed,
.charity-action-btn:disabled {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  cursor: not-allowed;
  opacity: 0.75;
}

/* ── 지도 위의 나 ─────────────────────────────────────────────────
   ⚠️ 2026-09-02. 전에는 60px 동그라미 안에 순례자 그림의 몸통만 보이고, 멘토 색 테두리와
   빛무리, 멘토·동반자 동그라미 딱지가 붙어 있었습니다. 멘토는 족자·동반자는 한지 조각으로
   바꾼 뒤 지도만 동그라미로 남아 있어 고쳤습니다. 이제 순례자가 **온몸으로 서 있고**,
   발밑에 먹 그림자와 위치 고리가 있습니다. 동그라미로 되돌리지 마십시오. */
.user-saint-avatar-marker {
  width: 48px;
  height: 66px;
  position: relative;
  display: block;
  overflow: visible;
}

/* 서 있는 순례자 — 그림 자체에 흰 스티커 테두리가 있어 오려낸 종이처럼 보입니다.
   ⚠️ 2026-09-06. francisco: "캐릭터가 지도에서 너무 밝은거 같아" — 흰 스티커
   테두리가 지도 바탕(어두운 톤)과 만나면 빛나듯 튀어 보였습니다. brightness(.88)
   로 살짝만 낮췄습니다(색을 바꾸는 saturate 는 건드리지 않았습니다 — 색 자체는
   문제가 아니라 밝기였습니다). */
.user-marker-figure {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 40px;
  height: 54px;
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  filter: drop-shadow(0 2px 3px rgba(20, 14, 30, 0.45)) brightness(0.88);
  z-index: 2;
}

/* 발밑 먹 그림자 */
.user-saint-avatar-marker::after {
  content: '';
  position: absolute;
  left: 8px;
  top: 54px;
  width: 32px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(43, 36, 56, 0.45), rgba(43, 36, 56, 0) 70%);
  z-index: 1;
}

/* 위치 고리 — 발밑에서 퍼지는 먹선 타원 (전에는 멘토 색 동그라미였습니다) */
.user-gps-ping {
  position: absolute;
  left: 6px;
  top: 50px;
  width: 36px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid rgba(43, 36, 56, 0.6);
  pointer-events: none;
  z-index: 0;
  animation: gpsPulseGround 2.4s infinite ease-out;
}

@keyframes gpsPulseGround {
  0%   { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* 함께 걷는 동반자 — 어깨 옆 작은 한지 조각 (동반자 화면의 조각과 같은 모양) */
.user-marker-companion {
  position: absolute;
  right: -10px;
  top: -6px;
  width: 22px;
  height: 27px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 3;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 112' preserveAspectRatio='none'><path d='M3 5 Q22 1 46 4 Q70 7 93 3 L94 62 Q92 90 93 108 Q68 112 45 109 Q22 106 4 110 Q6 80 3 55 Z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 112' preserveAspectRatio='none'><path d='M3 5 Q22 1 46 4 Q70 7 93 3 L94 62 Q92 90 93 108 Q68 112 45 109 Q22 106 4 110 Q6 80 3 55 Z'/></svg>");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  filter: drop-shadow(0 1px 2px rgba(20, 14, 30, 0.5));
  animation: orbitFloat 2.5s infinite ease-in-out;
}

/* Equipment Card & Slots Styling */
.equipment-card {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: var(--r-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.equipment-card h3 {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text-primary);
  /* 곧은 막대 → 붓으로 내리그은 획 (2026-09-04, 아래 .brush-tick 규칙) */
  padding-left: 8px;
}

.equip-desc {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}

.equipped-slot-row {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-lg);
  background: var(--sunken-2);
  border: 1.5px dashed rgba(255, 215, 0, 0.2);
  border-radius: var(--r-md);
  position: relative;
  overflow: hidden;
}

/* ⚠️ 지금 함께 걷는 동반자를 담는 상자 (2026-09-02).
   동그라미와 테두리를 뺐습니다 — 안에 들어가는 그림이 «뜯은 한지 조각»이라
   상자에 테두리가 있으면 그 조각이 액자에 든 것처럼 보입니다.
   상자는 자리만 잡고, 모양은 그림이 냅니다. */
.equipped-slot-avatar {
  width: 44px;
  height: 54px;
  border-radius: 0;
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-2xl);  /* 여덟 단계 밖 1.5rem 이었습니다 (2026-08-30) */
  box-shadow: none;          /* ⚠️ 안쪽 그림자도 뺐습니다 — 상자 자국이 남습니다 */
  flex-shrink: 0;
  transition: all 0.3s ease;
  overflow: visible;
}

.equipped-slot-avatar.holy-spirit {
  background: radial-gradient(circle, rgba(0, 245, 212, 0.2) 0%, rgba(10, 8, 5, 0.8) 100%);
  border-color: #00f5d4;
  box-shadow: 0 0 12px rgba(0, 245, 212, 0.4);
}

.equipped-slot-avatar.guardian-angel {
  background: radial-gradient(circle, rgba(255, 215, 0, 0.2) 0%, rgba(10, 8, 5, 0.8) 100%);
  border-color: #ffd700;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
}

.equipped-slot-avatar.archangel-michael {
  background: radial-gradient(circle, rgba(255, 46, 147, 0.2) 0%, rgba(10, 8, 5, 0.8) 100%);
  border-color: #ff2e93;
  box-shadow: 0 0 12px rgba(255, 46, 147, 0.4);
}

.empty-slot-text {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  text-align: center;
}

.equipped-slot-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.equipped-slot-info .equip-label {
  font-size: var(--fs-xxs);
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.equipped-slot-info h4 {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--text-primary);
}

.equipped-slot-info p {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.55;
}

.equip-options-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.equip-option-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 14px var(--space-md);
  background: var(--sunken);
  border: 1px solid var(--border-color);
  border-radius: var(--r-md);
  transition: all 0.3s ease;
}

.equip-option-item:hover {
  background: var(--sunken-2);
  border-color: rgba(var(--line-rgb), 0.1);
}

.equip-option-item.equipped {
  border-color: rgba(255, 215, 0, 0.3);
  background: rgba(255, 215, 0, 0.02);
}

/* ── 동반자는 「한지 조각」입니다 (2026-09-02) ──────────────────────────
   ⚠️ 멘토는 족자에 걸지만 동반자는 걸지 않습니다. 성령·성모·천사는 «벽에 걸어 둔
      초상»이 아니라 «형체 없이 함께 계신 분»이라, 틀을 아예 두지 않기로 했습니다.
      손으로 뜯은 한지 조각처럼 두어, 그림 속 종이와 앱 바탕이 이어지게 합니다.
   ⚠️ 그래서 테두리(border)를 다시 넣지 마십시오. 테두리를 넣는 순간 「액자」가 되고,
      예전 그림에 그려져 있던 금빛 액자를 걷어낸 뜻이 사라집니다.
   ⚠️ 가장자리를 뜯은 모양은 mask 로 만듭니다. -webkit- 접두사를 지우지 마십시오 —
      사파리(아이폰)가 접두사 없는 mask 를 아직 다 받지 못합니다. 지우면 아이폰에서
      네모로 보입니다.
   ⚠️ 예전에는 38px 상자에 transform: scale(1.8) 을 걸어 크게 «보이게»만 했습니다.
      자리 차지하는 크기는 38px 그대로라 그림이 좌우로 삐져나와 옆 글자를 덮었습니다.
      꼼수 없이 실제 크기를 적습니다. */
.companion-image-icon {
  width: 46px;
  height: 56px;
  border: none;
  border-radius: 0;
  object-fit: contain;
  object-position: center center;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 112' preserveAspectRatio='none'><path d='M3 5 Q22 1 46 4 Q70 7 93 3 L94 62 Q92 90 93 108 Q68 112 45 109 Q22 106 4 110 Q6 80 3 55 Z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 112' preserveAspectRatio='none'><path d='M3 5 Q22 1 46 4 Q70 7 93 3 L94 62 Q92 90 93 108 Q68 112 45 109 Q22 106 4 110 Q6 80 3 55 Z'/></svg>");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* 지금 함께 걷고 있는 동반자 자리 — 담는 상자에 맞춰 채우되 뜯은 가장자리는 그대로 */
.equipped-slot-avatar .companion-image-icon {
  width: 100%;
  height: 100%;
  border-radius: 0;
  border: none;
}

.companion-details {
  flex: 1;
  /* ⚠️ flex 자식은 기본적으로 '내용보다 작아지지 않아서', 제목이 길면
     옆에 있는 [동반] 버튼을 카드 밖으로 밀어냅니다. min-width:0 으로 줄어들 수 있게 합니다. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.companion-details h4 {
  font-size: var(--fs-xl);
  word-break: keep-all;
  line-height: 1.35;
  font-weight: 600;
  color: var(--text-primary);
}

.companion-details p {
  font-size: var(--fs-base);
  word-break: keep-all;
  color: var(--text-secondary);
  line-height: 1.55;
}

.equip-bonus-tag {
  display: inline-block;
  font-size: var(--fs-md);
  white-space: nowrap;
  font-weight: 700;
  color: var(--accent-gold);
  margin-top: var(--space-xs);
}

.equip-action-btn {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  flex-shrink: 0;
  font-size: var(--fs-base);
  font-weight: 700;
  padding: 7px 12px;
  border-radius: var(--r-xs);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.equip-action-btn:hover {
  background: var(--accent-umber);
  border-color: var(--accent-umber);
  box-shadow: 0 2px 8px rgba(136, 48, 236, 0.3);
}

.equip-action-btn.equipped,
.equip-action-btn:disabled {
  background: rgba(255, 215, 0, 0.1);
  color: var(--accent-gold);
  border-color: rgba(255, 215, 0, 0.2);
  cursor: not-allowed;
  box-shadow: none;
}

.unequip-btn {
  background: rgba(255, 46, 147, 0.1);
  border-color: rgba(255, 46, 147, 0.2);
  color: var(--color-love);
}

.unequip-btn:hover {
  background: var(--color-love);
  border-color: var(--color-love);
  color: var(--on-dark);
  box-shadow: 0 2px 8px rgba(255, 46, 147, 0.3);
}

/* Map Companion Badge & Aura Styling */
.companion-orbit-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #16120c;
  background-size: cover;
  background-position: center;
  border: 1.5px solid var(--accent-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
  z-index: 10;
  animation: orbitFloat 2.5s infinite ease-in-out;
}

@keyframes orbitFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.05); }
}

/* (동반자별 색 빛무리는 2026-09-02 에 걷어냈습니다 — 지도 위의 나 참조) */


/* User Header status & Ranks tags */
.user-header-status {
  display: flex;
  align-items: baseline;
  gap: 0;
  font-family: var(--font-heading);
}

.user-rank-tag {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-secondary);
  background: none;
  border: none;
  padding: 0;
  box-shadow: none;
  white-space: nowrap;
}
.user-rank-tag::after { content: '·'; margin: 0 7px; color: var(--accent-gold); font-weight: 400; }

/* ⚠️ 2026-09-06. 밝은 화면을 되살리며 다시 단 해/달 단추 — 알약을 걷어낸
   김에 이 단추도 상자 없이, 아이콘 하나만 조용히 둡니다. */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-left: 8px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
}
.theme-toggle-btn:hover, .theme-toggle-btn:focus-visible { color: var(--accent-gold); background: rgba(216, 174, 106, 0.10); }
.theme-toggle-btn .ui-icon { width: 18px; height: 18px; }
/* ⚠️ 2026-09-19 — 좁은 화면에서 이 단추는 26px 로 그려집니다(머리말 한 줄에 다 담느라).
   손가락이 닿는 자리만 보이지 않게 44px 로 넓힙니다. 모양은 그대로입니다. */
.theme-toggle-btn { position: relative; }
.theme-toggle-btn::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}

/* 좁은 화면의 머리말은 앱 이름·칭호·현재 길·화면 전환을 한 줄에 모두 담습니다.
   사용자 글씨 크기가 커져도 바깥으로 잘리지 않도록 이 자리만 화면 너비에 맞춰 줄입니다. */
@media (max-width: 560px) {
  .app-header {
    padding: calc(12px + var(--safe-top)) 10px 12px;
    gap: 6px;
  }
  .header-logo {
    min-width: 0;
    gap: 5px;
    flex: 1 1 auto;
  }
  .holy-cross {
    width: 20px;
    height: 20px;
  }
  .header-logo h1 {
    min-width: 0;
    font-size: clamp(14px, 4.1vw, 16px);
    letter-spacing: -0.04em;
  }
  .user-header-status {
    min-width: 0;
    flex: 0 1 auto;
    gap: 0;
  }
  .special-title-badge {
    padding: 2px 6px;
    font-size: clamp(10px, 2.8vw, 11px);
    letter-spacing: 0;
  }
  .special-title-badge.header-badge { margin-right: 3px; }
  .user-rank-tag { font-size: clamp(10px, 2.8vw, 11px); }
  .user-rank-tag::after { margin: 0 4px; }
  .user-level-badge { font-size: clamp(11px, 3.2vw, 13px); }
  .theme-toggle-btn {
    width: 26px;
    height: 26px;
    margin-left: 3px;
  }
  .theme-toggle-btn .ui-icon { width: 16px; height: 16px; }
}

/* ⚠️ 2026-09-19 francisco 「진행해줘」 — 금빛 알약(그러데이션 상자 + 보랏빛 빛무리)을 걷어내고
   글자만 남겼습니다. 머리말 「길손 · 2번째 길」을 정리할 때(2026-09-06)와 같은 까닭입니다 —
   게임 UI 같은 둥근 상자·빛무리는 붓과 한지 화면에서 혼자 겉돕니다.
   앞에 가운뎃점을 찍어 「1번째 길 · 첫걸음」처럼 한 줄로 읽히게 합니다. 상자를 다시 두르지 마십시오. */
.profile-rank-badge {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent-gold);
  background: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  white-space: nowrap;
}
.profile-rank-badge::before {
  content: '·';
  margin-right: 6px;
  color: var(--text-secondary);
  font-weight: 400;
}

/* Roadmap Progress Grid */
.roadmap-card {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: var(--r-lg);
  /* 글자 개편(2026-08-30)으로 「나」 첫 화면이 1,000px 을 넘겨 속 여백을 살짝 좁혔습니다 */
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.roadmap-card h3 {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text-primary);
  /* 곧은 막대 → 붓으로 내리그은 획 (2026-09-04, 아래 .brush-tick 규칙) */
  padding-left: 8px;
}

.roadmap-desc {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.35;
}

.roadmap-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 250px;
  overflow-y: auto;
  padding-right: 6px;
  margin-top: 10px;
}

.roadmap-steps::-webkit-scrollbar {
  width: 4px;
}

.roadmap-steps::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--r-xs);
}

.roadmap-steps::-webkit-scrollbar-thumb {
  background: var(--accent-gold);
  border-radius: var(--r-xs);
}

.roadmap-step {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--sunken);
  border: 1px solid var(--border-color);
  border-radius: var(--r-md);
  transition: all 0.3s ease;
}

.step-marker {
  color: var(--on-gold);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-secondary);
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.step-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.step-info h4 {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-primary);
}

.step-info p {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

/* 스물일곱 칸 — 이제 두 줄입니다 (2026-08-27)
   ⚠️ 예전에는 「Lv.1 | 한 줄 설명」이 한 덩어리였습니다. 설명이 길어지면서
      레벨 표시가 글 속에 묻혔습니다. 레벨과 설명을 나눕니다. */
.rank-span {
  font-size: var(--fs-xxs);
  color: var(--accent-gold);
  letter-spacing: 0.02em;
}
.rank-desc {
  margin-top: 2px;
  line-height: 1.65;
  /* ⚠️ 한글은 낱말 가운데서 끊기면 읽기 나쁩니다. 낱말째로 넘깁니다. */
  word-break: keep-all;
}
/* 등급 이름 뜻풀이 한 줄 (2026-09-30) — 이름 바로 아래, 작고 조용하게 */
.rank-gloss {
  margin: 2px 0 0;
  font-size: var(--fs-xs, .8rem);
  color: var(--text-secondary);
  line-height: 1.45;
  word-break: keep-all;
}
.promotion-gloss { margin: 4px 0 8px; text-align: center; }
.rank-gloss-inline { display: inline; margin: 0 0 0 4px; font-weight: 400; }
/* 접혀 있을 때, 아직 안 간 «다음» 칸은 이름과 레벨만 (2026-08-27) */
.roadmap-step.compact .rank-desc { display: none; }
/* ⚠️ 설명이 길어지면서 접힌 「성장」 화면이 1,003px 이 되었습니다 (기준 1,000px).
   칸 사이 여백과 카드 안쪽 여백을 조금 줄여 맞춥니다.
   ⚠️ 이 값을 다시 키우면 첫 화면이 한 화면을 넘어갑니다. subtabs.js 가 잡습니다. */
.roadmap-card { padding: 16px; }
.roadmap-steps { gap: 8px; }
.roadmap-step { padding: 10px 12px; }

/* ── 「순례」 화면 아래 두 칸 (2026-08-28) ─────────────────────────
   ⚠️ 주력 화면인데 카드 셋으로 끝나 아래가 비어 있었습니다.
      여기 들어가는 것은 «앱이 이미 아는 사실»뿐입니다 (오늘 순교하신 분 · 가까운 성지).
      위치를 모르면 「가까운 성지」 칸은 아예 안 나옵니다. */
.pil-now-card {
  padding: 16px;
  border: 1px solid var(--card-border);
  border-radius: var(--r-md);
  background: var(--card-bg);
}
.pil-now-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-gold);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.pil-now-label .ui-icon { width: 15px; height: 15px; flex: none; }
.pil-now-main { margin-top: 8px; color: var(--text-primary); font-size: var(--fs-base); }
.pil-now-sub  { margin-top: 2px; color: var(--text-secondary); font-size: var(--fs-sm); }
.pil-now-episode {
  margin-top: 8px;
  color: var(--text-secondary);
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  line-height: 1.7;
  word-break: keep-all;
}
.pil-now-btn {
  width: 100%;
  min-height: 44px;          /* 손가락 기준 — 줄이지 마십시오 */
  margin-top: 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--gold-soft-border);
  background: var(--gold-soft);
  color: var(--accent-gold);
  font-size: var(--fs-md);
  font-weight: 600;
  cursor: pointer;
}
.pil-near-list { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.pil-near-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  text-align: left;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-color);
  background: var(--sunken);
  cursor: pointer;
}
.pil-near-name {
  color: var(--text-primary);
  font-size: var(--fs-md);
  font-weight: 600;
  word-break: keep-all;
}
.pil-near-done {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--gold-soft-border);
  color: var(--accent-gold);
  font-size: var(--fs-xxs);
  font-weight: 500;
}
.pil-near-meta { color: var(--text-secondary); font-size: var(--fs-sm); }
.pil-now-foot { margin-top: 10px; color: var(--text-secondary); font-size: var(--fs-xs); }

/* 승급 축하창의 성경 자리 (2026-08-27)
   ⚠️ 위의 한 줄(#promotion-celebration-phrase)은 «앱이 쓴 말»이고 여기가 성경입니다.
      생김새를 서로 같게 만들지 마십시오 — 그러면 앱의 말이 성경처럼 보입니다. */
.promotion-verse {
  margin-top: 14px;
  padding: 12px 14px;
  border-top: 1px solid rgba(216, 174, 106, 0.22);
}
.promotion-verse-text {
  color: var(--text-primary);
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  line-height: 1.75;
  word-break: keep-all;
}
.promotion-verse-ref {
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: var(--fs-xxs);
}
.promotion-verse-ref a { color: var(--accent-gold); }
/* 글이 두세 줄이 되었으므로 가운데 맞춤을 풀고 위로 붙입니다.
   ⚠️ align-items:center 로 두면 번호 동그라미가 글 한가운데에 떠 있습니다. */
.roadmap-step { align-items: flex-start; }
.roadmap-step .step-marker { flex: none; margin-top: 2px; }

/* Roadmap States */
.roadmap-step.active {
  border-color: rgba(255, 215, 0, 0.4);
  background: rgba(255, 215, 0, 0.03);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.05);
}

.roadmap-step.active .step-marker {
  background: var(--accent-gold);
  border-color: var(--accent-gold);
  color: var(--on-gold);   /* ⚠️ #000 을 박아 두면 밝은 화면(짙은 금색)에서 4.16:1 입니다 */
  box-shadow: 0 0 10px rgba(216, 174, 106, 0.5);
}

.roadmap-step.active .step-info h4 {
  color: var(--accent-gold);
  font-weight: 700;
}

.roadmap-step.achieved {
  border-color: rgba(128, 237, 153, 0.2);
  background: rgba(128, 237, 153, 0.02);
}

.roadmap-step.achieved .step-marker {
  background: rgba(128, 237, 153, 0.1);
  border-color: rgba(128, 237, 153, 0.3);
  color: var(--color-exp);
}

.roadmap-step.locked {
  opacity: 0.4;
}

/* Promotion Modal Styling
   ⚠️ 2026-09-25 francisco 「화면 색이 안바뀐거 같아」 (승급 축하창 캡처) — 옛 남보라 밤하늘 바탕이 남아 있었습니다.
      앱의 다른 창과 같은 판(--panel-2)에 금빛 테만 두릅니다. 밝은 화면에서도 따라옵니다. 남보라를 되돌리지 마십시오. */
.promotion-modal-content {
  background: var(--panel-2) !important;
  border: 1px solid rgba(216, 174, 106, 0.45) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 0 28px rgba(216, 174, 106, 0.14) !important;
  position: relative;
  overflow: visible !important;
}
[data-theme="light"] .promotion-modal-content {
  border-color: rgba(138, 106, 31, 0.45) !important;
  box-shadow: 0 12px 30px rgba(60, 40, 10, 0.18), 0 0 22px rgba(216, 174, 106, 0.18) !important;
}

.promotion-glowing-halo {
  position: absolute;
  top: -45px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 90px;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.2) 0%, rgba(255, 215, 0, 0) 70%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.8rem;
  text-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
  animation: haloPulse 2.5s infinite ease-in-out;
}

@keyframes haloPulse {
  0%, 100% { transform: translateX(-50%) scale(1) rotate(0deg); opacity: 0.9; }
  50% { transform: translateX(-50%) scale(1.15) rotate(15deg); opacity: 1; text-shadow: 0 0 25px rgba(255, 215, 0, 1); }
}

.promotion-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(216, 174, 106, 0.12);
  color: var(--accent-gold);
  border: 1px solid rgba(216, 174, 106, 0.35);
  font-size: var(--fs-xs);
  letter-spacing: 1px;
}

.promotion-desc-box {
  /* ⚠️ 2026-09-13. 늘 검정 반투명이라 밝은 화면에서 어둡게 남았습니다. */
  background: var(--sunken);
  border: 1px solid var(--border-color);
  border-radius: var(--r-sm);
  padding: 14px;
  margin-top: 12px;
  font-size: var(--fs-md);
  line-height: 1.45;
  color: var(--text-secondary);
}

/* ⚠️ 2026-09-25 — 옛 형광 노랑(#c59f00, 검은 글자)이 남아 밝은 화면에서 어두운 금에 검은 글자가 되었습니다.
   앱의 마침 단추(.modal-btn.complete)와 같은 금빛·같은 글자색(--on-gold)으로 맞춥니다. */
.glow-gold-btn {
  background: linear-gradient(135deg, var(--accent-gold), var(--gold-grad-end)) !important;
  color: var(--on-gold) !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 14px rgba(216, 174, 106, 0.30) !important;
}

.glow-gold-btn:hover {
  box-shadow: 0 6px 18px rgba(216, 174, 106, 0.42) !important;
  transform: translateY(-2px);
}

/* Mother Mary Companion & Glow Styling */
.equipped-slot-avatar.mother-mary {
  background: radial-gradient(circle, rgba(255, 117, 143, 0.2) 0%, rgba(10, 8, 5, 0.8) 100%);
  border-color: #ff758f;
  box-shadow: 0 0 12px rgba(255, 117, 143, 0.4);
}


/* Shrine Description and Tips in Modal */
.shrine-desc-box {
  background: var(--sunken-2);
  border: 1px solid var(--border-color);
  border-radius: var(--r-sm);
  padding: 14px;
  margin: 14px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 180px;
  overflow-y: auto;
  text-align: left;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.4);
}

.shrine-desc-box .desc-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.shrine-desc-box .section-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent-gold);
}

.shrine-desc-box .desc-section.tips .section-title {
  color: #00f5d4;
}

.shrine-desc-box p {
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text-secondary);
  margin: 0;
}

/* Shrine Card Tips Box */
.shrine-card-tips-box {
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid var(--accent-gold);
  border-radius: var(--r-xs);
  padding: 8px 12px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.shrine-card-tips-box .tip-line {
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--text-secondary);
  text-align: left;
}

.shrine-card-tips-box .tip-label {
  font-weight: 700;
  color: var(--accent-gold);
}


.vc-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
}
.vc-badge {
  display: inline-block;
  padding: 3px 12px;
  background: var(--accent-gold);
  color: var(--on-gold);
  font-weight: 700;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
}
.vc-count { font-size: var(--fs-xs); color: var(--text-secondary); }
.vc-title {
  color: var(--text-primary);
  font-size: var(--fs-lg);
  margin: 0 0 12px;
  font-weight: 700;
  line-height: 1.5;
  word-break: keep-all;
}
.vc-versicle, .vc-response {
  margin: 0 0 2px;
  font-size: var(--fs-md);
  line-height: 1.6;
  color: #e7e2f2;
  word-break: keep-all;
}
.vc-response { margin-bottom: 12px; }
.vc-rubric {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  font-style: normal;
}
.vc-body {
  white-space: pre-wrap;
  padding: 14px 12px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 215, 0, 0.15);
  border-radius: var(--r-xs);
  font-size: var(--fs-base);
  line-height: 1.75;
  color: var(--text-primary);
  word-break: keep-all;
}
.vc-rubric-line {
  margin: 8px 0 0;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}
.vc-between {
  margin: 12px 0 0;
  font-size: var(--fs-md);
  color: var(--accent-gold);
  opacity: 0.9;
  word-break: keep-all;
}
.vc-when, .vc-note {
  margin: 0 0 8px;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  word-break: keep-all;
}
.vc-done {
  margin: 18px 0 6px;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--accent-gold);
}
.vc-source {
  display: block;
  min-height: 36px;
  line-height: 36px;
  margin-top: 14px;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  text-decoration: underline;
}

/* ⚠️ 예전에는 형광 청록(#00f5d4) 점선이었습니다. 앱의 금빛·한지 결과 따로 놀았고,
   높이도 34px 라 손가락 기준(44px)에 못 미쳤습니다. (2026-08-28) */
.restore-energy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  background: var(--gold-soft);
  border: 1px solid var(--gold-soft-border);
  color: var(--accent-gold);
  border-radius: var(--r-sm);
  font-size: var(--fs-md);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.restore-energy-btn:hover:not(:disabled) {
  background: rgba(216, 174, 106, 0.18);
}

/* ⚠️ 집중력이 가득 차면 이 단추는 눌러도 같은 말만 되풀이하는 «막다른 단추»였습니다.
   눌리지 않게는 돼 있었지만 «눌리는 것처럼 보였습니다».
   이제 눌리는 모양을 벗고 조용한 상태 줄로 보입니다.
   ⚠️ 묵상을 못 하게 막는 것이 아닙니다 — 「오늘」 화면과 「기도 고르기」에 그대로 있습니다. */
.restore-energy-btn:disabled {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
  font-weight: 500;
  cursor: default;
  min-height: 32px;
}

/* ⚠️ .theme-toggle-btn (머리 띠의 해/달 단추) 을 여기서 뺐습니다 — 2026-08-27.
   밝은 화면을 거두면서 단추도 없앴습니다. 까닭은 위 [data-theme="light"] 머리말에.
   ⚠️ 이 단추에 margin-left:auto 가 있어서 오른쪽 상태 표시를 왼쪽으로 15px 밀고
      있었습니다. 단추가 없어졌으므로 .user-header-status 가 오른쪽 끝까지 갑니다.
      머리 띠가 허전해 보이면 .app-header 의 padding 을 손보십시오. */

/* ==========================================================================
   신규 RPG 요소, 디지털 스탬프 북, 기도 나눔터 및 스토리텔링 UI 스타일 정의
   ========================================================================== */

/* 1. 칭호 관련 뱃지 */
.special-title-badge {
  background: linear-gradient(135deg, var(--accent-gold) 0%, var(--gold-grad-end) 100%);
  /* 금색 배경은 밝은 화면에서 짙어집니다. 고정 남색은 그 위에서 읽히지 않으므로
     화면별 금색 위 글자 토큰을 사용합니다. */
  color: var(--on-gold);
  font-size: var(--fs-xxs);
  font-weight: 800;
  padding: 3px 8px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255, 215, 0, 0.4);
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
  text-shadow: none;
  letter-spacing: 0.5px;
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
}
.special-title-badge.header-badge {
  margin-right: 4px;
}
.special-title-badge.hidden {
  display: none !important;
}

/* 2. 성물 동반 슬롯 및 세트 정보 */
.equipped-items-slots {
  display: flex;
  justify-content: space-around;
  gap: 12px;
  margin: 10px 0 16px;
}
.equipped-item-slot-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
}
.equipped-item-img-wrapper {
  width: 60px;
  height: 60px;
  border-radius: var(--r-md);
  background: var(--sunken-2);
  border: 2px solid var(--accent-gold);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
}
.equipped-item-img-wrapper:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}
.equipped-item-img-wrapper.empty {
  border: 2px dashed rgba(var(--line-rgb), 0.15);
  background: rgba(0, 0, 0, 0.2);
  box-shadow: none;
}
.equipped-item-icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-sm);
}
.unequip-item-badge-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ff2e93;
  border: 1.5px solid var(--on-dark);
  color: var(--on-dark);
  font-size: var(--fs-base);
  font-weight: 800;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  transition: all 0.2s ease;
}
.unequip-item-badge-btn:hover {
  background: #ff0055;
  transform: scale(1.1);
}
.empty-slot-plus {
  font-size: var(--fs-2xl);   /* 장식 + 기호 — 여덟 단계 밖 1.5rem 이었습니다 (2026-08-30) */
  color: rgba(var(--line-rgb), 0.15);
  font-weight: 300;
}
.equipped-item-slot-name {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
}
.equipped-item-slot-name.empty {
  color: var(--text-secondary);
}
.inventory-item-slot.item-equipped {
  border-color: rgba(255, 215, 0, 0.35) !important;
  background: rgba(255, 215, 0, 0.03) !important;
}

/* 현재 영성 조합 */
.active-set-badge {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(136, 48, 236, 0.08) 100%);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  animation: glowBorder 2.5s infinite ease-in-out;
}
@keyframes glowBorder {
  0%, 100% { border-color: rgba(212, 175, 55, 0.3); box-shadow: 0 0 5px rgba(212, 175, 55, 0.1); }
  50% { border-color: rgba(212, 175, 55, 0.6); box-shadow: 0 0 12px rgba(212, 175, 55, 0.2); }
}
.active-set-badge .set-name {
  color: var(--accent-gold);
}
.active-set-badge small {
  flex-basis: 100%;
  color: var(--text-secondary);
  line-height: 1.5;
}
.no-set-effects {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  text-align: center;
  padding: 8px;
  border: 1px dashed rgba(var(--line-rgb), 0.05);
  border-radius: var(--r-xs);
  margin-bottom: 16px;
}

/* 3. 디지털 스탬프 북 */
.stamp-book-card {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: var(--r-lg);
  padding: 20px;
  margin-bottom: 20px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.stamp-book-card h3 {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--accent-gold);
  /* 곧은 막대 → 붓으로 내리그은 획 (2026-09-04, 아래 .brush-tick 규칙) */
  padding-left: 8px;
  text-align: left;
  margin-top: 0;
  margin-bottom: 4px;
}
.stamp-book-desc {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  text-align: left;
  margin-bottom: 16px;
}
.stamp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 16px;
  justify-items: center;
}
.stamp-slot-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}
.stamp-slot-container:hover .stamp-seal.stamped {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(216,174,106,0.6);
}
.stamp-slot-container:hover .stamp-seal.locked {
  border-color: rgba(216, 174, 106, 0.4);
  background: rgba(255,255,255,0.06);
}
.stamp-seal {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.stamp-seal.stamped {
  animation: stampStamp 0.45s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}
@keyframes stampStamp {
  from { transform: scale(1.6) rotate(-15deg); opacity: 0; filter: brightness(1.5); }
  to { transform: scale(1) rotate(0deg); opacity: 1; filter: brightness(1); }
}
.stamp-name-label {
  font-family: var(--font-heading);
  font-size: var(--fs-xs); /* 가독성을 위해 살짝 상향 */
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  margin-top: 6px;
  width: 76px;
  white-space: normal; /* 긴 이름도 여러 줄로 출력되도록 수정 */
  word-break: keep-all; /* 단어 단위 줄바꿈으로 가독성 보장 */
  line-height: 1.25;
  transition: color 0.2s ease;
}
.stamp-slot-container:hover .stamp-name-label {
  color: var(--accent-gold);
}

/* 배지 도감 보관함 */
.badges-grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  width: 100%;
}
.badge-item-box {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-color);
  border-radius: var(--r-sm);
  padding: 10px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  text-align: left;
}
.badge-item-box.locked {
  opacity: 0.35;
  filter: grayscale(100%);
  border-style: dashed;
}
.badge-item-box.achieved {
  border-color: var(--accent-gold);
  background: linear-gradient(135deg, rgba(216, 174, 106, 0.08) 0%, rgba(0, 0, 0, 0.3) 100%);
  box-shadow: 0 0 8px rgba(216, 174, 106, 0.15);
}
.badge-item-icon {
  font-size: var(--fs-2xl);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}
.badge-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.badge-item-info h5 {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}
.badge-item-box.achieved .badge-item-info h5 {
  color: var(--accent-gold);
}
.badge-item-info p {
  font-size: var(--fs-xxs);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.2;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* 4. 익명 지향 기도 나눔터 스타일 */
.prayer-write-card {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: var(--r-lg);
  padding: 20px;
  margin-bottom: var(--space-xl);
}
.prayer-write-card h3 {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--accent-gold);
  margin-top: 0;
  margin-bottom: var(--space-md);
  /* 곧은 막대 → 붓으로 내리그은 획 (2026-09-04, 아래 .brush-tick 규칙) */
  padding-left: 8px;
}
.prayer-write-card .form-group {
  margin-bottom: var(--space-md);
}
.prayer-write-card input[type="text"],
.prayer-write-card textarea {
  width: 100%;
  background: var(--sunken);
  border: 1px solid var(--border-color);
  border-radius: var(--r-xs);
  padding: 10px 12px;
  color: var(--text-primary);
  font-size: var(--fs-md);
  font-family: inherit;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.prayer-write-card input[type="text"]:focus,
.prayer-write-card textarea:focus {
  outline: none;
  border-color: var(--accent-gold);
}
.prayer-write-card textarea {
  height: 80px;
  resize: none;
}
.prayer-submit-btn {
  width: 100%;
  padding: 10px;
  background: linear-gradient(135deg, var(--accent-gold), #aa7c11);
  color: var(--on-gold, #1f180f);
  border: none;
  border-radius: var(--r-xs);
  font-size: var(--fs-md);
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s;
}
.prayer-submit-btn:hover {
  opacity: 0.9;
}
.prayer-board-section h3 {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-md);
  /* 곧은 막대 → 붓으로 내리그은 획 (2026-09-04, 아래 .brush-tick 규칙) */
  padding-left: 8px;
}
.prayer-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.prayer-card-item {
  background: var(--panel);
  border: 1px solid var(--border-color);
  border-radius: var(--r-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.2s;
  text-align: left;
}
.prayer-card-item:hover {
  border-color: rgba(255, 215, 0, 0.15);
  background: var(--panel-2);
}
.prayer-card-header {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-sm);
}
.prayer-card-time {
  color: var(--text-secondary);
}
.prayer-card-content {
  font-size: var(--fs-md);
  line-height: 1.45;
  color: var(--text-primary);
  font-style: italic;
  background: rgba(0,0,0,0.15);
  padding: 10px;
  border-radius: var(--r-xs);
  margin: 4px 0;
}
.prayer-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-sm);
  margin-top: 4px;
}
.prayer-action-btn {
  background: linear-gradient(135deg, var(--color-love), #c9186c);
  color: var(--on-dark);
  border: none;
  font-size: var(--fs-sm);
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--r-xs);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(255, 46, 147, 0.2);
  transition: all 0.2s;
}
.prayer-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(255, 46, 147, 0.35);
}
.prayer-action-btn.prayed,
.prayer-action-btn:disabled {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* 5. 멘토 스토리텔링 대화창 (성공 모달 내) */
.mentor-dialogue-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--panel-2);
  border: 1.5px solid var(--accent-gold);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
  border-radius: var(--r-md);
  padding: 14px;
  margin-bottom: 16px;
  text-align: left;
  position: relative;
  overflow: hidden;
}
.mentor-dialogue-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--accent-gold);
}
/* ⚠️ 멘토가 말을 거는 자리도 같은 족자입니다 (2026-09-02).
      여기는 글줄 옆에 붙는 작은 자리라 축을 4px 로 얇게 잡았습니다. */
.mentor-dialogue-avatar {
  --jokja-w: 48px;
  position: relative;
  width: var(--jokja-w);
  height: calc(var(--jokja-w) * 1.34);
  padding: 7px 3px;
  box-sizing: border-box;
  border: 0;
  border-left: 1px solid var(--accent-gold);
  border-right: 1px solid var(--accent-gold);
  border-radius: 0;
  background: linear-gradient(180deg, #2e2519, #241d14);
  flex-shrink: 0;
  overflow: visible;
}
.mentor-dialogue-avatar::before,
.mentor-dialogue-avatar::after {
  content: '';
  position: absolute;
  left: -4px;
  right: -4px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, #6b5636, #3d3020);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.mentor-dialogue-avatar::before { top: 0; }
.mentor-dialogue-avatar::after  { bottom: 0; }
.mentor-dialogue-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}
.mentor-dialogue-img-fallback {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-2xl);  /* 여덟 단계 밖 1.5rem 이었습니다 (2026-08-30) */
}
.mentor-dialogue-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mentor-dialogue-speaker {
  font-size: var(--fs-md);
  font-weight: 800;
  color: var(--accent-gold);
  text-transform: uppercase;
}
.mentor-dialogue-text {
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text-primary);
  font-style: italic;
  margin: 0;
}

/* Splash & Title Overlay styling */
.splash-overlay {
  /* ⚠️ 시작 화면 글도 상태 표시줄에 가리지 않게 그만큼 내려 그립니다 (2026-09-23) */
  padding-top: var(--safe-top);
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  background-color: #0b0906;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: auto; /* Ensure overlay receives pointer events */
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.splash-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
  transform: scale(1.05);
}

/* ⚠️ 활성이 아닌 단계는 visibility: hidden 이어야 합니다.
      opacity: 0 + pointer-events: none 만으로는 눈에만 안 보일 뿐,
      브라우저에게는 여전히 '있는' 요소입니다. 그래서 Tab 키로 닿을 수 있고
      스크린리더도 읽습니다. 실제로 인트로 화면에서 Tab 을 몇 번 누르면
      보이지도 않는 멘토 선택 카드에 포커스가 가서, 캐릭터 만들기 화면을
      건너뛴 채 온보딩이 끝나 버렸습니다.
      visibility 는 transition 대상이 되므로 사라질 때 딜레이를 줘 페이드아웃을 살립니다. */
.splash-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

.splash-stage.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.6s ease, visibility 0s linear 0s;
}

.splash-bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
}
.splash-bg-dimmed {
  filter: brightness(0.3) blur(6px);
  transform: scale(1.05); /* prevent blurred edges from showing white */
}

/* Pulsing text style for Stage 1 */
.splash-tap-to-begin {
  position: absolute;
  /* ⚠️ 아래 12% 에 두면 그림 왼쪽 아래의 순례자 위에 글이 얹힙니다. 산 위 안개 띠(아래 36%)에 둡니다 */
  bottom: 36%;
  width: 100%;
  text-align: center;
  pointer-events: none;
}

/* 2026-09-26 — 앱이 다 읽히기 전에는 「화면을 눌러 시작합니다」 대신 「잠시만 기다려 주세요…」 (누름을 아직 못 받으므로).
   이미 쓰시는 분(html.returning-user)은 첫 화면 자체를 처음부터 가립니다. app.js 가 준비되면 html.app-ready. */
.splash-loading { display: none; font-family: var(--font-heading); font-size: var(--fs-lg); color: #3a3148; text-shadow: 0 1px 8px rgba(255,250,240,.9); }
html:not(.app-ready) .splash-tap-to-begin .pulse-text { display: none; }
html:not(.app-ready) .splash-tap-to-begin .splash-loading { display: inline; }
html.returning-user #app-splash-overlay { display: none; }
.pulse-text {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: 600;
  color: #3a3148;
  letter-spacing: 1px;   /* ⚠️ 한글입니다 — 영어 때 2px 이었습니다. 한글에 넓은 자간은 글자가 흩어져 보입니다 */
  text-shadow: 0 1px 8px rgba(255, 250, 240, 0.9);
  animation: textPulse 2s infinite ease-in-out;
}

@keyframes textPulse {
  0% {
    opacity: 0.3;
    transform: scale(0.98);
  }
  50% {
    opacity: 1;
    transform: scale(1.02);
  }
  100% {
    opacity: 0.3;
    transform: scale(0.98);
  }
}

/* Splash Titles styling */
.splash-title-block {
  position: absolute;
  /* ⚠️ 2026-09-02 첫 화면 그림(첫화면_04)의 산이 35% 부터 올라와서, 25% 에 두면 부제·태그가
     산 위에 얹힙니다. 16% 로 올려 제목 덩어리가 산 위 빈 하늘 안에서 끝나게 합니다 */
  top: 16%;
  width: 100%;
  text-align: center;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1), transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.splash-stage.active .splash-title-block {
  opacity: 1;
  transform: translateY(0);
}

/* ⚠️ 2026-09-02. 첫 화면 그림이 어두운 유화에서 «밝은 한지 수묵»으로 바뀌었습니다.
   그 전 글자는 노란 금빛에 검은 번짐 — 한지 위에서는 읽히지 않았습니다(실측).
   글자를 먹빛으로, 번짐은 종이빛으로 얇게. 되돌리지 마십시오 — 그림이 밝습니다. */
.splash-title-main {
  font-family: var(--font-serif);
  /* ⚠️ 2026-09-13. 예전에는 3.25rem 하나로 못박혀 있었습니다. 그래서 아이폰
     X·12·13·14·15·16 계열(폭 375~393px)에서 「성령의 순례길」이 자리에 안 들어가
     «성령의 / 순례길» 두 줄로 접혔습니다. 아래 @media (max-height: 740px) 가
     글씨를 줄여 주긴 하는데 그건 «높이»만 보므로, 키가 큰(844~852px) 이 기기들은
     걸리지 않았습니다 — 좁은 화면은 한 줄인데 넓은 화면이 접히는 뒤집힌 모양이었습니다.
     이제 폭도 함께 봅니다. 넓은 화면에서는 예전 그대로 3.25rem 입니다.
     ⚠️ 이 값을 고치면 iOS 실행 그림(splash/*.webp)도 다시 찍어야 합니다 —
        그 그림은 이 첫 화면을 그대로 찍은 것입니다. */
  font-size: min(3.25rem, 12.2vw);
  white-space: nowrap;
  font-weight: 700;
  color: #2b2438;
  letter-spacing: 6px;
  text-shadow: 0 1px 0 rgba(255, 250, 240, 0.9), 0 2px 12px rgba(255, 250, 240, 0.8);
  margin-bottom: 8px;
}

.splash-title-sub {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: 600;
  color: #4a4058;
  letter-spacing: 3px;
  text-shadow: 0 1px 8px rgba(255, 250, 240, 0.9);
  text-transform: uppercase;
}

.splash-title-tag {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: 700;
  color: #5c5270;
  letter-spacing: 1px;   /* ⚠️ 한글입니다 — 영어 때 4px 이었습니다 */
  margin-top: 16px;
  text-shadow: 0 1px 6px rgba(255, 250, 240, 0.9);
  opacity: 0.95;
}

/* Start Button Overlay for Stage 2 */
.start-btn-overlay {
  position: absolute;
  bottom: 34%; /* ⚠️ 아래 12% 는 그림의 순례자 자리입니다. 안개 띠에 둡니다 (2026-09-02) */
  width: 60%;
  height: 52px;
  /* ⚠️ 밝은 한지 위라 «먹빛 단추에 종이빛 글씨». 노란 반투명은 안 읽혔습니다 */
  background: #2b2438;
  border: 1px solid #2b2438;
  border-radius: 26px;
  color: #f5efe2;
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(43, 36, 56, 0.35);
  z-index: 999;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.start-btn-overlay:hover {
  background: #3a3148;
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.5), inset 0 0 15px rgba(255, 215, 0, 0.3);
  transform: translateY(-2px);
}

.start-btn-overlay:active {
  transform: translateY(1px) scale(0.98);
}

/* ⚠️ 위 .modal-header.restore 의 머리글을 함께 읽으십시오 — 같은 규칙입니다. */
.modal-header.training {
  /* ⚠️ 2026-09-13. .modal-header.restore 와 같은 병 — 짙은 색이 늘 깔려 밝은
     화면에서 이 머리 띠만 어둡게 남았습니다. 같은 방식으로 옅은 물로 바꿉니다. */
  background: linear-gradient(180deg, rgba(138, 90, 43, 0.16) 0%, transparent 100%);
  border-bottom: 1px solid rgba(138, 90, 43, 0.24);
  color: var(--text-primary);
  padding: 14px 20px 12px;
  text-align: center;
  position: relative;
}

.modal-header.training h2 {
  /* 앱의 다른 창 제목과 같은 크기(fs-xl)입니다. 여기만 줄이지 마십시오. */
  font-size: var(--fs-xl);
  margin: 0;
  color: var(--accent-gold);
  font-family: var(--font-serif);
}

/* Transcribing Box Styles */
.transcribe-target-box {
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid var(--accent-gold);
  padding: 12px;
  border-radius: 4px 12px 12px 4px;
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  color: var(--text-primary);
  line-height: 1.6;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  margin-bottom: 8px;
}

.transcribe-input {
  width: 100%;
  height: 80px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border-color);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  padding: 12px;
  font-size: var(--fs-base);
  line-height: 1.5;
  resize: none;
  outline: none;
  font-family: var(--font-primary);
  transition: all 0.3s ease;
}

.transcribe-input:focus {
  border-color: var(--accent-umber);
  background: rgba(0, 0, 0, 0.3);
}

.transcribe-input.match {
  border-color: var(--color-exp) !important;
  box-shadow: 0 0 10px rgba(133, 210, 153, 0.3);
  background: rgba(133, 210, 153, 0.05);
}

.transcribe-helper {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  display: flex;
  justify-content: space-between;
  margin-top: -6px;
}

.transcribe-helper.match {
  color: var(--color-exp);
}

@keyframes beadActivePulse {
  0% {
    box-shadow: 0 0 10px var(--accent-umber), 0 0 3px #fbf6ec, inset -1px -1px 3px rgba(0, 0, 0, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 22px var(--accent-umber), 0 0 9px #fbf6ec, inset -1px -1px 2px rgba(0, 0, 0, 0.3);
    transform: scale(1.12);
  }
  100% {
    box-shadow: 0 0 10px var(--accent-umber), 0 0 3px #fbf6ec, inset -1px -1px 3px rgba(0, 0, 0, 0.5);
    transform: scale(1);
  }
}

/* Dialogue Lines Styles */
.prayer-dialogue-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 10px 0;
}

.dialogue-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
}

.dialogue-row.leader {
  border-left: 3px solid var(--accent-umber);
}

.dialogue-row.response {
  border-left: 3px solid var(--accent-gold);
  background: rgba(216, 174, 106, 0.03);
}

.dialogue-speaker {
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.dialogue-row.leader .dialogue-speaker {
  color: var(--accent-umber);
}

.dialogue-row.response .dialogue-speaker {
  color: var(--accent-gold);
}

.dialogue-text {
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--text-primary);
}

/* General Reading Text style */
.prayer-text-scroll {
  max-height: 250px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid var(--border-color);
  padding: 14px;
  border-radius: var(--r-sm);
  font-size: var(--fs-md);
  line-height: 1.75;
  color: var(--text-primary);
  white-space: pre-line;
}

/* Meditation Recovery Modal styling */
.meditation-restore-modal {
  width: 90%;
  max-width: 400px;
  background: var(--surface-color);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border: 1px solid var(--border-color);
  box-shadow: var(--glass-shadow);
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* ⚠️ 창 머리는 «한 줄»입니다 (2026-08-29).
      예전에는 50px 짜리 빛나는 동그라미 + 32px 그림 + 제목이라 머리만 126px 이었습니다.
      휴대폰에서 본문이 그만큼 밀렸습니다. 다시 키우지 마십시오.
      · 그림은 제목 앞에 .hd-ico 로 붙입니다 (17px) — 앱의 다른 창과 같은 방식입니다.
      · 바탕 그러데이션은 창마다 다른 얼굴이라 남겨 둡니다. */
.modal-header.restore {
  /* ⚠️ 2026-09-13. francisco 사진: 밝은 화면인데 이 머리 띠만 «남색»으로 남아,
     그 위 금색 제목이 1~2:1 로 안 읽혔습니다("여기 위아래가 어두워"). 짙은 색을
     통째로 깔던 것을 같은 색조의 «옅은 물»로 바꿉니다 — 카드 바탕(화면을 따라감)
     위에 얹히므로 밝은 화면에서는 밝게, 어두운 화면에서는 어둡게 저절로 맞습니다.
     이미 .modal-header.success · .mission 이 쓰던 방식과 같습니다.
     ⚠️ 다시 짙은 색을 깔지 마십시오. */
  background: linear-gradient(180deg, rgba(47, 92, 133, 0.16) 0%, transparent 100%);
  border-bottom: 1px solid rgba(47, 92, 133, 0.24);
  color: var(--text-primary);
  padding: 14px 20px 12px;
  text-align: center;
  position: relative;
}

.modal-header.restore h2 {
  /* 앱의 다른 창 제목과 같은 크기(fs-xl)입니다. 여기만 줄이지 마십시오. */
  font-size: var(--fs-xl);
  margin: 0;
  color: var(--accent-gold);
  font-family: var(--font-serif);
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Success Modal Elegant Styling --- */
.success-card-modal {
  background: radial-gradient(circle at top, #2a2116 0%, #120e09 100%) !important;
  border: 1.5px solid var(--accent-gold) !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.85), 0 0 25px rgba(216, 174, 106, 0.3) !important;
  position: relative;
  overflow: hidden;
}

.success-glowing-glow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 180px;
  background: radial-gradient(circle at center top, rgba(216, 174, 106, 0.18) 0%, rgba(42, 33, 22, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

.success-badge-container {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(216, 174, 106, 0.15);
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin-top: 14px;
  margin-bottom: 16px;
  text-align: left;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.6);
  position: relative;
  z-index: 1;
}

.badge-item-img-wrapper {
  width: 58px;
  height: 58px;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1.5px solid var(--accent-gold);
  background: #1c1710;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  flex-shrink: 0;
}

.badge-item-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.discovered-item-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.discovered-item-details .item-label {
  font-size: var(--fs-xxs);
  color: var(--accent-gold);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
}

.discovered-item-details h4 {
  font-size: var(--fs-base);
  font-weight: 800;
  color: var(--text-primary);
  margin: 2px 0;
  font-family: var(--font-serif);
}

.discovered-item-details p {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  margin: 0;
}

.item-bonus-badge {
  font-size: var(--fs-xs);
  color: var(--color-love);
  font-weight: 700;
  background: rgba(255, 46, 147, 0.1);
  padding: 2px 6px;
  border-radius: var(--r-xs);
  align-self: flex-start;
  margin-top: 4px;
  border: 0.5px solid rgba(255, 46, 147, 0.2);
}

.success-stat-reward-text {
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--accent-gold);
  background: rgba(216, 174, 106, 0.05);
  border: 1px solid rgba(216, 174, 106, 0.18);
  border-radius: var(--r-sm);
  padding: 12px;
  margin: 12px 0 16px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  text-align: center;
  position: relative;
  z-index: 1;
}

/* ── 순례 인증 성공 창 · 밝은 화면 ──────────────────────────────
   이 창은 축하 효과 때문에 밤빛을 고정해 두었던 자리입니다. 밝은 화면에서도
   같은 배경이 남으면 햇빛 아래에서 금색·석록 글자가 사라지므로, 창 안에서만
   한지와 먹빛으로 뒤집습니다. 어두운 화면의 기존 연출은 그대로 둡니다. */
[data-theme="light"] .success-card-modal {
  --text-primary: #2f261d;
  --text-secondary: #594d3e;
  --accent-gold: #71520f;
  --color-courage: #174f3e;
  --color-exp: #315d29;
  --color-love: #87392f;
  --border-color: rgba(91, 67, 25, 0.22);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.72), transparent 42%),
    linear-gradient(180deg, #f6eedf 0%, #e9dcc5 100%) !important;
  color: var(--text-primary);
  border-color: rgba(113, 82, 15, 0.72) !important;
  box-shadow: 0 15px 36px rgba(47, 36, 19, 0.28), 0 0 18px rgba(113, 82, 15, 0.14) !important;
}
[data-theme="light"] .success-card-modal .success-glowing-glow {
  background: radial-gradient(circle at center top, rgba(190, 145, 55, 0.17) 0%, transparent 70%);
}
[data-theme="light"] .success-card-modal .mentor-dialogue-card {
  background: rgba(255, 250, 239, 0.82);
  box-shadow: 0 5px 16px rgba(70, 49, 18, 0.12);
}
[data-theme="light"] .success-card-modal .mentor-dialogue-avatar {
  background: linear-gradient(180deg, #f7efdf, #e5d6bc);
}
[data-theme="light"] .success-card-modal .mentor-dialogue-text,
[data-theme="light"] .success-card-modal .discovered-item-details h4 {
  color: var(--text-primary);
  text-shadow: none;
}
[data-theme="light"] .success-card-modal .success-stat-reward-text {
  background: rgba(113, 82, 15, 0.07);
  border-color: rgba(113, 82, 15, 0.28);
  text-shadow: none;
  box-shadow: none;
}
[data-theme="light"] .success-card-modal .success-badge-container {
  background: rgba(255, 250, 239, 0.58);
  border-color: rgba(113, 82, 15, 0.26);
  box-shadow: inset 0 0 10px rgba(86, 60, 20, 0.08);
}
[data-theme="light"] .success-card-modal .badge-item-img-wrapper {
  background: #f8f0e1;
  box-shadow: 0 3px 9px rgba(65, 44, 15, 0.18);
}
[data-theme="light"] .success-card-modal .item-bonus-badge {
  background: rgba(135, 57, 47, 0.09);
  border-color: rgba(135, 57, 47, 0.24);
}
[data-theme="light"] .success-card-modal .shrine-desc-box {
  background: rgba(99, 75, 39, 0.065);
  border-color: rgba(91, 67, 25, 0.20);
  box-shadow: inset 0 0 8px rgba(72, 50, 18, 0.07);
  max-height: none;
  overflow: visible;
}
[data-theme="light"] .success-card-modal .shrine-desc-box .desc-section.tips .section-title {
  color: #176453;
}
[data-theme="light"] .success-card-modal .instruction-text {
  color: #514536;
}

/* Stamp Detail Card Modal Animation and Responsive Design */
.stamp-detail-modal {
  /* ⚠️ 예전에는 rgba(168,155,120,0.85) — 중간 톤 올리브색이었습니다.
     그 위에 어두운 테마용 밝은 글자색(#a79c87, #d8ae6a)이 그대로 올라가서
     명암비가 1.5:1 까지 떨어져 글씨가 거의 안 보였습니다. (WCAG AA 기준 4.5:1)
     → 진짜 한지처럼 '밝은 종이색'으로 올리고, 글자는 먹빛으로 바꿉니다. */
  background-color: #f4ecda !important;
  background-image: linear-gradient(160deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 45%, rgba(150,120,70,0.13) 100%) !important;

  /* 이 모달 안에서만 색 변수를 한지용으로 재정의합니다.
     내부 인라인 style 들이 var(--accent-gold) / var(--text-secondary) 를 쓰고 있어
     여기만 바꿔 주면 전부 따라옵니다. */
  --text-primary: #2e2820;
  --text-secondary: #554d3d;
  --accent-gold: #7a5c17;
  /* ⚠️ 2026-09-19 — 이 모달의 금색은 짙어서(#7a5c17) 그 위 글자는 흰색이어야 합니다.
     어두운 화면의 --on-gold(짙은 먹 #23180a)가 그대로 내려와 「이 성지로 순례 이어가기」가
     2.79:1 이었습니다 (contrast 시험). 흰색이면 6:1 을 넘습니다. */
  --on-gold: #fbf6ec;
  --accent-umber: #8a5a2b;  /* 한지 위 4.99:1 */
  --border-color: rgba(90, 70, 30, 0.22);

  color: #2e2820;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 2px solid rgba(122, 92, 23, 0.5) !important;
  box-shadow:
    0 15px 40px rgba(0, 0, 0, 0.55),
    0 0 20px rgba(122, 92, 23, 0.18);
}
/* 한지 위에서는 진한 먹빛 글씨 */
.stamp-detail-modal .modal-body,
.stamp-detail-modal .modal-body p,
.stamp-detail-modal .modal-body span,
.stamp-detail-modal .modal-body div {
  color: #2e2820;
}
.stamp-detail-modal .modal-footer {
  background: rgba(120, 95, 45, 0.08) !important;
  border-top: 1px solid rgba(90, 70, 30, 0.25) !important;
}
/* ⚠️ 2026-09-13. 이 모달은 화면 밝기(라이트/다크) 설정과 상관없이 늘 "한지"
   느낌으로 고정되어 있습니다(바로 위 4104번째 줄 주석 참고). 그런데 머리말과
   "닫기" 단추만 옛 어두운 남색이 그대로 남아 있어, francisco 님이 "위아래가
   어두워"라고 캡처로 짚어 주셨습니다. 몸통·발치처럼 한지색 계열로 맞춥니다.
   ROUTE_REGION_COLOR 처럼 «일부러 그대로 두는» 자리가 아니니, 다시 어두운
   남색으로 되돌리지 마십시오. */
.stamp-detail-modal .modal-header.detail {
  background: rgba(120, 95, 45, 0.10);
  border-bottom: 1px solid rgba(90, 70, 30, 0.25);
}
.stamp-detail-modal .modal-header.detail,
.stamp-detail-modal .modal-header.detail * {
  color: var(--accent-gold);
}
.stamp-detail-modal .stamp-detail-close-btn {
  background: rgba(122, 92, 23, 0.12);
  border: 1px solid var(--accent-gold);
  /* ⚠️ 2026-09-19 — --accent-gold(#7a5c17) 글자는 이 옅은 금빛 바탕 위에서 4.11:1 로
     기준(4.5)에 조금 못 미쳤습니다. 글자만 한 단 더 짙게. */
  color: #5c4410;
}
.stamp-detail-modal .stamp-detail-close-btn:hover {
  background: rgba(122, 92, 23, 0.20);
  opacity: 1;
}

/* backdrop-filter 미지원 기기를 위한 폴백 */
@supports not (backdrop-filter: blur(16px)) {
  .stamp-detail-modal {
    background-color: #f4ecda !important;
  }
}

.modal-overlay.active .stamp-detail-modal {
  transform: scale(1);
  opacity: 1;
}

@media (max-width: 480px) {
  .stamp-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
  .stamp-seal {
    width: 54px;
    height: 54px;
  }
  .stamp-name-label {
    font-size: var(--fs-xs); /* 가독성을 위한 크기 조정 */
    max-width: 80px;
    white-space: normal;
  }
  .stamp-detail-modal {
    margin: 10px;
    max-height: 90vh;
  }
}

/* 실시간 고지도 지형선 강제 매칭 툴바 스타일 */
.map-calibration-panel {
  position: absolute;
  bottom: 120px;
  left: 10px;
  z-index: 10;
  width: calc(100% - 20px);
  max-width: 250px;
  background: rgba(236, 220, 185, 0.95); /* 따뜻한 한지 95% 불투명 처리 */
  border: 2px solid #8b7355;
  border-radius: var(--r-sm);
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  font-family: var(--font-serif);
  overflow: hidden;
  transition: all 0.3s ease;
}

.map-calibration-panel.collapsed {
  max-height: 40px;
}

.map-calibration-panel:not(.collapsed) {
  max-height: 480px;
}

.map-calibration-panel .panel-header {
  padding: 10px 12px;
  background: #ecdcb9;
  border-bottom: 1px solid #c2b090;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.map-calibration-panel .panel-header h3 {
  font-size: var(--fs-md);
  margin: 0;
  color: #5c4831;
  font-weight: bold;
}

.map-calibration-panel .panel-body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
}

.cal-control-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
}

.cal-control-row label {
  font-size: var(--fs-sm);
  font-weight: bold;
  color: #5c4831;
  margin-bottom: 4px;
}

.cal-control-row input[type="range"] {
  accent-color: #8b7355;
}

.cal-control-group {
  border: 1px solid #c2b090;
  border-radius: var(--r-xs);
  padding: 6px;
  background: rgba(255,255,255,0.3);
}

.cal-control-group h4 {
  font-size: var(--fs-sm);
  margin: 0 0 6px 0;
  color: #5c4831;
  font-weight: bold;
}

.cal-btn {
  flex: 1;
  padding: 4px 6px;
  font-size: var(--fs-xs);
  background: #f4ebd0;
  border: 1px solid #8b7355;
  border-radius: var(--r-xs);
  color: #5c4831;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.cal-btn:hover {
  background: #8b7355;
  color: var(--on-dark);
}

.cal-btn-special {
  flex: 1;
  padding: 5px 4px;
  font-size: var(--fs-sm);
  background: #dfd5be;
  border: 1px solid #8b7355;
  border-radius: var(--r-xs);
  color: #4a3825;
  cursor: pointer;
  font-family: inherit;
  font-weight: bold;
  transition: all 0.15s ease;
}

.cal-btn-special:hover {
  background: #8b7355;
  color: var(--on-dark);
}

.cal-btn-save {
  flex: 1.5;
  padding: 6px;
  font-size: var(--fs-sm);
  /* ⚠️ 2026-09-13. #8b7355 위 흰 글자의 명암비가 낮아 밝은 화면 계열에서 더 흐려
     보였습니다. 더 짙은 갈색으로. */
  background: #6e5941;
  border: 1px solid #5c4831;
  border-radius: var(--r-xs);
  color: var(--on-dark);
  cursor: pointer;
  font-weight: bold;
  font-family: inherit;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.cal-btn-save:hover {
  background: #6e5941;
}

.cal-btn-reset {
  flex: 1;
  padding: 6px;
  font-size: var(--fs-sm);
  background: #c2b090;
  border: 1px solid #8b7355;
  border-radius: var(--r-xs);
  color: #4a3825;
  cursor: pointer;
  font-family: inherit;
}

.cal-btn-reset:hover {
  background: #a99676;
}

/* ── 모바일/단말기 높이 대응 반응형 스플래시 ── */
@media (max-height: 740px) {
  .splash-title-block {
    top: 15% !important;
  }
  .splash-title-main {
    font-size: 2.3rem !important;
  }
  .start-btn-overlay {
    bottom: 36% !important;  /* ⚠️ 8% 는 그림의 순례자 자리입니다 — 안개 띠에 둡니다 (2026-09-02) */
    height: 44px !important;
    font-size: var(--fs-lg) !important;
  }
  .quick-start-btn { bottom: calc(36% - 70px); }
}

/* 지도 필터 컨트롤 패널 스타일 */
.map-filter-panel {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 9999;
  /* ⚠️ 2026-09-13. 배경이 늘 rgba(20,14,40,…) 로 짙은 보라라 밝은 화면에서 도드라졌고,
     글자도 #fff 로 고정이라 오히려 어두운 화면 판 색과는 안 맞았습니다. 둘 다
     화면을 따라가게 합니다. */
  background: rgba(var(--panel-2-rgb), 0.94);
  border: 1px solid rgba(216, 174, 106, 0.4);
  border-radius: var(--r-sm);
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  font-family: var(--font-serif);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  width: 280px;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: all;
  color: var(--text-primary);
}

.map-filter-panel.collapsed {
  width: 120px;
}

.filter-panel-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: bold;
  color: var(--accent-gold);
  border-bottom: 1px solid rgba(var(--line-rgb), 0.08);
  user-select: none;
}

.map-filter-panel.collapsed .filter-panel-toggle {
  border-bottom: none;
}

.filter-panel-body {
  padding: 12px;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.25s ease;
  max-height: 480px;
  opacity: 1;
}

.map-filter-panel.collapsed .filter-panel-body {
  max-height: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.filter-options-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.filter-options-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.filter-chip {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(var(--line-rgb), 0.12);
  color: var(--text-secondary);
  border-radius: var(--r-xs);
  padding: 4px 6px;
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  white-space: nowrap;
}

.filter-chip:hover {
  background: rgba(216, 174, 106, 0.1);
  border-color: rgba(216, 174, 106, 0.3);
  color: var(--text-primary);
}

.filter-chip.active {
  background: linear-gradient(135deg, var(--accent-gold), var(--gold-grad-end));
  border-color: var(--accent-gold);
  color: var(--on-gold);
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(216,174,106,0.25);
}

/* ==============================================================
   지도 위에 얹히는 칸 — 지금은 「순례자 · 마음」 하나뿐입니다
   ⚠️ 2026-09-04. 여기 있던 «둥근 미니맵»(.minimap-wrapper · .minimap-inner ·
      .minimap-player-marker)을 걷어냈습니다. 100px 동그라미 안에서 두 번째 지도가
      축척 4로 돌고 한가운데 빨간 점(#ff3333)이 찍혀 있었습니다.
      지도 위에 지도를 또 얹는 것이었고, 타일도 따로 한 번 더 내려받았습니다.
      까닭은 app.js 의 initMiniMap 이 있던 자리에 적어 두었습니다.
      ⚠️ 되살리지 마십시오. 되살리시려거든 거기 적힌 넷을 먼저 푸십시오.
   ============================================================== */

.rpg-hud-container {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* RPG Status Bar */
.rpg-status-bar {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 400px;
  /* ⚠️ 2026-09-13. francisco: "밝은화면인데 일부만 어두워 예전 거가 남아있어" —
     배경이 rgba(30,20,15,…) 로 늘 어두운데 그 위 글자는 화면을 따라가는 색이라
     밝은 화면에서 안 보였습니다. --panel-2-rgb 로 화면을 따라가게 합니다. */
  background: rgba(var(--panel-2-rgb), 0.90);
  backdrop-filter: blur(8px);
  border: 1px solid var(--accent-gold);
  border-radius: var(--r-sm);
  /* ⚠️ 2026-09-04: 12px → 8px 위아래. 오른쪽이 두 줄이 되어 여백이 넉넉해졌습니다. */
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
  box-shadow: 0 5px 20px rgba(0,0,0,0.6);
}

/* ⚠️ 2026-09-04. 전에는 이 안에 「18번째 길」 글자까지 들어 있어서 누르는 자리가
   55×78 이었습니다. 글자를 오른쪽으로 옮기면서 42×54 로 줄어, 손가락에 닿는
   최소 크기(44×44)에서 «너비»가 모자랐습니다.
   → 보이는 모습은 그대로 두고 누르는 자리만 넓힙니다. min-width 를 줄이지 마십시오. */
.status-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  min-height: 46px;
  cursor: pointer;
}

/* ⚠️ 2026-09-01: 동그라미에서 「순례자 패」로 바꿨습니다.
   테두리는 .pilgrim-card 가 등급에 따라 그리므로 여기서 border 를 주지 않습니다.
   (여기에 border 를 도로 넣으면 등급 테두리와 두 겹으로 겹칩니다) */
/* ⚠️ 2026-09-04: 42×54 → 52×66. 순례자 차림이 안 보일 만큼 작았습니다.
   상태바는 72 → 84px 이 됩니다. 더 키우면(64×82) 칸이 100px 로 돌아가
   09-04 에 줄여 얻은 지도 28px 을 도로 내주게 됩니다 — 그래서 여기서 멈춥니다. */
.profile-avatar {
  width: 52px;
  height: 66px;
  border-radius: 12%/9%;
  background: radial-gradient(circle, #2e2418 0%, #0e0b07 100%);
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* ⚠️ 2026-09-04. 「18번째 길」은 이제 순례자 그림 «아래»가 아니라
   오른쪽 .status-bars 의 «첫 줄»입니다 (index.html 에 까닭을 적어 두었습니다).
   그래서 가운데맞춤·위쪽 여백을 걷어내고 왼쪽맞춤으로 둡니다. */
.profile-level {
  font-size: var(--fs-sm);
  font-weight: bold;
  color: var(--accent-gold);
  margin-top: 0;
  text-align: left;
  line-height: 1.3;
}

.status-bars {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.bar-container {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: bold;
}

.bar-label {
  color: var(--text-primary);
  /* ⚠️ HP/MP 두 글자에 맞춘 20px 이라, 우리말 「기력」「집중」이 두 줄로 쪼개졌습니다. */
  width: auto;
  min-width: 30px;
  white-space: nowrap;
  flex-shrink: 0;
}

.bar-track {
  flex: 1;
  /* 나머지(높이·바탕·붓획 모양)는 아래 「마음 막대」 자리에서 이어 적습니다 */
}

.bar-fill {
  height: 100%;
  border-radius: 0;
  transition: width 0.3s ease;
}

/* ⚠️ 2026-09-02. `.hp-fill`(기력 막대의 붉은 채움)을 걷어냈습니다 — 기력 자체를
   걷어냈습니다. index.html 의 .status-bars 자리에 까닭을 적어 두었습니다. */

/* ⚠️ 2026-09-04. 「마음」 막대가 새파랗게 빛나 «게임의 MP 막대»로 보였습니다.
   앱 전체가 먹·한지·금빛인데 여기만 새파랗고 빛무리까지 둘러, 걷어내 온
   «게임 찌꺼기»가 마지막으로 남아 있던 자리였습니다.
   → 금빛으로 낮추고 빛무리를 없앴습니다. 다시 파랗게 만들지 마십시오.
   (클래스 이름 .mp-fill 은 그때 이름입니다. index.html 이 그 이름을 부르고
    app.js 가 #hud-mp-fill 을 찾으므로 이름만은 그대로 둡니다.)
   ⚠️ 같은 날 한 번 더 — 덕 막대와 같은 «붓획»으로 씌웠습니다.
      여기는 결(--brush-grain)을 안 넣습니다. 지도 위에서 크게 보여, 결까지 넣으면
      골판지처럼 보였습니다. 금빛 한 획으로 둡니다. */
.mp-fill {
  background: var(--accent-gold);
  box-shadow: none;
  -webkit-mask-image: var(--brush-h);
          mask-image: var(--brush-h);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
/* 홈도 검은 구멍이 아니라 «종이에 옅게 그어 둔 자국»입니다 */
.bar-track {
  height: 11px;
  background: var(--ink-line);
  border: none;
  border-radius: 0;
  overflow: visible;
  -webkit-mask-image: var(--brush-h-faint);
          mask-image: var(--brush-h-faint);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.bar-label { color: var(--text-primary); }

/* ⚠️ 2026-09-01 고침. 「기력」 값은 최대 「100/100」(일곱 글자)까지 나오는데
   너비를 40px 로 못박아 놔서 「100/1」·「00」 두 줄로 쪼개져 나왔습니다.
   min-width 를 늘리고 white-space:nowrap · flex-shrink:0 을 더해 한 줄로 고정합니다.
   (「집중」은 항상 「3/3」 한 자리뿐이라 그쪽은 원래도 문제가 없었습니다) */
.bar-value {
  /* ⚠️ 2026-09-13. #ddd 로 고정이라 밝은 화면 판 위에서 흐리게 남았습니다. */
  color: var(--text-primary);
  min-width: 52px;
  flex-shrink: 0;
  white-space: nowrap;
  text-align: right;
  font-family: monospace;
}

/* Quest Trail Animation */
.quest-trail-line {
  stroke-dasharray: 8 12;
  animation: dashScroll 1.5s linear infinite;
  stroke: var(--accent-gold);
  stroke-width: 4px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 지도 위의 코스 선 (2026-09-18).
   ⚠️ 여기에 stroke 나 stroke-width 를 적지 마십시오. 이 선은 Leaflet 이
      그리고, 색·굵기·점선 간격은 L.polyline 의 값으로 정합니다 (코스마다
      색이 다릅니다). CSS 에 적으면 «표현 속성»을 눌러 버려 열두 코스가
      모두 같은 색이 됩니다. 여기는 «흐르는 움직임»만 얹습니다. */
.map-route-trail {
  animation: dashScroll 1.5s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .map-route-trail { animation: none; }
}

@keyframes dashScroll {
  to {
    stroke-dashoffset: -40;
  }
}

/* ==========================================
   Joseon Pilgrim Character Customizer & Onboarding CSS
   ========================================== */
.customizer-container {
  width: 92%;
  max-width: 800px;
  max-height: 90vh;
  /* ⚠️ 2026-09-13. 배경·글자 모두 늘 고정색이라 밝은 화면에서 이 판만 어둡게 남았습니다. */
  background: rgba(var(--panel-2-rgb), 0.96);
  border: 1px solid var(--accent-gold);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(212, 175, 55, 0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  color: var(--text-primary);
  z-index: 100;
}

.customizer-header {
  text-align: center;
  border-bottom: 1px dashed rgba(212, 175, 55, 0.3);
  padding-bottom: 12px;
}

.customizer-header h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  color: var(--accent-gold);
  margin: 0 0 6px 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.customizer-header p {
  font-size: var(--fs-md);
  color: var(--text-secondary);
  margin: 0;
}

.customizer-body {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
  align-items: start;
}

@media (max-width: 680px) {
  .customizer-body {
    grid-template-columns: 1fr;
  }
}

.avatar-preview-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  /* ⚠️ 2026-09-13. 늘 검정 반투명이라 밝은 화면에서 어둡게 남았습니다. */
  background: var(--sunken);
  padding: 16px;
  border-radius: var(--r-md);
  border: 1px solid rgba(212, 175, 55, 0.2);
}

/* ⚠️ 2026-09-01: 동그라미 → 「순례자 패」. 테두리는 .pilgrim-card 가 등급에 따라 그립니다. */
.avatar-preview-box {
  width: 140px;
  height: 182px;
  border-radius: 12%/9%;
  background: radial-gradient(circle, #2e2418 0%, #0b0906 100%);
  box-shadow: 0 0 25px rgba(212, 175, 55, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  /* ⚠️ hidden 으로 되돌리지 마십시오 — 등급 딱지가 패 아래로 조금 나와 있어 잘립니다 */
  overflow: visible;
  position: relative;
}

.avatar-name-input-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}

.avatar-name-input-group label {
  font-size: var(--fs-sm);
  color: var(--accent-gold);
  font-weight: bold;
}

.avatar-name-input-group input {
  width: 100%;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: var(--r-xs);
  color: var(--text-primary);
  font-size: var(--fs-base);
  outline: none;
  text-align: center;
  font-weight: bold;
  box-sizing: border-box;
}

.avatar-name-input-group input:focus {
  border-color: var(--accent-gold);
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
}

.customizer-controls {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.custom-option-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.option-label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent-gold);
  letter-spacing: 0.5px;
}

.option-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip-btn {
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(var(--line-rgb), 0.15);
  border-radius: var(--r-lg);
  /* ⚠️ 2026-09-13. #ccc 로 고정이라, 이 칩을 담은 판(.customizer-container 등)이
     밝은 화면을 따라가게 되면서 흐린 글자가 흐린 판 위에 얹혀 잘 안 보였습니다. */
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.chip-btn:hover {
  border-color: var(--accent-gold);
  color: var(--text-primary);
}

.chip-btn.active {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.3), rgba(139, 107, 50, 0.5));
  border-color: var(--accent-gold);
  color: var(--text-primary);
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}

/* 「나 → 설정 → 순례 차림」 창 (2026-09-01)
   ⚠️ 미리보기 상자에 border 를 주지 마십시오 — 순례자 패의 등급 테두리와 두 겹이 됩니다
   (같은 이유로 .avatar-preview-box 도 테두리를 뺐습니다). */
.outfit-picker-preview {
  width: 140px;
  height: 182px;
  margin: 4px auto 10px;
  overflow: visible;
}
.outfit-picker-name {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin: 10px 0 0;
  word-break: keep-all;
}

/* ── 「나의 순례자」 창 — 이름·성별·차림 (2026-09-18) ── */
.picker-group { margin: 0 0 16px; }
.picker-group:last-child { margin-bottom: 0; }
/* ⚠️ 이 창(.confession-prep-modal)은 속의 글이 가운데로 모입니다. 이름표와
   안내는 왼쪽에 붙여야 아래 입력칸·칩과 줄이 맞습니다. */
.picker-group .option-label {
  display: block;
  margin: 0 0 7px;
  text-align: left;
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--text-primary);
}
/* ⚠️ 손가락으로 누르고 적는 자리입니다. 44px 아래로 줄이지 마십시오
   (`.agents/pilgrimedit.js` 가 지킵니다). */
.picker-name-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 11px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-color);
  background: rgba(var(--panel-2-rgb), 0.9);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--fs-md);
}
.picker-name-input:focus {
  outline: none;
  border-color: var(--accent-gold);
}
.picker-hint {
  margin: 7px 0 0;
  text-align: left;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  word-break: keep-all;
}
/* 성별은 둘뿐이라 세로로 쌓지 않고 나란히 둡니다 */
#outfit-picker-gender {
  display: flex;
  flex-direction: row;
  gap: 8px;
}
/* 칩은 앱 곳곳에서 31px 입니다. 여기는 «고르는 자리»라 손가락에 맞춥니다. */
#outfit-picker-gender .chip-btn,
#outfit-picker-chips .chip-btn {
  min-height: 44px;
}
#outfit-picker-gender .chip-btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── 「나 → 성장」의 나의 순례자 카드 ── */
.my-pilgrim-avatar {
  flex: 0 0 auto;
  width: 64px;
  height: 86px;
  overflow: visible;
}
#outfit-picker-chips {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#outfit-picker-chips .chip-btn {
  width: 100%;
  text-align: left;
  min-height: 44px;   /* ⚠️ 손가락 자리 — 44px 아래로 줄이지 마십시오 */
}

/* ⚠️ 아직 열리지 않은 순례 차림 (2026-09-01).
   숨기지 않고 **보이게** 둡니다 — 무엇을 하면 열리는지 알아야 걸어갈 마음이 납니다.
   ⚠️ 흐리게 하되 글씨는 읽히도록 남깁니다. opacity 를 더 낮추면 명암비가 깨집니다
   (잠금 안내 글씨는 이미 작아서 여유가 없습니다). */
.chip-btn.chip-locked {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  background: rgba(255, 255, 255, 0.03);
  border-style: dashed;
  border-color: rgba(var(--line-rgb), 0.18);
  color: var(--text-secondary, #aaa5bc);
  cursor: not-allowed;
  text-align: left;
}
.chip-btn.chip-locked:hover {
  border-color: rgba(var(--line-rgb), 0.18);
  color: var(--text-secondary, #aaa5bc);
}
.chip-lock-note {
  font-size: 0.72rem;
  line-height: 1.3;
  opacity: 0.9;
  word-break: keep-all;
}

.color-chip {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

.color-chip:hover {
  transform: scale(1.15);
}

.color-chip.active {
  border-color: var(--on-dark);
  transform: scale(1.15);
  box-shadow: 0 0 10px var(--accent-gold);
}

.customizer-footer {
  text-align: center;
  padding-top: 10px;
  border-top: 1px dashed rgba(212, 175, 55, 0.2);
}

.customizer-submit-btn {
  width: 100%;
  max-width: 360px;
  padding: 12px 24px;
  background: linear-gradient(135deg, var(--accent-gold), var(--gold-grad-end));
  border: 1px solid #ffe89e;
  border-radius: 30px;
  color: var(--on-gold);
  font-weight: 800;
  font-size: var(--fs-base);
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
  transition: transform 0.2s, box-shadow 0.2s;
}

.customizer-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.6);
}

/* Mentor Onboarding Stage CSS */
.mentor-onboarding-container {
  width: 92%;
  max-width: 820px;
  max-height: 90vh;
  /* ⚠️ 2026-09-13. 배경·글자 모두 늘 고정색이라 밝은 화면에서 이 판만 어둡게 남았습니다. */
  background: rgba(var(--panel-2-rgb), 0.97);
  border: 1px solid var(--accent-gold);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  color: var(--text-primary);
  z-index: 100;
}

.mentor-onboarding-header {
  text-align: center;
  border-bottom: 1px dashed rgba(212, 175, 55, 0.3);
  padding-bottom: 10px;
}

.mentor-onboarding-header h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  color: var(--accent-gold);
  margin: 0 0 4px 0;
}

.mentor-onboarding-header p {
  font-size: var(--fs-md);
  color: var(--text-secondary);
  margin: 0;
}

.mentor-onboarding-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 720px) {
  .mentor-onboarding-grid {
    grid-template-columns: 1fr;
  }
}

.mentor-onboard-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: var(--r-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.mentor-onboard-card:hover,
.mentor-onboard-card.active {
  transform: translateY(-4px);
  border-color: var(--accent-gold);
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.3);
  background: rgba(212, 175, 55, 0.08);
}

/* ⚠️ 처음 멘토를 고르는 화면의 그림도 같은 족자입니다 (2026-09-02).
      여기만 동그라미로 두면 고를 때와 모신 뒤의 모양이 달라집니다. */
.mentor-card-avatar {
  --jokja-w: 68px;
  position: relative;
  width: var(--jokja-w);
  height: calc(var(--jokja-w) * 1.34);
  padding: 9px 4px;
  box-sizing: border-box;
  border: 0;
  border-left: 1px solid var(--accent-gold);
  border-right: 1px solid var(--accent-gold);
  border-radius: 0;
  background: linear-gradient(180deg, #2e2519, #241d14);
  overflow: visible;
  margin-bottom: 10px;
}
.mentor-card-avatar::before,
.mentor-card-avatar::after {
  content: '';
  position: absolute;
  left: -5px;
  right: -5px;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(180deg, #6b5636, #3d3020);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.mentor-card-avatar::before { top: 0; }
.mentor-card-avatar::after  { bottom: 0; }

.mentor-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

.mentor-onboard-card h3 {
  font-size: var(--fs-lg);
  color: var(--accent-gold);
  margin: 0 0 4px 0;
}

.mentor-onboard-card p {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0 0 10px 0;
  flex-grow: 1;
}


/* 길찾기 버튼: 브랜드 색을 쓰되 흰 글씨가 읽히도록 명도를 낮춥니다.
   (네이버 기본 초록 #03C75A 위의 흰 글씨는 명암비 2.25:1 로 기준 미달) */
.stamp-detail-modal .nav-app-btn[onclick*="naver"] {
  background: #01843B !important;
  font-weight: 800 !important;
}


/* ── 한지 배경 위에서 예외적으로 '어두운 박스'인 두 곳 ──────────────
   전체를 밝게 바꾸면서 이 둘만 어두운 채로 남아 글자가 묻혔습니다. */

/* 1) 성물 이미지 위의 상태 배지 — 어두운 반투명 위이므로 글자는 밝게 유지 */
.stamp-detail-modal #stamp-detail-visit-status {
  background: rgba(0, 0, 0, 0.75) !important;
}
.stamp-detail-modal #stamp-detail-visit-status,
.stamp-detail-modal #stamp-detail-visit-status * {
  color: #ffdf9e !important;
}

/* 2) 사진 등록 영역 — 한지 위의 검은 박스라 안내 글씨가 안 보였습니다.
      사진이 없을 때는 밝은 종이 패널로, 글씨는 먹빛으로. */
.stamp-detail-modal #stamp-detail-user-photo-box {
  background-color: rgba(120, 95, 45, 0.1) !important;
  border: 1px dashed rgba(122, 92, 23, 0.45) !important;
}
.stamp-detail-modal #user-photo-placeholder {
  color: #4a4335 !important;
}
/* 사진 업로드 중 표시는 사진 위에 뜰 수 있으므로 밝은 배경칩을 깔아 줍니다 */
.stamp-detail-modal #user-photo-loader {
  background: rgba(248, 243, 232, 0.92);
  border-radius: var(--r-sm);
  padding: 10px 14px;
}
.stamp-detail-modal #user-photo-loader,
.stamp-detail-modal #user-photo-loader * {
  color: #5c4610 !important;
}

/* ── 미사 시간 수정 (내 기기 전용) ───────────────────────────── */
/* ⚠️ 미사시간은 예전에 kvdb.io 공개 버킷으로 모든 사용자가 공유했으나,
      인증이 없어 누구나 지우거나 오염시킬 수 있어 제거했습니다.
      지금은 constants.js 의 성지 기본값 + 이 기기의 보정값만 씁니다. */
.mass-edit-btn {
  margin-left: auto;
  padding: 3px 10px;
  font-size: var(--fs-xs);
  font-weight: 700;
  border-radius: var(--r-sm);
  border: 1px solid rgba(122, 92, 23, 0.45);
  background: rgba(122, 92, 23, 0.1);
  color: #6b4f12;
  cursor: pointer;
  flex-shrink: 0;
  min-height: 28px;
}
.mass-edit-btn:hover,
.mass-edit-btn:focus-visible {
  background: rgba(122, 92, 23, 0.2);
}
.mass-edited-badge {
  padding: 2px 8px;
  font-size: var(--fs-xs);
  font-weight: 700;
  border-radius: var(--r-sm);
  background: #8a6a2f;
  color: var(--on-dark);
  flex-shrink: 0;
}

/* ── 접근성 ─────────────────────────────────────────────────── */
/* 키보드 사용자가 헤더를 건너뛰고 본문으로 바로 갈 수 있는 링크.
   평소에는 화면 밖에 있다가 Tab 을 누르면 나타납니다. */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10001;
  padding: 10px 16px;
  background: #f4ecda;
  color: #2e2820;
  font-weight: 700;
  border-radius: 0 0 8px 0;
  text-decoration: none;
}
.skip-to-content:focus {
  left: 0;
}
.skip-to-content {
  min-height: 44px;              /* 손가락 기준 (2026-08-30, 글자 개편 때 43px 로 떨어짐) */
  display: inline-flex;
  align-items: center;
}

/* 포커스 표시 — 마우스로 눌렀을 때는 나오지 않고 키보드 이동에만 나타납니다.
   ⚠️ 색을 어둡게 되돌리지 마십시오. 2026-08-29 에 재어 보니 이랬습니다.
        · 창 안 #5a3fa0 (보라)  — 어두운 카드 위에서 **2.27 : 1**
        · 보통  #7a5c17 (어두운 금) — **2.88 : 1**
        · 머리말 #ffdf9e (밝은 금)  — 13.93 : 1
      WCAG 2.2 는 포커스 표시에 **3 : 1** 을 요구합니다. 앞의 둘은 그 밑이라,
      키보드로 다니는 분이 **지금 어디에 있는지 안 보였습니다.**
      그래서 이미 잘 보이던 머리말 색으로 앱 전체를 맞췄습니다.

   ⚠️ 왜 밝은 색 하나로 되는가 — 이 앱은 **어두운 화면뿐**이기 때문입니다.
      (밝은 화면은 francisco 님이 빼셨습니다)
      그리고 `outline-offset: 2px` 이라 테두리는 그 단추 **바깥**에 그려집니다.
      금색 단추(닫기 등) 위에 겹치는 것이 아니라, 그 둘레의 어두운 바탕에 그려집니다.
      ⚠️ 나중에 밝은 화면을 다시 넣으면 이 한 줄로는 모자랍니다.
         그때는 밝은 테 바깥에 어두운 테를 하나 더 두르십시오(두 겹 테두리).
   ⚠️ 이 색을 바꾸면 `.agents/focusring.js` 가 대비를 다시 잽니다. */
:focus-visible {
  outline: 3px solid #ffdf9e;
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* 화면에는 보이지 않지만 스크린리더는 읽는 텍스트 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lightbox-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  padding: 8px 14px;
  font-size: var(--fs-base);
  font-weight: 700;
  color: #2e2820;
  background: #f4ecda;
  border: 1px solid #7a5c17;
  border-radius: var(--r-lg);
  cursor: pointer;
  min-height: 40px;
}

/* 동작 줄이기를 켜 둔 사용자에게는 애니메이션을 최소화합니다. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   3주차 정리 메모 (2026-08-08)

   화면 어디에서도 쓰이지 않는 규칙 36개(약 6.9KB)를 지웠습니다.
   지우기 전에 아래를 확인했습니다:
     · index.html / app.js / constants.js / state.js / location.js / themeToggle.js 전수 검색
     · `${변수}-glow` 처럼 동적으로 조합되는 클래스명 확인
       → companion 별 발광 효과(archangel_michael-glow 등)는 실제로 쓰이므로 남겼습니다.

   일부러 남긴 것:
     · .sr-only — 접근성 유틸리티 (스크린리더 전용 텍스트용)

   ⚠️ 후속 메모 (2026-09-01) — 위 「일부러 남긴 것」 중 rosary-* 다섯 개
     (.rosary-mystery-image-container·.circular·.zoomable·
     .rosary-finger-indicator·.rosary-zoom-badge)와 .transfiguration-glow 는
     이번에 지웠습니다. 2026-08-08 엔 「나중에 묵주 화면 붙일 때 필요하다」고
     남겨 둔 것들인데, 그 사이 묵주 기도 화면이 실제로 만들어지면서
     (.agents/rosary.js 76개 통과) `.rosary-decade-head`·`.rosary-bead`·
     `.rosary-prayer-box` 등 **전혀 다른 이름**으로 지어졌습니다. 즉 "나중에
     쓸 것"이 아니라 이미 다른 이름으로 대체되고 남은 옛 자취였습니다.
     francisco 님께 확인 후 지웠습니다 — 되살릴 필요는 없습니다.

     같은 날, 이 주석 위아래로 실제 화면 어디서도 안 쓰이는 규칙을 추가로
     정리했습니다 — nurturing·energy·training 전체, meditation-circle-container·
     breathing-*, splash-features-board·feature-*, focus-card, spiritual-prompt,
     seven-day-*, confession-area-list, prayer-card-author·prayer-count,
     set-sparkle, promotion-modal-content.saint-canonization, shrine-cards-container·
     shrines-list-section. 전부 `${변수}-이름` 식 동적 조합인지 먼저 확인한
     뒤 지웠습니다 — kind-${kindKey}(kind-shrine/kind-tomb)와
     ${companion}-glow 는 그렇게 걸려서 남겼습니다.
   ───────────────────────────────────────────────────────────── */

/* 성지에 상주 미사가 없어 인근 본당 일정을 보여 줄 때의 표시 */
.mass-parish-badge {
  padding: 2px 8px;
  font-size: var(--fs-xs);
  font-weight: 700;
  border-radius: var(--r-sm);
  background: #7a5c17;
  color: var(--on-dark);
  flex-shrink: 0;
}

/* ⚠️ 모달 본문의 `.stamp-detail-modal .modal-body span` 규칙이 선택자 우선순위에서 이겨
      배지 글자색을 먹빛으로 덮어썼습니다 (흰 글자 → 명암비 2.34:1 로 추락).
      배지는 배경이 어두우므로 글자를 흰색으로 되돌립니다. */
.stamp-detail-modal .modal-body .mass-parish-badge,
.stamp-detail-modal .modal-body .mass-edited-badge {
  color: var(--on-dark);
}

/* 기도문은 쉼표·마침표에서 한 줄씩 끊어 바칩니다 */
/* 마침표로 끝난 줄 뒤 = 문장이 바뀌는 자리. 한 칸 더 띄워 숨을 고르게 합니다 */

/* ⚠️ 눌리지 않는 버튼이 눌리는 버튼과 똑같이 보이면, 사용자는 눌러 놓고
      "왜 아무 일도 안 일어나지?" 하게 됩니다. 기도를 다 바치기 전의
      「기도 완료」 버튼이 바로 그 상태였습니다. 눈으로 구분되게 합니다. */
.modal-btn:disabled,
.modal-btn.complete:disabled {
  /* 잠긴 것은 알아볼 수 있어야 하지만 글자는 읽혀야 합니다. 0.4 는 너무 흐렸습니다. */
  opacity: 0.55;
  filter: grayscale(0.55);
  cursor: not-allowed;
  box-shadow: none;
}
.modal-btn:disabled:hover,
.modal-btn.complete:disabled:hover {
  transform: none;
  filter: grayscale(0.7);
}

/* 크게 본 신비 그림은 화면을 가득 채웁니다 */
#image-lightbox-modal #lightbox-img {
  max-width: 92%;
  max-height: 82%;
}

/* 크게 본 그림 아래 묵상 문구 */
/* 순례 엽서 (2026-09-19) */
.postcard-btn { width: 100%; min-height: 44px; margin-top: 8px; padding: 10px; border-radius: 8px; border: 1px solid var(--accent-gold); background: rgba(216, 174, 106, 0.10); color: var(--accent-gold); font-size: 0.78rem; font-weight: 700; font-family: var(--font-serif); cursor: pointer; }
.postcard-btn:disabled { opacity: 0.6; cursor: wait; }
.lightbox-postcard-bar { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); width: min(92%, 420px); display: none; flex-direction: column; align-items: center; gap: 8px; cursor: default; }
.lightbox-postcard-btn { position: static; min-height: 48px; padding: 10px 28px; font-size: var(--fs-lg); }
.lightbox-postcard-hint { font-size: var(--fs-sm); color: #f2e9d8; text-align: center; word-break: keep-all; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }

.lightbox-caption {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  width: min(92%, 420px);
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  background: rgba(14, 11, 7, 0.9);
  border: 1px solid var(--accent-gold);
  color: var(--on-dark);
  font-size: var(--fs-base);
  line-height: 1.5;
  text-align: center;
  pointer-events: none;
}

/* ── 가까운 성지 카드 띠 ───────────────────────────────────────
   겹친 마커를 정확히 누르지 않아도 성지를 고를 수 있게 하는 띠입니다.
   화면 아래쪽 = 엄지가 닿는 자리에 둡니다. */
.shrine-cards {
  margin: 12px 0 4px;
}
.shrine-cards-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 4px 8px;
}
.shrine-cards-title {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--accent-gold);
}
.shrine-cards-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.card-counter {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  min-width: 48px;
  text-align: center;
}
/* ⚠️ 손가락으로 미는 동작은 키보드·스크린리더로 못 합니다.
   이 두 단추가 그 대체 수단이므로 절대 지우지 마십시오. */
.card-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.45);
  background: rgba(255, 255, 255, 0.05);
  color: var(--accent-gold);
  font-size: var(--fs-xl);
  line-height: 1;
  cursor: pointer;
}
.card-arrow:disabled {
  opacity: 0.4;
  cursor: default;
}

.shrine-cards-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 2px 4px 10px;
  scrollbar-width: none;
}
.shrine-cards-track::-webkit-scrollbar { display: none; }

.shrine-card {
  flex: 0 0 78%;
  max-width: 300px;
  scroll-snap-align: center;
  border-radius: var(--r-md);
  padding: 12px 13px 13px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(212, 175, 55, 0.22);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.shrine-card.current {
  border-color: var(--accent-gold);
  background: rgba(212, 175, 55, 0.10);
}
.shrine-card-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.shrine-card-name {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text-primary);
  word-break: keep-all;
}
.shrine-card-done {
  color: #4ad9a4;
  font-size: var(--fs-base);
  flex-shrink: 0;
}
.shrine-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 7px 0 11px;
  font-size: var(--fs-md);
  color: var(--text-secondary);
}
.shrine-card-dist { font-weight: 700; color: var(--accent-gold); }
.shrine-card-sub { color: var(--text-secondary); }
.shrine-card-dist.dim { font-weight: 400; color: var(--text-secondary); }
.shrine-card-mass { word-break: keep-all; }

.shrine-card-btns { display: flex; gap: 8px; }
.shrine-card-btn {
  flex: 1;
  /* 손가락으로 누르는 단추는 44px 이상이어야 잘못 눌리지 않습니다 */
  min-height: 44px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(212, 175, 55, 0.35);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  font-size: var(--fs-md);
  font-weight: 600;
  cursor: pointer;
}
.shrine-card-btn.primary {
  background: var(--accent-gold);
  border-color: var(--accent-gold);
  color: var(--on-gold);
}

/* 카드에서 고른 성지의 마커를 지도에서 눈에 띄게 */
.custom-shrine-marker.card-focus {
  /* 한지 조각을 살짝 키우고 종이 테두리를 인주빛으로 — 네모 outline 은 조각 모양과 안 맞습니다 */
  transform: scale(1.12);
  z-index: 500;
  filter: drop-shadow(1.5px 0 0 #b8321e) drop-shadow(-1.5px 0 0 #b8321e)
          drop-shadow(0 1.5px 0 #b8321e) drop-shadow(0 -1.5px 0 #b8321e)
          drop-shadow(0 2px 4px rgba(20, 14, 30, 0.5));
}

/* 길찾기 앱 고르기 */
.nav-app-dest {
  font-size: var(--fs-base);
  color: var(--text-secondary);
  margin: 0 0 12px;
  text-align: center;
}
.nav-app-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.nav-app-choice {
  position: relative;
  min-height: 56px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: var(--r-sm);
  font-size: var(--fs-base);
  font-weight: 700;
  cursor: pointer;
}
.nav-app-last {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 500;
  opacity: 0.75;
  margin-top: 2px;
}

/* 그 앱이 무엇까지 되는지 미리 알려 주는 꼬리표 (지금은 구글지도만) */
.nav-app-note {
  display: block;
  font-size: var(--fs-xxs);
  font-weight: 600;
  opacity: 0.7;
  margin-top: 2px;
  white-space: nowrap;
}

/* ⚠️ 구글이 우리나라에서 자동차 길을 못 알려 준다는 안내. 지우지 마십시오 (5-o ③-c) */
.nav-app-hint {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(212, 175, 55, 0.35);
  background: rgba(212, 175, 55, 0.08);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  line-height: 1.6;
  word-break: keep-all;
}
.nav-app-hint:empty { display: none; }

/* 눌러야만 넘어가는 알림 단추 (저절로 열면 방금 연 앱을 덮어씁니다) */
.toast-action-btn {
  text-decoration: none;
  text-align: center;
}

/* ── 노선도 ↔ 지도 전환 ─────────────────────────────────────── */
.map-mode-switch {
  display: flex;
  gap: 6px;
  margin: 0 0 8px;
  padding: 4px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.05);
  width: fit-content;
}
.map-mode-btn {
  min-height: 38px;
  padding: 0 18px;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
}
.map-mode-btn.active {
  background: var(--accent-gold);
  color: var(--on-gold);
}

/* ── 순례 여정 (RPG 여정 지도) ─────────────────────────────────
   1단계: 고장(관문) 고르기 → 2단계: 거점을 지그재그 길로 이은 여정 지도.
   좌표가 아니라 배치라서 겹칠 일이 없습니다. */
.route-map {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow-y: auto;
  /* ⚠️ 2026-09-13. #171327 로 늘 짙은 남색이라 밝은 화면에서 이 판만 어둡게 남았습니다. */
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(212, 175, 55, 0.10), transparent 60%),
    rgba(var(--panel-2-rgb), 1);
  padding: 12px 12px 16px;
  -webkit-overflow-scrolling: touch;
}
/* 여정을 볼 때는 지도와 그 위 장식들을 감춥니다 */
.map-wrapper.route-mode .route-map { display: block; }
.map-wrapper.route-mode #map,
.map-wrapper.route-mode .rpg-hud-container,
.map-wrapper.route-mode .map-filter-panel,
.map-wrapper.route-mode .gps-simulator-panel,
.map-wrapper.route-mode .map-calibration-panel { display: none; }
/* ⚠️ 「전장의 안개」(#fog-container-div)는 z-index 900 으로 지도 위를 덮습니다.
   여정을 볼 때 이걸 안 끄면 글자가 어둡게 죽습니다. 실제로 그렇게 보였습니다.
   JS 가 만드는 요소라 인라인 style 을 이기려면 !important 가 필요합니다. */
.map-wrapper.route-mode #fog-container-div,
/* 한지 질감 오버레이도 JS 가 인라인 style 로 display 를 지정하므로 !important 가 필요합니다 */
.map-wrapper.route-mode .hanji-overlay { display: none !important; }

/* ⚠️ 지도용 안쪽 그림자(inset)를 그대로 두면 여정 글자가 가장자리에서 어둡게 죽습니다 */
.map-wrapper.route-mode {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* ⚠️ 지도/여정 높이를 38vh 처럼 어림잡으면 화면이 조금만 낮아도
   아래 「가까운 성지」 카드가 하단 탭에 잘립니다.
   위아래에 반드시 필요한 자리(맨 위 띠 · 제목 · 카드 · 하단 탭 ≈ 540px)를 빼고
   남는 만큼만 지도가 쓰도록 계산합니다. */
#view-map .map-wrapper {
  height: clamp(200px, calc(100vh - 540px), 420px);
  height: clamp(200px, calc(100dvh - 540px), 420px);   /* 아이폰 — .app-container 설명 */
}
/* 미사 참례 띠가 떠 있는 동안에는 지도가 그만큼 물러섭니다 (app.js 의 setCheckinBarSpace) */
#view-map.has-checkin .map-wrapper {
  height: clamp(150px, calc(100vh - 620px), 340px);
  height: clamp(150px, calc(100dvh - 620px), 340px);
}
#view-map .shrine-cards { margin-top: 0; }

/* ── 1단계: 순례길 고르기 ── */
.quest-gate-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 2px 12px;
}
.quest-gate-lead {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 650;
  color: var(--text-primary);
}
.quest-gate-summary {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}
.quest-gate-grid {
  display: grid;
  /* ⚠️ 2026-09-18. 전에는 넓은 화면에서 두 칸이었습니다. 이제 카드 안에 거점
     이름이 죽 들어가므로 두 칸으로 쪼개면 이름이 서너 줄로 접힙니다.
     늘 한 칸입니다 — 위에서 아래로 훑으면 54곳이 다 지나갑니다. */
  grid-template-columns: 1fr;
  gap: 8px;
}
.quest-gate-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
  /* 손가락으로 누르는 자리이므로 넉넉히 */
  /* ⚠️ 2026-09-18. 카드가 열둘이라 한 장이 10px 만 두꺼워져도 한 화면이 더 밀립니다.
     안쪽 여백을 줄여 열두 길이 두어 번 밀기에 다 지나가게 했습니다. */
  min-height: 62px;
  padding: 9px 12px 8px 15px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-color);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(var(--panel-2-rgb), 0.94));
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.quest-gate-card::before {
  content: '';
  position: absolute;
  inset: 12px auto 12px 0;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: color-mix(in srgb, var(--line) 58%, var(--accent-gold));
  opacity: 0.9;
}
.quest-gate-card:hover { border-color: rgba(212, 175, 55, 0.48); }
.quest-gate-card:active { transform: translateY(1px); }
.quest-gate-card.here {
  border-color: rgba(212, 175, 55, 0.56);
  background: linear-gradient(145deg, rgba(212, 175, 55, 0.10), rgba(var(--panel-2-rgb), 0.94));
}
.quest-gate-card.cleared { border-color: rgba(212, 175, 55, 0.42); }
.quest-gate-name {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-primary);
}
/* ⚠️ 2026-09-13. 여정 화면 바탕이 화면을 따라가게 되면서, 지역 이름에 쓰던
   형광빛(서울 #FF6B6E · 충청 #FFD700 …)이 밝은 화면에서 1.3:1 로 안 읽힙니다.
   그 색은 관문 그림(테두리·점)에 그대로 남겨 지역 구분을 지키고,
   «이름 글자»만 먹빛으로 바꿉니다. ROUTE_REGION_COLOR 는 건드리지 마십시오. */
[data-theme="light"] .quest-gate-name { color: var(--text-primary); }
/* ⚠️ 코스 이름이 「서울 순교 혈맥의 길」처럼 깁니다. 줄이 넘치면 줄바꿈합니다. */
.quest-gate-name { min-width: 0; flex: 1 1 auto; line-height: 1.35; }
.quest-gate-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 거점 이름 띠 — 코스 안의 성지를 차례대로 늘어놓습니다.
   ⚠️ 이름 앞의 작은 동그라미가 「거점」입니다. 순례한 곳은 색이 차고,
      아직 안 간 곳은 테두리만 남습니다. 지금 가장 가까운 곳에는 금빛 테가 집니다. */
.quest-gate-stops {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 9px;
  row-gap: 3px;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--text-secondary);
}
.qg-stop {
  position: relative;
  padding-left: 10px;
  white-space: nowrap;
}
.qg-stop::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}
.qg-stop.visited {
  color: var(--text-primary);
  font-weight: 650;
}
.qg-stop.visited::before {
  background: var(--line);
  border-color: var(--line);
}
.qg-stop.here::before {
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.38);
}
.quest-clear-mark { color: var(--accent-gold); }
.quest-gate-count {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}
.quest-gate-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 20px;
}
.quest-gate-bar {
  display: block;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-secondary) 18%, transparent);
  overflow: hidden;
}
.quest-gate-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent-gold);
}
.quest-here-tag {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: var(--fs-xxs);
  font-weight: 700;
  background: rgba(212, 175, 55, 0.14);
  color: var(--accent-gold);
  border: 1px solid rgba(212, 175, 55, 0.32);
}

@media (max-width: 560px) {
  .quest-gate-card { min-height: 58px; }
  .quest-gate-head { align-items: flex-start; }
  .quest-gate-summary { padding-top: 2px; }
}

/* ── 2단계: 여정 지도 ── */
.quest-map-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.quest-back {
  min-height: 34px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(212, 175, 55, 0.45);
  background: rgba(255, 255, 255, 0.05);
  color: var(--accent-gold);
  font-size: var(--fs-md);
  font-weight: 600;
  cursor: pointer;
}
.quest-region-title { font-size: var(--fs-lg); font-weight: 700; }
.quest-region-progress {
  margin-left: auto;
  font-size: var(--fs-md);
  color: var(--text-secondary);
}

.quest-track { position: relative; }
.quest-path {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

/* ── 걸어온 길 · 남은 길 ────────────────────────────────────
   ⚠️ 「걸어온 길」은 두 거점을 **모두** 순례했을 때만 그립니다 (app.js 의 segs).
      한쪽만 갔다면 아직 이어 걷지 않은 것입니다. */
.quest-seg { stroke-linecap: round; stroke-linejoin: round; }

/* 걸어온 길 — 또렷한 금빛 실선
   ⚠️ stroke 는 app.js 가 지역 색으로 넣지만, CSS 가 표현 속성을 이깁니다.
      지역 색(빨강·주황 등) 그대로 두면 굵은 빗금이 눈을 찌릅니다.
      걸어온 길은 어느 지역이든 금빛으로 통일합니다. 지역 색은 남은 길에 남습니다. */
.quest-seg.walked {
  stroke: var(--accent-gold);
  stroke-width: 2.2;
  opacity: 0.92;
  filter: drop-shadow(0 0 4px rgba(216, 174, 106, 0.55));
  /* 위에서 아래로 그려집니다 */
  stroke-dasharray: var(--len, 100);
  stroke-dashoffset: var(--len, 100);
  animation: quest-draw 0.42s ease-out forwards;
  animation-delay: calc(var(--i, 0) * 0.08s);
}
@keyframes quest-draw { to { stroke-dashoffset: 0; } }

/* 남은 길 — 흐린 점선 */
.quest-seg.todo {
  stroke-width: 1.6;
  stroke-dasharray: 2 7;
  opacity: 0;
  animation: quest-fade 0.42s ease-out forwards;
  animation-delay: calc(var(--i, 0) * 0.08s);
}
@keyframes quest-fade { to { opacity: 0.34; } }

/* ⚠️ 움직임을 줄이기로 한 기기에서는 기다림 없이 바로 제자리에 있어야 합니다.
      animation 만 끄면 dashoffset 이 그대로 남아 걸어온 길이 아예 사라집니다.
      그래서 최종 상태를 직접 적어 둡니다. */
@media (prefers-reduced-motion: reduce) {
  .quest-seg.walked { animation: none; stroke-dashoffset: 0; }
  .quest-seg.todo { animation: none; opacity: 0.34; }
}
.quest-node {
  position: absolute;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 좁은 화면에서도 옆 거점과 안 부딪히게 폭을 묶어 둡니다 */
  width: min(126px, 40vw);
}
.quest-node-btn {
  position: relative;
  /* 손가락으로 누르는 자리이므로 44px 이상 */
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 3px solid var(--line);
  background: #231c14;
  padding: 0;
  cursor: pointer;
}
.quest-node-medal {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  /* 아직 순례하지 않은 거점은 빛이 죽어 있습니다 */
  filter: grayscale(1) brightness(0.5);
  opacity: 0.75;
}
.quest-node.visited .quest-node-btn {
  border-color: var(--accent-gold);
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.55);
}
.quest-node.visited .quest-node-medal { filter: none; opacity: 1; }
.quest-node-seal {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-gold);
  color: var(--on-gold);
  font-size: var(--fs-md);
  font-weight: 900;
  line-height: 22px;
}
/* 지금 내가 서 있는 거점 위의 순례자 */
.quest-node-avatar {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--accent-gold);
  /* 여정의 작은 거점에서는 전신보다 얼굴과 차림을 알아보기 쉬운 상반신이 낫습니다.
     원본은 그대로 두고 원형 안에서만 위쪽을 당겨 보여 줍니다. */
  background-size: 150% auto;
  background-position: center 12%;
  background-repeat: no-repeat;
  background-color: var(--panel-2);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.8);
}
.quest-node.current .quest-node-btn {
  outline: 3px solid var(--accent-gold);
  outline-offset: 3px;
}
.quest-node-label {
  margin-top: 5px;
  text-align: center;
  line-height: 1.25;
}
.quest-node-name {
  display: block;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-primary);
  word-break: keep-all;
}
.quest-node.visited .quest-node-name { color: var(--accent-gold); }
.quest-node-sub {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  word-break: keep-all;
}

/* 화면이 낮은 기기(아이폰 SE 등)에서는 제목 아래 설명을 접어 카드 자리를 냅니다 */
@media (max-height: 700px) {
  #view-map .view-header h2 { font-size: var(--fs-xl); margin-bottom: 0; }
  .map-mode-switch { margin-bottom: 4px; }
  .map-mode-btn { min-height: 34px; }
  /* 낮은 화면에서는 카드도 한 단 낮춥니다 (단추는 44px 을 지킵니다) */
  #view-map .map-wrapper { height: clamp(150px, calc(100vh - 505px), 420px); height: clamp(150px, calc(100dvh - 505px), 420px); }
  #view-map.has-checkin .map-wrapper { height: clamp(110px, calc(100vh - 585px), 340px); height: clamp(110px, calc(100dvh - 585px), 340px); }
  /* 화면이 짧으면 띠도 몸을 줄입니다 */
  .mass-checkin-bar { padding: 8px 12px; gap: 8px; }
  .mass-checkin-text strong { font-size: var(--fs-md); }
  .mass-checkin-text span { font-size: var(--fs-sm); }
  .mass-checkin-btn { font-size: var(--fs-sm); padding: 0 10px; }
  .shrine-cards { margin-top: 6px; }
  .shrine-cards-head { padding-bottom: 4px; }
  .shrine-card { padding: 9px 11px 10px; }
  .shrine-card-meta { margin: 5px 0 8px; }
}

/* ── 속 탭 ─────────────────────────────────────────────────────
   한 화면에 3000px 넘게 쌓여 있던 것을 셋으로 나눕니다. */
.subtab-bar {
  display: flex;
  gap: 4px;
  margin: 0 0 16px;
  padding: 4px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.05);
}
.subtab-btn {
  flex: 1;
  /* 손가락으로 누르는 자리이므로 44px 이상 */
  min-height: 44px;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
}
.subtab-btn.active {
  background: var(--accent-gold);
  color: var(--on-gold);
}
/* 탭 화면 자체에는 테두리를 주지 않습니다 — 안에 이미 카드가 있습니다 */
.subtab-panel:focus { outline: none; }
.subtab-panel:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 4px; border-radius: var(--r-sm); }

/* 순례 수첩 — 아직 못 모은 도장은 접어 둡니다 */
.stamp-toggle {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 14px;
  border-radius: var(--r-sm);
  border: 1px dashed rgba(212, 175, 55, 0.45);
  background: transparent;
  color: var(--accent-gold);
  font-size: var(--fs-md);
  font-weight: 600;
  cursor: pointer;
}
.stamp-empty-note {
  margin: 12px 0 0;
  font-size: var(--fs-md);
  color: var(--text-secondary);
  text-align: center;
}
#stamp-grid-locked { margin-top: 12px; }

/* 성인으로 가는 길 — 27단계는 접어 두고 지금·다음 등급만 */
.rank-toggle {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 4px 0 12px;
  border-radius: var(--r-sm);
  border: 1px dashed rgba(212, 175, 55, 0.45);
  background: transparent;
  color: var(--accent-gold);
  font-size: var(--fs-md);
  font-weight: 600;
  cursor: pointer;
}

/* ⚠️ display 를 지정한 요소에는 hidden 속성이 먹지 않습니다.
   (.stamp-grid{display:grid} · .roadmap-step{display:flex} 가 [hidden]{display:none} 을 이깁니다)
   접었는데도 그대로 보이던 원인이었습니다. */
.stamp-grid[hidden],
.roadmap-step[hidden],
.subtab-panel[hidden],
.quest-gate[hidden],
.quest-map[hidden] { display: none !important; }

/* 개발자 도구 스위치 (설정) */
.dev-tools-card {
  margin: 16px 0;
  padding: 16px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(var(--line-rgb), 0.08);
}
.dev-tools-card h3 { margin: 0 0 6px; font-size: var(--fs-lg); color: var(--accent-gold); }
.dev-tools-desc { margin: 0 0 12px; font-size: var(--fs-md); color: var(--text-secondary); line-height: 1.5; }
.dev-tools-btn {
  width: 100%;
  min-height: 44px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(212, 175, 55, 0.45);
  background: transparent;
  color: var(--accent-gold);
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
}
.dev-tools-btn.active { background: var(--accent-gold); color: var(--on-gold); }
/* ⚠️ 밝은 화면의 「오늘 이 길 마치기」(7일 훈련 단추, .active 아니기 전 상태)가
   금색 옅은 바탕(rgba(216,174,106,0.12)) 위에서 --accent-gold 글자로 4.43:1 —
   기준(4.5) 미달이었습니다. --accent-gold 자체는 다른 시험이 정확한 값(#8a6a1f)을
   지키고 있어 여기서 못 바꾸므로, 이미 밝은 화면용으로 마련해 둔 더 짙은 금색
   (--gold-grad-end, #6f5410)을 이 단추 글자에만 씁니다 (바탕 기준 6.4:1). */
[data-theme="light"] .dev-tools-btn:not(.active) { color: var(--gold-grad-end); }
/* JS 가 만드는 요소가 아니지만, .gps-simulator-panel 에 display 가 걸려 있으면 hidden 이 먹지 않습니다 */
.gps-simulator-panel[hidden] { display: none !important; }

/* ── 오늘의 신앙생활 ────────────────────────────────────────── */
.today-view-header { margin-bottom: var(--space-lg); }
.today-stack { display: flex; flex-direction: column; gap: var(--space-lg); padding-bottom: var(--space-xl); }
/* ⚠️ 2026-08-30 — 「B의 붓선」. 오늘 화면의 카드 상자를 걷어냈습니다.
      금 테두리 상자 다섯 개가 전부 같은 무게로 쌓여 아무것도 도드라지지 않았습니다.
      이제 구획은 위쪽 붓선(가는 금 실선) 하나로만 나눕니다.
      상자를 되살리고 싶으면 여기만 되돌리면 됩니다 — HTML 은 안 건드렸습니다. */
.today-card {
  padding: var(--space-lg) 2px;
  border: none;
  border-top: 1px solid rgba(var(--hanji-rgb), 0.12);
  border-radius: 0;
  background: transparent;
}
/* 첫 카드는 화면 제목 바로 아래라 붓선이 겹으로 보입니다. 하나만 둡니다. */
/* ⚠️ 2026-09-19 — 맨 앞에 미사 참례 띠(div, 평소 숨김)가 생겨 :first-child 가 안 맞았습니다.
   첫 «카드»(section)를 고릅니다. */
.today-stack > .today-card:first-of-type { border-top: none; padding-top: var(--space-sm); }
.today-card-head { display: flex; align-items: flex-start; gap: var(--space-md); }
.today-card-icon { flex: 0 0 auto; font-size: var(--fs-xl); line-height: 1.3; }
.today-card-head > div { min-width: 0; flex: 1; }
.today-card h3 { margin: 0 0 6px; color: var(--accent-gold); font-size: var(--fs-lg); }
.today-card-head p { margin: 0; color: var(--text-secondary); font-size: var(--fs-md); line-height: 1.6; word-break: keep-all; }
.today-card blockquote { margin: var(--space-lg) 0 var(--space-sm); font-family: var(--font-serif); font-size: var(--fs-xl); font-weight: 700; line-height: 1.7; text-align: center; word-break: keep-all; }
.today-source, .today-meta { margin: var(--space-sm) 0 0; color: var(--text-secondary); font-size: var(--fs-xs); line-height: 1.55; }
/* 오늘의 말씀 — 접어 둔 묵상·질문·기도·저녁 (2026-09-02, 90일치가 되면서 생김) */
.today-word-more { margin: var(--space-sm) 0 0; }
.today-word-more > summary { cursor: pointer; min-height: 44px; line-height: 44px; font-size: var(--fs-sm); color: var(--accent-gold); }
.today-word-more p, .today-word-more li { margin: 6px 0; color: var(--text-secondary); font-size: var(--fs-md); line-height: 1.65; word-break: keep-all; }
.today-word-more ul { margin: 4px 0; padding-left: 18px; }
.today-word-more .today-word-prayer { color: var(--text-primary); font-family: var(--font-serif); }
.today-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); margin-top: var(--space-md); }
.today-primary-btn,
.today-secondary-btn,
.today-link-btn {
  min-height: 46px;
  padding: 10px 14px;
  border-radius: 999px;   /* 상자를 걷어냈으니 단추는 알약꼴로 — 붓선과 한 짝입니다 */
  border: 1px solid rgba(var(--hanji-rgb), 0.26);
  font-size: var(--fs-md);
  font-weight: 700;
  cursor: pointer;
}
.today-primary-btn { background: var(--accent-gold); color: var(--on-gold); border-color: var(--accent-gold); }
.today-secondary-btn { background: rgba(216,174,106,.09); color: var(--text-primary); }
.today-link-btn { display: flex; align-items: center; justify-content: center; background: transparent; color: var(--accent-gold); text-decoration: none; }
.today-primary-btn.wide,
.today-secondary-btn.wide,
.today-link-btn.wide { width: 100%; margin-top: var(--space-md); }
.today-secondary-btn.completed { color: var(--accent-gold); cursor: default; opacity: .82; }

/* ── 낙관 (2026-08-30 「먹과 한지」) ─────────────────────────
   ⚠️ 순교자의 붉음 한 점입니다. 오늘 화면 제목 옆 하나,
      「실천했어요」의 작은 인주 하나 — 그 이상 쓰지 마십시오. */
.today-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: 10px;
  transform: rotate(-2deg);
  flex-shrink: 0;   /* h2 가 flex 축이 되었으니 도장 크기는 그대로 고정 */
}
/* ⚠️ 이 도장은 큰 제목(h2, --fs-2xl) 속에 있습니다. 안의 그림을
   .ui-icon 처럼 글줄에 맡겨 두면, 큰 글자가 만드는 줄 높이 때문에
   그림이 밑으로 처져 상자 밖으로 삐져나옵니다 — .hd-ico 와 같은
   이유로, 그림 상자를 스스로 flex 로 가운데 맞춰야 합니다.
   ⚠️ 2026-09-06. CSS 사각형(단색/그러데이션)+선 아이콘 조합에서, 실제로
   붓으로 찍어 그린 낙관 그림(icon_todayseal.webp) 한 장으로 바꿨습니다.
   인주 빛깔·눌린 자국·안쪽 십자가가 다 그림 안에 있으니 배경색을 더
   안 칠합니다. */
.today-seal-ico { display: block; width: 100%; height: 100%; object-fit: contain; }
.today-seal-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  background: var(--seal-red);
  border-radius: var(--r-xs);
  vertical-align: -1px;
}

.today-virtues { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-lg); }
.today-virtue-row { display: flex; justify-content: space-between; gap: var(--space-md); font-size: var(--fs-md); line-height: 1.45; }
.today-virtue-row strong { color: var(--text-primary); text-align: right; }
.today-virtue-row small { color: var(--accent-gold); font-size: var(--fs-xs); }
.today-recommendation { margin-top: var(--space-md); padding: var(--space-md); border-radius: var(--r-sm); background: rgba(216,174,106,.075); color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.65; white-space: pre-line; }
/* ── 「오늘 → 현재 동행」 세 얼굴 ────────────────────────────────
   ⚠️ 2026-09-04. 전에는 «이름만» 적힌 <dl> 목록이었습니다 (.today-companions).
      순례자·멘토·동반자 그림이 지도(순례할 때)와 배낭에만 나와서, 매일 여는
      첫 화면에는 얼굴이 하나도 없었습니다. 그림 셋을 나란히 세웁니다.
   ⚠️ 셋을 «똑같이» 그리되 자리는 다릅니다 — 이름표(나·멘토·동반자)를 지우지 마십시오.
      멘토는 본받을 분, 동반자는 청하는 분, 순례자는 나입니다.
   ⚠️ 가로:세로는 «한지 조각» 비율(≈46:56)을 지킵니다. 정사각으로 만들면
      뜯은 가장자리가 찌그러집니다. */
.today-faces {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin: var(--space-lg) 0 0;
}
.today-face { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.today-face-card {
  width: 100%;
  max-width: 84px;
  aspect-ratio: 46 / 56;
  border-radius: 10%/8%;
  overflow: hidden;
  /* ⚠️ 2026-09-07. francisco: "동반자는 왜 배경색이 달라?" — 날개 편 동반자
     그림은 카드 네 귀퉁이에 투명한 자리가 남는데, 예전엔 그 자리를 고정된
     검정 반투명(rgba(0,0,0,.35))으로 채워서 밝은 화면에서 카드마다 다른
     회색 상자처럼 튀어 보였습니다(캐릭터·멘토는 그림이 칸을 꽉 채워 안
     보였을 뿐). 다른 «판» 요소와 같은 화면별 색(--panel-2)으로 바꿔
     밝은/어두운 화면 모두에서 배경과 자연스럽게 어울리게 했습니다. */
  background: var(--panel-2);
  border: 1px solid rgba(216,174,106,.28);
  display: flex; align-items: center; justify-content: center;
}
.today-face-card img { width: 100%; height: 100%; object-fit: cover; }
/* ── 순례자·앞선 순례자는 «상반신»으로, 얼굴 크기를 맞춰서 (2026-09-11) ──
   ⚠️ francisco: "나 위에 남자 여자 그림 상반신으로 하면 어때 너무 작아서 안보여"
      이어서: "얼굴 크기가 통일감이 없어 상반신을 앞선순례자 80%정도로 바꾸면 어때?"
      순례자 여섯 장(pilgrim_*.webp)과 앞선 순례자 세 장(mentor_*.webp)은 모두
      480×640 그림이지만 «그려진 크기»가 다릅니다 — 순례자는 머리끝부터 발끝까지
      다 들어간 전신이고, 앞선 순례자는 허리 위만 그린 반신입니다. 그래서 같은
      배율로 당기면 순례자 얼굴이 앞선 순례자의 절반밖에 안 됩니다.
   ⚠️ 잰 값 (그림 높이에 대한 얼굴 높이):
        순례자 여섯 장 ≈ 8%   ·   앞선 순례자 세 장 ≈ 13%
      그래서 순례자를 2.6배, 앞선 순례자를 2.0배 당겨
      «나 = 앞선 순례자의 80%» 가 되게 맞췄습니다 (8×2.6 : 13×2.0 = 0.8).
   ⚠️ 그림 파일은 한 장도 새로 만들지 않았습니다. 원본이 480px 폭이라
      2.6배로 당겨도 칸(84px)보다 ≈2.2배 커서 흐려지지 않습니다.
   ⚠️ width 가 «얼마나 당기나», top 이 «얼굴을 어디에 두나» 입니다.
      얼굴이 칸 높이의 40% 쯤에 오도록 그림마다 top 을 따로 잡았습니다 —
      삿갓·너울·갓·족두리가 저마다 높이가 달라 한 값으로는 맞출 수 없습니다.
      값을 고치실 때에는 아홉 장을 «모두» 눈으로 확인하십시오.
   ⚠️ 동반자(.is-companion)에는 넣지 마십시오. 성령·수호천사·성모님·미카엘
      그림(420×363)은 이미 반신이라, 또 당기면 얼굴이 칸 밖으로 잘려 나갑니다. */
.today-face-card { position: relative; }
.today-face-card.is-me img,
.today-face-card.is-mentor img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: auto;
  object-fit: fill;          /* 세로를 늘이지 않고 원래 비율 그대로 */
}
/* 순례자 여섯 장 — 2.6배 */
.today-face-card.is-me img { width: 260%; top: -12.8%; }
.today-face-card.is-me img[src$="pilgrim_male_gat.webp"]      { top: -10.0%; }
.today-face-card.is-me img[src$="pilgrim_female_hood.webp"]   { top:  -7.1%; }
.today-face-card.is-me img[src$="pilgrim_female_jangot.webp"] { top:   0.0%; }
/* 앞선 순례자 세 장 — 2.0배 */
.today-face-card.is-mentor img { width: 200%; top: -21.5%; }
.today-face-card.is-mentor img[src$="mentor_agnes.webp"]  { top: -17.1%; }
.today-face-card.is-mentor img[src$="mentor_thomas.webp"] { top: -20.4%; }
.today-face-empty { color: var(--text-secondary); font-size: var(--fs-lg); }
/* 2026-09-22 francisco: "나이트 모드에서 동반자 배경이 검은색이야" —
   동반자 그림(성령·수호천사·미카엘·성모님)은 바탕이 투명해서, 어두운 화면에서는
   칸 바탕(--panel-2)이 검게 비쳤습니다. 나·앞선 순례자 그림은 한지색 바탕이 그림에 들어 있으므로,
   동반자 칸도 같은 한지색을 깔아 세 칸을 맞춥니다 (밝은/어두운 화면 모두 같은 색). */
.today-face-card.is-companion { background: #fcf0e2; }
.today-face-role {
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: var(--fs-xs);
}
.today-face-name {
  color: var(--text-primary);
  font-size: var(--fs-sm);
  line-height: 1.35;
  word-break: keep-all;
}
/* 「오늘 어울리는 기도」는 얼굴 줄 아래 한 줄로 */
.today-combo-line {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm);
  margin: var(--space-md) 0 0;
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(var(--line-rgb), .06);
  font-size: var(--fs-sm);
}
.today-combo-line span { color: var(--text-secondary); }
.today-combo-line strong { color: var(--text-primary); word-break: keep-all; text-align: right; }
.today-pilgrimage-action { border-color: rgba(72,201,176,.38); }
.view-header-action {
  /* ⚠️ 40px 로 두었더니 실제로 41px 로 그려졌습니다. 손가락으로 누르는 것은
        44px 이상이어야 합니다 — 앱의 다른 단추는 다 44px 입니다.
        (`.agents/tapsize.js` 가 44px 밑인 단추를 잡아냅니다) */
  min-height: 44px;
  margin-top: var(--space-md);
  padding: 8px 12px;
  border: 1px solid rgba(216,174,106,.35);
  border-radius: var(--r-sm);
  background: rgba(216,174,106,.07);
  color: var(--accent-gold);
  cursor: pointer;
}

/* ── 기도 · 영성훈련 허브 ───────────────────────────────────── */
.spiritual-hub { margin-bottom: var(--space-xl); }
.spiritual-hub > h2 { margin: 0 0 var(--space-md); font-size: var(--fs-xl); color: var(--accent-gold); }
.spiritual-section {
  position: relative; margin: var(--space-md) 0; padding: var(--space-lg); border-radius: var(--r-md);
  border: 1px solid rgba(216,174,106,.22); background: rgba(255,255,255,.035);
}
.focus-help { position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:50%; border:1px solid rgba(216,174,106,.4); background:transparent; color:var(--accent-gold); }
.focus-dots { color: var(--accent-gold); letter-spacing: 5px; font-size: var(--fs-xl); }
.focus-value { font-weight: 700; color: var(--text-primary) !important; }
.spiritual-section summary { cursor:pointer; font-weight:700; color:var(--accent-gold); }
.spiritual-section[open] summary { margin-bottom:12px; }
.spiritual-section > h3 { margin: 0 0 var(--space-sm); color: var(--accent-gold); }
.journal-prayers { margin: 0 0 var(--space-md); color:var(--text-secondary); font-size: var(--fs-md); line-height: 1.6; }
.heart-choice-grid, .spiritual-menu-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.heart-choice-grid button, .spiritual-menu-grid button {
  min-height:46px; padding:9px; border-radius: var(--r-sm); border:1px solid rgba(216,174,106,.25);
  background: var(--panel); color:var(--text-primary); font-size: var(--fs-sm);
}
.official-prayer-source {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-xxs);
  line-height: 1.35;
  color: var(--text-secondary);
  font-weight: 400;
}
.eucharistic-adoration-modal { max-width: 520px; }
.eucharistic-adoration-modal .modal-body { padding: 24px 20px; text-align: center; }
.eucharistic-adoration-flow { min-height: 330px; display: flex; flex-direction: column; justify-content: center; }
.adoration-step-label,
.adoration-guide-label { color: var(--text-secondary); font-size: var(--fs-sm); }
.adoration-step-label { margin: 0 0 18px; }
.adoration-lead { margin: 0 0 var(--space-md); font-size: var(--fs-lg); line-height: 1.75; color: var(--text-primary); }
.adoration-place,
.adoration-companion,
.adoration-mentor,
.adoration-caution { padding: 9px 12px; border-radius: var(--r-sm); font-size: var(--fs-md); line-height: 1.55; }
.adoration-place { color: var(--accent-gold); background: rgba(212,175,55,.1); }
.adoration-caution { color: var(--text-secondary); background: rgba(255,255,255,.035); }
.adoration-companion,
.adoration-mentor { color: var(--text-primary); background: rgba(255,255,255,.05); }
.adoration-place,
.adoration-companion,
.adoration-mentor,
.adoration-caution { margin-top: var(--space-sm); }
.adoration-duration { margin: 18px 0 14px; padding: 14px; border: 1px solid rgba(212,175,55,.3); border-radius: var(--r-sm); }
.adoration-duration legend { padding: 0 7px; color: var(--accent-gold); font-size: var(--fs-md); }
.adoration-choice-grid,
.adoration-sharing-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
.adoration-choice-grid button,
.adoration-sharing-grid button,
.silence-choice button,
.adoration-official-link { min-height: 44px; border: 1px solid rgba(212,175,55,.3); border-radius: var(--r-sm); background: var(--panel); color: var(--text-primary); cursor: pointer; }
.adoration-choice-grid button.active,
.adoration-sharing-grid button.active,
.silence-choice button.active { border-color: var(--accent-gold); background: rgba(212,175,55,.18); color: var(--accent-gold); }
/* ⚠️ 2026-09-06. 밝은 화면에서는 --accent-gold 자체가 짙어서(#7f611c), 옅은 금빛
   바탕(rgba(212,175,55,.18)) 위에 올리면 4.28:1 로 기준(4.5)에 살짝 못 미쳤습니다.
   .dev-tools-btn 때와 같은 방법 — 밝은 화면에서만 한 단 더 짙은 --gold-grad-end 로. */
[data-theme="light"] .adoration-choice-grid button.active,
[data-theme="light"] .adoration-sharing-grid button.active,
[data-theme="light"] .silence-choice button.active { color: var(--gold-grad-end); }
.adoration-official-link { width: 100%; padding: 9px 12px; }
.adoration-silence-screen { display: flex; min-height: 260px; flex-direction: column; align-items: center; justify-content: center; }
.adoration-silence-screen h3 { margin: 0 0 16px; font-size: var(--fs-xl); line-height: 1.7; color: var(--text-primary); }
.adoration-silence-screen p { max-width: 360px; color: var(--text-secondary); line-height: 1.75; }
.adoration-timer { margin-top: 24px; font-size: 2rem; letter-spacing: .08em; color: var(--accent-gold); font-variant-numeric: tabular-nums; }
.adoration-free-prayer { margin: 22px 0 0; padding: 16px; border-left: 3px solid var(--accent-gold); border-radius: var(--r-sm); background: rgba(212,175,55,.08); text-align: left; }
.adoration-free-prayer small { color: var(--text-secondary); }
.adoration-free-prayer p { margin: var(--space-sm) 0 0; line-height: 1.75; }
.adoration-scripture { margin: 10px 0 16px; padding: 18px; border-left: 3px solid var(--accent-gold); background: rgba(212,175,55,.08); font-size: var(--fs-lg); line-height: 1.9; }
.adoration-intention,
.adoration-closing-note { display: block; margin-top: 18px; color: var(--text-secondary); font-size: var(--fs-md); text-align: left; }
.adoration-intention select,
.adoration-closing-note textarea { box-sizing: border-box; display: block; width: 100%; margin-top: 7px; padding: 10px; border: 1px solid rgba(212,175,55,.3); border-radius: var(--r-sm); background: var(--sunken); color: var(--text-primary); }
.adoration-closing-note textarea { min-height: 80px; resize: vertical; }
.adoration-footer { display: flex; flex-direction: row; gap: 8px; }
.adoration-footer .modal-btn { flex: 1 1 0; }
.prayer-recommendation { margin-top:var(--space-md); padding:var(--space-md); border-radius: var(--r-sm); background:rgba(216,174,106,.07); color:var(--text-secondary); font-size: var(--fs-md); line-height:1.6; }
.spiritual-section label { display:block; margin:9px 0; font-size: var(--fs-md); color:var(--text-secondary); }
.spiritual-section textarea, .confession-prep-modal textarea {
  display:block; width:100%; min-height:66px; box-sizing:border-box; margin-top:5px; padding:9px;
  border-radius: var(--r-sm); border:1px solid rgba(216,174,106,.25); background:var(--sunken); color:var(--text-primary); resize:vertical;
}
.meditation-choice-grid { display:grid; gap:8px; }
.meditation-choice-grid button { padding:12px; text-align:left; border-radius: var(--r-sm); border:1px solid rgba(216,174,106,.3); background:rgba(255,255,255,.04); color:var(--text-primary); }
.meditation-flow { min-height:220px; text-align:left; }
.meditation-flow p { margin: var(--space-sm) 0 var(--space-md); line-height: 1.7; }
.meditation-step-label { font-size: var(--fs-xs); color:var(--accent-gold); text-transform:uppercase; }
.meditation-question { font-size: var(--fs-lg); line-height:1.65; color:var(--text-primary); }
.meditation-silence { text-align:center; padding:28px 10px; color:var(--accent-gold); }
.compact-spiritual-modal, .confession-prep-modal { width:min(92%,430px); }
.prayer-context { margin: 0 0 12px; padding: 10px 12px; border: 1px solid rgba(216,174,106,.45); border-radius: var(--r-sm); color: var(--accent-gold); }
.prayer-context button { float: right; border: 0; background: transparent; color: var(--text-secondary); text-decoration: underline; cursor: pointer; }
.prayer-recommendation { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.spiritual-section select { width: 100%; margin: 8px 0 14px; padding: 10px; border-radius: var(--r-xs); border: 1px solid rgba(216,174,106,.35); background: var(--sunken); color: var(--text-primary); }
.shrine-prayer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.shrine-prayer-actions .nav-app-btn { padding: 10px 6px; border-radius: var(--r-xs); border: 1px solid rgba(216,174,106,.35); background: rgba(216,174,106,.06); color: var(--text-primary); }
.meditation-source { font-size: var(--fs-sm); color: var(--text-secondary); }
.meditation-source a { color: var(--accent-gold); }
.confession-examen ul { padding-left: 1.25rem; line-height: 1.7; }
.meditation-prayer { margin: var(--space-md) 0; padding: var(--space-md); border-left: 3px solid var(--accent-gold); background: rgba(216,174,106,.07); line-height: 1.75; }
.silence-choice { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 12px 0; }
.silence-choice button { padding: 10px 4px; border: 1px solid rgba(216,174,106,.4); border-radius: var(--r-xs); background: var(--sunken); color: var(--text-primary); }
.shrine-meditation-suggestion { margin-top: 12px; padding: 12px; border-radius: var(--r-xs); background: rgba(216,174,106,.07); }
.shrine-meditation-suggestion { clear: both; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.shrine-meditation-suggestion.is-done strong { color: var(--accent-gold); font-weight: 600; }
.shrine-meditation-again { min-height: 36px; padding: 0 12px; border: none; background: transparent; color: var(--text-secondary); font-size: var(--fs-sm); text-decoration: underline; cursor: pointer; flex: 0 0 auto; }
.confession-prep-modal .modal-body { line-height: 1.6; }
.confession-examen details { margin: 10px 0; padding: 10px 12px; border: 1px solid rgba(216,174,106,.2); border-radius: var(--r-xs); }
.confession-mode-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.confession-mode-choice button { min-height: 82px; padding: 12px; color: var(--text-primary); background: var(--panel); border: 1px solid rgba(216,174,106,.34); border-radius: var(--r-sm); }
/* ⚠️ 2026-09-06. #101020 을 못박아 뒀더니 밝은 화면의 옅어진 금색(--accent-gold)
   위에서 3.25:1 로 대비 미달이었습니다. --on-gold 는 두 화면에서 이미 「금색
   바탕 위 글자」로 맞춰 둔 색이라(어두운 화면 진한 살구빛, 밝은 화면 흰색) 이걸 씁니다. */
.confession-mode-choice button.active { color: var(--on-gold); background: var(--accent-gold); border-color: var(--accent-gold); }
.confession-mode-choice strong, .confession-mode-choice span { display: block; }
.confession-mode-choice span { margin-top: 5px; font-size: var(--fs-md); }
.confession-commandment-section > h4 { margin: 20px 0 10px; color: var(--accent-gold); }
.confession-examen summary { cursor: pointer; font-weight: 700; line-height: 1.45; }
.confession-examen summary span { float: right; font-size: var(--fs-sm); font-weight: 400; color: var(--text-secondary); }
.confession-examen ul { margin: 10px 0 6px; }
.confession-examen li { margin: 10px 0; }
.confession-examen li label { display: grid; grid-template-columns: 22px 1fr; gap: var(--space-sm); align-items: start; cursor: pointer; line-height: 1.6; }
.confession-examen li input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--accent-gold); }
.confession-examen details.sensitive { border-color: rgba(232,190,121,.42); }
.confession-sensitive-note, .confession-source-note { color: var(--text-secondary); font-size: var(--fs-base); line-height: 1.65; }
.confession-sensitive-note { padding: 10px; background: rgba(255,255,255,.04); border-radius: var(--r-xs); }
.confession-source-link { display: inline-block; margin: 4px 0 8px; font-size: var(--fs-md); }
.confession-selected-summary { margin: 12px 0; padding: 10px; border: 1px solid rgba(216,174,106,.28); border-radius: var(--r-xs); }
.confession-flow-progress { margin: 0 0 16px; color: var(--text-secondary); font-size: var(--fs-sm); }
.confession-flow-progress > span { display: block; margin-bottom: 6px; font-weight: 700; }
.confession-flow-progress > div { height: 5px; overflow: hidden; border-radius: 999px; background: var(--ink-line); }
.confession-flow-progress i { display: block; height: 100%; border-radius: inherit; background: var(--accent-gold); transition: width .25s ease; }
.confession-step-kicker { margin-bottom: 6px; color: var(--accent-gold); font-size: var(--fs-sm); font-weight: 700; }
.confession-single-commandment ul { margin: 12px 0; padding: 0; }
.confession-inline-prayer { margin: 14px 0; padding: 16px; border: 1px solid var(--card-border); border-radius: var(--r-sm); background: var(--card-bg); line-height: 1.8; text-align: left; }
.confession-order-list { margin: 14px 0; padding-left: 1.4rem; line-height: 1.65; }
.confession-order-list li { list-style: decimal; text-align: left; }
.confession-place-label { display: block; margin: 16px 0 6px; color: var(--text-primary); font-weight: 700; }
.confession-place-label span { color: var(--text-secondary); font-size: var(--fs-sm); font-weight: 400; }
.confession-place-input { width: 100%; min-height: 44px; padding: 10px 12px; color: var(--text-primary); background: var(--sunken); border: 1px solid var(--card-border); border-radius: var(--r-xs); font: inherit; }
.confession-flow-footer { gap: 8px; }
.confession-flow-footer .modal-btn { min-width: 0; }
.confession-flow-footer .modal-btn[hidden] { display: none !important; }
@media (max-width: 430px) { .confession-mode-choice { grid-template-columns: 1fr; } }
.privacy-note { padding:10px; border-left:3px solid var(--accent-gold); background:rgba(216,174,106,.07); font-size: var(--fs-md); }
/* ⚠️ 예전에는 520px 아래에서 마음결만 1열로 떨어뜨렸습니다.
   그 한 줄 때문에 단추 아홉 개가 656px를 먹었습니다(주요 기도는 433px).
   두 그리드를 같은 2열로 두면 단추는 그대로 아홉 개인데 자리는 절반이 됩니다.
   1열로 되돌리지 마십시오. */
@media (max-width: 520px) {
  .heart-choice-grid, .spiritual-menu-grid { grid-template-columns:1fr 1fr; }
  .heart-choice-grid button { font-size: var(--fs-sm); line-height:1.35; }
}

/* ── 기도 지향 노트 ────────────────────────────────────────────── */
.prayer-section-count {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-secondary);
  margin-left: 6px;
}
.grace-lead {
  margin: 0 0 12px;
  font-size: var(--fs-md);
  color: var(--text-secondary);
  line-height: 1.5;
}
.prayer-empty {
  margin: 12px 0;
  padding: 18px 12px;
  border-radius: var(--r-sm);
  border: 1px dashed rgba(var(--line-rgb), 0.14);
  text-align: center;
  font-size: var(--fs-md);
  color: var(--text-secondary);
}
.prayer-card-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--accent-gold);
  word-break: keep-all;
}
.prayer-card-meta {
  margin: 8px 0 0;
  font-size: var(--fs-md);
  color: var(--text-secondary);
}
.prayer-card-places {
  margin: 4px 0 0;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  word-break: keep-all;
}
.prayer-card-thanks {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--accent-gold);
  border-radius: var(--r-xs);
  background: rgba(212, 175, 55, 0.08);
  font-size: var(--fs-md);
  line-height: 1.6;
  word-break: keep-all;
}
.prayer-card-item.answered { border-color: rgba(212, 175, 55, 0.5); }
.prayer-card-footer { display: flex; gap: 8px; margin-top: 12px; }
.prayer-action-btn {
  flex: 1;
  /* 손가락으로 누르는 자리이므로 44px 이상 */
  min-height: 44px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(212, 175, 55, 0.4);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  font-size: var(--fs-md);
  font-weight: 600;
  cursor: pointer;
}
.prayer-action-btn.primary {
  background: var(--accent-gold);
  border-color: var(--accent-gold);
  color: var(--on-gold);
}
.prayer-action-btn.ghost { flex: 0 0 auto; padding: 0 16px; }
.prayer-card-tools { display: flex; justify-content: flex-end; gap: 4px; margin-top: 8px; }
.prayer-card-tools .prayer-delete-btn { margin-top: 0; }
.prayer-delete-btn {
  margin-top: 8px;
  min-height: 36px;
  padding: 0 12px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  cursor: pointer;
  text-decoration: underline;
}

/* 닫힌 선택기는 어두운 테마를 유지하되, Windows/Edge의 흰색 네이티브
   펼침 목록에서는 밝은 글자가 사라지지 않도록 항목 대비를 명시합니다. */
#prayer-offering-intention option,
.adoration-intention select option {
  background: #ffffff;
  color: #222222;
  -webkit-text-fill-color: #222222;
}

/* ── 미사 참례 · 고해성사 기록 ────────────────────────────────── */
/* ⚠️ 이 띠는 미사 시간대에 성지 가까이 있을 때만 나타납니다.
   display:flex 가 hidden 을 이기므로 [hidden] 규칙을 반드시 함께 둡니다. */
.mass-checkin-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 12px 0;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid rgba(212, 175, 55, 0.55);
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.16), rgba(212, 175, 55, 0.06));
}
.mass-checkin-bar[hidden] { display: none !important; }
/* 「오늘」 화면의 띠 — 카드 사이에 끼므로 바깥 여백을 카드와 맞춥니다 (2026-09-19) */
.today-stack > .mass-checkin-bar { margin: 0; }
.mass-checkin-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.mass-checkin-text strong {
  font-size: var(--fs-base);
  color: var(--accent-gold);
  word-break: keep-all;
}
.mass-checkin-text span {
  font-size: var(--fs-md);
  color: var(--text-secondary);
  word-break: keep-all;
}
.mass-checkin-btn {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--accent-gold);
  background: var(--accent-gold);
  color: var(--on-gold);
  font-size: var(--fs-md);
  font-weight: 700;
  cursor: pointer;
  word-break: keep-all;
}

.record-card {
  margin-bottom: 16px;
  padding: 16px;
  border-radius: var(--r-md);
  border: 1px solid rgba(var(--line-rgb), 0.1);
  background: rgba(255, 255, 255, 0.03);
}
.record-card h3 {
  margin: 0 0 6px;
  font-size: var(--fs-lg);
  color: var(--accent-gold);
}
.record-summary {
  margin: 0 0 6px;
  font-size: var(--fs-md);
  color: var(--text-primary);
  word-break: keep-all;
}
.record-summary.nudge {
  color: #ffcf7a;
}
.record-note {
  margin: 0 0 10px;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-secondary);
  word-break: keep-all;
}
.record-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.record-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.04);
}
/* ⚠️ 2026-09-07. francisco님 결함 신고 #4(P2): 합쳐진 기도 기록 줄을 <details> 로
   펼치면 회차별 성지·시간·지향·메모가 보이게 했습니다. .record-row 의 배경·둥근
   테두리는 그대로 쓰고, <details> 라서 내부가 세로로 쌓이도록 display 만 다시 잡습니다.
   화살표는 새로 만들지 않습니다 — 아래에 이미 있는 전역 규칙
   (details > summary::after, "여닫이 화살표" 단락)이 모든 <summary> 에 그대로 붙습니다. */
.record-row-details {
  display: block;
}
.record-row-details > summary.record-main {
  cursor: pointer;
}
.record-row-details[open] > summary.record-main {
  margin-bottom: 8px;
}
.record-entries {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
}
.record-entries li {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-secondary);
  word-break: keep-all;
  margin-bottom: 4px;
}
.record-entries li:last-child { margin-bottom: 0; }
/* ⚠️ 2026-09-11 — 「그 밖에 N회 더 보기」. 31회차부터도 앱 안에서 읽을 수 있게 한 단추입니다.
   ⚠️ 손가락으로 누르는 자리는 44px 이상이어야 합니다(AGENTS.md 5 · .agents/tapsize.js). */
/* ⚠️ 2026-09-11 — 「이번 주 돌아보기」. 성적표가 아니라 돌아보는 자리입니다.
   못 한 것을 붉게 칠하거나 경고색을 쓰지 마십시오. */
.weekly-lookback { text-align: left; }
.weekly-lead {
  margin: 0 0 8px;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  word-break: keep-all;
}
.weekly-list {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
}
.weekly-list li {
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--text-primary);
  word-break: keep-all;
  margin-bottom: 4px;
}
.weekly-list li:last-child { margin-bottom: 0; }
.weekly-list strong { color: var(--accent-gold); }
.weekly-quiet {
  margin: 0;
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--text-secondary);
  word-break: keep-all;
}

.record-more-li { list-style: none; margin-left: -18px; }
.record-more-btn {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 4px;
  padding: 10px 12px;
  border: 1px dashed rgba(212, 175, 55, 0.32);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--accent-gold);
  font-family: inherit;
  font-size: var(--fs-sm);
  line-height: 1.5;
  cursor: pointer;
  word-break: keep-all;
}
.record-main {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-md);
  line-height: 1.55;
  word-break: keep-all;
}
.record-sub {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-secondary);
}
.record-del {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 10px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  text-decoration: underline;
  cursor: pointer;
}
.record-add-btn {
  width: 100%;
  min-height: 44px;
  margin-top: 12px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(212, 175, 55, 0.4);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  font-size: var(--fs-md);
  font-weight: 600;
  cursor: pointer;
}
.record-add-btn.primary {
  background: var(--accent-gold);
  border-color: var(--accent-gold);
  color: var(--on-gold);
}

/* 미사를 봉헌한 성지 */
.mass-places { margin: 0 0 10px; }
.mass-places-head {
  margin: 0 0 8px;
  font-size: var(--fs-md);
  color: var(--text-secondary);
  word-break: keep-all;
}
.mass-places-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mass-place-chip {
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.45);
  background: rgba(212, 175, 55, 0.1);
  font-size: var(--fs-sm);
  color: var(--text-primary);
  word-break: keep-all;
}

/* 도장에 다는 「미사 봉헌」 표식 */
.stamp-seal-wrap { position: relative; display: inline-block; line-height: 0; }
.stamp-mass-mark {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--accent-gold);
  background: #1e1810;
  font-size: var(--fs-xs);
  line-height: 20px;
  text-align: center;
}

/* 미사 달력에 넣기 */
.mass-cal-note {
  margin: 0 0 12px;
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--text-secondary);
  word-break: keep-all;
}
.mass-cal-list { display: flex; flex-direction: column; gap: 8px; }
.mass-cal-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(212, 175, 55, 0.4);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
}
.mass-cal-when { font-size: var(--fs-base); font-weight: 700; word-break: keep-all; }
.mass-cal-label { font-size: var(--fs-sm); color: var(--text-secondary); word-break: keep-all; }

/* 카드의 「달력」 단추 — 글자 없이 좁게 */
.shrine-card-btn.icon {
  flex: 0 0 auto;
  width: 48px;
  padding: 0;
  font-size: var(--fs-lg);
}
.dev-tools-desc.small { font-size: var(--fs-sm); opacity: 0.85; }

/* 위치 권한 사전 안내 */
.loc-notice-lead { margin: 0 0 10px; font-size: var(--fs-base); word-break: keep-all; }
.loc-notice-list {
  margin: 0 0 12px;
  /* 점을 뺐으니 왼쪽 들여쓰기도 뺍니다 (전역 규칙 참조). 대신 줄 사이를 띄웁니다. */
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.loc-notice-list li {
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--text-primary);
  word-break: keep-all;
}
.loc-notice-privacy {
  margin: 0 0 8px;
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--text-secondary);
  word-break: keep-all;
}
/* ⚠️ .modal-footer 가 세로로 쌓게 되어 있어 단추 둘이 위아래로 붙었습니다.
   여기서만 가로로 되돌립니다. */
.loc-notice-footer {
  display: flex;
  flex-direction: row;
  gap: 8px;
}
.loc-notice-footer .modal-btn { flex: 1 1 0; width: auto; min-width: 0; }
/* 안내 글은 가운데 정렬하면 목록이 들쭉날쭉해 읽기 어렵습니다 */
#modal-location-notice .modal-body { text-align: left; }
#modal-location-notice .ext-link {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.modal-btn.ghost {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(212, 175, 55, 0.35);
  color: var(--text-primary);
}

/* 순례 기록 지키기 */
.backup-btns { display: flex; gap: 8px; }
.backup-btns .dev-tools-btn { flex: 1; }
.dev-tools-btn.link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* 하루 순례 코스 */
.course-card {
  padding: 16px;
  border-radius: var(--r-md);
  border: 1px solid rgba(var(--line-rgb), 0.1);
  background: rgba(255, 255, 255, 0.03);
}
.course-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.course-head h3 { margin: 0; font-size: var(--fs-lg); color: var(--accent-gold); }
.course-count { font-size: var(--fs-md); color: var(--text-secondary); }
.course-summary {
  margin: 0 0 12px;
  font-size: var(--fs-md);
  color: var(--text-primary);
  word-break: keep-all;
}
.course-stops { display: flex; flex-direction: column; gap: 8px; }
.course-stop {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(var(--line-rgb), 0.07);
}
.course-stop.visited { border-color: rgba(212, 175, 55, 0.45); }
.course-num {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--accent-gold);
  color: var(--accent-gold);
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 24px;
  text-align: center;
}
.course-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.course-name { font-size: var(--fs-base); font-weight: 600; word-break: keep-all; }
.course-meta { font-size: var(--fs-sm); color: var(--text-secondary); word-break: keep-all; }
.course-acts { flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; }
.course-btn {
  min-height: 34px;
  padding: 0 10px;
  border-radius: var(--r-xs);
  border: 1px solid rgba(212, 175, 55, 0.35);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.course-btn.primary {
  background: var(--accent-gold);
  border-color: var(--accent-gold);
  color: var(--on-gold);
}
.course-note {
  margin: 12px 0 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-secondary);
  word-break: keep-all;
}

/* 성지 카드의 「코스에 담기」 (📌)
   ⚠️ 예전에는 카드 아래에 글자 단추를 한 줄 더 두었습니다. 카드가 46px 길어져
      단추들이 하단 탭 밑으로 내려가 눌리지 않았습니다. 아이콘으로 한 줄에 넣습니다. */
.shrine-card-btn.icon.course.active {
  border-color: var(--accent-gold);
  background: rgba(212, 175, 55, 0.2);
}

/* 한국 순교자 */
.martyr-card {
  padding: 16px;
  border-radius: var(--r-md);
  border: 1px solid rgba(var(--line-rgb), 0.1);
  background: rgba(255, 255, 255, 0.03);
}
.martyr-search {
  width: 100%;
  min-height: 44px;
  margin: 4px 0 12px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(var(--line-rgb), 0.14);
  background: rgba(0, 0, 0, 0.25);
  color: var(--text-primary);
  font-size: var(--fs-md);
}
.martyr-list { display: flex; flex-direction: column; gap: 6px; }
.martyr-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(var(--line-rgb), 0.07);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.martyr-no {
  flex: 0 0 auto;
  width: 30px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent-gold);
  text-align: right;
}
.martyr-row-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.martyr-row-name { font-size: var(--fs-base); font-weight: 600; word-break: keep-all; }
.martyr-row-meta { font-size: var(--fs-sm); color: var(--text-secondary); word-break: keep-all; }

/* 순교자 한 분 창 */
.martyr-body { text-align: left; }
.martyr-sub {
  margin: 0 0 10px;
  font-size: var(--fs-md);
  color: var(--accent-gold);
  word-break: keep-all;
}
.martyr-summary {
  margin: 0 0 12px;
  font-size: var(--fs-base);
  line-height: 1.75;
  word-break: keep-all;
}
.martyr-episode-wrap {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-left: 3px solid var(--accent-gold);
  border-radius: var(--r-xs);
  background: rgba(212, 175, 55, 0.09);
}
.martyr-episode-wrap[hidden] { display: none !important; }
.martyr-episode-label {
  display: block;
  margin-bottom: 4px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--accent-gold);
}
.martyr-episode { margin: 0; font-size: var(--fs-md); line-height: 1.7; word-break: keep-all; }
/* 「시복과 옛 기록」 · 성지 상세의 「기록으로 남은 것」 — 우리가 쓴 글, 출처를 함께 (2026-09-19) */
.martyr-record-wrap,
.shrine-record-note {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-left: 3px solid var(--text-secondary);
  border-radius: var(--r-xs);
  background: rgba(127, 127, 127, 0.08);
}
.martyr-record-wrap[hidden] { display: none !important; }
.martyr-record-list,
.shrine-record-list { margin: 0; padding-left: 1.1em; }
.martyr-record-list li,
.shrine-record-list li { margin: 0 0 6px; font-size: var(--fs-md); line-height: 1.7; word-break: keep-all; }
.martyr-record-src,
.shrine-record-src { margin: 6px 0 0; font-size: var(--fs-xs); line-height: 1.6; color: var(--text-secondary); word-break: keep-all; }
.martyr-record-src a,
.shrine-record-src a { color: inherit; }
.shrine-record-note { margin-top: 12px; }
.shrine-record-title { margin: 0 0 6px; font-size: var(--fs-sm); font-weight: 700; }
.confession-history-note { font-size: var(--fs-sm); line-height: 1.7; color: var(--text-secondary); word-break: keep-all; }
.martyr-place {
  margin: 0 0 10px;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  word-break: keep-all;
}
.martyr-place[hidden] { display: none !important; }
.martyr-shrines { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.martyr-shrines[hidden] { display: none !important; }
.martyr-shrine-link {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.45);
  background: rgba(212, 175, 55, 0.1);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  cursor: pointer;
  word-break: keep-all;
}
/* ── 「순교의 자리」 ─────────────────────────────────────────────
   ⚠️ 성지 단추(.martyr-shrine-link)와 **다르게 보여야 합니다.**
      금색 알약은 「우리 44곳 성지」의 표시입니다. 여기는 성지가 아니므로
      금색을 쓰지 않습니다. 색을 맞추지 마십시오. */
.martyr-sites { margin-bottom: 12px; }
.martyr-sites[hidden] { display: none !important; }
.martyr-sites-head {
  margin: 0 0 6px;
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.martyr-site-card {
  padding: 10px 12px;
  margin-bottom: 8px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(var(--line-rgb), 0.12);
  background: rgba(255, 255, 255, 0.04);
}

.martyr-site-name {
  margin: 0 0 4px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-primary);
  word-break: keep-all;
}

/* ── 순례자 패 — 등급이 오르면 테두리가 자랍니다 ─────────────────
   ⚠️ 스물일곱 등급을 네 구간으로 묶었습니다 (app.js 의 pilgrimCardTier).
      구간을 바꾸시려면 그 함수와 여기를 함께 고치십시오.
   ⚠️ 구간마다 «눈에 띄게» 달라야 합니다. 색만 살짝 바꾸면 오른 줄 모릅니다.
      무쇠=한 겹 / 은=두 겹 / 금=두 겹+네 귀 / 먼동=거기에 해돋이.
   ⚠️ 2026-09-21 — 등급 딱지(.pilgrim-card-badge)는 걷어냈습니다 (francisco: 「이 아이콘 뭐야」 → 빼기).
      작아서 무슨 그림인지 안 보였고, 옆의 「N번째 길 · 등급」 글자와 겹쳤습니다.
      등급은 테두리 구간과 글자로 보입니다. 아래 .pilgrim-card-badge 규칙은 옛 자리라 남겨 둡니다. */
.pilgrim-card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 12%/9%;
  overflow: visible;
  background: #120e09;
  box-sizing: border-box;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.55);
}
.pilgrim-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  filter: brightness(1.05) contrast(1.02);
  transition: filter 0.3s ease;
}
.pilgrim-card-tint {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  mix-blend-mode: overlay;
  pointer-events: none;
}
/* 테두리는 겹쳐 그립니다 — 그림을 가리지 않게 바깥으로만 자랍니다 */
.pilgrim-card::before,
.pilgrim-card::after {
  content: '';
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}
.pilgrim-card::before { inset: 0; border: 1px solid var(--pc-rim, var(--accent-gold)); }
.pilgrim-card::after  { inset: 3px; border: 0 solid var(--pc-rim, var(--accent-gold)); }

/* 무쇠 — 처음 나선 걸음 (Lv1~9) */
.pilgrim-card.tier-iron { --pc-rim: #8a7358; }

/* 은 — 걸음이 붙었습니다 (Lv10~19) · 테두리가 두 겹 */
.pilgrim-card.tier-silver { --pc-rim: #b2b2b6; }
.pilgrim-card.tier-silver::before { border-width: 2px; }
.pilgrim-card.tier-silver::after  { border-width: 1px; }

/* 금 — 멀리 왔습니다 (Lv20~24) · 네 귀에 금선 */
.pilgrim-card.tier-gold { --pc-rim: var(--gold-grad-end, #d6b260); }
.pilgrim-card.tier-gold::before { border-width: 2px; }
.pilgrim-card.tier-gold::after {
  border-width: 1px;
  background:
    linear-gradient(var(--pc-rim), var(--pc-rim)) left top / 22% 2px no-repeat,
    linear-gradient(var(--pc-rim), var(--pc-rim)) left top / 2px 22% no-repeat,
    linear-gradient(var(--pc-rim), var(--pc-rim)) right top / 22% 2px no-repeat,
    linear-gradient(var(--pc-rim), var(--pc-rim)) right top / 2px 22% no-repeat,
    linear-gradient(var(--pc-rim), var(--pc-rim)) left bottom / 22% 2px no-repeat,
    linear-gradient(var(--pc-rim), var(--pc-rim)) left bottom / 2px 22% no-repeat,
    linear-gradient(var(--pc-rim), var(--pc-rim)) right bottom / 22% 2px no-repeat,
    linear-gradient(var(--pc-rim), var(--pc-rim)) right bottom / 2px 22% no-repeat;
}

/* 먼동 — 스물다섯 걸음을 넘었습니다 (Lv25~) · 금 위에 해돋이 */
.pilgrim-card.tier-dawn { --pc-rim: #e2c478; }
.pilgrim-card.tier-dawn::before {
  border-width: 2px;
  box-shadow: 0 0 9px rgba(226, 196, 120, 0.5);
}
.pilgrim-card.tier-dawn::after {
  border-width: 1px;
  background:
    radial-gradient(circle at 50% 100%, transparent 58%, var(--pc-rim) 59%, var(--pc-rim) 66%, transparent 67%)
      top center / 34% 16% no-repeat,
    linear-gradient(var(--pc-rim), var(--pc-rim)) left top / 22% 2px no-repeat,
    linear-gradient(var(--pc-rim), var(--pc-rim)) right top / 22% 2px no-repeat,
    linear-gradient(var(--pc-rim), var(--pc-rim)) left bottom / 22% 2px no-repeat,
    linear-gradient(var(--pc-rim), var(--pc-rim)) left bottom / 2px 22% no-repeat,
    linear-gradient(var(--pc-rim), var(--pc-rim)) right bottom / 22% 2px no-repeat,
    linear-gradient(var(--pc-rim), var(--pc-rim)) right bottom / 2px 22% no-repeat;
}

/* 지금 등급 아이콘 — 패 아래 가운데 */
.pilgrim-card-badge {
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bg-color, #14100b);
  border: 1px solid var(--pc-rim, var(--accent-gold));
  color: var(--pc-rim, var(--accent-gold));
  line-height: 0;
}
.pilgrim-card-badge .ui-icon { width: 12px; height: 12px; }

/* ⚠️ 2026-09-04. 지도 위 조그만 순례자 패(42×54)에서는 이 딱지를 감춥니다.
   패가 너무 작아 딱지가 순례자의 다리에 걸쳐 앉아 얼룩처럼 보였습니다.
   여기서는 바로 아래에 «18번째 길» 이라고 등급을 «글자로» 적어 두므로,
   위 주의문의 «등급이 보이는 유일한 자리»에 해당하지 않습니다.
   다른 곳(마이페이지·캐릭터 만들기)의 딱지는 그대로 둡니다 — 지우지 마십시오. */
.profile-avatar .pilgrim-card-badge { display: none; }

/* 큰 미리보기(캐릭터 만드는 화면)에서는 딱지도 크게 */
.avatar-preview-box .pilgrim-card-badge { width: 30px; height: 30px; bottom: -11px; }
.avatar-preview-box .pilgrim-card-badge .ui-icon { width: 18px; height: 18px; }

/* ── 멘토 그림이 실제 초상이 아님을 밝히는 자리 ──────────────────
   ⚠️ .portrait-note 를 숨기거나 눈에 안 띄게 만들지 마십시오.
      이 그림은 우리가 상상해 그린 것입니다. 안 밝히면 그분의 얼굴인 줄 아십니다.
      (까닭은 constants.js 의 MENTOR_PORTRAIT_FACTS 머리글에 적어 두었습니다) */
.portrait-note {
  display: block;
  width: 100%;
  min-height: 44px;   /* 손가락으로 누르는 것의 앱 기준 */
  margin: 6px 0 2px;
  padding: 6px 2px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--text-secondary);
  text-align: center;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(var(--line-rgb), 0.28);
  text-underline-offset: 3px;
  word-break: keep-all;
}
/* ⚠️ 2026-09-02. `.portrait-note-mini` 를 걷어냈습니다 — 모신 멘토 사진 아래에 붙던
   작은 딱지의 옷이었습니다. 딱지를 「고르는 자리」로 모으면서 이 규칙도 쓸 데가
   없어졌습니다 (까닭은 index.html 의 .active-avatar-wrap 자리에 적어 두었습니다).
   ⚠️ 넓은 자리에 쓰는 `.portrait-note` 는 그대로 둡니다 — 멘토 고르는 화면 둘이 씁니다. */
.active-avatar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.portrait-body { padding-bottom: 8px; }
.portrait-lead {
  margin: 0 0 12px;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.7;
  color: var(--text-primary);
  word-break: keep-all;
}
.portrait-p {
  margin: 0 0 10px;
  font-size: var(--fs-xs);
  line-height: 1.8;
  color: var(--text-secondary);
  word-break: keep-all;
}
/* ⚠️ 실제 얼굴에 근거가 있는 그림이 따로 있다는 것을 알려 드리는 칸입니다. 지우지 마십시오. */
.portrait-choe {
  margin: 14px 0;
  padding: 12px 14px;
  border-left: 3px solid var(--gold-grad-end, var(--accent-gold));
  border-radius: 0 10px 10px 0;
  background: rgba(255, 255, 255, 0.04);
}
.portrait-choe-head {
  margin: 0 0 6px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--gold-grad-end, var(--accent-gold));
  word-break: keep-all;
}
/* ⚠️ 「우리 그림은 그것이 아니다」 — 이 칸에서 가장 크게 날 수 있는 오해를 막는 줄입니다.
      글씨를 흐리게 하거나 뒤로 밀지 마십시오. */
.portrait-choe-warn {
  margin: 0 0 8px;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.7;
  color: var(--text-primary);
  word-break: keep-all;
}
.portrait-src {
  display: block;
  margin: 4px 0 0;
  font-size: var(--fs-xs);
}

/* ── 땀의 순교자 (가경자 최양업 토마스 신부 현양 화면) ───────────
   ⚠️ .choe-caution (천주가사 귀속이 확정된 게 아니라는 문단)과
      .choe-quote-note / .choe-quote-src (사향가가 원문이 아니라는 안내와 출처)를
      숨기지 마십시오. 이 셋이 이 화면을 정직하게 만드는 자리입니다.
   ⚠️ .choe-outside 는 우리 44곳 성지에 없는 곳이라는 표시입니다.
      성지 카드처럼 보이게 꾸미지 마십시오. 도장을 찍으러 가시게 됩니다. */
.choe-body { padding-bottom: 8px; }
.choe-top { margin-bottom: 18px; }
.choe-honor {
  margin: 0 0 2px;
  font-size: var(--fs-lg, 1.15rem);
  font-weight: 700;
  color: var(--text-primary);
}
.choe-epithet {
  margin: 0 0 6px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--gold-grad-end, var(--accent-gold));
  letter-spacing: 0.02em;
}
.choe-epithet-why,
.choe-intro {
  margin: 0 0 8px;
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--text-secondary);
  word-break: keep-all;
}
.choe-sec { margin-bottom: 22px; }
.choe-sec-head {
  margin: 0 0 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(var(--line-rgb), 0.12);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-primary);
  word-break: keep-all;
}
.choe-p {
  margin: 0 0 8px;
  font-size: var(--fs-xs);
  line-height: 1.75;
  color: var(--text-secondary);
  word-break: keep-all;
}
.choe-note {
  margin: 6px 0 8px;
  font-size: var(--fs-xs);
  line-height: 1.65;
  color: var(--text-tertiary, var(--text-secondary));
  word-break: keep-all;
}
.choe-life-row {
  display: flex;
  gap: 10px;
  margin-bottom: 7px;
}
.choe-year {
  flex: 0 0 74px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--gold-grad-end, var(--accent-gold));
}
.choe-life-text {
  margin: 0;
  flex: 1 1 auto;
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--text-secondary);
  word-break: keep-all;
}
.choe-four {
  margin: 4px 0;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.05);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  word-break: keep-all;
}
/* ⚠️ 눈에 띄어야 합니다. 이 문단이 안 보이면 앱이 확정된 사실을 말하는 것처럼 됩니다. */
.choe-caution {
  margin: 8px 0 12px;
  padding: 10px 12px;
  border-left: 3px solid rgba(var(--line-rgb), 0.28);
  border-radius: 0 8px 8px 0;
  background: rgba(255, 255, 255, 0.04);
  font-size: var(--fs-xs);
  line-height: 1.75;
  color: var(--text-secondary);
  word-break: keep-all;
}
.choe-quote {
  margin: 12px 0;
  padding: 14px 16px;
  border: 1px solid rgba(var(--line-rgb), 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}
.choe-quote-title {
  margin: 0 0 2px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-primary);
}
.choe-quote-meaning {
  margin: 0 0 10px;
  font-size: var(--fs-xs);
  color: var(--text-tertiary, var(--text-secondary));
}
.choe-quote-line {
  margin: 0 0 3px;
  font-size: var(--fs-sm);
  line-height: 1.9;
  color: var(--text-primary);
  word-break: keep-all;
}
.choe-quote-note,
.choe-quote-src {
  margin: 8px 0 0;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-tertiary, var(--text-secondary));
  word-break: keep-all;
}
.choe-quote-note { padding-top: 8px; border-top: 1px dashed rgba(var(--line-rgb), 0.14); }
.choe-road-card {
  padding: 11px 13px;
  margin-bottom: 9px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(var(--line-rgb), 0.12);
  background: rgba(255, 255, 255, 0.04);
}
/* ⚠️ 우리 44곳에 없는 곳입니다. 성지 카드와 달라 보여야 합니다. */
.choe-road-card.outside {
  border-style: dashed;
  border-color: rgba(var(--line-rgb), 0.2);
  background: rgba(255, 255, 255, 0.02);
}
.choe-step {
  display: inline-block;
  margin-bottom: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: var(--fs-xxs, 0.72rem);
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.07);
}
.choe-road-name {
  display: block;
  margin: 0 0 4px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-primary);
  word-break: keep-all;
}
.choe-road-name.tappable {
  width: 100%;
  min-height: 44px;   /* 손가락으로 누르는 것의 앱 기준 */
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(var(--line-rgb), 0.3);
  text-underline-offset: 3px;
}
.choe-outside,
.choe-addr {
  margin: 0 0 4px;
  font-size: var(--fs-xs);
  color: var(--text-tertiary, var(--text-secondary));
  word-break: keep-all;
}
.choe-now {
  margin: 0 0 8px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--gold-grad-end, var(--accent-gold));
}
.choe-src {
  display: block;
  margin: 4px 0 0;
  font-size: var(--fs-xs);
}
.choe-pray { margin-top: 18px; }

/* ── 이분과 이어진 분들 ─────────────────────────────────────────
   ⚠️ 근거 문장(.martyr-rel-quote)을 숨기지 마십시오. 이 칸이 우리 판단이
      아니라 약전이 한 말임을 보이는 유일한 자리입니다.
   ⚠️ .martyr-rel-note 아래 칸은 **저분의 약전**이 한 말입니다.
      위 칸과 같아 보이면 누구의 말인지 흐려집니다. 그래서 점선으로 나눕니다. */
.martyr-relations { margin-bottom: 12px; }
.martyr-relations[hidden] { display: none !important; }
.martyr-rel-head {
  margin: 0 0 6px;
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.martyr-rel-card {
  padding: 9px 12px;
  margin-bottom: 7px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(var(--line-rgb), 0.12);
  background: rgba(255, 255, 255, 0.04);
}
.martyr-rel-kind {
  display: inline-block;
  margin-bottom: 3px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: var(--fs-xxs, 0.72rem);
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.07);
}
.martyr-rel-name {
  display: block;
  width: 100%;
  min-height: 44px;   /* 손가락으로 누르는 것의 앱 기준 */
  margin: 0 0 2px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(var(--line-rgb), 0.3);
  text-underline-offset: 3px;
  word-break: keep-all;
}
.martyr-rel-relation {
  margin: 0 0 4px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  word-break: keep-all;
}
.martyr-rel-quote {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.65;
  color: var(--text-tertiary, var(--text-secondary));
  word-break: keep-all;
}
.martyr-rel-note {
  margin: 12px 0 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(var(--line-rgb), 0.16);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-tertiary, var(--text-secondary));
  word-break: keep-all;
}

/* ── 우리가 이어 드린 자리 ──────────────────────────────────────
   ⚠️ 위의 「순교의 자리」와 **눈에 띄게 달라야** 합니다.
      저쪽은 주교회의가 적어 둔 것이고, 여기는 우리가 이은 것입니다.
      같아 보이면 우리 판단이 원문 행세를 합니다.
      점선 테두리와 안내 문구가 그 구분입니다. 지우지 마십시오. */
.martyr-linked { margin-bottom: 12px; }
.martyr-linked[hidden] { display: none !important; }
.martyr-linked-head {
  margin: 0 0 4px;
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.martyr-linked-note {
  margin: 0 0 8px;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-tertiary, var(--text-secondary));
  word-break: keep-all;
}
.martyr-site-card.linked {
  border-style: dashed;
  border-color: rgba(var(--line-rgb), 0.22);
  background: rgba(255, 255, 255, 0.02);
}
.martyr-linked-why {
  margin: 6px 0 0;
  padding-top: 6px;
  border-top: 1px dashed rgba(var(--line-rgb), 0.12);
  font-size: var(--fs-xs);
  line-height: 1.65;
  color: var(--text-secondary);
  word-break: keep-all;
}
.martyr-site-person.linked {
  border-style: dashed;
}
.martyr-site-kind,
.martyr-site-addr,
.martyr-site-note {
  margin: 0 0 4px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  line-height: 1.6;
  word-break: keep-all;
}
.martyr-site-addr { color: var(--text-primary); }
.martyr-site-map,
.martyr-site-src {
  display: inline-flex;
  align-items: center;
  /* ⚠️ 44px — 손가락으로 누르는 것의 앱 기준입니다. 36px 이었습니다(2026-08-29).
        글자 크기는 그대로이고 위아래 눌리는 자리만 넓어집니다. 줄이지 마십시오. */
  min-height: 44px;
  margin-right: 10px;
  /* ⚠️ .ext-link::after 화살표가 2px 잘려 나갑니다. 이 여백을 지우지 마십시오. */
  padding-right: 3px;
  white-space: nowrap;
  font-size: var(--fs-xs);
  /* ⚠️ 색을 반드시 적어야 합니다. 이 앱에는 `a { color }` 규칙이 없어서,
        안 적으면 브라우저 기본 링크색(#0000EE)이 나옵니다.
        어두운 화면에서 대비가 1.1 밖에 안 되어 **글자가 안 보입니다.**
        실제로 그렇게 나가고 있었습니다 (2026-08-29 잡음).
        새 링크를 만들 때도 색을 꼭 적으십시오 —
        `.agents/linkcolor.js` 가 기본 링크색을 쓰는 링크를 잡아냅니다. */
  color: var(--accent-gold);
}
/* 자리 이름을 눌러 그 자리 사람들을 볼 수 있을 때 */
.martyr-site-name.tappable {
  display: block;
  width: 100%;
  min-height: 44px;   /* 손가락으로 누르는 것의 앱 기준 (36px 이었습니다) */
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(var(--line-rgb), 0.3);
  text-underline-offset: 3px;
}

/* ── 「순교의 자리」 목록 ──────────────────────────────────────── */
.martyr-site-region {
  margin: 12px 0 6px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  letter-spacing: 0.06em;
}
.martyr-site-region:first-child { margin-top: 0; }
.martyr-site-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 8px 12px;
  margin-bottom: 6px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(var(--line-rgb), 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.martyr-site-row-name {
  font-size: var(--fs-sm);
  word-break: keep-all;
}
.martyr-site-row-meta {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  white-space: nowrap;
}

/* ── 자리 하나를 열었을 때 ────────────────────────────────────── */
.martyr-site-links { margin: 0 0 14px; }
.martyr-site-roll-head {
  margin: 0 0 8px;
  font-size: var(--fs-sm);
  color: var(--text-primary);
}
.martyr-site-roll { display: flex; flex-direction: column; gap: 6px; }
.martyr-site-person {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(var(--line-rgb), 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.martyr-site-person-name { font-size: var(--fs-sm); word-break: keep-all; }
.martyr-site-person-date {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  white-space: nowrap;
}
.martyr-site-roll .martyr-linked-head { margin: 10px 0 2px; }
.martyr-site-roll .martyr-linked-note { margin: 0 0 4px; }
.martyr-site-addr[hidden],
.martyr-site-note[hidden] { display: none !important; }

.martyr-source {
  display: inline-block;
  min-height: 44px;   /* 손가락으로 누르는 것의 앱 기준 (36px 이었습니다) */
  line-height: 44px;
  font-size: var(--fs-sm);
  color: var(--accent-gold);
}

/* 성지 상세 창 안의 「이 성지의 순교자」 */
.shrine-martyrs { margin: 0 0 14px; }
.shrine-martyrs[hidden] { display: none !important; }
.shrine-martyr-title {
  margin: 0 0 8px;
  font-size: var(--fs-md);
  color: var(--accent-gold);
}
.shrine-martyr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.shrine-martyr-chip {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.4);
  background: rgba(212, 175, 55, 0.08);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  cursor: pointer;
  word-break: keep-all;
}

/* 오늘의 전례 */
.liturgy-card {
  margin-bottom: 14px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1px solid rgba(var(--line-rgb), 0.1);
  background: rgba(255, 255, 255, 0.03);
}
.liturgy-head { display: flex; align-items: center; gap: 8px; }
.liturgy-color-dot {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(var(--line-rgb), 0.35);
}
.liturgy-season {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--accent-gold);
  word-break: keep-all;
}
.liturgy-name {
  margin: 8px 0 0;
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--text-primary);
  word-break: keep-all;
}
.liturgy-name[hidden] { display: none !important; }
.liturgy-meta {
  margin: 6px 0 0;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.liturgy-note {
  margin: 10px 0 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-secondary);
  word-break: keep-all;
}
.liturgy-note a { color: var(--accent-gold); }
/* 「오늘」 화면의 전례 카드 (2026-09-19) */
.today-liturgy .liturgy-season { margin: 0; }
.today-liturgy .liturgy-note { margin-top: 8px; font-size: var(--fs-xs); }
/* 2026-10-05 전례 시기 그림(liturgy_scene.js) — 카드 맨 위 가로 띠 */
.liturgy-scene { width: 100%; aspect-ratio: 2.6 / 1; margin: 10px 0 12px; border-radius: var(--r-md); overflow: hidden; background: #efe6d6; }
.liturgy-scene[hidden] { display: none; }
.liturgy-scene canvas { width: 100%; height: 100%; display: block; }
.today-missa-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 48px;
  margin-top: 12px;
  padding: 8px 14px;
  border: 1px solid var(--accent-gold);
  border-radius: var(--r-sm);
  background: rgba(216, 174, 106, 0.10);
  color: var(--accent-gold);
  font-size: var(--fs-base);
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  word-break: keep-all;
}
.today-missa-btn small { font-size: var(--fs-xs); font-weight: 400; color: var(--text-secondary); }
/* 밖으로 나가는 표(화살표)는 단추 오른쪽 가운데에 — 세로로 쌓인 글줄 사이에 끼지 않게 */
.today-missa-btn { position: relative; padding-right: 32px; padding-left: 32px; }
.today-missa-btn.ext-link::after {
  position: absolute;
  right: 16px;
  top: 50%;
  margin: 0;
  transform: translateY(-50%) rotate(45deg);
}
.today-missa-btn:hover, .today-missa-btn:focus-visible { background: rgba(216, 174, 106, 0.18); }

/* ── 순교 달력 ─────────────────────────────────────────────────
   ⚠️ 순교일은 축일이 아닙니다. 화면 글에 「축일」·「기념일」을 넣지 마십시오. */
.martyr-cal-card {
  margin-bottom: 14px;
  padding: 14px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(212, 175, 55, 0.28);
  background: rgba(212, 175, 55, 0.05);
}
.martyr-cal-upcoming { display: flex; flex-direction: column; gap: 10px; }
.martyr-cal-row {
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(212, 175, 55, 0.22);
  background: rgba(0, 0, 0, 0.05);
}
.martyr-cal-row.today {
  border-color: rgba(212, 175, 55, 0.7);
  background: rgba(212, 175, 55, 0.13);
}
.martyr-cal-when {
  margin: 0 0 4px;
  font-size: var(--fs-md);
  color: var(--accent-gold);
  word-break: keep-all;
}
.martyr-cal-who {
  margin: 0 0 8px;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-secondary);
  word-break: keep-all;
}
.martyr-cal-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.martyr-cal-details { margin-top: 12px; }
/* 「순교자들이 읽고 남긴 책」 (2026-09-19) */
.old-books { margin-top: 8px; }
.old-books-group { margin: 14px 0 6px; font-size: var(--fs-sm); font-weight: 700; color: var(--accent-gold); }
.old-books-group:first-child { margin-top: 4px; }
.old-book { padding: 10px 0; border-top: 1px solid var(--border-color); }
.old-book-title { margin: 0 0 4px; font-size: var(--fs-base); font-weight: 700; word-break: keep-all; }
.old-book-desc { margin: 0; font-size: var(--fs-md); line-height: 1.7; word-break: keep-all; }
.old-book-sub { margin: 10px 0 4px; font-size: var(--fs-sm); font-weight: 700; color: var(--text-secondary); }
.old-book-src { margin: 6px 0 0; font-size: var(--fs-xs); color: var(--text-secondary); word-break: keep-all; }
.old-book-src a { color: inherit; }
.old-prayer-table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.old-prayer-table th, .old-prayer-table td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--border-color); }
.old-prayer-table th { font-size: var(--fs-xs); color: var(--text-secondary); font-weight: 700; }
.martyr-cal-details > summary {
  cursor: pointer;
  min-height: 36px;
  line-height: 36px;
  font-size: var(--fs-sm);
  color: var(--accent-gold);
}
.martyr-cal-year { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.martyr-cal-month > h4 {
  margin: 0 0 6px;
  font-size: var(--fs-md);
  color: var(--accent-gold);
}
.martyr-cal-day {
  display: flex;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  margin-bottom: 4px;
  text-align: left;
  border-radius: var(--r-xs);
  border: 1px solid rgba(212, 175, 55, 0.18);
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  cursor: pointer;
  word-break: keep-all;
}
.martyr-cal-daynum { flex: 0 0 auto; color: var(--accent-gold); }
.martyr-cal-daywho { flex: 1 1 auto; color: var(--text-secondary); line-height: 1.45; }

/* ── 갈래 단추 ──────────────────────────────────────────────── */
.martyr-facets { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.martyr-facet-btn {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  cursor: pointer;
  word-break: keep-all;
}
.martyr-facet-btn.active {
  border-color: rgba(212, 175, 55, 0.85);
  background: rgba(212, 175, 55, 0.16);
  color: var(--text-primary);
}

/* ── 성지에서 오늘 만난 분 · 순교자가 없는 성지 ─────────────── */
.shrine-martyr-none {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-secondary);
  word-break: keep-all;
}
/* 「이 자리에 남긴 지향」 (2026-09-19) */
.shrine-note-box { margin-bottom: 16px; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid rgba(212, 175, 55, 0.3); background: rgba(212, 175, 55, 0.06); text-align: left; }
.shrine-note-box[hidden] { display: none !important; }
.shrine-note-title { margin: 0 0 6px; font-size: var(--fs-sm); font-weight: 700; color: var(--accent-gold); }
.shrine-note-label { margin: 0 0 4px; font-size: var(--fs-xs); font-weight: 700; color: var(--accent-gold); }
.shrine-note-quote, .shrine-note-q { margin: 0 0 6px; font-size: var(--fs-md); line-height: 1.6; word-break: keep-all; }
.shrine-note-q { font-weight: 700; }
.shrine-note-ask { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px dashed rgba(212, 175, 55, 0.35); }
.shrine-note-answers { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.shrine-note-answer { min-height: 44px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--accent-gold); background: rgba(216, 174, 106, 0.10); color: var(--accent-gold); font-size: var(--fs-sm); font-weight: 700; cursor: pointer; word-break: keep-all; }
.shrine-note-list { margin: 0 0 8px; padding-left: 1.1em; }
.shrine-note-list li { margin: 0 0 4px; font-size: var(--fs-sm); line-height: 1.6; word-break: keep-all; }
.shrine-note-when { color: var(--text-secondary); }
.shrine-note-follow { color: var(--accent-gold); }
.shrine-note-more, .shrine-note-empty { margin: 0 0 8px; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-secondary); word-break: keep-all; }
.shrine-note-form { display: flex; gap: 6px; align-items: stretch; }
.shrine-note-title-leaving { margin-top: 12px; }
#modal-leaving-note textarea { width: 100%; box-sizing: border-box; min-height: 88px; padding: 10px; border-radius: var(--r-sm); border: 1px solid var(--border-color); background: var(--sunken); color: var(--text-primary); font-size: var(--fs-base); line-height: 1.6; }
.shrine-note-input { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid var(--border-color); background: var(--sunken); color: var(--text-primary); font-size: var(--fs-sm); }
.shrine-note-ask .shrine-note-input { width: 100%; box-sizing: border-box; }
.shrine-note-btn { flex: 0 0 auto; min-height: 44px; padding: 0 14px; border-radius: var(--r-sm); border: 1px solid var(--accent-gold); background: var(--accent-gold); color: var(--on-gold); font-size: var(--fs-sm); font-weight: 700; cursor: pointer; }
.stamp-detail-modal .shrine-note-input { background: rgba(255, 255, 255, 0.55); color: #2e2820; }

.shrine-martyr-meet {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(212, 175, 55, 0.3);
  background: rgba(212, 175, 55, 0.07);
}
.shrine-martyr-meet-label {
  margin: 0 0 4px;
  font-size: var(--fs-xs);
  color: var(--accent-gold);
}
/* 「그날, 그 자리」 — 오늘이 순교일이면 조금 더 또렷하게 (2026-09-19) */
.shrine-martyr-meet-today { border-color: rgba(212, 175, 55, 0.6); background: rgba(212, 175, 55, 0.12); }
.shrine-martyr-meet-today .shrine-martyr-meet-label { font-weight: 700; }
.shrine-martyr-meet-more { margin: 0 0 8px; font-size: var(--fs-xs); color: var(--text-secondary); word-break: keep-all; }
.shrine-martyr-meet-who {
  margin: 0 0 6px;
  font-size: var(--fs-md);
  color: var(--text-primary);
  word-break: keep-all;
}
.shrine-martyr-meet-episode {
  margin: 0 0 8px;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-secondary);
  word-break: keep-all;
}
.shrine-martyr-meet-btn,
.shrine-martyr-more {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.45);
  background: rgba(212, 175, 55, 0.1);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  cursor: pointer;
  word-break: keep-all;
}

/* ── 이 마음결을 먼저 지나가신 분 ───────────────────────────────
   ⚠️ 수호성인이 아닙니다. .heart-martyr-note 를 지우지 마십시오. */
.heart-martyr {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(212, 175, 55, 0.28);
  background: rgba(212, 175, 55, 0.06);
  text-align: left;
}
.heart-martyr-label {
  margin: 0 0 4px;
  font-size: var(--fs-xs);
  color: var(--accent-gold);
  word-break: keep-all;
}
.heart-martyr-who {
  margin: 0 0 6px;
  font-size: var(--fs-md);
  color: var(--text-primary);
  word-break: keep-all;
}
.heart-martyr-why {
  margin: 0 0 8px;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-secondary);
  word-break: keep-all;
}
.heart-martyr-btn {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.45);
  background: rgba(212, 175, 55, 0.1);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.heart-martyr-note {
  margin: 8px 0 0;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--text-secondary);
  opacity: 0.9;
  word-break: keep-all;
}

/* 오늘의 순례 세션 · 멘토 공식 기도 */
.pilgrimage-session-card,
.mentor-prayer-card {
  width: 100%;
  margin: 0 0 14px;
  padding: 16px;
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.12), rgba(255, 255, 255, 0.035));
  color: var(--text-primary);
  text-align: left;
}
.pilgrimage-session-card h3 { margin: 0 0 var(--space-sm); color: var(--accent-gold); }
#pilgrimage-session-status { margin: 0 0 var(--space-md); color: var(--text-secondary); line-height: 1.55; }
#pilgrimage-next-step[hidden] { display: none !important; }
.pilgrimage-next-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-md); }
.pilgrimage-next-actions .dev-tools-btn { width: auto; flex: 1 1 140px; min-height: 44px; margin: 0; }
.journal-history { margin-top: var(--space-lg); }
.journal-history > summary { min-height: 44px; cursor: pointer; }
.journal-history input[type="date"] { display: block; box-sizing: border-box; width: 100%; min-height: 44px; padding: var(--space-sm) var(--space-md); border: 1px solid var(--accent-gold); border-radius: var(--r-sm); background: var(--card-bg); color: var(--text-primary); font: inherit; color-scheme: dark; }
[data-theme="light"] .journal-history input[type="date"] { color-scheme: light; }
.journal-history-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; margin: var(--space-sm) 0 var(--space-md); }
.journal-history .record-row h4 { margin: var(--space-md) 0 var(--space-xs); }
.journal-history .dev-tools-btn { min-height: 44px; }
.mentor-onboard-card .mentor-onboard-theme { margin: var(--space-sm) 0 0; line-height: 1.55; }
.mentor-onboard-note { font-size: var(--fs-sm); line-height: 1.6; margin: 0 0 var(--space-md); color: var(--text-secondary); }
.pilgrimage-session-card strong,
.pilgrimage-session-card span { display: block; }
.pilgrimage-session-card strong,
.mentor-prayer-card h3 { color: var(--accent-gold); }
.pilgrimage-session-card span {
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: var(--fs-md);
  line-height: 1.55;
}
.mentor-prayer-card[hidden] { display: none !important; }
.mentor-prayer-card h3 { margin: 0 0 var(--space-sm); font-size: var(--fs-lg); }
.mentor-prayer-card p { margin: var(--space-sm) 0 var(--space-md); line-height: 1.65; }
.companion-prayer-card { background: rgba(216,174,106,.055); }
.companion-prayer-modal .modal-body { padding: 22px 20px; text-align: center; }
.companion-prayer-text { margin: var(--space-lg) 0; padding: var(--space-lg); border: 1px solid rgba(216,174,106,.28); border-radius: var(--r-sm); background: rgba(255,255,255,.035); color: var(--text-primary); font-family: var(--font-serif); font-size: var(--fs-lg); line-height: 1.8; white-space: pre-line; }
.companion-prayer-place { color: var(--accent-gold); font-size: var(--fs-md); }
.companion-prayer-silence { color: var(--text-secondary); font-size: var(--fs-md); }
/* 2026-09-30 동반자 자유 기도 — 기도문 대신 안내 세 줄 (글꼴·틀은 .companion-prayer-text 그대로) */
.companion-free-lead { color: var(--text-secondary); font-size: var(--fs-md); margin: var(--space-md) 0 0; }
.companion-prayer-text.companion-free-cues { white-space: normal; padding-left: calc(var(--space-lg) + 1.2em); font-size: var(--fs-base); line-height: 1.7; }
.companion-prayer-text.companion-free-cues li + li { margin-top: 0.5em; }
#active-companion-prayer-action[hidden] { display: none !important; }
#active-companion-prayer-action .equip-action-btn {
  width: 100%;
  margin-top: var(--space-sm);
  white-space: normal;
}
#pilgrimage-session-flow label {
  display: block;
  margin: 14px 0;
  color: var(--text-secondary);
  font-size: var(--fs-md);
  line-height: 1.5;
}
#pilgrimage-session-flow select,
#pilgrimage-session-flow input,
#pilgrimage-session-flow textarea {
  box-sizing: border-box;
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 11px 12px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: var(--r-sm);
  background: var(--sunken);
  color: var(--text-primary);
  font: inherit;
}
#pilgrimage-session-flow textarea { min-height: 86px; resize: vertical; }
.pilgrimage-flow-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; list-style: none; padding: 0; margin: 0 0 20px; }
.pilgrimage-flow-steps li { padding: 8px; border: 1px solid var(--text-secondary); border-radius: 8px; font-size: .85rem; line-height: 1.5; }
.pilgrimage-flow-steps [aria-current="step"] { color: var(--accent-gold); border: 2px solid currentColor; font-weight: bold; }
#pilgrimage-session-flow > p { margin: 12px 0; line-height: 1.6; }
#pilgrimage-session-flow > .modal-btn { margin: 12px 0; }
#pilgrimage-session-flow > details { margin: 20px 0; }
#pilgrimage-session-flow summary { cursor: pointer; padding: 8px 0; }
#pilgrimage-session-flow .pilgrimage-next-actions { margin-top: 16px; }
#pilgrimage-session-flow select option { color: #222; background: #fff; }
#pilgrimage-session-flow .mentor-theme {
  padding: 10px 12px;
  border-left: 3px solid var(--accent-gold);
  background: rgba(212, 175, 55, 0.08);
  line-height: 1.65;
}

/* ── 합침 1 · 「오늘의 나」 ──────────────────────────────────────
   예전에는 동반자 기도 카드 · 멘토 기도 카드 · 영적집중력이 카드 셋으로 따로 놓여
   436px를 먹었습니다. 셋 다 「지금 누구와, 어떤 상태로 기도하는가」를 말하므로 한 카드로 묶습니다.
   ⚠️ 접은 것이 아닙니다. 단추는 하나도 숨기지 않았습니다. 카드로 다시 쪼개지 마십시오. */
.today-me-card {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(216,174,106,.25);
  background: var(--panel);
}
.today-me-focus {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.today-me-focus > h3 {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--accent-gold);
}
.today-me-focus .focus-dots { font-size: var(--fs-md); letter-spacing: 2px; color: var(--accent-gold); }
.today-me-focus .focus-value { font-size: var(--fs-sm); color: var(--text-secondary); }
/* ⚠️ 34px 아래로 줄이지 마십시오. 손가락에 안 닿습니다. */
.today-me-focus .focus-help {
  width: 34px; height: 34px; padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(216,174,106,.4);
  background: transparent; color: var(--text-secondary);
  font-size: var(--fs-xs); cursor: pointer;
  position: static;
}
/* ⚠️ 이 줄이 위(3030행)의 규칙을 덮고 있었습니다. 높이가 34px 로 되돌아가고
   눌리지 않는 상태에서도 단추처럼 보였습니다. 두 곳을 맞춰 둡니다.
   ⚠️ min-height 를 44px 아래로 내리지 마십시오 — 손가락으로 누르는 단추입니다. */
.today-me-focus .restore-energy-btn {
  margin: 0 0 0 auto;
  min-height: 44px;
  width: auto;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--gold-soft-border);
  background: var(--gold-soft);
  color: var(--accent-gold);
  font-size: var(--fs-sm);
  cursor: pointer;
  word-break: keep-all;
}
/* 가득 찼을 때는 조용한 상태 줄로 (눌리는 모양을 벗습니다) */
.today-me-focus .restore-energy-btn:disabled {
  min-height: 32px;
  border-color: transparent;
  background: transparent;
  color: var(--text-secondary);
  cursor: default;
}
/* 카드 안에 들어온 멘토·동반자 — 겹 테두리를 없애고 한 덩어리로 읽히게 */
.today-me-card > .mentor-prayer-card {
  margin: 10px 0 0;
  padding: 10px 0 0;
  border: 0;
  border-top: 1px solid rgba(216,174,106,.16);
  border-radius: 0;
  background: transparent;
}
.today-me-card > .mentor-prayer-card[hidden] { display: none !important; }
.tm-label { margin: 0 0 3px; font-size: var(--fs-xs); color: var(--accent-gold); }
.tm-line {
  margin: 0 0 7px;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text-secondary);
  word-break: keep-all;
}
.today-me-card .record-note { margin: 6px 0 0; }

/* ── 합침 2 · 「기도 고르기」 ──────────────────────────────────── */
.prayer-pick-sub {
  margin: 14px 0 7px;
  font-size: var(--fs-sm);
  color: var(--accent-gold);
  word-break: keep-all;
}
.prayer-pick > label { display: block; margin-bottom: 5px; font-size: var(--fs-sm); }

/* ── 기다리는 동안 말씀이 한 줄씩 떠오르는 자리 ─────────────────
   예전에는 묵상 침묵이 정지된 글자 한 줄, 성체조배는 숫자 카운트다운뿐이었습니다.
   ⚠️ .verse-line 의 글자는 성경 본문입니다. CSS 로 자르거나(text-overflow)
      줄임표를 붙이지 마십시오. 다 보여야 합니다. */
.verse-reveal {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 14px 0 10px;
  text-align: center;
}
.verse-reveal .verse-line {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 1.1s ease, transform 1.1s ease;
  font-size: var(--fs-base);
  line-height: 1.75;
  color: var(--text-primary);
  word-break: keep-all;
}
.verse-reveal .verse-line.on { opacity: 1; transform: none; }
.verse-reveal-ref {
  margin: 0 0 10px;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}
.verse-reveal-ref a { color: var(--accent-gold); }
.verse-reveal-bar {
  height: 3px;
  margin: 0 0 8px;
  border-radius: 999px;
  background: rgba(216,174,106,.16);
  overflow: hidden;
}
.verse-reveal-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--accent-gold);
  transition: width .35s linear;
}
.verse-reveal-left {
  margin: 0;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
/* 움직임을 줄이도록 설정한 기기에서는 떠오르지 않고 처음부터 다 보입니다 */
@media (prefers-reduced-motion: reduce) {
  .verse-reveal .verse-line { opacity: 1; transform: none; transition: none; }
  .verse-reveal-bar-fill { transition: none; }
}

/* ── 기도 고르는 두 갈래를 속 탭으로 ────────────────────────────
   ⚠️ 두 갈래를 나란히 쌓으면 세로가 길어집니다. 다시 쌓지 마십시오. */
.pick-tabs { display: flex; gap: 6px; margin: 4px 0 10px; }
.pick-tab {
  flex: 1 1 0;
  min-height: 38px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(216,174,106,.3);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  cursor: pointer;
  word-break: keep-all;
}
.pick-tab.active {
  border-color: rgba(216,174,106,.85);
  background: rgba(216,174,106,.15);
  color: var(--text-primary);
}
.pick-pane[hidden] { display: none !important; }

/* ── 멘토·일차에 붙는 성지 ─────────────────────────────────────
   ⚠️ 이어진 성지가 없으면 아무것도 내지 않습니다. 억지로 붙이지 마십시오. */
.mentor-shrine { margin: 6px 0 8px; }
.mentor-shrine-tag {
  min-height: 34px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(216,174,106,.45);
  background: rgba(216,174,106,.1);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  cursor: pointer;
  word-break: keep-all;
}
/* ⚠️ 성지 소개는 두 줄까지만 보입니다. 전체는 성지 태그를 누르면 상세 창에 다 나옵니다.
   (소개 한 줄이 통째로 들어가면 멘토 카드가 163px 늘어납니다) */
.mentor-shrine-intro {
  margin: 6px 0 0;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--text-secondary);
  word-break: keep-all;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── 가상 순례길 ────────────────────────────────────────────────
   ⚠️ 예전에는 1~7일차 전부가 펼쳐져 있었습니다. 오늘 한 일차만 나옵니다. */
.vp-stages { display: flex; gap: 5px; margin: 2px 0 12px; }
.vp-stage {
  flex: 1 1 0;
  min-height: 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(216,174,106,.22);
  background: var(--panel);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.vp-stage.active { border-color: rgba(216,174,106,.85); background: rgba(216,174,106,.16); color: var(--text-primary); }
.vp-stage.done .vp-stage-day { color: var(--accent-gold); }
.vp-stage-mark { font-size: var(--fs-xxs); line-height: 1; color: var(--accent-gold); min-height: 8px; }
.vp-card {
  padding: 12px 13px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(216,174,106,.28);
  background: rgba(216,174,106,.05);
}
.vp-card.done > summary { cursor: pointer; list-style: none; }
.vp-card.done > summary::-webkit-details-marker { display: none; }
.vp-day-label { margin: 0 0 3px; font-size: var(--fs-xs); color: var(--accent-gold); }
.vp-day-title { margin: 0 0 9px; font-size: var(--fs-base); color: var(--text-primary); word-break: keep-all; }
.vp-done-mark { display: inline-block; margin-top: 4px; font-size: var(--fs-xs); color: var(--accent-gold); }
.vp-verse {
  margin: 0 0 5px;
  padding-left: 10px;
  border-left: 2px solid rgba(216,174,106,.5);
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--text-primary);
  word-break: keep-all;
}
.vp-src { margin: 0 0 9px; font-size: var(--fs-xs); color: var(--text-secondary); }
.vp-src a { color: var(--accent-gold); }
.vp-med { margin: 0 0 9px; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-secondary); word-break: keep-all; }
.vp-shrine { margin: 0 0 6px; }
/* ⚠️ 이 줄은 「주교회의가 이어 둔 것이 아니다」를 밝힙니다. 지우지 마십시오. */
.vp-shrine-note { margin: 5px 0 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--text-secondary); opacity: .9; word-break: keep-all; }
.vp-more { margin: 0 0 7px; }
.vp-more > summary { cursor: pointer; min-height: 34px; line-height: 34px; font-size: var(--fs-sm); color: var(--accent-gold); }
.vp-more h4 { margin: 9px 0 4px; font-size: var(--fs-sm); color: var(--accent-gold); }
.vp-more p, .vp-more li { font-size: var(--fs-sm); line-height: 1.6; color: var(--text-secondary); word-break: keep-all; }

/* 멘토 카드 안에서는 소개를 한 줄까지만 (카드가 길어지지 않게).
   전체 소개는 성지 태그를 누르면 상세 창에 다 나옵니다. */
.today-me-card .mentor-shrine-intro { -webkit-line-clamp: 1; }

/* ── 신앙의 결단 인카운터 ───────────────────────────────────────
   ⚠️ .enc-truth 는 주교회의 약전에서 그대로 옮긴 문장입니다.
      CSS 로 자르거나(text-overflow) 줄임표를 붙이지 마십시오. */
.encounter-modal { max-width: 520px; }
.enc-step { margin: 0 0 8px; font-size: var(--fs-xs); color: var(--accent-gold); }
.enc-question {
  margin: 0 0 14px; font-size: var(--fs-md); line-height: 1.75;
  color: var(--text-primary); word-break: keep-all; text-align: left;
}
.enc-choices { display: flex; flex-direction: column; gap: 8px; }
.enc-choice {
  min-height: 46px; padding: 10px 12px;
  border-radius: var(--r-sm); border: 1px solid rgba(216,174,106,.35);
  background: var(--panel); color: var(--text-primary);
  font-size: var(--fs-md); line-height: 1.45; cursor: pointer;
  text-align: left; word-break: keep-all;
}
.enc-choice:hover { border-color: rgba(216,174,106,.8); background: rgba(216,174,106,.12); }
.enc-picked { margin: 0 0 10px; font-size: var(--fs-sm); color: var(--text-secondary); }
.enc-who { margin: 0 0 6px; font-size: var(--fs-md); color: var(--accent-gold); word-break: keep-all; }
.enc-truth {
  margin: 0 0 8px; padding-left: 11px;
  border-left: 2px solid rgba(216,174,106,.55);
  font-size: var(--fs-md); line-height: 1.8;
  color: var(--text-primary); text-align: left; word-break: keep-all;
}
.enc-source { margin: 0 0 10px; font-size: var(--fs-xs); color: var(--text-secondary); text-align: left; }
.enc-source a { color: var(--accent-gold); }
.enc-reflect { margin: 0 0 10px; padding-left: 18px; text-align: left; }
.enc-reflect li {
  margin-bottom: 9px; font-size: var(--fs-md); line-height: 1.7;
  color: var(--text-primary); word-break: keep-all;
}
/* ⚠️ 이 줄이 「우리 글」과 「약전」을 갈라 줍니다. 지우지 마십시오. */
.enc-note {
  margin: 12px 0 0; font-size: var(--fs-xs); line-height: 1.55;
  color: var(--text-secondary); opacity: .9;
  text-align: left; word-break: keep-all;
}

/* ── 배낭 · 깎기 ────────────────────────────────────────────────
   ⚠️ .craft-note 는 「축복받은 성물이 아니다」를 밝힙니다. 지우지 마십시오. */
.craft-materials { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.craft-mat {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(216,174,106,.25);
  background: var(--panel);
}
.craft-mat.empty { opacity: .45; }
.craft-mat-icon { font-size: var(--fs-lg); }
.craft-mat-name { font-size: var(--fs-sm); color: var(--text-primary); word-break: keep-all; }
.craft-mat-n { font-size: var(--fs-md); color: var(--accent-gold); }
/* 「어디서 나오는지」는 칸마다가 아니라 아래 한 줄로 모읍니다 */
.craft-mat-from {
  margin: 8px 0 0;
  font-size: var(--fs-xs); line-height: 1.5;
  color: var(--text-secondary); opacity: .85; word-break: keep-all;
}
.craft-recipes { display: flex; flex-direction: column; gap: 9px; }
.craft-recipe {
  padding: 9px 11px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(216,174,106,.25);
  background: rgba(216,174,106,.05);
}
.craft-recipe.done { opacity: .7; }
/* ⚠️ 2026-09-15. 「깎으면 이렇게 됩니다」 그림을 왼쪽에 둡니다 (francisco: "만든 모습도 있었으면").
   그림 파일이 없으면 <img> 가 스스로 빠지고(onerror) 글만 남습니다 — 그때도 모양이 깨지지 않게
   flex 로 두었습니다. 그림은 종이째 뽑은 것이라 둥근 모서리와 옅은 테두리만 두고 배경은 없습니다. */
.craft-recipe, .craft-made-item { display: flex; gap: 11px; align-items: flex-start; }
.craft-recipe-body, .craft-made-body { flex: 1 1 auto; min-width: 0; }
.craft-recipe-img, .craft-made-img {
  flex: 0 0 auto; object-fit: cover;
  border-radius: var(--r-sm); border: 1px solid rgba(216,174,106,.28);
  background: transparent;
}
.craft-recipe-img { width: 56px; height: 56px; }
.craft-made-img   { width: 88px; height: 88px; }
.craft-recipe-name { margin: 0 0 4px; font-size: var(--fs-md); color: var(--text-primary); word-break: keep-all; }
.craft-stage { font-size: var(--fs-xs); color: var(--accent-gold); }
.craft-recipe-desc { margin: 0 0 5px; font-size: var(--fs-xs); line-height: 1.45; color: var(--text-secondary); word-break: keep-all; }
.craft-recipe-cost { margin: 0 0 6px; font-size: var(--fs-sm); color: var(--accent-gold); }
.craft-recipe-why { margin: 0; font-size: var(--fs-xs); color: var(--text-secondary); }
.craft-btn {
  min-height: 38px; padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(216,174,106,.45);
  background: rgba(216,174,106,.1);
  color: var(--text-primary);
  font-size: var(--fs-sm); cursor: pointer; word-break: keep-all;
}
.craft-btn:disabled { opacity: .5; cursor: default; }
.craft-note {
  margin: 10px 0 0; font-size: var(--fs-xs); line-height: 1.55;
  color: var(--text-secondary); opacity: .9; word-break: keep-all;
}
.craft-made { display: flex; flex-direction: column; gap: 9px; }
.craft-made-item {
  padding: 11px 12px; border-radius: var(--r-sm);
  border: 1px solid rgba(216,174,106,.25);
  background: var(--panel);
}
.craft-made-item.on { border-color: rgba(216,174,106,.8); background: rgba(216,174,106,.12); }
.craft-made-name { margin: 0 0 4px; font-size: var(--fs-md); color: var(--text-primary); word-break: keep-all; }
/* 각인 — 실제로 센 횟수입니다 */
.craft-made-engrave { margin: 0 0 8px; font-size: var(--fs-xs); line-height: 1.55; color: var(--text-secondary); word-break: keep-all; }

/* ── 「나 → 성장」 합치기 ────────────────────────────────────────
   ⚠️ 지우거나 접은 것이 아닙니다. 같은 것을 더 촘촘히 놓았을 뿐입니다.
      동반자 넷·성물 칸·덕 카드 모두 그대로 있습니다.

   합치기 전 실측 (390px):
     성장 탭 2,255px  ·  동반자 고르는 목록 574px  ·  성물 410px
   가장 큰 덩어리는 동반자 목록이었습니다. 카드 넷이 저마다 48px 그림과
   두 줄짜리 설명을 안고 세로로 쌓여 있었습니다. */

.equip-options-list { gap: 7px; }
.equip-option-item {
  padding: 8px 10px;
  border-radius: var(--r-sm);
  gap: 10px;
}
/* 그림을 줄입니다 — 없애지 않습니다.
   ⚠️ 2026-09-02: 34px 정사각이었습니다. 「한지 조각」으로 바뀌면서 세로가 됐습니다.
      비율(가로:세로 ≈ 46:56)을 지켜야 뜯은 가장자리 모양이 안 찌그러집니다.
   ⚠️ 2026-09-04: 33×40 은 너무 작았습니다 — 비둘기인지 천사인지 분간이 안 갔습니다.
      2048px 로 그린 그림을 33px 로 보여 주고 있었습니다. 58×71 로 키웁니다.
      (같은 화면의 성물 칸이 60×60 입니다. 그보다 작을 까닭이 없습니다.)
      화면이 20px 남짓 길어지지만, 09-02 에 줄인 것은 «두 줄짜리 설명»이 더 컸고
      그쪽은 그대로 촘촘히 둡니다. 다시 33px 로 줄이지 마십시오. */
.equip-option-item .companion-image-icon { width: 58px; height: 71px; }
.equip-option-item .companion-details h4 { font-size: var(--fs-base); margin: 0; }
.equip-option-item .companion-details p {
  margin: 2px 0 0;
  font-size: var(--fs-xs);
  line-height: 1.45;
  word-break: keep-all;
}
/* 동행 효과는 설명 뒤에 이어 붙여 한 덩어리로 읽히게 */
.equip-option-item .equip-bonus-tag {
  font-size: var(--fs-xs);
  margin-top: 0;
  margin-left: 4px;
  white-space: normal;
}
.equip-option-item .equip-action-btn {
  min-height: 34px;
  padding: 0 12px;
  font-size: var(--fs-sm);
  white-space: nowrap;
}

/* 동반 중인 수호자 줄도 같은 결로 */
.equipped-slot-row { padding: 10px 11px; gap: 10px; }
/* ⚠️ 2026-09-02: 정사각 46 → 한지 조각 비율(42×51).
   ⚠️ 2026-09-04: 42×51 도 작았습니다. 74×90 으로 키웁니다 — «함께 걷는 분»이니
      성물 칸(60×60)보다 조금 큽니다. 칸 높이는 341 → 380px. 줄이지 마십시오. */
.equipped-slot-avatar { width: 74px; height: 90px; }
.equipped-slot-info h4 { font-size: var(--fs-base); margin: 2px 0; }
.equipped-slot-info p { font-size: var(--fs-sm); line-height: 1.45; margin: 0; word-break: keep-all; }

/* 성물 두 칸 사이 여백 정리
   ⚠️ margin 을 키우면 오히려 길어집니다. 처음에 12px 로 뒀다가 17px 늘어났습니다. */
#section-inventory > h3 { margin: 8px 0 6px; font-size: var(--fs-md); }
#section-inventory > h3:first-child { margin-top: 0; }

/* 네 가지 덕 — 줄 사이를 좁힙니다 (네 줄 다 그대로 있습니다) */
.stats-card { padding: 14px; gap: 10px; }
.stats-card h3 { font-size: var(--fs-base); }
.stat-progress-item { gap: 4px; }
.stats-card .stat-title, .stats-card .stat-val { font-size: var(--fs-md); }

/* 멘토 카드 · 성인으로 가는 길 — 여백만 정리 */
.mentor-active-card { padding: 13px 14px; }
.roadmap-card { padding: 14px; }
.roadmap-card h3 { font-size: var(--fs-base); }
.roadmap-desc { font-size: var(--fs-sm); line-height: 1.5; margin: 4px 0 8px; word-break: keep-all; }
.equipment-card { padding: 14px; }
.equipment-card > h3 { font-size: var(--fs-base); }
.equip-desc { font-size: var(--fs-sm); line-height: 1.5; margin: 4px 0 10px; word-break: keep-all; }
.inventory-card { padding: 14px; }

/* 동반자 정하기 — 고르는 목록은 눌러야 펼쳐집니다 (동반 중인 분은 위에 늘 보입니다) */
.equip-change { margin-top: 10px; }
.equip-change > summary {
  cursor: pointer;
  min-height: 36px;
  line-height: 36px;
  font-size: var(--fs-sm);
  color: var(--accent-gold);
}
.equip-change[open] > summary { margin-bottom: 8px; }

/* ⚠️ 겹친 여백 걷어내기 — 지운 것이 하나도 없습니다 (2026-08-21)
   .profile-panel / .stats-card / .roadmap-card 는 display:flex 라서 이미 gap 이 있는데
   그 안의 글줄과 단추가 margin 을 또 갖고 있었습니다. 간격이 두 번 들어가 있던 것입니다.
   margin 을 0 으로 두고 gap 하나만 남깁니다. 「성장」 1,093px → 1,000px 아래. */
.profile-panel { gap: 12px; }
.roadmap-card { gap: 10px; }
.roadmap-card > .roadmap-desc,
.roadmap-card > .rank-toggle,
.roadmap-card > .roadmap-steps { margin-top: 0; margin-bottom: 0; }
.roadmap-steps { gap: 10px; }
.stats-card { gap: 8px; }
/* 카드 안쪽 여백 한 번 더 — 글자 크기는 그대로입니다 */
.mentor-active-card { padding: 10px 12px; }
.roadmap-card, .stats-card { padding: 12px; }
#panel-my-growth #captureBtn { padding: 12px 16px; }

/* ⚠️ 성물 「스탯 효과」 딱지 — 한지 배경 위에서 1.53:1 이었습니다 (거의 안 보임).
   바탕이 반투명(0.15)이라 사실상 한지 색 위에 연두색 글씨가 얹혀 있었습니다.
   글자를 진하게, 바탕을 또렷하게 바꿉니다. 글자 크기·자리는 그대로입니다. */
.stamp-detail-modal #stamp-detail-item-bonus {
  color: #2c5c3a !important;
  background: rgba(128, 237, 153, 0.32) !important;
  border: 1px solid rgba(44, 92, 58, 0.30);
}

/* ════════════════════════════════════════════════════════════════
   성지 지도 — 지도가 주인공인 배치 (2026-08-21)

   ⚠️ 전에는 style.css 에 `calc(100vh - 540px)` 이라고 적혀 있었습니다.
      군더더기에 540px 을 먼저 떼어 주고 「남는 만큼」을 지도에 주는 계산이라,
      390×844 에서 지도가 304px(화면의 36%), 360×640 에서는 150px(23%)까지
      쪼그라들고 「길찾기」 단추가 하단 탭에 잘렸습니다.
      이제는 거꾸로입니다 — 지도가 남는 자리를 다 먹고,
      전환 단추와 가까운 성지 카드가 그 위에 겹칩니다.
   ⚠️ 이 아래 세 덩어리를 지도 밖으로 도로 빼면 그만큼 지도가 줄어듭니다.
   ════════════════════════════════════════════════════════════════ */

/* 화면 높이에 딱 맞춰 세로로 폅니다 (스크롤 없음) */
#view-map.active {
  height: 100%;
  min-height: 0;
  gap: 10px;
}

/* 제목과 「돌아가기」를 한 줄로 — 85px 이던 것이 44px */
#view-map .view-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
}
#view-map .view-header h2 { margin: 0; font-size: var(--fs-xl); }
#view-map .view-header-action { margin: 0; white-space: nowrap; flex: 0 0 auto; }

/* 지도는 남는 자리를 다 씁니다 */
#view-map .map-wrapper,
#view-map.has-checkin .map-wrapper {
  flex: 1 1 auto;
  height: auto;
  min-height: 240px;
}

/* ── 여정 / 지도 전환 — 지도 위 가운데 칩 ───────────────────── */
/* ⚠️ 왼쪽 위에는 「지도 필터」, 오른쪽 위에는 미니맵이 이미 있습니다. 가운데가 빕니다. */
.map-mode-switch.map-overlay-chip {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9200;
  margin: 0;
  /* ⚠️ 2026-09-13. 같은 줄의 .site-toggle.map-overlay-chip 이 09-07에 이미
     고친 것과 같은 병 — 배경만 늘 어둡게 박혀 있어 밝은 화면에서 도드라졌습니다. */
  background: rgba(var(--panel-2-rgb), 0.86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(212, 175, 55, 0.35);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.map-overlay-chip .map-mode-btn { min-height: 36px; padding: 0 16px; font-size: var(--fs-md); }

/* 「순교의 자리」 보임/감춤 — 보기 방식 칩 바로 아래에 둡니다.
   ⚠️ 금색 테두리를 쓰지 않습니다. 금색은 성지의 표시입니다. */
.site-toggle.map-overlay-chip {
  position: absolute;
  /* ⚠️ 가운데에 두면 왼쪽 「지도 필터」와 겹칩니다. 오른쪽에 붙입니다.
     위 「여정/지도」 칩과도 4px 은 띄웁니다 (360px 에서 맞닿았습니다). */
  top: 60px;
  right: 10px;
  z-index: 9200;
  display: flex;
  padding: 4px;
  border-radius: var(--r-sm);
  /* ⚠️ 2026-09-07. 「글씨가 안보여」(가까운 성지 시트) 를 고치며 보니, 이 칩도
     같은 병이었습니다 — 배경이 rgba(20,16,10,…) 로 늘 어두운데 글자는
     var(--text-secondary)/var(--text-primary) 라 밝은 화면에서 어두운 글자로
     바뀌어 어두운 칩 위에서 거의 안 보였습니다. --panel-2 계열로 바꿉니다. */
  background: rgba(var(--panel-2-rgb), 0.74);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
/* 「순교의 자리」는 지도 마커 필터입니다. 여정 관문에서는 기능도 없고
   지역 카드와 겹치므로 지도 보기에서만 보여 줍니다. */
.map-wrapper.route-mode .site-toggle.map-overlay-chip { display: none; }
.site-toggle-btn {
  min-height: 36px;
  padding: 0 14px;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.site-toggle-btn.active {
  background: rgba(226, 226, 235, 0.16);
  color: var(--text-primary);
}

/* ── 가까운 성지 — 지도 위에 뜨는 시트 ──────────────────────── */
.shrine-sheet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 9300;
  display: flex;
  flex-direction: column;
  max-height: 64%;
  padding: 0 10px 8px;
  /* ⚠️ 2026-09-07. francisco: "글씨가 안보여" — 예전에는 rgba(16,13,8,…) 어두운
     색이 그대로 박혀 있어, 밝은 화면에서도 이 시트만 계속 어두운 채로 남았습니다.
     그 위 글자(성지 이름·거리·단추)는 화면에 맞춰 밝은 화면용 «어두운» 글자색으로
     바뀌므로, 어두운 판 위에 어두운 글자가 얹혀 거의 안 보였습니다.
     --panel-2 와 같은 색 계열(--panel-2-rgb)로 바꿔 화면마다 알맞은 색이 되게
     했습니다 (line 22의 「새 판을 깔 때는 반드시 네 단계 중에서 고르라」는 원칙인데,
     그라디언트라 그 네 변수를 그대로 못 쓰고 숫자 버전을 새로 만들었습니다). */
  background: linear-gradient(180deg,
              rgba(var(--panel-2-rgb), 0.00) 0%,
              rgba(var(--panel-2-rgb), 0.86) 18%,
              rgba(var(--panel-2-rgb), 0.96) 100%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(212, 175, 55, 0.28);
}
/* 손잡이 — 눌러서 접고 폅니다 (44px 을 지킵니다) */
.sheet-handle {
  flex: 0 0 auto;
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.sheet-grip {
  width: 36px; height: 4px; border-radius: var(--r-xs);
  background: rgba(255, 255, 255, 0.38);
}
.sheet-handle-label { white-space: nowrap; }
/* ⚠️ 접는 것이지 없애는 것이 아닙니다. 미사 참례 띠는 접혀 있어도 그대로 보입니다. */
.shrine-sheet.collapsed .shrine-cards { display: none; }

#view-map .shrine-cards { margin: 0; overflow-y: auto; min-height: 0; }
#view-map .shrine-cards-head { padding: 0 4px 6px; }
#view-map .mass-checkin-bar { margin: 0 0 8px; }

/* 시트와 전환 칩이 덮는 만큼 안쪽 것들을 비켜 세웁니다 (가려지면 안 됩니다) */
/* ⚠️ .rpg-status-bar 는 position:absolute 라서 부모 padding 으로는 안 밀립니다.
      bottom 값을 직접 바꿔야 합니다. 예전에 padding 만 주고 「올라갔겠지」 했다가
      기력·집중 띠가 시트 뒤로 숨었습니다. */
/* ⚠️ 시트 높이는 카드 내용에 따라 달라집니다. app.js 의 syncSheetSpace() 가
      실제로 재서 --sheet-h 에 넣어 줍니다. 여기에 숫자를 박아 두면
      미사 참례 띠가 떴을 때 기력·집중 띠가 시트 뒤로 숨습니다. */
.map-wrapper { --sheet-h: 250px; }
.map-wrapper .route-map { padding-top: 58px; padding-bottom: calc(var(--sheet-h) + 12px); }
/* ⚠️ 기력·집중 띠와 저작권 표시가 같은 자리를 다투었습니다.
   저작권 표시가 맨 아래(시트 바로 위), 띠는 그 위로 올립니다.
   --attr-h 는 저작권 표시가 차지하는 높이입니다. */
.map-wrapper { --attr-h: 24px; }
.map-wrapper .rpg-status-bar { bottom: calc(var(--sheet-h) + var(--attr-h) + 10px); }

/* 지도 저작권 표시 — 성지 시트 위로 올립니다 (2026-08-28)
   ⚠️ 이 표시는 «반드시 보여야 합니다». ODbL 라이선스와 OSM 타일 사용 정책이
      OpenStreetMap 크레딧을 요구합니다.
      예전에는 attributionControl: false 로 아예 꺼 두었고, 켜고 보니 이번에는
      성지 목록 시트가 그 위를 덮고 있었습니다(시트 476px · 표시 724px).
   ⚠️ 시트 높이(--sheet-h)는 카드 내용에 따라 달라지므로 숫자를 박지 말고
      그 변수를 그대로 씁니다. 이 규칙을 지우지 마십시오. */
/* ⚠️ index.html 에서 leaflet.css 가 style.css «뒤»에 실립니다.
   그래서 같은 급의 선택자로는 리플릿 기본값에 집니다 (흰 바탕이 그대로 남았습니다).
   #map 을 넣어 급을 올립니다. 이 id 를 빼지 마십시오. */
#map.leaflet-container .leaflet-control-attribution {
  position: relative;
  bottom: calc(var(--sheet-h) + 8px);
  margin: 0;
  padding: 2px 7px;
  border-radius: var(--r-xs) 0 0 0;
  background: rgba(14, 11, 7, 0.72);
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-xxs);
  line-height: 1.5;
}
#map.leaflet-container .leaflet-control-attribution a { color: rgba(255, 255, 255, 0.92); }
/* 리플릿 자체 광고는 뺍니다 — 라이선스가 요구하는 것은 OpenStreetMap 크레딧입니다 */
#map.leaflet-container .leaflet-control-attribution .leaflet-attribution-flag,
#map.leaflet-container .leaflet-control-attribution a[href*="leafletjs.com"] { display: none; }

/* 전환 칩이 맨 윗줄을 혼자 씁니다.
   ⚠️ 「지도 필터」(왼쪽)와 미니맵(오른쪽)을 그대로 두면 가운데 칩과 어깨가 닿습니다
      — 지도 폭 348px 에 칩 132 + 필터 120 + 미니맵 100 = 352. 한 줄에 안 들어갑니다.
      그래서 둘을 한 단 내려 둘째 줄에 나란히 세웁니다. */
.map-wrapper .map-filter-panel { top: 60px; }

/* 「길찾기」 넉 자가 두 줄로 깨져 있었습니다 */
.shrine-card-btn { white-space: nowrap; font-size: var(--fs-md); padding: 0 6px; }

/* 낮은 화면 — 시트를 펴면 카드가 통째로 보여야 합니다.
   ⚠️ 58% 로 눌러 뒀더니 「길찾기」 단추 줄이 반쯤 잘렸습니다.
      낮은 화면에서는 시트를 처음부터 접어 두고(app.js 의 initShrineSheet),
      펼쳤을 때는 카드가 다 들어갈 만큼 자리를 내줍니다. */
@media (max-height: 700px) {
  #view-map .map-wrapper,
  #view-map.has-checkin .map-wrapper { height: auto; min-height: 200px; }
  .shrine-sheet { max-height: 72%; }
  .map-wrapper .route-map { padding-bottom: 60px; }
  .map-wrapper .rpg-status-bar { bottom: 60px; }
}

/* ════════════════════════════════════════════════════════════════
   묵상기도 — 렉시오 디비나 네 걸음 (2026-08-21)
   ⚠️ 예전에는 다섯 화면이 전부 「읽고 → 계속」이었습니다.
      낱말 고르기 · 적는 칸 · 호흡하는 원이 여기 붙습니다.
   ════════════════════════════════════════════════════════════════ */

/* 전통 이름은 한글 옆에 작게 */
.lectio-la {
  font-size: var(--fs-xxs);
  letter-spacing: 0.02em;
  opacity: 0.62;
  font-style: italic;
}

/* ── 묵상 고르기 ─────────────────────────────────────────────── */
.med-today { margin: 6px 0 12px; }
.med-choice {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 12px 14px;
  margin: 0 0 8px;
  text-align: left;
  border-radius: var(--r-sm);
  border: 1px solid rgba(212, 175, 55, 0.28);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  font-family: inherit;
  cursor: pointer;
}
.med-choice.today {
  border-color: var(--accent-gold);
  background: rgba(212, 175, 55, 0.10);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.med-choice-name { display: block; font-size: var(--fs-base); }
.med-choice small { display: block; margin-top: 3px; font-size: var(--fs-sm); color: var(--text-secondary); }
/* ⚠️ 2026-09-17 — 아이콘을 뺀 자리에 넣은 «마지막으로 바친 날» 한 줄.
   테마 줄보다 한 단 더 작고 옅게. 눈에 먼저 들어오면 안 됩니다. */
.med-choice-last { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--text-secondary); opacity: 0.7; }
.med-today-tag {
  display: inline-block;
  margin-bottom: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-gold);
  color: var(--on-gold);
  font-size: var(--fs-xs);
  font-weight: 700;
}
/* ⚠️ 이 줄이 「왜 오늘 이 묵상인지」입니다. 지우면 그냥 아무거나 고른 것이 됩니다. */
.med-today-why {
  margin: 0 2px 4px;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-secondary);
  word-break: keep-all;
}
.med-more > summary {
  cursor: pointer;
  min-height: 40px;
  line-height: 40px;
  font-size: var(--fs-md);
  color: var(--accent-gold);
  text-align: center;
}
.med-more[open] > summary { margin-bottom: 6px; }

/* ── 1걸음 · 말씀에서 낱말 고르기 ───────────────────────────── */
/* ⚠️ 구절 원문은 위 blockquote 에 그대로 있습니다. 아래는 고르는 칩일 뿐입니다. */
.med-word-lead {
  margin: 14px 0 8px;
  font-size: var(--fs-md);
  color: var(--text-secondary);
  word-break: keep-all;
}
.med-word-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.med-word-chip {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.32);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--fs-md);
  cursor: pointer;
}
.med-word-chip.on {
  background: var(--accent-gold);
  border-color: var(--accent-gold);
  color: var(--on-gold);
  font-weight: 700;
}
.med-word-skip { margin: 8px 0 0; font-size: var(--fs-xs); color: var(--text-secondary); opacity: 0.8; }

/* 고른 낱말은 남은 걸음 내내 따라다닙니다 */
.med-word-badge {
  margin: 0 0 10px;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  background: rgba(212, 175, 55, 0.10);
  border: 1px solid rgba(212, 175, 55, 0.22);
  font-size: var(--fs-md);
  color: var(--text-secondary);
}
.med-word-badge strong { color: var(--accent-gold); }

/* ── 2걸음 · 적는 칸 ────────────────────────────────────────── */
.med-notes { text-align: left; margin-top: 12px; }
.med-note-row { display: block; margin-bottom: 12px; }
.med-note-row > span {
  display: block;
  margin-bottom: 5px;
  font-size: var(--fs-md);
  line-height: 1.5;
  word-break: keep-all;
}
.med-note-input {
  width: 100%;
  min-height: 52px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(212, 175, 55, 0.24);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--fs-md);
  line-height: 1.5;
  resize: vertical;
}
.med-note-input::placeholder { color: var(--text-secondary); opacity: 0.6; }
/* ⚠️ 이 줄을 지우지 마십시오. 적은 것이 어디로 가는지 알 권리가 있습니다. */
.med-note-privacy {
  margin: 4px 0 0;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-secondary);
  word-break: keep-all;
}
.med-last { text-align: left; margin: 10px 0; }
.med-last > summary {
  cursor: pointer;
  min-height: 36px;
  line-height: 36px;
  font-size: var(--fs-sm);
  color: var(--accent-gold);
}
.med-last ul { margin: 4px 0 0; padding-left: 18px; }
.med-last li {
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--text-secondary);
  word-break: keep-all;
}
/* ⚠️ 2026-09-11 — 지난번 답 옆에 그때 그 질문을 함께 보여 주는 자리(.med-last li,
   .med-note-card li 둘 다에서 씀). 답보다 작고 옅게 — 질문은 실마리일 뿐, 주인공은 답. */
.med-note-q {
  display: block;
  font-size: var(--fs-xs);
  color: var(--accent-gold);
  opacity: 0.85;
  margin-bottom: 2px;
  word-break: keep-all;
}

/* ── 4걸음 · 호흡하는 원 ────────────────────────────────────── */
/* ⚠️ 숫자 카운트다운은 아래 .verse-reveal-left 에 작고 조용하게 남아 있습니다.
      남은 시간을 아예 감추면 눌러 보고 나서야 거절당합니다. 지우지 마십시오. */
/* ⚠️ 2026-09-07 — francisco 님: 「좀더 집중할 수 있는 방식의 디자인」으로 교체.
      얇은 테두리 원이 커졌다 작아지던 것을, 은은한 금빛 «빛무리»가 숨을 따라
      번지듯 커지고 옅어지는 방식으로 바꿨습니다. 가장자리를 아주 살짝 눌러
      (비네트) 시선이 원 하나에 머물도록 했습니다.
      ⚠️ 글자는 여전히 원 «안»이 아니라 원 아래에 둡니다 — 빛무리가 가장 클 때
         글자를 그 위에 얹어 보니 대비가 3.55:1 로 기준(4.5:1) 미달이었습니다.
         이 앱은 모든 글자에 WCAG AA(4.5:1)를 지켜왔습니다. 다시 원 안으로
         옮기지 마십시오.
      ⚠️ 2026-09-07 두 번째 — 첫 버전은 "변동이 없는데 너무 약해" 라는 말을
         들었습니다. 커지는 폭(60→164px)과 밝기(중심 0.5)가 너무 옅어서 눈에
         띄지 않았던 것입니다. 글자와 안 겹치는 범위 안에서 폭·밝기를 확 키웠습니다. */
.breath-ring {
  position: relative;
  width: 208px;
  height: 208px;
  margin: 16px auto 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ⚠️ 2026-09-08 — "원이 안 움직여 그리고 계란후라이 같아".
      고정된 테두리 원(::after, «접시» 같은 동그란 선)과, 그 안의 꽉 찬
      단색 원반(core)이 겹쳐서 «달걀후라이»(노른자+흰자 테두리)처럼 보였던
      것입니다. 고정 테두리 원은 걷어내고, 비네트도 뚜렷한 원이 아니라
      훨씬 크고 흐릿하게 넓혀 «테두리 선»으로 안 보이게 했습니다.
      (안 움직이는 문제는 별개로 — OS/브라우저의 «동작 줄이기» 설정이 켜져
      있으면 이 앱은 일부러 멈춥니다. 어지럼을 느끼는 분을 위한 기존 결정이라
      건드리지 않았습니다 — 설정 확인을 안내했습니다.) */
.breath-ring::before {
  content: "";
  position: absolute;
  inset: -70px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20, 14, 6, 0) 60%, rgba(20, 14, 6, 0.03) 85%, rgba(20, 14, 6, 0.06) 100%);
  pointer-events: none;
}
/* ⚠️ 2026-09-19 — 360px 폰에서 이 비네트(348px)가 묵상 창 몸통(286px)보다 넓어 옆으로 31px 넘쳤습니다
   (.agents/meditation.js). 좁은 화면에서만 옆 여백을 줄입니다. 거의 안 보이는 옅은 그늘이라 모양 차이는 없습니다. */
@media (max-width: 400px) {
  .breath-ring::before { inset: -70px -20px; }
}
/* ⚠️ 2026-09-07 세 번째 — "너무 흐려 좀더 생동감 있게" 라는 말을 들었습니다.
      원인은 겹친 blur 였습니다: 안개처럼 퍼지는 gradient에 filter:blur까지
      더해 있으니 초점이 없는 «뿌연 덩어리»로 보였습니다.
      → 안쪽 core 자체는 filter:blur를 걷어내고, 색도 훨씬 선명·채도 높은
        호박빛으로 바꿔 «또렷한 심지»가 있게 했습니다. 부드러운 «번짐»은
        core 바깥의 box-shadow(그 자체로 blur 반경을 가짐) 하나로만 만듭니다.
        즉 안은 또렷하게, 밖으로만 은은하게 퍼지는 구조입니다.
      ⚠️ 2026-09-08 — «단색 원반» 처럼 보이지 않도록, 가운데의 꽉 찬 부분을
        줄이고 그라데이션이 더 일찍부터 옅어지게 했습니다(원반이 아니라
        «빛의 방울»에 가깝게). */
.breath-core {
  position: absolute;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(circle, #f2b45a 0%, #eda43f 22%, rgba(226, 158, 60, 0.55) 48%, rgba(216, 174, 106, 0) 78%);
  box-shadow: 0 0 20px 6px rgba(226, 158, 60, 0.22);
  transition: width 4s cubic-bezier(.45, 0, .4, 1), height 4s cubic-bezier(.45, 0, .4, 1),
              box-shadow 4s cubic-bezier(.45, 0, .4, 1);
}
.breath-ring.inhale .breath-core {
  width: 190px; height: 190px;
  box-shadow: 0 0 32px 10px rgba(226, 158, 60, 0.42);
  transition-duration: 4s;
}
.breath-ring.exhale .breath-core {
  width: 42px; height: 42px;
  box-shadow: 0 0 20px 6px rgba(226, 158, 60, 0.22);
  transition-duration: 6s;
}
/* 글자는 원 안이 아니라 원 아래에 둡니다 (안에 두면 숨이 커질 때 묻히고, 대비도 낮아집니다) */
.breath-label {
  position: relative;
  margin: 0 0 6px;
  text-align: center;
  font-size: var(--fs-md);
  letter-spacing: 0.1em;
  color: var(--accent-gold);
  opacity: 0.9;
  transition: opacity 0.4s ease;
}
/* 「들이쉬기」↔「내쉬기」로 글자가 바뀌는 순간, 뚝 끊기지 않고 살짝 사라졌다 나타남 */
.breath-label.fading { opacity: 0; }
/* 움직임을 싫어하도록 설정하신 분께는 원을 멈추고 글자만 바꿉니다 */
.breath-ring.still .breath-core {
  transition: none; width: 118px; height: 118px;
  box-shadow: 0 0 30px 10px rgba(216, 174, 106, 0.24);
}
@media (prefers-reduced-motion: reduce) {
  .breath-ring .breath-core { transition: none; }
  .breath-label { transition: none; }
}

/* ⚠️ 화면보다 긴 창은 아래 단추에 손이 안 닿았습니다 (2026-08-21).
   .modal-overlay 가 flex + align-items:center 인데 넘치는 부분을 스크롤할 길이 없어
   360×640 에서는 「계속」도 「중단하기」도 화면 밖이었습니다.
   묵상에 적는 칸을 넣다가 드러났지만, 원래부터 모든 긴 창이 그랬습니다.
   창 자체 높이를 화면 안으로 묶고, 넘치는 본문만 창 안에서 굴립니다.
   ⚠️ 머리말과 아래 단추는 늘 보여야 합니다 — 굴리는 것은 본문뿐입니다.

   ⚠️⚠️ 2026-09-02 — 위 고침이 **일곱 창에 안 걸려 있었습니다.**
   그 일곱은 상자 이름이 `.modal-card` 가 아니라 `.modal-content nav-app-modal` 이었고,
   그 두 이름에는 **CSS 가 한 줄도 없었습니다.** 그래서 높이 제한도, 본문 굴림도,
   창 바탕색조차 없이 내용 길이만큼 늘어나 있었습니다.
     · 땀의 순교자(modal-choe)  창 높이 4,527px · 「닫기」가 y=2,686 (화면은 844)
     · 멘토 그림에 대하여(modal-portrait)  1,049px · 「닫기」가 y=946
   화면 한가운데를 하단 탭 막대가 가로지르는 것처럼 보인 것이 이것입니다.
   일곱을 모두 `.modal-card` 로 고쳐 이름을 하나로 합쳤습니다.
   ⚠️ 새 창을 만들 때 상자 이름은 반드시 `.modal-card` 입니다. 다른 이름을 지어
      쓰면 이 고침이 그 창에는 안 걸립니다 — `.agents/modalfit.js` 가 이를 지킵니다. */
.modal-card {
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);   /* ⚠️ 아이폰 — 주소창이 펼쳐진 상태에서도 창이 화면 안에 들게 (2026-09-02) */
  /* ⚠️ 2026-09-25 — 상태 표시줄·홈 막대 자리만큼 더 빼야 창 머리(이름)가 가리지 않습니다 (.modal-overlay 여백과 짝) */
  max-height: calc(100dvh - 40px - var(--safe-top) - env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
}
.modal-card > .modal-header,
.modal-card > .modal-footer { flex: 0 0 auto; }
.modal-card > .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── 묵상 노트 (기도 → 나의 기록) ──────────────────────────────
   ⚠️ 적어 두신 글을 읽고 지울 수 있는 유일한 자리입니다. 없애지 마십시오. */
.med-note-card {
  padding: 10px 12px;
  margin-bottom: 8px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(212, 175, 55, 0.20);
  background: rgba(255, 255, 255, 0.04);
  text-align: left;
}
.med-note-card-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--fs-md);
  font-weight: 600;
}
.med-note-when { color: var(--text-secondary); font-weight: 400; font-size: var(--fs-sm); white-space: nowrap; }
.med-note-word { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--accent-gold); }
.med-note-card ul { margin: 6px 0 0; padding-left: 18px; }
.med-note-card li {
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--text-secondary);
  word-break: keep-all;
}
.med-note-clear {
  width: 100%;
  min-height: 40px;
  margin-top: 4px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(var(--line-rgb), 0.14);
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}

/* ⚠️ 「렉시오 디비나」라는 이름이 화면 어디에도 없었습니다 — 주석에만 있었고
   화면에는 라틴어(Lectio…)만 나갔습니다. 기도 이름을 우리 글로 먼저 밝힙니다. (2026-08-21) */
.lectio-name {
  color: var(--accent-gold);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.lectio-intro {
  margin: 0 0 12px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.20);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-secondary);
  word-break: keep-all;
}
.lectio-intro strong { color: var(--accent-gold); }
.lectio-intro span { font-size: var(--fs-sm); opacity: 0.85; }
/* 이 걸음이 무엇을 하는 걸음인지 한 줄 */
.lectio-desc {
  margin: 2px 0 10px;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-secondary);
  word-break: keep-all;
}

/* ════════════════════════════════════════════════════════════════
   여닫이 화살표 — 삼각형 글자(▲▼▶) 대신 CSS 로 그립니다 (2026-08-21)
   ⚠️ 「[펼치기 ▲]」처럼 대괄호와 삼각형을 같이 쓰던 자리가 여럿이었습니다.
      글꼴마다 크기가 달라 줄이 흔들리고, 화면이 지저분했습니다.
      ⚠️ 「접힌다/펼쳐진다」는 것 자체는 반드시 보여야 합니다 — 없애지 마십시오.
   ════════════════════════════════════════════════════════════════ */
.ui-caret {
  display: inline-block;
  vertical-align: middle;
}
.ui-caret::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 5px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
}
.ui-caret.open::after { transform: rotate(-135deg) translate(-1px, -1px); }

/* <details> 의 기본 삼각형도 같은 화살표로 바꿉니다 */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::marker { content: ''; }
details > summary::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 7px;
  vertical-align: middle;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
}
details[open] > summary::after { transform: rotate(-135deg) translate(-1px, -1px); }

/* 멘토 주제어 — 「사명 · 용기 · 충실 · 복음 선포」의 가운뎃점을 뗀 자리 (2026-08-21)
   ⚠️ 점 없이 그냥 이으면 「사명용기충실복음 선포」로 붙어 읽힙니다.
      낱말 사이는 여백과 옅은 칸으로 가릅니다. */
.kw-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 2px 0 5px;
}
.kw {
  padding: 1px 7px;
  border-radius: var(--r-xs);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  font-size: var(--fs-xxs);
  line-height: 1.55;
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════
   단추 위계 — 꽉 채운 금색은 한 화면에 하나 (2026-08-21)
   ⚠️ 「오늘」 화면에 금색으로 꽉 채운 단추가 셋이 연달아 있었습니다.
      셋 다 같은 무게라 무엇을 먼저 할지가 안 보였습니다.
      새 단추를 만들 때는 아래 셋 중에서 고르십시오.
        1) 꽉 채움  — 이 화면에서 할 일 하나            (배경 var(--accent-gold))
        2) 옅은 금색 — 그 밖의 할 일                     (배경 var(--gold-soft))
        3) 글자만   — 곁들이 · 바깥 링크                 (배경 없음)
      ⚠️ 「덜 중요하니 없애자」가 아닙니다. 무게만 낮춥니다.
   ════════════════════════════════════════════════════════════════ */
.today-secondary-btn,
.dev-tools-btn,
.record-add-btn {
  background: var(--gold-soft);
  border: 1px solid var(--gold-soft-border);
}


/* 순례 증서 단추 — 인라인 style 에 어두운 색이 박혀 있던 것을 규칙으로 옮깁니다 (2026-08-21)
   ⚠️ 밝은 화면에서 이 단추 하나만 새까맸습니다. */
#captureBtn {
  background: var(--gold-soft) !important;
  color: var(--accent-gold) !important;
  border: 1px solid var(--gold-soft-border) !important;
  border-radius: var(--r-md) !important;
  font-size: var(--fs-md) !important;
  box-shadow: none !important;
}

/* ════════════════════════════════════════════════════════════════
   아이콘 정비 (2026-08-21)
   ⚠️ 바깥으로 나가는 링크에 「↗」를 글자로 붙여 두었습니다.
      글꼴마다 크기·굵기가 달라 줄이 흔들렸습니다 — 삼각형(▲▼▶) 뺀 것과 같은 문제입니다.
      화살표는 CSS 로 그립니다. ⚠️ 표시 자체는 남깁니다 —
      「누르면 앱 밖으로 나간다」는 것은 반드시 미리 알려야 합니다.
   ════════════════════════════════════════════════════════════════ */
.ext-link::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 5px;
  vertical-align: middle;
  border-top: 1.4px solid currentColor;
  border-right: 1.4px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
}

/* ── 선 아이콘 ─────────────────────────────────────────────────
   ⚠️ 색을 여기서 정하지 마십시오. currentColor 라서 글자색을 따라갑니다 —
      밝은 화면·어두운 화면에서 알아서 뒤집히는 것이 이 방식의 요점입니다. */
.ui-icon {
  display: inline-block;
  vertical-align: -0.16em;
  flex: 0 0 auto;
}
.ui-icon + * { margin-left: 2px; }

/* ── 붓으로 그린 아이콘 (icon_*.webp) ──────────────────────────
   ⚠️ 이건 <img> 라 currentColor 를 못 따릅니다. 그래서 «지금 있는 자리»는
      색 대신 진하기로 나타냅니다 (선 아이콘은 금빛으로, 그림은 또렷하게).
      어두운 화면에서는 먹빛이 바탕에 묻히므로 종이빛 테를 둘러 띄웁니다. */
.ui-icon-paint {
  object-fit: contain;
  opacity: 0.66;
  transition: opacity 0.2s;
}
[data-theme="dark"] .ui-icon-paint {
  /* ⚠️ 번지게 하지 마십시오 — 넓게 퍼지면 «빛나는 게임 아이콘»이 됩니다.
     한지 한 겹만 뒤에 받친 정도로, 1px 만 둡니다. */
  filter: drop-shadow(0 0 1px rgba(233, 222, 200, 0.62));
}
.nav-tab-btn:hover .ui-icon-paint { opacity: 0.85; }
.nav-tab-btn.active .ui-icon-paint { opacity: 1; }

/* 아이콘 자리 — 이모지가 있던 크기를 그대로 이어받습니다 */
.today-card-icon[data-icon] { display: inline-flex; align-items: center; color: var(--accent-gold); }
.today-card-icon[data-icon] .ui-icon { width: 22px; height: 22px; }
/* 말씀·기도·실천·동행·다음 순례 카드 머리 — 멘토 그림과 같은 손에서 나온 붓 그림 (2026-09-05).
   nav 와 같은 UI_ICON_PAINTED 붓 그림 자리라, 옅어지는 opacity 도 같이 따라옵니다.
   nav 는 «지금 켠 탭»을 진하게 보여 주려고 옅였지만, 카드 머리는 켜고 끄는 게 없으니 늘 또렷해야 합니다. */
.today-card-icon[data-icon] .ui-icon-paint { opacity: 1; }
.stat-icon[data-icon] { display: inline-flex; align-items: center; vertical-align: -0.18em; }
.stat-icon[data-icon] .ui-icon { width: 17px; height: 17px; }
.spiritual-menu-grid button > [data-icon] { display: inline-flex; align-items: center; margin-right: 6px; color: var(--accent-gold); }
.spiritual-menu-grid button > [data-icon] .ui-icon { width: 18px; height: 18px; }
.nav-app-btn > [data-icon] { display: inline-flex; align-items: center; margin-right: 6px; }
.nav-app-btn > [data-icon] .ui-icon { width: 18px; height: 18px; }
/* 하단 네 칸 막대 — 화면 안과 같은 한 벌 */
.nav-tab-ico { display: inline-flex; align-items: center; justify-content: center; }
.nav-tab-ico .ui-icon { width: 24px; height: 24px; }
/* ── 「나」 칸의 여자 그림만 «상반신»으로 (2026-09-11) ────────────────
   ⚠️ francisco: "나 위에 남자 여자 그림 상반신으로 하면 어때 너무 작아서 안보여"
      아래 「나」 칸의 붓 그림은 성별에 따라 둘로 갈립니다(app.js updateNavPersonIcon).
        · icon_person.webp        (남자) — 갓 쓴 «상반신». 얼굴이 그림 폭의 20%.
        · icon_person_female.webp (여자) — 치마까지 다 그린 «전신». 얼굴이 12.5%.
      둘 다 24px 로 그려지니, 여자 쪽만 얼굴이 3px 남짓이라 사람인지도 모릅니다.
   ⚠️ 그림 파일은 손대지 않았습니다(붓으로 다시 그리지 않고서는 못 고칩니다).
      화면에서만 2.1배 당겨 상반신만 보이게 하고, 얼굴이 남자 그림과 같은
      높이(칸의 45%쯤)에 오도록 top 을 잡았습니다.
      1.63배(얼굴 «너비»만 남자와 같게 맞춘 값)도 그려 보았으나, 여자 그림은
      어깨가 좁아 24px 자리에서 여전히 남자보다 작아 보였습니다. 1.63·1.85·
      2.1·2.35배를 나란히 놓고 골라 2.1배로 정했습니다 (2026-09-11).
   ⚠️ 남자 그림에는 넣지 마십시오 — 이미 상반신이라 또 당기면 갓이 잘립니다.
   ⚠️ 언젠가 icon_person_female.webp 을 «상반신»으로 다시 그리시면
      (아이콘그림_뽑기.py) 이 세 줄을 지우셔야 합니다. 안 지우면 두 번 당겨집니다. */
#nav-person-ico { position: relative; width: 24px; height: 24px; overflow: hidden; }
#nav-person-ico .ui-icon-paint[src$="icon_person_female.webp"] {
  position: absolute; left: 50%; top: 18.75%;
  width: 210%; height: auto; max-width: none;
  transform: translateX(-50%);
}
/* 등급 그림 — 이름 앞에 작게 */
.rank-ico { display: inline-flex; align-items: center; margin-right: 5px; color: var(--accent-gold); }
.rank-ico .ui-icon { width: 16px; height: 16px; }
.user-rank-tag .ui-icon, .profile-rank-badge .ui-icon { vertical-align: -0.15em; }
/* 카드·창의 머리 아이콘 */
.hd-ico { display: inline-flex; align-items: center; margin-right: 6px; color: var(--accent-gold); }
.hd-ico .ui-icon { width: 17px; height: 17px; }
/* 창 머리(제목이 큰 글씨)에서는 그림도 그만큼 키웁니다 */
.modal-header h2 .hd-ico .ui-icon { width: 21px; height: 21px; }
.craft-mat-icon .ui-icon { width: 20px; height: 20px; color: var(--accent-gold); }
.craft-recipe-cost .ui-icon { vertical-align: -0.2em; margin-right: 1px; }
.equip-bonus-tag .ui-icon { vertical-align: -0.16em; }
.vt { display: inline-flex; vertical-align: -0.14em; }
.vt .ui-icon { width: 14px; height: 14px; }
/* 성지 태그의 자리 표시 — 그림이 줄 높이를 늘리지 않게 붙여 둡니다.
   ⚠️ 📍 이모지를 그림으로 바꾸면서 카드가 2px 늘어 400px 선을 넘었습니다. */
.mentor-shrine-tag { display: inline-flex; align-items: center; gap: 4px; line-height: 1.2; }
.mentor-shrine-tag .ui-icon { width: 14px; height: 14px; vertical-align: 0; }

/* 성지 카드의 단추 셋 — 길찾기·달력·코스 (2026-08-27)
   ⚠️ 🧭 📅 📌 이모지를 선 아이콘으로 바꾸면서 넣었습니다.
      글자와 그림을 가운데로 모으지 않으면 그림만 위로 뜹니다.
      단추 높이 44px 는 손가락 기준입니다 — 줄이지 마십시오. */
.shrine-card-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.shrine-card-btn .ui-icon { width: 16px; height: 16px; flex: none; }
.shrine-card-btn.icon .ui-icon { width: 18px; height: 18px; }
.shrine-card-mass { display: inline-flex; align-items: center; gap: 4px; }
.shrine-card-mass .ui-icon { width: 13px; height: 13px; flex: none; }
/* 도장 위의 미사 표식 — 예전에는 ⛪ 글자라 line-height 로 가운데를 맞췄습니다.
   그림으로 바뀌었으니 flex 로 맞춥니다. */
.stamp-mass-mark { display: inline-flex; align-items: center; justify-content: center; line-height: 1; color: var(--accent-gold); }
.stamp-mass-mark .ui-icon { width: 13px; height: 13px; }
.mass-checkin-text strong { display: inline-flex; align-items: center; gap: 5px; }
.mass-checkin-text .ui-icon { width: 15px; height: 15px; flex: none; }
.pilgrimage-companion-prayer .vt .ui-icon,
.tm-line .vt .ui-icon { width: 15px; height: 15px; }
/* 「나의 영적 여정」 목록만 사덕(신덕·굳셈·용기·애덕)을 붓 그림으로 키웁니다.
   다른 곳(연장 보너스, 동반자 기도문 등)의 .vt 는 14~16px 로 그대로 두고
   색깔이 바뀌는 선 그림을 씁니다 — 여기만 붓 그림 최소 크기(24px)를 넘깁니다. */
.today-virtue-row .vt { vertical-align: -0.22em; }
.today-virtue-row .vt .ui-icon { width: 24px; height: 24px; }
.today-virtue-row .vt .ui-icon-paint { opacity: 1; }
.equip-action-btn .ui-icon, .dev-tools-btn .ui-icon { vertical-align: -0.18em; }
#companion-prayer-title { display: inline-flex; align-items: center; }
/* ⚠️ <small> 을 그냥 두면 브라우저가 0.8배(0.633rem)로 줄여서
   정해 둔 여덟 단계 밖으로 나갑니다. uistyle.js 가 이것을 잡습니다. */
#active-equipped-bonus small { font-size: var(--fs-xs); }

/* 지도 그림을 못 받았을 때 — 회색 판만 남기지 않습니다 (2026-08-26)
   ⚠️ 「인터넷을 켜세요」가 아니라 «앱 안에 있는 여정»으로 안내합니다.
      성지에는 신호가 없는 곳이 많고, 그것은 쓰시는 분 잘못이 아닙니다. */
.tile-offline-notice {
  position: absolute;
  left: 14px; right: 14px; top: 50%;
  transform: translateY(-50%);
  z-index: 9100;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--panel-2);
  border: 1px solid var(--gold-soft-border);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  text-align: center;
}
.tile-offline-notice p { margin: 0 0 6px; font-size: var(--fs-sm); line-height: 1.6; word-break: keep-all; }
.tile-offline-notice p strong { color: var(--accent-gold); }
.tile-offline-notice button { width: 100%; margin-top: 6px; }

/* ── 지도 위의 「순교의 자리」 ──────────────────────────────────
   ⚠️ 성지 마커(.custom-shrine-marker)와 **반드시 달라 보여야 합니다.**
      같아 보이면 순례자가 도장을 찍으러 갔다가 아무것도 없는 터에서 돌아섭니다.

   ⚠️ 2026-09-04 — «동그라미»를 걷어냈습니다.
      2026-09-02 에 성지 마커를 둥근 메달에서 한지 조각으로 갈았는데, 이 자리만
      «검은 동그라미»로 남아 지도에 마흔다섯 개가 떠 있었습니다. 위 주의문도
      「성지는 둥근 성물 그림입니다」라고 옛 상태를 적고 있었습니다.

   ⚠️ 무엇으로 갈랐는가 — «붙인 것»과 «그린 것»입니다:
        성지        = 오려 붙인 «한지 조각». 성물 그림이 담기고, 흰 종이 테두리가
                      두르고 그림자가 집니다. 다녀오면 붉은 낙관이 찍힙니다.
        순교의 자리 = 종이 조각이 아예 없습니다. 지도 위에 «먹으로 그은 표» 하나뿐입니다.
                      조각도 그림도 낙관도 없습니다.
      ⚠️ 처음에는 여기에도 작은 한지 조각을 두었는데, 찍어 보니 성지와 구별이
         안 갔습니다. 조각을 두지 마십시오 — 같아 보이면 순례자가 도장을 찍으러
         갔다가 아무것도 없는 터에서 돌아섭니다.
      ⚠️ 동그라미·메달·금색 채움으로도 되돌리지 마십시오
         (금색은 「도장을 찍는 성지」의 표시입니다).
   ⚠️ 갈래는 아이콘으로 가릅니다 — 성당(shrine) · 관아 기둥(site) · 십자가(tomb).
      전에는 테두리 모양으로도 갈랐는데, 테두리를 없앴으므로 아이콘이 그 몫을 합니다.
      세 아이콘을 같게 만들지 마십시오. */
.martyr-site-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible !important;
}
.martyr-site-marker-dot {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 0;
  background: none;             /* ⚠️ 종이 조각을 두지 마십시오 (위 주의문) */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3b322c;               /* 먹빛 */
  /* 지도 어느 색 위에서도 읽히도록 종이빛 테를 둘러 줍니다 (조각이 아니라 «테»입니다) */
  filter: drop-shadow(1px 0 0 #f6f0e2) drop-shadow(-1px 0 0 #f6f0e2)
          drop-shadow(0 1px 0 #f6f0e2) drop-shadow(0 -1px 0 #f6f0e2)
          drop-shadow(0 1px 2px rgba(20, 14, 30, 0.35));
}
.martyr-site-marker-dot .ui-icon { width: 22px; height: 22px; stroke-width: 1.9; }
/* 정확한 자리를 모르는 곳(「이 근처」)은 조금 더 옅게 — 지도 위의 점선 원과 함께 읽힙니다 */
.martyr-site-marker.approx .martyr-site-marker-dot { opacity: 0.82; }
.martyr-site-marker-label {
  margin-top: 2px;
  max-width: 92px;
  padding: 1px 5px;
  border-radius: var(--r-xs);
  /* ⚠️ 전에는 «검은 알약»이었습니다. 검은 동그라미와 함께 지도에서 이것만 어두웠습니다.
     성지 이름표(#f4eedb + 갈색 테두리)와는 «테두리가 없다»는 것으로 가릅니다.
     테두리를 다시 두르지 마십시오 — 성지 이름표와 헷갈립니다. */
  background: rgba(236, 228, 207, 0.9);
  border: none;
  color: #4a3f38;
  font-size: 10px;
  line-height: 1.3;
  text-align: center;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 「여기서 가장 가까운 자리」 */
.martyr-site-near { margin: 0 0 10px; }
.martyr-site-near[hidden] { display: none !important; }
.martyr-site-near-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(var(--line-rgb), 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.martyr-site-near-label {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}
.martyr-site-near-name {
  flex: 1 1 auto;
  font-size: var(--fs-sm);
  font-weight: 700;
  word-break: keep-all;
}
.martyr-site-near-dist {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  white-space: nowrap;
}

/* 「이 근처 · 정확한 자리는 알 수 없습니다」 — 감추지 마십시오 */
.martyr-site-approx {
  margin: 0 0 6px;
  padding: 5px 8px;
  border-radius: var(--r-xs);
  border: 1px dashed rgba(226, 226, 235, 0.35);
  background: rgba(226, 226, 235, 0.06);
  color: var(--text-primary);
  font-size: var(--fs-xs);
  line-height: 1.6;
  word-break: keep-all;
}
.martyr-site-approx[hidden] { display: none !important; }
/* 지도 마커 — 자리를 모르는 곳은 테두리를 더 흐리게, 이름 뒤에 「이 근처」 */
.martyr-site-marker.approx .martyr-site-marker-dot {
  border-style: dotted;
  opacity: 0.85;
}
.martyr-site-marker-label em {
  font-style: normal;
  opacity: 0.75;
}

/* 한 이름에 묶인 여러 곳 — 이름만 나눠 보여 줍니다 */
.martyr-site-parts { margin: 0 0 14px; }
.martyr-site-parts[hidden] { display: none !important; }
.martyr-site-parts-head {
  margin: 0 0 6px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  word-break: keep-all;
}
/* 자리 하나 — 이름 · 찾아가는 길 · 주소 */
.martyr-site-place {
  padding: 8px 10px;
  margin-bottom: 6px;
  border-radius: 8px;
  border: 1px dashed rgba(226, 226, 235, 0.28);
  background: rgba(226, 226, 235, 0.05);
}
.martyr-site-place-name {
  margin: 0 0 3px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-primary);
  word-break: keep-all;
}
.martyr-site-place-landmark,
.martyr-site-place-addr {
  margin: 0 0 3px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  line-height: 1.6;
  word-break: keep-all;
}
.martyr-site-place-addr { color: var(--text-primary); }
/* ⚠️ 교구 순례지는 사적지와 다른 자리입니다. 테두리를 실선으로 갈라 둡니다. */
.martyr-site-place.pilgrimage {
  border-style: solid;
  border-color: rgba(212, 175, 55, 0.4);
  background: rgba(212, 175, 55, 0.07);
}
.martyr-site-pilgrimage { margin: 0 0 14px; }
.martyr-site-pilgrimage[hidden] { display: none !important; }

/* ⚠️ 오늘의 말씀 속 성찰 질문 — 점(•)도 들여쓰기도 없이 글줄로 둡니다.
   점 없는 목록에 왼쪽 여백만 남으면 글이 어정쩡하게 밀립니다 (.agents/bullets.js 가 지킵니다). */
#today-word-questions {
  list-style: none;
  margin: 6px 0 0;
  padding-left: 0;
}
#today-word-questions li {
  margin: 0 0 4px;
  line-height: 1.5;
  word-break: keep-all;
}

/* ── 제목 옆 붓획 (2026-09-04) ──────────────────────────────────────
   ⚠️ 전에는 카드 제목 앞에 «곧은 3px 금색 막대»(border-left)가 서 있었습니다.
      그림이 죄다 붓으로 그린 것인데 이 표만 자로 그은 것이라 따로 놀았습니다.
      위아래가 가늘게 빠지는 «내리그은 획»으로 바꿉니다 (--brush-v).
   ⚠️ 「오늘」 카드 제목에는 **붙이지 마십시오.** 2026-09-04 에 결 맞춘다고 한 번 붙였다가
      바로 걷어냈습니다 — 그 카드 제목에는 이미 «그림 아이콘»(책·손·싹)이 앞에 서 있어서,
      표가 둘이 되어 「작대기가 왜 있지?」로 보였습니다.
      표가 없던 자리에 표를 더하는 것은 «결 맞추기»가 아니라 «군더더기»였습니다.
   ⚠️ 이 표는 «장식»이 아니라 «여기서부터 한 덩이»라는 표입니다. 지우지 마십시오.
   ⚠️ 인용문 상자(.transcribe-target-box · .adoration-scripture 등)의 곧은 막대는
      **그대로 둡니다** — 그쪽은 «인용»의 표라서 제목 표와 달라야 합니다. */
.stats-card h3,
.inventory-card h3,
.equipment-card h3,
.roadmap-card h3,
.stamp-book-card h3,
.prayer-write-card h3,
.prayer-board-section h3 {
  position: relative;
  padding-left: 13px;
}
.stats-card h3::before,
.inventory-card h3::before,
.equipment-card h3::before,
.roadmap-card h3::before,
.stamp-book-card h3::before,
.prayer-write-card h3::before,
.prayer-board-section h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.12em;
  bottom: 0.12em;
  width: 5px;
  background: var(--accent-gold);
  -webkit-mask-image: var(--brush-v);
          mask-image: var(--brush-v);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* ── 화면 제목 옆의 «먼 산» — 넣었다가 걷어냈습니다 (2026-09-04) ──────
   ⚠️ 다시 시도하지 마십시오. 세 번 해 보고 접은 자리입니다.
      ① 화면 전체 바탕에 산을 채워 깔기 → 카드에 잘려 «조각난 회색 얼룩».
         francisco 님: 「느낌이 에러난 느낌이야」.
      ② 아래쪽 한 띠로 옮기기 → 단추와 겹침.
      ③ 화면 제목 오른쪽에 먹선 두 줄 (굵기 2.6 → 13, 흐리기까지) → 「그래도 안 어울려」.

   왜 안 되는가 — 두 가지입니다.
     · 이 앱 화면에는 «빈 땅»이 없습니다. 첫 화면에는 하늘과 안개가 있어서 산이 살지만,
       앱 안쪽은 위아래로 카드가 빽빽합니다. 산이 놓일 자리가 없습니다.
     · 그리고 그 산은 «아무 뜻도 없습니다». 이 앱의 다른 표들은 다 뜻이 있습니다 —
       붓획 막대는 «얼마나 왔는가», 제목 옆 획은 «여기서부터 한 덩이», 낙관은 «다녀왔다».
       뜻 없는 그림은 아무리 곱게 그려도 결국 «군더더기»로 보입니다.

   ⚠️ 첫 화면(splash_start.webp)에 이미 제대로 그린 산이 있습니다. 그것으로 충분합니다.
   ⚠️ 한지 결(아래 body::before)은 그림이 아니라 «종이의 결»이라 남깁니다. */

/* ── 화면 바탕의 한지 결 (2026-09-04) ───────────────────────────────
   ⚠️ 지도에는 이미 같은 결(.hanji-overlay)이 깔려 있었는데, 나머지 화면은
      매끈한 색면이었습니다. 아주 옅게(2.5%) 섬유결을 깔아 결을 맞춥니다.
   ⚠️ 그림 파일이 아닙니다 — 되풀이 그라디언트 둘로 그립니다.
   ⚠️ opacity 를 올리지 마십시오. 글자 뒤가 지저분해지고 대비가 떨어집니다.
   ⚠️ pointer-events:none 을 지우면 화면이 안 눌립니다. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.025;
  background-image:
    repeating-linear-gradient(90deg, rgba(120, 98, 68, 1) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(0deg,  rgba(120, 98, 68, 1) 0 1px, transparent 1px 7px);
}
/* 성모님과 함께하는 묵주기도: 이 창 안에서만 적용하는 조용한 읽기 화면. */
.mary-rosary-modal { max-width: 560px; }
/* 십자가의 길 걷기 (2026-09-19) */
.stations-modal { max-width: 560px; }
.stations-eyebrow { color: var(--accent-gold); font-size: 0.85rem; margin: 0 0 4px; }
.stations-text { font-family: var(--font-serif); font-size: var(--fs-base); line-height: 1.85; word-break: keep-all; }
.stations-refrain { color: var(--text-secondary); }
.stations-modal .modal-body, .stations-modal .modal-body h3 { text-align: left; }
.stations-steps { margin: 12px 0 16px; padding-left: 1.2em; text-align: left; }
.stations-steps li { margin: 0 0 12px; line-height: 1.7; }
.stations-nav { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
.stations-nav .modal-btn { margin: 0; }
#mary-rosary-flow { line-height: 1.65; overflow-wrap: anywhere; }
#mary-rosary-flow h3 { line-height: 1.4; margin: 0 0 16px; }
#mary-rosary-flow p { margin: 0 0 16px; }
#mary-rosary-flow .modal-btn { width: 100%; margin-top: 12px; white-space: normal; line-height: 1.45; min-height: 44px; }
#mary-rosary-flow details { margin: 16px 0; }
#mary-rosary-flow summary { padding: 8px 0; cursor: pointer; }
#mary-rosary-flow a { color: var(--accent-gold); }
.mary-rosary-welcome { text-align: center; margin-bottom: 24px; }
.mary-rosary-welcome img { display: block; width: 112px; height: 136px; object-fit: contain; margin: 0 auto 8px; }
.mary-rosary-welcome small { color: var(--text-secondary); font-size: 0.75rem; }
.mary-rosary-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.mary-rosary-eyebrow { color: var(--accent-gold); font-size: 0.85rem; }
.mary-rosary-meditation { line-height: 1.85; }
.mary-rosary-order { font-size: 0.9rem; color: var(--text-secondary); }
.mary-rosary-focus { border-left: 2px solid var(--accent-gold); padding: 12px 16px; }
.mary-rosary-silence { min-height: 180px; display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 24px 4px; }
.mary-rosary-silence p { font-family: var(--font-serif, serif); font-size: 1.35rem; line-height: 1.8; }
.mary-rosary-silence small { color: var(--text-secondary); }
.mary-rosary-mystery-figure { margin: 0 0 10px; text-align: center; }
.mary-rosary-mystery-figure img { display: block; width: 100%; height: auto; object-fit: contain; object-position: center; border-radius: 16px; border: 1px solid rgba(229, 194, 112, 0.3); }
.mary-rosary-mystery-figure figcaption { margin-top: 6px; color: var(--text-secondary); font-size: 0.72rem; line-height: 1.4; }
#mary-rosary-flow .mary-rosary-image-toggle { display: block; margin: 0 auto 16px; padding: 6px 10px; border: 0; background: transparent; color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }


/* ── 날마다 한 분 만나기 (2026-09-21) ─────────────────────────
   「오늘」 카드들과 같은 결. 금색은 옅게만 — 꽉 찬 금색 단추는 「묵상하기」 하나입니다. */
.meet-card .meet-name { margin: var(--space-sm) 0 0; font-family: var(--font-serif); font-size: var(--fs-lg, 1.15rem); font-weight: 700; color: var(--text-primary); word-break: keep-all; }
.meet-card .meet-sub { margin: 4px 0 0; color: var(--text-secondary); font-size: var(--fs-xs); line-height: 1.55; word-break: keep-all; }
.meet-card .meet-story { margin: var(--space-sm) 0 0; color: var(--text-primary); font-size: var(--fs-md); line-height: 1.75; word-break: keep-all; }
.meet-card .meet-story + .meet-episode, .meet-card .tts-bar { margin-top: var(--space-sm); }
.meet-card .meet-episode { margin: var(--space-sm) 0 0; padding: 8px 12px; text-align: left; border-left: 2px solid rgba(216,174,106,.5); color: var(--text-primary); font-size: var(--fs-md); line-height: 1.65; word-break: keep-all; }
.meet-card .meet-invocation { margin: var(--space-md) 0 0; text-align: center; font-family: var(--font-serif); color: var(--accent-gold); font-size: var(--fs-md); line-height: 1.6; word-break: keep-all; }
.meet-outline { border: 1px solid rgba(216,174,106,.35) !important; }
/* ⚠️ .today-link-btn·.today-actions 가 display 를 정해 hidden 속성을 이깁니다. 숨긴 것은 숨깁니다. */
.meet-card [hidden], .pray-req-modal [hidden], .pray-req-card[hidden] { display: none !important; }
.meet-card .meet-my-note { margin: var(--space-sm) 0 0; color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.6; word-break: keep-all; }
.meet-count-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; width: 100%; min-height: 44px; margin-top: var(--space-md); padding: 6px 0 0; border: 0; border-top: 1px solid rgba(var(--hanji-rgb), .12); background: transparent; color: inherit; text-align: left; cursor: pointer; }
.meet-count-row .today-meta { margin: 0; flex: 1 1 auto; }
.meet-count-more { color: var(--accent-gold); font-size: var(--fs-xs); font-weight: 700; }
.meet-progress-track { flex: 1 0 100%; height: 4px; border-radius: 999px; background: rgba(242,233,216,.12); overflow: hidden; }
.meet-progress-fill { display: block; height: 100%; width: 0; background: var(--accent-gold); border-radius: 999px; transition: width .4s ease; }
.meet-book-row { display: grid; gap: 2px; width: 100%; min-height: 44px; margin: 0 0 8px; padding: 10px 12px; border: 1px solid rgba(216,174,106,.22); border-radius: var(--r-md); background: rgba(216,174,106,.05); color: var(--text-primary); text-align: left; cursor: pointer; }
.meet-book-row strong { font-family: var(--font-serif); }
.meet-book-meta, .meet-book-day { color: var(--text-secondary); font-size: var(--fs-xs); }
.meet-book-note { margin-top: 4px; color: var(--text-primary); font-size: var(--fs-sm); line-height: 1.55; word-break: keep-all; }
.meet-card .meet-source-link { display: inline-flex; align-items: center; min-height: 44px; }
.meet-book-empty { color: var(--text-secondary); line-height: 1.6; }
.meet-book-sub { margin: 18px 0 4px; font-size: var(--fs-md); color: var(--accent-gold); }
.meet-book-row.passed { cursor: default; background: transparent; border-style: dashed; gap: 8px; }
.meet-book-open { display: grid; gap: 2px; width: 100%; padding: 0; border: 0; background: none; color: var(--text-primary); text-align: left; cursor: pointer; font: inherit; min-height: 44px; }
.meet-book-open strong { font-family: var(--font-serif); }
.meet-book-pray { justify-self: start; }
.meet-hint { margin: 6px 0 0; }


/* ── 물드는 순례 지도 (2026-09-21) ─────────────────────────
   먹 지도 위에 다녀온 자리가 순례길 빛깔로 번집니다. multiply 로 섞어 먹선이 비쳐 보이게. */
.ink-map-card { margin: 0 0 var(--space-md); padding: 0; border-radius: var(--r-md); overflow: hidden; border: 1px solid rgba(216,174,106,.22); background: transparent; }
.ink-map { display: block; width: 100%; height: auto; max-height: 320px; background: #efe3cc; }  /* 옛 지도 종이빛 — 가장자리가 남아도 튀지 않게 */
.ink-map-img { opacity: .92; }
.ink-bloom { opacity: .5; mix-blend-mode: multiply; transform-box: fill-box; transform-origin: center; animation: ink-bloom-in 1.4s ease-out both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes ink-bloom-in { from { opacity: 0; transform: scale(.3); } to { opacity: .5; transform: scale(1); } }
.ink-course { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; opacity: .6; mix-blend-mode: multiply; filter: saturate(.6); }
.ink-dot { fill: rgba(45,32,20,.66); stroke: rgba(243,233,214,.85); stroke-width: 1; }   /* 2026-10-06 붓 옛 지도 위에서도 또렷하게 */
.ink-dot.done { fill: #3a2a18; stroke: #f3e9d6; stroke-width: 1.4; }
.ink-map-cap { display: grid; gap: 2px; padding: 10px 14px 12px; background: rgba(216,174,106,.06); }
.ink-map-cap strong { font-family: var(--font-serif); color: var(--text-primary); font-size: var(--fs-md); }
.ink-map-cap span { color: var(--text-secondary); font-size: var(--fs-xs); word-break: keep-all; }
@media (prefers-reduced-motion: reduce) { .ink-bloom { animation: none; } }


/* ── 기도 나누기 (2026-09-21) ───────────────────────── */
.pray-req-list { display: grid; gap: 8px; margin-top: var(--space-sm); }
.pray-req-row { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid rgba(216,174,106,.22); border-radius: var(--r-md); background: rgba(216,174,106,.05); color: var(--text-primary); text-align: left; cursor: pointer; }
.pray-req-row-from { font-weight: 700; color: var(--accent-gold); font-size: var(--fs-sm); }
.pray-req-row-text { grid-column: 1 / -1; font-size: var(--fs-md); line-height: 1.55; word-break: keep-all; overflow-wrap: anywhere; }
.pray-req-row-state { grid-column: 2; grid-row: 1; justify-self: end; color: var(--text-secondary); font-size: var(--fs-xs); }
.pray-req-row.done .pray-req-row-state { color: var(--accent-gold); }
.pray-req-from { margin: 0; color: var(--text-secondary); font-size: var(--fs-sm); }
.pray-req-text { margin: 10px 0; padding: 10px 14px; border-left: 2px solid rgba(216,174,106,.5); font-family: var(--font-serif); font-size: var(--fs-md); line-height: 1.7; color: var(--text-primary); word-break: keep-all; overflow-wrap: anywhere; }
.pray-req-count { margin: 0 0 4px; color: var(--text-secondary); font-size: var(--fs-xs); }
.pray-req-close-item { display: block; width: 100%; min-height: 44px; margin-top: 6px; border: 0; background: transparent; color: var(--text-secondary); font-size: var(--fs-sm); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }


/* ── 「오늘」 머리 — 그날의 전례색 붓줄 (2026-09-21 번짐 → 2026-09-22 붓줄) ──
   뜻: 붓줄의 빛깔 = 그날의 전례색 (아래 전례 카드의 점과 같은 색).
   ⚠️ 산 그림도, 넓은 물감 번짐도 다시 깔지 마십시오 — 번짐은 「멍든 것 같다」는 말을 들었습니다.
   색은 app.js applyTodayWash 가 --lit-rgb 로 넣습니다 (data-phase 는 남겨 두지만 그림에는 안 씁니다). */
.today-view-header.today-washed { position: relative; isolation: isolate; }
.today-view-header.today-washed::before {
  /* 2026-09-22 francisco: 오른쪽에 뭉친 번짐이 「화면이 멍든 것 같다」 → 번짐을 걷고,
     머리 아래에 그날의 전례색 붓줄 한 획만. 왼쪽에서 짙게 시작해 오른쪽으로 옅어집니다.
     */
  content: '';
  position: absolute;
  left: 0;
  bottom: -12px;
  width: 96px;
  height: 4px;
  border-radius: 2px 4px 4px 2px / 2px 2px 2px 2px;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(var(--lit-rgb, 84,160,112), .9) 0%, rgba(var(--lit-rgb, 84,160,112), .55) 55%, rgba(var(--lit-rgb, 84,160,112), 0) 100%);
  animation: today-wash-in 1.2s ease-out both;
  transform-origin: left center;
}
@keyframes today-wash-in { from { opacity: 0; transform: scaleX(.3); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .today-view-header.today-washed::before { animation: none; } }


/* ── 증인의 눈 (2026-09-21) ───────────────────────── */
.witness-btn-box { margin: 0 0 16px; }
.witness-btn-box[hidden] { display: none !important; }
.witness-btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 8px 12px 8px 8px; border: 1px solid rgba(216,174,106,.4); border-radius: var(--r-md); background: rgba(216,174,106,.07); color: var(--text-primary); text-align: left; cursor: pointer; }
.witness-btn-thumb { width: 64px; height: 48px; object-fit: cover; border-radius: var(--r-xs); flex: 0 0 auto; }
.witness-btn-text { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.witness-btn-text strong { font-family: var(--font-serif); color: var(--accent-gold); font-size: var(--fs-md); }
.witness-btn-text small { color: var(--text-secondary); font-size: var(--fs-xs); word-break: keep-all; }
.witness-btn-go { color: var(--accent-gold); font-size: 1.3rem; }
.witness-modal { position: relative; max-width: 560px; }
.witness-figure { margin: 0 0 12px; border-radius: var(--r-sm); overflow: hidden; background: #efe3cc; aspect-ratio: 4 / 3; touch-action: pan-y; }
.witness-figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.witness-figure.witness-turn img { animation: witness-in .5s ease-out both; }
@keyframes witness-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .witness-figure.witness-turn img { animation: none; } }
.witness-text { margin: 0; font-family: var(--font-serif); font-size: var(--fs-md); line-height: 1.8; color: var(--text-primary); word-break: keep-all; min-height: 5.4em; }
.witness-invocation { margin: 10px 0 0; text-align: center; font-family: var(--font-serif); color: var(--accent-gold); font-size: var(--fs-md); line-height: 1.6; word-break: keep-all; }
.witness-invocation[hidden], .witness-src[hidden] { display: none; }
.witness-src { margin: 8px 0 0; color: var(--text-secondary); font-size: var(--fs-xs); }
.witness-src a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent-gold); }
.witness-note { margin: 6px 0 0; color: var(--text-secondary); font-size: var(--fs-xs); opacity: .85; }
/* ⚠️ 아래 「창 통일」이 창 발치 단추를 세로로 쌓습니다. 여기서는 이전 · 쪽수 · 다음을 한 줄로 (id 로 이깁니다). */
#modal-witness .modal-footer.witness-nav { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 10px; }
#modal-witness .witness-nav .modal-btn { flex: 0 1 auto; width: auto; min-width: 104px; min-height: 44px; margin: 0; }
.witness-nav .modal-btn:disabled { opacity: .4; cursor: default; }
.witness-page { color: var(--text-secondary); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.witness-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--text-secondary); font-size: 1.5rem; cursor: pointer; }


/* ── 묵주기도 — 그림을 빼고 글로 깊게 (2026-09-22) ─────────────────
   francisco: 「묵주기도는 그림 다 빼고 묵상을 좀 더 깊게 · 글로 묵상이 잘 되게」
   이어서 「묵주기도는 관상기도야」 → 장면 · 바라보며 · 침묵 · 순교자와 함께, 기도 때 성모송마다 한 줄 (mary_rosary.js) */
#mary-rosary-flow .mr-ref { margin: -8px 0 20px; color: var(--text-secondary); font-size: var(--fs-sm); }
#mary-rosary-flow .mr-sec { margin: 0 0 22px; }
#mary-rosary-flow .mr-sec h4 { margin: 0 0 6px; color: var(--accent-gold); font-size: var(--fs-sm); font-weight: 700; letter-spacing: .02em; }
#mary-rosary-flow .mr-sec p { margin: 0 0 8px; }
#mary-rosary-flow .mr-gaze { font-family: var(--font-serif, serif); font-size: var(--fs-lg); line-height: 1.85; }
#mary-rosary-flow .mr-silence { margin: 0 0 22px; padding: 22px 8px; text-align: center; }
#mary-rosary-flow .mr-silence p { margin: 0; color: var(--text-secondary); font-size: var(--fs-md); letter-spacing: .02em; }
/* 2026-10-08 한 단 = 한 화면 — 침묵 아래 「기도로 내려가기」, 기도 자리(mr-pray) */
#mary-rosary-flow .mr-go-pray { margin-top: 14px; min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 1px solid rgba(216,174,106,.45); background: transparent; color: var(--accent-gold); font-size: var(--fs-sm); }
#mary-rosary-flow .mr-pray { scroll-margin-top: 8px; padding-top: 18px; border-top: 1px solid rgba(216,174,106,.28); outline: none; }
#mary-rosary-flow .mr-pray-cue { margin: 0 0 14px; text-align: center; font-family: var(--font-serif, serif); font-size: var(--fs-md); color: var(--text-primary); }
#mary-rosary-flow .mr-petition-tts { margin: 6px 0 4px; }
#mary-rosary-flow .mr-martyr { padding: 4px 0 4px 14px; border-left: 2px solid rgba(216,174,106,.5); }
#mary-rosary-flow .mr-martyr-name { font-weight: 700; }
#mary-rosary-flow .mr-martyr-src { font-size: var(--fs-sm); }
#mary-rosary-flow .mr-petition-text { font-family: var(--font-serif, serif); font-size: var(--fs-lg); line-height: 1.85; }
#mary-rosary-flow .mr-petition small { color: var(--text-secondary); font-size: var(--fs-xs); }
#mary-rosary-flow .mr-beads-guide { color: var(--text-secondary); font-size: var(--fs-sm); }
#mary-rosary-flow .mr-beads { margin: 0 0 16px; padding-left: 1.7em; }
#mary-rosary-flow .mr-beads li { padding: 7px 0; border-bottom: 1px dashed rgba(216,174,106,.22); font-family: var(--font-serif, serif); font-size: var(--fs-base); line-height: 1.75; }
#mary-rosary-flow .mr-beads li:last-child { border-bottom: 0; }
#mary-rosary-flow .mr-beads li::marker { color: var(--accent-gold); font-family: var(--font-sans, inherit); font-size: var(--fs-sm); }
#mary-rosary-flow .mr-prayer { margin: 0 0 18px; padding: 14px 16px; border-radius: 12px; background: rgba(216,174,106,.07); border: 1px solid rgba(216,174,106,.2); }
#mary-rosary-flow .mr-prayer h4 { margin: 0 0 8px; color: var(--accent-gold); font-size: var(--fs-sm); font-weight: 700; }
#mary-rosary-flow .mr-prayer p { margin: 0 0 8px; font-family: var(--font-serif, serif); font-size: var(--fs-base); line-height: 1.8; }
#mary-rosary-flow .mr-prayer-lines { display: flex; flex-direction: column; gap: 6px; }
#mary-rosary-flow .mr-prayer-gap { height: 6px; }
#mary-rosary-flow .mr-prayer .mary-rosary-order { font-family: inherit; }
#mary-rosary-flow .mr-prayer-src { color: var(--text-secondary); font-size: var(--fs-xs); }


/* ── 성지 추천하기 (2026-09-22) ─────────────────────────────── */
.shrine-rec-box { margin: 0 0 16px; }
.shrine-rec-box[hidden] { display: none !important; }
.shrine-rec-box .today-link-btn { margin-top: 8px; min-height: 44px; }
.shrine-rec-got { margin: 0 0 10px; }
.shrine-rec-from { margin: 0 0 4px; color: var(--accent-gold); font-size: var(--fs-sm); font-weight: 700; }
.shrine-rec-head { display: flex; align-items: center; gap: 12px; margin: 6px 0 10px; }
.shrine-rec-img { width: 48px; height: 48px; object-fit: contain; flex: none; }
.shrine-rec-name { margin: 0; font-size: var(--fs-xl); }
.shrine-rec-label { margin: 12px 0 2px; color: var(--text-secondary); font-size: var(--fs-xs); }
.shrine-rec-intro { margin: 0 0 8px; font-size: var(--fs-md); line-height: 1.65; }
.shrine-rec-meta { margin: 4px 0; font-size: var(--fs-sm); color: var(--text-primary); line-height: 1.55; }
.shrine-rec-small { color: var(--text-secondary); font-size: var(--fs-xs); }
.shrine-rec-done { margin: 8px 0; color: var(--accent-gold); font-size: var(--fs-sm); }
.shrine-rec-new { margin-top: 12px; }
#modal-shrine-rec .modal-body > button { margin-top: 8px; }
#modal-shrine-rec .modal-body > button[hidden] { display: none !important; }
/* 앱을 처음 여는 분 — 시작 화면(z-index 99999) 위에 */
#modal-shrine-rec.over-splash, #modal-meet-shared.over-splash { position: fixed; z-index: 100001; }
/* 지도 — 추천받아 담은 성지 */
.custom-shrine-marker { position: relative; }
.custom-shrine-marker .wish-badge { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); padding: 1px 6px; border-radius: 999px; background: var(--accent-gold); color: #2a1d05; font-size: var(--fs-xxs); font-weight: 700; line-height: 1.4; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.35); pointer-events: none; }


/* ── 교우와 함께 (2026-09-22) — 9일 기도 · 영적 꽃다발 · 순례길 함께 걷기 · 순례 지향 모으기 ── */
.pray-req-list[hidden] { display: none !important; }
.together-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: var(--space-md); }
.together-actions .today-link-btn { width: 100%; min-height: 44px; margin: 0; padding: 8px 6px; font-size: var(--fs-sm); text-align: center; }
.together-modal-actions { display: grid; gap: 8px; margin-top: 12px; }
.together-modal-actions > button { width: 100%; min-height: 44px; margin: 0; }
#modal-together.over-splash, #modal-app-form.over-splash { position: fixed; z-index: 100001; }
#modal-app-form.over-splash { z-index: 100002; }
.nov-dots { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; margin: 12px 0 4px; }
.nov-dot { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(216,174,106,.45); color: var(--text-secondary); font-size: var(--fs-xxs); }
.nov-dot.on { background: var(--accent-gold); border-color: var(--accent-gold); color: #2a1d05; font-weight: 700; }
.gift-card { padding: 14px 16px; border: 1px solid rgba(216,174,106,.35); border-radius: 16px; background: rgba(216,174,106,.07); }
.gift-to { margin: 0 0 8px; font-weight: 700; color: var(--accent-gold); }
.gift-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.gift-items li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px dashed rgba(216,174,106,.2); }
.gift-items li:last-child { border-bottom: 0; }
.gift-from { margin: 10px 0 0; text-align: right; color: var(--text-secondary); font-size: var(--fs-sm); }
.walk-stops { margin: 8px 0; padding-left: 1.4em; display: grid; gap: 2px; font-size: var(--fs-sm); }
.grp-items { margin: 8px 0; padding-left: 1.4em; display: grid; gap: 6px; }
.grp-items li { line-height: 1.5; }
.grp-f { display: block; color: var(--text-secondary); font-size: var(--fs-xs); }
.quest-invite-btn { margin: 12px 0 4px; min-height: 44px; }


/* ── 가상 순례길 마침 카드 (2026-09-23) ── */
.vp-finish { border: 1px solid rgba(216,174,106,.45); background: rgba(216,174,106,.08); margin-bottom: 12px; }
.vp-finish .vp-day-label { color: var(--accent-gold); }
.vp-finish-when { margin: 2px 0 8px; color: var(--text-secondary); font-size: var(--fs-sm); }
.vp-finish-lead { margin: 0 0 12px; line-height: 1.6; }
.vp-finish .dev-tools-btn { width: 100%; min-height: 44px; margin-top: 8px; }

/* ── 말씀으로 숨쉬기 (2026-09-24) ──
   francisco: 「들숨 날숨 좀 바꾸고 싶은데」 → 「말씀으로 숨쉬기」
   들숨에 말씀 앞부분, 날숨에 뒷부분. 작은 「들숨·날숨」은 숨의 방향을, 큰 글은 말씀을.
   ⚠️ 두 줄이 되어도 아래 글이 들썩이지 않게 높이를 잡아 둡니다. */
.breath-label { letter-spacing: 0; min-height: 3.6em; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; }
.breath-cue { font-size: var(--fs-sm); letter-spacing: 0.2em; color: var(--accent-gold); opacity: 0.85; }
.breath-word { font-family: var(--font-serif); font-size: var(--fs-lg, 1.15rem); line-height: 1.5; color: var(--text-primary); word-break: keep-all; padding: 0 12px; }
.breath-ref { margin: 0 0 10px; text-align: center; font-size: var(--fs-xs, 0.75rem); color: var(--text-secondary); letter-spacing: 0.02em; }
/* 2026-09-30 링크만 판 — 앱이 쓴 화살기도 표시, 오늘의 말씀 자리의 우리 묵상 글(인용이 아니므로 기울이지 않음) */
.breath-ref.breath-own { font-style: normal; opacity: 0.85; }
#today-word-text.today-word-own { font-style: normal; }
/* 2026-10-01 링크만 판 — 말씀 자리에는 장절만 크게(말씀이 먼저), 앱이 쓴 글은 단추 아래 「묵상 도움」으로 작게 */
#today-word-text.today-word-ref { font-style: normal; font-family: var(--font-serif); font-size: var(--fs-xl, 1.35rem); text-align: center; letter-spacing: 0.02em; }
.today-word-card.word-ref-only .tts-bar { display: none !important; }
.med-oratio-lead { margin: 0 0 10px; line-height: 1.6; word-break: keep-all; }
.med-help-label { margin: 0 0 4px; font-size: var(--fs-xs, .75rem); color: var(--text-secondary); letter-spacing: .02em; }
/* 2026-10-01 처음 한 번만 — 성경 창 여는 법 */
.bible-read-hint { margin: 8px 0 0; padding: 8px 10px; border-radius: var(--r-sm); background: rgba(216,174,106,.08); font-size: var(--fs-xs, .78rem); line-height: 1.55; color: var(--text-secondary); word-break: keep-all; }
.bible-read-hint b { color: var(--accent-gold); font-weight: 600; }
.today-word-help { margin-top: 14px; padding: 10px 12px; border-left: 2px solid rgba(216,174,106,.45); }
.today-word-help-label { margin: 0 0 4px; font-size: var(--fs-xs, .75rem); color: var(--text-secondary); letter-spacing: .02em; }
#today-word-help-text { margin: 0; font-size: var(--fs-sm); line-height: 1.65; color: var(--text-secondary); word-break: keep-all; }

/* ── 촛불로 숨쉬기 (2026-09-24) ──
   francisco: 「들숨 날숨 디자인이랑 색을 바꾸고 싶어」 → 시안 넷 가운데 「A 촛불」
   → 「촛불색이 바뀌는건 어때?」 → 「너가 예쁘고 거룩하게 잘 그려봐」.
   흰 초 · 놋쇠 촛대 · 그날 전례색 제대보(금실 테두리 · 금빛 십자가) — 그림은 app.js CANDLE_SVG.
   들숨(4초)에 불꽃이 위로 자라며 밝아지고, 날숨(6초)에 잔잔히 낮아집니다. 불꽃은 늘 살짝 일렁입니다.
   ⚠️ 불꽃이 곧 .breath-core 입니다 — 위 「원」 규칙(.breath-ring.inhale .breath-core 190px 등)을
      여기서 이겨야 하므로 같은 무게(.breath-candle.inhale …)로, 이 뒤에 둡니다.
   ⚠️ 글자는 여전히 촛불 «아래»에 둡니다 (불빛 위 글자는 대비가 떨어집니다 — 2026-09-07 결정).
   ⚠️ 움직임을 줄인 분께는 일렁임과 자람을 멈추고 알맞은 크기의 불꽃 하나만 둡니다.
   ⚠️ 전례색은 초가 아니라 제대보에 입힙니다 — 실제 성당에서도 초는 희고 전례색은 제의·제대보에 입습니다. */
.breath-ring.breath-candle { height: 262px; margin: 6px auto 18px; --cloth-a: #2f6b47; --cloth-b: #4f9a6c; }
.breath-ring.breath-candle::before { display: none; }
.breath-candle[data-lit="녹색"] { --cloth-a: #2d6645; --cloth-b: #4f9a6c; }
.breath-candle[data-lit="자색"] { --cloth-a: #47316f; --cloth-b: #7457ab; }
.breath-candle[data-lit="백색"] { --cloth-a: #e4d8bd; --cloth-b: #fbf6ea; }
.breath-candle[data-lit="홍색"] { --cloth-a: #86221e; --cloth-b: #bf4038; }
.breath-candle .candle-svg { position: absolute; left: 0; top: 0; width: 208px; height: 262px; overflow: visible; }
.breath-candle .candle-glow {
  position: absolute; left: 50%; top: 64px; width: 240px; height: 240px; margin: -120px 0 0 -120px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(246, 178, 74, 0.36) 0%, rgba(246, 178, 74, 0.14) 34%, rgba(246, 178, 74, 0) 68%);
  opacity: 0.5; transform: scale(0.82);
  transition: opacity 4s cubic-bezier(.45, 0, .4, 1), transform 4s cubic-bezier(.45, 0, .4, 1);
}
/* 손에 든 촛불 — 폰을 기울이면 불꽃만 하늘 쪽으로 눕습니다 (app.js startCandleMotion 이 --candle-lean 을 줍니다) */
.breath-candle .candle-tilt {
  position: absolute; left: 50%; top: 20px; width: 34px; height: 78px; margin-left: -17px;
  transform-origin: 50% 100%; transform: rotate(var(--candle-lean, 0deg));
}
.breath-candle .candle-glow { translate: var(--candle-drift, 0px) 0; }
.breath-candle .candle-flicker {
  position: absolute; inset: 0;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 0 8px rgba(255, 196, 96, 0.75)) drop-shadow(0 0 18px rgba(246, 178, 74, 0.35));
  animation: candle-sway 3.4s ease-in-out infinite alternate;
}
/* 불꽃 — 끝이 뾰족한 물방울 모양, 밑동에 옅은 푸른 기운 (진짜 촛불처럼) */
.breath-candle .breath-core,
.breath-candle.inhale .breath-core,
.breath-candle.exhale .breath-core,
.breath-candle.still .breath-core {
  position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0;
  clip-path: path('M17 0 C21 16 34 36 34 55 C34 69 26 78 17 78 C8 78 0 69 0 55 C0 36 13 16 17 0 Z');
  background:
    radial-gradient(ellipse 40% 12% at 50% 93%, rgba(120, 150, 255, 0.55) 0%, rgba(120, 150, 255, 0) 100%),
    radial-gradient(ellipse 60% 70% at 50% 70%, #ffffff 0%, #fff6d2 22%, #ffd98a 45%, #f6a93e 72%, #e2782a 100%);
  box-shadow: none;
  transform-origin: 50% 100%;
}
.breath-candle .breath-core { transform: scale(0.82);
  transition: transform 4s cubic-bezier(.45, 0, .4, 1); }
.breath-candle.inhale .breath-core { transform: scale(1.18); transition-duration: 4s; }
.breath-candle.exhale .breath-core { transform: scale(0.82); transition-duration: 6s; }
.breath-candle.inhale .candle-glow { opacity: 1; transform: scale(1.12); transition-duration: 4s; }
.breath-candle.exhale .candle-glow { opacity: 0.5; transform: scale(0.82); transition-duration: 6s; }
/* 폰을 흔들면 잠깐 크게 일렁입니다 */
.breath-candle.shaken .candle-flicker { animation: candle-shake 0.32s ease-in-out infinite alternate; }
@keyframes candle-shake {
  0%   { transform: rotate(-5deg) scaleX(0.9) scaleY(1.04); }
  100% { transform: rotate(4deg) scaleX(1.06) scaleY(0.96); }
}
/* 「촛불을 손에 들기」 — 아이폰에만 보입니다 (허락은 누르실 때만 묻습니다) */
.candle-hold { display: block; margin: -8px auto 10px; min-height: 44px; padding: 8px 16px; border: 1px solid rgba(216, 174, 106, 0.45);
  border-radius: 22px; background: transparent; color: var(--accent-gold); font-size: var(--fs-sm); cursor: pointer; }
.candle-hold[hidden] { display: none; }
.candle-hold:disabled { border-color: transparent; color: var(--text-secondary); cursor: default; }
@keyframes candle-sway {
  0%   { transform: rotate(-1.4deg) scaleX(1); }
  50%  { transform: rotate(0.9deg) scaleX(0.95); }
  100% { transform: rotate(-0.5deg) scaleX(1.03); }
}
/* 움직임을 줄인 분 — 자라지도 일렁이지도 않는 불꽃 하나 (글자만 들숨·날숨으로 바뀝니다) */
.breath-candle.still .candle-flicker, .breath-candle.still.shaken .candle-flicker { animation: none; }
.breath-candle.still .candle-tilt { transform: none; }
.breath-candle.still .breath-core { transition: none; transform: scale(1); }
.breath-candle.still .candle-glow { transition: none; opacity: 0.8; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .breath-candle .candle-flicker { animation: none; }
  .breath-candle .candle-glow { transition: none; }
}
/* 밝은 화면(한지) — 불빛은 조금 옅게, 흰 제대보는 테두리 그늘로 바탕과 가릅니다 */
[data-theme="light"] .breath-candle .candle-glow { background: radial-gradient(circle, rgba(226, 150, 50, 0.26) 0%, rgba(226, 150, 50, 0.10) 34%, rgba(226, 150, 50, 0) 68%); }
[data-theme="light"] .breath-candle[data-lit="백색"] .candle-cloth path:first-child { stroke: rgba(122, 92, 23, 0.4); stroke-width: 1; }
@media (max-width: 400px) { .breath-ring.breath-candle { margin-top: 0; } }
/* 흰 제대보 위 금빛 십자가·금실은 조금 짙게 (흰 바탕에 묻히지 않게) */
.breath-candle[data-lit="백색"] .candle-cloth rect { fill: #b0822f; }
.breath-candle[data-lit="백색"] .candle-cloth path[stroke="#d8ae6a"] { stroke: #b0822f; }

/* ── 촛불이 방을 밝힘 (2026-09-24) ──
   francisco: 「촛불이 주변을 밝히는 표현으로 … 커지면 밝아지고 작아지면서 조금 어두워 지고」 — app.js candleRoom.
   묵상 창 바탕에 불꽃 자리(--cx·--cy)를 가운데로 따뜻한 빛을 깔고, 들숨에 넓고 밝게 · 날숨에 좁고 어둡게.
   빛의 세기(--room-lit)를 @property 로 등록해 두어야 배경 그라데이션이 뚝 끊기지 않고 천천히 바뀝니다.
   (등록을 모르는 옛 브라우저는 그냥 한 번에 바뀝니다 — 괜찮습니다) */
@property --room-lit { syntax: '<number>'; inherits: true; initial-value: 0.6; }
/* 창 전체 — 밝기 셈(--room-lit)과 어두워짐. 글 칸이 --room-lit 을 물려받아 빛을 그립니다.
   ⚠️ 어둠을 글 칸(.modal-body)에만 깔면 아래 단추 칸과의 경계가 줄처럼 보입니다 — 창 전체에 둡니다. */
.modal-card.candle-room {
  --room-lit: 0.6;
  background-image: linear-gradient(rgba(0, 0, 0, calc(0.30 * (1 - var(--room-lit)))), rgba(0, 0, 0, calc(0.30 * (1 - var(--room-lit)))));
  transition: --room-lit 6s ease-in-out;
}
.modal-card.candle-room.room-in { --room-lit: 1; transition-duration: 4s; }
.modal-card.candle-room.room-out { --room-lit: 0.3; transition-duration: 6s; }
.modal-card.candle-room.room-still { --room-lit: 0.75; transition: none; }
/* 글 칸 — 불꽃 자리(--cx·--cy)를 가운데로 번지는 따뜻한 빛. 창을 내려도 함께 움직이게 local */
.modal-body.candle-room-light {
  background-image:
    radial-gradient(circle calc(150px + 170px * var(--room-lit)) at var(--cx, 50%) var(--cy, 150px),
      rgba(255, 200, 125, calc(0.20 * var(--room-lit))) 0%,
      rgba(255, 176, 92, calc(0.09 * var(--room-lit))) 48%,
      rgba(255, 176, 92, 0) 100%);
  background-attachment: local;
  background-repeat: no-repeat;
}
/* 촛대·제대보도 불빛을 받습니다 — 들숨에 환하게, 날숨에 그늘지게 */
.breath-candle .candle-svg { filter: brightness(0.84); transition: filter 6s ease-in-out; }
.breath-candle.inhale .candle-svg { filter: brightness(1.06); transition-duration: 4s; }
.breath-candle.exhale .candle-svg { filter: brightness(0.84); transition-duration: 6s; }
.breath-candle.still .candle-svg { filter: none; transition: none; }
/* 밝은 화면(한지) — 어두워짐은 옅게, 빛은 조금 짙은 금빛으로 (흰 바탕에서도 보이게) */
[data-theme="light"] .modal-card.candle-room {
  background-image: linear-gradient(rgba(70, 50, 20, calc(0.12 * (1 - var(--room-lit)))), rgba(70, 50, 20, calc(0.12 * (1 - var(--room-lit)))));
}
[data-theme="light"] .modal-body.candle-room-light {
  background-image:
    radial-gradient(circle calc(150px + 170px * var(--room-lit)) at var(--cx, 50%) var(--cy, 150px),
      rgba(236, 160, 60, calc(0.20 * var(--room-lit))) 0%,
      rgba(236, 160, 60, calc(0.08 * var(--room-lit))) 48%,
      rgba(236, 160, 60, 0) 100%);
}
/* ── 링크만 판 (2026-09-25) — 교회 글 대신 원문 링크 한 줄 (constants.js linkOnly) ── */
.verse-linkonly, .prayer-linkonly, .stations-linkonly {
  margin: 10px 0; padding: 12px 14px; border-radius: var(--r-md, 12px);
  border: 1px dashed var(--border-color); color: var(--text-secondary);
  font-size: var(--fs-sm); line-height: 1.6; text-align: center;
}
.verse-linkonly a, .prayer-linkonly a, .stations-linkonly a { color: var(--accent-gold); font-weight: 600; }
.verse-linkonly-reveal { margin-top: 6px; }

/* ── 머묾 걸음 촘촘하게 (2026-09-24) ──
   francisco: 「촛불이 너무 위로 올라 갔어 그리고 아래 여유가 너무 많아 … 밑에 글 간격을 조금 좁혀줘 너무 넓어」
   · 촛불을 0.9배로 줄여(위를 기준으로) 창 안에 초·촛대·제대보가 통째로 들어오게 하고, 줄어든 자리만큼 아래를 당깁니다.
   · 촛불 아래 글(들숨 말씀 · 장절 · 말씀 드러남 · 막대 · 남은 시간)의 위아래 틈을 좁힙니다.
   · 걸음에 들어올 때 창을 맨 위로 올려 촛불 머리가 잘려 보이지 않게 합니다 (app.js renderMeditationFlow).
   ⚠️ 이 걸음에만 걸리도록 #meditation-flow 안으로 좁혀 둡니다. */
#meditation-flow .meditation-question .breath-ring.breath-candle { transform: scale(0.9); transform-origin: 50% 0; margin: 4px auto -22px; }
#meditation-flow .meditation-question .breath-label { margin: 8px 0 2px; min-height: 3.2em; }
#meditation-flow .meditation-question .breath-ref { margin: 0 0 2px; }
#meditation-flow .meditation-question #meditation-silence-box { padding: 6px 10px 0; }
#meditation-flow .meditation-question #meditation-silence-box .verse-reveal { margin: 4px 0 4px; }
#meditation-flow .meditation-question #meditation-silence-box .verse-reveal-ref { margin: 2px 0 8px; }
#meditation-flow .meditation-question #meditation-silence-box .verse-reveal-bar { margin-bottom: 4px; }
#meditation-flow .meditation-question #meditation-silence-box .verse-reveal-left { margin: 4px 0 0; }
@media (prefers-reduced-motion: reduce) {
  .modal-card.candle-room { transition: none; }
  .breath-candle .candle-svg { transition: none; }
}


/* ── 쉬운 화면 (2026-09-26) ───────────────────────────────
   피드백: 「어르신들이 좀 더 쉽게」. body.easy-mode 일 때만 적용됩니다.
   ⚠️ 「창 통일」 블록보다 위에 두십시오 (그 블록이 늘 마지막). */
.easy-actions, .easy-exit { display: none; }
.easy-mode-card .easy-on-btn {
  width: 100%; min-height: 52px; margin-top: var(--space-md); border-radius: 999px;
  border: 1px solid var(--accent-gold); background: rgba(216,174,106,.12); color: var(--text-primary);
  font-size: var(--fs-base); font-weight: 700; cursor: pointer;
}
body.easy-mode #header-rank,
body.easy-mode #header-level { display: none !important; }
body.easy-mode #view-today .today-stack > :not(#mass-checkin-bar-today):not(#liturgy-card):not(#crib-card):not(#month-card):not(#daily-scene-card):not(#rosary-month-card):not(#prayer-memory-card):not(#departed-card):not(.today-word-card):not(#easy-actions):not(#meet-card):not(#backup-nudge) { display: none !important; }
body.easy-mode #view-today .view-header p { display: none; }
/* 말씀 — 본문과 출처, 「묵상하기」만 */
body.easy-mode .today-word-card .today-word-more,
body.easy-mode .today-word-card #today-word-link.today-link-btn,
body.easy-mode .today-word-card .today-card-icon { display: none !important; }
body.easy-mode .today-word-card blockquote { font-size: var(--fs-xl); line-height: 1.7; }
body.easy-mode .today-word-card .today-primary-btn { width: 100%; min-height: 60px; font-size: var(--fs-lg); }
/* 2026-10-05 francisco 「쉬운화면에서 말씀읽기가 안보여」 — 링크만 판에서는 「말씀 읽기」가 첫 단추라 숨기면 안 됩니다(성경 본문 보조 링크일 때만 숨김).
   그 아래 「묵상하기」도 큼직하게. */
body.easy-mode .today-word-card #today-word-link.today-primary-btn { display: flex !important; align-items: center; justify-content: center; text-decoration: none; }
body.easy-mode .today-word-card .today-actions button.today-link-btn { width: 100%; min-height: 56px; font-size: var(--fs-lg); }
body.easy-mode .today-word-card .today-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
/* 전례 — 날짜 · 시기 이름 · 매일미사 단추만 (색 이름과 색 풀이 글은 숨김 — 색을 말하지 않으니 풀이도 필요 없음) */
body.easy-mode #liturgy-card .liturgy-color-dot,
body.easy-mode #liturgy-card .liturgy-note { display: none !important; }
body.easy-mode #liturgy-card .liturgy-meta { font-size: 0; margin: 0 0 6px; }
body.easy-mode #liturgy-card #liturgy-date { font-size: var(--fs-base); color: var(--text-secondary); }
body.easy-mode #liturgy-card #liturgy-color { display: none; }
body.easy-mode #today-word-theme { display: none; }
/* 큰 단추 셋 */
body.easy-mode .easy-actions { display: grid; gap: 14px; padding: var(--space-lg) 2px; border-top: 1px solid rgba(var(--hanji-rgb), 0.12); }
.easy-big-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%;
  min-height: 84px; padding: 16px 22px; border-radius: var(--r-lg); text-align: left; cursor: pointer;
  border: 1.5px solid rgba(216,174,106,.55); background: rgba(216,174,106,.10); color: var(--text-primary);
}
.easy-big-btn:active { background: rgba(216,174,106,.22); }
.easy-big-title { font-size: var(--fs-xl); font-weight: 700; color: var(--accent-gold); }
.easy-big-sub { font-size: var(--fs-sm); color: var(--text-secondary); }
/* 오늘 만나는 분 — 이름 · 한 줄 · 전구 청하기만 */
body.easy-mode #meet-card #meet-hint,
body.easy-mode #meet-card #meet-after,
body.easy-mode #meet-card .meet-count-row,
body.easy-mode #meet-card .meet-summary-more,
body.easy-mode #meet-card details,
body.easy-mode #meet-card .today-card-icon,
body.easy-mode #meet-card #meet-anniv-note { display: none !important; }
body.easy-mode #meet-card .today-actions button { min-height: 56px; font-size: var(--fs-base); }
/* 맨 위 「성령의 순례길」 띠 — 쉬운 화면에서는 등급 글이 빠지니 그 자리만큼 넉넉하게
   (francisco: 「맨위에 성령의 순례길 쪽도 전체적으로 넓어야 될거같아」).
   ⚠️ 위 여백의 var(--safe-top) 은 빼지 마십시오 — 아이폰 상태표시줄에 가려집니다. */
/* 2026-09-26 아이폰 캡처 — 「여백이 너무 커」 → 위아래 18 → 8px. 글자·단추 크기는 그대로 */
body.easy-mode .app-header { padding: calc(8px + var(--safe-top)) 16px 8px; }
body.easy-mode .header-logo { gap: 10px; }
body.easy-mode .holy-cross { width: 32px; height: 32px; }
body.easy-mode .header-logo h1 { font-size: 26px; letter-spacing: -0.02em; }
body.easy-mode .theme-toggle-btn { width: 44px; height: 44px; margin-left: 8px; }
body.easy-mode .theme-toggle-btn .ui-icon { width: 26px; height: 26px; }
/* ── 쉬운 화면 · 기도 (2026-09-26) ─────────────────────────
   「기도하기」는 동반자 기도 · 지향 고르기 · 기도 목록(한 줄에 하나, 큰 단추)만.
   숨김: 마음 모음(점수) · 앞선 순례자 카드 · 「마음별 묵상」 갈래 · 가상 순례길. */
body.easy-mode .view-header p { display: none; }
body.easy-mode .subtab-btn { min-height: 56px; font-size: var(--fs-lg); font-weight: 700; }
body.easy-mode #panel-pr-do .today-me-focus,
body.easy-mode #panel-pr-do #mentor-prayer-card,
body.easy-mode #panel-pr-do .pick-tabs,
body.easy-mode #panel-pr-do #pick-pane-heart,
body.easy-mode #panel-pr-do .virtual-pilgrimage { display: none !important; }
body.easy-mode #panel-pr-do #pick-pane-name { display: block !important; }
body.easy-mode #panel-pr-do #prayer-offering-intention { min-height: 56px; font-size: var(--fs-base); }
body.easy-mode #panel-pr-do .spiritual-menu-grid { grid-template-columns: 1fr; gap: 12px; }
body.easy-mode #panel-pr-do .spiritual-menu-grid button {
  min-height: 72px; padding: 14px 20px; text-align: left; border-radius: var(--r-lg);
  border: 1.5px solid rgba(216,174,106,.45); font-size: var(--fs-lg); font-weight: 700; color: var(--accent-gold);
}
body.easy-mode #panel-pr-do .spiritual-menu-grid .official-prayer-source { font-size: var(--fs-sm); font-weight: 400; }
/* 어르신이 많이 찾으시는 차례로 */
body.easy-mode #panel-pr-do .spiritual-menu-grid button[onclick^="openMaryRosary"] { order: 1; }
body.easy-mode #panel-pr-do .spiritual-menu-grid button[onclick^="openStationsWalk"] { order: 2; }
body.easy-mode #panel-pr-do .spiritual-menu-grid button[onclick^="openEucharisticAdoration"] { order: 3; }
body.easy-mode #panel-pr-do .spiritual-menu-grid button[onclick*="litany_103"] { order: 4; }
body.easy-mode #panel-pr-do .spiritual-menu-grid button[onclick*="litany_124"] { order: 5; }
body.easy-mode #panel-pr-do .spiritual-menu-grid button[onclick^="startPrayerMeditation"] { order: 6; }
body.easy-mode #panel-pr-do .spiritual-menu-grid button[onclick^="openConfessionPreparation"] { order: 7; }
body.easy-mode #panel-pr-do .spiritual-menu-grid button[onclick^="openFaithEncounter"] { order: 8; }
/* 모신 동반자가 없으면 빈 상자가 남지 않게 */
body.easy-mode #panel-pr-do .today-me-card:not(:has(#companion-prayer-card:not([hidden]))) { display: none; }
/* 점수 줄을 숨겼으니 동반자 카드 위 구분선·여백도 걷습니다 */
body.easy-mode #panel-pr-do .today-me-card > .mentor-prayer-card { border-top: none; margin-top: 0; padding-top: 0; }
/* 동반자 기도 단추도 크게 */
body.easy-mode #companion-prayer-card button { min-height: 60px; font-size: var(--fs-base); }

/* ── 머리 띠 「가」 단추와 글씨 크기 창 (2026-09-26) ── */
.text-size-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-left: 6px; padding: 0; flex-shrink: 0;
  background: none; border: 1px solid rgba(216,174,106,.45); border-radius: var(--r-xs);
  color: var(--accent-gold); font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer;
}
.text-size-btn::before { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.text-size-btn:hover, .text-size-btn:focus-visible { background: rgba(216,174,106,.12); }
@media (max-width: 560px) { .text-size-btn { width: 26px; height: 26px; margin-left: 4px; font-size: 14px; } }
body.easy-mode .text-size-btn { width: 44px; height: 44px; margin-left: 8px; font-size: 24px; border-radius: var(--r-sm); }
.text-size-options { display: grid; gap: 10px; }
.text-size-opt {
  display: flex; align-items: center; gap: 16px; width: 100%; min-height: 60px; padding: 10px 18px;
  border-radius: var(--r-md); border: 1.5px solid rgba(216,174,106,.30); background: rgba(216,174,106,.05);
  color: var(--text-primary); text-align: left; cursor: pointer;
}
.text-size-opt .ts-sample { width: 36px; flex-shrink: 0; text-align: center; font-weight: 700; color: var(--accent-gold); line-height: 1; }
.text-size-opt .ts-label { font-size: 19px; font-weight: 700; }   /* 지금 크기와 상관없이 늘 넉넉하게 — 고르는 창이니까 */
.text-size-opt .ts-label small { display: block; margin-top: 3px; font-size: 15px; font-weight: 400; color: var(--text-secondary); }
.text-size-opt.active { border-color: var(--accent-gold); background: rgba(216,174,106,.16); }
.text-size-opt.active::after { content: '지금'; margin-left: auto; padding-left: 8px; flex-shrink: 0; font-size: 16px; font-weight: 700; color: var(--accent-gold); }
.text-size-opt.easy { margin-top: 4px; }

/* 인증 단추가 위치를 기다리는 동안 (2026-09-26) — 눌렸다는 것이 보이게 */
#btn-verify.is-busy { opacity: .88; cursor: progress; }
#btn-verify.is-busy .verify-icon { animation: verify-pin-bob 1.2s ease-in-out infinite; }
@keyframes verify-pin-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { #btn-verify.is-busy .verify-icon { animation: none; } }

.mass-place-chip.later { border-style: dashed; background: transparent; }
.mass-places-note { margin: 8px 0 0; font-size: var(--fs-sm); color: var(--text-secondary); }
/* 쉬운 화면 머리 띠에는 특별 칭호도 달지 않습니다 — 앱 이름이 잘렸습니다 (2026-09-26 캡처) */
body.easy-mode #header-special-title { display: none !important; }

/* 기록 지키기 (2026-09-26) */
.backup-share-btn { display: block; width: 100%; min-height: 52px; margin: 4px 0 6px; border-radius: 999px; border: 1.5px solid var(--accent-gold); background: rgba(216,174,106,.14); color: var(--text-primary); font-size: var(--fs-base); font-weight: 700; cursor: pointer; }
.backup-nudge { margin: 4px 0 var(--space-md); padding: 18px 18px 16px; border-radius: var(--r-lg); border: 1.5px solid rgba(216,174,106,.55); background: rgba(216,174,106,.08); }
.backup-nudge h3 { margin: 0 0 8px; font-size: var(--fs-lg); color: var(--accent-gold); }
.backup-nudge p { margin: 0 0 14px; font-size: var(--fs-md); color: var(--text-secondary); line-height: 1.6; }
.backup-nudge button { display: block; width: 100%; min-height: 52px; border-radius: 999px; font-size: var(--fs-base); font-weight: 700; cursor: pointer; }
.backup-nudge .backup-nudge-yes { background: rgba(216,174,106,.16); color: var(--text-primary); border: 1.5px solid var(--accent-gold); }
.backup-nudge .backup-nudge-no { margin-top: 10px; background: transparent; color: var(--text-secondary); border: 1px solid rgba(var(--hanji-rgb), 0.26); }

/* 소리로 듣기 (2026-09-26) */
.tts-bar { display: flex; justify-content: flex-end; margin: 6px 0 8px; }
.tts-bar[hidden] { display: none; }
.tts-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px;
  border-radius: 999px; border: 1px solid rgba(216,174,106,.5); background: transparent;
  color: var(--accent-gold); font-size: var(--fs-sm); font-weight: 700; cursor: pointer;
}
.tts-btn::before { content: ''; width: 14px; height: 14px; flex-shrink: 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9H4zm12.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9H4zm12.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4z'/%3E%3C/svg%3E") center/contain no-repeat; }
.tts-btn.speaking { background: rgba(216,174,106,.16); }
.tts-btn.speaking::before { -webkit-mask: none; mask: none; width: 10px; height: 10px; border-radius: 2px; }
.today-word-card .tts-bar, #meet-card .tts-bar { justify-content: flex-start; }
body.easy-mode .tts-btn { min-height: 52px; font-size: var(--fs-base); padding: 0 20px; }
body.easy-mode .tts-btn::before { width: 18px; height: 18px; }

/* 위치 켜는 법 (2026-09-26) */
.location-help-modal .loc-help-lead { margin: 0 0 12px; line-height: 1.6; }
.loc-help-os { margin: 0 0 14px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid rgba(216,174,106,.28); background: rgba(216,174,106,.05); }
.loc-help-os h3 { margin: 0 0 6px; font-size: var(--fs-lg); color: var(--accent-gold); }
.loc-help-os ol { margin: 0; padding-left: 1.3em; }
.loc-help-os li { margin: 6px 0; line-height: 1.6; }
.loc-help-alt { margin: 8px 0 0; font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.6; }

/* 첫 화면 「바로 시작하기」 (2026-09-26) — 밝은 한지 위라 종이빛 바탕에 먹빛 글씨 */
.quick-start-btn {
  position: absolute; bottom: calc(34% - 78px); left: 50%; transform: translateX(-50%); z-index: 999;
  width: 60%; min-height: 56px; padding: 6px 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: 28px; border: 1.5px solid #2b2438; background: rgba(245, 239, 226, .92); color: #2b2438;
  font-family: var(--font-serif); font-size: var(--fs-lg); font-weight: 700; cursor: pointer;
}
.quick-start-btn small { font-family: var(--font-sans, inherit); font-size: var(--fs-xxs); font-weight: 400; color: #4a4152; }
#splash-stage-start:not(.active) .quick-start-btn { display: none; }

/* ── 쉬운 화면 · 순례 (2026-09-26) ─────────────────────────
   「성지 지도」 큰 단추 · 작은 탭 셋(인증 · 수첩 · 순교자) · 가까운 성지 인증 · 가까운 성지 목록만.
   숨김: 「코스」 탭 · 오늘의 순례(앞선 순례자와 봉헌) · 오늘 순교하신 분(「오늘」에 이미 있음). */
body.easy-mode #view-pilgrimage .view-header-action {
  display: block; width: 100%; min-height: 64px; margin-top: var(--space-md);
  border-radius: var(--r-lg); border: 1.5px solid rgba(216,174,106,.55); background: rgba(216,174,106,.10);
  font-size: var(--fs-lg); font-weight: 700;
}
body.easy-mode #subtab-pil-course,
body.easy-mode #panel-pil-verify .pilgrimage-session-card,
body.easy-mode #pil-today-martyr { display: none !important; }

/* ── 쉬운 화면 · 나 (2026-09-26) ─────────────────────────────
   작은 탭 다섯이 좁아 「배낭」(성물 만들기)을 숨깁니다 → 성장 · 성사 · 동반자 · 설정.
   「성장」에서는 덕 수치 칸(여정 I · 0%)과 걸음 막대를 숨깁니다. 앞선 순례자 · 나의 순례자 · 인생 순례길은 그대로. */
body.easy-mode #subtab-my-craft { display: none !important; }
body.easy-mode #panel-my-growth .stats-card,
body.easy-mode #panel-my-growth .exp-bar-wrapper,
body.easy-mode #panel-my-growth #profile-exp-text { display: none !important; }

/* 쉬운 화면 권하기 카드 (한 번만) */
.easy-invite { margin: 4px 0 var(--space-md); padding: 18px 18px 16px; border-radius: var(--r-lg); border: 1.5px solid rgba(216,174,106,.55); background: rgba(216,174,106,.10); }
.easy-invite h3 { margin: 0 0 8px; font-size: var(--fs-lg); color: var(--accent-gold); line-height: 1.45; }
.easy-invite p { margin: 0 0 14px; font-size: var(--fs-md); color: var(--text-secondary); line-height: 1.6; }
.easy-invite button { display: block; width: 100%; min-height: 52px; border-radius: 999px; font-size: var(--fs-base); font-weight: 700; cursor: pointer; }
/* ⚠️ 「오늘」에 꽉 채운 금색 단추는 「묵상하기」 하나뿐입니다 (uistyle). 이 단추는 금 테두리로. */
.easy-invite .easy-invite-yes { background: rgba(216,174,106,.16); color: var(--accent-gold); border: 1.5px solid var(--accent-gold); }
[data-theme="light"] .easy-invite .easy-invite-yes { background: transparent; color: var(--text-primary); }   /* 밝은 화면 대비 4.5 넘게 */
.easy-invite .easy-invite-no { margin-top: 10px; background: transparent; color: var(--text-secondary); border: 1px solid rgba(var(--hanji-rgb), 0.26); }
/* 아래 네 칸(오늘 · 순례 · 기도 · 나) — 글씨와 그림을 키우고 막대도 높입니다 */
/* 2026-09-26 「여백이 너무 커」 → 막대 100 → 74px (그림 32 + 이름 한 줄이 꼭 맞게). 누르는 자리는 여전히 64px 넘음 */
/* 2026-09-26 두 번째 캡처 「줄여줘」 — 이름 밑이 홈 표시줄 자리(34pt)만큼 통째로 비어 보였습니다.
   홈 표시줄은 가는 줄 하나라 그 자리의 절반만 비워 둡니다(아래 절반은 막대 바탕만). */
body.easy-mode .app-nav-bar { height: calc(70px + env(safe-area-inset-bottom, 0px) * 0.5); padding: 0 4px calc(env(safe-area-inset-bottom, 0px) * 0.5); }
body.easy-mode .nav-tab-btn { gap: 2px; padding: 4px 6px; flex: 1 1 0; min-width: 0; }
body.easy-mode .nav-tab-btn > span:not(.nav-tab-ico) { font-size: var(--fs-lg); font-weight: 700; line-height: 1.15; }
body.easy-mode .nav-tab-ico .ui-icon,
body.easy-mode .nav-tab-ico img { width: 32px; height: 32px; }
body.easy-mode #nav-person-ico { width: 32px; height: 32px; }
body.easy-mode .app-content { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
/* 보통 화면으로 */
body.easy-mode .easy-exit { display: block; padding: 4px 2px var(--space-lg); text-align: center; }   /* 2026-09-26 위 여백 줄임 */
[data-theme="light"] .easy-exit .easy-toggle-btn { border-color: rgba(60,45,25,.28); }
.easy-exit .easy-toggle-btn {
  min-height: 52px; padding: 0 24px; border-radius: 999px; border: 1px solid rgba(var(--hanji-rgb), 0.3);
  background: transparent; color: var(--text-secondary); font-size: var(--fs-base); cursor: pointer;
}

/* ── 지도 엔진 (2026-09-30, map_engine.js) ──────────────────────────
   앱 안 «옛 지도» — 신호 없을 때. 한지빛 바다 위에 땅·강·시도 경계·큰 도시 이름. */
#map.oldmap-engine, #map.oldmap-engine.leaflet-container { background: #c9b98f; }
#map.oldmap-engine .oldmap-city { pointer-events: none; }
#map.oldmap-engine .oldmap-city span {
  display: block; text-align: center; white-space: nowrap;
  font-family: var(--font-serif); font-size: 11px; line-height: 16px; letter-spacing: 0.08em;
  color: #4a3a26; text-shadow: 0 0 2px #efe3c8, 0 0 2px #efe3c8;
}
/* 나라 전체를 볼 때는 큰 도시만 */
#map.oldmap-engine[data-zoom="5"] .oldmap-city:not(.r1):not(.r4),
#map.oldmap-engine[data-zoom="6"] .oldmap-city:not(.r1):not(.r4),
#map.oldmap-engine[data-zoom="7"] .oldmap-city.r8 { display: none; }
/* 카카오 지도 위 마커 — Leaflet 마커와 같은 겉모양 (map_engine.js 가 .leaflet-marker-icon 을 함께 붙입니다) */
#map.kakao-engine .kakao-marker { cursor: pointer; }
#map.kakao-engine .kakao-marker:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 2px; border-radius: 50%; }

/* ── 순례 화살기도 (2026-09-30, app.js pilgrimArrowHTML) — 두 줄의 짧은 기도, 조용하게 */
.pilgrim-arrow { margin: 12px 0 14px; padding: 12px 14px; border-left: 2px solid rgba(216,174,106,.55); background: rgba(216,174,106,.06); border-radius: 0 10px 10px 0; }
.pilgrim-arrow figcaption { font-size: var(--fs-xs, .75rem); color: var(--text-secondary); letter-spacing: .04em; margin-bottom: 4px; }
.pilgrim-arrow p { margin: 0; font-family: var(--font-serif); font-size: var(--fs-md, 1rem); line-height: 1.7; color: var(--text-primary); word-break: keep-all; }
.pilgrim-arrow p span { display: block; }
.pilgrim-arrow p span + span { padding-left: 1.2em; }

/* ── 십자가의 길 — 우리 글로 (2026-09-30, app.js STATIONS_OWN) · 묵주기도(.mr-sec)와 같은 결 */
#stations-flow .st-ref { margin: 0 0 14px; font-size: var(--fs-xs, .75rem); color: var(--text-secondary); }
#stations-flow .st-sec { margin: 0 0 20px; }
#stations-flow .st-sec h4 { margin: 0 0 6px; color: var(--accent-gold); font-size: var(--fs-sm); font-weight: 700; letter-spacing: .02em; }
#stations-flow .st-sec p { margin: 0 0 6px; line-height: 1.75; word-break: keep-all; }
#stations-flow .st-gaze { font-family: var(--font-serif); }
#stations-flow .st-prayer-text { font-family: var(--font-serif); color: var(--text-primary); }
#stations-flow .st-prayer small { color: var(--text-secondary); font-size: var(--fs-xs, .75rem); }
/* 2026-10-08 십자가의 길 — 기도 안내 한 줄 · 옮겨 가며(어머니께 청하오니) */
#stations-flow .st-cue { margin: 4px 0 18px; padding: 12px 10px; text-align: center; border-top: 1px solid rgba(216,174,106,.28); font-family: var(--font-serif); color: var(--text-primary); line-height: 1.7; word-break: keep-all; }
#stations-flow .st-walk { margin: 18px 0 24px; text-align: center; }
#stations-flow .st-walk-cue { font-family: var(--font-serif); font-size: var(--fs-lg, 1.1rem); color: var(--text-primary); line-height: 1.8; }
#stations-flow .st-walk small { display: block; margin-top: 8px; color: var(--text-secondary); font-size: var(--fs-xs, .75rem); }
#stations-flow .st-official { text-align: center; }
#stations-flow .st-end-btns { display: grid; gap: 8px; }

/* ════════════════════════════════════════════════════════════════
   창 통일 (2026-09-19)
   francisco: "성지인증이나 고해성사 입력할때 뜨는 창은 좀 밤티인데 좀 통일 됐으면 좋겠어"
   ① 순례 인증 창·이곳에서의 기도 창 — 남색 밤하늘 바탕, 금빛 번짐, 그림자 글씨, 형광 분홍·청록
      딱지, 노란 점선 상자를 걷어내고 앱의 다른 창(오늘의 순례·십자가의 길·묵주기도)과 같은 틀로.
   ② 읽는 글은 왼쪽 정렬 — 가운데로 모은 긴 문단은 줄 머리가 들쭉날쭉해 읽기 어렵습니다.
      창 제목만 가운데입니다.
   ③ 앱 안 입력 창(.app-form-modal) — 브라우저 회색 입력창 대신.
   ⚠️ 이 덩어리는 파일 맨 끝에 있어야 합니다(앞의 옛 규칙과 밝은 화면 규칙을 이깁니다).
   ════════════════════════════════════════════════════════════════ */
.modal-card.success-card-modal.success-card-modal,
[data-theme="light"] .modal-card.success-card-modal.success-card-modal {
  background: var(--panel-2) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5) !important;
}
.success-card-modal .success-glowing-glow { display: none; }
.modal-header.success,
.modal-header.mission {
  background: none;
  border-bottom: 1px solid var(--border-color);
  padding: 20px 20px 14px;
  gap: 4px;
}
.modal-header.success h2,
.modal-header.mission h2 {
  margin: 0;
  font-size: var(--fs-xl);
  color: var(--text-primary);
  text-shadow: none;
  word-break: keep-all;
}
.modal-eyebrow {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--accent-gold);
  letter-spacing: 0.02em;
}
.modal-header.mission .scroll-icon { display: none; }
/* 안쪽 상자들 — 하나의 «옅은 판»으로 */
.success-card-modal .mentor-dialogue-card,
.success-card-modal .success-stat-reward-text,
.success-card-modal .success-badge-container,
.success-card-modal .shrine-desc-box,
.mission-card-modal .mission-quest-box {
  background: var(--sunken) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--r-md);
  box-shadow: none !important;
  text-shadow: none !important;
}
.success-card-modal .success-stat-reward-text { font-family: var(--font-primary); }
.success-card-modal .badge-item-img-wrapper { background: var(--panel-2); border: 1px solid var(--border-color); box-shadow: none; }
.success-card-modal .discovered-item-details h4 { color: var(--text-primary); }
.success-card-modal .item-bonus-badge {
  color: var(--accent-gold);
  background: rgba(216, 174, 106, 0.10);
  border: 1px solid rgba(216, 174, 106, 0.30);
}
.success-card-modal .shrine-desc-box .desc-section.tips .section-title { color: var(--accent-gold); }
.mission-card-modal .mission-quest-box { text-align: left; padding: 16px; }
.mission-card-modal .quest-shrine-label {
  position: static;
  display: inline-block;
  margin: 0 0 8px;
  background: none;
  padding: 0;
  font-size: var(--fs-xs);
}
.mission-card-modal .quest-find { border-top: 1px solid var(--border-color); }
.mission-card-modal .reward-pill {
  background: rgba(216, 174, 106, 0.10);
  color: var(--accent-gold);
  border: 1px solid rgba(216, 174, 106, 0.30);
}
.mission-card-modal .prayer-helper { font-style: normal; }
/* ② 읽는 글은 왼쪽 */
.success-card-modal .modal-body,
.mission-card-modal .modal-body,
.compact-spiritual-modal .modal-body,
.confession-prep-modal .modal-body { text-align: left; }
.compact-spiritual-modal .modal-body h3,
.confession-prep-modal .modal-body h3 { text-align: left; }
.mary-rosary-welcome { text-align: center; }
/* ③ 앱 안 입력 창 */
.app-form-body { display: flex; flex-direction: column; gap: 14px; }
.app-form-lead { margin: 0; line-height: 1.6; word-break: keep-all; }
.app-form-field { display: flex; flex-direction: column; gap: 6px; }
.app-form-label { font-size: var(--fs-sm); font-weight: 700; color: var(--text-primary); }
.app-form-optional { font-weight: 400; color: var(--text-secondary); }
.app-form-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-color);
  background: var(--sunken);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--fs-base);
  line-height: 1.5;
}
textarea.app-form-input { min-height: 88px; resize: vertical; }
.app-form-input:focus { outline: 2px solid var(--accent-gold); outline-offset: 1px; }
.app-form-hint { margin: 0; font-size: var(--fs-xs); color: var(--text-secondary); }
.app-form-note { margin: 0; }

/* 앱 안 확인 창 (2026-09-20) — 브라우저 확인창 대신 */
.app-confirm-msg { margin: 0; line-height: 1.7; white-space: pre-line; word-break: keep-all; }
.modal-btn.danger {
  background: transparent;
  border: 1.5px solid #b4533f;
  color: #c9624d;
}
.modal-btn.danger:hover, .modal-btn.danger:focus-visible { background: rgba(180, 83, 63, 0.12); }
[data-theme="light"] .modal-btn.danger { border-color: #96453a; color: #8a3a2f; }

/* 2026-10-01 묵주기도 한 단의 기도 넷을 한 칸으로 (mary_rosary.js fatimaBlock) */
#mary-rosary-flow .mr-decade-order { font-family: inherit; font-size: var(--fs-base); line-height: 1.9; }
#mary-rosary-flow .mr-decade-order span { color: var(--text-secondary); margin: 0 6px; }

/* 2026-10-01 앱의 목적 한 줄 (첫 화면 Stage 2 · 이 앱에 대하여) */
.splash-purpose {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  line-height: 1.75;
  color: #3b3248;
  margin: 18px 0 0;
  text-shadow: 0 1px 6px rgba(255, 250, 240, 0.95), 0 0 14px rgba(255, 250, 240, 0.8);
}
.about-purpose strong { color: var(--accent-gold); font-weight: 700; }

/* 2026-10-01 이곳에서 만나는 예수님 — 인증 창 맨 위 (app.js renderSuccessJesus) */
.shrine-jesus { margin: 0 0 16px; text-align: left; }
.shrine-jesus .sj-meet { border-left: 3px solid var(--accent-gold); padding: 2px 0 2px 12px; margin: 0 0 12px; }
.shrine-jesus .sj-meet b { display: block; font-size: var(--fs-sm); color: var(--accent-gold); margin-bottom: 4px; font-weight: 700; }
.shrine-jesus .sj-meet p { margin: 0 0 4px; font-family: var(--font-serif, serif); font-size: var(--fs-base); line-height: 1.8; color: var(--text-primary); }
.shrine-jesus .sj-ref { font-size: var(--fs-xs); color: var(--text-secondary); }
.shrine-jesus .sj-prayer { background: rgba(216,174,106,.08); border: 1px solid rgba(216,174,106,.22); border-radius: 12px; padding: 10px 14px; }
.shrine-jesus .sj-prayer b { display: block; font-size: var(--fs-xs); color: var(--accent-gold); margin-bottom: 4px; }
.shrine-jesus .sj-prayer p { margin: 0 0 2px; font-family: var(--font-serif, serif); font-size: var(--fs-base); line-height: 1.75; color: var(--text-primary); }
.shrine-jesus .sj-prayer small { font-size: var(--fs-xs); color: var(--text-secondary); }
/* 기록(걸음·자취)은 예수님 아래에서 조용히 */
.success-card-modal .success-stat-reward-text { opacity: .85; }

/* 2026-10-01 오늘 사랑할 한 사람 (오늘 화면 맨 끝) */
.today-love-card .today-love-lead { margin: 4px 0 8px; line-height: 1.75; }
.today-love-card .today-love-hint { margin: 0; padding: 8px 10px; border-radius: var(--r-sm); background: rgba(216,174,106,.08); color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.6; }
.today-love-card .today-love-hint span { color: var(--text-primary); }

/* 2026-10-01 함께하는 순례 — 집에서 기도로 함께 (app.js renderHomeWalkCard · homeWithHTML) */
.home-walk-card .home-walk-eyebrow { margin: 0 0 2px; font-size: var(--fs-xs); color: var(--accent-gold); font-weight: 700; }
.home-walk-card h3 { margin: 0 0 6px; }
.home-walk-card .home-walk-lead, .home-walk-card .home-walk-note { margin: 0 0 10px; color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.6; }
.home-walk-card .home-walk-note { margin: 8px 0 0; font-size: var(--fs-xs); }
.home-walk-stops { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.home-walk-stop { display: block; width: 100%; min-height: 44px; text-align: left; background: transparent; border: 0; border-left: 3px solid rgba(216,174,106,.35); padding: 4px 0 4px 12px; color: inherit; font: inherit; cursor: pointer; }
.home-walk-stop b { display: block; font-size: var(--fs-sm); color: var(--text-primary); }
.home-walk-stop span { display: block; font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.6; font-family: var(--font-serif, serif); }
.home-walk-stop.done { border-left-color: var(--accent-gold); }
.home-walk-stop.done b::after { content: " ✓"; color: var(--accent-gold); }
.home-with-box { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; border: 1px dashed rgba(216,174,106,.4); text-align: left; }
.home-with-box .home-with-who { margin: 0 0 2px; font-size: var(--fs-sm); color: var(--text-primary); }
.home-with-box .home-with-who b { color: var(--accent-gold); }
.home-with-box .home-with-lead { margin: 0; font-size: var(--fs-xs); color: var(--text-secondary); }
/* 2026-10-01 사랑이 자란 흔적 — 숫자·퍼센트 대신 말로 */
.love-trace { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); line-height: 1.65; color: var(--text-secondary); }
.love-trace b { color: var(--accent-gold); font-weight: 700; }
.love-trace .love-trace-first { list-style: none; margin-left: -18px; }

/* 2026-10-01 살아 있는 촛불 (app.js startCandleLife) — 저절로 · 폰 기울기 · 주변 소리 · 성지 바람 · 밤 */
.breath-candle.alive:not(.shaken) .candle-flicker { animation: none; transform: rotate(var(--life-sway, 0deg)) scale(var(--life-sx, 1), var(--life-sy, 1)); }
.prayer-candle.is-lit.alive .candle-glow { opacity: calc(.9 * var(--life-glow, 1)); transition: none; }
.prayer-candle.is-lit .candle-tilt { transform: rotate(calc(var(--candle-lean, 0deg) + var(--blow, 0) * -28deg)) scale(calc(1 - var(--blow, 0) * .45)); }
.breath-candle.alive.night .candle-glow { filter: saturate(1.15); scale: 1.08; }
#med-breath.alive .breath-core { filter: brightness(var(--life-glow, 1)); }
@media (prefers-reduced-motion: reduce) { .breath-candle.alive .candle-flicker { transform: none; } }

/* 2026-10-01 앞선 순례자의 편지 (app.js renderLetterCard · openLetter) */
.letter-card .letter-card-eyebrow { margin: 0 0 2px; font-size: var(--fs-xs); color: var(--accent-gold); font-weight: 700; }
.letter-card h3 { margin: 0 0 4px; }
.letter-card .letter-card-lead { margin: 0 0 10px; color: var(--text-secondary); font-size: var(--fs-sm); }
.letter-paper { position: relative; background: #fffaf0; color: #2b2420; border: 1px solid #e3d7c2; border-radius: var(--r-xs); padding: 22px 20px 16px; text-align: left;
  background-image: repeating-linear-gradient(transparent 0 31px, rgba(168,130,60,.08) 31px 32px); box-shadow: 0 8px 20px rgba(0,0,0,.18); }
.letter-paper::before { content: ""; position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle, #9c2e2e 0 55%, #7d2020 56% 100%); opacity: .85; }
.letter-paper::after { content: "✝"; position: absolute; top: 16px; right: 23px; color: #f6e3c3; font-size: 13px; }
.letter-paper p { margin: 0 0 10px; font-family: var(--font-serif, serif); font-size: var(--fs-base); line-height: 1.85; word-break: keep-all; }
.letter-paper .lt-to { font-weight: 700; margin-bottom: 12px; padding-right: 36px; }
.letter-paper .lt-bless { background: rgba(168,130,60,.1); border-left: 3px solid #a8823c; padding: 8px 12px; }
.letter-paper .lt-from { text-align: right; margin-top: 14px; }
.letter-paper .lt-from small { display: block; color: #6d625a; font-size: var(--fs-xs); }
.letter-paper .lt-note { font-size: var(--fs-xs); color: #6d625a; border-top: 1px dashed #e3d7c2; padding-top: 8px; margin: 12px 0 0; line-height: 1.6; }
.letter-list { display: flex; flex-direction: column; gap: 8px; }
.letter-row { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--card-border, rgba(216,174,106,.25)); background: transparent; color: inherit; font: inherit; cursor: pointer; min-height: 44px; }
.letter-row span { color: var(--accent-gold); font-size: var(--fs-sm); }
.letter-row small { grid-column: 1 / -1; color: var(--text-secondary); }
.letter-box { margin-top: 16px; }
.letter-box[hidden] { display: none; }

/* 2026-10-01 성지 안내 — 한 줄 · 이야기 · 꼭 보실 곳 (app.js fillShrineGuide) */
.guide-hook { display: block; margin: 0 0 6px; color: var(--accent-gold); font-weight: 700; font-size: 1.04em; line-height: 1.5; }
.guide-see { margin: 10px 0 0; text-align: left; }
.guide-see[hidden] { display: none; }
.guide-see .guide-see-title { margin: 0 0 4px; font-size: 0.82rem; color: var(--accent-gold); font-weight: 700; }
.guide-see ul { margin: 0; padding-left: 18px; }
.guide-see li { margin: 0 0 6px; font-size: 0.8rem; line-height: 1.55; color: var(--text-secondary); word-break: keep-all; }
.guide-see li b { color: var(--text-primary); }

/* 2026-10-02 증인의 눈 — 누르면 바로 반응이 보이게 · 하루 한 장면 그림 누르면 크게 */
.witness-btn, .witness-nav .modal-btn, .daily-scene-card .ds-figure { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.witness-btn:active { transform: scale(.98); background: rgba(216,174,106,.18); }
.daily-scene-card .ds-figure { position: relative; cursor: zoom-in; }
.daily-scene-card .ds-figure:active { opacity: .85; }
.daily-scene-card .ds-zoom { position: absolute; right: 8px; bottom: 8px; padding: 3px 9px; border-radius: 999px; background: rgba(30,22,14,.78); color: #fff7e6; font-size: var(--fs-xs); pointer-events: none; }
#modal-witness.witness-only .witness-page { display: none; }

/* 2026-10-02 편지함 — 읽은 뒤에도 그달엔 「오늘」에 작게 · 창 발치 단추 둘 */
.letter-card.letter-card-read .letter-card-lead { margin-bottom: 8px; }
.letter-card-row { display: flex; gap: 8px; flex-wrap: wrap; }
.letter-card-row .today-secondary-btn { flex: 1 1 0; min-height: 44px; }
.letter-box-lead { margin: 0 0 10px; color: var(--text-secondary); font-size: var(--fs-sm); }
#modal-letter .modal-footer { display: flex; gap: 8px; }
#modal-letter .modal-footer .modal-btn { flex: 1 1 0; }

/* 2026-10-02 신앙의 결단 · 다섯 걸음 */
.enc-when { margin: 0 0 8px; font-family: var(--font-serif); color: var(--accent-gold); font-size: var(--fs-md); }
.enc-pic { margin: 0 0 10px; border-radius: var(--r-sm); overflow: hidden; background: #efe3cc; aspect-ratio: 4 / 3; position: relative; }
.enc-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.enc-pic figcaption { position: absolute; right: 8px; bottom: 6px; font-size: var(--fs-xs); color: #fff7e6; background: rgba(30,22,14,.78); padding: 1px 8px; border-radius: 999px; }
.enc-question-sm { font-size: var(--fs-sm); color: var(--text-secondary); }
.enc-breath { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; color: var(--text-secondary); font-size: var(--fs-sm); }
.enc-breath-ring { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--accent-gold); flex: 0 0 auto; animation: enc-breathe 5s ease-in-out infinite; }
.enc-breath.done .enc-breath-ring { animation: none; background: rgba(216,174,106,.35); }
@keyframes enc-breathe { 0%, 100% { transform: scale(.8); opacity: .6; } 40% { transform: scale(1.15); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .enc-breath-ring { animation: none; } }
.enc-ask { margin: 12px 0 6px; font-size: var(--fs-sm); color: var(--accent-gold); font-weight: 700; }
.enc-choice.on, .enc-feel.on, .enc-resolve.on { border-color: var(--accent-gold); background: rgba(216,174,106,.22); }
.enc-feels { display: flex; flex-wrap: wrap; gap: 6px; }
.enc-feel { min-height: 44px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(216,174,106,.35); background: transparent; color: inherit; font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.enc-cost { margin: 8px 0; color: #e0a98f; font-size: var(--fs-sm); line-height: 1.6; word-break: keep-all; }
.enc-honest { margin: 0 0 10px; font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.6; word-break: keep-all; }
.enc-gospel { margin: 4px 0; }
.enc-gospel-ref { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--accent-gold); border-radius: 999px; color: var(--accent-gold); text-decoration: none; }
.enc-gospel-line { margin: 6px 0 4px; font-family: var(--font-serif); line-height: 1.75; word-break: keep-all; }
.enc-resolves { display: flex; flex-direction: column; gap: 8px; }
.enc-resolve { min-height: 44px; padding: 10px 12px; text-align: left; border-radius: var(--r-md); border: 1px solid rgba(216,174,106,.35); background: rgba(216,174,106,.06); color: inherit; font: inherit; cursor: pointer; word-break: keep-all; }
.enc-own-label { display: block; margin: 12px 0 4px; font-size: var(--fs-sm); color: var(--text-secondary); }
.enc-own { width: 100%; box-sizing: border-box; padding: 10px; border-radius: var(--r-sm); border: 1px solid rgba(216,174,106,.35); background: rgba(255,255,255,.04); color: inherit; font: inherit; resize: vertical; }
.enc-pray { margin: 12px 0 6px; text-align: center; font-family: var(--font-serif); color: var(--accent-gold); line-height: 1.6; word-break: keep-all; }
#btn-encounter-next:disabled { opacity: .55; cursor: default; }
.resolve-card .resolve-text { margin: 4px 0; font-family: var(--font-serif); font-size: var(--fs-md); word-break: keep-all; }
.resolve-card .resolve-who, .resolve-card .resolve-note { margin: 4px 0 8px; font-size: var(--fs-xs); color: var(--text-secondary); word-break: keep-all; }
.resolve-row { cursor: default; }
.enc-cost, .enc-honest, .enc-gospel-line, .enc-question { text-align: left; }

/* 2026-10-02 francisco 「밑에 잘려 보여 — 그냥 화면 다 꽉 채우면 어때」 (서소문 성지 창 캡처)
   아이폰 홈 화면 앱의 「아래 채우기」(ios-fill)에서는 몸통이 fixed 가 아니라 창 덮개(.modal-overlay)가
   짧게 잡힌 화면(812) 높이만 덮고, 그 아래 탭 막대(그림 윗부분이 잘린 채)가 드러났습니다.
   덮개도 틀과 같은 100lvh(화면 끝까지)로 늘려 창이 뜨면 탭 막대까지 다 덮습니다. */
html.ios-standalone.ios-fill .modal-overlay { height: 100lvh; min-height: 100%; }

/* 2026-10-02 동반자의 소임 — 자리마다 건네는 다정한 한마디 (app.js companionRoleHTML) */
.companion-role { margin: 10px 0; padding: 10px 12px; border-radius: var(--r-sm); background: rgba(216,174,106,.09); border: 1px solid rgba(216,174,106,.30); text-align: left; }
.companion-role p { margin: 0; word-break: keep-all; line-height: 1.65; }
.companion-role .cr-who { font-size: var(--fs-xs); color: var(--text-secondary); }
.companion-role .cr-who strong { color: var(--accent-gold); }
.companion-role .cr-say { margin-top: 3px; font-size: var(--fs-sm); color: var(--text-primary); }
.companion-role .cr-tip { margin-top: 5px; font-size: var(--fs-xs); color: var(--text-secondary); }
.companion-role .cr-tip::before { content: '· '; }
#today-companion-role { margin-top: 4px; }
.companion-role-intro { margin: 0 0 8px; font-size: var(--fs-sm); line-height: 1.65; color: var(--text-primary); word-break: keep-all; }

/* 2026-10-03 묵상을 마친 뒤 한 화면 (app.js renderMeditationDone) — 창이 «그냥 사라지지» 않게 */
.med-done { padding: 6px 0 2px; }
.med-done h3 { margin: 4px 0 10px; }
.med-done p { margin: 0 0 8px; line-height: 1.7; word-break: keep-all; }
.med-done-word strong { color: var(--accent-gold); }
.med-done-msg { color: var(--text-primary); }
.med-done-sub { font-size: var(--fs-sm); color: var(--text-secondary); }

/* 2026-10-03 고해 준비 — 계명마다 뜻을 푼 쉬운 제목 (링크만 판에서는 계명 문구 대신 이 줄이 뜻을 알려 줌) */
.examen-easy { margin: -4px 0 10px; font-size: var(--fs-sm); color: var(--accent-gold); font-weight: 700; word-break: keep-all; }

/* 2026-10-03 창 위에 창이 뜰 때(openModal 이 새 창을 1000 이상으로 올림) 알림이 그 밑에 깔리지 않게 */
.toast-message { z-index: 100005; }

/* 2026-10-04 성지 도착 — 「하느님께서 초대하셨습니다」 한마디 */
.success-invite { margin: 0 0 14px; padding: 10px 12px; border-radius: var(--r-sm); background: rgba(216,174,106,.10); color: var(--text-primary); font-family: var(--font-serif); font-size: var(--fs-md); line-height: 1.7; word-break: keep-all; text-align: center; }


/* ── 2026-10-04 성지에 닿는 순간 — 먹 번짐 (arrive_ink.js) ─────────────
   그림은 창 맨 위, 아래 끝은 창 바탕으로 스미듯 사라집니다.
   ⚠️ .arrive-hold 동안 본문을 숨깁니다 — arrive_ink.js 가 늦어도 8초 안에 반드시 풉니다. */
.success-card-modal .arrive-stage { position: relative; flex: 0 0 auto; width: 100%; aspect-ratio: 960 / 717; max-height: 36vh; max-height: 36dvh;
  overflow: hidden; cursor: pointer; background: #f8ede0;
  -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
.success-card-modal .arrive-stage[hidden] { display: none; }
.success-card-modal .arrive-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transform-origin: 58% 56%; will-change: transform; }
.success-card-modal .arrive-hint { position: absolute; right: 10px; bottom: 16%; font-size: var(--fs-xxs); color: rgba(80,60,40,.78); transition: opacity .6s; pointer-events: none; }
.success-card-modal:not(.arrive-playing) .arrive-hint { opacity: 0; }
.success-card-modal.arrive-on .modal-header.success { border-bottom: 0; padding-top: 6px; }
.success-card-modal.arrive-on .modal-eyebrow { opacity: 0; filter: blur(5px); transform: translateY(4px); transition: opacity 1.4s ease, filter 1.6s ease, transform 1.6s ease; }
.success-card-modal.arrive-on.arrive-eyebrow .modal-eyebrow { opacity: 1; filter: none; transform: none; }
.success-card-modal.arrive-on .modal-header.success h2 {
  -webkit-mask-image: linear-gradient(90deg, #000 0 42%, transparent 58% 100%); mask-image: linear-gradient(90deg, #000 0 42%, transparent 58% 100%);
  -webkit-mask-size: 260% 100%; mask-size: 260% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0; mask-position: 100% 0; filter: blur(1.5px);
  transition: -webkit-mask-position 1.7s cubic-bezier(.45,.1,.3,1), mask-position 1.7s cubic-bezier(.45,.1,.3,1), filter 1.4s ease .9s; }
.success-card-modal.arrive-on.arrive-write .modal-header.success h2 { -webkit-mask-position: 0 0; mask-position: 0 0; filter: none; }
.success-card-modal .arrive-stroke { position: absolute; pointer-events: none; opacity: .85; }
.success-card-modal .arrive-seal-cv { position: absolute; pointer-events: none; opacity: 0; transform: scale(1.35) rotate(-4deg);
  transition: opacity .35s ease-out, transform .5s cubic-bezier(.2,1.4,.4,1); }
.success-card-modal.arrive-seal .arrive-seal-cv { opacity: .9; transform: scale(1) rotate(-4deg); }
.success-card-modal.arrive-on > .modal-body { transition: opacity 1.6s ease; }
.success-card-modal.arrive-hold > .modal-body { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .success-card-modal.arrive-on .modal-eyebrow, .success-card-modal.arrive-on .modal-header.success h2,
  .success-card-modal .arrive-seal-cv, .success-card-modal.arrive-on > .modal-body { transition: none; }
}


/* ── 2026-10-05 증인의 눈 — 그림이 살아 숨 쉬듯 (witness_motion.js) ─────────────
   깊이(WebGL) 캔버스가 그림 위를 덮고, 그 위로 새·안개·햇살. 원래 img 는 아래에 그대로(대체 글·WebGL 없을 때). */
.witness-figure.wm-on { position: relative; }
.witness-figure.wm-on > img { will-change: transform; }
.witness-figure.wm-gl-on > img { opacity: 0; }
.witness-figure.wm-on.witness-turn > img { animation: none; }
.witness-figure .wm-gl, .witness-figure .wm-birds { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.witness-figure .wm-gl { z-index: 1; }
.witness-figure .wm-birds { z-index: 2; }
.witness-figure .wm-mist { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; opacity: .6; transition: opacity 1.5s ease; }
.witness-figure.wm-turning .wm-mist { opacity: 1; }
.witness-figure .wm-mist i { position: absolute; inset: -12% -30%; display: block;
  background: radial-gradient(ellipse 30% 13% at 26% 24%, rgba(251,246,237,.6), rgba(251,246,237,0) 70%),
              radial-gradient(ellipse 26% 10% at 72% 36%, rgba(251,246,237,.45), rgba(251,246,237,0) 70%);
  animation: wm-drift 22s ease-in-out infinite alternate; }
.witness-figure .wm-mist i + i { background: radial-gradient(ellipse 45% 9% at 40% 84%, rgba(251,246,237,.5), rgba(251,246,237,0) 70%),
              radial-gradient(ellipse 30% 8% at 82% 70%, rgba(251,246,237,.35), rgba(251,246,237,0) 70%);
  animation-duration: 15s; animation-direction: alternate-reverse; }
@keyframes wm-drift { from { transform: translateX(-9%); } to { transform: translateX(9%); } }
.witness-figure .wm-light { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0;
  background: linear-gradient(112deg, rgba(255,240,210,0) 30%, rgba(255,236,196,.42) 48%, rgba(255,246,226,.18) 54%, rgba(255,240,210,0) 68%);
  background-size: 260% 100%; background-position: 110% 0; mix-blend-mode: soft-light; }
.witness-figure .wm-light.go { animation: wm-light 9s ease-in-out 2.2s both; }
@keyframes wm-light { 0% { opacity: 0; background-position: 110% 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; background-position: -10% 0; } }
@media (prefers-reduced-motion: reduce) { .witness-figure .wm-mist, .witness-figure .wm-light { display: none; } }


/* ── 2026-10-05 순례 마침 「오늘 걸으신 길」 (route_ink.js) ───────────── */
.route-ink { margin: 12px 0 16px; text-align: center; }
.route-ink[hidden] { display: none; }
.route-ink .ri-stage { position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 52vh; max-height: 52dvh; margin: 0 auto; border-radius: var(--r-md); overflow: hidden; background: #efe4cf; cursor: pointer; }
.route-ink .ri-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.route-ink .ri-route { text-wrap: balance; margin: 12px 4px 0; font-family: var(--font-serif); font-size: var(--fs-md); line-height: 1.7; color: var(--text-primary); word-break: keep-all; opacity: 0; transform: translateY(5px); transition: opacity 1.6s ease, transform 1.6s ease; }
.route-ink .ri-bless { margin: 6px 0 0; font-family: var(--font-serif); font-size: var(--fs-sm); color: var(--accent-gold); opacity: 0; transition: opacity 1.8s ease .6s; }
.route-ink.ri-done .ri-route, .route-ink.ri-done .ri-bless { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .route-ink .ri-route, .route-ink .ri-bless { transition: none; } }


/* ── 2026-10-05 십자가의 길 — 수묵 언덕을 한 처씩 오르는 순례자 (stations_hill.js) ── */
.stations-hill { width: 100%; aspect-ratio: 2.35 / 1; margin: 0 0 14px; border-radius: 12px; overflow: hidden; background: #f6eee0; }
.stations-hill[hidden] { display: none; }
.stations-hill canvas { width: 100%; height: 100%; display: block; }

/* ── 옛 지도 — 대동여지도 말투 (2026-10-05, oldmap_ink.js · map_engine.js) ──────────────
   바탕은 붓으로 그린 타일(.oldmap-ink). 밤에는 등잔불 아래 한지(가장자리 어둑).
   길잡이 붓 화살·알림은 안개(#fog-container-div, z 900)보다 위에 둡니다. */
#map.oldmap-engine, #map.oldmap-engine.leaflet-container { background: #d6cfb8; }
:root:not([data-theme="light"]) #map.oldmap-engine { background: #6f604a; }
#map.oldmap-engine .oldmap-lamp { position: absolute; inset: 0; pointer-events: none; z-index: 450; display: none;
  background: radial-gradient(ellipse at 50% 55%, rgba(255,190,110,.10) 0%, rgba(40,24,10,0) 45%, rgba(20,12,4,.42) 100%); }
:root:not([data-theme="light"]) #map.oldmap-engine .oldmap-lamp { display: block; }
.oldmap-badge { position: absolute; top: 104px; left: 12px; z-index: 950; display: flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 7px; border-radius: 999px; background: rgba(244,236,220,.94); color: #3a2c1c; font-size: min(var(--fs-xxs), 15px); font-family: var(--font-serif);
  box-shadow: 0 1px 6px rgba(0,0,0,.15); white-space: nowrap; pointer-events: none; }
.oldmap-badge i { display: inline-grid; place-items: center; width: 20px; height: 20px; background: #b0352b; color: #f6e6d0; font-style: normal; font-size: 11px; border-radius: 3px; }
:root:not([data-theme="light"]) .oldmap-badge { background: rgba(60,48,34,.94); color: #efe2c8; }
.oldmap-guide { position: absolute; left: 12px; top: 104px; z-index: 950; display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 7px; border-radius: var(--r-md);
  background: rgba(244,236,220,.95); box-shadow: 0 1px 8px rgba(0,0,0,.18); max-width: calc(100% - 24px); pointer-events: auto; }
.oldmap-guide[hidden] { display: none; }
.oldmap-guide svg { width: 42px; height: 42px; flex: none; }
.oldmap-guide .og-arrow path { stroke: #2e241a; }
.oldmap-guide p { margin: 0; font-family: var(--font-serif); font-size: 14px; line-height: 1.45; color: #2e241a; word-break: keep-all; }
:root:not([data-theme="light"]) .oldmap-guide { background: rgba(60,48,34,.95); }
:root:not([data-theme="light"]) .oldmap-guide .og-arrow path { stroke: #f0d9a8; }
:root:not([data-theme="light"]) .oldmap-guide p { color: #f0e2c6; }
.oldmap-ring-label span { display: block; text-align: center; font-family: var(--font-serif); font-size: 11px; color: #5a4630; text-shadow: 0 0 3px #efe4c8, 0 0 3px #efe4c8; white-space: nowrap; }
.map-wrapper.route-mode .oldmap-badge, .map-wrapper.route-mode .oldmap-guide { display: none !important; }
.map-wrapper.has-oldmap-badge .oldmap-guide { top: 138px; }

/* ── 밤 기도의 별 (2026-10-05, night_stars.js) — 화면 전체를 잠깐 덮는 수묵 밤하늘 ── */
.night-stars { position: fixed; inset: 0; z-index: 12000; background: #0d1222; opacity: 0; transition: opacity .7s ease; cursor: pointer; outline: none; }
.night-stars.ns-in { opacity: 1; } .night-stars.ns-out { opacity: 0; }
.night-stars canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.night-stars .ns-text { position: absolute; left: 0; right: 0; bottom: calc(7% + env(safe-area-inset-bottom, 0px)); text-align: center; color: #f3ead6; opacity: 0; padding: 0 24px; pointer-events: none; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.night-stars .ns-line { font-family: var(--font-serif); font-size: 19px; line-height: 1.6; margin: 0 0 6px; letter-spacing: .02em; word-break: keep-all; }
.night-stars .ns-sub { font-family: var(--font-serif); font-size: 15px; opacity: .8; margin: 0; }
@media (prefers-reduced-motion: reduce) { .night-stars { transition: none; } }

/* ── 말씀 읽기 길잡이 (2026-10-05) — 몇 장 몇 절을 찾을지 크게, 돌아오면 낱말 칸 ── */
.word-guide { position: fixed; inset: 0; z-index: 100003; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,.55); padding: 0 12px calc(12px + env(safe-area-inset-bottom, 0px)); animation: wg-in .2s ease-out; }
.word-guide-card { width: 100%; max-width: 440px; background: var(--bg-color); background-image: linear-gradient(var(--panel), var(--panel)); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: var(--r-md) var(--r-md) var(--r-sm) var(--r-sm); padding: 18px 18px 16px; box-shadow: var(--glass-shadow); }
.wg-kicker { margin: 0 0 6px; font-size: var(--fs-sm); color: var(--accent-gold); letter-spacing: .04em; }
.wg-where { margin: 0 0 12px; font-size: var(--fs-xl); line-height: 1.45; }
.wg-where b { color: var(--accent-gold); font-weight: 700; }
.wg-to { display: inline-block; margin-left: 4px; font-size: var(--fs-base); color: var(--text-secondary); }
.wg-steps { margin: 0 0 14px; padding-left: 1.3em; font-size: var(--fs-base); line-height: 1.6; }
.wg-steps li { margin: 4px 0; }
.wg-num { display: inline-block; min-width: 1.6em; padding: 0 .3em; border-radius: var(--r-xs); background: var(--accent-gold); color: var(--on-gold); text-align: center; }
.wg-soft { color: var(--text-secondary); font-size: var(--fs-sm); }
.wg-acts { display: flex; gap: 8px; }
.wg-acts > * { flex: 1; min-height: 48px; display: flex; align-items: center; justify-content: center; text-decoration: none; border-radius: var(--r-sm); font-size: var(--fs-base); }
.wg-label { display: block; margin: 6px 0; font-size: var(--fs-base); line-height: 1.5; }
.wg-input { width: 100%; box-sizing: border-box; min-height: 46px; margin: 0 0 14px; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--border-color); background: var(--sunken); color: var(--text-primary); font-size: 1rem; }
.med-word-own { margin-top: 12px; }
@keyframes wg-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .word-guide { animation: none; } }
body.easy-mode .wg-where { font-size: 1.45rem; }
body.easy-mode .wg-steps { font-size: var(--fs-lg); }

/* ── 동반 중인 수호자 칸 — 글 상자 정리 (2026-10-06 francisco 「정리해줘 글 상자가 안 맞아」) ──
   전에는 그림 · 글 · 「그만 모시기」 단추가 한 줄(flex)에 있어 폰에서 글이 가운데 좁은 기둥으로 눌렸습니다.
   → 그림 옆에는 이름 줄만, 소임 글과 기도 단추는 칸 너비 전체로, 「그만 모시기」는 맨 아래 오른쪽에 작게. */
#panel-my-companion .equipped-slot-row { display: grid; grid-template-columns: 74px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; align-items: start; }
#panel-my-companion .equipped-slot-info { display: contents; }
#panel-my-companion .equipped-slot-avatar { grid-column: 1; grid-row: 1 / span 3; align-self: center; }
#panel-my-companion .equipped-slot-info .equip-label { grid-column: 2; grid-row: 1; align-self: end; }
#panel-my-companion .equipped-slot-info h4 { grid-column: 2; grid-row: 2; margin: 0; }
#panel-my-companion #active-equipped-bonus { grid-column: 2; grid-row: 3; }
#panel-my-companion #active-companion-prayer-action { grid-column: 1 / -1; grid-row: 4; margin-top: 8px; }
#panel-my-companion #active-companion-prayer-action .companion-role-intro { margin: 0 0 4px; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-secondary); word-break: keep-all; }
#panel-my-companion #active-companion-prayer-action .equip-action-btn { min-height: 46px; }
#panel-my-companion #btn-unequip { grid-column: 1 / -1; grid-row: 5; justify-self: end; margin-top: 6px; width: auto; padding: 6px 14px; font-size: var(--fs-sm); }

/* ── 아이와 함께 — 성지 이야기 (2026-10-06, kids_stories.js) ── */
.kids-story-box[hidden] { display: none !important; }
.kids-story-box { margin: 10px 0; }
.kids-story-btn { width: 100%; min-height: 52px; padding: 10px 14px; border-radius: var(--r-md); border: 1px solid rgba(216,174,106,.45); background: rgba(216,174,106,.1); color: var(--text-primary); font-size: var(--fs-base); font-weight: 700; text-align: center; cursor: pointer; }
.kids-story-btn .kids-story-eyebrow { display: block; margin-bottom: 2px; font-size: var(--fs-xs); font-weight: 600; color: var(--accent-gold); }
.kids-story { position: fixed; inset: 0; z-index: 100003; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,.55); padding: 0 12px calc(12px + env(safe-area-inset-bottom, 0px)); animation: wg-in .2s ease-out; }
.kids-story-card { width: 100%; max-width: 460px; max-height: calc(100vh - 40px); overflow-y: auto; background: var(--bg-color); background-image: linear-gradient(var(--panel), var(--panel)); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: var(--r-md) var(--r-md) var(--r-sm) var(--r-sm); padding: 18px 18px 16px; box-shadow: var(--glass-shadow); }
.kids-story-card .kids-story-eyebrow { margin: 0 0 4px; font-size: var(--fs-sm); color: var(--accent-gold); }
.kids-story-card h3 { margin: 0 0 12px; font-size: var(--fs-xl); line-height: 1.4; outline: none; }
.kids-story-text p { margin: 0 0 8px; font-size: 1.02rem; line-height: 1.85; word-break: keep-all; }
.kids-story-label { margin: 14px 0 4px; font-size: var(--fs-sm); font-weight: 700; color: var(--accent-gold); }
.kids-story-ask ul { margin: 0; padding-left: 1.2em; line-height: 1.7; }
.kids-story-prayer p:last-child { margin: 0; font-family: var(--font-serif); line-height: 1.7; }
.kids-story-note { margin: 12px 0 10px; font-size: var(--fs-xs); color: var(--text-secondary); }
.kids-story-acts button { width: 100%; min-height: 48px; border-radius: var(--r-sm); }
@media (prefers-reduced-motion: reduce) { .kids-story { animation: none; } }
body.easy-mode .kids-story-text p { font-size: 1.2rem; }
.kids-mode-card .kids-mode-btn { width: 100%; min-height: 52px; margin-top: var(--space-md); border-radius: 999px; border: 1px solid var(--accent-gold); background: rgba(216,174,106,.12); color: var(--text-primary); font-size: var(--fs-base); font-weight: 700; cursor: pointer; }
.kids-mode-card .kids-mode-btn[aria-pressed="true"] { background: transparent; color: var(--text-secondary); border-color: var(--border-color); }
/* 아이 순례 수첩 — 낙관 (2026-10-06) */
.kids-seal { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; flex: none; border: 2.5px solid #b5472f; border-radius: var(--r-xs); outline: 1px solid rgba(181,71,47,.55); outline-offset: 2px; color: var(--seal-ink); background: rgba(181,71,47,.06); transform: rotate(-4deg); font-family: var(--font-serif); font-weight: 700; font-size: 15px; line-height: 1.05; }
.kids-seal span { writing-mode: vertical-rl; text-orientation: upright; letter-spacing: -1px; max-height: 48px; }
.kids-seal-press { animation: kids-seal-press .45s ease-out; }
@keyframes kids-seal-press { 0% { transform: rotate(-4deg) scale(1.6); opacity: 0; } 60% { transform: rotate(-4deg) scale(.92); opacity: 1; } 100% { transform: rotate(-4deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .kids-seal-press { animation: none; } }
.kids-seal-slot:empty { display: none; }
.kids-seal-slot { margin-top: 14px; }
.kids-seal-row { display: flex; align-items: center; gap: 14px; }
.kids-seal-row p { margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.5; }
.kids-seal-btn { width: 100%; min-height: 48px; border-radius: var(--r-sm); border: 1.5px dashed #b5472f; background: transparent; color: var(--seal-ink); font-size: var(--fs-base); font-weight: 700; cursor: pointer; }
.kids-book { list-style: none; margin: 4px 0 12px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.kids-book-item { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px 10px; border: 1px solid var(--border-color); border-radius: var(--r-sm); background: var(--sunken); color: var(--text-primary); cursor: pointer; }
.kids-book-name { font-size: var(--fs-xs); line-height: 1.3; text-align: center; word-break: keep-all; }
.kids-book-date { font-size: var(--fs-xxs); color: var(--text-secondary); }
.kids-book-empty { margin: 4px 0 14px; color: var(--text-secondary); line-height: 1.6; }
.kids-mode-card .kids-book-btn { width: 100%; min-height: 48px; margin-top: var(--space-md); border-radius: 999px; border: 1px solid #b5472f; background: rgba(181,71,47,.08); color: var(--text-primary); font-size: var(--fs-base); font-weight: 700; cursor: pointer; }
.kids-mode-card .kids-book-btn[hidden] { display: none; }
/* 2026-10-06 젊은 순례자(청소년·청년) — youth_stories.js. 아이 이야기 창(.kids-story)을 그대로 쓰고 색만 바꿈 */
.youth-story-btn { border-color: rgba(120,150,200,.5); background: rgba(120,150,200,.1); }
.youth-story-btn .kids-story-eyebrow { color: #7f9bc8; }
.youth-story-card .kids-story-eyebrow, .youth-story-card .kids-story-label { color: #7f9bc8; }
.youth-block p:last-child { margin: 0; line-height: 1.75; word-break: keep-all; }
.youth-course-intro { margin: 0 0 12px; line-height: 1.75; word-break: keep-all; }
.youth-course { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.youth-course-stop { width: 100%; min-height: 56px; display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--border-color); background: transparent; color: var(--text-primary); text-align: left; cursor: pointer; }
.youth-course-no { flex: 0 0 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1px solid #7f9bc8; color: #7f9bc8; font-weight: 700; }
.youth-course-body { display: flex; flex-direction: column; gap: 2px; }
.youth-course-body small { color: var(--text-secondary); line-height: 1.5; word-break: keep-all; }
.youth-mode-card .youth-course-btn { width: 100%; min-height: 48px; margin-top: var(--space-md); border-radius: 999px; border: 1px solid #7f9bc8; background: rgba(120,150,200,.08); color: var(--text-primary); font-size: var(--fs-base); font-weight: 700; cursor: pointer; }
.youth-mode-card .youth-course-btn[hidden] { display: none; }

/* 2026-10-07 수호천사님 — 누구에게나 곁에 계신 길동무 (아침·밤 한마디 · 순례 시작·마침 · 길 살피기) */
.angel-line { margin: 8px 0; padding: 8px 12px; border-left: 3px solid rgba(216,174,106,.55); text-align: left; }
.angel-line p { margin: 0; word-break: keep-all; line-height: 1.65; }
.angel-line .al-who { font-size: var(--fs-xs); color: var(--text-secondary); }
.angel-line .al-say { margin-top: 2px; font-size: var(--fs-sm); color: var(--text-primary); }
.angel-check { margin: 10px 0; padding: 8px 12px; border-radius: var(--r-sm); border: 1px solid rgba(216,174,106,.30); text-align: left; }
.angel-check summary { cursor: pointer; font-size: var(--fs-sm); color: var(--accent-gold); min-height: 44px; display: flex; align-items: center; }
.angel-check .ac-lead { margin: 0 0 6px; font-size: var(--fs-xs); color: var(--text-secondary); line-height: 1.6; word-break: keep-all; }
.angel-check ol { margin: 0; padding-left: 1.2em; }
.angel-check li { margin: 0 0 10px; }
.angel-check li p { margin: 0; line-height: 1.65; word-break: keep-all; }
.angel-check .ac-ask { font-size: var(--fs-sm); color: var(--text-primary); }
.angel-check .ac-say { margin-top: 2px; font-size: var(--fs-xs); color: var(--text-secondary); }
.angel-check .dev-tools-btn { margin-top: 6px; }

/* 2026-10-07 함께 걷는 길 — 세 분을 한곳에서 보고 바꾸기 */
#today-companions[role="button"] { cursor: pointer; }
#today-companions[role="button"]:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 3px; }
.today-faces-hint { margin: 2px 0 6px; font-size: var(--fs-xs); color: var(--text-secondary); text-align: center; word-break: keep-all; }
.walk-together-lead { margin: 0 0 10px; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-secondary); word-break: keep-all; }
.walk-together-faces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.walk-together-faces .wt-col { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-width: 0; }
.walk-together-faces .today-face-card { width: 72px; height: 72px; }
.walk-together-faces .today-face-name { font-size: var(--fs-xs); word-break: keep-all; line-height: 1.4; }
.walk-together-faces .wt-change { min-height: 44px; padding: 6px 14px; }
.walk-together-mentors { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid rgba(216,174,106,.30); }
.walk-together-mentors .wt-mentor-lead { margin: 0 0 2px; font-size: var(--fs-sm); color: var(--text-primary); }
.walk-together-mentors .wt-mentor { min-height: 44px; text-align: left; }
.walk-together-mentors .wt-mentor.is-on { border-color: var(--accent-gold); }
.walk-together-open { width: 100%; margin: 0 0 12px; min-height: 44px; }
#modal-walk-together .equipment-card { margin-top: 4px; }
.walk-together-faces .wt-change { margin-top: auto; }

/* 2026-10-07 단체 순례 준비 (group_plan.js) */
.group-plan-modal .modal-body { text-align: left; }
.gp-lead { margin: 0 0 12px; font-size: var(--fs-sm); line-height: 1.65; color: var(--text-secondary); word-break: keep-all; }
.gp-h { margin: 16px 0 8px; font-size: var(--fs-md); color: var(--accent-gold); }
.gp-h small { font-size: var(--fs-xs); color: var(--text-secondary); font-weight: 400; margin-left: 6px; }
.gp-sec { border-top: 1px solid rgba(216,174,106,.22); padding-top: 4px; margin-top: 8px; }
.gp-field { display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px; font-size: var(--fs-sm); color: var(--text-secondary); min-width: 0; }
.gp-field input, .gp-field select, .gp-field textarea { min-height: 44px; font-size: var(--fs-sm); padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid rgba(216,174,106,.35); background: var(--bg-card, transparent); color: var(--text-primary); width: 100%; box-sizing: border-box; }
.gp-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gp-check { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--fs-sm); color: var(--text-primary); }
.gp-check input { width: 20px; height: 20px; }
.gp-note { margin: 4px 0 8px; font-size: var(--fs-xs); line-height: 1.6; color: var(--text-secondary); word-break: keep-all; display: block; }
.gp-warn { margin: 6px 0; font-size: var(--fs-xs); line-height: 1.6; color: #b5542f; word-break: keep-all; }
.gp-timeline { list-style: none; margin: 0; padding: 0 0 0 10px; border-left: 2px solid rgba(216,174,106,.45); }
.gp-timeline li { margin: 0; padding: 4px 0 4px 10px; word-break: keep-all; }
.gp-t b { display: inline-block; min-width: 3.2em; color: var(--accent-gold); font-variant-numeric: tabular-nums; margin-right: 6px; }
.gp-leg { font-size: var(--fs-xs); color: var(--text-secondary); padding-left: 10px; }
.gp-stop { padding: 8px 0 10px 10px !important; }
.gp-stop-name { font-weight: 700; color: var(--text-primary); }
.gp-stop-ctl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; }
.gp-stop-ctl select { min-height: 44px; font-size: var(--fs-xs); padding: 6px 8px; border-radius: var(--r-sm); border: 1px solid rgba(216,174,106,.35); background: var(--bg-card, transparent); color: var(--text-primary); max-width: 100%; }
.gp-move { display: inline-flex; gap: 4px; }
.gp-mini { min-height: 44px; min-width: 44px; padding: 6px 10px; border-radius: var(--r-sm); border: 1px solid rgba(216,174,106,.40); background: transparent; color: var(--text-primary); font-size: var(--fs-xs); }
.gp-mini:disabled { opacity: .35; }
.gp-contacts { list-style: none; margin: 0; padding: 0; }
.gp-contact { padding: 8px 0 10px; border-bottom: 1px dashed rgba(216,174,106,.25); }
.gp-contact b { display: block; color: var(--text-primary); }
.gp-contact small { display: block; font-size: var(--fs-xs); color: var(--text-secondary); line-height: 1.5; }
.gp-checks { display: flex; flex-wrap: wrap; gap: 0 12px; }
.gp-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.gp-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.gp-del { opacity: .8; }
.gp-list { display: flex; flex-direction: column; gap: 6px; }
.gp-read .gp-stop { padding: 4px 0 4px 10px !important; }
.gp-devo-stop { margin: 14px 0; padding: 12px; border-radius: var(--r-sm); border: 1px solid rgba(216,174,106,.30); }
.gp-devo-stop h4 { margin: 0 0 6px; font-size: var(--fs-md); color: var(--text-primary); }
.gp-devo-stop h4 small { font-size: var(--fs-xs); color: var(--text-secondary); font-weight: 400; }
.gp-devo-hook { margin: 0 0 8px; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-secondary); word-break: keep-all; }
.gp-devo-leg { margin: 6px 0; padding: 8px 12px; border-left: 3px solid rgba(216,174,106,.45); font-size: var(--fs-sm); color: var(--text-secondary); }
.gp-devo-leg p { margin: 0 0 4px; word-break: keep-all; line-height: 1.6; }
/* 2026-10-08 앱 안 문서 창 (개인정보 처리방침·글꼴 라이선스) */
#modal-doc .doc-modal-card { display: flex; flex-direction: column; max-height: 92vh; height: 92vh; }
#modal-doc .doc-modal-body { flex: 1 1 auto; padding: 0; overflow: hidden; min-height: 0; }
#modal-doc #doc-frame { width: 100%; height: 100%; border: 0; display: block; background: transparent; }

/* 2026-10-08 여정 지도 — 울릉도·독도 삽도 */
.ink-inset-frame { fill: none; stroke: #5a4a36; stroke-width: .9; opacity: .6; }
.ink-isle { font: 600 9px "Sunrye Myeongjo", serif; fill: #3a2f22; paint-order: stroke; stroke: rgba(240,230,205,.9); stroke-width: 2.4px; }

/* 2026-10-08 글씨 5px 키움 — 큰 글씨에서 순례길 머리글이 옆으로 넘치지 않게 줄바꿈 */
.quest-gate-head { flex-wrap: wrap; row-gap: 2px; }
.quest-gate-summary { flex: 0 1 auto; }

/* 2026-10-08 francisco 「정리해줘 보기 어려워」 — 동반자 칸이 「함께 걷는 길」 창으로 옮겨 오면서
   위 #panel-my-companion 정리 규칙이 닿지 않아, 그림 · 좁은 글 기둥 · 단추가 다시 한 줄에 눌렸습니다. 창 안에도 같은 정리를 겁니다. */
#modal-walk-together .equipped-slot-row { display: grid; grid-template-columns: 74px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; align-items: start; text-align: left; }
#modal-walk-together .equipped-slot-info { display: contents; }
#modal-walk-together .equipped-slot-avatar { grid-column: 1; grid-row: 1 / span 3; align-self: center; }
#modal-walk-together .equipped-slot-info .equip-label { grid-column: 2; grid-row: 1; align-self: end; }
#modal-walk-together .equipped-slot-info h4 { grid-column: 2; grid-row: 2; margin: 0; }
#modal-walk-together #active-equipped-bonus { grid-column: 2; grid-row: 3; }
#modal-walk-together #active-companion-prayer-action { grid-column: 1 / -1; grid-row: 4; margin-top: 8px; }
#modal-walk-together #active-companion-prayer-action .companion-role-intro { margin: 0 0 6px; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-secondary); word-break: keep-all; }
#modal-walk-together #active-companion-prayer-action .equip-action-btn { display: block; width: 100%; min-height: 46px; white-space: normal; word-break: keep-all; }
#modal-walk-together #btn-unequip { grid-column: 1 / -1; grid-row: 5; justify-self: end; margin-top: 6px; width: auto; padding: 6px 14px; font-size: var(--fs-sm); }

/* 2026-10-08 기록 가지고 이사하기 (move_home.js) */
.move-card { margin: 0 0 14px; padding: 16px; border-radius: var(--r-md); border: 1.5px solid var(--accent-gold); background: rgba(216,174,106,.10); color: var(--text-primary); }
.move-card[hidden] { display: none !important; }
.move-card h3 { margin: 0 0 6px; font-family: var(--font-serif); font-size: var(--fs-lg); color: var(--text-primary); word-break: keep-all; }
.move-card p { margin: 0 0 8px; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-primary); word-break: keep-all; }
.move-card a.move-new-link { color: var(--accent-gold); font-weight: 700; word-break: break-all; }
.move-card .move-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; margin-top: 8px; padding: 8px 14px; border-radius: 999px; border: 0; background: var(--accent-gold); color: var(--bg-color); font-size: var(--fs-base); font-weight: 700; text-align: center; text-decoration: none; cursor: pointer; word-break: keep-all; }
.move-card .move-btn.move-sub { background: transparent; color: var(--text-primary); border: 1.5px solid var(--accent-gold); }
.move-card .move-btn.move-later { background: transparent; color: var(--text-secondary); min-height: 44px; font-weight: 600; }
.move-card .move-note { margin: 10px 0 0; font-size: var(--fs-xs); color: var(--text-secondary); }
.move-import-box { margin: 8px 0; }
.move-import-box[hidden] { display: none !important; }

/* ── 2026-10-08 화면 점검 (web-design-guidelines · emil-design-eng 의 생각만 빌림, francisco 「아이디어만 쓰자」) ──
   ① 손가락이 닿는 자리 44 이상  ② 고정 px 작은 글씨 없애기  ③ 누르는 순간 바로 반응  ④ 입력 칸 선택 표시 */
/* ① */
.card-arrow { width: 44px; height: 44px; }
/* 여정·지도 전환 칩은 지도 위 자리가 좁아 높이는 그대로(36), 눌리는 자리만 위아래로 넓힘 */
.map-overlay-chip .map-mode-btn { position: relative; }
.map-overlay-chip .map-mode-btn::after { content: ""; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
.pick-tab { min-height: 44px; }
.vp-stage { min-height: 48px; }
#focus-restore-btn { min-height: 44px; }
.focus-help { width: 36px; height: 36px; }
.focus-help::after { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.vp-more > summary { min-height: 44px; display: flex; align-items: center; gap: 6px; }
/* ② 등급 꼬리표 — 10px 고정이던 것을 글씨 크기 설정과 함께 커지게 */
/*    머리 띠는 한 줄에 다 담아야 해서, 옆 「N번째 길」과 같은 크기(약 14)에서 멈춥니다. */
.user-rank-tag { font-size: min(var(--fs-xxs), 14px); }
@media (max-width: 560px) { .user-rank-tag { font-size: min(var(--fs-xxs), 14px); } }
/* 2026-10-10 칭호·단계 꼬리표도 10~13px 고정이던 것을 같은 규칙으로 (14px 아래 글씨를 남기지 않습니다) */
.special-title-badge, .user-level-badge { font-size: min(var(--fs-xxs), 14px); }
/* ③ 누르는 순간 살짝 눌림(놓으면 곧바로 돌아옴). scale 낱 속성이라 원래 transform 과 겹치지 않습니다. */
:is(button, [role="button"], a.move-btn, a.today-missa-btn, a.today-link-btn, summary):not(:disabled):active { scale: .97; }
@media (prefers-reduced-motion: reduce) {
  :is(button, [role="button"], a.move-btn, a.today-missa-btn, a.today-link-btn, summary):not(:disabled):active { scale: none; filter: brightness(.92); }
}
/* ④ 키보드·화면 읽기로 쓰실 때 어느 칸이 골라졌는지 */
:is(input, textarea, select):focus-visible { outline: 2px solid var(--accent-gold) !important; outline-offset: 2px; }
#btn-unequip, .equip-option-item .equip-action-btn { min-height: 44px; }
.equip-change > summary { min-height: 44px; display: flex; align-items: center; justify-content: center; }
.mentor-shrine-tag { min-height: 44px; }
.today-me-focus .focus-help { position: relative; }

/* 2026-10-08 처음 1분 — 「지금 여기」 카드 · 쉬운 화면 권유 한 줄 */
.here-card { margin: 4px 0 var(--space-md); padding: 16px 16px 14px; border-radius: var(--r-lg); border: 1.5px solid var(--accent-gold); background: rgba(216,174,106,.10); color: var(--text-primary); }
.here-card[hidden] { display: none !important; }
.here-card .here-eyebrow { margin: 0; font-size: var(--fs-xs); font-weight: 700; color: var(--accent-gold); }
.here-card h3 { margin: 4px 0 2px; font-family: var(--font-serif); font-size: var(--fs-xl); line-height: 1.35; color: var(--text-primary); word-break: keep-all; }
.here-card .here-meta { margin: 0 0 8px; font-size: var(--fs-sm); color: var(--text-secondary); word-break: keep-all; }
.here-card .here-mass { margin: 0 0 12px; font-size: var(--fs-base); color: var(--text-primary); word-break: keep-all; }
.here-card .here-mass b { color: var(--accent-gold); }
.here-card .here-btns { display: flex; gap: 8px; }
.here-card .here-btns button { flex: 1 1 0; min-height: 52px; padding: 6px 10px; border-radius: 999px; font-size: var(--fs-base); font-weight: 700; cursor: pointer; word-break: keep-all; }
.here-card .here-go { background: var(--accent-gold); color: var(--bg-color); border: 0; }
.here-card .here-story { background: transparent; color: var(--text-primary); border: 1.5px solid var(--accent-gold); }
.here-card .here-note { margin: 10px 0 0; font-size: var(--fs-xs); color: var(--text-secondary); }
.here-card .here-note button { min-height: 44px; padding: 0 4px; background: none; border: 0; color: var(--accent-gold); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.easy-invite.easy-invite-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 12px; border-radius: var(--r-md); border: 1px dashed rgba(216,174,106,.45); background: transparent; }
.easy-invite.easy-invite-line[hidden] { display: none !important; }
.easy-invite.easy-invite-line p { flex: 1 1 100%; margin: 0; font-size: var(--fs-sm); color: var(--text-primary); }
.easy-invite.easy-invite-line button { display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 44px; margin: 0; padding: 0 14px; font-size: var(--fs-sm); }
.easy-invite.easy-invite-line .easy-invite-no { margin-top: 0; }

/* 2026-10-09 세 걸음 기도 · 고백할 때 기억할 네 가지 */
.three-step-prayer .tsp-step { margin: 10px 0; }
.three-step-prayer .tsp-step strong { color: var(--text-primary); }
.confession-four { margin: 12px 0; padding: 12px; border: 1px solid var(--border-color); border-radius: 12px; }
.confession-four ul { margin: 6px 0; padding-left: 0; list-style: none; }
.confession-four li { margin: 6px 0; line-height: 1.65; word-break: keep-all; }
.confession-four .confession-four-title { margin: 0 0 4px; }

/* 2026-10-09 「오늘」 정리 (francisco 「다른탭이 좋은거 같아 비슷한 것끼리 묶고 중요한건 오늘로」) */
/* 지금 여기 — 위치를 모르거나 성지가 멀 때는 한 줄 띠 */
.here-card.here-line-mode { padding: 0; border-width: 1px; background: transparent; }
.here-card .here-line { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px 14px; border: 0; background: transparent; color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; }
.here-card .here-line .here-eyebrow { flex: 0 0 auto; }
.here-card .here-line-text { flex: 1; min-width: 0; font-size: var(--fs-base); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.here-card .here-line-arrow { color: var(--accent-gold); font-size: var(--fs-lg); }
/* 계절 카드는 하루에 한 장 — 구유 > 묵주기도 성월 > 이달 카드 */
#crib-card:not([hidden]) ~ #rosary-month-card,
#crib-card:not([hidden]) ~ #month-card,
#rosary-month-card:not([hidden]) ~ #month-card { display: none !important; }
/* 오늘 만나는 분 — 이야기는 네 줄만, 「이어 읽기」로 펼침 */
.meet-card .meet-story:not(.open) { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.meet-card .meet-story-more { min-height: 44px; padding: 0 2px; border: 0; background: transparent; color: var(--accent-gold); font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.meet-card .meet-story[hidden] + .meet-story-more { display: none; }
/* 다른 탭으로 옮긴 카드 */
.subtab-panel > .today-card { margin: 0 0 var(--space-lg); }
.subtab-panel > .today-card:first-child { border-top: none; }
/* 2026-10-09 성경 읽고 돌아와 되살린 창은 튀지 않게 (openModalQuiet) */
.modal-overlay.no-anim, .modal-overlay.no-anim .modal-card, .modal-overlay.no-anim .modal-content { animation: none !important; }
/* 2026-10-09 받은 링크 붙여 넣기 */
.together-card .paste-link-btn { margin-top: 10px; min-height: 44px; }
/* 2026-10-09 기일 알림 · 짧은 연도/긴 연도 · 연도와 순교자 */
.departed-card .dp-tips { margin: 10px 0 0; padding-left: 18px; color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.65; word-break: keep-all; }
.departed-card .dp-yeon, .departed-section .dp-yeon { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.departed-card .dp-about { margin-top: 10px; }
.departed-card .dp-about > summary { min-height: 44px; line-height: 44px; color: var(--accent-gold); font-size: var(--fs-sm); cursor: pointer; }
.departed-card .dp-about p { margin: 6px 0; color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.7; word-break: keep-all; }
.departed-row .departed-actions button { min-height: 44px; }
/* 2026-10-09 돌아가신 분 관계 · 기억해 줄 이 없는 연옥 영혼들 · 11월 전대사 */
.departed-card .dp-names span small, .departed-row .departed-rel { color: var(--text-secondary); font-size: var(--fs-xs); font-family: inherit; }
.departed-card .dp-names .dp-forgotten { border-style: dashed; color: var(--text-secondary); }
.departed-card .dp-indul { margin: 10px 0 0; font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.65; word-break: keep-all; }
.departed-forgotten { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 4px; min-height: 44px; cursor: pointer; }
.departed-forgotten input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--accent-gold); flex: 0 0 auto; }
.departed-forgotten span { color: var(--text-primary); font-size: var(--fs-sm); line-height: 1.55; word-break: keep-all; }
.departed-forgotten small { display: block; color: var(--text-secondary); font-size: var(--fs-xs); }
.app-form-field[hidden] { display: none !important; }
/* 2026-10-09 francisco 「글 정렬 해줘」 — 『책 이름』·괄호가 줄 끝에서 갈라지지 않게 */
.nw { white-space: nowrap; }
.confession-history-note, .confession-sensitive-note, .old-book-desc { line-break: strict; text-wrap: pretty; }
/* 2026-10-09 francisco 「정리해줘 너무 공간이 엉망이야」 — 나의 앞선 순례자 카드(큰 글씨에서 이름·꼬리표·걸음이 좁게 눌림)
   이름은 한 줄을 다 쓰고 꼬리표(신앙의 첫걸음)는 이름 아래로, 「22번째 길 · 밤길손 … 걸음 10 / 31」은 한 줄, 막대는 그 아래 전체 너비로 */
.mentor-active-card .mentor-profile-header { align-items: flex-start; }
.mentor-active-card .active-details { min-width: 0; }
.mentor-active-card .active-details h3 { flex-wrap: wrap; row-gap: 6px; line-height: 1.3; word-break: keep-all; }
.mentor-active-card .active-details h3 #active-mentor-name { flex: 1 1 100%; }
.mentor-active-card .user-level-row { flex-wrap: wrap; row-gap: 6px; column-gap: 6px; }
.mentor-active-card .user-lv, .mentor-active-card .profile-rank-badge { white-space: nowrap; }
.mentor-active-card .user-exp-text { margin-left: auto; white-space: nowrap; }
.mentor-active-card .exp-bar-wrapper { flex: 1 1 100%; order: 9; min-width: 0; }
/* 2026-10-09 보내기 창 */
#modal-share.over-splash { position: fixed; z-index: 100003; }
.share-modal .share-preview { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--sunken, rgba(0,0,0,.15)); color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.6; white-space: pre-line; word-break: keep-all; }
.share-modal .share-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.share-modal .share-opt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 72px; padding: 8px; border-radius: var(--r-md); border: 1px solid var(--border-color); background: transparent; color: var(--text-primary); font: inherit; font-size: var(--fs-sm); font-weight: 700; text-decoration: none; cursor: pointer; }
.share-modal .share-kakao { background: #fee500; color: #191600; border-color: #fee500; }
.share-modal .share-ico { font-size: 1.4em; line-height: 1; }
.share-modal .share-qr { margin-top: 12px; text-align: center; }
.share-modal .share-qr svg { width: min(240px, 100%); height: auto; background: #fff; padding: 8px; border-radius: 12px; }
/* 2026-10-09 전대사 안내 */
.indul-modal .indul-lead { margin: 0 0 10px; color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.7; word-break: keep-all; }
.indul-modal h4 { margin: 14px 0 6px; color: var(--accent-gold); font-size: var(--fs-md); }
.indul-modal ul { margin: 4px 0 8px; padding-left: 18px; }
.indul-modal li, .indul-modal p { font-size: var(--fs-sm); line-height: 1.65; word-break: keep-all; }
.indul-modal .indul-place { margin: 8px 0; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 12px; }
.indul-modal .indul-place.focus { border-color: var(--accent-gold); }
.indul-modal .indul-name { margin: 0; font-weight: 700; color: var(--text-primary); font-family: var(--font-serif); }
.indul-modal .indul-why, .indul-modal .indul-note { margin: 2px 0; color: var(--text-secondary); font-size: var(--fs-xs); }
.indul-modal .indul-src { font-size: var(--fs-xs); }
.indul-box { margin: 0 0 14px; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid rgba(216,174,106,.35); text-align: left; }
.indul-box .indul-mini { margin: 0 0 6px; font-size: var(--fs-sm); line-height: 1.6; word-break: keep-all; }
.departed-section .dp-yeon { margin-bottom: 12px; }
/* 2026-10-09 francisco 「위아래 공간이 너무 없어」 — 붙어 있던 덩어리 사이 띄우기 */
.prayer-board-section + .prayer-board-section { margin-top: 32px; }
.martyr-card + .martyr-card { margin-top: 16px; }
.verification-center ~ .pil-now-card { margin-top: 16px; }
.today-secondary-btn.wide + .charity-more { margin-top: 12px; }
.vp-shrine + .vp-more { margin-top: 12px; }
/* 2026-10-09 함께 걷는 길 · 앞선 순례자 바꾸기 — 이름만이 아니라 그림 · 소개 · 덕까지 */
.walk-together-mentors .wt-mentor { display: flex; gap: 12px; align-items: flex-start; width: 100%; min-height: 44px; margin-top: 10px; padding: 12px; text-align: left; border: 1px solid var(--card-border); border-radius: var(--r-md); background: var(--card-bg); color: var(--text-primary); font: inherit; cursor: pointer; }
.walk-together-mentors .wt-mentor.is-on { border: 1.5px solid var(--accent-gold); background: rgba(216,174,106,.12); }
.walk-together-mentors .wt-mentor-img { flex: 0 0 64px; width: 64px; height: 64px; border-radius: var(--r-sm); object-fit: cover; object-position: top; }
.walk-together-mentors .wt-mentor-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.walk-together-mentors .wt-mentor-name { font-size: var(--fs-base); font-weight: 700; line-height: 1.35; word-break: keep-all; }
.walk-together-mentors .wt-mentor-now { align-self: flex-start; padding: 1px 8px; border-radius: 999px; background: var(--accent-gold); color: var(--on-gold); font-size: var(--fs-xs); font-weight: 700; }
.walk-together-mentors .wt-mentor-desc { font-size: var(--fs-sm); line-height: 1.55; color: var(--text-secondary); word-break: keep-all; }
.walk-together-mentors .wt-mentor-virtue { font-size: var(--fs-xs); color: var(--accent-gold); font-weight: 700; }
/* 2026-10-10 기도 부탁 칸 — 받은 부탁 / 내가 부탁한 기도 */
.pr-req-card .pr-req-sub { margin: 14px 0 6px; font-size: var(--fs-sm); font-weight: 700; color: var(--accent-gold); }
.pr-req-card .pr-sent-row { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; cursor: default; }
.pr-req-card .pr-sent-close { align-self: flex-end; min-height: 44px; font-size: var(--fs-xs); }
#modal-pray-req.over-splash { position: fixed; z-index: 100001; }
/* 2026-10-10 먼저 떠난 분들 — 이름 펼치기·접기 */
.departed-fold { border: 1px solid var(--card-border); border-radius: var(--r-md); background: var(--card-bg); margin-bottom: 12px; }
.departed-fold > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-height: 48px; padding: 12px 72px 12px 14px; position: relative; cursor: pointer; list-style: none; font-weight: 700; color: var(--text-primary); }
.departed-fold > summary::-webkit-details-marker { display: none; }
.departed-fold > summary::after { content: '펼치기'; position: absolute; right: 14px; top: 14px; width: auto; height: auto; margin: 0; border: 0; transform: none; background: none; white-space: nowrap; font-size: var(--fs-xs); font-weight: 700; color: var(--accent-gold); }
.departed-fold[open] > summary::after { content: '접기'; transform: none; }
.departed-fold-names { font-size: var(--fs-sm); font-weight: 400; color: var(--text-secondary); word-break: keep-all; }
.departed-fold[open] .departed-fold-names { display: none; }
.departed-fold > .departed-row { margin: 0 14px; }
.departed-fold > .departed-row:last-child { margin-bottom: 8px; }

/* ── 첫 화면 — 먹이 스며 그려짐 (2026-10-10, splash_ink.js) ──────────────
   처음 여는 분(html.ink-splash)만. 빈 한지(splash_paper.webp = 아이폰 실행 그림과 같은 종이)에서 시작합니다.
   ⚠️ splash_ink.js 가 안 읽히면 inkFallback 이 3.5초 뒤 그림·제목을 그대로 보여 줍니다. 지우지 마십시오. */
html.ink-splash #splash-stage-intro { background: #f4eee2 url("splash_paper.webp") center / cover no-repeat; }
html.ink-splash #splash-stage-intro .splash-bg-img,
html.ink-splash #splash-stage-intro .splash-title-block,
html.ink-splash #splash-stage-intro .splash-tap-to-begin { animation: inkFallback .6s ease 3.5s both; }
@keyframes inkFallback { from { opacity: 0; } to { opacity: 1; } }
html.ink-splash #splash-stage-intro.ink-on .splash-bg-img { animation: none; opacity: 0; }
html.ink-splash #splash-stage-intro.ink-on.ink-done .splash-bg-img { opacity: 1; }
html.ink-splash #splash-stage-intro .splash-ink-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
html.ink-splash #splash-stage-intro.ink-on .splash-title-block { animation: none; opacity: 1; }
html.ink-splash #splash-stage-intro.ink-on .splash-title-main {
  -webkit-mask-image: linear-gradient(90deg, #000 44%, transparent 56%); mask-image: linear-gradient(90deg, #000 44%, transparent 56%);
  -webkit-mask-size: 250% 100%; mask-size: 250% 100%; -webkit-mask-position: 100% 0; mask-position: 100% 0; }
html.ink-splash #splash-stage-intro.ink-on .splash-title-sub { opacity: 0; }
html.ink-splash #splash-stage-intro.ink-title .splash-title-main { animation: inkTitleBrush 1.6s cubic-bezier(.35,.1,.3,1) forwards; }
html.ink-splash #splash-stage-intro.ink-title .splash-title-sub { animation: inkTitleSub 1.4s ease-out 1.3s forwards; }
html.ink-splash #splash-stage-intro.ink-skip .splash-title-main { animation: none; -webkit-mask-position: 0 0; mask-position: 0 0; }
html.ink-splash #splash-stage-intro.ink-skip .splash-title-sub { animation: none; opacity: 1; }
@keyframes inkTitleBrush { to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes inkTitleSub { to { opacity: 1; } }
html.ink-splash #splash-stage-intro.ink-on .splash-tap-to-begin { animation: none; opacity: 0; transition: opacity .8s ease; }
html.ink-splash #splash-stage-intro.ink-on.ink-ready .splash-tap-to-begin { opacity: 1; }

/* ── 작은 움직임 셋 (2026-10-10, ui_motion.js) ─────────────────────────── */
/* ⑦ 단추 먹 번짐 — 단추 위에 잠깐 뜨는 덮개(단추 모양은 건드리지 않음) */
.ui-ink-host { position: fixed; overflow: hidden; pointer-events: none; z-index: 100005; }
.ui-ink { position: absolute; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%) scale(0); animation: uiInkSpread .7s cubic-bezier(.2,.7,.3,1) forwards; }
.ui-ink.k2 { animation-duration: .85s; }
@keyframes uiInkSpread { 0% { transform: translate(-50%,-50%) scale(.1); opacity: .9; } 60% { opacity: .55; } 100% { transform: translate(-50%,-50%) scale(1); opacity: 0; } }
.ui-ink-drop { position: absolute; width: 4px; height: 4px; border-radius: 50%; pointer-events: none; animation: uiInkDrop .6s ease-out forwards; }
@keyframes uiInkDrop { 0% { opacity: .8; transform: translate(-50%,-50%); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))); } }
/* ⑤ 아래 탭 — 금빛 한 방울이 번지며 그림이 떠오름 */
.nav-tab-ico { position: relative; }
.nav-tab-ico .nav-bloom { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 46% 52%, rgba(240,206,120,.75) 0, rgba(214,168,72,.55) 24%, rgba(196,148,56,.24) 46%, rgba(196,148,56,0) 64%), radial-gradient(circle at 64% 38%, rgba(226,184,90,.45) 0, rgba(226,184,90,0) 30%), radial-gradient(circle at 34% 66%, rgba(210,164,70,.4) 0, rgba(210,164,70,0) 28%); filter: blur(.6px); }
.nav-tab-ico.ink-draw .nav-bloom { animation: navInkBloom 1.05s cubic-bezier(.2,.65,.3,1) forwards; }
@keyframes navInkBloom { 0% { opacity: 0; transform: scale(.08); } 12% { opacity: 1; transform: scale(.25); } 55% { opacity: .75; transform: scale(1); } 100% { opacity: 0; transform: scale(1.25); } }
.nav-tab-ico.ink-draw img, .nav-tab-ico.ink-draw .ui-icon { -webkit-mask-image: radial-gradient(circle closest-side, #000 55%, transparent 100%); mask-image: radial-gradient(circle closest-side, #000 55%, transparent 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; animation: navInkReveal 1s cubic-bezier(.25,.6,.3,1) .12s both; }
@keyframes navInkReveal { 0% { -webkit-mask-size: 0% 0%; mask-size: 0% 0%; filter: sepia(1) saturate(2.4) hue-rotate(-8deg) brightness(1.15) blur(1.5px); } 45% { filter: sepia(.8) saturate(1.8) brightness(1.08) blur(.5px); } 100% { -webkit-mask-size: 260% 260%; mask-size: 260% 260%; filter: none; } }
.nav-tab-ico .nav-sp { position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: rgba(214,168,72,.85); box-shadow: 0 0 3px rgba(240,206,120,.8); opacity: 0; pointer-events: none; }
.nav-tab-ico.ink-draw .nav-sp { animation: navSp .7s ease-out .05s forwards; }
@keyframes navSp { 0% { opacity: .8; transform: translate(-50%,-50%); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))); } }
/* ① 지도 — 인증한 성지에 붉은 낙관이 「꾹」 */
.custom-shrine-marker.just-visited .shrine-marker-avatar { animation: mkColor 1.3s ease .3s both; }
@keyframes mkColor { from { filter: sepia(.35) saturate(.7) brightness(.95) grayscale(.35); } to { filter: none; } }
.custom-shrine-marker.just-visited .visited-check-badge { animation: mkSeal .55s cubic-bezier(.3,1.4,.5,1) .15s both; }
@keyframes mkSeal { 0% { opacity: 0; transform: translateY(-14px) scale(1.9) rotate(-14deg); } 55% { opacity: 1; transform: scale(.9) rotate(-5deg); } 75% { transform: scale(1.06) rotate(-6deg); } 100% { opacity: 1; transform: scale(1) rotate(-6deg); } }
.custom-shrine-marker.just-visited .shrine-marker-label { animation: mkLabel .6s ease .45s both; }
@keyframes mkLabel { from { border-color: #8b7355; } to { border-color: #b8321e; } }
.custom-shrine-marker.just-visited::after { content: ''; position: absolute; left: 40px; top: 38px; width: 54px; height: 54px; border-radius: 50%; pointer-events: none; transform: translate(-50%,-50%) scale(.2); opacity: 0;
  background: radial-gradient(circle, rgba(184,50,30,0) 35%, rgba(184,50,30,.38) 48%, rgba(184,50,30,0) 62%); animation: mkBleed .9s ease-out .32s forwards; }
@keyframes mkBleed { 0% { opacity: .9; transform: translate(-50%,-50%) scale(.2); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .ui-ink-host { display: none; } .nav-tab-ico.ink-draw *, .custom-shrine-marker.just-visited, .custom-shrine-marker.just-visited * { animation: none !important; } }