@charset "utf-8";

/* ===================================================================
   Review Board Skin — 윤회당 (yunhoedang) — Dark Theme
   =================================================================== */

/* -------------------------------------------------------------------
   1) List — Card Grid
   ------------------------------------------------------------------- */
#bo_list {
    position: relative;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
#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;
}

/* Card Grid */
.bo_list_grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: clamp(2rem, 3.5vw, 3rem);
}

/* Empty */
.bo_list_empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: clamp(3rem, 6vw, 5rem) 0;
    color: var(--yhd-white);
    font-size: clamp(0.875rem, 0.2vw + 0.8rem, 1rem);
}

/* Card */
.bo_list_card {
    position: relative;
    background: var(--yhd-white-05);
    border-radius: clamp(0.75rem, 1vw, 1.25rem);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s;
}
.bo_list_card:hover {
    transform: translateY(-2px);
}

/* Card — Badges wrapper (bottom-left of thumbnail) */
.bo_list_card_badges {
    position: absolute;
    bottom: clamp(0.5rem, 1vw, 0.75rem);
    left: clamp(0.5rem, 1vw, 0.75rem);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* Card — Notice badge */
.bo_list_card_notice {
    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);
    backdrop-filter: blur(4px);
    padding: 0.5em 0.7em 0.35em;
    border-radius: 4px;
    line-height: 1;
}

/* Card — Checkbox (admin) */
.bo_list_card .td_chk {
    position: absolute;
    top: clamp(0.5rem, 1vw, 0.75rem);
    left: clamp(0.5rem, 1vw, 0.75rem);
    z-index: 3;
}
.bo_list_card .td_chk.chk_box input[type="checkbox"] + label span {
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.bo_list_card .td_chk.chk_box input[type="checkbox"]:checked + label span {
    background: var(--yhd-point);
    border-color: var(--yhd-point);
    background-image: url(./img/chk.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px;
    box-shadow: 0 2px 12px rgba(251, 193, 0, 0.4);
}

/* Card — Thumbnail */
.bo_list_card_thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    flex-shrink: 0;
    width: 100%;
}
.bo_list_card_thumb a:not(.bo_list_card_edit) {
    display: block;
    width: 100%;
    height: 100%;
}
.bo_list_card_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s;
}
.bo_list_card:hover .bo_list_card_thumb img {
    transform: scale(1.05);
}

/* Card — Category tag on thumbnail */
.bo_list_card_tag {
    position: absolute;
    top: clamp(0.6rem, 1.2vw, 1rem);
    right: clamp(0.6rem, 1.2vw, 1rem);
    z-index: 2;
    display: inline-block;
    background: var(--yhd-black-60);
    color: var(--yhd-point);
    font-size: 0.875rem;
    font-weight: 700;
    padding: 0.5em 1.2em;
    border-radius: 999px;
    line-height: 1.4;
}

/* Card — Body */
.bo_list_card_body {
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1vw, 0.75rem);
    min-width: 0;
}

/* Card — Subject */
.bo_list_card_subject {
    font-size: clamp(0.9375rem, 0.2vw + 0.85rem, 1.0625rem);
    font-weight: 700;
    margin: 0;
    line-height: 1.4;
    min-width: 0;
}
.bo_list_card_subject a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--yhd-white);
    text-decoration: none;
    transition: color 0.2s;
}
.bo_list_card_subject a:hover {
    color: var(--yhd-point);
}
.bo_list_card_subject .is-secret {
    display: inline-flex;
    align-items: center;
    margin-right: 0.25em;
    color: var(--yhd-white);
    font-size: 0.85em;
}
/* Card — New badge */
.bo_list_card_new {
    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));
    backdrop-filter: blur(4px);
    padding: 0.5em 0.7em 0.35em;
    border-radius: 4px;
    line-height: 1;
}

/* Card — Text excerpt */
#bo_list .bo_list_card_text,
#bo_list .bo_list_card_text:link,
#bo_list .bo_list_card_text:visited {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--yhd-white-50);
    transition: color 0.3s ease;
    margin: 0;
    word-break: keep-all;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-decoration: none;
}
#bo_list .bo_list_card_text:hover {
    color: var(--yhd-point);
}

/* -------------------------------------------------------------------
   2) 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 {
    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,
    #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 #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;
}

/* -------------------------------------------------------------------
   3) Buttons — Top/Bottom, Options
   ------------------------------------------------------------------- */
.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;
}

/* Top area */
#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);
}

/* All-check */
.bo_list_allchk {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn_bo_user {
    display: flex;
    align-items: center;
    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;
}
.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 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;
}
.more_opt li button:hover,
.more_opt li a:hover {
    background: var(--yhd-point-10);
    color: var(--yhd-point);
}
.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);
}

/* -------------------------------------------------------------------
   4) Search Modal
   ------------------------------------------------------------------- */
