/* =============================================================
 * Components — single entry point for all UI primitives.
 * Pages link this once after tokens.css and base.css.
 * Order matters when rules compete; keep layout-agnostic first.
 * ============================================================= */

@import "./components/button.css?v=6c90da66";
@import "./components/btn-icon.css?v=6c90da66";
@import "./components/badge.css?v=6c90da66";
@import "./components/form.css?v=6c90da66";
@import "./components/form-control.css?v=6c90da66";
@import "./components/doc-upload.css?v=6c90da66";
@import "./components/info-box.css?v=6c90da66";
@import "./components/img-drop.css?v=6c90da66";
@import "./components/card.css?v=6c90da66";
@import "./components/table.css?v=6c90da66";
@import "./components/pagination.css?v=6c90da66";
@import "./components/accordion.css?v=6c90da66";
@import "./components/nav.css?v=6c90da66";
@import "./components/sidebar.css?v=6c90da66";
@import "./components/modal.css?v=6c90da66";
@import "./components/popup.css?v=6c90da66";
@import "./components/rating.css?v=6c90da66";
@import "./components/language-selector.css?v=6c90da66";
@import "./components/filter.css?v=6c90da66";
@import "./components/header.css?v=6c90da66";
@import "./components/footer.css?v=6c90da66";
@import "./components/done-page.css?v=6c90da66";

/* =============================================================
 * 모드 전환 안내 (RD-035 D-14)
 * "상단 색상이 바뀌는 것만으로는 인지가 어렵다" — 전환 직후 한 번만
 * 띄우고 스스로 사라진다. 계속 남으면 화면을 가리고, 사라진 뒤에도
 * 헤더 토글이 현재 상태를 말해 준다.
 * ============================================================= */
