@charset "utf-8";

/* [1] 배경 초기화: 완전 화이트 배경 고정 */
body { margin: 0; padding: 0; font-family: 'Inter', sans-serif; background: #ffffff !important; overflow: hidden; }
.cash-wrapper { background: #ffffff !important; height: 100vh; display: flex; flex-direction: column; position: relative; }

/* [2] 상단 PC 헤더 */
.cash-header { position: absolute; top: 0; left: 0; width: 100%; padding: 30px 50px; display: flex; justify-content: space-between; align-items: center; z-index: 100; box-sizing: border-box; }
.logo-icon { font-size: 2.2rem; color: #00D632; text-decoration: none; }
.header-right { display: flex; gap: 12px; align-items: center; }
.btn-pill { padding: 10px 22px; border-radius: 30px; font-weight: 700; font-size: 0.9rem; text-decoration: none; transition: 0.2s; }
.btn-pill.green { background: #00D632; color: #fff; }
.btn-pill.black { background: #000; color: #fff; }
.menu-trigger { background: #000; color: #fff; border: none; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; }

/* [3] 스마트폰 목업 & 입체 테두리 */
.cash-grid { display: grid; grid-template-columns: 1fr 450px 1fr; height: 100vh; max-width: 1600px; margin: 0 auto; align-items: center; }
.phone-frame { width: 390px; height: 800px; border-radius: 64px; background: linear-gradient(135deg, #a5a5a7 0%, #7d7d80 20%, #4a4a4c 50%, #2a2a2c 100%); box-shadow: inset 0 0 1px 1px rgba(255,255,255,0.3), inset 0 0 12px 4px rgba(0,0,0,0.9), 0 0 0 1px #000, 0 30px 60px rgba(0,0,0,0.1); position: relative; padding: 3px; box-sizing: border-box; }
.phone-screen { width: 100%; height: 100%; background: #ffffff; border-radius: 61px; border: 6px solid #000; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; position: relative; }

/* [4] 로고 이미지 스타일 (SVG 파일 대응 핵심 설정) */
.app-header { padding: 60px 22px 10px; display: flex; justify-content: space-between; align-items: center; background: #ffffff; min-height: 45px; }
.header-logo-box { flex: 1; display: flex; align-items: center; justify-content: space-around; }
.app-logo-link { text-decoration: none; display: flex; align-items: center; min-height: 30px; }

.app-logo-img { 
    display: block !important;
    height: 28px !important; /* 높이 강제 고정 */
    width: auto !important;   /* 가로 비율 유지 */
    min-width: 50px;         /* SVG가 0px로 인식되는 현상 방지 */
    object-fit: contain;
}
.app-title { font-weight: 900; font-size: 1.5rem; letter-spacing: -1.5px; color: #000; }
.app-icon { font-size: 1.4rem; color: #000; text-decoration: none; }

/* [5] 상태바 및 CSS 수제 아이콘 */
.status-bar-area { position: absolute; top: 18px; left: 0; width: 100%; display: flex; justify-content: space-between; padding: 0 32px; box-sizing: border-box; z-index: 99; font-size: 15px; }
.sb-time { font-weight: 700; color: #000; }
.sb-right { display: flex; align-items: flex-end; gap: 5px; height: 15px; }

.ios-signal { display: flex; gap: 1.5px; align-items: flex-end; }
.ios-signal span { width: 3px; background: #000; border-radius: 0.5px; }
.ios-signal span:nth-child(1) { height: 4px; } .ios-signal span:nth-child(2) { height: 6px; } .ios-signal span:nth-child(3) { height: 8px; } .ios-signal span:nth-child(4) { height: 10px; }
.ios-wifi { position: relative; width: 16px; height: 12px; }
.wifi-arc { position: absolute; width: 16px; height: 16px; border-top: 2.2px solid #000; border-radius: 50%; }
.wifi-arc.small { width: 10px; height: 10px; left: 3px; top: 4px; }
.wifi-dot { position: absolute; width: 3.5px; height: 3.5px; background: #000; border-radius: 50%; left: 6.25px; bottom: 0; }
.sb-battery { width: 24px; height: 11px; border: 1.2px solid rgba(0,0,0,0.5); border-radius: 3.5px; position: relative; padding: 1px; }
.sb-battery::after { content:''; position: absolute; right: -3.5px; top: 3px; width: 2px; height: 4px; background: rgba(0,0,0,0.5); border-radius: 0 1px 1px 0; }
.sb-battery .level { width: 100%; height: 100%; background: #000; }

/* [6] 게시판 내부 스크롤 및 하단 메뉴바 */
.app-content { flex: 1; overflow-y: auto; background: #ffffff; scrollbar-width: none; }
.app-content::-webkit-scrollbar { display: none; }

.app-bottom-nav { 
    height: 75px; background: rgba(255,255,255,0.95); border-top: 1px solid #f2f2f2; 
    display: flex; justify-content: space-around; align-items: center; padding-bottom: 20px; 
}
.nav-item { font-size: 1.6rem; color: #cccccc; text-decoration: none; }
.nav-item.active { color: #000000; }
.home-indicator { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 130px; height: 5px; background: #000; border-radius: 10px; z-index: 100; }

/* [7] 기타 장식 요소 */
.side-btn { position: absolute; background: #444; border-radius: 3px 0 0 3px; z-index: -1; }
.mute { left: -3px; top: 110px; width: 3px; height: 25px; }
.volume-up { left: -3px; top: 165px; width: 3px; height: 50px; }
.volume-down { left: -3px; top: 230px; width: 3px; height: 50px; }
.power { right: -3px; top: 190px; width: 3px; height: 90px; border-radius: 0 3px 3px 0; }
.dynamic-island { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 120px; height: 34px; background: #000; border-radius: 20px; display: flex; align-items: center; justify-content: flex-end; padding-right: 12px; }
.di-camera { width: 10px; height: 10px; background: #111111; border-radius: 50%; border: 1px solid #1a1a1a; }
.antenna-band { position: absolute; background: rgba(0,0,0,0.6); z-index: 5; width: 4px; height: 3px; }
.top-left { top: 95px; left: 0; } .top-right { top: 95px; right: 0; } .bottom-left { bottom: 95px; left: 0; } .bottom-right { bottom: 95px; right: 0; }

.side-col { padding: 0 60px; }
.headline { font-size: 3.5rem; font-weight: 900; line-height: 1.1; letter-spacing: -2.5px; }
.desc-text { font-size: 1.1rem; line-height: 1.6; color: #444; margin: 25px 0; font-weight: 500; }
.btn-outline { display: inline-block; padding: 14px 30px; border: 1.5px solid #000; border-radius: 30px; font-weight: 600; text-decoration: none; color: #000; }

@keyframes slideUpPhone { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } }

@media screen and (max-width: 1024px) {
    .cash-grid { display: block; } .side-col, .cash-header { display: none; }
    .phone-frame { width: 100%; height: 100vh; border-radius: 0; padding: 0; box-shadow: none; animation: none; opacity: 1; transform: none; }
    .dynamic-island-area, .side-btn, .antenna-band, .status-bar-area { display: none; }
    .phone-screen { border: none; border-radius: 0; }
}