/* ==========================================================
   to-be 전용 보정 — as-is CSS(base.css / style.css)는 손대지 않는다.
   ========================================================== */

/* as-is 는 배경색을 어디에도 지정하지 않아 브라우저 기본 캔버스에 의존했다.
   OS 가 다크 모드면 UA 나 크롬 자동 다크 모드가 페이지를 뒤집어 버린다.
   이 사이트는 라이트 전용 디자인이므로 그렇게 선언하고 배경을 명시한다. */
:root {
    color-scheme: light;
}

html,
body {
    background-color: #fff;
}

/* WORK — as-is 는 페이지 제목과 탭 사이에 RECENT PROJECTS 캐러셀이 있었다.
   그 영역을 걷어내면서 제목과 탭이 붙어버려 간격을 다시 준다. */
.l-sub .l-page-tit {
    margin-bottom: 60px;
}

@media (max-width: 1199px) {
    .l-sub .l-page-tit {
        margin-bottom: 36px;
    }
}

/* ==========================================================
   소식 상세 — as-is 는 본문을 레이어 팝업 안에서만 보여줬다.
   그래서 관련 스타일이 전부 .c-layer 하위로만 정의돼 있다.
   팝업 위치 지정까지 딸려오면 곤란하므로 본문에 필요한 규칙만 옮겨 둔다.
   ========================================================== */
.l-post {
    max-width: 1080px;
}

.l-post .l-post-head {
    padding-bottom: 24px;
    border-bottom: 1px solid #e5e5e8;
}

.l-post .l-post-tit {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.4;
}

.l-post .l-post-date {
    display: block;
    margin-top: 12px;
    font-size: 14px;
    color: #888;
}

.l-post .l-post-body {
    margin-top: 40px;
}

.l-post .l-post-body > * {
    font-family: "Noto Sans KR" !important;
    line-height: 1.67;
    color: #111;
}

.l-post .l-post-body img {
    display: block;
    max-width: 100%;
    height: auto !important;
    margin: 0 auto 20px;
}

/* 에디터가 남긴 고정 폭 표가 화면을 밀어내지 않게 한다 */
.l-post .l-post-body table {
    max-width: 100%;
}

.l-post .l-post-foot {
    margin-top: 60px;
}

@media (max-width: 1199px) {
    .l-post .l-post-tit { font-size: 22px; }
    .l-post .l-post-body { margin-top: 28px; }
    .l-post .l-post-body > * { font-size: 14px !important; line-height: 1.71; }
}

/* ==========================================================
   스크롤 등장 연출
   as-is 는 TweenMax 로 섹션마다 다른 시퀀스를 돌렸고, 그 초기 상태가
   CSS 에 opacity:0 으로 박혀 있다. 그 스크립트가 없으면 본문이 통째로
   보이지 않는다 — 스크립트가 실패해도 글이 보이는 쪽이 맞다.

   그래서 기본은 '보이는 상태'로 두고, 스크립트가 살아 있을 때만
   (html.js-reveal) 처음에 감췄다가 화면에 들어올 때 드러낸다.
   ========================================================== */
.c-portfolio-desc .c-section-work1 .main-list--v2,
.c-portfolio-desc .c-section-work2 .main-list > li,
.c-portfolio-desc .c-section-work3 .work3-interact .item,
.c-portfolio-desc .c-section-work3 .list > .item,
.c-portfolio-desc .c-section-work4 .list.build-list > li,
.c-portfolio-desc .c-section-work4 .list.flow-list > li > dl,
.c-portfolio-desc .c-section-work4 .list.flow-list > li .tit,
.c-portfolio-desc .c-section-work5 .list > li,
.c-portfolio-desc .c-section-who1 .desc-list > li,
.c-portfolio-desc .c-section-who2 .stats-list > li .num,
.c-portfolio-desc .c-section-who5 .history-list .history .history-info > li {
    opacity: 1;
    transform: none;
}

/* CONTACT 배너의 어두운 배경은 그라디언트 정지점을 100%→0% 로 밀어 넣는 연출이었다.
   스크립트가 없으면 배경이 투명한 채로 남아 흰 글씨가 통째로 사라진다.
   연출이 끝난 상태를 기본값으로 둔다. */
.l-m4nc-banner {
    background: #111;
}

