/* ==========================================================================
   커뮤니티 — easyclass 토큰(라벤더 바탕 · 흰 카드 · 주황은 행동 단추에만 · 파스텔 칩 · 11px 대문자 라벨)
   데스크톱: 왼쪽 탐색 · 가운데 피드 · 오른쪽 레일 / 모바일(≤860): 앱 바 · 이야기 고리 · 가장자리까지 카드 · 떠 있는 글쓰기 · 아래 시트
   ========================================================================== */
.cm, .cm-sheet, .cm-toast, .cm-embed, .cm-embed-pf, .cm-follow {
  --cm-ink: var(--c-text, #16161f); --cm-ink2: #3a3c4c; --cm-mut: var(--c-muted, #8a90a2); --cm-line: rgba(22, 22, 31, .08); --cm-line2: rgba(22, 22, 31, .13);
  --cm-bg: #F4F4F9; --cm-lav: #EDEDF5; --cm-card: #fff; --cm-ac: var(--c-accent, #F97316); --cm-acs: #FFF1E6; --cm-acd: #C2410C; --cm-heart: #FF3B5C;
  --cm-r: 22px; --cm-r2: 16px; --cm-r3: 12px;
  --cm-sh: 0 1px 2px rgba(22, 22, 31, .04), 0 8px 24px -6px rgba(22, 22, 31, .08); --cm-sh2: 0 30px 70px -20px rgba(22, 22, 31, .35);
  --cm-ease: cubic-bezier(.2, .8, .2, 1); --cm-spring: cubic-bezier(.34, 1.56, .64, 1);
  --cm-top: 0px; --cm-safe: env(safe-area-inset-bottom, 0px);
}
body.cm-body { background: var(--cm-bg, #F4F4F9); }
body.cm-body .site-main, body.cm-body #en-main { background: transparent; }
.cm *, .cm-sheet * { box-sizing: border-box; }
.cm a { color: inherit; }
.cm-i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cm-grow { flex: 1; }
.cm-eyebrow { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--cm-mut); }
[hidden] { display: none !important; }

/* 파스텔 */
.t-blue { --tn: #D9E8F5; --tk: #1d4ed8; } .t-purple { --tn: #E4D6F7; --tk: #6d28d9; } .t-pink { --tn: #F9D2DA; --tk: #be185d; }
.t-mint { --tn: #D8F3E3; --tk: #047857; } .t-yellow { --tn: #FCF0D4; --tk: #a16207; } .t-peach { --tn: #FEEBDC; --tk: #c2410c; }

/* ── 셸 ─────────────────────────────────────────────────────────────── */
.cm { display: grid; grid-template-columns: 236px minmax(0, 1fr) 316px; gap: 28px; max-width: 1260px; margin: 0 auto; padding: 24px 24px 96px; color: var(--cm-ink); font-size: 15px; line-height: 1.55; letter-spacing: -.01em; }
.cm--norail { grid-template-columns: 236px minmax(0, 1fr); }
.cm-main { min-width: 0; width: 100%; max-width: 640px; justify-self: center; }
.cm--norail .cm-main { max-width: 935px; }
.cm--wide .cm-main { max-width: none; }
.cm-side, .cm-rail { position: relative; }
.cm-side-in { position: sticky; top: calc(var(--cm-top) + 20px); max-height: calc(100vh - var(--cm-top) - 40px); overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
.cm-side-in::-webkit-scrollbar { display: none; }
.cm-rail-in { display: flex; flex-direction: column; gap: 14px; padding-bottom: 20px; }
.cm-appbar, .cm-fab { display: none; }

/* 왼쪽 탐색 */
.cm-brand { display: flex; align-items: center; gap: 12px; padding: 4px 10px 18px; text-decoration: none; }
.cm-brand-mark { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #FF9A3C 0%, #F97316 45%, #E1306C 100%); box-shadow: 0 10px 22px -10px rgba(249, 115, 22, .8); }
.cm-brand-mark .cm-i { width: 22px; height: 22px; }
.cm-brand b { display: block; font-size: 19px; letter-spacing: -.6px; line-height: 1.2; }
.cm-nav { display: flex; flex-direction: column; gap: 2px; }
.cm-nav-i { display: flex; align-items: center; gap: 14px; height: 46px; padding: 0 12px; border-radius: 14px; text-decoration: none; font-weight: 600; color: var(--cm-ink2); transition: background .15s, color .15s, transform .15s var(--cm-ease); }
.cm-nav-i:hover { background: rgba(255, 255, 255, .75); color: var(--cm-ink); }
.cm-nav-i:active { transform: scale(.98); }
.cm-nav-i.is-on { background: #fff; color: var(--cm-ink); font-weight: 800; box-shadow: var(--cm-sh); }
.cm-nav-ic { width: 26px; display: grid; place-items: center; }
.cm-nav-i.is-on .cm-i { stroke-width: 2.3; }
.cm-side-write { margin: 16px 0 8px; }
.cm-boards { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.cm-boards-g .cm-eyebrow { padding: 0 12px 6px; }
.cm-boards-b, .cm-dl-b { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 10px; border-radius: 12px; text-decoration: none; font-size: 14px; font-weight: 600; color: var(--cm-ink2); transition: background .15s; }
.cm-boards-b:hover { background: rgba(255, 255, 255, .7); }
.cm-boards-b.is-on, .cm-dl-b.is-on { background: #fff; color: var(--cm-ink); box-shadow: var(--cm-sh); }
.cm-nb-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.cm-lock { width: 13px; height: 13px; color: var(--cm-mut); }
.cm-new { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--cm-ac); color: #fff; font: 800 11px/20px system-ui, sans-serif; font-style: normal; text-align: center; }
.cm-side-adm { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; padding: 10px 12px; border-radius: 12px; font-size: 13px; font-weight: 700; color: var(--cm-mut); text-decoration: none; }
.cm-side-adm:hover { background: rgba(255, 255, 255, .7); color: var(--cm-ink); }
.cm-side-adm .cm-i { width: 17px; height: 17px; }

/* 게시판 아이콘 */
.cm-bi { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--tn, #EDEDF5); color: var(--tk, var(--cm-ink)); font-size: 16px; line-height: 1; }
.cm-bi .cm-i { width: 17px; height: 17px; stroke-width: 2; }
.cm-bi--xs { width: 24px; height: 24px; border-radius: 8px; } .cm-bi--xs .cm-i { width: 14px; height: 14px; }
.cm-bi--lg { width: 52px; height: 52px; border-radius: 17px; } .cm-bi--lg .cm-i { width: 26px; height: 26px; }
.cm-bi--xl { width: 68px; height: 68px; border-radius: 22px; font-size: 32px; } .cm-bi--xl .cm-i { width: 32px; height: 32px; stroke-width: 1.8; }
.cm-bi--story { width: 100%; height: 100%; border-radius: 50%; } .cm-bi--story .cm-i { width: 26px; height: 26px; }

/* 단추 */
.cm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border: 0; border-radius: 99px; font: inherit; font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; cursor: pointer; text-decoration: none; white-space: nowrap; position: relative; overflow: hidden; transition: transform .18s var(--cm-ease), box-shadow .2s, background .15s, opacity .15s; -webkit-tap-highlight-color: transparent; }
.cm-btn:active { transform: scale(.96); }
.cm-btn .cm-i { width: 18px; height: 18px; stroke-width: 2.2; }
.cm-btn--ac { background: var(--cm-ac); color: #fff !important; box-shadow: 0 10px 24px -12px rgba(249, 115, 22, .9); }
.cm-btn--ac:hover { box-shadow: 0 16px 30px -12px rgba(249, 115, 22, .9); transform: translateY(-1px); }
.cm-btn--ac:disabled { opacity: .45; cursor: default; transform: none; box-shadow: none; }
.cm-btn--soft { background: #fff; color: var(--cm-ink); box-shadow: inset 0 0 0 1px var(--cm-line2); }
.cm-btn--soft:hover { background: #f7f7fb; }
.cm-btn--soft.is-danger { color: #dc2626; }
.cm-btn--ghost { background: rgba(255, 255, 255, .7); color: var(--cm-ink); backdrop-filter: blur(8px); }
.cm-btn--block { width: 100%; }
.cm-btn--sm { height: 36px; padding: 0 14px; font-size: 13.5px; }
.cm-btn--icon { width: 44px; padding: 0; }
.cm-prog { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: rgba(255, 255, 255, .85); transition: width .2s; }
.cm-txtbtn { border: 0; background: none; padding: 6px 8px; font: inherit; font-size: 14px; font-weight: 700; color: var(--cm-ink2); cursor: pointer; border-radius: 8px; }
.cm-txtbtn.is-ac { color: var(--cm-ac); }
.cm-ib { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: var(--cm-ink); cursor: pointer; text-decoration: none; transition: background .15s, transform .15s; -webkit-tap-highlight-color: transparent; flex: none; }
.cm-ib:hover { background: rgba(22, 22, 31, .05); }
.cm-ib:active { transform: scale(.9); }
.cm-ib.is-sm { width: 32px; height: 32px; } .cm-ib.is-sm .cm-i { width: 17px; height: 17px; }
.cm-dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--cm-heart); box-shadow: 0 0 0 2px #fff; }
.cm-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border: 0; border-radius: 99px; background: #fff; color: var(--cm-ink2); font: inherit; font-size: 13.5px; font-weight: 700; text-decoration: none; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--cm-line); cursor: pointer; transition: background .15s; }
.cm-chip .cm-i { width: 16px; height: 16px; }
.cm-chip small { color: var(--cm-mut); font-weight: 700; }
.cm-chip.is-on { background: var(--cm-ink); color: #fff; box-shadow: none; } .cm-chip.is-on small { color: rgba(255, 255, 255, .6); }
.cm-chip.is-sm { height: 28px; padding: 0 10px; font-size: 12.5px; }
.cm-chip--btn.is-done { background: #E8F7EE; color: #15803d; box-shadow: none; }
.cm-chip select, .cm-chip input[type=date] { border: 0; background: none; font: inherit; color: inherit; outline: 0; max-width: 150px; }

/* 팔로우 */
.cm-follow { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--cm-ac, #F97316); color: #fff; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; transition: background .2s, color .2s, transform .15s; white-space: nowrap; }
.cm-follow .cm-i { width: 16px; height: 16px; stroke-width: 2.4; }
.cm-follow span { display: inline-flex; align-items: center; gap: 6px; }
.cm-follow .cm-follow-on { display: none; }
.cm-follow.is-on { background: #EFEFF5; color: var(--cm-ink, #16161f); }
.cm-follow.is-on .cm-follow-on { display: inline-flex; } .cm-follow.is-on .cm-follow-off { display: none; }
.cm-follow:active { transform: scale(.95); }
.cm-follow.is-sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.cm-follow.is-lg { height: 44px; min-width: 140px; }
.cm-follow.is-block { width: 100%; }
.cm-follow-txt { border: 0; background: none; padding: 4px 6px; margin-left: 2px; font: inherit; font-size: 13.5px; font-weight: 800; color: var(--cm-ac); cursor: pointer; }
.cm-follow-txt.is-on { color: var(--cm-mut); }

/* 아바타 */
.cm-av { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: #EDEDF5; position: relative; }
.cm-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-av-i { width: 100%; height: 100%; display: grid; place-items: center; font-weight: 800; font-size: 16px; color: var(--tk, #6d28d9); background: var(--tn, #E4D6F7); }
.cm-av--xs { width: 26px; height: 26px; } .cm-av--xs .cm-av-i { font-size: 11px; }
.cm-av--sm { width: 32px; height: 32px; } .cm-av--sm .cm-av-i { font-size: 13px; }
.cm-av--md { width: 42px; height: 42px; }
.cm-av--lg { width: 64px; height: 64px; } .cm-av--lg .cm-av-i { font-size: 24px; }
.cm-av--xl { width: 132px; height: 132px; } .cm-av--xl .cm-av-i { font-size: 48px; }
.cm-av.has-ring { overflow: visible; }
.cm-av.has-ring::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; background: conic-gradient(from 210deg, #FFB547, #F97316, #E1306C, #A855F7, #FFB547); z-index: 0; }
.cm-av.has-ring::after { content: ''; position: absolute; inset: -1.5px; border-radius: 50%; background: #fff; z-index: 0; }
.cm-av.has-ring > * { position: relative; z-index: 1; border-radius: 50%; overflow: hidden; }
.cm-av.is-ghost { background: #EFEFF5; }
.cm-av--more { background: #EFEFF5; font-size: 12px; font-weight: 800; color: var(--cm-mut); }
.cm-badge { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; margin-left: 4px; vertical-align: -2px; color: #fff; font-style: normal; }
.cm-badge .cm-i { width: 10px; height: 10px; stroke-width: 3.5; }
.cm-badge--staff { background: #3b82f6; } .cm-badge--pro { background: linear-gradient(135deg, #F97316, #E1306C); }

/* ── 홈 머리: 이야기 고리 · 글쓰기 카드 ─────────────────────────────────── */
.cm-stories { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; padding: 4px 4px 14px; margin: 0 -4px 6px; scroll-snap-type: x proximity; }
.cm-stories::-webkit-scrollbar { display: none; }
.cm-story { flex: none; width: 74px; display: flex; flex-direction: column; align-items: center; gap: 7px; border: 0; background: none; padding: 0; font: inherit; text-decoration: none; cursor: pointer; scroll-snap-align: start; -webkit-tap-highlight-color: transparent; }
.cm-story b { max-width: 74px; font-size: 12px; font-weight: 600; color: var(--cm-ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-story-r { position: relative; width: 70px; height: 70px; border-radius: 50%; padding: 3px; background: #DDDDE8; transition: transform .2s var(--cm-spring); }
.cm-story-r > * { width: 100% !important; height: 100% !important; border-radius: 50%; box-shadow: 0 0 0 3px var(--cm-bg); }
.cm-story.is-new .cm-story-r { background: conic-gradient(from 200deg, #FFB547, #F97316, #E1306C, #A855F7, #FFB547); }
.cm-story.is-new .cm-story-r { animation: cmRing 6s linear infinite; }
.cm-story:active .cm-story-r { transform: scale(.92); }
.cm-story.is-me .cm-story-r { background: none; padding: 0; }
.cm-story.is-me .cm-story-r > .cm-av { box-shadow: none; }
.cm-story-plus { position: absolute; right: -2px; bottom: -2px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--cm-ac); color: #fff; box-shadow: 0 0 0 3px var(--cm-bg); }
.cm-story-plus .cm-i { width: 14px; height: 14px; stroke-width: 3; }
@keyframes cmRing { to { filter: hue-rotate(30deg); } }
.cm-prompt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 12px 12px 14px; margin-bottom: 14px; border: 0; border-radius: var(--cm-r); background: #fff; box-shadow: var(--cm-sh); font: inherit; text-align: left; text-decoration: none; color: var(--cm-mut); cursor: pointer; transition: transform .2s var(--cm-ease), box-shadow .2s; }
.cm-prompt:hover { box-shadow: 0 1px 2px rgba(22,22,31,.04), 0 14px 34px -10px rgba(22,22,31,.14); }
.cm-prompt:active { transform: scale(.99); }
.cm-prompt > span:not(.cm-av):not(.cm-prompt-ic) { flex: 1; height: 42px; display: flex; align-items: center; padding: 0 16px; border-radius: 99px; background: var(--cm-bg); font-size: 15px; }
.cm-prompt-ic { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #E8F7EE; color: #15803d; font-style: normal; }
.cm-prompt.is-guest > span:nth-child(2) { background: none; height: auto; display: block; padding: 0; color: var(--cm-ink); }
.cm-prompt.is-guest b { display: block; font-size: 15px; } .cm-prompt.is-guest small { color: var(--cm-mut); font-size: 13px; }
.cm-prompt.is-guest .cm-prompt-ic { background: var(--cm-acs); color: var(--cm-ac); }

/* 세그먼트 탭 (밑줄이 미끄러지는) */
.cm-seg { position: sticky; top: var(--cm-top); z-index: 20; display: flex; gap: 4px; margin: 0 0 14px; padding: 5px; border-radius: 16px; background: rgba(255, 255, 255, .8); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); box-shadow: 0 0 0 1px var(--cm-line); }
.cm-seg-i { position: relative; z-index: 1; flex: 1; height: 38px; display: grid; place-items: center; border-radius: 12px; font-size: 14.5px; font-weight: 700; color: var(--cm-mut); text-decoration: none; transition: color .2s; }
.cm-seg-i.is-on { color: var(--cm-ink); font-weight: 800; }
.cm-seg-ink { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 5px; width: 0; border-radius: 12px; background: #fff; box-shadow: 0 2px 8px rgba(22, 22, 31, .1); transition: transform .35s var(--cm-spring), width .35s var(--cm-spring); pointer-events: none; }
.cm-seg.is-sm { position: static; margin: 0; background: #fff; } .cm-seg.is-sm .cm-seg-i { height: 32px; padding: 0 12px; font-size: 13px; flex: none; }

/* 게시판 머리 */
.cm-hero { position: relative; margin-bottom: 16px; padding: 22px; border-radius: 26px; background: linear-gradient(140deg, var(--tn, #EDEDF5) 0%, #fff 80%); box-shadow: var(--cm-sh); overflow: hidden; }
.cm-hero::after { content: ''; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .9), transparent 70%); pointer-events: none; }
.cm-hero-in { position: relative; z-index: 1; display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.cm-hero-t { flex: 1; min-width: 220px; }
.cm-hero h1 { margin: 4px 0 2px; font-size: clamp(24px, 3vw, 30px); letter-spacing: -.9px; line-height: 1.2; }
.cm-hero-d { margin: 4px 0 0; color: var(--cm-ink2); }
.cm-hero-m { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 0; font-size: 12.5px; color: var(--cm-mut); font-weight: 600; }
.cm-hero-m span { display: inline-flex; align-items: center; gap: 5px; } .cm-hero-m .cm-i { width: 14px; height: 14px; }
.cm-hero-a { display: flex; gap: 8px; align-self: center; }
.cm-intro { position: relative; z-index: 1; margin-top: 16px; border-radius: 16px; background: rgba(255, 255, 255, .7); }
.cm-intro summary { display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-size: 13.5px; font-weight: 800; cursor: pointer; list-style: none; }
.cm-intro summary::-webkit-details-marker { display: none; }
.cm-intro summary .cm-i { width: 16px; height: 16px; } .cm-intro-c { margin-left: auto; transition: transform .2s; }
.cm-intro[open] .cm-intro-c { transform: rotate(180deg); }
.cm-intro .cm-prose { padding: 0 16px 14px; font-size: 14px; }
.cm-notices { list-style: none; margin: 0 0 14px; padding: 6px; border-radius: 18px; background: #fff; box-shadow: var(--cm-sh); }
.cm-notices a { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; text-decoration: none; font-size: 14px; font-weight: 600; }
.cm-notices a:hover { background: var(--cm-bg); }
.cm-notices span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-notices time { font-size: 12px; color: var(--cm-mut); }
.cm-pin { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; margin-right: 6px; border-radius: 99px; background: var(--cm-acs); color: var(--cm-acd); font-size: 11.5px; font-weight: 800; font-style: normal; vertical-align: 2px; }
.cm-pin .cm-i { width: 12px; height: 12px; stroke-width: 2.4; }
.cm-pagehead { margin: 4px 0 18px; }
.cm-pagehead h1 { margin: 4px 0; font-size: clamp(24px, 3vw, 30px); letter-spacing: -.9px; }
.cm-pagehead p:not(.cm-eyebrow) { margin: 0; color: var(--cm-mut); }

/* ── 피드 카드 ─────────────────────────────────────────────────────────── */
.cm-feed { display: flex; flex-direction: column; gap: 16px; }
.cm-card { background: var(--cm-card); border-radius: var(--cm-r); box-shadow: var(--cm-sh); overflow: hidden; animation: cmIn .5s var(--cm-ease) both; }
@keyframes cmIn { from { opacity: 0; transform: translateY(10px); } }
.cm-card.is-gone { animation: cmOut .35s var(--cm-ease) forwards; }
@keyframes cmOut { to { opacity: 0; transform: scale(.97); height: 0; margin: 0; } }
.cm-card-h { display: flex; align-items: center; gap: 4px; padding: 12px 8px 10px 14px; }
.cm-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px; text-decoration: none; }
.cm-who-t { min-width: 0; display: flex; flex-direction: column; }
.cm-who-t b { display: flex; align-items: center; font-size: 14.5px; font-weight: 800; letter-spacing: -.02em; overflow: hidden; white-space: nowrap; text-decoration: none; }
.cm-who-t > a { text-decoration: none; }
.cm-who-t small { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--cm-mut); white-space: nowrap; overflow: hidden; }
.cm-bchip { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 99px; background: var(--tn); color: var(--tk); font-size: 11.5px; font-weight: 800; text-decoration: none; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.cm-more { color: var(--cm-mut); }

/* 사진 묶음 */
.cm-media { position: relative; background: #ECECF3; aspect-ratio: var(--r, 1); max-height: 78vh; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.cm-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; scroll-behavior: smooth; }
.cm-track::-webkit-scrollbar { display: none; }
.cm-track figure { flex: 0 0 100%; height: 100%; margin: 0; scroll-snap-align: center; scroll-snap-stop: always; display: grid; place-items: center; }
.cm-track img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; }
.cm-media.is-detail { aspect-ratio: auto; height: 100%; max-height: none; }
.cm-media.is-detail .cm-track img { object-fit: contain; }
.cm-media-n { position: absolute; top: 12px; right: 12px; height: 26px; padding: 0 10px; border-radius: 99px; background: rgba(13, 13, 18, .6); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; backdrop-filter: blur(6px); pointer-events: none; }
.cm-media-nav { position: absolute; top: 50%; width: 32px; height: 32px; margin-top: -16px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--cm-ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .2); opacity: 0; transition: opacity .2s, transform .15s; }
.cm-media-nav .cm-i { width: 16px; height: 16px; stroke-width: 2.6; }
.cm-media:hover .cm-media-nav { opacity: 1; }
.cm-media-nav:active { transform: scale(.9); }
.cm-media-nav.is-prev { left: 12px; } .cm-media-nav.is-next { right: 12px; }
.cm-dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.cm-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .5); transition: background .2s, transform .2s; }
.cm-dots i.is-on { background: #fff; transform: scale(1.15); }
.cm-burst { position: absolute; left: 50%; top: 50%; width: 110px; height: 110px; margin: -55px 0 0 -55px; pointer-events: none; color: #fff; opacity: 0; transform: scale(.2); filter: drop-shadow(0 6px 20px rgba(0, 0, 0, .3)); }
.cm-burst .cm-i { width: 100%; height: 100%; fill: #fff; stroke: none; }
.cm-burst.is-on { animation: cmBurst .9s var(--cm-spring); }
@keyframes cmBurst { 0% { opacity: 0; transform: scale(.2); } 15% { opacity: .96; transform: scale(1.15); } 30% { transform: scale(.95); } 45% { transform: scale(1); } 80% { opacity: .96; } 100% { opacity: 0; transform: scale(1) translateY(-24px); } }

/* 반응 줄 */
.cm-acts { display: flex; align-items: center; gap: 2px; padding: 6px 8px 2px; }
.cm-act { display: inline-flex; align-items: center; gap: 4px; height: 42px; min-width: 42px; padding: 0 10px; border: 0; border-radius: 99px; background: none; color: var(--cm-ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none; transition: background .15s; -webkit-tap-highlight-color: transparent; }
.cm-act:hover { background: rgba(22, 22, 31, .04); }
.cm-act .cm-i { width: 24px; height: 24px; transition: transform .25s var(--cm-spring); }
.cm-act:active .cm-i { transform: scale(.82); }
.cm-act--like.is-on { color: var(--cm-heart); }
.cm-act--like.is-on .cm-i { fill: var(--cm-heart); stroke: var(--cm-heart); }
.cm-act--like.is-pop .cm-i { animation: cmPop .45s var(--cm-spring); }
@keyframes cmPop { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 60% { transform: scale(.9); } 100% { transform: scale(1); } }
.cm-act--save.is-on .cm-i { fill: var(--cm-ink); }
.cm-act span:empty { display: none; }

/* 본문 */
.cm-cap { padding: 4px 16px 4px; }
.cm-cap-t { margin: 4px 0 6px; font-size: 17px; font-weight: 800; letter-spacing: -.4px; line-height: 1.4; }
.cm-cap-t a { text-decoration: none; }
.cm-cap-x { position: relative; font-size: 15px; line-height: 1.65; color: var(--cm-ink2); overflow-wrap: anywhere; word-break: keep-all; }
.cm-cap-x.is-clamp { max-height: 7.4em; overflow: hidden; }
.cm-cap-x.is-clamp::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2.6em; background: linear-gradient(transparent, #fff); }
.cm-cap-x p { margin: 0 0 .7em; } .cm-cap-x p:last-child { margin-bottom: 0; }
.cm-cap-x img { max-width: 100%; height: auto; border-radius: 12px; }
.cm-cap-more { border: 0; background: none; padding: 4px 0; font: inherit; font-size: 14px; font-weight: 700; color: var(--cm-mut); cursor: pointer; }
.cm-tag, .cm-mention { color: #2563eb; text-decoration: none; font-weight: 600; }
.cm-tag:hover, .cm-mention:hover { text-decoration: underline; }
.cm-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.cm-tags a { height: 26px; padding: 0 10px; border-radius: 99px; background: #EEF2FF; color: #3b4fd8; font-size: 12.5px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; }
.cm-quote { display: grid; place-items: center; min-height: 220px; margin: 2px 12px 4px; padding: 30px 28px; border-radius: 18px; text-decoration: none; background: linear-gradient(140deg, var(--tn) 0%, #fff 140%); color: var(--cm-ink); text-align: center; }
.cm-quote span { font-size: clamp(18px, 2.4vw, 22px); font-weight: 800; letter-spacing: -.6px; line-height: 1.5; word-break: keep-all; }
.cm-files { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cm-files a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--cm-bg); text-decoration: none; font-size: 13.5px; font-weight: 600; overflow: hidden; }
.cm-files a > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-files.is-big a { padding: 12px 14px; } .cm-files.is-big b { display: block; font-size: 14px; } .cm-files.is-big small { color: var(--cm-mut); }
.cm-files.is-big a > span:nth-child(2) { flex: 1; min-width: 0; }
.cm-ext { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: #fff; color: var(--cm-acd); font-size: 10.5px; font-weight: 900; letter-spacing: .02em; box-shadow: inset 0 0 0 1px var(--cm-line); }

/* 카드 발 */
.cm-card-f { padding: 4px 16px 14px; }
.cm-prev { list-style: none; margin: 6px 0 0; padding: 0; font-size: 14px; color: var(--cm-ink2); }
.cm-prev li { margin: 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-prev a { text-decoration: none; } .cm-prev b { font-weight: 800; color: var(--cm-ink); }
.cm-allc { display: inline-block; margin-top: 4px; font-size: 14px; color: var(--cm-mut); text-decoration: none; font-weight: 600; }
.cm-quick { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 8px; padding: 4px 0; border: 0; background: none; font: inherit; color: var(--cm-mut); font-size: 14px; cursor: text; text-align: left; }

/* 불러오기 · 빈 화면 */
.cm-more-load { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 26px; color: var(--cm-mut); font-size: 13px; }
.cm-spin { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid rgba(22, 22, 31, .1); border-top-color: var(--cm-ac); animation: cmSpin .8s linear infinite; }
@keyframes cmSpin { to { transform: rotate(360deg); } }
.cm-end { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 26px; color: var(--cm-mut); font-size: 13px; font-weight: 600; }
.cm-end .cm-i { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: #E8F7EE; color: #15803d; stroke-width: 3; }
.cm-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 56px 20px; border-radius: var(--cm-r); background: #fff; box-shadow: var(--cm-sh); }
.cm-empty.is-sm { padding: 34px 20px; }
.cm-empty-ic { width: 72px; height: 72px; border-radius: 24px; display: grid; place-items: center; margin-bottom: 8px; background: linear-gradient(140deg, var(--cm-acs), #FDE7F0); color: var(--cm-ac); }
.cm-empty-ic .cm-i { width: 32px; height: 32px; stroke-width: 1.6; }
.cm-empty b { font-size: 17px; letter-spacing: -.3px; } .cm-empty p { margin: 0 0 10px; color: var(--cm-mut); font-size: 14px; }
.cm-i-inline { width: 15px; height: 15px; vertical-align: -2px; }

/* 추천 회원 */
.cm-sug { padding: 16px 0 16px 16px; border-radius: var(--cm-r); background: #fff; box-shadow: var(--cm-sh); }
.cm-sug .cm-box-h { padding-right: 16px; }
.cm-sug-row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 6px 16px 4px 0; scroll-snap-type: x proximity; }
.cm-sug-row::-webkit-scrollbar { display: none; }
.cm-sug-c { flex: none; width: 152px; padding: 18px 12px 12px; border-radius: 18px; background: var(--cm-bg); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; scroll-snap-align: start; }
.cm-sug-c > a { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; min-width: 0; max-width: 100%; }
.cm-sug-c b { font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-sug-c small { font-size: 12px; color: var(--cm-mut); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 오른쪽 레일 상자 ────────────────────────────────────────────────── */
.cm-box { padding: 18px; border-radius: var(--cm-r); background: #fff; box-shadow: var(--cm-sh); }
.cm-box-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cm-box-h a { font-size: 12.5px; font-weight: 700; color: var(--cm-mut); text-decoration: none; }
.cm-box-h a:hover { color: var(--cm-ink); }
.cm-mecard-who { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.cm-mecard-who b { display: block; font-size: 15px; } .cm-mecard-who small { color: var(--cm-mut); font-size: 13px; }
.cm-mecard-st { display: grid; grid-template-columns: repeat(3, 1fr); margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--cm-line); text-align: center; }
.cm-mecard-st dt { font-size: 11.5px; color: var(--cm-mut); font-weight: 600; } .cm-mecard-st dd { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.4px; }
.cm-mecard-st dd.is-ac { color: var(--cm-ac); }
.cm-mecard-st div { display: flex; flex-direction: column-reverse; }
.cm-join { background: linear-gradient(150deg, #FFF1E6 0%, #FDE7F0 55%, #EDE9FE 100%); }
.cm-join h3 { margin: 6px 0 4px; font-size: 19px; letter-spacing: -.5px; } .cm-join p:not(.cm-eyebrow) { margin: 0 0 14px; font-size: 13.5px; color: var(--cm-ink2); }
.cm-spot-who { display: flex; align-items: center; gap: 12px; margin-top: 10px; text-decoration: none; }
.cm-spot-who b { display: flex; align-items: center; font-size: 15.5px; } .cm-spot-who small { color: var(--cm-mut); font-size: 13px; }
.cm-spot-bio { margin: 10px 0 0; font-size: 13.5px; color: var(--cm-ink2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cm-spot-f { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; font-size: 12.5px; color: var(--cm-mut); font-weight: 700; }
.cm-spot-f span { display: inline-flex; align-items: center; gap: 4px; } .cm-spot-f .cm-i { width: 15px; height: 15px; color: var(--cm-ac); }
.cm-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cm-rank li { display: flex; align-items: center; gap: 10px; }
.cm-rank li > a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 5px 4px; border-radius: 12px; text-decoration: none; }
.cm-rank li > a:hover { background: var(--cm-bg); }
.cm-rank li > a > span { min-width: 0; } .cm-rank b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cm-rank small { color: var(--cm-mut); font-size: 12px; }
.cm-rank em { font-style: normal; font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; gap: 3px; } .cm-rank em .cm-i { width: 14px; height: 14px; }
.cm-rank-n { flex: none; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 900; color: var(--cm-mut); background: var(--cm-bg); }
.cm-rank-n.is-top { color: #fff; } .cm-rank-n.r1 { background: linear-gradient(135deg, #FBBF24, #F59E0B); } .cm-rank-n.r2 { background: linear-gradient(135deg, #CBD5E1, #94A3B8); } .cm-rank-n.r3 { background: linear-gradient(135deg, #FDBA74, #EA7A3C); }
.cm-kings { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center; }
.cm-kings a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border-radius: 14px; text-decoration: none; }
.cm-kings a:hover { background: var(--cm-bg); }
.cm-kings b { font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cm-kings small { display: inline-flex; align-items: center; gap: 3px; color: var(--cm-mut); font-size: 12px; font-weight: 700; } .cm-kings .cm-i { width: 13px; height: 13px; }
.cm-pop { list-style: none; margin: 0; padding: 0; counter-reset: p; }
.cm-pop a { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-radius: 12px; text-decoration: none; }
.cm-pop a:hover { background: var(--cm-bg); }
.cm-pop-n { flex: none; width: 18px; font-size: 16px; font-weight: 900; color: var(--cm-ac); font-style: italic; }
.cm-pop-t { flex: 1; min-width: 0; } .cm-pop-t b { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cm-pop-t small { display: inline-flex; align-items: center; gap: 3px; color: var(--cm-mut); font-size: 12px; } .cm-pop-t .cm-i { width: 12px; height: 12px; margin-left: 4px; }
.cm-pop img { flex: none; width: 46px; height: 46px; border-radius: 10px; object-fit: cover; }
.cm-rs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cm-rs a { display: flex; align-items: center; gap: 12px; text-decoration: none; padding: 4px; border-radius: 14px; } .cm-rs a:hover { background: var(--cm-bg); }
.cm-rs-cv { flex: none; width: 64px; height: 44px; border-radius: 11px; overflow: hidden; display: grid; place-items: center; background: var(--tn); color: var(--tk); }
.cm-rs-cv img { width: 100%; height: 100%; object-fit: cover; }
.cm-rs b { display: block; font-size: 13.5px; } .cm-rs small { color: var(--cm-mut); font-size: 12px; }
.cm-nt { list-style: none; margin: 0; padding: 0; } .cm-nt a { display: flex; align-items: center; gap: 8px; padding: 7px 0; text-decoration: none; font-size: 13.5px; font-weight: 600; }
.cm-nt .cm-i { width: 15px; height: 15px; color: var(--cm-ac); } .cm-nt span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cm-nt time { font-size: 11.5px; color: var(--cm-mut); }
.cm-rail-foot { margin: 4px 6px; font-size: 11.5px; color: var(--cm-mut); }

/* ── 글 화면 ─────────────────────────────────────────────────────────── */
.cm-post { background: #fff; border-radius: 26px; box-shadow: var(--cm-sh); overflow: hidden; }
.cm-post.has-media { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(340px, 1fr); max-height: calc(100vh - var(--cm-top) - 48px); min-height: 560px; }
.cm-post-media { background: #ECECF3; min-height: 0; }
.cm-post-media .cm-media { height: 100%; }
.cm-post-side { display: flex; flex-direction: column; min-height: 0; }
.cm-post.has-media .cm-post-side { overflow-y: auto; }
.cm-post-h { border-bottom: 1px solid var(--cm-line); padding: 14px 10px 14px 16px; }
.cm-post-body { padding: 18px 20px 6px; }
.cm-post-t { margin: 0 0 12px; font-size: clamp(21px, 2.6vw, 27px); letter-spacing: -.8px; line-height: 1.35; }
.cm-prose { font-size: 16px; line-height: 1.8; color: var(--cm-ink2); overflow-wrap: anywhere; word-break: keep-all; }
.cm-prose p { margin: 0 0 1em; } .cm-prose img { max-width: 100%; height: auto; border-radius: 14px; }
.cm-prose a { color: #2563eb; }
.cm-prose.is-html h2, .cm-prose.is-html h3 { color: var(--cm-ink); letter-spacing: -.4px; }
.cm-prose.is-html table { border-collapse: collapse; max-width: 100%; display: block; overflow-x: auto; }
.cm-prose.is-html td, .cm-prose.is-html th { border: 1px solid var(--cm-line2); padding: 6px 10px; }
.cm-prose iframe { max-width: 100%; border-radius: 14px; }
.cm-post-stat { display: flex; gap: 14px; margin: 14px 0 0; font-size: 12.5px; color: var(--cm-mut); }
.cm-post-stat span { display: inline-flex; align-items: center; gap: 4px; } .cm-post-stat .cm-i { width: 14px; height: 14px; }
.cm-post-acts { border-top: 1px solid var(--cm-line); margin-top: 10px; padding: 6px 10px; }
.cm-alert { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #FFF6E0; color: #92400e; font-size: 13.5px; font-weight: 600; margin: 0 0 12px; }
.cm-taskbar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.cm-due { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 99px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.cm-due .cm-i { width: 13px; height: 13px; stroke-width: 2.2; }
.cm-due.is-later { background: #EEF2FF; color: #4338ca; } .cm-due.is-soon { background: #FFF6E0; color: #b45309; } .cm-due.is-today { background: var(--cm-acs); color: var(--cm-acd); }
.cm-due.is-late { background: #FDECEC; color: #dc2626; } .cm-due.is-done { background: #EFEFF5; color: var(--cm-mut); text-decoration: line-through; }
.cm-taskbar .cm-due { height: 34px; padding: 0 12px; font-size: 13px; }
.cm-series-nav { margin: 22px 0 6px; border-radius: 18px; background: var(--cm-bg); overflow: hidden; }
.cm-series-h { display: flex; align-items: center; gap: 10px; padding: 14px 16px; text-decoration: none; background: linear-gradient(120deg, #EDE9FE, #FDE7F0); }
.cm-series-h b { flex: 1; font-size: 15px; } .cm-series-h small { font-weight: 800; color: var(--cm-ink2); }
.cm-series-ol { list-style: none; margin: 0; padding: 6px; max-height: 220px; overflow-y: auto; }
.cm-series-ol a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; font-size: 13.5px; text-decoration: none; color: var(--cm-ink2); }
.cm-series-ol a span { flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: #fff; font-size: 11.5px; font-weight: 800; }
.cm-series-ol .is-on a { background: #fff; color: var(--cm-ink); font-weight: 800; } .cm-series-ol .is-on a span { background: var(--cm-ac); color: #fff; }
.cm-series-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 6px 6px; }
.cm-series-pn a { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #fff; text-decoration: none; font-size: 13.5px; font-weight: 700; min-width: 0; }
.cm-series-pn a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cm-series-pn small { display: block; font-size: 11px; color: var(--cm-mut); }
.cm-series-pn a.is-next { justify-content: flex-end; text-align: right; grid-column: 2; }
.cm-related { margin-top: 26px; }

/* 댓글 */
.cm-cmts { padding: 4px 0 0; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.cm-cmts-h { margin: 8px 20px 4px; font-size: 16px; letter-spacing: -.3px; } .cm-cmts-h b { color: var(--cm-ac); }
.cm-cmt-list { list-style: none; margin: 0; padding: 4px 8px 8px; flex: 1; }
.cm-cmt { padding: 6px 0; scroll-margin-top: 100px; }
.cm-cmt.is-new > .cm-cmt-x { animation: cmFlash 1.6s var(--cm-ease); }
@keyframes cmFlash { 0% { background: var(--cm-acs); } 100% { background: transparent; } }
.cm-cmt-x { display: flex; align-items: flex-start; gap: 10px; padding: 6px 8px; border-radius: 14px; }
.cm-cmt-m { flex: 1; min-width: 0; }
.cm-cmt-b { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--cm-ink2); overflow-wrap: anywhere; }
.cm-cmt-n { font-weight: 800; color: var(--cm-ink); text-decoration: none; margin-right: 6px; }
.cm-op { font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--cm-acd); background: var(--cm-acs); padding: 1px 6px; border-radius: 6px; margin-right: 6px; vertical-align: 1px; }
.cm-cmt-meta { display: flex; align-items: center; gap: 12px; margin: 4px 0 0; font-size: 12.5px; color: var(--cm-mut); font-weight: 600; }
.cm-cmt-meta button { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.cm-cmt-meta button:hover { color: var(--cm-ink); }
.cm-cmt-more { opacity: 0; transition: opacity .15s; display: inline-grid; } .cm-cmt-more .cm-i { width: 16px; height: 16px; }
.cm-cmt-x:hover .cm-cmt-more, .cm-cmt-more:focus-visible { opacity: 1; }
.cm-cmt-like { border: 0; background: none; padding: 6px; color: var(--cm-mut); cursor: pointer; flex: none; }
.cm-cmt-like .cm-i { width: 15px; height: 15px; transition: transform .25s var(--cm-spring); }
.cm-cmt-like.is-on { color: var(--cm-heart); } .cm-cmt-like.is-on .cm-i { fill: var(--cm-heart); }
.cm-cmt-like:active .cm-i { transform: scale(.7); }
.cm-cmt-gone { margin: 6px 0; color: var(--cm-mut); font-size: 13.5px; font-style: italic; }
.cm-cmt.is-pending > .cm-cmt-x { opacity: .65; }
.cm-pending { color: #b45309; font-weight: 800; }
.cm-cmt-img img { display: block; max-width: 220px; max-height: 220px; margin-top: 8px; border-radius: 12px; object-fit: cover; }
.cm-cmt-file { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 6px 10px; border-radius: 10px; background: var(--cm-bg); font-size: 13px; font-weight: 600; text-decoration: none; }
.cm-cmt-file .cm-i { width: 14px; height: 14px; }
.cm-cmt-toggle { display: flex; align-items: center; gap: 10px; margin: 2px 0 0 52px; padding: 4px 0; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--cm-mut); cursor: pointer; }
.cm-cmt-toggle i { width: 24px; height: 1px; background: var(--cm-line2); }
.cm-replies { list-style: none; margin: 0 0 0 42px; padding: 0; }
.cm-cmt.is-reply { padding: 2px 0; }
.cm-cmt-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 10px; color: var(--cm-mut); font-size: 14px; }
.cm-cmt-empty .cm-i { width: 30px; height: 30px; stroke-width: 1.5; }
.cm-cbox { position: sticky; bottom: 0; z-index: 2; border-top: 1px solid var(--cm-line); background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); padding: 10px 12px; }
.cm-cbox.is-guest { display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; font-weight: 700; color: var(--cm-mut); padding: 16px; }
.cm-cbox-row { display: flex; align-items: flex-end; gap: 8px; }
.cm-cbox-row .cm-av { margin-bottom: 4px; }
.cm-cbox textarea { flex: 1; min-height: 40px; max-height: 140px; padding: 9px 14px; border: 0; border-radius: 20px; background: var(--cm-bg); font: inherit; font-size: 15px; line-height: 1.45; resize: none; outline: 0; color: var(--cm-ink); }
.cm-cbox textarea:focus { box-shadow: inset 0 0 0 1.5px var(--cm-line2); background: #fff; }
.cm-cbox-att { margin-bottom: 0; color: var(--cm-mut); }
.cm-cbox-go { height: 40px; padding: 0 6px; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 800; color: var(--cm-ac); cursor: pointer; }
.cm-cbox-go:disabled { opacity: .35; cursor: default; }
.cm-cbox-to { display: flex; align-items: center; justify-content: space-between; margin: -2px 0 8px; padding: 6px 6px 6px 12px; border-radius: 10px; background: var(--cm-bg); font-size: 13px; color: var(--cm-ink2); }
.cm-cbox-to button { border: 0; background: none; color: var(--cm-mut); cursor: pointer; display: grid; } .cm-cbox-to .cm-i { width: 16px; height: 16px; }
.cm-cbox-file { margin: 6px 0 0 44px; font-size: 12.5px; color: var(--cm-mut); }

/* ── 그리드 칸 (프로필 · 관련 글) ─────────────────────────────────────── */
.cm-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.cm-tile { position: relative; aspect-ratio: 1; overflow: hidden; display: block; background: #e6e6ee; text-decoration: none; border-radius: 6px; }
.cm-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--cm-ease); }
.cm-tile:hover img { transform: scale(1.04); }
.cm-tile.is-text { background: linear-gradient(150deg, var(--tn) 0%, #fff 130%); display: flex; flex-direction: column; justify-content: center; padding: 14px; }
.cm-tile-t { font-size: clamp(12px, 1.6vw, 15px); font-weight: 800; letter-spacing: -.3px; line-height: 1.45; color: var(--cm-ink); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all; }
.cm-tile-b { position: absolute; left: 12px; bottom: 10px; font-size: 11px; font-weight: 800; color: var(--tk); }
.cm-tile-multi { position: absolute; top: 8px; right: 8px; color: #fff; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5)); }
.cm-tile-multi .cm-i { width: 20px; height: 20px; }
.cm-tile-o { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 18px; background: rgba(13, 13, 18, .35); color: #fff; font-weight: 800; opacity: 0; transition: opacity .2s; }
.cm-tile-o span { display: inline-flex; align-items: center; gap: 6px; } .cm-tile-o .cm-i { fill: #fff; stroke: #fff; width: 19px; height: 19px; }
.cm-tile:hover .cm-tile-o { opacity: 1; }

/* ── 프로필 ─────────────────────────────────────────────────────────── */
.cm-pf { background: #fff; border-radius: 26px; box-shadow: var(--cm-sh); overflow: hidden; margin-bottom: 14px; }
.cm-pf-cover { position: relative; height: 200px; background: #e6e6ee; }
.cm-pf-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-pf-cover.is-empty { background: radial-gradient(120% 140% at 0% 0%, var(--tn) 0%, transparent 55%), radial-gradient(120% 140% at 100% 100%, #FDE7F0 0%, transparent 55%), linear-gradient(135deg, #F4F4F9, #EDE9FE); }
.cm-pf-camera { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 99px; background: rgba(13, 13, 18, .55); color: #fff; font-size: 12.5px; font-weight: 700; cursor: pointer; backdrop-filter: blur(6px); }
.cm-pf-camera .cm-i { width: 16px; height: 16px; }
.cm-pf-head { display: flex; align-items: flex-end; gap: 28px; padding: 0 32px; margin-top: -66px; position: relative; }
.cm-pf-av { position: relative; flex: none; }
.cm-pf-av .cm-av { box-shadow: 0 0 0 5px #fff; }
.cm-pf-av .cm-av.has-ring { box-shadow: none; }
.cm-pf-avbtn { position: absolute; right: 2px; bottom: 6px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--cm-ink); color: #fff; box-shadow: 0 0 0 3px #fff; cursor: pointer; transition: transform .15s; }
.cm-pf-avbtn:active { transform: scale(.9); } .cm-pf-avbtn .cm-i { width: 17px; height: 17px; }
.cm-pf-stats { flex: 1; display: flex; justify-content: space-around; gap: 10px; padding-bottom: 12px; }
.cm-pf-stats a { display: flex; flex-direction: column; align-items: center; text-decoration: none; min-width: 64px; padding: 6px 8px; border-radius: 14px; transition: background .15s; }
.cm-pf-stats a:hover { background: var(--cm-bg); }
.cm-pf-stats b { font-size: 21px; font-weight: 900; letter-spacing: -.6px; } .cm-pf-stats span { font-size: 12.5px; color: var(--cm-mut); font-weight: 600; }
.cm-pf-stats .is-score b { background: linear-gradient(135deg, #F97316, #E1306C); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cm-pf-id { padding: 14px 32px 0; }
.cm-pf-id h1 { display: flex; align-items: center; margin: 0; font-size: 22px; letter-spacing: -.6px; }
.cm-pf-handle { margin: 2px 0 0; color: var(--cm-mut); font-weight: 600; font-size: 14px; }
.cm-pf-fm { font-style: normal; margin-left: 8px; padding: 2px 8px; border-radius: 6px; background: var(--cm-bg); font-size: 11.5px; font-weight: 800; color: var(--cm-ink2); }
.cm-pf-sp { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 0; padding: 5px 12px; border-radius: 99px; background: var(--cm-acs); color: var(--cm-acd); font-size: 13px; font-weight: 800; }
.cm-pf-sp .cm-i { width: 15px; height: 15px; }
.cm-pf-bio { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--cm-ink2); }
.cm-pf-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.cm-pf-links a { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 99px; background: #EEF2FF; color: #3b4fd8; font-size: 13px; font-weight: 700; text-decoration: none; }
.cm-pf-links .cm-i { width: 15px; height: 15px; }
.cm-pf-act { display: flex; gap: 8px; padding: 16px 32px 0; }
.cm-pf-act > * { flex: 1; }
.cm-pf-act .cm-btn--icon { flex: none; }
.cm-pf-act .cm-btn--soft { border-radius: 12px; height: 44px; }
.cm-pf-act .cm-follow { border-radius: 12px; }
.cm-hl { display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none; padding: 20px 32px 6px; }
.cm-hl::-webkit-scrollbar { display: none; }
.cm-hl-i { flex: none; width: 72px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; }
.cm-hl-r { width: 68px; height: 68px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--tn); color: var(--tk); box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--cm-line2); }
.cm-hl-r img { width: 100%; height: 100%; object-fit: cover; }
.cm-hl-i b { max-width: 72px; font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-pf-tabs { display: flex; justify-content: center; gap: 4px; margin-top: 18px; border-top: 1px solid var(--cm-line); }
.cm-pf-tabs a { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 54px; padding: 0 22px; font-size: 13px; font-weight: 800; letter-spacing: .06em; color: var(--cm-mut); text-decoration: none; text-transform: uppercase; }
.cm-pf-tabs a .cm-i { width: 17px; height: 17px; }
.cm-pf-tabs a.is-on { color: var(--cm-ink); }
.cm-pf-tabs a.is-on::before { content: ''; position: absolute; left: 14px; right: 14px; top: -1px; height: 2px; border-radius: 2px; background: var(--cm-ink); }
.cm-pf-tabs.is-text a { letter-spacing: 0; text-transform: none; font-size: 14px; }
.cm-pf-body .cm-grid3 { border-radius: 18px; overflow: hidden; }
.cm-pf-feed { max-width: 620px; margin: 0 auto; }
.cm-pf-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 12px; }
.cm-pf-big { margin: 8px 0 0; font-size: 18px; font-weight: 800; letter-spacing: -.4px; }
.cm-cert { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cm-cert li { display: flex; align-items: flex-start; gap: 8px; font-size: 14.5px; } .cm-cert .cm-i { width: 17px; height: 17px; margin-top: 2px; color: var(--cm-ac); }
.cm-intro-frame { display: block; width: 100%; height: 320px; border: 0; }
.cm-pf-introbox { padding: 10px; }
.cm-people { list-style: none; margin: 0; padding: 8px; border-radius: 22px; background: #fff; box-shadow: var(--cm-sh); }
.cm-people li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 14px; }
.cm-people li:hover { background: var(--cm-bg); }
.cm-people li > a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-decoration: none; }
.cm-people b { display: flex; align-items: center; font-size: 14.5px; } .cm-people small { display: block; color: var(--cm-mut); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-people li > a > span { min-width: 0; }
.cm-people-empty { justify-content: center; padding: 30px !important; color: var(--cm-mut); }
.cm-people.is-compact { padding: 0; box-shadow: none; }
.cm-courses { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.cm-course { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 18px; background: #fff; box-shadow: var(--cm-sh); text-decoration: none; transition: transform .2s var(--cm-ease); }
.cm-course:hover { transform: translateY(-3px); }
.cm-course-th { aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: var(--cm-lav); color: var(--cm-mut); }
.cm-course-th img { width: 100%; height: 100%; object-fit: cover; }
.cm-course b { font-size: 14px; line-height: 1.4; } .cm-course small { color: var(--cm-ac); font-weight: 700; font-size: 12.5px; }

/* 프로필 편집 · 쓰기 화면 · 폼 */
.cm-form { display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.cm-fld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.cm-fld:last-child { margin-bottom: 0; }
.cm-fld > span:first-child, .cm-fld-l { font-size: 13px; font-weight: 800; color: var(--cm-ink); margin: 0; }
.cm-fld > span em, .cm-fld-l em { font-style: normal; font-weight: 600; color: var(--cm-mut); margin-left: 4px; }
.cm-fld > input[type=text], .cm-fld > input[type=date], .cm-fld > input[type=time], .cm-fld > select, .cm-fld > textarea, .cm-fld-pre input { width: 100%; padding: 12px 14px; border: 0; border-radius: 14px; background: var(--cm-bg); font: inherit; font-size: 15px; color: var(--cm-ink); outline: 0; transition: box-shadow .15s, background .15s; }
.cm-fld > input:focus, .cm-fld > select:focus, .cm-fld > textarea:focus { background: #fff; box-shadow: inset 0 0 0 2px var(--cm-ac); }
.cm-fld > textarea { resize: vertical; line-height: 1.6; }
.cm-fld > small { color: var(--cm-mut); font-size: 12.5px; }
/* 게시판 편집기를 끼운 칸 (프로필 자세한 소개) — 도구 줄은 위쪽 머리글(데스크톱) · 앱 바(모바일) 바로 아래에 붙는다 */
.cm-fld .bde-embed { border-radius: 16px; }
.cm .bde-embed .bde-bar { top: calc(var(--cm-top) + 8px); }
@media (max-width: 860px) { .cm .bde-embed .bde-bar { top: calc(var(--cm-top) + 62px); } .cm .bde-tip { display: none; } .cm .bde-status { white-space: nowrap; } }
.cm-fld .bde-visual { min-height: 320px; }
.cm-fld .bde-code { min-height: 320px; }
.cm-fld-pre { display: flex; align-items: center; border-radius: 14px; background: var(--cm-bg); overflow: hidden; }
.cm-fld-pre i { padding-left: 14px; font-style: normal; color: var(--cm-mut); font-size: 13.5px; white-space: nowrap; }
.cm-fld-pre input { background: none !important; padding-left: 2px !important; box-shadow: none !important; }
.cm-fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cm-code { font-family: Consolas, 'D2Coding', monospace !important; font-size: 13px !important; }
.cm-form-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 6px 0 20px; }
.cm-pedit-photo { display: flex; align-items: center; gap: 18px; }
.cm-pedit-photo .cm-av--xl { width: 96px; height: 96px; }
.cm-pedit-photo b { display: block; font-size: 17px; } .cm-pedit-photo small { color: var(--cm-mut); }
.cm-pedit-pbtn { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0 -8px; }
.cm-fmt { display: inline-flex; gap: 10px; margin-left: 10px; font-weight: 600; font-size: 12.5px; } .cm-fmt label { display: inline-flex; gap: 4px; align-items: center; cursor: pointer; }
.cm-file-in { font: inherit; font-size: 13.5px; }
.cm-files.is-edit li { padding: 6px 0; font-size: 14px; }

/* 검색 · 랭킹 · 시리즈 · 문 · 기타 */
.cm-search { position: sticky; top: calc(var(--cm-top) + 8px); z-index: 20; display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 8px 0 18px; margin-bottom: 16px; border-radius: 18px; background: #fff; box-shadow: var(--cm-sh); }
.cm-search > .cm-i { color: var(--cm-mut); }
.cm-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: inherit; font-size: 16px; color: var(--cm-ink); }
.cm-tagcloud { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.cm-tagcloud a { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 99px; background: var(--cm-bg); font-weight: 700; font-size: 14px; text-decoration: none; }
.cm-tagcloud small { color: var(--cm-mut); font-weight: 700; font-size: 12px; }
.cm-result-h { margin: 18px 4px 10px; }
.cm-blist { display: flex; flex-direction: column; gap: 4px; }
.cm-blist a { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 14px; text-decoration: none; } .cm-blist a:hover { background: var(--cm-bg); }
.cm-blist b { display: block; } .cm-blist small { color: var(--cm-mut); font-size: 13px; }
.cm-search ~ .cm-box, .cm-box + .cm-box { margin-bottom: 12px; }
.cm-myscore { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 16px; border-radius: 18px; background: linear-gradient(120deg, #FFF1E6, #FDE7F0); }
.cm-myscore b { display: block; } .cm-myscore small { color: var(--cm-ink2); font-size: 12.5px; }
.cm-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 10px; margin: 6px 0 16px; }
.cm-pod { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; text-align: center; }
.cm-pod-av { position: relative; margin-bottom: 6px; }
.cm-pod-av i { position: absolute; left: 50%; bottom: -8px; z-index: 3; transform: translateX(-50%); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: 13px; color: #fff; box-shadow: 0 0 0 3px var(--cm-bg); }
.cm-pod.is-1 .cm-pod-av i { background: linear-gradient(135deg, #FBBF24, #F59E0B); } .cm-pod.is-2 .cm-pod-av i { background: linear-gradient(135deg, #CBD5E1, #94A3B8); } .cm-pod.is-3 .cm-pod-av i { background: linear-gradient(135deg, #FDBA74, #EA7A3C); }
.cm-pod b { font-size: 15px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cm-pod small { color: var(--cm-ac); font-weight: 800; }
.cm-pod-bar { width: 100%; margin-top: 8px; border-radius: 16px 16px 6px 6px; background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .4)); box-shadow: var(--cm-sh); }
.cm-pod.is-1 .cm-pod-bar { height: 120px; background: linear-gradient(180deg, #FFF4D6, #fff); } .cm-pod.is-2 .cm-pod-bar { height: 86px; } .cm-pod.is-3 .cm-pod-bar { height: 64px; }
.cm-board-rank { list-style: none; margin: 0 0 16px; padding: 8px; border-radius: 22px; background: #fff; box-shadow: var(--cm-sh); }
.cm-board-rank li { display: flex; align-items: center; gap: 12px; padding: 4px 8px; }
.cm-board-rank li > a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 6px; border-radius: 12px; text-decoration: none; } .cm-board-rank li > a:hover { background: var(--cm-bg); }
.cm-board-rank b { display: flex; align-items: center; } .cm-board-rank small { color: var(--cm-mut); font-size: 12.5px; }
.cm-board-rank em { font-style: normal; font-weight: 900; }
.cm-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 12px 0; }
.cm-series-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.cm-scard { display: flex; flex-direction: column; gap: 6px; padding: 10px 10px 14px; border-radius: 22px; background: #fff; box-shadow: var(--cm-sh); text-decoration: none; transition: transform .25s var(--cm-ease), box-shadow .25s; }
.cm-scard:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -18px rgba(22, 22, 31, .3); }
.cm-scard-cv { position: relative; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(140deg, var(--tn), #fff 140%); color: var(--tk); margin-bottom: 6px; }
.cm-scard-cv img { width: 100%; height: 100%; object-fit: cover; } .cm-scard-cv > .cm-i { width: 40px; height: 40px; stroke-width: 1.4; }
.cm-scard-cv em { position: absolute; right: 10px; bottom: 10px; height: 24px; padding: 0 10px; border-radius: 99px; background: rgba(13, 13, 18, .65); color: #fff; font-style: normal; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.cm-scard-f { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 99px; background: #fff; color: var(--cm-acd); font-style: normal; font-size: 11.5px; font-weight: 800; }
.cm-scard-f .cm-i { width: 12px; height: 12px; fill: currentColor; }
.cm-scard b { padding: 0 4px; font-size: 16px; letter-spacing: -.3px; } .cm-scard > small { padding: 0 4px; color: var(--cm-mut); font-size: 13px; }
.cm-scard-a { display: flex; align-items: center; gap: 6px; padding: 4px 4px 0; font-size: 12.5px; color: var(--cm-ink2); font-weight: 600; }
.cm-shero { position: relative; overflow: hidden; margin-bottom: 14px; border-radius: 28px; min-height: 260px; display: flex; align-items: flex-end; background: linear-gradient(140deg, var(--tn), #fff 140%); box-shadow: var(--cm-sh); }
.cm-shero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cm-shero:has(.cm-shero-bg)::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 13, 18, 0) 20%, rgba(13, 13, 18, .78)); }
.cm-shero-in { position: relative; z-index: 1; padding: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.cm-shero:has(.cm-shero-bg) .cm-shero-in { color: #fff; } .cm-shero:has(.cm-shero-bg) .cm-eyebrow { color: rgba(255, 255, 255, .8); }
.cm-shero h1 { margin: 0; font-size: clamp(26px, 3.4vw, 34px); letter-spacing: -1px; line-height: 1.2; }
.cm-shero-a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.cm-outline { list-style: none; margin: 10px 0 0; padding: 0; }
.cm-outline a { display: flex; align-items: center; gap: 14px; padding: 12px 8px; border-radius: 14px; text-decoration: none; }
.cm-outline a:hover { background: var(--cm-bg); }
.cm-outline-n { flex: none; font-size: 20px; font-weight: 900; color: var(--cm-ac); letter-spacing: -.5px; width: 32px; }
.cm-outline-t { flex: 1; min-width: 0; } .cm-outline-t b { display: block; font-size: 15px; } .cm-outline-t small { display: inline-flex; align-items: center; gap: 4px; color: var(--cm-mut); font-size: 12.5px; } .cm-outline-t .cm-i { width: 12px; height: 12px; }
.cm-outline img { flex: none; width: 56px; height: 56px; border-radius: 12px; object-fit: cover; }
.cm-outline li.is-locked a { opacity: .55; } .cm-outline a > .cm-i { color: var(--cm-mut); width: 18px; height: 18px; }
.cm-gate { text-align: center; padding: 50px 24px; border-radius: 28px; background: linear-gradient(160deg, var(--tn) 0%, #fff 70%); box-shadow: var(--cm-sh); }
.cm-gate-ic { width: 84px; height: 84px; margin: 0 auto 16px; border-radius: 28px; display: grid; place-items: center; background: #fff; color: var(--tk); box-shadow: var(--cm-sh); }
.cm-gate-ic .cm-i { width: 38px; height: 38px; stroke-width: 1.6; }
.cm-gate h1 { margin: 6px 0; font-size: 24px; letter-spacing: -.7px; } .cm-gate > p:not(.cm-eyebrow) { margin: 0 auto; max-width: 420px; color: var(--cm-ink2); }
.cm-gate-a { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
.cm-courses.is-gate { margin-top: 26px; text-align: left; }
.cm-crumb { display: flex; align-items: center; gap: 6px; margin: 0 0 14px; font-size: 13.5px; font-weight: 700; color: var(--cm-mut); }
.cm-crumb a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; } .cm-crumb > .cm-i { width: 14px; height: 14px; }
.cm-switch { flex: none; position: relative; width: 40px; height: 24px; border-radius: 99px; background: #d9dbe4; transition: background .2s; }
.cm-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .25s var(--cm-spring); }
.cm-cmp-opt { display: flex; align-items: center; gap: 10px; padding: 10px 2px; font-size: 14px; cursor: pointer; }
.cm-cmp-opt input { position: absolute; opacity: 0; }
.cm-cmp-opt input:checked + .cm-switch { background: var(--cm-ac); } .cm-cmp-opt input:checked + .cm-switch::after { transform: translateX(16px); }
.cm-cmp-opt input:focus-visible + .cm-switch { outline: 2px solid #fed7aa; outline-offset: 2px; }

/* 숏코드 묶음 */
.cm-embed { margin: 1.5em 0; padding: 20px; border-radius: 22px; background: #fff; box-shadow: var(--cm-sh); }
.cm-embed-h { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 12px; }
.cm-embed-h h3 { margin: 2px 0 0; font-size: 19px; letter-spacing: -.5px; flex: 1; }
.cm-embed-h a { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 700; color: var(--cm-mut); text-decoration: none; } .cm-embed-h .cm-i { width: 16px; height: 16px; }
.cm-embed ul { list-style: none; margin: 0; padding: 0; }
.cm-embed.is-list li a { display: flex; gap: 12px; padding: 10px 6px; border-top: 1px solid var(--cm-line); text-decoration: none; }
.cm-embed.is-cards ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.cm-embed.is-cards li a { display: flex; flex-direction: column; gap: 8px; text-decoration: none; }
.cm-embed-th { aspect-ratio: 1; border-radius: 14px; overflow: hidden; } .cm-embed-th img { width: 100%; height: 100%; object-fit: cover; }
.cm-embed-t b { display: block; font-size: 14.5px; line-height: 1.4; } .cm-embed-t small { color: var(--cm-mut); font-size: 12px; }
.cm-embed-pf { display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: 22px; background: #fff; box-shadow: var(--cm-sh); }
.cm-embed-pf > div { flex: 1; min-width: 0; } .cm-embed-pf b { font-size: 17px; } .cm-embed-pf small { display: block; color: var(--cm-mut); } .cm-embed-pf p { margin: 6px 0 0; font-size: 14px; }
.cm-embed-st { display: flex; gap: 14px; color: var(--cm-mut); font-size: 13px; } .cm-embed-st b { color: var(--cm-ink); font-size: 14px; }

/* ── 시트 (아래에서 올라오는 창 · 데스크톱은 가운데 창) ──────────────────────── */
.cm-sheet { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.cm-sheet-bg { position: absolute; inset: 0; background: rgba(13, 13, 18, .5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity .3s; }
.cm-sheet-p { position: relative; z-index: 1; width: 100%; max-width: 560px; max-height: min(86vh, 820px); display: flex; flex-direction: column; border-radius: 26px; background: #fff; box-shadow: var(--cm-sh2); color: var(--cm-ink); overflow: hidden; opacity: 0; transform: translateY(16px) scale(.98); transition: transform .38s var(--cm-spring), opacity .25s; }
.cm-sheet.is-open .cm-sheet-bg { opacity: 1; }
.cm-sheet.is-open .cm-sheet-p { opacity: 1; transform: none; }
.cm-grab { display: none; }
.cm-sheet-h { display: flex; align-items: center; justify-content: center; position: relative; min-height: 54px; padding: 0 50px; border-bottom: 1px solid var(--cm-line); font-weight: 800; font-size: 16px; }
.cm-sheet-h .cm-ib { position: absolute; right: 8px; top: 7px; }
.cm-sheet-b { overflow-y: auto; overscroll-behavior: contain; flex: 1; }
/* 동작 목록 */
.cm-menu { list-style: none; margin: 0; padding: 8px; }
.cm-menu button, .cm-menu a { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 52px; padding: 0 14px; border: 0; border-radius: 14px; background: none; font: inherit; font-size: 15.5px; font-weight: 600; color: var(--cm-ink); text-decoration: none; cursor: pointer; text-align: left; }
.cm-menu button:hover, .cm-menu a:hover { background: var(--cm-bg); }
.cm-menu .is-danger { color: #e11d48; }
.cm-menu .cm-i { width: 22px; height: 22px; }
.cm-menu-sep { height: 1px; margin: 6px 10px; background: var(--cm-line); }
.cm-share-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 18px 16px 8px; }
.cm-share-grid button { display: flex; flex-direction: column; align-items: center; gap: 8px; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--cm-ink2); cursor: pointer; }
.cm-share-grid span { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--cm-bg); transition: transform .2s var(--cm-spring); }
.cm-share-grid button:active span { transform: scale(.9); }
.cm-share-grid .is-kakao span { background: #FEE500; color: #191600; } .cm-share-grid .is-kakao .cm-i { fill: currentColor; stroke: none; }
.cm-share-url { display: flex; gap: 8px; align-items: center; margin: 8px 16px 18px; padding: 6px 6px 6px 14px; border-radius: 14px; background: var(--cm-bg); }
.cm-share-url input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 13.5px; color: var(--cm-ink2); outline: 0; }
.cm-report { padding: 8px 16px 18px; }
.cm-report label { display: flex; align-items: center; gap: 12px; padding: 12px 6px; border-bottom: 1px solid var(--cm-line); font-size: 15px; cursor: pointer; }
.cm-report label input { width: 20px; height: 20px; accent-color: var(--cm-ac); }
.cm-report textarea { width: 100%; margin-top: 12px; padding: 12px 14px; border: 0; border-radius: 14px; background: var(--cm-bg); font: inherit; resize: vertical; outline: 0; }
.cm-report footer { display: flex; justify-content: flex-end; margin-top: 12px; }
.cm-sheet--comments .cm-sheet-p { max-width: 560px; height: min(80vh, 760px); }
.cm-sheet--comments .cm-cmts { height: 100%; }
.cm-sheet--comments .cm-cmt-list { overflow-y: auto; overscroll-behavior: contain; }
.cm-sheet--viewer { padding: 0; }
.cm-sheet--viewer .cm-sheet-bg { background: rgba(5, 5, 8, .94); }
.cm-sheet--viewer .cm-sheet-p { max-width: none; max-height: none; height: 100%; border-radius: 0; background: none; box-shadow: none; }
.cm-viewer img { width: 100%; height: 100%; object-fit: contain; }
.cm-viewer-x { position: absolute; top: 14px; right: 14px; z-index: 3; color: #fff !important; background: rgba(255, 255, 255, .12) !important; }

/* 쓰기 창 */
.cm-sheet--compose .cm-sheet-p { max-width: 600px; height: min(88vh, 860px); }
.cm-cmp { display: flex; flex-direction: column; height: 100%; }
.cm-cmp-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 58px; padding: 0 12px 0 8px; border-bottom: 1px solid var(--cm-line); }
.cm-cmp-h b { font-size: 16px; }
.cm-cmp-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px; position: relative; }
.cm-cmp-who { display: flex; align-items: center; gap: 12px; } .cm-cmp-who b { display: block; } .cm-cmp-who small { color: var(--cm-mut); font-size: 12.5px; }
.cm-cmp-boards { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 14px -18px 6px; padding: 0 18px 4px; }
.cm-cmp-boards::-webkit-scrollbar { display: none; }
.cm-cmp-boards.is-wrap { flex-wrap: wrap; margin: 8px 0 0; padding: 0; }
.cm-bpick { flex: none; position: relative; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px 0 7px; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--cm-line2); font-size: 13.5px; font-weight: 700; cursor: pointer; transition: box-shadow .15s, background .15s; }
.cm-bpick input { position: absolute; opacity: 0; pointer-events: none; }
.cm-bpick:has(input:checked) { background: var(--tn); box-shadow: inset 0 0 0 2px var(--tk); color: var(--tk); }
.cm-bpick:has(input:focus-visible) { outline: 2px solid #fed7aa; outline-offset: 2px; }
.cm-cmp-title { width: 100%; margin-top: 10px; padding: 8px 0; border: 0; outline: 0; font: inherit; font-size: 20px; font-weight: 800; letter-spacing: -.5px; color: var(--cm-ink); background: none; }
.cm-cmp-title::placeholder { color: #c4c6d2; }
.cm-cmp-text { width: 100%; min-height: 140px; padding: 4px 0; border: 0; outline: 0; resize: none; font: inherit; font-size: 16px; line-height: 1.65; color: var(--cm-ink); background: none; }
.cm-cmp-text::placeholder { color: #b0b3c1; }
.cm-cmp-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 10px; }
.cm-cmp-media.is-page { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.cm-pv { position: relative; margin: 0; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--cm-bg); cursor: grab; animation: cmIn .3s var(--cm-ease); }
.cm-pv img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.cm-pv.is-drag { opacity: .4; }
.cm-pv:first-child::after { content: '대표'; position: absolute; left: 6px; top: 6px; height: 20px; padding: 0 7px; border-radius: 99px; background: rgba(13, 13, 18, .6); color: #fff; font-size: 10.5px; font-weight: 800; display: grid; place-items: center; }
.cm-pv-x { position: absolute; top: 5px; right: 5px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(13, 13, 18, .65); color: #fff; display: grid; place-items: center; cursor: pointer; }
.cm-pv-x .cm-i { width: 14px; height: 14px; stroke-width: 2.6; }
.cm-pv-add { aspect-ratio: 1; border-radius: 14px; border: 2px dashed var(--cm-line2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--cm-mut); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.cm-cmp-files { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cm-cmp-files li { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border-radius: 12px; background: var(--cm-bg); font-size: 13.5px; }
.cm-cmp-files li span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-cmp-drop { position: absolute; inset: 8px; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; margin: 0; border-radius: 18px; border: 2.5px dashed var(--cm-ac); background: rgba(255, 241, 230, .92); color: var(--cm-acd); font-weight: 800; }
.cm-cmp-drop .cm-i { width: 34px; height: 34px; }
.cm-cmp-tools { display: flex; align-items: center; gap: 4px; padding: 8px 12px calc(8px + var(--cm-safe)); border-top: 1px solid var(--cm-line); }
.cm-tool { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 0; border-radius: 12px; background: none; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--cm-ink2); cursor: pointer; }
.cm-tool:hover { background: var(--cm-bg); }
.cm-tool .cm-i { width: 21px; height: 21px; }
.cm-tool:nth-child(1) .cm-i { color: #16a34a; } .cm-tool:nth-child(2) .cm-i { color: #2563eb; } .cm-tool:nth-child(3) .cm-i { color: #9333ea; }
.cm-cmp-count { font-size: 12px; color: var(--cm-mut); font-variant-numeric: tabular-nums; }

/* 토스트 */
.cm-toast { position: fixed; left: 50%; bottom: calc(28px + var(--cm-safe)); z-index: 1100; transform: translate(-50%, 20px); max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 16px; background: rgba(22, 22, 31, .92); color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .4); opacity: 0; pointer-events: none; transition: opacity .25s, transform .35s var(--cm-spring); backdrop-filter: blur(8px); display: flex; align-items: center; gap: 10px; }
.cm-toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.cm-toast a { color: #FDBA74; font-weight: 800; text-decoration: none; white-space: nowrap; }

/* 서랍 (모바일 게시판 목록) */
.cm-drawer { padding-bottom: calc(12px + var(--cm-safe)); }
.cm-drawer-top { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 16px 16px 6px; }
.cm-drawer-list { padding: 4px 8px 6px; overflow-y: auto; }
.cm-dl-g .cm-eyebrow { padding: 14px 10px 4px; }
.cm-dl-b { min-height: 50px; font-size: 15px; }
.cm-drawer .cm-side-adm { margin: 6px 16px 0; }

/* ── 프로젝트 협업 ──────────────────────────────────────────────────── */
.cm-pj-h { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: 24px; background: linear-gradient(140deg, var(--tn), #fff 75%); box-shadow: var(--cm-sh); }
.cm-pj-ht { flex: 1; min-width: 0; } .cm-pj-ht h1 { margin: 2px 0; font-size: clamp(21px, 2.6vw, 26px); letter-spacing: -.7px; } .cm-pj-ht p:not(.cm-eyebrow) { margin: 0; color: var(--cm-ink2); font-size: 14px; }
.cm-pj-team { display: flex; } .cm-pj-team .cm-av { margin-left: -8px; box-shadow: 0 0 0 2.5px #fff; }
.cm-pj .cm-intro { margin: 12px 0 0; background: #fff; box-shadow: var(--cm-sh); }
.cm-pj-tabs { position: sticky; top: var(--cm-top); z-index: 15; display: flex; gap: 4px; margin: 14px 0; padding: 5px; border-radius: 16px; background: rgba(255, 255, 255, .85); backdrop-filter: blur(14px); box-shadow: 0 0 0 1px var(--cm-line); overflow-x: auto; scrollbar-width: none; }
.cm-pj-tabs a { flex: 1; min-width: max-content; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: 12px; font-size: 14px; font-weight: 700; color: var(--cm-mut); text-decoration: none; transition: background .15s, color .15s; }
.cm-pj-tabs a .cm-i { width: 18px; height: 18px; }
.cm-pj-tabs a.is-on { background: var(--cm-ink); color: #fff; }
.cm-pj-body { transition: opacity .2s; } .cm-pj-body.is-busy { opacity: .55; pointer-events: none; }
.cm-pj-mine { margin-bottom: 14px; }
.cm-pj-mine-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 8px 0 4px; }
.cm-pj-mine-row a { flex: none; display: flex; flex-direction: column; gap: 6px; max-width: 220px; padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: var(--cm-sh); text-decoration: none; }
.cm-pj-mine-row b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-kb { display: flex; gap: 14px; overflow-x: auto; padding: 2px 2px 16px; scroll-snap-type: x proximity; align-items: flex-start; }
.cm-kb-col { flex: 0 0 300px; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 22px; background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px var(--cm-line); scroll-snap-align: start; max-height: calc(100vh - var(--cm-top) - 190px); }
.cm-kb-col.is-over { background: var(--cm-acs); box-shadow: inset 0 0 0 2px var(--cm-ac); }
.cm-kb-col.is-add { flex-basis: 240px; background: none; box-shadow: inset 0 0 0 2px dashed var(--cm-line2); border: 2px dashed var(--cm-line2); }
.cm-kb-h { display: flex; align-items: center; gap: 8px; padding: 2px 4px 4px; }
.cm-kb-h b { font-size: 15px; } .cm-kb-h em { font-style: normal; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 8px; background: #fff; font-size: 12px; font-weight: 800; color: var(--cm-mut); display: grid; place-items: center; }
.cm-kb-list { display: flex; flex-direction: column; gap: 8px; min-height: 40px; overflow-y: auto; }
.cm-kb-card { position: relative; padding: 14px 14px 12px; border-radius: 16px; background: #fff; box-shadow: var(--cm-sh); cursor: grab; transition: transform .2s var(--cm-ease), box-shadow .2s; }
.cm-kb-card:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -16px rgba(22, 22, 31, .3); }
.cm-kb-card.is-drag { opacity: .4; transform: rotate(2deg); }
.cm-kb-t { display: block; padding-right: 26px; font-size: 15px; font-weight: 800; letter-spacing: -.3px; text-decoration: none; }
.cm-kb-more { position: absolute; right: 6px; top: 8px; color: var(--cm-mut); }
.cm-pbar { height: 6px; margin: 12px 0 8px; border-radius: 99px; background: #EFEFF5; overflow: hidden; }
.cm-pbar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #F97316, #E1306C); transition: width .6s var(--cm-ease); }
.cm-kb-m { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--cm-mut); font-weight: 700; }
.cm-kb-m > span:first-child { display: inline-flex; align-items: center; gap: 3px; } .cm-kb-m > span:first-child .cm-i { width: 14px; height: 14px; }
.cm-stack { display: flex; } .cm-stack .cm-av { margin-left: -6px; box-shadow: 0 0 0 2px #fff; }
.cm-kb-empty { margin: 4px 0; padding: 18px 10px; border-radius: 14px; border: 1.5px dashed var(--cm-line2); text-align: center; color: var(--cm-mut); font-size: 13px; }
.cm-kb-add { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-radius: 14px; background: rgba(255, 255, 255, .8); color: var(--cm-mut); }
.cm-kb-add .cm-i { width: 18px; height: 18px; }
.cm-kb-add input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 14.5px; color: var(--cm-ink); }
.cm-kb-add:focus-within { background: #fff; box-shadow: inset 0 0 0 2px var(--cm-ac); color: var(--cm-ac); }
/* 달력 */
.cm-cal-h { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.cm-cal-h h2 { margin: 0 6px; font-size: 20px; letter-spacing: -.5px; font-weight: 600; } .cm-cal-h h2 b { font-weight: 900; }
.cm-cal-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 14px; align-items: start; }
.cm-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; border-radius: 22px; overflow: hidden; background: var(--cm-line); box-shadow: var(--cm-sh); }
.cm-cal-w { padding: 10px 0; background: #fff; text-align: center; font-size: 12px; font-weight: 800; color: var(--cm-mut); }
.cm-cal-w.is-sun, .cm-cal-d.is-sun .cm-cal-n { color: #e11d48; } .cm-cal-w.is-sat, .cm-cal-d.is-sat .cm-cal-n { color: #2563eb; }
.cm-cal-d { min-height: 108px; display: flex; flex-direction: column; gap: 3px; padding: 6px; border: 0; background: #fff; font: inherit; text-align: left; cursor: pointer; transition: background .15s; min-width: 0; }
.cm-cal-d:hover { background: #FAFAFD; }
.cm-cal-d.is-out { background: #FAFAFD; } .cm-cal-d.is-out .cm-cal-n { opacity: .4; }
.cm-cal-d.is-sel { background: var(--cm-acs); }
.cm-cal-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; }
.cm-cal-d.is-today .cm-cal-n { background: var(--cm-ac); color: #fff !important; }
.cm-cal-c { display: block; padding: 2px 6px; border-radius: 6px; font-size: 11.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-cal-c i { font-style: normal; opacity: .7; margin-right: 4px; }
.cm-cal-c.is-ev { background: #E0ECFF; color: #1d4ed8; } .cm-cal-c.is-mt { background: #EDE4FB; color: #6d28d9; } .cm-cal-c.is-due { background: var(--cm-acs); color: var(--cm-acd); } .cm-cal-c.is-done { opacity: .5; text-decoration: line-through; }
.cm-cal-more { font-size: 11px; font-weight: 800; color: var(--cm-mut); padding-left: 4px; }
.cm-cal-dots { display: none; gap: 3px; justify-content: center; margin-top: auto; } .cm-cal-dots i { width: 5px; height: 5px; border-radius: 50%; } .cm-cal-dots .is-ev { background: #3b82f6; } .cm-cal-dots .is-mt { background: #8b5cf6; } .cm-cal-dots .is-due { background: var(--cm-ac); }
.cm-cal-side { position: sticky; top: calc(var(--cm-top) + 70px); padding: 16px; border-radius: 22px; background: #fff; box-shadow: var(--cm-sh); }
.cm-agenda { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cm-agenda li > * { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border: 0; border-radius: 14px; background: none; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.cm-agenda li > *:hover { background: var(--cm-bg); }
.cm-agenda b { display: block; font-size: 14px; } .cm-agenda small { color: var(--cm-mut); font-size: 12px; }
.cm-agenda-d { flex: none; width: 46px; height: 50px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #E0ECFF; color: #1d4ed8; }
.cm-agenda-d b { font-size: 18px; line-height: 1.1; } .cm-agenda-d small { font-size: 10.5px; color: inherit !important; font-weight: 700; }
.cm-agenda .is-mt .cm-agenda-d { background: #EDE4FB; color: #6d28d9; } .cm-agenda .is-due .cm-agenda-d { background: var(--cm-acs); color: var(--cm-acd); }
.cm-agenda-empty { padding: 20px 8px; text-align: center; color: var(--cm-mut); font-size: 13px; }
.cm-cal-legend { display: flex; gap: 12px; margin: 14px 0 0; font-size: 12px; color: var(--cm-mut); font-weight: 700; }
.cm-cal-legend span::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; } .cm-cal-legend .is-ev::before { background: #3b82f6; } .cm-cal-legend .is-mt::before { background: #8b5cf6; } .cm-cal-legend .is-due::before { background: var(--cm-ac); }
.cm-evd { padding: 18px 20px 20px; }
.cm-evd h3 { margin: 4px 0 10px; font-size: 20px; letter-spacing: -.5px; }
.cm-evd p { display: flex; align-items: center; gap: 8px; margin: 6px 0; color: var(--cm-ink2); } .cm-evd p .cm-i { width: 17px; height: 17px; color: var(--cm-mut); }
.cm-evd footer { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
/* 회의 */
.cm-mt { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px; align-items: start; }
.cm-mt-list { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 22px; background: #fff; box-shadow: var(--cm-sh); position: sticky; top: calc(var(--cm-top) + 70px); max-height: calc(100vh - var(--cm-top) - 100px); overflow-y: auto; }
.cm-mt-list > .cm-btn { margin-bottom: 6px; }
.cm-mt-i { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 14px; text-decoration: none; }
.cm-mt-i:hover { background: var(--cm-bg); } .cm-mt-i.is-on { background: var(--cm-ink); color: #fff; } .cm-mt-i.is-on small { color: rgba(255, 255, 255, .7); }
.cm-mt-i .cm-agenda-d { background: #EDE4FB; color: #6d28d9; } .cm-mt-i.is-past .cm-agenda-d { background: #EFEFF5; color: var(--cm-mut); }
.cm-mt-i > span:last-child { min-width: 0; } .cm-mt-i b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cm-mt-i small { color: var(--cm-mut); font-size: 12px; }
.cm-mt-detail { padding: 22px; border-radius: 22px; background: #fff; box-shadow: var(--cm-sh); }
.cm-mt-h { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.cm-mt-h h2 { margin: 4px 0; font-size: 22px; letter-spacing: -.6px; }
.cm-mt-meta { display: flex; gap: 14px; margin: 0; font-size: 13px; color: var(--cm-mut); font-weight: 600; } .cm-mt-meta span { display: inline-flex; align-items: center; gap: 4px; } .cm-mt-meta .cm-i { width: 15px; height: 15px; }
.cm-mt-a { display: flex; gap: 6px; }
.cm-mt-topic { margin-top: 16px; padding: 14px 16px; border-radius: 16px; background: var(--cm-bg); } .cm-mt-topic p:last-child { margin: 4px 0 0; }
.cm-mt-att { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; } .cm-mt-att .cm-chip { height: 32px; padding: 0 12px 0 4px; }
.cm-mt-sec { margin-top: 22px; } .cm-mt-sec > header { margin-bottom: 8px; }
.cm-ag { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cm-ag li { display: flex; gap: 12px; padding: 14px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--cm-line); }
.cm-ag li.is-done { opacity: .6; } .cm-ag li.is-done .cm-ag-b > b { text-decoration: line-through; }
.cm-ag-n { flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--cm-ink); color: #fff; font-size: 13px; font-weight: 900; }
.cm-ag-b { flex: 1; min-width: 0; } .cm-ag-b > b { font-size: 15px; } .cm-ag-b p { margin: 4px 0 0; font-size: 14px; color: var(--cm-ink2); }
.cm-ag-dec { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px !important; padding: 10px 12px; border-radius: 12px; background: #FFF7ED; }
.cm-ag-dec .cm-i { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--cm-ac); stroke-width: 2.6; } .cm-ag-dec b { color: var(--cm-acd); margin-right: 4px; }
.cm-ag-m { display: flex; gap: 6px; flex-wrap: wrap; } .cm-ag-m .cm-chip { height: 28px; padding: 0 10px 0 4px; font-size: 12.5px; }
.cm-ag-a { display: flex; flex-direction: column; gap: 2px; }
/* 자료실 · 파일 · 올리기 */
.cm-lib-h { display: flex; gap: 6px; align-items: center; overflow-x: auto; scrollbar-width: none; padding-bottom: 12px; }
.cm-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 26px 16px; margin-bottom: 12px; border-radius: 22px; border: 2px dashed var(--cm-line2); background: rgba(255, 255, 255, .6); text-align: center; cursor: pointer; overflow: hidden; transition: border-color .15s, background .15s; }
.cm-drop:hover, .cm-drop.is-over { border-color: var(--cm-ac); background: var(--cm-acs); }
.cm-drop-ic { width: 52px; height: 52px; border-radius: 18px; display: grid; place-items: center; background: #fff; color: var(--cm-ac); box-shadow: var(--cm-sh); margin-bottom: 6px; }
.cm-drop small { color: var(--cm-mut); font-size: 12.5px; }
.cm-drop.is-sm { flex-direction: row; gap: 8px; padding: 12px; font-weight: 700; font-size: 14px; color: var(--cm-ink2); border-radius: 14px; }
.cm-drop.is-sm .cm-i { width: 18px; height: 18px; color: var(--cm-ac); }
.cm-drop-prog { position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: var(--cm-ac); transition: width .2s; }
.cm-lib-files { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cm-lib-files li { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 10px; border-radius: 16px; background: #fff; box-shadow: var(--cm-sh); }
.cm-lib-files li > a:not(.cm-ib) { flex: 1; min-width: 0; text-decoration: none; }
.cm-lib-files b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cm-lib-files small { color: var(--cm-mut); font-size: 12px; }
.cm-lib-files .cm-ext { background: var(--cm-bg); box-shadow: none; }
/* 업무 */
.cm-pv-h { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px; border-radius: 24px; background: #fff; box-shadow: var(--cm-sh); }
.cm-pv-h h1 { margin: 2px 0 6px; font-size: clamp(22px, 2.8vw, 28px); letter-spacing: -.8px; }
.cm-pv-m { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--cm-mut); font-size: 13px; font-weight: 600; }
.cm-pv-ring { --p: 0; flex: none; width: 112px; height: 112px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(closest-side, #fff 78%, transparent 79% 100%), conic-gradient(#F97316 calc(var(--p) * 1%), #EFEFF5 0); }
.cm-pv-ring b { font-size: 26px; font-weight: 900; letter-spacing: -1px; line-height: 1; } .cm-pv-ring b small { font-size: 13px; } .cm-pv-ring span { font-size: 11.5px; color: var(--cm-mut); font-weight: 700; }
.cm-pv-tools { display: flex; align-items: center; gap: 8px; margin: 14px 0; flex-wrap: wrap; }
.cm-taskadd { margin-bottom: 12px; border-radius: 20px; background: #fff; box-shadow: var(--cm-sh); overflow: hidden; }
.cm-taskadd-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 14px; }
.cm-taskadd-ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--cm-acs); color: var(--cm-ac); flex: none; }
.cm-taskadd-ic .cm-i { width: 17px; height: 17px; stroke-width: 2.6; }
.cm-taskadd-row input { flex: 1; min-width: 0; height: 46px; border: 0; outline: 0; background: none; font: inherit; font-size: 15.5px; font-weight: 600; }
.cm-taskadd-more { display: none; padding: 0 14px 14px; } .cm-taskadd.is-open .cm-taskadd-more { display: block; animation: cmIn .3s var(--cm-ease); }
.cm-taskadd-more textarea { width: 100%; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--cm-bg); font: inherit; resize: none; outline: 0; }
.cm-taskadd-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.cm-tasks { list-style: none; margin: 0; padding: 6px; border-radius: 22px; background: #fff; box-shadow: var(--cm-sh); }
.cm-tasks:empty { display: none; }
.cm-task { display: flex; align-items: center; gap: 12px; padding: 10px 10px; border-radius: 14px; transition: background .15s; }
.cm-task:hover { background: #FAFAFD; }
.cm-task + .cm-task { border-top: 1px solid var(--cm-line); }
.cm-task-ck { flex: none; width: 26px; height: 26px; border-radius: 9px; border: 2px solid var(--cm-line2); background: #fff; color: transparent; display: grid; place-items: center; cursor: pointer; padding: 0; transition: background .2s, border-color .2s, color .2s, transform .2s var(--cm-spring); }
.cm-task-ck .cm-i { width: 16px; height: 16px; stroke-width: 3; }
.cm-task-ck:hover { border-color: #16a34a; }
.cm-task.is-done .cm-task-ck { background: #16a34a; border-color: #16a34a; color: #fff; }
.cm-task-ck:active { transform: scale(.85); }
.cm-task-b { flex: 1; min-width: 0; text-decoration: none; }
.cm-task-b b { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-task-b small { display: inline-flex; align-items: center; gap: 3px; color: var(--cm-mut); font-size: 12.5px; } .cm-task-b small .cm-i { width: 13px; height: 13px; }
.cm-task.is-done .cm-task-b b { color: var(--cm-mut); text-decoration: line-through; }
.cm-task-m { display: flex; align-items: center; gap: 6px; }
/* 프로젝트 폼 (시트) */
.cm-pjform { padding: 0 20px 18px; overflow-y: auto; }
.cm-pjform > header { position: sticky; top: 0; z-index: 2; margin: 0 -20px 14px; padding: 16px 20px; background: #fff; border-bottom: 1px solid var(--cm-line); font-size: 16px; }
.cm-pjform > footer { position: sticky; bottom: -18px; display: flex; gap: 8px; margin: 14px -20px -18px; padding: 12px 20px calc(12px + var(--cm-safe)); background: #fff; border-top: 1px solid var(--cm-line); }
.cm-mpick { display: flex; flex-wrap: wrap; gap: 6px; max-height: 180px; overflow-y: auto; }
.cm-mpick-i { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 4px; border-radius: 99px; background: var(--cm-bg); font-size: 13px; font-weight: 700; cursor: pointer; }
.cm-mpick-i input { position: absolute; opacity: 0; }
.cm-mpick-i:has(input:checked) { background: var(--cm-ink); color: #fff; }

/* ── 넓은 화면 단계 ────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .cm { grid-template-columns: 220px minmax(0, 1fr); }
  .cm-rail { display: none; }
  .cm-post.has-media { grid-template-columns: minmax(0, 1.1fr) minmax(320px, 1fr); }
}
@media (max-width: 1000px) {
  .cm-cal-wrap { grid-template-columns: 1fr; }
  .cm-cal-side { position: static; }
  .cm-mt { grid-template-columns: 1fr; }
  .cm-mt-list { position: static; max-height: none; }
}

/* ── 모바일: 앱처럼 ─────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .cm { display: block; padding: 0 0 calc(110px + var(--cm-safe)); font-size: 15px; }
  .cm-side { display: none; }
  .cm-main { max-width: none; }
  .cm-appbar { position: sticky; top: var(--cm-top); z-index: 40; display: flex; align-items: center; gap: 2px; height: 56px; padding: 0 6px 0 10px; background: rgba(244, 244, 249, .86); backdrop-filter: saturate(1.8) blur(16px); -webkit-backdrop-filter: saturate(1.8) blur(16px); transition: transform .3s var(--cm-ease), box-shadow .2s; }
  .cm-appbar.is-scrolled { box-shadow: 0 1px 0 var(--cm-line); }
  .cm-appbar-t { display: inline-flex; align-items: center; gap: 4px; min-width: 0; height: 44px; padding: 0 8px; border: 0; background: none; font: inherit; color: var(--cm-ink); cursor: pointer; border-radius: 12px; }
  .cm-appbar-t b { font-size: 20px; font-weight: 900; letter-spacing: -.8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 52vw; }
  .cm-appbar-t .cm-i { width: 18px; height: 18px; color: var(--cm-mut); stroke-width: 2.4; }
  .cm-appbar .cm-ib .cm-i { width: 24px; height: 24px; }
  .cm-ib-av .cm-av { box-shadow: 0 0 0 2px #fff; }
  .cm-login-pill { height: 34px; padding: 0 14px; margin-left: 4px; border-radius: 99px; background: var(--cm-ink); color: #fff !important; font-size: 13px; font-weight: 800; text-decoration: none; display: inline-flex; align-items: center; }
  .cm-seg { top: calc(var(--cm-top) + 56px); margin: 0 12px 10px; }
  .cm-stories { padding: 8px 14px 12px; margin: 0; gap: 12px; }
  .cm-story { width: 68px; } .cm-story-r { width: 66px; height: 66px; } .cm-story b { max-width: 68px; font-size: 11.5px; }
  .cm-prompt { margin: 0 12px 12px; width: auto; border-radius: 20px; }
  .cm-feed { gap: 8px; }
  .cm-card { border-radius: 0; box-shadow: none; border-top: 1px solid var(--cm-line); border-bottom: 1px solid var(--cm-line); }
  .cm-card-h { padding: 10px 4px 8px 12px; }
  .cm-media { max-height: none; }
  .cm-media-nav { display: none; }
  .cm-cap { padding: 2px 14px 2px; }
  .cm-card-f { padding: 2px 14px 12px; }
  .cm-acts { padding: 4px 4px 0; }
  .cm-hero { margin: 4px 12px 12px; padding: 18px; border-radius: 24px; }
  .cm-hero-in { gap: 14px; } .cm-bi--xl { width: 56px; height: 56px; border-radius: 18px; } .cm-bi--xl .cm-i { width: 26px; height: 26px; }
  .cm-hero-a { width: 100%; } .cm-hero-a .cm-btn { flex: 1; }
  .cm-notices { margin: 0 12px 12px; }
  .cm-pagehead { padding: 8px 16px 0; }
  .cm-empty { margin: 0 12px; border-radius: 24px; }
  .cm-sug { margin: 0; border-radius: 0; box-shadow: none; border-top: 1px solid var(--cm-line); border-bottom: 1px solid var(--cm-line); }
  .cm-sug:not(.cm-sug--inline) { margin: 12px; border-radius: 22px; border: 0; }
  .cm-box { border-radius: 20px; }
  .cm-search { top: calc(var(--cm-top) + 62px); margin: 6px 12px 14px; }
  .cm-search ~ .cm-box, .cm-search ~ .cm-empty, .cm-search ~ .cm-pagehead { margin-left: 12px; margin-right: 12px; }
  .cm-result-h { margin-left: 16px; }
  .cm-two, .cm-series-grid, .cm-podium, .cm-board-rank, .cm-myscore, .cm-shero, .cm-gate { margin-left: 12px; margin-right: 12px; }
  .cm-series-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cm-scard { border-radius: 18px; padding: 8px 8px 12px; } .cm-scard b { font-size: 14.5px; } .cm-scard > small { display: none; }
  .cm-shero { border-radius: 24px; min-height: 240px; }
  .cm-shero ~ .cm-box, .cm-shero ~ .cm-two { margin-left: 12px; margin-right: 12px; }
  .cm-shero ~ .cm-box { margin-bottom: 12px; }

  /* 글 화면 */
  .cm-post { border-radius: 0; box-shadow: none; }
  .cm-post.has-media { display: flex; flex-direction: column; max-height: none; min-height: 0; }
  .cm-post.has-media .cm-post-side { display: contents; }
  .cm-post.has-media .cm-post-h { order: -1; border-bottom: 0; }
  .cm-post-media .cm-media { height: auto; aspect-ratio: 1; }
  .cm-post-media .cm-media.is-detail .cm-track img { object-fit: cover; }
  .cm-post-body { padding: 14px 16px 4px; }
  .cm-prose { font-size: 15.5px; }
  .cm-cbox { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 8px 10px calc(8px + var(--cm-safe)); box-shadow: 0 -8px 24px -12px rgba(22, 22, 31, .15); }
  body.cm-body--post .enm-bar { display: none; }
  body.cm-body--post { padding-bottom: 0 !important; }
  body.cm-body--post .cm { padding-bottom: calc(90px + var(--cm-safe)); }
  .cm-related { padding: 0 12px; }
  .cm-grid3 { gap: 2px; } .cm-tile { border-radius: 0; }

  /* 프로필 */
  .cm-pf { border-radius: 0; box-shadow: none; margin-bottom: 2px; }
  .cm-pf-cover { height: 130px; }
  .cm-pf-head { padding: 0 16px; margin-top: -44px; gap: 14px; }
  .cm-pf-av .cm-av--xl { width: 92px; height: 92px; } .cm-pf-avbtn { width: 30px; height: 30px; right: -2px; bottom: 2px; } .cm-pf-avbtn .cm-i { width: 15px; height: 15px; }
  .cm-pf-stats { justify-content: space-between; gap: 0; padding-bottom: 4px; }
  .cm-pf-stats a { min-width: 0; padding: 4px; } .cm-pf-stats b { font-size: 18px; } .cm-pf-stats span { font-size: 11.5px; }
  .cm-pf-id { padding: 12px 16px 0; } .cm-pf-id h1 { font-size: 19px; }
  .cm-pf-bio { font-size: 14.5px; }
  .cm-pf-act { padding: 14px 16px 0; gap: 6px; }
  .cm-pf-act .cm-btn--soft, .cm-pf-act .cm-follow { height: 38px; font-size: 13.5px; border-radius: 10px; padding: 0 10px; }
  .cm-pf-act .cm-btn--icon { width: 38px; }
  .cm-hl { padding: 18px 16px 4px; gap: 14px; } .cm-hl-r { width: 62px; height: 62px; } .cm-hl-i { width: 64px; }
  .cm-pf-tabs { margin-top: 14px; gap: 0; } .cm-pf-tabs a { flex: 1; justify-content: center; padding: 0; height: 48px; } .cm-pf-tabs a span { display: none; } .cm-pf-tabs a .cm-i { width: 24px; height: 24px; }
  .cm-pf-tabs.is-text a span, .cm-pf-tabs.is-text a { font-size: 13.5px; }
  .cm-pf-body .cm-grid3 { border-radius: 0; }
  .cm-pf-intro, .cm-people, .cm-courses { margin: 12px; }
  .cm-tile-o { display: none; }

  /* 시트 → 아래에서 */
  .cm-sheet { align-items: flex-end; padding: 0; }
  .cm-sheet-p { max-width: none !important; max-height: 92vh; border-radius: 26px 26px 0 0; transform: translateY(100%); opacity: 1; transition: transform .42s cubic-bezier(.2, .9, .25, 1); padding-bottom: var(--cm-safe); }
  .cm-sheet.is-open .cm-sheet-p { transform: translateY(var(--drag, 0px)); }
  .cm-sheet.is-dragging .cm-sheet-p { transition: none; }
  .cm-grab { display: block; flex: none; width: 40px; height: 5px; margin: 8px auto 2px; border-radius: 99px; background: #D5D6E0; }
  .cm-sheet--compose .cm-sheet-p { height: calc(100% - 10px - env(safe-area-inset-top, 0px)); max-height: none; border-radius: 22px 22px 0 0; padding-bottom: 0; }
  .cm-sheet--comments .cm-sheet-p { height: 82vh; }
  .cm-sheet--viewer .cm-sheet-p { border-radius: 0; height: 100%; max-height: none; transform: none; opacity: 0; transition: opacity .25s; }
  .cm-sheet--viewer.is-open .cm-sheet-p { opacity: 1; }
  .cm-sheet--comments .cm-cbox { position: sticky; }
  .cm-toast { bottom: calc(96px + var(--cm-safe)); }

  /* 떠 있는 글쓰기 단추 */
  .cm-fab { position: fixed; right: 18px; bottom: calc(94px + var(--cm-safe)); z-index: 50; display: grid; place-items: center; width: 58px; height: 58px; border: 0; border-radius: 20px; background: linear-gradient(135deg, #FF9A3C, #F97316 50%, #E1306C); color: #fff; box-shadow: 0 16px 30px -10px rgba(249, 115, 22, .7), 0 4px 10px rgba(0, 0, 0, .1); cursor: pointer; transition: transform .35s var(--cm-spring), opacity .25s; }
  .cm-fab .cm-i { width: 28px; height: 28px; stroke-width: 2.4; }
  .cm-fab:active { transform: scale(.9); }
  html.cm-down .cm-fab { transform: translateY(150%) scale(.8); opacity: 0; }
  body:not(:has(.enm-bar)) .cm-fab { bottom: calc(22px + var(--cm-safe)); }
  body:not(:has(.enm-bar)) .cm-toast { bottom: calc(28px + var(--cm-safe)); }

  /* 프로젝트 */
  .cm-pj { padding: 0 12px; }
  .cm-pj-h { padding: 16px; border-radius: 22px; } .cm-pj-team { display: none; }
  .cm-pj-tabs { margin: 12px -12px; border-radius: 0; padding: 6px 12px; } .cm-pj-tabs a { flex: none; height: 38px; padding: 0 12px; font-size: 13.5px; }
  .cm-kb { margin: 0 -12px; padding: 2px 12px 16px; scroll-snap-type: x mandatory; }
  .cm-kb-col { flex-basis: 84vw; max-height: none; }
  .cm-cal { border-radius: 18px; }
  .cm-cal-d { min-height: 58px; padding: 4px 2px; align-items: center; }
  .cm-cal-c, .cm-cal-more { display: none; }
  .cm-cal-dots { display: flex; }
  .cm-cal-n { width: 28px; height: 28px; }
  .cm-mt-detail { padding: 16px; }
  .cm-pv-h { padding: 16px; } .cm-pv-ring { width: 86px; height: 86px; } .cm-pv-ring b { font-size: 21px; }
  .cm-crumb { margin-top: 8px; }
  .cm-form { padding: 0 12px; }
}
@media (max-width: 380px) {
  .cm-share-grid { grid-template-columns: repeat(4, 1fr); padding: 14px 8px 4px; } .cm-share-grid span { width: 52px; height: 52px; }
  .cm-fld-row { grid-template-columns: 1fr; }
}
@media (hover: none) { .cm-cmt-more { opacity: 1; } .cm-tile-o { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .cm *, .cm-sheet * { animation: none !important; transition: none !important; }
}

/* ── 첨부 파일 바구니 (업무 추가 · 글쓰기) — 여러 번 골라도 쌓이고 하나씩 뺄 수 있다 ── */
.cm-filepick { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cm-filepick[hidden] { display: none; }
.cm-filepick li { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 8px; border-radius: 14px; background: var(--cm-bg); animation: cmFpIn .18s ease; }
.cm-filepick .cm-ext { width: 34px; height: 34px; border-radius: 10px; font-size: 10px; }
.cm-fp-n { flex: 1; min-width: 0; }
.cm-fp-n b { display: block; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-fp-n small { display: block; font-size: 11.5px; color: var(--cm-mut); }
.cm-filepick li.cm-fp-sum { padding: 2px 4px 0; background: none; font-size: 11.5px; font-weight: 600; color: var(--cm-mut); animation: none; }
.cm-fileadd { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 14px 16px; border: 2px dashed var(--cm-line); border-radius: 16px; background: var(--cm-bg); color: var(--cm-ink, inherit); cursor: pointer; transition: border-color .15s, background-color .15s; }
.cm-fileadd:hover, .cm-fileadd.is-over { border-color: var(--cm-ac, #f97316); background: #fff; }
.cm-fileadd > svg { width: 22px; height: 22px; flex: none; color: var(--cm-mut); }
.cm-fileadd b { display: block; font-size: 14px; }
.cm-fileadd small { display: block; margin-top: 2px; font-size: 12px; color: var(--cm-mut); }
.cm-taskadd.is-over { box-shadow: 0 0 0 2px var(--cm-ac, #f97316); }
@keyframes cmFpIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cm-filepick li { animation: none; } }