/* ==============================================================
 * HC JOYN MAINPAGE - Verse Section (오늘의 말씀)
 *
 * Mobile  : gradient card with quote, ref, 2-button action row,
 *           tag + action row, bible-book decoration.
 * Desktop : full-bleed editorial band with massive centered quote
 *           and 4-button action dock.
 *
 * Customizable via CSS vars set inline:
 *   --hcjm-verse-min-h, --hcjm-verse-max-w, --hcjm-verse-pad-y
 * ============================================================== */

/* ==============================================================
 * MOBILE
 * ============================================================== */
.hcjm-verse{
  position:relative;
  min-height:var(--hcjm-verse-min-h, 158px);
  border-radius:var(--hcjm-radius-lg);
  padding:22px 18px 16px;
  background:
    radial-gradient(circle at 85% 50%, rgba(69,65,255,.16), transparent 32%),
    linear-gradient(135deg, var(--hcjm-primary-faint) 0%, #ffffff 55%, var(--hcjm-primary-soft) 100%);
  box-shadow:var(--hcjm-shadow-md);
  border:1px solid rgba(69,65,255,.08);
  overflow:hidden;
}

/* 성경책 실루엣 배경 장식 */
.hcjm-verse.has-decoration::after{
  content:"";
  position:absolute;
  right:18px;
  top:50%;
  width:72px;
  height:92px;
  opacity:.2;
  transform:translateY(-52%) rotate(-6deg);
  pointer-events:none;
  background:no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 92' fill='none'%3E%3Cpath d='M6 10c0-2.2 1.8-4 4-4h10v80H10c-2.2 0-4-1.8-4-4V10z' fill='%232E29D4'/%3E%3Cpath d='M20 6h42c3.3 0 6 2.7 6 6v68c0 3.3-2.7 6-6 6H20V6z' fill='%234541FF'/%3E%3Cpath d='M22 12h38v3H22v-3z' fill='%23fff' fill-opacity='.35'/%3E%3Cpath d='M22 78h38v2H22v-2z' fill='%23fff' fill-opacity='.2'/%3E%3Cpath d='M40 38h-6v12h-4v-6h-6v-4h6v-6h4v6h6v4z' fill='%23fff' fill-opacity='.28'/%3E%3Cpath d='M58 14c1.1 0 2 .9 2 2v60c0 1.1-.9 2-2 2' stroke='%232E29D4' stroke-width='1.5' stroke-opacity='.5'/%3E%3C/svg%3E");
}

/* Head row */
.hcjm-verse-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:var(--hcjm-primary);
  font-size:12.5px;
  font-weight:800;
}
.hcjm-verse-head-label{
  display:inline-flex;
  align-items:center;
  gap:4px;
}
/* Quote text — 한글 단어(음절 묶음) 중간 줄바꿈 방지 */
.hcjm-verse-text,
.hcjm-verse-quote{
  word-break:keep-all;
  overflow-wrap:break-word;
  line-break:strict;
}
.hcjm-verse-text{
  position:relative;
  margin:14px 0 6px;
  font-size:19px;
  font-weight:800;
  line-height:1.4;
  letter-spacing:-0.6px;
  z-index:1;
}
.hcjm-verse-text em,
.hcjm-verse-text strong,
.hcjm-verse-quote em,
.hcjm-verse-quote strong{
  word-break:keep-all;
}
.hcjm-verse-text em{
  font-style:normal;
  background:linear-gradient(120deg, var(--hcjm-primary), var(--hcjm-primary-light));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hcjm-verse.has-quote-mark .hcjm-verse-text::before{
  content:"\201C";
  font-size:32px;
  line-height:0;
  color:var(--hcjm-primary);
  margin-right:2px;
  vertical-align:-10px;
}

/* Reference */
.hcjm-verse-ref{
  margin:0;
  color:var(--hcjm-text-sub);
  font-size:13px;
  font-weight:700;
  position:relative;
  z-index:1;
}

/* Mobile actions (bottom row) */
.hcjm-verse-actions-mobile{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(0, 1fr));
  overflow:hidden;
  border-radius:14px;
  background:#fff;
  box-shadow:var(--hcjm-shadow-sm);
  position:relative;
  z-index:1;
}
.hcjm-verse-actions-mobile .hcjm-verse-action{
  border:0;
  border-right:1px solid var(--hcjm-line);
  background:#fff;
  color:var(--hcjm-primary);
  padding:12px 0;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  font-family:inherit;
  text-decoration:none;
  transition:background var(--hcjm-dur-fast);
}
.hcjm-verse-actions-mobile .hcjm-verse-action:last-child{border-right:0;}
.hcjm-verse-actions-mobile .hcjm-verse-action:active{background:var(--hcjm-primary-soft);}

/* ==============================================================
 * DESKTOP
 * ============================================================== */
.hcjm-verse-desktop{
  display:none;
}

