:root {
    --bg-dark: #121826; --card-bg-dark: #1F2937; --border-dark: #374151;
    --text-dark: #9CA3AF; --text-bright-dark: #F3F4F6;
    --bg-light: #F9FAFB; --card-bg-light: #FFFFFF; --border-light: #D1D5DB;
    --text-light: #1F2937;
    --accent-human-dark: #60A5FA; --accent-human-light: #3B82F6;
    --accent-monster-dark: #A78BFA; --accent-monster-light: #7C3AED;
    --accent-neutral-dark: #6B7280; --accent-neutral-light: #6B7280;
    --danger-color: #EF4444;
    --success-color: #22C55E; --error-color: #EF4444; --info-color: #3B82F6;
}
*, *::before, *::after { box-sizing: border-box; }

/* 基本フォントをUDゴシックに設定し、可読性を最大化 */
body { 
    font-family: 'BIZ UDPGothic', 'Noto Sans JP', sans-serif; 
    margin: 0; 
    transition: background-color 0.3s, color 0.3s; 
}

body.dark-mode { background-color: var(--bg-dark); color: var(--text-dark); }
body:not(.dark-mode) { background-color: var(--bg-light); color: var(--text-light); }
.site-header { position: relative; display: flex; flex-direction: column; align-items: stretch; padding: 1rem 2rem; }
.header-main { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
body.dark-mode .site-header { border-bottom: 4px solid var(--border-dark); }
body:not(.dark-mode) .site-header { border-bottom: 4px solid var(--border-light); }
.view-mode-banner { text-align: center; padding: 0.5rem; font-weight: bold; color: white; }
body.dark-mode .view-mode-banner { background-color: var(--accent-neutral-dark); }
body:not(.dark-mode) .view-mode-banner { background-color: var(--accent-neutral-light); }
.main-container { display: flex; padding: 2rem; gap: 2rem; max-width: 1600px; margin: 0 auto; }

.left-column, .center-column { width: 37.5%; display: flex; flex-direction: column; gap: 2rem; }
.right-column { width: 25%; display: flex; flex-direction: column; gap: 2rem; }

.card { border-radius: 8px; padding: 1.5rem; transition: padding 0.3s ease; }
body.dark-mode .card { background-color: var(--card-bg-dark); border: 1px solid var(--border-dark); }
body:not(.dark-mode) .card { background-color: var(--card-bg-light); border: 1px solid var(--border-light); box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06); }
.card h2 { margin-top: 0; padding-bottom: 0.5rem; font-size: 1.3rem; }
body.dark-mode .card h2 { color: var(--text-bright-dark); }
body:not(.dark-mode) .card h2 { color: var(--text-light); }
.card-small { padding: 1rem; }
label { display: block; margin-bottom: 0.5rem; font-size: 0.9rem; font-weight: bold; }
body.dark-mode label { color: var(--text-bright-dark); }
body:not(.dark-mode) label { color: var(--text-light); }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- カラムごとのアクセントカラー適用 --- */
body.dark-mode .card-human h2 { border-bottom: 2px solid var(--accent-human-dark); }
body:not(.dark-mode) .card-human h2 { border-bottom: 2px solid var(--accent-human-light); }
body.dark-mode .card-monster h2 { border-bottom: 2px solid var(--accent-monster-dark); }
body:not(.dark-mode) .card-monster h2 { border-bottom: 2px solid var(--accent-monster-light); }
body.dark-mode .card-neutral h2 { border-bottom: 2px solid var(--accent-neutral-dark); }
body:not(.dark-mode) .card-neutral h2 { border-bottom: 2px solid var(--accent-neutral-light); }

