/**
 * Litlink Theme - メインスタイルシート
 *
 * デザイン方針:
 * - https://tkstudio.jp/ を参考にした、シンプルで温かみのあるデザイン
 * - アクセントカラー: 黄緑系
 * - 文字色: 完全な黒ではなく、グレーが入った黒（#3a3a3a系）
 * - フォント: 細めの角ゴシック体（丸ゴシックではなく角ゴシック、font-weightは抑えめ）
 * - カード/ボタン: 角丸多め、影は薄く柔らかい
 * - プロフィール画像: 丸型アイコン表示領域
 * - SNSカテゴリ: 横並び3カラムのアイコン+ラベル形式（専用レイアウト）
 */

:root {
	/* ==== カラー ==== */
	--color-accent: #8fd14f; /* 黄緑系アクセント */
	--color-accent-dark: #6fae38; /* ホバー等の濃い黄緑 */
	--color-accent-soft: #eef8e3; /* 薄い黄緑背景 */
	--color-text: #3a3a3a; /* グレーが入った黒 */
	--color-text-sub: #6b6b6b;
	--color-bg: #fdfdfb; /* オフホワイトの背景 */
	--color-card-bg: #ffffff;
	--color-border: #eaeae6;

	/* ==== 角丸 ==== */
	--radius-sm: 10px;
	--radius-md: 16px;
	--radius-full: 999px;

	/* ==== シャドウ（薄く柔らかい） ==== */
	--shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.06);
	--shadow-soft-hover: 0 6px 20px rgba(0, 0, 0, 0.09);

	/* ==== フォント ====
	   Webフォント配信サービス（追加の月額サービス）を使わず、OS標準の
	   細めの角ゴシック系フォントで代替する。游ゴシックW3/ヒラギノ角ゴシックW3など
	   細字ウェイトを優先的に指定し、font-weightも全体的に抑えめにする。 */
	--font-family-base: "YuGothic", "游ゴシック体", "Yu Gothic Medium", "Yu Gothic",
		"Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック ProN W3", "Hiragino Sans",
		"メイリオ", Meiryo, sans-serif;
	--font-weight-regular: 400;
	--font-weight-medium: 500;

	/* ==== 余白 ==== */
	--spacing-unit: 8px;
}

* {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--font-family-base);
	color: var(--color-text);
	background-color: var(--color-bg);
	line-height: 1.7;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	max-width: 100%;
	display: block;
}

/* ==============================
   レイアウト全体
============================== */
.litlink-page {
	max-width: 480px;
	margin: 0 auto;
	padding: 40px 20px 64px;
}

/* ==============================
   プロフィールヘッダー
============================== */
.litlink-profile {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-bottom: 32px;
}

.litlink-profile__avatar {
	width: 96px;
	height: 96px;
	border-radius: var(--radius-full);
	overflow: hidden;
	background-color: var(--color-accent-soft);
	border: 3px solid #ffffff;
	box-shadow: var(--shadow-soft);
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.litlink-profile__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--radius-full);
}

.litlink-profile__avatar--placeholder {
	color: var(--color-accent-dark);
	font-size: 32px;
}

.litlink-profile__name {
	font-size: 20px;
	font-weight: 500;
	margin: 0 0 8px;
	color: var(--color-text);
}

.litlink-profile__bio {
	font-size: 14px;
	font-weight: 400;
	color: var(--color-text-sub);
	margin: 0;
	white-space: pre-line;
}

/* ==============================
   ピン留めリンク（常に最上部）
============================== */
.litlink-pinned {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 16px 20px;
	margin-bottom: 28px;
	background-color: var(--color-accent);
	color: #ffffff;
	font-weight: 500;
	font-size: 15px;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-soft);
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.litlink-pinned:hover {
	background-color: var(--color-accent-dark);
	box-shadow: var(--shadow-soft-hover);
	transform: translateY(-1px);
}

