/* === 가지가지 카드형 리스트 (4열 고정) === */

.gg-wrap {
    width: 100%;
    padding: 12px 0 40px;
}

.gg-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* ✅ PC 4개 고정 */
    gap: 22px;
    margin: 0;
    padding: 0 12px;
    list-style: none;
}

@media (max-width: 1200px) {
    .gg-grid {
        gap: 18px;
    }
}

@media (max-width: 992px) {
    .gg-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* 태블릿 2개 */
}

@media (max-width: 576px) {
    .gg-grid {
        grid-template-columns: 1fr;
    }

    /* 모바일 1개 */
}

.gg-item {
    min-width: 0;
}

.gg-card {
    display: block;
    background: #fff;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
    transform: translateZ(0);
    transition: transform .2s ease, box-shadow .2s ease;
    text-decoration: none !important;
}

.gg-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
}

.gg-media {
    position: relative;
    aspect-ratio: 4 / 4; /* 카드 비율 */
    background-size: cover;
    background-position: center;
}

.gg-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .25) 45%, rgba(0, 0, 0, .65) 100%);
}

.gg-text {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    color: #fff;
    z-index: 2;
}

.gg-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.3px;
    margin: 0 0 8px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
    word-break: keep-all;
}

.gg-desc {
    font-size: 13px;
    opacity: .9;
    line-height: 1.35;
    max-height: 2.7em;
    overflow: hidden;
}

.gg-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 16px;
    color: #111;
    font-size: 13px;
}

.gg-meta-left {
    opacity: .7;
}

.gg-meta-right {
    opacity: .85;
}

.gg-loader {
    margin: 22px auto 0;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    color: #555;
}

.gg-spinner {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, .15);
    border-top-color: rgba(0, 0, 0, .55);
    animation: ggspin .9s linear infinite;
}

@keyframes ggspin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.gg-end {
    margin: 18px auto 0;
    text-align: center;
    color: #777;
    font-size: 13px;
}

/* 관리자 선택바 */
.gg-adminbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 10px 0 16px;
}

.gg-checkall {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    user-select: none;
}

.gg-adminbtns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.gg-btn {
    border: 0;
    border-radius: 12px;
    padding: 10px 12px;
    background: #111827;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.gg-btn-danger {
    background: #dc2626;
}

/* 카드 체크박스 */
.gg-item {
    position: relative;
}

.gg-check {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.gg-check input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.gg-check-ui {
    width: 22px;
    height: 22px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
    display: inline-block;
    position: relative;
}

.gg-check input:checked + .gg-check-ui::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 4px;
    width: 8px;
    height: 12px;
    border-right: 3px solid #111827;
    border-bottom: 3px solid #111827;
    transform: rotate(45deg);
}

.bo_btn_top_gg {
    margin: 8px 0 12px;
}

.bo_btn_top_gg .btn_bo_user {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.bo_btn_top_gg .btn_bo_user a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

/* ===== 상단 타이틀 + 아이콘 바 ===== */
.gg-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 14px 0 12px;
}

.gg-board-title{
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: #111827;
    padding-bottom: 0;   /* 기존 after 방식 제거 */
    position: static;
}

/* 텍스트 길이에 맞춘 언더라인 */
.gg-board-title > span{
    position: relative;
    display: inline-block;   /* 핵심: 텍스트 폭만큼 */
    padding-bottom: 8px;
}

/* 빨간 밑줄 느낌(원하면 컬러만 바꾸면 됨) */
.gg-board-title > span::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    border-radius: 999px;
    background: #4f46e5;
}

/* 아이콘 영역 */
.gg-iconbar {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 10px;
    align-items: center;
}

.gg-icon-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #ffffff;
    color: #111827;
    border: 1px solid rgba(17, 24, 39, .10);
    box-shadow: 0 6px 16px rgba(17, 24, 39, .08);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    text-decoration: none;
}

.gg-icon-btn i {
    font-size: 16px;
}

.gg-icon-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(17, 24, 39, .14);
    border-color: rgba(17, 24, 39, .18);
}

.gg-icon-primary {
    background: #111827;
    color: #fff;
    border-color: #111827;
}

.gg-icon-primary:hover {
    box-shadow: 0 12px 28px rgba(17, 24, 39, .22);
}

/* 모바일에서 줄바꿈 방지/정렬 */
@media (max-width: 768px) {
    .gg-topbar {
        margin: 10px 0 10px;
    }

    .gg-top-actions {
        margin-right: 10px;
    }

    .gg-board-title {
        margin-left: 15px;
        font-size: 18px;
    }

    .gg-icon-btn {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }
}


.bo_sch_wrap {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999
}

.bo_sch {
    position: absolute;
    top: 50%;
    left: 50%;
    background: #fff;
    text-align: left;
    width: 330px;
    max-height: 300px;
    margin-left: -125px;
    margin-top: -180px;
    overflow-y: auto;
    border-radius: 5px;
    -webkit-box-shadow: 1px 1px 18px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 1px 1px 18px rgba(0, 0, 0, 0.2);
    box-shadow: 1px 1px 18px rgba(0, 0, 0, 0.2);
    border: 1px solid #dde7e9;
    background: #fff;
    border-radius: 3px
}

.bo_sch:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

.bo_sch h3 {
    padding: 15px;
    border-bottom: 1px solid #e8e8e8
}

.bo_sch legend {
    background: red
}

.bo_sch form {
    padding: 15px;
    display: block
}

