@charset "UTF-8";

/* ========================================
   Payment Page Styles
   ======================================== */
/* Payment Container */
.payment-container>*~* {
    margin-top: 3.2rem;
}

/* Point Display Box */
.payment-point-display {
    padding: 2rem;
    background-color: #f8f9fa;
    border-radius: 1.2rem;
    text-align: center;
}

.payment-point-label {
    font-size: 1.7rem;
    color: #666;
    margin-bottom: 0.2rem;
}

.payment-point-value {
    font-size: 2.8rem;
    font-weight: 800;
    color: #5B4FFF;
}

/* Charge Amount Section */
.payment-charge-section {
    margin-top: 2.4rem;
}

.payment-method {
    margin-bottom: 2.4rem;
    padding-bottom: 2.4rem;
    border-bottom: 1px solid #ddd;
}

.payment-method:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.payment-method-section .swiper {
    --swiper-theme-color: #fff;
    margin-top: 1.6rem;
}

.payment-method-section .swiper-button-prev,
.payment-method-section .swiper-button-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    background-color: rgb(44 45 55 / 40%);
    border-radius: 50%;
}

.payment-method-section .swiper-button-prev {
    padding-right: 0.15rem;
}

.payment-method-section .swiper-button-next {
    padding-left: 0.15rem;
}

.payment-method-section .swiper-button-prev:after,
.payment-method-section .swiper-button-next:after {
    font-size: 1.6rem;
    display: block;
}

/* Quick Amount Buttons */
.payment-quick-buttons {
    display: grid;
    grid-template-columns: repeat(4, minmax(min-content, 1fr));
    gap: 0.8rem;
    margin-top: 0.8rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Payment Notice */
.payment-notice {
    margin-top: 2rem;
    margin-bottom: 2rem;
    padding: 2rem 1.6rem;
    font-size: 1.5rem;
    color: #666;
    line-height: 1.6;
    background-color: #f8f9fa;
    border-radius: 0.8rem;
}

.payment-notice b {
    display: block;
    font-size: 1.6rem;
    margin-bottom: 0.2rem;
}

.payment-notice ul li {
    display: flex;
}

.payment-notice ul li::before {
    content: "";
    display: block;
    width: 4px;
    height: 4px;
    margin-top: 1rem;
    border-radius: 50%;
    background-color: #b4b4b4;
    margin-right: 1rem;
    flex-shrink: 0;
}

/* Auto Charge Box */
.payment-auto-charge-box {
    margin-top: 1.6rem;
    padding: 1.2rem;
    border: 2px solid var(--color-primary);
    border-radius: 0.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    cursor: pointer;
    background-color: #fff;
}

.payment-auto-charge-content {
    flex: 1;
}

.payment-auto-charge-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-primary);
}

.payment-auto-charge-desc {
    font-size: 1.5rem;
    color: var(--color-text);
}

.payment-auto-charge-arrow {
    font-size: 1.8rem;
    color: var(--color-primary);
}

/* Payment Loading */
.payment-loading {
    text-align: center;
    padding: 4rem;
}

/* ========================================
   Analysis Detail Page Styles
   ======================================== */
/* Spinner Container */
.analysis-spinner-container {
    display: flex;
    justify-content: center;
}

/* ========================================
   Point Refund Page Styles
   ======================================== */
/* Refund Loading */
.refund-loading {
    text-align: center;
    padding: 4rem;
}

/* Refund Point Info Box */
.refund-point-info {
    margin-top: -1rem;
    padding: 2rem;
    background-color: #f8f9fa;
    border-radius: 0.8rem;
}

.refund-point-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.2rem;
}

.refund-point-row:last-child {
    margin-bottom: 0;
}

.refund-point-label {
    font-size: 1.6rem;
    color: #666;
}

.refund-point-value {
    font-size: 2rem;
    font-weight: bold;
    color: #333;
}

.refund-point-value-primary {
    font-size: 2rem;
    font-weight: bold;
    color: #6f51ea;
}

/* Refund Form */
.refund-form-section {
    margin-top: 1.6rem;
}

.refund-form-label {
    display: block;
    font-size: 1.4rem;
    font-weight: 500;
    margin-bottom: 0.8rem;
}

.refund-input-wrapper {
    position: relative;
}

.refund-input {
    width: 100%;
    padding: 1.2rem;
    border: 0.1rem solid #ddd;
    border-radius: 0.8rem;
    font-size: 1.6rem;
    font-weight: 600;
}

.refund-input.with-suffix {
    padding-right: 4rem;
}

.refund-input.error {
    border: 0.1rem solid #f44336;
    margin-bottom: 0.8rem;
}

.refund-input.normal {
    margin-bottom: 1.6rem;
}

.refund-input-suffix {
    position: absolute;
    right: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.6rem;
    font-weight: 600;
    color: #666;
}

.refund-amount-hint {
    margin-top: 0.8rem;
    font-size: 1.3rem;
    color: #666;
}

/* ========================================
   Payment Result Page Styles
   ======================================== */
/* Result Loading */
.result-loading {
    text-align: center;
    padding: 4rem;
}

/* Result Container */
.result-container {
    text-align: center;
    padding: 4rem;
}

.result-icon {
    font-size: 4.8rem;
    margin-bottom: 1.6rem;
}

.result-title {
    margin: 0 0 1.6rem 0;
    font-size: 2.4rem;
}

.result-title.success {
    color: #4CAF50;
}

.result-title.error {
    color: #f44336;
}

.result-message {
    color: #666;
    margin-bottom: 3.2rem;
}

/* Result Info Box */
.result-info-box {
    padding: 2rem;
    background-color: #f8f9fa;
    border-radius: 0.8rem;
    margin-bottom: 3.2rem;
}

.result-info-row {
    margin-bottom: 1.2rem;
}

.result-info-row:last-child {
    margin-bottom: 0;
}

.result-info-label {
    font-size: 1.4rem;
    color: #666;
}

.result-info-value {
    font-size: 2.4rem;
    font-weight: bold;
    color: #4CAF50;
}

.result-info-detail {
    font-size: 1.3rem;
    color: #999;
}

/* Result Button */
.result-button {
    padding: 1.6rem 4.8rem;
    border: none;
    border-radius: 0.8rem;
    background-color: #4CAF50;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 600;
    cursor: pointer;
}

/* ========================================
   Payment Result Page Styles
   ======================================== */
.payment-result-container {
    text-align: center;
    padding: 4rem 2rem;
}

.payment-result-icon {
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
}

.payment-result-icon img {
    width: 6.4rem;
    height: 6.4rem;
}

.payment-result-title {
    margin: 0 0 1.2rem 0;
    font-size: 2.2rem;
    font-weight: 700;
}

.payment-result-title.success {
    color: #333;
}

.payment-result-title.error {
    color: #333;
}

.payment-result-message {
    color: #666;
    font-size: 1.5rem;
    margin-bottom: 2.4rem;
}

.payment-result-info-box {
    padding: 2rem;
    background-color: #f8f9fa;
    border-radius: 1.2rem;
    margin-bottom: 3.2rem;
}

.payment-result-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.payment-result-info-label {
    font-size: 1.5rem;
    color: #666;
}

.payment-result-info-value {
    font-size: 2rem;
    font-weight: 700;
    color: #5B4FFF;
}

.payment-result-info-detail {
    font-size: 1.3rem;
    color: #999;
    margin-top: 0.8rem;
}

.payment-result-buttons {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

/* ========================================
   Point Page Styles
   ======================================== */
/* Loading State */
.loading-container {
    text-align: center;
    padding: 4rem;
}

/* Point Summary Section */
.point-header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.point-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex: 1;
}

.point-item {
    flex: 1 1 0%;
    margin-bottom: 1.2rem;
}

.point-label {
    font-size: 1.4rem;
    color: #666;
}

.point-value-wrapper {
    margin-top: 0.2rem;
}

.point-value {
    font-size: 2.8rem;
    font-weight: bold;
    color: #333;
}

.tag-auto-charge {
    font-weight: 600;
    color: var(--color-primary);
    background-color: #f3f2ff;
    padding: 0.6rem 1.6rem;
    border-radius: 999px;
}

.tag-auto-charge.set {
    background-color: #eaeaea;
    color: var(--color-text);
    border: 1px solid #ddd;
}

/* Buttons */
.button-group {
    display: flex;
    gap: 0.8rem;
    margin-top: 1.6rem;
}

/* Modal Overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

/* Product Modal */
.modal-content-product {
    background-color: #fff;
    border-radius: 1.2rem;
    padding: 3.2rem;
    max-width: 60rem;
    width: 90%;
    max-height: 80vh;
    overflow: auto;
    box-shadow: 0 0.4rem 2rem rgba(0, 0, 0, 0.15);
}

.modal-title {
    margin: 0 0 2.4rem 0;
    font-size: 2rem;
    font-weight: bold;
    color: #333;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.6rem;
}

