@charset "utf-8";

/* ドメイン情報テーブルの表示項目設定（表示項目変更モーダル / ユーザーページのインライン設定）
   接頭辞は dlc-（Domain List Columns）。テーブル側の列は .dlc-col / .dlc-hidden で制御する。 */

/* 非表示の列は style="display:none" をインラインで出力する（CSS読み込みに依存させない）。
   このファイルは設定UI（モーダル / ユーザーページのインライン設定）のスタイルのみを担当する。 */

/* 一覧ヘッダー右側のボタン類を同一行に並べる（「表示項目変更」を一括ウォッチリスト等の右側に置く） */
#main p.bulk_watchlist,
#main p.guest_bulk_watchlist,
#main #bulk_delete_watchlist,
#main #bulk_delete_cart,
#main #reset_browsing_history,
#main .domain_list_settings_btn,
#main .guest_domain_list_settings {
	display: inline-block;
	margin-left: 12px;
}

/* 「表示項目変更」リンク */
.domain_list_settings_btn,
.guest_domain_list_settings {
	cursor: pointer;
	color: #0009c1;
	font-size: 14px;
}

.domain_list_settings_btn:hover,
.guest_domain_list_settings:hover { color: #999; text-decoration: underline; }

/* モーダル */
.dlc-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99998; }
.dlc-modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); }
.dlc-modal-container {
	position: relative;
	width: 90%;
	max-width: 720px;
	max-height: 86%;
	margin: 40px auto 0;
	background: #fff;
	border-radius: 8px;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}
.dlc-modal-header { position: relative; padding: 15px 20px; border-bottom: 1px solid #e0e0e0; }
.dlc-modal-title { font-size: 16px; font-weight: bold; color: #333; }
.dlc-modal-close { position: absolute; top: 8px; right: 15px; font-size: 26px; line-height: 1; color: #999; cursor: pointer; }
.dlc-modal-close:hover { color: #333; }
.dlc-modal-body { padding: 15px 20px 20px; }

/* 設定ウィジェット（モーダル / ユーザーページ共用） */
.dlc-note { font-size: 12px; color: #555; line-height: 1.7; margin-bottom: 12px; }
.dlc-lists { margin: 0 -8px; }
.dlc-list-box { float: left; width: 50%; padding: 0 8px; box-sizing: border-box; }
.dlc-list-title { font-size: 13px; font-weight: bold; color: #333; margin-bottom: 6px; }
.dlc-fixed-list { list-style: none; margin: 0 0 6px; padding: 0; }
.dlc-list { list-style: none; margin: 0; padding: 4px; min-height: 60px; border: 1px dashed #ccc; border-radius: 5px; background: #fafafa; }
.dlc-list.dlc-dragover { background: #eef5ff; border-color: #006df5; }

.dlc-item {
	position: relative;
	background: #fff;
	border: 1px solid #d5d5d5;
	border-radius: 4px;
	padding: 6px 92px 6px 8px;
	margin-bottom: 4px;
	font-size: 12px;
	line-height: 1.5;
	color: #333;
	cursor: move;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.dlc-item:last-child { margin-bottom: 0; }
.dlc-item.dlc-dragging { opacity: 0.4; }
.dlc-item-fixed { background: #f0f0f0; color: #777; cursor: default; padding-right: 8px; }
.dlc-grip { color: #bbb; margin-right: 5px; }
.dlc-name { font-weight: bold; margin-right: 5px; }
.dlc-desc { color: #888; font-size: 10px; }
.dlc-fixed-mark { font-size: 10px; color: #999; }
.dlc-btns { position: absolute; top: 4px; right: 5px; }
.dlc-btns button {
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 3px;
	color: #555;
	font-size: 11px;
	line-height: 1;
	padding: 3px 5px;
	margin-left: 2px;
	cursor: pointer;
}
.dlc-btns button:hover { background: #eee; }
.dlc-list-available .dlc-up,
.dlc-list-available .dlc-down { display: none; }
.dlc-empty-msg { display: none; font-size: 11px; color: #999; padding: 4px 0; }

/* フッター（初期値に戻す / 保存メッセージ） */
.dlc-footer { margin-top: 12px; }
.dlc-reset {
	float: left;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	color: #555;
	font-size: 12px;
	line-height: 1;
	padding: 7px 12px;
	cursor: pointer;
}
.dlc-reset:hover { background: #eee; }
.dlc-status { float: right; min-height: 18px; padding-top: 5px; font-size: 12px; color: #388e3c; }
.dlc-status.dlc-status-error { color: #d32f2f; }

/* スマホ表示 */
@media screen and (max-width: 767px) {
	.dlc-list-box { float: none; width: 100%; margin-bottom: 12px; }
	.dlc-desc { display: none; }
	.dlc-modal-container { margin-top: 15px; max-height: 92%; }

	/* 備考列は並び順が変わっても画像がTDを突き抜けないようにする（responsive.cssの td:last-child 相当） */
	#domain_list td.dlc-col-remark,
	#domain_list th.dlc-col-remark {
		white-space: nowrap;
		min-width: 100px;
	}
}