/* ============================================================
   cocoise 公開面 PC加算レイヤー（design/pc デザイン確定版 2026-08-27）
   ・1024px未満では何も変えない（SP完成形を維持）
   ・色・角丸・フォントはテーマ契約22変数のみ（theme-contract.md）
   ・読み込み順: cocoise.css → cocoise-pc.css → themes/<id>/theme.css
   ・PC専用マークアップ: ヘッダー内 .pc-nav / .pc-header-auth、
     コンテンツを包む .pc-wrap > .pc-main + .pc-side（SPでは素のdiv）
   ============================================================ */

/* PC専用要素はSPでは描画しない */
.pc-nav, .pc-header-auth, .pc-side { display: none; }

/* ── サイドバーウィジェット共通枠（7type共通の「箱」） ── */
.widget-box { background: var(--bg-card); border: 1px solid var(--line-soft); border-radius: var(--radius-card); overflow: hidden; }
.widget-title { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line-accent); font-size: 12px; font-weight: 900; letter-spacing: .12em; color: var(--text-main); }
.widget-title::before { content: ""; width: 3px; height: 12px; background: var(--accent-1); }
.widget-body { padding: 12px 14px; }
.widget-link { display: flex; align-items: center; justify-content: space-between; padding: 9px 2px; border-bottom: 1px solid var(--line-soft); color: var(--text-main); font-size: 12px; }
.widget-link:last-child { border-bottom: none; }
.widget-link::after { content: "▸"; color: var(--accent-1); font-size: 11px; }
.widget-link:hover { color: var(--accent-1-light); }
/* areaウィジェット内のボタンは2列組み（.area-btn の flex:1 だと1行1個に伸びるため） */
.widget-body .area-btn { flex: 0 1 calc(50% - 3px); }

@media (min-width: 1024px) {
  /* シェル: 1200px中央寄せ。左右は--bg-baseの続き */
  .pg { max-width: 1200px; }

  /* ヘッダー: ハンバーガー→水平ナビ */
  .site-header { align-items: center; flex-wrap: wrap; gap: 18px; padding: 16px 24px 14px; }
  .site-header .header-actions { display: none; }
  .site-logo-text { font-size: 21px; }
  .pc-nav { display: flex; flex: 1; min-width: 0; gap: 2px; }
  .pc-nav-list { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; } /* ul（2026-10-27） */
  .pc-nav a { display: block; padding: 10px 11px; font-size: 13px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; border-radius: var(--radius-btn); }
  .pc-nav a:hover, .pc-nav a[aria-current="page"] { color: var(--accent-1-light); box-shadow: inset 0 -2px 0 var(--accent-1); }
  .pc-header-auth { display: flex; align-items: center; gap: 10px; }
  .pc-auth-btn { display: inline-block; border: 1px solid var(--accent-1); border-radius: var(--radius-btn); padding: 9px 16px; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--accent-1-light); white-space: nowrap; }
  .pc-auth-btn:hover { box-shadow: 0 0 12px var(--glow-accent); color: var(--accent-1-light); }
  .pc-auth-btn--solid { background: var(--surface-light); border-color: var(--surface-light); color: var(--text-on-light); }
  .pc-auth-btn--solid:hover { box-shadow: 0 0 12px var(--glow-light); color: var(--text-on-light); }
  .pc-icon-link { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--text-main); font-size: 9px; letter-spacing: .05em; }
  .pc-icon-link:hover { color: var(--accent-1-light); }
  .pc-logout { font-size: 11px; color: var(--text-sub); white-space: nowrap; }
  .pc-logout:hover { color: var(--accent-1-light); }
  .lang-menu--pc { display: block; }
  .lang-menu--sp { display: none; }

  /* 2カラム: メイン(可変) + サイドバー(固定幅) */
  .pc-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; padding: 0 24px; align-items: start; }
  .pc-main { min-width: 0; }
  .pc-side { display: flex; flex-direction: column; gap: 14px; }
  /* サイドバー（ウィジェット未登録等）が無いページは1カラム */
  .pc-wrap:not(:has(> aside.pc-side)) { grid-template-columns: minmax(0, 1fr); }

  /* フッター・信頼バー */
  .trust-bar { padding: 8px 12px; }
  .trust-bar-text { font-size: 11px; }
  .site-footer { margin-top: 44px; }
  .footer-pills { max-width: 500px; margin: 0 auto; }
  .footer-links { padding: 14px 8px 4px; }
  .footer-links a { font-size: 11px; }
  .footer-copy { padding: 10px 16px 18px; font-size: 10px; }
}

@media (min-width: 1200px) {
  .pc-wrap { grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; }
}