.bo_sch_wrap {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
}
.bo_sch_bg {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    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 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;
}
.bo_sch .sch_btn:hover { color: var(--yhd-point); }
.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;
}
.bo_sch .bo_sch_cls:hover { color: var(--yhd-white); }

/* -------------------------------------------------------------------
   5) Pagination
   ------------------------------------------------------------------- */
.pg_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    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 {
    color: var(--yhd-white);
}
.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;
}

/* -------------------------------------------------------------------
   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);
}

/* Header — vertical center layout */
.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);
}

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

/* Title */
.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;
}

/* Buttons */
.bo_v_header .btn_bo_user {
    justify-content: center;
}

/* Author + Date wrapper */
.bo_v_info_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

/* Author name */
.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);
}

/* Date */
.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;
}

/* Content */
#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 { color: var(--yhd-point); text-decoration: underline; }
#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;
}
#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 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;
}
#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;
}
#bo_v_file li:hover i,
#bo_v_link li:hover i {
    color: var(--yhd-point);
}
#bo_v_file a,
#bo_v_link a {
    color: var(--yhd-white);
    text-decoration: none;
    word-break: break-all;
    transition: color 0.2s;
}
#bo_v_file a:hover,
#bo_v_link a:hover {
    color: var(--yhd-point);
}
.bo_v_file_cnt,
.bo_v_link_cnt {
    display: block;
    color: var(--yhd-white-50);
    font-size: 0.875rem;
    margin-top: 0.15em;
}

/* 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_next a {
    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;
}
.bo_v_nav_prev a:hover i,
.bo_v_nav_next a:hover i {
    color: var(--yhd-point);
}
.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;
}
.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;
}
.bo_v_nav_prev a:hover .bo_v_nav_subject,
.bo_v_nav_next a:hover .bo_v_nav_subject {
    color: var(--yhd-white);
}
/* Center list icon — 3x3 dot grid */
.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;
}
.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 skin styles */
#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 {
    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 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); }

/* -------------------------------------------------------------------
   7) 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;
}
#btn_autosave:hover {
    border-color: var(--yhd-point);
    color: var(--yhd-point);
}
#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 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;
}
#autosave_pop li:hover { background: var(--yhd-white-05); }
#autosave_pop a {
    color: var(--yhd-white);
    text-decoration: none;
}
#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;
}
.autosave_close:hover { color: var(--yhd-point); }
.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;
}

/* 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;
}
#bo_w .btn_cancel:hover {
    background: var(--yhd-white-20);
    color: var(--yhd-white);
}
#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;
}
#bo_w .btn_submit:hover { background: var(--yhd-point-hover); }

/* -------------------------------------------------------------------
   8) Comment
   ------------------------------------------------------------------- */
.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;
}

/* Comment item */
#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: "";
}

/* Comment profile */
#bo_vc .pf_img {
    flex-shrink: 0;
}
#bo_vc .pf_img img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}
#bo_vc .profile_img img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

/* Comment body */
#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;
}

/* Comment contents */
#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 { 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);
}

/* Comment options */
.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;
}
.btn_cm_opt:hover {
    background: var(--yhd-point);
    color: var(--yhd-dark);
    border-color: var(--yhd-point);
}

.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 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 {
    display: block;
    padding: 0.5rem 0.9rem;
    color: var(--yhd-white);
    text-decoration: none;
    font-size: 0.875rem;
    transition: all 0.2s;
}
.bo_vc_act li a:hover {
    background: var(--yhd-point-10);
    color: var(--yhd-point);
}

/* 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;
}
.bo_vc_w .btn_submit:hover { background: var(--yhd-point-hover); }

/* 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 {
    display: inline-flex;
    align-items: center;
    padding: 0 0.5em;
    color: var(--yhd-white);
}
#bo_vc_sns input { margin: 0 4px 0 0; }

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

/* -------------------------------------------------------------------
   10) Common
   ------------------------------------------------------------------- */
.sound_only {
    position: absolute;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    width: 0;
    height: 0;
}

/* Responsive */
@media (max-width: 1400px) {
    .bo_list_grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1024px) {
    .bo_list_grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .bo_list_grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .bo_list_grid {
        grid-template-columns: 1fr;
    }
    .bo_v_header .btn_bo_user {
        flex-wrap: wrap;
        justify-content: center;
    }
    .bo_v_nav {
        gap: clamp(0.5rem, 2vw, 1rem);
    }
    .bo_v_nav_prev,
    .bo_v_nav_next {
        max-width: calc(50% - 1.5rem);
    }
    #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%;
    }
}
@media (max-width: 500px) {
    .bo_v_nav_text {
        display: none;
    }
}

/* -------------------------------------------------------------------
   11) Card — 수정 버튼 (관리자/작성자)
   ------------------------------------------------------------------- */
