@charset "utf-8";

/* 최근게시물 스킨 (new) — 시안(새글-페이지-리디자인.html)을 옮긴 것이다.

   치수는 시안에서 그대로 재 왔고 — 검색 패널 5px, 표 머리 밑줄 1.5px, 줄
   여백 13px, 칸 30/88/108/1fr/152/68, 글자 12.5~15px — 색만 사이트 팔레트로
   바꾼다. 시안은 잉크 블루(#2B4A8B)에 회색 계열인데 --clarity-* 토큰으로
   적으면 다크도 함께 따라온다.

        시안 #16181d           ->  --clarity-text
        시안 #4b5162           ->  --clarity-text-soft
        시안 #5f6674 · #6b7280 ->  --clarity-muted
        시안 #dcdfe4 · #e6e8ec ->  --clarity-border
        시안 #eef0f3 · #f1f3f6 ->  --nw-line (테두리보다 옅은 줄 사이 선)
        시안 #f7f9fc · #fbfcfd ->  --clarity-surface-soft
        시안 #2b4a8b           ->  --clarity-primary
        시안 #f2f5fb           ->  --clarity-primary-soft
        시안 #c0392b           ->  --clarity-danger

   시안의 댓글 표(#7a5c00 / #fff4d1)만 짝이 되는 토큰이 없다. 댓글과 내 글을
   같은 파랑으로 칠하면 둘을 구분할 수 없어 --nw-amber 로 따로 둔다.

   제목은 테마의 페이지 머리줄이 낸다. 건수 한 줄은 스킨이 그려 머리줄로
   옮긴다(new.skin.php 맨 아래). */
body.clarity-page .nw-skin {
    --nw-line: color-mix(in oklch, var(--clarity-border) 55%, var(--clarity-surface));
    --nw-amber: #7a5c00;
    --nw-amber-bg: #fff4d1;
    --nw-cols: 30px 88px 108px minmax(0, 1fr) 152px 68px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
/* 다크는 테마와 같은 열쇠로 건다 — html[data-theme] 은 부트 스크립트가 붙인다. */
html[data-theme="dark"] body.clarity-page .nw-skin {
    --nw-amber: #f0d089;
    --nw-amber-bg: #3a2f12;
}
/* 관리자가 아니면 체크 칸이 없다. 칸 눈금에서도 빼야 머리와 줄이 어긋나지 않는다. */
body.clarity-page .nw-skin:not(:has(.td_chk)) { --nw-cols: 88px 108px minmax(0, 1fr) 152px 68px; }

/* 제목 옆 건수. 스크립트가 머리줄로 옮기기 전에는 본문 맨 위에 선다. */
body.clarity-page .nw-summary {
    margin: 0;
    color: var(--clarity-muted);
    font-size: 13px;
    text-align: right;
}
body.clarity-page .nw-summary strong { color: var(--clarity-text); font-weight: 700; }
body.clarity-page .clarity-page-header-actions .nw-summary { padding-bottom: 4px; }

/* ── 상세검색 ──────────────────────────────────────────────────
   코어는 <fieldset> 로 내고 <legend> 가 화면 낭독기용으로만 숨어 있다.
   눈에 보이는 제목은 따로 둔다 — legend 를 되살리면 fieldset 테두리 위에
   걸터앉아 패널 모양이 무너진다. */
body.clarity-page .nw-search {
    margin: 0;
    padding: 14px 18px 18px;
    border: 1px solid var(--clarity-border);
    border-radius: 5px;
    background: var(--clarity-surface-soft);
    text-align: left;
}
body.clarity-page .nw-search legend {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}
body.clarity-page .nw-search-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin-bottom: 12px;
}
body.clarity-page .nw-search-title {
    color: var(--clarity-text);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.01em;
}
body.clarity-page .nw-search-hint {
    margin: 0;
    padding: 0;
    color: var(--clarity-muted);
    font-size: 12.5px;
    letter-spacing: normal;
    text-align: left;
}
body.clarity-page .nw-search-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
body.clarity-page .nw-search select {
    width: auto;
    min-width: 132px;
    height: 38px;
    box-sizing: border-box;
    padding: 0 10px;
    border: 1px solid var(--clarity-border);
    border-radius: 4px;
    background-color: var(--clarity-surface);
    color: var(--clarity-text);
    font-size: 13.5px;
}
/* 입력칸과 검색 버튼은 한 상자처럼 붙는다. 테두리는 감싼 쪽이 그린다. */
body.clarity-page .nw-search-field {
    display: flex;
    flex: 1 1 220px;
    min-width: 0;
    height: 38px;
    overflow: hidden;
    border: 1px solid var(--clarity-border);
    border-radius: 4px;
    background: var(--clarity-surface);
}
body.clarity-page .nw-search-field .frm_input {
    width: auto;
    height: 100%;
    min-width: 0;
    flex: 1;
    box-sizing: border-box;
    padding: 0 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--clarity-text);
    font-size: 13.5px;
}
/* 패널이 자기 포커스 표시를 가지므로 안쪽 입력칸의 범용 링은 끈다.
   (default.css 의 input:focus 와 body.clarity-page :is(input…):focus-visible) */
