/* ============================================================
   app-landing.css
   Landing (hp/app.html) + 3 詳細ページ Hero
   (creation-mode / learning-mode / genie) の共通 CSS
   彩 handoff v2 (2026-07-07) §12.4 準拠 + 綾 handoff §9 準拠
   ============================================================ */

/* ===== §9: 3 バナー Landing ===== */

.app-landing-banners {
    background: var(--hp-dark-bg, #050010);
    padding: clamp(3rem, 8vh, 6rem) 5vw clamp(4rem, 10vh, 8rem);
    position: relative;
}

.app-landing-banners__lede {
    max-width: 720px;
    margin: 0 auto clamp(3rem, 6vh, 5rem);
    text-align: center;
}

.app-landing-banners__lede .editorial-body {
    font-family: var(--font-heading, 'Zen Old Mincho'), serif;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.82);
    letter-spacing: 0.05em;
}

.app-landing-banners__list {
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 5vh, 3.5rem);
    max-width: 960px;
    margin: 0 auto;
}

.app-landing-banner {
    display: grid;
    grid-template-columns: minmax(200px, 40%) 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: center;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 700ms ease-out,
        transform 700ms ease-out,
        background 250ms ease-out,
        border-color 250ms ease-out,
        box-shadow 250ms ease-out;
}

.app-landing-banner.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.app-landing-banner--night { border-top: 2px solid rgba(255, 176, 32, 0.45); }
.app-landing-banner--dawn  { border-top: 2px solid rgba(196, 160, 74, 0.55); }
.app-landing-banner--wind  { border-top: 2px solid rgba(15, 118, 110, 0.55); }

