/* =========================================================================
   muemo — Design Tokens & Component Stylesheet
   -------------------------------------------------------------------------
   静かで上質・余白の広い「鑑賞記録帳」UI。写真を使わず、色・字・余白で構成。
   実装: SvelteKit + 素のCSS。インラインstyleは使わず、ここで定義した
   CSS変数と共通クラスを参照する。

   使い方（SvelteKit）:
     - 変数（:root）        → app.html / +layout.svelte でグローバル読み込み
     - 基本プリミティブ      → そのまま共通クラスとして使うか、各 .svelte の
                              <style> に切り出す（値は var(--…) を参照）
     - コンポーネント単位の  → 対応する *.svelte の <style> へ移植
       レイアウトクラス
   =========================================================================*/

/* ============================ 1. TOKENS (variables) ====================== */
:root {
	/* --- Color: surfaces --- */
	--c-paper: #faf8f3; /* 画面背景 / paper */
	--c-sunk: #f2efe7; /* 沈面・薄い面 / sunk */
	--c-surface: #ffffff; /* カード面 / surface */

	/* --- Color: ink (text) --- */
	--c-ink: #1b2942; /* 文字・強 / 見出し・主ボタン */
	--c-ink-2: #4a5060; /* 文字・中 / 本文 */
	--c-ink-3: #8a8f9c; /* 文字・弱 / 補助・プレースホルダ */
	--c-ink-faint: #b5b3ac; /* さらに弱い / カウンタ等 */
	--c-read: #2b3242; /* 長文メモ本文（やや濃い） */

	/* --- Color: lines --- */
	--c-line: #e7e9ee; /* 区切り線 */
	--c-line-soft: #f0eee9; /* カード内の薄い罫 */
	--c-line-strong: #d7dae2; /* 入力枠など強い罫 */

	/* --- Color: accent (真鍮 / brass) --- */
	--c-accent: #936f3f; /* アクセント・eyebrow・リンク */
	--c-accent-ink: #6e5330; /* タグ文字 */
	--c-accent-bg: #f2ebdd; /* タグ背景 */

	/* --- Color: visibility (公開 / 非公開) --- */
	--c-public: #2e6b4f;
	--c-public-bg: #e7f0ea;
	--c-public-border: #c9dccf;
	--c-private: #5c616e;
	--c-private-bg: #eceae4;
	--c-private-border: #dad7cf;

	/* --- Color: status --- */
	--c-warning: #946a22;
	--c-warning-bg: #f4ecdb;
	--c-error: #a33a33;
	--c-error-border: #e6cfcc;

	/* --- Typography --- */
	--font-jp: 'Noto Sans JP', system-ui, sans-serif; /* 日本語UI・本文 */
	--font-display: 'Plus Jakarta Sans', var(--font-jp); /* 欧文・数字・ロゴ */
	--font-mono: ui-monospace, 'SFMono-Regular', Menlo, monospace; /* ラベル・@handle */

	--fw-regular: 400;
	--fw-medium: 500;
	--fw-bold: 700;
	--fw-black: 800; /* 数字・ロゴのみ */

	--fs-h1: 26px;
	--lh-h1: 1.35; /* desktop は 32 (--fs-h1-lg) */
	--fs-h1-lg: 32px;
	--fs-h2: 20px;
	--lh-h2: 1.4;
	--fs-title: 17px; /* カード見出し */
	--fs-body: 15px;
	--lh-body: 1.8; /* 長文メモは 1.9〜2.0 */
	--fs-sm: 13px;
	--lh-sm: 1.7;
	--fs-xs: 12px;
	--fs-eyebrow: 11px;
	--ls-eyebrow: 0.1em;

	/* --- Spacing (4 / 8 grid) --- */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-6: 24px;
	--sp-8: 32px;
	--sp-12: 48px;
	--sp-16: 64px;

	/* --- Radius --- */
	--r-sm: 6px; /* タグ */
	--r-md: 10px; /* ボタン・入力 */
	--r-lg: 14px; /* カード */
	--r-pill: 999px; /* バッジ・チップ */

	/* --- Shadow --- */
	--sh-sm: 0 1px 2px rgba(27, 41, 66, 0.05);
	--sh-md: 0 6px 20px rgba(27, 41, 66, 0.07);
	--sh-lg: 0 14px 36px rgba(27, 41, 66, 0.1);
	--sh-cta: 0 6px 20px rgba(27, 41, 66, 0.18); /* 主ボタンの浮き */

	/* --- Controls --- */
	--tap-min: 44px; /* 最小タップ領域 */
	--h-field: 48px; /* 入力・検索の標準高 (desktop 50-52) */
	--h-cta: 56px; /* 主CTA */

	/* --- Layout --- */
	--container: 1080px; /* コンテンツ最大幅 */
	--reading: 620px; /* 本文の読みやすい最大幅 */
	--form: 560px; /* フォーム幅 */
	--header-h: 66px; /* desktop ヘッダー高 */
	--gutter: 32px; /* desktop 左右余白 (tablet 24 / mobile 18) */

	/* --- Breakpoints (参考) --- */
	--bp-tablet: 640px;
	--bp-desktop: 1024px;
}

