@charset "utf-8";

:root {
    --clarity-page: #f3f6f7;
    --clarity-surface: #ffffff;
    --clarity-surface-soft: #f8fafb;
    --clarity-surface-tint: #edf5f1;
    --clarity-text: #172024;
    --clarity-text-soft: #425055;
    --clarity-muted: #748085;
    --clarity-border: #e0e7e6;
    --clarity-border-strong: #cdd9d7;
    --clarity-primary: #287b58;
    --clarity-primary-hover: #1f6246;
    --clarity-primary-soft: #e7f3ed;
    --clarity-primary-ink: #ffffff;
    --clarity-accent: #3c5cc4;
    --clarity-danger: #bd4e54;
    --clarity-shadow-sm: 0 1px 2px rgba(24, 45, 42, .05);
    --clarity-shadow-md: 0 14px 36px rgba(29, 52, 48, .08);
    --clarity-shadow-lift: 0 10px 22px -8px rgba(29, 52, 48, .16);
    --clarity-radius-sm: 10px;
    --clarity-radius-md: 16px;
    --clarity-radius-lg: 24px;
    --clarity-radius-pill: 999px;
    --clarity-shell: 1240px;
    /* Match the reference site's Pretendard rendering stack. */
    --clarity-font: "Pretendard Variable", Pretendard, "Noto Sans KR", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --clarity-font-size: 16px;
    --clarity-body-letter-spacing: -.01em;
    --clarity-heading-letter-spacing: -.04em;
    --clarity-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html[data-clarity-theme="dark"] {
    --clarity-page: #111719;
    --clarity-surface: #182123;
    --clarity-surface-soft: #1d292b;
    --clarity-surface-tint: #20332e;
    --clarity-text: #ecf3f1;
    --clarity-text-soft: #c1cfcc;
    --clarity-muted: #9baaa8;
    --clarity-border: #2c3b3d;
    --clarity-border-strong: #3a4b4d;
    --clarity-primary: #73d0a6;
    --clarity-primary-hover: #96e4be;
    --clarity-primary-soft: #234738;
    --clarity-primary-ink: #10231a;
    --clarity-accent: #aab8ff;
    --clarity-danger: #ff989c;
    --clarity-shadow-sm: 0 1px 2px rgba(0, 0, 0, .24);
    --clarity-shadow-md: 0 18px 42px rgba(0, 0, 0, .26);
    --clarity-shadow-lift: 0 10px 22px -8px rgba(0, 0, 0, .6);
}

* { box-sizing: border-box; }
html { min-width: 0; overflow-x: hidden; overflow-y: scroll; background: var(--clarity-page); }
/* 한국어는 낱말(어절) 경계에서 끊어야 읽힌다. 기본값(normal)은 글자 단위로
   끊어 "어디인가 / 요?" 처럼 낱말 가운데가 갈라진다. 시안도 body 에 건다.
   overflow-wrap 을 짝으로 두는 이유가 있다 — keep-all 만 두면 끊을 곳이 없는
   긴 URL 이나 영문 한 덩어리가 상자를 넘는다. */
body { margin: 0; background: var(--clarity-page); color: var(--clarity-text); font: 400 var(--clarity-font-size)/1.6 var(--clarity-font); letter-spacing: var(--clarity-body-letter-spacing); word-break: keep-all; overflow-wrap: anywhere; }
body, input, button, select, textarea { font-family: var(--clarity-font); }
/* drawer 를 열 때 배경 스크롤을 잠근다. body 에 overflow:hidden 을 주면
   body 가 스크롤 컨테이너가 되어 그 안의 position:sticky 헤더가 기준을
   잃고 위로 밀려 올라간다. 게다가 실제 페이지 스크롤은 뷰포트에 있어
   잠기지도 않았다. 잠금은 뿌리 요소에 건다.
   스크롤바가 사라지며 생기는 폭 변화는 --clarity-scrollbar-w 로 메운다
   (오버레이 스크롤바 환경에서는 0 이라 아무 일도 일어나지 않는다). */
html.clarity-drawer-open {
    overflow-y: hidden;
    /* daisyUI 는 drawer 가 열리면 뿌리에 scrollbar-gutter: stable 을 얹어
       스크롤바 자리를 예약한다. 우리는 사라지는 폭을 직접 재서 메우므로
       둘이 겹치면 자리가 두 번 잡혀 본문이 밀린다. CDN 규칙이라 고칠 수
       없어 여기서 끈다. */
    scrollbar-gutter: auto !important;
    padding-right: var(--clarity-scrollbar-w, 0px);
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-size: inherit; }
button { cursor: pointer; }
img { max-width: 100%; height: auto; }
ul, ol, dl, dt, dd, p, h1, h2, h3, h4, h5, h6, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; }
hr { display: none; }
table { border-collapse: collapse; border-spacing: 0; width: 100%; }
::selection { background: var(--clarity-primary); color: #fff; }

/*
 * Critical typography baseline for the Tailwind Browser runtime.
 * These values are available before its generated utility stylesheet arrives,
 * so the first paint uses the same metrics as the settled Clarity UI.
 */
body.clarity-page .text-xs { font-size: .75rem; line-height: 1rem; }
body.clarity-page .text-sm { font-size: .875rem; line-height: 1.4285714; }
body.clarity-page .text-base { font-size: 1rem; line-height: 1.5; }
body.clarity-page .text-lg { font-size: 1.125rem; line-height: 1.6; }
body.clarity-page .text-xl { font-size: 1.25rem; line-height: 1.4; }
body.clarity-page .text-3xl { font-size: 1.875rem; line-height: 1.2; }
body.clarity-page .text-4xl { font-size: 2.25rem; line-height: 1.1111111; }
body.clarity-page [class~="text-[.65rem]"] { font-size: .65rem; line-height: 1; }
body.clarity-page [class~="text-[.7rem]"] { font-size: .7rem; line-height: 1.4; }
body.clarity-page .font-semibold { font-weight: 600; }
body.clarity-page .font-bold { font-weight: 700; }
body.clarity-page .font-black { font-weight: 900; }
body.clarity-page .tracking-tight { letter-spacing: -.025em; }
body.clarity-page .tracking-widest { letter-spacing: .1em; }
@media (min-width: 40rem) {
    body.clarity-page [class~="sm:text-4xl"] { font-size: 2.25rem; line-height: 1.1111111; }
}

:focus-visible { outline: 3px solid var(--clarity-accent); outline-offset: 3px; }
.sound_only, .sound-only, legend { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.clarity-shell { width: min(var(--clarity-shell), calc(100% - 48px)); margin: 0 auto; }

/* Shared shell utilities. The active community header lives in community.css. */
.clarity-skip-link { position: fixed; z-index: 10000; top: -60px; left: 20px; padding: 10px 16px; border-radius: var(--clarity-radius-sm); background: var(--clarity-text); color: var(--clarity-surface); transition: top .2s ease; }
.clarity-skip-link:focus { top: 20px; }
/* 로그인 안내는 화면에 띄우지 않는다. 낭독기에는 남겨야 하므로 display:none
   이 아니라 sr-only 방식으로 감춘다. 다만 안에 로그아웃 링크가 있어 그대로
   감추기만 하면 보이지 않는 탭 정지가 된다(포커스가 어디 갔는지 알 수 없다).
   건너뛰기 링크와 같이, 포커스가 들어오면 상단 띠로 내려오게 한다. */
.clarity-login-msg {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
}
.clarity-login-msg:focus-within {
    position: fixed;
    z-index: 10000;
    top: 0;
    right: 0;
    left: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 8px 20px;
    overflow: visible;
    clip: auto;
    clip-path: none;
    background: var(--clarity-text);
    color: var(--clarity-surface);
    text-align: center;
    font-size: 12px;
}
.clarity-login-msg a { color: var(--clarity-primary); font-weight: 700; }
.clarity-avatar { display: inline-grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: var(--clarity-primary-soft); color: var(--clarity-primary); font-size: 11px; font-weight: 800; }

/* Page layout */
.clarity-wrapper { min-height: 480px; }
.clarity-content-shell { display: grid; grid-template-columns: minmax(0, 1fr) 292px; gap: 28px; align-items: start; padding-top: 42px; padding-bottom: 76px; }
.clarity-main-content { min-width: 0; }
.clarity-page-heading { display: flex; align-items: end; justify-content: space-between; padding: 8px 0 27px; border-bottom: 1px solid var(--clarity-border); }
.clarity-page-heading h2 { margin-top: 5px; font-size: clamp(25px, 3vw, 36px); font-weight: 800; line-height: 1.25; letter-spacing: var(--clarity-heading-letter-spacing); }
.clarity-sidebar { display: grid; gap: 14px; min-width: 0; }
.clarity-side-card, .clarity-login-card, .clarity-content-card, .clarity-empty-card { border: 1px solid var(--clarity-border); border-radius: var(--clarity-radius-md); background: var(--clarity-surface); box-shadow: var(--clarity-shadow-sm); }
.clarity-side-heading h2 { margin-top: 4px; font-size: 18px; font-weight: 800; line-height: 1.35; letter-spacing: var(--clarity-heading-letter-spacing); }
.clarity-side-links { padding: 20px; }
.clarity-side-links .clarity-side-heading { margin-bottom: 12px; }
.clarity-side-links > a { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-top: 1px solid var(--clarity-border); color: var(--clarity-text-soft); font-size: 13px; }
.clarity-side-links > a:hover { color: var(--clarity-primary); }
.clarity-side-links b { color: var(--clarity-muted); font-size: 17px; font-weight: 400; }

/* Home */
.clarity-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr); min-height: 340px; overflow: hidden; border-radius: var(--clarity-radius-lg); background: var(--clarity-surface-tint); }
.clarity-hero-copy { position: relative; z-index: 1; align-self: center; padding: 48px 42px; }
.clarity-hero h2 { margin: 12px 0 16px; color: var(--clarity-text); font-size: clamp(32px, 4.3vw, 54px); font-weight: 800; line-height: 1.22; letter-spacing: -.05em; }
.clarity-hero h2 em { color: var(--clarity-primary); font-style: normal; }
.clarity-hero p { max-width: 430px; color: var(--clarity-text-soft); font-size: 16px; line-height: 1.6; }
.clarity-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.clarity-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 17px; border: 1px solid transparent; border-radius: var(--clarity-radius-pill); font-size: 13px; font-weight: 800; transition: transform .2s, background .2s, border-color .2s, color .2s; }
.clarity-button:hover { transform: translateY(-2px); }
.clarity-button-primary { background: var(--clarity-primary); color: #fff; }
.clarity-button-primary:hover { background: var(--clarity-primary-hover); }
.clarity-button-quiet { border-color: var(--clarity-border-strong); background: var(--clarity-surface); color: var(--clarity-text-soft); }
.clarity-button-quiet:hover { border-color: var(--clarity-primary); color: var(--clarity-primary); }
.clarity-hero-art { position: relative; min-height: 340px; overflow: hidden; }
.clarity-art-glow { position: absolute; top: 13%; right: 17%; width: 210px; height: 210px; border-radius: 50%; background: rgba(61, 137, 98, .18); filter: blur(4px); }
.clarity-art-letter { position: absolute; top: 40%; right: 18%; color: var(--clarity-primary); font-weight: 800; font-size: 190px; line-height: .8; opacity: .2; transform: rotate(-14deg); }
.clarity-art-orbit { position: absolute; border: 1px solid rgba(40, 123, 88, .28); border-radius: 50%; transform: rotate(-28deg); }
.clarity-art-orbit-one { top: 14%; right: -3%; width: 360px; height: 190px; }
.clarity-art-orbit-two { top: 28%; right: 5%; width: 290px; height: 150px; }
.clarity-intro-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 25px 0 36px; }
.clarity-intro-row > div { display: grid; grid-template-columns: auto 1fr; column-gap: 11px; align-items: baseline; padding-right: 16px; border-right: 1px solid var(--clarity-border); }
.clarity-intro-row > div:last-child { border-right: 0; }
.clarity-intro-number { grid-row: span 2; color: var(--clarity-primary); font: 700 11px/1 var(--clarity-mono); }
.clarity-intro-row strong { font-size: 14px; }
.clarity-intro-row p { grid-column: 2; margin-top: 2px; color: var(--clarity-muted); font-size: 12px; }
.clarity-home-sections { display: grid; gap: 18px; }
.clarity-content-card { padding: 24px; }
.clarity-empty-card { display: grid; min-height: 210px; place-items: center; align-content: center; padding: 30px; text-align: center; }
.clarity-empty-icon { display: grid; width: 46px; height: 46px; margin-bottom: 14px; place-items: center; border-radius: 50%; background: var(--clarity-primary-soft); color: var(--clarity-primary); font-size: 22px; }
.clarity-empty-card h2 { font-size: 20px; font-weight: 800; line-height: 1.35; letter-spacing: var(--clarity-heading-letter-spacing); }
.clarity-empty-card p { margin-top: 7px; color: var(--clarity-muted); font-size: 13px; }

