/* css/base.css 側で html,body に height:100% が指定されておらず、
   .main / .main_contents / .contents の height:100% 系の指定が定義不能（auto扱い）になり、
   結果としてページ全体が1つの長いドキュメントとしてスクロールしてしまい、
   本来スクロールしないはずの上部メニューやヘッダーまで一緒に流れてしまっていた。
   base.cssを読み込む全ページに効くが、実際に影響するのは.main_contents/.contentsで
   スクロール領域を区切っているedit.php・view.php・account/index.phpだけ。 */
html, body{
	height:100%;
}
/* 全体の背景色（薄い紫）。css/base.css 側にも同じ色で .main の背景指定があるが、
   .content_page 等、画面1つぶんの高さ（.mainの高さ）を超える内容のページ（guide.php等）では、
   はみ出した部分がページ全体のスクロールで見えるようになる。.main の背景は .main 自身の
   高さ分しか塗られないため、そのはみ出した先の背景が塗られず白く途切れて見えてしまう。
   html要素の背景色は、実際のドキュメントの高さに関わらずスクロール領域全体（キャンバス）に
   伝播して描画されるため、ここにも同じ色を指定してその途切れを防ぐ
   （.mainの背景指定はそのまま残し、二重に塗っても問題はない）。 */
html{
	background:#f3ecfb;
}
.main{
	background:#f3ecfb;
}

/* ---------- top_bar のロゴ・ログアウトボタン（サイドメニュー廃止に伴い追加） ---------- */
.top_bar_logo_link{
	display:flex;
	align-items:center;
	height:100%;
}
/* ロゴの横の「(βテスト)」表示（notice_log.phpのkokofix_beta_badge()。テストフラグONの間だけ出る） */
.beta_badge{
	display:inline-block;
	margin-left:8px;
	vertical-align:middle;
	font-size:11px;
	font-weight:700;
	line-height:1;
	letter-spacing:0.02em;
	color:#7c3aed;
	white-space:nowrap;
	text-decoration:none;
}
/* バッジを含むロゴのリンクには、下線を付けない（リンクの下線がバッジの文字に引かれないように） */
a:has(> .beta_badge){
	text-decoration:none;
}
/* 中央に置くロゴ（お問い合わせ・フィードバック・利用規約・ログイン・登録など）：ロゴ画像はブロック要素で、
   下に16pxの余白があるので、そのままだとバッジが画像の下に回り込む。横並びにして、画像の高さの中央にそろえる。 */
.content_page_header > a:has(> .beta_badge),
.auth_logo_link:has(> .beta_badge){
	display:inline-flex;
	align-items:center;
}
.content_page_logo + .beta_badge,
.auth_logo + .beta_badge{
	margin-bottom:16px; /* ロゴ画像の下の余白（16px）と同じだけ取り、画像の中央に合わせる */
}
.top_bar_logo{
	height:40px;
	display:block;
}
.top_bar_logout_btn{
	display:inline-flex;
	align-items:center;
	gap:6px;
	color:#555;
	text-decoration:none;
	font-size:13px;
	padding:6px 10px;
	border-radius:4px;
}
.top_bar_logout_btn:hover{
	background:#f2ecfb;
	color:#7c3aed;
}
/* ---------- アカウントメニュー（トップバー右側：アカウント名ボタン＋ログアウト） ---------- */
.top_bar_right{
	display:flex;
	align-items:center;
	gap:6px;
}
.account_menu{
	position:relative;
}
.account_menu_btn{
	display:inline-flex;
	align-items:center;
	gap:6px;
	max-width:260px;
	padding:6px 10px;
	font-size:13px;
	color:#555;
	background:#fff;
	border:1px solid #ddd;
	border-radius:4px;
	cursor:pointer;
	font-family:inherit;
}
.account_menu_btn:hover{
	background:#f2ecfb;
	border-color:#d9c9f5;
	color:#7c3aed;
}
.account_menu_name{
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.account_menu_caret{
	font-size:10px;
}
.account_menu_panel{
	position:absolute;
	right:0;
	top:calc(100% + 6px);
	min-width:180px;
	background:#fff;
	border:1px solid #e5dcf5;
	border-radius:6px;
	box-shadow:0 6px 20px rgba(124,58,237,0.15);
	padding:4px 0;
	z-index:200;
}
.account_menu_panel a{
	display:flex;
	align-items:center;
	gap:8px;
	padding:9px 14px;
	font-size:13px;
	color:#444;
	text-decoration:none;
	white-space:nowrap;
}
.account_menu_panel a i{
	width:16px;
	text-align:center;
	color:#999;
}
.account_menu_panel a:hover{
	background:#f2ecfb;
	color:#7c3aed;
}
.account_menu_panel a.account_menu_danger{
	border-top:1px solid #f0eaf9;
	color:#c0392b;
}
.account_menu_panel a.account_menu_danger i{
	color:#c0392b;
}
.account_menu_panel a.account_menu_danger:hover{
	background:#fdecea;
	color:#c0392b;
}
@media (max-width:640px){
	.account_menu_name{ display:none; }
	.account_menu_caret{ display:none; }
}

/* ---------- アカウント情報／プラン変更／退会ページ ---------- */
.account_info_table{
	width:100%;
	border-collapse:collapse;
	font-size:14px;
}
.account_info_table th,
.account_info_table td{
	text-align:left;
	padding:12px 8px;
	border-bottom:1px solid #f0eaf9;
	vertical-align:top;
}
.account_info_table th{
	width:38%;
	color:#777;
	font-weight:600;
	font-size:13px;
}
.account_info_links{
	margin-top:24px;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:14px;
}
.account_info_withdraw{
	font-size:12px;
	color:#c0392b;
	text-decoration:none;
}
.account_info_withdraw:hover{
	text-decoration:underline;
}
.plan_card_current{
	border-color:#7c3aed;
	box-shadow:0 0 0 2px rgba(124,58,237,0.15);
}
.account_withdraw_warn{
	background:#fdecea;
	color:#c0392b;
	border:1px solid #f5c6cb;
	border-radius:6px;
	padding:12px 14px;
	font-size:13px;
	line-height:1.7;
	margin:0 0 20px;
}
.account_withdraw_check{
	display:flex !important;
	align-items:center;
	gap:8px;
	font-weight:400 !important;
	cursor:pointer;
}
.account_withdraw_check input{
	width:auto !important;
}
.account_withdraw_btn{
	background:#c0392b;
	color:#fff;
	border-color:#c0392b;
}
.account_withdraw_btn:hover{
	background:#a93226;
}
.withdrawn_banner{
	background:#eefaf1;
	color:#256a3e;
	border-bottom:1px solid #c9ecd5;
	padding:10px 16px;
	font-size:13px;
	text-align:center;
}
.project_expired_banner{
	background:#fdecea;
	color:#c0392b;
	border-bottom:1px solid #f5c6cb;
	padding:10px 16px;
	font-size:13px;
	text-align:center;
}

/* ---------- .contents_split（edit.php・view.php）：画面全体やヘッダーごとスクロールするのではなく、
   ヘッダー（project_header／view_top_bar）は常に表示したまま、タスクパネルと画像一覧をそれぞれ
   独立してスクロールさせる。以前はJSでスクロール位置を監視し、ヘッダー・タスクパネルを
   position:fixedに切り替えて「追従しているように見せる」実装だったが、スクロールのたびに
   位置を計算し直す都合上ちらつきが出たり、端末やブラウザによって挙動がずれたりしていた。
   そもそもヘッダーをスクロール領域の外に、タスクパネル・画像一覧をそれぞれ高さ固定＋
   overflow-y:autoの独立した領域にしてしまえば、ブラウザの通常のスクロールだけで同じ見た目になり、
   追従のための処理自体が不要になる。 */
.contents.contents_split{
	display:flex;
	flex-direction:column;
	overflow:visible;
}
.contents.contents_split > .project_header,
.contents.contents_split > .view_top_bar,
.contents.contents_split > .draft_restore_banner{
	flex:0 0 auto;
}
.contents.contents_split > .task_app{
	flex:1 1 auto;
	min-height:0;
}

/* 画像を拡大したり、画像一覧（.image_area、最小幅1024px）が幅の狭い画面に入ったりしても、
   .contents（.main_contentsの中の横並びの子要素）が中身の幅に引っ張られて画面より広がらないようにする。
   これがないと、.contentsごと横に広がって画面外にはみ出し、ページ全体に横スクロールが出てしまう。
   はみ出す分は、画像一覧（.image_panel）の中の横スクロールで見る。 */
.main_contents .contents{
	min-width:0;
}
.task_app{
	display:flex;
	align-items:stretch;
	gap:20px;
	padding:16px;
	overflow:hidden; /* タスクパネル・画像一覧それぞれの内側だけがスクロールする（下記） */
}

/* ---------- 左側：タスクパネル。.task_panelを高さいっぱいの箱にし、.task_panel_inner側だけが
   内部でスクロールする（画像一覧側のスクロールとは完全に独立しており、追従させる処理は不要）。 ---------- */
.task_panel{
	width:320px;
	flex:0 0 320px;
	display:flex;
	flex-direction:column;
	box-sizing:border-box;
	min-height:0;
}
.task_panel_inner{
	flex:1 1 auto;
	min-height:0;
	background:#fff;
	border:1px solid #ddd;
	border-radius:6px;
	padding:12px;
	overflow-y:auto;
	box-sizing:border-box;
}
.task_panel_header{
	margin-bottom:12px;
}
.task_panel_header_title{
	padding-bottom:8px;
	margin-bottom:10px;
	border-bottom:1px solid #ddd;
}
.task_panel_header_title h2{
	margin:0;
	font-size:16px;
	color:#333;
}
.task_panel_header_actions{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:8px;
}
.btn_add{
	background:#7c3aed;
	color:#fff;
	border:none;
	border-radius:4px;
	padding:7px 12px;
	font-size:13px;
	cursor:pointer;
}
.btn_add:hover{
	background:#6d28d9;
}
.page_file_drop_hint{
	margin:8px 0 0;
	font-size:11px;
	color:#999;
}

/* ---------- ホバー／フォーカスで説明文を表示するポップアップ（ボタン・タスクの矩形／ハイライト共通）
   position:fixed のJS制御の共有要素（#floating_tooltip）で表示する。
   .task_panel_inner（overflow-y:auto）や .image_area（overflow:hidden）など、
   祖先要素の overflow によって切り取られてしまわないよう、対象要素の子要素としては配置しない。
   位置・表示/非表示の制御は script/task.js・script/view.js 側で行う。 ---------- */
.tooltip_btn{
	position:relative;
}
.floating_tooltip{
	position:fixed;
	z-index:9999;
	max-width:260px;
	padding:9px 12px;
	background:#1b2321;
	color:#fff;
	font-size:12px;
	font-weight:400;
	line-height:1.6;
	text-align:left;
	white-space:normal;
	border-radius:6px;
	box-shadow:0 6px 18px rgba(0,0,0,0.22);
	pointer-events:none;
	opacity:0;
	visibility:hidden;
	transition:opacity .12s ease;
}
.floating_tooltip.floating_tooltip_visible{
	opacity:1;
	visibility:visible;
}

.task_list{
	list-style:none;
	margin:0;
	padding:0;
}
.task_item{
	padding:8px 10px;
	border-top:1px solid #f0f0f0;
	cursor:pointer;
}
.task_item:hover{
	background:#fafafa;
}
.task_item.selected{
	background:#f2ecfb;
}
.task_item_row{
	display:flex;
	align-items:center;
	gap:8px;
}
.task_drag_handle{
	flex:0 0 auto;
	color:#c0c0c0;
	font-size:13px;
	cursor:grab;
	padding:2px 2px;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}
.task_drag_handle:active{
	cursor:grabbing;
}
.task_color_dot{
	flex:0 0 10px;
	width:10px;
	height:10px;
	border-radius:50%;
}
.task_checkbox{
	flex:0 0 auto;
	cursor:pointer;
}
.task_check_group{
	display:flex;
	flex-direction:column;
	gap:3px;
	flex:0 0 auto;
}
.task_check_item{
	display:flex;
	align-items:center;
	gap:5px;
	font-size:12px;
	font-weight:600;
	line-height:1;
	color:#999;
	cursor:pointer;
	-webkit-user-select:none;
	user-select:none;
}
.task_check_item .task_checkbox{
	width:15px;
	height:15px;
	margin:0;
}
.task_check_work{ color:#7c3aed; }
.task_check_work .task_checkbox{ accent-color:#7c3aed; }
.task_check_confirm{ color:#ff3b30; }
.task_check_confirm .task_checkbox{ accent-color:#ff3b30; }
.task_main{
	display:flex;
	flex-direction:column;
	gap:2px;
	flex:1;
	min-width:0;
}
.task_text{
	font-size:13px;
	color:#333;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.task_item.task_done .task_text{
	color:#aaa;
	text-decoration:line-through;
}
.task_image_badge{
	display:flex;
	align-items:center;
	gap:4px;
	font-size:10px;
	color:#999;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.task_image_badge_none{
	color:#bbb;
}
.task_attachment_badge{
	display:inline-flex;
	align-items:center;
	gap:3px;
	font-size:10px;
	color:#7c3aed;
}
.task_hamburger{
	display:none;
	flex:0 0 auto;
	background:none;
	border:none;
	color:#888;
	font-size:14px;
	padding:4px 6px;
	cursor:pointer;
}
.task_item.selected .task_hamburger{
	display:inline-block;
}

/* ---------- タスクへのコメント ---------- */
.task_comment_toggle{
	flex:0 0 auto;
	display:inline-flex;
	align-items:center;
	gap:4px;
	background:none;
	border:none;
	color:#888;
	font-size:12px;
	padding:4px 6px;
	cursor:pointer;
}
.task_comment_toggle:hover{
	color:#7c3aed;
}
.task_comment_count{
	font-size:11px;
	color:#7c3aed;
	font-weight:600;
}
.task_comments{
	margin-top:8px;
	padding:10px;
	background:#f7f3fb;
	border:1px solid #eee;
	border-radius:6px;
	cursor:default;
}
.task_comments_list{
	list-style:none;
	margin:0 0 8px;
	padding:0;
	max-height:180px;
	overflow-y:auto;
}
.task_comments_empty{
	margin:0 0 8px;
	font-size:11px;
	color:#999;
}
.task_comment_item{
	display:flex;
	flex-wrap:wrap;
	align-items:baseline;
	gap:6px;
	padding:5px 0;
	border-bottom:1px solid #eee;
}
.task_comment_item:last-child{
	border-bottom:none;
}
.task_comment_speaker{
	flex:0 0 auto;
	font-size:11px;
	font-weight:700;
	color:#7c3aed;
}
.task_comment_text{
	flex:1 1 160px;
	font-size:12px;
	color:#333;
	white-space:pre-wrap;
	word-break:break-word;
}
.task_comment_time{
	flex:0 0 auto;
	font-size:10px;
	color:#aaa;
}
.task_comment_reactions{
	flex:1 0 100%;
	display:flex;
	flex-wrap:wrap;
	gap:4px;
	margin-top:2px;
}
.task_comment_reaction_btn{
	display:inline-flex;
	align-items:center;
	gap:3px;
	padding:1px 7px;
	font-size:13px;
	line-height:1.6;
	white-space:nowrap;
	background:#fff;
	border:1px solid #e2ddee;
	border-radius:10px;
	cursor:pointer;
}
.task_comment_reaction_btn:hover{
	border-color:#7c3aed;
}
.task_comment_reaction_btn_active{
	background:#f2ecfb;
	border-color:#7c3aed;
}
.task_comment_reaction_count{
	font-size:10px;
	color:#666;
}
.task_comment_reaction_btn_active .task_comment_reaction_count{
	color:#7c3aed;
	font-weight:600;
}
.task_comments_form{
	display:flex;
	gap:6px;
	align-items:flex-end;
}
.task_comment_input{
	flex:1;
	box-sizing:border-box;
	height:44px;
	padding:6px;
	font-size:12px;
	border:1px solid #ddd;
	border-radius:4px;
	resize:vertical;
}
.task_comment_submit{
	flex:0 0 auto;
	padding:8px 14px;
	font-size:12px;
	border:none;
	border-radius:4px;
	background:#7c3aed;
	color:#fff;
	cursor:pointer;
}
.task_comment_submit:disabled{
	background:#c4b5fd;
	cursor:default;
}

/* ---------- 画面全体へのドラッグ&ドロップでファイルを追加する際の、ドラッグ中の見た目 ----------
   pointer-events:noneにし、実際のdragenter/dragover/dropはdocument側でbindしているため、
   このオーバーレイ自体がイベントの受け皿になる必要は無い（見た目だけの要素）。 */
.page_file_drop_overlay{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,122,255,0.12);
	border:4px dashed #7c3aed;
	box-sizing:border-box;
	z-index:1200;
	display:flex;
	align-items:center;
	justify-content:center;
	pointer-events:none;
}
.page_file_drop_overlay_inner{
	background:#fff;
	color:#7c3aed;
	font-size:16px;
	font-weight:600;
	padding:16px 28px;
	border-radius:8px;
	box-shadow:0 8px 30px rgba(0,0,0,0.2);
}

/* ---------- タスク添付画像のライトボックス（クリックで別タブを開く代わりにポップアップ表示） ----------
   .video_capture_modal と同じく右下角のドラッグでモーダル自体を拡大縮小できるようにし（resize:both）、
   画像側は width/height:100%; object-fit:contain; でモーダルのサイズに連動して拡大縮小させる。 */
.attachment_lightbox_overlay{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.6);
	z-index:1150;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:16px;
	box-sizing:border-box;
}
.attachment_lightbox_modal{
	position:relative;
	width:640px;
	height:480px;
	min-width:200px;
	min-height:150px;
	max-width:96vw;
	max-height:96vh;
	overflow:hidden;
	resize:both;
	background:#fff;
	border-radius:8px;
	box-shadow:0 8px 30px rgba(0,0,0,0.3);
	box-sizing:border-box;
}
.attachment_lightbox_img{
	display:block;
	width:100%;
	height:100%;
	object-fit:contain;
}
.attachment_lightbox_close_btn{
	position:absolute;
	top:8px;
	right:8px;
	border:none;
	background:rgba(0,0,0,0.5);
	color:#fff;
	cursor:pointer;
	font-size:16px;
	width:32px;
	height:32px;
	border-radius:50%;
	z-index:1;
}
.attachment_lightbox_close_btn:hover{
	background:rgba(0,0,0,0.75);
}

/* ---------- 動画キャプチャ（動画からフレームを切り出して画像として追加） ---------- */
.video_capture_overlay{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.5);
	z-index:1100;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:16px;
	box-sizing:border-box;
}
.video_capture_modal{
	width:760px;
	min-width:480px;
	max-width:96vw;
	min-height:320px;
	max-height:96vh;
	overflow:auto;
	/* 右下角をドラッグして動画再生画面を含むモーダル全体を拡大縮小できるようにする */
	resize:both;
	background:#fff;
	border-radius:8px;
	box-shadow:0 8px 30px rgba(0,0,0,0.3);
	padding:16px;
	box-sizing:border-box;
}
.video_capture_modal_header{
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin-bottom:12px;
}
.video_capture_modal_header h2{
	margin:0;
	font-size:16px;
	color:#333;
}
.video_capture_close_btn{
	border:none;
	background:none;
	cursor:pointer;
	font-size:16px;
	color:#888;
	padding:4px 8px;
}
.video_capture_close_btn:hover{
	color:#333;
}
.video_capture_source{
	display:flex;
	flex-direction:column;
	gap:8px;
	padding:12px;
	background:#f7f3fb;
	border:1px solid #ddd;
	border-radius:6px;
}
.video_capture_source_row{
	display:flex;
	align-items:center;
	gap:8px;
}
.video_capture_source_btn{
	padding:7px 12px;
	font-size:13px;
	border:none;
	border-radius:4px;
	background:#7c3aed;
	color:#fff;
	cursor:pointer;
}
.video_capture_source_btn:hover{
	background:#6d28d9;
}
.video_capture_youtube_input{
	flex:1;
	box-sizing:border-box;
	padding:6px;
	font-size:13px;
	border:1px solid #ddd;
	border-radius:4px;
}
#video_capture_youtube_load_btn{
	padding:7px 12px;
	font-size:13px;
	border:none;
	border-radius:4px;
	background:#7c3aed;
	color:#fff;
	cursor:pointer;
	white-space:nowrap;
}
#video_capture_youtube_load_btn:disabled{
	background:#c4b5fd;
	cursor:default;
}
.video_capture_change_source_btn{
	margin-bottom:10px;
	padding:4px 10px;
	font-size:12px;
	border:1px solid #ddd;
	border-radius:4px;
	background:#fff;
	color:#555;
	cursor:pointer;
}
.video_capture_change_source_btn:hover{
	background:#f0f0f0;
}
.video_capture_main_row{
	display:flex;
	gap:16px;
	align-items:flex-start;
}
.video_capture_player_col{
	flex:1;
	min-width:0;
}
.video_capture_player_frame{
	position:relative;
	width:100%;
	aspect-ratio:16/9;
	background:#000;
	border-radius:6px;
	overflow:hidden;
}
.video_capture_player_frame video,
.video_capture_player_frame #video_capture_youtube_player,
.video_capture_player_frame #video_capture_youtube_player iframe{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	border:none;
}
.video_capture_player_frame video{
	object-fit:contain;
	background:#000;
}
.video_capture_seek_row{
	display:flex;
	align-items:center;
	gap:8px;
	margin-top:8px;
}
.video_capture_time{
	font-size:11px;
	font-variant-numeric:tabular-nums;
	color:#555;
	min-width:34px;
	text-align:center;
}
.video_capture_seek_bar{
	flex:1;
	width:100%;
	height:4px;
	cursor:pointer;
	accent-color:#7c3aed;
}
.video_capture_controls{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	margin-top:10px;
}
.video_capture_controls button{
	width:40px;
	height:36px;
	border:1px solid #ddd;
	border-radius:6px;
	background:#fff;
	color:#444;
	font-size:14px;
	cursor:pointer;
}
.video_capture_controls button:hover{
	background:#f0f0f0;
}
#video_capture_play_btn{
	width:52px;
	background:#333;
	color:#fff;
	border-color:#333;
}
#video_capture_play_btn:hover{
	background:#111;
}
.video_capture_youtube_panel{
	margin-top:10px;
	padding:10px;
	background:#f7f3fb;
	border:1px solid #ddd;
	border-radius:6px;
	text-align:center;
}
.video_capture_note{
	margin:0 0 8px;
	font-size:11px;
	color:#666;
	text-align:center;
}
.video_capture_capture_col{
	flex:0 0 110px;
	display:flex;
	align-items:stretch;
}
.video_capture_shot_btn{
	flex:1;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:6px;
	min-height:120px;
	border:none;
	border-radius:6px;
	background:#7c3aed;
	color:#fff;
	font-size:12px;
	line-height:1.4;
	cursor:pointer;
}
.video_capture_shot_btn i{
	font-size:20px;
}
.video_capture_shot_btn:hover{
	background:#6d28d9;
}
.video_capture_shot_btn:disabled{
	background:#ccc;
	cursor:default;
}
.video_capture_thumbs{
	margin-top:14px;
	padding-top:12px;
	border-top:1px solid #eee;
}
.video_capture_thumbs_empty{
	margin:0;
	font-size:12px;
	color:#999;
}
.video_capture_thumb_list{
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	flex-wrap:wrap;
	gap:8px;
}
.video_capture_thumb{
	position:relative;
	width:80px;
	height:80px;
	border:1px solid #ddd;
	border-radius:4px;
	overflow:hidden;
}
.video_capture_thumb img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}
.video_capture_thumb_remove{
	position:absolute;
	top:2px;
	right:2px;
	width:20px;
	height:20px;
	border:none;
	border-radius:50%;
	background:rgba(0,0,0,0.6);
	color:#fff;
	font-size:11px;
	line-height:1;
	cursor:pointer;
}
.video_capture_thumb_remove:hover{
	background:rgba(191,0,0,0.85);
}
.video_capture_footer{
	display:flex;
	align-items:center;
	justify-content:flex-end;
	gap:10px;
	margin-top:16px;
	padding-top:12px;
	border-top:1px solid #eee;
}
.video_capture_count{
	margin-right:auto;
	font-size:12px;
	color:#666;
}
.video_capture_cancel_btn{
	padding:7px 14px;
	font-size:13px;
	border:none;
	border-radius:4px;
	background:#eee;
	color:#555;
	cursor:pointer;
}
.video_capture_save_btn{
	padding:7px 14px;
	font-size:13px;
	border:none;
	border-radius:4px;
	background:#7c3aed;
	color:#fff;
	cursor:pointer;
}
.video_capture_save_btn:disabled{
	background:#c4b5fd;
	cursor:default;
}

