/*
 * Cocomiru Matching - フロントエンド共通スタイル
 * ダッシュボード・案件検索・登録フォーム・チャット等、全ページに共通適用します。
 * カラー: ティール〜グリーン系をプライマリカラーに、職種ごとに色分けしたタグ/バッジを使用。
 */

/* ---------- 変数定義 ---------- */
:root {
	--ccm-primary: #3ec9b0;
	--ccm-primary-dark: #2a9d8a;
	--ccm-primary-light: #e6f7f4;
	--ccm-accent-green: #4caf50;

	--ccm-text: #2f3a3a;
	--ccm-text-light: #74807e;
	--ccm-bg: #ffffff;
	--ccm-bg-soft: #f4f7f6;
	--ccm-border: #e3e9e8;

	--ccm-radius-lg: 16px;
	--ccm-radius-md: 10px;
	--ccm-radius-sm: 6px;
	--ccm-radius-pill: 999px;

	--ccm-shadow: 0 2px 14px rgba(30, 40, 40, 0.07);
	--ccm-shadow-hover: 0 8px 22px rgba(30, 40, 40, 0.12);

	--ccm-error-bg: #fdecec;
	--ccm-error-text: #d6455a;
	--ccm-success-bg: #e9f8ee;
	--ccm-success-text: #2a9d4f;

	--ccm-tag-medical-bg: #ffe3ea;
	--ccm-tag-medical-text: #d6336c;
	--ccm-tag-dental-bg: #e0f0ff;
	--ccm-tag-dental-text: #1c7ed6;
	--ccm-tag-pharmacy-bg: #e2f8e6;
	--ccm-tag-pharmacy-text: #2b8a3e;

	--ccm-footer-bg: #20282a;
	--ccm-footer-text: #c7d1d0;
}

/* ---------- 共通レイアウト ---------- */
.ccm-dashboard,
.ccm-shift-search,
.ccm-chat-thread,
.ccm-auth-wrap {
	max-width: 1000px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
	line-height: 1.7;
	color: var(--ccm-text);
	font-size: 16px;
}
.ccm-auth-wrap {
	max-width: 460px;
}
.ccm-dashboard *,
.ccm-shift-search *,
.ccm-chat-thread *,
.ccm-auth-wrap *,
.ccm-card * {
	box-sizing: border-box;
}

.ccm-card {
	background: var(--ccm-bg);
	border: 1px solid var(--ccm-border);
	border-radius: var(--ccm-radius-lg);
	box-shadow: var(--ccm-shadow);
	padding: 26px 28px;
}
.ccm-auth-wrap .ccm-card {
	padding: 34px 30px;
}

.ccm-section-title {
	font-size: 1.2em;
	margin: 40px 0 16px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--ccm-border);
	color: var(--ccm-text);
}
.ccm-section-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 40px 0 16px;
	flex-wrap: wrap;
	gap: 10px;
}
.ccm-section-head .ccm-section-title {
	margin: 0;
	border-bottom: none;
	padding-bottom: 0;
}
.ccm-form-title {
	font-size: 1.3em;
	text-align: center;
	margin: 0 0 22px;
}
.ccm-link {
	color: var(--ccm-primary-dark);
	font-weight: 600;
	text-decoration: none;
}
.ccm-link:hover {
	text-decoration: underline;
}

/* ---------- 通知・トースト ---------- */
.ccm-notice {
	padding: 14px 18px;
	border-radius: var(--ccm-radius-md);
	margin-bottom: 18px;
	font-size: 0.92em;
	font-weight: 600;
}
.ccm-notice-success { background: var(--ccm-success-bg); color: var(--ccm-success-text); }
.ccm-notice-error { background: var(--ccm-error-bg); color: var(--ccm-error-text); }

/* ---------- ボタン ---------- */
.ccm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 24px;
	border-radius: var(--ccm-radius-pill);
	border: none;
	font-size: 0.95em;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
	line-height: 1.4;
	transition: filter 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.ccm-btn-primary {
	background: linear-gradient(135deg, var(--ccm-primary), var(--ccm-accent-green));
	color: #fff;
	box-shadow: 0 4px 14px rgba(62, 201, 176, 0.32);
}
.ccm-btn-primary:hover { filter: brightness(1.06); }
.ccm-btn-outline {
	background: #fff;
	color: var(--ccm-primary-dark);
	border: 2px solid var(--ccm-primary);
}
.ccm-btn-outline:hover { background: var(--ccm-primary-light); }
.ccm-btn-ghost {
	background: var(--ccm-bg-soft);
	color: var(--ccm-text);
}
.ccm-btn-ghost:hover { background: var(--ccm-border); }
.ccm-btn-block { width: 100%; }
.ccm-btn-small { padding: 7px 16px; font-size: 0.84em; }

