/* =============================================================
   program.css — "프로그램" 그룹 페이지 공용 스타일
   대상: programs.html / program-detail.html / program-detail-new.html(임시) /
         program-payment.html / program-complete.html / program-download.html
   Figma: db 홈페이지 (file hIJDNfXqLsMnSXdlkrZF6R)
     - 프로그램-리스트        node 221:952
     - 프로그램-상세보기      node 6:222
     - 프로그램-결제하기      node 192:749
     - 프로그램-구매완료      node 203:836
     - 프로그램-구매완료 다운로드 node 338:20121
   색상·간격·타이포는 전부 css/variables.css 의 --nk-* 토큰만 사용.
   네이밍: header.css / footer.css / main.css 와 동일한 nk- BEM 규칙.
   ============================================================= */

/* ----- 공통 레이아웃 ---------------------------------------- */
.nk-prog {
  width: 100%;
  max-width: 1281px;                 /* Figma 콘텐츠 폭 (80 + 1281) */
  margin-inline: auto;
  padding: var(--nk-space-40) var(--nk-space-24) var(--nk-space-80);
}

/* 좌: 본문 / 우: 사이드 요약 (결제·완료·실패) */
.nk-prog-cols {
  display: flex;
  gap: var(--nk-space-24);
  align-items: flex-start;
}
.nk-prog-cols__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-24);
}
.nk-prog-cols__aside {
  width: 412px;
  flex-shrink: 0;
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-24);
}

/* 버튼(.nk-btn)은 css/components.css 로 이동했다. */

/* ----- 공용 카드 / 정의목록 / 구분선 ----------------------- */
.nk-card {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-16);
  padding: var(--nk-pad-card);
  background: var(--nk-color-surface);
  border-radius: var(--nk-radius-16);
}
.nk-card__title {
  margin: 0;
  font: var(--nk-text-p18-b);
  color: var(--nk-color-black);
}
.nk-card__lead {
  margin: 0;
  font: var(--nk-text-p15-r);
  color: var(--nk-color-black);
}
.nk-card__subtitle {
  margin: 0;
  font: var(--nk-text-p15-b);
  color: var(--nk-color-black);
}
.nk-card__title--lg { font: var(--nk-text-p24-b); }

/* .nk-line 은 components.css로 옮겼다 (mypage-notice-detail.html도 같은 구분선을 씀). */

.nk-dl {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-10);
  width: 100%;
}
.nk-dl__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--nk-space-16);
  font: var(--nk-text-p15-m);
  color: var(--nk-color-black);
}
/* display: flex 때문에 [hidden] 기본 동작(display: none)이 묻히는 문제 방지
   (js/program-detail.js가 판매가/정상가 정보가 없을 때 이 행 자체를 숨김) */
.nk-dl__row[hidden] {
  display: none;
}
.nk-dl__row > span:last-child { text-align: right; }
.nk-dl__strike { text-decoration: line-through; }
.nk-dl__accent {
  font: var(--nk-text-p24-b);
  color: var(--nk-color-primary);
}
.nk-dl__big { font: var(--nk-text-p24-b); }

/* ----- 주문 정보 카드 (program-payment.html 우측 요약) --------
   "오늘 결제"(① )와 "다음 달부터 정기결제"(②) 두 구역으로 나눈 카드.
   금액 span 은 모두 nowrap — 360px 에서 "759,0 / 00원" 처럼 숫자 중간이
   끊기지 않게 한다(행 자체가 두 줄로 내려가는 건 .nk-dl__row 의 기존
   모바일 동작이라 그대로 둔다). */
.nk-pay-sum__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--nk-space-8);
  flex-wrap: wrap;
}
.nk-pay-sum__product {
  margin: 0;
  font: var(--nk-text-p15-m);
  color: var(--nk-color-text-sub);
}
.nk-pay-sum__sect {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-10);
}
.nk-pay-sum__legend {
  margin: 0;
  font: var(--nk-text-p14-m);
  color: var(--nk-color-text-sub);
}
.nk-pay-sum__amt {
  white-space: nowrap;
}
.nk-pay-sum__total {
  align-items: center;
}
.nk-pay-sum__total-amt {
  font: var(--nk-text-p24-b);
  color: var(--nk-color-primary);
}
/* ② 연회색 배경 박스 */
.nk-pay-sum__recur {
  padding: var(--nk-space-16);
  background: var(--nk-color-gray-input-bg);
  border-radius: var(--nk-radius-12);
}
.nk-pay-sum__vat {
  font: var(--nk-text-p13-r);
  color: var(--nk-color-text-sub);
}
.nk-pay-sum__micro {
  margin: 0;
  font: var(--nk-text-p12-r);
  color: var(--nk-color-text-sub);
}
/* 결제 버튼 비활성 사유. 사유가 없으면 JS가 hidden 을 걸어 숨긴다. */
.nk-pay-sum__reason {
  margin: 0;
  font: var(--nk-text-p13-r);
  color: var(--nk-color-text-sub);
}

