/* =========================================================
   名刺サイト 共通
   色・書体・形はブランド正本「朝の歩幅」（2026-07-08 確定）に従う。
   3案（html[data-variant="a|b|c"]）の違いは配色ではなく、
   組み方・余白・カードかどうか・リンクの見せ方で出す。
   ========================================================= */

:root {
  /* --- 正本の5色と濃淡（新しい色は足さない） --- */
  --kinari: #FAF5EA;          /* 生成り：背景は常にこれ */
  --sumi: #3B362E;            /* 墨：本文 */
  --yamabuki: #B07D3C;        /* 山吹：顔・アイコンの地・見出しの強調 */
  --yamabuki-light: #F1E6D0;
  --yamabuki-dark: #8A5F26;
  --sage: #8FA98B;            /* セージ：補助・タグ */
  --sage-light: #E6EDE3;
  --sage-dark: #5C7159;
  --terracotta: #C96F4A;      /* テラコッタ：行動を促す1か所だけ */
  --terracotta-light: #F7E3D9;
  --terracotta-dark: #96431F;
  --rule: #E5DCC9;            /* 罫線 */
  --sub: #6F675A;             /* 補足文字 */
  --yamabuki-on-dark: #C9A876;

  /* --- 役割ごとの色（ライト） --- */
  --bg: var(--kinari);
  --text: var(--sumi);
  --muted: var(--sub);
  --line: var(--rule);
  --accent: var(--yamabuki-dark);     /* 生成りの上の色つき文字・矢印は濃い色 */
  --mark: var(--yamabuki);            /* 文字ではない飾り（短い線など） */
  --surface: var(--yamabuki-light);   /* 色の面 */
  --surface-text: var(--sumi);
  --tag-line: var(--sage);
  --tag-text: var(--sage-dark);
  --cta-bg: var(--terracotta-light);
  --cta-line: var(--terracotta);
  --cta-text: var(--terracotta-dark);
  --placeholder: var(--yamabuki);

  /* --- 書体：見出し Zen Maru Gothic 500／本文 Noto Sans JP 400／英数字 Inter。太さは 400 と 500 だけ --- */
  --font-body: "Inter", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", sans-serif;
  --font-heading: "Inter", "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", "Hiragino Sans", sans-serif;

  /* --- 形：基準 8px・角丸はカード 12px／ボタン 8px・影とグラデーションは使わない --- */
  --u: 8px;
  --radius-card: 12px;
  --radius-button: 8px;
}

/* ダークモード：正本に定めがないので、墨の系統を地にして控えめに（真っ黒は使わない） */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #2B2722;                     /* 墨より一段暗い地 */
    --text: var(--kinari);
    --muted: #C2B8A6;
    --line: #4A443B;
    --accent: var(--yamabuki-on-dark);
    --mark: var(--yamabuki-on-dark);
    --surface: var(--sumi);
    --surface-text: var(--kinari);
    --tag-line: var(--sage);
    --tag-text: var(--sage);
    --cta-bg: var(--sumi);
    --cta-line: var(--terracotta);
    --cta-text: var(--terracotta-light);
    --placeholder: var(--yamabuki-on-dark);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  color-scheme: light dark;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: .03em;
  line-break: strict;            /* 行頭に「、」「ょ」などが来ないように */
  overflow-wrap: anywhere;       /* 長い英数字で横にはみ出さない */
  -webkit-font-smoothing: antialiased;
  padding:
    max(env(safe-area-inset-top), var(--pad-top, 48px))
    max(env(safe-area-inset-right), 20px)
    max(env(safe-area-inset-bottom), 48px)
    max(env(safe-area-inset-left), 20px);
}

/* 見出し・ラベルだけ文字を詰める（本文は詰めない方が読みやすい） */
.name, .title, .tagline, .link__label, .link__action { font-feature-settings: "palt" 1; }

/* 文節の途中で改行しない（Chrome 系。他のブラウザでは無視される） */
.name, .title, .tagline, .link__note { word-break: auto-phrase; }

.card {
  width: 100%;
  max-width: var(--card-width, 440px);
  margin: 0 auto;
}
/* content.json を読み終えるまでは見せない（途中の形が出て、あとでずれるのを防ぐ） */
.card:not(.is-ready) { visibility: hidden; }