.product-item {
    padding: 2.4rem;
    border: 0.2rem solid #ddd;
    border-radius: 1.2rem;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.product-item:hover {
    border-color: var(--color-primary);
    background-color: #f7f5ff;
}

.product-amount {
    font-size: 2.4rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 0.8rem;
}

.product-point {
    font-size: 1.4rem;
    color: var(--color-primary);
    font-weight: 600;
}

.modal-info {
    margin-top: 2.4rem;
    padding: 1.6rem;
    background-color: #f8f9fa;
    border-radius: 0.8rem;
}

.modal-info-text {
    font-size: 1.3rem;
    color: #666;
    margin: 0;
    line-height: 1.6;
}

.btn-modal-close {
    width: 100%;
    margin-top: 2rem;
    padding: 1.2rem;
    border: 0.1rem solid #ddd;
    border-radius: 0.8rem;
    background-color: #fff;
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: 500;
}

/* Charge Confirm Modal */
.modal-content-charge {
    background-color: #fff;
    border-radius: 1.2rem;
    padding: 3.2rem;
    max-width: 40rem;
    width: 90%;
    box-shadow: 0 0.4rem 2rem rgba(0, 0, 0, 0.15);
}

.charge-amount-box {
    margin-bottom: 2.4rem;
    padding: 2rem;
    background-color: #f8f9fa;
    border-radius: 0.8rem;
}

.charge-label {
    font-size: 1.4rem;
    color: #666;
    margin-bottom: 0.8rem;
}

.charge-amount {
    font-size: 2.8rem;
    font-weight: bold;
    color: var(--color-primary);
}

.charge-point-info {
    font-size: 1.3rem;
    color: #999;
    margin-top: 0.8rem;
}

.charge-description {
    font-size: 1.3rem;
    color: #666;
    margin-bottom: 2.4rem;
    line-height: 1.6;
}

.modal-button-group {
    display: flex;
    gap: 0.8rem;
}

.btn-cancel {
    flex: 1;
    padding: 1.2rem;
    border: 0.1rem solid #ddd;
    border-radius: 0.8rem;
    background-color: #fff;
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: 500;
}

.btn-confirm {
    flex: 1;
    padding: 1.2rem;
    border: none;
    border-radius: 0.8rem;
    background-color: var(--color-primary);
    color: #fff;
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: 600;
}

/* Tab Menu */
.tab-menu {
    display: flex;
    gap: 0.8rem;
    margin-bottom: 2rem;
    border-bottom: 0.2rem solid #f0f0f0;
}

.tab-button {
    padding: 1.2rem 2.4rem;
    border: none;
    border-bottom: 0.2rem solid transparent;
    background-color: transparent;
    color: #666;
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: 500;
    transition: all 0.2s;
    margin-bottom: -0.2rem;
}

.tab-button.active {
    border-bottom-color: var(--color-primary);
    color: var(--color-primary);
    font-weight: 600;
}

/* Point History Period */
.point-history-period {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}

.point-history-period span {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    color: var(--color-text-gray);
    background-color: #f3f2ff;
    padding: 0.8rem 1.6rem;
    border-radius: 0.8rem;
    white-space: nowrap;
}

.point-history-period b {
    display: block;
    margin-left: 1.2rem;
    color: var(--color-primary);
}

.point-history-period .form-select {
    width: 11rem;
    height: 4rem;
    padding: 0 1.6rem;
    font-size: 1.6rem;
    background-size: 16px 16px;
}

/* Point History */
.empty-message {
    text-align: center;
    padding: 4rem;
    color: #999;
}

.history-list {
    margin-top: 1.2rem;
}

.history-item {
    padding: 1.6rem 0;
    border-bottom: 0.1rem solid #eee;
    display: flex;
    justify-content: space-between;
    gap: 1.6rem;
}

.history-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.history-item-content {
    flex: 1;
}

.history-item-title {
    font-weight: bold;
}

.history-item-title b {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text-gray);
    border-radius: 999px;
}

.history-item-date {
    margin-top: 3.2rem;
    font-size: 1.4rem;
    color: #999;
}

.history-item-description {
    font-size: 1.4rem;
    color: #666;
}

.history-item-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: right;
    gap: 0.8rem;
}

.history-item-amount {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex-grow: 1;
}

.history-item-balance {
    font-size: 1.4rem;
    color: #999;
}

.amount-charge {
    font-size: 1.8rem;
    color: var(--color-primary);
    font-weight: bold;
}

.amount-deduct {
    font-size: 1.8rem;
    color: var(--color-accent);
    font-weight: bold;
}

.amount-refund-pending {
    font-size: 1.8rem;
    color: var(--color-text-gray);
    font-weight: bold;
}

.btn-purchase-cancel {
    padding: 0.4rem 1.2rem;
    border: 1px solid #ddd;
    border-radius: 0.6rem;
    background-color: #fff;
    cursor: pointer;
    font-size: 1.3rem;
    font-weight: 600;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
    margin-top: 2.4rem;
    padding: 1.6rem 0;
}

.pagination-button {
    padding: 0.8rem 1.6rem;
    border: 0.1rem solid #ddd;
    border-radius: 0.4rem;
    background-color: #fff;
    color: #333;
    cursor: pointer;
}

.pagination-button:disabled {
    background-color: #f5f5f5;
    color: #999;
    cursor: not-allowed;
}

.pagination-page {
    padding: 0.8rem 1.2rem;
    border: 0.1rem solid #ddd;
    border-radius: 0.4rem;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    font-weight: normal;
}

.pagination-page.active {
    background-color: #1976d2;
    color: #fff;
    font-weight: bold;
}

/* Load More Button */
.load-more-container {
    display: flex;
    justify-content: center;
    margin-top: 2.4rem;
}

.btn-load-more {
    padding: 1.2rem 3.2rem;
    border: 0.1rem solid #ddd;
    border-radius: 0.6rem;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    font-size: 1.4rem;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-load-more:hover {
    background-color: #f5f5f5;
    border-color: #999;
}

/* ========================================
   Auto Charge Page Styles
   ======================================== */
/* 토글 섹션 */
.auto-charge-toggle-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 2.4rem;
    border-bottom: 1px solid #eee;
}

.auto-charge-label {
    font-size: 2rem;
    font-weight: 700;
}

/* 토글 스위치 */
.toggle-switch {
    position: relative;
    width: 5.2rem;
    height: 2.8rem;
    background-color: #ddd;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    padding: 0;
}

.toggle-switch.active {
    background-color: var(--color-primary);
}

.toggle-slider {
    position: absolute;
    top: 0.3rem;
    left: 0.3rem;
    width: 2.2rem;
    height: 2.2rem;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.2);
}

.toggle-switch.active .toggle-slider {
    transform: translateX(2.4rem);
}

/* 자동충전 조건 섹션 */
.auto-charge-condition {
    margin-top: 2.4rem;
}

.condition-text {
    padding: 1.6rem 2.4rem;
    font-size: 1.8rem;
    font-weight: 600;
    background-color: #f8f9fa;
    border-radius: 1.2rem;
    line-height: 200%;
}

.condition-text .condition-value-select {
    margin: 0.4rem 0.8rem;
    margin-left: 0;
}

/* Custom Select Styles */
.custom-select-container {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    min-width: 12rem;
    line-height: 2.4rem;
    /* Slightly wider for box look */
}

.custom-select-container.disabled {
    opacity: 0.6;
    pointer-events: none;
}

/* Custom Trigger (Visible on Desktop) */
.custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1.2rem;
    background-color: #fff;
    border: 1px solid #ddd;
    /* Default border */
    border-radius: 0.8rem;
    /* Rounded corners like image */
    cursor: pointer;
    transition: all 0.2s;
    min-width: 100%;
    box-sizing: border-box;
}

.custom-select-trigger span {
    font-size: 1.6rem;
    font-weight: 500;
    color: #333;
}

.custom-select-trigger .arrow {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #ccc;
    /* Lighter arrow */
    margin-left: 1rem;
    transition: transform 0.2s;
    border-radius: 2px;
}

.custom-select-trigger.open {
    border-color: var(--color-primary);
    /* Purple border when open */
    box-shadow: 0 0 0 2px rgba(157, 140, 255, 0.2);
}

.custom-select-trigger.open .arrow {
    transform: rotate(180deg);
    border-top-color: var(--color-primary);
}

/* Custom Options Dropdown */
.custom-select-options {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    width: 100%;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 1.2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    /* Soft shadow */
    z-index: 100;
    max-height: 240px;
    overflow-y: auto;
    padding: 0.4rem;
    box-sizing: border-box;
}

.custom-select-option {
    padding: 0.8rem 1.2rem;
    font-size: 1.6rem;
    color: #333;
    cursor: pointer;
    border-radius: 0.8rem;
    /* Rounded options */
    transition: background-color 0.3s, color 0.3s;
    margin-bottom: 0.2rem;
}

.custom-select-option:last-child {
    margin-bottom: 0;
}

.custom-select-option:hover {
    background-color: #f3f2ff;
    color: var(--color-primary);
    /* Light purple hover */
}

.custom-select-option.selected {
    background-color: #f3f2ff;
    color: var(--color-primary);
    font-weight: 600;
}

/* Removed previous text-only overrides to keep the box look */
.auto-charge-card-section {
    margin-top: 4.8rem;
}

.auto-charge-card-section .box_title.sub .btn {
    width: auto;
    margin-left: auto;
}

/* 만료 표시 */
.history-item-expiry {
    font-size: 1.5rem;
    color: var(--color-text-gray);
}

/* ========================================
   Responsive Design
   ======================================== */
@media all and (max-width: 575px) {
    .point-history-period {
        flex-direction: column;
    }

    .point-history-period span {
        width: 100%;
        justify-content: center;
    }

    .point-history-period .form-select {
        margin-top: 0.8rem;
        width: 100%;
        text-align: center;
    }
}

/* ========================================
   ANS014 - 검사로그/투약로그
   ======================================== */
/* 트리 구조 컨테이너 */
.ans014-tree-container {
    border-radius: 8px;
    overflow: hidden;
    border-top: 1px solid #e5e7eb;
}

/* 7일치료 분류 트리: 하위 계층(소>세>세세>세세세) 들여쓰기 */
.ans003-tree-children {
    padding-left: 1.6rem;
}

/* 7일치료 진료내역 표: 부모 분류 노드(마지막 뎁스) 박스(.ans014-*) 좌측 라인에 줄맞춤.
   표 margin-left = 해당 계층 노드의 margin-left와 동일 → 표 보더가 노드 박스 좌측과 정렬
   (코드명 content가 아니라 박스 기준). */
.ans003-rec-d0 {
    margin-left: 0;
}
.ans003-rec-d1 {
    margin-left: 2.8rem;
}
.ans003-rec-d2 {
    margin-left: 5.7rem;
}
.ans003-rec-d3 {
    margin-left: 8.6rem;
}
.ans003-rec-d4 {
    margin-left: 0;
}

/* 대분류 */
.ans014-tree-container> :last-child>.ans014-major {
    border-radius: 0 0 8px 8px;
}

