/* =============================================================
   mypage.css — "마이페이지 / 주문관리" 그룹 페이지 공용 스타일
   대상: mypage.html / mypage-license.html / mypage-order.html /
         mypage-download-history.html / mypage-billing.html /
         mypage-billing-empty.html / mypage-inquiry.html
   Figma: db 홈페이지 (file hIJDNfXqLsMnSXdlkrZF6R)
     - 사이드바(comp/마이페이지)   node 120:940
     - 마이페이지(대시보드)       node 116:861
     - 계정 발급                 node 342:6191
     - 주문관리-구매내역          node 232:3312
     - 주문관리-다운로드내역      node 121:980
     - 주문관리-정기결제          node 268:1404
     - 주문관리-정기결제(없음)    node 285:2048
     - 고객센터-1:1문의           node 249:978
   버튼/입력창/체크박스/모달 셸은 css/components.css 재사용.
   색상·간격·타이포는 전부 css/variables.css 의 --nk-* 토큰만 사용.
   ============================================================= */

/* ----- 레이아웃 (사이드바 + 본문) --------------------------- */
.nk-my {
  max-width: var(--nk-content-max-width);   /* 1280px */
  margin-inline: auto;
  padding: var(--nk-space-40) var(--nk-space-24);
  display: flex;
  gap: var(--nk-space-24);
  align-items: flex-start;
}

/* ----- 사이드바 (components/mypage-sidebar.html) ----------- */
.nk-my-side {
  flex-shrink: 0;
  width: 302px;
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-32);
  padding: var(--nk-space-40) var(--nk-space-24);
  background: var(--nk-color-white);
  border-radius: var(--nk-radius-16);
}
/* 사이드바 맨 위 "마이페이지" 제목. 링크가 아니라 <p> 다 — 대시보드로 가는 건
   첫 메뉴 항목 "내 프로그램"이다. */
.nk-my-side__home {
  margin: 0;
  font: var(--nk-text-p24-b);
  color: var(--nk-color-black);
}
.nk-my-side__group {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-8);
  width: 100%;
}
.nk-my-side__heading {
  margin: 0;
  font: var(--nk-text-p18-b);
  color: var(--nk-color-black);
}
.nk-my-side__link {
  font: var(--nk-text-p15-m);
  color: var(--nk-color-black);
  text-decoration: none;
}
.nk-my-side__link:hover {
  color: var(--nk-color-primary);
}
.nk-my-side__link.is-active {
  color: var(--nk-color-primary);
  font-weight: var(--nk-font-weight-bold);
}

/* ----- 본문 공통 -------------------------------------------- */
.nk-my-content {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-24);
}
.nk-my-titlegroup {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-8);
  width: 100%;
}
/* 모바일 전용 뒤로가기 줄("‹ 내 프로그램"). mypage.html 을 뺀 모든 마이페이지
   화면의 .nk-my-content 맨 위에 있고, 데스크톱에서는 사이드바가 그 역할을 하므로
   숨긴다(768px 이하에서 inline-flex 로 켠다). */
.nk-my-back {
  display: none;
  align-items: center;
  gap: var(--nk-space-4);
  align-self: flex-start;
  font: var(--nk-text-p14-m);
  color: var(--nk-color-text-sub);
  text-decoration: none;
}
.nk-my-back__mark {
  font: var(--nk-text-p16-m);
  line-height: 1;
}

/* 제목 위 경로 표시("마이페이지 > 내 프로그램") */
.nk-my-crumb {
  margin: 0;
  font: var(--nk-text-p13-r);
  color: var(--nk-color-text-sub);
}
.nk-my-title {
  margin: 0;
  font: var(--nk-text-p24-b);
  color: var(--nk-color-black);
}
.nk-my-subtitle {
  margin: 0;
  font: var(--nk-text-p15-m);
  color: var(--nk-color-black);
}

/* 흰색 카드 셸(.nk-my-card*)과 퀵링크 기본형(.nk-my-quick/__icon/__title)은
   공통 헤더(components/header.html)의 모바일 풀스크린 메뉴도 쓰게 되어
   css/components.css로 옮겼다. */

/* 라벨:값 한 줄(.nk-my-kv*), 구독중인 프로그램 카드(.nk-my-sub-grid/.nk-my-sub*),
   상태 배지(.nk-my-status*), 로딩/인라인 빈 상태(.nk-my-loading/.nk-my-empty*)는
   공통 헤더(components/header.html)의 모바일 풀스크린 메뉴도 같은 카드
   컴포넌트를 그대로 재사용하게 되어 components.css로 옮겼다.
   (.nk-my-empty__desc처럼 이 페이지에서만 더 쓰는 하위 클래스는 아래
   "빈 상태 (정기 결제 없음)" 섹션에 그대로 남겨뒀다.) */