.bo_sch select {
    border: 0;
    width: 100%;
    height: 40px;
    border: 1px solid #d0d3db;
    border-radius: 2px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075)
}

.bo_sch .sch_bar {
    display: inline-block;
    width: 100%;
    clear: both;
    margin-top: 15px;
    border: 1px solid #d0d3db;
    border-radius: 2px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075)
}

.bo_sch .sch_input {
    width: 250px;
    height: 38px;
    border: 0;
    padding: 0;
    background-color: transparent;
    float: left
}

.bo_sch .sch_btn {
    height: 38px;
    float: right;
    color: #656565;
    background: none;
    border: 0;
    width: 40px;
    font-size: 15px
}

.bo_sch .bo_sch_cls {
    position: absolute;
    right: 0;
    top: 0;
    color: #b5b8bb;
    border: 0;
    padding: 12px 15px;
    font-size: 16px;
    background: #fff
}

.bo_sch_bg {
    background: #000;
    background: rgba(0, 0, 0, 0.1);
    width: 100%;
    height: 100%
}

/* 대표 이미지 박스 */
.gg-view-hero {
    margin: 18px 0 28px;
    padding: 28px 18px;
    background: #f3f3f3;
    border-radius: 10px;
    text-align: center;
}

.gg-view-hero img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

/* 본문 가독성 */
.gg-view-con {
    line-height: 1.7;
    font-size: 16px;
    word-break: break-word;
}

/* 추가 이미지 갤러리(있으면) */
.gg-view-gallery {
    margin-top: 28px;
}

.gg-view-gallery img {
    max-width: 100%;
    height: auto;
}

/* 공유영역(원하면 아래쪽으로) */
.gg-view-share {
    margin-top: 18px;
}

/* ================================
   게시글 보기(view) 깨짐 보정 (scope: #bo_v)
   ================================ */

/* 전체 폭/정렬 */
#bo_v {
    width: 100% !important;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}

/* 제목 줄바꿈/크기 */
#bo_v #bo_v_title {
    margin: 10px 0 5px;
    font-size: 28px;
    line-height: 1.2;
    word-break: break-word;
}

/* 작성자/정보 영역 정렬 */
#bo_v #bo_v_info .profile_info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

#bo_v #bo_v_info .pf_img {
    flex: 0 0 auto;
}

#bo_v #bo_v_info .profile_info_ct {
    min-width: 0;
}

/* ✅ 상단 버튼바(목록/답변/글쓰기/더보기) 가로 정렬 고정 */
#bo_v #bo_v_top {
    margin-top: 10px;
}

#bo_v #bo_v_top .btn_bo_user {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

#bo_v #bo_v_top .btn_bo_user > li {
    margin: 0;
    padding: 0;
    position: relative; /* more_opt 위치 기준 */
}

#bo_v #bo_v_top .btn_bo_user a,
#bo_v #bo_v_top .btn_bo_user button {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* 더보기 메뉴가 버튼 옆에 정상적으로 뜨도록 */
#bo_v #bo_v_top .more_opt.is_view_btn {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 50;
}

/* 본문 가독성 + 이미지 넘침 방지 */
#bo_v #bo_v_con {
    width: 100%;
    line-height: 1.75;
    font-size: 16px;
    word-break: break-word;
}

#bo_v #bo_v_con img,
#bo_v #bo_v_atc img {
    max-width: 100% !important;
    height: auto !important;
}

/* 대표이미지/갤러리도 view 안에서만 적용되게 스코프 */
#bo_v .gg-view-hero {
    margin: 18px 0 28px;
    padding: 28px 18px;
    background: #f3f3f3;
    border-radius: 10px;
    text-align: center;
}

#bo_v .gg-view-hero a {
    display: block;
    text-align: center;
}

#bo_v .gg-view-hero img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
}

#bo_v .gg-view-gallery {
    margin-top: 28px;
}

#bo_v .gg-view-gallery img {
    max-width: 100% !important;
    height: auto !important;
}

/* 댓글 입력창 폭 깨짐 방지 */
#bo_v #bo_vc_w textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 120px;
    resize: vertical;
}

/* 모바일 */
@media (max-width: 768px) {
    #wrapper {
        min-width: unset !important;
    }

    #container_wr {
        width: unset !important;
    }

    #bo_v {
        padding: 0 12px;
    }

    #bo_v #bo_v_title {
        font-size: 22px;
    }

    #bo_v #bo_v_top .btn_bo_user a,
    #bo_v #bo_v_top .btn_bo_user button {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }
}

/* ================================
   게시글 이전글 / 다음글 디자인 개선
   ================================ */

.bo_v_nb {
    margin: 30px 0 20px;
    padding: 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    max-width: 100%;
}

.bo_v_nb ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bo_v_nb li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 10px;
    font-size: 14px;
    border-top: 1px dashed #eee;
}

.bo_v_nb li:first-child {
    border-top: none;
}

/* 아이콘 영역 */
.bo_v_nb li span {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    color: #666;
    white-space: nowrap;
}

/* ▲ ▼ 아이콘 정리 */
.bo_v_nb .prev span::before {
    content: "▲";
    margin-right: 6px;
    font-size: 11px;
}

.bo_v_nb .next span::before {
    content: "▼";
    margin-right: 6px;
    font-size: 11px;
}

