/* ==========================================================================
   로그인 · 회원가입 등 인증 화면 — 결제 화면(PaymentCheckout.css)과 같은 스타일
   적용 대상
     #container.login_wrap      로그인(DiadLogin) / 서비스 로그인(ServiceLogin)  ← Layout=null 독립 문서
     #container.content-sign-up 회원가입(MemberRegister)
     #container.account_find    아이디 찾기 / 비밀번호 찾기
     #container.member_modify   회원정보수정(MyPage/MemberModify)
                                — 회원가입과 마크업이 같은 폼이다
                                  (section > .section-title / ul > li > .title + .inputs).
     #container.sign_in.fin     회원가입 완료

   기능은 건드리지 않는다. 마크업/폼 헬퍼/스크립트는 그대로 두고 표시만 덮는다.
   다른 화면에 새지 않도록 위 컨테이너 안으로만 스코프를 잡는다.
   ========================================================================== */

/* 독립 문서(로그인)는 bundle.css 를 불러오지 않아 Pretendard 가 없다. 여기서 선언한다.
   _Layout 페이지에서는 bundle.css 와 동일 선언이라 중복돼도 무해하다. */
@font-face { font-family: "Pretendard"; font-weight: 800; font-display: swap;
    src: local("Pretendard ExtraBold"), url("../../Content/fonts/Pretendard-ExtraBold.woff2") format("woff2"); }
@font-face { font-family: "Pretendard"; font-weight: 700; font-display: swap;
    src: local("Pretendard Bold"), url("../../Content/fonts/Pretendard-Bold.woff2") format("woff2"); }
@font-face { font-family: "Pretendard"; font-weight: 600; font-display: swap;
    src: local("Pretendard SemiBold"), url("../../Content/fonts/Pretendard-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Pretendard"; font-weight: 500; font-display: swap;
    src: local("Pretendard Medium"), url("../../Content/fonts/Pretendard-Medium.woff2") format("woff2"); }
@font-face { font-family: "Pretendard"; font-weight: 400; font-display: swap;
    src: local("Pretendard Regular"), url("../../Content/fonts/Pretendard-Regular.woff2") format("woff2"); }

#container.login_wrap,
#container:is(.content-sign-up, .member_modify),
#container.account_find,
#container.sign_in.fin {
    /* 값은 공통 tokens.css 를 따른다. 독립 문서(로그인)는 bundle.css 도 tokens.css 도
       불러오지 않으므로 뒤의 기본값이 그때 쓰인다. */
    --au-ink: var(--mc-ink, #0b1220);
    --au-body: var(--mc-body, #4a5468);
    --au-muted: var(--mc-muted, #7c87a0);
    --au-blue: var(--mc-blue, #2b5bff);
    --au-violet: var(--mc-violet, #7c3aed);
    --au-red: var(--mc-red, #e5484d);
    --au-border: var(--mc-border, #e7ebf5);
    --au-tint: var(--mc-tint, #f4f7fe);
    --au-radius: var(--mc-radius, 16px);
    --au-radius-sm: var(--mc-radius-sm, 10px);
    --au-shadow: var(--mc-shadow, 0 24px 60px -28px rgba(11, 18, 32, .22));
    --au-grad: var(--mc-grad, linear-gradient(96deg, #2b5bff 8%, #7c3aed 92%));
    color: var(--au-ink);
    word-break: keep-all;
}

#container.login_wrap,
#container.login_wrap *,
#container:is(.content-sign-up, .member_modify),
#container:is(.content-sign-up, .member_modify) *,
#container.account_find,
#container.account_find *,
#container.sign_in.fin,
#container.sign_in.fin * {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
    letter-spacing: -.02em;
    box-sizing: border-box;
}

/* 공통 입력/버튼 --------------------------------------------------------- */
#container.login_wrap input[type=text],
#container.login_wrap input[type=password],
#container:is(.content-sign-up, .member_modify) input[type=text],
#container:is(.content-sign-up, .member_modify) input[type=password],
#container:is(.content-sign-up, .member_modify) input[type=email],
#container:is(.content-sign-up, .member_modify) input[type=tel],
#container:is(.content-sign-up, .member_modify) select,
#container.account_find input[type=text],
#container.account_find input[type=tel],
#container.account_find select {
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--au-border);
    border-radius: var(--au-radius-sm);
    background: #fff;
    font-size: 14px;
    color: var(--au-ink);
    transition: border-color .12s, box-shadow .12s;
}

#container.login_wrap input:focus,
#container:is(.content-sign-up, .member_modify) input:focus,
#container:is(.content-sign-up, .member_modify) select:focus,
#container.account_find input:focus,
#container.account_find select:focus {
    outline: none;
    border-color: var(--au-blue);
    box-shadow: 0 0 0 3px rgba(43, 91, 255, .14);
}

#container.login_wrap input::placeholder,
#container:is(.content-sign-up, .member_modify) input::placeholder,
#container.account_find input::placeholder { color: #a8b2c6; }

/* 검증 메시지 */
#container.login_wrap .message_txt.error,
#container:is(.content-sign-up, .member_modify) .field-validation-error,
#container.account_find .field-validation-error,
#container.login_wrap .field-validation-error {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--au-red);
}

/* 오류가 없을 때도 자리를 차지하던 검증 메시지.
   .ipt_box 는 flex column + gap:10 이라 빈 span 하나마다
   gap 10 + margin-top 6 + 높이 3 = 19px 이 쌓인다. 비밀번호 아래에
   두 개(비밀번호 검증 · 로그인 결과)가 있어 버튼까지 56px 이 벌어졌다.

   :empty 로 거른다. 클래스로는 못 거른다 — 마크업이 htmlAttributes 에
   class="field-validation-valid ..." 를 직접 넣어서, 서버가 오류를
   그릴 때도 그 클래스가 그대로 남아 error 와 함께 붙는다.
   내용이 있으면(=오류) 그대로 보인다.
   위 규칙과 특이도가 같으므로 순서로 이긴다. */
#container.login_wrap .field-validation-valid:empty,
#container:is(.content-sign-up, .member_modify) .field-validation-valid:empty,
#container.account_find .field-validation-valid:empty {
    display: none;
}

/* --------------------------------------------------------------------------
   로그인 / 서비스 로그인 (독립 문서)
   -------------------------------------------------------------------------- */
body:has(#container.login_wrap) { background: #fbfcfe; }

#container.login_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 48px 20px;
    background: radial-gradient(1200px 520px at 50% -10%, #eef2ff 0%, #fbfcfe 62%);
}

/* 레거시(login_add.css / login_add2.css)의 고정 배치를 걷어낸다.
   .logo 는 position:fixed, .login 은 position:absolute + 460x440 고정이었다. */
/* 로고는 좌측 상단에 붙인다. 가운데 두면 카드와 축이 겹쳐
   화면에 중심이 두 개인 것처럼 보인다. */
#container.login_wrap .logo {
    position: absolute;
    top: 24px;
    left: var(--mc-pad, 16px);
    width: auto;
    margin: 0;
    text-align: left;
}

#container.login_wrap {
    position: relative;
}
#container.login_wrap .logo img { height: 34px; }

#container.login_wrap .login,
#container.login_wrap .login_main {
    position: static;
    width: 100%;
    max-width: 420px;
    height: auto;
    margin: 0;
}
#container.login_wrap .login .inner { text-align: left; }

/* 실제 카드는 .login_box 다 (.inner 가 아니다) */
#container.login_wrap .login .login_box {
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 36px 32px 0;
    background: #fff;
    border: 1px solid var(--au-border);
    border-radius: 20px;
    box-shadow: var(--au-shadow);
}
#container.login_wrap .login .login_box .ipt_box { padding: 0; }
#container.login_wrap .login .login_box .ipt_box input { width: 100%; height: 48px; margin: 0; }
#container.login_wrap .login_main {
    max-width: 520px;
    padding: 40px 36px;
    background: #fff;
    border: 1px solid var(--au-border);
    border-radius: 20px;
    box-shadow: var(--au-shadow);
}

/* 독립 문서(Layout=null)는 _Layout 의 전역 폰트도 bundle.css 도 받지 않는다.
   전수 조사에서 전 화면 중 이 화면만 서체가 Noto Sans KR 이었다.

   원인: login_add.css 에 * { font-family:"Noto Sans KR" !important } 가 있다.
   유니버설 + !important 라 상속으로는 못 이긴다. 같은 무게로 받아야 하고,
   * 가 모든 요소를 직접 잡으므로 후손까지 명시해야 한다.
   모달은 #container 밖(#wrap 직속)이라 문서 단위로 스코프를 잡는다.
   범위는 로그인 문서 하나뿐이다. */
body:has(#container.login_wrap),
body:has(#container.login_wrap) * {
    /* tokens.css 의 --mc-font. 선언만 있고 아무 데서도 안 쓰이던 토큰이라
       여기서 쓰기 시작한다(이 화면도 tokens.css 를 링크한다).
       뒤 기본값은 tokens.css 를 못 받는 경우의 보험이다. */
    font-family: var(--mc-font, 'Pretendard', 'Roboto', 'Noto Sans KR', sans-serif) !important;
}

#container.login_wrap h1 {
    margin: 0 0 26px;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.03em;
    text-align: center;
    color: var(--au-ink);
}

#container.login_wrap .ipt_box { display: flex; flex-direction: column; gap: 10px; }
#container.login_wrap .ipt_box input[type=text],
#container.login_wrap .ipt_box input[type=password] { width: 100%; }

