/**
 * チーム分け系ツール 共通スタイル
 * 班分け・席替え・実力均等・条件付きチーム分け・結婚式席次表メーカーで共有
 */

/* ========================================
   フォーム関連（共通）
   ======================================== */
.tt-form-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px 24px;
}

.tt-form-grid--three {
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 600px) {
	.tt-form-grid,
	.tt-form-grid--three {
		grid-template-columns: 1fr;
	}
}

.tt-form-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.tt-form-label {
	font-size: 13px;
	font-weight: 500;
	color: var(--color-text);
}

.tt-form-input,
.tt-form-textarea,
.tt-form-select {
	padding: 10px 12px;
	font-size: 14px;
	color: var(--color-text);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	font-family: inherit;
	width: 100%;
	box-sizing: border-box;
}

.tt-form-textarea {
	min-height: 120px;
	resize: vertical;
	line-height: 1.7;
}

.tt-form-input:focus,
.tt-form-textarea:focus,
.tt-form-select:focus {
	outline: none;
	border-color: #5C7CFA;
}

.tt-form-hint {
	font-size: 12px;
	color: var(--color-text-muted);
	line-height: 1.6;
}

/* チェックトグル */
.tt-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 0;
	cursor: pointer;
	font-size: 14px;
}

.tt-toggle input[type="checkbox"] {
	width: 18px;
	height: 18px;
	cursor: pointer;
}

/* ========================================
   セクションタイトル
   ======================================== */
.tt-section-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-display);
	font-size: 17px;
	font-weight: 700;
	color: var(--color-text);
	margin: 0 0 14px;
}

.tt-section-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 700;
	color: #FFFFFF;
	background: #5C7CFA;
	flex-shrink: 0;
}

/* ========================================
   入力セクション
   ======================================== */
.tt-input-section {
	padding: 16px 20px;
}

.tt-input-section + .tt-input-section {
	border-top: 1px solid var(--color-border-light, #EAE7E0);
}

/* ========================================
   ボタン
   ======================================== */
.tt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 20px;
	border: none;
	border-radius: 8px;
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.18s ease;
}

.tt-btn--primary {
	background: linear-gradient(135deg, #5C7CFA 0%, #3D5AC8 100%);
	color: #FFFFFF;
	box-shadow: 0 2px 6px rgba(92, 124, 250, 0.30);
}

.tt-btn--primary:hover {
	filter: brightness(1.05);
	transform: translateY(-1px);
}

.tt-btn--secondary {
	background: #F4F4F2;
	color: var(--color-text);
}

.tt-btn--secondary:hover {
	background: #E9E9E6;
}

.tt-btn-large {
	padding: 14px 32px;
	font-size: 15px;
}

/* ========================================
   結果セクション
   ======================================== */
.tt-result-section {
	padding: 24px 20px;
	background: linear-gradient(135deg, #F4F8FF 0%, #FFFFFF 80%);
	border-top: 1px solid var(--color-border);
}

.tt-result-summary {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 16px;
	font-size: 13px;
	color: var(--color-text-secondary);
}

.tt-result-summary strong {
	color: #3D5AC8;
	font-weight: 700;
}

/* ========================================
   グループカード（班・チーム表示）
   ======================================== */
.tt-groups-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 14px;
	margin-top: 14px;
}

.tt-group-card {
	background: #FFFFFF;
	border: 1px solid #E0E6F2;
	border-radius: 10px;
	padding: 14px 16px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.tt-group-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid #E8ECF7;
}

.tt-group-card-title {
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 700;
	color: #3D5AC8;
}

.tt-group-card-meta {
	font-size: 11px;
	color: var(--color-text-muted);
	background: #EEF2FB;
	padding: 2px 8px;
	border-radius: 4px;
}

.tt-group-card-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.tt-group-card-list li {
	font-size: 13.5px;
	padding: 4px 0;
	color: var(--color-text);
}

.tt-group-card-list li.tt-leader {
	font-weight: 700;
	color: #C0392B;
}

.tt-group-card-list li.tt-leader::before {
	content: '★ ';
	color: #C0392B;
}

.tt-group-card-list li .tt-gender {
	font-size: 11px;
	color: var(--color-text-muted);
	margin-left: 6px;
}

/* ========================================
   レベルバー（実力表示用）
   ======================================== */
.tt-level-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
	font-size: 12px;
}

