@charset "UTF-8";
/* =========================
   공통 (모바일 퍼스트)
   ========================= */
:root{
  --primary: #b70000;
  --text: #111;
  --muted: #6b7280;
  --line: #e5e7eb;
  --bg: #fff;
  --radius: 16px;
}

/***** organization *****/
.sub_visual.organization {background: url("../images/img_visual_about.jpg") no-repeat center top;}

.orgchart{
  width: 100%;
  background: var(--bg);
  color: var(--text);
}
.org-container{
  max-width: 1200px;            /* PC 기준 최대 컨텐츠 폭 */
  margin: 40px auto 64px;
  padding: 0 16px;
  box-sizing: border-box;
  /* 1200px 초과 화면에서도 중앙 정렬 + 내부 그리드는 반응형으로 */
}

.org-row{
  position: relative;
  display: flex;
  flex-direction: column;        /* 모바일 스택 */
  gap: 16px;
  margin: 16px 0;
}
.node{ display:flex; justify-content:center; }

.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  min-width: 180px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

/********** Phone & tablet **********/
@media screen and (max-width:768px) and (orientation:portrait), (max-height:500px) and (orientation:landscape) {
	.card { min-width: 120px; }
}
	
.card .role{ display:block; font-size:.85rem; color:var(--muted); margin-bottom:4px; }
.card .name{ margin:0; font-size:1.125rem; line-height:1.35; font-weight:700; }
.card .title{ display:block; font-size:.85rem; color:var(--primary); margin-top:2px; font-weight:600; }

.card--ceo{
  border:2px solid var(--primary);
  box-shadow: 0 6px 24px rgba(183,0,0,.15);
}
.card--lead{
  border:1px dashed var(--primary);
}

/* 레벨 연결선(모바일은 최소화) */
.org-row.level-1::after{ content:none; }
.org-row::after{
  content:"";
  position:absolute; top:-10px; left:24px;
  width:1px; height:10px; background:var(--line);
}

/* 2레벨 좌/우 브랜치 */
.branch{ position:relative; display:flex; flex-direction:column; gap:12px; }
.branch > .connector{ display:none; }

/* 동일 스타일 그룹 박스(변호사/보험보상국 공통) */
.group{
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  background:#fafafa;
  padding: 16px;
}
.group-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 12px;
  border-bottom:1px solid var(--line);
  padding-bottom:8px;
}
.group-title{
  font-size:1rem; line-height:1.3; font-weight:800; color:#222;
}

/* 보험보상국 전체 래핑 시 살짝 강조만 */
.group--wrap{
  background:#fff;
  border:2px solid rgba(183,0,0,.22);
  box-shadow: inset 0 0 0 1px rgba(183,0,0,.08), 0 6px 24px rgba(0,0,0,.04);
}

/* 서브그룹(팀) */
.subgroup{ margin-top: 12px; padding-top: 12px; border-top:1px dashed var(--line); }
.subgroup-title{ font-size:.95rem; font-weight:800; margin-bottom:10px; color:#222; }

/* 그리드 유틸(모바일 기본 2열 → 작은 화면은 1열) */
.grid{ list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.grid-5{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3{ grid-template-columns: repeat(2, minmax(0,1fr)); }

@media (max-width: 420px){
  .grid-5, .grid-3{ grid-template-columns: 1fr; }
}

/* =========================
   태블릿 이상 (>=768px)
   ========================= */
@media (min-width: 768px){
  .org-row{ gap: 20px; margin: 20px 0; }
  .org-row.level-2{
    flex-direction: row;         /* 좌/우 배치 */
    align-items: flex-start;
    justify-content: center;
    gap: 28px;
  }
  .branch > .connector{
    display:block;
    width:1px; height:16px; background:var(--line); margin:0 auto 8px;
  }
  .group{ padding:18px; }
  .grid-3{ grid-template-columns: repeat(3, minmax(180px,1fr)); }
  .grid-5{ grid-template-columns: repeat(4, minmax(180px,1fr)); } /* 공간에 맞춰 4열 */
}

/* =========================
   데스크톱 (>=1024px)
   ========================= */
@media (min-width: 1024px){
  .org-row.level-2{ gap: 40px; }
  .org-row{ flex-direction: row; justify-content:center; }
  .org-row.inner{
    flex-direction: column;      /* 보험보상국 내부는 세로 흐름 */
    align-items: stretch;
  }
  .grid-5{ grid-template-columns: repeat(5, minmax(180px,1fr)); }
}

/* =========================
   와이드 (>=1280px)
   - 1200 컨테이너를 넘는 해상도에서도
     내부 그리드·간격만 확대되는 "반응형 처리"
   ========================= */
@media (min-width: 1280px){
  .org-container{ padding: 0 24px; }
  .grid{ gap: 14px; }
  .card{ max-width: 380px; }
  .group{ padding: 20px; }
}