/* ═══════════════════════════════════════════════════════
   JAMHUB — Common Design System
   Neural DSP Edition — Pure Black × Electric Cyan
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Inter:ital,wght@0,300;0,400;0,500;0,600;1,300&display=swap');

/* ── Design tokens ── */
:root {
	/* Base — pure black, no warmth */
	--bg: #000000;
	--surface-1: #0d0d0d;
	--surface-2: #141414;
	--surface-3: #1a1a1a;
	--surface-4: #222222;

	/* Borders — cool white hairlines */
	--border-hi: #ffffff82;
	--border-md: rgb(255 255 255 / 86%);
	--border-lo: rgb(255 255 255 / 82%);

	/* Electric Cyan — primary accent */
	--accent: #00e5ff;
	--accent-dim: rgba(0, 229, 255, 0.12);
	--accent-glow: rgba(0, 229, 255, 60%);
	--accent-subtle: rgba(0, 229, 255, 0.06);

	/* Danger */
	--accent2: #ff3d3d;
	--accent2-dim: rgba(255, 61, 61, 0.12);

	/* Violet — secondary accent (improv, scale dots) */
	--accent3: #7b61ff;
	--accent3-dim: rgba(123, 97, 255, 0.12);
	--accent3-glow: rgba(123, 97, 255, 60%);

	/* Magenta — chord-tone accent */
	--accent4: #ff2e88;
	--accent4-dim: rgba(255, 46, 136, 0.12);
	--accent4-glow: rgba(255, 46, 136, 60%);

	/* Text */
	--text-hi: #ffffff;
	--text-md: rgba(255, 255, 255, 0.7);
	--text-lo: rgba(255, 255, 255, 0.5);
	--text-placeholder: rgba(255, 255, 255, 0.5);

	/* Fretboard — dark rosewood precision */
	--nut: #c8b888;
	--string: rgba(255, 255, 255, 0.45);
	--fret: rgba(255, 255, 255, 0.18);
	--inlay: rgba(255, 255, 255, 0.04);
	--fret-bg: #080808;
	--chord-dot: #ff2e88;
	--scale-dot: #7b61ff;
	/* 「両方(コード+スケール重複／コードトーン表示)」用のドット色。
	   --accentは通常テキスト用に用途ごとテーマで濃淡が変わるため、
	   常に明るく視認性の高い色を維持したいドット背景には流用しない。 */
	--both-dot: #00e5ff;
	--both-dot-glow: rgba(0, 229, 255, .4);
	--beat-flash: rgba(0, 229, 255, 0.10);

	/* Spacing */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;

	/* Radius — sharp, precision corners */
	--radius-sm: 2px;
	--radius-md: 4px;
	--radius-lg: 6px;

	/* Header height */
	--header-h: 52px;

	/* Dividers */
	--divider: rgba(255, 255, 255, 0.07);
	--divider-strong: rgba(255, 255, 255, 0.14);

	/* Header chrome */
	--header-bg: rgba(0, 0, 0, 0.94);
	--header-border: rgba(0, 229, 255, 0.18);
	--header-scanline: rgba(0, 229, 255, 0.025);

	/* アクセント色の上に乗る文字色（明るいアクセント=黒文字、暗いアクセント=白文字） */
	--on-accent: #000000;
}

/* ── ライトテーマ — Ivory × Dark Gold ──
   ダークテーマと雰囲気（アクセントの色相）は揃えつつ、
   明るい室内でも視認性が落ちないようコントラストを確保した配色。 */