/* --- INPUT STYLES --- */
input[type="text"], input[type="number"], select, textarea {
    width: 100%; padding: 0.75rem; border-radius: 4px; border: 1px solid;
    font-family: inherit; font-size: 0.9rem; transition: border-color 0.2s, box-shadow 0.2s, padding 0.3s ease;
}
body.dark-mode input, body.dark-mode select, body.dark-mode textarea { background-color: var(--bg-dark); color: var(--text-bright-dark); border-color: var(--border-dark); }
body:not(.dark-mode) input, body:not(.dark-mode) select, body:not(.dark-mode) textarea { background-color: #fff; border-color: var(--border-light); color: var(--text-light); }

.input-caption {
    font-size: 0.75rem;
    opacity: 0.8;
    margin-top: 0.5rem;
    margin-bottom: 0;
}

#char-name, #monster-name { border-width: 2px; }
body.dark-mode .card-human #char-name { border-color: var(--accent-human-dark); }
body:not(.dark-mode) .card-human #char-name { border-color: var(--accent-human-light); }
body.dark-mode .card-monster #monster-name { border-color: var(--accent-monster-dark); }
body:not(.dark-mode) .card-monster #monster-name { border-color: var(--accent-monster-light); }

input:focus, select:focus, textarea:focus { outline: none; }

.form-group { position: relative; margin-bottom: 1.5rem; }
.form-group:last-child { margin-bottom: 0; }
.dynamic-fields-container { display: flex; flex-direction: column; gap: 1rem; }
button { border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.2s, color 0.2s, border-color 0.2s; font-weight: bold; }
.user-controls { display: flex; align-items: center; gap: 1rem; }
.header-switches { flex-shrink: 0; display: flex; gap: 1.5rem; align-items: center; }
.login-button { background-color: transparent; padding: 0.4rem 1rem; font-size: 0.9rem; }
body.dark-mode .login-button { border: 1px solid var(--accent-human-dark); color: var(--accent-human-dark); }
body:not(.dark-mode) .login-button { border: 1px solid var(--accent-human-light); color: var(--accent-human-light); }
body.dark-mode .login-button:hover { background-color: var(--accent-human-dark); color: var(--bg-dark); }
body:not(.dark-mode) .login-button:hover { background-color: var(--accent-human-light); color: white; }

.btn-small { padding: 0.8rem; font-size: 0.9rem; width: 100%; }
.btn-small:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-small:not(.btn-secondary) { background-color: var(--accent-neutral-dark); color: var(--text-bright-dark); }
body:not(.dark-mode) .btn-small:not(.btn-secondary) { background-color: var(--text-light); color: var(--bg-light); }
.btn-small:not(.btn-secondary):hover { background-color: #4B5563; }

#save-button { background-color: var(--accent-human-dark); color: white; }
body:not(.dark-mode) #save-button { background-color: var(--accent-human-light); }
#save-button:hover { filter: brightness(1.1); }
#save-button:disabled { background-color: var(--accent-neutral-dark); filter: brightness(1); }
body:not(.dark-mode) #save-button:disabled { background-color: var(--accent-neutral-light); }


.btn-secondary { background-color: transparent !important; border: 1px solid; }
body.dark-mode .btn-secondary { border-color: var(--border-dark); color: var(--text-dark); }
body:not(.dark-mode) .btn-secondary { border-color: var(--border-light); color: var(--text-light); }
body:dark-mode .btn-secondary:hover { background-color: var(--border-dark) !important; color: var(--text-bright-dark) !important; }
body:not(.dark-mode) .btn-secondary:hover { background-color: var(--border-light) !important; color: var(--text-light) !important; }

.btn-icon { background-color: transparent; border: 1px solid; }
body.dark-mode .btn-icon { border-color: var(--border-dark); color: var(--text-dark); }
body:not(.dark-mode) .btn-icon { border-color: var(--border-light); color: var(--text-light); }
body.dark-mode .btn-icon:hover { background-color: var(--border-dark); color: var(--text-bright-dark); }
body:not(.dark-mode) .btn-icon:hover { background-color: var(--border-light); color: var(--text-light); }

#image-reflect-button { background-color: var(--accent-neutral-dark) !important; color: white !important; border: none; }
body:not(.dark-mode) #image-reflect-button { background-color: var(--accent-neutral-light) !important; }

.title-container { display: flex; align-items: baseline; gap: 1rem; flex-grow: 1; }
.site-header h1 { font-size: 1.2rem; margin: 0; }
body.dark-mode .site-header h1 { color: var(--text-bright-dark); }
body:not(.dark-mode) .site-header h1 { color: var(--text-light); }
.howto-link { 
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--text-dark);
    text-decoration: none;
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--border-dark);
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
}
.howto-link:hover { text-decoration: none; background-color: var(--border-dark); color: var(--text-bright-dark); }
body:not(.dark-mode) .howto-link { color: var(--text-light); border-color: var(--border-light); }
body:not(.dark-mode) .howto-link:hover { background-color: var(--border-light); }


