@charset "UTF-8";

/* =========================================================================
   모비고 시큐어 랜딩

   대상 파일 : /secure/index.html
   Figma     : 데스크톱 node 547-35887 "시큐어" (1920x5372)
               모바일   node 622-4920  "360"   (360x7373)

   접두사    : mgo-sec-   이 페이지 고유 섹션
     ※ `mgo-secure-` 가 아니라 `mgo-sec-` 인 이유: main-landing.css 에
        `.mgo-lp-secure__*`(메인 랜딩의 시큐어 소개 섹션)가 이미 있어
        눈으로 헷갈린다. 접두사를 다르게 두어 grep 이 갈리게 한다.
     ※ 클래스명에 'btn-style' 문자열 금지 — css/common-renew.css:9 의
        [class*='btn-style'] 부분 매칭에 걸려 width/height 가 강제된다.

   상단/하단 chrome(TopBar · GNB · Footer · 모바일 메뉴)과 협력사 블록은
   /css/components.css(접두사 lp-)가, 디자인 토큰·문서 기본은
   /css/base-mobigo.css(--mgo-*)가 갖는다. 이 파일에는 없다.

   [로드 순서] components.css → base-mobigo.css → 이 파일
   [브레이크포인트] 데스크톱 우선 — 768 이상 / 767 이하, 거터 40 / 16, max-width 1280
   [빌드] renewal CSS 관례대로 BUILD_DIR 없이 직접 경로로 로드한다.

   [자간 규칙] 시안의 letterSpacing 은 항상 글자 크기의 2% 다(Figma 변수
   40B/20L/16L… 전부 letterSpacing: 2). 다만 랜딩 4종은 그 값을 쓰지 않고
   화면 전체를 0 으로 고정한다(2026-08-06 지시) — 아래 「자간」 절 참조.

   [테두리는 border 가 아니라 inset box-shadow 로 그린다]
   Figma 는 프레임 스트로크를 '안쪽'에 그려 콘텐츠 상자를 깎지 않는다. CSS
   border 는 바깥에 더해지므로 같은 값을 써도 폭·높이가 2px 씩 커진다.
   전송 모드 패널에서는 그 2px 이 눈에 보이는 결함이 됐다 — 콘텐츠 폭이
   608 → 606 이 되면서 Air 전송 설명 둘째 줄(자연폭 606.28px)이 0.28px 차이로
   한 줄 더 감겼다(패널 +28.8px). 그래서 이 파일의 테두리 상자는
   box-shadow: inset 0 0 0 1px 을 쓴다.
   ※ main-landing · mobitax · pricing 은 아직 border 다. 거기서는 줄바꿈까지
     번지지 않아 그대로 두었지만, 같은 성격의 오차이므로 함께 정리할 것.

   [시안과 알고 있는 차이 — 의도한 것]
    ① 모바일 후기 카드가 시안보다 두 줄(약 65px) 길다. base-mobigo.css 의
       word-break:keep-all 때문이다. normal 로 바꾸면 후기 그리드가 2168.14px
       로 시안(2168)과 정확히 맞지만, 한글이 음절 사이에서 끊겨 단어가 갈라진다
       (시안 자체도 '지원합니 / 다' 로 갈라져 있다). mobitax 때와 같은 판단으로
       keep-all 을 유지한다.
   ========================================================================= */


/* =========================================================================
   1. 공통 타이포 · 버튼
   ========================================================================= */

/* 40px Bold lh1.6 — 전 섹션 제목 공용 */
.mgo-sec-display {
    font-size: 40px;
    font-weight: var(--mgo-fw-bold);
    line-height: 1.6;
}
/* 두 줄짜리 제목의 둘째 줄 강조 — Testimonials · 최종 CTA */
.mgo-sec-display em {
    font-style: normal;
    color: var(--mgo-primary);
}

