@charset "UTF-8";

/* =========================================================================
   모비고 요금안내 랜딩

   대상 파일 : /pricing/index.html
   Figma     : 데스크톱 node 547-36047 "요금" (1920x2008)
               모바일   node 622-6580  "360"  (360x3327)
               요금제 카드 개정 node 1151-3763 — 엔터프라이즈가 별도 행에서
               요금제 카드 4번째로 편입, note 색이 tertiary(#a3a3a3)로,
               CTA 라벨이 신청하기/영업팀 문의하기로 바뀜 (2026-08-11)

   접두사    : mgo-price-   이 페이지 고유 섹션 (요금제 카드 · FAQ)

   상단/하단 chrome(TopBar · GNB · Footer · 모바일 사이드 메뉴)과 리셋·컨테이너는
   /css/components.css(접두사 lp-)가, 디자인 토큰·문서 기본은
   /css/base-mobigo.css(--mgo-*)가 갖는다. 이 파일에는 없다.
   최초 퍼블리싱 때는 그 두 덩어리를 main-landing.css 에서 통째로 복사해
   갖고 있었다(약 400줄). 같은 규칙이 두 벌이라 한쪽만 고치면 어긋나는
   상태여서 공통 파일로 올렸다.

   ※ `mgo-pr-` 로 줄이지 않은 이유: --mgo-primary / --mgo-primary-bg1 등
      토큰 이름과 눈으로 구분이 안 된다.
   ※ 클래스명에 'btn-style' 문자열 금지 — css/common-renew.css:9 의
      [class*='btn-style'] 부분 매칭에 걸려 width/height 가 강제된다.

   [격리 정책 — 자립형]
   include/header.html · footer.html 미사용. 근거는 main-landing.css 상단과 동일.

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


/* =========================================================================
   1. Pricing Section — 요금제 카드 4장 (건수별·자동이체·무제한·엔터프라이즈)
   ========================================================================= */

.mgo-price-plans { background: var(--mgo-bg); }
.mgo-price-plans__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    padding-top: var(--mgo-section-y);
    padding-bottom: var(--mgo-section-y);
}
.mgo-price-plans__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: center;
}
/* 40px Bold lh1.6 */
.mgo-price-display {
    font-size: 40px;
    font-weight: var(--mgo-fw-bold);
    line-height: 1.6;
}
.mgo-price-plans__sub {
    font-size: 20px;
    font-weight: var(--mgo-fw-light);
    line-height: 1.8;
}
.mgo-price-plans__group {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}
/* 요금제 카드 그리드 — minmax(0,1fr) 로 4개 카드 폭을 균일하게 강제한다.
   flex(flex:1 0 0)로는 featured 카드의 padding(0 vs 24) 차이 때문에 폭이
   어긋났다. grid 는 트랙 폭이 고정이라 box-sizing 과 무관하게 border-box 가
   같아진다. align-items:center 는 featured(더 큰 카드)를 세로 중앙에 놓아
   위아래로 대칭으로 삐져나오게 한다 — 시안 node 1151-3754·3877 의 y 오프셋
   (featured 가 다른 카드보다 위로 시작)과 정확히 일치한다.
   열 수: ≥1280 4열 / 768–1279 2×2 / ≤767 1열 (§3 에서 전환). */
.mgo-price-plans__row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    gap: 24px;
    width: 100%;
}


/* ── 요금제 카드 ──────────────────────────────────────────────────────────
   그림자: 시안 코드젠이 일반 카드는 drop-shadow-[0 0 20px], 추천 카드는
   shadow-[0 0 40px] 로 서로 다르게 뽑았다. filter:drop-shadow 는 Figma
   radius 의 절반으로 환산되므로(20 → radius 40) 두 값은 같은 효과이고,
   box-shadow 는 radius 와 1:1 이라 40px 로 통일한다. */
