/* =========================================================================
   ATHLETA Taiwan — 共有コンポーネント層 (design-components.css)
   ここに定義したコンポーネントは全ページ共通。1箇所変えれば全ページに反映。
   ページ固有のレイアウトは各ページの <style> に置く（ここには置かない）。
   依存トークン: design-base.css の :root 変数。
   ========================================================================= */

/* ---- 共有ユーティリティ --------------------------------------------------
   .hidden は「JS で表示/非表示を切り替える」全ページ共通スイッチ。元は shop.css /
   checkout.css に各々定義されていたが、ヘッダーを出すだけのページ（contact 等）でも
   必要なのでここ（共有層）に昇格。重複定義は同値なので衝突しない。
   （.sr-only は design-base.css 側に既出。） */
.hidden { display: none !important; }

/* ---- ボタン体系 ----------------------------------------------------------
   .btn を基底に、見た目は --solid / --outline、寸法は --lg/--md/--sm で合成。
   旧 .btn-primary/.btn-icon/.btn-s/.btn-save/.btn-ghost を統合。 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* サイズ修飾子（--lg/--md/--sm）無しの素の .btn でも潰れない既定サイズ。
     修飾子は後段で min-height/padding を上書きするので、付けた場合はそちらが優先。
     ＝完了画面など動的に出す素の .btn が余白ゼロで崩れるのを根本で防ぐ。 */
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  transition: border-color .14s ease, background .2s ease, color .14s ease, transform .12s ease;
}
.btn--solid { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--solid:hover { background: var(--blue); border-color: var(--blue); transform: translateY(-1px); }
.btn--outline { background: var(--surface); color: var(--ink); }
.btn--outline:hover { border-color: var(--blue); color: var(--blue); }
.btn--ghost { background: var(--surface); color: var(--muted); }
.btn--ghost:hover { border-color: var(--blue); color: var(--ink); }

.btn--lg { min-height: 54px; padding: 0 26px; font-size: 15px; font-weight: 700; }
.btn--md { min-height: 48px; padding: 0 24px; font-size: 14px; font-weight: 700; }
.btn--sm { min-height: 34px; padding: 0 14px; font-size: 12px; font-weight: 700; }
.btn--block { width: 100%; }
.btn--icon { width: 54px; padding: 0; flex: none; }

/* 丸い小アイコンボタン（×等）。詳細ドロワーの閉じる(#closeDetail)と共有カート抽斗の
   閉じる(#closeCart)が共用するため、storefront 専用の shop.css ではなく全ページ共通のここへ。 */
.icon-button {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
}
.icon-button:hover { border-color: var(--blue); color: var(--blue); }

/* アイコンボタンの中身（マスク） */
.btn--heart::before {
  content: "";
  width: 17px; height: 15px;
  background: currentColor;
  -webkit-mask: var(--ph-heart) center/contain no-repeat;
  mask: var(--ph-heart) center/contain no-repeat;
}
/* 收藏ボタンは「赤系」で好意を示す（汎用 --outline の青ホバーを上書き）。
   収藏済みは .is-on / aria-pressed=true で塗り＋淡い赤の面に。単一ソース --fav。 */
.btn--heart:hover { border-color: var(--fav); color: var(--fav); }
.btn--heart.is-on,
.btn--heart[aria-pressed="true"] {
  border-color: transparent;
  background: color-mix(in srgb, var(--fav) 14%, var(--surface));
  color: var(--fav);
}

/* ---- 商品カード ----------------------------------------------------------
   旧 .rel-card（商品詳細の関連）と .fav（MyPageの収藏）を統合。
   構成: media（任意で remove ボタン）→ cat → title → price →（任意で action） */
.p-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px 22px;
}
.p-card {
  display: grid;
  gap: 10px;
  position: relative;
  min-width: 0;
  color: inherit;
}
.p-card__media {
  aspect-ratio: 1;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: linear-gradient(150deg, rgba(255, 255, 255, .55), transparent), var(--fill);
  position: relative;
  overflow: hidden;
}
.p-card:hover .p-card__media::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--yellow));
}
.p-card__remove {
  position: absolute; top: 9px; right: 9px;
  width: 28px; height: 28px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
  color: var(--muted);
  font-size: 14px; line-height: 1;
}
.p-card__remove:hover { color: var(--blue); border-color: var(--blue); }
.p-card__cat { color: var(--muted); font-size: 11px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; }
.p-card__title { font-size: 13px; font-weight: 400; }
.p-card__price { font-size: 14px; font-weight: 700; }
.p-card__action { margin-top: 2px; }

