/* マイページ（会員センター）：商品詳細ページと同じ「銀灰色の背景＋細い枠線の角丸パネル」。
   背景色 #F4F3F8 は employee-card-detail.html と同じ。枠線 1px #e8e8ed・大きい角丸は詳細ページの枠と同じ仕様。
   いまは user-dashboard.html のみで読み込み。他の会員センターのページへ広げるときは、このファイルを link するだけ。 */

html body,
html.account-wide-layout body,
html body.has-app-mobile-header { background: #F4F3F8 !important; }

/* 詳細ページのヒーローにある、薄い銀灰色／青のやわらかい円形の装飾 */
html body main { position: relative; overflow: hidden; background: transparent; }
html body main::before,
html body main::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  z-index: 0;
}
html body main::before {
  width: 840px; height: 840px; top: -470px; right: -120px;
  background: linear-gradient(rgba(236, 237, 239, 0.86), rgba(236, 237, 239, 0.18));
}
html body main::after {
  width: 760px; height: 760px; bottom: -420px; right: -300px;
  background: linear-gradient(rgba(76, 120, 242, 0.08), rgba(76, 120, 242, 0));
}
html body main > .container { position: relative; z-index: 1; }

/* 外側パネル：サイドバーと本文 */
html body .sidebar,
html body .main-content {
  background: #fff !important;
  border: 1px solid #e8e8ed !important;
  border-radius: 28px !important;
  box-shadow: none !important;
}
html body .sidebar { padding: 28px 20px !important; }
html body .main-content { padding: 36px 30px !important; }

/* デザイン作成・名簿作成ページは本文に ID セレクタで枠なしの指定があるため、同じ強さで上書きする */
html body #card-creation-page.main-content {
  background: #fff !important;
  border: 1px solid #e8e8ed !important;
  border-radius: 28px !important;
  box-shadow: none !important;
  padding: 36px 30px !important;
}

