body {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background-color: #f4f4f4;
    margin: 0;
}

.container {
    background-color: white;
    padding: 24px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 960px;
    width: 92%;
    border: 2px dashed transparent;
    transition: border-color 0.3s, background-color 0.3s;
}

.container.dragover {
    border-color: #007aff;
    background-color: #f0f8ff;
}

h1 {
    text-align: center;
    margin-top: 8px;
    font-size: 1.4em;
}

.navigation-links {
    margin-bottom: 8px;
    font-size: 0.9em;
}

.navigation-links a { color: #007aff; text-decoration: none; }
.navigation-links a:hover { text-decoration: underline; }

details summary { cursor: pointer; font-weight: bold; }
details ol { padding-left: 1.5em; line-height: 1.7; }

.upload-area {
    border: 2px dashed #bbb;
    border-radius: 8px;
    padding: 24px;
    text-align: center;
    margin: 16px 0;
    background: #fafafa;
}

.upload-area p { margin: 8px 0 0; color: #666; font-size: 0.9em; }

/* ===== エディタ ===== */
.editor {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 8px;
    align-items: flex-start;
}

.stage-col { flex: 1 1 320px; min-width: 260px; }

/* 透過チェッカー背景（元画像 / プレビュー共通） */
.checker {
    background-image:
            linear-gradient(45deg, #ddd 25%, transparent 25%),
            linear-gradient(-45deg, #ddd 25%, transparent 25%),
            linear-gradient(45deg, transparent 75%, #ddd 75%),
            linear-gradient(-45deg, transparent 75%, #ddd 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

.stage {
    position: relative;
    display: block;
    width: 100%;
    line-height: 0;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e3e3e3;
}

.stage img {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
}

#overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: grab;
}

#overlay.dragging { cursor: grabbing; }

.hint {
    font-size: 0.85em;
    color: #666;
    margin: 10px 2px 0;
    line-height: 1.6;
}

/* ===== サイド ===== */
.side { flex: 0 1 300px; min-width: 240px; display: flex; flex-direction: column; gap: 16px; }

.panel {
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    padding: 12px 14px;
    background: #fbfbfb;
}

.panel-label { display: block; font-size: 0.8em; font-weight: bold; color: #555; margin-bottom: 8px; }

.row { display: flex; align-items: center; gap: 8px; font-size: 0.9em; margin: 6px 0; }
.row select { flex: 1; padding: 6px; border-radius: 6px; border: 1px solid #ccc; }

.preview-box {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e3e3e3;
}

.preview-box canvas { max-width: 100%; max-height: 100%; }

.actions { display: flex; gap: 10px; }

button {
    padding: 8px 14px;
    cursor: pointer;
    border: none;
    border-radius: 6px;
    background-color: #007aff;
    color: white;
    font-size: 0.9em;
    transition: background-color 0.2s, filter 0.2s;
}

button:hover:not(:disabled) { background-color: #005bbf; }
button:disabled { background-color: #ccc; cursor: not-allowed; }

button.primary { flex: 1; background-color: #34c759; }
button.primary:hover:not(:disabled) { background-color: #28a745; }

button.ghost-btn {
    background: transparent;
    color: #007aff;
    border: 1px solid #cfd8e6;
}
button.ghost-btn:hover:not(:disabled) { background: #eef4ff; }

.note { font-size: 0.82em; color: #666; line-height: 1.6; margin: 2px; }
.note a { color: #007aff; }

/* ===== theme (skin) overrides — token 駆動・常時適用（var は /css/theme.css 由来） ===== */
body { background-color: var(--color-bg-base); color: var(--color-fg-primary); }
.container { background-color: var(--color-bg-surface); box-shadow: 0 0 12px rgba(0, 0, 0, 0.4); }
.container.dragover { background-color: var(--color-bg-elevated); }
.navigation-links a, .note a, button.ghost-btn { color: var(--color-accent); }
.upload-area { background: var(--color-bg-elevated); border-color: var(--color-border-base); }
.upload-area p, .hint, .note { color: var(--color-fg-muted); }
.stage, .preview-box, .panel { border-color: var(--color-border-subtle); }
.panel { background: var(--color-bg-elevated); }
.panel-label { color: var(--color-fg-muted); }
.row select { background: var(--color-bg-surface); color: var(--color-fg-primary); border-color: var(--color-border-base); }
button { background-color: var(--color-accent); color: var(--color-accent-fg); }
button:hover:not(:disabled) { filter: brightness(1.12); }
button.ghost-btn { background: transparent; border-color: var(--color-border-base); }
button.ghost-btn:hover:not(:disabled) { background: var(--color-bg-surface); }
.checker {
    background-image:
            linear-gradient(45deg, var(--color-border-subtle) 25%, transparent 25%),
            linear-gradient(-45deg, var(--color-border-subtle) 25%, transparent 25%),
            linear-gradient(45deg, transparent 75%, var(--color-border-subtle) 75%),
            linear-gradient(-45deg, transparent 75%, var(--color-border-subtle) 75%);
}