/* =============================================================
   sellers.css — sellers.html(방문 및 전화권유 판매원 명부) 전용.
   페이지 셸(.nk-prog / .nk-prog-head)과 검색창(.nk-prog-search), 모달(.nk-modal),
   버튼(.nk-btn), 페이저(.nk-pager)는 program.css / components.css 를 그대로
   쓰고, 여기에는 **이 화면에만 있는 것**만 둔다 — 한 줄 배치(검색 + 신청하기),
   명부 표, 신고 창구 박스, 모달 폼.
   색·간격·타이포는 전부 css/variables.css 의 --nk-* 토큰.
   반응형: 데스크톱 우선, 768 / 375 두 브레이크포인트(f/CLAUDE.md 규칙).
   ============================================================= */

/* ----- 검색 + 신청하기 한 줄 ---------------------------------- */
.nk-sell-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nk-space-16);
  width: 100%;
  margin-bottom: var(--nk-space-16);
}

/* 셀렉트 · 구분선 · 검색어 · 돋보기를 **한 박스** 안에 담는다. */
.nk-sell-search {
  display: flex;
  align-items: center;
  gap: var(--nk-space-8);
  width: 460px;
  max-width: 100%;
  min-width: 0;
  padding: 5px var(--nk-space-16) 5px var(--nk-space-8);
  background: var(--nk-color-surface);
  border: 1px solid var(--nk-color-gray-line);
  border-radius: var(--nk-radius-4);
}
.nk-sell-search:focus-within { border-color: var(--nk-color-blue-1); }

.nk-sell-search__divider {
  flex: 0 0 auto;
  width: 1px;
  height: 20px;
  background: var(--nk-color-gray-line);
}
.nk-sell-search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  border: 0;
  outline: 0;
  background: transparent;
  font: var(--nk-text-p15-r);
  color: var(--nk-color-black);
}
.nk-sell-search__input::placeholder { color: var(--nk-color-text-placeholder); }
/* 돋보기(제출) — 아이콘만 보이는 버튼 */
.nk-sell-search__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--nk-color-gray-1);
  cursor: pointer;
}
.nk-sell-search__btn:hover { color: var(--nk-color-black); }
.nk-sell-search__btn svg { width: 20px; height: 20px; }

/* ----- 검색 조건 드롭다운 (커스텀 listbox) --------------------
   네이티브 <select> 를 쓰지 않는 이유: 선택한 항목에 체크 표시를 보여줘야 하는데
   옵션 목록은 브라우저가 그리는 영역이라 CSS 로 손댈 수 없다. 대신 목록을 직접
   그리므로 **네이티브 옵션 팝업이 엉뚱한 자리에 뜨는 모바일 WebKit 버그**
   (css/mypage.css .nk-my-select 주석 참고)도 생기지 않는다.
   여닫기·키보드(↑↓·Enter·Esc·Tab)는 js/sellers.js 가 맡는다.
   ------------------------------------------------------------ */
.nk-sell-select {
  position: relative;
  flex: 0 0 auto;
}
.nk-sell-select__btn {
  display: flex;
  align-items: center;
  /* 셰브론과 구분선 사이 여백(12px 이상) — 기본 화살표처럼 끝에 붙어 잘려 보이지 않게 한다. */
  gap: var(--nk-space-12);
  height: 32px;
  padding: 0 var(--nk-space-8);
  border: 0;
  border-radius: var(--nk-radius-4);
  background: transparent;
  font: var(--nk-text-p15-r);
  color: var(--nk-color-black);
  white-space: nowrap;
  cursor: pointer;
}
.nk-sell-select__btn:hover { background: var(--nk-color-bg); }
.nk-sell-select__chevron {
  width: 10px;
  height: 6px;
  flex-shrink: 0;
  color: var(--nk-color-black);
  transition: transform 0.15s ease;
}
.nk-sell-select__btn[aria-expanded="true"] .nk-sell-select__chevron {
  transform: rotate(180deg);
}