/* ============================ 2. BASE / RESET ============================ */
*,
*::before,
*::after {
	box-sizing: border-box;
}
html,
body {
	margin: 0;
	padding: 0;
}
body {
	font-family: var(--font-jp);
	color: var(--c-ink);
	background: var(--c-paper);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
}
a {
	color: var(--c-accent);
	text-decoration: none;
}
.u-display {
	font-family: var(--font-display);
	font-weight: var(--fw-black);
	letter-spacing: -0.045em;
}
.u-num {
	font-family: var(--font-display);
	font-weight: var(--fw-black);
}

/* ============================ 3. PRIMITIVES ============================== */

/* Eyebrow / small mono labels */
.eyebrow {
	font-family: var(--font-mono);
	font-size: var(--fs-eyebrow);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--c-accent);
}
.field-label {
	display: block;
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-ink-3);
	margin-bottom: var(--sp-2);
}

/* Card */
.card {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-sm);
}

/* --- Button --- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	height: var(--h-field);
	padding: 0 22px;
	border-radius: var(--r-md);
	font-family: var(--font-jp);
	font-weight: var(--fw-bold);
	font-size: var(--fs-body);
	cursor: pointer;
	border: 0;
	transition: transform 0.05s ease;
}
.btn:active {
	transform: translateY(1px);
}
.btn svg {
	width: 18px;
	height: 18px;
}
.btn--primary {
	background: var(--c-ink);
	color: #fff;
	box-shadow: var(--sh-cta);
}
.btn--secondary {
	background: var(--c-surface);
	color: var(--c-ink);
	border: 1px solid var(--c-line-strong);
}
.btn--text {
	background: transparent;
	color: var(--c-accent-ink);
	padding: 0 6px;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.btn--danger {
	background: var(--c-surface);
	color: var(--c-error);
	border: 1px solid var(--c-error-border);
}
.btn--block {
	width: 100%;
}
.btn--cta {
	height: var(--h-cta);
	font-size: 16px;
	border-radius: var(--r-lg);
}

/* --- Visibility badge --- */
.badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	line-height: 1;
	border-radius: var(--r-pill);
	padding: 5px 12px 5px 9px;
	border: 1px solid transparent;
}
.badge svg {
	width: 13px;
	height: 13px;
}
.badge--public {
	color: var(--c-public);
	background: var(--c-public-bg);
	border-color: var(--c-public-border);
}
.badge--private {
	color: var(--c-private);
	background: var(--c-private-bg);
	border-color: var(--c-private-border);
}
.badge--sm {
	font-size: 11px;
	gap: 4px;
	padding: 3px 8px 3px 6px;
}
.badge--sm svg {
	width: 11px;
	height: 11px;
}

/* --- Tag --- */
.tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--fs-sm);
	line-height: 1;
	color: var(--c-accent-ink);
	background: var(--c-accent-bg);
	border-radius: var(--r-sm);
	padding: 5px 11px;
}
.tag button {
	display: inline-flex;
	border: 0;
	background: none;
	padding: 0;
	color: inherit;
	cursor: pointer;
}
.tag button svg {
	width: 12px;
	height: 12px;
}

/* --- Fields (text / search / date / textarea) --- */
.field {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: var(--h-field);
	padding: 0 14px;
	background: var(--c-surface);
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-md);
	font-family: var(--font-jp);
	font-size: 14.5px;
	color: var(--c-ink);
}
.field:focus-within {
	border: 2px solid var(--c-ink);
}
.field input,
.field textarea {
	flex: 1;
	border: 0;
	outline: 0;
	background: none;
	font: inherit;
	color: inherit;
	padding: 0;
}
.field input::placeholder,
.field textarea::placeholder {
	color: var(--c-ink-3);
}
.field svg {
	width: 19px;
	height: 19px;
	flex: none;
	color: var(--c-ink-3);
}
.field--search {
	border-radius: var(--r-md);
}
.field--search.is-large {
	height: 52px;
	max-width: 560px;
	font-size: 15px;
	padding: 0 18px;
}
.field--mono input,
.field--mono .field__prefix {
	font-family: var(--font-mono);
}
.field__prefix {
	color: var(--c-ink-3);
}
.field--date {
	justify-content: space-between;
	height: 50px;
}
.field--textarea {
	display: block;
	min-height: 104px;
	padding: 14px;
	line-height: var(--lh-body);
}
.field--readonly {
	background: var(--c-sunk);
	border-color: var(--c-line);
	color: var(--c-ink-2);
}

