/* 비율 및 변수 설정 */
:root {
    --space-black: #010204;
    --moon-size: 250px;
    --timer-size: 4rem;
    
    /* 인스타 로고 크기 및 여백 */
    --insta-sz: 24px;
    --insta-pad: 12px;
}

/* [최적화] 태블릿 및 아이패드 */
@media (min-width: 768px) {
    :root { 
        --moon-size: 380px; 
        --timer-size: 7rem; 
        --insta-sz: 28px;
        --insta-pad: 16px;
    }
}

/* [최적화] PC 및 대형 화면 */
@media (min-width: 1200px) {
    :root { 
        --moon-size: 480px; 
        --timer-size: 9rem; 
        --insta-sz: 32px;
        --insta-pad: 20px;
    }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0; padding: 0; }
body, html { width: 100%; height: 100%; background: var(--space-black); color: white; font-family: 'Inter', sans-serif; overflow: hidden; }

.space-stars {
    position: fixed; inset: 0; z-index: -1;
    background: radial-gradient(circle at 50% 50%, #0d162d 0%, #010204 100%);
}

/* 메인 레이아웃 엔진 */
.app-engine {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 100vh; width: 100vw; gap: 45px; 
    padding: env(safe-area-inset-top) 20px env(safe-area-inset-bottom);
    transition: all 0.9s cubic-bezier(0.2, 1, 0.3, 1);
}

/* [중요] 가로 모드 최적화 (PC/아이패드 가로) */
@media (orientation: landscape) and (min-width: 1024px) {
    .app-engine { flex-direction: row; gap: 90px; }
}

/* 시작 시 발동: 패널 제거 및 중앙 정렬 */
.app-engine.active { gap: 0; flex-direction: column !important; }
.app-engine.active .setting-control-panel { 
    display: none !important; /* 물리적 공간을 완전히 지워 중앙 정렬 강제 */
}

/* --- 달(Moon) 정밀 묘사 섹션 --- */
.moon-focus-area { display: flex; flex-direction: column; align-items: center; z-index: 10; transition: transform 1s ease; }
.moon-wrapper { position: relative; width: var(--moon-size); height: var(--moon-size); margin-bottom: 25px; }

.moon-sphere {
    position: relative; width: 100%; height: 100%; border-radius: 50%;
    background: #0b0e1a; overflow: hidden;
    box-shadow: 0 0 50px rgba(255,255,255,0.02);
}

/* 정교한 달 지형 (검은 점 제거, 리얼 크레이터 질감) */
.moon-terrain-detail {
    position: absolute; inset: 0; opacity: 0.75;
    background: 
        radial-gradient(circle at 25% 35%, #e2e2e2 0%, transparent 12%),
        radial-gradient(circle at 65% 25%, #d4d4d4 0%, transparent 18%),
        radial-gradient(circle at 55% 75%, #bdbdbd 0%, transparent 15%),
        radial-gradient(circle at 85% 55%, #ececec 0%, transparent 10%),
        #fdfdfd; /* 달의 기본 밝은 면 */
    filter: blur(1.5px) contrast(1.25);
}

/* [핵심] 어둠 마스크: translateX로 물리적 이동 */
.moon-mask-layer {
    position: absolute; inset: -2px; background: #0b0e1a;
    border-radius: 50%; transform: translateX(0%);
    z-index: 2; filter: blur(12px); transition: transform 1s linear;
}

.moon-internal-shadow {
    position: absolute; inset: 0; border-radius: 50%; z-index: 3;
    box-shadow: inset 15px 15px 35px rgba(255,255,255,0.1), inset -35px -35px 70px rgba(0,0,0,0.9);
}

.moon-aura-effect {
    position: absolute; inset: -50px; background: white; border-radius: 50%;
    filter: blur(110px); opacity: 0.05; z-index: -1;
}

.timer-main-text { 
    font-size: var(--timer-size); font-weight: 100; letter-spacing: -4px; 
    font-variant-numeric: tabular-nums; transition: 0.5s;
}

/* --- 설정 패널 디자인 --- */
.setting-control-panel { width: 100%; max-width: 460px; z-index: 100; }
.glass-morph-box {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.09);
    backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
    border-radius: 45px; padding: 45px; text-align: center;
}
.panel-tag { font-size: 0.6rem; letter-spacing: 6px; color: rgba(255,255,255,0.3); margin-bottom: 35px; }

.timer-input-row { display: flex; align-items: center; justify-content: center; gap: 15px; margin-bottom: 30px; }
.input-unit input {
    background: transparent; border: none; color: white; width: 100px;
    font-size: 3.5rem; font-weight: 200; text-align: center; outline: none;
}
.input-unit label { display: block; font-size: 0.65rem; color: rgba(255,255,255,0.25); margin-top: 5px; }
.input-divider { font-size: 2.5rem; color: rgba(255,255,255,0.1); margin-top: -40px; }

.yt-link-row input {
    width: 100%; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 15px; padding: 18px; color: white; font-size: 0.9rem; text-align: center; margin-bottom: 40px; outline: none;
}

.start-ignition-btn {
    width: 100%; background: white; color: black; border: none;
    padding: 22px; border-radius: 20px; font-weight: 600; cursor: pointer;
    font-size: 1.05rem; transition: 0.3s; position: relative; z-index: 110;
}
.start-ignition-btn:active { transform: scale(0.97); }

/* --- 커스텀 알림 모달 스타일 --- */
.lunar-alert-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.92);
    display: none; align-items: center; justify-content: center; z-index: 2000;
}
.lunar-alert-content {
    background: #0f1424; border: 1px solid rgba(255,255,255,0.1);
    padding: 60px; border-radius: 45px; text-align: center; max-width: 450px; width: 90%;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5);
}
.lunar-alert-content h2 { font-weight: 200; letter-spacing: 6px; color: white; margin-bottom: 20px; }
.lunar-alert-content p { color: rgba(255,255,255,0.5); font-size: 0.95rem; margin-bottom: 40px; }
.alert-close-btn {
    background: white; color: black; border: none; padding: 15px 45px;
    border-radius: 12px; font-weight: 600; cursor: pointer; transition: 0.3s;
}
.alert-close-btn:hover { transform: translateY(-3px); }

/* --- [핵심 수정] 인스타 플로팅 버튼 Monochrome 최적화 --- */
/* 인스타 플로팅 버튼 - 외곽 박스 */
.insta-floating-btn {
    position: fixed;
    /* 세이프 에어리어 대응 및 구석 배치 */
    bottom: calc(env(safe-area-inset-bottom) + 20px);
    right: calc(env(safe-area-inset-right) + 20px);
    z-index: 500;
    
    display: flex; 
    align-items: center; 
    justify-content: center;
    width: 44px; /* 버튼 크기 고정 */
    height: 44px;
    border-radius: 12px; /* 인스타 로고 특유의 둥근 사각형 느낌 */
    
    /* 배경: 거의 투명하게 하여 튀지 않음 */
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    
    transition: all 0.4s cubic-bezier(0.2, 1, 0.3, 1);
    text-decoration: none;
}

/* 인스타 SVG 로고 - 색상 제어 */
.insta-floating-btn svg {
    width: 24px;
    height: 24px;
    /* [수정] 마스크 대신 직접 fill(채우기) 사용 - 아주 은은한 회색(흑백) */
    fill: rgba(255, 255, 255, 0.2); 
    transition: all 0.3s ease;
}

/* 호버(PC) 및 터치(모바일) 시 시각적 피드백 */
.insta-floating-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.12);
}

.insta-floating-btn:hover svg {
    /* 호버 시에만 흰색으로 밝게 빛남 */
    fill: rgba(255, 255, 255, 0.9);
}