/* 제목 링크 */
.bo_v_nb a {
    flex: 1;
    color: #333;
    text-decoration: none;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bo_v_nb a:hover {
    color: #5b5be0; /* 가지가지 포인트 컬러 느낌 */
    text-decoration: underline;
}

/* 날짜 */
.bo_v_nb .bo_v_nb_date {
    font-size: 12px;
    color: #999;
    white-space: nowrap;
}

/* 모바일 */
@media (max-width: 768px) {
    .bo_v_nb li {
        flex-wrap: wrap;
        gap: 6px;
    }

    .bo_v_nb a {
        white-space: normal;
    }
}

/* ================================
   게시글 보기: 점3개 더보기 메뉴(.more_opt) 정렬/깨짐 수정
   ================================ */
#bo_v #bo_v_top {
    position: relative;
}

/* 드롭다운 박스 */
#bo_v #bo_v_top .more_opt {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    z-index: 9999;

    min-width: 170px;
    padding: 8px;
    margin: 0;

    background: #fff;
    border: 1px solid #e9e9e9;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);

    list-style: none;
}

/* 항목 */
#bo_v #bo_v_top .more_opt li {
    margin: 0;
    padding: 0;
    float: none !important; /* ✅ float 영향 제거 */
    width: 100% !important;
}

/* 링크: 아이콘 + 텍스트 한 줄 정렬 */
#bo_v #bo_v_top .more_opt li a,
#bo_v #bo_v_top .more_opt li button {
    display: flex !important; /* ✅ 세로 깨짐 방지 */
    align-items: center;
    justify-content: flex-start;
    gap: 10px;

    width: 100%;
    padding: 10px 10px;

    border: 0;
    background: transparent;
    border-radius: 10px;

    font-size: 14px;
    line-height: 1.2;
    color: #333;
    text-decoration: none;

    white-space: nowrap;
    box-sizing: border-box;
}

/* hover */
#bo_v #bo_v_top .more_opt li a:hover,
#bo_v #bo_v_top .more_opt li button:hover {
    background: #f6f6ff;
    color: #4f46e5;
}

/* 아이콘 크기/정렬 (폰트아이콘/이미지 모두 대응) */
#bo_v #bo_v_top .more_opt i,
#bo_v #bo_v_top .more_opt img {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: inline-block;
}

/* '정상/삭제/복사/이동' 같은 글자가 세로로 줄바꿈되는 현상 방지 */
#bo_v #bo_v_top .more_opt span {
    white-space: nowrap;
}

/* ================================
   게시글 좋아요 버튼 UI 개선
   ================================ */

/* 좋아요 전체 영역 */
#bo_v_act {
    margin: 20px 0 10px;
}

/* 좋아요 버튼 */
#bo_v_act .btn_bo_v_act,
#bo_v_act a {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 10px 18px; /* ✅ 클릭 영역 크게 */
    border-radius: 999px; /* pill 버튼 */
    border: 1px solid #e5e7eb;
    background: #f9fafb;

    font-size: 15px;
    font-weight: 600;
    color: #374151;

    cursor: pointer;
    text-decoration: none;
    user-select: none;

    transition: all .15s ease;
}

/* 아이콘 크기 */
#bo_v_act .btn_bo_v_act i,
#bo_v_act a i {
    font-size: 22px; /* ✅ 아이콘 크게 */
    line-height: 1;
}

/* 숫자(카운트) */
#bo_v_act .btn_bo_v_act strong,
#bo_v_act a strong {
    font-size: 15px;
    font-weight: 700;
    margin-left: 2px;
}

/* hover */
#bo_v_act .btn_bo_v_act:hover,
#bo_v_act a:hover {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #4338ca;
    transform: translateY(-1px);
}

/* 눌렀을 때(active 느낌) */
#bo_v_act .btn_bo_v_act:active,
#bo_v_act a:active {
    transform: scale(0.96);
}

/* 이미 추천한 상태(있다면 클래스에 맞춰 적용) */
#bo_v_act .is_active,
#bo_v_act .active {
    background: #4f46e5;
    border-color: #4f46e5;
    color: #fff;
}

/* 모바일에서 더 큼 */
@media (max-width: 768px) {
    #bo_v_act .btn_bo_v_act,
    #bo_v_act a {
        padding: 12px 20px;
        font-size: 16px;
    }

    #bo_v_act .btn_bo_v_act i,
    #bo_v_act a i {
        font-size: 24px;
    }
}

/* ================================
   추천/비추천 버튼: 로그인(a) + 로그아웃(span) 공통 스타일
   ================================ */

/* 공통 박스(로그인/로그아웃) */
#bo_v_act .bo_v_act_gng > a.bo_v_good,
#bo_v_act .bo_v_act_gng > a.bo_v_nogood,
#bo_v_act > span.bo_v_good,
#bo_v_act > span.bo_v_nogood {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;

    font-size: 15px;
    font-weight: 600;
    color: #374151;

    text-decoration: none;
    user-select: none;
    box-sizing: border-box;
}

/* 아이콘 크게 */
#bo_v_act .bo_v_act_gng > a.bo_v_good i,
#bo_v_act .bo_v_act_gng > a.bo_v_nogood i,
#bo_v_act > span.bo_v_good i,
#bo_v_act > span.bo_v_nogood i {
    font-size: 22px;
    line-height: 1;
}

