@import url(reset.css);
    @import url(font.css);
    html { font-size: 62.5%; font-family: 'Pretendard', sans-serif;  }
    body,
    button,
    input,
    select,
    table,
    textarea { font-family: 'Pretendard', sans-serif; color: #111; }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    /*body { font-size: 1.8rem; line-height: 1.4; }*/
    body {
        width: 100%;
        background-color: #e0e0e0; /* 페이지 배경 변경 */
        padding-top: 30px;
        padding-bottom: 30px;
        display: flex; /* A4 용지들을 중앙에 배치하기 위함 */
        flex-direction: column;
        align-items: center;
        justify-content: center; /* ✅ 수직 가운데 정렬 추가 */
        min-height: 100vh;       /* ✅ 화면 전체 높이 확보 */
    }

    button { border: 0 none; cursor: pointer; background: none; }
    a,
    a:active { text-decoration: none; }
    img { max-width: 100%; vertical-align: top; }
    ul,
    ol,
    li { list-style: none; }
    input { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0 none; }
    strong { font-weight: 700; }

    textarea::placeholder,
    input::placeholder { color: #737379; opacity: 1; }
    input::-moz-placeholder,
    input::-webkit-input-placeholder { color: #737379; opacity: 1; }

    .flex { display: flex; gap: 1.5rem; }
    .flex-wrap { flex-wrap: wrap; }
    .flex-center { align-items: center; }
    .flex-content-center { justify-content: center;}
    .flex-content-between { justify-content: space-between;}
    .flex-col { flex-direction: column; }
    .flex-row { flex-direction: row; }
    .hidden,
    caption { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden; }

    .underline { text-decoration: underline; }
    .common-inner { margin: 0 auto; max-width: 1100px; padding: 0 20px; }
    .common-check1 { cursor: pointer; vertical-align: middle; ;line-height: 1.8; }
    .common-check1 i { display: inline-block; vertical-align: middle; margin-right: 5px;border-radius: 4px; border: 1px solid #333; width: 24px; height: 24px; }
    .common-check1 input[type='radio']:hover:not(:disabled) + i,
    .common-check1 input[type='checkbox']:hover:not(:disabled) + i {  background: url(../images/icon-checked01.svg) no-repeat center; background-size: 80%; opacity: 0.5; }
    .common-check1 input[type='radio']:checked:disabled + i,
    .common-check1 input[type='checkbox']:checked:disabled + i,
    .common-check1 input[type='radio']:checked + i,
    .common-check1 input[type='checkbox']:checked + i { background: #fff url(../images/icon-checked01.svg) no-repeat center; background-size: 80%; opacity: 1; }

    .common-check1 input[type='radio']:disabled + i,
    .common-check1 input[type='checkbox']:disabled + i { opacity: 0.4;}

    .common-check2 { cursor: pointer; vertical-align: middle; }
    .common-check2 i { display: inline-block; vertical-align: middle; border-radius: 4px; border: 1px solid #777; width: 20px; height: 20px; background: #fff; }
    .common-check2 input[type='radio']:hover + i,
    .common-check2 input[type='checkbox']:hover + i {  background: #fff url(../images/icon-checked01.svg) no-repeat center; background-size: 80%; opacity: 0.5; }
    .common-check2 input[type='radio']:checked + i,
    .common-check2 input[type='checkbox']:checked + i { background:#fff url(../images/icon-checked01.svg) no-repeat center; background-size: 80%;  }

    .common-check1.mini { font-size: 1.6rem;}
    .common-check1 i { width: 18px; height: 18px; }

    .common-btn-wrap {width: 210mm;display: flex;margin: 0 auto 30px auto;gap: 1rem;justify-content: space-between;align-items: center;}
    .common-btn-wrap .left-btn-wrap { display: flex; gap: 1rem; }
    .common-btn-wrap .right-btn-wrap { display: flex; gap: 1rem; }
    [class*=common-btn] { transition: 0.3s; }
    .common-btn1 { display: block; width: fit-content; border-radius: 1rem; padding: 1.5rem 3rem; text-align: center; line-height: 1; font-size: 1.8rem; background: #ccc; color: #000; font-weight: 500;}
    [class*=common-btn].full { width: 90%; max-width: 480px; }
    .common-btn1:hover { opacity: 0.8;}

    .question-textarea-box { padding: 1rem;}
    .common-textarea-box { flex: 1; width: 100%; background: #efefef; border:0 none; padding: 1rem; min-height: 100px; display: block;}

    /* input */
    .common-input-box { font-size: 1.5rem; line-height: 1.8; position: relative; width: 60%; }
    .common-input-box label { display: block; text-align: left; color: #929298; font-size: 1.8rem; font-weight: 300; padding-left: 6px; margin-bottom: 0.5rem;}
    .common-input-box input { display: block; width: 100%; border-radius: 8px; border: 1px solid #333; padding: 2rem; line-height: 1; font-size: 1.8rem; background: #fff; color: #111;}
    .common-input-box input:focus { border-color: #2792d1; outline: none; }
    .common-input-box .input-alert { color: #ff512a; margin-top: 10px; }
    .common-input__tit { position: relative; display: block; margin-bottom: 10px; width: fit-content; }
    .common-input-box + .common-input-box { margin-top: 20px; }
    .common-input-box.alert input { border-color: #ff512a; }
    .common-input-box.gray { background: #efefef;}
    .common-input-box:disabled { opacity: 0.5;}
    .common-textarea {display: block; width: 100%; border-radius: 8px; border: 1px solid #333; padding: 2rem; line-height: 1; font-size: 1.8rem; background: #fff; color: #111; height: 300px; resize: none; line-height: 1.8; }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes fadeInUp {
        from { opacity: 0; -webkit-transform: translate3d(0, 40%, 0); transform: translate3d(0, 40%, 0); }
        to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
    }

    .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; }
    .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; }

    .main { max-width: 1024px; margin:10px auto;  height:90%}




    .intro-section ~ .intro-section { margin-top: 20rem; }
    .intro-tit-box { font-size: 2.4rem; padding: 1.5rem 0; font-weight: 700; text-align: center; background: #eaeaea; width: fit-content; margin: 6rem auto ; min-width: 300px;}

    .common-table { width: 100%; border-collapse: collapse; }
    .common-table th,
    .common-table td { border: 1px solid #333; padding: 10px; vertical-align: middle; }
    .common-table thead th { background: #eaeaea; font-size: 1.8rem;}
    .common-table th { text-align: center; font-size: 1.6rem; word-break: keep-all;}
    .common-table td { background: #fff; font-size: 1.6rem; }

    .input-table th { background: #eaeaea; padding: 10px 5px; }
    .input-table td .common-input-box { width: 100%; }


    .result-table th  { background: #fbfbfb; padding: 10px 5px; font-weight: 700; }
    .inner-table { width: 100%; }
    .inner-table thead th { font-size: 1.6rem;  }
    .inner-table th,
    .inner-table td { padding: 5px; font-size: 1.5rem;}

    .common-list1 { margin-bottom: 4rem;}
    .common-list1 dt { font-size: 2rem; font-weight: 700; margin-bottom: 2rem; }
    .common-list1 dd { font-size: 1.6rem; line-height: 1.8; margin-bottom: 5px;}
    .common-list1 dd:before { content: '○'; display: inline-block; margin-right: 5px; }
    .intro-wrap { background: #fafafa;  padding: 4rem; max-width: 1024px; margin:20px auto;}

    /* 로그인 */
    /*.login-wrap { padding:10rem 4rem; }*/
    .login-wrap {
        width: 100%;
        max-width: 90%;
        margin: 80px auto; /* 수직 중간 정렬 여유 + 수평 가운데 */
        background: #f9f9f9;
        border-radius: 20px; /* 둥근 테두리 */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 그림자 효과 */
        padding: 30px;
        height:97%;
        align-content: center;

    }
    .login-inner + .login-inner { margin-top: 10rem;}
    .login-txt1 { font-size: 2rem; font-weight: 500; margin-bottom: 4rem; text-align: center;}
    .login-wrap .login-logo { text-align: center; }
    .login-wrap h1 { margin-top: -50px;}
    .login-input-box { max-width: 480px; margin:0 auto 10px auto; }
    .login-input-box input { width: 100%; border-radius: 8px; border: 1px solid #aaa; padding: 2rem 1.5rem; line-height: 1; font-size: 1.8rem; background: #fff; color: #111; }
    .login-btn-box { display: flex; gap: 2rem; justify-content: center; align-items: center; margin-top: 4rem;}

    /* 헤더 */
    .header { position: fixed; height: 56px; top: 0; left: 0; right: 0; background: #fff; z-index: 2; }
    .header-inner { position: relative; height: 100%; margin: 0 auto; max-width: 1024px; display: flex; align-items: center; justify-content: center; }
    .header-logo { height: 26px; font-size :2rem;}
    .header-logo img { height: 100%; }
    .header.common-header { box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15); }
    .header h1.header-tit { font-size: 1.5rem; font-weight: 500; color: #333; line-height: 1; }
    .header-left,
    .header-right {position: absolute;top: 0; height: 56px;display: flex;align-items: center;}
    .header-left { left: 10px; gap: 10px; }
    .header-right { right: 10px; display: flex; gap: 1rem; }
    .header-btn { font-size: 1.6rem; font-weight: 500; line-height: 1; padding: 1rem; border-radius: 50px; display: inline-flex; align-items: center; gap: 0.5rem; color: #111;}
    .header-btn:hover { opacity: 0.8;}

    .header + .main { margin-top: 50px; }

    .nav { height: 70px; }
    .nav-inner { position: fixed; bottom: 0; right: 0; left: 0; background: #fff; border-top: 1px solid #dcdcdc; width: 100%; display: flex; height: 70px; justify-content: center; z-index: 1; padding: 0 15px; }
    .nav-inner li { display: inline-flex; flex: 1 1 100px; justify-content: center; align-items: center; max-width: 100px; }
    .nav-inner li button,
    .nav-inner li a { display: flex; height: 100%; width: 100%; flex-direction: column; align-items: center; justify-content: center; font-size: 1.6rem; gap: 3px; color: #111; }
    .nav-inner li i { display: block; font-size: 3rem; }

    .wrapper{width:100%;height:100%;}
    /* 설문지 */
    .survey-wrap {  height: 100%; /*padding:2rem;*/ }
    .info-title {
        font-size: 20px;         /* As you specified */
        margin-top: 40px;        /* As you specified */
        margin-bottom: 40px;     /* As you specified */
        border: 1px solid #000;  /* As you specified */
        padding: 15px 100px;      /* MODIFIED: Increased padding.
                                 This means 15px padding on top and bottom,
                                 and 50px padding on left and right, making it wider.
                                 Adjust 50px to your desired width.
                                 Original was padding: 10px; */
        display: inline-block;   /* As you specified - essential for border wrapping content
                                 and for text-align:center on parent to work */
        /* Optional: If the text inside the box itself needs centering after making the box wider */
        /* text-align: center; */
    }

    /* Ensure the parent container handles centering for inline-block elements */
    .center {
        text-align: center;
    }

    /* .first 클래스가 있는 .center 안에 있는 .info-title에만 margin-top: 20px 적용 */
    .center.first .info-title {
        margin-top: 20px;
    }
    .survey-header { display: flex; gap: 2rem; justify-content: space-between; }
    .survey-header .common-select1 { width: 150px; border: 1px solid #aaa; border-radius: 8px; padding: 0 1rem; font-size: 1.6rem;}
    .survey-header .search-box { display: flex; gap: 1rem; align-items: center; }
    .survey-header .search-box input { flex:1; border-radius: 8px; border: 1px solid #aaa; padding: 1.2rem 2rem; line-height: 1; font-size: 1.6rem; background: #fff; color: #111; width: 60%; }
    .survey-header .search-box button { max-width: 100px; width: 40%; padding: 1.5rem 2rem; height: 100%; }

    .survey-list { display: flex; flex-direction: column; padding:2rem; margin-top: 2rem; border: 1px solid #ccc; border-radius: 8px; width: 100%; position: relative; height:95%; /*max-height: 500px;*/ overflow: hidden; }
    .survey-list-header { display: flex; font-size:1.6rem;gap: 2rem; justify-content: space-between; position: sticky; top: 0; background-color: #dcdcdc; z-index: 1; padding-bottom: 1rem; border-bottom: 1px solid #eee; padding:2rem 0;border-bottom: 1px solid #bec5c8;}
    .survey-list-header p { flex: 1; text-align: center; font-weight: bold;}
    .survey-list ul { display: flex; flex-direction: column; overflow-y: auto;/* max-height: 400px;  스크롤 영역 높이 */}
    .survey-list-item { display: flex; gap: 2rem; justify-content: space-between; padding: 1rem 1rem 1rem 1rem; border-bottom: 1px solid #eee; align-items: center; font-size: 1.6rem; height:80px; background: #ffffff;border-bottom: 1px solid #bec5c8; /* 더 진한 회색, 두께 증가 */
        cursor: pointer; /* 마우스 포인터를 손가락 모양으로 변경 */
        transition: background-color 0.3s ease; /* 배경색 변경 시 부드러운 전환 효과 */}
    .survey-list-item:hover {
        background-color: #f0f0f0; /* 마우스 오버 시 배경색 변경 */
    }
    .survey-list-item p { flex: 1; text-align: center; }

    .survey-date-num { display: flex; align-items: center; border:1px solid #aaa;}
    .survey-date-num .survey-date-num-label { font-size: 1.6rem; font-weight: 500; background: #efefef; vertical-align: top; padding: 0.5rem 2rem; border-right: 1px solid #aaa;}
    .survey-date-num .survey-date-num-value { font-size: 1.6rem; font-weight: 500; padding: 0.5rem 2rem; }

    .survey-notice-box { margin-top: 3rem; margin-bottom: 3rem;border:1px solid #aaa; padding: 4rem 3rem; border-radius: 8px; }
    .survey-notice-box ul { margin-bottom: 2rem; }
    .survey-notice-box ul li { font-size: 1.6rem; font-weight: 500; line-height: 1.8; margin-bottom: 1rem; }
    .survey-notice-box ul li:before { content: '□'; display: inline-block; margin-right: 5px; }
    .survey-notice-box p { font-size: 1.6rem; font-weight: 500; line-height: 1.8; margin-bottom: 1rem; }
    .survey-notice-agree { margin-top: 4rem; text-align: center; line-height: 2; }
    .survey-notice-agree label { margin: 0 0.5rem; }

    .survey-user-info { margin: 8rem 0; overflow-x: auto;}

    .survey-tit1 { font-size: 2rem; margin-bottom: 1rem;}
    .survey-main-tit1 { font-size: 2.8rem; font-weight: 700; margin-top: 4rem;margin-bottom: 4rem; text-align: center;}
    .survey-question-wrap {  padding: 2rem;}
    .survey-question-item { margin-bottom: 6rem; }

    .survey-check-list1 { font-size: 1.8rem;}
    .survey-check-list1 p { margin: 1.5rem 0;font-size: 1.8rem;line-height: 1.8; margin-top:0.5rem;order-left: 4px ;border-right: 0 none; background: #efefef;padding-left: 1rem;}


    .question-body .survey-check-list1 { padding:1rem; width: 100%; line-height: 1.8;}

    .survey-check-list2 { border: 1px solid #aaa;  }
    .survey-check-list2 + .survey-check-list2 { border-top: 0 none;}
    .question-header { display: flex; align-items: stretch; border-bottom:1px solid #aaa; }
    .question-header p { flex: 1; text-align: center; line-height: 1; border-left:1px solid #aaa; line-height: 1; padding: 1rem; background: #dcdcdc; display: flex; align-items: center; justify-content: center; font-size: 1.6rem;  }
    .question-header p.question-tit { flex: 8; border-left: 0 none; }
    .question-header2 { display: flex; align-items: stretch; border-bottom:1px solid #aaa; }
    .question-header2 p { flex: 1; text-align: left; font-weight: bold; border-left:1px solid #aaa; line-height: 1; padding: 1.5rem 1rem; background: #dcdcdc; display: flex; align-items: center; font-size: 1.6rem; font-size: 1.8rem; }
    .question-header2 p.question-tit { flex: 8; border-left: 0 none; }
    .question-row .question-header p { border-bottom: 0 none;}
    .question-row .question-header p:not(:first-child) { border-left: 1px solid #aaa;}
    .question-row .question-body p {border-top: 0 none;}
    .question-row .question-body .question-row {border-bottom: 1px solid #aaa;height: 100%}
    .question-row .question-body .question-row p:not(:first-child) { border-left: 1px solid #aaa;}

    .question-row { display: flex; align-items: stretch; font-size: 1.6rem;}
    .question-row:not(:last-child) { border-bottom:1px solid #aaa; }
    .question-row p { flex: 1; text-align: center; border-left:1px solid #aaa; padding:1rem;  font-size: 1.5rem; }
    .question-row p:first-child { border-left: 0 none;}
    .question-row p.question-tit { flex:8; border-left: 0 none; text-align: left; }
    .question-row p.question-tit ~ p { display: flex; align-items: center; justify-content: center;}

    .question-col-group { display: flex; align-items: stretch; width: 100%; }
    .question-col { flex: 1; }
    .question-col:not(:last-child) { border-right:1px solid #aaa; }
    .question-col p { flex: 1; text-align: center; border: 0 none;border-top:1px solid #aaa; padding:1rem 0.5rem;  font-size: 1.6rem; }
    .question-col p.question-tit { flex:8; text-align: left; border-top:0 none; }
    .question-col p.question-tit ~ p { display: flex; align-items: center; justify-content: center;}
    .question-col p.question-tit ~ p:last-child { border-bottom:1px solid #aaa; }



    .survey-desc1 { font-size: 1.8rem; font-weight: 500; line-height: 1.8; margin-top:0.5rem;margin-bottom: 1rem; border-left: 4px solid #2792d1; border-right: 0 none; background: #efefef;padding-left: 1rem; }
    .survey-desc2 { font-size: 1.8rem; font-weight: 500; line-height: 1.8; margin: 5rem 0 10rem 0; text-align: center; }
    .survey-check-list2 .question-body { display: flex; width: 100%;}
    .survey-check-list2 .question-body ~ .question-body { border-top: 1px solid #aaa; }
    .survey-check-list2 .question-cate { display: flex; font-size:1.8rem; line-height: 1.8;align-items: center; justify-content: center; width: 60px; flex: none; border-left: 0 none; border-right: 1px solid #aaa; padding: 1rem 0.2rem; text-align: center;  }
    .survey-check-list2 .question-cate.full { flex: 1 1 100%; width: auto; background: #efefef; border-bottom: 1px solid #aaa; }
    .question-body .question-row-group { display: flex; flex-direction: column; flex: 1; }
    .question-tit + .question-row-group { width: 100%;  }
    :not(.question-col) > .question-tit + .question-row-group { border-left: 1px solid #aaa; }

    .question-row.type5 { flex-wrap:wrap; overflow: hidden;}
    .question-row.type5 > .question-tit { width: 100%; flex: none}
    .question-row.type5 .question-row p { min-width: 15%;}
    .question-row.type5 > .question-row-group { border-left:2rem solid #efefef; border-top:1px solid #aaa; opacity: 0.5;}
    .question-row.type5 > .question-col-group { border-left:2rem solid #efefef; border-top:1px solid #aaa; opacity: 0.5; margin-bottom: -1px;}

    /* 활성화된 question-row-group 스타일 */
    .question-row.type5 > .question-row-group.active,
    .question-row.type5 > .question-col-group.active {
        opacity: 1;
    }

    /* 비활성화된 input 스타일 */
    .question-row.type5 > .question-row-group:not(.active) input[type="radio"],
    .question-row.type5 > .question-row-group:not(.active) input[type="checkbox"] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .question-textarea-box { flex: 1; }

    /* 결과지 */
    .mt1 { margin-top: 1rem !important;}
    .mt2 { margin-top: 2rem !important;}
    .mt3 { margin-top: 3rem !important;}
    .mt4 { margin-top: 4rem !important;}
    .mt5 { margin-top: 5rem !important;}
    .mt6 { margin-top: 6rem !important;}
    .mt7 { margin-top: 7rem !important;}
    .mt8 { margin-top: 8rem !important;}
    .mt9 { margin-top: 9rem !important;}
    .mt10 { margin-top: 10rem !important;}
    .mb1 { margin-bottom: 1rem !important;}
    .mb2 { margin-bottom: 2rem !important;}
    .mb3 { margin-bottom: 3rem !important;}
    .mb4 { margin-bottom: 4rem !important;}
    .mb5 { margin-bottom: 5rem !important;}
    .mb6 { margin-bottom: 6rem !important;}
    .mb7 { margin-bottom: 7rem !important;}
    .mb8 { margin-bottom: 8rem !important;}
    .mb9 { margin-bottom: 9rem !important;}
    .mb10 { margin-bottom: 10rem !important;}
    .common-table-wrap { overflow-x: auto; }
    .common-table-wrap table { max-width: 100%;  }
    .common-table-wrap thead th { line-height: 1.2;}


    .result-desc1 { font-size: 2rem; font-weight: 700; line-height: 1.8;  }
    .result-desc2 { font-size: 1.8rem; padding-left: 1rem; line-height: 1.8; }
    .result-desc1.center, .result-desc2.center { text-align: center; }
    .color-red { color: #f00; }

    .icon-box1 { display: inline-block; width: 16px; height: 16px;  border: 1px solid #333; vertical-align: middle; border-radius: 2px; background: #fff;}
    .icon-box1.fill { background: #333; }
    .icon-check1 { display: inline-block; width: 16px; height: 16px; background: #fff; background-size: 80%; opacity: 1;  border-radius: 2px; border: 1px solid #333; vertical-align: middle; }
    .icon-check1.check { background: #fff url(../images/icon-checked01.svg) no-repeat center; }
    .color-red .icon-check1.check { border-color:#f00; background: #fff url(../images/icon-checked02.svg) no-repeat center; }

    table + table  { margin-top: 1rem; }

    .result-table canvas { max-width: 100% !important;}


    section{
        width: 210mm; /* A4 가로 크기 */
        min-height: 297mm; /* A4 세로 최소 크기 (내용에 따라 늘어남) */
        padding: 15mm; /* A4 용지 내부 여백 (상하좌우 동일) */
        margin: 0 auto 30px auto; /* 중앙 정렬 및 다음 페이지와의 간격 */
        background-color: white;
        box-shadow: 0 0 15px rgba(0,0,0,0.15); /* 용지 그림자 효과 */
        border: 1px solid #ccc; /* 용지 테두리 (선택 사항) */
        box-sizing: border-box; /* padding과 border를 width/height에 포함 */
        overflow: hidden; /* 내부 콘텐츠가 넘칠 경우 숨김 (주의: 인쇄 시 문제될 수 있음) */
        /* 필요하다면 overflow: visible; 또는 overflow: auto; 고려 */
    }

    section.a4-page-section { /* 각 section에 이 클래스 추가 또는 section 태그 직접 스타일링 */
        width: 210mm; /* A4 가로 크기 */
        min-height: 297mm; /* A4 세로 최소 크기 (내용에 따라 늘어남) */
        padding: 15mm; /* A4 용지 내부 여백 (상하좌우 동일) */
        margin: 0 auto 30px auto; /* 중앙 정렬 및 다음 페이지와의 간격 */
        background-color: white;
        box-shadow: 0 0 15px rgba(0,0,0,0.15); /* 용지 그림자 효과 */
        border: 1px solid #ccc; /* 용지 테두리 (선택 사항) */
        box-sizing: border-box; /* padding과 border를 width/height에 포함 */
        overflow: hidden; /* 내부 콘텐츠가 넘칠 경우 숨김 (주의: 인쇄 시 문제될 수 있음) */
        /* 필요하다면 overflow: visible; 또는 overflow: auto; 고려 */
    }


    @media screen and (max-width: 1080px) {
        html { font-size:49.8% }
        .main { /* 데스크톱에서는 .main의 역할이 달라질 수 있음. A4 섹션이 직접 크기를 가지므로 */
            max-width: none; /* A4 섹션이 크기를 제어하므로 .main의 max-width는 불필요 */
            margin: 0; /* A4 섹션이 중앙 정렬 */
            padding: 0; /* A4 섹션이 내부 패딩을 가짐 */
        }
        /* 헤더가 fixed일 경우 A4 섹션의 첫 번째 요소가 헤더에 가려지지 않도록 */
        .header + section.a4-page-section:first-of-type {
            /* margin-top: 56px; /* 헤더 높이만큼 (조정 필요) */
            /* 또는 body에 padding-top을 주어 해결 */
        }

        /* body의 flex 관련 스타일 초기화 */
        body {
            background-color: #e0e0e0; /* 페이지 배경 변경 */
            padding-bottom: 30px;
            display: flex; /* A4 용지들을 중앙에 배치하기 위함 */
            flex-direction: column;
            align-items: center;
        }


        section {
            width: 210mm;
            min-height: 297mm; /* 내용이 길면 늘어남 */
            padding: 15mm;     /* A4 내부 여백 */
            margin: 0 auto 30px auto; /* 위아래 간격, 좌우 중앙 */
            box-shadow: 0 0 15px rgba(0,0,0,0.15);
            border: 1px solid #ccc;
            overflow: hidden; /* 내용이 넘칠 경우 처리 (auto 또는 visible 고려) */
            /* 주의: hidden은 인쇄 시 문제를 일으킬 수 있으므로 @media print에서는 visible로 */
        }


    }


    @media screen and (max-width: 640px) {
        .header + .main {margin-top: 56px;width: 100%; padding: 0;}
        .common-btn-wrap { width:auto;display: flex; margin: 4rem 0 2rem 0; gap: 1rem; justify-content: space-between; align-items: center; }
        .survey-question-wrap { margin-top: 1rem; padding:0 }
        .survey-check-list2 { border: 0 none; }
        .question-header { display: none;}
        .question-header2 { border-bottom: 0 none;}
        .question-header2 p.question-tit { font-size: 2rem; margin-top: 2rem; padding: 2rem 1rem;}
        .question-row {border:1px solid #aaa; margin-top: 1rem; flex-wrap:wrap; justify-content: center; gap: 0 1px;}
        .question-row p:not(.question-tit) { border-left: 0 none; flex: none}
        .question-row p.question-tit { font-size: 1.8rem; width: 100%; flex: 0 0 100% !important; background: #f4f4f4;}
        .question-row.type1 p:nth-child(2) label:after { content:'1순위'; margin-left: 0.3rem; }
        .question-row.type1 p:nth-child(3) label:after { content:'2순위'; margin-left: 0.3rem; }
        .question-row.type1 p:nth-child(4) label:after { content:'3순위'; margin-left: 0.3rem; }
        .question-row.type1 p:nth-child(5) label:after { content:'4순위'; margin-left: 0.3rem; }
        .question-row.type1 p:nth-child(6) label:after { content:'5순위'; margin-left: 0.3rem; }
        .question-row.type1 p:nth-child(7) label:after { content:'6순위'; margin-left: 0.3rem; }

        .survey-check-list2 .question-body {flex-direction: column;}
        .survey-check-list2 .question-cate { width: auto; border-left: 4px solid #2792d1; border-right: 0 none; background: #efefef; font-weight: 700;  justify-content: start; padding-left: 10px; font-size: 2.2rem;}
        .survey-check-list2 .question-cate br { display: none;}
        .survey-check-list2 .question-body ~ .question-body { margin-top: 4rem; border-top: 0 none;}

        .question-row.type2 p:nth-child(2) label:after { content:'전혀 아니다'; margin-left: 0.3rem; }
        .question-row.type2 p:nth-child(3) label:after { content:'아니다'; margin-left: 0.3rem; }
        .question-row.type2 p:nth-child(4) label:after { content:'그렇다'; margin-left: 0.3rem; }
        .question-row.type2 p:nth-child(5) label:after { content:'매우 그렇다'; margin-left: 0.3rem; }

        .question-row.type3 { gap: 0;}
        .question-row.type3 ~ .question-row.type3 { margin-top: 1rem; }
        .question-row.type3 p { width: 100%; flex: none; border-top: 0 none; border-left: 1px solid #aaa; }
        .question-row.type3 p.question-tit { /*flex: 1 !important;*/ border-left: 0 none; }

        .question-row.type4 .question-tit ~ p:nth-child(2) label:after { content:'매우 그렇다'; margin-left: 0.3rem; }
        .question-row.type4 .question-tit ~ p:nth-child(3) label:after { content:'그렇다'; margin-left: 0.3rem; }
        .question-row.type4 .question-tit ~ p:nth-child(4) label:after { content:'아니다'; margin-left: 0.3rem; }
        .question-row.type4 .question-tit ~ p:nth-child(5) label:after { content:'전혀 아니다'; margin-left: 0.3rem; }

        .question-row.type4 p:nth-child(1) label:after { content:'매우 그렇다'; margin-left: 0.3rem; }
        .question-row.type4 p:nth-child(2) label:after { content:'그렇다'; margin-left: 0.3rem; }
        .question-row.type4 p:nth-child(3) label:after { content:'아니다'; margin-left: 0.3rem; }
        .question-row.type4 p:nth-child(4) label:after { content:'전혀 아니다'; margin-left: 0.3rem; }


        .question-row.type5 .question-row p { flex: none !important;}
        .question-row.type5 > .question-row-group { padding: 0 2rem 1rem 2rem; border-left: 0 none; flex: 0 0 100% }
        .question-row.type5 > .question-row-group .question-row-group .question-row { margin-top: 0 !important; border-left: 0 none; border-right: 0 none; border-bottom:0 none; }

        .question-row .question-body .question-row p:not(:first-child) { border-left: 0 none;}
        .question-col-group { flex-direction: column;}
        .question-row .question-body .question-row { border-right:0 none; border-bottom: 0 none; border-left: 0 none;}
        :not(.question-col) > .question-tit + .question-row-group { border-left: 0 none;}


        .question-row.type6 .question-tit ~ p:nth-child(2) label:after { content:'매우 그렇다'; margin-left: 0.3rem; }
        .question-row.type6 .question-tit ~ p:nth-child(3) label:after { content:'그렇다'; margin-left: 0.3rem; }
        .question-row.type6 .question-tit ~ p:nth-child(4) label:after { content:'아니다'; margin-left: 0.3rem; }
        .question-row.type6 .question-tit ~ p:nth-child(5) label:after { content:'매우 아니다'; margin-left: 0.3rem; }

        .question-body .survey-check-list1 { border:1px solid #aaa; margin-top: 1rem;}

        .icon-box1 { zoom: 0.8;}


        .inner-table th, .common-table td { padding:5px;}

        /* body의 flex 관련 스타일 초기화 */
        body {
            width: 100%;
            background-color: #e0e0e0; /* 페이지 배경 변경 */
            padding-bottom: 30px;
            display: flex; /* A4 용지들을 중앙에 배치하기 위함 */
            flex-direction: column;
            align-items: center;
        }
        .wrapper{width: 100%;}
        .login-wrap {width:100%;  align-content: center;}
        section {
            width: auto; /* 너비 자동 */
            min-height: auto; /* 높이 자동 */
            padding: 1rem; /* 모바일용 내부 패딩 */
            margin: 0 0 20px 0; /* 모바일용 마진 */
            box-shadow: none;
            border: none; /* 또는 모바일용 테두리 */
            overflow: visible; /* 내용 잘림 방지 */
            box-shadow: 0 0 15px rgba(0,0,0,0.15); /* 용지 그림자 효과 */
            border: 2px solid #ccc; /* 용지 테두리 (선택 사항) */
        }

    }

    @media screen and (max-width: 800px) {
        html { font-size:46% }
        .intro-wrap,
        .main { margin-top: 0; padding: 2rem}
        .survey-question-wrap { margin-top: 1rem;padding: 1rem; }
        .login-wrap { widht:100%;padding: 6rem 2rem;align-content: center;}
        .survey-list-header,
        .survey-list-item {gap: 1rem; }
        .header-logo {zoom: 0.9;}
        .common-check1 i { zoom: 0.8;line-height: 1.8;}
        .common-table-wrap table { white-space: nowrap;}

        /* body의 flex 관련 스타일 초기화 */
        body {
            /*background-color: #e0e0e0; !* 페이지 배경 변경 *!*/
            background-color: #f5f5f5; /* 페이지 배경 변경 */

            padding-bottom: 30px;
            display: flex; /* A4 용지들을 중앙에 배치하기 위함 */
            flex-direction: column;
            align-items: center;
        }
        .common-btn-wrap { width:auto;display: flex; margin: 4rem 0 2rem 0; gap: 1rem; justify-content: space-between; align-items: center; }
        section {
            width: auto; /* 너비 자동 */
            min-height: auto; /* 높이 자동 */
            padding: 2rem; /* 모바일용 내부 패딩 */
            margin: 0 0 20px 0; /* 모바일용 마진 */
            box-shadow: none;
            border: none; /* 또는 모바일용 테두리 */
            overflow: visible; /* 내용 잘림 방지 */
            box-shadow: 0 0 15px rgba(0,0,0,0.15); /* 용지 그림자 효과 */
            border: 2px solid #ccc; /* 용지 테두리 (선택 사항) */
        }


    }