@charset "utf-8";

/* ===================================================================
   Customer Board Skin — 윤회당 (yunhoedang) — Dark Theme / TABLE List
   =================================================================== */

/* -------------------------------------------------------------------
   1) Common — Links, Checkbox, Sound-only
   ------------------------------------------------------------------- */
#bo_list a,
#bo_list a:link,
#bo_list a:visited {
    color: var(--yhd-white);
    text-decoration: none;
}
#bo_v a,
#bo_v a:link,
#bo_v a:visited {
    color: var(--yhd-white);
    text-decoration: none;
}
#bo_v #bo_v_con a,
#bo_v #bo_v_con a:link,
#bo_v #bo_v_con a:visited {
    color: var(--yhd-point);
    text-decoration: underline;
}
#bo_w a,
#bo_w a:link,
#bo_w a:visited {
    color: var(--yhd-white);
    text-decoration: none;
}

.sound_only {
    position: absolute;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    width: 0;
    height: 0;
}

.selec_chk {
    position: absolute;
    top: 0; left: 0;
    width: 0; height: 0;
    opacity: 0;
    z-index: -1;
    overflow: hidden;
}
.chk_box { position: relative; }
.chk_box input[type="checkbox"] + label {
    position: relative;
    color: var(--yhd-white);
    cursor: pointer;
}
.chk_box input[type="checkbox"] + label span {
    display: inline-block;
    width: 18px;
    height: 18px;
    background: var(--yhd-white-10);
    border: 1.5px solid var(--yhd-white-25);
    border-radius: 4px;
    vertical-align: middle;
    transition: all 0.2s;
}
.chk_box input[type="checkbox"]:checked + label { color: var(--yhd-white); }
.chk_box input[type="checkbox"]:checked + label span {
    background: var(--yhd-point);
    border-color: var(--yhd-point-hover);
    background-image: url(./img/chk.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px;
}

/* -------------------------------------------------------------------
   2) List — TABLE Layout (Dark Theme)
   ------------------------------------------------------------------- */
#bo_list {
    position: relative;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.tbl_wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tbl_wrap table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.tbl_wrap caption {
    position: absolute;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

/* thead */
.tbl_wrap thead th {
    padding: clamp(0.75rem, 1.5vw, 1rem) clamp(0.5rem, 1vw, 0.75rem);
    font-size: clamp(0.875rem, 0.2vw + 0.8rem, 1rem);
    font-weight: 600;
    color: var(--yhd-white-50);
    text-align: center;
    border-bottom: 1px solid var(--yhd-white-20);
    white-space: nowrap;
}
.tbl_wrap thead th a,
.tbl_wrap thead th a:link,
.tbl_wrap thead th a:visited {
    color: var(--yhd-white-50);
    text-decoration: none;
    transition: color 0.3s ease;
}
@media (hover: hover) {
    .tbl_wrap thead th a:hover {
        color: var(--yhd-point);
    }
}
.tbl_wrap thead th a:focus-visible {
    outline: 2px solid var(--yhd-point);
    outline-offset: 2px;
}

/* Column widths */
.tbl_wrap .th_num { width: clamp(3.5rem, 5vw, 5rem); }
.tbl_wrap .th_subject { width: auto; }
.tbl_wrap .th_file { width: clamp(2.5rem, 3vw, 3rem); }
.tbl_wrap .th_name { width: clamp(5rem, 8vw, 7rem); }
.tbl_wrap .th_hit { width: clamp(3.5rem, 5vw, 5rem); }
.tbl_wrap .th_date { width: clamp(5rem, 7vw, 7rem); }
.tbl_wrap .all_chk { width: 3rem; }

/* tbody */
.tbl_wrap tbody td {
    padding: clamp(0.75rem, 1.5vw, 1rem) clamp(0.5rem, 1vw, 0.75rem);
    font-size: clamp(0.875rem, 0.2vw + 0.8rem, 1rem);
    color: var(--yhd-white-70);
    text-align: center;
    border-bottom: 1px solid var(--yhd-white-10);
    vertical-align: middle;
    transition: background 0.3s ease, color 0.3s ease;
}

@media (hover: hover) {
    .tbl_wrap tbody tr:hover td {
        background: var(--yhd-white-04);
        color: var(--yhd-white);
    }
}

/* Notice row */
.tbl_wrap tbody tr.bo_notice td {
    background: var(--yhd-point-04);
}
.tbl_wrap tbody tr.bo_notice .notice_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--yhd-point);
    background: var(--yhd-point-15);
    padding: 0.3em 0.6em 0.2em;
    border-radius: 4px;
    line-height: 1;
}

/* Current read */
.bo_current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--yhd-point);
}

/* Number column */
.td_num2 {
    font-size: clamp(0.875rem, 0.2vw + 0.8rem, 1rem);
    color: var(--yhd-white-40);
}

/* Subject column — left-aligned */
.tbl_wrap tbody .td_subject {
    text-align: left;
}
.bo_tit {
    display: flex;
    align-items: center;
    gap: 0.35em;
    min-width: 0;
}
.bo_tit a,
.bo_tit a:link,
.bo_tit a:visited {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--yhd-white);
    text-decoration: none;
    transition: color 0.3s ease;
}
@media (hover: hover) {
    #bo_list .bo_tit a:hover,
    #bo_list .tbl_wrap tbody tr:hover .bo_tit a {
        color: var(--yhd-point);
    }
}
.bo_tit a:focus-visible {
    outline: 2px solid var(--yhd-point);
    outline-offset: 2px;
}

/* Category link */
.bo_cate_link,
.bo_cate_link:link,
.bo_cate_link:visited {
    flex-shrink: 0;
    font-size: 0.875rem;
    color: var(--yhd-point);
    background: var(--yhd-point-15);
    border: 1px solid var(--yhd-point-20);
    border-radius: 0.25rem;
    padding: 0.3em 0.75em;
    margin-right: 0.5em;
    white-space: nowrap;
}

/* New icon */
.new_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--yhd-status-open);
    background: var(--yhd-status-open-15, rgba(35, 219, 121, 0.15));
    padding: 0.2em 0.45em 0.15em;
    border-radius: 3px;
    line-height: 1;
    flex-shrink: 0;
}

/* Comment count */
.cnt_cmt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--yhd-point);
    margin-left: 0.2em;
    flex-shrink: 0;
}
.cnt_cmt::before { content: "["; }
.cnt_cmt::after { content: "]"; }

