/* 원본 CSS 의 결함 보정.
 *
 * 원본 파일(common/css/*.css)은 의뢰자 확정본이라 직접 고치지 않는다.
 * 고쳐야 하는 것만 여기에 모아 뒤에서 덮어쓴다. 항목마다 이유를 남긴다.
 * 되돌리려면 해당 블록만 지우면 된다.
 *
 * base.html 에서 common/css/*.css 다음에 싣는다. 순서가 바뀌면 무효가 된다.
 */


/* `[hidden]` 을 확실히 숨긴다.
 *
 * 브라우저 기본값 `[hidden] { display: none }` 은 **우선순위가 가장 낮다.**
 * 클래스 규칙에 `display: flex` 한 줄이면 닫혀 있어야 할 것이 화면에 얹힌다.
 * 실제로 로그인 후 화면에서 모달 둘이 그렇게 떠 있었다(2026-08-09).
 * 규칙마다 `:not([hidden])` 을 붙이면 언젠가 한 곳을 빠뜨리므로 여기서 막는다. */
[hidden] { display: none !important; }


/* ── 문의 접수 팝업: 닫기 버튼이 화면 밖으로 나가 닫을 수 없다 ──────────────
 *
 * 원본:
 *   .layer_popup .pop_wrap  { height:100%; max-height:680px; top:50%;
 *                             transform:translate(-50%,-50%); }
 *   .layer_popup .pop_close { position:absolute; top:-50px; }
 *
 * 닫기 버튼이 팝업 **바깥 위쪽** 50px 에 놓인다. 그런데 팝업 자체가 680px 라
 * 세로 780px 이하 화면에서는 버튼이 화면 위로 밀려 나간다. 배경을 눌러 닫는
 * 동작도 없어서(common/js/script.js 는 .pop_close 클릭만 듣는다) **팝업을 연 뒤
 * 빠져나올 방법이 없다.** 1366x768 노트북이 정확히 이 구간이다.
 *
 * 버튼 위치는 디자인 그대로 두고, 팝업 높이만 버튼이 들어갈 만큼 줄인다.
 * 내용 영역은 원래부터 스크롤되므로(.pop_cont { overflow-y:auto }) 잘리지 않는다.
 * 120px = 버튼 오프셋 50 + 버튼 높이 60 + 여백 10.
 *
 * 세로가 넉넉한 화면에서는 680px 그대로라 보이는 결과가 달라지지 않는다.
 *
 * **≤820px 은 건드리지 않는다.** 원본이 sub.css 에서 이미 70vh 로 두고 있다
 * (sub.css:881). 처음엔 미디어쿼리 없이 썼는데, 그러면 나중에 실리는 이 파일이
 * 그 70vh 를 덮어 모바일 팝업이 680px 로 커졌다 — 고치려던 것과 상관없는
 * 화면까지 바꾼 셈이다. 범위를 데스크톱으로 좁힌다.
 */
@media screen and (min-width: 821px) {
    .layer_popup .pop_wrap {
        max-height: min(680px, calc(100vh - 120px));
    }
}


/* ── 문의·견적 팝업: 보내기 버튼이 잘려 반쪽만 보인다 ───────────────────────
 *
 * 원본:
 *   .pop_cont { height: calc(100% - 140px); overflow-y:auto; }
 *   .pop_cont > .pop_flex   (입력칸 + 개인정보 안내)
 *   .pop_cont > .pop_btn    (보내기 버튼)  ← 스크롤 영역 **안**에 있다
 *
 * 버튼이 내용과 같이 흐른다. 그래서 내용이 팝업보다 길어지면 버튼이 아래로
 * 밀려 잘린다. 견적 요청은 '사용 인원' 한 칸이 더 있어 더 일찍 잘리지만,
 * **문의하기도 세로 900px 이하에서 같은 증상**이다 — 원본의 결함이다.
 *
 * 스크롤하면 닿기는 한다. 그러나 화면에는 버튼 윗변만 걸쳐 보여서 눌러야 할
 * 것이 있다는 신호가 안 되고, 잘린 모양 자체가 고장으로 읽힌다.
 *
 * 버튼과 동의 체크박스를 **스크롤에서 빼내 항상 보이게** 한다. 둘 다 눌러야
 * 접수가 되는 것들이라 숨으면 안 된다. 스크롤은 입력칸·안내문만 한다.
 *
 * 두 칸의 고정 높이도 화면에 맞춰 줄인다. 세로가 넉넉한 화면(약 1110px 이상)
 * 에서는 clamp 상한이 원본 값(200px / 280px)이라 보이는 결과가 달라지지 않는다.
 */