body.clarity-page .nw-search-field .frm_input:focus,
body.clarity-page .nw-search-field .frm_input:focus-visible {
    border: 0 !important;
    outline: 0;
    box-shadow: none;
}
body.clarity-page .nw-search-field:focus-within {
    border-color: var(--clarity-primary);
    box-shadow: 0 0 0 3px var(--clarity-primary-soft);
}
/* 라벨에 required 표시가 따로 없으므로 입력칸 안의 빨간 별도 내지 않는다. */
body.clarity-page .nw-search-field .frm_input:is(.required, [required]):invalid { background-image: none !important; }
/* 아래 둘은 id 를 한 칸 끼워 (1,2,1) 로 올린다. skins.css:79 의

       body.clarity-page :is(…, .btn_confirm .btn_submit, .btn_submit, .btn_b01, …)

   이 :is() 안에서 가장 센 인자의 값을 가져가 (0,3,1) 이 되는데, 이는
   body.clarity-page .nw-search .btn_submit 과 정확히 같다. 같으면 나중에
   실린 skins.css 가 이기고(스킨 style.css 가 먼저 실린다) 버튼이 흰 바탕에
   회색 글자로 돌아간다. 폭·높이는 그 규칙에 없어 내 값이 남으므로 반만
   어긋난 모양이 된다. 회원가입 정보 입력에서도 같은 자리를 겪었다. */
body.clarity-page #new_sch .btn_submit {
    width: 74px;
    height: 100%;
    min-height: 0;
    flex: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--clarity-text);
    color: var(--clarity-surface);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}
body.clarity-page #new_sch .btn_submit:hover { background: var(--clarity-text-soft); color: var(--clarity-surface); }

/* ── 도구 줄 ───────────────────────────────────────────────────
   전체선택은 왼쪽, 선택 삭제는 오른쪽. 표 위와 아래 같은 모양이다. */
body.clarity-page .nw-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    float: none;
    margin: 0;
    padding: 0 4px 10px;
}
body.clarity-page .nw-tools-bottom { padding: 12px 4px 0; }
body.clarity-page .nw-checkall {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--clarity-text-soft);
    font-size: 13px;
    cursor: pointer;
}
body.clarity-page .nw-skin .nw-chk {
    position: static;
    width: 15px;
    height: 15px;
    margin: 0;
    opacity: 1;
    accent-color: var(--clarity-primary);
    cursor: pointer;
}
body.clarity-page .nw-skin .nw-chk:focus-visible { outline: 2px solid var(--clarity-primary); outline-offset: 2px; }
/* 삭제는 되돌릴 수 없다. 위험한 색을 글자와 테두리에만 두고 바탕은 비운다 —
   자주 쓰는 버튼이 아니어서 눈에 먼저 들어올 이유가 없다. */
body.clarity-page #fnewlist .nw-del {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    min-height: 0;
    padding: 0 11px;
    border: 1px solid var(--clarity-border);
    border-radius: 4px;
    background: var(--clarity-surface);
    color: var(--clarity-danger);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
body.clarity-page #fnewlist .nw-del:hover {
    border-color: var(--clarity-danger);
    background: color-mix(in oklch, var(--clarity-danger) 8%, var(--clarity-surface));
    color: var(--clarity-danger);
}
body.clarity-page #fnewlist .nw-del svg { flex: none; }

