/* ============================================================
   eureka 組織図 — 専用スタイル
   スコープ: #org-chart-section 配下のみ
   ============================================================

   接続線の設計原則:
     ・横線はコンテナではなく各アイテムが担当する
     ・各アイテム::before = 横セグメント（gap の半分だけ隣方向へ伸ばす）
     ・各アイテム::after  = 縦ドロップ
     ・:first-child::before → left: 50%（自分の中心で切る）
     ・:last-child::before  → right: 50%（自分の中心で切る）
     ・これにより横線が「カード中心 ↔ カード中心」に収まりデッドブランチが消える
   ============================================================ */

/* ---- Section wrapper ---- */
#org-chart-section {
  padding: var(--sp-xl) 0 var(--sp-2xl);
}

/* ---- Org Chart Root ---- */
#org-chart-section .org-chart {
  display: flex;
  flex-direction: column;
}

/* ==============================
   EXEC SECTION (運営チーム)
   ============================== */
#org-chart-section .exec-section {
  align-self: center;
  background: rgba(255, 251, 235, 0.85);
  border: 2.5px solid var(--c-primary, #f9a825);
  border-radius: 28px;
  padding: 28px 48px 32px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 4px 28px rgba(249, 168, 37, 0.13);
}
/* exec → teams 縦線（高さは oc-teams-outer の margin-top に一致させる） */
#org-chart-section .exec-section::after {
  content: '';
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-1px);
  width: 2px;
  height: 40px;
  background: #ccc;
}

#org-chart-section .oc-section-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #e65100;
  background: #fff;
  border: 1.5px solid var(--c-primary, #f9a825);
  border-radius: 999px;
  padding: 4px 16px;
  margin-bottom: 22px;
  text-transform: uppercase;
}

/* ==============================
   EXEC LAYOUT
   ============================== */
#org-chart-section .exec-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 代表行 */
#org-chart-section .exec-rep {
  position: relative;
  padding-bottom: 28px;
}
#org-chart-section .exec-rep::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-1px);
  width: 2px;
  height: 28px;
  background: #d4b44a;
}

/* 副代表・会計行 */
#org-chart-section .exec-sub-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  position: relative;
}

/*
  exec-sub-item::before  = 横セグメント
    gap 半分(8px)だけ隣方向へ伸ばして隣アイテムと繋ぐ
    :first-child → left: 50% で左端を中心に収める
    :last-child  → right: 50% で右端を中心に収める
  exec-sub-item::after   = 縦ドロップ（カードに乗らないので hover で動かない）
*/
#org-chart-section .exec-sub-item {
  position: relative;
  padding-top: 28px;
  display: flex;
  justify-content: center;
}
#org-chart-section .exec-sub-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -8px;
  right: -8px;
  height: 2px;
  background: #d4b44a;
}
#org-chart-section .exec-sub-item:first-child::before { left: 50%; }
#org-chart-section .exec-sub-item:last-child::before  { right: 50%; }
#org-chart-section .exec-sub-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-1px);
  width: 2px;
  height: 28px;
  background: #d4b44a;
}

/* ==============================
   TEAMS SECTION
   ============================== */
#org-chart-section .oc-teams-outer {
  margin-top: 40px;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--c-primary, #f9a825) var(--c-border, #ffe082);
}
#org-chart-section .oc-teams-outer::-webkit-scrollbar       { height: 6px; }
#org-chart-section .oc-teams-outer::-webkit-scrollbar-track { background: var(--c-bg, #fffde7); border-radius: 3px; }
#org-chart-section .oc-teams-outer::-webkit-scrollbar-thumb { background: var(--c-primary, #f9a825); border-radius: 3px; }

#org-chart-section .oc-teams-scroll {
  display: block;
  width: max-content;
  min-width: 100%;
}

#org-chart-section .oc-teams-grid {
  display: flex;
  min-width: max-content;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 14px;
}

