/* ============================================================
   라이트 테마 보정 레이어

   common.css 와 페이지별 CSS 에는 다크 테마 시절의 하드코딩 색상이
   흩어져 있다(#fff 글자색, black 배경 등). 토큰만 뒤집어서는 다 잡히지
   않아, 로드 순서상 마지막에 오는 이 파일에서 남은 것들을 덮는다.

   원칙
   - 배경은 흰색/오프화이트, 전경은 near-black(#0f0f0f)
   - 강조색도 검정 계열. 기존 브랜드 그린(#129873)은 쓰지 않는다
   - 경계는 색이 아니라 헤어라인(1px)과 여백으로 만든다
   ============================================================ */

html,
body {
    background-color: var(--primary-bg);
    color: var(--primary-text);
}

/* ---------- 헤더 ---------- */
header {
    background-color: var(--primary-bg);
    box-shadow: none;
    border-bottom: 1px solid var(--line);
}

.header-container,
.mobile-header-container {
    background-color: var(--primary-bg);
}

.top-menu-item a {
    color: var(--secondary-text);
    font-weight: 500;
}

.top-menu-item a:hover {
    color: var(--primary-text);
}

/* 로고가 어두운 배경 전제로 만들어진 흰 글자 이미지라 반전이 필요하다 */
.logo img,
.sub-logo img {
    filter: invert(1);
}

/* ---------- 하단 고정 메뉴 ---------- */
#mobile-bottom-menu {
    background-color: var(--primary-bg);
    border-top: 1px solid var(--line);
    box-shadow: none;
}

/* 아이콘 PNG 는 어두운 배경 전제(미선택 회색 / 선택 흰색)라 그대로 두면
   선택 상태가 흰 배경에 묻힌다. 반전해서 밝기 관계를 뒤집는다. */
#mobile-bottom-menu .mobile-menu-item-image {
    filter: invert(1);
}

/* ---------- 언어 토글 ---------- */
.lang-toggle-btn {
    color: var(--secondary-text);
}

.lang-toggle-btn:hover,
.lang-toggle-btn.active {
    color: var(--primary-text);
}

.lang-toggle-sep {
    color: var(--line-strong);
}

/* ---------- 버튼 ---------- */
.google-login-btn {
    background-color: var(--primary-text);
    color: #ffffff;
    border: 1px solid var(--primary-text);
}

.google-login-btn:hover {
    background-color: #000000;
}

.cancel-btn,
.auto-adjust-btn,
.purchase-btn {
    background-color: var(--primary-text);
    color: #ffffff;
}

/* ---------- 모달 ---------- */
.modal-content,
.user-modal-content {
    background-color: var(--primary-bg);
    color: var(--primary-text);
    border: 1px solid var(--line);
    box-shadow: var(--box-shadow);
}

.user-modal-menu-item {
    color: var(--primary-text);
}

.user-modal-menu-item:hover {
    background-color: var(--muted-bg);
}

.user-modal-divider {
    border-color: var(--line);
}

.close-modal {
    color: var(--secondary-text);
}

.close-modal:hover {
    color: var(--primary-text);
}

/* ---------- 카드/패널 ---------- */
.credit-package {
    background-color: var(--muted-bg);
    border: 1px solid var(--line);
}

/* ---------- 코인 표시 ---------- */
.coin-display {
    background-color: var(--muted-bg);
    color: var(--primary-text);
    border: 1px solid var(--line);
}

/* ---------- 스크롤바 ---------- */
.image-list-scroll::-webkit-scrollbar-track {
    background: var(--muted-bg);
}

.image-list-scroll::-webkit-scrollbar-thumb {
    background: var(--line-strong);
}

/* ---------- 푸터 ---------- */
footer {
    background-color: var(--muted-bg);
    color: var(--secondary-text);
    border-top: 1px solid var(--line);
}

footer a {
    color: var(--secondary-text);
}

footer a:hover {
    color: var(--primary-text);
}

/* ---------- 타이포 ---------- */
h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.02em;
    font-weight: 700;
}

/* ---------- 헤더 레이아웃 ----------
   메뉴가 좁은 폭에서 두 줄로 접히며 로고/로그인과 겹쳤다.
   줄바꿈을 막고 여백을 유동적으로 줄여 한 줄을 유지한다. */
.header-container {
    gap: 12px;
    flex-wrap: nowrap;
}

.top-menu-container {
    flex-wrap: nowrap;
    gap: clamp(10px, 1.6vw, 30px);
    min-width: 0;
}

.top-menu-item a {
    white-space: nowrap;
    font-size: clamp(12px, 1.05vw, 15px);
}

.header-container .logo img {
    width: clamp(120px, 13vw, 200px) !important;
    height: auto;
}

.google-login-btn {
    white-space: nowrap;
    font-size: clamp(11px, 0.95vw, 14px);
}

/* 데스크톱 메뉴는 768px 아래에서만 숨는다. 그래서 769px~1150px 구간에서는
   메뉴 5개 + 로그인 버튼이 한 줄에 다 못 들어가 서로 겹쳐 보였다
   (nowrap 이라 넘친 만큼 이웃 위로 그려짐 — 929px 에서 메뉴가 71~139px 초과).
   이 구간에서만 로고·메뉴·버튼을 함께 줄여 한 줄에 들어가게 한다. */
@media (min-width: 769px) and (max-width: 1150px) {
    .header-container {
        padding: 12px 14px;
        gap: 8px;
    }

    .header-container .logo img {
        width: clamp(96px, 10.5vw, 132px) !important;
    }

    .top-menu-container {
        gap: clamp(6px, 1.15vw, 14px);
    }

    .top-menu-item a {
        font-size: clamp(11px, 1.2vw, 13px);
    }

    .user-section {
        gap: 8px;
    }

    /* 이 구간에선 로그인 버튼을 아이콘만 남긴다 — 라벨("Sign in with Google")이
       150px 가까이 차지해서, 그걸 접는 게 메뉴 글자를 더 줄이는 것보다 낫다.
       데스크톱 헤더의 버튼에만 적용(모바일 헤더는 이 구간에서 안 보인다). */
    .header-container .google-login-btn {
        font-size: 0;
        padding: 8px 10px;
    }

    .header-container .google-login-btn .gl-label {
        display: none;
    }

    .header-container .google-login-btn img {
        width: 18px;
        height: 18px;
        margin: 0;
    }
}