@charset "UTF-8";
:root {
  --slide-navigation-hover-color: #222;
}

/* 스크롤바 숨김 */
html,body{-ms-overflow-style:none;scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}

/* container margin */
.container{margin:auto auto}

/* ===== Main Visual Slider (Swiper) ===== */
.hero{position:relative;height:100dvh;overflow:hidden;margin-top:0}
.hero .main-visual-swiper{height:100%}
.swiper-slide{position:relative;min-width:100%;height:100%}
.swiper-slide .media{position:absolute;inset:0}
.swiper-slide img,.swiper-slide video{width:100%;height:100%;object-fit:cover}
/*.swiper-slide::after{content:'';position:absolute;inset:0;background:radial-gradient(90% 60% at 50% 50%,rgba(22,28,46,0),rgba(6,10,24,.65))}*/
.hero .main-visual-swiper .swiper-slide::after{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(90% 60% at 50% 50%,rgba(22,28,46,0),rgba(6,10,24,.65));
  pointer-events:none; /* 안전 */
}
.hero .caption{position:absolute;inset-inline:0;bottom:156px;}
.hero .caption .inner{width:min(1100px,92vw);margin:0 auto}
.sup{color:#fff;font-weight:250;font-size:56px;line-height:1;letter-spacing:.5px}
.title{font-size:clamp(32px,6vw,58px);font-weight:800;line-height:1;margin-top:14px;}
.desc{color:#fff;font-size:18px;max-width:54ch; margin-top:31px;}
.caption .sup,.caption .title,.caption .desc{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.swiper-slide.is-active .caption .sup{opacity:1;transform:none;transition-delay:.05s}
.swiper-slide.is-active .caption .title{opacity:1;transform:none;transition-delay:.18s}
.swiper-slide.is-active .caption .desc{opacity:1;transform:none;transition-delay:.32s}

.hero .lr{position:absolute;inset-inline:0;bottom:64px;z-index:10}
.hero .lr .inner{width:min(1100px,92vw);margin:0 auto;display:flex;gap:10px}
.btn-arrow{width:48px;height:48px;display:grid;place-items:center;background:transparent;border:1px solid #fff;cursor:pointer}
.btn-arrow:hover{background:#70E0FF;border:1px solid #70E0FF}
.btn-arrow:hover svg path{fill:#000}

/*section:not(.hero,.menu-section){padding:90px 0} */
section .section-title{font-size:clamp(28px,4.2vw,64px);margin:0 0 22px;font-weight:800}
section .section-sub{color:#fff;font-size:20px;margin-top:-8px;margin-bottom:80px;}

/* Trend Leading */
.trend{background:#03060C;position:relative;min-height:100dvh;display:flex;align-items:flex-start;background-image:url(/assets/app/img/trend-leading-bg.jpg);background-position:bottom;background-repeat:no-repeat;background-size:cover;}
.trend .bg-video{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.trend .bg-video video{width:100%;height:100%;object-fit:cover}
.trend .container{position:relative;z-index:1;width:100%;padding:0 220px 140px}

/* 레이아웃 */
.slide-container{position:relative;display:flex;align-items:center;justify-content:center}
.slide-wrapper{display:flex;align-items:center;position:relative}

/* 컬러 탭 */
.color-tabs{display:flex;flex-direction:column;height:446px;width:8px;cursor:pointer}
.tab{flex:1;transition:all .3s}
.tab:nth-child(1){background:#1C64FF}
.tab:nth-child(2){background:#1CDDFF}
.tab:nth-child(3){background:#1CFF82}
.tab:nth-child(4){background:#FFE81C}

/* ✅ 슬라이드별 테마 변수(안전하게 nth-of-type 권장) */
#trend .panel._pc-view .slides .slide:nth-of-type(1){ --tl-bg:#1C64FF; --tl-ink:#FFF; }
#trend .panel._pc-view .slides .slide:nth-of-type(2){ --tl-bg:#1CDDFF; --tl-ink:#084854; }
#trend .panel._pc-view .slides .slide:nth-of-type(3){ --tl-bg:#1CFF82; --tl-ink:#084B26; }
#trend .panel._pc-view .slides .slide:nth-of-type(4){ --tl-bg:#FFE81C; --tl-ink:#484101; }

/* 배경판(.slides) */
.trend .slides{
  position:relative;
  width:1100px;
  height:446px;
  overflow:visible;
  background-color:#1C64FF; /* 초기값 */
  transition:background-color .45s ease;
  will-change:background-color;
}

/* 슬라이드(겹침) */
.trend .slides .slide{
  position:absolute !important;
  inset:0;
  width:100%;
  height:100%;
  padding:92px 80px;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  overflow:visible;

  background:transparent !important; /* 배경판 고정 */
  color:inherit !important;          /* 부모 색 상속 */

  opacity:0;
  pointer-events:none;
  transition:opacity .55s ease;
  will-change:opacity;
}
.trend .slides .slide.is-active{opacity:1;pointer-events:auto;z-index:2}
.trend .slides .slide.is-exit{opacity:0;z-index:1}

/* 슬라이드 내부(텍스트/이미지) 기본 배치 */
.trend .slides .slide .slide-text{flex:1;z-index:2}
.trend .slides .slide .slide-text h4{font-size:24px;font-weight:700;line-height:24px;margin:0}
.trend .slides .slide .slide-text h1{font-size:62px;font-weight:250;line-height:64px;margin:10px 0 40px;letter-spacing:-2px}
.trend .slides .slide .slide-text p{font-size:18px;line-height:1.5;width:50%}

.trend .slides .slide .slide-image{
  position:absolute;
  bottom:-150px;
  right:-80px;
  z-index:5;
}
.trend .slides .slide .slide-image img{width:520px;box-shadow:0 20px 30px rgba(0,0,0,.5)}

/* 내용 모션(활성 슬라이드에서만 등장) */
.trend .slides .slide .slide-text{
  opacity:0;
  transform:translateY(38px);
  transition:opacity .30s ease, transform .30s ease;
  will-change:opacity, transform;
}
.trend .slides .slide .slide-image{
  opacity:0;
  transform:translateX(56px);
  transition:opacity .48s ease, transform .48s ease;
  will-change:opacity, transform;
}
.trend .slides .slide.is-active .slide-text{
  opacity:1;
  transform:none;
  transition-delay:.06s;
}
.trend .slides .slide.is-active .slide-image{
  opacity:1;
  transform:none;
  transition-delay:.10s;
}
.trend .slides .slide .link-wrap { margin-top:32px;}

/* “자세히보기” SVG 라인도 글자색(=currentColor) 따르게 */
#trend .panel._pc-view .slides .slide svg rect{fill:currentColor !important}

/* 컨트롤 */
#trend .panel._pc-view .slide-controls{
  position:absolute;
  top:54px;
  right:56px;
  display:flex;
  z-index:20; /* 클릭 이슈 해결 */
}

/* indicator (숫자/라인 색 = currentColor) */
#trend .panel._pc-view .slide-indicator{
  display:flex;
  align-items:center;
  font-size:24px;
  font-weight:700;
  color:currentColor;
}
#trend .panel._pc-view .slide-indicator .separator{
  margin:0 20px;
  display:inline-block;
  width:70px;
  height:1px;
  background-color:currentColor;
}

/* 네비 버튼 (기본: 테두리/화살표 = currentColor, hover: 배경 검정 + 화살표 흰색) */
#trend .panel._pc-view .slide-navigation{
  display:flex;
  margin-left:56px;
  column-gap:8px;
}
#trend .panel._pc-view .slide-navigation .btn-arrow{
  background:transparent;
  color:inherit;                 /* ⭐ UA 기본 ButtonText(검정) 제거 */
  border:1px solid currentColor; /* 첫 슬라이드 흰색, 나머지 테마색 */
}
#trend .panel._pc-view .slide-navigation .btn-arrow svg path{
  fill:currentColor;
}
#trend .panel._pc-view .slide-navigation .btn-arrow:hover{
  background:#222;
  border-color:#222; /* 원하면 #fff로 변경 가능 */
}
#trend .panel._pc-view .slide-navigation .btn-arrow:hover svg path{
  fill:#fff;
}

/* === Trend Leading : Mobile Swiper cards === */
.trend-mobile-swiper{
  display:none;
  margin-top:24px;
}
/* 공통 카드 스타일 */
.trend-card{
  overflow:hidden;
  min-height:360px;
  display:flex;
  flex-direction:column;
}
.trend-card-body{
  padding:32px 24px;
}
.trend-card-kicker{
  display:block;
  font-size:14px;
  font-weight:700;
  line-height:1.3;
}
.trend-card-title{
  display:block;
  margin-top:6px;
  font-size:24px;
  font-weight:300;
  letter-spacing:-1px;
  line-height:1.2;
}
.trend-card-desc{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin-top:16px;
  line-height:1.6;
  padding:0!important;
}
.trend-card-cta{
  margin-top:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 22px;
  border-radius:999px;
  border:1px solid currentColor;
  font-size:14px;
  font-weight:500;
  background:transparent;
}
.trend-card-media{
  margin-top:auto;
  height:200px;
}
.trend-card-media img{
  width:100%;
  display:block;
}

/* 색상 */
.trend-mobile-swiper .swiper-slide:nth-child(1) .trend-card {
  background:#1C64FF;
  color:#FFF;
}
.trend-mobile-swiper .swiper-slide:nth-child(2) .trend-card {
  background:#1CDDFF;
  color:#084854;
}
.trend-mobile-swiper .swiper-slide:nth-child(3) .trend-card {
  background:#1CFF82;
  color:#084B26;
}
.trend-mobile-swiper .swiper-slide:nth-child(4) .trend-card {
  background:#FFE81C;
  color:#484101;
}

/* 메인 비주얼용 .swiper-slide 공통 스타일 덮어쓰기 */
.trend-mobile-swiper .swiper-slide{
  position:relative;
  min-width:auto;
  height:auto;
}
.trend-mobile-swiper .swiper-slide::after{
  content:none;
}
.trend-mobile-swiper img{
  object-fit:cover;
}

/* Insights/Tech Note demo */
#insights{background:#001279;min-height:100dvh;display:flex;align-items:flex-start;justify-content:center}
#insights .container { position:relative;}
#insights .container .section-title{text-align:left;}
#insights .container .section-sub{text-align:left;}
#insights .navi-container { position:absolute; top:0; right:0;}
#insights .navi-container .inner{margin:0 auto;display:flex;gap:10px}

#insights .notes .solution-content .swiper {
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 95%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 95%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.notes .icard{
  position:relative;
  padding:38px 0; min-height:220px; display:flex; flex-direction:column;
  transition:transform .18s ease;
}
.notes .swiper-slide.icard {width:300px; min-width:300px;}
.notes .icard .thumbnail { overflow:hidden;}
.notes .icard .insight-content { background-color: #fff; padding:24px 24px 40px;}
.notes .icard .insight-content .title { font-size:14px; font-weight:400; color:#98A1A7; margin-top:0;}
.notes .icard .insight-content .title + p { margin-top:24px; font-size:18px; color:#4F5254; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow:hidden; min-height:60px;}
.notes .icard .insight-content .link { margin-top:16px; }
.notes .icard .insight-content .link a { font-size:14px; font-weight:700; color:#1C0B87;}
.notes .icard:hover{ transform:translateY(-2px) }

#technote{min-height:100dvh;display:flex;align-items:flex-start;justify-content:center;}
#technote { background-image: url(/assets/app/img/main_technote_bg.png); background-size:cover; background-position:bottom;}
#technote .container .section-title{text-align:left;}
#technote .container .section-sub{text-align:left;}
.notes .solution-content{ position:relative; overflow-x:clip }             /* 페이드 기준 + 넘침 숨김 */
.notes .grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px } /* 모바일에서만 사용됨(아래 media에서 1열로 변경) */
.notes .swiper-slide {width:340px; min-width:340px;}
.notes .swiper-slide::after{content:'';position:absolute;inset:0;background:none}
.notes .tcard{
  position:relative;
  padding:38px 0; min-height:220px; display:flex; flex-direction:column;
  transition:transform .18s ease;
}
.notes .tcard:hover{ transform:translateY(-2px) }
.notes .badges{ display:flex; gap:8px; margin-bottom:16px }
.notes .badge{ display:inline-flex; align-items:center; height:32px; padding:0 20px; border-radius:3px; font-size:14px }
.notes .badge{ background:#1C64FF; color:#fff; }
.notes .t-title{ font-size:20px; line-height:1.45; color:var(--note-title); font-weight:700;
  display: -webkit-box;
  -webkit-box-orient: vertical; /* 텍스트 방향 */
  -webkit-line-clamp: 2; /* 최대 표시할 줄 수 */
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}
.notes .t-excerpt{
  margin-top:18px; color:#6D7EA8; font-size:16px; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  max-width:85vw;
}
.notes .t-excerpt.no-tag{
  -webkit-line-clamp:6!important;
}
.notes .t-tags { margin-top:16px; display:block; white-space:nowrap; overflow:hidden; position:relative; flex-shrink:0;
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 90%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.notes .t-tags .tag { background-color:#E4E4E4; color:#222; border-radius:8px; padding:5px 8px; display:inline-block; line-height:1.5; font-size:14px;}

/* 메타(2줄 레이아웃) */
.notes .meta{
  display:grid; grid-template-columns:1fr; grid-template-rows:auto auto;
  column-gap:10px; row-gap:4px; align-items:center; margin-top:auto; padding-top:24px;
}
.notes .who{ grid-row:1; font-size:14px; line-height:1.2; color:#C8CEDE; font-weight:400 }
.notes .when{ grid-row:2; font-size:14px; line-height:1.2; color:#686C74 }

/* Swiper 컨테이너(데스크톱만 활성) */
.notes .swiper{ overflow:visible; position:relative }
.notes .swiper-wrapper{ align-items:stretch; padding:6px 0 0 0 } /* 패딩 1회만 */
.notes .swiper-slide{ height:auto }                                  /* 카드 높이 자동 */

/* 카드 전체 클릭 지원 */
.notes .tcard .card-link{ position:absolute; inset:0; z-index:10; text-indent:-9999px }

/* Section indicator */
.section-indicator{position:fixed;left:50px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;justify-content:center;gap:26px;z-index:5;pointer-events:auto;transition:opacity .18s ease,transform .18s ease}
.section-indicator.hidden{opacity:0;pointer-events:none;transform:translate(-6px,-50%)}
.section-indicator .dot{position:relative;width:24px;height:24px;border-radius:50%;border:2px solid #fff;background:transparent;cursor:pointer;padding:0;outline:none;transition:transform .18s ease,background-color .18s ease,border-color .18s ease}
.section-indicator .dot:focus-visible{outline:2px solid #70E0FF}
.section-indicator .dot::before{content:'';position:absolute;left:50%;top:-30px;width:2px;height:30px;background:#fff;opacity:.8;transform:translateX(-50%)}
.section-indicator .dot:first-child::before{display:none}
.section-indicator .dot.is-active{background:#fff}
.section-indicator .label{position:absolute;left:24px;top:50%;transform:translateY(-50%);color:#fff;font-size:16px;font-weight:400;padding:6px 10px;width:100px;line-height:1.2;border-radius:10px;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease}
.section-indicator .dot.is-active .label{opacity:1;transform:translate(4px,-50%)}
.section-indicator .dot:hover .label,.section-indicator .dot:focus-visible .label{opacity:1;transform:translate(4px,-50%)}

.header.is-opaque{background:rgba(7,12,24,.96)!important;backdrop-filter:saturate(1.2) blur(6px)}

#qna{ background-color:#060b18;}
#qna > .inner {background-image: url(/assets/app/img/main_qna_bg.png); background-repeat: no-repeat; background-size: cover; text-align: center; padding:80px 0 80px;}
#qna > .inner h2 { letter-spacing:-1px;}
#qna > .inner h2.line1 { font-size:64px; font-weight:200; line-height:1; }
#qna > .inner h2.line2 { font-size:64px; font-weight:700; line-height:1; margin-top:3px; }
#qna > .inner .exp { font-size:20px; margin:30px 0 29px 0; }
#qna > .inner .btn-area a { border:none; border-radius:24px; background-color:#1C64FF; color:#fff; padding:11px 60px; cursor:pointer; display:inline-block;}

footer{ background:#060b18; padding:120px 0; color:#6F778C; font-size:14px; border-top:none!important;}
footer .inner{ width: 100%; max-width:1184px; margin:0 auto; padding:0 16px }
footer .btn-wrap{ display:flex; flex-wrap:wrap; column-gap:8px; row-gap:8px; }
footer .btn-wrap a{ display:block; background:#1C64FF; border-radius:999px; padding:4px 16px; font-size:14px; color:#060B17 }
footer .company-info-wrap{ margin-top:32px }
footer .company-name{ font-size:16px; font-weight:700; color:#fff }
footer .company-info{ margin-top:6px; font-size:14px }
footer .separator{ display:inline-block; width:1px; height:11px; margin:-1px 2px; background:#6F778C }
footer .privacy-link{ margin-top:20px }
footer .privacy-link span:first-child a{ font-weight:700 }
footer .sns-link-wrap{ display:flex; margin-top:24px; column-gap:8px }
footer .sns-link-wrap li img{ width:40px }
._mob-view { display:none!important; }
._pc-view { display:block!important; }
._pc-view { display:block!important; }
._pc-view.inline-block { display:inline-block!important; }

@media (max-width: 1499px) {
  section .section-title { font-size:48px;}
  section .section-sub { font-size:18px; margin-bottom:32px;}
  .trend .container { padding:32px 0 60px;}
  #insights .container { width:984px;padding-top:96px;}
  #technote .container { width:984px;padding-top:24px;}
  .slide { width:984px; height:398px; padding:80px 64px;}
  .slide-text h4 { font-size:20px;}
  .slide-text h1 { font-size:48px;}
  .slide-text p { font-size:16px;}
  .slide-text .link-wrap {margin-top:38px;}
  .slide-image { bottom:-100px;}
  .slide-image img { width:460px;}
  .notes .swiper-slide { width:320px; min-width:320px;}
}
@media (max-width:1330px){
  .section-indicator {display:none;}
}
@media (max-width:768px){
  .hero .caption { bottom:96px;}
  .hero .lr { bottom:32px;}

  .icons { margin-left:0;}
  .header .bar { height:72px; gap:0;}
  .section-indicator{display:none}
  ._mob-view { display:block!important }
  ._mob-view.block{ display:block!important }
  ._mob-view.inline-block{ display:inline-block!important }
  ._pc-view { display:none!important; }
  ._pc-view.inline-block { display:none!important; }
  .sup{font-size:24px}
  .title{font-size:24px;}
  .desc{font-size:16px}
  .btn-arrow {width:32px;height:32px;}
  section .section-title { text-align:left; font-size:24px; padding:0 16px;}
  .container .section-sub { padding:0 16px;}
  .trend .container { padding: 0;}
  .trend .container .section-title { padding:0 32px;}
  .trend .container p { font-size: 16px; text-align:left; padding:0 32px; letter-spacing:-1px;}

  #trend .panel{ display:none; }
  .trend-mobile-swiper{
    display:block;
    margin-top:24px;
  }
  .trend-mobile-swiper .swiper-slide{
    width:100%;
    max-width: calc(100vw - 32px);
  }

  #insights .container  { padding: 0 16px;}
  #insights .container .section-sub { font-size:16px; margin-bottom:32px!important;}
  .notes .icard { padding:unset;}
  .notes .swiper-slide.icard, .notes .swiper-slide.tcard { width:100%!important; min-width:100%!important;}
  #insights .notes .solution-content .swiper {
    -webkit-mask-image: unset;
    mask-image: unset;
  }
  /* 노트: 세로 리스트 */
  .notes .tcard {
    border-radius: 24px;
    background-color: #fff;
    box-shadow:8px 8px 32px -10px rgba(0, 0, 0, 0.1);
    padding:24px 16px !important;
    color:#4F5254
  }
  .notes .tcard .who { color:#2C2E2F;}
  .notes .tcard .when { color:#98A1A7;}
  .notes .tcard .t-title{ font-size:18px; color:#2C2E2F; }
  .notes .tcard .t-excerpt{ color:#4F5254; }
  .notes .tcard{ padding:23px 0; }
  .notes .swiper::before,
  .notes .swiper::after{ display:none }
  .notes .swiper-slide{ width:100%; margin:0 0 24px 0 }
  .notes .swiper-slide:last-child { margin-bottom:0;}
  .notes .swiper-wrapper{ display:block; padding-bottom:0; } /* 세로로 쌓기 */
  .notes .swiper-slide:nth-child(n+6) { display:none; }
  .notes .badges{ display:flex; gap:8px; margin:0 0 24px -16px; }
  .notes .badge { border-radius:24px; border-top-left-radius:0; border-bottom-left-radius:0;}
  .notes .t-tags { margin-top:16px; display:flex; column-gap:8px; overflow-x:hidden; position:relative;width:calc(100vw - 64px);}
  .notes .t-tags .tag { background-color:#E4E4E4; color:#222; border-radius:8px; padding:5px 8px; flex-shrink:0; line-height:1.5; font-size:14px;}

  #technote .container  { padding: 0 16px;}
  #technote .container .section-sub { font-size:16px; margin-bottom:32px!important;}

  .trend {
    padding: 64px 0!important;
  }
  #insights,
  #technote {
    min-height: auto;
    padding: 64px 0!important;
  }
  #qna {
    height: auto;
  }
  #qna > .inner {
    height: unset;
    padding: 48px 0 48px;
  }
  #qna > .inner h2.line1 { font-size:28px;}
  #qna > .inner h2.line2 { font-size:28px;}
  #qna > .inner .exp { font-size:16px; padding: 0 40px;}
  footer { padding: 64px 0;}
}

.notes.inote .swiper-slide::after{ content:none; }
.notes.inote .icard{ position:relative; }
.notes.inote .icard .card-link{ position:absolute; inset:0; z-index:10; text-indent:-9999px; }
.notes.inote .icard .link a{ position:relative; z-index:11; } /* '자세히보기'는 위로 */

.more-btn-area {
  margin-top: 12px;
  text-align: right;
}
.more-btn {
  font-size:16px;
  font-weight:700;
}
/* 모바일 미디어 쿼리 */
@media (max-width: 768px) {
  .more-btn-area {
    margin-top: 56px;
    text-align: center;
  }
  .more-btn {
    padding: 11px 48px;
    border: 1px solid #fff;
    border-radius: 24px;
  }
}

/* swiper slide */
.swiper {
  opacity: 0;
  transition: opacity 0.25s ease;
}
.swiper.swiper-ready {
  opacity: 1;
}