/* ---------- PDF・AIファイル読み込み時のページ選択ポップアップ ----------
   .video_capture_overlay と同じ見た目・操作感（背景クリックで閉じる等）に揃えている。 */
.pdf_select_overlay{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.5);
	z-index:1100;
	display:flex;
	align-items:center;
	justify-content:center;
}
.pdf_select_modal{
	width:720px;
	max-width:96vw;
	max-height:90vh;
	overflow:auto;
	background:#fff;
	border-radius:8px;
	padding:16px;
	box-sizing:border-box;
}
.pdf_select_modal_header{
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin-bottom:8px;
}
.pdf_select_modal_header h2{
	margin:0;
	font-size:16px;
	color:#333;
}
.pdf_select_close_btn{
	border:none;
	background:none;
	cursor:pointer;
	font-size:16px;
	color:#888;
	padding:4px 8px;
}
.pdf_select_close_btn:hover{
	color:#333;
}
.pdf_select_lead{
	margin:0 0 12px;
	font-size:12px;
	color:#888;
}
.pdf_select_grid{
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));
	gap:10px;
	max-height:56vh;
	overflow-y:auto;
	padding:2px;
}
.pdf_select_thumb{
	position:relative;
	border:2px solid transparent;
	border-radius:6px;
	overflow:hidden;
	cursor:pointer;
	background:#f4f2f9;
	opacity:0.45;
}
.pdf_select_thumb img{
	width:100%;
	aspect-ratio:3/4;
	object-fit:contain;
	display:block;
	background:#fff;
}
.pdf_select_thumb_selected{
	border-color:#7c3aed;
	opacity:1;
}
.pdf_select_thumb_check{
	position:absolute;
	top:4px;
	right:4px;
	width:18px;
	height:18px;
	border-radius:50%;
	background:#fff;
	border:1px solid #ccc;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:10px;
	color:transparent;
}
.pdf_select_thumb_selected .pdf_select_thumb_check{
	background:#7c3aed;
	border-color:#7c3aed;
	color:#fff;
}
.pdf_select_thumb_num{
	position:absolute;
	left:4px;
	bottom:4px;
	padding:1px 6px;
	border-radius:3px;
	background:rgba(0,0,0,0.55);
	color:#fff;
	font-size:11px;
}
.pdf_select_footer{
	display:flex;
	align-items:center;
	gap:8px;
	margin-top:14px;
	padding-top:12px;
	border-top:1px solid #eee;
}
.pdf_select_bulk_btn{
	padding:6px 10px;
	font-size:12px;
	border:1px solid #ddd;
	border-radius:4px;
	background:#fff;
	color:#555;
	cursor:pointer;
}
.pdf_select_bulk_btn:hover{
	border-color:#7c3aed;
	color:#7c3aed;
}
.pdf_select_count{
	margin-right:auto;
	font-size:12px;
	color:#666;
}

.task_new_form{
	margin-bottom:10px;
	padding:8px;
	background:#f7f3fb;
	border:1px solid #ddd;
	border-radius:6px;
}
.task_new_text{
	box-sizing:border-box;
	width:100%;
	height:56px;
	padding:6px;
	margin-bottom:6px;
	font-size:13px;
	border:1px solid #ddd;
	border-radius:4px;
	resize:vertical;
}
.task_new_actions{
	display:flex;
	gap:8px;
	justify-content:flex-end;
}
.task_new_actions button{
	padding:5px 12px;
	font-size:12px;
	border:none;
	border-radius:4px;
	cursor:pointer;
}
.task_new_add{
	background:#7c3aed;
	color:#fff;
}
.task_new_cancel{
	background:#eee;
	color:#555;
}

/* ---------- タスクのインライン編集 ---------- */
.task_item.task_editing{
	background:#fffbea;
}
.task_item.task_editing .task_item_row{
	align-items:flex-start;
}
.task_text_edit{
	box-sizing:border-box;
	width:100%;
	min-height:44px;
	padding:5px 6px;
	font-size:13px;
	font-family:inherit;
	border:1px solid #ccc;
	border-radius:4px;
	resize:vertical;
}
.task_edit_actions{
	display:flex;
	flex-direction:column;
	gap:4px;
	flex:0 0 auto;
}
.task_edit_actions button{
	padding:4px 10px;
	font-size:11px;
	border:none;
	border-radius:4px;
	cursor:pointer;
	white-space:nowrap;
}
.task_update_btn{
	background:#7c3aed;
	color:#fff;
}
.task_cancel_edit_btn{
	background:#eee;
	color:#555;
}
.task_edit_attachment{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:6px;
	margin-top:6px;
}
/* タスクへの画像添付エリアに画像ファイルをドラッグ&ドロップしている間の見た目。
   outlineはボックスモデルに影響しない（＝サムネイルの位置がガタつかない）ため使用。 */
.attachment_dragover{
	outline:2px dashed #7c3aed;
	outline-offset:4px;
	background:rgba(0,122,255,0.06);
	border-radius:6px;
}
.task_edit_attachment_thumb{
	position:relative;
	display:inline-block;
}
.task_edit_attachment_img{
	display:block;
	max-width:70px;
	max-height:70px;
	border:1px solid #ddd;
	border-radius:4px;
	cursor:zoom-in;
}
.task_edit_attachment_remove{
	position:absolute;
	top:-6px;
	right:-6px;
	width:18px;
	height:18px;
	border-radius:50%;
	border:none;
	background:#ff3b30;
	color:#fff;
	font-size:9px;
	cursor:pointer;
}
.task_edit_attachment_add{
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:5px 10px;
	font-size:11px;
	color:#555;
	background:#f6f6f6;
	border:1px solid #ddd;
	border-radius:4px;
	cursor:pointer;
}
.task_edit_attachment_add:hover{
	background:#eee;
}
.task_empty,
.image_empty{
	font-size:13px;
	color:#999;
}

/* ---------- 右側：画像パネル。.task_panel_innerと同じく、こちら単独で内部スクロールする
   （.task_app側のoverflow:hiddenと合わせて、タスクパネルとは完全に独立してスクロールする）。 ---------- */
.image_panel{
	flex:1;
	min-width:0;
	min-height:0;
	overflow-y:auto;
	box-sizing:border-box;
	/* 一番上の「＋」（.image_insert_divider、margin-top:-14pxで上に14pxはみ出させている）が、
	   overflow-y:autoの枠で上半分切り取られないよう、はみ出す分を枠の内側（padding-top）に取り、
	   その分だけ枠を上（.task_appの余白16pxの中）にずらす。「＋」も画像も見た目の位置は変わらない。 */
	padding-top:14px;
	margin-top:-14px;
}
.image_insert_divider{
	display:flex;
	align-items:center;
	gap:10px;
	width:100%;
	/* min-width:1024pxは付けない：画像がある場合は.image_area側の指定で十分幅が確保され、
	   テキストブロックのみのプロジェクトでは不要に横幅を強制してしまうため */
	margin:-14px 0 16px;
	box-sizing:border-box;
}
.image_insert_line{
	flex:1;
	height:1px;
	background:#ddd;
}
.image_insert_btn{
	flex:0 0 auto;
	width:26px;
	height:26px;
	border-radius:50%;
	border:1px solid #ccc;
	background:#fff;
	color:#666;
	font-size:12px;
	cursor:pointer;
	box-shadow:0 1px 3px rgba(0,0,0,0.15);
}
.image_insert_btn:hover{
	background:#7c3aed;
	color:#fff;
	border-color:#7c3aed;
}
.image_area{
	width:100%;
	min-width:1024px;
	margin:0 auto 30px;
	display:flex;
	flex-direction:column;
	position:relative;
	overflow:hidden;
	background:#f4f4f4;
	border:2px solid #333;
	box-sizing:border-box;
}
/* 拡大縮小コントロールの対象（フォーカス中）の画像。枠を紫で強調する（task.js / view.js の updateActiveImage） */
.image_area.image_area_focused{
	border-color:#7c3aed;
	box-shadow:0 0 0 3px rgba(124,58,237,0.3);
}
.image_area_body{
	display:flex;
	align-items:center;
	justify-content:center;
}
.image_drag_handle,
.text_block_drag_handle{
	flex:0 0 auto;
	color:#999;
	font-size:13px;
	cursor:grab;
	padding:2px 2px;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}
.image_drag_handle:active,
.text_block_drag_handle:active{
	cursor:grabbing;
}
.image_area_toolbar{
	flex:0 0 auto;
	z-index:20;
	display:flex;
	align-items:center;
	gap:8px;
	padding:6px 10px;
	background:rgba(255,255,255,0.9);
	border-bottom:1px solid #eee;
}
.image_area_name{
	font-size:12px;
	font-weight:600;
	color:#444;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	max-width:240px;
}
.image_area_name_input{
	flex:1 1 480px;
	font-size:12px;
	font-weight:600;
	color:#444;
	max-width:480px;
	padding:3px 6px;
	border:1px solid transparent;
	border-radius:4px;
	background:transparent;
	font-family:inherit;
}
.image_area_name_input:hover,
.image_area_name_input:focus{
	border-color:#ccc;
	background:#fff;
	outline:none;
}
.image_area_hint{
	flex:1;
	font-size:11px;
	color:#999;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.image_crop_btn{
	flex:0 0 auto;
	display:inline-flex;
	align-items:center;
	gap:5px;
	padding:0 10px;
	height:24px;
	font-size:12px;
	color:#fff;
	background:#7c3aed;
	border:1px solid #7c3aed;
	border-radius:4px;
	cursor:pointer;
}
.image_crop_btn:hover{
	background:#6d28d9;
}
.image_delete_btn{
	flex:0 0 auto;
	width:24px;
	height:24px;
	font-size:12px;
	color:#555;
	background:#fff;
	border:1px solid #ccc;
	border-radius:4px;
	cursor:pointer;
}
.image_delete_btn:hover{
	background:#ff3b30;
	border-color:#ff3b30;
	color:#fff;
}
.image_area_inner{
	position:relative;
	display:inline-block;
	line-height:0;
}
.image_area.image_area_zoomed{
	width:auto;
	min-width:0;
	max-width:none;
	margin-left:auto;
	margin-right:auto;
}
/* 拡大して画像が枠の幅を超える場合は、枠（ツールバーは固定のまま）の中の画像部分に横スクロールバーを出す。
   中央寄せ（justify-content:center）のままだとはみ出した左側にスクロールで届かなくなるため、
   左寄せ＋画像側のmargin:0 autoにして、収まるときは中央・はみ出すときは左端から見られるようにする。 */
