/* ===========================================
   Header (2026-10-31 개편) — components/header.html 전용
   · PC(993px~): 한 줄 슬림 바 + 전체 메뉴 펼침
   · 모바일(~992px): 로고 줄 + 가로 스크롤 메뉴바 — 둘 다 스크롤해도 화면 위에 고정
   색은 variables.css 의 토큰만 써서 라이트/다크가 자동으로 따라간다.
   =========================================== */
.site-header.gh { background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 900; }
html { scroll-padding-top: var(--gh-h, 0px); }
.gh-row { max-width: 1280px; margin: 0 auto; padding: 0 20px; height: 64px; display: flex; align-items: center; gap: 6px; position: relative; }

.gh-logo { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.7rem; color: var(--primary-green); text-decoration: none; letter-spacing: -.5px; display: inline-flex; align-items: center; gap: .16em; line-height: 1.1; flex: none; margin-right: 18px; }
.gh-logo:hover { color: var(--primary-green-dark); }
.gh-logo .main-logo-bot { width: .95em; height: .95em; }

/* PC 주요 메뉴 */
.gh-main { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.gh-main::-webkit-scrollbar, .gh-tabs::-webkit-scrollbar { display: none; }
.gh-l { flex: none; padding: 9px 13px; border-radius: var(--radius-sm); font-size: .96rem; font-weight: 700; color: var(--text-secondary); text-decoration: none; white-space: nowrap; transition: color .15s, background .15s; }
.gh-l:hover { color: var(--primary-green); background: rgba(40, 167, 69, .08); }
.gh-l.on { color: var(--text-primary); }
.gh-main.drag, .gh-tabs.drag { cursor: grabbing; user-select: none; }
.gh-main.drag a, .gh-tabs.drag a { pointer-events: none; }

@media (max-width: 1180px) and (min-width: 993px) { .gh-l { padding: 8px 9px; font-size: .9rem; } .gh-l .nav-new { margin-left: 3px; } .gh-logo { margin-right: 6px; } }

/* 오른쪽: 다크모드 · 로그인 · 전체 메뉴 */
.gh-rt { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
.gh-rt .btn-theme-toggle { margin-left: 0; width: 38px; height: 38px; }
.gh-login, .gh-all { height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border-color); background: var(--bg-primary); color: var(--text-primary); font-size: .88rem; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; text-decoration: none; cursor: pointer; white-space: nowrap; transition: border-color .15s, color .15s; }
.gh-login:hover, .gh-all:hover, .gh-all.open { border-color: var(--primary-green); color: var(--primary-green); }
.gh-login svg, .gh-all svg { width: 17px; height: 17px; flex: none; }
.gh-all .cv { width: 14px; height: 14px; transition: transform .2s; }
.gh-all.open .cv { transform: rotate(180deg); }
.gh-login.in { padding-left: 6px; }
.gh-av { width: 26px; height: 26px; border-radius: 50%; background: var(--bg-card); display: inline-grid; place-items: center; font-size: .95rem; }
.gh-login.in span:last-child { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }

/* PC 전체 메뉴 */
.gh-mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); box-shadow: var(--shadow-lg); z-index: 5; }
.gh-mega[hidden] { display: none; }
.gh-mega-in { max-width: 1280px; margin: 0 auto; padding: 20px 20px 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.gh-col { display: flex; flex-direction: column; }
.gh-col b { font-size: .76rem; font-weight: 800; color: var(--text-muted); letter-spacing: .02em; padding: 0 12px 6px; }
.gh-col a { padding: 9px 12px; border-radius: var(--radius-sm); font-size: .95rem; font-weight: 700; color: var(--text-primary); text-decoration: none; }
.gh-col a:hover { background: rgba(40, 167, 69, .08); color: var(--primary-green); }

/* 모바일 메뉴바 / 햄버거 / 드로어는 PC에서 숨김 */
.gh-tabs, .gh-drawer, .gh-ov, .menu-toggle { display: none; }

@media (max-width: 992px) {
    .gh-row { height: 56px; padding: 0 16px; justify-content: center; }
    .gh-logo { font-size: 1.7rem; margin: 0; }
    .gh-main, .gh-rt, .gh-mega { display: none !important; }
    .menu-toggle { display: flex; align-items: center; justify-content: center; right: 16px; padding: 8px 10px; background: var(--bg-primary); }
    .gh-tabs { display: flex; align-items: stretch; height: 46px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 0 6px; border-top: 1px solid var(--border-color); background: var(--bg-secondary); }
    .gh-t { flex: none; position: relative; padding: 0 12px; display: flex; align-items: center; font-size: .94rem; font-weight: 700; color: var(--text-secondary); text-decoration: none; white-space: nowrap; background: none; border: 0; cursor: pointer; font-family: inherit; }
    .gh-t.on { color: var(--text-primary); }
    .gh-t.on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--primary-green); }
    .gh-dot { position: absolute; top: 11px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: #ff3b5c; }

    /* 햄버거 드로어 */
    html.gh-lock { overflow: hidden; }
    .gh-ov { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 1290; }
    .gh-ov[hidden] { display: none; }
    .gh-drawer { display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 86vw); background: var(--bg-secondary); border-left: 1px solid var(--border-color); z-index: 1300; padding: 14px 16px 24px; overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%); visibility: hidden; transition: transform .25s ease, visibility 0s .25s; }
    .gh-drawer.open { transform: none; visibility: visible; transition: transform .25s ease; }
    .gh-dr-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
    .gh-dr-top span { display: inline-flex; align-items: center; gap: 8px; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.3rem; color: var(--primary-green); }
    .gh-dr-top img { border-radius: 50%; }
    .gh-dr-top button { width: 36px; height: 36px; border: 0; background: none; font-size: 1.9rem; line-height: 1; color: var(--text-secondary); cursor: pointer; }
    .gh-dr-me { display: flex; align-items: center; gap: 12px; padding: 12px; margin-bottom: 4px; border-radius: var(--radius-md); background: var(--bg-primary); border: 1px solid var(--border-color); text-decoration: none; color: var(--text-primary); }
    .gh-dr-me .ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-card); color: var(--text-secondary); font-size: 1.3rem; flex: none; }
    .gh-dr-me .ic svg { width: 22px; height: 22px; }
    .gh-dr-me b { display: block; font-size: .98rem; }
    .gh-dr-me small { color: var(--text-muted); font-size: .76rem; font-weight: 600; }
    .gh-drawer h4 { margin: 16px 4px 4px; font-size: .74rem; font-weight: 800; color: var(--text-muted); }
    .gh-drawer > a:not(.gh-dr-me) { padding: 12px 6px; border-top: 1px solid var(--border-color); color: var(--text-primary); font-size: .98rem; font-weight: 700; text-decoration: none; }
    .gh-drawer > a.sub { padding-left: 22px; font-size: .92rem; font-weight: 600; color: var(--text-secondary); }
    .gh-drawer h4 + a { border-top: 0 !important; }
    .gh-dr-th { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding: 14px 6px 0; border: 0; border-top: 1px solid var(--border-color); background: none; color: var(--text-primary); font-size: .98rem; font-weight: 700; cursor: pointer; font-family: inherit; }
    .gh-dr-th .sw { position: relative; width: 44px; height: 26px; border-radius: 999px; background: var(--border-color); transition: background .2s; }
    .gh-dr-th .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
    [data-theme="dark"] .gh-dr-th .sw { background: var(--primary-green); }
    [data-theme="dark"] .gh-dr-th .sw::after { transform: translateX(18px); }
}
@media (max-width: 480px) { .gh-row { padding: 0 12px; } .menu-toggle { right: 12px; } }

