/* 사이드바 위젯 — 인기검색어 · 최근 댓글 · 접속자집계

   community-header.css 가 800줄을 넘겨 갈라 놓은 것이다. 규칙을 옮기지 않고 자르기만
   했으므로, 로더가 원래 순서대로 이어서 실으면 어느 선언이 이기는지가
   달라지지 않는다. */

/* 시안은 테두리 없는 텍스트 링크다. 다만 시안 그대로는 높이가 18px 라
   WCAG 2.2 AA 의 24 CSS px 최소 타깃에 못 미쳐, 모양만 따르고
   세로 여백으로 타깃 크기는 지킨다. */
.clarity-sidebar .clarity-sidebar-head-link { display: inline-flex; min-width: 0; min-height: 1.75rem; flex: none; align-items: center; justify-content: center; gap: .3rem; border-radius: .5rem; color: color-mix(in oklab, var(--color-base-content) 50%, transparent); font-size: .7rem; font-weight: 600; transition: color .2s ease; }
.clarity-sidebar .clarity-sidebar-head-link:hover, .clarity-sidebar .clarity-sidebar-head-link:focus-visible { background: transparent; color: var(--clarity-primary); }
.clarity-sidebar .clarity-sidebar-head-link-text { padding-inline: 0; }
body.clarity-page .clarity-sidebar .clarity-popular-search-link .fa { color: inherit; font-size: .7rem; }
/* 시안은 상태 표시를 알약이 아니라 점 하나 + 회색 글씨로 둔다.
   위젯 제목 옆에서 배지가 파랗게 뜨면 정작 수치보다 먼저 눈에 걸린다. */
