@charset "UTF-8";
/* =========================================================
   nft.css — NFT Page 専用（PC 1996:12830 / TB 1996:12836 / SP 1996:12855）
   値は Figma 実値（px ÷ 10 = rem）。トークンは common.css :root
   ========================================================= */

/* =========================================================
   Image PlaceHolder（全幅 PC h560 / TB h420 / SP h320）
   ========================================================= */
.nft-hero { position: relative; height: 56rem; overflow: hidden; }
.nft-hero img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }

@media (max-width: 1279.98px) { .nft-hero { height: 42rem; } }
@media (max-width: 833.98px) { .nft-hero { height: 32rem; } }

/* =========================================================
   Artist Info
   PC/TB：[情報 flex1] gap(150/30) [Auction 295]
   SP：見出し → Auction → Created By → Description → Details → Tags（gap20）
   ========================================================= */
.nft-info { padding: 4rem 0; }
.nft-info__inner { display: flex; align-items: flex-start; gap: 15rem; }
.nft-info__main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3rem; }
.nft-info__head { display: flex; flex-direction: column; gap: 1rem; }
.nft-info__title { font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-h2); }
.nft-info__minted { font-size: 2.2rem; line-height: 1.6; color: var(--color-caption); }
.nft-info__details { display: flex; flex-direction: column; gap: 3rem; }
.nft-info__block { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.nft-info__label { font-family: var(--ff-mono); font-weight: 700; font-size: 2.2rem; line-height: 1.6; color: var(--color-caption); }
/* Figma PC：Tags ラベルのみ Work Sans SemiBold 22 / lh1.4 */
.nft-info__label--tags { font-family: var(--ff-work); font-weight: 600; line-height: 1.4; }

.nft-info__artist { width: 100%; display: flex; align-items: center; gap: 1.2rem; font-weight: 600; font-size: 2.2rem; line-height: 1.4; transition: color .2s ease; }
.nft-info__artist:hover { color: var(--color-cta); }
.nft-info__artist .c-avatar { width: 2.4rem; height: 2.4rem; }

/* Figma描画の行送りは整数px（22×1.6=35.2→35 / 16×1.4=22.4→22）。17〜21行の本文で累積差が出るため実描画ピッチに合わせる */
.nft-info__desc { width: 100%; font-size: 2.2rem; line-height: 3.5rem; }

.nft-info__link { width: 100%; display: flex; align-items: flex-start; gap: 1rem; font-size: 2.2rem; line-height: 1.6; transition: color .2s ease; }
.nft-info__link:hover { color: var(--color-cta); }
.nft-info__link img { width: 3.2rem; height: 3.2rem; flex-shrink: 0; }

.nft-info__block--tags { gap: 2rem; }
.nft-info__tags { width: 100%; display: flex; align-items: flex-start; gap: 2rem; }
/* Figma の描画は全大文字（原文は Animation / illustration / moon） */
.nft-info__tag {
  display: flex; align-items: center; justify-content: center; height: 4.6rem; padding: 0 3rem;
  border-radius: var(--radius); background: var(--color-bg-secondary);
  font-weight: 600; font-size: 1.6rem; line-height: 1.4; white-space: nowrap; text-transform: uppercase;
  transition: background-color .2s ease;
}
.nft-info__tag:hover { background: var(--color-caption); }

/* Auction Timer + CTA */
.nft-auction {
  width: 29.5rem; flex-shrink: 0; display: flex; flex-direction: column; gap: 3rem; padding: 3rem;
  border-radius: var(--radius); background: var(--color-bg-secondary);
}
.nft-auction__timer {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 1rem;
  border-radius: var(--radius); background: var(--color-timer-bg);
  -webkit-backdrop-filter: blur(0.5rem); backdrop-filter: blur(0.5rem);
  font-family: var(--ff-mono);
}
.nft-auction__label { font-size: 1.2rem; line-height: 1.1; }
.nft-auction__row { display: flex; align-items: flex-start; gap: 1rem; }
/* Figma：h61 固定だが中身(45.6+5+13.2=63.8)が溢れ、描画上の Timer 高は 87（実測：Place Bid 位置一致）→ 内容高に追従 */
.nft-auction__unit { flex: 1 1 0; min-width: 0; min-height: 6.1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.nft-auction__num { font-weight: 700; font-size: 3.8rem; line-height: 1.2; }
.nft-auction__unit-label { flex: none; font-size: 1.2rem; line-height: 1.1; }
.nft-auction__colon { font-weight: 700; font-size: 2.8rem; line-height: 1.4; white-space: nowrap; }
.nft-auction__btn { width: 100%; }

@media (max-width: 1279.98px) {
  .nft-info__inner { gap: 3rem; }
  .nft-info__minted { font-size: 1.6rem; line-height: 1.4; }
  .nft-info__label, .nft-info__label--tags { font-family: var(--ff-mono); font-weight: 400; font-size: 1.6rem; line-height: 1.4; }
  .nft-info__artist { font-weight: 400; font-size: 1.6rem; }
  .nft-info__desc { font-size: 1.6rem; line-height: 2.2rem; }
  .nft-info__link { font-size: 1.6rem; line-height: 1.4; }
  .nft-info__link img { width: 2.4rem; height: 2.4rem; }
  .nft-info__tags { flex-direction: column; }
}
@media (max-width: 833.98px) {
  .nft-info__inner { flex-direction: column; align-items: stretch; gap: 2rem; }
  .nft-info__main, .nft-info__details { display: contents; }
  .nft-info__head { order: 1; }
  .nft-auction { order: 2; width: 100%; }
  .nft-info__block { order: 3; }
  .nft-info__title { font-size: 2.8rem; line-height: 1.4; }
}

/* =========================================================
   More NFTs From The Artist（地 #2B2B2B ／ カード地 #3B3B3B）
   ========================================================= */
.more { display: flex; flex-direction: column; align-items: center; gap: 6rem; padding: 8rem 0; }
.more__head { display: flex; align-items: flex-start; gap: 10rem; }
.more__title { flex: 1 1 0; min-width: 0; font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-h3); }
.more__btn { flex-shrink: 0; }
.more__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6rem 3rem; }