.image_area.image_area_zoomed .image_area_body{
	overflow-x:auto;
	justify-content:flex-start;
}
.image_area.image_area_zoomed .image_area_inner{
	margin:0 auto;
	flex:0 0 auto;
}
.task_image{
	display:block;
	max-width:100%;
	width:auto;
	height:auto;
	transition:width 0.15s ease;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}
.rect_layer{
	position:absolute;
	inset:0;
	cursor:crosshair;
}
.task_rect{
	position:absolute;
	box-sizing:border-box;
	border:2px solid #ff3b30;
	background:rgba(255,59,48,0.12);
	cursor:pointer;
}
.task_rect.rect_done{
	opacity:0.4;
	border-style:dashed;
}
.task_rect.rect_highlight{
	animation:rect_highlight_pulse 1.6s ease-out;
}
@keyframes rect_highlight_pulse{
	0%{ box-shadow:0 0 0 0 rgba(0,122,255,0.9); }
	60%{ box-shadow:0 0 0 16px rgba(0,122,255,0); }
	100%{ box-shadow:0 0 0 0 rgba(0,122,255,0); }
}
/* ---------- 選択中の矩形：あとから位置・サイズを調整するためのハンドル ---------- */
.task_rect.rect_selected{
	z-index:5;
	cursor:move;
}
.task_rect_handle{
	display:none;
	position:absolute;
	width:10px;
	height:10px;
	background:#fff;
	border:2px solid #7c3aed;
	border-radius:2px;
	box-sizing:border-box;
}
.task_rect.rect_selected .task_rect_handle{
	display:block;
}
.task_rect_handle_nw{ left:-6px; top:-6px; cursor:nwse-resize; }
.task_rect_handle_n{ left:50%; top:-6px; margin-left:-5px; cursor:ns-resize; }
.task_rect_handle_ne{ right:-6px; top:-6px; cursor:nesw-resize; }
.task_rect_handle_e{ right:-6px; top:50%; margin-top:-5px; cursor:ew-resize; }
.task_rect_handle_se{ right:-6px; bottom:-6px; cursor:nwse-resize; }
.task_rect_handle_s{ left:50%; bottom:-6px; margin-left:-5px; cursor:ns-resize; }
.task_rect_handle_sw{ left:-6px; bottom:-6px; cursor:nesw-resize; }
.task_rect_handle_w{ left:-6px; top:50%; margin-top:-5px; cursor:ew-resize; }
.rect_label{
	/* 表示はしない（マウスオーバー時のテキストの取得元としてのみDOMに残す）。
	   実際のポップアップ表示は #floating_tooltip が担当する
	   （.image_area の overflow:hidden の影響を受けず、常に最前面に表示するため）。 */
	display:none;
}
.rect_drawing{
	position:absolute;
	box-sizing:border-box;
	border:2px dashed #7c3aed;
	background:rgba(0,122,255,0.12);
	pointer-events:none;
}

/* ---------- 画像トリミング ---------- */
.crop_overlay{
	position:absolute;
	inset:0;
	z-index:30;
}
.crop_box{
	position:absolute;
	box-sizing:border-box;
	border:2px dashed #fff;
	box-shadow:0 0 0 2000px rgba(0,0,0,0.55);
	cursor:move;
}
.crop_handle{
	position:absolute;
	width:14px;
	height:14px;
	margin:-7px;
	background:#fff;
	border:2px solid #7c3aed;
	border-radius:50%;
}
.crop_handle_nw{ top:0; left:0; cursor:nwse-resize; }
.crop_handle_ne{ top:0; left:100%; cursor:nesw-resize; }
.crop_handle_sw{ top:100%; left:0; cursor:nesw-resize; }
.crop_handle_se{ top:100%; left:100%; cursor:nwse-resize; }
.crop_toolbar{
	position:absolute;
	bottom:10px;
	right:10px;
	z-index:40;
	display:flex;
	gap:8px;
}
.crop_toolbar button{
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:8px 14px;
	font-size:13px;
	border:none;
	border-radius:4px;
	cursor:pointer;
	color:#fff;
	box-shadow:0 2px 8px rgba(0,0,0,0.3);
}
.crop_apply{
	background:#7c3aed;
}
.crop_cancel{
	background:#777;
}

/* ---------- 画像の拡大縮小コントロール（画面右上固定） ---------- */
.zoom_control{
	position:fixed;
	top:70px;
	right:16px;
	z-index:70;
	display:flex;
	align-items:center;
	gap:2px;
	background:#fff;
	border:1px solid #ccc;
	border-radius:20px;
	padding:4px;
	box-shadow:0 2px 10px rgba(0,0,0,0.15);
}
.zoom_drag_handle{
	display:flex;
	align-items:center;
	justify-content:center;
	width:20px;
	height:30px;
	color:#aaa;
	font-size:13px;
	cursor:grab;
	touch-action:none;
	user-select:none;
}
.zoom_drag_handle:hover{
	color:#7c3aed;
}
.zoom_control_dragging{
	box-shadow:0 4px 16px rgba(124,58,237,0.35);
}
.zoom_control_dragging .zoom_drag_handle{
	cursor:grabbing;
}
.zoom_control button{
	border:none;
	background:none;
	cursor:pointer;
	color:#444;
	border-radius:16px;
}
.zoom_control button:hover{
	background:#f0f0f0;
}
.zoom_out_btn,
.zoom_in_btn{
	width:30px;
	height:30px;
	font-size:16px;
	font-weight:600;
	line-height:1;
}
.zoom_reset_btn{
	padding:0 12px;
	height:30px;
	font-size:12px;
	white-space:nowrap;
}

/* ---------- フローティングメニュー ---------- */
.rect_menu,
.task_dropdown{
	display:none;
	position:absolute;
	z-index:1000;
	background:#fff;
	border:1px solid #ccc;
	border-radius:6px;
	box-shadow:0 4px 16px rgba(0,0,0,0.15);
	padding:10px;
}
.rect_menu{
	width:220px;
}
.rect_menu_colors{
	display:flex;
	gap:6px;
	margin-bottom:8px;
}
.color_swatch{
	width:22px;
	height:22px;
	border-radius:50%;
	border:2px solid transparent;
	cursor:pointer;
}
.color_swatch.selected{
	border-color:#333;
}
.rect_menu_ocr_btn{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:6px;
	width:100%;
	box-sizing:border-box;
	margin-bottom:8px;
	padding:6px 0;
	font-size:12px;
	color:#555;
	background:#f6f6f6;
	border:1px solid #ddd;
	border-radius:4px;
	cursor:pointer;
}
.rect_menu_ocr_btn:hover{
	background:#eee;
}
.rect_menu_ocr_btn:disabled{
	color:#aaa;
	cursor:default;
	background:#f6f6f6;
}
.rect_menu_reselect_btn{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:6px;
	width:100%;
	box-sizing:border-box;
	margin-bottom:8px;
	padding:6px 0;
	font-size:12px;
	color:#555;
	background:#f6f6f6;
	border:1px solid #ddd;
	border-radius:4px;
	cursor:pointer;
}
.rect_menu_reselect_btn:hover{
	background:#eee;
}
.rect_menu_text{
	box-sizing:border-box;
	width:100%;
	height:60px;
	margin-bottom:8px;
	padding:6px;
	font-size:13px;
	border:1px solid #ddd;
	border-radius:4px;
	resize:vertical;
}
.rect_menu_attachment{
	margin-bottom:8px;
}
.rect_menu_attachment_list{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin-bottom:6px;
}
.rect_menu_attachment_thumb{
	position:relative;
	display:inline-block;
}
.rect_menu_attachment_img{
	display:block;
	max-width:90px;
	max-height:90px;
	border:1px solid #ddd;
	border-radius:4px;
	cursor:zoom-in;
}
.rect_menu_attachment_remove{
	position:absolute;
	top:-6px;
	right:-6px;
	width:20px;
	height:20px;
	border-radius:50%;
	border:none;
	background:#ff3b30;
	color:#fff;
	font-size:10px;
	cursor:pointer;
}
.rect_menu_attachment_add{
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:6px 12px;
	font-size:12px;
	color:#555;
	background:#f6f6f6;
	border:1px solid #ddd;
	border-radius:4px;
	cursor:pointer;
}
.rect_menu_attachment_add:hover{
	background:#eee;
}
.rect_menu_actions{
	display:flex;
	gap:8px;
	justify-content:space-between;
}
.rect_menu_actions button{
	flex:1;
	border:none;
	border-radius:4px;
	padding:6px 0;
	font-size:12px;
	color:#fff;
	cursor:pointer;
}
.rect_menu_save{
	background:#7c3aed;
}
.rect_menu_delete{
	background:#ff3b30;
}

.task_dropdown{
	width:150px;
	padding:6px;
}
.task_dropdown button{
	display:flex;
	align-items:center;
	gap:6px;
	width:100%;
	padding:8px 6px;
	font-size:13px;
	color:#333;
	background:none;
	border:none;
	border-radius:4px;
	text-align:left;
	cursor:pointer;
}
.task_dropdown button:hover{
	background:#f0f0f0;
}
.task_dropdown_delete{
	color:#ff3b30 !important;
}

/* ---------- ＋（挿入）メニューと、そこから開く各種ポップアップ ---------- */
.insert_type_menu{
	display:none;
	position:absolute;
	z-index:1000;
	width:180px;
	padding:6px;
	background:#fff;
	border:1px solid #ccc;
	border-radius:6px;
	box-shadow:0 4px 16px rgba(0,0,0,0.15);
}
.insert_type_menu_item{
	display:flex;
	align-items:center;
	gap:8px;
	width:100%;
	padding:8px 8px;
	font-size:13px;
	color:#333;
	background:none;
	border:none;
	border-radius:4px;
	text-align:left;
	cursor:pointer;
}
.insert_type_menu_item:hover{
	background:#f0f0f0;
}
.insert_type_menu_item i{
	width:16px;
	text-align:center;
	color:#666;
}

.text_insert_popup,
.capture_insert_popup{
	display:none;
	position:absolute;
	z-index:1000;
	width:320px;
	padding:12px;
	background:#fff;
	border:1px solid #ccc;
	border-radius:6px;
	box-shadow:0 4px 16px rgba(0,0,0,0.15);
	box-sizing:border-box;
}
.text_insert_title{
	box-sizing:border-box;
	width:100%;
	padding:6px;
	margin-bottom:6px;
	font-size:13px;
	font-weight:600;
	border:1px solid #ddd;
	border-radius:4px;
}
.text_insert_body{
	box-sizing:border-box;
	width:100%;
	height:90px;
	padding:6px;
	margin-bottom:8px;
	font-size:13px;
	border:1px solid #ddd;
	border-radius:4px;
	resize:vertical;
}
.text_insert_actions{
	display:flex;
	gap:8px;
	justify-content:flex-end;
}
.text_insert_actions button{
	padding:5px 12px;
	font-size:12px;
	border:none;
	border-radius:4px;
	cursor:pointer;
}
#text_insert_add{
	background:#7c3aed;
	color:#fff;
}
#text_insert_cancel{
	background:#eee;
	color:#555;
}

.capture_insert_url{
	box-sizing:border-box;
	width:100%;
	padding:6px;
	margin-bottom:6px;
	font-size:13px;
	border:1px solid #ddd;
	border-radius:4px;
}
.capture_insert_row{
	display:flex;
	align-items:center;
	gap:8px;
	justify-content:flex-end;
	flex-wrap:wrap;
}
.capture_insert_row label{
	display:flex;
	align-items:center;
	gap:4px;
	margin-right:auto;
	font-size:12px;
	color:#555;
}
.capture_insert_width{
	width:auto;
	max-width:100%;
	padding:4px 6px;
	font-size:12px;
	border:1px solid #ddd;
	border-radius:4px;
	background:#fff;
}
.capture_insert_row button{
	padding:5px 12px;
	font-size:12px;
	border:none;
	border-radius:4px;
	cursor:pointer;
}
#capture_insert_fetch{
	background:#7c3aed;
	color:#fff;
}
#capture_insert_fetch:disabled{
	background:#c4b5fd;
	cursor:default;
}
#capture_insert_cancel{
	background:#eee;
	color:#555;
}
.capture_insert_hint{
	margin:8px 0 0;
	font-size:11px;
	color:#999;
}

/* ---------- 追加処理中の仮ブロック（画像/テキスト/サイトキャプチャ/動画キャプチャ 共通） ---------- */
.pending_block{
	width:100%;
	margin:0 auto 30px;
	padding:24px 16px;
	background:#f7f3fb;
	border:2px dashed #ccc;
	box-sizing:border-box;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:10px;
	text-align:center;
}
.pending_block_spinner{
	font-size:20px;
	color:#7c3aed;
}
.pending_block_status{
	font-size:13px;
	color:#555;
}
.pending_block_bar{
	position:relative;
	width:100%;
	max-width:320px;
	height:6px;
	background:#e2e6ea;
	border-radius:3px;
	overflow:hidden;
}
.pending_block_bar_fill{
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:0%;
	background:#7c3aed;
	border-radius:3px;
	transition:width 0.6s ease;
}