.mgo-price-card {
    /* grid item — 폭은 부모 그리드 트랙(minmax(0,1fr))이 균일하게 정한다.
       min-width:0 은 긴 기능 텍스트가 트랙을 밀어 넓히지 못하게 막는다. */
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    border: 1px solid var(--mgo-border-sub);
    border-radius: 16px;
    background: var(--mgo-white);
    box-shadow: 0 0 40px 0 rgba(0, 0, 0, .05);
}
.mgo-price-card__body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}
.mgo-price-card__head {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.mgo-price-card__name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.mgo-price-card__name {
    font-size: 28px;
    font-weight: var(--mgo-fw-bold);
    line-height: 1.6;
    white-space: nowrap;
}
.mgo-price-card__desc {
    width: 100%;
    font-size: 18px;
    font-weight: var(--mgo-fw-light);
    line-height: 1.8;
}
.mgo-price-card__price {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}
/* 기본 note = SemiBold #a3a3a3(tertiary) / 자동이체만 --accent 로 #2f8bff (시안 node 1151-3763) */
.mgo-price-card__note {
    font-size: 16px;
    font-weight: var(--mgo-fw-semi);
    line-height: 1.4;
    color: var(--mgo-text-tertiary);
}
.mgo-price-card__note--accent {
    color: var(--mgo-primary);
}
.mgo-price-card__amount {
    font-size: 24px;
    font-weight: var(--mgo-fw-semi);
    line-height: 1.8;
}

.mgo-price-card__features {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
.mgo-price-card__feature {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    font-size: 16px;
    font-weight: var(--mgo-fw-light);
    line-height: 1.8;
}
/* 미포함 항목 — prohibit 아이콘 + 보조 텍스트 색 */
.mgo-price-card__feature--off { color: var(--mgo-text-sub); }
/* SVG 실크기 16.25×16.25 — Figma inset 9.38% 복원 */
.mgo-price-card__feature img {
    flex-shrink: 0;
    width: 20px; height: 20px;
    padding: 1.875px;
}

.mgo-price-card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 56px;
    padding: 0 40px;
    border-radius: 8px;
    background: var(--mgo-primary-bg1);
    color: var(--mgo-primary);
    font-size: 20px;
    font-weight: var(--mgo-fw-semi);
    line-height: 1.4;               /* Label/20B — 버튼은 height:56px 고정이라 폭/높이엔 영향 없으나 시안 값을 따른다 */
    text-align: center;
    white-space: nowrap;
}
/* 추천 요금제의 강조 CTA — 데스크톱 전용. 모바일 시안은 다른 카드와 동일하다. */
.mgo-price-card__cta--primary {
    background: var(--mgo-primary);
    color: var(--mgo-white);
}


/* ── 추천 카드(자동이체) ────────────────────────────────────────────────────
   데스크톱: 파랑 그라디언트 테두리 래퍼 + 상단 띠 + 흰 본문
   모바일  : 평범한 흰 카드 + 제목 옆 '추천' 칩 (§20 에서 전환) */
.mgo-price-card--featured {
    gap: 0;
    padding: 0;
    overflow: hidden;
    border-color: var(--mgo-primary);
    background: linear-gradient(to right, var(--mgo-primary), var(--mgo-primary-light));
}
.mgo-price-card--featured .mgo-price-card__body {
    gap: 24px;
    padding: 16px 24px 24px;
    background: var(--mgo-bg);
}
.mgo-price-card__badge {
    padding: 12px 24px;
    color: var(--mgo-white);
    font-size: 15px;
    font-weight: var(--mgo-fw-semi);
    line-height: 1.4;               /* Label/15B — 이 값이라야 띠 높이가 12+21+12=45px (시안 node 1151:3785) */
    white-space: nowrap;
}
/* 모바일 전용 칩 — 데스크톱에서는 상단 띠가 그 역할을 한다 */
.mgo-price-card__chip {
    display: none;
    flex-shrink: 0;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--mgo-primary);
    color: var(--mgo-white);
    font-size: 14px;
    font-weight: var(--mgo-fw-semi);
    line-height: 1.4;               /* Label 계열 — 데스크톱 badge 와 동일 표기 */
    white-space: nowrap;
}


