/* =============================================================
   components.css — 페이지 공용 UI 프리미티브
   여러 페이지에서 반복되던 규칙을 한곳으로 모은다.
     - .nk-btn        (기존 main.css / program.css 중복 통합)
     - .nk-modal      모달 셸 (기존 modal.css / program.css .nk-dlmodal 통합)
     - .nk-input      테두리 입력창 (기존 modal.css .nk-login__input /
                      find-account.css .nk-field__input 통합)
     - .nk-checkbox   커스텀 체크박스 (기존 program.css .nk-agree__box)
     - .nk-panel / .nk-acc* / .nk-pager*   패널·아코디언·페이저 (기존 program.css,
                      program-detail.html + mypage-faq.html/mypage-notice.html 공용)
     - .nk-feature-card / .nk-icon-step* / .nk-content-row / .nk-icon-grid* /
       .nk-pill-badge     상품 상세 콘텐츠 블록 (특정 상품에
                      종속되지 않는 범용 컴포넌트 — program-detail-new.html에서
                      처음 썼지만 이후 다른 상품 상세 페이지도 재사용)
     - .nk-my-card / .nk-my-quick(기본형)  흰색 카드 셸 + 퀵링크 아이템
                      (기존 mypage.css, mypage.html 대시보드 + 공통 헤더
                      모바일 풀스크린 메뉴 공용)
     - .nk-table-responsive  768px 이하에서 <table> 행을 "라벨: 값" 카드로
                      자동 전환(js/table-responsive.js와 한 쌍). 마이페이지의
                      모든 표(구매 내역/정기 결제/다운로드 이력/계정·라이선스/
                      1:1 문의)가 공용으로 쓴다 — 페이지마다 카드 마크업을
                      따로 만들지 않는다.
   로드 순서: variables.css → base.css → components.css → (페이지별 CSS)
   색상·간격·타이포는 전부 css/variables.css 의 --nk-* 토큰만 사용.
   전역 box-sizing 리셋은 base.css 가 담당한다.
   ============================================================= */

/* ----- 버튼 ------------------------------------------------- */
.nk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--nk-control-height);            /* 44px */
  padding-inline: var(--nk-space-24);
  border: 0;
  border-radius: var(--nk-radius-8);
  font: var(--nk-text-p15-m);
  color: var(--nk-color-black);
  background: transparent;
  text-decoration: none;
  cursor: pointer;
}
/* display: inline-flex가 브라우저 기본 [hidden]{display:none} 규칙과
   명시도가 같아서(둘 다 0,0,1,0) 그냥 두면 .hidden = true로 감춰지지
   않는다 — .nk-modal[hidden]과 같은 이유로 명시적으로 다시 꺼준다.
   (실제로 이 버그 때문에 로그인 상태에서도 모바일 메뉴의 "로그인/회원가입"
   버튼이 안 숨겨지는 문제가 있었다.) */
.nk-btn[hidden] {
  display: none;
}
.nk-btn--primary {
  background: var(--nk-color-primary);
  color: var(--nk-color-white);
}
.nk-btn--primary:hover {
  background: var(--nk-color-primary-hover);
}
.nk-btn--outline {
  border: 1px solid var(--nk-color-primary);
  color: var(--nk-color-primary);
  background: var(--nk-color-white);
}
.nk-btn--outline:hover {
  background: var(--nk-color-blue-bg);
}
.nk-btn--neutral {
  border: 1px solid var(--nk-color-gray-line);
  color: var(--nk-color-black);
  background: var(--nk-color-bg);
}
/* 결제 실패 행의 "결제 변경"처럼, 지금 해야 할 일을 빨갛게 강조하는 보조 버튼 */
.nk-btn--danger {
  border: 1px solid var(--nk-color-red-1);
  color: var(--nk-color-red-1);
  background: var(--nk-color-white);
}
.nk-btn--danger:hover {
  background: var(--nk-color-red-bg);
}
.nk-btn--wide {
  min-width: 254px;
  max-width: 100%;
}
.nk-btn--block {
  width: 100%;
}
/* <a class="nk-btn">는 disabled를 못 쓰므로 aria-disabled로 같은 상태를 표현한다 */
.nk-btn:disabled,
.nk-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}
.nk-btn--dark {
  background: var(--nk-color-gray-2);
  color: var(--nk-color-white);
}
/* 작은 버튼 (표 안 액션: 다운로드 / 상세 보기 / 재결제 / 결제 변경 / 기록 보기 등) */
.nk-btn--sm {
  height: 28px;
  padding-inline: var(--nk-space-16);
  font: var(--nk-text-p14-m);
  white-space: nowrap;
}