.ans014-major {
    padding: 1rem 1.6rem;
    background-color: #f5f8fa;
    border: 1px solid #e5e7eb;
    border-top: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ans014-major-icon,
.ans014-category-icon {
    display: flex;
    justify-content: center;
    border-radius: 32%;
    align-items: center;
    flex-shrink: 0;
    font-weight: 500;
    background: #626976;
    border: 2px solid #ccd4e3;
    width: 2.4rem;
    height: 2.4rem;
    color: #fff;
}

.ans014-major-content {
    flex: 1;
}

.ans014-major-title {
    display: flex;
    flex-direction: column;
    font-weight: 600;
    font-size: 1.6rem;
    color: #333;
}

/* ========================================
   ANS003 - 카드형 아코디언 (5년내 7일진료 / 30일투약)
   ======================================== */
.ans003-accordion-container {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.ans003-accordion-card {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.ans003-accordion-card--expanded {
    border-color: #d0d5dd;
}

.ans003-accordion-header {
    padding: 1.2rem 1.6rem;
    background-color: #f5f8fa;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;

}

.ans003-accordion-header--between {
    justify-content: space-between;
}

.ans003-accordion-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ans003-accordion-card:not(.ans003-accordion-card--expanded) .ans003-accordion-header {
    border-radius: 8px;
}

.ans003-accordion-card--expanded .ans003-accordion-header {
    background-color: #eef1f5;
    border-bottom: 1px solid #e5e7eb;
    border-radius: 8px 8px 0 0;
}

.ans003-accordion-icon {
    display: flex;
    justify-content: center;
    border-radius: 32%;
    align-items: center;
    flex-shrink: 0;
    font-weight: 500;
    background: #626976;
    border: 2px solid #ccd4e3;
    width: 2.4rem;
    height: 2.4rem;
    color: #fff;
}

.ans003-accordion-title {
    font-weight: 600;
    font-size: 1.6rem;
    color: #333;
}

.ans003-accordion-date {
    color: #888;
    font-weight: 500;
    /* 날짜가 중간에서 끊기지 않고 통째로 다음 줄로 넘어가도록 */
    white-space: nowrap;
}

.ans003-accordion-badge {
    font-weight: 600;
    font-size: 1.5rem;
    color: #2563eb;
    white-space: nowrap;
}
 
.ans003-accordion-card.ans003-accordion-card--expanded {
    border-bottom: none;
}

.ans003-accordion-card.ans003-accordion-card--expanded {
    border-bottom: none;
    border-radius: 8px 8px 0 0;
}


.ans003-accordion-body .diag-box {
    border: none;
    margin: 0;
    padding: 0;
    border-radius: 0;
    overflow: visible;
}

.ans003-minor-item--expanded:not(:last-child) .ans003-accordion-body .table-box {
    border-bottom: none;
}

.ans003-minor-item--expanded + div > .ans014-middle {
    border-top: 1px solid #e5e7eb;
}

.ans014-tree-container div.expand + div > .ans014-major {
    border-top: 1px solid #e5e7eb;
}

.ans014-tree-container div.expand + div > .ans014-major .ans014-middle { 
    border-bottom: 1px solid #e5e7eb;
}

.ans014-tree-container div.expand .ans014-middle { 
    border-bottom: 1px solid #e5e7eb;
}

.ans014-tree-container div.expand .ans003-minor-wrapper > div:first-child > .ans014-middle {
    border-top: none;
}

.ans003-accordion-body .table-box {
    max-height: 800px;
    overflow-y: auto;
    margin-top: 0;
    /* 표 외곽 테두리(상하좌우): 헤더 배경(rgb 247,247,252)과 대비되는 #cccccc */
    border: 1px solid #cccccc;
}

.ans003-accordion-body .table-box dl {
    border-top: none;
}

/* 7일치료 표: 셀 텍스트를 좌측정렬해 첫 컬럼 글자가 분류 라인(M7097 등)과 맞도록.
   dt/dd 가 flex 인 경우가 있어 text-align + justify-content 둘 다 지정 */
.ans014-tree-container .ans003-accordion-body .table-box dt,
.ans014-tree-container .ans003-accordion-body .table-box dd {
    text-align: left;
    justify-content: flex-start;
}

/* 셀 텍스트가 좌우 보더에 딱 붙지 않도록 셀 자체에 안쪽 여백 (데스크탑·모바일 공통).
   공통 style.css의 .table-box dl>.cell / 모바일 dt{padding:0} 보다 우선하도록 스코프를 깊게 한다. */
.ans014-tree-container .ans003-accordion-body .table-box dl > .cell {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
}

.ans003-accordion-body .diag-box .table-box:first-of-type { 
    margin-top: 0;
}

.ans003-thead {
    position: sticky;
    top: 0;
    z-index: 1;
    overflow: visible;
}

.ans003-thead dt {
    display: flex !important;
}

@media all and (max-width: 1024px) {
    .ans003-accordion-body .table-box {
        max-height: 600px;
    }
}

@media all and (max-width: 860px) {
    dl.ans003-thead {
        display: none !important;
    }

    .ans003-accordion-body .table-box {
        max-height: 900px;
        padding-right: 0.8rem;
    }

    /* 마지막 뎁스 표는 좁은 폭에서도 바로 윗 분류 박스 라인과 좌측을 맞춘다(들여쓰기 유지).
       단 중분류는 좁은 폭에서 margin이 1rem으로 줄므로 표도 동일하게 맞춘다. */
    .ans003-rec-d1 {
        margin-left: 1rem;
    }
}

.ans003-accordion-fold-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 1rem 0;
    border: none;
    border-top: 1px solid #e5e7eb;
    border-radius: 0 0 8px 8px;
    background-color: #f9fafb;
    color: #666;
    font-size: 1.4rem;
    font-weight: 500;
    cursor: pointer;
}

.ans003-accordion-fold-btn:hover {
    background-color: #f0f2f5;
    color: #444;
}

/* ===== 상세보기(모달) 리스트 행 ===== */
/* 클릭 시 토글이 아니라 상세보기 모달을 여는 행 */
.ans003-accordion-header--detail {
    transition: background-color 0.15s ease;
}

.ans003-accordion-header--detail:hover {
    background-color: #eef1f5;
}

/* 제목 영역이 남는 공간을 차지하고 줄어들 수 있게 하여 (날짜)가 줄바꿈되도록 */
.ans003-accordion-header--detail .ans003-accordion-header-left {
    flex: 1;
    min-width: 0;
}

/* 제목+(날짜) : 좁아지면 (날짜)가 두 번째 줄로 내려가도록 flex-wrap */
.ans003-accordion-title--wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.6rem;
    row-gap: 0.2rem;
}

/* 우측 상세보기 아이콘 버튼 */
.ans003-accordion-detail-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3.2rem;
    height: 3.2rem;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

.ans003-accordion-detail-btn svg {
    width: 2.4rem;
    height: 2.4rem;
}

/* ===== 상세보기 모달 전용 독립 테이블 (gdm-*) =====
   전역 .table-box / dl / dt / dd 규칙과 분리하여 헤더 단일화 + sticky 고정 +
   세로 구분선 + 가로 스크롤을 자체 제어한다. .group-detail-modal 스코프라 타 화면 영향 없음. */
.group-detail-modal .gdm-section + .gdm-section {
    margin-top: 2.4rem;
}

/* 섹션 제목: 처방조제정보 .table-title 과 동일 톤(2rem/700) */
.group-detail-modal .gdm-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 1.2rem;
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text, #2c3e50);
}

.group-detail-modal .gdm-count {
    font-weight: 600;
    font-size: 1.5rem;
    color: #2563eb;
    white-space: nowrap;
}

/* 모달 헤더: 긴 제목/2줄 제목/기간 줄을 안전하게 수용 (.group-detail-modal 스코프).
   - 고정 height(10rem) → min-height 로 바꿔 제목이 줄바꿈되어도 헤더가 안 깨지게
   - h2 max-width 제한으로 우측 X(닫기) 버튼과 겹치지 않게 */
#modal.modal-full.group-detail-modal .modal_head {
    height: auto;
    min-height: 10rem;
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
}

#modal.modal-full.group-detail-modal .modal_head h2 {
    max-width: calc(100% - 10rem);
    text-align: center;
    line-height: 1.3;
    word-break: keep-all;
}

/* 모달 제목 헤더의 제목 아래 줄바꿈 기간 표기 (7일치료/30일투약 모달) */
.group-detail-modal .modal_head h2 .gdm-head-period {
    display: block;
    margin-top: 0.4rem;
    color: #888;
    font-size: 1.4rem;
    font-weight: 500;
}

/* ===== 카드형 레코드 (가로 스크롤 없음) =====
   구조: 레코드마다 둥근 박스 카드. 폰트만 처방조제 톤(1.6rem, 라벨 700/값 500)으로 유지. */
.group-detail-modal .gdm-cards {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    font-size: 1.6rem;
    color: #424242;
}

.group-detail-modal .gdm-card {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.group-detail-modal .gdm-card-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.2rem;
    padding: 0.9rem 1.2rem;
}

/* 카드 내부 필드 사이 옅은 구분선 */
.group-detail-modal .gdm-card-row + .gdm-card-row {
    border-top: 1px solid #f0f0f0;
}

.group-detail-modal .gdm-card-label {
    flex-shrink: 0;
    color: #555;
    font-weight: 700;
}

.group-detail-modal .gdm-card-value {
    text-align: right;
    color: #333;
    font-weight: 500;
    /* 긴 코드명도 글자 단위가 아니라 자연스럽게 줄바꿈 */
    word-break: keep-all;
    overflow-wrap: anywhere;
}

/* ===== 모달 내부 계층 트리 아코디언 (7일 치료) ===== */
.group-detail-modal .gdm-node + .gdm-node {
    margin-top: 0.6rem;
}

.group-detail-modal .gdm-node-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1rem 1.2rem;
    background-color: #f5f8fa;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
}

.group-detail-modal .gdm-node-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 32%;
    background: #626976;
    border: 2px solid #ccd4e3;
    color: #fff;
    font-weight: 500;
    line-height: 1;
}

.group-detail-modal .gdm-node-title {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    font-size: 1.5rem;
    color: #333;
    word-break: keep-all;
}

