/* ==========================================================================
   표 — 시각 정리 (전 화면 공통)

   레거시(css.css .tb_style)는 2010년대 관리자 표 그대로였다. 실측:
     상단 2px #2b2d3a · 하단 1px #787878
     모든 셀에 세로 구분선 — 화면이 격자로 나뉜다
     헤더 배경 #e3e6e9, 좌측 항목 열 #f2f3f5 — 회색 덩어리가 둘
     셀 고정 높이 50 / 60px, 글자 16px
     서체 NSR · Roboto (Roboto 에는 한글이 없어 제목만 다른 얼굴로 떨어진다)

   표를 읽는 방향은 가로인데 세로선이 그 흐름을 끊는다. 선을 줄이고
   여백과 굵기로 나눈다. 담는 값은 그대로다.

   레거시 파일은 건드리지 않고 뒤에 오는 이 층에서 덮는다.
   특이도는 #container 를 끼워 맞춘다 — 레거시가
   .tb_style.basic tbody tr:not(:last-child) td (0,3,1) 까지 쓰므로
   클래스만으로는 넘지 못한다.
   ========================================================================== */

#container .tb_style {
    font-family: var(--mc-font);
}

    /* ---- 표를 카드로 ----
       결제 화면(.pcx-card)이 쓰는 언어와 같다 — 흰 바탕, 1px 테두리,
       radius 16. 굵은 상단선 대신 테두리가 표의 경계를 알린다.
       radius 를 살리려면 border-collapse 가 separate 여야 한다.
       셀은 아래 규칙에서 border-bottom 만 쓰므로 선이 겹치지 않는다. */
    #container .tb_style:is(.basic, .board) {
        border-collapse: separate;
        border-spacing: 0;
        border: 1px solid var(--mc-border, #e7ebf5);
        border-radius: var(--mc-radius, 16px);
        background: var(--mc-surface, #fff);
        /* overflow 는 주지 않는다.
           데스크톱(display:table)에서는 모서리를 자르지도 못하면서
           sticky 의 기준 컨테이너만 만들어, 표 헤더 고정이 표 안에
           갇혀 버린다(표가 화면 위로 나가면 헤더도 같이 나간다).
           모서리는 아래에서 셀에 직접 radius 를 줘서 처리한다.
           좁은 화면은 responsive-base 의 overflow-x:auto 가 맡는다. */
    }

    /* ---- 헤더 ---- 옅은 띠 + 작고 굵은 라벨 */
    #container .tb_style:is(.basic, .board) thead th {
        height: auto;
        padding: 14px 16px;
        border: 0;
        border-bottom: 1px solid var(--mc-border, #e7ebf5);
        background: var(--mc-tint, #f4f7fe);
        color: var(--mc-muted, #7c87a0);
        font-family: inherit;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0;
        line-height: 1.4;
    }

    /* 모서리. 셀 배경이 테두리 밖으로 삐져나오지 않게 네 귀퉁이를 깎는다.
       (테두리 1px 을 뺀 값이라야 안쪽 선과 어긋나지 않는다) */
    #container .tb_style:is(.basic, .board) thead tr:first-child th:first-child {
        border-top-left-radius: calc(var(--mc-radius, 16px) - 1px);
    }

    #container .tb_style:is(.basic, .board) thead tr:first-child th:last-child {
        border-top-right-radius: calc(var(--mc-radius, 16px) - 1px);
    }

    /* 헤더 줄이 없는 표는 본문 첫 행이 위 모서리를 맡는다 */
    #container .tb_style:is(.basic, .board):not(:has(thead)) tbody tr:first-child :is(th, td):first-child {
        border-top-left-radius: calc(var(--mc-radius, 16px) - 1px);
    }

    #container .tb_style:is(.basic, .board):not(:has(thead)) tbody tr:first-child :is(th, td):last-child {
        border-top-right-radius: calc(var(--mc-radius, 16px) - 1px);
    }

    #container .tb_style:is(.basic, .board):not(:has(tfoot)) tbody tr:last-child :is(th, td):first-child {
        border-bottom-left-radius: calc(var(--mc-radius, 16px) - 1px);
    }

    #container .tb_style:is(.basic, .board):not(:has(tfoot)) tbody tr:last-child :is(th, td):last-child {
        border-bottom-right-radius: calc(var(--mc-radius, 16px) - 1px);
    }

    #container .tb_style:is(.basic, .board) tfoot tr:last-child :is(th, td):first-child {
        border-bottom-left-radius: calc(var(--mc-radius, 16px) - 1px);
    }

    #container .tb_style:is(.basic, .board) tfoot tr:last-child :is(th, td):last-child {
        border-bottom-right-radius: calc(var(--mc-radius, 16px) - 1px);
    }

    /* ---- 본문 ---- 세로선을 걷고 가로선만 남긴다 */
    #container .tb_style:is(.basic, .board) tbody :is(th, td) {
        height: auto;
        padding: 15px 16px;
        border: 0;
        border-bottom: 1px solid var(--mc-border, #e7ebf5);
        font-size: 14px;
        line-height: 1.55;
    }

        #container .tb_style:is(.basic, .board) tbody tr:last-child :is(th, td) {
            border-bottom: 0;
        }

        /* 숨은 행이 DOM 상 마지막이면 위 규칙이 빗나간다.

           광고문의는 유형에 따라 나오는 행을 .hide 로 접어 둔다. 유형을
           고르기 전에는 '유형' 행이 눈에 보이는 마지막 행인데, :last-child
           는 그 뒤의 숨은 '내용' 행을 가리킨다. 그래서 유형 행이 아래 선을
           그대로 들고 있고, 표 자신의 아래 테두리가 1px 아래에 겹쳐 선다.
           실측(비회원문의 1600px): 유형 행 셀 아래 811, 표 아래 812 —
           같은 색 1px 선 두 개가 1px 간격으로 서서 굵은 선으로 보였다.

           보이는 마지막 행 = 뒤에 보이는 행이 하나도 없는 행. */
        #container .tb_style:is(.basic, .board) tbody tr:not(.hide):not(:has(~ tr:not(.hide))) :is(th, td) {
            border-bottom: 0;
        }

        /* 좌측 항목 열. 회색 칸이 아니라 굵기와 색으로 구분한다. */
        #container .tb_style:is(.basic, .board) tbody th {
            background: none;
            color: var(--mc-ink, #0b1220);
            font-family: inherit;
            font-weight: 600;
        }

        #container .tb_style:is(.basic, .board) tbody td {
            color: var(--mc-body, #4a5468);
        }

    /* 숫자가 세로로 줄 맞게 */
    #container .tb_style :is(th, td) {
        font-variant-numeric: tabular-nums;
    }

    /* 목록 표에만 행 강조를 준다. 요금·안내 표는 누르는 것이 아니다. */
    #container .tb_style.board tbody tr:hover :is(th, td) {
        background: var(--mc-tint, #f4f7fe);
    }

    /* ---- 합계 줄 ----
       배경은 tfoot 이 아니라 셀에 준다. tfoot 에 주면 모서리를 깎아도
       그 배경이 테두리 밖으로 삐져나온다. */
    #container .tb_style:is(.basic, .board) tfoot {
        background: none;
    }

        #container .tb_style:is(.basic, .board) tfoot :is(th, td) {
            padding: 15px 16px;
            border: 0;
            border-top: 1px solid var(--mc-border, #e7ebf5);
            background: var(--mc-tint, #f4f7fe);
            color: var(--mc-ink, #0b1220);
            font-size: 14px;
            font-weight: 700;
        }

    /* ---- 헤더 행이 없는 표 ----
       레거시는 항목 열을 #6a6a6a 회색으로 채웠다. 같은 계단을 쓴다. */
    #container .tb_style.no_head tbody th {
        border-bottom: 1px solid var(--mc-border, #e7ebf5);
        background: var(--mc-tint, #f4f7fe);
        color: var(--mc-ink, #0b1220);
        font-weight: 600;
    }

/* 좁은 화면 — 글자와 여백을 줄여 한 화면에 더 들어가게 한다.
   390px 에서 16px + 좌우 15px 이면 '전월(D-30)' 이 두 줄로 쪼개졌다. */
@media (max-width: 768px) {

    #container .tb_style:is(.basic, .board) thead th {
        padding: 11px 10px;
        /* 12px 이었다. 표 헤더는 데이터를 읽는 단서라 13px 아래로 두지 않는다
           (390px 전수 실측에서 30곳이 12px 로 나왔다). */
        font-size: 12px;
    }

    #container .tb_style:is(.basic, .board) tbody :is(th, td) {
        padding: 12px 10px;
        font-size: 14px;
    }

    #container .tb_style:is(.basic, .board) tfoot :is(th, td) {
        padding: 12px 10px;
        font-size: 14px;
    }

    /* 값이 낱말 가운데서 쪼개지지 않게 한다.
       '전월(D-30)' 이 '전월(D-' / '30)' 두 줄로 잘려 읽기 어려웠다.
       넘치는 만큼은 가로로 흘린다 — responsive-base 가 표에
       overflow-x:auto 를 이미 걸어 둔다.
       (아래 폼 표 전환 블록에서 이 값을 되돌린다. 세로로 쌓은 칸에는
        긴 안내문이 들어가므로 줄바꿈이 필요하다.) */
    #container .tb_style.basic :is(thead th, tbody th, tbody td) {
        white-space: nowrap;
    }
}