/* ---------- プロジェクト一覧（index.php） ---------- */
.project_dashboard{
	padding:16px;
}
.project_dashboard_header{
	display:flex;
	align-items:center;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:8px;
	margin-bottom:16px;
}
.project_dashboard_header h2{
	margin:0;
	font-size:18px;
	color:#333;
}
.project_toolbar{
	display:flex;
	align-items:center;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:10px;
	margin-bottom:16px;
}
.project_tabs{
	display:flex;
	align-items:center;
	gap:4px;
	flex-wrap:wrap;
	border-bottom:1px solid #eee;
}
.project_tab{
	display:inline-flex;
	align-items:center;
	gap:7px;
	padding:9px 14px;
	font-size:13px;
	font-weight:600;
	color:#999;
	background:none;
	border:none;
	border-bottom:3px solid transparent;
	margin-bottom:-1px;
	cursor:pointer;
}
.project_tab:hover{
	color:#555;
}
.project_tab.active{
	color:#7c3aed;
	border-bottom-color:#7c3aed;
}
.project_tab_badge{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:20px;
	height:20px;
	padding:0 5px;
	font-size:11px;
	font-weight:700;
	color:#999;
	background:transparent;
	border-radius:10px;
}
.project_tab.active .project_tab_badge{
	color:#fff;
	background:#7c3aed;
}
.project_toolbar_actions{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:8px;
}
.project_search{
	position:relative;
	display:flex;
	align-items:center;
}
.project_search_icon{
	position:absolute;
	left:14px;
	font-size:12px;
	color:#aaa;
	pointer-events:none;
}
.project_search input{
	width:220px;
	max-width:100%;
	padding:8px 34px 8px 34px;
	font-size:13px;
	color:#333;
	border:1px solid #e2e2e2;
	border-radius:6px;
	background:#fff;
	box-sizing:border-box;
}
.project_search input:focus{
	outline:none;
	border-color:#7c3aed;
}
.project_search_clear{
	position:absolute;
	right:6px;
	display:flex;
	align-items:center;
	justify-content:center;
	width:22px;
	height:22px;
	padding:0;
	font-size:11px;
	color:#999;
	background:none;
	border:none;
	border-radius:50%;
	cursor:pointer;
}
.project_search_clear:hover{
	color:#555;
	background:#f0f0f0;
}
#project_sort_select{
	padding:7px 10px;
	font-size:13px;
	color:#333;
	background:#fff;
	border:1px solid #e2e2e2;
	border-radius:6px;
}
.project_view_toggle{
	display:flex;
	align-items:center;
	border:1px solid #e2e2e2;
	border-radius:6px;
	overflow:hidden;
}
.view_toggle_btn{
	display:flex;
	align-items:center;
	justify-content:center;
	width:34px;
	height:32px;
	font-size:13px;
	color:#999;
	background:#fff;
	border:none;
	cursor:pointer;
}
.view_toggle_btn + .view_toggle_btn{
	border-left:1px solid #e2e2e2;
}
.view_toggle_btn:hover{
	background:#f7f7f7;
	color:#555;
}
.view_toggle_btn.active{
	color:#fff;
	background:#7c3aed;
}
.project_filter_empty{
	font-size:13px;
	color:#999;
	padding:8px 0;
}
.project_loading_spinner{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	padding:20px 0;
	font-size:13px;
	color:#999;
}
.project_loading_spinner i{
	color:#7c3aed;
	font-size:15px;
}
.project_list{
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
	gap:16px;
}
.project_card{
	display:flex;
	flex-direction:column;
	gap:0;
	background:#fff;
	border:1px solid #ddd;
	border-radius:8px;
	overflow:hidden;
	transition:box-shadow 0.2s ease, transform 0.2s ease;
}
.project_card:hover{
	box-shadow:0 4px 14px rgba(0,0,0,0.1);
	transform:translateY(-2px);
}
.project_card_thumb{
	position:relative;
	width:100%;
	aspect-ratio:16/9;
	background:#f2f2f2;
	overflow:hidden;
}
.project_card_thumb img{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:top center;
	display:block;
}
.project_status_badge{
	position:absolute;
	top:8px;
	right:8px;
	z-index:2;
	padding:4px 10px;
	font-size:11px;
	font-weight:700;
	color:#fff;
	border-radius:6px;
	box-shadow:0 1px 4px rgba(0,0,0,0.25);
	white-space:nowrap;
}
.project_status_badge_progress{
	background:rgba(191,0,0,0.85);
}
.project_status_badge_done{
	background:rgba(52,199,89,0.85);
}
.project_list.list_view .project_status_badge{
	left:8px;
	right:auto;
}
/* パスワードが設定されているプロジェクトの、サムネイル左上の錠のバッジ（リスト表示では、左上に状態バッジがあるので右上） */
.project_lock_badge{
	position:absolute;
	top:8px;
	left:8px;
	z-index:2;
	display:flex;
	align-items:center;
	justify-content:center;
	width:26px;
	height:26px;
	font-size:12px;
	color:#fff;
	background:rgba(31,26,46,0.82);
	border-radius:6px;
	box-shadow:0 1px 4px rgba(0,0,0,0.25);
}
.project_list.list_view .project_lock_badge{
	left:auto;
	right:8px;
}
.project_editing_badge{
	position:absolute;
	left:8px;
	bottom:8px;
	z-index:2;
	display:inline-flex;
	align-items:center;
	gap:4px;
	padding:4px 10px;
	font-size:11px;
	font-weight:700;
	color:#fff;
	background:rgba(0,122,255,0.9);
	border-radius:6px;
	box-shadow:0 1px 4px rgba(0,0,0,0.25);
	white-space:nowrap;
	animation:project_editing_badge_pulse 1.8s ease-in-out infinite;
}
@keyframes project_editing_badge_pulse{
	0%, 100%{ opacity:1; }
	50%{ opacity:0.6; }
}
.project_card_thumb_empty{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:100%;
	color:#ccc;
	font-size:32px;
}
.project_card_body{
	flex:1;
	display:flex;
	flex-direction:column;
	padding:14px 16px;
}
.project_card_name{
	margin:0 0 6px;
	font-size:15px;
	font-weight:600;
	color:#333;
}
.project_card_complete_count{
	margin:0 0 6px;
	font-size:12px;
	font-weight:600;
	color:#666;
}
.project_card_complete_count_done{
	color:#28a347;
}
.project_card_progress{
	display:flex;
	align-items:center;
	gap:8px;
	margin:0 0 10px;
}
.project_card_progress_bar{
	flex:1;
	height:6px;
	background:#eee;
	border-radius:3px;
	overflow:hidden;
}
.project_card_progress_fill{
	height:100%;
	background:#7c3aed;
	border-radius:3px;
	transition:width 0.2s ease;
}
.project_card_progress_done .project_card_progress_fill{
	background:#34c759;
}
.project_card_progress_empty .project_card_progress_bar{
	max-width:0;
}
.project_card_progress_label{
	flex:0 0 auto;
	font-size:12px;
	color:#666;
}
.project_card_progress_done .project_card_progress_label{
	color:#28a347;
	font-weight:600;
}
.project_card_progress_empty .project_card_progress_label{
	color:#aaa;
}
.project_card_counts{
	display:flex;
	align-items:center;
	gap:14px;
	margin:0 0 10px;
	font-size:12px;
	color:#888;
}
.project_card_count_item{
	display:inline-flex;
	align-items:center;
	gap:5px;
}
.project_card_count_item i{
	color:#aaa;
	font-size:11px;
}
.project_card_link_label{
	margin:0 0 4px;
	font-size:12px;
	color:#666;
}
.project_card_link_row{
	display:flex;
	align-items:center;
	gap:6px;
	margin:0 0 10px;
}
.project_card_dates{
	margin:0 0 10px;
	font-size:11px;
	line-height:1.5;
	color:#999;
}
.project_card_date{
	margin:0;
}
.project_view_url{
	flex:1;
	min-width:0;
	padding:4px 6px;
	font-size:12px;
	border:1px solid #ddd;
	border-radius:4px;
	background:#f9f9f9;
	color:#555;
}
.btn_copy_link{
	flex:0 0 auto;
	padding:4px 8px;
	font-size:12px;
	color:#333;
	background:#fff;
	border:1px solid #ccc;
	border-radius:4px;
	cursor:pointer;
}
.btn_copy_link:hover{
	background:#f0f0f0;
}
.project_card_actions{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:8px;
	margin-top:auto;
	padding-top:4px;
}
.btn_edit_project{
	display:inline-flex;
	align-items:center;
	gap:4px;
	padding:6px 12px;
	font-size:13px;
	color:#fff;
	text-decoration:none;
	border-radius:4px;
	background:#7c3aed;
}
.btn_edit_project:hover{
	background:#6d28d9;
}
.btn_delete_project{
	padding:6px 12px;
	font-size:13px;
	color:#ff3b30;
	background:#fff;
	border:1px solid #ff3b30;
	border-radius:4px;
	cursor:pointer;
	margin-left:auto;
}
.btn_delete_project:hover{
	background:#ff3b30;
	color:#fff;
}
.project_empty{
	font-size:13px;
	color:#999;
	grid-column:1 / -1;
}

/* ---------- プロジェクト一覧：リスト表示（ボックス表示との切替） ---------- */
.project_list.list_view{
	display:flex;
	flex-direction:column;
	gap:10px;
}
.project_list.list_view .project_card{
	flex-direction:row;
	align-items:stretch;
}
.project_list.list_view .project_card:hover{
	transform:none;
}
.project_list.list_view .project_card_thumb{
	width:160px;
	flex:0 0 160px;
	aspect-ratio:16/9;
	align-self:center;
}
.project_list.list_view .project_card_body{
	flex-direction:row;
	flex-wrap:wrap;
	align-items:center;
	gap:8px 24px;
	padding:12px 18px;
}
.project_list.list_view .project_card_name{
	flex:0 0 180px;
	margin:0;
}
.project_list.list_view .project_card_complete_count{
	flex:0 0 120px;
	margin:0;
}
.project_list.list_view .project_card_progress{
	flex:1 1 150px;
	min-width:130px;
	margin:0;
}
.project_list.list_view .project_card_counts{
	flex:0 0 auto;
	margin:0;
	gap:10px;
}
.project_list.list_view .project_card_link_label{
	display:none;
}
.project_list.list_view .project_card_links{
	flex:1 1 200px;
	min-width:180px;
	display:flex;
	flex-direction:column;
	gap:4px;
	margin:0;
}
.project_list.list_view .project_card_link_row{
	margin:0;
}
.project_list.list_view .project_card_dates{
	flex:0 0 150px;
	margin:0;
	display:flex;
	flex-direction:column;
	gap:2px;
}
.project_list.list_view .project_card_actions{
	flex:0 0 auto;
	margin:0 0 0 auto;
	padding-top:0;
}
@media (max-width:900px){
	.project_list.list_view .project_card{
		flex-direction:column;
	}
	.project_list.list_view .project_card_thumb{
		width:100%;
		aspect-ratio:16/9;
	}
	.project_list.list_view .project_card_actions{
		margin-left:0;
	}
}

/* ---------- プロジェクト編集画面ヘッダー（edit.php） ----------
   .contents_split（上部）により、.project_headerは.task_app（タスクパネル・画像一覧）とは
   別のスクロールしない領域にあるため、常に表示されたままになる。以前はposition:fixedに
   JSで切り替えて「追従しているように見せる」実装だったが、その仕組みは不要になったため削除した。 */
.project_header{
	margin:0;
	box-sizing:border-box;
}
.project_header_inner{
	display:flex;
	align-items:center;
	gap:12px;
	padding:12px 16px;
	background:#fff;
	border-bottom:1px solid #eee;
	box-sizing:border-box;
}
.project_back_link{
	flex:0 0 auto;
	color:#555;
	text-decoration:none;
	font-size:13px;
}
.project_back_link:hover{
	text-decoration:underline;
}
.project_name_input{
	flex:0 1 320px;
	padding:6px 10px;
	font-size:15px;
	font-weight:600;
	border:1px solid transparent;
	border-radius:4px;
	background:transparent;
}
.project_name_input:hover,
.project_name_input:focus{
	border-color:#ccc;
	background:#fff;
	outline:none;
}
.project_view_link,
.project_edit_link{
	display:flex;
	align-items:center;
	gap:6px;
	font-size:12px;
	color:#666;
}
.project_view_link .project_view_url,
.project_edit_link .project_view_url{
	width:220px;
}
.project_password_box{
	display:flex;
	align-items:center;
	gap:6px;
	font-size:12px;
	color:#666;
	flex:0 0 auto;
}
/* 「パスワード設定」ボタン（押すとポップアップが開く）。見た目は「コピー」ボタン（.btn_copy_link）に合わせる */
.btn_project_password{
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:4px 10px;
	font-size:12px;
	color:#333;
	background:#fff;
	border:1px solid #ccc;
	border-radius:4px;
	cursor:pointer;
	white-space:nowrap;
}
.btn_project_password:hover{
	background:#f0f0f0;
}
.btn_project_password.is-set{
	color:#7c3aed;
	border-color:#7c3aed;
	background:#f7f2fe;
}
/* 鍵のアイコンは、開いている／閉じているで幅が違うので、幅をそろえて、ボタンの幅が変わらないようにする */
.btn_project_password i{
	width:1.1em;
	text-align:center;
}

/* ---------- パスワード設定ポップアップ（edit.php の #pw_modal、script/project_password.js） ---------- */
.pw_modal_overlay{
	position:fixed;
	inset:0;
	z-index:2000;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:20px;
	box-sizing:border-box;
	background:rgba(0,0,0,0.4);
	overscroll-behavior:contain;
}
.pw_modal_overlay[hidden]{
	display:none;
}
body.pw_modal_open{
	overflow:hidden;
}
.pw_modal{
	width:min(460px, 100%);
	max-height:calc(100vh - 40px);
	overflow-y:auto;
	padding:24px 26px 22px;
	box-sizing:border-box;
	background:#fff;
	border-radius:12px;
	box-shadow:0 12px 40px rgba(0,0,0,0.25);
	color:#333;
}
.pw_modal_busy{
	cursor:progress;
}
.pw_modal_busy .pw_btn{
	opacity:0.6;
	pointer-events:none;
}
.pw_modal_title{
	margin:0 0 14px;
	font-size:17px;
	color:#333;
}
.pw_modal_title i{
	margin-right:6px;
	color:#7c3aed;
}
.pw_modal_lead{
	margin:0 0 16px;
	font-size:13px;
	line-height:1.8;
	color:#555;
}
.pw_modal_msg{
	margin:0 0 14px;
	padding:8px 12px;
	font-size:12px;
	line-height:1.7;
	color:#256a3e;
	background:#eefaf1;
	border:1px solid #c9ecd5;
	border-radius:6px;
}
.pw_modal_msg.pw_modal_msg_error{
	color:#c0392b;
	background:#fdecea;
	border-color:#f5c6cb;
}
.pw_modal_msg[hidden],
.pw_view[hidden],
.pw_hint[hidden]{
	display:none;
}
.pw_label{
	display:block;
	margin:0 0 6px;
	font-size:12px;
	font-weight:700;
	color:#555;
}
.pw_input_row{
	display:flex;
	align-items:center;
	gap:6px;
}
.pw_input{
	flex:1 1 auto;
	min-width:0;
	box-sizing:border-box;
	padding:8px 10px;
	font-size:14px;
	font-family:inherit;
	color:#333;
	background:#fff;
	border:1px solid #d9d0ea;
	border-radius:6px;
	outline:none;
	transition:border-color .15s, box-shadow .15s;
}
.pw_input:hover{
	border-color:#b9a6e3;
}
.pw_input:focus{
	border-color:#7c3aed;
	box-shadow:0 0 0 3px rgba(124,58,237,0.15);
}
.pw_input[readonly]{
	background:#faf8fd;
	color:#555;
}
.pw_input::placeholder{
	color:#b3aac2;
}
.pw_eye_btn{
	flex:0 0 auto;
	width:36px;
	height:36px;
	padding:0;
	font-size:14px;
	color:#7c3aed;
	background:#fff;
	border:1px solid #d9d0ea;
	border-radius:6px;
	cursor:pointer;
}
.pw_eye_btn:hover:not(:disabled){
	background:#f3ecfb;
}
.pw_eye_btn:disabled{
	color:#ccc;
	cursor:default;
}
.pw_hint{
	margin:8px 0 0;
	font-size:11px;
	line-height:1.7;
	color:#999;
}
.pw_divider{
	height:1px;
	margin:20px 0 16px;
	background:#eee;
}
.pw_actions{
	display:flex;
	justify-content:flex-end;
	gap:8px;
	margin-top:18px;
}
.pw_actions_split{
	justify-content:space-between;
	margin-top:22px;
}
.pw_btn{
	padding:9px 18px;
	font-size:13px;
	font-family:inherit;
	border:none;
	border-radius:6px;
	cursor:pointer;
}
.pw_btn_primary{
	color:#fff;
	background:#7c3aed;
}
.pw_btn_primary:hover{
	background:#6427cf;
}
.pw_btn_inline{
	flex:0 0 auto;
	padding:9px 16px;
}
.pw_btn_cancel{
	color:#555;
	background:#f2f2f2;
}
.pw_btn_cancel:hover{
	background:#e5e5e5;
}
.pw_btn_danger{
	color:#c0392b;
	background:#fff;
	border:1px solid #e3b4ae;
}
.pw_btn_danger:hover{
	background:#fdecea;
}
/* ヘッダー右上：有効期限＋保存ボタン。左側（.project_header_main）の項目が増えて折り返しても、
   保存ボタンは常に右上に残る。「未保存の変更があります」等（.save_status）は保存ボタンの直下に、
   ヘッダーの高さを変えないよう重ねて表示する。 */
.project_header_main{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:12px;
	flex:1 1 auto;
	min-width:0;
}
/* #project_header_toggle_btn・.project_header_collapsibleはスマホ幅での折りたたみ（下のmedia query）
   のために追加した要素。デスクトップではdisplay:contentsにして、.project_header_collapsibleの中身
   （共有リンク・パスワード欄）が.project_header_mainの直接の子であるかのように振る舞わせ、
   これまでと同じ見た目（flex-wrapで横に並ぶ）を保つ。 */
.project_header_toggle_btn{
	display:none;
}
.project_header_collapsible{
	display:contents;
}
.project_header_side{
	position:relative;
	display:flex;
	align-items:center;
	gap:12px;
	flex:0 0 auto;
	margin-left:auto;
	align-self:flex-start;
}
.save_status{
	position:absolute;
	right:0;
	top:calc(100% + 6px);
	z-index:5;
	white-space:nowrap;
	padding:3px 10px;
	border-radius:4px;
	background:#fff;
	box-shadow:0 1px 6px rgba(0,0,0,0.15);
	font-size:12px;
	color:#ff9500;
}
.save_status:empty{
	display:none;
}
.save_status.save_status_ok{
	color:#34c759;
}
.project_expiry{
	flex:0 0 auto;
	font-size:12px;
	color:#888;
	white-space:nowrap;
}
.project_expiry_warning{
	color:#ff3b30;
	font-weight:600;
}
.btn_save{
	flex:0 0 auto;
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:8px 18px;
	font-size:14px;
	font-weight:600;
	color:#fff;
	background:#34c759;
	border:none;
	border-radius:4px;
	cursor:pointer;
}
.btn_save:hover{
	background:#28a347;
}
.draft_restore_banner{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:10px;
	padding:10px 16px;
	background:#fff8e1;
	border-bottom:1px solid #f0d98a;
	font-size:13px;
	color:#7a5c00;
	box-sizing:border-box;
}
.draft_restore_text{
	flex:0 1 auto;
}
.draft_restore_btn,
.draft_discard_btn{
	flex:0 0 auto;
	padding:6px 14px;
	font-size:12px;
	font-weight:600;
	border-radius:4px;
	cursor:pointer;
}
.draft_restore_btn{
	color:#fff;
	background:#ff9500;
	border:none;
}
.draft_restore_btn:hover{
	background:#e08600;
}
.draft_discard_btn{
	color:#7a5c00;
	background:#fff;
	border:1px solid #d9c27a;
}
.draft_discard_btn:hover{
	background:#fdf0cc;
}
.btn_save:disabled{
	background:#a8e0b8;
	cursor:default;
}

/* ---------- 閲覧画面（view.php） ----------
   .view_top_bar は .contents_split（上部）により .task_app（タスクパネル・画像一覧）とは別の
   スクロールしない領域にあるため、常に表示されたままになる（追従させるための処理は不要）。 */
.view_top_bar{
	box-sizing:border-box;
}
/* 上段：ロゴ＋編集／ログインボタン（edit.phpの.top_barと同じ配置）。view.phpでは.top_barクラスを
   使っていないため、同じ見た目をここで個別に持たせている。 */
