/* 真實畫面版：真實上課影片、孩子的進步、原話、分校、課後支持、LINE 提示框 */

/* ── 真實上課影片 ── */
.real-section .wrap{max-width:1180px}
.real-section>.wrap>p{margin-bottom:0}
.real-row{display:grid;grid-template-columns:repeat(3,minmax(0,330px));justify-content:center;gap:34px;margin-top:44px;text-align:left}
.real-card{display:flex;flex-direction:column;gap:18px}
.real-video{position:relative;aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:#0B1A2E;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.real-video video{width:100%;height:100%;object-fit:cover;display:block}
.real-tag{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;gap:8px;background:rgba(10,22,40,.78);color:#fff;font-size:15px;font-weight:700;padding:7px 13px;border-radius:999px}
.real-tag::before{content:"";width:9px;height:9px;border-radius:50%;background:#FF4D57;box-shadow:0 0 0 3px rgba(255,77,87,.3)}
.sound-btn{position:absolute;right:14px;bottom:14px;border:0;cursor:pointer;background:#fff;color:#142943;font:inherit;font-size:16px;font-weight:800;padding:10px 18px;border-radius:999px;box-shadow:0 6px 16px rgba(0,0,0,.3)}
.sound-btn::before{content:"🔇 "}
.sound-btn[aria-pressed="true"]{background:#CF2933;color:#fff}
.sound-btn[aria-pressed="true"]::before{content:"🔊 "}
.real-meta b{display:block;color:#A9C9FF;font-size:17px;font-weight:800;margin-bottom:6px}
.real-meta h3{color:#fff;font-size:26px;font-weight:800;line-height:1.45}
.real-meta p{color:#D6E1F0;font-size:18px;font-weight:600;margin-top:8px}

.real-swipe{display:none;color:#A9C9FF;font-size:16px;font-weight:700;margin-top:14px}

/* ── 孩子的進步 ── */
.story-section{background:#fff;padding:84px 0 80px}
.story-compare{display:grid;grid-template-columns:1fr auto 1fr;gap:26px;align-items:stretch;max-width:1120px;margin:0 auto}
.story-card{border-radius:24px;padding:28px;display:flex;flex-direction:column;gap:20px}
.story-card.is-before{background:#FAEEEF}
.story-card.is-after{background:#EDF3FF}
.story-top{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.story-top span{font-size:19px;font-weight:800;color:#142943}
.story-top b{font-size:64px;line-height:1;font-weight:800}
.story-top b small{font-size:24px;margin-left:4px}
.is-before .story-top b{color:#CF2933}
.is-after .story-top b{color:#244FAD}
.story-top em{font-style:normal;font-size:19px;font-weight:700;color:#344860}
.story-card figure{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 6px 18px rgba(20,41,67,.1)}
.story-card figure img{width:100%;display:block}
.story-card figcaption{font-size:17px;font-weight:700;color:#344860;padding:12px 16px}
.story-card blockquote{font-size:24px;font-weight:800;line-height:1.5;color:#142943}
.story-card cite{display:block;font-style:normal;font-size:16px;font-weight:700;color:#4B5A70;margin-top:6px}
.story-arrow{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#CF2933}
.story-arrow span{font-size:18px;font-weight:800;writing-mode:horizontal-tb;white-space:nowrap}
.story-arrow b{font-size:48px;line-height:1}
.story-how{max-width:1120px;margin:30px auto 0;background:#142943;color:#fff;border-radius:20px;padding:24px 30px;display:flex;gap:26px;align-items:center}
.story-how b{flex:none;background:#CF2933;font-size:18px;font-weight:800;padding:8px 16px;border-radius:999px}
.story-how p{font-size:21px;font-weight:700;line-height:1.7}

/* ── 原話 ── */
.voices-section{background:#F5F7FA;padding:84px 0}
.voice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1160px;margin:0 auto}
.voice-card{background:#fff;border-radius:24px;padding:30px 28px;display:flex;flex-direction:column;gap:14px;box-shadow:0 10px 26px rgba(20,41,67,.08)}
.voice-card img{width:88px;height:88px;border-radius:50%;object-fit:cover;border:4px solid #EDF3FF}
.voice-badge{width:88px;height:88px;border-radius:50%;background:#FAEEEF;color:#CF2933;font-size:24px;font-weight:800;display:flex;align-items:center;justify-content:center;border:4px solid #fff;box-shadow:0 0 0 4px #FAEEEF}
.story-top i{flex-basis:100%;font-style:normal;font-size:17px;font-weight:700;color:#4B5A70}
.voice-card blockquote{font-size:27px;font-weight:800;line-height:1.45;color:#CF2933}
.voice-q{font-size:18px;font-weight:700;color:#142943}
.voice-more{font-size:17px;font-weight:600;line-height:1.8;color:#4B5A70}
.voice-card figcaption{margin-top:auto;padding-top:12px;border-top:1px solid #D7DFE9;font-size:16px;font-weight:800;color:#244FAD}

/* ── 28 家實體分校 ── */
#brand{background:#F5F7FA}
#brand .campus-wall figure,#brand .brand-stats div{background:#fff}
.brand-head{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end;margin-bottom:36px}
.brand-head .brand-stats{margin:0}
.campus-wall{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.campus-wall figure{background:#F5F7FA;border-radius:16px;overflow:hidden}
.campus-wall img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.campus-wall figcaption{padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.campus-wall figcaption b{font-size:18px;font-weight:800;color:#142943}
.campus-wall figcaption span{font-size:15px;font-weight:700;color:#4B5A70}
.campus-note{margin-top:18px;font-size:16px;font-weight:700;color:#4B5A70;text-align:center}
.brand-stats{display:flex;flex-wrap:wrap;gap:14px;margin:26px 0 22px}
.brand-stats div{background:#F5F7FA;border-radius:16px;padding:14px 20px;display:flex;flex-direction:column;gap:4px}
.brand-stats b{font-size:34px;font-weight:800;line-height:1.15;color:#CF2933}
.brand-stats b small{font-size:18px;margin-left:3px}
.brand-stats div:last-child b{font-size:22px;color:#142943;line-height:1.6}
.brand-stats span{font-size:16px;font-weight:700;color:#4B5A70}
.brand-links{display:flex;flex-wrap:wrap;gap:12px 24px}

/* ── 課後支持 ── */
.support-section{padding:80px 0;background:#fff}
.support-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1120px;margin:0 auto}
.support-grid article{border:2px solid #D7DFE9;border-radius:22px;padding:28px}
.support-num{display:inline-block;color:#CF2933;font-size:18px;font-weight:800;margin-bottom:12px}
.support-grid h3{font-size:28px;line-height:1.4;font-weight:800;color:#142943}
.support-grid p{font-size:18px;line-height:1.8;color:#344860;margin-top:12px}

/* ── LINE 提示框 ── */
.line-dialog{border:0;border-radius:24px;padding:34px 30px 28px;max-width:360px;width:calc(100% - 32px);text-align:center;color:#142943}
.line-dialog::backdrop{background:rgba(10,22,40,.55)}
.line-dialog>b{display:block;font-size:22px;font-weight:800}
.line-dialog img{width:220px;height:220px;margin:18px auto 10px;display:block;image-rendering:pixelated}
.line-dialog p{font-size:18px;font-weight:700;line-height:1.7}
.line-dialog strong{font-size:28px;letter-spacing:.02em;color:#06C755}
.line-copied{display:block;font-size:16px;font-weight:700;color:#06C755;margin-top:6px}
.line-retry{margin-top:16px;min-width:0;width:100%}
.line-close{position:absolute;right:14px;top:12px;border:0;background:#F5F7FA;border-radius:50%;width:38px;height:38px;font-size:18px;cursor:pointer;color:#142943}

/* ── 平板 ── */
@media(max-width:960px){
 .real-row{gap:18px}
 .real-meta h3{font-size:22px}
 .story-compare{grid-template-columns:1fr;gap:14px}
 .story-arrow{flex-direction:row}
 .story-arrow b{transform:rotate(90deg);font-size:40px}
 .voice-grid,.support-grid{grid-template-columns:1fr;max-width:620px}
 .brand-head{grid-template-columns:1fr;gap:22px}
 .campus-wall{grid-template-columns:repeat(2,1fr)}
}
/* ── 手機 ── */
@media(max-width:700px){
 .real-row{display:flex;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:20px;gap:14px;margin:30px -20px 0;padding:0 20px 8px;scrollbar-width:none}
 .real-swipe{display:block}
 .real-row::-webkit-scrollbar{display:none}
 .real-card{flex:0 0 76%;scroll-snap-align:start}
 .real-meta h3{font-size:21px}
 .real-meta p{font-size:17px}
 .story-section,.voices-section,.support-section{padding:56px 0}
 .story-card{padding:20px}
 .story-top b{font-size:52px}
 .story-card blockquote{font-size:21px}
 .story-how{flex-direction:column;align-items:flex-start;gap:14px;padding:22px}
 .story-how p{font-size:18px}
 .voice-card{padding:24px 22px}
 .voice-badge{width:88px;height:88px;border-radius:50%;background:#FAEEEF;color:#CF2933;font-size:24px;font-weight:800;display:flex;align-items:center;justify-content:center;border:4px solid #fff;box-shadow:0 0 0 4px #FAEEEF}
.story-top i{flex-basis:100%;font-style:normal;font-size:17px;font-weight:700;color:#4B5A70}
.voice-card blockquote{font-size:24px}
 .support-grid h3{font-size:24px}
 .support-grid p{font-size:17px}
 .brand-stats b{font-size:30px}
 .campus-wall{grid-template-columns:repeat(2,1fr);gap:12px}
 .campus-wall figcaption b{font-size:16px}
 .campus-wall figcaption span{font-size:15px}
}