/* /board_subscription/assets/bs-subscription.css */
/* ==========================================================================
   Board Subscription UI – Shared Styles for #bs-pricing & #bs-market
   - 디자인 유지: 기존 HTML 클래스/ID 그대로 활용
   - 재사용성 강화: 공통 토큰/컴포넌트 통합
   - 다크모드: prefers-color-scheme 기반
   ========================================================================== */

/* ===== 리빌더 오버라이드 ===== */
#container_title{
  display:none;
}

/* ===== Design Tokens (scoped) ===== */
#bs-pricing, #bs-market{
  --bg:#f7f7fb; --surface:#ffffff; --card:#ffffff; --line:#e5e7eb;
  --text:#111827; --muted:#6b7280; --ring: rgba(37,99,235,.25);

  --sh-card: 0 1px 2px rgba(0,0,0,.04);
  --sh-card-h: 0 6px 16px rgba(0,0,0,.08);
}

/* ===== Hero ===== */
.hero{
  display:flex; justify-content:space-between; align-items:center; gap:12px; margin:8px 0 16px;
}
.hero .title, .hero .t1{
  font-size:20px; color:var(--text); letter-spacing:-.01em;
}
.hero .subtitle, .hero .t2{
  font-size:12px; color:var(--muted); margin-top:6px;
}
.hero .balances, .hero .chips{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
}

/* ===== Chip ===== */
.hero .chip{
  display:inline-flex; gap:8px; align-items:center; background:var(--surface);
  border:1px solid var(--line); border-radius:999px; padding:7px 12px;
  font-size:12px; color:var(--text); box-shadow:var(--sh-card);
}

/* ===== Grid & Card ===== */
#bs-pricing .grid, #bs-market .grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:16px; margin-top:6px;
}
@media (max-width:980px){
  #bs-pricing .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
  #bs-pricing .grid{ grid-template-columns:1fr; }
}

#bs-pricing .card, #bs-market .card{
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px;
  display:flex; flex-direction:column; gap:8px; box-shadow:var(--sh-card);
  transition:transform .12s, box-shadow .15s, border-color .15s;
}
#bs-pricing .card:hover, #bs-market .card:hover{
  transform:translateY(-2px); box-shadow:var(--sh-card-h); border-color:rgba(0,0,0,.08);
}

/* ===== Price (both variants) ===== */
#bs-pricing .price-row{ display:flex; align-items:flex-end; gap:8px; color:var(--text); }
#bs-pricing .price-big{ font-size:30px; }
#bs-pricing .per{ font-size:12px; color:var(--muted); }
#bs-pricing .altprice{ font-size:12px; color:var(--muted); margin-top:-4px; }

#bs-market .price{ display:flex; gap:14px; align-items:baseline; margin-top:2px; }
#bs-market .price .p{ font-size:22px; opacity:.9; color:var(--text); }
#bs-market .price .p.focus{ color:var(--rb-main-color); opacity:1; }
#bs-market .price small{ font-size:12px; color:var(--muted); }

/* ===== Tags / Text in Cards ===== */
#bs-pricing .plan-name{ color:var(--text); }
#bs-market .tag{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:#f3f4f6; color:#374151; font-size:12px;
}
@media (prefers-color-scheme: dark){
  #bs-market .tag{ background:#1f2937; color:#e5e7eb; }
}
#bs-market .name{ font-size:20px; color:var(--text); }
#bs-market .term{ font-size:12px; color:var(--muted); }

/* ===== Feature list (unified) ===== */
#bs-pricing .feat, #bs-market .features{
  list-style:none; margin:6px 0 0; padding:0;
}
#bs-pricing .feat li, #bs-market .features li{
  position:relative; padding-left:18px; margin:6px 0; color:var(--text); font-size:13px;
}
#bs-pricing .feat li:before, #bs-market .features li:before{
  content:'✔'; position:absolute; left:0; top:0; color:var(--rb-main-color); font-size:12px; line-height:18px;
}
#bs-market .more{
  background:none; border:none; color:var(--rb-main-color); text-decoration:underline; cursor:pointer; font-size:12px; padding:0;
}

/* ===== Buttons (unified) ===== */
#bs-pricing .btn, #bs-market .s-btn{
  appearance:none; border:1px solid var(--line); background:var(--surface); border-radius:10px;
  text-decoration:none; color:var(--text); font-size:14px; cursor:pointer;
  transition:transform .1s, background-color .15s, border-color .15s;
}
#bs-pricing .btn:hover, #bs-market .s-btn:hover{ transform:translateY(-1px); }

#bs-pricing .btn{ width:100%; border-color:transparent; background:var(--rb-main-color); color:#fff; }
#bs-pricing .btn:hover{ filter:brightness(.97); }
#bs-pricing .btn:disabled{ opacity:.6; cursor:not-allowed; }

