/* ============================================================================
 * Chosunin 테마 — 순수 CSS (빌드 없음)
 * 디자인/레이아웃 참고: https://g5pro.gnuboard.net/  (다크 소다블루 디자인 시스템)
 * 게시판 화면은 skin/board/chosunin/style.css 가 담당.
 * ==========================================================================*/

:root {
    /* --- 모드 무관 공통 토큰 --- */
    --ch-grad:linear-gradient(115deg,#38BDF8,#3B82F6 55%,#14B8A6);
    --ch-r-btn:8px; --ch-r-lg:16px; --ch-r-xl:20px; --ch-r-2xl:24px; --ch-r-full:999px;
    --ch-s1:4px; --ch-s2:8px; --ch-s3:12px; --ch-s4:16px; --ch-s5:24px; --ch-s6:32px;
    --ch-t-xs:11px; --ch-t-sm:12.5px; --ch-t-base:13.5px; --ch-t-md:14.5px; --ch-t-lg:16px; --ch-t-xl:20px;
    --ch-max:1080px;

    /* --- 기본(다크) 색 세트 --- */
    --ch-bg:#0F1621;        --ch-card:#16202E;      --ch-fg:#E6EDF5;
    --ch-muted:#8B9BB0;     --ch-line:#23303F;      --ch-btn-line:#57718E;
    --ch-row-hover:#1B2837;
    --ch-accent:#4A90FF;    --ch-accent-fg:#FFFFFF;  --ch-accent-deep:#8FBCFF; --ch-accent-soft:#1A2C4A;
    --ch-teal:#2DD4BF;      --ch-teal-soft:#0E3B36;  --ch-teal-deep:#5EEAD4;
    --ch-danger:#F87171;
    --ch-pop:#1E2A3A;       --ch-pop-line:#35485E;
    --ch-btn-bg:#1E2A3A;    --ch-btn-border:transparent;   /* 다크: 채움형·무테두리 */
    --ch-sh-sm:0 4px 12px rgba(0,0,0,.30);
    --ch-sh-md:0 8px 22px rgba(0,0,0,.36);
    --ch-sh-btn:0 6px 16px rgba(74,144,255,.30);
}

/* --- 라이트 색 세트 (data-theme="light") --- */
:root[data-theme="light"] {
    --ch-bg:#EEF2F7;        --ch-card:#FFFFFF;      --ch-fg:#1E293B;
    --ch-muted:#64748B;     --ch-line:#E2E8F0;      --ch-btn-line:#CBD5E1;
    --ch-row-hover:#F1F5F9;
    --ch-accent:#2F6FE4;    --ch-accent-fg:#FFFFFF;  --ch-accent-deep:#1D4ED8; --ch-accent-soft:#E5EEFC;
    --ch-teal:#0D9488;      --ch-teal-soft:#CCFBF1;  --ch-teal-deep:#0F766E;
    --ch-danger:#DC2626;
    --ch-pop:#F8FAFC;       --ch-pop-line:#E2E8F0;
    --ch-btn-bg:#FFFFFF;    --ch-btn-border:#E2E8F0;       /* 라이트: 흰 버튼·연한 테두리 */
    --ch-sh-sm:0 2px 8px rgba(15,23,42,.06);
    --ch-sh-md:0 8px 24px rgba(15,23,42,.10);
    --ch-sh-btn:0 6px 16px rgba(47,111,228,.22);
    color-scheme:light;
}
:root { color-scheme:dark; }

/* --- 리셋/기본 (모든 페이지에 적용되는 다크 베이스) --------------------- */
* { box-sizing:border-box; }
html,body { margin:0; }
body {
    background:var(--ch-bg); color:var(--ch-fg);
    font-family:Pretendard,"Apple SD Gothic Neo","Malgun Gothic",-apple-system,BlinkMacSystemFont,sans-serif;
    font-size:var(--ch-t-base); line-height:1.55; -webkit-font-smoothing:antialiased;
}
a { color:var(--ch-accent-deep); text-decoration:none; }
a:hover { color:var(--ch-teal-deep); }
img { max-width:100%; height:auto; }
hr { display:none; }
h1,h2,h3,h4 { line-height:1.3; }
.sound_only,.sound_only_e { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
#skip_to_container a { position:absolute; left:-9999px; }
#skip_to_container a:focus { left:0; top:0; z-index:1000; background:#000; color:#fff; padding:8px; }
/* 팝업레이어: 제목은 숨기고, 실제 팝업(.hd_pops)만 노출 */
#hd_pop > h2 { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.hd_pops { position:absolute; z-index:1000; }
.hd_pops_footer { display:flex; gap:var(--ch-s2); }

/* 사이드뷰·폼컨트롤·버튼·칩 등 컴포넌트는 components.css 로 이동(단일 소스). */

/* 좌우 여백: 모바일 16px 기준, 넓은 화면에서 확장 */
.ch-wrap,.ch-inner { max-width:var(--ch-max); margin:0 auto; padding:0 var(--ch-s4); }

/* ============================================================================
 * 헤더 — MOBILE-FIRST
 *  기본(모바일): 로고+영역토글+유틸(햄버거) 한 줄, GNB는 숨김→햄버거로 세로 오픈
 *  ≥820px: GNB 가로 배치 + 호버 드롭다운, 햄버거 숨김 (아래 min-width 블록)
 * ==========================================================================*/
.ch-header { background:var(--ch-card); box-shadow:var(--ch-sh-sm); position:sticky; top:0; z-index:60; }
.ch-header__inner { display:flex; flex-wrap:wrap; align-items:center; gap:var(--ch-s2); min-height:54px; padding-top:var(--ch-s2); padding-bottom:var(--ch-s2); }
.ch-logo { margin:0; flex:0 0 auto; display:flex; align-items:center; }
.ch-logo a { display:inline-flex; align-items:center; line-height:1; }
.ch-logo__main { font-size:var(--ch-t-xl); font-weight:800; letter-spacing:-0.01em; line-height:1; color:var(--ch-accent); }
.ch-logo a:hover .ch-logo__main { color:var(--ch-accent-deep); }

.ch-area { display:inline-flex; gap:2px; padding:3px; border-radius:var(--ch-r-btn); background:var(--ch-bg); flex:0 0 auto; }
.ch-area-link { display:inline-flex; align-items:center; justify-content:center; width:38px; height:36px; border-radius:calc(var(--ch-r-btn) - 2px); color:var(--ch-muted); }
.ch-area-link svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.ch-area-link:hover { color:var(--ch-fg); }
.ch-area-link.on { background:var(--ch-card); color:var(--ch-accent); box-shadow:var(--ch-sh-sm); }

/* GNB — 모바일 기본: 접힘(세로 아코디언) */
.ch-gnb { display:none; order:5; flex-basis:100%; width:100%; flex-direction:column; gap:0; margin-top:var(--ch-s1); }
.ch-gnb.is-open { display:flex; }
.ch-gnb__item { position:relative; border-top:1px solid var(--ch-line); }
.ch-gnb__item > a { display:block; padding:14px var(--ch-s2); font-size:var(--ch-t-lg); font-weight:700; color:var(--ch-fg); white-space:nowrap; }
.ch-gnb__item > a:active,.ch-gnb__item > a:hover { color:var(--ch-accent-deep); }
.ch-gnb__sub { padding:0 0 var(--ch-s2) var(--ch-s4); }
.ch-gnb__sub a { display:block; padding:10px 12px; border-radius:var(--ch-r-btn); color:var(--ch-muted); font-size:var(--ch-t-md); white-space:nowrap; }
.ch-gnb__sub a:hover { background:var(--ch-accent-soft); color:var(--ch-accent-deep); }
.ch-gnb__empty { padding:14px var(--ch-s2); color:var(--ch-muted); font-size:var(--ch-t-sm); }

.ch-util { display:flex; align-items:center; gap:var(--ch-s2); flex:0 0 auto; margin-left:auto; font-size:var(--ch-t-sm); }
.ch-util a { color:var(--ch-muted); white-space:nowrap; }
.ch-util a:hover { color:var(--ch-fg); }
.ch-util .ch-util__me { color:var(--ch-accent-deep); font-weight:700; }
.ch-icon-btn { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid var(--ch-line); border-radius:var(--ch-r-btn); background:transparent; color:var(--ch-muted); cursor:pointer; }
.ch-icon-btn:hover { color:var(--ch-fg); border-color:var(--ch-btn-line); }
.ch-gnb__toggle { display:inline-flex; }   /* 모바일 기본 노출 */

/* 검색 패널 (토글) */
.ch-search { border-top:1px solid var(--ch-line); background:var(--ch-card); display:none; }
.ch-search.is-open { display:block; }
.ch-search form { display:flex; gap:var(--ch-s2); padding:var(--ch-s3) 0; }
.ch-search input { flex:1; }

/* --- 본문 레이아웃 -------------------------------------------------------- */
.ch-wrapper { padding:var(--ch-s5) 0 var(--ch-s6); }
#container_wr { display:flex; gap:var(--ch-s5); align-items:flex-start; }
.ch-container { flex:1 1 auto; min-width:0; }
.ch-aside { flex:0 0 260px; }
.ch-aside > * { background:var(--ch-card); border-radius:var(--ch-r-xl); padding:var(--ch-s4); box-shadow:var(--ch-sh-md); margin-bottom:var(--ch-s4); }
.ch-page-title { font-size:var(--ch-t-xl); font-weight:800; margin:0 0 var(--ch-s4); }

/* --- 히어로 (모바일 기본 크기, 넓은 화면에서 확대) ---------------------- */
.ch-hero { margin-bottom:var(--ch-s5); padding:var(--ch-s5) var(--ch-s4); border-radius:var(--ch-r-xl);
    background:var(--ch-grad); color:#fff; position:relative; overflow:hidden; }
.ch-hero__eyebrow { margin:0 0 var(--ch-s2); font-size:var(--ch-t-sm); font-weight:700; letter-spacing:.04em; color:rgba(255,255,255,.85); }
.ch-hero__title { margin:0 0 var(--ch-s2); font-size:22px; font-weight:900; }
.ch-hero__desc { margin:0 0 var(--ch-s4); font-size:var(--ch-t-md); color:rgba(255,255,255,.9); max-width:620px; }
.ch-hero__cta { display:flex; gap:var(--ch-s2); flex-wrap:wrap; }

/* 버튼(.ch-btn)·칩(.ch-chip)·뱃지는 components.css 참조 (단일 소스). */

/* --- 자원 배너 (체불사업주 조회 등 외부 유용 링크) --------------------- */
.ch-resource-banner { display:flex; flex-wrap:wrap; align-items:center; gap:var(--ch-s3);
    margin-bottom:var(--ch-s5); padding:var(--ch-s4);
    background:var(--ch-card); border:1px solid var(--ch-line); border-radius:var(--ch-r-xl);
    box-shadow:var(--ch-sh-sm); color:var(--ch-fg); text-decoration:none; }
.ch-resource-banner:hover { border-color:var(--ch-accent); color:var(--ch-fg); }
.ch-resource-banner__icon { flex:0 0 auto; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
    border-radius:var(--ch-r-lg); background:var(--ch-accent-soft); color:var(--ch-accent-deep); font-size:20px; }
.ch-resource-banner__text { flex:1 1 220px; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ch-resource-banner__text strong { font-size:var(--ch-t-md); font-weight:800; }
.ch-resource-banner__text span { font-size:var(--ch-t-sm); color:var(--ch-muted); }
.ch-resource-banner__cta { flex:0 0 auto; }
@media (min-width:600px) { .ch-resource-banner { padding:var(--ch-s4) var(--ch-s5); flex-wrap:nowrap; } }

/* --- 카드 / 카드 그리드 (홈 게시판별 최신글) ---------------------------- */
.ch-card-grid { display:grid; grid-template-columns:1fr; gap:var(--ch-s4); }
@media (min-width:768px) { .ch-card-grid { grid-template-columns:1fr 1fr; } }
.ch-card { background:var(--ch-card); border-radius:var(--ch-r-xl); padding:var(--ch-s4) var(--ch-s5); box-shadow:var(--ch-sh-md); }
.ch-card__head { display:flex; align-items:center; gap:var(--ch-s2); margin-bottom:var(--ch-s3); padding-bottom:var(--ch-s3); border-bottom:1px solid var(--ch-line); }
.ch-card__head h3 { margin:0; font-size:var(--ch-t-lg); font-weight:800; }
.ch-card__more { margin-left:auto; font-size:var(--ch-t-sm); color:var(--ch-muted); flex:0 0 auto; }
.ch-card__more:hover { color:var(--ch-accent-deep); }
.ch-card ul { list-style:none; margin:0; padding:0; }
.ch-card li { display:flex; align-items:center; gap:var(--ch-s2); padding:7px 0; border-bottom:1px dashed var(--ch-line); font-size:var(--ch-t-md); }
.ch-card li:last-child { border-bottom:0; }
.ch-card li > a { color:var(--ch-fg); flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ch-card li > a:hover { color:var(--ch-accent-deep); }
.ch-card li .badge-new { color:var(--ch-danger); font-size:var(--ch-t-xs); font-weight:800; flex:0 0 auto; }
.ch-card li .cmt { color:var(--ch-teal-deep); font-size:var(--ch-t-xs); font-weight:700; flex:0 0 auto; }
.ch-card li .wr_datetime { color:var(--ch-muted); font-size:var(--ch-t-xs); flex:0 0 auto; margin-left:auto; }
.ch-card li.empty { color:var(--ch-muted); justify-content:center; padding:24px 0; }

/* --- 푸터 ---------------------------------------------------------------- */
.ch-footer { background:var(--ch-card); border-top:1px solid var(--ch-line); margin-top:var(--ch-s6); color:var(--ch-muted); }
/* .ch-wrap(가로 패딩)과 같은 요소라 특정도를 올려 세로 패딩을 확실히 적용 */
.ch-footer .ch-footer__inner { padding-top:var(--ch-s6); padding-bottom:var(--ch-s5); }
.ch-footer__links { display:flex; flex-wrap:wrap; gap:var(--ch-s3) var(--ch-s4); margin-bottom:var(--ch-s4); }
.ch-footer__links a { color:var(--ch-fg); font-weight:700; font-size:var(--ch-t-sm); }
.ch-footer__fold { border-top:1px solid var(--ch-line); padding-top:var(--ch-s3); }
.ch-footer__fold summary { cursor:pointer; font-size:var(--ch-t-sm); font-weight:700; color:var(--ch-fg); }
.ch-company { margin:var(--ch-s3) 0 0; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:4px var(--ch-s4); }
.ch-company__row { display:flex; gap:6px; font-size:var(--ch-t-xs); }
.ch-company__row dt { color:var(--ch-muted); margin:0; flex:0 0 auto; }
.ch-company__row dd { margin:0; color:var(--ch-fg); }
.ch-footer__copy { border-top:1px solid var(--ch-line); text-align:center; font-size:var(--ch-t-xs); padding:var(--ch-s4); letter-spacing:.03em; }

.ch-top-btn { position:fixed; right:20px; bottom:20px; width:44px; height:44px; border-radius:50%;
    border:1px solid var(--ch-line); background:var(--ch-card); color:var(--ch-fg); cursor:pointer; box-shadow:var(--ch-sh-md); }
.ch-top-btn:hover { border-color:var(--ch-accent); color:var(--ch-accent-deep); }

/* ============================================================================
 * 넓은 화면 확장 (MOBILE-FIRST 의 min-width 레이어)
 * ==========================================================================*/
/* 태블릿+ : 여백·히어로 확대 */
@media (min-width:768px) {
    .ch-wrap,.ch-inner { padding:0 var(--ch-s5); }
    .ch-hero { padding:var(--ch-s6) var(--ch-s5); border-radius:var(--ch-r-2xl); }
    .ch-hero__title { font-size:26px; }
}

/* 데스크톱 : 헤더 한 줄 + GNB 가로 드롭다운, 햄버거 숨김 */
@media (min-width:820px) {
    .ch-header__inner { flex-wrap:nowrap; min-height:60px; gap:var(--ch-s4); padding-top:0; padding-bottom:0; }
    .ch-gnb__toggle { display:none; }
    .ch-gnb {
        display:flex; order:0; flex-direction:row; flex:1 1 0; flex-basis:auto; width:auto;
        min-width:0; gap:var(--ch-s1); margin-top:0;
    }
    .ch-gnb__item { border-top:0; }
    .ch-gnb__item > a { padding:10px var(--ch-s3); font-size:var(--ch-t-md); border-radius:var(--ch-r-btn); }
    .ch-gnb__item > a:hover,.ch-gnb__item:hover > a { background:var(--ch-bg); color:var(--ch-accent-deep); }
    /* 하위메뉴 = 호버 드롭다운 */
    .ch-gnb__sub {
        position:absolute; top:100%; left:0; min-width:170px; z-index:70;
        background:var(--ch-pop); border:1px solid var(--ch-pop-line); border-radius:var(--ch-r-lg);
        padding:var(--ch-s2); box-shadow:var(--ch-sh-md); margin-top:var(--ch-s1);
        visibility:hidden; opacity:0; transform:translateY(-4px);
        transition:opacity .14s,transform .14s,visibility .16s;
    }
    .ch-gnb__item:hover .ch-gnb__sub { visibility:visible; opacity:1; transform:translateY(0); }
    .ch-gnb__sub a { padding:8px 12px; font-size:var(--ch-t-sm); }
}