/* Latest */
.clarity-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.clarity-section-heading h2 { margin-top: 5px; font-size: 24px; font-weight: 800; line-height: 1.3; letter-spacing: var(--clarity-heading-letter-spacing); }
.clarity-more-link { flex: 0 0 auto; color: var(--clarity-muted); font-size: 12px; font-weight: 700; }
.clarity-more-link:hover { color: var(--clarity-primary); }
.clarity-latest-list { border-top: 1px solid var(--clarity-border); }
.clarity-latest-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--clarity-border); }
.clarity-latest-list li:last-child { border-bottom: 0; }
.clarity-latest-subject { min-width: 0; overflow: hidden; border-bottom: 0 !important; color: var(--clarity-text-soft); text-overflow: ellipsis; white-space: nowrap; font-size: 15px; line-height: 1.6; }
.clarity-latest-subject:hover { color: var(--clarity-primary); }
.clarity-post-icon { display: inline-grid; width: 17px; height: 17px; margin-right: 4px; place-items: center; border-radius: 50%; background: var(--clarity-surface-tint); color: var(--clarity-primary); font-size: 13px; }
.clarity-comment-count { display: inline-block; margin-left: 5px; color: var(--clarity-accent); font-size: 11px; font-weight: 800; }
.clarity-latest-meta { display: flex; gap: 10px; color: var(--clarity-muted); font-size: 11px; white-space: nowrap; }
.clarity-latest-empty { padding: 22px 0 6px; color: var(--clarity-muted); font-size: 13px; }