/* ── 엔터프라이즈 카드 ───────────────────────────────────────────────────────
   시안 node 1151-3763 에서 별도 가로 행이 아니라 요금제 카드 4번째로 편입됐다.
   구조·스타일은 다른 카드와 동일(.mgo-price-card)하고, 기능이 2개뿐이라
   features 박스를 3줄 높이(103px, node 1151:3834 h103 고정)로 예약해 다른
   카드와 CTA 위치를 맞춘다 — 행이 align-items:center 라 높이가 다르면 버튼이
   어긋난다. 모바일은 1열 스택이라 정렬이 불필요하므로 §3 에서 해제한다.
   CTA 는 다른 비추천 카드와 같은 .mgo-price-card__cta(연한 bg1)이며,
   외부 구글 폼으로 나가는 링크라 마크업에만 target=_blank·sr 보조텍스트가 붙는다. */
.mgo-price-card--enterprise .mgo-price-card__features {
    min-height: 103px;
}


/* =========================================================================
   2. FAQ Section — bg #f9fafb, 질문 5개
   펼친 상태 시안은 node 591-1036 에 따로 있다(질문↔답변 gap 12, 답변 16px Light).
   ========================================================================= */

.mgo-price-faq { background: #f9fafb; }
.mgo-price-faq__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding-top: var(--mgo-section-y);
    padding-bottom: var(--mgo-section-y);
}
.mgo-price-faq__title {
    width: 100%;
    font-size: 32px;
    font-weight: var(--mgo-fw-bold);
    line-height: 1.6;
    text-align: center;
}
.mgo-price-faq__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    overflow: hidden;
}
.mgo-price-faq__item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* 펼친 상태 시안(node 591-1036)의 질문↔답변 간격.
       접힌 상태에서는 답변이 hidden 이라 flex gap 이 적용되지 않는다. */
    gap: 12px;
    width: 100%;
    padding: 24px;
    border-radius: 16px;
    background: var(--mgo-bg);
}
/* 질문 행 = 토글 버튼. h3 래퍼는 스타일 없이 시맨틱만 담당한다. */
.mgo-price-faq__heading { width: 100%; }
.mgo-price-faq__row {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    /* 공통 리셋(§1)은 button 의 margin 만 지운다. UA 기본 padding(1px 6px)이
       남으면 행 높이가 36 대신 38px 이 되어 항목마다 2px 씩 커진다. */
    padding: 0;
    text-align: left;
}
.mgo-price-faq__q {
    flex: 1 0 0;
    min-width: 0;
    font-size: 20px;
    font-weight: var(--mgo-fw-semi);
    line-height: 1.8;
}
/* SVG 실크기 13.75×7.5 — Figma inset 29.17%/14.58%/33.33%/16.67% 복원 */
.mgo-price-faq__caret {
    flex-shrink: 0;
    width: 20px; height: 20px;
    padding: 5.834px 2.916px 6.666px 3.334px;
}
/* 펼치면 caret-down → caret-up. 시안은 같은 벡터를 180도 돌려 쓴다
   (-rotate-180 + -scale-x-100 = 대칭 셰브론에서는 rotate(180deg) 와 동일).
   시안에 모션 규격이 없어 transition 은 넣지 않았다 — 즉시 전환. */
.mgo-price-faq__row[aria-expanded="true"] .mgo-price-faq__caret {
    transform: rotate(180deg);
}
.mgo-price-faq__answer {
    width: 100%;
    font-size: 16px;
    font-weight: var(--mgo-fw-light);
    line-height: 1.8;
    color: var(--mgo-text);
}


/* =========================================================================
   3. 반응형 — 카드 열 수를 브레이크포인트별로 바꾼다
   시안: ≥1280 4열(node 1151-3754) / 768–1279 2×2(node 1151-3877) /
         767 1열(node 1151-4115) / 360 1열(node 1151-3995).
   카드 폭은 §1 의 grid(minmax(0,1fr))가 균일하게 맞추므로 여기서는
   열 수(grid-template-columns)만 바꾼다. 세로 정렬·featured 오버행·
   엔터프라이즈 features 높이 예약(103px)은 §1 규칙을 그대로 상속한다.
   ========================================================================= */