.clarity-sidebar .clarity-sidebar-status { display: inline-flex; min-height: 1.75rem; flex: none; align-items: center; gap: .4rem; border-radius: 0; background: none; color: color-mix(in oklab, var(--color-base-content) 50%, transparent); padding-inline: 0; font-size: .66rem; font-weight: 700; white-space: nowrap; }
.clarity-sidebar .clarity-sidebar-status i { width: .45rem; height: .45rem; border-radius: 50%; background: #16A34A; box-shadow: 0 0 0 3px color-mix(in oklab, #16A34A 20%, transparent); }
.clarity-sidebar .clarity-popular-widget ul { display: grid; width: 100%; min-width: 0; gap: 0; margin: 0; padding: .25rem 1.25rem 1.25rem; list-style: none; }
.clarity-sidebar .clarity-popular-widget li { min-width: 0; border-top: 1px solid var(--clarity-border); color: var(--clarity-text-soft); font-size: .8125rem; }
.clarity-sidebar .clarity-popular-widget li:first-child { border-top: 0; }
.clarity-sidebar .clarity-popular-widget a { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; gap: .7rem; align-items: center; overflow: hidden; border-radius: 0; padding: .65rem 0; color: inherit; font-size: .82rem; font-weight: 600; line-height: 1.4; transition: color .2s ease; }
.clarity-sidebar .clarity-popular-widget a:hover, .clarity-sidebar .clarity-popular-widget a:focus-visible { background: transparent; color: var(--clarity-primary); }
.clarity-sidebar .clarity-popular-rank { color: var(--clarity-primary); font-size: .8rem; font-variant-numeric: tabular-nums; font-weight: 800; }
.clarity-sidebar .clarity-popular-word { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clarity-sidebar .clarity-popular-widget a > .fa { color: var(--clarity-muted); font-size: .75rem; }
.clarity-sidebar .clarity-popular-empty { padding: .75rem .25rem 0; border-top: 0; color: var(--clarity-muted); font-size: .75rem; }

/* 최근 댓글 위젯. 인기검색어 위젯과 같은 목록 리듬을 쓰되, 본문 2줄 + 메타 1줄 구조. */
.clarity-sidebar .clarity-comment-widget ul { display: grid; width: 100%; min-width: 0; gap: 0; margin: 0; padding: .25rem 1.25rem 1.25rem; list-style: none; }
.clarity-sidebar .clarity-comment-widget li { min-width: 0; border-top: 1px solid var(--clarity-border); }
.clarity-sidebar .clarity-comment-widget li:first-child { border-top: 0; }
.clarity-sidebar .clarity-comment-link { display: grid; min-width: 0; gap: .3rem; overflow: hidden; border-radius: 0; padding: .7rem 0; color: inherit; }
.clarity-sidebar .clarity-comment-link:hover .clarity-comment-excerpt,
.clarity-sidebar .clarity-comment-link:focus-visible .clarity-comment-excerpt { color: var(--clarity-primary); }
.clarity-sidebar .clarity-comment-link:focus-visible { outline: 2px solid var(--clarity-primary); outline-offset: 2px; }
.clarity-sidebar .clarity-comment-excerpt {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    color: color-mix(in oklab, var(--color-base-content) 82%, transparent);
    font-size: .8rem;
    line-height: 1.45;
    word-break: keep-all;
    transition: color .2s ease;
}
.clarity-sidebar .clarity-comment-meta { display: inline-flex; min-width: 0; align-items: center; gap: .45rem; color: color-mix(in oklab, var(--color-base-content) 45%, transparent); font-size: .66rem; }
.clarity-sidebar .clarity-comment-board { flex: none; border: 1px solid var(--clarity-border); border-radius: 999px; background: var(--clarity-surface-soft); padding: .1rem .4rem; color: inherit; font-weight: 700; white-space: nowrap; }
.clarity-sidebar .clarity-comment-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clarity-sidebar .clarity-comment-meta time { flex: none; font-variant-numeric: tabular-nums; }
.clarity-sidebar .clarity-comment-empty { padding: .75rem .25rem 0; border-top: 0; color: var(--clarity-muted); font-size: .75rem; }
/* 접속자집계: 오늘을 리드 수치로 세우고 최고 기록 대비 비율을 함께 보여준다.
   숫자 네 개를 같은 크기로 나열하면 무엇을 봐야 하는지가 드러나지 않는다. */
.clarity-sidebar .clarity-visit-widget .clarity-visit-stats { display: grid; gap: .8rem; margin: 0 1.25rem 1.25rem; padding: 0; border: 0; background: none; }
.clarity-sidebar .clarity-visit-widget .clarity-visit-stats dt {
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--clarity-muted);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .02em;
}
.clarity-sidebar .clarity-visit-widget .clarity-visit-stats dd { margin: 0; padding: 0; border: 0; font-variant-numeric: tabular-nums; }

.clarity-sidebar .clarity-visit-widget .clarity-visit-lead dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin-top: .15rem; }
.clarity-sidebar .clarity-visit-widget .clarity-visit-figure {
    color: var(--clarity-text);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.05;
}
/* 증감 방향은 화살표와 보조 텍스트로도 전달한다. 색만으로 구분하지 않는다. */
.clarity-sidebar .clarity-visit-widget .clarity-visit-delta {
    display: inline-flex;
    align-items: center;
    gap: .22rem;
    padding: .14rem .45rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
}
.clarity-sidebar .clarity-visit-widget .clarity-visit-delta .fa { font-size: .6rem; }
.clarity-sidebar .clarity-visit-widget .clarity-visit-delta-down {
    border-color: color-mix(in oklab, var(--color-error) 30%, transparent);
    background: color-mix(in oklab, var(--color-error) 10%, transparent);
    color: var(--color-error);
}
.clarity-sidebar .clarity-visit-widget .clarity-visit-delta-up {
    border-color: color-mix(in oklab, #15803d 30%, transparent);
    background: color-mix(in oklab, #15803d 10%, transparent);
    color: #15803d;
}
html[data-theme="dark"] .clarity-sidebar .clarity-visit-widget .clarity-visit-delta-up { color: #4ade80; }

.clarity-sidebar .clarity-visit-widget .clarity-visit-peak { padding-top: .8rem; border-top: 1px solid var(--clarity-border); }
.clarity-sidebar .clarity-visit-widget .clarity-visit-peak dt { float: left; }
.clarity-sidebar .clarity-visit-widget .clarity-visit-peak dd { display: grid; gap: .4rem; }
.clarity-sidebar .clarity-visit-widget .clarity-visit-peak-value { color: var(--clarity-text); font-size: .95rem; font-weight: 800; text-align: right; }
.clarity-sidebar .clarity-visit-widget .clarity-visit-bar { display: block; width: 100%; height: .35rem; }
.clarity-sidebar .clarity-visit-widget .clarity-visit-caption { color: var(--clarity-muted); font-size: .66rem; }
.clarity-sidebar .clarity-visit-widget .clarity-visit-caption b { color: var(--clarity-primary); font-weight: 800; }

.clarity-sidebar .clarity-visit-widget .clarity-visit-cell {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    padding-top: .55rem;
    border-top: 1px solid var(--clarity-border);
}
.clarity-sidebar .clarity-visit-widget .clarity-visit-cell dd { color: var(--clarity-text); font-size: .95rem; font-weight: 800; }
.clarity-sidebar .clarity-visit-widget .btn_admin { position: absolute; top: 1.2rem; right: 1.1rem; display: inline-grid; width: 1.5rem; height: 1.5rem; place-items: center; color: color-mix(in oklab, var(--color-base-content) 50%, transparent); }
.clarity-sidebar .clarity-visit-widget .btn_admin:hover { color: var(--clarity-primary); }
body.clarity-page .clarity-visit-widget .clarity-sidebar-status { margin-right: 2rem; }
.clarity-sidebar #popular.clarity-sidebar-widget-empty { display: none; }

body.clarity-page .clarity-board-widget .clarity-sidebar-widget-head, body.clarity-page .clarity-plaza-widget .clarity-sidebar-widget-head { padding: 0 0 .9rem; }
body.clarity-page .clarity-board-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
body.clarity-page .clarity-board-link { display: flex; min-width: 0; min-height: 2.75rem; align-items: center; gap: .45rem; border: 1px solid var(--clarity-border); border-radius: .625rem; background: var(--clarity-surface); color: var(--clarity-text-soft); padding: .4rem .5rem; font-size: .75rem; font-weight: 700; line-height: 1.25; transition: background-color .16s, border-color .16s, color .16s, transform .16s; }
body.clarity-page .clarity-board-link:hover, body.clarity-page .clarity-board-link:focus-visible { border-color: color-mix(in srgb, var(--clarity-primary) 32%, var(--clarity-border)); background: var(--clarity-primary-soft); color: var(--clarity-primary); }
body.clarity-page .clarity-board-link:active { transform: translateY(1px); }
body.clarity-page .clarity-board-link-icon { display: inline-grid; width: 1.5rem; height: 1.5rem; flex: none; place-items: center; border-radius: .45rem; background: var(--clarity-surface-tint); color: var(--clarity-primary); font-size: .7rem; }
body.clarity-page .clarity-board-link > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.clarity-page .clarity-board-link-arrow { margin-left: auto; color: var(--clarity-muted); font-size: .65rem; }
body.clarity-page .clarity-plaza-links { display: grid; gap: .25rem; margin: 0; }
body.clarity-page .clarity-plaza-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .75rem; min-height: 2.5rem; border-radius: .5rem; padding: .35rem .5rem; }
body.clarity-page .clarity-plaza-row:hover { background: var(--clarity-surface-soft); }
body.clarity-page .clarity-plaza-row dt, body.clarity-page .clarity-plaza-row dd { min-width: 0; margin: 0; }
body.clarity-page .clarity-plaza-row dt { display: flex; align-items: center; gap: .55rem; color: var(--clarity-text-soft); font-size: .75rem; }
body.clarity-page .clarity-plaza-row dd { color: var(--clarity-primary); font-size: .75rem; font-weight: 800; text-align: right; }
body.clarity-page .clarity-plaza-row dd a { display: inline-flex; align-items: center; gap: .35rem; color: inherit; }
body.clarity-page .clarity-plaza-row dd a:hover, body.clarity-page .clarity-plaza-row dd a:focus-visible { color: var(--clarity-primary-hover); }
body.clarity-page .clarity-plaza-row dd .fa { font-size: .65rem; }
/* 설문조사. 시안(index-uiux.html)은 다른 사이드바 위젯과 같은 상자를 쓰고
   여백을 상자 한 곳에만 준다. 예전에는 header 에 margin, p·ul·버튼에 각각
   padding 1.25rem 을 따로 붙여 두어 한 곳만 건드려도 줄이 어긋났다.
   결과보기는 알약이 아니라 회색 텍스트 링크이고, 관리 톱니는 떠 있지 않고
   옆에 붙는다. */
body.clarity-page .clarity-sidebar #poll { position: relative; margin: 0; border: 1px solid var(--clarity-border); background: var(--clarity-surface); padding: 1.15rem 1.25rem 1.25rem; }
body.clarity-page .clarity-sidebar #poll header { display: flex; align-items: center; gap: .6rem; margin: 0 0 .8rem; border-bottom: 1px solid var(--clarity-border); padding: 0 0 .8rem; }
body.clarity-page .clarity-sidebar #poll header h2 { float: none; display: block; flex: 1 1 auto; color: var(--clarity-text); font-size: .95rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.4; }
body.clarity-page .clarity-sidebar #poll header .btn_result { display: inline-flex; min-height: 1.75rem; float: none; height: auto; align-items: center; border: 0; border-radius: 0; background: none; color: var(--clarity-muted); padding: 0; font-size: .68rem; font-weight: 600; line-height: 1.2; transition: color .2s ease; }
body.clarity-page .clarity-sidebar #poll header .btn_result:hover, body.clarity-page .clarity-sidebar #poll header .btn_result:focus-visible { background: none; color: var(--clarity-primary); }
body.clarity-page .clarity-sidebar #poll header .btn_admin { position: static; display: inline-grid; width: 1.75rem; height: 1.75rem; place-items: center; margin: 0; color: var(--clarity-muted); }
body.clarity-page .clarity-sidebar #poll header .btn_admin:hover { color: var(--clarity-primary); }
body.clarity-page .clarity-sidebar #poll .poll_con > p:not(.poll_error) { margin: 0 0 .75rem; padding: 0; color: var(--clarity-text); font-size: .82rem; font-weight: 600; line-height: 1.5; }
body.clarity-page .clarity-sidebar #poll ul { display: grid; gap: .15rem; margin: 0; padding: 0; }
/* 시안의 보기 한 줄은 44px 다. 이 스킨은 19px 라 WCAG 2.2 AA 의 24 CSS px
   최소 타깃에 미달했다. 시안 높이를 그대로 쓰면서 그 문제도 함께 없앤다. */
body.clarity-page .clarity-sidebar #poll li { padding: 0; color: var(--clarity-text-soft); font-size: .8rem; }
body.clarity-page .clarity-sidebar #poll .chk_box { position: relative; display: block; }
body.clarity-page .clarity-sidebar #poll .chk_box input[type="radio"] + label { display: flex; min-height: 2.75rem; align-items: center; gap: .6rem; border-radius: .5rem; padding: .5rem .65rem; color: inherit; cursor: pointer; transition: background .18s ease; }
body.clarity-page .clarity-sidebar #poll .chk_box input[type="radio"] + label:hover { background: var(--clarity-surface-soft); }
/* 레거시 스킨 CSS 는 표식을 label 안에 절대배치한다. 줄 높이를 키우면 좌상단에
   남아 세로 가운데를 다시 잡아 줘야 했다. 시안처럼 흐름 안의 원으로 돌린다.
   static 이 아니라 relative 인 이유가 있다 — 안쪽 점이 absolute + inset 이라,
   원이 위치 기준을 갖지 않으면 .chk_box 에 붙어 줄 전체를 덮는 막대가 된다. */
body.clarity-page .clarity-sidebar #poll .chk_box input[type="radio"] + label span { position: relative; top: auto; left: auto; width: 1.05rem; height: 1.05rem; flex: none; transform: none; border: 2px solid var(--clarity-border-strong); border-radius: 50%; background: var(--clarity-surface); }
/* 고른 항목은 색만 바꾸면 눈에 띄지 않는다. 시안처럼 옅은 바탕을 함께 깐다. */
body.clarity-page .clarity-sidebar #poll .chk_box input[type="radio"]:checked + label { background: var(--clarity-surface-soft); color: var(--clarity-text); font-weight: 700; }
body.clarity-page .clarity-sidebar #poll .chk_box input[type="radio"]:checked + label span { border-color: var(--clarity-primary); }
body.clarity-page .clarity-sidebar #poll .chk_box input[type="radio"]:checked + label span:before { content: ""; position: absolute; inset: 2px; width: auto; height: auto; margin: 0; border-radius: 50%; background: var(--clarity-primary); }
/* 입력이 화면에서 숨겨져 있어 키보드 포커스가 보이지 않는다. 라벨에 링을 돌려준다. */
body.clarity-page .clarity-sidebar #poll .chk_box input[type="radio"]:focus-visible + label { outline: 2px solid var(--clarity-primary); outline-offset: 2px; }
/* 항목을 안 고르고 누르면 예전에는 alert 창이 떴다. 시안은 폼 안에서 알린다. */
body.clarity-page .clarity-sidebar #poll .poll_con > p.poll_error { margin: .5rem 0 0; color: var(--color-error, #dc2626); font-size: .72rem; font-weight: 600; }
body.clarity-page .clarity-sidebar #poll_btn { margin-top: .9rem; padding: 0; }
body.clarity-page .clarity-sidebar #poll_btn .btn_poll { width: 100%; height: 2.75rem; border: 0; border-radius: .5rem; background: var(--clarity-primary); color: var(--clarity-primary-ink); cursor: pointer; font-size: .8rem; font-weight: 700; line-height: 2.75rem; transition: background .2s ease; }
body.clarity-page .clarity-sidebar #poll_btn .btn_poll:hover { background: var(--clarity-primary-hover); }

.clarity-home-empty-summary { display: flex; min-height: 5rem; align-items: center; gap: .75rem; padding: 1rem 1.25rem; color: var(--clarity-muted); }
.clarity-home-empty-summary-icon { display: inline-grid; width: 2.25rem; height: 2.25rem; flex: none; place-items: center; border-radius: .625rem; background: var(--clarity-primary-soft); color: var(--clarity-primary); font-size: .875rem; }
.clarity-home-empty-summary-copy { min-width: 0; font-size: .8125rem; }
.clarity-latest-empty-state { display: flex; min-height: 7rem; align-items: center; justify-content: center; gap: .875rem; padding: 1rem 1.25rem; text-align: left; }
.clarity-latest-empty-icon { display: inline-grid; width: 2.75rem; height: 2.75rem; flex: none; place-items: center; border-radius: .75rem; background: var(--clarity-primary-soft); color: var(--clarity-primary); font-size: 1rem; }
.clarity-latest-empty-copy { min-width: 0; }

.clarity-top-button { opacity: 0; pointer-events: none; transform: translateY(.5rem); }
.clarity-top-button.is-visible { opacity: 1 !important; pointer-events: auto; transform: translateY(0); }

/* Tailwind's font-black is intentionally softened for the editorial card hierarchy. */
body.clarity-page .clarity-reference-panel .font-black { font-weight: 800; }
body.clarity-page .clarity-reference-panel h1.font-black, body.clarity-page .clarity-reference-panel h2.font-black { line-height: 1.6; }
.clarity-reference-panel .clarity-reference-latest > .clarity-latest > header { display: none; }
.clarity-reference-panel .clarity-reference-latest > .clarity-latest { padding: .35rem 1.25rem 1rem; }
.clarity-reference-panel .clarity-latest-list { border-top: 0; }
/* daisyUI .menu 를 걷어낸 자리. .menu 가 ul·li·항목의 display 와 gap 을
   대신 잡아 주고 있었지만, 그 대가로 li 자식 전체에 hover 배경과 pointer
   커서를 얹어 글쓴이·날짜까지 누를 수 있는 것처럼 보이게 했다. 같은 누수를
   drawer 에서도 겪었다. 필요한 배치만 직접 적는다. */
.clarity-latest-list { display: flex; width: 100%; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.clarity-latest-list > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.clarity-latest-subject { display: flex; min-width: 0; align-items: center; gap: .5rem; }
.clarity-latest-subject .truncate { min-width: 0; }
.clarity-latest-meta { display: flex; align-items: center; gap: .5rem; }
/* 사이드뷰를 켜면 이름이 아이콘을 품은 inline-flex 가 된다. 그것을 감싼
   span 이 인라인이라 글자 baseline 아래로 여백이 생기고, 그만큼 이름이
   날짜보다 위로 밀렸다. span 도 flex 로 두어 높이를 내용에 맞춘다.
   메타 글자가 11px 로 작아 아이콘도 1rem 으로 줄인다. */
.clarity-latest-meta > span { display: inline-flex; min-width: 0; align-items: center; }
.clarity-latest-meta .profile_img { width: 1rem; height: 1rem; margin-right: .3rem; }
.clarity-reference-panel .clarity-latest-list li { grid-template-columns: minmax(0, 1fr) auto; min-height: 0; padding: 0; }
.clarity-reference-panel .clarity-latest-subject { padding-block: .75rem; font-weight: 400; }
.clarity-reference-panel .clarity-latest-meta { align-items: center; gap: .5rem; padding-block: .5rem; }
.clarity-board-grid { align-items: start; }

/* 갤러리 패널: 썸네일 + 제목. 텍스트 목록 패널과 같은 여백 리듬을 유지한다. */
.clarity-reference-panel .clarity-reference-latest > .clarity-latest-gallery { padding: 1rem 1.25rem 1.25rem; }
.clarity-latest-gallery .clarity-gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem .875rem; }
/* 전폭 패널에서는 폭이 두 배가 되므로 4단으로 넓힌다. (Tailwind md = 48rem) */
@media (min-width: 48rem) {
    .clarity-latest-gallery .clarity-gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.clarity-latest-gallery .clarity-gallery-item { min-width: 0; }
.clarity-latest-gallery .clarity-gallery-link { display: grid; min-width: 0; gap: .5rem; }
.clarity-latest-gallery .clarity-gallery-thumb {
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--clarity-border);
    border-radius: .5rem;
    background: var(--color-base-200);
}
.clarity-latest-gallery .clarity-gallery-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
.clarity-latest-gallery .clarity-gallery-link:hover .clarity-gallery-thumb img { transform: scale(1.04); }
.clarity-latest-gallery .clarity-gallery-subject {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    color: var(--clarity-text-soft);
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1.45;
    word-break: keep-all;
}
.clarity-latest-gallery .clarity-gallery-link:hover .clarity-gallery-subject { color: var(--clarity-primary); }
.clarity-latest-gallery .clarity-gallery-meta { display: flex; gap: .65rem; margin-top: .3rem; color: var(--clarity-muted); font-size: .7rem; }

/* The stock board/member markup remains untouched; DaisyUI tokens flow through this visual bridge. */
.tbl_head01 table, .tbl_frm01 table { border-top-color: var(--clarity-text); }
.tbl_head01 th, .tbl_frm01 th { background: var(--color-base-200); }
.btn_submit, .btn_confirm .btn_submit { border-color: var(--clarity-primary); background: var(--clarity-primary); }

@media (max-width: 1023px) {
    /* 시안의 48/32 여백은 1280 기준이다. 좁아지면 본문이 먼저 눌리므로
       여기서부터는 여백을 줄여 본문 폭을 지킨다. */
    #container_wr { grid-template-columns: minmax(0, 1fr) 16rem; gap: 1.5rem; padding: 2rem 1.5rem 3rem; }
    .clarity-shell { width: min(100%, 80rem); }
}

@media (max-width: 639px) {
    #container_wr { display: block; padding: 1.25rem 1rem 3rem; }
    #container_wr > .clarity-sidebar { margin-top: 1.5rem; }
    .clarity-shell { width: 100%; }
    .clarity-hero-letter { top: 18%; right: 10%; font-size: 9rem; }
    .clarity-hero-orbit-one { right: -42%; width: 24rem; height: 12rem; }
    .clarity-hero-orbit-two { right: -12%; width: 19rem; height: 10rem; }
    .clarity-reference-panel .clarity-latest-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; }
    .clarity-reference-panel .clarity-latest-meta { justify-content: flex-end; margin-top: 0; }
}

/* --- 게시판 머리줄 -------------------------------------------------------
   시안(비회원용 게시글 보기)은 게시판 이름 26px 옆에 목록·글쓰기를 나란히
   두고, 그 아래를 옅은 실선 하나로 끊는다. 색은 사이트 팔레트를 쓴다. */
body.clarity-page .clarity-page-header {
    /* base-300 은 채도 0 의 회색이라 이 줄만 다른 계열로 보였다. */
    border-bottom: 1px solid var(--clarity-border);
    padding-bottom: 1.125rem;
}
body.clarity-page .clarity-page-header-title {
    margin: 0;
    color: var(--clarity-text);
    font-size: 1.625rem;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.3;
}
body.clarity-page .clarity-page-header-actions { display: flex; flex: none; align-items: center; gap: .5rem; }
body.clarity-page .clarity-page-header-action {
    display: inline-flex;
    height: 2.375rem;
    align-items: center;
    border: 1px solid var(--clarity-border);
    border-radius: .5rem;
    background: var(--clarity-surface);
    color: var(--clarity-text-soft);
    padding-inline: 1rem;
    font-size: .84375rem;
    font-weight: 600;
    white-space: nowrap;
}
body.clarity-page .clarity-page-header-action:hover,
body.clarity-page .clarity-page-header-action:focus-visible {
    border-color: var(--clarity-border-strong);
    color: var(--clarity-text);
}
body.clarity-page .clarity-page-header-action:focus-visible { outline: 2px solid var(--clarity-primary); outline-offset: 2px; }
body.clarity-page .clarity-page-header-write {
    border-color: var(--clarity-primary);
    background: var(--clarity-primary);
    color: var(--clarity-primary-ink);
    padding-inline: 1.125rem;
}
body.clarity-page .clarity-page-header-write:hover,
body.clarity-page .clarity-page-header-write:focus-visible {
    border-color: var(--clarity-primary-hover);
    background: var(--clarity-primary-hover);
    color: var(--clarity-primary-ink);
}

@media (max-width: 40rem) {
    body.clarity-page .clarity-page-header-title { font-size: 1.375rem; }
}

/* daisyUI .breadcrumbs 는 위아래로 8px 씩 패딩을 준다. 상자는 오른쪽 사이드
   카드와 같은 높이에서 시작하지만 글자만 8px 내려가 어긋나 보였다. 시안은
   패딩 없이 글자가 카드 윗변과 같은 줄에서 시작한다. 아래쪽 여백은 mb-3 가
   맡고 있으므로 위쪽만 없앤다. */
body.clarity-page .breadcrumbs { padding-top: 0; }

/* --- 홈 · 자주 묻는 질문 -------------------------------------------------
   시안(gnuboard5-clarity)의 FAQ 묶음. 질문 줄은 Q 배지 + 제목 + 여닫이 표시,
   항목 사이는 점선이다. 여닫이는 <details> 라 자바스크립트가 없어도 열린다. */
/* 이 패널은 옆 카드가 남긴 빈칸을 메우는 자리다. 그래서 높이를 그 줄에
   맞춘다. 홈 격자는 align-items: start 라 카드마다 제 높이를 갖는데,
   여기서만 stretch 로 되돌린다.

   펼침도 높이를 건드리면 안 된다. 목록이 남는 공간만큼만 차지하게 두고
   넘치면 목록 안에서 스크롤시킨다. min-height: 0 이 없으면 flex 항목이
   내용만큼 부풀어 overflow 가 걸리지 않는다. */
body.clarity-page .clarity-faq-list {
    display: flex;
    min-height: 0;
    flex-direction: column;
    padding: 0 1.25rem;
    overscroll-behavior: contain;
}
/* 두 칸으로 갈라지는 폭에서만 높이를 묶는다. 한 칸일 때는 옆에 맞출 카드가
   없으니 자연스러운 높이가 낫다.
   height: 0 + flex-grow 가 요점이다. align-self: stretch 만으로는 모자란다 —
   격자 행은 가장 큰 칸에 맞춰 늘어나므로, 항목을 다 펼치면 FAQ 자신이 가장
   커져 행까지 끌고 올라간다. 목록의 본디 높이를 0 으로 두면 카드 높이 계산에
   끼어들지 못하고, 남는 자리만 받아 그 안에서 스크롤한다. */
@media (min-width: 48rem) {
    body.clarity-page .clarity-faq-panel { align-self: stretch; }
    body.clarity-page .clarity-faq-list { height: 0; flex: 1 1 0; overflow-y: auto; }
}
body.clarity-page .clarity-faq-list::-webkit-scrollbar { width: .375rem; }
body.clarity-page .clarity-faq-list::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--clarity-border-strong); }
body.clarity-page .clarity-faq-list::-webkit-scrollbar-track { background: transparent; }
body.clarity-page .clarity-faq-item {
    border-bottom: 1px dashed var(--clarity-border);
    border-radius: 0;
    background: none;
}
body.clarity-page .clarity-faq-item:last-child { border-bottom: 0; }
body.clarity-page .clarity-faq-q {
    display: flex;
    min-height: 0;
    align-items: center;
    gap: .625rem;
    padding: .8125rem 0;
    color: var(--clarity-text);
    cursor: pointer;
    font-size: .84375rem;
    font-weight: 600;
    letter-spacing: -.015em;
    list-style: none;
}
body.clarity-page .clarity-faq-q::-webkit-details-marker { display: none; }
body.clarity-page .clarity-faq-badge {
    flex: none;
    border-radius: .3125rem;
    background: var(--clarity-primary-soft);
    color: var(--clarity-primary);
    padding: .1875rem .4375rem;
    font-size: .6875rem;
    font-weight: 600;
}
body.clarity-page .clarity-faq-subject { min-width: 0; flex: 1; }
/* 여닫이 화살표. 열림·닫힘을 같은 자리에서 뒤집는다. */
body.clarity-page .clarity-faq-q::after {
    content: "\f107"; /* fa-angle-down */
    flex: none;
    color: var(--clarity-muted);
    font: normal normal normal 14px/1 FontAwesome;
    transition: transform .16s ease, color .16s ease;
}
body.clarity-page .clarity-faq-item[open] > .clarity-faq-q::after { color: var(--clarity-primary); transform: rotate(180deg); }
body.clarity-page .clarity-faq-item:hover > .clarity-faq-q { color: var(--clarity-primary); }
body.clarity-page .clarity-faq-q:focus-visible { outline: 2px solid var(--clarity-primary); outline-offset: -2px; }
body.clarity-page .clarity-faq-a { padding: 0 0 .875rem 2rem; }
body.clarity-page .clarity-faq-a p { margin: 0; color: var(--clarity-text-soft); font-size: .78125rem; line-height: 1.7; letter-spacing: -.01em; }

