/* ============================================================
   DATASMITH Design System v2 (v1.6.0) — 미니멀 · 정제된 프리미엄 SaaS
   하나의 폰트(Pretendard) · 하나의 컬러 토큰 체계 · 공통 상단바 규격
   ============================================================ */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');
:root{
  /* Color tokens — Background / Surface / Text / Muted / Border / Primary / Status */
  --bg:#0A0A0B; --coal:#121214; --white:#F4F3EF; --mid:#8E8D8A;
  --hair:rgba(244,243,239,.14); --hair2:rgba(244,243,239,.42);
  --primary:#E3C98F; --danger:#E45B5B; --ok:#8FE3B0; --warn:#E3C98F; --link:#8FBFE3;
  /* Typography scale — 대제목 21 / 소제목 15.5 / 본문 13.5 / 보조 12 (Regular/Medium/Semibold) */
  --font:'Pretendard Variable',Pretendard,'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  --fs-h1:21px; --fs-h2:15.5px; --fs-body:13.5px; --fs-sub:12px;
  /* Spacing (4 기준) / Component sizing */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px;
  --btn-h:40px; --input-h:40px; --radius:0px; --focus:1px solid var(--hair2);
  --bar-h:52px;
}
/* Base — 한글·영문 하나의 폰트 패밀리 */
body{background:var(--bg);color:var(--white);font-family:var(--font);font-size:var(--fs-body);line-height:1.7;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:-.005em}
h1,h2,h3{font-family:var(--font);font-weight:600;letter-spacing:-.01em}
.mono{font-family:var(--font);font-weight:600;letter-spacing:.22em;text-transform:uppercase}
/* Button — Primary / Secondary(기본) / Destructive 공통 규격 */
button,.lv-btn{font:inherit;font-size:12.5px;font-weight:600;letter-spacing:.04em;min-height:var(--btn-h);padding:0 16px;border-radius:var(--radius);cursor:pointer;border:1px solid var(--hair);background:transparent;color:var(--white);transition:border-color .2s,background .2s,color .2s;display:inline-flex;align-items:center;justify-content:center;text-align:center}
button:hover{border-color:var(--white)}
button.primary{background:var(--white);border-color:var(--white);color:#0A0A0B;font-weight:600}
button.primary:hover{background:transparent;color:var(--white)}
button.danger{background:var(--white);border-color:var(--white);color:#0A0A0B;font-weight:600}
button:disabled{opacity:.45;cursor:default}
/* Input / Select / Textarea 공통 규격 */
input,select,textarea{font:inherit;font-size:13.5px;min-height:var(--input-h);padding:0 13px;border:1px solid var(--hair);border-radius:var(--radius);background:transparent;color:var(--white);outline:none;transition:border-color .2s}
textarea{padding:12px 13px;min-height:88px}
input:focus,select:focus,textarea:focus{border-color:var(--white)}
input::placeholder,textarea::placeholder{color:rgba(244,243,239,.32)}
/* Focus ring — 키보드 접근성 */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--white);outline-offset:2px}
/* Card / Row */
.card{background:var(--coal);border:1px solid var(--hair);border-radius:var(--radius);padding:24px 22px}
.row{display:flex;gap:8px;align-items:center}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* 미디어가 부모 영역을 벗어나지 않도록 */
img,svg,video,canvas{max-width:100%;height:auto}

/* ===== v2.4.0: 멤버십 플랜 카드 반응형 (계정 화면) — 4열 강제 나열을 화면 폭에 따라 4/2×2/1열로 전환 ===== */
#ms-plans{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))!important;gap:12px!important}
#ms-plans>*{min-width:0;box-sizing:border-box}
#ms-plans div{overflow-wrap:break-word}