@charset "UTF-8";
/**
 * kg-skin.css — 디자인 템플릿(koreagift-AI-search) ↔ 실제 위젯 DOM 매핑 스킨.
 *
 * 배경: 디자인 템플릿은 **인트로/빈 상태만** 디자인되어 있다(ai-mode.css 셀렉터 8개 전부
 * 인트로용, img-search-result-test.html 의 .product_lists 는 빈 div + CSS 없음).
 * 반면 kg-demo 는 실제 백엔드에 붙어 동작해야 하므로 답변·상품카드는 기존 위젯
 * (kg-ai-chat.js / kg-image-search-results.js)이 계속 렌더한다.
 *
 * 그래서 이 파일은 **위젯이 그리는 DOM 을 템플릿 디자인 값으로 다시 입힌다**:
 *   .kgc-title  ← .ai-mode-title        .kgr-title ← .image-result-title
 *   .kgc-start  ← .ai-chat-intro        .kgr-layout/.kgr-side ← .image-result-*
 *   .kgc-hero   ← .ai-chat-heading      .kgr-drop  ← .result-upload-zone
 *   .kgc-input  ← .ai-question-form     .kgr-recent ← .recent-search-list
 *   .kgc-suggest ← .ai-question-suggestions
 * 값(px·색·radius)은 템플릿 CSS 에서 그대로 가져왔다. 위젯 원본(production)은 건드리지 않는다.
 *
 * 답변 말풍선·상품카드는 템플릿에 디자인이 없으므로 위젯 기본 스타일을 유지한다.
 */

/* ─────────────────────────────────────────────────────────────
   notokr 웹폰트 — 시안(02/03.jpg)이 사용한 폰트.

   koreagift 의 font.css 도 `notokr` 를 @font-face 로 선언하지만, 폰트 파일 URL 이
   koreagift.com 이라 **다른 도메인에서 열면 CORS 로 차단**된다(CSS 는 로드되지만
   폰트 파일만 막혀 status=error → 시스템 기본 산세리프로 폴백). 그래서 같은 폰트를
   로컬에 self-host 해 다시 선언한다. 이 파일이 koreagift font.css 뒤에 링크되므로
   동일 family/weight 에 대해 **이 선언이 이긴다**.
   ───────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'notokr';
  src: url('assets/fonts/notokr-regular.woff2') format('woff2'),
       url('assets/fonts/notokr-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'notokr';
  /* 700 파일 하나로 700~900 을 커버 — 카드 가격(800)이 합성 볼드로 뭉개지지 않게 */
  src: url('assets/fonts/notokr-700.woff2') format('woff2');
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

/* 위젯 전체를 notokr 로 통일.
   `#kgr *` / `#kgc *`(특이도 1,0,1)로 지정하는 이유: koreagift 의
   `default_v2_prev.css` 에 `A:link{font-family:돋움,Dotum,굴림}`(0,1,1)이 있고
   카드가 <a> 라서, 위젯 루트에서 상속시키는 방식으로는 덮이지 않는다
   (직접 매칭이 상속을 항상 이김). !important 없이 특이도로만 해결. */
#kgr, #kgr *,
#kgc, #kgc * {
  font-family: 'notokr', 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', sans-serif;
}

/* 본문 컨테이너 폭 = 디자인 시안 실측값.
   02.jpg/03.jpg(둘 다 1904px 기준)에서 본문 콘텐츠는 x=295..1610 → **1316px, 가운데 정렬**.
   koreagift 헤더 컨테이너(`.body__container` = 1164px)보다 넓은 것이 시안의 의도라
   본문에는 이 전용 컨테이너를 쓴다(헤더는 계속 1164px).
   내부 분해: 사이드바 369 + 간격 20 + 그리드 927(4열 × 217 + 간격 20×3) = 1316. */
.kg-content {
  width: 1316px;
  max-width: calc(100% - 30px);
  margin: 0 auto;
}