/* CONTACT 배너도 같은 방식으로 감춰져 있다 */
.l-m4nc-banner-info .l-m4nc-banner-items .l-m4nc-banner-item > span,
.l-m4nc-banner-info .l-m4nc-banner-items .l-m4nc-banner-item > p,
.l-m4nc-banner-info .l-m4nc-banner-items .l-m4nc-banner-item > div,
.l-m4nc-banner-info .l-m4nc-banner-tit,
.l-m4nc-banner-btns > a {
    opacity: 1;
    transform: none;
}

/* 좁은 화면에서만 감춰지는 것도 있다 */
@media (max-width: 1199px) {
    .c-portfolio-desc .c-section-work3 .work3-interact .item-wrapper {
        opacity: 1;
        transform: none;
    }
}

/* 기본은 '보이는 상태'다. 화면에 들어올 때만 애니메이션을 한 번 재생한다.
   관찰자가 끝내 발화하지 않아도 글은 그냥 보인다 — 감췄다가 되돌리는 방식은
   스크립트가 한 발이라도 어긋나면 본문이 사라진다. */
[data-reveal].is-revealed {
    animation: tobe-reveal-up 600ms ease both;
}

@keyframes tobe-reveal-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal].is-revealed { animation: none; }
}

/* ==========================================================
   CONTACT — as-is 는 문의 폼을 레이어 팝업(#contact)으로만 띄웠다.
   그래서 폼 스타일이 .c-layer 하위로만 있고, #contact 에는
   display:none 이 걸려 있다. 페이지 안에 두기 위한 최소한의 정리.
   ========================================================== */
.l-contact-form {
    max-width: 720px;
    margin-top: 80px;
}

.l-contact-form .sub-title {
    margin-bottom: 24px;
}

.l-contact-form dt {
    margin: 28px 0 10px;
    font-size: 15px;
    font-weight: 700;
}

.l-contact-form dd + dd {
    margin-top: 12px;
}

.l-contact-form .c-input input,
.l-contact-form .c-input textarea,
.l-contact-form .c-select select {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    border: 1px solid #ddd;
    font-size: 15px;
    background-color: #fff;
}

.l-contact-form .c-input textarea {
    resize: vertical;
    min-height: 160px;
}

