/* ══════════════════════════════════════════════════════════════
   [2026-07-18] SEO 랜딩 공유 스타일 — learn_*.html 콘텐츠 페이지 공용.
   v2_theme.css 변수(--v2-*) 위에서 동작. 페이지가 --lp-accent / --lp-accent-soft 를
   지정해 색 채널 변경(기본=그린). learn_hyperliquid_bot.html 인라인 스타일을 표준화.
   ══════════════════════════════════════════════════════════════ */
:root { --lp-accent: var(--v2-primary-glow); --lp-accent-soft: rgba(16,185,129,0.4); --lp-accent-dim: rgba(16,185,129,0.12); }

.lp { background: var(--v2-bg); color: var(--v2-text); min-height: calc(100vh - 60px);
    padding: 56px 16px 90px; font-family: 'Pretendard','Inter',-apple-system,sans-serif; }
.lp-inner { max-width: 860px; margin: 0 auto; }

.lp-hero { text-align: center; padding: 12px 8px 34px; }
.lp-hero .pill { display:inline-block; padding:6px 14px; background:var(--lp-accent-dim);
    border:1px solid var(--lp-accent-soft); border-radius:999px; color:var(--lp-accent);
    font-size:0.76rem; font-weight:700; letter-spacing:0.08em; margin-bottom:18px; }
.lp-hero h1 { font-size:clamp(2rem,5.4vw,3rem); font-weight:800; margin:0 0 16px;
    letter-spacing:-0.03em; line-height:1.18; }
.lp-hero h1 .ac { color:var(--lp-accent); }
.lp-hero .lead { color:var(--v2-text-muted); font-size:1.08rem; line-height:1.72;
    max-width:640px; margin:0 auto 26px; }
