/* =========================================================
   BMT CORE — components + tokens (scoped)
   Scope root: .bmt-magazine-v4
   ========================================================= */

.bmt-magazine-v4{
  /* neutral finance grayscale */
  --n0:#ffffff;
  --n50:#f7f8fb;
  --n75:#f3f5f9;
  --n100:#eef1f6;
  --n200:#e3e8f0;
  --n300:#cfd7e3;
  --n400:#9aa6b2;
  --n500:#6b7280;
  --n600:#4b5563;
  --n700:#334155;
  --n800:#1f2937;
  --n900:#0b1220;

  --bg:var(--n75);
  --paper:var(--n0);
  --ink:var(--n900);
  --muted:rgba(11,18,32,.70);

  --line: rgba(11,18,32,.10);
  --line2: rgba(11,18,32,.07);

  /* brand accents (keep minimal) */
  --brand:#4f46e5;
  --brand2:#06b6d4;

  /* radius/shadow */
  --radius:18px;
  --shadow-sm:0 8px 20px rgba(2,6,23,.06);
  --shadow-md:0 12px 30px rgba(2,6,23,.10);
  --shadow-lg:0 18px 44px rgba(2,6,23,.12);

  --ease:cubic-bezier(.2,.8,.2,1);
  --ring:0 0 0 4px rgba(79,70,229,.18);

  /* unified chart colors (NO green/red mismatch) */
  --chart-track: rgba(11,18,32,.10);
  --chart-fill-strong: linear-gradient(90deg, rgba(79,70,229,.95), rgba(6,182,212,.60));
  --chart-fill-soft:   linear-gradient(90deg, rgba(51,65,85,.80), rgba(154,166,178,.55));
}

.bmt-magazine-v4, .bmt-magazine-v4 *{ box-sizing:border-box; }

.bmt-magazine-v4 a{ color:inherit; text-decoration:none; }
.bmt-magazine-v4 a:hover{ text-decoration:none; }

/* headings */
.bmt-magazine-v4 h2{ margin:0 0 10px; font-size:1.22rem; letter-spacing:-0.015em; color:var(--ink); }
.bmt-magazine-v4 h3{ margin:16px 0 8px; font-size:1.02rem; color:var(--ink); }
.bmt-magazine-v4 p{ margin:10px 0; color:rgba(11,18,32,.92); }

.bmt-magazine-v4 .list{ margin:10px 0 0; padding-left:18px; }
.bmt-magazine-v4 .list li{ margin:6px 0; }

/* Card */
.bmt-magazine-v4 .card{
  background:var(--paper);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow-md);
  border:1px solid rgba(11,18,32,.06);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.bmt-magazine-v4 .card:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow-lg);
}
.bmt-magazine-v4 .card + .card{ margin-top:14px; }

/* mini title */
.bmt-magazine-v4 .mini-title{
  font-weight:950;
  font-size:.82rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(11,18,32,.60);
  margin-bottom:10px;
}

/* Table - Desktop Only */
@media (min-width: 769px) {
  .bmt-magazine-v4 table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    overflow:hidden;
    border-radius:14px;
    background: rgba(2,6,23,.012);
    border: 1px solid rgba(11,18,32,.07);
  }
  .bmt-magazine-v4 thead th{
    text-align:left;
    padding:12px 14px;
    font-size:.80rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:rgba(11,18,32,.62);
    background: linear-gradient(180deg, rgba(11,18,32,.06), rgba(11,18,32,.03));
  }
  .bmt-magazine-v4 td{
    padding:12px 14px;
    border-top:1px solid rgba(11,18,32,.08);
    background: rgba(255,255,255,.62);
  }
  .bmt-magazine-v4 tbody tr:hover td{ background: rgba(79,70,229,.05); }
  .bmt-magazine-v4 .num{ text-align:right; font-variant-numeric:tabular-nums; }
  
  .bmt-magazine-v4 .hl{
    background: linear-gradient(180deg, rgba(11,18,32,.04), rgba(11,18,32,.02)) !important;
  }
}