/* ----- 모바일 결제 바 / 바텀시트 (program-payment.html, 768px 이하) ------
   PC(769px 이상)에서는 둘 다 보이지 않는다 — 기존 주문 정보 카드의
   [결제하기]를 그대로 쓴다. 아래 @media (max-width: 768px) 에서만 켠다. */
.nk-pay-bar {
  display: none;
}
.nk-pay-sheet {
  /* .nk-modal 기본은 가운데 정렬 다이얼로그 — 시트는 아래에 붙인다 */
  align-items: flex-end;
  justify-content: stretch;
  padding: 0;
}
.nk-pay-sheet__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-16);
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: var(--nk-space-12) var(--nk-space-16)
    calc(var(--nk-space-16) + env(safe-area-inset-bottom));
  background: var(--nk-color-surface);
  border-radius: var(--nk-radius-16) var(--nk-radius-16) 0 0;
  /* 아래에서 올라오는 모션. 모달은 [hidden] 토글이라 열릴 때 한 번 재생된다. */
  animation: nk-pay-sheet-up 0.22s ease-out;
}
@keyframes nk-pay-sheet-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
/* 모션을 끈 사용자에게는 올라오는 효과를 생략한다 */
@media (prefers-reduced-motion: reduce) {
  .nk-pay-sheet__panel { animation: none; }
}
.nk-pay-sheet__handle {
  align-self: center;
  width: 40px;
  height: 4px;
  border-radius: var(--nk-radius-4);
  background: var(--nk-color-gray-line);
}
.nk-pay-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nk-space-8);
}
.nk-pay-sheet__close {
  display: grid;
  place-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin-right: calc(var(--nk-space-8) * -1); /* 아이콘 광학 정렬 */
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.nk-pay-sheet__close svg { display: block; }
.nk-pay-sheet__body {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-16);
}
/* 시트 안에서는 "주문 정보" 제목이 시트 머리글과 겹치므로 복제본의 제목만 숨긴다
   (복제 대상이 PC 카드 DOM 이라 마크업을 따로 만들지 않는다). */
.nk-pay-sheet__body .nk-pay-sum__head .nk-card__title {
  display: none;
}

/* 미동의 상태에서 하단 바 [결제하기]를 눌렀을 때 강조할 동의 항목 */
.nk-agree.is-missing .nk-agree__label {
  color: var(--nk-color-red-1);
  font-weight: var(--nk-font-weight-bold);
}

.nk-notes {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-4);
  width: 100%;
  font: var(--nk-text-p14-r);
  color: var(--nk-color-black);
}
.nk-notes p { margin: 0; }
.nk-notes--muted { color: var(--nk-color-text-sub); }
.nk-notes--lg { font: var(--nk-text-p15-r); }
/* 묶음 안의 한 줄만 한 단계 작은 회색으로 — 본문 줄의 예외·단서 문장용
   (--muted 는 .nk-notes 블록 전체에 거는 모디파이어라 한 줄에 쓸 수 없다). */
.nk-notes__sub {
  font: var(--nk-text-p13-r);
  color: var(--nk-color-text-sub);
}

/* 프로그램 썸네일 (아이콘 + 이름) */
.nk-thumb {
  display: flex;
  align-items: center;
  gap: var(--nk-space-8);
}
.nk-thumb__img {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  object-fit: contain;
}
.nk-thumb__name {
  font: var(--nk-text-p15-b);
  color: var(--nk-color-black);
}

/* ============================================================
   1. 프로그램-리스트 (programs.html / node 221:952)
   ============================================================ */
.nk-prog-head {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-8);
  margin-bottom: var(--nk-space-24);
}
.nk-prog-head__title {
  margin: 0;
  font: var(--nk-text-p24-b);
  color: var(--nk-color-black);
}
.nk-prog-head__desc {
  margin: 0;
  font: var(--nk-text-p15-m);
  color: var(--nk-color-black);
}

/* .nk-prog-search* 셸은 components.css로 옮겼다 (mypage-faq.html이 씀).
   programs.html은 검색창을 뺐으므로(Figma node 221:952) 여기서 쓸 일이 없다. */

.nk-prog-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nk-space-24);
}
.nk-prog-empty {
  width: 100%;
  padding: var(--nk-space-48) var(--nk-space-16);
  text-align: center;
  font: var(--nk-text-p15-r);
  color: var(--nk-color-gray-2);
}
.nk-prog-item {
  display: flex;
  flex-direction: column;
  flex: 1 1 360px;
  max-width: 411px;
  background: var(--nk-color-surface);
  border: 1px solid var(--nk-color-gray-line);
  border-radius: var(--nk-radius-16);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.nk-prog-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(6, 4, 27, 0.08);
}
.nk-prog-item__media {
  display: block;
  width: 100%;
  height: 221px;
  object-fit: cover;
}
.nk-prog-item__body {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-24);
  flex: 1 0 auto;
  padding: var(--nk-space-32) var(--nk-space-24);
}
.nk-prog-item__title {
  margin: 0;
  font: var(--nk-text-p24-b);
  color: var(--nk-color-black);
}
.nk-prog-item__desc {
  margin: 0;
  font: var(--nk-text-p15-r);
  color: var(--nk-color-black);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  word-break: break-all;
}
.nk-prog-item__prices {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-8);
}
.nk-prog-item__cta {
  margin-top: auto;
  width: 100%;
}

