:root{
  --bg:#ffffff;
  --text:#111;
  --sub:#555;
  --line:#e9e9e9;
  --brand:#5E70E7;
  --brand-weak:#d5dbf6;
  --brand-ink:#1B2473;
  --card:#fff;
  --muted:#f7f7f9;
  --success:#22c55e;
  --danger:#ef4444;
  --warning:#f59e0b;

  /* 3D용 그림자 톤 */
  --z-shadow-1: 0 8px 18px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);
  --z-shadow-2: 0 14px 30px rgba(0,0,0,.12), 0 6px 10px rgba(0,0,0,.08);
}

/* ▼▼▼ 페이지 배너 스타일 (다른 페이지와 100% 동일하게) ▼▼▼ */
.pricing-page-banner {
  margin: 24px 12px;
  background: linear-gradient(135deg, #FAFAFA 0%, #F3F3F3 100%);
  border-radius: 24px;
  padding: 30px 50px;
  height: 180px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  position: relative;
  box-shadow: 0 8px 25px rgba(180, 200, 220, 0.4), 
              inset 1px 1px 2px #ffffffa0;
  transition: all 0.3s ease-in-out;
}

/* hero 섹션을 배너 하단 컨트롤 영역으로 사용 */
.hero{
  display:flex; /* <-- 추가: 플렉스박스 레이아웃 적용 */
  gap:20px;
  align-items:center; /* <-- 추가: 세로 중앙 정렬 */
  justify-content:space-between; /* <-- 수정: 요소들을 양쪽 끝으로 배치 */
  flex-wrap:wrap;
  margin:8px 0 16px;
}
.hero h1{ font-size:1.85rem; margin:0; font-weight:900; letter-spacing:-.3px }
.hero p{ margin:6px 0 0; color:var(--sub) }

/* perks 클래스 추가 (HTML 구조 변경에 따름) */
.perks{ 
  display:flex; 
  gap:10px; 
  flex-wrap:wrap;
  /* flex-grow와 justify-content를 제거하여 왼쪽 정렬 */
}
.perk{ background:#f6f8ff; border:1px solid #ebefff; border-radius:999px; padding:7px 12px; font-weight:700; font-size:.9rem; color:#3743A1 }

.pricing-page-banner:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(180, 200, 220, 0.5), 
                inset 1px 1px 2px #ffffffa0;
}

.pricing-banner-content {
  flex: 1;
}

.pricing-banner-image {
  flex-shrink: 0;
  width: 250px; 
  height: 100%;
  position: relative;
}

.pricing-banner-img-element {
  position: absolute; 
  width: 260px;       
  height: auto;
  bottom: -62px;      
  right: 30px;        
  opacity: 0.9;
  transition: all 0.3s ease;
  z-index: 1; 
}

.pricing-page-banner h2 {
  font-size: 1.9rem;
  font-weight: 900;
  margin: 0 0 8px 0; 
  color: #403b39;
  text-shadow: none;
}

.pricing-page-banner p {
  font-size: 1rem;
  line-height: 1.6;
  color: #635b58;
  margin: 10px 0 0 0; 
  text-align: left;
  text-shadow: none;
}
/* ▲▲▲ 수정된 부분 끝 ▲▲▲ */



*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:'Noto Sans KR',sans-serif}
a{color:var(--brand);text-decoration:none}

/* 화면 사이즈 살짝 확대 */
.wrap{ 
  max-width:1320px; 
  margin:0 auto; 
  padding: 0 24px; /* <-- 상하 여백을 0으로 만들었습니다. (좌우는 유지) */
}

.topbar{ display:flex; align-items:center; gap:10px; margin-bottom:18px; }

/* 뒤로가기: 화살표만, 배경 없음 */
.back-btn{
  font-size:26px; font-weight:900; color:var(--brand); text-decoration:none;
  line-height:1; margin-right:0;
  display:inline-flex; align-items:center;
  transition: transform .15s ease, color .15s ease, text-shadow .15s ease;
}
.back-btn:hover{ transform:translateX(-3px); color:#324cff; text-shadow:0 6px 18px rgba(47,73,255,.25); }
.back-btn:active{ transform:translateX(-1px); }

.steps{ font-size:.92rem; color:var(--sub); margin-left:auto; margin-right:25px; }

.hero{
  display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  margin:8px 0 16px;
}
.hero h1{ font-size:1.85rem; margin:0; font-weight:900; letter-spacing:-.3px }
.hero p{ margin:6px 0 0; color:var(--sub) }

/* 토글: 슬라이더가 움직이는 캡슐 */
.toggle{
  position:relative; display:flex; align-items:center; gap:0;
  background:#eef0ff; padding:0px; border-radius:999px; border:1px solid #e5e8ff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.toggle::before{
  content:""; position:absolute; top:6px; left:6px;
  width:calc(50% - 6px); height:calc(100% - 12px);
  background:#fff; border-radius:999px;
  box-shadow:0 6px 12px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.85);
  transition:left .25s cubic-bezier(.2,.7,.2,1);
}
/* 연간 활성화 시 오른쪽으로 */
.toggle:has(#yBtn.active)::before{ left:calc(50% + 4px); }

.toggle button{
  flex:1; border:none; background:transparent !important;
  padding:7px 16px; border-radius:999px; cursor:pointer; font-weight:800;
  color:#2a36a8; position:relative; z-index:1; transition:color .2s ease;
  font-size: 0.65rem; /* <-- 글자 크기를 조절하는 속성을 여기에 추가하세요 */
}
.toggle button.active{ color:var(--brand-ink); }

.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:14px; }

