/* 知学阁专用布局；宣纸、配色、按钮、卡片、页头页脚沿用 base.css。 */
.learn-page .daily-svg-defs { position:absolute; pointer-events:none }
.learn-page svg { fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round }
.learn-page main { position:relative; isolation:isolate }
.learn-page main::before { content:""; position:absolute; inset:400px 0 150px; z-index:-1; pointer-events:none; background:url('../img/art/daily/landscape-v2.webp') right top / auto 850px repeat-y; opacity:.18; mask-image:linear-gradient(90deg,#000,transparent 27%,transparent 74%,#000),repeating-linear-gradient(to bottom,transparent,#000 140px,#000 690px,transparent 850px); mask-composite:intersect }
.learn-page .sec { padding:28px 0 }
.learn-page .sec-head { margin-bottom:23px }
.learn-page .sec-head h2 { font-size:clamp(28px,3.1vw,40px) }
.learn-page .sec-head h2::before,.learn-page .sec-head h2::after { width:clamp(24px,6vw,84px) }
.learn-page main .card { border-radius:2px; box-shadow:0 3px 14px rgba(70,50,20,.04) }
.learn-hero { position:relative; overflow:hidden; isolation:isolate }
.learn-scene { position:absolute; inset:-12px 0 -36px; z-index:-3; will-change:transform }
.learn-landscape,.learn-water,.learn-water img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:65% center }
.learn-water { filter:url(#lj-water); mask-image:radial-gradient(24% 16% at 55% 76%,#000 30%,transparent); pointer-events:none }
.learn-water img { animation:learn-current 3.6s ease-in-out -.6s infinite alternate; will-change:transform }
@keyframes learn-current { from { transform:translate3d(-6px,-1px,0) scale(1.015) } to { transform:translate3d(6px,2px,0) scale(1.015) } }
.learn-mist { position:absolute; inset:30% -20% 0; z-index:-2; pointer-events:none; background:radial-gradient(ellipse at 30% 50%,rgba(251,247,238,.7),transparent 60%); animation:learn-mist 24s ease-in-out -8s infinite alternate }
@keyframes learn-mist { from { transform:translateX(-4%); opacity:.3 } to { transform:translateX(5%); opacity:.65 } }
.learn-hero__inner { position:relative; padding-top:58px; padding-bottom:60px; min-height:405px }
.learn-hero__inner h1 { font:400 clamp(76px,8vw,108px)/1.12 var(--brush); letter-spacing:.03em }
.learn-slogan { font-size:34px; line-height:1.4; margin:12px 0 8px }
.learn-intro { font-size:20px; letter-spacing:.08em; color:var(--ink-2); margin-bottom:25px }
.learn-nav { border-top:1px solid var(--gold-line); border-bottom:1px solid var(--gold-line); background:rgba(251,247,238,.9) }
.learn-nav .wrap { display:flex; justify-content:center; padding-top:0; padding-bottom:0 }
.learn-nav a { position:relative; text-decoration:none; text-align:center; min-width:160px; padding:13px 28px; font-size:17px; transition:color .2s }
.learn-nav a+a::before { content:""; position:absolute; left:0; top:22px; height:14px; border-left:1px solid var(--gold) }
.learn-nav a:hover,.learn-nav a[aria-current="location"] { color:var(--cinnabar) }
.learn-nav a[aria-current="location"]::after { content:""; position:absolute; bottom:0; left:26%; right:26%; height:2px; background:var(--cinnabar) }
.learning-ways { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px }
.way-card { display:block; isolation:isolate; text-decoration:none; padding:23px 24px 42px; min-height:233px; overflow:hidden; transition:transform .25s,box-shadow .25s }
.way-title { display:flex; gap:16px; align-items:flex-start }
.way-title h3 { font-size:24px }
.way-title p { font-size:17px; margin-top:3px }
.way-title .icon-ink { width:37px; height:37px }
.way-description { font-size:16px; line-height:1.8; margin-top:20px; position:relative; z-index:1 }
.way-arrow { position:absolute; bottom:14px; right:22px; color:var(--gold); font-size:25px; transition:transform .25s }
.way-art { position:absolute; right:0; bottom:0; width:70%; height:75%; z-index:-1; object-fit:cover; object-position:right center; opacity:.35; mask-image:linear-gradient(130deg,transparent 15%,#000) }
.way-art--river { object-position:60% center }
.way-art--books { object-fit:contain; width:62%; right:-15%; opacity:.35 }
.way-note { position:relative; z-index:1; display:flex; align-items:center; gap:7px; padding:4px 8px; margin-top:10px; margin-right:0; font-size:16px; color:var(--gold); background:rgba(239,230,212,.9); border-radius:20px }
.way-note svg { width:18px; height:18px; flex:none }
.experience { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); padding:24px; gap:30px; isolation:isolate; background:rgba(251,247,238,.92) }
.experience-label { position:absolute; top:0; left:-17px; z-index:2; writing-mode:vertical-rl; padding:16px 10px; background:var(--dai-deep); color:var(--paper-card); font-size:21px; letter-spacing:.14em; border-radius:6px 0 6px 0 }
.practice-sheet { padding:20px; border:1px solid var(--gold-soft); background:rgba(251,247,238,.88); border-radius:4px }
.sample-heading { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px }
.sample-heading h3 { font-size:24px }
.sample-tag { font-size:16px; color:var(--gold); border:1px solid var(--gold-line); border-radius:4px; background:var(--paper-2); padding:1px 10px }
.sample-caption { font-size:16px; color:var(--ink-3); margin:6px 0 12px }
.sample-table { width:100%; border-collapse:collapse; table-layout:fixed; text-align:center; font-size:16px; background:rgba(251,247,238,.7) }
.sample-table th,.sample-table td { border:1px solid var(--gold-line); padding:8px 4px; overflow-wrap:anywhere }
.sample-table thead { background:var(--paper-2) }
.sample-table tbody th { font-weight:400 }
.practice-options { border:0; padding:0; margin:18px 0 0; min-width:0 }
.practice-options legend { font-size:18px; font-weight:700; margin-bottom:8px }
.practice-options label { display:flex; align-items:center; gap:10px; min-height:40px; padding:5px 10px; margin-top:6px; border:1px solid transparent; background:var(--paper); border-radius:3px; font-size:16px; cursor:pointer }
.practice-options input { accent-color:var(--cinnabar); width:18px; height:18px; margin:0; flex:none }
.practice-options label:has(input:checked) { border-color:var(--cinnabar); background:var(--paper-2) }
.practice-options label:has(input:focus-visible) { outline:2px solid var(--cinnabar); outline-offset:2px }
.practice-action { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; align-items:center; margin-top:14px }
.practice-action p { font-size:16px; color:var(--ink-3) }
.practice-action .btn { min-height:42px; padding:0 17px; font-size:16px }
.practice-journey { position:relative; padding:16px 22px 20px 12px; overflow:hidden; isolation:isolate }
.practice-journey>h3 { font:400 27px/1.4 var(--brush) }
.practice-journey ol { list-style:none; padding:0; margin:22px 0 0 }
.practice-journey li { display:flex; gap:20px; position:relative; padding-bottom:26px }
.practice-journey li:last-child { padding-bottom:0 }
.practice-journey li:not(:last-child)::before { content:""; position:absolute; top:32px; bottom:0; left:17px; width:1px; background:var(--gold-line) }
.practice-journey li>span { display:grid; place-items:center; flex:none; width:35px; height:35px; border-radius:50%; background:var(--gold); color:var(--paper-card); font-size:21px }
.practice-journey h4 { font-size:19px; margin:0 0 5px }
.practice-journey p { font-size:16px; color:var(--ink-2); max-width:19em }
.practice-journey>img { position:absolute; z-index:-1; inset:0; width:100%; height:100%; object-fit:cover; object-position:right center; opacity:.3; mask-image:linear-gradient(135deg,transparent 10%,#000) }
.growth-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px }
.score-card,.insight-card { padding:24px; min-width:0 }
.score-summary { display:grid; grid-template-columns:repeat(3,1fr); margin:14px 0 10px; padding:14px 0; border:1px solid var(--gold-line); border-radius:3px }
.score-summary>div { display:flex; justify-content:center; align-items:center; gap:12px }
.score-summary>div+div { border-left:1px solid var(--gold-line) }
.score-summary dt { font-size:18px; font-weight:700 }
.score-summary dd { margin:0; font-size:22px }
.insight-card { isolation:isolate; overflow:hidden }
.insight-card blockquote { position:relative; z-index:1; margin:12px 0 16px; min-height:110px; max-width:78%; padding:14px; border:1px solid var(--gold-soft); background:rgba(251,247,238,.9); font-size:17px; color:var(--ink-3); border-radius:3px }
.insight-card blockquote span { display:block; font-size:16px; margin-top:7px }
.insight-action { position:relative; z-index:1 }
.insight-action .btn { font-size:16px; min-height:42px; padding:0 18px }
.insight-action p { font-size:16px; color:var(--ink-3); margin-top:10px; max-width:80% }
.insight-art { position:absolute; z-index:-1; right:-14%; bottom:0; width:62%; opacity:.75; pointer-events:none }
.learn-page .faq-sec { padding-top:10px }
.faq-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:12px 24px }
.faq-item { padding:0 18px; background:rgba(251,247,238,.95) }
.faq-item::before,.faq-item::after { display:none }
.faq-item summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding:14px 24px 14px 0; position:relative; font-size:17px; font-weight:700 }
.faq-item summary::-webkit-details-marker { display:none }
.faq-item summary>span { display:grid; place-items:center; flex:none; width:25px; height:25px; border-radius:50%; background:var(--gold); color:var(--paper-card); font-size:15px }
.faq-item summary::after { content:""; position:absolute; right:1px; top:24px; width:8px; height:8px; border-right:1px solid var(--gold); border-bottom:1px solid var(--gold); transform:rotate(45deg); transition:transform .2s }
.faq-item[open] summary::after { transform:rotate(225deg) }
.faq-item p { padding:0 4px 16px 35px; font-size:16px; color:var(--ink-2) }
.faq-item[open] p { animation:learn-answer-in .3s ease both }
@keyframes learn-answer-in { from { opacity:0; transform:translateY(-4px) } to { opacity:1; transform:translateY(0) } }
.learn-page .learn-end { padding:32px 16px 36px }
.learn-end__art { position:absolute; inset:-35px 0; width:100%; height:calc(100% + 70px); object-fit:cover; object-position:center 73%; z-index:-2; mask-image:linear-gradient(transparent,#000 30%) }
.learn-end::before { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse,rgba(251,247,238,.96),rgba(251,247,238,.6) 44%,transparent 70%) }
.learn-end h2 { font-size:38px }
.learn-end p { color:var(--ink-2); margin-bottom:16px }
@media (hover:hover) and (prefers-reduced-motion:no-preference) { .way-card:hover { transform:translateY(-4px); box-shadow:var(--shadow) } .way-card:hover .way-arrow { transform:translateX(5px) } }
@media (max-width:1100px) and (min-width:768px) {
 .way-card { padding:20px 18px 38px }
 .way-title { gap:10px }
 .way-title h3 { font-size:22px }
 .way-title .icon-ink { width:30px }
 .experience { padding:22px; gap:18px; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) }
 .practice-sheet { padding:16px }
 .practice-journey { padding:16px 6px }
 .score-card,.insight-card { padding:20px }
}
@media (max-width:767px) {
 .learn-hero__inner { min-height:465px; padding-top:188px; padding-bottom:38px }
 .learn-hero__inner::before { content:""; position:absolute; inset:135px -30px 0; z-index:-1; background:radial-gradient(ellipse,rgba(251,247,238,.96),rgba(251,247,238,.75) 45%,transparent 74%) }
 .learn-hero__inner h1 { font-size:74px }
 .learn-slogan { font-size:27px; margin-top:8px }
 .learn-intro { font-size:17px; letter-spacing:0; margin-bottom:20px }
 .learn-landscape,.learn-water img { object-position:73% center }
 .learn-water { mask-image:radial-gradient(40% 13% at 32% 70%,#000 30%,transparent) }
 .learn-nav .wrap { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:0 8px }
 .learn-nav a { min-width:0; padding:13px 3px; font-size:16px }
 .learn-nav a+a::before { top:20px }
 .learn-page .sec { padding:25px 0 }
 .learn-page .sec-head h2 { font-size:27px; gap:8px; letter-spacing:0 }
 .learn-page .sec-head h2::before,.learn-page .sec-head h2::after { width:16px }
 .learn-page .sec-head p { max-width:22em; margin-left:auto; margin-right:auto }
 .learning-ways,.growth-grid,.faq-grid { grid-template-columns:minmax(0,1fr); gap:16px }
 .way-card { min-height:205px; padding:23px 22px 38px }
 .way-note { max-width:18em }
 .way-art { width:55%; opacity:.28 }
 .way-art--books { width:50%; right:-8% }
 .experience { grid-template-columns:minmax(0,1fr); gap:12px; padding:22px 16px 14px }
 .experience-label { position:static; writing-mode:horizontal-tb; padding:8px 12px; width:fit-content; font-size:22px; margin-bottom:2px }
 .practice-sheet { padding:16px 13px }
 .practice-action { gap:10px }
 .practice-action .btn { width:100%; min-height:46px }
 .practice-options label { gap:8px; padding:8px; min-height:44px }
 .practice-journey { padding:16px 12px 20px }
 .practice-journey>img { opacity:.2 }
 .practice-journey li { padding-bottom:23px }
 .score-card,.insight-card { padding:22px 18px }
 .score-summary>div { gap:9px }
 .score-summary dt { font-size:17px }
 .insight-card blockquote { max-width:85%; min-height:135px }
 .insight-action p { max-width:90% }
 .insight-art { opacity:.45; width:68% }
 .faq-item { padding:0 14px }
 .faq-item summary { font-size:16px; align-items:flex-start; line-height:1.7 }
 .faq-item p { padding-left:0 }
 .learn-page .learn-end { padding:30px 16px 36px }
 .learn-end h2 { font-size:32px }
 .learn-end__art { object-position:65% center; opacity:.65 }
 .learn-page .site-footer { padding-bottom:78px }
}
@media (max-width:360px) {
 .learn-slogan { font-size:25px }
 .learn-hero__inner h1 { font-size:68px }
 .learn-page .sec-head h2 { font-size:24px; gap:5px }
 .learn-nav a { font-size:16px; padding-left:0; padding-right:0 }
 .practice-options label { font-size:16px; gap:6px; padding:8px 4px }
 .sample-table th,.sample-table td { padding:8px 2px }
}
html.motion-off .learn-page *,html.no-js .learn-page * { transition:none }
html.motion-off .learn-page .faq-item[open] p { animation:none; opacity:1; transform:none }
html.motion-off .learn-page .way-card:hover { transform:none }
html.no-js .learn-water,html.no-js .learn-page .motion-toggle { display:none }
html.no-js .learn-mist { animation:none }
@media (prefers-reduced-motion:reduce) { .learn-page * { transition:none } .learn-page .faq-item[open] p { animation:none } }