@charset 'utf-8';

.end input {
  background-color: yellow;
}
.chart-container {
  width:100%;
  border:1px solid red;
  position:relative;
  max-height:900px;
  text-align:center;
}
.chart {
    position: relative;
    height: 100%;
    width: 100%;
    aspect-ratio: 1 / 0.6;
    max-height: 652px;
    margin: 0 auto;
    /*border:1px solid green;*/
}
.chartm {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 0.6;
    max-height: 652px;
}
.line {
    fill: none;
    stroke-width: 2;
}
.income {
    stroke: white;
    stroke-width:5;
}
.graph-line {
  fill: none;
  stroke-width:5;
}
.graph-white {
    stroke: white;
}
.graph-red {
    stroke: #FE6060;
}
.graph-gray {
    stroke: #2C81FB;
}
.graph-green {
    stroke: #00cc66;
}
.graph-dash {
  stroke-dasharray: 5,5 !important;
}
.slow {
  stroke-dasharray: 5000;
  stroke-dashoffset: 5000;
  animation: draw 3s forwards;
}
.slow-fast {
  stroke-dasharray: 5000;
  stroke-dashoffset: 5000;
  animation: draw 1.5s forwards;
}
.axis {
    stroke: white;
    stroke-width: 1;
}
.label {
    fill: white;
    /*font-size: 16px;*/
    text-align:right;
    /*width:50px;*/
}
.fade-in-rect {
    opacity: 0;
    animation: fadeIn 3s forwards;
}
.blinking-background {
  /* 애니메이션 이름: 위에서 정의한 @keyframes 이름 */
  animation-name: blink-effect;

  /* 애니메이션 지속 시간: 1초 동안 한 번의 깜빡임 주기 완료 */
  animation-duration: 2s;

  /* 애니메이션 반복 횟수: 무한 반복 */
  animation-iteration-count: infinite;

  /* 애니메이션 속도 곡선: 시작과 끝에서 느려짐 (부드러운 효과) */
  animation-timing-function: ease-in-out;
}
@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}
@keyframes fadeIn {
    to {
        opacity: 0.8;
    }
}
@keyframes drawDashed {
  to {
    stroke-dashoffset: 0;
    stroke-dasharray: 10 5; /* <<<<< 원하는 점선 패턴으로 변경! */
    }

  /* 100% 시점: 애니메이션 종료 시점입니다. */
  /* stroke-dashoffset은 0으로 유지하여 라인을 그대로 둡니다. */
  /* stroke-dasharray 값을 점선 패턴으로 변경하여 라인이 점선으로 보입니다. */
  from {
    stroke-dashoffset: 0;
  }
}
@keyframes blink-effect {
  /* 애니메이션 시작 시점과 종료 시점에는 불투명하게 (opacity: 1) */
  0%, 100% {
    opacity: 0.9;
  }
  /* 애니메이션 중간 시점에는 투명하게 (opacity: 0) */
  50% {
    opacity: 0.7;
  }
}

/* canvas(자산/부채) 저장 버튼 width 보정 */
.content-question .question.add-btn .btn-small {
  width: auto;
  min-width: 50px;
  white-space: nowrap;
  padding: 0 12px;
}

/* canvas(자산/부채) 페이지 - 하단 버튼을 질문영역 하단에 배치 */
.content-question .fixed-bottom-btn.in-question {
  position: static;
  transform: none;
  max-width: none;
  padding: 16px 0;
  margin-top: 24px;
}
.content-question .fixed-bottom-margin.in-question {
  display: none;
}

/* 그래프 저장 팝업 */
.prj-save-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.prj-save-panel {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  width: calc(100% - 48px);
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.prj-save-title {
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 8px;
}
.prj-save-panel .btn-large {
  text-align: center;
}
.prj-save-panel .btn-large.gray {
  background: #e9ecef;
  color: #666;
}

/* 나의 그래프 썸네일 */
.screenshot-graph-list label .graph-thumb {
  width: 100%;
  margin-top: 8px;
  border-radius: 6px;
  overflow: hidden;
}
.screenshot-graph-list label .graph-thumb img {
  width: 100%;
  display: block;
}

/* 그래프 비교 페이지 */
.prj-compare-graph-wrap {
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.prj-compare-graph-wrap:last-child {
  border-bottom: none;
}
.prj-compare-legend {
  margin-top: 20px;
}
.prj-compare-legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
  font-size: 15px;
  color: #333;
}
.prj-compare-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.prj-compare-m-title {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  padding: 12px 0 8px;
  border-bottom: 1px solid #eee;
  margin-bottom: 0;
}

/* PC에서 이전/다음 버튼 오른쪽 정렬 */
@media (min-width: 1024px) {
  .content-question .fixed-bottom-btn {
    position: static;
    transform: none;
    max-width: none;
    padding: 16px 0;
    margin-top: 24px;
    justify-content: flex-end;
  }
  .content-question .fixed-bottom-margin {
    display: none;
  }
}