/* ----- 테두리 입력창 -------------------------------------- */
.nk-input {
  width: 100%;
  padding: var(--nk-pad-input);                /* 9px 16px */
  border: 1px solid var(--nk-color-gray-line);
  border-radius: var(--nk-radius-4);
  font: var(--nk-text-p15-r);
  color: var(--nk-color-black);
  background: var(--nk-color-white);
}
.nk-input::placeholder {
  color: var(--nk-color-gray-1);
}
.nk-input:focus {
  outline: none;
  border-color: var(--nk-color-blue-1);
}
.nk-input:read-only,
.nk-input:read-only:focus {
  color: var(--nk-color-gray-1);
  background: var(--nk-color-gray-input-bg);
  border-color: var(--nk-color-gray-line);
}

/* ----- 커스텀 체크박스 ----------------------------------- */
.nk-checkbox {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-content: center;
  border: 1px solid var(--nk-color-gray-line);
  border-radius: var(--nk-radius-2);
  background: var(--nk-color-surface);
  cursor: pointer;
}
.nk-checkbox::after {
  content: "";
  width: 10px;
  height: 6px;
  border: 2px solid var(--nk-color-white);
  border-top: 0;
  border-right: 0;
  transform: translateY(-1px) rotate(-45deg) scale(0);
  transition: transform 0.1s ease;
}
.nk-checkbox:checked {
  background: var(--nk-color-primary);
  border-color: var(--nk-color-primary);
}
.nk-checkbox:checked::after {
  transform: translateY(-1px) rotate(-45deg) scale(1);
}

/* ----- 모달 셸 ------------------------------------------- */
/* 표시 제어는 .nk-modal 의 [hidden] 속성 토글(js/modal.js, js/program.js). */
.nk-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--nk-space-24);
}
.nk-modal[hidden] {
  display: none;
}
.nk-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}
.nk-modal__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nk-space-32);                 /* 32px */
  width: 408px;
  max-width: 100%;
  padding: var(--nk-space-60) var(--nk-space-40);   /* 60 40 */
  background: var(--nk-color-white);
  border-radius: var(--nk-radius-16);
}
.nk-modal__close {
  position: absolute;
  top: var(--nk-space-16);
  right: var(--nk-space-16);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.nk-modal__close svg {
  display: block;
  width: 20px;
  height: 20px;
}
.nk-modal__title {
  margin: 0;
  width: 100%;
  font: var(--nk-text-p24-b);
  color: var(--nk-color-black);
  text-align: center;
}
/* 모달 본문 안내 문구(제목 아래 한두 줄). 정지/탈퇴 계정 안내처럼 폼 없이
   문구만 있는 모달에서 쓴다. */
.nk-modal__text {
  margin: 0;
  width: 100%;
  font: var(--nk-text-p15-r);
  color: var(--nk-color-black);
  text-align: center;
}
/* 모달 하단 버튼 2개짜리 행(취소/확인 등). mypage.css의 .nk-my-sub__actions와
   같은 패턴이지만, mypage.css를 안 불러오는 공개 페이지 모달(로그아웃 확인
   등)에서도 써야 해서 공용 셸인 여기 둔다. */
.nk-modal__actions {
  display: flex;
  gap: var(--nk-space-16);
  width: 100%;
}
.nk-modal__actions .nk-btn {
  flex: 1 0 0;
  min-width: 0;
}

/* 배경 스크롤 잠금 */
body.nk-modal-open {
  overflow: hidden;
}

/* ----- 패널 / 아코디언 / 페이저 ---------------------------- */
/* 원래 program.css에 있던 걸 program-detail.html과 mypage-faq.html /
   mypage-notice.html이 함께 쓰게 되어 이쪽으로 옮겼다. */
.nk-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nk-space-40);
  width: 100%;
  padding: var(--nk-space-40) var(--nk-space-24);
  background: var(--nk-color-surface);
  border-radius: var(--nk-radius-16);
}
.nk-panel--blue { background: var(--nk-color-blue-bg); }
.nk-panel__title {
  margin: 0;
  font: var(--nk-text-p24-b);
  color: var(--nk-color-black);
  text-align: center;
}

.nk-acc {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-8);
  width: 100%;
}
/* display: flex가 [hidden] 기본 동작을 가리는 문제 방지(.nk-btn[hidden]과 같은 이유) */
.nk-acc[hidden] {
  display: none;
}
.nk-acc__item {
  background: var(--nk-color-surface);
  border: 1px solid var(--nk-color-gray-line);
  border-radius: var(--nk-radius-8);
  overflow: hidden;
}
.nk-acc__item.is-open { border-color: var(--nk-color-primary); }
.nk-acc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nk-space-8);
  width: 100%;
  padding: var(--nk-space-12) var(--nk-space-16);
  border: 0;
  background: transparent;
  font: var(--nk-text-p15-b);
  color: var(--nk-color-black);
  text-align: left;
  cursor: pointer;
}
.nk-acc__mark {
  display: grid;
  place-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: var(--nk-radius-16);
  background: var(--nk-color-blue-line);
  color: var(--nk-color-primary);
  transition: transform 0.15s ease;
}
.nk-acc__mark svg { display: block; }
.nk-acc__item.is-open .nk-acc__mark {
  background: var(--nk-color-primary);
  color: var(--nk-color-white);
  transform: rotate(180deg);
}
.nk-acc__body {
  padding: 0 var(--nk-space-16) var(--nk-space-12);
  font: var(--nk-text-p15-r);
  color: var(--nk-color-text-sub);
}
.nk-acc__body p { margin: 0; }

