@charset "UTF-8";

/* ========== NAV 3-DEPTH : Select형(PC/모바일 공통) ========== */
.mds-nav3{
  width:100%;
  background:var(--nav3-bg);
  user-select:none;
}

/* 셀렉트 레이아웃 (공통) */
.mds-nav3__mobile{
  display:none;
  gap:16px;
}
.mds-nav3__mobile select{
  width:100%;
  padding:0 20px;
  outline:none;
}

.mds-nav3__mobile .select-depth1-wrap select{
  border:none;
  height:60px;
  background:#EEF0F4;
  border-radius:8px;
  font-size:18px;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background:url('/assets/app/img/select-arrow-1.svg') no-repeat center right 24px #EEF0F4;
  padding-right:48px;
}
.mds-nav3__mobile .select-depth2-wrap select{
  border:2px solid #1C64FF;
  height:60px;
  border-radius:8px;
  font-size:16px;
  color:#1C64FF;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background:url('/assets/app/img/select-arrow-2.svg') no-repeat center right 24px;
  padding-right:48px;
}
.mds-nav3__mobile .select-depth3-wrap select{
  height:60px;
  background:#EEF0F4;
  border:none;
  border-radius:8px;
  font-size:14px;
  font-weight:700;
  color:#1C64FF;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background:url('/assets/app/img/select-arrow-3.svg') no-repeat center right 24px #EEF0F4;
  padding-right:48px;
}

