/* 라이트/다크 테마 토글 버튼 */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: var(--glass-bg-light);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.theme-toggle-btn:hover {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
    background: var(--bg-hover);
}
.theme-toggle-btn svg { display: block; }
/* 라이트 모드: 달 아이콘(다크로 전환) 노출, 해 숨김 */
.theme-toggle-btn .theme-icon-sun { display: none; }
.theme-toggle-btn .theme-icon-moon { display: block; }
/* 다크 모드: 해 아이콘(라이트로 전환) 노출, 달 숨김 */
[data-theme="dark"] .theme-toggle-btn .theme-icon-sun { display: block; }
[data-theme="dark"] .theme-toggle-btn .theme-icon-moon { display: none; }
@media (max-width: 768px) {
    .theme-toggle-btn { width: 34px; height: 34px; }
}

/* [온카판 navbar] 로고(좌)+메뉴+토글(우) 한 줄, 그린 배경, 상단 고정 */
.header { background: #4a9e72; padding: 0; position: sticky; top: 0; z-index: 1100; border-bottom: none; }
.header .container { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px; min-height: 100px; }
/* [2026-08-13] 로고 가운데 — 좌/우 nav 가 남는 폭을 반씩 먹고 로고를 안쪽으로 민다.
   모바일(≤1100px)에선 두 nav 가 display:none 이라 space-between 이 로고(좌)+햄버거(우) 로 자연히 복귀한다. */
.header .logo { flex: 0 0 auto; margin: 0; }
/* [2026-08-13] 로고~메뉴 간격 최소화. 이미지엔 투명여백이 남아있지 않으므로(v5 에서 제거) 여기서만 줄일 수 있다.
   로고에 '맞닿는 항목' 두 개의 안쪽 padding 만 줄인다 — 다른 항목 간격은 그대로 둔다. */
.header .header-nav-left  .nav-item:last-child  > a { padding-right: 4px; }
.header .header-nav-right .nav-item:first-child > a { padding-left: 4px; }
/* [2026-08-13] 왼쪽 끝선부터 채운다. flex:1 1 0 를 양쪽에 주면 좌/우가 정확히 반반이라
   로고는 어떤 분배에서도 가운데에 고정되고, 남는 여백은 오른쪽 끝에 모인다. */
.header .header-nav-left  { flex: 1 1 0; justify-content: flex-start; }
/* [2026-08-13] 왼쪽은 space-between 으로 '끝선~로고' 를 항상 꽉 채운다.
   고정 gap 을 쓰면 화면 폭이 바뀔 때마다 로고 앞 여백이 생겼다 사라진다 — 이건 폭과 무관하게 항상 붙는다. */
.header .header-nav-left .nav-menu { width: 100%; justify-content: space-between; }
/* 오른쪽은 로고에 붙여 시작(= 좌측과 동일한 간격) + 항목 사이 여백만 좌측과 비슷하게 준다 */
.header .header-nav-right .nav-menu { gap: 16px; }
.header .header-nav-right { flex: 1 1 0; justify-content: flex-start; }
.header .logo-img { height: 80px; width: auto; }  /* [2026-08-13] v5(투명여백 제거본) 기준. 헤더 102px 이라 위아래 2px 만 남는다 = 닿을랑 말랑 */
.header-main-nav { display: flex; }
.header-main-nav .nav-menu { display: flex; flex-wrap: nowrap; gap: 0; list-style: none; margin: 0; padding: 0; }
.header-main-nav .nav-item { position: relative; }
.header-main-nav .nav-item > a { display: flex; align-items: center; padding: 17px clamp(6px, 0.85vw, 14px); color: #ffffff; font-weight: 600; font-size: 16.5px; text-decoration: none; white-space: nowrap; transition: background 0.15s; }
.header-main-nav .nav-item > a:hover, .header-main-nav .nav-item > a.active { background: rgba(255,255,255,0.18); }
.header-main-nav .nav-item.has-dropdown > a::after { content: '▾'; margin-left: 3px; font-size: 11px; opacity: 0.85; }
.header-main-nav .dropdown-menu { position: absolute; top: 100%; left: 0; min-width: 180px; background: #fcfcfc; border: 1px solid #dde3e9; border-top: none; border-radius: 0 0 8px 8px; box-shadow: 0 8px 22px rgba(0,0,0,0.15); display: none; z-index: 1100; padding: 4px 0; }
.header-main-nav .nav-item.has-dropdown:hover .dropdown-menu { display: block; }
.header-main-nav .dropdown-menu a { display: block; padding: 9px 16px; color: #555555; font-size: 13px; text-decoration: none; white-space: nowrap; transition: color .12s, background .12s; }
.header-main-nav .dropdown-menu a:hover { background: rgba(30,164,89,0.08); color: #1ea459; }
.header-main-nav .dropdown-divider { height: 1px; background: #dde3e9; margin: 4px 0; }
.header-main-nav .dropdown-category { padding: 6px 16px 3px; font-size: 11px; color: #888888; font-weight: 700; }
.header-main-nav .dropdown-highlight { color: #e52955; font-weight: 700; }
/* .header-right 제거됨 — 테마토글·랜덤로또는 상단 잭팟바(.sjb-tools)로 이동 (2026-08-13) */
.header .theme-toggle-btn { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.35); color: #ffffff; }
.header .theme-toggle-btn:hover { background: rgba(255,255,255,0.3); color: #ffffff; border-color: #ffffff; }
/* 랜덤로또 버튼 (네비 맨 오른쪽) — 라이트/다크 토글과 동일한 사각 펜던트 버튼, 안에 이미지만 */
.header .header-lotto-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: var(--radius-md);
    background: rgba(255,255,255,0.18);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.header .header-lotto-btn:hover { background: rgba(255,255,255,0.3); border-color: #ffffff; }
.header .header-lotto-icon { width: 28px; height: 28px; object-fit: contain; display: block; }
/* 토글 버튼과 동일하게 아이콘만 노출 — 텍스트 숨김 */
.header .header-lotto-text { display: none; }
@media (max-width: 768px) {
    .header .header-lotto-btn { width: 34px; height: 34px; }
}
@media (max-width: 1280px) {
    .header-main-nav .nav-item > a { padding: 17px 9px; font-size: 15px; }
}
@media (max-width: 1100px) {
    .header-main-nav { display: none; }
    .header .mobile-menu-btn { display: flex; }
}
/* 다크모드에서도 navbar는 온카판 그린 유지 */
[data-theme="dark"] .header { background: #4a9e72; }
/* 다크모드: 네비 드롭다운 메뉴 — 하드코딩 흰색(#fcfcfc)이 다크에서 흰 박스로 뜨던 것 보정.
   전역 catch-all 접미사([class$=…])에 -menu/-divider 가 없어 자동 커버가 안 되던 케이스. */
[data-theme="dark"] .header-main-nav .dropdown-menu { background: var(--bg-secondary); border-color: var(--border-dark); box-shadow: 0 8px 22px rgba(0,0,0,0.5); }
[data-theme="dark"] .header-main-nav .dropdown-menu a { color: var(--text-secondary); }
[data-theme="dark"] .header-main-nav .dropdown-menu a:hover { background: rgba(30,164,89,0.16); color: #5eead4; }
[data-theme="dark"] .header-main-nav .dropdown-divider { background: var(--border-dark); }
[data-theme="dark"] .header-main-nav .dropdown-category { color: var(--text-muted); }
/* 햄버거 버튼 — 그린 배경에서 흰색으로 */
.header .mobile-menu-btn span { background: #ffffff; }