/* CCG 創作法內頁：共用 about.css 的章節節奏（.about-band 等），這裡只放 CCG 專用元件 */


/* 開場宣言 */
.ccg-intro .about-lines { max-width: 820px; }
.ccg-intro .about-manifesto { margin-top: 40px; }

/* 順序不同：一張情境卡＋金線轉折大字，上下順著讀（2026-10-02 由左右對照卡改成） */
.ccg-scenario { max-width: 520px; margin: 26px auto 0; padding: 26px 32px 28px; text-align: center; border: 1px solid rgba(183, 138, 61, .5); background: radial-gradient(circle at 12% 0%, rgba(231, 200, 121, .10), transparent 60%), var(--about-card); }
.about-band .ccg-scenario p { margin: 0 0 10px; font-size: 16px; line-height: 1.85; }
.ccg-ask { text-align: center; }
.about-band .ccg-ask p { margin: 0 auto; }
.about-band .ccg-ask__label { margin-bottom: 6px; color: var(--muted); font-size: 16px; letter-spacing: .06em; }
.about-band .ccg-scenario p { margin: 0; }
.ccg-prompts { margin: 4px 0 18px; padding: 0; list-style: none; }
.ccg-prompts li { color: var(--muted); font-size: 18px; line-height: 1.9; }
.ccg-scenario__flow { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 34px; margin: 14px 0 0; padding: 0; list-style: none; }
.ccg-scenario__flow li { position: relative; padding: 4px 16px; color: var(--ink); font-size: 18px; font-weight: 700; border: 1px solid var(--about-line); border-radius: 999px; background: rgba(255, 252, 247, .9); }
.ccg-scenario__flow li + li::before { content: "→"; position: absolute; left: -27px; top: 50%; transform: translateY(-52%); color: var(--muted); font-weight: 400; }
.about-band .ccg-turn { margin: 48px auto 52px; }

/* 流程圖 */
.ccg-flow { padding-top: 24px; }
.ccg-flow__img { display: block; width: 100%; max-width: 640px; height: auto; margin: 0 auto; border: 1px solid var(--about-line); box-shadow: 0 14px 34px rgba(85, 66, 121, .12); }

/* 三步驟圖文列：標題放在文字欄，同一欄靠左 */
.ccg-row { align-items: center; }
.ccg-row--photo-left { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); max-width: 900px; }
.ccg-row--photo-right { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); max-width: 900px; }
.ccg-row__text { text-align: left; }
.about-page .about-band .ccg-row__text .about-kicker { margin-left: 0; margin-right: 0; }
.about-band .ccg-row__text h2 { margin-bottom: 26px; }
.ccg-stage__kicker { letter-spacing: .12em; }