#container.login_wrap .ipt_box button.btn.basic,
#container.login_wrap button[type=submit] {
    width: 100%;
    height: 56px;
    margin-top: 8px;
    border: 0;
    border-radius: var(--mc-radius-sm, 10px);
    background: var(--mc-cta, #111);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 12px 24px -12px rgba(43, 91, 255, .65);
}
#container.login_wrap button[type=submit]:hover { filter: brightness(1.05); }

#container.login_wrap .group_line {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 18px -32px 0;
    padding: 16px 32px;
    border-top: 1px solid var(--au-border);
    font-size: 12px;
    letter-spacing: -.02em;
    color: var(--au-body);
}
#container.login_wrap .group_line::before,
#container.login_wrap .group_line::after { content: none; }
#container.login_wrap .group_line .right { margin-left: auto; }
#container.login_wrap .group_line a { color: var(--au-muted); }
#container.login_wrap .group_line a:hover { color: var(--au-blue); }

#container.login_wrap .move_info {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--au-border);
    text-align: center;
    font-size: 14px;
    color: var(--au-muted);
}
#container.login_wrap .move_info a { font-weight: 700; color: var(--au-blue); text-decoration: none; }
#container.login_wrap h1,
#container.login_wrap a,
#container.login_wrap button { text-decoration: none; }

/* 서비스 로그인 전용 */
#container.login_wrap .login_main { max-width: 520px; text-align: center; }
#container.login_wrap .login_main .r_link {
    display: flex; justify-content: center; gap: 14px;
    margin-bottom: 22px; font-size: 14px; color: var(--au-body);
}
#container.login_wrap .login_main .r_link a { color: var(--au-blue); font-weight: 600; }
#container.login_wrap .login_main .box_wrap { margin: 0; padding: 0; list-style: none; }
#container.login_wrap .login_main .box_wrap .box {
    display: block; padding: 22px; border: 1px solid var(--au-border);
    border-radius: var(--au-radius); background: var(--au-tint); text-align: left; cursor: pointer;
}
#container.login_wrap .login_main .box_wrap .box:hover { border-color: var(--au-blue); }
#container.login_wrap .login_main .box_wrap .desc { margin: 0; font-size: 14px; line-height: 1.6; color: var(--au-body); }
#container.login_wrap .login_main .caution { margin-top: 20px; font-size: 12px; color: var(--au-muted); }
#container.login_wrap .login_main .caution .guide { color: var(--au-blue); font-weight: 600; }

/* --------------------------------------------------------------------------
   회원가입 / 아이디·비밀번호 찾기 (공통 _Layout)
   -------------------------------------------------------------------------- */
/* 2026-09-16 — 위 40 · 아래 100 이었다. 다른 화면은 위 70(모바일 32) 이고
   아래는 #content 의 공통 margin-bottom 108 하나로 끝난다. 이 규칙만 값이
   달라 회원가입 · 아이디찾기 · 비번찾기가 위로는 30px 붙고 아래로는 100px
   더 벌어져 있었다(실측 위 40 · 아래 208). 공통 값에 맞춘다. */
#container:is(.content-sign-up, .member_modify) > #content,
#container.account_find > #content { padding-top: 70px; padding-bottom: 0; background: #fbfcfe; }

@media (max-width: 768px) {
    #container:is(.content-sign-up, .member_modify) > #content,
    #container.account_find > #content { padding-top: 32px; }
}

/* 회원가입 h1 은 아래 재구성 블록이 34px 로 덮는다.
   여기서 크기를 또 주면 어느 값이 사는지 읽히지 않으므로 폭·여백만 남긴다. */
#container:is(.content-sign-up, .member_modify) h1,
#container.account_find .content_title {
    max-width: 860px;
    margin: 0 auto 24px;
    font-weight: 800;
    letter-spacing: -.03em;
    text-align: left;
    color: var(--au-ink);
}

#container:is(.content-sign-up, .member_modify) .wrapper { width: auto; max-width: 860px; margin: 0 auto; display: block; }

#container:is(.content-sign-up, .member_modify) .wrapper > section:not(.section-buttons),
#container.account_find .con > .section {
    max-width: 860px;
    margin: 0 auto 16px;
    padding: 26px 28px;
    background: #fff;
    border: 1px solid var(--au-border);
    border-radius: var(--au-radius);
}

#container:is(.content-sign-up, .member_modify) .section-title { margin-bottom: 16px; }
#container:is(.content-sign-up, .member_modify) .section-title h3 {
    margin: 0; font-size: 16px; font-weight: 700; color: var(--au-ink);
}

#container:is(.content-sign-up, .member_modify) .note,
#container.account_find .note { font-size: 12px; color: var(--au-muted); line-height: 1.6; }

/* 제출 버튼 */
#container:is(.content-sign-up, .member_modify) .section-buttons,
#container.account_find .section-buttons {
    max-width: 860px; margin: 0 auto; padding: 0; border: 0; background: none; text-align: center;
}
#container:is(.content-sign-up, .member_modify) .section-buttons button[type=submit],
#container.account_find .section-buttons button[type=submit] {
    min-width: 260px; height: 56px; padding: 0 32px; border: 0; border-radius: var(--mc-radius-sm, 10px);
    background: var(--mc-cta, #111); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer;
    box-shadow: 0 12px 24px -12px rgba(43, 91, 255, .65);
}
#container:is(.content-sign-up, .member_modify) .section-buttons button[type=submit]:hover,
#container.account_find .section-buttons button[type=submit]:hover { filter: brightness(1.05); }

#container.account_find .btn.point.full {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 260px; height: 56px; border-radius: var(--mc-radius, 16px);
    background: var(--mc-cta, #111); color: #fff; font-size: 16px; font-weight: 700; border: 0;
}

/* --------------------------------------------------------------------------
   회원가입 완료
   -------------------------------------------------------------------------- */
#container.sign_in.fin #content { padding: 80px 20px 120px; background: #fbfcfe; }
/* 연한 판(#fbfcfe)이 본문 끝이라 page-chrome.css 의 공통 아래 여백(108 · 64)이 판과 짙은
   푸터 사이에 흰 띠로 끼었다. 판이 그 여백을 대신한다(아래 padding 120). */
#container.sign_in.fin #content { margin-bottom: 0; }
#container.sign_in.fin .con { max-width: 560px; margin: 0 auto; text-align: center; }

/* .con 은 560px 인데 그 안의 .section 이 레거시 #container .section 의
   width:1080px 를 물고 있다. 1120px 이하에서는 responsive-base 가
   width:auto 로 풀어 주지만 그 위로는 그대로라, 1280px 에서 오른쪽으로
   160px, 1440px 에서 80px 씩 삐져나가 가로 스크롤이 생겼다(실측).
   이 화면의 .section 은 .con 폭을 따른다. */
#container.sign_in.fin .con .section {
    width: auto;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}
/* ---- 완료 체크 배지 ----
   레거시는 84x81 흑백 PNG(ico_checkbox_memberjoin.png) 한 장이다.
   화면의 다른 요소는 다 브랜드 색을 쓰는데 이것만 검정이라 겉돌았다.
   마크업은 그대로 두고(img 는 감춘다) 배지를 CSS 로 그린다.
   같은 그라디언트를 하단 '로그인' 버튼도 쓴다. */
#container.sign_in.fin .progress_state {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 84px;
    margin: 0 0 28px;
}

    #container.sign_in.fin .progress_state img {
        display: none;
    }

    /* 원 바깥의 옅은 테. 배지가 배경(#fbfcfe)에 떠 보이게 한다 */
    #container.sign_in.fin .progress_state::before {
        content: "";
        width: 84px;
        height: 84px;
        border-radius: 50%;
        /* background 축약을 쓰면 아래 체크의 색까지 초기화되므로 -image 만 준다 */
        background-image: var(--au-grad);
        box-shadow: 0 18px 36px -14px rgba(43, 91, 255, .55),
                    0 0 0 10px rgba(43, 91, 255, .07);
    }

    /* 체크는 두 변만 남긴 사각형을 45도 돌려서 그린다. 파일이 필요 없다. */
    #container.sign_in.fin .progress_state::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 30px;
        height: 16px;
        margin: -8px 0 0 -15px;
        border-left: 5px solid #fff;
        border-bottom: 5px solid #fff;
        border-bottom-left-radius: 3px;
        transform: translateY(-3px) rotate(-45deg);
    }

/* 들어올 때 한 번 튀어나온다. 완료 화면에서만 쓰는 짧은 동작이다. */
@keyframes au-badge-pop {
    0%   { transform: scale(.6); opacity: 0; }
    60%  { transform: scale(1.06); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes au-check-draw {
    0%   { clip-path: inset(0 100% 0 0); }
    100% { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: no-preference) {
    #container.sign_in.fin .progress_state::before {
        animation: au-badge-pop .42s cubic-bezier(.2, .8, .3, 1.2) both;
    }

    #container.sign_in.fin .progress_state::after {
        animation: au-check-draw .3s ease-out .28s both;
    }
}

#container.sign_in.fin .con_title {
    margin: 0 0 10px; font-size: 24px; font-weight: 800; letter-spacing: -.03em; color: var(--au-ink);
}
#container.sign_in.fin .btn_group { margin-top: 32px; display: flex; gap: 10px; justify-content: center; }
#container.sign_in.fin .btn_group .btn_r {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 160px; height: 56px; border-radius: var(--mc-radius-sm, 10px); font-size: 16px; font-weight: 700;
    border: 1px solid var(--au-border); background: #fff; color: var(--au-body);
}
#container.sign_in.fin .btn_group .btn_r:last-child {
    border: 0; background: var(--mc-cta, #111); color: #fff;
    box-shadow: 0 12px 24px -12px rgba(43, 91, 255, .65);
}