/* 숫자 */
#bo_v_act .bo_v_act_gng > a.bo_v_good strong,
#bo_v_act .bo_v_act_gng > a.bo_v_nogood strong,
#bo_v_act > span.bo_v_good strong,
#bo_v_act > span.bo_v_nogood strong {
    font-size: 15px;
    font-weight: 700;
    margin-left: 2px;
}

/* 로그인 상태(클릭 가능)만 hover/active */
#bo_v_act .bo_v_act_gng > a.bo_v_good,
#bo_v_act .bo_v_act_gng > a.bo_v_nogood {
    cursor: pointer;
    transition: all .15s ease;
}

#bo_v_act .bo_v_act_gng > a.bo_v_good:hover,
#bo_v_act .bo_v_act_gng > a.bo_v_nogood:hover {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #4338ca;
    transform: translateY(-1px);
}

#bo_v_act .bo_v_act_gng > a.bo_v_good:active,
#bo_v_act .bo_v_act_gng > a.bo_v_nogood:active {
    transform: scale(0.96);
}

/* 로그아웃 상태(span)는 클릭 안 되는 느낌만 */
#bo_v_act > span.bo_v_good,
#bo_v_act > span.bo_v_nogood {
    opacity: .75;
    cursor: default;
}

/* 모바일 */
@media (max-width: 768px) {
    #bo_v_act .bo_v_act_gng > a.bo_v_good,
    #bo_v_act .bo_v_act_gng > a.bo_v_nogood,
    #bo_v_act > span.bo_v_good,
    #bo_v_act > span.bo_v_nogood {
        padding: 12px 20px;
        font-size: 16px;
    }

    #bo_v_act .bo_v_act_gng > a.bo_v_good i,
    #bo_v_act .bo_v_act_gng > a.bo_v_nogood i,
    #bo_v_act > span.bo_v_good i,
    #bo_v_act > span.bo_v_nogood i {
        font-size: 24px;
    }
}

/* 이미지 영역 전체 클릭 가능 */
#bo_v .gg-view-hero {
    cursor: pointer;
}

#bo_v .gg-view-hero img {
    pointer-events: none; /* 이미지 자체 클릭 막고 */
}

/* ================================
   댓글 UI (view_comment.skin.php)
   ================================ */

/* 댓글 토글 버튼 */
.cmt_btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin: 20px 0 10px;
    padding: 14px 16px;

    border: 1px solid #e9e9e9;
    border-radius: 14px;
    background: #fff;

    cursor: pointer;
    box-sizing: border-box;
}

.cmt_btn .total {
    font-size: 15px;
    font-weight: 700;
    color: #111;
}

.cmt_btn .total b {
    margin-right: 8px;
    font-weight: 700;
}

.cmt_btn .cmt_more {
    width: 10px;
    height: 10px;
    border-right: 2px solid #666;
    border-bottom: 2px solid #666;
    transform: rotate(45deg);
    transition: transform .15s ease;
    margin-left: 10px;
}

.cmt_btn.cmt_btn_op .cmt_more {
    transform: rotate(-135deg);
}

/* 댓글 영역 기본 */
#bo_vc {
    margin-top: 10px;
    padding: 14px 0 0;
    border-top: 1px solid #eee;
}

#bo_vc > h2 {
    font-size: 18px;
    margin: 0 0 12px;
    font-weight: 700;
}

/* 댓글 없을 때 */
#bo_vc_empty {
    padding: 18px 12px;
    color: #777;
    background: #fafafa;
    border: 1px dashed #e9e9e9;
    border-radius: 12px;
}

/* 각 댓글 카드 */
#bo_vc article[id^="c_"] {
    position: relative;
    display: flex;
    gap: 12px;

    padding: 14px 12px;
    margin: 10px 0;

    background: #fff;
    border: 1px solid #ececec;
    border-radius: 16px;
    box-sizing: border-box;
}

/* 대댓글(들여쓰기) - PHP에서 margin-left 주고 있어서, 시각적으로만 보강 */
#bo_vc article[id^="c_"][style*="margin-left"] {
    background: #fbfbff;
    border-left: 4px solid #c7d2fe;
}

/* 프로필 이미지 */
#bo_vc .pf_img {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    overflow: hidden;
    background: #f3f3f3;
}

#bo_vc .pf_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 내용 래퍼 */
#bo_vc .cm_wrap {
    flex: 1;
    min-width: 0;
}

/* 헤더(작성자/시간) */
#bo_vc header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;

    margin-bottom: 8px;
}

#bo_vc header h2 {
    display: none; /* 접근성용 제목 숨김(이미 이름 출력됨) */
}

#bo_vc header .bo_vc_hdinfo {
    margin-left: auto;
    font-size: 12px;
    color: #888;
    white-space: nowrap;
}

#bo_vc header time {
    font-size: 12px;
    color: #888;
}

/* 작성자명 */
#bo_vc header,
#bo_vc header * {
    box-sizing: border-box;
}

#bo_vc header > * {
    line-height: 1.2;
}

#bo_vc header .sound_only + strong,
#bo_vc header strong {
    font-weight: 700;
}

/* 댓글 본문 */
#bo_vc .cmt_contents p {
    margin: 0;
    font-size: 14px;
    line-height: 1.75;
    color: #222;

    word-break: break-word;
}

#bo_vc .cmt_contents img {
    max-width: 100% !important;
    height: auto !important;
}

/* 답글/수정 폼 자리 표시 span */
#bo_vc .bo_vc_w {
    display: block;
    margin-top: 10px;
}

