/* BYOP 웹사이트 공통 스타일 — byop_about.html 디자인 계열 (토스 심사 대응 페이지) */
:root{
  --ink:#15181f; --sub:#5b6271; --faint:#9aa1b0;
  --bg1:#e6eaf1; --card:#ffffff;
  --accent:#4b54c6; --accent-d:#363fb0;
  --line:rgba(21,24,31,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Malgun Gothic','Segoe UI',system-ui,sans-serif; color:var(--ink);
  background:radial-gradient(130% 100% at 50% -10%, #f4f6fa 0%, var(--bg1) 75%);
  -webkit-font-smoothing:antialiased; line-height:1.65;
}
.wrap{max-width:880px; margin:0 auto; padding:0 20px}
header.site{padding:18px 0; border-bottom:1px solid var(--line); background:#fff}
header.site .wrap{display:flex; align-items:center; justify-content:space-between}
.logo-txt{font-size:20px; font-weight:800; letter-spacing:.02em;
  background:linear-gradient(90deg,#3a3a93,#3a5fb8 40%,#2f86b3 70%,#28a392);
  -webkit-background-clip:text; background-clip:text; color:transparent}
nav.site a{color:var(--sub); text-decoration:none; font-size:13px; margin-left:18px}
nav.site a:hover{color:var(--accent)}
main{padding:48px 0 64px}
.hero{text-align:center; padding:36px 0 30px}
.hero h1{font-size:34px; letter-spacing:.01em}
.hero .tag{margin-top:10px; color:var(--sub); font-size:16px}
.hero .eyebrow{font-size:12px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--faint); margin-bottom:14px}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px; margin:34px 0}
.card{background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:20px 22px; box-shadow:0 4px 14px rgba(20,24,55,.05)}
.card h3{font-size:15px; margin-bottom:8px}
.card p{font-size:13px; color:var(--sub)}
section{margin:44px 0}
section > h2{font-size:22px; margin-bottom:16px}
.price-box{background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:30px 34px; max-width:460px; margin:0 auto; text-align:center;
  box-shadow:0 8px 24px rgba(20,24,55,.08)}
.price-box .plan{font-size:13px; font-weight:700; letter-spacing:.14em;
  color:var(--accent); text-transform:uppercase}
.price-box .amount{font-size:34px; font-weight:800; margin:10px 0 2px}
.price-box .amount small{font-size:15px; font-weight:400; color:var(--sub)}
.price-box ul{list-style:none; margin:16px 0; text-align:left}
.price-box li{font-size:13.5px; color:var(--sub); padding:5px 0 5px 24px; position:relative}
.price-box li::before{content:'✓'; position:absolute; left:4px; color:var(--accent); font-weight:700}
.price-note{font-size:12px; color:var(--faint); margin-top:12px; line-height:1.7}
.btn{display:inline-block; background:var(--accent); color:#fff; border-radius:10px;
  padding:12px 30px; font-size:15px; font-weight:600; text-decoration:none; margin-top:14px}
.btn:hover{background:var(--accent-d)}
.btn.ghost{background:transparent; color:var(--accent); border:1px solid var(--accent)}
.doc h1{font-size:26px; margin-bottom:6px}
.doc .updated{font-size:12px; color:var(--faint); margin-bottom:26px}
.doc h2{font-size:17px; margin:28px 0 10px}
.doc p, .doc li{font-size:14px; color:#333a45}
.doc ol, .doc ul{padding-left:22px; margin:8px 0}
.doc table{border-collapse:collapse; font-size:13px; margin:10px 0}
.doc th,.doc td{border:1px solid var(--line); padding:6px 12px; text-align:left}
.doc th{background:#f4f6fa}
footer.site{border-top:1px solid var(--line); background:#fff; padding:26px 0 34px}
footer.site .info{font-size:12px; color:var(--faint); line-height:1.9}
footer.site .info b{color:var(--sub); font-weight:600}
footer.site .links{margin-bottom:10px; font-size:12.5px}
footer.site .links a{color:var(--sub); text-decoration:none; margin-right:16px}
footer.site .links a:hover{color:var(--accent)}