/* =======================
   Content Common Buttons
======================= */

.page-sub-btn,
.page-danger-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;
    padding: 0 16px;

    border-radius: 999px;
    border: 1px solid transparent;

    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;

    transition: background-color 0.16s ease,
    color 0.16s ease,
    border-color 0.16s ease,
    transform 0.16s ease;
}

.page-sub-btn {
    color: #374151;
    background: #ffffff;
    border-color: #d1d5db;
}

.page-sub-btn:hover {
    color: #1d4ed8;
    border-color: #93c5fd;
    background: #eff6ff;
    transform: translateY(-1px);
}

.page-sub-btn.primary {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.page-sub-btn.primary:hover {
    color: #ffffff;
    background: #2563eb;
    border-color: #2563eb;
}

.page-danger-btn {
    color: #b91c1c;
    background: #ffffff;
    border-color: #fecaca;
}

.page-danger-btn:hover {
    color: #ffffff;
    background: #dc2626;
    border-color: #dc2626;
}
/* =======================
   Content Common Tabs
======================= */

.content-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e4edf7;
}

.content-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    padding: 11px 18px;
    border-radius: 999px;
    border: 1px solid #cfd8e6;
    background: #ffffff;
    color: #1d2f48;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(17, 73, 132, 0.05);
    transition: 0.15s ease;
}

.content-tab:hover {
    transform: translateY(-1px);
    border-color: #1f8be8;
    color: #1f8be8;
}

.content-tab.active {
    background: linear-gradient(135deg, #37b4ff, #1f8be8);
    border-color: #1f8be8;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(45, 147, 255, 0.28);
}
/* =======================
   Hospital Info Page
======================= */

.hospital-info-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin: 28px 0 20px;
}

.hospital-info-page-title {
    font-size: 28px;
    font-weight: 800;
    color: #13213a;
    margin-bottom: 6px;
}

.hospital-info-page-desc {
    font-size: 14px;
    color: #64728a;
}

.hospital-info-card {
    background: #fff;
    border-radius: 20px;
    padding: 28px 30px;
    box-shadow: 0 10px 30px rgba(17, 73, 132, 0.08);
    border: 1px solid rgba(205, 221, 240, 0.6);
    margin-top: 28px;
}

.hospital-info-error-message {
    margin-bottom: 18px;
    padding: 14px 18px;
    border-radius: 14px;
    color: #991b1b;
    background: #fee2e2;
    border: 1px solid #fecaca;
    font-size: 14px;
    font-weight: 600;
}

.hospital-info-empty {
    padding: 50px 20px;
    text-align: center;
    background: #f9fbff;
    border-radius: 18px;
    color: #64728a;
    border: 1px dashed #cfd8e6;
}

.hospital-info-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e4edf7;
}

.hospital-info-tab:hover {
    transform: translateY(-1px);
    border-color: #1f8be8;
    color: #1f8be8;
}

.hospital-info-tab.active {
    background: linear-gradient(135deg, #37b4ff, #1f8be8);
    border-color: #1f8be8;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(45, 147, 255, 0.28);
}

.hospital-info-detail {
    padding-top: 4px;
}

.hospital-info-hero-image-wrap {
    width: 100%;
    height: 340px;
    margin-bottom: 28px;
    overflow: hidden;
    border-radius: 22px;
    background: #eaf5ff;
    border: 1px solid #d9e8f7;
}

.hospital-info-hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hospital-info-hero-placeholder {
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: #1d7fd3;
    font-size: 15px;
    font-weight: 800;
    background: linear-gradient(135deg, #e3f3ff, #ffffff);
}

.hospital-info-detail-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    background: #e3f3ff;
    color: #1d7fd3;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 12px;
}

.hospital-info-detail-title {
    font-size: 30px;
    font-weight: 800;
    color: #13213a;
    margin-bottom: 18px;
}

.hospital-info-detail-content {
    font-size: 15px;
    line-height: 1.9;
    color: #333;
    white-space: pre-wrap;
}

.hospital-info-detail-empty-desc {
    color: #7b869b;
}

.hospital-info-admin-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    flex-wrap: wrap;
}

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

@media (max-width: 720px) {
    .hospital-info-card {
        padding: 22px 20px;
    }

    .hospital-info-detail-title {
        font-size: 26px;
    }

    .hospital-info-hero-image-wrap {
        height: 240px;
    }
}

/* =======================
   Department Page
======================= */

.department-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin: 28px 0 20px;
}

.department-page-title {
    font-size: 28px;
    font-weight: 800;
    color: #13213a;
    margin-bottom: 6px;
}

.department-page-desc {
    font-size: 14px;
    color: #64728a;
}

.department-card {
    background: #fff;
    border-radius: 20px;
    padding: 28px 30px;
    box-shadow: 0 10px 30px rgba(17, 73, 132, 0.08);
    border: 1px solid rgba(205, 221, 240, 0.6);
    margin-top: 28px;
}

.department-empty {
    padding: 50px 20px;
    text-align: center;
    background: #f9fbff;
    border-radius: 18px;
    color: #64728a;
    border: 1px dashed #cfd8e6;
}

/* =======================
   Department List
======================= */

.department-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.department-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border-radius: 16px;
    background: #f9fbff;
    border: 1px solid #e1ebf7;
    transition: 0.16s ease;
}

.department-list-item:hover {
    transform: translateY(-2px);
    background: #eff6ff;
    border-color: #93c5fd;
    box-shadow: 0 8px 20px rgba(17, 73, 132, 0.08);
}

.department-list-name {
    font-size: 17px;
    font-weight: 800;
    color: #13213a;
}

.department-list-arrow {
    font-size: 13px;
    font-weight: 700;
    color: #1f8be8;
    white-space: nowrap;
}

/* =======================
   Department Detail
======================= */

.department-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e4edf7;
}

.department-tab:hover {
    transform: translateY(-1px);
    border-color: #1f8be8;
    color: #1f8be8;
}