.l-contact-form .c-form-multi {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.l-contact-form .c-form-multi > .c-input {
    flex: 1 1 0;
}

.l-contact-form .c-terms {
    margin-top: 24px;
}

/* as-is 는 체크박스를 감추고 라벨로 그렸다. 페이지 안에서는 그대로 쓴다 */
.l-contact-form .c-terms__trigger input[type="checkbox"] {
    width: 18px;
    height: 18px;
    opacity: 1;
    position: static;
    vertical-align: -3px;
    margin-right: 8px;
}

.l-contact-form .c-terms .terms {
    margin-top: 12px;
    padding: 16px;
    background-color: #f7f7f9;
    font-size: 13px;
    line-height: 1.7;
    color: #666;
}

.l-contact-form .c-terms .terms a {
    text-decoration: underline;
}

.l-contact-form button[type="submit"] {
    width: 100%;
    margin-top: 32px;
    padding: 18px;
    border: 0;
    font-size: 16px;
    cursor: pointer;
}

.l-contact-form button[type="submit"]:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.l-form-result {
    min-height: 22px;
    margin-top: 14px;
    font-size: 14px;
}

.l-form-result.is-ok { color: #1a7f37; }
.l-form-result.is-error { color: #c0392b; }

.l-location .l-map img {
    max-width: 100%;
    height: auto;
}

.l-location .c-btn--arrow {
    display: inline-block;
    margin-top: 20px;
}

@media (max-width: 1199px) {
    .l-contact-form { margin-top: 48px; }
    .l-contact-form .c-form-multi { flex-direction: column; }
}

/* ==========================================================
   약관·처리방침 — as-is 에는 없던 페이지라 새로 잡는다
   ========================================================== */
.l-terms {
    max-width: 860px;
    padding-bottom: 40px;
}

.l-terms .l-terms-lead {
    margin: 24px 0 8px;
    line-height: 1.8;
    color: #444;
}

.l-terms section {
    margin-top: 44px;
}

.l-terms h2 {
    margin-bottom: 14px;
    font-size: 19px;
    font-weight: 700;
}

.l-terms p {
    line-height: 1.8;
    color: #444;
}

.l-terms p + p { margin-top: 12px; }

.l-terms ul,
.l-terms ol {
    margin: 12px 0 0 20px;
    line-height: 1.9;
    color: #444;
}

.l-terms ul > li { list-style: disc; }
.l-terms ol > li { list-style: decimal; }

.l-terms table {
    width: 100%;
    margin-top: 14px;
    border-top: 2px solid #111;
    border-collapse: collapse;
    font-size: 15px;
}

.l-terms th,
.l-terms td {
    padding: 12px 14px;
    border-bottom: 1px solid #e5e5e8;
    text-align: left;
    vertical-align: top;
    line-height: 1.7;
}

.l-terms th {
    width: 34%;
    background-color: #fafafb;
    font-weight: 700;
}

.l-terms td a { text-decoration: underline; }

.l-terms .l-terms-foot {
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid #e5e5e8;
    font-size: 14px;
    color: #888;
}

@media (max-width: 1199px) {
    .l-terms h2 { font-size: 17px; }
    .l-terms table { font-size: 14px; }
    .l-terms th { width: 40%; }
}

/* 푸터 처리방침 링크 — as-is 에는 없던 항목 */
#footer .l-footer-legal {
    margin-top: 18px;
    font-size: 13px;
}

#footer .l-footer-legal a {
    color: #bbb;
    text-decoration: underline;
}

#footer .l-footer-legal a:hover { color: #fff; }

/* ==========================================================
   홈 MAX 슬라이드 — 좁은 화면 보정
   16:9 영상을 세로 화면에 cover 로 채우면 로고와 문구가 양옆으로 잘린다.
   좁은 화면에서는 전체가 보이게 두고, 남는 자리는 영상 배경색으로 메운다.
   ========================================================== */
@media (max-width: 767px) {
    .l-main .c-ref__item--max > .max-video-bg {
        object-fit: contain;
        background-color: #07122a; /* 영상 배경과 같은 색이라 이어져 보인다 */
    }
}

/* ==========================================================
   좁은 화면 잔손질
   base.css 가 전역으로 word-break: break-all 을 걸어 두어서
   한글·번지수가 단어 한가운데서 끊긴다. 끊기면 곤란한 곳만 되돌린다.
   ========================================================== */
.l-m4nc-banner-info .l-m4nc-banner-tit,
.l-terms td,
.l-terms th,
.c-card .c-card-tit,
.l-post .l-post-tit {
    word-break: keep-all;
}

/* 필터 레이블이 두 줄로 쪼개지지 않게 한다 */
.l-toolbar-right .c-checkbox label,
.l-toolbar-right .c-checkbox label > span {
    white-space: nowrap;
}

/* ==========================================================
   섹션 인디케이터 위치
   style.css 는 #indicator 를 position:fixed 로 두면서 top/left 를 주지 않았다.
   그러면 브라우저는 '원래 있었을 자리'를 기준으로 삼는데, as-is 는 이 요소를
   본문 바깥 맨 앞에 두어 그 자리가 화면 좌상단이었다.
   to-be 는 페이지 컴포넌트 안에서 렌더하므로 기준점을 명시해 준다.
   ========================================================== */
/* 본문 컨테이너를 넓히면서 좌측 레일이 들어설 자리가 사라졌다.
   컨테이너(1720) 양옆에 레일(약 210) 이 들어가려면 2140 이상은 되어야 한다.
   그 아래에서는 as-is 가 좁은 화면에서 쓰던 가로 배치를 그대로 쓴다. */
#indicator {
    top: 100px;
    left: 0;
}

@media (max-width: 2139px) {
    #indicator {
        width: 100%;
        margin: 0;
        padding: 10px 0;
        box-sizing: border-box;
        top: 100px;
        left: 0;
        background-color: rgba(255, 255, 255, 0.95);
    }

    /* 본문과 같은 기준선에 세운다 — 컨테이너와 같은 최대폭·좌우 여백 */
    #indicator ul {
        display: flex;
        max-width: 1720px;
        margin: 0 auto;
        padding: 0 60px;
        box-sizing: border-box;
    }

    #indicator li + li {
        margin-top: 0;
        margin-left: 40px;
    }
}

