* { box-sizing: border-box; }
body { font-family: -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", sans-serif; margin: 0; background: #f5f6f8; color: #1a1a1a; }
h1, h2, h3 { margin-top: 0; }

.login-box { max-width: 360px; margin: 10vh auto; background: #fff; padding: 2rem; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.login-box label { display: block; margin-bottom: 1rem; font-size: 0.9rem; }
.login-box input { width: 100%; padding: 0.5rem; margin-top: 0.25rem; border: 1px solid #ccc; border-radius: 4px; }
.login-box button { width: 100%; padding: 0.6rem; background: #2b6cb0; color: #fff; border: none; border-radius: 4px; cursor: pointer; }
.error { color: #c0392b; font-size: 0.85rem; }

.topbar { display: flex; justify-content: space-between; align-items: center; background: #1a2332; color: #fff; padding: 0.75rem 1.5rem; gap: 1rem; }
.topbar button { background: transparent; border: 1px solid #556; color: #fff; padding: 0.3rem 0.8rem; border-radius: 4px; cursor: pointer; }
.top-nav { display: flex; gap: 0.4rem; flex: 1; justify-content: center; }
.top-nav .nav-btn { background: transparent; border: none; color: #b8c0cc; padding: 0.4rem 0.9rem; border-radius: 4px; cursor: pointer; font-size: 0.9rem; }
.top-nav .nav-btn:hover { background: #2a3648; color: #fff; }
.top-nav .nav-btn.active { background: #2b6cb0; color: #fff; font-weight: bold; }

.main { flex: 1; overflow-y: auto; padding: 1.5rem; }
.main.view-panel { height: calc(100vh - 52px); }

/* 2026-08-28(店舗一覧UI改善): サイドバーの全店舗/全サイトツリー表示に代わる、
   メイン領域全体を使ったサーバー側ページネーション付きサイト一覧。 */
.site-list-toolbar { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.site-list-toolbar input[type="text"] { padding: 0.4rem 0.6rem; border: 1px solid #ccc; border-radius: 4px; min-width: 260px; }
.site-list-toolbar select { padding: 0.4rem 0.6rem; border: 1px solid #ccc; border-radius: 4px; }
.site-list-table { width: 100%; border-collapse: collapse; background: #fff; }
.site-list-table th, .site-list-table td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid #eee; font-size: 0.9rem; }
.site-list-row { cursor: pointer; }
.site-list-row:hover { background: #eef2f7; }
.site-list-pager { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }

.badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 10px; font-size: 0.75rem; margin-left: 0.5rem; }
.badge.PASS, .badge.COMPLETED, .badge.READY_TO_BUILD, .badge.READY_FOR_PREFLIGHT { background: #d1fae5; color: #065f46; }
.badge.WARNING, .badge.INFRA_REQUIRED, .badge.WAITING_FOR_DNS, .badge.WAITING_FOR_SSL, .badge.PREFLIGHT_FAILED { background: #fef3c7; color: #92400e; }
.badge.FAIL, .badge.FAILED { background: #fee2e2; color: #991b1b; }
.badge.RECOVERY_REQUIRED { background: #7f1d1d; color: #fff; }
.badge.DRAFT { background: #eee; color: #555; }
.badge.BUILDING, .badge.VERIFYING, .badge.PUBLISHING { background: #dbeafe; color: #1e40af; }
.badge.READY_FOR_REVIEW { background: #e0e7ff; color: #3730a3; }
.badge.CHANGES_REQUESTED { background: #fee2e2; color: #991b1b; }
.badge.APPROVED, .badge.PUBLISHED { background: #d1fae5; color: #065f46; }
.badge.REVISING { background: #ede9fe; color: #5b21b6; }

.published-banner { background: #eef2ff; color: #3730a3; padding: 0.6rem 0.9rem; border-radius: 6px; font-size: 0.85rem; margin: 0.5rem 0 1rem; }

.tabs { display: flex; gap: 0.5rem; border-bottom: 1px solid #ddd; margin-bottom: 1rem; }
.tab-btn { padding: 0.5rem 1rem; border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent; }
.tab-btn.active { border-bottom-color: #2b6cb0; font-weight: bold; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.card { background: #fff; border-radius: 6px; padding: 1rem; margin-bottom: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
input[type=text], input[type=password], textarea, select { width: 100%; padding: 0.4rem; border: 1px solid #ccc; border-radius: 4px; margin-top: 0.2rem; }
label { display: block; margin-bottom: 0.75rem; font-size: 0.9rem; }
button.action { padding: 0.5rem 1rem; margin: 0.25rem 0.25rem 0.25rem 0; border: none; border-radius: 4px; background: #2b6cb0; color: #fff; cursor: pointer; }
button.action.danger { background: #c0392b; }
button.action.secondary { background: #718096; }
button.action:disabled { background: #aaa; cursor: not-allowed; }

.log-viewer { background: #111; color: #d4d4d4; font-family: monospace; font-size: 0.8rem; padding: 1rem; height: 320px; overflow-y: auto; border-radius: 4px; white-space: pre-wrap; }
table { width: 100%; border-collapse: collapse; }
table th, table td { text-align: left; padding: 0.4rem; border-bottom: 1px solid #eee; font-size: 0.9rem; }

.feature-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; }
.feature-images .upload-box { border: 1px dashed #ccc; border-radius: 6px; padding: 0.75rem; text-align: center; }
.feature-images .thumb { display: block; max-width: 100%; max-height: 100px; margin: 0.5rem auto; border-radius: 4px; object-fit: contain; }
.feature-images .thumb-empty { font-size: 0.75rem; color: #666; margin: 0.5rem 0; }
button.action.danger-outline { background: #fff; color: #c0392b; border: 1px solid #c0392b; margin-top: 0.4rem; }

.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal-box { background: #fff; border-radius: 8px; padding: 1.5rem; min-width: 320px; max-width: 480px; box-shadow: 0 4px 16px rgba(0,0,0,.2); }
.modal-box h3 { margin-bottom: 1rem; }
.modal-box .modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }
.modal-box .modal-error { color: #c0392b; font-size: 0.85rem; margin-top: 0.5rem; min-height: 1.2em; }

.toast { position: fixed; bottom: 1.5rem; right: 1.5rem; background: #1a2332; color: #fff; padding: 0.75rem 1.25rem; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.2); z-index: 200; max-width: 400px; font-size: 0.9rem; }
.toast.error { background: #c0392b; }

.wizard-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 150; }
.wizard-box { background: #fff; border-radius: 8px; width: min(880px, 95vw); height: min(720px, 92vh); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,.3); }
.wizard-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.25rem; border-bottom: 1px solid #e0e0e0; background: #f8f9fb; }
.wizard-steps { display: flex; gap: 0.35rem; flex-wrap: wrap; font-size: 0.75rem; }
.wizard-steps .step { padding: 0.2rem 0.55rem; border-radius: 12px; background: #eee; color: #666; }
.wizard-steps .step.active { background: #2b6cb0; color: #fff; font-weight: bold; }
.wizard-steps .step.done { background: #d1fae5; color: #065f46; }
.wizard-body { flex: 1; overflow-y: auto; padding: 1.5rem; }
.wizard-nav { display: flex; justify-content: space-between; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #eee; }
.wizard-nav-right { display: flex; gap: 0.5rem; }
.copy-field { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.copy-field code { flex: 1; background: #f5f6f8; padding: 0.4rem 0.6rem; border-radius: 4px; font-size: 0.85rem; word-break: break-all; }
.copy-field button { flex-shrink: 0; }
.ssl-check-row { display: flex; align-items: center; gap: 0.5rem; margin: 0.5rem 0; }
.ssl-check-row .badge.READY, .ssl-check-row .badge.PASS { background: #d1fae5; color: #065f46; }
.ssl-check-row .badge.WAITING_FOR_DNS, .ssl-check-row .badge.WAITING_FOR_SSL { background: #fef3c7; color: #92400e; }
.image-warning { background: #fef3c7; color: #92400e; padding: 0.6rem 0.8rem; border-radius: 6px; font-size: 0.85rem; margin-bottom: 1rem; }
.ai-generate-btn { background: #f0e6ff; color: #6b21a8; border: 1px solid #d8b4fe; font-size: 0.75rem; padding: 0.15rem 0.6rem; margin-left: 0.5rem; border-radius: 4px; cursor: not-allowed; opacity: 0.7; }

/* FAQリピーターUI(2026-08-22追加、ウィザードSTEP2・店舗情報編集タブで共有) */
.faq-editor-item { border: 1px solid #e0e0e0; border-radius: 6px; padding: 0.75rem; margin-bottom: 0.75rem; background: #fafafa; }
.faq-editor-item-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; }
.faq-editor-actions button.action { padding: 0.2rem 0.5rem; margin: 0 0.15rem; font-size: 0.8rem; }
.faq-add-btn { margin-top: 0.25rem; }