/* ---- 收藏（Wishlist）ゼロ件の空状態 --------------------------------------
   收藏一覧（独立ページ /wishlist と會員中心 /mypage の收藏タブ）が空のとき、
   ATHLETA のボール紋章ロゴ(athleta-football-white.svg)を mask で薄いウォーター
   マークにして「まだ無い」ことを上品に伝える。色は background、濃さは opacity で。
   （以前は mypage.html のインライン style に有ったが、/wishlist と共用するため共有化。） */
.fav-empty {
  grid-column: 1 / -1;
  position: relative; overflow: hidden;
  display: grid; place-items: center; text-align: center;
  min-height: 380px; padding: 56px 24px;
  border: 1px solid var(--line); border-radius: 18px;
  background: radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--blue) 4%, var(--surface)), var(--surface));
}
.fav-empty__mark {
  position: absolute; left: 50%; top: 50%;
  width: min(460px, 80%); aspect-ratio: 76.7625 / 57.848;
  transform: translate(-50%, -56%);
  background: var(--ink); opacity: .05; pointer-events: none;   /* 色とうすさはここ。例: var(--blue) + opacity:.07 でブランド色 */
  -webkit-mask: url("athleta-football-white.svg") center / contain no-repeat;
  mask: url("athleta-football-white.svg") center / contain no-repeat;
}
.fav-empty__inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: 14px; max-width: 400px; }
.fav-empty__heart {
  width: 58px; height: 58px; border-radius: 999px; margin-bottom: 2px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
}
.fav-empty__heart::before {
  content: ""; width: 28px; height: 28px; background: var(--blue);
  -webkit-mask: var(--ph-heart) center / contain no-repeat;
  mask: var(--ph-heart) center / contain no-repeat;
}
.fav-empty__title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: .01em; }
.fav-empty__sub { margin: 0; color: var(--muted); font-size: 13.5px; font-weight: 400; line-height: 1.7; }
.fav-empty .btn { margin-top: 6px; }
/* ダッシュボード等のミニ空状態（ウォーターマーク小さめ・説明文は省略） */
.fav-empty--mini { min-height: 200px; padding: 34px 20px; border-radius: 14px; }
.fav-empty--mini .fav-empty__mark { width: min(280px, 64%); opacity: .045; }
.fav-empty--mini .fav-empty__heart { width: 48px; height: 48px; }
.fav-empty--mini .fav-empty__heart::before { width: 23px; height: 23px; }
.fav-empty--mini .fav-empty__title { font-size: 17px; }

/* ---- セクション見出し ----------------------------------------------------
   旗線の上にタイトル＋右リンク。一覧/詳細/MyPage で共通。 */
.block { margin-bottom: 38px; }
.block-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.block-head h2 { margin: 0; font-size: 17px; letter-spacing: 0; }
.block-head .link, .block-head a {
  color: var(--blue); font-size: 13px; font-weight: 700;
  background: none; border: 0; cursor: pointer;
}

/* ---- ステータスピル ------------------------------------------------------
   注文・配送など状態表示。配色は状態クラスで切替。 */