/* ============================================================
   2. 프로그램-상세보기 (program-detail.html / node 6:222)
   ============================================================ */
/* GET /programs/{id} 404(존재하지 않거나 비활성) 시 js/program-detail.js가
   #nk-detail-content 대신 이걸 보여준다 */
.nk-detail-notfound {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nk-space-16);
  padding: var(--nk-space-80) var(--nk-space-16);
  text-align: center;
}
/* display: flex 때문에 [hidden] 기본 동작(display: none)이 묻혀서, HTML에
   기본으로 붙어 있는 hidden 속성이 무시되고 이 블록이 항상 보이던 문제.
   (원인 1) — 정상 프로그램을 조회했을 때도 "존재하지 않는 프로그램입니다"가
   같이 보이던 게 이것 때문이었다. */
.nk-detail-notfound[hidden] {
  display: none;
}
.nk-detail-notfound__text {
  margin: 0;
  font: var(--nk-text-p18-m);
  color: var(--nk-color-black);
}
.nk-detail-cols {
  display: flex;
  gap: var(--nk-space-24);
  align-items: flex-start;
}
/* display: flex가 지정돼 있으면 [hidden] 기본 스타일(display: none)이
   무시된다 — js/program-detail.js가 이 요소를 숨길 때 실제로 숨겨지도록
   명시한다(.nk-modal[hidden]과 같은 패턴, components.css 참고). */
.nk-detail-cols[hidden] {
  display: none;
}
.nk-detail-side {
  width: 302px;
  flex-shrink: 0;
  position: sticky;
  top: 84px;
}
.nk-detail-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-80);
}

/* 사이드 구매 카드 */
.nk-buy {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-24);
  padding: var(--nk-space-40) var(--nk-space-24);
  background: var(--nk-color-surface);
  border-radius: var(--nk-radius-16);
}
.nk-buy__intro {
  margin: 0;
  font: var(--nk-text-p15-m);
  color: var(--nk-color-black);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  word-break: break-all;
}
.nk-buy__prices {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-8);
}
.nk-buy__env {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-8);
}
.nk-buy__env-title {
  margin: 0;
  font: var(--nk-text-p15-b);
  color: var(--nk-color-black);
}
.nk-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  height: 20px;
  padding: 0 var(--nk-space-6);
  border: 1px solid var(--nk-color-gray-line);
  border-radius: var(--nk-radius-pill);
  background: var(--nk-color-blue-bg);
  font: var(--nk-text-p13-r);
  color: var(--nk-color-black);
}
.nk-buy__env-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--nk-space-16);
  font: var(--nk-text-p15-m);
  color: var(--nk-color-black);
}
.nk-buy__env-row > span:last-child { text-align: right; }

/* 히어로 이미지 자리 */
.nk-detail-hero {
  display: block;
  width: 100%;
  height: 325px;
  border-radius: var(--nk-radius-16);
  object-fit: cover;
}

/* 교차 배치 특징 3종 */
.nk-detail-features {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-32);
}
.nk-detail-feature {
  display: flex;
  gap: var(--nk-space-24);
  align-items: center;
}
.nk-detail-feature__media {
  display: block;
  width: 411px;
  flex-shrink: 0;
  height: 291px;
  border-radius: var(--nk-radius-16);
  background: var(--nk-color-image-placeholder);
  object-fit: cover;
}
/* 제목+설명 텍스트 묶음 — 특징 행(.nk-detail-feature)과 구매 혜택 항목
   (.nk-benefit)이 **같은 규칙**을 쓴다. 값을 양쪽에 베껴 두지 않는다.
   특징 행만 데스크톱에서 간격이 넓어 --nk-stack-gap 으로 덮고, 모바일에서는
   그 덮어쓰기만 꺼서(아래 미디어쿼리) 혜택 항목과 완전히 같아진다. */
.nk-benefit__text,
.nk-detail-feature__text {
  display: flex;
  flex-direction: column;
  gap: var(--nk-stack-gap, var(--nk-space-8));
  min-width: 0;
}
.nk-detail-feature__text {
  --nk-stack-gap: var(--nk-space-24); /* 데스크톱: 이미지 옆 큰 텍스트라 넓게 */
  flex: 1 1 0;
}
.nk-detail-feature__title {
  margin: 0;
  font: var(--nk-text-p32-b);
  color: var(--nk-color-black);
}
.nk-detail-feature__desc {
  margin: 0;
  font: var(--nk-text-p18-m);
  color: var(--nk-color-black);
}