.department-tab.active {
    background: linear-gradient(135deg, #37b4ff, #1f8be8);
    border-color: #1f8be8;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(45, 147, 255, 0.28);
}

.department-detail {
    padding-top: 4px;
}

.department-hero-image-wrap {
    width: 100%;
    height: 340px;
    margin-bottom: 28px;
    overflow: hidden;
    border-radius: 22px;
    background: #eaf5ff;
    border: 1px solid #d9e8f7;
}

.department-hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.department-hero-placeholder {
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: #1d7fd3;
    font-size: 15px;
    font-weight: 800;
    background: linear-gradient(135deg, #e3f3ff, #ffffff);
}

.department-detail-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    background: #e3f3ff;
    color: #1d7fd3;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 12px;
}

.department-detail-title {
    font-size: 30px;
    font-weight: 800;
    color: #13213a;
    margin-bottom: 18px;
}

.department-detail-content {
    font-size: 15px;
    line-height: 1.9;
    color: #333;
    white-space: pre-wrap;
}

.department-detail-empty-desc {
    color: #7b869b;
}

.department-admin-inline-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.department-admin-delete-form {
    display: inline-flex;
}

.department-reservation-action {
    margin-top: 24px;
}

/* =======================
   Department Staff
======================= */

.department-staff-section {
    margin-top: 34px;
}

.department-section-header {
    margin-bottom: 18px;
}

.department-section-title {
    font-size: 24px;
    font-weight: 800;
    color: #13213a;
    margin-bottom: 6px;
}

.department-section-desc {
    font-size: 14px;
    color: #64728a;
}

.department-staff-group {
    background: #ffffff;
    border-radius: 20px;
    padding: 24px 26px;
    box-shadow: 0 10px 30px rgba(17, 73, 132, 0.08);
    border: 1px solid rgba(205, 221, 240, 0.6);
    margin-bottom: 22px;
}

.department-staff-group-title {
    font-size: 18px;
    font-weight: 800;
    color: #13213a;
    margin-bottom: 16px;
}

.department-staff-empty {
    padding: 30px 20px;
    text-align: center;
    background: #f9fbff;
    border-radius: 16px;
    color: #64728a;
    border: 1px dashed #cfd8e6;
}

.department-staff-list {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.department-staff-profile-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 150px;
    text-decoration: none;
    color: inherit;
}

.department-staff-profile-card:hover .department-staff-profile-image-wrap {
    border-color: #93c5fd;
}

.department-staff-profile-image-wrap {
    width: 150px;
    height: 170px;
    border-radius: 14px;
    overflow: hidden;
    background: #f3f7fc;
    border: 1px solid #e5e7eb;
    transition: 0.16s ease;
}

.department-staff-profile-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.department-staff-profile-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64728a;
    font-size: 14px;
    font-weight: 800;
    background: #f3f7fc;
}

.department-staff-profile-name-row {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 6px;
    width: 100%;
}

.department-staff-profile-name {
    font-size: 15px;
    font-weight: 800;
    color: #13213a;
}

.department-staff-profile-position {
    font-size: 14px;
    font-weight: 700;
    color: #64728a;
}


/* =======================
   Board Page
======================= */

.board-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin: 28px 0 20px;
}

.board-page-title {
    font-size: 28px;
    font-weight: 800;
    color: #13213a;
    margin-bottom: 6px;
}

.board-page-desc {
    font-size: 14px;
    color: #64728a;
}

/* =======================
   Board Buttons
======================= */

.board-write-btn,
.board-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid #c7d8f0;
    background: #ffffff;
    color: #1d2f48;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: 0.16s ease;
}

.board-write-btn,
.board-action-btn.primary {
    border-color: transparent;
    background: linear-gradient(135deg, #37b4ff, #1f8be8);
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(45, 147, 255, 0.35);
}

.board-write-btn:hover,
.board-action-btn:hover {
    transform: translateY(-1px);
}

.board-action-btn.danger {
    border-color: #fecaca;
    color: #b91c1c;
    background: #ffffff;
    box-shadow: none;
}

.board-action-btn.danger:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
}

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

.board-search-box {
    background: #ffffff;
    border-radius: 18px;
    padding: 18px 20px;
    margin-bottom: 22px;
    box-shadow: 0 8px 24px rgba(17, 73, 132, 0.06);
    border: 1px solid rgba(205, 221, 240, 0.65);
}

.board-search-form {
    display: flex;
    gap: 10px;
    align-items: center;
}

.board-search-form select,
.board-search-form input {
    height: 42px;
    border-radius: 12px;
    border: 1px solid #cfd8e6;
    background: #f9fbff;
    padding: 0 12px;
    font-size: 14px;
    color: #1d2f48;
}

.board-search-form select {
    width: 150px;
    flex: 0 0 150px;
}

.board-search-form input {
    flex: 1;
    min-width: 0;
}

.board-search-form select:focus,
.board-search-form input:focus {
    outline: none;
    border-color: #2a9bff;
    background: #ffffff;
    box-shadow: 0 0 0 2px rgba(42, 155, 255, 0.18);
}

.board-search-form button {
    height: 42px;
    min-width: 88px;
    padding: 0 18px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #37b4ff, #1f8be8);
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(45, 147, 255, 0.26);
}

/* =======================
   Board List
======================= */

.board-empty {
    padding: 50px 20px;
    text-align: center;
    background: #ffffff;
    border-radius: 18px;
    color: #64728a;
    border: 1px dashed #cfd8e6;
    box-shadow: 0 8px 24px rgba(17, 73, 132, 0.04);
}

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

.board-list-item {
    display: block;
    background: #ffffff;
    border-radius: 18px;
    padding: 20px 22px;
    box-shadow: 0 8px 24px rgba(17, 73, 132, 0.06);
    border: 1px solid rgba(225, 235, 247, 0.95);
    transition: 0.16s ease;
}

.board-list-item:hover {
    transform: translateY(-2px);
    border-color: #93c5fd;
    box-shadow: 0 12px 28px rgba(17, 73, 132, 0.1);
}

.board-list-title {
    font-size: 18px;
    font-weight: 800;
    color: #13213a;
    margin-bottom: 10px;
}

