/* =====================================================================
   めたもる / MetamoL — リンクハブLP  候補3「Terminal Manifest（ターミナル・マニフェスト）」
   ---------------------------------------------------------------------
   方向性: 等幅を主役に振り切り、画面全体を“静的な端末出力／設定ファイル”の
   体裁で構成する。左揃いの等幅ブロック主体。ただしギミック先行は禁物——
   常時アニメ（点滅カーソル等）は入れず、和文の可読性・AA・44px標的を厳守する。
   配色は :root に集約（テーマ変更はここ1か所。FrameSpec と同じ流儀）。
   外部依存なし（フォント/JS/アイコンCDNを使わない＝CSPのdefault-src 'none'下で動く）。
   ===================================================================== */

:root {
  /* 面・背景（暗い順） */
  --bg:            #0e1419;   /* ページ背景＝端末画面 */
  --card:          #161b22;   /* レコード面 */
  --card-hover:    #1b222b;   /* リンク面・hover時の一段上 */
  --border:        #233038;   /* 罫線・枠 */
  --border-strong: #2c3a44;   /* 少し強い枠（リンク・アバター） */

  /* 文字（明るい順）。※旧実装の --faint:#5c6873 はAA不合格(3.03:1)につき撤去。
     補助文字は最暗でも #8b98a5(muted・約5.0:1) 以上の明度に統一する。 */
  --text:  #e6edf3;   /* 本文・見出し（最明） */
  --soft:  #aeb9c4;   /* 少し落とした本文（準備中の説明・読み仮名） 約6.6:1 */
  --muted: #8b98a5;   /* 補足・ラベル・キー名 約5.0:1 */

  /* アクセント（＝ブランドのシアン） */
  --accent:     #36cfe0;
  --accent-dim: rgba(54,207,224,0.10);  /* accentの淡い面（アバター背景） */

  /* ステータス色（公開中＝緑系で点灯 / 準備中＝琥珀系で非点灯。意味の色は固定） */
  --live:     #5dcaa5;   /* 緑系 約6.4:1 */
  --soon:     #c8b58a;   /* 琥珀系 約7.0:1 */

  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --jp:   "Yu Gothic UI", "Hiragino Sans", "Meiryo", sans-serif;

  --radius: 12px;

  /* 余白スケール（8pxベース）。密(16)・中(12)・疎(40)の3段でリズムを付ける */
  --pad-card: 16px;   /* レコード内padding */
  --gap-card: 12px;   /* レコード間gap */
  --gap-sect: 40px;   /* プロフィール下〜作品群（“間”を大きく取る） */
  --gap-foot: 24px;   /* フッター上 */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--jp);
  line-height: 1.7;
  min-height: 100vh;
  display: flex;
  /* 320pxでも横スクロールを出さないため左右paddingは固定18px、min-width:0前提 */
  padding: 40px 18px;
  /* “ファイル”感を1か所だけ忍ばせる極薄のベースライン罫（横線のみ・24px間隔）。
     使いすぎ厳禁の意匠点その1。固定背景なのでアニメ負荷なし。 */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 23px,
    rgba(35,48,56,0.22) 23px,
    rgba(35,48,56,0.22) 24px
  );
}

.sheet {
  width: 100%;
  max-width: 440px;
  margin: auto;
  min-width: 0;
}

/* =====================================================================
   1) プロフィール＝端末の見出し行
   ===================================================================== */
.ident { margin-bottom: var(--gap-sect); }