.mode-toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-12);
  transform: translateX(-50%);
  z-index: calc(var(--z-header) + 20);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-8);
  border-radius: var(--radius-full);
  background: var(--color-gray-900);
  color: var(--color-white);
  font: var(--font-body1-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
  white-space: nowrap;
  animation: mode-toast-in .18s ease;
}
.mode-toast__icon { width: 26px; height: 26px; flex-shrink: 0; color: var(--color-primary-200); }
.mode-toast--seller .mode-toast__icon { color: #ffd08a; }
.mode-toast b { font: var(--font-h4); }
.mode-toast b { color: var(--color-primary-200); }
.mode-toast--seller b { color: #ffd08a; }
.mode-toast.is-out { opacity: 0; transition: opacity .45s ease; }

@keyframes mode-toast-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* =============================================================
 * 본문에 섞여 저장된 라벨/값 (RD-036 4차 #4 후속)
 *
 * 1:1 문의 테이블에 부서·직책·유형 칸이 없어서, 접수 화면이 그 값들을
 * 본문 맨 앞에 `[부서] 영업1팀` 처럼 붙여 한 덩어리로 저장한다. 화면에
 * 그대로 뿌리면 다섯 줄이 전부 같은 크기·색이라 라벨과 값이 붙어 보인다.
 *
 * `gachi.taggedMessageHtml()` 이 그릴 때 갈라내고, 여기서 모양을 준다.
 * 구매자 '내 문의 내역' 과 운영자 문의 상세가 같은 마크업을 쓴다.
 * ============================================================= */
.msg-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: var(--space-1) var(--space-4);
  margin: 0 0 var(--space-3);
  padding: 0 0 var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.msg-meta__dt {
  font: var(--font-label2);
  color: var(--color-gray-500);
  white-space: nowrap;
}
.msg-meta__dd {
  margin: 0;
  font: var(--font-body3-sb);
  font-weight: 700;
  color: var(--color-gray-900);
  overflow-wrap: anywhere;
}
.msg-body {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* 좁은 화면에서는 라벨을 값 위로. 320px 에서 '문의 유형' 이 한 줄을
   거의 다 먹어 값이 글자 하나씩 떨어졌다. */
@media (max-width: 479px) {
  .msg-meta { grid-template-columns: 1fr; gap: 0 0; }
  .msg-meta__dd { margin-bottom: var(--space-2); }
}

/* 무활동 자동 로그아웃 경고 (RD-035 D-5)
   화면을 가리는 오버레이는 두지 않는다 — 작업 중이던 내용을 보면서
   연장 여부를 정하게 한다. */
.idle-warn {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: 1200;
  width: 320px;
  max-width: calc(100vw - var(--space-12));
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-l);
  background: var(--color-white);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}
.idle-warn__title { margin: 0; font: var(--font-body1-md); color: var(--color-gray-900); }
.idle-warn__desc { margin: var(--space-2) 0 0; font: var(--font-body2); color: var(--color-gray-600); }
.idle-warn__desc b { color: var(--color-cta); }
.idle-warn__btns { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-4); }

@media (max-width: 479px) {
  .idle-warn { right: var(--space-4); left: var(--space-4); bottom: var(--space-4); width: auto; }
}

/* 국기 + 나라 이름 (RD-035 후속)
   국기 이모지를 쓰다 그림으로 바꿨다 — 윈도우 크롬·엣지에 국기 글리프가
   없어 'KR' 두 글자로 그려졌다. 4:3 비율이라 높이를 글자에 맞추고 폭은
   비율대로 둔다. */
.country { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
.country__flag {
  flex: none;
  width: 1.4em;
  height: 1.05em;          /* 4:3 */
  border-radius: 2px;
  /* 흰 바탕 국기(일본·홍콩 등)가 흰 배경에 묻힌다 — 아주 옅은 테두리로 세운다 */
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .12);
}
.country__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* 포인트 최소 주문금액 안내 (2026-08-25 정책)
   못 쓰는 이유를 그 자리에서 말한다 — 넣고 제출한 뒤 막히면 원인을 알기 어렵다. */
.pay-point__hint--warn { color: var(--color-cta); }

/* 견적 품목 제외 — 구매자 화면 (RD-036) */
.qd-table tr.is-excluded > td { opacity: .5; }

/* =============================================================
 * 안내 이미지 (RD-036 C-7 · 4차 #3)
 *
 * 그림 안에 문구가 그려져 있다. 그대로 두면 영어·일본어 화면에 한국어가
 * 나온다 — 한국어에서만 보이게 하고, 다른 언어는 원래 있던 글자 안내를
 * 그대로 쓴다. 판정은 gachi-api.js 가 <html data-lang> 에 적어 둔 값으로
 * 한다(<html lang> 은 세 언어 모두 ko 로 나와 쓸 수 없다).
 * ============================================================= */
/* 보일 때 display 를 지정하지 않는다 — 마크업이 정한 값을 그대로 둔다.
   `.is-ko-only { display:none }` + `…="ko" .is-ko-only { display:block }` 로
   짰더니, 뒤에 오는 같은 특이도의 컴포넌트 규칙(.support-promo{display:block})이
   숨김을 덮어써 영어·일본어 화면에 한국어 그림이 나왔다(2026-09-10 실서버).
   숨기는 쪽만 적고 특이도를 한 단 올린다. */
html:not([data-ui-lang="ko"]) .is-ko-only { display: none; }
html[data-ui-lang="ko"] .is-not-ko { display: none; }

/* 부품 요청 배너 — 그림 안에 버튼 두 개가 그려져 있다. 그림이라 눌리지
   않으므로 그 자리에 투명 링크를 얹는다. 위치는 원본 픽셀에서 잰 값을
   백분율로 적었다 — 그림이 비율을 지키며 늘어나 폭이 달라져도 어긋나지 않는다.
   **그림을 바꾸면 여기 네 값을 다시 재야 한다.**
   (6318×1974 기준: 버튼1 x249~1067 y1536~1736 · 버튼2 x1113~1865 y1536~1736) */
/* 검색 제목 오른쪽 빈 자리에 부품 요청 안내를 앉힌다 (RD-036 C-7).
   그림 한 장이던 것을 글자로 다시 짰다 — 아래 문의 안내와 같은 이유다.
   문구가 그림에 박혀 있으면 언어마다 그림을 따로 만들어야 하고, 그림 속
   버튼에 투명 링크를 좌표로 얹어야 하며, 그림을 바꿀 때마다 다시 재야 한다.
   일러스트만 그림으로 두고 나머지는 글자다.

   자리 배분 (2026-09-11 요청) — 처음에는 제목 오른쪽 빈 자리에 끼워
   넣었다. 그러다 "더 크게" → "그냥 목록이랑 같은 사이즈로" 가 되어,
   **아래 결과 목록과 같은 폭**으로 제 줄을 쓴다. 제목은 그 위에 한 줄로
   남는다 — 길찾기 줄을 뺀 것도 이 줄을 한 줄로 만들기 위해서다. */
/* 줄 간격 40px — 배너가 위로 오면서 제목이 배너(20px)에 더 붙고 목록(32px)
   에서 멀어져 배너 설명처럼 읽혔다. 제목은 목록의 제목이라 목록 쪽에 붙인다. */
.psearch__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-10) var(--space-8); flex-wrap: wrap; margin-bottom: var(--space-8); }
.psearch__head-text {
  flex: 1 1 100%;
  min-width: 0;
  /* 제목과 건수를 같은 줄에. 좁아지면 건수만 아래로 내려온다 */
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}
.psearch__head .psearch__title { margin-bottom: 0; }
.psearch__head .psearch__sub { margin-bottom: 0; }

