@charset "utf-8";

/* =========================================================
   HAPPYAD BOARD UI - SCOPED SAFE EDITION
   theme.css ǵ帮 ʰ board style.css ü
   ========================================================= */

/* =========================================================
   CSS VARIABLES / COMMON
   ========================================================= */

#bo_gall.ha-board-wrap,
#bo_v.ha-view-wrap,
#bo_w.ha-write-wrap,
#bo_vc,
.ha-board-wrap,
.ha-view-wrap,
.ha-write-wrap {
    --ha-primary: #1f2937;
    --ha-primary-2: #374151;
    --ha-accent: #8ccf69;
    --ha-accent-2: #74b957;
    --ha-accent-soft: #f5fbef;
    --ha-accent-soft-2: #eef7e6;
    --ha-danger: #ef4444;
    --ha-text: #1f2937;
    --ha-text-sub: #6b7280;
    --ha-line: #e8ece5;
    --ha-line-soft: #f3f5f2;
    --ha-bg: #f8faf8;
    --ha-card: #ffffff;
    --ha-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
    --ha-shadow-hover: 0 10px 24px rgba(15, 23, 42, 0.07);
    --ha-radius: 12px;
    color: var(--ha-text);
}

#bo_gall.ha-board-wrap,
#bo_v.ha-view-wrap,
#bo_w.ha-write-wrap {
    margin: 0 auto 40px;
}

#bo_gall.ha-board-wrap *,
#bo_gall.ha-board-wrap *:before,
#bo_gall.ha-board-wrap *:after,
#bo_v.ha-view-wrap *,
#bo_v.ha-view-wrap *:before,
#bo_v.ha-view-wrap *:after,
#bo_w.ha-write-wrap *,
#bo_w.ha-write-wrap *:before,
#bo_w.ha-write-wrap *:after {
    box-sizing: border-box;
}

#bo_gall.ha-board-wrap a,
#bo_v.ha-view-wrap a,
#bo_w.ha-write-wrap a {
    text-decoration: none;
    transition: all .2s ease;
}

#bo_gall.ha-board-wrap img,
#bo_v.ha-view-wrap img,
#bo_w.ha-write-wrap img {
    display: block;
    max-width: 100%;
    height: auto;
}

/*  ؽƮ Խ  ȿ */
#bo_gall .sound_only,
#bo_v .sound_only,
#bo_w .sound_only,
#bo_vc .sound_only,
.ha-comment-wrap .sound_only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
}

/* =========================================================
   FRAME / COMMON
   ========================================================= */

#bo_gall.ha-board-frame,
.ha-board-frame {
    padding: 24px;
    border: 1px solid #e3e9de;
    border-radius: 16px;
    background: #fcfdfb;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

#bo_v.ha-view-wrap .ha-section-card,
#bo_v.ha-view-wrap .ha-info-card,
#bo_v.ha-view-wrap .ha-view-gallery-card,
#bo_v.ha-view-wrap .ha-file-box,
#bo_v.ha-view-wrap .ha-link-box,
#bo_vc,
#bo_vc_w,
#bo_vc .bo_vc_w,
#bo_vc_reply,
#bo_w.ha-write-wrap .write_box {
    padding: 18px;
    border: 1px solid var(--ha-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.035);
}

/* =========================================================
   BUTTONS -  .btn  : Խ θ
   ========================================================= */

#bo_gall .btn,
#bo_v .btn,
#bo_w .btn,
#bo_vc .btn,
#bo_gall .btn_b01,
#bo_gall .btn_b02,
#bo_gall .btn_admin,
#bo_v .btn_b01,
#bo_v .btn_b02,
#bo_v .btn_admin,
#bo_w .btn_b01,
#bo_w .btn_b02,
#bo_w .btn_admin,
#bo_vc .btn_b01,
#bo_vc .btn_b02,
#bo_vc .btn_admin,
#bo_w.ha-write-wrap .btn_frmline,
#bo_w.ha-write-wrap .btn_cancel,
#bo_w.ha-write-wrap .btn_submit,
#bo_w.ha-write-wrap .add,
#bo_w.ha-write-wrap .del,
#bo_v.ha-view-wrap .ha-reaction-btn,
#bo_v .bo_v_good,
#bo_v .bo_v_nogood {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 88px;
    height: 38px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: all .2s ease;
    box-sizing: border-box;
    text-decoration: none;
}

#bo_gall .btn i,
#bo_v .btn i,
#bo_w .btn i,
#bo_vc .btn i {
    font-size: 12px;
}

#bo_gall .btn_line,
#bo_v .btn_line,
#bo_w .btn_line,
#bo_vc .btn_line,
#bo_w.ha-write-wrap .btn_frmline,
#bo_w.ha-write-wrap .btn_cancel,
#bo_w.ha-write-wrap .del,
#bo_v.ha-view-wrap .ha-reaction-btn,
#bo_v .bo_v_good,
#bo_v .bo_v_nogood,
#bo_gall .btn_b01,
#bo_v .btn_b01,
#bo_w .btn_b01,
#bo_vc .btn_b01,
#bo_gall .btn_admin,
#bo_v .btn_admin,
#bo_w .btn_admin,
#bo_vc .btn_admin {
    border: 1px solid var(--ha-line);
    background: #fff;
    color: var(--ha-primary);
}

#bo_gall .btn_line:hover,
#bo_v .btn_line:hover,
#bo_w .btn_line:hover,
#bo_vc .btn_line:hover,
#bo_w.ha-write-wrap .btn_frmline:hover,
#bo_w.ha-write-wrap .btn_cancel:hover,
#bo_w.ha-write-wrap .del:hover,
#bo_v.ha-view-wrap .ha-reaction-btn:hover,
#bo_v .bo_v_good:hover,
#bo_v .bo_v_nogood:hover,
#bo_gall .btn_b01:hover,
#bo_v .btn_b01:hover,
#bo_w .btn_b01:hover,
#bo_vc .btn_b01:hover,
#bo_gall .btn_admin:hover,
#bo_v .btn_admin:hover,
#bo_w .btn_admin:hover,
#bo_vc .btn_admin:hover {
    border-color: var(--ha-accent-2);
    background: var(--ha-accent-soft);
    color: var(--ha-accent-2);
}

#bo_gall .btn_primary,
#bo_v .btn_primary,
#bo_w .btn_primary,
#bo_vc .btn_primary,
#bo_w.ha-write-wrap .btn_submit,
#bo_w.ha-write-wrap .add,
#bo_gall .btn_b02,
#bo_v .btn_b02,
#bo_w .btn_b02,
#bo_vc .btn_b02 {
    border: 1px solid var(--ha-accent);
    background: linear-gradient(135deg, var(--ha-accent) 0%, var(--ha-accent-2) 100%);
    color: #fff;
    box-shadow: 0 8px 16px rgba(140, 207, 105, 0.18);
}

#bo_gall .btn_primary:hover,
#bo_v .btn_primary:hover,
#bo_w .btn_primary:hover,
#bo_vc .btn_primary:hover,
#bo_w.ha-write-wrap .btn_submit:hover,
#bo_w.ha-write-wrap .add:hover,
#bo_gall .btn_b02:hover,
#bo_v .btn_b02:hover,
#bo_w .btn_b02:hover,
#bo_vc .btn_b02:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(140, 207, 105, 0.22);
}

#bo_gall .btn_bo_user,
#bo_v .btn_bo_user,
#bo_w .btn_bo_user,
#bo_vc .btn_bo_user {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#bo_gall .btn_bo_user li,
#bo_v .btn_bo_user li,
#bo_w .btn_bo_user li,
#bo_vc .btn_bo_user li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* =========================================================
   LIST - CATEGORY / TOOLBAR
   ========================================================= */

#bo_gall .ha-cate,
#bo_gall #bo_cate {
    margin-bottom: 22px;
    padding: 14px;
    border: 1px solid var(--ha-line);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.025);
}

#bo_gall #bo_cate_ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#bo_gall #bo_cate_ul li {
    margin: 0;
    padding: 0;
}

#bo_gall #bo_cate_ul li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 84px;
    height: 34px;
    padding: 0 13px;
    border: 1px solid var(--ha-line);
    border-radius: 7px;
    background: #fff;
    color: var(--ha-primary);
    font-size: 12px;
    font-weight: 700;
}

#bo_gall #bo_cate_ul li a:hover,
#bo_gall #bo_cate_ul li #bo_cate_on {
    border-color: var(--ha-accent);
    background: var(--ha-accent);
    color: #fff;
}

