/* ==========================================================================
   g5mono 공통 CSS — 모든 페이지가 이 파일 하나를 쓴다 (테마 head.sub.php 가 링크).
   이 파일 하나가 라이트/다크와 넓은/좁은 화면을 전부 책임진다.

   구조 (위에서 아래로):
     1. 색 변수  — 라이트 기본값 → 다크에서 재정의 (마크업은 하나!)
     2. 기본기   — 리셋·글꼴·링크
     3. 셸       — 헤더(햄버거 포함)·본문 폭·푸터
     4. 부품     — 버튼·카드·입력·페이징
     5. 화면별   — 메인 / 게시판 목록 / 글읽기 / 댓글
   ========================================================================== */

/* ---------- 1. 색 변수 ----------
   색은 전부 여기서만 정한다. 아래 코드 어디에도 #fff 같은 생색이 없어야
   다크모드가 "재정의 한 번"으로 끝난다. */
:root {
    color-scheme: light;
    --bg:       #f6f7f9;   /* 페이지 바닥 */
    --card:     #ffffff;   /* 카드(떠 있는 면) */
    --text:     #1c1e21;   /* 본문 글자 */
    --muted:    #6b7280;   /* 보조 글자 */
    --line:     #e5e7eb;   /* 구분선 */
    --brand:    #2563eb;   /* 강조색 — 화면에 하나만 */
    --brand-on: #ffffff;   /* 강조색 위의 글자 */
    --danger:   #dc2626;

    --radius:   14px;
    --shadow:   0 1px 2px rgb(0 0 0 / .04), 0 8px 24px -18px rgb(0 0 0 / .25);
}

/* 시스템이 다크이고, 사용자가 직접 고르지 않았을 때 */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;
        --bg:       #111318;
        --card:     #1b1e25;
        --text:     #e6e8ee;
        --muted:    #9aa1ad;
        --line:     #2a2e37;
        --brand:    #5b8def;   /* 어두운 바닥에서는 조금 밝은 파랑이 읽힌다 */
        --brand-on: #10131a;
        --shadow:   0 1px 2px rgb(0 0 0 / .5), 0 8px 24px -18px rgb(0 0 0 / .9);
    }
}

/* 사용자가 토글로 직접 고른 경우 — 시스템 설정보다 우선한다 */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg:       #111318;
    --card:     #1b1e25;
    --text:     #e6e8ee;
    --muted:    #9aa1ad;
    --line:     #2a2e37;
    --brand:    #5b8def;
    --brand-on: #10131a;
    --shadow:   0 1px 2px rgb(0 0 0 / .5), 0 8px 24px -18px rgb(0 0 0 / .9);
}
:root[data-theme="light"] { color-scheme: light; }

/* 토글 버튼 속 아이콘 — 현재 모드에 맞는 것 하나만 보인다 */
.only-dark { display: none; }
:root[data-theme="dark"] .only-light { display: none; }
:root[data-theme="dark"] .only-dark { display: inline; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .only-light { display: none; }
    :root:not([data-theme]) .only-dark { display: inline; }
}

/* ---------- 2. 기본기 ---------- */
* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
                 "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: -0.01em;
}

a { color: inherit; text-decoration: none; transition: color .15s; }
a:hover { color: var(--brand); }
img { max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; line-height: 1.3; }
table { border-collapse: collapse; width: 100%; }

/* 스크린리더 전용(화면에서 숨김). 순정 마크업의 .sound_only 와 같은 뜻 */
.sound_only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* 순정 head.sub.php 가 로그인 중일 때 body 첫머리에 찍는 안내줄 — 시각적으로 숨김 */
#hd_login_msg { position: absolute; width: 1px; height: 1px; overflow: hidden; }

.muted { color: var(--muted); }

/* ---------- 3. 셸 ---------- */
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }

.site-head {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--bg) 85%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}
.site-head-in { display: flex; align-items: center; gap: 14px; height: 58px; }
.logo { font-size: 18px; font-weight: 800; white-space: nowrap; }
.gnb { display: flex; gap: 2px; }
.gnb a { padding: 6px 12px; border-radius: 9px; font-size: 14px; font-weight: 500; }
.gnb a:hover { background: var(--line); color: var(--text); }
.site-head-side { margin-left: auto; display: flex; align-items: center; gap: 6px; }

main.wrap { padding-top: 28px; padding-bottom: 56px; min-height: 60vh; }
.page-title { font-size: 22px; margin-bottom: 18px; }

.site-foot { border-top: 1px solid var(--line); padding: 24px 0 32px; color: var(--muted); font-size: 13px; }
.site-foot a:hover { color: var(--brand); }
.site-foot .foot-links { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }

/* 좁은 화면: 메뉴는 숨기고 ☰ 버튼으로 편다 (동작은 tail.php 의 스크립트) */
.gnb-open { display: none; }
@media (max-width: 720px) {
    .gnb {
        display: none;
        position: absolute; top: 58px; left: 0; right: 0;
        flex-direction: column; gap: 0;
        background: var(--card);
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow);
        padding: 8px;
    }
    .gnb.is-open { display: flex; }
    .gnb a { padding: 12px; border-radius: 9px; }
    .gnb-open { display: inline-flex; }
}