.ident-line {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* アバター＝計器表示。モノグラム「め」を角丸枠＋下に短い中央tick（意匠点その2） */
.avatar {
  position: relative;
  width: 56px; height: 56px;
  flex-shrink: 0;
  border-radius: 14px;
  background: var(--accent-dim);
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-mark {
  font-family: var(--jp);
  font-size: 28px;
  font-weight: 600;
  color: var(--accent);
  line-height: 1;
}
/* 枠下の中央tick（目盛り）。計器が「読んでいる」しるし */
.avatar-tick {
  position: absolute;
  bottom: -4px; left: 50%;
  transform: translateX(-50%);
  width: 20px; height: 5px;
  stroke: var(--accent);
}

.ident-text {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
/* 行頭プロンプト記号 ▸（accent）。端末の入力行を思わせる */
.prompt {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--accent);
}
.prompt svg { width: 18px; height: 18px; display: block; }

/* h1 名前＝ページで最も大きい唯一の要素。和文・600・字間ほんの少し */
.name {
  font-family: var(--jp);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.2;
}

/* ハンドル＝名前の“機械読み値”。等幅・字間広め・muted。key名を淡く前置 */
.handle {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .14em;
  color: var(--text);
  margin-top: 16px;
}
.handle-key {
  color: var(--muted);
  letter-spacing: .04em;
  margin-right: 2px;
}
/* keyと値の間に淡い区切り（=）を擬似要素で。設定ファイル感だが控えめに */
.handle-key::after {
  content: " =";
  color: var(--muted);   /* 概念の核「=」を視認できる明度に（旧 border-strong は約1.6:1で不可視だった） */
}

.bio {
  font-family: var(--jp);
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
  margin-top: 12px;
  max-width: 28em;
}
/* 導入文＝bio直後の補助行。少し小さく落とし、自己紹介との段差を1行ぶん作る */
.bio-intro {
  font-size: 13px;
  margin-top: 8px;
  max-width: 30em;
}

/* =====================================================================
   2) 作品＝出力レコード
   ===================================================================== */
.records {
  display: flex;
  flex-direction: column;
  gap: var(--gap-card);
}

.rec {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--pad-card);
  /* 左辺tickバー（意匠点その3）の余地を左に確保 */
  overflow: hidden;
  transition: border-color .15s ease, background .15s ease, transform .05s ease;
}

/* カード左辺の極細tickバー（4本）。hoverで点灯して伸びる。
   ::before に縦のリピート線を描き、既定は不可視→hoverでaccent化。 */
.rec::before {
  content: "";
  position: absolute;
  top: 14px; bottom: 14px; left: 0;
  width: 3px;
  /* 4本の極細目盛り（線/間/線…）。既定はborder色で“非点灯” */
  background-image: repeating-linear-gradient(
    to bottom,
    var(--border) 0, var(--border) 2px,
    transparent 2px, transparent calc((100% - 8px) / 4)
  );
  opacity: 0;
  transition: opacity .15s ease, background-image .15s ease;
}

/* 公開中レコードは“点灯”の意匠を常設で薄く出す＝hover不可のタッチ環境（主たる閲覧環境）でも
   シグネチャーの目盛りが見える。hover時は下の .rec:hover::before でaccentフル点灯へ遷移する。
   準備中レコードは非点灯のまま（2枚の重心差を意図どおり保つ）。 */
.rec-live::before {
  opacity: 1;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(54,207,224,0.32) 0, rgba(54,207,224,0.32) 2px,
    transparent 2px, transparent calc((100% - 8px) / 4)
  );
}

.rec-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* 状態インジケータ（左）。公開中＝塗り四角(accent)・準備中＝中空四角(muted) */
.dot {
  flex-shrink: 0;
  width: 12px; height: 12px;
  border-radius: 3px;
}
.rec-live .dot {
  background: var(--accent);
  border: 1px solid var(--accent);
  /* 点灯のしるし＝ごく淡いグロー（静的・常時アニメではない） */
  box-shadow: 0 0 0 3px rgba(54,207,224,0.12);
}
.rec-soon .dot {
  background: transparent;
  border: 1px solid var(--muted);   /* 中空＝まだ計器が読んでいない */
}

.rec-title {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
/* h2 作品名＝等幅キー。階層差はサイズ＋書体＋色で付ける */
.rec-name {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: .01em;
}
.rec-soon .rec-name { color: var(--soft); }   /* 非点灯トーン */
/* 読み仮名＝和文で小さく脇に。AA確保のため soft(約6.6:1) を使う */
.rec-yomi {
  font-family: var(--jp);
  font-size: 11.5px;
  color: var(--soft);
}

/* ステータス＝等幅ラベル。和文を主、英タグ[LIVE]/[SOON]を補助に */
.status {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.status-ja {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  white-space: nowrap;
}
.status-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  opacity: .72;
}
.status-live .status-ja, .status-live .status-tag { color: var(--live); }
.status-soon .status-ja, .status-soon .status-tag { color: var(--soon); }

/* 説明＝和文の“値”。レコードの左基準に揃え、状態インジケータ幅ぶん字下げ */
.rec-desc {
  font-family: var(--jp);
  font-size: 13px;
  color: var(--muted);
  margin-top: 12px;
  padding-left: 24px;   /* dot(12) + gap(12) と視覚的に揃える */
}
.rec-desc-soon { color: var(--soft); }

/* 説明2行目＝補足の声。1行目を読んだ人向けの一段やわらかい補助行。
   ブロック化して改行し、わずかに小さく・muted寄りに落として主従を付ける。
   準備中レコードでも soft でなく muted に統一＝主の値より一段引く。 */
.rec-sub {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.65;
  color: var(--muted);
}

/* リンク＝等幅のボタン。URL断片ではなくストア名を等幅ラベルで（断片表示も可だが冗長回避）。
   ※padding-leftの字下げは付けない＝2ボタンが狭幅でも横スクロールを出さないため
   （説明/脚注のみ字下げし、操作要素はカード幅いっぱいに広げる）。 */
.links {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.link {
  flex: 1 1 0;
  min-width: 0;         /* flex子の縮小を許可＝ラベルをellipsisで畳める */
  min-height: 44px;     /* タップ標的44px必須（旧42px→是正） */
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--card-hover);
  color: var(--text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  transition: border-color .15s ease, background .15s ease, transform .05s ease;
}
.link-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--accent);
  transition: transform .15s ease;
}
.link-icon svg { width: 17px; height: 17px; display: block; }
.link-label {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .02em;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 行末の外部リンク矢印（線画・currentColor）。塗りはストアロゴのみ */
.link-arrow {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--muted);
  transition: color .15s ease;
}
.link-arrow svg { width: 14px; height: 14px; display: block; }

