/* 찾기 화면 — 검색줄 · 약 카드 · 낱알 · 상세 창 */

.searchbar{display:flex; gap:8px; margin-bottom:18px; max-width:620px}
.searchbar .input{flex:1}
.searchbar .btn{white-space:nowrap}

/* 약 카드 */
.d-list{display:flex; flex-direction:column; gap:8px}
.d-card{
  display:flex; gap:13px; align-items:flex-start; width:100%; text-align:left;
  background:var(--card); border:1px solid var(--bd); border-radius:var(--r);
  padding:13px 15px; cursor:pointer; font:inherit; color:inherit;
  transition:border-color .12s, transform .12s;
}
.d-card:hover{border-color:var(--green); transform:translateY(-1px)}
.d-thumb{
  width:52px; height:52px; flex:0 0 52px; border-radius:8px; object-fit:contain;
  background:var(--chip); padding:3px;
}
.d-thumb.none{
  display:flex; align-items:center; justify-content:center;
  color:var(--tx3); font-size:19px;
}
.d-body{min-width:0; flex:1}
.d-name{font-size:14.5px; font-weight:700; line-height:1.4; word-break:keep-all}
.d-sub{font-size:12px; color:var(--tx2); margin-top:3px; line-height:1.5}
.d-chips{display:flex; flex-wrap:wrap; gap:5px; margin-top:9px}

/* 낱알 */
.pill-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:10px}
.pill{
  background:var(--card); border:1px solid var(--bd); border-radius:var(--r);
  padding:12px; cursor:pointer; font:inherit; color:inherit; text-align:center;
  transition:border-color .12s, transform .12s;
}
.pill:hover{border-color:var(--green); transform:translateY(-1px)}
.pill img{width:100%; height:74px; object-fit:contain; margin-bottom:9px}
.pill-name{font-size:12.5px; font-weight:700; line-height:1.4; word-break:keep-all}
.pill-sub{font-size:11px; color:var(--tx2); margin-top:3px}
.pill-mark{font-size:10.5px; color:var(--tx3); margin-top:5px; font-family:var(--font-num)}

/* 쪽 넘기기 */
.pager{display:flex; align-items:center; justify-content:center; gap:12px; margin-top:18px; font-size:12.5px; color:var(--tx2)}
.pager .btn-sm{margin:0}
.pager .btn-sm:disabled{opacity:.4; cursor:default}

.backline{
  display:flex; align-items:center; gap:10px; margin-bottom:14px;
  font-size:13.5px; color:var(--tx2);
}
.backline b{color:var(--tx); font-family:var(--font-num)}

.linklike{
  background:none; border:0; padding:0; font:inherit; color:var(--tx);
  cursor:pointer; text-align:left; font-weight:600;
}
.linklike:hover{color:var(--green); text-decoration:underline}

/* 약가 막대 */
.bar{background:var(--chip); border-radius:20px; height:8px; overflow:hidden}
.bar i{display:block; height:100%; background:var(--green); border-radius:20px}

/* 상세 큰 창 */
.modal.big{align-items:flex-start; padding:0}
.modal.big .big-box{
  background:var(--bg); width:100%; max-width:900px; margin:0 auto;
  min-height:100vh; display:flex; flex-direction:column;
}
.big-head{
  background:var(--card); border-bottom:1px solid var(--bd);
  padding:14px 20px; display:flex; align-items:center; gap:14px;
  position:sticky; top:0; z-index:2;
}
.big-head h3{font-size:15.5px; font-weight:700; margin:0; flex:1; line-height:1.4; word-break:keep-all}
.big-body{padding:18px 20px 60px}

.dt-head{display:flex; gap:16px; align-items:flex-start; margin-bottom:18px}
.dt-img{
  width:104px; height:104px; flex:0 0 104px; object-fit:contain;
  background:var(--card); border:1px solid var(--bd); border-radius:var(--r); padding:6px;
}
.dt-meta{min-width:0; flex:1}
.dt-sub{font-size:13px; color:var(--tx2)}
.dt-ingr{font-size:12.5px; color:var(--tx3); margin-top:3px; font-family:var(--font-num)}
.dt-tabs{margin-bottom:16px}
.dt-tabs b{font-family:var(--font-num); opacity:.75; margin-left:2px}

.doc{margin-bottom:20px}
.doc h4{
  font-size:12px; font-weight:800; letter-spacing:.1em; color:var(--green);
  margin:0 0 8px; padding-bottom:6px; border-bottom:1px solid var(--gold);
}
.doc pre{
  margin:0; font-family:var(--font); font-size:13px; line-height:1.85;
  color:var(--tx2); white-space:pre-wrap; word-break:break-word;
}

@media (max-width:640px){
  .searchbar{flex-wrap:wrap}
  .dt-head{gap:12px}
  .dt-img{width:76px; height:76px; flex:0 0 76px}
  .big-body{padding:14px 15px 70px}
  .big-head{padding:12px 15px}
}

/* 내 회사 제품 — 위로 올리되 숨기지 않고 드러낸다 */
.d-card.mine{background:var(--gold-soft); border-color:var(--gold)}
.mine-row td{background:var(--gold-soft)}
.mine-tag{
  display:inline-block; font-size:10px; font-weight:800; letter-spacing:.06em;
  color:#3d2f13; background:var(--gold); border-radius:20px;
  padding:2px 7px; margin-right:5px; vertical-align:1px; white-space:nowrap;
}

/* 즐겨찾기 별 — 상세 창 머리 */
.star{border:0; background:none; cursor:pointer; padding:2px; line-height:0}
.star svg{width:22px; height:22px; fill:none; stroke:var(--tx3); stroke-width:1.6;
          stroke-linejoin:round; transition:.12s}
.star:hover svg{stroke:var(--gold)}
.star.on svg{fill:var(--gold); stroke:var(--gold)}

/* 즐겨찾기 목록 */
.fav-row{display:flex; align-items:center; gap:12px; background:var(--card);
         border:1px solid var(--bd); border-radius:var(--r); padding:13px 15px; margin-bottom:8px}
.fav-row:hover{border-color:var(--green)}
.fav-row .d-card{cursor:pointer}
.fav-row .d-card:hover{transform:none}
.fav-memo{font-size:12px; color:var(--gold); margin-top:6px; line-height:1.5}
.fav-memo::before{content:"메모 · "; color:var(--tx3)}
.fav-acts{display:flex; gap:4px; flex-shrink:0}
@media (max-width:640px){
  .fav-row{flex-wrap:wrap}
  .fav-acts{width:100%; justify-content:flex-end}
}