/* 제목 + 3열 카드 블록 */
.nk-detail-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nk-space-40);
  padding-bottom: 0; /* PC/모바일 공통 — 하단 여백은 .nk-detail-main의 gap이 담당 */
}
.nk-detail-block__title {
  margin: 0;
  font: var(--nk-text-p24-b);
  color: var(--nk-color-black);
  text-align: center;
}
.nk-detail-cards {
  display: flex;
  gap: var(--nk-space-24);
  width: 100%;
}
.nk-comp {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-24);
  flex: 1 1 0;
  min-width: 0;
}
.nk-comp__media {
  display: block;
  width: 100%;
  height: 179px;
  border-radius: var(--nk-radius-16);
  background: var(--nk-color-image-placeholder);
  object-fit: cover;
}
.nk-comp__title {
  margin: 0;
  font: var(--nk-text-p24-b);
  color: var(--nk-color-black);
}
.nk-comp__desc {
  margin: 0;
  font: var(--nk-text-p18-m);
  color: var(--nk-color-black);
}

/* 히어로 배너 (bg 이미지 + 중앙 정렬 텍스트, Figma node 559:5299) */
/* ----- 프로그램 화면 미리보기 (mp4) ------------------------- */
/* 개발 히스토리·자주 묻는 질문과 같은 .nk-panel 카드를 그대로 쓰고(제목도
   .nk-panel__title), 아래 세 가지만 덧붙인다.
   - 영상을 못 불러오면 섹션째 숨긴다. .nk-panel이 display:flex라 [hidden]
     기본 동작(display:none)이 묻히므로 따로 막아준다.
   - 제목 → 안내 문구 → 영상 세 덩어리라 패널 기본 간격(40px)은 좁힌다.
   - 영상은 16:9 고정. 폭은 부모(.nk-detail-main)를 그대로 채우므로
     768/375에서도 별도 규칙 없이 가로가 꽉 찬다. */
.nk-detail-preview {
  gap: var(--nk-space-24);
}
.nk-detail-preview[hidden] {
  display: none;
}
.nk-detail-preview__desc {
  margin: 0;
  font: var(--nk-text-p15-r);
  color: var(--nk-color-text-sub);
  text-align: center;
}
.nk-detail-preview__video {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--nk-radius-16);
  background: var(--nk-color-black);
}

.nk-detail-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 325px;
  border-radius: var(--nk-radius-16);
  
  background-image: url("../assets/program-detail-hero-bg.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}
.nk-detail-banner__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nk-space-16);
  text-align: center;
  padding-inline: var(--nk-space-24);
}
.nk-detail-banner__icon {
  width: 77px;
  height: 75px;
  object-fit: contain;
}
.nk-detail-banner__title {
  margin: 0;
  font: var(--nk-text-p36-b);
  color: var(--nk-color-black);
}
.nk-detail-banner__desc {
  margin: 0;
  font: var(--nk-text-p18-m);
  color: var(--nk-color-black);
}
/* "내편비즈 뉴" 전용 히어로 배경 (program-detail-new.html, Figma node 623:3686) */
.nk-detail-banner--new {
  background-image: url("../assets/program-detail-new-hero-bg.webp");
}

/* "지속적인 업데이트" — 좌측 인트로(.nk-detail-intro) + 우측 아이콘 스텝
   (.nk-icon-step-row)이 가로로 나란히 배치된다(Figma node 625:3996).
   다른 nk-detail-intro 섹션처럼 중앙 정렬 상단 배치가 아니다. */
.nk-detail-row {
  display: flex;
  gap: var(--nk-space-32);
  align-items: center;
  width: 100%;
}
.nk-detail-row .nk-detail-intro {
  width: 312px;
  flex-shrink: 0;
}
.nk-detail-row .nk-icon-step-row {
  flex: 1 1 auto;
}

/* 섹션 인트로 (제목+설명, 여러 섹션에서 재사용: 사업자 확인 / 지역·업종 세분화 /
   지도 검색 / 리드 보호). 기본은 중앙 정렬, --left는 지도 섹션처럼 좌측 정렬. */
.nk-detail-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nk-space-16);
  width: 100%;
  text-align: center;
}
.nk-detail-intro__title {
  margin: 0;
  font: var(--nk-text-p32-b);
  color: var(--nk-color-black);
  width: 100%;
  /* 한국어는 기본 줄바꿈이 글자 단위라 좁은 칸에서 "않습니/다." 처럼 낱말 중간이
     끊긴다. 어절 단위로만 끊는다(세이프존처럼 제목이 긴 좌측 칸에서 티가 난다). */
  word-break: keep-all;
}
.nk-detail-intro__desc {
  margin: 0;
  font: var(--nk-text-p18-m);
  color: var(--nk-color-black);
  width: 100%;
}
.nk-detail-intro--left {
  align-items: flex-start;
  text-align: left;
}