.view_logo_bar{
	display:flex;
	align-items:center;
	justify-content:space-between;
	height:50px;
	flex:0 0 auto; /* .main（flexカラム）の非スクロール領域の一部。常に画面に残るためJS等の追従処理は不要 */
	padding-left:10px;
	padding-right:16px;
	box-sizing:border-box;
	background:#f3ecfb;
	border-bottom:1px solid #efefef;
}
.view_logo_bar_actions{
	display:flex;
	align-items:center;
	gap:12px;
}
.view_top_bar_inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:12px;
	padding:12px 16px;
	background:#fff;
	border-bottom:1px solid #eee;
	box-sizing:border-box;
}
.view_top_bar_inner h1{
	margin:0;
	font-size:18px;
	font-weight:600;
	color:#333;
}
.view_top_bar_actions{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:12px;
	margin-left:auto;
}
.btn_view_login{
	display:inline-flex;
	align-items:center;
	gap:4px;
	padding:6px 12px;
	font-size:13px;
	color:#7c3aed;
	text-decoration:none;
	border:1px solid #7c3aed;
	border-radius:4px;
}
/* 「無料で使ってみる」（未ログインの閲覧者・編集用リンク参加者向け） */
.btn_try_free{
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:6px 14px;
	font-size:13px;
	font-weight:600;
	color:#fff;
	background:#7c3aed;
	text-decoration:none;
	border:1px solid #7c3aed;
	border-radius:4px;
	white-space:nowrap;
}
.btn_try_free:hover{
	background:#6d28d9;
}
.btn_view_login:hover{
	background:#f2ecfb;
}
.view_error{
	max-width:480px;
	margin:80px auto;
	text-align:center;
	color:#666;
}
.task_empty_row{
	padding:8px 10px;
	font-size:12px;
	color:#aaa;
}
.view_mode .task_rect{
	cursor:pointer;
}
.view_mode .rect_layer{
	cursor:default;
}
.view_mode .task_item{
	cursor:default;
}
.view_mode .task_item:hover{
	background:transparent;
}