/* 카드(요금제/요약) 공통 3D 베이스 */
.plan, .card{
  background:linear-gradient(180deg, #ffffff, #fafbff);
  border-radius:18px;
  border:1px solid #eef0f6;
  box-shadow:var(--z-shadow-1);
  padding:20px 18px;
  position:relative; overflow:hidden;
}
.plan::before, .card::before{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.85), transparent 55%);
  opacity:.6;
}

/* 요금제 카드 개별 설정 */
.plan.popular::after{
  content:'가장 인기'; position:absolute; top:12px; right:-32px; transform:rotate(35deg);
  background:var(--brand); color:#fff; font-size:.72rem; padding:6px 40px; font-weight:700;
}
.plan header{ display:flex; align-items:flex-end; justify-content:space-between; gap:8px; margin-bottom:12px }
.plan h3{ margin:0; font-size:1.15rem }
.price{ font-weight:900; font-size:1.45rem }
.price small{ font-weight:600; color:var(--sub); font-size:.9rem }
.feature{ display:flex; align-items:flex-start; gap:10px; margin:8px 0; color:#222 }
.feature .dot{ width:8px; height:8px; border-radius:50%; background:var(--success); margin-top:6px }
.foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px }

/* 요금제 카드만 hover 시 살짝 상승 */
.plan:hover{ box-shadow:var(--z-shadow-2); transform:translateY(-2px); transition:transform .18s ease, box-shadow .18s ease; }

/* 선택 시 볼록 올라오기 */
@keyframes planPop{
  0%{ transform:translateY(0) scale(1); }
  65%{ transform:translateY(-10px) scale(1.01); }
  100%{ transform:translateY(-8px) scale(1); }
}
.plan.selected{
  transform:translateY(-8px);
  box-shadow:0 18px 40px rgba(47,73,255,.20), 0 8px 16px rgba(47,73,255,.12);
  border-color:#cfd6ff;
  animation:planPop .18s ease-out;
}
.plan.selected::before{ opacity:.8; }

/* 하단 요약/약관 패널은 고정(볼록/hover 없음) */
.summary{ display:grid; grid-template-columns:1.1fr .9fr; gap:18px; margin-top:18px; }
.summary .card,
.summary .card:hover{ transform:none; box-shadow:var(--z-shadow-1); }

