:root {
    --max-width: 562px;

    --bg-gray-f4: #F4F4F4;
    --color-gray-97: #979797;
    --color-dark-2a: #2A2A2A;
    --input-color: #A4A4A4;
    
    --font-size-20 : clamp(16px, calc(20 / var(--inner) * 100vw), 20px);
}
#sub-container {
    padding: clamp(0px, calc(140 / var(--inner) * 100vw), 140px) 0;
    background-color: var(--bg-gray-f4);
    font-family: 'Paperlogy', 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: var(--font-size-20);
    color: var(--color-dark-2a);
}
.sub-wrap {
    margin-top: var(--space-100);
}
.mypage.sub-wrap {
    margin-top: var(--space-50);
}
.layout-sub {
    width: 100%;
    max-width: var(--max-width);
    min-height: 100%;
    margin: 0 auto;
}

/* 회원가입 공통 */
.member input[type="checkbox"] {
    display: none;
}
.member .check-icon {
    width: clamp(20px, calc(27 / var(--inner) * 100vw), 27px);
    height: clamp(20px, calc(27 / var(--inner) * 100vw), 27px);
    border: 1.5px solid var(--input-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: transparent;
    transition: background-color 0.2s, border-color 0.2s;
}
.member .check-icon::after {
    content: "";
    width: clamp(10px, calc(12 / var(--inner) * 100vw), 12px);
    height: clamp(5px, calc(7 / var(--inner) * 100vw), 7px);
    border-left: 2px solid var(--input-color);
    border-bottom: 2px solid var(--input-color);
    transform: rotate(-45deg) translate(1px, -1px);
    transition: border-color 0.2s;
}
.member input:checked ~ .check-icon {
    background-color: var(--color-primary);
    border: 1.5px solid var(--color-primary);
}
.member input:checked ~ .check-icon::after {
    border-color: var(--color-white);
}
.member-btn {
    width: 100%;
    height: clamp(60px, calc(70 / var(--inner) * 100vw), 70px);
    border-radius: 100px;
    background-color: var(--color-primary);
    border: 2px solid var(--color-primary);
    color: var(--color-white);
    text-align: center;
    transition: all 0.3s;
    font-size: var(--font-size-20);
}
.member-btn:hover {
    background-color: transparent;
    color: var(--color-primary);
}
.member .line-btn {
    flex-shrink: 0;
    min-width: clamp(110px, calc(146 / var(--inner) * 100vw), 146px);
    height: clamp(42px, calc(48 / var(--inner) * 100vw), 48px);
    border: 1.5px solid var(--color-primary);
    border-radius: 100px;
    background-color: transparent;
    color: var(--color-primary);
    transition: all 0.3s;
}
.member .line-btn:hover {
    color: var(--color-white);
    background-color: var(--color-primary);
}
.member .input-btn-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-15);
}
.member .input-btn-wrap input {
    flex: 1;
}