/* 우측 옵션(점3개) */
#bo_vc .bo_vl_opt {
    flex: 0 0 auto;
    position: relative;
    align-self: flex-start;
}

#bo_vc .btn_cm_opt {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid #e9e9e9;
    background: #fff;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
}

/* 옵션 드롭다운 */
#bo_vc .bo_vc_act {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 50;

    min-width: 120px;
    padding: 8px;
    margin: 0;

    list-style: none;
    background: #fff;
    border: 1px solid #e9e9e9;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

#bo_vc .bo_vc_act li {
    margin: 0;
    padding: 0;
}

#bo_vc .bo_vc_act a {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    padding: 10px 10px;
    border-radius: 10px;

    font-size: 14px;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
}

#bo_vc .bo_vc_act a:hover {
    background: #f6f6ff;
    color: #4f46e5;
}

/* 댓글 작성 영역 */
#bo_vc_w {
    margin-top: 18px;
    padding: 16px 12px;
    border-top: 1px solid #eee;
}

#bo_vc_w h2 {
    font-size: 18px;
    margin: 0 0 12px;
    font-weight: 700;
}

#bo_vc_w textarea#wr_content {
    width: 100%;
    min-height: 120px;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid #e9e9e9;
    background: #fff;
    box-sizing: border-box;
    resize: vertical;
    outline: none;
}

#bo_vc_w textarea#wr_content:focus {
    border-color: #c7d2fe;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, .10);
}

#bo_vc_w .bo_vc_w_wr {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

#bo_vc_w .bo_vc_w_info {
    flex: 1;
    min-width: 240px;
}

/* 비회원 입력 */
#bo_vc_w .frm_input {
    width: 100%;
    margin: 6px 0;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #e9e9e9;
    box-sizing: border-box;
}

/* 등록 버튼 */
#bo_vc_w .btn_confirm {
    display: flex;
    align-items: center;
    gap: 10px;
}

#bo_vc_w .btn_submit {
    padding: 10px 16px;
    border-radius: 12px;
    border: 0;
    background: #4f46e5;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

#bo_vc_w .btn_submit:hover {
    filter: brightness(0.95);
}

/* 비밀글 체크 */
#bo_vc_w .secret_cm {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #444;
}

/* 모바일 최적화 */
@media (max-width: 768px) {
    #bo_vc article[id^="c_"] {
        padding: 12px 10px;
        border-radius: 14px;
    }

    #bo_vc .pf_img {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    #bo_vc header .bo_vc_hdinfo {
        margin-left: 0;
        width: 100%;
    }
}

/* ================================
   대댓글(답글) 작성폼 스타일 (bo_vc_w 안에서 열리는 폼)
   ================================ */

/* 답글 폼이 들어가는 자리 */
#bo_vc .bo_vc_w {
    display: block;
    margin-top: 10px;
}

/* 답글 폼 전체 박스 */
#bo_vc .bo_vc_w form,
#bo_vc .bo_vc_w .bo_vc_w_wrap {
    margin-top: 10px;
    padding: 14px 12px;
    border: 1px solid #e9e9e9;
    border-radius: 14px;
    background: #fafafa;
    box-sizing: border-box;
}

/* 답글 textarea */
#bo_vc .bo_vc_w textarea,
#bo_vc .bo_vc_w textarea#wr_content {
    width: 100% !important;
    min-height: 110px;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    background: #fff;
    box-sizing: border-box;
    resize: vertical;
    outline: none;
}

#bo_vc .bo_vc_w textarea:focus {
    border-color: #c7d2fe;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, .10);
}

/* 답글 폼 내부 입력(비회원 이름/비번 등) */
#bo_vc .bo_vc_w .frm_input {
    width: 100%;
    margin: 6px 0;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    box-sizing: border-box;
}

/* 답글 폼 버튼 줄(비밀글 + 등록) */
#bo_vc .bo_vc_w .btn_confirm {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* 비밀글 체크 */
#bo_vc .bo_vc_w .secret_cm,
#bo_vc .bo_vc_w label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #444;
}

/* 답글 등록 버튼 */
#bo_vc .bo_vc_w .btn_submit,
#bo_vc .bo_vc_w input[type="submit"],
#bo_vc .bo_vc_w button[type="submit"] {
    padding: 10px 16px;
    border-radius: 12px;
    border: 0;
    background: #4f46e5;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

#bo_vc .bo_vc_w .btn_submit:hover,
#bo_vc .bo_vc_w input[type="submit"]:hover,
#bo_vc .bo_vc_w button[type="submit"]:hover {
    filter: brightness(.95);
}

/* 답글 취소 버튼(있을 경우) */
#bo_vc .bo_vc_w .btn_cancel,
#bo_vc .bo_vc_w .btn_b02 {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #333;
    text-decoration: none;
    cursor: pointer;
}

/* 모바일 */
@media (max-width: 768px) {
    #bo_vc .bo_vc_w form,
    #bo_vc .bo_vc_w .bo_vc_w_wrap {
        padding: 12px 10px;
        border-radius: 12px;
    }

    #bo_vc .bo_vc_w textarea {
        min-height: 100px;
    }
}

/* =====================================================
   GG View Responsive Pack (view.skin.php + comments)
   - style.css 맨 아래에 추가
   ===================================================== */