/* ==========================================================================
   표 반응형 — 카드 전환 패턴

   레거시 표는 colgroup 고정폭에 컬럼이 많다. 결제내역은 12컬럼 1075px 이라
   좁은 화면에서 가로 스크롤로 흘리면 사실상 읽을 수 없다.
   행 하나를 카드 하나로 접어 "라벨: 값" 목록으로 바꾼다.

   쓰는 법
     1) table 에 tb_cards 클래스를 붙인다
     2) 각 td 에 data-label 을 준다. 그 값이 좁은 화면에서 라벨로 나온다
        <td data-label="결제금액">110,000 원</td>
     3) 라벨이 필요 없는 칸은 data-label="" 로 둔다

   붙이지 않은 표는 css/common/responsive-base.css 의 기본 동작(가로 스크롤)을 따른다.
   컬럼이 적은 표는 그쪽이 낫다.
   ========================================================================== */

@media (max-width: 768px) {

    #container .tb_style.tb_cards {
        /* responsive-base 가 걸어 둔 가로 스크롤을 해제한다 */
        display: block;
        overflow: visible;
        /* 표가 카드로 바뀌면 줄 하나하나가 상자가 된다. 그러면 표 자신은
           상자일 이유가 없다. 원래는 레거시의 굵은 윗선만 끄고(border-top:0)
           나머지 세 변을 남겨 뒀는데, 그게 카드 열 장을 한 번 더 감싸는
           ㄷ 자 테두리로 보였다.
           390px 실측: 바깥 16~374(radius 12) / 카드 17~373(radius 10) —
           같은 색 같은 굵기 선 두 개가 1px 간격으로 겹쳐 선다.
           표는 이제 카드를 담는 자리일 뿐이므로 껍데기를 전부 걷는다. */
        border: 0;
        border-radius: 0;
        background-color: transparent;
    }

        #container .tb_style.tb_cards colgroup,
        #container .tb_style.tb_cards thead,
        #container .tb_style.tb_cards caption {
            display: none;
        }

        #container .tb_style.tb_cards tbody,
        #container .tb_style.tb_cards tbody tr,
        #container .tb_style.tb_cards tbody td {
            display: block;
            width: auto;
        }

        #container .tb_style.tb_cards tbody tr {
            margin: 0 0 12px;
            padding: 6px 16px;
            border: 1px solid var(--mc-border, #e7ebf5);
            border-radius: var(--mc-radius-sm, 10px);
            background: var(--mc-surface, #fff);
        }

        #container .tb_style.tb_cards tbody td {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 7px 0;
            border: 0;
            border-bottom: 1px solid var(--mc-tint, #f4f7fe);
            /* 위쪽 좁은 화면 블록이 .tb_style.basic 의 셀에 nowrap 을 건다.
               가로 스크롤로 흘려 보내는 표에는 맞지만, 카드 안에서는
               한 줄에 갇혀 잘린다. 카드는 세로로 길어져도 되니 되돌린다.
               (전에는 폼 표 전환 블록이 되돌려 줬는데, 그 블록에서
                .tb_cards 를 빼면서 여기로 옮겼다) */
            white-space: normal;
            /* .board.center 가 가운데 정렬이라 되돌린다 */
            text-align: left;
            font-size: 14px;
            line-height: 1.5;
            word-break: break-word;
        }

            #container .tb_style.tb_cards tbody td:last-child {
                border-bottom: 0;
            }

            /* 라벨. thead 를 감췄으므로 여기서 되살린다. */
            #container .tb_style.tb_cards tbody td::before {
                content: attr(data-label);
                flex: 0 0 84px;
                color: var(--mc-muted, #7c87a0);
                font-size: 12px;
                line-height: 1.5;
            }

            /* 라벨을 비워 둔 칸은 값만 보여준다 */
            #container .tb_style.tb_cards tbody td[data-label=""]::before {
                content: none;
            }

            /* 값이 비어 있으면 줄 자체를 감춰 카드가 길어지지 않게 한다 */
            #container .tb_style.tb_cards tbody td:empty {
                display: none;
            }

    /* 데이터가 없을 때의 안내 행은 카드로 만들지 않는다 */
    #container .tb_style.tb_cards tbody tr.no_data td,
    #container .tb_style.tb_cards tbody td[colspan]::before {
        content: none;
    }

    #container .tb_style.tb_cards tbody td[colspan] {
        display: block;
        text-align: center;
        color: var(--mc-muted, #7c87a0);
    }
}

