/*
Theme Name: GameGuideCenter Poka Child
Theme URI: https://gameguidecenter.com/
Description: PokaTheme 기반 GameGuideCenter 블랙·골드 스포츠 가이드 홈페이지용 차일드 테마입니다.
Author: GameGuideCenter
Template: pokatheme
Version: 1.0.0
Text Domain: gameguidecenter
*/

/* 실제 홈페이지 스타일은 assets/css/gameguidecenter-home.css에 분리되어 있습니다. */
/* =========================================================
   GameGuideCenter
   PokaTheme 전역 헤더 · 로고 · 브레드크럼
========================================================= */

/* ---------------------------------------------------------
   1. 상단 헤더 배경
--------------------------------------------------------- */

body .site-header,
body .site-header--style1,
body .site-header--style2,
body .site-header .header-top,
body .site-header .head-main {
    background-color: #080808 !important;
    background-image: none !important;
}

/* 헤더 아래쪽 경계선 */
body .site-header {
    border-bottom: 1px solid #2d2415 !important;
    box-shadow: none !important;
}


/* ---------------------------------------------------------
   2. 로고 영역 크기
--------------------------------------------------------- */

body .site-header .header-logo,
body .site-header .site-logo,
body .site-header #logo {
    width: auto !important;
    max-width: none !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

/* 데스크톱 로고 */
body .site-header .header-logo img,
body .site-header .site-logo img,
body .site-header #logo img,
body .site-header .custom-logo-link img,
body .site-header img.custom-logo,
body .header_style_2 .site-logo img,
body .site-header--style2 .header-logo img {
    display: block !important;

    width: 330px !important;
    max-width: 330px !important;

    height: auto !important;
    max-height: 82px !important;

    object-fit: contain !important;
}


/* ---------------------------------------------------------
   3. 헤더 내부 높이와 정렬
--------------------------------------------------------- */

body .site-header .container {
    min-height: 112px;
}

body .site-header .header-logo,
body .site-header .site-logo,
body .site-header #logo,
body .site-header .poka-search {
    align-self: center;
}


/* ---------------------------------------------------------
   4. 검색 버튼
--------------------------------------------------------- */

body .site-header .poka-search {
    background-color: #151515 !important;
    border: 1px solid #332918 !important;
    color: #d9ad4a !important;
    box-shadow: none !important;
}

body .site-header .poka-search:hover {
    background-color: #211b10 !important;
    border-color: #d9ad4a !important;
}

/* 아이콘 종류별 대응 */
body .site-header .poka-search i,
body .site-header .poka-search i::before {
    color: #d9ad4a !important;
}

body .site-header .poka-search svg {
    color: #d9ad4a !important;
    fill: none !important;
    stroke: #d9ad4a !important;
}

/* =========================================================
   GameGuideCenter
   PokaTheme 헤더 주 메뉴 영역
   홈페이지 / 게임가이드 표시 부분
========================================================= */

/* 메뉴 전체 띠 */
html body .head-menu {
	margin: 0 !important;
	padding: 0 !important;

	background-color: #11100e !important;
	background-image: none !important;

	border-top: 1px solid #2d2415 !important;
	border-bottom: 1px solid #2d2415 !important;

	box-shadow: none !important;
}