:root[data-theme="light"] {
	/* Base — warm ivory, no harsh white */
	--bg: #f7f3ea;
	--surface-1: #ffffff;
	--surface-2: #f1ebdd;
	--surface-3: #e9e1cd;
	--surface-4: #ded2b4;

	/* Borders — warm dark hairlines */
	--border-hi: rgba(40, 32, 16, 0.42);
	--border-md: rgba(40, 32, 16, 0.22);
	--border-lo: rgba(40, 32, 16, 0.12);

	/* Electric Cyan → Deep Teal（白背景でも視認できる濃さに） */
	--accent: #00768f;
	--accent-dim: rgba(0, 118, 143, 0.12);
	--accent-glow: rgba(0, 118, 143, 0.45);
	--accent-subtle: rgba(0, 118, 143, 0.07);

	/* Danger */
	--accent2: #b1342f;
	--accent2-dim: rgba(177, 52, 47, 0.12);

	/* Violet — secondary accent */
	--accent3: #5b41c4;
	--accent3-dim: rgba(91, 65, 196, 0.12);
	--accent3-glow: rgba(91, 65, 196, 0.45);

	/* Magenta — chord-tone accent */
	--accent4: #b41f68;
	--accent4-dim: rgba(180, 31, 104, 0.12);
	--accent4-glow: rgba(180, 31, 104, 0.45);

	/* Text — warm near-black */
	--text-hi: #211a10;
	--text-md: rgba(33, 26, 16, 0.74);
	--text-lo: rgba(33, 26, 16, 0.54);
	--text-placeholder: rgba(33, 26, 16, 0.42);

	/* Fretboard — dark gold precision on ivory */
	--nut: #8a6a2e;
	--string: rgba(33, 26, 16, 0.5);
	--fret: rgba(33, 26, 16, 0.22);
	--inlay: rgba(33, 26, 16, 0.05);
	--fret-bg: #efe6d2;
	--chord-dot: #b41f68;
	--scale-dot: #5b41c4;
	/* コードトーン/重複表示は--accentの落ち着いた濃淡ではなく、
	   白背景でもはっきり視認できる鮮やかなシアン系の色を使う */
	--both-dot: #00a7c4;
	--both-dot-glow: rgba(0, 167, 196, .4);
	--beat-flash: rgba(0, 118, 143, 0.14);

	/* Dividers */
	--divider: rgba(33, 26, 16, 0.10);
	--divider-strong: rgba(33, 26, 16, 0.18);

	/* Header chrome */
	--header-bg: rgba(255, 252, 244, 0.92);
	--header-border: rgba(0, 118, 143, 0.25);
	--header-scanline: rgba(0, 118, 143, 0.035);

	/* 濃いアクセント色の上には白文字 */
	--on-accent: #ffffff;
}

/* ライトテーマ専用: ロゴのグロー効果は暗い背景でこそ映える表現のため、
   白/アイボリー背景ではぼやけて安っぽく見えてしまう。
   その代わりに、白のハイライト＋濃色の落ち影で立体感を出す
   エンボス風の表現に切り替える。 */
:root[data-theme="light"] header h1>a,
:root[data-theme="light"] .logo-wrap,
:root[data-theme="light"] .logo {
	text-shadow:
		0 1px 0 rgba(255, 255, 255, .8),
		0 2px 3px rgba(33, 26, 16, .18);
}

:root[data-theme="light"] header h1>a:hover,
:root[data-theme="light"] .logo-wrap:hover {
	text-shadow:
		0 1px 0 rgba(255, 255, 255, .9),
		0 2px 5px rgba(33, 26, 16, .28);
}

/* ── Reset ── */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Inter', sans-serif;
	background: var(--bg);
	color: var(--text-hi);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	font-weight: 400;
	transition: background-color .25s ease, color .25s ease;
}

/* ══════════════════════════════════════
   HEADER
   ══════════════════════════════════════ */
header {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: 0 var(--space-6);
	height: var(--header-h);
	background: var(--header-bg);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom: 1px solid var(--header-border);
	position: sticky;
	top: 0;
	z-index: 200;
	flex-shrink: 0;
}

/* Scanline texture — Neural DSP signature */
header::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: repeating-linear-gradient(90deg,
			transparent 0, transparent 47px,
			var(--header-scanline) 47px, var(--header-scanline) 48px);
}

/* Logo */
.logo-wrap {
	display: flex;
	flex-direction: column;
	line-height: 1;
	text-decoration: none;
	position: relative;
	z-index: 1;
	flex-shrink: 0;
}

header h1 {
	line-height: 1;
	flex-shrink: 0;
}

header h1>a,
.logo-wrap {
	font-family: 'Orbitron', monospace;
	font-weight: 900;
	font-size: 17px;
	letter-spacing: .18em;
	color: var(--accent);
	text-decoration: none;
	text-shadow: 0 0 20px var(--accent-glow);
	position: relative;
	z-index: 1;
	transition: text-shadow .2s;
	display: block;
}

header h1>a:hover,
.logo-wrap:hover {
	text-shadow: 0 0 32px var(--accent-glow), 0 0 60px rgba(0, 229, 255, 0.15);
}

.logo {
	font-family: 'Orbitron', monospace;
	font-weight: 900;
	font-size: 17px;
	letter-spacing: .18em;
	color: var(--accent);
	text-shadow: 0 0 20px var(--accent-glow);
}

.logo-sub {
	font-size: 8px;
	letter-spacing: .32em;
	text-transform: uppercase;
	color: var(--text-lo);
	margin-top: 3px;
}

