/* 이펙터 · 2026-10 제작 · 커뮤니티 공통 스타일 */

:root {
  --cm-top: 2rem;
  --cm-bottom: 4rem;
  --cm-pg-mt: 3rem;
  --cm-r: 1.25rem;
  --cm-weak: #b7b7b7;
  --cm-chip-line: #dcdcdc;
  --cm-blue: #0088ff;
}
@media (min-width: 768px)  { :root { --cm-top: 4rem; --cm-bottom: 5rem; --cm-pg-mt: 5rem; --cm-r: 1.5rem; } }
@media (min-width: 992px)  { :root { --cm-top: 5rem; --cm-bottom: 6rem; --cm-r: 1.875rem; } }
@media (min-width: 1200px) { :root { --cm-top: 7rem; --cm-bottom: 7.5rem; --cm-pg-mt: 7rem; } }

.cm-ico-clock { --ico: url(../../icons/ico-clock.svg); -webkit-mask-image: url(../../../icons/ico-clock.svg); mask-image: url(../../../icons/ico-clock.svg); }
.cm-ico-chev  { --ico: url(../../icons/ico-chevron-right.svg); -webkit-mask-image: url(../../../icons/ico-chevron-right.svg); mask-image: url(../../../icons/ico-chevron-right.svg); }

.cm-page { padding-block: var(--cm-top) var(--cm-bottom); }
.cm-title { margin: 0; text-align: center; font-size: 2rem; font-weight: 600; line-height: 1.2; color: var(--ss-ink); }
@media (min-width: 768px)  { .cm-title { font-size: 2.5rem; } }
@media (min-width: 992px)  { .cm-title { font-size: 2.75rem; } }
@media (min-width: 1400px) { .cm-title { font-size: 3.125rem; } }

.cm-search { position: relative; max-width: 31.25rem; height: 2.75rem; margin: 2rem auto 0; }
.cm-search-input { width: 100%; height: 100%; padding: 0 3rem 0 1.25rem; border: 0; border-radius: 1.375rem; background: #e9e9e9; font: 400 .9375rem/1 var(--ss-font); color: var(--ss-ink); }
.cm-search-input::placeholder { color: #818181; opacity: 1; }
.cm-search-input:focus-visible { outline: 2px solid var(--ss-ink); outline-offset: 2px; }
.cm-search-btn { position: absolute; top: 0; right: .5rem; width: 2.75rem; height: 100%; padding: 0; border: 0; background: none; color: #818181; cursor: pointer; }
.cm-search-btn .ss-ico { width: 1.125rem; height: 1.125rem; }
@media (min-width: 992px) { .cm-search { height: 2.5rem; margin-top: 2.5rem; } .cm-search-input { border-radius: 1.25rem; font-size: 1rem; } }

.cm-filter { margin-top: 2rem; }
.cm-pill { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 2.5rem; padding: 0 1rem; border: 1px solid var(--ss-ink); border-radius: 1.875rem; background: var(--ss-white); font: 400 .9375rem/1 var(--ss-font); color: var(--ss-ink); white-space: nowrap; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.cm-pill.is-active { background: var(--ss-ink); color: var(--ss-white); }
@media (max-width: 767.98px) { .cm-filter .cm-pill { padding-inline: 1.5rem; font-size: 1rem; white-space: nowrap; } }
@media (min-width: 768px) {
  .cm-filter .ss-mtab-list { gap: .75rem; }
  .cm-pill { width: auto; min-width: 5rem; height: 3rem; font-size: 1rem; }
}
@media (min-width: 992px) { .cm-filter { margin-top: 2.5rem; } .cm-pill { height: 3.125rem; font-size: 1.125rem; } }
.cm-filter + .cm-list-wrap, .cm-title + .cm-list-wrap { margin-top: 3rem; }
@media (min-width: 992px) { .cm-filter + .cm-list-wrap, .cm-title + .cm-list-wrap { margin-top: 5rem; } }

.cm-thumb { position: relative; display: block; overflow: hidden; border-radius: var(--cm-r); background: var(--ss-bg-soft); aspect-ratio: var(--cm-ar, 1); isolation: isolate; }
.cm-thumb > img, .cm-thumb > .img-ph { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; object-fit: cover; aspect-ratio: auto !important; transition: transform .45s ease; }
@media (hover: hover) { a:hover > .cm-thumb > img, a:hover > .cm-thumb > .img-ph, a:focus-visible > .cm-thumb > img, a:focus-visible > .cm-thumb > .img-ph { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .cm-thumb > img, .cm-thumb > .img-ph { transition: none; } }

.cm-list { display: grid; margin: 0; padding: 0; list-style: none; }
.cm-list[hidden] { display: none; }
.cm-card { display: block; color: inherit; }
.cm-card:hover { color: inherit; }

.cm-nt { grid-template-columns: minmax(0, 1fr); gap: 2.5rem 1rem; }
.cm-nt .cm-thumb { --cm-ar: 412 / 350; }
.cm-nt-t { display: block; margin-top: 1rem; text-align: center; font-size: 1.0625rem; font-weight: 600; line-height: 1.5; color: var(--ss-ink); }
@media (min-width: 576px)  { .cm-nt { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 1.5rem; } }
@media (min-width: 992px)  { .cm-nt { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5.5rem 2rem; } .cm-nt-t { margin-top: 1.25rem; font-size: 1.25rem; } }

.cm-sf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; }
.cm-sf .cm-thumb { --cm-ar: 1; }
.cm-sf-txt { display: block; margin-top: .75rem; font-size: .875rem; line-height: 1.75; color: var(--ss-ink); }
.cm-sf-txt b { font-weight: 700; }
.cm-sf-txt > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 768px) { .cm-sf { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 1.5rem; } .cm-sf-txt { margin-top: 1rem; font-size: 1rem; } }
@media (min-width: 992px) { .cm-sf { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4.5rem 2.5rem; } .cm-sf-txt { margin-top: 1.25rem; font-size: 1.125rem; } }

.cm-ev { grid-template-columns: minmax(0, 1fr); gap: 2.5rem 1.5rem; max-width: 71.875rem; margin-inline: auto; }
.cm-ev .cm-thumb { --cm-ar: 1; }
.cm-ev-sub { display: block; margin-top: .75rem; font-size: .9375rem; font-weight: 300; line-height: 1.5; color: #7d7d7d; }
.cm-ev-bar { display: block; margin-top: .5rem; padding: .5rem .625rem; background: var(--ss-ink); font-size: 1.0625rem; font-weight: 500; line-height: 1.5; color: var(--ss-white); }
.cm-ev-price { display: flex; align-items: baseline; justify-content: flex-end; gap: .25rem; margin-top: .5rem; min-height: 2rem; color: #001111; line-height: 1.2; }
.cm-ev-price b { font-family: var(--ss-font-en); font-size: 1.875rem; font-weight: 700; }
.cm-ev-price span { font-size: 1.0625rem; font-weight: 500; }
.cm-ev-price[hidden] { display: none; }
.cm-ev-item.is-ended .cm-thumb::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgb(0 0 0 / .3); }
@media (max-width: 575.98px) { .cm-ev { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; } .cm-ev-sub { font-size: .8125rem; } .cm-ev-bar { padding: .375rem .5rem; font-size: .8125rem; } .cm-ev-price { min-height: 1.5rem; } .cm-ev-price b { font-size: 1.25rem; } .cm-ev-price span { font-size: .8125rem; } }
@media (min-width: 576px)  { .cm-ev { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 2rem; } }
@media (min-width: 992px)  { .cm-ev { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; }
  .cm-ev-sub { margin-top: 1rem; font-size: 1.125rem; } .cm-ev-bar { padding: .4375rem .5625rem; font-size: 1.25rem; } .cm-ev-price b { font-size: 2.625rem; } .cm-ev-price span { font-size: 1.25rem; } .cm-ev-price { min-height: 3.125rem; } }

.ss-attach { margin-top: 1.5rem; }
.ss-attach[hidden] { display: none; }
.ss-attach-t { margin: 0 0 .75rem; font-size: .9375rem; font-weight: 600; color: var(--ss-ink); }
.ss-attach-list { margin: 0; padding: 0; list-style: none; }
.ss-attach-list li + li { margin-top: .5rem; }
.ss-attach-a { font-size: .9375rem; color: var(--ss-text); text-decoration: underline; text-underline-offset: .2em; word-break: break-all; }
.ss-attach-a:hover { color: var(--ss-ink); }
.ss-attach-size { margin-left: .5rem; font-size: .875rem; color: var(--ss-weak); }
.cm-empty { margin: 0; padding: 5rem 0; text-align: center; font-size: 1rem; color: var(--ss-weak); }
.cm-empty[hidden] { display: none; }

.cm-pg { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: var(--cm-pg-mt); }
.cm-pg-n, .cm-pg-a { display: grid; place-items: center; width: 1.875rem; height: 1.875rem; border-radius: .3125rem; font-size: .875rem; font-weight: 400; line-height: 1; color: var(--cm-weak); transition: background-color .2s, color .2s, border-color .2s; }
.cm-pg-n { border: 1px solid var(--cm-weak); background: var(--ss-white); }
.cm-pg-n[aria-current="page"] { border-color: var(--ss-ink); background: var(--ss-ink); color: var(--ss-white); font-weight: 600; }
.cm-pg-a { border: 0; }
.cm-pg-a:first-child { margin-right: .75rem; } .cm-pg-a:last-child { margin-left: .75rem; }
.cm-pg-a .ss-ico { width: 1rem; height: 1rem; }
.cm-pg-a-prev .ss-ico { transform: scaleX(-1); }
.cm-pg-a-dbl { display: flex; }
.cm-pg-a-dbl .ss-ico + .ss-ico { margin-left: -.625rem; }
.cm-pg-a[aria-disabled="true"] { pointer-events: none; }
@media (hover: hover) { .cm-pg a:hover:not([aria-current="page"]) { color: var(--ss-ink); border-color: var(--ss-ink); } .cm-pg-a:hover { border-color: transparent !important; } }
@media (min-width: 992px) { .cm-pg { gap: .5rem; } }

.cm-btn-list { display: inline-flex; align-items: center; justify-content: center; min-width: 6.25rem; height: 3.375rem; padding: 0 1.5rem; border: 1px solid var(--ss-ink); border-radius: 1.875rem; background: var(--ss-white); font-size: 1rem; font-weight: 500; line-height: 1; color: var(--ss-ink); transition: background-color .25s, color .25s; }
.cm-btn-list:focus-visible { background: var(--ss-ink); color: var(--ss-white); }
@media (hover: hover) { .cm-btn-list:hover { background: var(--ss-ink); color: var(--ss-white); } }

.cm-view-head { padding-bottom: 1.5rem; border-bottom: 1px solid var(--ss-line-strong); }
.cm-view-title { margin: 0; font-size: 1.5rem; font-weight: 600; line-height: 1.3; color: var(--ss-ink); }
.cm-view-meta { display: flex; align-items: center; gap: .625rem; margin: .75rem 0 0; font-size: .875rem; line-height: 1.5; color: #909090; }
.cm-view-meta .ss-ico { width: 1.125rem; height: 1.125rem; }
.cm-view-sep { flex: none; width: 1px; height: 1.125rem; background: var(--ss-line-strong); }
.cm-view-body { padding-top: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--ss-line-strong); }
.cm-view-foot { display: flex; justify-content: center; margin-top: 2rem; }
.cm-view-notice { max-width: 62.5rem; margin-inline: auto; }
.cm-editor { font-size: .9375rem; line-height: 1.5; color: var(--ss-text); word-break: keep-all; }
.cm-editor p { margin: 0; }
.cm-editor img, .cm-editor .img-ph { display: block; max-width: 100%; margin-inline: auto; }
.cm-editor-fig { max-width: 50rem; margin: 0 auto; }
.cm-editor-fig + p, .cm-editor-fig + .cm-editor-txt { margin-top: 2rem; }
.cm-editor-txt { text-align: center; font-weight: 600; color: var(--cm-blue); }
@media (min-width: 768px) { .cm-view-title { font-size: 2rem; } .cm-view-meta { font-size: 1rem; } .cm-editor { font-size: 1rem; } .cm-view-head { padding-bottom: 1.75rem; } .cm-view-body { padding-top: 2rem; padding-bottom: 3rem; } .cm-view-foot { margin-top: 3rem; } }
@media (min-width: 992px) { .cm-view-title { font-size: 2.25rem; } .cm-editor-fig + .cm-editor-txt { margin-top: 2.5rem; } }

.cm-view-event .cm-view-body { padding: 0 0 2.5rem; }
@media (min-width: 992px) { .cm-view-event .cm-view-body { padding-bottom: 5rem; } }

.cm-view-foot { flex-wrap: wrap; gap: .75rem; }
button.cm-btn-list { font-family: inherit; cursor: pointer; }
.cm-btn-list.is-disabled { border-color: var(--ss-line-strong); background: var(--ss-white); color: #aaa; cursor: default; }
.cm-view-ended { margin: 2rem 0 0; text-align: center; font-size: 1rem; font-weight: 600; line-height: 1.5; color: var(--ss-ink); }
.cm-view-ended[hidden] { display: none; }
.cm-view-ended + .cm-view-foot { margin-top: 1rem; }
.cm-view-ad { margin: 1.5rem auto 0; max-width: 62.5rem; text-align: center; font-size: .8125rem; line-height: 1.6; color: #909090; word-break: keep-all; }
@media (min-width: 768px) { .cm-view-ad { margin-top: 2rem; font-size: .875rem; } }

.cm-sv-title { margin: 0; padding-bottom: 1.5rem; border-bottom: .125rem solid var(--ss-ink); font-size: 1.75rem; font-weight: 600; line-height: 1.2; color: var(--ss-ink); }
.cm-sv-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-top: 1.5rem; }
.cm-sv-row .cm-sv-who { margin-top: 0; }
.cm-sv-stat { display: flex; align-items: center; gap: 1.25rem; }
.cm-sv-view { font-size: .875rem; line-height: 1.5; color: var(--ss-weak); }
.cm-sv-view strong { font-weight: 700; color: var(--ss-text); }
.cm-sv-like { display: flex; align-items: center; gap: .5rem; padding: 0; border: 0; background: none; color: var(--ss-ink); font: inherit; cursor: pointer; }
.cm-sv-like:focus-visible { outline: 2px solid var(--ss-ink); outline-offset: 4px; border-radius: .25rem; }
.cm-sv-hbox { position: relative; flex: none; width: 1.5rem; aspect-ratio: 32 / 29; }
.cm-sv-hline { position: absolute; inset: 0; width: 100%; height: 100%; color: #ff66a4; }
.cm-sv-hbox .cm-sv-heart { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.cm-sv-like[aria-pressed="true"] .cm-sv-hline { opacity: 0; }
.cm-sv-like[aria-pressed="true"] .cm-sv-heart { opacity: 1; }
.cm-sv-like[aria-pressed="true"] .cm-sv-hbox { animation: cmHeartPop .45s ease both; }
@keyframes cmHeartPop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.cm-sv-num { font-size: 1.125rem; font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { .cm-sv-row { margin-top: 2rem; } }
@media (min-width: 992px) { .cm-sv-row { margin-top: 2.5rem; } .cm-sv-view { font-size: 1rem; } .cm-sv-hbox { width: 1.75rem; } .cm-sv-num { font-size: 1.25rem; } }
@media (prefers-reduced-motion: reduce) { .cm-sv-like[aria-pressed="true"] .cm-sv-hbox { animation: none; } }
.cm-sv-who { display: flex; align-items: center; gap: .5rem; margin-top: 1.5rem; font-size: 1.125rem; font-weight: 700; line-height: 1.5; color: var(--ss-text); }
.cm-sv-who .ss-ico { width: 1.5625rem; height: 1.5625rem; color: var(--cm-chip-line); }
.cm-sv-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 0; padding: 0 0 1.5rem; border-bottom: 1px solid var(--ss-line-strong); }
.cm-sv-tags li { display: inline-flex; align-items: center; height: 2.5rem; padding: 0 1.125rem; border: 1px solid var(--cm-chip-line); border-radius: 1.5rem; font-size: .875rem; font-weight: 500; line-height: 1; color: var(--ss-text); }
.cm-sv-h { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 0 0 1.25rem; font-size: 1.125rem; font-weight: 500; line-height: 1.4; color: var(--ss-ink); }
.cm-sv-h .ss-ico { width: 1.25rem; height: 1.25rem; }
.cm-sv-end { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--ss-line-strong); }
.cm-sv-end .cm-view-foot { margin-top: 0; }
@media (min-width: 768px) { .cm-sv-title { padding-bottom: 2rem; font-size: 2.25rem; } .cm-sv-who { margin-top: 2rem; font-size: 1.375rem; } .cm-sv-tags li { height: 2.75rem; font-size: 1.125rem; } .cm-sv-h { font-size: 1.375rem; margin-bottom: 1.5rem; } .cm-sv-end { margin-top: 5rem; padding-top: 3rem; } }
@media (min-width: 992px) { .cm-sv-title { padding-bottom: 3rem; font-size: 2.625rem; } .cm-sv-who { margin-top: 2.5rem; font-size: 1.5rem; } .cm-sv-tags { margin-top: 1.5rem; padding-bottom: 2rem; } .cm-sv-tags li { height: 3rem; font-size: 1.5rem; padding: 0 1.375rem; } .cm-sv-h { font-size: 1.625rem; margin-bottom: 1.75rem; } .cm-sv-h .ss-ico { width: 1.375rem; height: 1.375rem; } .cm-sv-end { margin-top: 7.5rem; padding-top: 5.5rem; } }

.cm-modal { position: fixed; inset: 0; z-index: var(--ss-z-modal); display: none; align-items: center; justify-content: center; padding: 1rem; background: rgb(0 0 0 / .3); overflow-y: auto; }
.cm-modal.is-open { display: flex; }
.cm-modal-box { position: relative; width: 100%; max-width: 37.5rem; margin: auto; padding: 2.5rem 1.25rem 2.5rem; background: var(--ss-white); text-align: center; }
.cm-modal-title { margin: 0; font-size: 1.25rem; font-weight: 600; line-height: 1.4; color: var(--ss-ink); }
.cm-login { margin: 0; text-align: left; }
.cm-login-f { display: block; margin: 0; }
.cm-login-l { display: block; margin: 0 0 .5rem; font-size: 1rem; font-weight: 500; line-height: 1.4; color: var(--ss-ink); }
.cm-login-in { display: block; width: 100%; height: 2.75rem; padding: 0 .875rem; border: 1px solid #d9d9d9; border-radius: 0; background: var(--ss-white); font: 400 1rem/1 var(--ss-font); color: var(--ss-ink); }
.cm-login-in:focus-visible { outline: 2px solid var(--ss-ink); outline-offset: 0; }
.cm-login-in.is-invalid { border-color: var(--ss-point); }
.cm-login-go { display: block; width: 100%; height: 2.75rem; padding: 0; border: 0; border-radius: .3125rem; background: var(--ss-ink); font: 500 1rem/1 var(--ss-font); color: var(--ss-white); cursor: pointer; transition: opacity .2s; }
@media (hover: hover) { .cm-login-go:hover { opacity: .85; } }
.cm-login-links { display: flex; align-items: center; justify-content: center; margin: 1.25rem 0 0; padding: 0; font-size: .875rem; font-weight: 300; line-height: 1.2; color: var(--ss-ink); }
.cm-login-links li + li::before { content: ""; display: inline-block; width: 1px; height: .75rem; margin: 0 1.25rem; background: var(--ss-ink); vertical-align: -.0625rem; }
.cm-login-note { margin: 1.5rem 0 0; text-align: center; font-size: .8125rem; font-weight: 300; line-height: 1.4; color: #787878; }
.cm-login-sns { display: flex; justify-content: center; gap: 1rem; margin: 1.5rem 0 0; padding: 0; }
.cm-login-sns li { width: 3.75rem; }
.cm-login-sns a, .cm-login-sns .img-ph, .cm-login-sns img { display: block; width: 100%; border-radius: 50%; }
.cm-login-sns .img-ph { aspect-ratio: 1 !important; }
.cm-modal-sf .cm-modal-box { max-width: 37.5rem; padding: 3rem 1.25rem; }
.cm-modal-sf .cm-modal-title { margin-bottom: 2rem; font-weight: 500; }
.cm-modal-sf .cm-login-f + .cm-login-f { margin-top: 1.5rem; }
.cm-modal-sf .cm-login-go { margin-top: 2rem; }
@media (min-width: 768px) { .cm-modal-sf .cm-modal-box { padding: 3.75rem 6.25rem 4rem; } .cm-modal-title { font-size: 1.5rem; } .cm-login-l { font-size: 1.125rem; } .cm-login-go { height: 2.8125rem; font-size: 1.125rem; } .cm-login-in { height: 2.8125rem; } .cm-login-links { font-size: 1rem; } .cm-login-note { font-size: .875rem; } .cm-modal-sf .cm-login-f + .cm-login-f { margin-top: 1.5rem; } }
@media (hover: none) { .cm-modal { -webkit-overflow-scrolling: touch; } }