/* ==========================================================================
   폼 표(.tb_style.basic:not(.tb_cards)) — 라벨/값 세로 쌓기

   .tb_style.basic:not(.tb_cards) 은 데이터 목록이 아니라 "라벨 | 값" 폼 레이아웃이다.
   colgroup 이 라벨 칸을 180px 로 잡고 값 칸이 남은 폭을 먹어, 390px 화면에서는
   표 전체가 716px 가 되어 가로 스크롤 안에 갇힌다.
   그 안에서 입력·버튼·안내문이 겹치기도 했다(실측: 추천인 10px / 5px 겹침).

   목록 표(tb_cards)와 달리 라벨을 값 위에 얹는 것이 자연스럽다.

   스코프를 대상 컨테이너로 좁힌 이유
     .tb_style.basic:not(.tb_cards) 은 리디자인 제외 영역(광고 상품 소개) 14개 페이지에서도 쓴다.
     #container .tb_style.basic:not(.tb_cards) 으로 전역에 걸면 손대면 안 되는 페이지가 바뀐다.
   ========================================================================== */

@media (max-width: 768px) {

    #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify, .withdraw_info, .pay_finish, .payment, .recommend, .withdraw, .faq, .notice, .inquiry, .terms):not(.blog) .tb_style.basic:not(.tb_cards) {
        display: block;
        width: 100%;
        overflow: visible;
    }

        #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify, .withdraw_info, .pay_finish, .payment, .recommend, .withdraw, .faq, .notice, .inquiry, .terms):not(.blog) .tb_style.basic:not(.tb_cards) :is(colgroup, col) {
            display: none;
        }

        #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify, .withdraw_info, .pay_finish, .payment, .recommend, .withdraw, .faq, .notice, .inquiry, .terms):not(.blog) .tb_style.basic:not(.tb_cards) :is(tbody, tr):not(.hide) {
            display: block;
            width: auto;
        }

        #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify, .withdraw_info, .pay_finish, .payment, .recommend, .withdraw, .faq, .notice, .inquiry, .terms):not(.blog) .tb_style.basic:not(.tb_cards) tr {
            border-bottom: 1px solid var(--mc-border, #e7ebf5);
        }

            #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify, .withdraw_info, .pay_finish, .payment, .recommend, .withdraw, .faq, .notice, .inquiry, .terms):not(.blog) .tb_style.basic:not(.tb_cards) tr:last-child {
                border-bottom: 0;
            }

        #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify, .withdraw_info, .pay_finish, .payment, .recommend, .withdraw, .faq, .notice, .inquiry, .terms):not(.blog) .tb_style.basic:not(.tb_cards) th {
            display: block;
            width: auto;
            /* 레거시 height:50px 이 남아 있으면 내용이 넘쳐 다음 행을 덮는다 */
            height: auto;
            padding: 14px 0 6px;
            border: 0;
            background: none;
            text-align: left;
            font-size: 14px;
            font-weight: 600;
            /* 위 시각 층이 좁은 화면에서 nowrap 을 준다. 세로로 쌓은
               칸에는 긴 라벨·안내문이 들어가므로 되돌린다. */
            white-space: normal;
        }

        /* 값 칸은 세로 스택으로 둔다. 입력·버튼·안내문이 한 칸에 함께 오는데
           그대로 두면 줄박스가 겹친다. */
        #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify, .withdraw_info, .pay_finish, .payment, .recommend, .withdraw, .faq, .notice, .inquiry, .terms):not(.blog) .tb_style.basic:not(.tb_cards) td {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 8px;
            width: auto;
            /* 레거시 height:60px. 표 셀에서는 최소 높이처럼 굴지만
               flex 로 바꾸는 순간 고정 높이가 되어 내용이 넘친다.
               (추천인: 60px 칸에 입력+버튼+안내문 135px) */
            height: auto;
            padding: 0 0 14px;
            border: 0;
            text-align: left;
            white-space: normal;
        }

            #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify, .withdraw_info, .pay_finish, .payment, .recommend, .withdraw, .faq, .notice, .inquiry, .terms):not(.blog) .tb_style.basic:not(.tb_cards) td :is(input, select, textarea) {
                width: 100%;
            }

            /* 버튼은 내용 폭만. 전체폭으로 늘리면 입력창처럼 보인다. */
            #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify, .withdraw_info, .pay_finish, .payment, .recommend, .withdraw, .faq, .notice, .inquiry, .terms):not(.blog) .tb_style.basic:not(.tb_cards) td .btn {
                align-self: flex-start;
                min-height: 44px;
                padding: 0 16px;
            }

            #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify, .withdraw_info, .pay_finish, .payment, .recommend, .withdraw, .faq, .notice, .inquiry, .terms):not(.blog) .tb_style.basic:not(.tb_cards) td p {
                margin: 0;
            }
}

@media (max-width: 480px) {

    #container .tb_style.tb_cards tbody td::before {
        /* 기준폭은 84px 그대로 둔다. 72 로 줄였더니 쿠폰 사용 내역의
           '쿠폰 서비스 기간'(12px 에서 79px)이 두 줄로 접혀 그 행만
           35 → 50px 로 튀었다. 라벨이 접히면 값 줄과 높이가 어긋난다.
           값 칸은 390px 카드에서 245px 이 남아 넉넉하다. */
        font-size: 12px;
    }

    #container .tb_style.tb_cards tbody tr {
        padding: 4px 12px;
    }
}

