/* ==========================================================================
   체크박스 · 라디오 — 리디자인

   프로젝트에 다섯 가지 패턴이 섞여 있다.

   1) .checkbox  (회원가입 · 광고문의 등, 비교적 새 마크업)
        input(display:none) + label(::before 로 상자) + svg(체크 표시)
      실측: label::before 가 20x20 / border-radius 20px(완전한 원) /
            border 2px solid #f1f2f3(거의 안 보임) / 배경 흰색
            input:checked ~ label::before { transform: scale(1.5); opacity: 0 }
            -> 체크하면 상자가 사라지고 얇은 하늘색(#3caaf5) 선만 남는다.
      체크박스인데 원이고, 켜도 채워지지 않아 켜졌는지 알기 어려웠다.

   2) .chk.square / .chk.round  (회원탈퇴 등, 구 마크업)
        화면 밖으로 밀어낸 input + .chk_label 의 배경 스프라이트 PNG
        (ico_checkbox.png, :checked 에서 background-position 이동)
      14px 스프라이트라 작고 흐리다.

   3) 맨 input[type=radio] / [type=checkbox]  (결제 사이트 선택 모달, 비밀번호 찾기)
        브라우저 기본 모양 그대로.

   4) .chk_wrap / .radio_wrap  (로그인 화면)
        opacity:0 으로 겹쳐 둔 input + 옆 span 의 PNG 스프라이트(chk.png 16px)

   5) input[type=radio] + label  (비밀번호 찾기 인증방법 등)
        display:none 인 input + label::before 로 그린 16px 원.
        레거시가 :hover 와 :checked 를 묶어 둬서 마우스만 올려도 선택돼 보인다.

   다섯을 같은 규격으로 맞춘다.
     상자 20px / radius 6 / 테두리 1.5px / 켜지면 브랜드색으로 채우고 흰 체크
     라디오는 원 + 가운데 점
     누를 수 있는 영역은 라벨까지 포함(기존과 동일)

   전역이다
     체크는 #container 안팎(모달 포함)에 다 있고, 컨트롤 자체는
     페이지 콘텐츠가 아니라 공통 부품이라 한 모양으로 두는 게 맞다.

   기능은 건드리지 않는다.
     input 의 name/value/checked 와 스크립트 훅은 그대로다.
     1) 의 svg 는 레거시가 stroke-dashoffset 으로 그리는 애니메이션을 쓴다.
        그 방식을 유지하고 색과 위치만 맞춘다.
   ========================================================================== */