/* 데모 워터마크(실사이트 아님 표시) */
.kg-demo-badge {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 9999;
  background: rgba(17, 24, 39, .82);
  color: #fff;
  font-size: 11.5px;
  padding: 7px 12px;
  border-radius: 18px;
  letter-spacing: .2px;
  font-family: notokr, 'Malgun Gothic', sans-serif;
}

/* ─────────────────────────────────────────────────────────────
   AI 모드 (kg-ai-chat.js) ← ai-mode.css
   ───────────────────────────────────────────────────────────── */

/* 타이틀: 템플릿은 아이콘 이미지 + "AI 모드"(24px/700, 남색, AI 만 파란색) */
#kgc .kgc-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 30px 0;
  font-size: 24px;
  font-weight: 700;
  color: #031238;
}
#kgc .kgc-title .t1 { color: #2374f7; }
#kgc .kgc-title .t2 { color: #031238; font-weight: 700; }
/* 위젯의 SVG 배지 → 템플릿 아이콘 이미지로 교체 */
#kgc .kgc-title .badge {
  width: 30px;
  height: 30px;
  border-radius: 0;
  background: url("assets/img/icon_ai-mode.png") no-repeat center / contain;
}
#kgc .kgc-title .badge svg { display: none; }

/* 인트로 블록 */
#kgc .kgc-start {
  width: 730px;
  max-width: 100%;
  margin: 95px auto 0;
  text-align: left;
}
#kgc .kgc-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 30px;
}
#kgc .kgc-hero img {
  width: 90px;
  height: 90px;
  margin-right: 5px;
  object-fit: cover;
  object-position: center;
}
#kgc .kgc-hero .h {
  font-size: 30px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -1.6px;
  color: #111;
}

/* 질문 입력창 — 03.jpg 실측: 박스 730×93, 라운드, 텍스트 좌측 여백 ~20px */
#kgc .kgc-inputwrap { position: relative; max-width: none; margin: 0; }
#kgc .kgc-input {
  /* 03.jpg 실측 730×93. 위젯 textarea 는 rows=2(=25.6px×2)라 상/하 여백 20px 로 93 에 맞춘다.
     우측 여백은 전송 아이콘(25px+여백) 자리를 비워 텍스트가 아이콘 아래로 흐르지 않게 58px.
     display:block — inline 기본값이면 wrap 하단에 4px 여백이 생겨 아이콘 위치가 밀린다. */
  display: block;
  width: 100%;
  height: 93px;
  padding: 20px 58px 20px 20px;
  border: 1px solid #d1d1d1;
  border-radius: 28px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.6;
  resize: none;
  overflow-y: auto;
}
#kgc .kgc-input::placeholder { color: #b5b5b5; }
#kgc .kgc-input:focus {
  border-color: #8ebbf4;
  box-shadow: 0 0 0 3px rgba(46, 127, 238, .09);
}
/* 전송 버튼 = 템플릿 icon_send.png.
   03.jpg 실측: 아이콘 25×25, 박스 우측에서 25px / 하단에서 16px (위젯 기본 SVG 숨김) */
#kgc .kgc-send {
  right: 25px;
  bottom: 16px;
  width: 25px;
  height: 25px;
  padding: 0;
  background: url("assets/img/icon_send.png") no-repeat center / contain;
}
#kgc .kgc-send svg { display: none; }
/* 세션 리셋은 템플릿에 없는 기능 — 인트로에서는 감추고 대화 뷰에서만 전송 버튼 위에 */
#kgc .kgc-start .kgc-reset { display: none; }
#kgc .kgc-chat .kgc-reset { right: 27px; bottom: 50px; width: 20px; height: 20px; }
#kgc .kgc-chat .kgc-reset svg { width: 17px; height: 17px; }

/* 대화 뷰 폭은 위젯 기본값(860px, 가운데 정렬)을 그대로 둔다 — 페이지 컨테이너는
   1316px 이지만 대화(말풍선/상품 그리드)는 읽기 편한 기존 폭을 유지한다는 결정. */

