@charset "utf-8";

/* ============================================================================
   GENAU THEME — genaukorea.com (독일 한인 커뮤니티)
   디자인 시스템: 독일 국기 3색(블랙/레드/골드)을 모티프로 한 절제된 팔레트,
   Pretendard 타이포그래피, 카드 기반 레이아웃, 다크모드 전면 지원.
   반응형은 별도 모바일 스킨 없이 이 CSS 한 벌로 처리한다(1024px / 640px 2단 브레이크포인트).

   목차:
   1. 변수(컬러 토큰) & 다크모드
   2. 리셋 & 베이스
   3. 레이아웃 셸 (topbar / header / gnb / container)
   4. 공용 컴포넌트 (버튼, 뱃지, 페이지네이션, 위젯박스, 사이드뷰)
   5. 홈 화면 (히어로 배너, 탭, 갤러리 섹션, 통계바)
   6. 게시판 (bsk_*: 목록/보기/글쓰기/댓글/갤러리형)
   7. 최신글 위젯 (pl_*)
   8. 회원 영역 (pms_*, popup_*, ms_*, pw_*, sc_*, pp_*, fm_*, pfl_*)
   9. 내용관리 / FAQ / 접속자 / 검색 / 방문자
   10. 푸터 / ToTop
   11. 관리자 설정 모달 (pe_*) / 배너 관리(gau_*) / 로그인위젯(ol_*)
   12. 반응형 (1024px, 640px)
   ============================================================================ */

/* ============================================================
   1. 변수 & 다크모드
   ============================================================ */
:root {
    /* 브랜드 컬러 — 관리자가 "색상" 탭에서 프리셋을 바꾸면 head.sub.php 가 아래 4개를
       인라인 <style> 로 덮어쓴다(genau.settings.php 의 GENAU_THEME_COLOR_PRESETS 참고).
       기본값은 반드시 'default' 프리셋과 정확히 같아야 한다. */
    --g-primary:        #E1001F; /* 지그날레드 */
    --g-primary-hover:  #B5001A;
    --g-accent:         #FFC82E; /* 골드 */
    --g-accent-hover:   #E6AD00;
    /* rgba() 투명도 조합용 RGB 트리플 — hex 4종과 항상 같이 덮어써야 한다(head.sub.php 참고).
       프리셋을 바꿨는데 이 값을 안 바꾸면 포커스링/알림배경/하이라이트 등이 이전 색으로 남는다. */
    --g-primary-rgb: 225, 0, 31;
    --g-accent-rgb:  255, 200, 46;

    --g-ink:       #16171B; /* 독일 국기 블랙 — 헤더 상단바/푸터/다크모드 베이스 */
    --g-ink-2:     #23242B;
    --g-ink-hover: #000000; /* --g-ink 배경 버튼의 hover 톤(약간 더 어둡게) */

    /* 라이트모드 3단계(배경/서피스/서피스얼트)가 서로 5~9/255 밖에 안 차이나서
       탑바·GNB 가 본문 배경과 거의 구분이 안 되던 문제 — 톤 간격을 벌림
       (다크모드는 이미 단계별로 15~17/255씩 벌어져 있어 손대지 않음). */
    --g-bg:          #F3F2EF;
    --g-surface:     #FFFFFF;
    --g-surface-alt: #ECEAE5;
    --g-border:      #E7E5E1;
    --g-text:        #17181C;
    --g-text-sub:    #6B6D76;
    --g-text-faint:  #82858E; /* 라이트모드 흰 배경 대비 ~2.7:1로 AA 미달이던 값(#9A9CA5)을 낮춤 — "더보기" 같은 실제 클릭 링크에도 쓰여서 단순 장식색이 아님 */

    --g-danger: #E1001F;
    --g-success: #1F8A4C;

    --g-radius-sm: 8px;
    --g-radius-md: 14px;
    --g-radius-lg: 20px;

    /* 카드 패딩류가 22/24/26/28/32/36/40px 등 눈대중 값으로 흩어져 있던 것을 정리하기 위한
       간격 스케일. 기존 값을 전부 소급 치환하진 않았지만(시각 회귀 위험), 새 컴포넌트는
       이 스케일에서 고를 것. */
    --g-space-1: 8px;
    --g-space-2: 12px;
    --g-space-3: 16px;
    --g-space-4: 20px;
    --g-space-5: 24px;
    --g-space-6: 32px;

    --g-shadow-sm: 0 2px 8px rgba(20,20,25,.06);
    --g-shadow-md: 0 8px 28px rgba(20,20,25,.10);
    --g-shadow-lg: 0 20px 60px rgba(20,20,25,.18);

    --g-font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}

html[data-theme="dark"] {
    --g-bg:          #101114;
    --g-surface:     #191A1F;
    --g-surface-alt: #202127;
    --g-border:      #2C2E36;
    --g-text:        #EDEDF0;
    --g-text-sub:    #A3A5AF;
    --g-text-faint:  #74767F;

    --g-shadow-sm: 0 2px 8px rgba(0,0,0,.35);
    --g-shadow-md: 0 8px 28px rgba(0,0,0,.45);
    --g-shadow-lg: 0 20px 60px rgba(0,0,0,.55);
}

/* ============================================================
   2. 리셋 & 베이스
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body, h1, h2, h3, h4, h5, h6, ul, ol, p, dl, dd, figure { margin: 0; padding: 0; }
ul, ol, li { list-style: none; }
img { max-width: 100%; vertical-align: middle; border: 0; }
button { font-family: inherit; }
fieldset { border: 0; margin: 0; padding: 0; }
legend { position: absolute; margin: 0; padding: 0; font-size: 0; line-height: 0; text-indent: -9999em; overflow: hidden; }
a { text-decoration: none; color: inherit; }
table { border-collapse: collapse; border-spacing: 0; }
hr { display: none; }
input, textarea, select, button { font-family: var(--g-font); font-size: 14px; }

body {
    font-family: var(--g-font);
    background: var(--g-bg);
    color: var(--g-text);
    font-size: 15px;
    line-height: 1.56;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transition: background-color .15s, color .15s;
    word-break: keep-all;
    overflow-wrap: break-word;
    overflow-x: hidden;
}
body.gn_lock, body.pe_lock { overflow: hidden; }

.sound_only, .msg_sound_only {
    display: inline-block !important; position: absolute; top: 0; left: 0;
    width: 0; height: 0; margin: 0 !important; padding: 0 !important;
    font-size: 0; line-height: 0; border: 0 !important; overflow: hidden !important;
}
#skip_to_container a {
    position: absolute; top: 0; left: 0; z-index: 100000;
    width: 1px; height: 1px; font-size: 0; line-height: 0; overflow: hidden;
}
/* 코어 팝업레이어 알림(hd_pop)은 스크린리더 전용 안내이므로 시각적으로 숨김 */
#hd_pop { position: relative; margin: 0 auto; height: 0; }
#hd_pop h2 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
#skip_to_container a:focus, #skip_to_container a:active {
    width: 100%; height: 60px; background: var(--g-ink); color: #fff;
    font-size: 18px; font-weight: 700; text-align: center; line-height: 60px;
}

.gn_inner { width: 1160px; max-width: 100%; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
#gn_wrap { min-width: 320px; background: var(--g-bg); }
#gn_h1 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }

/* 코어 강제 초기화 (동적 레이어, 리스트 불릿, 검색 팝업 등) */
#sv_option, .sv_option, #autosave_pop { display: none !important; }
#gn_wrap ul, #gn_wrap ol, #gn_wrap li { list-style: none !important; list-style-type: none !important; }
.bo_sch_wrap { display: none; }

/* ============================================================
   3. 레이아웃 셸
   ============================================================ */
#gn_top_ad { width: 100%; text-align: center; background: var(--g-surface-alt); padding: 8px 0; line-height: 0; font-size: 0; }
#gn_top_ad ins, #gn_top_ad > * { display: inline-block; }

/* ── 상단 유틸바 (블랙 밴드) ── */
#gn_topbar { background: var(--g-surface-alt); border-bottom: 1px solid var(--g-border); color: var(--g-text-sub); }
#gn_topbar .gn_inner { display: flex; align-items: center; justify-content: space-between; height: 38px; }
#gn_topbar .gn_topbar_left,
#gn_topbar .gn_topbar_right { display: flex; align-items: center; gap: 16px; white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
#gn_topbar .gn_topbar_left::-webkit-scrollbar, #gn_topbar .gn_topbar_right::-webkit-scrollbar { display: none; }
#gn_topbar a { font-size: 12.5px; color: var(--g-text-sub); transition: color .12s; }
#gn_topbar a:hover { color: var(--g-primary); }
#gn_topbar .gn_topbar_nick { font-size: 12.5px; color: var(--g-text); font-weight: 600; }
#gn_topbar .gn_topbar_admin { color: var(--g-primary); font-weight: 700; }

/* ── 메인 헤더 ── */
#gn_header { background: var(--g-surface); border-bottom: 1px solid var(--g-border); position: relative; z-index: 60; }
#gn_header .gn_inner { display: flex; align-items: center; gap: 24px; height: 84px; }

.gn_logo_link { display: inline-flex; align-items: baseline; text-decoration: none; }
.gn_logo_text {
    font-size: 30px; font-weight: 800; letter-spacing: -1px; color: var(--g-text);
    font-family: var(--g-font);
}
.gn_logo_dot { color: var(--g-primary); }
.gn_logo_img { height: 42px; max-width: 190px; width: auto; object-fit: contain; display: block; }

.gn_search_wrap { flex: 1; max-width: 420px; }
.gn_search_wrap form {
    display: flex; align-items: center; height: 44px;
    border: 1.5px solid var(--g-border); border-radius: 999px; background: var(--g-surface-alt);
    transition: border-color .15s, background .15s;
    overflow: hidden;
}
.gn_search_wrap form:focus-within { border-color: var(--g-primary); background: var(--g-surface); }
.gn_search_wrap input {
    flex: 1; min-width: 0; height: 100%; padding: 0 0 0 20px; border: none; outline: none;
    background: transparent; font-size: 14.5px; color: var(--g-text);
}
.gn_search_wrap input::placeholder { color: var(--g-text-faint); }
.gn_search_wrap button {
    flex-shrink: 0; width: 44px; height: 44px; border: none; background: transparent;
    color: var(--g-text-sub); cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center;
    transition: color .12s;
}
.gn_search_wrap button:hover { color: var(--g-primary); }

.gn_header_banner { flex-shrink: 0; width: 140px; height: 60px; margin-left: auto; }
.gn_header_banner a, .gn_header_banner img { display: block; width: 140px; height: 60px; object-fit: cover; border-radius: var(--g-radius-sm); }

.gn_dark_toggle, .gn_menu_btn, .gn_search_icon_btn {
    flex-shrink: 0; width: 42px; height: 42px; border: none; border-radius: 50%;
    background: var(--g-surface-alt); color: var(--g-text-sub); cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 16px;
    transition: background .15s, color .15s;
}
.gn_header_banner + .gn_dark_toggle,
#gn_header .gn_search_wrap ~ .gn_dark_toggle:not(.gn_header_banner ~ *) { margin-left: 0; }
.gn_dark_toggle:hover, .gn_menu_btn:hover, .gn_search_icon_btn:hover { background: var(--g-primary); color: #fff; }
/* 폰 폭(640px 이하)에서는 헤더 검색창이 통째로 숨겨지므로 돋보기 버튼만 대신 노출 */
.gn_search_icon_btn { display: none; }
.gn_menu_btn { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.gn_menu_btn span { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s, opacity .2s; }
.gn_menu_btn.gn_is_open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.gn_menu_btn.gn_is_open span:nth-child(2) { opacity: 0; }
.gn_menu_btn.gn_is_open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── GNB ──
   블랙 배경 + 흰 글씨(독일 국기 블랙 밴드 정체성). hover 는 골드 한 가지로 통일해서
   모바일 드로어(항상 블랙 배경)와 같은 언어를 쓰도록 맞췄다 — 데스크톱/모바일 어디서나
   "블랙 바 + 골드 hover" 로 일관됨. */
#gn_gnb { background: var(--g-ink); border-bottom: 2px solid var(--g-accent); position: relative; z-index: 55; }
.gn_gnb_mobile_user { display: none; }
#gn_gnb .gn_gnb_list { display: flex; height: 50px; align-items: stretch; }
#gn_gnb .gn_gnb_item { position: relative; display: flex; align-items: stretch; }
#gn_gnb .gn_gnb_item > a {
    display: flex; align-items: center; gap: 5px; padding: 0 20px;
    font-size: 14.5px; font-weight: 600; color: #fff;
    position: relative; white-space: nowrap; transition: color .15s, background-color .15s;
}
#gn_gnb .gn_gnb_item > a::after {
    content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 0; height: 3px; border-radius: 2px 2px 0 0; background: var(--g-accent); transition: width .18s ease;
}
#gn_gnb .gn_gnb_item > a:hover, #gn_gnb .gn_gnb_item:hover > a {
    color: var(--g-accent); background-color: rgba(255,255,255,.06);
}
#gn_gnb .gn_gnb_item > a:hover::after, #gn_gnb .gn_gnb_item:hover > a::after { width: calc(100% - 28px); }

