:root{
  /* 다크 테마 — style.css와 톤 매칭 */
  --plan-bg:#1e1e2f;
  --plan-text:#f5f5f5;
  --plan-muted:#b6b8c8;
  --plan-border:#2b2b3c;
  --plan-card:#24243a;    /* #2b2b3c와 근접한 톤 */
  --plan-shadow:rgba(0,0,0,0.35);
  --plan-accent:#e71909;  /* view-toggle active와 동일 포인트 컬러 */
  --plan-accent-soft:rgba(231, 25, 9, 0.14);
  --plan-focus:#4fabff;   /* 셀렉트 포커스 링 컬러 */
}

.plan-container{
  max-width:1200px;
  margin:24px auto 80px;
  padding:0 16px;
  color:var(--plan-text);
}

.plan-header h1{
  margin:0 0 6px;
  font-size:28px;
  font-weight:800;
  color:var(--plan-text);
}
.plan-header p{
  margin:0 0 20px;
  color:var(--plan-muted);
}

.plans-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:16px;
  align-items:stretch; /* 카드 높이 균일 */
}

@media (max-width: 1100px){
  .plans-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .plans-grid{ grid-template-columns: 1fr; }
}

.plan-card{
  background:var(--plan-card);
  border:1px solid var(--plan-border);
  border-radius:16px;
  padding:18px;
  display:flex;
  flex-direction:column;
  box-shadow:0 8px 22px var(--plan-shadow);
  /* 요구사항: 카드 높이 화면의 3/4 지점 */
  min-height:75vh;
}

.plan-card.highlight{
  outline:2px solid var(--plan-accent);
  box-shadow:0 14px 32px var(--plan-shadow);
}

.plan-top{
  position:relative;
  padding-bottom:10px;
  border-bottom:1px dashed var(--plan-border);
  margin-bottom:12px;
}
.plan-name{
  margin:0 0 6px;
  font-size:18px;
  font-weight:800;
  color:var(--plan-text);
}
.plan-price{
  font-size:24px;
  font-weight:900;
  letter-spacing:-0.5px;
  color:#fff;
}
.plan-sub{
  color:var(--plan-muted);
  font-size:12px;
}

.plan-badge{
  position:absolute; top:-10px; right:0;
  font-size:11px; padding:4px 8px;
  background:var(--plan-accent); color:#fff; border-radius:999px;
}

.plan-features{
  list-style:none; padding:0; margin:0 0 16px;
  display:grid; gap:10px;
  color:var(--plan-text);
}
.plan-features li{
  position:relative; padding-left:20px; font-size:14px;
}
.plan-features li::before{
  content:""; position:absolute; left:0; top:6px;
  width:8px; height:8px; border-radius:50%;
  background:var(--plan-accent);
  opacity:.5;
}

/* 버튼 */
.plan-btn{
  appearance:none; border:none; cursor:pointer;
  border-radius:12px; padding:12px;
  font-weight:800; font-size:14px;
  background:var(--plan-accent); color:#fff;
  transition:transform .04s ease, box-shadow .2s ease, opacity .2s ease;
  box-shadow:0 6px 16px rgba(231,25,9,0.25);
}
.plan-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(231,25,9,0.28);
}
.plan-btn:active{
  transform:translateY(0);
  box-shadow:none;
}

.plan-btn.ghost{
  background:transparent; color:#fff;
  border:1px solid var(--plan-border);
  box-shadow:none;
}
.plan-btn.ghost:hover{
  background:rgba(255,255,255,0.04);
}

/* 하단 CTA */
.plan-cta{ margin-top:12px; }
.account-cta-btn{
  width:100%; border-radius:10px; padding:10px 12px; font-weight:700;
  border:1px dashed var(--plan-accent);
  background:var(--plan-accent-soft);
  color:#fff;
  cursor:pointer;
  transition:opacity .2s ease, transform .04s ease;
}
.account-cta-btn:hover{ opacity:.92; transform:translateY(-1px); }

/* 포커스 접근성 */
.plan-btn:focus,
.account-cta-btn:focus{
  outline:none;
  box-shadow:0 0 0 2px var(--plan-focus);
}

/* 모바일에서 너무 커보이면 필요시 낮춤 (원칙: 75vh 유지) */
@media (max-width: 640px){
  .plan-card{ min-height:70vh; }
}

.plan-actions {
  display: flex;
  flex-direction: column;
  gap: 8px; /* 결제 버튼과 CTA 간 간격 */
  margin-top: auto; /* 카드 하단으로 밀착 */
}