/* lynkr 公開ページ。色・角丸・フォントはテーマから CSS 変数で渡される（src/lib/theme.ts の themeCss） */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--lk-bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.lk {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--lk-text);
  font-family: var(--lk-font);
  -webkit-font-smoothing: antialiased;
  --lk-muted: color-mix(in srgb, var(--lk-text) 74%, transparent);
  --lk-subtle: color-mix(in srgb, var(--lk-text) 8%, transparent);
  --lk-btn-bg: var(--lk-btn-color);
  --lk-btn-fg: var(--lk-btn-label);
  --lk-btn-border: transparent;
  --lk-btn-shadow: none;
  --lk-card-radius: min(var(--lk-radius), 22px);
}
/* iOS でも背景が固定されるよう擬似要素で敷く */
body.lk::before { content: ""; position: fixed; inset: 0; z-index: -2; background: var(--lk-page-bg); }
.lk-bg { position: fixed; inset: calc(var(--lk-blur) * -2); z-index: -1; background-size: cover; background-position: center; filter: blur(var(--lk-blur)); }
.lk-bg::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / var(--lk-overlay)); }

/* ボタンのスタイル */
.lk-style-outline { --lk-btn-bg: transparent; --lk-btn-fg: var(--lk-btn-color); --lk-btn-border: var(--lk-btn-color); }
.lk-style-soft { --lk-btn-bg: color-mix(in srgb, var(--lk-btn-color) 15%, transparent); --lk-btn-fg: var(--lk-btn-color); }
.lk-style-shadow { --lk-btn-shadow: 0 12px 28px -14px rgb(0 0 0 / .45), 0 2px 6px -2px rgb(0 0 0 / .12); }
.lk-style-hard { --lk-btn-border: var(--lk-text); --lk-btn-shadow: 4px 4px 0 var(--lk-text); }
.lk-style-glass {
  --lk-btn-bg: color-mix(in srgb, var(--lk-btn-color) 16%, transparent);
  --lk-btn-border: color-mix(in srgb, var(--lk-btn-color) 30%, transparent);
  --lk-btn-shadow: 0 8px 24px -16px rgb(0 0 0 / .5);
}

.lk-main {
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
  padding: max(48px, env(safe-area-inset-top)) 18px max(36px, env(safe-area-inset-bottom));
}

/* プロフィール */
.lk-profile { text-align: center; margin-bottom: 26px; }
.lk-avatar {
  width: 96px; height: 96px;
  margin: 0 auto 14px;
  display: block;
  border-radius: var(--lk-avatar-radius);
  object-fit: cover;
  box-shadow: 0 8px 28px -12px rgb(0 0 0 / .45);
}
.lk-avatar-initial { display: grid; place-items: center; font-size: 40px; font-weight: 800; background: var(--lk-btn-color); color: var(--lk-btn-label); }
.lk-style-outline .lk-avatar-initial, .lk-style-soft .lk-avatar-initial { background: var(--lk-text); color: var(--lk-bg); }
.lk-name { margin: 0; font-size: 21px; font-weight: 800; line-height: 1.35; letter-spacing: .01em; overflow-wrap: anywhere; }
.lk-bio { margin: 10px auto 0; max-width: 30em; font-size: 14px; line-height: 1.8; color: var(--lk-muted); overflow-wrap: anywhere; }
.lk-bio a, .lk-text a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.lk-blocks { display: flex; flex-direction: column; gap: 12px; }
.lk-block { min-width: 0; }

/* リンクボタン */
.lk-btn {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 58px;
  padding: 11px 58px;
  border: 2px solid var(--lk-btn-border);
  border-radius: var(--lk-radius);
  background: var(--lk-btn-bg);
  color: var(--lk-btn-fg);
  box-shadow: var(--lk-btn-shadow);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
  -webkit-tap-highlight-color: transparent;
}
.lk-style-glass .lk-btn, .lk-style-glass .lk-card-image { -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
.lk-btn:hover, .lk-card-image:hover { transform: translateY(-2px); filter: brightness(1.04); }
.lk-style-hard .lk-btn:hover, .lk-style-hard .lk-card-image:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--lk-text); }
.lk-btn:active, .lk-card-image:active { transform: scale(.985); }
.lk-btn-media {
  position: absolute; left: 8px; top: 50%;
  width: 40px; height: 40px;
  transform: translateY(-50%);
  border-radius: max(calc(var(--lk-radius) - 6px), 4px);
  object-fit: cover;
}
.lk-btn-icon { display: grid; place-items: center; }
.lk-link-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lk-link-title { font-size: 15.5px; line-height: 1.4; overflow-wrap: anywhere; }
.lk-link-desc { font-size: 12.5px; font-weight: 500; line-height: 1.45; opacity: .78; overflow-wrap: anywhere; }

.lk-btn-card { justify-content: flex-start; gap: 14px; padding: 9px 44px 9px 9px; text-align: left; border-radius: var(--lk-card-radius); }
.lk-thumb { flex: none; width: 62px; height: 62px; border-radius: min(calc(var(--lk-card-radius) - 5px), 14px); object-fit: cover; }
.lk-thumb-icon { display: grid; place-items: center; background: color-mix(in srgb, currentColor 12%, transparent); }
.lk-chevron { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); opacity: .55; }