.image-upload-area { position: relative; border: 2px dashed var(--border-dark); height: 400px; display: flex; justify-content: center; align-items: center; border-radius: 4px; margin-bottom: 1rem; overflow: hidden; }
body:not(.dark-mode) .image-upload-area { border-color: var(--border-light); }
#character-image { width: 100%; height: 100%; object-fit: contain; position: absolute; display: none; }
#image-placeholder { color: var(--text-dark); font-weight: bold; }
body:not(.dark-mode) #image-placeholder { color: var(--text-light); opacity: 0.7; }
.card-header-flex { display: flex; justify-content: space-between; align-items: center; }
.card-header-flex h2 { border-bottom: none; flex-grow: 1; }
.feature-counter { font-size: 0.9rem; font-weight: bold; margin-left: 1rem; }
body:not(.dark-mode) .feature-counter { color: var(--text-light); }

.button-stack { display: flex; flex-direction: column; gap: 0.75rem; }
.image-url-container { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.image-url-container input { flex-grow: 1; }
.image-url-container button { flex-shrink: 0; font-size: 0.8rem; padding: 0.6rem; white-space: nowrap; }
.save-status { font-size: 0.8rem; text-align: center; margin: -0.25rem 0; height: 1.2em; }
body:not(.dark-mode) .save-status { color: var(--text-light); }
.modal-hidden { display: none !important; pointer-events: none; }
.modal-overlay { position: fixed; z-index: 10; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; }
.modal-content { padding: 20px; border: 1px solid var(--border-dark); width: 90%; max-width: 600px; border-radius: 8px; position: relative; }
body.dark-mode .modal-content { background-color: var(--card-bg-dark); }
body:not(.dark-mode) .modal-content { background-color: var(--card-bg-light); }
.modal-close-button { position: absolute; top: 10px; right: 20px; font-size: 28px; font-weight: bold; }
body:dark-mode .modal-close-button { color: var(--text-dark); }
body:not(.dark-mode) .modal-close-button { color: var(--text-light); }
.modal-close-button:hover, .modal-close-button:focus { text-decoration: none; cursor: pointer; }
body:not(.dark-mode) .modal-close-button:hover { color: var(--text-dark); }
#output-textarea { height: 200px; }
.theme-switch-container, .compact-mode-switch-container { display: flex; align-items: center; gap: 0.5rem; }
.theme-icon { font-size: 1.2rem; line-height: 1; }
.switch-label { font-size: 0.8rem; font-weight: bold; }
.theme-switch { position: relative; display: inline-block; width: 50px; height: 26px; }
.theme-switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 26px; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--accent-human-dark); }
body:not(.dark-mode) input:checked + .slider { background-color: var(--accent-human-light); }
input:checked + .slider:before { transform: translateX(24px); }
#char-list-modal .modal-content { max-height: 80vh; overflow-y: auto; }
#char-list-container { list-style: none; padding: 0; }
#char-list-container li { padding: 1rem; border-bottom: 1px solid var(--border-dark); cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
body:not(.dark-mode) #char-list-container li { border-color: var(--border-light); }
#char-list-container li:hover { background-color: var(--border-dark); }
body:not(.dark-mode) #char-list-container li:hover { background-color: var(--border-light); }
#char-list-container .char-list-buttons { display: flex; gap: 0.5rem; }
.duplicate-char-button, .delete-char-button { padding: 0.3rem 0.6rem; font-size: 0.8rem; color: white; }
.duplicate-char-button { background-color: var(--accent-neutral-dark); }
.delete-char-button { background-color: var(--danger-color); }

#toast-container { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 1000; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.toast-notification { color: white; padding: 1rem 2rem; border-radius: 8px; opacity: 0; transition: opacity 0.5s, transform 0.5s; transform: translateY(20px); pointer-events: none; font-weight: bold; }
.toast-notification.show { opacity: 1; transform: translateY(0); }
.toast-notification.success { background-color: var(--success-color); }
.toast-notification.error { background-color: var(--error-color); }
.toast-notification.info { background-color: var(--info-color); }

#confirm-modal .modal-content { max-width: 400px; }
#confirm-modal p { margin-bottom: 1.5rem; }
.confirm-buttons { display: flex; gap: 1rem; justify-content: flex-end; }
#confirm-ok-button { background-color: var(--danger-color); }
.confirm-buttons .btn-small { width: auto; padding: 0.6rem 1.5rem; }