.lp-cta { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.lp-cta a { display:inline-flex; align-items:center; gap:8px; padding:14px 26px; border-radius:12px;
    font-weight:800; font-size:1rem; text-decoration:none; transition:transform .15s,box-shadow .2s; }
.lp-cta .primary { background:linear-gradient(135deg,var(--v2-primary),var(--lp-accent));
    color:var(--v2-text-inverse); box-shadow:0 4px 20px var(--lp-accent-dim); }
.lp-cta .primary:hover { transform:translateY(-2px); }
.lp-cta .secondary { background:transparent; border:1px solid var(--v2-border); color:var(--v2-text); }
.lp-cta .secondary:hover { border-color:var(--lp-accent); color:var(--lp-accent); }
.lp-micro { margin-top:16px; color:var(--v2-text-subtle); font-size:0.82rem; letter-spacing:0.02em; }

.lp h2 { font-size:1.62rem; font-weight:800; margin:60px 0 10px; letter-spacing:-0.02em; scroll-margin-top:80px; }
.lp h2 + .sub { color:var(--v2-text-muted); font-size:0.98rem; margin:0 0 22px; line-height:1.7; }
.lp p.body { color:var(--v2-text-muted); font-size:1rem; line-height:1.8; margin:0 0 16px; }
.lp p.body strong { color:var(--v2-text); font-weight:700; }
.lp .inl-a, .lp p.body a { color:var(--lp-accent); text-decoration:none; border-bottom:1px dashed var(--lp-accent-soft); }

/* step */
.lp .step { display:grid; grid-template-columns:56px 1fr; gap:18px; padding:22px; background:var(--v2-surface);
    border:1px solid var(--v2-border); border-radius:16px; margin-bottom:12px; align-items:start; }
.lp .step .num { width:52px; height:52px; border-radius:14px;
    background:linear-gradient(135deg,var(--v2-primary),var(--lp-accent)); color:var(--v2-text-inverse);
    display:flex; align-items:center; justify-content:center; font-size:1.4rem; font-weight:800; }
.lp .step h3 { font-size:1.14rem; font-weight:800; margin:2px 0 8px; }
.lp .step .stx { color:var(--v2-text-muted); font-size:0.95rem; line-height:1.75; }
.lp .step .stx strong { color:var(--v2-text); }
.lp .step .stx code { font-family:'JetBrains Mono',monospace; background:var(--v2-bg);
    border:1px solid var(--v2-border); color:var(--lp-accent); padding:2px 7px; border-radius:4px; font-size:0.84rem; }

/* note box */
.lp .note-box { margin:18px 0; padding:14px 18px; border-radius:10px; font-size:0.92rem; line-height:1.72; }
.lp .note-box .nb-title { font-weight:800; margin-bottom:6px; display:flex; gap:6px; align-items:center; }
.lp .note-box.info { background:rgba(96,165,250,0.06); border:1px solid rgba(96,165,250,0.3); }
.lp .note-box.info .nb-title { color:#60a5fa; }
.lp .note-box.tip { background:var(--lp-accent-dim); border:1px solid var(--lp-accent-soft); }
.lp .note-box.tip .nb-title { color:var(--lp-accent); }
.lp .note-box.warn { background:rgba(245,158,11,0.07); border:1px solid rgba(245,158,11,0.32); }
.lp .note-box.warn .nb-title { color:#f59e0b; }
.lp .note-box strong { color:var(--v2-text); }

/* table */
.lp .tbl-wrap { overflow-x:auto; }
.lp table.lp-tbl { width:100%; border-collapse:collapse; margin:14px 0; font-size:0.92rem;
    background:var(--v2-surface); border:1px solid var(--v2-border); border-radius:12px; overflow:hidden; }
.lp .lp-tbl th, .lp .lp-tbl td { padding:11px 16px; text-align:left; border-bottom:1px solid var(--v2-border); vertical-align:top; }
.lp .lp-tbl th { background:rgba(255,255,255,0.03); color:var(--v2-text); font-weight:700; font-size:0.82rem; }
.lp .lp-tbl td { color:var(--v2-text-muted); line-height:1.6; }
.lp .lp-tbl tr:last-child td { border-bottom:none; }
.lp .lp-tbl .yes { color:var(--v2-primary-glow); font-weight:700; }
.lp .lp-tbl .no { color:var(--v2-short, #f87171); font-weight:700; }
.lp .lp-tbl .hl { color:var(--lp-accent); font-weight:700; }

/* cards row */
.lp .ways { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:8px 0; }
@media (max-width:680px){ .lp .ways { grid-template-columns:1fr; } }
.lp .way { background:var(--v2-surface); border:1px solid var(--v2-border); border-radius:16px;
    padding:22px 20px; transition:border-color .2s,transform .15s; }
.lp .way:hover { border-color:var(--lp-accent-soft); transform:translateY(-2px); }
.lp .way .ic { font-size:1.6rem; margin-bottom:10px; }
.lp .way h3 { font-size:1.06rem; font-weight:800; margin:0 0 8px; }
.lp .way p { color:var(--v2-text-muted); font-size:0.9rem; line-height:1.65; margin:0 0 12px; }
.lp .way a { color:var(--lp-accent); text-decoration:none; font-weight:700; font-size:0.86rem; }

/* FAQ */
.lp .faq { background:var(--v2-surface); border:1px solid var(--v2-border); border-radius:12px; margin-bottom:10px; overflow:hidden; }
.lp .faq summary { cursor:pointer; padding:18px 22px; color:var(--v2-text); font-weight:700; font-size:1rem;
    list-style:none; display:flex; align-items:center; gap:12px; }
.lp .faq summary::-webkit-details-marker { display:none; }
.lp .faq summary::before { content:'Q'; flex-shrink:0; width:28px; height:28px; border-radius:50%;
    background:var(--lp-accent-dim); color:var(--lp-accent); display:inline-flex;
    align-items:center; justify-content:center; font-weight:800; font-size:0.85rem; }
.lp .faq summary::after { content:'+'; margin-left:auto; color:var(--v2-text-muted); font-size:1.4rem; font-weight:300; }
.lp .faq[open] summary::after { content:'−'; }
.lp .faq .answer { padding:0 22px 22px 62px; color:var(--v2-text-muted); line-height:1.75; font-size:0.95rem; }
.lp .faq .answer strong { color:var(--v2-text); }

/* foot cta + xref */
.lp .lp-foot-cta { text-align:center; margin:52px 0 10px; padding:36px 20px; background:var(--v2-surface);
    border:1px solid var(--v2-border); border-radius:18px; }
.lp .lp-foot-cta h2 { margin:0 0 10px; }
.lp .lp-foot-cta p { color:var(--v2-text-muted); margin:0 0 22px; }
.lp .xref { text-align:center; color:var(--v2-text-subtle); font-size:0.9rem; margin-top:30px; }
.lp .xref a { color:var(--v2-text-muted); text-decoration:none; margin:0 8px; border-bottom:1px dashed var(--v2-border); }
.lp .xref a:hover { color:var(--lp-accent); }