:root {
    --ctl-size: 20px;
    /* 안 고른 체크박스·라디오의 테두리.
       면 테두리 색(--mc-border #e7ebf5)을 그대로 쓰다가 흰 배경에서
       거의 안 보였다 — 대비 1.13:1 이다. 비텍스트 대비 기준은 3:1 이고,
       회원탈퇴 약관처럼 반드시 눌러야 넘어가는 화면에서 표식이 안 보이면
       사용자가 뭘 눌러야 하는지 못 찾는다.
       --mc-muted 로 올리면 3.6:1 이다. 입력칸 테두리는 그대로 두고
       이 표식만 진하게 한다(둘의 역할이 다르다).
       이 토큰을 쓰는 곳은 전부 체크박스·라디오 상자다. */
    --ctl-border: var(--mc-muted, #7c87a0);
    --ctl-on: var(--mc-blue, #2b5bff);
}

/* ==========================================================================
   1) .checkbox 패턴
   ========================================================================== */
.checkbox > label::before {
    /* 원 -> 둥근 사각형. 체크박스는 사각형이어야 라디오와 구분된다. */
    box-sizing: border-box;
    flex: 0 0 auto;
    width: var(--ctl-size);
    height: var(--ctl-size);
    border: 1.5px solid var(--ctl-border);
    border-radius: 6px;
    background-color: #fff;
    transition: border-color .12s ease, background-color .12s ease;
}

.checkbox > label:hover::before {
    border-color: var(--ctl-on);
}

/* 켜진 상태 — 레거시는 상자를 키워서 없앤다(scale 1.5 + opacity 0).
   상자를 남기고 채운다. */
.checkbox > input:checked ~ label::before {
    transform: none;
    opacity: 1;
    border-color: var(--ctl-on);
    background-color: var(--ctl-on);
}

/* 체크 표시(svg polyline). 레거시가 stroke-dasharray 로 그리는 건 그대로 두고
   색·크기·위치만 맞춘다.

   레거시는 .section-agreement ul li > .checkbox svg 에
   transform: scale(1.5) translateY(-50%) 를 준다(클래스 4개).
   .checkbox > svg 만으로는 특이도에서 져서 그대로 1.5 배로 그려졌고,
   실측 22.5x15 — 20x20 상자보다 체크가 더 컸다.
   모든 화면에 있는 #wrap 을 앞에 붙여 한 단계 올린다.

   svg 고유 크기가 15x10 이므로 scale(.8) = 12x8.
   다른 패턴에서 쓰는 체크 아이콘(12x9)과 같은 크기가 된다.
   left 2.5 = 상자 중심 10 - 7.5 (배율은 자기 중심 기준이라 중심이 유지된다). */
#wrap .checkbox > svg {
    /* 레거시는 label 에 z-index:2 를 주고 svg 에는 안 준다.
       원래는 켜질 때 상자가 opacity:0 이 되어 체크가 그냥 보였는데,
       상자를 남기고 채우자 label 이 위에 깔려 흰 체크가 가려졌다. */
    z-index: 3;
    left: 2.5px;
    stroke: #fff;
    stroke-width: 2;
    transform: translateY(-50%) scale(.8);
    pointer-events: none;
}

/* 라벨 글자 */
.checkbox > label {
    gap: 9px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--mc-ink, #0b1220);
}

/* 비활성 */
.checkbox > input:disabled ~ label {
    cursor: default;
    opacity: .5;
}

/* ==========================================================================
   2) .chk / .radio 패턴 (배경 스프라이트)
   ========================================================================== */
.chk ~ .chk_label,
.radio ~ .radio_label {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: var(--ctl-size);
    /* 스프라이트를 걷고 자리만 남긴다 */
    background-image: none !important;
    padding-left: 29px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--mc-ink, #0b1220);
}

    /* 레거시 .chk.square ~ .chk_label(0,3,0) 이 padding-left:22px 로 위 29px 를 이겨,
       20px 상자와 글자 사이가 2px 였다(탈퇴약관 실측). 상자 20 + 틈 9 로 되돌린다. */
    .chk.square ~ .chk_label {
        padding-left: 29px;
    }

    /* 상자 */
    .chk ~ .chk_label::before,
    .radio ~ .radio_label::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        box-sizing: border-box;
        width: var(--ctl-size);
        height: var(--ctl-size);
        margin-top: calc(var(--ctl-size) / -2);
        border: 1.5px solid var(--ctl-border);
        border-radius: 6px;
        background: #fff;
        transition: border-color .12s ease, background-color .12s ease;
    }

    .radio ~ .radio_label::before {
        border-radius: 50%;
    }

    /* 체크 표시 — 선 두 개를 꺾어 그린다 */
    .chk ~ .chk_label::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 5px;
        width: 9px;
        height: 5px;
        margin-top: -4px;
        border: 0;
        border-left: 2px solid #fff;
        border-bottom: 2px solid #fff;
        transform: rotate(-45deg);
        opacity: 0;
        transition: opacity .12s ease;
    }

    /* 라디오는 가운데 점 */
    .radio ~ .radio_label::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 6px;
        width: 8px;
        height: 8px;
        margin-top: -4px;
        border-radius: 50%;
        background: #fff;
        opacity: 0;
        transition: opacity .12s ease;
    }

.chk:checked ~ .chk_label::before,
.radio:checked ~ .radio_label::before {
    /* 레거시는 background-position 을 !important 로 옮긴다.
       배경 이미지를 없앴으므로 그 규칙은 무의미하고, 색만 바꾸면 된다. */
    border-color: var(--ctl-on);
    background-color: var(--ctl-on);
}

.chk:checked ~ .chk_label::after,
.radio:checked ~ .radio_label::after {
    opacity: 1;
}

.chk:focus-visible ~ .chk_label::before,
.radio:focus-visible ~ .radio_label::before {
    box-shadow: var(--mc-ring);
}

/* ==========================================================================
   4) .chk_wrap / .radio_wrap  (로그인 화면)
      input 을 opacity:0 으로 겹쳐 두고 옆 span 에 PNG 스프라이트를 깐다
      (chk.png / chk_on.png, 16px). 스프라이트를 걷고 같은 상자를 그린다.
   ========================================================================== */