/* 1) 태블릿 이하(<= 992px) */
@media (max-width: 992px) {

    /* 전체 폭/여백 */
    #bo_v{
        max-width: 100% !important;
        padding: 0 14px !important;
    }

    /* 타이틀 */
    #bo_v #bo_v_title{
        font-size: 24px;
        line-height: 1.25;
        margin: 10px 0 8px;
    }

    /* 작성자/메타 정보 줄 정리 */
    #bo_v #bo_v_info .profile_info{
        align-items: flex-start;
        gap: 10px;
    }

    /* 메타 줄들(작성자/댓글/조회/날짜)이 한 덩어리로 보이게 */
    #bo_v #bo_v_info .profile_info_ct{
        display: flex;
        flex-wrap: wrap;
        gap: 8px 10px;
        align-items: center;
    }

    #bo_v #bo_v_info .profile_info_ct strong{
        display: inline-flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
    }

    /* 링크연결 문구가 길면 줄바꿈 */
    #bo_v #bo_v_info .profile_info_ct .bo_v_link_cnt{
        flex: 1 1 100%;
        white-space: normal;
        opacity: .85;
    }

    /* 상단 버튼 바 */
    #bo_v #bo_v_top .btn_bo_user{
        justify-content: flex-start;
    }
}


/* 2) 모바일(<= 768px) */
@media (max-width: 768px) {

    /* 타이틀 더 작게 */
    #bo_v #bo_v_title{
        font-size: 20px;
        line-height: 1.25;
    }

    /* 메타 정보: “작성자/댓글/조회/날짜”가 2~3줄로 자연스럽게 */
    #bo_v #bo_v_info .profile_info_ct{
        width: 100%;
        gap: 6px 10px;
    }

    /* 아이콘/텍스트 줄간격 */
    #bo_v #bo_v_info .profile_info_ct i{
        opacity: .85;
    }

    /* 버튼: 터치 영역 확보(이미 38px 있지만, 더 안정적으로) */
    #bo_v #bo_v_top .btn_bo_user a,
    #bo_v #bo_v_top .btn_bo_user button{
        width: 42px;
        height: 42px;
        border-radius: 14px;
    }

    /* 점3개 드롭다운: 화면 밖으로 안 나가게 */
    #bo_v #bo_v_top .more_opt{
        right: 0;
        left: auto;
        min-width: 160px;
        max-width: calc(100vw - 32px);
    }

    /* 대표 이미지 박스: 모바일 패딩 축소 */
    #bo_v .gg-view-hero{
        margin: 14px 0 18px;
        padding: 14px 10px;
        border-radius: 12px;
    }

    /* 본문 글자 크기/줄간격 */
    #bo_v #bo_v_con{
        font-size: 15px;
        line-height: 1.75;
    }

    /* 이전글/다음글: 제목이 길면 아래로 내려오게 */
    .bo_v_nb li{
        flex-wrap: wrap;
        align-items: flex-start;
    }
    .bo_v_nb a{
        flex: 1 1 100%;
        white-space: normal;
        line-height: 1.45;
    }
    .bo_v_nb .nb_date,
    .bo_v_nb .bo_v_nb_date{
        margin-left: auto;
    }

    /* 좋아요 영역: 가운데 정렬 (원하면 제거 가능) */
    #bo_v_act{
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    /* 댓글 카드: 날짜/옵션이 위로 몰리게 */
    #bo_vc article[id^="c_"]{
        gap: 10px;
    }
    #bo_vc header .bo_vc_hdinfo{
        width: 100%;
        margin-left: 0;
    }

    /* 댓글 작성 폼: 버튼 줄이 우측 정렬 유지 + 줄바꿈 자연스럽게 */
    #bo_vc_w .btn_confirm{
        width: 100%;
        justify-content: flex-end;
    }
}


/* 3) 작은 모바일(<= 420px) */
@media (max-width: 420px){

    #bo_v{
        padding: 0 12px !important;
    }

    #bo_v #bo_v_title{
        font-size: 18px;
    }

    /* 상단 버튼이 너무 많을 때 자동 줄바꿈 */
    #bo_v #bo_v_top .btn_bo_user{
        gap: 8px;
    }

    /* 메타 정보 줄: 너무 빽빽하면 한 줄씩 */
    #bo_v #bo_v_info .profile_info_ct strong{
        font-size: 13px;
    }

    /* 댓글 프로필 이미지 살짝 축소 */
    #bo_vc .pf_img{
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }
}

@media (max-width: 768px){

    /* 대표 이미지 영역은 가운데 정렬 + 높이 제한 */
    #bo_v .gg-view-hero{
        padding: 12px 10px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        overflow: hidden !important;
        max-height: 55vh !important;
        max-width: 95vw !important;
    }

    #bo_v .gg-view-hero a{
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
    }

    /* ✅ 핵심: 세로 최대 높이 제한 + 비율 유지 */
    #bo_v .gg-view-hero img{
        width: auto !important;          /* 100% 강제 해제 */
        max-width: 100% !important;
        height: auto !important;
        max-height: 55vh !important;     /* 화면 높이의 55%까지만 */
        object-fit: contain !important;
        margin: 0 auto !important;
        display: block !important;
    }
}

/* =====================================================
   bo_v_nb(이전글/다음글) + 댓글(#bo_vc) 반응형 보강
   - style.css 맨 아래 추가
   ===================================================== */

/* ---------- bo_v_nb(이전/다음) 기본 정리: HTML 구조에 맞춰 재정의 ---------- */
.bo_v_nb{ list-style:none; margin:30px 0 20px; padding:0; }
.bo_v_nb > li{ list-style:none; }

