/* 쓱싹매치 · 생활 서비스 */
:root {
  --bg: #F3F9FF;
  --surface: #FFFFFF;
  --line: #D6E6F5;
  --text: #12263A;
  --muted: #5D7388;
  --primary: #2F9BFF;
  --primary-ink: #0B6FD6;
  --primary-soft: #E3F1FF;
  --accent: #FFD84D;
  --ok: #22B573;
  --ok-ink: #137A4B;
  --warn: #F5A623;
  --warn-ink: #8A5A00;
  --danger: #E5484D;
  --danger-ink: #B4232A;
  --r: 16px;
  --display: "Gowun Dodum", "Pretendard Variable", system-ui, sans-serif;
  --body: "Pretendard Variable", "Pretendard", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.cl {
  margin: 0;
  min-height: 100vh;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  word-break: keep-all;
  overflow-wrap: break-word;
}
:where(.cl) button, :where(.cl) input, :where(.cl) select, :where(.cl) textarea { font: inherit; color: inherit; }
:where(.cl) button { cursor: pointer; }
:where(.cl) a { color: var(--primary-ink); }
.cl :focus-visible { outline: 3px solid rgba(47, 155, 255, .45); outline-offset: 2px; }
.cl [hidden] { display: none !important; }
.cl-sprites { position: absolute; width: 0; height: 0; overflow: hidden; }

/* 머리 */
.cl-top { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.cl-top__inner { max-width: 1080px; margin: 0 auto; padding: 10px 16px; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "brand reset" "roles roles"; gap: 10px 12px; align-items: center; }
.cl-brand { grid-area: brand; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); }
.cl-brand__mark { width: 32px; height: 32px; flex: none; }
.cl-brand__name { font-family: var(--display); font-size: 22px; letter-spacing: -.02em; }
.cl-brand__beta { padding: 1px 8px; border-radius: 999px; background: var(--accent); font-size: 12px; font-weight: 700; }
.cl-roles { grid-area: roles; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; border-radius: 999px; background: var(--primary-soft); }
.cl-roles__item { display: grid; place-items: center; min-height: 40px; border-radius: 999px; text-decoration: none; color: var(--muted); font-weight: 600; font-size: 15px; }
.cl-roles__item.is-active { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px rgba(18, 38, 58, .12); }
.cl-reset { grid-area: reset; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 14px; font-weight: 600; }
.cl-reset:hover { color: var(--text); border-color: var(--muted); }
@media (min-width: 860px) {
  .cl-top__inner { grid-template-columns: auto 1fr auto; grid-template-areas: "brand roles reset"; padding: 12px 24px; }
  .cl-roles { justify-self: center; width: 420px; }
}

.cl-main { max-width: 1080px; margin: 0 auto; padding: 20px 16px 120px; }
@media (min-width: 860px) { .cl-main { padding: 32px 24px 120px; } }

/* 글자 */
.cl-eyebrow { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--primary-ink); }
.cl-h1 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1.3; letter-spacing: -.02em; }
.cl-h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1.3; }
.cl-h3 { margin: 0 0 12px; padding: 0; font-family: var(--display); font-weight: 400; font-size: 20px; line-height: 1.35; }
.cl-lead { margin: 8px 0 0; color: var(--muted); }
.cl-help { margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.cl-empty { margin: 0 0 14px; font-size: 15px; color: var(--muted); }
.cl-empty--box { padding: 28px 16px; text-align: center; border: 1px dashed var(--line); border-radius: var(--r); background: var(--surface); }
@media (min-width: 860px) { .cl-h1 { font-size: 34px; } }

.cl-intro { margin-bottom: 18px; }
.cl-intro--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.cl-intro--row > div:first-child { max-width: 640px; }

/* 카드·버튼·칩 */
.cl-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; box-shadow: 0 2px 0 rgba(214, 230, 245, .6); }
.cl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 20px; border: 1px solid transparent; border-radius: 999px; background: var(--surface); font-weight: 700; font-size: 16px; text-decoration: none; color: var(--text); }
.cl-btn--primary { background: var(--primary-ink); color: #fff; }
.cl-btn--primary:hover { background: #095EB6; }
.cl-btn--ghost { border-color: var(--line); background: var(--surface); }
.cl-btn--ghost:hover { border-color: var(--muted); }
.cl-btn--soft { background: var(--primary-soft); color: var(--primary-ink); }
.cl-btn--sm { min-height: 40px; padding: 0 14px; font-size: 14px; }
.cl-btn--block { width: 100%; }
.cl-btn:disabled { background: #E7EEF5; color: #7F93A6; border-color: transparent; cursor: not-allowed; }
.cl-linkbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0; border: 0; background: none; color: var(--muted); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.cl-icon-btn { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); }

.cl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-chip { min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 15px; font-weight: 600; color: var(--text); }
.cl-chip[aria-pressed="true"] { border-color: var(--primary-ink); background: var(--primary-soft); color: var(--primary-ink); box-shadow: inset 0 0 0 1px var(--primary-ink); }
.cl-chip--sm { min-height: 36px; padding: 0 12px; font-size: 14px; }
.cl-chips--lg .cl-chip { min-height: 52px; padding: 0 20px; font-size: 16px; }
.cl-tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: #FFF4C2; color: #6B5300; font-size: 12px; font-weight: 700; white-space: nowrap; }
.cl-tag--new { background: var(--accent); color: var(--text); }
.cl-tag--beta { font-size: 14px; padding: 4px 12px; background: var(--accent); color: var(--text); }
.cl-badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.cl-badge--ok { background: #DDF5EA; color: var(--ok-ink); }
.cl-badge--lock { background: #E9EEF3; color: var(--muted); }

/* 입력 */
.cl-fs { border: 0; margin: 0; padding: 0; min-width: 0; }
.cl-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.cl-fields--4 { grid-template-columns: 1fr 1fr; }
@media (min-width: 860px) { .cl-fields--4 { grid-template-columns: repeat(5, 1fr); } }
.cl-field { display: grid; gap: 6px; }
.cl-field--wide { grid-column: span 2; }
@media (min-width: 860px) { .cl-field--wide { grid-column: auto; } }
.cl-field__label { display: block; margin: 14px 0 8px; font-size: 14px; font-weight: 700; color: var(--muted); }
.cl-field .cl-field__label { margin: 0; }
.cl-field__label small { font-weight: 500; }
.cl-input { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 16px; }
textarea.cl-input { resize: vertical; line-height: 1.5; }
.cl-input--unit { display: flex; align-items: center; gap: 6px; padding: 0 14px; }
.cl-input--unit input { flex: 1; min-width: 0; border: 0; padding: 0; min-height: 46px; background: transparent; outline: none; font-size: 16px; }
.cl-input--unit em { font-style: normal; color: var(--muted); }
.cl-input:focus, .cl-input--unit:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(47, 155, 255, .18); outline: none; }

/* 요청서 */
.cl-split { display: grid; gap: 16px; }
@media (min-width: 860px) { .cl-split { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; } }
.cl-form { padding: 20px; }
.cl-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 0 20px; padding: 0; }
.cl-steps__item { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 4px solid var(--line); font-size: 13px; font-weight: 700; color: var(--muted); }
.cl-steps__item b { display: none; }
.cl-steps__item.is-now { border-color: var(--primary); color: var(--text); }
.cl-steps__item.is-done { border-color: var(--primary); color: var(--primary-ink); }
.cl-form__nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
.cl-form__nav .cl-btn { min-width: 120px; }
.cl-error { margin: 14px 0 0; padding: 10px 14px; border-radius: 12px; background: #FDECEC; color: var(--danger-ink); font-size: 14px; font-weight: 600; }

.cl-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.cl-photo { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 0; border: 2px dashed var(--line); border-radius: 14px; background: var(--bg); overflow: hidden; color: var(--muted); }
.cl-photo__empty { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; }
.cl-photo__img, .cl-photo__tag { display: none; }
.cl-photo[aria-pressed="true"] { border: 2px solid var(--primary); }
.cl-photo[aria-pressed="true"] .cl-photo__empty { display: none; }
.cl-photo[aria-pressed="true"] .cl-photo__img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.cl-photo[aria-pressed="true"] .cl-photo__tag { display: block; position: absolute; left: 6px; bottom: 6px; padding: 1px 8px; border-radius: 999px; background: rgba(18, 38, 58, .78); color: #fff; font-size: 12px; font-weight: 700; }
.cl-protect { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 14px; border-radius: 14px; background: var(--primary-soft); color: var(--primary-ink); }
.cl-protect svg { flex: none; margin-top: 2px; }
.cl-protect b { color: var(--text); }
.cl-protect p { margin: 2px 0 0; font-size: 14px; color: var(--muted); }

.cl-how { background: linear-gradient(180deg, #FFFFFF, #F7FBFF); }
.cl-how__list { list-style: none; margin: 0; padding: 0; counter-reset: how; }
.cl-how__list li { position: relative; display: grid; gap: 2px; padding: 0 0 18px 40px; counter-increment: how; }
.cl-how__list li::before { content: counter(how); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-ink); font-weight: 800; font-size: 14px; }
.cl-how__list li:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 32px; bottom: 4px; width: 2px; background: var(--line); }
.cl-how__list b { font-family: var(--display); font-weight: 400; font-size: 18px; }
.cl-how__list span { font-size: 14px; color: var(--muted); }
.cl-how__list .cl-seats { margin-top: 8px; }
.cl-how__foot { margin: 4px 0 0; padding: 12px 14px; border-radius: 12px; background: #FFF8D6; font-size: 14px; color: #6B5300; }

/* 시그니처: 참여 자리 */
.cl-seats { display: inline-flex; align-items: center; gap: 10px; }
.cl-seats__dots { position: relative; display: inline-flex; gap: 6px; }
.cl-seat { position: relative; display: block; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--primary); background: var(--surface); overflow: hidden; }
.cl-seat i { position: absolute; left: -30%; right: -30%; bottom: 0; height: 0; background: var(--primary); border-radius: 42% 46% 0 0; }
.cl-seat.is-filled i { height: 130%; }
.cl-seat.is-mine { border-color: var(--primary-ink); box-shadow: 0 0 0 3px var(--accent); }
.cl-seat.is-mine i { background: var(--primary-ink); }
.cl-seat.is-new i { animation: cl-fill 1s cubic-bezier(.3, .7, .3, 1) var(--d, 0ms) both; }
@keyframes cl-fill {
  0% { height: 0; transform: translateX(-10%); }
  50% { transform: translateX(8%); }
  100% { height: 130%; transform: none; }
}
.cl-seats__lock { position: absolute; inset: -2px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--text); color: #fff; opacity: 0; transform: scale(.4); pointer-events: none; }
.cl-seats.is-full .cl-seat { animation: cl-shrink .3s ease-in 1s both; }
.cl-seats.is-full .cl-seats__lock { animation: cl-lock .35s cubic-bezier(.3, 1.5, .5, 1) 1.15s both; }
.cl-seats.was-full .cl-seat, .cl-seats.was-full .cl-seats__lock { animation-duration: 0s; animation-delay: 0s; }
@keyframes cl-shrink { to { transform: scale(.55); opacity: .15; } }
@keyframes cl-lock { to { opacity: 1; transform: scale(1); } }
.cl-seats__label { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.cl-seats.is-full .cl-seats__label { color: var(--muted); }
.cl-seats--lg .cl-seat { width: 36px; height: 36px; border-width: 3px; }
.cl-seats--lg .cl-seats__dots { gap: 10px; }
.cl-seats--lg .cl-seats__label { font-size: 20px; }
.cl-seats--lg .cl-seats__lock svg { width: 24px; height: 24px; }

/* 요청 상세 */
.cl-detail__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px; margin-bottom: 16px; }
.cl-detail__grid { display: grid; gap: 16px; }
@media (min-width: 860px) { .cl-detail__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }
.cl-detail__seats .cl-field__label { margin-top: 0; }
.cl-detail__foot { display: flex; justify-content: flex-end; margin-top: 16px; }
.cl-track { list-style: none; display: grid; gap: 10px; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px dashed var(--line); }
.cl-track li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--muted); font-weight: 600; }
.cl-track span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); font-size: 13px; font-weight: 800; flex: none; }
.cl-track li.is-done { color: var(--text); }
.cl-track li.is-done span { background: var(--primary-ink); border-color: var(--primary-ink); color: #fff; }
.cl-track li.is-now { color: var(--text); }
.cl-track li.is-now span { border-color: var(--primary-ink); color: var(--primary-ink); background: var(--primary-soft); }
.cl-dl { display: grid; gap: 8px; margin: 0; }
.cl-dl div { display: grid; grid-template-columns: 78px 1fr; gap: 8px; font-size: 15px; }
.cl-dl dt { color: var(--muted); }
.cl-dl dd { margin: 0; font-weight: 600; }
.cl-dl dd small { font-weight: 500; color: var(--muted); }
.cl-dl--tight div { grid-template-columns: 1fr auto; }
.cl-quote { margin: 12px 0 0; padding: 10px 12px; border-left: 3px solid var(--primary); background: var(--bg); border-radius: 0 10px 10px 0; font-size: 14px; color: var(--muted); }
.cl-companies { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.cl-companies li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.cl-companies b { display: block; font-size: 15px; }
.cl-companies small { color: var(--muted); font-size: 13px; }
.cl-avatar { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--primary-soft); color: var(--primary-ink); font-weight: 800; font-size: 15px; }
.cl-avatar--lg { width: 44px; height: 44px; font-size: 18px; background: var(--primary-ink); color: #fff; }
.cl-status { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: #E9EEF3; color: var(--muted); font-size: 13px; font-weight: 700; white-space: nowrap; }
.cl-status[data-s="상담 중"], .cl-status[data-s="견적 제시"] { background: #FFF1D6; color: var(--warn-ink); }
.cl-status[data-s="계약 성사"] { background: #DDF5EA; color: var(--ok-ink); }
.cl-status[data-s="미성사"] { background: #FDECEC; color: var(--danger-ink); }

/* 회원·역할 스위치 */
.cl-member { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.cl-member__who { flex: 1; min-width: 160px; display: grid; }
.cl-member__who b { font-size: 16px; }
.cl-member__who small { font-size: 13px; color: var(--muted); }
.cl-switch { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 999px; background: var(--primary-soft); }
.cl-switch__opt { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; min-width: 76px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-weight: 700; font-size: 15px; }
.cl-switch__opt[aria-pressed="true"] { background: var(--primary-ink); color: #fff; }
.cl-switch__opt:disabled { opacity: .5; cursor: not-allowed; }
.cl-switch--full { display: grid; width: 100%; margin-bottom: 4px; }
@media (max-width: 520px) { .cl-member .cl-switch { width: 100%; } }

.cl-guard { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 20px; border: 1px dashed var(--muted); border-radius: var(--r); background: var(--surface); }
.cl-guard > div { flex: 1; min-width: 200px; }
.cl-guard p { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.cl-guard__link { display: inline-block; margin-top: 6px; font-weight: 700; font-size: 14px; }

/* 요청·공고 카드 */
.cl-cards { display: grid; gap: 14px; }
@media (min-width: 700px) { .cl-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .cl-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cl-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cl-req, .cl-job, .cl-hire { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.cl-req.is-fresh { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(47, 155, 255, .15); }
.cl-req.is-joined { border-color: var(--primary-ink); }
.cl-req.is-locked, .cl-job.is-locked, .cl-hire.is-locked { background: #F7F9FB; }
.cl-req.is-locked .cl-req__title, .cl-req.is-locked .cl-req__memo { color: var(--muted); }
.cl-req__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.cl-req__type { padding: 3px 10px; border-radius: 8px; background: var(--primary-soft); color: var(--primary-ink); font-size: 13px; font-weight: 800; }
.cl-req__no { margin-left: auto; font-size: 13px; color: var(--muted); }
.cl-req__no.is-over { color: var(--danger-ink); font-weight: 700; }
.cl-req__title { margin: 0; font-family: var(--display); font-weight: 400; font-size: 20px; line-height: 1.35; }
.cl-req__meta { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; font-size: 14px; color: var(--muted); }
.cl-req__meta li { display: inline-flex; align-items: center; gap: 5px; }
.cl-req__conds { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-req__conds span { padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; font-weight: 600; }
.cl-req__memo { margin: 0; font-size: 14px; color: var(--muted); }
.cl-req__seats { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg); }
.cl-req__left { font-size: 14px; font-weight: 700; color: var(--primary-ink); }
.cl-req.is-locked .cl-req__left { color: var(--muted); }
.cl-contact { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); }
.cl-contact > div { flex: 1; min-width: 0; display: grid; }
.cl-contact b { font-size: 15px; color: var(--text); }
.cl-contact small { font-size: 13px; }
.cl-contact__num { font-size: 17px; font-weight: 800; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.cl-contact.is-open { border-style: solid; border-color: var(--primary); background: var(--primary-soft); color: var(--primary-ink); }
.cl-contact.is-open .cl-contact__num { color: var(--primary-ink); }
.cl-req__actions { margin-top: auto; }
.cl-req__status .cl-field__label { margin-top: 2px; }
.cl-chips--status { gap: 6px; }
.cl-chips--status .cl-chip { min-height: 38px; padding: 0 12px; font-size: 14px; }
.cl-log { list-style: none; margin: 12px 0 4px; padding: 0 0 0 12px; border-left: 2px solid var(--line); display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.cl-log time { display: inline-block; min-width: 44px; margin-right: 6px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.cl-policy { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: baseline; margin-top: 20px; padding: 14px 16px; border-radius: var(--r); background: #FFFBEA; border: 1px solid #F3E3A0; }
.cl-policy p { flex: 1; min-width: 240px; margin: 0; font-size: 14px; color: #5B4A0A; }
.cl-filter { display: flex; gap: 6px; flex-wrap: wrap; }

.cl-job__pay { margin: 0; font-weight: 800; font-size: 18px; color: var(--primary-ink); }
.cl-apply { display: grid; gap: 10px; padding: 12px; border-radius: 12px; background: var(--bg); }
.cl-apply .cl-field__label { margin: 4px 0 0; }
.cl-apply .cl-help { margin: 0; }
.cl-apply .cl-form__nav { margin-top: 4px; }
.cl-apply .cl-form__nav .cl-btn { min-width: 0; flex: 1; }
.cl-consent { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cl-consent li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.cl-applied { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; background: #DDF5EA; color: var(--ok-ink); }
.cl-applied > div { flex: 1; display: grid; }
.cl-applied small { color: var(--muted); }

.cl-applicants { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cl-applicants li { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; padding-bottom: 10px; border-bottom: 1px dashed var(--line); }
.cl-applicants li > div:not(.cl-decide) { display: grid; }
.cl-applicants li small { color: var(--muted); font-size: 13px; }
.cl-applicants .cl-decide, .cl-applicants .cl-status, .cl-applicants .cl-linkbtn { grid-column: 2; justify-self: start; }
.cl-decide { display: flex; gap: 6px; }
@media (min-width: 520px) {
  .cl-applicants li { grid-template-columns: auto 1fr auto auto; }
  .cl-applicants .cl-decide, .cl-applicants .cl-status, .cl-applicants .cl-linkbtn { grid-column: auto; }
}
.cl-kind { display: inline-block; margin-left: 4px; padding: 0 8px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-ink); font-size: 12px; font-weight: 700; vertical-align: 2px; }
.cl-postform { margin-bottom: 16px; }

/* 관리자 */
.cl-scope { display: grid; gap: 4px; justify-items: start; max-width: 340px; }
.cl-scope small { font-size: 13px; color: var(--muted); }
.cl-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
@media (min-width: 860px) { .cl-kpis { grid-template-columns: repeat(4, 1fr); gap: 14px; } }
.cl-kpi { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.cl-kpi span { font-size: 13px; font-weight: 700; color: var(--muted); }
.cl-kpi b { font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1.2; }
.cl-kpi small { font-size: 12px; color: var(--muted); }
.cl-admin__grid { display: grid; gap: 16px; }
@media (min-width: 960px) { .cl-admin__grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; } }
.cl-admin__side { display: grid; gap: 16px; }
.cl-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 10px; }
.cl-section-head .cl-h3 { margin: 0; }

.cl-table { display: grid; }
.cl-table__row { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; padding: 12px 4px; font-size: 14px; }
.cl-table__row--head { display: none; }
.cl-table__item { border-top: 1px solid var(--line); }
.cl-table__item > summary { list-style: none; cursor: pointer; }
.cl-table__item > summary::-webkit-details-marker { display: none; }
.cl-table__item > summary:hover { background: var(--bg); }
.cl-table__item[open] > summary { background: var(--bg); }
.cl-table__main { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.cl-table__main b { font-size: 15px; }
.cl-table__main small { color: var(--muted); }
.cl-table__row > span[data-label] { display: flex; align-items: center; gap: 8px; }
.cl-table__row > span[data-label]::before { content: attr(data-label); min-width: 64px; font-size: 12px; color: var(--muted); font-weight: 600; }
@media (min-width: 700px) {
  .cl-table__row { grid-template-columns: 1.4fr 1fr .8fr 1fr .9fr; }
  .cl-table__row--head { display: grid; padding: 8px 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
  .cl-table__main { grid-column: auto; display: grid; gap: 0; }
  .cl-table__row > span[data-label]::before { display: none; }
}
.cl-inflow { padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; background: #E3F1FF; color: var(--primary-ink); }
.cl-inflow[data-i="온라인 광고"] { background: #FFF1D6; color: var(--warn-ink); }
.cl-inflow[data-i="직접"] { background: #EDE7FB; color: #5B3FB0; }
.cl-mini-seats { display: inline-flex; gap: 3px; }
.cl-mini-seats i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--primary); }
.cl-mini-seats i.on { background: var(--primary); }
.cl-result { padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; background: #E9EEF3; color: var(--muted); }
.cl-result[data-r="성사"] { background: #DDF5EA; color: var(--ok-ink); }
.cl-result[data-r="미성사"] { background: #FDECEC; color: var(--danger-ink); }
.cl-result[data-r="진행 중"] { background: #FFF1D6; color: var(--warn-ink); }
.cl-log--admin { margin: 0 4px 14px 16px; }

.cl-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.cl-bars li { display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 10px; }
.cl-bars__label { font-size: 14px; font-weight: 700; }
.cl-bars__track { height: 14px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.cl-bars__track i { display: block; height: 100%; border-radius: 999px; background: var(--primary); }
.cl-bars__val { display: grid; justify-items: end; line-height: 1.2; }
.cl-bars__val b { font-size: 16px; }
.cl-bars__val small { font-size: 12px; color: var(--muted); }
.cl-approvals { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cl-approvals li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.cl-approvals li > div { display: grid; min-width: 0; }
.cl-approvals small { font-size: 12px; color: var(--muted); }

/* 공고 대응표·알림 */
.cl-fab { position: fixed; right: 16px; bottom: 16px; z-index: 25; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); box-shadow: 0 6px 18px rgba(18, 38, 58, .14); font-size: 14px; font-weight: 700; color: var(--text); }
@media (min-width: 860px) { .cl-fab { right: 24px; bottom: 24px; } }
.cl-sheet { padding: 0; border: 0; background: transparent; color: var(--text); max-width: none; max-height: none; }
.cl-sheet::backdrop { background: rgba(18, 38, 58, .4); }
.cl-sheet[open] { position: fixed; inset: auto 0 0 0; width: 100%; margin: 0; }
.cl-sheet__body { max-width: 600px; margin: 0 auto; max-height: 86vh; overflow: auto; padding: 20px; background: var(--surface); border-radius: 20px 20px 0 0; }
@media (min-width: 700px) {
  .cl-sheet[open] { inset: 0; margin: auto; width: min(600px, calc(100% - 32px)); height: fit-content; }
  .cl-sheet__body { border-radius: 20px; }
}
.cl-sheet__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cl-sheet__title { margin: 0; font-family: var(--display); font-weight: 400; font-size: 26px; }
.cl-map { list-style: none; margin: 12px 0 0; padding: 0; }
.cl-map__row { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--line); }
.cl-map__need { font-size: 13px; color: var(--muted); }
.cl-map__show { font-weight: 700; text-decoration: none; }
.cl-map__show:hover { text-decoration: underline; }
.cl-sheet__foot { margin: 8px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }

.cl-toast { position: fixed; left: 0; right: 0; top: 74px; z-index: 40; width: max-content; max-width: calc(100% - 32px); margin: 0 auto; padding: 12px 18px; border-radius: 999px; background: var(--text); color: #fff; font-size: 15px; font-weight: 600; box-shadow: 0 8px 24px rgba(18, 38, 58, .25); }
.cl-toast.is-in { animation: cl-drop .3s ease-out; }
@keyframes cl-drop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@media (min-width: 860px) { .cl-toast { top: 84px; } }

.demo-notice { max-width: 1080px; margin: -96px auto 0; padding: 0 16px 96px; font-size: 12px; color: var(--muted); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition: none !important; }
}