/* =====================================================================
   마이페이지 · 구독 관리 탭 (#my-subscription)
   ---------------------------------------------------------------------
   [2026-10-07] 결제로 이어지는 화면이라 '가격 · 두 요금제의 차이 · 추천 · 구독 단추'
   의 순서가 먼저 읽히게 다시 정리했다.
     · 맨 위 한 줄이 '지금 구독 중인가' 를 알려 준다 (예전엔 큰 왼쪽 카드)
     · 두 요금제 카드는 같은 5칸(이름·가격·한 줄 설명·혜택·단추)에 맞춰,
       한쪽 혜택이 길어도 구독 단추 높이가 어긋나지 않는다
     · 추천은 보라 테두리 + 옅은 보라 바탕 + '★ 추천' + 채운 단추 세 가지로만
     · 검정 단추를 없앴다. 채운 보라는 '돈을 내는 행동' 에만 쓴다
     · 결제 이력이 없을 때 상자 안의 상자를 두 줄 글로 줄였다
   그리는 곳: mypage.html 아래 인라인 스크립트(renderNone / renderSub / renderPayments)
   요금제 변경 칸(plan-change.js)이 쓰는 .sub-btn / .pc-box / .sub-grid 도 여기서 꾸민다.
   ===================================================================== */

#my-subscription{
  --sx-accent:#6C5CE7;
  --sx-accent-deep:#5A4BD4;
  --sx-accent-soft:#F0EDFF;
  --sx-accent-line:#D5D0FF;
  --sx-line:#E6EBF3;
  --sx-line-soft:#EDF0F7;
  --sx-ink:#111827;
  --sx-muted:#667085;
  --sx-faint:#98A2B3;
  --sx-num:"Space Grotesk","Pretendard",sans-serif;
  word-break:keep-all;
}
#my-subscription.active{display:grid!important;gap:16px;}

/* ── 카드 ──────────────────────────────────────────────────────────── */
#my-subscription .sx-card{
  margin:0!important;
  padding:20px 22px!important;
  border:1px solid var(--sx-line)!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:none!important;
  min-width:0;
}
#my-subscription .sx-loading{margin:0;color:var(--sx-muted);font-size:.84rem;}
#my-subscription [hidden]{display:none!important;}

/* ── 맨 위 한 줄: 지금 구독 중인가 ─────────────────────────────────── */
#my-subscription .sx-status{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  padding-bottom:20px;
  border-bottom:1px dashed var(--sx-line);
}
#my-subscription .sx-status.flat{padding-bottom:0;border-bottom:0;}
#my-subscription .sx-mark{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:12px;
  background:#F4F5F8;
  font-size:18px;
}
#my-subscription .sx-mark.vip{background:var(--sx-accent-soft);}
#my-subscription .sx-status-copy{flex:1 1 260px;min-width:0;display:grid;gap:1px;}
#my-subscription .sx-status-copy .k{color:var(--sx-muted);font-size:.78rem;font-weight:800;}
#my-subscription .sx-status-copy .v{color:var(--sx-ink);font-size:1.0625rem;font-weight:900;letter-spacing:-.03em;}
#my-subscription .sx-status-copy .v.none{color:#475569;}
#my-subscription .sx-status-copy .d{margin:3px 0 0;color:var(--sx-muted);font-size:.84rem;line-height:1.5;}

#my-subscription .sx-badge{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:26px;
  padding:0 11px;
  border:1px solid var(--sx-line);
  border-radius:999px;
  background:#F8FAFC;
  color:#475569;
  font-size:.78rem;
  font-weight:800;
  white-space:nowrap;
}
#my-subscription .sx-badge.active{background:var(--sx-accent-soft);border-color:var(--sx-accent-line);color:var(--sx-accent-deep);}
#my-subscription .sx-badge.active::before{content:"";width:6px;height:6px;border-radius:999px;background:currentColor;}
#my-subscription .sx-badge.warn{background:#FFF8E8;border-color:#FFE4A8;color:#9A6B00;}
#my-subscription .sx-badge.danger{background:#FFF1F2;border-color:#FBD5D5;color:#B42318;}