.sr-only{
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* PC에서 data-desktop-selects="on" → 3단 그리드 */
.mds-nav3[data-desktop-selects="on"] .mds-nav3__mobile{
  display:grid !important;
  grid-template-columns:1fr 1fr 1fr;
  gap:16px;
  max-width:var(--nav3-max);
  margin:0 auto;
  padding-top:32px;
}

/* 모바일에서는 세로로 한 줄씩 */
@media (max-width:768px){
  .mds-nav3__mobile{
    display:grid !important;
    grid-template-columns:1fr;
    gap:16px;
    padding:0 16px;
  }
  .mds-nav3[data-desktop-selects="on"] .mds-nav3__mobile{
    grid-template-columns:1fr;
    padding:0 16px;
  }
}

/* 모바일 전용(NAV 3-DEPTH 셀렉트) */
.mds-nav3__mobile{ display:none; gap:16px }
.mds-nav3__mobile select{ width:100%; padding:0 20px; outline:none }
.mds-nav3__mobile .select-depth1-wrap select{
  border:none; height:60px; background:#EEF0F4; border-radius:8px; font-size:18px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background:url('/assets/app/img/select-arrow-1.svg') no-repeat center right 24px #EEF0F4;
  padding-right: 48px;
}
/* .mds-nav3__mobile .select-depth2-wrap{ padding:0 16px } */
.mds-nav3__mobile .select-depth2-wrap select{
  border:2px solid #1C64FF; height:60px; border-radius:8px; font-size:16px; color:#1C64FF;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background:url('/assets/app/img/select-arrow-2.svg') no-repeat center right 24px;
  padding-right: 48px;
}
/* .mds-nav3__mobile .select-depth3-wrap{ padding:0 16px } */
.mds-nav3__mobile .select-depth3-wrap select{
  height:60px; background:#EEF0F4; border:none; border-radius:8px; font-size:14px; font-weight:700; color:#1C64FF;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background:url('/assets/app/img/select-arrow-3.svg') no-repeat center right 24px #EEF0F4;
  padding-right: 48px;
}
.sr-only{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden }

.mds-nav3[data-desktop-selects="on"] .mds-nav3__mobile{
  display:grid !important;    /* 데스크톱에서도 셀렉트 노출 */
  grid-template-columns: 1fr 1fr 1fr;
  gap:16px;
  max-width: var(--nav3-max);
  margin: 0 auto;
  padding-top: 32px;
}
/* 셀렉트들의 높이/타이포를 데스크톱에서도 보기 좋게 약간 보정(선택)
.mds-nav3[data-desktop-selects="on"] .mds-nav3__mobile .select-depth1-wrap select{
  height: 56px;
  font-size: 18px;
}
.mds-nav3[data-desktop-selects="on"] .mds-nav3__mobile .select-depth2-wrap select{
  height: 56px;
  font-size: 16px;
}
.mds-nav3[data-desktop-selects="on"] .mds-nav3__mobile .select-depth3-wrap select{
  height: 48px;
  font-size: 14px;
  font-weight: 700;
}
*/
/* ===================== Custom Select (Depth별 스킨) ===================== */
/* 래퍼 */
.mds-select{ position:relative; width:100% }
.mds-select[aria-expanded="true"]{ z-index: 20 }

/* 토글 버튼(현재 선택값 표시) */
.mds-select__btn{
  width:100%; height:60px; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  border:0; outline:0; cursor:pointer;
  border-radius:8px; font-size:16px; font-weight:600;
}

/* 공통 아이콘(▼) */
.mds-select__caret{
  width:12px; height:12px; flex:0 0 11px;
  background-repeat:no-repeat; background-position:center; background-size:contain;
  transition: transform .18s ease;
  /*background-image:url('data:image/svg+xml;utf8,<svg width="18" height="18" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 8l5 5 5-5" stroke="%23666" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>'); */
  background-image: url('/assets/app/img/select-arrow-1.svg')!important;
}
.mds-select[aria-expanded="true"] .mds-select__caret{ transform:rotate(180deg) }
.select-depth2-wrap .mds-select__caret {
  /*background-image:url('data:image/svg+xml;utf8,<svg width="18" height="18" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 8l5 5 5-5" stroke="%23666" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>');*/
  background-image: url('/assets/app/img/select-arrow-2.svg')!important;
}
.select-depth3-wrap .mds-select__caret {
  /*background-image:url('data:image/svg+xml;utf8,<svg width="18" height="18" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 8l5 5 5-5" stroke="%23666" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>');*/
  background-image: url('/assets/app/img/select-arrow-3.svg')!important;
}

/* 옵션 리스트(아래로 펼침) */
/* DELETED
.mds-select__list{
  position:absolute; left:0; right:0;
  max-height:560px; overflow:auto; -webkit-overflow-scrolling:touch;
  display:none;
}
.mds-select[aria-expanded="true"] .mds-select__list{ display:block }
*/
/* 슬라이드 다운 + 페이드 (공통) */
.mds-select__list{
  position:absolute; left:0; right:0;
  /* 원래 있던 top/border/background 등은 그대로 유지됨 (depth별 규칙 아래쪽에 이미 있음) */
  overflow:auto; -webkit-overflow-scrolling:touch;

  /* 애니메이션 핵심 */
  max-height:0;            /* 닫힐 때 0 */
  opacity:0;               /* 닫힐 때 투명 */
  transform:translateY(-6px); /* 살짝 위에서 내려오게 */
  pointer-events:none;

  transition:
    max-height .24s ease,
    opacity .18s ease,
    transform .24s ease;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE/Edge 레거시 */
}
.mds-select__list::-webkit-scrollbar{
  width: 0; height: 0;            /* WebKit(Chrome/Safari) */
}
.mds-select.mds-select--industry .mds-select__list{
  scrollbar-width: auto;          /* Firefox: 기본 스크롤바 */
  -ms-overflow-style: auto;       /* IE/Edge 레거시 */
}
/* WebKit(Chrome/Safari)용 스크롤바 재활성화 */
.mds-select.mds-select--industry .mds-select__list::-webkit-scrollbar{
  width: 6px;
  height: 6px;
}
.mds-select.mds-select--industry .mds-select__list::-webkit-scrollbar-thumb{
  background: #CBD2E6;
  border-radius: 999px;
}
.mds-select.mds-select--industry .mds-select__list::-webkit-scrollbar-track{
  background: transparent;
}

/* 열렸을 때의 비주얼 상태(실제 높이는 JS에서 scrollHeight로 세팅) */
.mds-select[aria-expanded="true"] .mds-select__list{
  opacity:1;
  transform:none;
  pointer-events:auto;
}

/* 옵션 */
.mds-select__opt{
  height:60px; display:flex; align-items:center;
  padding:0 24px; font-size:16px; cursor:pointer;
  user-select:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mds-select__opt[aria-selected="true"]{ font-weight:700; }

/* ----------------- Depth 3 (디폴트 #EEF0F4, hover 파랑) ----------------- */
.mds-select[data-depth="3"] .mds-select__btn{
  background:#EEF0F4; color:#1C64FF; border:0;
}
.mds-select[data-depth="3"] .mds-select__list{
  background:#EEF0F4; border:1px solid #E4EAF5;
}
.mds-select[data-depth="3"] .mds-select__opt{
  background:transparent; color:#1C64FF;
}
.mds-select[data-depth="3"] .mds-select__opt:hover{
  background:#1C64FF; color:#fff;
}
.mds-select[data-depth="3"][aria-expanded=true] .mds-select__btn {
  border-bottom: 1px solid transparent;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.mds-select[data-depth="3"] .mds-select__list {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.mds-nav3__mobile-industry {
  max-width: var(--nav3-max);
  margin: 0 auto;
  padding-top: 32px;
}


/* 기술 노트 */
#industry .notes .technote-wrap{ position:relative; overflow-x:clip }             /* 페이드 기준 + 넘침 숨김 */
#industry .notes .grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px } /* 모바일에서만 사용됨(아래 media에서 1열로 변경) */
#industry .notes .tcard{
  position:relative; background:#fff; border:1px solid var(--note-line);
  border-radius:var(--note-radius); box-shadow:8px 8px 32px -10px #0000001A;
  padding:38px; min-height:220px; display:flex; flex-direction:column;
  transition:transform .18s ease;
}
#industry .notes .tcard:hover{ transform:translateY(-2px); background-color:#1C64FF; color:#fff; }
#industry .notes .tcard:hover .t-title{ color:#fff;}
#industry .notes .tcard:hover .t-excerpt{ color:#BFD3FF;}
#industry .notes .tcard:hover .badge{ background-color:#FFF;color:#1C64FF;}
#industry .notes .tcard:hover .who{ color:#FFF;}
#industry .notes .tcard:hover .when{ color:#FFF;}

#industry .notes .badges{ display:flex; gap:8px; margin-bottom:16px }
#industry .notes .badge{ display:inline-flex; align-items:center; height:32px; padding:0 20px; border-radius:3px; font-size:14px; background:#1C64FF; color:#fff; }
#industry .notes .tcard.video .badge{ background:#1DB75A;}
#industry .notes .tcard.video:hover .badge{ background-color:#FFF;color:#1DB75A;}
#industry .notes .t-title{ font-size:20px; line-height:1.45; color:var(--note-title); font-weight:700; letter-spacing:-.2px;
  display: -webkit-box;
  -webkit-box-orient: vertical; /* 텍스트 방향 */
  -webkit-line-clamp: 2; /* 최대 표시할 줄 수 */
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}
#industry .notes .video .player{ margin-top:24px;}
#industry .notes .t-excerpt{
  margin-top:18px; color:var(--note-body); font-size:16px; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  max-width:85vw;
}
#industry .notes .t-excerpt.no-tag{
  -webkit-line-clamp:5!important;
}
#industry .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;
}
#industry .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줄 레이아웃) */
#industry .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;
}
#industry .notes .who{ grid-row:1; font-size:14px; line-height:1.2; color:#0f172a; }
#industry .notes .when{ grid-row:2; font-size:14px; line-height:1.2; color:var(--note-meta) }