/* 시안의 FAQ 는 즉시 열리고 닫힌다. daisyUI collapse 는 grid-template-rows 를
   0.2s 로 굴리고 내용에도 여러 전환을 걸어 두는데, 한 항목이 접히면서 다른
   항목이 펼쳐지는 배타 아코디언에서는 그 사이가 어수선하게 보인다. 전부 끈다.
   화살표 회전도 같이 끊어 한 박자에 바뀌게 한다. */
body.clarity-page .clarity-faq-item,
body.clarity-page .clarity-faq-q,
body.clarity-page .clarity-faq-q::after,
body.clarity-page .clarity-faq-a {
    transition: none;
    animation: none;
}

/* 스크롤이 생기지 않게 한다.
   카드 높이는 옆 카드에 묶여 있고(309px) 목록에 쓸 수 있는 자리는 246px 다.
   닫힌 상태로 이미 246 을 채우고 있어 답이 두 줄만 되어도 12px 넘쳤다.

   두 가지로 푼다. 질문 줄의 위아래 패딩을 13px 에서 10px 로 줄여 네 줄에서
   24px 를 벌고(줄 높이는 44px 로 남아 터치 목표를 지킨다), 답은 두 줄로
   고정한다. 줄 수를 고정해야 '내용이 길어도' 라는 조건이 성립한다 — 글자
   수가 늘어도 차지하는 높이가 변하지 않는다.
   전문은 더보기(faq.php)에서 본다. */
