/* ベース */
:root {
        --max-width: 960px;
    }
    body { font-family: -apple-system, BlinkMacSystemFont, "Noto Sans KR","Malgun Gothic", "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
        line-height: 1.7;
        margin: 0;
        word-break: keep-all;
    }
    .container { max-width: var(--max-width); margin: 2rem auto; padding: 0 1rem; }
    .site-header, .site-footer { padding: 1rem; background: #fafafa; border-bottom: 1px solid #eee; }
    .site-footer { border-top: 1px solid #eee; border-bottom: none; }
    .site-title { font-weight: 700; text-decoration: none; color: inherit; }
    .site-nav a { margin-left: 1rem; text-decoration: none; }
    
    /* 漢字ページ */
    .kanji-entry { display: grid; gap: 1rem; }
    .kanji-header { display: flex; align-items: center; gap: 1rem; }
    .kanji-title { margin: 0; font-size: 1.5rem; font-weight: 700; }
    .kanji-title .code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Roboto Mono", monospace; font-size: .9rem; color: #666; }
    
    /* ★ 字形を大きく見せるクラス（本文中でも使用可） */
    .kanji-glyph {
        font-family: "Noto Serif KR", "Noto Serif CJK KR", "BatangChe", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "Songti SC", "SimSun", serif;
        display: inline-block;
        font-size: clamp(64px, 12vw, 148px); /* 画面に応じて大きく */
        line-height: 1;
        margin: .25rem .5rem .25rem 0;
    }
    
    /* ★ 일본어 폰트 우선 적용 클래스 */
    .jp-font {
        font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans KR", sans-serif;
    }
    
    /* メタ情報テーブル */
    .kanji-meta {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;       /* ★ 열 폭 고정 */
    }
    .kanji-meta .col-th { width: 9rem; }  /* 라벨 칸 고정폭 (취향에 맞게 8~12rem 조절) */
    .kanji-meta .col-td { width: auto; }  /* 값 칸은 나머지 전부 */

    .kanji-meta th, .kanji-meta td { border-bottom: 1px solid #eee; padding: .5rem .75rem; vertical-align: top; }
    .kanji-meta th {
        white-space: nowrap;       /* 라벨은 줄바꿈 없이 한 줄 */
        text-align: left;
        color: #555;
    }
    .kanji-meta td {
        overflow-wrap: anywhere;   /* 긴 단어/코드에도 줄바꿈 허용 */
        word-break: break-word;    /* CJK와 혼용시 강제 줄바꿈 */
        min-height: 1.2em; /* 빈 칸에도 일정 높이 유지 */
    }
      
    .compounds { margin: 0; padding-left: 1.25rem; }
    .compounds .reading { color: #666; }
    .compounds .standard { color: #1170ff; } /* 표외 보라색 강조 */
    .compounds .offchart { color: #7f1783; } /* 표외 보라색 강조 */
    .compounds .hard { color: #c62828; } /* 고급 빨간색 강조 */

    .compounds .gloss-icon{
        vertical-align: middle;
        margin-right: .10em;
        opacity: .95;
    }

    .compound-group-title { margin: 1.2rem 0 .4rem; font-weight: 600; }
    .compound-list { margin: .2rem 0 1rem; padding-left: 1.2rem; }
    .compound-list li { margin: .15rem 0; }
    .compound-list .w { font-weight: 600; margin-right: .35rem; }
    .compound-list .r { opacity:.85; margin-right: .35rem; }
    .compound-list .t { opacity:.7; margin-right: .35rem; }
    .compound-list .g { opacity:.95; }

    .idioms { margin: 0; padding-left: 1.25rem; }
    .idioms .reading { color: #666; }
    .idioms .standard { color: #1170ff; } /* 표외 보라색 강조 */
    .idioms .offchart { color: #7f1783; } /* 표외 보라색 강조 */
    .idioms .hard { color: #c62828; } /* 고급 빨간색 강조 */

    .idioms .gloss-icon{
        vertical-align: middle;
        margin-right: .10em;
        opacity: .95;
    }

    /* 표외 */
    .onyomi { margin-right: .5em; }
    .onyomi.standard { color: #1170ff; font-weight: 600; } /* 하늘색 강조 */
    .onyomi.offchart { color: #7f1783; font-weight: 600; } /* 보라색 강조 */
    .kunyomi { margin-right: .5em; }
    .kunyomi.standard { color: #1170ff; font-weight: 600; } /* 하늘색 강조 */
    .kunyomi.offchart { color: #7f1783; font-weight: 600; } /* 보라색 강조 */

    /* 本文メモ */
    .kanji-notes p { margin: 1rem 0; }
    
    /* 一覧ページのカード */
    .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .75rem; }
    .card { border: 1px solid #eee; border-radius: 12px; padding: .75rem; background: #fff; text-decoration: none; color: inherit; }
    .card .g { font-family: "Noto Serif JP", serif; font-size: 44px; line-height: 1; display: block; }
    .card small { color: #666; }
    .card .title-line {
        font-size: 1rem;
        font-weight: 600;
        margin-top: .25rem;
        line-height: 1.3;
        white-space: nowrap;
    }

    .card .title-line .readings-inline {
        color: #666;
        font-weight: 400;
        margin-left: 0.15em;
        font-size: 0.7rem;
    }
    
    /* 급수 탭 버튼 */
    /* 버튼 reset & 일관성 */
    .level-tabs .level-btn {
        -webkit-appearance: none;
        appearance: none;
        border: 1px solid #e5e5e5;
        border-radius: 12px;
        padding: .5rem .9rem;
        background: #fff;
        cursor: pointer;
        font-weight: 600;
        transition: background .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease;
    }
    
    /* hover */
    .level-tabs .level-btn:hover { background: #f7f7f7; }
    
    /* active(선택됨) — 우선순위 올리고, 일부 테마가 이기는 경우 대비해 !important 사용 */
    .level-tabs .level-btn.active {
        background: #111 !important;
        color: #fff !important;
        border-color: #111 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,.08);
    }

    /* 툴 바 */
    .toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin: .5rem 0 1rem;
    }

    /* 정렬 바 */
    .sort-bar {
        display: flex;
        align-items: center;
        gap: .5rem;
        margin: .5rem 0 1rem;
    }
    .sort-bar label {
        color: #444;
        font-weight: 600;
    }
    .sort-bar select {
        border: 1px solid #e5e5e5;
        border-radius: 8px;
        padding: .35rem .6rem;
        background: #fff;
    }

    /* 개수 */
    .level-count {
        margin-left: auto;
        color: #666;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }

    /* 페이지네이션 */
    .pagination {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: .4rem;
        margin: 1rem 0 2rem;
    }
    .pagination button {
        border: 1px solid #ddd;
        background: #fff;
        padding: .3rem .6rem;
        border-radius: 6px;
        cursor: pointer;
        font-weight: 500;
        transition: background .15s ease;
    }
    .pagination button:hover { background: #f5f5f5; }
    .pagination button.active {
        background: #111;
        color: #fff;
        border-color: #111;
    }