/* 히어로 다운로드 — 240x56 / radius 999 / 파란 그림자 */
.mgo-sec-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 240px;
    height: 56px;
    padding: 0 40px;
    border-radius: 999px;
    background: var(--mgo-primary);
    box-shadow: var(--mgo-btn-shadow);
    color: var(--mgo-white);
    font-size: 20px;
    font-weight: var(--mgo-fw-semi);
    white-space: nowrap;
}
/* SVG 실크기 11.25×11.25 — Figma inset 21.88% 복원 */
.mgo-sec-btn img {
    flex-shrink: 0;
    width: 20px; height: 20px;
    padding: 4.375px;
}
/* 최종 CTA 버튼 — 200px, 그림자 없음(시안에 drop-shadow 가 없다) */
.mgo-sec-btn--sm {
    width: 200px;
    box-shadow: none;
}
.mgo-sec-btn--dark { background: var(--mgo-text); }

/* 파란 면 위에서는 포커스 링을 흰색으로 반전.
   ※ 알려진 문제: 공통 CSS 의 `.lp a:focus-visible`(0,2,1)이 이 규칙(0,2,0)보다
     특이도가 높아 <a class="mgo-sec-btn"> 에서는 적용되지 않는다.
     main-landing·mobitax 도 같은 상태다 — 세 페이지를 함께 고칠 것. */
.mgo-sec-btn:focus-visible,
.mgo-sec-core a:focus-visible { outline-color: #ffffff; }


/* =========================================================================
   2. Hero — bg #ecf4ff + 하단 내부 광원
   ========================================================================= */

.mgo-sec-hero {
    position: relative;
    background: var(--mgo-primary-bg1);
    overflow: hidden;
}
/* Figma 변수 "히어로 섹션": INNER_SHADOW #2F8BFF26 offset(0,-80) radius 100
   → 콘텐츠 위에 얹히는 오버레이. main-landing 히어로와 같은 처리다.
   __inner 가 z-index:1 이므로 그보다 높아야 스크린샷에 가려지지 않는다. */
.mgo-sec-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    box-shadow: inset 0 -80px 100px 0 rgba(47, 139, 255, .15);
}
.mgo-sec-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
    padding-top: var(--mgo-section-y);   /* 하단 패딩 없음 — 스크린샷이 바닥에 붙는다 */
}
.mgo-sec-hero__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: 100%;
}
.mgo-sec-hero__logo {
    width: 267px;
    height: 36px;
    flex-shrink: 0;
}
.mgo-sec-hero__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    text-align: center;
}
.mgo-sec-hero__sub {
    font-size: 20px;
    font-weight: var(--mgo-fw-semi);
    line-height: 1.8;
}

/* ── 프로그램 스크린샷 ─────────────────────────────────────────────────────
   Figma: 컨테이너 비율 1200/675(16:9)에 이미지를 넣되 위쪽부터 채우고 아래를
   잘라낸다(inset -1px 좌우, 이미지 height 100.29%). 컨테이너가 이미지보다
   의도적으로 높아 아래에 흰 여백이 남는데, 원본 PNG 의 마지막 픽셀 행이
   rgb(177,177,177) 회색선(앱 창 하단 테두리)이라 그대로 두면 그 여백과의
   경계에 가로선이 나타난다. 같은 결과를 aspect-ratio + object-fit:cover 로
   재현한다 — 자세한 계산은 css/main-landing.css §11 주석 참고(같은 이미지다).
   다른 점은 그림자뿐: 여기는 파란 그림자(0 0 40px #2F8BFF4D), main 은 검정. */
.mgo-sec-shot {
    position: relative;
    width: 100%;
    aspect-ratio: 1200 / 675;
    overflow: hidden;
    border: 1px solid var(--mgo-border-default);
    border-radius: 8px 8px 0 0;
    background: var(--mgo-white);
    box-shadow: 0 0 40px 0 rgba(47, 139, 255, .3);
}
.mgo-sec-shot img {
    position: absolute;
    top: -1px; left: -1px;
    width: calc(100% + 2px);
    aspect-ratio: 1200 / 636.25;
    height: auto;
    object-fit: cover;
    object-position: top;
}


