/* 안내방송 1개월 무료 체험 모달 — 공용 스타일 (include/trial_modal.ejs · trial_modal_script.ejs 와 짝).
   쓰는 곳: 안내방송 소개(preview_broadcast·v2) · 검색어 맞춤 랜딩(landing/*.ejs). broadcast.css 에서 그대로 옮겨 왔다(2026-09).
   수정 시 이 파일을 링크하는 모든 뷰의 ?v= 를 함께 올릴 것 (SW 캐시 오염 방지). */
  /* ==== Announcement trial modal ==== */
  body.trial-modal-open { overflow: hidden; }
  .trial-modal-backdrop {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(10, 12, 16, .66);
    backdrop-filter: blur(8px);
  }
  .trial-modal-backdrop.is-open { display: flex; }
  .trial-modal {
    position: relative;
    width: min(640px, 100%);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 28px;
    border: 1px solid var(--line-neutral-subtle);
    border-radius: 24px;
    background: white;
    box-shadow: 0 28px 80px rgba(13, 14, 18, .28);
  }
  .trial-step { display: none; }
  .trial-step.is-active { display: block; }
  .trial-hero {
    margin-bottom: 18px;
    padding: 22px;
    border: 1px solid rgba(79, 55, 255, .12);
    border-radius: 18px;
    background:
      radial-gradient(circle at 100% 0%, rgba(79, 55, 255, .14), transparent 40%),
      var(--w-cool-98);
  }
  .trial-hero.compact { padding: 18px 20px; }
  .trial-hero-header {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
  }
  .trial-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--w-cool-5);
    color: white;
    font: 700 11px/1 var(--font-sans);
    letter-spacing: .04em;
  }
  .trial-badge.muted {
    border: 1px solid var(--line-neutral-subtle);
    background: white;
    color: var(--fg-primary);
  }
  .trial-title {
    margin: 0 36px 8px 0;
    color: var(--fg-primary);
    font: 800 clamp(25px, 4vw, 32px)/1.25 var(--font-sans);
    letter-spacing: -.03em;
    word-break: keep-all;
    text-wrap: balance;
  }
  .trial-subtitle {
    margin: 0;
    color: var(--fg-neutral-subtle);
    font: 500 15px/1.65 var(--font-sans);
  }
  .trial-feature-list {
    display: grid;
    gap: 11px;
    margin-top: 18px;
  }
  .trial-feature {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: var(--fg-neutral-subtle);
    font: 600 14px/1.5 var(--font-sans);
  }
  .trial-feature-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--w-blue-50);
    box-shadow: 0 0 0 4px rgba(79, 55, 255, .1);
  }
  .trial-question-card {
    padding: 20px;
    border: 1px solid var(--line-neutral-subtle);
    border-radius: 18px;
    background: white;
  }
  .trial-question-title {
    margin-bottom: 6px;
    color: var(--fg-primary);
    font: 750 18px/1.4 var(--font-sans);
  }
  .trial-question-desc {
    margin-bottom: 16px;
    color: var(--fg-neutral-subtle);
    font: 500 14px/1.55 var(--font-sans);
  }
  .trial-actions { display: grid; gap: 10px; }
  .trial-actions button,
  .trial-submit,
  .trial-back {
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    font: 700 15px/1 var(--font-sans);
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
  }
  .trial-actions button:hover,
  .trial-submit:hover,
  .trial-back:hover { transform: translateY(-1px); }
  .trial-actions button:disabled,
  .trial-submit:disabled { cursor: wait; opacity: .65; transform: none; }
  .trial-cta-primary,
  .trial-submit {
    border-color: var(--w-blue-50);
    background: var(--w-blue-50);
    color: white;
    box-shadow: 0 10px 24px rgba(79, 55, 255, .22);
  }
  .trial-cta-secondary,
  .trial-back {
    border-color: var(--line-neutral);
    background: white;
    color: var(--fg-primary);
  }
  .trial-close {
    position: absolute;
    z-index: 2;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    background: rgba(13, 14, 18, .06);
    color: var(--fg-neutral-subtle);
    font: 400 24px/1 var(--font-sans);
  }
  .trial-form { display: grid; gap: 16px; }
  .trial-form-group label {
    display: block;
    margin-bottom: 7px;
    color: var(--fg-primary);
    font: 700 14px/1.4 var(--font-sans);
  }
  .trial-form-group input,
  .trial-form-group select {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--line-neutral);
    border-radius: 12px;
    outline: none;
    background: white;
    color: var(--fg-primary);
    font: 500 15px/1 var(--font-sans);
  }
  .trial-form-group input:focus,
  .trial-form-group select:focus {
    border-color: var(--w-blue-50);
    box-shadow: 0 0 0 3px rgba(79, 55, 255, .12);
  }
  .trial-form-hint {
    margin-top: 5px;
    color: var(--fg-neutral-muted);
    font: 500 12px/1.45 var(--font-sans);
  }
  /* 연결 부품 신청 — 예/아니오를 먼저 묻고, "예"일 때만 가격이 있는 부품 선택을 펼친다.
     .trial-form-group label(display:block) 규칙을 이기도록 명시도를 올린다. */
  .trial-kit-ask {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  .trial-kit-detail { margin-top: 10px; }
  .trial-kit-detail[hidden] { display: none; }
  .trial-kit-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  .trial-form-group .trial-kit-option {
    position: relative;
    display: grid;
    gap: 3px;
    justify-items: center;
    align-content: center;
    margin: 0;
    min-height: 54px;
    padding: 8px 6px;
    border: 1px solid var(--line-neutral);
    border-radius: 10px;
    background: white;
    cursor: pointer;
    text-align: center;
    word-break: keep-all;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
  }
  /* 선택 상태는 카드 강조로 표현 — 라디오 원은 숨기고 접근성만 유지 */
  .trial-kit-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    opacity: 0;
    pointer-events: none;
  }
  .trial-kit-option strong {
    color: var(--fg-primary);
    font: 700 12.5px/1.3 var(--font-sans);
  }
  .trial-kit-option em {
    color: var(--fg-neutral-muted);
    font: 750 12px/1.2 var(--font-sans);
    font-style: normal;
  }
  .trial-kit-option:has(input:checked) {
    border-color: var(--w-blue-50);
    background: var(--bg-accent-subtle);
    box-shadow: 0 0 0 3px rgba(79, 55, 255, .1);
  }
  .trial-kit-option:has(input:checked) em { color: var(--w-blue-50); }
  .trial-kit-option:has(input:focus-visible) {
    outline: 3px solid rgba(79, 55, 255, .22);
    outline-offset: 2px;
  }
  /* 선택한 부품에 맞는 상황 설명 (JS로 전환) */
  .trial-kit-desc {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--bg-accent-subtle);
    color: var(--fg-neutral-subtle);
    font: 500 12px/1.6 var(--font-sans);
    word-break: keep-all;
  }
  .trial-kit-desc[hidden] { display: none; }
  /* 부품 선택 시에만 나타나는 거리·배송지 입력 */
  .trial-kit-shipping {
    display: grid;
    gap: 16px;
  }
  .trial-kit-shipping[hidden] { display: none; }
  .trial-terms {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--line-neutral-subtle);
    border-radius: 12px;
    background: var(--w-cool-98);
  }
  .trial-terms label {
    display: flex;
    gap: 9px;
    align-items: center;
    color: var(--fg-neutral-subtle);
    font: 500 13px/1.5 var(--font-sans);
  }
  .trial-terms input { width: 18px; height: 18px; accent-color: var(--w-blue-50); }
  .trial-terms a { color: var(--w-blue-50); font-weight: 700; text-decoration: underline; }
  .trial-error {
    display: none;
    margin-bottom: 14px;
    padding: 11px 14px;
    border: 1px solid #fecaca;
    border-radius: 12px;
    background: #fff1f2;
    color: #b42323;
    font: 650 13px/1.5 var(--font-sans);
  }
  .trial-verify-box,
  .trial-account {
    padding: 13px 14px;
    border: 1px solid var(--line-neutral-subtle);
    border-radius: 12px;
    background: var(--w-cool-98);
    color: var(--fg-neutral-subtle);
    font: 600 13px/1.5 var(--font-sans);
  }
  .trial-account {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 18px;
  }
  .trial-email { color: var(--fg-primary); font-weight: 750; }
  @media (max-width: 560px) {
    .trial-modal-backdrop { align-items: flex-end; padding: 0; }
    .trial-modal {
      max-height: 92vh;
      padding: 22px 18px;
      border-radius: 24px 24px 0 0;
    }
    .trial-hero { padding: 18px; }
  }