@charset "UTF-8"; /* ============================================================ JCC.TV 모바일 스타일 (2026-08-07) PC 사이트의 색을 그대로 쓴다: 남색 #07335f / 빨강 #d8001f / 금색 #f0cf82 ⚠ 글자 크기는 전부 rem 으로 쓴다. rem 은 의 글씨 크기를 기준으로 하는 단위라, 하나만 바꾸면 화면 전체 글씨가 같이 커진다. 어르신용 "글씨 크게" 버튼이 이 원리로 동작한다. -> px 로 직접 쓰지 말 것. 쓰면 그 글자만 안 커진다. 기준값 : 보통 16px / 크게 18.5px / 아주 크게 21px ============================================================ */ :root{ --navy:#07335f; --navy-d:#012040; --red:#d8001f; --red-d:#9c0014; --gold:#f0cf82; --line:#e5e9f0; --tx:#151d29; /* 본문 - 어르신을 위해 더 진하게 */ --tx2:#5a6675; /* 보조 글자 - 대비를 높였다 */ --bg:#f4f6fa; --blk:#141b24; /* 라인 강조용 먹색. 순수 검정보다 부드럽다 */ --tab-h:60px; } *{box-sizing:border-box} html{font-size:16px} /* ← 이 값을 JS가 바꾼다 */ body{margin:0;padding:0} body{ background:var(--bg); color:var(--tx); font:1rem/1.6 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic", "맑은 고딕",system-ui,sans-serif; -webkit-text-size-adjust:100%; padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom)); } a{color:inherit;text-decoration:none} img{max-width:100%;height:auto;display:block} /* ---------- 상단 바 ---------- */ .mhd{ position:sticky;top:0;z-index:30; display:flex;align-items:center;justify-content:space-between; min-height:52px;padding:0 14px; background:linear-gradient(135deg,var(--navy) 0%,var(--navy-d) 100%); box-shadow:0 2px 10px rgba(0,32,64,.22); } .mhd-logo{ display:flex;align-items:center;gap:8px;min-height:44px;padding-right:8px; color:#fff;font-size:1.15rem;font-weight:800;letter-spacing:.5px; } /* 로고 엠블럼. 글씨를 키워도 같이 커지지 않게 px 로 고정한다 (같이 커지면 헤더가 부풀고 오른쪽 버튼이 밀린다). */ .mhd-logo img{width:30px;height:30px;flex:0 0 auto;display:block} .mhd-r{display:flex;align-items:center;gap:6px;margin-right:-6px} .mhd-s{display:flex;align-items:center;justify-content:center;width:44px;height:44px} .mhd-s svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round} /* 상단 헌금 버튼 - 어느 화면에서든 바로 갈 수 있게. 금색이라 눈에 띈다. */ .mhd-give{ display:inline-flex;align-items:center;gap:5px; min-height:44px;padding:0 13px;border-radius:22px; background:linear-gradient(135deg,var(--gold),#dcae52); color:#3a2600;font-size:.85rem;font-weight:800;letter-spacing:-.3px; white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.22); } .mhd-give svg{ width:17px;height:17px;flex:0 0 auto;fill:none;stroke:currentColor; stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round; } /* ---------- 글씨 크기 조절 (어르신용) ---------- */ .fsbar{ display:flex;align-items:center;gap:7px; padding:8px 12px;background:#fff;border-bottom:1px solid var(--line); overflow-x:auto;-webkit-overflow-scrolling:touch; } .fsbar::-webkit-scrollbar{display:none} /* ⚠ 이 줄만은 px 로 고정한다(rem 이 아니다). 같이 커지면 '아주 크게' 로 놓았을 때 버튼이 화면 밖으로 밀려나 되돌릴 방법이 없어진다. 크기 조절 버튼은 언제나 같은 자리에 보여야 한다. */ .fsbar > span{ flex:0 0 auto;font-size:13px;font-weight:700;color:var(--tx2); display:flex;align-items:center;gap:5px; } .fsbar > span svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round} .fsbar button{ flex:0 0 auto;min-height:44px;padding:0 14px; border:1.5px solid var(--line);border-radius:22px;background:#fff; color:var(--tx2);font-family:inherit;font-weight:700;cursor:pointer; white-space:nowrap;line-height:1; } /* A- / A+ : 두 개가 같은 크기여야 짝으로 보인다 */ .fsbar .fs-mi,.fsbar .fs-pl{ width:52px;padding:0;font-size:17px;color:var(--navy);border-color:#c6d2e2; display:flex;align-items:center;justify-content:center; } .fsbar .fs-pl{font-size:19px} /* ⚠ 끝에 닿으면 흐리게. 눌러도 안 변하는 이유가 보여야 한다. */ .fsbar button:disabled{opacity:.32;cursor:default} /* 지금 크기 - 이름과 숫자를 같이 보여 준다 */ .fsbar .fs-now{ flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center; min-width:74px;line-height:1.15; } .fsbar .fs-now b{font-size:14px;font-weight:800;color:var(--navy)} .fsbar .fs-now i{font-style:normal;font-size:10.5px;color:var(--tx2);margin-top:2px} .fsbar .fs-rs{font-size:12.5px;padding:0 12px} .mwrap{padding:12px 12px 20px;max-width:640px;margin:0 auto} /* ---------- 제목 ---------- */ .mh{display:flex;align-items:center;justify-content:space-between;margin:18px 2px 9px} .mh:first-child{margin-top:4px} .mh h2{ margin:0;font-size:1.06rem;font-weight:800;letter-spacing:-.3px; padding-left:10px;border-left:4px solid var(--red);line-height:1.25; } .mh a{ display:inline-flex;align-items:center;min-height:44px; padding:0 4px;margin:-14px -4px; font-size:.85rem;color:var(--tx2); } .mh a::after{content:" ›"} /* ---------- 카드 ---------- */ .card{ background:#fff;border-radius:12px;overflow:hidden; box-shadow:0 1px 3px rgba(16,38,72,.10),0 6px 18px rgba(16,38,72,.06); margin-bottom:10px; } .card-b{padding:13px 15px} .card-t{display:block;font-size:.98rem;font-weight:800;line-height:1.45} .card-x{margin:6px 0 0;font-size:.84rem;color:var(--tx2);line-height:1.6} /* 신문 꼭지 이름표 (커버스토리 / Text 주일설교 / 붕우칼럼) */ .pp-tag{ display:inline-block;margin:0 0 5px;padding:3px 9px;border-radius:11px; background:#eef2f8;color:var(--navy); font-size:.74rem;font-weight:800;letter-spacing:-.2px; } /* 가로형 목록 항목 (썸네일 + 글) */ .it{display:flex;gap:12px;align-items:flex-start;padding:12px 13px;min-height:44px} .it + .it{border-top:1px solid var(--line)} .it-th{ flex:0 0 112px;width:112px;aspect-ratio:16/9;border-radius:8px;overflow:hidden; background:#dde3ec;position:relative; } .it-th img{width:100%;height:100%;object-fit:cover} .it-th.sq{aspect-ratio:1/1;flex-basis:76px;width:76px} /* 사진이 없는 글에 넣는 칸. 비워 두면 줄이 들쭉날쭉해 보인다. */ .it-th.ph{display:flex;align-items:center;justify-content:center;background:#e8eef6} .it-th.ph svg{ width:30px;height:30px;fill:none;stroke:#8ba3c2; stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; } .it-tx{flex:1;min-width:0} .it-tx b{display:block;font-size:.95rem;font-weight:700;line-height:1.45;letter-spacing:-.3px} .it-tx p{margin:4px 0 0;font-size:.83rem;color:var(--tx2);line-height:1.5} .it-meta{margin-top:6px;font-size:.8rem;color:var(--tx2);display:flex;gap:8px;flex-wrap:wrap} .it-meta span{display:inline-flex;align-items:center} .it-meta span + span::before{content:"·";margin-right:8px;color:#b8c2ce} /* 재생 표시 */ .play::after{ content:"";position:absolute;left:50%;top:50%;width:32px;height:32px; transform:translate(-50%,-50%);border-radius:50%; background:rgba(0,0,0,.58) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l9 5-9 5z' fill='white'/%3E%3C/svg%3E") center/17px no-repeat; } /* ---------- 라이브 배너 ---------- */ .live{ display:block;border-radius:12px;overflow:hidden;margin-bottom:12px; background:linear-gradient(135deg,var(--red) 0%,var(--red-d) 100%); color:#fff;padding:15px 16px;box-shadow:0 4px 16px rgba(216,0,31,.28); } .live b{display:block;font-size:1.06rem;font-weight:800} .live small{display:block;margin-top:4px;font-size:.84rem;opacity:.95} .live-dot{ display:inline-block;width:9px;height:9px;border-radius:50%;background:#fff; margin-right:7px;vertical-align:1px;animation:blink 1.2s infinite; } @keyframes blink{50%{opacity:.3}} /* ---------- 배너 슬라이드 ---------- */ .ban{ display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory; margin:0 -12px 14px;padding:0 12px 2px;-webkit-overflow-scrolling:touch; } .ban::-webkit-scrollbar{display:none} .ban a{flex:0 0 86%;scroll-snap-align:center;border-radius:12px;overflow:hidden; box-shadow:0 2px 10px rgba(16,38,72,.14)} .ban img{width:100%;aspect-ratio:12/5;object-fit:cover} /* ---------- 집회 알림 띠 ---------- 배너 바로 아래, 스크롤하지 않아도 보이는 자리. ⚠ 날짜가 지나면 PHP(m_event())가 아예 안 그린다. CSS 로 숨기는 것이 아니다. */ .evt{ display:flex;align-items:center;gap:12px;min-height:76px; padding:13px 14px;margin:0 0 16px;border-radius:14px; background:linear-gradient(100deg,#0d3560,#06203c); border-left:5px solid var(--gold); box-shadow:0 3px 14px rgba(11,45,82,.28);color:#fff; } .evt-ic{flex:0 0 auto;width:44px;height:44px;border-radius:12px; background:rgba(240,207,130,.18);display:flex;align-items:center;justify-content:center} .evt-ic svg{width:24px;height:24px;fill:none;stroke:var(--gold);stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round} .evt-tx{flex:1 1 auto;min-width:0} .evt-tx b{display:block;font-size:1.02rem;font-weight:800;letter-spacing:-.4px; line-height:1.32;word-break:keep-all} /* keep-all : 한국어를 낱말 가운데서 안 끊는다 */ .evt-tx span{display:block;font-size:.86rem;color:#a9c6e6;margin-top:3px;word-break:keep-all} .evt-d{flex:0 0 auto;padding:6px 11px;border-radius:99px;background:var(--red); font-size:.85rem;font-weight:800;white-space:nowrap} .evt-d.today{background:var(--gold);color:#3a2600} /* ---------- 탭(분류) ---------- */ .tabs{ display:flex;gap:7px;overflow-x:auto;margin:0 -12px 12px;padding:0 12px 2px; -webkit-overflow-scrolling:touch; } .tabs::-webkit-scrollbar{display:none} .tabs a{ flex:0 0 auto;padding:8px 15px;min-height:42px;display:flex;align-items:center; border-radius:21px;background:#fff;border:1px solid var(--line); font-size:.87rem;font-weight:600;color:var(--tx2);white-space:nowrap; } .tabs a.on{ background:linear-gradient(135deg,var(--navy),var(--navy-d)); border-color:transparent;color:#fff; } /* ---------- 사진 격자 ---------- */ .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px} .grid a{aspect-ratio:1/1;border-radius:8px;overflow:hidden;background:#dde3ec} .grid img{width:100%;height:100%;object-fit:cover} .grid.two{grid-template-columns:repeat(2,1fr);gap:8px} .grid.two a{aspect-ratio:4/3} /* ---------- 기사 본문 ---------- */ .art{padding:17px 16px} .art h1{margin:0 0 7px;font-size:1.25rem;font-weight:800;line-height:1.4;letter-spacing:-.4px} .art .art-m{font-size:.83rem;color:var(--tx2);margin-bottom:14px} .art-body{font-size:1.05rem;line-height:1.85;word-break:break-word} .art-body img{margin:14px auto;border-radius:8px} .art-body table{max-width:100%} /* ---------- 신문 기사 구성 ---------- DB 에 글쓴이·코너 칸이 없어 본문 안의 로 구분한다(m_article). 화면에서는 코너 / 소제목 / 글쓴이 / 본문이 한눈에 갈라져 보여야 한다. */ .art-corner{ display:inline-block;margin:22px 0 10px;padding:5px 12px; background:linear-gradient(135deg,var(--red),var(--red-d));color:#fff; border-radius:16px;font-size:.8rem;font-weight:800;letter-spacing:-.2px; } .art-corner:first-child{margin-top:0} .art-sub{ margin:22px 0 10px;padding-left:11px; border-left:4px solid var(--navy); font-size:1.1rem;font-weight:800;line-height:1.45;letter-spacing:-.4px;color:var(--tx); } .art-corner + .art-sub{margin-top:0} .art-by{ margin:14px 0 20px;padding:8px 13px; background:#f2f5fa;border-radius:9px; font-size:.87rem;font-weight:700;color:var(--navy);text-align:right; } .art-by::before{content:"글 ";font-weight:400;color:var(--tx2)} .art-q{ margin:16px 0;padding:12px 15px; background:#f7f9fc;border-left:4px solid var(--gold);border-radius:0 9px 9px 0; font-size:.97rem;line-height:1.75;color:#2c3a4d;font-style:normal; } .art-body p{margin:0 0 14px} /* ---------- 지교회 ---------- */ .regi{ display:flex;align-items:center;justify-content:space-between; padding:14px 15px;min-height:52px;font-size:1rem; } .regi b{font-weight:800} .regi span{ font-size:.82rem;font-weight:700;color:var(--tx2); display:inline-flex;align-items:center;gap:6px; } .regi span::after{content:"▾";font-size:.9rem} .regi.on{background:var(--navy);color:#fff} .regi.on span{color:var(--gold)} .regi.on span::after{content:"▴"} .brc{padding:12px 15px;border-top:1px solid var(--line)} .brc-n{font-size:.97rem;font-weight:800;margin-bottom:3px} .brc-a{font-size:.86rem;color:var(--tx2);line-height:1.5} .brc-b{display:flex;gap:8px;margin-top:9px} .brc-b a{ flex:1;display:flex;align-items:center;justify-content:center;min-height:44px; border-radius:9px;border:1px solid var(--line);background:#fff; font-size:.87rem;font-weight:700;color:var(--navy); } /* ---------- 기도원 사진 ---------- 큰 사진 한 장(두 칸 차지) + 작은 사진 네 장. ⚠ 원본이 300~400px 짜리 옛 GIF 라 이보다 크게 그리면 흐려진다. 칸 수를 늘리거나 폭을 키우지 말 것. */ .gph{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px} .gph > div{ border-radius:10px;overflow:hidden;background:#dde3ec;aspect-ratio:4/3; } .gph > div.wide{grid-column:1 / -1;aspect-ratio:16/9} .gph img{width:100%;height:100%;object-fit:cover;display:block} /* ---------- 영상 ---------- */ .vwrap{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden} .vwrap iframe,.vwrap video{position:absolute;inset:0;width:100%;height:100%;border:0} .vnote{display:flex;align-items:center;justify-content:center;height:100%; color:#c9d4e2;font-size:.9rem;text-align:center;padding:20px;line-height:1.7} /* ---------- 큰 버튼 (어르신용) ---------- */ .bigbtn{ display:flex;align-items:center;justify-content:center;gap:8px; min-height:54px;padding:0 20px;border-radius:12px; font-size:1rem;font-weight:800;letter-spacing:-.3px; } .bigbtn svg{width:21px;height:21px;flex:0 0 auto;fill:none;stroke:currentColor; stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .bigbtn.navy{background:var(--navy);color:#fff} .bigbtn.red{background:linear-gradient(135deg,var(--red),var(--red-d));color:#fff} .bigbtn.line{background:#fff;color:var(--navy);border:2px solid var(--navy)} .btnrow{display:flex;flex-direction:column;gap:9px;margin-top:12px} /* ---------- 페이지 머리 사진 ---------- 글자만 있으면 허전하다는 지적을 받아 각 페이지 위에 사진을 얹는다. 사진 위에 글자가 올라가므로 아래쪽을 어둡게 덮어 글자가 묻히지 않게 한다. */ .pghd{ position:relative;margin:-12px -12px 14px;height:150px;overflow:hidden; background:var(--navy); } .pghd img{width:100%;height:100%;object-fit:cover;display:block} .pghd::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(3,26,50,.10) 0%,rgba(3,26,50,.30) 45%,rgba(3,26,50,.86) 100%); } .pghd-tx{ position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 15px 13px;color:#fff; } .pghd-tx h1{margin:0;font-size:1.32rem;font-weight:800;letter-spacing:-.5px; text-shadow:0 2px 8px rgba(0,0,0,.5)} .pghd-tx p{margin:4px 0 0;font-size:.86rem;color:#dbe7f5; text-shadow:0 1px 6px rgba(0,0,0,.5)} @media (min-width:560px){ .pghd{height:190px} } /* ============================================================ 빨강 · 검정 라인 강조 (2026-08-10) 교회 색인 빨강(--red)과 짙은 먹색을 '선'으로만 쓴다. ⚠ 면(배경)으로 넓게 칠하지 말 것. 화면이 무거워지고 어르신 화면에서 글자가 묻힌다. 선으로만 쓰기 때문에 살짝 얹힌다. 세 군데에 같은 무늬(빨강 26% + 먹 74%)를 쓴다. 1) 머리글 아래 - 모든 화면에 나오므로 사이트 전체를 묶어 준다 2) 페이지 머리 사진 아래 3) 구역 제목 아래 - 짧은 표시만 ============================================================ */ .mhd::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:3; background:linear-gradient(90deg,var(--red) 0 26%,var(--blk) 26% 100%); } /* ⚠ .pghd 는 ::after 를 이미 어두운 덧막으로 쓰고 있다. 그래서 여기서는 ::before 를 쓴다(덧막 위, 글자 아래). */ .pghd::before{ content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:3; background:linear-gradient(90deg,var(--red) 0 26%,var(--blk) 26% 100%); } /* 구역 제목 아래 - 아주 옅은 선 위에 짧은 빨강·먹 표시 */ .mh{position:relative;padding-bottom:9px} .mh::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:1px; background:linear-gradient(90deg, var(--red) 0 18px, var(--blk) 18px 34px, var(--line) 34px 100%); } /* 카드 안에 넣는 작은 사진 */ .inimg{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;margin:0 0 12px} /* ---------- 월 넘기기 (일정) ---------- */ .mnav{ display:flex;align-items:center;gap:8px;margin-bottom:10px; } .mnav a,.mnav span.cur{ display:flex;align-items:center;justify-content:center;min-height:46px; border-radius:10px;background:#fff;border:1px solid var(--line); font-size:.92rem;font-weight:700;color:var(--navy); } .mnav a{flex:0 0 auto;padding:0 15px} .mnav span.cur{flex:1;background:var(--navy);color:#fff;border-color:transparent} /* ---------- 이번 주 예배 안내 (홈 맨 위) ---------- */ /* ⚠ 아래 .thisweek / .tw-* 는 2026-08-20 이후 쓰는 곳이 없습니다(죽은 규칙). 되돌릴 때를 위해 지우지 않고 남겨 둡니다. 새 규칙은 위의 .tw2-* 입니다. */ .thisweek{ background:linear-gradient(135deg,#07335f 0%,#012040 100%); color:#fff;border-radius:12px;padding:14px 16px 15px;margin-bottom:12px; box-shadow:0 4px 16px rgba(0,32,64,.28); } .thisweek-h{ display:flex;align-items:center;gap:7px; font-size:.82rem;font-weight:700;color:var(--gold);margin-bottom:9px; } .thisweek-h svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round} .tw-row{display:flex;align-items:baseline;gap:10px;padding:6px 0} .tw-row + .tw-row{border-top:1px solid rgba(255,255,255,.14)} .tw-d{flex:0 0 auto;font-size:.85rem;font-weight:800;color:#c3d8f2;min-width:4.4em} .tw-b{flex:1;min-width:0} .tw-b b{display:block;font-size:1rem;font-weight:800;line-height:1.4} .tw-b span{display:block;font-size:.82rem;color:#a8c8ee;margin-top:2px} /* 예배 장소 - 서울·인천을 오가므로 가장 중요한 정보다. 크고 밝게. */ .tw-place{ display:inline-flex !important;align-items:center;gap:5px;margin-top:5px !important; font-size:.95rem !important;font-weight:800;color:var(--gold) !important; } .tw-place::before{ content:"";width:15px;height:15px;flex:0 0 auto; background:no-repeat center/15px url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0cf82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.3 7-11a7 7 0 10-14 0c0 4.7 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); } .tw-none{color:#8fa9c8 !important;font-size:.84rem !important;margin-top:4px !important} /* 그 주에 예배가 없는 경우 - 헷갈리지 않게 흐리게 + 취소선 */ .tw-off{color:#93aac4 !important;text-decoration:line-through;text-decoration-thickness:1.5px} .tw-more{ display:flex;align-items:center;justify-content:center;min-height:44px; margin:9px -4px -6px;border-top:1px solid rgba(255,255,255,.16); color:var(--gold);font-size:.86rem;font-weight:700; } /* ---------- 이번 주 예배 / 다가오는 행사 (2026-08-20) ---------- ⚠ 전에는 남색 카드였는데 바로 위 집회 띠(.evt)도 남색이라 두 칸이 한 덩어리로 보였다. 밝은 카드로 바꿔 구분한다. ⚠ 예배 하나를 한 줄에 담는다(전에는 두 줄). 344px -> 236px. ⚠ 장소가 이 칸의 핵심이다(서울·인천을 오간다). 오른쪽 끝에 크게 두고 빨간 핀을 단다. 글씨를 키우면 접히도록 flex-wrap 을 켜 두었다. */ .tw2{padding:2px 0} .tw2-row{display:flex;align-items:center;flex-wrap:wrap;gap:9px; padding:11px 14px;min-height:44px} .tw2-row + .tw2-row{border-top:1px solid var(--line)} .tw2-d{flex:0 0 auto;font-size:.86rem;font-weight:800;color:var(--tx2);white-space:nowrap} .tw2-d i{font-style:normal;font-weight:700;color:#94a0b0;margin-left:2px} .tw2-n{flex:0 0 auto;font-size:.98rem;font-weight:800;color:var(--tx);word-break:keep-all} .tw2-p{flex:1 1 auto;min-width:0;display:inline-flex;align-items:center;gap:5px; justify-content:flex-end;text-align:right; font-size:.97rem;font-weight:800;color:var(--navy);word-break:keep-all} .tw2-p::before{content:"";width:15px;height:15px;flex:0 0 auto; background:no-repeat center/15px url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d8001f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.3 7-11a7 7 0 10-14 0c0 4.7 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E")} .tw2-x{flex:1 1 auto;min-width:0;text-align:right; font-size:.86rem;color:var(--tx2);word-break:keep-all} /* 예배가 없는 날 - 헷갈리지 않게 흐리게 + 취소선 */ .tw2-off{color:#8b95a3;text-decoration:line-through;text-decoration-thickness:1.5px} /* 행사 줄은 제목이 길 수 있으므로 제목이 늘어나고 장소가 줄어든다 */ .tw2-row.ev .tw2-n{flex:1 1 auto;min-width:0} .tw2-row.ev .tw2-x{flex:0 1 auto} /* ---------- 일정 목록의 날짜 구분줄 ---------- */ .daysep{ padding:9px 13px;background:#f7f9fc;border-bottom:1px solid var(--line); font-size:.83rem;font-weight:700;color:var(--tx2); } .daysep.today{background:#fff3f4;color:var(--red)} .daysep b{color:var(--red)} /* ---------- 헌금 계좌 ---------- */ .acc{display:flex;align-items:center;gap:10px;padding:12px 13px;flex-wrap:wrap} .acc + .acc{border-top:1px solid var(--line)} .acc-t{flex:1 1 100%;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap} .acc-t b{font-size:.92rem;font-weight:800} .acc-t span{font-size:.8rem;color:var(--tx2)} /* '건축' 처럼 그 계좌에만 붙는 표시 */ .acc-m{ font-style:normal;font-size:.74rem;font-weight:800; padding:2px 8px;border-radius:10px; background:#fdeef0;color:var(--red-d); } .acc-n{ flex:1;min-width:0;font-size:1.02rem;font-weight:700;letter-spacing:.2px; font-variant-numeric:tabular-nums;word-break:break-all; } .acc-c{ flex:0 0 auto;min-height:42px;padding:0 16px;border:0;border-radius:9px; background:var(--navy);color:#fff;font-family:inherit;font-size:.88rem; font-weight:700;cursor:pointer; } .acc-c.ok{background:#0a7d32} /* ---------- 자주 찾는 것 (큰 아이콘 버튼 2열) ---------- 2026-08-08 : 여섯 칸이 모두 흰 바탕에 남색 가는 선이라 서로 구분이 안 됐다. 아이콘 뒤에 옅은 색 동그라미를 깔고 칸마다 색을 다르게 했다. ⚠ 동그라미(.qi)는 글씨를 키워도 같이 커지지 않게 px 로 고정한다. rem 으로 두면 '아주 크게' 에서 두 칸 폭을 넘어 무너진다. */ .quick{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:6px} .quick a{ display:flex;flex-direction:column;align-items:center;justify-content:center; gap:9px;min-height:114px;padding:14px 9px; background:#fff;border-radius:12px;text-align:center; box-shadow:0 1px 3px rgba(16,38,72,.10),0 6px 18px rgba(16,38,72,.06); font-size:.92rem;font-weight:800;line-height:1.35;letter-spacing:-.3px; } .quick .qi{ display:flex;align-items:center;justify-content:center;flex:0 0 auto; width:56px;height:56px;border-radius:50%;background:var(--cb); } .quick .qi svg{ width:31px;height:31px;flex:0 0 auto;fill:none;stroke:var(--c); stroke-width:2;stroke-linecap:round;stroke-linejoin:round; } .quick small{display:block;font-weight:400;font-size:.79rem;color:var(--tx2);margin-top:1px} /* 칸마다 다른 색. --c 는 아이콘 선, --cb 는 동그라미 바탕. 여섯 색 모두 흰 바탕에서 글자 대비 4.5:1 을 넘도록 어둡게 잡았다. */ .c-red {--c:#c8102e; --cb:#fdeaed} .c-navy {--c:#07335f; --cb:#e8eef6} .c-teal {--c:#0f6b6b; --cb:#e3f2f1} .c-gold {--c:#8a6100; --cb:#fbf1d9} .c-green{--c:#1a6b34; --cb:#e6f3ea} .c-blue {--c:#12508f; --cb:#e7eefa} /* ---------- 페이지 넘김 ---------- */ .more,.pager a,.pager span{ display:flex;align-items:center;justify-content:center;min-height:50px; border-radius:10px;background:#fff;border:1px solid var(--line); font-size:.92rem;font-weight:700;color:var(--navy); } .more{margin-top:12px} .pager{display:flex;gap:8px;margin-top:12px} .pager a,.pager span{flex:1} .pager span{color:#b6bfcc;background:#f7f9fc} /* ---------- 검색 ---------- */ .sbox{display:flex;gap:8px;margin-bottom:14px} .sbox input[type=text]{ flex:1;min-width:0;min-height:50px;padding:0 14px;font-size:1rem;font-family:inherit; border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--tx); } .sbox button{ flex:0 0 auto;min-height:50px;padding:0 19px;border:0;border-radius:10px; background:linear-gradient(135deg,var(--navy),var(--navy-d)); color:#fff;font-size:1rem;font-weight:700;font-family:inherit; } /* ---------- 안내 / 빈 화면 ---------- */ .mempty{ padding:44px 20px;text-align:center;color:var(--tx2);font-size:.92rem; background:#fff;border-radius:12px;line-height:1.75; } .note{ background:#fff;border-radius:12px;padding:15px 16px;font-size:.95rem;line-height:1.75; box-shadow:0 1px 3px rgba(16,38,72,.10); } .note h3{margin:0 0 8px;font-size:1rem;font-weight:800} .note + .note{margin-top:10px} .note dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 14px} .note dt{color:var(--tx2);white-space:nowrap} .note dd{margin:0;font-weight:600} .note dd small{display:block;font-weight:400;color:var(--tx2);font-size:.85rem} .small{font-size:.83rem;color:var(--tx2)} .bc{font-size:.83rem;color:var(--tx2);margin:0 2px 10px} /* ---------- 하단 탭바 ---------- 어르신들이 "여기 눌러도 되는 곳" 인 줄 모르고 지나치신다는 지적을 받아 흰 바탕 대신 진한 남색으로 바꾸고, 지금 보고 있는 칸을 크게 표시한다. */ .mtab{ position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex; min-height:calc(var(--tab-h) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); background:linear-gradient(180deg,#0a3d70 0%,#07335f 100%); box-shadow:0 -3px 14px rgba(0,32,64,.30); } .mtab-i{ position:relative;flex:1; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:4px;color:#b6cbe4;font-size:.74rem;font-weight:700;text-align:center; transition:color .15s; } .mtab-i svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round} /* 지금 보고 있는 칸 - 금색 + 위쪽 표시줄 + 옅은 배경 ⚠ 옅은 배경을 ::after 로 깔 때 z-index:-1 을 주면 안 된다. .mtab-i 에 배경이 없어서 탭바 배경 뒤로 들어가 아예 안 보인다. 그래서 ::after 는 0, 안쪽 글자·아이콘을 1 로 올려 앞에 세운다. */ .mtab-i.on{color:var(--gold);font-weight:800} .mtab-i.on::before{ content:"";position:absolute;top:0;left:22%;right:22%;height:4px; border-radius:0 0 4px 4px;background:var(--gold);z-index:2; } .mtab-i.on::after{ content:"";position:absolute;top:6px;left:12%;right:12%;bottom:6px; border-radius:12px;background:rgba(255,255,255,.13);z-index:0; } .mtab-i svg,.mtab-i span{position:relative;z-index:1} .mtab-i.on svg{stroke-width:2.3} .mft{padding:18px 14px 26px;text-align:center;font-size:.8rem;color:var(--tx2);line-height:1.8} .mft a{ display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 10px; color:var(--navy);font-weight:700;text-decoration:underline; } @media (min-width:560px){ .grid{grid-template-columns:repeat(4,1fr)} .ban a{flex-basis:70%} }