/* 요금제 화면 전용 스타일 — 다른 CSS 파일(style.css 등)에 기대지 않고 이 파일 하나로
   완결한다(다른 사람이 그 파일들을 같이 고치고 있어 의존하면 깨질 수 있다).
   폰 375 를 기본으로 먼저 만들고, 768px 이상에서만 가운데 정렬 폭을 넓힌다
   (기존 PC(1280) 화면은 이 페이지와 무관 — 새 페이지라 건드릴 PC 화면 자체가 없다). */
:root{
  color-scheme:dark;
  --bg:#111018; --panel:#1b1924; --line:#353140; --muted:#aba5b9;
  --text:#f3edf7; --gold:#e5c58c; --purple:#bea1ff; --soft:#272132;
  --tbd:#e5c58c;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,'Pretendard','Malgun Gothic',sans-serif;font-size:16px;line-height:1.6}
h1,h2,p{margin-top:0}
a{color:var(--purple)}
button{font:inherit;cursor:pointer;color:inherit;border:0}
button:disabled{cursor:not-allowed;opacity:.6}

.plans-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px;border-bottom:1px solid var(--line);
}
.plans-top .brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:18px}
.plans-top .moon{color:var(--gold);font-size:22px;line-height:1}
.plans-top .back{color:var(--muted);font-size:13px;text-decoration:none;border:1px solid var(--line);border-radius:20px;padding:6px 12px}

#plansApp{max-width:640px;margin:0 auto;padding:16px 16px 40px;overflow-wrap:anywhere}
#plansApp section{margin:0 0 22px;padding:18px;background:var(--panel);border:1px solid var(--line);border-radius:14px}
#plansApp h2{font-size:18px;margin:0 0 10px;letter-spacing:-.3px}
#plansApp p{color:var(--muted);font-size:14px;margin:0 0 10px}
#plansApp ul{margin:0;padding-left:20px}
#plansApp li{font-size:14px;color:var(--text);margin:4px 0}

.plans-table table{width:100%;border-collapse:collapse}
.plans-table th,.plans-table td{text-align:left;padding:9px 6px;font-size:13px;border-bottom:1px solid var(--line)}
.plans-table th{color:var(--muted);font-weight:600}
.plans-table td[data-status="free"]{color:#9be3ab}
.plans-table td[data-status="paid"]{color:var(--gold)}

.plans-card{border-color:#826b9c}
.plans-price{
  font-size:26px;font-weight:800;color:var(--tbd);letter-spacing:-.5px;
  margin-bottom:12px;
}
.plans-card-sub{margin-bottom:6px}
.plans-buy{
  width:100%;min-height:48px;border-radius:10px;background:var(--gold);
  color:#231a14;font-weight:700;font-size:15px;margin-top:14px;
}
.plans-buy:disabled{background:#4a4356;color:#a79cb4}
.plans-soon{margin:8px 0 0;font-size:12px;color:var(--muted);text-align:center}

.plans-footer{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
  background:transparent;border:0;padding:0;text-align:center;
}
.plans-footer a{font-size:13px;text-decoration:underline;text-underline-offset:3px}
.plans-footer-pending{font-size:13px;color:#6b6478;cursor:default}

/* 폰 전용 미세조정 — 767px 이하에서만. 이 페이지는 새 파일이라 맞춰야 할 기존 PC 레이아웃이
   없지만, 규칙을 그대로 지켜 폰 변화는 여기 안에만 둔다. */
@media(max-width:767px){
  .plans-top{padding:14px 16px}
  #plansApp{padding:14px 14px 32px}
  #plansApp section{padding:16px;border-radius:12px}
  .plans-price{font-size:24px}
}

/* 768px 이상 — 새 페이지라 넓은 화면에서 한가운데로 모아 보여주는 정도만 넓힌다. */
@media(min-width:768px){
  #plansApp{max-width:720px;padding:32px 24px 56px}
  #plansApp section{padding:24px}
}