/* ── 요금제 선택 ───────────────────────────────────────────────────── */
#my-subscription .sx-plans{padding-top:20px;}
#my-subscription .sx-plans-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:16px;
}
#my-subscription .sx-plans-head h2,
#my-subscription .sx-history-head h2{
  margin:0!important;
  color:var(--sx-ink)!important;
  font-size:1.0625rem!important;
  font-weight:900!important;
  letter-spacing:-.03em;
  line-height:1.35;
}
#my-subscription .sx-plans-head .hint{margin:4px 0 0;color:var(--sx-muted);font-size:.84rem;line-height:1.5;}

/* 두 카드를 부모의 같은 5칸에 묶는다 → 혜택 줄 수가 달라도 단추 높이가 같다 */
#my-subscription .sx-plan-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:auto auto auto 1fr auto;
  column-gap:14px;
}
#my-subscription .sx-plan{
  grid-row:1 / -1;
  display:grid;
  grid-template-rows:subgrid;
  min-width:0;
  padding:18px;
  border:1px solid var(--sx-line);
  border-radius:16px;
  background:#fff;
  transition:border-color .14s ease,background-color .14s ease;
}
#my-subscription .sx-plan:hover{border-color:#D9DEEA;}
#my-subscription .sx-plan.is-pick{border-color:var(--sx-accent-line);background:linear-gradient(180deg,#FCFBFF,#FDFDFF);}
#my-subscription .sx-plan.is-pick:hover{border-color:var(--sx-accent);}

#my-subscription .sx-plan-name{display:flex;align-items:center;flex-wrap:wrap;gap:8px;}
#my-subscription .sx-plan-name b{color:var(--sx-ink);font-size:1rem;font-weight:900;letter-spacing:-.03em;}
#my-subscription .sx-pick{
  display:inline-flex;
  align-items:center;
  height:22px;
  padding:0 9px;
  border-radius:999px;
  background:var(--sx-accent);
  color:#fff;
  font-size:.72rem;
  font-weight:900;
  white-space:nowrap;
}
#my-subscription .sx-plan-price{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:6px;
  min-height:44px;
  margin-top:8px;
}
#my-subscription .sx-plan-price b{
  color:#221B50;
  font-family:var(--sx-num);
  font-size:1.9rem;
  font-weight:700;
  letter-spacing:-.05em;
  line-height:1.05;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
#my-subscription .sx-plan.is-pick .sx-plan-price b{color:var(--sx-accent-deep);}
#my-subscription .sx-plan-price .per{color:var(--sx-faint);font-size:.84rem;font-weight:800;}
#my-subscription .sx-plan-price .sx-list{color:#9AA0B4;font-family:var(--sx-num);font-size:.95rem;font-weight:700;white-space:nowrap;}
#my-subscription .sx-plan-line{margin-top:12px;padding-top:12px;border-top:1px solid var(--sx-line-soft);}
#my-subscription .sx-plan-line p{margin:0;color:#4B5565;font-size:.82rem;font-weight:700;line-height:1.45;}
#my-subscription .sx-plan.is-pick .sx-plan-line p{color:var(--sx-accent-deep);}
#my-subscription .sx-plan-line .sx-sale{margin-bottom:6px;color:#B42318;font-weight:600;}
#my-subscription .sx-plan-line .sx-sale b{font-weight:800;}

#my-subscription .sx-plan-feats{
  display:grid;
  align-content:start;
  gap:8px;
  margin:12px 0 0;
  padding:0;
  list-style:none;
}
#my-subscription .sx-plan-feats li{
  display:grid;
  grid-template-columns:18px 1fr;
  gap:8px;
  color:#3D4350;
  font-size:.875rem;
  line-height:1.45;
}
#my-subscription .sx-plan-feats li::before{
  content:"✓";
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  margin-top:1px;
  border-radius:999px;
  background:var(--sx-accent-soft);
  color:var(--sx-accent-deep);
  font-size:.68rem;
  font-weight:900;
}
#my-subscription .sx-plan.is-pick .sx-plan-feats li::before{background:var(--sx-accent);color:#fff;}
#my-subscription .sx-plan-cta{align-self:end;display:flex;flex-direction:column;gap:7px;margin-top:16px;}
#my-subscription .sx-plan-cta .note{color:var(--sx-faint);font-size:.76rem;font-weight:700;text-align:center;}