.app-landing-banner--night .app-landing-banner__sub { color: #FFB020; }
.app-landing-banner--dawn  .app-landing-banner__sub { color: #c4a04a; }
.app-landing-banner--wind  .app-landing-banner__sub { color: var(--hp-genie-accent, #0F766E); }

.app-landing-banner:hover,
.app-landing-banner:focus-visible {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    transform: translateY(-2px);
}

.app-landing-banner--night:hover,
.app-landing-banner--night:focus-visible { border-top-color: rgba(255, 176, 32, 0.7); }
.app-landing-banner--dawn:hover,
.app-landing-banner--dawn:focus-visible  { border-top-color: rgba(196, 160, 74, 0.75); }
.app-landing-banner--wind:hover,
.app-landing-banner--wind:focus-visible  { border-top-color: rgba(15, 118, 110, 0.75); }

.app-landing-banner:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.4);
    outline-offset: 3px;
}

.app-landing-banner__figure {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.app-landing-banner__figure img {
    width: 100%;
    max-width: 280px;
    height: auto;
    display: block;
}

.app-landing-banner__caption {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.app-landing-banner__sub {
    font-family: var(--font-body, 'Noto Sans JP'), sans-serif;
    font-size: clamp(0.85rem, 1.1vw, 0.95rem);
    letter-spacing: 0.16em;
    line-height: 1.5;
}
.app-landing-banner__title {
    font-family: var(--font-heading, 'Zen Old Mincho'), serif;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 900;
    letter-spacing: 0.05em;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
}
.app-landing-banner__cta {
    font-family: var(--font-body, 'Noto Sans JP'), sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.72);
    margin-top: 0.5rem;
    transition: color 200ms ease-out;
}
.app-landing-banner:hover .app-landing-banner__cta,
.app-landing-banner:focus-visible .app-landing-banner__cta {
    color: rgba(255, 255, 255, 0.95);
}

@media (max-width: 768px) {
    .app-landing-banner {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: clamp(1.5rem, 5vw, 2rem);
        text-align: center;
    }
    .app-landing-banner__figure img {
        max-width: 200px;
    }
    .app-landing-banner__caption {
        align-items: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-landing-banner {
        transition-duration: 0.01ms;
        transform: none;
    }
    .app-landing-banner.is-visible {
        transform: none;
    }
    .app-landing-banner:hover,
    .app-landing-banner:focus-visible {
        transform: none;
    }
}

/* ============================================================
   §sr-only: 視覚的に隠しつつスクリーンリーダー・SEO には届ける utility
   (2026-07-08 将平氏 FB — Hero をバナー一枚に純化する際の semantic h1 用)
   ============================================================ */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   §6: 3 詳細ページ Hero 共通 (creation-mode / learning-mode / genie)
   ============================================================ */

.app-hero {
    padding: clamp(5rem, 12vh, 8rem) 5vw clamp(3rem, 8vh, 6rem);
    position: relative;
}

/* --- 純化バナー Hero (2026-07-08 将平氏 FB) ---
   バナー画像自体が「サブ + ブランド名 + prose」の完成形なので、
   HTML 側のテキスト重複を排除し、バナー画像を Hero の主役に。 */
.app-hero__banner {
    display: block;
    width: 100%;
    max-width: 1080px;
    height: auto;
    margin: 0 auto;
    border-radius: 12px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 700ms ease-out, transform 700ms ease-out;
}
.app-hero__banner.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .app-hero__banner {
        transition-duration: 0.01ms;
        transform: none;
    }
    .app-hero__banner.is-visible {
        transform: none;
    }
}

.app-hero__project-badge {
    display: block;
    margin: 0 auto 3rem;
    max-width: max-content;
    font-family: var(--font-body, 'Noto Sans JP'), sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    padding: 0.35rem 0.9rem;
    border-radius: 3px;
    text-align: center;
}

.app-hero__layout {
    display: grid;
    grid-template-columns: minmax(280px, 40%) 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
    max-width: 1080px;
    margin: 0 auto;
}

.app-hero__figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 700ms ease-out, transform 700ms ease-out;
    transition-delay: 0ms;
}
.app-hero__figure.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.app-hero__icon {
    width: 100%;
    max-width: 440px;             /* 新バナー (icon + サブ + ブランド名) の baked text が読める最小幅 */
    height: auto;
    display: block;
    border-radius: 12px;
}

.app-hero__caption {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: center;
    text-align: center;
}
.app-hero__sub {
    font-family: var(--font-body, 'Noto Sans JP'), sans-serif;
    font-size: clamp(0.85rem, 1.1vw, 0.95rem);
    letter-spacing: 0.18em;
    line-height: 1.5;
}
.app-hero__title {
    font-family: var(--font-heading, 'Zen Old Mincho'), serif;
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 900;
    letter-spacing: 0.06em;
    line-height: 1.3;
    margin: 0;
}

.app-hero__prose {
    font-family: var(--font-body, 'Noto Sans JP'), sans-serif;
    font-size: clamp(1rem, 1.3vw, 1.1rem);
    line-height: 2;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 700ms ease-out, transform 700ms ease-out;
    transition-delay: 200ms;
}
.app-hero__prose.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.app-hero__prose p {
    margin: 0 0 1.2em;
}

.app-hero__cta {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: clamp(2.5rem, 5vh, 3.5rem);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 700ms ease-out, transform 700ms ease-out;
    transition-delay: 400ms;
}
.app-hero__cta.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- トーン別 (data-tone) --- */

/* 夜 (night) - ダーク基調 + gold-warm */
.app-hero[data-tone="night"] {
    background: #050010;
    color: rgba(255, 255, 255, 0.85);
}
.app-hero[data-tone="night"] .app-hero__project-badge {
    background: rgba(255, 176, 32, 0.08);
    border: 1px solid rgba(255, 176, 32, 0.3);
    color: #FFB020;
}
.app-hero[data-tone="night"] .app-hero__sub {
    color: #FFB020;
}
.app-hero[data-tone="night"] .app-hero__title {
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 0 30px rgba(255, 176, 32, 0.15);
}
.app-hero[data-tone="night"] .app-hero__prose {
    color: rgba(255, 255, 255, 0.78);
}

/* 朝 (dawn) - ライト基調 + gold-subtle */
.app-hero[data-tone="dawn"] {
    background: #fdfbf7;
    color: #2d2b27;
}
.app-hero[data-tone="dawn"] .app-hero__project-badge {
    background: rgba(196, 160, 74, 0.08);
    border: 1px solid rgba(196, 160, 74, 0.3);
    color: #c4a04a;
}
.app-hero[data-tone="dawn"] .app-hero__sub {
    color: #c4a04a;
}
.app-hero[data-tone="dawn"] .app-hero__title {
    color: #1a1917;
}
.app-hero[data-tone="dawn"] .app-hero__prose {
    color: #433f3a;
}

/* 風 (wind) - ライト基調 + teal-700 */
.app-hero[data-tone="wind"] {
    background: #fdfbf7;
    color: #2d2b27;
}
.app-hero[data-tone="wind"] .app-hero__project-badge {
    background: rgba(255, 176, 32, 0.08);
    border: 1px solid rgba(255, 176, 32, 0.3);
    color: #FFB020;
    /* Genie でも「まほうのランプ PROJECT」badge は gold-warm (project 標識) */
}
.app-hero[data-tone="wind"] .app-hero__sub {
    color: var(--hp-genie-accent, #0F766E);
}
.app-hero[data-tone="wind"] .app-hero__title {
    color: #1a1917;
}
.app-hero[data-tone="wind"] .app-hero__prose {
    color: #433f3a;
}

/* --- モバイル: 縦積み --- */
@media (max-width: 768px) {
    .app-hero__layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .app-hero__figure {
        margin-bottom: 1rem;
    }
    .app-hero__icon {
        max-width: 240px;
    }
    .app-hero__prose {
        text-align: left;
        padding: 0 0.5rem;
    }
    .app-hero__cta {
        flex-direction: column;
        align-items: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-hero__figure,
    .app-hero__prose,
    .app-hero__cta {
        transition-duration: 0.01ms;
        transform: none;
    }
    .app-hero__figure.is-visible,
    .app-hero__prose.is-visible,
    .app-hero__cta.is-visible {
        transform: none;
    }
}

/* creation-mode / learning-mode ページ用の .cta-* / .app-page-nav CSS は
   2026-07-08 将平氏 FB で撤去。Prev/Next は他 HP ページと同じ
   btn-primary / btn-secondary パターン (editorial.css / index.css 定義) を使用。
   Hero 直下の CTA も既に削除済のため、詳細ページ側の .cta-* は不要。 */

/* ============================================================
   Value tagline (hp/genie.html §3.5、綾 handoff 引継)
   「書き続けた夜が、明ける。」を Value 先頭に配置
   ============================================================ */

.genie-value__lede {
    font-family: var(--font-heading, 'Zen Old Mincho'), serif;
    font-size: clamp(1.3rem, 2.4vw, 1.7rem);
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #c4a04a;
    text-align: center;
    margin: 0 0 clamp(2rem, 4vh, 3rem);
    opacity: 0.9;
}

/* ============================================================
   §純化 3 バナー Landing (2026-07-07 将平氏 FB 対応)
   バナー画像だけを clickable link で並置、テキスト重複を排除
   ============================================================ */

.app-landing-banners-pure {
    background: #050010;
    padding: clamp(3rem, 8vh, 6rem) 5vw clamp(4rem, 10vh, 8rem);
    position: relative;
}

.app-landing-banners-pure__list {
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 5vh, 3.5rem);
    max-width: 960px;
    margin: 0 auto;
}

.app-landing-banner-pure {
    display: block;
    text-decoration: none;
    border-radius: 14px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 700ms ease-out,
        transform 700ms ease-out,
        box-shadow 250ms ease-out,
        filter 250ms ease-out;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.app-landing-banner-pure.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.app-landing-banner-pure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
}

.app-landing-banner-pure:hover,
.app-landing-banner-pure:focus-visible {
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
    filter: brightness(1.04);
    transform: translateY(-3px);
}

.app-landing-banner-pure:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .app-landing-banner-pure {
        transition-duration: 0.01ms;
        transform: none;
    }
    .app-landing-banner-pure.is-visible,
    .app-landing-banner-pure:hover,
    .app-landing-banner-pure:focus-visible {
        transform: none;
        filter: none;
    }
}

/* ============================================================
   詳細ページ (creation-mode / learning-mode) 用 レイアウト CSS
   2026-07-07 将平氏 FB: app.html 純化に伴い、旧 app.html 内の
   .app-light-section 系スタイルを共通 CSS 化して両詳細ページで再利用
   ============================================================ */

/* --- page bg (2026-07-12 Wave 8) ---
   body 既定 #050010 が Prev/Next outro (透明) を透過して黒帯化するのを遮蔽。
   両詳細ページ全体を Ivory 統一し、「呼吸のある page 終端」を実現。 */
.creation-mode-page,
.learning-mode-page {
    background: #fdfbf7;
}

/* --- dark section (creation-mode Hero との連結用、tone-transition の前) --- */
.creation-mode-page .app-dark-section,
.learning-mode-page .app-dark-section {
    background: #050010;
    color: rgba(255, 255, 255, 0.92);
    padding: 6rem 5vw 4rem;
    position: relative;
}

/* tone-transition (夜→朝 gradient + 脈動 dawnGlow) は 2026-07-08 将平氏 FB で撤去。
   creation-mode の Hero を dawn 化したため、Hero → light-section の
   トーン切替が不要になった。 */

/* --- light-section (両詳細ページの本体) ---
   bottom padding は 0: dawn-banner (最後の子) の gold gradient を
   直下の Prev/Next outro とシームレスに繋げるため。 */
.creation-mode-page .app-light-section,
.learning-mode-page .app-light-section {
    background: #fdfbf7;
    color: #2d2b27;
    padding: 4rem 0 0;
}

.creation-mode-page .app-light-section .editorial-subtitle,
.learning-mode-page .app-light-section .editorial-subtitle {
    color: #c4a04a;
}

.creation-mode-page .editorial-heading-sub,
.learning-mode-page .editorial-heading-sub {
    font-family: var(--font-heading, 'Zen Old Mincho'), serif;
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    font-weight: 700;
    line-height: 1.4;
    color: #1a1917;
    margin-bottom: 1.3rem;
    letter-spacing: 0.05em;
}

/* --- Page opener (2026-07-08 将平氏 FB) ---
   詳細ページの一番上に配置される「章の入口」ラッパー。
   header (position:fixed) 下から始まる light bg + eyebrow + heading の帯。
   Hero より前に来て、ページに馴染む editorial 導入を作る。 */
.creation-mode-page .app-page-opener,
.learning-mode-page .app-page-opener {
    background: #fdfbf7;
    padding: clamp(8rem, 15vh, 10rem) 5vw clamp(3rem, 6vh, 4.5rem);
    text-align: center;
}

.creation-mode-page .app-page-opener > .section-lead,
.learning-mode-page .app-page-opener > .section-lead {
    max-width: 900px;
    margin: 0 auto;
    padding: 0;
}

/* --- section-lead (light-section 内での配置) --- */
.creation-mode-page .section-lead,
.learning-mode-page .section-lead {
    max-width: 900px;
    margin: 6rem auto 2rem;
    padding: 0 5vw;
    text-align: center;
}

.creation-mode-page .section-lead .editorial-subtitle,
.learning-mode-page .section-lead .editorial-subtitle {
    color: #c4a04a;
    font-size: 0.85rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    display: block;
}

.creation-mode-page .section-lead .editorial-heading,
.learning-mode-page .section-lead .editorial-heading {
    font-size: clamp(1.8rem, 4.5vw, 2.6rem);
    line-height: 1.5;
    margin-bottom: 1.8rem;
    color: #1a1917;
}

.creation-mode-page .section-lead .editorial-body,
.learning-mode-page .section-lead .editorial-body {
    color: #433f3a;
    line-height: 2;
}

/* --- video-embed-wrapper (ハイブリッド動画埋込) --- */
.creation-mode-page .video-embed-wrapper,
.learning-mode-page .video-embed-wrapper {
    max-width: 900px;
    margin: 4rem auto;
    padding: 0 5vw;
}

.creation-mode-page .video-embed-wrapper .video-frame,
.learning-mode-page .video-embed-wrapper .video-frame {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
    background: #000;
}

.creation-mode-page .video-embed-wrapper video,
.learning-mode-page .video-embed-wrapper video {
    width: 100%;
    height: auto;
    display: block;
}

.creation-mode-page .video-embed-wrapper figcaption,
.learning-mode-page .video-embed-wrapper figcaption {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    color: #6f6a64;
    font-family: var(--font-heading, 'Zen Old Mincho'), serif;
}

/* --- pen-pair-grid (creation-mode 専用、ペンツール 2 画像並列) --- */
.creation-mode-page .pen-pair-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 4vw, 2.5rem);
    max-width: 900px;
    margin: 4rem auto;
    padding: 0 5vw;
}

