:root {
	--primary-color: #4ecca3;
	--bg-color: #1a1a2e;
	--panel-color: #16213e;
	--text-color: #e2e2e2;
	--accent-color: #e94560;
	--blue-accent: #3498db;
}

body {
	background-color: var(--bg-color);
	color: var(--text-color);
	font-family: 'Helvetica Neue', Arial, sans-serif;
	display: flex; justify-content: center; padding: 20px; margin: 0;
}

#app { width: 100%; max-width: 600px; text-align: center; }
.hidden { display: none !important; }
header { margin-bottom: 20px; padding-bottom: 10px; }
.title-link { text-decoration: none; }

h1 { color: var(--primary-color); margin: 10px 0; font-size: 2.2rem; }

/* リンク色設定 */
#mind-name, #res-mind-name, .mini-search-link {
	color: var(--blue-accent);
	text-decoration: none; border-bottom: 2.2px solid rgba(52, 152, 219, 0.4);
	transition: 0.3s; font-weight: bold; display: inline-block;
}
#mind-name:hover, #res-mind-name:hover, .mini-search-link:hover {
	color: #ffffff; border-bottom: 2.2px solid var(--blue-accent); text-shadow: 0 0 10px var(--blue-accent);
}
.search-link-wrapper::after { content: " ↗"; font-size: 0.8rem; opacity: 0.7; }