.nk-sell-select__list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  min-width: 140px;
  margin: 0;
  padding: var(--nk-space-4);
  list-style: none;
  background: var(--nk-color-white);
  border: 1px solid var(--nk-color-gray-line);
  border-radius: var(--nk-radius-8);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.nk-sell-select__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nk-space-12);
  height: 40px;
  padding: 0 var(--nk-space-12);
  border-radius: var(--nk-radius-4);
  font: var(--nk-text-p15-r);
  color: var(--nk-color-black);
  cursor: pointer;
}
.nk-sell-select__option:hover,
.nk-sell-select__option:focus-visible,
.nk-sell-select__option.is-active {
  background: var(--nk-color-bg);
  outline: 0;
}
/* 체크 표시는 선택된 항목에만 */
.nk-sell-select__check {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--nk-color-primary);
  visibility: hidden;
}
.nk-sell-select__option[aria-selected="true"] {
  font: var(--nk-text-p15-m);
  color: var(--nk-color-primary);
}
.nk-sell-select__option[aria-selected="true"] .nk-sell-select__check { visibility: visible; }

/* ----- 건수 (검색줄 아래·표 위) ------------------------------- */
.nk-sell-count {
  margin: 0 0 var(--nk-space-8);
  font: var(--nk-text-p14-r);
  color: var(--nk-color-gray-2);
}

/* ----- 명부 표 ------------------------------------------------ */
/* 좁은 화면에서는 가로 스크롤로 나머지 칸을 본다(표를 카드로 쪼개지 않는다 —
   명부는 네 칸을 한 줄로 같이 읽는 쪽이 확인하기 쉽다). */
.nk-sell-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.nk-sell-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  background: var(--nk-color-white);
}
.nk-sell-table th {
  height: 44px;
  padding: 0 var(--nk-space-12);
  background: var(--nk-color-bg);
  border-bottom: 1px solid var(--nk-color-gray-line);
  font: var(--nk-text-p15-m);
  color: var(--nk-color-black);
  text-align: left;
  white-space: nowrap;
}
.nk-sell-table td {
  height: 52px;
  padding: 0 var(--nk-space-12);
  border-bottom: 1px solid var(--nk-color-gray-line);
  font: var(--nk-text-p15-r);
  color: var(--nk-color-black);
  white-space: nowrap;
}
.nk-sell-table td.nk-sell-table__empty {
  text-align: center;
  color: var(--nk-color-gray-2);
  white-space: normal;
}

/* ----- 신고 창구 박스 ----------------------------------------- */
.nk-sell-report {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--nk-space-8);
  width: 100%;
  margin-top: var(--nk-space-40);
  padding: var(--nk-space-24);
  background: var(--nk-color-bg);
  border: 1px solid var(--nk-color-gray-line);
  border-radius: var(--nk-radius-8);
}
.nk-sell-report__text {
  margin: 0;
  font: var(--nk-text-p15-r);
  color: var(--nk-color-black);
}
.nk-sell-report__contact {
  margin: 0;
  font: var(--nk-text-p15-m);
  color: var(--nk-color-black);
}
.nk-sell-report__btn { margin-top: var(--nk-space-8); }

/* ----- 모달 폼(신청 · 위반 신고) ------------------------------ */
.nk-sell-form {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-12);
  width: 100%;
}
.nk-sell-field {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-4);
}
.nk-sell-field__label {
  font: var(--nk-text-p14-m);
  color: var(--nk-color-black);
}
.nk-sell-field__hint {
  margin: 0;
  font: var(--nk-text-p13-r);
  color: var(--nk-color-gray-2);
}
/* 본인인증 줄 — [본인인증하기] 버튼과 결과 문구를 한 줄에 둔다. */
.nk-sell-verify {
  display: flex;
  align-items: center;
  gap: var(--nk-space-12);
  flex-wrap: wrap;
}
.nk-sell-verify__state {
  font: var(--nk-text-p14-r);
  color: var(--nk-color-gray-2);
}
.nk-sell-verify__state.is-done { color: var(--nk-color-primary); }
/* 인증 완료 줄 — 번호는 마스킹된 값만 보여주고(원본은 서버만 안다) 옆에 "다시 인증". */
.nk-sell-verify__done {
  font: var(--nk-text-p14-m);
  color: var(--nk-color-primary);
}
.nk-sell-verify__again {
  padding: 0;
  border: 0;
  background: none;
  font: var(--nk-text-p14-r);
  color: var(--nk-color-gray-2);
  text-decoration: underline;
  cursor: pointer;
}

