/* ============================================
   CYL CLINIC v2.0 — Components
   Buttons · Cards · Forms · Notice · Utilities
   ============================================ */

/* === Buttons ================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.75rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  text-decoration: none;
  transition: all var(--t-base) var(--ease);
  white-space: nowrap;
  border: 1.5px solid transparent;
}
.btn-primary {
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dk) 100%);
  color: #FFFFFF;
  box-shadow: var(--shadow-gold);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(201,169,97,0.28); color: #FFFFFF; }
.btn-outline {
  border-color: var(--color-ink);
  color: var(--color-ink);
  background: transparent;
}
.btn-outline:hover { background: var(--color-ink); color: var(--color-bg); }
.btn-ghost { background: transparent; color: var(--color-ink); }
.btn-ghost:hover { background: var(--color-bg-warm); }
.btn-block { width: 100%; }
.btn-sm { padding: 0.6rem 1.2rem; font-size: var(--fs-xs); }
.btn-lg { padding: 1.1rem 2rem; font-size: var(--fs-base); }

/* === Cards ================================== */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius);
  padding: var(--sp-6);
  transition: all var(--t-base) var(--ease);
}
.card:hover {
  border-color: var(--color-gold-lt);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.card-media {
  margin: calc(var(--sp-6) * -1) calc(var(--sp-6) * -1) var(--sp-5);
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
  aspect-ratio: 4 / 3;
  background: var(--color-bg-soft);
}
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.card:hover .card-media img { transform: scale(1.05); }
.card-tag { font-size: var(--fs-xs); letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-gold-dk); font-weight: 600; }
.card-title { font-size: var(--fs-xl); margin: var(--sp-2) 0 var(--sp-3); }
.card-desc { color: var(--color-muted); margin-bottom: var(--sp-4); }
.card-cta { color: var(--color-gold-dk); font-weight: 600; font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: 0.4rem; }
.card-cta::after { content: "\2192"; transition: transform var(--t-fast) var(--ease); }
.card:hover .card-cta::after { transform: translateX(4px); }

/* === Forms ================================== */
.field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: var(--sp-4); }
.field label { font-size: var(--fs-sm); font-weight: 600; color: var(--color-ink-soft); }
.field input, .field textarea, .field select {
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  font-size: var(--fs-base);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(201,169,97,0.15);
}
.field-error { border-color: var(--color-danger) !important; }
.field-help { font-size: var(--fs-xs); color: var(--color-muted); }
.field-msg { font-size: var(--fs-xs); color: var(--color-danger); }

/* === Toast =================================== */
.toast {
  position: fixed; top: calc(var(--header-h) + var(--sp-3)); right: var(--sp-4);
  z-index: 200;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius);
  font-size: var(--fs-sm); font-weight: 500;
  box-shadow: var(--shadow-lg);
  transform: translateX(120%);
  transition: transform var(--t-base) var(--ease-out);
}
.toast.is-show { transform: translateX(0); }
.toast-success { background: var(--color-success); color: #FFF; }
.toast-error   { background: var(--color-danger); color: #FFF; }
.toast-info    { background: var(--color-info); color: #FFF; }

/* === Notice ================================== */
.notice {
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-bg-warm); border-left: 3px solid var(--color-gold);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm); color: var(--color-muted);
}

/* === Utilities =============================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.text-center { text-align: center; }
.text-gold { color: var(--color-gold-dk); }
.text-muted { color: var(--color-muted); }
.text-tracked { letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; font-size: var(--fs-xs); color: var(--color-gold-dk); }
.divider {
  width: 60px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
  margin: var(--sp-4) auto;
}
.fade-in { opacity: 0; transform: translateY(12px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.fade-in.is-in { opacity: 1; transform: translateY(0); }

/* === Breadcrumb ============================== */
.breadcrumb {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--color-line-soft);
}
.breadcrumb nav { display: flex; align-items: center; gap: 0.5rem; font-size: var(--fs-xs); color: var(--color-muted); }
.breadcrumb a { color: var(--color-muted); }
.breadcrumb a:hover { color: var(--color-gold-dk); }
.breadcrumb .sep { margin: 0 0.25rem; }
.breadcrumb .current { color: var(--color-ink); font-weight: 500; }

/* === Accordion (FAQ) ========================= */
.accordion-item { border-bottom: 1px solid var(--color-line-soft); }
.accordion-btn {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: var(--sp-4) 0;
  font-family: var(--font-serif); font-size: var(--fs-lg); font-weight: 500;
  text-align: left; color: var(--color-ink);
  background: none; border: none; cursor: pointer;
}
.accordion-btn .icon { font-size: 1.2rem; transition: transform var(--t-fast) var(--ease); color: var(--color-gold); }
.accordion-item.is-open .accordion-btn .icon { transform: rotate(45deg); }
.accordion-body {
  max-height: 0; overflow: hidden;
  transition: max-height var(--t-base) var(--ease);
}
.accordion-item.is-open .accordion-body { max-height: 500px; }
.accordion-body p { padding-bottom: var(--sp-4); color: var(--color-muted); font-size: var(--fs-base); }