/* contents.html 전용 스타일
   기존 css/styles.css를 수정하지 않고 이 페이지에서만 사용합니다. */

.page-contents {
  background:#080c13;
}

.contents-page {
  min-height:100vh;
  background:#080c13;
  color:#fff;
}

.contents-container {
  width:min(1120px, calc(100% - 48px));
  margin:0 auto;
}

.contents-hero {
  padding:118px 0 70px;
  border-bottom:1px solid rgba(255,255,255,.10);
}

.contents-breadcrumb {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:38px;
  color:#788394;
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
}

.contents-breadcrumb a {
  color:#788394;
  text-decoration:none;
}

.contents-kicker {
  display:block;
  margin-bottom:16px;
  color:#b7ff16;
  font-size:11px;
  font-weight:900;
  letter-spacing:.13em;
}

.contents-hero h1 {
  margin:0;
  font-size:54px;
  line-height:1.12;
  letter-spacing:-.045em;
}

.contents-hero h1 span {
  color:#b7ff16;
}

.contents-hero p {
  max-width:760px;
  margin:22px 0 0;
  color:#a5afbd;
  font-size:15px;
  line-height:1.85;
  word-break:keep-all;
}

.guide-map-section {
  padding:72px 0 120px;
}

.map-intro {
  max-width:720px;
  margin:0 auto 54px;
  text-align:center;
}

.map-intro > span {
  display:block;
  margin-bottom:12px;
  color:#b7ff16;
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
}

.map-intro h2 {
  margin:0;
  color:#fff;
  font-size:32px;
  letter-spacing:-.035em;
}

.map-intro p {
  margin:14px 0 0;
  color:#8f99a8;
  font-size:13px;
  line-height:1.8;
}

/* 조직도 */
.org-chart {
  --lime:#b7ff16;
  --line:rgba(183,255,22,.72);
  --card:#0c1119;
  --border:#28313d;
  position:relative;
  width:min(900px,100%);
  margin:0 auto;
}