/* ヘッダー上部（Helpと多言語） */
.header-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.help-btn { background: rgba(78, 204, 163, 0.1); color: var(--primary-color); border: 1px solid var(--primary-color); padding: 5px 12px; font-size: 0.75rem; cursor: pointer; border-radius: 4px; transition: 0.2s; width: auto; margin: 0; }
.help-btn:hover { background: var(--primary-color); color: var(--bg-color); }
.lang-switcher { display: flex; justify-content: flex-end; gap: 5px; }
.lang-switcher button { background: transparent; color: var(--text-color); border: 1px solid #444; padding: 5px 12px; font-size: 0.75rem; cursor: pointer; border-radius: 4px; width: auto; transition: 0.2s; margin: 0; }
.lang-switcher button:hover { background: var(--primary-color); color: var(--bg-color); }

/* 基本ボックス */
.profile-box, .card-box, .insight-box, .result-item {
	background: var(--panel-color); padding: 20px; border-radius: 12px; margin: 20px 0;
	text-align: left; box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}

/* 一覧リストエリア (スクロール対応) */
.list-title { color: var(--text-color); font-size: 1.3rem; margin: 20px 0; text-align: left; border-bottom: 1px dashed #444; padding-bottom: 10px; }
.scroll-list {
	max-height: 65vh; overflow-y: auto; display: flex; flex-direction: column; gap: 15px; margin-bottom: 20px; padding-right: 10px;
}
.scroll-list::-webkit-scrollbar { width: 6px; }
.scroll-list::-webkit-scrollbar-thumb { background-color: var(--primary-color); border-radius: 10px; }
.list-item-btn { margin-top: 15px; }

/* カラーシステム */
.info-box-blue { border-top: 6px solid var(--blue-accent); }
.info-box-blue small { color: var(--blue-accent); font-weight: bold; }
.info-box-blue h3 { color: var(--blue-accent); margin-top: 0; }
.info-box-red { border-top: 6px solid var(--accent-color); }
.info-box-red small { color: var(--accent-color); font-weight: bold; }
.info-box-red h3 { color: var(--accent-color); margin-top: 0; }
.info-box-green-left { border-left: 6px solid var(--primary-color); }
.info-box-green-left small { color: var(--primary-color); font-weight: bold; }
.info-box-default { border-left: 6px solid #e2e2e2; }

/* パーツ詳細 */
.example-box { background: rgba(255,255,255,0.05); padding: 15px; border-radius: 8px; margin-top: 15px; font-size: 0.9rem; line-height: 1.6; }
.res-text { font-size: 1.25rem; font-weight: bold; margin: 10px 0; display: block; }
.res-sub-text { font-size: 0.95rem; line-height: 1.7; color: rgba(255,255,255,0.85); margin: 10px 0; }
.highlight { color: var(--primary-color); }
.mini-phil-text { font-size: 0.85em; opacity: 0.8; }
.intro-container { background: rgba(255,255,255,0.03); padding: 20px; border-radius: 12px; margin-bottom: 30px; border-left: 4px solid var(--primary-color); }
.intro-text { font-size: 0.95rem; line-height: 1.7; text-align: left; white-space: pre-wrap; }
input[type="text"] { width: 100%; padding: 15px; background: var(--panel-color); color: white; border: 1px solid var(--primary-color); border-radius: 8px; box-sizing: border-box; font-size: 1rem; margin: 10px 0; outline: none; }
.insight-box { background: var(--primary-color); color: #1a1a2e; font-weight: bold; font-size: 1.1rem; }
.result-badge { background: var(--primary-color); color: #1a1a2e; padding: 4px 12px; border-radius: 20px; font-weight: bold; font-size: 0.8rem; display: inline-block; }

/* ボタン類（基本） */
.action-buttons { display: flex; flex-direction: column; gap: 8px; margin-top: 15px; }
button { padding: 15px; font-weight: bold; border: none; border-radius: 8px; cursor: pointer; transition: 0.2s; width: 100%; font-size: 1rem; }
.primary-btn { background: var(--primary-color); color: var(--bg-color); margin: 5px 0; }
.secondary-btn { background: #533483; color: white; margin: 5px 0; }
.outline-btn { background: transparent; border: 1px solid #533483; color: #e2e2e2; }
.outline-btn:hover { background: #533483; color: white; }
.btn-back { background: #333; margin-top: 10px; }

/* ★診断画面（クイズ）のボタン群の調整★ */
#quiz-screen { margin-top: 30px; }
#question-text { font-size: 1.3rem; line-height: 1.6; margin-bottom: 30px; color: #ffffff; }

.btn-group-vertical {
	display: flex;
	flex-direction: column;
	gap: 15px; /* ボタン同士がくっつかないように間隔をあける */
}
.btn-group-vertical button {
	background-color: #f4f4f9; /* 画像のような明るいグレー */
	color: #1a1a2e;            /* ダーク系の文字色 */
	margin: 0;                 /* gapを使用するため個別マージンは解除 */
	font-size: 1.1rem;
	padding: 16px;
	border-radius: 8px;
}
.btn-group-vertical button:hover {
	background-color: var(--primary-color);
	color: var(--bg-color);
}

/* SNSボタン */
.sns-icons { display: flex; justify-content: center; gap: 12px; margin: 15px 0; }
.sns-icons button { width: 45px; height: 45px; border-radius: 50%; color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; font-size: 0.85rem; font-weight: bold; flex-shrink: 0; margin: 0; }
.icon-x { background: #000; }
.icon-fb { background: #1877F2; }
.icon-line { background: #06C755; }
.icon-weibo { background: #E6162D; }

/* 使い方・モーダル・ポリシー */
.usage-guide { background: rgba(78, 204, 163, 0.05); border: 1px solid var(--primary-color); border-radius: 12px; padding: 20px; margin-top: 40px; text-align: left; }
.usage-guide h3 { margin-top: 0; font-size: 1.1rem; color: var(--primary-color); margin-bottom: 15px; }
.usage-guide ul { list-style: none; padding: 0; margin: 0; }
.usage-guide li { position: relative; padding-left: 25px; margin-bottom: 12px; font-size: 0.9rem; line-height: 1.5; color: var(--text-color); }
.usage-guide li::before { content: "✔"; position: absolute; left: 0; color: var(--primary-color); font-weight: bold; }

.modal { position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); display: flex; justify-content: center; align-items: center; }
.modal-content { background-color: var(--panel-color); padding: 30px; border-radius: 12px; width: 90%; max-width: 500px; position: relative; border-top: 6px solid var(--primary-color); box-shadow: 0 8px 30px rgba(0,0,0,0.6); text-align: left; max-height: 85vh; overflow-y: auto; }
.close-btn { position: absolute; top: 15px; right: 20px; color: var(--text-color); font-size: 28px; font-weight: bold; cursor: pointer; transition: 0.2s; line-height: 1; }
.close-btn:hover { color: var(--accent-color); }
.help-section { margin-top: 25px; }
.help-section h3 { color: var(--blue-accent); font-size: 1.1rem; margin-bottom: 10px; border-bottom: 1px solid rgba(52, 152, 219, 0.3); padding-bottom: 5px; }
.pre-line-text { font-size: 0.9rem; line-height: 1.8; color: rgba(255,255,255,0.9); white-space: pre-line; margin: 0; }

.policy-container { margin-top: 50px; text-align: left; opacity: 0.8; background: rgba(0,0,0,0.2); padding: 15px; border-radius: 8px; }
.policy-content { font-size: 0.75rem; line-height: 1.6; white-space: pre-wrap; }
footer { margin-top: 40px; border-top: 1px solid #333; padding-top: 20px; opacity: 0.6; font-size: 0.8rem; }