@charset "utf-8";

.suitability-check {border: 1px solid #d8d8d8; padding: 56px;}

.chat-wrap {width: 100%; font-weight: 400; font-size: 18px; color: #333; display: grid; row-gap: 34px;}
.chat-wrap [class^="chat-msg"] {max-width: 660px; display: grid; column-gap: 40px;}
.chat-wrap [class^="avatar"] {display: block; width: 92px; height: 92px; background-position: center; background-size: contain;}

.chat-wrap .chat-bubble-group {display: grid; row-gap: 14px;}
.chat-wrap .chat-bubble-group .bubble-txt {max-width: 530px; padding: 28px 36px; border: 2px solid; border-radius: 18px; position: relative; box-shadow: 0px 3px 1px 0px rgba(0, 0, 0, 0.08);}
.chat-wrap .chat-bubble-group .right-arrow {display: block; position: absolute; top: 30px;}
.chat-wrap .chat-bubble-group .right-arrow::after, .chat-wrap .chat-bubble-group .right-arrow::before {content: ''; display: block; width: 0; height: 0; position: absolute;}
.chat-wrap .chat-bubble-group .right-arrow::after {border: 22px solid transparent; border-top-width: 0; border-right-width: 0; top: 0;}
.chat-wrap .chat-bubble-group .right-arrow::before {border: 27px solid transparent; border-top-width: 0; border-right-width: 0; top: 0; left: 0; filter: drop-shadow(0 3px 1px rgba(0, 0, 0, 0.08)); }
.chat-wrap .chat-bubble-group .chat-help {font-size: 18px;}

.chat-wrap .chat-msg-user {grid-template-columns: 92px 1fr; margin-right: auto;}
.chat-wrap .chat-msg-user .avatar-user {background-image: url("/resources/common/img/avatar-user.png");}
.chat-wrap .chat-msg-user .bubble-txt {border-color: #d7dfea; background-color: #f7fbff;}
.chat-wrap .chat-msg-user .chat-bubble-group .right-arrow {left: 0; transform: rotate(90deg)}
.chat-wrap .chat-msg-user .chat-bubble-group .right-arrow::after {border-left-color: #f7fbff; left: 2px;}
.chat-wrap .chat-msg-user .chat-bubble-group .right-arrow::before {border-left-color: #d7dfea;}

.chat-wrap .chat-msg-korad {grid-template-columns: 1fr 92px; justify-content: end; margin-left: auto;}
.chat-wrap .chat-msg-korad .avatar-korad {order: 2; background-image: url("/resources/common/img/avatar-korad.png");}
.chat-wrap .chat-msg-korad .bubble-txt {border-color: #d9e7cf; background-color: #f9fef6;}
.chat-wrap .chat-msg-korad .chat-bubble-group .right-arrow {right: 0;}
.chat-wrap .chat-msg-korad .chat-bubble-group .right-arrow::after {border-left-color: #f9fef6; top: 2px;}
.chat-wrap .chat-msg-korad .chat-bubble-group .right-arrow::before {border-left-color: #d9e7cf;}


.suitability-check .diagram-image {margin-top: 48px;}

@media screen and (max-width: 1024px) {
    .suitability-check {padding: 48px;}
    .chat-wrap {font-size: 18px;}

    .chat-wrap .chat-bubble-group .chat-help {font-size: 16px;}
}

@media screen and (max-width: 780px) {
    .suitability-check {padding: 36px;}
    .chat-wrap {font-size: 16px;}
    .chat-wrap [class^="chat-msg"] {column-gap: 30px;}
    .chat-wrap [class^="avatar"] {width: 72px; height: 72px;}
    .chat-wrap .chat-bubble-group .bubble-txt {max-width: 480px; padding: 20px 30px;}
    .chat-wrap .chat-bubble-group .right-arrow {top: 24px;}
    .chat-wrap .chat-bubble-group .right-arrow::after {border: 18px solid transparent; border-top-width: 0; border-right-width: 0;}
    .chat-wrap .chat-bubble-group .right-arrow::before {border: 23px solid transparent; border-top-width: 0; border-right-width: 0;}

    .chat-wrap .chat-bubble-group .chat-help {font-size: 14px;}

    .chat-wrap .chat-msg-user {grid-template-columns: 72px 1fr;}
    .chat-wrap .chat-msg-korad {grid-template-columns: 1fr 72px;}
}

@media screen and (max-width: 480px) {
    .suitability-check {padding: 24px;}
    .chat-wrap [class^="chat-msg"] {column-gap: 20px;}
    .chat-wrap [class^="avatar"] {width: 48px; height: 48px;}
    .chat-wrap .chat-bubble-group .bubble-txt {max-width: 320px; padding: 16px 24px; border-radius: 12px;}
    .chat-wrap .chat-bubble-group .right-arrow {top: 20px;}
    .chat-wrap .chat-bubble-group .right-arrow::after {border: 12px solid transparent; border-top-width: 0; border-right-width: 0;}
    .chat-wrap .chat-bubble-group .right-arrow::before {border: 17px solid transparent; border-top-width: 0; border-right-width: 0;}

    .chat-wrap .chat-msg-user {grid-template-columns: 48px 1fr;}
    .chat-wrap .chat-msg-korad {grid-template-columns: 1fr 48px;}
}