.promo-rfq {
  /* 제 줄을 통째로 쓴다 — 아래 결과 목록과 같은 폭이다 */
  flex: 1 1 100%;
  /* 화면에서는 배너가 제목 위에 온다 (2026-09-14 요청). 마크업 순서는
     제목(h1)이 먼저인 채로 둔다 — 읽기 도구가 페이지 제목부터 읽고,
     배너의 h2 가 h1 앞에 오는 제목 순서 뒤집힘도 생기지 않는다. */
  order: -1;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--color-primary-25);
}
/* 제목은 왼쪽, 버튼은 오른쪽 (2026-09-18 요청 — 항목 두 줄과 그림을 빼면서
   글자 칸이 두 줄로 줄었다). 자리가 모자라면 버튼이 제목 아래로 내려간다. */
.promo-rfq__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
}
.promo-rfq__head { flex: 1 1 auto; min-width: 0; }
.promo-rfq__title { margin: 0; font: var(--font-h3); color: var(--color-gray-900); line-height: 1.45; }
/* 한국어만 낱말 단위로 끊는다 — 글자 단위로 끊겨 좁은 화면에서
   "…하세 / 요!" 가 됐다. **일본어에는 주면 안 된다**: 띄어쓰기가 없어
   한 줄이 통째로 안 끊기는 덩어리가 되고, 320px 에서 배너가 461px 로
   불어나 화면 밖으로 나갔다(실측). */
html[data-ui-lang="ko"] .promo-rfq__title { word-break: keep-all; }
.promo-rfq__title b { color: var(--color-cta); font-weight: inherit; }
/* 버튼 — 글자는 짧게, 좌우 여백은 넉넉히, 모서리는 덜 둥글게 (2026-09-11 요청).
   크기 클래스(.btn--s)의 padding·radius 를 이 자리에서만 덮는다. */
.promo-rfq__btns { display: flex; flex-wrap: wrap; gap: var(--space-2); flex-shrink: 0; margin-left: auto; }
/* margin-left:auto — 자리가 모자라 제목 아래로 내려가도 오른쪽에 선다
   (영어·일본어 768~1022px 에서 왼쪽에 붙어 오른쪽이 338px 비었다) */
.promo-rfq__btns .btn { padding: 0 var(--space-6); border-radius: var(--radius-sm); }
.promo-rfq__btn-line { border-color: var(--color-primary-200); color: var(--color-cta); }

/* 검색 결과 아래 문의 안내 (RD-036 C-7)
   처음에는 그림 한 장이었다. 그러면 문구가 그림에 박혀 영어·일본어에 쓸 수 없고
   (언어마다 그림을 따로 만들어야 한다), 폭이 좁아져도 글자만 줄일 수가 없다.
   아이콘만 그림으로 두고 나머지는 글자로 짠다 — 세 언어가 같은 마크업을 쓴다. */
.support-promo {
  margin-bottom: var(--space-6);
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}
.support-promo__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.support-promo__lead { min-width: 0; }
.support-promo__eyebrow { margin: 0; font: var(--font-caption1); color: var(--color-gray-500); }
.support-promo__title { margin: var(--space-1) 0 var(--space-2); font: var(--font-h3); color: var(--color-gray-900); }
.support-promo__title b { color: var(--color-cta); font-weight: inherit; }
.support-promo__desc { margin: 0; font: var(--font-body3-md); color: var(--color-gray-600); }
.support-promo__cta { flex-shrink: 0; min-width: 180px; }

/* 세 항목 — 폭이 좁아지면 두 칸, 더 좁으면 한 칸으로 접힌다.
   breakpoint 를 늘리지 않으려고 auto-fit 을 쓴다(RD-020 승인값은 셋뿐이다). */
.support-promo__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.support-promo__item {
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-gray-50);
}
.support-promo__icon { display: block; width: 56px; height: 56px; margin-bottom: var(--space-4); }
.support-promo__item-title { margin: 0 0 var(--space-2); font: var(--font-body2-sb); color: var(--color-gray-900); }
.support-promo__item-desc { margin: 0; font: var(--font-body3-md); color: var(--color-gray-600); line-height: 1.6; }

/* 마이페이지 사이드바 — 구매자에게 보이는 안내 그림 (RD-036 C-7).
   보임 여부는 gachi-sidebar.js 가 hidden 으로 정한다(역할 × 언어). */
.sidebar-promo-img { display: block; text-decoration: none; }
.sidebar-promo-img[hidden] { display: none; }
.sidebar-promo-img img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }

/* 휴대폰 — 제목 아래로 버튼을 내리고, 버튼이 줄 폭을 나눠 갖게 한다 */
@media (max-width: 767px) {
  .promo-rfq { flex-direction: column; align-items: stretch; }
  .promo-rfq__text { flex-direction: column; align-items: stretch; }
  .promo-rfq__btns { margin-left: 0; }   /* 세로 배치에서 auto 가 버튼 줄을 오른쪽에 쪼그라뜨린다 */
  .promo-rfq__btns .btn { flex: 1 1 auto; }
}