/* ===== Theme base ===== */
html,
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark {
    background-color: #0a0a0a;
    color: #fafafa;
}

body.light {
    background-color: #fafafa;
    color: #111;
}

* {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.howto li {
    text-indent: -1.4em;
    padding-left: 1.4em;
}

/* ===== Subtle animations ===== */
.fade-in {
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 180ms ease, transform 220ms ease;
}

.fade-in.show {
    opacity: 1;
    transform: scale(1);
}

/* ===== Hover enlarge “poyon” ===== */
.thumb {
    transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
        filter 200ms ease, box-shadow 200ms ease;
    transform-origin: center center;
    will-change: transform, filter;
}

.thumb:hover,
.thumb:focus-visible {
    transform: scale(1.8) translateZ(0);
    z-index: 120;
}

.thumb img {
    transition: inherit;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.thumb:hover img,
.thumb:focus-visible img {
    filter: brightness(1.08) contrast(1.05);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6);
}

.thumb .meta {
    transition: transform 180ms ease, opacity 180ms ease;
}

.thumb:hover .meta,
.thumb:focus-visible .meta {
    transform: translateY(-4px) scale(1.05);
    opacity: 1;
}

/* Thin scrollbar */
.thin-scroll::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.thin-scroll::-webkit-scrollbar-thumb {
    background: #3f3f46;
    border-radius: 8px;
}

.thin-scroll::-webkit-scrollbar-track {
    background: #18181b;
}

/* Theme toggle switch */
.toggle {
    appearance: none;
    width: 48px;
    height: 24px;
    background: #ccc;
    border-radius: 9999px;
    position: relative;
    outline: none;
    cursor: pointer;
    transition: background 0.3s;
}

.toggle::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    background: white;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.toggle:checked {
    background: #10b981;
}

.toggle:checked::before {
    transform: translateX(24px);
    background: #fff;
}

/* ==== Pannable canvas (hand tool) ==== */
.pannable {
    cursor: grab;
}

.pannable.dragging {
    cursor: grabbing;
}

/* トランスフォームを頻用するレイヤにヒント */
.canvas-layer {
    will-change: transform;
}

/* 追加：ドラッグ中は選択不可 */
.no-select {
    user-select: none;
}

/* 既存の .pannable はそのまま。親に .dragging を足してもOK */
.dragging {
    cursor: grabbing !important;
}

.pill,
.cv-badge {
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}
.pill {
    height: 18px;
}

.canvas-layer {
    right: auto;
    bottom: auto;
}