.board-list-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    font-size: 12px;
    color: #7b869b;
}

/* =======================
   Board Pagination
======================= */

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.page-link {
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #374151;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}

.page-link.active {
    background: #1f8be8;
    border-color: #1f8be8;
    color: #ffffff;
}

.page-link.disabled {
    pointer-events: none;
    opacity: 0.45;
}

/* =======================
   Board Detail
======================= */

.board-detail-card {
    background: #ffffff;
    border-radius: 22px;
    padding: 34px 36px;
    box-shadow: 0 10px 30px rgba(17, 73, 132, 0.08);
    border: 1px solid rgba(205, 221, 240, 0.6);
    margin-top: 28px;
}

.field-success {
    margin-bottom: 18px;
    padding: 14px 18px;
    border-radius: 14px;
    color: #166534;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
    font-size: 14px;
    font-weight: 700;
}

.board-detail-title {
    font-size: 30px;
    font-weight: 800;
    color: #13213a;
    margin-bottom: 14px;
}

.board-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding-bottom: 20px;
    margin-bottom: 24px;
    border-bottom: 1px solid #e4edf7;
    font-size: 12px;
    color: #7b869b;
}

.board-detail-image {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    display: block;
    border-radius: 20px;
    margin-bottom: 26px;
    border: 1px solid #e1ebf7;
}

.board-detail-content {
    font-size: 15px;
    line-height: 1.9;
    color: #333;
    white-space: pre-wrap;
}

.board-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 30px;
}

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

.board-form-card {
    background: #ffffff;
    border-radius: 22px;
    padding: 34px 36px;
    box-shadow: 0 10px 30px rgba(17, 73, 132, 0.08);
    border: 1px solid rgba(205, 221, 240, 0.6);
    margin-top: 28px;
}

.board-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.board-form-field label {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: #253a5e;
    margin-bottom: 8px;
}

.board-form-field input[type="text"],
.board-form-field textarea {
    width: 100%;
    border-radius: 14px;
    border: 1px solid #cfd8e6;
    background: #f9fbff;
    padding: 13px 14px;
    font-size: 14px;
    font-family: inherit;
}

.board-form-field textarea {
    min-height: 260px;
    resize: vertical;
    line-height: 1.7;
}

.board-form-field input[type="file"] {
    width: 100%;
    padding: 12px;
    border-radius: 14px;
    border: 1px dashed #cfd8e6;
    background: #f9fbff;
}

.board-form-field input:focus,
.board-form-field textarea:focus {
    outline: none;
    border-color: #2a9bff;
    background: #ffffff;
    box-shadow: 0 0 0 2px rgba(42, 155, 255, 0.18);
}

.banner-option-field {
    margin-top: 4px;
}

.banner-toggle-label {
    display: block;
    cursor: pointer;
}

.banner-toggle-label input {
    display: none;
}

.banner-toggle-box {
    display: block;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid #d1d5db;
    background: #f9fbff;
    transition: 0.16s ease;
}

.banner-toggle-input:checked + .banner-toggle-box {
    border-color: #1f8be8;
    background: #eff6ff;
    box-shadow: 0 0 0 2px rgba(42, 155, 255, 0.14);
}

.banner-toggle-title {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: #13213a;
    margin-bottom: 4px;
}

.banner-toggle-desc {
    display: block;
    font-size: 13px;
    color: #64728a;
    line-height: 1.5;
}

.banner-readonly-info {
    cursor: default;
}

.board-inline-error {
    margin-top: 8px;
}

.board-form-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}


/* =======================
   My Page
======================= */

.mypage-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin: 28px 0 20px;
}

.mypage-title {
    font-size: 28px;
    font-weight: 800;
    color: #13213a;
    margin-bottom: 6px;
}

.mypage-desc {
    font-size: 14px;
    color: #64728a;
}

.mypage-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 20px;
}

.mypage-card,
.pet-detail-card,
.pet-form-card {
    background: #ffffff;
    border-radius: 22px;
    padding: 28px 30px;
    box-shadow: 0 10px 30px rgba(17, 73, 132, 0.08);
    border: 1px solid rgba(205, 221, 240, 0.6);
    margin-bottom: 20px;
}

.mypage-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.mypage-card-title {
    font-size: 20px;
    font-weight: 800;
    color: #13213a;
}

.mypage-card-desc {
    margin-top: 4px;
    font-size: 13px;
    color: #64728a;
}

.mypage-info-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mypage-info-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid #edf2f7;
    font-size: 14px;
}

.mypage-info-row span {
    color: #64728a;
}

.mypage-info-row strong {
    color: #13213a;
    font-weight: 800;
    text-align: right;
}

/* =======================
   Pet List
======================= */

.pet-empty {
    padding: 40px 20px;
    text-align: center;
    background: #f9fbff;
    border-radius: 18px;
    color: #64728a;
    border: 1px dashed #cfd8e6;
}

.pet-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pet-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border-radius: 18px;
    background: #f9fbff;
    border: 1px solid #e1ebf7;
    transition: 0.16s ease;
}

.pet-list-item:hover {
    transform: translateY(-2px);
    background: #eff6ff;
    border-color: #93c5fd;
    box-shadow: 0 8px 20px rgba(17, 73, 132, 0.08);
}

.pet-list-name {
    font-size: 17px;
    font-weight: 800;
    color: #13213a;
    margin-bottom: 6px;
}

.pet-list-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    font-size: 13px;
    color: #64728a;
}

.pet-list-arrow {
    font-size: 13px;
    font-weight: 800;
    color: #1f8be8;
    white-space: nowrap;
}

/* =======================
   Pet Detail
======================= */

.pet-detail-main {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 28px;
}

.pet-profile-image-wrap {
    width: 100%;
    height: 260px;
    overflow: hidden;
    border-radius: 22px;
    background: #eaf5ff;
    border: 1px solid #d9e8f7;
}

