/* マイページ（my_posts.html）専用のスタイル。
   ヘッダー・「戻る」ボタン（.btn-back）はcreate_spot.cssと同じ実装をそのまま複製している
   （タブバーに属さないサブ画面共通の構成。各画面が独立したCSSファイルを持つ既存方針を踏襲）。 */

:root {
	--ink: #2F5233;
	--ink-soft: #6D8670;
	--bg: #F6F3E8;
	--bg-soft: #FDFEFD;
	--line: #DEE3DE;
	--accent: #8FBFA0;
	--badge-bg: #E6EAE7;
	--danger: #B8564A;
	--danger-bg: #F7E7E3;
}

/* 誕生日限定「夜Bモード」のこの画面固有の追加分（基本トークン・ヘッダー星空・リボンはnight-mode.cssが担当） */
body.night-mode {
	--danger: #E08A7D;
	--danger-bg: rgba(224,138,125,.14);
}

body {
	font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
	background: var(--bg);
	color: var(--ink);
	margin: 0;
	padding: 20px;
}
.container { max-width: 900px; margin: 0 auto; }

/* --- ヘッダー（create_spot.cssと同じ実装。詳細はそちらのコメント参照） --- */
.header-area {
	background: var(--bg-soft);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	margin-left: -20px;
	margin-right: -20px;
	margin-bottom: 18px;
}
.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 18px;
	max-width: 900px;
	margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand .club-mark { width: 60px; height: auto; flex: none; }
.brand .title-block h1 { font-size: 16px; font-weight: 700; margin: 0; line-height: 1.3; color: var(--ink); }
.brand .title-block .en { font-size: 8.5px; letter-spacing: 0.1em; color: var(--ink-soft); margin: 2px 0 0; font-weight: 700; }

.btn-back {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	background: var(--badge-bg);
	color: var(--ink);
	border: none;
	font-size: 12.5px;
	font-weight: 700;
	padding: 8px 14px;
	border-radius: 999px;
	white-space: nowrap;
	cursor: pointer;
	font-family: inherit;
	text-decoration: none;
}
.btn-back svg { width: 13px; height: 13px; flex: none; }
.btn-back:hover { background: var(--accent); color: var(--bg-soft); }

/* --- アカウント表示・見出し --- */
.account-pill {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--badge-bg); border-radius: 999px; padding: 6px 14px 6px 6px;
	font-size: 12px; color: var(--ink); font-weight: 700; margin-bottom: 16px;
}
.account-pill .g-icon { width: 22px; height: 22px; border-radius: 50%; background: var(--bg-soft); box-shadow: 0 0 0 1px var(--line) inset; }

.section-title { font-size: 14px; font-weight: 700; color: var(--ink); margin: 0 0 3px; display: flex; align-items: baseline; gap: 6px; }
.section-title .count { font-size: 11px; font-weight: 400; color: var(--ink-soft); }
/* 「投稿したぬい活」欄との間隔を空けるため、後続セクションの見出しにだけ上マージンを足す */
.section-title-spaced { margin-top: 32px; }
.section-note { font-size: 11.5px; color: var(--ink-soft); margin: 0 0 16px; line-height: 1.6; }

/* --- 投稿カード（マスキングテープ風アクセントはmap.css/events.cssと同じ意匠） --- */
.post-list { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 700px) {
	.post-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

.post-card {
	display: flex; gap: 12px;
	background: var(--bg-soft); border: 1px solid var(--line); border-radius: 14px;
	padding: 12px; position: relative;
}
.post-card .tape {
	position: absolute; top: -8px; left: 16px; width: 38px; height: 15px;
	background: rgba(143,191,160,0.55); border: 1px solid rgba(143,191,160,0.75);
	transform: rotate(-4deg); border-radius: 2px;
}
.post-thumb {
	width: 76px; height: 76px; border-radius: 10px; flex: none; overflow: hidden; background: var(--badge-bg);
}
.post-thumb img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	object-position: var(--focal-x, 50%) var(--focal-y, 50%);
	transform-origin: var(--focal-x, 50%) var(--focal-y, 50%);
	transform: scale(var(--zoom, 1));
	filter: brightness(var(--fx-brightness, 1)) contrast(var(--fx-contrast, 1)) saturate(var(--fx-saturate, 1)) grayscale(var(--fx-grayscale, 0)) sepia(var(--fx-sepia, 0));
}
.post-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.post-name { font-size: 13.5px; font-weight: 700; color: var(--ink); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-date { font-size: 10.5px; color: var(--ink-soft); margin: 3px 0 10px; }
.post-actions { display: flex; gap: 6px; margin-top: auto; flex-wrap: wrap; }
.post-actions a, .post-actions button {
	font-size: 10.5px; font-weight: 700; border: none; border-radius: 999px; padding: 6px 12px;
	cursor: pointer; font-family: inherit; text-decoration: none; white-space: nowrap;
}
.btn-view { background: var(--badge-bg); color: var(--ink); }
.btn-view:hover { background: var(--accent); color: var(--bg-soft); }
.btn-edit { background: var(--accent); color: var(--bg-soft); }
.btn-edit:hover { opacity: 0.85; }
.btn-delete { background: var(--danger-bg); color: var(--danger); }
.btn-delete:hover { background: var(--danger); color: var(--bg-soft); }
.my-post-inline-form { margin: 0; display: inline; }

/* --- お問い合わせ一覧（投稿カードと似た意匠、内容は運営からの返信を主役にする） --- */
.contact-list { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 700px) {
	.contact-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
.contact-card {
	background: var(--bg-soft); border: 1px solid var(--line); border-radius: 14px;
	padding: 14px; position: relative;
}
.contact-card .tape {
	position: absolute; top: -8px; left: 16px; width: 38px; height: 15px;
	background: rgba(143,191,160,0.55); border: 1px solid rgba(143,191,160,0.75);
	transform: rotate(-4deg); border-radius: 2px;
}
.contact-card-meta { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--ink-soft); margin: 0 0 8px; }
.contact-status-pill { font-size: 10px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.contact-status-pill.pending { background: var(--badge-bg); color: var(--ink-soft); }
.contact-status-pill.answered { background: var(--accent); color: var(--bg-soft); }
.contact-card-message { font-size: 12.5px; color: var(--ink); margin: 0; white-space: pre-wrap; line-height: 1.65; }
.contact-reply-box { background: var(--badge-bg); border-radius: 10px; padding: 10px 12px; margin-top: 10px; }
.contact-reply-label { font-size: 10px; font-weight: 700; color: var(--ink-soft); margin: 0 0 4px; }
.contact-reply-text { font-size: 12.5px; color: var(--ink); margin: 0; white-space: pre-wrap; line-height: 1.65; }

.empty-message {
	background: var(--bg-soft); border: 1px dashed var(--line); border-radius: 14px;
	padding: 26px 18px; text-align: center; color: var(--ink-soft); font-size: 12.5px; line-height: 1.7;
}

@media (max-width: 600px) {
	body { padding: 12px; }
	.brand .club-mark { width: 48px; }
	.brand .title-block h1 { font-size: 14px; }
	.header-area { margin-bottom: 14px; margin-left: -12px; margin-right: -12px; }
}