/* ---------- 閲覧画面：矩形クリックのポップアップ ---------- */
.view_rect_popup{
	display:none;
	position:absolute;
	z-index:1000;
	width:240px;
	background:#fff;
	border:1px solid #ccc;
	border-radius:6px;
	box-shadow:0 4px 16px rgba(0,0,0,0.15);
	padding:12px;
}
.view_rect_popup_text{
	font-size:13px;
	color:#333;
	white-space:pre-wrap;
	word-break:break-word;
	margin-bottom:10px;
	max-height:200px;
	overflow-y:auto;
}
.view_rect_popup_attachment{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin-bottom:10px;
}
.view_rect_popup_attachment_img{
	display:block;
	max-width:110px;
	max-height:110px;
	border:1px solid #ddd;
	border-radius:4px;
	cursor:zoom-in;
}
.view_rect_popup_status_group{
	display:flex;
	flex-direction:column;
	gap:4px;
	margin-bottom:10px;
}
.view_rect_popup_status{
	display:flex;
	align-items:center;
	gap:6px;
	font-size:13px;
	font-weight:600;
	color:#333;
	cursor:pointer;
}
.view_rect_popup_status input[type="checkbox"]{
	width:15px;
	height:15px;
}
.view_rect_popup_status_work{ color:#7c3aed; }
.view_rect_popup_status_work input[type="checkbox"]{ accent-color:#7c3aed; }
.view_rect_popup_status_confirm{ color:#ff3b30; }
.view_rect_popup_status_confirm input[type="checkbox"]{ accent-color:#ff3b30; }
.view_rect_popup_close{
	width:100%;
	padding:6px 0;
	font-size:12px;
	color:#333;
	background:#eee;
	border:none;
	border-radius:4px;
	cursor:pointer;
}
.view_rect_popup_close:hover{
	background:#ddd;
}

/* ---------- ドラッグ並び替え（タスク・画像共通） ---------- */
.dragging_ghost{
	box-shadow:0 12px 32px rgba(0,0,0,0.3);
	opacity:0.95;
	cursor:grabbing !important;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}
.task_item.dragging_ghost{
	background:#fff;
	border-radius:6px;
}
.drag_placeholder{
	box-sizing:border-box;
	background:#f2ecfb;
	border:2px dashed #7c3aed;
	border-radius:6px;
}
/* Firefox等でドラッグ中にテキスト選択が走って追従が乱れるのを防ぐ */
body.drag_reorder_active{
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	cursor:grabbing !important;
}
body.drag_reorder_active *{
	cursor:grabbing !important;
}

/* ---------- テキストブロック（タイトル＋本文。画像一覧の末尾に表示） ---------- */
.text_block{
	width:100%;
	margin:0 auto 30px;
	background:#fff;
	border:2px solid #333;
	box-sizing:border-box;
}
.text_block.text_range_reselecting{
	border-color:#7c3aed;
	box-shadow:0 0 0 3px rgba(0,122,255,0.25);
}
.text_block_toolbar{
	display:flex;
	align-items:center;
	gap:8px;
	padding:6px 10px;
	background:rgba(255,255,255,0.9);
	border-bottom:1px solid #eee;
}
.text_block_hint{
	flex:1;
	font-size:11px;
	color:#999;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.text_block_edit_btn{
	flex:0 0 auto;
	display:inline-flex;
	align-items:center;
	gap:5px;
	padding:0 10px;
	height:24px;
	font-size:12px;
	color:#fff;
	background:#7c3aed;
	border:1px solid #7c3aed;
	border-radius:4px;
	cursor:pointer;
}
.text_block_edit_btn:hover{
	background:#6d28d9;
}
.text_block_delete_btn{
	flex:0 0 auto;
	width:24px;
	height:24px;
	font-size:12px;
	color:#555;
	background:#fff;
	border:1px solid #ccc;
	border-radius:4px;
	cursor:pointer;
}
.text_block_delete_btn:hover{
	background:#ff3b30;
	border-color:#ff3b30;
	color:#fff;
}
.text_block_body_wrap{
	padding:20px 24px;
	max-width:860px;
	box-sizing:border-box;
}
.text_block_title{
	margin:0 0 12px;
	font-size:18px;
	font-weight:700;
	color:#222;
	cursor:text;
	-webkit-user-select:text;
	user-select:text;
}
.text_block_body{
	font-size:14px;
	line-height:1.9;
	color:#333;
	white-space:pre-wrap;
	word-break:break-word;
	cursor:text;
	-webkit-user-select:text;
	user-select:text;
}
.text_task_highlight{
	position:relative;
	cursor:pointer;
	border-radius:2px;
	padding:0 1px;
	box-decoration-break:clone;
	-webkit-box-decoration-break:clone;
}
.text_task_highlight.text_task_highlight_done{
	opacity:0.5;
	text-decoration:line-through;
}
.text_task_highlight.rect_highlight{
	animation:rect_highlight_pulse 1.6s ease-out;
}
.text_task_label{
	/* 表示はしない（マウスオーバー時のテキストの取得元としてのみDOMに残す）。
	   実際のポップアップ表示は #floating_tooltip が担当する（常に最前面に表示するため）。 */
	display:none;
}

/* ---------- テキストブロックのインライン編集（タイトル・本文） ---------- */
.text_block_edit_form{
	padding:16px;
}
.text_block_edit_title{
	box-sizing:border-box;
	width:100%;
	padding:8px;
	margin-bottom:8px;
	font-size:15px;
	font-weight:700;
	border:1px solid #ddd;
	border-radius:4px;
}
.text_block_edit_body{
	box-sizing:border-box;
	width:100%;
	height:180px;
	padding:8px;
	margin-bottom:8px;
	font-size:14px;
	line-height:1.8;
	border:1px solid #ddd;
	border-radius:4px;
	resize:vertical;
}
.text_block_edit_actions{
	display:flex;
	gap:8px;
	justify-content:flex-end;
}
.text_block_edit_actions button{
	padding:5px 12px;
	font-size:12px;
	border:none;
	border-radius:4px;
	cursor:pointer;
}
.text_block_edit_save{
	background:#7c3aed;
	color:#fff;
}
.text_block_edit_cancel{
	background:#eee;
	color:#555;
}

/* ---------- トップページ（ログイン不要の案内ページ、/index.php） ---------- */
.landing_frame{
	/* 以前はposition:absoluteで画面中央に固定していたが、上に全体周知・記事のお知らせが
	   増えると、それらの高さを考慮せず常に画面中央に重なって表示されてしまっていた。
	   通常のフロー（他の要素の下に続けて配置）に変更し、内容が1画面を超える場合は
	   ページ全体がスクロールするようにする（html側の背景色フォールバックで対応済み）。 */
	width:min(420px, 90%);
	margin:60px auto;
	text-align:center;
}
.landing_logo{
	height:56px;
	margin:0 0 12px;
}
.landing_tagline{
	color:#666;
	font-size:14px;
	margin:0 0 28px;
}
.landing_actions{
	display:flex;
	flex-direction:column;
	gap:12px;
}
.landing_btn{
	display:block;
	width:100%;
	box-sizing:border-box;
	padding:0.75em 1.5em;
	font-size:1.05em;
	font-weight:600;
	border-radius:0.2em;
	border:1px solid transparent;
	cursor:pointer;
	text-decoration:none;
	text-align:center;
}
.landing_btn_primary{
	background:#7c3aed;
	color:#fff;
	border-color:#7c3aed;
}
.landing_btn_primary:hover{
	background:#6d28d9;
}
.landing_btn_secondary{
	background:#fff;
	color:#7c3aed;
	border-color:#7c3aed;
}
.landing_btn_secondary:hover{
	background:#f2ecfb;
}
.landing_btn_disabled{
	background:#f2f2f2;
	color:#aaa;
	border-color:#ddd;
	cursor:not-allowed;
}

/* ---------- ログイン（/login.php）／新規登録（/register.php）共通のカードデザイン ----------
   見た目を完全に揃えるため、両画面とも同じ auth_* クラスを使っている
   （login.php は旧 css/base.css 側の .login_frame 等はもう使っていない）。 */
.auth_frame{
	/* landing_frameと同じ理由で、画面中央への固定配置から通常のフローに変更している
	   （上に全体周知・記事のお知らせが表示される場合に重ならないようにするため）。 */
	width:min(420px, 92%);
	margin:60px auto;
	background:#fff;
	border-radius:10px;
	box-shadow:0 4px 24px rgba(124,58,237,0.12);
	padding:32px 28px;
	box-sizing:border-box;
	text-align:center;
}
.auth_logo_link{
	display:inline-block;
}
.auth_logo{
	height:44px;
	margin:0 0 16px;
}
.auth_title{
	margin:0 0 20px;
	font-size:20px;
	color:#333;
}
.auth_plan_selected{
	margin:-12px 0 20px;
	font-size:12px;
	color:#888;
}
.auth_plan_selected a{
	color:#7c3aed;
	text-decoration:none;
	font-weight:600;
}
.auth_plan_selected a:hover{
	text-decoration:underline;
}
.auth_error{
	background:#fdecea;
	color:#c0392b;
	border:1px solid #f5c6cb;
	border-radius:6px;
	padding:10px 12px;
	font-size:13px;
	text-align:left;
	margin:0 0 16px;
}
.auth_form{
	text-align:left;
}
.auth_field{
	margin:0 0 16px;
}
.auth_field label{
	display:block;
	font-size:13px;
	color:#555;
	font-weight:600;
	margin:0 0 6px;
}
.auth_field input,
.auth_field textarea{
	width:100%;
	box-sizing:border-box;
	padding:0.6em 0.8em;
	font-size:14px;
	font-family:inherit;
	border:1px solid #ddd;
	border-radius:6px;
	resize:vertical;
}
.auth_field input:focus,
.auth_field textarea:focus{
	outline:none;
	border-color:#7c3aed;
	box-shadow:0 0 0 2px rgba(124,58,237,0.15);
}
.auth_hint{
	margin:6px 0 0;
	font-size:12px;
	color:#999;
}
.auth_hint_error{
	color:#c0392b;
}
.auth_sent{
	background:#eefaf1;
	color:#256a3e;
	border:1px solid #c9ecd5;
	border-radius:6px;
	padding:14px 16px;
	font-size:14px;
	line-height:1.6;
	text-align:left;
	margin:0 0 16px;
}
.auth_form .landing_btn{
	margin-top:4px;
}

.auth_divider{
	display:flex;
	align-items:center;
	gap:12px;
	margin:20px 0;
	color:#aaa;
	font-size:12px;
}
.auth_divider::before,
.auth_divider::after{
	content:'';
	flex:1;
	height:1px;
	background:#eee;
}
.auth_google_btn{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	width:100%;
	box-sizing:border-box;
	padding:0.7em 1.5em;
	font-size:1em;
	font-weight:600;
	border-radius:0.2em;
	border:1px solid #ddd;
	background:#fff;
	color:#444;
	text-decoration:none;
	cursor:pointer;
}
.auth_google_btn:hover{
	background:#f7f7f7;
}
.auth_google_icon{
	width:18px;
	height:18px;
	flex:0 0 18px;
}
.auth_footer{
	margin:20px 0 0;
	font-size:13px;
	color:#666;
	text-align:center;
}
.auth_footer a{
	color:#7c3aed;
	text-decoration:none;
	font-weight:600;
}
.auth_footer a:hover{
	text-decoration:underline;
}

/* ---------- プラン選択画面（/plan.php） ---------- */
.plan_page{
	/* landing_frameと同じ理由で、画面中央への固定配置から通常のフローに変更している
	   （上に全体周知・記事のお知らせが表示される場合に重ならないようにするため）。 */
	width:min(920px, 94%);
	margin:60px auto;
	text-align:center;
}
.plan_logo_link{
	display:inline-block;
}
.plan_logo{
	height:44px;
	margin:0 0 16px;
}
.plan_page_title{
	margin:0 0 8px;
	font-size:22px;
	color:#333;
}
.plan_page_lead{
	margin:0 0 28px;
	font-size:13px;
	color:#888;
}
.plan_cards{
	display:flex;
	flex-wrap:wrap;
	gap:20px;
	justify-content:center;
	margin:0 0 24px;
}
.plan_card{
	flex:1 1 260px;
	max-width:300px;
	background:#fff;
	border-radius:10px;
	box-shadow:0 4px 24px rgba(124,58,237,0.12);
	padding:28px 24px;
	box-sizing:border-box;
}
.plan_card_name{
	margin:0 0 12px;
	font-size:18px;
	color:#333;
}
.plan_card_duration{
	margin:0 0 20px;
	font-size:13px;
	color:#666;
	min-height:36px;
}
.plan_card_btn{
	width:100%;
}

/* ---------- サイト共通フッター（ガイド／お問い合わせ／フィードバック／利用規約への導線） ----------
   .mainの内部レイアウト（ページによって外部のcss/base.css依存だったり、position:absoluteで
   中央寄せしていたりバラバラ）には一切手を入れず、position:fixedで画面下に独立して重ねている。
   そのため既存ページのレイアウトへの影響なく、対象ページに1行requireするだけで追加できる。
   フッターと重なる可能性がある本文側は、各ページで.content_page_body等にpadding-bottomを足して
   逃がしている。 */
.site_footer{
	position:fixed;
	left:0;
	right:0;
	bottom:0;
	z-index:80;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-wrap:wrap;
	gap:4px 20px;
	padding:8px 16px;
	background:rgba(255,255,255,0.96);
	border-top:1px solid #e5e0f0;
	box-shadow:0 -1px 6px rgba(0,0,0,0.04);
	font-size:12px;
}
.site_footer_links{
	display:flex;
	flex-wrap:wrap;
	gap:4px 16px;
}
.site_footer_links a{
	color:#666;
	text-decoration:none;
}
.site_footer_links a:hover{
	color:#7c3aed;
	text-decoration:underline;
}
.site_footer_copy{
	margin:0;
	color:#aaa;
}

/* ---------- ガイド／お問い合わせ／フィードバック／利用規約（共通の読み物・フォーム用レイアウト） ---------- */
.content_page{
	width:min(720px, 92%);
	margin:0 auto;
	padding:48px 0 96px;
	box-sizing:border-box;
}
.content_page_header{
	text-align:center;
	margin:0 0 24px;
}
.content_page_logo{
	height:40px;
	margin:0 0 16px;
}
.content_page_title{
	margin:0;
	font-size:22px;
	color:#333;
}
.content_page_body{
	background:#fff;
	border-radius:10px;
	box-shadow:0 4px 24px rgba(124,58,237,0.08);
	padding:32px 36px;
	box-sizing:border-box;
	color:#333;
	line-height:1.8;
}
.content_page_body h2{
	margin:28px 0 12px;
	font-size:17px;
	color:#333;
	border-left:4px solid #7c3aed;
	padding-left:10px;
}
.content_page_body h2:first-child{
	margin-top:0;
}
.content_page_body p{
	margin:0 0 14px;
	font-size:14px;
	color:#444;
}
.content_page_body ul,
.content_page_body ol{
	margin:0 0 14px;
	padding-left:1.4em;
	font-size:14px;
	color:#444;
}
.content_page_body li{
	margin:0 0 6px;
}
.content_page_body a{
	color:#7c3aed;
}
.content_page_body figure{
	margin:0 0 20px;
}
.content_page_body figure img{
	display:block;
	max-width:100%;
	height:auto;
	border:1px solid #e5e0f0;
	border-radius:8px;
	box-shadow:0 2px 10px rgba(0,0,0,0.06);
}
.content_page_body figcaption{
	margin:8px 0 0;
	font-size:12px;
	color:#999;
	text-align:center;
}
/* ガイド（guide.php）の目次。各見出し（h2）へのページ内リンク */
.guide_toc{
	display:flex;
	flex-wrap:wrap;
	gap:6px 8px;
	margin:0 0 24px;
	padding:14px 16px;
	background:#faf8fd;
	border:1px solid #ece6f7;
	border-radius:10px;
}
.content_page_body .guide_toc a{
	padding:3px 12px;
	font-size:12px;
	line-height:1.8;
	color:#7c3aed;
	text-decoration:none;
	background:#fff;
	border:1px solid #ddd0f5;
	border-radius:20px;
}
.content_page_body .guide_toc a:hover{
	background:#f2ecfb;
	border-color:#7c3aed;
}
.content_page_body h2[id]{
	scroll-margin-top:16px;
}
.content_page_body li > ul{
	margin:6px 0 0;
}
.content_page_lead{
	text-align:center;
	color:#888;
	font-size:13px;
	margin:0 0 24px;
}
.content_page_back{
	display:block;
	text-align:center;
	margin:24px 0 0;
	font-size:13px;
	color:#666;
	text-decoration:none;
}
.content_page_back:hover{
	text-decoration:underline;
}
.content_page_note{
	margin:24px 0 0;
	padding:12px 14px;
	background:#faf8fd;
	border:1px solid #ece6f7;
	border-radius:6px;
	font-size:12px;
	color:#888;
	line-height:1.7;
}

/* ---------- フィードバック募集カード（feedback_widget.php）。画面右下に追従して表示する ---------- */
.feedback_widget{
	position:fixed;
	right:20px;
	bottom:20px;
	z-index:500; /* 画面上部の固定バー(60〜70)・フッター(80)より上、モーダル(1000〜)より下 */
	width:250px;
	height:250px;
	box-sizing:border-box;
	padding:22px 20px 18px;
	background:#fff;
	border:1px solid #e5dcf5;
	border-radius:18px;
	box-shadow:0 8px 28px rgba(124,58,237,0.22);
	text-align:center;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:8px;
}
.feedback_widget_above_footer{
	bottom:68px; /* 画面下固定のフッター（.site_footer）と重ならない */
}
.feedback_widget_close{
	position:absolute;
	top:8px;
	right:8px;
	width:26px;
	height:26px;
	padding:0;
	border:none;
	border-radius:50%;
	background:transparent;
	color:#999;
	font-size:14px;
	cursor:pointer;
}
.feedback_widget_close:hover{
	background:#f2ecfb;
	color:#7c3aed;
}
.feedback_widget_icon{
	font-size:30px;
	color:#7c3aed;
	line-height:1;
}
.feedback_widget_title{
	margin:0;
	font-size:16px;
	font-weight:700;
	color:#333;
}
.feedback_widget_text{
	margin:0;
	font-size:12px;
	line-height:1.7;
	color:#666;
}
.feedback_widget_link{
	display:inline-flex;
	align-items:center;
	gap:6px;
	margin-top:4px;
	padding:8px 14px;
	font-size:13px;
	font-weight:600;
	color:#fff;
	background:#7c3aed;
	border-radius:6px;
	text-decoration:none;
}
.feedback_widget_link:hover{
	background:#6d28d9;
}
@media (max-width:480px){
	.feedback_widget{ right:10px; }
}

/* ---------- 全体周知（notice_log.php）。account/index.php・edit.php・view.php のtop_barの下に表示 ---------- */
.notice_list{
	display:flex;
	flex-direction:column;
	gap:8px;
	padding:10px 16px;
}
.notice_item{
	padding:10px 14px;
	border-radius:8px;
	border:1px solid;
	font-size:13px;
	line-height:1.7;
}
/* リンクする記事が設定されているお知らせ（notice_log.phpのnotice_item_clickable）。
   クリックできることが分かるよう、カーソルと右端の矢印アイコンだけ付ける（色・枠は種類ごとの見た目のまま）。 */
.notice_item_clickable{
	position:relative;
	cursor:pointer;
	padding-right:34px;
}
.notice_item_clickable::after{
	content:"\f105";
	font-family:"Font Awesome 5 Free";
	font-weight:900;
	position:absolute;
	top:50%;
	right:14px;
	transform:translateY(-50%);
	opacity:0.6;
}
.notice_item_clickable:hover{
	opacity:0.85;
}
.notice_item_important{
	background:#fdecea;
	border-color:#f5b7b1;
	color:#c0392b;
}
.notice_item_warning{
	background:#fff8e1;
	border-color:#ffe082;
	color:#8a6d00;
}
.notice_item_general{
	background:#fff;
	border-color:#ddd;
	color:#444;
}

/* ---------- 記事（article_log.php）：TOPページの一覧・他画面のバー・ポップアップ共通 ---------- */
/* カテゴリのバッジ：名前の長さに関わらず、同じ幅（日本語6文字ぶんの文字幅＋左右の余白）に揃え、
   文字は中央寄せにする。高さ・余白は元のまま。
   名前が入りきらないときは、省略（…）せずに文字を小さくして全部入れる（script/article.js が
   実際の表示幅を測って font-size を下げる） */
.article_badge{
	display:inline-block;
	flex:0 0 auto;
	box-sizing:border-box;
	width:88px; /* 文字の幅 66px（11px×6文字）＋ 左右の余白 10px×2 ＋ 枠線 1px×2 */
	padding:2px 10px;
	font-size:11px;
	font-weight:600;
	text-align:center;
	border:1px solid;
	border-radius:20px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis; /* 下限（6px）まで縮めても入らない極端に長い名前の、最後の手段 */
}
.article_row_arrow{
	flex:0 0 auto;
	font-size:11px;
	color:#7c3aed;
}
.article_row_switch{
	flex:1 1 auto;
	min-width:0;
	display:flex;
	align-items:baseline;
	gap:10px;
}
.article_row_title{
	flex:1 1 auto;
	min-width:0;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
/* マウスを乗せたとき、省略されたタイトルを横にスクロールして最後まで見せる（script/article.jsが
   タイトルの中身を .article_row_title_text で包み、is-scrolling を付け外しして、スクロール距離と
   一周の時間を変数で渡す）。
   少し止まる → 一定の速さで最後までスクロール → 少し止まる → 元に戻る、をくり返す。
   文字をずらす（text-indent）のではなく、transform で動かすことで、1文字ごとのカクつきなく滑らかに流れる */
.article_row_title.is-scrolling{
	text-overflow:clip;
}
.article_row_title.is-scrolling .article_row_title_text{
	display:inline-block;
	will-change:transform;
	animation:article_title_scroll var(--article-title-dur, 4s) linear infinite;
}
/* 記事バー（記事が複数あるとき）：マウスを乗せなくても、記事が表示されたら自動で、上の
   .is-scrolling と同じ1ループ（止まる→最後まで流れる→止まる→元に戻る）を1回だけ行い、
   終わったら次の記事に切り替わる（script/article.js）。
   マウスを乗せる・ポップアップを開くなどで .article_bar に is-paused が付いている間は、その場で止める */
.article_row_title.is-auto-scrolling{
	text-overflow:clip;
}
.article_row_title.is-auto-scrolling .article_row_title_text{
	display:inline-block;
	will-change:transform;
	animation:article_title_scroll var(--article-title-dur, 4s) linear 1 both;
}
.article_bar.is-paused .article_row_title.is-auto-scrolling .article_row_title_text{
	animation-play-state:paused;
}
@keyframes article_title_scroll{
	0%, 12%{ transform:translateX(0); }
	62%, 76%{ transform:translateX(calc(var(--article-title-dist, 0px) * -1)); }
	90%, 100%{ transform:translateX(0); }
}
.article_row_date{
	flex:0 0 auto;
	color:#999;
	font-size:12px;
}

/* ---------- TOPページの記事一覧（.article_widget） ---------- */
.article_widget{
	width:min(720px, 92%);
	margin:40px auto 0;
	background:#fff;
	border-radius:10px;
	box-shadow:0 4px 24px rgba(124,58,237,0.08);
	padding:24px 28px;
	box-sizing:border-box;
}
.article_widget_title{
	margin:0 0 14px;
	font-size:15px;
	color:#333;
}
.article_list{
	list-style:none;
	margin:0;
	padding:0;
}
.article_row{
	display:flex;
	align-items:center;
	gap:10px;
	padding:10px 4px;
	border:1px solid transparent;
	border-bottom:1px solid #f0eaf9;
	border-radius:6px;
	box-sizing:border-box;
	cursor:pointer;
}
.article_row:hover{
	background:#faf8fd;
	border-color:#7c3aed;
}
.article_row_important .article_row_title{
	color:#c0392b;
	font-weight:600;
}
.article_widget_more{
	display:block;
	text-align:center;
	margin:14px 0 0;
	font-size:13px;
	color:#7c3aed;
	text-decoration:none;
}
.article_widget_more:hover{
	text-decoration:underline;
}

/* ---------- TOP以外の画面のコンパクトな記事バー ---------- */
.article_bar{
	display:grid;
	grid-template-columns:minmax(0, 1fr);
	align-items:center;
	overflow:hidden; /* 切り替え時に、記事が上から下へ流れる動き（下の.article_bar_item）を枠の中に収める */
	cursor:pointer;
}
/* バーの中の記事1件ぶん。すべて同じマス（grid-area:1/1）に重ねて置き、.is-active の1件だけを表示する
   （高さは一番高い記事に揃うので、切り替えてもバーの高さは変わらない）。
   script/article.js が一定間隔で切り替える。切り替え時は、新しい記事が上から下へ流れ込み、
   それまでの記事が下へ流れ出ていく（スクロールしているような動き）。
   JSが動かない環境でも、先頭の1件だけは表示される。
   OSの「視覚効果を減らす」設定（prefers-reduced-motion）がオンの環境でも、この動きは省略しない
   （短い切り替えだけで、動きを見せることを優先している）。 */
.article_bar_item{
	grid-area:1 / 1;
	display:flex;
	min-width:0;
	align-items:center;
	gap:10px;
	visibility:hidden;
}
.article_bar_item.is-active{
	visibility:visible;
}
.article_bar_item.is-entering{
	animation:article_bar_in .5s ease-out;
}
.article_bar_item.is-leaving{
	visibility:visible;
	animation:article_bar_out .5s ease-in forwards;
}
@keyframes article_bar_in{
	from{ transform:translateY(-100%); opacity:0; }
	to{ transform:none; opacity:1; }
}
@keyframes article_bar_out{
	from{ transform:none; opacity:1; }
	to{ transform:translateY(100%); opacity:0; }
}
.article_bar_topbar{
	flex:1 1 auto;
	min-width:0;
	max-width:420px;
	margin:0 16px;
	padding:5px 12px;
	background:#faf8fd;
	border:1px solid #ece6f7;
	border-radius:20px;
	font-size:12px;
	box-sizing:border-box;
}
.article_bar_topbar:hover{
	background:#f2ecfb;
	border-color:#7c3aed;
}
.article_bar_block{
	margin:10px 16px; /* 全体周知（.notice_list）の外側の余白（10px 16px）と揃え、画面端にくっつかないようにする */
	padding:10px 14px;
	border:1px solid transparent;
	border-radius:8px;
	box-sizing:border-box;
	font-size:13px;
}
.article_bar_block:hover{
	background:#faf8fd;
	border-color:#7c3aed;
}

/* ---------- 記事ポップアップ ---------- */
.article_popup_overlay{
	position:fixed;
	inset:0;
	overscroll-behavior:contain; /* ポップアップ内のスクロールが端に来ても、背面のページへスクロールが伝わらないようにする */
	background:rgba(0,0,0,0.4);
	z-index:2000;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:20px;
	box-sizing:border-box;
}
.article_popup_modal{
	width:min(640px, 100%);
	max-height:min(720px, 90vh);
	background:#fff;
	border-radius:10px;
	box-shadow:0 12px 40px rgba(0,0,0,0.25);
	display:flex;
	flex-direction:column;
	overflow:hidden;
}
.article_popup_header{
	flex:0 0 auto;
	padding:20px 24px 12px;
	border-bottom:1px solid #eee;
}
.article_popup_title{
	margin:0;
	font-size:18px;
	color:#333;
}
/* 未読の重要記事を自動で開いたとき（account/index.php、script/article.js）だけ、タイトルの上に出すラベル */
.article_popup_counter{
	margin:0 0 6px;
	font-size:12px;
	font-weight:700;
	color:#c0392b;
}
.article_popup_body{
	flex:1 1 auto;
	min-height:0;
	overflow-y:auto;
	overscroll-behavior:contain;
	padding:20px 24px;
}
.article_popup_loading{
	margin:0;
	padding:20px 0;
	text-align:center;
	color:#999;
	font-size:13px;
}
.article_popup_footer{
	flex:0 0 auto;
	padding:12px 24px;
	border-top:1px solid #eee;
	text-align:right;
}
.article_popup_close_btn{
	padding:8px 20px;
	font-size:13px;
	color:#555;
	background:#f2f2f2;
	border:none;
	border-radius:5px;
	cursor:pointer;
}
.article_popup_close_btn:hover{
	background:#e5e5e5;
}

/* ---------- 記事本文（admin/article_edit.phpで入力するHTML）の装飾。ポップアップ・articles.phpの
   記事詳細で共通して使う。管理者がタグを使わず素のテキストだけ書いた場合でも読みやすいよう、
   基本的な要素にひととおりスタイルを当てておく。 ---------- */
.article_body_content{
	font-size:14px;
	line-height:1.9;
	color:#333;
	word-break:break-word;
}
.article_body_content h1,
.article_body_content h2,
.article_body_content h3{
	margin:1.4em 0 0.6em;
	color:#333;
	font-weight:700;
	line-height:1.5;
}
.article_body_content h1:first-child,
.article_body_content h2:first-child,
.article_body_content h3:first-child{
	margin-top:0;
}
.article_body_content h1{ font-size:1.4em; }
.article_body_content h2{ font-size:1.25em; border-bottom:1px solid #eee; padding-bottom:0.3em; }
.article_body_content h3{ font-size:1.1em; }
.article_body_content p{
	margin:0 0 1em;
}
.article_body_content a{
	color:#7c3aed;
	text-decoration:underline;
}
.article_body_content strong,
.article_body_content b{
	font-weight:700;
}
.article_body_content ul,
.article_body_content ol{
	margin:0 0 1em;
	padding-left:1.6em;
}
.article_body_content li{
	margin:0 0 0.4em;
}
.article_body_content img{
	max-width:100%;
	height:auto;
	border-radius:6px;
	margin:0.6em 0;
	display:block;
}
.article_body_content blockquote{
	margin:0 0 1em;
	padding:10px 16px;
	background:#faf8fd;
	border-left:4px solid #7c3aed;
	color:#555;
}
.article_body_content code{
	padding:0.1em 0.4em;
	background:#f2f2f2;
	border-radius:4px;
	font-size:0.9em;
}
.article_body_content pre{
	margin:0 0 1em;
	padding:12px 14px;
	background:#2d2d2d;
	color:#f2f2f2;
	border-radius:6px;
	overflow-x:auto;
}
.article_body_content pre code{
	background:none;
	color:inherit;
	padding:0;
}
.article_body_content hr{
	margin:1.4em 0;
	border:none;
	border-top:1px solid #eee;
}
.article_body_content table{
	width:100%;
	border-collapse:collapse;
	margin:0 0 1em;
	font-size:0.95em;
}
.article_body_content th,
.article_body_content td{
	padding:8px 10px;
	border:1px solid #eee;
	text-align:left;
}

/* ---------- 記事一覧ページ（articles.php） ---------- */
.article_category_filter{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin:0 0 20px;
}
.article_category_filter_link{
	padding:4px 14px;
	font-size:12px;
	font-weight:600;
	border:1px solid #ddd;
	border-radius:20px;
	color:#666;
	text-decoration:none;
}
.article_category_filter_link.active{
	color:#fff !important;
}
.article_list_page .article_row{
	padding:12px 6px;
}
.article_pagination_btn{
	width:auto;
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:8px 16px;
}
.article_pagination{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:16px;
	margin-top:20px;
}
.article_pagination_status{
	font-size:13px;
	color:#666;
}

/* =========================================================================
 * 編集・閲覧画面のフォーム部品（入力欄・テキストエリア・セレクト）の共通デザイン。
 * これまでは、ブラウザ標準の見た目（textareaは等幅フォント、フォーカス時は青い枠など）のままだったので、
 * フォント・枠・角丸・フォーカス時の色（ブランドの紫）をそろえる。
 * 大きさ・余白は各部品の元の指定のまま（レイアウトは変えない）。
 * ========================================================================= */
.project_view_url,
.task_new_text,
.rect_menu_text,
.text_insert_title,
.text_insert_body,
.capture_insert_url,
.capture_insert_width,
.video_capture_youtube_input,
.task_comment_input,
.task_text_edit{
	font-family:inherit;
	color:#333;
	background-color:#fff;
	border:1px solid #d9d0ea;
	border-radius:6px;
	outline:none;
	transition:border-color .15s, box-shadow .15s, background-color .15s;
}
.project_view_url{
	background-color:#faf8fd;
	color:#666;
}
.project_view_url:hover,
.task_new_text:hover,
.rect_menu_text:hover,
.text_insert_title:hover,
.text_insert_body:hover,
.capture_insert_url:hover,
.capture_insert_width:hover,
.video_capture_youtube_input:hover,
.task_comment_input:hover,
.task_text_edit:hover{
	border-color:#b9a6e3;
}
.project_view_url:focus,
.task_new_text:focus,
.rect_menu_text:focus,
.text_insert_title:focus,
.text_insert_body:focus,
.capture_insert_url:focus,
.capture_insert_width:focus,
.video_capture_youtube_input:focus,
.task_comment_input:focus,
.task_text_edit:focus,
.project_name_input:focus,
.image_area_name_input:focus{
	border-color:#7c3aed;
	background-color:#fff;
	color:#222;
	box-shadow:0 0 0 3px rgba(124,58,237,0.15);
	outline:none;
}
.task_new_text::placeholder,
.rect_menu_text::placeholder,
.text_insert_title::placeholder,
.text_insert_body::placeholder,
.capture_insert_url::placeholder,
.video_capture_youtube_input::placeholder,
.task_comment_input::placeholder{
	color:#b3aac2;
}
/* テキストエリア：複数行の入力欄は、行間をゆったり取り、右下のつまみ（サイズ変更）だけ残す */
.task_new_text,
.rect_menu_text,
.text_insert_body,
.task_comment_input,
.task_text_edit{
	line-height:1.6;
}
/* セレクト：ブラウザ標準の矢印をやめ、紫の矢印に統一 */
.capture_insert_width{
	-webkit-appearance:none;
	appearance:none;
	padding-right:26px;
	cursor:pointer;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237c3aed' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right 9px center;
}
.capture_insert_width option{
	color:#333;
	background:#fff;
}
/* 動画キャプチャのシークバー（スライダー）：トラックとつまみを紫に */
.video_capture_seek_bar{
	-webkit-appearance:none;
	appearance:none;
	height:6px;
	border-radius:999px;
	background:#e6dff4;
	outline:none;
	cursor:pointer;
}
.video_capture_seek_bar::-webkit-slider-thumb{
	-webkit-appearance:none;
	appearance:none;
	width:16px;
	height:16px;
	border-radius:50%;
	background:#7c3aed;
	border:2px solid #fff;
	box-shadow:0 1px 4px rgba(0,0,0,0.3);
}
.video_capture_seek_bar::-moz-range-thumb{
	width:14px;
	height:14px;
	border-radius:50%;
	background:#7c3aed;
	border:2px solid #fff;
	box-shadow:0 1px 4px rgba(0,0,0,0.3);
}
.video_capture_seek_bar::-moz-range-track{
	height:6px;
	border-radius:999px;
	background:#e6dff4;
}

/* ---------- 上の共通デザインを、ほかの入力欄（ログイン・登録・お問い合わせ・フィードバック・
   パスワード入力・退会のフォーム、プロジェクト一覧の検索欄・並び替え）にも適用する。
   大きさ・余白はそれぞれの元の指定のまま、枠・角丸・フォント・ホバー/フォーカス・案内文の色だけをそろえる ---------- */
.auth_field input,
.auth_field textarea,
.project_search input,
#project_sort_select{
	font-family:inherit;
	color:#333;
	background-color:#fff;
	border:1px solid #d9d0ea;
	border-radius:6px;
	outline:none;
	transition:border-color .15s, box-shadow .15s, background-color .15s;
}
.auth_field input:hover,
.auth_field textarea:hover,
.project_search input:hover,
#project_sort_select:hover{
	border-color:#b9a6e3;
}
.auth_field input:focus,
.auth_field textarea:focus,
.project_search input:focus,
#project_sort_select:focus{
	border-color:#7c3aed;
	box-shadow:0 0 0 3px rgba(124,58,237,0.15);
	outline:none;
}
.auth_field input::placeholder,
.auth_field textarea::placeholder,
.project_search input::placeholder{
	color:#b3aac2;
}
.auth_field textarea{
	line-height:1.7;
}
/* ブラウザの自動入力（保存済みのID・パスワードの補完）で、入力欄が黄色や青に染まらないようにする */
.auth_field input:-webkit-autofill,
.auth_field input:-webkit-autofill:focus{
	-webkit-text-fill-color:#333;
	box-shadow:0 0 0 1000px #faf8fd inset;
	transition:background-color 9999s ease-out 0s;
}
/* 並び替えのセレクト：標準の矢印をやめ、紫の矢印に統一 */
#project_sort_select{
	-webkit-appearance:none;
	appearance:none;
	padding-right:28px;
	cursor:pointer;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237c3aed' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right 10px center;
}
#project_sort_select option{
	color:#333;
	background:#fff;
}

/* =========================================================================
 * 編集・閲覧画面の見た目の調整（読みやすさ・操作のしやすさ・統一感）。
 * 上の各部品の指定を、あとから上書きする。スマホ幅（下の@media）の指定はこのあとに続くので、
 * スマホ側の指定はそのまま優先される。
 * ========================================================================= */

/* ---------- 1. タスク一覧：文字を大きく濃くし、本文は2行まで折り返して表示する ---------- */
.task_text{
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:3;
	overflow:hidden;
	white-space:normal;
	word-break:break-word;
	font-size:14px;
	line-height:1.5;
	color:#222;
}
/* 選択している（クリックした）タスクは、最後まで全文を表示する */
.task_item.selected .task_text{
	display:block;
	-webkit-line-clamp:unset;
	overflow:visible;
}
.task_item.task_done .task_text{
	color:#888;
}
.task_image_badge{
	font-size:11px;
	color:#777;
}
.task_image_badge_none{
	color:#999;
}
.task_attachment_badge{
	font-size:11px;
}
.task_empty,
.image_empty{
	color:#777;
}
.task_empty{
	margin:4px 0 0;
	padding:18px 12px;
	text-align:center;
	background:#faf8fd;
	border:1px dashed #d9d0ea;
	border-radius:8px;
}
.task_empty_row{
	padding:14px 10px;
	font-size:13px;
	color:#777;
	text-align:center;
}

/* ---------- 2. 画像の枠：濃い黒枠をやめ、全体の淡い紫に合わせる ---------- */
.image_area{
	border:1px solid #d9d0ea;
	border-radius:8px;
	box-shadow:0 1px 6px rgba(76,29,149,0.08);
}
.image_area.image_area_focused{
	border-color:#7c3aed;
	box-shadow:0 0 0 3px rgba(124,58,237,0.25);
}
.image_area_toolbar{
	background:#faf8fd;
	border-bottom:1px solid #e6dff4;
}

/* ---------- 3. 「タスク一覧」の追加ボタン：同じ幅で2列にそろえる（最後の1つは全幅） ---------- */
.task_panel_header_actions{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:8px;
}
.task_panel_header_actions .btn_add{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:6px;
	min-width:0;
	padding:9px 6px;
	white-space:nowrap;
}
.task_panel_header_actions .btn_add:last-of-type{
	grid-column:1 / -1;
}

/* ---------- 9. タスクパネルの余白・注意書き ---------- */
.page_file_drop_hint{
	margin:10px 0 0;
	padding:8px 10px;
	font-size:12px;
	line-height:1.5;
	color:#6f6584;
	background:#faf8fd;
	border:1px dashed #d9d0ea;
	border-radius:6px;
}
@media (min-width:769px){
	/* タスクが少ないとき、白いカードの下に大きな空白が残らないよう、中身の高さまでで止める
	   （多いときは、これまでどおりカードの中だけがスクロールする） */
	.task_panel_inner{
		flex:0 1 auto;
	}
}

/* ---------- 4. ヘッダー：閲覧用／編集用リンクを縦にそろえ、有効期限を見やすくする ---------- */
.project_header_collapsible{
	display:grid;
	grid-template-columns:auto auto;
	align-items:center;
	column-gap:12px;
	row-gap:6px;
	flex:0 1 auto;
	min-width:0;
}
.project_view_link,
.project_edit_link{
	grid-column:1;
	color:#555;
}
.project_view_link label,
.project_edit_link label{
	flex:0 0 auto;
	font-weight:600;
}
.project_password_box{
	grid-column:2;
	grid-row:1 / span 2;
}
.project_header_side{
	align-self:center;
}
.project_expiry{
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:5px 12px;
	font-size:12px;
	color:#5b4a85;
	background:#f5f0fd;
	border-radius:999px;
}
.project_expiry_warning{
	color:#c0392b;
	background:#fdecea;
}

/* ---------- 5. 保存ボタン：主なボタンと同じ紫にそろえる ---------- */
.btn_save{
	background:#7c3aed;
}
.btn_save:hover{
	background:#6d28d9;
}
.btn_save:disabled{
	background:#c4b5fd;
}

/* ---------- 6. 画像ツールバー：ヒントを見えるように、トリミング・削除のボタンの形をそろえる ---------- */
.image_area_name_input{
	flex:1 1 160px;
	max-width:360px;
	min-width:0;
}
.image_area_hint{
	flex:0 0 auto;
	white-space:nowrap;
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:4px 10px;
	font-size:12px;
	color:#5b4a85;
	background:#f1ebfb;
	border-radius:999px;
}
.image_crop_btn,
.image_delete_btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:5px;
	width:auto;
	height:28px;
	padding:0 10px;
	font-size:12px;
	font-weight:600;
	background:#fff;
	border:1px solid #d9d0ea;
	border-radius:6px;
	white-space:nowrap;
}
.image_crop_btn{
	margin-left:auto;
	color:#7c3aed;
}
.image_crop_btn:hover{
	background:#f5f0fd;
	border-color:#7c3aed;
}
.image_delete_btn{
	color:#666;
}
.image_delete_btn:hover{
	color:#fff;
	background:#ff3b30;
	border-color:#ff3b30;
}
@media (min-width:769px){
	/* 画面右上に浮かぶ拡大縮小コントロール（約170px）が、スクロールで通りかかった画像の
	   ツールバーの右端（トリミング・削除）に重なって押せなくならないよう、右側を空けておく */
	.image_area_toolbar{
		padding-right:196px;
	}
}

