/*
* [모듈명]: 설정 및 개인정보 디자인 시스템 (네비게이션 허브형)
* [파일명]: sandbox_settings.css
* [역할]: '블라인드' 앱 감성의 Black & White 리스크형 메뉴 디자인을 정의합니다.
*/

:root {
    --bg-black: #000000;
    --card-dark: #111111;
    --border-gray: #222222;
    --text-white: #FFFFFF;
    --text-gray: #888888;
    --accent-blue: #1D9BF0;
    --safe-bottom: env(safe-area-inset-bottom);
}

/* [Target Environment] 사파리 호환 및 터치 방어 */
html,
body {
    height: 100dvh;
    background-color: var(--bg-black);
    color: var(--text-white);
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    overscroll-behavior: none;
    -webkit-font-smoothing: antialiased;
}

.settings-container {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    background: var(--bg-black);
}

/* [1] 헤더 스타일 */
.settings-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    height: 56px;
    border-bottom: 1px solid var(--border-gray);
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.btn-back {
    background: none;
    border: none;
    color: var(--text-white);
    padding: 8px;
    margin-right: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: opacity 0.2s;
}

.btn-back:active {
    opacity: 0.5;
}

.header-title {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

/* [2] 메인 컨텐츠 영역 */
.settings-content {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0 120px 0;
    /* 좌우 여백을 아이템 내부로 이동 */
    -webkit-overflow-scrolling: touch;
}

.settings-group {
    margin-bottom: 24px;
}

.group-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-gray);
    margin: 16px 16px 8px 16px;
}

/* [3] 리스트형 메뉴 아이템 (Link-Box) */
.menu-list {
    background: var(--bg-black);
}

.menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 16px;
    border-bottom: 1px solid var(--border-gray);
    text-decoration: none;
    color: inherit;
    transition: background 0.2s;
}

.menu-item:active {
    background: var(--card-dark);
}

.item-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.item-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-white);
}

.item-desc {
    font-size: 13px;
    color: var(--text-gray);
    font-weight: 400;
}

.item-right {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-gray);
}

.current-value {
    font-size: 14px;
    color: var(--accent-blue);
    font-weight: 500;
}

.chevron {
    font-size: 20px !important;
    opacity: 0.4;
}

/* Safari 스크롤바 숨기기 */
::-webkit-scrollbar {
    display: none;
}