.status {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px; font-weight: 700;
}
.status i { width: 7px; height: 7px; border-radius: 999px; }
.status--info { background: color-mix(in srgb, var(--blue) 12%, transparent); color: var(--blue); }
.status--info i { background: var(--blue); }
.status--muted { background: var(--fill); color: var(--muted); }
.status--muted i { background: var(--muted); }
.status--warn { background: color-mix(in srgb, var(--yellow) 22%, transparent); color: #8a6d00; }
.status--warn i { background: var(--yellow); }
.status--danger { background: color-mix(in srgb, var(--danger) 11%, transparent); color: var(--danger); }
.status--danger i { background: var(--danger); }

/* ---- 統計カード ----------------------------------------------------------
   ダッシュボード/特典で使う数値カード。下端にアクセント線。 */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.stat {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 18px 16px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  overflow: hidden;
}
.stat .eyebrow { margin-bottom: 14px; }
.stat .big { font-size: 30px; font-weight: 700; letter-spacing: -0.01em; line-height: 1; }
.stat .unit { font-size: 13px; font-weight: 400; color: var(--muted); margin-left: 4px; }
.stat .sub { display: block; margin-top: 8px; color: var(--muted); font-size: 12px; font-weight: 400; }
.stat::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--yellow));
  opacity: .9;
}
.stat--plain::after { background: var(--line); opacity: 1; }
.rank-bar {
  margin-top: 12px;
  height: 6px; border-radius: 999px;
  background: var(--fill);
  overflow: hidden;
}
.rank-bar i {
  display: block; height: 100%;
  width: var(--rank, 68%);
  background: linear-gradient(90deg, var(--blue), var(--yellow));
}

/* ---- フォーム ------------------------------------------------------------
   会員資料・住所編集・将来のチェックアウトで共通。 */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
  max-width: 720px;
}
.field { display: grid; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.field input, .field select, .field textarea {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 400;
}
.field input, .field select { height: 46px; padding: 0 14px; }
.field textarea { padding: 11px 14px; line-height: 1.7; resize: vertical; min-height: 112px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 14%, transparent);
}
.form-actions {
  display: flex; gap: 10px;
  max-width: 720px;
  margin-top: 24px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}

/* ---- 注文カード ----------------------------------------------------------
   注文一覧・ダッシュボード・団隊で共通。 */
.order {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  margin-bottom: 14px;
  overflow: hidden;
}
.order-top {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 60%, var(--surface));
}
.order-top .ot { display: grid; gap: 2px; }
.order-top .ot small { color: var(--muted); font-size: 10px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; }
.order-top .ot b { font-size: 13px; font-weight: 700; }
.order-body { display: flex; gap: 16px; padding: 16px 18px; align-items: center; flex-wrap: wrap; }
.order-items { display: flex; gap: 10px; flex: 1; min-width: 0; }
.oi-media {
  flex: none;
  width: 58px; height: 58px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: linear-gradient(150deg, rgba(255, 255, 255, .5), transparent), var(--fill);
}
.order-items .more {
  display: grid; place-items: center;
  width: 58px; height: 58px;
  border-radius: 7px;
  border: 1px dashed var(--line);
  color: var(--muted); font-size: 12px; font-weight: 400;
}
.order-meta { text-align: right; display: grid; gap: 8px; }
.order-meta .total { font-size: 16px; font-weight: 700; }
.order-meta .total span { color: var(--muted); font-size: 12px; font-weight: 400; margin-right: 5px; }
.order-meta .acts { display: flex; gap: 8px; justify-content: flex-end; }

/* ---- 共有レスポンシブ ---------------------------------------------------- */
@media (max-width: 940px) {
  .p-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .p-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .order-top { grid-template-columns: 1fr auto; }
  .order-meta { text-align: left; }
}

/* ---- 文件・記事ページ（服務條款／退換貨說明／採訪記事）共通 ---------------
   prose 本文＋（任意で）左側 sticky 目次。terms / return / article 詳細で共有。
   ページ固有のカード等は各ページの <style> へ（ここには置かない）。 */
/* width:100% は必須。売場シェル(body が flex column)のページ＝/article で .doc を使うと、
   margin:0 auto の auto が cross 軸で効いて中身の幅まで縮み、ヒーローが中央へ寄ってしまう。
   body が block の他ページでは 100% は元の挙動と同じ＝副作用なし。 */