/* ==========================================================================
   표 안 액션 버튼

   components.css 의 공통 버튼은 min-height 48 · padding 0 22 · 15px 이다.
   폼과 모달의 주 버튼에는 맞지만 표 셀 안의 작은 버튼에는 과하다.
   실측(결제내역): '전표출력' 59x48 에 글자는 12px, 그 탓에 행 높이가 78px.
   셀 안에서는 한 단계 작게 쓴다.

   치수는 26 이다. 처음에는 32 로 뒀는데, 결제내역의 결제상태 칸은
   상태 배지(.tag)와 버튼이 한 칸에 최대 셋까지 나란히 서는 자리라
   뷰 안에서 26 으로 따로 내려 쓰고 있었다. 같은 표 버튼이 화면마다
   26 과 34 로 갈린 셈이라, 작은 쪽으로 맞춘다 — 표 안의 보조 동작이다.

   특이도 — 공통 버튼 규칙이 (1,3,0) 이라 .tb_style 만 얹으면 진다.
   :not(.blog) 를 함께 써서 (1,3,1) 로 맞춘다.
   ========================================================================== */
#container:not(.blog) .tb_style :is(td, th) :is(.btn, .btn_r, .btn_ok, .btn_extend, .btn-dropdown) {
    /* 레거시 .tb_style .btn 이 height: 34px 을 못박아 둔다. min-height 는
       올리기만 하므로 height 를 같이 내려야 한다. */
    height: 26px;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1;
}

/* 좁은 화면에서는 조금 키운다. 다만 44 는 과했다 — 카드로 접히면 버튼이
   한 줄을 차지할 거라 보고 잡은 값인데, 실제로는 값 칸 안에서 글자 옆에
   나란히 선다. 결제내역 실측(390): 다른 값은 14px 한 줄(18px)인데
   '전표출력' 만 44px 덩어리라 카드의 리듬을 혼자 깼다.
   36 은 값 줄의 두 배 남짓이고, 보조 동작으로는 누를 만한 크기다. */
@media (max-width: 768px) {

    #container:not(.blog) .tb_style :is(td, th) :is(.btn, .btn_r, .btn_ok, .btn_extend, .btn-dropdown) {
        height: 36px;
        min-height: 36px;
        padding: 0 14px;
    }
}

/* ==========================================================================
   표가 있는 화면 — 따라다니는 것을 탭 바에서 표 헤더로 바꾼다

   레거시는 제목+탭 바(.sub_content_except)를 전 화면에서 sticky 로 만든다.
   목록을 훑는 화면에서는 그게 손해다. 실측(결제내역 1920px):
     탭 바가 265px — 제목 34 + 상단탭 47 + 서브탭 44 + 패딩 70.
     945 높이 화면의 28%를 늘 차지하면서, 정작 12열짜리 표의 헤더 행은
     그 뒤로 들어가 어느 열인지 알 수 없었다.

   탭 바는 흘려보내고 표 헤더를 헤더 바로 아래에 붙인다.
   탭 바 높이는 화면마다 다르지만(서브탭 유무) 헤더 높이는 토큰 하나다.
   표가 없는 화면은 그대로 둔다 — 흘려보낼 이유가 없다.
   ========================================================================== */
#container:has(.tb_style) #content .sub_content_except {
    position: static;
}

#container:has(.tb_style) .tb_style:is(.basic, .board) thead th {
    position: sticky;
    top: var(--mc-header-h, 113px);
    /* 본문 위로. 헤더(2000)보다는 낮게 둬야 헤더에 가려 사라진다. */
    z-index: 1;
}

/* 표가 스스로 스크롤 상자가 되는 폭에서는 고정을 푼다.

   responsive-base 가 1240 이하에서 colgroup 있는 표를
   display:block + overflow-x:auto 로 만든다(고정폭 칸을 가로로 흘리려는 것).
   그러면 sticky 의 기준이 뷰포트가 아니라 표가 되어, top 값만큼 헤더가
   표 안쪽으로 밀려 들어간다. 위 규칙 바로 옆의 주석이 감싼 박스에 대해
   경계한 바로 그 덫인데, 표 자체에 걸린 overflow 로 같은 일이 났다.

   실측(약관 4열 표, 밀림 / 첫 행 가려진 높이)
      390 · 768   45 / 41      1239 · 1240  100 / 47
      1024        45 / 45      1280 이상      0 /  0   (정상)
   표 위에 그만큼 빈 띠가 생기고, 첫 행 윗부분이 헤더에 가린다.
   가로로만 스크롤되는 상자라 헤더를 세로로 붙잡을 이유도 없다.

   colgroup 이 없는 표는 이 폭에서도 display:table 로 남아 기준이
   뷰포트이므로(밀림 0) 그대로 고정해 둔다. */
@media (max-width: 1240px) {
    #container:has(.tb_style) .tb_style:is(.basic, .board):has(colgroup) thead th {
        position: static;
    }
}

/* ==========================================================================
   표를 감싼 2단 박스

   l_box(좌) + r_box(우) 로 데스크톱 폭을 나눠 갖는 구조가 여러 화면에
   같은 클래스로 있다. page-chrome.css 가 이미 이 고정폭을 푸는데
   스코프가 리디자인 대상 화면 목록이라 광고상품 페이지는 빠져 있었다.
   그 안에 표가 있으면 표까지 화면을 넘는다
   (실측 /AdProduct/NaverShopping — .l_box 520px, 그 안 표도 520px).

   표를 품은 박스만 푼다. 다른 2단 레이아웃은 건드리지 않는다.
   ========================================================================== */
@media (max-width: 768px) {

    #container :is(.l_box, .r_box):has(.tb_style) {
        float: none;
        width: auto;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

        #container .l_box:has(.tb_style) {
            margin-bottom: 14px;
        }
}