/* ==========================================================================
   반응형
   브레이크포인트는 css/common/tokens.css 의 표를 따른다.
   ========================================================================== */

/* 어느 폭에서도 입력·선택 요소가 컨테이너를 넘지 않게 한다.
   레거시 마크업에 고정폭 input 이 많아 좁아지면 그대로 삐져나간다. */
#container:is(.content-sign-up, .member_modify) input,
#container:is(.content-sign-up, .member_modify) select,
#container:is(.content-sign-up, .member_modify) textarea,
#container.account_find input,
#container.account_find select {
    max-width: 100%;
}

/* ==========================================================================
   회원가입 · 아이디/비밀번호 찾기 — 전면 재구성

   덮개만 얹었을 때는 "부분 보정"으로 보였다. 구조를 실제로 바꾼다.
   마크업은 건드리지 않는다. 폼 요소 id 와 스크립트 훅을 그대로 두고 CSS 로만 재구성한다.

   바꾸는 것
     1) 페이지 배경을 tint 로. 흰 배경에 흰 카드라 카드가 보이지 않았다
     2) 이중 카드 해소. .wrapper 와 section 이 둘 다 카드였다 -> wrapper 는 투명 컨테이너
     3) 폼 행을 라벨 위 / 입력 아래 스택으로. 데스크톱도 포함
     4) 약관 동의를 행 단위 카드로. 상세보기는 회색 버튼 대신 텍스트 링크로
     5) 회원 유형을 세그먼트 컨트롤로
     6) 하단 버튼을 주/보조로 명확히
   ========================================================================== */

/* ---- 1) 배경 · 2) 이중 카드 해소 ---- */
body:has(#container:is(.content-sign-up, .member_modify)), body:has(#container.account_find) {
    background: #fbfcfe;
}

#container:is(.content-sign-up, .account_find, .member_modify) > #content,
#container:is(.content-sign-up, .account_find, .member_modify) .wrapper {
    background: transparent;
    border: 0;
    box-shadow: none;
}

#container:is(.content-sign-up, .account_find, .member_modify) .wrapper {
    width: auto;
    max-width: 720px;
    margin: 0 auto;
    padding: 0;
}

#container:is(.content-sign-up, .account_find, .member_modify) h1 {
    max-width: 720px;
    margin: 0 auto 24px;
    padding: 0;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -.03em;
    text-align: left;
    color: var(--au-ink);
}

/* 섹션 = 카드 하나. 단, 버튼 줄은 카드가 아니다.
   (이 선후가 유형 선택자 section 을 하나 더 가지므로
    아래 .section-buttons 귬칙보다 강해서 버튼 줄에도 훌 카드가 생긴다) */
#container:is(.content-sign-up, .account_find, .member_modify) .wrapper > section:not(.section-buttons) {
    margin: 0 0 16px;
    padding: 24px 26px;
    border: 1px solid var(--au-border);
    border-radius: var(--au-radius);
    background: #fff;
    box-shadow: var(--mc-shadow-xs, 0 1px 2px rgba(11, 18, 32, .05));
}

/* 섹션 제목 — 밑줄을 걷고 크기로 위계를 준다 */
#container:is(.content-sign-up, .account_find, .member_modify) .section-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0;
    border: 0;
}

    #container:is(.content-sign-up, .account_find, .member_modify) .section-title h3 {
        margin: 0;
        padding: 0;
        border: 0;
        /* 섹션 제목 표준 20/700 (components.css 기준값과 맞춤) */
        font-size: 20px;
        font-weight: 700;
        letter-spacing: -.02em;
        color: var(--au-ink);
    }

    #container:is(.content-sign-up, .account_find, .member_modify) .section-title .asterisk {
        margin-left: auto;
        font-size: 12px;
        color: var(--au-muted);
    }

/* ---- 3) 폼 행: 라벨 위 / 입력 아래 ---- */
#container:is(.content-sign-up, .account_find, .member_modify) section > ul {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#container:is(.content-sign-up, .account_find, .member_modify) section > ul > li {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

    #container:is(.content-sign-up, .account_find, .member_modify) section > ul > li > .title {
        /* 레거시가 라벨 칸 폭으로 flex:0 0 175px 를 준다.
           행을 column 으로 바꾸면 그 175px 가 높이로 해석되어
           라벨과 입력 사이가 180px 벌어진다. 반드시 풀어야 한다. */
        flex: none;
        width: auto;
        min-height: 0;
        /* bundle.css 의 .content-form section ul li .title { margin-top: 1.15rem }
           이 18.4px 을 라벨 위에 얹는다. 행 간격은 ul 의 gap 18 이 이미
           정하고 있어 그만큼 두 번 들어갔다(카드 첫 줄은 위 여백이 38px).
           행 안의 리듬은 li 의 gap 이 정한다. */
        margin: 0;
        padding: 0;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.4;
        text-align: left;
        color: var(--au-ink);
    }

    #container:is(.content-sign-up, .account_find, .member_modify) section > ul > li > .inputs {
        flex: none;
        width: auto;
        /* 레거시가 .inputs 에 max-width:600px 을 준다.
           라벨을 위로 올린 단상 레이아웃에서는 카드 오른쪽에
           68px 자리가 띄어 칸이 안 맞는다. */
        max-width: none;
        padding: 0;
    }

        /* width:100% 를 주면 아이디 / @ / 도메인 / select 가 한 줄에 못 들어가
           각자 줄바꿈된다(이메일 줄이 3단으로 쪼개졌다).
           남은 자리를 나눠 갖게 두면 입력이 하나뿐인 줄은 그대로 꽉 찬다. */
        #container:is(.content-sign-up, .account_find, .member_modify) .inputs > input,
        #container:is(.content-sign-up, .account_find, .member_modify) .inputs > select,
        #container:is(.content-sign-up, .account_find, .member_modify) .inputs .row > input {
            flex: 1 1 0;
            width: auto;
            min-width: 0;
        }

        /* 휴대전화·이메일처럼 .row 로 묶인 줄은 한 줄을 다 쓴다 */
        #container:is(.content-sign-up, .account_find, .member_modify) .inputs > .row {
            flex: 1 1 100%;
            min-width: 0;
        }

        #container:is(.content-sign-up, .account_find, .member_modify) .inputs .selectbox {
            flex: 0 0 auto;
        }

/* 필수 표시는 레거시가 .asterisk 로 이미 넣는다.
   여기서 점을 또 붙이면 표시가 두 개가 된다. 색만 맞춘다. */
#container:is(.content-sign-up, .account_find, .member_modify) .title.asterisk {
    color: var(--au-ink);
}

/* 줄 안에 들어가는 버튼(본인 인증 · 변경하기 · 수정)
   레거시는 검은 사각형 36px 이라 옆의 입력(48px, radius 10)과 안 맞았다.

   맞추고 나니 이번엔 너무 맞아 버렸다. 실측(회원가입 휴대전화 줄)

     버튼  48px · radius 10 · 선 1px #e7ebf5 · 잉크 · 배경 --au-tint #f4f7fe · 600
     입력  48px · radius 10 · 선 1px #e7ebf5 · 잉크 · 배경 #fff            · 400

   다른 것이 배경과 굵기 둘뿐인데 배경 차이가 1.072:1 이다(선은 지면 대비
   1.193:1 로 이것도 거의 안 보인다). 결국 버튼임을 알리는 신호가 볼드 하나뿐이라,
   전화번호 칸 셋 옆에서 '글자가 든 네 번째 입력칸' 으로 읽혔다.
   누르는 것과 채우는 것이 안 갈리는 게 문제의 핵심이다.

   두 번 헛짚고 나서야 원인을 제대로 찾았다.
     1) 면·선을 한 단씩 올려 봤다(#e9eef8 / #d7dee9). 수치는 1.07 -> 1.16 이지만
        눈으로는 그대로였다.
     2) 흰 면 + 잉크 테두리로 갔다. 확실히 갈리지만 연한 회색 선과 틴트뿐인
        이 화면에서 혼자 순검정 윤곽이라 보조 동작치고 너무 셌다.

     3) 면을 연한 틴트로 두고 글자만 파랑으로 돌려 봤다(#eef2f9). 글자는 살았지만
        면이 여전히 틀렸다.

   면이 틀린 이유가 핵심이다. 이 화면에서 **연한 청회색 면은 '비활성' 을 뜻한다** —
   components.css 가 input[readonly] · input:disabled · select:disabled 에
   --mc-tint(#f4f7fe) 를 주고 주석에 "읽기 전용·비활성은 배경으로 구분한다" 고
   적어 두었다. 원래 버튼 배경이 바로 그 #f4f7fe 였다. 누를 수 있는 것에
   '못 누른다' 는 색을 칠하고 있었던 셈이고, #eef2f9 도 그 계열에서 한 칸 옆일 뿐이다.

     4) 흰 면 + 파랑 아웃라인으로 갔다. 계열 문제는 풀렸지만 면이 비어
        버튼으로 안 보였다.

   정리하면 이 자리의 면은 두 가지를 동시에 피해야 한다 —
   연한 청회색(비활성 뜻) 도 안 되고, 비움(아웃라인) 도 안 된다.
   남는 것은 '채우되 비활성 계열이 아닌 색' 이고, 그건 브랜드 파랑이다.

   본인 인증은 안 하면 가입이 끝나지 않는 필수 단계다. 있으나 마나 한 보조가
   아니라 실제로 눌러야 하는 동작이므로 솔리드가 과하지 않다.
   주 CTA(가입완료 353x54 검정 700)와는 색과 크기로 갈리므로 위계도 안 섞인다.

   색은 파랑을 쓰지 않고 채워진 회색으로 간다. 파랑은 연하게 만들수록
   흰 글자 대비가 무너졌다 — 브랜드 파랑(#2b5bff)에 흰색을 20% 섞으면
   3.68:1 로 AA(4.5:1) 아래고, 흰 글자를 지키는 최대 혼합비가 8.7% 라
   '연한 파랑 버튼' 은 애초에 성립하지 않는 조합이었다.

   회색은 밝기 폭이 넓어 그 제약이 없다. #55607a 는
     · 흰 글자 6.29:1 (AA 여유)
     · 비활성 입력칸(#f4f7fe) 과 5.86:1 — 연한 청회색 계열과 확실히 갈린다
     · 주 CTA(가입완료 검정 353x54) 보다 밝아 위계가 안 뒤집힌다
   더 어두운 #4a5468 은 검정 CTA 와 무게가 가까워지고,
   더 밝은 #6e7688 은 4.56:1 로 하한이라 다시 '비활성처럼' 보이기 시작한다.
   호버는 #4a5468(--mc-body) 로 한 단 눌린다. */