.nk-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--nk-space-4);
}
.nk-pager__btn {
  display: grid;
  place-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--nk-radius-16);
  background: transparent;
  font: var(--nk-text-p13-r);
  color: var(--nk-color-black);
  cursor: pointer;
}
.nk-pager__btn.is-active {
  background: var(--nk-color-blue-line);
  color: var(--nk-color-primary);
  font-weight: var(--nk-font-weight-bold);
}
.nk-pager__btn--edge { background: var(--nk-color-gray-line); }
.nk-pager__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ----- 구분선 ------------------------------------------------ */
/* 원래 program.css에 있던 걸 mypage-notice-detail.html도 쓰게 되어 이쪽으로 옮겼다. */
.nk-line {
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--nk-color-gray-line);
}

/* ----- 약관 동의 체크 (기존 program.css .nk-agree 통합) --------- */
/* 원래 program.css(프로그램-결제하기)에 있던 걸 signup.html도 쓰게 되어 이쪽으로 옮겼다. */
.nk-agree {
  display: flex;
  align-items: center;
  gap: var(--nk-space-8);
}
.nk-agree__label {
  font: var(--nk-text-p15-m);
  color: var(--nk-color-black);
}
.nk-agree__link {
  color: var(--nk-color-black);
  text-decoration: underline;
}
.nk-agree__link:hover {
  color: var(--nk-color-primary);
}
.nk-agree--all { font-weight: var(--nk-font-weight-bold); }
/* 동의 항목 옆 "보기" 링크(회원가입 약관 동의 · 마이페이지 마케팅 수신 설정) */
.nk-agree__view {
  flex-shrink: 0;
  font: var(--nk-text-p13-r);
  color: var(--nk-color-gray-2);
  text-decoration: underline;
}
.nk-agree__view:hover {
  color: var(--nk-color-primary);
}

/* ----- 검색창 (돋보기 아이콘 + 입력창) ----------------------- */
/* 원래 program.css에 있던 걸 mypage-faq.html도 쓰게 되어 이쪽으로 옮겼다. */
.nk-prog-search {
  display: flex;
  align-items: center;
  gap: var(--nk-space-10);
  width: 326px;
  max-width: 100%;
  padding: 9px 18px;
  background: var(--nk-color-surface);
  border: 1px solid var(--nk-color-gray-line);
  border-radius: var(--nk-radius-4);
}
.nk-prog-search__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--nk-color-gray-1);
}
.nk-prog-search__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: var(--nk-text-p15-r);
  color: var(--nk-color-black);
}
.nk-prog-search__input::placeholder { color: var(--nk-color-text-placeholder); }

/* 다운로드 모달 (program-download.html) — 딤만 살짝 옅게 */
.nk-modal--download .nk-modal__overlay {
  background: rgba(0, 0, 0, 0.4);
}

/* ----- 하단 도움 영역 (도움이 필요하신가요 + 고객센터) --------- */
/* 원래 program.css(프로그램-상세보기)에 있던 걸 mypage-notice.html도 쓰게
   되어 이쪽으로 옮겼다. */
.nk-help-row {
  display: flex;
  gap: var(--nk-space-24);
  width: 100%;
}
.nk-help-card {
  flex: 1 1 0;
  min-width: 0;
  padding: var(--nk-space-40) var(--nk-space-24);
  border-radius: var(--nk-radius-16);
}
.nk-help-card--tip {
  display: flex;
  align-items: center;
  gap: var(--nk-space-24);
  background: var(--nk-color-blue-bg);
}
.nk-help-card__char {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}
.nk-help-card__tip-title {
  margin: 0 0 var(--nk-space-8);
  font: var(--nk-text-p24-b);
  color: var(--nk-color-black);
}
.nk-help-card__tip-desc {
  margin: 0;
  font: var(--nk-text-p15-r);
  color: var(--nk-color-black);
}
.nk-help-card--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nk-space-24);
  background: var(--nk-color-surface);
  text-align: center;
}
.nk-help-card__label {
  margin: 0;
  font: var(--nk-text-p15-b);
  color: var(--nk-color-black);
}
.nk-help-card__phone {
  margin: 0;
  font: var(--nk-text-p32-b);
  color: var(--nk-color-primary);
}
.nk-help-card__hours {
  margin: 0;
  font: var(--nk-text-p15-m);
  color: var(--nk-color-text-sub);
}

/* ----- 특징 카드 (오렌지 테두리) ---------------------------- */
/* 원래 program-detail-new.html("내편비즈 뉴") 전용으로 만들었지만, 특정
   상품에 종속되지 않는 범용 카드라 다른 상품 상세 페이지도 재사용할 수
   있게 여기 둔다. */
