/* 공통 */
:root {
    /* Primary */
    --color-primary: #009AFF;
    --color-primary-hover: #008AE6;
    --color-primary-active: #0076C7;

    /* Sub Primary */
    --color-sub-primary: #66C2FF;
    --color-sub-primary-hover: #55B9FF;
    --color-sub-primary-active: #3FAAFF;

    --color-sub-1: #5BB9E6;
    --color-sub-1-hover: #4EADDA;
    --color-sub-1-active: #4199C6;

    /* Cancel / Danger (Pastel Red) */
    --color-danger: #D85B5B;
    /* 메인 - 확실히 존재감 */
    --color-danger-hover: #E86F6F;
    /* hover */
    --color-danger-active: #C74747;
    /* active */

    /* Text */
    --color-text-primary: #1F2937;
    /* 거의 블랙 */
    --color-text-muted: #6B7280;

    /* Background */
    --color-bg-default: #FFFFFF;
    --color-bg-soft: #F5F9FC;
    /* 하늘톤 배경 */


    --color-gray-900: #111827;
    --color-gray-800: #1F2937;
    --color-gray-700: #374151;
    --color-gray-600: #4B5563;
    --color-gray-500: #6B7280;
    --color-gray-400: #9CA3AF;
    --color-gray-300: #D1D5DB;
    --color-gray-200: #E5E7EB;
    --color-gray-100: #F3F4F6;
    --color-gray-50: #F9FAFB;
}

/* [공통] 전체컨테이너, btn 등 */
.container {
    padding: 0;
    max-width: 100%;
}

.btn.btn-primary {
    background-color: var(--color-sub-primary);
    border-color: var(--color-sub-primary);
    border-radius: 0.625rem;
}

.btn.btn-primary:hover {
    background-color: var(--color-sub-primary-hover);
    border-color: var(--color-sub-primary-hover);
    border-radius: 0.625rem;
}

.btn.btn-danger {
    background-color: var(--color-gray-500);
    border-color: var(--color-gray-500);
    border-radius: 0.625rem;
}

.btn.btn-danger:hover {
    background-color: var(--color-gray-600);
    border-color: var(--color-gray-600);
    border-radius: 0.625rem;
}

/* // [공통] 전체컨테이너, btn 등 */

/* [공통] */
.input-item .answer-box-tit{
    font-size: 1.6rem;
    flex-shrink: 0;
    margin-right: 0.5rem;
}
.input-item .text-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #333;
    font-size: 1.76rem;
}

.input-item input[type="checkbox"]:checked+label::after {
    appearance: none;
    z-index: -9999;
    top: -99999px;
    left: -99999px;
}

.input-item .text-label .textBox {
    font-size: 1.76rem;
}

.text-finger {
    margin: 0.32rem 0 0 0;
    font-size: 1.12rem;
}

.text-noti {
    font-size: 1.76em;
    font-weight: bold;
    margin-bottom: 1.2rem;
    margin-top: 1.8rem;
}

/* // [공통] */

/* [공통] 문항 영역 */
.container.container-question {
    width: 100%;
    padding: 0 1rem;
    max-width: 1024px;
}

.container.container-question .cancer-tit {
    font-size: 1.44rem;
    /* font-weight: bold; */
}

.mode-pc .container.container-question .cancer-tit {
    width: 100%;
}

/* // [공통] 문항 영역 */

/* [공통] 보기선택하는 문항 케이스 quesType01: */
.quesType01 .quesType01-ques {
    font-size: 1.76em;
    /* font-weight: bold; */
    font-weight: bold;
    border-bottom: 1px solid var(--color-gray-300);
    padding-bottom: 0.8rem;
    margin-bottom: 1.6rem;
    width: 100%;
}