.layer_popup .pop_wrap {
    display: flex;
    flex-direction: column;
}
.layer_popup .pop_wrap .pop_head {
    flex: 0 0 auto;
}
.layer_popup .pop_wrap .pop_cont {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    height: auto;        /* 원본의 calc(100% - 140px) 대신 남는 만큼 */
    min-height: 0;       /* 없으면 flex 항목이 내용 크기 밑으로 안 줄어든다 */
    overflow: visible;   /* 스크롤은 아래 .pop_flex 가 맡는다 */
}
.layer_popup .pop_wrap .pop_cont .pop_flex {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
.layer_popup .pop_wrap .pop_cont .pop_btn {
    flex: 0 0 auto;
}

/* 동의 체크박스는 안내문 아래에 있다. 안내문만 줄어들게 해서 체크박스를 남긴다. */
.layer_popup .pop_wrap .pop_cont .pop_flex > div {
    min-height: 0;
}
.layer_popup .pop_wrap .pop_cont .pop_flex .right {
    display: flex;
    flex-direction: column;
}
.layer_popup .pop_wrap .pop_cont .pop_flex .right .textarea {
    /* 줄어들기만 한다(0 1). 늘어나게 두면 세로가 긴 화면에서 원본 280px 을
       넘겨 버려 디자인이 달라진다. */
    flex: 0 1 auto;
    height: clamp(160px, 28vh, 280px);
    /* 아주 낮은 창에서 안내문이 두어 줄까지 쪼그라들지 않게 바닥을 둔다.
       동의를 받는 문구라 읽을 수 있어야 한다. 더 모자라면 입력 영역이 스크롤한다. */
    min-height: 120px;
}
.layer_popup .pop_wrap .pop_cont .pop_flex .right .checkbox {
    flex: 0 0 auto;
}
.layer_popup .pop_wrap .pop_cont .pop_flex .left textarea {
    height: clamp(120px, 18vh, 200px);
}

/* 모바일 —
 *
 * 원본은 두 칸을 위아래로 쌓는다(sub.css:883-885). 잘 되어 있다. 그런데 팝업은
 * 70vh 인데 두 칸의 고정 높이는 그대로라, 아이폰 세로(375x812)에서 **화면 한
 * 장보다 많은 371px 을 굴려야** 보내기까지 닿았다.
 *
 * vh 로 잡은 두 칸을 더 줄인다. 팝업이 화면의 70% 뿐이라 vh 기준이 실제보다
 * 크게 잡히는 탓이다. 개인정보 안내는 원래 제 안에서 스크롤하므로(common.css
 * 의 overflow-y:auto) 줄여도 다 읽을 수 있다.
 */
@media screen and (max-width: 820px) {
    .layer_popup .pop_wrap .pop_cont .pop_flex .right .textarea {
        height: 150px;
        min-height: 0;
    }
    .layer_popup .pop_wrap .pop_cont .pop_flex .left textarea {
        height: 110px;
    }
    /* 쌓인 두 칸 사이 간격. 원본은 아래 칸에만 margin-bottom 을 주어
       칸 사이가 아니라 버튼 위쪽에 여백이 생겼다. */
    .layer_popup .pop_wrap .pop_cont .pop_flex > div:last-child {
        margin-bottom: 0;
    }
    /* 버튼 아래 20px 은 팝업 안쪽 여백 30px 과 겹친다. 버튼이 스크롤을 타고
       흐르던 시절의 값이다. 이제 고정이라 위쪽 간격만 있으면 된다. */
    .layer_popup .pop_wrap .pop_btn {
        margin: 20px 0 0;
    }
}

/* 가로로 눕힌 휴대폰 —
 *
 * 70vh 는 세로가 넉넉할 때의 값이다. 812x375 로 눕히면 팝업이 263px 이 되고,
 * 머리말·버튼·여백을 빼면 **입력칸에 남는 자리가 15px** 이었다. 534px 짜리
 * 내용을 15px 창으로 굴려 보는 셈이라 사실상 못 쓴다.
 *
 * 두 가지를 한다.
 *   ① 닫기 버튼을 팝업 **안쪽**으로 옮기고, 팝업이 화면을 거의 다 쓰게 한다.
 *   ② 눕힌 화면은 **폭이 넉넉하다.** 두 칸을 다시 나란히 두어 세로를 아낀다.
 *      (세로 화면에서 쌓는 것은 폭이 좁아서지, 쌓는 것 자체가 목적이 아니다)
 *
 * ① 을 안 하면 둘 중 하나를 포기해야 한다. 닫기 버튼이 팝업 **바깥 위쪽**
 * 50px 에 놓이는 구조라, 팝업을 키우면 그 버튼이 화면 밖으로 나가 **팝업에서
 * 빠져나올 수 없고**(이 파일 첫 블록이 데스크톱에서 막아 둔 바로 그 증상),
 * 버튼 자리를 남기면 입력칸이 다시 못 쓸 만큼 좁아진다. 안으로 넣으면 둘 다 된다.
 */
@media screen and (max-width: 820px) and (max-height: 600px) {
    .layer_popup .pop_wrap {
        max-height: calc(100vh - 20px);
        padding-top: 20px;
    }
    .layer_popup .pop_wrap .pop_close {
        top: 6px;
        right: 10px;
        font-size: 26px;
        color: #111;   /* 흰 배경 위로 올라오므로 검게 */
        line-height: 1;
        z-index: 1;
    }
}
@media screen and (max-width: 820px) and (max-height: 600px) and (min-width: 600px) {
    .layer_popup .pop_wrap .pop_cont .pop_flex {
        flex-wrap: nowrap;
    }
    .layer_popup .pop_wrap .pop_cont .pop_flex > div {
        width: 49%;
        margin-bottom: 0;
    }
}


/* ── XEIcon 이 모든 아이콘을 가로챈다 ────────────────────────────────────────
 *
 * XEIcon 2.2.0 의 CSS 첫 줄에 이런 규칙이 있다.
 *
 *   i { font-family: xeicon !important; ... }
 *
 * 선택자가 그냥 `i` 다. 페이지 안의 **모든** <i> 태그를 가로챈다. 게다가
 * `!important` 라 불러오는 순서를 바꿔도 이긴다.
 *
 * 그래서 XEIcon 을 싣는 화면(마이네임서비스·주요기능·가격정책)에서는 푸터
 * 플로팅 버튼 아이콘이 전부 빈칸이 됐다. **원본도 똑같이 깨져 있었다** —
 * 원본 역시 그 세 화면에만 XEIcon 을 실었고, 메인에는 싣지 않아 메인만 멀쩡했다.
 *
 * Font Awesome 클래스가 붙은 것만 폰트를 되돌린다. 클래스 선택자라 `i` 보다
 * 우선순위가 높아 `!important` 끼리 붙어도 이긴다.
 *
 * 참고 — XEIcon 아이콘(`xi-*`)은 우리 프로젝트에도 원본에도 **사용처가 없다.**
 * 의뢰자 확인이 되면 <link> 자체를 빼는 편이 낫다. 폰트 내려받기도 줄어든다.
 */
.fa, .fas, .far, .fal, .fat, .fad, .fab,
.fa-solid, .fa-regular, .fa-light, .fa-thin, .fa-duotone {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Pro", "Font Awesome 5 Free" !important;
}
.fab, .fa-brands {
    font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands" !important;
}


/* ── 문의 접수 팝업: 플로팅 레이어가 팝업을 덮는다 ──────────────────────────
 *
 * 원본:
 *   .floating_layer { position:fixed; right:20px; z-index:1000; }
 *   .layer_popup    { position:fixed; z-index:200; }
 *
 * 플로팅 버튼이 팝업보다 위에 있다. 둘 다 화면 오른쪽이라 닫기 버튼과 자리가
 * 겹치고, 눌러도 닫기 대신 플로팅 버튼이 눌린다.
 *
 * 팝업을 위로 올린다. 모달이 떠 있는 동안 뒤쪽 버튼이 눌리지 않는 것이 맞는
 * 동작이기도 하다 — 어두운 배경이 덮고 있는데 그 위 버튼만 살아 있으면
 * 무엇을 누른 것인지 알 수 없다.
 */
.layer_popup {
    z-index: 1100;
}


/* ── 가격정책: 요금제 3개가 격자에 박혀 있다 ────────────────────────────────
 *
 * 원본 (common/css/sub.css):
 *   .pricing-card-title-wrap { grid-template-columns: 1fr 1fr 1fr }
 *   .pricing-cont-title-wrap { grid-template-columns: 17rem 1fr 1fr 1fr }
 *   .pricing-detail-div      { grid-template-columns: 1fr 1fr 1fr }
 *
 * 세 곳 모두 3열이다. 가격표를 콘솔 요금제로 바꾸면서 개수 제한이 사라졌는데,
 * 격자가 3열이면 **네 번째 요금제 카드가 아래로 접히고 비교표 칸도 한 칸씩
 * 밀려 붙는다.** 요금제를 하나 내려 두 개가 되면 반대로 빈 칸이 남는다.
 *
 * 개수는 `--plan-count` 로 화면이 내려 준다(templates/pages/pricing.html).
 * 값이 없으면 원본과 같은 3열이라, 다른 화면에는 영향이 없다.
 *
 * **원본이 좁은 화면에서 열을 접는 지점을 그대로 지킨다.** 이 보정은 sub.css
 * 다음에 실려서, 조건 없이 걸면 원본의 모바일 규칙까지 함께 덮는다. 실제로
 * 그렇게 되어 있었고, 390px 화면에서 카드가 3~4열로 남아 폭이 100px 남짓으로
 * 눌렸다. 'PROFESSIONAL' 처럼 끊을 수 없는 이름은 그 칸에 못 들어가 밖으로
 * 삐져나왔고, **가격정책 화면 전체가 옆으로 79px 밀렸다.**
 *
 *   원본 sub.css   820px 이하 → 카드 1열
 *                  600px 이하 → 비교표 머리글에서 17rem 라벨 칸을 뺀다
 *                  480px 이하 → 비교표 머리글을 감추고 항목을 세로로 세운다
 */
@media screen and (min-width: 821px) {
    .pricing-card-title-wrap {
        grid-template-columns: repeat(var(--plan-count, 3), minmax(0, 1fr));
    }
}
@media screen and (min-width: 601px) {
    .pricing-cont-title-wrap {
        grid-template-columns: 17rem repeat(var(--plan-count, 3), minmax(0, 1fr));
    }
}
@media screen and (min-width: 481px) and (max-width: 600px) {
    /* 라벨 칸 없이 요금제 수만큼. 원본은 여기서 `1fr 1fr 1fr` 로 되돌린다. */
    .pricing-cont-title-wrap {
        grid-template-columns: repeat(var(--plan-count, 3), minmax(0, 1fr));
    }
}
/* 480px 이하에서는 원본이 `display:flex` 로 세우므로 이 값은 쓰이지 않는다. */
.pricing-detail-div {
    grid-template-columns: repeat(var(--plan-count, 3), minmax(0, 1fr));
}


/* ── 헤더 보정은 없앴다 ────────────────────────────────────────────────
 *
 * 원본 header.css 의 `.h-join-btn { line-height: 0 }` 때문에 <a> 로 만든 버튼의
 * 글자가 상자 위로 튀어나왔고, 그것을 여기서 되돌리고 있었다.
 *
 * 헤더를 Mname 2.0 으로 새로 짜면서 그 클래스 자체가 사라졌다(`mn-hd`·`mn-btn`).
 * 보정 대상이 없는 규칙은 남겨 두면 다음 사람이 어디에 걸리는지 찾게 된다.
 */


/* ─────────────────────────────────────────────────────────────
 * 움직임 최소화 존중 (prefers-reduced-motion)
 *
 * 원본은 스크롤 시 섹션이 나타나는 연출과 자동 회전 슬라이드를 쓴다. 전정기능
 * 장애·멀미 민감 사용자는 OS 에서 '동작 줄이기' 를 켠다(WCAG 2.3.3 / 2.2.2).
 * 그 설정을 켠 사용자에게만 애니메이션·트랜지션을 즉시 끝나게 한다 —
 * **최종 상태(보이는 상태)는 그대로**라 콘텐츠가 사라지지 않고, 그 밖의 모든
 * 사용자에게는 원본 연출이 똑같이 나온다. 보이는 디자인은 바뀌지 않는다.
 * ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ─────────────────────────────────────────────────────────────
 * 홈 히어로 CTA — 주/보조 두 갈래
 *
 * 원본 히어로에는 '가입신청 문의'(상담) 버튼 하나뿐이라, 정작 바로 시작하는
 * 길(회원가입 → 편집기)이 히어로에 없었다. 주 동작을 '회원가입'으로 세우고
 * 문의는 보조로 남긴다(리드 확보 경로 유지). 주 버튼은 원본 `.v-connect-btn`
 * 스타일 그대로, 보조는 같은 크기의 아웃라인으로 위계만 나눈다.
 * ───────────────────────────────────────────────────────────── */
.v-btn-group {
    display: inline-flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    z-index: 5;
}

/* 보조 버튼 — 주 버튼과 같은 크기/모양, 채움만 아웃라인으로 */
.v-connect-btn--sub {
    background-color: #fff;
    border: 1px solid var(--mn-primary);
    color: var(--mn-primary);
}

.v-connect-btn--sub:hover {
    background-color: var(--mn-primary);
    border-color: var(--mn-primary);
    color: #fff;
}


/* ─────────────────────────────────────────────────────────────
 * 영문 eyebrow 라벨을 '의도된 키커'로 다듬는다 (홈)
 *
 * 원본은 OUR SERVICE 를 회색·음수 자간, 나머지(CONTENTS·KAKAOTALK 등)를 평범한
 * 16px 검정 평문으로 두어 **우연히 놓인 단어**처럼 읽혔다. 지우거나 번역하는
 * 대신, 키커의 신호(양수 자간·대문자·브랜드 블루)를 통일해 **섹션 라벨임이
 * 드러나게** 한다. 내용·크기·위치는 그대로다 — 읽히는 방식만 바꾼다.
 *
 * 대상은 앞서 aria-hidden 을 붙인 그 라벨들뿐이다(그 속성을 정확한 후크로 쓴다).
 * 브랜드 블루 #285bce 는 본문 강조(.detailfont b)와 같은 색이라 헤딩과 묶인다.
 * ───────────────────────────────────────────────────────────── */
.intro-wrap .sec-subclass,
.functiondetails span[aria-hidden="true"] {
    color: #285bce;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}