/* NFT Card（index.html「Discover more NFTs」と同一の部品。index.css から複製＝ページ単位で読み込むため） */
.nft-card {
  display: flex; flex-direction: column; height: 46.9rem; min-width: 0;
  border-radius: var(--radius); background: var(--color-bg-secondary); overflow: hidden;
  transition: transform .25s ease;
}
.nft-card:hover { transform: translateY(-0.4rem); }
.nft-card__img { display: block; height: 29.5rem; flex-shrink: 0; }
.nft-card__img img { width: 100%; height: 100%; object-fit: cover; }
.nft-card__info { display: flex; flex-direction: column; gap: 2.5rem; padding: 2rem 3rem 2.5rem; }
.nft-card__head { display: flex; flex-direction: column; gap: 0.5rem; }
.nft-card__name { font-weight: 600; font-size: 2.2rem; line-height: 1.4; }
.nft-card__artist { display: flex; align-items: flex-start; gap: 1.2rem; font-family: var(--ff-mono); font-size: 1.6rem; line-height: 1.4; }
.nft-card__artist .c-avatar { width: 2.4rem; height: 2.4rem; }
.nft-card__meta { display: flex; font-family: var(--ff-mono); }
.nft-card__price, .nft-card__bid { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 0.8rem; }
.nft-card__price { padding-right: 2.1rem; text-align: left; }
.nft-card__bid { text-align: right; }
.nft-card__label { font-size: 1.2rem; line-height: 1.1; color: var(--color-caption); }
.nft-card__value { font-size: 1.6rem; line-height: 1.4; }

@media (max-width: 1279.98px) {
  .more { padding: 4rem 0; }
  .more__row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 833.98px) {
  /* SP：見出し → カード2枚 → ボタン（全幅）。gap30。カードは PC と同寸（h469 / 画像295） */
  .more { gap: 3rem; }
  .more__head { display: contents; }
  .more__title { order: 1; flex: none; width: var(--content-w); }
  .more__row { order: 2; grid-template-columns: 1fr; gap: 3rem; }
  .more__btn { order: 3; width: var(--content-w); }
}