.chk_wrap,
.radio_wrap {
    width: var(--ctl-size);
    height: var(--ctl-size);
}

    /* 겹쳐 둔 input 이 상자를 다 덮게 해서 누르는 자리를 잃지 않는다 */
    .chk_wrap > input[type=checkbox],
    .radio_wrap > input[type=radio] {
        top: 0;
        left: 0;
        width: var(--ctl-size) !important;
        height: var(--ctl-size) !important;
        margin: 0;
        z-index: 1;
    }

    .chk_wrap .chk_img,
    .radio_wrap .radio_img {
        box-sizing: border-box;
        width: var(--ctl-size);
        height: var(--ctl-size);
        border: 1.5px solid var(--ctl-border);
        border-radius: 6px;
        background-color: #fff;
        /* PNG 스프라이트 제거 */
        background-image: none;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        transition: border-color .12s ease, background-color .12s ease;
    }

    .radio_wrap .radio_img {
        border-radius: 50%;
    }

    .chk_wrap > input[type=checkbox]:checked + .chk_img {
        border-color: var(--ctl-on);
        background-color: var(--ctl-on);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9'%3E%3Cpath d='M1 4.6L4.4 8L11 1.2' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-size: 12px 9px;
    }

    .radio_wrap > input[type=radio]:checked + .radio_img {
        border-color: var(--ctl-on);
        background-color: var(--ctl-on);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Ccircle cx='4' cy='4' r='4' fill='%23fff'/%3E%3C/svg%3E");
        background-size: 8px 8px;
    }

    .chk_wrap:hover .chk_img,
    .radio_wrap:hover .radio_img {
        border-color: var(--ctl-on);
    }

    /* 라벨 글자를 상자 높이에 맞춘다 */
    .chk_wrap + label,
    .radio_wrap + label {
        vertical-align: middle;
        font-size: 14px;
        color: var(--mc-body, #4a5468);
    }

/* ==========================================================================
   3) 맨 input — 브라우저 기본 모양
   ========================================================================== */
input[type=checkbox]:not(.chk):not(.radio),
input[type=radio]:not(.chk):not(.radio) {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    flex: 0 0 auto;
    width: var(--ctl-size);
    height: var(--ctl-size);
    margin: 0;
    padding: 0;
    border: 1.5px solid var(--ctl-border);
    border-radius: 6px;
    background-color: #fff;
    vertical-align: middle;
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease;
}

input[type=radio]:not(.chk):not(.radio) {
    border-radius: 50%;
}

    input[type=checkbox]:not(.chk):not(.radio):hover:not(:disabled),
    input[type=radio]:not(.chk):not(.radio):hover:not(:disabled) {
        border-color: var(--ctl-on);
    }

    input[type=checkbox]:not(.chk):not(.radio):checked,
    input[type=radio]:not(.chk):not(.radio):checked {
        border-color: var(--ctl-on);
        background-color: var(--ctl-on);
        /* 체크·점을 배경으로 그린다. appearance:none 이면 기본 표시가 없다. */
        background-repeat: no-repeat;
        background-position: 50% 50%;
    }

    input[type=checkbox]:not(.chk):not(.radio):checked {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9'%3E%3Cpath d='M1 4.6L4.4 8L11 1.2' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-size: 12px 9px;
    }

    input[type=radio]:not(.chk):not(.radio):checked {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Ccircle cx='4' cy='4' r='4' fill='%23fff'/%3E%3C/svg%3E");
        background-size: 8px 8px;
    }

    input[type=checkbox]:not(.chk):not(.radio):focus-visible,
    input[type=radio]:not(.chk):not(.radio):focus-visible {
        outline: 0;
        box-shadow: var(--mc-ring);
    }

    /* 못 누르는 것은 흐려야 한다. 표식을 진하게 올렸으므로
       여기만 옅은 면 테두리 색으로 되돌린다. */
    input[type=checkbox]:not(.chk):not(.radio):disabled,
    input[type=radio]:not(.chk):not(.radio):disabled {
        border-color: var(--mc-border, #e7ebf5);
        background-color: var(--mc-tint, #f4f7fe);
        cursor: default;
    }

        input[type=checkbox]:not(.chk):not(.radio):disabled:checked,
        input[type=radio]:not(.chk):not(.radio):disabled:checked {
            background-color: var(--mc-muted, #7c87a0);
            border-color: var(--mc-muted, #7c87a0);
        }

/* ==========================================================================
   5) input[type=radio] + label::before  (비밀번호 찾기 인증방법 등)

      레거시 선택자가 .content-form .inputs input[type=radio] + label::before
      (클래스 2개)라 맨 input[type=radio] 로는 특이도에서 진다.
      모든 화면에 있는 #wrap 을 앞에 붙여 한 단계 올린다.
   ========================================================================== */
#wrap input[type=radio] + label::before {
    box-sizing: border-box;
    width: var(--ctl-size);
    height: var(--ctl-size);
    margin-right: 8px;
    border: 1.5px solid var(--ctl-border);
    border-radius: 50%;
    background: #fff;
}

/* 레거시는 :hover 와 :checked 를 한 규칙으로 묶어 둘 다 채운다.
   마우스만 올려도 선택된 것처럼 보이므로 hover 는 테두리만 바꾼다. */
#wrap input[type=radio]:hover:not(:checked) + label::before {
    border-color: var(--ctl-on) !important;
    background-color: #fff !important;
    box-shadow: none;
}

#wrap input[type=radio]:checked + label::before {
    border-color: var(--ctl-on) !important;
    background-color: var(--ctl-on) !important;
    /* 안쪽을 흰 고리로 덮어 가운데 점만 남긴다.
       레거시는 #f3f6f9(회백색) 3px 이었다. */
    box-shadow: inset 0 0 0 4px #fff;
}

#wrap input[type=radio]:disabled + label {
    cursor: default;
    opacity: .55;
}

/* 라벨 글자 */
#wrap input[type=radio] + label {
    font-size: 14px;
    color: var(--mc-ink, #0b1220);
}

/* ==========================================================================
   좁은 화면 터치 타깃

   상자(20px)는 그대로 두고 라벨 행 높이만 44 로 넓힌다.
   실측(약관 390px): input.radio 20x20 이 6개, 라벨 행도 20px 이라
   손가락으로 정확히 찍기 어려웠다.
   ========================================================================== */
@media (max-width: 768px) {

    .chk ~ .chk_label,
    .radio ~ .radio_label,
    #wrap input[type=radio] + label,
    .chk_wrap + label,
    .radio_wrap + label,
    .checkbox > label {
        /* inline-flex + center 가 없으면 글자는 위, 표식은 제자리에 남는다 */
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

        /* 레거시가 top 을 고정 px 로 박아 둔다. 라벨이 커진 만큼
           표식도 따라오게 중앙 기준으로 바꾼다.
           .chk / .radio 는 뺐다. 위 기본 규칙이 이미 top:50% + 음수 margin-top 으로
           가운데를 잡아서, 여기서 translate 까지 걸면 두 번 올라가 상자가 10px 떴고
           (탈퇴약관 390 실측: 글자 중심 443 / 상자 중심 433), 체크 표시(::after)는
           rotate(-45deg) 가 translate 로 덮여 꺾이지 않았다. */
        #wrap input[type=radio] + label::before,
        #wrap input[type=radio] + label::after,
        .chk_wrap + label::before,
        .radio_wrap + label::before {
            top: 50%;
            transform: translateY(-50%);
        }

        /* 폼의 인증방법 라디오(.content-form .inputs, 비밀번호 찾기 등)는 표식이 absolute 가 아니라
           글자 옆에 흐르는 relative 라, 라벨의 flex 가운데 정렬로 이미 가운데에 선다. 위 top:50% 가
           한 번 더 걸려 44px 라벨의 절반만큼 내려갔다가 translate 로 다시 올라가 표식만 떴다(390 실측).
           이 흐르는 표식에서만 푼다. */
        #wrap .content-form .inputs input[type=radio] + label::before,
        #wrap .content-form .inputs input[type=radio] + label::after {
            top: auto;
            transform: none;
        }

    /* ---- 폭이 못박힌 큰 버튼 ----
       .btn_r.fin 은 width 340px 이다. 360px 화면에서 좌우 여백 16px 을 빼면
       328px 밖에 없어 12px 이 밀린다. 소개 화면 여섯 곳에서 같이 나왔다. */
    #wrap :is(.btn_r, .btn).fin {
        max-width: 100%;
    }
}