/* ==========================================================================
   GW Profile — インスタ風プロフィール
   キーカラーは gw-mypage と共通（#076951）
   クラス名に diary / blog の語を使わない（呼称変更に備える）
   ========================================================================== */

/* ---------------------------------------------------------------
   デザイントークン

   キーカラーは 外観 > カスタマイズ > カラー のパレット色1に追従する。
   var() の第2引数はパレット未設定時の保険なので、通常は効かない。
   派生色は color-mix でキーから作る＝カスタマイザで1色変えれば全部追従する。
   ⚠ パレットを参照するのは --gwp-key / --gwp-key-2 の2行だけに集約すること。
      キーの番号が違うと分かっても、直すのはその1行で済む。
   ⚠ 各派生色は「素の値 → color-mix」の順に2回宣言している。
      前者は color-mix 非対応ブラウザ用のフォールバック。消さないこと。
   --------------------------------------------------------------- */
/* ⚠ トークンは :root に置く。プロフィールページ以外（日記のフォロワー限定ページなど）でも
 *   .gwp-* のパーツを使うため。body.um-page-user に閉じると、そこで色が解決できず
 *   ボタンが透明になる。UM と特異度で争う指定だけは body.um-page-user に残すこと。 */
:root {
	--gwp-key:       var(--theme-palette-color-1, #de4693);
	--gwp-key-2:     var(--theme-palette-color-2, #8b1a50);

	--gwp-key-dark:  #b03372;
	--gwp-key-dark:  color-mix(in srgb, var(--gwp-key) 76%, #000);
	--gwp-key-soft:  #ec8ab8;
	--gwp-key-soft:  color-mix(in srgb, var(--gwp-key) 55%, #fff);
	--gwp-wash:      #fdf1f6;
	--gwp-wash:      color-mix(in srgb, var(--gwp-key) 9%, #fff);
	--gwp-border:    #f0e2e9;
	--gwp-border:    color-mix(in srgb, var(--gwp-key) 16%, #fff);
	--gwp-overlay:   rgba(222, 70, 147, .9);
	--gwp-overlay:   color-mix(in srgb, var(--gwp-key) 90%, transparent);

	/* 中立色。キーカラーには連動させない（写真・文字タイルの地） */
	--gwp-text:      #2b2a2a;
	--gwp-muted:     #857a80;
	--gwp-tile-bg:   #f2f2f2;
	--gwp-tile-ink:  #4a4a4a;
	--gwp-tile-line: #e8e8e8;

	--gwp-radius:    12px;
	--gwp-shadow:    0 2px 16px rgba(0, 0, 0, .06);
}

/* UM 既定ヘッダーが残ってしまった場合の保険（通常は remove_action で消えている） */
body.um-page-user .um-profile .um-header,
body.um-page-user .um-profile .um-cover {
	display: none !important;
}

/* UM のラッパー余白をリセット */
body.um-page-user .um-profile.um {
	max-width: 935px;
	margin: 0 auto;
}
body.um-page-user .um-profile .um-form {
	padding: 0;
}

/* --------------------------------------------------------------------------
   ヘッダー
   -------------------------------------------------------------------------- */
.gwp-head {
	padding: 24px 16px 4px;
	max-width: 935px;
	margin: 0 auto;
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
	color: var(--gwp-text);
}

.gwp-head__top {
	display: flex;
	align-items: center;
	gap: 20px;
}

.gwp-avatar {
	width: 86px;
	height: 86px;
	flex-shrink: 0;
}
/* ⚠ セレクタから body.um-page-user を外さないこと。
 *   um-profile.css に `.um-profile img { border-radius: 0; display: ... }` があり、
 *   `.gwp-avatar img` と特異度が同じ（0,1,1）。UM のCSSが後に読み込まれるので、
 *   スコープを外すと負けてアバターが四角くなる（2026-09-02 本番で発生）。 */
body.um-page-user .gwp-avatar img {
	width: 86px !important;
	height: 86px !important;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	border: 1px solid var(--gwp-border);
	background: #fff;
}

.gwp-stats {
	flex: 1;
	display: flex;
	justify-content: space-around;
	text-align: center;
	gap: 4px;
}
/* フォロワー／フォロー中は <button>。ボタンの既定スタイルを全部落として
   もとの <div> と同じ見た目に戻す。
   ⚠ セレクタから body.um-page-user を外さないこと。テーマのボタン指定に負ける */
body.um-page-user .gwp-stat--btn {
	appearance: none;
	-webkit-appearance: none;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	text-align: center;
	cursor: pointer;
	box-shadow: none;
	min-height: 0;
	line-height: inherit;
}
body.um-page-user .gwp-stat--btn:hover b { text-decoration: underline; }

.gwp-stat b {
	display: block;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
}
.gwp-stat span {
	font-size: 11.5px;
	color: var(--gwp-muted);
}

.gwp-head__id {
	margin-top: 14px;
}
.gwp-name {
	font-size: 15px !important;
	font-weight: 700;
	margin: 0 0 4px !important;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	line-height: 1.5;
}
.gwp-badge {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .03em;
	padding: 2px 8px;
	border-radius: 20px;
	background: var(--gwp-wash);
	color: var(--gwp-key-dark);
	text-decoration: none;
	white-space: nowrap;
}
a.gwp-badge:hover { background: #d9ece5; }

.gwp-bio {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.75;
	color: #333;
	white-space: pre-line;
}
.gwp-bio--empty {
	color: var(--gwp-muted);
	background: var(--gwp-wash);
	border-radius: 8px;
	padding: 10px 14px;
}
.gwp-bio--empty a {
	color: var(--gwp-key);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

/* 自己紹介は3行で畳む。長いと投稿が画面外に押し出されるため。 */
.gwp-bio.is-clamped {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	white-space: normal;
}
.gwp-bio-more {
	display: inline-block;
	margin-top: 2px;
	padding: 0;
	border: none;
	background: none;
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--gwp-muted);
	cursor: pointer;
}
.gwp-bio-more:hover { color: var(--gwp-key); }

.gwp-since {
	margin: 8px 0 0;
	font-size: 11.5px;
	color: var(--gwp-muted);
}

.gwp-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
}

/* --------------------------------------------------------------------------
   「…」メニュー
   -------------------------------------------------------------------------- */
.gwp-menu {
	position: relative;
	flex: 0 0 auto;
	margin-left: auto;
}
body.um-page-user .gwp-menu__toggle {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	margin: 0;
	border: 1px solid var(--gwp-border);
	border-radius: 8px;
	background: #fff;
	color: var(--gwp-muted);
	cursor: pointer;
	box-shadow: none;
	min-height: 0;
}
body.um-page-user .gwp-menu__toggle:hover { color: var(--gwp-text); border-color: #ccc; }
.gwp-menu__toggle svg { width: 18px; height: 18px; fill: currentColor; }

.gwp-menu__list {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 30;
	min-width: 210px;
	padding: 6px;
	background: #fff;
	border: 1px solid var(--gwp-border);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
body.um-page-user .gwp-menu__item {
	appearance: none;
	-webkit-appearance: none;
	display: block;
	width: 100%;
	padding: 10px 12px;
	margin: 0;
	border: 0;
	border-radius: 7px;
	background: none;
	color: var(--gwp-text);
	font-size: 13.5px;
	line-height: 1.5;
	text-align: left;
	cursor: pointer;
	box-shadow: none;
	min-height: 0;
}
body.um-page-user .gwp-menu__item:hover { background: #f6f6f6; }
body.um-page-user .gwp-menu__item--danger { color: #c0392b; }

/* --------------------------------------------------------------------------
   モーダル（フォロワー／フォロー中／ブロックした人）
   -------------------------------------------------------------------------- */
body.gwp-modal-open { overflow: hidden; }

/* ⚠ display:flex を当てているので、[hidden] を明示的に打ち消さないと
   閉じているはずのモーダルが出っぱなしになる（ブラウザ既定の
   [hidden]{display:none} は display 指定に負ける） */
.gwp-modal[hidden] { display: none; }

.gwp-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;   /* UM のヘッダーやテーマの固定要素より上 */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.gwp-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .45);
}
.gwp-modal__panel {
	position: relative;
	width: 100%;
	max-width: 400px;
	max-height: min(70vh, 560px);
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}
.gwp-modal__head {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 14px 48px;
	border-bottom: 1px solid var(--gwp-border);
}
.gwp-modal__title {
	margin: 0 !important;
	font-size: 15px !important;
	font-weight: 700;
}
body.um-page-user .gwp-modal__close {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--gwp-muted);
	cursor: pointer;
	box-shadow: none;
	min-height: 0;
}
.gwp-modal__close svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}
.gwp-modal__empty {
	margin: 0;
	padding: 32px 20px;
	text-align: center;
	font-size: 13px;
	color: var(--gwp-muted);
}
.gwp-modal__more {
	padding: 10px 16px 16px;
	text-align: center;
	border-top: 1px solid var(--gwp-border);
}

.gwp-people {
	list-style: none !important;
	margin: 0 !important;
	padding: 6px 0 !important;
	overflow-y: auto;
	flex: 1;
}
.gwp-person {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 16px;
	margin: 0 !important;
}
.gwp-person__link {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	min-width: 0;
	text-decoration: none !important;
	color: var(--gwp-text) !important;
}
body.um-page-user .gwp-person__avatar {
	width: 44px;
	height: 44px;
	border-radius: 50% !important;
	object-fit: cover;
	flex: 0 0 auto;
	border: 1px solid var(--gwp-border);
}
.gwp-person__name {
	font-size: 13.5px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.gwp-person__action { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   ボタン
   -------------------------------------------------------------------------- */
.gwp-btn {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	min-height: 36px;
	padding: 7px 16px;
	border-radius: 999px;
	border: 1px solid transparent;
	font-size: 13.5px;
	font-weight: 700;
	font-family: inherit;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s;
}
.gwp-btn--primary {
	background: var(--gwp-key);
	color: #fff;
}
.gwp-btn--primary:hover { background: var(--gwp-key-dark); color: #fff; }

.gwp-btn--outline {
	background: #fff;
	border-color: var(--gwp-border);
	color: var(--gwp-text);
}
.gwp-btn--outline:hover { background: #f4f9f7; }

.gwp-btn--sm { min-height: 30px; padding: 4px 12px; font-size: 12.5px; flex: 0 0 auto; }
.gwp-btn--block { width: 100%; }

.gwp-btn[disabled] { opacity: .55; cursor: default; }
.gwp-follow-btn.is-following { color: var(--gwp-key-dark); border-color: var(--gwp-key); }

.gwp-btn:focus-visible {
	outline: 2px solid var(--gwp-key);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   タブバー（UM の .um-profile-nav を作り直す）
   -------------------------------------------------------------------------- */
body.um-page-user .um-profile-nav {
	display: flex !important;
	max-width: 935px;
	margin: 20px auto 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	border-top: 1px solid var(--gwp-border) !important;
	box-shadow: none !important;
}
body.um-page-user .um-profile-nav-item {
	flex: 1;
	text-align: center;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: none !important;
}
/* モバイル専用（アイコンのみ）リンクは使わず、テキスト付きを常に出す */
body.um-page-user .um-profile-nav-item .uimob800-show,
body.um-page-user .um-profile-nav-item .uimob500-show,
body.um-page-user .um-profile-nav-item .uimob340-show {
	display: none !important;
}

/* ⚠ UM の既定CSS（um-profile.css）を必ず3点とも打ち消すこと。
 *   .um-profile-nav-item a { padding: 6px 10px 6px 28px; float: left; margin-left: 5px; }
 *   .um-profile-nav-item i { position: absolute; top: 8px; left: 10px; }
 *   ＝ 左28pxのパディングがアイコンの居場所という前提の作り。
 *   padding だけ上書きすると絶対配置のアイコンがラベルに重なり、
 *   float を残すとタブが内容幅に縮んで左に寄る（2026-09-02 本番のPCで発生）。 */
body.um-page-user .um-profile-nav-item > a {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 7px;
	float: none !important;
	width: 100%;
	box-sizing: border-box;
	padding: 12px 4px !important;
	margin: 0 !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--gwp-muted) !important;
	text-decoration: none;
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	border-top: 1px solid transparent;
	margin-top: -1px !important;
}

/* アイコンフォント（FontAwesome 4）は使わない。
 * このサイトでは一部グリフが壊れており、gw-um-tweaks が posts / comments タブだけ
 * FA6 に差し替えて凌いでいた＝新しいタブには効かない。
 * タイルのアイコンをSVGにしたのと同じ理由で、ここも mask で自前のSVGを敷く。
 * mask なので色は currentColor を継ぎ、アクティブ時の色替えもそのまま効く。 */
body.um-page-user .um-profile-nav-item > a i { display: none !important; }
body.um-page-user .um-profile-nav-item > a .title {
	display: inline !important;
	padding-left: 0 !important;
}
body.um-page-user .um-profile-nav-item > a::before {
	content: "";
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	background-color: currentColor;
	-webkit-mask: var(--gwp-nav-icon) center / contain no-repeat;
	mask: var(--gwp-nav-icon) center / contain no-repeat;
}
body.um-page-user .um-profile-nav-entries > a { --gwp-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h11'/%3E%3C/svg%3E"); }
body.um-page-user .um-profile-nav-answers > a { --gwp-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 11.3a7.7 7.7 0 0 1-8.2 7.7 8.6 8.6 0 0 1-2.6-.4L4.5 20l1.4-4.4a7.4 7.4 0 0 1-1.4-4.3 7.7 7.7 0 0 1 8-7.7 7.7 7.7 0 0 1 8 7.7z'/%3E%3C/svg%3E"); }
/* 他プラグインが足したタブには --gwp-nav-icon が無いのでアイコン枠を出さない */
body.um-page-user .um-profile-nav-item:not(.um-profile-nav-entries):not(.um-profile-nav-answers) > a::before {
	display: none;
}

body.um-page-user .um-profile-nav-item.active > a,
body.um-page-user .um-profile-nav-item > a:hover {
	color: var(--gwp-text) !important;
	border-top-color: var(--gwp-text);
}

/* 本文エリア */
body.um-page-user .um-profile-body {
	max-width: 935px;
	margin: 0 auto;
	padding: 0 !important;
}

/* --------------------------------------------------------------------------
   投稿グリッド
   -------------------------------------------------------------------------- */
.gwp-entry-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3px;
	margin: 3px 0 0;
}

.gwp-entry-tile {
	position: relative;
	aspect-ratio: 1 / 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 10px;
	overflow: hidden;
	text-decoration: none;
	color: #fff;
	background-size: cover;
	background-position: center;
	background-color: var(--gwp-tile-bg);
}
.gwp-entry-tile:hover { opacity: .93; }

/* 画像なしタイル（文字タイル）
   地は中立の灰。キーカラーには連動させない。
   プレースホルダー（カメラ／ロゴ）は中央に薄く敷き、本文はその上に重ねる。 */
.gwp-entry-tile--text {
	background: var(--gwp-tile-bg);
	box-shadow: inset 0 0 0 1px var(--gwp-tile-line);
	color: var(--gwp-tile-ink);
}
.gwp-entry-tile--text .gwp-entry-tile__date {
	color: #a3a3a3;
	text-shadow: none;
	opacity: 1;
}
.gwp-entry-tile--text .gwp-entry-tile__lock {
	color: #b0b0b0;
	text-shadow: none;
}
.gwp-entry-tile--text .gwp-entry-tile__text {
	color: var(--gwp-tile-ink);
	text-shadow: none;
	font-weight: 400;
}

/* プレースホルダー。本文の下に敷く（z-index 1 ＝ 文字が上に重なる） */
.gwp-entry-tile__ph {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #dcdcdc;
	pointer-events: none;
}
.gwp-entry-tile__ph svg {
	width: 34%;
	height: 34%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.3;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.gwp-entry-tile__ph img {
	width: 46%;
	height: 46%;
	object-fit: contain;
	opacity: .9;
}

/* 写真タイル：下部のグラデ（♡💬 オーバーレイの下地） */
.gwp-entry-tile--photo::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 55%;
	background: linear-gradient(to top, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0));
	pointer-events: none;
	z-index: 1;
}

/* 写真タイル：上部のグラデ
   日付は左上・公開範囲バッジは右上にあるのに、下半分にしかスクリムが無かった。
   明るい写真で日付が読めなくなるため、.is-light のときだけ敷く。 */
.gwp-entry-tile--photo.is-light::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 40%;
	background: linear-gradient(to bottom, rgba(0, 0, 0, .42), rgba(0, 0, 0, 0));
	pointer-events: none;
	z-index: 1;
}

/* 明るい写真：スクリムを敷く代わりに文字を濃色へ反転する（.on-light）。
   どちらを付けるかは PHP 側が post_meta _gw_profile_thumb_luma で決める。 */
.gwp-entry-tile--photo.on-light {
	color: #241a1f;
}
.gwp-entry-tile--photo.on-light .gwp-entry-tile__date,
.gwp-entry-tile--photo.on-light .gwp-entry-tile__lock {
	text-shadow: 0 1px 3px rgba(255, 255, 255, .75);
}
.gwp-entry-tile--photo.on-light .gwp-entry-tile__lock svg {
	filter: drop-shadow(0 1px 2px rgba(255, 255, 255, .85));
}

.gwp-entry-tile__date {
	position: absolute;
	top: 8px;
	left: 10px;
	font-size: 10px;
	letter-spacing: .04em;
	opacity: .9;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	z-index: 2;
}
.gwp-entry-tile__lock,
.gwp-entry-tile__flag {
	position: absolute;
	top: 7px;
	right: 9px;
	font-size: 11px;
	z-index: 3;
	line-height: 1;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.gwp-entry-tile__lock {
	display: flex;
	align-items: center;
	gap: 4px;
	text-shadow: none;
}

/* アイコンはSVG。色は currentColor を継ぐのでタイルの種類ごとに効く。
   ⚠ text-shadow はSVGに効かないので、写真の上では drop-shadow を使う。 */
.gwp-entry-tile__lock svg,
.gwp-entry-tile__meta svg {
	width: 13px;
	height: 13px;
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.gwp-entry-tile__meta svg { width: 14px; height: 14px; }
.gwp-entry-tile__meta span { display: inline-flex; align-items: center; gap: 5px; }
.gwp-entry-tile--photo .gwp-entry-tile__lock svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
.gwp-entry-tile__flag {
	top: auto;
	bottom: 8px;
	right: 9px;
	font-size: 9.5px;
	font-weight: 700;
	background: rgba(0, 0, 0, .45);
	border-radius: 4px;
	padding: 1px 5px;
}

.gwp-entry-tile__text {
	position: relative;
	z-index: 2;
	margin: 0;
	font-size: 11px;
	line-height: 1.6;
	font-weight: 500;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .25);
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.gwp-entry-tile__meta {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	font-size: 12px;
	font-weight: 700;
	background: rgba(0, 0, 0, .38);
	opacity: 0;
	transition: opacity .15s;
}
.gwp-entry-tile:hover .gwp-entry-tile__meta,
.gwp-entry-tile:focus-visible .gwp-entry-tile__meta { opacity: 1; }

/* 明るい文字タイルでは黒38%が浮くのでキーカラー面に差し替える */
.gwp-entry-tile--text .gwp-entry-tile__meta {
	background: rgba(120, 120, 120, .88);
	color: #fff;
}

/* タッチ端末はホバーが無いので常時うっすら出す */
@media (hover: none) {
	.gwp-entry-tile__meta {
		inset: auto 0 0 0;
		height: auto;
		padding: 5px 8px;
		justify-content: flex-end;
		gap: 10px;
		font-size: 10.5px;
		background: linear-gradient(to top, rgba(0, 0, 0, .4), rgba(0, 0, 0, 0));
		opacity: 1;
	}
	.gwp-entry-tile--text .gwp-entry-tile__meta { background: none; color: #9a9a9a; }
	/* メタが常時出るぶん、本文の足元を空けておかないと重なる（本文は下寄せのため） */
	.gwp-entry-tile--text { padding-bottom: 26px; }
	.gwp-entry-tile--text .gwp-entry-tile__text { -webkit-line-clamp: 3; }
}

/* --------------------------------------------------------------------------
   相談コメント一覧
   -------------------------------------------------------------------------- */
.gwp-answer-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.gwp-answer {
	border-bottom: 1px solid var(--gwp-border);
}
.gwp-answer__link {
	display: block;
	padding: 16px 16px;
	text-decoration: none;
	color: inherit;
}
.gwp-answer__link:hover { background: #f7fbfa; }

.gwp-answer__title {
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--gwp-key-dark);
	margin-bottom: 5px;
	line-height: 1.6;
}
.gwp-answer__body {
	margin: 0 0 6px;
	font-size: 13.5px;
	line-height: 1.8;
	color: #333;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.gwp-answer__date {
	font-size: 11.5px;
	color: var(--gwp-muted);
}

/* --------------------------------------------------------------------------
   プロフィールタブ
   -------------------------------------------------------------------------- */
.gwp-about { padding: 20px 16px 8px; }
.gwp-about__block { margin-bottom: 24px; }
.gwp-about__title {
	font-size: 13px !important;
	font-weight: 700;
	color: var(--gwp-key);
	margin: 0 0 8px !important;
	letter-spacing: .03em;
}
.gwp-about__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.85;
	color: #333;
}

/* --------------------------------------------------------------------------
   空・もっと見る
   -------------------------------------------------------------------------- */
.gwp-empty {
	text-align: center;
	padding: 56px 20px;
}
.gwp-empty__text {
	margin: 0 0 16px;
	font-size: 14px;
	color: var(--gwp-muted);
}
.gwp-empty .gwp-btn { flex: 0 0 auto; }

.gwp-more {
	display: flex;
	justify-content: center;
	padding: 20px 16px 32px;
}
.gwp-more .gwp-btn { flex: 0 0 auto; min-width: 200px; }

/* --------------------------------------------------------------------------
   PC
   -------------------------------------------------------------------------- */
@media (min-width: 736px) {
	.gwp-head {
		padding: 36px 20px 12px;
		display: grid;
		grid-template-columns: 240px 1fr;
		grid-template-areas:
			"avatar id"
			"avatar stats"
			"avatar actions";
		align-items: start;
		row-gap: 18px;
	}
	.gwp-head__top {
		display: contents;
	}
	.gwp-avatar { grid-area: avatar; width: 150px; height: 150px; justify-self: center; }
	body.um-page-user .gwp-avatar img { width: 150px !important; height: 150px !important; }

	.gwp-head__id { grid-area: id; margin-top: 0; }
	.gwp-name { font-size: 20px !important; }
	.gwp-bio { font-size: 14px; }

	.gwp-stats {
		grid-area: stats;
		justify-content: flex-start;
		gap: 40px;
		text-align: left;
	}
	.gwp-stat b { display: inline; font-size: 15px; margin-right: 5px; }
	.gwp-stat span { font-size: 14px; color: var(--gwp-text); }

	.gwp-actions { grid-area: actions; margin-top: 0; }
	.gwp-actions .gwp-btn { flex: 0 0 auto; min-width: 150px; }
	.gwp-menu { margin-left: 4px; }

	.gwp-entry-grid { gap: 4px; margin-top: 4px; }
	.gwp-entry-tile { padding: 14px; }
	.gwp-entry-tile__text { font-size: 12.5px; -webkit-line-clamp: 5; }
	.gwp-entry-tile__date { font-size: 11px; }
	.gwp-entry-tile__lock { top: 11px; right: 13px; font-size: 14px; }
	.gwp-entry-tile__lock svg { width: 17px; height: 17px; }
	.gwp-entry-tile__meta { font-size: 14px; gap: 20px; }
	.gwp-entry-tile__meta svg { width: 17px; height: 17px; }
}

/* --------------------------------------------------------------------------
   モーション設定を尊重
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.gwp-btn, .gwp-entry-tile__meta { transition: none; }
}

/* ==========================================================================
   投稿の並べ方（リスト / カード / グリッド）

   3列グリッドは「サムネイルが写真だから」成立する形式で、文章だけの投稿を
   敷き詰めると模様にしか見えなくなる（2026-09-02 本番で確認）。
   既定はリスト。設定 → プロフィール → 投稿の並べ方 で切り替える。

   ⚠ どの並べ方でも出すのは本文の書き出しではなく「タイトル」。
   ========================================================================== */

/* --- 共通パーツ --- */
.gwp-entry-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--gwp-text);
}
.gwp-entry-cat {
	display: block;
	margin-bottom: 2px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--gwp-key);
}
.gwp-entry-excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 4px;
	font-size: 12px;
	line-height: 1.6;
	color: var(--gwp-muted);
}
.gwp-entry-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 6px;
	font-size: 11px;
	color: var(--gwp-muted);
	font-variant-numeric: tabular-nums;
}
.gwp-entry-meta span { display: inline-flex; align-items: center; gap: 4px; }
.gwp-entry-meta svg {
	width: 13px; height: 13px; display: block;
	fill: none; stroke: currentColor; stroke-width: 1.7;
	stroke-linecap: round; stroke-linejoin: round;
}

/* サムネイル枠。画像が無ければプレースホルダーが必ずここに入るので、
   全件で同じ見え方になる（グリッドでは本文の裏に隠れて不揃いだった）。 */
.gwp-entry-thumb {
	flex: 0 0 auto;
	display: block;
	background-color: var(--gwp-tile-bg);
	background-size: cover;
	background-position: center;
	border-radius: 9px;
	overflow: hidden;
	position: relative;
}
.gwp-entry-thumb--empty { display: flex; align-items: center; justify-content: center; }
.gwp-entry-thumb .gwp-entry-tile__ph { position: static; color: #d3d3d3; }
.gwp-entry-thumb .gwp-entry-tile__ph svg { width: 24px; height: 24px; }
.gwp-entry-thumb .gwp-entry-tile__ph img { width: 60%; height: 60%; }

/* 公開範囲のタグ。複数付くことがあるので包みの側で位置を決める。 */
.gwp-entry-flags {
	position: absolute;
	top: 6px;
	left: 6px;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	max-width: calc(100% - 12px);
}
.gwp-entry-flag {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 3px 7px;
	border-radius: 20px;
	background: rgba(0, 0, 0, .6);
	color: #fff;
	font-size: 9.5px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}
/* 「会員のみ」は制限の告知ではなく「ログインすれば読める」という誘導なので、
   グレーではなくキーカラーで出す。未ログインの人にこそ見せるタグ。 */
.gwp-entry-flag--members { background: var(--gwp-key); }
.gwp-entry-flag svg {
	width: 11px; height: 11px; display: block;
	fill: none; stroke: currentColor; stroke-width: 1.8;
	stroke-linecap: round; stroke-linejoin: round;
}

/* --- リスト（既定） --- */
.gwp-entry-list { list-style: none; margin: 0; padding: 0; }
.gwp-entry-row { border-bottom: 1px solid var(--gwp-border); }
.gwp-entry-row > a {
	position: relative;
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 14px 16px;
	text-decoration: none;
	color: inherit;
}
.gwp-entry-row > a:hover { background: var(--gwp-wash); }
.gwp-entry-row .gwp-entry-thumb { width: 64px; height: 64px; }
.gwp-entry-row__body { min-width: 0; flex: 1; }

/* --- カード（TOPの会員日記カードと同じ言語） --- */
.gwp-entry-cards {
	list-style: none;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin: 0;
	padding: 14px;
}
.gwp-entry-card {
	background: #fff;
	border: 1px solid var(--gwp-border);
	border-radius: 14px;
	overflow: hidden;
}
.gwp-entry-card > a { position: relative; display: block; padding: 8px 8px 12px; text-decoration: none; color: inherit; }
.gwp-entry-card > a:hover { background: var(--gwp-wash); }
.gwp-entry-card .gwp-entry-thumb { width: 100%; aspect-ratio: 16 / 10; border-radius: 10px; margin-bottom: 9px; }
.gwp-entry-card .gwp-entry-thumb .gwp-entry-tile__ph svg { width: 28px; height: 28px; }
.gwp-entry-card__body { display: block; padding: 0 4px; }
.gwp-entry-card .gwp-entry-title { font-size: 12.5px; }

/* --- 3列グリッド（写真つきが多いとき用） --- */
.gwp-entry-grid .gwp-entry-tile { padding: 10px 10px 26px; }
.gwp-entry-grid .gwp-entry-title {
	position: relative;
	z-index: 2;
	font-size: 11px;
	-webkit-line-clamp: 4;
}
.gwp-entry-grid .gwp-entry-tile--photo .gwp-entry-title { display: none; }
.gwp-entry-grid .gwp-entry-meta {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 4;
	justify-content: flex-end;
	gap: 10px;
	margin: 0;
	padding: 5px 8px;
	font-size: 10.5px;
	font-weight: 700;
}
.gwp-entry-grid .gwp-entry-meta__date { margin-right: auto; }
.gwp-entry-grid .gwp-entry-tile--photo .gwp-entry-meta { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.gwp-entry-grid .gwp-entry-flags { top: 7px; left: auto; right: 9px; justify-content: flex-end; }

/* --- PC --- */
@media (min-width: 736px) {
	.gwp-entry-row > a { padding: 16px 20px; }
	.gwp-entry-row .gwp-entry-thumb { width: 104px; height: 104px; }
	.gwp-entry-row .gwp-entry-title { font-size: 16px; }
	.gwp-entry-excerpt { font-size: 13.5px; }
	.gwp-entry-meta { font-size: 12px; }
	.gwp-entry-meta svg { width: 15px; height: 15px; }

	.gwp-entry-cards { grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 18px; }
	.gwp-entry-cards .gwp-entry-title { font-size: 14.5px; }
	.gwp-entry-cat { font-size: 11px; }
}