/* ----- 퀵링크 카드 3종 (구매내역 / DB다운로드이력 / 1:1문의) ---
   기본형(.nk-my-quick/__icon/__title)은 components.css로 옮겼다 — 아래는
   이 페이지(데스크톱 대시보드) 전용 3열 그리드 배치 + 설명 텍스트뿐. */
.nk-my-quick-grid {
  display: flex;
  gap: var(--nk-space-8);
  width: 100%;
}
.nk-my-quick-grid .nk-my-quick {
  flex: 1 0 0;
  min-width: 0;
}
.nk-my-quick__body {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-4);
  min-width: 0;
}
.nk-my-quick__desc {
  margin: 0;
  font: var(--nk-text-p13-r);
  color: var(--nk-color-black);
}

/* 최근 결제 및 구매 내역: 탭 라벨 + 표 한 묶음 */
.nk-my-recent {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-16);
  width: 100%;
}
/* display:flex 가 브라우저 기본 [hidden]{display:none} 규칙과 우선순위가
   같아서(둘 다 명시도 0,0,1,0) 그냥 두면 안 숨겨진다 — components.css 의
   .nk-modal[hidden] 과 같은 이유로 명시적으로 다시 꺼준다. */
.nk-my-recent[hidden] {
  display: none;
}

/* ----- 탭 필(구매 내역 / 정기 결제 전환) --------------------- */
.nk-my-pill-row {
  display: flex;
  gap: var(--nk-space-8);
  align-items: center;
  /* 768px 이하에서 이 줄만 가로 스와이프되는데(아래 미디어쿼리), 스크롤바가
     회색 줄로 보여서 감춘다 — 스크롤 자체는 그대로다. 스크롤 가능하다는
     힌트는 오른쪽 끝 탭이 잘려 보이는 것으로 남는다. */
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* 구형 Edge */
}
.nk-my-pill-row::-webkit-scrollbar {
  display: none;                  /* Chrome / Safari */
}
.nk-my-pill {
  padding: var(--nk-space-6) var(--nk-space-16);
  border: 0;
  border-radius: var(--nk-radius-pill);
  font: var(--nk-text-p15-m);
  text-align: center;
  cursor: pointer;
}
.nk-my-pill--active {
  background: var(--nk-color-primary);
  color: var(--nk-color-white);
}
.nk-my-pill--inactive {
  background: var(--nk-color-blue-line);
  color: var(--nk-color-black);
}
/* 탭 라벨 옆 빨간 점 — 다른 탭에 조치가 필요한 게 있다는 표시
   (정기 결제의 [결제수단]: 결제 실패 구독이 있을 때). .nk-my-pill 자체는
   대시보드 탭과 공용이라 건드리지 않고, 점만 inline 으로 띄운다. */
.nk-my-pill__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: var(--nk-space-6);
  border-radius: 50%;
  background: var(--nk-color-red-1);
  vertical-align: middle;
}
.nk-my-pill__dot[hidden] {
  display: none;
}

.nk-my-viewall {
  display: block;
  width: 100%;
  font: var(--nk-text-p14-m);
  color: var(--nk-color-gray-2);
  text-align: right;
  text-decoration: none;
}
.nk-my-viewall:hover {
  color: var(--nk-color-primary);
}