.nk-feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nk-space-16);
  flex: 1 1 0;
  min-width: 0;
  padding: var(--nk-space-40) var(--nk-space-24);
  border: 1px solid var(--nk-orange);
  border-radius: var(--nk-radius-16);
  background: var(--nk-orange-bg);
  text-align: center;
}
.nk-feature-card__media {
  display: block;
  width: 100px;
  height: 100px;
  object-fit: contain;
}
.nk-feature-card__title {
  margin: 0;
  font: var(--nk-text-p24-b);
  color: var(--nk-color-black);
}
.nk-feature-card__desc {
  margin: 0;
  font: var(--nk-text-p14-r);
  color: var(--nk-color-black);
}

/* ----- 아이콘 스텝 (원형 이미지 + 라벨, 화살표로 연결) --------- */
.nk-icon-step-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--nk-space-32);
  width: 100%;
}
.nk-icon-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nk-space-16);
  flex: 1 1 0;
  min-width: 0;
}
.nk-icon-step__media {
  display: block;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
}
.nk-icon-step__label {
  margin: 0;
  font: var(--nk-text-p18-m);
  color: var(--nk-color-black);
  text-align: center;
}
.nk-icon-step__arrow {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  align-self: center;
  margin-top: 44px; /* 88px 원형 이미지 중앙 높이에 맞춤 */
}

/* ----- 콘텐츠 행 (이미지 + 텍스트 좌우 배치) ------------------- */
.nk-content-row {
  display: flex;
  gap: var(--nk-space-24);
  align-items: center;
  width: 100%;
}
.nk-content-row.reverse {
  flex-direction: row-reverse;
}
.nk-content-row__media {
  display: block;
  width: 411px;
  height: 291px;
  flex-shrink: 0;
  border-radius: var(--nk-radius-16);
  background: var(--nk-color-image-placeholder);
  object-fit: cover;
}
.nk-content-row__text {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-16);
  flex: 1 1 0;
  min-width: 0;
}
.nk-content-row__title {
  margin: 0;
  font: var(--nk-text-p24-b);
  color: var(--nk-color-black);
}
.nk-content-row__desc {
  margin: 0;
  font: var(--nk-text-p16-m);
  color: var(--nk-color-black);
}

/* ----- 아이콘 그리드 (아이콘 박스 + 라벨 가로 나열) ------------- */
.nk-icon-grid {
  display: flex;
  gap: var(--nk-space-24);
  width: 100%;
}
.nk-icon-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nk-space-16);
  flex: 1 1 0;
  min-width: 0;
}
.nk-icon-grid__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-orange-bg);
}
.nk-icon-grid__media img {
  height: 36px;
  width: auto;
}
.nk-icon-grid__label {
  margin: 0;
  font: var(--nk-text-p18-b);
  color: var(--nk-color-black);
  text-align: center;
}

/* ----- 스크롤 등장 모션 (js/reveal.js 와 한 쌍) ----------------
   [data-reveal] 이 화면에 들어오면 아래에서 살짝 올라오며 나타난다.
   숨기는 규칙을 <html>.nk-reveal 안에만 둬서, js/reveal.js 가 실행되지
   않거나 prefers-reduced-motion 이면 **처음부터 그냥 보인다**.
   지그재그 같은 배치용 transform 은 바깥 래퍼에 주고 이건 안쪽 요소에
   붙인다 — 둘이 같은 요소에 겹치면 서로 덮어쓴다. */
.nk-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.nk-reveal [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}
/* 같이 들어올 때 순서대로 0.12s 씩 늦춘다. */
.nk-reveal [data-reveal-delay="1"] { transition-delay: 0.12s; }
.nk-reveal [data-reveal-delay="2"] { transition-delay: 0.24s; }
.nk-reveal [data-reveal-delay="3"] { transition-delay: 0.36s; }
.nk-reveal [data-reveal-delay="4"] { transition-delay: 0.48s; }
.nk-reveal [data-reveal-delay="5"] { transition-delay: 0.60s; }
.nk-reveal [data-reveal-delay="6"] { transition-delay: 0.72s; }
/* 모바일은 화면이 짧아 40px 이 과하다 — 올라오는 거리만 줄인다. */
@media (max-width: 768px) {
  .nk-reveal [data-reveal] {
    transform: translateY(24px);
  }
  .nk-reveal [data-reveal].is-revealed {
    transform: none;
  }
}

/* ----- 가로 슬라이더 화살표 (40px 원형) ------------------------
   마이페이지 "구독중인 프로그램"의 .nk-my-sub-carousel__btn 과 같은 모양인데
   그 규칙은 mypage.css 에만 있어 프로그램 페이지에서 못 쓴다 — 공용으로 여기
   둔다(그 화면을 다음에 손볼 때 이 클래스로 합치면 중복이 없어진다).
   위치는 쓰는 쪽에서 position:relative 인 부모를 잡아 준다. */
