.ds-one {

    --ds-navy: #201719;

    --ds-navy-dark: #201719;

    --ds-title: #151515;

    --ds-muted: #c62828;

    --ds-line: rgba(255, 255, 255, 0.5);

    --ds-card-border: rgba(26, 26, 26, 0.1);

    width: 100%;

    padding: 54px 20px 66px;

    overflow: hidden;

    background: transparent !important;

    font-family:

      Pretendard,

      -apple-system,

      BlinkMacSystemFont,

      "Segoe UI",

      sans-serif;

    box-sizing: border-box;

  }

  .ds-one *,

  .ds-one *::before,

  .ds-one *::after {

    box-sizing: border-box;

  }

  .ds-one__inner {

    width: 100%;

    max-width: 1110px;

    margin: 0 auto;

  }

  /* 제목 */

  .ds-one__header {

    margin-bottom: 25px;

    text-align: center;

    opacity: 0;

    transform: translateY(18px);

    transition:

      opacity 0.7s ease,

      transform 0.7s ease;

  }

  .ds-one__header h2 {

    margin: 0;

    color: #1a1a1a;

    font-size: clamp(28px, 3vw, 39px);

    line-height: 1.25;

    font-weight: 750;

    letter-spacing: -0.05em;

  }

  .ds-one__title-line {

    position: relative;

    width: 96px;

    height: 14px;

    margin: 6px auto 0;

  }

  .ds-one__title-line::before {

    content: "";

    position: absolute;

    top: 7px;

    left: 0;

    width: 100%;

    height: 1px;

    background: #ffffff;

  }

  .ds-one__title-line span {

    position: absolute;

    top: 3px;

    left: 50%;

    z-index: 2;

    width: 8px;

    height: 8px;

    border: 2px solid rgba(255, 255, 255, 0.9);

    border-radius: 50%;

    background: var(--ds-navy);

    transform: translateX(-50%);

  }

  /* 다이어그램 */

  .ds-one__diagram {

    position: relative;

    display: grid;

    width: 100%;

    min-height: 460px;

    grid-template-columns:

      minmax(230px, 1fr)

      300px

      minmax(230px, 1fr);

    grid-template-rows: repeat(2, 1fr);

    column-gap: clamp(70px, 8vw, 125px);

    row-gap: 32px;

    align-items: center;

  }

  /* 연결선 */

  .ds-one__lines {

    position: absolute;

    inset: 0;

    z-index: 1;

    width: 100%;

    height: 100%;

    overflow: visible;

    pointer-events: none;

  }

  .ds-one__line {

    fill: none;

    stroke: var(--ds-line);

    stroke-width: 1.2;

    stroke-linecap: round;

    stroke-linejoin: round;

    vector-effect: non-scaling-stroke;

    stroke-dasharray: 1;

    stroke-dashoffset: 1;

  }

  /* 카드 */

  .ds-one-card {

    position: relative;

    z-index: 3;

    display: flex;

    width: 100%;

    min-height: 190px;

    padding: 22px 16px 21px;

    align-items: center;

    flex-direction: column;

    justify-content: center;

    border: 1px solid var(--ds-card-border);

    border-radius: 22px;

    background: #ffffff;

    box-shadow: 0 12px 28px rgba(26, 26, 26, 0.055);

    text-align: center;

    opacity: 0;

    transition:

      opacity 0.7s ease,

      transform 0.7s cubic-bezier(0.2, 0.75, 0.25, 1),

      box-shadow 0.3s ease,

      border-color 0.3s ease;

  }

  .ds-one-card--left {

    grid-column: 1;

    transform: translateX(-25px);

  }

  .ds-one-card--right {

    grid-column: 3;

    transform: translateX(25px);

  }

  .ds-one-card--01,

  .ds-one-card--03 {

    grid-row: 1;

  }

  .ds-one-card--02,

  .ds-one-card--04 {

    grid-row: 2;

  }

  .ds-one-card__icon {

    width: 47px;

    height: 47px;

    margin-bottom: 13px;

    color: #222222;

  }

  .ds-one-card__icon svg {

    display: block;

    width: 100%;

    height: 100%;

    fill: none;

    stroke: currentColor;

    stroke-width: 3.2;

    stroke-linecap: round;

    stroke-linejoin: round;

  }

  .ds-one-card h3 {

    margin: 0 0 10px;

    color: #1a1a1a;

    font-size: clamp(18px, 1.7vw, 23px);

    line-height: 1.35;

    font-weight: 750;

    letter-spacing: -0.045em;

    word-break: keep-all;

  }

  .ds-one-card p {

    margin: 0;

    color: #949494;

    font-size: clamp(14px, 1.15vw, 17px);

    line-height: 1.65;

    font-weight: 400;

    letter-spacing: -0.025em;

  }

  .ds-one.is-visible .ds-one-card:hover {

    border-color: rgba(26, 26, 26, 0.2);

    box-shadow: 0 18px 38px rgba(26, 26, 26, 0.11);

    transform: translateY(-5px);

  }

  /* 중앙 원 */

  .ds-one-center {

    position: absolute;

    top: 50%;

    left: 50%;

    z-index: 4;

    width: 350px;

    height: 350px;

    opacity: 0;

    transform: translate(-50%, -50%) scale(0.9);

    transition:

      opacity 0.8s ease 0.08s,

      transform 0.8s cubic-bezier(0.18, 0.8, 0.3, 1.12) 0.08s;

  }

  /* 얇고 촘촘한 외곽 점선 */

  .ds-one-center__orbit {

    position: absolute;

    inset: -26px;

    width: calc(100% + 52px);

    height: calc(100% + 52px);

    overflow: visible;

    transform-origin: center;

  }

  .ds-one-center__orbit circle {

  fill: none;

  /* 점선 색상: 기존보다 진하게 */

  stroke: rgba(74, 74, 74, 0.72);

  /* 점선 두께 */

  stroke-width: 0.7;

  /* 점 끝을 둥글게 */

  stroke-linecap: round;

  /* 앞 숫자 = 점 길이 / 뒤 숫자 = 점 사이 간격 */

  stroke-dasharray: 0.55 0.55;

  vector-effect: non-scaling-stroke;

}

  .ds-one-center__circle {

    position: relative;

    display: flex;

    width: 100%;

    height: 100%;

    padding: 30px 22px 25px;

    align-items: center;

    flex-direction: column;

    justify-content: center;

    border-radius: 50%;

    background:
      radial-gradient(
        circle at 34% 24%,
        #ffffff 0%,
        #ffffff 34%,
        #ffffff 68%,
        #ffffff 100%
      );
    border: 1px solid rgba(26, 26, 26, 0.10);

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      inset 0 -16px 28px rgba(0, 0, 0, 0.04),
      0 18px 38px rgba(26, 26, 26, 0.14),
      0 3px 10px rgba(26, 26, 26, 0.06);

    color: #ffffff;

    text-align: center;

  }

  .ds-one-center__circle::before {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 50%;
    border: 1px solid rgba(26, 26, 26, 0.055);
    pointer-events: none;
  }

  .ds-one-center__circle::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.36);
    box-shadow: 0 0 0 6px rgba(255,255,255,0.14);
    pointer-events: none;
  }

  .ds-one-center__icon {

    display: flex;

    width: 76px;

    height: 76px;

    margin-bottom: 13px;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(26, 26, 26, 0.14);
    background: rgba(255,255,255,0.58);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.82);

    border-radius: 50%;

  }

  .ds-one-center__icon svg {

    width: 45px;

    height: 45px;

    fill: none;

    stroke: var(--ds-navy);

    stroke-width: 2.6;

    stroke-linecap: round;

    stroke-linejoin: round;

  }

  .ds-one-center h3 {

    margin: 0;

    color: #1a1a1a;

    font-size: clamp(20px, 1.9vw, 26px);

    line-height: 1.35;

    font-weight: 700;

    letter-spacing: -0.045em;

    word-break: keep-all;

  }

  .ds-one-center__divider {

    width: 95px;

    height: 1px;

    margin: 11px auto 10px;

    background: rgba(39,31,34, 0.12);

  }

  .ds-one-center p {

    margin: 0;

    color: #6a6a6a;

    font-size: 12px;

    line-height: 1.55;

    font-weight: 400;

    letter-spacing: 0.015em;

  }

  /* 등장 액션 */

  .ds-one.is-visible .ds-one__header {

    opacity: 1;

    transform: translateY(0);

  }

  .ds-one.is-visible .ds-one-center {

    opacity: 1;

    transform: translate(-50%, -50%) scale(1);

  }

  .ds-one.is-visible .ds-one-card {

    opacity: 1;

    transform: translateX(0);

  }

  .ds-one.is-visible .ds-one-card--01 {

    transition-delay: 0.65s;

  }

  .ds-one.is-visible .ds-one-card--03 {

    transition-delay: 0.78s;

  }

  .ds-one.is-visible .ds-one-card--02 {

    transition-delay: 0.91s;

  }

  .ds-one.is-visible .ds-one-card--04 {

    transition-delay: 1.04s;

  }

  .ds-one.is-visible .ds-one__line {

    animation: ds-one-line-draw 0.9s ease 0.38s forwards;

  }

  .ds-one.is-visible .ds-one-center__orbit {

    animation: ds-one-orbit-rotate 28s linear 1.1s infinite;

  }

  .ds-one.is-visible .ds-one-center__circle {

    animation: ds-one-center-pulse 4.8s ease-in-out 1.3s infinite;

  }

  @keyframes ds-one-line-draw {

    to {

      stroke-dashoffset: 0;

    }

  }

  @keyframes ds-one-orbit-rotate {

    from {

      transform: rotate(0deg);

    }

    to {

      transform: rotate(360deg);

    }

  }

  @keyframes ds-one-center-pulse {

    0%,

    100% {

      box-shadow: 0 18px 36px rgba(26, 26, 26, 0.10);

    }

    50% {

      box-shadow: 0 22px 52px rgba(26, 26, 26, 0.29);

    }

  }

  /* 태블릿 */

  @media (max-width: 980px) {

    .ds-one {

      padding: 48px 20px 60px;

    }

    .ds-one__diagram {

      display: grid;

      min-height: auto;

      grid-template-columns: repeat(2, minmax(0, 1fr));

      grid-template-rows: auto;

      gap: 16px;

    }

    .ds-one__lines {

      display: none;

    }

    .ds-one-center {

      position: relative;

      top: auto;

      left: auto;

      grid-column: 1 / -1;

      grid-row: auto;

      width: 270px;

      height: 270px;

      margin: 35px auto 42px;

      transform: scale(0.9);

    }

    .ds-one-card,

    .ds-one-card--left,

    .ds-one-card--right,

    .ds-one-card--01,

    .ds-one-card--02,

    .ds-one-card--03,

    .ds-one-card--04 {

      grid-column: auto;

      grid-row: auto;

      min-height: 185px;

      transform: translateY(20px);

    }

    .ds-one.is-visible .ds-one-center {

      transform: scale(1);

    }

    .ds-one.is-visible .ds-one-card {

      transform: translateY(0);

    }

  }

  /* 모바일 */

  @media (max-width: 600px) {

    .ds-one {

      padding: 40px 15px 50px;

    }

    .ds-one__header {

      margin-bottom: 10px;

    }

    .ds-one__header h2 {

      font-size: 28px;

    }

    .ds-one__diagram {

      grid-template-columns: 1fr;

      gap: 13px;

    }

    .ds-one-center {

      grid-column: 1;

      width: 244px;

      height: 244px;

      margin: 34px auto 39px;

    }

    .ds-one-center__orbit {

      inset: -21px;

      width: calc(100% + 42px);

      height: calc(100% + 42px);

    }

    .ds-one-center__circle {

      padding: 25px 18px 22px;

    }

    .ds-one-center__circle::before {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 50%;
    border: 1px solid rgba(26, 26, 26, 0.055);
    pointer-events: none;
  }

  .ds-one-center__circle::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.36);
    box-shadow: 0 0 0 6px rgba(255,255,255,0.14);
    pointer-events: none;
  }

  .ds-one-center__icon {

      width: 64px;

      height: 64px;

      margin-bottom: 10px;

    }

    .ds-one-center__icon svg {

      width: 38px;

      height: 38px;

    }

    .ds-one-center h3 {

      font-size: 21px;

    }

    .ds-one-center p {

      font-size: 11px;

    }

    .ds-one-card {

      min-height: 170px;

      padding: 20px 15px;

      border-radius: 19px;

    }

    .ds-one-card__icon {

      width: 43px;

      height: 43px;

      margin-bottom: 11px;

    }

    .ds-one-card h3 {

      margin-bottom: 8px;

      font-size: 19px;

    }

    .ds-one-card p {

      font-size: 15px;

    }

  }

  /* 모션 최소화 설정 */

  @media (prefers-reduced-motion: reduce) {

    .ds-one *,

    .ds-one *::before,

    .ds-one *::after {

      animation: none !important;

      transition: none !important;

    }

    .ds-one__header,

    .ds-one-center,

    .ds-one-card {

      opacity: 1;

      transform: none;

    }

    .ds-one-center {

      transform: translate(-50%, -50%);

    }

    .ds-one__line {

      stroke-dashoffset: 0;

    }

  }