#container:is(.content-sign-up, .account_find, .member_modify) .inputs button:not([class]),
#container:is(.content-sign-up, .account_find, .member_modify) .inputs .row button:not([class]) {
    flex: 0 0 auto;
    height: 48px;
    padding: 0 16px;
    border: 1px solid #55607a;
    border-radius: var(--au-radius-sm);
    background: #55607a;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    cursor: pointer;
}

    #container:is(.content-sign-up, .account_find, .member_modify) .inputs button:not([class]):hover,
    #container:is(.content-sign-up, .account_find, .member_modify) .inputs .row button:not([class]):hover {
        border-color: var(--au-body);
        background: var(--au-body);
        color: #fff;
    }

/* 레거시가 ul 에 border-bottom: 1px solid #ccc 를 준다.
   행을 스택으로 바꾸면 그 선이 마지막 입력 필드 바로 아래(실측 1px)에 떨어져
   입력 테두리와 겹쳐 보인다.
   카드 테두리가 이미 경계를 만들므로 ul 선은 지운다. */
#container:is(.content-sign-up, .account_find, .member_modify) section > ul {
    border-bottom: 0;
}

/* ---- 4) 약관 동의 ---- */
#container:is(.content-sign-up, .account_find, .member_modify) .section-agreement > ul {
    gap: 8px;
}

#container:is(.content-sign-up, .account_find, .member_modify) .section-agreement > ul > li {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
    border: 1px solid var(--au-border);
    border-radius: var(--au-radius-sm);
    background: #fff;
}

    /* 전체 동의는 강조.
       회원정보수정(.member_modify)에는 전체 동의 줄이 없다. 첫 줄이 그냥
       '마케팅 목적 동의' 라 머리 대접을 하면 두 줄이 서로 다른 것으로 보인다. */
    #container:is(.content-sign-up, .account_find) .section-agreement > ul > li:first-child {
        flex-wrap: wrap;
        border-color: var(--au-blue);
        background: var(--au-tint);
    }

    #container:is(.content-sign-up, .account_find, .member_modify) .section-agreement .checkbox {
        display: flex;
        align-items: center;
        gap: 9px;
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
    }

    /* 상세보기는 텍스트 링크로. 회색 버튼 다섯 개가 시선을 다 먹었다 */
    #container:is(.content-sign-up, .account_find, .member_modify) .section-agreement > ul > li > button {
        flex: 0 0 auto;
        min-height: 0;
        padding: 6px 2px;
        border: 0;
        background: none;
        font-family: inherit;
        font-size: 12px;
        font-weight: 500;
        color: var(--au-muted);
        text-decoration: underline;
        text-underline-offset: 3px;
        cursor: pointer;
    }

        #container:is(.content-sign-up, .account_find, .member_modify) .section-agreement > ul > li > button:hover {
            color: var(--au-blue);
        }

    #container:is(.content-sign-up, .account_find, .member_modify) .section-agreement .note {
        flex: 1 1 100%;
        margin: 0;
        padding-left: 28px;
        /* 크기·색은 공통 안내문 기준(13px)을 그대로 쓴다. 여기서는 자리만 잡는다. */
    }

/* .tips ("동의 시 AI 솔루션, 기프티콘 이벤트 정보 제공")
   레거시는 이걸 li 밖으로 내려 띄우는 말풍선으로 만들고(position:absolute; top:95%),
   대신 ul 에 padding-bottom:3rem 로 자리를 비워 뒀다.
   재구성에서 그 padding 을 걷었더니 말풍선이 아래 "14세 미만" 문구를 덮었다.
   자리를 다시 비우는 대신 흐름 안으로 넣는다. 위치 계산이 없으면 겹칠 일도 없다. */
#container:is(.content-sign-up, .account_find, .member_modify) .section-agreement .tips {
    position: static;
    flex: 1 1 100%;
    top: auto;
    left: auto;
    margin: 2px 0 0 28px;
    padding: 8px 11px;
    border: 1px solid rgba(43, 91, 255, .18);
    border-radius: 8px;
    background: var(--au-tint);
    font-size: 12px;
    line-height: 1.5;
    color: var(--au-blue);
}

    /* 말풍선 꼬리 제거 */
    #container:is(.content-sign-up, .account_find, .member_modify) .section-agreement .tips::before {
        display: none;
    }

    #container:is(.content-sign-up, .account_find, .member_modify) .section-agreement .tips strong {
        font-size: inherit;
        font-weight: 700;
        color: var(--au-blue);
    }

/* 수신 채널 등 li 안의 블록은 한 줄씩 차지한다 */
#container:is(.content-sign-up, .account_find, .member_modify) .section-agreement .settings,
#container:is(.content-sign-up, .account_find, .member_modify) .section-agreement > ul > li > dl {
    flex: 1 1 100%;
    min-width: 0;
}

/* 채널 상자(.settings)와 팁 상자(.tips) 가 겹쳐 보이던 것.

   실측(체크 후) : settings left=432 (margin-left 1.85rem=29.6px, 레거시 값)
                   tips     left=430 (margin-left 28px, 재구성 값)
                   두 상자 사이 세로 간격 2px · 왼쪽 2px 어긋남.
   테두리 있는 상자 둘이 2px 떨어져 있고 왼쪽 끝까지 어긋나니, 아래 상자가
   위 상자 뒤에서 삐져나온 것처럼 읽혔다. 들여쓰기를 한 값으로 맞추고
   사이를 한 칸 띄운다. */
#container:is(.content-sign-up, .account_find, .member_modify) .section-agreement .settings {
    margin-left: 28px;
}

#container:is(.content-sign-up, .account_find, .member_modify) .section-agreement .tips {
    margin-top: 8px;
}

/* 필수 / 선택 배지
   content 는 레거시가 넣는다. .required::before 가 "필수",
   .required.not::before 가 "선택" 이다.
   content 를 덮으면 선택 항목에도 "필수" 가 붙으므로 모양만 바꾼다. */
#container:is(.content-sign-up, .account_find, .member_modify) .section-agreement .required::before {
    margin-right: 7px;
    padding: 3px 7px;
    border: 0;
    border-radius: var(--mc-radius-xs, 6px);
    background: rgba(229, 72, 77, .1);
    font-size: 12px;
    font-weight: 700;
    color: var(--au-red);
}

#container:is(.content-sign-up, .account_find, .member_modify) .section-agreement .required.not::before {
    background: rgba(100, 120, 140, .12);
    color: var(--au-muted);
}

/* ---- 5) 회원 유형: 세그먼트 컨트롤 ---- */
#container:is(.content-sign-up, .account_find, .member_modify) .section-account-type .buttons {
    display: flex;
    /* 레거시가 justify-content:center !important */
    justify-content: stretch !important;
    /* 트랙은 카드 콘텐츠 폭을 그대로 쓴다.
       (fit-content 로 줄였더니 카드 안에서 좌측에 몰려 보였다) */
    width: auto;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--au-border);
    border-radius: 12px;
    background: var(--au-tint);
}

    #container:is(.content-sign-up, .account_find, .member_modify) .section-account-type .buttons > button {
        /* 두 칸이 트랙을 반씩 나눠 갖는다 */
        flex: 1 1 0;
        min-width: 0;
        min-height: 0;
        height: 44px;
        /* 레거시 padding: 1.25rem 4rem */
        padding: 0 22px;
        border: 0;
        border-radius: var(--mc-radius-sm, 10px);
        /* border 를 껐어도 outline: 1px solid #d3d6d9 가 남아
           트랙 안에 테두리 박스 두 개가 겹쳐 보였다. */
        outline: 0;
        background: transparent;
        font-family: inherit;
        /* 레거시 20px */
        font-size: 14px;
        /* 켜짐과 무게를 갈라야 어느 쪽이 선택됐는지 읽힌다 */
        font-weight: 500;
        color: var(--au-muted);
        cursor: pointer;
        transition: background .15s ease, color .15s ease, box-shadow .15s ease;
    }

        /* 레거시는 :hover 에도 .active 와 같은 채움(#333)을 준다.
           마우스만 올려도 선택된 것처럼 보이므로 글자색만 바꾼다. */
        #container:is(.content-sign-up, .account_find, .member_modify) .section-account-type .buttons > button:hover {
            background: transparent;
            color: var(--au-ink);
        }

        /* 선택 상태는 스크립트가 붙이는 클래스를 그대로 쓴다 */
        #container:is(.content-sign-up, .account_find, .member_modify) .section-account-type .buttons > button.on,
        #container:is(.content-sign-up, .account_find, .member_modify) .section-account-type .buttons > button.active,
        #container:is(.content-sign-up, .account_find, .member_modify) .section-account-type .buttons > button.selected,
        #container:is(.content-sign-up, .account_find, .member_modify) .section-account-type .buttons > button.active:hover {
            background: #fff;
            color: var(--au-ink);
            font-weight: 700;
            box-shadow: 0 1px 2px rgba(11, 18, 32, .1),
                        0 4px 10px -6px rgba(11, 18, 32, .18);
        }

