/*
 * cal.css — neisme Calendar 3페이지 공용 스타일
 *
 * 시안:
 *   /var/services/web/.design/neisme/2026/cal/index.md §7
 *   /var/services/web/.design/neisme/2026/cal/download.md §8
 *   /var/services/web/.design/neisme/2026/cal/feature-requests.md §8
 *
 * 의존: tokens.css (색·폰트·간격 토큰)
 * 하드코딩 금지 — 모든 색·폰트·간격은 var(--*) 토큰 사용
 */

/* ── §A Sub-tabs ──────────────────────────────────────────────────────────── */
.cal-subtabs {
  position: sticky;
  top: var(--header-height);
  z-index: var(--z-sticky);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.cal-subtabs__inner {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: var(--space-2) var(--space-6);
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.cal-subtab {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-fg-muted);
  text-decoration: none;
  white-space: nowrap;
  scroll-snap-align: start;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.cal-subtab:hover {
  background: var(--color-surface);
  color: var(--color-fg);
}

.cal-subtab.is-active,
.cal-subtab[aria-current="page"] {
  background: var(--color-primary-soft);
  color: var(--color-primary-soft-fg);
  border-color: var(--color-primary);
}

/* ── 공용 .cal-page / .cal-section ─────────────────────────────────────── */
.cal-page { background: var(--color-bg); }

.cal-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.cal-section-title {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  color: var(--color-fg);
}

.cal-section-meta {
  font-size: var(--fs-sm);
  color: var(--color-fg-muted);
  margin: 0;
}

.cal-section-link {
  font-size: var(--fs-sm);
  color: var(--color-primary);
  text-decoration: none;
}

.cal-section-link:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

/* ── chip ─────────────────────────────────────────────────────────────────── */
.cal-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-primary-soft);
  color: var(--color-primary-soft-fg);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
}

.cal-chip--muted  { background: var(--color-surface);       color: var(--color-fg-muted); }
.cal-chip--ok     { background: var(--color-success-soft);   color: var(--color-success); }
.cal-chip--admin  { background: var(--color-accent-soft);    color: var(--color-accent-soft-fg); }

/* ==========================================================================
   index.php 전용
   ========================================================================== */

/* ── §B Hero ──────────────────────────────────────────────────────────────── */
.cal-hero {
  max-width: var(--container-xl);
  margin: var(--space-6) auto var(--space-8);
  padding: var(--space-12) var(--space-6);
  text-align: center;
  background: var(--gradient-hero);
  border-radius: var(--radius-lg);
}

.cal-hero__eyebrow {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  letter-spacing: var(--letter-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.cal-hero__title {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  color: var(--color-fg);
}

.cal-hero__brand { color: var(--color-primary); }

.cal-hero__lead {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-md);
  color: var(--color-fg-muted);
}

.cal-hero__meta {
  margin: 0 0 var(--space-6);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.cal-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* macOS platform primary 재정렬 — JS 가 data-platform="mac" body 속성 부여 시 */
body[data-os-primary="mac"] .cal-hero__actions .js-cal-dl[data-cal-platform="mac"] {
  order: -1;
}

.cal-hero__subnote {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--color-fg-subtle);
}

/* ── §C Update ────────────────────────────────────────────────────────────── */
.cal-update {
  max-width: var(--container-xl);
  margin: 0 auto var(--space-8);
  padding: 0 var(--space-6);
}

.cal-update-card {
  padding: var(--space-4) var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: box-shadow var(--duration-fast) var(--ease-out);
}

.cal-update-card--latest {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.cal-update-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.cal-update-card__ver {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
}

.cal-update-card__meta {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--color-fg-subtle);
  font-variant-numeric: tabular-nums;
}

.cal-update-card__note {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--line-base);
  color: var(--color-fg);
}

.cal-update-archive {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
}

.cal-update-archive > summary {
  cursor: pointer;
  color: var(--color-fg-muted);
  font-weight: var(--fw-medium);
}

.cal-update-archive__list {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
}

.cal-update-archive__item {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.cal-update-archive__item:last-child { border-bottom: 0; }

.cal-update-archive__note  { color: var(--color-fg-muted); margin-left: var(--space-2); }
.cal-update-archive__count { color: var(--color-fg-subtle); margin-left: var(--space-1); font-variant-numeric: tabular-nums; }

/* ── §D Showcase ──────────────────────────────────────────────────────────── */
.cal-showcase {
  max-width: var(--container-xl);
  margin: 0 auto var(--space-12);
  padding: 0 var(--space-6);
}

.cal-showcase__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

.cal-shot {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.cal-shot__media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  object-position: center;
  background: var(--color-surface);
}

.cal-shot__title {
  margin: 0;
  padding: var(--space-3) var(--space-4) 0;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-fg);
}