/* =========================================================================
   3. Core Features — 파랑 그라디언트 배경, 흰 카드 2x2
   ========================================================================= */

.mgo-sec-core {
    background: linear-gradient(to bottom, var(--mgo-primary), var(--mgo-primary-light));
}
.mgo-sec-core__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding-top: var(--mgo-section-y);
    padding-bottom: var(--mgo-section-y);
}
.mgo-sec-core__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    color: var(--mgo-text-inverse);
    text-align: center;
}
.mgo-sec-core__sub {
    font-size: 20px;
    font-weight: var(--mgo-fw-light);
    line-height: 1.8;
}
.mgo-sec-core__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
}
/* 테두리를 border 가 아니라 inset box-shadow 로 그린다 — 파일 상단 주석 참고.
   Figma 는 스트로크를 프레임 '안쪽'에 그려 콘텐츠 폭을 깎지 않는다. */
.mgo-sec-feat {
    align-self: start;                   /* 행 높이에 맞춰 늘어나지 않게 */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    padding: 40px 32px;
    border-radius: 24px;
    background: var(--mgo-white);
    box-shadow: inset 0 0 0 1px var(--mgo-border-sub);
}
.mgo-sec-feat__icon {
    flex-shrink: 0;
    display: block;
    width: 80px;
    height: 80px;
    /* Figma: 40x40 아이콘이 left 20px / top 19.71px. 정중앙(20/20)에서 0.29px
       위로 올라가 있어 그대로 옮긴다. border-box 라 패딩이 곧 위치가 된다. */
    padding: 19.71px 20px 20.29px;
    border-radius: 16px;
    background: linear-gradient(to bottom, var(--mgo-primary-bg1), var(--mgo-primary-bg2));
    opacity: .8;
}
.mgo-sec-feat__icon img { width: 40px; height: 40px; }
.mgo-sec-feat__text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
.mgo-sec-feat__title {
    font-size: 28px;
    font-weight: var(--mgo-fw-bold);
    line-height: 1.6;
}
.mgo-sec-feat__desc {
    font-size: 20px;
    font-weight: var(--mgo-fw-light);
    line-height: 1.8;
}


/* =========================================================================
   4. Transmission Modes — 탭 4개 + 패널

   이 섹션만 콘텐츠 폭이 좁다. Figma 프레임이 1280 이 아니라 768 이고 좌우
   패딩 40 이라 실폭 688 이다. 다른 섹션(1200)과 다르므로 --mgo-container 를
   쓰지 않고 여기서 따로 정한다.
   ========================================================================= */

.mgo-sec-modes { background: var(--mgo-bg); }
.mgo-sec-modes__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: 100%;
    max-width: 768px;
    margin: 0 auto;
    padding: var(--mgo-section-y) var(--mgo-gutter);
}
.mgo-sec-modes__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    text-align: center;
}
/* 20px — 조립본(node 550:975) 기준. 전송 모드 상태별 시안 세 개
   (598:24748 · 598:24820 · 598:24852)에는 16px 로 되어 있으나 20px 이 정본이다
   (2026-07-29 확인). 시안을 다시 보고 16px 로 되돌리지 말 것. */
.mgo-sec-modes__sub {
    font-size: 20px;
    font-weight: var(--mgo-fw-light);
    line-height: 1.8;
    color: var(--mgo-text-sub);
}
.mgo-sec-modes__group {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

/* ── 탭 ─────────────────────────────────────────────────────────────────
   비활성 = 흰 배경 + 파란 1px 테두리 + 파란 글자
   활성   = 파란 배경 + 흰 글자 (테두리 없음)
   테두리 유무로 높이가 어긋나지 않게 활성 쪽에도 같은 폭의 투명 테두리를 둔다. */
.mgo-sec-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}
.mgo-sec-tab {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 20px;
    border: 1px solid var(--mgo-primary);
    border-radius: 8px;
    background: var(--mgo-bg);
    color: var(--mgo-primary);
    font-size: 15px;
    font-weight: var(--mgo-fw-semi);
    line-height: normal;
    text-align: center;
    white-space: nowrap;
}
.mgo-sec-tab[aria-selected="true"] {
    border-color: transparent;
    background: var(--mgo-primary);
    color: var(--mgo-white);
}

