/* leitur-mode.css */
.general-format {
    background-color: #f0f0f0;
    font-family: 'Verdana', 'Arial', sans-serif; /* Fonte segura e clássica */
    color: #333;
    line-height: 1.6;
    margin: 20px;
}

.leitura-mode-body {
    background-color: #f7f3e8; /* Fundo Creme Suave (papel) */
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans GB", "Arial", sans-serif;
    color: #1c1c1c;
    line-height: 1.8; /* Aumenta o espaçamento entre linhas para legibilidade */
    margin: 0;
    padding: 20px;
}

.leitura-container {
    max-width: 700px; /* Limita a largura do texto para conforto de leitura */
    margin: 0 auto; /* Centraliza o texto */
    padding: 20px;
}

.leitura-container2 {
    margin-left: 2cm;
    margin-right: 2cm;
    text-align: justify;
}

.leitura-container h1 {
    font-size: 2.2em;
    text-align: center;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
}

.leitura-container p {
    font-size: 1.1em;
    margin-bottom: 1.5em;
}

.leitura-container a {
    color: #0056b3;
}

/* Estilo para links de retorno */
.voltar {
    text-align: center;
    margin-top: 30px;
    font-size: 0.9em;
}

/* --- ESTILO PARA ESCRITA VERTICAL JAPONESA (TATE GAKI) --- */

.texto-japones-vertical {
    /* 1. Define a direção da escrita: Vertical, da direita para a esquerda */
    writing-mode: vertical-rl; 
    
    /* 2. Define o tamanho da fonte e a família (Mincho ou fonte nativa são melhores) */
    font-family: "UD Digi Kyokasho NK-R", sans-serif;
    font-size: 1.2em;
    
    /* 3. Ajusta o espaçamento de linha para leitura vertical */
    line-height: 1.8;
    
    /* 4. Garante que o contêiner tenha uma altura e largura para ser lido */
    height: 600px; /* Altura fixa, ajuste conforme a necessidade */
    max-width: 2000px; /* Largura máxima da tela (para não ter barra de rolagem horizontal desnecessária) */
    
    /* 5. Faz o conteúdo rolar horizontalmente, se o texto for maior que a tela */
    overflow-x: auto; 
    overflow-y: hidden; /* Evita barra de rolagem vertical */
    
    /* 6. Para o toque estético */
    border: 1px solid #000080;
    padding: 20px;
    background-color: #fffaf0;
    margin: 20px 0;
}

/* Ajusta os parágrafos dentro do contêiner vertical */
.texto-japones-vertical p {
    /* Faz com que cada parágrafo comece em uma nova coluna */
    display: inline-block; 
    
    /* Adiciona espaço entre as colunas (parágrafos) */
    margin: 0 1.5em 0 0; 
    
    /* Garante que o texto se alinhe no topo (direita) da coluna */
    text-align: start; 
}

/* Opcional: Estilo para Furigana (usando a tag HTML <ruby>) */
.furigana-exemplo1 {
    /* O navegador deve lidar com a ruby, mas garantimos o alinhamento */
    writing-mode: horizontal-tb; /* Volta ao modo horizontal para o exemplo */
}

.furigana-exemplo2 {
    /* O navegador deve lidar com a ruby, mas garantimos o alinhamento */
    writing-mode: vertical-rl; /* Volta ao modo horizontal para o exemplo */
}