.field-hint {
	font-size: var(--fs-xs);
	color: var(--c-ink-3);
	line-height: 1.7;
	margin-top: var(--sp-2);
}
.field-hint--ok {
	color: var(--c-public);
	font-weight: var(--fw-bold);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.field-counter {
	font-size: 11px;
	color: var(--c-ink-faint);
}

/* --- Segmented toggle (公開/非公開) --- */
.toggle {
	display: flex;
	gap: 8px;
	background: #efede7;
	border-radius: var(--r-md);
	padding: 4px;
}
.toggle__opt {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 46px;
	border: 0;
	border-radius: 9px;
	background: none;
	font-family: var(--font-jp);
	font-weight: var(--fw-medium);
	font-size: 14.5px;
	color: var(--c-ink-3);
	cursor: pointer;
}
.toggle__opt svg {
	width: 17px;
	height: 17px;
}
.toggle__opt[aria-pressed='true'] {
	background: var(--c-public-bg);
	color: var(--c-public);
	border: 1.5px solid var(--c-public);
	font-weight: var(--fw-bold);
}
.toggle__opt.is-private[aria-pressed='true'] {
	background: var(--c-private-bg);
	color: var(--c-private);
	border-color: var(--c-private);
}

/* ============================ 4. LAYOUT ================================= */
.app-bg {
	background: var(--c-paper);
}
.container {
	max-width: var(--container);
	margin: 0 auto;
}
.page-pad {
	padding: 40px var(--gutter) 56px;
}
.reading {
	max-width: var(--reading);
}

/* App header (mobile + desktop) */
.app-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--header-h);
	padding: 0 var(--gutter);
	background: var(--c-paper);
	border-bottom: 1px solid var(--c-line);
}
.app-header--mobile {
	height: 56px;
	padding: 8px 18px 14px;
}
.app-header__brand {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	line-height: 1;
}
.app-header__brand svg {
	width: 24px;
	height: 24px;
}
.app-header__brand .wordmark {
	font-family: var(--font-display);
	font-weight: var(--fw-black);
	letter-spacing: -0.045em;
	font-size: 22px;
	color: var(--c-ink);
}
.app-header--mobile .app-header__brand svg {
	width: 22px;
	height: 22px;
}
.app-header--mobile .app-header__brand .wordmark {
	font-size: 20px;
}
.app-header__nav {
	display: inline-flex;
	align-items: center;
	gap: 22px;
}
.nav-link {
	font-size: 14px;
	font-weight: var(--fw-bold);
	color: var(--c-ink);
}
.user-pill {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 40px;
	padding: 0 6px 0 14px;
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-pill);
}
.user-pill .handle {
	font-family: var(--font-mono);
	font-size: 12.5px;
	color: var(--c-ink-2);
}
.avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: var(--r-pill);
	background: var(--c-sunk);
	color: var(--c-ink);
}
.avatar--lg {
	width: 40px;
	height: 40px;
	border: 1px solid var(--c-line-strong);
	background: var(--c-surface);
}
.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--r-pill);
	border: 1px solid var(--c-line-strong);
	background: var(--c-surface);
	color: var(--c-ink);
	cursor: pointer;
}

/* Filter bar (mobile chips) */
.filter-bar {
	display: flex;
	gap: 8px;
	overflow-x: auto;
}
.chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 34px;
	padding: 0 12px;
	border-radius: var(--r-pill);
	background: var(--c-surface);
	border: 1px solid var(--c-line-strong);
	color: var(--c-ink-2);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	white-space: nowrap;
	cursor: pointer;
}
.chip svg {
	width: 14px;
	height: 14px;
}
.chip--active {
	background: var(--c-ink);
	border-color: var(--c-ink);
	color: #fff;
	font-weight: var(--fw-bold);
}

/* Museum card */
.museum-card {
	display: block;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	padding: 16px 17px;
	box-shadow: var(--sh-sm);
	color: inherit;
}
.museum-card__cat {
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-accent);
	margin-bottom: 7px;
}
.museum-card__name {
	font-weight: var(--fw-bold);
	font-size: var(--fs-title);
	letter-spacing: -0.005em;
	line-height: 1.4;
}
.museum-card__kana {
	font-size: var(--fs-xs);
	color: var(--c-ink-3);
	margin-top: 2px;
}
.museum-card__loc {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--c-ink-2);
	font-size: var(--fs-sm);
	margin-top: 11px;
}
.museum-card__loc svg {
	width: 15px;
	height: 15px;
	color: var(--c-ink-3);
}
.museum-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 13px;
	padding-top: 13px;
	border-top: 1px solid var(--c-line-soft);
}
.museum-card__count {
	font-size: var(--fs-xs);
	color: var(--c-ink-3);
}
.museum-card__count strong {
	color: var(--c-ink);
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: 13.5px;
}

