/* 인사말 CSS */

:root {
    --font-size-30: clamp(20px,2.564vw,30px); /* 비율: 1170px */
    --font-size-28: clamp(16px,2.393vw,28px); /* 비율: 1170px */
    --font-size-26: clamp(16px,2.222vw,26px); /* 비율: 1170px */
    --font-size-24: clamp(14px,2.051vw,24px); /* 비율: 1170px */
    --padding-clamp-top: clamp(30px, 3.674vw, 70px);
  
  
    /* ***************** 오각형 ***************** */
    /* 정오각형 반지름(중앙에서 노드 중심까지 거리) */
    /* --R: 210%; */
    --R-base: 26%;
  
    /* ⬇️ 이 값만 바꿔서 오각형(선) 크기를 축소/확대 */
    --polyScale: 0.65;     /* 1 = 원래 크기, 0.9 = 90% 크기 */
  
    /* 실제 선(정오각형)의 반지름 = 기준 * 스케일 */
    --R-poly: calc(var(--R-base) * var(--polyScale));
  
     /* 원(노드) 크기(컨테이너 %). px 최소/최대는 width에서 clamp로 제어 */
    --nodeP: 15%;
  
    /* 꼭짓점과 원 사이 간격(>0 이면 안쪽으로 살짝 들어옴) */
    --gap: 1%; /* 예: 0.6% 주면 살짝 안쪽으로 */
    /* 중심에서 노드로 뻗는 짧은 보조선 길이 */
    --spoke: clamp(16px, 3vmin, 28px);
    /* 각도 시작점(=n1이 꼭대기면 -90deg) */
    --start: -90deg;
    /* 오각형 간격 각도 */
    --step: 72deg;
  }
  
  
  /* ***************************** */
  /* ************ img ************ */
  /* ***************************** */
  .sub-introduce-img {
      & {
          padding-top: var(--hospital-padding-top-01);
      }
      @media screen and (max-width: 1500px) {
        & {
          width: 100%;
          & img {
            width: 100%;
          }
        }
      }
  }
  
  
  .sub-introduce-content {
    & { 
      padding: 0 clamp(15px,4.199vw,80px); /* 비율: 1905px */
    }
  & .sub-introduce-content-inner {
      /* display: flex; */
      /* flex-direction: column; */
      /* justify-content: center; */
      /* align-items: center; */
      padding-top: var(--padding-clamp-top);
      margin: 0 auto;
    }
    & dt {
      border-bottom: 1px solid var(--color-line-01);
    }
    & dt h3 {
      display: inline-block;
      font-size: var(--font-size-28);
      padding: 0 10px 10px 10px;
      border-bottom: 3px solid var(--color-main-03);
  }
  & dd {
    padding: 
        clamp(10px, 3.125vw, 20px) 
        0 
        0 
        clamp(5px, 1.5625vw, 10px)
    ;
  }
  & dd strong {
      font-size: var(--font-size-26);
      font-family: var(--font-weight-black);
      font-weight: var( --font-weight-regular);
      text-align: center;
      word-break: keep-all;
      line-height: 1.5;
  }
  }
  
  
  /* ******************************************** */
  /* ************ 다이어그램 diagram ************ */
  /* ******************************************** */
  :root {
  --color-n1: #94b248;
  --color-n2: #289ba5;
  --color-n3: #41a7e1;
  --color-n4: #20669f;
  --color-n5: #43d1a1;
  }
  
  /* 컨테이너 */
  .vision {
    position: relative;
    width: min(900px, 80vw);
    aspect-ratio: 1/1;
    margin: -100px auto ;
    padding: 40px 0;
  }
  
  /* 노드 공통 */
  .node {
    position: absolute;
    /* ↓ 각 노드에서 바뀌는 값: --angle (개별 클래스에서 지정) */
    transform:
      translate(-50%, -50%)
      rotate(var(--angle, 0deg))
      translate(var(--R))
      rotate(calc(var(--angle, 0deg) * -1));
  
    display:flex; align-items:center; justify-content:center;
    width: clamp(50px, var(--nodeP), 170px);
    aspect-ratio: 1/1; 
    border-radius: 999px;
    background: var(--bg, #fff);
    padding: 8px;
    z-index: 1;
  
    /* rEff = (선 반지름) + (원 반지름) + 간격 */
    --rEff: calc( var(--R-poly) + (var(--nodeP)/2) + var(--gap) );
  
    /* 꼭짓점 방향으로 배치 */
    left: calc(50% + var(--rEff) * cos(var(--angle)));
    top:  calc(50% + var(--rEff) * sin(var(--angle)));
    transform: translate(-50%, -50%);
  }
  .node img {
      /* width: clamp(25px, 6.837vw, 80px); 비율: 1170px */
      width: clamp(18px, 4.2735vw, 50px);
  }
  
  /* ✅ 중앙으로 뻗는 선: 흰 원 아래에 깔리도록 z-index=1 */
  .node::before{
    content:"";
    position:absolute;
    left:50%; top:50%;
    width: 2px; height: var(--spoke);
    background: var(--line, currentColor);
    transform-origin: top center;
    /* 노드의 각도에 180°를 더해 ‘중심 쪽’으로 향하게 */
    transform: translate(-50%, -50%) rotate(calc(var(--angle) + 180deg));
    z-index:1;
  }
  
  /* ✅ 흰색 내부 원 + 얇은 회색 링(테두리) */
  .node::after{
    content:"";
    position:absolute;
    inset: clamp(4px, 1.4vmin, 12px);
    border-radius:50%;
    background:#fff;
    outline: 2px solid var(--color-line-01);
    outline-offset: -6px;
    z-index:2;
    box-shadow: 5px 5px 4px rgba(0,0,0,0.15);
  }
  
  /* 텍스트는 가장 위로 */
  .node > * { 
      position: relative;
      z-index: 3; 
  }
  
  .node-inner {
      position: absolute;
      width: 16vw;
      height: 50%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      word-break: keep-all;
      gap: 6px;
  
      --line-w: 50px;
      --dot-d: 8px;
      --text-gap: 10px;
      --text-position: 130%;
  }
  
  
  /* 텍스트 위치, before, after */
  /* right 부분 */
  .node-inner.right {
      left: var(--text-position);
      text-align: left;
      padding-inline-start: calc(var(--dot-d)/2 + var(--text-gap));
  }
  .node-inner.right::before,
  .node-inner.right::after {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
  }
  
  .node-inner.right::before {
    content: '';
    width: var(--line-w);
    height: 1px;
    left: 0;
    transform: translate(-100%, -50%);
    background-color: var(--color-line-01);
  }
  .node-inner.right::after {
    content: '';
    width: var(--dot-d);
    height: var(--dot-d);
    border-radius: 50%;
    left: 0; /* 선 시작점에 붙이기 */
    transform: translate(-50%, -50%);
    background-color: var(--color-line-01);
  }
  
  /* left 부분 */
  .node-inner.left {
      right: var(--text-position);
      align-items: flex-end;
      text-align: right;
      padding-inline-end: calc(var(--dot-d)/2 + var(--text-gap));
  }
  .node-inner.left::before,
  .node-inner.left::after {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
  }
  .node-inner.left::before {
      content: '';
      width:  var(--line-w);
      height: 1px;
      right: 0;
      transform: translate(100%, -50%);
      background-color: var(--color-line-01);
  }
  .node-inner.left::after {
      content: '';
      width: var(--dot-d);
      aspect-ratio: 1/1;
      border-radius: 50%;
      right: 0;
      transform: translate(100%, -50%);
      background-color: var(--color-line-01);
  }
  
  .node .title {
      font-weight: 700; 
      font-size: clamp(20px, 1.25vw, 24px);
      color:#2f4f4f;
  }
  .node .desc {
      font-size: clamp(16px, 0.9375vw, 18px);
      line-height: 1.35;
      color:#64748b;
  }
  
  /* 중앙 로고 이미지 */
  .logo {
    position:absolute;
    inset:50% auto auto 50%;
    transform:translate(-50%, -50%);
    display:flex; align-items:center; justify-content:center;
    z-index:0;
  }
  .logo img {
    width: clamp(30px, 13.675vw, 160px); /* 비율: 1170px */
  
    max-width: 100%;
    max-height: 100%;
  }
  
  
  /* 바깥 5개 위치 */
  /* n1 ~ n5 각도(시작각 -90°, 간격 72°) */
  .n1{ --angle: calc(var(--start) + 0*var(--step)); --bg: var(--color-n1); --line: var(--color-n1); }
  .n2{ --angle: calc(var(--start) + 1*var(--step)); --bg: var(--color-n2); --line: var(--color-n2); }
  .n3{ --angle: calc(var(--start) + 2*var(--step)); --bg: var(--color-n3); --line: var(--color-n3); }
  .n4{ --angle: calc(var(--start) + 3*var(--step)); --bg: var(--color-n4); --line: var(--color-n4); }
  .n5{ --angle: calc(var(--start) + 4*var(--step)); --bg: var(--color-n5); --line: var(--color-n5); }
  
  
  /* ✅ 노드별 배경색(컬러 링 색) 지정 */
  .n1 .title{ color: var(--color-n1); }
  .n2 .title{ color: var(--color-n2); }
  .n3 .title{ color: var(--color-n3); }
  .n4 .title{ color: var(--color-n4); }
  .n5 .title{ color: var(--color-n5); }
  
  /* ***************************************************** */
  /* ************ 다이어그램 diagram 선그리기 ************ */
  /* ***************************************************** */
  /* SVG를 그리드 전체에 깔기 */
  .vision .edges{
      position:absolute; 
      inset:0;
      z-index:0;              /* 선은 아래 */
      pointer-events:none;
  }
  
  .vision .links {
      position: absolute;
      inset: 0;        /* top:0; right:0; bottom:0; left:0 */
      width: 100%;
      height: 100%;
      /* transform: translateY(10%); */
      transform: scale(var(--polyScale)); /* ← 선만 줄어듦 */
      transform-origin: 50% 50%; /* 정중앙 기준 축소 */
  }
  
  /* 공통 선 스타일 */
  .edge {
      fill:none;
      stroke-width: 1.6;        /* 선 두께 */
      stroke-linecap: round;
      stroke-linejoin: round;
      /* 살짝 입체감: 바깥 흰 라인처럼 보이는 효과 */
      filter: drop-shadow(0 1px 0 rgba(255,255,255,.75));
  
      /* 선 길이를 짧게 */
      stroke-dasharray: 90%;   /* 전체 길이 중 90%만 보이게 */
      stroke-dashoffset: 20%;   /* 시작점도 조금 당겨서 균형 */
  }
  
  /* 구간별 색상 */
  .e12{ stroke: var(--color-n1); } /* n1→n2 */
  .e23{ stroke: var(--color-n2); } /* n2→n3 */
  .e34{ stroke: var(--color-n3); } /* n3→n4 */
  .e45{ stroke: var(--color-n4); } /* n4→n5 */
  .e51{ stroke: var(--color-n5); } /* n5→n1 */
  
  /* 노드가 선 위에 올라오도록 */
  /* .node{ z-index:1; position:relative; } */
  
  
  
  /* ***************************************************** */
  /* ******************* 모바일 반응형 ******************* */
  /* ***************************************************** */
  /* 모바일 표시 off */
  .mb-node-inner{ display: none; }
  
  @media screen and (max-width: 1170px)  {
    .vision {
        margin: 
            calc(-1 * clamp(25px, 7.8125vw, 50px)) 
            auto 
            calc(-1 * clamp(50px, 15.625vw, 100px))
        ;
    }
    .node {
      & .left::before,
      & .left::after,
      & .right::before,
      & .right::after {
        content: none;
      }
  
      & .node-inner {
        display: none;
      }
    }
  
  /* 모바일 표시 on */
    .mb-node-box{
      width: clamp(300px,57.692vw,675px);
      margin: 0 auto 50px;
      display: flex;
      flex-direction: column;
      gap: 12px;                 /* 행 간격은 gap 하나로 관리 */
    }
    
    .mb-node-box .mb-node-inner{
      display: flex;
      align-items: center;    /* ← center 대신 ‘윗줄 기준’ */
      gap: clamp(10px,1.709vw,20px);
      /* padding: 5px 0;  필요 없으면 제거해서 높이 일정화 */
    }
    
    .mb-node-box .mb-title{
      /* 가로폭은 flex-basis로 고정 → 열 정렬 안정적 */
      flex: 0 0 clamp(60px,11.965vw,140px);
      display: inline-flex;       /* inherit 대신 명시 */
      justify-content: center;
      align-items: center;
      padding: 8px 4px;
      border-radius: 50px;
      font-size: var(--font-size-24);
      font-weight: var(--font-weight-semi-bold);
      line-height: 1;             /* 내부 높이 깔끔하게 */
      color: #fff;
      /* align-self: flex-start;   (필요하면 라벨만 위로 고정) */
    }
    
    .mb-node-box .mb-desc{
      flex: 1;
      display: block;             /* 줄바꿈 안정 */
      margin: 0;                  /* p 기본 마진이 있다면 제거 */
      font-size: var(--font-size-24);
      line-height: 1.5;
      word-break: keep-all;
    }
    .mb-node-box .mb-desc .br-none{ display:none; }
  } /* ******* /미디어쿼리 1170px  ******* */
  
  @media screen and (max-width: 839px) {
    .sub-introduce-logo-box {
      & .sub-introduce-logo-story {
        & .sub-introduce-story-01 {
          & img {
            width: 85%;
          }
        }
  
          & .sub-introduce-story-02 {
              display: flex;
              flex-direction: column;
              gap: 20px;
  
              & figure:last-child img {
                width: 100%;
              }
          }
      }
    }
  }  /* ******* /미디어쿼리 839px  ******* */
  
  @media (max-width: 660px) {
    .mb-node-box {
      margin: 30px auto 60px;
      & .mb-node-inner {
        flex-direction: column;   /* 라벨 위, 설명 아래 */
        justify-content: center;
        align-items: center;  /* 왼쪽 정렬 */
      }
      & .mb-title {
          flex: none;               /* 고정 폭 해제 */
          width: 80px;
          font-size: var(--font-size-16);
      
        }
      & .mb-desc {
          justify-content: center;
          align-items: center;
          flex: none;
          text-align: center;
        }
    }
  
  } /* ******* /미디어쿼리 660px  ******* */
  
  
  
  /* ************************************* */
                /* 로고CI */
  /* ************************************* */
  .sub-introduce-logo-box {
    padding: 0 clamp(15px,4.199vw,80px) var(--mobile-content-vertical-gap-big);
    margin: 0 auto;

    @media screen and (max-width: 640px) {
        & {
            padding-bottom: var(--mobile-content-vertical-gap-sm);
        }
    }
  
    & .sub-introduce-logo-title {
      border-bottom: 1px solid var(--color-line-01);
        & h3 {
          display: inline-block;
          padding: 0 5px 10px 5px;
          font-size: var(--font-size-28);
          border-bottom: 3px solid var(--color-main-03);
        }
    }
  
    & .sub-introduce-logo-story {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      
      & .sub-introduce-story-01,
      & .sub-introduce-story-02 {
        padding: 40px 0 0;
      }
      & .sub-introduce-story-01 {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        border-bottom: 1px solid var(--color-line-01);
  
        & .logo-concept {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          padding: 20px 0;
          line-height: 2;
          & dt {
            font-size: var(--font-size-18);
            font-weight: var(--font-weight-semi-bold);
          }
          & dd { 
            text-align: center;
            word-break: keep-all;
          }
          & dd:nth-child(2) {
            font-size: var(--font-size-16);
            color: #2066a1;

            @media screen and (max-width: 640px) {
                & {
                    font-size: var(--font-size-14);
                    line-height: 1.5;
                }
            }
          }
          & dd:nth-child(3) {
            margin-top: 10px;
            font-size: var(--font-size-18);
            font-weight: var(--font-weight-regular);

            @media screen and (max-width: 640px) {
                & {
                    font-size: var(--font-size-16);
                    line-height: 1.5;
                }
            }
          }
        }
      }
  
      & .sub-introduce-story-02 {
        display: flex;
        gap: 45px; /* 원하는 간격 */
        & figure {
          display: inherit;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          gap: 15px;
          font-weight: var(--font-weight-regular);
        }
      }
    }
  
  
  }