/* "지금 운영 중인 사업자를 확인하세요" 정보 아이콘 5개 (상호명/연락처/
   사업장 주소/업종 정보/직원수) */
.nk-detail-icons {
  display: flex;
  gap: var(--nk-space-24);
  width: 100%;
}
.nk-detail-icon {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: var(--nk-space-16);
}
.nk-detail-icon__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border-radius: var(--nk-radius-8);
  background: var(--nk-color-icon-bg);
}
.nk-detail-icon__media img {
  height: 36px;
  width: auto;
}
.nk-detail-icon__label {
  margin: 0;
  font: var(--nk-text-p18-b);
  color: var(--nk-color-black);
  text-align: center;
}

/* 교차 배치 특징 행(.nk-detail-feature) 재사용 시, 인트로 아래 3개가 나오는
   섹션(지역별/업종별/조건별 검색)은 제목·설명이 한 단계 작다 — 상위 인트로가
   이미 큰 제목을 갖고 있어서다. */
.nk-detail-feature--sm .nk-detail-feature__title {
  font: var(--nk-text-p24-b);
}
.nk-detail-feature--sm .nk-detail-feature__desc {
  font: var(--nk-text-p16-m);
}

/* "리드 보호 시스템" 3카드(.nk-comp 재사용)도 같은 이유로 설명 텍스트가 작다. */
.nk-comp--sm .nk-comp__desc {
  font: var(--nk-text-p16-m);
}

/* 메인(index.html)의 "세이프존 자세히 보기"가 가리키는 자리. 지금 헤더는
   position:relative 라 가릴 일이 없지만, 고정 헤더로 바뀌어도 제목이 헤더
   밑으로 숨지 않도록 미리 여유를 둔다. */
#safezone {
  scroll-margin-top: calc(var(--nk-header-height) + var(--nk-space-24));
}

/* 지도 검색·세이프존의 왼쪽 칸은 배지부터 본문까지 전부 왼쪽 정렬이다
   (데스크톱·모바일 공통). 되돌려야 할 것이 둘 있다 —
   .nk-pill-badge 는 기본이 align-self:center 이고, 모바일 미디어쿼리에
   .nk-detail-intro--left 를 가운데로 바꾸는 규칙이 있다. 아래 두 규칙은
   구체도가 0,2,0 이라 미디어쿼리 안의 0,1,0 규칙보다 우선한다. */
.nk-detail-map__col {
  align-items: flex-start;
  text-align: left;
}
.nk-detail-map__col .nk-pill-badge {
  align-self: flex-start;
}
.nk-detail-map__col .nk-detail-intro--left {
  align-items: flex-start;
  text-align: left;
}

/* 지도 검색 섹션: 좌측 배지+텍스트 / 우측 지도 이미지 */
.nk-detail-map {
  display: flex;
  gap: var(--nk-space-40);
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}
.nk-detail-map__col {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-24);
  flex: 1 1 293px;
  min-width: 0;
}
.nk-detail-map__image {
  display: block;
  flex: 1 1 621px;
  min-width: 0;
  height: 380px;
  border-radius: var(--nk-radius-16);
  object-fit: cover;
}

/* ----- 세이프존 (Figma node 733:3854) -------------------------
   지도 검색 섹션(.nk-detail-map)과 같은 2단을 쓰고, 오른쪽 칸만 "카드 3개 +
   모바일 점 인디케이터" 묶음(.nk-swipe)으로 바꾼다. 점은 모바일에서만 보인다.
   카드는 .nk-comp 를 그대로 쓰되 Figma 대로 연파랑 패널(blue-bg)에 가운데
   정렬이라 그 세 가지(배경·패딩·정렬)와 글자 크기만 여기서 덮는다. */
.nk-swipe {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-16);
  flex: 1 1 621px;
  min-width: 0;
}
.nk-swipe__viewport {
  position: relative; /* 화살표 버튼(.nk-carousel-btn)의 기준 */
  min-width: 0;
}
.nk-swipe__dots {
  display: none; /* 가로 스와이프가 되는 모바일에서만 보여준다 */
}
/* 카드 줄은 데스크톱·모바일 모두 가로 스크롤이다 — 카드 폭은 Figma 대로 226px
   고정이고 남는 폭에 들어가는 만큼만 보인다(PC 는 화살표, 모바일은 스와이프). */