.group-detail-modal .gdm-node-count {
    flex-shrink: 0;
    color: #2563eb;
    font-weight: 600;
    font-size: 1.4rem;
    white-space: nowrap;
}

/* 펼쳐진 하위: 좌측 들여쓰기로 계층 표현 */
.group-detail-modal .gdm-node-body {
    margin-top: 0.6rem;
    padding-left: 1.4rem;
    border-left: 2px solid #e5e7eb;
    margin-left: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* 2뎁스 서브 아코디언 (세분류) */
.ans003-accordion-card--sub {
    border: 1px solid #e9ecef;
    border-radius: 6px;
    margin: 0.4rem 0.8rem;
}

.ans003-accordion-card--sub .ans003-accordion-header--sub {
    padding: 0.8rem 1.2rem;
    background-color: #fafbfc;
    border-radius: 6px;
}

.ans003-accordion-card--sub.ans003-accordion-card--expanded .ans003-accordion-header--sub {
    background-color: #f0f2f5;
    border-bottom: 1px solid #e9ecef;
    border-radius: 6px 6px 0 0;
}

.ans003-accordion-card--sub .ans003-accordion-title {
    font-size: 1.5rem;
    font-weight: 500;
}

.ans003-accordion-card--sub .ans003-accordion-icon {
    width: 2rem;
    height: 2rem;
    font-size: 1.4rem;
    min-width: 2rem;
}

.ans014-comment {
    font-weight: 500;
    font-size: 1.5rem;
    color: #2563eb;
}

.ans014-comment-icon::before {
    content: '💡 ';
}

/* 중분류 */
.ans014-middle {
    margin-left: 2.8rem;
    padding: 1rem 1.6rem;
    /* border-bottom: 1px solid #e5e7eb; */
    border-left: 2px solid #7a7e86;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
}

@media (max-width: 860px) {
    .ans014-middle {
        margin-left: 1rem;
    }
}

.ans014-middle-icon,
.ans014-minor-icon {
    display: flex;
    justify-content: center;
    border-radius: 32%;
    align-items: center;
    flex-shrink: 0;
    font-weight: 500;
    border: 1px solid #ddd;
    width: 2.4rem;
    height: 2.4rem;
    color: #919191;
}

.ans014-middle-content {
    flex: 1;
}

.ans014-middle-title {
    display: flex;
    flex-direction: column;
    font-weight: 600;
    font-size: 1.5rem;
    color: #444;
}

/* 소분류 */
.ans014-minor {
    margin-left: 5.7rem;
    padding: 1rem 1.6rem;
    background-color: #fff;
    border-bottom: 1px solid #e5e7eb;
    border-left: 2px solid #91b1d0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ans014-minor-content {
    flex: 1;
}

.ans014-minor-title {
    display: flex;
    flex-direction: column;
    font-size: 1.5rem;
    color: #555;
    font-weight: 500;
}

/* 세분류 */
.ans014-detail {
    margin-left: 8.6rem;
    padding: 1rem 2.4rem;
    background-color: #f4f5f6;
    border-bottom: 1px solid #f0f0f0;
    border-left: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ans014-detail.clickable {
    cursor: pointer;
}

.ans014-detail.non-clickable {
    cursor: default;
}

.ans014-detail-icon {
    flex-shrink: 0;
}

.ans014-detail-content {
    flex: 1;
}

.ans014-detail-title {
    display: flex;
    flex-direction: column;
    font-size: 1.4rem;
    color: #666;
}

/* 세세분류 (Fine) */
.ans014-fine {
    padding: 10px 16px 10px 144px;
    background-color: #fff;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ans014-fine.clickable {
    cursor: pointer;
}

.ans014-fine.non-clickable {
    cursor: default;
}

.ans014-fine-icon {
    flex-shrink: 0;
}

.ans014-fine-content {
    flex: 1;
}

.ans014-fine-title {
    font-size: 13px;
    color: #666;
}

/* 세세세분류 (SubFine) */
.ans014-subfine {
    padding: 10px 16px 10px 176px;
    background-color: #fff;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ans014-subfine-content {
    flex: 1;
}

.ans014-subfine-title {
    font-size: 13px;
    color: #666;
}

/* 검사로그/투약로그 카테고리 */
.ans014-category-header {
    padding: 1.2rem 2rem;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e5e7eb;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.ans014-category-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.ans014-category-name {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.ans014-category-total {
    font-size: 1.7rem;
    font-weight: 700;
    color: #2563eb;
    white-space: nowrap;
    min-width: 80px;
    text-align: right;
}

/* 검사로그/투약로그 항목 */
.ans014-item {
    padding: 1rem 1.6rem 1rem 4.8rem;
    background-color: #fff;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.ans014-item:last-child {
    border-bottom: none;
}

.ans014-item-content {
    flex: 1;
}

.ans014-item-name {
    font-size: 1.5rem;
    color: #333;
}

/* 투약로그 추가 스타일 */
.ans014-medication-item-name {
    font-size: 1.5rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 0.2rem;
}

.ans014-medication-efficacy {
    font-size: 1.4rem;
    color: #666;
    line-height: 1.5;
}

.ans014-item-day {
    font-size: 15px;
    font-weight: 600;
    color: #666;
    white-space: nowrap;
    min-width: 80px;
    text-align: right;
}

/* 로딩 및 빈 데이터 스타일 */
.ans014-loading {
    padding: 40px;
    text-align: center;
    color: #999;
}

/* 탭 스크롤 */
.ans014-tab-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ans014-tab-wrapper {
    display: inline-block;
    min-width: 100%;
}

.ans014-content-wrapper {
    margin-top: 20px;
}

/* ========================================
   Fax Modal Styles
   ======================================== */
/* 팩스 발송 모달 - 파일 첨부 */
.fax-file-upload-area {
    margin-bottom: 20px;
}

.fax-file-input {
    display: none;
}

.fax-file-label {
    display: block;
    background-color: #f8f9fa;
    border: 2px dashed #ddd;
    border-radius: 8px;
    padding: 3.6rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.fax-file-label:hover {
    border-color: #6c5ce7;
    background-color: #f5f3ff;
}

.fax-file-icon {
    font-size: 36px;
    color: #999;
    margin-bottom: 0.8rem;
}

.fax-file-text {
    color: #666;
    font-size: 1.6rem;
    font-weight: 600;
    word-break: keep-all;
}

.fax-file-subtext {
    color: #999;
    font-size: 1.5rem;
    margin-top: 0.2rem;
}

/* 첨부 파일 목록 */
.fax-attached-files {
    margin-top: 4rem;
}

.fax-attached-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
}

.fax-attached-title b {
    color: var(--color-primary);
    font-weight: 400;
}

.fax-file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.6rem;
    background-color: #fff;
    border: 1px solid #ddd;
    outline: 2px solid transparent;
    border-radius: 8px;
    margin-top: 0.4rem;
    margin-bottom: 0.8rem;
    font-size: 1.5rem;
    cursor: pointer;
    transition: 0.3s;
}

.fax-file-item.invoice {
    background-color: #f7f5ff;
    border-color: transparent;
    outline-color: var(--color-primary);
}

.fax-file-name {
    display: flex;
    align-items: center;
    width: 100%;
    flex-grow: 1;
    min-width: 0;
    margin-right: 0.8rem;
}

.fax-file-name span {
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fax-file-name b {
    flex-shrink: 0;
    margin-left: 0.8rem;
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--color-text-gray);
}

.fax-file-item.invoice .fax-file-name {
    color: #333;
    font-weight: 500;
}

.fax-file-remove {
    background: none;
    border: none;
    color: var(--color-text-gray);
    cursor: pointer;
    font-size: 1.3rem;
    font-weight: 600;
    padding: 0 0.8rem;
    transition: color 0.3s;
}

.fax-file-remove:hover {
    color: var(--color-accent);
}

/* 팩스 발송 확인 모달 */
.fax-confirm-list {
    margin-bottom: 2rem;
}

.fax-confirm-left {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.fax-confirm-checkbox {
    width: 2rem;
    height: 2rem;
    cursor: pointer;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.5917 6.00822C15.5142 5.93011 15.4221 5.86811 15.3205 5.82581C15.219 5.7835 15.11 5.76172 15 5.76172C14.89 5.76172 14.7811 5.7835 14.6796 5.82581C14.578 5.86811 14.4858 5.93011 14.4084 6.00822L8.20004 12.2249L5.59171 9.60822C5.51127 9.53052 5.41632 9.46942 5.31227 9.42842C5.20823 9.38742 5.09713 9.36731 4.98531 9.36924C4.87349 9.37118 4.76315 9.39512 4.66058 9.4397C4.55802 9.48427 4.46524 9.54862 4.38754 9.62905C4.30984 9.70949 4.24875 9.80444 4.20774 9.90848C4.16674 10.0125 4.14663 10.1236 4.14856 10.2354C4.1505 10.3473 4.17444 10.4576 4.21902 10.5602C4.2636 10.6627 4.32794 10.7555 4.40837 10.8332L7.60837 14.0332C7.68584 14.1113 7.77801 14.1733 7.87956 14.2156C7.98111 14.2579 8.09003 14.2797 8.20004 14.2797C8.31005 14.2797 8.41897 14.2579 8.52052 14.2156C8.62207 14.1733 8.71424 14.1113 8.79171 14.0332L15.5917 7.23322C15.6763 7.15518 15.7438 7.06047 15.79 6.95506C15.8361 6.84964 15.86 6.7358 15.86 6.62072C15.86 6.50563 15.8361 6.3918 15.79 6.28638C15.7438 6.18096 15.6763 6.08625 15.5917 6.00822Z' fill='%23ACACAC' style='fill:%23ACACAC;fill:color(display-p3 0.6731 0.6731 0.6731);fill-opacity:1;'/%3E%3C/svg%3E%0A");
    background-position: center;
    background-repeat: no-repeat;
}

.fax-confirm-checkbox:checked {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.5917 6.00822C15.5142 5.93011 15.4221 5.86811 15.3205 5.82581C15.219 5.7835 15.11 5.76172 15 5.76172C14.89 5.76172 14.7811 5.7835 14.6796 5.82581C14.578 5.86811 14.4858 5.93011 14.4084 6.00822L8.20004 12.2249L5.59171 9.60822C5.51127 9.53052 5.41632 9.46942 5.31227 9.42842C5.20823 9.38742 5.09713 9.36731 4.98531 9.36924C4.87349 9.37118 4.76315 9.39512 4.66058 9.4397C4.55802 9.48427 4.46524 9.54862 4.38754 9.62905C4.30984 9.70949 4.24875 9.80444 4.20774 9.90848C4.16674 10.0125 4.14663 10.1236 4.14856 10.2354C4.1505 10.3473 4.17444 10.4576 4.21902 10.5602C4.2636 10.6627 4.32794 10.7555 4.40837 10.8332L7.60837 14.0332C7.68584 14.1113 7.77801 14.1733 7.87956 14.2156C7.98111 14.2579 8.09003 14.2797 8.20004 14.2797C8.31005 14.2797 8.41897 14.2579 8.52052 14.2156C8.62207 14.1733 8.71424 14.1113 8.79171 14.0332L15.5917 7.23322C15.6763 7.15518 15.7438 7.06047 15.79 6.95506C15.8361 6.84964 15.86 6.7358 15.86 6.62072C15.86 6.50563 15.8361 6.3918 15.79 6.28638C15.7438 6.18096 15.6763 6.08625 15.5917 6.00822Z' fill='%236F51EA' style='fill:%236F51EA;fill:color(display-p3 0.4353 0.3176 0.9176);fill-opacity:1;'/%3E%3C/svg%3E%0A");
}

.fax-confirm-cost {
    font-size: 1.5rem;
    font-weight: bold;
}

.fax-cost-list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.fax-cost-list b {
    display: block;
    padding: 1.6rem;
    width: 30%;
    text-align: left;
    border-bottom: 1px solid #eaeaea;
}

.fax-cost-list span {
    display: block;
    padding: 1.6rem;
    width: 70%;
    text-align: right;
    border-bottom: 1px solid #eaeaea;
}

/* 비용 정보 */
.fax-cost-info {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 2rem 1.6rem;
    margin-bottom: 20px;
}

.fax-cost-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 1.6rem;
}

.fax-cost-label {
    color: #666;
}

.fax-cost-value {
    color: #999;
}

.fax-cost-total {
    display: flex;
    justify-content: space-between;
    font-size: 1.6rem;
    font-weight: bold;
    color: #333;
}

/* 팩스 타입 배지 */
.fax-type-badge {
    display: inline-block;
    margin-left: 0.8rem;
    padding: 0.2rem 0.6rem;
    border-radius: 0.4rem;
    font-size: 1.1rem;
    font-weight: 500;
    background-color: #f5f3ff;
    color: var(--color-primary);
}

/* 팩스 하위 입력 영역 (VIRTUAL/MULTI) */
.fax-sub-input {
    margin-top: 1.2rem;
    padding: 1.2rem;
    background-color: #fafafa;
    border-radius: 0.6rem;
    border: 1px solid #eee;
}
.fax-sub-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.3rem;
    font-weight: 500;
    color: #555;
    margin-bottom: 0.8rem;
}
.fax-sub-label .fax-required {
    color: #e53935;
    font-weight: bold;
}
.fax-sub-field {
    width: 100%;
    padding: 1rem 1.2rem;
    border: 1px solid #ddd;
    border-radius: 0.6rem;
    font-size: 1.4rem;
    outline: none;
    box-sizing: border-box;
    background-color: #fff;
}
.fax-sub-field:focus {
    border-color: var(--color-primary);
}

/* 팩스 확인 아이템 (새 구조) */
.fax-confirm-item {
    margin-bottom: 1.2rem;
    border: 1px solid #ddd;
    border-radius: 0.8rem;
    background-color: #fff;
    overflow: hidden;
}
.fax-confirm-item.selected {
    border-color: var(--color-primary);
    background-color: #f7f5ff;
}
.fax-confirm-item.disabled {
    opacity: 0.6;
}
.fax-confirm-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 1.6rem;
    cursor: pointer;
}
.fax-confirm-item.disabled .fax-confirm-header {
    cursor: not-allowed;
}
.fax-confirm-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.fax-expand-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.4rem;
    padding: 0.4rem;
    color: #666;
}
.fax-unavailable {
    color: #e53935;
    font-size: 1.2rem;
    margin-left: 0.8rem;
}
.fax-expand-detail {
    padding: 1rem 1.6rem;
    background-color: #f9f9f9;
    border-top: 1px solid #eee;
    font-size: 1.3rem;
    color: #666;
}
.fax-detail-row {
    margin-bottom: 0.4rem;
}
.fax-detail-sub {
    margin-left: 1.6rem;
}