/* File column */
.td_file {
    color: var(--yhd-white-30);
}
.td_file img {
    vertical-align: middle;
    filter: invert(1);
    opacity: 0.4;
}

/* Name column */
.td_name {
    font-size: clamp(0.875rem, 0.2vw + 0.8rem, 1rem);
    color: var(--yhd-white-60);
}

/* Hit / Date columns */
.td_num {
    font-size: clamp(0.875rem, 0.2vw + 0.8rem, 1rem);
    color: var(--yhd-white-40);
}
.td_datetime {
    font-size: clamp(0.875rem, 0.2vw + 0.8rem, 1rem);
    color: var(--yhd-white-40);
}

/* Empty */
.tbl_wrap tbody td.empty_table {
    text-align: center;
    padding: clamp(3rem, 6vw, 5rem) 0;
    color: var(--yhd-white-50);
}

/* -------------------------------------------------------------------
   3) Category — Tab Style
   ------------------------------------------------------------------- */
#bo_cate {
    position: relative;
    margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
}
#bo_cate h2 {
    position: absolute;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}
#bo_cate ul {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: clamp(0.5rem, 0.75vw, 0.75rem);
    list-style: none;
    margin: 0;
    padding: clamp(0.75rem, 1vw + 0.25rem, 1.5rem) 0 0 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
#bo_cate ul::-webkit-scrollbar { display: none; }
#bo_cate ul::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--yhd-white-15, rgba(255, 255, 255, 0.15));
    pointer-events: none;
    z-index: 1;
}
#bo_cate li { flex-shrink: 0; }
#bo_cate a,
#bo_cate a:link,
#bo_cate a:visited {
    display: block;
    padding: clamp(0.75rem, 1vw + 0.25rem, 1.25rem) clamp(1.5rem, 2vw + 0.5rem, 3rem);
    font-size: clamp(0.9375rem, 0.2vw + 0.8rem, 1.125rem);
    font-weight: 400;
    color: var(--yhd-white-40, rgba(255, 255, 255, 0.4));
    background: transparent;
    border: none;
    border-radius: clamp(0.375rem, 0.5vw, 0.5rem);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.3s ease, background 0.3s ease;
}
@media (hover: hover) {
    #bo_cate a:hover {
        color: var(--yhd-white-70, rgba(255, 255, 255, 0.7));
        background: var(--yhd-white-04, rgba(255, 255, 255, 0.04));
        text-decoration: none;
    }
}
#bo_cate a:focus {
    color: var(--yhd-white-70, rgba(255, 255, 255, 0.7));
    background: var(--yhd-white-04, rgba(255, 255, 255, 0.04));
    text-decoration: none;
}
#bo_cate a:focus-visible {
    outline: 2px solid var(--yhd-point);
    outline-offset: 2px;
}
#bo_cate #bo_cate_on {
    position: relative;
    color: var(--yhd-point);
    font-weight: 600;
}
/* 활성 탭 슬라이딩 인디케이터 (overflow 바깥 #bo_cate에 배치 → 글로우 잘림 방지) */
#bo_cate::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: var(--ind-left, 0);
    width: var(--ind-width, 0);
    height: var(--ind-height, 2px);
    background: var(--yhd-point);
    border-radius: var(--ind-radius, 1px);
    box-shadow: var(--ind-shadow, 0 0 0 0 transparent);
    pointer-events: none;
    z-index: 2;
    transition: left 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.38s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-radius 0.25s ease,
                box-shadow 0.3s ease;
}

/* -------------------------------------------------------------------
   4) Buttons — Top/Bottom, Options
   ------------------------------------------------------------------- */
#bo_btn_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.bo_list_allchk {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn_bo_user {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.btn_bo_user li { position: relative; }
.btn_bo_user .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3em;
    padding: 0.4em 0.9em;
    height: clamp(2rem, 3vw, 2.5rem);
    border-radius: 999px;
    border: 1px solid var(--yhd-white-20);
    background: transparent;
    color: var(--yhd-white);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.25s;
}
@media (hover: hover) {
    .btn_bo_user .btn:hover {
        background: var(--yhd-point);
        color: var(--yhd-dark);
        border-color: var(--yhd-point);
    }
}
.btn_bo_user .btn:focus-visible {
    outline: 2px solid var(--yhd-point);
    outline-offset: 2px;
}

/* Options dropdown */
.more_opt {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--yhd-surface-dark);
    border: 1px solid var(--yhd-white-15);
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px var(--yhd-shadow-dark, rgba(0, 0, 0, 0.4));
    z-index: 999;
    min-width: 120px;
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 0;
}
.more_opt li {
    border-bottom: 1px solid var(--yhd-white-10);
    padding: 0;
    margin: 0;
    float: none;
    width: auto;
}
.more_opt li:last-child { border-bottom: 0; }
.more_opt li button,
.more_opt li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.6rem 1rem;
    border: 0;
    background: transparent;
    color: var(--yhd-white);
    font-family: inherit;
    font-size: 0.875rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}
@media (hover: hover) {
    .more_opt li button:hover,
    .more_opt li a:hover {
        background: var(--yhd-point-10);
        color: var(--yhd-point);
    }
}
.more_opt li button:focus-visible,
.more_opt li a:focus-visible {
    outline: 2px solid var(--yhd-point);
    outline-offset: -2px;
}
.more_opt li i {
    font-size: 0.9em;
    margin-left: 0.5em;
}

/* Bottom buttons */
.bo_fx {
    display: flex;
    justify-content: flex-end;
    margin-top: clamp(1rem, 2vw, 1.5rem);
}

/* -------------------------------------------------------------------
   5) Search Modal
   ------------------------------------------------------------------- */