.creation-mode-page .pen-pair-grid figure {
    margin: 0;
    text-align: center;
}

.creation-mode-page .pen-pair-grid img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.creation-mode-page .pen-pair-grid figcaption {
    margin-top: 0.8rem;
    font-size: 0.85rem;
    color: #6f6a64;
    font-family: var(--font-heading, 'Zen Old Mincho'), serif;
    letter-spacing: 0.1em;
}

@media (max-width: 700px) {
    .creation-mode-page .pen-pair-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* --- quote-section (デザインの品格) --- */
.creation-mode-page .quote-section,
.learning-mode-page .quote-section {
    background: #fdfbf7;
    padding: 8rem 5vw;
    text-align: center;
}

.creation-mode-page .quote-section blockquote,
.learning-mode-page .quote-section blockquote {
    font-family: var(--font-heading, 'Zen Old Mincho'), serif;
    font-size: clamp(1.3rem, 3vw, 1.7rem);
    line-height: 2.2;
    color: #2d2b27;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    padding: 0 2rem;
    font-style: normal;
}

.creation-mode-page .quote-section blockquote::before,
.creation-mode-page .quote-section blockquote::after,
.learning-mode-page .quote-section blockquote::before,
.learning-mode-page .quote-section blockquote::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 1px;
    background: #c4a04a;
    left: 50%;
    transform: translateX(-50%);
}

