/* render_finder.py - 나에게 맞는 지원 찾기 */
/* 2026-09-27(홈 3안): 옛 `.hero h1`/`.finder`/`.finder-h` 오버라이드는 지웠다 - 그 셋을 물던
   마크업(큰 히어로 제목·바깥 h2)이 render_program.py 홈 3안에서 없어졌다(HOME_CSS_EXTRA 의
   `.hero2 h1` 이 이제 그 자리를 대신한다). */
.finder-all{margin:12px 0 0; font-size:15.5px}
.finder-box{background:var(--sheet); border:2px solid var(--line-2); border-radius:22px; padding:22px 20px 18px;
  box-shadow:0 10px 30px rgba(30,36,71,.08)}
.finder-top{min-height:8px}
.finder-count{display:inline-block; margin:0 0 6px; font-family:var(--display); font-weight:700; font-size:15px;
  color:var(--cobalt-ink); background:var(--butter-soft); border-radius:999px; padding:4px 14px}
.finder-q{font-family:var(--display); font-weight:700; font-size:clamp(24px,3.4vw,30px); line-height:1.3; margin:6px 0 6px}
.finder-help{color:var(--ink-2); margin:0 0 16px; font-size:15.5px}
.finder-choices{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin:0 0 14px}
.finder-choice{font:inherit; font-size:16.5px; text-align:left; padding:13px 14px; border-radius:14px; cursor:pointer;
  background:#fff; color:var(--ink); border:2px solid var(--line-2)}
.finder-choice:hover{border-color:var(--cobalt)}
.finder-choice.on{background:var(--cobalt); border-color:var(--cobalt); color:#fff}
.finder-go{font-family:var(--display); font-weight:700; font-size:18px; color:#fff; background:var(--cobalt);
  border:0; border-radius:999px; padding:12px 26px; cursor:pointer; margin:4px 0 8px}
.finder-go:hover{background:var(--cobalt-ink)}
.finder-nav{display:flex; flex-wrap:wrap; gap:6px 18px; margin:10px 0 0}
.finder-link{font:inherit; font-size:15px; background:none; border:0; padding:4px 0; color:var(--cobalt-ink);
  text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.finder-age{display:flex; align-items:center; gap:8px; margin:0 0 6px}
.finder-input{font:inherit; font-size:22px; width:6em; padding:10px 12px; border:2px solid var(--line-2); border-radius:12px}
.finder-unit{font-size:18px}
.finder-err{color:#B3261E; min-height:1.4em; margin:0 0 6px; font-size:15px}
.finder-tabs{display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 14px}
.finder-tab{font:inherit; font-size:14.5px; padding:6px 12px; border-radius:999px; background:#fff;
  border:1.5px solid var(--line-2); color:var(--ink-2); cursor:pointer}
.finder-tab.on{background:var(--ink); color:#fff; border-color:var(--ink)}
.finder-results{list-style:none; margin:0; padding:0}
.finder-card{padding:14px 0; border-top:1px dashed var(--line-2)}
.finder-name{font-family:var(--display); font-weight:700; font-size:19px; text-decoration:none; line-height:1.35}
.finder-org{margin:2px 0 4px; font-size:14px; color:var(--ink-3)}
.finder-sum{margin:0 0 6px; font-size:15.5px}
.finder-why{margin:0; display:flex; flex-wrap:wrap; gap:6px}
.finder-chip{font-size:13px; background:var(--cobalt-soft); color:var(--cobalt-ink); border-radius:999px; padding:2px 10px}
.finder-note{font-size:13.5px; color:var(--ink-3); margin:14px 0 0}
.finder-programs{background:var(--butter-soft); border-radius:14px; padding:10px 14px; font-size:15px; margin:0 0 14px}
.finder-soft{margin:18px 0 0; padding-top:12px; border-top:2px dashed var(--line-2)}
.finder-soft .finder-card{opacity:.85}
@media (max-width:720px){ .finder-box{padding:18px 14px 14px; border-radius:18px} .finder-choices{grid-template-columns:1fr 1fr} }

/* 그림 있는 선택지(2026-09-24) - 첫 질문(누구를 위한 지원)·분야 칩. 은은한 떠오름
   모션(transform 만), 고르면(hover) 살짝 들린다. transform·opacity 만 쓰고
   prefers-reduced-motion 에서 끈다. */
.finder-choice.has-icon{display:flex; align-items:center; gap:10px; text-align:left}
.finder-choice .finder-ico{width:34px; height:34px; object-fit:cover; border-radius:10px; flex:none;
  animation:finder-ico-float 6s ease-in-out infinite; transition:transform .2s ease}
.finder-choice.has-icon:hover .finder-ico{transform:translateY(-3px)}
@keyframes finder-ico-float{0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)}}
/* 첫 질문(누구를 위한 지원) - 그림이 주인공인 큰 카드. 한 개만 고르는 목록(:not(.multi))이 그것뿐이다 */
.finder-choices:not(.multi):has(.has-icon){grid-template-columns:repeat(3,minmax(0,1fr))}
.finder-choices:not(.multi):has(.has-icon) .finder-choice.has-icon{flex-direction:column; justify-content:flex-start; gap:8px;
  text-align:center; padding:14px 10px 16px; font-family:var(--display); font-weight:700; font-size:18px}
.finder-choices:not(.multi):has(.has-icon) .finder-ico{width:100%; max-width:180px; height:auto; aspect-ratio:1; border-radius:16px}
.finder-choices:not(.multi):has(.has-icon) .finder-choice.has-icon:hover{transform:translateY(-3px); box-shadow:0 8px 18px rgba(30,36,71,.12)}
.finder-choice{transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.finder-choices:not(.multi):has(.has-icon) .finder-choice:nth-child(2) .finder-ico{animation-delay:-2s}
.finder-choices:not(.multi):has(.has-icon) .finder-choice:nth-child(3) .finder-ico{animation-delay:-4s}
@media (max-width:720px){ .finder-choice .finder-ico{width:28px; height:28px}
  .finder-choices:not(.multi):has(.has-icon){gap:8px}
  .finder-choices:not(.multi):has(.has-icon) .finder-ico{width:100%; height:auto}
  .finder-choices:not(.multi):has(.has-icon) .finder-choice.has-icon{font-size:15px; padding:10px 6px 12px} }
@media (prefers-reduced-motion:reduce){
  .finder-choice .finder-ico{animation:none}
  .finder-choice.has-icon:hover .finder-ico{transform:none}
}