/* ===========================
   Item Common
=========================== */

.item-market,
.item-detail,
.item-edit-section,
.item-create-section {
    width: 100%;
}


/* ===========================
   Header
=========================== */

.page-header,
.market-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

    .page-header h2,
    .market-header h2 {
        margin: 0;
        font-size: 28px;
    }

    .page-header p,
    .market-header p {
        margin-top: 8px;
        color: #777;
    }


/* ===========================
   Button
=========================== */

.register-button,
.submit-button {
    display: inline-block;
    background: #3cb371;
    color: #fff;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: .2s;
}

    .register-button:hover,
    .submit-button:hover {
        background: #2e9b5f;
    }

.cancel-button,
.back-btn {
    display: inline-block;
    background: #e9ecef;
    color: #333;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    transition: .2s;
}

    .cancel-button:hover,
    .back-btn:hover {
        background: #d6d8db;
    }

.edit-btn {
    display: inline-block;
    background: #3cb371;
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
}


/* ===========================
   Search
=========================== */

.search-box {
    display: flex;
    gap: 12px;
    margin-bottom: 30px;
}

    .search-box input,
    .search-box select {
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 8px;
    }

    .search-box input {
        flex: 1;
    }


/* ===========================
   Item List
=========================== */

.item-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
}

.item-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .08);
    transition: .2s;
}

    .item-card:hover {
        transform: translateY(-4px);
    }

    .item-card img {
        width: 100%;
        height: 220px;
        object-fit: cover;
    }

.item-info {
    padding: 18px;
}

    .item-info h3 {
        margin: 0 0 10px;
    }

.item-price {
    color: #2f9e44;
    font-size: 24px;
    font-weight: bold;
}

.detail-button {
    display: block;
    margin-top: 20px;
    text-align: center;
    background: #3cb371;
    color: white;
    padding: 10px;
    border-radius: 8px;
    text-decoration: none;
}


/* ===========================
   Paging
=========================== */

.paging {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}

    .paging a {
        padding: 10px 15px;
        border: 1px solid #ddd;
        border-radius: 6px;
        text-decoration: none;
        color: #333;
    }

        .paging a.active {
            background: #3cb371;
            color: white;
        }


/* ===========================
   Form
=========================== */

.form-card {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .08);
}

.form-group {
    margin-bottom: 22px;
}

    .form-group label {
        display: block;
        margin-bottom: 8px;
        font-weight: bold;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100%;
        padding: 11px;
        border: 1px solid #ddd;
        border-radius: 8px;
        box-sizing: border-box;
    }

    .form-group textarea {
        resize: vertical;
    }

.form-row {
    display: flex;
    gap: 20px;
}

    .form-row .form-group {
        flex: 1;
    }

.price-input {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .price-input input {
        flex: 1;
    }

.validation-message {
    display: block;
    color: #dc3545;
    margin-top: 6px;
    font-size: 15px;
}

.form-help {
    margin-top: 8px;
    color: #888;
    font-size: 15px;
}

.form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 30px;
}

.action-right {
    display: flex;
    gap: 12px;
}


/* ===========================
   Details
=========================== */

.detail-card {
    display: flex;
    gap: 40px;
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .08);
}

.detail-image {
    flex: 1;
}

    .detail-image img {
        width: 100%;
        border-radius: 10px;
    }

.detail-info {
    flex: 1;
}

.game-tag {
    display: inline-block;
    padding: 6px 12px;
    background: #3cb371;
    color: white;
    border-radius: 20px;
    font-size: 15px;
}

.detail-info h2 {
    margin: 18px 0 10px;
}

.price {
    font-size: 34px;
    color: #2f9e44;
    font-weight: bold;
    margin-bottom: 25px;
}

.info-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
}

    .info-table th {
        width: 120px;
        background: #f8f9fa;
        text-align: left;
        padding: 12px;
    }

    .info-table td {
        padding: 12px;
    }

    .info-table th,
    .info-table td {
        border-bottom: 1px solid #eee;
    }


/* ===========================
   상세 화면 버튼 그룹
=========================== */

.button-group {
    display: flex;
    gap: 12px;
    width: 100%;
    align-items: stretch;
}

    /* a 버튼과 구매 form 자체의 폭을 동일하게 배분 */
    .button-group > a,
    .button-group > form {
        flex: 1;
        min-width: 0;
    }

    /* 링크 버튼 */
    .button-group > a {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        box-sizing: border-box;
    }

    /* 구매 버튼을 감싸는 form */
    .button-group > form {
        display: flex;
        margin: 0;
        padding: 0;
    }

        /* form 내부 submit 버튼을 form 전체 크기로 확장 */
        .button-group > form .submit-button {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            text-align: center;
        }


/* ===========================
   Description
=========================== */

.description-box {
    margin-top: 30px;
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .08);
}

    .description-box h3 {
        margin-bottom: 15px;
    }

    .description-box p {
        line-height: 1.8;
    }


/* ===========================
   Delete
=========================== */

.delete-button {
    display: inline-block;
    padding: 12px 24px;
    background: #dc3545;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    transition: .2s;
}

    .delete-button:hover {
        background: #bb2d3b;
    }


/* =========================================================
   상품 상세 - 판매자 프로필
========================================================= */

.seller-profile-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0 20px;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fafafa;
}


/* 프로필 이미지 영역 */

.seller-profile-image {
    flex-shrink: 0;
}


    /* 실제 프로필 이미지 */

    .seller-profile-image img {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        object-fit: cover;
    }


/* 프로필 사진이 없을 경우 */

.default-profile {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e5e7eb;
    font-size: 19px;
    font-weight: 700;
    color: #444;
}


/* 판매자 정보 */

.seller-profile-info {
    flex: 1;
}


/* 닉네임 + 등급 */

.seller-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}


/* 판매자 닉네임 */

.seller-nickname {
    font-size: 16px;
    font-weight: 700;
    color: #222;
}


/* 상인 등급 */

.merchant-grade {
    padding: 3px 8px;
    border-radius: 12px;
    background: #f1f3f5;
    font-size: 14px;
    font-weight: 600;
    color: #555;
}


/* SAFE 신뢰도 */

.seller-trust {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    font-size: 14px;
    color: #777;
}

    .seller-trust strong {
        color: #333;
        font-weight: 700;
    }


/* ===========================
   Responsive
=========================== */

@media (max-width: 900px) {

    .detail-card {
        flex-direction: column;
    }

    .form-row {
        flex-direction: column;
    }

    .market-header,
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .search-box {
        flex-direction: column;
    }

    .button-group {
        flex-direction: column;
    }

        /* 세로 배치 시에도 버튼 폭 통일 */
        .button-group > a,
        .button-group > form {
            width: 100%;
        }

            .button-group > form .submit-button {
                width: 100%;
            }
}



.item-trade-notice {
    margin-bottom: 18px;
    padding: 13px 16px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
}

    .item-trade-notice.success {
        border: 1px solid #bbf7d0;
        background: #ecfdf5;
        color: #15803d;
    }

    .item-trade-notice.error {
        border: 1px solid #fecaca;
        background: #fff1f1;
        color: #dc2626;
    }

/* =====================================================
   Seller profile link
   ===================================================== */

.seller-profile-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

    .seller-profile-link .seller-profile-row {
        transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    }

    .seller-profile-link:hover .seller-profile-row {
        border-color: #86d7aa;
        box-shadow: 0 6px 18px rgba(60, 179, 113, 0.10);
        transform: translateY(-1px);
    }

.seller-profile-hint {
    display: inline-block;
    margin-top: 5px;
    color: #64748b;
    font-size: 14px;
    font-weight: 600;
}


/* =====================================================
   Purchase request management
   ===================================================== */