#bo_gall .ha-toolbar,
#bo_gall #bo_btn_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 20px;
    padding: 16px 18px;
    border: 1px solid var(--ha-line);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
}

#bo_gall .ha-toolbar-total,
#bo_gall #bo_list_total {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    float: none;
    line-height: normal;
    background: transparent;
    padding: 0;
    border-radius: 0;
    color: inherit;
    font-size: inherit;
}

#bo_gall .ha-toolbar-total strong {
    margin-right: 6px;
    color: var(--ha-primary);
    font-size: 22px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: -0.03em;
}

#bo_gall .ha-toolbar-total span,
#bo_gall #bo_list_total span {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    border-radius: 7px;
    background: #f8faf7;
    border: 1px solid var(--ha-line);
    color: var(--ha-text-sub);
    font-size: 11px;
    font-weight: 700;
}

#bo_gall .ha-toolbar-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#bo_gall .ha-check-all,
#gall_allchk.ha-check-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 8px 12px;
    border: 1px solid var(--ha-line);
    border-radius: 8px;
    background: #fff;
    color: var(--ha-text-sub);
    font-size: 12px;
    font-weight: 700;
}

/* =========================================================
   LIST - CARD GRID
   ========================================================= */

#bo_gall .ha-card-grid,
#bo_gall #gall_ul.gall_row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#bo_gall .ha-card-grid > li,
#bo_gall #gall_ul.gall_row > li {
    margin: 0 !important;
    width: auto !important;
    float: none !important;
    min-height: 0;
    padding: 0 !important;
}

#bo_gall .gall_li {
    margin: 0 !important;
    width: auto !important;
    float: none !important;
    min-height: 0;
    padding: 0 !important;
}

#bo_gall .ha-card,
#bo_gall .gall_box {
    position: relative;
    overflow: hidden;
    height: 100%;
    border: 1px solid var(--ha-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.035);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

#bo_gall .ha-card:hover,
#bo_gall .gall_box:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
    border-color: #d9e6d0;
}

#bo_gall .ha-card-check,
#bo_gall .gall_chk {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 7px;
    background: rgba(255,255,255,0.96);
    box-shadow: 0 4px 10px rgba(15,23,42,0.08);
}

#bo_gall .ha-card-thumb {
    position: relative;
    display: block;
    height: 210px;
    overflow: hidden;
    background: #f4f8f1;
}

#bo_gall .ha-card-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

#bo_gall .ha-card:hover .ha-card-thumb img,
#bo_gall .gall_box:hover .ha-card-thumb img {
    transform: scale(1.02);
}

#bo_gall .ha-no-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 100%;
    padding: 20px;
    text-align: center;
    background: linear-gradient(135deg, #f5f9f0 0%, #fafcf8 100%);
    color: var(--ha-primary);
}

#bo_gall .ha-no-image strong {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -0.03em;
}

#bo_gall .ha-no-image span {
    color: var(--ha-text-sub);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
}

#bo_gall .ha-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 9px;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

#bo_gall .ha-badge-notice {
    background: #1f2937;
    color: #fff;
}

#bo_gall .ha-card-overlay {
    position: absolute;
    right: 10px;
    bottom: 10px;
    left: 10px;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

#bo_gall .ha-chip,
#bo_gall .bo_cate_link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 9px;
    border-radius: 7px;
    background: rgba(255,255,255,0.92);
    color: var(--ha-primary);
    border: 1px solid rgba(232, 236, 229, 0.95);
    box-shadow: none;
    font-size: 11px;
    font-weight: 700;
}

#bo_gall .ha-chip-dark {
    background: rgba(55, 65, 81, 0.78);
    color: #fff;
    border-color: transparent;
}

#bo_gall .ha-card-body,
#bo_gall .gall_con {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 14px 13px;
}

#bo_gall .ha-card-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

#bo_gall .ha-card-loc {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ha-text-sub);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

#bo_gall .ha-card-loc i {
    color: var(--ha-accent-2);
}

#bo_gall .ha-card-title,
#bo_gall .bo_tit {
    display: block;
    min-height: 46px;
    color: var(--ha-primary);
    font-size: 18px;
    line-height: 1.35;
    font-weight: 800;
    letter-spacing: -0.02em;
    word-break: keep-all;
}

#bo_gall .ha-card-title:hover,
#bo_gall .bo_tit:hover {
    color: var(--ha-accent-2);
}

#bo_gall .ha-card-desc {
    min-height: 34px;
    color: var(--ha-text-sub);
    font-size: 12px;
    line-height: 1.6;
    word-break: keep-all;
}

#bo_gall .ha-card-tags,
#bo_gall .ha-view-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

#bo_gall .ha-mini-badge,
#bo_gall .rec_ju,
#bo_gall .rec_ba,
#bo_gall .rec_po {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 9px;
    border-radius: 7px;
    background: #f4f9ef;
    color: var(--ha-accent-2);
    font-size: 10px;
    font-weight: 700;
    border: 1px solid #e3eed9;
    width: auto;
    min-width: 52px;
    letter-spacing: 0;
    font-family: inherit;
}

#bo_gall .ha-mini-badge.is-muted {
    background: #f4f5f6;
    color: #6b7280;
    border-color: #e5e7eb;
}

#bo_gall .ha-card-meta,
#bo_gall .gall_info {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 10px 0 0;
    border-top: 1px solid var(--ha-line-soft);
    color: #7a8594;
    font-size: 11px;
    font-weight: 700;
    background: transparent;
    line-height: 1.5;
}

#bo_gall .ha-card-meta span,
#bo_gall .gall_info span,
#bo_gall .gall_info strong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

#bo_gall .ha-card-meta i,
#bo_gall .gall_info i {
    color: #9bad95;
    font-size: 12px;
    width: auto;
    height: auto;
    line-height: normal;
}

#bo_gall .gall_info .gall_date {
    position: static;
    bottom: auto;
    right: auto;
    font-style: normal;
    color: inherit;
}

#bo_gall .cnt_cmt {
    display: inline-block;
    margin-left: 8px;
    color: var(--ha-accent-2);
    font-size: 11px;
    font-weight: 900;
    background: transparent;
    height: auto;
    line-height: normal;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

#bo_gall .ha-empty {
    grid-column: 1 / -1;
}

#bo_gall .ha-empty-box,
#bo_gall .empty_list {
    padding: 46px 20px;
    border: 1px dashed #dce5d5;
    border-radius: 12px;
    background: #fcfdfb;
    text-align: center;
    list-style: none;
}

#bo_gall .ha-empty-box strong {
    display: block;
    margin-bottom: 10px;
    color: var(--ha-primary);
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.02em;
}

#bo_gall .ha-empty-box p {
    margin: 0 0 18px;
    color: var(--ha-text-sub);
    font-size: 13px;
}

#bo_gall .ha-bottom-actions,
#bo_gall .bo_fx {
    margin-top: 22px;
    padding-top: 2px;
    float: none;
    zoom: normal;
}

/* =========================================================
   LIST - SEARCH / PAGINATION
   ========================================================= */

#bo_gall .ha-search-box,
#bo_gall #bo_sch {
    margin-top: 24px;
    padding: 16px;
    border: 1px solid var(--ha-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: none;
    float: none;
}

#bo_gall .ha-search-box form,
#bo_gall #bo_sch form {
    display: flex;
    gap: 10px;
    align-items: center;
}

#bo_gall .ha-search-box select,
#bo_gall .ha-search-box .sch_input,
#bo_gall #bo_sch select,
#bo_gall #bo_sch .sch_input {
    height: 40px;
    border: 1px solid var(--ha-line);
    border-radius: 7px;
    background: #fff;
    color: var(--ha-primary);
    font-size: 13px;
    padding: 0 12px;
    outline: none;
    float: none;
    margin: 0;
}

#bo_gall .ha-search-box select,
#bo_gall #bo_sch select {
    min-width: 120px;
    border-right: 1px solid var(--ha-line);
}

#bo_gall .ha-search-box .sch_input,
#bo_gall #bo_sch .sch_input {
    flex: 1 1 auto;
    min-width: 180px;
}

#bo_gall .ha-search-box .sch_input:focus,
#bo_gall .ha-search-box select:focus,
#bo_gall #bo_sch .sch_input:focus,
#bo_gall #bo_sch select:focus {
    border-color: var(--ha-accent);
    box-shadow: 0 0 0 4px rgba(140, 207, 105, 0.12);
}

