@charset "UTF-8";

/* ============================================================
 * AI 통합검색 — PC (헤더 인풋 + 결과 드롭다운)
 * 디자인 토큰: common/pc/css/tokens.css
 * ============================================================ */

/* 절대배치 기준점 = .inner (1200 콘텐츠 컨테이너).
 * 주의: .menu_wrap 에 position 을 주면 mega_menu_wrap(절대배치)의 기준점을 가로채
 *       메가메뉴가 829px 로 축소·이동하며 깨진다. 반드시 .inner 를 기준으로 둔다. */
.header_wrap .inner { position: relative; }

/* ----- 헤더 검색 인풋 (고객센터 우측) ----- */
.ai_search_box {
	position: absolute; right: 0; top: 50%; transform: translateY(-50%);
	display: flex; align-items: center;
	width: 124px; height: 38px;
	background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
	overflow: hidden; box-sizing: border-box;
}
.ai_search_box:focus-within { border-color: var(--brand-accent); box-shadow: 0 0 0 3px rgba(34, 144, 207, .15); }
.ai_search_box_input {
	flex: 1; min-width: 0; height: 100%;
	border: 0; outline: none; background: transparent;
	padding: 0 4px 0 14px; font-size: 14px; font-family: var(--font-sans); color: var(--text-primary);
}
.ai_search_box_input::placeholder { color: var(--text-muted); }
.ai_search_box_btn {
	flex: none; width: 34px; height: 100%;
	display: inline-flex; align-items: center; justify-content: center;
	border: 0; background: transparent; color: var(--brand-primary); cursor: pointer;
}
.ai_search_box_btn svg { width: 18px; height: 18px; display: block; }
.ai_search_box_btn:hover { color: var(--brand-accent); }
/* outline 제거(요청) — 포커스 표시는 .ai_search_box:focus-within 의 링이 담당. */
.ai_search_box_btn:focus-visible { outline: none; }

/* ----- 결과 드롭다운 ----- */
.ai_search_panel.is-dropdown {
	position: absolute; top: 114px; right: 0; width: 460px; max-width: 90vw;
	max-height: 72vh; overflow-y: auto;
	background: var(--surface); border: 1px solid var(--border);
	border-radius: var(--r-md); box-shadow: var(--shadow-3);
	z-index: 1000; padding: var(--sp-4); box-sizing: border-box;
	font-family: var(--font-sans); color: var(--text-primary); text-align: left;
}
.ai_search_panel.is-dropdown[hidden] { display: none; }
.ai_search_panel_head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); }
.ai_search_panel_title { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--brand-primary); }
.ai_search_panel_close {
	width: 28px; height: 28px; font-size: 20px; line-height: 1;
	background: transparent; border: 0; color: var(--text-muted); cursor: pointer; border-radius: var(--r-sm);
}
.ai_search_panel_close:hover { color: var(--text-primary); background: var(--surface-alt); }
.ai_search_panel_close:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ----- 메타 ----- */
.ai_search_meta { margin: 0 0 var(--sp-2); min-height: 16px; font-size: 12px; color: var(--text-muted); }

/* ----- AI 요약 카드 ----- */
.ai_search_card {
	border: 1px solid #CFE2F5; border-radius: var(--r-md);
	background: var(--surface-alt); padding: var(--sp-3); margin-bottom: var(--sp-3);
}
.ai_search_card_head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2);
	font-size: 12px; font-weight: var(--fw-bold); color: var(--brand-accent); }
.ai_search_dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-accent); }
.ai_search_card_body { font-size: var(--fs-small); line-height: var(--lh-body); white-space: pre-wrap; word-break: break-word; }
.ai_search_card.is-loading .ai_search_card_body { color: var(--text-muted); }
.ai_search_card_engine, .ai_search_card_src { margin-top: var(--sp-2); font-size: 11px; color: var(--text-muted); }
.ai_search_spinner {
	width: 12px; height: 12px; border: 2px solid #C9DEFB; border-top-color: var(--brand-accent);
	border-radius: 50%; display: inline-block; animation: ai_search_spin .8s linear infinite; vertical-align: -2px;
}
@keyframes ai_search_spin { to { transform: rotate(360deg); } }

/* ----- 결과 목록 ----- */
.ai_search_list { list-style: none; margin: 0; padding: 0; }
.ai_search_result {
	border: 1px solid var(--border); border-radius: var(--r-md);
	padding: var(--sp-3); margin-bottom: var(--sp-2);
}
.ai_search_result:last-child { margin-bottom: 0; }
.ai_search_result_top { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-1); flex-wrap: wrap; }
.ai_search_badge { font-size: 11px; font-weight: var(--fw-bold); color: var(--text-inverse); padding: 2px 8px; border-radius: var(--r-sm); background: var(--text-muted); }
.ai_search_badge.COMPANY { background: var(--brand-primary); }
.ai_search_badge.PRODUCT { background: var(--brand-accent); }
.ai_search_badge.NEWS    { background: #7A3FF2; }
.ai_search_badge.NOTICE  { background: #B9770A; }
.ai_search_result_title { font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--text-primary); text-decoration: none; word-break: break-word; }
a.ai_search_result_title:hover { color: var(--brand-accent); text-decoration: underline; }
.ai_search_result_date { margin-left: auto; font-size: 11px; color: var(--text-muted); }
.ai_search_snippet { margin: 0; font-size: 12px; color: var(--text-secondary); line-height: var(--lh-body); word-break: break-word; }
.ai_search_snippet em { background: #FFF2A8; font-style: normal; padding: 0 2px; border-radius: 3px; }
.ai_search_score { margin-top: var(--sp-1); font-size: 11px; color: var(--text-muted); }

.ai_search_empty { list-style: none; text-align: center; color: var(--text-muted); padding: var(--sp-8) 0; font-size: var(--fs-small); }