/* =========================================================
   상담 접수 폼 컴포넌트 (.csf)

   같은 마크업이 화면 폭에 따라 두 모양으로 뜬다 - 모바일은 화면 아래 붙는 시트,
   데스크톱(961px~)은 중앙 모달. 폼 · 검증 · 약관은 한 벌이고 껍데기(.csf-panel · .csf-col)만 달라진다.

   Figma: mobile 2186:101312 · web 2186:100977 · 약관 컴포넌트셋 2147:45252

   짝을 이루는 파일 - 셋을 함께 옮겨야 동작한다:
     CI/apply/application/modules/common/views/inc/partials/_consult_form.php
     apply/js/consult-form.js

   .landing-v2 같은 페이지 스코프에 기대지 않는다 - 어느 화면에 넣어도 같은 모양이 나와야 해서다.
   대신 base.css / layout.css 의 전역 폼 규칙(input[type=text]{height:50px...} 등)을 이기려고
   모든 값을 .csf 하위에서 명시한다.

   체크박스는 컴포넌트가 아니다. base.css:386-389 의 엘리먼트 선택자
   (input[type=checkbox] 는 display:none, 바로 뒤 label 의 ::before 가 박스를 그린다)가
   apply 의 모든 체크박스에 무조건 걸리고, 화면마다 그 위에 덧칠해 되돌리는 구조다
   (.chk-type · .all_checkbox 등이 이미 그렇게 한다). 여기 규칙들도 같은 방식의 덧칠이다.
   붙였다 뗄 수 있는 이름이 없으므로 .csf 안으로만 범위를 좁힌다 - base.css 를 고치면
   시안이 없는 화면 18곳(주문 · 꽃배송 · 상품 옵션 · 이벤트 응모 등)까지 함께 바뀐다.
   주의: 마크업상 체크박스와 그 label 사이에 다른 요소를 끼우면 박스가 사라진다.
   시안은 20×20 / 테두리 #BFC2C5 지만 전역 규칙은 24×24 / #CFD6E6 - 공유 쪽을 택했다.
   ========================================================= */