body.clarity-page .clarity-faq-q { padding: .625rem 0; }
body.clarity-page .clarity-faq-a { padding-bottom: .625rem; }
body.clarity-page .clarity-faq-a p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
/* 위 계산이 어긋나더라도 스크롤 막대가 나타나지는 않게 한다. */
body.clarity-page .clarity-faq-list { overflow-y: hidden; }

/* 스크롤로 헤더가 붙을 때 크기를 줄인다(온담 시안).
   시안은 바 76 -> 56px, 로고 27 -> 22px 를 .2s ease 로 옮긴다. 우리 바는
   64px, 로고 32px 이라 같은 비율(-25% / -19%)로 48px, 26px 로 간다.
   문턱은 시안과 같은 70px 이고 is-condensed 는 theme.js 가 붙인다. */
.clarity-community-mainbar { transition: min-height .2s ease; }
/* 헤더 브랜드의 로고만 줄인다. 드로어 패널에도 같은 클래스의 로고가 있고
   그 패널은 헤더 안에 들어 있어, 범위를 좁히지 않으면 함께 줄어든다. */
.clarity-community-brand .clarity-community-logo { transition: height .2s ease; }
.clarity-community-header.is-condensed .clarity-community-mainbar { min-height: 3rem; }
.clarity-community-header.is-condensed .clarity-community-brand .clarity-community-logo { height: 1.625rem; }

/* 모션을 줄여 달라고 한 사람에게는 크기만 바뀌고 움직이지는 않게 한다. */
@media (prefers-reduced-motion: reduce) {
    .clarity-community-mainbar,
    .clarity-community-brand .clarity-community-logo { transition: none; }
}

/* 시안의 헤더는 position: fixed 라 줄어들어도 본문이 밀리지 않는다. 우리 헤더는
   sticky 여서 흐름 안에 자리를 차지하고, 줄어드는 순간 문서가 그만큼 짧아져
   본문이 위로 튄다(측정: 16px).
   줄어든 만큼을 헤더 아래 여백으로 되돌려 흐름 높이를 그대로 둔다. 그 여백은
   이미 지나온 자리라 화면에는 보이지 않고, 문서 높이가 변하지 않아 튀지도
   않는다. */
.clarity-community-header-sticky { transition: margin-bottom .2s ease; }
.clarity-community-header-sticky:has(.clarity-community-header.is-condensed) { margin-bottom: 1rem; }
@media (prefers-reduced-motion: reduce) {
    .clarity-community-header-sticky { transition: none; }
}