/* 데스크톱 */
@media (min-width: 992px) {

	/* 현재 개발자도구에서 선택한 1210 × 112 container */
	html body .head-menu .container {
		width: 100% !important;
		max-width: 1210px !important;

		min-height: 64px !important;
		height: 64px !important;

		margin: 0 auto !important;
		padding: 0 15px !important;

		display: flex !important;
		align-items: center !important;
		justify-content: center !important;

		background-color: transparent !important;
		background-image: none !important;

		border: 0 !important;
		box-shadow: none !important;
	}


	/* 메뉴 목록 */
	html body .head-menu .header-menu {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: center !important;

		min-height: 64px !important;
		height: 64px !important;

		margin: 0 !important;
		padding: 0 !important;

		background-color: transparent !important;
		background-image: none !important;

		list-style: none !important;
	}


	/* 각 메뉴 항목 */
	html body .head-menu .header-menu > li {
		display: flex !important;
		align-items: center !important;

		height: 64px !important;

		margin: 0 !important;
		padding: 0 !important;

		background: transparent !important;
	}


	/* 일반 메뉴 글자 */
	html body .head-menu .header-menu > li > a {
		display: flex !important;
		align-items: center !important;

		height: 64px !important;

		padding: 0 15px !important;

		color: #f3eee5 !important;
		background: transparent !important;

		font-size: 16px !important;
		font-weight: 600 !important;
		line-height: 1 !important;

		text-decoration: none !important;
	}


	/* 현재 선택된 메뉴 */
	html body .head-menu .header-menu > li.current-menu-item > a,
	html body .head-menu .header-menu > li.current_page_item > a,
	html body .head-menu .header-menu > li.current-menu-ancestor > a {
		color: #d9ad4a !important;
	}


	/* 메뉴 마우스 오버 */
	html body .head-menu .header-menu > li > a:hover,
	html body .head-menu .header-menu > li > a:focus {
		color: #f1cf7a !important;
		background: transparent !important;
	}


	/* 메뉴 사이의 / 슬래시 */
	html body .head-menu .header-menu > li::before {
		color: #6d6558 !important;
		opacity: 1 !important;
	}


	/* 첫 메뉴 앞에는 슬래시가 나타나지 않도록 */
	html body .head-menu .header-menu > li:first-child::before {
		display: none !important;
	}
}


/* 드롭다운 메뉴가 생겼을 때 */
html body .site-header--style2 .header-menu .sub-menu,
html body .head-menu .header-menu .sub-menu {
	background-color: #11100e !important;
	background-image: none !important;

	border: 1px solid #332918 !important;
	box-shadow: 0 15px 35px rgb(0 0 0 / 35%) !important;
}

html body .head-menu .header-menu .sub-menu li a {
	color: #e8e0d4 !important;
	background: transparent !important;
}

html body .head-menu .header-menu .sub-menu li a:hover {
	color: #f1cf7a !important;
	background-color: #1b170f !important;
}


/* 모바일 메뉴 영역 배경 */
@media (max-width: 991px) {

	html body .head-menu {
		background-color: #11100e !important;
		background-image: none !important;
	}

	html body .head-menu .container {
		background-color: transparent !important;
		background-image: none !important;
	}
}
/* =========================================================
   GameGuideCenter
   PokaTheme Header Style 1 하단 메뉴 영역
   실제 구조:
   .header-bottom > .container > .header-bottom-inner
========================================================= */


/* ---------------------------------------------------------
   데스크톱 메뉴 전체 띠
--------------------------------------------------------- */