/* Memo card (compact) */
.memo-card {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: 12px;
	padding: 15px 16px;
}
.memo-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}
.memo-card__handle {
	font-family: var(--font-mono);
	font-size: 12.5px;
	color: var(--c-accent);
}
.memo-card__date {
	font-size: 11.5px;
	color: var(--c-ink-3);
	margin-bottom: 8px;
}
.memo-card__body {
	font-size: 14px;
	color: #3a4150;
	line-height: var(--lh-body);
	margin: 0;
}
.memo-card__tags {
	display: flex;
	gap: 6px;
	margin-top: 11px;
	flex-wrap: wrap;
}

/* Checkin history item */
.checkin-item {
	display: flex;
	align-items: center;
	gap: 13px;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: 12px;
	padding: 13px 15px;
}
.checkin-item__date {
	text-align: center;
	flex: none;
	width: 36px;
}
.checkin-item__day {
	font-family: var(--font-display);
	font-weight: var(--fw-black);
	font-size: var(--fs-title);
	color: var(--c-ink);
	line-height: 1;
}
.checkin-item__wd {
	font-size: 10px;
	color: var(--c-ink-3);
	margin-top: 2px;
}
.checkin-item__rule {
	width: 1px;
	height: 30px;
	background: var(--c-line-soft);
	flex: none;
}
.checkin-item__main {
	flex: 1;
	min-width: 0;
}
.checkin-item__name {
	font-weight: var(--fw-bold);
	font-size: 14.5px;
	line-height: 1.4;
}
.checkin-item__sub {
	font-size: 11.5px;
	color: var(--c-ink-3);
	margin-top: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Stat panel */
.stat-panel {
	display: flex;
	background: var(--c-sunk);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	padding: 16px;
}
.stat {
	flex: 1;
	text-align: center;
}
.stat__num {
	font-family: var(--font-display);
	font-weight: var(--fw-black);
	font-size: 22px;
	color: var(--c-ink);
	line-height: 1;
}
.stat__label {
	font-size: 11.5px;
	color: var(--c-ink-3);
	margin-top: 5px;
}
.stat-sep {
	width: 1px;
	background: var(--c-line-strong);
}

/* Section heading */
.section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}
.section-head__title {
	font-weight: var(--fw-bold);
	font-size: 18px;
}
.section-head__meta {
	font-size: 12.5px;
	color: var(--c-ink-3);
}
.month-label {
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.08em;
	color: var(--c-ink-faint);
}

/* Headings & meta lists */
h1,
.h1 {
	font-weight: var(--fw-bold);
	font-size: var(--fs-h1);
	letter-spacing: -0.01em;
	line-height: var(--lh-h1);
	margin: 0;
}
h2,
.h2 {
	font-weight: var(--fw-bold);
	font-size: var(--fs-h2);
	margin: 0;
}
.meta-row {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 13.5px;
	color: var(--c-ink-2);
	line-height: 1.6;
}
.meta-row svg {
	width: 16px;
	height: 16px;
	flex: none;
	margin-top: 2px;
	color: var(--c-ink-3);
}
.meta-row--link {
	color: var(--c-accent);
}
.meta-row--link svg {
	color: var(--c-accent);
}
.prose {
	font-size: var(--fs-body);
	color: var(--c-ink-2);
	line-height: var(--lh-body);
}
.prose--read {
	font-size: 16.5px;
	color: var(--c-read);
	line-height: 2;
}
.divider {
	height: 1px;
	background: var(--c-line);
}
.divider--soft {
	background: var(--c-line-soft);
}

/* Phone / browser preview chrome (確認用のみ。実装には不要) */
.device-phone {
	width: 392px;
	border-radius: 40px;
	border: 1px solid var(--c-line-strong);
	background: var(--c-paper);
	box-shadow: var(--sh-lg);
	overflow: hidden;
}
.device-statusbar {
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 26px;
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: 13px;
	color: var(--c-ink);
}
.device-browser {
	border-radius: var(--r-lg);
	border: 1px solid var(--c-line-strong);
	background: var(--c-surface);
	box-shadow: var(--sh-lg);
	overflow: hidden;
}
.device-chrome {
	height: 46px;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 0 18px;
	background: var(--c-sunk);
	border-bottom: 1px solid var(--c-line);
}
.device-dots {
	display: flex;
	gap: 7px;
}
.device-dots span {
	width: 11px;
	height: 11px;
	border-radius: var(--r-pill);
	background: #d2cfc6;
}
.device-url {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--c-ink-3);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: 7px;
	padding: 5px 18px;
	min-width: 320px;
	text-align: center;
}