/* =========================================================
   기본 설정
========================================================= */

#ds-civil-mobile,
#ds-civil-mobile * {
  box-sizing: border-box;
}

#ds-civil-mobile {
  display: none;

  --navy: #201719;
  --navy-dark: #201719;

  --title-white: #ffffff;
  --description: #ffffff;

  --line: rgba(255, 255, 255, 0.15);
  --dotted-line: rgba(255, 255, 255, 0.30);

  width: 100%;

  margin: 0;
  padding: 0;

  font-family:
    "Pretendard",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;

  letter-spacing: -0.02em;
}

/* =========================================================
   MOBILE ONLY
========================================================= */

@media (max-width: 768px) {

  #ds-civil-mobile {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 28px 20px 38px !important;

    /*
      배경색은 지정하지 않음
      → 아임웹 섹션의 기존 네이비 배경 그대로 사용
    */
    background: transparent !important;

    color: #ffffff !important;
  }

  #ds-civil-mobile .civil-mobile-inner {
    width: 100%;

    max-width: 420px;

    margin: 0 auto;

    background: transparent !important;
  }

  /* =========================================================
     상단 카드 영역
  ========================================================= */

  #ds-civil-mobile .civil-mobile-core-wrap {
    display: flex;

    width: 100%;

    justify-content: center;

    margin: 0;
  }

  #ds-civil-mobile .civil-mobile-core {
    position: relative;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    width: 100%;

    min-height: 178px;

    padding: 25px 20px 23px;

    overflow: hidden;

    border:
      1px solid rgba(255, 255, 255, 0.72);

    border-radius: 23px;

    /*
      흰색 + 실버 톤 카드
    */
    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #ffffff 50%,
        #ffffff 100%
      ) !important;

    box-shadow:
      0 18px 38px rgba(0, 0, 0, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      inset 0 -12px 24px rgba(0, 0, 0, 0.04);

    text-align: center;

    opacity: 0;

    transform: translateY(12px) scale(0.98);

    transition:
      opacity 0.7s ease,
      transform 0.7s cubic-bezier(0.2, 0.75, 0.25, 1);
  }

  /*
    상단 카드 안쪽 얇은 라인
  */

  #ds-civil-mobile .civil-mobile-core::before {
    content: "";

    position: absolute;

    inset: 13px;

    border:
      1px solid rgba(26, 26, 26, 0.07);

    border-radius: 17px;

    pointer-events: none;
  }

  /* =========================================================
     상단 아이콘
  ========================================================= */

  #ds-civil-mobile .civil-mobile-core-icon {
    position: relative;
    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 60px;
    height: 60px;

    margin-bottom: 17px;

    border:
      1px solid rgba(26, 26, 26, 0.14);

    border-radius: 50%;

    background:
      rgba(255, 255, 255, 0.72) !important;

    color:
      #333333 !important;

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      0 3px 10px rgba(26, 26, 26, 0.035);
  }

  #ds-civil-mobile .civil-mobile-core-icon svg {
    width: 31px;
    height: 31px;

    fill: none !important;

    stroke:
      #151515 !important;

    stroke-width: 2.4;

    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* =========================================================
     상단 제목
  ========================================================= */

  #ds-civil-mobile .civil-mobile-core h3 {
    position: relative;
    z-index: 2;

    margin: 0 !important;

    color:
      #222222 !important;

    font-family:
      "Pretendard",
      -apple-system,
      BlinkMacSystemFont,
      sans-serif !important;

    font-size:
      21px !important;

    font-weight:
      700 !important;

    line-height:
      1.4 !important;

    letter-spacing:
      -0.045em !important;

    word-break:
      keep-all;
  }

  /* =========================================================
     상단 카드 → 리스트 연결 영역
  ========================================================= */

  #ds-civil-mobile .civil-mobile-connector {
    position: relative;

    width: 100%;

    height: 66px;

    margin: 0;

    pointer-events: none;
  }

  /*
    중앙 세로 점선
  */

  #ds-civil-mobile .civil-mobile-connector::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 1px;

    height: 48px;

    transform:
      translateX(-50%);

    background:
      repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.34) 0,
        rgba(255, 255, 255, 0.34) 3px,
        transparent 3px,
        transparent 7px
      );
  }

  /*
    리스트 시작 가로선
  */

  #ds-civil-mobile .civil-mobile-connector::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;

    height: 1px;

    background:
      rgba(255, 255, 255, 0.16);
  }

  /* =========================================================
     리스트
  ========================================================= */

  #ds-civil-mobile .civil-mobile-list {
    width: 100%;

    margin: 0;

    background:
      transparent !important;

    opacity: 0;

    transform:
      translateY(12px);

    transition:
      opacity 0.7s ease 0.12s,
      transform 0.7s ease 0.12s;
  }

  #ds-civil-mobile .civil-mobile-item {
    position: relative;

    display: grid;

    grid-template-columns:
      58px
      minmax(0, 1fr);

    align-items: center;

    width: 100%;

    min-height: 122px;

    padding:
      20px 0;

    column-gap:
      17px;

    /*
      항목별 가로선
    */
    border-bottom:
      1px solid rgba(255, 255, 255, 0.16) !important;

    background:
      transparent !important;
  }

  #ds-civil-mobile .civil-mobile-item:last-child {
    border-bottom:
      0 !important;
  }

  /* =========================================================
     리스트 아이콘
  ========================================================= */

  #ds-civil-mobile .civil-mobile-item-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    border:
      1px solid rgba(255, 255, 255, 0.18) !important;

    border-radius:
      50%;

    background:
      rgba(255, 255, 255, 0.065) !important;

    color:
      #ffffff !important;

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.035);
  }

  #ds-civil-mobile .civil-mobile-item-icon svg {
    width:
      30px;

    height:
      30px;

    fill:
      none !important;

    stroke:
      #ffffff !important;

    stroke-width:
      2.25;

    stroke-linecap:
      round;

    stroke-linejoin:
      round;
  }

  /* =========================================================
     리스트 텍스트
  ========================================================= */

  #ds-civil-mobile .civil-mobile-item-content {
    min-width: 0;

    color:
      #ffffff !important;
  }

  #ds-civil-mobile .civil-mobile-item-content h3 {
    margin:
      0 0 7px !important;

    color:
      #ffffff !important;

    font-family:
      "Pretendard",
      -apple-system,
      BlinkMacSystemFont,
      sans-serif !important;

    font-size:
      18px !important;

    font-weight:
      700 !important;

    line-height:
      1.35 !important;

    letter-spacing:
      -0.04em !important;

    word-break:
      keep-all;
  }

  #ds-civil-mobile .civil-mobile-item-content p {
    margin:
      0 !important;

    color:
      #bfbfbf !important;

    font-family:
      "Pretendard",
      -apple-system,
      BlinkMacSystemFont,
      sans-serif !important;

    font-size:
      14.5px !important;

    font-weight:
      400 !important;

    line-height:
      1.65 !important;

    letter-spacing:
      -0.025em !important;

    word-break:
      keep-all;
  }

  /* =========================================================
     등장 애니메이션
  ========================================================= */

  #ds-civil-mobile.is-visible .civil-mobile-core {
    opacity:
      1;

    transform:
      translateY(0) scale(1);
  }

  #ds-civil-mobile.is-visible .civil-mobile-list {
    opacity:
      1;

    transform:
      translateY(0);
  }

}