#bo_gall .ha-search-box .sch_btn,
#bo_gall #bo_sch .sch_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 90px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--ha-accent);
    border-radius: 7px;
    background: linear-gradient(135deg, var(--ha-accent) 0%, var(--ha-accent-2) 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    float: none;
    width: auto;
}

#bo_gall .ha-pagination {
    margin-top: 24px;
    text-align: center;
}

#bo_gall .ha-pagination .pg,
#bo_gall .ha-pagination .pagination,
#bo_gall .pg_wrap,
#bo_gall .pg {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

#bo_gall .ha-pagination a,
#bo_gall .ha-pagination strong,
#bo_gall .ha-pagination span,
#bo_gall .pg a,
#bo_gall .pg strong,
#bo_gall .pg span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--ha-line);
    border-radius: 7px;
    background: #fff;
    color: var(--ha-primary);
    font-size: 11px;
    font-weight: 800;
}

#bo_gall .ha-pagination a:hover,
#bo_gall .pg a:hover {
    border-color: var(--ha-accent);
    color: var(--ha-accent-2);
}

#bo_gall .ha-pagination strong,
#bo_gall .pg strong {
    border-color: var(--ha-accent);
    background: var(--ha-accent);
    color: #fff;
}

/* =========================================================
   WRITE
   ========================================================= */

#bo_w.ha-write-wrap {
    margin-bottom: 40px;
}

#bo_w.ha-write-wrap .write_div,
#bo_w.ha-write-wrap .write_box,
#bo_w.ha-write-wrap .bo_w_link,
#bo_w.ha-write-wrap .bo_w_flie,
#bo_w.ha-write-wrap .ha-menu-card {
    margin-bottom: 18px;
}

#bo_w.ha-write-wrap .bo_w_info {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#bo_w.ha-write-wrap .bo_w_info .frm_input {
    flex: 1 1 220px;
}

#bo_w.ha-write-wrap .bo_w_tit {
    margin-bottom: 18px;
}

#bo_w.ha-write-wrap .frm_input,
#bo_w.ha-write-wrap .info_input,
#bo_w.ha-write-wrap .info_input_a,
#bo_w.ha-write-wrap .frm_input_a,
#bo_w.ha-write-wrap .frm_input_b,
#bo_w.ha-write-wrap .full_input,
#bo_w.ha-write-wrap select,
#bo_w.ha-write-wrap .frm_file {
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--ha-line);
    border-radius: 7px;
    background: #fff;
    color: var(--ha-primary);
    font-size: 13px;
    box-sizing: border-box;
}

#bo_w.ha-write-wrap textarea,
#bo_w.ha-write-wrap .wr_content textarea {
    min-height: 220px;
    padding: 14px;
    border: 1px solid var(--ha-line);
    border-radius: 8px;
    box-sizing: border-box;
}

#bo_w.ha-write-wrap .frm_input:focus,
#bo_w.ha-write-wrap .info_input:focus,
#bo_w.ha-write-wrap .info_input_a:focus,
#bo_w.ha-write-wrap .frm_input_a:focus,
#bo_w.ha-write-wrap .frm_input_b:focus,
#bo_w.ha-write-wrap select:focus,
#bo_w.ha-write-wrap textarea:focus {
    border-color: var(--ha-accent);
    box-shadow: 0 0 0 4px rgba(140, 207, 105, 0.12);
}

#bo_w.ha-write-wrap #ex_zip {
    width: 120px;
}

#bo_w.ha-write-wrap .frm_address {
    width: 100% !important;
    margin-top: 8px;
}

#bo_w.ha-write-wrap .frm_file {
    width: 100%;
    padding-top: 8px;
    padding-bottom: 8px;
}

#bo_w.ha-write-wrap .write_box table,
#bo_w.ha-write-wrap #dyntbl1,
#bo_w.ha-write-wrap #dyntbl2 {
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 0;
}

#bo_w.ha-write-wrap .left_con {
    padding: 13px 12px;
    border: 1px solid var(--ha-line);
    background: #f8faf7;
    color: var(--ha-primary);
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}

#bo_w.ha-write-wrap .right_con {
    padding: 12px 14px;
    border: 1px solid var(--ha-line);
    background: #fff;
    color: var(--ha-text);
    font-size: 13px;
}

#bo_w.ha-write-wrap .write_cb {
    padding: 11px;
    border: 1px solid var(--ha-line);
    background: #f8faf7;
    color: var(--ha-primary);
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}

#bo_w.ha-write-wrap #dyntbl1 td,
#bo_w.ha-write-wrap #dyntbl2 td {
    padding: 10px;
    border: 1px solid var(--ha-line);
    background: #fff;
}

#bo_w.ha-write-wrap .wr_content {
    margin-top: 6px;
}

#bo_w.ha-write-wrap #btn_autosave {
    margin-top: 0px;
}

#bo_w.ha-write-wrap #autosave_pop {
    display: none;
	margin-top: 10px;
    padding: 14px;
    border: 1px solid var(--ha-line);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

#bo_w.ha-write-wrap .file_wr {
    margin-bottom: 10px;
}

#bo_w.ha-write-wrap .file_del {
    display: inline-block;
    margin-top: 10px;
}

#bo_w.ha-write-wrap .btn_confirm,
#bo_w.ha-write-wrap .ha-submit-bar {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

#bo_w.ha-write-wrap #char_count_desc,
#bo_w.ha-write-wrap #char_count_wrap {
    margin-top: 10px;
    color: var(--ha-text-sub);
    font-size: 12px;
}

/* =========================================================
   VIEW
   ========================================================= */

#bo_v.ha-view-wrap .ha-view-hero {
    margin-bottom: 22px;
    padding: 24px;
    border: 1px solid var(--ha-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.035);
}

#bo_v.ha-view-wrap .ha-view-chip {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    margin-bottom: 12px;
    border-radius: 7px;
    background: var(--ha-accent-soft);
    color: var(--ha-accent-2);
    border: 1px solid #e3eed9;
    font-size: 11px;
    font-weight: 700;
}

#bo_v.ha-view-wrap .ha-view-title {
    margin: 0 0 10px;
    color: var(--ha-primary);
    font-size: 32px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: -0.03em;
}

#bo_v.ha-view-wrap .ha-view-subtitle {
    margin: 0 0 14px;
    color: var(--ha-text-sub);
    font-size: 14px;
    line-height: 1.7;
}

#bo_v.ha-view-wrap .ha-view-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#bo_v.ha-view-wrap .ha-view-gallery-card {
    overflow: hidden;
    padding: 0;
}

#bo_v.ha-view-wrap .ha-detail-no-image {
    min-height: 380px;
}

#bo_v.ha-view-wrap .ha-view-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

#bo_v.ha-view-wrap .ha-info-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

#bo_v.ha-view-wrap .ha-info-list li {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 12px;
    padding: 11px 0;
    border-top: 1px solid var(--ha-line-soft);
}

#bo_v.ha-view-wrap .ha-info-list li:first-child {
    padding-top: 0;
    border-top: 0;
}

#bo_v.ha-view-wrap .ha-info-list strong {
    color: var(--ha-primary-2);
    font-size: 12px;
    font-weight: 800;
}

#bo_v.ha-view-wrap .ha-info-list span {
    color: var(--ha-text);
    font-size: 13px;
    line-height: 1.7;
    word-break: keep-all;
}

#bo_v.ha-view-wrap .ha-section-title {
    margin: 0 0 14px;
    color: var(--ha-primary);
    font-size: 20px;
    line-height: 1.25;
    font-weight: 900;
    letter-spacing: -0.02em;
}

#bo_v.ha-view-wrap .ha-anchor-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--ha-line);
    border-radius: 12px;
    background: #fff;
}

#bo_v.ha-view-wrap .ha-anchor-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--ha-line);
    border-radius: 7px;
    background: #fff;
    color: var(--ha-primary);
    font-size: 11px;
    font-weight: 700;
}

#bo_v.ha-view-wrap .ha-anchor-nav a:hover {
    border-color: var(--ha-accent);
    background: var(--ha-accent-soft);
    color: var(--ha-accent-2);
}

#bo_v.ha-view-wrap .ha-map-box,
#bo_v.ha-view-wrap .ha-map-embed {
    overflow: hidden;
    padding: 10px;
    border: 1px solid #e7efe0;
    border-radius: 10px;
    background: #fafcf8;
}

#bo_v.ha-view-wrap .ha-view-extra-images {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