@media (min-width: 992px) {

    /* 회색 배경을 만드는 실제 바깥 영역 */
    html body header.site-header.site-header--style1 > .header-bottom {
        box-sizing: border-box !important;

        width: 100% !important;
        min-height: 64px !important;
        height: 64px !important;

        margin: 0 !important;
        padding: 0 !important;

        background-color: #11100e !important;
        background-image: none !important;

        border-top: 1px solid #2d2415 !important;
        border-bottom: 1px solid #2d2415 !important;

        box-shadow: none !important;
    }


    /* 개발자도구에서 선택한 1210 × 112 div.container */
    html body header.site-header.site-header--style1
    > .header-bottom
    > .container {
        box-sizing: border-box !important;

        width: 100% !important;
        max-width: 1210px !important;

        min-height: 64px !important;
        height: 64px !important;

        margin: 0 auto !important;
        padding: 0 15px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        background-color: transparent !important;
        background-image: none !important;

        border: 0 !important;
        box-shadow: none !important;
    }


    /* 실제 메뉴가 들어 있는 내부 래퍼 */
    html body header.site-header.site-header--style1
    > .header-bottom
    > .container
    > .header-bottom-inner {
        box-sizing: border-box !important;

        width: 100% !important;
        max-width: 100% !important;

        min-height: 64px !important;
        height: 64px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        background-color: transparent !important;
        background-image: none !important;

        border: 0 !important;
        box-shadow: none !important;
    }


    /* 메뉴를 감싸는 nav 또는 div */
    html body header.site-header.site-header--style1
    .header-bottom-inner > nav,

    html body header.site-header.site-header--style1
    .header-bottom-inner > div {
        min-height: 64px !important;
        height: 64px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        background: transparent !important;
    }


    /* 최상위 메뉴 목록 */
    html body header.site-header.site-header--style1
    .header-bottom-inner > ul,

    html body header.site-header.site-header--style1
    .header-bottom-inner > nav > ul,

    html body header.site-header.site-header--style1
    .header-bottom-inner > div > ul {
        min-height: 64px !important;
        height: 64px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        list-style: none !important;
        background: transparent !important;
    }


    /* 최상위 메뉴 항목 */
    html body header.site-header.site-header--style1
    .header-bottom-inner > ul > li,

    html body header.site-header.site-header--style1
    .header-bottom-inner > nav > ul > li,

    html body header.site-header.site-header--style1
    .header-bottom-inner > div > ul > li {
        min-height: 64px !important;
        height: 64px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;

        background: transparent !important;
    }


    /* 최상위 메뉴 링크 */
    html body header.site-header.site-header--style1
    .header-bottom-inner > ul > li > a,

    html body header.site-header.site-header--style1
    .header-bottom-inner > nav > ul > li > a,

    html body header.site-header.site-header--style1
    .header-bottom-inner > div > ul > li > a {
        box-sizing: border-box !important;

        min-height: 64px !important;
        height: 64px !important;

        padding: 0 16px !important;

        display: flex !important;
        align-items: center !important;

        color: #f3eee5 !important;
        background: transparent !important;

        font-size: 16px !important;
        font-weight: 600 !important;
        line-height: 1 !important;

        text-decoration: none !important;
    }


    /* 현재 선택된 메뉴 */
    html body header.site-header.site-header--style1
    .header-bottom-inner li.current-menu-item > a,

    html body header.site-header.site-header--style1
    .header-bottom-inner li.current_page_item > a,

    html body header.site-header.site-header--style1
    .header-bottom-inner li.current-menu-ancestor > a {
        color: #d9ad4a !important;
    }


    /* 메뉴 마우스 오버 */
    html body header.site-header.site-header--style1
    .header-bottom-inner li > a:hover,

    html body header.site-header.site-header--style1
    .header-bottom-inner li > a:focus {
        color: #f1cf7a !important;
        background: transparent !important;
    }


    /* 메뉴 사이의 슬래시 */
    html body header.site-header.site-header--style1
    .header-bottom-inner > ul > li::before,

    html body header.site-header.site-header--style1
    .header-bottom-inner > nav > ul > li::before,

    html body header.site-header.site-header--style1
    .header-bottom-inner > div > ul > li::before {
        color: #6d6558 !important;
        opacity: 1 !important;
    }
}


/* ---------------------------------------------------------
   가상 요소나 내부 요소에 남은 회색 배경 제거
--------------------------------------------------------- */

html body header.site-header.site-header--style1 > .header-bottom::before,
html body header.site-header.site-header--style1 > .header-bottom::after,
html body header.site-header.site-header--style1 > .header-bottom > .container::before,
html body header.site-header.site-header--style1 > .header-bottom > .container::after,
html body header.site-header.site-header--style1 .header-bottom-inner::before,
html body header.site-header.site-header--style1 .header-bottom-inner::after {
    background-color: transparent !important;
    background-image: none !important;
}


/* ---------------------------------------------------------
   드롭다운 메뉴
--------------------------------------------------------- */

html body header.site-header.site-header--style1
.header-bottom-inner .sub-menu {
    background-color: #11100e !important;
    background-image: none !important;

    border: 1px solid #332918 !important;
    box-shadow: 0 15px 35px rgb(0 0 0 / 35%) !important;
}

html body header.site-header.site-header--style1
.header-bottom-inner .sub-menu li a {
    color: #e8e0d4 !important;
    background-color: transparent !important;
}