.bo_v_nb li.btn_prv,
.bo_v_nb li.btn_next{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 10px;
    border-top:1px dashed #eee;
    font-size:14px;
}

.bo_v_nb li.btn_prv{ border-top:none; }

.bo_v_nb .nb_tit{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:#666;
    white-space:nowrap;
    flex:0 0 auto;
}

.bo_v_nb a{
    flex:1 1 auto;
    min-width:0;
    color:#333;
    text-decoration:none;
    font-weight:500;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.bo_v_nb .nb_date{
    margin-left:auto;
    font-size:12px;
    color:#999;
    white-space:nowrap;
    flex:0 0 auto;
}

/* 모바일: 제목은 2줄까지 허용 + 날짜는 아래/우측 정렬 */
@media (max-width: 768px){
    .bo_v_nb li.btn_prv,
    .bo_v_nb li.btn_next{
        flex-wrap:wrap;
        gap:6px 10px;
        align-items:flex-start;
    }

    .bo_v_nb a{
        flex:1 1 100%;
        white-space:normal;
        overflow:visible;
        text-overflow:clip;
        line-height:1.45;
    }

    .bo_v_nb .nb_date{
        margin-left:auto;
    }
}

/* 작은 모바일: 타이틀(이전글/다음글)은 위, 날짜는 아래로 */
@media (max-width: 420px){
    .bo_v_nb .nb_tit{ flex:1 1 100%; }
    .bo_v_nb .nb_date{ width:100%; text-align:right; }
}


/* ---------- 댓글(#bo_vc) 반응형 보강 ---------- */

/* 댓글 카드: 옵션 버튼 공간 확보(겹침 방지) */
#bo_vc article[id^="c_"]{
    position:relative;
    padding-right:54px; /* 우측 점3개 공간 */
}

/* 옵션 버튼을 카드 우상단 고정(모바일에서 특히 안정적) */
#bo_vc .bo_vl_opt{
    position:absolute;
    right:12px;
    top:12px;
    margin:0;
}

/* 헤더(이름/시간) 줄이 좁아지면 자연스럽게 줄바꿈 */
#bo_vc header{
    padding-right:10px;
}
#bo_vc header .bo_vc_hdinfo{
    margin-left:auto;
}

/* 모바일: 작성시간/상태 줄이 아래로 내려오게 */
@media (max-width: 768px){
    #bo_vc article[id^="c_"]{
        padding:12px 10px;
        padding-right:52px;
        border-radius:14px;
    }

    #bo_vc header{
        gap:6px 8px;
    }

    #bo_vc header .bo_vc_hdinfo{
        width:100%;
        margin-left:0;
        white-space:normal;
    }

    /* 대댓글(들여쓰기) 너무 과하면 제한 */
    #bo_vc article[id^="c_"][style*="margin-left"]{
        margin-left:12px !important;
    }
}

/* 답글/수정 폼(bo_vc 내부에서 열리는 폼) 모바일 최적화 */
#bo_vc .bo_vc_w form,
#bo_vc .bo_vc_w .bo_vc_w_wrap{
    width:100%;
    max-width:100%;
}

#bo_vc .bo_vc_w .btn_confirm{
    width:100%;
    justify-content:flex-end;
}

/* 작은 모바일: 버튼/체크박스 줄바꿈 */
@media (max-width: 420px){
    #bo_vc .bo_vc_w .btn_confirm{
        justify-content:space-between;
    }
    #bo_vc .bo_vc_w .btn_submit{
        width:100%;
    }
}


/* 댓글 작성 폼(#bo_vc_w) 모바일: 입력/버튼 스택 */
@media (max-width: 768px){
    #bo_vc_w{
        padding:14px 10px;
    }
    #bo_vc_w .bo_vc_w_wr{
        flex-direction:column;
        align-items:stretch;
    }
    #bo_vc_w .bo_vc_w_info{
        min-width:0;
        width:100%;
    }
    #bo_vc_w .btn_confirm{
        width:100%;
        justify-content:space-between;
    }
    #bo_vc_w .btn_submit{
        min-height:44px;
    }
}

/* 모바일에서는 제목 줄바꿈 허용 (한 줄 강제 제거) */
@media (max-width: 768px){
    .bo_v_nb li.btn_prv,
    .bo_v_nb li.btn_next{
        flex-wrap: wrap;
    }

    .bo_v_nb a{
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        word-break: break-word;
        overflow-wrap: anywhere;
        flex: 1 1 100%;
    }

    /* 날짜/타이틀은 줄바꿈 허용(필요시) */
    .bo_v_nb .nb_tit,
    .bo_v_nb .nb_date{
        max-width: 100%;
    }
}

/* =====================================================
   첨부파일(#bo_v_file) 및 좋아요(#bo_v_act) 반응형 보강
   ===================================================== */

/* 첨부파일 영역 */
#bo_v_file {
    margin: 20px 0;
    padding: 14px 16px;
    border: 1px solid #e9e9e9;
    border-radius: 12px;
    background: #fafafa;
    box-sizing: border-box; /* width 계산에 패딩 포함 */
    width: 100%; /* 부모에 맞춤 */
}

#bo_v_file h2 {
    font-size: 16px;
    margin: 0 0 10px;
    font-weight: 700;
}

#bo_v_file ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#bo_v_file li {
    margin: 8px 0;
    word-break: break-all; /* 긴 파일명 줄바꿈 강제 */
    line-height: 1.4;
}

