/* ========================================================= NOGNOFLEX AI — MOBILE OPTIMIZE PATCH file: /public/themes/v153-original/components/mobile-optimize.css --------------------------------------------------------- 기존 파일은 하나도 수정하지 않습니다. 각 페이지의 맨 마지막(다른 css 뒤)에 1줄만 추가하세요. 되돌리려면 그 1줄만 지우면 원상복구됩니다. ========================================================= */ :root{ --nf-safe-t: env(safe-area-inset-top, 0px); --nf-safe-b: env(safe-area-inset-bottom, 0px); --nf-topmenu-h: 48px; /* 상단 칩 실제 점유 높이 */ --nf-top-gap: calc(var(--nf-topmenu-h) + var(--nf-safe-t)); } /* --------------------------------------------------------- 0. 가로 오버플로 차단 스마트폰에서 좌우로 살짝 밀리는 현상의 근본 원인. --------------------------------------------------------- */ html, body{ max-width:100%; overflow-x:hidden; } /* ========================================================= 1. 상단 고정 메뉴(내 정보·게시판·갤러리·언러닝) --------------------------------------------------------- 문제: position:fixed + z-index:99990 이라서 모든 모달(9999~10080) 위에 떠서 제목을 가림. 해결: z-index 를 모달 아래로 내리고, 칩 뒤에 불투명 바를 깔아 본문 글자가 칩 사이 틈으로 비쳐 보이지 않게 함. ========================================================= */ .hero.hero-nogno-final .nf-home-top-menu{ z-index:9500; /* 99990 → 9500 */ } @media(max-width:900px){ .hero.hero-nogno-final .nf-home-top-menu{ top:0; left:0; right:0; width:100%; transform:none; padding:calc(var(--nf-safe-t) + 5px) 8px 5px; background:rgba(255,255,255,.94); -webkit-backdrop-filter:saturate(1.4) blur(10px); backdrop-filter:saturate(1.4) blur(10px); box-shadow:0 1px 0 rgba(16,53,96,.10); } /* 칩이 바 위에 있으므로 개별 그림자는 제거 */ .hero.hero-nogno-final .nf-home-top-menu button, .hero.hero-nogno-final .nf-home-top-menu a{ height:32px; min-height:32px; font-size:11px; } /* 히어로가 스스로 확보하던 여백을 바 높이에 맞춰 재계산 */ .hero.hero-nogno-final{ padding-top:calc(var(--nf-top-gap) + 14px); } } /* ========================================================= 2. 7가지 학습 카드 — 상세 모달 --------------------------------------------------------- 문제: 모달 상단이 상단 칩에 가려짐 / 하단 문장이 잘림. 해결: 위아래 안전 여백을 명시. z-index 도 칩 위로 확정. ========================================================= */ @media(max-width:680px){ .nf-learning-detail-wrap{ z-index:100000!important; /* 9999 → 칩(9500) 위 */ padding-top:calc(var(--nf-safe-t) + 14px)!important; padding-bottom:calc(var(--nf-safe-b) + 96px)!important; overscroll-behavior:contain; } /* JS가 body 직하에 만드는 풀스크린 모달도 동일 처리 */ #nfLearningFullscreenModal{ padding-bottom:calc(var(--nf-safe-b) + 96px)!important; overscroll-behavior:contain; } /* min-height:calc(100% - 0px) 때문에 내용이 짧아도 카드가 화면을 꽉 채워 스크롤 여지가 사라지던 문제 해제 */ .nf-learning-detail{ min-height:0!important; padding-bottom:22px; } /* 닫기 버튼을 스크롤해도 항상 손 닿는 위치에 고정 */ .nf-learning-detail-head{ position:sticky; top:0; z-index:3; margin:-20px -16px 0; padding:16px 16px 13px; background:#fff; border-radius:18px 18px 0 0; } .nf-learning-detail-energy .nf-learning-detail-head{ background:#fffaf3; } .nf-learning-detail-close{ width:44px; /* 터치 최소 44px */ height:44px; } } /* 카드 그리드: 아주 좁은 화면에서는 1단 */ @media(max-width:380px){ .nf-learning-topic-grid{ grid-template-columns:1fr!important; } .features.nf-home-learning-five .nf-learning-topic-button{ min-height:0!important; padding:14px 14px 13px!important; } } /* 이미 열어본 카드 표시 (JS 1줄 추가 시 동작 — 아래 안내 참고) */ .nf-home-learning-seven .nf-learning-topic-button.is-visited:not(.is-active){ border-style:dashed!important; } .nf-home-learning-seven .nf-learning-topic-button.is-visited:not(.is-active) .nf-learning-topic-more::before{ content:'✓ '; color:var(--nf-card-accent); font-weight:950; } /* ========================================================= 3. 떠다니는 캐릭터(주황 볼) --------------------------------------------------------- 문제: .nf-float-zone 이 min(44vw,460px) × min(56vh,560px). 360px 폰에서 158×420px 영역을 캐릭터가 돌아다녀서 본문 한가운데를 가림. 해결: 이동 범위를 오른쪽 아래 모서리로 축소. ========================================================= */ @media(max-width:680px){ .nf-float-zone{ width:min(30vw,132px); height:min(24vh,190px); right:6px; bottom:calc(10px + var(--nf-safe-b)); } .nf-character-wrap{ right:0; bottom:64px; width:64px; height:72px; } .nf-speech{ right:56px; bottom:52px; width:min(200px,58vw); font-size:12px; padding:9px 11px; } /* 모달이 열려 있을 때는 캐릭터를 감춤 */ body:has(.nf-learning-detail-wrap.nf-learning-modal-open) .nf-float-zone, body:has(#nfLearningFullscreenModal:not([style*="display:none"])) .nf-float-zone, body:has(.nf-account-modal.open) .nf-float-zone, body:has(#analysisPageSlot.nf-analysis-modal-open) .nf-float-zone{ display:none; } } /* ========================================================= 4. 마야력 가족트리 --------------------------------------------------------- 문제: 3단 가로 배치가 폰에서 한 글자씩 줄바꿈됨. 해결: 가로스크롤을 끄고 세로로 쌓음. 본인 → 배우자 → 본인가족 → 배우자가족 → 자녀 순. ★ v1.1.0 변경: 기준폭 680px → 1024px 가족트리 원본이 min-width 1000~1120px 를 강제하므로 1024px 미만에서는 어차피 3단이 화면에 안 들어갑니다. 폴더블 내부화면(약 690~720px), 태블릿 세로(768px), '데스크톱 사이트' 모드(980px)까지 모두 세로 배치. ========================================================= */ @media(max-width:1024px){ .family-tree-scroll{ overflow-x:visible; padding:0 0 6px; } .family-tree-scroll:after{ display:none!important; } /* 밀어보기 안내 숨김 */ .family-tree-layout{ min-width:0!important; width:100%; display:flex!important; flex-direction:column; gap:12px; } .family-center{ order:1; } .family-side.self-side{ order:2; } .family-side.spouse-side{ order:3; } .family-descendants{ order:4; } .family-side, .family-center, .family-descendants{ min-width:0; max-width:100%; padding:12px 11px; } /* 본인 ↔ 배우자: 좌우 → 위아래 */ .family-center .couple-line{ grid-template-columns:1fr; gap:6px; } .family-center .couple-link{ font-size:20px; transform:rotate(90deg); /* ↔ 를 ↕ 로 */ } .family-side .people, .family-center .siblings-row .people, .family-descendants .people, .people{ grid-template-columns:1fr!important; gap:8px; } .person{ padding:12px; } .person h4, .person .mini, .person .date{ word-break:keep-all; } .person .remove{ top:6px; right:6px; } /* 싱크로율 입력줄: 세로로 눕던 라벨 정상화 */ .card-sync-editor{ flex-wrap:wrap; gap:6px; padding:7px 8px; } .card-sync-editor label{ flex:1 1 auto; min-width:0; white-space:nowrap; } .card-sync-editor input{ width:56px; flex:0 0 auto; } .card-sync-editor button{ flex:0 0 auto; } .family-empty{ padding:14px 10px; } .family-column-title{ font-size:13px; } } /* 481~1024px 구간은 형제자매·조부모만 2단 유지 (공간 여유 있음) */ @media(min-width:481px) and (max-width:1024px){ .family-side .people, .family-center .siblings-row .people{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } } /* ========================================================= 5. 공통 터치·가독성 ========================================================= */ @media(max-width:680px){ button, [role="button"], a.btn{ touch-action:manipulation; } /* iOS 입력 시 화면 확대 방지 — 16px 미만이면 자동 줌 발생 */ input[type="text"], input[type="number"], input[type="tel"], input[type="email"], input[type="password"], input[type="date"], input[type="time"], select, textarea{ font-size:16px; } } @media(prefers-reduced-motion:reduce){ .nf-character{ animation:none!important; } .nf-character-wrap{ transition:none!important; } .nf-learning-detail{ animation:none!important; } }