.accordion-header { display: flex; justify-content: space-between; align-items: center; }
.accordion-header.no-accordion { cursor: default; }
.right-column .card-small .accordion-header { display: none; }
.right-column .card-small .accordion-content { margin-top: 0; }
.accordion-header h2 { border-bottom: none; margin-bottom: 0; }
.card > .accordion-header:first-child + .accordion-content { margin-top: 1.5rem; }
.card > .card-header-flex.accordion-header + .accordion-content { margin-top: 1rem; }
.accordion-header.active .accordion-icon { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); }
.accordion-content { overflow: hidden; transition: max-height 0.3s ease-out; }
.accordion-icon { display: none; width: 20px; height: 20px; transition: transform 0.3s ease; border-style: solid; border-width: 0 3px 3px 0; border-color: var(--text-dark); padding: 3px; transform: rotate(45deg); -webkit-transform: rotate(45deg); }
body:not(.dark-mode) .accordion-icon { border-color: var(--text-light); }

/* --- COMPACT MODE STYLES --- */
body.compact-mode .card { padding: 0.8rem 1rem; }
body.compact-mode .card-small { padding: 0.8rem; }
body.compact-mode .card h2 { font-size: 1.1rem; padding-bottom: 0.4rem; }
body.compact-mode input[type="text"], body.compact-mode input[type="number"], body.compact-mode select, body.compact-mode textarea { padding: 0.5rem; font-size: 0.85rem; }
body.compact-mode label { margin-bottom: 0.3rem; font-size: 0.8rem; }
body.compact-mode .main-container { gap: 1rem; padding: 1rem; }

