/* [버그수정] 안드로이드 시스템 디스플레이(글자 크기) 설정을 "중간"보다 크게 하면, 이 앱의 모든 px 고정 크기 텍스트(text-[8px] 등)까지 웹뷰가 함께 확대해버려 픽셀 단위로 맞춰둔 레이아웃이 깨짐(예: 시뮬레이션 날짜가 2줄로 넘어감, 일월식/우주쇼 배지가 서로 붙음) — 이 앱은 반응형 텍스트가 아니라 항상 고정 UI를 의도하므로, OS 폰트 확대를 웹뷰 차원에서 무시하도록 명시. (Android 쪽 WebSettings.setTextZoom(100)과 이중 방어) */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* @import 제거 → index.php 의 로 이전 (병렬 로딩) */ /* [수정] tailwind.built.css는 사전빌드(JIT 없음)라 원래 blue-* 조합에만 존재하던 opacity 변형 클래스들이 yellow-* 치환 후 대응 클래스가 없어 테두리가 브라우저 기본색(흰색 계열)으로 폴백되던 문제 수정 — 누락된 유틸리티를 직접 정의(Tailwind 표준 색상값과 동일) */ .bg-yellow-400 { background-color: rgb(250 204 21 / 1); } .bg-yellow-500\/10 { background-color: rgba(234,179,8,.1); } .bg-yellow-500\/15 { background-color: rgba(234,179,8,.15); } .bg-yellow-500\/20 { background-color: rgba(234,179,8,.2); } .bg-yellow-500\/40 { background-color: rgba(234,179,8,.4); } .bg-yellow-600 { background-color: rgb(202 138 4 / 1); } .border-yellow-400\/20 { border-color: rgba(250,204,21,.2); } .border-yellow-400\/40 { border-color: rgba(250,204,21,.4); } .border-yellow-400\/50 { border-color: rgba(250,204,21,.5); } .border-yellow-500\/40 { border-color: rgba(234,179,8,.4); } .text-yellow-100 { color: rgb(254 249 195 / 1); } .text-yellow-400\/60 { color: rgba(250,204,21,.6); } .text-yellow-400\/80 { color: rgba(250,204,21,.8); } .text-yellow-500 { color: rgb(234 179 8 / 1); } :root { --app-height: 100dvh; --handle-height: 22px; } body { margin: 0; background: #000; overflow: hidden; color: white; font-family: 'Noto Sans KR', sans-serif; height: var(--app-height); } #root { width: 100%; height: var(--app-height); position: relative; } .orbitron { font-family: 'Orbitron', sans-serif; } .glass { background: linear-gradient(135deg, rgba(28,32,44,0.94), rgba(15,19,30,0.94) 40%, rgba(7,10,19,0.95)); border: 1px solid rgba(255,255,255,0.22); box-shadow: 0 8px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.35), inset 0 0 20px rgba(255,255,255,0.04); overflow: hidden; } /* [수정] 유리 패널을 훑고 지나가던 랜덤 광택(glass-sheen)을 제거했다. 화면에 유리 요소가 20개 이상 떠 있고 각각이 30~60초 주기의 무한 CSS 애니메이션을 돌리고 있어서, 사용자가 아무 조작을 하지 않아도 합성이 멈추지 않았다(발열 원인). 패널의 배경·테두리·그림자 등 유리 스타일 자체는 그대로 둔다. */ /* [신규] 스카이뷰 별자리 일치 시 이름에 주는 팝인+반짝 효과 — key를 바꿔 매 일치마다 재생 */ @keyframes sky-name-pop { 0% { transform: scale(0.55); opacity: 0; text-shadow: 0 0 0 rgba(255,233,168,0); } 45% { transform: scale(1.18); opacity: 1; text-shadow: 0 0 14px rgba(255,233,168,0.9); } 70% { transform: scale(0.96); } 100% { transform: scale(1); text-shadow: 0 0 6px rgba(255,233,168,0.55); } } .sky-name-pop { display: inline-block; animation: sky-name-pop 0.55s cubic-bezier(0.2,1.4,0.4,1) both; } @media (prefers-reduced-motion: reduce) { .sky-name-pop { animation: none; } } .menu-fade-container { mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent); } .info-sheet { position: absolute; bottom: 160px; left: 0; width: 100%; z-index: 200; border-radius: 20px; transform: translateY(calc(100% + 160px)); transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1); max-height: calc(var(--app-height) - 280px); overflow-y: auto; pointer-events: none; opacity: 0; scrollbar-width: none; -ms-overflow-style: none; } .info-sheet::-webkit-scrollbar { display: none; } .info-sheet.open { transform: translateY(0); pointer-events: auto; opacity: 1; } /* 모바일 세로 모드에서 하단 컨트롤 패널을 내리면, 정보 레이어도 패널이 내려간 높이만큼만 함께 내려감 */ .info-sheet.open.sheet-pushed { transform: translateY(var(--panel-h, 230px)); } @media (max-width: 768px) { .info-sheet { display: block; } } /* 모바일 가로모드 (최대 너비 767.98px 까지만 적용되도록 제한) */ @media (max-width: 767.98px) and (orientation: landscape) { /* 가로모드: 우측 배치, 너비 70% 축소 (컨트롤 미겹침) */ .info-sheet { display: block !important; visibility: visible !important; left: auto !important; right: 0px !important; width: 190px !important; top: 8px !important; bottom: 0px !important; border-radius: 20px !important; max-height: calc(100vh - 8px) !important; transform: translateX(calc(100% + 10px)) !important; opacity: 0; pointer-events: none; font-size: 11px !important; } .info-sheet.open { transform: translateX(0) !important; opacity: 1 !important; pointer-events: auto !important; } /* 폭은 그대로 두고 여백만 축소해 텍스트 공간 확보 */ .info-sheet .px-4 { padding-left: 8px !important; padding-right: 8px !important; } .info-sheet .gap-3 { gap: 6px !important; } /* 한글은 단어(어절) 단위로만 줄바꿈 — 글자 하나씩 세로로 쪼개지는 현상 방지 */ .info-sheet, .info-sheet * { word-break: keep-all !important; overflow-wrap: break-word !important; } /* 방향·시기/12궁/12간지 3단 가로배치가 좁아서 깨지므로 세로 배치로 전환(세로 5단 구성) */ .info-sheet .flex.gap-3.items-start { flex-direction: column !important; gap: 3px !important; } .info-sheet .flex.gap-3.items-start > div { width: 100% !important; flex: none !important; } /* 타이틀(별자리명) 텍스트 크기 축소 — 타이틀 박스를 넘어가지 않도록 */ .info-sheet .text-\[14px\] { font-size: 11px !important; } .info-sheet .text-\[11px\].font-mono { font-size: 9px !important; } } /* PC 및 태블릿 가로/세로 통합 기본 설정 (768px 이상) */ @media (min-width: 768px) { .info-sheet { left: auto; right: 20px; width: 450px; border-radius: 20px; bottom: 0px !important; transform: translateX(calc(100% + 20px)); display: block !important; top: auto !important; max-height: calc(var(--app-height) - 100px) !important; /* 높이가 낮아진 만큼 최대 높이 확보 */ font-size: inherit !important; } .info-sheet.open { transform: translateX(0) !important; opacity: 1 !important; pointer-events: auto !important; } } /* 세로모드: 1단 4칸 + 여백 축소 (이미지 크기 유지) */ @media (orientation: portrait) { /* 내부 컨테이너 상하 패딩 축소 */ .info-sheet .nasa-container { margin-top: 8px !important; } /* 4칸 1행 그리드 */ .info-sheet .data-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 5px !important; margin-top: 6px !important; padding-bottom: 12px !important; } /* col-span-2 → 1칸으로 통일 */ .info-sheet .data-grid .col-span-2 { grid-column: span 1 !important; } .info-sheet .data-card { padding: 5px 4px !important; border-radius: 7px !important; text-align: center !important; } .info-sheet .data-label { font-size: 7px !important; line-height: 1.2 !important; } .info-sheet .data-value { font-size: 9px !important; margin-top: 1px !important; } } /* 태블릿 가로모드 전용 소형 패널 (768px 이상 1024px 미만으로 제한하여 PC 화면 보호) */ @media (min-width: 768px) and (max-width: 1023.98px) and (orientation: landscape) { .info-sheet { width: 190px !important; right: 0px !important; bottom: 0px !important; top: auto !important; max-height: 220px !important; overflow-y: auto !important; border-radius: 20px !important; } /* 아래 .nasa-container/.data-grid 등은 구버전 마크업 대상이라 현재 구조엔 매칭 안 됨 — 현재 실제 구조(text-[14px], flex.gap-3.items-start)에 맞춰 동일 수정 추가 */ .info-sheet .px-4 { padding-left: 8px !important; padding-right: 8px !important; } .info-sheet, .info-sheet * { word-break: keep-all !important; overflow-wrap: break-word !important; } .info-sheet .flex.gap-3.items-start { flex-direction: column !important; gap: 3px !important; } .info-sheet .flex.gap-3.items-start > div { width: 100% !important; flex: none !important; } .info-sheet .text-\[14px\] { font-size: 11px !important; } .info-sheet .text-\[11px\].font-mono { font-size: 9px !important; } .info-sheet .nasa-container { min-height: 60px !important; height: 60px !important; margin-top: 4px !important; border-radius: 8px !important; } .info-sheet .nasa-img { height: 60px !important; } .info-sheet .text-overlay { padding: 6px 8px !important; } .info-sheet .text-overlay h2 { font-size: 0.75rem !important; line-height: 1 !important; } .info-sheet .text-overlay span { display: none !important; } .info-sheet .text-overlay p { display: none !important; } .info-sheet .data-grid { grid-template-columns: 1fr !important; gap: 3px !important; margin-top: 4px !important; padding: 0 6px 6px !important; } .info-sheet .data-card { padding: 4px 6px !important; border-radius: 5px !important; } .info-sheet .data-label { font-size: 6px !important; } .info-sheet .data-value { font-size: 8px !important; margin-top: 1px !important; } .info-sheet .absolute.top-4.right-4 { width: 22px !important; height: 22px !important; top: 6px !important; right: 6px !important; font-size: 9px !important; } .info-sheet .px-6 { padding-left: 8px !important; padding-right: 8px !important; padding-top: 8px !important; } } .sim-center { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 160; padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 16px)); background: linear-gradient(to top, rgba(0, 0, 0, 0.98), rgba(0, 0, 0, 0.85)); border-top: 1px solid rgba(255, 255, 255, 0.1); transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; transform: translateY(0); } .sim-center.closed { transform: translateY(calc(100% - env(safe-area-inset-bottom, 0px))); } /* 모바일 가로모드: 레이아웃 세로모드와 동일, 핸들만 왼쪽 */ @media (max-width: 767.98px) and (orientation: landscape) { .panel-handle { left: 16px !important; transform: none !important; } /* [수정] 가로모드에서 safe-area-inset-bottom 잔여분(약 20px)이 남아 패널이 덜 내려가던 문제 → 패널 몸통을 완전히 화면 밖으로(+4px는 테두리/그림자 여유). 핸들(top:-22px)은 계속 노출됨 */ .sim-center.closed { transform: translateY(calc(100% + 4px)); } } @media (min-width: 768px) { .sim-center { width: 500px; left: 50%; margin-left: -250px; border-left: 1px solid rgba(255, 255, 255, 0.1); border-right: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px 20px 0 0; padding: 6px 12px 12px; } .sim-center.closed { transform: translateY(calc(100% - 10px)); } } /* [수정] 스마트폰을 가로로 눕히면 화면 너비가 768px를 넘는 경우가 많아(예: 800~900px) 위 min-width:768px 규칙(PC/태블릿용, 10px만 내려감)이 적용되면서 패널이 완전히 안 내려가던 문제 → 너비가 아니라 세로 공간이 좁은(가로모드 폰) 경우를 높이 기준으로 별도 판별해서 모바일 가로모드와 동일하게 완전히 화면 밖으로 내려가도록 함. 아래에 위치해 위 규칙을 덮어씀. */ @media (orientation: landscape) and (max-height: 500px) { .sim-center.closed { transform: translateY(calc(100% + 4px)); } } .panel-handle { position: absolute; top: calc(var(--handle-height) * -1); left: 50%; transform: translateX(-50%); width: 48px; height: var(--handle-height); background: rgba(10, 15, 30, 0.95); border: 1px solid rgba(255, 255, 255, 0.1); border-bottom: none; border-radius: 10px 10px 0 0; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 161; box-shadow: 0 -4px 10px rgba(0,0,0,0.3); } .handle-bar { width: 20px; height: 3px; background: #FACC15; border-radius: 2px; transition: all 0.3s; } .sim-center.closed .handle-bar { box-shadow: 0 0 12px #FACC15; transform: scaleX(1.2) rotate(0deg); } .speed-btn, .sys-btn { position: relative; flex: 1; padding: 3px 0; font-family: 'Orbitron'; font-size: 9px; font-weight: 800; color: rgba(255, 255, 255, 0.8); background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02) 60%); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 6px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); transition: all 0.2s; overflow: hidden; } /* [수정] 요청에 따라 메인 액센트를 블루(#3b82f6)에서 골드(#FACC15)로 전환 — 밝은 배경이라 텍스트는 기존 .active-gold와 동일하게 어두운색으로 대비 확보 */ .active-blue { background: #FACC15 !important; border-color: #fde047 !important; color: #1a1200 !important; box-shadow: 0 0 10px rgba(250, 204, 21, 0.3); } /* [신규] 성능 설정 버튼용 — 고화질배경 토글과 동일한 골드색(요청) */ .active-gold { background: rgba(250, 204, 21, 0.85) !important; border-color: #facc15 !important; color: #1a1200 !important; box-shadow: 0 0 10px rgba(250, 204, 21, 0.35); } .no-scrollbar::-webkit-scrollbar { display: none; } input[type="range"] { -webkit-appearance: none; width: 100%; height: 2px; margin: 10px 0; background: rgba(255, 255, 255, 0.1); border-radius: 1px; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #FACC15; border: 2px solid #ffffff; cursor: pointer; box-shadow: 0 0 5px rgba(0,0,0,0.5); } .nasa-container { position: relative; width: 100%; min-height: 180px; margin-top: 20px; background: #050505; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 24px; overflow: hidden; } .nasa-img { width: 100%; height: 180px; object-fit: cover; opacity: 0; transition: opacity 0.5s; } .nasa-img.loaded { opacity: 1; } .text-overlay { position: absolute; inset: 0; z-index: 10; padding: 30px; display: flex; flex-direction: column; justify-content: flex-start; background: linear-gradient( to bottom right, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100% ); pointer-events: none; } .data-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 12px; } .data-card { padding: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 10px; } .data-label { font-size: 9px; font-weight: bold; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); } .data-value { margin-top: 2px; font-family: 'Orbitron'; font-size: 12px; color: #FFD84D; } .help-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, 0.8); } .help-content { position: relative; width: 100%; max-width: 400px; border-radius: 24px; max-height: 60vh; display: flex; flex-direction: column; overflow: hidden; } .help-header { padding: 16px 24px 16px 24px; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; } .help-body { padding: 0 24px 24px 24px; overflow-y: auto; flex-grow: 1; min-height: 0; /* [수정] flex-column + overflow:auto 조합의 표준 보완 — 없으면 내용이 길 때 내부 스크롤 대신 형제 요소(탭 행)를 계속 찌그러뜨리며 밀어냄 (시스템정보 모달에서 이용방법/업데이트 탭 클릭 시 탭 행이 사라지던 버그 수정) */ } .help-footer { padding: 10px 10px; border-top: 1px solid rgba(255, 255, 255, 0.1); background: rgba(15, 23, 42, 0.98); flex-shrink: 0; } /* [수정] 가로모드에선 max-height:60vh 가 250px 안팎이라, 헤더+탭 행+푸터를 빼고 나면 본문에 몇 줄밖에 남지 않아 읽기가 어려웠다(제보). 세로모드와 데스크톱은 그대로 두고 낮은 가로 화면에서만 모달이 화면을 거의 채우도록 올린다. 브레이크포인트는 이 파일의 다른 가로모드 규칙(.sim-center.closed)과 동일하게 맞췄다. */ @media (orientation: landscape) and (max-height: 500px) { .help-modal { padding: 10px; } .help-content { max-height: calc(var(--app-height, 100dvh) - 20px); } } .inapp-banner { position: fixed; top: 0; left: 0; width: 100%; z-index: 3000; display: flex; align-items: center; justify-content: flex-end; padding: 10px 16px; background: #FACC15; color: #1a1200; font-size: 11px; font-weight: 700; border-bottom: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .inapp-text { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; } .full-loading { position: fixed; inset: 0; z-index: 9999; background: #000510; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity 1s ease-out; overflow: hidden; } /* 스캔라인 배경 */ .full-loading::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,120,255,0.025) 2px, rgba(0,120,255,0.025) 4px); pointer-events: none; } .full-loading.fade-out { opacity: 0; pointer-events: none; } /* 별 파티클 */ .loading-stars { position: absolute; inset: 0; pointer-events: none; } .loading-star { position: absolute; width: 1px; height: 1px; background: #fff; border-radius: 50%; opacity: var(--o); animation: loading-twinkle var(--d) ease-in-out infinite; } @keyframes loading-twinkle { 0%,100% { opacity: var(--o); } 50% { opacity: calc(var(--o) * 0.15); } } /* [수정] 레이더 링 대신 진입 로딩화면(#initial-loader)과 동일한 워프 로켓 연출로 통일 — 두 로딩 단계가 다른 비주얼로 뚝 끊겨 보이지 않도록 시각언어를 이어줌. 컨테이너만 이 화면 레이아웃(타이틀+진행바가 아래에 더 있음)에 맞춰 별도 크기(-sm)로 두고, 그 외 라인/로켓/ 키프레임은 index.php의 워프 로더와 동일한 정의를 그대로 재사용. */ .warp-loader-frame-sm { position: relative; width: clamp(120px, 34vw, 170px); height: clamp(120px, 34vw, 170px); border-radius: 50%; overflow: hidden; margin-bottom: 28px; background: radial-gradient(circle at 50% 50%, #0a1220 0%, #000000 72%); box-shadow: 0 0 0 1px rgba(126,166,255,.35), 0 0 22px rgba(90,150,255,.16); } .warp-line { position: absolute; top: 50%; left: 50%; width: 1px; height: 1px; transform: rotate(var(--ang, 0deg)); transform-origin: 0 0; } .warp-line span { position: absolute; top: -1px; left: 0; width: 60vmax; height: 2px; background: linear-gradient(to right, rgba(160,200,255,0), rgba(200,225,255,.9) 85%, rgba(235,245,255,1)); transform-origin: 0 50%; transform: scaleX(.03); opacity: 0; animation: warpStreak var(--d, 2.2s) linear infinite; animation-delay: var(--delay, 0s); will-change: transform, opacity; } @keyframes warpStreak { 0% { transform: scaleX(.02); opacity: 0; } 10% { opacity: 1; } 32% { transform: scaleX(1); opacity: .95; } 46% { opacity: 0; } 100% { opacity: 0; } } .warp-rocket { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); filter: drop-shadow(0 0 6px rgba(160,205,255,.55)); } .warp-rocket .flame { transform-origin: 50% 0%; animation: warpFlame .5s ease-in-out infinite alternate; } @keyframes warpFlame { from { transform: scaleY(.75); opacity: .75; } to { transform: scaleY(1.15); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .warp-line span, .warp-rocket .flame { animation: none; opacity: 1; } } /* [수정] 타이틀·진행바를 워프 로켓 팔레트(부드러운 청백색)로 통일 — 기존 각진 브라켓+ 레드/블루 글리치 텍스트는 새 워프 스트릭의 은은한 톤과 부딪혀서 전면 재조정. */ .loading-logo { font-family: 'Orbitron', sans-serif; font-size: 24px; font-weight: 900; color: #eaf4ff; letter-spacing: 0.22em; margin-bottom: 36px; text-align: center; line-height: 1.5; animation: loading-logo-glow 2.4s ease-in-out infinite; } @keyframes loading-logo-glow { 0%,100% { text-shadow: 0 0 8px rgba(126,166,255,.35); } 50% { text-shadow: 0 0 20px rgba(160,205,255,.7); } } .loading-ev7 { font-size: 11px; font-weight: 400; color: rgba(200,225,255,.65); letter-spacing: 0.4em; display: block; margin-bottom: 4px; } /* 진행 바 */ .loading-bar-outer { position: relative; width: 280px; padding: 10px 0; margin-bottom: 10px; } .loading-bar-container { width: 100%; height: 3px; border-radius: 999px; background: rgba(126,166,255,.14); overflow: hidden; } .loading-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, rgba(160,200,255,0), rgba(200,225,255,.9) 60%, rgba(235,245,255,1)); width: 0%; transition: width 0.4s ease; box-shadow: 0 0 12px rgba(126,166,255,.5); position: relative; animation: loading-bar-pulse 2s ease-in-out infinite; } .loading-bar-fill::after { content: ''; position: absolute; right: -1px; top: -4px; width: 3px; height: 11px; border-radius: 999px; background: #eaf4ff; box-shadow: 0 0 8px rgba(160,205,255,.9), 0 0 16px rgba(126,166,255,.6); } @keyframes loading-bar-pulse { 0%,100% { box-shadow: 0 0 8px rgba(126,166,255,.4); } 50% { box-shadow: 0 0 18px rgba(200,225,255,.7); } } /* 퍼센트 */ .loading-pct { font-family: 'Orbitron', sans-serif; font-size: 11px; color: rgba(200,225,255,.7); letter-spacing: 0.15em; margin-bottom: 4px; } /* 상태 텍스트 */ .loading-status { font-family: 'Orbitron', sans-serif; font-size: 9px; color: rgba(200,225,255,.4); text-transform: uppercase; letter-spacing: 0.25em; } .loading-footer { position: absolute; bottom: 40px; font-family: 'Orbitron', sans-serif; font-size: 9px; color: rgba(255,255,255,0.30); letter-spacing: 0.2em; text-transform: uppercase; } @keyframes pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } } /* 앱 유도 레이어 스타일 */ #app-install-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000000; z-index: 99999; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #ffffff; padding: 20px; } .install-content { max-width: 320px; width: 100%; } .install-logo { font-family: 'Orbitron', sans-serif; font-size: 24px; font-weight: 900; color: #ffffff; margin-bottom: 10px; font-style: italic; text-align: center; line-height: 1.5; } .install-ev7 { font-size: 13px; font-weight: 400; font-style: normal; color: rgba(255,255,255,0.45); letter-spacing: 0.35em; display: block; margin-bottom: 4px; } .install-title { font-size: 18px; font-weight: bold; margin-bottom: 20px; line-height: 1.4; color: #f3f4f6; } .install-desc { font-size: 13px; color: #9ca3af; margin-bottom: 40px; line-height: 1.6; } .google-play-badge { width: 200px; cursor: pointer; transition: transform 0.2s; margin: 0 auto; } .google-play-badge:active { transform: scale(0.95); } .continue-web { margin-top: 30px; font-size: 12px; color: #4b5563; text-decoration: underline; cursor: pointer; } /* ── PC(마우스 기기/넓은 화면): 상단 부모 메뉴 전체 표시 ───────────────────── 원인: max-w-xl(576px) 폭 제한 + 좌우 페이드 마스크 + (sm 이상) justify-center와 overflow-x-auto 조합으로 왼쪽으로 넘친 버튼은 스크롤로도 접근 불가. PC에서는 폭 제한/마스크를 해제하고, 넘치면 줄바꿈으로 모두 보이게 처리. 모바일(터치)은 기존 가로 스크롤 + 페이드 유지. */ @media (min-width: 1025px), (hover: hover) and (pointer: fine) { .menu-fade-container { mask-image: none !important; -webkit-mask-image: none !important; max-width: none !important; /* Tailwind max-w-xl(576px) 해제 */ } .menu-fade-container .overflow-x-auto { flex-wrap: wrap !important; /* 넘치면 줄바꿈으로 모두 표시 */ justify-content: center !important; overflow-x: visible !important; /* 좌측 잘림(접근불가) 원인 제거 */ } } /* ── [신규] 모바일 가로모드(터치, 640~1024px 폭): 위 PC 규칙의 사각지대 ────── 원인: Tailwind sm:justify-center(min-width 640px)가 가로모드 폭(보통 640~900px대)에서 켜지는데, 이 폭은 터치 기기라 위 PC 규칙(min-width:1025px 또는 hover:hover)에는 해당 안 됨 → justify-center로 콘텐츠가 가운데 정렬되면서 컨테이너보다 넘치는 왼쪽 버튼들(첫 번째 '태양' 탭 포함)이 scrollLeft를 음수로 보내야만 닿는 위치가 되어 overflow-x-auto로도 영원히 스크롤 불가 — "태양 탭이 없다"처럼 보이던 원인. 해당 구간만 justify-content를 flex-start로 강제해 항상 왼쪽부터 정렬 → 순수 오른쪽 스크롤만으로 전체 항목에 도달 가능하게 함. */ @media (max-width: 1024.98px) and (orientation: landscape) and (pointer: coarse) { /* [수정] 부모 행(.parent-menu-row) 전용으로 좁힘 — 기존엔 모든 .overflow-x-auto에 걸려 자식 메뉴(위성/인공위성 부메뉴)까지 왼쪽 정렬돼버렸음(요청: 자식 메뉴는 가운데 정렬). */ .menu-fade-container .parent-menu-row { justify-content: flex-start !important; } } /* ── 파일럿(우주비행) 모드: 프리미엄 무광 메탈 슬라이더 ── */ /* [수정] 원인: 전역 input[type="range"]::-webkit-slider-thumb(파란색, specificity 0,1,2)가 .pilot-slider::-webkit-slider-thumb(specificity 0,1,1)보다 명시도가 높아 항상 이기고 있었음. → 선택자를 input.pilot-slider로 바꿔 명시도를 동일하게 맞추고(이후 소스 순서로 승리), 색상 값에는 !important도 추가해 이중 안전장치. */ input.pilot-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; margin: 6px 0 3px !important; background: linear-gradient(180deg, #0a0a0a, #1e1e1e) !important; border-radius: 3px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.85), inset 0 -1px 0 rgba(255,255,255,0.04); touch-action: none; cursor: pointer; } input.pilot-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(160deg, #e2e2e2 0%, #a8a8a8 45%, #565656 100%) !important; border: 1px solid rgba(0,0,0,0.5) !important; box-shadow: 0 2px 3px rgba(0,0,0,0.6), inset 0 1px 1px rgba(255,255,255,0.5), inset 0 -2px 3px rgba(0,0,0,0.35); cursor: pointer; } input.pilot-slider::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.5) !important; background: linear-gradient(160deg, #e2e2e2 0%, #a8a8a8 45%, #565656 100%) !important; box-shadow: 0 2px 3px rgba(0,0,0,0.6), inset 0 1px 1px rgba(255,255,255,0.5); cursor: pointer; } input.pilot-slider::-moz-range-track { height: 4px; border-radius: 3px; background: linear-gradient(180deg, #0a0a0a, #1e1e1e) !important; } .led-dot { animation: led-pulse 1.6s ease-in-out infinite; } @keyframes led-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } @media (prefers-reduced-motion: reduce) { .led-dot { animation: none; } }