/* ---- 6) 하단 버튼 ---- */
#container:is(.content-sign-up, .account_find, .member_modify) .section-buttons {
    display: flex;
    gap: 10px;
    margin-top: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

    #container:is(.content-sign-up, .account_find, .member_modify) .section-buttons > button {
        flex: 1 1 0;
        min-height: 56px;
        border: 1px solid var(--au-border);
        border-radius: var(--mc-radius-sm, 10px);
        background: #fff;
        font-family: inherit;
        font-size: 16px;
        font-weight: 700;
        color: var(--au-body);
        cursor: pointer;
    }

        /* 마지막이 가입완료다 */
        #container:is(.content-sign-up, .account_find, .member_modify) .section-buttons > button:last-child {
            flex: 2 1 0;
            border: 0;
            background: var(--mc-cta, #111);
            color: #fff;
            box-shadow: 0 14px 28px -16px rgba(16, 24, 48, .5);
        }

@media (max-width: 768px) {

    #container:is(.content-sign-up, .account_find, .member_modify) h1 {
        margin-bottom: 18px;
        padding: 0 var(--mc-pad, 16px);
        /* 모바일 타이틀 표준 24px (page-chrome 과 맞춤).
           전수 조사에서 이 계열만 26px 이었다. */
        font-size: 24px;
    }

    #container:is(.content-sign-up, .account_find, .member_modify) .wrapper > section:not(.section-buttons) {
        padding: 20px var(--mc-pad-in, 16px);
    }

    #container:is(.content-sign-up, .account_find, .member_modify) .section-buttons {
        flex-direction: column;
    }

        #container:is(.content-sign-up, .account_find, .member_modify) .section-buttons > button {
            flex: none;
            width: 100%;
        }
}

/* --------------------------------------------------------------------------
   아이디 / 비밀번호 찾기 — 제목·탭 영역

   회원가입은 h1 + .wrapper 지만 찾기 화면은 .con > .section 안에
   제목과 탭이 함께 들어 있다. 그 .section 을 카드로 두면
   아래 입력 카드와 폭도 다르고(860 vs 720) 카드 안에 카드가 생긴다.
   껍데기를 벗기고 폭만 맞춘다.
   -------------------------------------------------------------------------- */
/* 찾기 화면의 기준 폭. 아이디 찾기는 입력 2개, 비밀번호 찾기는 1개 + 라디오다.
   720px 이면 '이름' 한 칸이 720px 로 늘어나 폼으로 안 보인다(로그인 카드는 420).
   제목·탭·카드·버튼이 모두 이 값을 쓴다. */
#container.account_find { --af-w: 520px; }

#container.account_find .con > .section:has(.content_title) {
    max-width: var(--af-w);
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

#container.account_find .content_title {
    max-width: var(--af-w);
    margin: 0 auto 18px;
    /* 레거시가 제목에 padding-bottom:32px 을 준다. margin 을 줄여도 이게 남아
       제목과 탭 사이가 50px 로 벌어졌다. */
    padding: 0;
    border: 0;
    font-size: 34px;
}

/* 탭은 알약형. page-chrome 의 서브탭 스코프에 계정 화면이 빠져 있어
   여기서 같은 모양으로 준다. */
#container.account_find .bulletin_tab {
    max-width: var(--af-w);
    margin: 0 auto 18px;
}

    /* 알약 모양은 page-chrome 이 전역으로 준다. 여기서는 배치만 맞춘다.
       제목이 가운데라(components.css) 탭도 가운데로 둔다.
       page-chrome 이 768px 이하에서 탭을 왼쪽으로 돌리지만(탭이 많으면 가로로 흘리려고)
       여기는 탭이 둘뿐이라 모든 폭에서 가운데로 둔다. */
    #container.account_find .bulletin_tab ul {
        justify-content: center;
    }

/* .wrapper.small 은 레거시가 width:700px !important 로 못박는다.
   제목·탭이 720 이라 축이 10px 씩 어긋났다. !important 는 !important 로만 이긴다.
   또 레거시가 display:flex; gap:3rem 이어서 카드 사이가 16 이 아니라 64 였다.
   블록으로 되돌려 회원가입과 같은 규칙(섹션 margin-bottom:16)으로 통일한다. */
#container.account_find .wrapper,
#container.account_find .wrapper.small {
    display: block;
    width: auto !important;
    max-width: var(--af-w);
    margin: 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
}

/* 입력 섹션이 카드. 버튼 줄은 카드가 아니다 */
#container.account_find .wrapper > section:not(.section-buttons) {
    margin: 0 0 16px;
    padding: 24px 26px;
    border: 1px solid var(--au-border);
    border-radius: var(--au-radius);
    background: #fff;
    box-shadow: var(--mc-shadow-xs, 0 1px 2px rgba(11, 18, 32, .05));
}

/* 개인/기업 선택은 세그먼트 컨트롤 하나뿐인데 카드 껍데기까지 쓰고 있어
   입력 카드와 나란히 카드가 둘로 보였다(높이 96/104px).
   껍데기를 벗겨 컨트롤만 카드 위에 세운다. */
#container.account_find .wrapper > section.section-account-type {
    margin: 0 0 12px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* 인증하기 버튼은 카드 밖 중앙 */
#container.account_find .btn.point.full {
    max-width: var(--af-w);
    margin: 0 auto;
}

/* --------------------------------------------------------------------------
   찾기 결과 화면 (.finish_area)

   아이디 찾기는 카드 안에, 비밀번호 찾기는 맨 배경에 떠 있어 같은 단계인데
   서로 다른 그림이었다. 폭도 802 / 520 으로 갈렸다.
   .finish_area 를 카드로 삼아 둘을 하나로 맞춘다.
   -------------------------------------------------------------------------- */
#container.account_find .con > .section:has(.finish_area) {
    max-width: var(--af-w);
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

#container.account_find .finish_area {
    box-sizing: border-box;
    width: auto;
    max-width: var(--af-w);
    /* 레거시가 위아래 70px 을 준다. 카드 높이 359 중 140 이 빈 여백이었다 */
    margin: 0 auto;
    padding: 36px 26px 28px;
    border: 1px solid var(--au-border);
    border-radius: var(--au-radius);
    background: #fff;
    box-shadow: var(--mc-shadow-xs, 0 1px 2px rgba(11, 18, 32, .05));
    text-align: center;
}

    /* 성공 배지 — 회원가입 완료 화면과 같은 언어.
       background-size 를 하나만 쓰면 그라디언트까지 34px 로 잘려
       가운데에 네모 자국이 남는다. 레이어별로 준다. */
    #container.account_find .finish_area::before {
        content: "";
        display: block;
        width: 68px;
        height: 68px;
        margin: 0 auto 20px;
        border-radius: 50%;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"),
                          var(--au-grad);
        background-repeat: no-repeat;
        background-position: center, center;
        background-size: 32px 32px, cover;
        box-shadow: 0 16px 32px -14px rgba(43, 91, 255, .55), 0 0 0 8px rgba(43, 91, 255, .06);
    }

    #container.account_find .finish_area .text_area p {
        margin: 0;
        font-size: 14px;
        line-height: 1.6;
        color: var(--au-muted);
        word-break: keep-all;
    }

    /* 조회 결과값. 리셋이 strong 을 font-weight:400 으로 눌러
       22px 보통체로 나왔다 — 강조가 안 됐다. */
    #container.account_find .finish_area .text_area strong {
        display: block;
        margin: 12px 0;
        padding: 14px 16px;
        border-radius: var(--au-radius-sm, 12px);
        background: var(--au-tint);
        font-size: 18px;
        font-weight: 700;
        line-height: 1.35;
        color: var(--au-ink);
        /* 긴 이메일이 카드를 밀지 않게 */
        word-break: break-all;
    }

    #container.account_find .finish_area .text_area p:has(strong) { margin: 0; }

    /* 로그인 버튼이 260px 고정이라 카드 안에서 혼자 좁았다 */
    #container.account_find .finish_area .btn.point.full {
        display: block;
        width: 100%;
        max-width: none;
        margin: 20px 0 0;
    }

@media (max-width: 768px) {

    #container.account_find .finish_area {
        margin-left: var(--mc-pad, 16px);
        margin-right: var(--mc-pad, 16px);
        padding: 30px 20px 24px;
    }

        #container.account_find .finish_area::before {
            width: 60px;
            height: 60px;
            margin-bottom: 16px;
            background-size: 28px 28px, cover;
        }

        #container.account_find .finish_area .text_area strong {
            font-size: 18px;
        }
}

