:root {
    --paper-w: 210mm;
    --paper-h: 297mm;
    --line-color: #94A3B8;
    /* スレート400 */
    --sub-line-color: #CBD5E1;
    /* スレート300 */
    --accent-line-color: #F87171;
    /* レッド400 */
}

body {
    font-family: 'Zen Maru Gothic', sans-serif;
    background-color: #F5F5F0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23E6E6DC' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    color: #57534E;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* --- 用紙プレビューエリア --- */

/* --- 用紙選択ボタン --- */
.paper-btn {
    width: 100%;
    text-align: left;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background-color: #FAFAF9;
    /* stone-50 */
    color: #57534E;
    /* stone-600 */
    font-weight: 700;
    border: 1px solid #E7E5E4;
    /* stone-200 */
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
}

.paper-btn:focus-visible {
    outline: 3px solid #14B8A6;
    outline-offset: 2px;
}

.paper-btn:hover {
    background-color: #F0FDFA;
    /* teal-50 */
    border-color: #99F6E4;
    /* teal-200 */
}

.paper-btn:hover .paper-btn__icon {
    color: #14B8A6;
    /* teal-500 */
}

/* アクティブ状態（選択中） */
.paper-btn--active {
    background-color: #F0FDFA;
    /* teal-50 */
    border-color: #99F6E4;
    /* teal-200 */
    box-shadow: 0 0 0 2px #CCFBF1;
    /* ring-2 ring-teal-100 */
}

.paper-btn--active .paper-btn__icon {
    color: #14B8A6;
    /* teal-500 */
}

/* 子要素 */
.paper-btn__icon {
    color: #A8A29E;
    /* stone-400 */
    transition: color 0.15s ease;
}

.paper-btn__title {
    font-size: 0.875rem;
    /* text-sm */
}

.paper-btn__desc {
    font-size: 10px;
    /* text-[10px] */
    color: #A8A29E;
    /* stone-400 */
    font-weight: 400;
    /* font-normal */
}

#zoom-in-btn:disabled,
#zoom-out-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.paper-preview-container {
    background-color: #E7E5E4;
    padding: 2rem;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex: 1;
}

.paper-sheet {
    width: var(--paper-w);
    height: var(--paper-h);
    background: white;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    /* 印刷時の余白を考慮して内側にpaddingを持つ */
    padding: 15mm;
    box-sizing: border-box;
    transform-origin: top center;
    position: relative;
    overflow: hidden;
    /* はみ出し防止 */
}

/* --- 罫線パターン --- */

/* 1. 漢字練習帳 (十字リーダー入り) */
/* 印刷エリア: 180mm x 267mm (15mmマージン後) */
/* セルサイズ: 36mm x 36mm (5列 x 7行 = 35セル) */
.grid-kanji {
    display: grid;
    grid-template-columns: repeat(5, 36mm);
    grid-template-rows: repeat(7, 36mm);
    width: calc(36mm * 5);
    /* 180mm */
    height: calc(36mm * 7);
    /* 252mm */
    border: 2px solid var(--line-color);
    margin: 0 auto;
}

.kanji-cell {
    border-right: 2px solid var(--line-color);
    border-bottom: 2px solid var(--line-color);
    position: relative;
    box-sizing: border-box;
}

/* 右端のセルは右枠不要 */
.kanji-cell:nth-child(5n) {
    border-right: none;
}

/* 最下行のセルは下枠不要 */
.kanji-cell:nth-last-child(-n+5) {
    border-bottom: none;
}

/* 十字リーダー (点線) */
.kanji-cell::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    border-left: 1px dashed var(--sub-line-color);
}

.kanji-cell::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 1px dashed var(--sub-line-color);
}

/* 2. 5mm方眼紙 */
/* 印刷エリア: 180mm x 267mm */
/* 36セル x 53セル = 180mm x 265mm */
.grid-5mm {
    width: calc(5mm * 36);
    /* 180mm */
    height: calc(5mm * 53);
    /* 265mm */
    border: 1px solid var(--line-color);
    background-image: url("data:image/svg+xml,%3Csvg width='5mm' height='5mm' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='50' height='50' fill='none' stroke='%2394A3B8' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 5mm 5mm;
    background-position: top left;
    margin: 0 auto;
}

/* 3. 10mm方眼紙 (5mmの補助線入り) */
/* 18セル x 26セル = 180mm x 260mm */
.grid-10mm {
    width: calc(10mm * 18);
    /* 180mm */
    height: calc(10mm * 26);
    /* 260mm */
    border: 1px solid var(--line-color);
    background-image: url("data:image/svg+xml,%3Csvg width='10mm' height='10mm' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 0L50 100 M0 50L100 50' fill='none' stroke='%23CBD5E1' stroke-width='1' stroke-dasharray='3 2'/%3E%3Crect x='0' y='0' width='100' height='100' fill='none' stroke='%2394A3B8' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 10mm 10mm;
    background-position: top left;
    margin: 0 auto;
}

/* 4. 英語ノート (4線) */
.grid-english {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.eng-row {
    height: 12mm;
    /* 1行の高さ */
    border-bottom: 1px solid transparent;
    /* スペーサー */
    position: relative;
    margin-bottom: 4mm;
    /* 行間 */
}

/* 4本線を描画 */
.eng-row::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    /* 上線、中上線(点線)、中下線(赤)、下線 */
    background:
        linear-gradient(to bottom,
            var(--line-color) 1px, transparent 1px,
            /* Line 1 */
            transparent 33%,
            var(--sub-line-color) 33%, var(--sub-line-color) calc(33% + 1px), transparent calc(33% + 1px),
            /* Line 2 (thin) */
            transparent 66%,
            var(--accent-line-color) 66%, var(--accent-line-color) calc(66% + 1px), transparent calc(66% + 1px),
            /* 3線目 (赤) */
            transparent 100%);
    border-bottom: 1px solid var(--line-color);
    /* 4線目 */
}

/* 5. 五線譜 */
.grid-music {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12mm;
    /* 五線間のスペース */
    padding-top: 10mm;
}

.music-staff {
    height: 8mm;
    /* 1つの五線の高さ */
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    background: repeating-linear-gradient(to bottom,
            black 0, black 1px,
            transparent 1px, transparent 2mm);
    /* 最後の線の重なりを防ぐ微調整 */
    background-size: 100% 2mm;
}


/* --- 印刷設定 --- */
@media print {
    @page {
        margin: 0;
        size: A4;
    }

    body {
        background: none;
        display: block;
        height: auto;
        overflow: visible;
    }

    header,
    aside,
    .no-print {
        display: none !important;
    }

    main {
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
        overflow: visible !important;
    }

    .paper-preview-container {
        padding: 0;
        background: white;
        display: block;
    }

    .paper-sheet {
        box-shadow: none;
        margin: 0;
        transform: scale(1) !important;
        /* プレビュースケールを解除 */
        width: 210mm;
        height: 297mm;
        /* 1ページに強制 */
        padding: 15mm;
        /* 印刷マージン */
        page-break-after: auto;
    }

    /* Force printing of background colors/images */
    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}