/* Nav */
nav {
	display: flex;
	gap: 2px;
	margin-left: var(--space-4);
	position: relative;
	z-index: 1;
}

nav a {
	color: var(--text-lo);
	text-decoration: none;
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 6px 13px;
	border-bottom: 1.5px solid transparent;
	transition: color .15s, border-color .15s;
	position: relative;
}

nav a:hover {
	color: var(--text-hi);
	border-bottom-color: rgba(0, 229, 255, 0.45);
}

nav a.active {
	color: var(--accent);
	border-bottom-color: var(--accent);
}

/* Lang button */
.lang-btn {
	background: var(--surface-2);
	border: 1px solid var(--border-md);
	color: var(--text-lo);
	font-family: 'Orbitron', monospace;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .12em;
	padding: 4px 10px;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: all .15s;
	position: relative;
	z-index: 1;
}

.lang-btn:hover {
	border-color: var(--accent);
	color: var(--accent);
}

/* ══════════════════════════════════════
   MAIN
   ══════════════════════════════════════ */
main {
	flex: 1;
	padding: var(--space-8) var(--space-6);
	max-width: 980px;
	width: 100%;
	margin: 0 auto;
}

.icon-home {
	width: 320px;
	height: 320px;
}

.icon-header {
	width: 40px;
	height: 40px;
}

.icon-login{
	width: 250px;
	height: 250px;
	display: block;
	margin: 0 auto;
}

/* ══════════════════════════════════════
   FOOTER
   ══════════════════════════════════════ */
footer {
	background: var(--surface-1);
	border-top: 1px solid var(--border-lo);
	text-align: center;
	padding: var(--space-3) var(--space-6);
	font-size: 9px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--text-lo);
	flex-shrink: 0;
}

/* ══════════════════════════════════════
   SHARED UTILITIES
   ══════════════════════════════════════ */

/* Section eyebrow label */
.section-label {
	font-family: 'Orbitron', monospace;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--accent);
	opacity: 0.7;
	margin-bottom: 10px;
}

/* Chord badge */
.chord-badge {
	display: inline-block;
	background: var(--accent-dim);
	border: 1px solid rgba(0, 229, 255, 0.22);
	border-radius: var(--radius-sm);
	padding: 2px 8px;
	font-family: 'Orbitron', monospace;
	font-size: 10px;
	font-weight: 700;
	color: var(--accent);
	letter-spacing: .06em;
}

/* Buttons */
.btn-primary {
	background: var(--accent);
	border: none;
	color: var(--on-accent);
	font-family: 'Orbitron', monospace;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .14em;
	padding: 9px 20px;
	border-radius: var(--radius-sm);
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: filter .15s, transform .12s, box-shadow .15s;
	position: relative;
	overflow: hidden;
}

.btn-primary:hover {
	filter: brightness(1.1);
	transform: translateY(-1px);
	box-shadow: 0 4px 20px var(--accent-glow);
	color: var(--on-accent);
}

.btn-primary:active {
	transform: translateY(0);
}

.btn-secondary {
	background: transparent;
	border: 1px solid var(--border-md);
	color: var(--text-md);
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	font-weight: 500;
	padding: 7px 16px;
	border-radius: var(--radius-sm);
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: all .15s;
}

.btn-secondary:hover {
	border-color: rgba(0, 229, 255, 0.45);
	color: var(--accent);
	background: var(--accent-subtle);
}

.btn-ghost {
	background: transparent;
	border: 1px solid rgba(0, 229, 255, 0.28);
	color: var(--accent);
	font-family: 'Orbitron', monospace;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .12em;
	padding: 7px 16px;
	border-radius: var(--radius-sm);
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: all .15s;
}

.btn-ghost:hover {
	background: var(--accent-dim);
	box-shadow: 0 0 14px rgba(0, 229, 255, 0.2);
}

/* Danger button */
.btn-danger {
	background: transparent;
	border: 1px solid rgba(255, 61, 61, 0.28);
	color: var(--accent2);
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	font-weight: 500;
	padding: 7px 14px;
	border-radius: var(--radius-sm);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: all .15s;
}

.btn-danger:hover {
	background: var(--accent2-dim);
	border-color: var(--accent2);
}

/* Form inputs */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
textarea,
select {
	background: var(--surface-1);
	border: 1px solid var(--border-md);
	border-radius: var(--radius-sm);
	color: var(--text-hi);
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	padding: 8px 12px;
	transition: border-color .15s, box-shadow .15s;
	outline: none;
	width: 100%;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
	border-color: rgba(0, 229, 255, 0.5);
	box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.08);
}