.tt-level-bar-fill {
	flex: 1;
	height: 8px;
	background: #EEF2FB;
	border-radius: 4px;
	overflow: hidden;
}

.tt-level-bar-fill > div {
	height: 100%;
	background: linear-gradient(90deg, #5C7CFA, #3D5AC8);
	transition: width 0.4s ease;
}

/* ========================================
   制約・配慮事項リスト
   ======================================== */
.tt-pair-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 8px;
}

.tt-pair-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	background: #FAFAF8;
	border: 1px solid #E0E6F2;
	border-radius: 6px;
	font-size: 13px;
}

.tt-pair-row select,
.tt-pair-row input[type="text"] {
	flex: 1;
	min-width: 0;
	padding: 6px 8px;
	border: 1px solid var(--color-border);
	border-radius: 4px;
	font-size: 13px;
}

.tt-pair-row .tt-pair-arrow {
	color: var(--color-text-muted);
	font-weight: 700;
	flex-shrink: 0;
}

.tt-pair-row .tt-pair-remove {
	background: #FCEFEC;
	color: #C0392B;
	border: 1px solid #F0C4BD;
	border-radius: 4px;
	padding: 4px 10px;
	font-size: 12px;
	cursor: pointer;
	flex-shrink: 0;
}

.tt-pair-row .tt-pair-remove:hover {
	background: #F8DDD8;
}

/* ========================================
   バリデーション・状態表示
   ======================================== */
.tt-validation {
	margin-top: 14px;
	padding: 12px 14px;
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.7;
}

.tt-validation--ok {
	background: #F0F8F2;
	border: 1px solid #C5E2CD;
	color: #2E5A38;
}

.tt-validation--warn {
	background: #FFF8EC;
	border: 1px solid #F5DEAA;
	color: #6B5520;
}

.tt-validation--ng {
	background: #FCEFEC;
	border: 1px solid #F0C4BD;
	color: #6B1F12;
}

/* ========================================
   印刷用スタイル
   ======================================== */
@media print {
	body {
		background: #FFFFFF !important;
	}
	.header,
	.footer,
	.breadcrumb,
	.tt-input-section,
	.action-section,
	.tt-no-print,
	.adsense-wrapper {
		display: none !important;
	}
	.tt-result-section {
		background: #FFFFFF !important;
		padding: 0 !important;
		border: none !important;
	}
	.tt-group-card {
		break-inside: avoid;
		box-shadow: none !important;
	}
	.card {
		page-break-inside: avoid;
		box-shadow: none !important;
		border: 1px solid #CCC !important;
	}
}

/* ========================================
   席替えツール用：教室レイアウト
   ======================================== */
.tt-classroom {
	margin: 16px auto;
	padding: 16px 12px;
	background: #F8F9FB;
	border: 2px solid #5C7CFA;
	border-radius: 12px;
	max-width: 100%;
	overflow-x: auto;
}

.tt-classroom-board {
	background: #2C3E50;
	color: #FFFFFF;
	text-align: center;
	padding: 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	border-radius: 4px;
	margin-bottom: 16px;
}

.tt-classroom-grid {
	display: grid;
	gap: 8px;
	margin: 0 auto;
}

.tt-seat {
	background: #FFFFFF;
	border: 1px solid #C8D4F0;
	border-radius: 6px;
	padding: 6px 4px;
	min-height: 50px;
	font-size: 12px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text);
	line-height: 1.3;
}

.tt-seat--empty {
	background: transparent;
	border: 1px dashed #C8D4F0;
	color: var(--color-text-muted);
	font-size: 10px;
}

.tt-seat--front {
	background: #FFF8EC;
	border-color: #F5DEAA;
}

