@charset "utf-8";
/* ==========================================================================
   COMU 게시판 스킨 (comu_list / comu_webzine / comu_gallery / comu_guarantee / comu_scam)
   ========================================================================== */

/* 게시판 상단 내용(관리자 상단 HTML) */
#bo_list, #bo_v, #bo_w {width: 100% !important}

/* 안내 띠 */
.cm-guide-strip {display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; padding: 14px 16px; border-radius: var(--cm-radius); background: var(--cm-accent-bg); border: 1px solid #b5ead2; color: #065f46; font-size: 13.5px; line-height: 1.6}
.cm-guide-strip > .fa {margin-top: 2px; font-size: 18px; color: var(--cm-accent)}
.cm-guide-strip a {text-decoration: underline; font-weight: 700}
.cm-guide-strip.is-danger {background: var(--cm-danger-bg); border-color: #f8c4c4; color: #991b1b}
.cm-guide-strip.is-danger > .fa {color: var(--cm-danger)}

/* 분류 탭 */
.cm-cate {margin-bottom: 12px}
.cm-cate ul {display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px}
.cm-cate ul::-webkit-scrollbar {display: none}
.cm-cate li {flex-shrink: 0}
.cm-cate a {display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 17px; background: #fff; border: 1px solid var(--cm-line); color: var(--cm-ink-2); font-size: 13.5px; font-weight: 600; white-space: nowrap}
.cm-cate a:hover {border-color: #c3ccd9}
.cm-cate #bo_cate_on {background: var(--cm-ink); border-color: var(--cm-ink); color: #fff}

/* 도구 줄 */
.cm-bo-bar {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 10px}
.cm-bo-total {color: var(--cm-muted); font-size: 13px}
.cm-bo-total b {color: var(--cm-ink); font-weight: 800}
.cm-bo-sch-on {margin-left: 8px; padding: 3px 9px; border-radius: 6px; background: #fff6dc; color: #92400e; font-size: 12.5px}
.cm-bo-sch-on a {margin-left: 4px; text-decoration: underline}
.cm-bo-btns {display: flex; align-items: center; gap: 6px}
.cm-more-wrap {position: relative}
.cm-dropdown {display: none; position: absolute; right: 0; top: 42px; z-index: 30; min-width: 140px; padding: 6px; background: #fff; border: 1px solid var(--cm-line); border-radius: 10px; box-shadow: 0 12px 30px rgba(15, 23, 42, .14)}
.cm-dropdown li a, .cm-dropdown li button {display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 11px; border: 0; border-radius: 7px; background: transparent; color: var(--cm-ink-2); font-size: 13.5px; text-align: left; cursor: pointer}
.cm-dropdown li a:hover, .cm-dropdown li button:hover {background: var(--cm-panel-2); color: var(--cm-ink)}
.cm-chkall {font-size: 13px; color: var(--cm-muted)}

/* 체크박스 (그누보드 chk_box) */
.chk_box {position: relative}
.chk_box input[type="checkbox"] {position: absolute; top: 0; left: 0; opacity: 0; width: 1px; height: 1px}
.chk_box input[type="checkbox"] + label {display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--cm-ink-2)}
.chk_box input[type="checkbox"] + label span {display: inline-block; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid #c3ccd9; background: #fff; flex-shrink: 0}
.chk_box input[type="checkbox"]:checked + label span {background: var(--cm-accent) url('../img/chk.png') no-repeat 50% 50%; border-color: var(--cm-accent)}
.chk_box input[type="checkbox"]:focus-visible + label span {box-shadow: 0 0 0 3px rgba(16, 185, 129, .25)}

/* ---------- 기본 목록 ---------- */
.cm-rows {background: var(--cm-panel); border: 1px solid var(--cm-line); border-radius: var(--cm-radius); box-shadow: var(--cm-shadow); overflow: hidden}
.cm-rows-hd, .cm-row {display: grid; grid-template-columns: 64px minmax(0, 1fr) 120px 74px 60px; align-items: center; gap: 10px; padding: 0 18px}
.cm-rows.has-good .cm-rows-hd, .cm-rows.has-good .cm-row {grid-template-columns: 64px minmax(0, 1fr) 120px 74px 56px 56px}
.cm-rows.has-chk .cm-rows-hd, .cm-rows.has-chk .cm-row {grid-template-columns: 26px 64px minmax(0, 1fr) 120px 74px 60px}
.cm-rows.has-chk.has-good .cm-rows-hd, .cm-rows.has-chk.has-good .cm-row {grid-template-columns: 26px 64px minmax(0, 1fr) 120px 74px 56px 56px}
.cm-rows-hd {height: 44px; background: var(--cm-panel-2); border-bottom: 1px solid var(--cm-line); color: var(--cm-muted); font-size: 12.5px; font-weight: 600}
.cm-rows-hd > span {text-align: center}
.cm-rows-hd .c-subj {text-align: left}
.cm-rows-hd a {color: inherit}
.cm-rows-hd a:hover {color: var(--cm-ink)}
.cm-row {min-height: 52px; padding-top: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--cm-line-2); font-size: 14px; transition: background .12s}
.cm-row:last-child {border-bottom: 0}
.cm-row:hover {background: #fafbfd}
.cm-row.is-notice {background: #f8fafc}
.cm-row.is-notice .cm-row-a {font-weight: 700}
.cm-row.is-current {background: var(--cm-accent-bg)}
.cm-row > .c-num, .cm-row > .c-date, .cm-row > .c-hit, .cm-row > .c-good {text-align: center; color: var(--cm-faint); font-size: 12.5px}
.cm-row > .c-name {font-size: 13px; color: var(--cm-ink-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis}
.cm-row > .c-name .sv_wrap {display: inline}
.c-subj {min-width: 0}
.cm-row-tit {display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; min-width: 0}
.cm-row-a {min-width: 0; color: var(--cm-ink); font-weight: 500; line-height: 1.45}
.cm-row-a:hover {text-decoration: underline}
.cm-row-a .fa-lock {color: var(--cm-faint); margin-right: 2px}
.cm-re {color: #c3ccd9; margin-right: 3px}
.cm-row-m {display: none}

/* ---------- 웹진 ---------- */
.cm-wz {background: var(--cm-panel); border: 1px solid var(--cm-line); border-radius: var(--cm-radius); box-shadow: var(--cm-shadow); overflow: hidden}
.cm-wz-item {position: relative; display: flex; gap: 18px; padding: 18px; border-bottom: 1px solid var(--cm-line-2); transition: background .12s}
.cm-wz-item:last-child {border-bottom: 0}
.cm-wz-item:hover {background: #fafbfd}
.cm-wz-item.is-notice {background: #f8fafc}
.cm-wz-item > .c-chk {align-self: center}
.cm-wz-img {flex-shrink: 0; width: 180px; aspect-ratio: 3 / 2; border-radius: 10px; overflow: hidden; background: var(--cm-panel-2); display: flex; align-items: center; justify-content: center; color: #c3ccd9; font-size: 26px}
.cm-wz-img img {width: 100%; height: 100%; object-fit: cover; transition: transform .3s}
.cm-wz-item:hover .cm-wz-img img {transform: scale(1.04)}
.cm-wz-body {flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 7px}
.cm-wz-body .cm-row-a {font-size: 16px; font-weight: 700}
.cm-wz-sum {color: var(--cm-muted); font-size: 13.5px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden}
.cm-wz-meta {display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--cm-faint); font-size: 12.5px}
.cm-wz-meta .sv_wrap {display: inline}

/* ---------- 갤러리·이벤트 ---------- */
.cm-gal {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px}
.cm-gal-item {position: relative; display: flex; flex-direction: column; background: var(--cm-panel); border: 1px solid var(--cm-line); border-radius: var(--cm-radius); overflow: hidden; box-shadow: var(--cm-shadow); transition: transform .2s, box-shadow .2s}
.cm-gal-item:hover {transform: translateY(-2px); box-shadow: var(--cm-shadow-h)}
.cm-gal-item > .c-chk {position: absolute; right: 10px; top: 10px; z-index: 3; padding: 4px; background: rgba(255, 255, 255, .9); border-radius: 7px}
.cm-gal-img {position: relative; aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #fff5d6, #ffe2c2); color: #e6a23c; font-size: 32px; overflow: hidden}
.cm-gal-img img {width: 100%; height: 100%; object-fit: cover; transition: transform .3s}
.cm-gal-item:hover .cm-gal-img img {transform: scale(1.04)}
.cm-gal-notice {position: absolute; right: 10px; bottom: 10px}
.cm-gal-body {display: flex; flex-direction: column; gap: 6px; padding: 13px 15px 15px}
.cm-gal-tit {font-size: 15px; font-weight: 700; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden}
.cm-gal-tit:hover {text-decoration: underline}
.cm-gal-meta {display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--cm-faint); font-size: 12.5px}
.cm-gal-period {color: var(--cm-ink-2); font-weight: 600}
.cm-gal-item.ev-end .cm-gal-img img {filter: grayscale(.7); opacity: .7}

/* ---------- 보증업체 목록 ---------- */
.cm-gcards-list {grid-template-columns: repeat(3, minmax(0, 1fr))}
.cm-gcards-list .cm-gcard > .c-chk {position: absolute; right: 10px; top: 10px; z-index: 3; padding: 4px; background: rgba(255, 255, 255, .9); border-radius: 7px}

/* ---------- 먹튀 목록 ---------- */
.cm-scam-table {background: var(--cm-panel); border: 1px solid var(--cm-line); border-radius: var(--cm-radius); box-shadow: var(--cm-shadow); overflow: hidden}
.cm-st-row {display: grid; grid-template-columns: 84px minmax(0, 1fr) 110px 110px 96px 64px 52px; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--cm-line-2); font-size: 13.5px; transition: background .12s}
.cm-scam-table.has-chk .cm-st-row {grid-template-columns: 26px 84px minmax(0, 1fr) 110px 110px 96px 64px 52px}
.cm-st-row:last-child {border-bottom: 0}
.cm-st-row:hover {background: #fffafa}
.cm-st-row.is-notice {background: #f8fafc}
.cm-st-row.is-current {background: #fff1f1}
.cm-st-hd {padding-top: 11px; padding-bottom: 11px; background: var(--cm-panel-2); border-bottom: 1px solid var(--cm-line); color: var(--cm-muted); font-size: 12.5px; font-weight: 600}
.cm-st-hd:hover {background: var(--cm-panel-2)}
.cm-st-hd a {color: inherit}
.cm-st-row .c-st {text-align: center}
.cm-st-row .c-site {min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px}
.cm-st-site {display: flex; align-items: baseline; gap: 8px; min-width: 0; max-width: 100%}
.cm-st-site strong {font-size: 14.5px; font-weight: 800; color: var(--cm-ink); overflow: hidden; white-space: nowrap; text-overflow: ellipsis}
.cm-st-site small {color: var(--cm-faint); font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis}
.cm-st-line {flex-basis: 100%; display: flex; align-items: center; gap: 6px; min-width: 0}
.cm-st-title {min-width: 0; color: var(--cm-muted); font-size: 12.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis}
.cm-st-row a:hover strong, .cm-st-title:hover {text-decoration: underline}
.cm-st-row .c-type {color: var(--cm-ink-2); font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis}
.cm-st-row .c-amt {color: var(--cm-danger); font-weight: 800; text-align: right}
.cm-st-hd .c-amt {color: var(--cm-muted); font-weight: 600}
.cm-st-row .c-name {font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis}
.cm-st-row .c-name .sv_wrap {display: inline}
.cm-st-row .c-date, .cm-st-row .c-hit {color: var(--cm-faint); font-size: 12.5px; text-align: center}
.cm-st-hd .c-site, .cm-st-hd .c-type {text-align: left}
a.cm-st:hover {filter: brightness(.95)}

/* ---------- 목록 하단 ---------- */
.cm-bo-foot {position: relative; display: flex; align-items: center; justify-content: center; min-height: 40px; margin-top: 18px}
.cm-bo-foot-write {position: absolute; right: 0; top: 0}
.cm-sch-pop {display: none; position: fixed; inset: 0; z-index: 1000}
.cm-sch-pop .bo_sch_bg {position: absolute; inset: 0; background: rgba(2, 6, 23, .5)}
.cm-sch-pop .bo_sch {position: absolute; left: 50%; top: 22%; z-index: 2; width: calc(100% - 32px); max-width: 440px; transform: translateX(-50%); padding: 22px; background: #fff; border-radius: 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, .25)}
.cm-sch-pop .bo_sch h3 {margin-bottom: 14px; font-size: 16px; font-weight: 800}
.cm-sch-pop .bo_sch select {width: 100%; height: 42px; margin-bottom: 8px; padding: 0 10px; border: 1px solid var(--cm-line); border-radius: 9px; background: #fff; font-size: 14px}
.cm-sch-pop .sch_bar {display: flex; height: 44px; border: 1px solid var(--cm-line); border-radius: 9px; overflow: hidden}
.cm-sch-pop .sch_input {flex: 1; min-width: 0; padding: 0 12px; border: 0; font-size: 14px}
.cm-sch-pop .sch_btn {width: 50px; border: 0; background: var(--cm-ink); color: #fff; font-size: 15px}
.cm-sch-pop .bo_sch_cls {position: absolute; right: 12px; top: 12px; width: 34px; height: 34px; border: 0; border-radius: 9px; background: var(--cm-panel-2); color: var(--cm-muted)}

/* ---------- 글 보기 ---------- */
.cm-view {background: var(--cm-panel); border: 1px solid var(--cm-line); border-radius: var(--cm-radius); box-shadow: var(--cm-shadow)}
.cm-view-hd {padding: 24px 26px 0}
#bo_v_title {display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 23px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.38}
#bo_v_title .cm-st {height: 26px; font-size: 12.5px}
.cm-view-info {display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 16px; padding: 14px 0; border-top: 1px solid var(--cm-line-2); border-bottom: 1px solid var(--cm-line-2)}
.cm-view-author {display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700}
.cm-view-author .pf_img img {width: 34px; height: 34px; border-radius: 50%; object-fit: cover}
.cm-view-author small {color: var(--cm-faint); font-weight: 400}
.cm-view-meta {display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--cm-faint); font-size: 12.5px}
.cm-view-meta .fa {margin-right: 2px}
.cm-view-btns {margin-left: auto}
.cm-view-btns .btn_bo_user {display: flex; gap: 6px}

.cm-infocard {margin: 18px 26px 0; padding: 4px 18px; border-radius: 12px; background: var(--cm-panel-2); border: 1px solid var(--cm-line)}
.cm-infocard dl {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px}
.cm-infocard-row {display: flex; align-items: center; gap: 12px; min-height: 46px; border-bottom: 1px dashed #dbe2ec}
.cm-infocard-row dt {flex-shrink: 0; width: 76px; color: var(--cm-muted); font-size: 13px}
.cm-infocard-row dd {min-width: 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere}
.cm-infocard dl > .cm-infocard-row:nth-last-child(-n+2) {border-bottom: 0}
.cm-infocard dl > .cm-infocard-row:nth-last-child(2):nth-child(even) {border-bottom: 1px dashed #dbe2ec}
.cm-infocard-cta {padding: 4px 0 16px}
.cm-infocard-cta .cm-btn {width: 100%}
.cm-url {font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; color: var(--cm-ink-2)}
.cm-code {font-size: 13.5px; padding: 4px 10px}
.cm-view-scam .cm-infocard {background: #fffafa; border-color: #f6d5d5}
.cm-view-guarantee .cm-infocard {background: #f6fdf9; border-color: #c9efdc}

.cm-view-body {padding: 24px 26px 10px}
#bo_v_img {margin-bottom: 16px}
#bo_v_img a.view_image {display: block}
#bo_v_img img {display: block; max-width: 100%; height: auto; margin: 0 auto 12px; border-radius: 10px}
#bo_v_con {min-height: 140px; font-size: 15.5px; line-height: 1.85; color: #1f2937; word-break: break-word; overflow-wrap: anywhere}
#bo_v_con img {max-width: 100%; height: auto; border-radius: 8px}
#bo_v_con a {color: #2563eb; text-decoration: underline}
#bo_v_con p {margin: 0 0 .6em}
.cm-sign {margin-top: 24px; padding-top: 14px; border-top: 1px dashed var(--cm-line); color: var(--cm-muted); font-size: 13px}

.cm-vote {display: flex; justify-content: center; gap: 10px; margin: 30px 0 10px}
.cm-vote .bo_v_act_gng {position: relative}
.cm-vote .bo_v_good, .cm-vote .bo_v_nogood {display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 84px; height: 72px; border-radius: 14px; border: 1.5px solid var(--cm-line); background: #fff; color: var(--cm-muted); font-size: 12px; transition: all .15s}
.cm-vote .bo_v_good .fa, .cm-vote .bo_v_nogood .fa {font-size: 20px}
.cm-vote .bo_v_good strong, .cm-vote .bo_v_nogood strong {font-size: 15px; color: var(--cm-ink)}
.cm-vote a.bo_v_good:hover {border-color: var(--cm-accent); color: var(--cm-accent-d)}
.cm-vote a.bo_v_nogood:hover {border-color: var(--cm-danger); color: var(--cm-danger)}
.cm-vote b {display: none; position: absolute; left: 50%; top: -38px; transform: translateX(-50%); padding: 6px 10px; border-radius: 8px; background: var(--cm-ink); color: #fff; font-size: 12px; white-space: nowrap; font-weight: 500}

.cm-share {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 22px 0 12px}
.cm-share #bo_v_sns {display: flex; gap: 6px; margin: 0; padding: 0}
.cm-share #bo_v_sns li {float: none; margin: 0}
.cm-share #bo_v_sns a {display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--cm-line); border-radius: 9px; background: #fff; color: var(--cm-ink-2); font-size: 13px; font-weight: 700}
.cm-share #bo_v_sns a:hover {border-color: #c3ccd9; background: var(--cm-panel-2)}
.cm-share #bo_v_sns img {width: 20px; height: 20px; padding: 3px; border-radius: 5px; background: #64748b}
.cm-share #bo_v_sns .sns_f img {background: #1877f2}
.cm-share #bo_v_sns .sns_t img {background: #0f1419}
.cm-share #bo_v_sns .sns_k img {background: #fee500}
.cm-view-name .profile_img, .cm-view-name .sv_member img {display: none}

.cm-attach {margin: 0 26px 14px; padding: 14px 16px; border-radius: 10px; background: var(--cm-panel-2); border: 1px solid var(--cm-line)}
.cm-attach h2 {margin-bottom: 8px; font-size: 13px; font-weight: 800}
.cm-attach li {display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 5px 0; font-size: 13.5px}
.cm-attach li > .fa {color: var(--cm-faint)}
.cm-attach a:hover {text-decoration: underline}
.cm-attach .bo_v_file_cnt, .cm-attach .bo_v_link_cnt {color: var(--cm-faint); font-size: 12px}

.cm-prevnext {margin: 10px 26px 0; border-top: 1px solid var(--cm-line); border-bottom: 1px solid var(--cm-line)}
.cm-prevnext li {display: flex; align-items: center; gap: 14px; padding: 12px 4px; font-size: 14px}
.cm-prevnext li + li {border-top: 1px solid var(--cm-line-2)}
.cm-prevnext .nb_tit {flex-shrink: 0; width: 64px; color: var(--cm-muted); font-size: 12.5px}
.cm-prevnext a {flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis}
.cm-prevnext a:hover {text-decoration: underline}
.cm-prevnext .nb_date {flex-shrink: 0; color: var(--cm-faint); font-size: 12px}

/* ---------- 댓글 ---------- */
.cm-cmt-hd {display: flex; align-items: center; gap: 8px; width: calc(100% - 52px); margin: 26px 26px 0; padding: 0 0 12px; border: 0; border-bottom: 2px solid var(--cm-ink); background: transparent; text-align: left; font-size: 15px; cursor: pointer}
.cm-cmt-hd b {font-weight: 800}
.cm-cmt-hd em {font-style: normal; color: var(--cm-danger); font-weight: 800}
.cm-cmt-hd .cmt_more {margin-left: auto; width: 10px; height: 10px; border-right: 2px solid var(--cm-faint); border-bottom: 2px solid var(--cm-faint); transform: rotate(45deg); margin-top: -4px}
.cm-cmt-hd.cmt_btn_op .cmt_more {transform: rotate(225deg); margin-top: 4px}
.cm-cmts {margin: 0 26px}
.cm-cmts > h2 {position: absolute; font-size: 0; line-height: 0; overflow: hidden}
.cm-cmts article {position: relative; display: flex; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--cm-line-2)}
.cm-cmts article.is-reply {padding-left: 14px; border-left: 2px solid var(--cm-line)}
.cm-cmts .pf_img img {width: 36px; height: 36px; border-radius: 50%; object-fit: cover}
.cm-cmts .cm_wrap {flex: 1; min-width: 0}
.cm-cmts header {display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 13.5px; font-weight: 700}
.cm-cmts header h2 {position: absolute; font-size: 0; line-height: 0; overflow: hidden}
.cm-cmts .bo_vc_hdinfo {color: var(--cm-faint); font-size: 12px; font-weight: 400}
.cm-cmts .cmt_contents {margin-top: 6px; font-size: 14px; line-height: 1.7; color: #1f2937; overflow-wrap: anywhere}
.cm-cmts .cmt_contents .fa-lock {color: var(--cm-faint)}
.cm-cmts .bo_vl_opt {position: absolute; right: 0; top: 12px}
.cm-cmts .bo_vl_opt .cm-ibtn {width: 30px; height: 30px; font-size: 13px; border-color: transparent}
.cm-cmts .bo_vc_act {display: none; position: absolute; right: 0; top: 34px; z-index: 20; min-width: 90px; padding: 5px; background: #fff; border: 1px solid var(--cm-line); border-radius: 9px; box-shadow: 0 10px 24px rgba(15, 23, 42, .12)}
.cm-cmts .bo_vc_act a {display: block; padding: 7px 10px; border-radius: 6px; font-size: 13px}
.cm-cmts .bo_vc_act a:hover {background: var(--cm-panel-2)}
#bo_vc_empty {padding: 34px 0; color: var(--cm-faint); text-align: center}
.cm-cmt-w {margin: 16px 26px 26px}
.cm-cmt-w > h2 {position: absolute; font-size: 0; line-height: 0; overflow: hidden}
.cm-cmt-w textarea, .bo_vc_w textarea {display: block; width: 100%; height: 100px; padding: 12px 14px; border: 1px solid var(--cm-line); border-radius: 10px; background: var(--cm-panel-2); font-size: 14px; resize: vertical}
.cm-cmt-w textarea:focus, .bo_vc_w textarea:focus {background: #fff}
.bo_vc_w_wr {display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 10px}
.bo_vc_w_info {display: flex; flex-wrap: wrap; gap: 6px}
.bo_vc_w_info .frm_input {height: 38px}
.bo_vc_w .btn_confirm {display: flex; align-items: center; gap: 12px; margin-left: auto}
.bo_vc_w .secret_cm {font-size: 13px}
.cm-cmts .bo_vc_w {margin: 10px 0 0}
#char_cnt {display: block; margin-bottom: 6px; color: var(--cm-muted); font-size: 12px}

/* ---------- 글쓰기 ---------- */
.cm-write {padding: 24px 26px 26px; background: var(--cm-panel); border: 1px solid var(--cm-line); border-radius: var(--cm-radius); box-shadow: var(--cm-shadow)}
.cm-write-notice {margin-bottom: 20px; padding: 13px 16px; border-radius: 10px; background: var(--cm-warn-bg); border: 1px solid #fbe0a6; color: #7c4a03; font-size: 13.5px; line-height: 1.65}
.cm-form {display: flex; flex-direction: column; gap: 16px}
.cm-field-grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px}
.cm-field-grid .is-wide {grid-column: 1 / -1}
.cm-extra {padding: 16px; border-radius: 12px; background: var(--cm-panel-2); border: 1px solid var(--cm-line)}
.cm-label {display: flex; align-items: center; gap: 6px; margin-bottom: 7px; font-size: 13.5px; font-weight: 700; color: var(--cm-ink)}
.cm-label .req {padding: 1px 6px; border-radius: 4px; background: var(--cm-danger-bg); color: var(--cm-danger); font-size: 10.5px; font-style: normal; font-weight: 800}
.cm-label-help {color: var(--cm-faint); font-size: 12px; font-weight: 400}
.cm-help {margin-top: 5px; color: var(--cm-faint); font-size: 12px}
.cm-write .frm_input {width: 100%; height: 44px; padding: 0 13px; font-size: 14.5px; background: #fff}
.cm-write textarea.frm_input {height: auto; min-height: 70px; padding: 10px 13px; line-height: 1.6}
.cm-select {appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2364748b' stroke-width='1.6' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center !important; padding-right: 36px !important}
.cm-opts {display: flex; flex-wrap: wrap; gap: 16px}
.cm-opts li {font-size: 13.5px}
#autosave_wrapper {position: relative; display: flex; gap: 8px}
#autosave_wrapper .frm_input {flex: 1}
#autosave_wrapper .btn_frmline {flex-shrink: 0; width: auto; height: 44px; padding: 0 14px; font-size: 13px}
#autosave_pop {display: none; position: absolute; right: 0; top: 50px; z-index: 30; width: 320px; max-width: 100%; padding: 14px; background: #fff; border: 1px solid var(--cm-line); border-radius: 10px; box-shadow: 0 12px 30px rgba(15, 23, 42, .14)}
#autosave_pop strong {display: block; margin-bottom: 8px}
#autosave_pop li {display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--cm-line-2)}
#autosave_pop .autosave_close {margin-top: 8px; padding: 6px 12px; border: 1px solid var(--cm-line); border-radius: 7px; background: #fff}
.wr_content textarea {width: 100%; min-height: 320px; padding: 14px; font-size: 14.5px; line-height: 1.7; border-radius: 10px}
.cm-file {display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; padding: 10px 12px; border: 1px dashed #cbd5e1; border-radius: 10px; background: var(--cm-panel-2)}
.cm-file .frm_file {font-size: 13px}
.cm-file .file_del {font-size: 12.5px; color: var(--cm-muted)}
.cm-write-btns {display: flex; justify-content: center; gap: 8px; margin-top: 26px}
.cm-write-btns .cm-btn {min-width: 130px; height: 48px; font-size: 15px}
#char_count_desc {margin-bottom: 8px; color: var(--cm-muted); font-size: 12.5px}
#char_count_wrap {margin-top: 6px; color: var(--cm-muted); font-size: 12.5px; text-align: right}

/* ---------- 반응형 ---------- */
@media (max-width: 1024px) {
    .cm-gcards-list {grid-template-columns: repeat(3, minmax(0, 1fr))}
}
@media (max-width: 860px) {
    .cm-rows-hd, .cm-st-hd {display: none}
    .cm-rows .cm-row, .cm-rows.has-good .cm-row {grid-template-columns: minmax(0, 1fr); padding: 12px 14px}
    .cm-rows.has-chk .cm-row, .cm-rows.has-chk.has-good .cm-row {grid-template-columns: 24px minmax(0, 1fr)}
    .cm-row > .c-num {display: none}
    .cm-row.is-notice > .c-num {display: none}
    .cm-row > .c-name, .cm-row > .c-date, .cm-row > .c-hit, .cm-row > .c-good {display: none}
    .cm-row-m {display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 4px; color: var(--cm-faint); font-size: 12px}
    .cm-row.is-notice .cm-row-tit:before {content: "공지"; display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 5px; background: var(--cm-ink); color: #fff; font-size: 11px; font-weight: 800}
    .cm-row-a {font-size: 15px}

    .cm-wz-item {gap: 12px; padding: 14px}
    .cm-wz-img {width: 112px; border-radius: 8px}
    .cm-wz-body {gap: 4px; justify-content: flex-start}
    .cm-wz-body .cm-row-a {font-size: 15px}
    .cm-wz-sum {display: none}

    .cm-gal {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px}
    .cm-gal-body {padding: 10px 12px 12px}
    .cm-gal-tit {font-size: 14px}
    .cm-gcards-list {grid-template-columns: repeat(2, minmax(0, 1fr))}

    .cm-st-row, .cm-scam-table.has-chk .cm-st-row {grid-template-columns: 70px minmax(0, 1fr) auto; gap: 4px 10px; padding: 12px 14px}
    .cm-scam-table.has-chk .cm-st-row {grid-template-columns: 24px 70px minmax(0, 1fr) auto}
    .cm-st-row .c-type, .cm-st-row .c-name, .cm-st-row .c-hit {display: none}
    .cm-st-row .c-date {display: none}
    .cm-st-row .c-amt {font-size: 13px}
    .cm-st-site small {display: none}
    .cm-st-site strong {font-size: 14px}

    .cm-bo-foot {flex-direction: column; gap: 12px}
    .cm-bo-foot-write {position: static; width: 100%}

    .cm-view-hd {padding: 18px 16px 0}
    #bo_v_title {font-size: 19px}
    .cm-view-btns {margin-left: 0; width: 100%}
    .cm-view-btns .btn_bo_user {justify-content: flex-end}
    .cm-infocard {margin: 14px 16px 0; padding: 2px 14px}
    .cm-infocard dl {grid-template-columns: minmax(0, 1fr)}
    .cm-infocard dl > .cm-infocard-row:nth-last-child(2) {border-bottom: 1px dashed #dbe2ec}
    .cm-infocard-row dt {width: 70px}
    .cm-view-body {padding: 18px 16px 6px}
    #bo_v_con {font-size: 15px}
    .cm-attach {margin: 0 16px 12px}
    .cm-prevnext {margin: 8px 16px 0}
    .cm-prevnext .nb_date {display: none}
    .cm-cmt-hd {width: calc(100% - 32px); margin: 22px 16px 0}
    .cm-cmts {margin: 0 16px}
    .cm-cmt-w {margin: 14px 16px 20px}

    .cm-write {padding: 18px 16px 20px}
    .cm-field-grid {grid-template-columns: minmax(0, 1fr)}
    .cm-write-btns .cm-btn {flex: 1; min-width: 0}
}
@media (max-width: 420px) {
    .cm-gal {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)}
    .cm-gcards-list {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)}
    .cm-wz-img {width: 92px}
}