.doc { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--padx); }

/* ヒーロー下の区切り線は「画面の左右いっぱい」まで伸ばし、ヘッダー(.top-shell)の
   border-bottom と端で揃える（内側で中途半端に切れないように＝両者は対で1本に見せる）。
   ▼ 親要素に依存しない＝このテンプレートを使う全ページ(.doc / .players / .story …)で
     自動的に同じ全幅線になる。1箇所直せば全ページに効くのがテンプレートの前提。
   仕組み: ヒーロー(中央寄せ前提)の ::after を left/right:calc(50% - 50vw) で画面端まで
   ブリード（写真テンプレと同式）。横はみ出しは html:has(.doc-hero) の overflow-x:clip で吸収。 */
.doc-hero { padding: 48px 0 30px; position: relative; border-bottom: 0; }
.doc-hero::after {
  content: "";
  position: absolute;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  bottom: 0;
  height: 1px;
  background: var(--line);
  z-index: 2; /* 写真(z0)・本文(z1)より前面＝線が写真の上でも途切れず端まで通る */
}
/* 例外: サイドバー列(.product-field 内＝team-sales)のヒーローは中央配置でないため、
   全幅線にすると逆にズレる。ここだけ従来どおりの“内側ボーダー”に戻し、全幅線は出さない。 */
.product-field .doc-hero { border-bottom: 1px solid var(--line); }
.product-field .doc-hero::after { content: none; }
.doc-hero .eyebrow { margin-bottom: 14px; }
/* 2026-08-13：文言は変えずに「だらしなく載っている」感だけを直した調整。
   ・見出しは大きさ据え置き（サイト標準 50px）。字間だけ -0.01em → -0.02em で締める。
   ・説明文は 62ch → 44ch。横に伸びすぎているのが緩く見える原因だったので、
     読み幅を狭めて「文字のかたまり」を作る。行間もわずかに詰める。 */
/* 見出しの大きさは 2026-08-13 本城さん採用（案C）＝上限 50px → 40px。
   行間・字間は同日採用の「文字の物差し」（type-ruler-catalog.html）＝見出し1.25／.01em。
   漢字見出しに負の字間は画数がつぶれるためやめた。 */
.doc-hero h1 { margin-bottom: 16px; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.25; letter-spacing: 0.01em; }
.doc-hero h1 b { color: var(--blue); font-weight: inherit; }
.doc-hero .lede { max-width: 44ch; margin: 0; color: var(--muted); font-size: 14.5px; font-weight: 400; line-height: 1.85; letter-spacing: 0.02em; }
.doc-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 18px; color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.7; }
.doc-meta .dot { width: 3px; height: 3px; border-radius: 999px; background: currentColor; opacity: .55; }

/* ===== ヒーロー右側の「画面端まで伸びる写真」テンプレート =======================
   /stores のヒーロー（到實體門市…）を全 doc ページ共通の部品に格上げしたもの。
   使い方：ヒーロー <section> に .doc-hero--photo を足し、先頭にこの figure を置くだけ：
       <figure class="doc-hero__photo" aria-hidden="true">
         <img class="doc-hero__img" src="./assets/<page>/hero.jpg" alt="">
       </figure>
   写真は右端（サイトの余白ごと画面の右端）まで伸び、左へ向かって白（地色）へフェード。
   ▼ 画像の差し替えは <img> の src を変えるだけ＝ページ個別の CSS は一切書かない。
   ▼ まだ写真が無いページは <img> を省く（コメントアウト）と、淡いブランド地の
      プレースホルダが出る＝「写真がここに入る」と分かる“形だけ”の状態。 */

/* 写真は .doc の外（画面右端）へはみ出すので、横方向だけクリップする。
   html(ルート)に掛ける＝body だと viewport へ伝播して効かない。
   clip は overflow-y を auto 化しない＝sticky な目次/サイドバーを壊さない（hidden は不可）。 */