/* 미니게임 시트(모바일 메뉴바용) — 홈의 .hm-sheet 와 같은 모양. 홈 외 페이지에서도 쓰므로 여기에도 둔다 */
#ghSheet[hidden] { display: none; }
#ghSheet { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: flex-end; justify-content: center; }
#ghSheet .hm-sheet-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
#ghSheet .hm-sheet-box { position: relative; width: min(480px, 100%); display: flex; flex-direction: column; background: var(--bg-card); border-radius: 22px 22px 0 0; padding: 14px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 40px rgba(0, 0, 0, .3); }
#ghSheet .hm-sheet-box b { font-size: 1.02rem; font-weight: 900; color: var(--text-primary); padding: 2px 4px 8px; }
#ghSheet .hm-sheet-box a { padding: 14px 6px; border-top: 1px solid var(--border-color); color: var(--text-primary); font-weight: 700; text-decoration: none; }
#ghSheet .hm-sheet-box a:hover { color: var(--primary-green); }

/* ===== PC에서도 헤더가 고정되므로, 위에 붙어 다니는 다른 페이지 요소는 헤더 아래에 붙도록 ===== */
html .dbp-r { top: calc(var(--gh-h, 0px) + 12px); }
html #pane-sim > .gr-card:first-child { top: calc(var(--gh-h, 0px) + 16px); }
html .pd-grid > .pd-calc { top: calc(var(--gh-h, 0px) + 16px); }
html .trt-pitchbox { top: calc(var(--gh-h, 0px) + 12px); }

/* ===== 배경까지 차지하는 광고(스킨/테이크오버)가 뜰 때: 내용 패널(=body)의 위쪽 모서리를 둥글게 ===== */
/* 스킨 광고는 body 를 좁은 상자(가운데 정렬)로 만들고 뒤 배경에 그림을 깐다. 그 상자의 윗 모서리가 각져 보이므로 둥글게 한다.
   html.has-skin 은 header.html 안 스크립트가 붙인다(배경 이미지가 생기거나 body 가 화면보다 좁아지면). 주소 뒤에 ?skin=1 로 미리 볼 수 있다. */
@media (min-width: 993px) {
    html.has-skin body { border-radius: 18px 18px 0 0; }
    html.has-skin .site-header.gh { border-radius: 18px 18px 0 0; }
    html.has-skin .gh-mega { border-radius: 0 0 14px 14px; }
    html.has-skin .gh-l { padding: 8px 9px; font-size: .9rem; }
    html.has-skin .gh-l .nav-new { margin-left: 3px; }
    html.has-skin .gh-logo { margin-right: 6px; }
}
/* 고정이 안 먹는 환경(광고가 body 에 overflow 를 걸 때 등)에서 스크립트가 붙이는 보조 고정 */
.site-header.gh.gh-fx { position: fixed !important; top: 0; z-index: 900; }