/* --- 誰か（アイコン・名前・肩書き・一行紹介） --- */
.hero { text-align: var(--hero-align, center); }

.avatar {
  width: var(--avatar-size, 96px);
  height: var(--avatar-size, 96px);
  margin: 0 auto calc(var(--u) * 3);
  border-radius: 50%;
  background: var(--yamabuki);   /* アイコンの地と同じ山吹 */
  color: var(--kinari);
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: calc(var(--avatar-size, 96px) * .4);
  overflow: hidden;
  flex: none;
}
.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }

.name {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--name-size, 1.75rem);
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.4;
  text-wrap: balance;
}

.title {
  margin: var(--u) 0 0;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--muted);
  letter-spacing: .06em;
  text-wrap: balance;
}

.tagline {
  margin: calc(var(--u) * 3) 0 0;
  font-size: 1.0625rem;
  line-height: 1.8;
  text-wrap: balance;
}

/* --- どこで（リンク） --- */
.links { margin-top: var(--section-gap, 40px); }
.links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--u);
}

.link {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "label arrow" "note arrow";
  align-items: center;
  column-gap: calc(var(--u) * 2);
  min-height: 64px;              /* 親指で押しやすい高さ（44px 以上） */
  padding: calc(var(--u) * 2) calc(var(--u) * 2.5);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  color: var(--text);
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.link__label { grid-area: label; font-weight: 500; line-height: 1.5; }
.link__note  { grid-area: note; margin-top: 2px; font-size: .8125rem; line-height: 1.6; color: var(--muted); }
.link__arrow { grid-area: arrow; color: var(--accent); transition: transform .15s ease; }

@media (hover: hover) {
  a.link:hover { border-color: var(--accent); }
  a.link:hover .link__arrow { transform: translateX(3px); }
}
a.link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* 準備中：押せないことが分かる見た目。文字は読める濃さを保つ */
.link.is-disabled { cursor: default; border-style: dashed; background: transparent; }
.link.is-disabled .link__label { color: var(--muted); font-weight: 400; }
.link.is-disabled .link__arrow { visibility: hidden; }

/* --- 行動を促す1か所（テラコッタはここだけ） --- */
.cta { margin-top: calc(var(--u) * 3); }
.cta[hidden] { display: none; }
.link--cta {
  grid-template-columns: 1fr auto auto;
  grid-template-areas: "label label label" "note action arrow";
  column-gap: var(--u);
  border-radius: var(--radius-button);
  border-color: var(--cta-line);
  background: var(--cta-bg);
  color: var(--cta-text);
}
.link--cta .link__note { color: var(--cta-text); }
.link--cta .link__arrow { color: var(--cta-text); }
.link__action { grid-area: action; align-self: end; font-size: .875rem; font-weight: 500; line-height: 1.6; }
.link--cta .link__arrow { align-self: end; line-height: 1.6; }
@media (hover: hover) { a.link--cta:hover { border-color: var(--cta-text); } }
a.link--cta:focus-visible { outline-color: var(--cta-line); }

/* --- 何をしているか（自己紹介） --- */
.bio {
  margin-top: var(--section-gap, 40px);
  font-size: .9375rem;
  line-height: 1.9;
  text-wrap: pretty;
}
.bio p { margin: 0 0 1em; }
.bio p:last-child { margin-bottom: 0; }
.bio[hidden] { display: none; }

.footer {
  margin-top: var(--section-gap, 40px);
  text-align: var(--hero-align, center);
  font-size: .75rem;
  color: var(--muted);
}

/* 仮の文字（「ここに〜」）は点線の下線で目立たせる */
.is-placeholder {
  text-decoration: underline dotted var(--placeholder);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* 画面には出さず読み上げだけする文字 */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.error {
  max-width: 440px;
  margin: 0 auto;
  padding: calc(var(--u) * 2.5);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  font-size: .9rem;
}
.error code { font-size: .85em; background: var(--surface); padding: 1px 4px; border-radius: 4px; }

/* --- 見比べ用の切り替えボタン（?v= を付けた時だけ表示） --- */
.switcher {
  position: fixed;
  left: 50%;
  bottom: max(env(safe-area-inset-bottom), 12px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 2px 2px 14px;
  border-radius: var(--radius-card);
  background: var(--sumi);
  color: var(--kinari);
  font: 500 12px/1 var(--font-body);
  white-space: nowrap;
  z-index: 10;
}
.switcher[hidden] { display: none; }
body:has(.switcher:not([hidden])) { padding-bottom: 104px; }
.switcher a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--kinari);
  text-decoration: none;
}
.switcher a[aria-current] { background: var(--kinari); color: var(--sumi); }
.switcher a:focus-visible { outline: 2px solid var(--kinari); outline-offset: -4px; }

/* 動きを減らす設定の人には、色の変化以外の動きを出さない */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
  a.link:hover .link__arrow { transform: none !important; }
}