/* 선택 버튼 3D */
.select-btn{
  width:100%; border:1px solid #e4e8ff; border-radius:12px;
  padding:12px 14px; cursor:pointer;
  font-weight:800; letter-spacing:.6px; color:var(--brand-ink);
  background:linear-gradient(180deg, #ffffff, #eef1ff);
  box-shadow:0 6px 14px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.9);
  transform:translateY(0);
  transition:transform .06s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.select-btn:hover{
  background:linear-gradient(180deg, #ffffff, #e8ecff);
  box-shadow:0 10px 22px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.95);
}
.select-btn:active{
  transform:translateY(1px);
  box-shadow:0 6px 14px rgba(0,0,0,.12), inset 0 2px 0 rgba(0,0,0,.04);
}
/* 선택된 카드 안 버튼 반전 */
.plan.selected .select-btn{
  background:linear-gradient(180deg, #3956ff, #2f49ff);
  color:#fff; border-color:#2540ff;
  box-shadow:0 10px 22px rgba(47,73,255,.28), inset 0 1px 0 rgba(255,255,255,.2);
}

/* 구독 시작하기 버튼: 입체 검정 */
.btn{
  font-size:1.06rem;
  padding:12px 22px;
  border-radius:10px;
  border:1px solid #0a0a0a;
  cursor:pointer;
  font-weight:800;
  letter-spacing:1px;

  /* 3D 블랙 */
  background: linear-gradient(180deg, #1b1b1e 0%, #0e0e11 60%, #000 100%);
  color:#fff;

  /* 드롭 + 상단 하이라이트 */
  box-shadow:
    0 12px 24px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.08);

  transition: transform .06s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{
  background: linear-gradient(180deg, #212126 0%, #0c0c10 60%, #000 100%);
  box-shadow:
    0 16px 28px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.1);
  transform: translateY(-1px);
}
.btn:active{
  transform: translateY(1px);
  box-shadow:
    0 10px 18px rgba(0,0,0,.35),
    inset 0 2px 0 rgba(0,0,0,.22);
}

/* 비활성(약관 미동의/플랜 미선택)일 때: 회색 & 눌림/호버 금지 */
.btn:disabled{
  background: linear-gradient(180deg, #e6e7eb 0%, #d2d5db 100%);
  border-color:#c3c7ce;
  color:#7a7d86;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  cursor:not-allowed;
  transform:none !important;
}
.btn:disabled:hover,
.btn:disabled:active{
  transform:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

.mini{ font-size:.88rem; color:var(--sub) }
.note{ font-size:.85rem; color:var(--sub); margin-top:6px }
.hr{ height:1px; background:var(--line); margin:14px 0 }

.perks{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px }
.perk{ background:#f6f8ff; border:1px solid #ebefff; border-radius:999px; padding:7px 12px; font-weight:700; font-size:.9rem; color:#3743A1 }

.legal{ font-size:.92rem; color:#333 }
.legal ul{ margin:8px 0 0 18px }
.agree{ display:flex; gap:8px; align-items:center; margin-top:12px; font-size:.85rem }
.agree input{ width:17px; height:17px; margin:0 }
.cta{ display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:14px }

.legal a, .agree a{
  text-decoration:none; border-bottom:1px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.legal a:hover, .agree a:hover,
.legal a:focus-visible, .agree a:focus-visible{
  color:var(--brand-ink); border-bottom-color:var(--brand-ink); outline:none;
}

.methods{ display:flex; gap:10px; flex-wrap:wrap; }

.chip{
  appearance:none;
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 12px;
  background:#fff;
  border:1px solid #e7e7ee;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
  transition:box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.chip:hover{ box-shadow:0 6px 14px rgba(0,0,0,.08); }
.chip.active{
  outline:2px solid var(--brand);
  background:#f7f8ff;
}

@media (max-width: 980px) {
  /* --- 기본 레이아웃 조정 --- */
  .wrap {
    padding: 0 16px;
  }
  .grid, .summary { 
    grid-template-columns: 1fr;
  }

    /* ▼▼▼ [추가] 하단 패널 내부 모바일 스타일 ▼▼▼ */
  .summary .card {
    padding: 16px; /* 모든 하단 패널의 내부 여백 축소 */
  }
  
  /* '결제 수단' 글씨/버튼 크기 축소 */
  .methods .chip {
    font-size: 0.8rem;
    padding: 8px 10px;
  }

  /* '약관' 관련 글씨 크기 축소 */
  .legal {
    font-size: 0.8rem;
  }
  .legal ul {
    margin: 6px 0 0 16px;
  }
  .agree {
    font-size: 0.75rem;
    margin-top: 10px;
  }
  .agree input {
    width: 15px;
    height: 15px;
  }

  /* 내부 구분선(hr) 여백 축소 */
  .hr {
    margin: 10px 0;
  }
  
  /* 하단 작은 안내 문구 크기 축소 */
  .mini {
    font-size: 0.75rem;
  }
  /* ▲▲▲ 여기까지 추가 ▲▲▲ */

  /* --- [수정] 페이지 배너 → 텍스트만 표시 --- */
  .pricing-page-banner {
    background: none;
    border: none;
    box-shadow: none;
    height: auto;
    padding: 0;
    margin: 24px 0 16px 0;
    text-align: center; /* 텍스트를 가운데 정렬 */
  }
  .pricing-page-banner h2 {
    font-size: 1.3rem; /* 글씨 크기 추가 축소 */
  }
  .pricing-page-banner p {
    font-size: 0.85rem; /* 글씨 크기 추가 축소 */
  }
  .pricing-banner-image {
    display: none;
  }
  
  /* --- [수정] 컨트롤 영역(hero) 재설정 --- */
  .hero {
    display: flex !important; /* [핵심] hero 영역이 확실히 보이도록 강제 */
    flex-direction: row;
    justify-content: space-between; /* h1은 왼쪽, 토글은 오른쪽으로 배치 */
    align-items: center;
    gap: 16px;
  }
  .hero h1 {
    font-size: 1.2rem;
    text-align: left;
    margin: 0; /* 불필요한 여백 제거 */
  }

  .perks {
    display: none; /* 모바일에서는 perks 영역 숨김 처리로 단순화 */
  }

  /* --- 요금제 카드 모바일 스타일 --- */
  .plan.popular {
    transform: none;
  }
  .plan {
    padding: 24px;
  }
  .plan h3 {
    font-size: 1.1rem;
  }
  .price {
    font-size: 1.3rem;
  }
  .feature {
    font-size: 0.9rem;
  }
  
  /* --- 하단 요약 및 결제 버튼 --- */
  .cta {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .cta .btn {
    width: 100%;
    justify-content: center;
  }
}