.creation-mode-page .quote-section blockquote::before,
.learning-mode-page .quote-section blockquote::before { top: -2rem; }
.creation-mode-page .quote-section blockquote::after,
.learning-mode-page .quote-section blockquote::after { bottom: -2rem; }

/* --- teacher-qr-section (learning-mode 専用) --- */
.learning-mode-page .teacher-qr-section {
    background: #fdfbf7;
    padding: 6rem 5vw;
    text-align: center;
}

.learning-mode-page .teacher-qr-section .editorial-subtitle {
    color: #c4a04a;
}

.learning-mode-page .teacher-qr-section .editorial-heading {
    font-family: var(--font-heading, 'Zen Old Mincho'), serif;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    color: #1a1917;
    margin: 1rem 0 2rem;
    letter-spacing: 0.06em;
}

.learning-mode-page .teacher-qr-section .editorial-body {
    max-width: 640px;
    margin: 0 auto 3rem;
    line-height: 2;
    color: #2d2b27;
}

.learning-mode-page .teacher-qr-section .editorial-body-muted {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.9em;
    color: #6b6763;
}

.learning-mode-page .teacher-qr-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2.5rem 1.5rem;
    border: 1px solid rgba(196, 160, 74, 0.3);
    background: #ffffff;
    max-width: 360px;
    margin: 0 auto 2.5rem;
    border-radius: 2px;
}