.bo_sch_wrap {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
}
.bo_sch_bg {
    position: absolute;
    inset: 0;
    background: var(--yhd-overlay-bg, rgba(0, 0, 0, 0.5));
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.bo_sch {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--yhd-surface-dark);
    border: 1px solid var(--yhd-white-15);
    border-radius: clamp(0.75rem, 1vw, 1rem);
    box-shadow: 0 8px 32px var(--yhd-shadow-dark, rgba(0, 0, 0, 0.4));
    width: min(90%, 380px);
    z-index: 1;
}
.bo_sch h3 {
    padding: clamp(1rem, 2vw, 1.25rem);
    border-bottom: 1px solid var(--yhd-white-10);
    font-size: clamp(1rem, 0.2vw + 0.9rem, 1.125rem);
    font-weight: 700;
    color: var(--yhd-white);
    margin: 0;
}
.bo_sch form {
    padding: clamp(1rem, 2vw, 1.25rem);
}
.bo_sch select {
    width: 100%;
    height: clamp(2.5rem, 3vw, 3rem);
    border: 1px solid var(--yhd-white-15);
    border-radius: 0.5rem;
    padding: 0 0.75rem;
    font-size: clamp(0.875rem, 0.2vw + 0.8rem, 1rem);
    color: var(--yhd-white);
    background: var(--yhd-white-05);
    outline: none;
    transition: border-color 0.2s;
}
.bo_sch select:focus { border-color: var(--yhd-point); }
.bo_sch select:focus-visible { outline: 2px solid var(--yhd-point); outline-offset: -2px; }
.bo_sch .sch_bar {
    display: flex;
    align-items: center;
    margin-top: 0.75rem;
    border: 1px solid var(--yhd-white-15);
    border-radius: 0.5rem;
    overflow: hidden;
    transition: border-color 0.2s;
}
.bo_sch .sch_bar:focus-within { border-color: var(--yhd-point); }
.bo_sch .sch_input {
    flex: 1;
    height: clamp(2.5rem, 3vw, 3rem);
    border: 0;
    padding: 0 0.75rem;
    font-size: clamp(0.875rem, 0.2vw + 0.8rem, 1rem);
    background: transparent;
    color: var(--yhd-white);
    outline: none;
}
.bo_sch .sch_input::placeholder { color: var(--yhd-white-30); }
.bo_sch .sch_input:focus-visible { outline: 2px solid var(--yhd-point); outline-offset: -2px; }
.bo_sch .sch_btn {
    width: clamp(2.5rem, 3vw, 3rem);
    height: clamp(2.5rem, 3vw, 3rem);
    border: 0;
    background: transparent;
    color: var(--yhd-white);
    font-size: 1rem;
    cursor: pointer;
    transition: color 0.2s;
}
@media (hover: hover) {
    .bo_sch .sch_btn:hover { color: var(--yhd-point); }
}
.bo_sch .sch_btn:focus-visible {
    outline: 2px solid var(--yhd-point);
    outline-offset: 2px;
}
.bo_sch .bo_sch_cls {
    position: absolute;
    top: 0;
    right: 0;
    padding: clamp(0.75rem, 1.5vw, 1rem);
    border: 0;
    background: transparent;
    color: var(--yhd-white);
    font-size: 1.1rem;
    cursor: pointer;
    transition: color 0.2s;
}
@media (hover: hover) {
    .bo_sch .bo_sch_cls:hover { color: var(--yhd-white); }
}
.bo_sch .bo_sch_cls:focus-visible {
    outline: 2px solid var(--yhd-point);
    outline-offset: 2px;
}

/* -------------------------------------------------------------------
   6) View — Post Detail
   ------------------------------------------------------------------- */
#bo_v {
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
    background: var(--yhd-black);
    padding: clamp(2rem, 4vw, 4rem);
    border-radius: clamp(0.75rem, 1vw, 1.25rem);
    color: var(--yhd-white);
}

.bo_v_header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
    margin-bottom: clamp(1.5rem, 3vw, 2rem);
    padding-bottom: clamp(1.5rem, 3vw, 2rem);
    border-bottom: 1px solid var(--yhd-white-10);
}

.bo_v_header .bo_v_cate {
    display: inline-block;
    padding: 0.35em 0.9em;
    background: var(--yhd-point-15);
    color: var(--yhd-point);
    font-size: clamp(0.875rem, 0.15vw + 0.8rem, 0.9375rem);
    font-weight: 600;
    border-radius: 999px;
}

.bo_v_tit {
    font-size: clamp(1.5rem, 2vw, 2rem);
    font-weight: 800;
    color: var(--yhd-white);
    line-height: 1.3;
    margin: 0;
    word-break: keep-all;
}

.bo_v_header .btn_bo_user { justify-content: center; }

.bo_v_info_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}
.bo_v_header .bo_v_info_name {
    font-weight: 600;
    color: var(--yhd-white);
    font-size: clamp(0.9375rem, 0.2vw + 0.85rem, 1.0625rem);
}
.bo_v_info_date {
    font-size: 0.875rem;
    color: var(--yhd-white-40);
}

/* Content area */
#bo_v_atc {
    min-height: clamp(8rem, 15vw, 12.5rem);
}
#bo_v_atc_title {
    position: absolute;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}
#bo_v_con {
    margin: clamp(0.75rem, 1.5vw, 1rem) 0 clamp(1.5rem, 3vw, 2rem);
    line-height: 1.8;
    word-break: keep-all;
    overflow: hidden;
    font-size: clamp(0.9375rem, 0.2vw + 0.85rem, 1.0625rem);
    color: var(--yhd-white-70);
    text-align: center;
}
#bo_v_con a,
#bo_v_con a:link,
#bo_v_con a:visited { color: var(--yhd-point); text-decoration: underline; }
#bo_v_con .bo_v_img {
    text-align: center;
}
#bo_v_con .bo_v_img a {
    display: inline-block;
    line-height: 0;
    width: 70%;
}
#bo_v_con .bo_v_img a img {
    width: 100%;
}
#bo_v_con img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: clamp(1rem, 2vw, 1.5rem) auto;
}

/* Good / Nogood */
#bo_v_act {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin: clamp(1.5rem, 3vw, 2rem) 0;
}
#bo_v_act .bo_v_act_gng { position: relative; }
#bo_v_act .bo_v_good,
#bo_v_act .bo_v_nogood {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.6em 1.5em;
    border: 1px solid var(--yhd-white-15);
    border-radius: 999px;
    color: var(--yhd-white);
    text-decoration: none;
    font-size: clamp(0.875rem, 0.2vw + 0.8rem, 1rem);
    transition: all 0.25s;
}
@media (hover: hover) {
    #bo_v_act .bo_v_good:hover {
        border-color: var(--yhd-point);
        color: var(--yhd-point);
        background: var(--yhd-point-10);
    }
    #bo_v_act .bo_v_nogood:hover {
        border-color: var(--yhd-danger, #ef4444);
        color: var(--yhd-danger, #ef4444);
        background: var(--yhd-danger-10, rgba(239, 68, 68, 0.1));
    }
}
#bo_v_act .bo_v_good:focus-visible,
#bo_v_act .bo_v_nogood:focus-visible {
    outline: 2px solid var(--yhd-point);
    outline-offset: 2px;
}
#bo_v_act i { font-size: 1.1em; }
#bo_v_act_good,
#bo_v_act_nogood {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    padding: 0.5em 1em;
    background: var(--yhd-white);
    color: var(--yhd-dark);
    font-size: 0.875rem;
    border-radius: 999px;
    text-align: center;
    white-space: nowrap;
}