html:has(.doc-hero) { overflow-x: clip; }

.doc-hero--photo {
  position: relative; isolation: isolate;
  /* 全ページでヒーロー帯の高さを揃える＋内容を縦中央へ（右の写真と釣り合う）。
     min-height は“床”なので、中身が多いページは自動で伸びる。 */
  display: flex; flex-direction: column; justify-content: center;
  min-height: 360px;
}
/* 文字（eyebrow / h1 / lede / meta）は写真より前面へ＝読みやすさ確保 */
.doc-hero--photo > :not(.doc-hero__photo) { position: relative; z-index: 1; }

.doc-hero__photo {
  position: absolute; top: 0; bottom: 0;
  /* 右端をサイト幅(.doc)の余白ごと飛び越えて画面右端へ（中央寄せ前提の定番式） */
  right: calc(50% - 50vw);
  /* 2026-08-13 本城さん採用（案③）＝58%→70%。左が白くなりすぎるため写真を広げた。
     溶かし方（下の mask）は据え置き＝白へのぼかしは柔らかいまま。 */
  width: min(70%, 940px); margin: 0; z-index: 0; pointer-events: none;
  overflow: hidden;
  /* 写真が無いとき用のプレースホルダ＝淡いブランド地（緑→青）。<img> が入ると上から覆う。 */
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--green) 20%, var(--surface)),
    color-mix(in srgb, var(--blue) 14%, var(--surface)));
  /* 左へ向かって地色（白）へ溶かすマスク。overlay ではなくマスク＝“写真が地に溶ける”。 */
  -webkit-mask-image: linear-gradient(to right, transparent 2%, rgba(0,0,0,.4) 40%, #000 76%);
          mask-image: linear-gradient(to right, transparent 2%, rgba(0,0,0,.4) 40%, #000 76%);
}
.doc-hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: right center; display: block;
}
/* スマホでも右側に写真（グラデーション）を出す（ユーザー希望 2026-06-09）。
   狭い画面では①文字が写真の濃い部分に重ならないよう本文に右余白を確保、
   ②長いリード文は3行で省略＝ヒーロー帯の高さを全ページで揃える（min-height に収める）。 */
@media (max-width: 760px) {
  /* 最小幅(〜320px)で見出しが3行に折れるページ(story)でも全ページ揃うよう少し高め。 */
  .doc-hero--photo { min-height: 380px; }
  .doc-hero--photo > :not(.doc-hero__photo) { padding-right: 18%; }
  /* スマホは 2026-08-13 本城さん採用（案⑤）＝並びは据え置きで写真だけ 58%→76% へ。
     PC は上の 70% とは別の値。狭い画面では写真の割合を増やさないと店内が伝わらないため。 */
  .doc-hero__photo { width: min(76%, 760px); }
  .doc-hero--photo .lede {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
}

/* 2カラム（目次＋本文）。目次が不要なページは .doc-grid を使わず .prose を直接置く。 */
.doc-grid { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 48px; padding: 40px 0 56px; }
.doc-toc { position: sticky; top: calc(var(--header-h) + 18px); align-self: start; }
.doc-toc p { margin: 0 0 12px; color: var(--muted); font-size: 11px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; }
.doc-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.doc-toc a { display: block; padding: 7px 12px; border-left: 2px solid transparent; border-radius: 0 8px 8px 0; color: var(--muted); font-size: 13px; font-weight: 400; line-height: 1.45; transition: background .14s ease, color .14s ease, border-color .14s ease; }
.doc-toc a:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); color: var(--ink); }
.doc-toc a.active { color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, var(--surface)); border-left-color: var(--blue); font-weight: 700; }