/* ---------- 4. 부품 ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 36px; padding: 0 14px;
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--card); color: var(--text);
    font: inherit; font-size: 14px; font-weight: 500;
    cursor: pointer; white-space: nowrap;
    transition: border-color .15s, background .15s, color .15s;
}
.btn:hover { border-color: var(--brand); color: var(--brand); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--line); color: var(--text); }
.btn-fill { background: var(--brand); border-color: var(--brand); color: var(--brand-on); font-weight: 600; }
.btn-fill:hover { color: var(--brand-on); filter: brightness(1.06); }

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

input[type="text"], input[type="password"], input[type="email"],
textarea, select {
    font: inherit; color: var(--text);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 8px 12px;
}
input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}

/* 순정 get_paging() 이 만드는 쪽 넘김 조각 (.pg_wrap) 을 우리 모양으로 */
.pg_wrap { display: block; text-align: center; margin: 20px 0 0; }
.pg { display: inline-flex; gap: 4px; align-items: center; }
.pg_page, .pg_current {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px; padding: 0 8px;
    border-radius: 9px; font-size: 14px;
}
.pg_page { background: var(--card); border: 1px solid var(--line); }
.pg_page:hover { border-color: var(--brand); color: var(--brand); }
.pg_current { background: var(--brand); color: var(--brand-on); font-weight: 700; }

/* ---------- 5-1. 메인 ----------
   반응형의 핵심 — 폭이 넉넉하면 여러 칸, 좁으면 한 칸.
   모바일 파일이 따로 있는 게 아니라 이 규칙 하나가 알아서 접는다. */
.home-boards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 14px;
}
.home-board { padding: 18px 20px; }
.home-board h2 { font-size: 16px; margin-bottom: 8px; }
.home-board h2 a.more { float: right; font-size: 12px; font-weight: 400; color: var(--muted); }
.home-board ul { list-style: none; margin: 0; padding: 0; }
.home-board li a {
    display: flex; gap: 8px; padding: 7px 0;
    border-top: 1px solid var(--line);
}
.home-board li:first-child a { border-top: 0; }
.home-board .subj { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-board .cnt { color: var(--brand); font-size: 12px; font-weight: 700; }
.home-board .date { margin-left: auto; color: var(--muted); font-size: 12px; flex: none; }
.home-board .empty { padding: 7px 0; color: var(--muted); }

/* ---------- 5-2. 게시판 목록 ---------- */
.b-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.b-head h1 { font-size: 22px; }
.b-head .total { color: var(--muted); font-size: 13px; }
.b-head .b-tools { margin-left: auto; display: flex; gap: 6px; }

.b-list { padding: 4px 20px; }
.b-row {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
}
.b-row:first-child { border-top: 0; }
.b-row.is-notice .subj { font-weight: 700; }
.b-badge {
    flex: none; font-size: 11px; font-weight: 700;
    padding: 1px 9px; border-radius: 999px;
    background: var(--line); color: var(--muted);
}
.b-row.is-notice .b-badge { background: var(--brand); color: var(--brand-on); }
.b-row .subj { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-row .cnt { color: var(--brand); font-size: 12px; font-weight: 700; flex: none; }
.b-row .name { margin-left: auto; flex: none; font-size: 13px; color: var(--muted); }
.b-row .name a { color: inherit; }
.b-row .date, .b-row .hit { flex: none; font-size: 12px; color: var(--muted); }
.b-row .hit { min-width: 48px; text-align: right; }

.b-foot { margin-top: 18px; }
.b-search { display: flex; gap: 6px; justify-content: center; margin-top: 16px; }
.b-search input[type="text"] { width: min(100%, 260px); }

/* 좁은 화면: 조회수는 접고 이름·날짜만 남긴다 */
@media (max-width: 560px) {
    .b-row .hit { display: none; }
}

/* ---------- 5-3. 글읽기 ---------- */
.v-post { overflow: hidden; }
.v-head { padding: 20px 24px 14px; border-bottom: 1px solid var(--line); }
.v-subject { font-size: 20px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.v-meta { display: flex; gap: 12px; margin-top: 8px; font-size: 13px; flex-wrap: wrap; align-items: center; }
.v-meta .cnt { color: var(--brand); font-weight: 700; font-size: 13px; }

.v-body { padding: 24px; overflow-wrap: break-word; }
.v-body img { border-radius: 8px; }

.v-files { list-style: none; margin: 0; padding: 8px 24px; border-top: 1px solid var(--line); }
.v-files li { padding: 4px 0; font-size: 14px; }

.v-good { display: flex; gap: 8px; justify-content: center; padding: 18px 24px; border-top: 1px solid var(--line); }

.v-foot { display: flex; gap: 6px; padding: 14px 24px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.v-foot .v-prevnext { margin-left: auto; display: flex; gap: 6px; }

/* ---------- 5-4. 댓글 (순정 view_comment 조각을 최소로 단장) ---------- */
#bo_vc { margin-top: 20px; padding: 4px 24px; }
#bo_vc h2 { font-size: 16px; padding: 14px 0 6px; }
#bo_vc article { padding: 12px 0; border-top: 1px solid var(--line); }
#bo_vc header { display: flex; gap: 10px; align-items: center; font-size: 13px; flex-wrap: wrap; }
#bo_vc .sv_wrap { font-weight: 600; }
#bo_vc textarea { width: 100%; }
#bo_vc_w { margin-top: 20px; padding: 16px 24px 20px; }
#bo_vc_w textarea { width: 100%; min-height: 90px; }
#bo_vc_send_btn, #btn_submit { margin-top: 8px; }
.bo_vc_w_info { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }