/* Wing 会議室予約システム — フロントエンド（モバイルファースト）
 *
 * トンマナ:
 *  - 見出しは #333 グレー
 *  - 「進む」アクション（ボタン/リンク）はエメラルドグリーン #0b8060（白文字でAA準拠）
 *  - 2ボタン並ぶ場面は「塗り」と「白抜き（罫線）」で差別化し、色弱の方にも区別可能に
 */

/*
 * テーマのロゴは絶対配置で本文エリア(.mainarea)上部に重なるため、
 * 本文タイトルがロゴと重ならないよう、上部にヘッダ用の余白を確保する。
 * 本CSSはショートコードを含むページでのみ読み込まれるためスコープは限定的。
 */
.mainarea {
	padding-top: 150px;
}
@media ( max-width: 782px ) {
	.mainarea { padding-top: 100px; }
}

.wing-card {
	max-width: 520px;
	margin: 1.5rem auto;
	padding: 1.25rem;
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
	color: #222;
	line-height: 1.6;
	box-sizing: border-box;
}
.wing-card *,
.wing-card *::before,
.wing-card *::after { box-sizing: border-box; }

.wing-title {
	font-size: 1.25rem;
	color: #333;
	margin: 0 0 1rem;
	padding-bottom: .6rem;
	border-bottom: 2px solid #0b8060;
}