.chart-stage {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.stage-title {
  position:relative;
  z-index:3;
  margin-bottom:12px;
  padding:6px 10px;
  border:1px solid rgba(183,255,22,.34);
  background:#0b1009;
  color:var(--lime);
  font-size:8px;
  font-weight:900;
  letter-spacing:.14em;
}

.guide-card {
  position:relative;
  z-index:2;
  display:block;
  box-sizing:border-box;
  min-height:132px;
  padding:21px 46px 20px 22px;
  border:1px solid var(--border);
  background:var(--card);
  color:#fff;
  text-decoration:none;
  transition:border-color .18s ease, transform .18s ease, background .18s ease;
}

.guide-card:hover {
  border-color:var(--lime);
  background:#0e141d;
  transform:translateY(-2px);
}

.guide-card::after {
  content:"→";
  position:absolute;
  right:20px;
  top:50%;
  color:var(--lime);
  font-size:18px;
  transform:translateY(-50%);
}

.card-main {
  width:560px;
  max-width:100%;
}

.card-no {
  margin-right:10px;
  color:var(--lime);
  font-size:10px;
  font-weight:900;
}

.card-tag {
  color:#8995a5;
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
}

.guide-card strong {
  display:block;
  margin-top:9px;
  padding-right:18px;
  font-size:18px;
  line-height:1.42;
  letter-spacing:-.025em;
}

.guide-card small {
  display:block;
  margin-top:7px;
  color:#8f9aaa;
  font-size:11px;
  line-height:1.65;
}

.card-tool {
  border-color:rgba(183,255,22,.55);
  box-shadow:inset 0 0 0 1px rgba(183,255,22,.05);
}

.card-tool .card-tag {
  color:#b7ff16;
}

/* 단일 카드 사이의 정확한 중앙 연결선 */
.chart-connector.vertical {
  width:1px;
  height:42px;
  margin:0 auto;
  background:var(--line);
}

/* 1 → 2 분기
   i = 중앙 세로선 / b = 가로선 / em = 양쪽 하강선 */
.split-connector,
.merge-connector {
  position:relative;
  height:58px;
}

.split-connector i,
.merge-connector i {
  position:absolute;
  left:50%;
  width:1px;
  height:28px;
  background:var(--line);
  transform:translateX(-50%);
}

.split-connector i { top:0; }
.merge-connector i { bottom:0; }

.split-connector b,
.merge-connector b {
  position:absolute;
  left:25%;
  right:25%;
  height:1px;
  background:var(--line);
}

.split-connector b { top:27px; }
.merge-connector b { bottom:27px; }

.split-connector em,
.merge-connector em {
  position:absolute;
  left:25%;
  right:25%;
  height:31px;
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
}

.split-connector em { top:27px; }
.merge-connector em { bottom:27px; }

.chart-pair {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:72px;
}

.chart-pair .guide-card {
  width:100%;
}

/* 분기선 끝이 카드 정중앙에 오도록
   카드 중심 = 각 열의 50%, 전체 폭 기준 25% / 75% */
.chart-pair .guide-card:first-child::before,
.chart-pair .guide-card:last-child::before {
  content:"";
  position:absolute;
  top:-1px;
  left:50%;
  width:0;
  height:0;
}

.tool-stage .stage-title {
  margin-top:0;
}

.stage-last {
  padding-bottom:0;
}

/* 모바일 전용:
   PC 조직도 구조는 유지하되, 모바일에서는 큰 카드 + 2열 분기 카드 + 중앙 화살표로 재구성합니다. */
@media (max-width:768px) {
  .contents-container {
    width:min(100% - 32px,1120px);
  }

  .contents-hero {
    padding:82px 0 46px;
  }

  .contents-breadcrumb {
    margin-bottom:28px;
  }

  .contents-kicker {
    margin-bottom:12px;
    font-size:9px;
  }

  .contents-hero h1 {
    font-size:34px;
    line-height:1.18;
    letter-spacing:-.04em;
  }

  .contents-hero p {
    margin-top:18px;
    font-size:13px;
    line-height:1.75;
  }

  .guide-map-section {
    padding:48px 0 78px;
  }

  .map-intro {
    margin-bottom:34px;
    text-align:left;
  }

  .map-intro > span {
    margin-bottom:9px;
    font-size:9px;
  }

  .map-intro h2 {
    font-size:25px;
  }

  .map-intro p {
    margin-top:10px;
    font-size:12px;
    line-height:1.7;
  }

  .org-chart {
    width:100%;
    padding:0;
  }

  .org-chart::before {
    display:none;
  }

  .chart-stage {
    align-items:stretch;
  }

  .stage-title {
    align-self:flex-start;
    margin:0 0 9px;
    padding:5px 8px;
    font-size:7px;
  }

  .guide-card,
  .card-main {
    width:100%;
    min-height:0;
    padding:17px 40px 16px 16px;
  }

  .guide-card::after {
    right:15px;
    font-size:16px;
  }

  .card-no {
    margin-right:7px;
    font-size:9px;
  }

  .card-tag {
    font-size:7px;
    letter-spacing:.1em;
  }

  .guide-card strong {
    margin-top:7px;
    padding-right:4px;
    font-size:15px;
    line-height:1.4;
  }

  .guide-card small {
    margin-top:5px;
    font-size:9px;
    line-height:1.55;
  }

  /* 분기 항목 03·04 / 06·07은 모바일에서도 2열 유지 */
  .chart-pair {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:9px;
  }

  .chart-pair .guide-card {
    min-height:116px;
    padding:14px 25px 13px 13px;
  }

  .chart-pair .guide-card::after {
    right:10px;
    top:auto;
    bottom:12px;
    transform:none;
    font-size:14px;
  }

  .chart-pair .guide-card strong {
    margin-top:7px;
    font-size:13px;
    line-height:1.35;
    word-break:keep-all;
  }

  /* 작은 2열 카드에서는 설명을 제거해 답답함 방지 */
  .chart-pair .guide-card small {
    display:none;
  }

  /* 복잡한 PC 분기선 대신 단계 사이 중앙 화살표 */
  .chart-connector.vertical,
  .split-connector,
  .merge-connector {
    position:relative;
    width:100%;
    height:34px;
    margin:0;
    background:none;
  }

  .split-connector i,
  .split-connector b,
  .split-connector em,
  .merge-connector i,
  .merge-connector b,
  .merge-connector em {
    display:none;
  }

  .chart-connector.vertical::before,
  .split-connector::before,
  .merge-connector::before {
    content:"";
    position:absolute;
    left:50%;
    top:5px;
    width:1px;
    height:15px;
    background:#b7ff16;
    opacity:.72;
    transform:translateX(-50%);
  }

  .chart-connector.vertical::after,
  .split-connector::after,
  .merge-connector::after {
    content:"↓";
    position:absolute;
    left:50%;
    bottom:1px;
    color:#b7ff16;
    font-size:11px;
    line-height:1;
    transform:translateX(-50%);
  }

  /* 2열 카드로 내려갈 때만 아주 짧은 분기 표시 */
  .split-connector {
    height:39px;
  }

  .split-connector::before {
    height:12px;
  }

  .split-connector::after {
    content:"";
    bottom:7px;
    width:52%;
    height:10px;
    border-top:1px solid rgba(183,255,22,.62);
    border-left:1px solid rgba(183,255,22,.62);
    border-right:1px solid rgba(183,255,22,.62);
    color:transparent;
  }

  /* 2열에서 다시 합쳐질 때는 단순 화살표 */
  .merge-connector {
    height:36px;
  }

  .card-tool {
    background:#0c120c;
    border-color:rgba(183,255,22,.65);
  }
}

@media (max-width:380px) {
  .contents-container {
    width:calc(100% - 24px);
  }

  .contents-hero h1 {
    font-size:30px;
  }

  .chart-pair {
    gap:7px;
  }

  .chart-pair .guide-card {
    padding:13px 22px 12px 11px;
  }

  .chart-pair .guide-card strong {
    font-size:12px;
  }
}