#bs-market .s-btn.primary{ border-color:transparent; background:var(--rb-main-color); color:#fff; }
#bs-market .s-btn.primary:hover{ filter:brightness(.97); }

/* ===== Toolbars / Filters (market only) ===== */
#bs-market .toolbar{
  position:sticky; top:var(--bs-sticky-top,0); z-index:40;
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:10px;
  box-shadow:var(--sh-card); margin:8px 0 12px;
}
#bs-market .sel, #bs-market .txt, #bs-market .btn{
  height:36px; border:1px solid var(--line); border-radius:10px; background:var(--card);
  padding:0 12px; font-size:13px; color:var(--text);
  outline:0; transition:box-shadow .15s, border-color .15s, transform .06s;
}
#bs-market .txt::placeholder{ color:var(--muted); }
#bs-market .sel:focus, #bs-market .txt:focus, #bs-market .btn:focus{
  box-shadow:0 0 0 3px var(--ring); border-color:transparent;
}
#bs-market .btn{ cursor:pointer; }
#bs-market .btn:hover{ transform:translateY(-1px); }
#bs-market .count{ margin-left:auto; font-size:12px; color:var(--muted); }

#bs-market .carousel{ display:flex; gap:8px; overflow:auto; padding:4px 2px; margin:2px 0 10px; scrollbar-width:thin; }
#bs-market .b-chip{
  flex:0 0 auto; border:1px solid var(--line); background:var(--surface);
  border-radius:999px; padding:7px 12px; font-size:12px; cursor:pointer; color:var(--text);
  transition:background-color .15s, border-color .15s, transform .06s, color .15s;
}
#bs-market .b-chip:hover{ transform:translateY(-1px); }
#bs-market .b-chip[aria-pressed="true"]{
  background: color-mix(in oklab, var(--rb-main-color) 14%, transparent);
  border-color: color-mix(in oklab, var(--rb-main-color) 35%, var(--line));
  color: color-mix(in oklab, var(--rb-main-color) 65%, var(--text));
}

/* mini chips inside bundle cards */
#bs-market .mini-chips{ display:flex; gap:6px; flex-wrap:wrap; margin-top:2px; }
#bs-market .m-chip{
  flex:0 0 auto; border:1px solid var(--line); background:var(--surface);
  border-radius:999px; padding:5px 9px; font-size:12px; cursor:pointer; color:var(--text);
  transition:background-color .15s, border-color .15s, transform .06s, color .15s;
}
#bs-market .m-chip:hover{ transform:translateY(-1px); }
#bs-market .m-chip[aria-pressed="true"]{
  background: color-mix(in oklab, var(--rb-main-color) 14%, transparent);
  border-color: color-mix(in oklab, var(--rb-main-color) 35%, var(--line));
  color: color-mix(in oklab, var(--rb-main-color) 65%, var(--text));
}

/* ===== Section / Subsection (market only) ===== */
#bs-market .sec{ margin:30px 0; }
#bs-market .sec-head{ display:flex; align-items:center; gap:8px; margin:6px 0 10px; }
#bs-market .sec-title{ font-size:18px; color:var(--text); }
#bs-market .sec-badge, #bs-market .sub-badge{
  border:1px solid var(--line); border-radius:999px; padding:2px 8px; font-size:12px; background:var(--surface); color:var(--muted);
}
#bs-market .subsec{ margin:10px 0 18px; }
#bs-market .sub-head{ display:flex; align-items:center; gap:8px; margin:4px 0 8px; }
#bs-market .sub-title{ color:var(--text); }

/* ===== Helpers / Empty ===== */
#bs-pricing .note, #bs-market .empty + .note, #bs-market .count{
  font-size:12px; color:var(--muted); margin-top:10px;
}
#bs-pricing .empty, #bs-market .empty{
  text-align:center; color:var(--muted); padding:26px;
  border:1px dashed var(--line); border-radius:12px; background:var(--card);
}

/* ===== Responsive tweaks ===== */
@media (max-width:640px){
  #bs-market .toolbar{ padding:8px; }
  #bs-market .s-btn, #bs-market .txt, #bs-market .sel, #bs-market .btn{ height:36px; }
}

/* ===== Accessibility ===== */
#bs-pricing .btn:focus-visible,
#bs-market .sel:focus-visible, #bs-market .txt:focus-visible, #bs-market .btn:focus-visible,
#bs-market .b-chip:focus-visible, #bs-market .m-chip:focus-visible, #bs-market .s-btn:focus-visible{
  outline:none; box-shadow:0 0 0 3px var(--ring) !important;
}


/* ===== My Subscriptions ( #msub ) ===== */

