/* qtrnmr.me v0 — 名刺 (白地・細いグレーの文字・括弧線) に合わせる。
   色とフォントは :root の変数に集約。背景の墨のテクスチャは後で差し込む。 */
:root {
  --bg: #ffffff;
  --fg: #4a4a4a;
  --fg-soft: #6f6f6f;
  --line: #9a9a9a;
  --font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
    "Yu Gothic", system-ui, sans-serif;
  --tick: 8px;    /* 括弧の端の縦線の長さ */
  --gap: 10px;    /* 括弧の線とアイコンの間隔 */
}

* { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

.card {
  display: grid;
  justify-items: center;
  gap: 4rem;
}

/* 名前 (名刺表面) */
.name {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 0.35em;
  font-weight: 300;
  text-align: center;
}
.name-ja {
  font-size: 1.6rem;
  letter-spacing: 0.32em;
  margin-right: -0.32em; /* 字間ぶんの右余白を打ち消して視覚中心に */
}
.name-en {
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--fg-soft);
}

/* メールアドレス + 括弧線 (名刺裏面) */
.id-map {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  grid-template-areas:
    "top  top  top  top"
    "user at   org  tld"
    "bx   .    bgh  ."
    ".    .    bhome bhome";
  row-gap: 12px;
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  color: var(--fg);
}
@media (max-width: 420px) {
  .id-map { font-size: 1.05rem; }
}

.seg { line-height: 1.2; }
.col-user   { grid-area: user; }
.col-at     { grid-area: at; }
.col-org    { grid-area: org; }
.col-tld    { grid-area: tld; }
.col-all    { grid-area: top; }
.col-domain { grid-area: bhome; }
.brk.col-user { grid-area: bx; }
.brk.col-org  { grid-area: bgh; }

/* 括弧線: 両端の縦線 (tick) + 中央にアイコンを挟んだ横線 */
.brk {
  position: relative;
  display: flex;
  align-items: center;
  height: calc(var(--tick) * 2);
  color: var(--line);
  text-decoration: none;
  transition: color 0.15s;
}
.brk:hover, .brk:focus-visible { color: var(--fg); }
.brk:focus-visible { outline: 1px solid var(--fg); outline-offset: 4px; }

.brk::before, .brk::after {
  content: "";
  flex: 1;
  height: 0;
  border-top: 1px solid currentColor;
}
.brk::before { margin-right: var(--gap); }
.brk::after  { margin-left: var(--gap); }

/* 上括弧: 線が上辺、端の tick は線から下向き (名刺と同じ ⌐———✉———¬) */
.brk-top { align-items: flex-start; }
.brk-top .ico { transform: translateY(-50%); }

/* 下括弧: 線が下辺、端の tick は線から上向き (⌊———X———⌋) */
.brk-bot { align-items: flex-end; }
.brk-bot .ico { transform: translateY(50%); }

/* 括弧の端の tick = 箱の左右の縦線。箱の高さが tick の長さ */
.brk { height: var(--tick); border-left: 1px solid currentColor; border-right: 1px solid currentColor; }

.ico { transform: translateY(50%); }
.ico {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  background: var(--bg);
}

/* home の括弧は 1 段下げて qtrnmr.me 全体を指す */
.brk-low { margin-top: 4px; }

/* ---------- ホバー: 括弧に対応するアドレス断片を強調 ---------- */
.seg { transition: color 0.2s; }
.id-map:has(.brk.col-user:hover, .brk.col-user:focus-visible) .seg.col-user,
.id-map:has(.brk.col-org:hover,  .brk.col-org:focus-visible)  .seg.col-org,
.id-map:has(.brk.col-domain:hover, .brk.col-domain:focus-visible) .seg.col-org,
.id-map:has(.brk.col-domain:hover, .brk.col-domain:focus-visible) .seg.col-tld,
.id-map:has(.brk.col-all:hover, .brk.col-all:focus-visible) .seg {
  color: #111;
}

/* ---------- ポップアップ (ふわっと出る小カード) ---------- */
.pop {
  position: absolute;
  left: 50%;
  top: calc(100% + 18px);
  transform: translate(-50%, 6px);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "av t" "av h" "av d";
  column-gap: 10px;
  align-items: center;
  min-width: 11rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid #e3e3e3;
  border-radius: 8px;
  background: var(--bg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  color: var(--fg);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  line-height: 1.5;
  white-space: nowrap;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  z-index: 1;
}
.pop::before {                        /* 吹き出しの小さな三角 */
  content: "";
  position: absolute;
  left: 50%;
  top: -5px;
  width: 8px;
  height: 8px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--bg);
  border-left: 1px solid #e3e3e3;
  border-top: 1px solid #e3e3e3;
}
.pop-up {                             /* 上括弧用: 上に出す */
  top: auto;
  bottom: calc(100% + 18px);
  transform: translate(-50%, -6px);
}
.pop-up::before {
  top: auto;
  bottom: -5px;
  border: 0;
  border-right: 1px solid #e3e3e3;
  border-bottom: 1px solid #e3e3e3;
}
.brk:hover .pop, .brk:focus-visible .pop {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}
.pop-av { grid-area: av; width: 36px; height: 36px; border-radius: 50%; }
.pop-t  { grid-area: t; font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-soft); }
.pop-h  { grid-area: h; font-size: 0.9rem; color: #111; }
.pop-d  { grid-area: d; color: var(--fg-soft); }
.pop:not(:has(.pop-av)) { grid-template-columns: 1fr; grid-template-areas: "t" "h" "d"; }

/* ---------- 初回表示: 名前がふわっと、括弧の線が中央から伸びる ---------- */
@media (prefers-reduced-motion: no-preference) {
  .name, .seg { animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .seg { animation-delay: 0.25s; }
  .brk::before, .brk::after { animation: draw 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: 0.55s; }
  .brk::before { transform-origin: right; }
  .brk::after  { transform-origin: left; }
  .brk { animation: fade 0.4s ease both; animation-delay: 0.55s; }
  .brk-low::before, .brk-low::after, .brk-low { animation-delay: 0.7s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ホバー中の括弧 (とそのポップアップ) を最前面に */
.brk:hover, .brk:focus-visible { z-index: 5; }