/* ==========================================================================
   프론트 모바일 공통 기본기

   화면(모듈)마다 다시 만들지 않도록 "모바일에서 늘 필요한 것"만 여기 둡니다.
   - 폼 입력 16px  : iOS Safari 자동 확대 방지 (아래 §1)
   - 안전영역 변수 : 노치/제스처바 기기의 하단 여백 (§2)
   - .m-actionbar  : 하단 고정 액션바 (§3)
   - .m-tap        : 최소 터치 크기 (§4)

   ★ 규약
   - 여기에는 **유틸리티만** 둡니다. 특정 화면 전용 스타일은 각 모듈 CSS
     (lms.css / family-event.css / event.css / approval.css)에 두세요.
   - 전역 태그 셀렉터로 색·간격을 바꾸지 마세요. 테마/테넌트 CSS 를 덮어써서
     테넌트마다 다른 사고가 납니다. §1 만 예외이며 그 이유는 아래에 적었습니다.
   - 브레이크포인트는 Bootstrap 5 값(576/768/992/1200)만 씁니다.
   ========================================================================== */

/* ── §0. 공통 변수 ──────────────────────────────────────────────────────
   safe-area-inset-* 는 값을 지원하지 않는 브라우저에서 0px 로 떨어집니다. */
:root {
    --m-safe-bottom: env(safe-area-inset-bottom, 0px);
    --m-tap-min: 44px;   /* 터치 타겟 최소 크기 (WCAG 2.5.5 / iOS HIG 기준) */
}

/* ── §1. 폼 입력 16px (모바일) ──────────────────────────────────────────
   iOS Safari 는 글자 크기가 16px 미만인 입력에 포커스가 가면 페이지를
   **자동으로 확대**합니다. 확대된 뒤에는 사용자가 직접 축소하지 않는 한
   가로 스크롤이 생겨 레이아웃이 깨진 것처럼 보입니다.
   Bootstrap 기본값이 1rem(16px)이라 대부분은 이미 안전하지만,
   .form-control-sm / .form-select-sm 은 14px 라 확대 대상입니다.

   폰트 크기만 올리고 padding 은 건드리지 않아 시각적 변화는 최소입니다. */
@media (max-width: 767.98px) {
    .form-control,
    .form-select,
    .form-control-sm,
    .form-select-sm,
    input[type="text"],
    input[type="tel"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="date"],
    input[type="time"],
    textarea,
    select {
        font-size: 16px;
    }
}

/* ── §2. 하단탭이 있을 때의 본문 여백 ───────────────────────────────────
   하단 고정 내비(BottomTab)가 켜진 페이지는 body 에 .has-bottomtab 이 붙습니다.
   붙지 않은 페이지에는 아무 영향이 없습니다. */
@media (max-width: 767.98px) {
    body.has-bottomtab {
        padding-bottom: calc(64px + var(--m-safe-bottom));
    }
}

/* ── §3. 하단 고정 액션바 ───────────────────────────────────────────────
   핵심 버튼(신청·제출·응답)을 엄지 도달 범위에 고정합니다.

   position: sticky 를 씁니다 — fixed 와 달리 문서 흐름에 남아 있어
   부모 컨테이너 폭을 그대로 따르고, 모바일 브라우저의 주소창 접힘/펼침에도
   흔들리지 않습니다. (fixed 가 필요한 화면은 행사 신청 위저드처럼
   자체 CSS 로 이미 구현돼 있으니 그쪽을 따르세요.)

   사용법:
     <div class="m-actionbar"> <button class="btn btn-primary">제출</button> </div>
   PC 에서 우측 정렬로 되돌리려면 .m-actionbar--pc-right 를 함께 붙입니다. */
.m-actionbar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    gap: 10px;
    margin-top: 18px;
    padding: 12px 0 calc(14px + var(--m-safe-bottom));
    background: #fff;
    border-top: 1px solid #e6e9ee;
}

.m-actionbar > .btn {
    flex: 1;
    min-height: var(--m-tap-min);
    padding: 13px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
}

/* 하단탭과 겹치지 않게 — 탭 높이만큼 띄웁니다. */
@media (max-width: 767.98px) {
    body.has-bottomtab .m-actionbar {
        bottom: calc(56px + var(--m-safe-bottom));
    }
}

@media (min-width: 992px) {
    .m-actionbar--pc-right { justify-content: flex-end; }

    .m-actionbar--pc-right > .btn {
        flex: none;
        min-width: 148px;
        padding: 11px 22px;
        font-size: 15px;
    }
}

/* ── §4. 최소 터치 크기 ─────────────────────────────────────────────────
   전역 .btn 에 걸면 게시판 스킨·에디터 툴바처럼 조밀한 UI 가 어긋납니다.
   그래서 **옵트인 유틸**로 둡니다. 모듈 전체에 걸고 싶으면 각 모듈 CSS 에서
   `.lms-shell .btn { min-height: var(--m-tap-min); }` 처럼 스코프를 붙이세요. */
@media (max-width: 767.98px) {
    .m-tap {
        min-height: var(--m-tap-min);
        min-width: var(--m-tap-min);
    }

    /* 아이콘만 있는 정사각 버튼용 */
    .m-tap-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: var(--m-tap-min);
        min-width: var(--m-tap-min);
    }
}

/* ── §5. 가로 스크롤 차단 ───────────────────────────────────────────────
   body 에 overflow-x:hidden 을 걸면 position:sticky 가 조용히 죽습니다
   (스크롤 컨테이너가 바뀌기 때문). 그래서 전역으로 걸지 않고,
   "안에서 가로로 스크롤돼야 하는 것"만 감싸는 유틸을 제공합니다.
   표·코드블록·넓은 다이어그램을 이걸로 감싸세요. */
.m-scroll-x {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 긴 URL·단어가 컨테이너를 밀어내는 것을 막습니다(가로 스크롤의 흔한 원인). */
.m-break-word {
    word-break: break-word;
    overflow-wrap: anywhere;
}