/* 안내 문서 공통 스타일 */

:root{
  --ink:#12143a;
  --ink-soft:rgba(18,20,58,.66);
  --accent:#4568dc;
  --accent-2:#b06ab3;
  --ui-font:-apple-system, BlinkMacSystemFont, system-ui, "SF Pro Text", "Pretendard",
            "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}

*{ box-sizing:border-box; }

body{
  margin:0; font-family:var(--ui-font); color:var(--ink); line-height:1.75;
  background:linear-gradient(170deg,#ffe1f2,#e8f1ff 45%,#eaffe8);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}

.wrap{ max-width:720px; margin:0 auto; padding:28px 20px 72px; }

header.top{ display:flex; align-items:center; gap:10px; margin-bottom:22px; }
header.top img{ width:34px; height:34px; }
header.top b{ font-size:17px; font-weight:800; letter-spacing:-.02em; }
header.top a{ margin-left:auto; font-size:13px; font-weight:700; color:var(--accent); text-decoration:none; }

h1{ font-size:30px; letter-spacing:-.03em; margin:0 0 6px; }
.lede{ color:var(--ink-soft); margin:0 0 24px; font-size:16px; }

section{
  background:rgba(255,255,255,.72); border-radius:20px; padding:22px 24px; margin-bottom:16px;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 28px rgba(12,14,45,.07);
}
h2{ font-size:18px; margin:0 0 12px; letter-spacing:-.02em; }
h3{ font-size:15px; margin:18px 0 6px; letter-spacing:-.02em; }

p{ margin:0 0 12px; font-size:14.5px; }
li{ font-size:14.5px; margin-bottom:7px; }
ul{ margin:0 0 12px; padding-left:18px; }
strong, b{ font-weight:800; }
a{ color:var(--accent); }

.price{
  position:relative; overflow:hidden;
  margin:22px 0 16px; padding:26px 26px 22px; border-radius:22px;
  background:linear-gradient(135deg, #b06ab3, #4568dc);
  color:#fff;
}
.price::after{           /* 위쪽에 얇게 도는 빛 */
  content:''; position:absolute; inset:-40% -10% auto -10%; height:120%;
  background:radial-gradient(60% 60% at 30% 0%, rgba(255,255,255,.28), transparent 70%);
  pointer-events:none;
}
.price > *{ position:relative; z-index:1; }
.price-tag{
  display:inline-block; margin-bottom:10px;
  padding:5px 12px; border-radius:99px;
  background:rgba(255,255,255,.22); backdrop-filter:blur(6px);
  font-size:12px; font-weight:800; letter-spacing:.02em;
}
.price .amount{
  font-size:27px; font-weight:900; line-height:1.25; letter-spacing:-.035em;
}
.price .meta{
  margin:8px 0 0; font-size:13.5px; font-weight:600; color:rgba(255,255,255,.86);
}

.faq-list{ padding:10px 6px; }
.faq-list details{
  border-bottom:1px solid rgba(18,20,58,.08);
}
.faq-list details:last-child{ border-bottom:none; }
.faq-list summary{
  list-style:none; cursor:pointer; padding:15px 30px 15px 4px; position:relative;
  font-size:16px; font-weight:800; letter-spacing:-.02em;
}
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary::after{
  content:''; position:absolute; right:8px; top:50%;
  width:9px; height:9px; margin-top:-6px;
  border-right:2px solid rgba(18,20,58,.35); border-bottom:2px solid rgba(18,20,58,.35);
  transform:rotate(45deg); transition: transform .2s ease;
}
.faq-list details[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }
.faq-list details p{ margin:0 4px 16px; color:var(--ink-soft); }

.faq p{ margin:0 0 16px; }
.faq b{ display:block; margin-bottom:2px; }
.quote{ color:var(--ink-soft); }

.todo{ background:rgba(69,104,220,.1); border-radius:10px; padding:2px 7px; font-weight:700; }

.ad{ margin:18px 0; min-height:100px; border-radius:16px; display:grid; place-items:center; overflow:hidden; }
.ad-label{ font-size:11px; color:rgba(18,20,58,.42); text-align:center; margin:0 0 4px; letter-spacing:.02em; }

footer{
  margin-top:26px; font-size:12.5px; color:rgba(18,20,58,.5);
  display:flex; gap:16px; flex-wrap:wrap; justify-content:center;
}
footer a{ color:var(--accent); }

.whisper{
  margin:22px auto 0; max-width:560px;
  font-size:10.5px; line-height:1.65; color:rgba(18,20,58,.26); text-align:center;
}

@media (max-width: 640px){
  h1{ font-size:25px; }
  .lede{ font-size:15px; }
  h2{ font-size:16.5px; }
}