/* ── 표 ────────────────────────────────────────────────────────
   시안은 칸 폭을 못으로 박아 둔다. <table> 로 두되 표 자체를 그리드로
   만들어 머리와 줄이 같은 눈금을 쓰게 한다. 이렇게 해야 좁은 화면에서
   같은 마크업을 카드로 접을 수 있다. */
body.clarity-page .nw-wrap {
    margin: 0;
    border: 0;
    background: none;
}
body.clarity-page #fnewlist .nw-wrap table {
    display: block;
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    table-layout: auto;
}
body.clarity-page .nw-wrap :is(thead, tbody) { display: block; }
body.clarity-page .nw-wrap tr {
    display: grid;
    grid-template-columns: var(--nw-cols);
    gap: 16px;
    align-items: center;
}
body.clarity-page .nw-wrap thead tr {
    padding: 0 4px 11px;
    border-bottom: 1.5px solid var(--clarity-text);
}
/* th·td 의 바탕은 board-table.css 의 body.clarity-page .tbl_head01 :is(thead
   th, tbody td) 가 (0,3,2) 로 깔고 td 쪽은 !important 까지 붙어 있다. 줄을
   그리드로 세워 칸 사이에 gap 이 있으므로, 칸마다 바탕이 남으면 그 틈이
   흰 세로줄로 드러난다(머리줄이 칸마다 끊겨 보였다). td 의 흰 바탕은 줄
   hover 도 덮는다. #fnewlist 를 한 칸 끼워 (1,2,1) 로 올려 걷어낸다. */
body.clarity-page #fnewlist .nw-wrap th {
    height: auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--clarity-text);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: -.01em;
    text-align: left;
}
body.clarity-page .nw-wrap .nw-th-date { text-align: right; }
body.clarity-page .nw-wrap tbody tr {
    padding: 13px 4px;
    border-bottom: 1px solid var(--nw-line);
}
body.clarity-page .nw-wrap tbody tr:hover { background: var(--clarity-surface-soft); }
body.clarity-page #fnewlist .nw-wrap td {
    min-width: 0;
    padding: 0;
    border: 0;
    background: none !important;
    line-height: 1.45;
    text-align: left;
}

body.clarity-page .nw-wrap .td_chk { display: flex; align-items: center; }
body.clarity-page .nw-wrap .td_group,
body.clarity-page .nw-wrap .td_board {
    overflow: hidden;
    font-size: 12.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 코어 스킨의 알록달록한 알약을 걷는다. 그룹은 옅게, 게시판만 파랗게. */
body.clarity-page .nw-wrap .td_group a {
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--clarity-muted);
    font-weight: 400;
}
body.clarity-page .nw-wrap .td_group a:hover { color: var(--clarity-text); }
body.clarity-page .nw-wrap .td_board a {
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--clarity-primary);
    font-weight: 600;
}
body.clarity-page .nw-wrap .td_board a:hover { text-decoration: underline; text-underline-offset: 2px; }