/* subgrid 를 모르는 옛 브라우저: 혜택 칸이 늘어나 단추를 아래로 민다 */
@supports not (grid-template-rows: subgrid){
  #my-subscription .sx-plan-grid{grid-template-rows:auto;}
  #my-subscription .sx-plan{display:flex;flex-direction:column;}
  #my-subscription .sx-plan-feats{flex:1 1 auto;}
  #my-subscription .sx-plan-cta{align-self:stretch;}
}

/* ── 단추 ──────────────────────────────────────────────────────────── */
#my-subscription .sx-btn,
#my-subscription .sub-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:40px;
  padding:0 17px;
  border:1px solid #E6EBF3;
  border-radius:12px;
  background:#fff;
  color:#344054;
  font-family:inherit;
  font-size:.85rem!important;   /* 공용 규칙이 단추 글자를 1rem!important 로 묶는다 */
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.3;
  text-align:center;
  text-decoration:none;
  white-space:normal;
  cursor:pointer;
  box-shadow:none;
  transition:background-color .14s ease,border-color .14s ease,color .14s ease;
}
#my-subscription .sx-btn:hover,
#my-subscription .sub-btn:hover{background:#FAFBFD;}
#my-subscription .sx-btn:focus-visible,
#my-subscription .sub-btn:focus-visible,
#my-subscription .sx-foot a:focus-visible{outline:3px solid rgba(91,75,232,.3);outline-offset:1px;}
#my-subscription .sx-btn.block{width:100%!important;align-self:stretch;}
#my-subscription .sx-btn.sm{min-height:34px;padding:0 13px;border-radius:10px;font-size:.8rem!important;}
#my-subscription .sx-btn.outline,
#my-subscription .sub-btn[data-pc="open"]{border-color:var(--sx-accent-line);color:var(--sx-accent-deep);}
#my-subscription .sx-btn.outline:hover,
#my-subscription .sub-btn[data-pc="open"]:hover{border-color:var(--sx-accent);background:#FBFAFF;}
#my-subscription .sx-btn.primary,
#my-subscription .sub-btn.primary:not([data-pc="open"]){border-color:var(--sx-accent);background:var(--sx-accent);color:#fff;}
#my-subscription .sx-btn.primary:hover,
#my-subscription .sub-btn.primary:not([data-pc="open"]):hover{border-color:var(--sx-accent-deep);background:var(--sx-accent-deep);}
#my-subscription .sx-btn.danger{border-color:#F1C9C9;color:#B42318;}
#my-subscription .sx-btn.danger:hover{background:#FFF7F7;}
#my-subscription .sx-btn:disabled,
#my-subscription .sub-btn:disabled{opacity:.55;cursor:not-allowed;}

/* ── 구독 중 ───────────────────────────────────────────────────────── */
#my-subscription .sx-mine{
  display:grid;
  grid-template-columns:minmax(0,1fr) 236px;
  align-items:start;
  gap:18px;
}
#my-subscription .sx-mine-main{min-width:0;}
#my-subscription .sx-mine-side{display:grid;gap:8px;}
#my-subscription .sx-plan-change{grid-column:1 / -1;}
#my-subscription .sx-period{display:flex;align-items:center;gap:10px;margin-top:12px;}
#my-subscription .sx-period span{flex:0 0 auto;color:var(--sx-muted);font-size:.76rem;font-weight:700;}
#my-subscription .sx-bar{flex:1 1 auto;height:6px;border-radius:999px;background:var(--sx-line-soft);overflow:hidden;}
#my-subscription .sx-bar i{display:block;height:100%;border-radius:inherit;background:var(--sx-accent);}
#my-subscription .sx-figs{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:16px;
}
#my-subscription .sx-fig{
  display:grid;
  gap:3px;
  min-width:0;
  padding:12px 13px;
  border:1px solid var(--sx-line);
  border-radius:12px;
  background:#FCFCFE;
}
#my-subscription .sx-fig .k{color:var(--sx-muted);font-size:.76rem;font-weight:800;}
#my-subscription .sx-fig .v{color:var(--sx-ink);font-size:1rem;font-weight:900;overflow-wrap:anywhere;}
#my-subscription .sx-fig .v.num{font-family:var(--sx-num);letter-spacing:-.04em;font-variant-numeric:tabular-nums;}
#my-subscription .sx-note{
  margin:14px 0 0;
  padding-top:12px;
  border-top:1px dashed var(--sx-line);
  color:var(--sx-muted);
  font-size:.82rem;
  line-height:1.55;
}