/* ----- 표 ----------------------------------------------------- */
.nk-my-table-wrap {
  width: 100%;
  overflow-x: auto;
}
.nk-my-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}
.nk-my-table th {
  height: 44px;
  padding: 0 var(--nk-space-8);
  background: var(--nk-color-bg);
  font: var(--nk-text-p15-m);
  color: var(--nk-color-gray-2);
  text-align: center;
  white-space: nowrap;
}
.nk-my-table td {
  height: 44px;
  padding: 0 var(--nk-space-8);
  background: var(--nk-color-white);
  border-bottom: 1px solid var(--nk-color-gray-line);
  font: var(--nk-text-p15-r);
  color: var(--nk-color-black);
  text-align: center;
  white-space: nowrap;
}
.nk-my-table td.nk-my-table__cell--left {
  text-align: left;
  white-space: normal;
}
.nk-my-table__actions {
  display: flex;
  gap: var(--nk-space-4);
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
/* "관리자 발급" 라벨 (구매 내역 / 대시보드 최근 내역의 상태 칸).
   상태 텍스트와 같은 줄이 아니라 아래 줄에 작게 붙는다 — display:block 이라
   td 의 white-space:nowrap 과 무관하게 줄이 나뉜다.
   flex-basis 는 768px 이하 카드형(table.nk-table-responsive tbody td 가
   display:flex + flex-wrap:wrap)에서 필요하다 — 거기서는 이 span 이 플렉스
   아이템이 되어 display:block 만으로는 상태와 같은 줄에 남기 때문에, 100% 로
   한 줄을 다 차지해 다음 줄로 내려가게 한다. 데스크톱 표 셀에서는 무시된다. */
.nk-my-order-tag {
  display: block;
  flex-basis: 100%;
  margin-top: var(--nk-space-4);
  font: var(--nk-text-p12-r);
  color: var(--nk-color-text-sub);
}

/* ----- 결제수단 목록 (정기 결제 화면 상단) -------------------
   구독 1건 = 1줄. 왼쪽은 프로그램·다음 결제일·카드·금액, 오른쪽은
   [결제수단 변경] 하나. 768px 이하에서는 세로로 쌓고 버튼을 꽉 채운다. */
.nk-my-pm-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-8);
  width: 100%;
}
.nk-my-pm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nk-space-16);
  width: 100%;
  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-my-pm--danger {
  border-color: var(--nk-color-red-line);
  background: var(--nk-color-red-bg);
}
.nk-my-pm__body {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-4);
  min-width: 0;
}
.nk-my-pm__name {
  margin: 0;
  font: var(--nk-text-p15-b);
  color: var(--nk-color-black);
}
.nk-my-pm__meta {
  margin: 0;
  font: var(--nk-text-p14-r);
  color: var(--nk-color-gray-2);
}
.nk-my-pm__alert {
  margin: 0;
  font: var(--nk-text-p14-m);
  color: var(--nk-color-red-1);
}
/* 줄 오른쪽 버튼 묶음 — 결제 실패·정지 줄은 [지금 재결제][결제수단 변경] 두 개다. */
.nk-my-pm__actions {
  display: flex;
  gap: var(--nk-space-8);
  flex-shrink: 0;
}
.nk-my-pm-empty {
  padding: var(--nk-space-24) 0;
  font: var(--nk-text-p15-r);
  color: var(--nk-color-gray-2);
  text-align: center;
}
/* 해지는 여기서 하지 않는다는 안내(마이페이지 구독 카드로 보내는 링크) */
.nk-my-pm-note {
  margin: 0;
  font: var(--nk-text-p13-r);
  color: var(--nk-color-gray-2);
}
.nk-my-pm-note a {
  color: var(--nk-color-primary);
}

/* 상태 라벨 + 안내 아이콘을 한 줄로 (정기 결제 표의 상태 칸).
   td 가 이미 nowrap 이지만, 768px 이하 카드형에서는 td 가 flex 로 바뀌므로
   여기서 한 번 더 묶어 "결제 실패 ⓘ" 가 쪼개지지 않게 한다. */
.nk-my-status-cell {
  display: inline-flex;
  align-items: center;
  gap: var(--nk-space-4);
  white-space: nowrap;
}
/* 동그라미 느낌표 버튼 — 말풍선을 여는 유일한 수단이라 터치 영역을 24px 로 둔다. */
.nk-my-tip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--nk-color-red-1);
  cursor: pointer;
}
.nk-my-tip-btn svg {
  width: 16px;
  height: 16px;
}
.nk-my-tip-btn:hover,
.nk-my-tip-btn:focus-visible {
  color: var(--nk-color-black);
}
/* 말풍선 본체. js/mypage-shared.js 가 body 에 하나만 만들어 두고 left/top 만
   옮긴다 — 표 래퍼가 overflow:auto 라 셀 안에 absolute 로 두면 잘린다.
   그래서 position:fixed 이고, 스크롤·리사이즈하면 닫는다. */
.nk-my-tip {
  position: fixed;
  z-index: 100;
  max-width: 260px;
  padding: var(--nk-space-8) var(--nk-space-12);
  background: var(--nk-color-white);
  border: 1px solid var(--nk-color-red-line);
  border-radius: var(--nk-radius-8);
  box-shadow: 0 4px 12px rgb(0 0 0 / 12%);
  font: var(--nk-text-p13-r);
  color: var(--nk-color-black);
  text-align: left;
  white-space: normal;
}
.nk-my-tip[hidden] {
  display: none;
}
/* 꼬리 — 기본은 말풍선 아래쪽(아이콘 위에 떴을 때). 가로 위치는 JS가
   --nk-tip-arrow-left 로 넘긴다(화면 안으로 밀려도 아이콘을 가리키게). */