@media (max-width: 768px) {

    #container.account_find .content_title {
        padding: 0 var(--mc-pad, 16px);
        /* 모바일 타이틀 표준 24px */
        font-size: 24px;
    }

    #container.account_find .bulletin_tab {
        padding: 0 var(--mc-pad, 16px);
    }

    /* .section-account-type 은 위에서 껍데기를 벗겼다. 여기 padding 이
       뒤에 오는 같은 특이도(1,3,0)라 빼 두지 않으면 되살아난다. */
    #container.account_find .wrapper > section:not(.section-buttons):not(.section-account-type) {
        padding: 20px var(--mc-pad-in, 16px);
    }
}

/* ==========================================================================
   안내 문구 — 로그인 계열

   components.css 의 안내문 규칙은 마이페이지·결제 계열 컨테이너에만 걸려 있어서
   로그인 계열의 .caution / .note / .con_txt 는 레거시 그대로였다. 여기서 맞춘다.
   ========================================================================== */
#container:is(.login_wrap, .content-sign-up, .sign_in, .account_find) .caution {
    margin: 14px 0 0;
    padding: 14px 16px;
    border: 1px solid var(--au-border);
    border-radius: var(--au-radius-sm);
    background: var(--au-tint);
    font-size: 14px;
    line-height: 1.65;
    color: var(--au-body);
}

    #container:is(.login_wrap, .content-sign-up, .sign_in, .account_find) .caution :is(p, li) {
        margin: 0;
    }

        #container:is(.login_wrap, .content-sign-up, .sign_in, .account_find) .caution :is(p, li) + :is(p, li) {
            margin-top: 4px;
        }

/* 크기는 components.css 의 안내문 기준(13px)을 따른다. 여기만 12.5 였다. */
#container:is(.login_wrap, .content-sign-up, .sign_in, .account_find) .note {
    display: block;
    font-size: 12px;
    line-height: 1.6;
    color: var(--au-muted);
}

#container:is(.login_wrap, .content-sign-up, .sign_in, .account_find) :is(.con_txt, .con_text) {
    font-size: 14px;
    line-height: 1.7;
    color: var(--au-body);
}

/* 문장 안 강조 */
#container:is(.login_wrap, .content-sign-up, .sign_in, .account_find) span.warn {
    font-weight: 600;
    color: var(--au-red);
}

/* 가입완료 리드 문구 */
#container:is(.content-sign-up, .member_modify) .complete_text,
#container:is(.login_wrap, .sign_in, .account_find) .complete_text {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.5;
    color: var(--au-ink);
}

    /* 위에 .con_title 이 따로 있는 화면에서는 리드가 아니라 부연이다.
       회원가입 완료 실측: 제목 26px / 이 문장 20px 둘 다 잉크색 굵은 글씨라
       두 줄로 꺾이면 제목이 두 개인 것처럼 보였다. 한 단계 내린다.
       (뷰 전수: con_title 과 같이 쓰는 화면은 회원가입 완료 하나다.
        문구만 있는 화면 - PRO 안내 · 탈퇴인증 완료 - 는 그대로 둔다.) */
    #container:is(.content-sign-up, .login_wrap, .sign_in, .account_find)
        .con_title + .complete_text {
        font-size: 16px;
        font-weight: 500;
        color: var(--au-body);
    }

/* ==========================================================================
   로그인 계열 반응형 (독립 문서)
   로그인은 Layout=null 이라 css/common/page-chrome.css 가 로드되지 않는다.
   공통 레이어가 해 주는 일을 여기서 직접 해야 한다.
   ========================================================================== */

@media (max-width: 768px) {

    /* 거터를 공통 기준(16px)에 맞춘다. 20px 이라 다른 페이지와 어긋났다. */
    #container.login_wrap {
        padding-left: var(--mc-pad, 16px);
        padding-right: var(--mc-pad, 16px);
        padding-top: 28px;
    }

    /* 카드 안쪽 32px 은 좁은 화면에서 과하다. 거터 16 + 카드 20 = 36 */
    #container.login_wrap .login .login_box,
    #container.login_wrap .login_main {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* 아이디 찾기 / 비밀번호 찾기 / 회원가입 링크가 19~24px 이라 누르기 어렵다.
       글자 크기는 그대로 두고 눌릴 영역만 넓힌다. */
    #container.login_wrap :is(.group_line, .move_info) a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 4px;
    }

    /* 로고도 홈으로 가는 링크다. 201x19 였다. */
    #container.login_wrap .logo > a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    #container.login_wrap .group_line {
        flex-wrap: wrap;
        row-gap: 0;
    }
}

@media (max-width: 900px) {

    /* 카드 규칙이 margin:0 0 16px 을 (1,3,1) 로 걸어 둬서
         #container:is(.content-sign-up, .account_find, .member_modify) .wrapper > section:not(.section-buttons)
       아래 묶음의 .wrapper > section (1,2,2) 이 클래스 수에서 진다.
       미디어쿼리는 특이도를 올려 주지 않으므로 순서와 무관하게 좌우 여백이 0 이 됐다
       (390px 실측: 카드가 L0 R390 으로 화면에 꽉 참).
       같은 모양의 선택자로 다시 받는다. */
    #container:is(.content-sign-up, .account_find, .member_modify) .wrapper > section:not(.section-buttons),
    #container:is(.content-sign-up, .account_find, .member_modify) .wrapper > section.section-buttons {
        /* .content-form section 이 width:100% 를 준다. 그대로 두면
           마진이 폭에 더해져 아이디/비밀번호 찾기가 16px 밀린다. */
        width: auto;
        max-width: none;
        margin-left: var(--mc-pad, 16px);
        margin-right: var(--mc-pad, 16px);
    }

    #container:is(.content-sign-up, .member_modify) h1,
    #container.account_find .content_title,
    #container:is(.content-sign-up, .member_modify) .wrapper > section,
    #container.account_find .con > .section {
        /* 바깥 여백은 margin 으로 주고 폭은 남은 자리를 채우게 둔다.
           width 를 남겨 두면 margin 과 합쳐져 화면을 넘긴다. */
        width: auto !important;
        max-width: none;
        /* 거터는 공통 토큰 하나만 쓴다. 화면 폭마다 12/14/16 으로 달랐더니
           페이지 간 기준선이 어긋났다(전수 리뷰 참고). */
        margin-left: var(--mc-pad, 16px);
        margin-right: var(--mc-pad, 16px);
        box-sizing: border-box;
    }

    /* 아이디/비밀번호 찾기는 .wrapper 가 700px 고정이다.
       레거시 선택자가 길어 특이도로는 이길 수 없어 !important 로 받는다. */
    #container.account_find .wrapper,
    #container:is(.content-sign-up, .member_modify) .wrapper,
    #container:is(.account_find, .content-sign-up) :is(.l_box, .r_box, .box_area, .inner) {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        float: none !important;
    }

    #container:is(.account_find, .content-sign-up) .wrapper {
        padding-left: 0;
        padding-right: 0;
    }

    /* 찾기 화면의 제목·탭은 .con > .section 껍데기 안에 있고, 그 껍데기는
       PC 에서 카드 폭(720)에 맞춰 가운데 정렬한다.
         #container.account_find .con > .section:has(.content_title)
             max-width: 720px; margin: 0 auto;
       좁은 화면에서는 카드가 좌우 16px 로 붙는데 껍데기만 720 으로 남아
       제목이 768px 에서 L40, 900px 에서 L106 으로 카드(L16)와 어긋났다.
       껍데기는 폭을 풀고 여백은 제목·탭이 직접 갖게 한다
       (.content_title 은 위 묶음에서 이미 16px 을 받는다). */
    #container.account_find .con > .section:has(.content_title) {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

    #container.account_find .bulletin_tab {
        max-width: none;
        margin-left: var(--mc-pad, 16px);
        margin-right: var(--mc-pad, 16px);
    }
}

@media (max-width: 768px) {

    /* 약관 상세 본문이 80px 까지 들여써져 있다. 390px 에서는 읽을 폭이 부족하다.
       거터(16) + 섹션(16) 위에 48px 이 더 얹힌 것이라 안쪽 들여쓰기를 걷는다. */
    #container:is(.content-sign-up, .member_modify) .section-agreement :is(dl, dt, dd, ul, li) {
        margin-left: 0;
        padding-left: 0;
    }

    /* 약관 상세보기 토글이 36px 이라 터치 기준(44px)에 못 미친다.
       셀렉터를 데스크톱 규칙과 똑같이 써야 min-height:0 을 넘어선다.
       (특이도가 같으면 나중에 선언한 쪽이 이긴다) */
    #container:is(.content-sign-up, .account_find, .member_modify) .section-agreement > ul > li > button,
    #container:is(.content-sign-up, .member_modify) .btn-dropdown {
        min-height: 44px;
    }

    /* 회원 유형 등 버튼 묶음이 고정폭이라 글자가 세로로 쪼개진다 */
    #container.account_find .buttons {
        display: flex;
        gap: 10px;
    }

        #container.account_find .buttons > button {
            flex: 1 1 0;
            width: auto !important;
            min-width: 0;
            white-space: nowrap;
        }

    #container.account_find :is(input, select) {
        max-width: 100%;
    }

    #container.account_find .inputs :is(input[type=text], input[type=tel], select) {
        width: 100%;
    }
}

