/* ── 텍스트 버튼: 공통 베이스 ── */
.bx-prose a.button_click{
  display:inline-block;
  padding:.9em 1.8em;
  border:0;
  border-bottom:0 !important;
  border-radius:14px;
  font:800 1.1em/1.2 inherit;
  text-decoration:none !important;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  position:relative;
  overflow:hidden;
  color:#fff;
  letter-spacing:-.015em;
  vertical-align:middle;
  box-shadow:0 8px 20px rgba(0,0,0,.16);
  transition:
    transform .12s ease,
    box-shadow .2s ease,
    background .2s ease,
    color .2s ease,
    border-color .2s ease,
    filter .2s ease;
}

.bx-prose a.button_click:hover{
  transform:translateY(-2px);
  text-decoration:none !important;
}

.bx-prose a.button_click:active{
  transform:translateY(0);
  box-shadow:0 4px 10px rgba(0,0,0,.18);
}

/* 공통 광택 */
.bx-prose a.button_click::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.22),
    rgba(255,255,255,0) 48%
  );
  pointer-events:none;
}

/* type1 · 파랑 기본 CTA */
.bx-prose a.button_click.button_type1{
  --b:#2563eb;
  background:linear-gradient(180deg, #3b82f6, #1d4ed8);
  color:#fff;
  box-shadow:
    0 9px 22px rgba(37,99,235,.38),
    0 3px 0 #1e40af;
}

.bx-prose a.button_click.button_type1:hover{
  background:linear-gradient(180deg, #60a5fa, #1d4ed8);
  box-shadow:
    0 14px 30px rgba(37,99,235,.48),
    0 3px 0 #1e3a8a;
}

/* type2 · 보라 그라데이션 */
.bx-prose a.button_click.button_type2{
  --b:#7c3aed;
  background:linear-gradient(135deg, #8b5cf6, #7c3aed, #5b21b6);
  color:#fff;
  box-shadow:
    0 9px 24px rgba(124,58,237,.42),
    inset 0 0 0 1px rgba(255,255,255,.2);
}

.bx-prose a.button_click.button_type2:hover{
  filter:brightness(1.08);
  box-shadow:
    0 15px 32px rgba(124,58,237,.54),
    inset 0 0 0 1px rgba(255,255,255,.26);
}

/* type3 · 초록 실속 버튼 */
.bx-prose a.button_click.button_type3{
  --b:#16a34a;
  background:linear-gradient(180deg, #22c55e, #15803d);
  color:#fff;
  box-shadow:
    0 9px 22px rgba(22,163,74,.38),
    0 3px 0 #166534;
}

.bx-prose a.button_click.button_type3:hover{
  background:linear-gradient(180deg, #4ade80, #15803d);
  box-shadow:
    0 14px 30px rgba(22,163,74,.48),
    0 3px 0 #14532d;
}

/* type4 · 주황 알약 버튼 */
.bx-prose a.button_click.button_type4{
  --b:#f97316;
  background:linear-gradient(180deg, #fb923c, #ea580c);
  color:#fff;
  border-radius:999px;
  box-shadow:
    0 9px 22px rgba(249,115,22,.4),
    inset 0 0 0 1px rgba(255,255,255,.24);
}

.bx-prose a.button_click.button_type4:hover{
  background:linear-gradient(180deg, #fdba74, #ea580c);
  box-shadow:
    0 15px 32px rgba(249,115,22,.52),
    inset 0 0 0 1px rgba(255,255,255,.3);
}

/* type5 · 핑크 네온 */
.bx-prose a.button_click.button_type5{
  --b:#db2777;
  background:
    radial-gradient(circle at 30% 0%, rgba(244,114,182,.7), transparent 42%),
    linear-gradient(180deg, #be185d, #831843);
  color:#fff;
  border-radius:15px;
  box-shadow:
    0 0 0 1px rgba(244,114,182,.65),
    0 0 22px rgba(219,39,119,.5),
    0 9px 24px rgba(131,24,67,.38);
}

.bx-prose a.button_click.button_type5:hover{
  box-shadow:
    0 0 0 1px #f472b6,
    0 0 34px rgba(219,39,119,.72),
    0 15px 32px rgba(131,24,67,.48);
}

/* type6 · 다크 잉크 버튼 */
.bx-prose a.button_click.button_type6{
  --b:#111827;
  background:linear-gradient(180deg, #374151, #030712);
  color:#fff;
  box-shadow:
    0 9px 22px rgba(0,0,0,.32),
    inset 0 0 0 1px rgba(255,255,255,.1);
}

.bx-prose a.button_click.button_type6:hover{
  background:linear-gradient(180deg, #1f2937, #000);
  box-shadow:
    0 15px 32px rgba(0,0,0,.42),
    inset 0 0 0 1px rgba(255,255,255,.16);
}

/* type7 · 빨강 3D 푸시 */
.bx-prose a.button_click.button_type7{
  --b:#ef4444;
  background:linear-gradient(180deg, #f87171, #dc2626);
  color:#fff;
  border-radius:15px;
  box-shadow:
    0 6px 0 #991b1b,
    0 13px 24px rgba(239,68,68,.36);
}

.bx-prose a.button_click.button_type7:hover{
  filter:brightness(1.05);
  box-shadow:
    0 6px 0 #7f1d1d,
    0 17px 30px rgba(239,68,68,.46);
}

.bx-prose a.button_click.button_type7:active{
  transform:translateY(5px);
  box-shadow:
    0 1px 0 #7f1d1d,
    0 6px 14px rgba(239,68,68,.32);
}

/* type8 · 민트 글로시 버튼 */
.bx-prose a.button_click.button_type8{
  --b:#0891b2;
  background:linear-gradient(180deg, #22d3ee, #0891b2);
  color:#fff;
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(6px);
  box-shadow:
    0 9px 24px rgba(8,145,178,.4),
    inset 0 0 0 1px rgba(255,255,255,.22);
}

.bx-prose a.button_click.button_type8:hover{
  background:linear-gradient(180deg, #67e8f9, #0e7490);
  box-shadow:
    0 15px 32px rgba(8,145,178,.52),
    inset 0 0 0 1px rgba(255,255,255,.3);
}

/* type9 · 남색 화살표 버튼 */
.bx-prose a.button_click.button_type9{
  --b:#1e3a8a;
  background:linear-gradient(180deg, #2563eb, #1e3a8a);
  color:#fff;
  border-radius:999px;
  padding:.9em 1.75em;
  box-shadow:
    0 9px 22px rgba(30,58,138,.42),
    inset 0 0 0 1px rgba(255,255,255,.18);
}

.bx-prose a.button_click.button_type9::after{
  content:" →";
  display:inline-block;
  transition:transform .15s ease;
}

.bx-prose a.button_click.button_type9:hover{
  transform:translateY(-2px);
  background:linear-gradient(180deg, #3b82f6, #172554);
  box-shadow:
    0 15px 32px rgba(30,58,138,.54),
    inset 0 0 0 1px rgba(255,255,255,.24);
}

.bx-prose a.button_click.button_type9:hover::after{
  transform:translateX(.3em);
}

/* type10 · 시머 무지개 CTA */
.bx-prose a.button_click.button_type10{
  --b:#9333ea;
  color:#fff;
  border-radius:15px;
  background:linear-gradient(
    90deg,
    #2563eb,
    #7c3aed,
    #db2777,
    #f97316,
    #16a34a,
    #2563eb
  );
  background-size:300% 100%;
  animation:bxShimmer 3s linear infinite;
  box-shadow:
    0 9px 24px rgba(147,51,234,.42),
    inset 0 0 0 1px rgba(255,255,255,.22);
}

.bx-prose a.button_click.button_type10:hover{
  animation-duration:1.15s;
  box-shadow:
    0 16px 34px rgba(147,51,234,.56),
    inset 0 0 0 1px rgba(255,255,255,.3);
}

@keyframes bxShimmer{
  to{
    background-position:300% 0;
  }
}

/* 키보드 접근성 */
.bx-prose a.button_click:focus-visible{
  outline:3px solid rgba(59,130,246,.35);
  outline-offset:3px;
}

/* 모바일에서 너무 작아 보이지 않게 */
@media (max-width:640px){
  .bx-prose a.button_click{
    font-size:1.05em;
    padding:.88em 1.55em;
  }
}

/* 모션 줄이기 설정 대응 */
@media (prefers-reduced-motion: reduce){
  .bx-prose a.button_click{
    transition:none;
  }

  .bx-prose a.button_click.button_type10{
    animation:none;
  }
}

/* 죽은 링크 */
.bx-prose .no_link_url.internal{
  color:#b0b0b0;
  text-decoration:line-through;
}

.bx-prose .no_link_url.external{
  color:#b0b0b0;
}

/* ──────────────────────────────────────────────────────────────
   관련 글 버튼 — 공통 + CTA(빨간 큰 버튼) 스타일
   테마 css/style.css 끝에 붙여넣기.
   기본(.pl-relbtns)은 차분한 박스, .pl-relbtns--cta 면 이미지처럼 빨간 풀폭 버튼.
   옵션 related_buttons_style='cta' 일 때 --cta 클래스가 붙습니다.
   ────────────────────────────────────────────────────────────── */

/* 공통 */
.pl-relbtns { margin: 1.6rem 0; }
.pl-relbtns-head {
  font-size: .95rem; font-weight: 700; color: #333; margin-bottom: .7rem;
}
.pl-relbtns-list { display: flex; flex-wrap: wrap; gap: .5rem; }

/* 기본(plain) 버튼 — 보더 박스 */
.pl-relbtn {
  display: inline-block; max-width: 100%;
  padding: .55rem .9rem;
  border: 1px solid #e5e5e5; border-radius: 8px; background: #fff;
  color: #555; font-size: .9rem; line-height: 1.3; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: border-color .15s ease, background .15s ease;
}
.pl-relbtn:hover {
  border-color: #bbb; background: #fafafa;
  text-decoration: underline; text-underline-offset: 3px;
}

/* ── CTA(빨간 큰 버튼) — 이미지 스타일 ───────────────────────── */
.pl-relbtns--cta { margin: 1.8rem 0; }
.pl-relbtns--cta .pl-relbtns-list {
  display: block;                 /* 세로 스택 (풀폭) */
}
.pl-relbtns--cta .pl-relbtn {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 0 .9rem;
  padding: 1.05rem 1.2rem;
  border: 0;
  border-radius: 999px;           /* 알약형 */
  background: #fb2222;            /* 레드 */
  color: #fff;
  font-size: 1.18rem;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  white-space: normal;            /* 길면 줄바꿈 */
  box-shadow: 0 6px 14px rgba(251,34,34,.28);
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
}
.pl-relbtns--cta .pl-relbtn:hover {
  background: #e51b1b;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(251,34,34,.34);
}
.pl-relbtns--cta .pl-relbtn:active { transform: translateY(1px); }

/* 손가락 이모지를 라벨 앞에 자동으로 (원하면 주석 해제)
.pl-relbtns--cta .pl-relbtn::before { content: "👉 "; }
*/

@media (max-width: 520px) {
  .pl-relbtn { white-space: normal; }
  .pl-relbtns--cta .pl-relbtn { font-size: 1.06rem; padding: .95rem 1rem; }
}