/* src/public/css/timeline-core.css … 年表系ツール（歴史年表・自分史・会社の沿革）で共通の見た目
   💡 用紙（.tl-paper）の中は、選んだ色で印刷・保存するため、ダークモードでも色を変えません
   💡 入力欄の見た目（.tl-entry など）は、自分史メーカー・会社の沿革メーカーで使います。ダークモードは theme-dark.css の末尾 */

.tl-mini { padding: 6px 12px; font-size: 0.82rem; }

/* ---------- 入力（出来事の一覧） ---------- */
.tl-head-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
    margin-top: 18px;
}
.tl-head-row .mc-section-title { margin: 0; }
.tl-entries { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 10px; }
.tl-entry {
    --tl-entry: #90a4ae;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-left: 6px solid var(--tl-entry);
    border-radius: 10px;
    background: #f8fafc;
    min-width: 0;
}
.tl-entry-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.tl-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 0.78rem; color: #475569; }
.tl-field > span { font-weight: bold; overflow-wrap: anywhere; }
.tl-field input,
.tl-field select,
.tl-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    color: #1e293b;
    font-size: 0.95rem;
    font-family: inherit;
}
.tl-field textarea { resize: vertical; line-height: 1.5; }
.tl-field-wide { flex: 1 1 220px; }
.tl-field-year { flex: 0 1 110px; }
.tl-field-md { flex: 0 1 82px; }
.tl-field-tag { flex: 1 1 150px; }
.tl-tools { display: flex; gap: 4px; flex: 0 0 auto; margin-left: auto; padding-bottom: 2px; }
.tl-icon-btn {
    width: 34px;
    height: 34px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    color: #334155;
    cursor: pointer;
}
.tl-icon-btn:hover { background: #e2e8f0; }
.tl-icon-btn.tl-del { color: #b91c1c; }
.tl-add { width: 100%; justify-content: center; padding: 10px; }
.tl-field[hidden],
.tl-photo [hidden] { display: none !important; }
/* 日の入力は、日まで記録するとき（自分史の短期・会社の沿革）だけ出す */
.tl-app:not(.tl-show-day) .tl-field-day { display: none; }

/* 写真（選ぶ・小さく見る・外す） */
.tl-photo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tl-photo-thumb { max-width: 96px; max-height: 64px; border-radius: 6px; border: 1px solid #e2e8f0; background: #fff; }
.tl-photo-thumb[hidden] { display: none; }

/* 基本情報（名前・生年月日・会社名など） */
.tl-fieldset {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 14px;
    margin: 12px 0 0;
    padding: 6px 12px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    min-width: 0;
}
.tl-fieldset legend { padding: 0 4px; font-size: 0.85rem; font-weight: bold; color: #334155; }
.tl-fieldset-note { flex: 1 1 100%; margin: 0; }
.tl-profile { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; }
.tl-profile .tl-field { flex: 1 1 200px; }
/* 生年月日・設立年月日などの「年・月・日」は、スマホでも1行に並べる（2026-10-22「コンパクトに収める」） */
.tl-profile.tl-fieldset .tl-field-year { flex: 2 1 90px; min-width: 0; }
.tl-profile.tl-fieldset .tl-field-md { flex: 1 1 64px; min-width: 0; }
.tl-switch { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 6px 0 4px; }
.tl-check { display: inline-flex; align-items: center; gap: 8px; font-size: 0.92rem; cursor: pointer; }
.tl-check input { width: 18px; height: 18px; }

/* ---------- 詳細オプション（デザイン） ---------- */
.tl-options { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: flex-end; }
.tl-options .input-group { flex: 1 1 200px; min-width: 0; margin-bottom: 8px; }
.tl-options .tl-checks { display: flex; flex-wrap: wrap; gap: 6px 18px; flex: 1 1 100%; margin: 4px 0 10px; }
.tl-colors { display: flex; flex-wrap: wrap; gap: 8px 18px; flex: 1 1 100%; margin-bottom: 10px; align-items: center; }
.tl-color-field { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; cursor: pointer; }
.tl-color-field input { width: 40px; height: 32px; padding: 2px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; cursor: pointer; }
.tl-options select:disabled { opacity: 0.55; }

.mc-message.is-error { color: #b91c1c; }
.tl-fit-note { color: #b45309; margin-bottom: 4px; }

/* ---------- プレビュー ---------- */
.tl-stage {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 10px 0 4px;
    overflow: hidden;
    background: #e5e7eb;
    border-radius: 8px;
}
.tl-stage.is-full { overflow: auto; max-height: 80vh; }
.tl-pages { transform-origin: top left; width: max-content; }
.tl-pages > .tl-paper + .tl-paper { margin-top: 24px; }

.tl-paper {
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
    line-height: 1.4;
    text-align: left;
    --tl-r: 4px;
}
.tl-paper.is-square { --tl-r: 0; }
.tl-sheet { box-sizing: border-box; width: 100%; height: 100%; display: flex; flex-direction: column; }
.tl-sheet.is-title-left { flex-direction: row; }

/* 見出し（タイトル・基本情報・ロゴ） */
.tl-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.8em;
    padding-bottom: 0.4em;
    margin-bottom: 0.7em;
    border-bottom: 2px solid;
}
.tl-head-text { min-width: 0; }
.tl-sheet-title { font-weight: bold; line-height: 1.3; overflow-wrap: anywhere; }
.tl-head-line { font-size: 0.9em; opacity: 0.85; overflow-wrap: anywhere; }
.tl-logo { flex: 0 0 auto; max-width: 30%; height: auto; }
/* 左のタイトル：1文字ずつ縦に積む（印刷・画像でも同じ見た目になるよう、縦書きの指定は使わない） */
.tl-head.is-left {
    flex-direction: column;
    align-items: center;
    align-self: flex-start;
    width: 2.6em;
    margin: 0 0.8em 0 0;
    padding: 0 0.5em 0 0;
    border-bottom: 0;
    border-right: 2px solid;
}
.tl-head.is-left .tl-logo { max-width: 100%; }
.tl-head.is-left .tl-sheet-title { width: 1.25em; word-break: break-all; line-height: 1.15; text-align: center; }
.tl-head.is-left .tl-head-line { display: none; }

.tl-sheet-body { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden; }
.tl-sheet-content { transform-origin: top left; }
.tl-empty { padding: 2em 1em; text-align: center; opacity: 0.7; }
.tl-pageno { position: absolute; right: 10mm; bottom: 3.5mm; font-size: 9px; opacity: 0.6; }

/* 共通の部品 */
.tl-tag { display: inline-block; margin: 0.1em 0 0.2em; padding: 0.05em 0.5em; border-radius: 999px; font-size: 0.74em; font-weight: bold; }
.tl-paper.is-square .tl-tag { border-radius: 0; }
.tl-img { display: block; max-width: 100%; height: auto; margin: 0.3em 0; border-radius: var(--tl-r); }
.tl-card-date { font-size: 0.78em; opacity: 0.8; }
.tl-card-title { font-weight: bold; }
.tl-card-detail { margin-top: 0.15em; font-size: 0.82em; white-space: pre-wrap; opacity: 0.9; }
.tl-paper.is-date-bold .tl-card-date,
.tl-paper.is-date-bold .tl-v-date-main,
.tl-paper.is-date-bold .tl-c-date { font-weight: bold; }

/* ---------- 横型 ---------- */
.tl-row { position: relative; margin-bottom: 1.4em; }
.tl-row:last-child { margin-bottom: 0; }
.tl-bands { position: relative; }
.tl-band {
    position: absolute;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 0.4em;
    padding: 0 0.5em;
    border-radius: var(--tl-r);
    overflow: hidden;
    white-space: nowrap;
}
.tl-band b { overflow: hidden; text-overflow: ellipsis; }
.tl-band small { font-size: 0.78em; opacity: 0.9; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
.tl-band.is-cut-left { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.tl-band.is-cut-right { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.tl-axis { position: relative; }
.tl-axis-line { position: absolute; left: 0; right: 0; top: 0.45em; height: 2px; }
.tl-tick { position: absolute; top: calc(0.45em - 3px); width: 1px; height: 8px; }
.tl-tick-label { position: absolute; top: calc(0.45em + 6px); font-size: 0.72em; line-height: 1; transform: translateX(-50%); white-space: nowrap; opacity: 0.8; }
.tl-span { position: absolute; top: calc(0.45em - 2px); height: 6px; border-radius: 3px; }
.tl-dot { position: absolute; top: calc(0.45em - 4px); width: 10px; height: 10px; margin-left: -5px; border: 2px solid; border-radius: 50%; box-sizing: border-box; }
.tl-cards { position: relative; }
.tl-stem { position: absolute; top: 0; width: 1px; }
.tl-card {
    position: absolute;
    box-sizing: border-box;
    padding: 0.35em 0.5em 0.4em;
    border-left: 3px solid;
    border-radius: var(--tl-r);
    overflow-wrap: anywhere;
}

/* ---------- 縦型・ジグザグ型・カード型の見出し（時代・年） ---------- */
.tl-g { padding: 0.6em 0 0.35em; }
.tl-g:first-child { padding-top: 0; }
.tl-g-band {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2em 0.6em;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.25em 0.8em;
    border-radius: var(--tl-r);
    overflow-wrap: anywhere;
}
.tl-g-band small { font-size: 0.8em; opacity: 0.9; }
.tl-g-zigzag { text-align: center; }
.tl-flow-cards .tl-g { grid-column: 1 / -1; }

/* ---------- 縦型 ---------- */
.tl-v { display: grid; grid-template-columns: 8.4em 1.6em minmax(0, 1fr); }
.tl-v-date { padding: 0.45em 0.4em 0 0; text-align: right; overflow-wrap: anywhere; }
.tl-v-date-main { line-height: 1.25; }
.tl-v-date-sub { font-size: 0.78em; opacity: 0.85; }
.tl-v-axis { position: relative; }
.tl-v-axis::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--tl-line, #888); }
.tl-v-dot,
.tl-z-dot { position: absolute; top: 0.65em; left: 50%; width: 12px; height: 12px; margin-left: -6px; border: 2px solid; border-radius: 50%; box-sizing: border-box; }
.tl-v-card,
.tl-z-card {
    margin: 0.25em 0 0.45em;
    padding: 0.4em 0.65em 0.5em;
    border-left: 3px solid;
    border-radius: var(--tl-r);
    overflow-wrap: anywhere;
}

/* ---------- 中央ジグザグ型 ---------- */
.tl-z { display: grid; grid-template-columns: minmax(0, 1fr) 2em minmax(0, 1fr); }
.tl-z-spine { position: relative; }
.tl-z-spine::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--tl-line, #888); }
.tl-z-date { padding: 0.45em 0.4em 0; overflow-wrap: anywhere; }
.tl-z.is-left .tl-z-card { border-left: 0; border-right: 3px solid; text-align: right; }
.tl-z.is-left .tl-z-card .tl-img { margin-left: auto; }
.tl-z.is-right .tl-z-date { text-align: right; }

/* ---------- カード型 ---------- */
.tl-flow-cards { display: grid; gap: 0.6em; align-items: start; }
.tl-c-card {
    padding: 0.5em 0.65em 0.6em;
    border-top: 4px solid;
    border-radius: var(--tl-r);
    overflow-wrap: anywhere;
    min-width: 0;
}
.tl-c-date { font-size: 1.05em; line-height: 1.25; }
.tl-c-card .tl-img { margin: 0.35em auto; }

/* 画像・PDF にするときの、見えない場所の複製 */
.tl-capture { position: fixed; left: -30000px; top: 0; }
.tl-capture .tl-paper { box-shadow: none; }

/* ---------- 印刷：年表の用紙だけを紙に出す ---------- */
#tl-print-root { display: none; }

@media (max-width: 420px) {
    .tl-field-year { flex: 1 1 96px; }
    .tl-tools { margin-left: 0; }
}

@media print {
    body > *:not(#tl-print-root) { display: none !important; }
    #tl-print-root { display: block !important; }
    /* 用紙ぴったりだと、小さな誤差で白紙のページが出ることがあるため、少しだけ低くする */
    #tl-print-root .tl-paper {
        box-shadow: none;
        height: calc(var(--tl-ph) - 0.6mm) !important;
        break-after: page;
        page-break-after: always;
    }
    #tl-print-root .tl-paper:last-child { break-after: auto; page-break-after: auto; }
    #tl-print-root .tl-paper,
    #tl-print-root .tl-paper * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* 「クリア」「印刷」は、出来事を下まで入れていなくても押せるように、画面の下に貼り付ける（印刷するときは消す） */
.tl-actions-sticky {
    position: sticky; bottom: 0; z-index: 5;
    margin-left: -8px; margin-right: -8px; padding: 10px 8px;
    background: #ffffff; border-top: 1px solid #e2e8f0;
}
@media print { .tl-actions-sticky { display: none; } }