/* concept blocks */
.bmt-magazine-v4 .concept{
  background: rgba(11,18,32,.03);
  border-radius:14px;
  padding:12px;
  border: 1px solid rgba(11,18,32,.06);
}
.bmt-magazine-v4 .term{ font-weight:950; margin-bottom:4px; }
.bmt-magazine-v4 .def{ color:rgba(11,18,32,.74); }

/* premium TL;DR + tip (no "cheap violet") */
.bmt-magazine-v4 .note{
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(11,18,32,.08);
  border-radius:16px;
  padding:14px 14px;
  box-shadow: var(--shadow-sm);
  position:relative;
}
.bmt-magazine-v4 .note:before{
  content:"";
  position:absolute;
  left:0; top:12px; bottom:12px;
  width:3px;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(79,70,229,.85), rgba(6,182,212,.55));
}
.bmt-magazine-v4 .note h3{
  margin:0 0 10px;
  font-size:.82rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: rgba(11,18,32,.72);
  padding-left:10px;
}
.bmt-magazine-v4 .note .note-body{ padding-left:10px; color:rgba(11,18,32,.78); }

/* links block */
.bmt-magazine-v4 .links{
  display:grid;
  gap:8px;
}
.bmt-magazine-v4 .links a{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  padding:10px 12px;
  border-radius:12px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(11,18,32,.06);
  transition: transform .16s var(--ease), background .16s var(--ease), box-shadow .16s var(--ease);
}
.bmt-magazine-v4 .links a:hover{
  transform: translateY(-1px);
  background: rgba(79,70,229,.06);
  box-shadow: var(--shadow-sm);
}
.bmt-magazine-v4 .links .tag{
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:rgba(11,18,32,.55);
}

/* Ad */
.bmt-magazine-v4 .ad{
  padding:16px;
  border-radius:16px;
  background: linear-gradient(180deg, rgba(11,18,32,.03), rgba(11,18,32,.02));
  border: 1px dashed rgba(11,18,32,.18);
}
.bmt-magazine-v4 .ad .ad-label{
  font-weight:950;
  font-size:.74rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(11,18,32,.55);
  margin-bottom:10px;
}
.bmt-magazine-v4 .ad .ad-box{
  border-radius:14px;
  height:250px;
  background: repeating-linear-gradient(135deg, rgba(11,18,32,.06) 0 10px, rgba(11,18,32,.03) 10px 20px);
  border: 1px solid rgba(11,18,32,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(11,18,32,.55);
  font-weight:900;
  font-variant-numeric:tabular-nums;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .bmt-magazine-v4 *{ transition:none !important; }
}

/* ===================================================
   BMT PLAN-002: LAYOUT & TOGGLE STYLES (필수)
   =================================================== */

/* 1. 기본 챕터 스타일 */
.bmt-plan-002 .plan-chapter {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin-bottom: 20px;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
}

/* 2. 챕터 내용: 기본적으로 숨김 (안 보임) */
.bmt-plan-002 .chapter-content {
  display: none; 
  padding: 0 20px 20px 20px;
  border-top: 1px solid #edf2f7;
  animation: slideDown 0.3s ease-out;
}

/* 3. [중요] expanded 클래스가 붙으면 보임! */
.bmt-plan-002 .plan-chapter.expanded .chapter-content {
  display: block; 
}

/* 4. 그림자 효과 (열렸을 때) */
.bmt-plan-002 .plan-chapter.expanded {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  border-color: #cbd5e0;
}

/* 5. 화살표 버튼 회전 효과 */
.bmt-plan-002 .chapter-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  cursor: pointer;
  color: #a0aec0;
  transition: transform 0.3s ease;
  padding: 5px;
  z-index: 10;
}

/* 열렸을 때 화살표 180도 회전 */
.bmt-plan-002 .plan-chapter.expanded .chapter-toggle {
  transform: rotate(180deg);
  color: #4a5568;
}