/* --- フォーム --- */
.wing-form { display: flex; flex-direction: column; gap: .9rem; }
.wing-field { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; }
.wing-field > span { font-weight: 600; }
.wing-field em {
	font-style: normal;
	font-size: .72rem;
	color: #fff;
	background: #c0392b;
	padding: .05rem .4rem;
	border-radius: 3px;
	margin-left: .3rem;
	vertical-align: middle;
}
.wing-field em.wing-optional { background: #999; }
.wing-field small { color: #888; font-size: .78rem; }

.wing-field input,
.wing-field select,
.wing-field textarea {
	width: 100%;
	padding: .65rem .7rem;
	border: 1px solid #ccc;
	border-radius: 8px;
	font-size: 1rem;
	background: #fff;
	color: #222;
}
.wing-field input:focus,
.wing-field select:focus,
.wing-field textarea:focus {
	outline: none;
	border-color: #0b8060;
	box-shadow: 0 0 0 3px rgba(11, 128, 96, .18);
}

.wing-check {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	font-size: .9rem;
}
.wing-check input { margin-top: .25rem; }

/* --- ボタン --- */
.wing-btn {
	display: inline-block;
	width: 100%;
	padding: .78rem 1rem;
	border: 2px solid transparent;
	border-radius: 8px;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	text-align: center;
	transition: background .15s, color .15s, opacity .15s;
}
.wing-btn:disabled { opacity: .5; cursor: not-allowed; }

/* 「進む」アクション＝塗りのエメラルドグリーン＋白文字（白文字とのコントラスト AA） */
.wing-btn-primary { background: #0b8060; color: #fff !important; border-color: #0b8060; }
.wing-btn-primary:hover { background: #096a4f; border-color: #096a4f; }
/* 副次アクション＝白抜き（罫線）エメラルドグリーン。塗りボタンと明確に差別化 */
.wing-btn-secondary { background: #fff; color: #0b8060 !important; border-color: #0b8060; }
.wing-btn-secondary:hover { background: #0b8060; color: #fff !important; }

.wing-btn-row { display: flex; gap: .6rem; margin-top: 1rem; }
.wing-btn-row .wing-btn { width: auto; flex: 1; }

/* リンクをボタン表示する場合の下線除去（色は上の !important で確定） */
a.wing-btn { text-decoration: none; }

/* 未ログイン時：ログイン／ユーザー登録の2導線 */
.wing-auth-links { display: flex; flex-direction: column; gap: .6rem; margin-top: .9rem; }

/* ログイン画面下部：ユーザー登録への導線 */
.wing-register-cta { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px dashed #ddd; text-align: center; }
.wing-register-cta p { font-size: .85rem; color: #666; margin: 0 0 .6rem; }
.wing-register-cta .wing-btn { display: inline-block; width: auto; padding-left: 2.2rem; padding-right: 2.2rem; }

.wing-links { margin: 1rem 0 0; font-size: .85rem; text-align: center; }
.wing-links a { color: #0b8060; }

/* --- メッセージ --- */
.wing-message {
	padding: .7rem .9rem;
	border-radius: 8px;
	margin-bottom: 1rem;
	font-size: .9rem;
}
.wing-message.is-error { background: #fdecea; color: #a3271b; border: 1px solid #f5c6c0; }
.wing-message.is-success { background: #e9f7ef; color: #1e6b43; border: 1px solid #b7e4c7; }
.wing-message.is-info { background: #eef4fb; color: #2c5aa0; border: 1px solid #cfe0f5; }

.wing-loading { color: #888; text-align: center; padding: 1.5rem 0; }

/* --- カレンダー（STEP1） --- */
.wing-cal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: .8rem;
}
.wing-cal-head strong { font-size: 1.05rem; color: #333; }
.wing-cal-nav {
	border: 1px solid #ccc;
	background: #fff;
	border-radius: 6px;
	padding: .3rem .7rem;
	cursor: pointer;
	font-size: 1rem;
}
.wing-cal-nav:disabled { opacity: .35; cursor: not-allowed; }

.wing-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 3px;
}
.wing-cal-dow {
	text-align: center;
	font-size: .72rem;
	color: #777;
	padding: .2rem 0;
}
.wing-cal-cell {
	aspect-ratio: 1 / 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 1px solid #eee;
	border-radius: 6px;
	font-size: .8rem;
	background: #fafafa;
}
.wing-cal-cell .wing-day { font-size: .72rem; color: #666; }
.wing-cal-cell .wing-mark { font-size: 1rem; font-weight: 700; line-height: 1; }
.wing-cal-cell.is-open { cursor: pointer; background: #fff; }
.wing-cal-cell.is-open:hover { border-color: #0b8060; background: #f2fbf8; }
.wing-cal-cell.is-open .wing-mark { color: #1e8449; }
.wing-cal-cell.is-partial .wing-mark { color: #b7791f; }
.wing-cal-cell.is-full .wing-mark { color: #c0392b; }
.wing-cal-cell.is-closed { color: #bbb; }
.wing-cal-cell.is-closed .wing-mark { color: #ccc; }
.wing-cal-empty { border: none; background: transparent; }

.wing-legend {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin-top: .8rem;
	font-size: .75rem;
	color: #666;
}

/* --- サマリー（STEP4／完了） --- */
.wing-summary {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	border: 1px solid #eee;
	border-radius: 8px;
	overflow: hidden;
}
.wing-summary li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: .6rem .8rem;
	border-bottom: 1px solid #f0f0f0;
	font-size: .9rem;
}
.wing-summary li:last-child { border-bottom: none; }
.wing-summary li .wing-k { color: #777; flex: 0 0 auto; }
.wing-summary li .wing-v { text-align: right; font-weight: 600; }

.wing-price { font-size: 1.4rem; font-weight: 800; color: #333; }

.wing-policy {
	background: #f4f8f6;
	border: 1px solid #d8e6e0;
	border-radius: 8px;
	padding: .8rem;
	font-size: .8rem;
	white-space: pre-wrap;
	color: #40534c;
	margin-bottom: 1rem;
}

/* ページタイトル（WEB予約） */
.wing-page-title {
	font-size: 1.5rem;
	font-weight: 800;
	text-align: center;
	margin: 0 0 1rem;
	padding-bottom: .6rem;
	border-bottom: 2px solid #0b8060;
	color: #333;
}

/* 作業フロー（日付 ▶ 時間 ▶ … ▶ 完了） */
.wing-steps {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: .25rem;
	margin-bottom: 1rem;
	font-size: .78rem;
}
.wing-step {
	text-align: center;
	padding: .35rem .75rem;
	border-radius: 4px;
	background: #f0f0f0;
	color: #999;
}
.wing-step.is-active { background: #0b8060; color: #fff; font-weight: 700; }
.wing-step-arrow { color: #0b8060; font-size: .7rem; padding: 0 .1rem; }

/* 使い方の説明文 */
.wing-intro {
	background: #f4f8f6;
	border: 1px solid #d8e6e0;
	border-radius: 8px;
	padding: .8rem 1rem;
	font-size: .82rem;
	line-height: 1.75;
	color: #40534c;
	margin: 0 0 1rem;
}

/* --- 予約履歴 --- */
.wing-history { list-style: none; margin: 0; padding: 0; }
.wing-history li {
	border: 1px solid #eee;
	border-radius: 8px;
	padding: .7rem .8rem;
	margin-bottom: .6rem;
	font-size: .85rem;
}
.wing-history .wing-rsv-num { font-weight: 700; color: #333; }
.wing-badge {
	display: inline-block;
	font-size: .7rem;
	padding: .1rem .5rem;
	border-radius: 10px;
	margin-left: .4rem;
}
.wing-badge.confirmed { background: #e9f7ef; color: #1e6b43; }
.wing-badge.cancelled { background: #fdecea; color: #a3271b; }

.wing-profile { margin: 0 0 1rem; }
.wing-profile dt { font-size: .75rem; color: #888; margin-top: .6rem; }
.wing-profile dd { margin: 0; font-weight: 600; }

@media (min-width: 600px) {
	.wing-card { padding: 1.75rem; }
	.wing-cal-cell { font-size: .9rem; }
}