.nk-my-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: var(--nk-tip-arrow-left, 50%);
  width: 10px;
  height: 10px;
  margin-left: -5px;
  margin-top: -5px;
  background: var(--nk-color-white);
  border-right: 1px solid var(--nk-color-red-line);
  border-bottom: 1px solid var(--nk-color-red-line);
  transform: rotate(45deg);
}
/* 위쪽 공간이 없어 아이콘 아래에 떴을 때는 꼬리도 위로 */
.nk-my-tip--below::after {
  top: 0;
  margin-top: -5px;
  border-right: 0;
  border-bottom: 0;
  border-left: 1px solid var(--nk-color-red-line);
  border-top: 1px solid var(--nk-color-red-line);
}

/* 셀 안에 값 + 버튼을 나란히 (계정·라이선스 표의 IP 칸) */
.nk-my-table__cell-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nk-space-8);
  width: 100%;
}
/* 클릭해서 상세 모달을 여는 행(1:1 문의 목록) */
.nk-my-table tbody tr[data-modal-open] {
  cursor: pointer;
}
.nk-my-table tbody tr[data-modal-open]:hover td {
  background: var(--nk-color-bg);
}

/* 안내 박스 없이 그냥 나열하는 안내 문구 목록 (회원 탈퇴 등) */
.nk-my-plain-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-4);
  width: 100%;
}
.nk-my-plain-list li {
  font: var(--nk-text-p14-r);
  color: var(--nk-color-black);
}
.nk-btn--withdraw {
  width: 294px;
  max-width: 100%;
}

/* ----- 구독중인 프로그램 좌우 화살표 (mypage.html 전용, 769px 이상) ---
   .nk-my-sub-grid/.nk-my-sub 자체는 components.css 공용(공통 헤더 모바일
   메뉴도 같은 카드를 쓴다)이라 건드리지 않고, 이 래퍼 안에서만 스크롤바를
   감추고 버튼을 얹는다. */
.nk-my-sub-carousel {
  position: relative;
  width: 100%;
}
.nk-my-sub-carousel .nk-my-sub-grid {
  scrollbar-width: none;
}
.nk-my-sub-carousel .nk-my-sub-grid::-webkit-scrollbar {
  display: none;
}
.nk-my-sub-carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-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-my-sub-carousel__btn[hidden] {
  display: none;
}
.nk-my-sub-carousel__btn:hover {
  border-color: var(--nk-color-gray-1);
}
.nk-my-sub-carousel__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.nk-my-sub-carousel__btn img {
  display: block;
  width: 24px;
  height: 24px;
}
.nk-my-sub-carousel__btn--prev {
  left: calc(var(--nk-space-16) * -1);
}
.nk-my-sub-carousel__btn--next {
  right: calc(var(--nk-space-16) * -1);
}

/* ----- 필터 바 (전체 기간 / 전체 상태 / 프로그램 전체) -------- */
.nk-my-filters {
  display: flex;
  gap: var(--nk-space-8);
  align-items: center;
  flex-wrap: wrap;
}
/* display:inline-flex + -webkit-appearance:none 조합은 일부 모바일
   WebKit/Blink에서 네이티브 <select> 옵션 팝업이 트리거 버튼과 무관한
   위치(카드 상단 등)에 겹쳐서 뜨는 알려진 버그를 유발한다 — 옵션 목록
   자체는 브라우저가 그리는 영역이라 CSS로 위치를 직접 지정할 수 없고,
   이 display 조합을 피하는 것이 유일한 해결책이다. display:inline-block +
   line-height로 세로 중앙 정렬은 그대로 유지한다. */
.nk-my-select {
  appearance: none;
  -webkit-appearance: none;
  display: inline-block;
  height: 42px;
  line-height: 40px; /* height(42) - border(1*2) */
  padding: 0 28px 0 var(--nk-space-8);
  border: 1px solid var(--nk-color-gray-line);
  border-radius: var(--nk-radius-4);
  background: var(--nk-color-white) url("../assets/icon-chevron-down.svg") no-repeat right 8px center;
  background-size: 10px 6px;
  font: var(--nk-text-p14-r);
  color: var(--nk-color-black);
  cursor: pointer;
}
/* 폼 안에서 쓰는 큰 버전 (문의 등록 모달의 "문의 유형" 선택) */
.nk-my-select--block {
  display: block;
  width: 100%;
  height: 44px;
  line-height: 42px; /* height(44) - border(1*2) */
  padding: 0 32px 0 var(--nk-space-16);
  background-position: right 16px center;
}
/* textarea 로 쓰는 .nk-input (문의 내용) */
.nk-input--textarea {
  min-height: 140px;
  resize: vertical;
}
.nk-my-text-muted {
  color: var(--nk-color-gray-2);
}
.nk-my-form-error {
  width: 100%;
  margin: 0;
  font: var(--nk-text-p14-r);
  color: var(--nk-color-red-1);
}