input::placeholder,
textarea::placeholder {
	color: var(--text-placeholder);
}

select option {
	background: var(--surface-2);
}

label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text-lo);
	display: block;
	margin-bottom: 5px;
}

/* Scrollbar */
::-webkit-scrollbar {
	width: 4px;
	height: 4px;
}

::-webkit-scrollbar-track {
	background: var(--surface-2);
}

::-webkit-scrollbar-thumb {
	background: rgba(0, 229, 255, 0.35);
	border-radius: 1px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--accent);
}

/* User icon */
.user-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-family: 'Orbitron', monospace;
	font-weight: 700;
	color: var(--accent);
	background: var(--accent-dim);
	border: 1px solid rgba(0, 229, 255, 0.28);
	flex-shrink: 0;
	letter-spacing: 0;
	overflow: hidden;
	font-size: 10px;
}

.user-icon.sm {
	width: 28px;
	height: 28px;
}

.user-icon.md {
	width: 36px;
	height: 36px;
}

.user-icon-img {
	width: 32px;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.header-user {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-left: var(--space-3);
	position: relative;
	z-index: 1;
}

.logout-link {
	font-size: 10px;
	color: var(--text-lo);
	text-decoration: none;
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	letter-spacing: .06em;
	transition: color .15s;
}

/* ログアウトをPOSTフォームのbuttonに変更したため、aタグと同一スタイルを適用 */
.header-logout {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-size: 10px;
	color: var(--text-lo);
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	letter-spacing: .06em;
	transition: color .15s;
}

.header-logout:hover {
	color: var(--accent2);
}

.logout-link:hover {
	color: var(--accent2);
}

/* テーマ切替トグル */
.theme-toggle-btn {
	margin-left: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 1px solid var(--border-md);
	background: var(--surface-2);
	color: var(--text-md);
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	position: relative;
	z-index: 1;
	transition: border-color .15s, color .15s, transform .15s, background .15s;
}

.theme-toggle-btn:hover {
	border-color: var(--accent);
	color: var(--accent);
	transform: scale(1.08) rotate(-8deg);
}

/* Headings */
h2 {
	font-family: 'Orbitron', monospace;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .14em;
	color: var(--text-hi);
	text-transform: uppercase;
	border-bottom: 1px solid var(--divider);
	padding-bottom: var(--space-3);
	margin-bottom: var(--space-4);
}

h3 {
	font-family: 'Orbitron', monospace;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .10em;
	color: var(--text-md);
}

/* Tags */
.tag {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-lo);
	background: var(--surface-3);
	border: 1px solid var(--border-lo);
	border-radius: var(--radius-sm);
	padding: 2px 7px;
	display: inline-block;
}

.tag.backing {
	color: var(--accent);
	background: var(--accent-dim);
	border-color: rgba(0, 229, 255, 0.2);
}

.tag.improv {
	color: var(--accent3);
	background: var(--accent3-dim);
	border-color: rgba(123, 97, 255, 0.2);
}

/* Page-leaving transition */
body.is-leaving {
	opacity: 0;
	transition: opacity .2s ease;
}

/* Like pop animation */
@keyframes like-pop-anim {
	0% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}

	100% {
		opacity: 0;
		transform: translateY(-60px) scale(1.5);
	}
}

#like-container {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 9999;
}

.like-pop {
	position: fixed;
	font-size: 22px;
	animation: like-pop-anim .75s ease forwards;
}

/* Home cards */
.home-nav-card {
	border-color: var(--border-lo) !important;
}

.home-nav-card:hover {
	border-color: rgba(0, 229, 255, 0.35) !important;
}

/* Form panels */
.jamhub-form {
	border-color: var(--border-lo) !important;
}

.auth-card {
	border-color: var(--border-lo) !important;
}

/* Posts card borders */
.posts-feed-header {
	border-bottom-color: var(--divider) !important;
}

.post-card {
	border-bottom-color: var(--divider) !important;
	border: 1px solid var(--border-lo);
}

.posts-sidebar-left {
	border-right-color: var(--divider) !important;
}

.posts-feed-col {
	border-right-color: var(--divider) !important;
}

.sidebar-widget-title {
	border-bottom-color: var(--divider) !important;
}

/* Prog card borders */
.prog-card {
	border-color: var(--border-lo) !important;
}

.prog-card:hover {
	border-color: rgba(0, 229, 255, 0.28) !important;
}

header {
	border-bottom-color: rgba(0, 229, 255, 0.18) !important;
}

/* Controls */
.controls-bar,
.jh-controls {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex-wrap: wrap;
}