/* --- FEATURE & CHECKPOINT STYLES --- */
.feature-grid { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.8rem; }
.feature-header { grid-column: 2 / 3; font-size: 0.8rem; font-weight: bold; text-align: center; }
.feature-item { grid-column: 1 / 3; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.5rem; }
.feature-item input[type="text"] { flex-grow: 1; }
.feature-item input[type="checkbox"] { display: none; }
.feature-item label { cursor: pointer; width: 22px; height: 22px; border: 2px solid var(--border-dark); display: block; border-radius: 4px; position: relative; flex-shrink: 0; margin-bottom: 0; transition: all 0.2s; }
body:not(.dark-mode) .feature-item label { border-color: var(--border-light); }
.feature-item input[type="checkbox"]:checked + label { background-color: var(--accent-human-dark); border-color: var(--accent-human-dark); }
body:not(.dark-mode) .feature-item input[type="checkbox"]:checked + label { background-color: var(--accent-human-light); border-color: var(--accent-human-light); }
.feature-item input.monster-feature-check:checked + label { background-color: var(--accent-monster-dark); border-color: var(--accent-monster-dark); }
body:not(.dark-mode) .feature-item input.monster-feature-check:checked + label { background-color: var(--accent-monster-light); border-color: var(--accent-monster-light); }
.card-neutral .feature-item input[type="checkbox"]:checked + label { background-color: var(--accent-neutral-dark); border-color: var(--accent-neutral-dark); }
body:not(.dark-mode) .card-neutral .feature-item input[type="checkbox"]:checked + label { background-color: var(--accent-neutral-light); border-color: var(--accent-neutral-light); }
.feature-item label:after { content: ''; position: absolute; left: 6px; top: 1px; width: 5px; height: 11px; border-style: solid; border-color: white; border-width: 0 3px 3px 0; transform: rotate(45deg); opacity: 0; transition: opacity 0.2s; }
.feature-item input[type="checkbox"]:checked + label:after { opacity: 1; }
body:not(.dark-mode) .feature-item input[type="checkbox"]:checked + label:after { border-color: #333; }

@keyframes checkpoint-glow { 0%, 100% { box-shadow: 0 0 8px var(--accent-neutral-light); } 50% { box-shadow: 0 0 16px var(--accent-neutral-light); } }
body.dark-mode .card-neutral .feature-item input[type="checkbox"]:checked + label { animation: checkpoint-glow 2s ease-in-out infinite; }

/* --- COPY ICON STYLE --- */
.copyable-wrapper, .input-with-icon { position: relative; }
.copy-icon { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 24px; height: 24px; padding: 4px; border-radius: 4px; cursor: pointer; opacity: 0; transition: opacity 0.2s, background-color 0.2s; z-index: 2; }
.copyable-wrapper:hover .copy-icon, .input-with-icon:hover .copy-icon { opacity: 0.6; }
.copy-icon:hover { opacity: 1 !important; }
body.dark-mode .copy-icon { background-color: var(--border-dark); }
body:not(.dark-mode) .copy-icon { background-color: var(--border-light); }
body.dark-mode .copy-icon:hover { background-color: var(--accent-neutral-dark); }
body:not(.dark-mode) .copy-icon:hover { background-color: var(--accent-neutral-light); }
.copy-icon svg { width: 100%; height: 100%; display: block; }
.copy-icon .icon-copy { fill: var(--text-dark); }
body:not(.dark-mode) .copy-icon .icon-copy { fill: var(--text-light); }
.copy-icon .icon-check { fill: var(--success-color); }
body.dark-mode .copy-icon:hover .icon-copy, body:not(.dark-mode) .copy-icon:hover .icon-copy { fill: white; }
.form-group.copyable-wrapper .copy-icon { top: 12px; transform: translateY(0); right: 10px; }

/* --- EMPTY STATE STYLE --- */
.empty-state-message {
    font-size: 0.9rem;
    color: var(--text-dark);
    text-align: center;
    padding: 1rem;
    border: 2px dashed var(--border-dark);
    border-radius: 4px;
    margin: 0;
}
body:not(.dark-mode) .empty-state-message {
    color: var(--text-light);
    opacity: 0.6;
    border-color: var(--border-light);
}

/* --- FOOTER STYLE --- */
footer { text-align: center; padding: 1.5rem 2rem; font-size: 0.75rem; }
.footer-links { margin-bottom: 1rem; }
.footer-links a { font-weight: bold; color: var(--text-dark); text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
body:not(.dark-mode) .footer-links a { color: var(--text-light); }
footer .footer-notice { font-size: 0.7rem; opacity: 0.7; margin-top: 0.5rem; }
body.dark-mode footer { background-color: var(--bg-dark); color: var(--text-dark); border-top: 4px solid var(--border-dark); }
body:not(.dark-mode) footer { background-color: var(--bg-light); color: var(--text-light); border-top: 4px solid var(--border-light); }

/* --- MOBILE & RESPONSIVE --- */
@media (max-width: 900px) {
    .main-container { flex-direction: column; padding: 1rem; gap: 1.5rem; margin: 0; width: 100%; }
    .left-column, .center-column, .right-column { width: 100%; }
    
    .header-main { gap: 1rem; justify-content: center; }
    .title-container { width: 100%; text-align: center; }
    .site-header h1 { margin: 0; font-size: 1.2rem; }
    .howto-link { display: block; margin-top: 0.5rem; font-size: 0.8rem; padding: 0.2rem 0.6rem; }
    .user-controls { flex-wrap: wrap; justify-content: center; }
    .header-switches, .login-buttons { flex-basis: 100%; justify-content: center; }
    .user-info { flex-basis: 100%; text-align: center; }

    .card { padding: 1rem; }
    .accordion-header { cursor: pointer; }
    .accordion-header.no-accordion { display: none; } 
    .right-column .card-small .accordion-content { max-height: 1000px; }
    .accordion-icon { display: inline-block; }
    
    .accordion-content { max-height: 0; }
    .card > .accordion-header:first-child + .accordion-content { margin-top: 0; }
    .card > .card-header-flex.accordion-header + .accordion-content { margin-top: 0; }
    .accordion-header.active + .accordion-content { margin-top: 1rem; }

    body.compact-mode .card { padding: 0.8rem; }
    footer { position: relative; border-top-width: 2px; margin-top: 2rem; }
}

/* =========================================
   UX Improvements
   ========================================= */

/* 1. Focus Micro-interactions */
body.dark-mode .card-human input:focus, 
body.dark-mode .card-human textarea:focus {
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.3) !important;
    border-color: var(--accent-human-dark) !important;
}
body:not(.dark-mode) .card-human input:focus, 
body:not(.dark-mode) .card-human textarea:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3) !important;
    border-color: var(--accent-human-light) !important;
}
body.dark-mode .card-monster input:focus, 
body.dark-mode .card-monster textarea:focus {
    box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.3) !important;
    border-color: var(--accent-monster-dark) !important;
}
body:not(.dark-mode) .card-monster input:focus, 
body:not(.dark-mode) .card-monster textarea:focus {
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.3) !important;
    border-color: var(--accent-monster-light) !important;
}

