body{margin:0;background:#f6f8fc;color:#172033;font-family:Arial,"Malgun Gothic",sans-serif}
.recommend-wrap{max-width:1180px;margin:auto;padding:34px 20px 90px}
.recommend-hero{padding:40px 42px;border:1px solid #dfe7f2;border-radius:24px;background:linear-gradient(135deg,#eff5ff 0%,#fff 68%)}
.recommend-hero>span,.section-head span{font-size:11px;letter-spacing:.16em;font-weight:950;color:#2463eb}
.recommend-hero h1{font-size:38px;line-height:1.22;letter-spacing:-1.6px;margin:10px 0 13px}
.recommend-hero p{max-width:790px;color:#5d6c81;line-height:1.75;font-size:14px;margin:0}
.hero-actions{display:flex;gap:9px;margin-top:22px;flex-wrap:wrap}
.hero-actions a{display:inline-block;border:1px solid #d6dfec;border-radius:11px;padding:11px 15px;background:#fff;color:#38506f;text-decoration:none;font-size:12px;font-weight:900}
.hero-actions a.primary{background:#2463eb;border-color:#2463eb;color:#fff}
.recommend-note{display:flex;align-items:flex-start;gap:14px;margin:16px 0 28px;padding:13px 16px;background:#fff;border:1px solid #e2e8f0;border-radius:13px}
.recommend-note b{white-space:nowrap;font-size:11px;color:#44546b}.recommend-note p{margin:0;font-size:10.5px;line-height:1.6;color:#758195}
.recommend-section{margin-top:34px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:14px}
.section-head h2{margin:5px 0 6px;font-size:25px}.section-head p{margin:0;color:#728096;font-size:12px;line-height:1.6}
.section-head>a{font-size:11px;color:#2463eb;font-weight:900;text-decoration:none;white-space:nowrap}
.recommend-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.featured-grid{grid-template-columns:repeat(3,1fr)}
.recommend-card{display:block;min-height:132px;padding:19px;border:1px solid #dfe6ef;border-radius:17px;background:#fff;color:inherit;text-decoration:none;transition:.15s}
.recommend-card:hover{border-color:#9fbbf4;box-shadow:0 8px 24px rgba(36,99,235,.08);transform:translateY(-2px)}
.recommend-card.hero-card{background:linear-gradient(135deg,#205fd8,#347cf3);color:#fff;border-color:#2463eb}
.card-tag{display:inline-block;border-radius:999px;background:#edf3ff;color:#2463eb;padding:5px 8px;font-size:9px;font-weight:950}
.hero-card .card-tag{background:rgba(255,255,255,.18);color:#fff}
.recommend-card h3{margin:13px 0 7px;font-size:17px}.recommend-card p{margin:0 0 15px;color:#728096;font-size:11px;line-height:1.55}
.hero-card p{color:rgba(255,255,255,.84)}
.recommend-card b{font-size:10.5px;color:#2463eb}.hero-card b{color:#fff}
.how-section{margin-top:38px;padding-top:28px;border-top:1px solid #e1e7ef}
.how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.how-grid article{background:#fff;border:1px solid #e1e7ef;border-radius:14px;padding:17px}
.how-grid b{font-size:12px}.how-grid p{font-size:10.5px;line-height:1.6;color:#6f7c90;margin:8px 0 0}
@media(max-width:900px){.featured-grid,.recommend-grid,.how-grid{grid-template-columns:1fr 1fr}.recommend-hero h1{font-size:32px}}
@media(max-width:620px){.recommend-wrap{padding:22px 14px 70px}.recommend-hero{padding:28px 22px}.recommend-hero h1{font-size:27px}.featured-grid,.recommend-grid,.how-grid{grid-template-columns:1fr}.section-head{align-items:flex-start;flex-direction:column}.recommend-note{display:block}.recommend-note b{display:block;margin-bottom:5px}}


/* v11.20.3 추천 허브 글자 +2px, 카드 크기 유지 */
.recommend-card .card-tag{
  font-size:11px;
}
.recommend-card h3{
  font-size:19px;
}
.recommend-card p{
  font-size:13px;
}
.recommend-card b{
  font-size:12.5px;
}

/* 많이 찾는 조건 카드도 추천 카드와 동일 타이포 */
.recommend-grid:not(.featured-grid) .recommend-card h3{
  font-size:19px;
}
.recommend-grid:not(.featured-grid) .recommend-card p{
  font-size:13px;
}
.recommend-grid:not(.featured-grid) .recommend-card b{
  font-size:12.5px;
}


/* v11.20.4 추천 허브 상단 링크 줄바꿈 방지 */
.section-head>a{
  white-space:nowrap;
  word-break:keep-all;
  flex-shrink:0;
}

/* =========================================================
   v11.28.4 추천 허브 가독성 강화
   ========================================================= */
.recommend-hero>span,
.section-head span{
  font-size:13px;
}
.recommend-hero p{
  font-size:17px;
  line-height:1.8;
}
.hero-actions a{
  font-size:16px;
  padding:14px 18px;
  border-radius:13px;
}
.recommend-note b{
  font-size:14px;
}
.recommend-note p{
  font-size:14px;
  line-height:1.75;
}
.section-head h2{
  font-size:30px;
}
.section-head p{
  font-size:15px;
  line-height:1.7;
}
.section-head>a{
  font-size:14px;
}
.how-grid b{
  font-size:14px;
}
.how-grid p{
  font-size:14px;
  line-height:1.7;
}
@media(max-width:620px){
  .recommend-hero p,
  .recommend-note p,
  .section-head p,
  .how-grid p{
    font-size:15px;
  }
  .hero-actions a{
    font-size:15px;
    width:100%;
    text-align:center;
    justify-content:center;
  }
  .section-head h2{
    font-size:24px;
  }
}

/* =========================================================
   v11.29 사용자 피드백 빠른 찾기
   ========================================================= */
.feedback-quick{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:16px 0 20px;padding:15px 17px;border:1px solid #dce7f8;border-radius:14px;background:#f6f9ff}
.feedback-quick>div span{display:block;font-size:11px;font-weight:950;color:#2463eb;letter-spacing:.06em}
.feedback-quick>div b{display:block;margin-top:5px;font-size:14px;color:#2b3d58}
.feedback-quick nav{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.feedback-quick a{display:inline-flex;padding:8px 11px;border:1px solid #d6e2f4;border-radius:999px;background:#fff;color:#315276;text-decoration:none;font-size:12px;font-weight:900;white-space:nowrap}
.feedback-quick a:hover{border-color:#2463eb;color:#2463eb}
@media(max-width:760px){.feedback-quick{align-items:flex-start;flex-direction:column}.feedback-quick nav{justify-content:flex-start}}


/* =========================================================
   v11.42.27 최종 - 추천 허브 밀도 개선
   상단 중복 CTA를 제거하고 빠른 조건 찾기로 진입점을 모은다.
   ========================================================= */
.recommend-wrap{padding-top:24px}
.recommend-hero{
  padding:20px 26px;
  border-radius:18px;
}
.recommend-hero>span{font-size:11px}
.recommend-hero h1{
  max-width:none;
  margin:7px 0 8px;
  font-size:29px;
  line-height:1.25;
  letter-spacing:-1.15px;
}
.recommend-hero p{
  max-width:980px;
  font-size:14px;
  line-height:1.65;
}
.feedback-quick{
  margin:12px 0 18px;
  padding:12px 14px;
  gap:14px;
}
.feedback-quick>div b{font-size:13px;margin-top:3px}
.feedback-quick nav{gap:6px}
.feedback-quick a{padding:7px 10px;font-size:11.5px}
.feedback-quick a.quick-entry{
  border-color:#a9c5fb;
  background:#eef4ff;
  color:#1f5ed1;
}
.recommend-section{margin-top:28px}
html[data-hp-theme="dark"] .recommend-hero{
  background:#111a2d;
  border-color:#2c3b56;
}
html[data-hp-theme="dark"] .recommend-hero p{color:#aebbd0}
html[data-hp-theme="dark"] .feedback-quick a.quick-entry{
  background:#152746;
  border-color:#3a5f9a;
  color:#8db8ff;
}
@media(max-width:620px){
  .recommend-wrap{padding-top:16px}
  .recommend-hero{padding:18px 18px}
  .recommend-hero h1{font-size:25px}
  .recommend-hero p{font-size:14px}
}