.nk-carousel-btn {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: grid;
  place-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--nk-color-gray-line);
  border-radius: 50%;
  background: var(--nk-color-white);
  /* variables.css 에 그림자 토큰이 없어 header.css 드롭다운 카드와 같은 값을 쓴다 */
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
  color: var(--nk-color-black);
  cursor: pointer;
}
/* display:grid 가 [hidden] 을 덮으므로 명시적으로 숨긴다(.nk-btn[hidden] 과 같은 이유) */
.nk-carousel-btn[hidden] {
  display: none;
}
.nk-carousel-btn:hover {
  border-color: var(--nk-color-gray-1);
}
.nk-carousel-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.nk-carousel-btn img {
  display: block;
  width: 24px;
  height: 24px;
}
/* 카드 줄 안쪽 끝에 살짝 들여 얹는다 — 카드가 화면 끝까지 흘러가는 배치라
   바깥에 두면 버튼이 창 가장자리에 닿는다. */
.nk-carousel-btn--prev {
  left: var(--nk-space-8);
  transform: translateY(-50%);
}
.nk-carousel-btn--next {
  right: var(--nk-space-8);
  transform: translateY(-50%);
}

/* ----- pill 배지 (오렌지 테두리) ------------------------------ */
.nk-pill-badge {
  display: inline-flex;
  /* 부모(.nk-detail-map__col 등)가 flex-direction:column
     이라 기본 align-items:stretch로 가로를 다 채워버린다 — 내용 크기만큼만
     차지하면서 컬럼 가운데 오도록 고정(데스크톱·모바일 공통). */
  align-self: center;
  align-items: center;
  justify-content: center;
  padding: var(--nk-space-4) var(--nk-space-16);
  border: 1px solid var(--nk-orange);
  border-radius: var(--nk-radius-pill);
  background: var(--nk-orange-bg);
  font: var(--nk-text-p15-b);
  color: var(--nk-orange);
}
/* 파란 배지(세이프존 / 구매 혜택 — Figma node 733:3233). 같은 알약 모양에
   색만 brand blue 로 바꾼다. */
.nk-pill-badge--blue {
  border-color: var(--nk-color-blue-1);
  background: var(--nk-color-blue-bg-2);
  color: var(--nk-color-blue-1);
}

/* 어두운 사진 위 배지(메인 하단 CTA). 흰 반투명 테두리·배경에 흰 글씨.
   이 배지는 왼쪽 정렬 글 묶음 안에 있어서, 기본값 align-self:center 를 되돌린다. */
.nk-pill-badge--on-dark {
  align-self: flex-start;
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.12);
  color: var(--nk-color-white);
}

/* ----- 마이페이지 카드 셸 / 퀵링크 아이템(기본형) --------------- */
/* 원래 css/mypage.css에 있던 걸 공통 헤더(components/header.html)의 모바일
   풀스크린 메뉴도 쓰게 되어 이쪽으로 옮겼다. 설명 텍스트(__body/__desc)와
   3열 그리드 배치(.nk-my-quick-grid)는 마이페이지 대시보드 전용이라
   css/mypage.css에 그대로 남겨뒀다. */
.nk-my-card {
  width: 100%;
  padding: var(--nk-space-24);
  background: var(--nk-color-white);
  border-radius: var(--nk-radius-16);
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-16);
}
/* display: flex가 [hidden] 기본 동작을 가리는 문제 방지(.nk-btn[hidden]과 같은 이유) */
.nk-my-card[hidden] {
  display: none;
}
.nk-my-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.nk-my-card__title {
  margin: 0;
  font: var(--nk-text-p18-b);
  color: var(--nk-color-black);
}
.nk-my-quick {
  display: flex;
  gap: var(--nk-space-16);
  align-items: flex-start;
  padding: var(--nk-space-24);
  background: var(--nk-color-white);
  border: 1px solid var(--nk-color-blue-line);
  border-radius: var(--nk-radius-8);
  text-decoration: none;
  color: inherit;
}
.nk-my-quick:hover {
  border-color: var(--nk-color-primary);
}
.nk-my-quick__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: var(--nk-space-10);
  background: var(--nk-color-icon-bg);
  border-radius: var(--nk-radius-8);
}
.nk-my-quick__icon img {
  display: block;
  width: 100%;
  height: 100%;
}
.nk-my-quick__title {
  margin: 0;
  font: var(--nk-text-p15-b);
  color: var(--nk-color-black);
}

/* ----- 라벨:값 한 줄 (구독 정보 / 상세보기·재결제·기록보기 모달 공용) ---
   원래 css/mypage.css에 있던 걸 공통 헤더의 모바일 풀스크린 메뉴도 같은
   구독 카드(.nk-my-sub)를 쓰게 되어 이쪽으로 옮겼다. */
.nk-my-kv {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--nk-space-16);
  width: 100%;
  font: var(--nk-text-p14-m);
}
.nk-my-kv__label {
  color: var(--nk-color-gray-2);
  white-space: nowrap;
}
.nk-my-kv__value {
  color: var(--nk-color-black);
  text-align: right;
}
/* 값 자리에 배지 + 버튼처럼 두 개를 나란히 둘 때 */
.nk-my-kv__group {
  display: flex;
  align-items: center;
  gap: var(--nk-space-8);
}
.nk-my-kvlist {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-10);
  width: 100%;
}
.nk-my-kvlist .nk-my-kv {
  font: var(--nk-text-p15-m);
}