/* ---------- フォーム ---------- */
.ccm-form { margin-bottom: 8px; }
.ccm-field { margin-bottom: 18px; }
.ccm-field-row { display: flex; gap: 16px; flex-wrap: wrap; }
.ccm-field-row .ccm-field { flex: 1 1 200px; margin-bottom: 18px; }
.ccm-field-row-checkbox { align-items: center; gap: 10px 14px; }
.ccm-field label,
.ccm-field-row > label {
	display: block;
	font-weight: 700;
	font-size: 0.88em;
	margin-bottom: 6px;
	color: var(--ccm-text);
}
.ccm-required {
	color: var(--ccm-error-text);
	font-size: 0.72em;
	font-weight: 700;
	margin-left: 6px;
	vertical-align: middle;
}
.ccm-form-hint { font-size: 0.82em; color: var(--ccm-text-light); margin: 6px 0 0; }
.ccm-form-footnote { text-align: center; font-size: 0.88em; margin-top: 20px; color: var(--ccm-text-light); }

.ccm-input {
	width: 100%;
	padding: 12px 14px;
	border-radius: var(--ccm-radius-md);
	border: 1px solid var(--ccm-border);
	background: var(--ccm-bg-soft);
	font-size: 0.95em;
	color: var(--ccm-text);
	transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
	font-family: inherit;
}
.ccm-input:focus {
	outline: none;
	border-color: var(--ccm-primary);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(62, 201, 176, 0.16);
}
textarea.ccm-input { resize: vertical; min-height: 90px; }
.ccm-input-small { max-width: 170px; padding: 8px 12px; }

.ccm-input-wrap { position: relative; }
.ccm-input-wrap-icon .ccm-input { padding-left: 42px; }
.ccm-input-icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--ccm-text-light);
	display: flex;
	align-items: center;
	pointer-events: none;
	font-weight: 700;
}

.ccm-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--ccm-bg-soft);
	border: 1px solid var(--ccm-border);
	padding: 8px 14px;
	border-radius: var(--ccm-radius-pill);
	cursor: pointer;
	font-size: 0.88em;
	font-weight: 600;
}
.ccm-checkbox input { accent-color: var(--ccm-primary); }

.ccm-role-picker { display: flex; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.ccm-role-option {
	flex: 1 1 220px;
	display: flex;
	gap: 10px;
	align-items: flex-start;
	border: 2px solid var(--ccm-border);
	border-radius: var(--ccm-radius-md);
	padding: 14px 16px;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
}
.ccm-role-option:has(input:checked) {
	border-color: var(--ccm-primary);
	background: var(--ccm-primary-light);
}
.ccm-role-option input { margin-top: 4px; accent-color: var(--ccm-primary); }
.ccm-role-option-body strong { display: block; font-size: 0.92em; margin-bottom: 2px; }
.ccm-role-option-body small { color: var(--ccm-text-light); font-size: 0.82em; }

/* ---------- テーブル ---------- */
.ccm-table-wrap {
	overflow-x: auto;
	margin-bottom: 32px;
	border-radius: var(--ccm-radius-md);
	border: 1px solid var(--ccm-border);
}
.ccm-table { width: 100%; border-collapse: collapse; background: var(--ccm-bg); }
.ccm-table th,
.ccm-table td {
	padding: 12px 14px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--ccm-border);
	font-size: 0.92em;
}
.ccm-table th { background: var(--ccm-bg-soft); font-weight: 700; color: var(--ccm-text-light); white-space: nowrap; }
.ccm-table tr:last-child td { border-bottom: none; }
.ccm-entry-actions > * { margin-bottom: 6px; }
.ccm-inline-form { display: inline-block; }
.ccm-worker-cell { display: flex; align-items: center; gap: 8px; }
.ccm-worker-cell img { border-radius: 50%; }

