@charset "utf-8";
/* ==========================================================================
   COMU 커뮤니티 테마 - 레이아웃·공통 컴포넌트
   ========================================================================== */
:root {
    --cm-bg: #eef1f6;
    --cm-panel: #ffffff;
    --cm-panel-2: #f7f9fc;
    --cm-ink: #0f172a;
    --cm-ink-2: #334155;
    --cm-muted: #64748b;
    --cm-faint: #94a3b8;
    --cm-line: #e3e8f0;
    --cm-line-2: #eef2f7;
    --cm-navy: #0b1324;
    --cm-navy-2: #111b31;
    --cm-navy-3: #1c2a45;
    --cm-navy-ink: #c7d2e5;
    --cm-accent: #10b981;
    --cm-accent-d: #059669;
    --cm-accent-bg: #e7f8f1;
    --cm-danger: #ef4444;
    --cm-danger-d: #dc2626;
    --cm-danger-bg: #fdecec;
    --cm-warn: #f59e0b;
    --cm-warn-bg: #fff5e1;
    --cm-info: #3b82f6;
    --cm-info-bg: #e9f1ff;
    --cm-gold: #d99a06;
    --cm-gold-bg: #fff6dc;
    --cm-radius: 12px;
    --cm-radius-s: 8px;
    --cm-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 18px rgba(15, 23, 42, .05);
    --cm-shadow-h: 0 2px 4px rgba(15, 23, 42, .06), 0 14px 32px rgba(15, 23, 42, .10);
    --cm-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;
    --cm-w: 1240px;
}

