/* about-reference.css — About 페이지: 중앙 정렬 큰 제목 + 둥근 카드가 세로로 쌓이는 구조
   · 카드 목록(<!--ABOUT_CARDS-->)은 서버가 어드민 설정으로 채운다 (.ab-card > h2 + p).
   · 색상은 .ab-page 의 변수로 모으고, 라이트 테마는 html[data-theme="light"] 에서 변수만 바꾼다. */
.ab-page{
  --ab-text:#f4f6f8; --ab-sub:#a9b0c0; --ab-body:#b7bdcc; --ab-accent:#8f9bff; --ab-accent-2:#c58bff;
  --ab-card:linear-gradient(135deg,#171a26 0%,#1d2133 55%,#262a45 100%); --ab-card-line:rgba(255,255,255,.07);
  --ab-glow:rgba(124,92,255,.22); --ab-pill-bg:rgba(255,255,255,.06); --ab-pill-line:rgba(255,255,255,.12);
  --ab-next:linear-gradient(95deg,#5865ff 0%,#8a5cff 55%,#c46bff 100%);
  overflow:hidden;
}
html[data-theme="light"] .ab-page{
  --ab-text:#0f1319; --ab-sub:#5b6372; --ab-body:#434b5a; --ab-accent:#4b57e8; --ab-accent-2:#8a4bdd;
  --ab-card:linear-gradient(135deg,#ffffff 0%,#f6f7ff 60%,#eceeff 100%); --ab-card-line:#e3e7f0;
  --ab-glow:rgba(124,92,255,.14); --ab-pill-bg:#ffffff; --ab-pill-line:#dfe3ee;
}

/* ---- 상단 ---- */
.ab-hero{position:relative;max-width:920px;margin:0 auto;padding:104px 24px 72px;text-align:center}
.ab-hero:before{content:"";position:absolute;left:50%;top:-40px;width:760px;height:360px;transform:translateX(-50%);background:radial-gradient(closest-side,var(--ab-glow),transparent);pointer-events:none;z-index:0}
.ab-hero>*{position:relative;z-index:1}
.ab-badge{display:inline-block;margin-bottom:20px;padding:6px 14px;border:1px solid var(--ab-pill-line);border-radius:999px;background:var(--ab-pill-bg);color:var(--ab-sub);font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase}
.ab-badge:empty{display:none}
.ab-hero h1{margin:0 0 22px;font-size:clamp(38px,6.4vw,72px);line-height:1.12;font-weight:600;letter-spacing:-.035em;color:var(--ab-text)}
.ab-hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--ab-accent),var(--ab-accent-2));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.ab-hero>p{max-width:760px;margin:0 auto;color:var(--ab-sub);font-size:clamp(16px,1.9vw,21px);line-height:1.7}
.ab-hero>p:empty{display:none}
.ab-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:30px}
.ab-pills span{padding:8px 16px;border:1px solid var(--ab-pill-line);border-radius:999px;background:var(--ab-pill-bg);color:var(--ab-body);font-size:13px;font-weight:600}
.ab-pills span:empty{display:none}
.ab-pills:not(:has(span:not(:empty))){display:none}

/* ---- 카드 ---- */
.ab-stack{max-width:1120px;margin:0 auto;padding:0 24px;display:grid;gap:48px}
.ab-card{position:relative;overflow:hidden;padding:92px 56px;border:1px solid var(--ab-card-line);border-radius:24px;background:var(--ab-card);text-align:center}
.ab-card:after{content:"";position:absolute;right:-120px;bottom:-160px;width:520px;height:420px;background:radial-gradient(closest-side,var(--ab-glow),transparent);pointer-events:none}
.ab-card>*{position:relative;z-index:1}
.ab-card h2{margin:0 0 18px;font-size:clamp(28px,4.2vw,48px);line-height:1.18;font-weight:600;letter-spacing:-.025em;color:var(--ab-text)}
.ab-card h2:empty{display:none}
.ab-card p{max-width:800px;margin:0 auto;color:var(--ab-body);font-size:clamp(15px,1.5vw,17px);line-height:1.8;word-break:keep-all;overflow-wrap:anywhere}
.ab-card p:empty{display:none}
.ab-card p b,.ab-card p strong{color:var(--ab-accent);font-weight:700}
.ab-card p a{color:var(--ab-accent);text-decoration:underline;text-underline-offset:3px}
.ab-card:not(:has(h2:not(:empty),p:not(:empty),dl)){display:none}
.ab-operator:has(h2:empty){display:none}
.ab-info{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 40px;max-width:760px;margin:6px auto 26px;text-align:center}
.ab-info div{min-width:0}
.ab-info dt{margin-bottom:4px;color:var(--ab-sub);font-size:12px;font-weight:700;letter-spacing:.04em}
.ab-info dd{margin:0;color:var(--ab-text);font-size:16px;font-weight:600;overflow-wrap:anywhere}
.ab-note{font-size:13px!important;color:var(--ab-sub)!important}

/* 라이트 테마 전역 규칙(h2/p/b 색)보다 우선하도록 특이도를 올린다 */
html[data-theme="light"] .ab-page .ab-hero>p{color:var(--ab-sub)}
html[data-theme="light"] .ab-page .ab-card p{color:var(--ab-body)}
html[data-theme="light"] .ab-page .ab-card p b,html[data-theme="light"] .ab-page .ab-card p strong{color:var(--ab-accent)}
html[data-theme="light"] .ab-page .ab-card p a{color:var(--ab-accent)}
html[data-theme="light"] .ab-page .ab-pills span{color:var(--ab-body)}

/* ---- 하단 안내 (그라데이션 카드) ---- */
.ab-next{max-width:1120px;margin:64px auto 120px;padding:0 24px}
.ab-next-box{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:56px 64px;border-radius:24px;background:var(--ab-next);box-shadow:0 30px 80px -30px rgba(104,92,255,.55)}
.ab-next-copy h2{margin:0 0 10px;font-size:clamp(26px,3.4vw,40px);line-height:1.2;font-weight:600;letter-spacing:-.02em;color:#fff}
.ab-next-copy p{margin:0;color:rgba(255,255,255,.86);font-size:16px}
.ab-next-links{display:flex;flex-wrap:wrap;gap:12px;flex:none}
.ab-next-links a{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;border-radius:999px;background:#fff;color:#2a2f6b;font-size:15px;font-weight:700;transition:transform .2s,box-shadow .2s}
.ab-next-links a:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(20,16,70,.28)}
.ab-next-links a:nth-child(2){background:rgba(255,255,255,.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
html[data-theme="light"] .ab-next-copy h2,html[data-theme="light"] .ab-next-copy p{color:#fff}

@media(max-width:900px){.ab-card{padding:72px 36px}.ab-next-box{flex-direction:column;align-items:flex-start;padding:44px 36px}}
@media(max-width:560px){
  .ab-hero{padding:72px 20px 48px}
  .ab-stack{padding:0 16px;gap:20px}
  .ab-card{padding:48px 22px;border-radius:20px}
  .ab-info{grid-template-columns:1fr;gap:16px}
  .ab-next{padding:0 16px;margin:40px auto 80px}
  .ab-next-box{padding:36px 24px;border-radius:20px}
  .ab-next-links{width:100%}.ab-next-links a{flex:1}
}