/* ==============================
   カテゴリセクション
============================== */
.litlink-category {
	margin-bottom: 28px;
}

.litlink-category__title {
	font-size: 14px;
	font-weight: 500;
	color: var(--color-accent-dark);
	margin: 0 0 12px;
	padding-left: 4px;
	letter-spacing: 0.02em;
}

.litlink-links {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* ==============================
   通常リンクボタン
============================== */
.litlink-link-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 14px 20px;
	background-color: var(--color-card-bg);
	color: var(--color-text);
	font-size: 15px;
	font-weight: 400;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-soft);
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.litlink-link-button:hover {
	border-color: var(--color-accent);
	box-shadow: var(--shadow-soft-hover);
	transform: translateY(-1px);
}

/* ==============================
   SNSリンク（横並び3カラム アイコン+ラベル）
   Instagram / YouTube / TikTok 等、SNS専用のカテゴリレイアウト。
   通常リンクの縦積みではなく、アイコン+短いラベルで縦の高さを抑える。
============================== */
.litlink-sns-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.litlink-sns-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 14px 8px;
	background-color: var(--color-card-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-soft);
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.litlink-sns-item:hover {
	border-color: var(--color-accent);
	box-shadow: var(--shadow-soft-hover);
	transform: translateY(-1px);
}

.litlink-sns-item__icon {
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-accent-dark);
}

.litlink-sns-item__icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.litlink-sns-item__label {
	font-size: 12px;
	font-weight: 400;
	color: var(--color-text-sub);
}