/* ---------- 7. プロジェクト名・画像名の入力欄：編集できることが分かるよう、薄い枠と鉛筆を常に出す ---------- */
.project_name_input,
.image_area_name_input{
	padding-right:30px;
	border-color:#e6dff4;
	background-color:#faf8fd;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 512 512'%3E%3Cpath fill='%23a79bc4' d='M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0z'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right 10px center;
}
.project_name_input:hover,
.image_area_name_input:hover{
	border-color:#b9a6e3;
	background-color:#fff;
}
.project_name_input:focus,
.image_area_name_input:focus{
	background-color:#fff;
	background-image:none;
}

/* ---------- 8. 矩形：完了したものは、薄いだけでなくチェックを付けて見分けやすくする ---------- */
.task_rect.rect_done{
	opacity:0.55;
}
.task_rect.rect_done::after{
	content:"\f00c";
	font-family:"Font Awesome 5 Free";
	font-weight:900;
	position:absolute;
	top:2px;
	right:2px;
	width:18px;
	height:18px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:10px;
	line-height:1;
	color:#fff;
	background:#34c759;
	border-radius:50%;
}
.task_rect:hover{
	box-shadow:0 0 0 2px rgba(255,255,255,0.85), 0 0 0 4px rgba(124,58,237,0.4);
}

/* ---------- 10. 操作のつまみ（並び替え・メニュー・コメント・拡大縮小）：大きく濃くする ---------- */
.task_drag_handle,
.image_drag_handle,
.text_block_drag_handle{
	padding:6px 5px;
	font-size:14px;
	color:#9a90ad;
	border-radius:4px;
}
.task_drag_handle:hover,
.image_drag_handle:hover,
.text_block_drag_handle:hover{
	color:#7c3aed;
	background:#f2ecfb;
}
.task_hamburger,
.task_comment_toggle{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:32px;
	min-height:32px;
	padding:6px 8px;
	font-size:15px;
	color:#555;
	border-radius:6px;
}
.task_hamburger{
	display:none;
}
.task_item.selected .task_hamburger{
	display:inline-flex;
}
.task_hamburger:hover,
.task_comment_toggle:hover{
	color:#7c3aed;
	background:#f2ecfb;
}
.task_comment_count{
	font-size:12px;
}
.zoom_drag_handle{
	color:#888;
}
@media (pointer:coarse){
	/* 指で押す端末（タブレット等）では、押し間違いを減らすため、さらに大きくする */
	.task_hamburger,
	.task_comment_toggle{
		min-width:40px;
		min-height:40px;
	}
	.task_drag_handle,
	.image_drag_handle,
	.text_block_drag_handle{
		padding:10px 8px;
	}
}

/* ---------- コメント欄：Firefoxで、入力欄・ボタンが横にはみ出さないようにする ----------
   Firefoxは、textareaが既定の幅（cols）より縮まないため、flexの中で「投稿」ボタンが枠の外へ押し出されていた。
   flexの子（入力欄・各要素）に min-width:0 を付けて、枠の幅に収まるまで縮められるようにする。 */
.task_comments,
.task_comments_form,
.task_comments_list,
.task_comment_item,
.task_comment_reactions{
	min-width:0;
	max-width:100%;
	box-sizing:border-box;
}
.task_comment_input{
	min-width:0;
	width:100%;
}
.task_comment_submit{
	flex:0 0 auto;
	white-space:nowrap;
}
.task_comment_text{
	min-width:0;
	overflow-wrap:anywhere;
}
.task_main,
.task_item_row{
	min-width:0;
}

/* ---------- アクティブなタスク（タスク行・枠・ハイライトをクリックしたとき。task.js / view.js の setActiveTask） ----------
   タスク行は、背景色・左の太い線・太字で強調する。対応する画像上の枠・テキストのハイライトも強調する。 */
.task_item.task_active,
.task_item.task_active:hover,
.view_mode .task_item.task_active,
.view_mode .task_item.task_active:hover{
	background:#efe6fd;
	box-shadow:inset 4px 0 0 #7c3aed;
}
.task_item.task_active .task_text{
	font-weight:700;
	color:#1f1a2e;
}
.task_item.task_active.task_done .task_text{
	color:#666;
}
.task_item.task_active .task_color_dot{
	box-shadow:0 0 0 3px rgba(124,58,237,0.3);
}
.task_rect.rect_active{
	z-index:4;
	box-shadow:0 0 0 2px #fff, 0 0 0 5px #7c3aed;
}
.text_task_highlight.text_task_active{
	outline:2px solid #7c3aed;
	outline-offset:1px;
	border-radius:2px;
}

/* ---------- 「プロジェクトに取り込む」（ログイン中のアカウントで、お試しプロジェクトを編集している場合の右上のボタンと確認ポップアップ） ---------- */
.btn_import_project{
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:6px 14px;
	font-size:13px;
	font-weight:600;
	color:#fff;
	background:#7c3aed;
	border:1px solid #7c3aed;
	border-radius:4px;
	white-space:nowrap;
	cursor:pointer;
}
.btn_import_project:hover{
	background:#6d28d9;
}
.import_modal_icon{
	background:#7c3aed;
}
/* 有効期限の3日前からの案内（edit.php の #expire_notice）：期限が近いので、赤系の丸にする */
.expire_notice_icon{
	background:#ff3b30;
}
#expire_notice .trial_notice_title{
	line-height:1.5;
}
/* ---------- 閲覧用・編集用リンクの再発行（edit/_header.php、script/link_reissue.js） ---------- */
.btn_reissue_link{
	flex:0 0 auto;
	padding:4px 8px;
	font-size:12px;
	color:#555;
	background:#fff;
	border:1px solid #ccc;
	border-radius:4px;
	cursor:pointer;
	white-space:nowrap;
}
.btn_reissue_link:hover{
	background:#f0f0f0;
	color:#c0392b;
	border-color:#e3b4ae;
}

/* ---------- パスワード再設定（password_forgot.php・password_reset.php）、アカウント設定のお知らせメール ---------- */
.auth_forgot{
	margin:12px 0 0;
	text-align:center;
	font-size:13px;
}
.auth_forgot a{
	color:#7c3aed;
}
.auth_lead{
	margin:0 0 16px;
	font-size:13px;
	line-height:1.8;
	color:#555;
}
.account_notify_form{
	margin:18px 0 0;
	padding:14px 16px;
	background:#faf8fd;
	border:1px solid #e9e2f5;
	border-radius:8px;
}
.account_notify_label{
	display:flex;
	align-items:center;
	gap:8px;
	font-size:14px;
	font-weight:600;
	color:#333;
	cursor:pointer;
}
.account_notify_hint{
	margin:6px 0 12px;
	font-size:12px;
	line-height:1.7;
	color:#6f6584;
}
.account_notify_ok{
	margin-left:10px;
	font-size:13px;
	color:#256a3e;
}
.account_notify_error{
	margin-left:10px;
	font-size:13px;
	color:#c0392b;
}

