@charset "utf-8";

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

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

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

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

   제목은 테마의 페이지 머리줄이 낸다. 건수 한 줄은 스킨이 그려 머리줄로
   옮긴다(new.skin.php 맨 아래). */
body.solune-page .nw-skin {
    --nw-line: color-mix(in oklch, var(--solune-border) 55%, var(--solune-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.solune-page .nw-skin {
    --nw-amber: #f0d089;
    --nw-amber-bg: #3a2f12;
}
/* 관리자가 아니면 체크 칸이 없다. 칸 눈금에서도 빼야 머리와 줄이 어긋나지 않는다. */
body.solune-page .nw-skin:not(:has(.td_chk)) { --nw-cols: 88px 108px minmax(0, 1fr) 152px 68px; }

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

/* ── 상세검색 ──────────────────────────────────────────────────
   코어는 <fieldset> 로 내고 <legend> 가 화면 낭독기용으로만 숨어 있다.
   눈에 보이는 제목은 따로 둔다 — legend 를 되살리면 fieldset 테두리 위에
   걸터앉아 패널 모양이 무너진다. */
body.solune-page .nw-search {
    /* 목록 카드와 같은 모양이다 — 시안은 두 카드를 나란히 세운다. 안쪽
       여백은 머리줄과 폼이 각자 갖는다(접었을 때 빈 띠가 남지 않게). */
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--solune-border);
    border-radius: 12px;
    background: var(--solune-surface);
    text-align: left;
}
body.solune-page .nw-search legend {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}
/* 머리줄은 이제 단추다. 카드 폭을 다 쓰고, 누르면 아래 폼을 접고 편다. */
body.solune-page .nw-search-head {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 14px 18px;
    border: 0;
    background: none;
    cursor: pointer;
    text-align: left;
}
body.solune-page .nw-search-head:hover { background: var(--solune-surface-soft); }
body.solune-page .nw-search-title {
    color: var(--solune-text);
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: -.01em;
}
body.solune-page .nw-search-aside { display: flex; align-items: center; gap: 10px; }
body.solune-page .nw-search-hint {
    margin: 0;
    color: var(--solune-muted);
    font-size: 12.5px;
}
/* 홑화살은 펼쳤을 때 위를 본다. 상태를 aria-expanded 하나로만 들고 간다. */
body.solune-page .nw-search-chevron {
    display: inline-flex;
    color: var(--solune-muted);
    transition: transform .2s ease;
}
body.solune-page .nw-search-head[aria-expanded="true"] .nw-search-chevron { transform: rotate(180deg); }

body.solune-page .nw-search-form {
    display: grid;
    /* 시안의 눈금. 180px 아래로는 칸을 쪼개지 않고 줄을 바꾼다. */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    align-items: end;
    margin: 0;
    padding: 6px 18px 18px;
    border-top: 1px solid var(--nw-line);
}
/* 칸 하나 — 라벨 위, 입력 아래. 시안이 그렇게 둔다. 무엇을 고르는 칸인지
   열어 보지 않고도 알린다. */
body.solune-page .nw-search-form .nw-field { display: flex; min-width: 0; flex-direction: column; gap: 6px; }
body.solune-page .nw-search-form .nw-field > label {
    color: var(--solune-muted);
    font-size: 12.5px;
    font-weight: 600;
}
body.solune-page .nw-search-form .nw-req { color: var(--solune-danger); font-weight: 700; }

body.solune-page .nw-search select {
    width: 100%;
    height: 40px;
    min-width: 0;
    padding: 0 30px 0 10px;
    border: 1px solid var(--solune-border);
    border-radius: 8px;
    background-color: var(--solune-surface);
    color: var(--solune-text);
    font-size: 13.5px;
}

/* 입력칸과 검색 단추는 6px 사이로 나란히 선다. 한때 한 상자에 가두고
   테두리를 감싼 쪽이 그렸는데, 칸을 세로로 쌓는 격자로 옮기면서 그 상자의
   flex-basis(220px)가 주축이 세로로 바뀌어 그대로 높이가 되어 버렸다.
   상자를 없애면 그 함정도 없다. 시안도 둘을 따로 둔다. */
body.solune-page .nw-search-field {
    display: flex;
    min-width: 0;
    gap: 6px;
}
body.solune-page .nw-search-field .frm_input {
    width: auto;
    height: 40px;
    min-width: 0;
    flex: 1;
    padding: 0 12px;
    border: 1px solid var(--solune-border) !important;
    border-radius: 8px;
    background: var(--solune-surface) !important;
    color: var(--solune-text);
    font-size: 13.5px;
    line-height: 1.2;
}
/* 테마에는 모든 입력에 걸리는 포커스 규칙이 둘 있다(범용 :focus-visible
   outline 3px, input:focus box-shadow !important). 그대로 두면 링이 겹쳐
   세 겹이 되므로 여기서 한 겹으로 그린다. */
body.solune-page .nw-search-field .frm_input:focus {
    border-color: var(--solune-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--solune-primary) 20%, transparent) !important;
}
body.solune-page .nw-search-field .frm_input:focus-visible { outline: 0; }
/* 라벨에 "필수" 를 눈에 보이게 적어 두었으므로 입력칸 안의 빨간 별은 내지
   않는다(default.css:499 가 !important 라 같은 무게로만 끌 수 있다). */
body.solune-page .nw-search-field .frm_input:is(.required, [required]):invalid { background-image: none !important; }

/* 아래 둘은 id 를 한 칸 끼워 (1,2,1) 로 올린다. skins.css:79 의

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

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

/* ── 카드 ──────────────────────────────────────────────────────
   도구 줄 · 표 · 페이지 넘김이 테두리 하나 안에 들어간다. 시안이 그렇게
   두고, 1:1문의 목록도 같은 모양이다. */
body.solune-page .nw-card {
    /* 표를 접는 기준은 화면 폭이 아니라 이 카드의 폭이다. 사이드가 붙는
       화면에서는 둘이 크게 어긋난다 — 768px 창에서도 카드는 440px 뿐이라,
       화면 폭으로 재면 아직 넓은 줄 알고 여섯 칸을 그대로 두었다가 이름과
       일시가 카드 밖으로 잘려 나갔다. 시안도 컨테이너 질의를 쓴다. */
    container: nw / inline-size;
    overflow: hidden;
    border: 1px solid var(--solune-border);
    border-radius: 12px;
    background: var(--solune-surface);
}

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

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

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

body.solune-page .nw-wrap .td_subject {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}
body.solune-page .nw-wrap .new_tit {
    overflow: hidden;
    color: var(--solune-text);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -.015em;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.solune-page .nw-wrap .new_tit:hover { color: var(--solune-primary); }
body.solune-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.solune-page .nw-skin .nw-tag-comment { background: var(--nw-amber-bg); color: var(--nw-amber); }
body.solune-page .nw-skin .nw-tag-mine {
    border: 1px solid color-mix(in oklch, var(--solune-primary) 30%, var(--solune-surface));
    background: var(--solune-primary-soft);
    color: var(--solune-primary);
}

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

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

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

/* 페이지 넘김의 모양과 접는 규칙은 default.css 의 페이지 넘김 절 한 벌이 맡는다.
   여기서는 카드 안에 앉히는 여백만 준다.

   한때 "1 / 56 쪽" 요약을 이 화면에서만 늘 보이게 되살렸지만(시안이 그렇게
   두었다) 걷었다 — 번호가 다 보이는 자리에서는 같은 말을 두 번 하는 셈이고,
   다른 화면과도 어긋났다. 번호가 전부 접히는 폭에서는 공통 규칙이 알아서
   이 줄을 내보낸다. */
body.solune-page .nw-skin .solune-pg-wrap {
    margin: 0;
    padding: 16px 20px;
    border-top: 1px solid var(--nw-line);
}

/* ── 좁은 화면 ─────────────────────────────────────────────────
   카드 바깥(패널 사이 간격, 상세검색 안쪽 여백)은 화면 폭으로 잰다. */
@media (max-width: 47.5rem) {
    body.solune-page .nw-skin { gap: 16px; }
    body.solune-page .nw-search-head { padding: 12px 14px; }
    body.solune-page .nw-search-form { gap: 10px; padding: 4px 14px 14px; }
    body.solune-page .nw-search select { min-width: 0; }
}

/* ── 좁은 카드: 표를 카드 목록으로 ─────────────────────────────
   시안의 모바일은 게시판 표 · 댓글 · 내 글 한 줄, 제목 한 줄, 사람과 일시
   한 줄이다. 같은 마크업을 그리드 자리로만 다시 앉힌다.

   680px 은 여섯 칸(30+88+108+152+68 에 gap 다섯)이 제목에게 남길 자리가
   없어지는 폭이다. 시안이 잡은 값과 같다. */
@container nw (max-width: 680px) {
    body.solune-page .nw-tools { padding: 12px 14px; }
    body.solune-page .nw-skin .solune-pg-wrap { padding: 14px; }

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

    body.solune-page .nw-wrap thead { display: none; }
    body.solune-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;
    }
    body.solune-page .nw-wrap .td_chk { grid-area: chk; align-self: start; padding-top: 3px; }
    body.solune-page .nw-wrap .td_board { grid-area: board; }
    /* 그룹은 접는다. 게시판 이름만으로도 어디 글인지 알 수 있고, 좁은 폭에서
       분류가 둘이면 제목이 설 자리가 없다. */
    body.solune-page .nw-wrap .td_group { display: none; }
    body.solune-page .nw-wrap .td_subject { grid-area: title; align-items: flex-start; }
    body.solune-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.solune-page .nw-wrap .td_name { grid-area: name; font-size: 12px; }
    body.solune-page .nw-skin .nw-initial { width: 18px; height: 18px; font-size: 9.5px; }
    body.solune-page .nw-wrap .td_name .profile_img img { width: 18px; height: 18px; }
    body.solune-page .nw-wrap .td_date { grid-area: date; align-self: center; font-size: 12px; }
    /* 게시판 이름은 좁은 카드에서 표로 세운다 — 제목 위에 홀로 서는 줄이라
       링크인지 분류인지 한눈에 보여야 한다. */
    body.solune-page .nw-wrap .td_board a {
        display: inline-block;
        padding: 2px 6px;
        border-radius: 3px;
        background: var(--solune-primary-soft);
        font-size: 11px;
        font-weight: 700;
    }
    body.solune-page .nw-wrap .td_board a:hover { text-decoration: none; }
}