* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

@property --rd04-slice-1 {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@property --rd04-slice-2 {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@property --rd04-slice-3 {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@property --rd04-slice-4 {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@property --rd04-slice-5 {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

:root {
  --rd04-blue: #2f96f6;
  --rd04-dark: #202124;
  --rd04-navy: #56616d;
  --rd04-gray: #8b95a1;
  --rd04-bg: #f6f8fc;
  --rd04-card: #ffffff;
  --rd04-sky: #9ccfff;
  --rd04-pale: #dce5ec;
}

body {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #fff;
  color: var(--rd04-dark);
}

/* section04 전용 prefix: rd04- */
.rd04-section {
  width: 100%;
  min-height: 100vh;
  padding: clamp(76px, 7vw, 118px) clamp(18px, 4vw, 82px);
  background: var(--rd04-bg);
  border-radius: 0 0 40px 40px;
}

.rd04-head {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.rd04-head > span {
  display: block;
  margin-bottom: 20px;
  color: var(--rd04-blue);
  font-size: clamp(15px, 1vw, 18px);
  font-weight: 850;
  letter-spacing: -0.04em;
}

.rd04-head h2 {
  font-size: clamp(34px, 3vw, 54px);
  line-height: 1.18;
  font-weight: 850;
  letter-spacing: -0.075em;
}

.rd04-head p {
  margin-top: 24px;
  color: var(--rd04-gray);
  font-size: clamp(13px, .9vw, 16px);
  line-height: 1.65;
  letter-spacing: -0.04em;
}

.rd04-source {
  max-width: 1740px;
  margin: clamp(58px, 6vw, 96px) auto 24px;
  text-align: right;
  color: var(--rd04-gray);
  font-size: 13px;
  font-weight: 600;
}

.rd04-grid {
  /* max-width: 1740px; */
  margin: 6rem auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 1.4vw, 26px);
}

.rd04-card {
  position: relative;
  min-height: 640px;
  /* padding: clamp(44px, 3.5vw, 64px); */
  border-radius: 32px;
  background: var(--rd04-card);
  overflow: hidden;
}

.rd04-copy > span {
  color: var(--rd04-blue);
  font-size: clamp(14px, .95vw, 16px);
  font-weight: 850;
  letter-spacing: -0.05em;
}

.rd04-copy h3 {
  margin-top: 10px;
  color: var(--rd04-dark);
  font-size: clamp(25px, 1.65vw, 32px);
  line-height: 1.25;
  letter-spacing: -0.07em;
  font-weight: 850;
}

.rd04-copy p {
  margin-top: 16px;
  color: var(--rd04-gray);
  font-size: clamp(13px, .85vw, 15px);
  line-height: 1.65;
  letter-spacing: -0.04em;
}

.rd04-chart-source {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 54px;
  text-align: center;
  color: var(--gray);
  font-size: 14px !important;
  font-weight: 600;
  letter-spacing: 0;
}

/* Bar */
.rd04-bar-chart {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 112px;
  height: 310px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  gap: 20px;
}

.rd04-bar-item {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
}

.rd04-bar {
  width: 84px;
  height: 0;
  border-radius: 17px 17px 0 0;
  transition: height 1s cubic-bezier(.22,.8,.22,1);
}

.rd04-baseline {
  height: 3px !important;
  border-radius: 0;
  background: #d8e3ec;
}

.rd04-bar-light {
  background: linear-gradient(180deg, #dbe4ec, #c3cfda);
}

.rd04-bar-dark {
  background: linear-gradient(180deg, #65707c, #4f5964);
}

.rd04-bar-blue {
  background: linear-gradient(180deg, #3199ff, #2c8cf1);
  color: #fff;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-top: 28px;
}

.rd04-bar-blue em {
  font-style: normal;
  font-size: 18px;
  font-weight: 850;
}

.rd04-bar-item > b {
  margin-top: 18px;
  color: var(--dark-gray);
  font-size: 15px;
  font-weight: 550;
}

.rd04-bubble {
  position: absolute;
  bottom: calc(var(--rd04-bar-height, 0px) + 50px);
  min-width: 86px;
  padding: 11px 14px;
  border-radius: 15px;
  background: #fff;
  text-align: center;
  color: #66717d;
  font-size: 12px;
  line-height: 1.2;
  box-shadow: 0 16px 32px rgba(30, 42, 64, 0.08);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .55s ease .55s, transform .55s ease .55s;
}

.rd04-bubble strong {
  color: var(--rd04-dark);
  font-size: 16px;
      font-family: 'KakaoBigSans-Bold';
}

.rd04-small-bubble {
  bottom: 52px;
}

/* Legend */
.rd04-legend {
  margin-top: 36px;
  text-align: center;
  color: #76818d;
  font-size: 11px;
  white-space: nowrap;
}

.rd04-legend i {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 5px 1px 11px;
  border-radius: 50%;
}

.rd04-legend i:first-child {
  margin-left: 0;
}

.rd04-legend .blue { background: var(--rd04-blue); }
.rd04-legend .dark { background: var(--rd04-navy); }
.rd04-legend .sky { background: var(--rd04-sky); }
.rd04-legend .pale { background: #cbd8e3; }
.rd04-legend .soft { background: #edf1f5; }

/* Donut */
.rd04-donut-area {
  position: relative;
  width: 380px;
  height: 330px;
  margin: 34px auto 0;
}

.rd04-donut {
  --rd04-slice-1: 114.12deg;
  --rd04-slice-2: 220.32deg;
  --rd04-slice-3: 293.76deg;
  --rd04-slice-4: 336.60deg;
  --rd04-slice-5: 360deg;

  position: absolute;
  left: 50%;
  top: 45%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(1);
  background: conic-gradient(
    from 90deg,
  var(--rd04-blue) 0deg var(--rd04-slice-1),
  var(--rd04-navy) var(--rd04-slice-1) var(--rd04-slice-2),
  var(--rd04-sky) var(--rd04-slice-2) var(--rd04-slice-3),
  #d2dde7 var(--rd04-slice-3) var(--rd04-slice-4),
  #edf2f6 var(--rd04-slice-4) var(--rd04-slice-5),
  transparent var(--rd04-slice-5) 360deg
);
  /* transform: translate(-50%, -50%) rotate(-90deg) scale(.9); 
  background: conic-gradient(
    var(--rd04-blue) 0deg var(--rd04-slice-1),
    var(--rd04-navy) var(--rd04-slice-1) var(--rd04-slice-2),
    var(--rd04-sky) var(--rd04-slice-2) var(--rd04-slice-3),
    #d2dde7 var(--rd04-slice-3) var(--rd04-slice-4),
    #edf2f6 var(--rd04-slice-4) var(--rd04-slice-5),
    transparent var(--rd04-slice-5) 360deg
  ); */
  box-shadow: 0 20px 42px rgba(34, 44, 58, 0.08);
  transition:
    --rd04-slice-1 .8s ease,
    --rd04-slice-2 1s ease .12s,
    --rd04-slice-3 1.18s ease .22s,
    --rd04-slice-4 1.34s ease .34s,
    --rd04-slice-5 1.5s ease .46s,
    opacity .45s ease,
    transform .9s ease;
}

.rd04-donut-center {
  position: absolute;
  inset: 62px;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 50%;
  background: #fff;
  text-align: center;
  transform: rotate(90deg);
  opacity: 0;
  transition: opacity .45s ease .9s;
}

.rd04-donut-center strong {
  font-size: 15px;
  font-weight: 850;
  letter-spacing: -0.05em;
}

.rd04-donut-center span {
  margin-top: 4px;
  color: var(--rd04-dark);
  font-size: 15px;
  font-weight: 850;
}

.rd04-label {
  position: absolute;
  min-width: 92px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #fff;
  text-align: center;
  color: #66717d;
  font-size: 11px;
  line-height: 1.15;
  box-shadow: 0 18px 34px rgba(30, 42, 64, 0.1);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .55s ease, transform .55s ease;
}

.rd04-label b {
  display: block;
  margin-top: 2px;
  color: var(--rd04-dark);
  font-size: 14px;
  font-family: 'KakaoBigSans-Bold';
}

.d1 { top: 50px; right: -10px; }
.d2 { right: 10px; bottom: 50px; }
.d3 { left: -20px; bottom: 110px; }
.d4 { left: -10px; top: 40px; }
.d5 { top: -10px; left: 90px; }
/* 
/* Area */


.rd04-area-chart {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 116px;
  height: 330px;
}

.rd04-area-chart svg {
  width: 100%;
  height: 300px;
  overflow: visible;
}

.rd04-area-fill {
  fill: url(#rd04AreaGradient);
  transform-origin: left bottom;
  transform: scaleX(0);
  transition: transform 1.25s cubic-bezier(.22,.8,.22,1);
}

.rd04-guide {
  opacity: 0;
  transition: opacity .6s ease .75s;
}

.rd04-guide line {
  stroke: #fff;
  stroke-width: 2;
}

.rd04-guide text {
  fill: #27313b;
  font-size: 14px;
  font-weight: 850;
  text-anchor: middle;
}

.rd04-pill {
  position: absolute;
  padding: 10px 17px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 850;
  box-shadow: 0 14px 30px rgba(30, 42, 64, 0.08);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s ease .95s, transform .6s ease .95s;
}

.rd04-pill-white {
  top: 26px;
  left: 18%;
  background: #fff;
  color: var(--rd04-dark);
}

.rd04-pill-blue {
  top: 126px;
  right: 14%;
  background: var(--rd04-blue);
  color: #fff;
}

.rd04-axis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 16px;
  color: #8b95a1;
  font-size: 13px;
  text-align: center;
}


.rd04-card.is-ready .rd04-bar {
  height: var(--rd04-target-height);
}

.rd04-card.is-ready .rd04-bubble {
  opacity: 1;
  transform: translateY(0);
}

.rd04-card.is-ready .rd04-donut {
  --rd04-slice-1: 114.12deg;
  --rd04-slice-2: 220.68deg;
  --rd04-slice-3: 294.12deg;
  --rd04-slice-4: 336.96deg;
  --rd04-slice-5: 360deg;
  opacity: 1;
  transform: translate(-50%, -50%) rotate(-90deg) scale(1);
}

.rd04-card.is-ready .rd04-donut-center {
  opacity: 1;
}

.rd04-card.is-ready .rd04-label {
  opacity: 1;
  transform: translateY(0);
}

.rd04-card.is-ready .d1 { transition-delay: .9s; }
.rd04-card.is-ready .d2 { transition-delay: 1s; }
.rd04-card.is-ready .d3 { transition-delay: 1.1s; }
.rd04-card.is-ready .d4 { transition-delay: 1.2s; }
.rd04-card.is-ready .d5 { transition-delay: 1.3s; }

.rd04-card.is-ready .rd04-area-fill {
  transform: scaleX(1);
}

.rd04-card.is-ready .rd04-guide,
.rd04-card.is-ready .rd04-pill {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1280px) {
  .rd04-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 100%;
    gap: clamp(18px, 1.4vw, 26px);
  }

  .rd04-card {
    min-height: 680px;
  }
}

@media (max-width: 768px) {
  .rd04-section {
    padding: 64px 18px;
    border-radius: 0 0 28px 28px;
  }

  .rd04-source {
    text-align: center;
  }

  .rd04-card {
    min-height: 640px;
    /* padding: 3rem 2.4rem; */
    border-radius: 28px;
  }

  .rd04-bar-chart,
  .rd04-area-chart {
    left: 7%;
    right: 7%;
  }

  .rd04-bar {
    width: 62px;
  }

  .rd04-donut-area {
    width: 320px;
    height: 320px;
  }

  .rd04-donut {
    width: 200px;
    height: 200px;
  }
}

@media (max-width: 480px) {
  .rd04-head h2 {
    font-size: 30px;
  }

  .rd04-head p br {
    display: none;
  }

  .rd04-card {
    min-height: 620px;
    /* padding: 34px 20px; */
  }

  .rd04-legend {
    transform: scale(.86);
    transform-origin: center;
  }

  .rd04-bar-chart {
    gap: 12px;
  }

  .rd04-bar {
    width: 46px;
  }

  .rd04-bubble {
    min-width: 68px;
    padding: 9px;
    font-size: 10px;
  }

  .rd04-donut-area {
    width: 280px;
  }

  .rd04-label {
    min-width: 72px;
    padding: 10px;
  }

  .d1 { right: -4px; }
  .d2 { right: 6px; }
  .d3 { left: -6px; }
  .d4 { left: -6px; }
  .d5 { left: 104px; }

  .rd04-axis {
    font-size: 10px;
  }
} 

.chart-source {
  font-size: 14px !important;
  letter-spacing: 2px;

}


/*   ---------------------------------------     */
.rd04-area-chart{
  position:absolute;
  left:10%;
  right:10%;
  bottom:116px;
  height:330px;
}

.rd04-area-chart svg{
  width:100%;
  height:300px;
  overflow:visible;
}

.rd04-area-fill{
  fill:url(#rd04AreaGradient);
}

.rd04-area-line{
  fill:none;
  stroke:var(--rd04-blue);
  stroke-width:4;
  stroke-linecap:round;
}

.guide-line{
  stroke:#fff;
  stroke-width:2;
  stroke-dasharray:5 5;
}

.chart-dot{
  position:absolute;
  width:24px;
  height:24px;
  transform:translate(-50%, -50%);
  z-index:3;
}

.dot1{left:26.9%; top:35.7%;}
.dot2{left:51.9%; top:56%;}
.dot3{left:75%; top:69.5%;}
.dot4{left:97.1%; top:77.2%;}

.chart-value{
  position:absolute;
  transform:translateX(-50%);
  font-size:24px;
  font-weight:800;
  color:var(--rd04-blue);
  z-index:4;
}

.v1{left:26.9%; top:25%;}
.v2{left:51.9%; top:45%;}
.v3{left:75%; top:59%;}
.v4{left:97.1%; top:66%;}

.rd04-pill{
  position:absolute;
  padding:10px 17px;
  border-radius:16px;
  font-size:13px;
  font-weight:850;
  box-shadow:0 14px 30px rgba(30,42,64,.08);
  z-index:5;
}

.rd04-pill-white{
  top:26px;
  left:18%;
  background:#fff;
  color:#27313b;
}

.rd04-pill-blue{
  top:126px;
  right:12%;
  background:var(--rd04-blue);
  color:#fff;
}

.rd04-axis{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:16px;
  color:#222;
  font-size:13px;
  text-align:center;
}
@media (max-width: 480px) {
.rd04-pill-blue{
  right:0%;}
}