/* 서약서 본문(펼쳐보기). .nk-acc 아코디언 위에 올리고 본문만 꾸민다. */
.nk-sell-pledge {
  margin: 0;
  padding-left: var(--nk-space-16);
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-4);
}
.nk-sell-pledge li {
  font: var(--nk-text-p14-r);
  color: var(--nk-color-black);
}
.nk-sell-agreebox {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-8);
  padding: var(--nk-space-16);
  background: var(--nk-color-bg);
  border-radius: var(--nk-radius-4);
}
.nk-sell-error {
  margin: 0;
  font: var(--nk-text-p14-r);
  color: var(--nk-color-red-1);
}
.nk-sell-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--nk-space-8);
  margin-top: var(--nk-space-16);
}
/* 모달 안이 길어지면(신청 모달) 모달 안에서만 스크롤한다. */
.nk-sell-scroll {
  max-height: 60vh;
  overflow-y: auto;
  padding-right: var(--nk-space-4);
}

@media (max-width: 768px) {
  /* [신청하기](오른쪽 정렬·내용 폭) → 검색 박스(전체 폭) → 건수 → 목록 순.
     DOM 은 검색 폼이 먼저라 order 로 버튼만 위로 올린다 — 탭 순서는 DOM 그대로라
     검색을 먼저 지나간다(화면에서 아래에 있는 것이 먼저 잡히지만, 둘 다 같은
     묶음 안이라 혼란이 크지 않다. 순서를 맞추려면 마크업을 바꿔야 한다). */
  .nk-sell-bar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--nk-space-12);
  }
  .nk-sell-search { width: 100%; }
  .nk-sell-apply {
    order: -1;
    align-self: flex-end;
    width: auto;
    height: 40px;
    padding-inline: var(--nk-space-20);
  }

  /* ----- 표 → 카드 목록 -------------------------------------
     한 판매원 = 카드 1개. 가로 스크롤을 없애고 <tr> 을 2줄 그리드로 바꾼다.
       1줄: 이름(굵게)            등록번호(오른쪽, 작게)
       2줄: 소속 · 연락처
     DOM 은 그대로 두고 CSS 만 바꾼다 — 렌더링 코드가 한 벌로 유지된다.
     (라벨-값 카드로 바꾸는 공용 .nk-table-responsive 와는 모양이 달라 여기서 직접 짠다.)
     ---------------------------------------------------------- */
  .nk-sell-table-wrap { overflow-x: visible; }
  .nk-sell-table {
    min-width: 0;
    background: none;
  }
  .nk-sell-table thead { display: none; }
  .nk-sell-table,
  .nk-sell-table tbody {
    display: block;
    width: 100%;
  }
  /* 열을 3개로 둔다 — 이름이 1~2열을 걸치므로 2줄의 소속·연락처가 **각자 글자 폭만큼만**
     차지해 "소속 · 연락처" 가 한 줄로 붙어 읽힌다(2열짜리로 두면 소속 칸 폭이
     이름 길이에 끌려가 연락처가 멀찍이 떨어진다). */
  /* 2열 그리드. 열을 3개로 늘려 "소속 · 연락처" 를 딱 붙여 보려 했지만, 열 폭을
     두 줄이 같이 쓰는 탓에 360px 에서 소속·연락처가 각각 줄바꿈됐다. 2열로 두면
     1줄은 이름/등록번호, 2줄은 소속/연락처가 같은 세로선에 맞춰 떨어진다 —
     카드끼리 줄이 맞아 읽기도 낫다. */
  .nk-sell-table tbody tr {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "name reg"
      "aff  phone";
    gap: var(--nk-space-4) var(--nk-space-8);
    margin-bottom: var(--nk-space-8);
    padding: var(--nk-space-16);
    background: var(--nk-color-white);
    border: 1px solid var(--nk-color-gray-line);
    border-radius: var(--nk-radius-8);
  }
  .nk-sell-table tbody tr:last-child { margin-bottom: 0; }
  .nk-sell-table td {
    height: auto;
    padding: 0;
    border-bottom: 0;
    white-space: normal;
    word-break: break-word;
  }
  .nk-sell-table td:nth-child(1) {           /* 소속 */
    grid-area: aff;
    font: var(--nk-text-p14-r);
    color: var(--nk-color-gray-2);
  }
  .nk-sell-table td:nth-child(1)::after {
    content: " ·";
    color: var(--nk-color-gray-2);
  }
  .nk-sell-table td:nth-child(2) {           /* 이름 */
    grid-area: name;
    font: var(--nk-text-p15-b);
  }
  .nk-sell-table td:nth-child(3) {           /* 연락처 */
    grid-area: phone;
    justify-self: start;
    font: var(--nk-text-p14-r);
    color: var(--nk-color-gray-2);
  }
  .nk-sell-table td:nth-child(4) {           /* 등록번호 */
    grid-area: reg;
    justify-self: end;
    font: var(--nk-text-p13-r);
    color: var(--nk-color-gray-2);
    white-space: nowrap;
  }
  /* 불러오는 중·결과 없음 같은 colspan 행은 카드 한 칸을 통째로 쓴다. */
  .nk-sell-table td[colspan] {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: stretch;
    text-align: center;
  }
  .nk-sell-table td[colspan]::after { content: none; }

  /* 신고 안내 박스도 전체 폭, 문장은 자연스럽게 줄바꿈. */
  .nk-sell-report { align-items: stretch; }
  .nk-sell-report__text,
  .nk-sell-report__contact { word-break: keep-all; }
  .nk-sell-report__btn { width: 100%; }

  /* 터치 목표 44px 이상(이 화면의 페이저만 — 공용 .nk-pager 는 건드리지 않는다). */
  .nk-sell-pager .nk-pager__btn {
    min-width: 44px;
    height: 44px;
    border-radius: var(--nk-radius-8);
  }

  /* 모달 버튼: 반씩 나눠 갖되 글자는 줄바꿈하지 않는다("신청하 기" 방지). */
  .nk-sell-actions > .nk-btn {
    flex: 1 1 0;
    white-space: nowrap;
  }
  .nk-sell-scroll { max-height: 56vh; }
}