/*
  oc-team-col::before  = 横セグメント（gap 半分 7px だけ伸ばす）
  oc-team-col::after   = 縦ドロップ 32px
  :first-child / :last-child で端を刈る
*/
#org-chart-section .oc-team-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  width: 170px;
  padding-top: 32px;
  position: relative;
}
#org-chart-section .oc-team-col::before {
  content: '';
  position: absolute;
  top: 0;
  left: -7px;
  right: -7px;
  height: 2px;
  background: #ccc;
}
#org-chart-section .oc-teams-grid > :first-child::before { left: 50%; }
#org-chart-section .oc-teams-grid > :last-child::before  { right: 50%; }
#org-chart-section .oc-team-col::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-1px);
  width: 2px;
  height: 32px;
  background: #ccc;
}

/* ==============================
   MEMBER CARDS
   ============================== */
#org-chart-section .oc-card {
  display: block;
  width: 100%;
  max-width: 190px;
  padding: 13px 11px 15px;
  background: #fff;
  border: 2px solid #e0e0e0;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
  text-align: center;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  cursor: default;
}
#org-chart-section .oc-card:hover {
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.13);
}
#org-chart-section .oc-card .oc-fname { font-size: 15px; font-weight: 700; color: #222; margin-bottom: 7px; }
#org-chart-section .oc-card .oc-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 7px;
  letter-spacing: 0.04em;
}
#org-chart-section .oc-card .oc-school {
  font-size: 10px;
  color: #666;
  line-height: 1.4;
  border-top: 1px dashed #eee;
  padding-top: 7px;
  margin-top: 2px;
}

/* 代表カード */
#org-chart-section .oc-card.rep-top {
  min-width: 220px;
  padding: 22px 18px;
  background: linear-gradient(135deg, #f9a825, #ff8f00);
  border-color: #e65100;
  box-shadow: 0 6px 22px rgba(249, 168, 37, 0.38);
}
#org-chart-section .oc-card.rep-top .oc-fname { color: #fff; font-size: 20px; }
#org-chart-section .oc-card.rep-top .oc-badge { background: rgba(255,255,255,.25); color: #fff; border: 1px solid rgba(255,255,255,.5); }
#org-chart-section .oc-card.rep-top .oc-school { color: rgba(255,255,255,.9); border-top-color: rgba(255,255,255,.3); }

/* Role border colors */
#org-chart-section .c-vice    { border-color: #ffb300; }
#org-chart-section .c-kaiko   { border-color: #9c27b0; }
#org-chart-section .c-onsen   { border-color: #ef5350; }
#org-chart-section .c-arch    { border-color: #1976d2; }
#org-chart-section .c-plan    { border-color: #388e3c; }
#org-chart-section .c-cafe    { border-color: #e64a19; }
#org-chart-section .c-edit    { border-color: #00796b; }
#org-chart-section .c-dev     { border-color: #3949ab; }
#org-chart-section .c-sns     { border-color: #00acc1; }
#org-chart-section .c-marche  { border-color: #c2185b; }
#org-chart-section .c-tankyuu { border-color: #6a1b9a; }
#org-chart-section .c-eigyou  { border-color: #0277bd; }
#org-chart-section .c-kikaku2 { border-color: #558b2f; }
#org-chart-section .c-soumu   { border-color: #5d4037; }

/* Badge colors */
#org-chart-section .b-vice    { background: #ffb300; color: #5a3d00 !important; }
#org-chart-section .b-kaiko   { background: #9c27b0; }
#org-chart-section .b-onsen   { background: #ef5350; }
#org-chart-section .b-arch    { background: #1976d2; }
#org-chart-section .b-plan    { background: #388e3c; }
#org-chart-section .b-cafe    { background: #e64a19; }
#org-chart-section .b-edit    { background: #00796b; }
#org-chart-section .b-dev     { background: #3949ab; }
#org-chart-section .b-sns     { background: #00acc1; }
#org-chart-section .b-marche  { background: #c2185b; }
#org-chart-section .b-tankyuu { background: #6a1b9a; }
#org-chart-section .b-eigyou  { background: #0277bd; }
#org-chart-section .b-kikaku2 { background: #558b2f; }
#org-chart-section .b-soumu   { background: #5d4037; }

/* ==============================
   TEAM LABELS
   ============================== */