/* 필드 아래 안내 문구 (계정 발급의 아이디 중복확인 결과) */
.nk-my-field__msg {
  width: 100%;
  margin: 0;
  font: var(--nk-text-p13-r);
  color: var(--nk-color-gray-2);
}
.nk-my-field__msg--ok {
  color: var(--nk-color-primary);
}
.nk-my-field__msg--error {
  color: var(--nk-color-red-1);
}

/* ----- 다운로드 내역: 프로그램별 총 다운로드 통계 카드 -------- */
.nk-my-stat-row {
  display: flex;
  gap: var(--nk-space-16);
  width: 100%;
}
.nk-my-stat-card {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-6);
  padding: var(--nk-space-16);
  background: var(--nk-color-blue-bg);
  border-radius: var(--nk-radius-8);
}
.nk-my-stat-card__name {
  margin: 0;
  font: var(--nk-text-p15-m);
  color: var(--nk-color-black);
}
.nk-my-stat-card__label {
  margin: 0;
  font: var(--nk-text-p14-m);
  color: var(--nk-color-gray-2);
}
.nk-my-stat-card__value {
  margin: 0;
  font: var(--nk-text-p18-b);
  color: var(--nk-color-black);
}
.nk-my-stat-card__sub {
  margin: 0;
  font: var(--nk-text-p13-r);
  color: var(--nk-color-gray-2);
}

/* ----- 공지사항 목록 ------------------------------------------ */
.nk-my-notice-list {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-8);
  width: 100%;
}
.nk-my-notice-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nk-space-16);
  width: 100%;
  padding: var(--nk-space-12) var(--nk-space-16);
  background: var(--nk-color-white);
  border: 1px solid var(--nk-color-gray-line);
  border-radius: var(--nk-radius-8);
  font: var(--nk-text-p15-b);
  color: var(--nk-color-black);
  text-align: left;
  text-decoration: none;
}
.nk-my-notice-row:hover {
  border-color: var(--nk-color-primary);
}
.nk-my-notice-row__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nk-my-notice-badge {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  height: 20px;
  padding: 0 var(--nk-space-8);
  margin-right: var(--nk-space-6);
  background: var(--nk-color-blue-bg);
  border: 1px solid var(--nk-color-blue-line);
  border-radius: var(--nk-radius-pill);
  font: var(--nk-text-p12-r);
  font-weight: var(--nk-font-weight-bold);
  color: var(--nk-color-primary);
  vertical-align: middle;
}
.nk-my-notice-row__date {
  flex-shrink: 0;
  font: var(--nk-text-p14-r);
  color: var(--nk-color-gray-2);
}

/* ----- 공지사항 상세보기 ---------------------------------------- */
.nk-my-notice-detail__head {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-16);
  width: 100%;
  text-align: center;
}
.nk-my-notice-detail__title {
  margin: 0;
  font: var(--nk-text-p18-b);
  color: var(--nk-color-black);
}
.nk-my-notice-detail__date {
  margin: 0;
  font: var(--nk-text-p15-m);
  color: var(--nk-color-gray-2);
  text-align: right;
}
.nk-my-notice-detail__body {
  margin: 0;
  width: 100%;
  font: var(--nk-text-p15-r);
  color: var(--nk-color-black);
  white-space: pre-line; /* API 본문의 줄바꿈(\n)을 그대로 살린다 */
}
.nk-my-notice-detail__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
/* 이전글/다음글 API 미지원 구간: "목록" 버튼만 남을 때 가운데 정렬 */
.nk-my-notice-detail__nav--single {
  justify-content: center;
}
.nk-my-notice-detail__nav-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--nk-space-8);
  padding: var(--nk-space-4) 0;
  border: 0;
  background: transparent;
  font: var(--nk-text-p15-m);
  color: var(--nk-color-black);
  text-decoration: none;
  cursor: pointer;
}
.nk-my-notice-detail__list-btn {
  padding: var(--nk-space-8) var(--nk-space-24);
  background: var(--nk-color-gray-line);
  border-radius: var(--nk-radius-4);
  font: var(--nk-text-p15-m);
  color: var(--nk-color-black);
  text-decoration: none;
}