/* Files & Links */
#bo_v_file h2,
#bo_v_link h2 {
    position: absolute;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}
#bo_v_file ul,
#bo_v_link ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#bo_v_file li,
#bo_v_link li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: clamp(0.75rem, 1.5vw, 1rem);
    margin: 0.5rem 0;
    border: 1px solid var(--yhd-white-10);
    border-radius: 0.75rem;
    transition: all 0.25s;
}
@media (hover: hover) {
    #bo_v_file li:hover,
    #bo_v_link li:hover {
        border-color: var(--yhd-point-40);
        background: var(--yhd-point-04);
    }
}
#bo_v_file li i,
#bo_v_link li i {
    font-size: 1.5em;
    color: var(--yhd-white);
    flex-shrink: 0;
    transition: color 0.2s;
}
@media (hover: hover) {
    #bo_v_file li:hover i,
    #bo_v_link li:hover i { color: var(--yhd-point); }
}
#bo_v_file a,
#bo_v_file a:link,
#bo_v_file a:visited,
#bo_v_link a,
#bo_v_link a:link,
#bo_v_link a:visited {
    color: var(--yhd-white);
    text-decoration: none;
    word-break: break-all;
    transition: color 0.2s;
}
@media (hover: hover) {
    #bo_v_file a:hover,
    #bo_v_link a:hover { color: var(--yhd-point); }
}
#bo_v_file a:focus-visible,
#bo_v_link a:focus-visible {
    outline: 2px solid var(--yhd-point);
    outline-offset: 2px;
}
.bo_v_file_cnt,
.bo_v_link_cnt {
    display: block;
    color: var(--yhd-white-50);
    font-size: 0.875rem;
    margin-top: 0.15em;
}

/* -------------------------------------------------------------------
   7) Prev/Next Navigation
   ------------------------------------------------------------------- */
.bo_v_nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: nowrap;
    margin: clamp(2rem, 4vw, 3rem) 0;
    padding: clamp(1.5rem, 3vw, 2rem) 0;
    border-top: 1px solid var(--yhd-white-10);
}
.bo_v_nav_prev,
.bo_v_nav_next {
    flex: 1;
    min-width: 0;
    max-width: calc(50% - clamp(2rem, 5vw, 6.25rem));
}
.bo_v_nav_prev a,
.bo_v_nav_prev a:link,
.bo_v_nav_prev a:visited,
.bo_v_nav_next a,
.bo_v_nav_next a:link,
.bo_v_nav_next a:visited {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 1.5vw, 1rem);
    color: var(--yhd-white);
    text-decoration: none;
    max-width: 100%;
    overflow: hidden;
}
.bo_v_nav_prev a i,
.bo_v_nav_next a i {
    font-size: clamp(1rem, 1.2vw, 1.25rem);
    flex-shrink: 0;
    color: var(--yhd-white-30);
    transition: color 0.3s ease;
}
@media (hover: hover) {
    .bo_v_nav_prev a:hover i,
    .bo_v_nav_next a:hover i { color: var(--yhd-point); }
}
.bo_v_nav_prev a:focus-visible,
.bo_v_nav_next a:focus-visible {
    outline: 2px solid var(--yhd-point);
    outline-offset: 2px;
}
.bo_v_nav_next a {
    justify-content: flex-end;
    text-align: right;
}
.bo_v_nav_text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.bo_v_nav_label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--yhd-white-40);
    letter-spacing: 0.08em;
}
@media (hover: hover) {
    .bo_v_nav_prev a:hover .bo_v_nav_label,
    .bo_v_nav_next a:hover .bo_v_nav_label {
        color: var(--yhd-point);
        transition: color 0.3s ease;
    }
}
.bo_v_nav_subject {
    display: block;
    font-size: clamp(0.875rem, 0.2vw + 0.8rem, 1rem);
    color: var(--yhd-white-50);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.3s ease;
}
@media (hover: hover) {
    .bo_v_nav_prev a:hover .bo_v_nav_subject,
    .bo_v_nav_next a:hover .bo_v_nav_subject { color: var(--yhd-white); }
}
.bo_v_nav_list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: clamp(2.5rem, 3vw, 2.75rem);
    height: clamp(2.5rem, 3vw, 2.75rem);
    position: relative;
    z-index: 1;
    text-decoration: none;
}
.bo_v_nav_list_icon {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--yhd-white-30);
    transform: translate(-11px, -11px);
    box-shadow:
        11px 0 0 var(--yhd-white-30),
        22px 0 0 var(--yhd-white-30),
        0 11px 0 var(--yhd-white-30),
        11px 11px 0 var(--yhd-white-30),
        22px 11px 0 var(--yhd-white-30),
        0 22px 0 var(--yhd-white-30),
        11px 22px 0 var(--yhd-white-30),
        22px 22px 0 var(--yhd-white-30);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}
@media (hover: hover) {
    .bo_v_nav_list:hover .bo_v_nav_list_icon {
        background: var(--yhd-point);
        box-shadow:
            11px 0 0 var(--yhd-point),
            22px 0 0 var(--yhd-point),
            0 11px 0 var(--yhd-point),
            11px 11px 0 var(--yhd-point),
            22px 11px 0 var(--yhd-point),
            0 22px 0 var(--yhd-point),
            11px 22px 0 var(--yhd-point),
            22px 22px 0 var(--yhd-point);
    }
}
.bo_v_nav_list:focus-visible {
    outline: 2px solid var(--yhd-point);
    outline-offset: 2px;
}

