/* ============================================================
   account.css — 会員・カート・チェックアウトのフォーム/レイアウト
   ============================================================ */
.auth { max-width: 460px; margin-inline: auto; padding-block: var(--s-2xl); }
.auth h1 { font-family: var(--serif); font-size: var(--t-xl); text-align: center; margin-block-end: var(--s-xs); }
.auth__lead { text-align: center; color: var(--ink-3); font-size: var(--t-sm); margin-block-end: var(--s-lg); }

.field { margin-block-end: var(--s-md); }
.field > label { display: block; font-family: var(--grotesk); font-size: var(--t-2xs); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--ink-2); margin-block-end: var(--s-3xs); }
.field .req { color: var(--red); margin-inline-start: .4em; font-size: .9em; }
.field input, .field select, .field textarea {
  inline-size: 100%; padding: .7em .85em; border: var(--hair-2); background: var(--paper);
  font-family: var(--sans); font-size: var(--t-base); color: var(--ink); border-radius: 0;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--red); }
.field__hint { font-size: var(--t-2xs); color: var(--ink-3); margin-block-start: var(--s-3xs); }
.field__err { font-size: var(--t-xs); color: var(--red); margin-block-start: var(--s-3xs); }
.field--zip { display: flex; gap: var(--s-sm); align-items: start; }
.field--zip input { flex: 0 0 11em; }

.flash { padding: var(--s-sm) var(--s-md); margin-block-end: var(--s-md); border-inline-start: 3px solid; font-size: var(--t-sm); }
.flash--err { background: var(--red-tint); border-color: var(--red); color: var(--red-deep); }
.flash--ok { background: color-mix(in oklab, #2e7d32 12%, transparent); border-color: #2e7d32; color: #1b5e20; }

/* —— ソーシャルログイン —— */
.social-login { display: grid; gap: var(--s-sm); margin-block-end: var(--s-md); }
.sbtn { display: flex; align-items: center; justify-content: center; gap: var(--s-2xs);
  padding: .8em 1em; font-family: var(--sans); font-size: var(--t-sm); font-weight: 600;
  text-decoration: none; border-radius: 0; transition: filter var(--d1) var(--ease), box-shadow var(--d1) var(--ease); }
.sbtn:hover { filter: brightness(.96); box-shadow: var(--shadow); }
.sbtn svg { inline-size: 20px; block-size: 20px; }
.sbtn--line { background: #06C755; color: #fff; }
.sbtn--google { background: #fff; color: #1f1f1f; border: 1px solid var(--line-2); }
.social-or { text-align: center; margin-block: var(--s-md); position: relative; color: var(--ink-3); font-size: var(--t-2xs); }
.social-or::before { content: ""; position: absolute; inset-block-start: 50%; inset-inline: 0; block-size: 1px; background: var(--line); z-index: -1; }
.social-or span { background: var(--paper); padding-inline: var(--s-sm); }

.btn-block { inline-size: 100%; justify-content: center; }
.auth__alt { text-align: center; margin-block-start: var(--s-lg); font-size: var(--t-sm); color: var(--ink-3); }
.auth__alt a { color: var(--red); }

/* —— カート —— */
.cartpage { max-width: 1040px; margin-inline: auto; padding-block: var(--s-xl) var(--s-2xl); }
.cartpage h1 { font-family: var(--serif); font-size: var(--t-xl); margin-block-end: var(--s-lg); }
.cart-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--s-xl); align-items: start; }
.cart-empty { text-align: center; color: var(--ink-2); padding-block: var(--s-2xl); }
.cart-line { display: grid; grid-template-columns: 84px 1fr auto; gap: var(--s-md); align-items: center;
  padding-block: var(--s-md); border-block-end: var(--hair); }
.cart-line__img { inline-size: 84px; aspect-ratio: 4/5; object-fit: cover; background: var(--paper-2); }
.cart-line__t { font-family: var(--serif); font-size: var(--t-md); color: var(--ink); }
.cart-line__t a { color: inherit; }
.cart-line__meta { font-size: var(--t-xs); color: var(--ink-3); margin-block-start: 2px; }
.cart-line__price { font-family: var(--grotesk); font-size: var(--t-md); white-space: nowrap; text-align: end; }
.cart-line__rm { display: inline-block; font-size: var(--t-2xs); color: var(--ink-3); margin-block-start: var(--s-2xs); }
.cart-line__rm:hover { color: var(--red); }

.cart-sum { border: var(--hair); padding: var(--s-lg); position: sticky; top: var(--s-md); }
.cart-sum__row { display: flex; justify-content: space-between; align-items: baseline; margin-block-end: var(--s-sm); }
.cart-sum__total { font-family: var(--grotesk); font-size: var(--t-lg); color: var(--red); }
.cart-sum__note { font-size: var(--t-2xs); color: var(--ink-3); margin-block: var(--s-sm) var(--s-md); line-height: var(--lh-snug); }

/* —— チェックアウト —— */
.checkout { max-width: 1080px; margin-inline: auto; padding-block: var(--s-xl) var(--s-2xl); }
.checkout__steps { display: flex; gap: var(--s-md); justify-content: center; margin-block-end: var(--s-xl);
  font-family: var(--grotesk); font-size: var(--t-2xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--ink-3); }
.checkout__steps b { color: var(--red); }
.checkout__steps .on { color: var(--ink); }
.checkout-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--s-xl); align-items: start; }
/* checkout アカウント選択パネル */
.co-account { border: var(--hair-2); padding: var(--s-md) var(--s-lg); margin-block-end: var(--s-xl);
  background: var(--paper-2); }