.tt-seat--back {
	background: #F0F8F2;
	border-color: #C5E2CD;
}

.tt-seat--corridor {
	background: #FCEFEC;
	border-color: #F0C4BD;
}

.tt-classroom-axis {
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
	font-size: 10px;
	color: var(--color-text-muted);
}

/* ========================================
   結婚式席次表用：会場レイアウト
   ======================================== */
.tt-venue {
	margin: 16px auto;
	padding: 24px 16px;
	background: linear-gradient(180deg, #FFF7F5 0%, #FFFFFF 100%);
	border: 1px solid #F0C4BD;
	border-radius: 12px;
	max-width: 100%;
}

.tt-venue-takasago {
	max-width: 320px;
	margin: 0 auto 24px;
	background: linear-gradient(135deg, #C0392B 0%, #E74C3C 100%);
	color: #FFFFFF;
	padding: 16px;
	border-radius: 8px;
	text-align: center;
}

.tt-venue-takasago-title {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin-bottom: 6px;
}

.tt-venue-takasago-names {
	font-size: 13px;
}

.tt-venue-tables {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.tt-venue-table {
	background: #FFFFFF;
	border: 1px solid #F0C4BD;
	border-radius: 12px;
	padding: 14px;
	box-shadow: 0 1px 3px rgba(192, 57, 43, 0.06);
}

.tt-venue-table-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
	padding-bottom: 8px;
	border-bottom: 1px dashed #F0C4BD;
}

.tt-venue-table-name {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 700;
	color: #C0392B;
}

.tt-venue-table-meta {
	font-size: 11px;
	color: var(--color-text-muted);
}

.tt-venue-table-seats {
	list-style: none;
	padding: 0;
	margin: 0;
}

.tt-venue-table-seats li {
	font-size: 13px;
	padding: 4px 0;
	color: var(--color-text);
	display: flex;
	align-items: center;
	gap: 6px;
}

.tt-venue-table-seats .tt-seat-num {
	display: inline-block;
	min-width: 22px;
	font-size: 11px;
	color: #FFFFFF;
	background: #C0392B;
	border-radius: 11px;
	padding: 2px 6px;
	text-align: center;
	font-weight: 700;
}

.tt-venue-table-seats .tt-role {
	font-size: 10px;
	color: #C0392B;
	background: #FCEFEC;
	padding: 2px 6px;
	border-radius: 3px;
	margin-left: auto;
}

/* ========================================
   汎用リスト・リンク（こんな場面で使えます／参考リンク等）
   ======================================== */
.legal-list {
	margin: 12px 0;
	padding-left: 24px;
}

.legal-list li {
	font-size: 14px;
	line-height: 1.85;
	color: var(--color-text-secondary);
	margin-bottom: 8px;
}

.legal-list li:last-child {
	margin-bottom: 0;
}

.legal-list strong {
	color: var(--color-text);
	font-weight: 700;
}

.legal-link {
	color: #3D5AC8;
	text-decoration: none;
}

.legal-link:hover {
	text-decoration: underline;
}

@media (max-width: 600px) {
	.legal-list li {
		font-size: 13px;
	}
}

/* ========================================
   関連ツール（カテゴリページ末尾の関連ツール一覧）
   ======================================== */
.related-tools-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.related-tools-item {
	margin: 0;
}

.related-tools-link {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	text-decoration: none;
	transition: all 0.2s ease;
}

.related-tools-link:hover {
	background: var(--color-white);
	border-color: #5C7CFA;
}

.related-tools-icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 700;
	color: var(--color-white);
	background: linear-gradient(135deg, #5C7CFA 0%, #3D5AC8 100%);
	border-radius: var(--radius);
}

.related-tools-icon--external {
	background: linear-gradient(135deg, #999 0%, #666 100%);
}

.related-tools-text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.related-tools-name {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 700;
	color: var(--color-text);
}

.related-tools-desc {
	font-size: 12px;
	color: var(--color-text-secondary);
	line-height: 1.5;
}