/* 회원가입 */
.login * {
    color: var(--color-gray-97);
}
.login .member-btn {
    color: var(--color-white);
}
.login .member-btn:hover {
    color: var(--color-primary)
}
.login .layout-sub,
.signup .layout-sub {
    padding: 0 var(--space-80)
}
.login1 {
    text-align: center;
    margin-bottom: var(--space-60);
}
.login1 .logo {
    width: clamp(250px, calc(350 / var(--inner) * 100vw), 350px);
    margin: 0 auto;
}
.login .logo .fill {
    fill: var(--color-primary);
}
.login2 {
    width: 100%;
}
.login2 .login-form {
    width: 100%;
}
.login2 .input-box {
    margin-bottom: var(--space-20);
}
.login2 .input-box input {
    width: 100%;
    height: clamp(58px, calc(70 / var(--inner) * 100vw), 70px);
    padding: 0 var(--space-45);
    border: 1px solid #aaa;
    border-radius: 100px;
    background-color: transparent;
    color: var(--color-dark-2a);
}
.login2 .input-box input::placeholder {
    color: var(--input-color);
    font-weight: 500;
}
.login2 .auto-login {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    margin: var(--space-15) 0 var(--space-30);
    padding-left: var(--space-45);
    cursor: pointer;
}
.login2 .login-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-30);
    margin-top: var(--space-20);
}
.login2 .login-links a:hover {
    color: var(--color-primary);
}
.login2 .login-links span {
    width: 1px;
    height: 18px;
    background-color: var(--input-color);
}
.login2 .sns-login {
    margin-top: var(--space-60);
    text-align: center;
}
.login2 .sns-login p {
    margin-bottom: var(--space-20);
}
.login2 .sns-list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-30);
}
.login2 .sns-list a {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
    
/* 회원가입 > 약관동의 */
.signup1 {
    text-align: center;
    margin-bottom: var(--space-60);
}
.signup1 .sub-title {
    font-size: var(--font-size-40);
}
.signup2 .agree-list {
    width: 100%;
}
.signup2 .agree-check {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    cursor: pointer;
}
.signup2 .all-check {
    margin-bottom: var(--space-20);
}
.signup2 .agree-item {
    margin-top: var(--space-30);
}
.signup2 .agree-box {
    height: clamp(100px, calc(124 / var(--inner) * 100vw), 124px);
    margin-top: var(--space-12);
    margin-left: clamp(28px, calc(40 / var(--inner) * 100vw), 40px);
    border: 1px solid var(--input-color);
    background-color: transparent;
    overflow-y: auto;
    padding: var(--space-10);
    background-color: var(--color-white);
}
.signup2 .member-btn {
    margin-top: var(--space-65);
}

/* 회원가입 > 정보입력 */
.signup-form .signup1 {
    margin-bottom: var(--space-60);
}
.signup3 .form-list {
    width: 100%;
}
.signup3 .form-row {
    margin-bottom: var(--space-35);
}
.signup3 .form-row label {
    display: block;
    margin-bottom: var(--space-10);
    line-height: 1.2;
}
.signup3 .form-row label span {
    color: var(--color-primary);
}
.signup3 input[type="text"],
.signup3 input[type="password"],
.signup3 input[type="tel"],
.signup3 input[type="email"] {
    width: 100%;
    height: clamp(42px, calc(50 / var(--inner) * 100vw), 50px);
    border: 0;
    border-bottom: 1.5px solid var(--input-color);
    background-color: transparent;
    color: var(--color-dark-2a);
    font-size: var(--font-size-20);
}
.signup3 input::placeholder {
    color: var(--input-color);
}
.signup3 .gender-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-15);
}
.signup3 .gender-box input {
    display: none;
}
.signup3 .gender-box span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: clamp(42px, calc(50 / var(--inner) * 100vw), 50px);
    border: 1.5px solid var(--color-primary);
    border-radius: 100px;
    color: var(--color-primary);
    cursor: pointer;
    transition: all 0.3s;
}
.signup3 .gender-box span:hover,
.signup3 .gender-box input:checked + span {
    background-color: var(--color-primary);
    color: var(--color-white);
}
.signup3 .address-row input + input {
    margin-top: var(--space-20);
}
.signup3 .join-btn {
    margin-top: var(--space-40);
}
@media all and (max-width: 640px) {
    .signup3 .form-row {
        margin-bottom: 30px;
    }
}

/* 비밀번호 찾기 */
.find-password .signup1 {
    margin-bottom: var(--space-50);
}
.find-password-section .find-guide {
    margin-bottom: var(--space-50);
    text-align: center;
}
.find-password-section .find-guide p {
    color: var(--color-gray-97);
    line-height: 1.6;
}
.find-password-section .form-row {
    margin-bottom: var(--space-35);
}
.find-password-section .form-row label {
    display: block;
    margin-bottom: var(--space-10);
}
.find-password-section .form-row label span {
    color: var(--color-primary);
}
.find-password-section input[type="text"],
.find-password-section input[type="password"] {
    width: 100%;
    height: clamp(42px, calc(50 / var(--inner) * 100vw), 50px);
    border: 0;
    border-bottom: 1.5px solid var(--input-color);
    background-color: transparent;
    color: var(--color-dark-2a);
}
.find-password-section input::placeholder {
    color: var(--input-color);
}
.find-password-section .find-btn {
    margin-top: var(--space-50);
}
.find-password-section .find-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-30);
    margin-top: var(--space-25);
}
.find-password-section .find-links span {
    width: 1px;
    height: 18px;
    background-color: var(--input-color);
}
.find-password-section .find-links a {
    color: var(--color-gray-97);
}
.find-password-section .find-links a:hover {
    color: var(--color-primary);
}