.mode-pc .quesType01 .quesType01-ques {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

/* 한 화면에 문항이 여러 개(답변 그룹 2개 이상)이면 문항 제목 밑줄 제거 (단일 문항만 유지) */
/* multi-question 클래스는 site.js InitInterviewPage에서 interview-item별로 부여 */
.multi-question .quesType01 .quesType01-ques,
.multi-question .quesType02 .quesType02-ques {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.quesType01 .selectBox-list {
    display: flex;
    margin-top: 0.8rem;
    gap: 0.875rem
}

.mode-pc .quesType01 .selectBox-list.smoke-question {
    /* 건강검진 > 흡연 4-1,5-1번만 적용 */
    flex-direction: column;
    align-items: flex-start;
}

.mode-mobile .quesType01 .selectBox-list-inline .input-item {
    width: auto;
}

.quesType01 .selectBox-list-inline {
    display: flex;
    margin-top: 0.8rem;
    gap: 0.875rem
}

.mode-mobile .quesType01 .input-item {
    width: 100%;
}

.quesType01 .selectBox-list-full {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0.8rem;
    gap: 0.875rem
}

.quesType01 .selectBox-list-full .input-item {
    width: 100%;
}

/* // [공통] 보기선택하는 문항 케이스 quesType01 */

/* [공통] 진단받은적없음 체크버튼과 함께 질병마다 선택 케이스 quesType02 */
.quesType02 .quesType02-ques {
    font-size: 1.76em;
    /*font-weight: bold; */
    font-weight: bold;
    border-bottom: 1px solid var(--color-gray-300);
    padding-bottom: 0.8rem;
    margin-bottom: 1.6rem;
    width: 100%;
}

.quesType02 .btn-radio-check {
    width: 100%;
}

.quesType02 .selectBox-list {
    display: flex;
    margin-top: 0.8rem;
    gap: 0.875rem
}

.mode-mobile .quesType02 .input-item {
    width: 100%;
}

.selectBox-tit-list {
    justify-content: center;
}

.selectBox-tit-list .diagnosis-label {
    font-size: 1.76em;
}

.selectBox-tit-list .selectBox-tit-btnWrap {
    display: flex;
    align-items: center;
    flex: 1;
}

.selectBox-tit-list .selectBox-tit-btnWrap .input-item {
    width: 100%;
}

/* // [공통] 진단받은적없음 체크버튼과 함께 질병마다 선택 케이스 quesType02 */

/* [공통] 상단, 하단 */
.title-bar {
    width: 100%;
    margin: 0;
    border-radius: 0;
    height: auto;
    padding: 0.625rem;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
}

.title-bar-text {
    display: block;
    width: 100%;
    padding: 0 80px;
}

@media (max-width: 767px) {
    #title-bar-patient-name {
        display: none !important;
    }
}

.sub-title-bar {
    max-width: 1024px;
    padding: 0.8rem;
    justify-content: start;
    font-size: 1.44rem;
    height: auto;
}

.nav-text {
    margin-top: 4rem;
}

.wrap-interview-partial-nav {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    padding: 20px 0;
}

.interview-partial-nav {
    max-width: initial;
    width: 100%;
    padding: 0;
    gap: 0;
    max-width: 1200px;
    font-size: 1.76em;
}

.interview-partial-nav .btn.nav-prev-btn {
    width: 30%;
    border-radius: 0;
    background-color: #939597;
    border-color: #939597;
    padding: 1rem 0;
    min-height: 4rem;
}

.interview-partial-nav .btn.nav-next-btn {
    background-color: #93C1DE;
    border-color: #93C1DE;
}

.interview-partial-nav .btn.nav-save-btn {
    background-color: #9F5C70;
    border-color: #9F5C70;
}

.interview-partial-nav .btn.nav-next-btn,
.interview-partial-nav .btn.nav-save-btn {
    width: 70%;
    border-radius: 0;
    padding: 1rem 0;
    min-height: 4rem;
}

.wrap-interview-partial-nav .interview-partial-nav {
    gap: 1rem;
}

.wrap-interview-partial-nav .interview-partial-nav .btn.nav-prev-btn,
.wrap-interview-partial-nav .interview-partial-nav .btn.nav-next-btn,
.wrap-interview-partial-nav .interview-partial-nav .btn.nav-save-btn {
    border-radius: 1rem;
}

.wrap-interview-partial-nav .interview-partial-nav .btn.nav-prev-btn {
    flex: 3 1 0;
}

.wrap-interview-partial-nav .interview-partial-nav .btn.nav-next-btn,
.wrap-interview-partial-nav .interview-partial-nav .btn.nav-save-btn {
    flex: 7 1 0;
}

/* // [공통] 상단, 하단 */

/* [공통] 체크버튼 */
.selectBox .btn-check+label {
    border: 1px solid var(--color-gray-400);
    text-align: center;
    color: #000;
    background-color: var(--color-gray-50);
    border-radius: 1rem;
    cursor: pointer;
    transition: all .2s ease-in-out;
    user-select: none;
    min-width: 100%;
    white-space: normal;
    width: 100%;
    height: 100%;
    padding: 12px 8px;
    font-size: 1.76em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.selectBox .btn-check+label:hover {
    border: 1px solid var(--color-gray-400);
    background-color: var(--color-gray-200);
}

.selectBox .btn-check:checked+label {
    border: 1px solid var(--color-primary);
    color: #fff;
    background-color: var(--color-primary);
}

.mode-mobile .selectBox.type-mini .item-container {
    /* type-mini는 선택시 나오는 문항 케이스 */
    text-align: left;
    align-items: center;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.selectBox.type-mini .btn-check+label {
    border: 1px solid #cccccc;
    text-align: center;
    color: #000;
    background-color: #f2f2f2;
    border-radius: 1rem;
    cursor: pointer;
    transition: all .2s ease-in-out;
    user-select: none;
    display: inline-block;
    /* 필요 시 추가 */
    min-width: 100%;
    white-space: normal;
    width: 100%;
    padding: 12px 8px 12px 62px;
    font-size: 1.76em;
    border-radius: 1rem;
}

.selectBox.type-mini .btn-check+label:hover {
    background-color: #e6e6e6;
}

.selectBox.type-mini .btn-check:checked+label {
    border: 1px solid var(--color-sub-1);
    color: #fff;
    background-color: var(--color-sub-1);
}

/* // [공통] 체크버튼 */

/* [공통] 셀렉트박스 형식 */
.answer-select {
    border: 1px solid var(--color-gray-400);
    border-radius: 1rem;
    padding: 8px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.answer-select-text {
    font-size: 1.76em;
}

.answer-select-text.front-text {
    margin-right: 0.64rem;
    white-space: pre-line;
    text-align: left;
}

.answer-select-text.end-text {
    margin-left: 0.32rem;
}

.selectCountBox .answer-select select.answer-select-box {
    font-size: 1.76em;
    width: auto;
    min-height: 2.4rem;
    min-width: 8rem;
    vertical-align: middle;
    box-sizing: border-box;
}

.selectCountBox .answer-select select.answer-select-box.select-small {
    min-width: 4rem;
}

.answer-select.align-side .answer-select-text.front-text {
    flex: 1;
}

/* 글자 크기 조절용 범용 클래스 */
.answer-select.select-font-sm .answer-select-text,
.answer-select.select-font-sm select.answer-select-box {
    font-size: 1.2rem !important;
}

.answer-select.select-font-md .answer-select-text,
.answer-select.select-font-md select.answer-select-box {
    font-size: 1.4rem !important;
}

.answer-select.select-font-lg .answer-select-text,
.answer-select.select-font-lg select.answer-select-box {
    font-size: 1.6rem !important;
}

.answer-select.select-font-xl .answer-select-text,
.answer-select.select-font-xl select.answer-select-box {
    font-size: 1.8rem !important;
}

.answer-select.select-font-xxl .answer-select-text,
.answer-select.select-font-xxl select.answer-select-box {
    font-size: 2.0rem !important;
}

/* //[공통] 셀렉트박스 형식 */

/* [공통] TextArea */
textarea.form-control {
    font-size: 1.76em;
}

/* //[공통] TextArea */

/* GNB */
.tts-sheet {
    padding: 0;
}

.tts-sheet__header {
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color-primary);
}

.tts-sheet__header h2 {
    font-size: 1.44rem;
    text-align: left;
    color: #fff;
    font-weight: bold;
    padding: 0;
    margin: 0;
}

.tts-sheet__header .btn.icon-btn {
    padding: 0;
    position: relative;
    right: -0.5rem;
}

.tts-sheet__header .btn.icon-btn .bi.bi-x {
    font-size: 2.4rem;
    line-height: 1;
    color: #fff;
}

.tts-sheet__section {
    display: flex;
    flex-direction: column;
    align-items: start;
    padding: 1rem 1.5rem;
}

.tts-sheet__section .tts-label {
    margin-top: 0.5rem;
    font-size: 1.28rem;
}

.tts-sheet__section .tts-toggle-group {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.tts-sheet__section .tts-toggle-group .btn {
    width: 100%;
    height: 5.12rem;
    border: 1px solid var(--color-gray-400);
    border-radius: 0.5rem;
    transition: background-color 0.2s, color 0.2s;
    font-weight: 600;
    cursor: pointer;
    font-size: 1.44rem;
}

.tts-sheet__section .tts-toggle-group .btn.active {
    background-color: var(--color-primary-active);
    color: white;
    border-color: var(--color-primary-active);
}

.tts-sheet__section .tts-progress {
    width: 100%;
    text-align: center;
}

.tts-sheet__section .tts-rate-bar {
    width: 100%;
    margin: 0.5rem auto 0;
    padding: 0.5rem 0;
}

.tts-sheet__section .tts-scale {
    position: relative;
    width: 94%;
    height: 20px;
    margin: 0.25rem auto 0;
}

.tts-sheet__section .tts-scale>span {
    position: absolute;
    transform: translateX(-50%);
    font-size: 1.12rem;
    color: var(--color-gray-600);
    display: block;
    width: 1rem;
}

.tts-sheet__section .tts-scale>span:nth-child(1) {
    left: 0;
}

.tts-sheet__section .tts-scale>span:nth-child(2) {
    left: 25%;
}

.tts-sheet__section .tts-scale>span:nth-child(3) {
    left: 50%;
}

.tts-sheet__section .tts-scale>span:nth-child(4) {
    left: 75%;
}

.tts-sheet__section .tts-scale>span:nth-child(5) {
    left: 100%;
}

.tts-sheet__section .tts-progress {
    font-size: 1.44rem;
    padding-top: 1rem;
}

.tts-sheet__footer .btn.btn-danger {
    font-size: 1.28rem;
    padding: 0.8rem 1.12rem;
    font-weight: bold;
}

.tts-sheet__footer .btn.btn-primary {
    font-size: 1.28rem;
    padding: 0.8rem 1.12rem;
    font-weight: bold;
}

/* // GNB */


/* PC전용 공통 UI 그리드 설정 클래스 */
/* n줄 타입 */
.flex-1>* {
    flex: 0 0 100%;
}

.flex-2>* {
    flex: 0 0 calc(50% - 0.5rem);
}

.flex-3>* {
    flex: 0 0 calc(33.333% - 0.67rem);
}

.flex-4>* {
    flex: 0 0 calc(25% - 0.75rem);
}

/* // 공통 UI 그리드 설정 클래스 */


.item-drink .item-drink-section:first-child {
    margin-top: 0;
}

.item-drink .item-drink-section {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-top: 0.875rem;
}

.page-area {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    line-height: 100%;
    font-size: 1.44rem;
    color: #fff;
}

.page-area>span {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    justify-content: center;
}

.page-area .page-now {
    font-size: 1.76rem;
}


/* 한페이지 내 질문여러개있을때 질문타이틀 */
.text-sub-ques {
    font-size: 1.12rem;
    /* font-weight: 600; */
    border-bottom: 1px solid var(--color-gray-300);
    padding-bottom: 0.4rem;
    margin-bottom: 0.8rem;
}

.grid {
    display: grid;
    gap: 1rem;
    align-items: stretch;
}

.grid-1 {
    grid-template-columns: repeat(1, 1fr);
}

.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid-6 {
    grid-template-columns: repeat(6, 1fr);
}

.grid-8 {
    grid-template-columns: repeat(8, 1fr);
}

/* [grid 유틸] 커스텀 컬럼 비율 */
.grid-\[20-1fr\] { grid-template-columns: 20% 1fr; align-items: center; }
.grid-\[20-1fr\] .diagnosis-label{
    width: 100%;
    text-align: center;
}
.grid-\[20-1fr\] .btn-radio-check input[type="radio"] + label{ padding: 14px 16px 14px 58px;}
/* // [grid 유틸] */

@media (max-width: 1024px) {
    .grid-mo-1 {
        grid-template-columns: repeat(1, 1fr);
    }

    .grid-mo-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-mo-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-mo-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid-mo-6 {
        grid-template-columns: repeat(6, 1fr);
    }

    .grid-mo-8 {
        grid-template-columns: repeat(8, 1fr);
    }

    .grid.mo-grid-full .input-item {
        width: 100%;
    }
}


/* 소제목이 있고 여러문항이 있는케이스 */
.quesType01-section .text-start {
    font-size: 1.28rem;
    font-weight: 600;
    position: relative;
    padding-top: 4px;
}

.quesType01-section .text-start::after {
    content: '';
    width: 1rem;
    height: 0.25rem;
    background-color: black;
    position: absolute;
    top: 0;
    left: 3px;
}

.quesType01 .quesType01-section .selectBox-list {
    margin-top: 10px;
}

.quesType01 .quesType01-section+.quesType01-section {
    margin-top: 2rem;
}

/* // 소제목이 있고 여러문항이 있는케이스 */


/* 영유아 정보입력 부분 */
.info-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.info-line-title {
    font-size: 1.28rem;
}

.info-line-cont.type-flex-column-end {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.info-line-cont.type-flex {
    display: flex;
    gap: 0.875rem;
}

.custom-input-answer .answer-tel-box {
    font-size: 1.28rem;
    text-align: center;
    color: #333;
    border: 1px solid #4F97C2;
    border-radius: 0.625rem;
    padding: 0.75rem 0.625rem;
    background-color: #fff;
    width: 100%;
}

.quesType01 .info-line-cont .selectBox-list-inline {
    margin-top: 0;
}

@media (max-width: 1024px) {
    .info-line {
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        flex-wrap: wrap;
    }

    .info-line .selectCountBox .answer-select select.answer-select-box {
        min-width: 5rem;
    }

    .info-line .selectCountBox .answer-select select.answer-select-box.select-small {
        min-width: 2.5rem;
    }

    .info-line-cont {
        margin-top: 0.95rem;
    }

    .info-line-cont.type-flex {
        flex-wrap: wrap;
    }

    .info-line-cont.type-flex-column-end {
        align-items: flex-start;
    }

    .mo-flex-column {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .selectBox-list-inline.mo-list-inline-full .input-item {
        width: 100%;
    }
}

/* // 영유아 정보입력 부분 */


.text-label-flex-wrap>.text-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.text-label-flex-wrap>.text-label>.textBox {
    flex: 1;
}

#interview-contents {
    padding-bottom: 5rem;
}

.selectBoxScore {
    display: flex;
    align-items: center;
    gap: 1.6rem;
}

.selectBoxScore+.selectBoxScore {
    border-top: 1px solid var(--color-gray-300);
}

.selectBoxScore .selectBoxScore-ques {
    flex: 1;
    width: 100%;
    padding-bottom: 1rem;
}

.selectBoxScore>img {
    flex: 0 1 auto;
    width: 35%;
    max-width: 287px;
}

.selectBox.color-type-red .input-item:nth-child(1) .btn-check+label,
.selectBox.color-type-red .btn-radio-check:nth-child(1) .btn-check+label {
    background-color: #F2DFDC;
}

.selectBox.color-type-red .input-item:nth-child(2) .btn-check+label,
.selectBox.color-type-red .btn-radio-check:nth-child(2) .btn-check+label {
    background-color: #F6EAE9;
}

.selectBox.color-type-red .input-item:nth-child(3) .btn-check+label,
.selectBox.color-type-red .btn-radio-check:nth-child(3) .btn-check+label {
    background-color: #F9F5F1;
}

.selectBox.color-type-red .input-item:nth-child(4) .btn-check+label,
.selectBox.color-type-red .btn-radio-check:nth-child(4) .btn-check+label {
    background-color: #FEFAFC;
}

.selectBox.color-type-red .input-item:nth-child(1) .btn-check:checked+label,
.selectBox.color-type-red .input-item:nth-child(2) .btn-check:checked+label,
.selectBox.color-type-red .input-item:nth-child(3) .btn-check:checked+label,
.selectBox.color-type-red .input-item:nth-child(4) .btn-check:checked+label,
.selectBox.color-type-red .btn-radio-check:nth-child(1) .btn-check:checked+label,
.selectBox.color-type-red .btn-radio-check:nth-child(2) .btn-check:checked+label,
.selectBox.color-type-red .btn-radio-check:nth-child(3) .btn-check:checked+label,
.selectBox.color-type-red .btn-radio-check:nth-child(4) .btn-check:checked+label {
    background-color: var(--color-primary);
}

/* 영유아 발달선별검사(24~26개월) 버튼 점수 가이드 */
.selectBoxScore.selectBoxScore-guide {
    padding: 20px 0;
}

.selectBoxScore.selectBoxScore-guide>.selectBox {
    flex: 1;
    width: 100%;
}

.selectBoxScore.selectBoxScore-guide.fixed {
    position: fixed;
    top: 0;
    background-color: #fff;
    z-index: 999;
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.25);
}

.selectBoxScore.selectBoxScore-guide .selectBox .input-item {
    display: table;
    height: 3.52rem;
}

.selectBoxScore.selectBoxScore-guide .selectBox .input-item .btn-check+label {
    cursor: initial;
    padding: 0;
    line-height: 1.2;
    display: table-cell;
    vertical-align: middle;
    font-size: 1.44rem;
}

.selectBoxScore.selectBoxScore-guide .selectBoxScore-guide-txt {
    font-size: 1.28rem;
    position: relative;
    top: -0.04rem;
}

/* // 영유아 발달선별검사(24~26개월) 버튼 점수 가이드 */

/* 영유아 발달 문항 가로 배치 타입 (이미지 없는 인지, 언어 등 문항용) */
.selectBoxScore-guide-txt {
    font-weight: bold;
}

.selectBoxScore-row {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--color-gray-300);
}

.selectBoxScore-row:last-child {
    border-bottom: none;
}

.selectBoxScore-row .selectBoxScore-row-ques {
    flex: 1;
}

.selectBoxScore-row .selectBoxScore-row-ques .text-noti {
    margin: 0 !important;
}

.selectBoxScore-row .selectBoxScore-row-ans {
    flex: 0 0 auto;
    width: 380px;
    /* 4개 버튼 충분한 너비 */
}

.selectBoxScore-row .selectBoxScore-row-ans .selectBox {
    margin-top: 0 !important;
}

@media (max-width: 1024px) {
    .selectBoxScore-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.8rem;
    }

    .selectBoxScore-row .selectBoxScore-row-ans {
        width: 100%;
    }
}

/* [btn-normal-check] 커스텀 체크박스 */
.btn-normal-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-normal-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1.4rem;
    height: 1.4rem;
    border: 1.5px solid var(--color-gray-400);
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.btn-normal-check input[type="checkbox"]:checked+label {
    background-color: initial;
    border-color: initial;
    color: var(--color-text-primary);
}

.btn-normal-check input[type="checkbox"]:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-normal-check input[type="checkbox"]::after {
    content: '';
    position: absolute;
    display: none;
    left: 50%;
    top: 50%;
    width: 0.35rem;
    height: 0.65rem;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: translate(-50%, -50%) rotate(45deg);
}

.btn-normal-check input[type="checkbox"]:checked::after {
    display: block;
}

.btn-normal-check label {
    font-size: 1.28rem;
    color: var(--color-text-primary);
    cursor: pointer;
    user-select: none;
    margin: 0;
}

.btn-normal-check input[type="checkbox"]:checked+label::after {
    display: none;
}

/* // [btn-normal-check] 커스텀 체크박스 */

/* [bicard] 신체계측 정보 카드 */
.bicard {
    border: 1.5px solid var(--color-gray-200);
    border-radius: 12px;
    overflow: hidden;
    background-color: #fff;
    margin-top: 1.2rem;
}

.bicard-row {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1rem;
    border-bottom: 1px solid var(--color-gray-100);
}

.bicard-row:last-child {
    border-bottom: none;
}

.bicard-label {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--color-gray-700);
    min-width: 13rem;
    flex-shrink: 0;
    padding-right: 1rem;
    border-right: 2px solid var(--color-gray-200);
}

.bicard-value {
    font-size: 1.6rem;
    color: var(--color-text-primary);
    flex: 1;
    text-align: center;
}

.bicard-input {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-size: 1.6rem;
    flex: 1;
}

.bicard-note {
    font-size: 1.4rem;
    color: var(--color-text-muted);
    padding: 0.5rem 1.4rem;
    margin: 0;
    background-color: var(--color-gray-50);
    border-bottom: 1px solid var(--color-gray-100);
}
.mo-only{
    display: none;
}

@media (max-width: 767px) {
    .bicard-label {
        min-width: 9rem;
        letter-spacing: -0.04em;
    }
}

/* // [bicard] 신체계측 정보 카드 */

/* 암검진 애니메이션 */
@keyframes itemExitLeft {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-20px);
    }
}

@keyframes itemExitRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(20px);
    }
}

@keyframes itemEnterRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes itemEnterLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

#interview-contents .item-exit-next {
    animation: itemExitLeft 0.5s ease forwards;
    pointer-events: none;
}

#interview-contents .item-exit-prev {
    animation: itemExitRight 0.5s ease forwards;
    pointer-events: none;
}

#interview-contents .item-enter-next {
    animation: itemEnterRight 0.5s ease forwards;
}

#interview-contents .item-enter-prev {
    animation: itemEnterLeft 0.5s ease forwards;
}

/* // 문진 페이지 전환 애니메이션 */


@media (max-width: 767px) {
    .selectBox .btn-check+label {
        padding: 0.8rem 0.4rem;
        letter-spacing: -0.05rem;
    }

    .answer-select {
        padding: 0.64rem 0.4rem;
    }

    .answer-select-text {
        font-size: 1.5em;
    }

    .mo-only{
        display: block;
    }

}