/* Login and common sidebar skins */
.clarity-login-card { padding: 22px; }
.clarity-login-copy { margin: 9px 0 16px; color: var(--clarity-muted); font-size: 12px; }
.clarity-field { display: block; width: 100%; height: 42px; margin-top: 8px; padding: 0 12px; border: 1px solid var(--clarity-border); border-radius: var(--clarity-radius-sm); outline: 0; background: var(--clarity-surface-soft); color: var(--clarity-text); }
.clarity-field:focus { border-color: var(--clarity-primary); box-shadow: 0 0 0 3px var(--clarity-primary-soft); }
.clarity-login-submit { width: 100%; margin-top: 10px; }
.clarity-login-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 15px; color: var(--clarity-muted); font-size: 11px; }
.clarity-login-links a:hover { color: var(--clarity-primary); }
.clarity-member-intro { display: flex; align-items: center; gap: 12px; }
.clarity-avatar-large { width: 42px; height: 42px; font-size: 15px; }
.clarity-member-intro h2 { margin-top: 4px; font-size: 20px; font-weight: 800; line-height: 1.35; letter-spacing: var(--clarity-heading-letter-spacing); }
.clarity-member-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--clarity-border); }
.clarity-member-stats a { padding: 8px 4px; border-radius: 8px; text-align: center; }
.clarity-member-stats a:hover { background: var(--clarity-surface-soft); }
.clarity-member-stats span, .clarity-member-stats strong { display: block; }
.clarity-member-stats span { color: var(--clarity-muted); font-size: 10px; }
.clarity-member-stats strong { margin-top: 2px; color: var(--clarity-primary); font-size: 15px; }
.clarity-sidebar .po, .clarity-sidebar .visit, .clarity-sidebar .connect { padding: 20px; border: 1px solid var(--clarity-border); border-radius: var(--clarity-radius-md); background: var(--clarity-surface); }
.clarity-sidebar .po h2, .clarity-sidebar .visit h2, .clarity-sidebar .connect h2 { margin-bottom: 12px; font-size: 17px; }
.clarity-sidebar .po li, .clarity-sidebar .visit li, .clarity-sidebar .connect li { border-top: 1px solid var(--clarity-border); color: var(--clarity-text-soft); font-size: 12px; }
.clarity-sidebar .po a, .clarity-sidebar .visit a, .clarity-sidebar .connect a { display: block; padding: 8px 0; }

