/* =========================================================
   利用規約表示画面 CSS
   反映元：デザインシステム.md §3（背景装飾）／§4-15（モーダル）
   ========================================================= */

.terms-of-use-page {
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-bg-gradient);
  padding: var(--stage-padding);
  position: relative;
  overflow: hidden;
}

/* デザインシステム §3：認証フロー画面の背景装飾 */
.terms-of-use-page::before,
.terms-of-use-page::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

/* 左側ドット */
.terms-of-use-page::before {
  top: 40px;
  left: -60px;
  width: 220px;
  height: 220px;
  background-image: radial-gradient(circle, rgba(37, 99, 235, .18) 2px, transparent 2px);
  background-size: 16px 16px;
}

/* 右下リング */
.terms-of-use-page::after {
  right: -120px;
  bottom: -120px;
  width: 320px;
  height: 320px;
  border: 40px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
}

/* 右上の斜めシェイプ */
.terms-of-use-page__decoration {
  position: absolute;
  top: 88px;
  right: -48px;
  z-index: 0;
  pointer-events: none;
  width: 240px;
  height: 56px;
  border-radius: 28px;
  background: rgba(255, 255, 255, .35);
  transform: rotate(-38deg);
}

.terms-of-use-card {
  /* DS 4-15「L」サイズを使用（画面固有の独自幅は作らない） */
  width: var(--modal-width-l); /* min(920px, 92vw) */

  /* PDF表示領域は設計書に従い固定高さとし、長文は領域内でスクロールする。 */
  height: min(calc(min(70vh, 640px) + 120px), calc(100vh - 48px));
  max-height: calc(100vh - 48px);

  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: var(--color-card-bg);
  border-radius: var(--radius-card);

  box-shadow: var(--shadow-pop);

  overflow: hidden;
  position: relative;
  z-index: 1;
}

/* 別タブの表示画面には同意フッターがないため、その高さを外形に加えない。 */
.terms-of-use-card--display {
  height: min(calc(min(70vh, 640px) + 56px), calc(100vh - 48px));
}

/* DS 4-14：認証フロー系の全画面エラー */
.terms-of-use-full-error {
  width: 100%;
  max-width: min(600px, 44vw);
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  padding: 44px 40px;
  background-color: var(--color-card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  text-align: center;
}

.terms-of-use-full-error__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--gap-unit);
  border-radius: 50%;
  background-color: var(--color-error-icon-bg);
  color: var(--color-error);
  font-size: 40px;
  line-height: 1;
}

.terms-of-use-full-error__title {
  margin: 0 0 var(--gap-unit);
  color: var(--color-text-main);
  font: 700 22px/1.4 var(--font-family);
}

.terms-of-use-full-error__message {
  margin: 0;
  color: var(--color-text-sub);
  font: 400 15px/1.6 var(--font-family);
}

.terms-of-use-frame {
  /* 本文（PDF表示領域）のみがスクロール対象 */
  flex: 1 1 min(70vh, 640px);
  min-height: 0;
  width: 100%;
  height: min(70vh, 640px);
  max-height: min(70vh, 640px);
  border: none;
  overflow-y: auto;
}

.terms-of-use-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
    height: 56px;
    min-height: 56px;
    padding: 0 20px;
    border-bottom: 1px solid var(--color-border);
}

.terms-of-use-header__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-icon-badge);
    height: var(--size-icon-badge);
    border-radius: 50%;
    background-color: var(--color-primary-bg);
    color: var(--color-primary);
    font-size: 20px;
}

.terms-of-use-header__title {
    margin: 0;
    font: var(--font-card-title);
    color: var(--color-text-main);
}

.terms-of-use-footer {
    flex-shrink: 0;
    padding: var(--gap-unit) var(--gap-unit) calc(var(--gap-unit) * .75);
    border-top: 1px solid var(--color-border);
}

.terms-of-use-footer__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--gap-unit);
}

.terms-of-use-footer__form {
    margin: 0;
}

.terms-of-use-footer__agree-btn,
.terms-of-use-footer__disagree-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--gap-unit) * 0.5);
    min-width: 90px;
    height: var(--size-touch-target-min);
    padding: 0 calc(var(--gap-unit) * 2);
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: var(--radius-el);
    font: var(--font-button);
    cursor: pointer;
}

.terms-of-use-footer__disagree-btn {
    background: var(--color-card-bg);
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

.terms-of-use-footer__agree-btn:hover {
    background: var(--color-primary-hover);
    color: white;
}

.terms-of-use-footer__agree-btn:disabled {
    background: #cbd5e1;
    color: var(--color-disabled-text);
    opacity: 0.5;
    cursor: not-allowed;
}

.terms-of-use-footer__disagree-btn:hover {
    background: var(--color-primary-bg);
    color: var(--color-primary);
}

.terms-of-use-agreement-error {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--gap-unit) * .5);
    margin-top: var(--gap-unit);
    color: var(--color-error);
    font: var(--font-label);
    min-height: 1.4em;
}

.terms-of-use-agreement-error--hidden {
    visibility: hidden;
}

.terms-of-use-agreement-error__icon {
    font-size: 18px;
}

/* レスポンシブ */
@media (max-width: 1023px) {
  .terms-of-use-page {
    padding: var(--stage-padding-mobile);
  }

  .terms-of-use-full-error {
    max-width: none;
  }

  /* 変更⑤：--modal-width-l が min(920px, 92vw) で狭幅対応済みのため、
     画面固有の width:100% / height:80vh の上書きは廃止（DS「独自幅を作らない」に準拠） */

  .terms-of-use-page::before {
    display: none;
  }

  .terms-of-use-page::after {
    width: 220px;
    height: 220px;
    right: -100px;
    bottom: -100px;
  }

  .terms-of-use-page__decoration {
    display: none;
  }
}