/* カスタムスタイル */
:root {
  --color-instagram-purple: #833ab4;
  --color-instagram-pink: #fd1d1d;
  --color-instagram-orange: #fcb045;
  --color-rank-a: #10b981;
  --color-rank-b: #3b82f6;
  --color-rank-c: #f59e0b;
  --color-rank-d: #f97316;
  --color-rank-e: #ef4444;
}

/* ログイン画面 */
.login-gradient {
  background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
}

/* ナビゲーション */
.sidebar {
  width: 260px;
  min-height: 100vh;
  background: #1e1b4b;
  transition: all 0.3s ease;
}

.sidebar-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  color: #a5b4fc;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  margin: 2px 8px;
}

.sidebar-item:hover {
  background: rgba(165, 180, 252, 0.15);
  color: #ffffff;
}

.sidebar-item.active {
  background: rgba(165, 180, 252, 0.25);
  color: #ffffff;
  font-weight: 600;
}

.sidebar-item i {
  width: 20px;
  margin-right: 12px;
}

/* メインコンテンツ */
.main-content {
  flex: 1;
  overflow-y: auto;
}

/* ランクバッジ */
.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 18px;
  color: white;
}

.rank-A { background: var(--color-rank-a); }
.rank-B { background: var(--color-rank-b); }
.rank-C { background: var(--color-rank-c); }
.rank-D { background: var(--color-rank-d); }
.rank-E { background: var(--color-rank-e); }

/* ステータスバッジ */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}

