/* ===== クロスタ — 共通コンポーネントCSS ===== */

/* LINE CTA Box */
.x-cta-box{
  background:linear-gradient(135deg, var(--bg-blue), #E0ECFF);
  border:2px solid var(--blue-light);
  border-radius:18px;
  padding:2rem;
  text-align:center;
  margin:2rem 0;
}
.x-cta-lead{
  font-size:1.05rem;font-weight:900;
  color:var(--blue-deep);
  margin-bottom:0.3rem;
}
.x-cta-desc{
  font-size:0.85rem;
  color:var(--text-sub);
  margin-bottom:1.2rem;
  line-height:1.7;
}
.x-cta-btn{
  display:inline-flex;align-items:center;gap:0.4rem;
  background:var(--line-green);
  color:#fff;
  font-family:var(--font-body);
  font-size:0.95rem;font-weight:700;
  padding:0.8rem 2rem;
  border-radius:12px;
  text-decoration:none;
  transition:all 0.25s;
  box-shadow:0 4px 16px rgba(6,199,85,0.25);
}
.x-cta-btn:hover{
  background:var(--line-green-hover);
  transform:translateY(-1px);
}
.x-cta-note{
  font-size:0.72rem;
  color:var(--text-light);
  margin-top:0.8rem;
}

/* Audio Button */
.x-audio-btn{
  display:inline-flex;align-items:center;gap:0.5rem;
  background:var(--blue);
  color:#fff;
  font-family:var(--font-body);
  font-size:0.95rem;font-weight:700;
  padding:0.8rem 1.8rem;
  border-radius:12px;
  border:none;cursor:pointer;
  transition:all 0.25s;
  box-shadow:0 4px 16px rgba(74,127,229,0.25);
}
.x-audio-btn:hover{
  background:var(--blue-deep);
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(74,127,229,0.35);
}
.x-audio-btn.is-playing{
  background:var(--blue-deep);
  animation:x-pulse 1.5s infinite;
}
.x-audio-btn--small{
  font-size:0.78rem;
  padding:0.5rem 1.2rem;
}
.x-audio-icon{font-size:0.85rem}
.x-audio-stop{
  background:none;
  border:1px solid var(--card-border);
  color:var(--text-light);
  font-family:var(--font-body);
  font-size:0.8rem;font-weight:700;
  padding:0.6rem 1.2rem;
  border-radius:10px;
  cursor:pointer;
  transition:all 0.2s;
}
.x-audio-stop:hover{border-color:var(--red-soft);color:var(--red-soft)}

@keyframes x-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(74,127,229,0.3)}
  50%{box-shadow:0 0 0 6px rgba(74,127,229,0)}
}

/* Audio Section */
.x-audio-section{margin:2rem 0}
.x-audio-card{
  display:flex;align-items:center;gap:1.5rem;
  background:linear-gradient(135deg, var(--bg-blue), #E0ECFF);
  border:2px solid var(--blue-light);
  border-radius:20px;
  padding:2rem;
}
.x-audio-card-icon{
  flex-shrink:0;width:64px;height:64px;
  background:var(--white);border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.8rem;
  box-shadow:0 2px 8px rgba(74,127,229,0.12);
}
.x-audio-card-title{
  font-size:1.1rem;font-weight:700;
  margin-bottom:0.4rem;
}
.x-audio-card-title strong{color:var(--blue)}
.x-audio-card-desc{
  font-size:0.82rem;color:var(--text-sub);
  margin-bottom:1.2rem;line-height:1.7;
}
.x-audio-controls{display:flex;align-items:center;gap:0.8rem}
@media(max-width:560px){
  .x-audio-card{flex-direction:column;text-align:center}
  .x-audio-controls{justify-content:center}
}

/* In-app browser modal（唯一の定義） */
#inapp-modal{
  position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  padding:1.5rem;
}
.inapp-modal-bg{
  position:absolute;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,0.5);
}
.inapp-modal-box{
  position:relative;z-index:1;
  background:var(--white);border-radius:20px;
  padding:2.5rem 2rem;max-width:360px;width:100%;
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,0.2);
}
.inapp-modal-icon{font-size:2.5rem;margin-bottom:1rem}
.inapp-modal-box h3{font-size:1.1rem;font-weight:900;line-height:1.6;margin-bottom:0.8rem;color:var(--text)}
.inapp-modal-box > p{font-size:0.85rem;color:var(--text-sub);line-height:1.7;margin-bottom:1.2rem}
.inapp-modal-btn{
  display:block;width:100%;background:var(--blue);color:#fff;
  font-family:var(--font-body);font-size:1rem;font-weight:700;
  padding:0.9rem;border:none;border-radius:12px;cursor:pointer;
  box-shadow:0 4px 16px rgba(74,127,229,0.25);
  transition:background 0.2s;
}
.inapp-modal-btn:hover{background:var(--blue-deep)}
.inapp-modal-manual{margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid var(--card-border)}
.inapp-modal-manual p{font-size:0.78rem;color:var(--text-light);line-height:1.7;margin-bottom:0.3rem}
.inapp-modal-manual strong{color:var(--text-sub)}
.inapp-modal-close{
  background:none;border:none;color:var(--text-light);
  font-family:var(--font-body);font-size:0.8rem;
  margin-top:1rem;cursor:pointer;padding:0.4rem;
}
.inapp-modal-close:hover{color:var(--text)}