.ico-complete {
    position: relative;
    width: 10rem;
    height: 10rem;
}

.box_content.invite .ico-complete {
    margin: -4rem auto 5.6rem;
}

.ico-complete-circle {
    position: absolute;
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    background: var(--color-primary);
    animation: expand 1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

.ico-complete-circle::before {
    content: "";
    display: block;
    position: absolute;
    top: 0.4rem;
    left: 0.4rem;
    width: 9.2rem;
    height: 9.2rem;
    transform: scale(0);
    border-radius: 50%;
    background: white;
    animation: expand 1s 0.5s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

@keyframes expand {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

.ico-complete svg {
    position: absolute;
    width: 10rem;
    height: 10rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -48%);
    stroke-dasharray: 8rem 8rem;
}

.ico-complete path {
    fill: transparent;
    stroke-width: 4;
    stroke: var(--color-primary);
    animation: 1s cubic-bezier(0.77, 0, 0.175, 1) 0.8s 1 both drawCheck;
}

@keyframes drawCheck {
    0% {
        stroke-dashoffset: 8rem;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

/* 모달 내 진단코드 검색 스타일 */
.search-in-modal .box {
    padding: 0;
    border: none;
    margin-top: 0;
}

.search-in-modal .btn-gray {
    display: none;
}

.search-in-modal .box_title {
    display: none;
}

.search-in-modal .code-box {
    align-items: flex-start;
    flex-direction: column;
    padding: 2.4rem;
    margin-top: 2rem;
}

.search-in-modal .code-box_name {
    padding-right: 0;
    padding-bottom: 1.6rem;
    width: auto;
}

.search-in-modal .code-box_detail {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    padding-left: 0;
    border-left: none;
    padding-top: 1.6rem;
    border-top: 1px solid #eaeaea;
}

/* ========================================
   Invoice List Page Styles
   ======================================== */
/* Invoice List Time */
.invoice-list-time {
    width: 20.4rem;
}

.analysis-period {
    display: inline-block;
    margin-top: 1rem;
    color: var(--color-text-gray);
}

.analysis-period b {
    display: inline-block;
    margin-left: 0.8rem;
    color: var(--color-secondary);
}

/* ========================================
   Info 컴포넌트 - 타이틀 영역 레이아웃
   ======================================== */
.info-txt {
    position: relative;
}

.info-txt-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.2rem;
}

.info-txt-title-area {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* 바로가기 버튼 (보라색 계열) */
.btn-link-info {
    display: flex;
    margin-left: 4px;
    height: 2.6rem;
    padding: 0px 0.8rem 0px 0.6rem;
    width: fit-content;
    border-radius: 4px;
    border: 1px solid #c9c1ef;
    background-color: #f3f2ff;
    color: var(--color-primary);
    font-size: 1.5rem;
    font-weight: 500;
    align-items: center;
    justify-content: center;
}

.btn-link-info:hover {
    background-color: #ebe8ff;
}

.btn-link-info:active {
    background-color: #e0dcff;
}

.btn-link-info::before {
    content: '';
    display: inline-block;
    width: 1.6rem;
    height: 1.6rem;
    margin-right: 0.3rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M6 12L10 8L6 4' stroke='%235B4FFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center center / cover no-repeat;
}

/* description 옆에 배치되는 인라인 버튼 */
.info-txt small.desc-with-button {
    display: inline;
}

.btn-desc-inline {
    display: inline-flex;
    vertical-align: middle;
    margin-left: 0.8rem;
    height: 2.2rem;
    padding: 0px 0.6rem 0px 0.4rem;
    font-size: 1.3rem;
    white-space: nowrap;
}

.btn-desc-inline::before {
    width: 1.4rem;
    height: 1.4rem;
    margin-right: 0.2rem;
}

/* ========================================
   Push Settings Page Styles
   ======================================== */
.push-settings-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 2rem;
}

.push-settings-list .push-settings-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 0;
    border-bottom: 1px solid #eee;
}

.push-settings-list .push-settings-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.push-settings-list .push-settings-info {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
}

.push-settings-list .push-settings-info strong {
    display: block;
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--color-text);
}

.push-settings-list .push-settings-info span {
    display: block;
    font-size: 1.4rem;
    color: var(--color-text-gray);
}

/* Push Settings Toggle Switch - uses global .toggle-switch styles */
.push-settings-list .push-settings-item .toggle-switch {
    flex-shrink: 0;
    margin-left: 1.6rem;
}

.push-settings-list .push-settings-item .toggle-switch:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Box Desc for Push Settings */
.box_desc p.sub {
    font-size: 1.6rem;
    color: var(--color-text-gray);
    margin-top: 0.4rem;
}

/* ========================================
   Alarm Tabs Styles
   ======================================== */
.notification-list .list_inner .alarm-tabs {
    display: flex;
    gap: 0.8rem;
    margin-bottom: 1.6rem;
    padding-bottom: 1.6rem;
    border-bottom: 1px solid #eaeaea;
    flex-wrap: wrap;
}

.notification-list .list_inner .alarm-tabs .alarm-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.4rem;
    font-size: 1.4rem;
    font-weight: 500;
    color: #888;
    background: #f5f5f5;
    border: none;
    border-radius: 2rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    min-width: auto;
    width: auto;
    height: auto;
}

.notification-list .list_inner .alarm-tabs .alarm-tab:hover {
    background: #eaeaea;
    color: #555;
}