.purchase-request-section,
.my-purchase-status-section {
    margin-top: 24px;
    padding: 24px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.04);
}

.purchase-request-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

    .purchase-request-header h3 {
        margin: 0 0 6px;
        color: #1e293b;
        font-size: 19px;
    }

    .purchase-request-header p {
        margin: 0;
        color: #64748b;
        font-size: 15px;
        line-height: 1.55;
    }

.request-count-badge {
    flex-shrink: 0;
    padding: 7px 11px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #15803d;
    font-size: 14px;
    font-weight: 700;
}

.purchase-request-empty {
    padding: 40px 20px;
    border-radius: 10px;
    background: #f8fafc;
    color: #94a3b8;
    text-align: center;
    font-size: 15px;
}

.purchase-request-list {
    display: grid;
    gap: 12px;
}

.purchase-request-card,
.active-trade-card {
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
}

.purchase-request-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.requester-profile-link {
    display: flex;
    align-items: center;
    gap: 13px;
    flex: 1;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

    .requester-profile-link:hover .requester-name-row strong {
        color: #2e9b5f;
    }

.requester-avatar {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 50%;
    background: #ecfdf5;
}

    .requester-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .requester-avatar span {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #3cb371;
        color: #fff;
        font-size: 19px;
        font-weight: 800;
    }

.requester-info {
    min-width: 0;
}

.requester-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

    .requester-name-row strong {
        color: #1e293b;
        font-size: 16px;
        transition: color 0.15s ease;
    }

    .requester-name-row span {
        padding: 4px 8px;
        border-radius: 999px;
        background: #f1f5f9;
        color: #64748b;
        font-size: 14px;
        font-weight: 700;
    }

.requester-trust-row {
    margin-top: 5px;
    color: #64748b;
    font-size: 14px;
}

    .requester-trust-row b {
        margin-left: 5px;
        color: #15803d;
    }

.requester-info small {
    display: block;
    margin-top: 5px;
    color: #94a3b8;
    font-size: 14px;
}

.purchase-request-actions,
.active-trade-actions,
.my-purchase-status-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

    .purchase-request-actions form,
    .active-trade-actions form,
    .my-purchase-status-actions form {
        margin: 0;
    }

.request-accept-btn,
.request-reject-btn,
.request-primary-btn,
.request-secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.request-accept-btn,
.request-primary-btn {
    border: 1px solid #3cb371;
    background: #3cb371;
    color: #fff;
}

    .request-accept-btn:hover,
    .request-primary-btn:hover {
        background: #2e9b5f;
        border-color: #2e9b5f;
    }

.request-reject-btn {
    border: 1px solid #fecaca;
    background: #fff1f1;
    color: #dc2626;
}

    .request-reject-btn:hover {
        background: #fee2e2;
    }

.request-secondary-btn {
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #475569;
}

    .request-secondary-btn:hover {
        background: #f8fafc;
    }

.active-trade-card {
    background: #f8fffb;
    border-color: #bbf7d0;
}

.active-trade-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.active-trade-status-area {
    flex-shrink: 0;
    text-align: right;
}

.trade-progress-label {
    display: block;
    margin-bottom: 5px;
    color: #64748b;
    font-size: 14px;
}

.active-trade-status-area strong {
    color: #15803d;
    font-size: 15px;
}

.active-trade-actions {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #dcfce7;
}


/* =====================================================
   Buyer's current request / trade state
   ===================================================== */

.my-purchase-status-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-color: #bfdbfe;
    background: #f8fbff;
}

.my-purchase-status-copy span {
    display: block;
    margin-bottom: 5px;
    color: #64748b;
    font-size: 14px;
}

.my-purchase-status-copy strong {
    display: block;
    color: #2563eb;
    font-size: 18px;
}

.my-purchase-status-copy p {
    margin: 7px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.55;
}

@media (max-width: 800px) {
    .purchase-request-card,
    .active-trade-info,
    .my-purchase-status-section {
        align-items: stretch;
        flex-direction: column;
    }

    .purchase-request-actions,
    .active-trade-actions,
    .my-purchase-status-actions {
        justify-content: flex-start;
    }

    .active-trade-status-area {
        text-align: left;
    }
}
/* =====================================================
   Item comments
   ===================================================== */

.item-comments-section {
    margin-top: 24px;
    padding: 24px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
}

.item-comments-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

    .item-comments-header h3 {
        margin: 0;
        color: #1f2937;
        font-size: 19px;
    }

    .item-comments-header p {
        margin: 6px 0 0;
        color: #6b7280;
        font-size: 14px;
    }

    .item-comments-header > strong {
        color: #3cb371;
        font-size: 15px;
    }

.item-comment-form {
    margin-bottom: 22px;
    padding: 14px;
    border: 1px solid #dbe4dd;
    border-radius: 10px;
    background: #f8fbf9;
}

    .item-comment-form textarea {
        width: 100%;
        min-height: 84px;
        padding: 12px;
        resize: vertical;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        box-sizing: border-box;
        color: #1f2937;
        font: inherit;
        line-height: 1.55;
        outline: none;
    }

        .item-comment-form textarea:focus {
            border-color: #3cb371;
            box-shadow: 0 0 0 3px rgba(60, 179, 113, 0.12);
        }

    .item-comment-form > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 10px;
    }

    .item-comment-form span {
        color: #9ca3af;
        font-size: 14px;
    }

    .item-comment-form button {
        min-height: 38px;
        padding: 0 17px;
        border: 0;
        border-radius: 8px;
        background: #3cb371;
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
    }

        .item-comment-form button:hover {
            background: #2e9b5f;
        }

.item-comment-list {
    border-top: 1px solid #edf0ee;
}

.item-comment {
    display: flex;
    gap: 12px;
    padding: 18px 2px;
    border-bottom: 1px solid #edf0ee;
}

.item-comment-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 50%;
    background: #eaf8f0;
    color: #2e9b5f;
    font-size: 16px;
    font-weight: 800;
}

.item-comment-body {
    min-width: 0;
    flex: 1;
}

.item-comment-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

    .item-comment-meta > strong {
        color: #374151;
        font-size: 15px;
    }

    .item-comment-meta time {
        margin-left: auto;
        color: #9ca3af;
        font-size: 14px;
    }

.seller-badge {
    padding: 2px 7px;
    border-radius: 10px;
    background: #eaf8f0;
    color: #2e9b5f;
    font-size: 14px;
    font-weight: 700;
}

