/* ========================================
   会員機能（アカウントページ） - CSS
   サブスクラボ Editorial Design
   - トークンは diagnosis.css と同系（モノクロ基調）
   ======================================== */

:root {
	--mem-black: #0d0d0d;
	--mem-white: #fff;
	--mem-gray: #6b6b6b;           /* WCAG AA 4.65:1 */
	--mem-gray-soft: #8a8a8a;
	--mem-light: #f5f5f3;
	--mem-border: #e5e5e5;
	--mem-focus: #1a73e8;
	--mem-error: #b3261e;
	--mem-error-bg: #fdf3f2;
	--mem-success: #1e6b40;
	--mem-success-bg: #f0f7f2;
	--mem-font: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, sans-serif;
}

/* -------------------------------------
   honeypot（スクリーン外へ退避）
   ※ display:none だと一部botが除外するため位置退避方式
------------------------------------- */
.coffee-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* -------------------------------------
   ページ全体
------------------------------------- */
.coffee-account {
	background: var(--mem-light);
	font-family: var(--mem-font);
	color: var(--mem-black);
	padding: 48px 16px 80px;
	min-height: 60vh;
}

.coffee-account__card {
	background: var(--mem-white);
	border: 1px solid var(--mem-border);
	border-radius: 16px;
	max-width: 480px;
	margin: 0 auto;
	padding: 40px 32px 36px;
}

.coffee-account__card--wide {
	max-width: 640px;
}

/* -------------------------------------
   ヘッダー
------------------------------------- */
.coffee-account__header {
	text-align: center;
	margin-bottom: 24px;
}

.coffee-account__logo {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: var(--mem-gray);
	margin-bottom: 12px;
}

.coffee-account__title {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.4;
	margin: 0 0 8px;
	letter-spacing: 0.04em;
}

.coffee-account__subtitle {
	font-size: 13px;
	color: var(--mem-gray);
	line-height: 1.7;
	margin: 0;
}

/* -------------------------------------
   通知
------------------------------------- */
.coffee-account__notice {
	font-size: 13px;
	line-height: 1.8;
	border-radius: 10px;
	padding: 14px 16px;
	margin: 0 0 20px;
}

.coffee-account__notice--success {
	background: var(--mem-success-bg);
	border: 1px solid var(--mem-success);
	color: var(--mem-success);
}

.coffee-account__notice--error {
	background: var(--mem-error-bg);
	border: 1px solid var(--mem-error);
	color: var(--mem-error);
}

/* -------------------------------------
   フォーム
------------------------------------- */
.coffee-account__form {
	margin: 0;
}

.coffee-account__field {
	margin: 0 0 18px;
}

.coffee-account__field label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 6px;
}

.coffee-account__field input[type="text"],
.coffee-account__field input[type="email"],
.coffee-account__field input[type="password"] {
	width: 100%;
	box-sizing: border-box;
	font-size: 16px; /* iOSズーム防止 */
	font-family: var(--mem-font);
	color: var(--mem-black);
	background: var(--mem-white);
	border: 1px solid #ccc;
	border-radius: 10px;
	padding: 12px 14px;
	line-height: 1.5;
	-webkit-appearance: none;
	appearance: none;
}

.coffee-account__field input:focus-visible {
	outline: 2px solid var(--mem-focus);
	outline-offset: 1px;
	border-color: var(--mem-focus);
}

.coffee-account__check {
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.7;
}

.coffee-account__check label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	cursor: pointer;
}

.coffee-account__check input[type="checkbox"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: var(--mem-black);
}