.gn_gnb_arrow {
    display: inline-block; width: 0; height: 0; border-style: solid;
    border-width: 4px 3.5px 0 3.5px; border-color: rgba(255,255,255,.5) transparent transparent transparent;
    transition: transform .15s, border-color .15s;
}
#gn_gnb .gn_gnb_item:hover .gn_gnb_arrow { transform: rotate(180deg); border-top-color: var(--g-accent); }

.gn_gnb_sub {
    display: none; position: absolute; top: 100%; left: 0; min-width: 160px;
    background: var(--g-surface); border: 1px solid var(--g-border); border-top: 3px solid var(--g-accent);
    border-radius: 0 0 10px 10px; box-shadow: var(--g-shadow-md); z-index: 200; padding: 6px 0;
}
#gn_gnb .gn_gnb_item:hover .gn_gnb_sub { display: block; }
.gn_gnb_sub li a { display: block; padding: 10px 18px; font-size: 13.5px; font-weight: 500; color: var(--g-text); transition: background .1s, color .1s; }
.gn_gnb_sub li a:hover { background: var(--g-surface-alt); color: var(--g-primary); }
.gn_gnb_empty a { color: var(--g-primary) !important; padding: 0 20px; display: flex; align-items: center; font-size: 13px; }

/* ── 컨테이너 ── */
#gn_container { padding: 18px 0 56px; min-height: 560px; }
#gn_container_title {
    max-width: 1160px; margin: 0 auto 18px; padding: 0 20px 14px; border-bottom: 2px solid var(--g-text);
    font-size: 22px; font-weight: 800; letter-spacing: -.4px;
}
#gn_container > .gn_inner > #gn_container_title,
.gn_inner#gn_container_title {}

.gn_board_layout { max-width: 1160px; margin: 0 auto; padding: 0 20px; display: flex; gap: 28px; align-items: flex-start; }
.gn_board_main { flex: 1; min-width: 0; width: 0; }
.gn_board_side { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; gap: 18px; }

/* 게시판이 아닌 일반 페이지 컨테이너 폭
   ── 주의: 예전엔 `#gn_container > div:not(...)` 같은 범용 셀렉터를 썼는데,
   :not(#gn_container_title) 안의 ID 가 셀렉터 특이도에 그대로 반영되어 컴포넌트별
   너비 규칙(예: .pms_wrap 의 max-width:460px)을 의도치 않게 덮어써버리는 문제가
   있었다. 그래서 자동 매칭을 포기하고, 페이지 단위 스킨(내용관리/FAQ/검색 등)이
   .gn_inner 를 직접 명시하는 방식으로 바꿨다 — 새 페이지 스킨을 추가할 때도
   이 패턴(최상위 래퍼에 class="gn_inner" 추가)을 따를 것. */

/* ============================================================
   4. 공용 컴포넌트
   ============================================================ */
.gn_btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 42px; padding: 0 22px; border-radius: 999px; border: none; cursor: pointer;
    font-size: 14px; font-weight: 700; font-family: var(--g-font); text-decoration: none;
    transition: background .15s, color .15s, transform .1s, box-shadow .15s;
}
.gn_btn:active { transform: translateY(1px); }
.gn_btn_primary { background: var(--g-primary); color: #fff; box-shadow: 0 4px 14px rgba(var(--g-primary-rgb),.25); }
.gn_btn_primary:hover { background: var(--g-primary-hover); color: #fff; }
.gn_btn_accent { background: var(--g-accent); color: var(--g-ink); }
.gn_btn_accent:hover { background: var(--g-accent-hover); }
.gn_btn_ghost { background: var(--g-surface-alt); color: var(--g-text); border: 1px solid var(--g-border); }
.gn_btn_ghost:hover { border-color: var(--g-primary); color: var(--g-primary); }
.gn_btn_ink { background: var(--g-ink); color: #fff; }
.gn_btn_ink:hover { background: var(--g-ink-hover); }
.gn_btn_sm { height: 34px; padding: 0 16px; font-size: 13px; }
.gn_btn_block { width: 100%; }
.gn_btn:disabled { opacity: .5; cursor: not-allowed; }

.gn_badge { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: 5px; line-height: 15px; letter-spacing: .2px; }
.gn_badge_notice { background: var(--g-ink); color: #fff; }
.gn_badge_new { background: var(--g-primary); color: #fff; }
.gn_badge_hot { background: var(--g-accent); color: var(--g-ink); }
.gn_badge_secret { color: var(--g-text-faint); }
.gn_dot_new { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--g-primary); margin-left: 3px; vertical-align: middle; }

/* 페이지네이션 */
.gn_pg_wrap { display: flex; justify-content: center; padding: 30px 0 6px; }
.gn_pg_wrap .pg { display: flex; align-items: center; gap: 6px; }
.gn_pg_wrap .pg_page, .gn_pg_wrap .pg_current,
.gn_pg_wrap .pg_start, .gn_pg_wrap .pg_prev, .gn_pg_wrap .pg_end, .gn_pg_wrap .pg_next {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 36px; padding: 0 6px; border-radius: 10px;
    background: var(--g-surface); border: 1px solid var(--g-border); color: var(--g-text-sub);
    font-size: 13.5px; font-weight: 600; text-decoration: none; transition: all .12s;
}
.gn_pg_wrap .pg_page:hover { border-color: var(--g-primary); color: var(--g-primary); }
.gn_pg_wrap .pg_current { background: var(--g-primary); border-color: var(--g-primary); color: #fff; font-weight: 800; }
.gn_pg_wrap .pg_start, .gn_pg_wrap .pg_prev, .gn_pg_wrap .pg_end, .gn_pg_wrap .pg_next { font-size: 0; }
.gn_pg_wrap .pg_start::before { content: "\00ab"; font-size: 14px; }
.gn_pg_wrap .pg_prev::before { content: "\2039"; font-size: 16px; }
.gn_pg_wrap .pg_next::before { content: "\203a"; font-size: 16px; }
.gn_pg_wrap .pg_end::before { content: "\00bb"; font-size: 14px; }

/* 위젯 박스 (사이드바 공용) */
.gn_widget_box { background: var(--g-surface); border: 1px solid var(--g-border); border-radius: var(--g-radius-md); overflow: visible; position: relative; }
.gn_widget_title { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; font-size: 14.5px; font-weight: 800; border-bottom: 2px solid var(--g-ink); }
.gn_widget_title a { color: inherit; }
.gn_widget_more { font-size: 11.5px; font-weight: 600; color: var(--g-text-faint); }
.gn_widget_more:hover { color: var(--g-primary); }
.gn_widget_content { padding: 6px 0; }
.gn_widget_empty { padding: 26px 16px; text-align: center; font-size: 13px; color: var(--g-text-faint); }

/* 사이드뷰(작성자 팝업) — 코어 마크업 재사용, 위치/디자인만 지정 */
.sv_wrap { position: relative !important; display: inline-block !important; font-weight: normal; }
.sv_wrap .sv {
    display: none !important;
    position: absolute !important; top: calc(100% + 6px) !important; left: 0 !important; z-index: 9999 !important;
    min-width: 132px; background: var(--g-surface); border: 1px solid var(--g-border); border-radius: 10px;
    box-shadow: var(--g-shadow-md); padding: 6px 0; white-space: nowrap;
}
.sv_wrap .sv.sv_on { display: block !important; }
.sv_wrap .sv a { display: block !important; padding: 9px 16px; font-size: 12.5px; color: var(--g-text); }
.sv_wrap .sv a:hover { background: var(--g-surface-alt); color: var(--g-primary); }
tr.sv_zfix, li.sv_zfix { position: relative !important; z-index: 50 !important; }

/* 폼 공용 (게시판/회원 겸용 필드 스타일) */
.gn_field { margin-bottom: 14px; }
.gn_field label, .gn_flabel { display: block; font-size: 13px; font-weight: 700; color: var(--g-text); margin-bottom: 6px; }
.gn_input, .gn_textarea, .gn_select,
.frm_input, .full_input, .half_input, .twopart_input {
    width: 100%; box-sizing: border-box; height: 46px; padding: 0 16px;
    border: 1.5px solid var(--g-border); border-radius: var(--g-radius-sm);
    background: var(--g-surface); color: var(--g-text); font-size: 14.5px; font-family: var(--g-font);
    outline: none; transition: border-color .15s, box-shadow .15s;
}
.gn_textarea, textarea.gn_input { height: auto; padding: 12px 16px; resize: vertical; line-height: 1.6; }
.gn_input:focus, .gn_textarea:focus, .gn_select:focus, .frm_input:focus {
    border-color: var(--g-primary); box-shadow: 0 0 0 3px rgba(var(--g-primary-rgb),.10);
}
.gn_hint { font-size: 12px; color: var(--g-text-faint); margin-top: 5px; line-height: 1.5; }
.gn_required { color: var(--g-primary); margin-left: 2px; }
.gn_checkbox_row { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--g-text-sub); }
.gn_checkbox_row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--g-primary); cursor: pointer; }

/* ============================================================
   5. 홈 화면
   ============================================================ */
#gn_home { max-width: 1160px; margin: 0 auto; padding: 0 20px; }

/* 히어로 배너 */
.gn_hero { margin-bottom: 26px; border-radius: var(--g-radius-lg); overflow: hidden; position: relative; background: var(--g-ink); height: 110px; box-shadow: var(--g-shadow-md); }
.gn_hero .swiper-slide { position: relative; }
.gn_hero .swiper-slide a, .gn_hero .swiper-slide img { display: block; width: 100%; height: 110px; object-fit: cover; }
.gn_hero .swiper-pagination { position: absolute; bottom: 6px; left: 0; width: 100%; text-align: center; z-index: 5; }
.gn_hero .swiper-pagination-bullet { width: 8px; height: 8px; background: #fff; opacity: .5; margin: 0 4px !important; }
.gn_hero .swiper-pagination-bullet-active { opacity: 1; background: var(--g-accent); }
/* 배너 미등록 빈 상태 — 헤더에 이미 나온 로고를 반복 표시하는 대신(예전엔 다크 그라디언트
   카드에 로고를 한 번 더 띄워서 "고장난 것처럼" 보였음), .bsk_empty/.gn_widget_empty 와
   같은 점선 테두리 빈 상태 톤으로 통일했다. 관리자 전용 등록 링크는 골드 배경 알약 버튼으로
   둬서(골드 텍스트는 밝은 배경에서 대비가 안 나와 피함) 브랜드 골드가 실제로 눈에 띄는
   자리를 하나 더 갖도록 했다. */
.gn_hero_placeholder {
    height: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 14px;
    background: var(--g-surface-alt); border: 1.5px dashed var(--g-border);
    color: var(--g-text-faint); padding: 0 22px;
}
.gn_hero_ph_text { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.gn_hero_ph_text i { font-size: 15px; }
.gn_hero_ph_link {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    background: var(--g-accent); color: var(--g-ink); font-size: 11.5px; font-weight: 800;
    padding: 7px 14px; border-radius: 999px; transition: background .15s;
}
.gn_hero_ph_link:hover { background: var(--g-accent-hover); color: var(--g-ink); }

/* 통계 바 */
.gn_stat_bar {
    display: flex; background: var(--g-surface); border: 1px solid var(--g-border); border-radius: var(--g-radius-md);
    margin-top: 26px; margin-bottom: 26px; overflow: hidden; box-shadow: var(--g-shadow-sm);
}
.gn_stat_item { flex: 1; text-align: center; padding: 20px 10px; }
.gn_stat_item + .gn_stat_item { border-left: 1px solid var(--g-border); }
.gn_stat_value { display: block; font-size: 26px; font-weight: 800; color: var(--g-primary); line-height: 1; margin-bottom: 8px; }
.gn_stat_label { font-size: 12.5px; color: var(--g-text-sub); font-weight: 600; }

/* 안내 바 */
.gn_guide_bar {
    background: linear-gradient(90deg, rgba(var(--g-primary-rgb),.07), rgba(var(--g-accent-rgb),.10));
    border: 1px solid var(--g-border); border-radius: var(--g-radius-md);
    padding: 16px 22px; margin-top: 20px; margin-bottom: 0; display: flex; align-items: center; gap: 14px;
}
.gn_guide_bar i { color: var(--g-primary); font-size: 18px; flex-shrink: 0; }
.gn_guide_bar span { flex: 1; font-size: 14px; font-weight: 600; color: var(--g-text); }
.gn_guide_bar .gn_btn { flex-shrink: 0; }

/* 탭 게시판 */
.gn_tabs { background: var(--g-surface); border: 1px solid var(--g-border); border-radius: var(--g-radius-md); margin-bottom: 24px; overflow: hidden; box-shadow: var(--g-shadow-sm); }
.gn_tab_nav { display: flex; border-bottom: 1px solid var(--g-border); padding: 0 6px; overflow-x: auto; scrollbar-width: none; }
.gn_tab_nav::-webkit-scrollbar { display: none; }
.gn_tab_nav button {
    flex: none; padding: 0 18px; height: 52px; border: none; border-bottom: 3px solid transparent;
    background: none; font-size: 14.5px; font-weight: 700; color: var(--g-text-faint); cursor: pointer;
    transition: color .12s, border-color .12s; margin-bottom: -1px;
}
.gn_tab_nav button:hover { color: var(--g-text); }
.gn_tab_nav button.gn_active { color: var(--g-primary); border-bottom-color: var(--g-primary); }
.gn_tab_panel { display: none; padding: 4px 0 10px; }
.gn_tab_panel.gn_active { display: block; }

/* 섹션 공통 카드 */
.gn_section { background: var(--g-surface); border: 1px solid var(--g-border); border-radius: var(--g-radius-md); padding: 22px 24px; margin-bottom: 24px; box-shadow: var(--g-shadow-sm); }
.gn_section_head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 2px solid var(--g-ink); }
.gn_section_head h2 { font-size: 17px; font-weight: 800; letter-spacing: -.3px; }
.gn_section_head h2 a { color: inherit; }
.gn_section_head a.gn_more { font-size: 12px; font-weight: 600; color: var(--g-text-faint); }
.gn_section_head a.gn_more:hover { color: var(--g-primary); }

.gn_half_row { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; }
.gn_half_col { flex: 1 1 340px; min-width: 0; }

/* 홈 갤러리 그리드 (사진 게시판 미리보기) */
.gn_home_gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gn_home_gallery a { display: block; border-radius: var(--g-radius-sm); overflow: hidden; position: relative; aspect-ratio: 4/3; background: var(--g-surface-alt); }
.gn_home_gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.gn_home_gallery a:hover img { transform: scale(1.05); }
.gn_home_gallery .gn_gal_cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 8px; font-size: 12px; color: #fff; background: linear-gradient(0deg, rgba(0,0,0,.65), transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 관리자 편집 진입 버튼 (홈 화면 최상단, 최고관리자에게만 노출) */
.gn_editor_open_bar { display: flex; justify-content: flex-end; margin-bottom: 9px; }
.gn_editor_open_btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px;
    background: var(--g-ink); color: #fff; border: none; cursor: pointer; font-size: 12.5px; font-weight: 700;
}
.gn_editor_open_btn:hover { background: var(--g-ink-hover); }
.gn_editor_open_btn i { color: var(--g-accent); }

/* ============================================================
   6. 게시판 (bsk_*)
   ============================================================ */
.bsk_top_bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.bsk_crumb { font-size: 13px; color: var(--g-text-faint); }
.bsk_crumb strong { color: var(--g-text); font-weight: 700; }
.bsk_top_actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.bsk_head_card {
    background: var(--g-surface); border: 1px solid var(--g-border); border-radius: var(--g-radius-md);
    padding: 22px 24px; margin-bottom: 18px; box-shadow: var(--g-shadow-sm);
}
.bsk_head_card h2 { font-size: 19px; font-weight: 800; margin-bottom: 6px; }
.bsk_head_card p { font-size: 13px; color: var(--g-text-sub); }

.bsk_total { font-size: 12.5px; color: var(--g-text-faint); margin: 0 2px 10px; text-align: right; }
.bsk_total strong { color: var(--g-primary); font-weight: 800; }

/* ── 목록/보기/글쓰기 공용 툴바 & 버튼 ── */
.bsk_toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.bsk_toolbar_bottom { justify-content: flex-end; margin: 18px 0 0; }
.bsk_btn_group { display: flex; align-items: center; gap: 8px; position: relative; }
.bsk_btn {
    display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px;
    border-radius: 999px; border: 1.5px solid var(--g-border); background: var(--g-surface); color: var(--g-text-sub);
    font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none; transition: all .12s;
}
.bsk_btn:hover { border-color: var(--g-primary); color: var(--g-primary); }
.bsk_btn_icon { width: 40px; padding: 0; justify-content: center; } /* 38px는 모바일 터치 타겟으로 살짝 작아서 40px로 */
.bsk_btn_write, .bsk_btn_submit { background: var(--g-primary); border-color: var(--g-primary); color: #fff; }
.bsk_btn_write:hover, .bsk_btn_submit:hover { background: var(--g-primary-hover); border-color: var(--g-primary-hover); color: #fff; }
.bsk_btn_admin { color: var(--g-text-faint); }
.bsk_btn_danger { color: var(--g-primary); border-color: rgba(var(--g-primary-rgb),.35); }
.bsk_btn_danger:hover { background: var(--g-primary); border-color: var(--g-primary); color: #fff; }
.bsk_btn_cancel { background: var(--g-surface-alt); }
.bsk_btn_sm { height: 32px; padding: 0 12px; font-size: 12px; }
.bsk_btn_autosave { background: var(--g-surface-alt); position: relative; }

.bsk_admin_opt_menu, .more_opt.is_list_btn {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 140px;
    background: var(--g-surface); border: 1px solid var(--g-border); border-radius: 10px; box-shadow: var(--g-shadow-md);
    padding: 6px 0; list-style: none; margin: 0;
}
.bsk_admin_opt_menu li button, .more_opt.is_list_btn li button {
    display: block; width: 100%; text-align: left; padding: 9px 16px; background: none; border: none;
    font-size: 12.5px; color: var(--g-text); cursor: pointer;
}
.bsk_admin_opt_menu li button:hover, .more_opt.is_list_btn li button:hover { background: var(--g-surface-alt); color: var(--g-primary); }

.bsk_search_wrap { position: fixed; inset: 0; z-index: 800; }
.bsk_search_overlay { position: absolute; inset: 0; background: rgba(10,10,12,.5); }
.bsk_search_box { position: relative; max-width: 440px; margin: 12vh auto 0; background: var(--g-surface); border-radius: var(--g-radius-md); padding: 22px; box-shadow: var(--g-shadow-lg); }
.bsk_search_input_row { display: flex; gap: 8px; margin-top: 10px; }
.bsk_search_close { display: block; margin-top: 12px; background: none; border: none; color: var(--g-text-faint); font-size: 12.5px; cursor: pointer; }

.bsk_select { height: 40px; padding: 0 12px; border: 1.5px solid var(--g-border); border-radius: var(--g-radius-sm); background: var(--g-surface); color: var(--g-text); font-size: 13px; }
.bsk_select_sm { height: 36px; }
.bsk_input { height: 40px; padding: 0 14px; border: 1.5px solid var(--g-border); border-radius: var(--g-radius-sm); background: var(--g-surface); color: var(--g-text); font-size: 13.5px; outline: none; }
.bsk_input:focus { border-color: var(--g-primary); }
.bsk_input_sm { height: 38px; width: 160px; }
.bsk_input_full { width: 100%; height: 50px; font-size: 16px; font-weight: 700; }

.gn_pg_wrap, .pg_wrap { display: flex; justify-content: center; padding: 26px 0 6px; }
.gn_pg_wrap .pg, .pg_wrap .pg { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.pg_wrap .pg_page, .pg_wrap .pg_current, .pg_wrap .pg_start, .pg_wrap .pg_prev, .pg_wrap .pg_end, .pg_wrap .pg_next {
    display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 6px;
    border-radius: 9px; background: var(--g-surface); border: 1px solid var(--g-border); color: var(--g-text-sub);
    font-size: 13px; font-weight: 600; text-decoration: none;
}
.pg_wrap .pg_page:hover { border-color: var(--g-primary); color: var(--g-primary); }
.pg_wrap .pg_current { background: var(--g-primary); border-color: var(--g-primary); color: #fff; font-weight: 800; }

/* 카테고리 네비 */
.bsk_cate_nav ul, #bo_cate_ul { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.bsk_cate_nav a, #bo_cate_ul a { display: inline-block; padding: 7px 16px; border-radius: 999px; border: 1.5px solid var(--g-border); font-size: 12.5px; font-weight: 600; color: var(--g-text-sub); background: var(--g-surface); }
.bsk_cate_nav a.on, #bo_cate_ul a.on, .bsk_cate_nav a.active, #bo_cate_ul a.active { background: var(--g-primary); border-color: var(--g-primary); color: #fff; }
.bsk_badge_cate, .bo_cate_link { display: inline-block; font-size: 11px; font-weight: 700; color: var(--g-primary); margin-bottom: 4px; }

/* 갤러리 목록 부가 클래스 */
.bsk_gall_allchk { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--g-text-sub); margin-bottom: 10px; }
.bsk_gall_chk { position: absolute; top: 8px; left: 8px; z-index: 5; }
.bsk_gall_notice_cover { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--g-ink); }
.bsk_gall_no_img { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--g-text-faint); font-size: 26px; }
.bsk_gall_badge_new { position: absolute; top: 10px; right: 10px; background: var(--g-primary); color: #fff; font-size: 10px; font-weight: 800; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.bsk_gall_badge_lock { position: absolute; top: 38px; right: 10px; background: rgba(0,0,0,.55); color: #fff; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; } /* 새글 배지와 같은 자리를 쓰면 둘 다 뜨는 글에서 겹쳐 보이던 버그 — 아래로 내려서 분리 */
.bsk_gall_info { padding: 14px 4px 4px; }
.bsk_gall_tit { font-size: 14.5px; font-weight: 700; color: var(--g-text); }
.bsk_current_item { outline: 2px solid var(--g-primary); outline-offset: 2px; border-radius: var(--g-radius-md); }
.bsk_meta_sep { color: var(--g-border); }
.bo_current { color: var(--g-primary); font-weight: 700; font-size: 11.5px; }

/* ── 글쓰기 폼 상세 ── */
.bsk_write_header { margin-bottom: 18px; }
.bsk_write_bc { font-size: 12.5px; color: var(--g-text-faint); margin-bottom: 8px; }
.bsk_write_bc .bc_sep { margin: 0 6px; }
.bsk_write_bc .bc_current { color: var(--g-text); font-weight: 700; }
.bsk_write_title { font-size: 20px; font-weight: 800; }
.bsk_write_row { margin-bottom: 16px; }
.bsk_write_label { display: block; font-size: 13px; font-weight: 700; color: var(--g-text); margin-bottom: 8px; }
.bsk_write_label i { color: var(--g-primary); margin-right: 4px; }
.bsk_write_field {}
.bsk_write_inline { display: flex; flex-wrap: wrap; gap: 8px; }
.bsk_required, .gn_required { color: var(--g-primary); }
.bsk_write_label_note { margin-left: 8px; font-size: 12px; font-weight: 400; color: var(--g-danger); }
.bsk_write_label_note strong { font-weight: 700; }
.bsk_write_options { display: flex; flex-wrap: wrap; gap: 16px; list-style: none; margin: 0; padding: 0; }
.bsk_write_options .chk_box { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--g-text-sub); }
.bsk_write_options .chk_box label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.bsk_select_arrow { min-width: 220px; }
.bsk_charcount_desc { font-size: 12px; color: var(--g-text-faint); margin-bottom: 8px; }
.bsk_charcount { text-align: right; font-size: 11.5px; color: var(--g-text-faint); margin-top: 6px; }
.bsk_autosave_cnt { color: var(--g-primary); }
.bsk_autosave_pop {
    display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; width: 260px;
    background: var(--g-surface); border: 1px solid var(--g-border); border-radius: 10px; box-shadow: var(--g-shadow-md); padding: 14px;
}
.bsk_autosave_pop strong { display: block; font-size: 12.5px; margin-bottom: 8px; }
.bsk_autosave_pop ul { max-height: 180px; overflow-y: auto; }
.bsk_autosave_foot { margin-top: 10px; text-align: right; }
#autosave_wrapper { position: relative; }
.bsk_write_file_inner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bsk_file_label { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 1.5px dashed var(--g-border); border-radius: var(--g-radius-sm); font-size: 12.5px; color: var(--g-text-sub); cursor: pointer; }
.bsk_file_label:hover { border-color: var(--g-primary); color: var(--g-primary); }
.bsk_file_input { display: none; }
.bsk_file_limit { font-size: 11px; color: var(--g-text-faint); }
.bsk_file_del { font-size: 12px; color: var(--g-text-sub); }
.bsk_write_hint { font-size: 12px; color: var(--g-text-faint); }
.bsk_write_submit { display: flex; justify-content: center; gap: 10px; margin-top: 24px; }
.bsk_write_submit .bsk_btn { height: 48px; padding: 0 28px; font-size: 14px; }

/* ── 댓글 상세 ── */
.bsk_cmt_toggle { display: inline-flex; align-items: center; gap: 8px; background: none; border: none; font-size: 14px; font-weight: 700; color: var(--g-text); cursor: pointer; margin-bottom: 12px; }
.bsk_cmt_toggle strong { color: var(--g-primary); }
.bsk_cmt_header { display: flex; align-items: center; gap: 8px; position: relative; }
.bsk_cmt_ip { font-size: 11px; color: var(--g-text-faint); }
.bsk_cmt_opt_btn { background: none; border: none; color: var(--g-text-faint); cursor: pointer; padding: 4px 8px; margin-left: auto; }
.bsk_cmt_opt_menu { display: none; position: absolute; top: 100%; right: 0; z-index: 30; background: var(--g-surface); border: 1px solid var(--g-border); border-radius: var(--g-radius-sm); box-shadow: var(--g-shadow-md); min-width: 100px; padding: 4px 0; list-style: none; margin: 4px 0 0; }
.bsk_cmt_opt_menu a { display: block; padding: 8px 14px; font-size: 12.5px; color: var(--g-text); }
.bsk_cmt_opt_menu a:hover { background: var(--g-surface-alt); color: var(--g-primary); }
.bsk_cmt_empty { text-align: center; padding: 30px 0; color: var(--g-text-faint); font-size: 13px; }
.bsk_cmt_form_body textarea { width: 100%; }
.bsk_cmt_charcount { text-align: right; font-size: 11px; color: var(--g-text-faint); margin: 4px 0 0; }
.bsk_cmt_form_info { display: flex; gap: 8px; flex-wrap: wrap; }
.bsk_cmt_form_actions { display: flex; align-items: center; gap: 12px; }
.bsk_cmt_secret_chk { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--g-text-sub); cursor: pointer; }

/* ── 보기 페이지 상세 ── */
.bsk_view_author { display: flex; align-items: center; gap: 8px; }
.bsk_view_avatar img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.bsk_view_stats { display: flex; align-items: center; gap: 14px; }
.bsk_view_stat a { color: inherit; }
.bsk_view_sig { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--g-border); font-size: 13px; color: var(--g-text-sub); }
.bsk_share_label { display: block; text-align: center; font-size: 12px; color: var(--g-text-faint); margin-bottom: 10px; }
.bsk_share_btns { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.bsk_share_icon { width: 15px; height: 15px; fill: currentColor; }
.bsk_share_fb { background: #1877F2; color: #fff; }
.bsk_share_naver { background: #03C75A; color: #fff; }
.bsk_share_pin { background: #E60023; color: #fff; }
.bsk_react_msg { display: none; text-align: center; width: 100%; font-size: 12px; color: var(--g-primary); margin-top: 6px; }
.bsk_file_link { flex: 1; display: flex; align-items: center; gap: 8px; }
.bsk_file_info { flex-shrink: 0; color: var(--g-text-faint); font-size: 11px; }
.gn_nav_dir, .bsk_nav_label { flex-shrink: 0; width: 64px; color: var(--g-text-faint); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.bsk_nav_item { display: flex; align-items: center; gap: 14px; padding: 14px 28px; font-size: 13.5px; border-bottom: 1px solid var(--g-border); }
.bsk_nav_item:last-child { border-bottom: none; }
.bsk_nav_tit { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--g-text); }
.bsk_nav_tit:hover { color: var(--g-primary); }
.icon_new { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 4px; background: var(--g-primary); color: #fff; font-size: 9px; font-weight: 800; vertical-align: middle; margin-left: 3px; }
.cnt_cmt { color: var(--g-primary); font-weight: 800; font-size: 12px; }
.empty_table { text-align: center; padding: 60px 0; color: var(--g-text-faint); }

/* ── 목록형(카드 리스트) ── */
#bsk_list_wrap {
    background: var(--g-surface); border: 1px solid var(--g-border); border-radius: var(--g-radius-md);
    overflow: hidden; box-shadow: var(--g-shadow-sm);
}
/* 카테고리 탭/툴바가 카드 테두리에 바짝 붙어 배경과 잘 안 어우러져 보이던 문제(기본형 목록만
   해당 — 갤러리형은 #bsk_gall_wrap 자체가 카드가 아니라 그리드 아이템 각각이 카드라 이 여백이
   필요 없다) — 목록 헤더(.bsk_list_header)·항목(.bsk_list_item)과 같은 20px 좌우 여백, 상단
   20px 여백을 맞춰서 카드 안에 자연스럽게 자리잡도록 한다. */
#bsk_list_wrap > .bsk_cate_nav,
#bsk_list_wrap .bsk_toolbar,
#bsk_list_wrap .bsk_gall_allchk,
#bsk_list_wrap .pg_wrap { padding-left: 20px; padding-right: 20px; }
#bsk_list_wrap > .bsk_cate_nav:first-child,
#bsk_list_wrap > form:first-child > .bsk_toolbar:first-of-type { padding-top: 20px; }
#bsk_list_wrap .bsk_toolbar_bottom { padding-bottom: 20px; }
.bsk_list_header { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background: var(--g-surface-alt); border-bottom: 1px solid var(--g-border); font-size: 12px; font-weight: 700; color: var(--g-text-faint); }
.bsk_list_sort { display: flex; gap: 14px; }
.bsk_list_sort a { color: var(--g-text-faint); transition: color .12s; }
.bsk_list_sort a:hover { color: var(--g-primary); }
.bsk_list { }
.bsk_list_item { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--g-border); transition: background .12s; position: relative; }
.bsk_list_item:last-child { border-bottom: none; }
.bsk_list_item:hover { background: var(--g-surface-alt); }
.bsk_list_item.bsk_notice { background: rgba(var(--g-primary-rgb),.04); }

.bsk_list_num { flex-shrink: 0; width: 40px; text-align: center; font-size: 12.5px; color: var(--g-text-faint); font-weight: 600; }
.bsk_list_thumb { flex-shrink: 0; width: 76px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--g-surface-alt); }
.bsk_list_thumb img { width: 100%; height: 100%; object-fit: cover; }
.bsk_list_main { flex: 1; min-width: 0; }
.bsk_list_tit { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: var(--g-text); }
.bsk_list_tit a { color: inherit; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
.bsk_list_tit a:hover { color: var(--g-primary); }
.bsk_list_meta { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 12px; color: var(--g-text-faint); flex-wrap: wrap; }
.bsk_list_meta .sv_wrap { color: var(--g-text-sub); font-weight: 600; }
.bsk_list_cmt { color: var(--g-primary); font-weight: 800; }
.bsk_list_side { flex-shrink: 0; display: flex; align-items: center; gap: 16px; font-size: 12px; color: var(--g-text-faint); }
.bsk_list_date { width: 76px; text-align: center; }
.bsk_list_hit { width: 46px; text-align: center; }

.bsk_empty { padding: 70px 20px; text-align: center; color: var(--g-text-faint); font-size: 14px; }
.bsk_empty i { display: block; font-size: 30px; margin-bottom: 12px; color: var(--g-border); }

/* ── 갤러리형 ── */
#bsk_gall_wrap { }
/* 컬럼 수는 관리자가 게시판마다 다르게 설정할 수 있어 list.skin.php 가 인라인 style 로
   --gall-cols 커스텀 프로퍼티만 심어준다(grid-template-columns 자체를 인라인으로 박으면
   반응형 미디어쿼리가 인라인 스타일의 우선순위에 밀려 절대 안 먹는 버그가 있었다 —
   외부 스타일시트는 !important 를 걸어야만 인라인을 이길 수 있으므로 아래 두 미디어쿼리에서
   그렇게 처리한다). */
.bsk_gall_grid { display: grid; grid-template-columns: repeat(var(--gall-cols, 3), 1fr); gap: 20px; }
.bsk_gall_item { position: relative; background: var(--g-surface); border: 1px solid var(--g-border); border-radius: var(--g-radius-md); overflow: visible; transition: transform .15s, box-shadow .15s; }
.bsk_gall_item:hover { transform: translateY(-3px); box-shadow: var(--g-shadow-md); }
.bsk_gall_link { display: block; }
.bsk_gall_thumb { position: relative; aspect-ratio: 3/2; border-radius: var(--g-radius-md) var(--g-radius-md) 0 0; overflow: hidden; background: var(--g-surface-alt); }
.bsk_gall_thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.bsk_gall_item:hover .bsk_gall_thumb img { transform: scale(1.05); }
.bsk_gall_new { position: absolute; top: 10px; left: 10px; }
.bsk_gall_body { padding: 14px 16px 16px; }
.bsk_gall_tit_link { display: block; font-size: 14.5px; font-weight: 700; color: var(--g-text); margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.4; min-height: 2.8em; }
.bsk_gall_tit_link:hover { color: var(--g-primary); }
/* justify-content:space-between + 5개 자식(작성자·구분점·날짜·구분점·조회수)을 폭 제한 없이
   나열하면, 좁은 모바일 갤러리 카드(2열, 카드 폭 150~165px 안팎)에서 작성자 닉네임이 조금만
   길어도 줄바꿈되거나 조회수 칸을 밀어내며 깨졌다 — 작성자 이름만 줄어들고(말줄임), 나머지는
   폭 그대로 유지하도록 고친다. */
.bsk_gall_meta { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--g-text-faint); }
/* .sv_use 는 core get_sideview() 가 만든 .sv_wrap(닉네임 클릭 팝업)을 감싼 실제 flex 자식.
   여기에 min-width:0 + 말줄임을 줘야 하고, 안쪽 .sv_wrap 도 인라인블록이라 자기 폭만큼만
   차지하므로 같이 폭 100%로 늘려줘야 부모의 overflow:hidden/ellipsis 가 실제로 걸린다. */
.bsk_gall_meta .sv_use { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bsk_gall_meta .sv_use .sv_wrap { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.bsk_gall_meta > span:not(.sv_use) { flex-shrink: 0; white-space: nowrap; }

/* ── 게시글 보기 ── */
#bsk_view_wrap { background: var(--g-surface); border: 1px solid var(--g-border); border-radius: var(--g-radius-md); overflow: hidden; box-shadow: var(--g-shadow-sm); margin-bottom: 18px; }
.bsk_view_header { padding: 26px 28px 20px; border-bottom: 1px solid var(--g-border); }
.bsk_view_cate { display: inline-block; font-size: 12px; font-weight: 700; color: var(--g-primary); margin-bottom: 10px; }
.bsk_view_tit { font-size: 23px; font-weight: 800; line-height: 1.4; letter-spacing: -.3px; margin-bottom: 16px; }
.bsk_view_info { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--g-text-faint); }
.bsk_view_name { font-weight: 700; color: var(--g-text); }
.bsk_view_info .gn_dot_sep { color: var(--g-border); }

.bsk_view_body { padding: 28px; font-size: 15.5px; line-height: 1.85; color: var(--g-text); min-height: 120px; }
/* 글쓴이가 에디터에서 검정 등 특정 글자색을 직접 지정해 저장한 경우, 그 인라인 style="color:..."이
   외부 스타일시트보다 우선순위가 높아 다크모드에서도 그대로 남아 어두운 배경에 어두운 글자가
   겹쳐 안 보이는 문제가 있었다 — 다크모드에서는 본문 내부 색 지정을 강제로 무시하고 읽기
   쉬운 기본 글자색으로 통일한다(링크 색만 예외로 유지).
   단, 글쓴이가 배경색까지 같이 지정한 자체 완결형 박스(예: 안내 박스 — 밝은 배경 + 검정/빨강
   글자 조합)는 통째로 제외한다. 배경은 그대로 두고 글자색만 강제로 밝게 바꾸면 밝은 배경에
   밝은 글자가 겹쳐서 오히려 새로 안 보이게 되는 반대 상황이 생긴다(실제로 발생한 사례 —
   구인구직 게시글의 노란 안내 박스). */
html[data-theme="dark"] .bsk_view_body,
html[data-theme="dark"] .bsk_view_body *:not([style*="background"]):not([style*="background"] *),
html[data-theme="dark"] .ctt_body,
html[data-theme="dark"] .ctt_body *:not([style*="background"]):not([style*="background"] *) { color: var(--g-text) !important; }
html[data-theme="dark"] .bsk_view_body a:not([style*="background"]):not([style*="background"] *),
html[data-theme="dark"] .ctt_body a:not([style*="background"]):not([style*="background"] *) { color: var(--g-primary) !important; }
/* 위에서 배경 있는 박스를 통째로 제외했더니, 그 박스 자신이나 안의 글자(예: 표 헤더 <th>,
   안내박스 <li>)가 자기만의 color를 안 정하고 그냥 상속에 맡긴 경우(흔함 — 작성자가 배경만
   지정하고 "당연히 검정 글자겠지" 하고 색은 안 정한 경우), .bsk_view_body 자체에 강제로 걸어둔
   밝은 글자색이 그대로 상속돼 들어가서 밝은 배경(회색/크림색 등)에 밝은 글자가 겹치는 새로운
   문제가 생겼다(실제 사례 — 생활정보 게시글의 "한눈에 보기" 박스, 표 헤더행). 자기 색이 없는
   경우에만 어두운 글자색으로 되돌린다(자기 색을 이미 가진 요소는 :not([style*="color"])에
   걸려 이 규칙 대상에서 빠지므로 원래 색 그대로 유지된다). */
html[data-theme="dark"] .bsk_view_body [style*="background"]:not([style*="color"]),
html[data-theme="dark"] .bsk_view_body [style*="background"] :not([style*="color"]),
html[data-theme="dark"] .ctt_body [style*="background"]:not([style*="color"]),
html[data-theme="dark"] .ctt_body [style*="background"] :not([style*="color"]) { color: #1a1a1a !important; }
.bsk_view_body img, .bsk_view_body video, .bsk_view_body iframe { max-width: 100%; height: auto; border-radius: var(--g-radius-sm); }
.bsk_view_body a, .ctt_body a, .gn_faq_a a { color: var(--g-primary); text-decoration: underline; text-underline-offset: 2px; }
.bsk_view_body ul { list-style: disc; padding-left: 22px; }
.bsk_view_body ol { list-style: decimal; padding-left: 22px; }
.bsk_view_body table { width: 100%; }

.bsk_view_files { padding: 0 28px 20px; }
.bsk_view_files h3 { font-size: 12.5px; font-weight: 700; color: var(--g-text-faint); margin-bottom: 8px; }
.bsk_file_item { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--g-surface-alt); border-radius: var(--g-radius-sm); font-size: 13px; margin-bottom: 6px; }
.bsk_file_item a { color: var(--g-text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bsk_file_item i { color: var(--g-primary); }
.bsk_file_size { color: var(--g-text-faint); font-size: 11.5px; flex-shrink: 0; }

/* 관련 링크 — 첨부파일 목록과 똑같이 무채색 회색 줄로만 처리돼 있던 걸(가장자리 여백도
   빠져있어 카드 테두리에 그대로 붙어 보였다), 눈에 띄는 별도 섹션으로 다시 디자인 */
.bsk_view_links { padding: 22px 28px 24px; border-top: 1px solid var(--g-border); }
.bsk_view_links h3 { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; color: var(--g-text); margin-bottom: 12px; }
.bsk_view_links h3 i { color: var(--g-primary); }
.bsk_link_item {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 8px;
    background: var(--g-surface); border: 1.5px solid var(--g-border); border-left: 3px solid var(--g-primary);
    border-radius: var(--g-radius-sm); text-decoration: none; transition: transform .12s, box-shadow .12s, border-color .12s;
}
.bsk_link_item:last-child { margin-bottom: 0; }
.bsk_link_item:hover { transform: translateY(-2px); box-shadow: var(--g-shadow-md); border-color: var(--g-primary); }
.bsk_link_ico {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: rgba(var(--g-primary-rgb),.1);
    color: var(--g-primary); display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.bsk_link_txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--g-text); font-size: 13.5px; font-weight: 600; }

.bsk_view_actions { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 22px 28px; border-top: 1px solid var(--g-border); }
.bsk_react_btn {
    display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 22px; border-radius: 999px;
    border: 1.5px solid var(--g-border); background: var(--g-surface); color: var(--g-text-sub); font-weight: 700; font-size: 13.5px; cursor: pointer;
    transition: all .15s;
}
.bsk_react_btn:hover { border-color: var(--g-primary); color: var(--g-primary); }
.bsk_react_btn.bsk_react_good:hover, .bsk_react_btn.bsk_react_good.active { border-color: var(--g-primary); background: var(--g-primary); color: #fff; }
.bsk_react_btn.bsk_react_nogood:hover { border-color: var(--g-text-sub); }

.bsk_share { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 28px 22px; }
.bsk_share_btn { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 15px; transition: transform .12s; }
.bsk_share_btn:hover { transform: translateY(-2px); }
.bsk_share_kakao { background: #FEE500; color: #191600; }
.bsk_share_facebook { background: #1877F2; }
.bsk_share_x { background: #000; }
.bsk_share_link { background: var(--g-surface-alt); color: var(--g-text-sub); border: 1px solid var(--g-border); }

.bsk_view_nav { border-top: 1px solid var(--g-border); }
.bsk_view_nav_item { display: flex; align-items: center; gap: 14px; padding: 14px 28px; font-size: 13.5px; border-bottom: 1px solid var(--g-border); }
.bsk_view_nav_item:last-child { border-bottom: none; }
.bsk_view_nav_item span.gn_nav_dir { flex-shrink: 0; width: 60px; color: var(--g-text-faint); font-weight: 700; }
.bsk_view_nav_item a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--g-text); }
.bsk_view_nav_item a:hover { color: var(--g-primary); }

.bsk_view_bottom_bar { display: flex; align-items: center; justify-content: space-between; padding: 18px 2px 0; flex-wrap: wrap; gap: 10px; }

/* ── 댓글 ── */
.bsk_cmt_section { background: var(--g-surface); border: 1px solid var(--g-border); border-radius: var(--g-radius-md); padding: 24px 26px; margin-bottom: 18px; box-shadow: var(--g-shadow-sm); }
.bsk_cmt_head { font-size: 15px; font-weight: 800; margin-bottom: 16px; }
.bsk_cmt_head span { color: var(--g-primary); }
.bsk_cmt_item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--g-border); }
.bsk_cmt_item:last-child { border-bottom: none; }
.bsk_cmt_reply { margin-left: 40px; background: var(--g-surface-alt); border-radius: 10px; padding: 12px 14px; }
.bsk_cmt_avatar { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: var(--g-surface-alt); }
.bsk_cmt_avatar img { width: 100%; height: 100%; object-fit: cover; }
.bsk_cmt_body { flex: 1; min-width: 0; }
.bsk_cmt_top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.bsk_cmt_name { font-size: 13.5px; font-weight: 700; color: var(--g-text); }
.bsk_cmt_date { font-size: 11.5px; color: var(--g-text-faint); }
.bsk_cmt_content { font-size: 14px; color: var(--g-text); line-height: 1.6; }
.bsk_cmt_actions { margin-top: 6px; display: flex; gap: 12px; }
.bsk_cmt_actions button, .bsk_cmt_actions a { background: none; border: none; padding: 0; font-size: 12px; color: var(--g-text-faint); cursor: pointer; font-weight: 600; }
.bsk_cmt_actions button:hover, .bsk_cmt_actions a:hover { color: var(--g-primary); }

.bsk_cmt_form_wrap { background: var(--g-surface); border: 1px solid var(--g-border); border-radius: var(--g-radius-md); padding: 20px 22px; margin-bottom: 26px; box-shadow: var(--g-shadow-sm); }
.bsk_cmt_form_wrap textarea { width: 100%; min-height: 80px; border: 1.5px solid var(--g-border); border-radius: var(--g-radius-sm); padding: 12px 14px; background: var(--g-surface); color: var(--g-text); font-size: 14px; resize: vertical; outline: none; }
.bsk_cmt_form_wrap textarea:focus { border-color: var(--g-primary); }
.bsk_cmt_form_footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; background: var(--g-surface-alt); border-radius: var(--g-radius-sm); padding: 10px 14px; }

/* ── 글쓰기 ── */
#bsk_write_wrap { }
.bsk_write_card { background: var(--g-surface); border: 1px solid var(--g-border); border-radius: var(--g-radius-md); padding: 26px 28px; box-shadow: var(--g-shadow-sm); }
.bsk_write_opts { display: flex; flex-wrap: wrap; gap: 18px; padding: 14px 0; border-top: 1px dashed var(--g-border); border-bottom: 1px dashed var(--g-border); margin: 6px 0 20px; }
.bsk_write_file_row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; }
.bsk_write_actions { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }

/* ============================================================
   7. 최신글 위젯 (pl_*)
   ============================================================ */
.pl_list { }
.pl_item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 18px; min-height: 40px; border-bottom: 1px solid var(--g-border); }
.pl_item:last-child { border-bottom: none; }
.pl_link { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; padding: 9px 0; font-size: 13.5px; color: var(--g-text); }
.pl_link:hover { color: var(--g-primary); }
.pl_link:hover .pl_tit { color: var(--g-primary); }
.pl_tit { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl_notice .pl_tit { font-weight: 700; }
.pl_tit.pl_current { font-weight: 800; color: var(--g-primary); }
.pl_icon_lock { color: var(--g-text-faint); font-size: 11px; }
.bsk_icon_lock { color: var(--g-text-faint); font-size: 12px; margin-right: 4px; }
.pl_cmt { flex-shrink: 0; font-size: 11px; font-weight: 800; color: var(--g-primary); }
.pl_date { flex-shrink: 0; font-size: 11px; color: var(--g-text-faint); }
.pl_more { display: block; text-align: center; padding: 10px 0; font-size: 12px; font-weight: 700; color: var(--g-text-faint); border-top: 1px solid var(--g-border); }
.pl_more:hover { color: var(--g-primary); }
.pl_empty { padding: 20px; font-size: 13px; color: var(--g-text-faint); text-align: center; }

/* ============================================================
   8. 회원 영역
   ============================================================ */
.pms_wrap { max-width: 460px; margin: 30px auto 60px; padding: 0 20px; box-sizing: border-box; }
.pms_card { background: var(--g-surface); border: 1px solid var(--g-border); border-radius: var(--g-radius-lg); padding: 40px; box-shadow: var(--g-shadow-sm); }
.pms_logo { text-align: center; font-size: 24px; font-weight: 800; margin-bottom: 4px; }
.pms_logo .gn_logo_dot { color: var(--g-primary); }
.pms_sub { text-align: center; font-size: 13px; color: var(--g-text-sub); margin-bottom: 28px; }
.pms_section { margin-bottom: 26px; }
.pms_section:last-child { margin-bottom: 0; }
.pms_section h3 { font-size: 13px; font-weight: 800; color: var(--g-text-faint); margin-bottom: 10px; letter-spacing: .3px; text-transform: uppercase; }
.pms_field { margin-bottom: 12px; }
.pms_label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.pms_input { width: 100%; box-sizing: border-box; height: 48px; padding: 0 16px; border: 1.5px solid var(--g-border); border-radius: var(--g-radius-sm); background: var(--g-surface); color: var(--g-text); font-size: 14.5px; outline: none; transition: border-color .15s; }
.pms_input:focus { border-color: var(--g-primary); }
.pms_row { display: flex; gap: 10px; }
.pms_row > div { flex: 1; }
.pms_btn_submit { display: block; width: 100%; height: 50px; border: none; border-radius: var(--g-radius-sm); background: var(--g-primary); color: #fff; font-size: 15px; font-weight: 800; cursor: pointer; margin-top: 6px; transition: background .15s; }
.pms_btn_submit:hover { background: var(--g-primary-hover); }
.pms_options { display: flex; align-items: center; justify-content: space-between; margin: 14px 0; font-size: 12.5px; color: var(--g-text-sub); }
.pms_links { display: flex; justify-content: center; gap: 10px; margin-top: 18px; font-size: 12.5px; color: var(--g-text-faint); }
.pms_links a:hover { color: var(--g-primary); }
.pms_divider { display: flex; align-items: center; gap: 12px; margin: 24px 0; color: var(--g-text-faint); font-size: 12px; }
.pms_divider::before, .pms_divider::after { content: ''; flex: 1; height: 1px; background: var(--g-border); }
.pms_agree_box { border: 1px solid var(--g-border); border-radius: var(--g-radius-sm); padding: 16px; max-height: 160px; overflow-y: auto; font-size: 12.5px; color: var(--g-text-sub); line-height: 1.7; margin-bottom: 14px; background: var(--g-surface-alt); }
.pms_agree_row { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13.5px; }
.pms_agree_all { border-top: 1px solid var(--g-border); margin-top: 8px; padding-top: 12px; font-weight: 700; }

.pms_wrap_wide { max-width: 640px; }
.pms_card_wide { padding: 40px; }
.pms_agree_notice { display: flex; align-items: center; gap: 10px; background: rgba(var(--g-primary-rgb),.06); color: var(--g-primary); border-radius: var(--g-radius-sm); padding: 12px 16px; font-size: 13px; font-weight: 600; margin-bottom: 20px; }
.pms_agree_section { border: 1px solid var(--g-border); border-radius: var(--g-radius-sm); padding: 16px 18px; margin-bottom: 14px; }
.pms_agree_head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pms_agree_title { font-size: 13.5px; font-weight: 800; }
.pms_agree_chk { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--g-text-sub); cursor: pointer; }
.pms_agree_textarea { width: 100%; height: 130px; resize: vertical; border: 1px solid var(--g-border); border-radius: var(--g-radius-sm); padding: 12px; font-size: 12px; color: var(--g-text-sub); background: var(--g-surface-alt); }
.pms_agree_table_wrap { overflow-x: auto; }
.pms_agree_table { width: 100%; border-collapse: collapse; font-size: 12px; }
.pms_agree_table th, .pms_agree_table td { border: 1px solid var(--g-border); padding: 8px 10px; text-align: center; color: var(--g-text-sub); }
.pms_agree_table th { background: var(--g-surface-alt); color: var(--g-text); }
.pms_agree_chkall { text-align: center; padding: 14px 0; border-top: 1px dashed var(--g-border); margin: 6px 0 18px; font-weight: 700; font-size: 13.5px; }
.pms_agree_chkall label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.pms_actions { display: flex; gap: 10px; }
.pms_actions .pms_btn_submit { margin-top: 0; }
.pms_btn_cancel { flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0 24px; height: 50px; border: 1.5px solid var(--g-border); border-radius: var(--g-radius-sm); color: var(--g-text-sub); font-weight: 700; }
.pms_btn_cancel:hover { border-color: var(--g-primary); color: var(--g-primary); }
.pms_title { font-size: 20px; font-weight: 800; text-align: center; margin-bottom: 22px; }
.pms_section_title { font-size: 13px; font-weight: 800; color: var(--g-text-faint); margin-bottom: 12px; letter-spacing: .3px; text-transform: uppercase; }
.pms_fields { display: flex; flex-direction: column; gap: 14px; }
.pms_grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pms_req { color: var(--g-primary); }
.pms_tip, .pms_cert_desc { display: block; font-size: 11px; font-weight: 400; color: var(--g-text-faint); margin-top: 3px; text-transform: none; letter-spacing: 0; }
.pms_msg { display: block; font-size: 11.5px; margin-top: 5px; min-height: 14px; }
.pms_msg.ok { color: var(--g-success); }
.pms_msg.err { color: var(--g-primary); }
.pms_cert_btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pms_btn_cert { height: 42px; padding: 0 18px; border-radius: var(--g-radius-sm); border: 1.5px solid var(--g-border); background: var(--g-surface); color: var(--g-text); font-weight: 700; font-size: 13px; cursor: pointer; }
.pms_btn_cert:hover { border-color: var(--g-primary); color: var(--g-primary); }
.pms_req_badge { font-size: 11px; font-weight: 800; color: var(--g-primary); }
.pms_cert_done { margin-top: 10px; padding: 10px 14px; background: rgba(31,138,76,.08); color: var(--g-success); border-radius: var(--g-radius-sm); font-size: 12.5px; font-weight: 700; }
.pms_addr_row { display: flex; gap: 8px; margin-bottom: 6px; }
.pms_btn_addr { flex-shrink: 0; height: 48px; padding: 0 16px; border-radius: var(--g-radius-sm); border: 1.5px solid var(--g-border); background: var(--g-surface-alt); color: var(--g-text); font-weight: 700; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.pms_btn_addr:hover { border-color: var(--g-primary); color: var(--g-primary); }
.pms_captcha { margin: 18px 0; }
@media (max-width: 640px) { .pms_grid2 { grid-template-columns: 1fr; } }

/* 팝업(회원 관련 새창) 공용 */
.popup_win { max-width: 480px; margin: 0 auto; }
body.gn_popup_body { background: var(--g-bg); }
.popup_header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--g-border); }
.popup_header h1, .popup_header h2 { font-size: 16px; font-weight: 800; }
.popup_body { padding: 22px; }
.popup_footer { display: flex; gap: 8px; padding: 16px 22px; border-top: 1px solid var(--g-border); }
.popup_btn_primary { flex: 1; height: 44px; border: none; border-radius: var(--g-radius-sm); background: var(--g-primary); color: #fff; font-weight: 700; cursor: pointer; }
.popup_btn_cancel { flex: 1; height: 44px; border: 1px solid var(--g-border); border-radius: var(--g-radius-sm); background: var(--g-surface); color: var(--g-text-sub); font-weight: 700; cursor: pointer; }

/* 쪽지(ms_*) */
.ms_tabs { display: flex; border-bottom: 1px solid var(--g-border); margin-bottom: 14px; }
.ms_tabs a { flex: 1; text-align: center; padding: 12px 0; font-size: 13.5px; font-weight: 700; color: var(--g-text-faint); border-bottom: 2px solid transparent; }
.ms_tabs a.on { color: var(--g-primary); border-bottom-color: var(--g-primary); }
.ms_item { display: flex; align-items: center; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--g-border); }
.ms_item.unread .ms_from { font-weight: 800; }
.ms_from { flex: 1; min-width: 0; font-size: 13.5px; }
.ms_snippet { color: var(--g-text-faint); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.ms_date { font-size: 11.5px; color: var(--g-text-faint); flex-shrink: 0; }
.ms_bubble_mine { background: var(--g-primary); color: #fff; border-radius: 16px 16px 4px 16px; padding: 12px 16px; margin-left: auto; max-width: 78%; }
.ms_bubble_theirs { background: var(--g-surface-alt); color: var(--g-text); border-radius: 16px 16px 16px 4px; padding: 12px 16px; max-width: 78%; }

/* 포인트(pw_*) / 스크랩(sc_*) 공용 리스트 */
.pw_list, .sc_list { }
.pw_item, .sc_item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 4px; border-bottom: 1px solid var(--g-border); font-size: 13.5px; }
.pw_point_plus { color: var(--g-success); font-weight: 800; }
.pw_point_minus { color: var(--g-primary); font-weight: 800; }
.pw_summary { display: flex; justify-content: space-between; align-items: center; background: var(--g-surface-alt); border-radius: var(--g-radius-sm); padding: 16px 20px; margin-bottom: 16px; }
.pw_summary strong { font-size: 22px; color: var(--g-primary); }

/* 프로필 팝업(pp_*) */
.pp_header { display: flex; align-items: center; gap: 14px; padding: 24px 22px; border-bottom: 1px solid var(--g-border); }
.pp_avatar { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--g-surface-alt); flex-shrink: 0; }
.pp_avatar img { width: 100%; height: 100%; object-fit: cover; }
.pp_nick { font-size: 16px; font-weight: 800; }
.pp_meta { font-size: 12px; color: var(--g-text-faint); margin-top: 3px; }
.pp_body dl { display: flex; padding: 10px 0; border-bottom: 1px solid var(--g-border); font-size: 13px; }
.pp_body dt { width: 90px; color: var(--g-text-faint); font-weight: 700; }
.pp_body dd { flex: 1; }
.pp_actions { display: flex; gap: 8px; padding: 16px 22px; }

/* formmail(fm_*) */
.fm_type_row { display: flex; gap: 14px; margin-bottom: 14px; }

/* 비밀번호 찾기/재설정 탭(pfl_*) */
.pfl_tabs { display: flex; gap: 6px; margin-bottom: 20px; }
.pfl_tabs button { flex: 1; min-height: 40px; padding: 6px 8px; border-radius: 999px; border: 1.5px solid var(--g-border); background: var(--g-surface); color: var(--g-text-sub); font-weight: 700; font-size: 13px; cursor: pointer; line-height: 1.3; } /* height 고정 대신 min-height — 320px 폭에서 두 줄로 접혀도 알약 밖으로 안 튀어나가게 */
.pfl_tabs button.on { background: var(--g-primary); border-color: var(--g-primary); color: #fff; }

/* ============================================================
   9. 내용관리 / FAQ / 접속자 / 검색 / 방문자
   ============================================================ */
#ctt { background: var(--g-surface); border: 1px solid var(--g-border); border-radius: var(--g-radius-md); padding: 32px; box-shadow: var(--g-shadow-sm); }
.ctt_header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; margin-bottom: 20px; border-bottom: 2px solid var(--g-ink); }
.ctt_title { font-size: 21px; font-weight: 800; }
.ctt_admin_link { font-size: 12px; color: var(--g-text-faint); }
.ctt_admin_link:hover { color: var(--g-primary); }
.ctt_body { font-size: 15px; line-height: 1.85; color: var(--g-text); overflow-wrap: break-word; word-break: break-word; }
.ctt_body img { max-width: 100%; height: auto; }
/* 관리자가 워드/한글에서 붙여넣은 고정폭 표·긴 URL이 본문 밖으로 밀려나가 페이지 전체에
   불필요한 가로 스크롤을 만드는 문제 방지(이용약관 등 내용관리 페이지에서 흔함) */
.ctt_body table { max-width: 100%; border-collapse: collapse; }
.ctt_body pre { white-space: pre-wrap; overflow-wrap: break-word; }
.ctt_body > * { max-width: 100%; }

.gn_faq_cate { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.gn_faq_cate a { display: inline-block; padding: 8px 18px; border-radius: 999px; border: 1.5px solid var(--g-border); font-size: 13px; font-weight: 600; color: var(--g-text-sub); background: var(--g-surface); }
.gn_faq_cate a.on { background: var(--g-primary); border-color: var(--g-primary); color: #fff; }
.gn_faq_list { background: var(--g-surface); border: 1px solid var(--g-border); border-radius: var(--g-radius-md); overflow: hidden; box-shadow: var(--g-shadow-sm); }
.gn_faq_item { border-bottom: 1px solid var(--g-border); }
.gn_faq_item:last-child { border-bottom: none; }
.gn_faq_q { display: flex; align-items: center; gap: 14px; padding: 18px 22px; cursor: pointer; font-size: 14.5px; font-weight: 700; }
.gn_faq_q .gn_faq_qmark { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--g-primary); color: #fff; font-size: 13px; display: flex; align-items: center; justify-content: center; font-weight: 800; }
.gn_faq_q .gn_faq_caret { margin-left: auto; color: var(--g-text-faint); transition: transform .2s; }
.gn_faq_item.open .gn_faq_caret { transform: rotate(180deg); color: var(--g-primary); }
.gn_faq_himg, .gn_faq_timg { border-radius: var(--g-radius-md); overflow: hidden; margin-bottom: 20px; }
.gn_faq_himg img, .gn_faq_timg img { width: 100%; display: block; }
.gn_faq_a { display: none; padding: 0 22px 22px 62px; font-size: 13.5px; color: var(--g-text-sub); line-height: 1.8; }
.gn_faq_item.open .gn_faq_a { display: block; }

.gn_connect_summary { background: var(--g-surface); border: 1px solid var(--g-border); border-radius: var(--g-radius-md); padding: 20px 24px; margin-bottom: 18px; text-align: center; box-shadow: var(--g-shadow-sm); }
.gn_connect_summary strong { color: var(--g-primary); font-size: 24px; }
.gn_connect_list { background: var(--g-surface); border: 1px solid var(--g-border); border-radius: var(--g-radius-md); overflow: hidden; box-shadow: var(--g-shadow-sm); }
.gn_connect_item { display: flex; align-items: center; gap: 12px; padding: 13px 20px; border-bottom: 1px solid var(--g-border); font-size: 13px; }
.gn_connect_item:last-child { border-bottom: none; }
.gn_connect_item .gn_conn_loc { flex: 1; min-width: 0; color: var(--g-text-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.gn_sch_summary {
    display: flex; align-items: center; gap: 10px; padding: 16px 20px; margin-bottom: 18px;
    background: var(--g-surface); border: 1px solid var(--g-border); border-radius: var(--g-radius-md);
    font-size: 13.5px; color: var(--g-text-sub); box-shadow: var(--g-shadow-sm);
}
.gn_sch_summary i { color: var(--g-primary); font-size: 15px; }
.gn_sch_summary strong { color: var(--g-primary); }
/* 코어(bbs/search.php)가 만드는 게시판 탭은 <li> 조각(class="sch_on")으로 넘어오는데,
   전에는 <nav> 안에 <ul> 없이 그 <li>를 그대로 흘려보내고(부모 리스트 없는 잘못된 마크업),
   활성 탭 강조 클래스도 실제로는 "on"이 아니라 "sch_on"이라서 어느 탭을 보고 있는지
   전혀 표시가 안 됐다. */
.gn_sch_board_tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.gn_sch_board_tabs a { display: inline-block; padding: 7px 16px; border-radius: 999px; border: 1.5px solid var(--g-border); background: var(--g-surface); font-size: 12.5px; font-weight: 600; color: var(--g-text-sub); transition: all .12s; }
.gn_sch_board_tabs a:hover { border-color: var(--g-primary); color: var(--g-primary); }
.gn_sch_board_tabs a.sch_on { background: var(--g-primary); border-color: var(--g-primary); color: #fff; }
.gn_sch_board_tabs a .cnt_cmt { color: inherit; opacity: .75; font-weight: 700; margin-left: 4px; }

.gn_sch_group {
    background: var(--g-surface); border: 1px solid var(--g-border); border-radius: var(--g-radius-md);
    margin-bottom: 18px; overflow: hidden; box-shadow: var(--g-shadow-sm);
}
.gn_sch_group h3 { font-size: 14.5px; font-weight: 800; padding: 15px 20px; background: var(--g-surface-alt); border-bottom: 2px solid var(--g-ink); }
.gn_sch_group h3 a { color: inherit; }
.gn_sch_group h3 a:hover { color: var(--g-primary); }
.gn_sch_result_item { padding: 16px 20px; border-bottom: 1px solid var(--g-border); transition: background .12s; }
.gn_sch_result_item:last-child { border-bottom: none; }
.gn_sch_result_item:hover { background: var(--g-surface-alt); }
.gn_sch_result_item a.gn_sch_tit { display: block; font-size: 14.5px; font-weight: 700; color: var(--g-text); }
.gn_sch_result_item a.gn_sch_tit:hover { color: var(--g-primary); }
.gn_sch_result_item p { font-size: 13px; color: var(--g-text-sub); margin-top: 6px; line-height: 1.6; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gn_sch_result_meta { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--g-text-faint); margin-top: 8px; }
.gn_sch_result_meta .sv_member { display: inline-flex; align-items: center; gap: 6px; color: var(--g-text-sub); font-weight: 600; }
.gn_sch_result_meta .profile_img { display: inline-flex; }
.gn_sch_result_meta .profile_img img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; border: 1px solid var(--g-border); }
.sch_word { background: rgba(var(--g-accent-rgb),.35); color: var(--g-text); padding: 1px 3px; border-radius: 3px; }

/* 방문자현황이 .gn_widget_box(카드) 안에 들어가는데, 예전엔 이 그리드 자체에도 배경/테두리/
   그림자를 따로 줘서 "카드 안에 카드"처럼 겹쳐 보이고 안쪽 여백도 서로 안 맞았다 — 로그인
   위젯의 .ol_stats(포인트/쪽지/스크랩)와 같은 방식으로, 부모 위젯 카드에 얹혀사는 얇은 구분선
   그리드로 통일한다. */
.gn_visit_list { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 18px 4px; border: 1px solid var(--g-border); border-radius: 10px; overflow: hidden; }
.gn_visit_item { text-align: center; padding: 12px 4px; }
.gn_visit_item + .gn_visit_item { border-left: 1px solid var(--g-border); }
.gn_visit_item strong { display: block; font-size: 15px; font-weight: 800; color: var(--g-primary); margin-bottom: 4px; }
.gn_visit_item span { font-size: 11px; color: var(--g-text-faint); }
.visit_admin_link { display: block; text-align: center; font-size: 11.5px; color: var(--g-text-faint); margin: 10px 18px 4px; }

/* 위젯형 방문자/인기검색어(사이드바) */
.gn_pop_list { padding: 6px 0; }
.gn_pop_item { display: flex; align-items: center; gap: 10px; padding: 8px 18px; font-size: 13px; }
.gn_pop_rank { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--g-surface-alt); color: var(--g-text-faint); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.gn_pop_rank.gn_top3 { background: var(--g-primary); color: #fff; }
.gn_pop_kw { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--g-text); }
.gn_pop_kw:hover { color: var(--g-primary); }

/* ============================================================
   10. 푸터 / ToTop
   ============================================================ */
#gn_footer { background: var(--g-ink); color: rgba(255,255,255,.6); margin-top: 40px; }
#gn_footer .gn_inner { padding: 40px 20px 30px; }
.gn_footer_top { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; flex-wrap: wrap; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: 20px; }
.gn_footer_brand { font-size: 20px; font-weight: 800; color: #fff; }
.gn_footer_brand .gn_logo_dot { color: var(--g-primary); }
.gn_footer_desc { font-size: 12.5px; color: rgba(255,255,255,.5); margin-top: 8px; max-width: 320px; line-height: 1.7; }
.gn_footer_menu { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.gn_footer_menu a { font-size: 13px; color: rgba(255,255,255,.72); }
.gn_footer_menu a:hover { color: var(--g-accent); }
.gn_footer_sns { display: flex; gap: 10px; }
.gn_footer_sns a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.gn_footer_sns a:hover { background: var(--g-primary); }
.gn_footer_legal { display: flex; flex-wrap: wrap; gap: 6px 16px; padding-bottom: 16px; }
.gn_footer_legal a { font-size: 12px; color: rgba(255,255,255,.55); }
.gn_footer_legal a:hover { color: var(--g-accent); }
.gn_footer_legal_strong { color: rgba(255,255,255,.85) !important; font-weight: 700; }
.gn_footer_bottom { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; color: rgba(255,255,255,.4); flex-wrap: wrap; gap: 8px; }
.gn_footer_flag { display: inline-flex; gap: 3px; vertical-align: middle; margin-right: 8px; }
.gn_footer_flag span { display: inline-block; width: 12px; height: 4px; border-radius: 1px; }
.gn_footer_flag span:nth-child(1) { background: #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); } /* 검정 푸터(--g-ink) 위에서 검정 막대가 거의 안 보이던 것 — 옅은 테두리로 구분 */
.gn_footer_flag span:nth-child(2) { background: var(--g-primary); }
.gn_footer_flag span:nth-child(3) { background: var(--g-accent); }

#gn_totop_btn {
    position: fixed; right: 24px; bottom: 24px; width: 48px; height: 48px; border-radius: 50%;
    background: var(--g-primary); color: #fff; border: none; box-shadow: var(--g-shadow-md);
    display: flex; align-items: center; justify-content: center; font-size: 17px; cursor: pointer;
    opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .2s; z-index: 500;
}
#gn_totop_btn.show { opacity: 1; visibility: visible; transform: translateY(0); }
#gn_totop_btn:hover { background: var(--g-primary-hover); }

/* ============================================================
   11. 관리자 설정 모달(pe_*) / 배너 관리(gau_*) / 로그인 위젯(ol_*)
   ============================================================ */
.pe_overlay { display: none; position: fixed; inset: 0; background: rgba(10,10,12,.6); z-index: 9000; align-items: center; justify-content: center; }
.pe_overlay.open { display: flex; }
.pe_modal { background: var(--g-surface); border-radius: 16px; width: 560px; max-width: calc(100vw - 32px); max-height: calc(100vh - 60px); display: flex; flex-direction: column; box-shadow: var(--g-shadow-lg); }
.pe_header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 0; }
.pe_title { font-size: 16px; font-weight: 800; }
.pe_close { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--g-text-faint); }
.pe_tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--g-border); padding: 12px 22px 0; overflow-x: auto; }
.pe_tab { padding: 9px 15px; background: none; border: none; cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--g-text-faint); border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.pe_tab.active { color: var(--g-primary); border-bottom-color: var(--g-primary); }
.pe_body { flex: 1; overflow-y: auto; padding: 20px 22px; }
.pe_pane { display: none; }
.pe_pane.active { display: block; }
.pe_label { display: block; font-size: 12px; font-weight: 700; color: var(--g-text-sub); margin-bottom: 5px; }
.pe_input, .pe_textarea { width: 100%; box-sizing: border-box; border: 1.5px solid var(--g-border); border-radius: var(--g-radius-sm); padding: 10px 12px; font-size: 13px; color: var(--g-text); background: var(--g-surface); margin-bottom: 12px; outline: none; }
.pe_input { height: 40px; }
.pe_input:focus, .pe_textarea:focus { border-color: var(--g-primary); }
.pe_color_swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.pe_color_swatch { display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 2px solid transparent; cursor: pointer; font-size: 12.5px; font-weight: 700; color: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.pe_color_swatch.selected { border-color: var(--g-text); }
.pe_color_swatch i { visibility: hidden; font-size: 11px; }
.pe_color_swatch.selected i { visibility: visible; }
.pe_footer { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--g-border); }
.pe_msg { font-size: 12px; flex: 1; }
.pe_msg.ok { color: var(--g-success); }
.pe_msg.err { color: var(--g-primary); }
.pe_btn_save { height: 40px; padding: 0 20px; background: var(--g-primary); border: none; color: #fff; border-radius: var(--g-radius-sm); font-size: 13px; font-weight: 800; cursor: pointer; }
.pe_btn_save:hover { background: var(--g-primary-hover); }
.pe_btn_upload { height: 40px; padding: 0 14px; border: 1.5px solid var(--g-primary); color: var(--g-primary); background: none; border-radius: var(--g-radius-sm); font-size: 12px; font-weight: 700; cursor: pointer; }
.pe_row { display: flex; gap: 8px; align-items: center; }
.pe_row .pe_input { flex: 1; margin-bottom: 0; }
.pe_fmenu_row { display: flex; gap: 6px; margin-bottom: 6px; }
.pe_fmenu_row .pe_input { margin-bottom: 0; flex: 1; }
.pe_del_row { background: none; border: none; color: var(--g-text-faint); font-size: 17px; cursor: pointer; }
.pe_del_row:hover { color: var(--g-primary); }
.pe_btn_add { width: 100%; padding: 9px; border: 1.5px dashed var(--g-primary); border-radius: var(--g-radius-sm); background: none; color: var(--g-primary); font-size: 13px; cursor: pointer; }

/* 배너 통합관리 페이지 */
#genau_admin_util { background: var(--g-bg); min-height: 100vh; padding: 36px 20px 80px; font-family: var(--g-font); color: var(--g-text); }
.gau_wrap { max-width: 780px; margin: 0 auto; }
.gau_h1 { font-size: 24px; font-weight: 800; margin-bottom: 6px; }
.gau_desc { font-size: 13.5px; color: var(--g-text-sub); margin-bottom: 22px; }
.gau_tabs { display: flex; gap: 8px; margin-bottom: 24px; }
.gau_tabs a { padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--g-border); font-size: 13px; font-weight: 700; color: var(--g-text-sub); background: var(--g-surface); }
.gau_tabs a.on { background: var(--g-ink); border-color: var(--g-ink); color: #fff; }
.gau_section { background: var(--g-surface); border: 1px solid var(--g-border); border-radius: var(--g-radius-md); padding: 22px 24px; margin-bottom: 20px; box-shadow: var(--g-shadow-sm); }
.gau_section h2 { font-size: 14.5px; font-weight: 800; margin-bottom: 16px; padding-left: 12px; border-left: 3px solid var(--g-primary); }
.gau_empty { color: var(--g-text-faint); font-size: 13px; text-align: center; padding: 20px 0; }
.gau_bn_list li { display: flex; align-items: center; gap: 14px; padding: 12px 4px; border-bottom: 1px solid var(--g-border); }
.gau_bn_list li:last-child { border-bottom: none; }
.gau_bn_thumb { flex-shrink: 0; width: 96px; height: 56px; border-radius: var(--g-radius-sm); overflow: hidden; background: var(--g-surface-alt); }
.gau_bn_thumb img { width: 100%; height: 100%; object-fit: cover; }
.gau_bn_info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gau_bn_info strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gau_bn_info em { font-style: normal; font-size: 11.5px; color: var(--g-text-faint); }
.gau_bn_order { display: flex; gap: 4px; }
.gau_bn_order button { width: 30px; height: 30px; border: 1px solid var(--g-border); background: var(--g-surface); border-radius: 6px; cursor: pointer; color: var(--g-text-sub); }
.gau_bn_order button:disabled { opacity: .3; cursor: default; }
.gau_bn_del { background: none; border: none; color: var(--g-text-faint); font-size: 12px; cursor: pointer; font-weight: 600; }
.gau_bn_del:hover { color: var(--g-primary); }
.gau_form p { margin-bottom: 12px; }
.gau_form label { display: block; font-size: 12.5px; font-weight: 700; color: var(--g-text-sub); margin-bottom: 5px; }
.gau_form input[type="text"], .gau_form input[type="number"], .gau_form input[type="file"] { width: 100%; box-sizing: border-box; height: 40px; border: 1.5px solid var(--g-border); border-radius: var(--g-radius-sm); padding: 0 12px; font-size: 13px; background: var(--g-surface); color: var(--g-text); }
.gau_form_inline { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.gau_form_inline label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.gau_form_inline input { width: 110px !important; }
.gau_btn_primary { height: 40px; padding: 0 20px; background: var(--g-primary); color: #fff; border: none; border-radius: var(--g-radius-sm); font-weight: 800; font-size: 13px; cursor: pointer; }
.gau_btn_primary:hover { background: var(--g-primary-hover); }
.gau_msg { font-size: 12px; margin-left: 10px; }
.gau_msg.ok { color: var(--g-success); }
.gau_msg.err { color: var(--g-primary); }

/* 로그인 위젯(ol_*) */
.ol_wrap { padding: 18px; }
.ol_inputs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.ol_input { width: 100%; height: 40px; padding: 0 12px; border: 1.5px solid var(--g-border); border-radius: var(--g-radius-sm); font-size: 13px; background: var(--g-surface); color: var(--g-text); outline: none; }
.ol_input:focus { border-color: var(--g-primary); }
.ol_btn_login { display: block; width: 100%; height: 42px; background: var(--g-primary); color: #fff; border: none; border-radius: var(--g-radius-sm); font-size: 13.5px; font-weight: 800; text-align: center; cursor: pointer; margin-bottom: 10px; }
.ol_btn_login:hover { background: var(--g-primary-hover); }
.ol_foot { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.ol_auto { display: flex; align-items: center; gap: 6px; color: var(--g-text-faint); cursor: pointer; }
.ol_auto input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--g-primary); cursor: pointer; }
.ol_links { display: flex; gap: 8px; color: var(--g-text-faint); }
.ol_links a:hover { color: var(--g-primary); }
.ol_after { padding: 16px 18px; }
.ol_profile { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--g-border); }
.ol_avatar img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid var(--g-border); }
.ol_nick { font-size: 15px; font-weight: 800; }
.ol_greeting { font-size: 12.5px; color: var(--g-text-faint); }
.ol_stats { display: flex; text-align: center; margin-bottom: 14px; border: 1px solid var(--g-border); border-radius: 10px; overflow: hidden; }
.ol_stats li { flex: 1; }
.ol_stats li + li { border-left: 1px solid var(--g-border); }
.ol_stats a { display: flex; flex-direction: column; gap: 4px; padding: 12px 4px; }
.ol_stats a:hover { background: var(--g-surface-alt); }
.ol_stat_label { font-size: 11px; color: var(--g-text-faint); }
.ol_stat_val { font-size: 15px; font-weight: 800; }
.ol_stat_new { color: var(--g-primary); }
.ol_actions { display: flex; gap: 6px; }
.ol_action_link { flex: 1; text-align: center; padding: 12px 0; font-size: 12px; font-weight: 700; color: var(--g-text-sub); border: 1px solid var(--g-border); border-radius: var(--g-radius-sm); }
.ol_action_link:hover { border-color: var(--g-primary); color: var(--g-primary); }

/* ============================================================
   12. 반응형
   ============================================================ */
@media (max-width: 1023.98px) {
    /* .gn_board_main 의 데스크톱 width:0(가로 flex 레이아웃에서 내부 테이블 등이
       flex-basis 를 넘겨 컨테이너를 밀어내는 것을 막기 위한 트릭)을 세로 스택으로
       바뀌는 모바일에서도 안 풀어주면, align-items:flex-start 때문에 진짜 폭 0으로
       찌그러진다 — 특히 히어로 배너처럼 자체 overflow:hidden 을 가진 블록은
       완전히 안 보이거나 실선처럼 깨져 보인다(실제 있었던 버그, 2026-09 수정). */
    .gn_board_layout { flex-direction: column; }
    .gn_board_main { width: 100%; }
    .gn_board_side { width: 100%; flex-direction: row; flex-wrap: wrap; }
    .gn_board_side .gn_widget_box { flex: 1 1 260px; }

    #gn_topbar .gn_topbar_left a:not(:first-child) { display: none; }
    /* 오른쪽 유틸 링크는 로그인 상태/관리자 여부에 따라 최대 5~6개까지 늘어나 좁은 화면에서
       가로 스크롤이 필요할 수 있는데, 예전 검정 배경일 땐 안 튀었지만 밝은 배경으로 바뀌면서
       스크롤 가능하다는 표시가 하나도 없어 "잘린 것"처럼 보였다 — 오른쪽 끝을 페이드 처리해
       스크롤 가능함을 암시한다. */
    #gn_topbar .gn_topbar_right {
        mask-image: linear-gradient(to left, transparent 0, #000 20px);
        -webkit-mask-image: linear-gradient(to left, transparent 0, #000 20px);
    }
    #gn_header .gn_inner { height: 68px; gap: 12px; }
    .gn_logo_text { font-size: 24px; }
    .gn_search_wrap { max-width: none; }
    .gn_header_banner { display: none; }
    .gn_menu_btn { display: flex; }

    #gn_gnb { display: none; position: fixed; top: 0; right: 0; width: 82%; max-width: 340px; height: 100%;
        background: var(--g-ink); z-index: 999; overflow-y: auto; box-shadow: -8px 0 30px rgba(0,0,0,.3); }
    #gn_gnb.gn_mobile_open { display: block; animation: gn_slide_in .2s ease; }
    @keyframes gn_slide_in { from { transform: translateX(100%); } to { transform: translateX(0); } }
    .gn_gnb_mobile_user { display: flex; flex-wrap: wrap; gap: 10px 14px; padding: 20px; border-bottom: 1px solid rgba(255,255,255,.12); }
    .gn_gnb_mobile_user a { color: #fff; font-size: 13px; font-weight: 700; }
    /* 640px 이하에서는 헤더의 검색창 자체를 숨기므로(.gn_search_wrap), 햄버거 메뉴 안에
       검색 진입점을 하나 남겨둔다 — 없으면 폰에서 검색할 방법이 아예 없어짐. */
    .gn_gnb_mobile_search { color: var(--g-accent) !important; }
    #gn_gnb .gn_gnb_list { display: block; height: auto; }
    #gn_gnb .gn_gnb_item { display: block; }
    /* 데스크톱 GNB 를 밝은 배경으로 바꾸면서 #gn_gnb .gn_gnb_item > a 의 기본 글자색이
       var(--g-text)(거의 검정)로 바뀌었는데, 모바일 드로어는 여전히 검정에 가까운
       var(--g-ink) 배경을 그대로 쓰기 때문에 이 색을 여기서 다시 못 바꿔주면 검정 배경에
       검정 글자가 겹쳐 메뉴 항목이 안 보이는 버그가 있었다(2026-09 수정). */
    #gn_gnb .gn_gnb_item > a { height: 52px; border-bottom: 1px solid rgba(255,255,255,.08); color: #fff; }
    #gn_gnb .gn_gnb_item > a:hover, #gn_gnb .gn_gnb_item:hover > a { color: var(--g-accent); background-color: rgba(255,255,255,.06); }
    #gn_gnb .gn_gnb_item > a::after { display: none; }
    .gn_gnb_arrow { margin-left: auto; }
    .gn_gnb_sub { display: none; position: static; background: rgba(0,0,0,.25); border: none; border-radius: 0; box-shadow: none; padding: 0; }
    #gn_gnb .gn_gnb_item.gn_sub_open .gn_gnb_sub { display: block; }
    #gn_gnb .gn_gnb_item:hover .gn_gnb_sub { display: none; }
    .gn_gnb_sub li a { color: rgba(255,255,255,.75); padding: 12px 32px; }
    .gn_gnb_sub li a:hover { background: rgba(255,255,255,.06); color: var(--g-accent); }

    .gn_hero, .gn_hero .swiper-slide a, .gn_hero .swiper-slide img { height: 70px; }
    /* 70px 높이에서는 안내문구를 한 줄로 말줄임 처리하고, 등록 버튼은 아이콘만 남긴다. */
    .gn_hero_placeholder { padding: 0 14px; gap: 8px; }
    .gn_hero_ph_text { font-size: 12px; min-width: 0; overflow: hidden; }
    .gn_hero_ph_text span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .gn_hero_ph_link span { display: none; }
    .gn_hero_ph_link { padding: 8px; }
    .gn_stat_bar { flex-wrap: wrap; }
    .gn_stat_item { flex: 1 1 50%; }
    .gn_stat_item:nth-child(2) { border-left: none; }
    .gn_home_gallery { grid-template-columns: repeat(2, 1fr); }
    .bsk_gall_grid { --gall-cols: 2 !important; }
    .gn_visit_list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .gn_inner { padding: 0 14px; }
    #gn_container { padding: 12px 0 40px; }
    .gn_logo_text { font-size: 21px; }
    .gn_search_wrap { display: none; }
    /* 로고는 왼쪽, 돋보기/다크모드/메뉴 세 버튼은 오른쪽 끝으로 몰아 정렬 */
    .gn_search_icon_btn { display: flex; margin-left: auto; }
    #gn_header .gn_inner { gap: 8px; }
    .bsk_list_item { flex-wrap: wrap; padding: 14px; }
    .bsk_list_thumb { width: 64px; height: 48px; }
    .bsk_list_side { width: 100%; justify-content: flex-end; margin-top: 6px; }
    .bsk_list_num { display: none; }
    .bsk_gall_grid { --gall-cols: 2 !important; gap: 10px; }
    .gn_home_gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    /* 세로 스택 모드에서 flex-wrap:wrap 을 그대로 두면(멀티라인 컨테이너) 아이템의 가로 크기가
       컨테이너 폭이 아니라 내용물의 max-content(nowrap 제목 등) 기준으로 잡혀서, iOS Safari 에서
       카드가 화면 오른쪽 밖으로 삐져나가 잘려 보였다. 줄바꿈을 끄고 폭을 100%로 고정하며,
       데스크톱용 flex-basis:340px 이 세로 방향에선 높이로 해석되는 것도 같이 해제한다. */
    .gn_half_row { flex-direction: column; flex-wrap: nowrap; gap: 16px; }
    .gn_half_col { flex: 0 0 auto; width: 100%; max-width: 100%; min-width: 0; }
    .gn_half_col .gn_section { max-width: 100%; padding: 18px 14px; }
    .bsk_view_header, .bsk_view_body, .bsk_view_files, .bsk_view_links, .bsk_view_actions, .bsk_share { padding-left: 18px; padding-right: 18px; }
    .bsk_view_tit { font-size: 19px; }
    .gn_visit_list { grid-template-columns: repeat(2, 1fr); }
    .gn_footer_top { flex-direction: column; }
    #gn_totop_btn { right: 14px; bottom: 14px; width: 42px; height: 42px; }
    .pms_wrap { padding: 0 14px; }
    .pms_card { padding: 30px 22px; }
    /* 페이지네이션 숫자 버튼(34px)이 모바일 터치 타겟 권장 최소치(40px)보다 작아서 확대 */
    .pg_wrap .pg_page, .pg_wrap .pg_current, .pg_wrap .pg_start, .pg_wrap .pg_prev, .pg_wrap .pg_end, .pg_wrap .pg_next {
        min-width: 40px; height: 40px;
    }
    /* .bsk_cmt_form_info 자체가 flex 부모(.bsk_cmt_form_footer) 안에서 크기가 정해지지 않은
       채(shrink-to-fit) 떠 있어서, 자식의 width:100% 가 기준으로 삼을 폭이 없어 그냥 원래
       크기(160px)로 남아있던 버그 — 컨테이너 자체를 폭 100%로 세로 스택시켜야 자식의
       100% 가 실제로 꽉 찬다. */
    .bsk_cmt_form_info { flex-direction: column; width: 100%; }
    /* 배너 통합관리(banner_admin.php)는 최고관리자 전용이라 우선순위는 낮지만, 폰으로 접속했을 때
       한 줄에 썸네일+정보+이동버튼+삭제가 다 우겨넣어져 있던 것만 최소한으로 풀어준다. */
    .gau_bn_list li { flex-wrap: wrap; }
    .gau_bn_thumb { width: 72px; height: 44px; }
    /* label 이 flex-shrink 되는 가로 행의 아이템이라 자기 내용(글자+인풋 기본폭)만큼만
       크기를 갖고, 그 안의 input:width:100% 는 그 작은 박스 기준으로 계산돼 사실상 원래
       브라우저 기본폭(~150px)에서 안 움직이던 버그 — label 자체를 세로 스택으로 바꿔야
       비로소 폭 100%가 진짜 한 줄 전체를 의미하게 된다. */
    .gau_form_inline { flex-direction: column; align-items: stretch; }
    .gau_form_inline label { flex-direction: column; align-items: flex-start; width: 100%; }
    .gau_form_inline input { width: 100% !important; }
    .bsk_cmt_form_info .bsk_input_sm { width: 100%; }

    /* iOS Safari 는 포커스 잡는 입력창의 font-size 가 16px 미만이면 화면을 확 확대시킨다.
       사이트 전체 입력창(.gn_input/.pms_input/.bsk_input/.bsk_select/.ol_input 등)이 13~14.5px라
       로그인/회원가입/글쓰기/검색/댓글/쪽지 등 거의 모든 폼에서 아이폰이 포커스마다 화면을
       확대해버리는 문제가 있었다 — 텍스트 크기만 모바일에서 16px로 올려서 막는다(레이아웃은
       각 컴포넌트의 height/padding 그대로라 크기 자체가 커지진 않음). */
    input, select, textarea { font-size: 16px; }
}

/* 브랜드 고정색(카카오/페이스북 공유 버튼)은 다크모드에서도 변경하지 않음 — 위 bsk_share_* 참고 */

/* ============================================================
   13. 회원 영역 보강 (팝업 헤더 닫기 버튼 / 쪽지 스레드 보조 요소)
   ============================================================ */
.popup_close_x { flex-shrink: 0; background: none; border: none; font-size: 20px; line-height: 1; color: var(--g-text-faint); cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: color .12s, background .12s; }
.popup_close_x:hover { color: var(--g-primary); background: var(--g-surface-alt); }

.ms_back { flex-shrink: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--g-text-sub); font-size: 14px; transition: background .12s, color .12s; }
.ms_back:hover { background: var(--g-surface-alt); color: var(--g-primary); }

.ms_avatar { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--g-surface-alt); display: flex; align-items: center; justify-content: center; color: var(--g-text-faint); font-size: 16px; }
.ms_avatar img { width: 100%; height: 100%; object-fit: cover; }

.gn_row_del { flex-shrink: 0; background: none; border: none; color: var(--g-text-faint); font-size: 14px; cursor: pointer; padding: 6px 8px; border-radius: 6px; transition: color .12s, background .12s; }
.gn_row_del:hover { color: var(--g-primary); background: rgba(var(--g-primary-rgb),.06); }

.ms_tabs a.ms_tab_compose { color: var(--g-primary); }

.gn_checkbox_row input[type="radio"] { width: 16px; height: 16px; accent-color: var(--g-primary); cursor: pointer; }

.ms_date_label { text-align: center; font-size: 11.5px; color: var(--g-text-faint); margin: 4px 0 16px; }

.ms_view_nav { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--g-border); }
.ms_nav_btn { font-size: 12.5px; font-weight: 700; color: var(--g-text-sub); }
.ms_nav_btn:hover { color: var(--g-primary); }

.ms_reply_row { display: flex; align-items: flex-end; gap: 8px; margin-top: 14px; }
.ms_reply_row textarea { flex: 1; max-height: 120px; }
.ms_reply_btn { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; border: none; background: var(--g-primary); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 15px; transition: background .15s; }
.ms_reply_btn:hover { background: var(--g-primary-hover); }