@charset "UTF-8";

:root{
  --reveal-down-offset: 24px;     /* 시작 오프셋(위로 음수 이동) */
  --reveal-stagger-year: 60ms;    /* 연혁 아이템 간 간격 */
  --reveal-stagger-prize: 60ms;   /* 상장 카드 간 간격 */
}

/* 초기 상태: 위에서 내려오는 느낌 */
.reveal-down{
  opacity: 0;
  transform: translateY(calc(var(--reveal-down-offset) * -1));
  transition:
    opacity var(--reveal-dur) var(--reveal-ease),
    transform var(--reveal-dur) var(--reveal-ease);
}
.reveal-down.is-visible{
  opacity: 1;
  transform: none;
}

/* [프리로드 단계] 연혁/상장도 모션 전엔 숨김 */
html.reveal-preload .history-content-wrap .history-item,
html.reveal-preload .prize-content-wrap .prize-item{
  opacity:0 !important;
  transform: translateY(calc(var(--reveal-down-offset) * -1)) !important;
  visibility:hidden;
}

/* 접근성: 모션 최소화 환경에선 즉시 노출 */
@media (prefers-reduced-motion: reduce){
  .reveal-down{ transition:none; transform:none; opacity:1 !important; }
  html.reveal-preload .history-content-wrap .history-item,
  html.reveal-preload .prize-content-wrap .prize-item{
    opacity:1 !important; transform:none !important; visibility:visible !important;
  }
}

/* 타이틀 */
.title-container .page-title { font-size:64px; font-weight:700; text-align:center; line-height:1; margin-top:175px; }
.title-container .page-desc { font-size:18px; text-align:center; line-height:1; margin-top:44px;}
.title-container .page-desc br { display:none }

.content-section { padding-bottom:160px; }
.content-motion-wrap { margin-top:40px; }
.content-motion-wrap.biz-area { margin-top:120px; }

.history-content-wrap { margin-top: 120px; }
.history-content-wrap .history-item-wrap { max-width:864px; margin:0 auto; }
.history-content-wrap .history-item { display:flex; flex-direction:row; margin-top:10px;position:relative;}
.history-content-wrap .history-item:first-child { margin-top:0; }
.history-content-wrap .history-item .year { font-size:64px; font-weight:700; width:155px; }
.history-content-wrap .history-item .separator { display: flex; flex-direction: column; align-items: center; padding: 32px 40px 0; flex-shrink:0; }
.history-content-wrap .history-item .separator .bullet { display:inline-block; margin-top:12px; }
.history-content-wrap .history-item .separator .inner { width:1px; height:100%; border-right:1px solid #D9D9D9; margin-top:8px; }
.history-content-wrap .history-item .history-wrap { width:100%; margin:40px 0; font-size:18px; font-weight:700; color:#505050; min-height:58px; word-break:keep-all;}
.history-content-wrap .history-item .history-wrap ul li { display:flex; flex-wrap:nowrap; }
.history-content-wrap .history-item .history-wrap ul li + li { margin-top: 14px; }
.history-content-wrap .history-item .history-wrap .number { flex-basis:7px; flex-shrink:0; color:#D5DBE5; }
.history-content-wrap .history-item .history-wrap .content { padding-left:16px; letter-spacing: -0.54px; }
.history-content-wrap .history-item .history-wrap .content.strong { color:#1C64FF;}

.prize-content-wrap { margin-top:120px; }
.prize-content-wrap .title { font-size:18px; font-weight:700; }
.prize-content-wrap .prize-item-wrap { margin-top:24px; display:grid; grid-template-rows:auto; grid-template-columns: 1fr 1fr 1fr; column-gap:32px; row-gap:32px;}
.prize-content-wrap .prize-item-wrap .img { min-height:454px;display:flex;align-items:center;justify-content:center;}
.prize-content-wrap .prize-item-wrap .prize-item { border:1px solid #EEEEEE; padding:32px; box-shadow: 8px 8px 32px -10px #0000001A; text-align:center; border-radius:24px; min-height:620px;}
.prize-content-wrap .prize-item-wrap .prize-item .prize-name { font-size:14px; color:#1C64FF; font-weight:700; }
.prize-content-wrap .prize-item-wrap .prize-item .prize-target { font-size:18px; font-weight:700; color: #222; margin-top:8px;}
.prize-content-wrap .prize-item-wrap .prize-item .prize-target-second { font-size:14px; color:#999; margin-top:8px;}

.tool-container .category-wrap{
  display:flex;
  flex: 1 1 0;
  column-gap:8px;
  min-width: 0;
  padding-right: 16px;
  overflow: hidden;
}
.tool-container .category-wrap .btn { border-radius:15px; border:1px solid #222; background-color:#fff; color:#222; padding:4px 15px; height:unset; font-size:14px; cursor: pointer }
.cate-btn.selected {
  background-color: #222222 !important;
  color: #fff !important;
}
.mob-hide { display:block;}

/* ========== 모바일(<=768px) ========== */
@media (max-width:768px){
  .header { display:none }
  .sub-header { display:block }

  .content-section { padding-bottom:80px; }
  .content-section .hero { display:none }
  .content-section .mds-submenu { display:none }
  .content-section .wrap, .content-section .caption {
    width: 100%;
  }
  .title-container .page-title { display:none }
  .title-container .page-desc { font-size:16px; line-height: 1.55;padding:0 16px;}
  .title-container .page-desc br { display:block }

  .content-motion-wrap { padding:0 16px; }

  .history-content-wrap { margin-top: 32px; }
  .history-content-wrap .history-item-wrap { padding:0 16px; }
  .history-content-wrap .history-item { flex-wrap:wrap; margin-top:20px; }
  .history-content-wrap .history-item .year { font-size:32px; order:2; margin-left:46px; }
  .history-content-wrap .history-item .separator { padding:6px 12px 0; order:1; position:absolute; height:100%; width:unset; }
  .history-content-wrap .history-item .history-wrap { margin:12px 0; font-size:16px; order:3;  margin-left:46px;}
  .history-content-wrap .history-item .history-wrap ul li { font-size:18px;}

  .prize-content-wrap { margin-top:64px; }
  .prize-content-wrap .title { font-size:32px; padding:0 16px; text-align:center; }
  .prize-content-wrap .prize-item-wrap { padding:0 47px; grid-template-columns:1fr; row-gap:24px; margin-top:38px; }
  .prize-content-wrap .prize-item-wrap .img { min-height:unset;}
  .prize-content-wrap .prize-item-wrap .prize-item { min-height:unset;}
  .prize-content-wrap .prize-item-wrap .prize-item .prize-name { margin-top:12px; }
  .mob-hide { display:none;}
}