.coffee-account__check a {
	color: var(--mem-black);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* -------------------------------------
   ボタン
------------------------------------- */
.coffee-account__submit {
	margin: 24px 0 0;
}

.coffee-account__btn {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	font-family: var(--mem-font);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--mem-white);
	background: var(--mem-black);
	border: 1px solid var(--mem-black);
	border-radius: 999px;
	padding: 14px 20px;
	cursor: pointer;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.coffee-account__btn:hover {
	opacity: 0.82;
	color: var(--mem-white);
}

.coffee-account__btn--line {
	color: var(--mem-black);
	background: var(--mem-white);
	border-color: var(--mem-black);
}

.coffee-account__btn--line:hover {
	color: var(--mem-black);
	background: var(--mem-light);
	opacity: 1;
}

.coffee-account__btn:focus-visible {
	outline: 2px solid var(--mem-focus);
	outline-offset: 3px;
}

/* -------------------------------------
   注記・リンク
------------------------------------- */
.coffee-account__note {
	font-size: 12px;
	color: var(--mem-gray);
	line-height: 1.8;
	margin: 14px 0 0;
}

.coffee-account__links {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--mem-border);
}

.coffee-account__links--left {
	align-items: flex-start;
	border-top: none;
	padding-top: 0;
	margin-top: 8px;
}

.coffee-account__links a {
	font-size: 13px;
	color: var(--mem-black);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.coffee-account__links a:hover {
	color: var(--mem-gray);
}

.coffee-account__links a:focus-visible {
	outline: 2px solid var(--mem-focus);
	outline-offset: 3px;
	border-radius: 4px;
}

/* -------------------------------------
   マイページ
------------------------------------- */
.coffee-account__section {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--mem-border);
}

.coffee-account__section:first-of-type {
	margin-top: 8px;
	padding-top: 0;
	border-top: none;
}

.coffee-account__section-title {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.06em;
	margin: 0 0 14px;
	padding-left: 10px;
	border-left: 3px solid var(--mem-black);
}

.coffee-account__dl {
	display: grid;
	grid-template-columns: 130px 1fr;
	gap: 10px 16px;
	font-size: 14px;
	margin: 0;
}

.coffee-account__dl dt {
	color: var(--mem-gray);
	font-weight: 400;
}

.coffee-account__dl dd {
	margin: 0;
	word-break: break-all;
}

.coffee-account__actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* -------------------------------------
   お気に入りボタン（記事・診断結果・共通）
------------------------------------- */
.coffee-fav {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--mem-font);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	color: var(--mem-black);
	background: var(--mem-white);
	border: 1px solid #ccc;
	border-radius: 999px;
	padding: 10px 16px;
	cursor: pointer;
	text-decoration: none;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.coffee-fav:hover {
	border-color: var(--mem-black);
	color: var(--mem-black);
}

.coffee-fav:focus-visible {
	outline: 2px solid var(--mem-focus);
	outline-offset: 3px;
}

.coffee-fav__heart {
	font-size: 14px;
	color: #c9c9c9;
	transition: color 0.2s ease, transform 0.2s ease;
}

.coffee-fav[aria-pressed="true"] {
	border-color: var(--mem-black);
	background: var(--mem-light);
}

.coffee-fav[aria-pressed="true"] .coffee-fav__heart {
	color: #e0245e;
	transform: scale(1.1);
}

.coffee-fav__state {
	color: var(--mem-gray);
	font-weight: 400;
	border-left: 1px solid var(--mem-border);
	padding-left: 8px;
	margin-left: 2px;
}

.coffee-fav--busy {
	opacity: 0.5;
	pointer-events: none;
}

/* 記事冒頭のfavバー */
.coffee-favbar {
	margin: 0 0 24px;
}

/* 診断結果カード内 */
.result-card__fav {
	margin: 16px 0 0;
}

/* 診断結果の保存ボタン */
.result__save {
	text-align: center;
	margin: 28px 0 8px;
}

.btn-save-diagnosis {
	display: inline-block;
	font-family: var(--mem-font);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--mem-white);
	background: var(--mem-black);
	border: 1px solid var(--mem-black);
	border-radius: 999px;
	padding: 13px 28px;
	cursor: pointer;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.btn-save-diagnosis:hover {
	opacity: 0.82;
	color: var(--mem-white);
}