/* ----- 구독중인 프로그램 카드 -------------------------------- */
/* 카드가 화면 폭을 넘치면 가로 스와이프/스크롤로 나머지를 본다(카드
   개수가 1~2개뿐이면 넘칠 일이 없어 스크롤바 자체가 안 보이는 게 정상). */
.nk-my-sub-grid {
  display: flex;
  gap: var(--nk-space-24);
  align-items: stretch;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: var(--nk-space-8); /* 스크롤바가 카드 그림자를 가리지 않도록 */
}
.nk-my-sub-grid::-webkit-scrollbar {
  height: 6px;
}
.nk-my-sub-grid::-webkit-scrollbar-track {
  background: transparent;
}
.nk-my-sub-grid::-webkit-scrollbar-thumb {
  background: var(--nk-color-gray-line);
  border-radius: var(--nk-radius-pill);
}
.nk-my-sub {
  flex: 0 0 330px;
  width: 330px;
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-10);
  padding: var(--nk-space-24);
  background: var(--nk-color-blue-bg);
  border: 1px solid var(--nk-color-blue-line);
  border-radius: var(--nk-radius-16);
}
.nk-my-sub__head {
  display: flex;
  align-items: center;
  gap: var(--nk-space-8);
}
.nk-my-sub__thumb {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.nk-my-sub__name {
  font: var(--nk-text-p15-b);
  color: var(--nk-color-black);
}
/* .nk-my-sub__head를 프로그램 상세 링크(<a>)로 쓸 때 — 밑줄 없이, hover 시
   프로그램명만 색이 바뀐다. */
a.nk-my-sub__head {
  text-decoration: none;
  color: inherit;
}
a.nk-my-sub__head:hover .nk-my-sub__name {
  color: var(--nk-color-primary);
}
/* 계정 중지 안내 (카드 헤드 아래) */
.nk-my-sub__notice {
  font: var(--nk-text-p13-r);
  color: var(--nk-color-red-1);
}
/* 오류가 아니라 단순 안내(라이선스 발급 대기 등) */
.nk-my-sub__notice--info {
  color: var(--nk-color-gray-2);
}
.nk-my-sub__notice a {
  color: inherit;
  text-decoration: underline;
}
.nk-my-sub__rows {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-8);
  width: 100%;
}
.nk-my-sub__actions {
  display: flex;
  gap: var(--nk-space-16);
  width: 100%;
}
.nk-my-sub__actions .nk-btn {
  flex: 1 0 0;
  min-width: 0;
}
/* 사용 IP가 아직 없을 때의 안내(첫 로그인 시 자동 등록) — 값이 아니라 설명이라
   회색 작은 글씨로 둔다. */
.nk-my-sub__ip-hint {
  font: var(--nk-text-p13-r);
  color: var(--nk-color-gray-2);
}
/* 정기결제 해지 / 해지 취소 — 카드 맨 아래 오른쪽의 작은 텍스트 링크.
   버튼 2개(메인 + 자세히 보기)와 무게를 맞추면 해지가 너무 눈에 띄어서
   .nk-btn이 아니라 링크 모양으로 둔다. 마크업은 <button>이다(클릭 처리를
   data-sub-cancel/data-sub-resume 속성으로 잡기 때문) — 그래서 버튼 기본
   배경·테두리·패딩을 직접 지워 준다. */
.nk-my-sub__cancel-row {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
.nk-my-sub__cancel {
  padding: 0;
  border: 0;
  background: none;
  font: var(--nk-text-p13-r);
  color: var(--nk-color-gray-2);
  text-decoration: underline;
  cursor: pointer;
}
/* 해지 예정 상태에서 되돌리는 쪽은 권하는 동작이라 primary 색으로. */
.nk-my-sub__cancel--resume {
  color: var(--nk-color-primary);
}

/* 주문/다운로드 모달 공용 조각 — 원래 mypage.css에 있었는데 다운로드
   모달(#nk-my-download-modal)을 program-complete.html에서도 쓰게 되어
   (mypage.css를 안 읽는 페이지) 공용 컴포넌트로 옮겼다. */
/* 모달 안에서 가운데 정렬 컬럼을 꽉 채워야 하는 본문 텍스트 (nk-text--* 와 병기) */
.nk-my-modal-text {
  width: 100%;
}
.nk-my-modal-text--center {
  text-align: center;
}
.nk-my-modal-text--pre {
  white-space: pre-line; /* 문의 내용/답변의 줄바꿈(\n)을 그대로 살린다 */
}
/* 다운로드 모달: 설치 파일은 Windows 프로그램이라 모바일에서 받을 수 없다.
   768px 이하에서 "지금 다운로드" 버튼 대신 안내 문구를 보여준다
   (mypage.html·mypage-order.html 두 모달 사본 공용). */
.nk-my-dl-mobile-notice {
  display: none;
}

/* 다운로드 모달: 프로그램명 / 버전 / 파일 크기 3열 정보 박스 */
.nk-my-info-row {
  display: flex;
  gap: var(--nk-space-10);
  width: 100%;
  padding: var(--nk-space-16);
  background: var(--nk-color-bg);
  border-radius: var(--nk-radius-8);
  text-align: center;
}
.nk-my-info-row__item {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-8);
}

