/* ========== Color Tokens ========== */
:root{
    --sv-bg: #262624;   /* 전체 배경 */
    --sv-top: #cc7c5e;  /* 상단바(오렌지) */
    --sv-hover-bg: #2f2f2c; /* 목록 항목 호버 배경 (262624보다 약간 밝게) */
}

/* ========== Base ========== */
html, body { height: 100%; }
html { font-size: 16px; } /* 필요시 17~18로 튜닝 */
.sv-content img { max-width: 100%; height: auto; }

body{
    background-color: var(--sv-bg);
    color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.app-container{ max-width: 720px; }

/* ========== Topbar ========== */
.sv-topbar{
    background-color: var(--sv-top);
    color: #fff;
}
.sv-topbar a{
    color: #fff !important;
    text-decoration: none;
}

/* ========== LIST 전체 다크 레이아웃 ========== */
/* 이 컨테이너 안에서는 모든 카드/헤더/바디/풋터가 #262624 */
.sv-full-dark,
.sv-full-dark .card,
.sv-full-dark .card-header,
.sv-full-dark .card-body,
.sv-full-dark .card-footer{
    background-color: var(--sv-bg) !important;   /* #262624 */
    color: #fff !important;
    border-color: rgba(255,255,255,.12) !important;
}
.sv-full-dark .card{ border: 1px solid rgba(255,255,255,.12); border-radius: .5rem; }
.sv-full-dark .card-header{ border-bottom: 1px solid rgba(255,255,255,.12); }
.sv-full-dark .card-footer{ border-top: 1px solid rgba(255,255,255,.12); }

/* ========== Dark list (게시글 목록) ========== */
/* 리스트 아이템 기본 (패딩을 li가 아니라 a에 줍니다) */
.sv-dark-list .list-group-item{
    padding: 0 !important; /* ✅ li 패딩 제거 */
    background-color: transparent !important;
    border-color: rgba(255,255,255,.12) !important;
    color: #fff !important;
}

/* 앵커가 전체 면적을 차지하도록 */
.sv-dark-list .list-group-item > a{
    display: block;                /* ✅ 전체 클릭/호버 영역 */
    width: 100%;
    padding: 12px 16px;            /* ✅ 패딩은 a에 */
    color: #fff !important;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

/* 항목 호버: 배경을 밝게, 텍스트 오렌지 */
.sv-dark-list .list-group-item > a:hover{
    background-color: var(--sv-hover-bg) !important; /* #2f2f2c */
    color: var(--sv-top) !important;                 /* #cc7c5e */
}

/* 내부 텍스트/메타 색상 상속 보정 */
.sv-dark-list .list-group-item > a:hover .post-meta{
    color: rgba(255,255,255,.85) !important;
}
.sv-dark-list .list-group-item > a:hover h3{
    color: var(--sv-top) !important;
}

/* (선택) 모바일 탭 시도에도 깔끔하게 */
.sv-dark-list .list-group-item > a:active{
    background-color: var(--sv-hover-bg) !important;
}

/* 메타/좋아요/배지 */
.sv-dark-list .post-meta{ color: rgba(255,255,255,.7) !important; transition: color .15s ease; }
.sv-dark-list .post-like{ color: #fff !important; transition: color .15s ease; }
.sv-dark-list .badge{
    background-color: rgba(255,255,255,.12) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.24) !important;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* ✅ 항목 전체가 호버되면 메타와 좋아요도 약간 밝게 */
.sv-dark-list .list-group-item:hover .post-meta{
    color: rgba(255,255,255,.85) !important;
}

/* 페이징(다크 톤) */
.sv-full-dark .pagination .page-link{
    background: transparent !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.24) !important;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.sv-full-dark .pagination .page-link:hover{
    background-color: var(--sv-hover-bg) !important;
    color: var(--sv-top) !important;
    border-color: rgba(255,255,255,.35) !important;
}
.sv-full-dark .pagination .page-item.disabled .page-link{
    color: rgba(255,255,255,.4) !important;
    border-color: rgba(255,255,255,.12) !important;
}

/* 버튼 대비 */
.sv-full-dark .btn-outline-secondary{
    color: #fff !important;
    border-color: rgba(255,255,255,.5) !important;
}
.sv-full-dark .btn-outline-secondary:hover{
    background: var(--sv-hover-bg) !important;
    border-color: rgba(255,255,255,.7) !important;
}

/* 로고 크기 (모바일 기준) */
.sv-logo{
    height: 24px;      /* 필요하면 28~32로 조정 */
    width: auto;
    display: block;
}

.sv-body{
    background-color: var(--sv-bg);
    color: #fff;
}

/* Footer */
.sv-footer{
    background-color: var(--sv-bg);
    border-top: 1px solid rgba(255,255,255,.12);
}

.sv-footer-link{
    color: #fff;
    text-decoration: none;
}
.sv-footer-link:hover{
    color: var(--sv-top);
    text-decoration: none;
}

/* 로그인/회원가입 공통 레이아웃 */
.sv-auth-wrap{
    /* 폼이 화면 중앙 근처에 오고, 푸터와 떨어져 보이도록 */
    min-height: 70vh;              /* 내용이 적어도 적당히 중앙 근처 */
    padding: 32px 0 56px;          /* 상/하 여백(모바일) */
    display: flex;
    align-items: center;           /* 세로 가운데 정렬 느낌 */
}

@media (min-width: 992px){
    .sv-auth-wrap{
        padding: 96px 0 128px;       /* 데스크톱에서 여유 있게 */
        min-height: 75vh;
    }
}

/* 카드 최대 폭 통일 */
.sv-auth-card{
    max-width: 520px;
}

/* 카드 시각적 분리 (이미 있다면 생략 가능) */
.sv-auth-card .card{
    background: transparent;
    border-color: rgba(255,255,255,.12);
}