@charset "UTF-8";

/* =========================================================================
   다우오피스 Works 전용 랜딩 페이지 (enterprise_works.jsp)
   -------------------------------------------------------------------------
   로드 순서 : reset.css → common_new.css → 2025_content.css → enterprise_works.css
   스코프    : .content.function.works

   ※ 아이콘 SVG / 섹션 이미지는 마크업에서 경로를 주입하므로 이 파일에는
     이미지 URL 이 없다. 이미지 폴더는
     /images/main_new/2025/function/enterprise_works/ (섹션·아이콘)
     /images/case2/ (고객사례 썸네일·로고) 를 쓴다.

   ※ 아래는 공통 CSS(2025_content.css / common_new.css)에 이미 있으므로
     이 파일에서 다시 선언하지 않는다.
     - h1~h3 / span.sub / p.point / p.desc / p.tit / .highlight 기본 폰트
     - .function .content_head, .content_foot, .btn_wrap, .btn_general, .btn_ghost,
       .ic_check, .ic_down
     - .function .area_customer 고객사 마퀴(+ marqueeToLeft 애니메이션)
       ※ 고객사례(.area_review) 마퀴는 이동량이 달라 12번 블록에서 전용
         키프레임(wkMarqueeReview)을 따로 선언한다.
     - .function .area_function (padding·inner 1200 ·title_wrap·title·p.label.core)
     - .function .title_wrap .tab_default .tablink (밑줄형 탭)
     - .function .area_function .tab_content .tablink (패널 show/hide)
     - .function .area_review, .area_faq, .box_qna
     - @media(max-width:999px) : h1~h3 clamp, .inner padding:0,
       .content_head|.content_foot padding-inline:6%,
       .function .content_body > div[class^="area_"] padding-inline:6%,
       .tab_default 가로 스크롤 + .tab_arrow, 마퀴 리사이징
     - @media(max-width:959px) : .btn_wrap 세로 정렬 / 버튼 100%
   → 신규 섹션(.area_pain, .step, .card_list, .stat_card 등), Works 고유 토큰,
     그리고 시안과 값이 다른 부분만 정의한다.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. 토큰
   ------------------------------------------------------------------------- */
