@charset "utf-8";
/* Wi-Fi接続用QRコード作成 専用CSS
 * 読み込んでいるのは cgi/wifi-qr-code.php だけ。
 * ★変更したら参照側の ?v= を必ず上げる（CSSは30日キャッシュなので届かない）。
 *
 * ★素の要素セレクタ（body / button / h1 / input …）を書かないこと。
 *   このファイルはページ全体に読み込まれるので、ヘッダー・サイドバー・
 *   フッターまで巻き込む（CLAUDE.md B-13。実際に2ページで事故っている）。
 *   すべて #wfqWrap の中に閉じてある。
 *
 * ★表組み・入力欄・プルダウン・チェックボックスの印は
 *   cgi/css/tool-form.css が #inputBlock の子孫に当てている。
 *   ここで同じものを書き直さない（二重管理になる）。
 *   上書きが要るところだけ **id を2つ**（#wfqWrap #inputBlock）で書いて
 *   詳細度で勝たせる（共通側は .wrapper .block #inputBlock で id が1つ）。
 */

/* ---------- 入力欄の並べ方 ---------- */
#wfqWrap .form-group {
	margin-bottom: 20px;
	font-size: 14px;
}

/* ★共通CSSの label は inline-block ＋ white-space:nowrap。
     入力欄の上に置く見出しとして使うので block ＋ 折り返しありに戻す。
     id を2つにしないと (0,1,2,1) に負ける。 */
#wfqWrap #inputBlock .form-group > label,
#wfqWrap #inputBlock .form-col > label {
	display: block;
	margin: 0 0 5px;
	font-weight: 700;
	white-space: normal;
}

#wfqWrap .form-row-wrap {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

#wfqWrap .form-col {
	display: flex;
	flex-direction: column;
	font-size: 14px;
}

#wfqWrap .form-col.wfq-col-wide {
	flex: 1 1 260px;
	min-width: 220px;
}

/* ---------- チェックボックスの行 ---------- */
/* 印そのものは tool-form.css が戻してくれる（17px・accent-color:#23ac38）。
   ★ただし共通CSSの label は white-space:nowrap なので、
     「ステルス（SSIDを公開していない）ネットワーク」のような長い文は
     スマホで画面からはみ出す。ここだけ折り返しありに戻す。 */
#wfqWrap .wfq-chk {
	display: flex;
	align-items: flex-start;
	margin-top: 10px;
}

#wfqWrap #inputBlock .wfq-chk label {
	margin: 0;
	font-weight: 400;
	white-space: normal;
	line-height: 1.5;
}

#wfqWrap #inputBlock .wfq-chk input[type="checkbox"] {
	flex: 0 0 auto;
	margin-top: 2px;
}

/* パスワード欄を伏せるとき（パスワードなしを選んだとき） */
#wfqWrap #inputBlock #wfqPass:disabled {
	background-color: #eee;
	color: #999;
	border-color: #bbb;
}

/* ---------- 色の指定 ---------- */
/* ★contents.css の全体リセット（input に appearance:none / border:0）で
     色見本が平らな箱になり、幅と高さを指定しないと 0×0 で消える
     （CLAUDE.md B-8 と同じ形。チェックボックスだけの話ではない）。 */
#wfqWrap #inputBlock input[type="color"] {
	-webkit-appearance: auto;
	-moz-appearance: auto;
	appearance: auto;
	width: 64px;
	height: 40px;
	padding: 2px;
	border: 2px solid #333;
	border-radius: 4px;
	background-color: #fff;
	cursor: pointer;
}

/* ---------- プルダウンの矢印 ---------- */
/* ★矢印は select の ::after では出ない（select は置換要素なので
     擬似要素が描かれない）。包みの側に付ける。 */
#wfqWrap .wfq-select {
	position: relative;
	display: block;
	width: 100%;
}

#wfqWrap .wfq-select::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 50%;
	width: 0;
	height: 0;
	margin-top: -3px;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 7px solid #333;
	pointer-events: none;
}

/* 矢印と文字が重ならないだけの余白をとる */
#wfqWrap #inputBlock .wfq-select select {
	padding-right: 34px;
}

/* ---------- 作るボタン ---------- */
#wfqWrap .wfq-btn-wrap {
	margin: 0 0 10px;
	text-align: center;
}

