@charset "UTF-8";
/*
    새 페이지 공통 껍데기 — /insight · /awards · /company · /service

    왜 만들었나
      2026-09-12 에 만든 페이지들이 /archive_news 와 모양이 달랐다.
      아카이브는 배경 영상을 숨기고 흐릿한 정지 이미지만 남긴 뒤 큰 제목을 왼쪽 위에 둔다.
      새 페이지들은 영상이 그대로 돌아 글자 뒤로 밝은 부분이 지나갔고 제목도 작았다.
      대표님 지시로 아카이브 쪽에 맞춘다.

    왜 archive.min.css 를 그대로 부르지 않나
      그 파일에는 .category(아카이브 탭 바) · #topbt · 스크롤바 숨김 ·
      body/html 의 overflow:hidden 처럼 아카이브 전용 규칙이 섞여 있다.
      특히 body·html 의 overflow:hidden 을 들여오면 우리 페이지는 스크롤이 막힌다.
      아카이브가 그 모양을 내는 규칙만 옮겨 적는다.

    #wrap 의 page_<pageName> 표식은 layout.html 이 붙인다.
*/

/* ---------- 배경 ----------
   영상을 숨기고 정지 이미지(sec01_bg.png)만 남긴다. 아카이브가 하는 것과 같다.
   그 이미지는 원래 부드러운 그라데이션이라 글자 뒤가 조용해진다.
   blur 를 한 번 더 얹어 남는 결까지 눌렀다. */
