@charset "UTF-8";
/* ==========================================================================
   Orange Pay - 서브페이지 수정 (단말기안내 수정3 / 회사소개 수정2-4)
   1) 단말기 제품 이미지 그림자
   2) 사양 목록 테두리 박스 + 항목 사이 실선
   3) 추천 사용 환경 박스 테두리
   4) 무선 단말기(첫번째 카드) 추천 사용 환경 4개 굵게
   * custom.css 뒤에 로드되어 기존 값을 덮어씁니다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 단말기 제품 이미지 그림자
   -------------------------------------------------------------------------- */
.tm-card-visual img {
  filter: drop-shadow(0 18px 22px rgba(31, 27, 24, 0.28))
          drop-shadow(0 6px 8px rgba(31, 27, 24, 0.16));
}

/* --------------------------------------------------------------------------
   2. 사양 목록 - 감싸는 테두리 박스 + 행 구분 실선
   -------------------------------------------------------------------------- */
.tm-specs {
  overflow: hidden;
  padding: 4px 16px;
  border: 1px solid rgba(31, 27, 24, 0.1);
  border-radius: 14px;
  background: #fff;
}

.tm-specs li {
  padding: 14px 0;
}

/* 항목 사이 실선 (마지막 항목 아래는 선 없음) */
.tm-specs li + li {
  margin-top: 0;
  border-top: 1px solid rgba(31, 27, 24, 0.1);
}

/* --------------------------------------------------------------------------
   3. 추천 사용 환경 박스 테두리
   -------------------------------------------------------------------------- */
.tm-uses {
  border: 1px solid rgba(245, 98, 0, 0.16);
}

/* --------------------------------------------------------------------------
   4. 무선 단말기(첫번째 카드) 추천 사용 환경 항목 굵게
   -------------------------------------------------------------------------- */
.tm-list > .tm-card:first-child .tm-uses-label {
  font-weight: 700;
}

/* ==========================================================================
   수정2-4) 회사소개 - WHAT WE DO 01 02 03 모바일 가로 배치
   기존: 768px 이하에서 1열로 세로 나열 -> 3열 가로 유지
   ========================================================================== */
@media screen and (max-width: 768px) {
  .ab-works-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  .ab-works-card {
    padding: 18px 10px 16px;
  }
  .ab-works-num {
    font-size: 22px;
  }
  .ab-works-icon {
    width: 100%;
    max-width: 74px;
    margin: 10px auto 0;
  }
  .ab-works-card h3 {
    margin-top: 14px;
    font-size: 15px;
    text-align: center;
  }
  .ab-works-card p {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
    word-break: keep-all;
  }
  /* 좁은 3열에서 강제 줄바꿈(br)이 어색하게 끊겨 무시 */
  .ab-works-card p br {
    display: none;
  }
}

@media screen and (max-width: 480px) {
  .ab-works-list {
    gap: 7px;
  }
  .ab-works-card {
    padding: 14px 7px 13px;
  }
  .ab-works-num {
    font-size: 18px;
  }
  .ab-works-card h3 {
    font-size: 13px;
    word-break: keep-all;
  }
  .ab-works-card p {
    font-size: 11px;
  }
}

/* ==========================================================================
   메인페이지 이용 절차 - 모바일 배치
   5단계를 3 + 2 로 나누되, 둘째 줄 2개를 가운데로 모읍니다.
       1 2 3
        4 5
   6칸 그리드에서 각 항목이 2칸씩 차지하게 하고,
   4번째를 한 칸(1칸) 밀어 아래 줄을 가운데 정렬합니다.
   ========================================================================== */
@media screen and (max-width: 900px) {
  .ob-proc-list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .ob-proc-step {
    grid-column: span 2;
  }
  /* 4번째부터 둘째 줄 - 한 칸 밀어 가운데로 */
  .ob-proc-step:nth-child(4) {
    grid-column: 2 / span 2;
  }
  .ob-proc-step:nth-child(5) {
    grid-column: 4 / span 2;
  }
  /* 화살표는 같은 줄 안에서만 표시 (1번째, 4번째 앞은 제외) */
  .ob-proc-step:nth-child(1):before,
  .ob-proc-step:nth-child(4):before {
    display: none;
  }
  .ob-proc-step:nth-child(2):before,
  .ob-proc-step:nth-child(3):before,
  .ob-proc-step:nth-child(5):before {
    display: block;
  }
}