/* Community 테마: 초록 메뉴 바 + 배너/로그인 + 게시판별 블록 */
:root { --cm-green: #3bb54a; --cm-green-d: #2f9a3d; --cm-green-soft: #e9f7ec; --cm-text: #222831; --cm-sub: #6b7480; --cm-line: #e3e6ea; --cm-bg: #f4f6f8; --cm-w: 1200px; --kc-primary: #3bb54a; --kc-primary-dark: #2f9a3d; --bs-primary: #3bb54a; --bs-primary-rgb: 59, 181, 74; --bs-link-hover-color: #2f9a3d; }
body.cm-front { background: var(--cm-bg); color: var(--cm-text); font-size: 14px; }
.cm-wrap { max-width: var(--cm-w); margin: 0 auto; padding: 0 16px; }
.cm-front a { color: inherit; }
.cm-front a:hover { text-decoration: none; }

/* ---- 헤더 ---- */
.cm-header { position: relative; z-index: 50; background: #fff; border-bottom: 0; box-shadow: none; }
.cm-top { background: #fff; }
.cm-top__in { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.cm-logo { font-size: 34px; font-weight: 900; letter-spacing: -1.5px; color: #111 !important; line-height: 1; }
.cm-top__util { display: flex; align-items: center; gap: 16px; font-size: 12px; color: var(--cm-sub); }
.cm-top__util a:hover { color: var(--cm-green-d); }
.cm-top__hi b { color: var(--cm-text); }
.cm-dot { display: inline-block; min-width: 16px; padding: 0 4px; border-radius: 8px; background: #ef4444; color: #fff; font-size: 10px; font-style: normal; line-height: 16px; text-align: center; vertical-align: 1px; }
.cm-switch { position: relative; width: 46px; height: 24px; padding: 0; border: 1px solid #cfd4da; border-radius: 12px; background: #eef0f2; cursor: pointer; }
.cm-switch__knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); display: grid; place-items: center; font-size: 10px; color: #555; transition: transform .2s; }
.cm-switch .cm-sw-light { display: none; }
html[data-bs-theme="dark"] .cm-switch { background: #2e3338; border-color: #454b52; }
html[data-bs-theme="dark"] .cm-switch__knob { transform: translateX(22px); background: #3bb54a; color: #fff; }
html[data-bs-theme="dark"] .cm-switch .cm-sw-dark { display: none; }
html[data-bs-theme="dark"] .cm-switch .cm-sw-light { display: inline; }

.cm-gnb { background: var(--cm-green); }
.cm-gnb__in { display: flex; align-items: center; justify-content: space-between; height: 50px; }
.cm-gnb__list { align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; }
.cm-gnb__item { position: relative; }
.cm-gnb__link { display: block; padding: 0 18px; line-height: 50px; color: #fff !important; font-size: 15px; font-weight: 600; white-space: nowrap; }
.cm-gnb__link:hover, .cm-gnb__link.is-active { background: rgba(0, 0, 0, .12); }
.cm-gnb__sub { display: none; position: absolute; left: 0; top: 50px; min-width: 170px; padding: 8px 0; background: #fff; border: 1px solid var(--cm-line); border-top: 0; border-radius: 0 0 6px 6px; box-shadow: 0 8px 20px rgba(0, 0, 0, .12); }
.cm-gnb__item:hover .cm-gnb__sub, .cm-gnb__item:focus-within .cm-gnb__sub { display: block; }
.cm-gnb__sub a { display: block; padding: 8px 18px; color: var(--cm-text) !important; font-size: 13px; white-space: nowrap; }
.cm-gnb__sub a:hover { background: var(--cm-green-soft); color: var(--cm-green-d) !important; }
.cm-gnb__sub .kc-menu-d3 { padding-left: 30px; color: var(--cm-sub) !important; font-size: 12px; }
.cm-gnb__title { color: #fff; font-weight: 700; }
.cm-gnb__tools { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.cm-gnb__btn { position: relative; width: 40px; height: 40px; border: 0; background: transparent; color: #fff; font-size: 18px; cursor: pointer; border-radius: 6px; }
.cm-gnb__btn:hover { background: rgba(0, 0, 0, .12); }
.cm-gnb__dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: #ff5a5a; }

/* ---- 본문 ---- */
.cm-main { padding: 22px 0 40px; }
.cm-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: start; }
.cm-grid__main, .cm-grid__side { min-width: 0; }
.cm-grid--top { margin-bottom: 24px; }
.cm-home > .cm-box, .cm-home > .cm-two { margin-bottom: 24px; }
.cm-box { background: #fff; border: 1px solid var(--cm-line); border-radius: 6px; }
.cm-wd { padding: 16px 18px 14px; }
.cm-wd__h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cm-wd__h h3 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -.3px; }
.cm-wd__h a { color: var(--cm-sub); font-size: 11px; }
.cm-wd__h a:hover { color: var(--cm-green-d); }
.cm-btn { display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 16px; border-radius: 4px; font-size: 13px; font-weight: 600; border: 1px solid var(--cm-line); background: #fff; }
.cm-btn--green { background: var(--cm-green); border-color: var(--cm-green); color: #fff !important; }
.cm-btn--green:hover { background: var(--cm-green-d); }
.cm-btn--line:hover { border-color: var(--cm-green); color: var(--cm-green-d); }

/* 히어로 배너 */
.cm-hero { position: relative; margin-bottom: 24px; border-radius: 8px; overflow: hidden; background: #fff3d1; }
.cm-hero__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.cm-hero__track::-webkit-scrollbar { display: none; }
.cm-hero__slide { flex: 0 0 100%; scroll-snap-align: start; min-height: 230px; }
.cm-hero__slide img { display: block; width: 100%; height: 100%; max-height: 330px; object-fit: cover; }
.cm-hero__slide a { display: block; }
.cm-hero__welcome { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; padding: 34px 44px; background: linear-gradient(120deg, #fff4d4 0%, #ffe8a6 100%); }
.cm-hero__chip { padding: 3px 12px; border-radius: 12px; background: rgba(0, 0, 0, .08); font-size: 11px; font-weight: 700; letter-spacing: 1px; }
.cm-hero__welcome strong { font-size: 40px; line-height: 1.1; font-weight: 900; letter-spacing: -1.5px; color: #1b1f24; }
.cm-hero__welcome p { margin: 0 0 8px; color: #5a5030; font-size: 14px; line-height: 1.6; }
.cm-hero__nav { position: absolute; right: 14px; bottom: 12px; display: flex; gap: 4px; }
.cm-hero__nav button { width: 30px; height: 26px; border: 0; border-radius: 4px; background: rgba(30, 34, 40, .85); color: #fff; font-size: 11px; cursor: pointer; }
.cm-hero__nav button:hover { background: var(--cm-green-d); }

/* 두 칸 */
.cm-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.cm-grid--top .cm-two { gap: 20px; }
.cm-tabs { display: flex; border-bottom: 1px solid var(--cm-line); margin: 0 -18px 6px; padding: 0 18px; gap: 0; }
.cm-tabs button { position: relative; padding: 8px 14px; border: 0; background: transparent; color: var(--cm-sub); font-size: 13px; font-weight: 600; cursor: pointer; }
.cm-tabs button.is-on { color: var(--cm-green-d); }
.cm-tabs button.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--cm-green); }

/* 목록 */
.cm-lines { list-style: none; margin: 0; padding: 0; }
.cm-lines li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 33px; border-bottom: 1px solid #f0f2f4; }
.cm-lines li:last-child { border-bottom: 0; }
.cm-lines a { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; font-size: 13px; }
.cm-lines a:hover .cm-lines__t { color: var(--cm-green-d); text-decoration: underline; }
.cm-lines__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-lines time { flex: none; color: #9aa2ac; font-size: 11px; }
.cm-sq { flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--cm-green); position: relative; }
.cm-sq::after { content: ""; position: absolute; inset: 3px; border-radius: 1px; background: #fff; opacity: .9; }
.cm-no { flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 3px; background: var(--cm-green); color: #fff; font-size: 10px; font-weight: 700; line-height: 1; }
.cm-cmt { flex: none; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--cm-green-soft); color: var(--cm-green-d); font-size: 10px; font-style: normal; font-weight: 700; line-height: 17px; text-align: center; }
.cm-tag { flex: none; padding: 0 6px; border-radius: 3px; border: 1px solid var(--cm-green); color: var(--cm-green-d); font-size: 10px; line-height: 16px; }
.cm-empty { padding: 60px 0; text-align: center; color: var(--cm-sub); background: #fff; border: 1px solid var(--cm-line); border-radius: 6px; }

/* 사이드바 */
.cm-side { display: flex; flex-direction: column; gap: 16px; }
.cm-login { padding: 14px; }
.cm-login__row { display: flex; gap: 8px; }
.cm-login__inputs { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.cm-login input[type=text], .cm-login input[type=password] { width: 100%; height: 30px; padding: 0 10px; border: 1px solid #d5d9de; border-radius: 3px; background: #fff; color: var(--cm-text); font-size: 12px; outline: 0; }
.cm-login input:focus { border-color: var(--cm-green); }
.cm-login__btn { flex: none; width: 68px; border: 0; border-radius: 3px; background: var(--cm-green); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; }
.cm-login__btn:hover { background: var(--cm-green-d); }
.cm-login__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; font-size: 11px; color: var(--cm-sub); }
.cm-login__foot label { display: inline-flex; align-items: center; gap: 4px; margin: 0; cursor: pointer; }
.cm-login__foot i { font-style: normal; color: #ccd1d7; margin: 0 2px; }
.cm-login__foot a:hover { color: var(--cm-green-d); }
.cm-me { padding: 16px; }
.cm-me__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cm-me__name { font-size: 16px; font-weight: 800; }
.cm-me__lv { padding: 1px 8px; border-radius: 10px; background: var(--cm-green-soft); color: var(--cm-green-d); font-size: 11px; font-weight: 700; }
.cm-me__info { display: flex; gap: 0; margin: 0 0 12px; padding: 8px 0; border-top: 1px solid #f0f2f4; border-bottom: 1px solid #f0f2f4; }
.cm-me__info div { flex: 1; text-align: center; }
.cm-me__info dt { font-size: 11px; font-weight: 500; color: var(--cm-sub); }
.cm-me__info dd { margin: 2px 0 0; font-size: 15px; font-weight: 800; }
.cm-me__btns { display: flex; gap: 6px; }
.cm-me__btns .cm-btn { flex: 1; height: 32px; padding: 0; font-size: 12px; }
.cm-promo { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 108px; padding: 16px 18px; border-radius: 8px; background: linear-gradient(135deg, #e3f6e8, #cdeed6); overflow: hidden; }
.cm-promo__t { font-size: 12px; color: #3d6a48; }
.cm-promo strong { font-size: 34px; line-height: 1.1; font-weight: 900; color: #1e8a33; letter-spacing: -1px; }
.cm-promo strong small { font-size: 13px; font-weight: 700; color: #3d6a48; letter-spacing: 0; }
.cm-promo i { position: absolute; right: 14px; bottom: 10px; font-size: 44px; color: rgba(47, 154, 61, .22); }
.cm-promo:hover { filter: brightness(.98); }
.cm-rank { list-style: none; margin: 0; padding: 0; }
.cm-rank li { display: flex; align-items: center; gap: 9px; min-height: 28px; font-size: 13px; }
.cm-rank li span, .cm-rank li a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-rank li em { flex: none; color: var(--cm-sub); font-size: 11px; font-style: normal; }
.cm-rank li a:hover { color: var(--cm-green-d); text-decoration: underline; }
.cm-rank li:nth-child(n+4) .cm-no { background: #cfd5dc; color: #5b636d; }
.cm-side-banner .kc-banner img { display: block; width: 100%; border-radius: 8px; }
.cm-side-banner .kc-banner + .kc-banner { margin-top: 10px; }
.cm-wide-banner { margin-bottom: 24px; }
.cm-wide-banner img { max-width: 100%; border-radius: 8px; }

/* 갤러리 */
.cm-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 16px; }
.cm-card { display: block; }
.cm-card__img { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 4px; overflow: hidden; background: #e8ebef; }
.cm-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.cm-card:hover .cm-card__img img { transform: scale(1.04); }
.cm-card__cmt { position: absolute; top: 8px; right: 8px; min-width: 22px; padding: 0 6px; border-radius: 11px; background: rgba(30, 34, 40, .75); color: #fff; font-size: 11px; font-style: normal; line-height: 22px; text-align: center; }
.cm-card__t { display: -webkit-box; margin: 9px 0 4px; font-size: 13px; line-height: 1.4; font-weight: 700; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cm-card:hover .cm-card__t { color: var(--cm-green-d); }
.cm-card__m { font-size: 11px; color: #9aa2ac; }
.cm-card__m i { font-style: normal; margin: 0 4px; }
.cm-noimg { display: grid; place-items: center; width: 100%; height: 100%; background: #e8ebef; color: #aeb5be; font-size: 28px; }

/* 게시판 블록 */
.cm-block { min-width: 0; }
.cm-bighero { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: #222; }
.cm-bighero img, .cm-bighero .cm-noimg { width: 100%; height: 100%; object-fit: cover; }
.cm-bighero span:last-child { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px; background: linear-gradient(transparent, rgba(0, 0, 0, .78)); color: #fff; font-size: 14px; font-weight: 700; line-height: 1.35; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cm-minis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.cm-minis a { display: block; }
.cm-minis__img { display: block; aspect-ratio: 16 / 10; border-radius: 4px; overflow: hidden; background: #e8ebef; }
.cm-minis__img img { width: 100%; height: 100%; object-fit: cover; }
.cm-minis__t, .cm-thumbs__t { display: -webkit-box; margin-top: 6px; font-size: 12px; line-height: 1.4; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cm-minis a:hover .cm-minis__t, .cm-thumbs a:hover .cm-thumbs__t { color: var(--cm-green-d); }
.cm-thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.cm-thumbs a { display: block; }
.cm-thumbs__img { display: block; aspect-ratio: 16 / 10; border-radius: 4px; overflow: hidden; background: #e8ebef; }
.cm-thumbs__img img { width: 100%; height: 100%; object-fit: cover; }
.cm-media { list-style: none; margin: 0; padding: 0; }
.cm-media li + li { margin-top: 12px; padding-top: 12px; border-top: 1px solid #f0f2f4; }
.cm-media a { display: flex; gap: 14px; }
.cm-media__img { flex: none; width: 96px; height: 72px; border-radius: 4px; overflow: hidden; background: #e8ebef; }
.cm-media__img img { width: 100%; height: 100%; object-fit: cover; }
.cm-media__b { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; }
.cm-media__b strong { font-size: 14px; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cm-media a:hover strong { color: var(--cm-green-d); }
.cm-media__b small { color: #9aa2ac; font-size: 11px; }

/* 안쪽 페이지의 본문 카드 */
.cm-grid__main > .kc-box, .cm-grid__main .kc-box { background: #fff; }

/* 푸터 */
.cm-footer { background: #fff; border-top: 1px solid var(--cm-line); padding: 28px 0 34px; color: var(--cm-sub); font-size: 12px; }
.cm-fmenu { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 18px 12px; padding-bottom: 22px; border-bottom: 1px solid var(--cm-line); }
.cm-fmenu__col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cm-fmenu__t { font-size: 14px; font-weight: 800; color: var(--cm-text) !important; margin-bottom: 4px; }
.cm-fmenu__s { color: var(--cm-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-fmenu__s:hover, .cm-fmenu__t:hover { color: var(--cm-green-d) !important; }
.cm-flinks { padding: 16px 0 10px; }
.cm-flinks a { display: inline-block; margin-right: 18px; color: var(--cm-text); font-size: 12px; }
.cm-flinks a:hover { color: var(--cm-green-d); }
.cm-company { margin: 0 0 8px; line-height: 1.8; }
.cm-company span { display: inline-block; margin-right: 12px; }
.cm-copy { margin: 0; color: #9aa2ac; font-size: 11px; }

/* ---- 반응형 ---- */
@media (max-width: 991.98px) {
    .cm-grid { grid-template-columns: minmax(0, 1fr); }
    .cm-top__in { height: 60px; }
    .cm-logo { font-size: 28px; }
    .cm-gnb__in { height: 46px; }
    .cm-two { grid-template-columns: minmax(0, 1fr); }
    .cm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cm-hero__welcome { padding: 26px 24px; }
    .cm-hero__welcome strong { font-size: 30px; }
}
@media (max-width: 575.98px) {
    .cm-top__util { gap: 10px; }
    .cm-main { padding-top: 14px; }
    .cm-wd { padding: 14px 14px 12px; }
    .cm-tabs { margin: 0 -14px 6px; padding: 0 14px; overflow-x: auto; }
    .cm-minis, .cm-thumbs { gap: 10px; }
}

/* ---- 다크 모드 ---- */
html[data-bs-theme="dark"] { --cm-text: #e8eaee; --cm-sub: #9aa3ae; --cm-line: #2b2f35; --cm-bg: #0f1114; --cm-green-soft: #1d3a25; }
html[data-bs-theme="dark"] body.cm-front { background: var(--cm-bg); }
html[data-bs-theme="dark"] .cm-header, html[data-bs-theme="dark"] .cm-top, html[data-bs-theme="dark"] .cm-footer { background: #15181c; }
html[data-bs-theme="dark"] .cm-logo { color: #fff !important; }
html[data-bs-theme="dark"] .cm-gnb { background: #277a33; }
html[data-bs-theme="dark"] .cm-box { background: #171a1e; border-color: var(--cm-line); }
html[data-bs-theme="dark"] .cm-lines li { border-color: #22262b; }
html[data-bs-theme="dark"] .cm-gnb__sub { background: #1b1f24; border-color: var(--cm-line); }
html[data-bs-theme="dark"] .cm-gnb__sub a { color: var(--cm-text) !important; }
html[data-bs-theme="dark"] .cm-login input { background: #101215; border-color: #343a41; color: var(--cm-text); }
html[data-bs-theme="dark"] .cm-promo { background: linear-gradient(135deg, #1b3b24, #14301c); }
html[data-bs-theme="dark"] .cm-promo__t, html[data-bs-theme="dark"] .cm-promo strong small { color: #a9d9b4; }
html[data-bs-theme="dark"] .cm-promo strong { color: #5ed675; }
html[data-bs-theme="dark"] .cm-hero__welcome { background: linear-gradient(120deg, #2c2a1c, #3a331b); }
html[data-bs-theme="dark"] .cm-hero__welcome strong { color: #f4f1e4; }
html[data-bs-theme="dark"] .cm-hero__welcome p { color: #cfc8a8; }
html[data-bs-theme="dark"] .cm-noimg, html[data-bs-theme="dark"] .cm-card__img, html[data-bs-theme="dark"] .cm-media__img { background: #23272d; }
html[data-bs-theme="dark"] .cm-btn { background: #171a1e; color: var(--cm-text); }
html[data-bs-theme="dark"] .cm-rank li:nth-child(n+4) .cm-no { background: #3a4048; color: #c4cad2; }
html[data-bs-theme="dark"] .cm-flinks a, html[data-bs-theme="dark"] .cm-fmenu__t { color: var(--cm-text) !important; }

/* 언어 전환 (환경설정 > 기본환경설정 > 사용할 언어) */
.kc-lang { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13px; }
.kc-lang a { color: inherit; opacity: .7; text-decoration: none; }
.kc-lang a:hover, .kc-lang a.is-on { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.kc-lang a.is-on { font-weight: 700; }