/* ============================================================
   Clip作成画面（定義書「Clip機能 要件定義」2.〜5.・2026-10-08）

   全画面の、素早く保存するための画面にするため、
   サイトのヘッダーは出しません（上の帯の「キャンセル」で戻ります）。
   フッターと下部の固定メニューは index.php 側で出していません。

   ------------------------------------------------------------
   旧「気づき投稿」（css/post.css）との関係
   ------------------------------------------------------------
     同じ形の画面なので、そこからの続きで作っています。
     ★ 組の名前（jp-）もそのままです。
       まとめて付け替えると PHP・JS・CSS の3つを同時に直すことになり、
       打ち間違いが混ざります。この2つのCSSが
       同じページで読まれることはありません。

     Clipで変えたところ
       ・名前／匿名の切り替え … ありません（Clipは公開しないため）
       ・自分用メモの別枠     … ありません（本文欄がメモになりました）
       ・写真1枚ずつの「提供」の切り替え … 足しました（jc-provide）
       ・下のボタン … 3つ→2つ（jc-tools-2）
   ============================================================ */

/* サイトのヘッダーを隠す（この画面だけ） */
#header,
#header_div { display: none !important; }

.jp-wrap {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
	background: #fff;
}

/* ---------- 上の帯 ---------- */
/*
   ★ キーボードを出してもずれないようにしました
     （修正依頼 No.0252・2026-10-16）

     「クリップ作成画面のキャンセル、保存、スポット名などは
       上部に固定してください。（スマホでキーボードを出すとずれます）」

     スマホでキーボードが出ると、**見えている範囲（visual viewport）**だけが
     縮み、ページの高さ（layout viewport）は変わりません。
     position: sticky はページのほうを見るので、帯が画面の外へ押し出されます。

     js/clip.js が visualViewport を見て、--jp-vv-top に
     「いま見えている範囲の上端」を入れます。ここでその分だけ下げます。
     visualViewport が無いブラウザでは 0 のまま＝これまでどおりです。
 */
