/* ===== Tokens (page-local) ===== */
:root{
  --hns-container-max: 1100px;
  --hns-s1: .5rem;
  --hns-s2: 1rem;
  --hns-s3: 1.5rem;
  --hns-s4: 2rem;
  --hns-radius: 16px;
  --hns-shadow: 0 10px 20px rgba(0,0,0,.06);
  --hns-muted: #6b7280;
  --hns-radius: 16px;
  --hns-shadow: 0 10px 20px rgba(0,0,0,.06);
  --hns-muted: #6b7280;       
  --hns-accent: #0ea5e9;        
  --hns-accent-2: #f59e0b;     
  --hns-soft-bg: #f8fafc;       
  --hns-border: #e5e7eb;
  
}

/* page container width (Bootstrap와 함께 사용) */
.hns-wrap.container{ max-width: var(--hns-container-max); }

/* intro text */
.hns-lead, .fw-light { color: var(--hns-muted); }

/* section spacing */
.hns-steps + .hns-steps { margin-top: var(--hns-s3); }

/* ===== Steps (Bootstrap grid 유지) ===== */
.hns-steps{
  counter-reset: hnsStep;
  row-gap: var(--hns-s2);
}

/* 카드화 */
.hns-step{
  padding: var(--hns-s2);
  counter-increment: hnsStep;
}

/* step number badge */
.hns-step::before{
  content: counter(hnsStep);
  position: absolute;
  top: -12px; left: -12px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #111827; color: #fff;
  display: grid; place-items: center;
  font-weight: 700;
  box-shadow: var(--hns-shadow);
}

/* image styling */
.hns-step img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: calc(var(--hns-radius) - 6px);
}

/* step description */
.hns-step p{
  margin: var(--hns-s2) 0 0 0;
  font-size: 1rem;
  line-height: 1.45;
}

/* Tips */
.hns-tips{
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: var(--hns-radius);
  padding: var(--hns-s2) var(--hns-s3);
  box-shadow: var(--hns-shadow);
}
.hns-tips .h5{ margin-bottom: .25rem; }
.hns-tips p{ margin: .25rem 0; }

/* anchor scroll offset (고정 헤더 대비) */
[data-hns-anchor]{ scroll-margin-top: 88px; }

/* action buttons: 모바일 폭 */
@media (max-width: 640px){
  .hns-actions .btn{ width: 100%; }
  .hns-actions .btn + .btn{ margin-top: .5rem; }
}

.hns-intro .hns-intro-card{
  background: linear-gradient(180deg, rgba(248,250,252,.85), rgba(255,255,255,.95));
  border: 1px solid var(--hns-border);
  border-radius: var(--hns-radius);
  box-shadow: var(--hns-shadow);
  padding: 1.25rem 1.25rem;
}

@media (min-width: 768px){
  .hns-intro .hns-intro-card{
    padding: 1.75rem 2rem; 
  }
}

/* ============ 타이포 & 장식 ============ */
.hns-intro .hns-title{
  position: relative;
  margin-bottom: .5rem;
  letter-spacing: .2px;
}

.hns-intro .hns-title::after{
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  margin-top: .5rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--hns-accent), var(--hns-accent-2));
  opacity: .9;
}
.direct {
  margin-left: 1.5em
}
.hns-intro .hns-subtitle{
  margin-top: 1rem;
  margin-bottom: .5rem;
}

.hns-intro .hns-lead{
  color: var(--hns-muted);
  line-height: 1.65;
}

.hns-benefits{
  list-style: none;
  margin: .5rem 0 0;
  padding: 0;
}
.hns-benefits li{
  position: relative;
  padding: .5rem .75rem .5rem 1rem;
  margin: .25rem 0;
  border-left: 4px solid #0d6efd;
  background: rgba(13,110,253,.06);
  border-radius: 6px;
  cursor: default;
}
.hns-benefits li:nth-child(1){ border-left-color:#ffc107; background: rgba(255,193,7,.08);}
.hns-benefits li:nth-child(2){ border-left-color:#0d6efd; background: rgba(13,110,253,.06);}
.hns-benefits li:nth-child(3){ border-left-color:#6f42c1; background: rgba(111,66,193,.06);}



.hns-intro .hns-benefits li{
  color: #111827;
}
.hns-intro .hns-benefits li::first-letter{
  color: var(--hns-muted);
}

/* ============ 프로모 문장 ============ */
.hns-intro .hns-promo{
  margin-top: .75rem;
  font-size: 1rem;
}

/* ============ CTA 버튼 그룹 ============ */
.hns-actions {
  .col-12.col-md-6 {
    padding: 0 2em;
  }
}
.hns-actions a{
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;      
  padding: .5rem .85rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: .5rem;
  white-space: nowrap;     
  overflow: hidden;
  text-overflow: ellipsis;

  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.25s ease;
}

.hns-actions a.yes {
    background: rgba(255, 193, 7, 0.25); /* 노랑 계열 */
    border-color: rgba(255, 193, 7, 0.5);
    color: #ffb300; /* 텍스트는 진한 경고색 */
}
.hns-actions a.no {
    background: rgba(13, 110, 253, 0.25); /* 파랑 계열 */
    border-color: rgba(13, 110, 253, 0.5);
    color: #0a58ca; /* 진한 파랑 */
}

.hns-actions a:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}


@media (max-width: 640px){
  .hns-intro .hns-actions--intro .btn{
    width: 100%;
  }
  .hns-intro-card {
    margin-top: 2rem;
  }
  .hns-actions {
  .col-12.col-md-6 {
    padding: 0.5rem 2em;
  }
}
}

.howto h4.hns-title-gradient,
.howto h4.hns-title-divider,
.howto h4.hns-title-corner,
.howto h4.hns-title-chip{
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.25;
  position: relative;
}

.howto h4.hns-title-divider{
  display: flex;
  align-items: center;
  gap: .75rem;
}
.howto h4.hns-title-divider::before,
.howto h4.hns-title-divider::after{
  content:"";
  flex: 1 1 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(15,23,42,.15));
}
.howto h4.hns-title-divider::after{
  background: linear-gradient(90deg, rgba(15,23,42,.15), transparent);
}

#howto {
  .atag {
    text-decoration: underline !important;
    color: blue;
  }
}