@media (max-width: 768px) {

    /* ---- 여백 축소 ----
       데스크톱 패딩이 그대로 내려오면 좌우 여백 합이 화면 폭의 절반을 먹는다.
       (390px 기준 wrapper 96 + section 56 + li 32 = 184px)
       바깥 여백은 section 의 margin 하나로 통일하고 안쪽 패딩은 줄인다. */
    #container:is(.content-sign-up, .member_modify) .wrapper {
        padding-left: 0;
        padding-right: 0;
    }

    #container:is(.content-sign-up, .member_modify) .wrapper > section:not(.section-buttons) {
        padding-left: var(--mc-pad-in, 16px);
        padding-right: var(--mc-pad-in, 16px);
    }

    #container:is(.content-sign-up, .member_modify) section ul li {
        padding-left: 0;
        padding-right: 0;
    }

    /* ---- 라벨 / 입력 2단을 1단으로 ---- */
    #container:is(.content-sign-up, .member_modify) section ul li,
    #container.account_find section ul li {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

        #container:is(.content-sign-up, .member_modify) section ul li > .title,
        #container:is(.content-sign-up, .member_modify) section ul li > .inputs,
        #container.account_find section ul li > .title,
        #container.account_find section ul li > .inputs {
            width: 100%;
            min-width: 0;
            flex: none;
        }

    /* 입력 묶음(인증번호 + 버튼 등)이 한 줄에 안 들어가면 접는다 */
    #container:is(.content-sign-up, .member_modify) .inputs {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

        #container:is(.content-sign-up, .member_modify) .inputs input,
        #container:is(.content-sign-up, .member_modify) .inputs select {
            width: 100%;
            flex: 1 1 180px;
        }

        /* 전화번호 · 사업자등록번호처럼 서너 자리짜리 칸은 한 줄에 둔다.
           기준폭 180 을 그대로 두면 358px 화면에서 세 칸이 각자 한 줄을
           차지하고 사이의 '-' 까지 줄이 되어 한 항목이 여섯 줄이 된다.
           회원가입은 이런 줄을 .row 로 묶어 두어 해당 없다. */
        #container:is(.content-sign-up, .member_modify) .inputs > input[maxlength="2"],
        #container:is(.content-sign-up, .member_modify) .inputs > input[maxlength="3"],
        #container:is(.content-sign-up, .member_modify) .inputs > input[maxlength="4"],
        #container:is(.content-sign-up, .member_modify) .inputs > input[maxlength="5"] {
            flex: 1 1 0;
            width: auto;
            min-width: 0;
        }

        /* 사이의 '-' 는 줄을 만들지 않는다 */
        #container:is(.content-sign-up, .member_modify) .inputs > span {
            display: flex;
            align-items: center;
            flex: 0 0 auto;
        }

        /* 줄 안 버튼(본인 인증 · 수정 · 변경하기)은 한 줄을 다 쓴다.
           세 자리 칸들과 같은 줄에 끼면 입력칸이 62px 까지 줄어든다.
           회원가입의 '인증번호 확인' 은 .row 안이라 해당 없다. */
        #container:is(.content-sign-up, .member_modify) .inputs > button:not([class]) {
            flex: 1 1 100%;
            width: 100%;
        }

    /* ---- 절 제목 + 오른쪽 버튼 ----
       390 실측: 절이 358 인데 제목 '세금계산서 정보' + '입력내용 삭제'(86) +
       '세금계산서 정보 관리'(115) 가 한 줄에 못 들어가 셋이 전부 두 줄로
       접혔다. 제목 한 줄 · 버튼 한 줄로 나누면 글자는 다 한 줄에 선다. */
    #container:is(.content-sign-up, .member_modify) .section-title {
        flex-wrap: wrap;
    }

        #container:is(.content-sign-up, .member_modify) .section-title .buttons {
            flex: 1 1 100%;
            margin-left: 0;
            margin-top: 10px;
        }

            #container:is(.content-sign-up, .member_modify) .section-title .buttons button {
                flex: 1 1 0;
                min-width: 0;
                height: 40px;
                white-space: nowrap;
            }

    /* ---- 회원 유형 버튼 ----
       고정폭이라 좁아지면 글자가 한 자씩 세로로 쪼개진다. */
    #container:is(.content-sign-up, .member_modify) .section-account-type .buttons {
        display: flex;
        gap: 10px;
    }

        #container:is(.content-sign-up, .member_modify) .section-account-type .buttons button {
            flex: 1 1 0;
            width: auto;
            min-width: 0;
            white-space: nowrap;
        }

    /* ---- 툴팁 ----
       비밀번호 규칙 툴팁이 360px 고정폭이라 화면을 넘는다.
       .tooltip 의 positioning 을 풀어 행(li)을 기준 상자로 삼으면
       폭 계산이 필요 없이 행 폭에 정확히 맞는다. */
    #container:is(.content-sign-up, .member_modify) section ul li {
        position: relative;
    }

    #container:is(.content-sign-up, .member_modify) .tooltip {
        position: static;
    }

        #container:is(.content-sign-up, .member_modify) .tooltip .tooltip-content {
            left: 0;
            right: 0;
            width: auto;
            max-width: none;
            transform: none;
        }

    /* ---- 약관 동의 행 ----
       .note 와 펼침 내용(dl)은 flex:1 1 100% 라 wrap 이 있어야 제 줄로 간다.
       그런데 .checkbox 가 flex:1 1 auto(=기본폭이 라벨 글자폭) 라
       라벨 257 + 간격 10 + 상세보기 48 = 315 로 남은 294 를 넘겨
       상세보기가 매 항목마다 한 줄씩 더 먹었다(항목당 +54px, 네 항목 216px).

       기준폭 0 으로 바꿔 라벨이 먼저 줄어들게 하고, 라벨을 14px 로 낮춰
       한 줄에 들어오게 한다. 상세보기는 최소 높이 44px 를 지키므로
       같은 줄에 와도 손가락 크기는 그대로다.
       390px 실측: 약관동의 1118 → 884, 문서 2816 → 2582 */
    /* 원본이 > ul > li 라 요소가 하나 더 많다. 같은 모양으로 받는다. */
    #container:is(.content-sign-up, .member_modify) .section-agreement > ul > li {
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px;
    }

        #container:is(.content-sign-up, .member_modify) .section-agreement .checkbox {
            flex: 1 1 0;
        }

            #container:is(.content-sign-up, .member_modify) .section-agreement .checkbox label {
                font-size: 14px;
            }

    /* ---- 하단 버튼 ---- 전체폭으로 */
    #container:is(.content-sign-up, .member_modify) .section-buttons {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

        #container:is(.content-sign-up, .member_modify) .section-buttons button,
        #container:is(.content-sign-up, .member_modify) .section-buttons a {
            width: 100%;
        }
}

@media (max-width: 480px) {

    /* 480px 이하에서도 거터를 줄이지 않는다.
       줄이면 기준선이 하나 더 생겨 페이지 간 정렬이 어긋난다. */

    /* 입력 묶음도 완전히 세로로 */
    #container:is(.content-sign-up, .member_modify) .inputs input,
    #container:is(.content-sign-up, .member_modify) .inputs select {
        flex: 1 1 100%;
    }

    /* 광고성 정보 수신 채널처럼 체크박스가 한 줄로 늘어선 행은 접는다 */
    #container:is(.content-sign-up, .member_modify) .checkbox,
    #container:is(.content-sign-up, .member_modify) .section-agreement li > div {
        flex-wrap: wrap;
        gap: 6px 12px;
    }
}

/* 인증/제출 버튼 줄만 좌우 패딩이 0이라 화면 끝까지 붙었다.
   위 카드들은 여백이 있어 어긋나 보인다.
   → 그 뒤 900px 이하 묶음(.wrapper > section.section-buttons)이 카드와 같은 좌우 margin 16px 을
     주게 되어, 여기 패딩까지 더해지면 버튼이 카드보다 양쪽 16px 씩 좁았다(390px 실측 버튼 32~358,
     카드 16~374). 여백은 margin 하나로만 준다. */