html body .content-header { border-bottom-color: #e8e8ed; }

/* サイドバーのメニュー */
html body .sidebar-menu a { border-radius: 14px !important; }
html body .user-profile { border-bottom-color: #e8e8ed; }

/* 内側のカード：銀灰色の面＋細い枠線 */
html body .dashboard-card,
html body .recent-orders {
  background: #f5f5f7 !important;
  border: 1px solid #e8e8ed !important;
  border-radius: 22px !important;
  box-shadow: none !important;
}
html body .order-item {
  background: #fff !important;
  border: 1px solid #e8e8ed !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

/* デザイン作成・名簿作成ページ内のカード */
html body #card-creation-page .dashboard-create-shortcuts > a,
html body #card-creation-page .studio-guide {
  border: 1px solid #e8e8ed !important;
  border-radius: 22px !important;
  box-shadow: none !important;
  overflow: hidden;
}
html body #card-creation-page .studio-batch {
  background: #f5f5f7 !important;
  border: 1px solid #e8e8ed !important;
  border-radius: 22px !important;
  box-shadow: none !important;
}

@media (max-width: 1279px) {
  html body .sidebar { padding: 14px !important; border-radius: 22px !important; }
  html body .main-content,
  html body #card-creation-page.main-content { padding: 22px 18px !important; border-radius: 22px !important; }
}
@media (max-width: 700px) {
  html body .main-content,
  html body #card-creation-page.main-content { padding: 18px 14px !important; }
  html body .dashboard-card,
  html body .recent-orders { border-radius: 18px !important; }
  html body main::before, html body main::after { opacity: .7; }
}

/* ===== 左メニュー：文字式のアカウント表示＋下部のログアウト行（account-sidebar.js が挿入） ===== */
html body .sidebar .account-profile-legacy { display: none !important; }
html body aside.sidebar.has-account-identity { display: flex; flex-direction: column; min-height: 620px; }
html body .sidebar .account-identity { text-align: left; padding: 0 6px 18px; margin: 0 0 12px; }
html body .sidebar .account-identity p { margin: 0; line-height: 1.7; text-align: left; overflow-wrap: anywhere; }
html body .sidebar .account-identity .account-company { margin-bottom: 4px; font-size: 14px; color: #2c425d; }
html body .sidebar .account-identity .account-company strong { font-weight: 700; }
html body .sidebar .account-identity .account-person { color: #7b899b; }
html body .sidebar .account-identity .account-person strong { font-weight: 400; font-size: 12px; color: #7b899b; }
html body .sidebar .account-identity .account-edit-link { margin-left: 8px; color: #285c98; text-decoration: none; }
html body .sidebar .account-identity .account-edit-link:hover { text-decoration: underline; }
html body .sidebar .account-sidebar-footer { margin-top: auto; padding: 18px 6px 0; border-top: 1px solid #edf0f4; }
html body .sidebar .account-sidebar-footer a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0; font-size: 13px; color: #7e8d9f; text-decoration: none;
}
html body .sidebar .account-sidebar-footer a:hover { color: #285c98; }
html body .sidebar .account-sidebar-footer a:focus-visible { outline: 2px solid #729bd0; outline-offset: 4px; }
@media (max-width: 1279px) {
  html body aside.sidebar.has-account-identity { min-height: 0; }
  html body .sidebar .account-identity { padding: 0 6px 10px; margin-bottom: 8px; }
  html body .sidebar .account-sidebar-footer { margin-top: 8px; padding-top: 6px; }
  html body .sidebar .account-sidebar-footer a { justify-content: flex-end; gap: 10px; }
}

/* ===== 全ページ共通の位置：面包屑・左メニュー・右の本文を同じ座標にそろえる =====
   これまでは 12ページが「左右100px余白」の標準レイアウト、user-card-create / user-card-batch が
   「余白なしの幅広」レイアウトで、ページを移るたびにメニューの位置が変わっていた。
   user-card-create のレイアウト（最大幅1400px・左右24px・メニューと本文の間30px）に統一する。
   style.css の `html body .dashboard-container { margin-left/right:100px !important }` が
   これを邪魔していたので、同じ強さで上書きする。 */
html body main > .container,
html body .breadcrumb > .container {
  box-sizing: border-box;
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}
html body .dashboard-container {
  box-sizing: border-box;
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
  gap: 30px;
}
html body .dashboard-container > .sidebar { flex: 0 0 280px; width: 280px; }
html body .dashboard-container > .main-content { flex: 1 1 0; min-width: 0; }
@media (max-width: 1279px) {
  html body .dashboard-container > .sidebar { flex: none !important; width: 100% !important; min-height: 0 !important; }
}

/* 面包屑：宽版ページ側だけ白背景＋下線が付いていて、縦位置が1pxずれていた。全ページ同じ見た目にする */
html body .breadcrumb,
html.account-wide-layout body .breadcrumb {
  background: transparent !important;
  border-bottom: 0 !important;
}

/* ===== 左メニューの「中身」も全ページ同じ位置に =====
   ・メニュー枠を右の本文の長さに合わせて伸ばさない（伸びるとログアウトの位置がページごとに変わる）
   ・上部の名前・メニュー項目・ログアウト行の大きさと間隔を全ページで同じにする */
html body .dashboard-container > aside.sidebar { align-self: flex-start; }
html body aside.sidebar .account-identity { padding: 0 6px 14px !important; margin: 0 0 12px !important; border-bottom: 0 !important; }
html body aside.sidebar .account-identity p { margin: 0 !important; line-height: 1.7 !important; }
html body aside.sidebar .account-identity .account-company { margin-bottom: 4px !important; }
html body aside.sidebar .sidebar-menu { margin: 0 !important; padding: 0 !important; }
html body aside.sidebar .account-sidebar-footer { margin-top: 12px !important; }
@media (min-width: 1280px) {
  html body aside.sidebar .sidebar-menu a { padding: 12px 15px !important; }
}
@media (max-width: 1279px) {
  html body aside.sidebar .sidebar-menu a { padding: 8px 14px !important; }
  html body aside.sidebar .account-identity { padding: 0 6px 10px !important; margin-bottom: 8px !important; }
}

/* 通常カードサイト（生成ページは <html data-site="standard">）：オンラインデザイナーはIDカード専用のため、
   「新しく作成する」の選択肢から「自分でデザイン」を外す（入稿・制作依頼はそのまま使える） */
html[data-site="standard"] .method-poster-self,
html[data-site="standard"] [data-open-card-editor],
html[data-site="standard"] .design-product-dialog { display: none !important; }
/* サイト別の文言：IDカード側では通常カード用の文言を隠す（通常カード側はIDカード用の文言を生成時に除去） */
html[data-storefront="id-card"] [data-site-only="standard"] { display: none !important; }
/* 通常カード側の「デザイン作成・入稿」は入口が2つなので、2列で横幅いっぱいに並べる */
html[data-site="standard"] #card-creation-page .dashboard-create-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }