@charset "utf-8";

/* ============================================================================
   CAMON THEME — camonkorea.com (베트남 한인 커뮤니티)
   디자인 시스템: 베트남·한국의 빨강·파랑·흰색·잉크 조합을 모티프로 한 절제된 팔레트,
   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> 로 덮어쓴다(camon.settings.php 의 CAMON_THEME_COLOR_PRESETS 참고).
       기본값은 반드시 'default' 프리셋과 정확히 같아야 한다. */
    --g-primary:        #D9344E; /* 테라코타 레드 */
    --g-primary-hover:  #BF2840;
    --g-accent:         #087F7A; /* 블루 */
    --g-accent-hover:   #066762;
    /* rgba() 투명도 조합용 RGB 트리플 — hex 4종과 항상 같이 덮어써야 한다(head.sub.php 참고).
       프리셋을 바꿨는데 이 값을 안 바꾸면 포커스링/알림배경/하이라이트 등이 이전 색으로 남는다. */
    --g-primary-rgb: 217, 52, 78;
    --g-accent-rgb:  8, 127, 122;

    --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: #D9344E;
    --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; min-width: 0; } /* 안쪽 글 제목이 한 줄·말줄임이라 최소 폭이 제목 길이가 되어 폰(320px)에서 위젯이 화면 밖으로 밀렸다(2026-10-19) */
.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; }
/* Main business/market/room strips need space inside the tab section border. */
.gn_tab_panel:has(.home_roll) { padding: 4px 24px 10px; }
@media (max-width: 640px) {
    .gn_tab_panel:has(.home_roll) { padding: 4px 16px 10px; }
}

/* 섹션 공통 카드 */
.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; display: flex; flex-direction: column; }
.gn_half_col > .gn_section { flex: 1 1 auto; } /* 2단 칸 높이 맞춤(생활정보·교육정보, 2026-10-19) */

/* 홈 갤러리 그리드 (사진 게시판 미리보기) */
.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); }
/* 홈 배너 오른쪽 위 모서리(index.php) — 따로 한 줄을 차지하지 않게(2026-10-18) */
.gn_hero_edit { position: absolute; top: 10px; right: 10px; z-index: 10; padding: 6px 12px; font-size: 12px; opacity: .85; box-shadow: var(--g-shadow-sm); }
.gn_hero_edit:hover { opacity: 1; }

/* ============================================================
   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; justify-content: center; gap: 6px; height: 44px; 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: 44px; padding: 0; justify-content: center; }
.bsk_toolbar > .bsk_btn_group, .mk_toolbar > .bsk_btn_group, .hd_toolbar > .bsk_btn_group { flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.bsk_toolbar .bsk_btn, .mk_toolbar .bsk_btn, .hd_toolbar .bsk_btn { min-height: 44px; }
/* 모든 목록은 상단 오른쪽 글쓰기 사용: 중복 하단 버튼·일부 게시판만 있던 모바일 고정 버튼은 숨긴다. */
.bsk_toolbar.bsk_toolbar_bottom, #mk_wrap .mk_fab, #hd_wrap .hd_fab { display: none; }
#mk_wrap .mk_toolbar .bsk_btn_write, #hd_wrap .hd_toolbar .bsk_btn_write { display: inline-flex; }
.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, .bsk_cate_nav a#bo_cate_on { background: var(--g-primary); border-color: var(--g-primary); color: #fff; }
.bsk_cate_nav a small, .qa_topic_chip small { margin-left: 2px; font-size: 11px; font-weight: 700; opacity: .6; } /* 칩 글 수(list.skin.php, 2026-10-17) */
.bsk_cate_nav a#bo_cate_on small, .bsk_cate_nav a.on small, .qa_topic_chip.is_on small { opacity: .85; }
.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; }
/* 첨부 칸(2026-10-18 다듬음): 점선 상자 안에 [빨간 파일 선택] 고른 파일 이름 · 용량 안내, 수정 화면 "삭제"는 상자 안 아래 줄 */
.bsk_write_file_inner { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; min-width: 0; min-height: 50px; padding: 8px 12px; border: 1.5px dashed var(--g-border); border-radius: var(--g-radius-sm); background: var(--g-surface); box-sizing: border-box; transition: border-color .12s; }
.bsk_write_file_inner:hover, .bsk_write_file_inner:focus-within { border-color: var(--g-primary); }
.bsk_file_label { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 8px 16px; border-radius: 999px; background: var(--g-primary); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; transition: filter .12s; }
.bsk_file_label:hover { filter: brightness(.92); }
.bsk_file_label:focus-within { outline: 2px solid var(--g-primary); outline-offset: 2px; }
.bsk_file_input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } /* display:none 이면 키보드(Tab)로 못 고름 */
.bsk_file_chosen { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--g-text); }
.bsk_file_limit { font-size: 11.5px; color: var(--g-text-faint); }
.bsk_write_file_inner > .bsk_input { flex: 1 1 100%; }
.bsk_file_del { flex: 1 1 100%; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--g-text-sub); cursor: pointer; }
.bsk_write_hint { font-size: 12px; color: var(--g-text-faint); }
.mk_photo_notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--g-radius-sm); background: var(--g-surface-alt); border-left: 3px solid var(--g-primary); font-size: 13px; line-height: 1.7; color: var(--g-text-sub); }
.mk_photo_notice .fa { color: var(--g-primary); margin-top: 4px; }
.mk_photo_notice b { color: var(--g-text); }
.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_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_topline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 12px; }
#mk_view > .bsk_view_topline { padding: 16px 20px; margin-bottom: 0; border-bottom: 1px solid var(--g-border); }
.bsk_view_topline > .bsk_badge_cate { margin-bottom: 0; overflow-wrap: anywhere; }
.bsk_view_toplinks { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.bsk_view_toplinks .bsk_btn { min-height: 44px; padding: 0 14px; font-size: 13px; white-space: nowrap; }
.bsk_view_tools { border-top: 1px solid var(--g-border); padding: 20px 18px; }
.bsk_view_tools > .bsk_share { padding: 0 0 16px; }
.bsk_view_tools > .bsk_view_actions { border-top: 0; padding: 0; align-items: center; }
.bsk_view_tools .bsk_btn { min-height: 44px; font-size: 13px; }
.bsk_view_tools .bsk_share_btn { width: 44px; height: 44px; }
.bsk_view_tools .bsk_share_copy { height: 44px; font-size: 13px; }
.bsk_view_tools .gn_save { margin: 0; }
.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"] 로 판정하면 안 된다 — "background-color" 안에도 "color"
   가 들어 있어서, 배경만 지정한 박스가 색이 있는 것으로 오판되어 밝은 글자가 그대로 남는다(실제
   사례 — 생활정보 "명이나물" 글의 연분홍 "주의" 박스, 2026-10). 그래서 style 이 color 로 시작하거나
   ";color" / "; color" 를 포함할 때만 진짜 글자색 선언으로 본다. */
html[data-theme="dark"] .bsk_view_body [style*="background"]:not([style^="color"]):not([style*=";color"]):not([style*="; color"]),
html[data-theme="dark"] .bsk_view_body [style*="background"] :not([style^="color"]):not([style*=";color"]):not([style*="; color"]),
html[data-theme="dark"] .ctt_body [style*="background"]:not([style^="color"]):not([style*=";color"]):not([style*="; color"]),
html[data-theme="dark"] .ctt_body [style*="background"] :not([style^="color"]):not([style*=";color"]):not([style*="; color"]) { color: #1a1a1a !important; }
.bsk_view_body img, .bsk_view_body video { max-width: 100%; height: auto; border-radius: var(--g-radius-sm); }
/* iframe 은 height:auto 를 주면 HTML 의 height="450" 을 덮어 150px 로 납작해졌다(2026-10-17) — 폭만 맞추고, 유튜브·비메오는 16:9 로 */
.bsk_view_body iframe { max-width: 100%; border-radius: var(--g-radius-sm); }
.bsk_view_body iframe[src*="youtube"], .bsk_view_body iframe[src*="youtu.be"], .bsk_view_body iframe[src*="vimeo"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.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%; }
/* 휴대폰에서 칸이 많은 표가 화면 폭에 맞춰 찌그러져 글자가 한 자씩 세로로 쪼개지던 문제(게시판 글·내용관리 페이지) — 낱말 중간에서 안 끊게
   해서(편집기가 넣은 인라인 word-break 도 덮어씀) 표가 넓어지면 .bsk_table_scroll 가로 스크롤로 보게 한다(2026-10-15).
   아이폰 사파리는 칸(td)의 min-width 를 무시하므로 keep-all 이 핵심. */
.bsk_view_body th, .bsk_view_body td, .ctt_body th, .ctt_body td { min-width: 5.5em; word-break: keep-all !important; overflow-wrap: normal !important; }
/* 스크롤 상자 안의 표는 폭 제한을 풀어야 찌그러지지 않는다(.ctt_body table 의 max-width:100% 등) */
.bsk_view_body .bsk_table_scroll > table, .ctt_body .bsk_table_scroll > table { max-width: none; }
/* 글 본문에 인라인 table-layout:fixed 가 박힌 표는 칸 폭이 화면에 고정돼, 위 keep-all 때문에 못 끊는 긴 낱말
   (Wärmeunterbett, 300~800W 등)이 옆 칸으로 삐져나와 글자가 겹쳤다(생활정보 /life/74 전기요금 표, 2026-10-19) —
   auto 로 되돌려 칸이 내용만큼 넓어지고 넘치면 가로 스크롤로 보게 한다. */
.bsk_view_body table, .ctt_body table { table-layout: auto !important; }
.bsk_table_scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.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; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding: 22px 28px; border-top: 1px solid var(--g-border); }
/* 폰(아이폰 글자 크게 포함)에서 목록·답변·글쓰기·찜 + 수정·삭제·복사·이동이 한 줄을 넘으면 화면 밖으로 잘렸다 → 줄바꿈 */
.bsk_view_actions .bsk_btn_group { flex-wrap: wrap; justify-content: center; }
.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); }

/* 라벨을 버튼 위에 — 옆에 두면 휴대폰에서 버튼이 두 줄로 접히며 라벨만 왼쪽에 붙어 정렬이 틀어졌다(2026-10-15) */
.bsk_share { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 0 28px 22px; }
.bsk_share .bsk_share_label { margin-bottom: 0; }
.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; }
@media (hover: hover) { .bsk_share_btn:hover { transform: translateY(-2px); } }
button.bsk_share_btn { border: 0; padding: 0; cursor: pointer; }
.bsk_share_kakao { background: #FEE500; color: #191600; }
.bsk_share_facebook { background: #1877F2; }
.bsk_share_x { background: #000; }
.bsk_share_more { background: var(--g-surface-alt); color: var(--g-text-sub); border: 1px solid var(--g-border); cursor: pointer; }
.bsk_share_more[aria-expanded="true"] { border-color: var(--g-text-sub); color: var(--g-text); }
/* 링크 복사 — 공유 순서(네이버 → 링크 복사 → 더보기) 중 가운데, 글자까지 보이는 강조 버튼 */
.bsk_share_copy { height: 40px; padding: 0 18px; border: 0; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; background: var(--g-primary); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 12px rgba(var(--g-primary-rgb), .28); transition: background .15s, transform .12s; }
@media (hover: hover) { .bsk_share_copy:hover { background: var(--g-primary-hover); transform: translateY(-2px); } }
.bsk_share_copy.is_done { background: var(--g-success); box-shadow: none; }
/* 더보기 펼침 메뉴(PC: 카카오톡·페이스북·X / 휴대폰은 기기 공유 창이라 안 씀) — 위로 펼침: #bsk_view_wrap 이 overflow:hidden 이라
   아래로 펼치면 글 아래 칸이 짧을 때 잘린다(위쪽엔 항상 본문이 있음) */
.bsk_share_more_wrap { position: relative; }
.bsk_share_menu { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 50; min-width: 168px; padding: 6px; display: flex; flex-direction: column; background: var(--g-surface); border: 1px solid var(--g-border); border-radius: var(--g-radius-sm); box-shadow: var(--g-shadow-md); }
.bsk_share_menu[hidden], .bsk_share_mi[hidden] { display: none; }
.bsk_share_mi { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: none; color: var(--g-text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; white-space: nowrap; }
.bsk_share_mi:hover, .bsk_share_mi:focus-visible { background: var(--g-surface-alt); }
.bsk_share_mi_ico { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; }
.bsk_share_mi_ico .bsk_share_icon { width: 13px; height: 13px; }
.bsk_share_os { background: var(--g-text-sub); }
/* 중고거래·업소정보 상단 정보 칸(.mk_info) 맨 아래 공유하기 — 좁은 칸에 맞게 */
.mk_info .bsk_share { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 10px; padding: 14px 0 0; margin-top: 14px; border-top: 1px dashed var(--g-border); }
.mk_info .bsk_share_label { display: inline-block; margin: 0 4px 0 0; }
.mk_info .bsk_share_btns { justify-content: flex-start; gap: 8px; }
.mk_info .bsk_share_btn { width: 36px; height: 36px; font-size: 14px; }
.mk_info .bsk_share_copy { height: 36px; padding: 0 14px; font-size: 13px; }
/* 왼쪽 정렬된 좁은 칸에서는 메뉴가 왼쪽 밖으로 잘리지 않게 버튼 왼쪽 끝 기준으로 펼침 */
.mk_info .bsk_share_menu { left: 0; transform: none; }

.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 { font-size: 13px; } /* 2026-10-18 가로 flex 를 뺌 — 링크 줄처럼 이름 위·상자 아래(폰에서 "첨부파일 1"이 세 줄로 깨졌다) */
.bsk_write_actions { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
/* 가입 초기 회원 승인제 안내(2026-10-19) — 업소정보·구인구직·중고거래 글쓰기 위쪽 */
.bsk_sg_notice { margin: 0 0 14px; padding: 14px 18px; border-radius: var(--g-radius-md); background: rgba(var(--g-accent-rgb), .14); border: 1px solid rgba(var(--g-accent-rgb), .55); font-size: 13.5px; line-height: 1.7; color: var(--g-text); }
.bsk_sg_notice_tit { margin: 0 0 6px; font-size: 14.5px; font-weight: 800; }
.bsk_sg_notice_tit .fa { color: var(--g-primary); margin-right: 4px; }
.bsk_sg_notice ul { margin: 0; padding-left: 18px; list-style: disc; }
.bsk_sg_notice li { list-style: disc; margin: 2px 0; word-break: keep-all; overflow-wrap: anywhere; }
@media (max-width: 640px) { .bsk_sg_notice { padding: 12px 14px; font-size: 13px; } }

/* ============================================================
   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_level_notice { border: 1px solid var(--g-border); background: var(--g-surface-alt); border-radius: var(--g-radius-sm); padding: 14px 16px; margin-bottom: 20px; font-size: 13px; color: var(--g-text-sub); line-height: 1.7; }
.pms_level_title { display: flex; align-items: center; gap: 8px; color: var(--g-text); font-size: 13.5px; margin-bottom: 6px; }
.pms_level_notice ul { margin: 0; padding-left: 18px; list-style: disc; }
.pms_level_notice b { color: var(--g-text); }
.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; }

/* SNS(구글) 로그인·가입 버튼 — 기본 skin/social 은 가입 화면에서 30px 아이콘만 보여 PC 에서 누르기 어려웠다.
   가입·로그인 둘 다 입력칸 높이(48px)의 가로 꽉 찬 버튼 + 글자로(2026-10-15). 마크업은 skin/social 기본 그대로. */
.pms_card #sns_register, .pms_card #sns_login { float: none; display: block; margin: 0 0 20px; padding: 0; border: 0; background: none; text-align: left; }
.pms_card #sns_login { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--g-border); }
.pms_card #sns_register h2, .pms_card #sns_login h3 { float: none; display: block; width: auto; height: auto; padding: 0; margin: 0 0 8px; font-size: 13.5px; font-weight: 700; line-height: 1.5; color: var(--g-text); text-align: left; border: 0; }
.pms_card #sns_register .sns-wrap, .pms_card #sns_login .sns-wrap { float: none; display: flex; flex-direction: column; gap: 8px; width: auto; height: auto; line-height: normal; margin: 0; padding: 0; text-align: left; }
.pms_card #sns_register .sns-icon, .pms_card #sns_login .sns-icon { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 48px; margin: 0; padding: 0 16px; border-radius: var(--g-radius-sm); font-size: 15px; font-weight: 700; line-height: 1; text-align: center; }
.pms_card #sns_register .sns-icon .txt, .pms_card #sns_login .sns-icon .txt { position: static; display: inline; padding: 0; border: 0; font-size: inherit; line-height: inherit; overflow: visible; background: none; }
.pms_card #sns_register .sns-google, .pms_card #sns_login .sns-google { background: var(--g-surface); color: var(--g-text); border: 1.5px solid var(--g-border); letter-spacing: 0; }
.pms_card #sns_register .sns-google:hover, .pms_card #sns_login .sns-google:hover { border-color: var(--g-primary); }
.pms_card #sns_register .sns-google .ico, .pms_card #sns_login .sns-google .ico { position: static; flex-shrink: 0; width: 22px; height: 22px; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E") no-repeat center / 22px 22px !important; }
@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%; }

/* 광고·제휴 안내 /content/ad (skin/content/basic/ad.inc.php) */
#ad_page { display: flex; flex-direction: column; gap: var(--g-space-5); }
.ad_hero { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--g-space-6); align-items: center; padding: 48px 44px; border-radius: var(--g-radius-lg); background: var(--g-ink); color: #fff; }
.ad_hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(90deg, #D9344E 0 25%, #087F7A 25% 75%, #D9344E 75% 100%); }
.ad_eyebrow { font-size: 13px; font-weight: 800; letter-spacing: .08em; color: var(--g-accent); margin-bottom: 10px; }
.ad_hero_tit { font-size: 34px; line-height: 1.3; font-weight: 800; letter-spacing: -.02em; word-break: keep-all; }
.ad_hero_desc { margin-top: 14px; font-size: 15px; line-height: 1.75; color: rgba(255,255,255,.75); word-break: keep-all; }
.ad_hero_btns, .ad_cta_btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.ad_btn_lg { height: 48px; padding: 0 22px; font-size: 15px; }
.ad_btn_ghost { height: 48px; padding: 0 20px; font-size: 15px; background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35); }
.ad_btn_ghost:hover { background: rgba(255,255,255,.1); color: #fff; }
.ad_stats { display: grid; gap: 10px; }
.ad_stats li { padding: 16px 18px; border-radius: var(--g-radius-md); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); }
.ad_stats b { display: block; font-size: 26px; font-weight: 800; color: var(--g-accent); line-height: 1.2; }
.ad_stats span { font-size: 13px; color: rgba(255,255,255,.7); }

.ad_sec { padding: 32px; border-radius: var(--g-radius-md); background: var(--g-surface); border: 1px solid var(--g-border); box-shadow: var(--g-shadow-sm); }
.ad_h2 { font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.ad_sub { margin-top: 6px; font-size: 14px; color: var(--g-text-sub); word-break: keep-all; }
.ad_who, .ad_prod { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g-space-3); margin-top: var(--g-space-4); }
.ad_who_item { padding: 22px 20px; border-radius: var(--g-radius-md); background: var(--g-surface-alt); }
.ad_who_item i { font-size: 22px; color: var(--g-primary); }
.ad_who_item b { display: block; margin: 12px 0 4px; font-size: 16px; }
.ad_who_item p, .ad_prod_item p { font-size: 14px; line-height: 1.65; color: var(--g-text-sub); word-break: keep-all; }

.ad_prod_item { position: relative; padding: 22px 20px; border-radius: var(--g-radius-md); border: 1px solid var(--g-border); transition: border-color .15s, box-shadow .15s, transform .15s; }
.ad_prod_item:hover { border-color: rgba(var(--g-primary-rgb), .4); box-shadow: var(--g-shadow-md); transform: translateY(-2px); }
.ad_prod_item.is_hot { border: 2px solid var(--g-primary); background: rgba(var(--g-primary-rgb), .04); }
.ad_prod_item.is_soon { border-style: dashed; opacity: .75; }
.ad_prod_ico { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(var(--g-accent-rgb), .22); color: var(--g-text); font-size: 18px; }
.ad_prod_item.is_hot .ad_prod_ico { background: var(--g-primary); color: #fff; }
.ad_prod_tit { display: flex; align-items: center; gap: 6px; margin: 14px 0 6px; font-size: 16px; }
.ad_tag { font-style: normal; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 99px; background: var(--g-ink); color: #fff; }
.ad_prod_item.is_hot .ad_tag { background: var(--g-primary); }
.ad_prod_item.is_soon .ad_tag { background: var(--g-surface-alt); color: var(--g-text-sub); }
html[data-theme="dark"] .ad_tag { background: var(--g-surface-alt); }

.ad_steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--g-space-3); margin-top: var(--g-space-4); counter-reset: ad_step; }
.ad_steps li { position: relative; padding-top: 52px; counter-increment: ad_step; }
.ad_steps li::before { content: counter(ad_step); position: absolute; top: 0; left: 0; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; background: var(--g-ink); color: var(--g-accent); }
.ad_steps li:not(:last-child)::after { content: ""; position: absolute; top: 19px; left: 48px; right: 4px; border-top: 2px dashed var(--g-border); }
.ad_steps b { display: block; font-size: 15px; margin-bottom: 4px; }
.ad_steps p { font-size: 13px; line-height: 1.6; color: var(--g-text-sub); word-break: keep-all; }

.ad_free_list { display: grid; gap: var(--g-space-2); margin-top: var(--g-space-4); }
.ad_free_list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.65; word-break: keep-all; }
.ad_free_list i { flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; background: rgba(31,138,76,.14); color: var(--g-success); }

.ad_cta { padding: 44px 32px; text-align: center; border-radius: var(--g-radius-lg); background: linear-gradient(135deg, var(--g-primary), var(--g-primary-hover)); color: #fff; }
.ad_cta h2 { font-size: 26px; font-weight: 800; }
.ad_cta > p { margin-top: 8px; font-size: 15px; color: rgba(255,255,255,.85); }
.ad_cta .ad_mail { margin-top: 18px; font-size: 24px; font-weight: 800; color: #fff; letter-spacing: .01em; overflow-wrap: anywhere; }
.ad_cta_btns { justify-content: center; }
.ad_cta .gn_btn_primary { background: #fff; color: var(--g-primary); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.ad_cta .gn_btn_primary:hover { background: var(--g-accent); color: var(--g-ink); }
.ad_cta .ad_note { margin-top: 22px; font-size: 13px; color: rgba(255,255,255,.7); }
.ad_cta .ad_mail a, .ad_cta .ad_note a { color: #fff; text-decoration: none; }
.ad_cta .ad_mail a:hover, .ad_cta .ad_note a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1023.98px) {
    .ad_hero { grid-template-columns: 1fr; padding: 36px 28px; }
    .ad_stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
    .ad_prod { grid-template-columns: repeat(2, 1fr); }
    .ad_steps { grid-template-columns: repeat(2, 1fr); row-gap: var(--g-space-5); }
    .ad_steps li::after { display: none; }
}
@media (max-width: 640px) {
    #ad_page { gap: var(--g-space-3); }
    .ad_hero { padding: 28px 20px 32px; gap: var(--g-space-4); }
    .ad_hero_tit { font-size: 26px; }
    .ad_hero_btns .gn_btn, .ad_cta_btns .gn_btn { flex: 1 1 100%; justify-content: center; }
    .ad_sec { padding: 22px 18px; }
    .ad_who, .ad_prod, .ad_steps { grid-template-columns: 1fr; }
    .ad_cta { padding: 32px 20px; }
    .ad_cta .ad_mail { font-size: 20px; }
}

/* 이용 가이드(/content/guide, skin/content/basic/guide.inc.php, 2026-10-16) — 광고 안내의 ad_* 부품 위에 gd_* 몇 개만 */
.gd_jump a { display: block; color: inherit; }
.gd_jump li { transition: background .15s; }
.gd_jump li:hover { background: rgba(255,255,255,.14); }
.gd_settle { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 20px; margin-top: var(--g-space-4); }
.gd_settle a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--g-radius-sm); color: var(--g-text); font-size: 14.5px; }
.gd_settle a:hover { background: rgba(var(--g-accent-rgb), .16); }
.gd_settle_no { flex: none; min-width: 34px; height: 24px; padding: 0 6px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--g-ink); color: var(--g-accent); font-size: 12px; font-weight: 800; }
.gd_settle_tit { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd_more { margin: 8px 0 var(--g-space-3); font-size: 13.5px; }
.gd_more a { color: var(--g-text-sub); }
.gd_page .ad_free_list a { color: var(--g-primary); font-weight: 700; }
.gd_bo { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g-space-3); margin-top: var(--g-space-4); }
.gd_bo_item { display: block; padding: 20px; border-radius: var(--g-radius-md); border: 1px solid var(--g-border); color: var(--g-text); transition: border-color .15s, box-shadow .15s, transform .15s; }
.gd_bo_item:hover { border-color: rgba(var(--g-primary-rgb), .4); box-shadow: var(--g-shadow-md); transform: translateY(-2px); color: var(--g-text); }
.gd_bo_item b { display: block; margin: 12px 0 4px; font-size: 16px; }
.gd_bo_item p { font-size: 13.5px; line-height: 1.6; color: var(--g-text-sub); word-break: keep-all; }
.gd_safe { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g-space-5); }
.gd_safe_tit { display: block; margin-top: var(--g-space-4); font-size: 15px; }
.gd_warn i { background: rgba(var(--g-accent-rgb), .3); color: var(--g-text); }
.gd_ban i { background: rgba(var(--g-primary-rgb), .12); color: var(--g-primary); }
@media (max-width: 1023.98px) { .gd_bo { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .gd_bo, .gd_settle, .gd_safe { grid-template-columns: 1fr; } }

/* 로그인 상자 아래 이용 가이드 카드(_sidebar.php, 메인 · 비회원·운영진만) — 왼쪽 띠는 베트남 국기(고정색 예외) */
.gd_entry { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 14px 16px 14px 20px; border-radius: var(--g-radius-md); border: 1px solid rgba(var(--g-accent-rgb), .55); background: rgba(var(--g-accent-rgb), .14); color: var(--g-text); transition: background .15s, transform .15s, box-shadow .15s; }
.gd_entry::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(#D9344E 0 50%, #087F7A 50%); }
.gd_entry:hover { background: rgba(var(--g-accent-rgb), .26); color: var(--g-text); transform: translateY(-1px); box-shadow: var(--g-shadow-sm); }
.gd_entry_ico { flex: none; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--g-primary); color: #fff; font-size: 20px; }
.gd_entry_txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gd_entry_txt b { font-size: 14.5px; font-weight: 800; }
.gd_entry_txt small { font-size: 12px; color: var(--g-text-sub); }
.gd_entry_arr { flex: none; font-size: 20px; color: var(--g-primary); transition: transform .15s; }
.gd_entry:hover .gd_entry_arr { transform: translateX(3px); }
@media (max-width: 1023.98px) { .gd_entry { 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; width: 100%; padding: 18px 22px; border: 0; background: none; color: var(--g-text); font: inherit; font-size: 14.5px; font-weight: 700; line-height: 1.5; text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none; } /* button 기본 모양(회색 배경·테두리·내용 폭) 제거 */
@media (hover: hover) { .gn_faq_q:hover { background: var(--g-surface-alt); } }
.gn_faq_q:focus-visible { outline: 2px solid var(--g-primary); outline-offset: -2px; }
.gn_faq_a p + p { margin-top: 8px; }
.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_bottom a { color: rgba(255,255,255,.7); text-decoration: none; }
.gn_footer_bottom a:hover { color: #fff; text-decoration: underline; }
.gn_footer_flag { display: inline-flex; flex-direction: column; overflow: hidden; width: 22px; height: 16px; vertical-align: middle; margin-right: 8px; }
.gn_footer_flag span { display: inline-block; width: 100%; height: 25%; }
.gn_footer_flag span:nth-child(1) { background: #D9344E; }
.gn_footer_flag span:nth-child(2) { height: 50%; background: #087F7A; }
.gn_footer_flag span:nth-child(3) { background: #D9344E; }

#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; }

/* 배너 통합관리 페이지 */
#camon_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); }
/* 관리자(그누보드 관리자 화면) = 빨간 배지, 관리 메뉴(테마 manage/) = 주황 칸 — 2026-10-18 세 사이트 같은 색(사용자 요청) */
.ol_admin_link { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 4px; background: #e84040; color: #fff !important; font-size: 11px; font-weight: 700; vertical-align: middle; transition: background .1s; }
.ol_admin_link:hover { background: #c73030; }
.ol_stats .ol_stat_manage a { background: #f08c00; }
.ol_stats .ol_stat_manage a:hover { background: #d97a00; }
.ol_stats .ol_stat_manage .ol_stat_label, .ol_stats .ol_stat_manage .ol_stat_val { color: #fff; }
/* 사장님 인증 업주 전용 "내 업소 관리"(2026-10-20) — 포인트·쪽지 칸과 정보수정 줄 사이 */
.ol_biz { margin-bottom: 14px; padding: 10px 12px; border-radius: 10px; background: rgba(43,108,176,.07); border: 1px solid rgba(43,108,176,.18); }
.ol_biz_tit { margin: 0 0 6px; font-size: 13px; font-weight: 800; color: #2B6CB0; }
.ol_biz_tit small { margin-left: 4px; font-size: 11px; font-weight: 600; color: var(--g-text-faint); }
.ol_biz_list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ol_biz_list li { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ol_biz_list li + li { padding-top: 8px; border-top: 1px dashed rgba(43,108,176,.2); }
.ol_biz_name { font-size: 13.5px; font-weight: 700; color: var(--g-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ol_biz_state { font-size: 11.5px; color: var(--g-text-sub); }
.ol_biz_btns { display: flex; gap: 6px; flex-wrap: wrap; }
.ol_biz_btns a { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: var(--g-surface); border: 1px solid var(--g-border); font-size: 12px; color: var(--g-text-sub); }
.ol_biz_btns a:hover { border-color: #2B6CB0; color: #2B6CB0; }
html[data-theme="dark"] .ol_biz { background: rgba(99,160,230,.10); border-color: rgba(99,160,230,.25); }
html[data-theme="dark"] .ol_biz_tit { color: #8CC0F5; }
.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; }
    .gn_gnb_mobile_user a.gn_mobile_admin { color: #ff6b6b; } /* 관리자 = 빨강(어두운 메뉴 바탕에서 읽히는 밝은 빨강, 2026-10-18) */
.gn_gnb_mobile_user a.gn_mobile_mybiz { color: #8CC0F5; } /* 내 업소(사장님 인증) — 어두운 메뉴 바탕에서 읽히는 밝은 파랑 */
    /* 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); }


/* ── 1:1문의 (skin/qa/basic) — 게시판 bsk_* 컴포넌트를 재사용하고 1:1문의 고유 요소만 추가 ──
   분류 탭의 활성 상태는 코어 qalist.php 가 class 대신 id="bo_cate_on" 으로 표시하므로
   .bsk_cate_nav 활성 규칙에 #bo_cate_on 을 함께 걸어둠. */
.qa_stat { flex-shrink: 0; display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; line-height: 16px; }
.qa_stat_done { background: var(--g-primary); color: #fff; }
.qa_stat_wait { background: var(--g-surface-alt); color: var(--g-text-faint); border: 1px solid var(--g-border); }
.bsk_view_header > .qa_stat { margin-bottom: 8px; }
.qa_answer_wrap { background: var(--g-surface); border: 1px solid var(--g-border); border-left: 3px solid var(--g-primary); border-radius: var(--g-radius-md); overflow: hidden; box-shadow: var(--g-shadow-sm); margin-bottom: 18px; }
.qa_answerform_wrap, .qa_rel_wrap { margin-bottom: 18px; }
.qa_wait_msg { padding: 22px; margin-bottom: 18px; text-align: center; font-size: 14px; color: var(--g-text-sub); background: var(--g-surface); border: 1px dashed var(--g-border); border-radius: var(--g-radius-md); }
.qa_wait_msg i { color: var(--g-accent); margin-right: 4px; }
.qa_recv_chk { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; color: var(--g-text-sub); cursor: pointer; }
@media (max-width: 640px) {
    .qa_list_wrap .bsk_list_num { display: none; }
}
.gn_conn_name { font-weight: 700; min-width: 70px; }
/* 사이드뷰가 자체 프로필 아이콘을 포함하므로 왼쪽 아바타와 중복되지 않게 숨김 */
.gn_conn_name .profile_img { display: none; }

/* ── 게시물 복사/이동 팝업(bbs/move.php) — 스킨 없이 코어가 마크업을 직접 출력하므로 CSS 로만
   꾸민다. window.open 500×550 팝업 기준. #copymove 범위로만 걸어 다른 화면에 영향 없음. ── */
#copymove { max-width: 560px; margin: 0 auto; padding: 0 0 84px; }
#copymove #win_title { position: sticky; top: 0; z-index: 2; margin: 0; padding: 18px 20px; font-size: 17px; font-weight: 800; color: var(--g-text); background: var(--g-surface); border-bottom: 3px solid var(--g-primary); }
#copymove .tbl_wrap { margin: 16px; background: var(--g-surface); border: 1px solid var(--g-border); border-radius: var(--g-radius-md); overflow: hidden; box-shadow: var(--g-shadow-sm); }
#copymove table { width: 100%; border-collapse: collapse; }
#copymove caption { caption-side: top; text-align: left; padding: 12px 16px; font-size: 12.5px; color: var(--g-text-sub); background: var(--g-surface-alt); border-bottom: 1px solid var(--g-border); }
#copymove thead th { padding: 10px 16px; font-size: 12px; font-weight: 700; color: var(--g-text-faint); text-align: left; background: var(--g-surface-alt); border-bottom: 1px solid var(--g-border); }
#copymove thead th:first-child, #copymove .td_chk { width: 44px; text-align: center; padding-left: 16px; padding-right: 0; }
#copymove tbody tr { border-bottom: 1px solid var(--g-border); transition: background .12s; }
#copymove tbody tr:last-child { border-bottom: none; }
#copymove tbody tr:hover { background: var(--g-surface-alt); }
#copymove tbody tr:has(input:checked) { background: rgba(var(--g-primary-rgb), .07); }
#copymove td { padding: 0; font-size: 14px; color: var(--g-text); }
#copymove td label { display: block; padding: 13px 16px 13px 10px; cursor: pointer; line-height: 1.5; }
#copymove input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--g-primary); cursor: pointer; vertical-align: middle; }
#copymove .copymove_currentbg td { color: var(--g-text-faint); }
#copymove .copymove_current { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; color: var(--g-ink); background: var(--g-accent); vertical-align: 1px; }
#copymove .win_btn { position: fixed; left: 0; right: 0; bottom: 0; display: flex; gap: 8px; justify-content: center; padding: 14px 16px; background: var(--g-surface); border-top: 1px solid var(--g-border); box-shadow: 0 -4px 14px rgba(0,0,0,.06); }
#copymove .win_btn .btn_submit, #copymove .win_btn .btn_close { flex: 1; max-width: 220px; height: 46px; border-radius: var(--g-radius-sm); font-size: 15px; font-weight: 800; cursor: pointer; transition: background .15s, border-color .15s; }
#copymove .win_btn .btn_submit { border: none; background: var(--g-primary); color: #fff; }
#copymove .win_btn .btn_submit:hover { background: var(--g-primary-hover); }
#copymove .win_btn .btn_submit:disabled { opacity: .6; cursor: default; }
#copymove .win_btn .btn_close { border: 1.5px solid var(--g-border); background: var(--g-surface); color: var(--g-text-sub); }
#copymove .win_btn .btn_close:hover { border-color: var(--g-text-faint); color: var(--g-text); }

/* ── 분류 일괄변경(게시판 목록 툴바, 최고관리자 전용) ── */
.bsk_bulk_cate { display: flex; align-items: center; gap: 6px; padding: 3px 3px 3px 4px; border: 1.5px dashed rgba(var(--g-primary-rgb), .45); border-radius: 999px; }
.bsk_bulk_cate .bsk_select { max-width: 150px; border: none; background: transparent; font-weight: 600; }
.bsk_bulk_cate .bsk_btn { height: 34px; }
.bsk_btn_group:has(.bsk_bulk_cate) { flex-wrap: wrap; justify-content: flex-end; }

/* 인기글 하트 아이콘 — 코어(get_list)가 색 지정 없이 <i class="fa fa-heart"> 로 출력해 제목 글자색을
   따라가던 것을 포인트 빨강으로 */
#bsk_list_wrap .fa-heart, #bsk_gall_wrap .fa-heart { color: var(--g-primary); font-size: .9em; }

/* ============================================================
   중고거래 마켓 스킨 (skin/board/market) — 클라인안차이겐 스타일 사진 카드
   모든 클래스는 mk_ 접두사. 색은 테마 변수만 사용(다크모드·색상 프리셋 자동 대응).
   ============================================================ */
/* 목록: 분류 칩 */
.mk_cate { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.mk_cate a { padding: 8px 18px; border-radius: 999px; border: 1.5px solid var(--g-border); background: var(--g-surface); font-size: 13.5px; font-weight: 700; color: var(--g-text-sub); }
.mk_cate a:hover { border-color: var(--g-primary); color: var(--g-primary); }
.mk_cate a.on { background: var(--g-primary); border-color: var(--g-primary); color: #fff; }

/* 목록: 검색·필터 */
.mk_filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px; margin-bottom: 16px; background: var(--g-surface); border: 1px solid var(--g-border); border-radius: var(--g-radius-md); box-shadow: var(--g-shadow-sm); }
.mk_filter_search { flex: 1 1 240px; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1.5px solid var(--g-border); border-radius: var(--g-radius-sm); background: var(--g-surface); }
.mk_filter_search i { color: var(--g-text-faint); }
.mk_filter_search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: var(--g-text); font-size: 14px; }
.mk_filter_search:focus-within { border-color: var(--g-primary); }
.mk_filter_plz { display: flex; }
.mk_filter_plz .bsk_input { width: 96px; height: 40px; border-radius: var(--g-radius-sm) 0 0 var(--g-radius-sm); }
.mk_filter_plz .bsk_select { border-left: none; border-radius: 0 var(--g-radius-sm) var(--g-radius-sm) 0; }
.mk_filter .bsk_btn_submit { height: 40px; }
.mk_check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--g-text-sub); cursor: pointer; white-space: nowrap; }
.mk_check input { width: 16px; height: 16px; accent-color: var(--g-primary); }

/* 목록: 툴바 */
.mk_toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.mk_total { font-size: 13.5px; color: var(--g-text-sub); }
.mk_total strong { color: var(--g-text); }
.mk_reset { margin-left: 8px; font-size: 12px; color: var(--g-primary); text-decoration: underline; }
.mk_warn { display: block; margin-top: 4px; font-size: 12px; color: var(--g-primary); }

/* 목록: 카드 그리드 */
.mk_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.mk_card { position: relative; background: var(--g-surface); border: 1px solid var(--g-border); border-radius: var(--g-radius-md); overflow: hidden; transition: transform .15s, box-shadow .15s; }
.mk_card:hover { transform: translateY(-3px); box-shadow: var(--g-shadow-md); }
.mk_card_link { display: block; color: inherit; }
.mk_card_chk { position: absolute; top: 10px; right: 10px; z-index: 2; width: 18px; height: 18px; accent-color: var(--g-primary); }
.mk_thumb { position: relative; aspect-ratio: 4 / 3; background: var(--g-surface-alt); overflow: hidden; }
.mk_thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.mk_card:hover .mk_thumb img { transform: scale(1.04); }
.mk_noimg { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--g-text-faint); font-size: 34px; }
.mk_noimg small { font-size: 12px; }
.mk_card.is_sold .mk_thumb img, .mk_gallery_main.is_sold img { opacity: .45; filter: grayscale(.6); }
.mk_badge { position: absolute; top: 10px; left: 10px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; line-height: 18px; }
.mk_badge_reserved { background: var(--g-accent); color: var(--g-ink); }
.mk_badge_sold { background: var(--g-ink); color: #fff; }
.mk_badge_cate { top: auto; bottom: 10px; background: rgba(0,0,0,.6); color: #fff; }
.mk_body { padding: 12px 14px 14px; }
.mk_price { font-size: 17px; font-weight: 800; color: var(--g-text); letter-spacing: -.2px; }
.mk_price small, .mk_info_price small { font-size: 12px; font-weight: 700; color: var(--g-primary); }
.mk_tit { margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--g-text); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2.8em; }
.mk_card:hover .mk_tit { color: var(--g-primary); }
.mk_meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; font-size: 12px; color: var(--g-text-faint); }
.mk_ship { color: var(--g-text-sub); }
.mk_empty { background: var(--g-surface); border: 1px dashed var(--g-border); border-radius: var(--g-radius-md); }
/* 이용 안내(공지·[필독]) 글 — 물건 카드 대신 목록 위 한 줄(2026-10-15) */
.mk_notice { margin: 0 0 12px; padding: 0; list-style: none; }
.mk_notice li + li { margin-top: 6px; }
.mk_notice a { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border: 1px solid var(--g-border); border-radius: var(--g-radius-md); background: var(--g-surface); color: var(--g-text); font-size: 14px; font-weight: 700; text-decoration: none; }
.mk_notice a .fa { margin-left: auto; color: var(--g-text-sub); }
@media (hover: hover) { .mk_notice a:hover { border-color: var(--g-primary); } }
.mk_empty_sub { display: inline-block; margin-top: 6px; font-size: 13.5px; color: var(--g-text-sub); }
#mk_wrap .pg_wrap { margin-top: 22px; }

/* 보기: 사진 + 정보 */
#mk_view { 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; }
.mk_view_top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); border-bottom: 1px solid var(--g-border); }
.mk_gallery { padding: 20px; border-right: 1px solid var(--g-border); }
.mk_gallery_main { position: relative; aspect-ratio: 4 / 3; border-radius: var(--g-radius-md); overflow: hidden; background: var(--g-surface-alt); }
.mk_gallery_main img { width: 100%; height: 100%; object-fit: contain; }
.mk_gallery_main .mk_badge { top: 14px; left: 14px; font-size: 13px; padding: 5px 14px; }
.mk_gallery_thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: thin; }
.mk_gallery_thumbs button { flex: 0 0 72px; height: 54px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: var(--g-surface-alt); cursor: pointer; }
.mk_gallery_thumbs button.on { border-color: var(--g-primary); }
.mk_gallery_thumbs img { width: 100%; height: 100%; object-fit: cover; }
.mk_info { padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.mk_info_tit { font-size: 20px; font-weight: 800; line-height: 1.35; color: var(--g-text); }
.mk_info_price { font-size: 26px; font-weight: 900; color: var(--g-primary); letter-spacing: -.5px; }
.mk_info_list { display: flex; flex-direction: column; border-top: 1px solid var(--g-border); }
.mk_info_list > div { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--g-border); font-size: 13.5px; }
.mk_info_list dt { flex: 0 0 72px; color: var(--g-text-faint); }
.mk_info_list dd { color: var(--g-text); }
.mk_seller { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--g-text); }
.mk_seller_avatar img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.mk_seller_me { padding: 2px 8px; border-radius: 999px; font-size: 11px; background: var(--g-surface-alt); color: var(--g-text-sub); }
.mk_actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mk_btn_main { flex: 1 1 180px; justify-content: center; height: 46px; font-size: 15px; }
.mk_btn_sub { height: 46px; }
.mk_contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; padding: 12px 14px; border-radius: var(--g-radius-sm); background: var(--g-surface-alt); font-size: 13px; color: var(--g-text-sub); }
.mk_contact strong { color: var(--g-text); font-size: 14px; }
.mk_status_form { padding-top: 14px; border-top: 1px dashed var(--g-border); }
.mk_status_label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 700; color: var(--g-text-faint); }
.mk_desc_tit { font-size: 16px; font-weight: 800; margin-bottom: 12px; color: var(--g-text); }
.mk_safety { margin: 0 28px 20px; padding: 12px 14px; border-radius: var(--g-radius-sm); background: rgba(var(--g-accent-rgb), .14); font-size: 13px; color: var(--g-text-sub); }
.mk_safety i { color: var(--g-accent); margin-right: 4px; }

/* 글쓰기·거래상태 공용: 세그먼트 버튼(라디오) */
.mk_seg { display: flex; flex-wrap: wrap; gap: 6px; }
.mk_seg_item { position: relative; cursor: pointer; border: none; background: none; padding: 0; }
.mk_seg_item input { position: absolute; opacity: 0; pointer-events: none; }
.mk_seg_item span { display: inline-block; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--g-border); background: var(--g-surface); font-size: 13px; font-weight: 700; color: var(--g-text-sub); transition: all .12s; }
.mk_seg_item:hover span { border-color: var(--g-primary); color: var(--g-primary); }
.mk_seg_item input:checked + span, .mk_seg_item.on span { background: var(--g-primary); border-color: var(--g-primary); color: #fff; }
.mk_seg_item input:focus-visible + span { outline: 2px solid var(--g-primary); outline-offset: 2px; }
button.mk_seg_item:disabled { cursor: default; }

/* 글쓰기 추가 입력란 */
.mk_wf .mk_seg { margin-top: 2px; }
.mk_price_input { display: flex; align-items: center; gap: 8px; margin-top: 10px; max-width: 240px; }
.mk_price_input .bsk_input { flex: 1; font-size: 16px; font-weight: 700; }
.mk_price_unit { font-size: 16px; font-weight: 800; color: var(--g-text-sub); }
.mk_help { margin-top: 6px; font-size: 12px; color: var(--g-text-faint); }
.mk_help .mk_warm_note { display: block; margin-bottom: 2px; font-size: 14px; font-weight: 800; color: var(--g-danger); } /* 방 글 월세 = 총 월세 강조 */
.mk_city_row { display: flex; flex-wrap: wrap; gap: 8px; }
.mk_city_row .bsk_select { flex: 1 1 220px; }
.mk_city_row .bsk_input { flex: 1 1 200px; }
.mk_plz_row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; }
.mk_plz_row .bsk_input { width: 160px; }
.mk_plz_row .mk_help { margin-top: 0; }

@media (max-width: 860px) {
    .mk_view_top { grid-template-columns: 1fr; }
    .mk_gallery { border-right: none; border-bottom: 1px solid var(--g-border); padding: 14px; }
    .mk_info { padding: 18px; }
}
@media (max-width: 640px) {
    .mk_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .mk_body { padding: 10px 10px 12px; }
    .mk_price { font-size: 15px; }
    .mk_tit { font-size: 13px; }
    .mk_filter { padding: 10px; }
    .mk_filter_search { flex-basis: 100%; }
    .mk_filter > .bsk_select, .mk_filter_plz { flex: 1 1 auto; }
    .mk_filter_plz .bsk_select { flex: 1; }
    .mk_safety { margin: 0 16px 16px; }
}
.mk_credit { margin-top: 14px; text-align: right; font-size: 11px; color: var(--g-text-faint); }
.mk_credit a { color: inherit; text-decoration: underline; }
.mk_note { display: block; margin-top: 4px; font-size: 12px; color: var(--g-text-faint); }
.mk_counts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; font-size: 12px; color: var(--g-text-faint); }
.mk_bump { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 12px; }
.mk_bump .bsk_btn:disabled { opacity: .5; cursor: default; border-color: var(--g-border); color: var(--g-text-faint); }
.mk_bump .mk_help { margin-top: 0; }
.mk_others { padding: 0 28px 24px; }
.mk_grid_mini { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mk_grid_mini .mk_price { font-size: 14px; }
.mk_grid_mini .mk_tit { font-size: 12.5px; }
@media (max-width: 640px) {
    .mk_others { padding: 0 16px 20px; }
    .mk_grid_mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 마켓: 사진 슬라이드(가로 스크롤 + scroll-snap — 폰·아이패드는 네이티브 스와이프) ── */
.mk_slides { display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; }
.mk_slides::-webkit-scrollbar { display: none; }
.mk_slide { flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: block; }
.mk_slide img { width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; }
.mk_gallery_main.is_sold .mk_slide img { opacity: .45; filter: grayscale(.6); }
.mk_slide_nav { position: absolute; top: 50%; z-index: 2; width: 40px; height: 40px; margin-top: -20px; border: none; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; font-size: 15px; cursor: pointer; display: none; align-items: center; justify-content: center; }
.mk_slide_prev { left: 10px; }
.mk_slide_next { right: 10px; }
.mk_slide_nav:disabled { opacity: .25; cursor: default; }
.mk_slide_count { position: absolute; right: 12px; bottom: 12px; z-index: 2; padding: 3px 10px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; pointer-events: none; }
.mk_slide_count b { font-weight: 800; }
.mk_gallery_main .mk_badge { z-index: 2; }

/* 마우스가 있는 기기에서만: 좌우 버튼 표시 + 떠오르는 hover 효과 */
@media (hover: hover) and (pointer: fine) {
    .mk_gallery_main:hover .mk_slide_nav { display: flex; }
}
/* 터치 기기: iOS 는 탭한 요소에 :hover 가 남아 카드가 떠 있는 채로 보이므로 hover 효과를 끈다 */
@media (hover: none) {
    .mk_card:hover { transform: none; box-shadow: none; }
    .mk_card:hover .mk_thumb img { transform: none; }
    .mk_card:hover .mk_tit { color: var(--g-text); }
    .mk_card:active { transform: scale(.98); }
    .mk_cate a:hover, .mk_seg_item:hover span { border-color: var(--g-border); color: var(--g-text-sub); }
    .mk_cate a.on:hover { border-color: var(--g-primary); color: #fff; }
}
/* 터치 기기: 손가락으로 누르기 쉬운 크기(약 40px 이상) */
@media (pointer: coarse) {
    .mk_seg_item span { padding: 11px 18px; font-size: 14px; }
    .mk_cate a { padding: 10px 18px; }
    .mk_check input, .mk_card_chk { width: 22px; height: 22px; }
    .mk_gallery_thumbs button { flex-basis: 64px; height: 48px; }
}

/* iOS Safari 는 16px 미만 입력칸을 누르면 화면을 확대한다. 기존 규칙은 폭 640px 이하에만 걸려 있어
   아이폰 가로 모드(폭 812px 이상)·아이패드에서 계속 확대됐다 — 화면 폭이 아니라 "터치 기기" 기준으로 막는다. */
@media (hover: none) and (pointer: coarse) {
    input, select, textarea { font-size: 16px; }
}

/* 아이패드 가로 등 1100px 이하: 사이드바 때문에 본문이 좁아져 글보기 2단(사진|정보)이 답답해지므로 1단으로 */
@media (max-width: 1100px) {
    .mk_view_top { grid-template-columns: 1fr; }
    .mk_gallery { border-right: none; border-bottom: 1px solid var(--g-border); }
    .mk_gallery_main { max-height: 70vh; }
}

/* 구형 iOS(14 이하) — aspect-ratio·inset 미지원 대비 */
.mk_noimg { top: 0; right: 0; bottom: 0; left: 0; }
@supports not (aspect-ratio: 1 / 1) {
    .mk_thumb { height: 0; padding-top: 75%; }
    .mk_thumb img { position: absolute; top: 0; left: 0; }
    .mk_gallery_main { height: 0; padding-top: 75%; }
    .mk_gallery_main .mk_slides { position: absolute; top: 0; left: 0; }
}

/* 마켓: 휴대폰 떠 있는 글쓰기 버튼 — "맨 위로" 버튼(#gn_totop_btn, 폰에서 right/bottom 14px·42px) 바로 위.
   글자/배경을 본문색 반전으로 써서 빨간 "맨 위로" 버튼과 구분되고 다크모드에서도 보인다. */
.mk_fab { display: none; }
@media (max-width: 640px) {
    .mk_fab { position: fixed; right: 14px; bottom: calc(66px + env(safe-area-inset-bottom, 0px)); z-index: 499; display: inline-flex; align-items: center; gap: 6px; height: 46px; padding: 0 18px; border-radius: 999px; background: var(--g-text); color: var(--g-surface); font-size: 14.5px; font-weight: 800; box-shadow: var(--g-shadow-md); }
    .mk_fab:active { transform: scale(.96); }
    #mk_wrap { padding-bottom: 56px; }
    /* 필터: 검색 / 우편번호+반경 / 지역|정렬 / 거래완료|검색 버튼 의 2열 정렬 */
    .mk_filter { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .mk_filter_search { grid-column: 1 / -1; order: 1; }
    .mk_filter_plz { grid-column: 1 / -1; order: 2; }
    .mk_filter_plz .bsk_input { flex: 1; width: auto; }
    .mk_filter > select[name=mk_city] { order: 3; min-width: 0; }
    .mk_filter > select[name=mk_sort] { order: 4; min-width: 0; }
    .mk_filter > .mk_check { order: 5; }
    .mk_filter > .bsk_btn_submit { order: 6; justify-content: center; }
}

/* 마켓 필터: 가격대 + 내 위치 버튼 */
.mk_filter_price { display: flex; align-items: center; gap: 4px; }
.mk_filter_price .bsk_input { width: 84px; height: 40px; padding: 0 10px; }
.mk_filter_price span { color: var(--g-text-faint); }
.mk_gps_btn { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 12px; border: 1.5px solid var(--g-border); border-right: none; border-radius: var(--g-radius-sm) 0 0 var(--g-radius-sm); background: var(--g-surface); color: var(--g-text-sub); font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.mk_gps_btn i { color: var(--g-primary); }
.mk_gps_btn.on { background: var(--g-primary); border-color: var(--g-primary); color: #fff; }
.mk_gps_btn.on i { color: #fff; }
.mk_gps_btn.is_loading i { animation: mk_spin 1s linear infinite; }
@keyframes mk_spin { to { transform: rotate(360deg); } }
.mk_filter_plz .mk_gps_btn + .bsk_input { border-radius: 0; }
@media (max-width: 640px) {
    .mk_filter_price { grid-column: 1 / -1; order: 3; }
    .mk_filter_price .bsk_input { flex: 1; width: auto; }
    .mk_filter > select[name=mk_city] { order: 4; }
    .mk_filter > select[name=mk_sort] { order: 5; }
    .mk_filter > .mk_check { order: 6; }
    .mk_filter > .bsk_btn_submit { order: 7; }
    /* 방·집 구하기는 체크 칸이 둘(거주지 등록·계약완료)이라 검색 버튼이 혼자 다음 줄 왼쪽 반 칸에 앉았다 — 그때만 한 줄 전체로(2026-10-18) */
    .mk_filter > .mk_check + .mk_check + .bsk_btn_submit { grid-column: 1 / -1; }
}

/* 마켓 필터 휴대폰 넘침 수정 — input 은 브라우저 기본 최소 너비(약 150px, size=20)가 있어서 flex:1 만으로는
   그 이하로 줄지 않아 "내 위치+우편번호+반경", "최소~최대" 줄이 화면 밖으로 밀려났다(아이폰 실측).
   flex 자식과 그리드 칸 모두 min-width:0 을 줘야 실제로 남은 폭만큼만 차지한다. */
.mk_filter_plz, .mk_filter_price { min-width: 0; }
.mk_filter_plz .bsk_input, .mk_filter_plz .bsk_select, .mk_filter_price .bsk_input { min-width: 0; }
@media (max-width: 640px) {
    .mk_filter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .mk_filter > * { min-width: 0; }
    .mk_filter_plz { display: flex; width: 100%; }
    .mk_filter_plz .mk_gps_btn { flex: 0 0 auto; padding: 0 10px; }
    .mk_filter_plz .bsk_input { flex: 1 1 0; width: 0; }
    .mk_filter_plz .bsk_select { flex: 0 0 auto; width: auto; max-width: 118px; padding: 0 8px; }
    .mk_filter_price { display: flex; width: 100%; }
    .mk_filter_price .bsk_input { flex: 1 1 0; width: 0; }
    .mk_filter_price span { flex: 0 0 auto; }
    .mk_filter > select { width: 100%; }
}

/* 마켓 글쓰기 가격칸 ₫ 기호 — 글쓰기 폼 입력칸이 폭 100%로 늘면서 옆에 둔 ₫ 가 칸 밖으로 밀려났다(아이폰 실측).
   ₫ 를 입력칸 안쪽 오른쪽에 겹쳐 두고, 숫자가 그 밑으로 들어가지 않게 오른쪽 여백을 준다. */
.mk_price_input { position: relative; display: block; width: 100%; max-width: 260px; }
.mk_price_input .bsk_input { display: block; width: 100%; min-width: 0; padding-right: 44px; box-sizing: border-box; }
.mk_price_unit { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; line-height: 1; }

/* ── 메인 화면 탭: 중고거래(사진 카드) · 갤러리(사진 그리드) 최신글 — skin/latest/market, skin/latest/gallery ──
   6개를 그리므로 PC·아이패드 3열(2줄), 휴대폰 2열(3줄)로 고정해 빈칸 없이 채운다. */
.mk_grid_latest { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px; }
.mk_grid_latest .mk_body { padding: 10px 12px 12px; }
.mk_grid_latest .mk_price { font-size: 15px; }
.mk_grid_latest .mk_tit { font-size: 13px; }
.mk_grid_latest .mk_meta { font-size: 11.5px; margin-top: 6px; }

.gl_latest_grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px; }
.gl_latest_link { display: block; color: var(--g-text); }
.gl_latest_thumb { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: var(--g-radius-md); overflow: hidden; background: var(--g-surface-alt); }
.gl_latest_thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.gl_latest_noimg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; color: var(--g-text-faint); font-size: 28px; }
.gl_latest_new { position: absolute; top: 8px; left: 8px; width: 18px; height: 18px; border-radius: 5px; background: var(--g-primary); color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.gl_latest_tit { display: block; margin-top: 8px; font-size: 13px; font-weight: 600; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl_latest_meta { display: block; margin-top: 2px; font-size: 11.5px; color: var(--g-text-faint); }
@media (hover: hover) and (pointer: fine) {
    .gl_latest_link:hover .gl_latest_thumb img { transform: scale(1.05); }
    .gl_latest_link:hover .gl_latest_tit { color: var(--g-primary); }
}
@supports not (aspect-ratio: 1 / 1) {
    .gl_latest_thumb { height: 0; padding-top: 100%; }
    .gl_latest_thumb img { position: absolute; top: 0; left: 0; }
}
@media (max-width: 640px) {
    .mk_grid_latest, .gl_latest_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; }
}

/* 메인 갤러리형 최신글(업소정보·갤러리) 영역 줄이기 — 정사각형 3열×2줄이 너무 커서 4:3 사진 4열 1줄(폰 2열 2줄)로 */
.gl_latest_grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 14px 16px; }
.gl_latest_thumb { aspect-ratio: 4 / 3; border-radius: var(--g-radius-sm); }
.gl_latest_tit { margin-top: 6px; font-size: 12.5px; }
.gl_latest_meta { font-size: 11px; }
@supports not (aspect-ratio: 1 / 1) { .gl_latest_thumb { padding-top: 75%; } }
@media (max-width: 640px) {
    .gl_latest_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; }
}

/* ============================================================
   업소정보 디렉토리 스킨 (skin/board/biz) — 중고거래 마켓의 mk_ 컴포넌트(필터·카드·사진 슬라이드)를
   그대로 쓰고, 업종 칩·영업 상태·정보 카드·영업시간 표·별점만 biz_ 로 추가. 색은 테마 변수만.
   ============================================================ */
/* 목록: 업종 칩(아이콘 + 이름 + 개수) — 폰에서는 가로로 밀어서 본다 */
.biz_types { display: flex; gap: 8px; margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
.biz_types::-webkit-scrollbar { display: none; }
.biz_types a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: var(--g-radius-md); border: 1.5px solid var(--g-border); background: var(--g-surface); font-size: 13px; font-weight: 700; color: var(--g-text-sub); white-space: nowrap; }
.biz_types a i { color: var(--g-primary); font-size: 14px; }
.biz_types a small { font-size: 11px; font-weight: 700; color: var(--g-text-faint); }
.biz_types a.on { background: var(--g-primary); border-color: var(--g-primary); color: #fff; }
.biz_types a.on i, .biz_types a.on small { color: #fff; }
.biz_regions a { padding: 6px 14px; font-size: 12.5px; }

/* 목록 카드 */
.biz_badge_type { background: rgba(0,0,0,.6); color: #fff; }
.biz_badge_open { position: absolute; right: 10px; bottom: 10px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; line-height: 16px; }
.biz_badge_open.is_open { background: #12A150; color: #fff; }       /* 영업 중 = 초록(상태색) */
.biz_badge_open.is_closed { background: rgba(0,0,0,.55); color: #fff; }
.biz_name { font-weight: 700; min-height: 2.8em; overflow-wrap: anywhere; } /* 띄어쓰기 없는 긴 영문 이름도 칸 안에서 줄바꿈 → 2줄 넘으면 … (2026-10-17) */
.biz_card_rate { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12px; color: var(--g-text-faint); }
.biz_card_rate b { color: var(--g-text); }
.biz_stars { color: #F5A623; letter-spacing: 1px; font-size: 12px; }
.biz_ko { color: var(--g-primary); font-weight: 700; }

/* 상세: 정보 카드 */
.biz_info.is_full { grid-column: 1 / -1; }
.biz_info_badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.biz_badges_br { flex-basis: 100%; height: 0; margin-top: -6px; } /* 줄바꿈 — gap(6px) 만큼 위로 당겨 두 줄 사이가 너무 벌어지지 않게 */
.biz_type_tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: rgba(var(--g-primary-rgb), .1); color: var(--g-primary); font-size: 12px; font-weight: 800; }
.biz_rate_sum { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--g-text-sub); }
.biz_rate_sum .biz_stars { font-size: 15px; }
.biz_rate_sum b { color: var(--g-text); font-size: 16px; }
.biz_state { font-size: 13.5px; font-weight: 700; }
.biz_state i { font-size: 9px; vertical-align: 2px; margin-right: 2px; }
.biz_state.is_open { color: #12A150; }
.biz_state.is_closed { color: var(--g-text-faint); }
.biz_actions { display: flex; gap: 8px; flex-wrap: wrap; }
.biz_actions .gn_btn, .biz_actions .bsk_btn { flex: 1 1 140px; justify-content: center; height: 46px; font-size: 15px; }
.biz_info_list dd a { color: var(--g-text); text-decoration: underline; text-underline-offset: 2px; }
.biz_links { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.biz_links a, .biz_links span { text-decoration: none !important; color: var(--g-text) !important; }
.biz_links i { color: var(--g-primary); }
.biz_opts { display: flex; flex-wrap: wrap; gap: 6px; }
.biz_opts li { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: var(--g-surface-alt); font-size: 12.5px; color: var(--g-text-sub); }
.biz_opts i { color: var(--g-primary); }
.biz_hours h3 { font-size: 14px; font-weight: 800; margin-bottom: 8px; color: var(--g-text); }
.biz_hours table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.biz_hours th, .biz_hours td { padding: 7px 10px; border-bottom: 1px solid var(--g-border); text-align: left; color: var(--g-text); }
.biz_hours th { width: 70px; font-weight: 700; color: var(--g-text-sub); }
.biz_hours tr.is_today th, .biz_hours tr.is_today td { background: rgba(var(--g-primary-rgb), .07); color: var(--g-text); font-weight: 800; }
.biz_hours th small { font-size: 10.5px; color: var(--g-primary); }
.biz_hours .is_off { color: var(--g-text-faint); }
.biz_hours_note { margin-top: 8px; font-size: 12.5px; color: var(--g-text-sub); }
.biz_review_tit { margin: 6px 0 10px; font-size: 16px; font-weight: 800; color: var(--g-text); }
.biz_review_tit i { color: #F5A623; }

/* 글쓰기: 영업시간·링크 */
.biz_hours_edit { display: flex; flex-direction: column; gap: 6px; }
.biz_hours_row { display: flex; align-items: center; gap: 8px; }
.biz_hours_row .bsk_input { width: 120px; min-width: 0; height: 40px; padding: 0 10px; }
.biz_hours_row.is_off .bsk_input { opacity: .4; }
.biz_hours_day { flex: 0 0 26px; font-weight: 800; color: var(--g-text); }
.biz_hours_day.is_sat { color: #2B6CB0; }
.biz_hours_day.is_sun { color: var(--g-primary); }
.biz_hours_sep { color: var(--g-text-faint); }
.biz_hours_tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.biz_hours_tools .bsk_btn { height: 34px; font-size: 12.5px; }
.biz_links_edit { display: flex; flex-direction: column; gap: 6px; }
.biz_links_edit label { display: flex; align-items: center; gap: 8px; }
.biz_links_edit i { flex: 0 0 18px; text-align: center; color: var(--g-primary); font-size: 16px; }
.biz_links_edit .bsk_input { flex: 1; min-width: 0; }
.mk_plz_row #biz_plz { width: 130px; }
.mk_plz_row #biz_city { flex: 1 1 160px; min-width: 0; }

/* 리뷰 별점 입력(댓글 폼) — row-reverse 로 그려서 :checked ~ 로 왼쪽 별까지 칠함 */
.biz_rate_input { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.biz_rate_label { font-size: 13px; font-weight: 800; color: var(--g-text); }
.biz_rate_stars { display: inline-flex; flex-direction: row-reverse; }
.biz_rate_stars input { position: absolute; opacity: 0; pointer-events: none; }
.biz_rate_stars label { padding: 2px 3px; font-size: 24px; color: var(--g-border); cursor: pointer; }
.biz_rate_stars input:checked ~ label, .biz_rate_stars input:focus-visible + label { color: #F5A623; }
@media (hover: hover) {
    .biz_rate_stars label:hover, .biz_rate_stars label:hover ~ label { color: #F5A623; }
}
.biz_rate_clear { border: none; background: none; font-size: 12px; color: var(--g-text-faint); text-decoration: underline; cursor: pointer; }
.biz_cmt_rate { display: flex; align-items: center; gap: 4px; margin: 2px 0 4px; font-size: 12px; color: var(--g-text-sub); }

@media (max-width: 640px) {
    .biz_hours_row .bsk_input { flex: 1 1 0; width: 0; }
    .biz_hours_row .mk_check { flex: 0 0 auto; }
    .biz_filter > select[name=bz_sort] { order: 4; grid-column: 1 / -1; }
    .biz_filter > .mk_check { order: 5; }
    .biz_filter > .bsk_btn_submit { order: 7; grid-column: 1 / -1; }
}

/* 메인 업소정보 최신글(skin/latest/biz) — PC·태블릿 4개, 폰 2개를 한 줄로 표시 */
.biz_grid_latest { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 14px 16px; }
.biz_grid_latest .mk_body { padding: 9px 10px 11px; }
.biz_grid_latest .biz_name { font-size: 14px; min-height: 2.8em; } /* 메인 업소 이름 — 12.5px 는 작아 보여 키움(2026-10-15) */
.biz_grid_latest .mk_meta { font-size: 11px; margin-top: 4px; }
.biz_grid_latest .mk_badge, .biz_grid_latest .biz_badge_open { font-size: 10.5px; padding: 2px 8px; }
.biz_ad_corner { position: absolute; top: 6px; right: 7px; color: #fff; font-size: 10px; font-weight: 700; line-height: 14px; letter-spacing: .02em; text-shadow: 0 0 2px rgba(0,0,0,.9), 0 0 4px rgba(0,0,0,.6), 0 1px 1px rgba(0,0,0,.8); } /* 메인 업소 카드 사진 위 "광고" — 배경 없이 흰 글자 + 어두운 그림자(밝은 사진·사진 없는 카드에서도 읽히게, 그림자 빼지 말 것) */
.mk_gallery_main .biz_ad_corner { top: 10px; right: 12px; z-index: 2; font-size: 11px; pointer-events: none; } /* 상세 사진(슬라이드) 위 — 사진이 커서 한 단계 크게 */
@media (max-width: 640px) {
    .biz_grid_latest { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; }
    .biz_grid_latest > .biz_card:nth-child(n+3) { display: none; }
}

/* 업소정보 영업시간 2구간(브레이크 타임) — 상세 표는 구간마다 한 줄, 글쓰기는 "+ 2구간"으로 둘째 줄을 연다 */
.biz_hours_rg { display: block; }
.biz_hours_row { align-items: flex-start; flex-wrap: wrap; }
.biz_hours_day { padding-top: 10px; }
.biz_hours_ranges { display: flex; flex-direction: column; gap: 6px; flex: 1 1 260px; min-width: 0; }
.biz_hours_range { display: flex; align-items: center; gap: 8px; }
.biz_hours_range.is_second { display: none; }
.biz_hours_row.has_two .biz_hours_range.is_second { display: flex; }
.biz_hours_row.has_two .biz_range_add { display: none; }
.biz_hours_ctrl { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.biz_range_add { border: 1.5px dashed var(--g-border); background: var(--g-surface); color: var(--g-text-sub); border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 700; cursor: pointer; }
.biz_range_add:disabled { opacity: .4; cursor: default; }
.biz_range_del { flex: 0 0 auto; width: 32px; height: 32px; border: none; border-radius: 50%; background: var(--g-surface-alt); color: var(--g-text-faint); cursor: pointer; }
.biz_hours_row.is_off .biz_hours_ranges { opacity: .4; }
@media (max-width: 640px) {
    .biz_hours_ranges { flex-basis: calc(100% - 40px); }
    .biz_hours_range .bsk_input { flex: 1 1 0; width: 0; }
    .biz_hours_ctrl { padding-left: 34px; min-height: 0; }
}

/* 업소정보 업종 칩 — 한 줄 가로 스크롤에 스크롤바를 숨겨 둬서 PC 에서는 뒤 칩(카페·베이커리 뒤 등)이 잘려 보이고
   마우스로 밀 수도 없었다. 넓은 화면은 여러 줄로 감싸 전부 보이게, 폰은 가로 스크롤 + 오른쪽 끝 흐림으로 "더 있음" 표시. */
@media (min-width: 641px) {
    .biz_types { flex-wrap: wrap; overflow: visible; }
}
@media (max-width: 640px) {
    .biz_types {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
                mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
        padding-right: 28px;
    }
}

/* 업소정보: 지역 칩(위)과 업종 칩(아래) 사이 구분선(짙은 회색, 다크모드에선 밝은 회색) — 지역 칩 아래 테두리로 긋는다
   (업종 칩 줄은 폰에서 오른쪽 끝을 마스크로 흐리게 해서, 거기에 그으면 선까지 흐려진다). 2026-10-17 두 줄 순서 바꿈 */
.biz_regions { border-bottom: 2px solid var(--g-text-sub); padding-bottom: 14px; margin-bottom: 14px; }

/* 업소정보: 정보 수정 제안·폐업 신고(3단계 ⑧) — 안내 박스 안 접힘 폼 */
.biz_report_box p { margin: 0; }
.biz_report { margin-top: 10px; }
.biz_report summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 700; color: var(--g-primary); list-style: none; }
.biz_report summary::-webkit-details-marker { display: none; }
.biz_report[open] summary { margin-bottom: 10px; }
.biz_report_form { display: flex; flex-direction: column; gap: 10px; }
.biz_report_form textarea { width: 100%; height: auto; min-height: 80px; padding: 10px 12px; resize: vertical; }
.biz_report_form .bsk_btn_submit { align-self: flex-start; }
.biz_report_login a { color: var(--g-primary); font-weight: 700; text-decoration: underline; }

/* 새글(bbs/new.php, skin/new/basic) — 게시판 목록 카드 줄(bsk_list) + 그룹›게시판 위치 표시 */
.gn_new_filter { margin-top: 4px; }
.gn_new_where { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; font-size: 11.5px; color: var(--g-text-faint); }
.gn_new_where a { color: var(--g-text-faint); }
.gn_new_where a:hover { color: var(--g-primary); }
.gn_new_cmt { padding: 1px 7px; border-radius: 999px; background: var(--g-surface-alt); color: var(--g-text-sub); font-weight: 700; }
#gn_new_wrap .bsk_list_header { gap: 10px; }

/* 쪽지함 목록: 이름이 미리보기 글에 밀려 폭 0 → 한 글자씩 세로로 쪼개지던 문제(닉네임만 표시로 바꾼 뒤, 2026-10).
   이름은 줄지 않게(최대 40%까지, 넘치면 말줄임), 미리보기가 남은 폭을 쓰며 말줄임 */
.ms_item .ms_from { flex: 0 1 auto; max-width: 40%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms_item .ms_snippet { flex: 1 1 0; min-width: 0; max-width: none; }

/* ── 자동등록방지(캡차, plugin/kcaptcha) 공통 — 쪽지 답장·비회원 글쓰기·댓글·회원가입 등 어디서나 같은 모양.
   코어 마크업: fieldset#captcha > legend, img#captcha_img, input#captcha_key, button#captcha_mp3, button#captcha_reload, span#captcha_info
   (폰은 audio#captcha_audio 가 추가되고 음성 버튼은 없다). 테마 스타일이 없어 브라우저 기본 모양으로 나왔다(2026-10). ── */
#captcha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; padding: 0; border: 0; min-width: 0; }
#captcha legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#captcha #captcha_img { height: 44px; width: auto; border-radius: var(--g-radius-sm); border: 1px solid var(--g-border); background: #fff; }
#captcha #captcha_key { width: 110px; height: 44px; 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: 18px; font-weight: 800; letter-spacing: 3px; text-align: center; }
#captcha #captcha_key:focus { border-color: var(--g-primary); outline: none; }
#captcha #captcha_mp3, #captcha #captcha_reload { height: 36px; padding: 0 12px; border: 1.5px solid var(--g-border); border-radius: 999px; background: var(--g-surface); color: var(--g-text-sub); font-size: 12px; font-weight: 700; cursor: pointer; }
#captcha #captcha_mp3:hover, #captcha #captcha_reload:hover { border-color: var(--g-primary); color: var(--g-primary); }
#captcha #captcha_mp3 span, #captcha #captcha_reload span { display: none; }
#captcha #captcha_info { flex-basis: 100%; font-size: 12px; color: var(--g-text-faint); }
#captcha #captcha_audio { flex-basis: 100%; height: 36px; max-width: 100%; }

/* 업소정보 사장님 인증·추천 업소(3단계 ⑩) */
.biz_flags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.biz_flag_feat, .biz_flag_ver { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; line-height: 16px; }
.biz_flag_feat { background: transparent; color: #111; } /* 프리미엄: 바탕·테두리 없이 검정 글씨(2026-10-20) — 플래티넘·스페셜은 아래에서 덮어씀 */
html[data-theme="dark"] .biz_flag_feat { color: #F2F2F2; } /* 어두운 화면에서 검정 글씨는 안 보여서 */
.biz_flag_feat.is_premium { background: #DCDCDF; } /* 프리미엄: 연회색 바탕 + 검정 글씨, 아이콘·테두리 없음(2026-10-20) */
html[data-theme="dark"] .biz_flag_feat.is_premium { background: #3A3B3F; }
/* 유료 등급 모양(2026-10-20 사용자 지정): 플래티넘 = 검정 바탕 + 흰 글씨 + 밝은 노랑 테두리, 스페셜 = 바탕 없음 + 검정 글씨 + 검정 테두리. 테두리는 안쪽 그림자(배지 크기 그대로) */
.biz_flag_feat.is_platinum { background: #111; color: #fff; box-shadow: inset 0 0 0 1.5px #FFE14D; }
.biz_flag_feat.is_special { background: #FFF8DC; color: #111; box-shadow: inset 0 0 0 1.5px #111; } /* 스페셜: 아주 연한 노랑 바탕(2026-10-20) */
html[data-theme="dark"] .biz_flag_feat.is_platinum { background: #000; color: #fff; box-shadow: inset 0 0 0 1.5px #FFE14D; }
html[data-theme="dark"] .biz_flag_feat.is_special { background: rgba(255,214,90,.14); color: #F2F2F2; box-shadow: inset 0 0 0 1.5px #F2F2F2; } /* 어두운 화면에서 검정 글씨는 안 보여서 흰색으로 */
/* 마크(아이콘) 색(2026-10-20): 플래티넘 💎 = 테두리와 같은 밝은 노랑, 스페셜 ⭐ = 진한 금색(흰 바탕에서도 보이게), 프리미엄 🔖 = 글씨색 그대로 */
.biz_flag_feat.is_platinum i { color: #FFE14D; }
/* 스페셜 마크는 프리미엄과 같은 책갈피, 글씨색(검정 — 어두운 화면은 흰색) 그대로(2026-10-20) */
.biz_tier_seg { margin-bottom: 6px; }
.mk_seg_item.is_off { opacity: .45; cursor: not-allowed; }
.biz_feat_plans .biz_flag_feat { vertical-align: 1px; }
.biz_flag_ver { background: rgba(43,108,176,.12); color: #2B6CB0; }
html[data-theme="dark"] .biz_flag_ver { background: rgba(99,160,230,.18); color: #8CC0F5; }
.biz_flag_emoji { font-size: 1.05em; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; } /* 스페셜 💫 (이모지 — 기기 이모지 글꼴로) */
/* 유료 상단 노출 표시(2026-10-20) — 법(공정위 추천·보증 심사지침, 베트남 LSSI·광고법)상 "광고"는 알아볼 수 있어야 해서 10px 아래로 줄이거나 흐리게 하지 말 것 */
.biz_flag_ad { display: inline-flex; align-items: center; padding: 0 4px; border: 1px solid #8A919C; border-radius: 3px; font-size: 10.5px; font-weight: 500; line-height: 14px; color: #4A505A; align-self: center; }
html[data-theme="dark"] .biz_flag_ad { border-color: #8A919C; color: #C9CED6; }
/* 유료 업소 카드(메인·목록, 2026-10-20): 플래티넘 = 노랑 테두리 + 노랑 빛, 스페셜 = 검정 테두리 + 어두운 빛, 프리미엄 = 테두리 그대로 + 약한 회색 빛 */
.mk_card.is_featured { box-shadow: 0 4px 14px rgba(0,0,0,.10); }
.mk_card.is_featured.is_tier_platinum { border: 2px solid var(--g-accent); box-shadow: 0 4px 14px rgba(var(--g-accent-rgb), .30); }
.mk_card.is_featured.is_tier_special { border: 2px solid #111; box-shadow: 0 4px 14px rgba(0,0,0,.22); }
html[data-theme="dark"] .mk_card.is_featured { box-shadow: 0 4px 14px rgba(255,255,255,.06); }
html[data-theme="dark"] .mk_card.is_featured.is_tier_special { border-color: #F2F2F2; box-shadow: 0 4px 14px rgba(255,255,255,.12); }
.biz_owner_note { padding: 10px 12px; border-radius: var(--g-radius-sm); background: rgba(43,108,176,.08); font-size: 13px; color: var(--g-text-sub); }
.biz_owner_note i { color: #2B6CB0; }
.biz_owner_label { display: inline-flex; align-items: center; gap: 3px; margin: 2px 0 4px; padding: 2px 8px; border-radius: 999px; background: rgba(43,108,176,.12); color: #2B6CB0; font-size: 11px; font-weight: 800; }
html[data-theme="dark"] .biz_owner_label, html[data-theme="dark"] .biz_owner_note i { color: #8CC0F5; }
.biz_claim { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--g-border); }
.biz_claim_desc { margin-bottom: 10px !important; font-size: 13px; }
/* 사장님 인증 혜택 목록(2026-10-20) — 아이콘 동그라미 + 굵은 제목 + 설명 */
.biz_claim_perks { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 10px !important; padding: 12px 14px !important; list-style: none; border-radius: 10px; background: rgba(43,108,176,.06); }
.biz_claim_perks li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.5; color: var(--g-text-sub); }
.biz_claim_perks li > i { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(43,108,176,.14); color: #2B6CB0; font-size: 12px; }
.biz_claim_perks li > span { min-width: 0; padding-top: 2px; }
.biz_claim_perks b { color: var(--g-text); }
.biz_claim_free { margin: 0 0 10px !important; font-size: 12.5px; color: var(--g-text-sub); }
.biz_claim_free i { color: #12A150; margin-right: 3px; }
html[data-theme="dark"] .biz_claim_perks { background: rgba(99,160,230,.10); }
html[data-theme="dark"] .biz_claim_perks li > i { background: rgba(99,160,230,.18); color: #8CC0F5; }
.biz_pending_cnt { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--g-primary); color: #fff; font-size: 11px; }

/* 업소 상세의 접힘 항목(정보 수정 제안 · 사장님 인증 신청)을 "눌러서 펼치는 버튼"처럼 — 글자 링크처럼 보여 누를 수 있는지 몰랐다(2026-10).
   테두리·배경 있는 카드형 버튼 + 아이콘 + 두 줄 안내(제목 / "눌러서 …") + 오른쪽 화살표(열리면 회전). */
.biz_report summary.biz_sum_btn {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; margin: 0;
    border: 1.5px solid var(--g-border); border-radius: var(--g-radius-md); background: var(--g-surface);
    color: var(--g-text); cursor: pointer; transition: border-color .15s, background .15s; -webkit-tap-highlight-color: transparent;
}
.biz_report summary.biz_sum_btn:hover, .biz_report summary.biz_sum_btn:active { border-color: var(--g-primary); background: rgba(var(--g-primary-rgb), .04); }
.biz_report summary.biz_sum_btn:focus-visible { outline: 2px solid var(--g-primary); outline-offset: 2px; }
.biz_report[open] summary.biz_sum_btn { margin-bottom: 12px; border-color: var(--g-primary); }
.biz_sum_ico { flex: 0 0 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(var(--g-primary-rgb), .1); color: var(--g-primary); font-size: 16px; }
.biz_claim .biz_sum_ico { background: rgba(43,108,176,.12); color: #2B6CB0; }
html[data-theme="dark"] .biz_claim .biz_sum_ico { color: #8CC0F5; }
.biz_sum_txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.biz_sum_txt b { font-size: 14px; font-weight: 800; color: var(--g-text); }
.biz_sum_txt small { font-size: 12px; color: var(--g-text-faint); font-weight: 600; }
.biz_sum_arrow { flex: 0 0 auto; color: var(--g-text-faint); transition: transform .2s; }
.biz_report[open] .biz_sum_arrow { transform: rotate(180deg); color: var(--g-primary); }
.biz_claim { border-top: none; padding-top: 0; margin-top: 10px; }

/* 업주용 추천 업소(유료) 안내 카드 — 업소 상세 정보 카드 안 */
.biz_feat_offer .biz_sum_ico { background: rgba(var(--g-accent-rgb), .25); color: #B7791F; }
.biz_feat_plans { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.biz_feat_plans li { padding: 8px 12px; border-radius: var(--g-radius-sm); background: var(--g-surface-alt); font-size: 13px; }
/* (예전 ₫ 금액 글씨 규칙 — 배지까지 빨갛게 칠해서 지움, 2026-10-20) */
.biz_feat_plans li small { color: #4A4F57; } /* 등급 설명(목록 맨 위 · 메인에 항상 · 남은 자리) — 짙은 회색(2026-10-20) */
html[data-theme="dark"] .biz_feat_plans li small { color: #C9CED6; }
/* 프리미엄 신청 카드 펼친 내용 — 테두리 상자 하나(2026-10-20). 등급 줄은 한 줄씩, 신청 양식은 점선으로 나눔 */
.biz_feat_box { padding: 14px; border: 1px solid var(--g-border); border-radius: 12px; background: var(--g-surface); }
.biz_feat_box > .biz_claim_desc:first-child { margin-top: 0 !important; }
.biz_feat_box .biz_feat_plans { flex-direction: column; }
.biz_feat_box .biz_feat_plans li { width: 100%; line-height: 1.7; }
.biz_feat_box .biz_report_form { margin-top: 10px; padding-top: 12px; border-top: 1px dashed var(--g-border); }
/* 등급·기간 고르기 버튼(2026-10-20) — 빨간 "신청하기" 버튼과 겹쳐 보이지 않게: 둥근 사각형, 고르면 검정 테두리 + 연회색 바탕 + ✓ (이 카드 안에서만) */
.biz_feat_box .mk_seg { gap: 6px; margin-bottom: 8px; }
.biz_feat_box .mk_seg_item span { border-radius: 8px; border: 1px solid var(--g-border); background: var(--g-surface); color: var(--g-text-sub); font-weight: 600; }
.biz_feat_box .mk_seg_item:hover span { border-color: #111; color: #111; }
.biz_feat_box .mk_seg_item input:checked + span { background: var(--g-surface-alt); border-color: #111; box-shadow: inset 0 0 0 1px #111; color: #111; font-weight: 800; }
.biz_feat_box .mk_seg_item input:checked + span::before { content: "✓ "; }
.biz_feat_box .mk_seg_item input:focus-visible + span { outline: 2px solid #111; }
html[data-theme="dark"] .biz_feat_box .mk_seg_item:hover span, html[data-theme="dark"] .biz_feat_box .mk_seg_item input:checked + span { border-color: #F2F2F2; color: #F2F2F2; }
html[data-theme="dark"] .biz_feat_box .mk_seg_item input:checked + span { box-shadow: inset 0 0 0 1px #F2F2F2; }
.biz_price_word { font-weight: 700; color: #111; letter-spacing: .01em; } /* 요금 단계(₫₫₫ 최상위 요금 …) — 검정 */
html[data-theme="dark"] .biz_price_word { color: #F2F2F2; }
.biz_feat_term { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 8px; padding: 6px 12px; border-radius: 8px; background: rgba(var(--g-accent-rgb), .22); border: 1px solid rgba(var(--g-accent-rgb), .7); font-size: 13px; color: #111; } /* 기간 안내 — 노랑으로 살짝 눈에 띄게(2026-10-20) */
.biz_feat_term small { padding: 1px 7px; border-radius: 999px; background: var(--g-accent); color: #111; font-size: 11.5px; font-weight: 700; }
html[data-theme="dark"] .biz_feat_term { color: #F2F2F2; background: rgba(var(--g-accent-rgb), .15); }
.biz_feat_term i { margin-right: 2px; color: #B7791F; }
.biz_feat_promo { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: #B7791F; }

/* ── 구인/구직 메인·목록·상세 공통 마감 D-Day 배지 — 7일 이내 강조, PC·모바일 동일 ── */
.gn_dday { flex: 0 0 auto; display: inline-flex; align-items: center; margin-right: 6px; padding: 1px 7px; border-radius: 5px; font-size: 10.5px; font-weight: 800; line-height: 16px; background: var(--g-surface-alt); color: var(--g-text-sub); border: 1px solid var(--g-border); }
.gn_dday.is_soon { background: var(--g-primary); border-color: var(--g-primary); color: #fff; }
.gn_dday.is_closed { color: var(--g-text-faint); border-color: var(--g-border); background: var(--g-surface-alt); }

/* ── 베트남 정착 가이드(index.php $camon_settle, 2026-10-14) — 가운데 카드로 펼치니 메인 스크롤이 너무 길어서:
   PC(1024px 이상)는 사이드바 로그인 아래 번호 목록(.gn_settle_side), 그보다 좁으면 사이드바가 맨 아래로 가므로
   배너 아래 접힌 한 줄(.gn_settle_m — 눌러서 펼침). 비회원·운영진에게만 보인다. ── */
.gn_settle_side .gn_widget_title .fa { color: var(--g-primary); margin-right: 3px; }
.gn_settle_side_desc { padding: 8px 18px 2px; font-size: 12.5px; color: var(--g-text-sub); }
.gn_settle_side_list { list-style: none; margin: 0; padding: 4px 10px 8px; }
.gn_settle_side_list a { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--g-radius-sm); color: var(--g-text); font-size: 13px; line-height: 1.35; }
.gn_settle_side_list a:hover { background: var(--g-surface-alt); color: var(--g-primary); }
.gn_settle_no { flex: 0 0 auto; min-width: 30px; padding: 2px 6px; border-radius: 999px; background: var(--g-primary); color: #fff; font-size: 10.5px; font-weight: 800; text-align: center; }
.gn_settle_tit { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gn_settle_m { display: none; }
@media (max-width: 1023.98px) {
    .gn_board_side .gn_settle_side { display: none; }
    .gn_settle_m { display: block; margin-bottom: 20px; background: var(--g-surface); border: 1px solid var(--g-border); border-left: 4px solid var(--g-primary); border-radius: var(--g-radius-md); }
    .gn_settle_m summary { display: flex; align-items: center; gap: 6px; padding: 12px 14px; font-size: 14px; color: var(--g-text); cursor: pointer; list-style: none; }
    .gn_settle_m summary::-webkit-details-marker { display: none; }
    .gn_settle_m summary > .fa-map-signs { color: var(--g-primary); }
    .gn_settle_m summary b { color: var(--g-primary); }
    .gn_settle_m_arrow { margin-left: auto; color: var(--g-text-faint); transition: transform .2s; }
    .gn_settle_m[open] .gn_settle_m_arrow { transform: rotate(180deg); }
    .gn_settle_m .gn_settle_side_list { border-top: 1px solid var(--g-border); padding: 6px 8px; }
    .gn_settle_m .gn_settle_side_list a { padding: 9px 8px; font-size: 14px; }
    .gn_settle_guide { display: block; padding: 0 16px 12px; text-align: right; font-size: 12.5px; color: var(--g-text-faint); }
}

/* 메인 로그인 상자(outlogin)의 소셜 로그인 버튼 — 기본 skin/social 의 파란 막대 대신 로그인 버튼과 같은 높이의 흰 버튼(2026-10-15) */
.ol_wrap #sns_login { margin: 0 0 10px; padding: 0; border: 0; background: none; }
.ol_wrap #sns_login h3 { display: none; }
.ol_wrap #sns_login .sns-wrap { display: flex; flex-direction: column; gap: 6px; margin: 0; text-align: left; }
.ol_wrap #sns_login .sns-icon { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 42px; margin: 0; padding: 0 12px; border-radius: var(--g-radius-sm); font-size: 13.5px; font-weight: 700; line-height: 1; text-align: center; text-decoration: none; }
.ol_wrap #sns_login .sns-icon .txt { position: static; display: inline; padding: 0; border: 0; font-size: inherit; line-height: inherit; background: none; }
.ol_wrap #sns_login .sns-google { background: var(--g-surface); color: var(--g-text); border: 1.5px solid var(--g-border); letter-spacing: 0; }
.ol_wrap #sns_login .sns-google:hover { border-color: var(--g-primary); }
.ol_wrap #sns_login .sns-google .ico { position: static; flex-shrink: 0; width: 18px; height: 18px; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E") no-repeat center / 18px 18px !important; }

/* ── 회원가입·정보수정 화면 다듬기 (2026-10-15) — 구역 제목에 포인트 막대, 구역 사이 구분선, 입력칸 안 빨간 별(코어 .required 배경) 제거 ── */
#fregisterform .pms_title { font-size: 22px; margin-bottom: 28px; }
#fregisterform .pms_section { margin: 24px 0 0; padding: 24px 0 0; border-top: 1px solid var(--g-border); }
#fregisterform .pms_section:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
#fregisterform .pms_section_title { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 15px; font-weight: 800; color: var(--g-text); letter-spacing: 0; text-transform: none; }
#fregisterform .pms_section_title::before { content: ""; flex-shrink: 0; width: 4px; height: 16px; border-radius: 2px; background: var(--g-primary); }
#fregisterform .required, #fregisterform textarea.required { background-image: none !important; }
#fregisterform input[readonly] { background: var(--g-surface-alt); color: var(--g-text-sub); cursor: default; }
#fregisterform .pms_actions { margin-top: 28px; }
@media (max-width: 640px) { #fregisterform .pms_card_wide { padding: 28px 20px; } }
/* 회원 탈퇴 — 저장 버튼에서 멀리, 카드 밖 별도 구역 */
.rf_leave { margin: 56px auto 0; padding: 20px 0 4px; border-top: 1px dashed var(--g-border); text-align: center; }
.rf_leave_q { margin: 0 0 6px; font-size: 12.5px; color: var(--g-text-faint); }
.rf_leave_link { font-size: 12.5px; color: var(--g-text-sub); text-decoration: underline; text-underline-offset: 2px; }
.rf_leave_link:hover { color: #d93025; }

/* 정보수정 > 구글 계정 연결(그누보드 skin/social/social_u_register_form.skin.php) — 기본은 아이콘만 보여 연결 여부를 알기 어려웠다.
   연결 안 됨(.sns-icon-not): "구글 계정 연결하기" 버튼 / 연결됨: "구글 계정 연결됨 · 누르면 해제" (2026-10-15) */
.sl_link { margin: 0; padding: 0; list-style: none; }
.sl_link > li { list-style: none; margin: 0; padding: 0; }
.sl_link .frm_label { display: none; }
.sl_link .reg-form, .sl_link .sns-wrap { margin: 0 !important; padding: 0; text-align: left; }
.sl_link .sns-wrap { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.sl_link .sns-icon { position: relative; display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; width: auto !important; max-width: 100%; height: 40px !important; margin: 0 !important; padding: 0 18px; box-sizing: border-box; border: 1.5px solid var(--g-primary) !important; border-radius: var(--g-radius-sm); background: var(--g-surface-alt) !important; color: var(--g-text) !important; font-size: 13.5px; font-weight: 700; line-height: 1; text-decoration: none !important; overflow: visible !important; }
.sl_link .sns-icon .txt { display: none !important; }
.sl_link .sns-icon::after { content: "연결됨 · 누르면 해제"; }
.sl_link .sns-google::after { content: "구글 계정 연결됨 · 누르면 해제"; }
.sl_link .sns-icon.sns-icon-not { border-color: var(--g-border) !important; background: var(--g-surface) !important; }
.sl_link .sns-icon.sns-icon-not::after { content: "계정 연결하기"; }
.sl_link .sns-google.sns-icon-not::after { content: "구글 계정 연결하기"; }
.sl_link .sns-icon.sns-icon-not:hover { border-color: var(--g-primary) !important; }
.sl_link .sns-icon .ico { position: static !important; flex-shrink: 0; width: 18px !important; height: 18px !important; margin: 0 !important; border-radius: 0; background-color: transparent !important; }
.sl_link .sns-google .ico { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E") no-repeat center / 18px 18px !important; }

/* 정보수정 맨 위 "구글 계정으로 전환하기" 안내 — 레벨 2(가입 초기 아이디 회원)이고 구글 미연결일 때만(2026-10-19).
   아래 "구글 계정 연결" 칸(.sl_link)은 그대로 두고, 이 버튼은 그 칸의 #sns-google 을 대신 눌러 준다 */
.rf_gconv { display: flex; align-items: center; gap: 16px; margin: 0 0 24px; padding: 18px 20px; border: 1.5px solid #4285F4; border-radius: var(--g-radius-sm); background: rgba(66,133,244,.07); }
.rf_gconv_txt { flex: 1; min-width: 0; }
.rf_gconv_txt strong { display: block; font-size: 15px; font-weight: 800; color: var(--g-text); margin-bottom: 4px; word-break: keep-all; }
.rf_gconv_txt span { display: block; font-size: 13px; line-height: 1.6; color: var(--g-text-sub); word-break: keep-all; }
.rf_gconv_btn { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 46px; padding: 0 20px; border: 1px solid #dadce0; border-radius: var(--g-radius-sm); background: #fff; color: #1f1f1f; font-size: 14.5px; font-weight: 700; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.12); transition: box-shadow .12s, transform .12s; }
.rf_gconv_btn:hover { box-shadow: 0 3px 10px rgba(0,0,0,.16); transform: translateY(-1px); }
.rf_gconv_ico { width: 22px; height: 22px; flex-shrink: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E") no-repeat center / 22px 22px; }
@media (max-width: 600px) {
    .rf_gconv { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; }
    .rf_gconv_btn { width: 100%; }
}

/* 정보수정에 "구글 계정 연결"(그누보드 소셜 기능)을 넣으면 skin/social/style.css 가 같이 불려 오는데, 그 안의
   #fregisterform p·section·h2·textarea 규칙(원래 구글 가입 화면용)이 이 폼까지 바꿔 분홍 상자·테두리 상자가 생겼다 — 되돌림(2026-10-15) */
#fregisterform .pms_card section { position: static; margin: 24px 0 0; padding: 24px 0 0; border: 0; border-top: 1px solid var(--g-border); border-radius: 0; background: none; }
#fregisterform .pms_card section:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
#fregisterform .pms_card h2 { padding: 0; border-bottom: 0; line-height: 1.4; text-align: left; }
#fregisterform .pms_card p { position: static; height: auto; padding: 0; background: none; border-radius: 0; color: var(--g-text-sub); line-height: 1.6; text-align: left; font-weight: 400; }
#fregisterform .pms_card p::before { content: none; display: none; }
#fregisterform .pms_card textarea { display: block; width: 100%; height: auto; min-height: 100px; padding: 10px 14px; box-sizing: border-box; border: 1.5px solid var(--g-border); border-radius: 8px; background: var(--g-surface); color: var(--g-text); line-height: 1.6; }

/* 구글 연결 버튼을 감싼 칸들도 전체 폭(아호이에서 버튼이 글자 폭으로 줄어들었다) */
.sl_link > li, .sl_link .reg-form { display: block !important; width: 100% !important; float: none !important; }
.sl_link .sns-wrap { width: 100% !important; float: none !important; }

/* 방 게시판(room, market 스킨) — 방 조건 입력·필터·목록 요약, 카카오 오픈채팅 버튼 (2026-10-16) */
.mk_room_dates { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mk_room_dates input[type=date] { width: auto; min-width: 150px; height: 40px; font-size: 16px; }
.mk_room_dates .mk_price_input { margin-top: 0; max-width: 140px; }
.mk_filter_date { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--g-text-sub); white-space: nowrap; }
.mk_filter_date .bsk_input { width: auto; height: 40px; padding: 0 8px; }
.mk_room_sum { color: var(--g-primary); font-weight: 700; }
.mk_tag_nb { white-space: nowrap; } /* "집 전체" 같은 항목은 안 끊고, 줄바꿈은 "·" 뒤(<wbr>)에서만 — market.lib camon_mk_room_tags_html */
.gn_openchat { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: #FEE500; color: #191919; font-size: 13px; font-weight: 800; white-space: nowrap; }
.gn_openchat:hover { filter: brightness(.95); }
@media (max-width: 640px) {
    .mk_filter > select[name=mk_rtype], .mk_filter > select[name=mk_rcon] { order: 3; min-width: 0; }
    .mk_filter > .mk_filter_date { grid-column: 1 / -1; order: 3; }
    .mk_filter_date .bsk_input { flex: 1; }
}

/* 구인/구직(job) — 고용 형태·비자 지원 칩, 목록 배지 (2026-10-16) */
.job_info { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 28px 0; padding: 12px 14px; border-radius: var(--g-radius-sm); background: var(--g-surface-alt); }
.job_chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--g-surface); border: 1px solid var(--g-border); font-size: 13px; font-weight: 700; color: var(--g-text); }
.job_chip i { color: var(--g-primary); }
.job_badge { display: inline-block; margin-right: 4px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--g-surface-alt); color: var(--g-text-sub); border: 1px solid var(--g-border); vertical-align: 1px; }
.job_badge_visa { background: rgba(var(--g-accent-rgb), .18); color: var(--g-text); border-color: transparent; }
@media (max-width: 640px) { .job_info { margin: 14px 18px 0; } }

/* 구인 공고 강조 — 상단 고정·급구·메인 노출(skin/board/basic/job.boost.*) */
.job_urgent { display: inline-block; margin-right: 4px; padding: 1px 8px; border-radius: 4px; background: var(--g-danger); color: #fff; font-size: 11.5px; font-weight: 800; vertical-align: 1px; }
.job_info .job_urgent { padding: 6px 12px; border-radius: 999px; font-size: 13px; }
.job_pin_badge { display: inline-block; margin-right: 4px; padding: 1px 8px; border-radius: 999px; background: rgba(var(--g-accent-rgb), .3); color: var(--g-text); font-size: 11.5px; font-weight: 800; vertical-align: 1px; }
.pl_link .job_pin_badge { padding: 0 2px; background: none; }
.bsk_list_item.job_pinned { background: rgba(var(--g-accent-rgb), .1); }
.bsk_list_item.job_urgent_row { box-shadow: inset 3px 0 0 var(--g-danger); }
.pl_item.job_urgent_row .pl_tit { font-weight: 700; }

.jbst { margin: 12px 28px 0; display: flex; flex-direction: column; gap: 10px; }
.jbst_on { display: flex; flex-wrap: wrap; gap: 6px; }
.jbst_chip { padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 800; background: var(--g-surface-alt); border: 1px solid var(--g-border); }
.jbst_chip_urgent { background: var(--g-danger); border-color: transparent; color: #fff; }
.jbst_box { border: 1px solid var(--g-border); border-radius: var(--g-radius-md); background: var(--g-surface); }
.jbst_box summary { cursor: pointer; padding: 12px 16px; font-size: 14px; font-weight: 800; list-style: none; }
.jbst_box summary::-webkit-details-marker { display: none; }
.jbst_box summary i { color: var(--g-primary); margin-right: 4px; }
.jbst_box summary small { margin-left: 6px; font-weight: 500; color: var(--g-text-faint); }
.jbst_form { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.jbst_plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.jbst_plan { padding: 12px; border-radius: var(--g-radius-sm); background: var(--g-surface-alt); }
.jbst_plan > b { font-size: 14px; }
.jbst_plan > b em { font-style: normal; font-size: 11px; color: var(--g-primary); }
.jbst_plan > p { margin: 4px 0 8px; font-size: 12.5px; line-height: 1.5; color: var(--g-text-sub); word-break: keep-all; }
.jbst_opts { display: flex; flex-direction: column; gap: 6px; }
.jbst_opts label { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--g-radius-sm); background: var(--g-surface); border: 1px solid var(--g-border); font-size: 13px; cursor: pointer; }
.jbst_opts label:has(input:checked) { border-color: var(--g-primary); box-shadow: 0 0 0 1px var(--g-primary); }
.jbst_opts span b { margin-left: 4px; color: var(--g-primary); }
.jbst_opts span small { display: block; font-size: 11px; color: var(--g-text-faint); }
.jbst_note { font-size: 12px; line-height: 1.6; color: var(--g-text-faint); word-break: keep-all; }
.jbst_form .gn_btn { align-self: flex-start; }
.jbst_admin { padding: 12px 14px; border-radius: var(--g-radius-sm); border: 1px dashed var(--g-border); font-size: 13px; }
.jbst_admin_tit { display: block; margin-bottom: 8px; }
.jbst_admin_tit small { font-weight: 500; color: var(--g-text-faint); }
.jbst_admin_row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--g-border); }
.jbst_admin_name { width: 72px; font-weight: 700; }
.jbst_admin_state { min-width: 96px; color: var(--g-text-sub); }
.jbst_admin_row select { width: auto; height: 32px; padding: 0 8px; }
@media (max-width: 640px) { .jbst { margin: 12px 18px 0; } .jbst_plans { grid-template-columns: 1fr; } }

/* 오늘의 베트남 소식(lib/news.lib.php) + 이달의 변화(lib/monthly.lib.php) — 메인 */
.gn_news .gn_section_head { margin-bottom: 10px; }
.gn_news_note { font-size: 11.5px; color: var(--g-text-faint); } /* 제목 옆 작은 회색 안내 — 빨간색 쓰지 말 것(사용자 결정 2026-10-16) */
.gn_news_empty { padding: 8px 0 2px; font-size: 13px; color: var(--g-text-faint); }
/* 월간 소식 노란 칸(2026-10-16 사용자 결정 — 노랑 유지, 아호이·시아와 같은 형식): 옅은 블루 배경·테두리 + 빨강 라벨 칩(흰 글자) + 검정 제목,
   왼쪽 띠는 베트남·한국을 잇는 레드·블루를 세로로 — 실제 국기 고정색이라 하드코딩(.gn_footer_flag 와 같은 예외) */
.gn_news_month { position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 11px 14px 11px 18px; border: 1px solid rgba(var(--g-accent-rgb), .5); border-radius: var(--g-radius-sm); background: rgba(var(--g-accent-rgb), .16); color: var(--g-text); font-size: 14px; font-weight: 700; }
.gn_news_month::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(#D9344E 0 50%, #087F7A 50%); }
.gn_news_month:hover { background: rgba(var(--g-accent-rgb), .28); color: var(--g-text); }
.gn_news_month_tag { flex: none; padding: 3px 8px; border-radius: 4px; background: var(--g-primary); color: #fff; font-size: 11.5px; font-weight: 800; }
.gn_news_month_tit { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gn_news_list { display: flex; flex-direction: column; }
.gn_news_item { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--g-border); font-size: 14px; }
.gn_news_item:last-child { border-bottom: none; }
.gn_news_tag { flex: none; min-width: 52px; padding: 2px 8px; border-radius: 999px; background: var(--g-surface-alt); color: var(--g-text-sub); font-size: 11.5px; font-weight: 700; text-align: center; }
/* 운영진: 회색 태그를 고르는 칸(news.widget.php act=tag) — 보기엔 태그와 같고 점선 테두리만 */
.gn_news_tagf { flex: none; margin: 0; }
select.gn_news_tag { -webkit-appearance: none; appearance: none; border: 1px dashed var(--g-border); font-family: inherit; line-height: 1.5; cursor: pointer; max-width: 120px; }
select.gn_news_tag:hover { border-color: var(--g-primary); }
.gn_news_tit { flex: 1; min-width: 0; color: var(--g-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gn_news_tit:hover { color: var(--g-primary); }
.gn_news_meta { flex: none; font-size: 12px; color: var(--g-text-faint); white-space: nowrap; }
.gn_news_hide button { border: none; background: none; color: var(--g-text-faint); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; }
.gn_news_hide button:hover { color: var(--g-danger); }
/* 최고관리자 기사 올리기 칸(theme/camon/news.manage.php) */
.gn_news_add { display: flex; gap: 6px; margin-bottom: 10px; }
.gn_news_add input { min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--g-border); border-radius: var(--g-radius-sm); background: var(--g-surface); color: var(--g-text); font-size: 13px; }
.gn_news_add input[type=url] { flex: 2; }
.gn_news_add input[type=text] { flex: 1; }
.gn_news_add button { flex: none; height: 36px; padding: 0 14px; border: none; border-radius: var(--g-radius-sm); background: var(--g-primary); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; }
.gn_news_add .gn_news_find { flex: none; display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border: 1px solid var(--g-border); border-radius: var(--g-radius-sm); color: var(--g-text-sub); font-size: 13px; font-weight: 700; white-space: nowrap; }
.gn_news_add .gn_news_find:hover { color: var(--g-primary); border-color: var(--g-primary); }
.gn_news_cand { margin-bottom: 12px; padding: 10px 12px; border: 1px dashed var(--g-border); border-radius: var(--g-radius-sm); background: var(--g-surface-alt); }
.gn_news_cand summary { cursor: pointer; font-size: 13px; font-weight: 800; color: var(--g-text); }
.gn_news_cand summary span { margin-left: 6px; font-size: 11.5px; font-weight: 400; color: var(--g-text-faint); }
.gn_news_cand ul { margin-top: 8px; }
.gn_news_cand li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--g-border); font-size: 13px; }
.gn_news_cand li a { flex: 1; min-width: 0; color: var(--g-text); }
.gn_news_cand li a:hover { color: var(--g-primary); }
.gn_news_cand li button { flex: none; height: 28px; padding: 0 10px; border: 1px solid var(--g-primary); border-radius: var(--g-radius-sm); background: var(--g-surface); color: var(--g-primary); font-size: 12px; font-weight: 700; cursor: pointer; }
.gn_news_cand li button:hover { background: var(--g-primary); color: #fff; }
.gn_news_cand li .gn_news_cand_x { width: 28px; padding: 0; border-color: var(--g-border); background: var(--g-surface); color: var(--g-text-faint); font-size: 16px; font-weight: 400; line-height: 1; } /* 후보 빼기(안 올림) */
.gn_news_cand li .gn_news_cand_x:hover { border-color: var(--g-text); background: var(--g-surface); color: var(--g-text); }
@media (max-width: 480px) { .gn_news_cand li { flex-wrap: wrap; row-gap: 4px; } .gn_news_cand li a { flex-basis: 100%; } .gn_news_cand li .gn_news_meta { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; } } /* 폰: 제목 한 줄, 아래에 언론사(넘치면 …)·버튼 */
@media (max-width: 640px) {
    .gn_news_add { flex-wrap: wrap; }
    .gn_news_add input[type=url] { flex-basis: 100%; }
    .gn_news_item { flex-wrap: wrap; row-gap: 2px; }
    .gn_news_tit { flex-basis: calc(100% - 70px); white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .gn_news_meta { margin-left: 62px; }
}

/* 찜 하트(skin/board/_base/save.btn.php) */
.gn_save { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-family: var(--g-font); }
.gn_save i { color: var(--g-danger); }
.gn_save.is_on { border-color: var(--g-danger) !important; color: var(--g-danger) !important; background: rgba(var(--g-primary-rgb), .06) !important; }
.gn_save_cnt { font-weight: 800; }
.gn_save_cnt:empty { display: none; }
.gn_save:disabled { opacity: .6; }

/* 내 찜(skin/member/basic/scrap.skin.php) */
.sc_wrap { padding-top: 24px; padding-bottom: 40px; }
.sc_head h1 { font-size: 21px; font-weight: 800; }
.sc_head h1 i { color: var(--g-danger); }
.sc_head h1 small { font-size: 14px; color: var(--g-text-faint); font-weight: 600; }
.sc_head p { margin-top: 6px; font-size: 13.5px; color: var(--g-text-sub); }
.sc_chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 4px; }
.sc_chip { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--g-border); background: var(--g-surface); color: var(--g-text-sub); font-size: 13px; font-weight: 700; cursor: pointer; font-family: var(--g-font); }
.sc_chip.is_on { background: var(--g-ink); border-color: var(--g-ink); color: #fff; }
.sc_grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 16px; }
.sc_card { position: relative; border: 1px solid var(--g-border); border-radius: var(--g-radius-md); background: var(--g-surface); overflow: hidden; }
.sc_card.is_gone { opacity: .55; }
.sc_card_link { display: flex; gap: 12px; padding: 12px; padding-right: 44px; color: var(--g-text); }
.sc_thumb { position: relative; flex: none; width: 96px; height: 72px; border-radius: var(--g-radius-sm); background: var(--g-surface-alt); overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--g-text-faint); font-size: 22px; }
.sc_thumb img { width: 100%; height: 100%; object-fit: cover; }
.sc_state { position: absolute; left: 4px; top: 4px; padding: 1px 6px; border-radius: 4px; background: rgba(0,0,0,.65); color: #fff; font-size: 10.5px; font-style: normal; font-weight: 700; }
.sc_info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sc_board { font-size: 11.5px; font-weight: 700; color: var(--g-primary); }
.sc_tit { font-size: 14.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc_line { font-size: 13px; font-weight: 800; }
.sc_date { font-size: 11.5px; color: var(--g-text-faint); }
.sc_del { position: absolute; right: 10px; top: 10px; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--g-danger); }
.sc_del:hover { background: rgba(var(--g-primary-rgb), .08); }
@media (max-width: 640px) { .sc_grid { grid-template-columns: 1fr; } }

/* 질문/답변 주제(skin/board/basic/qa.lib.php) */
.qa_topic_nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.qa_topic_chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--g-border); background: var(--g-surface); color: var(--g-text-sub); font-size: 13px; font-weight: 700; }
.qa_topic_chip i { color: var(--g-primary); }
.qa_topic_chip:hover { border-color: var(--g-primary); color: var(--g-primary); }
.qa_topic_chip.is_on { background: var(--g-primary); border-color: var(--g-primary); color: #fff; }
.qa_topic_chip.is_on i { color: #fff; }
.qa_topic_badge { display: inline-flex; align-items: center; gap: 4px; margin-right: 4px; padding: 1px 8px; border-radius: 999px; background: rgba(var(--g-primary-rgb), .08); color: var(--g-primary); font-size: 11.5px; font-weight: 700; vertical-align: 1px; }
.qa_guides { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 12px; padding: 10px 14px; border-radius: var(--g-radius-sm); background: rgba(var(--g-accent-rgb), .14); font-size: 13px; }
.qa_guides b { color: var(--g-text); }
.qa_guides a { color: var(--g-text); text-decoration: underline; text-underline-offset: 2px; }
.qa_guides a:hover { color: var(--g-primary); }
.qa_view_topic { margin: 0 28px 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.qa_view_topic .qa_topic_badge { padding: 5px 12px; font-size: 13px; }
.qa_view_topic .qa_guides { margin: 0; align-self: stretch; }

/* 이달의 변화 시리즈 — 지난 편(_base/view.skin.php) */
.monthly_series { margin: 0 28px 16px; padding: 14px 16px; border: 1px solid var(--g-border); border-left: 4px solid var(--g-accent); border-radius: var(--g-radius-sm); font-size: 14px; }
.monthly_series b i { color: var(--g-primary); }
.monthly_series ul { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.monthly_series li a { color: var(--g-text); }
.monthly_series li a:hover { color: var(--g-primary); text-decoration: underline; }
@media (max-width: 640px) { .qa_view_topic, .monthly_series { margin-left: 18px; margin-right: 18px; } }

/* 구인/구직 고용 형태·비자 필터(basic/list.skin.php ?jt= ?jv=) — 칩은 질문 주제 칩 모양 재사용, 비자는 아래 줄 체크박스 */
#bsk_list_wrap > .qa_topic_nav { margin-left: 20px; margin-right: 20px; } /* 위 분류 칩(.bsk_cate_nav)과 왼쪽 줄 맞춤 — 구분선이 내용 폭에만 그어지게 margin */
.bsk_cate_nav + .qa_topic_nav { margin-top: 4px; padding-top: 14px; border-top: 2px solid var(--g-text-sub); } /* 지역 분류 줄과 사이 구분선 — 업소정보·구인 필터와 같은 선 */
#bsk_list_wrap > .job_filter { margin-left: 20px; margin-right: 20px; } /* 구분선이 내용 폭에만 그어지게 padding 대신 margin */
#bsk_list_wrap > .qa_guides { margin-left: 20px; margin-right: 20px; }
.job_filter { margin-top: 4px; margin-bottom: 14px; padding-top: 14px; border-top: 2px solid var(--g-text-sub); display: flex; flex-direction: column; gap: 12px; } /* 분류 줄과 사이 구분선 — 업소정보 .biz_regions 와 같은 선 */
.job_filter_row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.job_filter_label { flex: none; margin-right: 4px; font-size: 12.5px; font-weight: 800; color: var(--g-text-faint); }
.job_visa_toggle { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--g-text-sub); }
.job_visa_toggle:hover { color: var(--g-primary); }
.job_visa_box { width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid var(--g-border); background: var(--g-surface); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: transparent; }
.job_visa_toggle:hover .job_visa_box { border-color: var(--g-primary); }
.job_visa_toggle.is_on { color: var(--g-text); }
.job_visa_toggle.is_on .job_visa_box { background: var(--g-primary); border-color: var(--g-primary); color: #fff; }
@media (max-width: 640px) {
    .qa_topic_nav, .job_filter_row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: none; }
    .qa_topic_nav::-webkit-scrollbar, .job_filter_row::-webkit-scrollbar { display: none; }
    .qa_topic_chip { flex: none; white-space: nowrap; }
}

/* 오늘의 베트남 소식 — 처음 camon_news_fold() 개만, 나머지는 [더 보기](news.widget.php) */
.gn_news_list.is_folded .gn_news_item.is_more { display: none; }
.gn_news_list.is_folded .gn_news_item:has(+ .is_more) { border-bottom: none; } /* 접혔을 때 마지막으로 보이는 줄 */
.gn_news_more { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 8px; padding: 8px 0; border: 1px solid var(--g-border); border-radius: var(--g-radius-sm); background: var(--g-surface); color: var(--g-text-sub); font-family: var(--g-font); font-size: 13px; font-weight: 700; cursor: pointer; }
.gn_news_more:hover { border-color: var(--g-primary); color: var(--g-primary); }

/* 방 글 월세 — 기본 월세(Kalt)·관리비·총 월세(Warm)·보증금 (market 스킨, ImmobilienScout24 참고, 2026-10-16). 한국어 먼저, 베트남어 작게 */
.mk_rent_box { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding: 12px 14px; border: 1px solid var(--g-border); border-radius: var(--g-radius-sm); background: var(--g-surface-alt); }
.mk_rent_row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.mk_rent_name { font-size: 14px; font-weight: 700; color: var(--g-text); }
.mk_rent_name small { display: block; font-size: 11.5px; font-weight: 500; color: var(--g-text-faint); }
.mk_rent_row .mk_price_input { width: 160px; margin-top: 0; }
.mk_rent_total { padding-top: 8px; border-top: 1px dashed var(--g-border); }
.mk_rent_total b { font-size: 18px; color: var(--g-primary); }
#mk_rent_kautionbox { background: transparent; }

.mk_rent_facts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 10px 0 0; } /* 아래 선은 바로 밑 정보 목록(.mk_info_list)의 위 선 하나만 — 두 줄로 겹치던 것(2026-10-17) */
.mk_rent_fact { display: flex; flex-direction: column; }
.mk_rent_fact b { font-size: 22px; font-weight: 800; line-height: 1.25; color: var(--g-text); }
.mk_rent_fact.is_main b { color: var(--g-primary); }
.mk_rent_fact span { font-size: 12.5px; color: var(--g-text-sub); }
.mk_rent_fact small, .mk_info_list dd small { font-size: 11px; color: var(--g-text-faint); }
.mk_rent_de { align-self: flex-start; margin-top: 4px; padding: 1px 8px; border-radius: 999px; background: var(--g-surface-alt); color: var(--g-text-sub); font-size: 11px; font-style: normal; font-weight: 700; letter-spacing: .2px; } /* 숫자 아래 베트남어 꼬리표(기본 월세·Wohnfläche·총 월세) */
.mk_rent_fact.is_main .mk_rent_de { background: rgba(var(--g-primary-rgb), .1); color: var(--g-primary); }
.mk_rent_total_row dd b { font-size: 15px; }
.mk_filter_price .mk_pbasis { width: auto; flex: none; padding: 0 8px; }
@media (max-width: 640px) { .mk_rent_row .mk_price_input { width: 100%; } .mk_rent_fact b { font-size: 19px; } }
/* 보증금 = 기본 월세 × 3 자동 입력 버튼(방 글쓰기, write.fields.php) */
.mk_kaution_wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mk_kaution_btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border: none; border-radius: var(--g-radius-sm); background: linear-gradient(180deg, var(--g-primary), var(--g-primary-hover)); color: #fff; font-family: var(--g-font); font-size: 13.5px; font-weight: 800; cursor: pointer; white-space: nowrap; box-shadow: 0 3px 0 rgba(0,0,0,.28), 0 4px 10px rgba(var(--g-primary-rgb), .3); transform: translateY(-1px); transition: transform .08s, box-shadow .08s, filter .15s; } /* 마우스를 안 올려도 버튼으로 보이게 — 채운 색 + 아래 그림자로 튀어나온 느낌(사용자 요청) */
.mk_kaution_btn::before { content: "\f1ec"; font-family: FontAwesome; font-weight: normal; } /* 계산기 아이콘 */
.mk_kaution_btn:hover:not(:disabled) { filter: brightness(1.08); }
.mk_kaution_btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 0 0 rgba(0,0,0,.28), 0 1px 4px rgba(var(--g-primary-rgb), .3); } /* 누르면 쑥 들어감 */
.mk_kaution_btn:disabled { background: var(--g-surface-alt); color: var(--g-text-faint); box-shadow: none; transform: none; cursor: default; border: 1px dashed var(--g-border); }
.mk_flash { box-shadow: 0 0 0 3px rgba(var(--g-primary-rgb), .35) !important; transition: box-shadow .3s; }
#mk_kaution_help { margin-top: 0; }
@media (max-width: 640px) { .mk_kaution_btn { width: 100%; } }

/* 월간 소식 — 오늘의 소식 아래 별도 칸(news.widget.php #gn_monthly, 2026-10-16) */
.gn_monthly { margin: 0 0 24px; } /* 제목·흰 카드 없이 노란 줄만 */
.gn_monthly .gn_news_month:last-child { margin-bottom: 0; }
.mk_hl { padding: 1px 4px; border-radius: 3px; background: rgba(var(--g-accent-rgb), .45); color: var(--g-text); font-weight: 700; } /* 보증금 안내 강조(노란 형광펜) */
.mk_kaution_own { display: inline-block; margin-top: 4px; color: var(--g-primary); font-weight: 800; } /* 3개월분이 아닌 경우 직접 입력 강조 */
.mk_rent_heiz { margin: 2px -6px; padding: 8px 6px; border-radius: var(--g-radius-sm); background: rgba(234, 120, 30, .1); } /* 난방비 줄 — 금액 칸들과 헷갈리지 않게 주황 톤(선택 줄) */
.mk_rent_heiz .mk_rent_name, .mk_rent_heiz .mk_rent_name i { color: #C2581A; }
html[data-theme="dark"] .mk_rent_heiz .mk_rent_name, html[data-theme="dark"] .mk_rent_heiz .mk_rent_name i { color: #F2A066; }
.mk_rent_heiz .mk_rent_name small { color: var(--g-text-sub); }
.mk_heiz_help { margin: 6px 0 2px; padding-left: 16px; list-style: disc; font-size: 12.5px; line-height: 1.6; color: var(--g-text-sub); }
.mk_heiz_help li { list-style: disc; }
.mk_heiz_help b { color: var(--g-text); }
#mk_rent_heizamt_row { margin-top: 6px; }
.mk_seg_sep { align-self: center; margin: 0 6px; color: var(--g-border); font-size: 22px; font-weight: 300; line-height: 1; } /* 가구 | 부엌 선택 사이 구분선 */
.mk_rent_formula { display: block; margin-top: 3px; font-size: 12px; color: var(--g-text-sub); } /* 총 월세 계산식 — 무엇이 들어갔는지 숫자로 */

/* 글보기 배치(중고거래·방·업소정보 공통, 2026-10-17 다시 정리):
   - PC(1101px 이상) 2단: 왼쪽 = 사진 + 그 아래 카드(방 정보 .mk_room_panel / 영업시간 .biz_hours_panel), 오른쪽 = 정보 칸(스크롤 따라옴, 방 글 비용 카드 .mk_cost_card 포함)
   - 본문(.mk_desc_full)은 2단 아래 전체 폭 — 왼쪽 칸에 좁게 넣던 10-16 배치는 되돌림(사용자 요청)
   - 가운데 세로 구분선은 2단 배경에 그려서 왼쪽·오른쪽 중 긴 쪽 맨 아래까지 이어진다
   1100px 이하(1단)에서는 사진 → 정보 칸 → 카드 → 본문 순서. */
@media (min-width: 1101px) {
    #mk_view { overflow: clip; } /* hidden 이면 오른쪽 칸 sticky 가 안 먹음 — clip 은 모서리만 자르고 스크롤 영역을 안 만든다 */
    .mk_view_top { grid-template-rows: auto auto 1fr; }
    .mk_view_top > .mk_gallery { grid-column: 1; grid-row: 1; }
    .mk_view_top > .mk_info { grid-column: 2; grid-row: 1 / span 3; align-self: start; position: sticky; top: 12px; }
    .mk_view_top > .mk_info.is_full { grid-column: 1 / -1; grid-row: 1; position: static; }
    /* 세로 구분선: 사진 칸 테두리 대신 2단 배경에 1px 선. 위치 = 왼쪽 칸 비율 1.25 / 2.25 */
    .mk_view_top:has(> .mk_gallery) { background: linear-gradient(var(--g-border), var(--g-border)) 55.5556% 0 / 1px 100% no-repeat; }
    .mk_view_top > .mk_gallery { border-right: none; }
    .mk_view_top > .mk_side_card { grid-column: 1; grid-row: 2; align-self: start; }
    .mk_view_top > .mk_info.is_full ~ .mk_side_card { grid-column: 1 / -1; margin-top: 20px; }
}
#mk_view > .mk_desc_full { margin: 0; border-top: 1px solid var(--g-border); }

/* 사진 아래 카드(방 정보·비용, 영업시간) — 사진 칸과 같은 좌우 여백·둥근 모서리 */
.mk_side_card { padding: 16px 18px 10px; border: 1px solid var(--g-border); border-radius: var(--g-radius-md); background: var(--g-surface); }
.mk_view_top > .mk_side_card { margin: 0 20px 20px; }
.mk_side_card h3 { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; font-size: 15px; font-weight: 800; color: var(--g-text); }
.mk_side_card h3::before { font-family: FontAwesome; font-weight: normal; color: var(--g-primary); }
@media (max-width: 1100px) { .mk_view_top > .mk_side_card { margin: 0 24px 22px; } }
@media (max-width: 860px) { .mk_view_top > .mk_side_card { margin: 0 18px 18px; } }
@media (max-width: 640px) { .mk_view_top > .mk_side_card { margin: 0 14px 16px; } .mk_side_card { padding: 14px 14px 8px; } }

/* 업소정보 영업시간 카드 */
.biz_hours_panel h3::before { content: "\f017"; } /* 시계 */
.biz_hours_panel table { font-size: 14px; }
.biz_hours_panel th, .biz_hours_panel td { padding: 9px 12px; }
.biz_hours_panel tr:last-child th, .biz_hours_panel tr:last-child td { border-bottom: none; }
.biz_hours_panel tr.is_today th { border-radius: 8px 0 0 8px; }
.biz_hours_panel tr.is_today td { border-radius: 0 8px 8px 0; }

/* 방 글 — 방 정보 카드(사진 아래) + 비용 카드(오른쪽 정보 칸, 2026-10-17). 같은 모양 */
.mk_room_panel h3::before { content: "\f015"; } /* 집 */
.mk_room_panel .mk_info_list, .mk_cost_card .mk_info_list { border-top: none; }
.mk_room_panel .mk_info_list > div, .mk_cost_card .mk_info_list > div { font-size: 13.5px; }
.mk_room_panel .mk_info_list > div:last-child, .mk_cost_card .mk_info_list > div:last-child { border-bottom: none; }
.mk_room_panel .mk_info_list dt, .mk_cost_card .mk_info_list dt { flex-basis: 84px; }
.mk_cost_card h3::before { content: "\f153"; } /* ₫ */

/* RSS 아이콘은 폰·태블릿에서 쓸 일이 없어 숨긴다 — 게시판 목록 위 아이콘 칸(<li> 포함)까지(2026-10-18, 3개 사이트 공통) */
@media (max-width: 1024px) {
    a[href*="rss.php"] { display: none !important; }
    li:has(> a[href*="rss.php"]) { display: none !important; }
}

/* 메인 원화 환율(fx.widget.php · lib/fx.lib.php, 2026-10-18 — ahoj·szia 는 css/fx.css 에 같은 규칙, 고치면 같이)
   PC 는 사이드바 카드(.fx_side), 1024px 미만은 휴대폰 메뉴 맨 아래 카드(.fx_menu) */
.fx_side .gn_widget_title .fa { color: var(--g-primary); margin-right: 3px; }
.fx_tbl { width: calc(100% - 28px); margin: 6px 14px 2px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.fx_tbl th, .fx_tbl td { padding: 7px 4px; border-bottom: 1px dashed var(--g-border); text-align: right; white-space: nowrap; }
.fx_tbl tr:last-child th, .fx_tbl tr:last-child td { border-bottom: none; }
.fx_side { --fx-col: 92px; } /* 값 칸 폭 — 제목 줄의 칸 제목(.fx_heads span)과 아래 값(.fx_tbl td)이 같은 폭이라 세로로 맞는다 */
.fx_head { display: flex; align-items: flex-end; justify-content: flex-start; gap: 0; }
.fx_title { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
.fx_heads { flex: none; display: flex; }
.fx_heads span { width: var(--fx-col); text-align: right; font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--g-text-sub); }
.fx_heads small { display: block; font-size: 10.5px; font-weight: 400; color: var(--g-text-faint); }
.fx_tbl { table-layout: fixed; }
.fx_tbl td { width: var(--fx-col); box-sizing: border-box; }
.fx_tbl tbody th { text-align: left; font-size: 13px; font-weight: 700; color: var(--g-text-sub); }
.fx_tbl td { font-size: 15px; font-weight: 800; color: var(--g-text); }
.fx_tbl td small { margin-left: 1px; font-size: 11px; font-weight: 600; color: var(--g-text-sub); }
.fx_ecb { margin-left: 1px; color: var(--g-primary); font-weight: 800; }
.fx_src { padding: 4px 18px 12px; font-size: 11px; line-height: 1.5; color: var(--g-text-faint); }
.fx_warn { display: block; padding: 7px 10px; border-radius: var(--g-radius-sm); background: rgba(var(--g-primary-rgb), .1); color: var(--g-primary); font-size: 12px; font-weight: 700; line-height: 1.45; }
.fx_warn:hover { background: rgba(var(--g-primary-rgb), .18); color: var(--g-primary); }
.fx_warn_wrap { padding: 0 12px 12px; }
/* 휴대폰 메뉴(드로어) 맨 아래 카드(fx.widget.php 'menu', head.php — 2026-10-18 사용자 요청: 휴대폰 메인에는 안 띄우고 메뉴 안에).
   제목·칸 제목(최근·9월 말)은 늘 한 줄, 잘림(…) 없이 — 화면 폭이 아니라 카드 폭(컨테이너 쿼리)에 맞춰 칸 폭(--fx-col)·글자를 줄인다.
   --fx-col 은 컨테이너 자신에는 못 걸어서 제목 줄(.fx_head)과 표(.fx_tbl)에 건다. 출처 문구만 자연스럽게 줄바꿈 */
.fx_menu { display: none; }
@media (max-width: 1023.98px) {
    .fx_side { display: none !important; }
    .fx_menu { display: block; container-type: inline-size; margin: 16px 14px 20px; border: 1px solid var(--g-border); border-radius: var(--g-radius-md); background: var(--g-surface); color: var(--g-text); overflow: hidden; text-align: left; line-height: 1.4; }
    .fx_menu .fx_head, .fx_menu .fx_tbl { --fx-col: 90px; }
    .fx_menu .fx_head { display: flex; align-items: flex-end; gap: 6px; padding: 12px 14px 10px; border-bottom: 1px solid var(--g-border); font-size: 14.5px; font-weight: 800; color: var(--g-text); }
    .fx_menu .fx_title { flex: 1 0 auto; white-space: nowrap; }
    .fx_menu .fx_title .fa { margin-right: 3px; color: var(--g-primary); }
    .fx_menu .fx_heads span { white-space: nowrap; color: var(--g-text-sub); }
    .fx_menu .fx_tbl { width: calc(100% - 20px); margin: 2px 10px 0; }
    .fx_menu .fx_tbl th, .fx_menu .fx_tbl td { padding: 9px 4px; }
    .fx_menu .fx_tbl tbody th { color: var(--g-text); }
    .fx_menu .fx_tbl td { font-size: 15px; }
    .fx_menu .fx_src { margin: 0; padding: 4px 14px 12px; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
    .fx_menu .fx_warn_wrap { padding: 0 10px 12px; }
}
@container (max-width: 320px) { /* 메뉴 카드가 좁을 때(대부분의 폰 드로어) */
    .fx_menu .fx_head, .fx_menu .fx_tbl { --fx-col: 80px; }
    .fx_menu .fx_head { padding: 11px 12px 9px; font-size: 13.5px; }
    .fx_menu .fx_heads span { font-size: 11px; }
    .fx_menu .fx_tbl { width: calc(100% - 18px); margin: 2px 9px 0; }
    .fx_menu .fx_tbl th, .fx_menu .fx_tbl td { padding: 8px 3px; }
    .fx_menu .fx_tbl td { font-size: 13.5px; }
    .fx_menu .fx_tbl td small { font-size: 10px; }
    .fx_menu .fx_src { padding: 4px 12px 11px; font-size: 10.5px; }
}
@container (max-width: 260px) { /* 아주 좁을 때(접힌 폴더블 등) */
    .fx_menu .fx_head, .fx_menu .fx_tbl { --fx-col: 70px; }
    .fx_menu .fx_head { padding: 10px 10px 8px; font-size: 12.5px; }
    .fx_menu .fx_heads span { font-size: 10.5px; }
    .fx_menu .fx_tbl { width: calc(100% - 14px); margin: 2px 7px 0; }
    .fx_menu .fx_tbl th, .fx_menu .fx_tbl td { padding: 7px 2px; }
    .fx_menu .fx_tbl td, .fx_menu .fx_tbl tbody th { font-size: 12px; }
    .fx_menu .fx_tbl td small { display: none; } /* "원" 글자는 빼고 숫자만 */
    .fx_menu .fx_src { padding: 4px 10px 10px; }
}
/* 오늘의 소식 제목 옆 현지·한국 시계(news.widget.php, 2026-10-18 — ahoj·szia 는 css/news.css 에 같은 규칙) */
.gn_news .gn_section_head { flex-wrap: wrap; gap: 6px 10px; }
.gn_news_clock { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0 auto 0 4px; font-size: 12.5px; color: var(--g-text-sub); }
.gn_news_clock b { font-size: 14px; font-weight: 800; color: var(--g-text); font-variant-numeric: tabular-nums; }
.gn_news_clock small { font-size: 11px; color: var(--g-text-faint); }
.gn_news_dst { display: inline-block; margin-left: 2px; padding: 1px 7px; border-radius: 999px; background: #FFF1D6; color: #B25E00; font-size: 10.5px; font-weight: 800; font-style: normal; vertical-align: 1px; } /* 서머타임 배지(현지가 서머타임 중일 때만) */
html[data-theme="dark"] .gn_news_dst { background: rgba(255, 170, 60, .18); color: #FFB65C; }
@media (max-width: 1023.98px) { .gn_news .gn_news_note { display: none; } } /* 휴대폰에서는 "운영자가 고른 기사" 안내 숨김(2026-10-18 사용자 요청) */
.gn_news_gap { display: inline-block; padding: 1px 8px; border-radius: 999px; border: 1px solid #F5B8B8; background: #FDE7E7; color: #C40000; font-size: 10.5px; font-weight: 800; font-style: normal; white-space: nowrap; } /* 한국과 시차 배지 — 베트남 국기 빨강(#DD0000) 계열(2026-10-18 사용자 요청) */
html[data-theme="dark"] .gn_news_gap { background: rgba(221, 0, 0, .18); color: #FF7A7A; border-color: rgba(255, 122, 122, .35); }
/* 휴대폰: 시계 한 줄 고정(베트남 시각 · 서머타임 · 한국 시각 · 시차) — 2026-10-18 사용자 요청. 아주 좁은 폰(360px 미만)은 "시차:" 글자만 빼고 "+7시간" */
@media (max-width: 600px) {
    .gn_news_clock { flex: 1 1 100%; flex-wrap: nowrap; white-space: nowrap; gap: 0 8px; margin: 0; min-width: 0; font-size: 12px; }
    .gn_news_clock b { font-size: 13px; }
    .gn_news_dst, .gn_news_gap { padding: 1px 6px; font-size: 10px; }
}
@media (max-width: 359.98px) { .gn_news_gap_lbl { display: none; } .gn_news_clock { gap: 0 4px; font-size: 11px; } .gn_news_clock b { font-size: 12px; } .gn_news_dst, .gn_news_gap { padding: 1px 4px; } } /* 320px 폰에서도 한 줄(10-19 측정: 아호이 19px 넘침) */

/* 업소정보 글보기 아래 목록 — 댓글 쓰기 칸에 바로 붙어 난잡해 보여서 여백·구분선·제목으로 떼어 놓음(2026-10-20) */
.biz_wrap_more { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--g-border); }
.biz_more_tit { margin: 0 0 16px; font-size: 17px; font-weight: 800; color: var(--g-text); }
.biz_more_tit i { color: var(--g-primary); margin-right: 4px; }
@media (max-width: 640px) { .biz_wrap_more { margin-top: 40px; padding-top: 22px; } }

/* 추천·비추천 줄(skin/board/_base/good.inc.php, 2026-10-20) — 바로 위 공유·본문과 한 덩어리로 보이게 위 선 없이 */
.bsk_react_bar { border-top: none; }

/* 추천은 파랑·비추천은 빨강, 줄은 가운데(2026-10-20 사용자 요청, 세 사이트 같게) — skin/board/…/good.inc.php */
.bsk_view_react, .bsk_react_bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.bsk_react_msg { width: 100%; text-align: center; }
.bsk_react_btn.bsk_react_good { color: #1e6fd9; border-color: #1e6fd9; background: rgba(30,111,217,.08); }
.bsk_react_btn.bsk_react_good:hover { color: #fff; border-color: #1e6fd9; background: #1e6fd9; }
.bsk_react_btn.bsk_react_nogood { color: #e03e3e; border-color: #e03e3e; background: rgba(224,62,62,.08); }
.bsk_react_btn.bsk_react_nogood:hover { color: #fff; border-color: #e03e3e; background: #e03e3e; }