@charset "utf-8";

/* ==========================================
   リデザインの受領CSS（common.css / style.css / mypage.css）に対する追記。
   受領物は差し替えが入るため直接編集せず、こちら側で補完した分だけを置く。
   ========================================== */

/* 選択肢に説明文を添えるパターン（配送方法の3択など）。
   .choice-list__name だけでは1行しか置けないため、名前と説明を縦に積む器を足す */
.choice-list__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.choice-list__desc {
  color: var(--color-text-sub);
  font-size: var(--fz-xs);
  line-height: 1.5;
}

/* 入力欄の右端に「留め」「止め」を貼り付けて見せる（受け取り先名の入力） */
.c-input-suffix {
  display: inline-flex;
  align-items: stretch;
  max-width: 100%;
}

.c-input-suffix .c-input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.c-input-suffix__tag {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-s);
  background-color: var(--color-primary);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  color: var(--color-text-invert);
  font-weight: 700;
  white-space: nowrap;
}

/* ==========================================
   バリデーションエラーの表示

   echoError() が吐く <span class="error"> は旧デザインの t.css / res.css にしか
   スタイルが無く、リデザイン後のページでは素のテキストとして出ていた。
   注意書きの赤が多い画面ではエラーが埋もれるため、共通の見た目をここで与える。
   ========================================== */
.error {
  display: block;
  margin-top: var(--space-2xs);
  padding: var(--space-2xs) var(--space-xs);
  background-color: var(--color-danger-bg);
  border-left: 3px solid var(--color-danger);
  border-radius: var(--radius-s);
  color: var(--color-danger);
  font-size: var(--fz-s);
  font-weight: 700;
  line-height: 1.6;
}

/* フォーム先頭に出す「N件のエラー」のまとめ。該当欄へのリンクを並べる */
.form-errors {
  margin-bottom: var(--space-m);
  scroll-margin-top: var(--space-m);
}

.form-errors:focus {
  outline: 2px solid var(--color-danger);
  outline-offset: 2px;
}

.form-errors__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-top: var(--space-2xs);
  list-style: none;
}

.form-errors__list li {
  position: relative;
  padding-left: 1.1em;
}

.form-errors__list li::before {
  content: "・";
  position: absolute;
  top: 0;
  left: 0;
}

.form-errors__link {
  color: var(--color-danger);
  font-weight: 700;
  text-decoration: underline;
}

/* ==========================================
   出品フォームの画像枠（.photo-grid の追補）

   受領CSSには「添付済み(--filled)」の見た目まではあるが、未添付との出し分けと
   引き継いだ画像を外すボタンが無いため、その分だけ足す。
   マイページの画像編集(edit)は常に --filled なので影響しない。
   ========================================== */
.photo-grid__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.photo-grid__box--filled .photo-grid__placeholder {
  display: none;
}

/* 未添付のときはサムネイルと「変更」のオーバーレイを出さない */
.photo-grid__box:not(.photo-grid__box--filled) .photo-grid__preview,
.photo-grid__box:not(.photo-grid__box--filled) .photo-grid__overlay {
  display: none;
}

/* 引き継いだ／選んだ画像を外すボタン。枠の右上に重ねる */
.photo-grid__drop {
  position: absolute;
  top: var(--space-2xs);
  right: var(--space-2xs);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background-color: rgba(0, 0, 0, 0.6);
  border: 0;
  border-radius: var(--radius-full);
  color: var(--color-text-invert);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.photo-grid__drop:hover {
  background-color: var(--color-danger);
}

.photo-grid__drop[hidden] {
  display: none;
}

/* ==========================================
   登録配送先（プロフィールの「配送先の登録」）

   同じ画面に「一覧＋各行の編集フォーム」と「追加フォーム」が種別ごとに並ぶため、
   既定では畳んでおき、開いたときだけ入力欄を見せる（<details> を使用）。
   ========================================== */
.address-item__summary {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
  padding: var(--space-xs) 0;
  cursor: pointer;
  list-style: none;
}

.address-item__summary::-webkit-details-marker {
  display: none;
}

.address-item__name {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.address-item__addr {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--color-text-sub);
  font-size: var(--fz-s);
  overflow-wrap: anywhere;
}

.address-item__edit {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
  color: var(--color-link);
  font-size: var(--fz-s);
  white-space: nowrap;
}

.address-item[open] .address-item__edit {
  color: var(--color-text-sub);
}

.address-form {
  padding: var(--space-s) var(--space-m);
  border-top: 1px solid var(--color-border);
}

.address-form__action {
  margin-top: var(--space-s);
}

.address-form__delete {
  margin-top: var(--space-xs);
  padding-bottom: var(--space-s);
  text-align: right;
}

.address-add {
  margin-top: var(--space-s);
}

.address-add__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-s);
  background-color: var(--color-bg-sub);
  border-radius: var(--radius-m);
  color: var(--color-link);
  font-size: var(--fz-s);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.address-add__summary::-webkit-details-marker {
  display: none;
}

