/* ==========================================================================
   Haru Live
   Post Show Mobile

   public/css/posts/post-show-mobile.css
   ========================================================================== */


/* ==========================================================================
   Variables
   ========================================================================== */

.post-show-page {
    --post-bg: #f5f6f8;
    --post-card: #ffffff;

    --post-text: #111827;
    --post-text-soft: #374151;
    --post-subtext: #64748b;
    --post-muted: #94a3b8;

    --post-border: #e5e7eb;
    --post-border-soft: #eef2f7;

    --post-blue: #2563eb;
    --post-blue-soft: #eff6ff;

    --post-green: #16a34a;
    --post-green-soft: #f0fdf4;

    --post-red: #ef4444;
    --post-red-soft: #fef2f2;

    --post-indigo: #4f46e5;
    --post-indigo-soft: #eef2ff;

    --post-radius-sm: 7px;
    --post-radius-md: 10px;
    --post-radius-lg: 14px;

    --post-shadow:
        0 1px 2px rgba(15, 23, 42, 0.03),
        0 3px 10px rgba(15, 23, 42, 0.025);
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media screen and (max-width: 640px) {

    /* ======================================================================
       전체 레이아웃
       ====================================================================== */

    .post-show-page {
        display: block !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        background: var(--post-bg);

        overflow-x: hidden !important;
    }

    .post-show-page *,
    .post-show-page *::before,
    .post-show-page *::after {
        box-sizing: border-box;
    }


    /* ======================================================================
       좌우 광고 제거
       ====================================================================== */

    .post-show-page > .community-side-ad {
        display: none !important;
    }


    /* ======================================================================
       게시글 메인
       ====================================================================== */

    .post-show-page .community-board-main {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .post-show-page .community-board-content {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        margin: 0 !important;

        padding:
            8px
            8px
            calc(26px + env(safe-area-inset-bottom))
            8px !important;
    }


    /* ======================================================================
       게시글 Wrapper
       ====================================================================== */

    #postWrapper {
        width: 100%;
        min-width: 0;
    }


    /* ======================================================================
       상단 등급/AI/공지 배지
       ====================================================================== */

    #postWrapper > span {
        min-height: 25px;

        margin:
            0
            4px
            6px
            0 !important;

        padding:
            4px
            7px !important;

        border-radius: 6px !important;

        font-size: 9px !important;
        font-weight: 600 !important;

        line-height: 1 !important;

        white-space: nowrap;
    }


    /* ======================================================================
       게시글 메인 카드
       ====================================================================== */

    #postWrapper > .bg-white.shadow-sm {
        width: 100%;

        border-radius: 12px !important;

        box-shadow: var(--post-shadow) !important;

        overflow: hidden !important;
    }


    #postWrapper > .bg-white.shadow-sm > .border {
        padding: 10px !important;

        border: 1px solid var(--post-border) !important;

        border-radius: 12px !important;

        background: #fff !important;
    }


    /* ======================================================================
       게시글 상단 메타 영역
       ====================================================================== */

    #postWrapper
    > .bg-white
    > .border
    > .flex.flex-col {
        gap: 9px !important;
    }


    /* pinned/status/special badge */
    #postWrapper
    .space-y-2
    > .flex.flex-wrap.items-center {
        gap: 4px !important;
    }

    #postWrapper
    .space-y-2
    > .flex.flex-wrap.items-center
    > span {
        min-height: 23px;

        padding:
            3px
            6px !important;

        border-radius: 5px !important;

        font-size: 8px !important;

        line-height: 1 !important;
    }


    /* ======================================================================
       작성자 카드
       ====================================================================== */

    #postWrapper
    .mt-2.rounded-lg.border.border-gray-100.bg-gray-50 {
        margin-top: 7px !important;

        padding: 10px !important;

        border-radius: 10px !important;

        border-color: #eef2f7 !important;

        background: #f8fafc !important;
    }


    #postWrapper
    .mt-2.rounded-lg
    > .flex {
        gap: 9px !important;
    }


    /* 작성자 프로필 */
    #postWrapper
    .h-10.w-10.rounded-full {
        width: 36px !important;
        height: 36px !important;

        flex: 0 0 36px !important;
    }


    /* 작성자 영역 */
    #postWrapper
    .flex.min-w-0.items-center.gap-3 {
        gap: 8px !important;

        align-items: center !important;
    }


    /* 작성자 이름 */
    #postWrapper
    .truncate.text-sm.font-semibold.text-gray-900 {
        max-width: 140px;

        font-size: 11px !important;
        font-weight: 700 !important;

        line-height: 1.3 !important;
    }


    /* 관리자 */
    #postWrapper
    .rounded-full.bg-red-50 {
        padding:
            2px
            6px !important;

        font-size: 8px !important;
    }


    /* 작성/수정/읽기 */
    #postWrapper
    .mt-0\.5.flex.flex-wrap.items-center {
        gap:
            2px
            5px !important;

        margin-top: 3px !important;

        font-size: 8px !important;

        line-height: 1.35 !important;
    }


    /* PC의 | 간격 축소 */
    #postWrapper
    .mt-0\.5.flex.flex-wrap.items-center
    .text-gray-300 {
        margin:
            0
            1px;
    }


    /* ======================================================================
       조회/추천/비추천/댓글 통계
       ====================================================================== */

    #postWrapper
    .mt-2.rounded-lg
    > .flex
    > .flex.flex-wrap.items-center.gap-2.text-xs {
        width: 100%;

        display: flex !important;

        flex-wrap: nowrap !important;

        gap: 4px !important;

        overflow-x: auto;
        overflow-y: hidden;

        padding-bottom: 1px;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;
    }


    #postWrapper
    .mt-2.rounded-lg
    > .flex
    > .flex.flex-wrap.items-center.gap-2.text-xs::-webkit-scrollbar {
        display: none;
    }


    #postWrapper
    .mt-2.rounded-lg
    > .flex
    > .flex.flex-wrap.items-center.gap-2.text-xs
    > span {
        flex: 0 0 auto;

        min-height: 24px;

        padding:
            4px
            7px !important;

        font-size: 8px !important;

        line-height: 1 !important;

        white-space: nowrap;
    }


    /* ======================================================================
       숨김 안내
       ====================================================================== */

    #postWrapper .mt-4.rounded-md.bg-red-50 {
        margin-top: 9px !important;

        padding: 10px !important;

        border-radius: 8px !important;
    }

    #postWrapper .mt-4.rounded-md.bg-red-50 .text-sm {
        font-size: 10px !important;

        line-height: 1.5 !important;
    }


    /* ======================================================================
       본문 Wrapper
       ====================================================================== */

    #postWrapper
    > .bg-white
    > .border
    > .mt-6 {
        margin-top: 14px !important;
    }


    /* EditorJS 최상위 */
    #postWrapper
    .text-gray-900.leading-relaxed {
        width: 100%;
        max-width: 100%;

        overflow-wrap: break-word;

        word-break: normal;
    }


    /* ======================================================================
       본문 Paragraph
       ====================================================================== */

    #postWrapper
    .text-gray-900.leading-relaxed
    > p {
        margin:
            0
            0
            13px;

        font-size: inherit;

        line-height: inherit;

        overflow-wrap: break-word;
    }


    /* ======================================================================
       Heading
       ====================================================================== */

    #postWrapper .post-heading-anchor {
        margin:
            22px
            0
            10px !important;

        scroll-margin-top: 90px;
    }

    #postWrapper h1.post-heading-anchor {
        font-size: 22px !important;
    }

    #postWrapper h2.post-heading-anchor {
        font-size: 19px !important;
    }

    #postWrapper h3.post-heading-anchor {
        font-size: 17px !important;
    }

    #postWrapper h4.post-heading-anchor {
        font-size: 15px !important;
    }

    #postWrapper h5.post-heading-anchor {
        font-size: 13px !important;
    }

    #postWrapper h6.post-heading-anchor {
        font-size: 11px !important;
    }


    /* ======================================================================
       Editor Image
       ====================================================================== */

    #postWrapper
    .text-gray-900.leading-relaxed
    img {
        max-width: 100% !important;
        height: auto !important;
    }


    /*
     * inline style width가 800px 등의 값이어도
     * 모바일에서는 화면을 넘지 않음
     */
    #postWrapper
    .text-gray-900.leading-relaxed
    > div[style*="width"] {
        max-width: 100% !important;
    }


    /* 여러 이미지 그룹 */
    #postWrapper
    .text-gray-900.leading-relaxed
    > div[style*="display:flex"] {
        max-width: 100%;

        overflow-x: auto;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;
    }

    #postWrapper
    .text-gray-900.leading-relaxed
    > div[style*="display:flex"]::-webkit-scrollbar {
        display: none;
    }


    /* ======================================================================
       Caption
       ====================================================================== */

    #postWrapper
    .text-gray-900.leading-relaxed
    img + div {
        font-size: 9px !important;

        line-height: 1.45;

        color: #94a3b8 !important;
    }


    /* ======================================================================
       List
       ====================================================================== */

    #postWrapper ul,
    #postWrapper ol {
        margin:
            10px
            0
            14px !important;

        padding-left: 22px !important;
    }

    #postWrapper li {
        margin-bottom: 3px;

        line-height: 1.6;
    }


    /* ======================================================================
       Quote
       ====================================================================== */

    .quote-placement-left,
    .quote-placement-right,
    .quote-placement-center,
    .quote-placement-full,
    .quote-placement-none {
        width: 100% !important;

        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }


    .quote-style-default {
        margin:
            15px
            0 !important;

        padding:
            9px
            0
            9px
            11px !important;

        border-left-width: 3px !important;

        font-size: 12px;
    }


    .quote-style-box,
    .quote-style-bubble {
        margin:
            15px
            0 !important;

        padding: 13px !important;

        border-width: 2px !important;

        font-size: 12px;

        border-radius: 8px;
    }


    .quote-style-bubble::after {
        width: 18px;
        height: 18px;

        bottom: -11px;

        border-width: 0 0 2px 2px;
    }


    .quote-style-fancy {
        margin:
            17px
            0;

        padding:
            8px
            10px;

        font-size: 12px;
    }

    .quote-style-fancy .quote-mark {
        font-size: 28px !important;
    }


    /* ======================================================================
       Code
       ====================================================================== */

    #postWrapper pre {
        width: 100%;
        max-width: 100%;

        margin:
            15px
            0 !important;

        padding: 11px !important;

        border-radius: 8px !important;

        overflow-x: auto;

        font-size: 10px !important;

        line-height: 1.55 !important;

        -webkit-overflow-scrolling: touch;
    }


    /* ======================================================================
       Checklist
       ====================================================================== */

    #postWrapper input[type="checkbox"] {
        flex: 0 0 auto;
    }

    #postWrapper label.flex.items-center.gap-2 {
        align-items: flex-start !important;

        gap: 6px !important;

        font-size: 12px;
    }


    /* ======================================================================
       Table
       ====================================================================== */

    #postWrapper .overflow-x-auto.my-6 {
        width: calc(100% + 20px);

        margin:
            14px
            -10px !important;

        padding:
            0
            10px;

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;
    }

    #postWrapper table {
        min-width: 540px !important;

        font-size: 10px !important;
    }

    #postWrapper th,
    #postWrapper td {
        padding:
            6px
            8px !important;
    }


    /* ======================================================================
       Video
       ====================================================================== */

    #postWrapper .video-card {
        width: 100% !important;
        max-width: 100% !important;

        margin:
            15px
            0 !important;
    }

    #postWrapper .video-card__preview {
        width: 100%;
    }

    #postWrapper .video-card iframe,
    #postWrapper .video-card video {
        width: 100% !important;
        max-width: 100% !important;
    }

    #postWrapper .video-card__body {
        padding:
            8px
            9px;
    }

    #postWrapper .video-card__title {
        font-size: 12px;
    }

    #postWrapper .video-card__meta {
        font-size: 8px;

        overflow: hidden;

        text-overflow: ellipsis;
        white-space: nowrap;
    }


    /* ======================================================================
       X
       ====================================================================== */

    .x-embed-block {
        width: 100% !important;

        margin:
            15px
            0 !important;

        overflow: hidden;
    }

    .x-embed-block .twitter-tweet {
        width: 100% !important;
        max-width: 100% !important;
    }


    /* ======================================================================
       Instagram
       ====================================================================== */

    .instagram-embed-block {
        width: 100% !important;

        margin:
            15px
            0 !important;

        overflow: hidden;
    }

    .instagram-embed-block .instagram-media {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }


    /* ======================================================================
       Link Card
       ====================================================================== */

    .editor-link-card {
        width: 100%;

        gap: 10px !important;

        margin:
            14px
            0 !important;

        padding:
            11px
            12px !important;

        border-radius: 9px !important;
    }

    .editor-link-card__title {
        margin-bottom: 4px !important;

        font-size: 12px !important;

        line-height: 1.4;
    }

    .editor-link-card__description {
        display: -webkit-box;

        margin-bottom: 7px !important;

        overflow: hidden;

        font-size: 9px !important;

        line-height: 1.45;

        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .editor-link-card__site {
        font-size: 8px !important;
    }

    .editor-link-card__thumb {
        flex:
            0
            0
            52px !important;

        width: 52px !important;
        height: 52px !important;
    }


    /* ======================================================================
       첨부파일
       ====================================================================== */

    .post-show-page
    .community-board-main
    .mt-4.bg-white.rounded.shadow.p-4 {
        margin-top: 10px !important;

        padding: 11px !important;

        border:
            1px solid
            var(--post-border);

        border-radius: 10px !important;

        box-shadow: none !important;
    }

    .post-show-page
    .community-board-main
    .mt-4.bg-white.rounded.shadow.p-4
    .font-semibold {
        font-size: 12px;
    }

    .post-show-page
    .community-board-main
    .mt-4.bg-white.rounded.shadow.p-4
    ul {
        margin-top: 5px !important;

        padding-left: 18px !important;

        font-size: 9px !important;
    }


    /* ======================================================================
       시리즈
       ====================================================================== */

    .post-show-page
    .community-board-main
    .mb-5.rounded.border.bg-gray-50.p-4 {
        margin-bottom: 12px !important;

        padding: 11px !important;

        border-radius: 10px !important;
    }

    .post-show-page
    .community-board-main
    .mb-5.rounded.border.bg-gray-50.p-4
    > .flex {
        margin-bottom: 8px !important;
    }


    .post-show-page
    .community-board-main
    .mb-5.rounded.border.bg-gray-50.p-4
    .grid.grid-cols-2 {
        gap: 5px !important;
    }


    .post-show-page
    .community-board-main
    .mb-5.rounded.border.bg-gray-50.p-4
    .grid.grid-cols-2
    a,
    .post-show-page
    .community-board-main
    .mb-5.rounded.border.bg-gray-50.p-4
    .grid.grid-cols-2
    > div
    > div {
        padding:
            7px
            8px !important;

        font-size: 9px !important;
    }


    /* ======================================================================
       추천 / 비추천 / 스크랩 / 신고 / 수정 / 삭제 / 숨김
       ====================================================================== */

    #postWrapper
    .mt-6.rounded-lg.border.border-gray-200.bg-gray-50.p-3 {
        margin-top: 14px !important;

        padding: 9px !important;

        border-radius: 10px !important;

        background: #f8fafc !important;
    }


    #postWrapper
    .mt-6.rounded-lg
    > .flex.flex-wrap.items-center {
        display: grid !important;

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 6px !important;
    }


    #postWrapper
    .mt-6.rounded-lg
    form,
    #postWrapper
    .mt-6.rounded-lg
    > .flex
    > a,
    #postWrapper
    .mt-6.rounded-lg
    > .flex
    > button {
        min-width: 0;
    }


    #postWrapper
    .mt-6.rounded-lg
    button,
    #postWrapper
    .mt-6.rounded-lg
    a {
        width: 100%;

        min-width: 0;
        min-height: 36px;

        padding:
            6px
            7px !important;

        border-radius: 7px !important;

        font-size: 9px !important;

        line-height: 1 !important;

        white-space: nowrap;
    }


    /*
     * 숨김 관리자 form
     */
    #postWrapper
    .mt-6.rounded-lg
    form.flex.items-center.gap-2 {
        display: block !important;
    }


    /* PC 숨김 사유 input은 이미 hidden sm:block */
    #postWrapper
    .mt-6.rounded-lg
    input[name="reason"] {
        display: none !important;
    }


    /* ======================================================================
       관련글
       ====================================================================== */

    #postWrapper section.mt-10 {
        margin-top: 18px !important;

        padding-top: 13px !important;
    }

    #postWrapper section.mt-10 h3 {
        font-size: 14px !important;
    }

    #postWrapper section.mt-10 > .mb-4 {
        margin-bottom: 8px !important;
    }

    #postWrapper section.mt-10 .space-y-2 {
        display: flex;

        flex-direction: column;

        gap: 6px !important;
    }

    #postWrapper section.mt-10 .space-y-2 > a {
        padding:
            9px
            10px !important;

        border-radius: 8px !important;
    }

    #postWrapper section.mt-10 .truncate.text-sm {
        font-size: 10px !important;
    }

    #postWrapper section.mt-10 .mt-1.flex {
        margin-top: 3px !important;

        gap: 3px 5px !important;

        font-size: 8px !important;
    }


    /* ======================================================================
       공유하기
       ====================================================================== */

    #postWrapper .mt-2.border-t.pt-4 {
        margin-top: 13px !important;

        padding-top: 12px !important;
    }

    #postWrapper
    .mt-2.border-t.pt-4
    > .text-sm.font-semibold {
        margin-bottom: 7px !important;

        font-size: 11px !important;
    }


    #postWrapper
    .mt-2.border-t.pt-4
    > .flex {
        display: grid !important;

        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        gap: 5px !important;
    }


    #postWrapper
    .mt-2.border-t.pt-4
    button,
    #postWrapper
    .mt-2.border-t.pt-4
    a {
        width: 100%;

        min-height: 36px;

        display: inline-flex;

        align-items: center;
        justify-content: center;

        padding:
            6px
            4px !important;

        border-radius: 7px !important;

        font-size: 9px !important;

        white-space: nowrap;
    }


    /* ======================================================================
       댓글 영역
       ====================================================================== */

    #postWrapper
    [class*="comment"] {
        max-width: 100%;
    }


    /*
     * 댓글 textarea
     */
    #postWrapper textarea {
        width: 100% !important;
        max-width: 100% !important;

        min-height: 88px;

        padding:
            10px
            11px !important;

        border-radius: 8px !important;

        font-size: 12px !important;

        line-height: 1.5;
    }


    /* 댓글 폼 버튼 */
    #postWrapper textarea + *,
    #postWrapper form button {
        -webkit-tap-highlight-color: transparent;
    }


    /* ======================================================================
       신고 모달
       ====================================================================== */

    #reportModal {
        padding: 14px !important;
    }

    #reportModal > div {
        width: 100% !important;
        max-width: 390px !important;

        padding: 16px !important;

        border-radius: 13px !important;
    }

    #reportModal .text-lg {
        margin-bottom: 10px !important;

        font-size: 16px !important;
    }

    #reportModal select,
    #reportModal textarea {
        border-radius: 8px;

        font-size: 12px !important;
    }

    #reportModal textarea {
        min-height: 100px;
    }

    #reportModal button {
        min-height: 38px;

        padding:
            7px
            12px !important;

        border-radius: 7px;

        font-size: 10px !important;
    }


    /* ======================================================================
       민감 콘텐츠 모달
       모바일 bottom sheet
       ====================================================================== */

    #sensitiveModal {
        align-items: flex-end !important;
    }

    #sensitiveModal > div {
        width: 100% !important;
        max-width: none !important;

        border-radius:
            18px
            18px
            0
            0;

        overflow: hidden;
    }

    #sensitiveModal > div::before {
        content: "";

        display: block;

        width: 36px;
        height: 4px;

        margin:
            8px
            auto
            1px;

        border-radius: 999px;

        background: #d1d5db;
    }

    #sensitiveModal .px-4.py-3 {
        padding:
            10px
            15px !important;

        font-size: 15px !important;
    }

    #sensitiveModal .p-4 {
        padding:
            12px
            15px !important;

        font-size: 11px !important;

        line-height: 1.65 !important;
    }

    #sensitiveModal .px-4.py-4 {
        padding:
            11px
            15px
            calc(11px + env(safe-area-inset-bottom))
            15px !important;

        gap: 8px;
    }

    #sensitiveModal label {
        font-size: 9px !important;
    }

    #sensitiveModal a,
    #sensitiveModal button {
        min-height: 38px;

        padding:
            7px
            11px !important;

        border-radius: 7px;

        font-size: 10px !important;
    }


    /* ======================================================================
       긴 콘텐츠 안전 처리
       ====================================================================== */

    .post-show-page iframe,
    .post-show-page video,
    .post-show-page img,
    .post-show-page canvas {
        max-width: 100%;
    }

    .post-show-page iframe {
        width: 100%;
    }


    /* ======================================================================
       touch
       ====================================================================== */

    .post-show-page a,
    .post-show-page button,
    .post-show-page input,
    .post-show-page textarea,
    .post-show-page select {
        -webkit-tap-highlight-color: transparent;
    }

    .post-show-page button {
        touch-action: manipulation;
    }

}


