/* =========================================================
 * USER用ダッシュボードテーマ（白主体＋紫アクセント）
 * 管理人用 admin.css との差分中心に記載
 * 2025-08-31 微整備：変数の重複解消・フッターは固定しない
 * ========================================================= */

/* reset.css と common.css を @import で読み込み */
@import url("./reset.css");
@import url("./common.css");

/* テーマ変数（ユーザー：白×パープル） */
:root{
	--user-accent: #7c3aed;
	--user-accent-dark: #5b21b6;

	/* 管理系と同名の変数をユーザー色で上書き */
	--sys-green: #7c3aed;
	--sys-green-bg: #eadefe;
	--sys-green-600: #7c3aed;
	--sys-green-700: #5b21b6;
	--sys-green-50: #f5f3ff;
	--sys-border: #ddd;
	--sys-text: #0f172a;
	--sys-muted: #64748b;
	--sys-bg: #ffffff;
	--sys-card: #ffffff;
	--sys-shadow: 0 10px 30px rgba(0,0,0,.05);
}

/* 見出しサイズ */
h1{	font-size:2.2rem!important;	margin-bottom:.8em; }
h2{	font-size:2.0rem!important;	margin:1.2em 0 .6em; }
h3{	font-size:1.8rem!important;	margin:1.0em 0 .5em; }


.inBox, main.sys-main  {
	max-width:1200px !important;
	margin:20px auto !important;
}

/* ヘッダー（バッジだけ紫） */
.sys-header--user{
	background:#fff;	border-bottom:2px solid var(--user-accent);
}
.sys-header--user .badge{
	background:var(--user-accent);	color:#fff;	padding:2px 8px;	border-radius:6px;	font-size:.85rem;
}

/* Hero（薄紫トーン） */
.hero--user{
	background:#faf5ff;	padding:24px;	border-radius:12px;
}

/* 汎用ボタン（紫） */
.btn.btn--primary{
	background:var(--user-accent);	border-color:var(--user-accent-dark);	color:#fff;
}
.btn.btn--primary:hover{
	background:var(--user-accent-dark);
}
.btn.btn--ghost{
	background:#fff;	border:1px solid var(--user-accent);	color:var(--user-accent-dark);
}
.btn.btn--ghost:hover{
	background:#f5f3ff;
}
.btn.btn--link{
	color:var(--user-accent-dark);	text-decoration:underline;	background:transparent;	border:none;	padding:0;
}

/* 固定フッターは使わず通常フロー */
.sys-footer--user{
	background:#fff;	border-top:1px solid var(--sys-border);	box-shadow:0 -10px 20px rgba(0,0,0,.05);
	position:relative;
}
.sys-footer__inner{
	max-width:1200px;	margin:0 auto;	padding:10px 16px;
	display:flex;	align-items:center;	justify-content:flex-end;	gap:10px;
}

/* ログイン画面 */
main, div p, input, button{ box-sizing:border-box; }
main.user-login__main, main.container.verify{ width:100%;	margin:100px auto 30px; }
main.user-login__main .bar7{
	background-color:#EEF;	border-left:5px solid #66F!important;	border-right:5px solid #66F!important;
	text-align:center!important;	font-size:2.4rem;
}
.login{
	width:100%;	margin:0 auto 20px;	display:flex;	flex-wrap:nowrap;
}
.login>div{
	width:calc(100%/2);	padding:7px;	border:1px solid #CCC;
	display:flex;	align-items:center;	justify-content:center;	text-align:center;
}

/* セクション見出し／カード群（管理側と同等表現を紫系で） */
.section-title{
	display:flex;	align-items:center;	justify-content:space-between;	margin:28px 0 12px;
}
.section-title h2{
	font-size:clamp(1.8rem,1.3rem + .6vw,2.2rem);	color:#111;	font-weight:800;	letter-spacing:.01em;
}
.section-title .hint{ color:var(--sys-muted);	font-size:1.3rem; }

.card-grid{
	display:grid;	grid-template-columns:repeat(3,minmax(0,1fr));	gap:16px;
}
@media (max-width: 980px){
	.card-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px){
	.card-grid{ grid-template-columns:1fr; }
}