#industry .notes .video .meta{
  margin-top:16px;display:unset;grid-template-columns:unset;grid-template-rows:unset;
}

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

/* 좌/우 페이드(데스크톱에서만) */
#industry .notes .solution-content::before,
#industry .notes .solution-content::after{
  content:""; position:absolute; top:0; bottom:0; width:48px; z-index:6; pointer-events:none;
  background:linear-gradient(to right, var(--bg-sub, #fff), rgba(255,255,255,0));
}
#industry .notes .solution-content::before { width:0}
#industry .notes .solution-content::before{ left:0 }
#industry .notes .solution-content::after{ right:0; transform:scaleX(-1) }

#industry .notes .solution-content.no-data::before,
#industry .notes .solution-content.no-data::after{
  background:none;
}

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

#industry { padding-bottom:160px; word-break:keep-all;}
.content-motion-wrap {
  width:100%; max-width:1184px; color:#fff; margin:0 auto;
}
.content-motion-wrap.solution-wrap {
  margin-top:160px;
}
.mds-nav3.reveal {
  transform:none;
}
/* === Top Banner === */
.top-visual {
  width:100%; height:618px;
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 32px;
}
.top-visual .inner {
  position: absolute;
  bottom: 64px;
  padding:0 48px;
}
.top-visual .inner .title {
  font-size: 64px;
  font-weight: 700;
  letter-spacing: -.5px;
  line-height: 1;
}
.top-visual .inner .desc {
  margin-top: 24px;
  font-size: 24px;
  line-height: 1.55;
}
.summary-cont {
  background-color:#222;
  color:#ABABAB;
  padding:48px;
  font-size:20px;
  line-height: 1.55;
}
/* === Info Box === */
.info-boxes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap:32px;
  margin-top:64px;
}
.info-box {
  background-color:#534F4C;
  padding:40px;
}
.info-box__title {
  font-size:24px;
  font-weight:700;
}
.info-box__desc {
  margin-top:36px;
  font-size:16px;
  line-height: 1.55;
}
/* === 공통 === */
.section-title {
  font-size:48px;
  font-weight:700;
  line-height: 1.6;
  letter-spacing: -1px;
  color:#222;
}
.section-title .ind-name {
  color:#1C64FF;
}
.solution-wrap .section-title {
  font-size:48px!important;
}
/* === Utilization Plan ===*/
.utilization-plan {
  margin-top: 120px;
  color:#222;
}
.plan-info-wrap {
  margin-top:42px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap:32px;
}
.plan-info {
  background-color:#E5E9F3;
  padding:40px;
}
.plan-info__label {
  display: inline-block;
  color: #1C64FF;
  font-size: 20px;
  font-weight: 700;
}
.plan-info__title {
  margin-top:8px;
  font-size:32px;
  font-weight:700;
  line-height: 1.3;
  letter-spacing:-1px;
  word-spacing:-2px;
}
.plan-info__desc {
  margin-top:32px;
  font-size:16px;
  line-height: 1.55;
}
.plan-result {
  margin-top:24px;
}
.plan-result .icon {
  width:16px; height:14px;
  display: inline-block;
  background-image: url('/assets/app/img/industry/industry-result-icon.svg');
  background-size: cover;
  display:flex;
  justify-self: center;
}
.plan-result .text {
  margin-top:24px;
  font-size:16px;
  font-weight:700;
}
/* === Tech Note ===*/
.technotes {
  margin-top: 120px;
}
/* === Inquiry ===*/
.content-motion-wrap .btn-wrap {
  margin-top:120px;
  text-align: center;
}
.content-motion-wrap .btn-wrap button, .content-motion-wrap .btn-wrap a {
  display: inline-block;
  background-color:#1C64FF;
  color:#fff;
  font-size:18px;
  font-weight:700;
  padding:16px 40px;
  border-radius:30px;
}
/* === Solutions ===*/
.solutions {
  margin-top:48px;
}
.solution-info-wrap {
  display: grid;
  margin-top:48px;
  grid-template-columns: repeat(2, 1fr);
  gap:40px;
}
.solution-info {
  width:100%;
  max-width:572px;
  height:631px;
  position: relative;
}
.info-overlay {
  position: absolute;
  width:100%;
  height:309px;
  backdrop-filter: blur(3px);
  bottom: 0;
  padding:40px;
  border-top:2px solid #fff3;
  box-sizing: border-box;
}
.solution-info__label {
  font-size: 24px;
  font-weight: 700;
}
.solution-info__title {
  font-size:40px;
  font-weight:700;
  line-height: 1.3;
  letter-spacing:-1px;
  word-spacing:-2px;
  display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:1;text-overflow:ellipsis;
}
.solution-info__desc {
  margin-top:8px;
  font-size:20px;
  line-height: 1.55;
  height:60px;
  display:flex;
  align-items:center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.solution-btn-wrap {
  margin-top:16px;
  display:flex;
}
.solution-btn {
  background-color: #1C64FF;
  border: 2px solid #fff;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  padding: 5px 44px 0 24px;
  border-radius: 30px;
  background-image: url('/assets/app/img/industry/btn-solution-arrow.svg');
  background-repeat: no-repeat;
  background-position: right 22px center;
  display: flex;
  height: 44px;
}

@media (max-width: 768px) {
  .mds-nav3 { display:none!important;}
  #industry { padding-bottom:64px;}
  .content-section .hero { display:none;}
  .mds-nav3__mobile-industry { padding-top:0;}
  .mds-select__btn { border-radius:0;}
  .top-visual { margin-top:0;}
  .top-visual .inner { bottom:32px;padding:0 24px;}
  .top-visual .inner .title { font-size:48px;}
  .top-visual .inner .desc { font-size:18px;}
  .summary-cont { font-size:16px; padding:24px;}
  .info-boxes { grid-template-columns: 1fr; margin-top:32px; padding:0 16px;}
  .info-box { padding:32px;}
  .plan-info-wrap { grid-template-columns: 1fr; margin-top:32px;}
  .content-section h2.section-title { font-size:26px;}
  .solution-wrap .section-title { font-size:32px!important; }
  .utilization-plan { margin-top:64px; padding: 0 16px; }
  .plan-info { padding:32px;}
  .plan-info__title { font-size:28px; }
  .technotes{ margin-top:64px; padding: 0 16px; }
  .content-motion-wrap .btn-wrap{margin-top:64px;}
  .content-motion-wrap.solution-wrap { margin-top:64px; padding: 0 16px; }
  .solution-info-wrap { margin-top:32px; grid-template-columns: 1fr; gap:24px; }
  .info-overlay { padding:32px;}
  .solution-info__label { font-size:20px;}
  .solution-info__title { font-size:30px;}
  .solution-info__desc { font-size:18px;}
  .solution-btn-wrap { margin-top:36px;}

  /* 노트: 세로 리스트 */
  #industry .notes .t-title{ font-size:18px }
  #industry .notes .tcard{ padding:23px 16px }
  #industry .notes .swiper::before,
  #industry .notes .swiper::after{ display:none }
  #industry .notes .swiper-slide{ width:100%; margin:0 0 16px 0 }
  #industry .notes .swiper-wrapper{ display:block } /* 세로로 쌓기 */
  #industry .notes .solution-content::before,
  #industry .notes .solution-content::after{ display:none } /* 페이드 숨김 */
  #industry .notes .badges{ display:flex; gap:8px; margin:0 0 24px -16px; }
  #industry .notes .badge { border-radius:24px; border-top-left-radius:0; border-bottom-left-radius:0;}
  #industry .notes .t-tags { margin-top:16px; display:flex; column-gap:8px; overflow-x:hidden; position:relative;}
  #industry .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;}
  #industry .notes .swiper-slide {
    width:100%;margin:0 0 16px 0;
    padding:23px 16px;
  }
}