@charset "utf-8";

/*
 * daol_official 레이아웃 재설계
 * 12개 현행 게시판이 전부 공유하는 사이트 공통 레이아웃(헤더/내비/푸터).
 * 스킨 쪽 theme.css와 동일한 팔레트/토큰을 쓴다.
 */

:root {
    --bg: #ffffff;
    --bg-raised: #ffffff;
    --bg-sunken: #fbfbfb;
    --text: #444444;
    --text-dim: #666666;
    --text-faint: #999999;
    --border: #e0e1db;
    --border-strong: #cccccc;
    --accent: #fe3614;
    --accent-soft: #ff6600;
    --accent-ink: #ffffff;
    --link: #3074a5;
    --nav-bg: #2b2b2b;
    --nav-text: #fafafa;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #1a1a1a; --bg-raised: #212121; --bg-sunken: #262626;
        --text: #d6d6d6; --text-dim: #aaaaaa; --text-faint: #808080;
        --border: #3a3a3a; --border-strong: #4d4d4d;
        --accent: #ff5a3e; --accent-soft: #ff8a3d; --accent-ink: #1a1a1a; --link: #6fa8d6;
        --nav-bg: #141414; --nav-text: #e8e8e8;
    }
}
:root[data-theme="dark"] {
    --bg: #1a1a1a; --bg-raised: #212121; --bg-sunken: #262626;
    --text: #d6d6d6; --text-dim: #aaaaaa; --text-faint: #808080;
    --border: #3a3a3a; --border-strong: #4d4d4d;
    --accent: #ff5a3e; --accent-soft: #ff8a3d; --accent-ink: #1a1a1a; --link: #6fa8d6;
    --nav-bg: #141414; --nav-text: #e8e8e8;
}
:root[data-theme="light"] {
    --bg: #ffffff; --bg-raised: #ffffff; --bg-sunken: #fbfbfb;
    --text: #444444; --text-dim: #666666; --text-faint: #999999;
    --border: #e0e1db; --border-strong: #cccccc;
    --accent: #fe3614; --accent-soft: #ff6600; --accent-ink: #ffffff; --link: #3074a5;
    --nav-bg: #2b2b2b; --nav-text: #fafafa;
}

html body {
    background: var(--bg);
    font-family: -apple-system, BlinkMacSystemFont, "Malgun Gothic", "Apple SD Gothic Neo", "Segoe UI", Roboto, sans-serif !important;
}
a { color: var(--link); }

/* 상단 로그인 바 */
.header .header_login { background: var(--bg-sunken); border-bottom: 1px solid var(--border); }
.header .header_login .top_login .login li,
.header .header_login .top_login .login li a,
.header .header_login .top_login .login li button { color: var(--text-dim); }
.header .header_login .top_login .login li a:hover { color: var(--accent); }

/* 로고 영역 */
.header .header_logo { background: var(--bg); }

/* 주 메뉴 (게시판 내비게이션) - 색만 바꾸지 않고 실제로 다시 그림 */
.header .header_menu {
    background: var(--nav-bg);
    border-bottom: 3px solid var(--accent);
}
.header .header_menu .menu #gnb_menu .gnb_ul {
    flex-wrap: nowrap;
    justify-content: center;
}
.header .header_menu .menu #gnb_menu .gnbPrimary>li {
    height: 50px;
}
.header .header_menu .menu #gnb_menu .gnbPrimary>li>a {
    height: 50px;
    line-height: 50px;
    padding: 0 15px;
    color: var(--nav-text);
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: 0.01em;
    border-bottom: 3px solid transparent;
    box-sizing: border-box;
    transition: color 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}
.header .header_menu .menu #gnb_menu .gnbPrimary>li[data-mid="hof_4kerface"] {
    margin-right: 10px;
    padding-right: 10px;
    border-right: 1px solid rgba(224, 189, 115, 0.34);
}
.header .header_menu .menu #gnb_menu .gnbPrimary>li[data-mid="hof_4kerface"]>a {
    color: #e0bd73;
    background: rgba(224, 189, 115, 0.08);
    letter-spacing: 0;
}
.header .header_menu .menu #gnb_menu .gnbSecondary {
    min-height: 34px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.header .header_menu .menu #gnb_menu .gnbSecondary:empty {
    display: none;
}
.header .header_menu .menu #gnb_menu .gnbSecondary>li {
    height: 34px;
}
.header .header_menu .menu #gnb_menu .gnbSecondary>li>a {
    height: 34px;
    line-height: 34px;
    padding: 0 11px;
    color: var(--nav-text);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0;
    opacity: 0.72;
    border-bottom: 2px solid transparent;
    box-sizing: border-box;
    transition: color 0.12s ease, background-color 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
}
.header .header_menu .menu #gnb_menu .gnbPrimary>li>a:hover,
.header .header_menu .menu #gnb_menu .gnbPrimary>li>a:focus-visible,
.header .header_menu .menu #gnb_menu .gnbSecondary>li>a:hover,
.header .header_menu .menu #gnb_menu .gnbSecondary>li>a:focus-visible {
    color: #ffffff;
    background: rgba(255,255,255,0.08);
    opacity: 1;
    border-bottom-color: rgba(255,255,255,0.38);
    outline: none;
}
.header .header_menu .menu #gnb_menu .gnbPrimary>li.active>a,
.header .header_menu .menu #gnb_menu .gnbSecondary>li.active>a {
    color: var(--accent-soft);
    background: rgba(255,255,255,0.04);
    opacity: 1;
    border-bottom-color: var(--accent-soft);
}
.header .header_menu .menu #gnb_menu .gnbPrimary>li[data-mid="hof_4kerface"].active>a {
    color: #f2d38f;
    background: rgba(224, 189, 115, 0.14);
    border-bottom-color: #d2aa58;
}