.btn-save-diagnosis:disabled {
	background: var(--mem-gray);
	border-color: var(--mem-gray);
	cursor: default;
	opacity: 1;
}

.btn-save-diagnosis:focus-visible {
	outline: 2px solid var(--mem-focus);
	outline-offset: 3px;
}

/* -------------------------------------
   マイページ: リスト（お気に入り・保存診断）
------------------------------------- */
.coffee-mylist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.coffee-mylist__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 2px;
	border-bottom: 1px solid var(--mem-border);
}

.coffee-mylist__item:last-child {
	border-bottom: none;
}

.coffee-mylist__main {
	min-width: 0;
}

.coffee-mylist__name {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: var(--mem-black);
	text-decoration: none;
	line-height: 1.5;
}

a.coffee-mylist__name:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.coffee-mylist__sub {
	display: block;
	font-size: 12px;
	color: var(--mem-gray);
	margin-top: 2px;
}

.coffee-mylist__empty {
	font-size: 13px;
	color: var(--mem-gray);
	line-height: 1.8;
	padding: 8px 2px;
}

.coffee-fav-remove,
.coffee-diag-delete {
	flex: 0 0 auto;
	font-family: var(--mem-font);
	font-size: 12px;
	color: var(--mem-gray);
	background: none;
	border: 1px solid #ccc;
	border-radius: 999px;
	padding: 6px 14px;
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.coffee-fav-remove:hover,
.coffee-diag-delete:hover {
	color: var(--mem-error);
	border-color: var(--mem-error);
}

/* メルマガトグル */
.coffee-account__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.coffee-account__toggle input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--mem-black);
}

/* 退会 */
.coffee-account__danger {
	margin-top: 18px;
	border: 1px solid var(--mem-border);
	border-radius: 10px;
	padding: 12px 16px;
}

.coffee-account__danger summary {
	font-size: 13px;
	color: var(--mem-gray);
	cursor: pointer;
}

.coffee-account__btn--danger {
	background: var(--mem-error);
	border-color: var(--mem-error);
}

.coffee-account__btn--danger:hover {
	color: var(--mem-white);
}

/* -------------------------------------
   統計ページ（/coffee-stats/）
------------------------------------- */
.coffee-stats {
	font-family: var(--mem-font);
	color: var(--mem-black);
	padding: 40px 16px 80px;
}

.coffee-stats__inner {
	max-width: 760px;
	margin: 0 auto;
}

.coffee-stats__header {
	text-align: center;
	margin-bottom: 28px;
}

.coffee-stats__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: var(--mem-gray);
	margin: 0 0 10px;
}

.coffee-stats__title {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.04em;
	margin: 0 0 10px;
}

.coffee-stats__meta {
	font-size: 12px;
	color: var(--mem-gray);
	margin: 0;
}

.coffee-stats__intro {
	font-size: 14px;
	line-height: 2;
	margin-bottom: 8px;
}

.coffee-stats__section {
	margin-top: 40px;
}

.coffee-stats__section-title {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.04em;
	margin: 0 0 8px;
	padding-left: 12px;
	border-left: 4px solid var(--mem-black);
}

.coffee-stats__section-desc {
	font-size: 13px;
	color: var(--mem-gray);
	line-height: 1.9;
	margin: 0 0 16px;
}

.coffee-stats__section-desc a {
	color: var(--mem-black);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.coffee-stats__collecting {
	font-size: 13px;
	color: var(--mem-gray);
	background: var(--mem-light);
	border: 1px dashed #ccc;
	border-radius: 10px;
	padding: 14px 16px;
	margin-bottom: 16px;
}

.coffee-stats__table-wrap {
	overflow-x: auto;
}

.coffee-stats__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.coffee-stats__table th,
.coffee-stats__table td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid var(--mem-border);
}

.coffee-stats__table thead th {
	font-size: 12px;
	color: var(--mem-gray);
	font-weight: 700;
	border-bottom: 2px solid var(--mem-black);
	white-space: nowrap;
}