.item-comment-body p {
    margin: 8px 0 0;
    color: #4b5563;
    font-size: 15px;
    line-height: 1.65;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.item-comment-empty,
.item-comment-login {
    padding: 28px 16px;
    color: #9ca3af;
    font-size: 14px;
    text-align: center;
}

.item-comment-login {
    margin-bottom: 20px;
    border: 1px dashed #d1d5db;
    border-radius: 9px;
    background: #fafafa;
}

    .item-comment-login a {
        color: #2e9b5f;
        font-weight: 700;
    }

.item-comment-message {
    margin-bottom: 14px;
    padding: 11px 13px;
    border-radius: 8px;
    font-size: 14px;
}

    .item-comment-message.error {
        background: #fef2f2;
        color: #dc2626;
    }

    .item-comment-message.success {
        background: #f0fdf4;
        color: #15803d;
    }

.item-comment-thread {
    border-bottom: 1px solid #edf0ee;
}

    .item-comment-thread > .item-comment {
        border-bottom: 0;
    }

.item-reply-toggle {
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #64748b;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

    .item-reply-toggle:hover {
        color: #2e9b5f;
    }

.item-reply-form {
    display: none;
    margin: 0 0 14px 48px;
    padding: 12px;
    border: 1px solid #dbe4dd;
    border-radius: 9px;
    background: #f8fbf9;
}

    .item-reply-form.show {
        display: block;
    }

    .item-reply-form textarea {
        width: 100%;
        min-height: 62px;
        padding: 10px;
        resize: vertical;
        border: 1px solid #d1d5db;
        border-radius: 7px;
        box-sizing: border-box;
        font: inherit;
        line-height: 1.5;
        outline: none;
    }

        .item-reply-form textarea:focus {
            border-color: #3cb371;
            box-shadow: 0 0 0 3px rgba(60, 179, 113, 0.1);
        }

    .item-reply-form > div {
        display: flex;
        justify-content: flex-end;
        gap: 7px;
        margin-top: 8px;
    }

.reply-cancel-btn,
.reply-submit-btn {
    min-height: 33px;
    padding: 0 12px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.reply-cancel-btn {
    border: 1px solid #d1d5db;
    background: #fff;
    color: #6b7280;
}

.reply-submit-btn {
    border: 1px solid #3cb371;
    background: #3cb371;
    color: #fff;
}

.item-reply-list {
    margin: 0 0 10px 48px;
    overflow: hidden;
    border-radius: 9px;
    background: #f8faf9;
}

.item-reply {
    position: relative;
    padding: 14px 14px 14px 34px;
}

    .item-reply:last-child {
        border-bottom: 0;
    }

.item-reply-arrow {
    position: absolute;
    top: 16px;
    left: 12px;
    color: #9ca3af;
    font-size: 16px;
}

@media (max-width: 600px) {
    .item-reply-form,
    .item-reply-list {
        margin-left: 18px;
    }
}

.item-comment-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.item-comment-delete-form {
    display: inline;
    margin: 0;
}

.item-comment-action-btn {
    padding: 0;
    border: 0;
    background: transparent;
    color: #64748b;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

    .item-comment-action-btn:hover {
        color: #2e9b5f;
    }

    .item-comment-action-btn.delete:hover {
        color: #dc2626;
    }

.item-edit-form {
    display: none;
    margin-top: 10px;
    padding: 11px;
    border: 1px solid #dbe4dd;
    border-radius: 8px;
    background: #f8fbf9;
}

    .item-edit-form.show {
        display: block;
    }

    .item-edit-form textarea {
        width: 100%;
        min-height: 70px;
        padding: 10px;
        resize: vertical;
        border: 1px solid #d1d5db;
        border-radius: 7px;
        box-sizing: border-box;
        font: inherit;
        line-height: 1.5;
        outline: none;
    }

        .item-edit-form textarea:focus {
            border-color: #3cb371;
            box-shadow: 0 0 0 3px rgba(60, 179, 113, 0.1);
        }

    .item-edit-form > div {
        display: flex;
        justify-content: flex-end;
        gap: 7px;
        margin-top: 8px;
    }

/* =====================================================
   상품 이미지 업로드 / 보기 방식
   ===================================================== */
.market-toolbar {
    align-items: center;
    flex-wrap: wrap;
}

    .market-toolbar select {
        min-width: 145px;
    }

    .market-toolbar button {
        min-height: 44px;
        padding: 0 22px;
        border: 0;
        border-radius: 8px;
        background: #3cb371;
        color: #fff;
        font-weight: 700;
        cursor: pointer;
    }

.item-card-image {
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: #f1f5f9;
}

    .item-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.item-list-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}

    .item-list-meta span {
        padding: 5px 8px;
        border-radius: 999px;
        background: #f1f5f9;
        color: #64748b;
        font-size: 14px;
    }

.item-list.view-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

    .item-list.view-list .item-card {
        display: grid;
        grid-template-columns: 190px minmax(0, 1fr);
        min-height: 170px;
    }

        .item-list.view-list .item-card:hover {
            transform: translateX(3px);
        }

    .item-list.view-list .item-card-image {
        height: 100%;
        min-height: 170px;
    }

    .item-list.view-list .item-info {
        display: grid;
        grid-template-columns: minmax(180px, 1fr) minmax(140px, auto);
        column-gap: 24px;
        align-content: center;
    }

        .item-list.view-list .item-info h3,
        .item-list.view-list .game-name,
        .item-list.view-list .seller,
        .item-list.view-list .item-list-meta {
            grid-column: 1;
        }

    .item-list.view-list .price,
    .item-list.view-list .detail-button {
        grid-column: 2;
    }

    .item-list.view-list .price {
        grid-row: 1 / span 2;
        align-self: center;
        text-align: right;
    }

    .item-list.view-list .detail-button {
        align-self: end;
        min-width: 130px;
    }

.item-image-upload {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 22px;
    align-items: center;
    padding: 18px;
    border: 1px dashed #b9c8d8;
    border-radius: 12px;
    background: #f8fafc;
}

.item-image-preview-wrap {
    width: 220px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 10px;
    background: #e8eef5;
}

    .item-image-preview-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .item-image-preview-wrap span {
        width: 100%;
        height: 100%;
        display: grid;
        place-items: center;
        color: #7b8794;
        font-size: 15px;
    }

.item-image-upload-copy input[type="file"] {
    padding: 10px;
    background: #fff;
}

@media (max-width: 720px) {
    .item-image-upload,
    .item-list.view-list .item-card {
        grid-template-columns: 1fr;
    }

    .item-image-preview-wrap {
        width: 100%;
        max-width: 360px;
    }

    .item-list.view-list .item-info {
        display: block;
    }

    .item-list.view-list .price {
        text-align: left;
    }
}

/* =====================================================
   Items Index 전용 상품 등록 버튼
   Home의 .register-button 스타일과 충돌 방지
===================================================== */

.item-market-register-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    background: #3cb371;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: .2s;
}

    .item-market-register-button:hover {
        background: #2e9b5f;
        color: #fff;
    }


/* =====================================================
   Items Index 전용 검색 영역
   Home의 .search-box 스타일과 충돌 방지
===================================================== */

.item-market-search {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 30px;
}

    .item-market-search input,
    .item-market-search select {
        min-height: 44px;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 8px;
        box-sizing: border-box;
    }

    .item-market-search input {
        flex: 1;
        min-width: 220px;
    }

    .item-market-search select {
        min-width: 145px;
    }


    /* 검색 버튼 */

    .item-market-search button {
        min-height: 44px;
        padding: 0 22px;
        border: none;
        border-radius: 8px;
        background: #3cb371;
        color: #fff;
        font-weight: 700;
        cursor: pointer;
        transition: .2s;
    }

        .item-market-search button:hover {
            background: #2e9b5f;
        }


/* =====================================================
   반응형
===================================================== */

@media (max-width: 900px) {

    .item-market-search {
        flex-direction: column;
        align-items: stretch;
    }

        .item-market-search input,
        .item-market-search select,
        .item-market-search button {
            width: 100%;
        }
}

/* =========================================================
   DESIGN SYNC - collaborator branch (2026-09-12)
   Base functional styles above are intentionally retained.
   ========================================================= */
 /* ===========================
   Item Common
=========================== */
.item-market,
.item-detail,
.item-edit-section,
.item-create-section {
    width: 100%;
}


/* ===========================
   Header
=========================== */

.page-header,
.market-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

    .page-header h2,
    .market-header h2 {
        margin: 0;
        font-size: 28px;
    }

    .page-header p,
    .market-header p {
        margin-top: 8px;
        color: #777;
    }


/* ===========================
   Button
=========================== */

.register-button,
.submit-button {
    display: inline-block;
    background: #3cb371;
    color: #fff;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: .2s;
}

    .register-button:hover,
    .submit-button:hover {
        background: #2e9b5f;
    }

.cancel-button,
.back-btn {
    display: inline-block;
    background: #e9ecef;
    color: #333;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    transition: .2s;
}

    .cancel-button:hover,
    .back-btn:hover {
        background: #d6d8db;
    }

.edit-btn {
    display: inline-block;
    background: #3cb371;
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
}


/* ===========================
   Search
=========================== */

.search-box {
    display: flex;
    gap: 12px;
    margin-bottom: 30px;
}

    .search-box input,
    .search-box select {
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 8px;
    }

    .search-box input {
        flex: 1;
    }


/* ===========================
   Item List
=========================== */

.item-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.item-card {
    max-width: 260px;
    width: 100%;
    justify-self: center;
}

.item-list.view-list {
    grid-template-columns: 1fr;
}

@media (max-width: 1200px) {
    .item-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .item-list {
        grid-template-columns: 1fr;
    }
}

.item-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .08);
    transition: .2s;
}

    .item-card:hover {
        transform: translateY(-4px);
    }

    .item-card img {
        width: 100%;
        height: 150px;
        object-fit: cover;
    }