.csf {
    position: fixed;
    inset: 0;
    z-index: 1000;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
.csf[hidden] {
    display: none !important;
}
/* hidden 속성의 UA 스타일(display:none)은 특정도 0 이라 .csf-body{display:flex} 같은
   클래스 규칙에 진다 - 시트 안에서는 el.hidden 이 항상 이기도록 못 박는다. */
.csf [hidden] {
    display: none !important;
}

.csf-dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* 높이 상한은 vh 가 아니라 부모(.csf) 기준 % 다.
   모바일 브라우저에서 100vh 는 '툴바가 숨은 큰 뷰포트' 기준이라 실제 보이는 높이보다 크다.
   반면 position:fixed + inset:0 인 .csf 는 보이는 영역에 맞게 잡히므로, 여기에 맞춰야
   툴바가 화면의 10% 를 넘는 환경(iOS Safari 등)에서 패널이 위로 삐져나가 제목·닫기 버튼이 잘리지 않는다.
   dvh 로도 되지만 %는 지원 여부를 따질 필요가 없고 .csf 크기가 바뀌면 자동으로 따라간다. */
.csf-panel {
    position: absolute;
    left: 0;
    right: 0;/* 시안의 Check Box Symbol 은 체크 상태가 둘이다(Form=Solid | Outline):
     모두 동의 → Solid  : #F57A77 채움 + 흰 체크
     개별 항목 → Outline: 흰 배경 + #F57A77 테두리 · 체크

   체크 글리프는 전역 컴포넌트가 쓰는 Material Icons 리거처(\e5ca)가 아니라 시안과 같은
   모양(images/icon/check.svg - office 와 같은 파일)을 쓴다.
   상자를 그리는 ::before 에 mask 를 걸면 배경까지 함께 잘려 Solid 를 만들 수 없으므로,
   상자는 ::before 가 그대로 그리고 체크만 ::after 로 얹는다.
   파일은 하나만 두고 background-color 로 색을 나눈다 - 흰 글리프 사본을 따로 두지 않는다. */
    .csf .csf-agrees input[type="checkbox"]:checked + label::before {
        content: "";
    }
    .csf .csf-agrees input[type="checkbox"]:checked + label::after {
        content: "";
        position: absolute;
        left: 0;
        width: 24px;
        height: 24px;
        /* 파일은 16 뷰박스에 체크가 가운데 50% 를 차지한다 - 24 로 그리면 체크가 12,
           시안(20 상자에 체크 10)과 같은 비율이 된다. */
        -webkit-mask: url(/images/icon/check.svg) no-repeat center / 24px 24px;
        mask: url(/images/icon/check.svg) no-repeat center / 24px 24px;
        background-color: #fff;
    }
    /* 개별 항목만 Outline 으로 되돌린다 - 상자는 흰 배경 · 분홍 테두리, 체크도 분홍. */
    .csf .csf-agree-row input[type="checkbox"]:checked + label::before {
        border-color: #f57a77;
        background: #fff;
    }
    .csf .csf-agree-row input[type="checkbox"]:checked + label::after {
        background-color: #f57a77;
    }
    bottom: 0;
    display: flex;
    max-height: 90%;
    background: #fff;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    transition: transform 0.25s ease;
}

.csf.is-open .csf-dim {
    opacity: 1;
}
.csf.is-open .csf-panel {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .csf-dim,
    .csf-panel {
        transition: none;
    }
}

/* 내용 컬럼. 가로 패딩 20 을 포함해 640 이므로 데스크톱 내용 폭이 정확히 600 이 된다(시안값).
   모바일에서는 뷰포트 폭을 다 쓰고 375 기준 내용 폭 335 - 역시 시안과 같다. */
.csf-col {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
    width: 100%;
    max-width: 640px;
    min-width: 0;
    min-height: 0;
    margin: 0 auto;
    padding: 24px 20px calc(16px + env(safe-area-inset-bottom, 0px));
}

/* --- 헤더 --- */
.csf-head {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.csf-title {
    margin: 0;
    overflow: hidden;
    color: #191a1a;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: -0.4px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.csf-close {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 6px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
}
.csf-close img {
    width: 20px;
    height: 20px;
}

/* --- 스크롤 영역 --- */
.csf-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 20px;
    min-height: 0;
    overflow-y: auto;
    /* overflow-y 를 주면 overflow-x 도 auto 가 되어 스크롤 컨테이너가 된다.
       내용 상자 밖으로 나간 것은 잘리고, 왼쪽 넘침은 스크롤로도 볼 수 없다.
       입력란은 좌우 폭을 꽉 채우므로 :focus 링(3px)이 그대로 잘린다 - 안쪽 여백으로 자리를 만든다. */
    padding-bottom: 12px;
    /* 좌우 여백(.csf-col 의 20px)을 스크롤 영역 안으로 끌어들인다.
       음수 margin 으로 영역만 넓히고 같은 값을 padding 으로 돌려주므로 내용 위치는 그대로다.
         왼쪽  - :focus 링이 경계에서 잘리지 않게 한다
         오른쪽 - 위에 더해, 스크롤바가 입력란 · 글자와 같은 선에 서지 않게 여백 위로 뺀다 */
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
}

/* --- 메시지 칸 ---
   이름 · 연락처는 입력 필드 컴포넌트(.fld / partials/_input_field)가 그린다.
   메시지는 DS 상 별개 컴포넌트(TextAreaField)라 여기 남는다. */
.csf-field {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.csf .csf-textarea {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    border: 1px solid #dadddf;
    border-radius: 4px;
    background: #fff;
    color: #242729;
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: -0.3px;
}
/* 글자수 표시가 테두리 안에 들어가야 해서 textarea 를 감쌌다 - 테두리는 이 상자가 그린다.
   높이 118 = 위아래 여백 10+10 + 입력 영역 72 + 간격 8 + 글자수 줄 18 (시안값). */
.csf .csf-textbox {
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-sizing: border-box;
    height: 118px;
    padding: 10px 16px;
    border: 1px solid #dadddf;
    border-radius: 4px;
    background: #fff;
}
.csf .csf-textarea {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    resize: none;
}
.csf .csf-textarea:focus {
    border: 0;
    outline: none;
}
/* 스크롤바를 글자 밖으로 - 시트 본문과 같은 처리 */
.csf .csf-textarea {
    margin-right: -8px;
    padding-right: 8px;
}
.csf-count {
    flex-shrink: 0;
    margin: 0;
    color: #777c81;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: -0.21px;
    text-align: right;
}
.csf .csf-textarea::placeholder {
    color: #95989b;
}
/* 포커스는 상자가 받는다 - 테두리가 상자에 있어서다. DS 의 청록 링(Focus-ring/faint). */
.csf .csf-textbox:focus-within {
    border-color: #00b5c2;
    box-shadow: 0 0 0 3px rgba(0, 181, 194, 0.16);
}
/* 오류. 메시지 상자는 DS TextAreaField 값(input/filled/border/error)을 따른다 -
   입력 필드(.fld)의 #F23B3B 와 다른데, DS 가 컴포넌트마다 다른 빨강을 쓴다. */
.csf .csf-textbox.is-invalid,
.csf .csf-textbox.is-invalid:focus-within {
    border-color: #e02820;
    box-shadow: 0 0 0 3px rgba(224, 40, 32, 0.12);
}
.csf .csf-textbox.is-invalid .csf-count {
    color: #e02820;
    opacity: 0.55;
}

/* 오류 문구. 시안에 색 지정이 없어 브랜드색(#F57A77)과 구분되는 경고색을 따로 쓴다 -
   같은 색이면 '강조'인지 '오류'인지 읽히지 않는다. */
.csf-error {
    margin: 0;
    color: #e02820;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
}

/* --- 동의 --- */
.csf-agrees {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
/* 시안의 체크박스 좌측 인셋(10px)을 행 패딩으로 재현한다 -
   전역 체크박스 컴포넌트는 label 의 padding-left 32px 안에 박스를 그려서 따로 감쌀 수 없다. */
.csf-agree-all {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 48px;
    padding: 4px 0 4px 10px;
    border-bottom: 1px solid #e3e6e8;
}
.csf-agree-all label {
    color: #242729;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -0.32px;
}
.csf-agree-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.csf-agree-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0 4px 10px;
}
.csf-agree-row label {
    flex: 1 1 auto;
    min-width: 0;
    color: #242729;
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.3px;
}
/* 시안의 Check Box Symbol 은 체크 상태가 둘이다(Form=Solid | Outline):
     모두 동의 → Solid  : #F57A77 채움 + 흰 체크
     개별 항목 → Outline: 흰 배경 + #F57A77 테두리 · 체크

   체크 글리프는 전역 규칙이 쓰는 Material Icons 리거처(\e5ca, 폰트는 css/fonts.css 자체 호스팅)가
   아니라 시안과 같은 모양(images/icon/check.svg - office 와 같은 파일)을 쓴다.
   상자를 그리는 ::before 에 mask 를 걸면 배경까지 함께 잘려 Solid 를 만들 수 없으므로,
   상자는 ::before 가 그대로 그리고 체크만 ::after 로 얹는다.
   파일은 하나만 두고 background-color 로 색을 나눈다 - 흰 글리프 사본을 따로 두지 않는다. */
.csf .csf-agrees input[type="checkbox"]:checked + label::before {
    content: "";
}
.csf .csf-agrees input[type="checkbox"]:checked + label::after {
    content: "";
    position: absolute;
    left: 0;
    width: 24px;
    height: 24px;
    /* 파일은 16 뷰박스에 체크가 가운데 50% 를 차지한다 - 24 로 그리면 체크가 12,
       시안(20 상자에 체크 10)과 같은 비율이 된다. */
    -webkit-mask: url(/images/icon/check.svg) no-repeat center / 24px 24px;
    mask: url(/images/icon/check.svg) no-repeat center / 24px 24px;
    background-color: #fff;
}
/* 개별 항목만 Outline 으로 되돌린다 - 상자는 흰 배경 · 분홍 테두리, 체크도 분홍. */
.csf .csf-agree-row input[type="checkbox"]:checked + label::before {
    border-color: #f57a77;
    background: #fff;
}
.csf .csf-agree-row input[type="checkbox"]:checked + label::after {
    background-color: #f57a77;
}
.csf-req {
    margin-left: 4px;
    color: #f68481;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.21px;
}
.csf-agree-toggle {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.csf-agree-toggle img {
    width: 24px;
    height: 24px;
    transition: transform 0.2s ease;
}
.csf-agree-toggle[aria-expanded="true"] img {
    transform: rotate(180deg);
}
.csf-agree-body {
    position: relative;
    padding: 0 4px 0 8px;
}
/* 아래쪽 페이드(시안 scrollfog) - 잘린 내용이 더 있다는 신호.
   스크롤 컨테이너인 .csf-terms 자신에 얹으면 내용과 함께 밀려 올라가므로 스크롤하지 않는 부모에 그린다.
   좌우는 테두리 1px 안쪽까지 - 시안도 스크롤 막대 위를 덮는다(막대가 바닥에 닿을 땐 페이드가 꺼져 있어 겹치지 않는다).
   더 내려갈 내용이 있을 때만 켠다(.is-faded) - 항상 깔면 마지막 줄이 영영 흐려진다. */
.csf-agree-body::after {
    content: '';
    position: absolute;
    left: 9px;
    right: 5px;
    bottom: 1px;
    height: 40px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}
.csf-agree-body.is-faded::after {
    opacity: 1;
}
.csf-terms {
    box-sizing: border-box;
    height: 120px;
    overflow-y: auto;
    /* 오른쪽 18 = 막대 자리 4 + 막대와 글 사이 8 + 상자 안쪽 여백 6 (시안 구조 그대로).
       6 만 주면 글이 막대 밑으로 들어가 가려진다. */
    padding: 12px 18px 12px 16px;
    border: 1px solid #e8e8f0;
    border-radius: 4px;
    color: #555a5d;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    white-space: pre-line;
    /* 네이티브 스크롤바는 완전히 숨긴다 - 스크롤 표시는 아래 .csf-terms-bar 하나가 전담한다.
       색만 입혀 두면(scrollbar-color) 자리를 차지하지 않을 뿐 그려지기는 해서,
       오버레이 스크롤바 환경(모바일 브라우저 · 데스크톱 device mode)에서 직접 그린 막대와
       2px 간격으로 두 줄이 선다. */
    scrollbar-width: none;
}
.csf-terms::-webkit-scrollbar {
    display: none;
}

/* 스크롤 표시 막대 - 시안(2166:82943)의 4px · #E8E8F0 · 완전 둥근 모서리.
   시안은 상시 노출인데 네이티브 오버레이는 스크롤하는 순간에만 뜨므로 직접 그린다.
   네이티브를 조건부로 살려두고 "안 보이는 환경에서만 이 막대를 켜는" 판별은 하지 않는다 -
   자리 차지 여부로는 '색 입힌 오버레이'를 걸러내지 못해 두 줄이 나온다.
   좌표는 .csf-terms 의 테두리 1px + 안쪽 여백(위아래 12px · 오른쪽 6px) 기준이다. */
.csf-terms-bar {
    position: absolute;
    top: 13px;
    right: 11px;
    bottom: 13px;
    width: 4px;
    opacity: 0;
    pointer-events: none;
}
.csf-terms-bar.is-on {
    opacity: 1;
}
.csf-terms-bar span {
    position: absolute;
    left: 0;
    width: 4px;
    border-radius: 999px;
    background: #e8e8f0;
}
.csf-terms strong {
    font-weight: 500;
}

/* DB(tbl_terms_management)에서 온 약관 HTML 대응.
   운영 에디터가 저장한 값에 인라인 font-size(10 · 12px)와 color(rgb(99,99,99))가 박혀 있어
   그대로 두면 한 상자 안에서 글자 크기가 섞인다. 타이포는 상자가 정한 하나로 강제한다 -
   인라인 style 을 이기려면 !important 말고는 방법이 없다.
   font-weight 는 일부러 제외한다: 하드코딩 약관의 <strong> 강조를 살려야 한다. */
.csf-terms * {
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
}
/* 에디터가 남긴 문단 여백 제거 - 줄바꿈은 블록 요소가 이미 만든다. */
.csf-terms p,
.csf-terms div {
    margin: 0 !important;
    padding: 0 !important;
}

/* --- 제출 --- */
.csf-foot {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    gap: 8px;
}
.csf-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: 6px;
    background: #f57a77;
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -0.32px;
    cursor: pointer;
}
/* 잠긴 상태는 하나뿐이다 - 필수값 미충족이든 전송 중이든 disabled 속성으로 표현한다.
   흐려 보이는데 눌리는 버튼은 만들지 않는다. */
.csf-submit[disabled] {
    background: #eef0f1;
    color: #acafb1;
    cursor: default;
}

/* =========================================================
   데스크톱(961px~) - 화면 아래 시트가 아니라 중앙 모달로 뜬다.
   Figma 2259:27953 (Modal): 폭 664 · 내부 컬럼 600(좌우 패딩 32).

   마크업은 모바일과 한 벌이다. 달라지는 것은 껍데기(위치 · 폭 · 모서리 · 등장 방식)뿐이라
   여기서 덮어쓰면 되고, 컴포넌트를 나눌 이유가 없다.
   ========================================================= */
@media (min-width: 961px) {
    .csf-panel {
        top: 50%;
        right: auto;
        bottom: auto;
        left: 50%;
        width: 664px;
        /* 모바일은 위 두 모서리만 둥글다(아래가 화면에 붙어서). 모달은 네 곳 모두. */
        border-radius: 16px;
        /* 아래에서 올라오는 대신 제자리에서 살짝 커지며 나타난다 -
           중앙 모달이 화면 밖에서 날아오면 위치가 어디였는지 읽히지 않는다.
           translate 는 가운데 정렬용이라 애니메이션 내내 유지해야 한다. */
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.98);
        transition: opacity 0.2s ease, transform 0.2s ease;
    }
    .csf.is-open .csf-panel {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    .csf-col {
        max-width: none;
        padding: 24px 32px 20px;
    }

    .csf-submit {
        height: 56px;
        border-radius: 8px;
    }
}