.status-draft { background: #f3f4f6; color: #6b7280; }
.status-in_progress { background: #dbeafe; color: #1d4ed8; }
.status-scored { background: #fef3c7; color: #d97706; }
.status-completed { background: #d1fae5; color: #065f46; }

/* 判定ボタン */
.judgment-btn {
  padding: 6px 12px;
  border: 2px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s;
  background: #f9fafb;
  color: #374151;
}

.judgment-btn:hover {
  border-color: currentColor;
}

.judgment-btn.active-full {
  background: #d1fae5;
  border-color: #10b981;
  color: #065f46;
}

.judgment-btn.active-half {
  background: #dbeafe;
  border-color: #3b82f6;
  color: #1d4ed8;
}

.judgment-btn.active-zero {
  background: #fee2e2;
  border-color: #ef4444;
  color: #991b1b;
}

.judgment-btn.active-na {
  background: #f3f4f6;
  border-color: #9ca3af;
  color: #4b5563;
}

/* 進捗バー */
.progress-bar {
  height: 6px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.3s ease;
}

/* スコアゲージ */
.score-circle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* カード */
.card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  padding: 20px;
}

/* トースト通知 */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  padding: 12px 20px;
  border-radius: 8px;
  color: white;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  animation: slideIn 0.3s ease;
  max-width: 350px;
}

.toast-success { background: #10b981; }
.toast-error { background: #ef4444; }
.toast-warning { background: #f59e0b; }
.toast-info { background: #3b82f6; }

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* モーダル */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal-content {
  background: white;
  border-radius: 12px;
  padding: 24px;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

/* PDF出力用スタイル */
@media print {
  .no-print { display: none !important; }
  .print-only { display: block !important; }
  body { background: white; font-size: 12px; }
  .sidebar { display: none; }
  .main-content { width: 100%; }
  
  .page-break {
    page-break-before: always;
  }
  
  .card {
    box-shadow: none;
    border: 1px solid #e5e7eb;
  }
}

/* レーダーチャートコンテナ */
.chart-container {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 0 auto;
}

/* アニメーション */
.fade-in {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* テーブル */
.table-hover tr:hover {
  background: #f9fafb;
}

/* 未保存インジケーター */
.unsaved-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #f59e0b;
}

/* 自動保存インジケーター */
.auto-save-indicator {
  font-size: 12px;
  color: #6b7280;
}

/* スコアカラー */
.score-excellent { color: #10b981; }
.score-good { color: #3b82f6; }
.score-average { color: #f59e0b; }
.score-below { color: #f97316; }
.score-poor { color: #ef4444; }

/* 注記 */
.disclaimer {
  font-size: 11px;
  color: #6b7280;
  border-top: 1px solid #e5e7eb;
  padding-top: 8px;
  margin-top: 16px;
}

/* レスポンシブ */
@media (max-width: 768px) {
  .sidebar { display: none; }
}

/* 検索ボックス */
.search-box {
  position: relative;
}

.search-box input {
  padding-left: 36px;
}

.search-box .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
}

/* タブ */
.tab-btn {
  padding: 8px 16px;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  color: #6b7280;
  font-weight: 500;
  transition: all 0.2s;
  border-bottom: 2px solid transparent;
}

.tab-btn.active {
  color: #4f46e5;
  border-bottom-color: #4f46e5;
}

.tab-btn:hover:not(.active) {
  background: #f9fafb;
  color: #374151;
}

/* ヘッダー */
.app-header {
  background: white;
  border-bottom: 1px solid #e5e7eb;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* 診断入力グリッド */
.diagnosis-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* ドメインカード */
.domain-card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}

.domain-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: #f9fafb;
  cursor: pointer;
  user-select: none;
}

.domain-body {
  padding: 16px;
}

/* テキストエリア */
textarea {
  resize: vertical;
  min-height: 80px;
}

/* 入力フィールド */
input, textarea, select {
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  width: 100%;
  transition: border-color 0.2s;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99,102,241,0.1);
}

/* ボタン */
.btn-primary {
  background: #4f46e5;
  color: white;
  padding: 8px 20px;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
  border: none;
}

.btn-primary:hover {
  background: #4338ca;
}

.btn-secondary {
  background: white;
  color: #374151;
  padding: 8px 20px;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid #d1d5db;
}

.btn-secondary:hover {
  background: #f9fafb;
}

.btn-danger {
  background: #ef4444;
  color: white;
  padding: 8px 20px;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  border: none;
}

.btn-danger:hover {
  background: #dc2626;
}

/* Instagram グラデーション */
.instagram-gradient {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

/* ===== Tailwind ユーティリティ代替（CDN不要化） ===== */

/* Display */
.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.block{display:block}.inline-block{display:inline-block}.hidden{display:none}.contents{display:contents}

/* Flex */
.flex-1{flex:1 1 0%}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.shrink-0{flex-shrink:0}.flex-shrink-0{flex-shrink:0}

/* Grid */
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(min-width:768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Gap */
.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-6{gap:24px}.gap-8{gap:32px}.gap-x-3{column-gap:12px}.gap-x-4{column-gap:16px}

/* Spacing - Padding */
.p-0{padding:0}.p-1{padding:4px}.p-2{padding:8px}.p-3{padding:12px}.p-4{padding:16px}.p-5{padding:20px}.p-6{padding:24px}.p-8{padding:32px}
.px-2{padding-left:8px;padding-right:8px}.px-3{padding-left:12px;padding-right:12px}.px-4{padding-left:16px;padding-right:16px}.px-6{padding-left:24px;padding-right:24px}.px-8{padding-left:32px;padding-right:32px}
.py-1{padding-top:4px;padding-bottom:4px}.py-1\.5{padding-top:6px;padding-bottom:6px}.py-2{padding-top:8px;padding-bottom:8px}.py-3{padding-top:12px;padding-bottom:12px}.py-4{padding-top:16px;padding-bottom:16px}.py-6{padding-top:24px;padding-bottom:24px}.py-8{padding-top:32px;padding-bottom:32px}.py-12{padding-top:48px;padding-bottom:48px}
.pt-2{padding-top:8px}.pt-3{padding-top:12px}.pt-4{padding-top:16px}.pt-6{padding-top:24px}.pb-2{padding-bottom:8px}.pb-3{padding-bottom:12px}.pb-4{padding-bottom:16px}.pl-3{padding-left:12px}.pr-3{padding-right:12px}.p-1\.5{padding:6px}.p-2\.5{padding:10px}

/* Spacing - Margin */
.m-0{margin:0}.m-auto{margin:auto}.mx-auto{margin-left:auto;margin-right:auto}
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}.mt-0\.5{margin-top:2px}
.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}.mb-8{margin-bottom:32px}
.ml-1{margin-left:4px}.ml-2{margin-left:8px}.ml-3{margin-left:12px}.ml-auto{margin-left:auto}
.mr-1{margin-right:4px}.mr-2{margin-right:8px}.mr-3{margin-right:12px}
.space-y-2>*+*{margin-top:8px}.space-y-3>*+*{margin-top:12px}.space-y-4>*+*{margin-top:16px}.space-y-6>*+*{margin-top:24px}.space-x-2>*+*{margin-left:8px}.space-x-3>*+*{margin-left:12px}

/* Width / Height */
.w-full{width:100%}.w-auto{width:auto}.w-4{width:16px}.w-5{width:20px}.w-6{width:24px}.w-8{width:32px}.w-10{width:40px}.w-12{width:48px}.w-16{width:64px}.w-20{width:80px}.w-24{width:96px}.w-32{width:128px}.w-48{width:192px}.w-64{width:256px}
.h-4{height:16px}.h-5{height:20px}.h-6{height:24px}.h-8{height:32px}.h-10{height:40px}.h-12{height:48px}.h-16{height:64px}.h-20{height:80px}.h-full{height:100%}.min-h-screen{min-height:100vh}
.max-w-xs{max-width:20rem}.max-w-sm{max-width:24rem}.max-w-md{max-width:28rem}.max-w-lg{max-width:32rem}.max-w-xl{max-width:36rem}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-full{max-width:100%}

/* Typography */
.text-xs{font-size:12px;line-height:1.5}.text-sm{font-size:14px;line-height:1.5}.text-base{font-size:16px;line-height:1.5}.text-lg{font-size:18px;line-height:1.5}.text-xl{font-size:20px;line-height:1.5}.text-2xl{font-size:24px;line-height:1.3}.text-3xl{font-size:30px;line-height:1.3}.text-4xl{font-size:36px;line-height:1.2}.text-5xl{font-size:48px;line-height:1.1}.text-6xl{font-size:60px;line-height:1}
.font-normal{font-weight:400}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}
.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}
.leading-relaxed{line-height:1.625}.leading-tight{line-height:1.25}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-pre-line{white-space:pre-line}.whitespace-nowrap{white-space:nowrap}.break-all{word-break:break-all}
.underline{text-decoration:underline}.no-underline{text-decoration:none}.line-through{text-decoration:line-through}
.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}
.italic{font-style:italic}

/* Colors - Text */
.text-white{color:#fff}.text-black{color:#000}
.text-gray-300{color:#d1d5db}.text-gray-400{color:#9ca3af}.text-gray-500{color:#6b7280}.text-gray-600{color:#4b5563}.text-gray-700{color:#374151}.text-gray-800{color:#1f2937}.text-gray-900{color:#111827}
.text-red-500{color:#ef4444}.text-red-600{color:#dc2626}.text-red-700{color:#b91c1c}
.text-orange-600{color:#ea580c}.text-orange-700{color:#c2410c}
.text-yellow-600{color:#ca8a04}.text-yellow-700{color:#a16207}.text-yellow-800{color:#854d0e}
.text-green-500{color:#22c55e}.text-green-600{color:#16a34a}.text-green-700{color:#15803d}
.text-blue-500{color:#3b82f6}.text-blue-600{color:#2563eb}.text-blue-700{color:#1d4ed8}
.text-indigo-500{color:#6366f1}.text-indigo-600{color:#4f46e5}.text-indigo-700{color:#4338ca}.text-indigo-800{color:#3730a3}
.text-purple-500{color:#a855f7}.text-purple-600{color:#9333ea}
.text-pink-500{color:#ec4899}

/* Colors - Background */
.bg-white{background:#fff}.bg-transparent{background:transparent}
.bg-gray-50{background:#f9fafb}.bg-gray-100{background:#f3f4f6}.bg-gray-200{background:#e5e7eb}.bg-gray-800{background:#1f2937}.bg-gray-900{background:#111827}
.bg-red-50{background:#fef2f2}.bg-red-100{background:#fee2e2}
.bg-yellow-50{background:#fefce8}.bg-yellow-100{background:#fef3c7}
.bg-green-50{background:#f0fdf4}.bg-green-100{background:#dcfce7}
.bg-blue-50{background:#eff6ff}.bg-blue-100{background:#dbeafe}
.bg-indigo-50{background:#eef2ff}.bg-indigo-100{background:#e0e7ff}.bg-indigo-600{background:#4f46e5}
.bg-purple-100{background:#f3e8ff}

/* Border */
.border{border:1px solid #e5e7eb}.border-0{border:0}.border-2{border:2px solid #e5e7eb}.border-t{border-top:1px solid #e5e7eb}.border-b{border-bottom:1px solid #e5e7eb}.border-l{border-left:1px solid #e5e7eb}.border-r{border-right:1px solid #e5e7eb}
.border-gray-100{border-color:#f3f4f6}.border-gray-200{border-color:#e5e7eb}.border-gray-300{border-color:#d1d5db}.border-yellow-200{border-color:#fde68a}.border-indigo-200{border-color:#c7d2fe}.border-red-200{border-color:#fecaca}.border-green-200{border-color:#bbf7d0}
.divide-y>*+*{border-top:1px solid #e5e7eb}.divide-x>*+*{border-left:1px solid #e5e7eb}
.last\:border-0:last-child{border:0}

/* Border Radius */
.rounded{border-radius:4px}.rounded-sm{border-radius:2px}.rounded-md{border-radius:6px}.rounded-lg{border-radius:8px}.rounded-xl{border-radius:12px}.rounded-2xl{border-radius:16px}.rounded-full{border-radius:9999px}.rounded-t{border-radius:4px 4px 0 0}.rounded-b{border-radius:0 0 4px 4px}

/* Shadow */
.shadow{box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06)}.shadow-md{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)}.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05)}.shadow-none{box-shadow:none}

/* Position */
.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}.static{position:static}
.inset-0{inset:0}.top-0{top:0}.right-0{right:0}.bottom-0{bottom:0}.left-0{left:0}
.top-1\/2{top:50%}.-translate-y-1\/2{transform:translateY(-50%)}
.z-10{z-index:10}.z-50{z-index:50}.z-100{z-index:100}

/* Overflow */
.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}.overflow-y-auto{overflow-y:auto}.overflow-x-auto{overflow-x:auto}

/* Cursor */
.cursor-pointer{cursor:pointer}.cursor-default{cursor:default}.select-none{user-select:none}

/* Opacity / Visibility */
.opacity-0{opacity:0}.opacity-50{opacity:.5}.opacity-75{opacity:.75}.opacity-100{opacity:1}

/* Transition */
.transition{transition:all .15s ease}.transition-all{transition:all .15s ease}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}

/* Transform */
.rotate-90{transform:rotate(90deg)}.-rotate-90{transform:rotate(-90deg)}.rotate-180{transform:rotate(180deg)}.scale-95{transform:scale(.95)}.scale-100{transform:scale(1)}

/* Object */
.object-cover{object-fit:cover}.object-contain{object-fit:contain}

/* List */
.list-disc{list-style-type:disc}.list-inside{list-style-position:inside}.list-none{list-style:none}

/* Table */
.table{display:table}.w-full.table-auto{table-layout:auto}.border-collapse{border-collapse:collapse}
.table th,.table td{padding:8px 12px}

/* Hover states */
.hover\:underline:hover{text-decoration:underline}
.hover\:text-indigo-700:hover{color:#4338ca}.hover\:text-gray-600:hover{color:#4b5563}.hover\:text-gray-900:hover{color:#111827}.hover\:text-white:hover{color:#fff}
.hover\:bg-gray-50:hover{background:#f9fafb}.hover\:bg-gray-100:hover{background:#f3f4f6}.hover\:bg-indigo-700:hover{background:#4338ca}

/* Focus */
.focus\:outline-none:focus{outline:none}.focus\:ring-2:focus{box-shadow:0 0 0 2px rgba(99,102,241,.5)}

/* Responsive */
@media(min-width:768px){.md\:flex{display:flex}.md\:block{display:block}.md\:hidden{display:none}.md\:w-auto{width:auto}.md\:text-lg{font-size:18px}}
@media(max-width:767px){.md\:hidden-below{display:none}}

/* ===== FontAwesome代替（絵文字＋CSS） ===== */
/* FontAwesome CDNなしでもアイコンが表示されるフォールバック */
[class*="fa-"]:not([class*="fab"])::before { font-style: normal; }

/* FontAwesomeが読み込まれた場合は通常動作、未読み込み時は空白 */