/* 2. Smart Textarea */
textarea.auto-expand {
    min-height: 100px;
    overflow-y: hidden;
    resize: none;
    transition: height 0.1s ease;
}

/* 3. Mobile Sticky Save Bar */
.mobile-sticky-bar { display: none; }
@media (max-width: 900px) {
    footer { padding-bottom: 80px; }
    .mobile-sticky-bar {
        display: flex; position: fixed; bottom: 0; left: 0; width: 100%;
        padding: 10px 15px; background-color: var(--card-bg-light);
        border-top: 1px solid var(--border-light);
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        z-index: 900; align-items: center; justify-content: space-between; gap: 10px;
    }
    body.dark-mode .mobile-sticky-bar {
        background-color: var(--card-bg-dark); border-color: var(--border-dark);
    }
    .mobile-sticky-bar .save-status-mobile {
        font-size: 0.8rem; font-weight: bold; flex-shrink: 0; width: 80px; text-align: center;
    }
    .mobile-sticky-bar button { flex-grow: 1; padding: 0.8rem; margin: 0; }
}

/* =========================================
   Visual Identity Update (Refined)
   ========================================= */

/* 1. Typography - ハイブリッド構成 */
/* 見出し・タイトル等は「しっぽり明朝」で雰囲気を出す */
h1, h2, h3, .save-status, .save-status-mobile, .site-header h1 {
    font-family: 'Shippori Mincho', serif;
    letter-spacing: 0.05em;
}
/* 本文・入力エリアは「BIZ UDPGothic」で可読性を確保 (bodyの指定を継承) */
input, textarea, select, label, p, li, span {
    font-family: 'BIZ UDPGothic', 'Noto Sans JP', sans-serif;
}

.site-header h1 {
    font-weight: 800;
    font-size: 1.5rem;
}

/* 2. Background Atmosphere - 日常と非日常 */

/* ダークモード: 深い闇のグラデーション */
body.dark-mode {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%);
    background-attachment: fixed;
    min-height: 100vh;
}

/* ライトモード: 日常(白)から滲む非日常(淡い紫)へのグラデーション */
body:not(.dark-mode) {
    background: linear-gradient(135deg, #fdfbf7 0%, #f0f4ff 60%, #eef2ff 100%);
    background-attachment: fixed;
    min-height: 100vh;
}

/* 3. Card Glassmorphism - 透け感のあるカード */

/* ダークモード */
body.dark-mode .card {
    background-color: rgba(31, 41, 55, 0.85); /* 少し透過 */
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* ライトモード */
body:not(.dark-mode) .card {
    background-color: rgba(255, 255, 255, 0.85); /* 白く透過 */
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* 優しい影 */
}

/* 人間/怪物カードのアクセント強調 */
body.dark-mode .card-human { border-left: 3px solid var(--accent-human-dark); }
body.dark-mode .card-monster { border-left: 3px solid var(--accent-monster-dark); }
body:not(.dark-mode) .card-human { border-left: 3px solid var(--accent-human-light); }
body:not(.dark-mode) .card-monster { border-left: 3px solid var(--accent-monster-light); }


/* 4. Input Fields Refinement - リッチな質感 */
body.dark-mode input[type="text"], 
body.dark-mode input[type="number"], 
body.dark-mode select, 
body.dark-mode textarea {
    background-color: rgba(0, 0, 0, 0.3); 
    border-color: rgba(255, 255, 255, 0.15);
}

body:not(.dark-mode) input[type="text"], 
body:not(.dark-mode) input[type="number"], 
body:not(.dark-mode) select, 
body:not(.dark-mode) textarea {
    background-color: rgba(255, 255, 255, 0.9); 
    border-color: #cbd5e1;
}

/* 5. Button Refinement - 触りたくなるボタン */
button.btn-small, button.btn-icon {
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
}

/* 保存ボタンの特別感 */
#save-button {
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
#save-button:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.25);
}
#save-button:active {
    transform: translateY(1px);
}