@media (max-width: 1199px) {
    #indicator ul {
        padding: 0 20px;
    }
}

/* 섹션 인디케이터 — as-is 는 li 자체를 눌렀다.
   to-be 는 키보드로도 넘어갈 수 있게 button 을 쓰고, 겉모습은 그대로 둔다. */
#indicator li > button {
    all: unset;
    display: block;
    width: 100%;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: inherit;
}

#indicator li > button:focus-visible {
    outline: 2px solid #6a53ff;
    outline-offset: 3px;
}

/* ==========================================================
   WORK 목록 — 넓은 화면 정리
   ========================================================== */

/* 카드는 300px 고정 폭인데, 제목 span 이 inline-block 이라 길면 폭을 넘어
   옆 카드 위로 삐져나간다. as-is 는 제목에 쉼표를 넣어 줄을 나눠 두어
   드러나지 않았을 뿐이다. 쉼표가 없는 제목은 그대로 넘친다. */
.l-card-lists .c-card .c-card-tit,
.l-card-lists .c-card .c-card-tit > .c-card-txt {
    max-width: 100%;
}

.l-card-lists .c-card .c-card-tit > .c-card-txt {
    white-space: normal;
    word-break: keep-all;
}

/* 안쪽 em 에 nowrap 이 걸려 있어 줄바꿈이 막히고, 넘친 만큼 잘려 나갔다.
   as-is 는 제목을 쉼표로 미리 끊어 한 줄씩 담았기 때문에 드러나지 않았다. */
.l-card-lists .c-card .c-card-tit > span > em {
    white-space: normal;
    word-break: keep-all;
    /* 좌우 여백을 바깥 상자로 옮긴다. em 은 인라인이라 padding 이 첫 줄에만 걸려,
       두 줄째부터는 글자가 상자 왼쪽 끝에 붙어 버렸다. */
    padding: 0;
}

.l-card-lists .c-card .c-card-tit > .c-card-txt {
    padding: 0 14px;
}

/* 카테고리 목록이 한 줄에 늘어서는데 항목마다 폭이 좁아
   "FINANC / E" 처럼 단어 가운데서 끊겼다. */
.l-toolbar-left .c-custom-select-options .c-custom-select-option {
    white-space: nowrap;
}

/* 항목이 11개(ALL + 10종)라 넓은 화면에서도 한 줄에 다 들어가지 않는다.
   as-is 는 항목마다 margin-left 로 간격을 줬는데, 그러면 줄이 넘어갔을 때
   둘째 줄 첫 항목에도 그 여백이 남아 왼쪽이 들쭉날쭉해진다.
   간격을 gap 으로 옮겨 어느 줄이든 같은 선에서 시작하게 한다. */
.l-toolbar-left .c-custom-select-options {
    flex-wrap: wrap;
    column-gap: 30px;
    row-gap: 12px;
}

.l-toolbar-left .c-custom-select-options .l-toolbar-btn:not(:first-child) {
    margin-left: 0;
}

/* 유형 체크박스(대표레퍼런스·유지보수)를 걷어내 좌측이 전체 폭을 쓴다 */
.l-toolbar {
    align-items: flex-start;
}

.l-toolbar-left {
    width: 100%;
}

/* ==========================================================
   GNB
   ========================================================== */

/* MAX 메뉴 강조 — as-is 는 inc_header.jsp 안에 인라인 <style> 로 넣어 두었다.
   헤더를 컴포넌트로 옮기면서 빠졌던 것을 되살린다. */
#header .l-gnb .l-menu--max > a {
    color: #7BAAFF;
}

/* 홈은 어두운 영상 위에 헤더가 떠 있다.
   기본 호버색(#111)은 그 배경에서 묻히므로 흰색으로 바꾼다.
   스크롤해서 헤더에 흰 배경이 깔린 뒤에는 원래 색을 그대로 쓴다. */
.l-main #header:not(.header--active) .l-gnb .l-menu:hover > a {
    color: #fff;
}

/* 카드에서 기기 아이콘(PC·모바일·POS)을 뺐다.
   as-is 는 아이콘 옆에 날짜가 붙는 구조라 날짜에 왼쪽 여백이 들어가 있었다. */
.l-card-lists .c-card .c-card-date {
    margin-left: 0;
}