/* ── 패널 ─────────────────────────────────────────────────────────────────
   테두리는 inset box-shadow. 여기서는 단순한 오차 문제가 아니라 눈에 보이는
   결함이 된다 — border 로 두면 콘텐츠 폭이 608 → 606 으로 줄고, Air 전송 설명
   둘째 줄(자연폭 606.28px)이 0.28px 차이로 넘쳐 한 줄 더 감긴다(패널 +28.8px). */
.mgo-sec-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    width: 100%;
    padding: 40px;
    /* 16px — 조립본(node 550:986) 기준. 상태별 시안 세 개는 24px 로 되어 있으나
       16px 이 정본이다(2026-07-29 확인). 안쪽 스크린샷 상자만 24px 다. */
    border-radius: 16px;
    background: var(--mgo-bg-secondary);
    box-shadow: inset 0 0 0 1px var(--mgo-border-sub);
}
.mgo-sec-panel[hidden] { display: none; }   /* flex 가 hidden 을 이기지 않게 */
.mgo-sec-panel__text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    text-align: center;
}
.mgo-sec-panel__title {
    font-size: 20px;
    font-weight: var(--mgo-fw-semi);
    line-height: 1.8;
}
.mgo-sec-panel__desc {
    font-size: 16px;
    font-weight: var(--mgo-fw-light);
    line-height: 1.8;
    color: var(--mgo-text-sub);
}
/* 상자 비율은 네 모드 모두 같다(Figma 1120x746.67 = 3:2).
   안쪽 이미지가 차지하는 영역은 모드마다 달라서, 마크업이 --shot-* 커스텀
   프로퍼티로 넘겨준다(값의 출처는 secure/index.html 의 $arrModes['inset']).
   기본값은 2-way 것이라 프로퍼티가 없어도 깨지지 않는다.
   ※ 이미지를 padding 으로 밀어 넣으면 안 된다. 퍼센트 padding 은 높이가 아니라
     '폭'을 기준으로 풀리고, 높이가 auto 인 자식(height:100%)과 물려 aspect-ratio
     가 무시된다 — 실제로 405.33 이어야 할 상자가 437.95 로 나왔다.
   ※ inset 단축도 쓰면 안 된다. <img> 는 대체 요소(replaced element)라 width:auto
     + left/right 지정으로는 늘어나지 않고 고유 폭(1032px)을 그대로 써서 밖으로
     삐져나간다(모바일에서 가로 스크롤이 실제로 생겼다). 폭·높이를 직접 준다.
   ※ object-fit 은 넣지 않는다. 네 원본 PNG 의 고유 비율이 각자의 시안 프레임
     비율과 소수 3자리까지 같아(최대 오차 0.002) 채워도 왜곡이 생기지 않는다. */
.mgo-sec-panel__shot {
    position: relative;
    width: 100%;
    aspect-ratio: 1120 / 746.6667;
    border-radius: 24px;
    background: var(--mgo-bg);
    box-shadow: 0 0 24px 0 rgba(0, 0, 0, .05);
}
.mgo-sec-panel__shot img {
    position: absolute;
    top:    var(--shot-top,  8.3%);
    left:   var(--shot-left, 5.09%);
    width:  var(--shot-w,    89.82%);
    height: var(--shot-h,    83.17%);
}


/* =========================================================================
   5. Testimonials — bg #ecf4ff, 후기 8건 + 협력사
   ========================================================================= */

