/* 안내방송 소개(preview_broadcast.ejs) 전용 스타일 — 인라인 <style>(약 84KB)을 분리해 브라우저 캐시를 타게 함.
   수정 시 preview_broadcast.ejs 의 ?v= 를 함께 올릴 것 (SW 캐시 오염 방지). */
  /* ==== Broadcast hero ==== */
  .bc-hero { padding: 72px 0 64px; background: linear-gradient(180deg, var(--w-cool-99), white); }
  .bc-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr);
    gap: clamp(44px, 5vw, 76px);
    align-items: center;
  }
  .bc-hero-copy { padding: 16px 0; }
  .bc-hero-title {
    max-width: 640px;
    margin-top: 24px;
    font: 800 clamp(38px, 4.5vw, 58px)/1.08 var(--font-sans);
    letter-spacing: -0.036em;
    color: var(--fg-primary);
  }
  .bc-hero-title .accent {
    display: block;
    margin-bottom: 12px;
    color: var(--w-blue-50);
    font: 750 clamp(23px, 2.2vw, 30px)/1.25 var(--font-sans);
    letter-spacing: -0.025em;
  }
  .bc-hero-title .headline {
    display: block;
    text-wrap: balance;
  }
  .bc-hero h1 .strike { text-decoration: line-through; text-decoration-color: var(--w-red-60); text-decoration-thickness: 4px; color: var(--fg-neutral-muted); }
  .bc-hero,
  [data-screen-label="02 Pain"],
  [data-screen-label="03 Use Cases"] {
    word-break: keep-all;
    overflow-wrap: break-word;
  }
  .bc-hero-grid > *,
  .pain-card,
  .uc-card {
    min-width: 0;
  }

  /* 메인 이미지의 실제 스피커 위치에서 음파가 퍼지는 히어로 비주얼 */
  .bc-hero-visual {
    position: relative;
    min-height: 430px;
    aspect-ratio: 1490 / 1056;
    border: 1px solid rgba(13, 14, 18, 0.1);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: var(--shadow-emphasize);
    isolation: isolate;
  }
  .bc-hero-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(13, 14, 18, 0.02) 58%, rgba(13, 14, 18, 0.28) 100%),
      linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 42%);
  }
  .bc-hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .speaker-wave {
    position: absolute;
    top: 49.5%;
    left: 15.5%;
    width: 34px;
    height: 34px;
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
  }
  .speaker-wave::before {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: rgba(79, 55, 255, 0.78);
    box-shadow:
      0 0 0 5px rgba(255, 255, 255, 0.72),
      0 5px 18px rgba(32, 24, 92, 0.3);
  }
  .speaker-wave span {
    position: absolute;
    inset: 0;
    border: 3px solid rgba(79, 55, 255, 0.72);
    border-radius: 50%;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.75));
    animation: speaker-wave-pulse 2.4s cubic-bezier(0.2, 0.62, 0.35, 1) infinite;
  }
  .speaker-wave span:nth-child(2) { animation-delay: 0.8s; }
  .speaker-wave span:nth-child(3) { animation-delay: 1.6s; }
  @keyframes speaker-wave-pulse {
    0% { transform: scale(0.7); opacity: 0; }
    14% { opacity: 0.95; }
    100% { transform: scale(7.8); opacity: 0; }
  }
  .bc-live-card {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 3;
    max-width: calc(100% - 36px);
    padding: 13px 16px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 14px;
    background: rgba(13, 14, 18, 0.78);
    color: white;
    box-shadow: 0 12px 30px rgba(13, 14, 18, 0.18);
    backdrop-filter: blur(12px);
  }
  .bc-live-card .status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.78);
    font: 700 10px/1 var(--font-sans);
    letter-spacing: 0.08em;
  }
  .bc-live-card .live-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: #ff5e6c;
    box-shadow: 0 0 9px #ff5e6c;
  }
  .bc-live-card strong {
    display: block;
    font: 700 13px/1.45 var(--font-sans);
  }
  /* 앱 진입 버튼 — 폰(구글 플레이)과 PC(데스크톱 앱)를 같은 무게로 나란히 둔다.
     한쪽만 있으면 "모바일 전용 서비스"로 오해하므로 두 버튼은 항상 같은 모양·크기를 유지할 것. */
  .bc-hero-store {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .bc-hero-store-btns {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  .gp-store-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 52px;
    padding: 0 22px;
    border: 1px solid var(--line-neutral-strong);
    border-radius: 12px;
    background: white;
    color: var(--fg-primary);
    font: 600 14.5px/1 var(--font-sans);
    letter-spacing: -0.012em;
    white-space: nowrap;
    transition: all 0.15s ease;
  }
  .gp-store-btn svg { flex: 0 0 auto; }
  button.gp-store-btn { cursor: pointer; }
  /* 위: 어느 기기용인가(플랫폼) · 아래: 무엇을 하는가(동작) */
  .store-btn-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    text-align: left;
  }
  .store-btn-kicker {
    color: var(--fg-neutral-muted);
    font: 700 10px/1 var(--font-sans);
    letter-spacing: .07em;
    text-transform: uppercase;
  }
  .store-btn-label {
    font: 600 14.5px/1 var(--font-sans);
    letter-spacing: -.012em;
  }
  .gp-store-btn.is-installed {
    border-color: var(--w-green-60);
    color: var(--w-green-60);
    cursor: default;
  }
  .gp-store-btn.is-installed .store-btn-kicker { color: var(--w-green-60); }
  .gp-store-btn.is-installed:hover { transform: none; background: white; }
  .gp-store-btn:hover {
    border-color: var(--fg-primary);
    background: var(--bg-neutral);
    transform: translateY(-1px);
  }
  .gp-store-btn:focus-visible {
    outline: 2px solid var(--w-blue-50);
    outline-offset: 3px;
  }
  .bc-hero-store-note {
    color: var(--fg-neutral-muted);
    font: 500 13px/1.5 var(--font-sans);
  }
  @media (max-width: 1080px) {
    .bc-hero-grid {
      grid-template-columns: minmax(0, 1fr) minmax(380px, 0.9fr);
      gap: 38px;
    }
    .bc-hero-title { font-size: clamp(36px, 4.3vw, 50px); }
  }
  @media (max-width: 900px) {
    .bc-hero { padding-top: 48px; }
    .bc-hero-grid { grid-template-columns: 1fr; gap: 34px; }
    .bc-hero-visual { min-height: 0; }
    .bc-hero-copy { padding: 0; }
  }
  @media (max-width: 560px) {
    .bc-hero-visual { border-radius: 20px; }
    .bc-live-card { right: 12px; bottom: 12px; padding: 10px 12px; }
    .bc-live-card strong { font-size: 12px; }
    .bc-hero-store { gap: 10px; }
    .bc-hero-store-btns { width: 100%; gap: 10px; }
    .bc-hero-store-btns .gp-store-btn { width: 100%; }
    .gp-store-btn { height: 48px; padding: 0 18px; font-size: 14px; }
    .store-btn-label { font-size: 14px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .speaker-wave span {
      animation: none;
      transform: scale(2.7);
      opacity: 0.35;
    }
    .speaker-wave span:nth-child(2) { transform: scale(4.8); opacity: 0.2; }
    .speaker-wave span:nth-child(3) { transform: scale(6.8); opacity: 0.12; }
  }

  /* ==== Pain → solution ==== */
  .pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  @media (max-width: 860px) { .pain-grid { grid-template-columns: 1fr; } }
  .pain-card {
    padding: 28px;
    border-radius: 20px;
    background: white;
    border: 1px solid var(--line-neutral-subtle);
  }
  .pain-card .label { font: 700 11px/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--w-red-50); }
  .pain-card .label.ok { color: var(--w-green-50); }
  .pain-card h4 { font: 700 20px/1.3 var(--font-sans); letter-spacing:-0.018em; color: var(--fg-primary); margin: 12px 0 8px; }
  .pain-card p { font: 500 14.5px/1.65 var(--font-sans); color: var(--fg-neutral-subtle); }
  .pain-card .num { font: 800 26px/1 var(--font-sans); color: var(--fg-neutral-muted); letter-spacing:-0.028em; }
  .pain-card .num.strike { text-decoration: line-through; text-decoration-color: var(--w-red-60); text-decoration-thickness: 2px; }

  /* ==== Use case cards (single operator) ==== */
  .uc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  @media (max-width: 1000px) { .uc-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 640px) { .uc-grid { grid-template-columns: 1fr; } }
  .uc-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 24px;
    background: white;
    border: 1px solid var(--line-neutral-subtle);
    border-radius: 18px;
    display: flex; flex-direction: column; gap: 10px;
    transition: all .15s;
  }
  .uc-card::before,
  .uc-card::after {
    content: "";
    position: absolute;
    z-index: -2;
    inset: 0;
    pointer-events: none;
  }
  .uc-card::before {
    background: var(--uc-bg) center / cover no-repeat;
    transition: transform .35s ease;
  }
  .uc-card::after {
    z-index: -1;
    background: linear-gradient(
      118deg,
      rgba(255, 255, 255, .97) 0%,
      rgba(255, 255, 255, .93) 48%,
      rgba(255, 255, 255, .30) 100%
    );
  }
  .uc-card:hover { border-color: var(--w-blue-50); transform: translateY(-2px); box-shadow: var(--shadow-emphasize); }
  .uc-card:hover::before { transform: scale(1.035); }
  .uc-card .ic {
    width: 40px; height: 40px; border-radius: 10px;
    background: var(--bg-accent-subtle); color: var(--w-blue-45);
    display: grid; place-items: center;
  }
  .uc-card h4 { font: 700 17px/1.3 var(--font-sans); letter-spacing:-0.014em; color: var(--fg-primary); }
  .uc-card .who { font: 600 12px/1.2 var(--font-sans); color: var(--fg-neutral-muted); }
  .uc-card p { font: 500 13.5px/1.6 var(--font-sans); color: var(--fg-neutral-subtle); letter-spacing:-0.005em; }
  .uc-card .quote {
    margin-top: auto;
    padding: 12px;
    background: rgba(250, 250, 253, .88); border-radius: 8px;
    font: 500 12.5px/1.5 var(--font-sans); color: var(--fg-neutral-subtle);
    border-left: 3px solid var(--w-blue-50);
    backdrop-filter: blur(4px);
  }

  /* ==== Composer mock (the broadcast composer) ==== */
  .composer-mock {
    background: white;
    border: 1px solid var(--line-neutral);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-emphasize);
  }
  .composer-head {
    padding: 14px 20px;
    background: var(--w-cool-99);
    border-bottom: 1px solid var(--line-neutral-subtle);
    display: flex; align-items: center; gap: 12px;
    font: 600 13px/1 var(--font-sans);
  }
  .composer-head .crumb.active { color: var(--fg-primary); font-weight: 700; }
  .composer-head .crumb { color: var(--fg-neutral-muted); }
  .composer-grid { display: grid; grid-template-columns: 1fr 1fr; }
  @media (max-width: 860px) { .composer-grid { grid-template-columns: 1fr; } }
  .composer-pane { padding: 24px; }
  .composer-pane + .composer-pane { border-left: 1px solid var(--line-neutral-subtle); background: var(--w-cool-99); }
  @media (max-width: 860px) { .composer-pane + .composer-pane { border-left: none; border-top: 1px solid var(--line-neutral-subtle); } }
  .composer-pane h6 { font: 700 12px/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-neutral-muted); margin-bottom: 12px; }
  .composer-text {
    background: white;
    border: 1px solid var(--line-neutral-subtle);
    border-radius: 12px;
    padding: 16px;
    font: 500 14.5px/1.7 var(--font-sans); letter-spacing:-0.005em;
    color: var(--fg-primary);
    min-height: 140px;
  }
  .composer-text .ph-tag { background: var(--bg-accent-subtle); color: var(--w-blue-45); padding: 1px 6px; border-radius: 4px; font: 600 12.5px/1.4 var(--font-mono); }
  .composer-text .hl { background: rgba(255,205,0,0.3); padding: 0 2px; }

  .composer-controls { display: flex; flex-direction: column; gap: 14px; }
  .composer-row {
    display: flex; gap: 10px; align-items: center;
    padding: 10px 14px;
    background: white;
    border: 1px solid var(--line-neutral-subtle);
    border-radius: 10px;
  }
  .composer-row .lab { font: 600 12px/1 var(--font-sans); color: var(--fg-neutral-muted); flex: 0 0 60px; }
  .composer-row .val { font: 600 13px/1 var(--font-sans); color: var(--fg-primary); }
  .composer-row .pill { padding: 3px 8px; border-radius: 99px; background: var(--bg-neutral); font: 600 11px/1 var(--font-sans); color: var(--fg-neutral-subtle); }
  .composer-row .pill.on { background: var(--w-cool-5); color: white; }
  .composer-pane .footnote { font: 500 11.5px/1.4 var(--font-sans); color: var(--fg-neutral-muted); margin-top: 14px; }

  /* ==== Feature blocks (alternating) ==== */
  .feat-row {
    display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center;
    padding: 56px 0;
    border-bottom: 1px solid var(--line-neutral-subtle);
  }
  @media (max-width: 960px) { .feat-row { grid-template-columns: 1fr; gap: 32px; } }
  .feat-row.flip { grid-template-columns: 1.1fr 1fr; }
  .feat-row.flip .feat-text { order: 2; }
  @media (max-width: 960px) { .feat-row.flip .feat-text { order: 0; } .feat-row.flip { grid-template-columns: 1fr; } }
  .feat-text .eyebrow { margin-bottom: 16px; }
  .feat-text h3 { font: 800 30px/1.2 var(--font-sans); letter-spacing:-0.028em; color: var(--fg-primary); text-wrap: balance; margin-bottom: 16px; }
  .feat-text p.lead { font: 500 16px/1.7 var(--font-sans); color: var(--fg-neutral-subtle); letter-spacing:-0.005em; margin-bottom: 20px; }
  .feat-bullets { display: flex; flex-direction: column; gap: 12px; }
  .feat-bullet {
    display: flex; gap: 12px; align-items: flex-start;
    font: 500 14.5px/1.55 var(--font-sans); color: var(--fg-neutral-subtle);
  }
  .feat-bullet::before {
    content: "→"; color: var(--w-blue-50); font-weight: 800; font-size: 16px; line-height: 1.4;
    flex: 0 0 auto;
  }
  .feat-bullet b { color: var(--fg-primary); font-weight: 700; }

  /* visual cards */
  .v-card { background: white; border: 1px solid var(--line-neutral); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-normal); }
  .v-card-head { padding: 12px 16px; background: var(--w-cool-99); border-bottom: 1px solid var(--line-neutral-subtle); display: flex; gap: 10px; align-items: center; font: 600 12px/1 var(--font-sans); color: var(--fg-neutral-subtle); }
  .v-card-head .dot-r { width: 9px; height: 9px; border-radius:50%; background: var(--w-red-60); }
  .v-card-head .dot-y { width: 9px; height: 9px; border-radius:50%; background: var(--w-orange-60); }
  .v-card-head .dot-g { width: 9px; height: 9px; border-radius:50%; background: var(--w-green-60); }
  .v-card-body { padding: 20px; }

  /* music + voice mixer mock */
  .music-mixer { display: flex; flex-direction: column; gap: 10px; }
  .music-mixer .layer { display: flex; gap: 10px; align-items: center; }
  .music-mixer .layer .lab { width: 90px; font: 600 11px/1.2 var(--font-sans); color: var(--fg-neutral-subtle); }
  .music-mixer .layer .lab small { display:block; color: var(--fg-neutral-muted); font-weight: 500; font-size: 10.5px; }
  .music-mixer .clip { flex: 1; height: 32px; border-radius: 6px; position: relative; overflow: hidden; }
  .music-mixer .clip-bg { background: linear-gradient(90deg, var(--w-cyan-60), var(--w-cyan-60) 30%, rgba(0,184,235,0.4) 35%, rgba(0,184,235,0.4) 65%, var(--w-cyan-60) 70%); }
  .music-mixer .clip-voice { background: linear-gradient(90deg, transparent 28%, var(--w-blue-50) 32%, var(--w-blue-50) 62%, transparent 66%); }
  .music-mixer .clip-bg-2 { background: var(--w-cool-95); }
  .music-mixer .wave { position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.4) 0px, rgba(255,255,255,0.4) 1px, transparent 2px, transparent 4px); }
  .music-mixer .timeline { display: flex; justify-content: space-between; font: 500 10px/1 var(--font-mono); color: var(--fg-neutral-muted); padding-top: 8px; border-top: 1px solid var(--line-neutral-subtle); }
  .music-mixer .duck-marker {
    position: absolute; top: 4px; bottom: 4px; left: 32%; right: 34%;
    border-left: 2px dashed rgba(13,14,18,0.4);
    border-right: 2px dashed rgba(13,14,18,0.4);
  }
  .music-mixer .duck-label { position: absolute; top: -18px; left: 32%; font: 600 10px/1 var(--font-sans); color: var(--fg-neutral-muted); }

  /* schedule mini */
  .schedule-list { display: flex; flex-direction: column; }
  .schedule-row {
    display: grid; grid-template-columns: 70px 1fr 80px;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line-neutral-subtle);
    align-items: center;
  }
  .schedule-row:last-child { border-bottom: none; }
  .schedule-row .time { font: 700 14px/1 var(--font-mono); color: var(--fg-primary); }
  .schedule-row .ttl { font: 600 13px/1.3 var(--font-sans); color: var(--fg-primary); }
  .schedule-row .ttl small { display: block; font-weight: 500; color: var(--fg-neutral-muted); font-size: 12px; margin-top: 3px; }
  .schedule-row .pill { padding: 3px 8px; border-radius: 99px; font: 600 10.5px/1 var(--font-sans); display: inline-flex; align-items: center; gap: 5px; justify-self: end; }
  .pill-done { background: rgba(0,191,64,0.12); color: var(--w-green-50); }
  .pill-live { background: rgba(255,94,108,0.12); color: var(--w-red-50); }
  .pill-q { background: var(--bg-neutral); color: var(--fg-neutral-subtle); }
  .pill-rep { background: rgba(79,55,255,0.1); color: var(--w-blue-45); }

  /* template gallery */
  .tmpl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
  @media (max-width: 1000px) { .tmpl-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { .tmpl-grid { grid-template-columns: 1fr; } }
  .tmpl-card {
    background: white; border: 1px solid var(--line-neutral-subtle);
    border-radius: 14px; padding: 18px;
    display: flex; flex-direction: column; gap: 10px;
    min-height: 180px;
  }
  .tmpl-card .cat { font: 700 10.5px/1 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--w-blue-45); }
  .tmpl-card h5 { font: 700 14px/1.3 var(--font-sans); letter-spacing:-0.005em; color: var(--fg-primary); }
  .tmpl-card p { font: 500 12.5px/1.55 var(--font-sans); color: var(--fg-neutral-subtle); }
  .tmpl-card .use { margin-top: auto; font: 600 11.5px/1 var(--font-sans); color: var(--w-blue-50); display: inline-flex; gap: 4px; align-items: center; }

  /* voices grid */
  .voices-strip {
    display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px;
  }
  @media (max-width: 960px) { .voices-strip { grid-template-columns: repeat(4, 1fr); } }
  @media (max-width: 560px) { .voices-strip { grid-template-columns: repeat(3, 1fr); } }
  .voice-pill {
    background: white; border: 1px solid var(--line-neutral-subtle);
    border-radius: 12px; padding: 14px 8px;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    text-align: center;
  }
  .voice-pill .av { width: 36px; height: 36px; border-radius: 50%; background: var(--w-cool-95); }
  .voice-pill .nm { font: 700 12.5px/1.2 var(--font-sans); color: var(--fg-primary); }
  .voice-pill .tg { font: 500 11px/1.2 var(--font-sans); color: var(--fg-neutral-muted); }

  /* language chips */
  .lang-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .lang-chips span {
    padding: 6px 12px; border-radius: 99px;
    background: white; border: 1px solid var(--line-neutral-subtle);
    font: 600 12.5px/1 var(--font-sans); color: var(--fg-primary);
    display: inline-flex; align-items: center; gap: 6px;
  }
  .lang-chips span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--w-blue-50); }

  /* equipment */
  .eq-flow {
    display: grid; grid-template-columns: 1fr 40px 1fr 40px 1fr; gap: 8px;
    align-items: stretch; max-width: 720px; margin: 0 auto;
  }
  @media (max-width: 720px) { .eq-flow { grid-template-columns: 1fr; } .eq-flow .arrow { display: none; } }
  .eq-node {
    background: white; border: 1px solid var(--line-neutral-subtle);
    border-radius: 14px; padding: 18px;
    display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center;
  }
  .eq-node.cloud { background: var(--w-cool-5); color: white; border-color: transparent; }
  .eq-node h6 { font: 700 13px/1.2 var(--font-sans); color: var(--fg-primary); }
  .eq-node.cloud h6 { color: white; }
  .eq-node p { font: 500 12.5px/1.4 var(--font-sans); color: var(--fg-neutral-muted); }
  .eq-node.cloud p { color: rgba(255,255,255,0.7); }
  .eq-node .ic { width: 36px; height: 36px; border-radius: 8px; background: var(--bg-neutral); display: grid; place-items: center; color: var(--w-blue-50); }
  .eq-node.cloud .ic { background: rgba(255,255,255,0.12); color: white; }
  .arrow { display: grid; place-items: center; font: 700 22px/1 var(--font-sans); color: var(--fg-neutral-muted); }

  /* ==== 기존 방송장비 연결 가이드 · 압축 탭형 ==== */
  .bc-connect-section {
    padding: clamp(72px, 8vw, 96px) 0;
    background: var(--w-cool-99);
    /* 한국어 단어가 줄바꿈에서 중간에 끊기지 않도록 섹션 전체 상속 */
    word-break: keep-all;
    overflow-wrap: break-word;
  }
  .bc-connect-head {
    max-width: 760px;
    margin: 0 auto 30px;
    text-align: center;
  }
  .bc-connect-head h2 {
    margin-top: 16px;
    color: var(--fg-primary);
    font: 800 clamp(34px, 4.2vw, 52px)/1.12 var(--font-sans);
    letter-spacing: -.045em;
    text-wrap: balance;
  }
  .bc-connect-head .lead {
    max-width: 660px;
    margin: 16px auto 0;
    color: var(--fg-neutral-subtle);
    font: 500 16px/1.7 var(--font-sans);
    word-break: keep-all;
  }
  .bc-connect-shell {
    overflow: hidden;
    max-width: 1180px;
    margin: 0 auto;
    border: 1px solid var(--line-neutral-subtle);
    border-radius: 26px;
    background: white;
    box-shadow: 0 22px 60px rgba(24, 20, 54, .08);
  }
  .bc-connect-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 8px;
    border-bottom: 1px solid var(--line-neutral-subtle);
    background: var(--w-cool-98);
  }
  .bc-connect-tab {
    appearance: none;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 4px;
    min-height: 72px;
    padding: 12px 14px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--fg-neutral-subtle);
    cursor: pointer;
    text-align: center;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
  }
  /* 상황 라벨(가장 간단·미리듣기 필요·예약방송)이 주인공 — 크게 */
  .bc-connect-tab-label {
    display: flex;
    align-items: baseline;
    gap: 7px;
    color: inherit;
    font: 800 clamp(15px, 1.6vw, 17px)/1.25 var(--font-sans);
    letter-spacing: -.02em;
  }
  .bc-connect-tab-step {
    color: var(--fg-neutral-muted);
    font: 800 10px/1 var(--font-mono);
    letter-spacing: .1em;
  }
  .bc-connect-tab-sub {
    color: var(--fg-neutral-muted);
    font: 600 12px/1.35 var(--font-sans);
  }
  .bc-connect-tab:hover { color: var(--fg-primary); }
  .bc-connect-tab[aria-selected="true"] {
    background: white;
    color: var(--fg-primary);
    box-shadow: 0 5px 18px rgba(24, 20, 54, .09);
  }
  .bc-connect-tab[aria-selected="true"] .bc-connect-tab-step { color: var(--w-blue-50); }
  .bc-connect-tab[aria-selected="true"] .bc-connect-tab-sub { color: var(--fg-neutral-subtle); }
  .bc-connect-tab:focus-visible {
    outline: 3px solid rgba(79, 55, 255, .22);
    outline-offset: 2px;
  }
  .bc-connect-panel { padding: clamp(22px, 3vw, 34px); }
  .bc-connect-panel[hidden] { display: none; }
  .bc-connect-panel-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
    gap: clamp(28px, 4vw, 52px);
    align-items: center;
  }
  .bc-connect-media {
    overflow: hidden;
    border: 1px solid var(--line-neutral-subtle);
    border-radius: 19px;
    background: #f7f7fa;
  }
  .bc-connect-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }
  .bc-connect-copy {
    min-width: 0;
    padding: 4px 4px 4px 0;
  }
  .bc-connect-kicker {
    color: var(--w-blue-50);
    font: 800 12px/1.2 var(--font-sans);
    letter-spacing: .08em;
  }
  .bc-connect-copy h3,
  .bc-connect-ops-intro h3 {
    margin-top: 12px;
    color: var(--fg-primary);
    font: 800 clamp(26px, 3vw, 36px)/1.2 var(--font-sans);
    letter-spacing: -.035em;
    text-wrap: balance;
  }
  .bc-connect-copy > p,
  .bc-connect-ops-intro > p {
    margin-top: 14px;
    color: var(--fg-neutral-subtle);
    font: 500 14.5px/1.7 var(--font-sans);
    word-break: keep-all;
  }
  .bc-connect-path {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 22px;
  }
  .bc-connect-path div {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--line-neutral-subtle);
    border-radius: 12px;
    background: var(--w-cool-99);
  }
  .bc-connect-path span {
    display: block;
    margin-bottom: 6px;
    color: var(--w-blue-50);
    font: 800 9px/1 var(--font-mono);
    letter-spacing: .08em;
  }
  .bc-connect-path strong {
    color: var(--fg-primary);
    font: 700 12px/1.45 var(--font-sans);
  }
  .bc-connect-note {
    margin-top: 16px;
    padding: 13px 15px;
    border-radius: 12px;
    background: var(--bg-accent-subtle);
    color: var(--fg-neutral-subtle);
    font: 600 12.5px/1.55 var(--font-sans);
  }
  .bc-connect-note strong { color: var(--fg-primary); }
  .bc-connect-switch-map {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 20px;
  }
  .bc-connect-switch-map div {
    padding: 13px 14px;
    border-radius: 12px;
    background: var(--w-cool-99);
  }
  .bc-connect-switch-map span {
    display: block;
    color: var(--w-blue-50);
    font: 800 10px/1 var(--font-mono);
    letter-spacing: .08em;
  }
  .bc-connect-switch-map strong {
    display: block;
    margin-top: 7px;
    color: var(--fg-primary);
    font: 700 13px/1.4 var(--font-sans);
  }
  .bc-connect-kit-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 16px;
  }
  .bc-connect-kit-tags span {
    padding: 7px 10px;
    border: 1px solid var(--line-neutral-subtle);
    border-radius: 999px;
    color: var(--fg-neutral-subtle);
    background: white;
    font: 650 11.5px/1 var(--font-sans);
  }
  .bc-connect-kit-photo {
    margin-top: 13px;
    border: 1px solid var(--line-neutral-subtle);
    border-radius: 12px;
    background: var(--w-cool-99);
  }
  .bc-connect-kit-photo summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    color: var(--fg-neutral-subtle);
    cursor: pointer;
    list-style: none;
    font: 700 12px/1.4 var(--font-sans);
  }
  .bc-connect-kit-photo summary::-webkit-details-marker { display: none; }
  .bc-connect-kit-photo summary::after {
    content: "+";
    color: var(--w-blue-50);
    font: 700 18px/1 var(--font-sans);
    transition: transform .18s ease;
  }
  .bc-connect-kit-photo[open] summary::after { transform: rotate(45deg); }
  .bc-connect-kit-photo img {
    display: block;
    width: calc(100% - 20px);
    height: auto;
    margin: 0 10px 10px;
    border-radius: 9px;
  }
  .bc-connect-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 20px;
  }
  .bc-connect-actions .btn { min-height: 42px; }
  .bc-connect-ops {
    display: grid;
    grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
    gap: clamp(26px, 4vw, 50px);
    align-items: center;
    min-height: 360px;
    padding: clamp(12px, 2vw, 24px);
  }
  .bc-connect-ops-list {
    display: grid;
    gap: 10px;
  }
  .bc-connect-ops-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 16px;
    border: 1px solid var(--line-neutral-subtle);
    border-radius: 15px;
    background: var(--w-cool-99);
  }
  .bc-connect-ops-item > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: white;
    color: var(--w-blue-50);
    font: 800 11px/1 var(--font-mono);
    box-shadow: 0 5px 14px rgba(24, 20, 54, .06);
  }
  .bc-connect-ops-item strong {
    display: block;
    color: var(--fg-primary);
    font: 750 14px/1.4 var(--font-sans);
  }
  .bc-connect-ops-item p {
    margin-top: 4px;
    color: var(--fg-neutral-subtle);
    font: 500 12.5px/1.55 var(--font-sans);
  }
  /* 릴레이 자동화 순서 — bc-connect-path 스타일 재사용, 리스트 아래 여백만 조정 */
  .bc-connect-relay-flow { margin-top: 12px; }
  .bc-connect-ops-warning {
    margin-top: 12px;
    padding: 12px 14px;
    border-left: 3px solid var(--w-blue-50);
    border-radius: 0 10px 10px 0;
    background: var(--bg-accent-subtle);
    color: var(--fg-neutral-subtle);
    font: 600 11.5px/1.55 var(--font-sans);
  }
  /* 체험·부품 신청 CTA 밴드 — 탭 밖 공용 영역 */
  .bc-connect-cta {
    display: flex;
    align-items: center;
    gap: clamp(18px, 3vw, 34px);
    max-width: 1180px;
    margin: 18px auto 0;
    padding: clamp(20px, 2.6vw, 28px) clamp(20px, 3vw, 34px);
    border: 1px solid var(--line-neutral-subtle);
    border-radius: 20px;
    background: white;
    box-shadow: 0 14px 40px rgba(24, 20, 54, .06);
  }
  .bc-connect-cta-copy {
    flex: 1 1 auto;
    min-width: 0;
  }
  .bc-connect-cta-copy strong {
    display: block;
    color: var(--fg-primary);
    font: 800 clamp(18px, 2vw, 22px)/1.3 var(--font-sans);
    letter-spacing: -.02em;
  }
  .bc-connect-cta-copy p {
    margin-top: 8px;
    color: var(--fg-neutral-subtle);
    font: 500 13px/1.65 var(--font-sans);
  }
  .bc-connect-cta-kits {
    display: grid;
    flex: 0 0 auto;
    gap: 8px;
  }
  .bc-connect-cta-kit {
    display: grid;
    gap: 2px;
    min-width: 214px;
    padding: 10px 14px;
    border: 1px solid var(--line-neutral-subtle);
    border-radius: 12px;
    background: var(--w-cool-99);
  }
  .bc-connect-cta-kit span {
    color: var(--fg-neutral-muted);
    font: 700 10.5px/1.2 var(--font-sans);
    letter-spacing: .02em;
  }
  .bc-connect-cta-kit strong {
    color: var(--fg-primary);
    font: 800 15px/1.2 var(--font-sans);
  }
  .bc-connect-cta-kit small {
    color: var(--fg-neutral-muted);
    font: 500 10.5px/1.35 var(--font-sans);
  }
  .bc-connect-cta > .btn {
    flex: 0 0 auto;
    min-height: 48px;
  }
  @media (max-width: 920px) {
    .bc-connect-cta { flex-direction: column; align-items: stretch; }
    .bc-connect-cta-kits { grid-template-columns: 1fr 1fr; }
    .bc-connect-cta-kit { min-width: 0; }
    .bc-connect-cta > .btn { width: 100%; }
  }
  .bc-connect-footnote {
    max-width: 1180px;
    margin: 14px auto 0;
    color: var(--fg-neutral-muted);
    font: 500 12.5px/1.5 var(--font-sans);
    text-align: center;
  }
  @media (max-width: 920px) {
    .bc-connect-panel-inner { grid-template-columns: 1fr; }
    .bc-connect-media { max-width: 720px; margin: 0 auto; }
    .bc-connect-copy { padding: 0 4px 4px; }
  }
  @media (max-width: 700px) {
    .bc-connect-section { padding: 68px 0; }
    .bc-connect-head { margin-bottom: 24px; text-align: left; }
    .bc-connect-head .lead { margin-left: 0; }
    .bc-connect-shell { border-radius: 20px; }
    .bc-connect-tabs {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .bc-connect-tab {
      min-width: 0;
      min-height: 64px;
      padding: 9px 5px;
      gap: 3px;
    }
    .bc-connect-tab-label {
      gap: 4px;
      font-size: 13.5px;
    }
    .bc-connect-tab-step {
      font-size: 10px;
      letter-spacing: .04em;
    }
    .bc-connect-tab-sub { font-size: 12px; }
    .bc-connect-panel { padding: 18px; }
    .bc-connect-panel-inner { gap: 24px; }
    .bc-connect-path { grid-template-columns: 1fr; }
    .bc-connect-ops {
      grid-template-columns: 1fr;
      min-height: 0;
      padding: 4px;
    }
  }
  @media (max-width: 480px) {
    .bc-connect-head h2 { font-size: 35px; }
    .bc-connect-switch-map { grid-template-columns: 1fr; }
    .bc-connect-actions .btn { width: 100%; }
    .bc-connect-cta-kits { grid-template-columns: 1fr; }
    .bc-connect-ops-item { grid-template-columns: 36px minmax(0, 1fr); }
    .bc-connect-ops-item > span { width: 36px; height: 36px; border-radius: 10px; }
  }
  /* ==== 멀티 디바이스 (데스크톱 · 태블릿 · 휴대폰) ==== */
  .bc-apps-section {
    background: var(--w-cool-98);
    /* 한국어 단어가 줄바꿈에서 중간에 끊기지 않도록 섹션 전체 상속 */
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  /* --- 기기 쇼케이스 ----------------------------------------------------
     세 화면을 한꺼번에 늘어놓지 않고, 세그먼트 탭으로 한 번에 한 기기만
     크게 보여준다. 데스크톱은 사이트 공용 .browser 프레임을 그대로 사용. */
  .bc-apps-switch {
    display: flex;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 4px;
    gap: 4px;
    border: 1px solid var(--line-neutral-subtle);
    border-radius: 999px;
    background: white;
  }
  .bc-apps-switch [role="tab"] {
    height: 38px;
    padding: 0 22px;
    border-radius: 999px;
    color: var(--fg-neutral-muted);
    font: 600 14px/1 var(--font-sans);
    letter-spacing: -.01em;
    transition: color .15s ease, background .15s ease;
    white-space: nowrap;
  }
  .bc-apps-switch [role="tab"]:hover { color: var(--fg-neutral-subtle); }
  .bc-apps-switch [role="tab"][aria-selected="true"] {
    background: var(--w-cool-5);
    color: white;
  }
  .bc-apps-switch [role="tab"]:focus-visible {
    outline: 2px solid var(--w-blue-50);
    outline-offset: 2px;
  }

  /* 패널을 같은 그리드 셀에 겹쳐 두면 탭 전환 시 섹션 높이가 널뛰지 않는다 */
  .bc-apps-viewport {
    display: grid;
    max-width: 1020px;
    margin: clamp(30px, 4vw, 44px) auto 0;
  }
  .bc-apps-panel {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 0;
    min-width: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
  }
  .bc-apps-panel.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .3s ease, transform .3s ease;
  }
  @media (prefers-reduced-motion: reduce) {
    .bc-apps-panel,
    .bc-apps-panel.is-active { transform: none; transition: none; }
  }

  /* 데스크톱 — 맥북형 노트북 목업 (화면 + 알루미늄 하판) */
  .mb-laptop { width: min(100%, 1000px); }
  .mb-screen {
    width: 88%;
    margin: 0 auto;
    padding: 10px 10px 0;
    background: var(--w-cool-5);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 24px 56px rgba(24, 20, 54, .16);
  }
  .mb-screen .dev-screen {
    aspect-ratio: 1375 / 722;
    border-radius: 9px 9px 0 0;
  }
  .mb-base {
    position: relative;
    height: 16px;
    border-radius: 2px 2px 12px 12px;
    background: linear-gradient(180deg, #e9eaed 0%, #d3d5d9 74%, #b9bbc1 100%);
    box-shadow: 0 14px 30px rgba(24, 20, 54, .18);
  }
  .mb-notch {
    position: absolute;
    top: 0;
    left: 50%;
    width: 13%;
    height: 7px;
    transform: translateX(-50%);
    border-radius: 0 0 9px 9px;
    background: linear-gradient(180deg, #c6c8cd, #b3b5bb);
  }

  /* 태블릿·휴대폰 — 단색 베젤 목업 */
  .dev-frame {
    position: relative;
    background: var(--w-cool-5);
    box-shadow: 0 18px 44px rgba(24, 20, 54, .16);
  }
  .dev-screen {
    position: relative;
    overflow: hidden;
    background: var(--w-cool-97);
  }
  .dev-screen > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }
  /* 스크린샷 자리표시 — 위 __appShots에 경로를 넣으면 이 자리에 이미지가 들어간다 */
  .dev-ph {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 12px;
    color: var(--fg-neutral-muted);
    font: 500 12px/1.5 var(--font-sans);
    text-align: center;
  }

  /* 화면비는 실제 스크린샷 픽셀에 맞춘다 — object-fit이 한 픽셀도 자르지 않게 */
  .dev-frame-tablet {
    width: min(100%, 760px);
    padding: 11px;
    border-radius: 22px;
  }
  .dev-frame-tablet .dev-screen { aspect-ratio: 2944 / 1840; border-radius: 12px; }
  /* 가로 방향 상단 베젤의 전면 카메라 */
  .dev-frame-tablet::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 50%;
    width: 4px;
    height: 4px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
  }

  .dev-frame-phone {
    width: min(64vw, 252px);
    padding: 8px;
    border-radius: 30px;
  }
  .dev-frame-phone .dev-screen { aspect-ratio: 664 / 1440; border-radius: 23px; }
  /* 우측 전원 버튼 / 좌측 볼륨 버튼 */
  .dev-frame-phone::before,
  .dev-frame-phone::after {
    content: "";
    position: absolute;
    width: 3px;
    border-radius: 2px;
    background: var(--w-cool-15);
  }
  .dev-frame-phone::before { right: -3px; top: 25%; height: 52px; }
  .dev-frame-phone::after { left: -3px; top: 21%; height: 72px; }

  .dev-tag {
    margin: 0;
    color: var(--fg-neutral-muted);
    font: 500 13px/1.5 var(--font-sans);
    letter-spacing: -.005em;
    text-align: center;
  }

  /* --- 설치 안내 패널 --- */
  .bc-apps-panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    max-width: 1080px;
    margin: clamp(44px, 5vw, 64px) auto 0;
  }
  .app-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 32px;
    border: 1px solid var(--line-neutral-subtle);
    border-radius: 20px;
    background: white;
  }
  .app-panel h3 {
    color: var(--fg-primary);
    font: 700 20px/1.3 var(--font-sans);
    letter-spacing: -.018em;
  }
  .app-panel > p {
    color: var(--fg-neutral-subtle);
    font: 500 14.5px/1.65 var(--font-sans);
  }
  .app-panel ul {
    display: grid;
    gap: 8px;
    list-style: none;
    color: var(--fg-neutral-subtle);
    font: 500 13.5px/1.5 var(--font-sans);
  }
  .app-panel ul li::before {
    content: "✓";
    margin-right: 8px;
    color: var(--w-green-60);
    font-weight: 700;
  }
  .app-panel .btn {
    margin-top: auto;
    align-self: flex-start;
  }
  .app-panel .gp-store-btn {
    margin-top: auto;
    align-self: flex-start;
  }
  /* 데스크톱 패널 — 설치 버튼이 주 행동, 웹 바로 시작은 그 아래 보조 링크 */
  .app-panel-cta {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .app-panel-cta .gp-store-btn { margin-top: 0; }
  .app-panel-link {
    color: var(--fg-neutral-muted);
    font: 600 13px/1.5 var(--font-sans);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .app-panel-link:hover { color: var(--fg-primary); }
  .app-panel-meta {
    color: var(--fg-neutral-muted);
    font: 500 12.5px/1.5 var(--font-sans);
  }
  .app-qr {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--line-neutral-subtle);
    border-radius: 14px;
    background: var(--w-cool-99);
  }
  .app-qr img {
    flex: 0 0 auto;
    width: 92px;
    height: 92px;
  }
  .app-qr-copy { min-width: 0; }
  .app-qr-copy strong {
    display: block;
    color: var(--fg-primary);
    font: 600 13.5px/1.5 var(--font-sans);
    letter-spacing: -.008em;
  }
  .app-qr-copy span {
    display: block;
    margin-top: 5px;
    color: var(--fg-neutral-muted);
    font: 500 12.5px/1.55 var(--font-sans);
  }

  @media (max-width: 720px) {
    .bc-apps-panels { grid-template-columns: 1fr; }
    .app-panel { padding: 26px; }
    .bc-apps-switch [role="tab"] { height: 36px; padding: 0 16px; font-size: 13.5px; }
  }
  @media (max-width: 480px) {
    .app-qr { gap: 14px; padding: 14px; }
    .app-qr img { width: 80px; height: 80px; }
    .app-panel .btn { align-self: stretch; }
    .app-panel .gp-store-btn { align-self: stretch; }
    .app-panel-cta { align-self: stretch; }
    .app-panel-cta .gp-store-btn { width: 100%; }
  }
  /* ==== 데스크톱 앱 설치 안내 모달 ==== */
  /* 브라우저 설치창을 못 여는 환경(사파리·파이어폭스·휴대폰·이미 설치됨)의 대체 안내.
     열림/닫힘 시 body.trial-modal-open 을 체험 모달과 공유한다(스크롤 잠금). */
  .pcapp-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);
  }
  .pcapp-modal-backdrop.is-open { display: flex; }
  .pcapp-modal {
    position: relative;
    width: min(460px, 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);
  }
  .pcapp-title {
    margin: 0 32px 10px 0;
    color: var(--fg-primary);
    font: 700 19px/1.35 var(--font-sans);
    letter-spacing: -.018em;
  }
  .pcapp-desc {
    margin: 0;
    color: var(--fg-neutral-subtle);
    font: 500 14.5px/1.65 var(--font-sans);
  }
  .pcapp-note {
    margin: 14px 0 0;
    padding: 14px 16px;
    border: 1px solid var(--line-neutral-subtle);
    border-radius: 14px;
    background: var(--w-cool-99);
    color: var(--fg-neutral-muted);
    font: 500 13px/1.65 var(--font-sans);
  }
  .pcapp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
  }
  @media (max-width: 480px) {
    .pcapp-modal { padding: 24px 20px; }
    .pcapp-actions .btn { flex: 1 1 auto; }
  }

  /* ==== Pricing simple ==== */
  .price-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  }
  @media (max-width: 860px) { .price-grid { grid-template-columns: 1fr; } }
  .price-card {
    background: white; border: 1px solid var(--line-neutral-subtle);
    border-radius: 18px; padding: 28px;
    display: flex; flex-direction: column; gap: 16px;
    position: relative;
  }
  .price-card.featured { border-color: var(--w-blue-50); box-shadow: 0 0 0 4px var(--bg-accent-subtle); }
  .price-card .name { font: 700 17px/1 var(--font-sans); letter-spacing:-0.012em; color: var(--fg-primary); }
  .price-card .pop {
    position: absolute; top: -12px; left: 24px;
    background: var(--w-blue-50); color: white;
    padding: 4px 10px; border-radius: 999px;
    font: 700 10.5px/1 var(--font-sans); letter-spacing: 0.05em; text-transform: uppercase;
  }
  .price-card .amt { font: 800 32px/1 var(--font-sans); letter-spacing:-0.028em; color: var(--fg-primary); }
  .price-card .amt .unit { font: 600 13px/1 var(--font-sans); color: var(--fg-neutral-muted); margin-left: 4px; }
  /* 정가(할인 전) — 연결제 할인가 위에 취소선으로 표시 (priceAnnounce와 동일 표현) */
  .price-card .amt .was {
    display: block;
    margin-bottom: 6px;
    font: 600 13px/1 var(--font-sans);
    color: var(--fg-neutral-muted);
    text-decoration: line-through;
    letter-spacing: -0.01em;
  }
  /* 1개월 무료 체험 — 플랜 그리드 위 슬림 배너 */
  .price-trial-banner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 18px 24px;
    border: 1px dashed var(--w-blue-50);
    border-radius: 14px;
    background: var(--bg-accent-subtle);
  }
  .price-trial-banner strong { font: 700 15px/1.4 var(--font-sans); color: var(--fg-primary); }
  .price-trial-banner .trial-note { font: 500 13px/1.5 var(--font-sans); color: var(--fg-neutral-subtle); }
  .price-card .desc { font: 500 13px/1.5 var(--font-sans); color: var(--fg-neutral-muted); }
  .price-card ul { list-style:none; display: flex; flex-direction: column; gap: 8px; font: 500 13.5px/1.5 var(--font-sans); color: var(--fg-neutral-subtle); }
  .price-card ul li::before { content: "✓"; color: var(--w-green-60); margin-right: 8px; font-weight:700; }
  .price-card .cta { margin-top: auto; }

  /* enterprise band */
  .ent-band {
    background: linear-gradient(135deg, var(--w-cool-5), #1d1f2c);
    color: white; border-radius: 24px;
    padding: 48px;
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center;
  }
  @media (max-width: 860px) { .ent-band { grid-template-columns: 1fr; padding: 32px; } }
  .ent-band h3 { font: 800 30px/1.2 var(--font-sans); letter-spacing:-0.028em; text-wrap: balance; margin-bottom: 12px; color: white; }
  .ent-band p { color: rgba(255,255,255,0.72); font: 500 15px/1.7 var(--font-sans); margin-bottom: 24px; }
  .ent-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  @media (max-width: 540px) { .ent-list { grid-template-columns: 1fr; } }
  .ent-list .item {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px; padding: 14px 16px;
    font: 500 13px/1.5 var(--font-sans); color: rgba(255,255,255,0.85);
  }
  .ent-list .item b { color: white; font-weight: 700; display: block; margin-bottom: 4px; font-size: 14px; }

  /* faq */
  .faq { border-top: 1px solid var(--line-neutral); }
  .faq details { border-bottom: 1px solid var(--line-neutral); padding: 22px 8px; }
  .faq summary { cursor: pointer; list-style: none; font: 700 17px/1.4 var(--font-sans); letter-spacing:-0.014em; color: var(--fg-primary); display: flex; align-items: center; justify-content: space-between; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; font: 400 24px/1 var(--font-sans); color: var(--fg-neutral-muted); transition: transform .2s; }
  .faq details[open] summary::after { transform: rotate(45deg); }
  .faq details > p { margin-top: 10px; font: 500 14.5px/1.7 var(--font-sans); color: var(--fg-neutral-subtle); letter-spacing:-0.005em; max-width: 720px; }
  .faq details > a { display: inline-block; margin-top: 10px; font: 700 14px/1.4 var(--font-sans); color: var(--w-blue-50); }

  /* ==== Trial closer ==== */
  .bc-trial-section {
    padding: 96px 0;
    overflow: hidden;
    background: var(--w-cool-5);
  }
  .bc-trial-closer {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
    gap: 72px;
    align-items: center;
    overflow: hidden;
    padding: 72px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 32px;
    background:
      radial-gradient(circle at 12% 8%, rgba(79,55,255,.46), transparent 34%),
      radial-gradient(circle at 92% 100%, rgba(55,225,141,.15), transparent 34%),
      linear-gradient(135deg, #171823 0%, #0d0e12 62%);
    box-shadow: 0 32px 80px rgba(0,0,0,.28);
    color: white;
  }
  .bc-trial-closer::before {
    content: "";
    position: absolute;
    top: -140px;
    right: 23%;
    width: 360px;
    height: 360px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
    box-shadow:
      0 0 0 54px rgba(255,255,255,.025),
      0 0 0 108px rgba(255,255,255,.018);
  }
  .bc-trial-copy,
  .bc-trial-offer {
    position: relative;
    z-index: 1;
  }
  .bc-trial-title {
    margin-top: 22px;
    font: 800 clamp(42px, 5vw, 68px)/1.04 var(--font-sans);
    letter-spacing: -.042em;
    color: white;
    text-wrap: balance;
  }
  .bc-trial-title span { color: #8f7fff; }
  .bc-trial-desc {
    max-width: 660px;
    margin-top: 22px;
    color: rgba(255,255,255,.72);
    font: 500 18px/1.7 var(--font-sans);
    letter-spacing: -.01em;
    text-wrap: pretty;
  }
  .bc-trial-points {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 28px;
  }
  .bc-trial-points span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 13px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.86);
    font: 650 13px/1 var(--font-sans);
  }
  .bc-trial-points span::before {
    content: "✓";
    margin-right: 7px;
    color: #74f5ae;
    font-weight: 800;
  }
  .bc-trial-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 38px;
  }
  .bc-trial-cta .btn-primary {
    background: var(--w-blue-50);
    color: white;
    box-shadow: 0 14px 30px rgba(79,55,255,.34);
  }
  .bc-trial-cta .btn-outline {
    border-color: rgba(255,255,255,.28);
    color: white;
  }
  .bc-trial-cta .btn-outline:hover {
    border-color: rgba(255,255,255,.62);
    background: rgba(255,255,255,.08);
  }
  .bc-trial-offer {
    padding: 30px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 24px;
    background: rgba(255,255,255,.09);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
    backdrop-filter: blur(16px);
  }
  .bc-trial-offer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: rgba(255,255,255,.58);
    font: 700 11px/1 var(--font-sans);
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .bc-trial-offer-icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: rgba(143,127,255,.2);
    color: #b8adff;
    display: grid;
    place-items: center;
  }
  .bc-trial-offer strong {
    display: block;
    margin-top: 24px;
    font: 800 52px/1 var(--font-sans);
    letter-spacing: -.04em;
    color: white;
  }
  .bc-trial-offer > p {
    margin-top: 10px;
    color: rgba(255,255,255,.65);
    font: 500 14px/1.6 var(--font-sans);
  }
  .bc-trial-offer-list {
    display: grid;
    gap: 0;
    margin-top: 26px;
    border-top: 1px solid rgba(255,255,255,.11);
  }
  .bc-trial-offer-list div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,.11);
    color: rgba(255,255,255,.58);
    font: 600 13px/1.3 var(--font-sans);
  }
  .bc-trial-offer-list b {
    color: white;
    font-weight: 750;
  }
  @media (max-width: 900px) {
    .bc-trial-section { padding: 72px 0; }
    .bc-trial-closer {
      grid-template-columns: 1fr;
      gap: 44px;
      padding: 56px 44px;
    }
    .bc-trial-offer { max-width: 560px; }
  }
  @media (max-width: 560px) {
    .bc-trial-section { padding: 56px 0; }
    .bc-trial-closer {
      gap: 36px;
      padding: 40px 24px;
      border-radius: 24px;
    }
    .bc-trial-title { font-size: 42px; }
    .bc-trial-desc { font-size: 16px; }
    .bc-trial-cta .btn { width: 100%; }
    .bc-trial-offer { padding: 24px; }
  }

  /* ==== 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; }
  }

  /* ---- 안내방송 고객사 로고 띠 (홈 화면 2행 마퀴 재사용) ---- */
  .bc-trust-band {
    background: var(--w-cool-98);
    padding: 48px 0;
    border-top: 1px solid var(--line-neutral-subtle);
    border-bottom: 1px solid var(--line-neutral-subtle);
  }
  .bc-trust-head { text-align: center; margin-bottom: 30px; }
  .bc-trust-head .lead {
    font: 600 15px/1.5 var(--font-sans); color: var(--fg-neutral-subtle); letter-spacing: -0.005em;
  }
  /* .marquee / .marquee-track / @keyframes marquee 는 site.css 공용 정의 사용 */
  .bc-trust-band .logo-row { gap: 172px; align-items: center; animation-duration: 150s; }
  .bc-trust-band .logo-chip { flex: 0 0 auto; display: grid; place-items: center; }
  .bc-trust-band .logo-chip img {
    height: 38px; width: auto; max-width: none; object-fit: contain;
    filter: grayscale(1); opacity: 0.55;
    transition: filter .25s ease, opacity .25s ease;
  }
  .bc-trust-band .logo-chip:hover img { filter: grayscale(0); opacity: 1; }
  /* 모바일: 로고 간격을 좁혀 띠를 조밀하게(데스크톱 172px은 모바일에서 너무 벌어짐) */
  @media (max-width: 720px) {
    .bc-trust-band { padding: 36px 0; }
    .bc-trust-band .logo-row { gap: 64px; animation-duration: 90s; }
    .bc-trust-band .logo-chip img { height: 30px; }
  }
  @media (max-width: 480px) {
    .bc-trust-band .logo-row { gap: 48px; animation-duration: 72s; }
    .bc-trust-band .logo-chip img { height: 27px; }
  }

  /* ---- 기상청 체감온도 기반 건설 현장 자동방송 ---- */
  .weather-auto-section {
    position: relative;
    overflow: hidden;
    padding: 88px 0;
    border-top: 1px solid var(--line-neutral-subtle);
    border-bottom: 1px solid var(--line-neutral-subtle);
    background: var(--w-cool-98);
    word-break: keep-all;
  }
  .weather-auto-section::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(circle at 86% 22%, rgba(79, 55, 255, 0.07), transparent 28%),
      radial-gradient(circle at 10% 86%, rgba(0, 184, 235, 0.06), transparent 24%);
  }
  .weather-auto-inner { position: relative; z-index: 1; }
  .weather-auto-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(480px, 1.08fr);
    gap: clamp(40px, 5vw, 64px);
    align-items: center;
  }
  .weather-auto-copy h2 {
    max-width: 530px;
    margin-top: 16px;
    color: var(--fg-primary);
    font: 750 clamp(30px, 3.2vw, 44px)/1.16 var(--font-sans);
    letter-spacing: -0.032em;
    text-wrap: balance;
  }
  .weather-auto-copy .lead {
    max-width: 540px;
    margin-top: 18px;
    color: var(--fg-neutral-subtle);
    font: 500 16px/1.7 var(--font-sans);
  }
  .weather-auto-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--bg-accent-subtle);
    color: var(--w-blue-45);
    font: 650 12px/1 var(--font-sans);
    letter-spacing: 0.02em;
  }
  .weather-auto-eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
  }
  .weather-auto-points {
    display: grid;
    gap: 12px;
    margin-top: 24px;
    padding: 0;
    list-style: none;
  }
  .weather-auto-points li {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    color: var(--fg-neutral-subtle);
    font: 550 14px/1.5 var(--font-sans);
  }
  .weather-auto-points .check {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(79, 55, 255, 0.2);
    border-radius: 50%;
    background: var(--bg-accent-subtle);
    color: var(--w-blue-45);
    font: 800 12px/1 var(--font-sans);
  }
  .weather-auto-visual {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line-neutral-subtle);
    border-radius: 24px;
    background: white;
    box-shadow: var(--shadow-emphasize);
  }
  .weather-auto-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(6, 18, 31, 0.02) 38%, rgba(6, 18, 31, 0.82) 100%);
  }
  .weather-auto-visual > img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    display: block;
    object-fit: cover;
  }
  .weather-auto-live {
    position: absolute;
    z-index: 2;
    top: 18px;
    left: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    background: rgba(7, 20, 33, 0.74);
    color: white;
    font: 750 11px/1 var(--font-sans);
    backdrop-filter: blur(12px);
  }
  .weather-auto-live::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #31d6a2;
    box-shadow: 0 0 10px #31d6a2;
  }
  .weather-auto-dashboard {
    position: absolute;
    z-index: 2;
    right: 72px;
    bottom: 14px;
    left: 18px;
    display: grid;
    grid-template-columns: 1.15fr 0.8fr 0.8fr;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 18px;
    background: rgba(7, 20, 33, 0.82);
    color: white;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(14px);
  }
  .weather-auto-stat {
    min-width: 0;
    padding: 17px 18px;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
  }
  .weather-auto-stat:first-child { border-left: 0; }
  .weather-auto-stat span {
    display: block;
    margin-bottom: 7px;
    color: rgba(255, 255, 255, 0.56);
    font: 650 10px/1.2 var(--font-sans);
    letter-spacing: 0.04em;
  }
  .weather-auto-stat strong {
    display: block;
    overflow: hidden;
    color: white;
    font: 800 19px/1.15 var(--font-sans);
    letter-spacing: -0.025em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .weather-auto-stat:first-child strong { color: #ffd25f; font-size: 26px; }
  .weather-auto-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr);
    gap: 0;
    margin-top: 28px;
  }
  .weather-auto-flow-item {
    min-width: 0;
    padding: 18px 20px;
    border: 1px solid var(--line-neutral-subtle);
    border-radius: 16px;
    background: white;
    box-shadow: var(--shadow-normal);
  }
  .weather-auto-flow-arrow {
    display: grid;
    place-items: center;
    color: var(--fg-neutral-muted);
    font: 700 17px/1 var(--font-sans);
  }
  .weather-auto-flow-item .num {
    color: var(--w-blue-50);
    font: 800 11px/1 var(--font-mono);
    letter-spacing: 0.08em;
  }
  .weather-auto-flow-item strong {
    display: block;
    margin-top: 8px;
    color: var(--fg-primary);
    font: 750 16px/1.35 var(--font-sans);
  }
  .weather-auto-flow-item p {
    margin-top: 5px;
    color: var(--fg-neutral-subtle);
    font: 500 12.5px/1.55 var(--font-sans);
  }
  @media (max-width: 960px) {
    .weather-auto-grid { grid-template-columns: 1fr; gap: 32px; }
    .weather-auto-copy { max-width: 720px; }
  }
  @media (max-width: 660px) {
    .weather-auto-section { padding: 64px 0; }
    .weather-auto-visual { border-radius: 20px; }
    .weather-auto-visual > img { aspect-ratio: 4 / 3; }
    .weather-auto-dashboard {
      grid-template-columns: 1fr 1fr;
      right: 70px;
      bottom: 10px;
      left: 10px;
    }
    .weather-auto-stat { padding: 13px 12px; }
    .weather-auto-stat:nth-child(3) {
      grid-column: 1 / -1;
      border-top: 1px solid rgba(255, 255, 255, 0.12);
      border-left: 0;
    }
    .weather-auto-stat strong { font-size: 16px; }
    .weather-auto-stat:first-child strong { font-size: 22px; }
    .weather-auto-flow { grid-template-columns: 1fr; gap: 10px; margin-top: 22px; }
    .weather-auto-flow-arrow { display: none; }
    .weather-auto-live { top: 10px; left: 10px; }
  }

/* ==== 요금 요약 스트립 — 실제 운영 사례 직후, 요금 페이지까지 스크롤하지 않아도 가격·체험을 바로 보게 함 ==== */
.bc-price-peek { padding: 0 0 56px; }
.bc-price-peek-card {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 28px 32px; border-radius: 20px;
  background: white; border: 1px solid var(--line-neutral-subtle);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}
.bc-price-peek-main { flex: 1 1 420px; }
.bc-price-peek-main h3 { margin: 12px 0 8px; font: 800 clamp(20px, 2.4vw, 26px)/1.3 var(--font-sans); letter-spacing: -0.024em; color: var(--fg-primary); text-wrap: balance; }
.bc-price-peek-main p { margin: 0; font: 500 14px/1.6 var(--font-sans); color: var(--fg-neutral-muted); word-break: keep-all; }
.bc-price-peek-actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .bc-price-peek-card { padding: 22px 20px; }
  .bc-price-peek-actions { width: 100%; }
  .bc-price-peek-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ==== Apps 섹션 하단 — 오프라인 에디션 진입 콜아웃 ==== */
.bc-offline-callout {
  margin-top: 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 20px 24px;
  border: 1px solid var(--line-neutral-subtle); border-radius: 18px; background: white;
}
.bc-offline-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bc-offline-copy strong { font: 700 16px/1.35 var(--font-sans); letter-spacing: -0.014em; color: var(--fg-primary); }
.bc-offline-copy span { font: 500 14px/1.55 var(--font-sans); color: var(--fg-neutral-subtle); word-break: keep-all; }
@media (max-width: 560px) { .bc-offline-callout .btn { width: 100%; } }