/* 추천 질문: 템플릿은 가운데 정렬 그리드 + icon_suggest.png + 17px 회색 */
#kgc .kgc-suggests {
  display: grid;
  gap: 16px;
  width: fit-content;
  max-width: 100%;
  margin: 40px auto;
  text-align: left;
}
#kgc .kgc-suggest {
  width: max-content;
  max-width: 100%;
  gap: 10px;
  padding: 0;
  color: #aaa;
  font-size: 17px;
  line-height: 1.35;
  border-radius: 0;
}
#kgc .kgc-suggest:hover { background: transparent; color: #5d85b7; }
#kgc .kgc-suggest svg {
  width: 16px;
  height: 16px;
  flex: none;
  stroke: none;
  background: url("assets/img/icon_suggest.png") no-repeat center / contain;
}
#kgc .kgc-suggest svg * { display: none; }

/* ─────────────────────────────────────────────────────────────
   이미지 검색 결과 (kg-image-search-results.js) ← image-search-result.css
   ───────────────────────────────────────────────────────────── */

#kgr .kgr-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 30px 0;
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
  color: #031238;
}
#kgr .kgr-title .t1 { color: #2374f7; }
#kgr .kgr-title .t2 { color: #031238; font-weight: 700; }
#kgr .kgr-title .badge {
  width: 30px;
  height: 30px;
  border-radius: 0;
  background: url("assets/img/icon_imgSearch.png") no-repeat center / contain;
}
#kgr .kgr-title .badge svg { display: none; }

/* 2단 레이아웃: 좌 369px 고정 + 우 나머지 */
#kgr .kgr-layout {
  display: grid;
  grid-template-columns: 369px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

/* 좌측 사이드바 = 카드(테두리+라운드) */
#kgr .kgr-side {
  box-sizing: border-box;
  width: auto;
  padding: 20px 36px;
  border: 1px solid #dfe4eb;
  border-radius: 12px;
  background: #fff;
}
/* 업로드한 이미지 프레임 */
#kgr .kgr-side-img {
  display: block;
  width: 100%;
  height: 297px;
  object-fit: contain;
  background: #f7f7f7;
  border-radius: 0;
}
/* 재업로드 드롭존 */
#kgr .kgr-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 140px;
  margin-top: 18px;
  padding: 0;
  box-sizing: border-box;
  border: 1.5px dashed #189bf6;
  border-radius: 12px;
  background: #f4f7fe;
  color: #6f747d;
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
  cursor: pointer;
}
#kgr .kgr-drop.drag { background: #edf6ff; border-color: #006ce5; }
#kgr .kgr-drop .lines { font-size: 13px; line-height: 1.7; color: #6f747d; }
#kgr .kgr-drop .lines a { color: #1770d8; text-decoration: underline; }
/* 위젯 기본 업로드 SVG → 템플릿 icon_upload.png */
#kgr .kgr-drop > svg {
  width: 38px;
  height: 38px;
  margin-bottom: 6px;
  stroke: none;
  background: url("assets/img/icon_upload.png") no-repeat center / contain;
}
#kgr .kgr-drop > svg * { display: none; }

/* 최근 검색 */
#kgr .kgr-recent-title {
  margin: 18px 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: #000;
}
#kgr .kgr-recent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
#kgr .kgr-recent img {
  width: 100%;
  height: 70px;
  object-fit: cover;
  border: 1px solid #dfe3e8;
  border-radius: 0;
  cursor: pointer;
}

/* 우측 결과 영역 */
#kgr .kgr-main { min-height: 600px; }
#kgr .kgr-sec {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 700;
  color: #000;
}
#kgr .kgr-sec .sub,
#kgr .kgr-sec span:not(.icon) {
  font-size: 14px;
  font-weight: 400;
  color: #898989;
}
/* 섹션 헤딩 앞 스파클 아이콘 */
#kgr .kgr-sec > svg:first-child {
  width: 20px;
  height: 20px;
  stroke: none;
  background: url("assets/img/icon_sparkling.png") no-repeat center / contain;
}
#kgr .kgr-sec > svg:first-child * { display: none; }