/* prose 本文（読み物の基本タイポ） */
.prose { max-width: 72ch; color: var(--ink); }
.prose > section { scroll-margin-top: calc(var(--header-h) + 20px); }
.prose > section + section { margin-top: 36px; padding-top: 34px; border-top: 1px solid var(--line); }
.prose h2 { margin: 0 0 14px; font-size: clamp(19px, 2vw, 24px); line-height: 1.22; letter-spacing: -0.01em; display: flex; gap: 12px; align-items: baseline; }
.prose h2 .n { flex: none; color: var(--blue); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.prose h3 { margin: 24px 0 10px; font-size: 15.5px; font-weight: 700; }
.prose p { margin: 0 0 14px; color: var(--muted); font-size: 14.5px; font-weight: 400; line-height: 1.85; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--ink); font-weight: 700; }
.prose a:not(.btn) { color: var(--blue); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; color: var(--muted); font-size: 14.5px; font-weight: 400; line-height: 1.8; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--blue); }
.prose li strong { color: var(--ink); }
.prose blockquote { margin: 22px 0; padding: 2px 0 2px 20px; border-left: 3px solid var(--yellow); color: var(--ink); font-size: clamp(17px, 1.8vw, 21px); font-weight: 400; line-height: 1.5; letter-spacing: -0.01em; }
.prose blockquote cite { display: block; margin-top: 10px; font-style: normal; font-size: 12px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* 注記カード（鑑賞期の注意・聯絡先の強調など） */
.doc-callout { margin: 18px 0; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--blue) 26%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--blue) 7%, var(--surface)); }
.doc-callout p { margin: 0; color: var(--ink); font-size: 13.5px; font-weight: 400; line-height: 1.7; }
.doc-callout p + p { margin-top: 8px; }
.doc-callout.is-warn { border-color: color-mix(in srgb, var(--yellow) 42%, var(--line)); background: color-mix(in srgb, var(--yellow) 13%, var(--surface)); }

/* 手順（退換貨流程の番号付きステップ） */
.doc-steps { counter-reset: step; display: grid; gap: 14px; margin: 6px 0 16px; padding: 0; list-style: none; }
.doc-steps li { position: relative; padding-left: 46px; color: var(--muted); font-size: 14.5px; font-weight: 400; line-height: 1.7; }
.doc-steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 13px; font-weight: 700; }
.doc-steps li strong { color: var(--ink); font-weight: 700; }

/* 記事詳細：本文を中央寄せの読み物カラムに */
.doc-article { padding: 36px 0 8px; }
.doc-article .prose { margin: 0 auto; }

/* 末尾：更新日／戻り導線 */
.doc-foot { margin: 6px 0 64px; padding: 22px 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; }
.doc-foot .updated { color: var(--muted); font-size: 12.5px; font-weight: 400; }

@media (max-width: 940px) {
  .doc-grid { grid-template-columns: 1fr; gap: 6px; padding-top: 26px; }
  .doc-toc { display: none; }
  .prose { max-width: none; }
}

/* ---- 共有フッター（design-chrome.js が全ページへ注入）----------------------
   方針: 軽く・控えめ。淡い上罫線＋小さな muted テキストだけの細い帯。
   中身（法務リンク・著作権）は footerHTML() が単一ソースで生成する。
   全ページ共通で出す（首頁・商品・最新消息・聯絡＝.page-grid は grid 直後へ全幅で注入。
   2026-06-09 に「全画面アプリシェルは除外」をやめて統一。判定は chrome 側 mountFooter）。 */
/* .site-footer*（全幅フッターの土台）は design-foundation.css へ移設（B2 面4・2026-06-11。
   admin 下部フッターと共有）。ここは EC 売場固有の .mf-bar 余白だけ残す。 */
/* 売場（首頁・最新消息）には下部固定バー .mf-bar（篩選/カート島・約70px）が
   重なるので、そのバーがある画面でだけフッター末尾にバー高さ分の余白を足し、
   著作権行が島の裏に隠れないようにする。バーの無いページ（contact 等）には付かない。 */
@media (max-width: 940px) {
  body:has(.mf-bar) .site-footer { margin-bottom: 84px; }
}