.learning-mode-page .teacher-qr-microcopy {
    font-family: var(--font-body, 'Noto Sans JP'), sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    color: #433f3a;
    margin: 0;
}

.learning-mode-page .teacher-qr-target {
    display: block;
    line-height: 0;
}

.learning-mode-page .teacher-qr-image {
    display: block;
    width: 200px;
    height: 200px;
    border: 1px solid rgba(45, 43, 39, 0.08);
}

.learning-mode-page .teacher-qr-cta {
    margin-top: 1rem;
}

/* 公式 LINE 友だち追加 QR (学校の先生方の相談窓口) — HP polish 3 波目 2026-07-12 */
.learning-mode-page .teacher-line-qr-lead {
    max-width: 640px;
    margin: 3rem auto 1.25rem;
    font-family: var(--font-body, 'Noto Sans JP'), sans-serif;
    font-size: 0.95rem;
    line-height: 1.9;
    color: #433f3a;
    text-align: center;
}

.learning-mode-page .teacher-line-qr-panel {
    margin-bottom: 2.5rem;
}

@media (max-width: 700px) {
    .learning-mode-page .teacher-qr-panel {
        padding: 2rem 1rem;
        max-width: 300px;
    }
    .learning-mode-page .teacher-qr-image {
        width: 180px;
        height: 180px;
    }
    .learning-mode-page .teacher-line-qr-lead {
        font-size: 0.9rem;
        padding: 0 1rem;
    }
}

/* --- dawn-banner (両詳細ページ末尾の Contact CTA) ---
   2026-07-12 Wave 8: 旧 beige→gold gradient (ランプ演出) を撤去し Ivory 単色化。
   Prev/Next outro と一続きの「呼吸のある page 終端」を実現。 */