/* zzz_menu_new의 NEW 배지도 팔레트에 맞춤 */
.zzz-menu-new {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    color: var(--accent-ink);
    background: var(--accent);
    padding: 0 4px;
    margin-left: 4px;
    vertical-align: middle;
    line-height: 14px;
}

/* 화면 모드 토글 - 로그인 바 오른쪽 */
.themeToggle {
    display: inline-flex;
    float: right;
    margin: 6px 10px 0 0;
    border: 1px solid var(--border-strong);
}
.themeToggle button {
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-dim);
    background: var(--bg-raised);
    border: none;
    border-left: 1px solid var(--border-strong);
    padding: 3px 8px;
    cursor: pointer;
}
.themeToggle button:first-child { border-left: none; }
.themeToggle button:hover { background: var(--bg-sunken); }
.themeToggle button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }

/* 본문 영역 배경 (스킨 내부 콘텐츠 색은 각 스킨의 theme.css가 담당) */
.xdt_page, .xdt_page2 { background-color: var(--bg); }
.xdt_page2 .xdt_sub { background-color: var(--bg); color: var(--text-dim); }

/* PC 메인 게시판 디렉터리: 모바일과 같은 주요 6개 + 그 외 */
.is-main-page .homeDirectory .homeGrid .homeCard { display: none; }
.is-main-page .homeDirectory .homeGrid .homeCard[data-mid="toilet_4kerface"],
.is-main-page .homeDirectory .homeGrid .homeCard[data-mid="qna_4kerface"],
.is-main-page .homeDirectory .homeGrid .homeCard[data-mid="pump_4kerface"],
.is-main-page .homeDirectory .homeGrid .homeCard[data-mid="hof_4kerface"],
.is-main-page .homeDirectory .homeGrid .homeCard[data-mid="news_4kerface"],
.is-main-page .homeDirectory .homeGrid .homeCard[data-mid="visit_4kerface"] {
    display: block;
}
.homeDirectory .homeMore {
    margin-top: 14px;
    border: 1px solid var(--border);
    background: var(--bg-raised);
}
.homeDirectory .homeMore summary {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 52px;
    padding: 0 48px 0 16px;
    color: var(--text);
    cursor: pointer;
    list-style: none;
}
.homeDirectory .homeMore summary::-webkit-details-marker { display: none; }
.homeDirectory .homeMore summary span { font-size: 16px; font-weight: 700; }
.homeDirectory .homeMore summary small { color: var(--text-faint); font-size: 12px; }
.homeDirectory .homeMore .homeMoreIcon {
    position: absolute;
    top: 50%;
    right: 16px;
    color: var(--accent);
    font-size: 20px;
    font-style: normal;
    line-height: 1;
    transform: translateY(-50%);
    transition: transform 0.15s ease;
}
.homeDirectory .homeMore[open] .homeMoreIcon {
    transform: translateY(-50%) rotate(45deg);
}
.homeDirectory .homeMore ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--border);
    list-style: none;
}
.homeDirectory .homeMore li {
    min-width: 0;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.homeDirectory .homeMore li:nth-child(3n) { border-right: 0; }
.homeDirectory .homeMore li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 44px;
    padding: 0 14px;
    color: var(--text);
    text-decoration: none;
}
.homeDirectory .homeMore li a:hover {
    color: var(--accent);
    background: var(--bg-sunken);
}
.homeDirectory .homeMore li a > i {
    color: var(--accent);
    font-size: 17px;
    font-style: normal;
}

/* 푸터 */
.footer { background: var(--bg-sunken); border-top: 1px solid var(--border); }
.footer .footer_content { color: var(--text-faint); }
.footer .menu li a { color: var(--text-dim); }

/* 로그인 모달 */
.loginWindow .loginLayer { background: var(--bg-raised); border-color: var(--border-strong); }
.loginWindow .loginLayer dt { color: var(--text-dim); }
.loginWindow .loginLayer .inputuid,
.loginWindow .loginLayer .inputupw { background: var(--bg-sunken); border-color: var(--border); color: var(--text); }
.loginWindow .loginLayer .keep label { color: var(--text-dim); }
.loginWindow .loginLayer .loginButton input { background-color: var(--accent); }
.loginWindow .loginLayer .help { background: var(--bg-sunken); }
.loginWindow .loginLayer .help p { color: var(--text-dim); }