/* 広告の枠（見本と本物の広告。ads.js）と、アンカー広告が出ているあいだのボタンの並び */
/* ---- 広告の枠（ads.js が、config.js の ads が "preview" なら見本を、"live" なら本物の広告を出す） ---- */
/*
 * PC の広い画面では、画面の左右に、AdSense のサイドレール広告（自動広告）が入る余白を空ける。
 * サイドレール広告は Google がページの両側の余白に固定して出すもので、中身に重ねてはいけない。
 * （自分で置く広告ユニットを左右両方に固定するのは、AdSense のポリシーで禁止されている）
 *
 * 余白を空けるのは、幅 1440px 以上で、マウスで操作する端末だけ（横向きのタブレットなどでは空けない。
 * AdSense でも、画面に固定する広告は PC だけ）。1440px は、よくある PC の幅（1440px・1536px（フル HD で拡大率 125%）・1920px）で
 * 出せるようにした値。このとき中身の幅は 1440px − 左右の余白（160px + 32px）× 2 = 1056px で、シミュレーターの
 * 検索結果の列（検索条件の列の右。base.css の .layout）に 600px 以上残る。
 * 広告の幅（--ad-rail-width）を変えるときは、この 1440px も合わせて見直す
 */
.ad-rails {
  display: none;
}

@media (min-width: 1440px) and (hover: hover) and (pointer: fine) {
  .has-ad-rails {
    --ad-rail-width: 160px;
    /* 広告の幅 + 画面の端とのあいだ・中身とのあいだ（16px ずつ） */
    --ad-rail-space: calc(var(--ad-rail-width) + 32px);
  }

  .has-ad-rails body {
    padding-inline: var(--ad-rail-space);
  }

  /* ヘッダーの背景と下の線は画面の端まで伸ばし、中の文字とボタンだけを余白の内側に収める */
  .has-ad-rails .app-header {
    margin-inline: calc(-1 * var(--ad-rail-space));
    padding-inline: calc(var(--ad-rail-space) + 16px);
  }

  /*
   * 左右の見本の入れ物。高さを 0 にしてヘッダーのすぐ下に置き、画面の上端に貼り付ける（sticky）。
   * 見本はその中から左右の余白に出すので、ページの先頭ではヘッダーの下に、スクロールすると画面の上端から 16px の位置に留まる
   */
  .has-ad-rails .ad-rails {
    display: block;
    position: sticky;
    top: 0;
    height: 0;
    margin-inline: calc(-1 * var(--ad-rail-space));
  }

  .ad-rail {
    position: absolute;
    top: 16px;
    width: var(--ad-rail-width);
    height: 600px;
  }

  .ad-rail-left {
    left: 16px;
  }

  .ad-rail-right {
    right: 16px;
  }
}

/*
 * 幅 1440〜1663px で左右の余白を空けるときは、中身の幅が 1280px より狭くなる。そのあいだは、ヘッダーを
 * 「タイトル | ボタン | 更新履歴」の 3 列（base.css の幅 1280px 以上の指定）にせず、幅 1280px 未満のときと同じ並び
 * （更新履歴はボタンの下の行。base.css の .app-header・.changelog・.changelog-scroll）に戻す
 * （3 列のままだと、タイトルの列が狭くなり、タイトルと概要が何行にも折り返してヘッダーが縦に伸びるため）
 */
@media (min-width: 1440px) and (max-width: 1663px) and (hover: hover) and (pointer: fine) {
  .has-ad-rails .app-header.has-changelog {
    display: flex;
  }

  .has-ad-rails .has-changelog .changelog {
    align-self: auto;
    contain: none;
    min-height: auto;
  }

  .has-ad-rails .has-changelog .changelog-scroll {
    flex: 0 1 auto;
    min-height: auto;
    max-height: 6.2em;
  }
}

/*
 * アンカー広告（自動広告。AdSense がスマホの画面の下に固定して出す）が出ているあいだは、ads.js が html に has-ad-anchor を付け、
 * 広告に隠れている高さを --ad-anchor-height に入れる。
 * - 画面の下に留まるボタンの並び（buttons.css の .actions。「検索」と「トップに戻る」）は、広告に隠れないよう、広告の上に上げる。
 *   ボタンを押そうとして広告を押さないよう、ボタンと広告のあいだも空ける（並びの下の余白を 10px から 24px に広げる。並びの背景で埋まる）
 * - ページのいちばん下（フッター）まで見られるよう、ページの下に広告の高さの余白を足す
 */