/* ==========================================================
   본문 컨테이너 폭
   as-is 는 1200px 고정이었다. 요즘 모니터에서는 양옆이 크게 비어
   화면을 좁게 쓰게 된다. 폭을 넓히되 두 가지를 지킨다.

   1) WORK 카드 한 줄에 4장이 들어가게 (카드 300 + 간격 100 → 4열에 1500 필요)
   2) 긴 문장은 따로 폭을 묶는다 — 한 줄이 너무 길면 읽기 어렵다
   ========================================================== */
.l-inner {
    width: 100%;
    max-width: 1720px;
    padding: 0 60px;
    box-sizing: border-box;
}

/* 헤더도 같은 기준선에 맞춰 로고·메뉴가 본문과 나란히 서게 한다.
   position:fixed 요소는 left/right 를 함께 잡아 줘야 margin:auto 로 가운데 선다. */
#header {
    left: 0;
    right: 0;
    max-width: 1720px;
    margin: 0 auto;
}

/* 제목·설명문은 넓어져도 한 줄이 길어지지 않게 묶는다.
   단 첫 문단의 검정 마커 제목(--v4)은 화면 끝까지 뻗는 연출이라 제외한다. */
.c-portfolio-desc .main-title:not(.main-title--v4),
.c-portfolio-desc .main-desc,
.c-portfolio-desc .sub-section > .main-desc {
    max-width: 1200px;
}

@media (max-width: 1199px) {
    .l-inner {
        padding: 0 20px;
    }
}

/* ==========================================================
   WORK 대표 프로젝트 그리드
   목록이 글자만 이어지면 무엇을 만드는 회사인지 보이지 않는다.
   상세가 있는 것 중 최신 6건을 이미지로 세운다.
   ========================================================== */
.l-featured {
    margin-bottom: 90px;
}

/* PORTFOLIO · AWARD 탭과 같은 크기·굵기로 맞춘다 (.c-tab 기준 36px/700) */
.l-featured-tit {
    margin-bottom: 24px;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.19;
}

.l-featured-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 30px;
}

.l-featured-item > a {
    display: block;
    text-decoration: none;
}

.l-featured-thumb {
    display: block;
    position: relative;
    overflow: hidden;
    background-color: #f2f2f4;
    /* 썸네일 24장이 모두 840x400 이다. 틀을 같은 비율로 맞춰 잘리는 곳 없이 보여준다 */
    aspect-ratio: 840 / 400;
}

.l-featured-thumb > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 450ms ease;
}

.l-featured-item > a:hover .l-featured-thumb > img,
.l-featured-item > a:focus-visible .l-featured-thumb > img {
    transform: scale(1.04);
}

/* as-is 처럼 이미지 안 왼쪽에 흰 블록을 깔고 그 위에 검은 글씨를 쓴다.
   막을 씌우면 사진이 답답해 보여서, 글자 자리만 흰 판으로 확실히 확보한다. */
.l-featured-info {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    /* 제목 길이에 따라 박스 폭이 제각각이면 여섯 장이 들쭉날쭉해 보인다.
       원본 이미지(840px) 기준 320px 자리에 맞춰 고정한다 — 320/840 = 38.1%.
       그보다 넓으면 오른쪽 이미지 요소를 가린다. */
    width: 38.1%;
    padding: 16px 20px;
    box-sizing: border-box;
    background-color: #fff;
}

.l-featured-label {
    display: block;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 700;
    color: #7964ff;
    letter-spacing: 0.02em;
}

.l-featured-name {
    display: block;
    /* 박스가 좁아진 만큼 글자도 줄인다. 두 줄 안에 들어가는 크기다 */
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
    color: #111;
    word-break: keep-all;
}

.l-featured-name > span {
    display: block;
}

.l-featured-item > a:hover .l-featured-name > span {
    text-decoration: underline;
    text-underline-offset: 5px;
}