/* ----- 교육 영상 시청 모달 (#nk-sell-training-modal) --------------------
   건너뛰기·배속을 막으려고 브라우저 기본 컨트롤을 쓰지 않는다 — 재생/일시정지
   버튼과 진행률만 둔다(판정은 서버가 한다). 모바일에서도 화면 폭에 맞춘다. */
.nk-sell-training {
  width: 720px;
  max-width: 100%;
  gap: var(--nk-space-16);
}
.nk-sell-training__player {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-8);
  width: 100%;
}
.nk-sell-training__player video {
  width: 100%;
  max-height: 50vh;
  background: var(--nk-color-black);
  border-radius: var(--nk-radius-8);
}
.nk-sell-training__bar {
  display: flex;
  align-items: center;
  gap: var(--nk-space-8);
  font: var(--nk-text-p13-r);
  color: var(--nk-color-gray-2);
}
.nk-sell-training__bar progress {
  flex: 1 1 auto;
  height: 10px;
}
.nk-sell-training__controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--nk-space-12);
}
.nk-sell-training__hint {
  font: var(--nk-text-p12-r);
  color: var(--nk-color-gray-1);
}
.nk-sell-training__step {
  margin: 0;
  font: var(--nk-text-p15-b);
  color: var(--nk-color-black);
}
.nk-sell-quiz__item {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-4);
  padding: var(--nk-space-12) 0;
  border-bottom: 1px solid var(--nk-color-gray-line);
}
.nk-sell-quiz__item:last-child {
  border-bottom: 0;
}
/* 틀린 문제만 표시한다 — 정답은 알려주지 않는다. */
.nk-sell-quiz__item.is-wrong {
  padding-left: var(--nk-space-8);
  border-left: 2px solid var(--nk-color-red-1);
}

@media (max-width: 768px) {
  .nk-sell-training {
    width: 100%;
  }
  .nk-sell-training__player video {
    max-height: 40vh;
  }
}