.has-ad-anchor .actions {
  bottom: var(--ad-anchor-height);
  padding-bottom: 24px;
}

.has-ad-anchor body {
  padding-bottom: var(--ad-anchor-height);
}

/* 見本の枠（本物の広告と取り違えないよう、破線で囲んで大きさを書く） */
.ad-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
}

.ad-preview-label {
  font-weight: 600;
}

/*
 * ページの中の広告の枠（.ad-slot）。
 * 欄のあいだの枠（.ad-slot-section。今はシミュレーターの画面の 3 つのタブの、それぞれのいちばん下（コメント欄の上））は、
 * 上下の欄と同じ幅に置く（.layout・.my-sets-area・.charms-area・.community と同じ）
 */
.ad-slot-section {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 16px 16px;
}

@media (min-width: 1280px) {
  .ad-slot-section {
    max-width: 1680px;
  }
}

/*
 * 「検索」のタブの、検索結果の欄の下の枠。検索結果の欄のいちばん下の「トップに戻る」（検索結果を見ているあいだは画面の下に留まり、
 * 欄の終わりまで来るとそこで止まる）を押そうとして広告を押さないよう、上を広く空ける（ボタンから枠まで約 100px）
 */
.ad-slot-after-results {
  padding-top: 48px;
}

/* 護石チェッカーの画面の、判定のしかたの下（コメント欄の上）の枠。判定のしかたの欄と同じく、2 列の幅いっぱいに置く */
.ad-slot-charm-check {
  grid-column: 1 / -1;
}

/*
 * スキル説明一覧の、スキルの種類の区切り（種類ごとの表のあいだ）の枠（skills-page.js が置く）。表と同じ幅で、
 * 上の表の終わりと、下の種類の見出しから離す（広告が表の続きや、次の種類の一部に見えないように）
 */
.ad-slot-skills {
  margin: 24px 0 16px;
}

/* スキル説明一覧のいちばん下（フッターの上）の枠（skills-page.js が置く）。表と同じ幅で、上の表の終わりから離す */
.ad-slot-skills-end {
  margin-top: 24px;
}

/* 広告の上の「広告」の表示（AdSense で認められている表記） */
.ad-label {
  margin: 0 0 4px;
  font-size: 0.75rem;
  color: var(--muted);
}

/*
 * ヘッダーの下の枠（ads.js がすべての画面に置く）。画面ごとに中身の幅が違うので、横長の広告のいちばん大きいもの（970 × 90）の幅を
 * 上限にして中央に置く。ヘッダーのボタンを押そうとして広告を押さないよう、ヘッダーとのあいだを空け、「広告」の表示をはさむ
 */
.ad-header-slot {
  max-width: calc(970px + 32px);
  margin: 0 auto;
  padding: 16px 16px 0;
}

/*
 * 広告が読み込まれたときに下の中身がずれないよう、高さを先に取っておく。AdSense は、この大きさに収まる広告を出す
 * （小さい広告は枠の上の中央に出て、残りは空く）。
 * - ヘッダーの下（.ad-banner）: 開いてすぐの画面で中身を大きく押し下げないよう、横長だけにする。幅 861px 以上は高さ 90px
 *   （728 × 90・970 × 90 など）、それより狭い画面（スマホ・縦向きのタブレット）は小さめの横長（高さ 100px。320 × 100 など）
 * - ページの中（.ad-inline。欄の終わりと一覧の途中）: 横長に限らず、いろいろな高さの広告が入るようにする。幅 861px 以上は高さ 280px
 *   （横長の 728 × 90、長方形の 336 × 280・300 × 250、大きい横長の 970 × 250 など）。280px は、よく出る長方形でいちばん大きい
 *   336 × 280 が入る高さで、これより高い広告（縦長の 300 × 600 など）は、欄の終わりを大きく伸ばすので入れない。
 *   それより狭い画面は長方形（高さ 250px。300 × 250 など）
 */
.ad-banner {
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 16px;
  height: 90px;
}

.ad-inline {
  height: 280px;
}

.ad-size-narrow {
  display: none;
}

/* 本物の広告ユニット（ads.js の adUnit）。高さは見本と同じ（.ad-banner・.ad-inline）で、幅は枠いっぱい */
ins.adsbygoogle {
  display: block;
  width: 100%;
}

@media (max-width: 860px) {
  .ad-banner {
    height: 100px;
  }

  .ad-inline {
    height: 250px;
  }

  .ad-size-wide {
    display: none;
  }

  .ad-size-narrow {
    display: inline;
  }
}