.card{
	border:1px solid var(--sys-border);	border-radius:16px;	background:#fff;
	box-shadow:var(--sys-shadow);	padding:16px;	display:flex;	flex-direction:column;	gap:10px;
	transition: transform .06s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{
	border-color:var(--sys-green-600);
	box-shadow:0 12px 34px rgba(124,58,237,.12);
	transform:translateY(-2px);
}
.card h3{ font-weight:800;	font-size:1.8rem; }
.card p{ color:var(--sys-muted);	font-size:1.3rem; }
.card .actions{ margin-top:auto; display:flex;	gap:10px; flex-wrap:wrap; width: 100%; }
.card .btn{
	display:inline-flex;	align-items:center;	justify-content:center;	gap:8px;
	padding:8px 12px;	border-radius:10px;	font-weight:800;	font-size:1.3rem;
	border:1px solid var(--sys-border);	background:#fff;	color:#111;
}
.card .btn.primary{
	background:var(--sys-green-600);	border-color:var(--sys-green-600);	color:#fff;
}
.card .btn.primary:hover{ background:var(--sys-green-700);	border-color:var(--sys-green-700); }
.card .btn.ghost:hover{ border-color:var(--sys-green-600);	color:var(--sys-green-700); }

.save-tbl { width: 100%; display: flex; flex-wrap:wrap; }
.save-tbl div { width: calc(100% / 2); padding: 0 10px; }
/* 既存フォームをカードテイストに */
.box{
	border:1px solid var(--sys-border)!important;
	border-radius:16px;	background:#fff!important;
	box-shadow:var(--sys-shadow);
	padding:16px!important;	margin:18px 0!important;
}
.bar8{ background:#fff0f0;	border-left:5px solid #f97373; }
.btn-mode{
	display:inline-flex;	align-items:center;	justify-content:center;
	padding:9px 14px;	border-radius:10px;	font-weight:800;
	background:var(--sys-green-600);	color:#fff;	border:1px solid var(--sys-green-600);
	transition: background .2s ease, transform .06s ease;
}
.btn-mode:hover{ background:var(--sys-green-700);	transform:translateY(-1px); }

/* トグル着色（紫系） */
.box .toggle-item input[type="checkbox"]:checked + .toggle-label,
.box .toggle-item input[type="radio"]:checked + .toggle-label.on{
	background:var(--sys-green-600)!important;
	color:#fff!important;	border-color:var(--sys-green-600)!important;
}
.box .toggle-item input[type="radio"]:not(:checked) + .toggle-label.off{
	background:#f3f4f6;	color:#111;	border-color:#e5e7eb;
}

/* =========================================================
 * ログアウトボタン（フッターとは独立・右下固定）
 * ========================================================= */
.logout{
	position:fixed;
	bottom:15px;
	right:15px;
}
.btn-logout{
	display:inline-flex;	align-items:center;	gap:10px;
	background:#ef4444;	color:#fff;	border:1px solid #dc2626;
	padding:10px 16px;	border-radius:12px;	font-weight:900;	letter-spacing:.02em;
	transition: transform .06s ease, filter .2s ease;
}
.btn-logout:hover{
	filter:brightness(.95);	transform:translateY(-1px);
}

/* =========================================================
 * ユーザー用ダッシュボード
 * ========================================================= */
.kpi {
	width:100%;	margin:0 auto;	display:flex;	flex-wrap:nowrap;
}
.kpi > div{
	width:calc(100%/2);	padding:7px;	border:1px solid #CCC;
	display:flex;	align-items:center;	justify-content:center;	text-align:center;
}

dl.def  { width:100%; margin:0 auto 20px; display:flex; flex-wrap: wrap; }
dl.def > dt{
	width:calc(100%/2);	padding:7px; border:1px solid #CCC;
	display:flex; align-items:center; justify-content:center; text-align:center;
}
dl.def > dd{
	width:calc(100%/2);	padding:7px; border:1px solid #CCC;
	display:flex; align-items:center; justify-content:center; text-align:center;
}