/* ═══════════════════════════════════════════════════════
   public-sidebar.css  v2026-05-18g
   公開ページ共通サイドパネル（admin v2 同型・スマホメイン）
   admin_dashboard.html / admin_dashboard_v2.html は対象外
═══════════════════════════════════════════════════════ */

/* ── CSS変数（未定義ページ用フォールバック） ── */
:root {
  --ps-paper:     var(--paper, var(--washi, #faf8f5));
  --ps-ink:       var(--ink, var(--washi-ink, #1a1a1a));
  --ps-ink-soft:  var(--ink-soft, rgba(28,25,22,.55));
  --ps-kin:       var(--kintsugi, var(--kin, #b8953a));
  --ps-kin-faint: var(--kintsugi-faint, rgba(200, 169, 110, 0.25));
  --ps-f-serif:   var(--f-serif, 'Yu Mincho', YuMincho, 'Hiragino Mincho ProN', '游明朝', 'Noto Serif JP', serif);
  --ps-f-sans:    var(--f-sans, ui-sans-serif, system-ui, sans-serif);
  --ps-w:         260px;
  --ps-w-col:     64px;
}

/* ════════════════════════════════
   サイドパネル本体
════════════════════════════════ */
.publicSidebar {
  position:        fixed;
  top:             0;
  left:            0;
  width:           var(--ps-w);
  height:          100vh; height: 100dvh;
  background:      var(--ps-paper);
  border-right:    1px solid var(--ps-kin-faint);
  display:         flex;
  flex-direction:  column;
  z-index:         100;
  overflow-y:      auto;
  overflow-x:      hidden;
  transition:      width 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow:      2px 0 12px rgba(0,0,0,0.04);
  -webkit-font-smoothing: antialiased;
  font-smooth:     always;
}

/* ── ヘッダー ── */
.psHeader {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         1.2rem 1rem 1rem;
  border-bottom:   1px solid var(--ps-kin-faint);
  flex-shrink:     0;
}

.psLogo {
  display:         flex;
  align-items:     center;
  gap:             0.5rem;
  text-decoration: none;
  color:           var(--ps-ink);
  flex:            1;
  min-width:       0;
  cursor:          default;  /* リンク解除：クリック不可示唆 */
}

.psLogoIcon {
  width:       24px;
  height:      24px;
  flex-shrink: 0;
}

.psLogoText {
  font-family:    var(--ps-f-serif);
  font-size:      1.1rem;
  letter-spacing: 0.12em;
  color:          var(--ps-ink);
  white-space:    nowrap;
  overflow:       hidden;
  line-height:    1;           /* テキスト高さの揺らぎ抑制 */
  display:        inline-flex;
  align-items:    center;      /* ◎SVGとの垂直中央揃え */
}

/* PC折りたたみボタン */
.psToggle {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           28px;
  height:          28px;
  background:      transparent;
  border:          1px solid var(--ps-kin-faint);
  border-radius:   6px;
  color:           var(--ps-ink-soft);
  font-size:       13px;
  cursor:          pointer;
  flex-shrink:     0;
  transition:      transform 0.25s ease, color 0.15s;
  line-height:     1;
}
.psToggle:hover {
  color: var(--ps-ink);
}

/* スマホ閉じるボタン */
.psClose {
  display:     none;
  background:  transparent;
  border:      none;
  color:       var(--ps-ink-soft);
  font-size:   1.4rem;
  cursor:      pointer;
  line-height: 1;
  padding:     0 0.25rem;
  flex-shrink: 0;
}
.psClose:hover {
  color: var(--ps-ink);
}

/* ── ナビ ── */
.psNav {
  flex:       1;
  padding:    0.5rem 0;
  overflow-y: auto;
}

.psNavSection {
  margin-bottom: 0.25rem;
}

.psNavLabel {
  font-family:    var(--ps-f-sans);
  font-size:      0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--ps-kin);
  padding:        0.6rem 1rem 0.2rem;
  white-space:    nowrap;
  overflow:       hidden;
}

.psNavLink {
  display:         flex;
  align-items:     center;
  gap:             0.6rem;
  padding:         0.5rem 1rem 0.5rem 1.1rem;
  color:           var(--ps-ink);
  text-decoration: none;
  font-family:     var(--ps-f-serif);
  font-size:       0.82rem;
  letter-spacing:  0.05em;
  line-height:     1.7;
  transition:      background 0.15s, color 0.15s;
  border-radius:   0;
  white-space:     nowrap;
  overflow:        hidden;
}
.psNavLink:hover {
  background: var(--ps-kin-faint);
  color:      var(--ps-kin);
}
.psNavLink.current {
  background:  var(--ps-kin-faint);
  color:       var(--ps-kin);
  font-weight: 500;
}

.psNavIcon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           18px;
  height:          18px;
  flex-shrink:     0;
}
.psNavIcon svg {
  width:          18px;
  height:         18px;
  stroke:         currentColor;
  fill:           none;
  stroke-width:   1.5;
  vertical-align: middle;
}

.psNavText {
  flex:     1;
  overflow: hidden;
}

/* ── フッター ── */
.psFooter {
  border-top:     1px solid var(--ps-kin-faint);
  padding:        0.75rem 1rem;
  flex-shrink:    0;
  padding-bottom: 32px; /* ブラウザ最下部URLツールチップ余白 */
}

/* ── フッター行（ユーザーUI + 言語切替） ── */
.psFooterRow {
  display:        flex;
  align-items:    center;
  gap:            8px;
  margin-bottom:  6px;
}

/* ── ユーザー情報ボックス ── */
.psUserBox {
  display:        flex;
  align-items:    center;
  gap:            6px;
  padding:        4px 8px;
  border-radius:  6px;
  cursor:         pointer;
  background:     rgba(0,0,0,0.04);
  flex:           1;
  min-width:      0;
  transition:     background 0.15s;
  border:         none;
  text-align:     left;
}
.psUserBox:hover {
  background: rgba(0,0,0,0.08);
}

.psUserAvatar {
  width:           20px;
  height:          20px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  color:           var(--ps-ink-soft);
}
.psUserAvatar svg {
  width:        16px;
  height:       16px;
  stroke:       currentColor;
  fill:         none;
  stroke-width: 1.5;
}
.psUserBox.logged-in .psUserAvatar {
  color: var(--ps-kin);
}

.psUserName {
  font-family:   var(--ps-f-serif);
  font-size:     0.72rem;
  letter-spacing: 0.05em;
  color:         var(--ps-ink-soft);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  flex:          1;
}
.psUserBox.logged-in .psUserName {
  color: var(--ps-ink);
}

.psUserSettings {
  border:      none;
  background:  transparent;
  cursor:      pointer;
  padding:     2px;
  display:     flex;
  align-items: center;
  color:       var(--ps-ink-soft);
  flex-shrink: 0;
  transition:  color 0.15s;
}
.psUserSettings:hover {
  color: var(--ps-kin);
}
.psUserSettings svg {
  width:        14px;
  height:       14px;
  stroke:       currentColor;
  fill:         none;
  stroke-width: 1.5;
}

/* ── 言語切替 ── */
.psLangSwitcher {
  background:    transparent;
  border:        1px solid var(--ps-kin-faint);
  color:         var(--ps-ink-soft);
  font-family:   var(--ps-f-sans);
  font-size:     0.72rem;
  padding:       0.3rem 0.7rem;
  border-radius: 999px;
  cursor:        pointer;
  white-space:   nowrap;
  transition:    border-color 0.15s, color 0.15s;
  flex-shrink:   0;
}
.psLangSwitcher:hover {
  border-color: var(--ps-kin);
  color:        var(--ps-kin);
}

.psCopy {
  font-family: var(--ps-f-sans);
  font-size:   0.68rem;
  color:       var(--ps-ink-soft);
  margin-top:  0.25rem;
}

/* ════════════════════════════════
   PC 折りたたみ（collapsed）
════════════════════════════════ */
.publicSidebar.collapsed {
  width: var(--ps-w-col);
}
.publicSidebar.collapsed .psToggle {
  display: none !important;
}
.publicSidebar.collapsed .psNavText,
.publicSidebar.collapsed .psNavLabel,
.publicSidebar.collapsed .psLogoText {
  display: none;
}
/* 折りたたみ時：閉じるアイコン完全非表示（ロゴを侵食しないよう） */
.publicSidebar.collapsed .psClose {
  display: none !important;
}

/* collapsed時：psFooter は表示・中身は最低限 */
.publicSidebar.collapsed .psFooter {
  display: flex !important;  /* 既存 display:none を上書き */
  flex-direction: column;
  align-items: center;
  padding: 8px 0 32px 0;  /* 上8px・下URL余白32px */
  gap: 0;
}

.publicSidebar.collapsed .psFooterRow {
  flex-direction: column;
  gap: 0;
  width: 100%;
  justify-content: center;
}

.publicSidebar.collapsed .psUserBox {
  background: transparent;
  padding: 8px 0;
  justify-content: center;
  width: 100%;
  flex: 0 0 auto;
  cursor: pointer;
}
.publicSidebar.collapsed .psUserBox:hover {
  background: rgba(0,0,0,0.04);
}

/* collapsed時：名前・設定・言語切替・copyright を非表示 */
.publicSidebar.collapsed .psUserName,
.publicSidebar.collapsed .psUserSettings,
.publicSidebar.collapsed .psLangSwitcher,
.publicSidebar.collapsed .psCopy {
  display: none;
}

/* アバターはナビアイコンと同じサイズで中央揃え */
.publicSidebar.collapsed .psUserAvatar {
  width: 24px; height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.publicSidebar.collapsed .psUserAvatar svg {
  width: 22px;
  height: 22px;
}
.publicSidebar.collapsed .psNavLink {
  justify-content: center;
  padding:         0.5rem 0;
  gap:             0;
}
.publicSidebar.collapsed .psNavIcon {
  width:  22px;
  height: 22px;
  margin: 0 auto;
}
.publicSidebar.collapsed .psNavIcon svg {
  width:  22px;
  height: 22px;
}
.publicSidebar.collapsed .psHeader {
  justify-content: center;  /* ロゴを中央配置 */
}
.publicSidebar.collapsed .psLogo {
  flex:            0 0 auto;  /* 中央配置のため flex 展開を解除 */
  justify-content: center;
  cursor:          pointer;   /* collapsed時：展開可能を示唆 */
}
/* expanded時：psLogo はリンク解除のまま（cursor:default） */
.publicSidebar:not(.collapsed) .psLogo {
  cursor: default;
}

/* ════════════════════════════════
   メインコンテンツのマージン
════════════════════════════════ */
body.public-sidebar-page {
  margin-left: var(--ps-w);
  transition:  margin-left 0.25s ease;
}
body.public-sidebar-collapsed {
  margin-left: var(--ps-w-col);
}

/* index.html 専用：フルスクリーン維持 */
body.public-sidebar-page.ps-fullscreen {
  margin-left: 0;
}

/* ════════════════════════════════
   ハンバーガーボタン（スマホ専用）
════════════════════════════════ */
.psHamburger {
  display:          none;
  position:         fixed;
  top:              12px;
  left:             12px;
  z-index:          200;
  width:            40px;
  height:           40px;
  align-items:      center;
  justify-content:  center;
  background:       var(--ps-paper, #faf8f5);
  border:           none;
  border-radius:    8px;
  cursor:           pointer;
  box-shadow:       2px 2px 10px rgba(0,0,0,0.10);
  padding:          0;
  transition:       box-shadow 0.2s;
}
.psHamburger:hover {
  box-shadow: 2px 2px 14px rgba(0,0,0,0.15);
}
.psHamburger svg {
  width:            24px;
  height:           24px;
  display:          block;
}
/* 三本線 span は非表示（SVGに置き換え） */
.psHamburger span {
  display: none;
}

/* ════════════════════════════════
   オーバーレイ（スマホドロワー用）
════════════════════════════════ */
.psOverlay {
  display:        none;
  position:       fixed;
  inset:          0;
  background:     rgba(0,0,0,0.4);
  z-index:        99;
  opacity:        0;
  transition:     opacity 0.2s;
}
.psOverlay.active {
  opacity: 1;
}

/* ════════════════════════════════
   既存ナビ/フッターの非表示化
   （HTML・CSS は保持・display:none のみ）
════════════════════════════════ */
nav.nav,
.nav.nav,
footer.footer,
.footer.footer {
  display: none !important;
}

/* ════════════════════════════════
   スマホ（≤768px）：ドロワーモード
════════════════════════════════ */
@media (max-width: 768px) {
  /* body マージンなし */
  body.public-sidebar-page {
    margin-left: 0 !important;
  }

  /* サイドパネルはオフスクリーン */
  .publicSidebar {
    transform:  translateX(-100%);
    box-shadow: none;
    z-index:    200;
  }

  /* ドロワー展開 */
  .publicSidebar.drawerOpen {
    transform:  translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,0.18);
  }

  /* ハンバーガー表示（ドロワー閉じている時のみ） */
  .psHamburger {
    display: flex;
  }
  /* ドロワー展開中は psHamburger を完全非表示 */
  .publicSidebar.drawerOpen + .psHamburger,
  .publicSidebar.drawerOpen ~ .psHamburger {
    display: none !important;
  }

  /* オーバーレイ */
  .psOverlay {
    display: block;
    pointer-events: none;
  }
  .psOverlay.active {
    pointer-events: auto;
  }

  /* 折りたたみボタン非表示 */
  .psToggle {
    display: none !important;
  }

  /* 閉じるボタン表示 */
  .psClose {
    display: flex !important;
  }
}

/* ════════════════════════════════
   PC（≥769px）
════════════════════════════════ */
@media (min-width: 769px) {
  .psHamburger {
    display: none !important;
  }
  .psClose {
    display: none !important;
  }
  .psOverlay {
    display: none !important;
  }
}

/* ════════════════════════════════
   ◎ハンバーガー・ドロワー展開時ロゴ表示
════════════════════════════════ */
/* ドロワー展開時：ヘッダーの「といろ」ロゴ文字を表示 */
.publicSidebar.drawerOpen .psLogoText {
  display: block !important;
}

/* ── 2026-05-17 みつは判断：psLogoText 金色（kintsugi）+ 公開サイドバー アイコン非表示 ── */
/* ロゴ文字「といろ」をハンバーガー展開時に金（kintsugi）で表示 */
.publicSidebar .psLogoText {
  color: var(--ps-kin);
}
/* ドロワー展開時も同様に金 */
.publicSidebar.drawerOpen .psLogoText {
  color: var(--ps-kin);
}

/* ナビアイコン：2026-05-18 採用版アイコン反映で常時表示に変更 */
/* 旧: .publicSidebar:not(.collapsed) .psNavIcon { display: none; } ← 解除 */

/* ── 2026-05-18 採用版アイコン反映：mask-image 方式でアイコン表示再開 ── */
/* psNavIcon は <span class="psNavIcon" style="--ps-icon-url: url(...)" > */
.publicSidebar .psNavIcon {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask-image: var(--ps-icon-url, none);
  mask-image: var(--ps-icon-url, none);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  flex-shrink: 0;
  vertical-align: middle;
}
/* 折りたたみボタンを物理非表示 */
.publicSidebar .psToggle { display: none !important; }
/* 万一 .collapsed が付いても通常幅で展開状態を維持 */
.publicSidebar.collapsed { width: var(--ps-w) !important; }
.publicSidebar.collapsed .psNavText,
.publicSidebar.collapsed .psNavLabel,
.publicSidebar.collapsed .psLogoText { display: revert !important; }
.publicSidebar.collapsed .psLogoText { color: var(--ps-kin) !important; }
.publicSidebar.collapsed .psHeader { justify-content: flex-start !important; }
.publicSidebar.collapsed .psLogo { flex: 0 1 auto !important; justify-content: flex-start !important; }
.publicSidebar.collapsed .psFooter { padding: 0.75rem 1rem; padding-bottom: 32px; }
.publicSidebar.collapsed .psUserName,
.publicSidebar.collapsed .psUserSettings,
.publicSidebar.collapsed .psLangSwitcher,
.publicSidebar.collapsed .psCopy { display: revert !important; }

/* ── 2026-05-18b みつは判断：PC幅でもサイドバー閉じる ── */

/* hidden クラスで完全非表示（PC・モバイル共通） */
.publicSidebar.hidden {
  transform: translateX(-100%);
  pointer-events: none;
  visibility: hidden;
}

/* hidden 時：body 自体の margin-left を 0 にする（根本修正）
   body.public-sidebar-page に margin-left: var(--ps-w) が当たっているため
   子要素ではなく body 自体を上書きする必要がある */
body.public-sidebar-page.public-sidebar-hidden {
  margin-left: 0 !important;
}


/* PC幅でもハンバーガーボタンを表示する（hidden 時のみ） */
@media (min-width: 769px) {
  body.public-sidebar-hidden .psHamburger {
    display: flex !important;
  }
}

/* 閉じるボタン psToggle を PC幅で「サイドバーを閉じる」用に表示復活 */
/* モバイル時は既存の psClose（×）+ psOverlay 挙動を継続・psToggle は非表示 */
@media (min-width: 769px) {
  .publicSidebar .psToggle {
    display: flex !important;
  }
}

/* ════════════════════════════════
   2026-05-18h 緊急：drawerOpen 時の transform を最終勝者に確定
   根拠：.publicSidebar.hidden { transform: translateX(-100%) } がグローバルに存在し
         カスケード順で @media 内の drawerOpen ルールに勝っていた問題を修正。
         !important + ファイル末尾配置で最優先を保証する。
════════════════════════════════ */
@media (max-width: 768px) {
  .publicSidebar.drawerOpen {
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}