/* ==========================================================================
   one 테마 CSS — 이 파일 하나가 라이트/다크와 넓은/좁은 화면을 전부 책임진다.

   구조 (위에서 아래로):
     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:    12px;
    --shadow:    0 1px 2px rgb(0 0 0 / .05), 0 8px 24px -16px 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 -16px 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 -16px 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; }
a:hover { color: var(--brand); }
img { max-width: 100%; height: auto; }

h1, h2, h3 { margin: 0; line-height: 1.3; }

/* 스크린리더 전용(화면에서 숨김). 순정이 뱉는 .sound_only 도 같은 뜻이다. */
.sr-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;
}

.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);
    border-bottom: 1px solid var(--line);
}
.site-head-in { display: flex; align-items: center; gap: 16px; height: 56px; }
.logo { font-size: 18px; font-weight: 800; white-space: nowrap; }
.gnb { display: flex; gap: 4px; }
.gnb a { padding: 6px 12px; border-radius: 8px; 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: 24px; padding-bottom: 48px; min-height: 60vh; }

.site-foot { border-top: 1px solid var(--line); }
.site-foot-in { padding: 24px 16px; }
.foot-title { margin: 0 0 4px; font-weight: 700; }
.site-foot .muted { margin: 0; font-size: 13px; }

/* 좁은 화면: 메뉴는 숨기고 ☰ 버튼으로 연다 (동작은 js/one.js) */
.gnb-open { display: none; }
@media (max-width: 720px) {
    .gnb {
        display: none;
        position: absolute; top: 56px; left: 0; right: 0;
        flex-direction: column; gap: 0;
        background: var(--card); border-bottom: 1px solid var(--line);
        padding: 8px;
    }
    .gnb.is-open { display: flex; }
    .gnb a { padding: 12px; }
    .gnb-open { display: inline-flex; }
}

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

.card {
    background: var(--card);
    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;
}

table { border-collapse: collapse; width: 100%; }

/* ---------- 5-1. 메인 화면 ---------- */
.home-title { font-size: 22px; margin-bottom: 4px; }
.home-desc { margin: 0 0 20px; }

.home-boards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 14px;
}
.home-board { padding: 18px 20px; }
.home-board-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.home-board-head h2 { font-size: 16px; }
.home-board-head a.more { margin-left: auto; font-size: 12px; 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; }

/* ---------- 5-2. 게시판 목록 ---------- */
.b-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.b-head h1 { font-size: 20px; }
.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: 11px 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 8px; 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; }
.b-row .name { margin-left: auto; flex: none; color: var(--muted); font-size: 13px; }
.b-row .date, .b-row .hit { flex: none; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.b-row .hit { width: 3.5em; text-align: right; }

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

.b-foot { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }

/* 순정 페이징(get_paging)이 만드는 조각 꾸미기 */
.pg_wrap { display: flex; gap: 4px; margin: 0 auto; }
.pg { display: contents; }
.pg_page, .pg_current {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px; padding: 0 8px;
    border-radius: 10px; font-size: 14px; color: var(--muted);
}
.pg_page:hover { background: var(--line); color: var(--text); }
.pg_current { background: var(--text); color: var(--bg); font-weight: 700; }

.b-search { display: flex; gap: 6px; margin-left: auto; }

/* ---------- 5-3. 게시판 목록 (card 디자인) ----------
   b-list 와 데이터는 같고 생김새만 다르다 — 스킨을 'theme/card' 로 고르면 이 모양. */
.c-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 14px;
}
.c-item { display: block; padding: 16px 18px; }
.c-item:hover { color: inherit; outline: 2px solid var(--brand); outline-offset: -2px; }
.c-item-top { display: flex; gap: 4px; min-height: 20px; margin-bottom: 6px; }
.b-badge.is-new { background: var(--danger); color: #fff; }
.c-subj {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; line-height: 1.4; min-height: 2.8em;
}
.c-item.is-notice .c-subj { color: var(--brand); }
.c-meta { display: flex; gap: 10px; margin-top: 10px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.c-meta .cnt { color: var(--brand); font-weight: 700; }

/* ---------- 5-4. 글읽기 ---------- */
.v-post { padding: 24px 28px; }
.v-head { padding-bottom: 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; align-items: center; flex-wrap: wrap; }
.v-meta .cnt { color: var(--brand); font-weight: 700; font-size: 13px; }
.v-body { padding: 20px 0; line-height: 1.8; overflow-wrap: break-word; }
.v-body img { border-radius: 8px; }
.v-files { list-style: none; margin: 0 0 14px; padding: 12px 14px; background: var(--bg); border-radius: 10px; }
.v-files li + li { margin-top: 6px; }
.v-good { display: flex; gap: 8px; justify-content: center; padding: 8px 0 18px; }
.v-good strong { color: var(--brand); }
.v-foot { display: flex; gap: 6px; padding-top: 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.v-prevnext { margin-left: auto; display: flex; gap: 4px; }

/* ---------- 5-5. 댓글 (순정 마크업 #bo_vc 최소 다듬기) ---------- */
#bo_vc { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 22px; margin-top: 16px; }
#bo_vc h2 { font-size: 15px; margin-bottom: 10px; }
#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 time { color: var(--muted); font-size: 12px; }
.bo_vc_w { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.bo_vc_w textarea { width: 100%; min-height: 90px; }
.bo_vc_w .btn_confirm { margin-top: 8px; display: flex; justify-content: flex-end; gap: 6px; }
.bo_vc_w .btn_submit {
    height: 36px; padding: 0 14px; border: 0; border-radius: 10px;
    background: var(--brand); color: var(--brand-on);
    font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
#bo_vc .bo_vc_act { list-style: none; display: flex; gap: 8px; margin: 6px 0 0; padding: 0; font-size: 12px; }
#bo_vc .bo_vc_act a { color: var(--muted); }