.pet-profile-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pet-profile-placeholder {
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: #1d7fd3;
    font-size: 15px;
    font-weight: 800;
    background: linear-gradient(135deg, #e3f3ff, #ffffff);
}

.pet-detail-info {
    min-width: 0;
}

.pet-detail-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    background: #e3f3ff;
    color: #1d7fd3;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 12px;
}

.pet-detail-name {
    font-size: 30px;
    font-weight: 800;
    color: #13213a;
    margin-bottom: 18px;
}

.pet-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.pet-detail-row {
    padding: 14px 16px;
    border-radius: 16px;
    background: #f9fbff;
    border: 1px solid #e1ebf7;
}

.pet-detail-row span {
    display: block;
    font-size: 12px;
    color: #64728a;
    margin-bottom: 4px;
}

.pet-detail-row strong {
    font-size: 15px;
    font-weight: 800;
    color: #13213a;
}

.pet-detail-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    flex-wrap: wrap;
}

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

.pet-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.pet-form-field label {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: #253a5e;
    margin-bottom: 8px;
}

.pet-form-field input[type="text"],
.pet-form-field input[type="number"],
.pet-form-field select {
    width: 100%;
    height: 44px;
    border-radius: 14px;
    border: 1px solid #cfd8e6;
    background: #f9fbff;
    padding: 0 14px;
    font-size: 14px;
    font-family: inherit;
    color: #1d2f48;
}

.pet-form-field input:focus,
.pet-form-field select:focus {
    outline: none;
    border-color: #2a9bff;
    background: #ffffff;
    box-shadow: 0 0 0 2px rgba(42, 155, 255, 0.18);
}

.pet-checkbox-field label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.pet-checkbox-field input {
    width: 16px;
    height: 16px;
}

.pet-form-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

/* =======================
   Staff Doctor Time Off Calendar
======================= */

.doctor-off-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(340px, 0.8fr);
    gap: 24px;
    align-items: start;
}

.calendar-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 22px;
}

.calendar-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.calendar-title {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    color: #13213a;
}

.calendar-subtitle {
    margin: 4px 0 0;
    color: #64728a;
    font-size: 14px;
}

.calendar-nav {
    display: flex;
    gap: 8px;
}

.calendar-weekdays,
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

.calendar-weekdays {
    margin-bottom: 8px;
}

.calendar-weekday {
    text-align: center;
    color: #64728a;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 0;
}

.calendar-day {
    min-height: 104px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #ffffff;
    padding: 10px;
    cursor: pointer;
    text-align: left;
    transition: 0.15s ease;
}

.calendar-day:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(17, 73, 132, 0.08);
}

.calendar-day.outside {
    background: #f9fbff;
    color: #9ca3af;
}

.calendar-day.today {
    border-color: #13213a;
}

.calendar-day.selected {
    border: 2px solid #1f8be8;
    background: #eff6ff;
}

.calendar-day-number {
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 8px;
}

.calendar-badges {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.calendar-badge {
    display: inline-flex;
    width: fit-content;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.calendar-badge.today {
    background: #13213a;
    color: #ffffff;
}

.calendar-badge.holiday {
    background: #fee2e2;
    color: #b91c1c;
}

.calendar-badge.off {
    background: #dbeafe;
    color: #1d4ed8;
}

.status-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.status-summary-card {
    background: linear-gradient(135deg, #13213a, #1d2f48);
    border-radius: 20px;
    padding: 22px;
    color: #ffffff;
}

.status-summary-date {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 8px;
}

.status-summary-text {
    font-size: 14px;
    color: #d3e1ff;
    margin: 0;
}

.quick-action-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.quick-action-grid .page-sub-btn,
.quick-action-grid .page-danger-btn {
    width: 100%;
}

.slot-list {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.slot-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
}

.slot-time {
    font-weight: 800;
    color: #13213a;
}

.slot-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.slot-chip {
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 12px;
    font-weight: 800;
}

.slot-chip.available {
    background: #dcfce7;
    color: #15803d;
}

.slot-chip.off {
    background: #dbeafe;
    color: #1d4ed8;
}

.slot-chip.holiday {
    background: #fee2e2;
    color: #b91c1c;
}
.slot-chip.booked {
    background: #e3f3ff;
    color: #1d7fd3;
}

.slot-chip.completed {
    background: #e8f8ef;
    color: #148a4f;
}

.slot-chip.no-show {
    background: #fff1f2;
    color: #e11d48;
}

.slot-chip.canceled {
    background: #f1f5f9;
    color: #64748b;
}

.slot-reason {
    color: #64728a;
    font-size: 12px;
}

/* =======================
   Staff Doctor Time Off Form
======================= */

.time-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
}

.time-checkbox {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    background: #ffffff;
    font-weight: 600;
    transition: 0.15s ease;
}

.time-checkbox:hover {
    background: #f9fbff;
    border-color: #93c5fd;
}

.time-checkbox input {
    cursor: pointer;
}

/* =======================
   Staff Weekly Off
======================= */

.weekly-summary {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
    margin-top: 24px;
}

.weekly-summary-item {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 14px;
    background: #ffffff;
}

.weekly-summary-day {
    font-weight: 800;
    color: #13213a;
    margin-bottom: 6px;
}

.weekly-summary-count {
    color: #64728a;
    font-size: 13px;
}

/* =======================
   Staff Doctor Time Off Responsive
======================= */

@media (max-width: 1100px) {
    .doctor-off-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .calendar-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .calendar-nav {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .calendar-day {
        min-height: 82px;
        padding: 8px;
    }

    .calendar-badge {
        font-size: 10px;
        padding: 3px 6px;
    }

    .slot-item {
        align-items: flex-start;
        flex-direction: column;
    }

    .slot-meta {
        justify-content: flex-start;
    }
}

/* =======================
   Staff My Page
======================= */

.staff-profile-image-wrap {
    margin-bottom: 22px;
}

.staff-profile-intro-section {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid #edf2f7;
}

.staff-profile-intro-title {
    font-size: 18px;
    font-weight: 800;
    color: #13213a;
    margin-bottom: 12px;
}

.staff-profile-intro-text {
    white-space: pre-line;
    line-height: 1.8;
    color: #4a5870;
}
/* =======================
   My Page Responsive
======================= */

@media (max-width: 720px) {
    .mypage-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .mypage-grid,
    .pet-detail-main,
    .pet-detail-grid {
        grid-template-columns: 1fr;
    }

    .mypage-card,
    .pet-detail-card,
    .pet-form-card {
        padding: 22px 20px;
    }

    .mypage-card-header {
        flex-direction: column;
    }

    .pet-list-item {
        align-items: flex-start;
        flex-direction: column;
    }

    .pet-profile-image-wrap {
        height: 220px;
    }

    .pet-detail-name {
        font-size: 26px;
    }

    .pet-form-buttons,
    .pet-detail-actions {
        justify-content: flex-start;
    }
}

/* =======================
   Account / Staff Edit Form
======================= */

.edit-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.edit-form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.edit-form-label {
    font-size: 14px;
    font-weight: 800;
    color: #253a5e;
}

.edit-form-input,
.edit-form-textarea,
.edit-form-file {
    width: 100%;
    border-radius: 16px;
    border: 1px solid #d9e3f0;
    background: #f9fbff;
    color: #1d2f48;
    font-size: 14px;
    font-family: inherit;
    transition: 0.16s ease;
}

.edit-form-input {
    height: 46px;
    padding: 0 15px;
}

.edit-form-textarea {
    min-height: 220px;
    padding: 15px 16px;
    line-height: 1.8;
    resize: vertical;
}

.edit-form-file {
    padding: 13px 14px;
    border-style: dashed;
    cursor: pointer;
}

.edit-form-input:focus,
.edit-form-textarea:focus,
.edit-form-file:focus {
    outline: none;
    border-color: #1f8be8;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(31, 139, 232, 0.14);
}

.edit-form-input::placeholder,
.edit-form-textarea::placeholder {
    color: #9ca3af;
}

.edit-form-help {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: #64728a;
}

.edit-form-divider {
    height: 1px;
    background: #edf2f7;
    margin: 2px 0;
}

.edit-form-error {
    display: none;
}

.edit-form-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
    flex-wrap: wrap;
}

/* =======================
   Staff Profile Detail
======================= */

.staff-profile-detail-card {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 34px;
    align-items: start;

    background: #ffffff;
    border-radius: 22px;
    padding: 34px 36px;
    box-shadow: 0 10px 30px rgba(17, 73, 132, 0.08);
    border: 1px solid rgba(205, 221, 240, 0.6);
}

.staff-profile-detail-image-wrap {
    width: 100%;
    height: 380px;
    border-radius: 20px;
    overflow: hidden;
    background: #f3f7fc;
    border: 1px solid #e1ebf7;
}

.staff-profile-detail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.staff-profile-detail-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    color: #64728a;
    font-size: 15px;
    font-weight: 800;
    background: #f3f7fc;
}

.staff-profile-detail-info {
    min-width: 0;
}

.staff-profile-detail-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 5px 12px;
    border-radius: 999px;
    background: #e3f3ff;
    color: #1d7fd3;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 14px;
}

.staff-profile-detail-name {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;

    font-size: 30px;
    font-weight: 800;
    color: #13213a;
    margin-bottom: 22px;
}

.staff-profile-detail-name span:last-child {
    font-size: 18px;
    color: #64728a;
}

.staff-profile-detail-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 28px;
}

.staff-profile-detail-meta div {
    padding: 15px 16px;
    border-radius: 16px;
    background: #f9fbff;
    border: 1px solid #e1ebf7;
}

.staff-profile-detail-meta span {
    display: block;
    font-size: 12px;
    color: #64728a;
    margin-bottom: 5px;
}

.staff-profile-detail-meta strong {
    font-size: 15px;
    font-weight: 800;
    color: #13213a;
}

.staff-profile-detail-intro {
    padding-top: 24px;
    border-top: 1px solid #edf2f7;
}

.staff-profile-detail-intro h3 {
    font-size: 18px;
    font-weight: 800;
    color: #13213a;
    margin-bottom: 12px;
}

.staff-profile-detail-intro p {
    margin: 0;
    padding: 18px 20px;
    border-radius: 16px;
    background: #f9fbff;
    border: 1px solid #e1ebf7;

    font-size: 14px;
    line-height: 1.9;
    color: #4a5870;
    white-space: pre-line;
}

.staff-profile-detail-intro p.empty {
    color: #64728a;
    border-style: dashed;
}

@media (max-width: 900px) {
    .staff-profile-detail-card {
        grid-template-columns: 1fr;
    }

    .staff-profile-detail-image-wrap {
        height: 320px;
    }
}

@media (max-width: 720px) {
    .staff-profile-detail-card {
        padding: 24px 22px;
    }

    .staff-profile-detail-name {
        font-size: 26px;
    }

    .staff-profile-detail-meta {
        grid-template-columns: 1fr;
    }
}

/* =======================
   Admin My Page
======================= */

.admin-mypage-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.admin-menu-card {
    display: block;
    padding: 28px 30px;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid rgba(205, 221, 240, 0.7);
    box-shadow: 0 10px 30px rgba(17, 73, 132, 0.08);
    text-decoration: none;
    transition: 0.16s ease;
}

.admin-menu-card:hover {
    transform: translateY(-3px);
    border-color: #93c5fd;
    box-shadow: 0 14px 34px rgba(17, 73, 132, 0.12);
}

.admin-menu-title {
    font-size: 20px;
    font-weight: 800;
    color: #13213a;
    margin-bottom: 8px;
}

.admin-menu-desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #64728a;
}

@media (max-width: 720px) {
    .admin-mypage-grid {
        grid-template-columns: 1fr;
    }
}
/* =======================
   Admin Staff
======================= */

.admin-staff-layout {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 20px;
    align-items: start;
}

.admin-staff-search-form {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
}

.admin-staff-search-select,
.admin-staff-search-input {
    height: 42px;
    border-radius: 14px;
    border: 1px solid #cfd8e6;
    background: #f9fbff;
    padding: 0 12px;
    font-size: 14px;
    color: #1d2f48;
}

