/* =========================================================
   HARITA マイページ  —  UI v3
   #harita-mypage 配下に全スコープ + テーマ上書き打ち消し
   （JINテーマのリンク金色下線・見出し装飾・リスト装飾を無効化）
   常時ライト配色（テーマがライト固定のため OS ダークには追従しない）
   ========================================================= */

#harita-mypage{
	--h-accent:#2563eb;
	--h-accent-soft:#eff4ff;
	--h-accent-ink:#1e40af;
	--h-fav:#f59e0b;
	--h-ink:#0f172a;
	--h-sub:#64748b;
	--h-line:#e5e9f0;
	--h-card:#ffffff;
	--h-bg:#f1f5f9;
	--h-radius:16px;

	max-width:780px;
	margin:0 auto;
	color:var(--h-ink);
	font-size:15px;
	line-height:1.65;
	-webkit-font-smoothing:antialiased;
}

/* ---- テーマ上書きのリセット ---- */
#harita-mypage *{ box-sizing:border-box; }
#harita-mypage ul,
#harita-mypage li{
	list-style:none !important;
	margin:0;
	padding:0;
	background:none !important;
	border:none;
}
#harita-mypage li::before,
#harita-mypage li::marker{ content:none !important; display:none !important; }
#harita-mypage a{
	text-decoration:none !important;
	background:none !important;
	box-shadow:none !important;
	color:inherit;
	border:none;
}
#harita-mypage .harita-panel__title{
	margin:0;
	padding:0 !important;
	background:none !important;
	border:none !important;
	font-weight:800;
	line-height:1.4;
	color:var(--h-ink);
}
#harita-mypage .harita-panel__title::before,
#harita-mypage .harita-panel__title::after{ content:none !important; display:none !important; }
#harita-mypage button{
	font-family:inherit;
	line-height:1.4;
}

/* ---------- セグメント型タブ ---------- */
#harita-mypage .harita-mypage__tabs{
	display:flex;
	gap:4px;
	background:var(--h-bg);
	padding:5px;
	border-radius:999px;
	margin:0 0 26px;
}
#harita-mypage .harita-tab{
	flex:1;
	appearance:none;
	background:transparent;
	border:none;
	border-radius:999px;
	padding:10px 8px;
	font-size:14.5px;
	font-weight:700;
	color:var(--h-sub);
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:6px;
	transition:color .2s, background .2s, box-shadow .2s;
}
#harita-mypage .harita-tab:hover{ color:var(--h-ink); }
#harita-mypage .harita-tab.is-active{
	background:var(--h-card);
	color:var(--h-accent-ink);
	box-shadow:0 1px 2px rgba(15,23,42,.06), 0 4px 12px -6px rgba(15,23,42,.25);
}
#harita-mypage .harita-tab__icon{ font-size:15px; line-height:1; }

/* ---------- パネル ---------- */
#harita-mypage .harita-panel{ display:none; }
#harita-mypage .harita-panel.is-active{ display:block; animation:harita-fade .25s ease; }
@keyframes harita-fade{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }

#harita-mypage .harita-panel__head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	margin:0 4px 14px;
}
#harita-mypage .harita-panel__title{ font-size:17px; letter-spacing:.01em; }

#harita-mypage .harita-clear{
	appearance:none;
	background:transparent;
	border:none;
	padding:6px 10px;
	border-radius:8px;
	font-size:12.5px;
	font-weight:600;
	color:var(--h-sub);
	cursor:pointer;
	white-space:nowrap;
	transition:background .15s, color .15s;
}
#harita-mypage .harita-clear:hover{ background:#fef2f2; color:#dc2626; }

/* ---------- 記事カード ---------- */
#harita-mypage .harita-list{ display:grid; gap:10px; }

#harita-mypage .harita-item{
	position:relative;
	display:flex;
	align-items:center;
	background:var(--h-card) !important;
	border:1px solid var(--h-line);
	border-radius:var(--h-radius);
	box-shadow:0 1px 2px rgba(15,23,42,.04), 0 8px 24px -12px rgba(15,23,42,.18);
	transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s, border-color .18s;
}
#harita-mypage .harita-item:hover{
	transform:translateY(-2px);
	border-color:#d5deeb;
	box-shadow:0 2px 4px rgba(15,23,42,.05), 0 16px 32px -16px rgba(37,99,235,.35);
}
#harita-mypage .harita-item__link{
	flex:1;
	min-width:0;
	display:flex;
	flex-direction:column;
	gap:8px;
	padding:16px 8px 16px 18px;
}
#harita-mypage .harita-item__title{
	font-weight:700;
	font-size:15px;
	line-height:1.45;
	color:var(--h-ink);
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
	transition:color .15s;
}
#harita-mypage .harita-item__link:hover .harita-item__title{ color:var(--h-accent); }
#harita-mypage .harita-item__meta{
	display:flex;
	align-items:center;
	gap:10px;
	font-size:12px;
	color:var(--h-sub);
}
#harita-mypage .harita-item__cat{
	display:inline-flex;
	align-items:center;
	background:var(--h-accent-soft);
	color:var(--h-accent-ink);
	border-radius:999px;
	padding:2px 10px;
	font-weight:700;
	font-size:11.5px;
}
#harita-mypage .harita-item__time{ display:inline-flex; align-items:center; gap:4px; }
#harita-mypage .harita-item__time::before{ content:""; width:4px; height:4px; border-radius:50%; background:#cbd5e1; }

