/* ============================================================
   smartsearch.css — 스마트서치 결과 페이지 전용 (hover·애니메이션 = 3순위 별도 CSS)
   배치: /sub/smartsearch/smartsearch.css
   규칙: 색은 setting.css 루트 토큰(var) 사용 · 하드코딩 금지
         간격/라운드는 setting.css의 --sp-* clamp 변수 사용 (짝수 2단위)
         보더 1~3px·포커스링만 px 리터럴 허용 (setting.css 관례)
   ============================================================ */

#smartSearch{
  background:
    radial-gradient(70rem 32rem at 50% -9rem, var(--white,#fff) 0%, rgba(255,255,255,0) 70%),
    var(--light2, #F6F4EC);
  color: var(--dark, #2c2c2c);
}

#smartSearch .ss-wrap{ max-width:48rem; margin:0 auto; padding:0 var(--sp-20, 1.2500rem); }

/* ── 상단 브랜드 + 리드 ── */
#smartSearch .ss-brand{
  text-align:center; font-size:.8125rem; font-weight:800;
  letter-spacing:.18em; color:var(--point, #D7AC7A); text-transform:uppercase;
}
#smartSearch .ss-lead{
  text-align:center; font-size:clamp(1.5rem, 3.4vw, 2.125rem); font-weight:800;
  letter-spacing:-.02em; margin:var(--sp-10, 0.6250rem) 0 var(--sp-26, 1.6250rem); color:var(--main-color, #304F4E);
}

/* ── 검색폼 (알약형) ── */
#smartSearch .ss-form{
  display:flex; align-items:center; gap:var(--sp-6, 0.3750rem);
  background:var(--white,#fff); border:1px solid var(--gray-200,#e9e3d6);
  border-radius:999px; padding:var(--sp-6, 0.3750rem) var(--sp-6, 0.3750rem) var(--sp-6, 0.3750rem) var(--sp-22, 1.3750rem);
  max-width:35rem; margin:0 auto var(--sp-30, 1.8750rem);
  box-shadow:0 var(--sp-6, 0.3750rem) var(--sp-22, 1.3750rem) rgba(48,79,78,.06);
  transition:border-color .2s, box-shadow .2s;
}
#smartSearch .ss-form:focus-within{
  border-color:var(--point, #D7AC7A);
  box-shadow:0 var(--sp-8, 0.5000rem) var(--sp-26, 1.6250rem) rgba(215,172,122,.18);
}
#smartSearch .ss-form input{
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  font:inherit; font-size:.97rem; color:var(--dark,#2c2c2c);
}
#smartSearch .ss-form button{
  flex:none; border:0; cursor:pointer; border-radius:999px;
  background:var(--main-color, #304F4E); color:var(--white,#fff);
  font-size:.875rem; font-weight:800; padding:var(--sp-10, 0.6250rem) var(--sp-22, 1.3750rem);
  transition:filter .15s;
}
#smartSearch .ss-form button:hover{ filter:brightness(1.12); }

/* ── 인기 검색어 칩 ── */
#smartSearch .ss-pop{ display:flex; flex-wrap:wrap; gap:var(--sp-8, 0.5000rem); justify-content:center; margin-top:var(--sp-6, 0.3750rem); }
#smartSearch .ss-chip{
  display:inline-flex; align-items:center; text-decoration:none;
  background:var(--white,#fff); border:1px solid var(--gray-200,#e9e3d6);
  border-radius:999px; padding:var(--sp-6, 0.3750rem) var(--sp-14, 0.8750rem);
  font-size:.84rem; font-weight:600; color:var(--dark,#2c2c2c);
  transition:border-color .2s, color .2s, transform .2s;
}
#smartSearch .ss-chip:hover{ border-color:var(--point, #D7AC7A); color:var(--main-color, #304F4E); transform:translateY(-2px); }

/* ── 매크로 답변 (타이핑) ── */
#smartSearch .ss-answer{
  text-align:center; font-size:clamp(1.06rem, 2.4vw, 1.31rem); font-weight:700;
  line-height:1.55; color:var(--main-color, #304F4E); margin:var(--sp-6, 0.3750rem) auto var(--sp-24, 1.5000rem); max-width:37.5rem;
  min-height:1.6em;
}
#smartSearch .ss-cursor{
  display:inline-block; width:2px; height:1.05em; background:var(--point, #D7AC7A);
  vertical-align:-0.15em; margin-left:2px; animation:ssBlink .85s steps(1) infinite;
}
@keyframes ssBlink{ 50%{ opacity:0; } }

/* ── 등장 시퀀스 ── */
#smartSearch .ss-seq{ animation:ssUp .5s cubic-bezier(.22,.7,.3,1) both; }
@keyframes ssUp{ from{ opacity:0; transform:translateY(var(--sp-14, 0.8750rem));} to{ opacity:1; transform:none; } }

/* ── 공통 카드 (위키/용어풀이) ── */
#smartSearch .ss-card{
  background:var(--white,#fff); border:1px solid var(--gray-200,#e9e3d6);
  border-radius:var(--sp-16, 1.0000rem); padding:var(--sp-20, 1.2500rem) var(--sp-22, 1.3750rem); margin:0 0 var(--sp-14, 0.8750rem);
  line-height:1.75; font-size:.9rem;
}
#smartSearch .ss-tag{
  display:inline-block; font-size:.69rem; font-weight:800; letter-spacing:.1em;
  color:var(--point, #D7AC7A); background:color-mix(in srgb, var(--point) 14%, #fff);
  border-radius:999px; padding:var(--sp-4, 0.2500rem) var(--sp-12, 0.7500rem); margin-bottom:var(--sp-10, 0.6250rem); text-transform:uppercase;
}
#smartSearch .ss-src{ margin-top:var(--sp-10, 0.6250rem); font-size:.75rem; color:var(--gray-500, #8a8a8a); }
#smartSearch .ss-src a{ color:var(--main-color, #304F4E); }

/* 용어 풀이 */
#smartSearch .ss-dict-row{ display:flex; gap:var(--sp-12, 0.7500rem); padding:var(--sp-6, 0.3750rem) 0; border-bottom:1px dashed var(--gray-200,#e9e3d6); }
#smartSearch .ss-dict-row:last-child{ border-bottom:0; }
#smartSearch .ss-dict-term{ flex:none; min-width:5.375rem; color:var(--main-color, #304F4E); font-size:.875rem; }
#smartSearch .ss-dict-def{ color:var(--gray-500, #8a8a8a); font-size:.84rem; line-height:1.65; }

/* ── 진료 링크박스 (정확 매칭) ── */
#smartSearch .ss-proc{
  display:flex; align-items:center; gap:var(--sp-16, 1.0000rem); text-decoration:none;
  background:var(--white,#fff); border:1px solid var(--gray-200,#e9e3d6);
  border-radius:var(--sp-16, 1.0000rem); padding:var(--sp-20, 1.2500rem) var(--sp-22, 1.3750rem); margin:var(--sp-4, 0.2500rem) 0 var(--sp-10, 0.6250rem);
  color:var(--dark,#2c2c2c);
  transition:border-color .25s, box-shadow .25s, transform .25s;
}
#smartSearch .ss-proc:hover{
  border-color:var(--point, #D7AC7A);
  background:color-mix(in srgb, var(--point) 5%, #fff);
  box-shadow:0 var(--sp-12, 0.7500rem) var(--sp-30, 1.8750rem) rgba(0,0,0,.08); transform:translateY(-2px);
}
#smartSearch .ss-ic{
  flex:none; width:var(--sp-52, 3.2500rem); height:var(--sp-52, 3.2500rem); border-radius:50%;
  display:grid; place-items:center; font-size:1.5rem; background:var(--light2, #F6F4EC);
}
#smartSearch .ss-k{ font-size:.78rem; font-weight:700; color:var(--point, #D7AC7A); letter-spacing:.04em; }
#smartSearch .ss-t{ font-size:1.19rem; font-weight:800; color:var(--main-color, #304F4E); }
#smartSearch .ss-arrow{
  margin-left:auto; flex:none; font-size:1.25rem; color:var(--point, #D7AC7A);
  transition:transform .25s;
}
#smartSearch .ss-proc:hover .ss-arrow{ transform:translateX(var(--sp-6, 0.3750rem)); }
#smartSearch .ss-summary{ font-size:.875rem; color:var(--gray-500, #8a8a8a); line-height:1.7; margin:0 var(--sp-4, 0.2500rem) var(--sp-22, 1.3750rem); }

/* ── FAQ ── */
#smartSearch .ss-faqhead{
  display:flex; align-items:baseline; justify-content:space-between; margin:var(--sp-8, 0.5000rem) var(--sp-4, 0.2500rem) var(--sp-10, 0.6250rem);
}
#smartSearch .ss-faqhead h3{ font-size:1rem; font-weight:800; color:var(--main-color, #304F4E); margin:0; }
#smartSearch .ss-faqhead a{ font-size:.78rem; font-weight:700; color:var(--point, #D7AC7A); text-decoration:none; }
#smartSearch .ss-faq{
  background:var(--white,#fff); border:1px solid var(--gray-200,#e9e3d6);
  border-radius:var(--sp-12, 0.7500rem); margin-bottom:var(--sp-8, 0.5000rem); overflow:hidden; transition:border-color .2s;
}
#smartSearch .ss-faq.open{ border-color:var(--point, #D7AC7A); }
#smartSearch .ss-q{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-12, 0.7500rem);
  width:100%; border:0; background:none; cursor:pointer; text-align:left;
  font:inherit; font-size:.9rem; font-weight:700; color:var(--dark,#2c2c2c);
  padding:var(--sp-14, 0.8750rem) var(--sp-18, 1.1250rem);
}
#smartSearch .ss-pm{
  flex:none; width:var(--sp-24, 1.5000rem); height:var(--sp-24, 1.5000rem); border-radius:50%;
  display:grid; place-items:center; font-weight:800;
  background:var(--light2, #F6F4EC); color:var(--main-color, #304F4E);
  transition:transform .25s, background .25s, color .25s;
}
#smartSearch .ss-faq.open .ss-pm{ transform:rotate(45deg); background:var(--point, #D7AC7A); color:var(--white,#fff); }
#smartSearch .ss-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
#smartSearch .ss-a p{ margin:0; padding:0 var(--sp-18, 1.1250rem) var(--sp-16, 1.0000rem); font-size:.84rem; color:var(--gray-500, #8a8a8a); line-height:1.75; }

/* ── 연관진료 ── */
#smartSearch .ss-related{ display:flex; flex-wrap:wrap; gap:var(--sp-8, 0.5000rem); }

/* ── 추론 제안 카드 그리드 ── */
#smartSearch .ss-suggest{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-12, 0.7500rem); margin-top:var(--sp-6, 0.3750rem);
}
@media (max-width:768px){ #smartSearch .ss-suggest{ grid-template-columns:1fr; } }

#smartSearch .ss-sug-card{
  display:flex; align-items:center; gap:var(--sp-14, 0.8750rem); text-decoration:none;
  background:var(--white,#fff); border:1px solid var(--gray-200,#e9e3d6);
  border-radius:var(--sp-14, 0.8750rem); padding:var(--sp-18, 1.1250rem); min-height:6.5rem; color:var(--dark,#2c2c2c);
  animation:ssUp .5s cubic-bezier(.22,.7,.3,1) both;
  transition:border-color .25s, box-shadow .25s, transform .25s;
}
#smartSearch .ss-sug-card:hover{
  border-color:var(--point, #D7AC7A);
  background:color-mix(in srgb, var(--point) 5%, #fff);
  box-shadow:0 var(--sp-12, 0.7500rem) var(--sp-28, 1.7500rem) rgba(0,0,0,.08); transform:translateY(-3px);
}
#smartSearch .ss-sug-ic{
  flex:none; width:var(--sp-44, 2.7500rem); height:var(--sp-44, 2.7500rem); border-radius:50%;
  display:grid; place-items:center; font-size:1.31rem; background:var(--light2, #F6F4EC);
}
#smartSearch .ss-sug-body{ flex:1; min-width:0; }
#smartSearch .ss-sug-eyebrow{
  display:block; font-size:.66rem; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--point, #D7AC7A); margin-bottom:var(--sp-4, 0.2500rem);
}
#smartSearch .ss-sug-name{ display:block; font-size:1rem; font-weight:800; color:var(--main-color, #304F4E); }
#smartSearch .ss-sug-desc{
  display:block; font-size:.78rem; color:var(--gray-500, #8a8a8a); line-height:1.55; margin-top:var(--sp-4, 0.2500rem);
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
#smartSearch .ss-sug-card .ss-arrow{ font-size:1.06rem; }

/* ── hover 툴팁 (ss-tip: 카드 위에 규격 크기로 뜨는 영상+설명 말풍선) ──
   상태변화(hover)라 유틸로 표현 불가 → 별도 CSS (스킬 지침 3순위) */
#smartSearch .ss-hv{ position:relative; overflow:visible; }
#smartSearch .ss-tip{
  position:absolute; left:50%; bottom:calc(100% + var(--sp-12, 0.7500rem));
  transform:translateX(-50%) translateY(var(--sp-6, 0.3750rem)) scale(.96);
  width:17.5rem; z-index:40;
  background:var(--white,#fff); border:1px solid var(--gray-200,#e9e3d6);
  border-radius:var(--sp-14, 0.8750rem);
  box-shadow:0 var(--sp-18, 1.1250rem) var(--sp-44, 2.7500rem) rgba(0,0,0,.18); overflow:hidden;
  opacity:0; pointer-events:none; transition:opacity .22s ease, transform .22s ease;
}
/* 말풍선 꼬리 */
#smartSearch .ss-tip::after{
  content:""; position:absolute; left:50%; top:100%;
  transform:translateX(-50%);
  border:9px solid transparent; border-top-color:var(--white,#fff);
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.06));
}
#smartSearch .ss-hv.play .ss-tip{
  opacity:1; transform:translateX(-50%) translateY(0) scale(1);
}
#smartSearch .ss-tip-media{
  display:block; width:100%; aspect-ratio:16/10; background:var(--dark,#111);
}
#smartSearch .ss-tip-media video{
  width:100%; height:100%; object-fit:cover; display:block;
}
#smartSearch .ss-tip-body{ display:block; padding:var(--sp-10, 0.6250rem) var(--sp-14, 0.8750rem) var(--sp-12, 0.7500rem); }
#smartSearch .ss-tip-name{
  display:block; font-size:.9rem; font-weight:800; color:var(--main-color, #304F4E); margin-bottom:var(--sp-4, 0.2500rem);
}
#smartSearch .ss-tip-desc{
  display:block; font-size:.75rem; color:var(--gray-500, #8a8a8a); line-height:1.55;
}
/* 카드 자체는 hover 시 강조만 (배경 영상 없음) */
#smartSearch .ss-hv.play{ border-color:var(--point, #D7AC7A); box-shadow:0 var(--sp-10, 0.6250rem) var(--sp-26, 1.6250rem) rgba(0,0,0,.09); }

/* 좁은 화면: 툴팁을 카드 폭에 맞춤 */
@media (max-width:768px){
  #smartSearch .ss-tip{ width:min(17.5rem, 86vw); }
}

/* ── 결과 없음 ── */
#smartSearch .ss-empty{
  background:var(--white,#fff); border:1px dashed var(--gray-200,#e9e3d6);
  border-radius:var(--sp-16, 1.0000rem); padding:var(--sp-34, 2.1250rem) var(--sp-24, 1.5000rem); text-align:center;
  font-size:.9rem; line-height:1.8; color:var(--gray-500, #8a8a8a);
}
#smartSearch .ss-empty b{ color:var(--main-color, #304F4E); }
#smartSearch .ss-empty .ss-pop{ margin-top:var(--sp-16, 1.0000rem); }

/* ── 모션 최소화 ── */
@media (prefers-reduced-motion: reduce){
  #smartSearch .ss-seq, #smartSearch .ss-sug-card{ animation:none; }
  #smartSearch .ss-tip, #smartSearch .ss-sug-card,
  #smartSearch .ss-proc, #smartSearch .ss-chip{ transition:none; }
  #smartSearch .ss-cursor{ animation:none; }
}