.bo_list_card_edit {
    position: absolute;
    top: clamp(0.5rem, 1vw, 0.75rem);
    right: clamp(0.5rem, 1vw, 0.75rem);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(2rem, 2.5vw, 2.5rem);
    height: clamp(2rem, 2.5vw, 2.5rem);
    border-radius: clamp(0.375rem, 0.5vw, 0.5rem);
    background: rgba(0, 0, 0, 0.7);
    color: var(--yhd-white);
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.25s, background 0.25s;
}
.bo_list_card:hover .bo_list_card_edit {
    opacity: 1;
}
.bo_list_card_edit:hover {
    background: var(--yhd-point);
    color: var(--yhd-dark);
}
.bo_list_card_edit:focus-visible {
    opacity: 1;
    outline: 2px solid var(--yhd-point);
    outline-offset: 2px;
}

/* -------------------------------------------------------------------
   12) Video — 플레이 아이콘 오버레이
   ------------------------------------------------------------------- */
.bo_list_card_thumb a:not(.bo_list_card_edit) {
    position: relative;
}
.bo_list_card_play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
    filter: drop-shadow(0 0.25rem 0.75rem rgba(0, 0, 0, 0.5));
}
.bo_list_card_play svg {
    width: clamp(3.75rem, 5vw, 4.5rem);
    height: auto;
}
.bo_list_card_play svg circle {
    fill: rgba(0, 0, 0, 0.75);
    transition: fill 0.3s;
}
.bo_list_card_play svg polygon {
    fill: #fff;
}
.bo_list_card:hover .bo_list_card_play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
}
.bo_list_card:hover .bo_list_card_play svg circle {
    fill: var(--yhd-point);
}

/* -------------------------------------------------------------------
   12) Video — 유튜브 iframe (View 상세)
   ------------------------------------------------------------------- */
.bo_v_video {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
    border-radius: clamp(0.5rem, 1vw, 1rem);
    overflow: hidden;
    background: var(--yhd-black);
}
.bo_v_video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* -------------------------------------------------------------------
   13) Video — 유튜브 팝업 모달
   ------------------------------------------------------------------- */
.yhd-video-modal {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
.yhd-video-modal.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* 배경 — 클릭한 썸네일 블러 처리 */
.yhd-video-modal-bg {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.9);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(1.5rem) brightness(0.4);
    transform: scale(1.1);
}

/* 래퍼 — 닫기 버튼 + 영상 */
.yhd-video-modal-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 1.3vw, 1.5625rem);
}

/* 닫기 버튼 — fixed 우상단 */
.yhd-video-modal-close {
    position: fixed;
    top: clamp(1rem, 2.0833vw, 2.5rem);
    right: clamp(1rem, 2.0833vw, 2.5rem);
    z-index: 10000;
    width: clamp(2.75rem, 3.125vw, 3.75rem);
    height: clamp(2.75rem, 3.125vw, 3.75rem);
    border: none;
    border-radius: clamp(0.5rem, 0.5208vw, 0.625rem);
    background: rgba(50, 50, 50, 0.9);
    cursor: pointer;
    transition: background 0.3s ease;
}
@media (hover: hover) {
    .yhd-video-modal-close:hover {
        background: var(--yhd-point);
    }
}
.yhd-video-modal-close:focus-visible {
    outline: 2px solid var(--yhd-point);
    outline-offset: 2px;
}
.yhd-video-modal-close span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 45%;
    height: 1px;
    background: #fff;
}
.yhd-video-modal-close span:first-child {
    transform: translate(-50%, -50%) rotate(45deg);
}
.yhd-video-modal-close span:last-child {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* 영상 영역 — 높이 기반 (70vh + 16:9) */
.yhd-video-modal-inner {
    height: 70vh;
    aspect-ratio: 16 / 9;
    max-width: 90vw;
    border-radius: clamp(0.5rem, 1vw, 1rem);
    overflow: hidden;
    background: var(--yhd-black);
}
.yhd-video-modal-iframe {
    width: 100%;
    height: 100%;
}

/* 모바일 세로 → 강제 가로 모드 */
.yhd-video-modal.is-landscape .yhd-video-modal-wrap {
    position: fixed;
    top: 0;
    left: 100dvw;
    width: 100dvh;
    height: 100dvw;
    transform-origin: top left;
    transform: rotate(90deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem;
}
.yhd-video-modal.is-landscape .yhd-video-modal-inner {
    height: 80%;
    width: auto;
    aspect-ratio: 16 / 9;
    max-width: 95%;
}
.yhd-video-modal.is-landscape .yhd-video-modal-close {
    position: absolute;
    top: clamp(0.5rem, 1vw, 1rem);
    right: clamp(0.5rem, 1vw, 1rem);
    left: auto;
}

/* -------------------------------------------------------------------
   14) Video — Write 링크 필드
   ------------------------------------------------------------------- */
.bo_w_link {
    margin-bottom: 1rem;
}
.bo_w_link 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;
}
.bo_w_link small {
    color: var(--yhd-white-30);
    font-weight: 400;
}