.notification-list .list_inner .alarm-tabs .alarm-tab.active {
    background: var(--color-primary);
    color: #fff;
}

/* Mobile responsive for alarm tabs */
@media screen and (max-width: 767px) {
    .notification-list .list_inner .alarm-tabs {
        gap: 0.6rem;
        padding-bottom: 1.2rem;
        margin-bottom: 1.2rem;
    }

    .notification-list .list_inner .alarm-tabs .alarm-tab {
        padding: 0.6rem 1.2rem;
        font-size: 1.3rem;
    }
}

/* 진료 대기열 화면 — 버튼 하단 정렬 + 순번 안정 표시 (스코프 한정, 공통 규칙 미변경) */
.queue-page {
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - 7rem);
}

.queue-page .queue-count {
    margin-top: 2rem;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 600;
}

.queue-page .important-message {
    display: block;
    margin-top: 1.2rem;
    text-align: center;
}

.queue-page .btn-group {
    margin-top: auto;
    padding-top: 4rem;
}


/* ── ANS003B 상병별 — 위계 · 대비 · 상태 문면 (M5a·M5b 에서 살아남은 넷) ────────
 * 전건 `.ans003-dx` 스코프다. 이 클래스를 갖지 않는 화면은 한 픽셀도 안 움직인다 —
 * `.ans003-accordion-title` · `--date` 를 다섯~여섯 화면이 공유하고 이 창의 검사는 그중
 * 하나만 본다(층위 6). 전역 선언의 무변동은 `#7` 이 동결본으로 문다.
 *
 * **M5a·M5b 가 여기 두었던 열넷은 지웠다.** 그 규칙들이 겨냥한 DOM 이 이 창에서
 * 사라졌기 때문이고, 남겨 두면 다음 사람이 «이 화면은 표와 `<details>` 를 쓴다» 로 읽는다:
 *   · `.ans003-dx .table-box …`(7) — 약 행이 표에서 `.gdm-card` 로 옮겨갔다.
 *   · `.ans003-dx details…`(4) — 아코디언이 카드 + 모달로 바뀌어 `<details>` 가 0건이다.
 *   · `.ans003-dx .ans003-accordion-card--sub …`(5) — 2차 카드층 자체가 없어졌다.
 *   · `.ans003-dx .ans003-dx-role`(1) — 역할이 행 층위가 아니라 카드 라벨/값이 되었다.
 * 지운 근거는 «선택자가 고르는 노드가 이 화면에 0건» 이고, 그것은 컴포넌트 쪽에서 센다.
 */

/* D2 — 위계의 1차. 카드 제목이 `h3` 이고 전역 `.ans003-accordion-title`(1.6rem/600)을
 * 이긴다. 2·3차는 모달 안 구획 제목과 라벨/값이 진다. */
.ans003-dx h3.ans003-accordion-title {
  font-size: 2rem;
  font-weight: 700;
}

/* D4 — 대비. 전역 `.ans003-accordion-date` 의 `#888` 은 이 화면이 쓰는 면 여덟 전건에서
 * AA 미달이다(실측 3.32:1). 무채 후보 중 통과하는 가장 밝은 값이 `#696969` 이고, 유채색을
 * 후보에서 빼지 않으면 규칙이 예약 강조색 `#2563eb` 를 보조 잉크로 고른다(M5a D9). */
.ans003-dx .ans003-accordion-date {
  color: #696969;
}

/* D3 — 상태 문면. 테두리와 배경으로 덩어리를 만들고 글자색을 본문 등급으로 올린다.
 * 경고색 `#e74c3c` 는 쓰지 않는다: `partial` 과 `none` 은 오류가 아니라 **불완전 고지**다. */
.ans003-dx .ans003-dx-notice {
  margin: 0.8rem 0;
  padding: 1.2rem 1.6rem;
  background-color: #f5f8fa;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  color: #333333;
  font-size: 1.6rem;
  font-weight: 500;
}

/* D4 (구현 중 실측이 더한 자리) — `NoData.Fail` 의 문면.
 *
 * 이 자리는 계획서 D4 의 열거에 **없었다**. 착수 시점에 `NoData.Fail` 의 도달 경로가 0건이라
 * (관측 A) 그 잉크가 대비 모집단 밖이었기 때문이다 — M5b 가 그 경로를 처음 만들면서 새 표면이
 * 모집단에 들어왔고, `#6` 이 다섯 폭 전건에서 3.11:1 로 잡았다. 전역 `.nodata p` 는
 * `var(--color-text-gray)` 이고 그 클래스를 여러 화면이 공유하므로 **전역은 안 고친다**.
 */
.ans003-dx .nodata p {
  color: #696969;
}

/* 관리자 열람의 권한 거부 블록만. 전역 .nodata p 는 여러 회원 화면이 공유하므로 안 고친다 */
.admin-view-denied .nodata p {
  color: #696969;
  word-break: keep-all;
}

/* ── ANS003B 상병별 — 카드 목록 + 상세 모달 (M5d) ─────────────────────────────
 * 전건 `.ans003-dx` 스코프다. 이 클래스를 갖지 않는 화면은 한 픽셀도 안 움직인다 —
 * `.ans003-accordion-*` 와 `.gdm-*` 를 형제 탭 넷이 공유하고 이 창의 검사는 그중 하나만
 * 본다(층위 6). 모달 본문은 목록 컨테이너의 **형제**라 조상 사슬이 안 닿는다 — 그래서
 * `ANS003BDiagnosis` 가 모달 안에 스코프 노드를 하나 더 세운다.
 *
 * 신규 토큰 0건: 색은 `DESIGN.md` frontmatter 값뿐이고 반경은 base 에 있는 값만 쓴다.
 */

/* 카드 헤더 — 좌측이 **두 줄**(제목 + 메트릭)이 되어도 오른쪽 아이콘은 카드의 **세로
 * 가운데**에 선다. 위쪽 정렬로 내리면 아이콘이 제목 첫 줄에 붙어, 카드가 두 줄일 때
 * 아이콘만 위로 떠 보인다. 전역 `.ans003-accordion-header` 의 `center` 를 그대로 둔다. */
.ans003-dx .ans003-dx-card-header {
  padding: 1.6rem;
}

.ans003-dx .ans003-dx-card-left {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.8rem;
  min-width: 0;
}

/* 메트릭 행 — **열기 전에 안을 안다**. 좁은 폭에서 줄바꿈되고 구분자는 여백이 진다:
 * 가운뎃점을 넣으면 줄바꿈 지점마다 고아 문자가 남는다. */
.ans003-dx .ans003-dx-metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 1.2rem;
  row-gap: 0.4rem;
  margin: 0;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.4;
}

/* 무채가 기본이다. 개수만 굵기 한 단으로 들어 라벨과 값이 갈린다 — 색을 쓰면 강조가
 * 다섯 자리로 흩어지고, 그때 강조는 강조가 아니다. */
.ans003-dx .ans003-dx-metric {
  color: #696969;
  white-space: nowrap;
}

.ans003-dx .ans003-dx-metric b {
  font-weight: 700;
  color: #333333;
}

/* 강조 한 자리 — 주치료 개수다. 목록 정렬 키와 **같은 값**이므로 위에서부터 큰 수가 선다. */
.ans003-dx .ans003-dx-metric--accent {
  color: #2563eb;
}

.ans003-dx .ans003-dx-metric--accent b {
  color: #2563eb;
}

/* 판정의 근거 축. `.ans003-dx-notice` 와 **다른 등급**으로 선다 — 저것은 이번 회차의 사고
 * (부분 판정·미적재·고장)이고 이것은 이 화면이 늘 쓰는 규칙이다. 테두리를 빼고 글자를 한
 * 단 내려 둘이 나란히 서도 위계가 갈린다. */
.ans003-dx .ans003-dx-basis {
  margin: 0 0 1.2rem;
  padding: 1.2rem 1.6rem;
  background-color: #f5f8fa;
  border-radius: 8px;
  color: #696969;
  /* **본문 등급이다.** 1.4rem 이던 자리를 올린다 — 767px 이하에서 루트가 58% 로 내려가
   * 1.4rem 은 12.99px 이 되고(실측), `DESIGN.md` §The 1.6 Floor Rule 이 「읽어야 하는
   * 텍스트」에 금지한 구간이다. 이 문장은 라벨이 아니라 FC 가 고객 앞에서 **소리 내어
   * 읽는** 규칙 고지이므로 본문이 맞다. 잉크는 그대로 한 단 낮게 둬서, 크기를 올려도
   * 카드 제목과 등급이 섞이지 않는다. */
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.6;
  word-break: keep-all;
}

/* 규칙(앞 문장)과 그 귀결(뒤)의 위계. 한 덩어리 회색이면 둘 다 안 읽힌다 — 색을 더하지
 * 않고 굵기와 잉크 한 단으로만 든다. */
.ans003-dx .ans003-dx-basis-lead {
  font-weight: 700;
  color: #333333;
}

/* 모달 안의 같은 문장 — 첫 구획 제목과 붙지 않게 아래 여백만 바꾼다. */
.ans003-dx .ans003-dx-basis--modal {
  margin: 0 0 2.4rem;
}

/* **값이 빈 행은 접는다.** 상세 12행 중 `효능효과` 는 판정 제공자가 그 필드를 채우는 일이
 * 없어(실측 — 판정 완료 16회차 · 약 슬롯 276건 전건 `null`) 모든 카드에서 항상 비어 있었고,
 * 그 자리를 `-` 로 채우면 바로 아래 `판정 근거` 가 「약품의 허가 효능효과인 '…'」이라고 그
 * 값을 인용하는 것과 한 카드 안에서 부딪힌다.
 *
 * **행을 지우는 것이 아니라 감춘다.** 셀은 12칸 정적 원소로 남아 있고 DOM 에도 그대로 서므로,
 * 라벨과 값의 짝을 정적으로 세는 축(`#5` 길이 대조 · `#8` 스프레드 0건)과 값 없는 약에서도
 * 12행을 세는 렌더 검사가 전부 겨냥한 것을 계속 본다 — 이 규칙이 겨냥하는 층은 그 아래,
 * 「빈 값을 사람에게 보일 것인가」다. 제공자가 채우기 시작하면 저절로 다시 선다.
 *
 * `:empty` 가 무는 것은 자식 노드가 0건인 `<span>` 이고, 서버 뷰의 `str()` 이 빈 문자열을
 * `null` 로 이미 정규화하므로(`ddx-view.ts`) 「공백 한 칸이 들어와 규칙이 조용히 비켜가는」
 * 경로가 없다. 형제 열한 칸은 `?? "-"` 를 그대로 두므로 이 규칙에 걸리지 않는다 — 그 칸들의
 * `-` 는 「이 약에는 그 값이 없다」는 정보다. */
