/* ==========================================================================
   GHOST NOTE RECORDS — WordPress用の追加スタイル
   デザイン本体は main.css（プレビューで確定したもの）。ここにはWordPressで必要になった分だけを書く。
   ========================================================================== */

/* ---------- 管理バー（ログイン中だけ表示）と固定ヘッダーが重ならないようにする ---------- */
.admin-bar .gnr-header { top: calc(14px + var(--wp-admin--admin-bar--height, 32px)); }
.admin-bar .gnr-hero__pin { top: var(--wp-admin--admin-bar--height, 32px); height: calc(var(--vh) * 100 - var(--wp-admin--admin-bar--height, 32px)); }
.admin-bar .gnr-skip:focus { top: calc(12px + var(--wp-admin--admin-bar--height, 32px)); }
@media (max-width: 860px) {
  .admin-bar .gnr-header { top: calc(10px + var(--wp-admin--admin-bar--height, 46px)); }
  .admin-bar .gnr-nav { padding-top: calc(90px + var(--wp-admin--admin-bar--height, 46px)); }
}
/* ---------- 曲の補足 ---------- */
.gnr-release__note { font-size: 12px; line-height: 1.7; color: #b4b7bd; letter-spacing: 0.04em; }
.gnr-release__links .gnr-link { align-self: flex-start; }

/* ---------- アーティスト紹介文（管理画面で入力した文章） ---------- */
.gnr-artist__bio p + p { margin-top: 0.9em; }

/* ---------- VISUALS：画像と動画 ---------- */
.gnr-visuals__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gnr-visuals__frame.has-image::after { content: ""; position: absolute; inset: 0; background: rgba(10, 10, 11, 0.28); pointer-events: none; }
.gnr-visuals__frame.has-image .gnr-visuals__copy { z-index: 1; }
.gnr-visuals__play {
  position: absolute; left: 18px; bottom: 16px; z-index: 2;
  display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 16px;
  background: var(--white); color: var(--ink); border: 1px solid var(--white); cursor: pointer;
  font: 700 12px/1 var(--font-display); letter-spacing: 0.16em; text-decoration: none;
}
.gnr-visuals__play:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; box-shadow: 0 0 0 5px var(--ink); }
.gnr-visuals__frame.is-playing { display: block; background: #000; }
.gnr-visuals__frame.is-playing::after { display: none; }
.gnr-visuals__frame.is-playing iframe,
.gnr-visuals__frame.is-playing video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- フォーム：迷惑送信対策の見えない欄、送信完了、送信中 ---------- */
.gnr-form__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.gnr-form--done { padding: clamp(28px, 4vw, 56px); }
.gnr-form--done p { font-size: 14px; line-height: 2; }
.gnr-form__done-title { font-size: clamp(20px, 2.2vw, 30px) !important; font-weight: 600; letter-spacing: 0.08em; margin-bottom: 10px; }
.gnr-form--done:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.gnr-form__submit[disabled] { opacity: 0.6; cursor: progress; }

/* ---------- フッターのSNSリンク ---------- */
.gnr-footer__sns { margin: 0; }

/* ---------- フッターのコピーライトと制作クレジット（クレジットはコピーライトの下に積む。書体・大きさ・字間・色は同じ） ---------- */
.gnr-footer__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.gnr-footer__credit { font: 700 12px/1 var(--font-display); letter-spacing: 0.16em; color: var(--steel); }
.gnr-footer__credit .gnr-slashes { margin-right: 0.16em; }   /* 「//」の左右の空きをそろえる（左側には文字の字間が付くため） */
.gnr-footer__credit a { display: block; padding: 4px 0; color: inherit; text-decoration: none; transition: color 0.25s linear; }
@media (hover: hover) { .gnr-footer .gnr-footer__credit a:hover { color: #a9adb4; text-decoration: none; } }   /* 乗せたときだけ少し明るく */
@media (max-width: 860px) { .gnr-footer__meta { align-items: flex-start; } }

/* ---------- トップページ以外の簡易ページ ---------- */
.gnr-page { max-width: 820px; margin: 0 auto; padding: clamp(120px, 14vw, 200px) var(--pad) clamp(80px, 10vw, 140px); }
.gnr-page__title { font: 700 clamp(30px, 5vw, 64px)/1.1 var(--font-display); letter-spacing: -0.01em; margin-bottom: clamp(24px, 4vw, 48px); padding-top: 14px; border-top: 1px solid var(--ink); }
.gnr-page__title a { text-decoration: none; }
.gnr-page__content { font-size: 15px; line-height: 2.1; }
.gnr-page__content > * + * { margin-top: 1.4em; }
.gnr-page__content a:not(.gnr-btn) { text-decoration: underline; text-underline-offset: 4px; }
.gnr-page__content ul, .gnr-page__content ol { padding-left: 1.4em; list-style: revert; }
.gnr-page__article + .gnr-page__article { margin-top: clamp(48px, 8vw, 96px); }

/* ---------- MUSIC PRODUCTION：制作者（枠なし。下に細い線と余白を置いてメニュー一覧へつなぐ） ---------- */
.gnr-creators {
  display: grid; grid-template-columns: minmax(0, calc(50vw - var(--pad))) minmax(0, 1fr);   /* 右列の左端 = 画面幅の50%（メニューの説明文と同じ） */
  row-gap: clamp(28px, 3.4vw, 52px);
  padding-bottom: clamp(36px, 4.6vw, 72px); margin-bottom: clamp(44px, 5.6vw, 90px);
  border-bottom: 1px solid var(--ink);
}
.gnr-creator { min-width: 0; padding-right: clamp(16px, 3vw, 48px); }
.gnr-creator__name { font: 700 clamp(56px, 8.4vw, 150px)/0.9 var(--font-display); letter-spacing: -0.012em; text-transform: uppercase; overflow-wrap: anywhere; }
.gnr-creator__role { margin-top: clamp(12px, 1.4vw, 22px); max-width: 26em; font-size: clamp(14px, 1.2vw, 17px); font-weight: 600; letter-spacing: 0.08em; line-height: 1.9; word-break: keep-all; overflow-wrap: anywhere; }
@media (max-width: 860px) {
  .gnr-creators { grid-template-columns: minmax(0, 1fr); }   /* EA → ERAN の順に縦並び */
  .gnr-creator { padding-right: 0; }
  .gnr-creator__name { font-size: 21vw; }
}

/* ---------- 最後の「GHOST // NOTE」を、背景のcanvas（石・液体・飛沫）より奥へ送る ----------
   石や飛沫が文字の手前を通る。液体のときは、液体の内側だけ同じ文字が歪んで映る（メインビジュアルの英語コピーと同じ仕組み）。
   文字は飾り（aria-hidden）で、リンクやボタンは含まない。セクション内のフォームやリンクの重なり順は変わらない */
.gnr-contact__giant { position: relative; z-index: -2; }

/* ==========================================================================
   英語版（/en/）・繁体字版（/zh-hant/）
   ========================================================================== */

/* ---------- ヘッダー：言語の切り替え（JP / EN / 繁中）。書体・大きさ・字間はメニューと同じ ---------- */
.gnr-nav { margin-left: auto; }   /* ロゴは左、メニューと切り替えは右に寄せる */
.gnr-lang { position: relative; z-index: 2; display: flex; align-items: center; margin-left: 6px; color: var(--ink); transition: color 0.25s linear; font: 700 12px/1 var(--font-display); letter-spacing: 0.16em; }
.gnr-lang.is-on-dark { color: var(--white); }
.gnr-nav-open .gnr-lang, .gnr-nav-open .gnr-lang.is-on-dark { color: var(--ink); }   /* スマホのメニューは白い面なので黒に戻す */
.gnr-lang li { display: flex; align-items: center; }
.gnr-lang li + li::before { content: "/"; opacity: 0.45; }
.gnr-lang { flex: none; }   /* 幅が足りないときも、切り替えは折り返さず縮めない */
.gnr-lang a { display: block; padding: 12px 8px 11px; opacity: 0.45; white-space: nowrap; transition: opacity 0.25s linear; }
.gnr-lang a[aria-current] { opacity: 1; }
@media (hover: hover) { .gnr-lang a:hover { opacity: 1; } }
@media (max-width: 860px) {
  .gnr-lang { margin-left: auto; letter-spacing: 0.1em; }
  .gnr-lang a { padding: 16px 5px 15px; }   /* 指で押しやすい高さ（44px） */
  .gnr-menu { padding-left: 8px; }
}
/* 幅の狭いスマートフォン：3言語とロゴ・MENU が1行に収まるように、左右の空きを詰める */
@media (max-width: 400px) {
  .gnr-lang { letter-spacing: 0.06em; }
  .gnr-lang a { padding-left: 3px; padding-right: 3px; }
  .gnr-lang a:lang(zh-Hant) { letter-spacing: 0; }
  .gnr-menu { padding-left: 6px; gap: 8px; }
}

/* ---------- 曲名の英字表記（英語版でだけ、曲名の下に小さく添える） ---------- */
.gnr-release__title-en { margin: -2px 0 8px; font: 700 12px/1.5 var(--font-display); letter-spacing: 0.16em; color: #b4b7bd; overflow-wrap: anywhere; }

/* ---------- 英語の文章：日本語用に広げてある字間を、欧文に合わせて詰める ---------- */
.gnr-lang-en .gnr-hero__jp { letter-spacing: 0.06em; }
.gnr-lang-en .gnr-visuals__copy { letter-spacing: 0.02em; }
.gnr-lang-en .gnr-production__jp { letter-spacing: 0.01em; }
.gnr-lang-en .gnr-contact__jp { letter-spacing: 0.03em; }
.gnr-lang-en .gnr-creator__role { letter-spacing: 0.04em; word-break: normal; overflow-wrap: break-word; }
.gnr-lang-en .gnr-form__tag, .gnr-lang-en .gnr-form__submit { letter-spacing: 0.12em; text-transform: uppercase; }

/* ---------- 繁体字版：日本語フォントを使わず、繁体字のフォントを優先する（日本語フォントだと漢字が日本の字形になるため） ----------
   Webフォントは読み込まない（端末に入っているフォントを使う）：Apple＝PingFang TC／Android＝Noto Sans TC（CJK TC）／Windows＝Microsoft JhengHei */
.gnr-lang-zh {
  --font-zh: "PingFang TC", "Noto Sans TC", "Noto Sans CJK TC", "Microsoft JhengHei", "Heiti TC", sans-serif;
  --font-jp: "D-DIN", var(--font-zh);
  --font-display: "D-DIN", "DIN Alternate", "Bahnschrift", "Helvetica Neue", Arial, var(--font-zh);
}
/* 言語の切り替えの「繁中」は、どの言語のページでも繁体字のフォントで表示する */
.gnr-lang a:lang(zh-Hant) { font-family: "D-DIN", "PingFang TC", "Noto Sans TC", "Noto Sans CJK TC", "Microsoft JhengHei", "Heiti TC", sans-serif; letter-spacing: 0.08em; }
/* 繁体字版でも、日本語のまま載せるもの（曲名・アーティスト名、日本語のプライバシーポリシー本文）は日本語フォントで表示する */
.gnr-lang-zh .gnr-release__title, .gnr-lang-zh .gnr-release__artist, .gnr-lang-zh .gnr-artist__name, .gnr-lang-zh [lang="ja"] {
  font-family: "D-DIN", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif;
}
/* 繁体字の文章：字間は日本語版に近いまま、句読点の詰め（palt）は使わない */
.gnr-lang-zh .gnr-form__tag { letter-spacing: 0.12em; }