.works {
  --wk-line: #DDE3EC;          /* 박스 외곽선 */
  --wk-card-line: #CED7E2;     /* 카드 하단 외곽선 */
  --wk-panel: #F3F8FB;         /* 탭 패널 / 연회색 섹션 */
  --wk-accent: #00B1CC;        /* 세로탭 활성 */
  --wk-accent-bg: #F2FCFE;
  --wk-pain: #E06898;          /* 불편점 강조 */
  --wk-dim: rgba(51, 51, 51, .4);
  --wk-step: #8493FF;          /* 스텝 진행바 */
  --wk-step-soft: #EAEFFF;
  --wk-step-num: #97B1FF;
  --wk-step-track: #ECF1F3;
  --wk-grad: linear-gradient(90deg, #1ED2FF, #7227FF);
  --wk-btn-grad: linear-gradient(66deg, #4CF1FF 12%, #0D99FF 32%, #B694FF 100%);
}


/* -------------------------------------------------------------------------
   2. 폰트 (태그 단위 공통 — 공통 CSS와 값이 다른 것만)
      clamp() 의 곡선은 공통 CSS(@media 999px) 와 동일하게 두고 최대값만
      시안 값으로 올려, 폰트용 반응형 미디어쿼리를 추가하지 않는다.
      자간은 px 대신 em 으로 두어 크기와 함께 줄어들게 한다.
   ------------------------------------------------------------------------- */
.works h1 {font-size: clamp(30px, calc(-4.08px + 7.1vw), 54px); letter-spacing: -.05em;}
.works h2 {font-size: clamp(28px, calc(7.96px + 4.17vw), 48px); letter-spacing: -.03em;}
.works h3 {font-size: clamp(20px, calc(8px + 1.5vw), 26px); line-height: 123%; letter-spacing: -.04em;}
.works h4 {font-size: clamp(17px, calc(11px + .75vw), 20px); font-weight: 600; line-height: 150%; letter-spacing: -.04em; color: #191919;}
.works .content_head span.sub {font-size: clamp(20px, calc(8px + 2vw), 32px); letter-spacing: -.04em;}
.works .highlight {background-image: var(--wk-grad);}

/* 섹션 설명문(시안 20px/#888). 카드 안의 p.desc 는 공통값(18px/#6B6B6B) 그대로 사용 */
.works .content_head .title_wrap p.desc,
.works .title_wrap .title p.desc {font-size: clamp(15px, calc(11px + .75vw), 20px); line-height: 150%; letter-spacing: -.02em; color: #888;}
/* 태그(p.label.core)는 공통 색상 그대로 쓰고 굵기만 보정 */
.works .title_wrap .title p.label {font-weight: 500;}


/* -------------------------------------------------------------------------
   3. 히어로
   ------------------------------------------------------------------------- */
.works .content_head {padding: 120px 0 0;}
.works .content_head .main_title {display: flex; flex-direction: column; align-items: center; gap: 2px;}
.works .content_head .btn_wrap {margin: 32px 0 0 !important; gap: 10px;}

/* 시안 버튼 : 그라데이션 필 / 민트 라인 필 */
.works .content_head .btn_wrap .btn_general,
.works .content_head .btn_wrap .btn_ghost {padding: 0 28px; border-radius: 42px; font-size: 20px; font-weight: 600; letter-spacing: -.04em;}
.works .content_head .btn_wrap .btn_general {background-color: transparent; background-image: var(--wk-btn-grad);}
.works .content_head .btn_wrap .btn_general:hover {background-color: transparent; filter: brightness(1.07);}
.works .content_head .btn_wrap .btn_ghost {border: 1.5px solid #4CF1FF; line-height: 57px; background: #fff; color: #5FAEFF;}
.works .content_head .btn_wrap .btn_ghost:hover {background: #F4FEFF;}

/* 비주얼 : 1920×791 단일 이미지.
   1200px 제약은 .content_head 에서 오므로, 마크업에서 이미지를 그 바깥
   (.content 직계)으로 빼두었다. vw·음수마진 같은 우회 없이 전체 너비가 된다. */
.works > .hero_visual {width: 100%; max-width: 1920px; margin: 80px auto 0;}
.works > .hero_visual img {display: block; width: 100%; height: auto;}


/* -------------------------------------------------------------------------
   4. 아이콘
      파일 경로는 마크업의 인라인 커스텀 속성으로 주입한다.
        <span class="ic_works m"
              style="--ic:url(/images/main_new/2025/function/enterprise_works/ic/ic-3.svg);
                     --ic-on:url(/images/main_new/2025/function/enterprise_works/ic/ic-3_on.svg)"></span>
      <img> 가 아니라 background-image 이므로 CSS 만으로 활성/비활성 교체가 된다.
      --ic-on 이 없는 아이콘(불편점)은 상태 없이 기본 파일만 계속 쓴다.
   ------------------------------------------------------------------------- */
.works .ic_works {display: inline-block; flex: none; background: var(--ic) no-repeat center; background-size: contain;}
.works .ic_works.s {width: 16px; height: 16px;}
.works .ic_works.m {width: 20px; height: 20px;}
.works .ic_works.l {width: 24px; height: 24px;}
.works .ic_works.xl {width: 28px; height: 28px;}

/* 활성 상태 → _on 아이콘. JS 가 이미 .active 를 토글하므로 스크립트 수정 불필요 */
.works .tab_box .tab_default .tablink.active .ic_works,          /* 업종별 양식 세로탭 */
.works .area_function .tab_default.pill .tablink.active .ic_works, /* 데이터 관리 필탭 */
.works .step_nav .step_item.active .ic_works {                    /* 양식 제작 스텝 */
  background-image: var(--ic-on);
}


/* -------------------------------------------------------------------------
   5. 불편점 (.area_pain)
   ------------------------------------------------------------------------- */
.works .area_pain {padding: 100px 0;}
.works .area_pain .inner {display: flex; flex-direction: column; gap: 32px; max-width: 1200px;}
.works .area_pain .pain_head {display: flex; flex-direction: column; gap: 24px;}
.works .area_pain .pain_title {display: flex; flex-direction: column; gap: 16px;}
.works .area_pain .pain_thumb {overflow: hidden; width: 120px; height: 120px; border: 1px solid #F6F6F6; border-radius: 50%; background: #F9E6EE;}
.works .area_pain h2 {line-height: 130%;}
.works .area_pain h2 .dim {color: var(--wk-dim);}
.works .area_pain .tag_list {display: flex; flex-wrap: wrap; gap: 6px;}
.works .area_pain .tag_list span {display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 8px; background: #A3A3A3; color: #fff; font-size: 18px; font-weight: 500; letter-spacing: -.02em;}
/* 태그 안 아이콘은 회색 배지 위 흰색으로 보여야 한다.
   ic-2.svg 자체 색(진회색/검정)에 의존하면 배지에 묻혀 안 보이므로,
   background-image 대신 mask 로 실루엣만 따고 색은 CSS 로 흰색을 칠한다. */
.works .area_pain .tag_list .ic_works {background-image: none; background-color: #fff;
  -webkit-mask: var(--ic) no-repeat center; -webkit-mask-size: contain;
          mask: var(--ic) no-repeat center;         mask-size: contain;}
.works .area_pain .pain_desc {display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;}
.works .area_pain .pain_desc p {font-size: clamp(15px, calc(11px + .75vw), 20px); line-height: 150%; letter-spacing: -.02em; color: rgba(0, 0, 0, .4);}
.works .area_pain .pain_desc em {display: inline-flex; align-items: center; gap: 2px; font-style: normal; font-weight: 500; color: var(--wk-pain); vertical-align: middle; padding: 0 2px 4px 0;}


/* -------------------------------------------------------------------------
   6. 섹션 헤더 공통 보정 (.area_function 재사용)
   ------------------------------------------------------------------------- */
.works .area_function .title_wrap .title {gap: 12px; margin-bottom: 0;}
.works .area_function .title_wrap .tab_wrapper {margin-top: 24px;}
/* 탭 패널 이미지는 시안대로 테두리/라운드 없음 */
.works .area_function .tab_content .tablink .box_thumb img {border: 0; border-radius: 0;}


/* -------------------------------------------------------------------------
   7. 업무 시스템 완성 3카드 (.area_function.complete)
   ------------------------------------------------------------------------- */
.works .area_function.complete {background: linear-gradient(180deg, #FFF 48%, var(--wk-panel) 86%);}
.works .card_list {display: flex; align-items: stretch; gap: 24px;}
.works .card_list .card {display: flex; flex: 1 1 0; flex-direction: column; min-width: 0;}
.works .card_list .card_thumb {overflow: hidden; min-height: 200px; border-radius: 24px 24px 0 0; background: #D6E9F5;}
.works .card_list .card_thumb img {width: 100%;}
.works .card_list .card_cont {display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 200px; padding: 24px; border: 1px solid var(--wk-card-line); border-top: 0; border-radius: 0 0 24px 24px; background: #fff; text-align: center;}


/* -------------------------------------------------------------------------
   8. 업종별 활용 현황 (.area_function.industry)
   ------------------------------------------------------------------------- */
.works .area_function.industry {background: var(--wk-panel);}
.works .area_function.industry .inner {display: flex; align-items: flex-start; gap: 100px;}
.works .area_function.industry .title_wrap {flex: 0 0 auto; margin: 0;}
.works .area_function.industry .title_wrap .title {gap: 19px;}
.works .area_function.industry .cont_wrap {display: flex; flex: 1 1 0; flex-direction: column; gap: 8px; min-width: 0;}
.works .area_function.industry .note {font-size: 14px; line-height: 150%; letter-spacing: -.02em; color: #888; text-align: right;}
.works .area_function.industry .stat_diagram {min-height: 216px;}  /* 반응형에서는 0 으로 해제 (아래 미디어쿼리) */
.works .area_function.industry .stat_row {display: flex; gap: 12px;}
.works .area_function.industry .stat_row .stat_card {flex: 1 1 0; flex-direction: column; gap: 32px; min-width: 0;}

.works .stat_card {display: flex; align-items: flex-start; justify-content: space-between; padding: 32px; border-radius: 20px; background: #fff;}
.works .stat_card .cat {display: flex; align-items: center; gap: 8px; padding-top: 4px;}
.works .stat_card .cat::before {content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(90deg, #32D2F3, #56E3A0);}
.works .stat_card h4 {font-size: 18px; line-height: 140%; letter-spacing: -.03em; color: #333;}
.works .stat_card .num {display: flex; align-items: flex-end; gap: 4px; margin-bottom: 6px;}
.works .stat_card .num strong {font-size: 28px; font-weight: 600; line-height: 140%; letter-spacing: -.03em; color: #333;}
.works .stat_card .num span {padding-bottom: 6px; font-size: 16px; line-height: 140%; letter-spacing: -.03em; color: #333;}
.works .stat_card .cap {font-size: 14px; line-height: 140%; letter-spacing: -.03em; color: #888;}


/* -------------------------------------------------------------------------
   9. 업종별 양식 (.area_function.forms) — 좌측 세로탭 + 우측 패널 1박스
   ------------------------------------------------------------------------- */
.works .area_function.forms .title_wrap {margin-bottom: 48px;}
.works .tab_box {display: flex; align-items: stretch; overflow: hidden; border: 1px solid var(--wk-line); border-radius: 24px; background: #fff;}
.works .tab_box .tab_default {display: flex; flex: 0 0 330px; flex-direction: column; gap: 4px; width: 330px; margin: 0; padding: 32px; border-right: 1px solid var(--wk-line);}
.works .tab_box .tab_default .tablink {display: flex; align-items: center; gap: 4px; margin: 0; padding: 10px 20px; border: 0; border-radius: 8px; font-size: 18px; font-weight: 500; line-height: 135%; letter-spacing: -.02em; color: #131313; text-align: left; white-space: nowrap; transition: background-color .2s, color .2s;}
.works .tab_box .tab_default .tablink:hover {border: 0; background: #F7F7F7; color: #131313;}
.works .tab_box .tab_default .tablink.active {border: 0; background: var(--wk-accent-bg); color: var(--wk-accent);}
.works .tab_box .tab_content {flex: 1 1 0; min-width: 0; background: var(--wk-panel);}
.works .tab_box .tab_content .tablink img {width: 100%;}


/* -------------------------------------------------------------------------
   10. 양식 제작 스텝 (.area_function.step)
       - 섹션 스크롤 진입 시 Step 01 → 04 자동 진행 (진행바 채워짐)
       - 원형 아이콘 클릭 시 해당 스텝으로 이동 (+ hover 효과)
   ------------------------------------------------------------------------- */
.works .area_function.step .title_wrap {margin-bottom: 64px;}

/* hidden 이면 .step_ic 의 hover/active 글로우(box-shadow)와 translateY 가
   좌우·상단에서 잘린다. 그렇다고 visible 로 두면 모바일에서 넘친 폭이
   그대로 문서 폭을 늘려 우측 여백이 생긴다.
   → overflow:clip + clip-margin 으로 "글로우는 보이되 넘침은 차단". */
.works .step_nav {overflow: visible; margin-bottom: 56px;}
@supports (overflow: clip) {
  .works .step_nav {overflow: clip; overflow-clip-margin: 24px;}
}
.works .step_nav .step_inner {position: relative; display: flex; justify-content: space-between;}
.works .step_nav .step_inner::before {content: ''; position: absolute; top: 59px; left: 0; width: 100%; height: 8px; border-radius: 24px; background: var(--wk-step-track);}
.works .step_nav .step_bar {position: absolute; top: 59px; left: 0; width: 0; height: 8px; border-radius: 24px; background: var(--wk-step); transition: width .6s ease;}
.works .step_nav .step_item {position: relative; z-index: 1; display: flex; flex: 0 0 200px; flex-direction: column; gap: 28px; width: 200px; padding: 0; background: none; text-align: left;}
.works .step_nav .step_ic {display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: #F3F4F4; transition: background-color .3s, transform .2s, box-shadow .2s;}
.works .step_nav .step_txt {display: flex; flex-direction: column;}
.works .step_nav .num {font-size: 14px; font-weight: 600; line-height: 150%; letter-spacing: -.04em; color: #96A5AD; transition: color .3s;}
.works .step_nav .step_item h4 {color: #808080; transition: color .3s;}
.works .step_nav .step_item:hover .step_ic {transform: translateY(-3px); box-shadow: 0 8px 18px rgba(132, 147, 255, .28);}
.works .step_nav .step_item:hover .num,
.works .step_nav .step_item:hover h4 {color: var(--wk-step);}
.works .step_nav .step_item.active .step_ic {background: var(--wk-step-soft);}
.works .step_nav .step_item.active .num {color: var(--wk-step-num);}
.works .step_nav .step_item.active h4 {color: #191919;}

.works .step_panel .panel {display: none;}
.works .step_panel .panel.active {display: block;}
.works .step_panel .panel img {width: 100%;}


/* -------------------------------------------------------------------------
   11. 데이터 관리 (.area_function.dataview) — 좌측 텍스트+필탭 / 우측 이미지
   ------------------------------------------------------------------------- */
.works .area_function.dataview .inner {display: flex; align-items: flex-start; gap: 96px;}
/* 텍스트 컬럼 426 → 470px.
   탭 전환 시 h2 가 2줄/3줄을 오가면 아래 필탭이 위아래로 튄다.
   426px 에서는 "업무 일정과 진행 상황을" 한 줄이 정확히 426px 라 넘쳐서
   3줄이 됐다. 44px 여유를 줘서 4개 타이틀이 모두 2줄로 고정된다.
   (이미지 쪽 tab_content 는 flex:1 이라 그만큼만 줄어든다) */
.works .area_function.dataview .title_wrap {flex: 0 0 470px; width: 470px; margin: 0;}
.works .area_function.dataview .title_wrap h2 {word-break: keep-all;}
/* 혹시 1줄짜리 타이틀이 생겨도 필탭 위치가 흔들리지 않게 2줄 높이를 확보.
   1000px 이상(좌우 2단)에서만 필요하다. 1단으로 접히는 반응형에서는
   타이틀 줄 수가 어차피 달라지는데 2줄 높이가 강제되면 빈 여백만 생긴다. */
@media (min-width: 1000px) {
  @supports (height: 2lh) {
    .works .area_function.dataview .title_wrap h2 {min-height: 2lh;}
  }
}
.works .area_function.dataview .tab_content {flex: 1 1 0; min-width: 0;}
.works .area_function .tab_default.pill {gap: 4px; margin: 32px 0 0;}
/* active 에 1.5px 테두리가 붙으므로, 기본 상태도 같은 두께의 투명 테두리를
   갖고 있어야 탭을 옮길 때 폭·높이가 3px 씩 튀지 않는다. */
.works .area_function .tab_default.pill .tablink {display: flex; align-items: center; gap: 4px; margin: 0; padding: 6px 12px; border: 1.5px solid transparent; border-radius: 8px; font-size: 16px; font-weight: 500; line-height: 135%; letter-spacing: -.02em; color: #A3A3A3; white-space: nowrap; transition: background-color .2s, border-color .2s, color .2s;}
.works .area_function .tab_default.pill .tablink:hover {border-color: transparent; background: #FAFAFA; color: #131313;}
.works .area_function .tab_default.pill .tablink.active {border: 1.5px solid #171717; background: #fff; color: #131313;}


/* -------------------------------------------------------------------------
   12. 고객 사례 (.area_review)
       카드 UI = case.jsp 의 고객사례 카드(썸네일 / 로고 / 회사명 / 인용문 / 태그)
       모션    = index.jsp 고객사례 영역과 동일한 좌측 무한 롤링(전용 키프레임)
       ※ enterprise_works.jsp 는 case.jsp 전용 CSS 를 로드하지 않으므로 카드 스타일을
         이 블록에 자체 포팅한다. 이 블록만 지우면 카드 스타일이 전부 빠진다.
   ------------------------------------------------------------------------- */
.works .area_review {background-color: #F1F2F4;}
.works .area_review .inner {max-width: none; width: 100%;}
.works .area_review .title_wrap {width: 100%; max-width: 1200px; margin: 0 auto 40px;}
.works .area_review .title_wrap .title {display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin: 0;}
/* 라벨 태그
   공통 CSS 의 p.label.core 는 .function .area_function 안에서만 잡혀 있어서
   .area_review 에서는 적용되지 않는다. 다른 섹션(양식 제작 / 데이터 관리 등)과
   같은 모양이 되도록 여기서 동일 값으로 포팅한다.
   ※ 색·크기가 미세하게 어긋나면 2025_content.css 의 .label.core 값을 그대로 복사할 것. */
.works .area_review .title_wrap .title p.label.core {display: inline-flex; align-items: center; height: 36px; margin: 0; padding: 0 14px; border-radius: 8px; background: #E4F4FB; color: #00C3E0; font-size: 18px; font-weight: 500; line-height: 1; letter-spacing: -.04em;}
.works .area_review img {width: auto; height: auto;}

/* 무한 롤링
   ------------------------------------------------------------------
   ① 공통 CSS 의 marqueeToLeft 를 쓰지 않고 전용 키프레임을 선언한다.
      공통 키프레임은 고객사 로고 마퀴(.area_customer)의 세트 폭에 맞춰져
      있어서, 카드 폭이 다른 고객사례에 그대로 쓰면 이동량이 맞지 않는다.
   ② 카드 사이 간격을 gap 이 아니라 카드의 margin-right 로 준다.
      gap 을 쓰면 전체 폭 = 24카드 + 23간격 이라 -50% 지점이 13번째 카드
      시작점과 간격 1/2(18px)만큼 어긋나 한 바퀴마다 툭 튄다.
      margin-right 로 주면 전체 폭 = 24 × (카드+간격) 이라 정확히 맞는다.
   ③ 공통 CSS 의 .box_cont / .area_review 규칙에 덮이지 않도록
      자식 결합자(>)로 명시도를 한 단계 올려둔다. --------------------- */
@keyframes wkMarqueeReview {
  from {transform: translate3d(0, 0, 0);}
  to   {transform: translate3d(-50%, 0, 0);}
}
.works .area_review .cont_wrap > .marquee_container {display: block; overflow: hidden; width: 100%;}
.works .area_review .marquee_container > .marquee_inner {display: flex; flex-wrap: nowrap; gap: 0; width: max-content; will-change: transform; animation: wkMarqueeReview 60s linear infinite;}
.works .area_review .marquee_container:hover > .marquee_inner {animation-play-state: paused;}
/* 카드 (case.jsp 고객사례 카드 UI) */
.works .area_review .case_card {flex: 0 0 380px; width: 380px; margin-right: 36px;}
.works .area_review .case_card a {display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid #E6E9EE; border-radius: 20px; background: #fff; transition: transform .25s ease, box-shadow .25s ease;}
.works .area_review .case_card a:hover {transform: translateY(-4px); box-shadow: 0 12px 28px rgba(23, 34, 51, .1);}
.works .area_review .case_card .img {flex: none; overflow: hidden; height: 200px; background: #E6E9EE;}
.works .area_review .case_card .img img {width: 100%; height: 100%; object-fit: cover;}
.works .area_review .case_card .area {display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex: 1 1 auto; padding: 24px;}
.works .area_review .case_card .logo {display: flex; align-items: center; height: 24px;}
.works .area_review .case_card .logo img {width: auto; max-width: 140px; height: 100%; object-fit: contain; object-position: left center;}
.works .area_review .case_card .name {font-size: 18px; font-weight: 600; line-height: 140%; letter-spacing: -.04em; color: #191919;}
/* 인용문 3줄 고정 → 카드 높이가 들쭉날쭉해지지 않게 한다 */
.works .area_review .case_card p.desc {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 0; min-height: calc(16px * 1.5 * 3); font-size: 16px; line-height: 150%; letter-spacing: -.02em; color: #6B6B6B;}
.works .area_review .case_card .tag_list {display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px;}
.works .area_review .case_card .tag_list span {display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 6px; background: #F1F4F8; color: #8A93A0; font-size: 13px; font-weight: 500; letter-spacing: -.02em;}


/* -------------------------------------------------------------------------
   13. 하단 CTA (.content_foot)
       index.jsp 하단 CTA 와 동일하게 보이도록, Works 전용 오버라이드를
       모두 걷어내고 공통 CSS(2025_content.css)의 .function .content_foot 를
       그대로 상속받는다. 문구만 Works 용으로 교체(마크업 참조).
         span.sub  : 그룹웨어를 넘어
         h2.center : 우리 회사만의 업무 플랫폼으로
       ※ 상단 히어로 버튼(.content_head .btn_wrap)의 그라데이션 스타일은
         2번/3번 블록에 그대로 남아 있으므로 영향받지 않는다.
       ※ 예전 Works 전용 스타일(보라~하늘 그라데이션 배경, 64px h2, 검정 버튼)이
         필요해지면 아래 주석 블록을 되살리면 된다.
   -------------------------------------------------------------------------
   .works .content_foot {padding: 160px 0; background: linear-gradient(258deg, #EEE0FF 6%, #D0EBFF 65%, #E8F6FF 100%); color: #333;}
   .works .content_foot span.sub {font-size: clamp(22px, 4vw, 48px); font-weight: 300; line-height: 140%; letter-spacing: -.04em; color: #333;}
   .works .content_foot h2 {font-size: clamp(28px, calc(-4px + 5.67vw), 64px); letter-spacing: -.04em; color: #333;}
   .works .content_foot .btn_wrap .btn_general {background: #262626;}
   .works .content_foot .btn_wrap .btn_general:hover {background: #3D3D3D;}
   .works .content_foot .btn_wrap .btn_ghost {border: 1.5px solid #7CF5FF; line-height: 57px; background: #fff; color: #5FAEFF;}
   .works .content_foot .btn_wrap .btn_ghost:hover {background: #F4FEFF;}
   ------------------------------------------------------------------------- */
/* sub / h2 2줄 구성만 유지 (index 와 동일한 세로 정렬) */
.works .content_foot .main_title {display: flex; flex-direction: column; align-items: center; gap: 2px;}


/* =========================================================================
   반응형 — 폰트는 위 clamp() 로 처리되므로 아래는 레이아웃 전환만 담당
   ========================================================================= */

/* 1000~1279px : 공통 CSS 의 6% 패딩(≤999px)이 붙기 전 구간 좌우 여백 확보 */
@media (min-width: 1000px) and (max-width: 1279px) {
  .works .content_head,
  .works .content_foot,
  .works .content_body > div[class^="area_"] {padding-inline: 40px;}
  .works .area_function.industry .inner,
  .works .area_function.dataview .inner {gap: 56px;}
}

/* ~999px */
@media (max-width: 999px) {
  .works > .hero_visual {margin-top: 48px;}

  .works .area_pain .inner {gap: 24px;}
  .works .area_pain .pain_thumb {width: 88px; height: 88px;}

  /* 업종별 활용 현황 : 1단 */
  .works .area_function.industry .inner {flex-direction: column; gap: 40px;}
  .works .area_function.industry .title_wrap,
  .works .area_function.industry .cont_wrap {width: 100%;}

  /* 공통 title_wrap 정렬 (섹션 공통) */
  .works .area_function .title_wrap {align-items: flex-start; margin-bottom: 24px; padding: 0;}

  /* 업종별 양식 : 세로탭 → 상단 가로 탭. 스크롤 대신 줄바꿈으로 전부 노출한다.
     공통 .tab_default 의 가로 스크롤(overflow-x:auto / nowrap)과 화살표를 끈다. */
  .works .area_function.forms .title_wrap {margin-bottom: 24px;}
  .works .tab_box {flex-direction: column;}
  .works .tab_box .tab_default {flex: none; flex-wrap: wrap; overflow: visible; gap: 6px; width: 100%; min-width: 0; padding: 16px; border-right: 0; border-bottom: 1px solid var(--wk-line);}
  .works .tab_box .tab_default .tablink {flex: 0 0 auto; padding: 8px 14px; font-size: 16px;}
  .works .tab_box .tab_arrow {display: none;}

  /* 업종별 활용 현황 : 다이어그램 최소 높이 해제 (빈 여백처럼 보이던 문제) */
  .works .area_function.industry .stat_diagram {min-height: 0;}
  .works .area_function.industry .stat_diagram img {display: block; width: 100%; height: auto;}

  /* 데이터 관리 : 1단 + 필탭 줄바꿈
     필탭이 nowrap 인 채로 한 줄에 붙어 있으면 그 폭이 .title_wrap 을 밀어
     h2·desc 까지 화면 밖으로 넘어간다. wrap 을 허용하고 min-width 를 푼다. */
  .works .area_function.dataview .inner {flex-direction: column; gap: 32px; min-width: 0;}
  .works .area_function.dataview .title_wrap {flex: none; width: 100%; min-width: 0; max-width: 100%;}
  .works .area_function .tab_default.pill {flex-wrap: wrap; overflow: visible; gap: 6px; max-width: 100%; min-width: 0; margin-top: 24px;}
  .works .area_function .tab_default.pill .tablink {flex: 0 0 auto;}
  .works .area_function .tab_default.pill + .tab_arrow,
  .works .area_function.dataview .tab_arrow {display: none;}

  /* 스텝 : 가로 스크롤 없이 4단 유지 (고정폭 200px → 균등 분할) */
  .works .step_nav {margin-bottom: 32px;}
  .works .step_nav .step_inner {min-width: 0;}
  .works .step_nav .step_item {flex: 1 1 0; gap: 20px; width: auto; min-width: 0; padding-right: 12px;}
  .works .step_nav .step_inner::before,
  .works .step_nav .step_bar {top: 56px;}

  /* 고객 사례 */
  .works .area_review .title_wrap {padding-inline: 6%; margin-bottom: 28px;}
  .works .area_review .marquee_container > .marquee_inner {gap: 0;}
  .works .area_review .case_card {flex: 0 0 300px; width: 300px; margin-right: 20px;}
  .works .area_review .case_card .img {height: 160px;}
  .works .area_review .case_card .area {gap: 8px; padding: 20px;}
  .works .area_review .case_card .logo {height: 20px;}
  .works .area_review .case_card .name {font-size: 17px;}
  .works .area_review .case_card p.desc {font-size: 15px; min-height: calc(15px * 1.5 * 3);}
  .works .area_review .case_card .tag_list span {height: 26px; padding: 0 8px; font-size: 12px;}
}

/* ~768px */
@media (max-width: 768px) {
  /* 타이틀 / 서브텍스트 : PC 기준으로 넣어둔 <br> 무력화
     좁은 화면에서 <br> 가 그대로 살아 있으면 "업무 일정과 / 진행 상황을 /
     체계적으로 관리해요" 처럼 이른 줄바꿈이 생겨 우측이 텅 비어 보인다.
     ※ br 에 content:' ' 를 주는 방식은 브라우저가 무시해서 줄바꿈이 그대로 남는다.
       display:none 이 유일하게 확실한데, 이 경우 <br> 양옆에 공백이 없으면
       "상황을체계적으로" 처럼 단어가 붙는다.
       → enterprise_works.jsp 는 모든 <br> 앞에 공백 한 칸이 들어가 있다.
         <br> 를 새로 추가할 때도 반드시 앞에 공백을 넣을 것.
         (O) "진행 상황을 <br>체계적으로   (X) "진행 상황을<br>체계적으로"
     (스텝·데이터 관리 h2 는 JS 가 data-title 의 <br> 를 주입하므로 같이 잡힌다) */
  .works .content_body .title_wrap h2 br,
  .works .content_body .title_wrap p.desc br,
  .works .area_pain h2 br {display: none;}
  .works .content_body .title_wrap h2,
  .works .content_body .title_wrap p.desc,
  .works .area_pain h2 {word-break: keep-all;}

  /* 불편점 줄글
     3개의 <p> 가 각각 2줄로 끊기면서 "을 쓰고," 같은 조각 줄이 남는다.
     모바일에서는 인라인으로 풀어 한 문단처럼 자연스럽게 흐르게 한다. */
  .works .area_pain .pain_desc {display: block; text-align: left;}
  .works .area_pain .pain_desc p {display: inline; word-break: keep-all;}
  .works .area_pain .pain_desc p + p::before {content: ' ';}
  .works .area_pain .tag_list span {height: 32px; padding: 0 10px; font-size: 14px;}

  /* 3카드 1단 */
  .works .card_list {flex-direction: column; gap: 16px;}
  .works .card_list .card_thumb,
  .works .card_list .card_cont {min-height: 0;}
  .works .card_list .card_cont {padding: 20px;}

  /* 지표 카드 */
  .works .area_function.industry .inner {gap: 32px;}
  .works .area_function.industry .note {text-align: left;}
  .works .area_function.industry .stat_row {flex-direction: column; gap: 8px;}
  .works .stat_card {flex-direction: column; gap: 20px; padding: 24px;}
  .works .area_function.industry .stat_row .stat_card {gap: 20px;}
  .works .stat_card .num strong {font-size: 24px;}

  /* 스텝 : 아이콘 축소 + 좌측 정렬로 4단 전부 노출 (스크롤 없음)
     360px 기준 한 칸 약 79px. h4 는 keep-all 로 어절 단위 줄바꿈. */
  .works .step_nav .step_item {flex: 1 1 0; align-items: flex-start; gap: 14px; width: auto; padding-right: 8px; text-align: left;}
  .works .step_nav .step_ic {width: 40px; height: 40px;}
  .works .step_nav .step_ic .ic_works.xl {width: 24px; height: 24px;}
  .works .step_nav .step_txt {align-items: flex-start; gap: 2px;}
  .works .step_nav .num {font-size: 11px;}
  .works .step_nav .step_item h4 {font-size: 13px; line-height: 135%; letter-spacing: -.04em; word-break: keep-all;}
  .works .step_nav .step_inner::before,
  .works .step_nav .step_bar {top: 43px; height: 6px;}

}

/* -------------------------------------------------------------------------
   모바일 가로 넘침 가드
   섹션 하나라도 뷰포트보다 넓어지면 문서 전체가 가로로 늘어나면서
   "우측에 일정한 여백이 생긴 것처럼" 보인다. 넘칠 수 있는 지점을 봉인한다.
   ------------------------------------------------------------------------- */
@media (max-width: 999px) {
  .works .area_customer,
  .works .area_review {overflow-x: hidden;}
  .works .content_body > div[class^="area_"] {max-width: 100%;}
  .works .area_function.industry .stat_diagram,
  .works .card_list .card_thumb,
  .works .tab_box .tab_content {max-width: 100%;}
  .works img {max-width: 100%;}
}

/* ~380px : 초협소 단말 */
@media (max-width: 380px) {
  .works .step_nav .step_ic {width: 36px; height: 36px;}
  .works .step_nav .step_ic .ic_works.xl {width: 20px; height: 20px;}
  .works .step_nav .step_item {gap: 12px;}
  .works .step_nav .step_item h4 {font-size: 12px;}
  .works .step_nav .num {font-size: 10px;}
  .works .step_nav .step_inner::before,
  .works .step_nav .step_bar {top: 39px;}
}

/* 모션 최소화 설정 존중 */
@media (prefers-reduced-motion: reduce) {
  .works .area_review .marquee_container > .marquee_inner {animation: none;}
  .works .step_nav .step_bar,
  .works .step_nav .step_ic {transition: none;}
}