/* ==========================================================================
   입력 폼으로 쓰는 표 — 좁은 화면에서 바깥 상자를 걷는다

   표를 카드로 바꾼 것은 '데이터 목록' 을 위한 처리다. 그런데 마이페이지의
   비밀번호수정·추천인 같은 화면은 같은 .tb_style 을 입력 폼으로 쓴다.
   390px 실측:
     페이지 배경  #fff
     카드 배경    #fff          ← 같다. 테두리가 나누는 대상이 없다
     카드 테두리  #e7ebf5
     행 구분선    #e7ebf5       ← 같은 색
     입력 테두리  #e7ebf5       ← 같은 색
     카드 안쪽 358 / 입력 356    ← 두 선이 1px 간격으로 나란히 선다
   358px 폭 안에 같은 굵기 같은 색 선이 세 겹으로 서는 셈이다.

   입력마다 자기 테두리가 있어 경계는 이미 충분하다. 바깥 상자와 행 구분선을
   걷고 행 간격으로 나눈다. 회원가입 폼이 이미 쓰는 방식과 같아진다.
   데스크톱은 그대로 둔다 — 1200px 에서는 폼이 페이지 안의 한 덩어리라
   경계가 제 역할을 한다.
   .left 만 잡는다. 같은 .tb_style 을 .center 로 쓰는 결제 화면들은
   (요금제 목록 + 줄마다 라디오) 폼이 아니라 데이터 표다. 입력 유무로만
   갈라내면 그쪽 카드까지 걷힌다. 지금 .left + 입력 조합은 네 곳 —
   비밀번호수정 · 추천인 · 광고문의(회원 · 비회원).
   ========================================================================== */
@media (max-width: 768px) {

    #container:not(.blog) .tb_style.basic.left:has(input:not([type=hidden]), textarea, select) {
        border: 0;
        border-radius: 0;
        background-color: transparent;
    }

        #container:not(.blog) .tb_style.basic.left:has(input:not([type=hidden]), textarea, select) tbody tr {
            border-bottom: 0;
        }

            /* 구분선이 없어진 만큼 행 사이를 벌린다 */
            #container:not(.blog) .tb_style.basic.left:has(input:not([type=hidden]), textarea, select) tbody tr + tr {
                margin-top: 18px;
            }

            #container:not(.blog) .tb_style.basic.left:has(input:not([type=hidden]), textarea, select) tbody td {
                padding-bottom: 0;
            }
}


/* ==========================================================================
   한 덩어리로 읽는 입력 묶음 — 광고문의 연락처 · 이메일

   위 블록이 좁은 화면에서 td 안의 입력을 모두 width:100% 로 만든다.
   그게 조각마다 붙어, 원래 한 줄에 나란히 놓이던 묶음이 세로로 쌓였다.
   390px 실측(고치기 전)
     연락처  010 / 1234 / 5678 이 각각 358px — 이 행 하나가 229px
     이메일  아이디 / @ / 도메인 / 도메인선택 네 단 — 197px
   전화번호와 이메일 앞부분은 한 줄로 읽는 것이라 쪼개면 안 된다.
   390px 에서 세 칸이면 칸당 110px 남짓이라 넉넉하다.

   특이도: 위 규칙이 (1,5,1) 이라 .inp_tel_wrap 한 칸을 더 얹어 넘는다.
   ========================================================================== */
@media (max-width: 768px) {

    #container.inquiry .tb_style.basic td :is(.inp_tel_wrap, .inp_email_area) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
    }

        #container.inquiry .tb_style.basic td :is(.inp_tel_wrap, .inp_email_area) > input {
            flex: 1 1 0;
            width: auto;
            min-width: 0;
        }

        /* 유효성 문구는 묶음 아래 줄 전체를 쓴다 */
        #container.inquiry .tb_style.basic td :is(.inp_tel_wrap, .inp_email_area) > .message_txt {
            flex: 1 0 100%;
        }

    /* 도메인 직접선택은 아이디/도메인 줄 아래로 내린다.
       label 에 인라인 width:183px 이 박혀 있어 같은 강도로 받는다. */
    /* 비회원문의는 <td><div class="inp_email_wrap">, 회원문의는
       <td class="inp_email_wrap"> 로 래퍼 자리가 다르다. td 를 요구하면
       회원 쪽이 빠지므로 래퍼만 잡는다. */
    /* 레거시(bundle.css)가 .inp_email_area 와 .select_wrap 에
       margin: -5px 0 을 준다. 데스크톱 한 줄 배치에서 줄 높이를 줄이려던
       값인데, 드롭다운을 아래로 내린 뒤에는 위 칸의 -5px 가 이 간격을
       먹는다. 실측(비회원문의 390px): margin-top 6px 을 줬는데 실제 간격은
       1px — 입력칸 테두리와 드롭다운 테두리가 맞닿아 한 선처럼 보였다.
       위 칸의 상하 마진을 걷고 이쪽도 상하 전체를 같은 강도로 받는다. */
    #container.inquiry .tb_style.basic .inp_email_wrap .inp_email_area {
        margin: 0;
    }

    #container.inquiry .tb_style.basic .inp_email_wrap .select_wrap {
        margin: 6px 0 0;
    }

        #container.inquiry .tb_style.basic .inp_email_wrap .select_wrap > label {
            display: block;
            width: 100% !important;
        }

    /* 인라인 style="width:330px" 이 박힌 넷(유형 · 월 예산 · 상세 예산 ·
       사이트 URL)만 폭이 달라, 나머지 358px 입력과 오른쪽 끝이 28px 씩
       어긋나 계단처럼 보였다. 마크업은 두고 같은 강도로 받는다. */
    #container.inquiry .tb_style.basic td :is(.select_wrap, input, select)[style*="width"] {
        width: 100% !important;
    }
}


/* ==========================================================================
   광고문의 — 데스크톱에서 본문 입력이 혼자 폭 전체를 쓰던 것

   1440px 실측: 다른 입력은 260~340px 인데 내용(textarea)만 986px 이라
   한 줄이 60자를 넘었다. 폼 안에서 이 칸만 비율이 다르다.
   문단을 쓰는 칸이라 한 줄 입력보다는 넓게 두되, 읽을 수 있는 길이로 민다.
   좁은 화면은 지금처럼 폭을 다 쓴다 — 거기서는 358px 이 곧 본문 폭이다.
   ========================================================================== */
@media (min-width: 769px) {

    #container.inquiry .tb_style.basic td textarea {
        max-width: 700px;
    }
}