/* =========================================================
   작은 모바일
========================================================= */

@media (max-width: 380px) {

  #ds-civil-mobile {
    padding-right:
      16px !important;

    padding-left:
      16px !important;
  }

  #ds-civil-mobile .civil-mobile-core {
    min-height:
      165px;

    border-radius:
      21px;
  }

  #ds-civil-mobile .civil-mobile-core::before {
    border-radius:
      15px;
  }

  #ds-civil-mobile .civil-mobile-core-icon {
    width:
      55px;

    height:
      55px;

    margin-bottom:
      14px;
  }

  #ds-civil-mobile .civil-mobile-core-icon svg {
    width:
      29px;

    height:
      29px;
  }

  #ds-civil-mobile .civil-mobile-core h3 {
    font-size:
      19px !important;
  }

  #ds-civil-mobile .civil-mobile-item {
    grid-template-columns:
      52px
      minmax(0, 1fr);

    min-height:
      110px;

    padding:
      18px 0;

    column-gap:
      14px;
  }

  #ds-civil-mobile .civil-mobile-item-icon {
    width:
      52px;

    height:
      52px;
  }

  #ds-civil-mobile .civil-mobile-item-icon svg {
    width:
      27px;

    height:
      27px;
  }

  #ds-civil-mobile .civil-mobile-item-content h3 {
    font-size:
      17px !important;
  }

  #ds-civil-mobile .civil-mobile-item-content p {
    font-size:
      13.5px !important;
  }

}