#harita-mypage .harita-item__remove{
	flex:0 0 auto;
	appearance:none;
	background:transparent;
	border:none;
	width:44px;
	height:44px;
	margin-right:6px;
	border-radius:50%;
	font-size:18px;
	line-height:1;
	color:#cbd5e1;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:color .15s, background .15s;
}
#harita-mypage .harita-item__remove:hover{ color:#dc2626; background:#fef2f2; }

/* ---------- 検索チップ ---------- */
#harita-mypage .harita-chips{ display:flex; flex-wrap:wrap; gap:10px; }
#harita-mypage .harita-chip{
	display:inline-flex;
	align-items:center;
	background:var(--h-card) !important;
	border:1px solid var(--h-line);
	border-radius:999px;
	box-shadow:0 1px 2px rgba(15,23,42,.05);
	transition:transform .15s, border-color .15s;
}
#harita-mypage .harita-chip:hover{ transform:translateY(-1px); border-color:#d5deeb; }
#harita-mypage .harita-chip__link{
	padding:9px 6px 9px 16px;
	color:var(--h-ink);
	font-size:14px;
	font-weight:700;
	display:inline-flex;
	align-items:center;
	gap:7px;
}
#harita-mypage .harita-chip__link::before{ content:"🔍"; font-size:12px; opacity:.7; }
#harita-mypage .harita-chip__link:hover{ color:var(--h-accent); }
#harita-mypage .harita-chip__remove{
	appearance:none;
	background:transparent;
	border:none;
	padding:0 12px 0 6px;
	font-size:15px;
	color:#cbd5e1;
	cursor:pointer;
	transition:color .15s;
}
#harita-mypage .harita-chip__remove:hover{ color:#dc2626; }

/* ---------- 空状態 ---------- */
#harita-mypage .harita-empty{
	display:none;
	text-align:center;
	color:var(--h-sub);
	font-size:14px;
	background:#f8fafc;
	border:1px dashed #d5deeb;
	border-radius:var(--h-radius);
	padding:34px 24px;
}

/* ---------- おすすめ ---------- */
#harita-mypage .harita-reco{
	margin-top:32px;
	padding-top:26px;
	border-top:1px solid var(--h-line);
}
#harita-mypage .harita-reco[hidden]{ display:none; }
#harita-mypage .harita-reco .harita-panel__title{ margin:0 4px 14px; display:flex; align-items:center; gap:8px; }
#harita-mypage .harita-reco .harita-panel__title::before{ content:"✨" !important; display:inline !important; }

#harita-mypage .harita-note{
	margin-top:26px;
	font-size:12px;
	color:#94a3b8;
	text-align:center;
}

/* =========================================================
   記事ページ  お気に入りボタン
   ========================================================= */
.harita-fav-slot{ margin:30px 0; display:flex; justify-content:center; }
.harita-fav-btn{
	appearance:none;
	display:inline-flex;
	align-items:center;
	gap:8px;
	background:#ffffff !important;
	border:1.5px solid #f0d38a;
	border-radius:999px;
	padding:12px 26px;
	font-size:15px;
	font-weight:800;
	color:#b7791f !important;
	text-decoration:none !important;
	cursor:pointer;
	box-shadow:0 8px 20px -12px rgba(245,158,11,.6);
	transition:transform .15s, background .15s, color .15s, box-shadow .15s, border-color .15s;
}
.harita-fav-btn:hover{ transform:translateY(-1px); background:#fff7e8 !important; }
.harita-fav-btn:active{ transform:translateY(0); }
.harita-fav-btn.is-on{
	background:#f59e0b !important;
	border-color:#f59e0b;
	color:#ffffff !important;
	box-shadow:0 10px 24px -10px rgba(245,158,11,.7);
}
.harita-fav-btn__icon{ font-size:18px; line-height:1; }
.harita-fav-btn.is-on .harita-fav-btn__icon{ animation:harita-pop .3s ease; }
@keyframes harita-pop{ 0%{transform:scale(.5);} 60%{transform:scale(1.25);} 100%{transform:scale(1);} }

/* ---------- レスポンシブ ---------- */
@media (max-width:600px){
	#harita-mypage{ font-size:14.5px; }
	#harita-mypage .harita-tab{ padding:9px 4px; font-size:13px; }
	#harita-mypage .harita-tab__icon{ font-size:14px; }
	#harita-mypage .harita-panel__title{ font-size:16px; }
	#harita-mypage .harita-item__link{ padding:14px 6px 14px 15px; }
}