/* =========================================================
   Components - 共通部品
   ========================================================= */

/* ----- Container ----- */
.hk-container {
	width: 100%;
	max-width: var(--hk-container);
	margin-inline: auto;
	padding-inline: var(--hk-gutter);
}

.hk-container--narrow { max-width: var(--hk-container-narrow); }
.hk-container--wide   { max-width: var(--hk-container-wide); }

/* ----- Section base ----- */
.hk-section {
	padding-block: var(--hk-space-9);
}

.hk-section--alt {
	background: var(--hk-color-bg-alt);
}

.hk-section--dark {
	background: var(--hk-color-bg-dark);
	color: var(--hk-color-text-on-dark);
}

/* ----- Headings ----- */
.hk-eyebrow {
	display: inline-block;
	font-family: var(--hk-font-en);
	font-size: var(--hk-fs-sm);
	letter-spacing: var(--hk-tracking-wider);
	text-transform: uppercase;
	color: var(--hk-color-gold-dark);
	margin-bottom: var(--hk-space-3);
}

.hk-heading {
	font-family: var(--hk-font-jp);
	font-weight: var(--hk-fw-semibold);
	line-height: var(--hk-lh-tight);
	letter-spacing: var(--hk-tracking-tight);
}

.hk-heading--display { font-size: var(--hk-fs-display); }
.hk-heading--h1      { font-size: var(--hk-fs-h1); }
.hk-heading--h2      { font-size: var(--hk-fs-h2); }
.hk-heading--h3      { font-size: var(--hk-fs-h3); }

.hk-heading__accent {
	color: var(--hk-color-gold-dark);
}

.hk-rule-gold {
	display: block;
	width: 56px;
	height: 1px;
	background: var(--hk-color-line-strong);
	margin: var(--hk-space-4) 0;
}

/* ----- Buttons ----- */
.hk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--hk-space-2);
	padding: 0.85rem 1.75rem;
	font-family: var(--hk-font-jp);
	font-size: var(--hk-fs-base);
	font-weight: var(--hk-fw-medium);
	letter-spacing: var(--hk-tracking-wide);
	border-radius: var(--hk-radius-pill);
	transition:
		background var(--hk-duration-base) var(--hk-ease-out),
		color var(--hk-duration-base) var(--hk-ease-out),
		box-shadow var(--hk-duration-base) var(--hk-ease-out),
		transform var(--hk-duration-base) var(--hk-ease-out);
	cursor: pointer;
	white-space: nowrap;
}

.hk-btn:focus-visible {
	outline: 2px solid var(--hk-color-gold-dark);
	outline-offset: 3px;
}

/* Primary - シャンパンゴールド */
.hk-btn--primary {
	background: linear-gradient(135deg, var(--hk-color-gold) 0%, var(--hk-color-gold-dark) 100%);
	color: #FFFFFF;
	box-shadow: var(--hk-shadow-gold);
}
.hk-btn--primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 28px rgba(201, 169, 110, 0.35);
}

/* Ghost - 透明＋ゴールド枠 */
.hk-btn--ghost {
	background: transparent;
	color: var(--hk-color-gold-dark);
	border: 1px solid var(--hk-color-line-strong);
}
.hk-btn--ghost:hover {
	background: var(--hk-color-gold);
	color: #FFFFFF;
	border-color: var(--hk-color-gold);
}

/* Outline - ダーク */
.hk-btn--outline {
	background: transparent;
	color: var(--hk-color-text);
	border: 1px solid var(--hk-color-line);
}

/* LINE 公式緑 — 公式LINE登録ボタン用 */
.hk-btn--line-active {
	background: #06C755;
	color: #FFFFFF;
	border: 1px solid #06C755;
	box-shadow: 0 4px 12px rgba(6, 199, 85, 0.25);
}
.hk-btn--line-active:hover {
	background: #04B14C;
	color: #FFFFFF;
	border-color: #04B14C;
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(6, 199, 85, 0.35);
}
.hk-btn__line-icon {
	font-family: var(--hk-font-en);
	font-weight: var(--hk-fw-bold);
	font-size: var(--hk-fs-xs);
	letter-spacing: 0.05em;
	background: rgba(255, 255, 255, 0.18);
	color: #FFFFFF;
	padding: 0.15rem 0.5rem;
	border-radius: var(--hk-radius-sm);
}
.hk-btn--outline:hover {
	border-color: var(--hk-color-gold-dark);
	color: var(--hk-color-gold-dark);
}

.hk-btn--block {
	display: flex;
	width: 100%;
}

.hk-btn--lg {
	padding: 1.1rem 2.5rem;
	font-size: var(--hk-fs-md);
}

/* ----- Card ----- */
.hk-card {
	background: var(--hk-color-bg);
	border: 1px solid var(--hk-color-line);
	border-radius: var(--hk-radius-lg);
	padding: var(--hk-space-6);
	transition: box-shadow var(--hk-duration-base) var(--hk-ease-out),
				border-color var(--hk-duration-base) var(--hk-ease-out);
}

.hk-card:hover {
	border-color: var(--hk-color-line-strong);
	box-shadow: var(--hk-shadow);
}

/* ----- Mosaic / Blur (会員リスト用) ----- */
.hk-mosaic {
	filter: blur(14px);
	transform: scale(1.05);
	pointer-events: none;
	user-select: none;
}

/* ----- Stack utility ----- */
.hk-stack > * + * { margin-top: var(--hk-space-4); }
.hk-stack-sm > * + * { margin-top: var(--hk-space-2); }
.hk-stack-lg > * + * { margin-top: var(--hk-space-6); }

/* ----- Grid utility ----- */
.hk-grid {
	display: grid;
	gap: var(--hk-space-5);
}
.hk-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hk-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 768px) {
	.hk-grid--2,
	.hk-grid--3,
	.hk-grid--4 {
		grid-template-columns: 1fr;
	}
}

/* ----- Skip link ----- */
.hk-skip-link:focus {
	background: var(--hk-color-gold);
	color: #FFF;
	padding: var(--hk-space-3) var(--hk-space-5);
	border-radius: var(--hk-radius);
	box-shadow: var(--hk-shadow);
}