.mgo-sec-testi { background: var(--mgo-primary-bg1); }
.mgo-sec-testi__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 80px;
    padding-top: var(--mgo-section-y);
    padding-bottom: var(--mgo-section-y);
}
.mgo-sec-testi__group {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
}
.mgo-sec-testi__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    text-align: center;
}
.mgo-sec-testi__sub {
    font-size: 20px;
    font-weight: var(--mgo-fw-light);
    line-height: 1.8;
}
.mgo-sec-testi__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
}
.mgo-sec-review {
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    padding: 24px;
    border-radius: 16px;
    background: var(--mgo-white);
}
/* 시안은 카드 배경을 흰색과 흰색 80% 로 번갈아 준다(DOM 순서 1·4·5·8 = 흰색,
   2·3·6·7 = 80%). 데스크톱 2열에서는 체크무늬가 된다. #ecf4ff 위에 얹히므로
   80% 쪽이 아주 옅은 파랑(#fbfdff)으로 보인다 — 의도된 미세한 차이다. */
.mgo-sec-review:nth-child(2),
.mgo-sec-review:nth-child(3),
.mgo-sec-review:nth-child(6),
.mgo-sec-review:nth-child(7) { background: rgba(255, 255, 255, .8); }

.mgo-sec-review__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}
.mgo-sec-review__who {
    font-size: 16px;
    font-weight: var(--mgo-fw-semi);
    line-height: 1.8;
}
.mgo-sec-review__text {
    font-size: 18px;
    font-weight: var(--mgo-fw-light);
    line-height: 1.8;
}
.mgo-sec-review__tags {
    font-size: 14px;
    font-weight: var(--mgo-fw-semi);
    line-height: normal;
    color: var(--mgo-primary);
    white-space: nowrap;
}

/* 협력사 라벨만 이 페이지가 크다 — main-landing 20px / 여기 24px.
   블록 자체는 /css/components.css (§6) 가 갖는다. */
.mgo-sec-testi .lp-partners__label { font-size: 24px; }


/* =========================================================================
   6. 최종 CTA — bg #fafafa, 요금 안내 유도 + 다운로드
   ========================================================================= */

.mgo-sec-cta { background: var(--mgo-bg-secondary); }
.mgo-sec-cta__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding-top: var(--mgo-section-y);
    padding-bottom: var(--mgo-section-y);
}
.mgo-sec-cta__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    text-align: center;
}
.mgo-sec-cta__sub {
    font-size: 20px;
    font-weight: var(--mgo-fw-light);
    line-height: 1.8;
}
.mgo-sec-cta__actions {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}


/* =========================================================================
   7. 모바일 (<= 767px) — Figma node 622-4920 (360x7373)

   데스크톱과 다른 점.
     ① 좌우 거터 40 → 16                       (base-mobigo.css §4)
     ② GNB 가 로고+햄버거로 축약                (components.css §9)
     ③ 히어로 제목·서브에 줄바꿈 추가 (.lp-br-m) (components.css §9)
     ④ 핵심 기능 2열 → 1열
     ⑤ 전송 모드 탭이 작아진다 (h42→34 등)
     ⑥ 후기 2열 → 1열, 협력사 4열 → 2열 (협력사는 공통 CSS §9)
     ⑦ 최종 CTA 버튼이 가로 → 세로
   폰트 크기(40/28/24/20/18/16/14)와 py-80 섹션 여백은 데스크톱과 같다.
   ========================================================================= */

@media screen and (max-width: 767px) {

    /* ④ 핵심 기능 — 2열 → 1열 */
    .mgo-sec-core__grid { grid-template-columns: 1fr; }

    /* ⑤ 전송 모드 — 컨테이너 폭 제한 해제 + 탭 축소 */
    .mgo-sec-modes__inner { max-width: none; }
    .mgo-sec-tabs { gap: 4px; }
    .mgo-sec-tab {
        gap: 6px;
        height: 34px;
        padding: 0 14px;
        border-radius: 6px;
        font-size: 14px;
    }
    /* 패널 좌우 패딩만 줄고 위아래는 40 유지 */
    .mgo-sec-panel { padding: 40px 16px; }

    /* ⑥ 후기 — 2열 → 1열 */
    .mgo-sec-testi__grid { grid-template-columns: 1fr; }

    /* ⑦ 최종 CTA 버튼 — 가로 → 세로, 간격 24 → 16 */
    .mgo-sec-cta__actions {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
}