.nk-detail-cards--swipe {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.nk-detail-cards--swipe::-webkit-scrollbar {
  display: none;
}
.nk-detail-cards--swipe > .nk-comp {
  flex: 0 0 226px;
  scroll-snap-align: start;
}
.nk-swipe .nk-comp {
  padding: var(--nk-space-24);
  border-radius: var(--nk-radius-16);
  background: var(--nk-color-blue-bg);
  text-align: center;
}
/* 그림은 모서리가 이미 둥근 일러스트라 카드 쪽에서 radius·배경을 주지 않는다.
   .nk-comp__media 가 이미 object-fit:cover 라 Figma(178x123 cover)와 같다 —
   실제 칸은 그보다 좁아(약 132px) 좌우가 조금 더 잘린다. */
.nk-swipe .nk-comp__media {
  height: 123px;
  border-radius: 0;
  background: none;
}
/* .nk-comp 는 그림·제목·설명이 모두 24px 간격인데, 여기선 제목과 설명이 8px 이라
   둘을 한 덩어리로 묶는다. */
.nk-comp__text {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-8);
  width: 100%;
}
.nk-swipe .nk-comp__title {
  font: var(--nk-text-p18-b);
}
.nk-swipe .nk-comp__desc {
  font: var(--nk-text-p15-m);
}
.nk-swipe .nk-comp__title,
.nk-swipe .nk-comp__desc {
  word-break: keep-all; /* 좁은 카드에서 낱말 중간이 끊기지 않게 */
}

/* 세이프존은 카드 줄과 고지 사이가 40 이 아니라 24 다(Figma 733:3881). */
.nk-detail-block--tight {
  gap: var(--nk-space-24);
}

/* 작은 회색 안내(세이프존 하단 고지) — 줄바꿈은 <br>, 줄 간격 22px. */
.nk-notes {
  margin: 0;
  width: 100%;
  font: var(--nk-text-p14-m);
  color: var(--nk-color-gray-2);
}

/* ----- 구매 혜택 6개 (Figma node 733:3233) ---------------------
   아이콘 박스는 "지금 운영 중인 사업자" 섹션의 .nk-detail-icon__media 를
   그대로 쓴다(80px 둥근 사각 + 연파랑 배경). 데스크톱 2열, 모바일 1열. */
.nk-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--nk-space-40) var(--nk-space-24);
  width: 100%;
}
.nk-benefit {
  display: flex;
  align-items: center;
  gap: var(--nk-space-24);
}
/* 아이콘은 둥근 배경까지 그려진 그림 한 장이다 — 따로 배경 박스를 두지 않는다. */
.nk-benefit__icon {
  display: block;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}
.nk-benefit__title {
  margin: 0;
  font: var(--nk-text-p16-b);
  color: var(--nk-color-black);
}
.nk-benefit__desc {
  margin: 0;
  font: var(--nk-text-p15-m);
  color: var(--nk-color-black);
  word-break: keep-all;
}
/* 이 섹션만 배지와 제목 사이가 24 다(.nk-detail-intro 기본 간격 16 + 8). */
.nk-detail-intro > .nk-pill-badge {
  margin-bottom: var(--nk-space-8);
}

/* ----- 소개 영상 (유튜브) -------------------------------------
   처음에는 썸네일 + 재생 버튼만 두고, 누르면 js/program.js 가 이 버튼을
   같은 클래스의 <div> + iframe 으로 바꿔 끼운다(처음부터 iframe 을 두면
   유튜브 스크립트를 매번 받아 온다). 모서리는 카드와 같은 radius-16. */
.nk-video {
  position: relative;
  display: block;
  width: 100%;
  max-width: 860px;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  border-radius: var(--nk-radius-16);
  overflow: hidden;
  background: var(--nk-color-black);
  cursor: pointer;
}
.nk-video__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nk-video__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nk-video__play svg {
  width: 68px;
  height: 68px;
}
.nk-video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 결제 화면: 프로그램 비용 줄 안의 정가(줄긋기) */
.nk-pay-original {
  margin-right: var(--nk-space-8);
  color: var(--nk-color-gray-2);
}

/* 아코디언 패널 (자주 묻는 질문 / 개발 히스토리) */
/* .nk-panel / .nk-acc* / .nk-pager* 는 program-detail.html과 mypage-faq.html /
   mypage-notice.html이 함께 쓰는 공용 컴포넌트라 components.css로 옮겼다. */

/* 하단 도움 영역 */
/* .nk-help-row / .nk-help-card* 는 mypage-notice.html도 쓰게 되어 components.css로 옮겼다. */

/* ============================================================
   3. 프로그램-결제하기 (program-payment.html / node 192:749)
   ============================================================ */
/* 약관 동의 체크(.nk-agree*)는 signup.html도 쓰게 되어 css/components.css 로 이동했다. */

/* ============================================================
   5. 프로그램-구매완료 다운로드 (program-download.html / node 338:20121)
   결제하기 성공 후 다운로드 모달
   셸(.nk-modal / .nk-modal--download)은 css/components.css 재사용.
   아래는 다운로드 모달 본문 전용 규칙만 남긴다.
   ============================================================ */