/* 요금제 변경 칸 (plan-change.js 가 채운다) */
#my-subscription .sub-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
#my-subscription .sx-plan-change > .sub-actions:first-child{margin-top:0;}
#my-subscription .pc-box{
  margin-top:4px;
  padding:16px 18px;
  border:1px solid var(--sx-accent-line);
  border-radius:16px;
  background:linear-gradient(180deg,#FCFBFF,#fff);
}
#my-subscription .pc-box > b{color:var(--sx-ink);font-size:.95rem;font-weight:900;}
#my-subscription .pc-box p{margin:6px 0 0;color:#3D4350;font-size:.875rem;line-height:1.55;}
#my-subscription .pc-box small{color:var(--sx-muted);font-weight:400;}
#my-subscription .sub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:12px 0 4px;}
#my-subscription .sub-cell{padding:12px 13px;border:1px solid var(--sx-line);border-radius:12px;background:#fff;}
#my-subscription .sub-cell span{display:block;margin-bottom:3px;color:var(--sx-muted);font-size:.76rem;font-weight:800;}
#my-subscription .sub-cell b{color:var(--sx-ink);font-size:.95rem;font-weight:900;}
#my-subscription .pc-msg{color:#B42318;font-size:.82rem;font-weight:700;}
#my-subscription .pc-msg:empty{display:none;}

/* ── 결제 이력 ─────────────────────────────────────────────────────── */
#my-subscription .sx-history-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;}
#my-subscription .sx-count{
  display:inline-flex;
  align-items:center;
  height:26px;
  padding:0 11px;
  border:1px solid var(--sx-line);
  border-radius:999px;
  background:#F8FAFC;
  color:#475569;
  font-size:.78rem;
  font-weight:800;
}
#my-subscription .sx-empty-note{display:grid;gap:2px;margin:0;padding:4px 0;}
#my-subscription .sx-empty-note b{color:var(--sx-ink);font-size:.9rem;font-weight:800;}
#my-subscription .sx-empty-note span{color:var(--sx-muted);font-size:.84rem;line-height:1.5;}
#my-subscription .sx-empty-note a{color:var(--sx-accent-deep);font-weight:800;}
#my-subscription .sx-table-wrap{overflow-x:auto;}
#my-subscription .sx-table-wrap table{width:100%;border-collapse:collapse;font-size:.86rem;}
#my-subscription .sx-table-wrap th,
#my-subscription .sx-table-wrap td{padding:11px 10px;border-bottom:1px solid var(--sx-line-soft);text-align:left;white-space:nowrap;}
#my-subscription .sx-table-wrap tr:last-child td{border-bottom:0;}
#my-subscription .sx-table-wrap th{color:var(--sx-muted);font-size:.78rem;font-weight:800;}
#my-subscription .sx-table-wrap td{color:#334155;}
#my-subscription .sx-table-wrap .num{text-align:right;font-weight:800;font-variant-numeric:tabular-nums;}
#my-subscription .sx-table-wrap td.when{color:var(--sx-muted);}
#my-subscription .sx-table-wrap td.oid{color:var(--sx-faint);font-size:.8rem;}
#my-subscription .sx-table-wrap small{color:var(--sx-muted);font-weight:400;}
#my-subscription .sx-pill{
  display:inline-flex;
  align-items:center;
  height:22px;
  padding:0 9px;
  border-radius:999px;
  background:#F4F5F8;
  color:#6B7280;
  font-size:.74rem;
  font-weight:900;
}
#my-subscription .sx-pill.paid{background:var(--sx-accent-soft);color:var(--sx-accent-deep);}
#my-subscription .sx-pill.warn{background:#FFF8E8;color:#9A6B00;}
#my-subscription .sx-pill.danger{background:#FFF1F2;color:#B42318;}