.mypage {
    position: relative;
    overflow: hidden;
}

.mypage .mypage-wrap {
    position: relative;
    overflow: hidden;
    width: 100%;
    background: url("/images/sub/mypage-bg.png") no-repeat top center;
    background-size: 100% clamp(335px, calc(532 / var(--inner) * 100vw), 532px);
}
/* 하단 둥근 라인 */
.mypage .mypage-bg {
    position: absolute;
    width: 100%;
    top: 0;
}
.mypage .mypage-bg img {
    width: 100%;
}

.mypage-title,
.mypage-user,
.mypage-point-box,
.mypage-menu {
    position: relative;
    z-index: 3;
}

.mypage-top {
    padding: var(--space-90) var(--space-80) 0 var(--space-80);
}

.mypage-title {
    color: #ffffff;
    font-size: var(--font-size-40);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.mypage-user {
    margin-top: var(--space-90);
    color: #ffffff;
}

.mypage-name {
    font-size: var(--font-size-20);
    font-weight: 500;
    line-height: 1.2;
}

.mypage-name strong {
    font-size: var(--font-size-35);
    font-weight: 500;
}

.mypage-greeting {
    margin-top: var(--space-10);
    font-size: var(--font-size-20);
    font-weight: 500;
}
.mypage-point-box {
    margin-top: var(--space-40);
    padding: var(--space-50) var(--space-40);
    background: #ffffff;
    border-radius: var(--radius-30);
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}
.point-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-20) 0;
    border-bottom: 1.5px solid #c1c1c1;
}
.point-row:first-child {
    padding-top: 0;
}
.point-label {
    display: flex;
    align-items: center;
    gap: 0 var(--space-10);
}

.point-label img {
    width: 23px;
    flex: 0 0 auto;
}
.point-label span {
    color: var(--color-dark-2a);
    font-size: var(--font-size-20);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.03em;
}
.point-row strong {
    color: var(--color-primary);
    font-size: var(--font-size-25);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.03em;
}
.mypage-menu {
    margin-top: var(--space-70);
    background: #f5f5f5;
    border-top: 1.5px solid #c1c1c1;
}
.menu-item {
    border-bottom: 1.5px solid #c1c1c1;
}
.menu-btn {
    position: relative;
    width: 100%;
    height: clamp(60px, calc(75 / var(--inner) * 100vw), 75px);
    padding: 0 var(--space-80);
    border: 0;
    background: transparent;
    color: var(--color-dark-2a);
    font-size: var(--font-size-20);
    font-weight: 500;
    letter-spacing: -0.03em;
    text-align: left;
    cursor: pointer;
}
.menu-btn::after {
    content: "";
    position: absolute;
    right: var(--space-80);
    top: 50%;
    width: clamp(10px, calc(14 / var(--inner) * 100vw), 14px);
    height: clamp(10px, calc(14 / var(--inner) * 100vw), 15px);
    border-top: 1px solid var(--color-dark-2a);
    border-right: 1px solid var(--color-dark-2a);
    transform: translateY(-50%) rotate(45deg);
    transition: 0.3s;
}
.menu-item.active .menu-btn::after {
    transform: translateY(-50%) rotate(135deg);
}
.menu-content {
    display: none;
    padding: var(--space-60) var(--space-80);
    background-color: #ffffff;
}
.menu-item.active .menu-content {
    display: block;
}