/* 리스트 보기: 카드를 가로로 눕혀서 이미지+정보 나란히 (컴팩트) */
.item-list.view-list .item-card {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: none;
    justify-self: stretch;
    padding: 10px 14px;
}

    .item-list.view-list .item-card:hover {
        transform: none;
    }

    .item-list.view-list .item-card img {
        width: 140px;
        height: 140px;
        flex: 0 0 140px;
        object-fit: cover;
        border-radius: 8px;
    }

.item-list.view-list .item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
}

.item-list.view-list .game-name {
    font-size: 14px;
}

.item-list.view-list .item-info h3 {
    margin: 2px 0;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-list.view-list .item-card .price {
    font-size: 18px;
    margin: 2px 0;
}

.item-list.view-list .seller {
    font-size: 14px;
    color: #8a96a7;
    white-space: nowrap;
}

.item-list.view-list .detail-button {
    flex: 0 0 auto;
    align-self: flex-start;
    margin-top: 6px;
    padding: 6px 16px;
    font-size: 15px;
}

@media (max-width: 560px) {
    .item-list.view-list .item-card {
        flex-direction: column;
        align-items: stretch;
    }

        .item-list.view-list .item-card img {
            width: 100%;
            height: 120px;
        }

    .item-list.view-list .item-info {
        flex-direction: column;
        align-items: stretch;
    }
}

.item-info {
    padding: 12px 14px;
}

    .item-info h3 {
        margin: 0 0 8px;
        font-size: 17px;
    }

.item-price {
    color: #2f9e44;
    font-size: 24px;
    font-weight: bold;
}

/* 카드 안의 가격은 상세페이지 큰 가격(.price, 34px)과 분리 */
.item-card .price {
    font-size: 19px;
    margin: 4px 0;
}


.detail-button {
    display: block;
    margin-top: 12px;
    text-align: center;
    background: #3cb371;
    color: white;
    padding: 8px;
    font-size: 15px;
    border-radius: 8px;
    text-decoration: none;
}


/* ===========================
   Paging
=========================== */

.paging {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}

    .paging a {
        padding: 10px 15px;
        border: 1px solid #ddd;
        border-radius: 6px;
        text-decoration: none;
        color: #333;
    }

        .paging a.active {
            background: #3cb371;
            color: white;
        }


/* ===========================
   Form
=========================== */

.form-card {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .08);
}

.form-group {
    margin-bottom: 22px;
}

    .form-group label {
        display: block;
        margin-bottom: 8px;
        font-weight: bold;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100%;
        padding: 11px;
        border: 1px solid #ddd;
        border-radius: 8px;
        box-sizing: border-box;
    }

    .form-group textarea {
        resize: vertical;
    }

.form-row {
    display: flex;
    gap: 20px;
}

    .form-row .form-group {
        flex: 1;
    }

.price-input {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .price-input input {
        flex: 1;
    }

.validation-message {
    display: block;
    color: #dc3545;
    margin-top: 6px;
    font-size: 15px;
}

.form-help {
    margin-top: 8px;
    color: #888;
    font-size: 15px;
}

.form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 30px;
}

.action-right {
    display: flex;
    gap: 12px;
}


/* ===========================
   Details
=========================== */

.detail-card {
    display: flex;
    gap: 40px;
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .08);
}

.detail-image {
    flex: 1;
}

    .detail-image img {
        width: 100%;
        border-radius: 10px;
    }

.detail-info {
    flex: 1;
}

.game-tag {
    display: inline-block;
    padding: 6px 12px;
    background: #3cb371;
    color: white;
    border-radius: 20px;
    font-size: 15px;
}

.detail-info h2 {
    margin: 18px 0 10px;
}

.price {
    font-size: 34px;
    color: #2f9e44;
    font-weight: bold;
    margin-bottom: 25px;
}

.info-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
}

    .info-table th {
        width: 120px;
        background: #f8f9fa;
        text-align: left;
        padding: 12px;
    }

    .info-table td {
        padding: 12px;
    }

    .info-table th,
    .info-table td {
        border-bottom: 1px solid #eee;
    }


/* ===========================
   상세 화면 버튼 그룹
=========================== */

.button-group {
    display: flex;
    gap: 12px;
    width: 100%;
    align-items: stretch;
}

    /* a 버튼과 구매 form 자체의 폭을 동일하게 배분 */
    .button-group > a,
    .button-group > form {
        flex: 1;
        min-width: 0;
    }

    /* 링크 버튼 */
    .button-group > a {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        box-sizing: border-box;
    }

    /* 구매 버튼을 감싸는 form */
    .button-group > form {
        display: flex;
        margin: 0;
        padding: 0;
    }

        /* form 내부 submit 버튼을 form 전체 크기로 확장 */
        .button-group > form .submit-button {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            text-align: center;
        }


/* ===========================
   Description
=========================== */

.description-box {
    margin-top: 30px;
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .08);
}

    .description-box h3 {
        margin-bottom: 15px;
    }

    .description-box p {
        line-height: 1.8;
    }


/* ===========================
   Delete
=========================== */

.delete-button {
    display: inline-block;
    padding: 12px 24px;
    background: #dc3545;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    transition: .2s;
}

    .delete-button:hover {
        background: #bb2d3b;
    }


/* =========================================================
   상품 상세 - 판매자 프로필
========================================================= */

.seller-profile-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0 20px;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fafafa;
}


/* 프로필 이미지 영역 */

.seller-profile-image {
    flex-shrink: 0;
}


    /* 실제 프로필 이미지 */

    .seller-profile-image img {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        object-fit: cover;
    }


/* 프로필 사진이 없을 경우 */

.default-profile {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e5e7eb;
    font-size: 19px;
    font-weight: 700;
    color: #444;
}


/* 판매자 정보 */

.seller-profile-info {
    flex: 1;
}


/* 닉네임 + 등급 */

.seller-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}


/* 판매자 닉네임 */

.seller-nickname {
    font-size: 16px;
    font-weight: 700;
    color: #222;
}


/* 상인 등급 */

.merchant-grade {
    padding: 3px 8px;
    border-radius: 12px;
    background: #f1f3f5;
    font-size: 14px;
    font-weight: 600;
    color: #555;
}


/* SAFE 신뢰도 */

.seller-trust {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    font-size: 14px;
    color: #777;
}

    .seller-trust strong {
        color: #333;
        font-weight: 700;
    }


/* ===========================
   Responsive
=========================== */

@media (max-width: 900px) {

    .detail-card {
        flex-direction: column;
    }

    .form-row {
        flex-direction: column;
    }

    .market-header,
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .search-box {
        flex-direction: column;
    }

    .button-group {
        flex-direction: column;
    }

        /* 세로 배치 시에도 버튼 폭 통일 */
        .button-group > a,
        .button-group > form {
            width: 100%;
        }

            .button-group > form .submit-button {
                width: 100%;
            }
}