/* SNS */
#bo_v_sns {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.3rem;
}
#bo_v_sns li { margin: 0; }
#bo_v_sns li a,
#bo_v_sns li a:link,
#bo_v_sns li a:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: clamp(2rem, 2.5vw, 2.25rem);
    line-height: 1;
    padding: 0 0.6em;
    border-radius: 999px;
    color: var(--yhd-white);
    font-size: 0.875rem;
    text-decoration: none;
}
#bo_v_sns li a:focus-visible {
    outline: 2px solid var(--yhd-point);
    outline-offset: 2px;
}
#bo_v_sns li img { vertical-align: middle; margin-right: 4px; }
#bo_v_sns .sns_f { background: var(--yhd-sns-facebook, #3b5997); }
#bo_v_sns .sns_t { background: var(--yhd-sns-twitter, #09aeee); }
#bo_v_sns .sns_g { background: var(--yhd-sns-google, #ea4026); }
#bo_v_sns .sns_k { background: var(--yhd-sns-kakao, #fbe300); color: var(--yhd-sns-kakao-text, #3C1E1E); }

/* -------------------------------------------------------------------
   8) Write — Form
   ------------------------------------------------------------------- */
#bo_w {
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
    background: var(--yhd-black);
    padding: clamp(2rem, 4vw, 4rem);
    border-radius: clamp(0.75rem, 1vw, 1.25rem);
    color: var(--yhd-white);
}
#bo_w input,
#bo_w textarea,
#bo_w select,
#bo_w button { font-family: inherit; }
.bo_w_header {
    font-size: clamp(1.25rem, 1.5vw + 0.75rem, 1.75rem);
    font-weight: 800;
    color: var(--yhd-white);
    margin: 0 0 clamp(1.5rem, 3vw, 2rem);
}
.bo_w_file_title {
    font-size: clamp(0.9375rem, 0.2vw + 0.85rem, 1.0625rem);
    font-weight: 600;
    color: var(--yhd-point);
    margin: clamp(0.75rem, 1.5vw, 1rem) 0 clamp(0.3rem, 0.5vw, 0.5rem);
    letter-spacing: 0.03em;
}
#fwrite {
    background: var(--yhd-white-05);
    border: 1px solid var(--yhd-white-10);
    border-radius: clamp(0.75rem, 1vw, 1.25rem);
    padding: clamp(1.5rem, 3vw, 2.5rem);
}
.write_div {
    margin: clamp(0.6rem, 1vw, 0.75rem) 0;
    position: relative;
}
.write_div::after {
    display: block;
    visibility: hidden;
    clear: both;
    content: "";
}

/* Category select */
#bo_w .bo_w_select select {
    width: 100%;
    height: clamp(2.5rem, 3vw, 3rem);
    border: 1px solid var(--yhd-white-15);
    border-radius: 0.5rem;
    padding: 0 0.75rem;
    font-size: clamp(0.875rem, 0.2vw + 0.8rem, 1rem);
    color: var(--yhd-white);
    background-color: var(--yhd-surface-dark, #1a1a1a);
    color-scheme: dark;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.4)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.5rem;
    outline: none;
    transition: border-color 0.2s;
}
#bo_w .bo_w_select select:focus { border-color: var(--yhd-point); }
#bo_w .bo_w_select select:focus-visible { outline: 2px solid var(--yhd-point); outline-offset: -2px; }

/* Info fields */
.bo_w_info {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
    gap: clamp(0.5rem, 1vw, 0.75rem);
}
.bo_w_info .frm_input {
    width: 100%;
    margin: 0;
    float: none;
}

/* Inputs */
#bo_w .frm_input,
#bo_w textarea {
    width: 100%;
    height: clamp(2.5rem, 3vw, 3rem);
    border: 1px solid var(--yhd-white-15);
    border-radius: 0.5rem;
    padding: 0 0.75rem;
    font-size: clamp(0.875rem, 0.2vw + 0.8rem, 1rem);
    color: var(--yhd-white);
    background: var(--yhd-white-05);
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
#bo_w .frm_input::placeholder { color: var(--yhd-white-30); }
#bo_w .frm_input:focus,
#bo_w textarea:focus { border-color: var(--yhd-point); }
#bo_w .frm_input:focus-visible,
#bo_w textarea:focus-visible { outline: 2px solid var(--yhd-point); outline-offset: -2px; }
#bo_w textarea {
    height: auto;
    min-height: 12rem;
    padding: 0.75rem;
    resize: vertical;
    line-height: 1.7;
}

/* Options */
#bo_w .bo_v_option {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.75rem, 1.5vw, 1rem);
    list-style: none;
    margin: 0;
    padding: 0;
}
#bo_w .bo_v_option li {
    display: inline-flex;
    align-items: center;
    float: none;
    margin: 0;
}
#bo_w .bo_v_option li label { vertical-align: baseline; }
.write_div .chk_box input[type="checkbox"] + label,
.bo_vc_w .chk_box input[type="checkbox"] + label {
    padding-left: 24px;
    font-size: clamp(0.875rem, 0.2vw + 0.8rem, 1rem);
}
.write_div .chk_box input[type="checkbox"] + label span,
.bo_vc_w .chk_box input[type="checkbox"] + label span {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    margin: 0;
}

/* Subject + autosave */
#bo_w .bo_w_tit { position: relative; }
#bo_w .bo_w_tit .frm_input { padding-right: 140px; }
#autosave_wrapper { position: relative; }
#btn_autosave {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    height: auto;
    padding: 0.3em 0.8em;
    border: 1px solid var(--yhd-white-15);
    border-radius: 999px;
    background: transparent;
    color: var(--yhd-white);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}
@media (hover: hover) {
    #btn_autosave:hover {
        border-color: var(--yhd-point);
        color: var(--yhd-point);
    }
}
#btn_autosave:focus-visible {
    outline: 2px solid var(--yhd-point);
    outline-offset: 2px;
}
#autosave_pop {
    display: none;
    z-index: 10;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    width: min(100%, 350px);
    background: var(--yhd-surface-dark);
    border: 1px solid var(--yhd-white-15);
    border-radius: 0.75rem;
    box-shadow: 0 4px 16px var(--yhd-shadow-dark, rgba(0, 0, 0, 0.4));
    overflow: hidden;
}
#autosave_pop strong {
    display: block;
    padding: 0.75rem 1rem;
    font-size: clamp(0.875rem, 0.2vw + 0.8rem, 1rem);
    border-bottom: 1px solid var(--yhd-white-10);
    color: var(--yhd-white);
}
#autosave_pop ul {
    list-style: none;
    margin: 0;
    padding: 0.5rem;
    max-height: 180px;
    overflow-y: auto;
}
#autosave_pop li {
    padding: 0.5rem;
    border-radius: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
