/* 고객 상황별 추천 카드 — "이런 분께 추천합니다" (삼성 피드백 5번, 2026-09-22)
   PC·모바일 같은 마크업 한 벌. 접두어 sop-reco- (짧은 클래스명은 솔루션 basic.css 와 충돌한다) */

.sop-reco{max-width:1200px;margin:0 auto 56px;padding:0 24px;box-sizing:border-box;
  font-family:'Samsung One Korean','Malgun Gothic',sans-serif}
.sop-reco-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:0 0 20px}
.sop-reco-head h3{margin:0;font-size:28px;font-weight:900;letter-spacing:-.7px;color:#0b0f1a}
.sop-reco-head .more{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:700;
  color:#4b5563;text-decoration:none !important;white-space:nowrap}
.sop-reco-head .more i{font-style:normal;font-size:17px;line-height:1}
.sop-reco-head .more:hover{color:#1428a0}

.sop-reco-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin:0;padding:0;list-style:none}
/* 설명이 1줄인 카드와 2줄인 카드가 섞여 아래 끝이 들쭉날쭉했다(2026-09-22).
   li 를 flex 로, 카드를 세로 flex 로 만들어 글줄 수와 상관없이 높이를 맞춘다.
   사진은 고정(49%)이고 글 영역이 남는 높이를 먹으므로 제목 줄은 가지런히 정렬된다. */
.sop-reco-grid li{min-width:0;display:flex}
.sop-reco-grid .card{display:flex;flex-direction:column;width:100%;text-decoration:none !important;color:inherit;
  background:#f5f7fb;border-radius:16px;overflow:hidden;transition:.16s}
a.card:hover{box-shadow:0 10px 26px rgba(20,40,160,.13);transform:translateY(-2px)}
a.card:focus-visible{outline:2px solid #2189ff;outline-offset:3px}

/* 사진 자리 — 삼성 시안 비율(185×91 ≒ 2:1). 16:10 으로 잡으면 시안보다 세로로 길어진다 */
.sop-reco-grid .ph{display:block;position:relative;width:100%;flex:none;padding-top:49%;overflow:hidden;background:#e8edf6}
.sop-reco-grid .ph img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block}
/* 사진 미등록 — 카드 모양은 유지하고 제목 첫 글자를 얹는다 */
.sop-reco-grid .ph.noimg b{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:'Samsung Sharp Sans','Samsung One Korean',sans-serif;font-size:34px;font-weight:700;color:#fff;opacity:.92}
.sop-reco-grid .ph.t1{background:linear-gradient(135deg,#2b5ce6,#1428a0)}
.sop-reco-grid .ph.t2{background:linear-gradient(135deg,#3f8ae0,#1f5fbf)}
.sop-reco-grid .ph.t3{background:linear-gradient(135deg,#5aa7d8,#2f76b4)}
.sop-reco-grid .ph.t4{background:linear-gradient(135deg,#7f9ad4,#4359a8)}
.sop-reco-grid .ph.t5{background:linear-gradient(135deg,#9bb0dd,#5a6fb0)}

.sop-reco-grid .tx{display:block;flex:1 1 auto;padding:15px 16px 18px;text-align:center}
.sop-reco-grid .tx strong{display:block;font-size:16px;font-weight:800;color:#0b0f1a;letter-spacing:-.3px}
.sop-reco-grid .tx em{display:block;margin-top:6px;font-style:normal;font-size:12.5px;line-height:1.5;
  color:#6b7280;word-break:keep-all}

@media (max-width:1024px){
  .sop-reco{padding:0 20px;margin-bottom:48px}
  .sop-reco-head h3{font-size:24px}
  .sop-reco-grid{grid-template-columns:repeat(3,1fr);gap:14px}
}

/* 폰 — 5개를 3열로 쌓으면 마지막 줄이 비어 어색하다. 가로 스크롤로 한 줄에 흘린다 */
@media (max-width:768px){
  .sop-reco{padding:0;margin-bottom:40px}
  .sop-reco-head{padding:0 16px;margin-bottom:14px}
  .sop-reco-head h3{font-size:21px}
  .sop-reco-head .more{font-size:13px}
  .sop-reco-grid{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:12px;
    padding:2px 16px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .sop-reco-grid::-webkit-scrollbar{display:none}
  .sop-reco-grid li{flex:0 0 152px}
  .sop-reco-grid .tx{padding:12px 12px 15px}
  .sop-reco-grid .tx strong{font-size:14.5px}
  .sop-reco-grid .tx em{font-size:12px;margin-top:5px}
  .sop-reco-grid .ph.noimg b{font-size:28px}
}

@media (prefers-reduced-motion:reduce){
  .sop-reco-grid .card{transition:none}
  a.card:hover{transform:none}
}

/* 2026-09-29 반응형 전환 후 — 카드가 적으면(지금 2장) 152px 고정이라 오른쪽이 58px 비어 왼쪽으로 쏠려 보였다.
   남는 폭은 나눠 가진다(늘어나기만, 줄지는 않음). 카드가 많아 넘치면 종전처럼 152px 로 가로 스크롤 */
@media (max-width:768px){
  .sop-reco-grid li{flex:1 0 152px}
}