@media (max-width: 1199px) {
    .l-featured { margin-bottom: 60px; }
    .l-featured-tit { font-size: 20px; margin-bottom: 18px; }  /* 좁은 화면 .c-tab 과 동일 */
    .l-featured-list { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
    .l-featured-info { left: 0; width: 46%; padding: 14px 16px; }
    .l-featured-name { font-size: 17px; }
}

@media (max-width: 767px) {
    .l-featured-list { grid-template-columns: 1fr; gap: 28px; }
    .l-featured-info { left: 0; width: 56%; padding: 12px 14px; }
    .l-featured-name { font-size: 16px; }
}

/* ==========================================================
   WORK — 필터의 소속을 분명히 한다
   필터는 아래 목록을 거르는 장치인데, as-is 간격 그대로 두면
   위(대표 프로젝트)에 90px, 아래(목록)에 110px 이라 오히려
   대표 쪽에 붙어 보인다. 간격을 뒤집어 목록과 한 덩어리로 읽히게 한다.
   ========================================================== */
.l-featured {
    margin-bottom: 140px;
}

.l-sub .l-card-lists {
    margin-top: 40px;
}

@media (max-width: 1199px) {
    .l-featured {
        margin-bottom: 90px;
    }

    .l-sub .l-card-lists {
        margin-top: 28px;
    }
}

/* ==========================================================
   AWARD — 항목 열 맞추기
   as-is 는 연도와 항목을 float 으로 흘렸다. 항목마다 높이가 달라
   다음 항목이 앞 항목 아래턱에 걸리면서 열이 어긋난다.
   컨테이너가 넓어져 한 줄에 세 개씩 들어가면서 더 눈에 띈다.
   ========================================================== */
.c-aa-history > li {
    display: flex;
    align-items: flex-start;
}

.c-aa-history .c-aa-year {
    float: none;
    flex: 0 0 159px;
}

.c-aa-history .c-aa-info-list {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    column-gap: 40px;
    row-gap: 56px;
}

.c-aa-history .c-aa-info-list > li {
    float: none;
    width: auto;
}

/* float 을 정리하려고 넣어 둔 가짜 요소다. 그리드에서는 칸을 하나 차지해 열이 밀린다 */
.c-aa-history .c-aa-info-list::after {
    display: none;
}

/* 2번째·3번째부터에 붙이던 여백도 float 시절 간격 조정용이다.
   그리드가 간격을 맡으므로 지운다 — 남겨 두면 짝수 항목만 62px 씩 밀린다. */
.c-aa-history .c-aa-info-list > li:nth-child(2n),
.c-aa-history .c-aa-info-list > li:nth-child(n + 3) {
    margin-left: 0;
    margin-top: 0;
}

@media (max-width: 1199px) {
    .c-aa-history .c-aa-year {
        flex-basis: 76px;
    }

    .c-aa-history .c-aa-info-list {
        grid-template-columns: 1fr;
        row-gap: 40px;
    }
}

/* ==========================================================
   CLIENT — as-is 는 레이어 팝업(#client) 안에서만 쓰던 화면이라
   설명문 스타일이 그 id 에 묶여 있었다. 탭으로 옮기면서 빠진 것을 되살린다.
   ========================================================== */
.c-portfolio-desc .c-section-who4 {
    /* 컨테이너를 넓힌 만큼 로고도 넓게 편다.
       as-is 는 레이어(1080) 안이라 한 줄에 다섯 개였다. */
    max-width: none;
}

.c-portfolio-desc .c-section-who4 .c-layer-txt {
    margin: 0 0 70px;
    font-size: 16px;
    line-height: 1.63;
    color: #111;
}

@media (max-width: 1199px) {
    .c-portfolio-desc .c-section-who4 .c-layer-txt {
        margin-bottom: 44px;
    }
}

/* ==========================================================
   컨테이너를 1200 → 1720 으로 넓히면서 드러난 것들
   as-is 는 1200 을 전제로 짜여 있어, 그 값이 박힌 자리는 손봐야 한다.
   ========================================================== */

/* TODAY M4NC 프로젝트 뉴스
   as-is 는 좌우 화살표로 넘기는 가로 띠라 줄바꿈을 막아 두었다.
   to-be 는 LOAD MORE 로 이어 붙이므로, 막아 두면 항목이 화면 밖으로 흘러 사라진다. */
.c-list-with-thumb .c-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    column-gap: 60px;
    row-gap: 70px;
    align-items: start;
}

.c-list-with-thumb .c-list-item {
    width: auto;
    margin: 0;
}

/* 뉴스 영역이 오른쪽으로 넘치던 것 — 1200 기준으로 계산된 음수 여백이다 */
.l-section-info {
    margin-right: 0;
}