.page_insight .bg_video,
.page_awards .bg_video,
.page_company .bg_video,
.page_service .bg_video {
    /* 배경 그림을 여기서 직접 준다.
       영상만 숨기면 아무것도 안 칠해져 흰 화면이 된다 — 아카이브는 archive.min.css 가
       이 그림을 공급하는데 우리는 그 파일을 부르지 않으므로 같은 그림을 여기에 적는다. */
    background: url(/img/front/sub/project/sec01_bg.png) no-repeat center/cover;
    filter: brightness(.55) blur(6px);
    /* 반드시 fixed 여야 한다. absolute 면 첫 화면 높이까지만 칠해져
       스크롤을 내리면 그 아래가 흰색으로 남는다(2026-09-12 /company 에서 확인).
       아카이브는 본문이 100vh 안에 갇혀 있어 이 문제가 드러나지 않는다. */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* 헤더가 따로 떨어져 보이지 않게 한다.
   service.css 가 .header.sub_header 에 어두운 바탕을 깔아 두었는데,
   배경이 이미 어둡고 흐려진 이 페이지들에서는 그 띠가 경계선처럼 보인다.
   아카이브 헤더는 투명하다 — 거기에 맞춘다. */
.page_insight .header.sub_header,
.page_awards .header.sub_header,
.page_company .header.sub_header,
.page_service .header.sub_header {
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.page_insight .bg_video video,
.page_awards .bg_video video,
.page_company .bg_video video,
.page_service .bg_video video {
    opacity: 0;
}

/* ---------- 페이지 틀 ----------
   좌우 여백을 없애 꽉 차게 하고 위는 아카이브와 같은 8.2rem. */
.shell_page {
    position: relative;
    z-index: 1; /* 배경(.bg_video, z-index 0) 위에 놓는다 */
    padding-left: 0;
    padding-right: 0;
    /* 아카이브와 같은 자리에 제목이 오게 한다.
       2026-09-12 실측 — 아카이브는 제목 top 112px(헤더 아래 31px)인데
       8.2rem 로는 71px 이 나와 헤더와 10px 겹쳤다. */
    padding-top: 13rem;
}

/* ---------- 큰 제목 ----------
   아카이브의 .page_tit 와 같은 자리·같은 크기. */
.shell_tit {
    padding: 0 2rem;
    margin: 0 0 6rem;
    font-size: clamp(5.5rem, 7.6042vw, 14.6rem);
    line-height: 1;
    /* 자간은 -0.5px 을 넘기지 않는다(사내 규정).
       -0.02em 은 109px 제목에서 -2.19px 이 되어 한참 넘었다. */
    letter-spacing: -0.5px;
    font-weight: 400;
    text-transform: uppercase;
    color: #fff;
}

/* 제목 옆에 숨겨 두는 설명. 화면에서는 안 보이고 기계는 읽는다.
   아카이브가 쓰는 .blind 와 같은 목적이라 이름을 맞췄다. */
.shell_tit .blind {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- 본문 ----------
   틀은 꽉 찼으므로 안쪽에서 다시 여백을 준다.
   격자(.shell_grid)는 좌우로 꽉 차야 하므로 이 안에 넣지 않는다. */
.shell_in {
    padding: 0 2rem 12rem;
}
.shell_lead {
    padding: 0 2rem 6rem;
}
.shell_lead .svc_lead {
    margin: 0;
}

@media (max-width: 767px) {
    .shell_page {
        padding-top: 6.4rem;
    }
    .shell_tit {
        padding: 0 1.2rem;
        margin-bottom: 3.2rem;
        font-size: clamp(3.4rem, 13vw, 5.5rem);
    }
    .shell_in {
        padding: 0 1.2rem 7rem;
    }
    .shell_lead {
        padding: 0 1.2rem 3.2rem;
    }
}

/* ---------- 3단 격자 ----------
   아카이브의 .content_wrap 와 같은 언어다 — 좌우 꽉 차고, 칸 사이를 띄우지 않고,
   가는 선으로만 나눈다. 둥근 모서리도 그림자도 쓰지 않는다.
   태블릿에서 2단, 좁은 화면에서 1단으로 내려가는 것도 아카이브와 같다. */
.shell_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    list-style: none;
    margin: 0;
    padding: 0;
}
.shell_cell {
    position: relative;
    border: 1px solid rgba(238, 238, 238, .1);
    /* 이웃한 칸의 선이 겹쳐 두 겹으로 보이지 않게 한다 */
    margin: -1px 0 0 -1px;
}
.shell_cell > a,
.shell_cell_in {
    display: block;
    width: 100%;
    height: 100%;
    padding: 1.8rem;
    color: inherit;
    text-decoration: none;
}
.shell_cell_t {
    display: block;
    margin: 0 0 .9rem;
    /* 12px 아래로 내리지 않는다(사내 규정).
       이 사이트는 rem 이 화면 폭에 비례한다(1rem 이 1440px 에서 8.64px, 768px 에서 8.0px).
       그래서 최소 크기가 걸린 값은 rem 이 아니라 px 로 적는다. */
    font-size: 12px;
    letter-spacing: .04em;
    color: #bcb2ff;
}
.shell_cell_h {
    margin: 0 0 1rem;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 700;
    color: #fff;
}
.shell_cell_d {
    margin: 0;
    font-size: 14px;
    line-height: 1.75;
    font-weight: 300;
    color: rgba(255, 255, 255, .6);
}
.shell_cell_d b {
    font-weight: 700;
    color: rgba(255, 255, 255, .92);
}
.shell_cell_d a {
    color: inherit;
    border-bottom: 1px solid rgba(188, 178, 255, .5);
    text-decoration: none;
}
/* 링크가 걸린 칸만 배경이 바뀐다 */
.shell_cell > a:hover,
.shell_cell > a:focus-visible {
    background: rgba(255, 255, 255, .05);
}

/* 격자 위에 놓는 절 제목 */
.shell_grid_t {
    margin: 8rem 0 0;
    padding: 0 2rem 1.6rem;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #bcb2ff;
}

@media (max-width: 1024px) {
    .shell_grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 767px) {
    .shell_grid {
        grid-template-columns: 1fr;
    }
    .shell_cell > a,
    .shell_cell_in {
        padding: 2.4rem 1.6rem;
    }
    .shell_grid_t {
        margin-top: 4.4rem;
        padding: 0 1.2rem 1.2rem;
    }
}

/* ---------- 조판 규정 ----------
   사내 규정 두 가지를 이 페이지들에서 지킨다.
     · 글자는 12px 아래로 내리지 않는다
     · 음수 자간은 -0.5px 을 넘기지 않는다

   사이트 기본 조판에 `@media(max-width:767px){ * { letter-spacing:-0.08rem } }` 가 있다.
   모바일에서 1rem = 10px 이라 모든 글자가 -0.8px 이 된다. 규정을 넘는다.
   그 규칙은 scss/front/base/_common.scss 에 있고 사이트 전체에 걸리므로 여기서 고치지 않는다.
   바꾸려면 SCSS 를 고치고 다시 컴파일해야 하는데, 모든 페이지의 모바일 화면이 함께 달라진다.
   지금은 이 네 페이지에서만 규정 값으로 되돌린다. */
@media (max-width: 767px) {
    .page_insight main *,
    .page_awards main *,
    .page_company main *,
    .page_service main *,
    .page_insight #footer *,
    .page_awards #footer *,
    .page_company #footer *,
    .page_service #footer * {
        letter-spacing: -0.5px;
    }
    /* 원래 자간이 넓은 것들은 그대로 둔다 */
    .page_insight .shell_cell_t,
    .page_awards .shell_cell_t,
    .page_company .shell_cell_t,
    .page_service .shell_cell_t,
    .ft_sitemap a,
    .ft_family a {
        letter-spacing: .1em;
    }
}