/* 照片與待補照片 */
.ccg-photo img { display: block; width: 100%; height: auto; border: 1px solid var(--about-line); box-shadow: 0 14px 34px rgba(85, 66, 121, .14); }
.ccg-photo-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 24px; color: var(--muted); text-align: center; border: 1px dashed rgba(183, 138, 61, .7); background: rgba(255, 252, 247, .7); }
.ccg-photo-slot span { color: #9a6f2c; font-size: 16px; font-weight: 700; }
.ccg-photo-slot small { font-size: 13px; line-height: 1.7; word-break: break-all; }

.about-band .ccg-after-quote { margin-top: 28px; }
.about-band .ccg-voice { margin: 8px auto 0; color: #9a6f2c; font-size: 22px; font-weight: 700; }
.about-band .ccg-voice--big { font-size: 28px; }

/* Generate：孩子已經知道 */
.ccg-knows { display: grid; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.ccg-knows li { position: relative; padding: 8px 16px 8px 40px; color: #9a6f2c; font-weight: 700; border-left: 3px solid var(--gold); background: var(--about-card); }
.ccg-knows li::before { content: "✓"; position: absolute; left: 16px; color: var(--gold); }

/* 手繪與 AI 作品對照 */
.ccg-pair { display: flex; justify-content: center; align-items: center; gap: 22px; margin: 48px auto 0; }
.ccg-pair figure { flex: 0 1 380px; margin: 0; }
.ccg-pair img { display: block; width: 100%; height: auto; border: 1px solid var(--about-line); box-shadow: 0 12px 28px rgba(85, 66, 121, .12); }
.ccg-pair figcaption { margin-top: 10px; color: #9a6f2c; font-size: 14px; font-weight: 700; letter-spacing: .08em; }
.ccg-pair__arrow { color: var(--gold); font-size: 30px; }

/* 五種能力卡片：3＋2 置中排列 */
.ccg-skill-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin: 40px auto 48px; text-align: left; }
.ccg-skill-list article { flex: 0 1 300px; padding: 26px 24px; border: 1px solid var(--about-line); border-top: 3px solid var(--gold); background: var(--about-card); }
.about-band .ccg-skill-list h3 { margin: 0 0 8px; color: #9a6f2c; font-size: 22px; }
.about-band .ccg-skill-list p { margin: 0; font-size: 16px; line-height: 1.85; }

/* 完整循環 */
.ccg-cycle { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 8px; margin: 8px auto 34px; padding: 0; list-style: none; }
.ccg-cycle { gap: 10px 34px; }
.ccg-cycle li { position: relative; padding: 6px 20px; color: #9a6f2c; font-size: 18px; font-weight: 700; line-height: 1.7; border: 1px solid rgba(183, 138, 61, .55); border-radius: 999px; background: rgba(255, 252, 247, .9); }
.ccg-cycle li + li::before { content: "→"; position: absolute; left: -27px; top: 50%; transform: translateY(-52%); color: var(--gold); font-weight: 400; }

/* 環境 */
.about-band .ccg-sigh { color: #9a6f2c; font-size: 20px; font-weight: 700; }
.ccg-sometimes { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ccg-sometimes li { position: relative; padding-left: 22px; }
.ccg-sometimes li::before { content: ""; position: absolute; left: 4px; top: .9em; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.about-band .ccg-feel__intro { margin-bottom: 8px; color: var(--muted); font-size: 16px; }
.about-band .ccg-feel__main { margin-bottom: 12px; color: var(--ink); font-size: 24px; font-weight: 700; line-height: 1.6; text-wrap: balance; }
.about-band .ccg-feel p:last-child { margin: 0; }
.ccg-manifesto--end { margin-top: 16px; }
.ccg-manifesto--end strong { margin-top: 0; }

/* 結語 */
.ccg-closing { padding-bottom: 110px; }
.about-band .ccg-closing__text { max-width: 760px; margin: 0 auto 30px; color: var(--ink); font-size: 20px; font-weight: 700; line-height: 1.9; text-wrap: balance; }

@media (max-width: 767px) {
  .ccg-scenario { padding: 26px 22px; }
  .ccg-scenario__flow { gap: 8px 26px; }
  .ccg-scenario__flow li { font-size: 16px; padding: 3px 12px; }
  .ccg-scenario__flow li + li::before { left: -21px; }
  .ccg-row--photo-left, .ccg-row--photo-right { grid-template-columns: 1fr; gap: 26px; }
  .ccg-row .ccg-photo { order: 2; max-width: 320px; margin: 0 auto; }
  .ccg-row__text { order: 1; }
  .about-page .about-band .ccg-row__text .about-kicker, .about-band .ccg-row__text h2 { text-align: center; }
  .about-band .ccg-voice { font-size: 20px; }
  .about-band .ccg-voice--big { font-size: 24px; }
  .ccg-pair { flex-direction: column; gap: 10px; }
  .ccg-pair figure { flex: none; width: 100%; max-width: 340px; }
  .ccg-pair__arrow { font-size: 26px; transform: rotate(90deg); }
  .ccg-skill-list article { flex-basis: 100%; }
  .ccg-cycle { flex-wrap: nowrap; gap: 18px; }
  .ccg-cycle li { padding: 4px 8px; font-size: 14px; }
  .ccg-cycle li + li::before { left: -15px; }
  .about-band .ccg-feel__main { font-size: 20px; }
  .about-band .ccg-closing__text { font-size: 18px; }
  .ccg-closing { padding-bottom: 72px; }
}

.ccg-env .about-quote { margin-bottom: 30px; }

.ccg-br-m { display: none; }
@media (max-width: 767px) { .ccg-br-m { display: inline; } }

/* ── Hero：CCG 三個步驟是主角（2026-10-02）
   圖片依原比例完整顯示，三張牛皮紙標示放在三隻喵精靈上方，選單與主標疊在圖上方的留白 ── */
.ccg-page .ccg-hero { min-height: 0; overflow: visible; }
.ccg-page .ccg-hero::after { content: none; }
.ccg-hero__stage { position: relative; aspect-ratio: 2559 / 1440; }
.ccg-page .ccg-hero .inner-hero__picture { -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 86%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 86%, transparent 100%); }
.ccg-page .ccg-hero .inner-hero__picture img { opacity: 1; object-position: 50% 60%; }
.ccg-page .ccg-hero .inner-hero__content { position: absolute; inset: 0 0 auto; min-height: 0; padding: 4vh 6vw 0; }
.ccg-page .ccg-hero .about-opening { margin-top: clamp(16px, 2.4vw, 40px); }
.ccg-page .ccg-hero .about-kicker { margin-bottom: 10px; }
.ccg-hero__steps { position: absolute; inset: 0; z-index: 3; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.ccg-hero__steps .ccg-tag { width: clamp(140px, 12.5vw, 220px); }
.ccg-hero__steps .ccg-tag b { font-size: clamp(20px, 1.9vw, 32px); }
.ccg-hero__steps .ccg-tag small { font-size: clamp(14px, 1.2vw, 20px); }

@media (max-width: 767px) {
  .ccg-page .ccg-hero { padding-top: 150px; }
  .ccg-hero__stage { aspect-ratio: 1440 / 1920; }
  .ccg-page .ccg-hero .inner-hero__picture { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%); }
  .ccg-page .ccg-hero .inner-hero__content { padding: 24px 5vw 0; }
  .ccg-page .ccg-hero .about-opening { margin-top: 18px; }
  .ccg-page .ccg-hero .about-opening h1 { font-size: 27px; }
  .ccg-hero__steps .ccg-tag { width: 31vw; }
  .ccg-hero__steps .ccg-tag b { font-size: 18px; }
  .ccg-hero__steps .ccg-tag small { font-size: 13px; }
}
.ccg-hero__steps .ccg-tag--clarify { top: 36%; left: 18%; }
.ccg-hero__steps .ccg-tag--create { top: 48%; left: 52%; }
.ccg-hero__steps .ccg-tag--generate { top: 42%; left: 79%; }
@media (max-width: 767px) {
  .ccg-hero__steps .ccg-tag--clarify { top: 49%; left: 20%; }
  .ccg-hero__steps .ccg-tag--create { top: 61%; left: 47%; }
  .ccg-hero__steps .ccg-tag--generate { top: 53%; left: 76%; }
}
/* 平板與小筆電：圖的上方留白不夠放選單＋主標，Hero 先留出選單的高度，主標疊在圖上方的天空 */
@media (min-width: 768px) and (max-width: 1499px) {
  .ccg-page .ccg-hero { padding-top: 110px; }
  .ccg-page .ccg-hero .about-opening { margin-top: 6px; }
  .ccg-page .ccg-hero .inner-hero__picture { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 9%, #000 86%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 9%, #000 86%, transparent 100%); }
  .ccg-page .ccg-hero .about-opening h1 { font-size: clamp(32px, 3.4vw, 44px); }
}

/* 2026-10-02 新版 Hero 與開場文案 */
.ccg-page .ccg-hero .inner-hero__content .about-opening__lead.ccg-hero__lead { margin-top: 14px; color: var(--ink-deep); font-weight: 700; text-shadow: 0 0 10px var(--paper-glow), 0 0 4px var(--paper-glow); }
.about-band .ccg-intro__text { font-size: 20px; line-height: 2; }
.ccg-intro .about-manifesto { margin-top: 28px; }
@media (max-width: 767px) {
  .ccg-page .ccg-hero .inner-hero__content .about-opening__lead.ccg-hero__lead { font-size: 16px; }
  .about-band .ccg-intro__text { font-size: 17px; }
}

/* 2026-10-02：Hero 三張紙條放大約兩成 */
.ccg-hero__steps .ccg-tag { width: clamp(150px, 15vw, 264px); }
.ccg-hero__steps .ccg-tag b { font-size: clamp(24px, 2.3vw, 38px); }
.ccg-hero__steps .ccg-tag small { font-size: clamp(16px, 1.45vw, 24px); }
@media (max-width: 767px) {
  .ccg-hero__steps .ccg-tag { width: 34vw; }
  .ccg-hero__steps .ccg-tag b { font-size: 21px; }
  .ccg-hero__steps .ccg-tag--clarify { top: 42%; left: 20%; }
  .ccg-hero__steps .ccg-tag--create { top: 58%; left: 50%; }
  .ccg-hero__steps .ccg-tag--generate { top: 42%; left: 81%; }
  .ccg-hero__steps .ccg-tag small { font-size: 15px; }
}

.ccg-gold { color: #9a6f2c; }
@media (min-width: 768px) and (max-width: 1023px) {
  .ccg-hero__steps .ccg-tag--clarify { left: 15%; }
}



/* 2026-10-02：Generate 用橫式課堂照片 class11，照片欄加寬 */
.ccg-row--landscape { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); max-width: 980px; }
@media (max-width: 767px) {
  .ccg-row--landscape { grid-template-columns: 1fr; }
  .ccg-row--landscape .ccg-photo { max-width: none; }
}

/* 2026-10-02：手機版 Clarify、Create、Generate 改成「小標 → 標題 → 照片 → 內文」，讓照片跟內文連在一起 */
@media (max-width: 767px) {
  .ccg-stage .ccg-row { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .ccg-stage .ccg-row__text { display: contents; }
  .ccg-stage .ccg-row .about-kicker { order: 1; }
  .ccg-stage .ccg-row h2 { order: 2; margin-bottom: 26px; }
  .ccg-stage .ccg-row .ccg-photo { order: 3; width: 100%; margin: 0 auto 26px; }
  .ccg-stage .ccg-row .about-copy { order: 4; }
}