/* ---- 会社の法定表示（台湾は会社名・統一編號・住所・電話の掲載が必要）------------
   採用案 B1（2026-07-29 本城さん選択）: 上段＝ロゴ｜会社名（1行目）＋細目（2行目）、
   下段＝リンクと著作権。長い1文にせず2行に割るのが要件（1文が長いのは却下された形）。
   土台の .site-footer / __inner / __links / __copy は foundation（admin と共有）のまま触らない。
   ここは EC 側だけに足す上下2段の骨組み＝__inner の flex-wrap に 100% 幅の行を2つ流す。 */
.site-footer__top,
.site-footer__bottom { flex-basis: 100%; }
.site-footer__top { display: flex; align-items: center; gap: 20px; }
.site-footer__brand {
  flex: none; align-self: stretch; display: flex; align-items: center;
  padding-right: 20px; border-right: 1px solid var(--line);
}
/* ヘッダーのロゴは縮小指定つき（--logo-scale）。フッターは大きさをここで決め直す。 */
.site-footer__brand .logo { width: 98px; transform: none; color: var(--ink); }
/* フッターだけボール紋章（athleta-football-white.svg）に差し替える（2026-08-21 案3）。
   紋章の中に ATHLETA の文字が入っているので、この1つで社名と競技が同時に伝わる。
   ヘッダーは横文字のまま＝上下で役割を分ける。縦横比が横文字版と違うので
   aspect-ratio も上書きする（foundation の .logo は 160.723/41.744）。
   幅76px＝会社情報の3行分とほぼ同じ高さで、下欄は今より重くならない実測値。 */
.site-footer__brand .logo--ball {
  width: 76px; height: auto; aspect-ratio: 76.7625 / 57.848;
  -webkit-mask-image: url("athleta-football-white.svg");
  mask-image: url("athleta-football-white.svg");
}
.site-footer__company .c-brand {
  color: var(--muted); font-size: 10px; font-weight: 600;
  line-height: 1; letter-spacing: .12em; white-space: nowrap;
}
.site-footer__company { display: flex; flex-direction: column; gap: 3px; color: var(--muted); }
/* 物差し＝補足段 12px（13/11.5 は段の外だった）。 */
.site-footer__company .c-name { color: var(--ink); font-weight: 700; font-size: 12px; letter-spacing: .01em; }
.site-footer__company .c-meta { font-size: 12px; line-height: 1.7; letter-spacing: .02em; }
/* 統一編號・住所・電話は「かたまり」単位でしか折り返さない（漢字は既定でどこでも切れるため、
   狭い画面で「承德路三」＋「段134號」のように語中で割れていた）。中黒はかたまりの末尾に
   含めてあるので、行末に「・」が残り行頭には来ない。 */
.site-footer__company .c-item { white-space: nowrap; }
/* 営業時間は3行目として独立（2026-08-21 案3+5）。見出し「營業時間」を細く弱い色で
   前に置き、時間そのものは本文と同じ濃さ＝探さずに見つかる。住所や電話の並びに
   足すと行が長くなり狭い画面で折り返すので、混ぜない。 */
.site-footer__company .c-hours { font-size: 12px; line-height: 1.7; letter-spacing: .02em; }
.site-footer__company .c-hours i {
  font-style: normal; margin-right: 8px;
  color: color-mix(in srgb, var(--muted) 70%, var(--surface));
}
.site-footer__company .c-sep { color: color-mix(in srgb, var(--muted) 45%, var(--surface)); margin: 0 7px; }
.site-footer__company a { color: inherit; text-decoration: none; }
.site-footer__company a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* 公式SNS（Instagram / Facebook）は上段の右端へ。文字を足さずマークだけにして、
   会社表示より弱く・リンク段より前に置く（軽いフッターという方針を崩さないため）。
   図形は currentColor 塗りなので色は下の1箇所だけで決まる（2026-08-19）。 */
