/* club14-community 전용 컴포넌트 스타일.
   색·폰트·간격 변수는 club14.co.kr/design/styles.css의 :root 토큰을 그대로 쓴다.
   이 파일은 그 위에서 폼·테이블·배지 같은, club14 본체엔 없는 "운영 도구" 컴포넌트만 더한다. */

:root {
  --c14c-amber: #B9862E;
  --c14c-amber-bg: #FBF1E2;
  --c14c-red: #B23A3A;
  --c14c-red-bg: #FBECEC;
  --c14c-field-bg: #ffffff;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-kr);
}

/* ── 상단 바(club14 본체의 .site-header를 가볍게 축약) ── */
.c14c-topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--ink); border-bottom: 2px solid var(--ink);
}
.c14c-topbar__inner {
  max-width: 980px; margin: 0 auto; padding: 14px var(--gutter);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.c14c-topbar__logo { height: 26px; width: auto; flex: 0 0 auto; }
.c14c-topbar__title {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  color: var(--lime); padding-left: 14px; border-left: 1px solid var(--green-line);
}
.c14c-topbar__spacer { flex: 1 1 auto; }
.c14c-topbar__nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.c14c-topbar__link {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--on-dark-mute); padding: 8px 10px; border-radius: var(--radius);
}
.c14c-topbar__link:hover { background: var(--green-600); color: var(--lime); }
.c14c-topbar__link.is-active { background: var(--green-600); color: var(--lime); }
.c14c-topbar__who { font-family: var(--font-mono); font-size: 11px; color: var(--on-dark-mute-2); }

/* ── 레이아웃 셸 ── */
.c14c-shell { max-width: 980px; margin: 0 auto; padding: 36px var(--gutter) 80px; }
.c14c-shell--narrow { max-width: 640px; }
.c14c-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--green-700); text-transform: uppercase; margin-bottom: 8px; }
.c14c-h1 { font-family: var(--font-archivo); font-weight: 800; font-size: clamp(26px, 4vw, 38px); letter-spacing: -0.03em; margin: 0 0 6px; text-wrap: balance; }
.c14c-h2 { font-family: var(--font-archivo); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; margin: 0 0 14px; }
.c14c-lede { font-size: 15px; line-height: 1.7; color: var(--text-mute); max-width: 56ch; }
.c14c-section { margin-top: 36px; }
.c14c-section + .c14c-section { margin-top: 36px; }

/* ── 카드 ── */
.c14c-card { background: var(--paper-2); border: 1px solid var(--line); border-radius: 10px; padding: 24px; }
.c14c-card + .c14c-card { margin-top: 16px; }

/* ── 폼 ── */
.c14c-field { margin-bottom: 18px; }
.c14c-field:last-child { margin-bottom: 0; }
.c14c-field label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 7px; }
.c14c-hint { font-size: 12.5px; color: var(--text-mute); margin-top: 6px; line-height: 1.55; }
.c14c-row { display: flex; gap: 14px; flex-wrap: wrap; }
.c14c-row > .c14c-field { flex: 1 1 200px; margin-bottom: 18px; }

.c14c-input, .c14c-textarea, .c14c-select {
  width: 100%; box-sizing: border-box; padding: 11px 13px; font-size: 14.5px; font-family: var(--font-kr);
  border: 1px solid var(--line); border-radius: 8px; background: var(--c14c-field-bg); color: var(--ink);
}
.c14c-input:focus, .c14c-textarea:focus, .c14c-select:focus { outline: 2px solid var(--lime); outline-offset: 1px; border-color: var(--green-700); }
.c14c-textarea { resize: vertical; min-height: 100px; line-height: 1.6; }
.c14c-char-count { font-family: var(--font-mono); font-size: 11px; color: var(--text-mute-2); margin-top: 6px; text-align: right; }
.c14c-char-count.is-short { color: var(--c14c-red); }

