/* owner: community — S07 목록 · S08 상세·작성 · S17 · S18 · 마이페이지 내 활동·요청 처리 부품
   공용 토큰(base.css)·컴포넌트(components.css)를 조합하고, 커뮤니티에만 있는 배치만 여기에 둔다.
   한 줄 제보·투표·내 활동·주간 랭킹 패널 규칙은 main.css(.oneline .poll .me .rlist)를 함께 읽는다. */

.cm-muted { color: var(--ink-3); font-size: 13.5px; line-height: 1.6; text-wrap: pretty; }
.cm-spot { width: 140px; height: 140px; border-radius: 14px; object-fit: cover; }
.cm-narrow { max-width: 860px; margin-inline: auto; }
.cm-head { margin-bottom: 16px; }
.cm-head .page-hd { margin-bottom: 10px; }

/* ---------- 목록 ---------- */
.cm-lockline { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px dashed var(--line-2); border-radius: var(--r); background: var(--panel-2); color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.cm-lockline > .i { flex: none; width: 18px; height: 18px; color: var(--ink-3); }
.cm-lockline p { flex: 1; min-width: 0; text-wrap: pretty; }
.cm-lockline .btn { flex: none; }
.cm-pop .panel__hd .seg { margin-left: 4px; }
.cm-pop .panel__sub { margin-left: auto; }
.cm-pop .rows { padding: 4px 0 6px; }
.cm-board__hd { flex-wrap: wrap; row-gap: 8px; padding-block: 8px; }
.cm-board__hd h2 { flex: none; }
.cm-board__hd h2 .panel__sub { margin-left: 4px; font-weight: 600; letter-spacing: 0; }
.cm-sort { margin-left: auto; }
.cm-search { padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.cm-search .input-group { max-width: 640px; }
.cm-search .select { flex: 0 1 165px; min-width: 0; font-size: 14px; }
.cm-search .input { min-width: 0; font-size: 16px; }
.cm-search .input, .cm-search .select, .cm-search .btn { height: 44px; }
.cm-search__msg { margin-top: 8px; color: var(--ink-2); font-size: 14px; }
.cm-search__msg a { color: var(--accent-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.cm-pinned { padding: 2px 0; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.row--pin .ttl__t { font-weight: 700; }
.row__k--pin { background: var(--lime); color: var(--navy); }
.cm-rows { padding-top: 2px; }
.cm-rows .row, .cm-pinned .row { min-height: 46px; }
.cm-fill { border-top: 1px solid var(--line); background: var(--panel-2); }
.cm-fill__hd { display: flex; align-items: center; gap: 6px; padding: 10px 16px 2px; color: var(--ink-2); font-size: 13px; font-weight: 700; }
.cm-fill__hd .i { width: 15px; height: 15px; color: var(--accent-ink); }
.cm-fill .row__meta { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.cm-me { display: block; color: inherit; }
.cm-me:hover .me__who b { text-decoration: underline; text-underline-offset: 3px; }
.cm-me:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.rlist .nick { min-width: 0; }
.rlist .nick__name { font-size: 14.5px; }
.cm-rules__list { display: grid; gap: 2px; padding: 8px 16px 12px; counter-reset: none; }
.cm-rules__list li { display: flex; gap: 9px; padding: 5px 0; font-size: 14px; line-height: 1.5; text-wrap: pretty; }
.cm-rules__n { display: grid; place-items: center; flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: var(--r-sm); background: var(--chip); color: var(--ink-2); font: 800 12px/1 var(--font-en); }
.cm-rules__list li:first-child .cm-rules__n { background: var(--navy); color: var(--lime); }
:root[data-theme="dark"] .cm-rules__list li:first-child .cm-rules__n { background: var(--lime); color: var(--navy); }

/* ---------- 상세 ---------- */
.cm-crumbs { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; color: var(--ink-3); font-size: 13.5px; }
.cm-crumbs a:not(.btn):hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.cm-crumbs a:not(.btn):last-of-type { color: var(--ink); font-weight: 700; }
.cm-crumbs .i { width: 14px; height: 14px; }
.cm-crumbs__sp { flex: 1; }
.cm-post__main { padding-bottom: 0; }
.cm-post__hd { display: grid; gap: 0; padding: 28px 38px 22px; }
.cm-post__board { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13.5px; font-weight: 800; }
.cm-post__board a { display: inline-flex; align-items: center; gap: 7px; color: var(--accent-ink); }
.cm-post__board a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cm-post__board .i { width: 14px; height: 14px; }
.cm-post__popular { height: 28px; gap: 5px; padding-inline: 10px; background: var(--btn); color: #fff; font-size: 13px; font-weight: 800; }
.cm-post__popular .i { color: var(--lime); }
.cm-post__gem { display: block; width: 7px; height: 7px; border: 1px solid var(--leaf); background: var(--lime); transform: rotate(45deg); }
.cm-post__title { margin: 12px 0 20px; font-size: 31px; font-weight: 800; line-height: 1.36; letter-spacing: -.045em; text-wrap: balance; overflow-wrap: anywhere; }
.cm-post__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.cm-post__meta--author { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px 14px; padding-top: 18px; }
.cm-post__who { display: grid; gap: 5px; min-width: 0; }
.cm-post__who .nick__name { font-size: 15px; font-weight: 800; }
.cm-post__who time { color: var(--ink-3); font: 500 12.5px/1.4 var(--font-en); }
.cm-post__stats { display: flex; gap: 18px; margin: 0 0 0 auto; color: var(--ink-3); font-size: 13px; }
.cm-post__stats div { display: flex; gap: 5px; }
.cm-post__stats dd { margin: 0; color: var(--ink); font: 700 13px/1.6 var(--font-en); font-variant-numeric: tabular-nums; }
.cm-av { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: var(--r); background: var(--chip); color: var(--ink-2); font-size: 13px; font-weight: 800; line-height: 1; }
.cm-av--hi { background: var(--navy); color: var(--lime); }
.cm-av--lg { width: 56px; height: 56px; border-radius: 50%; font-size: 22px; }
.cm-av.has-image { overflow: hidden; background: var(--chip); }
.cm-av img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cm-av.is-preset img { object-fit: cover; }
.cm-user-who { display: flex; align-items: center; gap: 10px; }
:root[data-theme="dark"] .cm-av--hi { background: var(--lime); color: var(--navy); }
.cm-post__notice { padding: 0 38px; }
.cm-body { padding: 6px 38px 30px; font-size: 16.5px; line-height: 1.9; }
.cm-body img { max-width: 100%; }
.cm-body img.sticker, .sticker { display: inline-block; width: 120px; height: 120px; object-fit: contain; border-radius: 0; vertical-align: middle; }
.cm-files { display: grid; gap: 10px; margin: 0 38px 26px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--panel-2); }
.cm-files__hd { display: flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 12.5px; font-weight: 700; }
.cm-files__hd .i { width: 14px; height: 14px; }
.cm-files__list { display: grid; gap: 10px; }
.cm-file { display: flex; align-items: center; gap: 14px; }
.cm-file__ico { position: relative; display: grid; place-items: end center; flex: none; width: 42px; height: 52px; padding-bottom: 7px; border-radius: 3px; background: var(--navy); color: var(--lime); font: 800 10.5px/1 var(--font-en); letter-spacing: .04em; }
.cm-file__ico::before { content: ""; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 11px 11px 0; border-color: transparent var(--panel-2) transparent transparent; }
.cm-file__info { display: grid; gap: 2px; flex: 1; min-width: 0; }
.cm-file__name { overflow: hidden; font-size: 15.5px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.cm-file__sub { color: var(--ink-3); font-size: 12.5px; }
.cm-file .btn { flex: none; }
.cm-post__act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 16px 38px; border-top: 1px solid var(--line); background: var(--panel-2); }
.cm-post__act-sp { flex: 1; }
.cm-like, .cm-share { height: 44px; padding-inline: 20px; }
.cm-like b { color: var(--count); font-family: var(--font-en); font-weight: 800; }
.cm-like.is-on, .cm-act.is-on { border-color: var(--leaf); color: var(--accent-ink); }
.cm-like.is-on .i, .cm-act.is-on .i { fill: currentColor; }
.cm-flagbtn { color: var(--ink-3); }
.cm-post__mine { margin: 0; padding: 0 38px 14px; background: var(--panel-2); color: var(--ink-3); font-size: 13px; text-wrap: pretty; }
.cm-pn { border-top: 1px solid var(--line); }
.cm-pn a { display: flex; align-items: center; gap: 14px; padding: 13px 38px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.cm-pn a:last-child { border-bottom: 0; }
.cm-pn a:hover { background: var(--hover); }
.cm-pn em { flex: none; width: 46px; color: var(--ink-3); font-size: 12px; font-style: normal; font-weight: 800; }
.cm-pn span { flex: 1; min-width: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.cm-pn time { flex: none; color: var(--ink-3); font: 500 12.5px/1 var(--font-en); }

.cm-comments .panel__hd { padding: 18px 38px 14px; }
.cm-comments .panel__hd h2 { font-size: 19px; letter-spacing: -.03em; }
.cm-comments .panel__hd em { margin-left: 3px; color: var(--count); font: 800 19px/1 var(--font-en); font-style: normal; }
.cm-clist { padding: 0 38px; }
.cm-c { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 14px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.cm-c > .cm-av { width: 44px; height: 44px; border-radius: 50%; font-size: 17px; }
.cm-c:last-child { border-bottom: 0; }
.cm-c__main { min-width: 0; }
.cm-c > .cm-c__gone { grid-column: 1 / -1; }
.cm-clist--replies { grid-column: 2; margin: 16px 0 0; padding: 0 0 0 18px; border-left: 2px solid var(--line-2); }
.cm-clist--replies .cm-c { grid-template-columns: 36px minmax(0, 1fr); gap: 0 12px; padding: 18px 0 0; border: 0; }
.cm-clist--replies .cm-c:first-child { padding-top: 0; }
.cm-clist--replies .cm-c > .cm-av { width: 36px; height: 36px; font-size: 15px; }
.cm-c__hd { display: grid; align-content: center; gap: 3px; min-height: 44px; }
.cm-c__identity { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cm-c__identity .nick { flex: 0 1 auto; }
.cm-c__identity .cm-c__op { flex: none; }
.cm-c--reply .cm-c__hd { min-height: 36px; }
.cm-c__hd .nick__name { font-weight: 800; }
.cm-c__hd time { color: var(--ink-3); font-size: 12.5px; }
.cm-c__op { height: 20px; border-color: var(--navy); color: var(--ink); font-size: 11px; }
.cm-c__body { margin-top: 8px; font-size: 15.5px; line-height: 1.75; word-break: keep-all; overflow-wrap: anywhere; }
.cm-c__body .sticker { width: 104px; height: 104px; }
.cm-c__act { display: flex; flex-wrap: wrap; gap: 2px 4px; margin: 6px 0 0 -8px; }
.cm-act { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--r); color: var(--ink-3); font-size: 13px; font-weight: 600; }
.cm-act:hover { background: var(--hover); color: var(--ink); }
.cm-act .i { width: 15px; height: 15px; }
.cm-act b { font-family: var(--font-en); font-weight: 700; }
.cm-c__gone { display: flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: 14px; }
.cm-c__gone .i { width: 16px; height: 16px; }
.cm-c.is-target { animation: cmFlash 1.6s ease-out; }
@keyframes cmFlash { from { background: color-mix(in srgb, var(--lime) 45%, transparent); } to { background: transparent; } }

.cm-cform-wrap { padding: 4px 38px 18px; border-bottom: 1px solid var(--line); }
.cm-cform { display: grid; gap: 10px; }
.cm-c .cm-cform { margin-top: 12px; }
.cm-side-board__desc { padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 13px; line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere; text-wrap: pretty; }
.cm-side-current { display: grid; gap: 6px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--lime) 18%, var(--panel)); box-shadow: inset 3px 0 0 var(--leaf); }
.cm-side-current__label { color: var(--accent-ink); font-size: 11.5px; font-weight: 800; }
.cm-side-current p { font-size: 14.5px; font-weight: 800; line-height: 1.55; word-break: keep-all; overflow-wrap: anywhere; }
.cm-side-current a { display: inline-flex; justify-self: start; align-items: center; gap: 5px; color: var(--ink-2); font-size: 12px; }
.cm-side-current a:hover { color: var(--accent-ink); }
.cm-side-current .i { width: 13px; height: 13px; }
.cm-side-caption { padding: 12px 16px 4px; color: var(--ink-3); font-size: 12px; font-weight: 700; }
.cm-side-list { padding-inline: 16px; }
.cm-side-list li + li { border-top: 1px solid var(--line); }
.cm-side-link { display: grid; gap: 6px; padding: 12px 0; }
.cm-side-link__title { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 14px; font-weight: 650; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
.cm-side-link:hover .cm-side-link__title { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.cm-side-link__meta { display: flex; flex-wrap: wrap; gap: 3px 10px; color: var(--ink-3); font-size: 11.5px; line-height: 1.5; }
.cm-side-link__meta time { font-family: var(--font-en); font-variant-numeric: tabular-nums; }
.cm-side-board__footer { padding: 12px 16px 16px; border-top: 1px solid var(--line); }
.cm-side-link--rank { grid-template-columns: 22px minmax(0, 1fr); gap: 10px; }
.cm-side-link__content { display: grid; gap: 6px; min-width: 0; }
.cm-side-rank { padding-top: 2px; color: var(--ink-3); font: 800 15px/1.4 var(--font-en); font-variant-numeric: tabular-nums; }
.cm-side-rank.is-top { color: var(--accent-ink); }
.cm-cform--guest { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border: 1px dashed var(--line-2); border-radius: var(--r); background: var(--panel-2); color: var(--ink-2); font-size: 14px; }
.cm-cform__ta { min-height: 92px; }
.cm-cform__reply { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 13.5px; font-weight: 600; }
.cm-cform__stk { display: flex; flex-wrap: wrap; gap: 8px; }
.cm-cform__stk .cm-stkchip { position: relative; display: inline-grid; place-items: center; width: 72px; height: 72px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--panel); }
.cm-cform__stk .cm-stkchip img { width: 60px; height: 60px; object-fit: contain; }
.cm-cform__stk .cm-stkchip button { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--navy); color: #fff; }
.cm-cform__stk .cm-stkchip .i { width: 13px; height: 13px; }
.cm-cform__ft { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cm-cform__pts { margin-left: auto; color: var(--ink-3); font-size: 12.5px; }
.cm-agree { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--line-2); border-top: 2px solid var(--rule); border-radius: var(--r); background: var(--panel-2); }
.cm-agree__t { font-size: 14px; font-weight: 800; letter-spacing: -.02em; }
.cm-agree ol { display: grid; gap: 3px; padding-left: 1.3em; list-style: decimal; color: var(--ink-2); font-size: 13.5px; line-height: 1.55; }
.cm-agree__all { justify-self: start; color: var(--accent-ink); font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.cm-flag { display: grid; gap: 10px; }
.cm-flag__opts { display: grid; gap: 6px; min-width: 0; margin: 4px 0 0; padding: 0; border: 0; }
.cm-flag__opts .radio { font-size: 14px; }
.cm-flag .textarea { min-height: 72px; }

/* 스티커 고르기 */
.cm-stk__status { color: var(--ink-2); font-size: 13.5px; }
.cm-stk__packs { margin-top: 12px; padding-bottom: 2px; }
.cm-stk__items { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; max-height: 50vh; margin-top: 12px; overflow-y: auto; }
.cm-stk__item { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--panel); color: var(--ink-2); font-size: 12px; cursor: pointer; }
.cm-stk__item:hover, .cm-stk__item:focus-visible { border-color: var(--ink-3); }
.cm-stk__item img { width: 64px; height: 64px; object-fit: contain; }
.cm-stk__item span { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* 볼 수 없는 글 · 조건 안내 · 제한 */
.cm-gone { display: grid; justify-items: center; gap: 10px; padding: 40px 24px; text-align: center; }
.cm-gone__board a { color: var(--accent-ink); font-size: 13.5px; font-weight: 700; }
.cm-gone__t { font-size: 21px; font-weight: 800; letter-spacing: -.035em; text-wrap: balance; }
.cm-gone__msg { max-width: 34em; color: var(--ink-2); font-size: 15px; line-height: 1.65; text-wrap: pretty; }
.cm-gone .btn-row { justify-content: center; margin-top: 6px; }
.cm-locked { display: flex; align-items: flex-start; gap: 22px; padding: 24px 22px; }
.cm-locked .cm-spot { flex: none; width: 150px; height: 150px; }
.cm-locked__text { display: grid; gap: 12px; min-width: 0; }
.cm-locked__text h2 { font-size: 18px; font-weight: 800; line-height: 1.45; letter-spacing: -.03em; text-wrap: balance; }
.cm-locked__text p { color: var(--ink-2); font-size: 14.5px; line-height: 1.65; text-wrap: pretty; }
.cm-locked__kv { max-width: 420px; }
.cm-locked__kv dd { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }

/* ---------- 작성 ---------- */
.cm-wform { display: grid; gap: 20px; }
.cm-boards { display: grid; gap: 8px; }
.cm-boards__list { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-bopt { position: relative; display: inline-flex; flex-direction: column; justify-content: center; min-height: 40px; padding: 6px 13px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--panel); color: var(--ink-2); font-size: 14.5px; font-weight: 700; cursor: pointer; transition: border-color .15s, background .15s; }
.cm-bopt input { position: absolute; opacity: 0; pointer-events: none; }
.cm-bopt__n { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.cm-bopt__n .i { width: 14px; height: 14px; }
.cm-bopt__why { color: var(--ink-3); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.cm-bopt:hover { border-color: var(--ink-3); }
.cm-bopt:has(input:checked) { border-color: var(--btn); background: var(--btn); color: #fff; }
.cm-bopt:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.cm-bopt.is-off { border-style: dashed; background: var(--panel-2); color: var(--ink-3); opacity: .72; cursor: not-allowed; }
.cm-bopt.is-off:hover { border-color: var(--line-2); }
.cm-editor { position: relative; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--field); }
.cm-editor:focus-within { border-color: var(--ink-2); box-shadow: 0 0 0 3px #caf88780; }
.cm-editor.is-blocked { border-color: var(--err); }
.cm-editor__bar { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; border-bottom: 1px solid var(--line); background: var(--panel-2); border-radius: var(--r) var(--r) 0 0; }
.cm-tool { display: inline-grid; place-items: center; min-width: 36px; height: 34px; padding: 0 8px; border-radius: var(--r-sm); color: var(--ink-2); font-size: 15px; }
.cm-tool:hover { background: var(--hover); color: var(--ink); }
.cm-tool[aria-pressed="true"] { background: var(--chip); color: var(--ink); }
.cm-tool .i { width: 18px; height: 18px; }
.cm-tool__num { font: 800 14px/1 var(--font-en); }
.cm-tool--text { display: inline-flex; gap: 4px; font-size: 13.5px; font-weight: 700; }
.cm-editor__area { min-height: 280px; max-height: 70vh; overflow-y: auto; padding: 14px 16px; outline: none; }
.cm-editor__area:empty::before { content: attr(data-placeholder); color: #737a89; pointer-events: none; }
.cm-editor__area img { max-width: 100%; }
.cm-editor__area img.is-uploading { opacity: .5; }
.cm-editor__plain { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; resize: none; border: 0; padding: 0; }
.cm-editor__count { position: absolute; right: 10px; bottom: 6px; color: var(--ink-3); font: 600 11.5px var(--font-en); pointer-events: none; }
::highlight(cm-fb) { background-color: var(--err-bg); color: var(--err); text-decoration: underline wavy var(--err); }
.cm-fbout:empty { display: none; }
.cm-attach__row { display: flex; flex-wrap: wrap; gap: 8px; }
.cm-attach__row .input { flex: 1 1 220px; }
.cm-attach .filelist { margin-top: 8px; }
.cm-guide { padding: 14px 16px; border: 1px solid var(--line-2); border-top: 2px solid var(--rule); background: var(--panel); }
.cm-guide h2 { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.cm-guide h2 .i { width: 17px; height: 17px; color: var(--accent-ink); }
.cm-guide ol { display: grid; gap: 4px; margin-top: 8px; padding-left: 1.3em; list-style: decimal; color: var(--ink-2); font-size: 14px; line-height: 1.6; }
.cm-draft { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--info-bg); font-size: 14px; }
.cm-draft > .i { width: 17px; height: 17px; color: var(--ink-2); }
.cm-draft p { flex: 1 1 200px; }
.cm-wform__ft { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.cm-wform__sp { flex: 1; }
.cm-pts { color: var(--ink-2); font-size: 13.5px; }
.cm-pts b { color: var(--accent-ink); font-family: var(--font-en); }
.cm-quote { padding: 10px 14px; border-left: 3px solid var(--line-2); color: var(--ink-2); font-size: 14.5px; line-height: 1.65; overflow-wrap: anywhere; }
.cm-reqform { display: grid; gap: 16px; }

/* ---------- S17 커뮤니티 원칙 · 레벨 안내 ---------- */
.cm-gme { display: grid; gap: 12px; width: 380px; max-width: 100%; padding: 18px 22px 20px; border-top: 2px solid var(--lime); border-radius: var(--r); background: var(--navy); color: #fff; }
:root[data-theme="dark"] .cm-gme { border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); border-left: 1px solid var(--line-2); background: #0b111d; }
.cm-gme__t { display: flex; align-items: center; gap: 8px; color: #a3abba; font-size: 12.5px; font-weight: 700; }
.cm-gme__t a { display: inline-flex; align-items: center; margin-left: auto; color: var(--lime); }
.cm-gme__t .i { width: 14px; height: 14px; }
.cm-gme__w { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 17px; font-weight: 800; }
.cm-gme__w b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-gme__w small { color: #b3bac7; font-size: 13px; font-weight: 600; }
.cm-gme__bar { height: 8px; overflow: hidden; border-radius: 4px; background: #243049; }
.cm-gme__bar i { display: block; height: 100%; border-radius: 4px; background: var(--lime); }
.cm-gme__m { font-size: 13.5px; font-weight: 600; line-height: 1.55; }
.cm-gme__m b { color: var(--lime); }
.page-hd__row:has(.cm-gme) { flex-wrap: nowrap; gap: 12px 48px; }
.page-hd__row:has(.cm-gme) .page-hd__text { flex: 1 1 0; }
.page-hd__row:has(.cm-gme) .page-hd__actions { flex: none; }
.cm-gtabs { margin-bottom: 0; }
.cm-gtabs__ver { margin-left: auto; align-self: center; color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }
.cm-gp { display: grid; gap: 44px; margin-top: 28px; }
.cm-gsec { scroll-margin-top: 176px; }
.cm-gsec__t { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 10px; margin-bottom: 16px; font-size: 24px; font-weight: 800; letter-spacing: -.045em; }
.cm-gsec__t i { align-self: center; width: 9px; height: 9px; background: var(--bar); transform: rotate(45deg); }
.cm-gsec__t i.is-warn { background: var(--err); }
.cm-gsec__t small { padding-bottom: 3px; color: var(--ink-3); font-size: 13.5px; font-weight: 500; letter-spacing: 0; }
.cm-gsec__t--sub { margin: 32px 0 12px; font-size: 20px; }
.cm-gnote { max-width: 900px; margin-top: 14px; color: var(--ink-3); font-size: 13.5px; line-height: 1.7; word-break: keep-all; overflow-wrap: anywhere; text-wrap: pretty; }
.cm-rule1 { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 24px; align-items: start; padding: 30px 34px 32px; border-top: 2px solid var(--lime); border-radius: var(--r); background: var(--navy); color: #fff; }
:root[data-theme="dark"] .cm-rule1 { border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); border-left: 1px solid var(--line-2); background: #0b111d; }
.cm-rule1__n { grid-row: 1 / span 2; display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--r); background: var(--lime); color: var(--navy); font: 800 30px/1 var(--font-en); }
.cm-rule1 h3 { font-size: 24px; font-weight: 800; line-height: 1.4; letter-spacing: -.045em; word-break: keep-all; }
.cm-rule1 p { max-width: 820px; margin-top: 10px; color: #c5ccd9; font-size: 15px; line-height: 1.8; word-break: keep-all; overflow-wrap: anywhere; text-wrap: pretty; }
.cm-rule1 p a { color: var(--lime); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
ol.cm-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
ol.cm-rules li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 20px 24px; border: 1px solid var(--line-2); border-top: 2px solid var(--rule); border-radius: var(--r); background: var(--panel); }
ol.cm-rules .cm-rules__n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r); background: var(--chip); font: 800 19px/1 var(--font-en); }
ol.cm-rules h3 { font-size: 17px; font-weight: 800; line-height: 1.5; letter-spacing: -.035em; word-break: keep-all; overflow-wrap: anywhere; }
.cm-stairs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: end; }
.cm-stairs__i { display: grid; min-width: 0; }
.cm-stairs__tx { display: grid; align-content: start; gap: 6px; min-height: 100px; padding: 20px 22px 22px; border: 1px solid var(--line-2); border-top: 2px solid var(--rule); border-bottom: 0; border-radius: var(--r) var(--r) 0 0; background: var(--panel); }
.cm-stairs__tx h3 { font-size: 18px; font-weight: 800; letter-spacing: -.04em; }
.cm-stairs__tx p { color: var(--ink-2); font-size: 14px; line-height: 1.65; word-break: keep-all; overflow-wrap: anywhere; text-wrap: pretty; }
.cm-stairs__bar { padding: 9px 22px; color: var(--lime); font-size: 14px; font-weight: 800; line-height: 1.25; }
.cm-stairs__i--1 .cm-stairs__bar { height: 30px; background: #3a4660; }
.cm-stairs__i--2 .cm-stairs__bar { height: 54px; background: #2c3953; }
.cm-stairs__i--3 .cm-stairs__bar { height: 78px; background: #1d2840; }
.cm-stairs__i--4 .cm-stairs__bar { height: 102px; background: var(--navy); }
:root[data-theme="dark"] .cm-stairs__i--4 .cm-stairs__bar { background: #0b111d; }
.cm-lvs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.cm-lvs__c { position: relative; display: grid; align-content: start; justify-items: start; gap: 4px; padding: 20px 18px; border: 1px solid var(--line-2); border-top: 2px solid var(--rule); border-radius: var(--r); background: var(--panel); }
.cm-lvs__c img { width: 60px; height: 60px; margin-bottom: 8px; }
.cm-lvs__n { margin-top: 8px; font-size: 18px; font-weight: 800; letter-spacing: -.03em; }
.cm-lvs__p { margin-top: 10px; font: 800 26px/1.2 var(--font-en); }
.cm-lvs__p small { margin-left: 2px; color: var(--ink-3); font: 700 13px/1 var(--font); }
.cm-lvs__d { color: var(--ink-3); font-size: 13px; font-weight: 600; }
.cm-lvs__f { width: 100%; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere; text-wrap: pretty; }
.cm-lvs__c.is-me { border-color: color-mix(in srgb, var(--lime) 60%, var(--line-2)); border-top-color: var(--bar); background: color-mix(in srgb, var(--lime) 18%, var(--panel)); }
.cm-lvs__me { position: absolute; top: -1px; right: -1px; padding: 4px 8px; border-radius: 0 3px 0 3px; background: var(--lime); color: var(--navy); font-size: 11px; font-weight: 800; }
.cm-lvs__c.is-top { border-color: var(--navy); border-top-color: var(--lime); background: var(--navy); color: #fff; }
.cm-lvs__c.is-top .cm-lvs__d, .cm-lvs__c.is-top .cm-lvs__p small { color: #a3abba; }
.cm-lvs__c.is-top .cm-lvs__f { border-top-color: #2c3953; color: #c5ccd9; }
:root[data-theme="dark"] .cm-lvs__c.is-top { border-color: var(--line-2); border-top-color: var(--lime); background: #0b111d; }
.cm-ptable__th, .cm-ptable__r { display: grid; grid-template-columns: 170px 90px 190px minmax(0, 1fr); gap: 0 20px; align-items: center; padding: 0 24px; }
.cm-ptable__th { height: 36px; border-bottom: 1px solid var(--line); background: var(--panel-2); color: var(--ink-3); font-size: 12px; font-weight: 700; }
.cm-ptable__r { min-height: 58px; padding-block: 12px; border-bottom: 1px solid var(--line); }
.cm-ptable__r:last-child { border-bottom: 0; }
.cm-ptable__r h3 { font-size: 15px; font-weight: 800; }
.cm-ptable__p { color: var(--count); font: 800 20px/1 var(--font-en); }
.cm-ptable__c { font-size: 14.5px; font-weight: 600; }
.cm-ptable__n { color: var(--ink-2); font-size: 14.5px; line-height: 1.65; word-break: keep-all; overflow-wrap: anywhere; text-wrap: pretty; }
.cm-revs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cm-revs__c { display: grid; gap: 8px; padding: 20px 24px 22px; border: 1px solid var(--line-2); border-top: 2px solid var(--err); border-radius: var(--r); background: var(--panel); }
.cm-revs__h { display: flex; align-items: center; gap: 10px; }
.cm-revs__h h4 { font-size: 16.5px; font-weight: 800; }
.cm-revs__h span { margin-left: auto; color: var(--err); font-size: 14px; font-weight: 800; text-align: right; }
.cm-revs__h span.num { font-size: 20px; }
.cm-revs__c p { color: var(--ink-2); font-size: 14px; line-height: 1.7; word-break: keep-all; overflow-wrap: anywhere; text-wrap: pretty; }
.cm-bullets { display: grid; gap: 8px; padding-left: 32px !important; list-style: disc; color: var(--ink-2); font-size: 14px; line-height: 1.6; text-wrap: pretty; }

/* ---------- S18 ---------- */
.cm-rankpage { margin-top: 16px; }
.cm-mine { border-top-color: var(--lime); }
.cm-mine__in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 16px 18px; }
.cm-mine__who { flex: none; font-size: 16px; }
.cm-mine__stats { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-left: auto; }
.cm-mine__stats dt { color: var(--ink-3); font-size: 12.5px; }
.cm-mine__stats dd { font: 800 22px/1.25 var(--font-en); font-variant-numeric: tabular-nums; }
.cm-mine__stats small { margin-left: 2px; color: var(--ink-3); font: 600 12.5px var(--font); }
.cm-mine__msg { flex-basis: 100%; color: var(--ink-2); font-size: 13.5px; }
.cm-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 16px; border-bottom: 1px solid var(--line); }
.cm-podium__i { display: grid; justify-items: center; align-content: start; gap: 6px; padding: 16px 10px 14px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--panel-2); text-align: center; min-width: 0; }
.cm-podium__i--1 { order: 2; border-color: var(--navy); box-shadow: inset 0 3px 0 var(--lime); }
.cm-podium__i--2 { order: 1; margin-top: 14px; }
.cm-podium__i--3 { order: 3; margin-top: 22px; }
.cm-podium__rk { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r); background: var(--chip); font: 800 15px/1 var(--font-en); }
.cm-podium__i--1 .cm-podium__rk { background: var(--lime); color: var(--navy); }
.cm-podium__i .nick { justify-content: center; }
.cm-podium__pt { font: 800 20px/1.2 var(--font-en); }
.cm-podium__sub { color: var(--ink-3); font-size: 12px; line-height: 1.45; text-wrap: balance; }
.cm-ranklist .row { min-height: 46px; }
.cm-ranklist__who { flex: 1; min-width: 0; }
.cm-ranklist__meta { font-size: 12.5px; }
.cm-ranklist__pt { flex: none; width: 64px; font: 800 14.5px/1 var(--font-en); text-align: right; }

/* ---------- 마이페이지 부품 ---------- */
/* 마이페이지 내 활동: 이번 주 막대 · 이번 달 · 날짜별 포인트 내역 · 내 글·댓글 */
.cm-my__pair { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: stretch; }
.cm-my__pair--rows { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.cm-week .panel__body { display: grid; gap: 10px; }
.cm-week__bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.cm-week__bars li { display: grid; grid-template-rows: 18px 110px auto; justify-items: center; gap: 6px; min-width: 0; }
.cm-week__bars b { align-self: end; color: var(--ink-3); font: 800 12.5px/1 var(--font-en); }
.cm-week__col { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 100%; border-bottom: 1px solid var(--line-2); }
.cm-week__col i { display: block; width: 100%; max-width: 38px; height: var(--h); min-height: 3px; border-radius: 3px 3px 0 0; background: color-mix(in srgb, var(--bar) 55%, var(--panel)); }
.cm-week__day { color: var(--ink-3); font-size: 12.5px; }
.cm-week__bars li.is-today b, .cm-week__bars li.is-today .cm-week__day { color: var(--ink); font-weight: 800; }
.cm-week__bars li.is-today .cm-week__col i { background: var(--rule); }
.cm-week__bars li.is-minus .cm-week__col i { background: var(--err); }
.cm-week__bars li.is-future .cm-week__col i { visibility: hidden; }
.cm-month__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.cm-month__stats > div { padding: 10px 12px; background: var(--panel-2); }
.cm-month__stats dt { color: var(--ink-3); font-size: 12.5px; }
.cm-month__stats dd { font: 800 24px/1.25 var(--font-en); font-variant-numeric: tabular-nums; }
.cm-my__rank { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.cm-my__rank > div { flex: 1 1 auto; min-width: 0; }
.cm-my__rank-t { margin: 0; font-size: 14px; font-weight: 800; }
.cm-my__rank-b { margin: 2px 0 0; color: var(--ink-3); font-size: 12.5px; text-wrap: pretty; word-break: keep-all; }
.cm-my__note { margin: 0; color: var(--ink-3); font-size: 13px; text-wrap: pretty; word-break: keep-all; }

.cm-day__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; padding: 14px 16px 6px; color: var(--ink-3); font-size: 12.5px; }
.cm-day__hd b { color: var(--ink); }
.cm-ledger { margin: 0; padding: 0 8px; list-style: none; }
.cm-ledger__row { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 8px; border-bottom: 1px solid var(--line); }
.cm-ledger__row:last-child { border-bottom: 0; }
.cm-ledger__ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--chip); color: var(--ink-2); }
.cm-ledger__ic .i { width: 16px; height: 16px; }
.cm-ledger__row.is-post .cm-ledger__ic { background: color-mix(in srgb, var(--bar) 18%, var(--panel)); color: var(--accent-ink); }
.cm-ledger__row.is-hot .cm-ledger__ic { background: var(--navy); color: var(--lime); }
.cm-ledger__row.is-minus .cm-ledger__ic { background: var(--err-bg); color: var(--err); }
.cm-ledger__t { flex: 1 1 auto; min-width: 0; font-size: 14.5px; word-break: keep-all; overflow-wrap: anywhere; }
a.cm-ledger__t:hover { text-decoration: underline; text-underline-offset: 3px; }
.cm-ledger__row.is-post .cm-ledger__t, .cm-ledger__row.is-hot .cm-ledger__t { font-weight: 800; }
.cm-ledger time { flex: none; color: var(--ink-3); font: 12.5px/1 var(--font-en); }
.cm-delta { flex: none; min-width: 44px; color: var(--count); font: 800 14.5px/1 var(--font-en); text-align: right; }
.cm-delta.is-minus { color: var(--err); }
.cm-delta.is-zero { color: var(--ink-3); }

.cm-mylist { margin: 0; padding: 0 0 6px; list-style: none; }
.cm-mylist li + li { border-top: 1px solid var(--line); }
.cm-mylist a { display: grid; gap: 6px; padding: 12px 16px; color: var(--ink); }
.cm-mylist a:hover { background: var(--hover); }
.cm-mylist__t { font-size: 15px; font-weight: 700; line-height: 1.45; word-break: keep-all; overflow-wrap: anywhere; }
.cm-mylist__t .cmt { color: var(--count); font: 800 14px var(--font-en); }
.cm-mylist__b { font-size: 14.5px; line-height: 1.55; text-wrap: pretty; word-break: keep-all; overflow-wrap: anywhere; }
.cm-mylist__m { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: var(--ink-3); font-size: 12.5px; }
.cm-mylist__m .i { width: 13px; height: 13px; margin-right: 3px; vertical-align: -2px; }
.cm-mylist__m time { margin-left: auto; font-family: var(--font-en); }
.cm-mylist__board { padding: 2px 7px; border-radius: var(--r-sm); background: var(--chip); color: var(--ink-2); font-weight: 700; }
.cm-mylist__on { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-mylist__m:has(.cm-mylist__on) { flex-wrap: nowrap; }
.cm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r); }
.cm-stats > div { padding: 10px 8px; text-align: center; }
.cm-stats > div + div { border-left: 1px solid var(--line); }
.cm-stats dt { color: var(--ink-3); font-size: 12px; }
.cm-stats dd { font: 800 19px/1.3 var(--font-en); font-variant-numeric: tabular-nums; }
.cm-stats small { margin-left: 1px; color: var(--ink-3); font: 600 12px var(--font); }
.cm-req__list { display: grid; }
.cm-req__item { display: grid; gap: 6px; padding: 14px 16px; }
.cm-req__item + .cm-req__item { border-top: 1px solid var(--line); }
.cm-req__hd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14.5px; }
.cm-req__target { min-width: 0; color: var(--ink-2); font-size: 13.5px; }
.cm-req__target a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.cm-req__hd time { margin-left: auto; color: var(--ink-3); font: 600 12px var(--font-en); }
.cm-req__reason { color: var(--ink-2); font-size: 13.5px; overflow-wrap: anywhere; }
.cm-req__result { display: flex; gap: 6px; padding: 8px 10px; border-radius: var(--r); background: var(--panel-2); font-size: 13.5px; line-height: 1.55; }
.cm-req__result .i { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--accent-ink); }
.cm-req__result.is-wait .i { color: var(--ink-3); }

/* ---------- 반응형 ---------- */
@media (max-width: 480px) {
  .cm-search .input-group { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .cm-search .select { grid-column: 1 / -1; width: 100%; }
  .cm-search .input { width: 100%; }
}
@media (max-width: 768px) {
  .cm-head { margin-bottom: 8px; }
  .cm-board__hd { padding-block: 10px; }
  .cm-sort { margin-left: 0; }
  .cm-search .input-group { max-width: none; }
  .cm-board__hd h2 { flex: 1 0 auto; }
  .cm-sort { flex-basis: 100%; justify-content: stretch; }
  .cm-sort a { flex: 1; justify-content: center; }
  /* 한 줄 목록 → 두 줄(제목 / 게시판·닉네임·공감·날짜) */
  .cm-rows .row, .cm-pinned .row, .cm-fill .row, .cm-mrows .row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "t t t" "b m d"; gap: 6px 8px; padding-block: 10px; }
  .cm-rows .row .ttl, .cm-pinned .row .ttl, .cm-fill .row .ttl, .cm-mrows .row .ttl { grid-area: t; }
  .cm-rows .row__board, .cm-pinned .row__k, .cm-fill .row__k, .cm-mrows .row__board { grid-area: b; width: auto; justify-self: start; }
  .cm-rows .row__meta, .cm-pinned .row__meta, .cm-fill .row__meta, .cm-mrows .row__meta { grid-area: m; min-width: 0; overflow: hidden; max-width: none; }
  .cm-rows .row time, .cm-pinned .row time, .cm-fill .row time, .cm-mrows .row time { grid-area: d; }
  .cm-pop .row { display: grid; grid-template-columns: 24px auto minmax(0, 1fr); grid-template-areas: "r t t" "r b m"; gap: 4px 8px; padding-block: 8px; }
  .cm-pop .row .rank { grid-area: r; align-self: start; }
  .cm-pop .row .ttl { grid-area: t; }
  .cm-pop .row .row__board { grid-area: b; width: auto; }
  .cm-pop .row .row__meta { grid-area: m; min-width: 0; overflow: hidden; }
  .cm-crumbs { margin-bottom: 10px; }
  .cm-post__hd { padding: 20px 16px 16px; }
  .cm-post__notice { padding-inline: 16px; }
  .cm-body { padding: 4px 16px 24px; font-size: 16px; line-height: 1.85; }
  .cm-post__title { margin: 10px 0 16px; font-size: 23px; }
  .cm-post__meta { padding-top: 14px; }
  .cm-post__meta--author { grid-template-columns: 48px minmax(0, 1fr); gap: 10px 12px; }
  .cm-post__meta > .cm-av { width: 48px; height: 48px; font-size: 20px; }
  .cm-post__stats { grid-column: 2; width: 100%; gap: 14px; margin: 0; }
  .cm-files { margin: 0 16px 22px; }
  .cm-file { flex-wrap: wrap; gap: 12px 14px; }
  .cm-file .btn { width: 100%; }
  .cm-post__act { padding: 14px 16px; }
  .cm-like, .cm-share { flex: 1; }
  .cm-post__act-sp { display: none; }
  .cm-post__act > .btn--text, .cm-post__act > .badge { width: 100%; justify-content: center; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }
  .cm-post__mine { padding-inline: 16px; }
  .cm-pn a { padding-inline: 16px; }
  .cm-pn time { display: none; }
  .cm-comments .panel__hd { padding: 16px 16px 12px; }
  .cm-clist { padding-inline: 16px; }
  .cm-c { grid-template-columns: 40px minmax(0, 1fr); gap: 0 12px; padding: 18px 0; }
  .cm-c > .cm-av { width: 40px; height: 40px; font-size: 16px; }
  .cm-c__hd { min-height: 40px; }
  .cm-clist--replies { grid-column: 1 / -1; margin-left: 14px; padding-left: 12px; }
  .cm-cform-wrap { padding-inline: 16px; }
  .cm-locked { flex-direction: column; align-items: center; text-align: center; }
  .cm-locked__kv { justify-self: stretch; max-width: none; text-align: left; }
  .cm-wform__ft .btn--lg { flex: 1 1 100%; }
  .cm-podium { grid-template-columns: minmax(0, 1fr); }
  .cm-podium__i { grid-template-columns: auto minmax(0, 1fr) auto; justify-items: start; align-items: center; margin-top: 0 !important; padding: 10px 12px; text-align: left; }
  .cm-podium__i--1 { order: 1; } .cm-podium__i--2 { order: 2; } .cm-podium__i--3 { order: 3; }
  .cm-podium__sub { grid-column: 2 / -1; }
  .cm-ranklist .row { flex-wrap: wrap; }
  .cm-ranklist__meta { order: 3; flex-basis: 100%; padding-left: 34px; }
  .cm-mine__stats { margin-left: 0; }
  .cm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cm-stats > div:nth-child(3) { border-left: 0; }
  .cm-stats > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 1023px) {
  .cm-my__pair, .cm-my__pair--rows { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .cm-week__bars { gap: 6px; }
  .cm-week__bars li { grid-template-rows: 16px 90px auto; }
  .cm-month__stats > div { padding: 8px 10px; }
  .cm-month__stats dd { font-size: 21px; }
}
@media (max-width: 420px) {
  .cm-lockline { flex-wrap: wrap; }
}

/* S17 반응형 */
@media (max-width: 1023px) {
  .page-hd__row:has(.cm-gme) { flex-wrap: wrap; }
  .page-hd__row:has(.cm-gme) .page-hd__text, .page-hd__row:has(.cm-gme) .page-hd__actions { flex: 1 1 100%; }
  .cm-stairs { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .cm-stairs__tx { flex: 1; }
  .cm-lvs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cm-ptable__th, .cm-ptable__r { grid-template-columns: 130px 70px 150px minmax(0, 1fr); gap: 0 14px; padding-inline: 18px; }
}
@media (max-width: 768px) {
  .cm-gme { width: 100%; }
  .cm-gp { gap: 36px; margin-top: 20px; }
  .cm-gsec__t { font-size: 21px; }
  .cm-gsec__t--sub { font-size: 18px; margin-top: 28px; }
  .cm-gtabs__ver { display: none; }
  .cm-rule1 { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 22px 20px 24px; }
  .cm-rule1__n { grid-row: auto; width: 44px; height: 44px; font-size: 22px; }
  .cm-rule1 h3 { font-size: 19px; }
  .cm-rule1 p { grid-column: 1 / -1; margin-top: 14px; font-size: 14.5px; }
  ol.cm-rules { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  ol.cm-rules li { grid-template-columns: 38px minmax(0, 1fr); padding: 16px 18px; }
  ol.cm-rules .cm-rules__n { width: 38px; height: 38px; font-size: 17px; }
  ol.cm-rules h3 { font-size: 15.5px; }
  .cm-stairs { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cm-stairs__i { grid-template-columns: minmax(0, 1fr) 92px; }
  .cm-stairs__tx { min-height: 0; padding: 16px 18px; border: 1px solid var(--line-2); border-right: 0; border-radius: var(--r) 0 0 var(--r); }
  .cm-stairs__bar { display: flex; align-items: center; justify-content: center; height: auto !important; padding: 0; border-radius: 0 var(--r) var(--r) 0; }
  .cm-lvs { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cm-lvs__c { grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 2px 16px; padding: 16px 18px; }
  .cm-lvs__c img { grid-row: 1 / span 4; width: 56px; height: 56px; margin: 0; }
  .cm-lvs__n { margin-top: 0; }
  .cm-lvs__p { margin-top: 2px; font-size: 20px; }
  .cm-lvs__f { grid-column: 1 / -1; margin-top: 10px; }
  .cm-ptable__th { display: none; }
  .cm-ptable__r { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 14px 18px; }
  .cm-ptable__c, .cm-ptable__n { grid-column: 1 / -1; }
  .cm-ptable__p { grid-column: 2; grid-row: 1; }
  .cm-revs { grid-template-columns: minmax(0, 1fr); }
}