/* ====================
   Organization Page CSS (Final)
   重複排除・最終版
==================== */

:root{
    --ntt-blue: #0060AE;
    --ntt-navy: #003A75;
    --ink: #0b2540;
    --r: 14px;
    --shadow: 0 10px 26px rgba(2, 18, 38, .10);
    --shadow2: 0 3px 12px rgba(2, 18, 38, .10);
}

/* ---------- Tree / Node ---------- */
.tree{
    padding:12px;
    border-radius:var(--r);
    background:rgba(255,255,255,.76);
    box-shadow:var(--shadow);
}

.node{ margin:0; }

/* ---------- Card (base) ---------- */
.card{
    position:relative;
    border-radius:var(--r);
    padding:4px 14px 4px 18px;
    border:1px solid rgba(0,96,174,.16);
    box-shadow:var(--shadow2);
    background:#fff;
}

.card::before{
    content:"";
    position:absolute;
    left:0; top:0; bottom:0;
    width:12px;
    background:linear-gradient(180deg,var(--ntt-blue),var(--ntt-navy));
}

.card > div{ 
    background:transparent !important; 
    font-size: 20px;
}

.card .name{ font-weight:900; line-height:1.2; }
.card .desc{ margin-top:6px; font-size:13px; line-height:1.45; margin-left: 10px; }

/* ---------- Level Colors (上位ほど白) ---------- */
.lvl-1 > .card{ background:#ffffff; border-color:rgba(0,96,174,.45); }
.lvl-2 > .card{ background:#f4f9ff; border-color:rgba(0,96,174,.35); }
.lvl-3 > .card{ background:#e6f1fb; border-color:rgba(0,96,174,.28); }
.lvl-4 > .card{ background:#d6e9fb; border-color:rgba(0,96,174,.20); }
.lvl-5 > .card{ background:#c3def6; border-color:rgba(0,96,174,.14); }

/* ---------- Indent ---------- */
.node.lvl-2{ padding-left:28px; }
.node.lvl-3{ padding-left:56px; }
.node.lvl-4{ padding-left:84px; }
.node.lvl-5{ padding-left:112px; }

@media(max-width:860px){
  .node.lvl-2{ padding-left:10px; }
  .node.lvl-3{ padding-left:20px; }
  .node.lvl-4{ padding-left:30px; }
  .node.lvl-5{ padding-left:40px; }
  .card .desc{ display:none; }
}


/* 左アクセントバーも角丸に合わせる */
.lvl-1 > .card::before,
.lvl-2 > .card::before,
.lvl-3 > .card::before,
.lvl-4 > .card::before,
.lvl-5 > .card::before
{
    border-radius: 999px 0 0 999px; /* 左だけ円弧 */
}


/* 組織ページだけ article padding を無効化 */
.org-page article{
    padding-bottom: 0;
}


/* 折りたたみ用 */
.node.is-hidden{ display:none; }

/* クリックできる見た目（子を持つときだけ） */
.node.has-children > .card{ cursor:pointer; }

/* 展開状態の視覚サイン（任意） */
.node.has-children > .card::after{
  content:"▾";
  position:absolute;
  left: 10px;
  top:50%;
  transform:translateY(-50%);
  color: rgba(0,0,0,.45);
  font-weight:700;
}
.node.has-children.is-collapsed > .card::after{
  content:"▸";
}

.node.has-children > .card .name{
    padding-left: 14px;
}


/* lvl-2以下：文字色に合わせる */
.lvl-2.node.has-children > .card::before,
.lvl-3.node.has-children > .card::before,
.lvl-4.node.has-children > .card::before,
.lvl-5.node.has-children > .card::before{
    color: var(--ntt-blue);
}

/* =========================================================
   折りたたみ可能ノードのフォーカスハイライト
========================================================= */

/* hover（マウス） */
.node.has-children > .card:hover{
    box-shadow: 0 0 0 3px rgba(0, 96, 174, .25);
}

/* キーボードフォーカス（Enter / Tab） */
.node.has-children > .card:focus-visible{
    outline: none; /* デフォルトoutlineは消す */
    box-shadow:
      0 0 0 3px rgba(0, 96, 174, .45),
      0 8px 18px rgba(0, 58, 117, .25);
}

/* =========================================================
    Responsive
========================================================= */
@media (max-width: 860px){

    .node.lvl-2{ padding-left: 10px; }
    .node.lvl-3{ padding-left: 20px; }
    .node.lvl-4{ padding-left: 30px; }
    .node.lvl-5{ padding-left: 40px; }

    .tree{ padding: 10px; }
    .node{ margin: 0; }
    .card, .card .name{ 
        padding: 2px 2px 2px 8px; 
        font-size: 13px;
    }

    /* 説明文は非表示 */
	.card .desc{
	    display: none;
	}

    .node.has-children > .card:hover,
    .node.has-children > .card:focus-visible{
        box-shadow: none;
    }

}

/* =========================================
   社内部門（internal=true または親から継承）
   ※ organization.css の末尾に追加
========================================= */
.node.internal > .card {
    background: #eeeeee !important;
    border-color: rgba(90, 90, 90, 0.35) !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
}

.node.internal > .card::before {
    background: linear-gradient(180deg, #9a9a9a, #6f6f6f) !important;
}

.node.internal > .card .name,
.node.internal > .card .desc {
    color: #333333;
}

/* =========================================================
   社内部門（internal=true）
   → 階層ごとにグレー濃度を変える
========================================================= */

/* lvl-1（最も薄い） */
.node.internal.lvl-1 > .card{
    background:#fafafa !important;
    border-color: rgba(0,0,0,0.25) !important;
}

/* lvl-2 */
.node.internal.lvl-2 > .card{
    background:#f0f0f0 !important;
    border-color: rgba(0,0,0,0.25) !important;
}

/* lvl-3 */
.node.internal.lvl-3 > .card{
    background:#e4e4e4 !important;
    border-color: rgba(0,0,0,0.22) !important;
}

/* lvl-4 */
.node.internal.lvl-4 > .card{
    background:#d6d6d6 !important;
    border-color: rgba(0,0,0,0.20) !important;
}

/* lvl-5（最も濃い） */
.node.internal.lvl-5 > .card{
    background:#c6c6c6 !important;
    border-color: rgba(0,0,0,0.18) !important;
}

/* 左アクセントバー（グレーグラデーション） */
.node.internal > .card::before{
    background: linear-gradient(180deg,#9a9a9a,#5f5f5f) !important;
}

/* テキスト（少し落ち着かせる） */
.node.internal .name{
    color:#2a2a2a;
}
.node.internal .desc{
    color:#444;
}