/* Board, member and common Gnuboard surfaces */
#bo_list, #bo_v, #bo_w, .mbskin, .new_win, .search_container, #faq_wrap, #qa_wrap, #ctt { color: var(--clarity-text); }
.bo_v, .tbl_wrap, .tbl_frm01, .win_ { border-color: var(--clarity-border); }
.tbl_head01 table, .tbl_frm01 table { border-top: 2px solid var(--clarity-text); }
.tbl_head01 th, .tbl_frm01 th { padding: 12px 10px; border-bottom: 1px solid var(--clarity-border); background: var(--clarity-surface-soft); color: var(--clarity-text-soft); font-size: 13px; }
.tbl_head01 td, .tbl_frm01 td { padding: 12px 10px; border-bottom: 1px solid var(--clarity-border); color: var(--clarity-text-soft); font-size: 13px; }
.tbl_head01 td a:hover { color: var(--clarity-primary); }
.bo_tit h1, #bo_v_title, #bo_w h2, .mbskin h2, #faq_wrap h2 { color: var(--clarity-text); letter-spacing: -.05em; }
.bo_notice { background: var(--clarity-primary-soft) !important; }
.bo_notice a, .bo_cate a:hover, .bo_cate_on a { color: var(--clarity-primary) !important; }
.bo_cate { border-bottom-color: var(--clarity-border); }
.bo_cate a { color: var(--clarity-muted); }
.btn_bo_user a, .btn_confirm .btn_submit, .btn_submit, .btn_b01, .btn_b02, .btn_cancel, .btn_frmline { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 14px; border: 1px solid var(--clarity-border-strong); border-radius: var(--clarity-radius-sm); background: var(--clarity-surface); color: var(--clarity-text-soft); font-size: 12px; font-weight: 700; }
.btn_bo_user a:hover, .btn_b01:hover, .btn_b02:hover, .btn_cancel:hover, .btn_frmline:hover { border-color: var(--clarity-primary); color: var(--clarity-primary); }
.btn_submit, .btn_confirm .btn_submit { border-color: var(--clarity-primary); background: var(--clarity-primary); color: #fff; }
.btn_submit:hover, .btn_confirm .btn_submit:hover { background: var(--clarity-primary-hover); color: #fff; }
input[type=text], input[type=password], input[type=email], input[type=number], input[type=search], select, textarea { border: 1px solid var(--clarity-border); border-radius: var(--clarity-radius-sm); background: var(--clarity-surface); color: var(--clarity-text); }
input[type=text], input[type=password], input[type=email], input[type=number], input[type=search], select { height: 40px; padding: 0 11px; }
textarea { padding: 11px; }
/* 입력칸 포커스 표시.
   전에는 outline 을 끄고 3px 옅은 후광(--clarity-primary-soft)만 남겼다.
   흰 바탕에 옅은 틴트라 상태 대비가 3:1 에 한참 못 미쳐, 키보드로 다닐 때
   어디에 있는지 알기 어려웠다. 후광을 걷고 2px 실선 한 겹으로 바꾼다.

   테두리 색이 바뀌는 것은 마우스 클릭에도 남겨 둔다(어느 칸을 만지는지
   알려 주는 신호). 링은 키보드로 들어왔을 때만 그린다.

   자체 표시를 가진 컴포넌트(커뮤니티 검색 패널 등)는 제 규칙에서
   outline:0 으로 이 링을 끄므로 두 겹이 되지 않는다. */
input:focus, select:focus, textarea:focus { border-color: var(--clarity-primary) !important; box-shadow: none; outline: 0; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--clarity-primary);
    outline-offset: 1px;
}
.pg_wrap { margin-top: 24px; text-align: center; }
.pg_page, .pg_current { display: inline-grid; min-width: 32px; height: 32px; margin: 0 2px; place-items: center; border: 1px solid var(--clarity-border); border-radius: 8px; background: var(--clarity-surface); color: var(--clarity-muted); font-size: 12px; }
.pg_current { border-color: var(--clarity-primary); background: var(--clarity-primary); color: #fff; font-weight: 800; }
.bo_v_con, .wr_content, #ctt_con { color: var(--clarity-text-soft); font-size: 16px; line-height: 1.75; }
.bo_v_con img, #ctt_con img { max-width: 100%; }
.bo_vc_w textarea, .comment-box textarea { width: 100%; min-height: 110px; }

/* Footer */
.clarity-footer { position: relative; border-top: 1px solid var(--clarity-border); background: var(--clarity-surface); }
.clarity-footer .clarity-shell { padding-top: 32px; padding-bottom: 32px; }
.clarity-footer-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid var(--clarity-border); }
.clarity-brand-footer { display: inline-flex; min-width: 0; align-items: center; gap: 10px; color: var(--clarity-text); }
.clarity-brand-footer .clarity-brand-mark { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 10px; background: var(--clarity-primary); color: var(--color-primary-content, #fff); font-weight: 700; font-size: 15px; line-height: 1; }
.clarity-brand-footer strong { display: block; font-weight: 800; font-size: 17px; line-height: 1.05; letter-spacing: -.04em; }
.clarity-brand-footer small { display: block; margin-top: 3px; color: var(--clarity-muted); font: 500 9px/1 var(--clarity-font); letter-spacing: .08em; text-transform: uppercase; }
.clarity-footer-links { display: flex; flex-wrap: wrap; gap: 18px; color: var(--clarity-muted); font-size: 12px; }
.clarity-footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 18px; color: var(--clarity-muted); font-size: 11px; }
.clarity-footer-bottom strong { color: var(--clarity-text-soft); }
.clarity-top-button { position: fixed; z-index: 30; right: 24px; bottom: 24px; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--clarity-border); border-radius: 50%; background: var(--clarity-surface); color: var(--clarity-text); box-shadow: var(--clarity-shadow-md); font-size: 18px; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .2s, transform .2s; }
.clarity-top-button.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.clarity-top-button:hover { border-color: var(--clarity-primary); color: var(--clarity-primary); }

@media (max-width: 1080px) {
    .clarity-content-shell { grid-template-columns: minmax(0, 1fr) 260px; }
}

@media (max-width: 780px) {
    body { font-size: var(--clarity-font-size); }
    .clarity-shell { width: min(100% - 32px, var(--clarity-shell)); }
    .clarity-content-shell { display: block; padding-top: 28px; padding-bottom: 56px; }
    .clarity-sidebar { margin-top: 22px; }
    .clarity-hero { grid-template-columns: 1fr; min-height: 0; }
    .clarity-hero-copy { padding: 36px 26px 30px; }
    .clarity-hero h2 { font-size: clamp(32px, 10vw, 47px); }
    .clarity-hero-art { min-height: 150px; }
    .clarity-art-letter { top: -32px; right: 17%; font-size: 170px; }
    .clarity-art-orbit-one { top: 8%; right: -4%; width: 300px; height: 150px; }
    .clarity-art-orbit-two { top: 14%; right: 7%; width: 230px; height: 120px; }
    .clarity-intro-row { gap: 0; padding: 22px 0 28px; }
    .clarity-intro-row > div { display: block; padding: 0 12px; border-right: 1px solid var(--clarity-border); }
    .clarity-intro-row > div:first-child { padding-left: 0; }
    .clarity-intro-row > div:last-child { padding-right: 0; border-right: 0; }
    .clarity-intro-number { display: block; margin-bottom: 8px; }
    .clarity-intro-row strong, .clarity-intro-row p { display: block; }
    .clarity-intro-row p { margin-top: 3px; font-size: 11px; }
    .clarity-content-card { padding: 19px 16px; }
    .clarity-footer-top, .clarity-footer-bottom { align-items: flex-start; flex-direction: column; }
    .clarity-footer-links { gap: 10px 15px; }
}

@media (max-width: 460px) {
    .clarity-shell { width: calc(100% - 24px); }
    .clarity-section-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
    .clarity-latest-list li { display: block; }
    .clarity-latest-meta { justify-content: space-between; margin-top: 5px; }
    .clarity-intro-row > div { padding: 0 8px; }
    .clarity-intro-row strong { font-size: 12px; }
    .clarity-intro-row p { font-size: 10px; line-height: 1.45; }
    .clarity-hero-actions .clarity-button { flex: 1; padding: 0 10px; }
    .clarity-top-button { right: 14px; bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *:before, *:after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Clarity board overrides: keep the stock Gnuboard markup, replace only its visual layer. */
#bo_list, #bo_v, #bo_w { width: 100% !important; max-width: none; }
#bo_list { margin-bottom: 0; }
#bo_list .tbl_head01 { overflow: hidden; border: 1px solid var(--clarity-border); border-radius: var(--clarity-radius-md); background: var(--clarity-surface); }
#bo_list .tbl_head01 table { border-top: 0; }
#bo_list .tbl_head01 th { border-bottom: 1px solid var(--clarity-border); background: var(--clarity-surface-soft); color: var(--clarity-muted); font-size: 11px; letter-spacing: .04em; }
#bo_list .tbl_head01 td { height: 54px; border-bottom: 1px solid var(--clarity-border); background: var(--clarity-surface); }
#bo_list .tbl_head01 tr:last-child td { border-bottom: 0; }
#bo_list tbody tr { border-left: 0; transition: background .2s; }
#bo_list tbody tr:hover, #bo_list tbody .even td { border-left: 0; background: var(--clarity-surface-soft); }
#bo_list .bo_tit { color: var(--clarity-text); font-weight: 700; }
#bo_list .bo_tit:hover { color: var(--clarity-primary); }
#bo_list .td_num, #bo_list .td_date, #bo_list .td_name, #bo_list .td_hit, #bo_list .td_datetime { color: var(--clarity-muted); font-size: 12px; }
#bo_list .cnt_cmt, #bo_list .bo_cmt { background: var(--clarity-primary-soft); color: var(--clarity-primary); }
#bo_list .bo_notice td { background: var(--clarity-surface-tint) !important; border-bottom-color: var(--clarity-border); }
#bo_list .bo_notice .notice_icon { color: var(--clarity-primary); }
#bo_cate { margin: 0 0 20px; }
#bo_cate ul { padding: 4px; border: 1px solid var(--clarity-border); border-radius: var(--clarity-radius-sm); background: var(--clarity-surface); }
#bo_cate li { padding: 0; }
#bo_cate a, #bo_cate #bo_cate_on { margin: 0 2px; padding: 7px 13px; border: 0; border-radius: 8px; background: transparent; color: var(--clarity-muted); box-shadow: none; font-size: 12px; line-height: 1.4; }
#bo_cate a:hover, #bo_cate #bo_cate_on { background: var(--clarity-primary-soft); color: var(--clarity-primary); }
#bo_btn_top { min-height: 38px; margin: 0 0 12px; }
#bo_list_total { color: var(--clarity-muted); font-size: 12px; line-height: 38px; }
.bo_fx { margin: 0; }
#bo_sch { max-width: 500px; margin: 24px auto 0; border: 1px solid var(--clarity-border); border-radius: var(--clarity-radius-pill); background: var(--clarity-surface); }
#bo_sch select, #bo_sch .sch_input { background: transparent; color: var(--clarity-text); }
#bo_sch .sch_btn { color: var(--clarity-primary); }
#bo_sch .sch_input::placeholder { color: var(--clarity-muted); }

#bo_v { overflow: hidden; border: 1px solid var(--clarity-border); border-radius: var(--clarity-radius-md); background: var(--clarity-surface) !important; }
#bo_v > header { padding: 30px 32px 22px; border-bottom: 1px solid var(--clarity-border); }
#bo_v_title .bo_v_cate, .bo_v_cate { background: var(--clarity-primary-soft); color: var(--clarity-primary); }
#bo_v_title .bo_v_tit, .bo_v_tit { margin-top: 10px; color: var(--clarity-text); font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -.06em; }
#bo_v_info { color: var(--clarity-muted); border-bottom-color: var(--clarity-border); }
#bo_v_info .sv_member, #bo_v_info .sv_guest { color: var(--clarity-text-soft); }

/* --- 회원 사이드뷰 -------------------------------------------------------
   글쓴이 이름을 누르면 열리는 그누보드 기본 메뉴. 마크업과 토글은 코어가
   만들고(js/common.js 가 .sv 에 sv_on 을 붙인다) 우리는 모양만 준다.
   그누보드 기본 스타일은 루트 css/default.css 에 있는데 이 테마는 그 파일을
   싣지 않아, 메뉴가 display:inline 인 채로 한 줄에 납작하게 펼쳐져 있었다.
   daisyUI dropdown 결에 맞춰 카드형 메뉴로 세운다. */
.sv_wrap { position: relative; display: inline-flex; align-items: center; font-weight: inherit; }
/* 이름 옆 회원 아이콘. 코어가 22x22 이미지를 그대로 뱉어 글줄을 밀어내므로
   daisyUI avatar 처럼 둥근 틀에 담아 글자 크기에 맞춘다. */
.sv_wrap .sv_member, .sv_wrap .sv_guest { display: inline-flex; align-items: center; }
.sv_wrap .profile_img {
    display: inline-flex;
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-right: .35rem;
    border-radius: 50%;
    background: var(--clarity-surface-soft);
    box-shadow: 0 0 0 1px var(--clarity-border);
}
.sv_wrap .profile_img img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
/* 목록의 글쓴이 칸에는 테마가 이미 이니셜 아바타를 그린다. 거기서는 코어
   아이콘을 숨겨 둘이 겹치지 않게 한다. 나머지 자리(홈 최신글·본문·댓글)
   에서는 코어 아이콘이 그 역할을 한다. */
.cb-author:has(.cb-avatar) .profile_img { display: none; }

.sv_wrap .sv {
    position: absolute;
    z-index: 60;
    top: calc(100% + .35rem);
    left: 0;
    display: none;
    /* 폭은 내용이 정한다. 예전엔 9.5rem(152px) 을 못 박아, 가장 긴 항목
       글자가 69px 인데도 오른쪽에 52px 이 그냥 비어 있었다. 항목이 하나뿐인
       비회원 메뉴가 너무 좁아지지 않을 만큼만 최소값을 남긴다. */
    min-width: 6rem;
    padding: .25rem;
    border: 1px solid var(--clarity-border);
    border-radius: .625rem;
    background: var(--clarity-surface);
    box-shadow: 0 .625rem 1.5rem color-mix(in srgb, var(--clarity-text) 12%, transparent), 0 1px 2px color-mix(in srgb, var(--clarity-text) 6%, transparent);
    text-align: left;
    white-space: nowrap;
}
.sv_wrap .sv.sv_on { display: block; }
.sv_wrap .sv a {
    display: flex;
    min-height: 2rem;
    align-items: center;
    border-radius: .375rem;
    color: var(--clarity-text-soft);
    padding: .3rem .55rem;
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.3;
}
.sv_wrap .sv a:hover { background: var(--clarity-primary-soft); color: var(--clarity-primary); }
.sv_wrap .sv a:focus-visible { outline: 2px solid var(--clarity-primary); outline-offset: -2px; }
/* JS 가 없으면 코어가 .sv_nojs 를 붙여 메뉴를 그냥 펼친다. 그때는 뜨는
   메뉴가 아니라 이름 아래 목록으로 둔다. */
.sv_nojs .sv_wrap .sv { position: static; display: block; box-shadow: none; }
/* 목록의 글쓴이 칸은 이름을 말줄임하려고 overflow 를 숨기고 있어 메뉴가
   잘렸다. 말줄임은 그대로 두고, 그 칸에서 메뉴가 열린 동안에만 연다. */
/* 홈 최신글·갤러리 패널은 마크업에 overflow-hidden 이 붙어 있어(모서리를
   깎으려는 것) 사이드뷰가 카드 안에서 잘렸다. 열린 동안에만 연다.
   대표 패널 위의 3px 그라디언트 바는 자체 border-radius 가 있어
   overflow 없이도 모서리를 넘지 않는다. */
body.clarity-page .clarity-reference-panel:has(.sv.sv_on),
body.clarity-page #bo_list .cb-wrap:has(.sv.sv_on),
body.clarity-page #bo_list .cb-card:has(.sv.sv_on),
body.clarity-page #bo_list .cb-author-name:has(.sv.sv_on),
body.clarity-page #bo_list .cb-author:has(.sv.sv_on),
body.clarity-page .cb-author-name:has(.sv.sv_on),
body.clarity-page .cb-author:has(.sv.sv_on) { overflow: visible; }
#bo_v_atc { padding: 30px 32px; }
#bo_v_con { color: var(--clarity-text-soft); font-size: 15px; line-height: 1.9; }
#bo_v_con a { color: var(--clarity-accent); }
#bo_v_file li, #bo_v_link li { border-color: var(--clarity-border); background: var(--clarity-surface-soft); box-shadow: none; }
#bo_v_file a, #bo_v_link a { color: var(--clarity-text-soft); }
#bo_v_file li:hover, #bo_v_link li:hover { border-color: var(--clarity-primary); }
#bo_v_nb li { border-color: var(--clarity-border); }
#bo_v_nb li:hover { background: var(--clarity-surface-soft); }
#bo_v_act .bo_v_good, #bo_v_act .bo_v_nogood { border-color: var(--clarity-border); color: var(--clarity-text-soft); }
#bo_v_act a:hover { border-color: var(--clarity-primary); background: var(--clarity-primary-soft); color: var(--clarity-primary); }
#bo_vc { margin: 0; padding: 24px 32px 30px; background: var(--clarity-surface-soft); }
.cmt_btn { margin-top: 0; border-bottom-color: var(--clarity-border); background: transparent; color: var(--clarity-text); }
.cmt_btn span.total { color: var(--clarity-primary); }
.cmt_btn span.total:after { background: var(--clarity-primary); }
#bo_vc article .comment_inner { border-bottom-color: var(--clarity-border); background: var(--clarity-surface); }
#bo_vc .cmt_contents { color: var(--clarity-text-soft); }
#bo_vc_empty { color: var(--clarity-muted); }
#bo_vc_w { border-color: var(--clarity-border); }

#bo_w { padding: 30px 32px; border: 1px solid var(--clarity-border); border-radius: var(--clarity-radius-md); background: var(--clarity-surface); }
#bo_w .write_div { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--clarity-border); }
#bo_w .write_div:last-of-type { border-bottom: 0; }
#bo_w .frm_input, #bo_w select, #bo_w textarea { width: 100%; }
#bo_w .half_input { width: calc(50% - 6px); }
#bo_w .bo_v_option { display: flex; flex-wrap: wrap; gap: 12px; }
#bo_w .bo_v_option li { color: var(--clarity-muted); font-size: 12px; }
#bo_w .btn_confirm { margin-top: 22px; }
#bo_w .btn_confirm .btn_submit, #bo_w .btn_confirm .btn_cancel { min-width: 96px; }

@media (max-width: 780px) {
    #bo_list .tbl_head01 { border-radius: var(--clarity-radius-sm); }
    #bo_list .tbl_head01 th { font-size: 10px; }
    #bo_list .tbl_head01 td { height: auto; padding: 11px 7px; font-size: 12px; }
    #bo_list .td_num, #bo_list .td_date, #bo_list .td_name, #bo_list .td_hit { display: none; }
    #bo_list .td_subject { width: 100%; }
    #bo_v > header { padding: 22px 18px 18px; }
    #bo_v_atc { padding: 22px 18px; }
    #bo_vc { padding: 20px 18px 24px; }
    #bo_w { padding: 20px 16px; }
    #bo_w .half_input { width: 100%; }
    #bo_sch { margin-top: 18px; }
}

/* 필수 입력 표시.
   그누보드5 기본 테마는 .required 에 img/require.png 를 오른쪽 위(100% 0)로
   깔아 빨간 별을 낸다. 우리 테마에도 같은 파일이 이미 들어 있는데 아무 규칙도
   참조하지 않아 표시가 없었다.

   기본 테마와 다른 점 둘. 여기 입력칸은 모서리가 둥글어 100% 0 으로 딱
   붙이면 별이 곡선에 걸치므로 살짝 띄운다. 그리고 class 뿐 아니라 required
   속성만 가진 칸(로그인 폼 등)도 함께 잡는다.

   :invalid 로 거는 이유 — required 인 칸은 비어 있으면 :invalid, 채우면
   :valid 다. 다 적은 칸에까지 별이 남아 있으면 잔소리가 된다.
   (:not(:placeholder-shown) 은 쓰면 안 된다. placeholder 가 없는 칸은 비어
   있어도 그 조건이 참이라 표시가 통째로 사라진다.)

   !important 는 폼마다 background 를 단축 속성으로 깔아 background-image 를
   함께 지우기 때문에 필요하다. 순서가 아니라 특이도 문제라 뒤에 놓아도
   이기지 못한다. 색은 각 폼이 정하고 표시만 그 위에 얹는다. */
body.clarity-page :is(input, textarea, select):is(.required, [required]):invalid {
    background-image: url("../img/require.png") !important;
    background-repeat: no-repeat !important;
    background-position: right .3125rem top .3125rem !important;
    background-size: 9px 9px !important;
}

/* daisyUI 의 .input 래퍼(로그인·아웃로그인 폼) 안에서는 위 규칙이 진다.
   daisyUI 는 @layer 안에서 자식 input 의 배경을 덮는데, 레이어 안의
   !important 는 레이어 밖 !important 보다 세기 때문이다. 그 자리에서는
   입력칸 대신 래퍼에 별을 얹는다. */
body.clarity-page .input:has(> :is(input, textarea, select):is(.required, [required]):invalid) { position: relative; }
body.clarity-page .input:has(> :is(input, textarea, select):is(.required, [required]):invalid)::after {
    content: "";
    position: absolute;
    top: .375rem;
    right: .375rem;
    width: 9px;
    height: 9px;
    background: url("../img/require.png") no-repeat center / 9px 9px;
    pointer-events: none;
}

/* ── 폭을 타는 페이지 넘김 (clarity_theme_get_paging) ─────────────────

   번호마다 지금 쪽에서 몇 칸 떨어졌는지가 data-clarity-pg-d 로 적혀 있다.
   폭이 줄면 먼 번호부터 사라지고, 다 사라지는 폭에서는 "5 / 12" 한 줄이
   대신 나온다. 자바스크립트를 쓰지 않는다.

   코어 get_paging() 의 .pg_wrap 은 위쪽 규칙이 따로 맡는다. 여기는 새
   마크업만 다룬다. */
body.clarity-page .clarity-pg {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .375rem;
}
/* 번호 묶음은 자리만 만들고 간격은 바깥 flex 가 준다. 한 폭에서 통째로
   숨겨야 해서 요소 자체는 남긴다. */
body.clarity-page .clarity-pg-nums { display: contents; }
body.clarity-page .clarity-pg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.125rem;
    height: 2.125rem;
    padding: 0 .625rem;
    border: 1px solid var(--clarity-border);
    border-radius: .5rem;
    background: var(--clarity-surface);
    color: var(--clarity-muted);
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease;
}
body.clarity-page .clarity-pg-num {
    font-family: var(--clarity-mono);
    font-variant-numeric: tabular-nums;
}
body.clarity-page a.clarity-pg-btn:hover,
body.clarity-page a.clarity-pg-btn:focus-visible {
    border-color: var(--clarity-border-strong);
    color: var(--clarity-text);
}
body.clarity-page .clarity-pg-num.is-current {
    border-color: transparent;
    background: var(--clarity-primary);
    color: var(--clarity-primary-ink);
    font-weight: 600;
}
/* 넓은 폭에서는 번호가 다 보이므로 요약 줄은 숨는다. */
body.clarity-page .clarity-pg-of { display: none; }

/* 멀리 있는 번호부터 접는다. 1024 는 사이드가 붙어 본문이 가장 좁아지는
   폭이다 — 거기서 열네 개가 한 줄에 겨우 들어간다. */
@media (max-width: 64rem) {
    body.clarity-page .clarity-pg-num[data-clarity-pg-d="4"],
    body.clarity-page .clarity-pg-num[data-clarity-pg-d="5"] { display: none; }
}
@media (max-width: 48rem) {
    body.clarity-page .clarity-pg-num[data-clarity-pg-d="2"],
    body.clarity-page .clarity-pg-num[data-clarity-pg-d="3"] { display: none; }
}
/* 번호를 다 접는 폭. 처음·이전·요약·다음·맨끝 다섯이면 390 에서도 남는다. */
@media (max-width: 30rem) {
    body.clarity-page .clarity-pg-nums { display: none; }
    body.clarity-page .clarity-pg-of {
        display: inline-flex;
        align-items: center;
        height: 2.125rem;
        padding: 0 .5rem;
        color: var(--clarity-muted);
        font-family: var(--clarity-mono);
        font-size: .8125rem;
        font-variant-numeric: tabular-nums;
    }
}
/* 320 같은 아주 좁은 폭. 다섯도 한 줄에 못 들어간다. 처음·맨끝을 접어도
   이전·다음으로 어디든 갈 수 있고, 몇 쪽인지는 요약이 알려 준다. */
@media (max-width: 21.875rem) {
    body.clarity-page .clarity-pg-edge { display: none; }
}

/* 에디터 단축키 일람: 입력창 위의 작은 도구 버튼과 도움말 패널로 정리한다.
   smarteditor2가 버튼 클릭 뒤 같은 위치에 패널을 동적으로 삽입하므로
   코어의 .cke_sc 마크업과 열기·닫기 스크립트는 건드리지 않는다. */
body.clarity-page .cke_sc {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin: 0 0 .625rem;
    text-align: right;
}
body.clarity-page .btn_cke_sc {
    display: inline-flex;
    min-height: 2.25rem;
    align-items: center;
    gap: .375rem;
    padding: 0 .8125rem;
    border: 1px solid var(--clarity-border-strong);
    border-radius: .625rem;
    background: var(--clarity-surface);
    color: var(--clarity-text-soft);
    font-family: inherit;
    font-size: .78125rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: border-color .14s ease, background-color .14s ease, color .14s ease, box-shadow .14s ease;
}
body.clarity-page .btn_cke_sc::before {
    color: var(--clarity-primary);
    content: "\f11c";
    font-family: FontAwesome;
    font-size: .8125rem;
    font-weight: 400;
}
body.clarity-page .btn_cke_sc:hover,
body.clarity-page .btn_cke_sc:focus-visible {
    border-color: var(--clarity-primary);
    background: var(--clarity-primary-soft);
    color: var(--clarity-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--clarity-primary) 12%, transparent);
}
body.clarity-page .cke_sc_def {
    width: 100%;
    flex: 0 0 100%;
    box-sizing: border-box;
    margin: 0 0 .875rem;
    padding: 1rem;
    border: 1px solid var(--clarity-border);
    border-radius: .75rem;
    background: var(--clarity-surface-soft);
    box-shadow: var(--clarity-shadow-sm);
    text-align: left;
    animation: clarity-shortcut-panel-in .16s ease-out both;
}
body.clarity-page .cke_sc_def dl {
    display: grid;
    grid-template-columns: minmax(6rem, .75fr) minmax(0, 1.25fr) minmax(6rem, .75fr) minmax(0, 1.25fr);
    margin: 0 0 .875rem;
    text-align: left;
}
body.clarity-page .cke_sc_def dl::after { display: none; }
body.clarity-page .cke_sc_def :is(dt, dd) {
    float: none;
    width: auto;
    min-width: 0;
    min-height: 2.375rem;
    box-sizing: border-box;
    margin: 0;
    padding: .625rem .6875rem;
    border-bottom: 1px solid var(--clarity-border);
    line-height: 1.35;
}
body.clarity-page .cke_sc_def dt {
    color: var(--clarity-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .02em;
}
body.clarity-page .cke_sc_def dd {
    color: var(--clarity-text-soft);
    font-size: .8125rem;
}
body.clarity-page .btn_cke_sc_close {
    display: inline-flex;
    min-height: 2.125rem;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 0 .8125rem;
    border: 1px solid var(--clarity-border-strong);
    border-radius: .5625rem;
    background: var(--clarity-surface);
    color: var(--clarity-text-soft);
    font-family: inherit;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color .14s ease, background-color .14s ease, color .14s ease;
}
body.clarity-page .btn_cke_sc_close:hover,
body.clarity-page .btn_cke_sc_close:focus-visible {
    border-color: var(--clarity-primary);
    background: var(--clarity-primary-soft);
    color: var(--clarity-primary);
}

@keyframes clarity-shortcut-panel-in {
    from { opacity: 0; transform: translateY(-.25rem); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    body.clarity-page .btn_cke_sc,
    body.clarity-page .btn_cke_sc_close { transition: none; }
    body.clarity-page .cke_sc_def { animation: none; }
}

@media (max-width: 40rem) {
    body.clarity-page .cke_sc_def { padding: .75rem; }
    body.clarity-page .cke_sc_def dl { grid-template-columns: minmax(6.25rem, .9fr) minmax(0, 1.1fr); }
}