.creation-mode-page .dawn-banner,
.learning-mode-page .dawn-banner {
    background: #fdfbf7;
    color: #2d2b27;
    padding: 8rem 5vw 6rem;
    text-align: center;
    position: relative;
}

.creation-mode-page .dawn-banner .guide-banner-subtitle,
.learning-mode-page .dawn-banner .guide-banner-subtitle {
    color: #c4a04a;
    font-size: 0.85rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    display: block;
}

.creation-mode-page .dawn-banner .guide-banner-title,
.learning-mode-page .dawn-banner .guide-banner-title {
    color: #1a1917;
    font-family: var(--font-heading, 'Zen Old Mincho'), serif;
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.5;
    margin-bottom: 1.8rem;
}

.creation-mode-page .dawn-banner .editorial-body,
.learning-mode-page .dawn-banner .editorial-body {
    color: #433f3a;
    line-height: 2;
    margin-bottom: 3rem;
}

/* ============================================================
   app.html Hero (純化後) 用 shared style
   ============================================================ */

.app-page-wrapper {
    padding-top: 100px;
    background-color: #050010;
    color: rgba(255, 255, 255, 0.9);
    position: relative;
    z-index: 50;
    width: 100%;
    overflow-x: hidden;
}

.app-hero-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4rem 5vw 3rem;
    max-width: 1200px;
    margin: 0 auto;
    background: #050010;
    color: rgba(255, 255, 255, 0.92);
}

.app-hero-header .editorial-subtitle {
    color: #FFB020;
    opacity: 0.85;
}

.app-hero-header .editorial-title {
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 0 30px rgba(255, 176, 32, 0.15);
}

.app-hero-header .editorial-body {
    color: rgba(255, 255, 255, 0.78);
}

/* ============================================================
   app.html data-tone="dawn" — 朝トーン変換 (2026-07-07 将平氏 FB)
   HP の入口 (app.html Landing) は朝トーンで、そこから
   夜 (creation-mode) / 朝 (learning-mode) / 風 (genie) の 3 面へ分岐する
   新体験設計。

   差別化ポリシー (learning-mode.html との重複回避):
   - app.html Landing:  #F9F8F3 (facility 同系 chalk) + gold-subtle は eyebrow のみ
   - learning-mode.html: #fdfbf7 (ivory) + gold-subtle を詳細セクションで活用

   SSOT: 01ブランドセンター/visual/color-tokens.md §3.2 (ライト基調規約準拠)
   ============================================================ */

body[data-tone="dawn"] {
    background-color: #F9F8F3;
}

body[data-tone="dawn"] .app-page-wrapper {
    background-color: #F9F8F3;
    color: #2d2b27;
}

/* Hero: light bg + チャコール本文 + gold-subtle eyebrow (控えめ) */
body[data-tone="dawn"] .app-hero-header {
    background: #F9F8F3;
    color: #2d2b27;
}

body[data-tone="dawn"] .app-hero-header .editorial-subtitle {
    color: #c4a04a;               /* gold-subtle、eyebrow のみで発火 */
    opacity: 0.9;
}

body[data-tone="dawn"] .app-hero-header .editorial-title {
    color: #1a1917;               /* チャコール濃、text-shadow は削除 (静けさ優先) */
    text-shadow: none;
}

body[data-tone="dawn"] .app-hero-header .editorial-body {
    color: #433f3a;               /* ライト基調本文の補助テキスト色 */
}

/* 3 バナー Landing (純化版): 朝トーンの bg + 影を薄く */
body[data-tone="dawn"] .app-landing-banners-pure {
    background: #F9F8F3;
}

body[data-tone="dawn"] .app-landing-banner-pure {
    box-shadow: 0 8px 24px rgba(45, 43, 39, 0.08);   /* ダーク影 → ライト影に置換 */
}

body[data-tone="dawn"] .app-landing-banner-pure:hover,
body[data-tone="dawn"] .app-landing-banner-pure:focus-visible {
    box-shadow: 0 18px 50px rgba(45, 43, 39, 0.14);
    filter: brightness(1.02);      /* ライト bg なので brightness 効果を微減 */
}

body[data-tone="dawn"] .app-landing-banner-pure:focus-visible {
    outline: 2px solid rgba(196, 160, 74, 0.6);      /* gold-subtle outline */
    outline-offset: 4px;
}