@media (hover: hover) {
    #autosave_pop li:hover { background: var(--yhd-white-05); }
}
#autosave_pop a,
#autosave_pop a:link,
#autosave_pop a:visited {
    color: var(--yhd-white);
    text-decoration: none;
}
#autosave_pop a:focus-visible {
    outline: 2px solid var(--yhd-point);
    outline-offset: 2px;
}
#autosave_pop span {
    font-size: 0.875rem;
    color: var(--yhd-white);
}
#autosave_pop div { text-align: center; padding: 0.5rem; }
.autosave_close {
    cursor: pointer;
    width: 100%;
    padding: 0.5rem;
    background: none;
    border: 0;
    border-top: 1px solid var(--yhd-white-10);
    color: var(--yhd-white);
    font-weight: 600;
    font-size: 0.875rem;
    transition: color 0.2s;
}
@media (hover: hover) {
    .autosave_close:hover { color: var(--yhd-point); }
}
.autosave_close:focus-visible {
    outline: 2px solid var(--yhd-point);
    outline-offset: 2px;
}
.autosave_content { display: none; }
.autosave_del {
    background: url(./img/close_btn.png) no-repeat center;
    text-indent: -999px;
    overflow: hidden;
    height: 20px;
    width: 20px;
    border: 0;
    cursor: pointer;
}
.autosave_del:focus-visible {
    outline: 2px solid var(--yhd-point);
    outline-offset: 2px;
}

/* Char count */
#char_count_desc {
    display: block;
    margin: 0 0 0.4rem;
    color: var(--yhd-white);
    font-size: 0.875rem;
}
#char_count_wrap {
    margin: 0.3rem 0 0;
    text-align: right;
    font-size: 0.875rem;
    color: var(--yhd-white);
}
#char_count { font-weight: 700; color: var(--yhd-point); }

/* File input */
#bo_w .bo_w_flie .file_wr {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid var(--yhd-white-15);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin: 0;
    min-height: clamp(2.5rem, 3vw, 3rem);
    overflow: hidden;
    transition: border-color 0.2s;
}
#bo_w .bo_w_flie .file_wr:focus-within { border-color: var(--yhd-point); }
#bo_w .bo_w_flie .lb_icon {
    color: var(--yhd-white);
    font-size: 1.1em;
    margin-right: 0.5rem;
    flex-shrink: 0;
}
#bo_w .bo_w_flie .frm_file {
    border: 0;
    padding: 0;
    font-size: clamp(0.875rem, 0.2vw + 0.8rem, 1rem);
    color: var(--yhd-white);
    min-width: 0;
    max-width: 100%;
}
#bo_w .bo_w_flie .frm_input { margin-top: 0.5rem; }
.file_del {
    font-size: 0.875rem;
    color: var(--yhd-white);
    margin-top: 0.3rem;
    display: block;
}

/* Extra fields */
#bo_w .bo_w_extra label {
    display: block;
    font-size: clamp(0.9375rem, 0.2vw + 0.85rem, 1.0625rem);
    font-weight: 600;
    color: var(--yhd-point);
    margin-bottom: 0.3rem;
}

/* Editor container */
.wr_content {
    border-radius: 0.5rem;
    overflow: hidden;
}

/* Action buttons */
#bo_w .btn_confirm {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: clamp(1.5rem, 3vw, 2rem);
}
#bo_w .btn_cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75em 2em;
    border-radius: 999px;
    background: var(--yhd-white-10);
    color: var(--yhd-white);
    font-weight: 600;
    font-size: clamp(0.875rem, 0.2vw + 0.8rem, 1rem);
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: all 0.25s;
}
@media (hover: hover) {
    #bo_w .btn_cancel:hover {
        background: var(--yhd-white-20);
        color: var(--yhd-white);
    }
}
#bo_w .btn_cancel:focus-visible {
    outline: 2px solid var(--yhd-point);
    outline-offset: 2px;
}
#bo_w .btn_submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75em 2em;
    border-radius: 999px;
    background: var(--yhd-point);
    color: var(--yhd-dark);
    font-weight: 700;
    font-size: clamp(0.875rem, 0.2vw + 0.8rem, 1rem);
    border: 0;
    cursor: pointer;
    transition: all 0.25s;
}
@media (hover: hover) {
    #bo_w .btn_submit:hover { background: var(--yhd-point-hover); }
}
#bo_w .btn_submit:focus-visible {
    outline: 2px solid var(--yhd-point);
    outline-offset: 2px;
}

/* -------------------------------------------------------------------
   9) Comments
   ------------------------------------------------------------------- */
.cmt_btn {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    border: 0;
    border-bottom: 2px solid var(--yhd-white-20);
    background: transparent;
    font-weight: 700;
    font-size: clamp(1rem, 0.2vw + 0.9rem, 1.125rem);
    margin: clamp(1.5rem, 3vw, 2rem) 0 0;
    padding: 0 0 clamp(0.6rem, 1vw, 0.75rem);
    cursor: pointer;
    color: var(--yhd-white);
}
.cmt_btn b { font-size: 1em; color: var(--yhd-white); }
.cmt_btn .total {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    color: var(--yhd-point);
}
.cmt_btn .cmt_more {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url(./img/btn_cmt.png) no-repeat right 2px;
    margin-left: auto;
    filter: invert(1);
}
.cmt_btn_op .cmt_more { background-position: right -8px; }

#bo_vc { margin-top: clamp(0.75rem, 1.5vw, 1rem); }
#bo_vc h2 {
    position: absolute;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

#bo_vc article {
    display: flex;
    align-items: flex-start;
    gap: clamp(0.5rem, 1vw, 0.75rem);
    padding: clamp(0.75rem, 1.5vw, 1rem) 0;
    border-bottom: 1px solid var(--yhd-white-10);
    position: relative;
}
#bo_vc article::after {
    display: block;
    visibility: hidden;
    clear: both;
    content: "";
}
#bo_vc .pf_img { flex-shrink: 0; }
#bo_vc .pf_img img,
#bo_vc .profile_img img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}
#bo_vc .cm_wrap { flex: 1; min-width: 0; }
#bo_vc header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4em;
    position: relative;
}
#bo_vc header::after {
    display: block;
    visibility: hidden;
    clear: both;
    content: "";
}
#bo_vc header h2 {
    position: absolute;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}