/* 6. 부드러운 열림 애니메이션 */
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 7. 대시보드 및 헤더 기본 스타일 (깨짐 방지용) */
.bmt-plan-002 { max-width: 800px; margin: 0 auto; font-family: sans-serif; }
.bmt-plan-002 .plan-header { text-align: center; margin-bottom: 30px; padding: 20px; background: #f8f9fa; border-radius: 12px; }
.bmt-plan-002 .plan-dashboard { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; margin-bottom: 40px; }
.bmt-plan-002 .dashboard-grid, .bmt-plan-002 .dashboard-bars { display: flex; gap: 15px; margin-bottom: 15px; justify-content: space-between; }
.bmt-plan-002 .balance-bar { flex: 1; }
.bmt-plan-002 .bar-track { height: 8px; background: #edf2f7; border-radius: 4px; overflow: hidden; margin: 5px 0; }
.bmt-plan-002 .bar-fill { height: 100%; transition: width 0.5s ease; }
/* 바 색상 */
#tax-fill { background: #FFB84D; }
#legal-fill { background: #06B6D4; }
#investing-fill { background: #10B981; }

/* =========================================================
   TABLE MOBILE: CARD LAYOUT (최적화 버전)
   ========================================================= */

@media (max-width: 768px) {
    /* 카드 컨테이너 overflow 방지 */
    .bmt-magazine-v4 .card {
        overflow: hidden;
        padding: 16px;
    }
    
    /* 테이블을 블록으로 변환 */
    .bmt-magazine-v4 table {
        display: block !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* 헤더 숨김 */
    .bmt-magazine-v4 thead {
        display: none !important;
    }
    
    /* tbody도 블록 */
    .bmt-magazine-v4 tbody {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* 각 행을 카드로 */
    .bmt-magazine-v4 tbody tr {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 16px !important;
        padding: 16px !important;
        background: rgba(255, 255, 255, 0.95) !important;
        border: 1px solid rgba(11, 18, 32, 0.10) !important;
        border-radius: 14px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    
    /* 각 셀을 블록으로 */
    .bmt-magazine-v4 tbody td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: left !important;
        padding: 10px 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-sizing: border-box !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        word-break: break-word !important;
        white-space: normal !important;
    }
    
    /* 첫 번째 td (제목 스타일) */
    .bmt-magazine-v4 tbody td:first-child {
        font-size: 1.05rem !important;
        font-weight: 900 !important;
        color: var(--ink) !important;
        margin-bottom: 12px !important;
        padding-bottom: 12px !important;
        border-bottom: 2px solid rgba(11, 18, 32, 0.08) !important;
    }
    
    /* 두 번째 td 라벨 */
    .bmt-magazine-v4 tbody td:nth-child(2):before {
        content: "WHO FITS HERE?" !important;
        display: block !important;
        font-size: 0.72rem !important;
        font-weight: 950 !important;
        letter-spacing: 0.12em !important;
        text-transform: uppercase !important;
        color: rgba(11, 18, 32, 0.55) !important;
        margin-bottom: 6px !important;
    }
    
    /* 세 번째 td 라벨 */
    .bmt-magazine-v4 tbody td:nth-child(3):before {
        content: "THE RULE" !important;
        display: block !important;
        font-size: 0.72rem !important;
        font-weight: 950 !important;
        letter-spacing: 0.12em !important;
        text-transform: uppercase !important;
        color: rgba(11, 18, 32, 0.55) !important;
        margin-bottom: 6px !important;
    }
    
    /* 텍스트 스타일 */
    .bmt-magazine-v4 tbody td {
        line-height: 1.5 !important;
        font-size: 0.88rem !important;
    }
    
    /* 내부 요소도 너비 제한 */
    .bmt-magazine-v4 tbody td * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* 작은 모바일 추가 최적화 */
@media (max-width: 480px) {
    .bmt-magazine-v4 .card {
        padding: 12px !important;
    }
    
    .bmt-magazine-v4 tbody tr {
        padding: 12px !important;
    }
    
    .bmt-magazine-v4 tbody td:first-child {
        font-size: 0.95rem !important;
    }
    
    .bmt-magazine-v4 tbody td {
        font-size: 0.85rem !important;
    }
}