.lk-card-image {
  position: relative;
  display: block;
  overflow: hidden;
  border: 2px solid var(--lk-btn-border);
  border-radius: var(--lk-card-radius);
  background: var(--lk-btn-bg);
  color: var(--lk-btn-fg);
  box-shadow: var(--lk-btn-shadow);
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.lk-card-image img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.lk-card-image .lk-link-body { padding: 12px 16px 14px; font-weight: 700; text-align: center; }

/* 目立たせるアニメーション */
@keyframes lk-shake { 0%, 84%, 100% { transform: rotate(0); } 87% { transform: rotate(-2.2deg); } 90% { transform: rotate(2.2deg); } 93% { transform: rotate(-1.4deg); } 96% { transform: rotate(1.4deg); } }
@keyframes lk-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes lk-shine { 0%, 55% { left: -70%; } 100% { left: 140%; } }
.lk-hl-shake { animation: lk-shake 3.4s ease-in-out infinite; }
.lk-hl-pulse { animation: lk-pulse 1.9s ease-in-out infinite; }
.lk-hl-shine { overflow: hidden; }
.lk-hl-shine::after {
  content: ""; position: absolute; top: -10%; left: -70%;
  width: 45%; height: 120%;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / .55), transparent);
  transform: skewX(-20deg);
  animation: lk-shine 3.2s ease-in-out infinite;
  pointer-events: none;
}

/* SNSアイコン */
.lk-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; margin: 0; padding: 0; list-style: none; }
.lk-social a { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: var(--lk-text); transition: transform .16s ease, background-color .16s ease; }
.lk-social a:hover { transform: translateY(-2px); background: var(--lk-subtle); }
.lk-social-sm a { width: 38px; height: 38px; }
.lk-social-lg a { width: 54px; height: 54px; }
.lk-ic { display: block; flex: none; }

/* 見出し・テキスト */
.lk-heading { margin: 12px 0 0; font-weight: 800; line-height: 1.45; letter-spacing: .02em; overflow-wrap: anywhere; }
.lk-heading.lk-size-sm { font-size: 14px; }
.lk-heading.lk-size-md { font-size: 17px; }
.lk-heading.lk-size-lg { font-size: 21px; }
.lk-align-left { text-align: left; }
.lk-align-center { text-align: center; }
.lk-align-right { text-align: right; }
.lk-text { font-size: 14.5px; line-height: 1.85; overflow-wrap: anywhere; }
.lk-text-card { padding: 16px 18px; border-radius: var(--lk-card-radius); background: var(--lk-subtle); }

/* 画像・ギャラリー */
.lk-image { margin: 0; }
.lk-image img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: var(--lk-card-radius); }
.lk-image a { display: block; border-radius: var(--lk-card-radius); transition: transform .16s ease; }
.lk-image a:hover { transform: translateY(-2px); }
.lk-image figcaption { margin-top: 8px; font-size: 12.5px; text-align: center; color: var(--lk-muted); }
.lk-gallery { display: grid; gap: 8px; }
.lk-gallery-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lk-gallery-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.lk-gallery-carousel { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -18px; padding: 0 18px 4px; }
.lk-gallery-carousel::-webkit-scrollbar { display: none; }
.lk-gallery-carousel .lk-gallery-item { flex: 0 0 74%; scroll-snap-align: center; }
.lk-gallery-item { display: block; overflow: hidden; border-radius: min(var(--lk-card-radius), 14px); }
.lk-gallery img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
a.lk-gallery-item:hover img { transform: scale(1.04); }

/* 埋め込み・地図 */
.lk-embed-title { margin: 0 0 8px; font-size: 14px; font-weight: 700; text-align: center; }
.lk-embed-frame { position: relative; width: 100%; margin: 0 auto; overflow: hidden; border-radius: 14px; background: var(--lk-subtle); }
.lk-embed-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lk-map-link { display: block; margin-top: 8px; font-size: 12.5px; text-align: center; color: var(--lk-muted); }

/* 区切り */
.lk-divider { margin: 6px auto; }
.lk-divider-line { width: 84%; height: 1px; background: color-mix(in srgb, var(--lk-text) 18%, transparent); }
.lk-divider-dots { width: 70px; height: 6px; background: radial-gradient(circle, color-mix(in srgb, var(--lk-text) 40%, transparent) 1.6px, transparent 2.2px) center / 14px 6px repeat-x; }
.lk-divider-line.lk-size-sm, .lk-divider-dots.lk-size-sm { margin-block: 2px; }
.lk-divider-line.lk-size-lg, .lk-divider-dots.lk-size-lg { margin-block: 18px; }
.lk-divider-space.lk-size-sm { height: 4px; }
.lk-divider-space.lk-size-md { height: 18px; }
.lk-divider-space.lk-size-lg { height: 44px; }

/* フッター */
.lk-footer { margin-top: 46px; text-align: center; }
.lk-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--lk-subtle);
  color: var(--lk-text);
  font-size: 12px; font-weight: 700;
  text-decoration: none;
  opacity: .82;
  transition: opacity .16s ease;
}
.lk-badge:hover { opacity: 1; }
.lk-badge-mark { display: block; flex: none; }

.lk-preview-banner {
  position: fixed; left: 50%; bottom: 16px; z-index: 10;
  transform: translateX(-50%);
  padding: 8px 16px;
  border-radius: 999px;
  background: #111827; color: #fff;
  font: 600 12px/1.4 system-ui, sans-serif;
  box-shadow: 0 8px 24px -8px rgb(0 0 0 / .5);
  white-space: nowrap;
}

a:focus-visible { outline: 3px solid color-mix(in srgb, var(--lk-text) 55%, transparent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .lk-hl-shake, .lk-hl-pulse { animation: none; }
  .lk-hl-shine::after { display: none; }
  .lk-btn, .lk-card-image, .lk-social a, .lk-gallery img { transition: none; }
}
@media (min-width: 640px) {
  .lk-main { padding-top: 64px; }
  .lk-avatar { width: 104px; height: 104px; }
  .lk-name { font-size: 23px; }
}