/* ── 아래 보조 링크 ────────────────────────────────────────────────── */
#my-subscription .sx-foot{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:0 4px;}
#my-subscription .sx-foot a{
  display:inline-flex;
  align-items:center;
  min-height:44px;   /* 누를 자리는 손가락 폭 */
  color:#5C6474;
  font-size:.82rem;
  font-weight:800;
  text-decoration:none;
  transition:color .14s ease;
}
#my-subscription .sx-foot a:hover{color:var(--sx-accent);}
#my-subscription .sx-foot span{color:#D5DAE4;}

/* ── 반응형 ────────────────────────────────────────────────────────── */
@media (max-width:900px){
  #my-subscription .sx-mine{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:760px){
  #my-subscription .sx-card{padding:16px!important;}
  #my-subscription .sx-plan-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:12px;}
  #my-subscription .sx-plan{grid-row:auto;display:flex;flex-direction:column;}
  #my-subscription .sx-plan-feats{flex:1 1 auto;}
  /* 세로로 쌓이면 'align-self:end' 가 가로(오른쪽 붙이기)로 읽혀 단추가 좁아진다 */
  #my-subscription .sx-plan-cta{align-self:stretch;margin-top:16px;}
  #my-subscription .sx-figs{grid-template-columns:minmax(0,1fr);}
  #my-subscription .sx-btn{min-height:44px;}
  #my-subscription .sx-btn.sm{min-height:44px;}
  #my-subscription .sx-status-copy{flex:1 1 0;}
  /* 공용 휴대폰 규칙이 표 칸을 접어서 날짜가 두 줄이 된다 — 표는 옆으로 밀어 보게 둔다 */
  #my-subscription .sx-table-wrap th,
  #my-subscription .sx-table-wrap td{white-space:nowrap!important;}
}
@media (prefers-reduced-motion: reduce){
  #my-subscription *{transition:none!important;animation:none!important;}
}

/* [2026-10-19] 내 쿠폰 — 관리자가 준 쿠폰. 쓸 수 있는 것만 보라 테두리로 눈에 띄게 한다 */
#my-subscription .sx-coupon-list{display:grid;gap:12px;}
#my-subscription .sx-coupon{border:1px solid var(--sx-line);border-radius:14px;padding:14px 16px;background:#fff;min-width:0;}
#my-subscription .sx-coupon.is-live{border-color:var(--sx-accent-line);background:linear-gradient(135deg,#fff,var(--sx-accent-soft));}
#my-subscription .sx-coupon-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
#my-subscription .sx-coupon-name{min-width:0;word-break:keep-all;}
#my-subscription .sx-coupon-name span{color:var(--sx-muted);font-size:.84rem;font-weight:700;}
#my-subscription .sx-coupon-code{color:var(--sx-ink);font-family:var(--sx-num);font-size:1rem;letter-spacing:.06em;}
#my-subscription .sx-coupon-what{margin:6px 0 0;color:var(--sx-accent-deep);font-size:1.0625rem;font-weight:900;}
#my-subscription .sx-coupon-price{margin:4px 0 0;color:var(--sx-ink);font-size:.86rem;line-height:1.6;}
#my-subscription .sx-coupon-price s{color:var(--sx-faint);}
#my-subscription .sx-coupon-meta{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:10px 0 0;font-size:.84rem;line-height:1.55;}
#my-subscription .sx-coupon-meta dt{color:var(--sx-muted);font-weight:800;white-space:nowrap;}
#my-subscription .sx-coupon-meta dd{margin:0;color:var(--sx-ink);min-width:0;word-break:keep-all;}
#my-subscription .sx-coupon-meta ul{margin:0;padding-left:16px;}
#my-subscription .sx-coupon-meta li{margin:1px 0;}
#my-subscription .sx-dday{margin-left:4px;color:var(--sx-accent-deep);font-weight:900;}
#my-subscription .sx-coupon-note{margin:10px 0 0;color:var(--sx-muted);font-size:.84rem;line-height:1.55;word-break:keep-all;}
#my-subscription .sx-coupon .sx-btn{margin-top:12px;}
@media (max-width:520px){
  #my-subscription .sx-coupon-meta{grid-template-columns:1fr;gap:2px;}
  #my-subscription .sx-coupon-meta dd{margin-bottom:6px;}
  #my-subscription .sx-coupon .sx-btn{width:100%;}
}