/* ---------- プロジェクトの譲渡（プロジェクト一覧 account/index.php、project_transfer.php） ---------- */
.btn_transfer_project,
.btn_transfer_cancel{
	padding:6px 12px;
	font-size:13px;
	color:#7c3aed;
	background:#fff;
	border:1px solid #cbb8f2;
	border-radius:4px;
	cursor:pointer;
	white-space:nowrap;
}
.btn_transfer_project:hover,
.btn_transfer_cancel:hover{
	background:#f5f0fd;
	border-color:#7c3aed;
}
.btn_transfer_cancel{
	color:#666;
	border-color:#ddd;
}
.project_transfer_pending{
	display:inline-flex;
	align-items:center;
	gap:6px;
	max-width:100%;
	padding:4px 10px;
	font-size:12px;
	color:#5b4a85;
	background:#f1ebfb;
	border-radius:999px;
	overflow-wrap:anywhere;
}
.transfer_incoming{
	margin:0 0 18px;
	padding:14px 16px;
	background:#fff;
	border:1px solid #d4c4f5;
	border-left:5px solid #7c3aed;
	border-radius:8px;
}
.transfer_incoming_title{
	margin:0 0 10px;
	font-size:14px;
	font-weight:700;
	color:#1f1a2e;
}
.transfer_incoming_item{
	display:flex;
	align-items:center;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:10px;
	padding:10px 0;
	border-top:1px solid #eee;
}
.transfer_incoming_info{
	flex:1 1 260px;
	min-width:0;
}
.transfer_incoming_name{
	margin:0;
	font-size:14px;
	font-weight:700;
	color:#333;
	overflow-wrap:anywhere;
}
.transfer_incoming_meta{
	margin:2px 0 0;
	font-size:12px;
	color:#6f6584;
}
.transfer_incoming_meta_ng{
	color:#c0392b;
	font-weight:600;
}
.transfer_incoming_actions{
	display:flex;
	gap:8px;
}
.transfer_incoming_accept{
	padding:7px 14px;
	font-size:13px;
	font-weight:700;
	color:#fff;
	background:#7c3aed;
	border:none;
	border-radius:4px;
	cursor:pointer;
}
.transfer_incoming_accept:hover{
	background:#6d28d9;
}
.transfer_incoming_decline{
	padding:7px 14px;
	font-size:13px;
	color:#666;
	background:#fff;
	border:1px solid #ccc;
	border-radius:4px;
	cursor:pointer;
}
.transfer_incoming_decline:hover{
	background:#f5f5f5;
}
.transfer_modal_email{
	display:block;
	width:100%;
	box-sizing:border-box;
	margin:0 0 12px;
	padding:10px 12px;
	font-size:14px;
	font-family:inherit;
	color:#333;
	background:#fff;
	border:1px solid #d9d0ea;
	border-radius:6px;
}
.transfer_modal_email:focus{
	outline:none;
	border-color:#7c3aed;
	box-shadow:0 0 0 3px rgba(124,58,237,0.15);
}
.transfer_msg_text{
	white-space:pre-line;
	text-align:left;
}

/* 有効期限が切れたプロジェクトを、編集用リンクで開いたときの画面（_trial_expiry_ui.php） */
.expired_frame{
	text-align:center;
}
.expired_icon{
	display:flex;
	align-items:center;
	justify-content:center;
	width:56px;
	height:56px;
	margin:18px auto 6px;
	font-size:24px;
	color:#fff;
	background:#ff3b30;
	border-radius:50%;
}
.expired_lead{
	margin:0 0 14px;
	font-size:14px;
	line-height:1.8;
	color:#c0392b;
	font-weight:600;
}
.expired_text{
	margin:0 0 22px;
	font-size:14px;
	line-height:1.9;
	color:#4a4458;
	text-align:left;
}
.expired_actions{
	display:flex;
	flex-direction:column;
	align-items:stretch;
	gap:10px;
}
.expired_btn_primary{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	padding:13px 18px;
	font-size:15px;
	font-weight:700;
	color:#fff;
	background:#7c3aed;
	border:none;
	border-radius:999px;
	text-decoration:none;
	cursor:pointer;
}
.expired_btn_primary:hover{
	background:#6d28d9;
}
.expired_btn_sub{
	padding:8px;
	font-size:13px;
	color:#7c3aed;
	text-decoration:none;
}
.expired_btn_sub:hover{
	text-decoration:underline;
}
.import_modal_expiry{
	display:inline-block;
	margin:2px 14px 0 20px;
	font-size:12px;
	color:#6f6584;
}
.trial_notice_note[hidden]{
	display:none;
}
#import_modal_error{
	color:#c0392b;
}
.trial_notice_register:disabled{
	opacity:0.6;
	cursor:default;
}

/* ---------- お試しプロジェクトの初回保存後の、無料会員登録の案内（edit.php の #trial_notice） ---------- */
.trial_notice_overlay{
	position:fixed;
	inset:0;
	z-index:1400;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:20px;
	box-sizing:border-box;
	background:rgba(31,26,46,0.5);
	overscroll-behavior:contain;
}
.trial_notice_overlay[hidden]{
	display:none;
}
body.trial_notice_open{
	overflow:hidden;
}
.trial_notice{
	width:min(440px, 100%);
	max-height:calc(100vh - 40px);
	overflow-y:auto;
	padding:30px 28px 24px;
	box-sizing:border-box;
	text-align:center;
	background:#fff;
	border-radius:16px;
	box-shadow:0 16px 48px rgba(31,26,46,0.3);
	color:#4a4458;
}
.trial_notice_icon{
	display:flex;
	align-items:center;
	justify-content:center;
	width:44px;
	height:44px;
	margin:0 auto 12px;
	font-size:18px;
	color:#fff;
	background:#34c759;
	border-radius:50%;
}
.trial_notice_title{
	margin:0 0 10px;
	font-size:19px;
	color:#1f1a2e;
}
.trial_notice_lead{
	margin:0 0 14px;
	font-size:14px;
	line-height:1.8;
}
.trial_notice_list{
	list-style:none;
	margin:0 0 14px;
	padding:12px 16px;
	text-align:left;
	font-size:13px;
	line-height:1.8;
	background:#faf8fd;
	border:1px solid #e9e2f5;
	border-radius:10px;
}
.trial_notice_list li i{
	width:18px;
	color:#7c3aed;
}
.trial_notice_note{
	margin:0 0 18px;
	text-align:left;
	font-size:12px;
	line-height:1.7;
	color:#8a8398;
}
.trial_notice_actions{
	display:flex;
	flex-direction:column;
	gap:8px;
}
.trial_notice_register{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	padding:12px 18px;
	font-size:15px;
	font-weight:700;
	color:#fff;
	background:#7c3aed;
	border:none;
	border-radius:999px;
	cursor:pointer;
}
.trial_notice_register:hover{
	background:#6d28d9;
}
.trial_notice_later{
	padding:8px 18px;
	font-size:13px;
	color:#666;
	background:none;
	border:none;
	cursor:pointer;
}
.trial_notice_later:hover{
	color:#7c3aed;
	text-decoration:underline;
}

/* ---------- 閲覧画面：ログインのボタンは、ロゴの横で控えめな文字リンクにする（「無料で使ってみる」と区別） ---------- */
.view_logo_bar .btn_view_login{
	padding:6px 8px;
	font-weight:600;
	border-color:transparent;
}
.view_logo_bar .btn_view_login:hover{
	background:transparent;
	text-decoration:underline;
}
/* ---------- 閲覧画面：作業／確認のチェックを、押せるボタンらしく見せる ---------- */
/* 閲覧画面の見出しは、編集画面の「タスク一覧」（.task_panel_header_title）と同じ大きさ・区切り線にそろえる */
.view_mode .task_panel_header h2{
	margin:0 0 10px;
	padding-bottom:8px;
	font-size:16px;
	color:#333;
	border-bottom:1px solid #ddd;
}
.view_task_hint{
	margin:0;
	font-size:12px;
	line-height:1.5;
	color:#6f6584;
}
.view_mode .task_check_item{
	padding:4px 8px;
	background:#fff;
	border:1px solid #d9d0ea;
	border-radius:999px;
	transition:background-color .15s, border-color .15s;
}
.view_mode .task_check_item:hover{
	background:#f7f3fd;
	border-color:#b9a6e3;
}
.view_mode .task_check_work:has(input:checked){
	background:#f2ecfb;
	border-color:#7c3aed;
}
.view_mode .task_check_confirm:has(input:checked){
	background:#fdecea;
	border-color:#ff3b30;
}

/* =========================================================================
 * スマートフォン対応（@media (max-width:768px)）
 * script/task.js・script/view.jsの MOBILE_BREAKPOINT（768）と合わせてある。
 * ========================================================================= */
@media (max-width:768px){
	/* ---------- index.php・login.php等（.main_flow）：画面下に固定表示のフッター（.site_footer、
	   約80px）があるため、最後の要素（TOPのお知らせ欄など）の下にフッターぶんの余白がないと、
	   一番下までスクロールしてもその部分がフッターの裏に隠れたままになる（中身がほぼ1画面に
	   収まる場合は、スクロールする量自体がなく「スクロールできない」状態に見える）。
	   border-boxにしているので、中身が1画面に収まるときは不要なスクロールは発生しない。 ---------- */
	.main.main_flow{
		box-sizing:border-box;
		padding-bottom:90px;
	}
	/* ---------- 上部のバー類・全体周知が縮まないようにする ----------
	   .main は高さ固定の縦並び（flex）で、中身（画像一覧）が長いと各要素が縮められる。
	   デスクトップの.top_barは高さ50px固定なので問題にならないが、スマホでは折り返して高さが
	   変わるため、縮められると中身がバーの外にはみ出し、その上に全体周知が重なってしまう。 */
	.main > .top_bar,
	.main > .view_logo_bar,
	.main > .notice_list,
	.main > .article_bar_block{
		flex-shrink:0;
	}
	/* ---------- 中身の最小幅で画面幅を超えないようにする ----------
	   .contents は「中身の最小幅より縮めない」のが既定で、画像上のツールバー（画像名・
	   「ドラッグでタスク範囲選択」・トリミング・削除が1行に並ぶ）が約470pxあるため、
	   画面幅（375px等）を超えてページが横にはみ出していた。 */
	.main_contents .contents{
		min-width:0;
	}
	.image_area_toolbar{
		flex-wrap:wrap;
	}
	/* スマホでは.task_appの余白が10pxなので、画像一覧の枠を上にずらす量もそれに合わせる
	   （14pxずらすと.task_appのoverflow:hiddenで「＋」の上端が4px切れる）。 */
	.image_panel{
		margin-top:-10px;
		/* 画面右下に追従するタスク切り替えボタン（52px）が、一番下の画像の端やコメントを隠さないよう、下に余白を取る */
		padding-bottom:76px;
	}
	/* ---------- 上部バーの並び：1段目＝ロゴとアカウント／ログアウト（閲覧画面はボタン）、
	   2段目＝記事バー（全幅）。.top_bar_logo_link の height:100%（デスクトップで高さ50pxのバーに
	   縦中央揃えするための指定）は、折り返して高さが決まらないバーではロゴが行全体の高さを
	   占めてしまうため、スマホでは外す。 ---------- */
	.top_bar_logo_link{
		height:auto;
	}
	.top_bar > .top_bar_right,
	.view_logo_bar > .view_logo_bar_actions{
		order:2;
		margin-left:auto;
	}
	.top_bar > .article_bar_topbar,
	.view_logo_bar > .article_bar_topbar{
		order:3;
		flex:1 1 100%;
		margin:0;
	}
	/* ---------- 共通：画面上部のバー類は折り返しを許可し、固定の高さで中身が
	   切れてしまわないようにする ---------- */
	.top_bar{
		height:auto;
		min-height:50px;
		flex-wrap:wrap;
		padding:8px 10px;
		row-gap:6px;
	}
	.view_logo_bar{
		height:auto;
		min-height:50px;
		flex-wrap:wrap;
		padding:8px 10px;
		row-gap:6px;
	}
	.project_header_inner{
		flex-wrap:wrap;
	}
	.project_header_main{
		width:100%;
		flex-wrap:wrap; /* 開いたときの共有リンク等（.project_header_collapsible、width:100%）は次の行に回す */
	}
	/* ---------- スマホ幅のproject_header：「一覧に戻る」「プロジェクト名」だけを常に表示し、
	   共有リンク・パスワード・有効期限・保存するボタンは開閉ボタン（#project_header_toggle_btn、
	   script/task.js）で表示/非表示を切り替える ---------- */
	.project_header_toggle_btn{
		display:inline-flex;
		align-items:center;
		justify-content:center;
		flex:0 0 auto;
		width:32px;
		height:32px;
		border-radius:50%;
		border:1px solid #ddd;
		background:#fff;
		color:#666;
		font-size:13px;
		cursor:pointer;
		transition:transform 0.2s ease;
	}
	.project_header_inner.project_header_expanded .project_header_toggle_btn{
		transform:rotate(180deg);
	}
	.project_header_collapsible,
	.project_header_side{
		display:none;
		width:100%;
	}
	.project_header_inner.project_header_expanded .project_header_collapsible,
	.project_header_inner.project_header_expanded .project_header_side{
		display:flex;
		flex-direction:column;
		align-items:stretch;
		gap:10px;
	}
	.project_header_side{
		margin-left:0;
	}
	.project_header_inner.project_header_expanded .project_header_side{
		flex-direction:row;
		flex-wrap:wrap;
		justify-content:space-between;
	}
	.project_back_link{
		flex:0 0 auto;
	}
	.project_back_link_text{
		/* 「← プロジェクト一覧」はアイコンだけ残し、文字はスマホでは隠す（よくある戻るボタンの省略）。
		   プロジェクト名の入力欄に十分な幅を残すため。 */
		display:none;
	}
	.project_name_input{
		flex:1 1 0; /* 入力欄の既定幅で行を押し出さない（狭い画面でも「戻る」「名前」「開閉ボタン」を1行に保つ） */
		min-width:0;
	}
	.project_view_link,
	.project_edit_link{
		width:100%;
		flex-wrap:wrap;
		row-gap:4px;
	}
	.project_view_link .project_view_url,
	.project_edit_link .project_view_url{
		width:auto;
		flex:1 1 120px;
		min-width:0;
	}
	.project_password_box{
		width:100%;
		flex-wrap:wrap;
	}
	/* ---------- 共通：左右の余白を少し詰めて、画面幅を有効に使う ---------- */
	.contents{
		padding:0 8px;
	}
	.content_page{
		padding:32px 0 80px;
	}
	.content_page_body{
		padding:20px;
	}

	/* ---------- 編集画面（edit.php）・閲覧画面（view.php）：タスク一覧の表示/非表示 ----------
	   デスクトップでは画像一覧の横にタスクパネルを並べて表示するが、スマホ幅では横に並べる余白が
	   ないため、タスクパネルを既定で非表示にし、画面右下に追従するボタン（.mobile_task_toggle_btn、
	   script/mobile_task_panel.js）で下から出てくるシートとして表示/非表示を切り替える。
	   .task_panelはposition:fixedのオーバーレイになってレイアウト上の幅を持たなくなるため、
	   .task_appはrow方向のままでよく（.image_panelがflex:1で自動的に全幅を占める）、
	   画像一覧側のスクロール（overflow-y:auto）もデスクトップと同じ仕組みのまま使う。 */
	.task_app{
		padding:10px;
		gap:10px;
	}
	.image_area{
		min-width:0;
	}
	.task_panel{
		position:fixed;
		inset:0;
		width:auto;
		flex:none;
		box-sizing:border-box;
		display:flex;
		align-items:flex-end;
		justify-content:center;
		background:rgba(0,0,0,0.45);
		z-index:390;
		padding:0;
		opacity:0;
		visibility:hidden;
		transition:opacity 0.2s ease;
	}
	.task_panel.mobile_task_panel_open{
		opacity:1;
		visibility:visible;
	}
	.task_panel_inner{
		position:relative !important;
		top:auto !important;
		left:auto !important;
		width:100% !important;
		max-width:100%;
		max-height:80vh;
		margin:0;
		border-radius:16px 16px 0 0;
		border:none;
		box-shadow:0 -6px 24px rgba(0,0,0,0.2);
		padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));
	}
	.mobile_task_toggle_btn{
		display:flex;
		align-items:center;
		justify-content:center;
		position:fixed;
		right:16px;
		bottom:16px;
		width:52px;
		height:52px;
		border-radius:50%;
		background:#7c3aed;
		color:#fff;
		font-size:20px;
		border:none;
		box-shadow:0 4px 14px rgba(124,58,237,0.4);
		z-index:395;
		cursor:pointer;
	}
	.mobile_task_toggle_btn_active{
		background:#5b21b6;
	}
	/* フィードバック募集カード・ズーム操作がタスク切り替えボタンと重ならないよう位置を調整する */
	.feedback_widget{
		bottom:84px;
	}
	.zoom_control{
		right:8px;
	}

	/* ---------- コンテキストメニュー類が画面外にはみ出さないようにする ---------- */
	.rect_menu,
	.task_dropdown{
		max-width:calc(100vw - 24px);
	}

	/* ---------- 記事・全体周知 ---------- */
	.article_widget{
		padding:18px 16px;
		margin-top:24px;
	}
	.article_bar_topbar{
		max-width:none;
		margin:0 8px;
	}
}
@media (min-width:769px){
	.mobile_task_toggle_btn{
		display:none;
	}
}