body.clarity-page .nw-wrap .td_subject {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}
body.clarity-page .nw-wrap .new_tit {
    overflow: hidden;
    color: var(--clarity-text);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -.015em;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.clarity-page .nw-wrap .new_tit:hover { color: var(--clarity-primary); }
body.clarity-page .nw-skin .nw-tag {
    flex: none;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}
body.clarity-page .nw-skin .nw-tag-comment { background: var(--nw-amber-bg); color: var(--nw-amber); }
body.clarity-page .nw-skin .nw-tag-mine {
    border: 1px solid color-mix(in oklch, var(--clarity-primary) 30%, var(--clarity-surface));
    background: var(--clarity-primary-soft);
    color: var(--clarity-primary);
}

/* 이름. 코어 get_sideview() 가 회원이면 사진을, 비회원이면 맨 글자를 준다.
   사진이 있으면 내가 그린 첫 글자를 감춘다 — 둘 다 나오면 동그라미가 둘이다. */
body.clarity-page .nw-wrap .td_name {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
    color: var(--clarity-text-soft);
    font-size: 13px;
}
body.clarity-page .nw-skin .nw-initial {
    display: flex;
    width: 22px;
    height: 22px;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--clarity-surface-soft);
    color: var(--clarity-muted);
    font-size: 10.5px;
    font-weight: 700;
}
body.clarity-page .nw-wrap .td_name:has(.profile_img) .nw-initial { display: none; }
body.clarity-page .nw-wrap .td_name .sv_wrap { min-width: 0; }
body.clarity-page .nw-wrap .td_name .sv_member {
    display: flex;
    align-items: center;
    gap: 7px;
    overflow: hidden;
    color: var(--clarity-text-soft);
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.clarity-page .nw-wrap .td_name .sv_member:hover { color: var(--clarity-primary); }
body.clarity-page .nw-wrap .td_name .profile_img { display: block; flex: none; }
body.clarity-page .nw-wrap .td_name .profile_img img {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
}

body.clarity-page .nw-wrap .td_date {
    color: var(--clarity-muted);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

body.clarity-page .nw-wrap .empty_table {
    grid-column: 1 / -1;
    padding: 56px 0;
    color: var(--clarity-muted);
    font-size: 14px;
    text-align: center;
}
body.clarity-page .nw-wrap tbody tr:has(.empty_table) { display: block; padding: 0; }

/* 페이지 넘김의 모양은 default.css 의 .clarity-pg 가 맡는다. 여기서는
   위아래 여백만 지운다 — 스킨이 flex 로 서 있어 gap 이 이미 붙는다. */
body.clarity-page .nw-skin .clarity-pg { margin: 0; }

/* ── 좁은 화면: 표를 카드로 ────────────────────────────────────
   시안의 모바일은 게시판 표 · 댓글 · 내 글 한 줄, 제목 한 줄, 사람과 일시
   한 줄이다. 같은 마크업을 그리드 자리로만 다시 앉힌다. */
@media (max-width: 47.5rem) {
    body.clarity-page .nw-skin { gap: 16px; }
    body.clarity-page .nw-search { padding: 12px; }
    body.clarity-page .nw-search-form { gap: 6px; }
    body.clarity-page .nw-search select { min-width: 0; flex: 1 1 calc(50% - 3px); }
    body.clarity-page .nw-search-field { flex: 1 1 100%; }

    /* skins.css:163 이 좁은 화면에서 .tbl_head01 을 옆으로 굴리고 표에
       min-width:640px 을 준다. 표를 카드로 접는 이 화면에서는 그 값이
       남아 있으면 카드가 화면보다 넓어져 옆으로 밀린다. 둘 다 푼다. */
    body.clarity-page #fnewlist .nw-wrap { overflow-x: visible; }
    body.clarity-page #fnewlist .nw-wrap table { min-width: 0; }

    body.clarity-page .nw-wrap thead { display: none; }
    body.clarity-page .nw-wrap tbody tr {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "chk board board"
            "chk title title"
            "chk name  date";
        gap: 6px 10px;
        align-items: start;
        padding: 14px 4px;
    }
    body.clarity-page .nw-wrap .td_chk { grid-area: chk; align-self: start; padding-top: 3px; }
    body.clarity-page .nw-wrap .td_board { grid-area: board; }
    /* 그룹은 접는다. 게시판 이름만으로도 어디 글인지 알 수 있고, 좁은 폭에서
       분류가 둘이면 제목이 설 자리가 없다. */
    body.clarity-page .nw-wrap .td_group { display: none; }
    body.clarity-page .nw-wrap .td_subject { grid-area: title; align-items: flex-start; }
    body.clarity-page .nw-wrap .new_tit {
        overflow: visible;
        font-size: 15.5px;
        font-weight: 600;
        letter-spacing: -.02em;
        line-height: 1.4;
        text-wrap: pretty;
        white-space: normal;
    }
    body.clarity-page .nw-wrap .td_name { grid-area: name; font-size: 12px; }
    body.clarity-page .nw-skin .nw-initial { width: 18px; height: 18px; font-size: 9.5px; }
    body.clarity-page .nw-wrap .td_name .profile_img img { width: 18px; height: 18px; }
    body.clarity-page .nw-wrap .td_date { grid-area: date; align-self: center; font-size: 12px; }
    /* 게시판 이름은 모바일에서 표로 세운다 — 제목 위에 홀로 서는 줄이라
       링크인지 분류인지 한눈에 보여야 한다. */
    body.clarity-page .nw-wrap .td_board a {
        display: inline-block;
        padding: 2px 6px;
        border-radius: 3px;
        background: var(--clarity-primary-soft);
        font-size: 11px;
        font-weight: 700;
    }
    body.clarity-page .nw-wrap .td_board a:hover { text-decoration: none; }
}