/* ── 버튼 ── */
.c14c-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  font-family: var(--font-kr); font-weight: 700; font-size: 14.5px; padding: 12px 20px;
  border-radius: 8px; border: 1.5px solid transparent; transition: background .12s, color .12s, border-color .12s;
}
.c14c-btn--primary { background: var(--ink); color: var(--on-dark); }
.c14c-btn--primary:hover { background: var(--green-700); }
.c14c-btn--accent { background: var(--lime); color: var(--ink); }
.c14c-btn--accent:hover { background: #c3e23c; }
.c14c-btn--outline { background: transparent; border-color: var(--ink); color: var(--ink); }
.c14c-btn--outline:hover { background: var(--ink); color: var(--lime); }
.c14c-btn--danger { background: transparent; border-color: var(--c14c-red); color: var(--c14c-red); }
.c14c-btn--danger:hover { background: var(--c14c-red); color: #fff; }
.c14c-btn--sm { padding: 8px 14px; font-size: 13px; }
.c14c-btn:disabled { opacity: .5; cursor: default; }
.c14c-btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }

/* ── 배지(상태) ── */
.c14c-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.c14c-badge--draft { background: var(--paper-3); color: var(--text-mute); border: 1px solid var(--border-thin); }
.c14c-badge--finalized { background: var(--c14c-amber-bg); color: var(--c14c-amber); }
.c14c-badge--published { background: #E3EFE6; color: var(--green-700); }
.c14c-badge--rejected { background: var(--c14c-red-bg); color: var(--c14c-red); }

/* ── 배너(안내/에러/성공) ── */
.c14c-banner { padding: 13px 16px; border-radius: 8px; font-size: 14px; line-height: 1.55; margin-bottom: 20px; }
.c14c-banner--error { background: var(--c14c-red-bg); border: 1px solid #E8A9A9; color: #8A2626; }
.c14c-banner--info { background: #E7F0E0; border: 1px solid var(--green-line-2); color: var(--green-700); }
.c14c-banner--amber { background: var(--c14c-amber-bg); border: 1px solid #E3C184; color: var(--c14c-amber); }
.c14c-banner[hidden] { display: none; }

/* ── 리스트/테이블형 ── */
.c14c-list { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.c14c-list-row {
  background: var(--paper); padding: 16px 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.c14c-list-row:hover { background: var(--paper-2); }
.c14c-list-row__main { flex: 1 1 240px; min-width: 0; }
.c14c-list-row__title { font-weight: 700; font-size: 15px; }
.c14c-list-row__meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-mute-2); margin-top: 5px; }
.c14c-list-row__side { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

.c14c-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.c14c-table th, .c14c-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.c14c-table th { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--text-mute); font-weight: 600; }
.c14c-table tbody tr:hover { background: var(--paper-2); }
.c14c-table td.is-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.c14c-empty { padding: 30px 10px; text-align: center; color: var(--text-mute); font-size: 14px; }

/* ── 체크리스트(마감 요건) ── */
.c14c-checklist { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.c14c-checklist li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }
.c14c-check-icon { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; margin-top: 1px; }
.c14c-checklist li.is-done .c14c-check-icon { background: var(--green-700); color: #fff; }
.c14c-checklist li.is-pending .c14c-check-icon { background: var(--paper-3); border: 1.5px solid var(--border-thin); color: transparent; }
.c14c-checklist li.is-pending { color: var(--text-mute); }

/* ── 사진 그리드 ── */
.c14c-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-top: 16px; }
.c14c-photo {
  position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; border: 1px solid var(--line);
  background-size: cover; background-position: center; background-color: var(--paper-3);
}
.c14c-photo__badge {
  position: absolute; top: 6px; left: 6px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .05em;
  padding: 3px 7px; border-radius: 999px; background: rgba(18,40,28,.78); color: var(--on-dark);
}
.c14c-photo__badge--public { background: rgba(217,242,75,.92); color: var(--ink); }
.c14c-photo__toggle {
  position: absolute; bottom: 6px; right: 6px; font-family: var(--font-mono); font-size: 9.5px;
  padding: 4px 8px; border-radius: 999px; border: none; cursor: pointer; background: rgba(0,0,0,.55); color: #fff;
}
.c14c-photo-drop {
  border: 1.5px dashed var(--border-thin); border-radius: 10px; padding: 26px; text-align: center;
  color: var(--text-mute); font-size: 13.5px; cursor: pointer; transition: border-color .12s, background .12s;
}
.c14c-photo-drop:hover, .c14c-photo-drop.is-drag { border-color: var(--green-700); background: var(--paper-2); }
.c14c-photo-drop input { display: none; }

/* ── 토큰 링크 공유 박스 ── */
.c14c-link-box { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.c14c-link-box input { flex: 1 1 260px; }
.c14c-copy-ok { font-family: var(--font-mono); font-size: 11px; color: var(--green-700); }

/* ── 탭 ── */
.c14c-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--ink); margin-bottom: 24px; }
.c14c-tab {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; padding: 10px 16px;
  background: transparent; border: none; cursor: pointer; color: var(--text-mute); border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.c14c-tab.is-active { color: var(--ink); border-bottom-color: var(--lime); font-weight: 700; }

/* ── 로딩/상태 화면 ── */
.c14c-status { text-align: center; padding: 90px 20px; }
.c14c-status__icon { font-size: 40px; margin-bottom: 14px; }
.c14c-status__title { font-family: var(--font-archivo); font-weight: 800; font-size: 21px; margin-bottom: 8px; }
.c14c-status__desc { color: var(--text-mute); font-size: 14.5px; line-height: 1.6; }
[hidden] { display: none !important; }

/* ── 선택지 카드(회원 이름 고르기 등) ── */
.c14c-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 10px; }
.c14c-pick { display: block; position: relative; }
.c14c-pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.c14c-pick__card {
  display: block; text-align: center; padding: 13px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color .12s, background .12s;
}
.c14c-pick input:checked + .c14c-pick__card { border-color: var(--green-700); background: var(--paper-2); color: var(--green-700); }

/* ── 다크 모드 ── */
@media (prefers-color-scheme: dark) {
  body:not([data-theme="light"]) { background: var(--ink); color: var(--on-dark); }
  body:not([data-theme="light"]) .c14c-card { background: #17301F; border-color: var(--green-line); }
  body:not([data-theme="light"]) .c14c-input,
  body:not([data-theme="light"]) .c14c-textarea,
  body:not([data-theme="light"]) .c14c-select { background: #17301F; border-color: var(--green-line); color: var(--on-dark); }
  body:not([data-theme="light"]) .c14c-list-row { background: #17301F; }
  body:not([data-theme="light"]) .c14c-list-row:hover { background: #1E3828; }
  body:not([data-theme="light"]) .c14c-list { border-color: var(--green-line); background: var(--green-line); }
  body:not([data-theme="light"]) .c14c-pick__card { background: #17301F; border-color: var(--green-line); color: var(--on-dark); }
  body:not([data-theme="light"]) .c14c-pick input:checked + .c14c-pick__card { background: #1E3828; border-color: var(--lime); color: var(--lime); }
  body:not([data-theme="light"]) .c14c-badge--draft { background: #223226; border-color: var(--green-line); }
  body:not([data-theme="light"]) .c14c-lede,
  body:not([data-theme="light"]) .c14c-hint,
  body:not([data-theme="light"]) .c14c-status__desc { color: var(--on-dark-mute); }
}
body[data-theme="dark"] { background: var(--ink); color: var(--on-dark); }
body[data-theme="dark"] .c14c-card { background: #17301F; border-color: var(--green-line); }
body[data-theme="dark"] .c14c-input,
body[data-theme="dark"] .c14c-textarea,
body[data-theme="dark"] .c14c-select { background: #17301F; border-color: var(--green-line); color: var(--on-dark); }
body[data-theme="dark"] .c14c-list-row { background: #17301F; }
body[data-theme="dark"] .c14c-list { border-color: var(--green-line); background: var(--green-line); }