@media (max-width: 768px) {
  /* 다운로드 모달: PC 전용 안내로 전환 */
  .nk-my-dl-download-btn {
    display: none;
  }
  .nk-my-dl-mobile-notice {
    display: block;
  }
}

/* 구독 상태 배지 (active/expired/cancelled/paused) */
/* 구독 한 줄 요약(.nk-my-sub 큰 카드의 축약형). 지금은 헤더 햄버거 메뉴의
   "구독중인 프로그램"에서 쓴다 — 마크업은 js/mypage-shared.js
   subscriptionRowHTML. 이름은 남는 폭을 먹고 말줄임, 배지·날짜·› 는 고정
   폭이라 360px 에서도 줄바꿈되지 않는다(이름만 줄어든다). */
.nk-my-sub-row {
  display: flex;
  align-items: center;
  gap: var(--nk-space-8);
  min-height: 48px;
  padding-block: var(--nk-space-4);
  border-bottom: 1px solid var(--nk-color-gray-line);
  text-decoration: none;
}
.nk-my-sub-row:last-child {
  border-bottom: 0;
}
.nk-my-sub-row__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: var(--nk-text-p15-m);
  color: var(--nk-color-black);
}
.nk-my-sub-row__meta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--nk-space-6);
  white-space: nowrap;
}
.nk-my-sub-row__until {
  font: var(--nk-text-p13-r);
  color: var(--nk-color-text-sub);
}
.nk-my-sub-row__mark {
  flex-shrink: 0;
  font: var(--nk-text-p16-m);
  line-height: 1;
  color: var(--nk-color-gray-1);
}

.nk-my-status {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--nk-space-8);
  border-radius: var(--nk-radius-4);
  font: var(--nk-text-p12-r);
  font-weight: var(--nk-font-weight-bold);
  background: var(--nk-color-bg);
  color: var(--nk-color-gray-2);
  border: 1px solid var(--nk-color-gray-line);
}
.nk-my-status--active {
  background: var(--nk-color-blue-bg);
  color: var(--nk-color-primary);
  border-color: var(--nk-color-blue-line);
}
.nk-my-status--danger {
  background: var(--nk-color-red-bg);
  color: var(--nk-color-red-1);
  border-color: var(--nk-color-red-line);
}

/* 데이터 로딩 중 / 인라인 빈 상태 (카드·탭 패널 안) */
.nk-my-loading {
  width: 100%;
  padding: var(--nk-space-24) 0;
  text-align: center;
  color: var(--nk-color-gray-2);
}
.nk-my-empty {
  width: 100%;
  padding: var(--nk-space-40) var(--nk-space-24);
  background: var(--nk-color-white);
  border-radius: var(--nk-radius-16);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nk-space-8);
  text-align: center;
}
/* 빈 상태 문구는 "제목"이 아니라 안내문이다 — 18px 굵은 검정이었더니 카드
   제목처럼 읽혀서 16px 보통 굵기 회색으로 낮췄다(__title 이라는 이름은
   쓰는 곳이 두 군데뿐이라 그대로 두고 모양만 바꾼다). */
.nk-my-empty__title {
  margin: 0;
  font: var(--nk-text-p16-m);
  color: var(--nk-color-text-sub);
}
.nk-my-empty--inline {
  width: 100%;
  /* 카드 안에 인라인으로 들어가는 형태라 위아래 여백을 24 → 16 으로 줄인다 */
  padding: var(--nk-space-16) 0;
  background: none;
  border-radius: 0;
}