/* ----- 자주 묻는 질문: 카테고리 배지 ---------------------------- */
.nk-my-faq-tag {
  flex-shrink: 0;
  padding: 2px var(--nk-space-8);
  background: var(--nk-color-blue-line);
  border-radius: 24px;
  font: var(--nk-text-p14-m);
  color: var(--nk-color-black);
}
.nk-my-faq-question {
  display: flex;
  align-items: center;
  gap: var(--nk-space-8);
}

/* ----- 안내 박스 (계정 발급: 제출 전 확인사항) --------------- */
.nk-my-notice {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-10);
  width: 100%;
  padding: var(--nk-space-16);
  background: var(--nk-color-bg);
  border: 1px solid var(--nk-color-gray-line);
  border-radius: var(--nk-radius-8);
}
/* display:flex 가 브라우저 기본 [hidden]{display:none} 과 명시도가 같아서(둘 다
   0,0,1,0) 그냥 두면 안 숨겨진다 — .nk-btn[hidden]·.nk-modal[hidden] 과 같은 이유.
   정기 결제 화면이 결과·실패 안내를 hidden 으로 여닫으므로 반드시 필요하다
   (없으면 내용이 빈 테두리 박스가 그대로 보인다). */
.nk-my-notice[hidden] {
  display: none;
}
.nk-my-notice__title {
  margin: 0;
  font: var(--nk-text-p15-b);
  color: var(--nk-color-black);
}
.nk-my-notice__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-4);
}
.nk-my-notice__list li {
  font: var(--nk-text-p14-r);
  color: var(--nk-color-black);
}
/* 경고 톤(정기 결제 - 결제 실패 건 안내) */
.nk-my-notice--danger {
  background: var(--nk-color-red-bg);
  border-color: var(--nk-color-red-line);
}
.nk-my-notice--danger .nk-my-notice__title {
  color: var(--nk-color-red-1);
}
/* 강조 톤(1:1 문의 상세 - 답변 카드): 중립 회색 대신 primary를 옅게 tint */
.nk-my-notice--accent {
  background: var(--nk-color-blue-bg);
  border-color: var(--nk-color-blue-line);
}
.nk-my-agree {
  display: flex;
  align-items: center;
  gap: var(--nk-space-8);
}
.nk-my-agree span {
  font: var(--nk-text-p15-m);
  color: var(--nk-color-black);
}

/* 계정 발급 폼 카드(로그인/회원가입 폼과 같은 형태를 재사용) */
.nk-my-form-card {
  display: flex;
  justify-content: center;
  padding: var(--nk-space-60) 0;
  background: var(--nk-color-white);
  border-radius: var(--nk-radius-16);
  width: 100%;
}
.nk-my-form {
  width: var(--nk-form-width);   /* 328px */
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-28);
}
.nk-my-form__title {
  margin: 0;
  font: var(--nk-text-p32-b);
  color: var(--nk-color-black);
  text-align: center;
}
.nk-my-field {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-8);
  width: 100%;
}
.nk-my-field__label {
  font: var(--nk-text-p13-r);
  color: var(--nk-color-black);
}
/* 입력창 + 버튼을 한 줄로 (휴대폰 + "본인인증 수정") */
.nk-my-field__row {
  display: flex;
  gap: var(--nk-space-4);
  align-items: flex-start;
  width: 100%;
}
.nk-my-field__row .nk-input {
  flex: 1 0 0;
  min-width: 0;
  width: auto;
}
.nk-btn--verify {
  flex-shrink: 0;
  height: 44px;
  padding-inline: var(--nk-space-16);
  border: 1px solid var(--nk-color-gray-1);
  background: var(--nk-color-white);
  color: var(--nk-color-black);
  white-space: nowrap;
}
.nk-my-field-group {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-24);
  width: 100%;
}
.nk-my-field-group .nk-my-field {
  gap: var(--nk-space-8);
}
.nk-my-field-group .nk-input + .nk-input {
  margin-top: var(--nk-space-8);
}
.nk-my-field-group--narrow {
  width: var(--nk-form-width);   /* 328px */
  max-width: 100%;
}

/* ----- 빈 상태 (정기 결제 없음) -------------------------------
   기본형(.nk-my-empty/__title)은 components.css로 옮겼다 — 아래 __desc만
   이 페이지(정기 결제 빈 상태) 전용이라 그대로 남긴다. */
.nk-my-empty__desc {
  margin: 0 0 var(--nk-space-8);
  font: var(--nk-text-p14-m);
  color: var(--nk-color-black);
}

