/*
 * PINOSS v57
 * PC 메인 매입률 카드 상품권명 / 구분선 겹침 수정
 * 모바일 디자인은 변경하지 않습니다.
 */

@media (min-width: 761px){

  /* 상품권명 영역을 독립된 행으로 확보 */
  .grate-section .grate-card .grate-card__name{
    position:relative!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    width:calc(100% - 36px)!important;
    min-height:52px!important;
    height:auto!important;

    margin:18px auto 22px!important;
    padding:0 8px!important;

    border:0!important;
    border-bottom:0!important;

    box-sizing:border-box!important;

    color:#14263d!important;
    font-size:16px!important;
    font-weight:800!important;
    line-height:1.4!important;

    text-align:center!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
    white-space:normal!important;

    z-index:2!important;
    background:#fff!important;
  }

  /* 기존 선/가상요소가 제목을 가로지르는 경우 제거 */
  .grate-section .grate-card .grate-card__name::before{
    content:none!important;
    display:none!important;
  }

  /* 구분선을 텍스트 아래로 별도 배치 */
  .grate-section .grate-card .grate-card__name::after{
    content:""!important;

    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:-11px!important;

    display:block!important;
    width:100%!important;
    height:1px!important;

    margin:0!important;
    padding:0!important;

    background:#e2eaf3!important;
    border:0!important;

    pointer-events:none!important;
  }

  /* 카드 자체의 기존 중앙선이 따로 있는 경우 겹치지 않게 차단 */
  .grate-section .grate-card > hr{
    display:none!important;
  }

  /* 제목 아래 매입률과 충분한 간격 */
  .grate-section .grate-card .grate-card__rate{
    position:relative!important;
    z-index:1!important;
    margin-top:4px!important;
  }
}

/* 모바일은 현재 정상 상태 그대로 유지 */
@media (max-width:760px){
  .grate-section .grate-card .grate-card__name{
    background:transparent;
  }
}


/* =========================================================
   PINOSS v58
   PC 상품권명 바로 아래 구분선 위치 확정
   - 기존 ::after의 top/transform 값까지 완전히 초기화
   - 버튼/매입률 영역까지 내려가는 현상 방지
   ========================================================= */
@media (min-width:761px){

  .grate-section .grate-card .grate-card__name{
    position:relative!important;
    overflow:visible!important;

    width:calc(100% - 42px)!important;
    min-height:42px!important;

    margin:16px auto 28px!important;
    padding:0 8px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    background:#fff!important;
    border:0!important;

    box-sizing:border-box!important;
    z-index:5!important;
  }

  .grate-section .grate-card .grate-card__name::before{
    content:none!important;
    display:none!important;
  }

  .grate-section .grate-card .grate-card__name::after{
    content:""!important;

    position:absolute!important;

    /* 핵심: 이전 CSS의 top 값이 남지 않도록 완전히 초기화 */
    top:auto!important;
    bottom:-10px!important;
    left:50%!important;
    right:auto!important;

    width:min(78%,220px)!important;
    height:1px!important;

    margin:0!important;
    padding:0!important;

    transform:translateX(-50%)!important;

    border:0!important;
    border-radius:0!important;
    background:#e3eaf2!important;
    box-shadow:none!important;

    opacity:1!important;
    pointer-events:none!important;
    z-index:1!important;
  }

  /* 제목 아래 요소들이 선과 충분히 떨어지도록 */
  .grate-section .grate-card .grate-card__rate{
    margin-top:0!important;
    position:relative!important;
    z-index:3!important;
  }

  .grate-section .grate-card .grate-card__button,
  .grate-section .grate-card .grate-card__action,
  .grate-section .grate-card a{
    position:relative!important;
    z-index:4!important;
  }
}