/* 準備中の脚注＝等幅。AA確保のため muted（旧faintから是正） */
.pending {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--muted);
  margin-top: 12px;
  padding-left: 24px;
}

/* =====================================================================
   3) フッター: X
   ===================================================================== */
.foot {
  margin-top: var(--gap-foot);
  padding-top: 18px;
  position: relative;
  text-align: center;
}
/* 区切りを単純border-topでなく“中央が少し濃い”1pxラインに（意匠点その4・控えめ） */
.foot::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--border) 30%,
    var(--border-strong) 50%,
    var(--border) 70%,
    transparent
  );
}
.x-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;     /* タップ標的44px必須（旧34px→是正） */
  padding: 0 14px;
  border-radius: 10px;
  color: var(--muted);
  text-decoration: none;
  transition: color .15s ease, background .15s ease;
}
.x-icon { display: inline-flex; transition: color .15s ease; }
.x-icon svg { width: 16px; height: 16px; display: block; }
.x-handle {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .04em;
}

/* =====================================================================
   インタラクション（hover/active/focus）。border色だけの変化にしない。
   ===================================================================== */
.rec:hover {
  border-color: var(--border-strong);
  background: #181e26;
}
/* hoverで左tickバーが点灯（accent化）して見える */
.rec:hover::before {
  opacity: 1;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--accent) 0, var(--accent) 2px,
    transparent 2px, transparent calc((100% - 8px) / 4)
  );
}
/* 準備中レコードは点灯させない（accentを使わない＝非点灯トーンを維持） */
.rec-soon:hover::before {
  background-image: repeating-linear-gradient(
    to bottom,
    var(--muted) 0, var(--muted) 2px,
    transparent 2px, transparent calc((100% - 8px) / 4)
  );
}

.link:hover {
  border-color: var(--accent);
  background: #1f2832;             /* 面を1段lift */
}
.link:hover .link-icon { transform: translateY(-1px); }   /* アイコンを軽く持ち上げ */
.link:hover .link-arrow { color: var(--accent); }          /* 矢印をaccent点灯 */
.link:active { transform: scale(.985); }

.x-link:hover { color: var(--accent); background: var(--card); }

/* focus-visible はhoverと別表現で常に判別可能に */
.link:focus-visible,
.x-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* =====================================================================
   レスポンシブ
   ===================================================================== */
/* 360px以下: ボタン字間・bioを微縮小（横スクロールを出さない） */
@media (max-width: 360px) {
  .name { font-size: 23px; }
  .bio { font-size: 13.5px; }
  .link { gap: 7px; padding: 0 10px; }
  .link-label { font-size: 12px; letter-spacing: 0; }
  .status-tag { display: none; }   /* 極小幅では英タグを畳み和文を残す */
  .handle { margin-top: 18px; }    /* アバター下tickとハンドル行の呼吸を確保 */
}

/* 340px以下: 行末の外部リンク矢印を畳んでラベル幅を確保（App Store等を省略させない）。
   target-icon自体は残すのでリンクが外部であることは伝わる。 */
@media (max-width: 340px) {
  .link-arrow { display: none; }
  .link { gap: 6px; padding: 0 9px; }
}

/* 横向き等で十分な幅があるとき: レコードの説明/リンクの字下げは維持 */