html {overflow-y: scroll; -webkit-text-size-adjust: 100%}
body {font-family: var(--cm-font); font-size: 13px; line-height: 1.55; color: var(--cm-ink); background: var(--cm-bg); letter-spacing: -0.01em; word-break: keep-all; overflow-wrap: anywhere}
h1, h2, h3, h4, h5, h6, input, button, textarea, select {font-family: var(--cm-font)}
a {color: inherit}
a:hover {color: inherit}
img {max-width: 100%}
::selection {background: #c7f0de}

.cm-inner {max-width: var(--cm-w); margin: 0 auto; padding: 0 20px}

/* ---------- 상단 바 ---------- */
#cm_hd {position: relative; z-index: 50; background: var(--cm-navy)}
.cm-top {background: #070d1a; color: #8392ad; font-size: 12px; border-bottom: 1px solid rgba(255, 255, 255, .05)}
.cm-top .cm-inner {display: flex; align-items: center; justify-content: space-between; height: 34px}
.cm-top-l {display: flex; align-items: center; gap: 16px}
.cm-online {display: inline-flex; align-items: center; gap: 6px; color: #8392ad}
.cm-online b {color: #e6edf9; font-weight: 600}
.cm-dot {width: 7px; height: 7px; border-radius: 50%; background: var(--cm-accent); box-shadow: 0 0 0 3px rgba(16, 185, 129, .2); animation: cm-pulse 2s infinite}
@keyframes cm-pulse {50% {box-shadow: 0 0 0 5px rgba(16, 185, 129, .05)}}
.cm-top-r {display: flex; align-items: center}
.cm-top-r li {position: relative; padding: 0 10px}
.cm-top-r li + li:before {content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 10px; margin-top: -5px; background: rgba(255, 255, 255, .12)}
.cm-top-r a {color: #8392ad; transition: color .15s}
.cm-top-r a:hover {color: #fff}
.cm-top-r .cm-top-me b {color: #e6edf9}
.cm-top-r .cm-top-join {color: var(--cm-accent)}
.cm-top-r .cm-top-adm {color: #fbbf24}

/* ---------- 헤더 ---------- */
.cm-head .cm-inner {display: flex; align-items: center; gap: 24px; height: 78px}
.cm-logo {display: inline-flex; align-items: center; gap: 10px; color: #fff; flex-shrink: 0; text-decoration: none}
.cm-logo:hover {color: #fff}
.cm-logo img {display: block; max-height: 46px; width: auto}
.cm-logo-badge {display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(140deg, #34d399, #059669); color: #fff; font-size: 20px; box-shadow: 0 6px 16px rgba(16, 185, 129, .35), inset 0 1px 0 rgba(255, 255, 255, .3)}
.cm-logo-name {font-size: 22px; font-weight: 800; letter-spacing: -0.03em; white-space: nowrap}
.cm-search {flex: 1; max-width: 480px; margin-left: auto; display: flex; height: 44px; background: var(--cm-navy-3); border: 1px solid rgba(255, 255, 255, .08); border-radius: 22px; overflow: hidden; transition: border-color .15s, background .15s}
.cm-search:focus-within {border-color: var(--cm-accent); background: #22324f}
.cm-search input {flex: 1; min-width: 0; height: 100%; padding: 0 18px; border: 0; background: transparent; color: #fff; font-size: 14px}
.cm-search input::placeholder {color: #7f8ca6}
.cm-search input:focus {box-shadow: none !important; border: 0 !important}
.cm-search button {width: 52px; border: 0; background: transparent; color: #b8c4da; font-size: 16px; cursor: pointer}
.cm-search button:hover {color: var(--cm-accent)}
.cm-quick {display: flex; gap: 8px}
.cm-qbtn {display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; border-radius: 20px; font-size: 13.5px; font-weight: 700; white-space: nowrap; transition: transform .15s, box-shadow .15s, background .15s}
.cm-qbtn:hover {transform: translateY(-1px)}
.cm-qbtn-danger {background: rgba(239, 68, 68, .14); color: #ff8a8a; border: 1px solid rgba(239, 68, 68, .35)}
.cm-qbtn-danger:hover {background: var(--cm-danger); color: #fff}
.cm-qbtn-safe {background: var(--cm-accent); color: #fff; box-shadow: 0 6px 16px rgba(16, 185, 129, .3)}
.cm-qbtn-safe:hover {background: var(--cm-accent-d); color: #fff}
.cm-burger, .cm-sch-toggle {display: none}

/* ---------- 주 메뉴 ---------- */
.cm-gnb {background: var(--cm-navy-2); border-top: 1px solid rgba(255, 255, 255, .05); position: relative}
.cm-gnb.is-stuck {position: sticky; top: 0}
.cm-gnb-ul {display: flex; align-items: stretch}
.cm-gnb-li {position: relative}
.cm-gnb-a {position: relative; display: flex; align-items: center; gap: 5px; height: 52px; padding: 0 20px; color: var(--cm-navy-ink); font-size: 15px; font-weight: 600; white-space: nowrap; transition: color .15s, background .15s}
.cm-gnb-a .fa {font-size: 12px; opacity: .55}
.cm-gnb-a:after {content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--cm-accent); transform: scaleX(0); transition: transform .2s}
.cm-gnb-li:hover > .cm-gnb-a, .cm-gnb-li:focus-within > .cm-gnb-a {color: #fff; background: rgba(255, 255, 255, .04)}
.cm-gnb-li.on > .cm-gnb-a {color: #fff}
.cm-gnb-li.on > .cm-gnb-a:after, .cm-gnb-li:hover > .cm-gnb-a:after {transform: scaleX(1)}
.cm-gnb-sub {position: absolute; left: 50%; top: 100%; min-width: 170px; padding-top: 8px; transform: translate(-50%, 6px); opacity: 0; visibility: hidden; transition: opacity .15s, transform .15s, visibility .15s; z-index: 60}
.cm-gnb-sub ul {padding: 8px; background: #fff; border-radius: 12px; box-shadow: 0 16px 40px rgba(2, 8, 23, .25); border: 1px solid var(--cm-line)}
.cm-gnb-sub a {display: block; padding: 9px 14px; border-radius: 8px; color: var(--cm-ink-2); font-size: 14px; font-weight: 500; white-space: nowrap}
.cm-gnb-sub a:hover {background: var(--cm-accent-bg); color: var(--cm-accent-d)}
.cm-gnb-li:hover .cm-gnb-sub, .cm-gnb-li:focus-within .cm-gnb-sub {opacity: 1; visibility: visible; transform: translate(-50%, 0)}
.cm-gnb-empty {padding: 16px 0; color: var(--cm-navy-ink)}
.cm-gnb-empty a {color: var(--cm-accent)}

/* ---------- 모바일 서랍 메뉴 ---------- */
.cm-drawer {position: fixed; inset: 0; z-index: 1000; visibility: hidden}
.cm-drawer.is-open {visibility: visible}
.cm-drawer-bg {position: absolute; inset: 0; background: rgba(2, 6, 23, .55); opacity: 0; transition: opacity .2s}
.cm-drawer.is-open .cm-drawer-bg {opacity: 1}
.cm-drawer-panel {position: absolute; left: 0; top: 0; bottom: 0; width: 86%; max-width: 340px; background: #fff; z-index: 2; transform: translateX(-100%); transition: transform .25s ease; display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch}
.cm-drawer.is-open .cm-drawer-panel {transform: translateX(0)}
.cm-drawer-hd {display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: var(--cm-navy)}
.cm-logo-sm .cm-logo-badge {width: 32px; height: 32px; font-size: 16px; border-radius: 9px}
.cm-logo-sm .cm-logo-name {font-size: 18px}
.cm-drawer-close {width: 36px; height: 36px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .08); color: #fff; font-size: 18px}
.cm-drawer-me {padding: 16px; background: var(--cm-navy-2); color: var(--cm-navy-ink)}
.cm-drawer-me p {margin-bottom: 10px; font-size: 14px}
.cm-drawer-me b {color: #fff}
.cm-drawer-me .cm-pt {margin-left: 6px; padding: 2px 8px; border-radius: 10px; background: rgba(16, 185, 129, .18); color: #6ee7b7; font-size: 12px; font-weight: 700}
.cm-drawer-btns {display: flex; flex-wrap: wrap; gap: 6px}
.cm-drawer-btns a {flex: 1 1 auto; text-align: center; padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, .08); color: #e2e8f0; font-size: 13px; font-weight: 600}
.cm-drawer-btns a.is-primary {background: var(--cm-accent); color: #fff}
.cm-drawer-menu {flex: 1; padding: 6px 0}
.cm-drawer-menu > li {border-bottom: 1px solid var(--cm-line-2)}
.cm-dm-row {display: flex; align-items: center}
.cm-dm-row a {flex: 1; padding: 14px 18px; font-size: 15px; font-weight: 700; color: var(--cm-ink)}
.cm-dm-toggle {width: 52px; height: 48px; border: 0; background: transparent; color: var(--cm-muted); font-size: 18px}
.cm-dm-toggle .fa {transition: transform .2s}
.cm-drawer-menu li.is-open .cm-dm-toggle .fa {transform: rotate(180deg)}
.cm-dm-sub {display: none; padding: 0 0 10px; background: var(--cm-panel-2)}
.cm-drawer-menu li.is-open .cm-dm-sub {display: block}
.cm-dm-sub a {display: block; padding: 10px 18px 10px 30px; color: var(--cm-ink-2); font-size: 14px}
.cm-drawer-ft {display: flex; gap: 6px; padding: 14px 16px; border-top: 1px solid var(--cm-line)}
.cm-drawer-ft a {flex: 1; text-align: center; padding: 9px 0; border-radius: 8px; background: var(--cm-panel-2); font-size: 13px; color: var(--cm-ink-2)}
body.cm-lock {overflow: hidden}

/* ---------- 메인 상단 (공지 띠 + 보증업체) ---------- */
.cm-index-top {padding-top: 18px}
.cm-ticker {display: flex; align-items: center; height: 46px; padding: 0 6px 0 0; background: var(--cm-panel); border: 1px solid var(--cm-line); border-radius: var(--cm-radius); box-shadow: var(--cm-shadow); overflow: hidden}
.cm-ticker-label {display: inline-flex; align-items: center; gap: 7px; height: 100%; padding: 0 16px; margin-right: 14px; background: var(--cm-ink); color: #fff; font-weight: 700; font-size: 13px; flex-shrink: 0}
.cm-ticker-label:hover {color: #fff}
.cm-ticker-label .fa {color: #fbbf24}
.cm-ticker-view {flex: 1; min-width: 0; height: 46px; overflow: hidden; position: relative}
.cm-ticker-list {transition: transform .45s ease}
.cm-ticker-list li {display: flex; align-items: center; gap: 12px; height: 46px; font-size: 14px}
.cm-ticker-list a {flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--cm-ink-2)}
.cm-ticker-list a:hover {color: var(--cm-accent-d); text-decoration: underline}
.cm-ticker-date {color: var(--cm-faint); font-size: 12px; padding-right: 10px}
.cm-ticker-empty {color: var(--cm-faint)}

.cm-sec {margin-top: 22px}
.cm-sec-hd {display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 14px}
.cm-sec-tit {display: flex; align-items: center; gap: 9px; font-size: 20px; font-weight: 800; letter-spacing: -0.03em}
.cm-sec-ico {display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; font-size: 13px; color: #fff}
.cm-sec-ico.is-safe {background: var(--cm-accent)}
.cm-sec-sub {color: var(--cm-muted); font-size: 13px}
.cm-sec-hd .cm-more {margin-left: auto}
.cm-more {display: inline-flex; align-items: center; gap: 4px; color: var(--cm-muted); font-size: 12.5px; font-weight: 500; white-space: nowrap}
.cm-more:hover {color: var(--cm-accent-d)}

/* 보증업체 카드 */
.cm-gcards {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px}
.cm-gcard {position: relative; display: flex; flex-direction: column; background: var(--cm-panel); border: 1px solid var(--cm-line); border-radius: 14px; overflow: hidden; box-shadow: var(--cm-shadow); transition: transform .2s, box-shadow .2s, border-color .2s}
.cm-gcard:hover {transform: translateY(-3px); box-shadow: var(--cm-shadow-h); border-color: #b9ecd7}
.cm-gcard-img {position: relative; display: block; aspect-ratio: 2 / 1; background: linear-gradient(135deg, #0f1d36, #1c3355 55%, #0e5e4a); overflow: hidden}
.cm-gcard-img img {display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s}
.cm-gcard:hover .cm-gcard-img img {transform: scale(1.04)}
.cm-gcard-ph {position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .9); font-size: 46px; font-weight: 800; letter-spacing: -0.04em; text-shadow: 0 6px 24px rgba(0, 0, 0, .35)}
.cm-gcard-badge {position: absolute; left: 10px; top: 10px; padding: 3px 9px; border-radius: 20px; background: rgba(11, 19, 36, .78); color: #fde68a; font-size: 11.5px; font-weight: 700; backdrop-filter: blur(4px)}
.cm-gcard-body {flex: 1; padding: 14px 16px 6px}
.cm-gcard-name {font-size: 16.5px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.3}
.cm-gcard-name a {display: flex; align-items: center; gap: 6px}
.cm-gcard-name .fa {color: var(--cm-accent); font-size: 15px}
.cm-gcard-desc {margin-top: 5px; color: var(--cm-muted); font-size: 13px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden}
.cm-gcard-meta {display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px}
.cm-gcard-meta div {display: flex; align-items: center; gap: 6px; font-size: 12.5px}
.cm-gcard-meta dt {color: var(--cm-faint)}
.cm-gcard-meta dd {font-weight: 700; color: var(--cm-ink-2)}
.is-gold {color: var(--cm-gold) !important}
.is-danger {color: var(--cm-danger) !important}
.cm-copy {display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border: 1px dashed #b6c2d4; border-radius: 6px; background: var(--cm-panel-2); color: var(--cm-ink-2); font-size: 12.5px; font-weight: 700; cursor: pointer}
.cm-copy .fa {color: var(--cm-faint); font-size: 11px}
.cm-copy:hover {border-color: var(--cm-accent); color: var(--cm-accent-d)}
.cm-copy.is-copied {border-style: solid; border-color: var(--cm-accent); background: var(--cm-accent-bg); color: var(--cm-accent-d)}
.cm-gcard-act {display: flex; gap: 6px; padding: 12px 16px 16px}
.cm-gcard-act .cm-btn {flex: 1}

/* ---------- 버튼 ---------- */
.cm-btn {display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 16px; border-radius: 9px; border: 1px solid transparent; font-size: 13.5px; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s, border-color .15s, box-shadow .15s}
.cm-btn-sm {height: 34px; padding: 0 13px; font-size: 13px}
.cm-btn-lg {height: 48px; padding: 0 24px; font-size: 15px; border-radius: 11px}
.cm-btn-block {display: flex; width: 100%}
.cm-btn-primary {background: var(--cm-ink); color: #fff}
.cm-btn-primary:hover {background: #1e293b; color: #fff}
.cm-btn-safe {background: var(--cm-accent); color: #fff}
.cm-btn-safe:hover {background: var(--cm-accent-d); color: #fff}
.cm-btn-danger {background: var(--cm-danger); color: #fff}
.cm-btn-line {background: #fff; border-color: var(--cm-line); color: var(--cm-ink-2)}
.cm-btn-line:hover {border-color: #c3ccd9; background: var(--cm-panel-2); color: var(--cm-ink)}
.cm-ibtn {display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--cm-line); border-radius: 9px; background: #fff; color: var(--cm-muted); font-size: 15px; cursor: pointer; transition: all .15s}
.cm-ibtn:hover {border-color: #c3ccd9; color: var(--cm-ink)}

/* ---------- 본문 레이아웃 ---------- */
#wrapper.cm-main {padding: 22px 0 56px}
.cm-layout {display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start}
.cm-content {min-width: 0}
.cm-aside {position: sticky; top: 16px; display: flex; flex-direction: column; gap: 14px}

/* 하위 페이지 머리 */
.cm-phead {margin-bottom: 16px; padding: 20px 22px 0; background: var(--cm-panel); border: 1px solid var(--cm-line); border-radius: var(--cm-radius); box-shadow: var(--cm-shadow)}
.cm-phead-row {display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; padding-bottom: 18px}
.cm-phead-tit {font-size: 22px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.3}
.cm-crumb {display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-left: auto; color: var(--cm-faint); font-size: 12.5px}
.cm-crumb a:hover {color: var(--cm-accent-d)}
.cm-crumb .sep {color: #c5cedb}
.cm-subtabs {display: flex; gap: 4px; margin: 0 -6px; overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--cm-line-2)}
.cm-subtabs::-webkit-scrollbar {display: none}
.cm-subtabs li {flex-shrink: 0}
.cm-subtabs a {position: relative; display: block; padding: 13px 14px; color: var(--cm-muted); font-size: 14px; font-weight: 600}
.cm-subtabs a:hover {color: var(--cm-ink)}
.cm-subtabs li.on a {color: var(--cm-ink)}
.cm-subtabs li.on a:after {content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--cm-accent)}
.cm-phead:not(:has(.cm-subtabs)) {padding-bottom: 0}

/* ---------- 메인 블록 ---------- */
.cm-idx {display: flex; flex-direction: column; gap: 18px}
.cm-idx-grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px}
.cm-box {background: var(--cm-panel); border: 1px solid var(--cm-line); border-radius: var(--cm-radius); box-shadow: var(--cm-shadow); overflow: hidden}
.cm-box-hd {display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--cm-line-2)}
.cm-box-tit {display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; letter-spacing: -0.02em}
.cm-box-tit .fa {display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: var(--cm-panel-2); color: var(--cm-ink-2); font-size: 13px}
.cm-box-tit a:hover {color: var(--cm-accent-d)}
.cm-box-scam .cm-box-tit .fa {background: var(--cm-danger-bg); color: var(--cm-danger)}
.cm-box-event .cm-box-tit .fa {background: var(--cm-gold-bg); color: var(--cm-gold)}

.cm-lt {padding: 6px 0}
.cm-lt > li {display: flex; align-items: center; gap: 10px; padding: 0 18px}
.cm-lt-a {flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 9px 0; font-size: 14px; color: var(--cm-ink-2)}
.cm-lt-a:hover .cm-lt-sub {color: var(--cm-ink); text-decoration: underline}
.cm-lt-sub {min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis}
.cm-lt-date {flex-shrink: 0; color: var(--cm-faint); font-size: 12px}
.cm-lt > li.cm-empty {padding: 26px 18px}

.cm-lt-thumb > li {padding: 0 14px}
.cm-lt-tw {display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; padding: 8px 4px; border-radius: 10px}
.cm-lt-tw:hover {background: var(--cm-panel-2)}
.cm-lt-tw:hover .cm-lt-sub {text-decoration: underline}
.cm-lt-img {flex-shrink: 0; width: 72px; height: 50px; border-radius: 8px; overflow: hidden; background: var(--cm-panel-2); display: flex; align-items: center; justify-content: center; color: #b9c4d4; font-size: 18px}
.cm-lt-img img {width: 100%; height: 100%; object-fit: cover}
.cm-lt-txt {flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px}
.cm-lt-txt .cm-lt-sub {display: block; font-size: 14px; font-weight: 600; color: var(--cm-ink-2)}
.cm-lt-meta {color: var(--cm-faint); font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis}

.cm-chip {display: inline-flex; align-items: center; flex-shrink: 0; height: 20px; padding: 0 7px; margin-right: 2px; border-radius: 5px; background: var(--cm-info-bg); color: #2563eb; font-size: 11.5px; font-weight: 700; font-style: normal; white-space: nowrap; vertical-align: middle}
a.cm-chip:hover {background: #dbe8ff; color: #1d4ed8}
.cm-chip-lg {height: 24px; padding: 0 10px; font-size: 12.5px; margin-bottom: 10px}
.cm-cmt {flex-shrink: 0; color: var(--cm-danger); font-size: 12px; font-weight: 700}
.cm-new {display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 15px; height: 15px; border-radius: 4px; background: var(--cm-danger); color: #fff; font-size: 9.5px; font-weight: 800; line-height: 1}
.cm-hot {color: #f97316}
.cm-ico {color: var(--cm-faint); font-size: 12px}
.cm-empty {padding: 30px 10px; color: var(--cm-faint); text-align: center; font-size: 13.5px}
.cm-empty a {color: var(--cm-accent-d); text-decoration: underline}
.cm-empty-lg {padding: 70px 10px; grid-column: 1 / -1}
.cm-empty-s {padding: 10px 0; color: var(--cm-faint); font-size: 13px}

/* 먹튀 최신 */
.cm-scam-rows {padding: 4px 0}
.cm-scam-row {display: grid; grid-template-columns: 80px minmax(0, 1.6fr) minmax(0, 1fr) 110px 56px; align-items: center; gap: 12px; padding: 10px 18px; border-top: 1px solid var(--cm-line-2); font-size: 13.5px; transition: background .15s}
a.cm-scam-row:hover {background: #fff8f8}
.cm-scam-th {border-top: 0; padding-top: 8px; padding-bottom: 8px; background: var(--cm-panel-2); color: var(--cm-faint); font-size: 12px; font-weight: 600}
.cm-scam-row .c-site {min-width: 0; display: flex; flex-direction: column}
.cm-scam-row .c-site strong {overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700}
.cm-scam-row .c-site small {color: var(--cm-faint); font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis}
.cm-scam-row .c-type {color: var(--cm-muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis}
.cm-scam-row .c-amt {color: var(--cm-danger); font-weight: 700; text-align: right}
.cm-scam-row .c-date {color: var(--cm-faint); font-size: 12px; text-align: right}
.cm-scam-th .c-amt, .cm-scam-th .c-date {text-align: right}

/* 상태 배지 */
.cm-st {display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 6px; font-size: 12px; font-weight: 800; font-style: normal; white-space: nowrap; vertical-align: middle}
.cm-st.st-scam {background: var(--cm-danger); color: #fff}
.cm-st.st-warn {background: var(--cm-warn-bg); color: #b45309; box-shadow: inset 0 0 0 1px #fcd38d}
.cm-st.st-check {background: var(--cm-info-bg); color: #1d4ed8; box-shadow: inset 0 0 0 1px #bfd4fb}
.cm-st.st-done {background: #eef2f6; color: var(--cm-muted)}
.cm-st.st-none {background: #eef2f6; color: var(--cm-ink-2)}
.cm-st.st-safe {background: var(--cm-accent-bg); color: var(--cm-accent-d); box-shadow: inset 0 0 0 1px #a7e9cd}
.cm-st.st-gold {background: var(--cm-gold-bg); color: #a16207; box-shadow: inset 0 0 0 1px #f8d98a}
.cm-badge {display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 800; font-style: normal; white-space: nowrap}
.cm-badge-notice {background: var(--cm-ink); color: #fff}
.cm-badge-cur {background: var(--cm-accent-bg); color: var(--cm-accent-d)}

/* 이벤트 카드 */
.cm-ecards {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 16px 18px 18px}
.cm-ecard {display: flex; flex-direction: column; border: 1px solid var(--cm-line); border-radius: 11px; overflow: hidden; transition: transform .2s, box-shadow .2s}
.cm-ecard:hover {transform: translateY(-2px); box-shadow: var(--cm-shadow-h)}
.cm-ecard-img {position: relative; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #fff5d6, #ffe2c2); color: #e6a23c; font-size: 30px; overflow: hidden}
.cm-ecard-img img {width: 100%; height: 100%; object-fit: cover}
.cm-ecard-body {display: flex; flex-direction: column; gap: 4px; padding: 11px 13px}
.cm-ecard-body strong {font-size: 14px; font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis}
.cm-ecard-body small {color: var(--cm-faint); font-size: 12px}
.cm-ecard.ev-end {opacity: .62}
.cm-ev-st {position: absolute; left: 8px; top: 8px; padding: 3px 9px; border-radius: 20px; background: var(--cm-accent); color: #fff; font-size: 11.5px; font-weight: 800; font-style: normal}
.ev-end .cm-ev-st, .cm-ev-st.ev-end {background: #64748b}
.ev-soon .cm-ev-st, .cm-ev-st.ev-soon {background: var(--cm-info)}
.cm-ev-inline {position: static; display: inline-block}

/* ---------- 사이드 위젯 ---------- */
.cm-widget {padding: 16px 18px; background: var(--cm-panel); border: 1px solid var(--cm-line); border-radius: var(--cm-radius); box-shadow: var(--cm-shadow)}
.cm-w-tit {display: flex; align-items: center; gap: 7px; margin-bottom: 12px; font-size: 15px; font-weight: 800; letter-spacing: -0.02em}
.cm-w-tit .fa {color: var(--cm-accent)}
.cm-w-help {margin-top: 8px; color: var(--cm-faint); font-size: 12px}

.cm-ol-hd {display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px}
.cm-ol-hd .cm-w-tit {margin-bottom: 0}
.cm-ol-join {color: var(--cm-accent-d); font-size: 12.5px; font-weight: 700}
.cm-ol-input {display: block; width: 100%; height: 42px; margin-bottom: 7px; padding: 0 13px; border: 1px solid var(--cm-line); border-radius: 9px; background: var(--cm-panel-2); font-size: 14px}
.cm-ol-input:focus {background: #fff}
.cm-ol .cm-btn-block {height: 44px; font-size: 14.5px; margin-top: 3px}
.cm-ol-opt {display: flex; align-items: center; justify-content: space-between; margin-top: 10px; font-size: 12.5px; color: var(--cm-muted)}
.cm-ol-opt a:hover {color: var(--cm-ink)}
.cm-ol-me {display: flex; align-items: center; gap: 11px}
.cm-ol-avatar img {width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--cm-panel-2)}
.cm-ol-who {flex: 1; min-width: 0; font-size: 14px}
.cm-ol-who strong {font-size: 15.5px; font-weight: 800}
.cm-ol-who small {display: block; color: var(--cm-faint); font-size: 12px}
.cm-ol-adm {display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: #fff7e0; color: #b7791f}
.cm-ol-stat {display: grid; grid-template-columns: repeat(3, 1fr); margin: 14px 0 12px; border: 1px solid var(--cm-line); border-radius: 10px; overflow: hidden}
.cm-ol-stat li + li {border-left: 1px solid var(--cm-line)}
.cm-ol-stat a {display: flex; flex-direction: column; align-items: center; padding: 10px 4px}
.cm-ol-stat a:hover {background: var(--cm-panel-2)}
.cm-ol-stat span {color: var(--cm-faint); font-size: 11.5px}
.cm-ol-stat strong {font-size: 14.5px; font-weight: 800}
.cm-ol-stat strong.is-new {color: var(--cm-danger)}
.cm-ol-links {display: flex; gap: 6px}
.cm-ol-links a {flex: 1; text-align: center; padding: 8px 0; border-radius: 8px; background: var(--cm-panel-2); color: var(--cm-ink-2); font-size: 12.5px; font-weight: 600}
.cm-ol-links a:hover {background: #e6ebf2}

.cm-scamsch {display: flex; height: 42px; border: 1px solid var(--cm-line); border-radius: 10px; overflow: hidden; background: var(--cm-panel-2)}
.cm-scamsch:focus-within {border-color: var(--cm-danger); background: #fff}
.cm-scamsch input {flex: 1; min-width: 0; padding: 0 12px; border: 0; background: transparent; font-size: 14px}
.cm-scamsch input:focus {box-shadow: none !important; border: 0 !important}
.cm-scamsch button {padding: 0 16px; border: 0; background: var(--cm-danger); color: #fff; font-weight: 700; font-size: 13.5px}
.cm-scamsch button:hover {background: var(--cm-danger-d)}

.cm-rank, .cm-prank {margin: 0; padding: 0; list-style: none}
.cm-rank li, .cm-prank li {display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 13.5px}
.cm-rank a {flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--cm-ink-2)}
.cm-rank a:hover {color: var(--cm-ink); text-decoration: underline}
.cm-rank-no {flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; background: var(--cm-panel-2); color: var(--cm-muted); font-size: 11.5px; font-weight: 800}
.cm-rank-no.top {background: var(--cm-ink); color: #fff}
.cm-prank .nick {flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600}
.cm-prank .pt {color: var(--cm-accent-d); font-weight: 800; font-size: 12.5px}
.cm-cs-links {display: grid; gap: 6px}
.cm-cs-links a {display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 9px; background: var(--cm-panel-2); color: var(--cm-ink-2); font-size: 13.5px; font-weight: 600}
.cm-cs-links a:hover {background: #e6ebf2; color: var(--cm-ink)}
.cm-cs-links .fa {width: 16px; color: var(--cm-muted); text-align: center}

/* 설문 (기본 스킨 보정) */
.cm-aside #poll {border-radius: var(--cm-radius); overflow: hidden; border: 1px solid var(--cm-line); box-shadow: var(--cm-shadow)}

/* ---------- 푸터 ---------- */
#cm_ft {background: var(--cm-navy); color: #8392ad; font-size: 13px}
#cm_ft .cm-inner {padding-top: 36px; padding-bottom: 34px}
.cm-ft-top {display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 22px; border-bottom: 1px solid rgba(255, 255, 255, .07)}
.cm-logo-ft .cm-logo-badge {width: 32px; height: 32px; font-size: 16px; border-radius: 9px; box-shadow: none}
.cm-logo-ft .cm-logo-name {font-size: 18px}
.cm-ft-desc {max-width: 520px; margin-top: 10px; line-height: 1.6}
.cm-ft-links {display: flex; flex-wrap: wrap; gap: 6px 20px}
.cm-ft-links a {color: #aab6cc; font-weight: 500}
.cm-ft-links a:hover {color: #fff}
.cm-ft-links a.is-strong {color: #fff; font-weight: 700}
.cm-ft-notice {margin-top: 18px; line-height: 1.65; font-size: 12.5px; color: #6f7d97}
.cm-ft-copy {margin-top: 10px; font-size: 12px; color: #5b6984}

#top_btn {position: fixed; right: 18px; bottom: 18px; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--cm-ink); color: #fff; font-size: 16px; box-shadow: 0 8px 22px rgba(15, 23, 42, .3); opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .2s; z-index: 90; cursor: pointer}
#top_btn.is-show {opacity: 1; visibility: visible; transform: none}
#top_btn:hover {background: var(--cm-accent-d)}

.cm-toast {position: fixed; left: 50%; bottom: 28px; z-index: 2000; transform: translate(-50%, 20px); padding: 11px 18px; border-radius: 10px; background: rgba(15, 23, 42, .92); color: #fff; font-size: 13.5px; opacity: 0; transition: all .2s; pointer-events: none}
.cm-toast.is-show {opacity: 1; transform: translate(-50%, 0)}

/* 그누보드 기본 요소 보정 */
.sv_wrap .sv {border-radius: 8px; overflow: hidden}
.pg_wrap {float: none; display: block; clear: both}
.pg {display: flex; justify-content: center; flex-wrap: wrap; gap: 4px}
.pg_page, .pg_current {height: 34px; min-width: 34px; line-height: 32px; border-radius: 8px; font-size: 13px}
.pg_page {background: #fff; border: 1px solid var(--cm-line); color: var(--cm-ink-2)}
.pg_page:hover {border-color: #c3ccd9; background: var(--cm-panel-2)}
.pg_current {background: var(--cm-ink); border-color: var(--cm-ink)}
.pg_start, .pg_prev, .pg_end, .pg_next {background-color: #fff; border: 1px solid var(--cm-line)}
.btn_submit {background: var(--cm-ink)}
.btn_submit:hover {background: #1e293b}
a.btn_frmline, button.btn_frmline {background: var(--cm-ink-2); border-radius: 8px}
.frm_input, .wr_content textarea, .tbl_frm01 textarea, .form_01 textarea {border-color: var(--cm-line); border-radius: 8px; box-shadow: none}
input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus {box-shadow: 0 0 0 3px rgba(16, 185, 129, .15); border-color: var(--cm-accent) !important}
.sch_word {background: #fde68a; color: var(--cm-ink); border-radius: 3px}

/* 회원·검색·새글 등 기본 스킨이 하위 페이지 안에서 보기 좋게 */
.cm-content > .mbskin, .cm-content > #fregister, .cm-content > #register_form, .cm-content > .register, .cm-content > #sch_res_detail, .cm-content > #new_sch, .cm-content > #faq_wrap, .cm-content > #bo_list, .cm-content > #bo_v, .cm-content > #bo_w, .cm-content > #ctt, .cm-content > .new_list, .cm-content > #fnewlist, .cm-content > #bo_list_total {max-width: 100%}
.cm-content > #ctt, .cm-content > .register, .cm-content > #sch_res_detail, .cm-content > #faq_wrap, .cm-content > #fnewlist, .cm-content > #qa_list, .cm-content > #bo_sch, .cm-content > #sch_result, .cm-content > #new_sch {background: var(--cm-panel); border: 1px solid var(--cm-line); border-radius: var(--cm-radius); padding: 20px; box-shadow: var(--cm-shadow)}
.cm-content #ctt_con {line-height: 1.8; font-size: 14.5px}
.mbskin {margin: 20px auto !important}

/* ==========================================================================
   반응형
   ========================================================================== */
@media (max-width: 1180px) {
    .cm-gcards {grid-template-columns: repeat(3, minmax(0, 1fr))}
    .cm-quick .cm-qbtn span {display: none}
    .cm-quick .cm-qbtn {width: 40px; padding: 0; justify-content: center}
    .cm-gnb-a {padding: 0 15px; font-size: 14.5px}
}
@media (max-width: 1024px) {
    .cm-layout {grid-template-columns: minmax(0, 1fr)}
    .cm-aside {position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px}
    body:not(.is-index-page) .cm-aside {display: none}
    .cm-gcards {grid-template-columns: repeat(3, minmax(0, 1fr))}
}
@media (max-width: 860px) {
    .cm-top {display: none}
    .cm-head .cm-inner {height: 60px; gap: 10px; padding: 0 12px}
    .cm-burger {display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 40px; height: 40px; padding: 0 10px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .06); cursor: pointer}
    .cm-burger span {display: block; height: 2px; border-radius: 2px; background: #e2e8f0}
    .cm-burger span:nth-child(2) {width: 70%}
    .cm-logo {margin: 0 auto}
    .cm-logo-badge {width: 32px; height: 32px; font-size: 16px; border-radius: 9px}
    .cm-logo-name {font-size: 19px}
    .cm-logo img {max-height: 36px}
    .cm-quick {display: none}
    .cm-sch-toggle {display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .06); color: #e2e8f0; font-size: 16px; cursor: pointer}
    .cm-search {position: absolute; left: 12px; right: 12px; top: 64px; max-width: none; margin: 0; z-index: 70; display: none; box-shadow: 0 12px 30px rgba(0, 0, 0, .35)}
    #cm_hd.is-search .cm-search {display: flex}
    .cm-gnb-ul {overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch}
    .cm-gnb-ul::-webkit-scrollbar {display: none}
    .cm-gnb .cm-inner {padding: 0 6px}
    .cm-gnb-a {height: 46px; padding: 0 12px; font-size: 14.5px}
    .cm-gnb-a .fa {display: none}
    .cm-gnb-a:after {left: 12px; right: 12px}
    .cm-gnb-sub {display: none}
    .cm-inner {padding: 0 12px}
    .cm-index-top {padding-top: 12px}
    .cm-ticker {height: 42px}
    .cm-ticker-view, .cm-ticker-list li {height: 42px}
    .cm-ticker-label {padding: 0 12px; margin-right: 10px}
    .cm-ticker-label span {display: none}
    .cm-sec {margin-top: 18px}
    .cm-sec-tit {font-size: 18px}
    .cm-sec-sub {display: none}
    .cm-gcards {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px}
    .cm-gcard-body {padding: 11px 12px 4px}
    .cm-gcard-name {font-size: 15px}
    .cm-gcard-act {padding: 10px 12px 12px; flex-direction: column}
    .cm-gcard-act .cm-btn {flex: 0 0 auto; width: 100%; height: 36px; font-size: 13px}
    .cm-gcard-ph {font-size: 34px}
    #wrapper.cm-main {padding: 14px 0 40px}
    .cm-idx, .cm-idx-grid {gap: 12px}
    .cm-idx-grid {grid-template-columns: minmax(0, 1fr)}
    .cm-aside {grid-template-columns: minmax(0, 1fr)}
    .cm-scam-row {grid-template-columns: 70px minmax(0, 1fr) auto; gap: 4px 10px; padding: 10px 14px}
    .cm-scam-row .c-type {display: none}
    .cm-scam-row .c-date {display: none}
    .cm-scam-th {display: none}
    .cm-ecards {grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 14px 14px; gap: 10px}
    .cm-box-hd {padding: 12px 14px}
    .cm-lt > li {padding: 0 14px}
    .cm-lt-thumb > li {padding: 0 10px}
    .cm-phead {padding: 16px 16px 0; margin-bottom: 12px}
    .cm-phead-row {padding-bottom: 14px}
    .cm-phead-tit {font-size: 19px}
    .cm-crumb {display: none}
    .cm-ft-top {flex-direction: column}
    #top_btn {right: 12px; bottom: 12px; width: 42px; height: 42px}
}
@media (max-width: 420px) {
    .cm-gcards {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)}
    .cm-gcard-meta {flex-direction: column; gap: 4px}
    .cm-ecards {grid-template-columns: minmax(0, 1fr)}
}
@media (prefers-reduced-motion: reduce) {
    *, *:before, *:after {transition: none !important; animation: none !important}
}

/* ==========================================================================
   테마 공용 부품 (탭·아코디언·흐르는 띠·가로 스크롤·사이드 목록·특집·타일)
   ========================================================================== */
.js-tabs [data-pane] {display: none}
.js-tabs [data-pane].on {display: block}
.cm-tabbar {display: flex; gap: 2px; padding: 0 10px; border-bottom: 1px solid var(--cm-line-2); overflow-x: auto; scrollbar-width: none}
.cm-tabbar::-webkit-scrollbar {display: none}
.cm-tabbar button {position: relative; flex-shrink: 0; padding: 13px 12px; border: 0; background: transparent; color: var(--cm-muted); font-size: 14.5px; font-weight: 700; cursor: pointer}
.cm-tabbar button.on {color: var(--cm-ink)}
.cm-tabbar button.on:after {content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--cm-accent)}
.cm-tabbar .cm-more {margin-left: auto; align-self: center; padding-right: 6px}

.js-acc .acc-item {border-bottom: 1px solid var(--cm-line-2)}
.js-acc .acc-q {display: flex; align-items: center; gap: 10px; width: 100%; padding: 16px 18px; border: 0; background: transparent; text-align: left; font-size: 15px; font-weight: 700; color: var(--cm-ink); cursor: pointer}
.js-acc .acc-q .q {flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--cm-accent); color: #fff; font-size: 11.5px; font-weight: 800}
.js-acc .acc-q .fa {margin-left: auto; color: var(--cm-faint); transition: transform .2s}
.js-acc .acc-a {display: none; padding: 0 18px 18px 50px; color: var(--cm-ink-2); font-size: 14px; line-height: 1.75}
.js-acc .acc-item.on {background: var(--cm-panel-2)}
.js-acc .acc-item.on .acc-q .fa {transform: rotate(180deg)}
.js-acc .acc-item.on .acc-a {display: block}

.js-marquee {overflow: hidden; white-space: nowrap}
.js-marquee .mq-track {display: inline-flex; gap: 34px; animation: cm-marquee 45s linear infinite}
.js-marquee:hover .mq-track {animation-play-state: paused}
@keyframes cm-marquee {from {transform: translateX(0)} to {transform: translateX(-50%)}}

.js-hscroll {position: relative}
.js-hscroll .hs-track {overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory}
.js-hscroll .hs-track::-webkit-scrollbar {display: none}
.js-hscroll [data-dir] {position: absolute; top: 40%; z-index: 3; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(15, 23, 42, .75); color: #fff; font-size: 16px; cursor: pointer}
.js-hscroll [data-dir="-1"] {left: -14px}
.js-hscroll [data-dir="1"] {right: -14px}

/* 사이드 목록 */
.cm-side-box {background: var(--cm-panel); border: 1px solid var(--cm-line); border-radius: var(--cm-radius); box-shadow: var(--cm-shadow); overflow: hidden}
.cm-side-hd {display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--cm-line-2)}
.cm-side-hd h2 {display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800}
.cm-side-hd h2:before {content: ""; width: 3px; height: 15px; border-radius: 2px; background: var(--cm-accent)}
.cm-side-hd .cm-plus {display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--cm-panel-2); color: var(--cm-muted); font-size: 12px}
.cm-side-list {padding: 6px 0}
.cm-side-list li {display: flex; align-items: center; gap: 8px; padding: 8px 16px; font-size: 13.5px}
.cm-side-list li a {flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--cm-ink-2)}
.cm-side-list li a:hover {color: var(--cm-ink); text-decoration: underline}
.cm-side-list .d {flex-shrink: 0; color: var(--cm-faint); font-size: 12px}
.cm-side-list .cm-empty {padding: 26px 0; justify-content: center}

/* 특집 (첫 글 크게) */
.cm-feature {display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; padding: 18px}
.cm-feature-main {display: flex; flex-direction: column; gap: 10px}
.cm-feature-img {display: block; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--cm-panel-2)}
.cm-feature-img img {width: 100%; height: 100%; object-fit: cover; transition: transform .35s}
.cm-feature-main:hover .cm-feature-img img {transform: scale(1.03)}
.cm-feature-main h3 {font-size: 20px; font-weight: 800; line-height: 1.35; letter-spacing: -0.02em}
.cm-feature-main p {color: var(--cm-muted); font-size: 14px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden}
.cm-feature-list li {border-bottom: 1px solid var(--cm-line-2)}
.cm-feature-list li:last-child {border-bottom: 0}
.cm-feature-list a {display: flex; gap: 12px; padding: 10px 0}
.cm-feature-list .th {flex-shrink: 0; width: 88px; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--cm-panel-2); display: flex; align-items: center; justify-content: center; color: var(--cm-faint)}
.cm-feature-list .th img {width: 100%; height: 100%; object-fit: cover}
.cm-feature-list strong {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14.5px; font-weight: 700; line-height: 1.4}
.cm-feature-list small {display: block; margin-top: 4px; color: var(--cm-faint); font-size: 12px}

/* 보증업체 작은 타일 */
.cm-tiles {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px}
.cm-tile {display: flex; align-items: center; gap: 10px; padding: 10px; background: var(--cm-panel); border: 1px solid var(--cm-line); border-radius: 10px; transition: border-color .15s, box-shadow .15s}
.cm-tile:hover {border-color: var(--cm-accent); box-shadow: var(--cm-shadow)}
.cm-tile-img {flex-shrink: 0; width: 64px; height: 40px; border-radius: 6px; overflow: hidden; background: linear-gradient(135deg, #0f1d36, #0e5e4a); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800}
.cm-tile-img img {width: 100%; height: 100%; object-fit: cover}
.cm-tile-txt {min-width: 0}
.cm-tile-txt strong {display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13.5px; font-weight: 800}
.cm-tile-txt small {display: block; color: var(--cm-gold); font-size: 12px; font-weight: 700}

/* 먹튀 흐르는 띠 */
.cm-scam-mq {display: flex; align-items: center; gap: 14px; height: 44px; padding-left: 14px}
.cm-scam-mq-label {flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; background: var(--cm-danger); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .04em}
.cm-scam-mq .js-marquee {flex: 1; min-width: 0}
.cm-scam-mq .mq-item {display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px}
.cm-scam-mq .mq-item b {font-weight: 800}
.cm-scam-mq .mq-item .amt {color: var(--cm-danger); font-weight: 800}

/* 숫자 통계 */
.cm-stats {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr))}
.cm-stat {padding: 20px 10px; text-align: center}
.cm-stat + .cm-stat {border-left: 1px solid var(--cm-line-2)}
.cm-stat b {font-size: 28px; font-weight: 800; letter-spacing: -0.03em}
.cm-stat b small {margin-left: 2px; font-size: 14px; color: var(--cm-accent)}
.cm-stat span {display: block; margin-top: 2px; color: var(--cm-muted); font-size: 13px}

@media (max-width: 860px) {
    .cm-feature {grid-template-columns: minmax(0, 1fr); padding: 14px}
    .cm-tiles {grid-template-columns: repeat(2, minmax(0, 1fr))}
    .cm-stats {grid-template-columns: repeat(2, minmax(0, 1fr))}
    .cm-stat:nth-child(3) {border-left: 0}
    .cm-stat:nth-child(n+3) {border-top: 1px solid var(--cm-line-2)}
    .cm-stat b {font-size: 23px}
}

/* 2026-10-19 보정 : 가입코드 줄바꿈 방지, 좁은 화면 가로 넘침 방지 */
body {overflow-x: clip}
.cm-copy {white-space: nowrap}
.cm-gcard-meta div {flex-wrap: wrap}
@media (max-width: 860px) {
    .js-hscroll [data-dir="-1"] {left: 2px}
    .js-hscroll [data-dir="1"] {right: 2px}
}