.ccm-inline-details {
	margin-top: 8px;
	border: 1px dashed var(--ccm-border);
	border-radius: var(--ccm-radius-sm);
	padding: 8px 12px;
	background: var(--ccm-bg-soft);
}
.ccm-inline-details summary { cursor: pointer; font-weight: 700; font-size: 0.85em; color: var(--ccm-primary-dark); }
.ccm-inline-detail-form { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.ccm-inline-detail-form label { font-size: 0.85em; display: block; font-weight: 700; }

.ccm-billing-summary {
	margin-top: 10px;
	padding: 12px 14px;
	background: var(--ccm-primary-light);
	border-radius: var(--ccm-radius-sm);
	font-size: 0.88em;
}
.ccm-billing-summary p { margin: 3px 0; }

/* ---------- タグ・ステータスバッジ ---------- */
.ccm-tag-group { display: flex; flex-wrap: wrap; gap: 6px; }
.ccm-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 12px;
	border-radius: var(--ccm-radius-pill);
	font-size: 0.78em;
	font-weight: 700;
	white-space: nowrap;
}
.ccm-tag-icon { flex-shrink: 0; }
.ccm-tag-medical { background: var(--ccm-tag-medical-bg); color: var(--ccm-tag-medical-text); }
.ccm-tag-dental { background: var(--ccm-tag-dental-bg); color: var(--ccm-tag-dental-text); }
.ccm-tag-pharmacy { background: var(--ccm-tag-pharmacy-bg); color: var(--ccm-tag-pharmacy-text); }
.ccm-tag-default { background: var(--ccm-bg-soft); color: var(--ccm-text-light); }
.ccm-tag-outline { background: #fff; border: 1px solid var(--ccm-border); color: var(--ccm-text-light); }
.ccm-tag-placeholder { font-size: 0.82em; color: var(--ccm-text-light); }

.ccm-status-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: var(--ccm-radius-pill);
	font-size: 0.8em;
	font-weight: 700;
	white-space: nowrap;
}
.ccm-status-entried { background: #eef2f7; color: #5b6b7a; }
.ccm-status-chatting { background: #fff6e0; color: #a6790b; }
.ccm-status-matched { background: var(--ccm-primary-light); color: var(--ccm-primary-dark); }
.ccm-status-worked { background: #e6f0fb; color: #2464b4; }
.ccm-status-completed { background: var(--ccm-success-bg); color: var(--ccm-success-text); }
.ccm-status-direct_hired { background: #efe6fb; color: #7c4dbd; }
.ccm-status-rejected { background: var(--ccm-error-bg); color: var(--ccm-error-text); }
.ccm-status-withdrawn { background: #f0f0f0; color: #888; }
.ccm-status-no_show { background: var(--ccm-error-bg); color: var(--ccm-error-text); }
.ccm-status-cancelled { background: #fbe9e7; color: #b3411f; }

/* ---------- 運営ダッシュボード(集計カード・お知らせ) ---------- */
.ccm-stat-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-top: 20px;
}
.ccm-stat-card {
	text-align: center;
}
.ccm-stat-label {
	margin: 0 0 10px;
	font-size: 0.88em;
	font-weight: 700;
	color: var(--ccm-primary-dark);
}
.ccm-stat-value {
	margin: 0;
	font-size: 2.2em;
	font-weight: 800;
	color: var(--ccm-text);
}
.ccm-announce-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ccm-announce-item {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--ccm-border);
}
.ccm-announce-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}
.ccm-announce-date {
	flex-shrink: 0;
	font-size: 0.82em;
	color: var(--ccm-text-light);
}
.ccm-announce-title {
	font-weight: 600;
}
.ccm-operator-note {
	margin-top: 18px;
}

/* ---------- プロフィールカード(ワーカー) ---------- */
.ccm-profile-card { display: flex; gap: 20px; align-items: center; margin-bottom: 30px; }
.ccm-profile-avatar img { border-radius: 50%; display: block; }
.ccm-profile-info h2 { margin: 0 0 8px; font-size: 1.25em; }
.ccm-star-rating { color: #f5b301; font-size: 1em; margin-bottom: 10px; }
.ccm-star-rating-value { color: var(--ccm-text-light); font-size: 0.85em; margin-left: 4px; }
.ccm-star-rating-empty { color: var(--ccm-text-light); font-size: 0.85em; }

/* ---------- 案件検索・案件カード ---------- */
.ccm-search-form {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 26px;
	align-items: center;
}
.ccm-search-keyword { flex: 2 1 260px; }
.ccm-search-form select.ccm-input { flex: 1 1 160px; width: auto; }

.ccm-shift-list { list-style: none; padding: 0; margin: 0; }
.ccm-shift-card {
	display: flex;
	gap: 22px;
	align-items: stretch;
	margin-bottom: 18px;
	transition: box-shadow 0.15s;
}
.ccm-shift-card:hover { box-shadow: var(--ccm-shadow-hover); }
.ccm-shift-card-main { flex: 1; min-width: 0; }
.ccm-shift-card-head {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}
.ccm-shift-updated { margin-left: auto; font-size: 0.78em; color: var(--ccm-text-light); }
.ccm-shift-title { font-size: 1.25em; font-weight: 800; margin: 0 0 8px; color: var(--ccm-text); }
.ccm-shift-excerpt { color: var(--ccm-text-light); font-size: 0.92em; margin-bottom: 10px; }
.ccm-shift-excerpt p { margin: 0; }

.ccm-info-table { width: 100%; border-collapse: collapse; margin: 12px 0 16px; font-size: 0.9em; }
.ccm-info-table th {
	text-align: left;
	color: var(--ccm-text-light);
	font-weight: 700;
	padding: 5px 12px 5px 0;
	width: 110px;
	white-space: nowrap;
	vertical-align: top;
}
.ccm-info-table td { padding: 5px 0; color: var(--ccm-text); }

.ccm-shift-card-side {
	width: 120px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-align: center;
	border-left: 1px solid var(--ccm-border);
	padding-left: 20px;
}
.ccm-shift-card-side img { border-radius: 50%; }
.ccm-shift-card-side-name { font-size: 0.82em; color: var(--ccm-text-light); }

.ccm-pagination { margin-top: 26px; display: flex; gap: 6px; flex-wrap: wrap; }
.ccm-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border-radius: var(--ccm-radius-sm);
	background: var(--ccm-bg-soft);
	color: var(--ccm-text);
	text-decoration: none;
	font-size: 0.9em;
}
.ccm-pagination .page-numbers.current { background: var(--ccm-primary); color: #fff; }

/* ---------- チャット(メッセージ) ---------- */
.ccm-chat-header {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--ccm-border);
}
.ccm-chat-header img { border-radius: 50%; }
.ccm-chat-header h2 { margin: 0; font-size: 1.15em; }

.ccm-messages { margin-bottom: 18px; max-height: 480px; overflow-y: auto; }
.ccm-message {
	padding: 12px 16px;
	border-radius: 14px;
	margin-bottom: 10px;
	max-width: 72%;
}
.ccm-message-me { background: var(--ccm-primary-light); margin-left: auto; border-bottom-right-radius: 4px; }
.ccm-message-other { background: var(--ccm-bg-soft); border-bottom-left-radius: 4px; }
.ccm-message strong { display: block; font-size: 0.78em; color: var(--ccm-text-light); margin-bottom: 3px; font-weight: 700; }
.ccm-message p { margin: 0; white-space: pre-wrap; word-break: break-word; }
.ccm-message time { display: block; font-size: 0.72em; color: var(--ccm-text-light); margin-top: 5px; }

.ccm-message-form { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 10px; }
.ccm-message-form textarea { flex: 1; }
.ccm-review-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.ccm-review-form label { font-weight: 700; font-size: 0.88em; }

/* ---------- フッター(任意利用パーツ / [ccm_footer]) ---------- */
.ccm-footer {
	background: var(--ccm-footer-bg);
	color: var(--ccm-footer-text);
	margin-top: 48px;
	padding: 48px 24px 22px;
	font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}
.ccm-footer-inner {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	/* auto-fitで幅に応じて自動的に列数が減る形にしている(cocomiru-theme側と同じ理由による対処)。 */
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 32px;
}
.ccm-footer-logo { color: #fff; font-size: 1.2em; font-weight: 800; margin: 0 0 8px; }
.ccm-footer-tagline { font-size: 0.85em; color: #93a19f; margin: 0; }
.ccm-footer h4 { color: #fff; font-size: 0.92em; margin: 0 0 14px; }
.ccm-footer ul { list-style: none; margin: 0; padding: 0; }
.ccm-footer li { margin-bottom: 9px; }
.ccm-footer a { color: var(--ccm-footer-text); text-decoration: none; font-size: 0.88em; }
.ccm-footer a:hover { color: #fff; }
.ccm-footer-copyright {
	max-width: 1100px;
	margin: 32px auto 0;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 0.78em;
	color: #93a19f;
}

/* ---------- プロフィールフォーム: セクション見出し・資格カテゴリ・写真・職務経歴 ---------- */
.ccm-form-section-title {
	font-size: 1.05em;
	font-weight: 800;
	margin: 36px 0 18px;
	padding-bottom: 9px;
	border-bottom: 1px solid var(--ccm-border);
	color: var(--ccm-primary-dark);
}
.ccm-form-section-title:first-child { margin-top: 0; }

.ccm-qual-group { margin-bottom: 14px; }
.ccm-qual-group-label {
	display: block;
	font-weight: 700;
	font-size: 0.84em;
	margin-bottom: 8px;
	color: var(--ccm-text-light);
}

.ccm-photo-upload { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ccm-photo-upload-preview img { border-radius: 50%; display: block; object-fit: cover; }
.ccm-photo-empty {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--ccm-bg-soft);
	border: 1px dashed var(--ccm-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.72em;
	color: var(--ccm-text-light);
	text-align: center;
	flex-shrink: 0;
}

.ccm-pref-checkboxes {
	max-height: 220px;
	overflow-y: auto;
	border: 1px solid var(--ccm-border);
	border-radius: var(--ccm-radius-md);
	padding: 14px;
	background: var(--ccm-bg-soft);
}

.ccm-work-history-card {
	border: 1px solid var(--ccm-border);
	border-radius: var(--ccm-radius-md);
	padding: 18px 18px 4px;
	margin-bottom: 16px;
	background: var(--ccm-bg-soft);
}
.ccm-work-history-card-title { font-weight: 800; font-size: 0.92em; margin: 0 0 14px; color: var(--ccm-text); }

/* ---------- レスポンシブ ---------- */
@media (max-width: 680px) {
	.ccm-shift-card { flex-direction: column; }
	.ccm-shift-card-side {
		border-left: none;
		border-top: 1px solid var(--ccm-border);
		flex-direction: row;
		width: 100%;
		justify-content: flex-start;
		padding-left: 0;
		padding-top: 14px;
	}
	.ccm-message { max-width: 88%; }
	.ccm-stat-grid { grid-template-columns: 1fr; }
	.ccm-announce-item { flex-direction: column; gap: 2px; }
}

/* ------------------------------------------------------------------
   v0.6.0: 運営ダッシュボードのアクセスグラフ / なりすましバー / お問い合わせ
------------------------------------------------------------------- */

.ccm-access-card { padding: 24px; }
.ccm-access-total { font-size: 15px; margin: 0 0 4px; }
.ccm-access-total strong { font-size: 30px; color: var(--ccm-primary, #028090); }
.ccm-access-period { font-size: 12px; color: var(--ccm-text-light, #5c7a80); margin: 0 0 16px; }

.ccm-access-legend { list-style: none; display: flex; gap: 20px; padding: 0; margin: 0 0 12px; font-size: 12px; }
.ccm-access-legend li { display: flex; align-items: center; gap: 6px; }
.ccm-legend-swatch { width: 18px; height: 10px; border-radius: 2px; display: inline-block; }
.ccm-legend-in { background: #028090; }
.ccm-legend-out { background: #9fdcd6; }

.ccm-access-chart { display: flex; align-items: flex-end; gap: 3px; height: 200px; }
.ccm-access-bar { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.ccm-access-stack { flex: 1; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.ccm-access-stack span { display: block; width: 100%; }
.ccm-access-out { background: #9fdcd6; }
.ccm-access-in { background: #028090; }
.ccm-access-bar small { font-size: 9px; color: var(--ccm-text-light, #5c7a80); margin-top: 4px; }

/* なりすまし中であることを常に明示するバー */
.ccm-impersonation-bar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 99999;
	background: #b32d2e; color: #fff; padding: 10px 16px;
	display: flex; align-items: center; justify-content: center; gap: 16px;
	font-size: 13px; flex-wrap: wrap;
}
.ccm-impersonation-bar form { margin: 0; }
.ccm-impersonation-bar button {
	background: #fff; color: #b32d2e; border: none; border-radius: 4px;
	padding: 6px 14px; font-size: 13px; font-weight: bold; cursor: pointer;
}

.ccm-contact { max-width: 680px; margin: 0 auto; }

/* ------------------------------------------------------------------
   v0.8.0: 勤務日カレンダー / 郵便番号 / 審査ステータス
------------------------------------------------------------------- */

.ccm-zip-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.ccm-calendar {
	border: 1px solid var(--ccm-border, #d3ebe8);
	border-radius: 8px;
	padding: 12px;
	max-width: 380px;
	background: #fff;
}
.ccm-calendar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ccm-calendar-title { font-weight: bold; font-size: 15px; }
.ccm-calendar-nav {
	border: 1px solid var(--ccm-border, #d3ebe8); background: #fff; cursor: pointer;
	width: 32px; height: 32px; border-radius: 6px; font-size: 18px; line-height: 1;
	color: var(--ccm-primary, #028090);
}
.ccm-calendar-nav:hover { background: var(--ccm-bg-soft, #eff8f7); }

.ccm-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.ccm-calendar-week { text-align: center; font-size: 11px; color: var(--ccm-text-light, #5c7a80); padding: 4px 0; }
.ccm-calendar-day {
	aspect-ratio: 1 / 1; border: 1px solid transparent; background: var(--ccm-bg-soft, #eff8f7);
	border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--ccm-text, #1a2e35);
	display: flex; align-items: center; justify-content: center; padding: 0;
}
.ccm-calendar-day:hover:not(:disabled) { border-color: var(--ccm-primary, #028090); }
.ccm-calendar-day.is-selected { background: var(--ccm-primary, #028090); color: #fff; font-weight: bold; }
.ccm-calendar-day.ccm-calendar-past { background: transparent; color: #c3d4d4; cursor: default; }
.ccm-calendar-blank { background: transparent; border: none; cursor: default; }

/* 案件の審査ステータスバッジ */
.ccm-status-pending { background: #fff4e0; color: #a86a12; }
.ccm-status-approved { background: #e3f5ef; color: #1f7a5c; }
.ccm-status-rejected { background: var(--ccm-error-bg, #fdecea); color: var(--ccm-error-text, #b32d2e); }
.ccm-status-draft { background: #eceff1; color: #566369; }
/* 募集状況(募集中 / 締切) */
.ccm-status-open { background: var(--ccm-primary-light); color: var(--ccm-primary-dark); }
.ccm-status-closed { background: #eceff1; color: #566369; }

/* タブ(マイページ / 募集情報) */
.ccm-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--ccm-border, #d3ebe8); margin-bottom: 24px; }
.ccm-tab {
	padding: 12px 24px; text-decoration: none; font-weight: bold; font-size: 15px;
	color: var(--ccm-text-light, #5c7a80); border-bottom: 3px solid transparent;
	margin-bottom: -2px; border-radius: 6px 6px 0 0;
}
.ccm-tab:hover { background: var(--ccm-bg-soft, #eff8f7); }
.ccm-tab.is-active { color: var(--ccm-primary, #028090); border-bottom-color: var(--ccm-primary, #028090); }

.ccm-table-plain th { background: transparent; font-weight: bold; color: var(--ccm-text-light, #5c7a80); text-align: left; }

/* ------------------------------------------------------------------
   v0.9.0: 保有資格・レセコンの分類表示 / ロール別登録ページ
------------------------------------------------------------------- */

.ccm-form-lead { font-size: 14px; line-height: 1.8; color: var(--ccm-text-light, #5c7a80); margin: -8px 0 20px; }

/* 資格の大分類(開閉式) */
details.ccm-qual-group {
	border: 1px solid var(--ccm-border, #d3ebe8); border-radius: 8px;
	margin-bottom: 10px; background: #fff;
}
details.ccm-qual-group > summary {
	cursor: pointer; padding: 14px 18px; font-weight: bold; font-size: 14px;
	color: var(--ccm-primary, #028090); list-style: none; position: relative; padding-right: 42px;
}
details.ccm-qual-group > summary::-webkit-details-marker { display: none; }
details.ccm-qual-group > summary::after {
	content: '+'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
	font-size: 18px; font-weight: normal;
}
details.ccm-qual-group[open] > summary::after { content: '−'; }
.ccm-qual-count {
	display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 10px;
	background: var(--ccm-primary, #028090); color: #fff; font-size: 11px; font-weight: normal;
}

/* 資格・レセコンの小分類 */
.ccm-qual-subgroup { padding: 4px 18px 14px; }
.ccm-qual-subgroup-label {
	display: block; font-size: 12px; font-weight: bold;
	color: var(--ccm-text-light, #5c7a80); margin-bottom: 8px;
}
.ccm-qual-group-other {
	border: 1px solid var(--ccm-border, #d3ebe8); border-radius: 8px;
	padding: 14px 18px; background: #fff;
}
.ccm-qual-group-other .ccm-qual-group-label {
	display: block; font-weight: bold; font-size: 14px;
	color: var(--ccm-primary, #028090); margin-bottom: 10px;
}

/* ==========================================================
 * 施設の基本情報(クリニックプロフィール)
 * ========================================================== */

.ccm-notice-info { background: var(--ccm-info-bg, #eef6f8); color: var(--ccm-info-text, #35606b); }

.ccm-form-subtitle {
	font-size: 1.02em;
	font-weight: bold;
	margin: 28px 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--ccm-border, #e2ebee);
}
.ccm-form-subtitle:first-of-type { margin-top: 4px; }

.ccm-form-static { margin: 0; font-weight: bold; }
.ccm-form-note { font-size: 0.88em; color: var(--ccm-text-light); margin: 0 0 14px; }

/* 選択肢が多い項目は、幅に応じて折り返す */
.ccm-checkbox-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 6px 14px;
}
.ccm-checkbox-group-title {
	font-size: 0.86em;
	font-weight: bold;
	color: var(--ccm-text-light, #5c7a80);
	margin: 14px 0 6px;
}

.ccm-clinic-profile-form .ccm-input + .ccm-input { margin-top: 8px; }

/* 診療時間の入力表 */
.ccm-hours-table th { width: 52px; white-space: nowrap; }
.ccm-hours-table td { white-space: nowrap; }
.ccm-input-time { display: inline-block; width: auto; min-width: 108px; padding: 6px 8px; }

.ccm-thumb-preview { border-radius: 10px; object-fit: cover; }
.ccm-cover-preview { max-width: 100%; height: auto; border-radius: 12px; }

/* 公開表示 */
.ccm-clinic-profile-view { margin-top: 32px; }
.ccm-clinic-cover img { width: 100%; height: auto; border-radius: 14px; display: block; }
.ccm-clinic-head { display: flex; align-items: center; gap: 14px; margin: 18px 0 10px; }
.ccm-clinic-head .ccm-section-title { margin: 0; }
.ccm-clinic-icon { border-radius: 12px; object-fit: cover; flex: none; }
.ccm-clinic-atmosphere { margin: 0 0 18px; line-height: 1.9; }
.ccm-hours-view th, .ccm-hours-view td { text-align: center; white-space: nowrap; }

@media (max-width: 600px) {
	.ccm-checkbox-grid { grid-template-columns: 1fr; }
	.ccm-input-time { min-width: 0; width: 46%; }
	.ccm-clinic-head { flex-wrap: wrap; gap: 10px; }
}

/* 応募者の経歴を開いて確認するブロック */
.ccm-worker-detail { margin-top: 6px; }
.ccm-worker-detail > summary { cursor: pointer; font-size: 0.85em; color: var(--ccm-primary); }
.ccm-worker-profile-view { margin-top: 10px; }
.ccm-worker-profile-view .ccm-table { font-size: 0.9em; }

/* -----------------------------------------------------------
   案件詳細ページ(検索結果 → 詳細 → エントリー の導線)
   ----------------------------------------------------------- */
.ccm-breadcrumb { font-size: 0.85em; color: var(--ccm-text-light); margin: 0 0 14px; }
.ccm-breadcrumb a { color: var(--ccm-text-light); text-decoration: none; }
.ccm-breadcrumb a:hover { color: var(--ccm-primary); text-decoration: underline; }
.ccm-breadcrumb span[aria-hidden] { margin: 0 6px; }

.ccm-shift-single-head { margin-bottom: 22px; }
.ccm-shift-single-title { margin: 10px 0 0; }

.ccm-shift-single-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 28px;
	align-items: start;
}
.ccm-shift-single-main { min-width: 0; }
.ccm-shift-single-content { line-height: 1.9; }
.ccm-shift-single-back { margin-top: 28px; }

/* エントリー用の追従カード */
.ccm-shift-single-side { position: sticky; top: 90px; display: grid; gap: 14px; }
.ccm-entry-box { padding: 20px; }
.ccm-entry-box-label { font-size: 0.8em; color: var(--ccm-text-light); margin: 0; }
.ccm-entry-box-wage {
	font-size: 2em;
	font-weight: 700;
	color: var(--ccm-primary);
	margin: 2px 0 6px;
	line-height: 1.2;
}
.ccm-entry-box-wage span { font-size: 0.5em; font-weight: 500; margin-left: 2px; }
.ccm-entry-box-meta {
	margin: 14px 0 18px;
	padding-top: 14px;
	border-top: 1px solid var(--ccm-border);
	font-size: 0.88em;
}
.ccm-entry-box-meta dt { color: var(--ccm-text-light); margin-top: 8px; }
.ccm-entry-box-meta dt:first-child { margin-top: 0; }
.ccm-entry-box-meta dd { margin: 2px 0 0; }
.ccm-entry-box-status { display: block; text-align: center; margin: 0 0 10px; }
.ccm-entry-box .ccm-form-hint { margin-top: 10px; }

.ccm-entry-box-clinic { display: flex; align-items: center; gap: 12px; padding: 16px 20px; }
.ccm-entry-box-clinic img { border-radius: 10px; flex: none; }
.ccm-entry-box-clinic-name { margin: 2px 0 0; font-weight: 600; }

/* 検索結果カードの操作エリア */
.ccm-shift-card-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ccm-shift-title a { color: inherit; text-decoration: none; }
.ccm-shift-title a:hover { color: var(--ccm-primary); }

@media (max-width: 860px) {
	.ccm-shift-single-layout { grid-template-columns: 1fr; }
	.ccm-shift-single-side { position: static; }
}

/* ==================================================================
   スマートフォン向けのダッシュボード最適化(v0.16.0)

   ダッシュボードは列数の多い表を使うため、狭い画面では横スクロールが
   発生して読みにくかった。760px以下では表を1件=1カード の縦積みに
   組み替え、各項目に見出し(data-label)を添えて読めるようにする。
   ================================================================== */

@media (max-width: 760px) {

	/* ---- 表をカード表示に組み替える ---- */
	.ccm-table-wrap {
		overflow-x: visible;
		border: none;
		border-radius: 0;
		margin-bottom: 24px;
	}
	.ccm-table,
	.ccm-table tbody,
	.ccm-table tr,
	.ccm-table td {
		display: block;
		width: 100%;
	}
	/* 見出し行はカード表示では不要(各セルに data-label で見出しを出す) */
	.ccm-table thead { display: none; }

	.ccm-table tr {
		background: var(--ccm-bg);
		border: 1px solid var(--ccm-border);
		border-radius: var(--ccm-radius-md);
		padding: 4px 16px;
		margin-bottom: 14px;
		box-shadow: var(--ccm-shadow);
	}
	.ccm-table tr:last-child { margin-bottom: 0; }

	.ccm-table td {
		border-bottom: 1px solid var(--ccm-border);
		padding: 10px 0;
		font-size: 0.95em;
	}
	.ccm-table tr td:last-child { border-bottom: none; }

	/* 項目名(表の見出しの代わり) */
	.ccm-table td[data-label]::before {
		content: attr(data-label);
		display: block;
		font-size: 0.78em;
		font-weight: 700;
		color: var(--ccm-text-light);
		margin-bottom: 4px;
	}
	/* 「該当なし」等の1セル行は見出しを出さず中央に */
	.ccm-table td[colspan] { text-align: center; color: var(--ccm-text-light); }

	/* 案件名など長い値は折り返す */
	.ccm-table td { word-break: break-word; }

	/* 応募者セル(アイコン+名前+経歴)の折り返し */
	.ccm-worker-cell { flex-wrap: wrap; }

	/* 操作セルのボタン・フォームは全幅にして押しやすくする */
	.ccm-entry-actions > *,
	.ccm-table .ccm-inline-form {
		display: block;
		width: 100%;
		margin-bottom: 8px;
	}
	.ccm-table .ccm-btn,
	.ccm-table .ccm-input,
	.ccm-table select.ccm-input {
		width: 100%;
		max-width: none;
	}
	/* 淡い色のボタンは白背景のカード上で沈むため、輪郭を足して押せると分かるようにする */
	.ccm-table .ccm-btn-ghost { border: 1px solid var(--ccm-border); }

	/* ---- フォーム ---- */
	/* iOSは16px未満の入力欄にフォーカスすると自動でズームするため16pxを確保 */
	.ccm-input,
	select.ccm-input,
	textarea.ccm-input { font-size: 16px; }
	.ccm-input-small { max-width: none; }

	/* ---- ボタンのタップ領域 ---- */
	.ccm-btn { min-height: 44px; padding: 12px 20px; }
	.ccm-btn-small { min-height: 40px; }

	/* 単独で置かれるボタンは全幅にする(フォーム送信・エントリー等) */
	.ccm-form > .ccm-btn,
	.ccm-inline-detail-form .ccm-btn,
	.ccm-card .ccm-inline-form .ccm-btn { width: 100%; }
	/* カード内の入力欄(振込依頼額など)も横幅いっぱいに */
	.ccm-card .ccm-inline-form { display: block; width: 100%; }
	.ccm-card .ccm-inline-form label { display: block; margin-bottom: 10px; }

	/* ---- タブ(マイページ / 募集情報) ---- */
	.ccm-tabs {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.ccm-tabs::-webkit-scrollbar { display: none; }
	.ccm-tab { padding: 12px 16px; font-size: 14px; white-space: nowrap; }

	/* ---- 見出し・余白を詰める ---- */
	.ccm-section-title { font-size: 1.1em; margin: 28px 0 12px; }
	.ccm-card { padding: 18px 16px; }

	/* 見出しと操作ボタンが横並びのブロック */
	.ccm-section-head { flex-direction: column; align-items: stretch; gap: 10px; }
	.ccm-section-head .ccm-btn { width: 100%; }

	/* ---- 統計値 ---- */
	.ccm-stat-value { font-size: 1.6em; }

	/* ---- 案件投稿フォームのカレンダー ---- */
	.ccm-calendar { width: 100%; }
	.ccm-calendar-grid { font-size: 0.9em; }

	/* ---- プロフィールの資格チェックボックス等 ---- */
	.ccm-field-row .ccm-field { flex: 1 1 100%; }
}

/* 実務経験(職種ごとの年数入力) */
.ccm-exp-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); max-width: 760px; }
.ccm-exp-row[hidden] { display: none; }
.ccm-exp-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 12px;
	background: var(--ccm-bg-soft);
	border-radius: var(--ccm-radius-md);
}
.ccm-exp-label { font-size: 0.92em; }
.ccm-exp-input { display: flex; align-items: center; gap: 6px; flex: none; }
.ccm-exp-input .ccm-input { width: 90px; max-width: 90px; text-align: right; background: #fff; }
.ccm-exp-unit { font-size: 0.9em; color: var(--ccm-text-light); }

@media (max-width: 760px) {
	.ccm-exp-grid { max-width: none; grid-template-columns: 1fr; }
	.ccm-exp-input .ccm-input { width: 100px; max-width: 100px; }
}

/* 未読メッセージ件数のバッジ(ダッシュボードの一覧) */
.ccm-unread-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	margin-left: 4px;
	border-radius: 999px;
	background: #e5484d;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	vertical-align: middle;
}

/* 実働時間の承認(クリニック側) */
.ccm-hours-review {
	background: #fff8e8;
	border: 1px solid #f0d9a8;
	border-radius: var(--ccm-radius-md);
	padding: 14px 16px;
	margin-bottom: 10px;
}
.ccm-hours-review-title { font-weight: 700; margin: 0 0 8px; color: #8a6516; }
.ccm-hours-review p { margin: 0 0 8px; font-size: 0.92em; }

/* 実働時間の承認待ちステータス */
.ccm-status-hours_pending { background: #fff4e0; color: #a86a12; }

/* マッチング成立(事前お支払い)の確認欄 */
.ccm-match-confirm {
	background: #eef6ff;
	border: 1px solid #c9dffa;
	border-radius: var(--ccm-radius-md);
	padding: 14px 16px;
	margin-bottom: 10px;
}
.ccm-match-confirm p { margin: 0 0 8px; font-size: 0.92em; }
.ccm-match-confirm p:last-child { margin-bottom: 0; }
.ccm-match-confirm strong { color: var(--ccm-primary, #2f7ec9); }

/* メッセージの定型文ボタン */
.ccm-message-templates { margin: 16px 0 10px; }
.ccm-message-templates-title { font-weight: 700; font-size: 0.86em; margin: 0 0 8px; color: var(--ccm-text-light); }
.ccm-message-template-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.ccm-template-btn {
	background: var(--ccm-primary-light);
	color: var(--ccm-primary-dark);
	border: 1px solid var(--ccm-primary);
	border-radius: var(--ccm-radius-pill);
	padding: 7px 14px;
	font-size: 0.84em;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	line-height: 1.4;
}
.ccm-template-btn:hover { background: var(--ccm-primary); color: #fff; }

/* 当日のご案内(メッセージ画面の折りたたみ) */
.ccm-day-info { margin-top: 18px; }
.ccm-day-info .ccm-info-table { margin-top: 10px; }

/* 振込予定日のご案内 */
.ccm-payout-schedule {
	margin: 10px 0 0;
	padding: 10px 14px;
	background: var(--ccm-primary-light);
	border-radius: var(--ccm-radius-md);
	font-size: 0.9em;
}
.ccm-payout-schedule strong { color: var(--ccm-primary-dark); }


/* ---------- マッチング成立後のキャンセル(利用規約 第5条) ---------- */
.ccm-cancel-box > summary {
	color: #b3411f;
}

.ccm-cancel-box .ccm-cancel-rate {
	margin: 0.6rem 0 0.4rem;
	padding: 0.7rem 0.9rem;
	background: #fbe9e7;
	border-radius: 8px;
	color: #8c2f16;
	line-height: 1.7;
}

.ccm-cancel-box .ccm-cancel-rate strong {
	font-size: 1.1em;
}

.ccm-btn-danger {
	background: #c0392b;
	border: 1px solid #c0392b;
	color: #fff;
}

.ccm-btn-danger:hover,
.ccm-btn-danger:focus {
	background: #a53024;
	border-color: #a53024;
	color: #fff;
}

.ccm-cancel-summary {
	margin-top: 0.4rem;
	color: #8c2f16;
	font-size: 0.9rem;
	line-height: 1.7;
}