/* ==========================================================================
   <= 430px
   ========================================================================== */

@media screen and (max-width: 430px) {

    .post-show-page .community-board-content {
        padding-left: 7px !important;
        padding-right: 7px !important;
    }

}


/* ==========================================================================
   <= 390px
   ========================================================================== */

@media screen and (max-width: 390px) {

    #postWrapper
    > .bg-white
    > .border {
        padding: 8px !important;
    }

    #postWrapper
    .mt-2.rounded-lg.border.border-gray-100.bg-gray-50 {
        padding: 9px !important;
    }

    #postWrapper
    .truncate.text-sm.font-semibold.text-gray-900 {
        max-width: 115px;
    }


    /* 액션 2열 */
    #postWrapper
    .mt-6.rounded-lg
    > .flex.flex-wrap.items-center {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /* 공유 버튼 4개 유지 */
    #postWrapper
    .mt-2.border-t.pt-4
    > .flex {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

}


/* ==========================================================================
   <= 350px
   ========================================================================== */

@media screen and (max-width: 350px) {

    .post-show-page .community-board-content {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }


    #postWrapper
    .mt-2.rounded-lg
    > .flex
    > .flex.flex-wrap.items-center.gap-2.text-xs
    > span {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }


    /* SNS 2 x 2 */
    #postWrapper
    .mt-2.border-t.pt-4
    > .flex {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* ==========================================================================
   Landscape
   ========================================================================== */

@media screen and (max-height: 500px) and (orientation: landscape) {

    .post-show-page .community-board-content {
        padding-top: 5px !important;
    }

}


/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .post-show-page *,
    .post-show-page *::before,
    .post-show-page *::after {
        transition-duration: 0.01ms !important;

        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        scroll-behavior: auto !important;
    }

}
/* ==========================================================================
   게시글 상세 - 제재 관련 모바일 보정
   ========================================================================== */

@media screen and (max-width: 640px) {

    /* ======================================================================
       연결된 제재 내역 - 전체 wrapper
       ====================================================================== */

    .post-show-page
    [aria-labelledby="restriction-detail-title"] {
        width: 100%;

        margin: 0 !important;

        border-radius: 10px !important;

        border: 1px solid #fecaca !important;

        background: #ffffff !important;

        box-shadow:
            0 1px 2px rgba(15, 23, 42, 0.03) !important;

        overflow: hidden;
    }


    /* restriction-detail 바깥 여백 */
    .post-show-page
    [aria-labelledby="restriction-detail-title"]
    .mx-auto,
    .post-show-page
    .mx-auto.mt-4.max-w-7xl {
        max-width: 100% !important;
    }


    /* x-posts.restriction-detail의 실제 wrapper */
    .post-show-page
    #postWrapper
    .mx-auto.mt-4.max-w-7xl {
        width: 100% !important;
        max-width: 100% !important;

        margin-top: 10px !important;

        padding-left: 0 !important;
        padding-right: 0 !important;
    }


    /* ======================================================================
       제재 상세 제목 영역
       ====================================================================== */

    .post-show-page
    [aria-labelledby="restriction-detail-title"]
    > .flex.flex-wrap.items-start.justify-between {
        align-items: flex-start !important;

        gap: 8px !important;

        padding:
            10px
            11px !important;

        border-bottom-color: #fecaca !important;

        background: #fff7f7 !important;
    }


    .post-show-page
    #restriction-detail-title {
        margin: 0;

        font-size: 13px !important;
        font-weight: 800 !important;

        line-height: 1.35 !important;

        color: #991b1b !important;
    }


    .post-show-page
    #restriction-detail-title + p {
        margin-top: 3px !important;

        font-size: 9px !important;

        line-height: 1.45 !important;

        color: #b91c1c !important;
    }


    /* 상태 badge */
    .post-show-page
    [aria-labelledby="restriction-detail-title"]
    > .flex.flex-wrap.items-start.justify-between
    > span {
        flex: 0 0 auto;

        min-height: 24px;

        padding:
            4px
            7px !important;

        border-radius: 999px !important;

        font-size: 8px !important;
        font-weight: 700 !important;

        line-height: 1 !important;

        white-space: nowrap;
    }


    /* ======================================================================
       제재 상세 정보 본문
       ====================================================================== */

    .post-show-page
    [aria-labelledby="restriction-detail-title"]
    > .p-5 {
        padding: 11px !important;
    }


    /*
     * desktop sm:grid-cols-2 -> mobile 1열 유지
     */
    .post-show-page
    [aria-labelledby="restriction-detail-title"]
    dl {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr) !important;

        gap: 10px !important;

        font-size: 10px !important;
    }


    /* 각 항목 */
    .post-show-page
    [aria-labelledby="restriction-detail-title"]
    dl > div {
        min-width: 0;

        padding-bottom: 8px;

        border-bottom: 1px solid #f1f5f9;
    }


    .post-show-page
    [aria-labelledby="restriction-detail-title"]
    dl > div:last-child {
        border-bottom: 0;
    }


    /* dt */
    .post-show-page
    [aria-labelledby="restriction-detail-title"]
    dt {
        margin: 0;

        font-size: 8.5px !important;
        font-weight: 700 !important;

        line-height: 1.3 !important;

        color: #94a3b8 !important;

        letter-spacing: -0.01em;
    }


    /* dd */
    .post-show-page
    [aria-labelledby="restriction-detail-title"]
    dd {
        margin-top: 3px !important;

        font-size: 10.5px !important;

        line-height: 1.45 !important;

        color: #334155 !important;

        overflow-wrap: anywhere;
    }


    /* ======================================================================
       제재 사유 / 해제 사유 / 내부 메모
       ====================================================================== */

    .post-show-page
    [aria-labelledby="restriction-detail-title"]
    dd.whitespace-pre-line {
        margin-top: 5px !important;

        padding: 9px !important;

        border-radius: 7px !important;

        font-size: 10px !important;

        line-height: 1.6 !important;
    }


    /* 제재 사유 */
    .post-show-page
    [aria-labelledby="restriction-detail-title"]
    dd.border-red-100 {
        background: #fffafa !important;
    }


    /* 해제 사유 */
    .post-show-page
    [aria-labelledby="restriction-detail-title"]
    dd.border-green-200 {
        background: #f7fff9 !important;
    }


    /* 관리자 메모 */
    .post-show-page
    [aria-labelledby="restriction-detail-title"]
    dd.border-yellow-200 {
        background: #fffdf3 !important;
    }


    /* ======================================================================
       제재 관리 footer
       ====================================================================== */

    .post-show-page
    [aria-labelledby="restriction-detail-title"]
    > .border-t {
        padding:
            10px
            11px !important;

        background: #f8fafc !important;
    }


    .post-show-page
    [aria-labelledby="restriction-detail-title"]
    > .border-t
    > .flex {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr);

        gap: 8px !important;
    }


    .post-show-page
    [aria-labelledby="restriction-detail-title"]
    > .border-t
    p {
        font-size: 8.5px !important;

        line-height: 1.45 !important;

        color: #94a3b8 !important;
    }


    .post-show-page
    [aria-labelledby="restriction-detail-title"]
    > .border-t
    a,
    .post-show-page
    [aria-labelledby="restriction-detail-title"]
    > .border-t
    span {
        width: 100%;

        min-height: 36px;

        display: inline-flex !important;

        align-items: center;
        justify-content: center;

        padding:
            7px
            10px !important;

        border-radius: 7px !important;

        font-size: 9px !important;

        line-height: 1.2 !important;

        text-align: center;
    }


    /* ======================================================================
       회원 제재 폼
       x-posts.restriction-form
       ====================================================================== */

    .post-show-page
    #postWrapper
    [x-data] {
        width: 100%;

        margin-top: 10px !important;
    }


    /* 회원 제재 버튼 */
    .post-show-page
    #postWrapper
    [x-data]
    > button {
        min-height: 34px;

        padding:
            7px
            10px !important;

        border-radius: 7px !important;

        font-size: 9px !important;
        font-weight: 700 !important;

        line-height: 1 !important;
    }


    /* ======================================================================
       펼친 회원 제재 패널
       ====================================================================== */

    .post-show-page
    #postWrapper
    [x-data]
    > div[x-show] {
        margin-top: 8px !important;

        padding: 11px !important;

        border-radius: 10px !important;

        border-color: #fecaca !important;

        background: #fff7f7 !important;

        box-shadow: none !important;
    }


    /* 상단 */
    .post-show-page
    #postWrapper
    [x-data]
    > div[x-show]
    > .flex.items-start.justify-between {
        gap: 8px !important;
    }


    .post-show-page
    #postWrapper
    [x-data]
    > div[x-show]
    h3 {
        font-size: 13px !important;

        line-height: 1.3 !important;
    }


    .post-show-page
    #postWrapper
    [x-data]
    > div[x-show]
    h3 + p {
        margin-top: 3px !important;

        font-size: 9px !important;

        line-height: 1.5 !important;
    }


    /* 닫기 */
    .post-show-page
    #postWrapper
    [x-data]
    > div[x-show]
    > .flex.items-start.justify-between
    > button {
        flex: 0 0 auto;

        min-height: 28px;

        padding:
            4px
            6px !important;

        border-radius: 6px;

        font-size: 9px !important;
    }


    /* ======================================================================
       라우트 오류 안내
       ====================================================================== */

    .post-show-page
    #postWrapper
    [x-data]
    .border-yellow-300.bg-yellow-50 {
        margin-top: 8px !important;

        padding: 9px !important;

        border-radius: 7px !important;
    }


    .post-show-page
    #postWrapper
    [x-data]
    .border-yellow-300.bg-yellow-50
    .text-sm {
        font-size: 9px !important;
    }


    .post-show-page
    #postWrapper
    [x-data]
    .border-yellow-300.bg-yellow-50
    .text-xs {
        margin-top: 2px !important;

        font-size: 8px !important;
    }


    /* ======================================================================
       제재 Form
       ====================================================================== */

    .post-show-page
    #postWrapper
    [x-data]
    form.space-y-4 {
        margin-top: 10px !important;

        display: flex;

        flex-direction: column;

        gap: 9px !important;
    }


    /* label */
    .post-show-page
    #postWrapper
    [x-data]
    form.space-y-4
    label.block {
        font-size: 9px !important;

        font-weight: 700 !important;

        line-height: 1.35 !important;

        color: #475569 !important;
    }


    /* select */
    .post-show-page
    #postWrapper
    [x-data]
    form.space-y-4
    select {
        width: 100%;

        min-height: 38px;

        margin-top: 4px !important;

        padding:
            7px
            30px
            7px
            9px !important;

        border-radius: 7px !important;

        font-size: 11px !important;

        background-color: #ffffff;
    }


    /* textarea */
    .post-show-page
    #postWrapper
    [x-data]
    form.space-y-4
    textarea {
        width: 100%;

        min-height: 88px;

        margin-top: 4px !important;

        padding:
            9px
            10px !important;

        border-radius: 7px !important;

        font-size: 11px !important;

        line-height: 1.5 !important;

        background: #ffffff;
    }


    .post-show-page
    #postWrapper
    [x-data]
    form.space-y-4
    textarea[name="admin_memo"] {
        min-height: 72px;
    }


    /* error */
    .post-show-page
    #postWrapper
    [x-data]
    form.space-y-4
    .text-red-600 {
        margin-top: 3px !important;

        font-size: 8px !important;

        line-height: 1.35;
    }


    /* ======================================================================
       게시글 숨기기 checkbox
       ====================================================================== */

    .post-show-page
    #postWrapper
    [x-data]
    form.space-y-4
    label.flex.cursor-pointer {
        min-height: 36px;

        display: flex;

        align-items: center !important;

        gap: 7px !important;

        padding:
            7px
            8px;

        border: 1px solid #fecaca;

        border-radius: 7px;

        background: #ffffff;
    }


    .post-show-page
    #postWrapper
    [x-data]
    form.space-y-4
    input[type="checkbox"] {
        width: 16px;
        height: 16px;

        flex: 0 0 auto;
    }


    .post-show-page
    #postWrapper
    [x-data]
    form.space-y-4
    label.flex.cursor-pointer
    span {
        font-size: 9px !important;

        line-height: 1.35;
    }


    /* ======================================================================
       제재 Form footer
       ====================================================================== */

    .post-show-page
    #postWrapper
    [x-data]
    form.space-y-4
    > .flex.flex-wrap.justify-end {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 6px !important;

        padding-top: 9px !important;
    }


    .post-show-page
    #postWrapper
    [x-data]
    form.space-y-4
    > .flex.flex-wrap.justify-end
    button {
        width: 100%;

        min-height: 38px;

        padding:
            7px
            8px !important;

        border-radius: 7px !important;

        font-size: 9px !important;

        font-weight: 700;

        line-height: 1 !important;
    }


    /* ======================================================================
       iOS input zoom 방지
       ====================================================================== */

    @supports (-webkit-touch-callout: none) {

        .post-show-page
        #postWrapper
        [x-data]
        select,

        .post-show-page
        #postWrapper
        [x-data]
        textarea {
            font-size: 16px !important;
        }
    }

}


/* ==========================================================================
   <= 390px
   ========================================================================== */

@media screen and (max-width: 390px) {

    .post-show-page
    [aria-labelledby="restriction-detail-title"]
    > .flex.flex-wrap.items-start.justify-between {
        padding:
            9px
            10px !important;
    }


    .post-show-page
    [aria-labelledby="restriction-detail-title"]
    > .p-5 {
        padding: 10px !important;
    }


    .post-show-page
    [aria-labelledby="restriction-detail-title"]
    dl {
        gap: 8px !important;
    }


    .post-show-page
    #postWrapper
    [x-data]
    > div[x-show] {
        padding: 10px !important;
    }

}


/* ==========================================================================
   <= 350px
   ========================================================================== */

@media screen and (max-width: 350px) {

    /*
     * 버튼이 너무 좁아지면 제재 폼 footer 세로 배치
     */
    .post-show-page
    #postWrapper
    [x-data]
    form.space-y-4
    > .flex.flex-wrap.justify-end {
        grid-template-columns:
            minmax(0, 1fr);
    }

}