/* 絵文字だけ Noto Emoji (単色) で描く。各フォント指定の末尾に "NotoEmojiMono" を足して使う */
@font-face { font-family: "NotoEmojiMono"; src: url("../fonts/NotoEmoji.ttf") format("truetype"); font-weight: 300 700; }

        /* Custom Styles */
        body {
            font-family: 'Inter', sans-serif;
        }

        .custom-scrollbar::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        .custom-scrollbar::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 4px;
        }

        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        .spinner {
            border-top-color: #3498db;
            animation: spin 1s ease-in-out infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        #saveProgressCircle {
            transition: stroke-dashoffset 0.3s ease;
            transform: rotate(-90deg);
            transform-origin: 50% 50%;
        }

        #mainCanvas.adding-number {
            cursor: crosshair;
        }

        #mainCanvas.removing-number {
            cursor: not-allowed;
        }

        #toast {
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.3s, visibility 0.3s;
        }

        #toast.show {
            visibility: visible;
            opacity: 1;
        }

        .time-action-popup {
            display: none;
        }

        .time-action-popup.visible {
            display: flex;
        }

        #thumbnail-sidebar {
            overflow-y: auto;
        }

        #thumbnail-sidebar.drag-over {
            border: 3px dashed #3b82f6;
            background-color: #eff6ff;
        }

        .thumbnail-item {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
            padding: 4px 2px;
            border: 3px solid transparent;
            border-radius: 4px;
            cursor: pointer;
            transition: border-color 0.2s, background-color 0.2s;
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .thumbnail-item:hover {
            background-color: #e2e8f0;
        }

        .thumbnail-item.selected {
            background-color: #bee3f8;
        }

        .thumbnail-item.active {
            border-color: #3b82f6;
            background-color: #dbeafe;
        }

        .thumbnail-item.dragging {
            opacity: 0.4;
        }

        .thumbnail-page-number {
            width: 28px;
            flex-shrink: 0;
            text-align: center;
            font-size: 12px;
            font-weight: 600;
            color: #4a5568;
        }

        .thumbnail-content {
            flex-grow: 1;
            position: relative;
            height: 65px;
            background-color: #ccc;
            border-radius: 4px;
            overflow: hidden;
        }

        .thumbnail-content img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .thumbnail-file-name {
            position: absolute;
            bottom: 2px;
            left: 2px;
            right: 2px;
            background-color: rgba(0, 0, 0, 0.6);
            color: white;
            padding: 1px 4px;
            font-size: 10px;
            border-radius: 3px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: center;
        }

        #canvasContainer {
            flex-grow: 1;
            flex-shrink: 1;
            min-width: 640px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #e5e7eb;
            padding: 1rem;
            overflow: hidden;
            transition: background-color 0.2s;
        }

        #analysisModal th {
            cursor: pointer;
            user-select: none;
        }

        #analysisModal th .sort-indicator {
            display: inline-block;
            margin-left: 5px;
            opacity: 0.3;
        }

        #analysisModal th.sorted .sort-indicator {
            opacity: 1;
        }

        #analysisTableBody {
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
        }

        .toggle-checkbox:checked {
            right: 0;
            border-color: #48bb78;
        }

        .toggle-checkbox:checked+.toggle-label {
            background-color: #48bb78;
        }

        #circleTextContent {
            resize: none;
        }

        #manualShotListDetails>summary {
            list-style: none;
        }

        #manualShotListDetails>summary::-webkit-details-marker {
            display: none;
        }

        #dropOverlay .drop-zone-highlight {
            opacity: 1;
            transform: scale(1.02);
            box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
        }

        #dropOverlay .drop-zone-dimmed {
            opacity: 0.5;
            transform: scale(0.98);
            box-shadow: none;
        }

        /* --- NEW: Pie Menu Styles --- */
        /* --- NEW: Pie Menu Styles (V2 / 10rem) --- */
        #pieMenuContainer {
            /* 10rem (160px) に変更 */
            width: 10rem;
            height: 10rem;
            transform-origin: center center;
            transform: translate(-50%, -50%);
            /* 高速でフェードイン/アウトするように変更 */
            transition: opacity 0.05s ease-in-out;
            pointer-events: none;
            /* JSで制御するためデフォルトは無効 */
            opacity: 0;
            /* hiddenクラスのデフォルト */
        }

        #pieMenuContainer.visible {
            opacity: 1;
            pointer-events: auto;
            /* 表示中のみ操作可能に */
        }

        #pieMenuContainer.hidden {
            opacity: 0;
            pointer-events: none;
        }

        #pieCenter {
            position: absolute;
            /* 中央の円も 2.5rem -> 3rem に拡大 */
            width: 3rem;
            height: 3rem;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 9999px;
            /* rounded-full */
            background-color: #9ca3af;
            /* bg-gray-400 */
            opacity: 0.5;
            transition: transform 0.1s ease-out;
        }

        /* メニューがアクティブな時に中央が少し縮むアニメーション */
        #pieMenuContainer.active #pieCenter {
            transform: translate(-50%, -50%) scale(0.8);
        }

        .pie-sector {
            position: absolute;
            /* 四角 -> 円形に変更 */
            width: 3rem;
            /* 48px */
            height: 3rem;
            border-radius: 9999px;
            /* rounded-full */

            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            /* 18px */
            font-weight: 600;
            color: #374151;
            /* gray-700 */

            /* 背景を半透明の白（すりガラス風）に変更 */
            background-color: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(4px);

            /* 枠線 -> 影 に変更 */
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            /* shadow-md */

            transition: all 0.1s ease-out;
            transform: translate(-50%, -50%);
            /* 中心を基準にする */
            z-index: 60;
        }

        .pie-sector.highlighted {
            background-color: #3b82f6;
            /* bg-blue-500 */
            color: white;
            /* 少し大きく、影も濃くする */
            transform: translate(-50%, -50%) scale(1.15);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            /* shadow-lg */
        }

        /* 8-sector layout (type 'a') - 10rem container (調整後) */
        #pieMenuContainer[data-type="a"] .pie-sector[data-value="8"] {
            top: 8%;
            left: 50%;
        }

        /* 0 (上) */
        #pieMenuContainer[data-type="a"] .pie-sector[data-value="1"] {
            top: 20%;
            left: 80%;
        }

        /* 1 (右上) */
        #pieMenuContainer[data-type="a"] .pie-sector[data-value="2"] {
            top: 50%;
            left: 92%;
        }

        /* 2 (右) */
        #pieMenuContainer[data-type="a"] .pie-sector[data-value="3"] {
            top: 80%;
            left: 80%;
        }

        /* 3 (右下) */
        #pieMenuContainer[data-type="a"] .pie-sector[data-value="4"] {
            top: 92%;
            left: 50%;
        }

        /* 4 (下) */
        #pieMenuContainer[data-type="a"] .pie-sector[data-value="5"] {
            top: 80%;
            left: 20%;
        }

        /* 5 (左下) */
        #pieMenuContainer[data-type="a"] .pie-sector[data-value="6"] {
            top: 50%;
            left: 8%;
        }

        /* 6 (左) */
        #pieMenuContainer[data-type="a"] .pie-sector[data-value="7"] {
            top: 20%;
            left: 20%;
        }

        /* 7 (左上) */

        /* 4-sector layout (type 'b') - 10rem container (調整後) */
        #pieMenuContainer[data-type="b"] .pie-sector[data-value="0"] {
            top: 8%;
            left: 50%;
        }

        /* 0 (上) */
        #pieMenuContainer[data-type="b"] .pie-sector[data-value="6"] {
            top: 50%;
            left: 92%;
        }

        /* 6 (右) */
        #pieMenuContainer[data-type="b"] .pie-sector[data-value="12"] {
            top: 92%;
            left: 50%;
        }

        /* 12 (下) */
        #pieMenuContainer[data-type="b"] .pie-sector[data-value="18"] {
            top: 50%;
            left: 8%;
        }

        /* 18 (左) */
        /* --- END: Pie Menu Styles (V2 / 10rem) --- */

        /* --- iPad/タッチ対応: 描画・長押し操作中にブラウザのスクロール/ズームを抑止 --- */
        #mainCanvas {
            touch-action: none;
        }
        #timeInputsContainer input[data-type="a"],
        #timeInputsContainer input[data-type="b"] {
            touch-action: none;
        }
        /* .clip再リンク: 削除セルの印 */
        .thumbnail-item.clip-removed { position: relative; }
        .thumbnail-item.clip-removed::after {
            content: ''; position: absolute; inset: 0; pointer-events: none;
            box-shadow: inset 0 0 0 2px rgba(220, 38, 38, 0.8);
            background: rgba(220, 38, 38, 0.08); border-radius: inherit;
        }
        #clipLinkBar.clip-link-missing { background: #fef2f2; border-bottom-color: #fecaca; }
        #clipLinkBar.clip-link-missing #clipLinkName { color: #b91c1c; }
        .clip-removed-badge {
            position: absolute; top: 4px; right: 4px; z-index: 5;
            background: rgba(220, 38, 38, 0.92); color: #fff;
            font-size: 10px; line-height: 1; font-weight: 700;
            padding: 2px 5px; border-radius: 4px; pointer-events: none;
            display: flex; align-items: center; gap: 3px;
        }

/* 段落下げは行頭のタブ。1つで1文字分 (描画側と同じ) */
#togaki_cellText, #textContent { tab-size: 1em; }
#togaki_cellText:empty::before, #textContent:empty::before { content: attr(data-placeholder); color: #9ca3af; pointer-events: none; }
#togaki_richSize { -moz-appearance: textfield; }
#togaki_richSize::-webkit-inner-spin-button, #togaki_richSize::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* キャンバスで掴んだ要素の設定欄を知らせる (revealPanelFor) */
@keyframes panel-reveal {
    0%, 50% { box-shadow: inset 0 0 0 2px rgb(249, 115, 22); background-color: rgb(255, 237, 213); }
    100% { box-shadow: inset 0 0 0 2px rgba(249, 115, 22, 0); }
}
/* 外側の影はパネルのスクロール枠で切れるので内側に引く */
.panel-reveal { animation: panel-reveal 1.8s ease-out; }