/* ============================================================================
 * smartsearch.css — 스마트서치 통합 스타일
 *   대상: search_smart.php (통합검색 결과) + dict.php (용어사전)
 *   색상: setting.css 변수 사용 (--main-color, --point, --light, --gray-* 등)
 *   ※ search_box.php(위젯)는 자체 <style> 유지 — 이 파일에 미포함
 *   로드: head_sub.php 등에서 <link rel="stylesheet" href="/css/smartsearch.css">
 * ========================================================================== */

/* ───────────────────────────────────────────────
 * search_smart.php — 통합검색 결과 페이지
 * ─────────────────────────────────────────────── */
#smartSearch{--ss-pine:var(--main-color);--ss-pine-soft:var(--light2);--ss-gold:var(--point);--ss-line:var(--gray-300);--ss-paper:var(--light);--ss-ink:var(--dark);--ss-soft:var(--gray-600)}
  .ss-wrap{max-width:720px;margin:0 auto;padding:48px 18px 90px}
  .ss-brand{font-size:12px;letter-spacing:.18em;color:var(--ss-pine);font-weight:700}
  .ss-lead{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:6px 0 22px;color:var(--ss-ink)}
  .ss-form{display:flex;gap:8px;background:var(--ss-paper);border:1px solid var(--ss-line);border-radius:999px;padding:7px 7px 7px 20px;box-shadow:0 12px 30px -18px rgba(31,42,42,.35)}
  .ss-form input{flex:1;border:0;background:transparent;outline:0;font:inherit;font-size:16px;color:var(--ss-ink)}
  .ss-form button{border:0;cursor:pointer;border-radius:999px;background:var(--ss-pine);color:#fff;font:inherit;font-weight:700;padding:11px 22px}
  .ss-form button:hover{background:color-mix(in srgb, var(--main-color) 85%, #000)}
  .ss-seq{opacity:0;transform:translateY(8px);animation:ssRise .5s ease forwards}
  @keyframes ssRise{to{opacity:1;transform:none}}
  .ss-answer{font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--ss-ink);min-height:30px;line-height:1.5;margin-top:30px}
  .ss-cursor{display:inline-block;width:2px;height:1.05em;vertical-align:-2px;background:var(--ss-pine);margin-left:2px;animation:ssBlink .9s steps(1) infinite}
  @keyframes ssBlink{50%{opacity:0}}
  .ss-card{background:var(--ss-paper);border:1px solid var(--ss-line);border-radius:18px;box-shadow:0 12px 30px -20px rgba(31,42,42,.3);padding:20px 22px;margin-top:16px}
  .ss-wiki{border-left:3px solid var(--ss-gold)}
  .ss-wiki .ss-tag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--ss-gold);margin-bottom:8px}
  .ss-wiki .ss-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ss-gold)}
  .ss-wiki p{margin:0;color:var(--ss-soft);font-size:15px}
  .ss-wiki .ss-src{margin-top:12px;font-size:12.5px;color:var(--gray-500)}
  .ss-wiki .ss-src a{color:var(--ss-gold);text-decoration:none}
  .ss-dict{border-left:3px solid var(--ss-pine)}
  .ss-dict .ss-tag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--ss-pine);margin-bottom:10px}
  .ss-dict .ss-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ss-pine)}
  .ss-dict-row{padding:8px 0;border-top:1px solid var(--ss-line)}
  .ss-dict-row:first-of-type{border-top:0}
  .ss-dict-term{display:block;color:var(--ss-ink);font-size:14.5px;font-weight:800;margin-bottom:3px}
  .ss-dict-def{color:var(--ss-soft);font-size:14px;line-height:1.55}
  a.ss-proc{display:flex;align-items:center;gap:16px;text-decoration:none;background:var(--ss-pine);color:#fff;border-radius:18px;padding:20px 22px;margin-top:16px;box-shadow:0 12px 30px -20px rgba(31,94,84,.7);transition:transform .15s ease}
  a.ss-proc:hover{transform:translateY(-2px)}
  a.ss-proc .ss-ic{flex:none;width:46px;height:46px;border-radius:13px;background:rgba(255,255,255,.14);display:grid;place-items:center;font-size:22px}
  a.ss-proc .ss-k{font-size:12px;opacity:.85}
  a.ss-proc .ss-t{font-size:18px;font-weight:800;letter-spacing:-.01em;margin-top:1px;color:#fff}
  a.ss-proc .ss-arrow{margin-left:auto;font-size:20px;transition:transform .15s ease}
  a.ss-proc:hover .ss-arrow{transform:translateX(4px)}
  .ss-summary{color:var(--ss-soft);font-size:14px;margin:10px 4px 0}
  .ss-faqhead{display:flex;align-items:baseline;justify-content:space-between;margin:26px 4px 10px}
  .ss-faqhead h3{margin:0;font-size:15px;font-weight:800;color:var(--ss-ink)}
  .ss-faqhead a{font-size:13px;color:var(--ss-pine);text-decoration:none;font-weight:600}
  .ss-faq{background:var(--ss-paper);border:1px solid var(--ss-line);border-radius:14px;margin-top:10px;overflow:hidden}
  .ss-q{width:100%;text-align:left;border:0;background:transparent;cursor:pointer;font:inherit;font-size:15px;font-weight:700;color:var(--ss-ink);padding:15px 18px;display:flex;justify-content:space-between;align-items:center;gap:12px}
  .ss-q .ss-pm{flex:none;color:var(--ss-pine);font-size:18px;transition:transform .2s ease}
  .ss-faq.open .ss-pm{transform:rotate(45deg)}
  .ss-a{max-height:0;overflow:hidden;transition:max-height .28s ease}
  .ss-a p{margin:0;padding:0 18px 16px;color:var(--ss-soft);font-size:14.5px;white-space:pre-line}
  .ss-related{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
  .ss-chip{border:1px solid var(--ss-line);background:var(--ss-paper);color:var(--ss-soft);font-size:13px;border-radius:999px;padding:8px 14px;text-decoration:none}
  .ss-chip:hover{border-color:var(--ss-pine);color:var(--ss-pine)}
  .ss-empty{color:var(--ss-soft);background:var(--ss-paper);border:1px dashed var(--ss-line);border-radius:18px;padding:28px;text-align:center;margin-top:30px}
  .ss-pop{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
  .ss-suggest{display:flex;flex-direction:column;gap:10px;margin-top:16px}
  a.ss-sug-card{display:flex;align-items:center;gap:14px;text-decoration:none;background:var(--ss-paper);border:1px solid var(--ss-line);border-radius:16px;padding:16px 18px;box-shadow:0 10px 24px -20px rgba(31,42,42,.3);opacity:0;transform:translateY(8px);animation:ssRise .5s ease forwards;transition:transform .15s ease,border-color .2s ease}
  a.ss-sug-card:hover{transform:translateY(-2px);border-color:var(--ss-pine)}
  a.ss-sug-card .ss-sug-ic{flex:none;width:40px;height:40px;border-radius:11px;background:var(--ss-pine-soft);display:grid;place-items:center;font-size:19px}
  .ss-sug-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
  .ss-sug-name{font-size:16px;font-weight:800;color:var(--ss-ink);letter-spacing:-.01em}
  .ss-sug-desc{font-size:13px;color:var(--ss-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  a.ss-sug-card .ss-arrow{flex:none;color:var(--ss-pine);font-size:18px;transition:transform .15s ease}
  a.ss-sug-card:hover .ss-arrow{transform:translateX(4px)}

/* ───────────────────────────────────────────────
 * dict.php — 치과 용어사전
 * ─────────────────────────────────────────────── */
:root{ --dd-ink:var(--dark); --dd-soft:var(--gray-600); --dd-line:var(--gray-300); --dd-paper:var(--light); --dd-pine:var(--main-color); --dd-gold:var(--point); }
  .dd-wrap{max-width:920px;margin:0 auto;padding:48px 20px 90px}
  .dd-head{text-align:center;margin-bottom:34px}
  .dd-head h1{font-size:30px;font-weight:800;color:var(--dd-ink);margin:0 0 8px}
  .dd-head p{color:var(--dd-soft);font-size:15px;margin:0}
  .dd-search{display:flex;gap:6px;align-items:center;background:#fff;border:1px solid var(--dd-line);border-radius:999px;padding:6px 6px 6px 18px;max-width:460px;margin:22px auto 0}
  .dd-search input{flex:1;border:0;outline:0;font:inherit;font-size:15px;background:transparent}
  .dd-search button{flex:none;width:40px;height:40px;border:0;border-radius:50%;background:var(--dd-pine);color:#fff;display:grid;place-items:center;cursor:pointer}
  .dd-search .material-symbols-outlined{font-size:20px}
  .dd-tabs{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:28px 0 30px}
  .dd-tab{min-width:38px;height:38px;padding:0 10px;border-radius:10px;border:1px solid var(--dd-line);background:#fff;color:var(--dd-soft);font-size:15px;font-weight:700;display:grid;place-items:center;text-decoration:none;cursor:pointer}
  .dd-tab:hover{border-color:var(--dd-pine);color:var(--dd-pine)}
  .dd-tab.active{background:var(--dd-pine);border-color:var(--dd-pine);color:#fff}
  .dd-tab.off{opacity:.4;pointer-events:none}
  .dd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
  .dd-card{display:block;background:#fff;border:1px solid var(--dd-line);border-radius:14px;padding:16px 18px;text-decoration:none;transition:.15s}
  .dd-card:hover{border-color:var(--dd-pine);box-shadow:0 8px 20px rgba(31,94,84,.08);transform:translateY(-1px)}
  .dd-card .t{font-size:16px;font-weight:800;color:var(--dd-ink);margin-bottom:5px}
  .dd-card .d{font-size:13px;color:var(--dd-soft);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .dd-sec-h{font-size:14px;font-weight:800;color:var(--dd-gold);margin:0 4px 12px;letter-spacing:.04em}
  .dd-empty{text-align:center;color:var(--gray-500);padding:60px 0;font-size:15px}
  /* 상세 */
  .dd-detail{background:#fff;border:1px solid var(--dd-line);border-radius:20px;padding:34px 32px}
  .dd-detail .dterm{font-size:28px;font-weight:800;color:var(--dd-ink);margin:0 0 6px}
  .dd-detail .dsyn{color:var(--dd-soft);font-size:14px;margin:0 0 22px}
  .dd-detail .ddef{font-size:17px;line-height:1.7;color:var(--dd-ink);padding:18px 0;border-top:2px solid var(--dd-pine)}
  .dd-detail .dmore{font-size:15px;line-height:1.7;color:var(--dd-soft);margin-top:8px}
  .dd-detail .dsrc{margin-top:18px;font-size:13px;color:var(--gray-500)}
  .dd-detail .dsrc a{color:var(--dd-gold);text-decoration:none}
  .dd-rel{margin-top:26px;padding-top:22px;border-top:1px solid var(--dd-line)}
  .dd-rel h3{font-size:14px;font-weight:800;color:var(--dd-ink);margin:0 0 12px}
  .dd-rel-list{display:flex;flex-wrap:wrap;gap:8px}
  .dd-rel-list a{display:inline-flex;align-items:center;gap:6px;background:var(--dd-paper);border:1px solid var(--dd-line);border-radius:999px;padding:8px 16px;font-size:14px;color:var(--dd-pine);text-decoration:none;font-weight:600}
  .dd-rel-list a:hover{background:var(--dd-pine);color:#fff;border-color:var(--dd-pine)}
  .dd-back{display:inline-flex;align-items:center;gap:5px;color:var(--dd-soft);text-decoration:none;font-size:14px;margin-bottom:20px}
  .dd-back:hover{color:var(--dd-pine)}