@media (max-width: 768px) {

    #container:is(.content-sign-up, .account_find, .member_modify) .section-buttons {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ==========================================================================
   검증 오류 때 입력칸이 그대로이던 것

   jQuery 검증은 틀린 입력에 input-validation-error 클래스를 붙인다.
   그런데 저장소 어디에도 이 클래스를 쓰는 규칙이 없었다. 실측하면

     오류 전  테두리 rgb(231,235,245)
     오류 후  테두리 rgb(231,235,245)   ← 같다. 배경 · 그림자도 그대로
     aria-invalid 없음

   빨개지는 것은 아래 메시지(12px)뿐이라, 칸이 여럿인 줄(사업자등록번호 ·
   휴대전화 · 이메일)에서 어느 칸이 틀렸는지 눈으로 못 짚는다.
   첫 오류로 스크롤하고 포커스를 옮기는 것은 이미 동작한다 — 표시만 없었다.

   폴백을 다는 이유는 이 파일이 Layout=null 문서(ServiceLogin)에서도 쓰이고
   그 화면은 tokens.css 를 링크하지 않기 때문이다. */
#container:is(.content-sign-up, .account_find, .member_modify) input.input-validation-error,
#container:is(.content-sign-up, .account_find, .member_modify) select.input-validation-error,
#container:is(.content-sign-up, .account_find, .member_modify) textarea.input-validation-error {
    border-color: var(--mc-red, #e5484d);
}

    #container:is(.content-sign-up, .account_find, .member_modify) input.input-validation-error:focus,
    #container:is(.content-sign-up, .account_find, .member_modify) select.input-validation-error:focus,
    #container:is(.content-sign-up, .account_find, .member_modify) textarea.input-validation-error:focus {
        border-color: var(--mc-red, #e5484d);
        box-shadow: 0 0 0 3px rgba(229, 72, 77, .18);
    }


/* ==========================================================================
   약관 목록을 목록으로 — 전체 동의는 머리로, 항목은 같은 높이로

   실측(1440)에서 네 항목의 높이가 64 · 74 · 111 · 225 였다. 3.5배다.
   같은 성격의 항목인데 마지막 하나만 안내 · 수신채널 · 혜택문구를 품고 있어
   목록이 목록으로 안 읽히고 덩어리 넷이 따로 놀았다.

   [1] 전체 동의는 항목이 아니라 목록의 머리다
       혼자 파란 테두리 카드라 아래 넷과 다른 목록처럼 보였다. 카드 껍데기를
       벗기고 아래에 구분선을 둔다. 자리는 그대로, 역할만 분명해진다.

   [2] 수신 채널은 광고성에 동의했을 때만 보인다
       원래도 동의 전에는 disabled 로 죽어 있었다. 못 누르는 것을 미리 보여
       줄 이유가 없다. 체크하면 나타난다 — JS 가 이미 .disabled 를 떼고 있다.

   [3] 네 항목의 머리줄 높이를 맞춘다
       체크박스 · 배지 · 문구 · 상세보기가 놓이는 줄이다. 이 줄이 같으면
       아래 붙는 것이 달라도 목록으로 읽힌다.
   ========================================================================== */
/* 아래 [1] 도 전체 동의 줄이 있는 화면에서만이다 */
#container.content-sign-up .section-agreement > ul > li:first-child {
    border: 0;
    border-bottom: 1px solid var(--mc-border, #e7ebf5);
    border-radius: 0;
    background: transparent;
    padding: 0 2px 14px;
    margin-bottom: 4px;
}

/* 접힌 상세(dl)가 높이는 0 인데 자리는 한 줄을 먹고 있었다.
   li 가 display:flex; gap:10px 이라 dl 이 다음 줄로 넘어가면서 row-gap 10px 을
   그대로 가져간다. 겉보기가 같은 한 줄짜리 항목인데도

     다이애드 이용약관(dl 없음)   64px
     개인정보 수집(dl 있음)      74px    <- 10px 은 접힌 dl 의 줄 간격

   row-gap 을 0 으로 두고 아래에 붙는 것들은 각자의 margin 으로 띄운다.
   dl.active(0.75rem) · .settings(12px) · .tips(2px) 는 이미 margin 을 갖고 있다.
   note 만 없어 여기서 준다. */
#container:is(.content-sign-up, .member_modify) .section-agreement > ul > li {
    row-gap: 0;
}

    #container:is(.content-sign-up, .member_modify) .section-agreement > ul > li > .note {
        margin-top: 6px;
    }

#container:is(.content-sign-up, .member_modify) .section-agreement > ul > li > .checkbox {
    min-height: 28px;
}

/* 절 제목 오른쪽 버튼 (세금계산서 정보 삭제 · 관리)
   레거시가 회색 #f3f6f9 와 하늘색 #3caaf6 을 쓴다. 토큰 밖 색이고, 같은
   화면 아래의 '수정완료'(--mc-blue)와 파랑이 두 종류가 된다. */
#container:is(.content-sign-up, .account_find, .member_modify) .section-title .buttons {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

    #container:is(.content-sign-up, .account_find, .member_modify) .section-title .buttons button {
        height: 36px;
        padding: 0 14px;
        border: 1px solid var(--au-border);
        border-radius: var(--au-radius-sm);
        background: #fff;
        font-family: inherit;
        font-size: 13px;
        font-weight: 600;
        color: var(--au-body);
        cursor: pointer;
    }

        #container:is(.content-sign-up, .account_find, .member_modify) .section-title .buttons button:hover {
            border-color: var(--au-blue);
            color: var(--au-blue);
        }

        /* 마지막이 주 동작이다 */
        #container:is(.content-sign-up, .account_find, .member_modify) .section-title .buttons button:last-of-type {
            border-color: var(--au-blue);
            background: var(--au-blue);
            color: #fff;
        }

            #container:is(.content-sign-up, .account_find, .member_modify) .section-title .buttons button:last-of-type:hover {
                filter: brightness(1.06);
                color: #fff;
            }

/* 동의 전에는 채널을 감춘다 (JS 가 동의 시 .disabled 를 뗀다) */
#container:is(.content-sign-up, .member_modify) .section-agreement .settings.disabled {
    display: none;
}


/* ==========================================================================
   라벨과 값의 대비

   라벨 14px/600 · 입력 14px/400 이라 크기가 같아 라벨이 서지 않았다.
   라벨은 안내이고 입력값이 주인공이므로, 라벨을 보조색으로 낮추고 값을 한
   단 키운다. 칸 높이가 48px 이라 16px 글자가 더 알맞게 앉는다.
   (14 · 16 은 둘 다 타입 스케일 위의 값이다 — tokens.css 아래 표 참고)
   ========================================================================== */
#container:is(.content-sign-up, .account_find, .member_modify) .inputs > :is(input, select, textarea) {
    font-size: 16px;
}

#container:is(.content-sign-up, .account_find, .member_modify) .title.asterisk,
#container:is(.content-sign-up, .account_find, .member_modify) .inputs + .title,
#container:is(.content-sign-up, .account_find, .member_modify) .row > .title {
    color: var(--mc-body, #4a5468);
}


/* ==========================================================================
   ※ 로 시작하는 안내는 항목마다 줄을 나눈다

   사업자 정보 아래 안내가 span 두 개인데 inline 이라 한 문단으로 흐른다.
   1440 실측에서 두 span 의 시작 y 가 1929 로 같았다 — 두 번째 ※ 가 첫
   문장이 끝난 자리에서 이어진다. ※ 는 항목의 시작을 알리는 기호라 줄 가운데
   에서 시작하면 어디서 끊어 읽어야 할지 알 수 없다.

   같은 문구를 쓰는 회원정보수정(MemberModify)은 p 두 개로 두어 저절로
   나뉜다. 회원가입만 span 이라 이어 붙었다. 결과를 그쪽에 맞춘다.
   (마크업을 p 로 바꾸는 것이 더 맞지만 그러면 재빌드가 필요하고, 보이는
   결과는 같다.) */
#container:is(.content-sign-up, .member_modify) .note > span {
    display: block;
}

    #container:is(.content-sign-up, .member_modify) .note > span + span {
        margin-top: 4px;
    }

/* 광고성 정보 수신 채널 — 좁은 화면에서 '문자(SMS)' 가 '문자 / (SMS)' 로 꺾이던 것.
   768 이하의 약관 줄 규칙(.section-agreement .checkbox { flex: 1 1 0 })이 이 상자 안의
   체크박스에도 걸려 칸이 53px 까지 줄었다(390 실측). 제목이 한 줄에서 140px 를 먹어
   두 항목에 남는 폭도 130px 뿐이었다.
   라벨은 칸 안에서 꺾이지 않게 한다. 회원정보수정도 같은 마크업이라 함께 받는다. */
#container:is(.content-sign-up, .member_modify) .section-agreement .settings .checkbox label {
    white-space: nowrap;
}

/* 상자 안쪽 여백 — 글자 기준으로 맞춘다.
   체크 칸은 터치 높이 44px 안에 글자를 가운데 둬서, 칸 위아래에 14px 씩 빈 줄이 이미 있다.
   padding 을 네 방향 같게 주면(모바일 12px) 제목 위는 11px, 체크 글자 아래는 26px 로 보였다.
   보이는 여백을 위아래 14 · 좌우 16(PC 는 24)으로 맞추고, 모서리는 아래 안내 상자(.tips)와 같은 8px. */
#container:is(.content-sign-up, .member_modify) .section-agreement .settings {
    border-radius: 8px;
}

/* 두 채널이 남는 폭을 반씩 나눠(flex 1 1 0) '이메일' 이 상자 가운데로 떨어져 있었다(768 · PC).
   내용 폭만 쓰고 사이를 24px 로 둔다. */
#container:is(.content-sign-up, .member_modify) .section-agreement .settings .checkbox {
    flex: 0 0 auto;
}

#container:is(.content-sign-up, .member_modify) .section-agreement .settings {
    column-gap: 24px;
}

/* 한 줄(481~768): 칸 자체의 14px 가 위아래 여백이 된다 */
@media (min-width: 481px) and (max-width: 768px) {
    #container:is(.content-sign-up, .member_modify) .section-agreement .settings {
        padding: 0 16px;
    }
}

/* 두 줄(480 이하): 제목만 윗줄, 두 채널은 아랫줄에 나란히.
   제목 위 15(글자 기준 14) · 체크 줄 아래 0(칸의 14 가 여백). 제목과 체크 글자 사이는
   칸의 위쪽 여백을 당겨 10 으로. 터치 칸 높이는 줄이지 않는다. */
@media (max-width: 480px) {
    #container:is(.content-sign-up, .member_modify) .section-agreement .settings {
        flex-wrap: wrap;
        gap: 0 24px;
        padding: 15px 16px 0;
    }

        #container:is(.content-sign-up, .member_modify) .section-agreement .settings h5 {
            flex: 0 0 100%;
            margin: 0 0 -3px;
        }

        #container:is(.content-sign-up, .member_modify) .section-agreement .settings .checkbox {
            flex: 0 0 auto;
        }
}