.admin-staff-search-select {
    width: 120px;
    flex: 0 0 120px;
}

.admin-staff-search-input {
    flex: 1;
    min-width: 0;
}

.admin-staff-search-select:focus,
.admin-staff-search-input:focus {
    outline: none;
    border-color: #2a9bff;
    background: #ffffff;
    box-shadow: 0 0 0 2px rgba(42, 155, 255, 0.18);
}

.admin-staff-result-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-staff-user-item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;

    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid #e1ebf7;
    background: #f9fbff;

    text-align: left;
    cursor: pointer;
    transition: 0.16s ease;
}

.admin-staff-user-item:hover,
.admin-staff-user-item.selected {
    background: #eff6ff;
    border-color: #93c5fd;
}

.admin-staff-user-name {
    font-size: 15px;
    font-weight: 800;
    color: #13213a;
    margin-bottom: 4px;
}

.admin-staff-user-phone {
    font-size: 13px;
    color: #64728a;
}

.admin-staff-user-role {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 64px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #e3f3ff;
    color: #1d7fd3;

    font-size: 12px;
    font-weight: 800;
}

.admin-selected-user-box {
    padding: 15px 16px;
    border-radius: 16px;
    background: #f9fbff;
    border: 1px solid #e1ebf7;
    margin-bottom: 20px;
}

.admin-selected-user-box span {
    display: block;
    font-size: 12px;
    color: #64728a;
    margin-bottom: 5px;
}

.admin-selected-user-box strong {
    font-size: 15px;
    font-weight: 800;
    color: #13213a;
}

@media (max-width: 900px) {
    .admin-staff-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .admin-staff-search-form {
        flex-direction: column;
    }

    .admin-staff-search-select {
        width: 100%;
        flex: none;
    }
}
/* =======================
   Admin Holiday
======================= */

.admin-holiday-layout {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 20px;
    align-items: start;
}

.admin-holiday-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.admin-holiday-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;

    padding: 14px;
    border-radius: 16px;
    background: #f9fbff;
    border: 1px solid #e1ebf7;
}

.admin-holiday-update-form {
    display: grid;
    grid-template-columns: 160px 1fr auto;
    gap: 8px;
    align-items: center;
}

.admin-holiday-delete-form {
    display: flex;
    align-items: center;
}

.admin-holiday-date-input,
.admin-holiday-name-input {
    height: 40px;
    border-radius: 13px;
    border: 1px solid #cfd8e6;
    background: #ffffff;
    padding: 0 12px;
    color: #1d2f48;
    font-size: 14px;
    font-family: inherit;
}

.admin-holiday-date-input:focus,
.admin-holiday-name-input:focus {
    outline: none;
    border-color: #1f8be8;
    box-shadow: 0 0 0 3px rgba(31, 139, 232, 0.14);
}

.page-sub-btn.small {
    min-height: 40px;
    padding: 0 14px;
    font-size: 13px;
}

.page-sub-btn.danger {
    background: #fff1f2;
    border-color: #fecdd3;
    color: #e11d48;
}

.page-sub-btn.danger:hover {
    background: #ffe4e6;
    border-color: #fb7185;
}

@media (max-width: 900px) {
    .admin-holiday-layout {
        grid-template-columns: 1fr;
    }

    .admin-holiday-item {
        grid-template-columns: 1fr;
    }

    .admin-holiday-update-form {
        grid-template-columns: 1fr;
    }

    .admin-holiday-delete-form {
        justify-content: flex-end;
    }
}
/* =======================
   Reservation Home
======================= */

.reservation-home-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 20px;
    align-items: start;
}

.reservation-home-card {
    min-height: 260px;
}

.reservation-home-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.reservation-home-text {
    margin: 0;
    color: #64728a;
    font-size: 14px;
    line-height: 1.6;
}

.page-sub-btn.disabled {
    pointer-events: none;
    opacity: 0.5;
}

@media (max-width: 900px) {
    .reservation-home-grid {
        grid-template-columns: 1fr;
    }
}
/* =======================
   User Reservation
======================= */

.pet-list-item-with-actions {
    cursor: default;
}

.pet-list-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.reservation-create-layout {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 20px;
    align-items: start;
}

.reservation-slot-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.reservation-slot-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;

    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid #e1ebf7;
    background: #f9fbff;
}

.reservation-slot-item.available {
    background: #f9fbff;
}

.reservation-slot-item.disabled {
    background: #f1f5f9;
    opacity: 0.78;
}

.reservation-slot-time {
    display: block;
    font-size: 16px;
    font-weight: 800;
    color: #13213a;
    margin-bottom: 4px;
}

.reservation-slot-reason {
    margin: 0;
    font-size: 13px;
    color: #64728a;
}

.reservation-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.reservation-list-item {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 14px;
    align-items: center;

    padding: 16px 18px;
    border-radius: 16px;
    background: #f9fbff;
    border: 1px solid #e1ebf7;
    text-decoration: none;
    color: inherit;
    transition: 0.16s ease;
}

.reservation-list-item:hover {
    background: #eff6ff;
    border-color: #93c5fd;
}

.reservation-main-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.reservation-pet-name {
    font-size: 16px;
    font-weight: 800;
    color: #13213a;
}

.reservation-date-time {
    display: flex;
    gap: 8px;
    font-size: 13px;
    color: #64728a;
}

.reservation-sub-info {
    display: flex;
    gap: 8px;
    color: #4a5870;
    font-size: 14px;
    font-weight: 700;
}

.reservation-status {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    min-width: 86px;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;

    font-size: 12px;
    font-weight: 800;
}

.reservation-status.booked {
    background: #e3f3ff;
    color: #1d7fd3;
}

.reservation-status.completed {
    background: #e8f8ef;
    color: #148a4f;
}

.reservation-status.canceled {
    background: #f1f5f9;
    color: #64748b;
}

.reservation-status.no-show {
    background: #fff1f2;
    color: #e11d48;
}

.reservation-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.reservation-detail-row {
    padding: 16px 18px;
    border-radius: 16px;
    background: #f9fbff;
    border: 1px solid #e1ebf7;
}