/* 태블릿 */
@media (max-width: 768px) {
  .nk-help-row { flex-direction: column; }
  /* .nk-help-card--tip는 모바일에서도 PC와 동일하게 아이콘 왼쪽 / 텍스트
     오른쪽 가로 배치를 유지한다(기본 row가 이미 그 배치라 별도 규칙 불필요). */

  /* 좌우 패딩만 24 → 16으로 줄인다(상하 40은 유지). --tip은 120px 캐릭터가
     고정폭이라 남는 텍스트 폭이 360에서 136px밖에 안 됐고, "필요하신가요?"가
     다시 줄바꿈되면서 "요?"만 셋째 줄로 떨어졌다. */
  .nk-help-card {
    padding-inline: var(--nk-space-16);
  }
  /* 캐릭터(120px 고정) ↔ 텍스트 간격도 24 → 16. 좁은 폭에서 텍스트에 줄
     여유를 주려는 목적이고, PC는 24를 유지한다. */
  .nk-help-card--tip {
    gap: var(--nk-space-16);
  }
  /* 한글 제목은 어절 단위로 끊어 "요?"만 떨어지지 않게 한다(css/hero.css와
     같은 방식). keep-all 단독으로는 "필요하신가요?"(137px)가 아예 쪼개지지
     않아 320px처럼 더 좁은 화면에서 카드가 화면을 넘겨 가로 스크롤이 생긴다 —
     정말 안 들어갈 때만 예외로 끊도록 overflow-wrap 을 함께 준다.
     break-word 가 아니라 anywhere 인 이유: break-word 는 min-content 폭을
     줄이지 않아 flex 항목인 카드가 그대로 넓게 잡힌다(실측 320에서 여전히
     넘쳤다). anywhere 만 최소 폭까지 줄여 준다. */
  .nk-help-card__tip-title {
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  .nk-content-row {
    flex-direction: column;
  }
  .nk-content-row.reverse { flex-direction: column; }
  .nk-content-row__media { width: 100%; height: 240px; }

  /* 아이콘 스텝 / 아이콘 그리드: 한 줄로 욱여넣는 대신 2열 그리드로.
     화살표(.nk-icon-step__arrow)는 2열로 꺾이는 순간 위치가 의미 없어져서
     숨긴다 — 남는 건 .nk-icon-step 4개뿐이라 2x2로 깔끔하게 맞는다. */
  .nk-icon-step-row,
  .nk-icon-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--nk-space-24);
  }
  .nk-icon-step__arrow {
    display: none;
  }

  /* =============================================================
     .nk-table-responsive — <table>에 이 클래스만 추가하면 768px 이하에서
     각 <tbody> 행이 "라벨: 값" 카드로 바뀐다. 라벨/순서는 js/table-responsive.js가
     <thead> th의 텍스트(+선택적 data-order)를 읽어 각 <td>에 자동으로
     data-label/순서를 채워 넣는다 — 페이지마다 카드 마크업을 새로 짜지 않고
     기존 표 렌더링 함수를 그대로 재사용한다.
     선택자에 table 태그를 포함해 명시도를 올려서, css/mypage.css의
     .nk-my-table td 같은 페이지별 표 스타일보다 항상 우선한다(로드 순서와
     무관하게 안전).
     ============================================================= */
  table.nk-table-responsive thead {
    display: none;
  }
  table.nk-table-responsive,
  table.nk-table-responsive tbody {
    display: block;
    width: 100%;
    min-width: 0;
  }
  table.nk-table-responsive tbody tr {
    display: flex;
    flex-direction: column;
    gap: var(--nk-space-4);
    width: 100%;
    margin-bottom: var(--nk-space-12);
    padding: var(--nk-space-16);
    background: var(--nk-color-white);
    border: 1px solid var(--nk-color-gray-line);
    border-radius: var(--nk-radius-8);
  }
  table.nk-table-responsive tbody tr:last-child {
    margin-bottom: 0;
  }
  /* 셀 안에 "값 + 버튼"이 같이 있는 경우(계정·라이선스 표): td를 wrap
     플렉스로 두면 라벨(::before)과 값이 한 줄에 오고, .nk-my-cell__action만
     다음 줄 오른쪽으로 내려간다. 값/버튼을 감싸는 래퍼(.nk-my-table__cell-flex
     / .nk-my-kv__group)는 데스크톱 한 줄 배치를 위한 것이라 모바일에서는
     display:contents로 걷어내 자식이 td의 플렉스 아이템이 되게 한다.
     버튼(.nk-my-cell__action)은 같은 줄 오른쪽 끝(margin-left:auto). */
  table.nk-table-responsive tbody td {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nk-space-4);
    height: auto;
    padding: 0;
    background: none;
    border-bottom: 0;
    font: var(--nk-text-p15-r);
    color: var(--nk-color-black);
    text-align: left;
    white-space: normal;
  }
  /* data-label은 js/table-responsive.js가 채운다 — 로딩/빈 상태처럼
     colspan을 쓰는 메시지 행은 일부러 건너뛰므로 라벨이 안 붙는다. */
  table.nk-table-responsive tbody td[data-label]::before {
    content: attr(data-label) ": ";
    font: var(--nk-text-p13-r);
    color: var(--nk-color-gray-2);
  }
  table.nk-table-responsive tbody td .nk-my-table__cell-flex,
  table.nk-table-responsive tbody td .nk-my-kv__group {
    display: contents;
  }
  /* 값과 버튼을 한 줄에 두고 버튼만 오른쪽 끝으로 민다(폭이 부족하면
     td의 flex-wrap이 알아서 다음 줄로 내린다). */
  table.nk-table-responsive tbody td .nk-my-cell__action {
    margin-left: auto;
    text-align: right;
  }
  table.nk-table-responsive tbody td[colspan] {
    justify-content: center;
    text-align: center;
    color: var(--nk-color-gray-2);
  }
}

/* 모바일 */
@media (max-width: 375px) {
  .nk-modal__dialog {
    padding: var(--nk-space-40) var(--nk-space-24);
  }
}