/* パソコン幅：少しだけ大きく・ゆったり */
@media (min-width: 768px) {
  body { --pad-top: 80px; }
  .name { font-size: calc(var(--name-size, 1.75rem) * 1.12); }
}

/* =========================================================
   A 落ち着き：中央揃え・罫線で囲んだカードが縦に並ぶ
   ========================================================= */
[data-variant="a"] .hero__text::after {
  /* 見出しの強調：山吹の短い線 */
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  margin: calc(var(--u) * 3) auto 0;
  background: var(--mark);
}
[data-variant="a"] .bio {
  padding-top: calc(var(--u) * 4);
  border-top: 1px solid var(--line);
}

/* =========================================================
   B 温かさ：大きめのアイコン・肩書きはタグ・リンクは色の面のタイル2列
   ========================================================= */
[data-variant="b"] { --avatar-size: 120px; }
[data-variant="b"] .title {
  display: inline-block;
  margin-top: calc(var(--u) * 1.5);
  padding: 2px 10px;
  border: 1px solid var(--tag-line);
  border-radius: var(--radius-button);
  color: var(--tag-text);
  font-size: .8125rem;
}
[data-variant="b"] .links ul { grid-template-columns: 1fr 1fr; }
[data-variant="b"] .link:not(.link--cta) {
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr;
  grid-template-areas: "label arrow" "note note";
  align-items: start;
  height: 100%;
  min-height: 96px;
  padding: calc(var(--u) * 2);
  border-color: transparent;
  background: var(--surface);
  color: var(--surface-text);
}
[data-variant="b"] .link:not(.link--cta) .link__note { margin-top: 4px; }
[data-variant="b"] .link:not(.link--cta) { column-gap: var(--u); }
[data-variant="b"] .link__label { word-break: auto-phrase; }
[data-variant="b"] .link.is-disabled { background: transparent; border-color: var(--line); }
@media (hover: hover) {
  [data-variant="b"] a.link:not(.link--cta):hover { border-color: var(--accent); }
}
[data-variant="b"] .bio {
  padding: calc(var(--u) * 3);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

/* =========================================================
   C 余白：左寄せ・アイコンと名前を横に並べる・罫線と余白だけで区切る
   ========================================================= */
[data-variant="c"] {
  --hero-align: left;
  --avatar-size: 64px;
  --section-gap: 64px;
  --pad-top: 72px;
  --card-width: 480px;
}
[data-variant="c"] .hero { display: grid; grid-template-columns: auto 1fr; column-gap: calc(var(--u) * 2.5); align-items: center; }
[data-variant="c"] .avatar { margin: 0; }
[data-variant="c"] .name { font-size: 1.625rem; }
[data-variant="c"] .title { margin-top: 2px; }
[data-variant="c"] .tagline {
  grid-column: 1 / -1;
  margin-top: calc(var(--u) * 5);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.75;
  text-wrap: pretty;
}
[data-variant="c"] .links ul { gap: 0; border-top: 1px solid var(--line); }
[data-variant="c"] .link:not(.link--cta) {
  min-height: 72px;
  padding: calc(var(--u) * 2.5) 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}
[data-variant="c"] .link.is-disabled { border-bottom-style: dashed; }
[data-variant="c"] .cta { margin-top: calc(var(--u) * 4); }
[data-variant="c"] .bio { color: var(--muted); font-size: .875rem; line-height: 2.05; }

@media (min-width: 768px) {
  [data-variant="c"] { --pad-top: 96px; --card-width: 520px; }
  [data-variant="c"] .name { font-size: 1.875rem; }
}