#org-chart-section .oc-team-label {
  width: 100%;
  max-width: 170px;
  padding: 10px 8px;
  border-radius: 14px;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  text-align: center;
  box-shadow: 0 3px 10px rgba(0,0,0,0.16);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  cursor: default;
}
#org-chart-section .oc-team-label:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0,0,0,0.2); }
#org-chart-section .oc-team-label .tl-emoji { font-size: 18px; display: block; margin-bottom: 4px; }
#org-chart-section .oc-team-label .tl-name  { display: block; font-size: 12px; }
#org-chart-section .oc-team-label .tl-count {
  display: inline-block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 500;
  background: rgba(255,255,255,.22);
  border-radius: 999px;
  padding: 2px 8px;
}

#org-chart-section .tl-onsen   { background: linear-gradient(135deg, #ef5350, #c62828); }
#org-chart-section .tl-arch    { background: linear-gradient(135deg, #1976d2, #0d47a1); }
#org-chart-section .tl-plan    { background: linear-gradient(135deg, #388e3c, #1b5e20); }
#org-chart-section .tl-cafe    { background: linear-gradient(135deg, #e64a19, #bf360c); }
#org-chart-section .tl-edit    { background: linear-gradient(135deg, #00796b, #004d40); }
#org-chart-section .tl-dev     { background: linear-gradient(135deg, #3949ab, #1a237e); }
#org-chart-section .tl-sns     { background: linear-gradient(135deg, #00acc1, #00838f); }
#org-chart-section .tl-marche  { background: linear-gradient(135deg, #c2185b, #880e4f); }
#org-chart-section .tl-tankyuu { background: linear-gradient(135deg, #6a1b9a, #4a148c); }
#org-chart-section .tl-eigyou  { background: linear-gradient(135deg, #0277bd, #01579b); }
#org-chart-section .tl-kikaku2 { background: linear-gradient(135deg, #558b2f, #33691e); }
#org-chart-section .tl-soumu   { background: linear-gradient(135deg, #5d4037, #3e2723); }

/* Members stack */
#org-chart-section .oc-members-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  width: 100%;
  position: relative;
}
#org-chart-section .oc-members-stack::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-1px);
  width: 2px;
  height: 12px;
  background: #ccc;
}

/* ==============================
   GROUP COLUMNS
   ============================== */
#org-chart-section .oc-group-col {
  flex: 0 0 auto;
  width: 520px;
  padding-top: 32px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#org-chart-section .oc-group-col.sm { width: 360px; }

#org-chart-section .oc-group-box {
  width: 100%;
  border: 2.5px solid #ef5350;
  border-radius: 22px;
  padding: 18px 14px 22px;
  background: rgba(239, 83, 80, 0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
}
#org-chart-section .oc-group-title {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: #c62828;
  background: #fff;
  border: 2px solid #ef5350;
  border-radius: 999px;
  padding: 5px 18px;
  position: relative;
  white-space: nowrap;
}
/* グループタイトル → サブグリッド 縦線
   height = oc-sub-outer の margin-top に一致 */
#org-chart-section .oc-group-title::after {
  content: '';
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-1px);
  width: 2px;
  height: 18px;
  background: #ef5350;
}
#org-chart-section .oc-sub-outer {
  margin-top: 18px;
  width: 100%;
}
/* oc-sub-outer::before は廃止 → 各 oc-sub-col が担当 */
#org-chart-section .oc-sub-grid {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/*
  oc-sub-col::before  = 横セグメント（gap 半分 4px 伸ばす）
  oc-sub-col::after   = 縦ドロップ 28px
  :first-child / :last-child で端を刈る
*/
#org-chart-section .oc-sub-col {
  flex: 1;
  min-width: 140px;
  max-width: 165px;
  padding-top: 28px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#org-chart-section .oc-sub-col::before {
  content: '';
  position: absolute;
  top: 0;
  left: -4px;
  right: -4px;
  height: 2px;
  background: #ef5350;
}
#org-chart-section .oc-sub-col:first-child::before { left: 50%; }
#org-chart-section .oc-sub-col:last-child::before  { right: 50%; }
#org-chart-section .oc-sub-col::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-1px);
  width: 2px;
  height: 28px;
  background: #ef5350;
}

/* 飲食部 カラー */
#org-chart-section .inshoku-box                        { border-color: #f57c00; background: rgba(245,124,0,0.04); }
#org-chart-section .inshoku-box .oc-group-title        { color: #e65100; border-color: #f57c00; }
#org-chart-section .inshoku-box .oc-group-title::after { background: #f57c00; }
#org-chart-section .inshoku-box .oc-sub-col::before    { background: #f57c00; }
#org-chart-section .inshoku-box .oc-sub-col::after     { background: #f57c00; }