@media (min-width:1024px){
  .hcjm-verse-desktop{
    display:block;
    padding:var(--hcjm-verse-pad-y, 96px) 0;
    position:relative;
    overflow:hidden;
  }

  /* Background variants */
  .hcjm-verse-desktop.is-bg-gradient{
    background:
      radial-gradient(ellipse 800px 600px at 50% 50%, rgba(69,65,255,.10), transparent 60%),
      linear-gradient(180deg, var(--hcjm-primary-faint) 0%, #ffffff 100%);
  }
  .hcjm-verse-desktop.is-bg-white { background:#fff; }
  .hcjm-verse-desktop.is-bg-bg    { background:var(--hcjm-bg); }

  /* 성경책 실루엣 (좌·우) */
  .hcjm-verse-desktop.has-decorations::before,
  .hcjm-verse-desktop.has-decorations::after{
    content:"";
    position:absolute;
    top:50%;
    width:140px;
    height:180px;
    opacity:.07;
    transform:translateY(-50%);
    pointer-events:none;
    background:no-repeat center / contain
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 92' fill='none'%3E%3Cpath d='M6 10c0-2.2 1.8-4 4-4h10v80H10c-2.2 0-4-1.8-4-4V10z' fill='%232E29D4'/%3E%3Cpath d='M20 6h42c3.3 0 6 2.7 6 6v68c0 3.3-2.7 6-6 6H20V6z' fill='%234541FF'/%3E%3Cpath d='M22 12h38v3H22v-3z' fill='%23fff' fill-opacity='.35'/%3E%3Cpath d='M40 38h-6v12h-4v-6h-6v-4h6v-6h4v6h6v4z' fill='%23fff' fill-opacity='.28'/%3E%3C/svg%3E");
  }
  .hcjm-verse-desktop.has-decorations::before{left:4%;}
  .hcjm-verse-desktop.has-decorations::after{
    right:4%;
    transform:translateY(-50%) scaleX(-1);
  }

  /* Container centered + max-width */
  .hcjm-verse-desktop .hcjm-container{
    position:relative;
    text-align:center;
    max-width:var(--hcjm-verse-max-w, 840px);
  }

  /* Tag pill */
  .hcjm-verse-tag{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 16px;
    background:#fff;
    border:1px solid rgba(69,65,255,.18);
    border-radius:999px;
    color:var(--hcjm-primary);
    font-size:13px;
    font-weight:800;
    letter-spacing:.4px;
    margin-bottom:32px;
    box-shadow:0 4px 12px rgba(69,65,255,.08);
  }
  .hcjm-verse-desktop.is-bg-bg .hcjm-verse-tag{
    background:var(--hcjm-card);
  }

  /* Quote */
  .hcjm-verse-quote{
    font-size:32px;
    font-weight:800;
    line-height:1.45;
    letter-spacing:-0.6px;
    color:var(--hcjm-text);
    margin:0 0 24px;
    position:relative;
    word-break:keep-all;
    overflow-wrap:break-word;
    line-break:strict;
  }
  .hcjm-verse-desktop.has-quote-mark .hcjm-verse-quote::before{
    content:"\201C";
    position:absolute;
    top:-22px; left:50%;
    transform:translateX(-50%);
    font-size:56px;
    color:var(--hcjm-primary);
    opacity:.3;
    line-height:1;
    pointer-events:none;
  }
  .hcjm-verse-quote em{
    font-style:normal;
    background:linear-gradient(120deg, var(--hcjm-primary), var(--hcjm-primary-light));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .hcjm-verse-quote strong{
    font-weight:900;
  }

  /* Source */
  .hcjm-verse-source{
    font-size:15px;
    color:var(--hcjm-text-sub);
    font-weight:700;
    letter-spacing:.5px;
    margin:0 0 36px;
  }

  /* Action dock */
  .hcjm-verse-actions-desktop{
    display:inline-flex;
    gap:12px;
    padding:8px;
    background:#fff;
    border-radius:16px;
    box-shadow:var(--hcjm-shadow-md);
  }
  .hcjm-verse-actions-desktop .hcjm-verse-action{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 20px;
    background:transparent;
    border:0;
    border-radius:10px;
    color:var(--hcjm-text);
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    font-family:inherit;
    text-decoration:none;
    transition:all var(--hcjm-dur-fast);
  }
  .hcjm-verse-actions-desktop .hcjm-verse-action:hover{
    background:var(--hcjm-primary-soft);
    color:var(--hcjm-primary);
  }
  .hcjm-verse-actions-desktop .hcjm-verse-action.is-primary{
    background:var(--hcjm-primary);
    color:#fff;
  }
  .hcjm-verse-actions-desktop .hcjm-verse-action.is-primary:hover{
    background:var(--hcjm-primary-dark);
  }

  /* Narrow desktop adjustments */
  @media (max-width:1199px){
    .hcjm-verse-desktop{padding:64px 0;}
    .hcjm-verse-quote{font-size:28px; letter-spacing:-0.4px;}
    .hcjm-verse-desktop.has-quote-mark .hcjm-verse-quote::before{
      font-size:44px; top:-16px;
    }
  }
}