/* =====================================================================
   Laxdx 仮想通貨ガイド (/market/learn/) — home.css のデザイントークンを継承
   <main class="lax2026 learn"> でラップして使用。home.css を先に読み込むこと。
   ===================================================================== */

.lax2026.learn {
    max-width: 940px;
    margin: 0 auto;
    padding: 22px 16px 56px;
}

/* ---------- HERO ---------- */
.learn-hero {
    position: relative;
    text-align: center;
    padding: clamp(2rem, 6vw, 3.2rem) 1.2rem;
    border-radius: var(--r-lg);
    background: #0c0c18;
    border: 1px solid var(--line-2);
    overflow: hidden;
    isolation: isolate;
    margin-bottom: 1.4rem;
}
.learn-hero::before {
    content: '';
    position: absolute;
    inset: -30%;
    z-index: -1;
    background:
        radial-gradient(38% 50% at 25% 25%, rgba(139, 92, 246, .42), transparent 60%),
        radial-gradient(40% 52% at 78% 70%, rgba(245, 166, 35, .34), transparent 62%);
    filter: blur(20px);
    animation: lax-aurora 20s ease-in-out infinite alternate;
}
.learn-hero h1 {
    font-size: clamp(1.5rem, 5vw, 2.2rem);
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: -.02em;
    margin: 0 0 .6rem;
}
.learn-hero p {
    color: #e6e9f2;
    font-size: clamp(.9rem, 2.5vw, 1.02rem);
    line-height: 1.8;
    max-width: 620px;
    margin: 0 auto;
}
.learn-hero .learn-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 1.1rem;
    padding: 9px 18px;
    border-radius: 999px;
    font-weight: 800;
    font-size: .92rem;
    color: #11030a;
    background: var(--g3);
}
.learn-hero .learn-hint .ico { font-size: 1.1rem; }

/* ---------- QUICK NAV (jump chips) ---------- */
.learn-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 2rem;
}
.learn-nav a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 15px;
    border-radius: 999px;
    font-size: .84rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--tx);
    background: var(--surface);
    border: 1px solid var(--line);
    transition: background .2s, border-color .2s, transform .2s;
}
.learn-nav a:hover { background: var(--surface-2); border-color: var(--line-2); transform: translateY(-2px); }
.learn-nav a .ico { color: var(--g2); }

/* ---------- 全体像 3ステップ ---------- */
.learn-flow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 2.6rem;
}
.learn-flow-step {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 1.4rem 1.1rem;
    text-align: center;
}
.learn-flow-step .n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    font-weight: 900;
    font-size: .9rem;
    color: #fff;
    background: var(--grad);
    margin-bottom: .7rem;
}
.learn-flow-step .ico { font-size: 1.9rem; color: #fff; display: block; margin: 0 auto .5rem; }
.learn-flow-step h3 { font-size: 1rem; font-weight: 800; margin: 0 0 .3rem; }
.learn-flow-step p { color: var(--tx-mut); font-size: .82rem; line-height: 1.6; margin: 0; }
.learn-flow-step::after {
    content: '→';
    position: absolute;
    right: -11px; top: 50%;
    transform: translateY(-50%);
    color: var(--g2);
    font-weight: 900;
    font-size: 1.2rem;
    z-index: 1;
}
.learn-flow-step:last-child::after { display: none; }

/* ---------- SECTION ---------- */
.learn-sec {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: clamp(1.3rem, 4vw, 2rem);
    margin-bottom: 1.6rem;
    scroll-margin-top: 80px;
}
.learn-sec-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 1.3rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--line);
}
.learn-sec-head .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    flex-shrink: 0;
    border-radius: 13px;
    font-size: 1.4rem;
    color: #fff;
    background: var(--grad);
    box-shadow: 0 6px 18px rgba(139, 92, 246, .3);
}
.learn-sec-head h2 { font-size: clamp(1.15rem, 3.6vw, 1.5rem); font-weight: 900; margin: 0; }
.learn-sec-head .sub { display: block; color: var(--tx-mut); font-size: .8rem; font-weight: 600; margin-top: 2px; }

