body {
            background-color: #E6DFD2; /* 外側の背景 */
            color: #2E2B28;
            /* 本文は端末の標準フォント（見慣れた字で読みやすい）。見出しだけ .font-title の丸文字 */
            font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Yu Gothic UI', 'Meiryo', sans-serif;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
        }

        /* タイトル・見出し用（ロゴに合わせた丸ゴシック・太め） */
        .font-title {
            font-family: 'M PLUS Rounded 1c', sans-serif;
            font-weight: 700;
            letter-spacing: 0.04em;
        }

        #app {
            max-width: 420px;
            margin: 0 auto;
            background-color: #F5F0E6;
            /* 和紙の繊維を思わせる、ごく薄いむら */
            background-image:
                radial-gradient(rgba(122,115,107,0.05) 1px, transparent 1px),
                radial-gradient(rgba(122,115,107,0.04) 1px, transparent 1px);
            background-size: 7px 7px, 11px 11px;
            background-position: 0 0, 3px 5px;
            min-height: 100vh;
            position: relative;
            box-shadow: 0 4px 24px rgba(0,0,0,0.08);
            overflow-x: hidden;
        }

        .view-section:not(.active) {
            display: none !important;
        }

        .view-section {
            padding-bottom: 100px;
            animation: fadeIn 0.3s ease-out;
        }

        .view-section.no-nav {
            padding-bottom: 20px;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(6px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* カード：奉書紙を一枚置いたような佇まい */
        .visual-card {
            background: #FFFDF8;
            border-radius: 10px;
            border: 1px solid #E2DACB;
            box-shadow: 0 1px 2px rgba(46,43,40,0.04);
            transition: transform 0.15s;
        }
        .visual-card:active {
            transform: scale(0.99);
        }

        /* 見出し横の短い墨の線 */
        .brush-rule {
            display: inline-block;
            width: 18px;
            height: 2px;
            background: #2E2B28;
            vertical-align: middle;
            margin-right: 8px;
        }

        /* 先生の朱の添削コメント */
        .shu-note {
            color: #B9472F;
        }

        /* ランクバッジ画像（白地のJPGを紙に馴染ませる） */
        .rank-badge {
            mix-blend-mode: multiply;
            object-fit: contain;
        }

        /* 下のナビ：選んでいない画面のアイコンは色を落とし、選んでいる画面だけ色をつける */
        .nav-btn img {
            filter: grayscale(1) opacity(0.65);
            transition: filter 0.3s;
        }
        .nav-btn.is-active img {
            filter: none;
        }
        /* 湯呑みは元の色が淡いので、選んでいないときも、ほかの4つと同じ濃さに見えるよう濃くする */
        .nav-btn:not(.is-active) img.nav-dense {
            filter: grayscale(1) contrast(1.6) brightness(0.8) opacity(0.8);
        }

        /* つながりの地図まわり：文節のところで改行する（「金利」の途中で折れない） */
        .view-section { word-break: auto-phrase; }
        /* auto-phrase に未対応のブラウザ：JS が文節の切れ目に <wbr> を入れる。それ以外では、切らない */
        body.ph-on #app .view-section, body.ph-on { word-break: keep-all; overflow-wrap: break-word; }
        .nw { white-space: nowrap; }
        .view-section :is(p, li, dd, dt, summary) { text-wrap: pretty; }
        /* 入力欄の中でも、文節のところで折り返す（入力欄は、親の指定を引き継がない） */
        .view-section :is(textarea, input) { word-break: auto-phrase; }

        /* カスタムスクロールバー非表示 */
        ::-webkit-scrollbar { display: none; }