.cal-shot__desc {
  margin: var(--space-1) 0 var(--space-4);
  padding: 0 var(--space-4);
  font-size: var(--fs-sm);
  color: var(--color-fg-muted);
  line-height: var(--line-base);
}

/* ── §E Features ──────────────────────────────────────────────────────────── */
.cal-features {
  max-width: var(--container-xl);
  margin: 0 auto var(--space-12);
  padding: 0 var(--space-6);
}

.cal-features__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.cal-feature {
  padding: var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.cal-feature:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

.cal-feature__icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-3);
  font-size: var(--fs-2xl);
  background: var(--color-primary-soft);
  color: var(--color-primary-soft-fg);
  border-radius: var(--radius-md);
}

.cal-feature__title {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-fg);
}

.cal-feature__desc {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-fg-muted);
  line-height: var(--line-base);
}

/* ── §F Board preview ────────────────────────────────────────────────────── */
.cal-board-preview {
  max-width: var(--container-xl);
  margin: 0 auto var(--space-16);
  padding: 0 var(--space-6);
}

.cal-board-preview__list {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.cal-board-preview__list > li + li {
  border-top: 1px solid var(--color-border);
}

.cal-board-preview__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  color: inherit;
  transition: background var(--duration-fast) var(--ease-out);
}

.cal-board-preview__row:hover { background: var(--color-surface); }

.cal-board-preview__title {
  flex: 1;
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-board-preview__meta {
  flex-shrink: 0;
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--color-fg-subtle);
  font-variant-numeric: tabular-nums;
}

.cal-board-preview__cta { width: 100%; justify-content: center; }

.cal-board-preview__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-12) var(--space-6);
  gap: var(--space-3);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
}

.cal-board-preview__empty-icon  { font-size: 48px; }

.cal-board-preview__empty-title {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
}

.cal-board-preview__empty-msg {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-fg-muted);
}

/* ==========================================================================
   download.php 전용
   ========================================================================== */

/* ── §B Head ──────────────────────────────────────────────────────────────── */
.cal-dl-head {
  max-width: var(--container-xl);
  margin: var(--space-6) auto var(--space-6);
  padding: 0 var(--space-6);
}

.cal-dl-head__meta {
  margin: var(--space-3) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.cal-dl-head__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
}

.cal-dl-head__status > strong {
  font-weight: var(--fw-semibold);
  color: var(--color-fg-muted);
}

/* server status badge */
.cal-server-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  color: var(--color-fg-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  transition: background var(--duration-fast) var(--ease-out);
}

.cal-server-badge .usage { margin-left: var(--space-1); }

/* 5단계 색 (Lead 결정 #2) */
.cal-server-badge[data-status-bucket="cool"]    { background: var(--color-primary-soft);  color: var(--color-primary-soft-fg); }
.cal-server-badge[data-status-bucket="warm"]    { background: var(--color-success-soft);  color: var(--color-success); }
.cal-server-badge[data-status-bucket="hot"]     { background: var(--color-warn-soft);     color: var(--color-warn); }
.cal-server-badge[data-status-bucket="danger"]  { background: var(--color-danger-soft);   color: var(--color-danger); }
.cal-server-badge[data-status-bucket="offline"] { background: var(--color-surface-2);     color: var(--color-fg-subtle); }

/* ── §C Latest ────────────────────────────────────────────────────────────── */
.cal-dl-latest {
  max-width: var(--container-xl);
  margin: 0 auto var(--space-8);
  padding: var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.cal-dl-latest__title {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
}

.cal-dl-latest__note {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-sm);
  line-height: var(--line-base);
  color: var(--color-fg);
}

.cal-dl-latest__filenames {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-border);
  font-size: var(--fs-xs);
  color: var(--color-fg-subtle);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.cal-dl-latest__filenames code {
  font-family: var(--font-mono);
  background: var(--color-surface);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

/* ── 공용 .cal-dl-row ────────────────────────────────────────────────────── */
.cal-dl-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px dashed var(--color-border);
}

.cal-dl-row:last-of-type { border-bottom: 0; }

.cal-dl-row__label {
  flex: 0 0 80px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-fg-muted);
}

.cal-dl-row__buttons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.cal-dl-row__unsupported {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-fg-subtle);
  font-style: italic;
}

