/* v0.0.3: 폰트를 옹짐꾼님이 주신 손글씨 폰트 "온글잎 박다현체"로 전면 교체. Regular 굵기 파일만 있어서(Bold 없음), 브라우저가 임의로 두껍게 그리는(faux bold) 걸 막기 위해 제목/로고/버튼도 전부 font-weight:normal로 통일함 — 폰트 자체가 손글씨라 진하게 안 만들어도 다른 텍스트와는 충분히 구분됨. (이전 Pretendard/Paperlogy 조합, 그 이전 Nunito/Jua/Fredoka 실험은 전부 이 폰트로 대체됨) v0.0.4: 체크리스트 상세 설명처럼 정보성 긴 글은 손글씨 폰트가 가독성을 해친다는 피드백 — Pretendard를 다시 불러와서 "세부 정보" 텍스트(.ci-detail)에만 한정적으로 적용함 v0.0.5: "따로 노는 느낌"이라는 피드백 — 세부 정보 텍스트를 Pretendard 대신 옹짐꾼님이 두 번째로 주신 손글씨 폰트 "오뮤 다예쁨체"로 교체(제목·본문에 쓰는 온글잎체와는 다른 폰트지만, 둘 다 손글씨 계열이라 Pretendard보다는 톤이 더 잘 어울림) */ @font-face { font-family: 'OwnglyphParkDahyun'; src: url('../fonts/OwnglyphParkDahyun.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'OmyuPretty'; src: url('../fonts/OmyuPretty.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } /* v0.0.4: "전체적으로 글씨가 너무 작다"는 피드백 — 루트 크기를 16px→17px로 살짝 올려서 rem 단위를 쓰는 앱 전체 글자가 함께 커짐. 단, 캘린더 셀 안의 이벤트 텍스트(.ev-line/.ev-more)는 공간이 빠듯해서 과거 여러 스프린트에 걸쳐 크기를 맞춰둔 것이라 px로 고정해 이 확대에서 제외함 (캘린더 날짜 숫자 .day-num은 다른 곳과 동일하게 커지도록 그대로 rem 유지) v0.0.7: 설정 탭에서 사용자가 직접 글자 크기를 고를 수 있도록 3단계로 나눔(js/fontSize.js). v0.0.8: "크게가 기본이면 좋겠다"는 요청으로, 기존 "크게"(19px)가 새 기본값 "보통"이 되고 위아래로 2단계씩 더해 매우작게/작게/보통/크게/매우크게 5단계로 확장(js/fontSize.js). 기본값이 19px로 바뀌었기 때문에 에 아무 속성이 없어도 이전보다 한 단계 커져 있음. 육아정보 페이지(guide/guide.css)에도 반드시 동일한 5단계 값을 넣어야 함(핵심 개발 원칙 9번) */ html { font-size: 19px; } html[data-fontsize="xs"] { font-size: 15px; } html[data-fontsize="sm"] { font-size: 17px; } html[data-fontsize="lg"] { font-size: 21px; } html[data-fontsize="xl"] { font-size: 23px; } /* ── RESET & ROOT ── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { --pk: #F06292; --pkl: #FFF0F5; --pkd: #C2185B; --pk2: #CE93D8; --mn: #4DB6AC; --mnl: #E0F2F1; --yl: #FFD54F; --yll: #FFFDE7; --pu: #9575CD; --pul: #EDE7F6; --bl: #64B5F6; --bll: #E3F2FD; --tx: #2D2D3A; --txl: #8A849A; --wh: #fff; --bg: #F8F4FA; --card: #fff; --card-shadow: 0 2px 16px rgba(160,80,140,.09); --radius: 20px; } body { font-family: 'OwnglyphParkDahyun', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; font-weight: 400; background: var(--bg); color: var(--tx); min-height: 100vh; } /* v0.0.3: 제목·로고·버튼 전부 같은 손글씨 폰트로 통일 (Bold 파일이 없어 font-weight는 normal 고정) */ h1, h2, h3, .sec { font-family: 'OwnglyphParkDahyun', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; font-weight: 400; } /* Sprint 29: 버튼 폰트(font-family는 body에서 상속) */ .btn, .st-btn, .g-btn, .np { font-weight: 400; } /* ── TOPBAR (Sprint 13: 2줄 구조 — 로고/유저 줄 + 탭 줄) ── */ .topbar { background: rgba(255,255,255,.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(240,98,146,.12); display: flex; flex-direction: column; gap: 8px; padding: 10px 16px 8px; position: sticky; top: 0; z-index: 200; } .topbar-top { display: flex; align-items: center; justify-content: space-between; min-height: 32px; } .logo { font-family: 'OwnglyphParkDahyun', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; font-size: 2.2rem; font-weight: 400; background: linear-gradient(135deg, #F06292, #9C27B0); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -.3px; flex-shrink: 0; line-height: 1; } /* Sprint 24: 로고 옆 하트 이모지(💕) 대신 실제 마스코트 캐릭터 이미지 사용 Sprint 29: 캐릭터가 너무 작다는 피드백 — 약 1.4배 확대(1.35em → 1.9em) v0.0.2: 마스코트가 커진 만큼 "맘캘" 글씨도 함께 확대(1.22rem → 1.5rem) v0.0.4: "글씨가 마스코트보다 너무 작다"는 피드백 — em 단위로 묶여있으면 글씨 크기를 올릴 때 마스코트도 같이 커져서 비율이 안 맞았음. 마스코트 크기를 고정값(rem)으로 분리하고 글씨만 1.5rem→2.2rem으로 키워서 마스코트와 비슷한 크기가 되도록 조정 */ .brand-mark { height: 2.85rem; width: auto; vertical-align: -.75rem; margin-left: 2px; } /* 탭 줄 — 홈/캘린더/체크리스트/성장 4개는 기존처럼 균등하게, "설정"만 아이콘 위주로 좁게 v0.0.7: "5개 탭이 다 똑같이 커져서 이상하다"는 피드백 — 설정 탭 너비만 줄이고 나머지 4개는 원래 크기로 복원 */ .nav-pills { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, .55fr); gap: 4px; width: 100%; } .np { border: none; padding: 8px 4px; border-radius: 40px; font-size: .72rem; font-weight: 800; cursor: pointer; font-family: inherit; background: #EEE5F4; color: var(--txl); transition: all .2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; } .np.on { background: linear-gradient(135deg, #F06292, #9C27B0); color: #fff; box-shadow: 0 3px 12px rgba(200,80,180,.28); } @media (max-width: 380px) { .np { font-size: .64rem; padding: 7px 2px; } /* v0.0.4: 로고 글씨를 키운 뒤 아주 좁은 화면에서 등록 버튼·유저칩과 겹칠 수 있어 살짝만 축소 */ .logo { font-size: 1.7rem; } .brand-mark { height: 2.2rem; vertical-align: -.55rem; } } /* ── Sprint 10: 등록 버튼을 유저칩 옆으로 이동 ── */ .topbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .np-register { border: 1.5px dashed #E8B4CC; color: var(--pkd); padding: 6px 12px; background: none; } .np-register:hover { background: var(--pkl); } .np-register.on { border: none; } /* 등록 페이지가 활성화되면 기존 그라디언트가 우선 적용됨 */ /* ── PAGES ── */ .pg { display: none; max-width: 960px; margin: 0 auto; padding: 22px 16px; animation: fadeUp .28s ease; } .pg.on { display: block; } @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ── CARDS ── */ .card { background: var(--card); border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 22px; } /* ── SECTION TITLE ── */ .sec { font-size: .82rem; font-weight: 900; color: var(--txl); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; display: flex; align-items: center; gap: 7px; } /* ── HOME ── */ /* Sprint 28: 배너가 너무 크다는 피드백 반영 — 패딩·글자 크기를 전체적으로 축소 */ .home-hero { background: linear-gradient(135deg, #F48FB1 0%, #CE93D8 50%, #90CAF9 100%); border-radius: 20px; padding: 18px 22px; text-align: center; margin-bottom: 18px; position: relative; overflow: hidden; } .home-hero::before { content: ''; position: absolute; width: 160px; height: 160px; background: radial-gradient(circle, rgba(255,255,255,.18), transparent); border-radius: 50%; top: -55px; right: -40px; } .home-hero h1 { font-size: 1.12rem; font-weight: 900; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.12); margin-bottom: 3px; } .home-hero p { font-size: .76rem; color: rgba(255,255,255,.85); } .hero-emoji { font-size: 1.6rem; margin-bottom: 4px; display: block; } /* ── PROFILE STRIP ── */ .profile-strip { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; margin-bottom: 22px; padding-bottom: 4px; } .profile-strip::-webkit-scrollbar { display: none; } .pcard { background: var(--card); border-radius: 18px; padding: 16px 18px; box-shadow: var(--card-shadow); flex-shrink: 0; cursor: pointer; border: 2px solid transparent; transition: all .22s; min-width: 140px; text-align: center; } .pcard:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(180,80,160,.16); } .pcard.sel { border-color: var(--pk); background: linear-gradient(135deg, #FFF5F8, #F5EEFF); } .pcard .pav { font-size: 1.9rem; margin-bottom: 6px; } .pcard .pnm { font-weight: 900; font-size: .9rem; color: var(--tx); } .pcard .pag { font-size: .71rem; color: var(--pk); font-weight: 700; margin-top: 3px; } .pcard .pst { font-size: .62rem; margin-top: 5px; padding: 3px 8px; border-radius: 10px; font-weight: 800; display: inline-block; } .st-preg { background: var(--pul); color: #6A1B9A; } .st-born { background: var(--mnl); color: #00695C; } .add-pcard { background: linear-gradient(135deg, #FFF0F5, #F5EEFF); border: 2px dashed #DDB0CC; border-radius: 18px; padding: 16px; flex-shrink: 0; min-width: 110px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; gap: 5px; transition: all .22s; } .add-pcard:hover { border-color: var(--pk); transform: translateY(-2px); } .add-pcard span { font-size: 1.5rem; color: var(--pk); } .add-pcard p { font-size: .71rem; color: var(--pk); font-weight: 800; } /* ── TODAY EVENTS STRIP ── */ .today-strip { background: var(--card); border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 20px; } .today-ev { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-radius: 12px; margin-bottom: 8px; } .tev-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .tev-text { flex: 1; font-weight: 700; font-size: .82rem; color: var(--tx); } .tev-badge { font-size: .62rem; font-weight: 800; padding: 3px 8px; border-radius: 10px; color: #fff; flex-shrink: 0; } /* ── HOME DASHBOARD (Sprint 4) ── */ .dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; } .dash-card { background: var(--card); border-radius: 18px; padding: 15px 16px; box-shadow: var(--card-shadow); cursor: pointer; transition: all .22s; display: flex; align-items: flex-start; gap: 12px; min-height: 76px; min-width: 0; } .dash-card:not([onclick]) { cursor: default; } .dash-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(180,80,160,.16); } .dash-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; } .dash-body { min-width: 0; flex: 1; } .dash-label { font-size: .68rem; font-weight: 800; color: var(--txl); margin-bottom: 3px; text-transform: uppercase; letter-spacing: .03em; } .dash-value { font-size: .87rem; font-weight: 900; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash-sub { font-size: .68rem; color: var(--pk); font-weight: 700; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash-tip .dash-value, .dash-tip-text { font-size: .78rem; font-weight: 700; color: var(--tx); white-space: normal; line-height: 1.4; } .dash-tip { grid-column: 1 / -1; } .dash-empty { grid-column: 1 / -1; flex-direction: column; align-items: center; text-align: center; gap: 6px; } /* Sprint 28: 모바일(640px 이하)에서는 1열로 바뀜 — 아래 반응형(RESPONSIVE) 섹션 참고 */ /* ── PWA 설치 링크 (Sprint 12) ── */ .install-link { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: 18px; padding: 14px 16px; box-shadow: var(--card-shadow); cursor: pointer; transition: all .22s; } .install-link:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(180,80,160,.16); } .install-ico { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; background: var(--pkl); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; } .install-txt { flex: 1; min-width: 0; } .install-title { font-size: .87rem; font-weight: 900; color: var(--tx); } .install-sub { font-size: .71rem; color: var(--txl); font-weight: 700; margin-top: 2px; } /* v0.0.7: v0.0.6에서 넣었던 "#pg-settings 안 항목 축소" 스타일은 사용자 요청으로 되돌림 — 실제로 줄이고 싶었던 건 하단 nav-pills의 "설정" 탭 너비였음(아래 .nav-pills 참고) */ .install-arrow { font-size: 1.3rem; color: var(--pk); font-weight: 900; flex-shrink: 0; } /* ── 광고 슬롯 (Sprint 13) ── AdSense 미연동 시엔 .ad-fallback(육아 팁)이 대신 표시되어 빈 공간이 생기지 않음 */ .ad-slot-wrap { margin-top: 16px; } .ad-slot { width: 100%; } .ad-fallback { display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, #FFF8FA, #F8F2FC); border: 1.5px dashed #E8CADC; border-radius: 18px; padding: 14px 16px; } .ad-fallback-ico { font-size: 1.3rem; flex-shrink: 0; } .ad-fallback-body { min-width: 0; } .ad-fallback-label{ font-size: .66rem; font-weight: 900; color: var(--pk); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; } .ad-fallback-text { font-size: .8rem; font-weight: 700; color: var(--tx); line-height: 1.5; } /* ── QUICK MENU ── */ .qm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; } .qm-card { background: var(--card); border-radius: 18px; padding: 18px; box-shadow: var(--card-shadow); cursor: pointer; transition: all .22s; display: flex; align-items: center; gap: 13px; } .qm-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(180,80,160,.16); } .qm-icon { width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; flex-shrink: 0; } .qm-title { font-size: .86rem; font-weight: 900; color: var(--tx); } .qm-sub { font-size: .71rem; color: var(--txl); margin-top: 2px; } /* ── REGISTER ── */ .reg-card { background: var(--card); border-radius: 24px; box-shadow: var(--card-shadow); padding: 26px; max-width: 480px; margin: 0 auto; } .stage-toggle { display: flex; gap: 8px; margin-bottom: 16px; } .st-btn { flex: 1; padding: 10px; border: 1.5px solid #EEE0F0; border-radius: 12px; background: var(--wh); cursor: pointer; font-size: .84rem; font-weight: 800; color: var(--txl); font-family: inherit; transition: all .2s; } .st-btn.on { border-color: var(--pk); background: var(--pkl); color: var(--pkd); } .g-btns { display: flex; gap: 7px; } .g-btn { flex: 1; padding: 9px; border: 1.5px solid #EEE0F0; border-radius: 11px; background: var(--wh); cursor: pointer; font-size: .79rem; font-weight: 800; color: var(--txl); font-family: inherit; transition: all .2s; } .g-btn.on { border-color: var(--pk); background: var(--pkl); color: var(--pkd); } .reg-list-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: var(--pkl); border-radius: 13px; margin-bottom: 8px; } /* ── FORMS & BUTTONS ── */ .fg { margin-bottom: 11px; } .fg label { display: block; font-size: .71rem; font-weight: 800; color: var(--txl); margin-bottom: 4px; letter-spacing: .03em; } .fg input, .fg select, .fg textarea { width: 100%; padding: 10px 13px; border: 1.5px solid #EEE0F0; border-radius: 12px; font-size: .85rem; color: var(--tx); outline: none; font-family: inherit; transition: border .18s; background: var(--wh); } .fg input:focus, .fg select:focus, .fg textarea:focus { border-color: var(--pk); } .fg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .btn { padding: 12px 18px; border: none; border-radius: 13px; color: #fff; font-size: .86rem; font-weight: 800; cursor: pointer; font-family: inherit; transition: all .2s; width: 100%; } .btn:hover { opacity: .87; transform: translateY(-1px); } .bpk { background: linear-gradient(135deg, #F06292, #9C27B0); box-shadow: 0 4px 14px rgba(200,80,180,.28); } .bmn { background: linear-gradient(135deg, #4DB6AC, #00897B); box-shadow: 0 4px 14px rgba(80,180,160,.22); } .bpu { background: linear-gradient(135deg, #9575CD, #6A1B9A); } .bbl { background: linear-gradient(135deg, #64B5F6, #1976D2); } /* ── DIVIDER & SAVE BADGE ── */ .divider { height: 1px; background: linear-gradient(90deg, transparent, #EED8EC, transparent); margin: 18px 0; } .save-badge { display: inline-flex; align-items: center; gap: 5px; font-size: .65rem; font-weight: 800; padding: 3px 9px; border-radius: 10px; background: #E8F5E9; color: #2E7D32; position: fixed; bottom: 20px; right: 20px; box-shadow: 0 3px 12px rgba(0,0,0,.12); z-index: 300; opacity: 0; transition: opacity .3s; } .save-badge.show { opacity: 1; } /* ── v0.0.2: 알림 켜기/끄기 토글 버튼 ── */ .notif-toggle-btn { flex-shrink: 0; border: 1.5px solid #EEE0F0; background: #fff; color: var(--txl); font-size: .68rem; font-weight: 800; padding: 6px 12px; border-radius: 20px; cursor: pointer; font-family: inherit; transition: all .2s; } .notif-toggle-btn:hover { border-color: var(--pk); color: var(--pkd); } /* v0.0.7: 설정 탭 — 글자 크기 3단 버튼(작게/보통/크게) */ .fontsize-seg { display: flex; background: #F3EDF6; border-radius: 20px; padding: 3px; } /* v0.0.8: 3단→5단으로 늘어나면서 install-link 한 줄에 다 안 들어가 별도 줄로 뺌(js/fontSize.js) — 버튼 5개가 한 줄에 들어가도록 각 버튼 폭을 균등 분배하고 글자를 더 작게 */ .fontsize-seg-5 { margin-top: 8px; } .fontsize-seg-5 .fontsize-seg-btn { flex: 1; font-size: .58rem; padding: 7px 2px; } .fontsize-seg-btn { border: none; background: transparent; color: var(--txl); font-size: .66rem; font-weight: 800; font-family: inherit; padding: 5px 10px; border-radius: 16px; cursor: pointer; transition: all .2s; white-space: nowrap; } .fontsize-seg-btn.on { background: linear-gradient(135deg, #F06292, #9C27B0); color: #fff; box-shadow: 0 2px 8px rgba(200,80,180,.28); } /* v0.0.7: 알림 세부 설정(카테고리별 on/off, 시간대) */ .notif-subsettings { background: var(--card); border-radius: 16px; box-shadow: var(--card-shadow); padding: 12px 16px; margin-top: 8px; display: flex; flex-direction: column; gap: 10px; } .notif-check { display: flex; align-items: center; gap: 9px; font-size: .78rem; font-weight: 700; color: var(--tx); cursor: pointer; } .notif-check input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--pk); cursor: pointer; flex-shrink: 0; } .notif-window-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .78rem; font-weight: 700; color: var(--tx); padding-top: 10px; border-top: 1px solid #F0E5EE; } .notif-window-row select { border: 1.5px solid #EEE0F0; border-radius: 10px; padding: 5px 8px; font-size: .73rem; font-family: inherit; color: var(--tx); background: var(--wh); } /* ── v0.0.2: 앱 본체·육아정보 페이지 공통 하단 푸터(정책 링크 + 버전 표시) ── guide.css의 .site-footer*와 항상 동일한 스타일로 유지해야 두 페이지의 푸터가 통일되어 보임 */ .site-footer { max-width: 960px; margin: 0 auto; padding: 8px 16px 10px; text-align: center; } .site-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 16px; font-size: .72rem; } .site-footer-links a { color: var(--txl); } .site-footer-version { text-align: center; padding-bottom: 14px; font-size: .62rem; color: var(--txl); opacity: .6; } /* ── RESPONSIVE ── */ @media (max-width: 640px) { .qm-grid { grid-template-columns: 1fr 1fr; } .home-hero { padding: 14px 18px; } .home-hero h1 { font-size: .98rem; } .home-hero p { font-size: .7rem; } .hero-emoji { font-size: 1.35rem; } .fg2 { grid-template-columns: 1fr; } /* Sprint 28: 모바일에서는 대시보드 카드 2열이 좁아서 글자가 잘려 보인다는 피드백 — 1열로 쌓아서 카드마다 폭을 넉넉하게 확보 v0.0.8: "은유 오늘"·"체크리스트"는 모바일에서도 첫 줄에 나란히 보이면 좋겠다는 요청 — 2열 그리드로 되돌리되, 3번째 카드(다음 일정)부터는 한 줄 전체를 차지하도록 함 */ .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash-grid > .dash-card:nth-child(n+3) { grid-column: 1 / -1; } } /* ═══════════════════════════════════════════════════ * DARK MODE (v0.0.5) — 설정 탭 토글, js/theme.js * 일 때 적용됨. 앱 대부분이 CSS 변수(--bg/--card/--tx/--txl/--wh 등)를 * 쓰고 있어서 변수만 재정의해도 상당 부분 자동으로 반영되고, 변수를 안 쓰는 하드코딩된 * 흰색/밝은 배경 요소들은 아래에서 개별적으로 덮어씀. 육아정보 페이지(guide/)는 정적 SEO * 페이지라 이번 버전 다크 모드 대상에서 제외(앱 본체만 지원) * ═══════════════════════════════════════════════════ */ html[data-theme="dark"] { --bg: #17151D; --card: #221F29; --card-shadow: 0 2px 16px rgba(0,0,0,.4); --wh: #221F29; --tx: #EDE8F2; --txl: #9C93AC; --pkl: #3A2430; --mnl: #1E332F; --yll: #332C13; --pul: #2A2438; --bll: #1B2A38; } html[data-theme="dark"] body { background: var(--bg); color: var(--tx); } /* 변수를 쓰지 않고 흰색/밝은 색을 직접 지정해뒀던 요소들 — 다크 모드 전용 보정 */ html[data-theme="dark"] .topbar { background: rgba(30,27,38,.95); border-bottom-color: rgba(255,255,255,.08); } html[data-theme="dark"] .np { background: #2A2733; color: var(--txl); } html[data-theme="dark"] .cvt, html[data-theme="dark"] .cal-filter-btn { background: #2A2733; } html[data-theme="dark"] .ci-detail { background: #241F2C; border-color: #3A2E3C; } html[data-theme="dark"] .cal-cell { border-color: rgba(255,255,255,.06); } html[data-theme="dark"] .cal-cell:hover { background: #221E2A; } html[data-theme="dark"] .cal-head-row { filter: brightness(.9); } html[data-theme="dark"] .notif-toggle-btn { background: var(--card); border-color: rgba(255,255,255,.12); } html[data-theme="dark"] .auth-box, html[data-theme="dark"] .btn-google, html[data-theme="dark"] .auth-tab.on, html[data-theme="dark"] #userMenu { background: var(--card); color: var(--tx); } html[data-theme="dark"] .auth-divider::before, html[data-theme="dark"] .auth-divider::after { background: rgba(255,255,255,.1); } html[data-theme="dark"] .btn-google { border-color: rgba(255,255,255,.12); } html[data-theme="dark"] .fg input, html[data-theme="dark"] .fg select, html[data-theme="dark"] .fg textarea { background: var(--card); color: var(--tx); border-color: rgba(255,255,255,.12); } html[data-theme="dark"] .mo { background: rgba(0,0,0,.6); } /* v0.0.7: 글자 크기 세그먼트·알림 세부 설정 다크 모드 보정 */ html[data-theme="dark"] .fontsize-seg { background: #2A2733; } html[data-theme="dark"] .notif-window-row { border-top-color: rgba(255,255,255,.1); } html[data-theme="dark"] .notif-window-row select { border-color: rgba(255,255,255,.12); } /* v0.0.8: "아직도 흰 배경이 많다"는 피드백으로 대대적으로 추가 보정 — 변수 대신 밝은 회색·파스텔 색을 하드코딩해뒀던 카드형 요소들을 전부 찾아서 어둡게 */ html[data-theme="dark"] .ad-fallback { background: linear-gradient(135deg, #2A2430, #251F2C); border-color: #3A2E3C; } html[data-theme="dark"] .ci, html[data-theme="dark"] .gov-cl-item, html[data-theme="dark"] .growth-record-item { background: #241F2C; } html[data-theme="dark"] .ci:hover { background: #2A232F; border-color: #3A2E3C; } html[data-theme="dark"] .gov-cl-item:hover { background: #26302A; border-color: #2E4A3A; } html[data-theme="dark"] .gov-cl-item.gov-cl-urgent { background: #3A2323; } html[data-theme="dark"] .gov-cl-item.gov-cl-urgent:hover { background: #442626; } html[data-theme="dark"] .auth-tabs { background: #1C1922; } html[data-theme="dark"] .progress-bar { background: #2A2733; } html[data-theme="dark"] .cl-sb-pct.cl-sb-low { background: #2A2733; color: var(--txl); } html[data-theme="dark"] .sp-tab { background: #2A2733; color: var(--txl); } html[data-theme="dark"] .cal-nav-btn { border-color: rgba(255,255,255,.1); } /* v0.0.9: "다크모드 아직 적용 안된 부분" 추가 신고 — 전수 재조사해서 찾은 나머지 하드코딩된 밝은 배경 요소들을 마저 어둡게. 대부분 v0.0.8에서 훑었지만 놓친 곳들: 가족 프로필 카드(선택됨/등록하기), 체크리스트 탭 버튼(미선택), 체크리스트 컨텍스트 배너, 체크리스트 배지 3종(사이드바/메인), 정부지원 상태 배지, 성장그래프 안내문구·빈 상태 카드, 저장 완료 배지 */ html[data-theme="dark"] .pcard.sel { background: linear-gradient(135deg, #3A2430, #2A2438); } html[data-theme="dark"] .add-pcard { background: linear-gradient(135deg, #2A2430, #251F2C); border-color: #4A3644; } html[data-theme="dark"] .cl-tab-btn { background: #2A2733; color: var(--txl); } html[data-theme="dark"] .cl-context-banner { background: linear-gradient(135deg, #3A2430, #2A2438); border-color: #4A3644; } /* 체크리스트 사이드바 티어 배지(필수 100%/선택 일부/전부 완료) */ html[data-theme="dark"] .cl-sb-perfect { background: var(--yll) !important; color: #FFD54F !important; border-color: #5A4A20; } html[data-theme="dark"] .cl-sb-master { background: var(--pul) !important; color: #CE93D8 !important; } html[data-theme="dark"] .cl-sb-legend { background: linear-gradient(135deg, var(--pkl), var(--pul), var(--bll)) !important; color: var(--pk) !important; } /* 체크리스트 메인 영역 달성 배지(Perfect/Master/Legend) */ html[data-theme="dark"] .cl-badge-perfect { background: linear-gradient(135deg, var(--yll), #3A2E14); color: #FFD54F; border-color: #5A4A20; } html[data-theme="dark"] .cl-badge-master { background: linear-gradient(135deg, var(--pul), #322A44); color: #CE93D8; border-color: #4A3A5E; } html[data-theme="dark"] .cl-badge-legend { background: linear-gradient(135deg, var(--pkl), var(--pul), var(--bll)); color: var(--pk); } html[data-theme="dark"] .cl-status-low { color: var(--txl); background: #2A2733; } /* 정부지원 체크리스트 상태 배지(신청 전/신청함/지급됨) */ html[data-theme="dark"] .gov-cl-status.status-none { background: #1E332F; color: #4DB6AC; } html[data-theme="dark"] .gov-cl-status.status-applied { background: #1B2A38; color: #64B5F6; } html[data-theme="dark"] .gov-cl-status.status-paid { background: #1E3324; color: #66BB6A; } /* 성장그래프 — 안내 문구 박스 · 기록 없을 때 빈 상태 카드 */ html[data-theme="dark"] .growth-disclaimer { background: #241F2C; } html[data-theme="dark"] .growth-pct-empty { background: linear-gradient(135deg, #2A2430, #251F2C); border-color: #4A3644; } /* 저장 완료 배지 · 로그인 화면 닫기 버튼 */ html[data-theme="dark"] .save-badge { background: #1E3324; color: #66BB6A; } html[data-theme="dark"] .auth-close { background: #2A2733; } /* v0.0.11: 캘린더 다크모드 추가 보정 — 캡처로 짚어주신 부분 (테마별 인라인 색상이 캘린더 색상 테마(장미/민트/맑음/라벤더/복숭아)의 밝은 파스텔색을 그대로 쓰고 있어서, 다크 모드에서도 선택된 날짜 칸이 하얗게 남아있던 문제 등) */ html[data-theme="dark"] .cal-cell.selected { background: var(--pkl) !important; } html[data-theme="dark"] .week-today-cell { background: var(--pkl) !important; } html[data-theme="dark"] .week-grid-line { border-color: rgba(255,255,255,.08) !important; } /* 예방접종 그룹 카드 안의 회차별 개별 항목 줄 — 흰 배경(rgba(255,255,255,.6))이 다크에서도 그대로 밝게 남아 회색 알약처럼 떠 보이던 부분 */ html[data-theme="dark"] .dp-vax-item-row { background: rgba(255,255,255,.08); }