.learn-sec p { color: var(--tx-mut); line-height: 1.85; }
.learn-sec a:not(.learn-cta-btn):not(.learn-pick-jump) { color: #7cc0ff; }

/* ---------- ガスレス explainer ---------- */
.learn-gasless {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 22px;
    align-items: center;
}
.learn-gasless img { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.learn-gasless .steps { display: flex; flex-direction: column; gap: 10px; margin-top: 1rem; }
.learn-gasless .gs {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 13px;
    border-radius: 12px;
    background: rgba(0, 0, 0, .22);
    border: 1px solid var(--line);
}
.learn-gasless .gs .n {
    flex-shrink: 0;
    width: 26px; height: 26px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: .8rem; color: #fff;
    background: var(--grad);
}
.learn-gasless .gs span:last-child { color: var(--tx); font-size: .88rem; font-weight: 600; }

/* ---------- 通貨の選び方 (pick) ---------- */
.learn-pick {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 13px;
}
.learn-pick-card {
    position: relative;
    background: rgba(0, 0, 0, .22);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 1.4rem 1.1rem 1.1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
}
.learn-pick-card.is-reco { border-color: rgba(245, 166, 35, .55); background: linear-gradient(180deg, rgba(245, 166, 35, .12), rgba(0, 0, 0, .25)); }
.learn-pick-card .reco {
    position: absolute;
    top: -11px; left: 50%;
    transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: .7rem; font-weight: 900;
    color: #11030a;
    background: var(--g3);
    white-space: nowrap;
}
.learn-pick-card .sym {
    width: 50px; height: 50px;
    margin: 0 auto .6rem;
    border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.5rem; color: #fff;
    background: var(--grad);
}
.learn-pick-card h3 { font-size: 1.1rem; font-weight: 900; margin: 0 0 .2rem; }
.learn-pick-card .tag { font-size: .76rem; font-weight: 700; color: var(--g3); margin: 0 0 .6rem; }
.learn-pick-card p { color: var(--tx-mut); font-size: .82rem; line-height: 1.6; margin: 0 0 1rem; flex: 1; }
.learn-pick-jump {
    display: inline-flex; align-items: center; gap: 5px;
    align-self: center;
    padding: 7px 16px;
    border-radius: 999px;
    font-size: .8rem; font-weight: 800;
    text-decoration: none; color: var(--tx);
    background: var(--surface-2);
    border: 1px solid var(--line-2);
    transition: background .2s;
}
.learn-pick-jump:hover { background: rgba(255, 255, 255, .14); }
.learn-pick-jump .ico { color: var(--g2); }

/* ---------- how-to カード（画像＋番号手順） ---------- */
.learn-howto {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 20px;
    align-items: start;
    background: rgba(0, 0, 0, .2);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 1.3rem;
    margin-bottom: 1.1rem;
}
.learn-howto img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
.learn-howto h3 { font-size: 1.1rem; font-weight: 800; margin: 0 0 .25rem; }
.learn-howto .who { color: #9ecbff; font-size: .82rem; font-weight: 600; margin: 0 0 .9rem; }
.learn-steps {
    list-style: none;
    counter-reset: ls;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.learn-steps li {
    counter-increment: ls;
    position: relative;
    padding: 9px 12px 9px 42px;
    border-radius: 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--tx);
    font-size: .86rem;
    line-height: 1.6;
}
.learn-steps li::before {
    content: counter(ls);
    position: absolute;
    left: 10px; top: 9px;
    width: 22px; height: 22px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: .76rem; color: #fff;
    background: var(--grad);
}
.learn-prosbar { display: flex; flex-wrap: wrap; gap: 8px; }
.learn-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: .76rem; font-weight: 700;
}
.learn-chip.pro { color: #5bf0a6; background: rgba(91, 240, 166, .1); border: 1px solid rgba(91, 240, 166, .25); }
.learn-chip.con { color: #ff9aa8; background: rgba(255, 122, 138, .08); border: 1px solid rgba(255, 122, 138, .22); }
.learn-chip .ico { width: .9em; height: .9em; }

/* ---------- pros / cons ---------- */
.learn-pc { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.learn-pc-col { background: rgba(0, 0, 0, .2); border: 1px solid var(--line); border-radius: var(--r); padding: 1.2rem; }
.learn-pc-col h4 { display: flex; align-items: center; gap: 7px; font-size: .95rem; font-weight: 800; margin: 0 0 .7rem; }
.learn-pc-col.pro h4 { color: #5bf0a6; }
.learn-pc-col.con h4 { color: #ff9aa8; }
.learn-pc-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.learn-pc-col li { display: flex; gap: 8px; color: var(--tx-mut); font-size: .85rem; line-height: 1.6; }
.learn-pc-col li .ico { flex-shrink: 0; margin-top: .2em; }
.learn-pc-col.pro li .ico { color: #5bf0a6; }
.learn-pc-col.con li .ico { color: #ff9aa8; }

/* ---------- note callout ---------- */
.learn-note {
    display: flex;
    gap: 11px;
    padding: 14px 16px;
    border-radius: var(--r);
    background: rgba(245, 166, 35, .1);
    border: 1px solid rgba(245, 166, 35, .32);
    color: #ffe7bf;
    font-size: .88rem;
    line-height: 1.75;
}
.learn-note .ico { color: var(--g3); flex-shrink: 0; font-size: 1.2rem; }
.learn-note strong { color: #ffd27a; }

/* ---------- closing CTA ---------- */
.learn-cta {
    text-align: center;
    padding: clamp(2rem, 6vw, 3rem) 1.4rem;
    border-radius: var(--r-lg);
    background: #0c0c18;
    border: 1px solid var(--line-2);
    overflow: hidden;
    isolation: isolate;
    position: relative;
    margin-top: 2rem;
}
.learn-cta::before {
    content: '';
    position: absolute; inset: -30%; z-index: -1;
    background:
        radial-gradient(40% 55% at 25% 30%, rgba(139, 92, 246, .45), transparent 60%),
        radial-gradient(42% 55% at 80% 70%, rgba(245, 166, 35, .38), transparent 62%);
    filter: blur(20px);
    animation: lax-aurora 22s ease-in-out infinite alternate;
}
.learn-cta h2 { font-size: clamp(1.4rem, 4.5vw, 2rem); font-weight: 900; margin: 0 0 .5rem; }
.learn-cta p { color: #e6e9f2; line-height: 1.8; margin: 0 0 1.4rem; }
.learn-cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.learn-cta-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 28px;
    border-radius: 999px;
    font-size: 1rem; font-weight: 800;
    text-decoration: none; cursor: pointer; border: none;
    font-family: inherit;
}
.learn-cta-btn.primary { color: #11030a; background: var(--grad); box-shadow: 0 10px 30px rgba(236, 72, 153, .4); }
.learn-cta-btn.ghost { color: #fff; background: rgba(255, 255, 255, .06); border: 1px solid var(--line-2); }
.learn-cta-btn:hover { transform: translateY(-2px); }
.learn-cta-btn .ico { width: 20px; height: 20px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 760px) {
    .learn-flow { grid-template-columns: 1fr; }
    .learn-flow-step::after { content: '↓'; right: 50%; top: auto; bottom: -13px; transform: translateX(50%); }
    .learn-gasless { grid-template-columns: 1fr; }
    .learn-gasless img { max-width: 220px; margin: 0 auto; }
    .learn-pick { grid-template-columns: 1fr; }
    .learn-pick-card.is-reco { order: -1; }
    .learn-howto { grid-template-columns: 1fr; }
    .learn-howto img { max-width: 320px; margin: 0 auto; }
    .learn-pc { grid-template-columns: 1fr; }
}