#bo_v_file li i {
    color: #888;
    margin-right: 6px;
}

#bo_v_file a {
    color: #333;
    text-decoration: none;
}

#bo_v_file .bo_v_file_cnt {
    display: inline-block;
    margin-top: 4px;
    font-size: 12px;
    color: #888;
}

/* 좋아요 버튼 영역 보강 */
#bo_v_act {
    width: 100%;
    box-sizing: border-box;
}

/* 모바일 전용 보강 */
@media (max-width: 768px) {
    #bo_v_file {
        padding: 12px;
    }
    
    #bo_v_file li {
        font-size: 14px;
    }

    /* 좋아요 버튼 영역 줄바꿈 및 크기 제한 */
    #bo_v_act {
        flex-wrap: wrap;
    }
    
    #bo_v_act .bo_v_act_gng {
        max-width: 100%;
        display: inline-flex; /* flex 아이템으로 동작 */
    }
    
    #bo_v_act .bo_v_act_gng > a {
        max-width: 100%;
        box-sizing: border-box;
        white-space: normal; /* 텍스트 줄바꿈 허용 */
        height: auto; /* 높이 유동적 */
    }
}

/* =====================================================
   WRITE SKIN (write.skin.php) - GG Style
   scope: #bo_w
   ===================================================== */
#bo_w .bo_v_option li {
    display: inline-block;
    float: left;
    text-align: left;
    margin: 0 5px 0 0
}

#bo_w .bo_v_option li label {
    vertical-align: baseline
}

#bo_w .bo_v_option .chk_box input[type="checkbox"] + label span {
    margin-left: 0;
    margin-right: 5px
}

#bo_w .write_div {
    margin: 10px 0;
    position: relative
}

#bo_w .write_div:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

#bo_w .bo_w_info:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}

#bo_w .bo_w_info .frm_input {
    float: left;
    margin-bottom: 1%
}

#bo_w #wr_password, #bo_w #wr_homepage {
    margin-left: 1%
}

#bo_w .wr_content.smarteditor2 iframe {
    background: #fff
}

#bo_w .bo_w_tit {
    position: relative
}

#bo_w .bo_w_tit .frm_input {
    padding-right: 120px
}

#bo_w .bo_w_tit #btn_autosave {
    position: absolute;
    top: 5px;
    right: 5px;
    line-height: 30px;
    height: 30px
}

#bo_w .bo_w_link label {
    position: absolute;
    top: 1px;
    left: 1px;
    border-radius: 3px 0 0 3px;
    height: 38px;
    line-height: 38px;
    width: 40px;
    font-size: 1.2em;
    text-align: center;
    color: #b2b2b2
}

#bo_w .bo_w_link .frm_input {
    padding-left: 50px
}

#bo_w .bo_w_flie .lb_icon {
    position: absolute;
    top: 0px;
    left: 0px;
    border-radius: 3px 0 0 3px;
    height: 38px;
    line-height: 38px;
    width: 40px;
    font-size: 1.2em;
    text-align: center;
    color: #b2b2b2
}

#bo_w .bo_w_flie .frm_file {
    padding-left: 50px;
    margin-top: 3px
}

#bo_w .bo_w_flie .file_wr {
    position: relative;
    border: 1px solid #ccc;
    background: #fff;
    color: #000;
    vertical-align: middle;
    border-radius: 3px;
    padding: 5px;
    height: 40px;
    margin: 0
}

#bo_w .bo_w_flie .frm_input {
    margin: 10px 0 0
}

#bo_w .bo_w_flie .file_del {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 0.92em;
    color: #7d7d7d
}

#bo_w .bo_w_select select {
    border: 1px solid #d0d3db;
    width: 100%;
    height: 40px;
    border-radius: 3px;
}

#bo_w .btn_submit {
    padding: 0 20px;
    font-size: 1.167em;
    background: #4f46e5;
    color: #fff;
    font-weight: 700;
}

#bo_w .btn_submit:hover {
    color: #3730a3;
    background: #fff;
}

#bo_w .btn_cancel {
    border-radius: 5px;
    font-size: 1.167em;
    font-weight: 700;
}

a.btn, .btn {
    line-height: 35px;
    height: 35px;
    padding: 0 10px;
    text-align: center;
    font-weight: bold;
    border: 0;
    font-size: 1.4em;
    -webkit-transition: background-color 0.3s ease-out;
    -moz-transition: background-color 0.3s ease-out;
    -o-transition: background-color 0.3s ease-out;
    transition: background-color 0.3s ease-out
}

.bo_w_premium {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
}

/* 라벨 전체 */
.bo_w_premium .chk_box {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    font-weight: 500;
}

/* 실제 checkbox 숨김 */
.bo_w_premium .chk_box input[type="checkbox"] {
    display: none;
}

/* 토글 트랙 */
.bo_w_premium .chk_box span {
    position: relative;
    width: 44px;
    height: 26px;
    background: #e5e7eb;
    border-radius: 999px;
    transition: background 0.25s ease;
    flex-shrink: 0;
}

/* 토글 동그라미 */
.bo_w_premium .chk_box span::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform 0.25s ease;
}

/* 체크 ON */
.bo_w_premium .chk_box input:checked + span {
    background: #4f46e5;
}

/* 체크 ON 동그라미 이동 */
.bo_w_premium .chk_box input:checked + span::after {
    transform: translateX(18px);
}