/* download button */
.cal-dl-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary);
  color: var(--color-primary-fg);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.cal-dl-btn:hover  { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.cal-dl-btn:active { background: var(--color-primary-active); transform: translateY(1px); }
.cal-dl-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.cal-dl-btn--sm { padding: var(--space-1) var(--space-3); font-size: var(--fs-xs); }

/* status 색 변형 */
.cal-dl-btn[data-status-bucket="hot"]     { background: var(--color-warn);   border-color: var(--color-warn);   color: var(--color-bg); }
.cal-dl-btn[data-status-bucket="danger"]  { background: var(--color-danger);  border-color: var(--color-danger); }
.cal-dl-btn[data-status-bucket="offline"] {
  background: var(--color-surface-2);
  border-color: var(--color-border);
  color: var(--color-fg-subtle);
  pointer-events: none;
}

/* ── §D Archive ──────────────────────────────────────────────────────────── */
.cal-dl-archive {
  max-width: var(--container-xl);
  margin: 0 auto var(--space-12);
  padding: 0 var(--space-6);
}

.cal-dl-archive__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.cal-dl-arch-card {
  padding: var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.cal-dl-arch-card:hover { border-color: var(--color-border-strong); }

.cal-dl-arch-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.cal-dl-arch-card__ver {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--color-fg);
}

.cal-dl-arch-card__meta {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--color-fg-subtle);
  font-variant-numeric: tabular-nums;
}

.cal-dl-arch-card__note {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-fg);
  line-height: var(--line-base);
}

/* ── §E Help ──────────────────────────────────────────────────────────────── */
.cal-dl-help {
  max-width: var(--container-xl);
  margin: 0 auto var(--space-16);
  padding: var(--space-4) var(--space-6);
  background: var(--color-info-soft);
  border: 1px solid var(--color-info);
  border-radius: var(--radius-md);
}

.cal-dl-help__title {
  font-size: var(--fs-base);
  color: var(--color-info-active);
  margin: 0 0 var(--space-2);
}

.cal-dl-help ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--color-fg);
}

.cal-dl-help ul > li::before { content: '• '; color: var(--color-info); margin-right: var(--space-1); }
.cal-dl-help a { color: var(--color-primary); }
.cal-dl-help a:hover { color: var(--color-primary-hover); }

/* ==========================================================================
   feature-requests.php 전용
   ========================================================================== */

/* ── §B Head ──────────────────────────────────────────────────────────────── */
.cal-board-head {
  max-width: var(--container-md);
  margin: var(--space-6) auto var(--space-4);
  padding: 0 var(--space-6);
}

.cal-board-head__lead {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-sm);
  color: var(--color-fg-muted);
  line-height: var(--line-base);
}

/* ── §C Flash ─────────────────────────────────────────────────────────────── */
.cal-board-flash {
  max-width: var(--container-md);
  margin: 0 auto var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.cal-board-flash--ok  { background: var(--color-success-soft); color: var(--color-success); border: 1px solid var(--color-success); }
.cal-board-flash--err { background: var(--color-danger-soft);  color: var(--color-danger);  border: 1px solid var(--color-danger);  }

/* ── §D Form ──────────────────────────────────────────────────────────────── */
.cal-board-form {
  max-width: var(--container-md);
  margin: 0 auto var(--space-8);
  padding: var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.cal-board-form__title {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-lg);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-2);
}

.cal-board-form__body { display: grid; gap: var(--space-3); }

.cal-board-form__honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.cal-board-form__submit { justify-self: start; }

/* ── form-field (auth/_states.md §5 재사용) ───────────────────────────────── */
.form-field { display: grid; gap: var(--space-1); }

.form-field__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-fg);
}

.form-field__label .required { color: var(--color-danger); margin-left: 2px; }

.form-field__input {
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-base);
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-fg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.form-field__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.form-field__input--area {
  resize: vertical;
  min-height: 120px;
  line-height: var(--line-base);
}

.form-field__help  { margin: 0; font-size: var(--fs-xs); color: var(--color-fg-subtle); }
.form-field__error { margin: 0; font-size: var(--fs-xs); color: var(--color-danger); }

/* ── §E List + Thread ──────────────────────────────────────────────────────── */
.cal-board-list {
  max-width: var(--container-md);
  margin: 0 auto var(--space-8);
  padding: 0 var(--space-6);
  display: grid;
  gap: var(--space-4);
}