#bo_vc header .profile_img { display: none; }
#bo_vc header .icon_reply {
    position: absolute;
    top: 0;
    left: -20px;
}
#bo_vc .member,
#bo_vc .guest,
#bo_vc .sv_member,
#bo_vc .sv_guest {
    font-weight: 600;
    color: var(--yhd-white);
    font-size: clamp(0.875rem, 0.2vw + 0.8rem, 1rem);
}
.bo_vc_hdinfo {
    color: var(--yhd-white);
    font-size: 0.875rem;
}
#bo_vc .cmt_contents {
    line-height: 1.7;
    padding: 0.3rem 0 0;
    font-size: clamp(0.875rem, 0.2vw + 0.8rem, 1rem);
    color: var(--yhd-white);
}
#bo_vc .cmt_contents p { margin: 0; }
#bo_vc .cmt_contents p a,
#bo_vc .cmt_contents p a:link,
#bo_vc .cmt_contents p a:visited { text-decoration: underline; color: var(--yhd-point); }
#bo_vc .cmt_contents p a.s_cmt { color: var(--yhd-secret-comment, #ed6479); }
#bo_vc_empty {
    text-align: center;
    padding: clamp(2rem, 4vw, 3rem) 0;
    color: var(--yhd-white);
    font-size: clamp(0.875rem, 0.2vw + 0.8rem, 1rem);
}

.bo_vl_opt {
    position: absolute;
    top: clamp(0.75rem, 1.5vw, 1rem);
    right: 0;
}
.btn_cm_opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(1.75rem, 2.5vw, 2.25rem);
    height: clamp(1.75rem, 2.5vw, 2.25rem);
    border-radius: 50%;
    border: 1px solid var(--yhd-white-15);
    background: transparent;
    color: var(--yhd-white);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}
@media (hover: hover) {
    .btn_cm_opt:hover {
        background: var(--yhd-point);
        color: var(--yhd-dark);
        border-color: var(--yhd-point);
    }
}
.btn_cm_opt:focus-visible {
    outline: 2px solid var(--yhd-point);
    outline-offset: 2px;
}
.bo_vc_act {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    min-width: 80px;
    background: var(--yhd-surface-dark);
    border: 1px solid var(--yhd-white-15);
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px var(--yhd-shadow-dark, rgba(0, 0, 0, 0.4));
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 999;
    overflow: hidden;
}
.bo_vc_act li { border-bottom: 1px solid var(--yhd-white-10); }
.bo_vc_act li:last-child { border-bottom: 0; }
.bo_vc_act li a,
.bo_vc_act li a:link,
.bo_vc_act li a:visited {
    display: block;
    padding: 0.5rem 0.9rem;
    color: var(--yhd-white);
    text-decoration: none;
    font-size: 0.875rem;
    transition: all 0.2s;
}
@media (hover: hover) {
    .bo_vc_act li a:hover {
        background: var(--yhd-point-10);
        color: var(--yhd-point);
    }
}
.bo_vc_act li a:focus-visible {
    outline: 2px solid var(--yhd-point);
    outline-offset: -2px;
}

/* Comment write form */
.bo_vc_w {
    position: relative;
    margin: clamp(0.75rem, 1.5vw, 1rem) 0;
    display: block;
}
.bo_vc_w::after {
    display: block;
    visibility: hidden;
    clear: both;
    content: "";
}
.bo_vc_w h2 {
    position: absolute;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}
.bo_vc_w #char_cnt {
    display: block;
    margin: 0 0 0.3rem;
    font-size: 0.875rem;
    color: var(--yhd-white);
}
.bo_vc_w #char_cnt #char_count {
    font-weight: 700;
    color: var(--yhd-point);
}
.bo_vc_w textarea {
    width: 100%;
    min-height: 100px;
    border: 1px solid var(--yhd-white-15);
    border-radius: 0.5rem;
    padding: 0.75rem;
    font-size: clamp(0.875rem, 0.2vw + 0.8rem, 1rem);
    line-height: 1.7;
    color: var(--yhd-white);
    background: var(--yhd-white-05);
    outline: none;
    resize: vertical;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.bo_vc_w textarea::placeholder { color: var(--yhd-white-30); }
.bo_vc_w textarea:focus { border-color: var(--yhd-point); }
.bo_vc_w textarea:focus-visible { outline: 2px solid var(--yhd-point); outline-offset: -2px; }

.bo_vc_w_wr::after {
    display: block;
    visibility: hidden;
    clear: both;
    content: "";
}
.bo_vc_w_info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: clamp(0.5rem, 1vw, 0.75rem) 0;
}
.bo_vc_w_info .frm_input {
    height: clamp(2.25rem, 2.5vw, 2.5rem);
    border: 1px solid var(--yhd-white-15);
    border-radius: 0.5rem;
    padding: 0 0.75rem;
    font-size: clamp(0.875rem, 0.2vw + 0.8rem, 1rem);
    color: var(--yhd-white);
    background: var(--yhd-white-05);
    outline: none;
    transition: border-color 0.2s;
    float: none;
    margin: 0;
}
.bo_vc_w_info .frm_input::placeholder { color: var(--yhd-white-30); }
.bo_vc_w_info .frm_input:focus { border-color: var(--yhd-point); }
.bo_vc_w_info .frm_input:focus-visible { outline: 2px solid var(--yhd-point); outline-offset: -2px; }
.bo_vc_w_info #captcha {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}
.bo_vc_w .btn_confirm {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: clamp(0.5rem, 1vw, 0.75rem);
}
.secret_cm {
    display: inline-flex;
    align-items: center;
}
.bo_vc_w .btn_submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6em 1.5em;
    border-radius: 999px;
    background: var(--yhd-point);
    color: var(--yhd-dark);
    font-weight: 700;
    font-size: clamp(0.875rem, 0.2vw + 0.8rem, 1rem);
    border: 0;
    cursor: pointer;
    transition: all 0.25s;
}
@media (hover: hover) {
    .bo_vc_w .btn_submit:hover { background: var(--yhd-point-hover); }
}
.bo_vc_w .btn_submit:focus-visible {
    outline: 2px solid var(--yhd-point);
    outline-offset: 2px;
}