/* ── 태블릿 768–1279 : 4열 → 2×2 그리드 (node 1151-3877) ───────────────────
   featured 는 데스크톱과 동일하게 그라디언트 테두리 + 상단 띠를 유지한다
   (흰 카드+칩 전환은 ≤767 에서만). featured(row1 col2)가 더 커서
   align-items:center 로 세로 중앙 정렬되고, 엔터프라이즈(row2 col2)는
   무제한과 같은 행이라 features 103px 예약으로 버튼이 정렬된다. */
@media screen and (min-width: 768px) and (max-width: 1279px) {
    .mgo-price-plans__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 모바일 ≤767 : 1열 (node 1151-4115 767 · 1151-3995 360) ────────────────
   데스크톱과 다른 점:
     ① 거터 40 → 16                    (base-mobigo.css §4)
     ② GNB 가 로고+햄버거로 축약        (components.css §9)
     ③ 요금제 카드 → 1열 (엔터프라이즈 카드 포함)
     ④ 카드 제목 28px Bold → 24px SemiBold
     ⑤ 추천 카드가 평범한 흰 카드 + 제목 옆 '추천' 칩으로 바뀌고
        CTA 도 다른 카드와 같아진다
     ⑥ 엔터프라이즈도 1열 스택이라 features 높이 예약 해제(정렬 불필요)
     ⑦ 제목·서브 줄바꿈 추가            (.lp-br-m, components.css §9)
   ①②⑦ 은 공통 CSS 가 처리한다. 이 블록에는 ③~⑥ 만 남는다.
   폰트 스케일(40/32/24/20/18/16/15/14)과 py-80 은 데스크톱과 같다.
   FAQ 섹션은 데스크톱과 완전히 동일하다(시안 diff 0줄). */

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

    /* 제목 두 번째 줄 "요금제로 시작하세요" 가 328.4px 를 요구하는데 콘텐츠 폭이
       정확히 328px 이라 0.4px 차이로 3줄이 된다(시안은 2줄).
       원인은 디자인이 아니라 계측 차이다 — CSS letter-spacing 은 마지막 글자
       뒤에도 자간을 붙여 폭에 포함시키는데 Figma 는 붙이지 않는다(0.8px).
       그만큼만 좌우로 되돌려 준다. 컨테이너 16px 패딩 중 1px 을 쓰는 것이라
       가로 넘침은 발생하지 않고, 가운데 정렬이라 시각적으로도 감지되지 않는다. */
    .mgo-price-plans__head {
        /* width:100% 만 두면 음수 마진이 상쇄되어 사용 폭이 그대로다 — 폭도 함께 키운다 */
        width: calc(100% + 2px);
        margin-left: -1px;
        margin-right: -1px;
    }

    /* ── 요금제 카드 : → 1열 (grid 1트랙, 카드는 stretch 로 폭 채움) ── */
    .mgo-price-plans__row { grid-template-columns: minmax(0, 1fr); }
    .mgo-price-card__name {
        font-size: 24px;
        font-weight: var(--mgo-fw-semi);
        line-height: 1.8;
    }

    /* 추천 카드가 평범한 흰 카드로 — 그라디언트·상단 띠 제거, 칩 노출 */
    .mgo-price-card--featured {
        gap: 24px;
        padding: 24px;
        overflow: visible;
        border-color: var(--mgo-border-sub);
        background: var(--mgo-white);
    }
    .mgo-price-card--featured .mgo-price-card__body {
        padding: 0;
        background: none;
    }
    .mgo-price-card__badge { display: none; }
    .mgo-price-card__chip  { display: block; }
    /* 강조 CTA 도 다른 카드와 같아진다 */
    .mgo-price-card__cta--primary {
        background: var(--mgo-primary-bg1);
        color: var(--mgo-primary);
    }

    /* ── 엔터프라이즈 카드 : 1열 스택에서는 CTA 정렬이 불필요 → features 높이 예약 해제 ── */
    .mgo-price-card--enterprise .mgo-price-card__features { min-height: 0; }
}