.site-footer__sns { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.site-footer__sns-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  color: var(--muted); transition: color .14s ease, background-color .14s ease;
}
.site-footer__sns-link svg { width: 19px; height: 19px; display: block; }
.site-footer__sns-link:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); }
.site-footer__sns-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* 仕切り線は置かない。フッター上端（.site-footer の border-top）と2本並ぶと
   線が重なって見えるため、区切りは余白だけで取る（2026-08-19 本城さん選択）。 */
.site-footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 24px; padding-top: 14px;
}
/* 右下の LINE ボタン（.line-launcher・fixed 58px + 右24px）は画面最下部に居座るので、
   フッター最終行の右端＝著作権がその裏に隠れる。ボタンがあるページでだけ逃げを作る。 */
body:has(.line-launcher) .site-footer__bottom { padding-right: 72px; }
/* 表示言語（全ページ共通・2026-10-07）。地球マーク＋各言語名。今の言語に下線。 */
.site-footer__lang { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin-left: auto; }
.site-footer__lang .lang-globe { width: 15px; height: 15px; margin-right: 4px; background: var(--muted); -webkit-mask: var(--ph-globe) center / contain no-repeat; mask: var(--ph-globe) center / contain no-repeat; }
.site-footer__lang button { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px; border: 0; background: none; font: inherit; font-size: 12px; letter-spacing: .02em; color: var(--muted); cursor: pointer; }
.site-footer__lang button:hover { color: var(--ink); }
.site-footer__lang button[aria-current="true"] { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 560px) {
  .site-footer__top { flex-direction: column; align-items: flex-start; gap: 12px; }
  .site-footer__brand { padding-right: 0; border-right: 0; }
  /* 縦積みでは右寄せの起点が消えるので左端へ戻し、指で押せる分だけ間隔を広げる */
  .site-footer__sns { margin-left: -7px; gap: 2px; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
  .site-footer__lang { margin-left: -6px; }
  /* スマホは著作権が左端に来るので逃げは不要（右の余白だけ空くのを防ぐ） */
  body:has(.line-launcher) .site-footer__bottom { padding-right: 0; }
}

/* ===== 読み物ハブの左サイドバー ==============================================
   中身は design-chrome.js の JOURNAL_NAV が唯一の定義。
   表（/article）＝分類はまだ無いので一言だけ。
   歷年紀錄（/article/archive）＝年份だけ。昔の分類は付けない。 */
.jn-empty {
  margin: 0; color: color-mix(in srgb, var(--muted) 78%, var(--surface));
  font-size: 12px; font-weight: 400; line-height: 1.8;
}
.jn-empty a { color: var(--blue); font-weight: 700; }
.jn-year {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; margin-bottom: 2px; border-radius: 9px; color: inherit;
  font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  transition: background .14s ease, color .14s ease;
}
.jn-year b { color: var(--muted); font-size: 12px; font-weight: 700; }
.jn-year:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.jn-year.active { background: color-mix(in srgb, var(--blue) 10%, var(--surface)); color: var(--blue); }
.jn-year.active b { color: var(--blue); }

/* 通貨記号（NT$）。値札は数字が主役なので、記号は一段小さく淡くして脇に置く。
   正本ルールは docs/CURRENCY_DISPLAY_RULE.md。付ける側は金額の直前に置くだけでよい。 */
.cur {
  font-size: .68em;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: .01em;
  margin-inline-end: .22em;
  vertical-align: .06em;
}

/* 価格帯の下限に付ける「起」。NT$ と同じ扱い（一段小さく淡く）にして、
   目に入る主役を数字に保つ。正本ルールは docs/CURRENCY_DISPLAY_RULE.md。 */
.cur-from {
  font-size: .68em;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: .01em;
  margin-inline-start: .26em;
  vertical-align: .06em;
}

/* 規約・プライバシー・返品の「参考訳」注記（2026-10-07）。日本語・英語表示の時だけ出す。 */
.i18n-ref-note { display: none; }
html:lang(ja) .i18n-ref-note,
html:lang(en) .i18n-ref-note {
  display: block;
  margin: 10px 0 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--blue) 8%, transparent);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.7;
}