/* ----- 태블릿 이하 --------------------------------------------- */
@media (max-width: 768px) {
  .nk-my {
    flex-direction: column;
    /* 데스크톱의 align-items:flex-start를 그대로 두면 column으로 바뀐 뒤
       자식(.nk-my-content)이 내용 크기로 줄어든다 — 그 안의 고정폭
       .nk-my-field-group--narrow(328px)가 카드 패딩까지 밀어 올려 화면보다
       넓어지므로(375px에서 문서 폭 376px) 가로로 꽉 채우게 되돌린다. */
    align-items: stretch;
    padding: var(--nk-space-24) var(--nk-space-16);
  }
  /* 사이드바는 모바일에서 숨긴다 — 메뉴 전체는 헤더 햄버거의 "마이페이지"
     아코디언이 맡고, 각 화면에는 아래 .nk-my-back 한 줄만 둔다.
     (가로 스크롤 탭을 뒀다가 걷어냈다 — 항목 9개가 한 줄에서 계속 잘렸다.) */
  .nk-my-side {
    display: none;
  }
  /* 모바일 전용 뒤로가기 줄. 데스크톱에서는 사이드바가 그 역할을 하므로 숨긴다. */
  .nk-my-back {
    display: inline-flex;
  }
  .nk-my-quick-grid {
    flex-direction: column;
  }
  /* 표 → 카드 전환(.nk-table-responsive, components.css) 후에는 가로
     스크롤이 필요 없다 — 카드가 항상 카드 영역 전체 폭을 채우도록 한다. */
  .nk-my-table-wrap {
    overflow-x: visible;
    min-width: 0;
  }
  /* 결제수단 줄: 정보 위 / 버튼 아래 꽉 채우기 */
  .nk-my-pm {
    flex-direction: column;
    align-items: stretch;
    gap: var(--nk-space-12);
  }
  .nk-my-pm .nk-btn {
    width: 100%;
  }
  .nk-my-pm__actions {
    flex-direction: column;
  }
  /* 고객센터-공지사항(mypage-notice.html) 전용: 이 페이지에서만 쓰는
     .nk-help-row를 모바일에서 맨 뒤로 보낸다 — .nk-my-content(flex column)의
     다른 자식(.nk-my-titlegroup/.nk-my-card)은 기본 order:0이라 DOM
     순서(타이틀→카드) 그대로 앞에 온다. */
  .nk-help-row {
    order: 1;
  }
  /* 자주 묻는 질문(mypage-faq.html) 카테고리 탭: 고정폭 없이 내용 너비를
     유지하고(flex-shrink:0 + nowrap), 넘치면 이 줄만 가로 스와이프/스크롤.
     .nk-my-card는 flex-column이라 자식(.nk-my-pill-row)의 자동 최소 너비가
     카드 전체를 밀어 넘치게 할 수 있어(overflow:auto인 자식이라도 부모까지
     안전하게 막으려면 카드 쪽도 min-width:0으로 바닥을 잡아줘야 한다)
     .nk-my-card에도 명시적으로 min-width:0을 준다 — 스크롤은 pill-row
     안에서만 일어나고 카드/페이지 자체는 절대 가로로 넘치지 않는다. */
  .nk-my-card {
    min-width: 0;
    overflow-x: hidden;
  }
  .nk-my-pill-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* 모바일은 기존 가로 스크롤 그대로 — 화살표는 쓰지 않는다 */
  .nk-my-sub-carousel__btn {
    display: none !important;
  }
  .nk-my-pill {
    flex-shrink: 0;
    white-space: nowrap;
  }
  /* 카드 헤더에 필터 + 버튼이 같이 있는 경우(1:1 문의): 드롭다운 두 개를
     한 줄에 반씩 나눠 놓고, 버튼은 다음 줄 오른쪽에 글자 한 줄로 둔다.
     필터가 헤더 밖에 단독으로 있는 페이지(구매 내역 등)는 건드리지 않는다. */
  .nk-my-card__head {
    flex-wrap: wrap;
    gap: var(--nk-space-8);
  }
  .nk-my-card__head > .nk-my-filters {
    flex: 1 0 100%;
    flex-wrap: nowrap;
  }
  .nk-my-card__head > .nk-my-filters > .nk-my-select {
    flex: 1 1 0;
    min-width: 0;
  }
  /* 버튼이 첫 줄(오른쪽), 드롭다운 줄이 그 아래로 온다 — DOM은 필터가
     먼저라 order로만 뒤집는다(데스크톱 순서는 그대로). */
  .nk-my-card__head > .nk-btn {
    order: -1;
    margin-left: auto;
    width: auto;
    white-space: nowrap;
  }
}