#bo_v.ha-view-wrap .ha-view-extra-image img,
#bo_v.ha-view-wrap .ha-view-content img,
#bo_v #bo_v_con img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

#bo_v.ha-view-wrap .ha-view-content,
#bo_v #bo_v_con {
    color: var(--ha-text);
    font-size: 14px;
    line-height: 1.85;
    word-break: keep-all;
    margin: 0;
    min-height: 0;
}

#bo_v .ha-file-box ul,
#bo_v .ha-link-box ul,
#bo_v .ha-neighbor-posts,
#bo_v .ha-view-actions .bo_v_left,
#bo_v .ha-view-actions .bo_v_com {
    list-style: none;
    margin: 0;
    padding: 0;
}

#bo_v .ha-file-box li,
#bo_v .ha-link-box li {
    padding: 12px 0;
    border-top: 1px solid var(--ha-line-soft);
    line-height: 1.7;
}

#bo_v .ha-file-box li:first-child,
#bo_v .ha-link-box li:first-child {
    border-top: 0;
    padding-top: 0;
}

#bo_v .ha-view-actions {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin: 22px 0;
}

#bo_v .ha-view-actions .bo_v_left,
#bo_v .ha-view-actions .bo_v_com {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    float: none;
}

#bo_v.ha-view-wrap .ha-view-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-bottom: 12px;
    color: var(--ha-text-sub);
    font-size: 12px;
    font-weight: 700;
    padding: 0;
    border-bottom: 0;
}

#bo_v.ha-view-wrap .ha-view-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-weight: 700;
}

#bo_v.ha-view-wrap .ha-share-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px;
    margin: 22px 0;
    border: 1px solid var(--ha-line);
    border-radius: 12px;
    background: #fff;
    text-align: left;
}

#bo_v .ha-neighbor-posts {
    border: 1px solid var(--ha-line);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    box-shadow: none;
    margin: 0;
    clear: none;
}

#bo_v .ha-neighbor-posts li {
    display: grid;
    grid-template-columns: 82px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border-top: 1px solid var(--ha-line-soft);
    border-left: 0;
    border-right: 0;
}

#bo_v .ha-neighbor-posts li:first-child {
    border-top: 0;
}

#bo_v .ha-neighbor-posts .nb_tit {
    font-weight: 800;
    color: var(--ha-primary);
    padding-right: 0;
}

#bo_v .ha-neighbor-posts a {
    color: var(--ha-text);
    font-weight: 700;
}

#bo_v .ha-neighbor-posts .nb_date {
    color: var(--ha-text-sub);
    font-size: 11px;
    float: none;
}

/* =========================================================
   GALLERY / MAP
   ========================================================= */

#bo_v.ha-view-wrap .ha-gallery {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#bo_v.ha-view-wrap .ha-gallery-main {
    overflow: hidden;
    border-radius: 12px;
    background: #f4f8f1;
    border: 1px solid #eef2ea;
}

#bo_v.ha-view-wrap .ha-gallery-main img {
    display: block;
    width: 100%;
    height: 440px;
    object-fit: cover;
}

#bo_v.ha-view-wrap .ha-gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

#bo_v.ha-view-wrap .ha-gallery-thumb {
    padding: 0;
    border: 1px solid var(--ha-line);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    cursor: pointer;
    transition: all .2s ease;
}

#bo_v.ha-view-wrap .ha-gallery-thumb img {
    width: 100%;
    height: 84px;
    object-fit: cover;
}

#bo_v.ha-view-wrap .ha-gallery-thumb:hover,
#bo_v.ha-view-wrap .ha-gallery-thumb.is-active {
    border-color: var(--ha-accent);
    box-shadow: 0 0 0 2px rgba(140, 207, 105, 0.14);
}

#bo_v.ha-view-wrap .ha-map-canvas {
    width: 100%;
    height: 400px;
}

/* =========================================================
   COMMENT
   ========================================================= */

#bo_vc {
    margin-top: 24px;
}

#bo_vc h2,
#bo_vc_title {
    margin: 0 0 16px;
    color: var(--ha-primary);
    font-size: 22px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: -0.02em;
}

#bo_vc .bo_vc_hdinfo {
    color: var(--ha-text-sub);
    font-size: 11px;
    font-weight: 700;
}

#bo_vc ul,
#bo_vc ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

#bo_vc article {
    margin-top: 12px;
    padding: 16px;
    border: 1px solid var(--ha-line);
    border-radius: 12px;
    background: #fcfdfb;
}

#bo_vc article:first-child {
    margin-top: 0;
}

#bo_vc header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-bottom: 10px;
}

#bo_vc .sv_member,
#bo_vc .sv_guest {
    color: var(--ha-primary);
    font-size: 13px;
    font-weight: 900;
}

#bo_vc time {
    color: var(--ha-text-sub);
    font-size: 11px;
    font-weight: 700;
}


#bo_vc .bo_vc_act {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}

#bo_vc .bo_vc_act a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 72px;
    height: 32px;
    padding: 0 13px;
    border: 1px solid #e6ebe3;
    border-radius: 999px;
    background: #f9fbf8;
    color: var(--ha-primary-2);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    transition: all .18s ease;
}

#bo_vc .bo_vc_act a:hover {
    border-color: #d7e6cb;
    background: #f2f8ec;
    color: var(--ha-accent-2);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.05);
}

#bo_vc a[href*="reply"] {
    background: linear-gradient(180deg, #f4fbef 0%, #eef7e6 100%);
    color: var(--ha-accent-2);
    border-color: #d9ebcd;
}

#bo_vc a[href*="reply"]::before {
    content: "\21A9";
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}

#bo_vc a[href*="reply"]:hover {
    background: linear-gradient(135deg, var(--ha-accent) 0%, var(--ha-accent-2) 100%);
    color: #fff;
    border-color: var(--ha-accent);
}

#bo_vc a[href*="update"],
#bo_vc a[href*="edit"] {
    background: #f4f6f8;
    color: #4b5563;
    border-color: #e5e7eb;
}

#bo_vc a[href*="update"]::before,
#bo_vc a[href*="edit"]::before {
    content: "\270E";
    font-size: 11px;
    line-height: 1;
}

#bo_vc a[href*="delete"],
#bo_vc a[href*="del"] {
    background: #fff5f5;
    color: #dc2626;
    border-color: #fecaca;
}

#bo_vc a[href*="delete"]::before,
#bo_vc a[href*="del"]::before {
    content: "\00D7";
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
}

#bo_vc a[href*="delete"]:hover,
#bo_vc a[href*="del"]:hover {
    background: #ef4444;
    color: #fff;
    border-color: #ef4444;
}

#bo_vc .bo_vc_more .bo_vc_more_ul {
    margin-top: 8px;
    padding: 8px;
    border: 1px solid var(--ha-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.05);
}

#bo_vc .bo_vc_more .bo_vc_more_ul a {
    display: block;
    padding: 8px 10px;
    border-radius: 7px;
    color: var(--ha-primary);
    font-size: 11px;
    font-weight: 700;
}

#bo_vc .bo_vc_more .bo_vc_more_ul a:hover {
    background: var(--ha-accent-soft);
    color: var(--ha-accent-2);
}

/* comment write */
#bo_vc_w,
#bo_vc .bo_vc_w {
    margin-top: 18px;
}

#bo_vc_w form,
#bo_vc .bo_vc_w form {
    display: block;
    margin: 0;
}


#bo_vc_w input[type="text"],
#bo_vc_w input[type="password"],
#bo_vc_w input[type="email"],
#bo_vc_w .frm_input,
#bo_vc .bo_vc_w input[type="text"],
#bo_vc .bo_vc_w input[type="password"],
#bo_vc .bo_vc_w input[type="email"],
#bo_vc .bo_vc_w .frm_input {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--ha-line);
    border-radius: 7px;
    background: #fff;
    color: var(--ha-primary);
    font-size: 13px;
    box-sizing: border-box;
    outline: none;
}

#bo_vc_w input[type="text"]:focus,
#bo_vc_w input[type="password"]:focus,
#bo_vc_w input[type="email"]:focus,
#bo_vc_w .frm_input:focus,
#bo_vc .bo_vc_w input[type="text"]:focus,
#bo_vc .bo_vc_w input[type="password"]:focus,
#bo_vc .bo_vc_w input[type="email"]:focus,
#bo_vc .bo_vc_w .frm_input:focus {
    border-color: var(--ha-accent);
    box-shadow: 0 0 0 4px rgba(140, 207, 105, 0.12);
}

