@charset "UTF-8";
/* ==========================================================================
   Orange Pay - 흐름(ob-flow) 섹션 3D 입체 효과
   요청 : "3D 느낌으로 입체감 있게, 테두리에 그림자가 좀 있었으면"
   대상 : .ob-flow-card + 내부 li(.ob-flow-card-qa li)
          .ob-flow-merits + 내부 li(.ob-flow-merit)
   * custom.css 뒤에 로드되어 기존 그림자 값을 덮어씁니다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 메인 카드 - 바닥에서 살짝 떠 있는 두꺼운 판
   -------------------------------------------------------------------------- */
.ob-flow-card {
  position: relative;
  border-color: rgba(245, 98, 0, 0.18);
  /* 위: 안쪽 하이라이트 / 중간: 실제 두께 / 아래: 바닥 그림자 2단 */
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(197, 78, 0, 0.06),
    0 1px 0 rgba(245, 98, 0, 0.18),
    0 6px 0 -1px rgba(245, 98, 0, 0.1),
    0 10px 18px -6px rgba(120, 48, 0, 0.18),
    0 26px 44px -12px rgba(120, 48, 0, 0.24);
  transform: translateZ(0);
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 강조(주황) 카드는 더 깊게 */
.ob-flow-card.is-primary {
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 0 rgba(150, 58, 0, 0.28),
    0 2px 0 rgba(184, 73, 0, 0.65),
    0 7px 0 -1px rgba(184, 73, 0, 0.35),
    0 12px 22px -6px rgba(150, 58, 0, 0.4),
    0 30px 50px -14px rgba(150, 58, 0, 0.45);
}

@media (hover: hover) {
  .ob-flow-card:hover {
    transform: translateY(-8px);
    box-shadow:
      inset 0 2px 0 rgba(255, 255, 255, 0.95),
      inset 0 -1px 0 rgba(197, 78, 0, 0.06),
      0 1px 0 rgba(245, 98, 0, 0.2),
      0 10px 0 -1px rgba(245, 98, 0, 0.12),
      0 18px 26px -8px rgba(120, 48, 0, 0.22),
      0 40px 60px -16px rgba(120, 48, 0, 0.3);
  }
  .ob-flow-card.is-primary:hover {
    box-shadow:
      inset 0 2px 0 rgba(255, 255, 255, 0.5),
      inset 0 -2px 0 rgba(150, 58, 0, 0.3),
      0 2px 0 rgba(184, 73, 0, 0.7),
      0 12px 0 -2px rgba(184, 73, 0, 0.4),
      0 20px 30px -8px rgba(150, 58, 0, 0.45),
      0 44px 66px -18px rgba(150, 58, 0, 0.5);
  }
}

/* 아이콘 프레임도 살짝 솟아오르게 */
.ob-flow-card-icon {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 1px 0 rgba(245, 98, 0, 0.2),
    0 3px 0 -1px rgba(245, 98, 0, 0.12),
    0 7px 12px -3px rgba(120, 48, 0, 0.2);
}

.ob-flow-card.is-primary .ob-flow-card-icon {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 0 rgba(150, 58, 0, 0.25),
    0 4px 0 -1px rgba(150, 58, 0, 0.16),
    0 9px 14px -4px rgba(80, 32, 0, 0.32);
}

/* --------------------------------------------------------------------------
   2. 카드 내부 li (Q&A) - 눌러 넣은 듯한 음각 + 얇은 두께
   -------------------------------------------------------------------------- */
.ob-flow-card-qa li {
  position: relative;
  border: 1px solid rgba(197, 78, 0, 0.09);
  background: linear-gradient(180deg, #fbf8f5 0%, #f3efeb 100%);
  box-shadow:
    inset 0 1px 2px rgba(120, 48, 0, 0.1),
    inset 0 -1px 0 rgba(255, 255, 255, 0.9),
    0 1px 0 rgba(255, 255, 255, 0.75);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ob-flow-card.is-primary .ob-flow-card-qa li {
  border-color: rgba(255, 255, 255, 0.28);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.15) 100%);
  box-shadow:
    inset 0 1px 2px rgba(120, 48, 0, 0.22),
    inset 0 -1px 0 rgba(255, 255, 255, 0.3);
}

@media (hover: hover) {
  .ob-flow-card-qa li:hover {
    transform: translateY(-2px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      0 2px 0 rgba(197, 78, 0, 0.1),
      0 6px 12px -4px rgba(120, 48, 0, 0.22);
  }
}

/* --------------------------------------------------------------------------
   3. 장점 박스(주황 패널) - 두꺼운 입체 블록
   -------------------------------------------------------------------------- */
.ob-flow-merits {
  position: relative;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.4),
    inset 0 -3px 0 rgba(140, 54, 0, 0.3),
    0 3px 0 rgba(176, 70, 0, 0.6),
    0 10px 0 -2px rgba(176, 70, 0, 0.3),
    0 18px 30px -8px rgba(140, 54, 0, 0.4),
    0 40px 70px -20px rgba(140, 54, 0, 0.45);
}

/* --------------------------------------------------------------------------
   4. 장점 내부 li - 패널 위에 올라앉은 흰 타일
   -------------------------------------------------------------------------- */
.ob-flow-merit {
  position: relative;
  border-color: rgba(255, 255, 255, 0.75);
  background: linear-gradient(180deg, #ffffff 0%, #fdf6f0 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(197, 78, 0, 0.08),
    0 2px 0 rgba(160, 62, 0, 0.28),
    0 5px 0 -1px rgba(160, 62, 0, 0.14),
    0 10px 18px -5px rgba(120, 48, 0, 0.3);
  transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (hover: hover) {
  .ob-flow-merit:hover {
    transform: translateY(-4px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 1),
      inset 0 -1px 0 rgba(197, 78, 0, 0.08),
      0 3px 0 rgba(160, 62, 0, 0.32),
      0 9px 0 -1px rgba(160, 62, 0, 0.18),
      0 18px 28px -6px rgba(120, 48, 0, 0.36);
  }
}

/* 장점 아이콘 - 작은 볼록 버튼 */
.ob-flow-merit-icon {
  background: linear-gradient(180deg, #fff8f1 0%, #ffe6d2 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(197, 78, 0, 0.14),
    0 2px 0 rgba(197, 78, 0, 0.16),
    0 4px 7px -2px rgba(120, 48, 0, 0.26);
}

/* 번호는 살짝 떠 보이도록 */
.ob-flow-merit-num {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 3px rgba(120, 48, 0, 0.22);
}

/* --------------------------------------------------------------------------
   5. 모바일 - 그림자 깊이 축소 (좁은 화면에서 과하지 않게)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 640px) {
  .ob-flow-card {
    box-shadow:
      inset 0 2px 0 rgba(255, 255, 255, 0.9),
      0 1px 0 rgba(245, 98, 0, 0.18),
      0 4px 0 -1px rgba(245, 98, 0, 0.1),
      0 10px 20px -8px rgba(120, 48, 0, 0.24);
  }
  .ob-flow-card.is-primary {
    box-shadow:
      inset 0 2px 0 rgba(255, 255, 255, 0.45),
      0 2px 0 rgba(184, 73, 0, 0.6),
      0 5px 0 -1px rgba(184, 73, 0, 0.3),
      0 12px 22px -8px rgba(150, 58, 0, 0.4);
  }
  .ob-flow-merits {
    box-shadow:
      inset 0 2px 0 rgba(255, 255, 255, 0.4),
      inset 0 -2px 0 rgba(140, 54, 0, 0.28),
      0 3px 0 rgba(176, 70, 0, 0.55),
      0 7px 0 -2px rgba(176, 70, 0, 0.26),
      0 16px 28px -10px rgba(140, 54, 0, 0.4);
  }
  .ob-flow-merit {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 1),
      0 2px 0 rgba(160, 62, 0, 0.26),
      0 4px 0 -1px rgba(160, 62, 0, 0.13),
      0 8px 14px -5px rgba(120, 48, 0, 0.28);
  }
}

/* 애니메이션 최소화 설정 존중 */
@media (prefers-reduced-motion: reduce) {
  .ob-flow-card,
  .ob-flow-merit,
  .ob-flow-card-qa li {
    transition: none;
  }
  .ob-flow-card:hover,
  .ob-flow-merit:hover,
  .ob-flow-card-qa li:hover {
    transform: none;
  }
}

/* ==========================================================================
   수정1-2) 카드별 그라데이션
   1번 단말기결제 : 주황 / 2번 즉시정산 : 연한 노랑 / 3번 오렌지페이 정산 : 연한 녹색
   ========================================================================== */

/* 2번 - 즉시정산 : 연한 노랑 */
.ob-flow-cards > .ob-flow-card:nth-child(2) {
  border-color: rgba(224, 168, 0, 0.22);
  background: linear-gradient(160deg, #fff9e0 0%, #ffeeb0 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(170, 128, 0, 0.1),
    0 1px 0 rgba(200, 150, 0, 0.26),
    0 6px 0 -1px rgba(200, 150, 0, 0.15),
    0 10px 18px -6px rgba(140, 105, 0, 0.22),
    0 26px 44px -12px rgba(140, 105, 0, 0.26);
}

.ob-flow-cards > .ob-flow-card:nth-child(2) .ob-flow-card-qa li {
  border-color: rgba(170, 128, 0, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 250, 225, 0.85) 100%);
  box-shadow:
    inset 0 1px 2px rgba(150, 112, 0, 0.12),
    inset 0 -1px 0 rgba(255, 255, 255, 0.9);
}

/* 3번 - 오렌지페이 정산 : 연한 녹색 */
.ob-flow-cards > .ob-flow-card:nth-child(3) {
  border-color: rgba(46, 145, 78, 0.22);
  background: linear-gradient(160deg, #eefbf1 0%, #cdeed8 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(30, 110, 60, 0.1),
    0 1px 0 rgba(40, 130, 70, 0.24),
    0 6px 0 -1px rgba(40, 130, 70, 0.14),
    0 10px 18px -6px rgba(25, 90, 50, 0.22),
    0 26px 44px -12px rgba(25, 90, 50, 0.26);
}

.ob-flow-cards > .ob-flow-card:nth-child(3) .ob-flow-card-qa li {
  border-color: rgba(30, 110, 60, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(235, 250, 240, 0.85) 100%);
  box-shadow:
    inset 0 1px 2px rgba(25, 90, 50, 0.12),
    inset 0 -1px 0 rgba(255, 255, 255, 0.9);
}

@media (hover: hover) {
  .ob-flow-cards > .ob-flow-card:nth-child(2):hover {
    box-shadow:
      inset 0 2px 0 rgba(255, 255, 255, 0.95),
      0 1px 0 rgba(200, 150, 0, 0.28),
      0 10px 0 -1px rgba(200, 150, 0, 0.17),
      0 18px 26px -8px rgba(140, 105, 0, 0.26),
      0 40px 60px -16px rgba(140, 105, 0, 0.32);
  }
  .ob-flow-cards > .ob-flow-card:nth-child(3):hover {
    box-shadow:
      inset 0 2px 0 rgba(255, 255, 255, 0.95),
      0 1px 0 rgba(40, 130, 70, 0.26),
      0 10px 0 -1px rgba(40, 130, 70, 0.16),
      0 18px 26px -8px rgba(25, 90, 50, 0.26),
      0 40px 60px -16px rgba(25, 90, 50, 0.32);
  }
}

/* ==========================================================================
   수정1-3) 오렌지페이 장점 - 제목을 흰 박스로, 글씨는 검정
   (주황 배경에 흰 글씨 + 주황 로고라 로고가 묻히는 문제 해결)
   ========================================================================== */
.ob-flow-merits-head h3 {
  display: inline-flex;
  padding: 14px 32px;
  border-radius: 999px;
  background: #fff;
  color: #1f1b18;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 2px 0 rgba(160, 62, 0, 0.3),
    0 6px 0 -1px rgba(160, 62, 0, 0.16),
    0 12px 20px -6px rgba(120, 48, 0, 0.32);
}

/* ==========================================================================
   1번 카드(is-primary) 내부 텍스트 색상 - 옆 카드와 동일 계열로
   기존: 전부 흰색(#fff) / 변경: 일반 카드와 같은 어두운 글자
   * 부제·Q&A 는 --op-muted(#6a625c) 를 그대로 쓰면 주황 배경에서
     대비 1.89 로 거의 안 보이므로, 같은 계열의 진한 톤(#3d2a1c)으로 맞춥니다.
   ========================================================================== */
.ob-flow-card.is-primary .ob-flow-card-head h3,
.ob-flow-card.is-primary .ob-flow-card-desc {
  color: var(--op-text);
}

.ob-flow-card.is-primary .ob-flow-card-sub {
  color: #3d2a1c;
}

.ob-flow-card.is-primary .ob-flow-card-qa li {
  background: rgba(255, 255, 255, 0.82);
}

/* Q&A 글자색은 세 카드 모두 동일하게 (부제와 같은 톤) */
.ob-flow-card-qa li,
.ob-flow-cards > .ob-flow-card:nth-child(2) .ob-flow-card-qa li,
.ob-flow-cards > .ob-flow-card:nth-child(3) .ob-flow-card-qa li,
.ob-flow-card.is-primary .ob-flow-card-qa li {
  color: #3d2a1c;
}

.ob-flow-card.is-primary .ob-flow-card-link {
  color: var(--op-text);
}

/* ==========================================================================
   ob-flow-card-link - 박스형 + 3D 입체
   ========================================================================== */
.ob-flow-card-link {
  align-self: flex-start;
  /* 원본의 padding-top:26px 은 박스 안쪽 여백이 되어버리므로
     위 간격은 margin 으로 분리한다 */
  margin-top: auto;
  padding: 12px 22px;
  border: 1px solid rgba(245, 98, 0, 0.22);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #fff4ea 100%);
  font-size: 15px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(197, 78, 0, 0.08),
    0 2px 0 rgba(197, 78, 0, 0.26),
    0 5px 0 -1px rgba(197, 78, 0, 0.14),
    0 9px 16px -5px rgba(120, 48, 0, 0.28);
  transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 주황 카드 위에서는 흰 박스가 더 또렷하게 */
.ob-flow-card.is-primary .ob-flow-card-link {
  border-color: rgba(255, 255, 255, 0.9);
  background: linear-gradient(180deg, #ffffff 0%, #fff1e2 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(150, 58, 0, 0.1),
    0 2px 0 rgba(150, 58, 0, 0.38),
    0 5px 0 -1px rgba(150, 58, 0, 0.2),
    0 10px 18px -5px rgba(80, 32, 0, 0.34);
}

@media (hover: hover) {
  .ob-flow-card-link:hover {
    transform: translateY(-3px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 1),
      inset 0 -1px 0 rgba(197, 78, 0, 0.08),
      0 3px 0 rgba(197, 78, 0, 0.3),
      0 8px 0 -1px rgba(197, 78, 0, 0.18),
      0 16px 24px -6px rgba(120, 48, 0, 0.34);
  }
  .ob-flow-card.is-primary .ob-flow-card-link:hover {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 1),
      0 3px 0 rgba(150, 58, 0, 0.42),
      0 9px 0 -1px rgba(150, 58, 0, 0.24),
      0 18px 26px -6px rgba(80, 32, 0, 0.4);
  }
}

@media screen and (max-width: 640px) {
  .ob-flow-card-link {
    /* 모바일에서는 카드 폭을 꽉 채우고 위 내용과 간격을 띄운다 */
    align-self: stretch;
    justify-content: center;
    width: 100%;
    margin-top: 20px;
    padding: 13px 18px;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ob-flow-card-link {
    transition: none;
  }
  .ob-flow-card-link:hover {
    transform: none;
  }
}