.coffee-stats__rank {
	font-weight: 700;
	width: 3em;
}

.coffee-stats__service a {
	color: var(--mem-black);
	font-weight: 700;
	text-decoration: none;
}

.coffee-stats__service a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.coffee-stats__price {
	display: block;
	font-size: 12px;
	color: var(--mem-gray);
	margin-top: 2px;
}

.coffee-stats__count {
	white-space: nowrap;
	font-weight: 700;
}

.coffee-stats__kpis {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.coffee-stats__kpi {
	flex: 1 1 200px;
	background: var(--mem-light);
	border-radius: 12px;
	padding: 18px 20px;
	text-align: center;
}

.coffee-stats__kpi-num {
	display: block;
	font-size: 28px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.coffee-stats__kpi-label {
	display: block;
	font-size: 12px;
	color: var(--mem-gray);
	margin-top: 4px;
}

.coffee-stats__subhead {
	font-size: 15px;
	font-weight: 700;
	margin: 24px 0 12px;
}

.coffee-stats__diaglist {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: diagrank;
}

.coffee-stats__diaglist li {
	display: grid;
	grid-template-columns: minmax(120px, 200px) 1fr 3.5em;
	align-items: center;
	gap: 12px;
	padding: 8px 0;
	font-size: 13px;
}

.coffee-stats__diagname {
	font-weight: 700;
}

.coffee-stats__diagbar {
	display: block;
	height: 10px;
	background: var(--mem-light);
	border-radius: 999px;
	overflow: hidden;
}

.coffee-stats__diagbar span {
	display: block;
	height: 100%;
	background: var(--mem-black);
	border-radius: 999px;
}

.coffee-stats__diagpct {
	text-align: right;
	font-weight: 700;
}

.coffee-stats__catlist {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 13px;
}

.coffee-stats__catlist li {
	display: flex;
	justify-content: space-between;
	padding: 8px 2px;
	border-bottom: 1px solid var(--mem-border);
}

.coffee-stats__about {
	font-size: 13px;
	line-height: 2;
	color: var(--mem-black);
	margin: 0;
	padding-left: 1.4em;
}

.coffee-stats__about a {
	color: var(--mem-black);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.coffee-stats__cta {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 420px;
	margin: 48px auto 0;
}

/* -------------------------------------
   レスポンシブ
------------------------------------- */
@media (max-width: 480px) {
	.coffee-account {
		padding: 24px 12px 56px;
	}

	.coffee-account__card {
		padding: 28px 20px 28px;
		border-radius: 12px;
	}

	.coffee-account__title {
		font-size: 20px;
	}

	.coffee-account__dl {
		grid-template-columns: 1fr;
		gap: 2px 0;
	}

	.coffee-account__dl dt {
		font-size: 12px;
		margin-top: 10px;
	}

	.coffee-stats__title {
		font-size: 22px;
	}

	.coffee-stats__diaglist li {
		grid-template-columns: 1fr;
		gap: 4px;
	}

	.coffee-stats__diagpct {
		text-align: left;
	}
}

/* -------------------------------------
   会員特典クーポン（マイページ）
------------------------------------- */
.coffee-account__coupon {
	text-align: center;
}

.coffee-account__coupon-desc {
	font-size: 13px;
	color: var(--mem-gray);
	line-height: 1.8;
	margin: 0 0 12px;
}

.coffee-account__coupon-code {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.12em;
	border: 2px dashed var(--mem-black);
	border-radius: 12px;
	padding: 14px 16px;
	margin: 0 0 16px;
	user-select: all;
	-webkit-user-select: all;
}

/* マイページ: 解除済み行の薄表示（再クリックで復帰） */
.coffee-mylist__item.is-removed {
	opacity: 0.45;
}

/* マイページ: 味覚プロフィール */
.coffee-account__taste {
	font-size: 14px;
	margin: 0 0 10px;
}

.coffee-account__taste-date {
	color: var(--mem-gray);
	font-size: 12px;
}