.item-trade-notice {
    margin-bottom: 18px;
    padding: 13px 16px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
}

    .item-trade-notice.success {
        border: 1px solid #bbf7d0;
        background: #ecfdf5;
        color: #15803d;
    }

    .item-trade-notice.error {
        border: 1px solid #fecaca;
        background: #fff1f1;
        color: #dc2626;
    }

/* =====================================================
   Seller profile link
   ===================================================== */

.seller-profile-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

    .seller-profile-link .seller-profile-row {
        transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    }

    .seller-profile-link:hover .seller-profile-row {
        border-color: #86d7aa;
        box-shadow: 0 6px 18px rgba(60, 179, 113, 0.10);
        transform: translateY(-1px);
    }

.seller-profile-hint {
    display: inline-block;
    margin-top: 5px;
    color: #64748b;
    font-size: 14px;
    font-weight: 600;
}


/* =====================================================
   Purchase request management
   ===================================================== */

.purchase-request-section,
.my-purchase-status-section {
    margin-top: 24px;
    padding: 24px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.04);
}

.purchase-request-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

    .purchase-request-header h3 {
        margin: 0 0 6px;
        color: #1e293b;
        font-size: 19px;
    }

    .purchase-request-header p {
        margin: 0;
        color: #64748b;
        font-size: 15px;
        line-height: 1.55;
    }

.request-count-badge {
    flex-shrink: 0;
    padding: 7px 11px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #15803d;
    font-size: 14px;
    font-weight: 700;
}

.purchase-request-empty {
    padding: 40px 20px;
    border-radius: 10px;
    background: #f8fafc;
    color: #94a3b8;
    text-align: center;
    font-size: 15px;
}

.purchase-request-list {
    display: grid;
    gap: 12px;
}

.purchase-request-card,
.active-trade-card {
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
}

.purchase-request-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.requester-profile-link {
    display: flex;
    align-items: center;
    gap: 13px;
    flex: 1;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

    .requester-profile-link:hover .requester-name-row strong {
        color: #2e9b5f;
    }

.requester-avatar {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 50%;
    background: #ecfdf5;
}

    .requester-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .requester-avatar span {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #3cb371;
        color: #fff;
        font-size: 19px;
        font-weight: 800;
    }

.requester-info {
    min-width: 0;
}

.requester-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

    .requester-name-row strong {
        color: #1e293b;
        font-size: 16px;
        transition: color 0.15s ease;
    }

    .requester-name-row span {
        padding: 4px 8px;
        border-radius: 999px;
        background: #f1f5f9;
        color: #64748b;
        font-size: 14px;
        font-weight: 700;
    }

.requester-trust-row {
    margin-top: 5px;
    color: #64748b;
    font-size: 14px;
}

    .requester-trust-row b {
        margin-left: 5px;
        color: #15803d;
    }

.requester-info small {
    display: block;
    margin-top: 5px;
    color: #94a3b8;
    font-size: 14px;
}

.purchase-request-actions,
.active-trade-actions,
.my-purchase-status-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

    .purchase-request-actions form,
    .active-trade-actions form,
    .my-purchase-status-actions form {
        margin: 0;
    }

.request-accept-btn,
.request-reject-btn,
.request-primary-btn,
.request-secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.request-accept-btn,
.request-primary-btn {
    border: 1px solid #3cb371;
    background: #3cb371;
    color: #fff;
}

    .request-accept-btn:hover,
    .request-primary-btn:hover {
        background: #2e9b5f;
        border-color: #2e9b5f;
    }

.request-reject-btn {
    border: 1px solid #fecaca;
    background: #fff1f1;
    color: #dc2626;
}

    .request-reject-btn:hover {
        background: #fee2e2;
    }

.request-secondary-btn {
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #475569;
}

    .request-secondary-btn:hover {
        background: #f8fafc;
    }

.active-trade-card {
    background: #f8fffb;
    border-color: #bbf7d0;
}

.active-trade-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.active-trade-status-area {
    flex-shrink: 0;
    text-align: right;
}

.trade-progress-label {
    display: block;
    margin-bottom: 5px;
    color: #64748b;
    font-size: 14px;
}

.active-trade-status-area strong {
    color: #15803d;
    font-size: 15px;
}

.active-trade-actions {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #dcfce7;
}


/* =====================================================
   Buyer's current request / trade state
   ===================================================== */

.my-purchase-status-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-color: #bfdbfe;
    background: #f8fbff;
}

.my-purchase-status-copy span {
    display: block;
    margin-bottom: 5px;
    color: #64748b;
    font-size: 14px;
}

.my-purchase-status-copy strong {
    display: block;
    color: #2563eb;
    font-size: 18px;
}

.my-purchase-status-copy p {
    margin: 7px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.55;
}

@media (max-width: 800px) {
    .purchase-request-card,
    .active-trade-info,
    .my-purchase-status-section {
        align-items: stretch;
        flex-direction: column;
    }

    .purchase-request-actions,
    .active-trade-actions,
    .my-purchase-status-actions {
        justify-content: flex-start;
    }

    .active-trade-status-area {
        text-align: left;
    }
}
/* =====================================================
   Item comments
   ===================================================== */

.item-comments-section {
    margin-top: 24px;
    padding: 24px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
}

.item-comments-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

    .item-comments-header h3 {
        margin: 0;
        color: #1f2937;
        font-size: 19px;
    }

    .item-comments-header p {
        margin: 6px 0 0;
        color: #6b7280;
        font-size: 14px;
    }

    .item-comments-header > strong {
        color: #3cb371;
        font-size: 15px;
    }

.item-comment-form {
    margin-bottom: 22px;
    padding: 14px;
    border: 1px solid #dbe4dd;
    border-radius: 10px;
    background: #f8fbf9;
}

    .item-comment-form textarea {
        width: 100%;
        min-height: 84px;
        padding: 12px;
        resize: vertical;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        box-sizing: border-box;
        color: #1f2937;
        font: inherit;
        line-height: 1.55;
        outline: none;
    }

        .item-comment-form textarea:focus {
            border-color: #3cb371;
            box-shadow: 0 0 0 3px rgba(60, 179, 113, 0.12);
        }

    .item-comment-form > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 10px;
    }

    .item-comment-form span {
        color: #9ca3af;
        font-size: 14px;
    }

    .item-comment-form button {
        min-height: 38px;
        padding: 0 17px;
        border: 0;
        border-radius: 8px;
        background: #3cb371;
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
    }

        .item-comment-form button:hover {
            background: #2e9b5f;
        }

.item-comment-list {
    border-top: 1px solid #edf0ee;
}

.item-comment {
    display: flex;
    gap: 12px;
    padding: 18px 2px;
    border-bottom: 1px solid #edf0ee;
}

.item-comment-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 50%;
    background: #eaf8f0;
    color: #2e9b5f;
    font-size: 16px;
    font-weight: 800;
}

.item-comment-body {
    min-width: 0;
    flex: 1;
}

.item-comment-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

    .item-comment-meta > strong {
        color: #374151;
        font-size: 15px;
    }

    .item-comment-meta time {
        margin-left: auto;
        color: #9ca3af;
        font-size: 14px;
    }

.seller-badge {
    padding: 2px 7px;
    border-radius: 10px;
    background: #eaf8f0;
    color: #2e9b5f;
    font-size: 14px;
    font-weight: 700;
}

