/* ==========================================================================
   G5Pro 게시판
   순정처럼 PC/모바일 마크업을 나누지 않는다. 서버는 기기를 모르고,
   표현 전환은 전부 CSS 가 한다.
   ========================================================================== */

/* 아이콘 — partials/icon.blade.php 가 내는 인라인 SVG.
   1em 정사각이라 글자 크기를 따라가고 색은 currentColor 를 상속한다. */
.pro-icon { display: inline-block; vertical-align: -0.125em; flex: none; }

/* ---------- 게시판 머리 ---------- */

.pro-board { width: 100%; }

/* 순정 「전체목록보이기」(bo_use_list_view)를 켜면 bbs/board.php 가 글읽기 뒤에
   목록을 형제로 그대로 이어 붙인다. 그냥 두면 두 흰 카드가 맞닿아 어디까지가 글이고
   어디부터 목록인지 경계가 안 보인다.
   여백은 목록 쪽에만 준다 — 이 선택자는 목록 단독 페이지에서는 안 걸리므로
   그쪽 상단이 괜히 뜨지 않는다. */
.pro-view + .pro-board { margin-top: var(--pro-sp-12); }
@media (max-width: 639px) {
    .pro-view + .pro-board { margin-top: var(--pro-sp-8); }
}
/* 목록 아래 한 줄에 쪽 넘김과 검색을 나란히 둔다. 검색을 상단 토글로 숨겨 두면
   글이 쌓인 게시판에서 「검색이 어디 있지」가 된다 — 목록을 다 훑은 자리에 있어야 한다. */
.pro-board-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--pro-sp-3); flex-wrap: wrap; margin-top: var(--pro-sp-5);
}
.pro-board-foot .pro-pagination { margin-top: 0; }
/* 쪽이 한 장뿐이라 페이지네이션이 없어도 검색은 오른쪽 끝에 남는다 */
.pro-board-foot > .pro-search { margin-inline-start: auto; }

.pro-board-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--pro-sp-4); flex-wrap: wrap; margin-bottom: var(--pro-sp-5); }
/* 건수는 제목과 한 줄에 두고 액센트로 물들인다. 게시판이 얼마나 큰지가 이름 다음으로
   먼저 읽혀야 하는 값이다. 아랫줄 meta 에는 쪽수만 남긴다. */
.pro-board-title { font-size: var(--pro-text-2xl); font-weight: 700; letter-spacing: -0.03em; }
.pro-board-title em { font-style: normal; color: hsl(var(--pro-primary)); margin-inline-start: var(--pro-sp-1); }
.pro-board-meta  { font-size: var(--pro-text-xs); color: hsl(var(--pro-muted-foreground)); margin-top: var(--pro-sp-1); font-variant-numeric: tabular-nums; }

.pro-board-tools { display: flex; align-items: center; gap: var(--pro-sp-2); flex-wrap: wrap; }
/* 글쓰기 버튼의 + 는 아이콘이 아니라 글자다. 1em 정사각 SVG 로는 이 크기가 안 나온다. */
.pro-btn-plus { font-size: 1.25em; line-height: 1; margin-top: -0.1em; }

/* 분류 칩 */
.pro-cate { display: flex; gap: var(--pro-sp-1); flex-wrap: wrap; margin-bottom: var(--pro-sp-4); }
/* 분류 필터 — 테두리 없는 채워진 칩. 활성은 먹색으로 채운다.
   여기에 탠저린을 쓰면 액센트가 글쓰기 버튼과 경쟁한다. */
.pro-cate a {
    padding: var(--pro-sp-2) var(--pro-sp-4);
    border: 0;
    border-radius: var(--pro-radius-btn);
    background: hsl(var(--pro-secondary));
    font-size: var(--pro-text-xs); font-weight: 600; letter-spacing: -0.01em;
    color: hsl(var(--pro-secondary-foreground));
    transition: background var(--pro-transition), color var(--pro-transition);
}
.pro-cate a:hover { background: hsl(var(--pro-secondary) / .65); color: hsl(var(--pro-foreground)); }
.pro-cate a.is-active { background: hsl(var(--pro-foreground)); color: hsl(var(--pro-background)); font-weight: 700; }

/* ==========================================================================
   목록 — div + CSS grid 로 짠 표
   확정안 「마루 C3 · 표 · 썸네일 열」. 근거와 버려진 대안은 docs/BOARD-LIST-DESIGN.md.

   <table> 을 쓰지 않는 이유는 반응형이다. 좁은 화면에서 grid 를 flex 로 갈아 끼우고
   order 로 재배치하는 게 자유롭다. <table> 에 display 를 바꾸면 표 관련 동작이
   미묘하게 깨져 특정도 싸움이 붙는다 — 이 자리에 있던 예전 코드가 그 흔적이었다.
   대신 <table> 이 공짜로 주던 시맨틱은 뷰가 ARIA role 로 되돌린다.

   열 정의는 --pro-cols 하나뿐이고 머리줄과 본문 줄이 함께 쓴다. 정의가 한 곳이라
   머리줄과 본문이 어긋날 수가 없다. 값 자체는 게시판 설정(체크박스·썸네일·추천·
   비추천 사용 여부)에 따라 달라지므로 list.skin.php 가 만들어 인라인으로 넣는다.
   ========================================================================== */