/* 개인 정보 수정 */
.my-edit .input-row {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-30);
}
.my-edit .input-row strong {
    flex: 0 0 125px;
    color: var(--color-dark-2a);
    font-size: var(--font-size-20);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.03em;
}
.my-edit .input-flex {
    display: flex;
    align-items: center;
    width: 100%;
    border-bottom: 1px solid var(--input-color);
}
.my-edit .input-box {
    width: 100%;
}
.my-edit .input-box input {
    width: 100%;
    height: clamp(42px, calc(50 / var(--inner) * 100vw), 50px);
    line-height: 1;
    background: transparent;
    border: 0;
    color: var(--input-color);
    font-size: var(--font-size-20);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.03em;
    outline: none;
}
.my-edit .input-box input::placeholder {
    color: var(--input-color);
    font-size: var(--font-size-20);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.03em;
}
/* 전화번호 */
.my-edit .cert-btn {
    flex: 0 0 84px;
    height: clamp(42px, calc(50 / var(--inner) * 100vw), 50px);
    border: 1.5px solid var(--color-primary);
    border-radius: 25px;
    background: #ffffff;
    color: var(--color-primary);
    font-size: var(--font-size-20);
    font-weight: 500;
    transition: all 0.2s ease;
}
.my-edit .cert-btn:hover {
    background: var(--color-primary);
    color: #ffffff;
}
/* 성별 */
.my-edit .gender-row {
    border-bottom: 0;
}
.my-edit .gender-box {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.my-edit .gender-btn {
    flex: 1;
}
.my-edit .gender-btn input {
    display: none;
}
.my-edit .gender-btn span {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    height: clamp(42px, calc(50 / var(--inner) * 100vw), 50px);
    border: 1.5px solid var(--color-primary);
    border-radius: 25px;
    background: #ffffff;
    color: var(--color-primary);
    font-size: var(--font-size-20);
    font-weight: 500;
    transition: all 0.2s ease;
}
.my-edit .gender-btn input:checked + span {
    background: #0052a3;
    color: #fff;
}
@media all and (max-width: 640px) {
    .my-edit .input-row {
        align-items: flex-end;
        margin-bottom: 20px;
    }
    .my-edit .input-row .input-flex {
        flex-wrap: wrap;
    }
    .my-edit .input-row strong {
        flex: 0 0 100%;
    }
    .my-edit .input-row.gender-row {
        flex-wrap: wrap;
        margin-bottom: 40px;
    }
    .my-edit .input-row.gender-row strong {
        margin-bottom: 10px;
    }
}

/* 마이페이지 > 문의하기 */
.my-contact .menu-content {
    padding: var(--space-60) var(--space-80) var(--space-70);
    background-color: #fff;
}
.my-contact .contact-form .form-row:not(:last-of-type) {
    margin-bottom: var(--space-35);
}
.my-contact .contact-form label {
    display: block;
    margin-bottom: var(--space-10);
    color: var(--color-dark-2a);
    line-height: 1.2;
}
.my-contact .contact-form input {
    width: 100%;
    height: clamp(42px, calc(50 / var(--inner) * 100vw), 50px);
    border: 0;
    border-bottom: 1.5px solid var(--input-color);
    background-color: transparent;
    color: var(--color-dark-2a);
}
.my-contact .contact-form input::placeholder {
    color: var(--input-color);
}
.my-contact .contact-form textarea {
    width: 100%;
    height: clamp(200px, calc(300 / var(--inner) * 100vw), 300px);
    padding: var(--space-20);
    border: 1.5px solid var(--input-color);
    background-color: transparent;
    color: var(--color-dark-2a);
    resize: none;
}
.my-contact .contact-form .contact-btn {
    margin-top: var(--space-35);
}

/* 마이페이지 > 포인트 사용 내역 */
.my-auth .menu-content,
.my-point .menu-content {
    padding: var(--space-50) 0 var(--space-60);
    background-color: var(--color-white);
}
.point-history-table-wrap {
    width: 100%;
    overflow-x: auto;
}
.point-history-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    overflow-x: auto;
}
.point-history-table th {
    padding: 0 var(--space-10) var(--space-10);
    border-bottom: 1px solid var(--input-color);
    font-size: var(--font-size-16);
    text-align: center;
    white-space: nowrap;
    position: relative;
    line-height: 1.2;
    font-weight: 500;
}
.point-history-table th:not(:last-of-type):after {
    content:"";
    position: absolute;
    display: block;
    width: 1px;
    height: clamp(15px, calc(20 / var(--inner) * 100vw), 20px);
    right: 0;
    top: 0;
    background-color: #d1d1d1;
}
.point-history-table td {
    height: 50px;
    padding: 0 var(--space-10);
    border-bottom: 1px solid #d1d1d1;
    border-right: 1px solid #d1d1d1;
    color: var(--color-gray-97);
    font-size: var(--font-size-14);
    text-align: center;
    white-space: nowrap;
    line-height: normal;
}
.my-auth .point-history-table td:nth-of-type(3) {
    white-space: normal;
}
.point-history-table td:last-child {
    border-right: 0;
}
.point-history-table tr:last-of-type td {
    border-bottom:0
}
.point-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-20);
    margin-top: var(--space-30);
}
.point-pagination a {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #d0d0d0;
    font-size: 0;
}
.point-pagination a.active {
    background-color: var(--color-primary);
}
@media all and (max-width: 640px) {
.point-history-table {
        table-layout: unset;
    }
}