#bo_vc textarea,
#bo_vc #wr_content,
#bo_vc .frm_textbox,
#bo_vc_w textarea,
#bo_vc_w #wr_content,
#bo_vc_w .frm_textbox {
    display: block;
    width: 100%;
    min-height: 140px;
    padding: 14px;
    border: 1px solid var(--ha-line);
    border-radius: 8px;
    background: #fff;
    color: var(--ha-primary);
    font-size: 14px;
    line-height: 1.7;
    box-sizing: border-box;
    outline: none;
    resize: vertical;
}

#bo_vc textarea:focus,
#bo_vc #wr_content:focus,
#bo_vc .frm_textbox:focus,
#bo_vc_w textarea:focus,
#bo_vc_w #wr_content:focus,
#bo_vc_w .frm_textbox:focus {
    border-color: var(--ha-accent);
    box-shadow: 0 0 0 4px rgba(140, 207, 105, 0.12);
}

#bo_vc .btn_submit,
#bo_vc .btn_confirm button,
#bo_vc input[type="submit"],
#bo_vc_w .btn_submit,
#bo_vc_w input[type="submit"],
#bo_vc .bo_vc_w .btn_submit,
#bo_vc .bo_vc_w input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 100px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--ha-accent);
    border-radius: 7px;
    background: linear-gradient(135deg, var(--ha-accent) 0%, var(--ha-accent-2) 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 16px rgba(140, 207, 105, 0.18);
}

#bo_vc .btn_confirm,
#bo_vc_w .btn_confirm,
#bo_vc .bo_vc_w .btn_confirm {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
}

#bo_vc_w .btn_cancel,
#bo_vc_w button[type="button"],
#bo_vc .bo_vc_w .btn_cancel,
#bo_vc .bo_vc_w button[type="button"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--ha-line);
    border-radius: 7px;
    background: #fff;
    color: var(--ha-primary);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1280px) {
    #bo_gall .ha-card-grid,
    #bo_gall #gall_ul.gall_row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    #bo_gall.ha-board-frame {
        padding: 20px;
    }

    #bo_gall .ha-toolbar,
    #bo_gall #bo_btn_top {
        flex-direction: column;
        align-items: flex-start;
    }

    #bo_gall .ha-toolbar-total strong {
        font-size: 20px;
    }

    #bo_gall .ha-card-grid,
    #bo_gall #gall_ul.gall_row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px;
    }

    #bo_v.ha-view-wrap .ha-view-title {
        font-size: 28px;
    }

    #bo_v.ha-view-wrap .ha-view-info-grid {
        grid-template-columns: 1fr;
    }

    #bo_v.ha-view-wrap .ha-gallery-main img {
        height: 380px;
    }

    #bo_v.ha-view-wrap .ha-gallery-thumbs {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    #bo_w.ha-write-wrap .write_box table,
    #bo_w.ha-write-wrap .write_box tbody,
    #bo_w.ha-write-wrap .write_box tr,
    #bo_w.ha-write-wrap .write_box td {
        display: block;
        width: 100% !important;
    }

    #bo_w.ha-write-wrap .left_con {
        text-align: left;
        border-bottom: 0;
    }

    #bo_w.ha-write-wrap .right_con {
        border-top: 0;
        margin-bottom: 10px;
    }

    #bo_w.ha-write-wrap .btn_confirm,
    #bo_w.ha-write-wrap .ha-submit-bar {
        flex-direction: column;
    }

    #bo_w.ha-write-wrap .btn_confirm .btn,
    #bo_w.ha-write-wrap .btn_submit,
    #bo_w.ha-write-wrap .btn_cancel {
        width: 100%;
    }
}

@media (max-width: 768px) {
    #bo_gall.ha-board-frame {
        padding: 16px;
        border-radius: 12px;
    }

    #bo_gall .ha-toolbar,
    #bo_gall #bo_btn_top {
        padding: 14px;
        border-radius: 10px;
    }

    #bo_gall .ha-toolbar-total {
        gap: 8px;
    }

    #bo_gall .ha-toolbar-total strong {
        width: 100%;
        margin-right: 0;
        font-size: 19px;
    }

    #bo_gall .ha-card-grid,
    #bo_gall #gall_ul.gall_row {
        gap: 14px;
    }

    #bo_gall .ha-card-thumb,
    #bo_gall .gall_img a {
        height: 200px;
    }

    #bo_gall .ha-card-title,
    #bo_gall .bo_tit {
        min-height: 0;
        font-size: 17px;
    }

    #bo_gall .ha-card-body,
    #bo_gall .gall_con {
        padding: 13px 12px 12px;
    }

    #bo_gall .ha-search-box,
    #bo_gall #bo_sch {
        padding: 14px;
        border-radius: 10px;
    }

    #bo_gall .ha-search-box form,
    #bo_gall #bo_sch form {
        flex-direction: column;
        align-items: stretch;
    }

    #bo_gall .ha-search-box select,
    #bo_gall .ha-search-box .sch_input,
    #bo_gall .ha-search-box .sch_btn,
    #bo_gall #bo_sch select,
    #bo_gall #bo_sch .sch_input,
    #bo_gall #bo_sch .sch_btn {
        width: 100%;
    }

    #bo_v.ha-view-wrap .ha-view-hero {
        padding: 20px 16px;
        border-radius: 12px;
    }

    #bo_v.ha-view-wrap .ha-view-title {
        font-size: 24px;
    }

    #bo_v.ha-view-wrap .ha-info-card,
    #bo_v.ha-view-wrap .ha-section-card,
    #bo_vc,
    #bo_vc_w,
    #bo_vc .bo_vc_w {
        padding: 16px;
    }

    #bo_v.ha-view-wrap .ha-view-extra-images {
        grid-template-columns: 1fr;
    }

    #bo_v .ha-view-actions {
        flex-direction: column;
    }

    #bo_vc .btn_confirm,
    #bo_vc_w .btn_confirm,
    #bo_vc .bo_vc_w .btn_confirm {
        flex-direction: column;
    }

    #bo_vc .btn_submit,
    #bo_vc input[type="submit"],
    #bo_vc_w .btn_submit,
    #bo_vc_w input[type="submit"],
    #bo_vc_w .btn_cancel,
    #bo_vc .bo_vc_w .btn_submit,
    #bo_vc .bo_vc_w input[type="submit"],
    #bo_vc .bo_vc_w .btn_cancel {
        width: 100%;
    }

    #bo_v.ha-view-wrap .ha-gallery-main img {
        height: 300px;
    }

    #bo_v.ha-view-wrap .ha-gallery-thumbs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #bo_v.ha-view-wrap .ha-gallery-thumb img {
        height: 72px;
    }

    #bo_v.ha-view-wrap .ha-map-canvas {
        height: 320px;
    }
}

@media (max-width: 640px) {
    #bo_gall.ha-board-frame {
        padding: 14px;
        border-radius: 12px;
    }

    #bo_gall .ha-cate,
    #bo_gall .ha-toolbar,
    #bo_gall .ha-search-box,
    #bo_gall .ha-card,
    #bo_gall .ha-empty-box,
    #bo_v.ha-view-wrap .ha-section-card,
    #bo_w.ha-write-wrap .write_box,
    #bo_gall #bo_cate,
    #bo_gall #bo_btn_top,
    #bo_gall #bo_sch,
    #bo_gall .gall_box {
        border-radius: 10px;
    }

    #bo_gall .ha-card-grid,
    #bo_gall #gall_ul.gall_row {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    #bo_gall .ha-card-thumb,
    #bo_gall .gall_img a {
        height: 190px;
    }

    #bo_gall .ha-card-title,
    #bo_gall .bo_tit {
        font-size: 16px;
    }

    #bo_gall .btn,
    #bo_gall #bo_sch .sch_btn {
        min-width: auto;
    }

    #bo_v.ha-view-wrap .ha-anchor-nav {
        padding: 14px;
    }

    #bo_v.ha-view-wrap .ha-anchor-nav a {
        min-width: calc(50% - 4px);
    }

    #bo_v.ha-view-wrap .ha-info-list li {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    #bo_v.ha-view-wrap .ha-menu-row {
        grid-template-columns: 1fr 1fr;
    }

    #bo_v.ha-view-wrap .ha-menu-row > div:nth-child(3),
    #bo_v.ha-view-wrap .ha-menu-row > div:nth-child(4) {
        border-top: 1px dashed #edf2e9;
    }

    #bo_v.ha-view-wrap .ha-detail-no-image {
        min-height: 260px;
    }

    #bo_vc .is_reply,
    #bo_vc .reply_depth_1,
    #bo_vc .reply_depth_2,
    #bo_vc .reply_depth_3 {
        margin-left: 10px;
    }

    #bo_v.ha-view-wrap .ha-gallery-main img {
        height: 240px;
    }

    #bo_v.ha-view-wrap .ha-gallery-thumbs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #bo_v.ha-view-wrap .ha-map-canvas {
        height: 260px;
    }


}