.reservation-detail-row span {
    display: block;
    font-size: 12px;
    color: #64728a;
    margin-bottom: 6px;
}

.reservation-detail-row strong {
    font-size: 15px;
    color: #13213a;
    font-weight: 800;
}

.reservation-detail-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 22px;
}

.page-sub-btn.small {
    min-height: 40px;
    padding: 0 14px;
    font-size: 13px;
}

.page-sub-btn.danger {
    background: #fff1f2;
    border-color: #fecdd3;
    color: #e11d48;
}

.page-sub-btn.danger:hover {
    background: #ffe4e6;
    border-color: #fb7185;
}

@media (max-width: 900px) {
    .reservation-create-layout {
        grid-template-columns: 1fr;
    }

    .pet-list-item-with-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .pet-list-actions {
        width: 100%;
    }
}

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

    .reservation-sub-info {
        flex-direction: column;
        gap: 4px;
    }

    .reservation-status {
        width: fit-content;
    }

    .reservation-detail-grid {
        grid-template-columns: 1fr;
    }
}
/* =======================
   Doctor Reservation / Prescription
======================= */

.doctor-filter-form {
    display: flex;
    gap: 8px;
    align-items: center;
}

.doctor-filter-form .edit-form-input {
    width: 160px;
}

.doctor-reservation-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.doctor-reservation-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;

    padding: 16px 18px;
    border-radius: 16px;
    background: #f9fbff;
    border: 1px solid #e1ebf7;
}

.doctor-reservation-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.doctor-reservation-date {
    font-size: 16px;
    color: #13213a;
}

.doctor-reservation-pet {
    margin: 0;
    font-size: 14px;
    color: #64728a;
}

.doctor-reservation-comment {
    margin: 4px 0 0;
    max-width: 100%;

    font-size: 13px;
    color: #4a5870;
    line-height: 1.5;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: keep-all;
}

.doctor-reservation-side {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex-shrink: 0;
}

.doctor-prescription-layout {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 20px;
    align-items: start;
}

.section-small-title {
    font-size: 16px;
    font-weight: 800;
    color: #13213a;
    margin: 0 0 12px;
}

.previous-history-box,
.medication-section,
.prescription-detail-section {
    margin-top: 24px;
}

.previous-history-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.previous-history-item {
    display: flex;
    flex-direction: column;
    gap: 4px;

    padding: 13px 15px;
    border-radius: 14px;
    background: #f9fbff;
    border: 1px solid #e1ebf7;

    color: inherit;
    text-decoration: none;
}

.previous-history-item:hover {
    background: #eff6ff;
    border-color: #93c5fd;
}

.previous-history-item strong {
    color: #13213a;
    font-size: 14px;
}

.previous-history-item span {
    color: #1d2f48;
    font-size: 14px;
    font-weight: 700;
}

.previous-history-item small {
    color: #64728a;
    font-size: 12px;
}

.medication-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.prescription-content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.prescription-content-row {
    padding: 16px 18px;
    border-radius: 16px;
    background: #f9fbff;
    border: 1px solid #e1ebf7;
}

.prescription-content-row span {
    display: block;
    font-size: 12px;
    color: #64728a;
    margin-bottom: 6px;
}

.prescription-content-row p {
    margin: 0;
    color: #13213a;
    font-size: 15px;
    line-height: 1.6;
    white-space: pre-line;
}

.medication-detail-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.medication-detail-item {
    padding: 15px 17px;
    border-radius: 16px;
    background: #f9fbff;
    border: 1px solid #e1ebf7;
}

.medication-detail-item strong {
    display: block;
    color: #13213a;
    font-size: 15px;
    margin-bottom: 6px;
}

.medication-detail-item p {
    margin: 0 0 4px;
    color: #4a5870;
    font-size: 14px;
}

.medication-detail-item small {
    color: #64728a;
    font-size: 12px;
}
.medication-row-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.medication-row {
    padding: 16px;
    border-radius: 16px;
    background: #f9fbff;
    border: 1px solid #e1ebf7;
}

.medication-row-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.medication-header {
    margin-bottom: 12px;
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #13213a;
    font-size: 14px;
}

@media (max-width: 900px) {
    .medication-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .doctor-prescription-layout {
        grid-template-columns: 1fr;
    }

    .doctor-reservation-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .doctor-reservation-side {
        justify-content: flex-start;
    }

    .medication-grid {
        grid-template-columns: 1fr;
    }
}

/* =======================
   Doctor Reservation Detail
======================= */

.doctor-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    gap: 18px;
    align-items: start;
}