/* 마이페이지 > 포인트 사용하기 */
.my-coupon .menu-content {
    padding: var(--space-50) var(--space-80);
    background-color: var(--color-white);
}
.my-coupon .coupon-list {
    display: flex;
    flex-direction: column;
}
.my-coupon .coupon-item {
    display: grid;
    grid-template-columns: 110px 1fr 36px;
    align-items: center;
    gap: var(--space-30);
    padding: var(--space-30) 0;
    border-bottom: 1px solid #d1d1d1;
}
.my-coupon .coupon-item:first-child {
    padding-top: 0;
}
.my-coupon .coupon-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.my-coupon .coupon-icon {
    width: clamp(70px, calc(95 / var(--inner) * 100vw), 95px);
    height: clamp(70px, calc(95 / var(--inner) * 100vw), 95px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.my-coupon .coupon-icon img {
    width: 100%
}
.my-coupon .coupon-info .name {
    line-height: 1.3;
    font-size: var(--font-size-18);
}
.my-coupon .coupon-info .amount {
    display: block;
    margin-top: var(--space-5);
    font-size: var(--font-size-30);
    font-weight: 500;
    line-height: 1.1;
}
.my-coupon .coupon-info .period {
    display: block;
    margin-top: var(--space-10);
    color: #b8b8b8;
    font-size: var(--font-size-14);
    line-height: 1.2;
}
.my-coupon .coupon-download {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.my-coupon .coupon-download button {
    width: clamp(15px, calc(21 / var(--inner) * 100vw), 21px);
    border: 0;
    background: transparent;
}
.my-coupon .coupon-download .coupon-down img {
    width: 100%;
}
@media all and (max-width: 640px) {
    .my-coupon .coupon-item {
        grid-template-columns: 70px 1fr 20px;
    }
}

.coupon-code-btn {
    min-width: 84px;
    height: 32px;
    border: 1px solid var(--color-primary);
    border-radius: 999px;
    background: #fff;
    color: var(--color-primary);
    cursor: pointer;
    font-size: var(--font-size-14);
    line-height: 30px;
    padding: 0 12px;
    white-space: nowrap;
}
.coupon-barcode-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
}
.coupon-barcode-dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}
.coupon-barcode-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(92vw, 420px);
    background: #fff;
    border-radius: 20px;
    padding: 28px 20px 20px;
    text-align: center;
}
.coupon-barcode-close {
    position: absolute;
    top: 10px;
    right: 12px;
    border: 0;
    background: transparent;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}
.coupon-barcode-panel h3 {
    margin: 0;
    font-size: var(--font-size-20);
}
.coupon-barcode-panel p {
    margin: 8px 0 12px;
    color: var(--color-gray-97);
}
#couponBarcodeSvg {
    width: 100%;
    max-width: 340px;
    height: 90px;
}
#couponBarcodeFallback {
    padding: 20px 0;
    font-weight: 600;
    letter-spacing: 1px;
}

/* 마이페이지 > 개인 정보 수정 > 주소 */
.my-edit .mypage-address-row {
    display: block;
    margin-bottom: var(--space-35);
}

.my-edit .mypage-address-row > strong {
    display: block;
    margin-bottom: var(--space-10);
    color: var(--color-dark-2a);
    font-size: var(--font-size-20);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

.my-edit .mypage-address-row > strong span {
    color: var(--color-primary);
}

.my-edit .mypage-address-row .address-box {
    width: 100%;
}

.my-edit .mypage-address-row .input-btn-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-15);
}