.jp-bar {
	position: sticky;
	top: var(--jp-vv-top, 0px);
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	/* 線は画面いっぱいに引きつつ、中身は本文と同じ幅にそろえる。
	   広い画面で「キャンセル」と「投稿」だけが左右の端に離れて見えないように。 */
	padding: 12px max(16px, calc((100% - 720px) / 2));
	background: #fff;
	border-bottom: 1px solid #f1f5f9;
}
.jp-cancel {
	font-size: 15px;
	font-weight: 700;
	color: #334155;
	text-decoration: none;
	padding: 6px 2px;
}
.jp-cancel:hover { color: #0f172a; }
.jp-submit {
	min-width: 84px;
	padding: 10px 22px;
	border: 0;
	border-radius: 9999px;
	background: #FF8B42;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}
.jp-submit:disabled { background: #fed7aa; cursor: default; }
.jp-submit:not(:disabled):active { background: #ea580c; }

/* ---------- 中身 ---------- */
.jp-main {
	flex: 1 1 auto;
	padding: 16px;
	max-width: 720px;
	width: 100%;
	margin: 0 auto;
}

/* ---------- スポット ---------- */
.jp-spot {
	/*
	   ★ スポット名も上に貼り付けます（修正依頼 No.0252）
	     帯のすぐ下に来るよう、帯の高さぶん下げます。
	     背景を白にしないと、流れてきた文字が透けて重なります。
	 */
	position: sticky;
	top: calc(var(--jp-vv-top, 0px) + var(--jp-bar-h, 56px));
	z-index: 19;
	background: #fff;
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: inherit;
	padding: 4px 0 10px;
}
.jp-spot-pin {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 9999px;
	background: #fff7ed;
	color: #FF8B42;
	display: flex;
	align-items: center;
	justify-content: center;
}
.jp-spot-body { min-width: 0; flex: 1 1 auto; }
.jp-spot-name {
	display: block;
	font-size: 18px;
	font-weight: 700;
	color: #0f172a;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.jp-spot-sub {
	display: block;
	font-size: 12px;
	color: #94a3b8;
	margin-top: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.jp-spot-change {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 700;
	color: #FF8B42;
	border: 1px solid #fed7aa;
	border-radius: 9999px;
	padding: 4px 10px;
}
.jp-chevron { color: #94a3b8; font-weight: 400; }
.jp-spot-empty .jp-spot-name { color: #0f172a; }

/* ---------- メモ ---------- */
.jp-editor {
	position: relative;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	padding: 14px 14px 30px;
}
.jp-editor:focus-within { border-color: #fdba74; }
.jp-body {
	width: 100%;
	min-height: 170px;
	border: 0;
	outline: none;
	resize: none;
	font-size: 16px;   /* iOS で勝手に拡大されないよう 16px 以上にする */
	line-height: 1.7;
	color: #0f172a;
	background: transparent;
}
.jp-body::placeholder { color: #cbd5e1; }
.jp-count {
	position: absolute;
	right: 14px;
	bottom: 10px;
	font-size: 12px;
	color: #cbd5e1;
}
.jp-count.is-over { color: #dc2626; font-weight: 700; }

/* ---------- 写真 ---------- */
.jp-photos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}
.jp-photo {
	position: relative;
	width: 88px;
	height: 88px;
	border-radius: 12px;
	overflow: hidden;
	background: #f1f5f9;
}
.jp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jp-photo-del {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 22px;
	height: 22px;
	border: 0;
	border-radius: 9999px;
	background: rgba(15, 23, 42, .65);
	color: #fff;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
}

/* ---------- 案内・エラー ---------- */
.jp-hint  { margin-top: 12px; font-size: 12px; color: #94a3b8; }
.jp-error {
	margin-top: 10px;
	font-size: 13px;
	font-weight: 700;
	color: #b91c1c;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 10px;
	padding: 10px 12px;
}

/* ----------------------------------------------------------
   写真を出しに来たときの、大きなボタン
     1回押すだけで写真を選べるように、いちばん上に出します。
     写真を選んだら引っ込みます。
   ---------------------------------------------------------- */
/*
 * このボタンの中は、折り返してよいことにします（2026-09-18 ご報告）
 *
 *   css/common.css に「ボタンは途中で改行しない」という
 *   サイト全体の決まりがあります（横並びのボタンが縦長に崩れるのを防ぐため）。
 *   ところがこのボタンは中に説明文を持っているので、
 *   改行できないまま画面の外へ伸びていました。
 *   その決まりにも「長い文章を入れるボタンは個別に折り返せるように」と
 *   書いてあるので、ここだけ外します。
 */
.jp-pick-lead {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	max-width: 100%;
	margin: 4px 0 14px;
	padding: 14px 14px;
	text-align: left;
	white-space: normal;          /* ← サイト全体の nowrap を、ここだけ外す */
	border: 1px solid #fdba74;
	border-radius: 14px;
	background: #fff7ed;
	color: #9a3412;
	cursor: pointer;
}
.jp-pick-lead * {
	white-space: normal;
	min-width: 0;
}
.jp-pick-lead:active { background: #ffedd5; }
.jp-pick-lead .jp-pick-lead-ic {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: #FF8B42;
	color: #fff;
}
.jp-pick-lead .jp-pick-lead-tx {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.jp-pick-lead .jp-pick-lead-tx strong {
	font-size: 15px;
	font-weight: 700;
	color: #9a3412;
}
.jp-pick-lead .jp-pick-lead-tx small {
	font-size: 12px;
	line-height: 1.6;
	color: #7c2d12;
	overflow-wrap: anywhere;
}
.jp-pick-lead .jp-chevron {
	flex: 0 0 auto;
	font-size: 20px;
	color: #fb923c;
}

/* ----------------------------------------------------------
   写真を送っている間の進み具合（2026-09-18 ご要望 No.0231）
     上の帯のすぐ下に、細い帯で出します。
     出ているあいだも、文章は書けます（画面は止めません）。
   ---------------------------------------------------------- */
.jp-progress {
	position: sticky;
	top: 56px;                 /* 上の帯のすぐ下 */
	z-index: 19;
	padding: 8px 16px 10px;
	background: #fff;
	border-bottom: 1px solid #f1f5f9;
	max-width: 720px;
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
}
.jp-progress-track {
	height: 4px;
	border-radius: 999px;
	background: #e2e8f0;
	overflow: hidden;
}
.jp-progress-track > i {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: #FF8B42;
	transition: width .25s;
}
.jp-progress > p {
	margin: 6px 0 0;
	font-size: 12px;
	color: #64748b;
}
.jp-progress.is-done .jp-progress-track > i { background: #16a34a; }
.jp-progress.is-error .jp-progress-track > i { background: #f59e0b; }

/* ----------------------------------------------------------
   いま何枚選んでいるか（2026-09-18 ご要望 No.0232）
     上限があるので、選んだあとにすぐ分かるようにします。
   ---------------------------------------------------------- */
.jp-photo-count {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 12px 0 6px;
	font-size: 13px;
	font-weight: 700;
	color: #475569;
}
.jp-photo-count > b {
	font-size: 15px;
	color: #0f172a;
}
.jp-photo-count.is-full {
	color: #b45309;
}
.jp-photo-count.is-full > b {
	color: #b45309;
}
.jp-photo-count > small {
	font-weight: 400;
	font-size: 12px;
	color: #64748b;
}

/* 縮めている・送っているあいだの写真は、うすく見せます */
.jp-photo.is-busy { opacity: .45; }

/*
 * まだ小さい絵ができていないあいだ（2026-10-12 打ち合わせ②）
 *   iPhone の大きな写真をそのまま出すのをやめたので、
 *   縮め終わるまでの一瞬、灰色の枠だけになります。
 *   止まって見えないように、ゆっくり明るさを変えます。
 */
.jp-photo.is-wait { animation: jp-photo-wait 1.1s ease-in-out infinite; }
@keyframes jp-photo-wait {
	0%, 100% { background: #f1f5f9; }
	50%      { background: #e2e8f0; }
}
@media (prefers-reduced-motion: reduce) {
	.jp-photo.is-wait { animation: none; background: #e2e8f0; }
}

/* 送り終わった写真には、小さなチェックを付けます（2026-09-18 No.0231） */
.jp-photo.is-sent::after {
	content: '';
	position: absolute;
	left: 6px;
	bottom: 6px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #16a34a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
	box-shadow: 0 0 0 2px #fff;
}
/* 送れなかった写真は、投稿のときに一緒に送ります */
.jp-photo.is-failed { outline: 2px solid #f59e0b; outline-offset: -2px; }

/* ---------- 下のボタン ---------- */
.jp-tools {
	position: sticky;
	bottom: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
	background: #fff;
	border-top: 1px solid #f1f5f9;
	max-width: 720px;
	width: 100%;
	margin: 0 auto;
}
.jp-tool {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 14px 6px;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	background: #fff;
	color: #FF8B42;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}
.jp-tool span { color: #334155; }
.jp-tool:active { background: #fff7ed; }
.jp-tool:disabled { opacity: .45; cursor: default; }

/* 送信中は画面を覆って、二重に押せないようにする */
.jp-sending { position: relative; pointer-events: none; opacity: .6; }

/* ============================================================
   広い画面（パソコン・タブレット）

   スマホでは、アプリのように画面の高さいっぱいを使い、
   下の3つのボタンを画面の下に貼り付けます。
   ただし広い画面で同じことをすると、入力欄とボタンのあいだに
   大きな余白ができてしまいます。
   そこで広い画面では、中身の高さのぶんだけにします。
   ============================================================ */
@media (min-width: 768px) {
	.jp-wrap {
		min-height: 0;
		padding-bottom: 32px;
	}
	.jp-main {
		flex: 0 0 auto;
		padding-bottom: 4px;
	}
	.jp-tools {
		position: static;
		border-top: 0;
		padding-top: 4px;
		padding-bottom: 0;
	}
	/* 入力欄は、書き始めるまで背を高くしない */
	.jp-body { min-height: 140px; }
}

/* ============================================================
   ここから下は、Clipで足したところ
   ============================================================ */

/* ----------------------------------------------------------
   なぜそのスポットが選ばれているか（定義書 3.初期選択スポット）

     「チェックイン中のスポットを選んでいます」のように、
     小さく添えます。スポットページを見ていても
     チェックイン中のほうが選ばれることがあるので、
     黙って違うスポットになっていると驚かせてしまいます。
   ---------------------------------------------------------- */
.jc-spot-why {
	display: inline-block;
	margin: 0 0 10px 56px;   /* 56px＝スポットの丸い印のぶん。名前の真下にそろえます */
	padding: 2px 9px;
	border-radius: 9999px;
	background: #ecfdf5;
	color: #047857;
	font-size: 11px;
	font-weight: 700;
	vertical-align: 1px;
}

/* ----------------------------------------------------------
   上の帯の「Clip」ボタン（印つき）
   ---------------------------------------------------------- */
.jp-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 96px;
}
.jc-submit-ic {
	display: inline-flex;
	align-items: center;
}
.jc-submit-ic svg { width: 18px; height: 18px; }

/* ----------------------------------------------------------
   写真1枚ずつの「提供する／しない」（定義書 5.Clip保存時）

     既定は提供しません（定義書 5.基本方針）。
     「写真閲覧の邪魔にならない表示方法とする」（同 提供済み表示）
     ため、写真の下に小さく重ねます。
   ---------------------------------------------------------- */
.jc-photo { width: 104px; height: 104px; }

.jc-provide {
	position: absolute;
	left: 4px;
	right: 4px;
	bottom: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 3px 0;
	border: 0;
	border-radius: 8px;
	background: rgba(15, 23, 42, .6);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	white-space: nowrap;
}
.jc-provide > i {
	width: 12px;
	height: 12px;
	border-radius: 3px;
	border: 1.5px solid rgba(255, 255, 255, .8);
	background: transparent;
}
.jc-provide.is-on {
	background: rgba(22, 163, 74, .92);
}
.jc-provide.is-on > i {
	border-color: #fff;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 9px no-repeat;
}

/*
 * 送り終わった印（緑のチェック）は、提供の切り替えと重なります。
 *   提供の切り替えのほうが大事なので、印は右上の×の隣へ移します。
 */
.jc-photo.is-sent::after {
	left: auto;
	right: 30px;
	top: 6px;
	bottom: auto;
}

/* ----------------------------------------------------------
   まとめて提供する／しない（定義書 5.「すべて選択」）
   ---------------------------------------------------------- */
.jc-provide-all {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	margin: 2px 0 10px;
	padding: 10px 12px;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	background: #f8fafc;
}
.jc-provide-all.is-on {
	border-color: #bbf7d0;
	background: #f0fdf4;
}
.jc-provide-all-tx {
	font-size: 12px;
	font-weight: 700;
	color: #475569;
	min-width: 0;
	overflow-wrap: anywhere;
}
.jc-provide-all.is-on .jc-provide-all-tx { color: #047857; }
.jc-provide-all-btns {
	display: flex;
	gap: 6px;
	flex: 0 0 auto;
}
.jc-provide-all-btns > button {
	padding: 5px 10px;
	border: 1px solid #e2e8f0;
	border-radius: 9999px;
	background: #fff;
	color: #475569;
	font-size: 11px;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
}
.jc-provide-all-btns > button:active { background: #f1f5f9; }

/* ----------------------------------------------------------
   Clipとは何か（はじめての方へ）
   ---------------------------------------------------------- */
.jc-note {
	margin-top: 16px;
	padding: 10px 12px;
	border-radius: 10px;
	background: #f8fafc;
	font-size: 12px;
	line-height: 1.8;
	color: #64748b;
}
.jc-note b { color: #334155; }

/* ----------------------------------------------------------
   下のボタンは2つ（写真を選ぶ／撮る）

     旧「気づき」は「自分用メモ」も並べて3つでしたが、
     Clipでは本文欄そのものがメモなので、要らなくなりました。
   ---------------------------------------------------------- */
.jp-tools.jc-tools-2 {
	grid-template-columns: repeat(2, 1fr);
}

/* ============================================================
   キーボードを出しても、画面ぜんぶがずれないようにする
     （2026-10-22 ご要望 No.0270）
   ============================================================
     「文字入力のテキストボックスまで固定表示してください。
       キーボードを出した時にずれないようにしてください。
       イメージとしてはXの投稿の画面が近いです」

     No.0252 では、上の帯とスポット名だけを貼り付けました。
     それでもメモ欄と下のボタンは、ページといっしょに動きます。
     スマホでキーボードが出ると、見えている範囲だけが縮み、
     ページの高さは変わらないためです。

     ここでは、入れ物（.jp-wrap）そのものを
     **見えている範囲の大きさに固定**します。
     キーボードが出たぶんだけ入れ物が縮むので、
     帯もメモ欄も下のボタンも、画面の中に収まったまま動きません。
     中身は .jp-main の中だけでスクロールします。

     ★ js/clip.js が、visualViewport のあるブラウザで
       html に jp-vvfix を付けたときだけ効きます。
       無いブラウザでは、これまでどおりの動きのままです。
     ★ 狭い画面のときだけです（jp-vvfix は 768px 未満で付きます）。
   ============================================================ */
html.jp-vvfix,
html.jp-vvfix body {
	overflow: hidden;
	overscroll-behavior: none;
}

html.jp-vvfix .jp-wrap {
	position: fixed;
	top: var(--jp-vv-top, 0px);
	left: 0;
	right: 0;
	height: var(--jp-vv-h, 100dvh);
	min-height: 0;
}

/* 入れ物が動かないので、貼り付け（sticky）は要りません */
html.jp-vvfix .jp-bar,
html.jp-vvfix .jp-progress,
html.jp-vvfix .jp-tools {
	position: static;
	top: auto;
	bottom: auto;
}

/* 中身だけがスクロールします */
html.jp-vvfix .jp-main {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* スポットの行は、スクロールする中の上に貼り付けます（No.0252 の続き） */
html.jp-vvfix .jp-spot {
	position: sticky;
	top: 0;
	z-index: 6;
}

/*
   ★ メモ欄も貼り付けます（ご要望の「テキストボックスまで固定表示」）
     スポットの行のすぐ下です。写真や説明は、この下を流れます。
*/
html.jp-vvfix .jp-editor {
	position: sticky;
	top: var(--jp-spot-h, 0px);
	z-index: 5;
	background: #fff;
}

/*
   キーボードが出ると、見えている範囲はとても低くなります。
   メモ欄がそのままだと下のボタンまで届かないので、
   見えている高さの4割までにします。
*/
html.jp-vvfix .jp-body {
	/*
	 * ★ 2026-10-23：min-height を 0 にしたら、54px まで縮んでしまいました。
	 *   もとは 170px です。書きづらくなるので、
	 *   「ふだんは 170px、画面が低いときは高さの4分の1まで」にします。
	 *     画面 844px → 170px ／ 画面 420px → 105px
	 */
	min-height: min(170px, calc(var(--jp-vv-h, 100dvh) * 0.25));
	max-height: calc(var(--jp-vv-h, 100dvh) * 0.4);
	overflow-y: auto;
}