.address-add[open] .address-add__summary {
  margin-bottom: 0 var(--space-s);
}

/* ==========================================
   リクエスト送信の確認ダイアログに出す入力内容

   このフォームは確認画面を持たないため、ダイアログの裏に隠れたフォームでは
   「内容に間違いないか」を確かめようがない。控えをダイアログ内に出す。
   長い備考でも読めるよう、器（.c-modal__dialog）側のスクロールに任せる。
   ========================================== */
.request-summary {
  margin: 0;
  padding: var(--space-s) var(--space-m);
  background-color: var(--color-bg-sub);
  border-radius: var(--radius-m);
  font-size: var(--fz-s);
  line-height: 1.7;
  text-align: left;
}

.request-summary__label {
  margin-top: var(--space-xs);
  color: var(--color-text-sub);
  font-weight: 700;
}

.request-summary__label:first-child {
  margin-top: 0;
}

.request-summary__value {
  margin: 0 0 var(--space-2xs);
  /* 備考の改行をそのまま見せる。長い単語やURLは折り返す */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.request-summary__value--empty {
  color: var(--color-muted);
}

/* ==========================================
   選べない配送方法（発送業者に合わない受け取り方法）

   選択肢ごと消すと「郵便局留めが無い」という問い合わせになるため、
   グレーアウトして理由を添える。
   ========================================== */
.choice-list__label--disabled {
  background-color: var(--color-bg-sub);
  cursor: not-allowed;
  opacity: 0.72;
}

.choice-list__label--disabled .choice-list__name {
  color: var(--color-muted);
  text-decoration: line-through;
}

.choice-list__reason {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  color: var(--color-danger);
  font-weight: 700;
}

.choice-list__reason i {
  flex: none;
  line-height: 1.5;
}

/* 再カートイン制限中の購入ボタンと、その理由 */
.c-btn[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

.item-order__blocked {
  margin-top: var(--space-xs);
}

/* ==========================================
  セラー新規登録フォーム（受領CSSに無い分）
========================================== */

/* 希望ハンドルネームの空き状況。入力中に「使えます／使われています」を出す */
.register-form__availability {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  margin-top: var(--space-2xs);
  font-size: var(--fz-s);
  font-weight: 700;
  line-height: 1.5;
}

.register-form__availability.is-checking {
  color: var(--color-text-sub);
  font-weight: 400;
}

.register-form__availability.is-ok {
  color: var(--color-success);
}

.register-form__availability.is-ng {
  color: var(--color-danger);
}

/* プロフィール画像。見本ではなく、選んだ画像をそのまま出して添付できたことを示す */
.register-form__preview {
  margin-top: var(--space-xs);
}

.register-form__preview img {
  width: 120px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background-color: var(--color-bg-sub);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-m);
}

/* ==========================================
  トップの h1（.top-lead）を見た目だけ隠す
  受領CSSは 〜768px と 1024px〜 で display:none にしており、h1 が 769〜1023px にしか存在しなくなる。
  見た目は受領CSSどおり隠したまま、読み上げ・検索エンジンには届くよう .u-visually-hidden と同じ手法に置き換える
========================================== */

@media (max-width: 768px), (min-width: 1024px) {
  .top-lead {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* ==========================================
  カート画面の「会員の方／非会員の方」
  受領CSSは横並び（768px〜）で align-items:flex-start のため、説明文がある「非会員の方」だけ背が高くなる。
  枠の高さを揃える
========================================== */

@media (min-width: 768px) {
  .cart-guest {
    align-items: stretch;
  }
}

/* ==========================================
  ヘッダーの会員メニューとカート（1024px〜）
  受領CSSはボタン 40px・カート 44px で、ヘッダーの中で大きく見えるため、小さめの 33px に揃える。
  出品者向けの2項目は薄ピンクの枠（上下 3px）の内側にあるので、枠を含めて 33px になるよう 27px にする
========================================== */

@media (min-width: 1024px) {
  .front-header__link {
    min-height: 33px;
  }
  .front-header__seller-group .front-header__link {
    min-height: 27px;
  }
  .front-header__cart {
    width: 33px;
    height: 33px;
  }
}

/* ==========================================
  フラッシュメッセージを消すときのアニメーション（js/front.js の initFlash）
  display:none で一瞬で消すと下の本文が跳ね上がるため、薄くしながら高さを畳む
========================================== */

.c-flash {
  overflow: hidden;
  transition: opacity 0.4s ease, max-height 0.4s ease, padding 0.4s ease, border-width 0.4s ease;
}

.c-flash.is-leaving {
  max-height: 0 !important;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom-width: 0;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .c-flash {
    transition: none;
  }
}