.item-comment-body p {
    margin: 8px 0 0;
    color: #4b5563;
    font-size: 15px;
    line-height: 1.65;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.item-comment-empty,
.item-comment-login {
    padding: 28px 16px;
    color: #9ca3af;
    font-size: 14px;
    text-align: center;
}

.item-comment-login {
    margin-bottom: 20px;
    border: 1px dashed #d1d5db;
    border-radius: 9px;
    background: #fafafa;
}

    .item-comment-login a {
        color: #2e9b5f;
        font-weight: 700;
    }

.item-comment-message {
    margin-bottom: 14px;
    padding: 11px 13px;
    border-radius: 8px;
    font-size: 14px;
}

    .item-comment-message.error {
        background: #fef2f2;
        color: #dc2626;
    }

    .item-comment-message.success {
        background: #f0fdf4;
        color: #15803d;
    }

.item-comment-thread {
    border-bottom: 1px solid #edf0ee;
}

    .item-comment-thread > .item-comment {
        border-bottom: 0;
    }

.item-reply-toggle {
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #64748b;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

    .item-reply-toggle:hover {
        color: #2e9b5f;
    }

.item-reply-form {
    display: none;
    margin: 0 0 14px 48px;
    padding: 12px;
    border: 1px solid #dbe4dd;
    border-radius: 9px;
    background: #f8fbf9;
}

    .item-reply-form.show {
        display: block;
    }

    .item-reply-form textarea {
        width: 100%;
        min-height: 62px;
        padding: 10px;
        resize: vertical;
        border: 1px solid #d1d5db;
        border-radius: 7px;
        box-sizing: border-box;
        font: inherit;
        line-height: 1.5;
        outline: none;
    }

        .item-reply-form textarea:focus {
            border-color: #3cb371;
            box-shadow: 0 0 0 3px rgba(60, 179, 113, 0.1);
        }

    .item-reply-form > div {
        display: flex;
        justify-content: flex-end;
        gap: 7px;
        margin-top: 8px;
    }

.reply-cancel-btn,
.reply-submit-btn {
    min-height: 33px;
    padding: 0 12px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.reply-cancel-btn {
    border: 1px solid #d1d5db;
    background: #fff;
    color: #6b7280;
}

.reply-submit-btn {
    border: 1px solid #3cb371;
    background: #3cb371;
    color: #fff;
}

.item-reply-list {
    margin: 0 0 10px 48px;
    overflow: hidden;
    border-radius: 9px;
    background: #f8faf9;
}

.item-reply {
    position: relative;
    padding: 14px 14px 14px 34px;
}

    .item-reply:last-child {
        border-bottom: 0;
    }

.item-reply-arrow {
    position: absolute;
    top: 16px;
    left: 12px;
    color: #9ca3af;
    font-size: 16px;
}

@media (max-width: 600px) {
    .item-reply-form,
    .item-reply-list {
        margin-left: 18px;
    }
}

.item-comment-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.item-comment-delete-form {
    display: inline;
    margin: 0;
}

.item-comment-action-btn {
    padding: 0;
    border: 0;
    background: transparent;
    color: #64748b;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

    .item-comment-action-btn:hover {
        color: #2e9b5f;
    }

    .item-comment-action-btn.delete:hover {
        color: #dc2626;
    }

.item-edit-form {
    display: none;
    margin-top: 10px;
    padding: 11px;
    border: 1px solid #dbe4dd;
    border-radius: 8px;
    background: #f8fbf9;
}

    .item-edit-form.show {
        display: block;
    }

    .item-edit-form textarea {
        width: 100%;
        min-height: 70px;
        padding: 10px;
        resize: vertical;
        border: 1px solid #d1d5db;
        border-radius: 7px;
        box-sizing: border-box;
        font: inherit;
        line-height: 1.5;
        outline: none;
    }

        .item-edit-form textarea:focus {
            border-color: #3cb371;
            box-shadow: 0 0 0 3px rgba(60, 179, 113, 0.1);
        }

    .item-edit-form > div {
        display: flex;
        justify-content: flex-end;
        gap: 7px;
        margin-top: 8px;
    }


/* ===========================
   보기 방식 전환 버튼 (그리드/리스트)
=========================== */
.view-toggle {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin: -6px 0 14px;
}

    .view-toggle button {
        width: 32px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #ddd;
        border-radius: 8px;
        background: #fff;
        color: #667085;
        font-size: 17px;
        cursor: pointer;
    }

        .view-toggle button.active {
            background: #172033;
            border-color: #172033;
            color: #fff;
        }

/* 무협 테마 톤 */
.theme-wuxia .view-toggle button {
    border-color: var(--wx-line);
    background: var(--wx-paper-card);
    color: var(--wx-muted);
}

    .theme-wuxia .view-toggle button.active {
        background: var(--wx-red);
        border-color: var(--wx-red-dark);
        color: #fff;
    }

/* ===========================
   상품 등록 버튼 — 경매 거래 페이지 버튼과 동일한 스타일로 통일
=========================== */
.market-header .register-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 0;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    background: #3cb371;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
    transition: 0.2s;
}

    .market-header .register-button:hover {
        background: #2e9b5f;
        filter: none;
        transform: none;
    }

/* ==========================================================
   2026-09-13 카드형 컴팩트 5열 레이아웃
   - 목록형(view-list)은 기존 디자인 유지
   ========================================================== */
.item-list.view-card {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}

    .item-list.view-card .item-card {
        width: 100%;
        max-width: none;
        min-width: 0;
        justify-self: stretch;
        border-radius: 10px;
    }

    .item-list.view-card .item-card-image {
        height: 125px;
    }

    .item-list.view-card .item-info {
        padding: 10px 11px 11px;
    }

    .item-list.view-card .game-name {
        display: block;
        margin-bottom: 3px;
        font-size: 14px;
    }

    .item-list.view-card .item-info h3 {
        margin: 0 0 5px;
        font-size: 16px;
        line-height: 1.35;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .item-list.view-card .item-card .price {
        margin: 2px 0 5px;
        font-size: 17px;
        line-height: 1.3;
    }

    .item-list.view-card .seller {
        margin: 0;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .item-list.view-card .item-list-meta {
        gap: 4px;
        margin-top: 7px;
    }

        .item-list.view-card .item-list-meta span {
            padding: 3px 6px;
            font-size: 14px;
        }

    .item-list.view-card .detail-button {
        margin-top: 8px;
        padding: 7px 6px;
        border-radius: 7px;
        font-size: 14px;
    }

/* 화면이 좁아질 때만 열 수를 단계적으로 줄임 */
@media (max-width: 1350px) {
    .item-list.view-card {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1050px) {
    .item-list.view-card {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .item-list.view-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .item-list.view-card {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   2026-09-13 디자인 작업본 목록 스타일 호환 동기화
   - 현재 프로젝트의 item-card-image 래퍼 구조에 맞춤
   - 카드형 5열 규칙은 그대로 유지
   ========================================================== */
.item-list.view-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

    .item-list.view-list .item-card {
        display: flex;
        align-items: center;
        gap: 14px;
        width: 100%;
        max-width: none;
        min-height: 0;
        justify-self: stretch;
        padding: 10px 14px;
        overflow: hidden;
    }

        .item-list.view-list .item-card:hover {
            transform: none;
        }

    .item-list.view-list .item-card-image {
        width: 140px;
        height: 140px;
        min-height: 0;
        flex: 0 0 140px;
        margin: 0;
        overflow: hidden;
        border-radius: 8px;
    }

        .item-list.view-list .item-card-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 8px;
        }

    .item-list.view-list .item-info {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0;
    }

    .item-list.view-list .game-name {
        font-size: 14px;
    }

    .item-list.view-list .item-info h3 {
        margin: 2px 0;
        font-size: 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .item-list.view-list .item-card .price {
        margin: 2px 0;
        font-size: 18px;
        text-align: left;
    }

    .item-list.view-list .seller {
        margin: 2px 0;
        color: #8a96a7;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .item-list.view-list .item-list-meta {
        display: flex;
        gap: 5px;
        margin-top: 5px;
    }

        .item-list.view-list .item-list-meta span {
            padding: 3px 6px;
            font-size: 14px;
        }

    .item-list.view-list .detail-button {
        flex: 0 0 auto;
        align-self: flex-start;
        min-width: 0;
        margin-top: 6px;
        padding: 6px 16px;
        font-size: 15px;
    }

@media (max-width: 560px) {
    .item-list.view-list .item-card {
        flex-direction: column;
        align-items: stretch;
    }

    .item-list.view-list .item-card-image {
        width: 100%;
        height: 120px;
        flex-basis: 120px;
    }
}

/* ==========================================================
   2026-09-13 최신 무협풍 테마 우선 적용
   - 기존 기능/5열/리스트 레이아웃 유지
   - 예전 #3cb371 초록 계열보다 theme-wuxia를 우선
   ========================================================== */
.theme-wuxia .item-market,
.theme-wuxia .item-detail,
.theme-wuxia .item-create-section,
.theme-wuxia .item-edit-section {
    color: var(--wx-text);
}

.theme-wuxia .market-header h2,
.theme-wuxia .page-header h2,
.theme-wuxia .detail-info h2 {
    color: var(--wx-text);
    font-family: "Noto Serif KR", serif;
}

.theme-wuxia .market-header p,
.theme-wuxia .page-header p {
    color: var(--wx-muted);
}

.theme-wuxia .item-market-register-button,
.theme-wuxia .submit-button,
.theme-wuxia .edit-btn,
.theme-wuxia .detail-button,
.theme-wuxia .request-primary-btn,
.theme-wuxia .request-accept-btn,
.theme-wuxia .reply-submit-btn {
    border: 1px solid var(--wx-gold) !important;
    border-radius: 5px !important;
    background: linear-gradient(180deg, var(--wx-red), var(--wx-red-dark)) !important;
    color: #fff !important;
    box-shadow: none !important;
    font-family: "Noto Serif KR", serif;
}

    .theme-wuxia .item-market-register-button:hover,
    .theme-wuxia .submit-button:hover,
    .theme-wuxia .edit-btn:hover,
    .theme-wuxia .detail-button:hover,
    .theme-wuxia .request-primary-btn:hover,
    .theme-wuxia .request-accept-btn:hover,
    .theme-wuxia .reply-submit-btn:hover {
        background: var(--wx-red-dark) !important;
        border-color: var(--wx-gold-light) !important;
        filter: none !important;
        transform: none !important;
    }

.theme-wuxia .item-market-search,
.theme-wuxia .search-box,
.theme-wuxia .form-card,
.theme-wuxia .detail-card,
.theme-wuxia .description-box,
.theme-wuxia .seller-profile-row,
.theme-wuxia .item-comments-section,
.theme-wuxia .purchase-request-section,
.theme-wuxia .my-purchase-status-section,
.theme-wuxia .active-trade-card {
    border: 1px solid var(--wx-line) !important;
    border-radius: 7px !important;
    background: var(--wx-paper-card) !important;
    box-shadow: 0 8px 22px rgba(80, 20, 32, .07) !important;
}

    .theme-wuxia .item-market-search input,
    .theme-wuxia .item-market-search select,
    .theme-wuxia .form-group input,
    .theme-wuxia .form-group select,
    .theme-wuxia .form-group textarea,
    .theme-wuxia .price-input,
    .theme-wuxia .item-comment-form textarea,
    .theme-wuxia .item-reply-form textarea,
    .theme-wuxia .item-edit-form textarea {
        border-color: var(--wx-line) !important;
        background: #fffdfd !important;
        color: var(--wx-text) !important;
    }

        .theme-wuxia .item-market-search input:focus,
        .theme-wuxia .item-market-search select:focus,
        .theme-wuxia .form-group input:focus,
        .theme-wuxia .form-group select:focus,
        .theme-wuxia .form-group textarea:focus,
        .theme-wuxia .price-input:focus,
        .theme-wuxia .item-comment-form textarea:focus,
        .theme-wuxia .item-reply-form textarea:focus,
        .theme-wuxia .item-edit-form textarea:focus {
            border-color: var(--wx-red) !important;
            box-shadow: 0 0 0 3px rgba(179, 34, 58, .10) !important;
            outline: none;
        }

    .theme-wuxia .item-market-search button {
        border: 1px solid var(--wx-gold) !important;
        border-radius: 5px !important;
        background: linear-gradient(180deg, var(--wx-red), var(--wx-red-dark)) !important;
        color: #fff !important;
        font-family: "Noto Serif KR", serif;
    }

        .theme-wuxia .item-market-search button:hover {
            background: var(--wx-red-dark) !important;
        }

.theme-wuxia .item-card {
    border: 1px solid var(--wx-line) !important;
    border-radius: 7px !important;
    background: var(--wx-paper-card) !important;
    box-shadow: 0 7px 18px rgba(80, 20, 32, .07) !important;
}

    .theme-wuxia .item-card:hover {
        border-color: var(--wx-gold) !important;
        box-shadow: 0 10px 24px rgba(80, 20, 32, .11) !important;
    }

    .theme-wuxia .item-card .game-name,
    .theme-wuxia .game-tag,
    .theme-wuxia .request-count-badge {
        border: 1px solid var(--wx-gold) !important;
        background: var(--wx-red) !important;
        color: #fff !important;
    }

    .theme-wuxia .item-card h3,
    .theme-wuxia .item-info h3,
    .theme-wuxia .seller-nickname,
    .theme-wuxia .requester-name-row strong {
        color: var(--wx-text) !important;
    }

    .theme-wuxia .item-card .price,
    .theme-wuxia .detail-info .price,
    .theme-wuxia .price {
        color: var(--wx-red-dark) !important;
    }

    .theme-wuxia .item-card .seller,
    .theme-wuxia .item-list-meta,
    .theme-wuxia .seller-profile-hint,
    .theme-wuxia .seller-trust,
    .theme-wuxia .form-help,
    .theme-wuxia .item-comment-meta {
        color: var(--wx-muted) !important;
    }

.theme-wuxia .info-table th {
    background: #f9e8eb !important;
    color: var(--wx-muted) !important;
}

.theme-wuxia .info-table th,
.theme-wuxia .info-table td {
    border-color: var(--wx-line) !important;
}

.theme-wuxia .cancel-button,
.theme-wuxia .back-btn,
.theme-wuxia .back-button,
.theme-wuxia .request-secondary-btn,
.theme-wuxia .reply-cancel-btn {
    border: 1px solid var(--wx-line) !important;
    border-radius: 5px !important;
    background: #fffafa !important;
    color: var(--wx-text) !important;
}

    .theme-wuxia .cancel-button:hover,
    .theme-wuxia .back-btn:hover,
    .theme-wuxia .back-button:hover,
    .theme-wuxia .request-secondary-btn:hover,
    .theme-wuxia .reply-cancel-btn:hover {
        border-color: var(--wx-gold) !important;
        background: #f9e8eb !important;
    }

.theme-wuxia .item-image-upload,
.theme-wuxia .item-image-preview-wrap,
.theme-wuxia .item-reply-form,
.theme-wuxia .item-edit-form,
.theme-wuxia .item-reply-list {
    border-color: var(--wx-line) !important;
    background: #fff7f8 !important;
}

.theme-wuxia .paging button {
    border-color: var(--wx-line) !important;
    background: var(--wx-paper-card) !important;
    color: var(--wx-muted) !important;
}

    .theme-wuxia .paging button.active,
    .theme-wuxia .paging button:hover:not(:disabled) {
        border-color: var(--wx-red-dark) !important;
        background: var(--wx-red) !important;
        color: #fff !important;
    }


/* 댓글 AI 검열 안내 */
.comment-ai-notice {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.5;
    color: #7b6f68;
}

/* ==========================================================
   2026-09-14 반응형 이미지 자동 맞춤
   - 브라우저 배율/카드 폭 변화 시 이미지가 잘리지 않도록 처리
   - 고정 height 대신 aspect-ratio 사용
   - 원본 비율을 유지하며 카드 안에 전체 이미지 표시
   ========================================================== */
.item-card-image,
.item-list.view-card .item-card-image {
    width: 100%;
    height: auto !important;
    aspect-ratio: 4 / 3;
    display: grid;
    place-items: center;
    overflow: hidden;
    box-sizing: border-box;
    background: #f5f2ee;
}

    .item-card-image img,
    .item-list.view-card .item-card-image img {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        display: block;
        object-fit: contain !important;
        object-position: center;
    }

/* 목록형에서는 이미지 영역 자체도 화면 폭에 맞춰 자동 축소 */
.item-list.view-list .item-card-image {
    width: clamp(96px, 11vw, 140px);
    height: auto !important;
    aspect-ratio: 1 / 1;
    flex: 0 0 clamp(96px, 11vw, 140px);
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #f5f2ee;
}

    .item-list.view-list .item-card-image img {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain !important;
        object-position: center;
    }

/* 상세 페이지는 원본 이미지 비율대로 자연스럽게 축소/확대 */
.detail-image {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

    .detail-image img {
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: min(62vh, 560px);
        object-fit: contain !important;
        object-position: center;
    }

/* 등록/수정 미리보기도 잘리지 않게 표시 */
.item-image-preview-wrap {
    height: auto !important;
    aspect-ratio: 4 / 3;
    display: grid;
    place-items: center;
}

    .item-image-preview-wrap img,
    .item-image-preview {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain !important;
        object-position: center;
    }

@media (max-width: 760px) {
    .item-list.view-card .item-card-image {
        aspect-ratio: 16 / 11;
    }
}

@media (max-width: 560px) {
    .item-list.view-list .item-card-image {
        width: 100%;
        height: auto !important;
        aspect-ratio: 16 / 9;
        flex-basis: auto;
    }
}

/* ==========================================================
   댓글 외부 링크 경고
   - SafeGG 내부 링크는 일반 링크로 표시
   - 외부 링크는 경고 아이콘 + hover 안내 + 클릭 확인 팝업
   ========================================================== */
.comment-detected-link {
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
}

    .comment-detected-link.internal {
        color: #2e9b5f;
    }

    .comment-detected-link.external {
        color: #b45309;
    }

.comment-external-link-group {
    display: inline;
}

.comment-link-warning {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    margin: 0 3px;
    padding: 0;
    vertical-align: -2px;
    border: 1px solid #f59e0b;
    border-radius: 50%;
    background: #fff7ed;
    color: #d97706;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

    .comment-link-warning:hover,
    .comment-link-warning:focus-visible {
        border-color: #d97706;
        background: #ffedd5;
        outline: none;
    }

    .comment-link-warning::before,
    .comment-link-warning::after {
        position: absolute;
        left: 50%;
        z-index: 80;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.15s ease, visibility 0.15s ease;
    }

    .comment-link-warning::before {
        content: "";
        bottom: calc(100% + 4px);
        transform: translateX(-50%);
        border: 6px solid transparent;
        border-top-color: #2f2f2f;
    }

    .comment-link-warning::after {
        content: attr(data-tooltip);
        bottom: calc(100% + 16px);
        width: min(330px, 72vw);
        padding: 10px 12px;
        transform: translateX(-50%);
        border-radius: 8px;
        background: #2f2f2f;
        color: #fff;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.55;
        text-align: left;
        white-space: normal;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    }

    .comment-link-warning:hover::before,
    .comment-link-warning:hover::after,
    .comment-link-warning:focus-visible::before,
    .comment-link-warning:focus-visible::after {
        opacity: 1;
        visibility: visible;
    }

.external-link-warning-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.48);
}

    .external-link-warning-backdrop.show {
        display: flex;
    }

.external-link-warning-dialog {
    width: min(460px, 100%);
    padding: 24px;
    border: 1px solid #fed7aa;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
}

.external-link-warning-dialog-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 13px;
    border-radius: 50%;
    background: #fff7ed;
    color: #d97706;
    font-size: 22px;
}

.external-link-warning-dialog h3 {
    margin: 0 0 10px;
    color: #9a3412;
    font-size: 19px;
}

.external-link-warning-message {
    margin: 0;
    color: #4b5563;
    font-size: 15px;
    line-height: 1.7;
    white-space: pre-line;
}

.external-link-warning-address-label {
    display: block;
    margin-top: 16px;
    color: #374151;
    font-size: 14px;
}

.external-link-warning-address {
    margin-top: 6px;
    padding: 9px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    background: #f9fafb;
    color: #4b5563;
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.external-link-warning-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

    .external-link-warning-actions button {
        min-width: 76px;
        min-height: 38px;
        padding: 0 16px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
    }

.external-link-warning-cancel {
    border: 1px solid #d1d5db;
    background: #fff;
    color: #4b5563;
}

.external-link-warning-confirm {
    border: 1px solid #c2410c;
    background: #c2410c;
    color: #fff;
}

.external-link-warning-cancel:hover {
    background: #f9fafb;
}

.external-link-warning-confirm:hover {
    background: #9a3412;
}

@media (max-width: 600px) {
    .comment-link-warning::after {
        left: auto;
        right: -12px;
        transform: none;
        width: min(280px, 78vw);
    }

    .comment-link-warning::before {
        left: auto;
        right: 0;
        transform: none;
    }

    .external-link-warning-dialog {
        padding: 20px;
    }
}


/* ==========================================================
   상품 카드 반응형 높이 통일 (창모드 날짜 줄바꿈 대응)
   - 5열 디자인과 목록형(view-list)은 유지
   - 각 행의 카드를 같은 높이로 늘리고 상세보기 버튼을 하단 정렬
   ========================================================== */
.item-list.view-card {
    align-items: stretch;
}

    .item-list.view-card .item-card {
        display: flex;
        flex-direction: column;
        height: 100%;
        box-sizing: border-box;
    }

    .item-list.view-card .item-info {
        display: flex;
        flex: 1;
        flex-direction: column;
        min-height: 0;
    }

    .item-list.view-card .detail-button {
        margin-top: auto;
    }

/* 판매 종료 상품 배너 */
.item-card-image[data-ended]:not([data-ended=""]),
.detail-image[data-ended]:not([data-ended=""]) {
    position: relative;
}

    .item-card-image[data-ended]:not([data-ended=""]) img,
    .detail-image[data-ended]:not([data-ended=""]) img {
        filter: grayscale(.9);
        opacity: .55;
    }

    .item-card-image[data-ended]:not([data-ended=""])::after,
    .detail-image[data-ended]:not([data-ended=""])::after {
        content: attr(data-ended);
        position: absolute;
        top: 50%;
        right: 0;
        left: 0;
        z-index: 2;
        padding: 10px 0;
        border-top: 2px solid var(--wx-gold, #c9a15c);
        border-bottom: 2px solid var(--wx-gold, #c9a15c);
        background: rgba(42, 15, 22, .86);
        color: var(--wx-gold-light, #e8c98a);
        font-family: "Noto Serif KR", serif;
        font-size: 22px;
        font-weight: 900;
        letter-spacing: 6px;
        text-align: center;
        transform: translateY(-50%);
        pointer-events: none;
    }

    .detail-image[data-ended]:not([data-ended=""])::after {
        font-size: 28px;
    }

.item-card.is-ended .detail-button {
    filter: grayscale(.6);
}