.nk-dlmodal__body {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-16);
  width: 100%;
}
.nk-dlmodal__desc {
  margin: 0;
  font: var(--nk-text-p15-r);
  color: var(--nk-color-black);
}
.nk-dlmodal__meta {
  display: flex;
  gap: var(--nk-space-10);
  padding: var(--nk-space-16);
  background: var(--nk-color-bg);
  border-radius: var(--nk-radius-8);
  text-align: center;
}
.nk-dlmodal__meta-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nk-space-8);
  flex: 1 1 0;
  min-width: 0;
}
.nk-dlmodal__meta-k {
  margin: 0;
  font: var(--nk-text-p14-r);
  color: var(--nk-color-black);
}
.nk-dlmodal__meta-v {
  margin: 0;
  font: var(--nk-text-p15-m);
  color: var(--nk-color-black);
}
.nk-dlmodal__note {
  margin: 0;
  font: var(--nk-text-p13-r);
  color: var(--nk-color-black);
}
.nk-dlmodal__actions {
  display: flex;
  gap: var(--nk-space-16);
  width: 100%;
}
.nk-dlmodal__actions .nk-btn { flex: 1 1 0; min-width: 0; }

/* ============================================================
   반응형 : 1440 / 768 / 375  (데스크톱 우선 · max-width)
   ============================================================ */