/* SNS */
#bo_vc_send_sns { display: inline-flex; }
#bo_vc_sns {
    display: inline-flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.3rem;
}
#bo_vc_sns li { margin: 0; }
#bo_vc_sns .sns_li_f {
    border-radius: 4px;
    background: var(--yhd-sns-facebook, #3a589b);
    height: 36px;
    line-height: 36px;
    padding: 0 0.5rem;
}
#bo_vc_sns .sns_li_t {
    border-radius: 4px;
    background: var(--yhd-sns-twitter, #00aced);
    height: 36px;
    line-height: 36px;
    padding: 0 0.5rem;
}
#bo_vc_sns .sns_li_off { background: var(--yhd-white-30, #555); }
#bo_vc_sns a,
#bo_vc_sns a:link,
#bo_vc_sns a:visited {
    display: inline-flex;
    align-items: center;
    padding: 0 0.5em;
    color: var(--yhd-white);
}
#bo_vc_sns a:focus-visible {
    outline: 2px solid var(--yhd-point);
    outline-offset: 2px;
}
#bo_vc_sns input { margin: 0 4px 0 0; }

/* -------------------------------------------------------------------
   10) Pagination
   ------------------------------------------------------------------- */
.pg_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: clamp(1.5rem, 3vw, 2.5rem) 0;
}
.pg_wrap a,
.pg_wrap .pg_current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(2rem, 2.5vw, 2.5rem);
    height: clamp(2rem, 2.5vw, 2.5rem);
    padding: 0 0.5em;
    border-radius: 0.4rem;
    font-size: 0.875rem;
    text-decoration: none;
    transition: all 0.2s;
}
.pg_wrap a,
.pg_wrap a:link,
.pg_wrap a:visited { color: var(--yhd-white); }
@media (hover: hover) {
    .pg_wrap a:hover {
        background: var(--yhd-white-10);
        color: var(--yhd-white);
    }
}
.pg_wrap .pg_current {
    background: var(--yhd-point);
    color: var(--yhd-dark);
    font-weight: 700;
}
.pg_wrap a:focus-visible {
    outline: 2px solid var(--yhd-point);
    outline-offset: 2px;
}

/* -------------------------------------------------------------------
   11) Responsive
   ------------------------------------------------------------------- */

/* 48em (≈768px) — 세로 중앙 정렬 스택 (카테고리 / 제목 / 날짜) */
@media (max-width: 48em) {
    #bo_v_con .bo_v_img a {
        width: 100%;
    }
    .tbl_wrap thead {
        display: none;
    }
    .tbl_wrap table,
    .tbl_wrap tbody {
        display: block;
    }
    .tbl_wrap tbody tr {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: clamp(1rem, 2vw, 1.5rem) 0;
        border-bottom: 1px solid var(--yhd-white-10);
    }
    .tbl_wrap tbody tr td {
        border-bottom: none;
        text-align: center;
        padding: 0;
    }
    /* 숨기는 컬럼 (번호/파일/글쓴이/조회) */
    .tbl_wrap .td_num2,
    .tbl_wrap .td_file,
    .tbl_wrap .td_name,
    .tbl_wrap .td_num {
        display: none;
    }
    /* 체크박스 — 행 왼쪽 상단 절대 배치 */
    .tbl_wrap tbody tr {
        position: relative;
    }
    .tbl_wrap .td_chk {
        position: absolute;
        top: clamp(1rem, 2vw, 1.5rem);
        left: 0;
    }
    /* 제목 영역 — 전체 너비 */
    .tbl_wrap .td_subject {
        width: 100%;
    }
    /* bo_tit — 세로 스택 중앙 정렬 (카테고리 → 제목 → 뱃지) */
    .bo_tit {
        flex-direction: column;
        align-items: center;
        gap: 1.5em;
    }
    /* 제목 링크 — 줄바꿈 허용, 중앙 정렬 */
    .bo_tit a {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        text-align: center;
    }
    /* 날짜 */
    .tbl_wrap .td_datetime {
        padding-top: 0.35rem;
    }
    /* 공지 — tr 배경 */
    .tbl_wrap tbody tr.bo_notice {
        background: var(--yhd-point-04);
    }
    .tbl_wrap tbody tr.bo_notice td {
        background: transparent;
    }
}
@media (max-width: 48em) and (hover: hover) {
    .tbl_wrap tbody tr:hover {
        background: var(--yhd-white-04);
    }
    .tbl_wrap tbody tr:hover td {
        background: transparent;
        color: var(--yhd-white);
    }
}


/* 40em (≈640px) — 레이아웃 구조 전환 */
@media (max-width: 40em) {
    /* View — 헤더 버튼 래핑 */
    .bo_v_header .btn_bo_user {
        flex-wrap: wrap;
        justify-content: center;
    }
    /* View — 이전/다음 폭 조정 */
    .bo_v_nav_prev,
    .bo_v_nav_next {
        max-width: calc(50% - 1.5rem);
    }
    /* View — Good/Nogood 세로 배치 */
    #bo_v_act {
        flex-direction: column;
        align-items: center;
    }
    /* Write — 자동저장 세로 배치 */
    #bo_w .bo_w_tit .frm_input {
        padding-right: 0.75rem;
    }
    #btn_autosave {
        position: static;
        transform: none;
        margin-top: 0.5rem;
        display: inline-block;
    }
    #autosave_wrapper {
        display: flex;
        flex-direction: column;
    }
    /* Write — 버튼 세로 배치, 전체 너비 */
    #bo_w .btn_confirm {
        flex-direction: column;
    }
    #bo_w .btn_confirm .btn_cancel,
    #bo_w .btn_confirm .btn_submit {
        width: 100%;
    }
    /* Comment — 프로필 이미지 축소 */
    #bo_vc .pf_img img,
    #bo_vc .profile_img img {
        width: 32px;
        height: 32px;
    }
}

/* 30em (≈480px) — 최소 화면 대응 */
@media (max-width: 30em) {
    /* TABLE — 카테고리 배지 숨김 (제목 공간 확보) */
    .bo_cate_link {
        display: none;
    }
    /* View — 이전/다음 텍스트 숨김 */
    .bo_v_nav_text {
        display: none;
    }
}

/* -------------------------------------------------------------------
   12) Reduced Motion
   ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.01ms !important;
    }
}

/* -------------------------------------------------------------------
   13) Dark wrapper (board.php 경유 시)
   ------------------------------------------------------------------- */
body #bo_list,
body #bo_v,
body #bo_w {
    color: var(--yhd-white);
}