.ans003-dx .gdm-card-row:has(> .gdm-card-value:empty) {
  display: none;
}

/* 모달 구획 제목 — `.gdm-title` 의 2rem/700 을 물려받고 개수 배지만 더한다.
 * 명시도 (0,2,0) 동률이므로 **원문 순서**가 정한다: 이 묶음이 파일 말미에 있어야 한다. */
.ans003-dx .ans003-dx-bucket-title {
  justify-content: flex-start;
  gap: 0.8rem;
}

/* 개수는 제목이 아니라 **수치**다. 카드 메트릭의 강조와 같은 값·같은 색이라 목록에서 본
 * 수가 모달에서 그대로 다시 선다. */
.ans003-dx .ans003-dx-bucket-count {
  font-size: 1.5rem;
  font-weight: 600;
  color: #2563eb;
  white-space: nowrap;
}

/* ── 이 창이 연 자리: 진단 링크색 · v0.6 날짜 묶음 카드 · 탭 상단 안내 ────────────────
 *
 * 전건 `.ans003-dx` 접두 안이다. 이 화면의 `.gdm-*` 는 형제 탭 넷(ANS007 · ANS009 ·
 * 처방조제정보 · 약효분류)이 함께 쓰므로, 스코프 없이 손대면 그 넷이 같이 움직인다.
 */

/* 진단 두 칸(코드·명)은 약효분류 축에서 **카드마다 달라지는 유일한 값**이다(그룹 키가
 * 약효분류이므로). 눈이 먼저 닿아야 하는 자리라 링크색을 든다. 상병별 축에서는 그룹의
 * 값과 같아 잉여로 보이지만, 두 탭이 같은 컴포넌트를 쓰므로 자리는 하나다. */
.ans003-dx .ans003-dx-dx {
  color: #333333;
  font-weight: 600;
}

/* v0.6 날짜 카드(수정요청 2차 「일자별로」 · 2026-10-08 사용자 「핵심은 날짜 순」 · 「위계가 잘 안 잡힌다」).
 * 카드 = 머리 띠(진료일 · 그날 투약일수 · 병·의원) + 약 줄. 위계는 날짜 > 약품명 > 병·의원 · 효능효과 한 줄기이고, 크기 단은 날짜
 * 하나만 올린다(1.8rem) — 나머지는 굵기 · 잉크로 가른다. 면(#f5f8fa)은 머리 띠에만 둬 처방 1 과 약 N 이 면으로 갈린다. 읽는 글자는
 * 1.6rem 하한(767px 이하 루트 58% 에서 14.85px). 색 · 선은 이 파일에 이미 있는 값뿐이다. 약품명(실측 최대 162자) · 병원명은 칸 안에서
 * 감기고, 일수는 줄바꿈하지 않는다. */
.ans003-dx .ans003-dx-days {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ans003-dx .ans003-dx-day {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background-color: #ffffff;
}

.ans003-dx .ans003-dx-day-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 1.2rem;
  row-gap: 0.2rem;
  padding: 1.2rem 1.6rem;
  border-bottom: 1px solid #e5e7eb;
  border-radius: 7px 7px 0 0;
  background-color: #f5f8fa;
}

.ans003-dx .ans003-dx-day-date {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.3;
  color: #333333;
  font-variant-numeric: tabular-nums;
}

/* 그날 투약일수 — 분류 카드 메트릭(「투약기간 N일」)과 같은 꼴: 라벨 회색 · 수 굵게. */
.ans003-dx .ans003-dx-day-total {
  font-size: 1.6rem;
  font-weight: 500;
  color: #696969;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ans003-dx .ans003-dx-day-total b {
  font-weight: 700;
  color: #333333;
}