/* ==========================================================================
   폼 표(.tb_style.basic.left) — 데스크톱 폭 체계

   1920px 실측(고치기 전, 광고문의). 한 폼 안에 입력 폭이 네 가지였다.
     이름(회사명)                     246px   표 폭의 22%
     유형 · 월 예산 · 상세 예산 · URL  330px   29%
     내용(textarea)                   700px   62%
     광고 매체 체크박스                1120px  100%
   표는 본문 폭 1200 을 그대로 쓰는데 라벨 180 + 입력 330 이라
   입력 오른쪽으로 600~690px 이 통째로 비었다. 값이 짧은 폼을 넓은 상자에
   펼쳐 놓으니 라벨과 값이 멀어지고, 눈이 가로로 길게 움직인다.

   폼은 페이지 폭을 다 쓸 이유가 없다. 읽고 채우는 열 하나를 만든다.
     표 최대 폭   820   (레거시 colgroup 라벨 180 + 입력 영역 약 620)
     보통 입력    360   (유형 · 예산 · URL · 이름 · 비밀번호 —
                          인라인 330 도 여기로. 읽기 전용 칸은 제외)
     문단 입력    100%  (내용)
     체크 그리드  입력 영역 안에서 2~3열

   라벨 열은 건드리지 않는다. colgroup 이 인라인으로 180px 을 잡고 있어
   th 에 폭을 줘도 먹지 않는다. 820 안에서 180 은 무리가 없다.

   대상은 다섯 곳뿐이다 — 광고문의 회원/비회원 · 비밀번호수정 · 추천인 ·
   사업자등록증 인증(회원정보수정 안). 데이터 표(.center)는 건드리지 않는다.
   좁은 화면은 위 블록이 이미 세로로 펴므로 여기서는 데스크톱만 다룬다.
   ========================================================================== */
@media (min-width: 769px) {

    #container:is(.inquiry, .member_modify, .recommend, .relax_policy) .tb_style.basic.left {
        max-width: 820px;
        /* 페이지 제목이 가운데 정렬이라 폼 열도 가운데로 모은다.
           왼쪽에 붙여 두면 1440 화면에서 오른쪽만 260px 비어 한쪽으로
           쏠린다(실측: 폼 120~940, 내용 영역 120~1320). */
        margin-left: auto;
        margin-right: auto;
    }

    /* 폼 열 아래쪽 — 동의 줄과 제출 버튼.
       표만 820 으로 줄이자 이 둘이 1200 기준으로 남아, 구분선이 폼보다
       380px 더 뻗고 버튼도 폼 가운데가 아닌 페이지 가운데에 섰다.
       한 열로 읽히려면 끝까지 같은 폭이어야 한다. */
    #container.inquiry .section-agreement,
    #container.inquiry .section:has(> .btn_r) {
        max-width: 820px;
        margin-left: auto;
        margin-right: auto;
    }

    /* 표 위의 소제목 줄(.box_area = 소제목 + '* 필수 입력사항')도 같은 폭이라야
       한다. 표만 820 으로 줄이자 그 줄만 1200 끝까지 가서 오른쪽 끝이
       어긋났다(실측: 표 오른쪽 1171 / 안내 1553). */
    #container:is(.inquiry, .member_modify, .recommend, .relax_policy) .section > .box_area:has(+ .tb_style.basic.left),
    #container:is(.inquiry, .member_modify, .recommend, .relax_policy) .section > .box_area:has(> .r_box) {
        max-width: 820px;
        margin-left: auto;
        margin-right: auto;
    }

    /* .box_area 없이 소제목만 있는 화면도 같다. 비밀번호수정 1920 실측:
       소제목 글자 353 / 표 543 — 소제목이 폼 열보다 190px 왼쪽에 떠 있었다.
       소제목은 그 폼을 가리키는 말이므로 폼 왼쪽 선에서 시작해야 한다. */
    #container:is(.member_modify, .recommend, .withdraw_info) .section > .section_title {
        max-width: 820px;
        margin-left: auto;
        margin-right: auto;
    }

    /* ---- 회원탈퇴 ----
       같은 탭의 비밀번호수정·추천인은 폼 열이 543~1363(820)인데
       회원탈퇴만 1200 을 다 써서 353~1553 이었다. 탭 하나 안에서 화면마다
       열 너비가 다르면 옮겨 다닐 때 폼이 커졌다 작아졌다 한다.
       특히 고객 의견 textarea 가 986px 이라, 한두 줄 쓰는 칸이 화면
       가로를 다 차지했다. 표는 .basic.board 라 위의 .basic.left 규칙에
       걸리지 않았다. 약관 카드도 같이 모은다. */
    #container.withdraw_info .tb_style.basic.board,
    #container.withdraw_info .chk_list {
        max-width: 820px;
        margin-left: auto;
        margin-right: auto;
    }

        /* 보통 입력 하나의 폭. 인라인 style="width:330px" 도 여기로 모은다. */
        #container:is(.member_modify, .recommend, .relax_policy) .tb_style.basic.left td
            :is(input[type="text"], input:not([type]), select, .select_wrap)[style*="width"] {
            width: 360px !important;
            max-width: 100%;
        }

        /* 읽기 전용 칸만 뺀다. 추천인 코드처럼 '복사해 가는' 값은 좁히면
           손해다(실측: 360 으로 좁히자 링크 끝이 더 잘렸다. 빼 두니 입력
           영역을 다 써서 606px).
           disabled 는 빼지 않는다 — 값을 보여 주는 칸도 폼 안에서 같은
           눈금이어야 한다. 이메일 묶음의 비활성 칸들은 td 의 직계 자식이
           아니라(.inp_email_area 안) 이 규칙에 걸리지 않는다. */
        #container:is(.member_modify, .recommend, .relax_policy) .tb_style.basic.left td
            > :is(input[type="text"], input[type="password"], input[type="tel"], input[type="email"], input:not([type])):not([readonly]) {
            width: 360px;
            max-width: 100%;
        }

        /* 문단을 쓰는 칸은 입력 영역을 다 쓴다 (위에서 준 700px 상한을 푼다) */
        #container.inquiry .tb_style.basic.left td textarea {
            width: 100%;
            max-width: none;
        }

        /* 광고문의는 단일 입력도 칸을 채운다.
           1440 실측: 값 칸 622px 에 유형·월 예산·상세 예산·사이트 URL 은 360,
           내용(textarea)은 606 — 한 폼 안에서 오른쪽 끝이 두 줄로 갈렸다.
           회원가입에서 360 상한을 걷은 이유(components.css '입력 눈금')가
           여기도 그대로다: 얼마나 쓰면 되는지는 자리표시자가 말하고, 폭으로
           다시 말한 대가로 폼이 들쭉날쭉했다. 위 두 상한 규칙에서 .inquiry 를
           빼고 여기서 채운다. 인라인 style="width:…" 가 박힌 칸이 있어 그건
           !important 로 받는다. 묶음 입력(이메일 3칸 · 전화 3칸)은 td 의
           직계가 아니라 그대로다. */
        #container.inquiry .tb_style.basic.left td
            > :is(input[type="text"], input[type="tel"], input[type="email"], input:not([type]), select):not([readonly]),
        /* 유형 · 월 예산은 <div class="select_wrap" style="width:330px"> 안에
           <select style="width:330px"> 이 들어 있다. 래퍼와 안쪽 둘 다 채운다.
           [style*="width"] 로 한정한다 — 이메일 줄의 도메인 선택도 td 직계
           .select_wrap 인데 인라인 폭이 없고, 그건 아이디·@·도메인과 한 줄을
           나눠 쓰는 칸이라 채우면 안 된다(채웠더니 606 이 되어 줄이 접혔다). */
        #container.inquiry .tb_style.basic.left td > .select_wrap[style*="width"],
        #container.inquiry .tb_style.basic.left td > .select_wrap[style*="width"] > select {
            width: 100% !important;
            max-width: none;
        }

        /* 체크 그리드.
           레거시가 .inquiry .checkboxes 에 1fr x 4 를 고정한다.
             넓을 때  계정 유형처럼 항목이 둘뿐인 줄은 둘 사이가 251px 벌어졌다
             좁을 때  1fr 은 암묵적 auto 최소값을 가져서, 820 폭에서는 칸이
                      201 / 72 / 180 / 92 로 제각각이 됐다
           칸 수를 폭이 정하게 한다. 가장 긴 항목
           '기타광고(토스/모비온/APP 등)' 이 약 200px 이라 240 을 최소로 두면
           620px 입력 영역에서 2열(칸당 300)이 되어 글자가 접히지 않는다.

           .checkboxes 는 자식이 아니라 td 자신에 붙는다. */
        #container.inquiry .tb_style.basic.left td.checkboxes {
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 12px 20px;
        }
}


