.recommendation-hub-page { min-height: 100vh; background: linear-gradient(180deg, #fff 0%, #eef7ff 48%, #f8fbff 100%); }
.recommendation-hub-page main { min-height: 70vh; }
.recommendation-hub-hero { padding: 92px max(6vw, calc((100vw - 1180px) / 2)) 58px; background: radial-gradient(circle at 78% 18%, rgba(83, 163, 226, .2), transparent 34%), linear-gradient(135deg, #fff 0%, #edf7ff 100%); border-bottom: 1px solid rgba(31, 102, 165, .12); }
.recommendation-hub-hero .section-label { color: #2b79bb; }
.recommendation-hub-hero h1 { max-width: 850px; margin: 0; font-size: clamp(38px, 4.5vw, 60px); line-height: 1.08; letter-spacing: -.055em; word-break: keep-all; }
.recommendation-hub-hero > p:last-child { max-width: 760px; margin: 24px 0 0; color: #5d7390; font-size: 16px; line-height: 1.9; word-break: keep-all; }
.recommendation-library { width: min(calc(100% - 64px), 920px); margin: 0 auto; padding: 56px 0 104px; }
.recommendation-search { display: grid; grid-template-columns: minmax(240px, 1fr) auto; gap: 12px 18px; align-items: end; padding: 22px; background: rgba(255,255,255,.94); border: 1px solid rgba(38, 111, 178, .16); border-radius: 18px; box-shadow: 0 14px 38px rgba(38, 91, 145, .08); }
.recommendation-search label { grid-column: 1 / -1; color: #173e65; font-size: 13px; font-weight: 800; }
.recommendation-search input { width: 100%; height: 50px; padding: 0 16px; color: #102a4c; background: #f8fbff; border: 1px solid #c9def0; border-radius: 10px; outline: 0; }
.recommendation-search input:focus { border-color: #2f7fbe; box-shadow: 0 0 0 3px rgba(47,127,190,.12); }
.recommendation-search > div { display: flex; gap: 7px; }
.recommendation-search button { height: 42px; padding: 0 14px; color: #41617e; background: #edf5fc; border: 1px solid #d7e6f3; border-radius: 999px; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.recommendation-search button.active { color: #fff; background: #246fa9; border-color: #246fa9; }
.recommendation-library-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 30px; align-items: end; margin: 46px 0 20px; }
.recommendation-library-head .section-label { width: 100%; margin-bottom: 0; color: #2f7fc0; }
.recommendation-library-head h2 { margin: 0; font-size: 30px; letter-spacing: -.04em; }
.recommendation-library-head h2 span { color: #2f7fc0; font: 600 18px "IBM Plex Mono", monospace; }
.recommendation-library-head > p:last-child { max-width: 590px; margin: 0; color: #657b94; font-size: 12px; text-align: right; }
.recommendation-blog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.recommendation-blog-card { min-width: 0; overflow: hidden; background: #fff; border: 1px solid rgba(35, 105, 172, .15); border-radius: 16px; box-shadow: 0 14px 36px rgba(36, 87, 140, .08); transition: transform .2s ease, box-shadow .2s ease; }
.recommendation-blog-card:hover { transform: translateY(-4px); box-shadow: 0 24px 58px rgba(36, 87, 140, .15); }
.recommendation-blog-card > a { display: grid; min-width: 0; height: 100%; }
.recommendation-card-image { position: relative; min-width: 0; aspect-ratio: 16 / 8.4; overflow: hidden; background: #1e659c; }
.recommendation-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.recommendation-blog-card:hover .recommendation-card-image img { transform: scale(1.025); }
.recommendation-card-image span { position: absolute; left: 14px; bottom: 13px; padding: 6px 9px; color: #155787; background: rgba(255,255,255,.92); border-radius: 999px; font: 700 9px/1 "IBM Plex Mono", monospace; letter-spacing: .08em; }
.recommendation-card-copy { display: flex; min-width: 0; flex-direction: column; padding: 20px 20px 19px; }
.recommendation-card-area { margin: 0 0 10px; color: #24699f; font: 600 10px/1.4 "IBM Plex Mono", monospace; letter-spacing: .07em; }
.recommendation-card-copy h2 { margin: 0; font-size: clamp(20px, 1.8vw, 24px); line-height: 1.35; letter-spacing: -.04em; word-break: keep-all; }
.recommendation-card-copy > p:not(.recommendation-card-area) { margin: 12px 0 19px; color: #627891; font-size: 12.5px; line-height: 1.72; word-break: keep-all; }
.recommendation-card-copy > div { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-top: auto; padding-top: 14px; border-top: 1px solid #e0ebf5; }
.recommendation-card-copy time { color: #586f88; font: 500 10px "IBM Plex Mono", monospace; }
.recommendation-card-copy strong { color: #236da8; font-size: 12px; }
.recommendation-empty { padding: 38px 20px; color: #617790; text-align: center; background: #fff; border: 1px dashed #b9d1e5; border-radius: 16px; }
.ai-separate-panel { max-width: 920px; margin: 70px auto 110px; padding: 50px; background: #fff; border: 1px solid rgba(35,105,172,.15); border-radius: 22px; box-shadow: 0 20px 56px rgba(36,87,140,.1); }
.ai-separate-panel > span { color: #2e7dbd; font: 700 10px "IBM Plex Mono", monospace; letter-spacing: .1em; }
.ai-separate-panel h2 { max-width: 680px; margin: 20px 0 16px; font-size: clamp(30px, 4vw, 46px); line-height: 1.2; letter-spacing: -.05em; word-break: keep-all; }
.ai-separate-panel p { max-width: 720px; color: #607790; font-size: 15px; line-height: 1.9; }
.ai-separate-panel a { display: inline-block; margin-top: 20px; padding: 12px 17px; color: #fff; background: #246fa9; border-radius: 9px; font-size: 13px; font-weight: 700; }
.recommendation-hub-page footer .footer-main p { color: #536b88; }
.recommendation-hub-page footer .footer-source a { color: #1b66a6; }

@media (max-width: 760px) {
  .recommendation-hub-hero { padding: 68px 22px 44px; }
  .recommendation-hub-hero h1 { font-size: 37px; overflow-wrap: anywhere; word-break: normal; }
  .recommendation-hub-hero > p:last-child { font-size: 14px; overflow-wrap: anywhere; word-break: normal; }
  .recommendation-library { width: calc(100% - 40px); padding: 38px 0 78px; }
  .recommendation-search { grid-template-columns: 1fr; padding: 18px; }
  .recommendation-search > div { overflow-x: auto; }
  .recommendation-library-head { align-items: start; margin-top: 40px; }
  .recommendation-library-head > p:last-child { text-align: left; }
  .recommendation-blog-grid { grid-template-columns: 1fr; }
  .recommendation-card-copy { padding: 21px 20px 20px; }
  .recommendation-card-copy h2 { font-size: 23px; overflow-wrap: anywhere; word-break: normal; }
  .recommendation-card-copy > p:not(.recommendation-card-area) { overflow-wrap: anywhere; word-break: normal; }
  .ai-separate-panel { margin: 42px 20px 78px; padding: 28px 24px; }
  .ai-separate-panel h2, .ai-separate-panel p { overflow-wrap: anywhere; word-break: normal; }
}