/* デスクトップ等の縦長ビューポートでは厳密な縦中央だと上の余白が間延びするので、やや上寄せに締める
   （モバイルは従来どおり margin:auto の中央のまま） */
@media (min-width: 600px) and (min-height: 760px) {
  .sheet { margin-top: 14vh; margin-bottom: auto; }
}

/* =====================================================================
   デスクトップ（≥760px）= 列を“1枚の計器パネル”として額装する。
   ---------------------------------------------------------------------
   広い背景に細い列がぽつんと置かれて「放置感」が出る問題への対処。
   情報は一切足さず、列(.sheet)に枠・内側余白・四隅レジストレーションtick
   を与えて「意図された余白に浮く計器盤」に変える。
   ベースライン罫は body 全面（端から端まで＝列が背景から浮いて見える元凶）
   から外し、パネル内部へ内包する。モバイルは枠なし full-bleed のまま不変。
   ===================================================================== */
@media (min-width: 760px) {
  /* 背景の全面ベースライン罫を消し、ニュートラルな“暗室”に戻す。
     罫はパネル内へ移すことで「列＝独立した計器盤」の額装が成立する。 */
  body {
    background-image: none;
    padding: 56px 24px;
  }

  /* .sheet を額装パネル化。少し広げて内側に余白を取り、面を card に上げる。
     14vh 上寄せ（上の規則）は枠付きパネルだと上方に寄りすぎるため auto 中央へ戻す。 */
  .sheet {
    max-width: 524px;
    margin: auto;
    position: relative;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    /* 内側余白＝計器盤の縁。上下を厚めに取り、要素が縁にぶつからない“間”を作る */
    padding: 48px 44px;
    /* パネル内部に 24px グリッドのベースライン罫を内包（body から移設）。
       上端 padding(48px) は 24 の倍数なので行が縁から整列して始まる。 */
    background-image: repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 23px,
      rgba(35,48,56,0.18) 23px,
      rgba(35,48,56,0.18) 24px
    );
    /* 罫を内側余白の起点（border の内側）から描き、角丸でクリップする */
    background-origin: border-box;
    background-clip: padding-box;
    /* 暗い背景からごくわずかに持ち上げる影。装飾過多にしない極薄。 */
    box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset,
                0 24px 60px -28px rgba(0,0,0,0.55);
    overflow: hidden;
  }

  /* 四隅レジストレーションtick（accent極薄）。計器盤の“位置合わせ罫”。
     ::before=左上＋右上 / ::after=左下＋右下 を radial 風の角マークで描く。
     L字の短い線を4隅に。色は accent を薄く＝点灯しすぎない。 */
  .sheet::before,
  .sheet::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    height: 16px;
    pointer-events: none;
    /* 左右端それぞれに 12px の縦線＋横線でL字コーナーを作る */
    background-image:
      linear-gradient(to right, rgba(54,207,224,0.6) 0, rgba(54,207,224,0.6) 16px, transparent 16px),
      linear-gradient(to left,  rgba(54,207,224,0.6) 0, rgba(54,207,224,0.6) 16px, transparent 16px),
      linear-gradient(to bottom, rgba(54,207,224,0.6) 0, rgba(54,207,224,0.6) 16px, transparent 16px),
      linear-gradient(to bottom, rgba(54,207,224,0.6) 0, rgba(54,207,224,0.6) 16px, transparent 16px);
    background-repeat: no-repeat;
    background-size:
      16px 1px,   /* 左上/左下 横線 */
      16px 1px,   /* 右上/右下 横線 */
      1px 16px,   /* 左 縦線 */
      1px 16px;   /* 右 縦線 */
  }
  /* 上の2tick（左上=横線を左寄せ＋縦線を左端 / 右上=横線を右寄せ＋縦線を右端） */
  .sheet::before {
    top: 14px;
    background-position:
      left top,
      right top,
      left top,
      right top;
  }
  /* 下の2tick（横線を下辺、縦線は下端から上へ） */
  .sheet::after {
    bottom: 14px;
    background-position:
      left bottom,
      right bottom,
      left bottom,
      right bottom;
  }

  /* レコード面はパネル面(card)と同色だと沈むので、パネル内で一段持ち上げて
     「計器盤に載った読み取りレコード」の階層を保つ（モバイルの見た目を再現）。 */
  .rec {
    background: #1b212a;
  }
  .rec:hover {
    background: #1f2630;
  }

  /* フッター区切り線は内側余白に合わせて端まで伸ばす（パネル幅に整合） */
}

/* アニメーション抑制設定を尊重（端末風でも常時アニメは元から無し） */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}