/* ==========================================================================
   광고문의 — 덩어리 사이의 마무리

   폭만 820 으로 모았더니 그 안의 관계가 덜 잡혔다. 1440px 실측.
     동의 줄  체크박스 끝 597 → '상세보기' 1020, 사이 423px
              li 가 justify-content:space-between 인데 아이템이 셋이다
              (체크박스 · 상세보기 · 접힌 dl). 셋을 양 끝으로 미니 가운데가
              텅 빈다. 그리고 이 줄만 카드 밖 맨바닥에 얹혀 ul 의
              border-bottom 하나로 폼과 나뉘어 있었다.
     긴 행    광고 매체(198px) · 내용(158px) 행의 라벨이 세로 가운데라
              값의 첫 줄과 어긋난다.
     아래     제출 버튼과 푸터 사이 204px (#content 의 margin-bottom).
              본문이 짧은 폼 화면에서는 덜 끝난 것처럼 보인다.
   ========================================================================== */

/* ---- 동의 줄 ---- 폼과 같은 카드 언어로 묶는다 */
#container.inquiry .section-agreement {
    /* 위 폼 표도 카드다. 여백을 안 주면 두 카드가 간격 0 으로 맞닿아
       아래 라운드와 위 라운드가 서로 파고들어 겹쳐 보인다.
       문의 유형을 안 고른 상태에서는 표에 '유형' 한 줄만 남아 두 카드
       크기가 비슷해지므로 특히 눈에 띈다.
       1920 실측: 표 y731~812 / 동의 y812~888 — 사이 0.
       좁은 화면(≤768)은 행이 세로로 펴지면서 셀 아래 여백까지 사라져
       드롭다운 밑변이 동의 카드 윗변에 바로 닿는다(사이 0).
       같은 절 안의 두 카드이므로 섹션 간격(24)이 아니라 작은 쪽을 쓴다. */
    margin-top: var(--mc-rhythm-sm, 12px);
    border: 1px solid var(--mc-border, #e7ebf5);
    border-radius: var(--mc-radius, 16px);
    background: var(--mc-tint, #f4f7fe);
}

    /* 카드가 경계를 맡으므로 레거시 구분선은 걷는다(선이 두 겹이 된다) */
    #container.inquiry .section-agreement > ul {
        padding-top: 0;
        border-bottom: 0;
    }

    #container.inquiry .section-agreement li {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 10px;
        padding: 14px 16px;
    }

        /* 접었다 펴는 상세 내용은 아랫줄 전체를 쓴다.
           flex 아이템으로 같은 줄에 남으면 위 gap 계산을 망친다. */
        /* margin-top 은 주지 않는다. 접혀 있을 때(max-height:0) 도 자리를
           먹어 카드가 6px 더 높아진다. 벌어짐은 li 의 row-gap 이 맡는다. */
        /* 레거시(css.css)가 이 상자에 margin-left: 1.85rem 을 준다.
           체크박스 옆 글자에 맞추려던 들여쓰기인데, 여기서 폭을 100% 로
           주면 그 여백만큼 오른쪽으로 넘친다(100% 는 남은 폭이 아니라
           부모 안쪽 폭이다). flex-shrink 0 이라 줄어들지도 않는다.
           실측: 부모 안쪽 오른쪽 끝을 390 · 768 · 1600 전 폭에서 30px 넘었고,
           390px 에서는 상자 오른쪽이 387 로 화면(390)에 거의 닿았다.
           한 줄을 통째로 쓰는 자리이므로 들여쓰기를 걷어 카드 본문과
           왼쪽을 맞춘다. */
        #container.inquiry .section-agreement li > dl {
            flex: 1 0 100%;
            margin-left: 0;
        }

/* ---- 본문이 짧은 폼 화면의 아래 여백 ---- */
#container.inquiry #content {
    margin-bottom: 96px;
}

@media (min-width: 769px) {

    /* ---- 여러 줄 값의 라벨은 위로 ----
       체크 그리드와 문단 입력은 행이 높다. 라벨이 가운데 떠 있으면
       값의 첫 줄과 어긋나 어디에 걸린 라벨인지 한 번 더 보게 된다. */
    #container.inquiry .tb_style.basic.left tbody tr:has(td.checkboxes) th,
    #container.inquiry .tb_style.basic.left tbody tr:has(textarea) th {
        vertical-align: top;
        /* 셀 패딩 15 + 입력/체크 첫 줄이 내려앉는 만큼 */
        padding-top: 24px;
    }
}