/* ----- 모바일 --------------------------------------------------- */
@media (max-width: 375px) {
  .nk-my-card,
  .nk-my-sub,
  .nk-my-form-card {
    padding: var(--nk-space-16);
  }
}

/* ----- 정기결제 해지 모달 (본문은 js/mypage-shared.js 가 만든다) --------
   1단계 "해지 전 확인" → 2단계 "해지 사유 (선택)" → 완료.
   셸(.nk-modal__dialog)이 align-items:center 라서 각 단계 패널이 폭을 직접 채운다.
   버튼 줄은 공용 .nk-my-sub__actions(버튼 2개가 폭을 반씩 나눈다) 를 쓴다 —
   375px 에서도 [닫기][다음] 이 한 줄에 같은 크기로 들어간다. */
.nk-my-cancel__step {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-24);
  width: 100%;
}
/* ⚠️ display:flex 는 브라우저 기본 [hidden]{display:none} 보다 우선해서, 이게 없으면
   1단계·2단계·완료 패널이 **한꺼번에 다 보인다**(운영에서 실제로 그랬다).
   header.css 의 .nk-mobile-menu__subs[hidden] 과 같은 이유·같은 처방이다. */
.nk-my-cancel__step[hidden] {
  display: none !important;
}
/* 본문이 화면보다 길면 모달 안에서 스크롤한다. 공용 .nk-modal__dialog 를 건드리면
   다른 모달 레이아웃이 같이 바뀌므로 해지 모달에만 건다.
   100vh - 48px = .nk-modal 의 위아래 패딩(24px*2)을 뺀 높이.
   위아래 패딩도 60 -> 40 으로 줄여 작은 화면에서 애초에 넘칠 일을 줄인다. */
#nk-my-sub-cancel-modal .nk-modal__dialog {
  max-height: calc(100vh - var(--nk-space-48));
  overflow-y: auto;
  padding-block: var(--nk-space-40);
}
.nk-my-cancel__list {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-10);
  width: 100%;
  margin: 0;
  padding-left: var(--nk-space-20);   /* 글머리 기호 자리 */
  font: var(--nk-text-p15-r);
  color: var(--nk-color-black);
}
.nk-my-cancel__hint {
  width: 100%;
  margin: 0;
  color: var(--nk-color-gray-2);
}
.nk-my-cancel__reasons {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-12);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nk-my-cancel__etc {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-4);
  width: 100%;
}
/* 위 .nk-my-cancel__step[hidden] 과 같은 이유 — "기타"를 안 골랐을 때도 메모칸이 보인다. */
.nk-my-cancel__etc[hidden] {
  display: none !important;
}
.nk-my-cancel__text {
  min-height: 84px;
  resize: vertical;
}
.nk-my-cancel__count {
  margin: 0;
  text-align: right;
  font: var(--nk-text-p13-r);
  color: var(--nk-color-gray-2);
}

/* 375px: [이전][정기결제 해지] 가 한 줄에 같은 크기로 들어가야 한다.
   375px 에서 모달 본문 폭은 279px(=375 - .nk-modal 24*2 - .nk-modal__dialog 24*2)이고
   버튼은 둘이 폭을 반씩 나눠 131px 씩인데, 공용 .nk-btn 의 좌우 여백 24px*2 를 빼면
   글자 자리가 83px 밖에 안 남아 "정기결제 해지"(약 94px)가 줄바꿈된다.
   여백만 줄여 한 줄에 넣는다 — 버튼을 숨기거나 위아래로 쌓지 않는다. */
@media (max-width: 400px) {
  .nk-my-cancel__step .nk-my-sub__actions .nk-btn {
    padding-inline: var(--nk-space-10);
    white-space: nowrap;
  }
}

/* ----- 판매원 신청서 발행 안내 배너 (#nk-my-sa-invite) ------------------
   관리자가 신청서를 발행한 회원에게만 보인다. 발행이 없으면 js 가 숨긴다
   (display:flex 가 [hidden] 을 가리므로 복구 규칙을 같이 둔다). */
.nk-my-notice-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--nk-space-12);
  padding: var(--nk-space-16) var(--nk-space-20);
  border: 1px solid var(--nk-color-blue-line);
  border-radius: var(--nk-radius-8);
  background: var(--nk-color-blue-bg);
}
.nk-my-notice-banner[hidden] {
  display: none !important;
}
.nk-my-notice-banner__text {
  margin: 0;
  font: var(--nk-text-p15-m);
  color: var(--nk-color-black);
}