.cal-board-thread {
  padding: var(--space-4) var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  scroll-margin-top: calc(var(--header-height) + 80px);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.cal-board-thread:hover { border-color: var(--color-border-strong); }

.cal-board-thread.is-resolved {
  background: var(--color-success-soft);
  border-color: var(--color-success);
}

.cal-board-thread.is-deleted { opacity: 0.5; }

.cal-board-thread__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.cal-board-thread__title {
  flex: 1 0 100%;
  margin: var(--space-1) 0 0;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-fg);
}

.cal-board-thread__meta {
  flex: 1 0 100%;
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--color-fg-subtle);
  font-variant-numeric: tabular-nums;
}

.cal-board-thread__body {
  padding: var(--space-3) 0;
  font-size: var(--fs-sm);
  line-height: var(--line-base);
  color: var(--color-fg);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.cal-board-thread__no-reply {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-xs);
  color: var(--color-fg-subtle);
  font-style: italic;
}

.cal-board-thread__replies {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm);
}

.cal-board-thread__replies-h {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  letter-spacing: var(--letter-wide);
  text-transform: uppercase;
}

.cal-board-reply__meta {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--color-fg-subtle);
}

.cal-board-reply__body {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-sm);
  color: var(--color-fg);
  line-height: var(--line-base);
}

/* admin actions */
.cal-board-thread__admin {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.cal-board-thread__admin-form { display: inline; }

.cal-board-thread__delete { color: var(--color-danger); }
.cal-board-thread__delete:hover { background: var(--color-danger-soft); border-color: var(--color-danger); }

.cal-board-thread__reply-form {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
}

.cal-board-thread__reply-form > summary {
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
}

.cal-board-thread__reply-form form {
  margin-top: var(--space-2);
  display: grid;
  gap: var(--space-2);
}

/* 빈 상태 */
.cal-board-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-12) var(--space-6);
  gap: var(--space-3);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

.cal-board-empty__icon  { font-size: 48px; }
.cal-board-empty__title { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.cal-board-empty__msg   { margin: 0; font-size: var(--fs-sm); color: var(--color-fg-muted); }

/* ── §F Hint ──────────────────────────────────────────────────────────────── */
.cal-board-hint {
  max-width: var(--container-md);
  margin: 0 auto var(--space-16);
  padding: var(--space-3) var(--space-6);
  font-size: var(--fs-xs);
  color: var(--color-fg-subtle);
  text-align: center;
  line-height: var(--line-base);
}

/* ==========================================================================
   반응형
   ========================================================================== */

@media (max-width: 1023.98px) {
  /* index */
  .cal-features__grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cal-showcase__grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cal-hero { padding: var(--space-10) var(--space-6); }
  .cal-hero__title { font-size: var(--fs-2xl); }
  /* download */
  .cal-dl-row__label { flex-basis: 100%; }
}

@media (max-width: 639.98px) {
  /* sub-tabs */
  .cal-subtabs__inner { padding: var(--space-2) var(--space-4); }

  /* index */
  .cal-features__grid,
  .cal-showcase__grid { grid-template-columns: 1fr; }

  .cal-hero { margin: var(--space-3) var(--space-3) var(--space-6); padding: var(--space-8) var(--space-4); }
  .cal-hero__title { font-size: var(--fs-xl); }
  .cal-hero__actions .btn { width: 100%; }

  .cal-update,
  .cal-showcase,
  .cal-features,
  .cal-board-preview { padding: 0 var(--space-4); }

  .cal-board-preview__row { flex-wrap: wrap; }
  .cal-board-preview__title { flex: 1 0 100%; white-space: normal; }

  /* download */
  .cal-dl-head,
  .cal-dl-latest,
  .cal-dl-archive,
  .cal-dl-help { padding-left: var(--space-4); padding-right: var(--space-4); }

  .cal-dl-row__buttons { flex-direction: column; align-items: stretch; }
  .cal-dl-btn { justify-content: center; width: 100%; }

  /* board */
  .cal-board-head,
  .cal-board-flash,
  .cal-board-form,
  .cal-board-list,
  .cal-board-hint { padding-left: var(--space-4); padding-right: var(--space-4); }

  .cal-board-thread { padding: var(--space-3) var(--space-4); }
  .cal-board-form   { padding: var(--space-4); }
  .cal-board-thread__admin { flex-direction: column; align-items: stretch; }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .cal-feature,
  .cal-update-card,
  .cal-board-preview__row,
  .cal-dl-btn,
  .cal-dl-arch-card,
  .cal-board-thread,
  .form-field__input,
  .cal-server-badge { transition: none; }

  .cal-feature:hover,
  .cal-update-card--latest:hover { box-shadow: none; }
  .cal-dl-btn:active { transform: none; }
}