.my-edit .mypage-address-row .input-btn-wrap input {
    flex: 1;
}

.my-edit .mypage-address-row input[type="text"] {
    width: 100%;
    height: clamp(42px, calc(50 / var(--inner) * 100vw), 50px);
    border: 0;
    border-bottom: 1.5px solid var(--input-color);
    background-color: transparent;
    color: var(--color-dark-2a);
    font-size: var(--font-size-20);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.03em;
    outline: none;
}

.my-edit .mypage-address-row input[type="text"]::placeholder {
    color: var(--input-color);
}

.my-edit .mypage-address-row .address-box > input {
    margin-top: var(--space-20);
}

.my-edit .mypage-address-row .line-btn {
    flex-shrink: 0;
    min-width: clamp(110px, calc(146 / var(--inner) * 100vw), 146px);
    height: clamp(42px, calc(48 / var(--inner) * 100vw), 48px);
    border: 1.5px solid var(--color-primary);
    border-radius: 100px;
    background-color: transparent;
    color: var(--color-primary);
    font-size: var(--font-size-20);
    font-weight: 500;
    transition: all 0.3s;
}

.my-edit .mypage-address-row .line-btn:hover {
    color: var(--color-white);
    background-color: var(--color-primary);
}

@media all and (max-width: 640px) {
    .my-edit .mypage-address-row {
        margin-bottom: 30px;
    }

    .my-edit .mypage-address-row .input-btn-wrap {
        gap: 10px;
    }

    .my-edit .mypage-address-row .line-btn {
        min-width: 120px;
    }
}


/* 마이페이지 - 상담 내역 */
.my-contact-list .qa-item {
    margin-bottom: var(--space-20);
    padding-bottom: var(--space-20);
    border-bottom: 1px solid var(--input-color);
}
.my-contact-list .qa-item:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}
.my-contact-list .qa-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--font-size-16);
}
.my-contact-list .qa-header .status {
    position: relative;
    color: var(--color-gray-97);
}
.my-contact-list .done .qa-header .status {
    color: var(--color-primary);
}
.my-contact-list .qa-wrap {
    margin-top: var(--space-10);
    padding: var(--space-15);
    background-color: var(--bg-gray-f4);
}
.my-contact-list .qa-question {
    display: flex;
    align-items: flex-start;
}
.my-contact-list .done .qa-question {
    padding-bottom: var(--space-20);
    border-bottom: 1px solid var(--color-gray-df);
}
.my-contact-list .qa-answer {
    display: flex;
    align-items: flex-start;
    padding-top: var(--space-20);
    border-top: 1px dashed #d1d1d1
}
.my-contact-list .q-label,
.my-contact-list .a-label {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    margin-right: var(--space-15);
    border-radius: 50%;
    font-size: var(--font-size-14);
    color: var(--color-white);
}
.my-contact-list .q-label {
    background-color: var(--color-primary);
}
.my-contact-list .a-label {    
    background-color: var(--color-dark-2a);
}
.my-contact-list .a-content {
    text-align: left;
}
.my-contact-list .qa-answer .doctor {
    display: block;
    margin-bottom: var(--space-15);
}
.my-contact-list .ready {
    text-align: center;
    font-size: var(--font-size-16);
    color: var(--color-gray-97);
}


/* 페이징 */
.pagination {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pagination .paging-number {
    width: 23px;
    height: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-gray-97);
    margin: 0 3px;
    font-size: var(--font-size-14);
    border-radius: var(--border-radius);
    transition: all 0.3s
}
.pagination .current,
.pagination .paging-number:hover {
    color: var(--color-white);
    font-weight: var(--fw-bold);
    background-color: var(--color-dark-2a);
    border-radius: 50%;;
}
.pagination .paging-prev,
.pagination .paging-next {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.pagination .paging-next {
    margin-left: var(--space-10)
}
.pagination .paging-prev {
    margin-right: var(--space-10)
}
.pagination .paging-prev a:hover,
.pagination .paging-next a:hover {
    opacity: 0.5;
}
.pagination .paging-prev img,
.pagination .paging-next img {
    width: 8px
}
    @media all and (max-width: 1000px) {
       
    }
    @media all and (max-width: 640px) {
     
    }