/* Dialog / modal */
dialog,
.modal-overlay {
	background: var(--surface-1);
	border: 1px solid var(--border-md);
	border-radius: var(--radius-md);
	color: var(--text-hi);
	padding: var(--space-6);
}

dialog::backdrop {
	background: rgba(0, 0, 0, 0.75);
}

.flash-message {
	text-align: center;
	background: var(--accent-dim);
	border: 1px solid rgba(0, 229, 255, 0.22);
	border-radius: var(--radius-sm);
	padding: 10px 10px;
	font-family: 'Orbitron', monospace;
	font-size: 14px;
	font-weight: 700;
	color: var(--accent);
	letter-spacing: .06em;
}
/* ══════════════════════════════════════
   RESPONSIVE（スマホ対応: 共通ヘッダー・ハンバーガーメニュー）
   全ページ共通のヘッダーをスマホ幅で崩れないようにする。
   ナビゲーションはハンバーガーボタン(.nav-toggle-btn)でドロップダウン表示に切り替える
   （開閉のJSはtheme.jsに追加。トグル対象のnav自体は各ページの既存<nav>をそのまま使う）。
   コンテンツページ本体・フレットボード画面固有のレイアウトは別途対応。

   【閾値を768px→960pxに引き上げた理由】
   ヘッダーの全要素(ロゴ + nav4項目 + FRETBOARD/タグライン + 言語 + ユーザー/ログイン +
   コード表示 + テーマトグル)を横一列に並べると約951px必要になる。閾値が768pxだと、
   iPhone 12 Pro(844px)やPro Max(932px)等の横向きスマホ幅では nav 等が収まりきらず
   ヘッダーが右に約100pxはみ出す。すると body 全体の幅がビューポートを超え、.app の右側に
   空白(黒帯)が生じ、margin-left:auto のテーマトグルもその空白域へ押し出されてしまう
   (指板が画面幅いっぱいに表示されない原因)。全要素が収まる幅(≈951px)を下回る間は常に
   ハンバーガー化して溢れを防ぐため、余裕を見て960pxを閾値とする。
   ══════════════════════════════════════ */

/* ハンバーガーボタン。デスクトップでは非表示 */
.nav-toggle-btn {
	display: none;
}

@media (max-width: 960px) {
	header {
		padding: 0 var(--space-3);
		gap: var(--space-2);
		position: relative;
		/* ドロップダウン化したnavの位置基準にするため */
	}

	/* タグライン（「ギター即興アナライザー」等）は優先度が低いため非表示にして幅を確保 */
	.logo-sub {
		display: none;
	}

	.nav-toggle-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		flex-shrink: 0;
		background: var(--surface-2);
		border: 1px solid var(--border-md);
		border-radius: var(--radius-sm);
		color: var(--text-md);
		font-size: 16px;
		line-height: 1;
		cursor: pointer;
		order: -1;
		/* ロゴより左端に配置 */
	}

	.nav-toggle-btn:hover {
		border-color: var(--accent);
		color: var(--accent);
	}

	/* ナビゲーションはハンバーガーボタンで開閉するドロップダウンパネルにする */
	header nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		margin-left: 0;
		flex-direction: column;
		gap: 0;
		background: var(--header-bg);
		backdrop-filter: blur(16px);
		-webkit-backdrop-filter: blur(16px);
		border-bottom: 1px solid var(--header-border);
		max-height: 0;
		overflow: hidden;
		transition: max-height .22s ease;
		z-index: 150;
	}

	header nav.nav-open {
		max-height: 320px;
		/* 項目数に対して十分な高さ。増える場合はここを調整 */
	}

	header nav a {
		width: 100%;
		box-sizing: border-box;
		padding: 14px 20px;
		border-bottom: 1px solid var(--border-lo);
		font-size: 13px;
	}

	/* ユーザー名の表示テキストは省略し、アイコンだけ残して幅を節約 */
	.header-user-name {
		display: none;
	}

	.logo,
	header h1>a,
	.logo-wrap {
		font-size: 14px;
	}
}

@media (max-width: 480px) {
	.icon-header {
		width: 30px;
		height: 30px;
	}

	.lang-btn {
		padding: 3px 7px;
		font-size: 8px;
	}
}

/* ログイン/登録等のフォームカードは、既にmax-width+flex中央寄せで大半のスマホ幅では
   問題無いが、320px前後の非常に狭い画面では内側パディングがやや圧迫するため軽減する */
@media (max-width: 400px) {
	.auth-card {
		padding: 32px 20px;
	}
}