/* Layout & Basics */
#msub .msub-section{ margin:20px 0 }
#msub .msub-card{ border:1px solid var(--line); border-radius:14px; background:var(--card) }
#msub .msub-card .msub-card-body{ padding:20px }
#msub .msub-card .msub-card-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid color-mix(in srgb, var(--line) 90%, transparent)
}
#msub .msub-card .msub-card-head h3{ margin:0; font-size:18px; color:var(--text) }

/* Hero (간단 변형 없이 유지) */
#msub .msub-hero{ display:flex; align-items:center; justify-content:space-between; background:linear-gradient(180deg,#f9fafb,#ffffff); border:1px solid var(--line); border-radius:16px; padding:16px 18px }
#msub .msub-hero-left{ display:flex; align-items:center; gap:12px }
#msub .msub-hero-icon{ width:40px; height:40px; border-radius:9999px; background:var(--rb-main-color); display:flex; align-items:center; justify-content:center; color:#fff }
#msub .msub-hero-title{ display:flex; flex-direction:column }
#msub .msub-hero-title .msub-t1{ font-size:20px; font-weight:700; color:var(--text) }
#msub .msub-hero-title .msub-t2{ font-size:13px; color:var(--muted) }
#msub .msub-top-actions{ display:flex; gap:8px }
#msub .msub-btn{
  display:inline-block; appearance:none; border:1px solid color-mix(in srgb, var(--line) 90%, transparent);
  background:var(--card); border-radius:10px; padding:8px 12px; text-decoration:none; color:var(--text); font-size:14px
}
#msub .msub-btn.primary{ border-color:transparent; background:var(--rb-main-color); color:#fff }

/* Stats */
#msub .msub-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; margin-top:12px }
#msub .msub-stat{ border:1px solid var(--line); background:var(--card); border-radius:12px; padding:14px 16px }
#msub .msub-name{ font-size:12px; color:var(--muted) }
#msub .msub-val{ font-size:20px; font-weight:700; margin-top:4px; color:var(--text) }
#msub .msub-meta{ font-size:12px; color:var(--muted) }

/* Active Subscriptions */
#msub .msub-tbl{ width:100%; border-collapse:separate; border-spacing:0; color:var(--text) }
#msub .msub-tbl th,#msub .msub-tbl td{ padding:12px 10px; border-bottom:1px solid var(--line); text-align:left; font-size:14px; vertical-align:middle }
#msub .msub-tbl th{ background:color-mix(in srgb, var(--card) 90%, #f5f7fb); font-weight:600 }
#msub .msub-tbl tbody tr:hover{ background:color-mix(in srgb, var(--card) 95%, #f8fafc) }
#msub .msub-badge{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; background:#eef2ff; color:#3730a3 }
#msub .msub-badge.success{ background:#E8F8EF; color:#047857 }
#msub .msub-badge.muted{ background:#F3F4F6; color:#6B7280 }
#msub .msub-progress{ position:relative; height:8px; border-radius:999px; background:color-mix(in srgb, var(--line) 60%, #f3f4f6); overflow:hidden }
#msub .msub-progress>i{ position:absolute; left:0; top:0; bottom:0; width:0; background:var(--rb-main-color) }
#msub .msub-small{ color:var(--muted); font-size:12px }

/* Purchases */
#msub .msub-toolbar{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px }
#msub .msub-input,#msub .msub-select{
  appearance:none; border:1px solid color-mix(in srgb, var(--line) 90%, transparent);
  border-radius:10px; padding:8px 10px; background:var(--card); font-size:14px; color:var(--text)
}
#msub .msub-input{ min-width:200px }
#msub .msub-select{ min-width:160px }
#msub .msub-tbl .msub-td-right{ text-align:right }
#msub .msub-empty{ padding:26px 10px; color:var(--muted); text-align:center }

/* Chart */
#msub .msub-chart{ width:100%; height:160px }
#msub .msub-legend{ display:flex; gap:10px; margin-bottom:6px }
#msub .msub-chip{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted) }
#msub .msub-legend i{ display:inline-block; width:12px; height:12px; border-radius:2px; background:var(--rb-main-color) }
#msub .msub-legend i.msub-dp{ background:var(--muted) }

/* Pagination */
#msub .msub-pg{ display:flex; gap:6px; justify-content:center; margin:16px 0 }
#msub .msub-pg a,#msub .msub-pg span{
  display:inline-block; border:1px solid var(--line); border-radius:8px; padding:6px 10px; font-size:13px; color:var(--text); text-decoration:none; background:var(--card)
}
#msub .msub-pg .on{ background:var(--text); color:#fff; border-color:var(--text) }

/* Responsive */
@media (max-width:860px){
  #msub .msub-stats{ grid-template-columns:repeat(auto-fit,minmax(160px,1fr)) }
}
@media (max-width:640px){
  #msub .msub-hero{ flex-direction:column; align-items:flex-start; gap:10px }
  #msub .msub-tbl th:nth-child(4), #msub .msub-tbl td:nth-child(4){ display:none }
}