/* 샘플제공 신청(/sample/) — 신청서 공통 모양(안내 3칸, 칸 이름|입력칸 표, 동의 상자, 버튼)은 np-partner.css 를 함께 불러 쓰고
   여기에는 이 페이지에만 있는 '신청 품목' 표만 둔다.
   - 넓은 화면: [번호 | 상품명·모델명 | 옵션 | 수량 | 삭제] 한 줄 표. 머리 줄과 번호 칸은 칸 이름처럼 회색 바탕
   - 1180px 이하: 번호 칸(회색, 아래에 삭제) 오른쪽에 칸 이름을 입력칸 위로 올려 두 줄(상품명 / 옵션·수량)
   - 560px 이하: 번호 칸 대신 '품목 1 ··· 삭제' 제목 줄 */

/* ── 품목 표 ── */
.sf-items { border-top: 2px solid var(--np-ink); }
.sf-items__head,
.sf-item { display: grid; grid-template-columns: 64px minmax(0, 1.35fr) minmax(0, 1fr) 132px 72px; column-gap: 12px; }
.sf-items__head { align-items: center; min-height: 44px; border-bottom: 1px solid var(--np-line); background: #f7f7f7; color: var(--np-ink); font-size: 15px; font-weight: 600; line-height: 1.4; }
.sf-items__head > span:first-child { text-align: center; }

/* 한 줄. 번호 칸의 회색 바탕은 줄 배경으로 깔아 오류 글 줄까지 이어지게 한다 */
.sf-item { grid-template-areas: "no name opt qty del" ". err err err err"; align-items: center; border-bottom: 1px solid var(--np-line);
  background: linear-gradient(to right, #f7f7f7 64px, transparent 64px); }
.sf-item__no { grid-area: no; color: var(--np-ink); font-size: 15px; font-weight: 700; text-align: center; }
.sf-item__no-pre { display: none; }
.sf-item__f { min-width: 0; padding: 8px 0; }
.sf-item__f--name { grid-area: name; }
.sf-item__f--opt { grid-area: opt; }
.sf-item__f--qty { grid-area: qty; }
.sf-item__del { grid-area: del; justify-self: end; padding-right: 12px; }
.sf-item__err { grid-area: err; margin: -2px 0 10px; }
.sf-item__err[hidden] { display: none; }
/* 넓은 화면은 머리 줄이 칸 이름 역할 → 칸마다 붙은 이름은 화면에서만 숨긴다(화면 낭독기는 읽음) */
.sf-item__lab { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 수량: [−] 1 [+] */
.sf-qty { display: flex; height: 44px; }
.sf-qty__btn { flex: 0 0 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid #cfcfcf; border-radius: 0; background: #fff; color: var(--np-ink); cursor: pointer; transition: background-color .15s; }
.sf-qty__btn:first-child { border-right: 0; }
.sf-qty__btn:last-child { border-left: 0; }
.sf-qty__btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.sf-qty__btn:disabled { color: #c8c8c8; cursor: default; }
.sf-qty__btn:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--np-ink); outline-offset: -2px; }
.sf-qty__input { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 4px; text-align: center; font-variant-numeric: tabular-nums; }

/* 삭제(첨부파일 삭제 버튼과 같은 모양) */
.sf-del { height: 32px; padding: 0 12px; border: 1px solid var(--np-line); border-radius: 0; background: #fff; color: var(--np-body); font: inherit; font-size: 13px; white-space: nowrap; cursor: pointer; }
.sf-del:focus-visible { outline: 2px solid var(--np-ink); outline-offset: 2px; }
.sf-del[hidden] { display: none; }

/* 품목 추가 + 개수 */
.sf-items__foot { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.sf-add { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid var(--np-ink); border-radius: 0; background: #fff; color: var(--np-ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background-color .2s, color .2s; }
.sf-add svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.sf-add:focus-visible { outline: 2px solid var(--np-ink); outline-offset: 2px; }
.sf-add:disabled { border-color: var(--np-line); color: #b0b0b0; cursor: default; }
.sf-items__count { color: var(--np-mute); font-size: 14px; font-variant-numeric: tabular-nums; }
.sf-items__count b { color: var(--np-ink); font-weight: 600; }
.np-sample #sf-items-note { margin-top: 10px; }

/* 마우스가 있는 기기에서만 hover(터치 기기는 누른 뒤 hover 색이 남는다) */
@media (hover: hover) {
  .sf-qty__btn:hover:not(:disabled) { background: var(--np-soft); }
  .sf-del:hover { border-color: var(--np-ink); color: var(--np-ink); }
  .sf-add:hover:not(:disabled) { background: var(--np-ink); color: #fff; }
}

/* ── 반응형 ── */
@media (max-width: 1180px) {
  /* 번호 칸(번호 + 아래 삭제) | [상품명·모델명] / [옵션 | 수량], 칸 이름은 입력칸 위 */
  .sf-items__head { display: none; }
  .sf-item { grid-template-columns: 56px minmax(0, 1fr) 132px; grid-template-areas: "no name name" "del opt qty" ". err err"; align-items: end; padding: 12px 12px 14px 0;
    background: linear-gradient(to right, #f7f7f7 56px, transparent 56px); }
  .sf-item__no { align-self: start; padding-top: 1px; }
  .sf-item__f { padding: 0; }
  .sf-item__f--opt, .sf-item__f--qty { margin-top: 10px; }
  .sf-item__del { justify-self: center; padding: 0 0 8px; }
  .sf-del { height: 28px; padding: 0 8px; font-size: 12px; }
  .sf-item__err { margin: 8px 0 0; }
  .sf-item__lab { position: static; display: block; width: auto; height: auto; margin: 0 0 6px; overflow: visible; clip: auto; white-space: normal; color: var(--np-ink); font-size: 14px; font-weight: 600; line-height: 1.4; }
}
@media (max-width: 560px) {
  /* 번호 칸을 '품목 1 ··· 삭제' 제목 줄로 */
  .sf-item { grid-template-columns: minmax(0, 1fr) 124px; grid-template-areas: "no del" "name name" "opt qty" "err err"; column-gap: 10px; padding: 14px 0 16px; background: none; }
  .sf-item__no { align-self: center; padding: 0; font-size: 15px; text-align: left; }
  .sf-item__no-pre { display: inline; white-space: pre; }
  .sf-item__del { justify-self: end; align-self: center; padding: 0; }
  .sf-item__f--name { margin-top: 10px; }
  .sf-qty__btn { flex-basis: 38px; }
}