/* ==========================================================================
           1. 기본 설정 (Reset & Typography)
           ========================================================================== */
        @import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&display=swap');

        body {
            background: #f1f1f1;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 15px;
            color: #444;
            margin: 0;
            padding: 0;
            overflow-x: hidden;

        }

        #basic_box {
            background: #fff;
            max-width: 480px;      /* 최대 너비 제한 */
            margin: 0 auto;        /* 중앙 정렬 */
            min-height: 100vh;     /* 최소 높이 설정 (선택사항) */
            position: relative;    /* 내부 요소 정렬 기준점 */
        }

        /* 명조체 유틸리티 (필요한 곳만 사용) */
        .text-myeongjo { font-family: 'Nanum Myeongjo', serif; }
        .fw-bold { font-weight: 700; }
        .fw-light { font-weight: 300; }

        .clearfix::after { content: ""; display: block; clear: both; }
        .float-left { float: left; }
        .float-right { float: right; }
        .d-none { display: none; }


        /* ==========================================================================
           2. 메인 부고 정보 (명조체 적용 영역)
           ========================================================================== */
        .msg-bugo-main {
            font-family: 'Nanum Myeongjo', serif; /* 명조체 유지 */
            font-size: 20.3px;
            text-align: center;
            line-height: 1.6;
            font-weight: 400;
            margin-top: 30px;
            margin-bottom: 10px;
        }

        .msg-goin-detail {
            font-size: 12pt;
            text-align: center;
            font-weight: 300;
            color: #666;
        }

        .msg-goin-position {
            font-size: 12pt;
            text-align: center;
            font-weight: 400;
            color: #666;
            margin-top: 15px;
            padding: 0 30px;
            word-break: keep-all;
        }


        /* ==========================================================================
           3. 레이아웃 (Layout)
           ========================================================================== */
        .section-wrap { padding: 0 30px; }
        .section-wrap-narrow { padding: 0 25px; }

        /* 섹션 간격 */
        .section-sangju   { margin-top: 80px; }
        .section-command  { margin-top: 50px; }
        .section-schedule { margin-top: 50px; }
        .section-funeral  { margin-top: 50px; }
        .section-flower   { margin-top: 60px; }
        .section-guest    { margin-top: 60px; }
        .section-footer-banner { margin-top: 100px; margin-bottom: 0; }


        /* ==========================================================================
           4. 헤더 (타이틀 & 리본) - 고딕 계열 유지
           ========================================================================== */
        .header-section {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        .header-icon {
            width: 12px;
            margin-right: 5px;
            padding-top: 2px;
            flex-shrink: 0;
        }
        .header-title {
            font-size: 13pt;
            color: #444;
            margin: 0;
            /* font-family 별도 지정 없음 -> 기본 고딕 사용 */
        }
        .header-right {
            margin-left: auto;
            text-align: right;
        }


        /* ==========================================================================
           5. 상주 정보 (명조체 적용 & 줄바꿈 수정)
           ========================================================================== */
        .sangju-list { padding-left: 5px; }

        .sangju-row {
            display: flex;
            align-items: flex-start;
            margin-bottom: 10px;
        }

        .sj-relation {
            width: 70px;
            padding-top: 4px;
            flex-shrink: 0;
            font-family: 'Nanum Myeongjo', serif; /* 명조체 */
        }

        .sj-names {
            flex: 1;
            font-family: 'Nanum Myeongjo', serif; /* 명조체 */
            font-size: 15.3px;
            font-weight: bold;
            color: #555;
            line-height: 170%;
            letter-spacing: 1.5px;
            word-break: keep-all; /* 단어 단위 줄바꿈 */
        }


        /* ==========================================================================
           6. 기타 요소
           ========================================================================== */
        .text-command-body {
            font-family: 'Nanum Myeongjo', serif; /* 알리는 글 명조체 */
            line-height: 160%;
            font-size: 15.3px;
            padding-left: 5px;
        }

        .schedule-row {
            display: flex;            /* 플렉스 박스 선언 */
            align-items: flex-start;  /* 내용이 길어 줄바꿈될 때 위쪽 정렬 유지 */
            margin-bottom: 10px;      /* 기존 여백 유지 */
        }

        /* 버튼 스타일 (기본 고딕) */
        .btn-copy-address {
            height: 22px;
            background-color: #fff;
            border: 1px solid #ddd;
            font-size: 9.2pt;
            color: #999;
            border-radius: 3px;
            cursor: pointer;
            padding: 0 8px;
        }

        .link-write { font-size: 11pt; font-weight: 300; }
        .link-write a { text-decoration: none; color: inherit; }

        .info-table { width: 100%; border-collapse: collapse; }
        .info-table td { vertical-align: top; padding-bottom: 5px; }
        .icon-cell { width: 27px; color: #aaa; }


        /* ==========================================================================
           7. 팝업 및 하단 고정 요소
           ========================================================================== */
        #pixfooter {
            display: block;
            position: fixed;
            right: 0px; bottom: 0px;
            width: 145px;
            color: #444;
            z-index: 1001;
        }
        @media screen and (min-width: 481px) {
            #pixfooter {
                right: auto; left: 50%;
                margin-left: 95px;
            }
        }

        #sample_pix {
            display: block;
            background: rgba(0, 0, 0, 0);
            position: fixed;
            left: 0px;
            top: 0px;
            width: 100%;           /* 화면 전체 너비로 설정하여 중앙 정렬 기준 확보 */
            z-index: 999;
            pointer-events: none;  /* 중요: 마우스 클릭이 투명 배경을 통과하여 뒤쪽 로고 클릭 가능 */
        }

        /* 팝업 공통 */
        #send_bugo_pop, #ex_flower_pop, #visit_manner_pop {
            display: none;
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0,0,0,0.8);
            z-index: 9999;
        }

        #send_bugo_popmenu, #ex_flower_popmenu, #visit_manner_popmenu {
            position: absolute;
            left: 50%; top: 50%;
            transform: translate(-50%, -50%);
            width: 300px;
            text-align: center;
            background: #fff;
            border-radius: 5px;
            box-sizing: border-box;
        }

        #send_bugo_popmenu { height: 250px; }
        #ex_flower_popmenu { height: 480px; background: #f7f7f7; }
        #visit_manner_popmenu { height: 480px; padding-top: 40px; }

        /* 닫기 버튼 */
        #send_bugo_exit {
            position: absolute; right: 15px; top: 15px;
            width: 30px; height: 30px;
            line-height: 30px;
            background-color: #2c3e50; color: white;
            font-size: 18pt; border: 1px solid #ccc;
            border-radius: 3px; cursor: pointer;
        }
        #ex_flower_exit {
            position: absolute; right: 10px; top: 20px;
            width: 30px; height: 30px;
            background: #fff; font-size: 17pt;
            border: none; cursor: pointer;
        }
        #visit_manner_exit {
            position: absolute; right: 20px; top: 10px;
            font-size: 15pt; font-weight: bold;
            cursor: pointer; z-index: 10;
        }

        /* 팝업 내부 */
        #send_bugo { cursor: pointer; }

        #ex_flower {
            width: 20px; height: 20px;
            color: #ba6e6d; background: #fee9e8;
            border-radius: 50%; cursor: pointer;
        }
        #ex_flower p { margin-top: 80px; }

        #visit_manner_content {
            width: 100%; height: calc(100% - 30px);
            overflow-y: auto; padding: 0 20px;
            box-sizing: border-box;
        }
        #visit_manner_content ol {
            margin: 0; padding: 0 0 0 20px; text-align: left;
        }
        #visit_manner_content > div { width: 100%; }

       #visit_manner {
            background-color: #fff; 
            border: 1px solid #ddd;
            border-radius: 5px; 
            padding: 10px;           /* 여백을 상하좌우 균형 있게 조정 */
            display: flex; 
            align-items: center; 
            justify-content: center; /* 내용물(아이콘+글씨) 가운데 정렬 */
            width: 100%;             /* 너비 100% 꽉 채우기 */
            box-sizing: border-box;  /* 테두리와 패딩을 포함해 너비 계산 (깨짐 방지) */
            cursor: pointer;
        }

        .scroll_wrap {overflow: hidden;}
        .scroll_on {opacity: 0;transition: all 0.8s;}
        .scroll_on.active {opacity: 1 !important;transform: translate(0, 0) !important;}
        .scroll_on.type_bottom {transform: translate(0, 200px);}