@media (max-width: 1199px) {
    .c-list-with-thumb .c-list {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        column-gap: 30px;
        row-gap: 48px;
    }
}

@media (max-width: 767px) {
    .c-list-with-thumb .c-list {
        grid-template-columns: 1fr;
        row-gap: 36px;
    }
}

/* 지도는 1200x600 이미지다. 컨테이너에 맞춰 늘리면 지도 글씨가 흐려진다.
   블록을 이미지 크기에 맞춰 두고, 더 넓게 쓰려면 고해상도 지도를 다시 받아야 한다. */
.l-location .l-map {
    max-width: 1200px;
}

/* ==========================================================
   폭을 일부러 묶어 둔 곳 — 넓히지 말 것
   한 줄이 길어지면 읽기 어려워진다.
     .l-post        소식 본문      1080
     .l-terms       처리방침       860
     .l-contact-form 문의 폼       720
     .c-portfolio-desc .main-title / .main-desc  제목·설명문  1200
   ========================================================== */

/* ==========================================================
   COMPANY — as-is 스크립트가 끝낸 상태를 기본값으로
   as-is 는 TweenMax 로 값을 채워 넣었고, CSS 에는 '채우기 전' 상태만 있다.
   그 스크립트가 없으니 완성된 모습을 기본값으로 둔다.
   ========================================================== */

/* base.css 가 span 에도 color:#111 을 직접 준다.
   줄바꿈 때문에 넣은 span 이 그 색을 물려받아, 검정 마커 위에서 글자가 사라졌다. */
.c-portfolio-desc .main-title > span,
.c-portfolio-desc .main-title > span > span {
    color: inherit;
}

/* 첫 문단 제목 — 검정 마커
   원본은 transparent 100% 에서 시작해 왼쪽으로 채워 넣는 연출이었다.
   그대로 두면 흰 글씨가 흰 바탕에 얹혀 아무것도 보이지 않는다. */
.c-portfolio-desc .c-section .main-title.main-title--v4 {
    background: #111;
}

/* 마커가 화면 오른쪽 끝까지 뻗는 연출. 계산식이 1200 기준이라 넓힌 뒤 어긋났다 */
@media (min-width: 1720px) {
    .c-portfolio-desc .c-section .main-title.main-title--v4 {
        margin-right: calc((100vw - 1720px) / -2 - 60px);
    }
}

@media (min-width: 1200px) and (max-width: 1719px) {
    .c-portfolio-desc .c-section .main-title.main-title--v4 {
        margin-right: -60px;
    }
}

/* UX Value 다이어그램
   as-is 는 스크립트로 래퍼를 740 으로 좁히고 캡션 색을 채웠다. */
.c-portfolio-desc .c-section-work3 .work3-interact .item-wrapper {
    max-width: 740px;
    margin: 0 auto;
    /* as-is 스크립트가 마지막에 그리던 점선 테두리. CSS 에는 border:none 만 있었다 */
    border: 2px dashed #bbb;
}

.c-portfolio-desc .c-section-work3 .work3-interact .caption {
    color: #333;
}

/* 사업분야 섹션은 dangerouslySetInnerHTML 때문에 div 로 한 번 감싸져 있다.
   그 안에서 홀로 :last-child 가 되어 as-is 의 '마지막 섹션은 아래 여백 0' 규칙에 걸렸다.
   실제로는 마지막이 아니라 연혁이 뒤에 온다. 아래 여백을 되돌린다. */
.c-portfolio-desc .c-section.c-section-work3 {
    margin-bottom: 220px;
}

@media (max-width: 1199px) {
    .c-portfolio-desc .c-section.c-section-work3 {
        margin-bottom: 120px;
    }
}

/* E-Business Platform 흐름도 레이블
   as-is 는 검정을 0%→100% 로 밀어 채우는 연출이라 기본값이 투명이다.
   흰 글씨만 남아 흰 바탕에서 사라졌다. 채워진 상태를 기본값으로 둔다.
   가로 이동(translateX)도 연출용 시작값이라 되돌린다. */
.c-portfolio-desc .c-section-work4 .list.flow-list > li .tit {
    background: #111;
    transform: none;
}