/* =========================================================
     ȣ
   ========================================================= */

#adm_wrap .btn,
#adm_wrap .btn i,
#adm_wrap .btn_bo_user,
#adm_wrap .sound_only,
#adm_wrap .cnt_cmt,
#adm_wrap .gall_info,
#adm_wrap .bo_v_good,
#adm_wrap .bo_v_nogood,
.adm .btn,
.adm .btn i,
.adm .btn_bo_user,
.adm .sound_only,
.adm .cnt_cmt,
.adm .gall_info,
.adm .bo_v_good,
.adm .bo_v_nogood {
    all: revert;
}

#adm_wrap i.fa,
.adm i.fa,
#adm_wrap .btn i,
.adm .btn i {
    font-size: inherit;
    width: auto;
    height: auto;
    line-height: inherit;
}

/*  б ư - view_comment.skin.php   */
#bo_vc_w .ha-secret-wrap,
#bo_vc .bo_vc_w .ha-secret-wrap {
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
}

#bo_vc_w .ha-secret-wrap input[type="checkbox"],
#bo_vc .bo_vc_w .ha-secret-wrap input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

#bo_vc_w .ha-secret-label,
#bo_vc .bo_vc_w .ha-secret-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 12px 0 10px;
    border: 1px solid #e5ece0;
    border-radius: 7px;
    background: #f9fbf8;
    color: var(--ha-primary-2);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all .18s ease;
}

#bo_vc_w .ha-secret-label:hover,
#bo_vc .bo_vc_w .ha-secret-label:hover {
    border-color: #d7e6cb;
    background: #f2f8ec;
}

#bo_vc_w .ha-secret-icon,
#bo_vc .bo_vc_w .ha-secret-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: linear-gradient(180deg, #f4fbef 0%, #eef7e6 100%);
    border: 1px solid #d9ebcd;
    color: var(--ha-accent-2);
    font-size: 12px;
    box-shadow: 0 2px 6px rgba(140, 207, 105, 0.10);
}

#bo_vc_w .ha-secret-text,
#bo_vc .bo_vc_w .ha-secret-text {
    color: inherit;
    font-size: 12px;
    font-weight: 700;
}

#bo_vc_w .ha-secret-wrap input[type="checkbox"]:checked + .ha-secret-label,
#bo_vc .bo_vc_w .ha-secret-wrap input[type="checkbox"]:checked + .ha-secret-label {
    border-color: var(--ha-accent);
    background: #eef7e6;
    color: var(--ha-accent-2);
}

#bo_vc_w .ha-secret-wrap input[type="checkbox"]:checked + .ha-secret-label .ha-secret-icon,
#bo_vc .bo_vc_w .ha-secret-wrap input[type="checkbox"]:checked + .ha-secret-label .ha-secret-icon {
    background: linear-gradient(135deg, var(--ha-accent) 0%, var(--ha-accent-2) 100%);
    color: #fff;
    border-color: var(--ha-accent);
}

@media (max-width: 768px) {
    #bo_vc_w .ha-secret-label,
    #bo_vc .bo_vc_w .ha-secret-label {
        width: 100%;
        justify-content: flex-start;
    }
}

#bo_vc_w h2 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--ha-primary);
    margin: 0 0 16px;
}

/* =========================================================
   WRITE - LAYOUT POLISH FOR REVISED write.skin.php
   ========================================================= */

#bo_w.ha-write-wrap .ha-write-top-card {
    padding: 18px;
    border: 1px solid var(--ha-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.035);
}

#bo_w.ha-write-wrap .ha-form-block + .ha-form-block {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--ha-line-soft);
}

#bo_w.ha-write-wrap .ha-top-input-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

#bo_w.ha-write-wrap .ha-write-option-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    line-height: 1;
}

#bo_w.ha-write-wrap .ha-write-option-row input[type="checkbox"],
#bo_w.ha-write-wrap .ha-write-option-row input[type="radio"] {
    margin: 0 4px 0 0;
    vertical-align: middle;
    transform: none;
    position: relative;
    top: 0;
}

#bo_w.ha-write-wrap .ha-write-option-row label {
    display: inline-flex;
    align-items: center;
    margin: 0 12px 0 0;
    line-height: 1;
    color: var(--ha-primary);
    font-size: 13px;
    font-weight: 700;
}

#bo_w.ha-write-wrap .ha-form-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

#bo_w.ha-write-wrap .ha-form-section-head.is-single {
    justify-content: flex-start;
}

#bo_w.ha-write-wrap .ha-form-section-title {
    margin-bottom: 6px;
    color: var(--ha-primary);
    font-size: 18px;
    line-height: 1.3;
    font-weight: 900;
    letter-spacing: -0.02em;
}

#bo_w.ha-write-wrap .ha-form-section-desc {
    margin: 6px 0 0;
    color: var(--ha-text-sub);
    font-size: 12px;
    line-height: 1.6;
}

#bo_w.ha-write-wrap .ha-titlebar {
    display: flex;
    align-items: center;
    gap: 10px;
}

#bo_w.ha-write-wrap .ha-titlebar-input {
    flex: 1 1 auto;
}

#bo_w.ha-write-wrap .ha-titlebar-action {
    flex: 0 0 auto;
}

#bo_w.ha-write-wrap .ha-autosave-btn {
    white-space: nowrap;
}

#bo_w.ha-write-wrap .ha-address-box {
    display: grid;
    grid-template-columns: 120px auto;
    gap: 8px 10px;
    align-items: center;
}

#bo_w.ha-write-wrap .ha-address-box .frm_address {
    grid-column: 1 / -1;
}

#bo_w.ha-write-wrap .ha-inline-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

#bo_w.ha-write-wrap .ha-inline-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 8px;
    color: var(--ha-primary);
    font-size: 13px;
    font-weight: 700;
}

#bo_w.ha-write-wrap .ha-inline-text {
    color: var(--ha-text-sub);
    font-size: 12px;
    font-weight: 700;
}

#bo_w.ha-write-wrap .ha-time-input,
#bo_w.ha-write-wrap .ha-phone-input {
    text-align: center;
}

#bo_w.ha-write-wrap .ha-time-input {
    width: 72px;
}

#bo_w.ha-write-wrap .ha-phone-input {
    width: 82px;
}

#bo_w.ha-write-wrap .ha-menu-head-table,
#bo_w.ha-write-wrap .ha-menu-body-table,
#bo_w.ha-write-wrap #dyntbl1,
#bo_w.ha-write-wrap #dyntbl2 {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

#bo_w.ha-write-wrap .ha-menu-head-table td {
    padding: 12px 10px;
    background: #f8faf7;
    border: 1px solid var(--ha-line);
    color: var(--ha-primary);
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}

#bo_w.ha-write-wrap .ha-menu-body-table td,
#bo_w.ha-write-wrap #dyntbl1 td,
#bo_w.ha-write-wrap #dyntbl2 td {
    padding: 10px;
    border: 1px solid var(--ha-line);
    background: #fff;
    vertical-align: middle;
}

#bo_w.ha-write-wrap .ha-input-unit {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    color: var(--ha-text-sub);
    font-size: 12px;
    font-weight: 700;
}

#bo_w.ha-write-wrap .ha-inline-label {
    display: inline-flex;
    align-items: center;
    min-width: 84px;
    margin-bottom: 8px;
    color: var(--ha-primary);
    font-size: 12px;
    font-weight: 800;
}

#bo_w.ha-write-wrap .ha-compact-card {
    padding: 16px 18px;
    border: 1px solid var(--ha-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.035);
}

#bo_w.ha-write-wrap .ha-plain-add-btn,
#bo_w.ha-write-wrap .ha-plain-btn,
#bo_w.ha-write-wrap .ha-mini-btn,
#bo_w.ha-write-wrap .ha-submit-main-btn {
    min-width: auto;
}

#bo_w.ha-write-wrap .ha-submit-main-btn {
    min-width: 120px;
}