/* =========================================================
   모션 최소화
========================================================= */

@media (prefers-reduced-motion: reduce) {

  #ds-civil-mobile *,
  #ds-civil-mobile *::before,
  #ds-civil-mobile *::after {
    animation:
      none !important;

    transition:
      none !important;
  }

  #ds-civil-mobile .civil-mobile-core,
  #ds-civil-mobile .civil-mobile-list {
    opacity:
      1 !important;

    transform:
      none !important;
  }

}

  .vision-section {
    --navy: #201719;
    --card-bg: #f5f5f5;
    --num-color: #f5f5f5;
    --num-color-accent: rgba(255, 255, 255, 0.25);
    --text-sub: #646464;
    font-family: 'Pretendard', -apple-system, sans-serif;
    letter-spacing: -0.02em;
    word-break: keep-all;
    max-width: 1440px;
    margin: 0 auto;
    padding: 88px 40px;
    box-sizing: border-box;
  }

  .vision-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
  }

  .vision-card {
    position: relative;
    overflow: hidden;
    background: var(--card-bg);
    border-radius: 16px;
    padding: 60px 52px;
    box-sizing: border-box;
    min-height: 280px;
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease, box-shadow 0.25s ease;
  }

  .vision-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(26, 26, 26, 0.12);
  }

  .vision-card.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .vision-card:hover.is-visible {
    transform: translateY(-6px);
  }

  .vision-card:nth-child(1) { transition-delay: 0s; }
  .vision-card:nth-child(2) { transition-delay: 0.12s; }
  .vision-card:nth-child(3) { transition-delay: 0.24s; }

  .vision-card:nth-child(1) .vision-num,
  .vision-card:nth-child(3) .vision-num {
    color: #fff;
  }

  .vision-card.accent {
    background: var(--navy);
  }

  .vision-num {
    position: absolute;
    right: 36px;
    bottom: 22px;
    font-size: 72px;
    font-weight: 700;
    color: #e7e7e7;
    line-height: 1;
    user-select: none;
    opacity: 0;
    transform: translateX(12px);
    transition: opacity 0.8s ease 0.35s, transform 0.8s ease 0.35s;
  }

  .vision-card.accent .vision-num {
    color: rgba(255, 255, 255, 0.25);
  }

  .vision-card.is-visible .vision-num {
    opacity: 1;
    transform: translateX(0);
  }

  .vision-icon {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: rgba(39,31,34, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 20px;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.5s ease 0.15s, transform 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) 0.15s, background-color 1s ease;
  }

  .vision-card.accent .vision-icon {
    background: rgba(255, 255, 255, 0.12);
  }

  .vision-card.is-visible .vision-icon {
    opacity: 1;
    transform: scale(1);
  }

  .vision-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--navy);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .vision-card.accent .vision-icon svg {
    stroke: #FFFFFF;
  }

  .vision-title {
    position: relative;
    font-size: 30px;
    font-weight: 700;
    color: #1A1A1A;
    margin: 0 0 14px;
  }

  .vision-card.accent .vision-title {
    color: #FFFFFF;
  }

  .vision-desc {
    position: relative;
    font-size: 16px;
    font-weight: 400;
    color: #727272;
    line-height: 1.75;
    margin: 0;
  }

  .vision-card.accent .vision-desc {
    color: rgba(255, 255, 255, 0.75);
  }

  @media (prefers-reduced-motion: reduce) {
    .vision-card,
    .vision-num,
    .vision-icon {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }

  @media (max-width: 860px) {
    .vision-grid {
      grid-template-columns: 1fr;
      gap: 14px;
    }
    .vision-card:nth-child(2) { transition-delay: 0.08s; }
    .vision-card:nth-child(3) { transition-delay: 0.16s; }
  }

  @media (max-width: 640px) {
    .vision-section { padding: 56px 20px; }
    .vision-card { padding: 36px 28px; min-height: auto; }
    .vision-num { font-size: 56px; right: 24px; bottom: 16px; }
  }

  .value-section {
    --navy: #201719;
    --line: #f5f5f5;
    --text-sub: #646464;
    --text-muted: #919191;
    font-family: 'Pretendard', -apple-system, sans-serif;
    letter-spacing: -0.02em;
    word-break: keep-all;
    overflow-wrap: break-word;
    max-width: 1280px;
    margin: 0 auto;
    padding: 88px 40px;
    box-sizing: border-box;
  }

  .value-row {
    display: flex;
    align-items: center;
    gap: 36px;
    padding: 40px 0;
    border-bottom: 1px solid var(--line);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .value-row:first-child {
    border-top: 1px solid var(--line);
  }

  .value-row:last-child {
    border-bottom: none;
  }

  .value-row.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .value-row:nth-child(1) { transition-delay: 0s; }
  .value-row:nth-child(2) { transition-delay: 0.1s; }
  .value-row:nth-child(3) { transition-delay: 0.2s; }

  @media (prefers-reduced-motion: reduce) {
    .value-row {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }

  .value-num {
    font-size: 18px;
    font-weight: 500;
    color: #a2a2a2;
    width: 28px;
    flex-shrink: 0;
  }

  .value-word {
    font-size: 30px;
    font-weight: 700;
    color: #222222;
    width: 200px;
    flex-shrink: 0;
    line-height: 1.3;
  }

  .value-desc {
    font-size: 18px;
    font-weight: 400;
    color: #727272;
    line-height: 1.8;
    margin: 0;
  }

  @media (max-width: 640px) {
    .value-section { padding: 56px 20px; }
    .value-row {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      padding: 24px 0;
    }
    .value-word { font-size: 28px; width: auto; }
    .value-desc { font-size: 14px; }
  }

/* ==================================================
   PC 콘텐츠 이동 위치
================================================== */

#dl-service-pc,
#dl-vision-pc,
#dl-location-pc {
  scroll-margin-top: 120px;
}

/* ==================================================
   PC 전용 페이지 내 이동 메뉴
================================================== */

#dl-anchor-menu-pc {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 72px;

  width: 100%;
  margin: 0;
  padding: 0;

  font-family:
    "Pretendard",
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;

  letter-spacing: -0.01em;
  box-sizing: border-box;
}

#dl-anchor-menu-pc *,
#dl-anchor-menu-pc *::before,
#dl-anchor-menu-pc *::after {
  box-sizing: border-box;
  font-family: inherit;
  letter-spacing: inherit;
}

