/* ==========================================================================
   Cookie 同意バナー

   本リポジトリには SCSS のコンパイル環境が無く、common.min.css は外部で
   ビルドしたものを直接コミットしている。SCSS 側に追記しても再ビルドできず
   配信物と乖離するため、Issue #5 の判断として独立した CSS を 1 枚追加する。

   既存のカスケード（common.min.css で @layer bootstrap, drawer, slick,
   fontawesome, base, helper, module の順に定義）に載せるため、全体を
   @layer module で囲む。この指定が効くよう、index.html では common.min.css /
   style.min.css より後にこのファイルを読み込むこと。
   ========================================================================== */
@layer module {
  :root {
    /* バナーの実測高さ。cookie-consent.js が更新する。 */
    --cookie-banner-height: 0px;
  }

  /* --------------------------------------------------------------------------
     バナー本体
     -------------------------------------------------------------------------- */
  .cookie-banner {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    /* 追従 CTA（.floating = 100）より上に置く。本 LP は drawer 未使用。 */
    z-index: 101;
    border-top: var(--sz-4) solid var(--color-accent);
    background-color: var(--color-white);
    box-shadow: 0 -4px 20px rgba(39, 58, 68, 0.18);
  }

  .cookie-banner[hidden] {
    display: none;
  }

  .cookie-banner__inner {
    display: flex;
    flex-direction: column;
    gap: var(--sz-20);
    padding: var(--sz-24) var(--sz-30) var(--sz-28);
  }

  .cookie-banner__text {
    margin: 0;
    color: var(--color-text);
    font-size: var(--sz-26);
    line-height: 1.7;
  }

  .cookie-banner__link {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    transition: opacity 0.2s ease;
  }

  .cookie-banner__link:hover {
    color: var(--color-primary);
    opacity: 0.75;
  }

  /* --------------------------------------------------------------------------
     ボタン
     -------------------------------------------------------------------------- */
  .cookie-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sz-16);
  }

  .cookie-banner__actions[hidden] {
    display: none;
  }

  .cookie-banner__button {
    flex: 1 1 var(--sz-240);
    min-height: var(--sz-72);
    padding: var(--sz-12) var(--sz-30);
    border: var(--sz-2) solid var(--color-gray);
    border-radius: 100vh;
    background-color: var(--color-white);
    color: var(--color-text);
    font-family: inherit;
    font-size: var(--sz-26);
    font-weight: 700;
    line-height: 1.3;
    cursor: pointer;
    transition: opacity 0.2s ease;
  }

  .cookie-banner__button:hover {
    opacity: 0.75;
  }

  .cookie-banner__button--primary {
    border-color: var(--color-accent);
    background-color: var(--bg-accent);
    color: var(--color-white);
  }

  /* --------------------------------------------------------------------------
     保存に失敗したときの案内
     -------------------------------------------------------------------------- */
  .cookie-banner__error {
    display: flex;
    flex-direction: column;
    gap: var(--sz-16);
    margin: 0;
    color: var(--color-accent);
    font-size: var(--sz-24);
    line-height: 1.7;
  }

  .cookie-banner__error[hidden] {
    display: none;
  }

  .cookie-banner__dismiss {
    align-self: flex-start;
  }

  /* --------------------------------------------------------------------------
     追従 CTA・ページトップ・フッターとの重なり回避
     バナーは position: fixed で文書の高さを占めないため、表示中は body に
     バナー高さ分の余白を足し、最下部までスクロールしてもフッターの
     コピーライト帯が隠れないようにする。
     -------------------------------------------------------------------------- */
  .is-cookie-banner-visible {
    padding-bottom: var(--cookie-banner-height);
  }

  .is-cookie-banner-visible .floating {
    bottom: var(--cookie-banner-height);
  }

  .is-cookie-banner-visible .pagetop {
    bottom: calc(5% + var(--cookie-banner-height));
  }

  /* --------------------------------------------------------------------------
     フッターの導線
     「Cookie設定」は button だが、見た目を隣の footer__link（a）に揃える。
     .footer__menu は全幅で display: grid のため、以下の 2 点に注意が必要:
       - button はグリッドアイテムとして伸長せず、トラック内で中央に寄る
         → width: 100% で列幅いっぱいに広げ、左端をリンクと揃える
       - 余白は .footer__menu a（詳細度 0,1,1）が .footer__link の padding: 0
         （0,1,0）に勝っているため、実際に効いている .5em 1.5em に合わせる
     -------------------------------------------------------------------------- */
  .footer__link--button {
    width: 100%;
    padding: 0.5em 1.5em;
    border: 0;
    background-color: transparent;
    color: inherit;
    font-family: inherit;
    /* .footer__link と同じ。inherit にすると .footer の値になってしまう。 */
    font-size: var(--sz-20);
    font-weight: inherit;
    line-height: inherit;
    /* button の UA 既定（text-align: center）を打ち消す。 */
    text-align: inherit;
    cursor: pointer;
    transition: 0.3s;
  }

  /* ホバーは .footer__menu a:hover（詳細度 0,2,1）と同じ反転表示にする。 */
  .footer__link--button:hover {
    color: var(--color-footer-bg);
    background-color: var(--color-footer-text);
  }

  /* --------------------------------------------------------------------------
     PC
     -------------------------------------------------------------------------- */
  @media screen and (min-width: 992px) {
    .cookie-banner__inner {
      flex-direction: row;
      align-items: center;
      gap: var(--sz-40);
      width: var(--sz-1150);
      margin-inline: auto;
      padding: var(--sz-20) 0 var(--sz-22);
    }

    .cookie-banner__text {
      font-size: var(--sz-18);
    }

    .cookie-banner__actions {
      flex: 0 0 auto;
      flex-wrap: nowrap;
    }

    .cookie-banner__button {
      flex: 0 0 auto;
      min-height: var(--sz-56);
      padding: var(--sz-10) var(--sz-32);
      font-size: var(--sz-18);
    }

    .cookie-banner__error {
      font-size: var(--sz-16);
    }
  }
}