@media (max-width: 900px) {
    #bo_w.ha-write-wrap .ha-top-input-grid {
        grid-template-columns: 1fr;
    }

    #bo_w.ha-write-wrap .ha-titlebar {
        flex-direction: column;
        align-items: stretch;
    }

    #bo_w.ha-write-wrap .ha-titlebar-action,
    #bo_w.ha-write-wrap .ha-autosave-btn {
        width: 100%;
    }

    #bo_w.ha-write-wrap .ha-form-section-head {
        flex-direction: column;
        align-items: stretch;
    }

    #bo_w.ha-write-wrap .ha-address-box {
        grid-template-columns: 1fr;
    }
}
/* 자동등록방지 */
#bo_w.ha-write-wrap .ha-captcha-force{
    margin-top:18px !important;
    padding:18px !important;
    border:1px solid #e8ece5 !important;
    border-radius:12px !important;
    background:linear-gradient(180deg,#ffffff 0%,#fbfcfa 100%) !important;
    box-shadow:0 4px 14px rgba(15,23,42,0.035) !important;
}

#bo_w.ha-write-wrap .ha-captcha-force .ha-captcha-top{
    margin-bottom:12px !important;
}

#bo_w.ha-write-wrap .ha-captcha-force .ha-captcha-top strong{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    margin-bottom:6px !important;
    color:#1f2937 !important;
    font-size:15px !important;
    font-weight:900 !important;
    letter-spacing:-0.02em !important;
}

#bo_w.ha-write-wrap .ha-captcha-force .ha-captcha-top strong i{
    width:26px !important;
    height:26px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:999px !important;
    background:linear-gradient(135deg,#8ccf69 0%,#74b957 100%) !important;
    color:#fff !important;
    font-size:12px !important;
    box-shadow:0 4px 10px rgba(140,207,105,0.18) !important;
}

#bo_w.ha-write-wrap .ha-captcha-force .ha-captcha-top p{
    margin:0 !important;
    color:#6b7280 !important;
    font-size:12px !important;
    line-height:1.5 !important;
}

#bo_w.ha-write-wrap .ha-captcha-force #captcha{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    gap:10px !important;
    padding:14px !important;
    margin:0 !important;
    border:1px solid #e8ece5 !important;
    border-radius:10px !important;
    background:#fcfdfb !important;
    box-shadow:none !important;
}

#bo_w.ha-write-wrap .ha-captcha-force fieldset{
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:none !important;
}

#bo_w.ha-write-wrap .ha-captcha-force #captcha img,
#bo_w.ha-write-wrap .ha-captcha-force #captcha_img{
    display:block !important;
    width:160px !important;
    height:56px !important;
    border:1px solid #dfe8d7 !important;
    border-radius:10px !important;
    background:#fff !important;
    box-shadow:0 2px 8px rgba(15,23,42,0.04) !important;
}

#bo_w.ha-write-wrap .ha-captcha-force #captcha input[type="text"],
#bo_w.ha-write-wrap .ha-captcha-force #captcha_key{
    flex:1 1 140px !important;
    min-width:140px !important;
    height:56px !important;
    padding:0 14px !important;
    border:1px solid #e8ece5 !important;
    border-radius:10px !important;
    background:#fff !important;
    box-sizing:border-box !important;
    color:#1f2937 !important;
    font-size:15px !important;
    font-weight:800 !important;
    outline:none !important;
    box-shadow:none !important;
}

#bo_w.ha-write-wrap .ha-captcha-force #captcha input[type="text"]:focus,
#bo_w.ha-write-wrap .ha-captcha-force #captcha_key:focus{
    border-color:#8ccf69 !important;
    box-shadow:0 0 0 4px rgba(140,207,105,0.12) !important;
    background:#fff !important;
}

#bo_w.ha-write-wrap .ha-captcha-force #captcha a,
#bo_w.ha-write-wrap .ha-captcha-force #captcha button,
#bo_w.ha-write-wrap .ha-captcha-force #captcha input[type="button"],
#bo_w.ha-write-wrap .ha-captcha-force #captcha_mp3,
#bo_w.ha-write-wrap .ha-captcha-force #captcha_reload{
    position:relative !important;
    width:56px !important;
    height:56px !important;
    min-width:56px !important;
    padding:0 !important;
    border:1px solid #8ccf69 !important;
    border-radius:14px !important;
    background:linear-gradient(135deg,#8ccf69 0%,#74b957 100%) !important;
    color:#fff !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-decoration:none !important;
    box-shadow:0 8px 16px rgba(140,207,105,0.18) !important;
    transition:all .2s ease !important;
    overflow:hidden !important;
}

#bo_w.ha-write-wrap .ha-captcha-force #captcha a:hover,
#bo_w.ha-write-wrap .ha-captcha-force #captcha button:hover,
#bo_w.ha-write-wrap .ha-captcha-force #captcha input[type="button"]:hover,
#bo_w.ha-write-wrap .ha-captcha-force #captcha_mp3:hover,
#bo_w.ha-write-wrap .ha-captcha-force #captcha_reload:hover{
    transform:translateY(-1px) !important;
    box-shadow:0 10px 18px rgba(140,207,105,0.22) !important;
}

#bo_w.ha-write-wrap .ha-captcha-force #captcha_mp3,
#bo_w.ha-write-wrap .ha-captcha-force #captcha_reload{
    font-size:0 !important;
    line-height:0 !important;
    text-indent:-9999px !important;
}

#bo_w.ha-write-wrap .ha-captcha-force #captcha_mp3 span,
#bo_w.ha-write-wrap .ha-captcha-force #captcha_reload span,
#bo_w.ha-write-wrap .ha-captcha-force #captcha a span,
#bo_w.ha-write-wrap .ha-captcha-force #captcha button span{
    display:none !important;
}

/* 스피커 아이콘 */
#bo_w.ha-write-wrap .ha-captcha-force #captcha_mp3::before,
#bo_w.ha-write-wrap .ha-captcha-force #captcha_mp3::after{
    content:"" !important;
    position:absolute !important;
    display:block !important;
    z-index:2 !important;
}

#bo_w.ha-write-wrap .ha-captcha-force #captcha_mp3::before{
    left:15px !important;
    top:18px !important;
    width:17px !important;
    height:18px !important;
    background:#fff !important;
    clip-path:polygon(0 30%, 36% 30%, 74% 0, 74% 100%, 36% 70%, 0 70%) !important;
}

#bo_w.ha-write-wrap .ha-captcha-force #captcha_mp3::after{
    left:31px !important;
    top:13px !important;
    width:18px !important;
    height:30px !important;
    background:
        radial-gradient(circle at left center, transparent 7px, #fff 7px 9px, transparent 9px),
        radial-gradient(circle at left center, transparent 12px, #fff 12px 14px, transparent 14px);
    background-repeat:no-repeat !important;
    background-size:18px 30px, 18px 30px;
    background-position:0 0, 0 0;
}

/* 새로고침 아이콘 */
#bo_w.ha-write-wrap .ha-captcha-force #captcha_reload::before,
#bo_w.ha-write-wrap .ha-captcha-force #captcha_reload::after{
    content:"" !important;
    position:absolute !important;
    display:block !important;
    z-index:2 !important;
}

#bo_w.ha-write-wrap .ha-captcha-force #captcha_reload::before{
    left:13px !important;
    top:15px !important;
    width:25px !important;
    height:25px !important;
    border:4px solid #fff !important;
    border-left-color:transparent !important;
    border-radius:50% !important;
    transform:rotate(200deg) !important;
    box-sizing:border-box !important;
}

#bo_w.ha-write-wrap .ha-captcha-force #captcha_reload::after{
    right:16px !important;
    top:16px !important;
    width:10px !important;
    height:10px !important;
    border-top:4px solid #fff !important;
    border-right:4px solid #fff !important;
    transform:rotate(80deg) !important;
    box-sizing:border-box !important;
}

#bo_w.ha-write-wrap .ha-captcha-force #captcha_info{
    width:100% !important;
    margin-top:2px !important;
    padding:0 !important;
    border:0 !important;
    background:none !important;
    color:#6b7280 !important;
    font-size:12px !important;
    line-height:1.6 !important;
}