/* ==========================================================
   테두리형 검정 버튼
   as-is 규칙은 `배경 없음 + 검정 테두리 + 흰 글씨` 다.
   어두운 바탕 위에 얹을 때를 전제한 값인데, 실제로 쓰이는 자리는
   전부 흰 바탕이라 글자가 보이지 않는다 (as-is 의 CONTACT US 도 마찬가지).
   테두리형 모습은 그대로 두고 글자만 읽히게 한다.
   ========================================================== */
.c-btn--line.c-btn--black {
    color: #111;
}

.c-btn--line.c-btn--black:hover,
.c-btn--line.c-btn--black:focus-visible {
    background-color: #111;
    color: #fff;
}

/* 화살표 아이콘도 같은 규칙을 따르게 한다 */
.c-btn--arrow.c-btn--line.c-btn--black:hover:after,
.c-btn--arrow.c-btn--line.c-btn--black:focus-visible:after {
    filter: invert(1);
}

/* 2026-09: consistent centered content, without centering body text. */
.l-sub .l-inner { max-width: 1440px; margin-inline: auto; }
.l-sub #header { max-width: 1440px; }
.l-sub .l-post, .l-sub .l-terms { margin-inline: auto; }
.l-sub #footer { padding-inline: max(60px, calc((100% - 1320px) / 2)); }
.c-portfolio-desc .c-section .main-title.main-title--v4 { margin-right: 0; }
.l-sub .l-card-lists {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 80px 48px;
    margin-right: 0;
    margin-bottom: 0;
}
.l-sub .l-card-lists .c-card { width: auto; min-width: 0; margin: 0; }
.c-list-with-thumb .c-list { margin-right: 0; margin-bottom: 0; }
.c-list-with-thumb .c-list-item-thumb { width: 100%; height: auto; aspect-ratio: 3 / 2; }
.c-list-with-thumb .c-list-item-thumb > img { object-fit: cover; }
@media (min-width: 1200px) {
    .c-portfolio-desc .c-section-work1 .main-list--v2,
    .c-portfolio-desc .c-section-work2 .main-list {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 60px; margin-inline: 0; margin-bottom: 0;
    }
    .c-portfolio-desc .c-section-work1 .main-list--v2 > li,
    .c-portfolio-desc .c-section-work2 .main-list > li { width: auto; margin: 0; min-width: 0; }
}
/* CONTACT: location on the left, inquiry on the right. */
.m4nc-contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; margin-top: 64px; align-items: start; }
.m4nc-contact-grid > .l-location,
.m4nc-contact-grid > .l-contact-form { min-width: 0; max-width: none; margin: 0; }
.l-sub .m4nc-contact-grid > section > .sub-title { margin: 0 0 32px; }
.m4nc-contact-grid .l-map { width: 100%; aspect-ratio: 960 / 750; background: #f5f5f5; }
.m4nc-contact-grid .l-map > img { display: block; width: 100%; height: auto; }
.m4nc-contact-grid .m4nc-map-address { margin-top: 20px; font-size: 15px; line-height: 1.7; }
.m4nc-contact-grid .l-contact-form dt:first-child { margin-top: 0; }
.l-m4nc-banner-wrapper { width: 100%; gap: 32px; }
.l-m4nc-banner-info { min-width: 0; }
.l-m4nc-banner-btns { flex-shrink: 0; }
.l-m4nc-banner .c-btn--brochure { right: 0; }
@media (max-width: 1199px) {
    .l-sub #footer { padding-inline: 20px; }
    .m4nc-contact-grid { gap: 36px; }
}
@media (max-width: 767px) {
    .l-sub .l-card-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 20px; }
    .m4nc-contact-grid { grid-template-columns: 1fr; gap: 48px; margin-top: 48px; }
    .l-sub .m4nc-contact-grid > section > .sub-title { margin-bottom: 24px; }
}
/* Keep section navigation on the same centered axis at every desktop width. */
@media (min-width: 769px) {
    .l-sub #indicator { top: 100px; left: 0; width: 100%; margin: 0; padding: 10px 0; background: #fffffff2; }
    .l-sub #indicator ul { display: flex; max-width: 1440px; margin-inline: auto; padding-inline: 60px; }
    .l-sub #indicator li + li { margin-top: 0; margin-left: 40px; }
}
@media (min-width: 769px) and (max-width: 1199px) {
    .l-sub #indicator ul { padding-inline: 20px; }
}