#wfqWrap .wfq-btn-wrap .btn_form {
	float: none;
	margin: 0;
	padding-left: 24px;
	padding-right: 24px;
}

/* ---------- 知らせ（エラー・警告） ---------- */
#wfqWrap #wfqMessages {
	margin: 16px 0 0;
}

#wfqWrap .wfq-msg {
	margin: 0 0 8px;
	padding: 12px 14px;
	border-radius: 4px;
	font-size: 14px;
	line-height: 1.6;
}

#wfqWrap .wfq-msg-error {
	background-color: #fdecea;
	border-left: 5px solid #cc0000;
	color: #8a1c13;
}

#wfqWrap .wfq-msg-warn {
	background-color: #fff6e0;
	border-left: 5px solid #e8a33d;
	color: #7a5312;
}

/* ---------- 結果 ---------- */
#wfqWrap #wfqResultBlock {
	width: 100%;
	clear: both;
	margin-top: 20px;
}

#wfqWrap #wfqCodeOutput {
	margin: 20px 0;
	text-align: center;
}

#wfqWrap #wfqCodeOutput img {
	max-width: 100%;
	height: auto;
	border: 1px solid #ccc;
}

#wfqWrap .wfq-size-info {
	text-align: center;
	font-size: 13px;
	color: #666;
	margin: 0 0 10px;
}

/* ---------- QRコードの中身（WIFI: の文字列） ---------- */
#wfqWrap .wfq-uri-wrap {
	margin-top: 24px;
	padding: 14px 16px;
	background-color: #f5f7fa;
	border: 1px solid #dde3ea;
	border-radius: 4px;
}

#wfqWrap .wfq-uri-wrap h4 {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 700;
	color: #333;
}

/* ★長い1行なので必ず折り返す。パスワードを含むので等幅で出す。
     折り返さないと親の幅をはみ出してページ全体に横スクロールが出る。 */
#wfqWrap .wfq-uri {
	margin: 0 0 8px;
	font-family: "SFMono-Regular", Consolas, "Courier New", monospace;
	font-size: 13px;
	line-height: 1.7;
	word-break: break-all;
	overflow-wrap: anywhere;
	color: #1a1a1a;
}

#wfqWrap .wfq-uri-note {
	margin: 0;
	font-size: 12px;
	line-height: 1.6;
	color: #66707f;
}

/* ---------- 解説（親ページから使う図表） ---------- */
#wfqGuide .wfq-tbl-wrap {
	overflow-x: auto;
	margin: 12px 0 20px;
}

#wfqGuide .wfq-tbl {
	width: 100%;
	min-width: 480px;
	border-collapse: collapse;
	font-size: 14px;
}

#wfqGuide .wfq-tbl th,
#wfqGuide .wfq-tbl td {
	padding: 10px 12px;
	border: 1px solid #dde3ea;
	text-align: left;
	vertical-align: top;
	line-height: 1.6;
}

#wfqGuide .wfq-tbl th {
	background-color: #eef2f7;
	font-weight: 700;
	white-space: nowrap;
}

#wfqGuide .wfq-tbl code {
	font-family: "SFMono-Regular", Consolas, "Courier New", monospace;
	font-size: 13px;
	word-break: break-all;
}

/* 書式の見本（左に太線を入れた枠） */
#wfqGuide .wfq-code {
	margin: 12px 0 20px;
	padding: 12px 16px;
	background-color: #f5f7fa;
	border-left: 5px solid #1e3a5f;
	font-family: "SFMono-Regular", Consolas, "Courier New", monospace;
	font-size: 13px;
	line-height: 1.8;
	word-break: break-all;
	overflow-wrap: anywhere;
}

/* 注意の囲み */
#wfqGuide .wfq-note {
	margin: 12px 0 20px;
	padding: 12px 16px;
	background-color: #fff6e0;
	border-left: 5px solid #e8a33d;
	font-size: 14px;
	line-height: 1.7;
	color: #5a4312;
}

@media screen and (max-width: 600px) {
	#wfqWrap .form-row-wrap { gap: 12px; }
	#wfqWrap .form-col.wfq-col-wide { flex: 1 1 100%; }
	#wfqGuide .wfq-tbl { min-width: 420px; }
}