.ans003-dx .ans003-dx-day-provider,
.ans003-dx .ans003-dx-day-dx {
  grid-column: 1 / -1;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.5;
  color: #696969;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 지금 연 상병과 다른 진단(실데이터 0건)은 병·의원의 둘째 줄로 읽히지 않게 본문 잉크로. */
.ans003-dx .ans003-dx-day-dx {
  color: #333333;
  font-weight: 600;
}

.ans003-dx .ans003-dx-day-drugs {
  margin: 0;
  padding: 0 1.6rem;
  list-style: none;
}

.ans003-dx .ans003-dx-day-drug {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 1.2rem;
  row-gap: 0.2rem;
  padding: 1.2rem 0;
  font-size: 1.6rem;
  line-height: 1.5;
}

.ans003-dx .ans003-dx-day-drug + .ans003-dx-day-drug {
  border-top: 1px solid #f0f0f0;
}

/* 약품명은 음절에서 감는다 — keep-all 은 한글 사이 기회를 지워 용량 토큰(「_(6.94mg/1정)」) 한가운데서 잘렸다. */
.ans003-dx .ans003-dx-day-name {
  font-weight: 600;
  color: #333333;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* 약 처방일수는 회색 — 오른쪽 열에서 굵고 어두운 수는 머리의 그날 투약일수 하나다(같은 날 한 번). */
.ans003-dx .ans003-dx-day-supply {
  font-weight: 500;
  color: #696969;
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ans003-dx .ans003-dx-day-ind {
  grid-column: 1 / -1;
  font-weight: 500;
  color: #696969;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 탭 상단 안내 — 「참고용」 고지. 면 없이 평문으로 선다: 사고(`.ans003-dx-notice`)가 아니라 늘 쓰는 전제이고, 같은 면을 쓰던
 * 근거 상자(`.ans003-dx-basis`)와 위계가 섞여 모바일에서 상자가 셋 쌓였다(PR #91 리뷰 · fable+codex 판정). */
.ans003-dx .ans003-dx-ref {
  margin: 0 0 1.6rem;
  color: #333333;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.6;
  word-break: keep-all;
}

/* 목록 카드의 메트릭 행. 상병별 카드와 **같은 `.ans003-dx-metrics`** 를 쓰므로 규칙을
 * 더하지 않고, 제목 아래로 내려앉는 여백만 이 자리에서 준다.
 *
 * **두 탭 모두에 걸린다.** 앞선 주석은 「상병별은 `h3` 라 자체 margin 이 있고 이쪽은
 * `div` 다」로 이 규칙을 약효분류 전용처럼 적었지만, 전역 리셋이 `h3` 의 margin 을 이미
 * 0 으로 지워 두어(실측 `margin: 0px`) 두 탭의 간격은 처음부터 이 한 값이 정하고 있었다.
 * 두 카드 제목이 같은 `h3` 로 맞춰진 지금은 그 사실이 마크업에도 드러난다. */
.ans003-dx .ans003-accordion-header-left > .ans003-dx-metrics {
  margin-top: 0.6rem;
}

/* 카드의 기간 줄 — **두 탭이 같은 이 규칙 하나를 쓴다**(`CardRange`).
 *
 * 자리는 제목과 메트릭 사이 한 줄이고, 그 셋의 간격은 두 값이 만든다: 세로 쌓기 컨테이너
 * `.ans003-dx-card-left` 의 `gap`(0.8rem)이 제목→기간을 붙이고, 아래 메트릭 규칙의
 * `margin-top`(0.6rem)이 거기에 더해져 기간→메트릭을 한 단 더 벌린다. 부제는 제목에 붙고
 * 계수는 떨어지는 것이 읽는 순서다 — 셋을 같은 간격으로 두면 세 줄이 한 덩어리로 뭉친다.
 *
 * `margin: 0` 이 필요한 이유는 이 노드가 `<p>` 이기 때문이다. 형제 `.ans003-dx-metrics` 가
 * 같은 이유로 같은 선언을 이미 갖고 있다 — 브라우저 기본 여백을 지우지 않으면 `gap` 위에
 * 그것이 겹쳐 간격 계산이 이 파일 밖으로 샌다.
 *
 * 색은 안 준다. `.ans003-dx .ans003-accordion-date` 가 이미 이 화면의 대비 통과값(`#696969`)을
 * 주고 있고, 여기서 다시 선언하면 그 한 자리가 두 자리가 된다. */
.ans003-dx .ans003-dx-range {
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.4;
}

/* ── ANS003B 상병별 — 약효분류 드릴다운 2단계 (M8) ────────────────────────────
 * 전건 `.ans003-dx` 접두다. 신규 색 0건 · 신규 반경 0건 · `overflow` 선언 0건 ·
 * `font-family` 0건 — 값은 전부 이 파일이 이미 쓰는 것이거나 `DESIGN.md` frontmatter 안이다.
 *
 * **뒤로가기에 규칙을 한 줄도 더하지 않는다.** 그 자리는 이미 다 지어져 있었고 비어 있었다 —
 * 세 규칙이 두 파일에 나뉘어 있다:
 *   · `style.css:1296` — `#modal.modal-full .back-btn { position:absolute; top:50%;
 *     transform:translatey(-50%); left:1.6rem }`. `.close-btn` 의 `right:1.6rem` 과 대칭이다.
 *   · `style.css:8599` — 767px 이하에서 `.close-btn, .back-btn` 을 함께 `scale(0.8)`.
 *   · **`style_new.css:1456`** — `#modal.modal-full.group-detail-modal .modal_head h2
 *     { max-width: calc(100% - 10rem) }` 이 좌우 5rem 을 이미 비워 둔다. 이 한 줄은 이 파일에
 *     있고 `.group-detail-modal` 스코프다. `style.css` 의 일반 `#modal.modal-full .modal_head h2`
 *     는 `font-size`·`font-weight` 만 주고 폭 예약은 안 한다 — 그 구별을 여기 적는다.
 * 이 창이 한 것은 그 빈 슬롯에 `backFn` 을 잇는 prop 한 자리뿐이다.
 */

/* 읽기 폭 상한 — 넓어진 폭을 **한 값**으로 받는다(D3).
 *
 * 실측이 근거다: 약 카드 폭이 모바일 398px → PC 1,140px 로 벌어지는데 세로는 3,299px →
 * 3,320px 로 안 줄었다. 늘어난 폭이 전부 라벨과 값 사이의 빈 자리로 들어가서다 — PC 에서
 * 라벨은 왼쪽 끝, 값은 오른쪽 끝이고 그 사이 1,000px 이 빈다.
 *
 * **모바일은 한 픽셀도 안 움직인다.** 루트는 `style.css:29` 에서 `62.5%`(16px 기준 10px)이고
 * `:8793` 의 `max-width: 767px` 에서 `58%`(9.28px)로 내려간다. 곧 상한의 실값은
 * 64 × 9.28 = **594px** 인데 그 폭의 화면은 430px 이라 상한이 화면보다 넓다 — 규칙이 실려는
 * 있으나 아무것도 안 자른다. `#6` 이 그 계산을 출력으로 적는다.
 *
 * `overflow` 는 선언하지 않는다(M5a `#5` 의 계약). 남는 폭은 여백으로 두고 한 단을 유지한다
 * — `DESIGN.md` §The One Column Rule 을 깨지 않는다. */
.ans003-dx.ans003-dx-modal {
  max-width: 64rem;
  margin-inline: auto;
}

/* 분류 카드 목록 — 카드 사이 간격만 진다.
 *
 * 목록 화면의 `.ans003-accordion-container` 가 상병 카드에 주는 것과 같은 일을 모달 본문
 * 안에서 한다. 그 클래스를 그대로 빌려 쓰지 않는 것은 그것이 형제 탭 넷과 공유되는 전역
 * 클래스라, 모달 안에서만 필요한 간격을 거기서 조정하면 네 화면이 함께 움직이기 때문이다. */
.ans003-dx .ans003-dx-class-list {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

/* ── M9 PC 2단 드릴다운 ────────────────────────────────────────────────────────
 *
 * 발화는 **JS 가 본문 래퍼에 붙이는 `.ans003-dx-split` 하나**다(1100px 초과). 이 블록에
 * 미디어쿼리가 없는 것이 요점이다 — 본문 배치와 헤더 버튼 위치가 같은 클래스를 봐야 경계
 * 1px 에서 둘이 안 갈린다(D2).
 *
 * **읽기 폭 상한을 철회하지 않고 2단일 때만 넓힌다.** 위의 `.ans003-dx.ans003-dx-modal` 이
 * 64rem 으로 묶은 래퍼 안에 그리드를 세우면 두 칸이 640px 에 갇힌다. 같은 특이도의 뒤 규칙이
 * 2단 상태에서만 상한을 「왼쪽 칸 + 간격 + 오른쪽 칸」으로 바꾸고, 64rem 은 오른쪽 칸의
 * 상한으로 옮겨 간다. 좁은 폭의 상한은 한 글자도 안 움직인다. */
.ans003-dx.ans003-dx-split {
  max-width: calc(34rem + 1.6rem + 64rem);
  display: grid;
  grid-template-columns: 34rem minmax(0, 64rem);
  column-gap: 1.6rem;
  align-items: start;
}

/* 두 칸 모두 내용이 칸을 못 늘린다. 트랙의 `minmax(0, …)` 는 트랙만 묶고 그리드 항목의
 * 최소폭(`auto`)은 그대로라, 긴 약품명이 칸 밖으로 넘친다. */
.ans003-dx .ans003-dx-split-list,
.ans003-dx .ans003-dx-split-detail {
  min-width: 0;
}

/* 상세 앞머리 안내는 두 칸 위에 가로로 걸친다(2026-10-08 사용자 「줄바꿈이 너무 많이」). */
.ans003-dx.ans003-dx-split > .ans003-dx-basis {
  grid-column: 1 / -1;
}

/* ── 헤더는 화면이 아니라 본문 칸에 맞춰 선다 ──────────────────────────────────
 *
 * 상병별(`ans003b-dx-detail-modal`)과 약효분류별(`ans003b-detail-modal`) 두 모달이 **같은 규칙**
 * 이다 — 닫기·뒤로가기 버튼이 본문 칸의 양 끝에, 제목이 그 칸 안에 선다(상병별 2단 기준으로 통일).
 * 공용 셸은 `.modal_head` 기준 `right/left: 1.6rem` 이고 머리가 뷰포트 폭이라 버튼이 화면 끝에
 * 선다(관측 B). 머리는 본문의 조상이 아니라 형제라 칸 폭을 CSS 가 못 읽으므로 **칸 폭을 한 자리에
 * 적고** 버튼·제목이 그것을 함께 본다. 두 곳에 따로 적으면 한쪽만 고쳐진다.
 *
 *   칸 폭   = min(본문 상한, 1140px)   — 1140px 은 `style.css` `.inner` 의 1172px 에서 좌우 16px 을 뺀 값
 *   오프셋  = max(16px, (머리 폭 − 칸 폭) / 2)
 *
 * `max()` 하한은 두 자리를 막는다. 칸이 화면보다 넓은 폰 폭에서는 셸 값 자리에 서고, 브라우저
 * 기본 글꼴을 키워 rem 이 커져도 버튼이 화면 밖으로 안 나간다(실측: 앞 판은 기본 20px · 1101px 에서
 * 닫기 버튼이 화면 밖, 가로 넘침 72px). `1140px` 상한이 없으면 큰 글꼴의 2단에서 칸은 `.inner` 에
 * 잘리는데 버튼은 rem 대로 칸 밖에 선다. 머리가 본문 상태를 보는 길은 `:has()` 다(D1).
 *
 * **하한은 `1.6rem` 이 아니라 `16px` 이다.** 칸이 `.inner` 에 잘리는 구간(칸 폭 > `.inner` 내용폭)에서
 * 본문 오른쪽 끝을 정하는 것은 셸의 `1.6rem` 이 아니라 `.inner` 의 `padding: 0 16px` — px 값이다.
 * 하한을 rem 으로 두면 기본 글꼴을 키운 만큼 버튼이 본문 끝에서 벌어진다(실측, 겹치는 스크롤바:
 * 기본 글꼴 20px −5.6px · 24px −9.6px. 자리를 먹는 스크롤바 · 기본 글꼴 16px 의 640~690px 대에서는
 * +13.4px). 게이트 `#11` 의 `band` 조건이 이 구간을 잰다.
 *
 * 남는 잔차 하나: **자리를 먹는 스크롤바**(윈도·리눅스 데스크톱)에서 그 구간의 본문 끝은
 * 「홈 폭 + 16px」인데 홈 폭은 CSS 가 읽을 수 없다. 그 조건에서는 버튼이 본문 끝보다 홈 폭만큼
 * 바깥이다(실측 +13.4px). 겹치는 스크롤바(맥·폰)에서는 0px 이다. */
#modal.ans003b-dx-detail-modal,
#modal.ans003b-detail-modal {
  --dx-head-col: min(64rem, 1140px);
}

#modal.ans003b-dx-detail-modal:has(.ans003-dx-split) {
  --dx-head-col: min(calc(34rem + 1.6rem + 64rem), 1140px);
}

/* 머리와 본문의 가운데를 맞춘다. 본문은 스크롤 상자 안에서 **스크롤바를 뺀 폭**의 가운데에 서고
 * 머리는 그 상자 밖이라, 자리를 먹는 스크롤바(윈도·리눅스 데스크톱)에서는 둘이 스크롤바 절반만큼
 * 어긋난다(실측 7.5px). 양쪽에 같은 홈을 두면 두 가운데가 같아진다. 겹치는 스크롤바(맥·폰)는 0px 이다. */
#modal.ans003b-dx-detail-modal .modal-content,
#modal.ans003b-detail-modal .modal-content {
  scrollbar-gutter: stable both-edges;
}

#modal.ans003b-dx-detail-modal .modal_head .close-btn,
#modal.ans003b-detail-modal .modal_head .close-btn {
  right: max(16px, calc((100% - var(--dx-head-col)) / 2));
}

/* 뒤로가기는 상병별 좁은 폭의 상세 단계에만 선다(2단·약효분류별에는 노드가 없다). */
#modal.ans003b-dx-detail-modal .modal_head .back-btn {
  left: max(16px, calc((100% - var(--dx-head-col)) / 2));
}

/* 버튼이 칸 안으로 들어온 만큼 제목도 비킨다. 셸의 `100% − 10rem` 은 버튼이 화면 끝일 때의 여유라,
 * 칸이 640px 이면 실데이터의 긴 상병명(40자 · 한 줄 약 670px)이 칸보다 넓어 안쪽 X 에 닿는다.
 * 이 규칙을 빼면 `#11` 스트레스(긴 제목)가 1440px 에서 91px 겹침으로 붉다(반사실). 선택자
 * 특이도가 셸 규칙(`#modal.modal-full.group-detail-modal .modal_head h2`)과 같고 뒤에 있어 이긴다. */
#modal.modal-full.ans003b-dx-detail-modal .modal_head h2,
#modal.modal-full.ans003b-detail-modal .modal_head h2 {
  max-width: min(calc(100% - 10rem), calc(var(--dx-head-col) - 10rem));
}

/* 선택된 분류 — 면 한 단(`#eef1f5` Panel Mist Open). 머리 기본 면이 이미 `#f5f8fa` 라 그 값으로는
 * 아무것도 안 바뀐다. 색만으로 말하지 않는다: 같은 카드가 `aria-current` 를 지고 진입 아이콘을
 * 안 낸다(D6 — 그 둘은 TSX 에 있다). */
.ans003-dx .ans003-dx-card-header[aria-current="true"] {
  background-color: #eef1f5;
}