.co-account__lead { font-size: var(--t-sm); color: var(--ink-2); line-height: var(--lh-snug); margin: 0 0 var(--s-sm); }
.co-account__btns { display: flex; gap: var(--s-sm); flex-wrap: wrap; }
.co-account__btns .btn { flex: 1 1 12em; }
.co-account__guest { font-size: var(--t-xs); color: var(--ink-3); margin: var(--s-md) 0 0;
  padding-block-start: var(--s-sm); border-block-start: 1px dashed var(--line); }
.co-account--in { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--s-2xs);
  background: color-mix(in oklab, #2e7d32 8%, transparent); border-color: color-mix(in oklab, #2e7d32 40%, transparent);
  font-size: var(--t-sm); color: var(--ink-2); }
.co-account--in a { color: var(--red); }

.co-sec { margin-block-end: var(--s-xl); }
.co-sec__h { display: flex; align-items: center; gap: var(--s-2xs); font-family: var(--serif); font-size: var(--t-md);
  color: var(--ink); margin-block-end: var(--s-md); border-block-end: var(--rule); padding-block-end: var(--s-2xs); }

.pay-opt { display: block; border: var(--hair-2); padding: var(--s-sm) var(--s-md); margin-block-end: var(--s-sm); cursor: pointer; }
.pay-opt input { margin-inline-end: var(--s-2xs); }
.pay-opt__t { font-weight: 600; color: var(--ink); }
.pay-opt__d { font-size: var(--t-xs); color: var(--ink-3); margin-block-start: 2px; }
.pay-opt.is-disabled { opacity: .55; cursor: not-allowed; }
.pay-opt .soon { font-family: var(--grotesk); font-size: var(--t-2xs); color: var(--red); letter-spacing: .08em; }

.co-confirm dl { display: grid; grid-template-columns: 8em 1fr; gap: var(--s-2xs) var(--s-md); }
.co-confirm dt { font-family: var(--grotesk); font-size: var(--t-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--ink-3); }
.co-confirm dd { margin: 0; color: var(--ink); }

.co-done { max-width: 720px; margin-inline: auto; text-align: center; padding-block: var(--s-2xl); }
.co-done__no { font-family: var(--grotesk); font-size: var(--t-lg); color: var(--red); letter-spacing: .06em; }
.co-bank { text-align: start; border: var(--hair); padding: var(--s-lg); margin-block: var(--s-lg); }
.co-bank h3 { font-family: var(--serif); margin-block-end: var(--s-sm); }
.co-bank dl { display: grid; grid-template-columns: 7em 1fr; gap: var(--s-2xs) var(--s-md); font-size: var(--t-sm); }
.co-bank dt { color: var(--ink-3); }

@media (max-width: 820px) {
  .cart-layout, .checkout-layout { grid-template-columns: 1fr; }
  .cart-sum { position: static; }
}

/* —— マイページ —— */
.mypage { max-width: 920px; margin-inline: auto; padding-block: var(--s-xl) var(--s-2xl); }
.mypage__head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--s-sm);
  border-block-end: var(--rule); padding-block-end: var(--s-sm); margin-block-end: var(--s-lg); }
.mypage__head h1 { font-family: var(--serif); font-size: var(--t-xl); }
.order-card { border: var(--hair); padding: var(--s-md) var(--s-lg); margin-block-end: var(--s-md); }
.order-card__top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2xs);
  font-family: var(--grotesk); font-size: var(--t-2xs); letter-spacing: var(--ls-wide); color: var(--ink-3); margin-block-end: var(--s-2xs); }
.order-card__status { color: var(--red); }
.order-card li { font-size: var(--t-sm); color: var(--ink); }