.pro-table {
    /* 스킨이 인라인으로 덮어쓴다. 이 값은 인라인이 없을 때의 안전망일 뿐이다. */
    --pro-cols: 3.5rem minmax(0, 1fr) 6.5rem 4.25rem 4rem;

    /* 테두리 없음 — 라일락 바닥 위에 흰 면을 얹고 그림자로만 띄운다 */
    border: 0;
    border-radius: var(--pro-radius-lg);
    background: hsl(var(--pro-card));
    box-shadow: var(--pro-shadow);
    overflow: hidden;
}

.pro-tr {
    display: grid;
    grid-template-columns: var(--pro-cols);
    align-items: center;
    gap: 0 var(--pro-sp-3);
    padding-inline: var(--pro-sp-4);
}

/* ---------- 머리줄 ---------- */

.pro-thead .pro-tr {
    padding-block: var(--pro-sp-3);
    border-bottom: 1px solid hsl(var(--pro-border));
    background: hsl(var(--pro-muted) / .6);
}
.pro-th {
    min-width: 0;
    font-size: var(--pro-text-xs); font-weight: 700; letter-spacing: -0.01em;
    color: hsl(var(--pro-muted-foreground));
    text-align: center; white-space: nowrap;
}
.pro-th.is-start { text-align: start; }

/* 정렬 가능한 머리글. 화살표는 aria-sort 를 그대로 그린다 —
   상태가 CSS 와 속성 두 군데에 따로 적히지 않게 한다. */
.pro-th a {
    display: inline-flex; align-items: center; gap: var(--pro-sp-1);
    padding: 2px var(--pro-sp-1); margin: -2px calc(var(--pro-sp-1) * -1);
    border-radius: var(--pro-radius-sm);
    color: inherit;
}
.pro-th a:hover { background: hsl(var(--pro-accent)); color: hsl(var(--pro-accent-foreground)); }
.pro-th a::after { content: "\2195"; font-size: .625rem; opacity: .45; }
.pro-th[aria-sort="descending"] a,
.pro-th[aria-sort="ascending"]  a { color: hsl(var(--pro-foreground)); font-weight: 600; }
.pro-th[aria-sort="descending"] a::after { content: "\2193"; opacity: 1; }
.pro-th[aria-sort="ascending"]  a::after { content: "\2191"; opacity: 1; }

/* ---------- 본문 줄 ---------- */

.pro-tbody .pro-tr {
    padding-block: var(--pro-sp-3);
    border-bottom: 1px solid hsl(var(--pro-border));
    transition: background var(--pro-transition);
}
.pro-tbody .pro-tr:last-child { border-bottom: 0; }
.pro-tbody .pro-tr:hover { background: hsl(var(--pro-muted) / .7); }
/* 공지는 회색이 아니라 액센트를 아주 옅게 깐다 — 마루가 공지를 표시하는 방식 */
.pro-tbody .pro-tr.is-notice { background: hsl(var(--pro-primary) / .05); }
.pro-tbody .pro-tr.is-notice:hover { background: hsl(var(--pro-primary) / .09); }
.pro-tbody .pro-tr.is-notice .pro-subject-link { font-weight: 700; }