/* クリエイティブ部 カラー */
#org-chart-section .creative-box                        { border-color: #7c4dff; background: rgba(124,77,255,0.04); }
#org-chart-section .creative-box .oc-group-title        { color: #5e35b1; border-color: #7c4dff; }
#org-chart-section .creative-box .oc-group-title::after { background: #7c4dff; }
#org-chart-section .creative-box .oc-sub-col::before    { background: #7c4dff; }
#org-chart-section .creative-box .oc-sub-col::after     { background: #7c4dff; }

/* ==============================
   LEGEND
   ============================== */
#org-chart-section .oc-legend {
  margin: 48px auto 0;
  max-width: 1100px;
  background: #fff;
  border: 1px solid var(--c-border, #ffe082);
  border-radius: 18px;
  padding: 22px 28px;
  box-shadow: var(--sh-sm, 0 2px 12px rgba(239,108,0,0.12));
}
#org-chart-section .oc-legend-title {
  font-size: 13px;
  color: var(--c-primary, #f9a825);
  border-left: 4px solid var(--c-primary, #f9a825);
  padding-left: 10px;
  margin-bottom: 18px;
  letter-spacing: 0.1em;
}

/* Card grid */
#org-chart-section .oc-legend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

#org-chart-section .oc-legend-card {
  background: #fafafa;
  border: 1px solid var(--c-border, #ffe082);
  border-radius: 12px;
  padding: 12px 14px;
}

#org-chart-section .oc-legend-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}

#org-chart-section .oc-legend-card-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--c-text, #1a1a1a);
}

#org-chart-section .oc-legend-card-desc {
  font-size: 11px;
  line-height: 1.75;
  color: #666;
  margin: 0;
}

#org-chart-section .oc-legend-dot { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }

/* ==============================
   SCROLL HINT (モバイル)
   ============================== */
#org-chart-section .oc-scroll-hint {
  display: none;
  text-align: center;
  font-size: 11px;
  color: var(--c-muted, #7b5e57);
  margin-top: 8px;
  letter-spacing: 0.05em;
}

/* ==============================
   PROFILE VIEW TOGGLE BAR
   ============================== */
.profile-view-bar {
  background: var(--c-bg, #fffde7);
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--c-border, #ffe082);
}
.view-toggle-bar {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.view-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 28px;
  border-radius: 999px;
  border: 2px solid var(--c-primary, #f9a825);
  background: transparent;
  color: var(--c-primary, #f9a825);
  font-family: var(--font-body, 'Noto Sans JP', sans-serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.view-toggle-btn:hover {
  background: rgba(249, 168, 37, 0.12);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(249, 168, 37, 0.2);
}
.view-toggle-btn.active {
  background: var(--c-primary, #f9a825);
  color: #5a3d00;
  box-shadow: 0 4px 14px rgba(249, 168, 37, 0.35);
}
.view-toggle-btn .btn-icon { font-size: 16px; }

/* ==============================
   RESPONSIVE
   ============================== */
@media (max-width: 900px) {
  #org-chart-section .exec-section    { padding: 20px 24px 24px; }
  #org-chart-section .oc-card.rep-top { min-width: 180px; }
  #org-chart-section .exec-sub-row    { gap: 10px; }
  #org-chart-section .exec-sub-item::before  { left: -5px; right: -5px; }
  #org-chart-section .exec-sub-item:first-child::before { left: 50%; }
  #org-chart-section .exec-sub-item:last-child::before  { right: 50%; }
  #org-chart-section .oc-group-col    { width: 480px; }
  #org-chart-section .oc-group-col.sm { width: 330px; }
  #org-chart-section .oc-scroll-hint  { display: block; }
}
@media (max-width: 600px) {
  #org-chart-section              { padding: var(--sp-lg) 0 var(--sp-xl); }
  #org-chart-section .exec-section { padding: 16px 16px 20px; }
  #org-chart-section .exec-sub-row { gap: 8px; }
  #org-chart-section .oc-card.rep-top { min-width: 150px; padding: 16px 12px; }
  #org-chart-section .oc-legend   { padding: 16px; }
}