@media (max-width:768px){
    #bo_w.ha-write-wrap .ha-captcha-force{
        padding:14px !important;
    }

    #bo_w.ha-write-wrap .ha-captcha-force #captcha{
        padding:12px !important;
        gap:8px !important;
    }

    #bo_w.ha-write-wrap .ha-captcha-force #captcha img,
    #bo_w.ha-write-wrap .ha-captcha-force #captcha_img{
        width:140px !important;
        height:52px !important;
    }

    #bo_w.ha-write-wrap .ha-captcha-force #captcha input[type="text"],
    #bo_w.ha-write-wrap .ha-captcha-force #captcha_key,
    #bo_w.ha-write-wrap .ha-captcha-force #captcha a,
    #bo_w.ha-write-wrap .ha-captcha-force #captcha button,
    #bo_w.ha-write-wrap .ha-captcha-force #captcha input[type="button"],
    #bo_w.ha-write-wrap .ha-captcha-force #captcha_mp3,
    #bo_w.ha-write-wrap .ha-captcha-force #captcha_reload{
        height:52px !important;
        width:52px !important;
        min-width:52px !important;
        border-radius:12px !important;
    }

    #bo_w.ha-write-wrap .ha-captcha-force #captcha_mp3::before{
        left:14px !important;
        top:16px !important;
        width:15px !important;
        height:17px !important;
    }

    #bo_w.ha-write-wrap .ha-captcha-force #captcha_mp3::after{
        left:29px !important;
        top:13px !important;
        width:16px !important;
        height:24px !important;
        background-size:16px 24px, 16px 24px;
    }

    #bo_w.ha-write-wrap .ha-captcha-force #captcha_reload::before{
        left:12px !important;
        top:12px !important;
        width:26px !important;
        height:26px !important;
    }

    #bo_w.ha-write-wrap .ha-captcha-force #captcha_reload::after{
        right:11px !important;
        top:15px !important;
        width:9px !important;
        height:9px !important;
    }
}
#bo_w.ha-write-wrap input.btn_danger,
#bo_w.ha-write-wrap .btn_danger {
    border: 1px solid #ef4444 !important;
    background: #ef4444 !important;
    color: #fff !important;
}

#bo_w.ha-write-wrap input.btn_danger:hover,
#bo_w.ha-write-wrap .btn_danger:hover {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
}
/* =========================================
   AUTOSAVE POPUP - STYLISH
========================================= */

#bo_w.ha-write-wrap .ha-titlebar-action {
    position: relative;
}

#bo_w.ha-write-wrap #autosave_pop {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 50;
    width: 360px;
    margin-top: 0;
    padding: 0;
    border: 1px solid #e4ecdd;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
    overflow: hidden;
}

#bo_w.ha-write-wrap #autosave_pop > strong {
    display: block;
    padding: 16px 18px;
    border-bottom: 1px solid #eef2ea;
    background: linear-gradient(180deg, #fcfdfb 0%, #f7faf4 100%);
    color: var(--ha-primary);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: -0.02em;
}

#bo_w.ha-write-wrap #autosave_pop ul {
    margin: 0;
    padding: 10px;
    list-style: none;
    max-height: 300px;
    overflow-y: auto;
}

#bo_w.ha-write-wrap #autosave_pop .ha-autosave-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    padding: 12px 14px;
    border: 1px solid #edf2e8;
    border-radius: 12px;
    background: #fcfdfb;
    transition: all .2s ease;
}

#bo_w.ha-write-wrap #autosave_pop .ha-autosave-item:last-child {
    margin-bottom: 0;
}

#bo_w.ha-write-wrap #autosave_pop .ha-autosave-item:hover {
    border-color: #d9e7cf;
    background: #f8fbf5;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
}

#bo_w.ha-write-wrap .ha-autosave-item-main {
    flex: 1 1 auto;
    min-width: 0;
}

#bo_w.ha-write-wrap .ha-autosave-load {
    display: block;
    color: var(--ha-primary);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.45;
    word-break: keep-all;
}

#bo_w.ha-write-wrap .ha-autosave-load:hover {
    color: var(--ha-accent-2);
}

#bo_w.ha-write-wrap .ha-autosave-meta {
    margin-top: 5px;
    color: var(--ha-text-sub);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}

#bo_w.ha-write-wrap .ha-autosave-item-side {
    flex: 0 0 auto;
}

#bo_w.ha-write-wrap .ha-autosave-del,
#bo_w.ha-write-wrap input.ha-autosave-del,
#bo_w.ha-write-wrap .btn_danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid #ef4444 !important;
    border-radius: 8px;
    background: #ef4444 !important;
    color: #fff !important;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: all .2s ease;
}

#bo_w.ha-write-wrap .ha-autosave-del:hover,
#bo_w.ha-write-wrap input.ha-autosave-del:hover,
#bo_w.ha-write-wrap .btn_danger:hover {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
}

#bo_w.ha-write-wrap #autosave_pop > div:last-child {
    display: flex;
    justify-content: flex-end;
    padding: 12px 16px;
    border-top: 1px solid #eef2ea;
    background: #fcfdfb;
}

#bo_w.ha-write-wrap .autosave_close {
    min-width: 74px;
    height: 36px;
    padding: 0 14px;
    border-radius: 8px;
}

/* 모바일 */
@media (max-width: 768px) {
    #bo_w.ha-write-wrap #autosave_pop {
        position: static;
        top: auto;
        right: auto;
        width: 100%;
        margin-top: 10px;
    }

    #bo_w.ha-write-wrap #autosave_pop .ha-autosave-item {
        align-items: flex-start;
    }
}
/* 드롭다운 내부 글자 고급스럽게 */
#bo_w.ha-write-wrap .ha-autosave-load {
    display: block;
    color: #1f2937;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: -0.02em;
    word-break: keep-all;
}

#bo_w.ha-write-wrap .ha-autosave-load:hover {
    color: #74b957;
}

#bo_w.ha-write-wrap .ha-autosave-meta {
    margin-top: 6px;
    color: #8a937f;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.02em;
}

#bo_w.ha-write-wrap .ha-autosave-item {
    position: relative;
    overflow: hidden;
}

#bo_w.ha-write-wrap .ha-autosave-item-main {
    position: relative;
    padding-left: 14px;
}

#bo_w.ha-write-wrap .ha-autosave-item-main:before {
    content: "";
    position: absolute;
    top: 4px;
    left: 0;
    width: 4px;
    height: calc(100% - 8px);
    border-radius: 999px;
    background: linear-gradient(180deg, #8ccf69 0%, #74b957 100%);
    opacity: .9;
}
#bo_w.ha-write-wrap .ha-autosave-foot {
    display: flex;
    justify-content: center;
    padding: 14px 0 16px;
    border-top: 1px solid #eef2ea;
}
/* view hero */
.ha-view-hero {
    padding: 26px 28px;
    margin-bottom: 22px;
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
    border: 1px solid #edf1f5;
    border-radius: 22px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .04);
}

.ha-view-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.ha-view-chip {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: #f3f6fa;
    color: #334155;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.ha-view-title {
    margin: 0;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.28;
    letter-spacing: -0.02em;
    color: #111827;
    word-break: keep-all;
}

.ha-view-subtitle {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.7;
    color: #6b7280;
    word-break: keep-all;
}

.ha-view-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #eef2f6;
}

.ha-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 13px;
    background: #fff;
    border: 1px solid #edf1f5;
    border-radius: 999px;
    color: #4b5563;
    font-size: 13px;
    line-height: 1;
}

.ha-meta-item i {
    color: #9ca3af;
    font-size: 13px;
}

.ha-meta-item em {
    font-style: normal;
    color: #6b7280;
    font-weight: 500;
}

.ha-meta-item strong {
    color: #111827;
    font-weight: 700;
}

.ha-view-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ha-mini-badge {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    background: #fff7ed;
    border: 1px solid #fde7cf;
    color: #c2410c;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

@media (max-width: 767px) {
    .ha-view-hero {
        padding: 20px 16px;
        border-radius: 18px;
    }

    .ha-view-title {
        font-size: 24px;
        line-height: 1.35;
    }

    .ha-view-subtitle {
        font-size: 14px;
        margin-top: 8px;
    }

    .ha-view-meta {
        gap: 8px;
        margin-top: 16px;
        padding-top: 16px;
    }

    .ha-meta-item {
        padding: 0 11px;
        min-height: 34px;
        font-size: 12px;
    }

    .ha-mini-badge,
    .ha-view-chip {
        height: 28px;
        font-size: 12px;
    }
}
.ha-view-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 12px;
    font-size: 14px;
    color: #4b5563;
}

.ha-view-quick span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ha-view-quick i {
    color: #9ca3af;
    font-size: 13px;
}