@media (max-width: 768px) {
  .nk-prog {
    padding-block: var(--nk-space-24) var(--nk-space-48);
  }

  .nk-prog-cols,
  .nk-detail-cols,
  .nk-detail-feature,
  .nk-detail-cards,
  .nk-detail-map,
  .nk-detail-row {
    flex-direction: column;
  }

  /* 가로였을 때 쓰던 align-items:flex-start 가 세로로 바뀌면 "가로폭을 내용에
     맞춤"이 된다 — 그러면 본문 칸 폭이 내용에 끌려다녀서, 가로 스크롤 카드처럼
     내용이 화면보다 넓은 블록이 들어오면 페이지 전체가 옆으로 밀린다.
     세로로 쌓을 때는 폭을 화면에 맞춘다(아래 aside width:100% 와 같은 뜻). */
  .nk-prog-cols,
  .nk-detail-cols,
  .nk-detail-map {
    align-items: stretch;
  }

  /* 정보 아이콘 5개: 모바일은 한 줄에 2개씩(마지막 1개는 왼쪽 칸에 남는다).
     세로 1열로 쌓으면 스크롤이 너무 길어져서 2열 그리드로 바꾼다.
     gap 은 데스크톱과 같은 토큰 유지. */
  .nk-detail-icons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .nk-detail-row .nk-detail-intro { width: 100%; }
  .nk-prog-cols__aside,
  .nk-detail-side {
    position: static;
    width: 100%;
  }

  .nk-prog-item { max-width: 100%; }

  /* 하단 고정 바. 주문 정보 카드의 [결제하기]·비활성 사유는 이 바가 대신하므로
     숨긴다(카드의 금액 요약은 그대로 둔다 — 시트에서 다시 보여 준다). */
  .nk-pay-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nk-space-12);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;              /* 모달(1000)보다 아래 — 시트가 바를 덮는다 */
    padding: var(--nk-space-12) var(--nk-space-16)
      calc(var(--nk-space-12) + env(safe-area-inset-bottom));
    background: var(--nk-color-surface);
    border-top: 1px solid var(--nk-color-border);
  }
  /* display:flex 가 [hidden] 기본 동작을 가리는 문제 방지 — 결제할 수 없는
     화면(요금제 없음·잘못된 접근)에서는 js 가 hidden 으로 숨긴다. */
  .nk-pay-bar[hidden] {
    display: none;
  }
  .nk-pay-bar__amount {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .nk-pay-bar__label {
    font: var(--nk-text-p12-r);
    color: var(--nk-color-text-sub);
  }
  .nk-pay-bar__value {
    font: var(--nk-text-p18-b);
    color: var(--nk-color-black);
    white-space: nowrap;
  }
  .nk-pay-bar__btn {
    flex-shrink: 0;
    width: auto;
    padding-inline: var(--nk-space-24);
  }
  /* 하단 바에 본문·푸터가 가리지 않게 — 바 높이(약 72) + 안전영역 */
  .nk-pay-has-bar .nk-footer {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }
  .nk-pay-has-bar .nk-prog-cols__aside .nk-card [data-pay-submit],
  .nk-pay-has-bar .nk-prog-cols__aside .nk-card .nk-pay-sum__reason {
    display: none;
  }

  /* 금액표: 값이 길어지면(월 구독료 / 첫 구독료 결제일) 라벨까지 같이 쪼그라들어
     "첫 구독료 결 / 제일"처럼 단어 중간에서 끊기던 문제. 라벨은 한 줄로 두고,
     안 들어가는 값만 통째로 아랫줄(오른쪽 정렬)로 내린다. */
  .nk-dl__row { flex-wrap: wrap; }
  .nk-dl__row > span:first-child { flex-shrink: 0; }
  .nk-dl__row > span:last-child { flex: 1 1 auto; }

  .nk-detail-feature__media {
    width: 100%;
    height: 200px;
    /* 세로로 쌓일 때는 이미지가 항상 먼저 오게 강제한다 — "최대 노출 제한" 섹션은
       데스크톱 교차배치상 DOM에 텍스트 다음에 이미지가 오는데, 그걸 그대로 쌓으면
       모바일에서 텍스트 > 이미지 순서가 돼버린다. */
    order: -1;
  }
  /* 특징 행 텍스트 묶음을 구매 혜택 항목과 똑같이 — 데스크톱 전용 간격만 끄면
     위 묶음 규칙(.nk-benefit__text 와 공유)의 기본값이 그대로 적용된다. */
  .nk-detail-feature__text { --nk-stack-gap: initial; }
  /* 특징 행 제목 18px. --sm 변형은 데스크톱에서 구체도 0,2,0 규칙을 갖고 있어
     (.nk-detail-feature--sm .nk-detail-feature__title) 여기서도 같은 구체도로
     적어야 덮인다. 혜택 항목 제목(.nk-benefit__title)은 기본 규칙의 16px 그대로. */
  .nk-detail-feature__title,
  .nk-detail-feature--sm .nk-detail-feature__title { font: var(--nk-text-p18-b); }
  .nk-detail-feature__desc,
  .nk-comp__desc,
  .nk-detail-feature--sm .nk-detail-feature__desc,
  .nk-comp--sm .nk-comp__desc { font: var(--nk-text-p15-m); }
  /* 설명 줄바꿈도 혜택 항목과 같게(낱말 중간에서 끊지 않는다). */
  .nk-benefit__desc,
  .nk-detail-feature__desc,
  .nk-detail-feature--sm .nk-detail-feature__desc { word-break: keep-all; }
  .nk-comp__title { font: var(--nk-text-p18-b); }
  /* 정보 아이콘 5개 라벨은 2열로 좁아지므로 한 단계 작게(굵기는 그대로). */
  .nk-detail-icon__label { font: var(--nk-text-p16-b); }
  .nk-detail-hero { height: 200px; }

  .nk-detail-banner { height: auto; min-height: 240px; padding-block: var(--nk-space-24); }
  .nk-detail-banner__inner {
    padding-inline: 0;
    width: 100%;
  }
  /* font-size만 바꾸면 PC용 px 행간(46px/26px)이 그대로 남아 줄 간격이 벌어진다 —
     행간까지 같이 바뀌도록 폰트 토큰째 교체한다. */
  .nk-detail-banner__title { font: var(--nk-text-p24-b); line-height: 34px; }
  .nk-detail-banner__desc { font: var(--nk-text-p16-m); }
  /* --new 배너만: __inner 의 좌우 패딩을 모바일에서 0으로 두기 때문에
     본문이 화면 끝에 붙는다. plus 배너는 문구가 짧아 그대로 둔다. */
  .nk-detail-banner--new .nk-detail-banner__desc {
    padding-inline: var(--nk-space-16);
  }
  .nk-detail-intro__title { font: var(--nk-text-p24-b); }
  .nk-detail-intro--left { align-items: center; text-align: center; }
  .nk-detail-map__col { flex-basis: auto; }
  .nk-detail-map__image { flex-basis: auto; width: 100%; height: 240px; }

  /* 세이프존 카드: 위 .nk-detail-cards 공통 규칙이 세로로 쌓는 것만 되돌린다
     (가로 스크롤·카드 폭 226px 는 데스크톱과 공용). 이 블록이 공통 규칙보다
     뒤에 있어야 flex-direction 이 덮인다. */
  .nk-swipe { flex-basis: auto; }
  .nk-detail-cards--swipe {
    flex-direction: row;
  }
  /* 모바일은 손가락으로 넘긴다 — 화살표 대신 점 인디케이터를 쓴다. */
  .nk-swipe .nk-carousel-btn {
    display: none;
  }
  .nk-swipe__dots {
    display: flex;
    justify-content: center;
    gap: var(--nk-space-8);
  }
  .nk-swipe__dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: var(--nk-radius-pill);
    background: var(--nk-color-gray-line);
  }
  .nk-swipe__dot.is-active {
    background: var(--nk-color-blue-1);
  }

  /* 구매 혜택: 1열 */
  .nk-benefits { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 375px) {
  .nk-prog { padding-inline: var(--nk-space-16); }
  .nk-card { padding: var(--nk-space-16); }
  .nk-panel { padding: var(--nk-space-24) var(--nk-space-16); }
  .nk-buy { padding: var(--nk-space-24) var(--nk-space-16); }
}

/* 상품 아이콘: 실제 아이콘(API icon_url)이 로드될 때까지 숨김 — js/program-detail.js setIcon() */
img[data-icon-pending] {
  visibility: hidden;
}