@charset "UTF-8";

.label {font-weight: bold;margin-top: 8px;}
.canvas-outer {display:flex; align-items:flex-start;}
canvas {image-rendering: pixelated;border: 1px solid #ccc;cursor: auto;margin-bottom: 20px;}
canvas[id^="plane"] {position: relative;display: block;width: 100%;height: auto;z-index: 1;}
canvas[id^="cursor"] {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 10;pointer-events: none;}
canvas[id^="scale"] {border:none;width: auto;height: 512px;}
.plane-wrapper {position: relative;width: 512px;height: 512px;}
.plane-table {border-collapse: collapse;font-family: sans-serif;font-size: 16px;color: #111;}
.plane-table td {width: 128px;height: 24px;border: 1px solid #ccc;padding: 4px;vertical-align: middle;}
[id^="info"] {width: 512px;height: 180px;padding: 8px;border: 1px solid #ccc;overflow: auto;box-sizing: border-box;background: #fafafa;font-size: 15px;font-family: -apple-system, BlinkMacSystemFont, "Yu Gothic Medium", "Yu Gothic", "Meiryo", sans-serif;}
.unicode-table {border-collapse: collapse;width: 100%;margin-top: 10px;font-size: 14px;border: 1px solid #ccc;font-family: -apple-system, BlinkMacSystemFont, "Yu Gothic Medium", "Yu Gothic", "Meiryo", sans-serif;}
.unicode-table th {text-align: left;background: #fdfbf2;padding: 4px 8px;width: 160px;border: 1px solid #ccc;}
.unicode-table td {padding: 4px 8px;border: 1px solid #ccc;}
.legend-item::before {content: "■";margin-right: 8px;font-size: 18px;}
.cat-L::before {color: #4dff4d;}
.cat-M::before {color: #b84dff;}
.cat-N::before {color: #ffd24d;}
.cat-S::before {color: #4d79ff;}
.cat-P::before {color: #ff4da6;}
.cat-Z::before {color: #999999;}
.cat-C::before {color: #666666;}
.plane-table {width: 100%;max-width: 500px;border-collapse: collapse;font-family: sans-serif;font-size: 14px;text-align: center;}
.plane-table td {border: 1px solid #ddd;padding: 10px;background-color: #f8f8f8;}
.plane-table td.p-bmp {background-color: #E7A7C7;}
.plane-table td.p-smp {background-color: #A7C7E7;}
.plane-table td.empty {background-color: transparent;border: none;}
.plane-table td:not(.empty):hover {filter: brightness(0.95);cursor: default;}
button {padding: 4px 12px;font-size: 16px;cursor: pointer;border-radius: 5px;margin: 10px 0 0 0;transition: all 0.2s;min-width: 160px;box-shadow: 0 2px 4px rgba(0,0,0,0.2);border: 1px solid #ccc;background-color: #3367d1;color: #fff;}
button:hover {background-color: #555;}
button.active {background-color: #d32f2f;}
.plane-title {padding: 10px 0;margin: 10px 0;font-size: 20px;font-weight: bold;}
.char-container {padding: 15px;display: none;line-height: 1.2;word-break: break-all;margin-bottom: 30px;box-shadow: 0 2px 10px rgba(0,0,0,0.1);border-radius: 0 0 5px 5px;}
.char-container.active-box {display: block;margin-bottom: 30px;}
.char-container.has-content {padding: 15px;}
.range-label {display: block;width: 100%;font-weight: bold;border-bottom: 1px solid #e0e0e0;margin: 20px 0 10px 0;padding-bottom: 8px;font-size: 16px;color: #000ddd;}
.range-label:first-child {margin-top: 0;}
.ch {display: inline-block;width: 30px;height: 36px;line-height: 36px;text-align: center;vertical-align: middle;font-size: 18px;border-bottom: 1px solid #f5f5f5;font-family: "serif","sans-serif";}
.ch:hover {background-color: #ffeb3b;}
.guide-tooltip {position: absolute;pointer-events: none;z-index: 20;background: #fafafa;color: #000;padding: 4px 8px;border-radius: 4px;font-size: 14px;white-space: nowrap;border: 1px solid #999;box-shadow: 2px 2px 5px rgba(0,0,0,0.1);transition: opacity 0.3s;display: none;}
.close-btn-sticky {position: -webkit-sticky;position: sticky;top: 10px;z-index: 1000;display: block;background: #d32f2f;color: white;transition: background-color 0.2s, box-shadow 0.2s;}
.close-btn-sticky.active {box-shadow: 0 4px 10px rgba(0,0,0,0.3);}
#content {overflow: visible;}

td.cent {font-size:14px;}
td.cent,
td.num code {
  white-space: break-spaces;
  word-break: break-all;
}
.unicode-table {
    border-collapse: collapse;
    width: 100%;
    margin-top: 10px;
    font-size: 15px;
}

.unicode-table th {
    background: #fdfbf2;
    text-align: left;
    padding: 4px 8px;
    width: 160px;
    border-bottom: 1px solid #ccc;
}

.unicode-table td {
    padding: 4px 8px;
    border-bottom: 1px solid #ccc;
}
.big-ch {font-size: 28px; font-family: sans-serif;}
#char-popup {
    position: absolute;
    display: none;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    z-index: 10000;
    border-radius: 6px;
    line-height: 1.4;
    min-width: 150px;
	cursor: default; 
    pointer-events: auto; /* クリックを無視しないようにする */
}
#char-popup div {
    cursor: text; /* テキスト選択できることをユーザーに示す */
}
/* 矢印（吹き出し風にする場合） */
#char-popup::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 20px;
    border: 8px solid transparent;
    border-top-color: #ccc;
}


/* ポップアップ内のテーブル幅を固定 */
#char-popup .unicode-table {
    width: 380px; 
    margin-top: 0;
    border: none;
}
.popup-inner {user-select: text; position: relative;}
.close-btn {position:absolute; right:8px; top:8px;font-size:18px; font-weight:bold; color:#888;width: 28px;height: 28px;}
#char-popup .close-btn:hover {
    color: #333;
    cursor: pointer;
}
@media screen and (max-width:767px) {
.canvas-outer {width:100%;flex-direction: row;}
canvas[id^="plane"] {width:100%;height:auto;}
canvas[id^="scale"] {display:none;}
[id^="info"] {width:100%;height: 180px;}
button {margin: 10px 0 0 10px;}
.plane-title {margin: 10px 0 10px 10px;}
.plane-wrapper {width: 100%;height: auto;flex: 1;}
    /* 1. ポップアップ全体の幅を画面に合わせる */
    #char-popup .unicode-table {
        width: calc(100vw - 40px); /* 左右に20pxずつの余白を確保 */
        max-width: 350px;         /* 大きすぎるスマホでも間延びしないように制限 */
        font-size: 14px;
    }

    /* 2. テーブルの各項目幅を再調整 */
    .unicode-table th {
        width: 100px; /* thを少し狭くしてtdの領域を広げる */
        font-size: 13px;
        padding: 6px 8px; /* タップターゲットを意識して少し広めに */
    }

    .unicode-table td {
        padding: 6px 8px;
    }

    /* 3. 閉じるボタンを押しやすく（指サイズに） */
    .close-btn {
        width: 44px;  /* タップ領域を確保 */
        height: 44px;
        line-height: 44px;
        text-align: center;
        right: 0;
        top: 0;
        font-size: 24px;
    }

    /* 4. 吹き出しの矢印はスマホでは位置がズレやすいため非表示にするのが一般的 */
    #char-popup::before {
        display: none;
    }

    /* 5. ポップアップ本体の角丸や影をスマホ向けに強調 */
    #char-popup {
        border-radius: 8px;
        box-shadow: 0 8px 30px rgba(0,0,0,0.4);
    }
}