html body header.site-header.site-header--style1
.header-bottom-inner .sub-menu li a:hover {
    color: #f1cf7a !important;
    background-color: #1b170f !important;
}


/* ---------------------------------------------------------
   모바일 영역 배경
--------------------------------------------------------- */

@media (max-width: 991px) {

    html body header.site-header.site-header--style1 > .header-bottom {
        background-color: #11100e !important;
        background-image: none !important;

        border-top: 1px solid #2d2415 !important;
        border-bottom: 1px solid #2d2415 !important;
    }

    html body header.site-header.site-header--style1
    > .header-bottom
    > .container,

    html body header.site-header.site-header--style1
    .header-bottom-inner {
        background-color: transparent !important;
        background-image: none !important;
    }
}
/* =========================================================
   GameGuideCenter 상단 로고
   배너처럼 꽉 차 보이는 확대 버전
========================================================= */

/* 데스크톱 */
@media (min-width: 992px) {

    /* 상단 로고 영역 높이 */
    html body header.site-header.site-header--style1
    > .header-top {
        min-height: 180px !important;
        height: 180px !important;

        margin: 0 !important;
        padding: 0 !important;

        background-color: #080808 !important;
        background-image: none !important;
    }

    html body header.site-header.site-header--style1
    > .header-top
    > .container,

    html body header.site-header.site-header--style1
    .header-top-inner {
        position: relative !important;

        min-height: 180px !important;
        height: 180px !important;

        margin: 0 auto !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;

        display: flex !important;
        align-items: center !important;
    }

    /* 로고를 감싸는 영역 제한 제거 */
    html body header.site-header.site-header--style1
    .header-logo,

    html body header.site-header.site-header--style1
    .site-logo,

    html body header.site-header.site-header--style1
    #logo,

    html body header.site-header.site-header--style1
    .custom-logo-link {
        width: auto !important;
        max-width: none !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 실제 로고 이미지 */
    html body header.site-header.site-header--style1
    .header-logo img,

    html body header.site-header.site-header--style1
    .site-logo img,

    html body header.site-header.site-header--style1
    #logo img,

    html body header.site-header.site-header--style1
    .custom-logo-link img,

    html body header.site-header.site-header--style1
    img.custom-logo {
        width: clamp(520px, 38vw, 620px) !important;
        max-width: 620px !important;

        height: auto !important;
        max-height: 145px !important;

        margin: 0 auto !important;

        display: block !important;
        object-fit: contain !important;
    }
}


/* 태블릿 */
@media (min-width: 576px) and (max-width: 991px) {

    html body header.site-header.site-header--style1
    > .header-top,

    html body header.site-header.site-header--style1
    > .header-top
    > .container,

    html body header.site-header.site-header--style1
    .header-top-inner {
        min-height: 135px !important;
        height: 135px !important;
    }

    html body header.site-header.site-header--style1
    .header-logo img,

    html body header.site-header.site-header--style1
    .site-logo img,

    html body header.site-header.site-header--style1
    #logo img,

    html body header.site-header.site-header--style1
    .custom-logo-link img,

    html body header.site-header.site-header--style1
    img.custom-logo {
        width: 430px !important;
        max-width: calc(100vw - 110px) !important;

        height: auto !important;
        max-height: 105px !important;

        object-fit: contain !important;
    }
}


/* 모바일 */
@media (max-width: 575px) {

    html body header.site-header.site-header--style1
    > .header-top,

    html body header.site-header.site-header--style1
    > .header-top
    > .container,

    html body header.site-header.site-header--style1
    .header-top-inner {
        min-height: 92px !important;
        height: 92px !important;
    }

    html body header.site-header.site-header--style1
    .header-logo img,

    html body header.site-header.site-header--style1
    .site-logo img,

    html body header.site-header.site-header--style1
    #logo img,

    html body header.site-header.site-header--style1
    .custom-logo-link img,

    html body header.site-header.site-header--style1
    img.custom-logo {
        width: 270px !important;
        max-width: calc(100vw - 90px) !important;

        height: auto !important;
        max-height: 70px !important;

        object-fit: contain !important;
    }
}