/* ==============================
   ECリンクカード
============================== */
.litlink-ec-card {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 12px;
	background-color: var(--color-card-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-soft);
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.litlink-ec-card:hover {
	border-color: var(--color-accent);
	box-shadow: var(--shadow-soft-hover);
	transform: translateY(-1px);
}

.litlink-ec-card__image {
	width: 64px;
	height: 64px;
	flex-shrink: 0;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background-color: var(--color-accent-soft);
}

.litlink-ec-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.litlink-ec-card__body {
	flex: 1;
	min-width: 0;
}

.litlink-ec-card__title {
	font-size: 14px;
	font-weight: 400;
	margin: 0 0 4px;
	color: var(--color-text);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.litlink-ec-card__price {
	font-size: 14px;
	font-weight: 500;
	color: var(--color-accent-dark);
	margin: 0;
}

/* ==============================
   ECカード横並びグリッド（link_type = ec_grid）
============================== */
.litlink-ec-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

@media (min-width: 420px) {
	.litlink-ec-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.litlink-ec-grid__item {
	display: flex;
	flex-direction: column;
}

.litlink-ec-card--grid {
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	height: 100%;
}

.litlink-ec-card--grid .litlink-ec-card__image {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-sm);
}

.litlink-ec-card--grid .litlink-ec-card__title {
	font-size: 13px;
}

/* ==============================
   横長バナーリンク（link_type = banner）
   ECカード（.litlink-ec-card）と同じ「64px×64px固定の画像枠(左)＋
   タイトルテキスト(右)」の横並びレイアウト。
   画像が無い/取得失敗の場合は画像枠に薄黄緑（--color-accent-soft）の
   背景色のみが表示され、画像あり/なしでカードの高さ・余白が揃う。
============================== */
.litlink-banner-link {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 12px;
}

.litlink-banner-link__image {
	width: 64px;
	height: 64px;
	flex-shrink: 0;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background-color: var(--color-accent-soft);
}

.litlink-banner-link__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.litlink-banner-link__body {
	flex: 1;
	min-width: 0;
}

.litlink-banner-link__title {
	font-size: 14px;
	font-weight: 400;
	margin: 0;
	color: var(--color-text);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* ==============================
   カード共通ラッパー（.litlink-card）
   通常ボタン/ECカード/バナーいずれの表示形式でも、remark_text（備考）が
   必ずカードの内側下部に収まるよう、角丸・シャドウ・境界線をこの外枠が担う。
   内側の個別要素（.litlink-link-button 等）は二重の枠にならないよう
   自身のボーダー・シャドウ・角丸をリセットする。
============================== */
.litlink-card {
	display: flex;
	flex-direction: column;
	background-color: var(--color-card-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-soft);
	overflow: hidden;
	transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.litlink-card:hover {
	border-color: var(--color-accent);
	box-shadow: var(--shadow-soft-hover);
	transform: translateY(-1px);
}

.litlink-card > .litlink-link-button,
.litlink-card > .litlink-ec-card,
.litlink-card > .litlink-banner-link {
	border: none;
	box-shadow: none;
	border-radius: 0;
}

.litlink-card > .litlink-link-button:hover,
.litlink-card > .litlink-ec-card:hover,
.litlink-card > .litlink-banner-link:hover {
	border-color: transparent;
	box-shadow: none;
	transform: none;
}

.litlink-card--grid {
	height: 100%;
}

/* ==============================
   備考/説明文（クーポンコード等）
   .litlink-card の内側下部に padding 込みで収まるようにする
============================== */
.litlink-remark {
	font-size: 12px;
	font-weight: 400;
	color: var(--color-text-sub);
	margin: 0;
	padding: 8px 16px 12px;
	line-height: 1.5;
}

/* ==============================
   カテゴリタブ（一覧 / フォルダ別）
============================== */
.litlink-category-tabs {
	width: 100%;
}

.litlink-tab-nav {
	display: flex;
	gap: 6px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--color-border);
}

.litlink-tab-nav__item {
	appearance: none;
	background: none;
	flex: 1;
	border: none;
	cursor: pointer;
	padding: 14px 22px;
	font-family: var(--font-family-base);
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	color: var(--color-text-sub);
	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
	border-bottom: 3px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.litlink-tab-nav__item.is-active {
	color: var(--color-accent-dark);
	font-weight: 700;
	background-color: var(--color-accent-soft);
	border-bottom-color: var(--color-accent);
}

.litlink-tab-panel {
	display: none;
}

.litlink-tab-panel.is-active {
	display: block;
}

/* ==============================
   タグチップ（フォルダ別タブ内）
============================== */
.litlink-tag-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

.litlink-tag-chip {
	appearance: none;
	cursor: pointer;
	padding: 6px 14px;
	font-family: var(--font-family-base);
	font-size: 12px;
	font-weight: 400;
	color: var(--color-text-sub);
	background-color: var(--color-card-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.litlink-tag-chip.is-selected {
	color: #ffffff;
	background-color: var(--color-accent);
	border-color: var(--color-accent);
}

.litlink-tag-empty {
	font-size: 13px;
	color: var(--color-text-sub);
}

.litlink-tab-item {
	display: block;
}

.litlink-tab-item.is-hidden-by-tag-filter {
	display: none;
}

/* ==============================
   フッター
============================== */
.litlink-footer {
	text-align: center;
	margin-top: 40px;
	font-size: 12px;
	color: var(--color-text-sub);
}

/* ==============================
   デザインテーマ: カード型（body.theme-card）
============================== */
body.theme-card .litlink-link-button,
body.theme-card .litlink-ec-card {
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-soft-hover);
}

body.theme-card .litlink-category {
	background-color: var(--color-accent-soft);
	border-radius: var(--radius-md);
	padding: 16px;
}

/* ==============================
   デザインテーマ: ダーク（body.theme-dark）
============================== */
body.theme-dark {
	--color-text: #f0f0ee;
	--color-text-sub: #b7b7b3;
	--color-bg: #232522;
	--color-card-bg: #2f322e;
	--color-border: #3c3f3a;
	--color-accent-soft: #3a4a2c;
}

body.theme-dark .litlink-profile__avatar {
	border-color: var(--color-card-bg);
}

/* ==============================
   レスポンシブ
============================== */
@media (min-width: 600px) {
	.litlink-page {
		padding-top: 56px;
	}
}