/* 재사용 조각 — 버튼 · 칩 · 점 · 카드 · 표 · 폼. */

/* ── 버튼 ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px; border-radius: var(--r-pill); border: 1px solid transparent;
  font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary {
  background: var(--accent); color: #032029;
  box-shadow: 0 8px 30px rgba(34, 211, 238, 0.28);
}
.btn--primary:hover { box-shadow: 0 12px 40px rgba(34, 211, 238, 0.42); }
.btn--ghost { border-color: var(--line-strong); color: var(--text); background: var(--bg-surface); }
.btn--ghost:hover { border-color: var(--accent); background: var(--accent-soft); }
.btn--sm { padding: 9px 18px; font-size: 14px; }
.btn--full { width: 100%; }

/* ── 칩 · 점 ── */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  border: 1px solid var(--line); color: var(--text-muted);
}
.chip--live { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.chip--ok { color: var(--state-stable); border-color: rgba(52,211,153,.35); background: rgba(52,211,153,.10); }
.chip--wait { color: var(--state-warn); border-color: rgba(251,191,36,.32); background: rgba(251,191,36,.09); }
.chip--no { color: var(--state-offline); border-color: rgba(239,68,68,.32); background: rgba(239,68,68,.09); }

.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.dot--stable { background: var(--state-stable); box-shadow: 0 0 10px rgba(52,211,153,.7); }

/* ★상태는 색만으로 말하지 않는다 — 항상 텍스트가 함께 있다 (제품 규칙과 동일). */
.status { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; }
.status--stable { color: var(--state-stable); }

/* ── 카드 ── */
.cards { display: grid; gap: var(--s-4); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }

.card {
  padding: var(--s-5); border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--bg-surface);
  transition: border-color 0.25s, transform 0.25s var(--ease);
}
.card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.card h3 { font-size: 17px; margin-bottom: var(--s-2); }
.card p { font-size: 14px; color: var(--text-muted); }
.card__tag {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--accent); margin-bottom: var(--s-3);
  padding: 3px 8px; border: 1px solid var(--accent-line); border-radius: var(--r-pill);
}

/* ── 비교표 ── */
.ctable { width: 100%; border-collapse: collapse; font-size: 14px; }
.ctable th, .ctable td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line-soft); }
.ctable thead th { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
.ctable tbody th { color: var(--text); font-weight: 600; width: 22%; }
.ctable__old { color: var(--text-faint); text-decoration: line-through; text-decoration-color: rgba(239,68,68,.45); }
.ctable__new { color: var(--accent); font-weight: 600; }

/* ── 폼 ── */
.field { display: flex; flex-direction: column; gap: 7px; }
.field > span { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.field b { color: var(--accent); }
.field input, .field select, .field textarea {
  padding: 12px 14px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--bg-deep); color: var(--text);
  font-size: 15px; transition: border-color 0.2s, background 0.2s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent); background: var(--bg-panel); outline: none;
}
.field textarea { resize: vertical; min-height: 96px; }
.field select { appearance: none; cursor: pointer; }

/* ── 마퀴 (적용 산업 띠) ── */
.marquee {
  margin-top: var(--s-9); border-block: 1px solid var(--line-soft);
  overflow: hidden; padding-block: var(--s-4);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track { display: flex; gap: var(--s-8); width: max-content; animation: slide 34s linear infinite; }
.marquee__track span {
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-faint); white-space: nowrap;
}
@keyframes slide { to { transform: translateX(-50%); } }

/* ── 인용 ── */
.quote {
  margin-top: var(--s-7); padding: var(--s-6);
  border-left: 3px solid var(--accent); background: var(--bg-surface);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
}
.quote p { font-size: clamp(16px, 2vw, 20px); line-height: 1.6; }
.quote strong { color: var(--accent); }
.quote footer { margin-top: var(--s-3); font-size: 13px; color: var(--text-faint); }

/* ── 스크롤 진입 애니메이션 ──
 * ★`data-reveal` 은 JS 가 붙인다. 스크립트가 아예 안 돌면 속성이 없으므로
 *   내용은 그냥 보인다. 인쇄할 때는 애니메이션 상태와 무관하게 전부 보여야 한다. */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }

@media print {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .nav, .hero__glow, .marquee { display: none; }
  body { background: #fff; color: #111; }
}

@media (max-width: 1000px) { .cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .cards--4, .cards--3 { grid-template-columns: 1fr; } }