/* ==========================================================================
   광고문의 — 필수 표시를 회원가입과 같은 꼴로

   한 화면에 필수를 알리는 방식이 세 가지였고, 다른 폼 화면과도 갈렸다.
   1440px 실측
                  회원가입 · 회원정보수정        광고문의(고치기 전)
     라벨         ::before "⁎" 토마토 16px 앞    ::after "*" 분홍 15px 뒤
     범례         "⁎ 필수 입력" 글자 muted       "* 필수 입력사항" 전체 주황, 2회 반복
     동의 배지    빨강 229,72,77 · 11.5px        토마토 255,99,71 · 13px
   같은 뜻인데 위치도 기호도 색도 다르다. 동의 배지는 세 화면이 공유하는
   패턴인데 그것조차 값이 갈렸다.

   많은 쪽(회원가입 · 회원정보수정, 24곳)으로 모은다.
   뷰에서 th.essential → th.asterisk 로 바꿨다. ⁎ 마커는 레거시
   .asterisk::before 가 넣으므로 클래스만 맞추면 따라온다.
   범례도 같은 문구("필수 입력")로 바꾸고, 섹션마다 되풀이하던 것을
   페이지에 한 번만 남겼다.
   ========================================================================== */

/* 범례 — 회원가입의 .section-title .asterisk 와 같은 값 */
#container.inquiry .box_area .r_box.asterisk {
    font-size: 12px;
    font-weight: 400;
    color: var(--mc-muted, #7c87a0);
}

/* 라벨 — ⁎ 는 레거시가 넣는다.
   다만 그 규칙이 회원가입의 div 라벨에 맞춰져 있다.
     .content-form .asterisk::before { position:absolute; left:-10px; top:-4px }
   표 머리칸(th, padding 15/16, position:relative)에 그대로 걸면 칸 밖
   왼쪽 위로 튀어 라벨과 따로 논다(실측: 글자 위에 별도로 찍혔다).
   표에서는 글자 흐름 안에 넣는다. */
#container.inquiry .tb_style.basic.left tbody th.asterisk {
    color: var(--mc-ink, #0b1220);
}

    /* 표시 자리는 components.css 의 공통 규칙이 정한다
       (라벨 오른쪽 위 첨자). 여기서 또 손대지 않는다. */

/* 동의 배지 — 회원가입과 같은 모양으로.
   content 는 레거시가 넣는다(.required::before = "필수"). 모양만 바꾼다. */
#container.inquiry .section-agreement .required::before {
    /* 좁은 화면에서 문구 칸이 줄면 이 배지도 같이 눌려 '필 / 수' 두 줄이
       된다(390px 실측). 배지는 두 글자 고정이므로 줄어들지도, 접히지도
       않게 못 박는다. */
    flex: 0 0 auto;
    white-space: nowrap;
    margin-right: 7px;
    padding: 3px 7px;
    border: 0;
    border-radius: var(--mc-radius-xs);
    background: rgba(229, 72, 77, .1);
    font-size: 12px;
    font-weight: 700;
    color: #e5484d;
}


/* ==========================================================================
   결제 선택(레거시 표) — 행 라벨이 접히던 것

   1920px 실측(다이애드WAVE 결제). 등급표의 colgroup 이
   180 + 190x5 = 1130 인데 실제 표는 792px 이다. 옛 레이아웃 기준 값이라
   비례 축소되어 라벨 열이 121px 로 눌렸고, '기준일 조회 기간' 과
   '사용료(30일)' 이 두 줄로 접혔다.

   뷰 네 개(Wave · Tracking · Trend · AdsStore)의 colgroup 을 각각 고치는
   대신 행 라벨을 접지 않게 한다. 브라우저가 그만큼 폭을 배분한다.
   값 칸은 지금도 접히지 않으므로 건드리지 않는다.
   ========================================================================== */
@media (min-width: 769px) {

    #container.pay_processing:not(.pcx) .tb_style.basic tbody th {
        white-space: nowrap;
    }
}

/* 12px 은 이 프로젝트의 좁은 화면 최소치(12.5) 아래다.
   결제 화면은 금액을 읽는 곳이라 주석도 읽혀야 한다. */
#container.pay_processing:not(.pcx) :is(.caution, .section_bill .row span[style]) {
    /* 이 문구는 뷰에 인라인으로 font-size:12px 이 박혀 있다.
       같은 강도로는 못 이겨서 !important 로 받는다. */
    font-size: 12px !important;
}

/* 좁은 화면 — 동의 줄의 상세보기 토글을 문구 옆에 남긴다.

   기본값(flex: 0 1 auto, min-width: auto)이면 문구 칸의 기준 크기가 최대
   내용 폭이라 줄이 넘친다. 390px 실측: 문구 272 + gap 10 + 토글 45 = 327
   인데 쓸 수 있는 폭은 324 — 3px 이 모자라 토글만 다음 줄로 내려갔다.
   기준 크기를 0 으로 두면 남는 자리로 늘어나며 문구가 두 줄로 접히고
   토글은 옆에 남는다. 회원가입(Auth.css)이 같은 동의 줄에 쓰는 값이다.

   데스크톱은 건드리지 않는다 — 거기서는 이미 한 줄에 들어가고, 이 값을
   주면 문구 칸이 카드 끝까지 늘어나 토글이 문구에서 멀리 떨어진다
   (1600px 실측: 토글 689 -> 1148). */
@media (max-width: 768px) {
    #container.inquiry .section-agreement li > .checkbox {
        flex: 1 1 0;
        min-width: 0;
    }

        /* 두 줄로 접힐 때 낱말 가운데서 끊지 않는다.
           '개인정보 수집 및 이용에 동의합니 / 다.' 로 끊겼다. */
        #container.inquiry .section-agreement li .required {
            word-break: keep-all;
        }
}

/* 좁은 화면 — 체크 목록이 성기던 것

   한 줄에 하나씩 세로로 쌓이는데, 항목 자체가 44px(터치 기준, controls.css)
   인 위에 gap 8px 이 더 얹혀 성겼다. 390px 실측(광고 매체 9개)
     피치 52px · 보이는 네모 사이 30px(라벨 여유 11 + gap 8 + 여유 11)
     목록 460px + 레거시 padding-top 25px = 485px — 한 필드가 화면을 넘긴다

   44px 는 손가락이 닿는 면이라 줄이지 않는다. 대신 그 면들이 이미 서로를
   떨어뜨리므로 gap 을 걷는다. 윗여백은 모바일 프로젝트의 같은 목록
   (.grid_checkboxes, padding-top .5rem)에 맞춘다.
   결과: 피치 44px · 네모 사이 22px · 404px (81px 줄어든다)

   레거시가 padding-top 에 !important 를 박아 두어 같은 무기로 받는다. */
@media (max-width: 768px) {
    #container.inquiry .tb_style.basic.left td.checkboxes {
        gap: 0;
        padding-top: 8px !important;
    }
}