/* ==================================================
   개별 메뉴
================================================== */

#dl-anchor-menu-pc a {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: flex-start;

  min-height: 48px;
  margin: 0;
  padding: 0 0 15px;

  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;

  color: #949494;

  font-family:
    "Pretendard",
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;

  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;

  text-align: left;
  white-space: nowrap;

  appearance: none;
  -webkit-appearance: none;

  cursor: pointer;

  transition: color 0.2s ease;
}

/* ==================================================
   메뉴 하단 라인
================================================== */

#dl-anchor-menu-pc a::after {
  position: absolute;

  right: 50%;
  bottom: 0;
  left: 50%;

  height: 2px;

  background: #201719;

  content: "";

  transition:
    right 0.2s ease,
    left 0.2s ease;
}

/* ==================================================
   마우스 오버
================================================== */

#dl-anchor-menu-pc a:hover {
  color: #222222;
}

#dl-anchor-menu-pc a:hover::after {
  right: 0;
  left: 0;
}

/* ==================================================
   선택된 메뉴
================================================== */

#dl-anchor-menu-pc a.is-active {
  color: #222222;
}

#dl-anchor-menu-pc a.is-active::after {
  right: 0;
  left: 0;
}

/* ==================================================
   클릭 및 포커스 스타일
================================================== */

#dl-anchor-menu-pc a:active {
  color: #222222;
  transform: none;
}

#dl-anchor-menu-pc a:focus {
  outline: none;
}

#dl-anchor-menu-pc a:focus-visible {
  color: #222222;

  outline: 2px solid #151515;
  outline-offset: 5px;
}

/* ==================================================
   콘텐츠 이동 지점
================================================== */

.dl-section-anchor-pc {
  display: block;

  width: 100%;
  height: 1px;
  margin: 0;
  padding: 0;

  pointer-events: none;
}

/* ==================================================
   태블릿
================================================== */

@media (min-width: 768px) and (max-width: 991px) {
  #dl-anchor-menu-pc {
    gap: 48px;
  }
}

/* ==================================================
   모바일에서 PC 메뉴 숨김
================================================== */

@media (max-width: 767px) {
  #dl-anchor-menu-pc {
    display: flex !important;
  }
}

.about-desktop-service{display:block}.about-mobile-service{display:none}
@media(max-width:767px){.about-desktop-service{display:none}.about-mobile-service{display:block}}