/** ⛳ GOLF STORY 4.0 - 통합 디자인 표준 (복구본) **/

:root { 
    --mint: #2ecc71;       /* 표준 민트 */
    --bg: #121212;         /* 🚩 바탕색: 블랙(#000)이 아닌 다크 그레이로 복구 */
    --card: #25282b;       /* 🚩 박스색: 기존의 밝은 톤으로 복구 */
    --line: #36393d;       /* 테두리: 박스 톤에 맞춘 밝은 그레이 */
}

/* [1] 전역 초기화 및 기종별 자동 대응 */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { 
    margin: 0; padding: 0; width: 100%; height: 100%; 
    overflow: hidden; 
    background-color: #000; /* 바깥쪽 완전 여백만 블랙 */
    display: flex; justify-content: center; 
}
.app-container { 
    width: 100vw; height: 100vh; max-width: 500px; 
    background-color: var(--bg); /* 🚩 앱 본체는 다크 그레이 적용 */
    position: relative; 
    display: flex; flex-direction: column; overflow: hidden; 
}

/* [4] 기타 공통 요소 */
.header-title { 
    font-size: 1.2rem;      /* 제목 크기 고정 */
    font-weight: 800; 
    color: var(--mint);    /* 밝기 줄인 민트 적용 */
}
.section-label { font-size: 0.75rem; color: #42cc7a; font-weight: 700; margin-top: 8px; margin-left: 4px; letter-spacing: 1px; }
.btn-main-back { 
    cursor: pointer; 
    font-size: 24px; 
    color: var(--mint); 
    background: none; 
    border: none; 
    display: inline-block !important; /* 화살표가 한 줄 다 안 차지하게 */
    margin-bottom: 10px;             /* ⛳ 화살표와 제목 사이 간격 */
}
/* [2] 공통 UI 요소 (제목, 버튼 등) */
/* [2] 공통 UI 요소 - 이 부분의 flex를 block으로 수정 */
.header { 
    padding: 60px 20px 10px; 
    display: block !important;  /* ⛳ flex를 block으로 바꿔야 제목이 아래로 내려갑니다. */
}
.header-title { font-size: 1.2rem; font-weight: 800; color: var(--mint); }
.section-label { font-size: 0.75rem; color: #42cc7a; font-weight: 700; margin: 25px 0 10px 10px; letter-spacing: 1px; }
/* ✅ 수정 후: 옆으로 붙게 만드는 flex를 block으로 변경 */
.btn-main-back { cursor: pointer; font-size: 24px; color: var(--mint); background: none; border: none; display: block !important; }