.pro-td {
    min-width: 0;
    font-size: var(--pro-text-xs);
    color: hsl(var(--pro-muted-foreground));
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* 예전 마크업은 <input> 에 .pro-check 를 직접 걸었는데, core.css 의 .pro-check 는
   라벨 래퍼용이라(.pro-check input[...] 로 자식을 꾸민다) 입력 상자에는 아무것도
   안 먹었다. 목록 체크박스는 여기서 직접 꾸민다. */
.pro-col-chk { display: flex; justify-content: center; }
.pro-col-chk input[type="checkbox"] {
    width: 1rem; height: 1rem; margin: 0;
    accent-color: hsl(var(--pro-primary));
    cursor: pointer;
}

/* 글쓴이 칸에는 사이드뷰 같은 예측 못 할 마크업이 들어온다.
   min-width:0 이 없으면 긴 내용이 열을 밀어 가로 스크롤을 만든다. */
.pro-col-author {
    text-align: start; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* .pro-td 를 앞에 붙여 본문 칸에만 건다. .pro-col-comment 단독으로 쓰면 같은 특정도인
   .pro-th 를 나중에 선언된 쪽이 이겨서 머리글 「댓글」까지 물든다. */
.pro-td.pro-col-comment { color: hsl(var(--pro-primary)); font-weight: 700; }
.pro-td.pro-col-comment.is-zero { color: hsl(var(--pro-muted-foreground)); font-weight: 400; }
/* 전체 새글(new)에만 있는 열 — 어느 게시판의 글인지 */
.pro-col-board { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 썸네일 열 ----------
   이미지가 없는 글도 자리는 그대로 비워 둔다. 그래야 모든 썸네일이 같은 x 에 선다.
   카드형에서 썸네일이 행마다 좌우로 흔들리던 문제가 여기서는 구조적으로 안 생긴다. */
.pro-col-thumb { display: flex; justify-content: center; }
.pro-list-thumb,
.pro-list-nothumb { width: 3.25rem; height: 3.25rem; flex: none; }
.pro-list-thumb {
    display: block; object-fit: cover;
    border-radius: var(--pro-radius-sm);
    background: hsl(var(--pro-muted));
    /* border 는 박스를 키워 열 폭을 흔든다. outline 은 안 키우고 radius 도 따라간다. */
    outline: 1px solid hsl(var(--pro-border));
    outline-offset: -1px;
}

/* ---------- 제목 칸 ---------- */

.pro-col-subject {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 0 var(--pro-sp-2);
    text-align: start; min-width: 0;
}
/* 제목은 행에서 가장 큰 글자이자 유일하게 굵은 글자다. 나머지(글쓴이·날짜·수치)는
   전부 12px / 400 이라 위계가 한눈에 선다. 여기를 500 으로 낮추면 메타와 붙어 보인다. */
.pro-subject-link {
    font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.02em;
    color: hsl(var(--pro-foreground));
    min-width: 0; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pro-tbody .pro-tr:hover .pro-subject-link { text-decoration: underline; text-underline-offset: 3px; }

/* 한 줄 미리보기. bo_use_list_content 가 켜진 게시판에서만 나온다. */
.pro-list-excerpt {
    flex: 1 0 100%;
    margin-top: 2px;
    font-size: var(--pro-text-xs); line-height: 1.45;
    color: hsl(var(--pro-muted-foreground));
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 제목 옆 부속 — 전부 flex:none 이라 제목만 줄어들며 말줄임된다 */
.pro-comment-cnt,
.pro-new-mark,
.pro-mark-hot,
.pro-mark-file,
.pro-mark-link,
.pro-reply-depth,
.pro-cate-link { flex: none; }

/* 댓글 수는 제목 바로 옆에 액센트로 붙는다. 오른쪽 「댓글」 열과 값이 같아 중복이지만,
   목록을 훑을 때 눈은 제목 줄만 따라가므로 그 줄에 있어야 읽힌다. 열은 정렬·비교용이다. */
.pro-comment-cnt {
    display: inline-flex; align-items: center;
    color: hsl(var(--pro-primary)); font-size: var(--pro-text-xs); font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.pro-new-mark {
    display: inline-block;
    width: .375rem; height: .375rem; border-radius: 50%;
    background: hsl(var(--pro-destructive));
}
.pro-reply-depth { color: hsl(var(--pro-muted-foreground)); }
/* 답변 깊이는 앞 여백으로 표현한다. 열 너비를 흔들지 않으려고
   padding 이 아니라 inline-start margin 을 쓴다. */
.pro-reply-depth[data-depth="2"] { margin-inline-start: var(--pro-sp-3); }
.pro-reply-depth[data-depth="3"] { margin-inline-start: var(--pro-sp-5); }
.pro-reply-depth[data-depth="4"] { margin-inline-start: var(--pro-sp-6); }
.pro-reply-depth[data-depth="5"] { margin-inline-start: var(--pro-sp-8); }

.pro-mark-hot  { color: hsl(var(--pro-destructive)); }
.pro-mark-file,
.pro-mark-link { color: hsl(var(--pro-muted-foreground)); }

/* 목록 안 분류 — 제목 왼쪽 tint 칩. 열을 하나 안 쓰는 대신 여기 붙는다.
   색은 분류 이름을 해시해서 세 가지 중 하나로 고정한다(스킨이 data-tone 을 준다).
   같은 분류는 언제나 같은 색이고, 분류가 늘어도 팔레트가 안 늘어난다.
   글자색만 진하고 바탕은 같은 색의 11% — 칩 여러 개가 한 줄에 와도 안 시끄럽다. */
.pro-cate-link {
    display: inline-block;
    padding: 1px var(--pro-sp-2);
    border-radius: var(--pro-radius-sm);
    background: hsl(var(--pro-success) / .11);
    color: hsl(var(--pro-success));
    font-size: var(--pro-text-xs); font-weight: 700; letter-spacing: -0.01em;
    white-space: nowrap;
}
.pro-cate-link[data-tone="1"] { background: hsl(var(--pro-info) / .11);  color: hsl(var(--pro-info)); }
.pro-cate-link[data-tone="2"] { background: hsl(var(--pro-plum) / .11);  color: hsl(var(--pro-plum)); }
.pro-cate-link:hover { background: hsl(var(--pro-primary)); color: hsl(var(--pro-primary-foreground)); }
/* 공지는 tint 가 아니라 꽉 찬 액센트다. 분류 칩 사이에서 혼자 튀어야 공지로 읽힌다. */
.pro-cate-link.is-notice { background: hsl(var(--pro-primary)); color: hsl(var(--pro-primary-foreground)); }

/* 번호 칸의 「공지」 — 배지가 아니라 액센트 글자. 배지를 쓰면 제목 앞 공지 칩과
   같은 행에 상자가 둘이 되어 시끄럽다. */
.pro-col-num.is-notice { color: hsl(var(--pro-primary)); font-weight: 700; }

/* 「열람중」은 글의 중요도가 아니라 "지금 여기 있다" 는 위치 표시다. 공지와 같은
   액센트를 쓰면 둘이 구분되지 않는다 — 먹색으로 조용히 두고, 대신 행 전체에
   옅은 바탕을 깔아 좁은 화면(번호 칸이 숨는다)에서도 어느 줄인지 보이게 한다. */
.pro-col-num.is-current { color: hsl(var(--pro-foreground)); font-weight: 700; }
.pro-tbody .pro-tr.is-current,
.pro-tbody .pro-tr.is-current:hover { background: hsl(var(--pro-muted)); }
.pro-tbody .pro-tr.is-current .pro-subject-link { font-weight: 700; }

/* ---------- 빈 목록 ---------- */

.pro-tbody .pro-tr.is-empty { display: block; padding-block: var(--pro-sp-10); }

/* ---------- 좁은 화면: 표를 접는다 ----------
   grid 를 flex 로 갈아 끼우고 order 로 재배치한다.
   서버는 접속 기기를 모르며 모바일용 마크업을 따로 내지 않는다. */

/* 줄바꿈 전용 요소. 데스크톱에서는 display:none 이라 grid 자동배치가 아예 건너뛴다.
   flex 에서 "여기서부터 다음 줄" 을 만들 다른 방법이 없다 — 메타 칸 하나에
   flex-basis:100% 를 주면 그 칸이 줄을 통째로 먹어 나머지가 또 밀린다. */
.pro-row-break { display: none; }

@media (max-width: 799px) {
    .pro-thead { display: none; }

    .pro-tr {
        display: flex; flex-wrap: wrap; align-items: center;
        gap: var(--pro-sp-1) var(--pro-sp-3);
        padding: var(--pro-sp-3);
    }

    .pro-row-break { display: block; flex: 1 0 100%; height: 0; order: 4; }

    .pro-col-chk     { order: 0; }
    /* 번호 칸은 공지행이라도 숨긴다. 제목 앞 「공지」 칩이 이미 같은 말을 하고 있어
       좁은 화면에서는 둘이 나란히 붙어 두 번 읽힌다. */
    .pro-col-num     { display: none; }
    .pro-col-board   { order: 1; }
    .pro-col-subject { order: 2; flex: 1 1 8rem; }
    .pro-col-thumb   { order: 3; }
    .pro-col-author  { order: 5; max-width: 45%; }
    .pro-col-date    { order: 6; }
    .pro-col-hit     { order: 7; }
    .pro-col-comment { order: 8; }
    .pro-col-good    { order: 9; }
    .pro-col-nogood  { order: 10; }

    /* 제목은 잘라 버리지 않고 두 줄까지 흘린다. 좁을수록 제목이 중요하다. */
    .pro-subject-link {
        white-space: normal;
        display: -webkit-box; -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
    }
    /* 빈 썸네일 칸은 여백만 남기므로 지운다 */
    .pro-list-nothumb { display: none; }

    /* 머리줄이 사라졌으니 숫자에 뜻을 붙인다 */
    .pro-col-hit::before     { content: "조회 "; opacity: .7; }
    .pro-col-comment::before { content: "댓글 "; opacity: .7; font-weight: 400; }
    .pro-col-good::before    { content: "추천 "; opacity: .7; }
    .pro-col-nogood::before  { content: "비추 "; opacity: .7; }

    .pro-tbody .pro-tr.is-empty { padding-block: var(--pro-sp-8); }
}

/* 검색 패널 — 기본은 접혀 있다(뷰가 hidden 속성으로 제어) */
.pro-search-panel {
    margin-bottom: var(--pro-sp-4);
    padding: var(--pro-sp-4);
    border: 0;
    border-radius: var(--pro-radius-lg);
    background: hsl(var(--pro-card));
    box-shadow: var(--pro-shadow);
}
.pro-search-panel[hidden] { display: none; }

/* ---------- 갤러리형 목록 ---------- */

.pro-gallery { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: var(--pro-sp-4); }
@media (min-width: 480px) { .pro-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .pro-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px){ .pro-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.pro-gallery-item { border: 1px solid hsl(var(--pro-border)); border-radius: var(--pro-radius-lg); overflow: hidden; background: hsl(var(--pro-card)); transition: box-shadow var(--pro-transition), transform var(--pro-transition); }
.pro-gallery-item:hover { box-shadow: var(--pro-shadow-md); transform: translateY(-2px); }
.pro-gallery-thumb { aspect-ratio: 4 / 3; background: hsl(var(--pro-muted)); overflow: hidden; }
.pro-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pro-gallery-body { padding: var(--pro-sp-3); }
.pro-gallery-title { font-weight: 500; font-size: var(--pro-text-sm); line-height: 1.4; }
.pro-gallery-meta { margin-top: var(--pro-sp-2); font-size: var(--pro-text-xs); color: hsl(var(--pro-muted-foreground)); display: flex; gap: var(--pro-sp-2); flex-wrap: wrap; }

/* ---------- 글 읽기 ---------- */

/* 글읽기 전체가 하나의 흰 면이다. 목록의 표와 같은 규칙 — 라일락 바닥 위에
   테두리 없는 카드. 안쪽 요소(첨부·추천·이전다음·댓글폼)는 다시 상자를 그리지 않고
   muted 바탕만 쓴다. 카드 안에 카드를 그리면 마루가 아니라 shadcn 이 된다. */
/* 좌우 여백의 밑값은 sp-3(12px)이다. sp-4 로 두면 390px 화면에서
   container 16 + view 16 + 댓글폼 16 = 48px 이 양쪽에 쌓여 본문 폭이 25% 날아간다.
   3vw 램프는 그대로 두어 넓은 화면에서는 여전히 sp-8 까지 벌어진다. */
.pro-view {
    width: 100%;
    padding: var(--pro-sp-6) clamp(var(--pro-sp-3), 3vw, var(--pro-sp-8));
    border-radius: var(--pro-radius-lg);
    background: hsl(var(--pro-card));
    box-shadow: var(--pro-shadow);
}
.pro-view-header { padding-bottom: var(--pro-sp-4); border-bottom: 1px solid hsl(var(--pro-border)); margin-bottom: var(--pro-sp-5); }
.pro-view-title { font-size: var(--pro-text-xl); font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; }
.pro-view-meta { margin-top: var(--pro-sp-3); display: flex; align-items: center; gap: var(--pro-sp-3); flex-wrap: wrap; font-size: var(--pro-text-xs); color: hsl(var(--pro-muted-foreground)); }
.pro-view-meta .pro-dot { opacity: .4; }

.pro-view-meta a { color: inherit; }
.pro-view-meta a:hover { color: hsl(var(--pro-foreground)); }
.pro-view-author { font-weight: 600; color: hsl(var(--pro-foreground)); font-size: var(--pro-text-sm); }
.pro-view-avatar img { width: 1.5rem; height: 1.5rem; border-radius: 50%; object-fit: cover; }

/* 상단 버튼줄 — 좁은 화면에서는 가로로 흘려보내고, 넓으면 오른쪽 정렬 */
.pro-view-tools { display: flex; gap: var(--pro-sp-2); flex-wrap: wrap; margin-top: var(--pro-sp-4); }
@media (min-width: 640px) { .pro-view-tools { justify-content: flex-end; } }

.pro-view-images { display: flex; flex-direction: column; gap: var(--pro-sp-3); margin-bottom: var(--pro-sp-5); }
.pro-view-images img { max-width: 100%; height: auto; border-radius: var(--pro-radius-sm); }

.pro-view-signature {
    margin-bottom: var(--pro-sp-6); padding-top: var(--pro-sp-4);
    border-top: 1px dashed hsl(var(--pro-border));
    font-size: var(--pro-text-xs); color: hsl(var(--pro-muted-foreground));
}

.pro-view-content {
    padding-block: var(--pro-sp-2) var(--pro-sp-8);
    font-size: var(--pro-text-base);
    line-height: 1.75;
    word-break: break-word;
    overflow-wrap: anywhere;
}
/* 본문 이미지는 어떤 폭으로 저장돼 있든 컨테이너를 넘지 않는다.
   순정은 viewimageresize.js 로 JS 리사이즈를 하지만 CSS 로 충분하다. */
.pro-view-content img { max-width: 100%; height: auto; border-radius: var(--pro-radius-sm); }
/* 투명 PNG 가 다크 배경에서 사라지는 것을 막는다 */
:root[data-theme="dark"] .pro-view-content img { background: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .pro-view-content img { background: #fff; } }

.pro-view-content table { max-width: 100%; }
.pro-view-content iframe, .pro-view-content video { max-width: 100%; }

/* 첨부 */
.pro-files { display: flex; flex-direction: column; gap: var(--pro-sp-2); margin-bottom: var(--pro-sp-6); }
.pro-file {
    display: flex; align-items: center; gap: var(--pro-sp-3);
    padding: var(--pro-sp-3);
    border: 0;
    border-radius: var(--pro-radius-md);
    background: hsl(var(--pro-muted) / .7);
    font-size: var(--pro-text-sm);
}
.pro-file:hover { background: hsl(var(--pro-accent)); }
.pro-file-name { font-weight: 500; word-break: break-all; }
.pro-file-desc { color: hsl(var(--pro-muted-foreground)); font-size: var(--pro-text-xs); }
.pro-file-meta { margin-inline-start: auto; font-size: var(--pro-text-xs); color: hsl(var(--pro-muted-foreground)); white-space: nowrap; }

/* ---------- 이전글 / 다음글 ---------- */

.pro-view-nb { display: grid; gap: var(--pro-sp-2); margin-block: var(--pro-sp-6); }
@media (min-width: 768px) { .pro-view-nb { grid-template-columns: 1fr 1fr; } }
.pro-view-nb-item {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center;
    gap: var(--pro-sp-3);
    padding: var(--pro-sp-3) var(--pro-sp-4);
    border: 0;
    border-radius: var(--pro-radius-md);
    background: hsl(var(--pro-muted) / .7);
    font-size: var(--pro-text-sm);
    min-width: 0;
}
.pro-view-nb-item:hover { background: hsl(var(--pro-accent)); }
.pro-view-nb-dir { color: hsl(var(--pro-muted-foreground)); font-size: var(--pro-text-xs); white-space: nowrap; }
.pro-view-nb-subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pro-view-nb-date { color: hsl(var(--pro-muted-foreground)); font-size: var(--pro-text-xs); white-space: nowrap; }

/* 추천/비추천 */
.pro-vote { display: flex; justify-content: center; gap: var(--pro-sp-3); padding-block: var(--pro-sp-6); }
.pro-vote-btn { display: flex; flex-direction: column; align-items: center; gap: var(--pro-sp-1); min-width: 5rem; padding: var(--pro-sp-3); border: 0; border-radius: var(--pro-radius-lg); cursor: pointer; background: hsl(var(--pro-muted) / .7); color: inherit; font-family: inherit; transition: background var(--pro-transition), color var(--pro-transition); }
.pro-vote-btn:hover { background: hsl(var(--pro-primary) / .1); color: hsl(var(--pro-primary)); }
.pro-vote-count { font-size: var(--pro-text-lg); font-weight: 700; }
.pro-vote-label { font-size: var(--pro-text-xs); color: hsl(var(--pro-muted-foreground)); }
/* 비회원처럼 누를 수 없는 상태 — 숫자만 보여준다 */
.pro-vote-btn.is-static { cursor: default; opacity: .7; }
.pro-vote-btn.is-static:hover { background: transparent; }

/* ---------- 댓글 ---------- */

.pro-comments { margin-top: var(--pro-sp-8); }
.pro-comments-head { display: flex; align-items: center; gap: var(--pro-sp-2); margin-bottom: var(--pro-sp-4); font-weight: 600; }

.pro-comment { padding: var(--pro-sp-4) 0; border-top: 1px solid hsl(var(--pro-border)); }
.pro-comment-head { display: flex; align-items: center; gap: var(--pro-sp-2); font-size: var(--pro-text-xs); color: hsl(var(--pro-muted-foreground)); margin-bottom: var(--pro-sp-2); }
.pro-comment-author { font-weight: 600; color: hsl(var(--pro-foreground)); font-size: var(--pro-text-sm); }
.pro-comment-body { font-size: var(--pro-text-sm); line-height: 1.7; word-break: break-word; overflow-wrap: anywhere; }
.pro-comment-actions { margin-top: var(--pro-sp-2); display: flex; gap: var(--pro-sp-2); }

/* 대댓글 들여쓰기 — 5단까지. 좁은 화면에서는 들여쓰기 폭을 줄인다. */
.pro-comment[data-depth="1"] { padding-inline-start: var(--pro-sp-4); }
.pro-comment[data-depth="2"] { padding-inline-start: var(--pro-sp-8); }
.pro-comment[data-depth="3"] { padding-inline-start: var(--pro-sp-10); }
.pro-comment[data-depth="4"] { padding-inline-start: var(--pro-sp-12); }
.pro-comment[data-depth="5"] { padding-inline-start: var(--pro-sp-12); }
@media (max-width: 639px) {
    .pro-comment[data-depth="1"] { padding-inline-start: var(--pro-sp-3); }
    .pro-comment[data-depth="2"] { padding-inline-start: var(--pro-sp-5); }
    .pro-comment[data-depth="3"],
    .pro-comment[data-depth="4"],
    .pro-comment[data-depth="5"] { padding-inline-start: var(--pro-sp-6); }
}
.pro-comment-secret { color: hsl(var(--pro-muted-foreground)); font-style: italic; }
.pro-comment-secret-mark { color: hsl(var(--pro-muted-foreground)); }
.pro-comment-total { color: hsl(var(--pro-muted-foreground)); font-weight: 400; }
.pro-comment-avatar img { width: 1.25rem; height: 1.25rem; border-radius: 50%; object-fit: cover; }
/* 댓글 메뉴는 머리줄 오른쪽 끝으로 민다 */
.pro-comment-menu { margin-inline-start: auto; }
.pro-comment-body a.s_cmt { color: hsl(var(--pro-info)); text-decoration: underline; }

/* 답변·수정 폼이 옮겨 오는 자리 */
.pro-comment-slot:empty { display: none; }

/* ---------- 댓글 입력폼 ---------- */

.pro-comment-form {
    display: flex; flex-direction: column; gap: var(--pro-sp-3);
    margin-top: var(--pro-sp-4);
    padding: var(--pro-sp-4);
    border: 0;
    border-radius: var(--pro-radius-lg);
    background: hsl(var(--pro-muted) / .7);
}
/* ★ 슬롯 안에서는 상자를 아예 그리지 않는다 — 배경뿐 아니라 패딩도 뺀다.
   board.js 가 로드 직후 폼을 무조건 #pro-cwrite(=.pro-comment-slot)로 옮기므로
   이 규칙은 답변·수정폼만이 아니라 기본 위치의 댓글쓰기 폼에도 늘 걸린다.
   그래서 muted 바탕은 이미 안 보이는데 패딩 16px 만 남아, 390px 화면에서
   container 16 + view 12 + 폼 16 = 44px 이 「아무 상자도 없는」 빈 여백이 됐다.
   배경이 없으면 안쪽 패딩도 없어야 카드 본문선과 입력칸이 맞는다.
   위쪽 간격은 .pro-comment-form 의 margin-top 이 이미 준다. */
.pro-comment-slot > .pro-comment-form { background: transparent; padding: 0; }

/* 이름·비밀번호는 줄바꿈되면 intrinsic 폭(≈200px)에 머물러 본문 textarea 보다
   좁아 보인다. 좁은 화면에서만 한 줄씩 꽉 채운다. */
@media (max-width: 639px) {
    .pro-comment-form .pro-row > .pro-field { flex: 1 1 100%; min-width: 0; }
}
.pro-comment-form-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--pro-sp-3); flex-wrap: wrap; }
.pro-check-label { display: inline-flex; align-items: center; gap: var(--pro-sp-2); font-size: var(--pro-text-sm); cursor: pointer; }

/* ---------- 글쓰기 폼 (추가분) ---------- */

.pro-write-wrap { width: 100%; }
.pro-write-subject { display: flex; gap: var(--pro-sp-2); align-items: center; }
.pro-write-subject .pro-input { flex: 1 1 auto; min-width: 0; }
.pro-write-options { display: flex; gap: var(--pro-sp-4); flex-wrap: wrap; border: 0; padding: 0; }
.pro-write-file { display: flex; gap: var(--pro-sp-2); flex-wrap: wrap; align-items: center; margin-bottom: var(--pro-sp-2); }
.pro-write-file .pro-input { flex: 1 1 12rem; min-width: 0; }
.pro-write-file-del { flex: 1 1 100%; color: hsl(var(--pro-destructive)); font-size: var(--pro-text-xs); }

/* 순정 js/autosave.js 가 여는 임시저장 목록 */
.pro-autosave-pop {
    display: none; position: absolute; z-index: 40;
    margin-top: var(--pro-sp-2); padding: var(--pro-sp-3);
    min-width: 16rem; max-width: 100%;
    background: hsl(var(--pro-popover)); color: hsl(var(--pro-popover-foreground));
    border: 1px solid hsl(var(--pro-border)); border-radius: var(--pro-radius-md);
    box-shadow: var(--pro-shadow-md);
    font-size: var(--pro-text-sm);
}
.pro-autosave-pop ul { margin: var(--pro-sp-2) 0; display: flex; flex-direction: column; gap: var(--pro-sp-1); }

/* ---------- 글쓰기 폼 ---------- */

/* 글쓰기도 글읽기와 같은 흰 면 위에 올린다. 세 화면(list·view·write)이 전부
   「라일락 바닥 + 테두리 없는 흰 면」한 규칙을 쓴다. */
.pro-write {
    display: flex; flex-direction: column; gap: var(--pro-sp-5);
    padding: var(--pro-sp-6) clamp(var(--pro-sp-3), 3vw, var(--pro-sp-8));
    border-radius: var(--pro-radius-lg);
    background: hsl(var(--pro-card));
    box-shadow: var(--pro-shadow);
}
.pro-write-actions { display: flex; gap: var(--pro-sp-2); justify-content: flex-end; flex-wrap: wrap; }

/* SmartEditor2 는 반응형이 아니다. 컨테이너가 넘치지 않게 가두고,
   툴바만 에디터 안에서 가로 스크롤하게 한다. 페이지는 절대 밀리지 않는다. */
.pro-editor-shell { min-width: 0; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pro-editor-shell iframe { max-width: 100%; }

/* 에디터를 안 쓰는 게시판에서는 순정 editor_html()(lib/editor.lib.php)이 클래스 없는
   <textarea> 를 그대로 뱉는다. 그대로 두면 이 칸만 브라우저 기본 테두리로 남아
   같은 폼의 다른 입력칸과 따로 논다 — 실제로 그렇게 보였다.
   .pro-textarea 와 같은 값을 여기서 다시 준다(마크업을 못 건드리는 자리이므로). */
.pro-editor-shell > textarea {
    width: 100%;
    min-height: 18rem;
    padding: var(--pro-sp-3);
    border: 1px solid hsl(var(--pro-input));
    border-radius: var(--pro-radius-md);
    background: hsl(var(--pro-card));
    color: hsl(var(--pro-foreground));
    font-family: inherit;
    font-size: var(--pro-text-sm);
    line-height: var(--pro-leading-normal);
    resize: vertical;
    transition: border-color var(--pro-transition), box-shadow var(--pro-transition);
}
.pro-editor-shell > textarea:focus {
    outline: none;
    border-color: hsl(var(--pro-ring));
    box-shadow: 0 0 0 3px hsl(var(--pro-ring) / .15);
}

/* ---------- 검색 ---------- */

/* 검색은 한 덩어리 pill 이다. 안쪽 select·input 은 테두리를 지우고 껍데기 하나만
   그린다 — 상자 세 개가 나란히 있으면 마루의 「선 안 쓰기」와 어긋난다. */
.pro-search {
    display: flex; align-items: center; flex: none;
    border-radius: var(--pro-radius-btn);
    background: hsl(var(--pro-card));
    box-shadow: var(--pro-shadow-sm);
    padding: 3px 3px 3px var(--pro-sp-2);
}
.pro-search .pro-select,
.pro-search .pro-input {
    /* background 단축을 쓰면 안 된다. .pro-select 의 셰브론은 background-image 라
       단축이 그것까지 지워 화살표 없는 select 가 된다. 색만 따로 끈다. */
    /* 껍데기 안쪽 요소는 껍데기 모서리에서 padding(3px)만큼 뺀 값이어야
       두 모서리가 동심으로 보인다. 같은 값을 주면 안쪽이 각져 보인다. */
    border: 0; background-color: transparent; box-shadow: none;
    min-height: 2rem; border-radius: calc(var(--pro-radius-btn) - 3px);
}
.pro-search .pro-select:focus,
.pro-search .pro-input:focus { box-shadow: none; }
.pro-search:focus-within { box-shadow: 0 0 0 2px hsl(var(--pro-ring) / .3), var(--pro-shadow-sm); }
.pro-search .pro-select { width: auto; flex: none; padding-inline: var(--pro-sp-2) var(--pro-sp-6); background-position: right var(--pro-sp-1) center; }
.pro-search .pro-input  { flex: 0 1 9rem; min-width: 0; padding-inline: var(--pro-sp-2); }
.pro-search .pro-btn    { flex: none; border-radius: calc(var(--pro-radius-btn) - 3px); }

/* 패널(통합검색·FAQ·새글) 안에서는 같은 알약이 폭을 다 쓰는 「검색 바」로 쓰인다.
   ★ 목록 밑의 알약과 달리 여기는 select 이 둘씩 붙기도 해서 한 줄에 다 안 들어간다.
      flex-wrap 이 없으면 줄바꿈을 못 해 통째로 넘치고(새글에서 「회원」칸이 잘렸다),
      검색어 칸은 flex: 0 1 이라 남는 폭을 못 먹어 오른쪽이 비었다(FAQ에서 플레이스홀더가
      잘렸다). 목록 밑 알약은 한 줄짜리 그대로 두고 패널 안에서만 두 성질을 바꾼다. */
.pro-search-panel .pro-search { flex-wrap: wrap; gap: var(--pro-sp-1); }
.pro-search-panel .pro-search .pro-input { flex: 1 1 9rem; }

@media (max-width: 560px) {
    .pro-search { flex: 1 1 100%; }
    .pro-board-foot > .pro-search { margin-inline-start: 0; }
    /* 알약이 폭을 다 쓰는 상태에서는 검색어 칸도 남는 폭을 먹어야 한다.
       안 그러면 9rem 에서 멈춰 버튼 오른쪽에 죽은 여백이 68px 남는다. */
    .pro-search .pro-input { flex: 1 1 9rem; }
}

/* ==========================================================================
   부가 화면 — 통합검색 / FAQ / 내용
   ========================================================================== */

/* 검색 옵션(모두 포함 / 하나라도 포함)은 알약 바깥에서 한 줄을 다 쓴다.
   ★ 예전에는 이 fieldset 이 .pro-search(알약) 안의 플렉스 아이템이었고 flex: 1 0 100%
      로 「한 줄 차지」를 노렸는데, .pro-search 에 flex-wrap 이 없어 줄바꿈이 아예 불가능했다.
      그래서 390px 에서 알약이 x=-288 w=271 로 밀려 나가고 옵션은 오른쪽 632px 까지
      삐져나가 「모두 포함」이 잘렸다. 지금은 검색폼(.pro-search-form)이 알약과 옵션을
      세로로 쌓으므로 flex-basis 장난이 필요 없다. */
.pro-search-form { display: block; }
.pro-search-form > .pro-search { width: 100%; }
.pro-search-op { border: 0; padding: 0; margin: var(--pro-sp-3) 0 0; }
.pro-search-op legend { padding: 0; }

.pro-search-board { margin-bottom: var(--pro-sp-8); }
.pro-search-board-title {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--pro-sp-3);
    padding-bottom: var(--pro-sp-2); margin-bottom: var(--pro-sp-2);
    border-bottom: 1px solid hsl(var(--pro-border));
    font-size: var(--pro-text-base); font-weight: 600;
}

.pro-search-item { padding-block: var(--pro-sp-4); border-bottom: 1px solid hsl(var(--pro-border)); }
.pro-search-item-title { font-size: var(--pro-text-base); font-weight: 500; line-height: 1.4; display: flex; align-items: baseline; gap: var(--pro-sp-2); flex-wrap: wrap; }
.pro-search-item-body {
    margin-top: var(--pro-sp-2);
    font-size: var(--pro-text-sm); line-height: 1.7;
    color: hsl(var(--pro-muted-foreground));
    /* 발췌가 길어도 세 줄까지만 */
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    overflow-wrap: anywhere;
}
.pro-search-item-meta { margin-top: var(--pro-sp-2); font-size: var(--pro-text-xs); color: hsl(var(--pro-muted-foreground)); display: flex; align-items: center; gap: var(--pro-sp-2); flex-wrap: wrap; }
/* 순정 search_font() 가 검색어를 감싸는 클래스 */
.sch_word { background: hsl(var(--pro-warning) / .3); border-radius: var(--pro-radius-sm); padding: 0 .125em; }

/* ---------- FAQ ---------- */

.pro-faq-item { border-bottom: 1px solid hsl(var(--pro-border)); }
.pro-faq-q {
    display: flex; align-items: baseline; gap: var(--pro-sp-3);
    padding: var(--pro-sp-4) var(--pro-sp-1);
    cursor: pointer; list-style: none;
    font-weight: 500;
}
.pro-faq-q::-webkit-details-marker { display: none; }
.pro-faq-q:hover { background: hsl(var(--pro-muted) / .4); }
.pro-faq-q-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
/* 펼침 표시는 삼각형 하나로 충분하다. 아이콘 폰트를 쓰지 않는다. */
.pro-faq-q::after {
    content: ""; flex: none; width: .5rem; height: .5rem;
    border-right: 2px solid hsl(var(--pro-muted-foreground));
    border-bottom: 2px solid hsl(var(--pro-muted-foreground));
    transform: rotate(45deg); transition: transform var(--pro-transition);
    align-self: center;
}
.pro-faq-item[open] > .pro-faq-q::after { transform: rotate(-135deg); }

.pro-faq-a { display: flex; gap: var(--pro-sp-3); padding: 0 var(--pro-sp-1) var(--pro-sp-4); }
.pro-faq-a .pro-view-content { padding: 0; flex: 1 1 auto; min-width: 0; }

.pro-faq-mark {
    flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem; border-radius: var(--pro-radius-sm);
    background: hsl(var(--pro-muted)); color: hsl(var(--pro-muted-foreground));
    font-size: var(--pro-text-xs); font-weight: 700;
}

/* ---------- 내용 페이지 ---------- */

.pro-content { width: 100%; }

/* 순정이 만들어 주는 <select>(그룹 선택 등)는 우리 클래스를 달고 오지 않는다.
   패널 안의 모든 select 이 같은 모양을 갖도록 요소 단위로 한 번 더 잡아 준다. */
.pro-search-panel select,
.pro-search select {
    height: 2.25rem;
    padding-inline: var(--pro-sp-3);
    border: 1px solid hsl(var(--pro-border));
    border-radius: var(--pro-radius-md);
    background: hsl(var(--pro-background));
    color: hsl(var(--pro-foreground));
    font-family: inherit;
    font-size: var(--pro-text-sm);
    max-width: 12rem;
}