/* 예약 상세 안의 반려동물 카드 레이아웃 */
.doctor-detail-layout .pet-detail-top {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

/* 예약 상세 안에서만 이미지 크기 고정 */
.doctor-detail-layout .pet-profile-image-wrap {
    width: 160px;
    height: 160px;
    min-width: 160px;
    max-width: 160px;

    border-radius: 18px;
    overflow: hidden;

    background: #f1f5fb;
    border: 1px solid #dbe7f5;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* 예약 상세 안에서만 이미지가 틀을 넘지 않게 처리 */
.doctor-detail-layout .pet-profile-image {
    width: 100%;
    height: 100%;

    display: block;
    object-fit: cover;
}

/* 예약 상세 안에서만 사진 없음 placeholder 처리 */
.doctor-detail-layout .pet-profile-placeholder {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #7a8aa0;
    font-size: 14px;
    font-weight: 800;

    background: #f1f5fb;
}

/* 예약 상세 안의 반려동물 정보 영역 */
.doctor-detail-layout .pet-detail-info {
    min-width: 0;
}

/* 예약 상세 안의 반려동물 이름 */
.doctor-detail-layout .pet-detail-name {
    font-size: 24px;
    font-weight: 800;
    color: #13213a;
    margin-bottom: 16px;
}

/* 예약 상세 안의 반려동물 정보 그리드 */
.doctor-detail-layout .pet-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

/* 진료 처리 영역 */
.reservation-action-area {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.reservation-action-box {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.reservation-main-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.inline-button-form {
    display: inline-flex;
}

.cancel-action-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cancel-reason-box {
    margin-top: 14px;
    padding: 16px;
    border-radius: 16px;
    background: #fff8f8;
    border: 1px solid #ffd2d2;
}

.cancel-reason-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 8px;
}

/* 위험 버튼 */
.page-sub-btn.danger {
    background: #fff3f3;
    border-color: #ffd2d2;
    color: #c0392b;
}

.page-sub-btn.danger:hover {
    background: #ffe7e7;
}

/* 예약 상세 반응형 */
@media (max-width: 900px) {
    .doctor-detail-layout {
        grid-template-columns: 1fr;
    }

    .doctor-detail-layout .pet-detail-top {
        grid-template-columns: 1fr;
    }

    .doctor-detail-layout .pet-profile-image-wrap {
        width: 100%;
        height: 220px;
        min-width: 0;
        max-width: none;
    }

    .doctor-detail-layout .pet-detail-grid {
        grid-template-columns: 1fr;
    }
}


/* =======================
   Doctor Header Actions
======================= */

.mypage-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}


/* =======================
   Doctor Prescription History Search
======================= */

.history-search-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.history-category-search {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
}

.history-keyword-input {
    min-width: 280px;
}

.history-result-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.history-result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;

    padding: 16px 18px;
    border-radius: 16px;
    background: #f9fbff;
    border: 1px solid #e1ebf7;
}

.history-result-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.history-result-title {
    font-size: 16px;
    color: #13213a;
}

.history-result-meta,
.history-result-diagnosis,
.history-result-symptoms {
    margin: 0;
    font-size: 14px;
    color: #64728a;
    line-height: 1.5;
}

.history-result-diagnosis span:last-child {
    color: #1d2f48;
    font-weight: 700;
}

.history-result-side {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-shrink: 0;
}


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

@media (max-width: 900px) {
    .history-category-search {
        grid-template-columns: 1fr 1fr;
    }

    .history-keyword-input {
        min-width: 0;
    }
}

@media (max-width: 700px) {
    .mypage-header-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .history-category-search {
        grid-template-columns: 1fr;
    }

    .history-result-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .history-result-side {
        justify-content: flex-start;
    }
}

/* =======================
   Doctor Prescription Pet Summary
======================= */

.prescription-pet-summary {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    margin-bottom: 20px;
}

.prescription-pet-image-wrap {
    width: 120px;
    height: 120px;
    border-radius: 18px;
    overflow: hidden;
    background: #f1f5fb;
    border: 1px solid #dbe7f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prescription-pet-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.prescription-pet-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7a8aa0;
    font-size: 14px;
    font-weight: 800;
    background: #f1f5fb;
}

.prescription-pet-info {
    min-width: 0;
}

@media (max-width: 720px) {
    .prescription-pet-summary {
        grid-template-columns: 1fr;
    }

    .prescription-pet-image-wrap {
        width: 100%;
        height: 220px;
    }
}

.nurse-reservation-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(460px, 1.1fr);
    gap: 24px;
    align-items: start;
}

.nurse-reservation-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.nurse-slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}

.nurse-slot-card {
    min-height: 128px;
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
}

.nurse-slot-card.available {
    border-color: #c7d2fe;
    background: #f8fafc;
}

.nurse-slot-card.disabled {
    opacity: 0.55;
    background: #f3f4f6;
}

.nurse-slot-card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nurse-slot-time {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
}

.nurse-slot-reason {
    margin: 0;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
}

.nurse-slot-button {
    width: 100%;
    min-height: 38px;
    border: none;
    border-radius: 999px;
    background: #2563eb;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.nurse-slot-button:disabled {
    cursor: not-allowed;
    background: #9ca3af;
}

.nurse-pet-detail-layout {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(420px, 1fr);
    gap: 24px;
    align-items: start;
}

.nurse-pet-profile-box {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: center;
    text-align: center;
}

.nurse-pet-profile-image {
    width: 180px;
    height: 180px;
    border-radius: 24px;
    object-fit: cover;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
}

.nurse-pet-profile-placeholder {
    width: 180px;
    height: 180px;
    border-radius: 24px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
}

.nurse-pet-profile-name {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
}

.nurse-pet-profile-meta {
    margin: 4px 0 0;
    color: #6b7280;
    font-size: 14px;
}

.nurse-pet-detail-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media (max-width: 900px) {
    .nurse-reservation-layout,
    .nurse-pet-detail-layout {
        grid-template-columns: 1fr;
    }
}

.print-page {
    max-width: 820px;
    margin: 0 auto;
    background: #ffffff;
    padding: 40px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
}

.print-title {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 32px;
}

.print-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
    margin-bottom: 32px;
}

.print-info-row {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e5e7eb;
    padding: 10px 0;
    font-size: 15px;
}

.print-info-row span {
    color: #6b7280;
}

.print-info-row strong {
    color: #111827;
    font-weight: 600;
}

.print-section-title {
    font-size: 18px;
    font-weight: 700;
    margin: 28px 0 12px;
}

.print-medication-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
}

.print-medication-table th,
.print-medication-table td {
    border: 1px solid #d1d5db;
    padding: 10px;
    font-size: 14px;
    text-align: left;
    vertical-align: top;
}

.print-medication-table th {
    background: #f3f4f6;
    font-weight: 700;
}

.print-footer {
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
}

.print-logo-box {
    width: 180px;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.print-logo-image {
    max-width: 160px;
    max-height: 70px;
    object-fit: contain;
}

.print-actions {
    max-width: 820px;
    margin: 24px auto;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

@media print {
    body {
        background: #ffffff;
    }

    .site-header,
    .site-footer,
    .print-actions,
    header,
    footer {
        display: none !important;
    }

    .page-main {
        padding: 0;
    }

    .print-page {
        max-width: none;
        border: none;
        border-radius: 0;
        padding: 0;
        margin: 0;
    }

    @page {
        size: A4;
        margin: 18mm;
    }
}