/* info-modal.css */
:root {
    --color-primary:            #a0373d;
    --color-primary-container:  #fc7c80;
    --color-on-primary:         #ffefee;
    --color-secondary:          #705900;
    --color-secondary-fixed:    #fcd357;
    --color-on-secondary-container: #5c4800;
    --color-surface-container-lowest: #ffffff;
    --color-surface-container-low:    #f0f1f1;
    --color-surface-container-high:   #e1e3e3;
    --color-on-surface:         #2d2f2f;
    --color-on-surface-variant: #5a5c5c;
    --color-outline:            #767777;

    /* 번호 구조 칩 색상 */
    --code-year-bg:    #E6F1FB; --code-year-text:   #0C447C;
    --code-course-bg:  #FAEEDA; --code-course-text:  #633806;
    --code-round-bg:   #EAF3DE; --code-round-text:   #27500A;
    --code-id-bg:      #EEEDFE; --code-id-text:      #3C3489;

    /* 과정 배지 색상 */
    --badge-medical-bg:  #FAEEDA; --badge-medical-text: #854F0B;
    --badge-coord-bg:    #E1F5EE; --badge-coord-text:   #0F6E56;

    --font-main:  "SUIT Variable", sans-serif;
    --font-accent:"Archivo", sans-serif;
    --font-mono:  "Courier New", Courier, monospace;

    --radius-sm: 4px;
    --radius-md: 12px;
    --radius-lg: 20px;
}

/* ─── Backdrop ─── */
.page-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(45, 47, 47, 0.32);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}

.page-backdrop.modal-open {
    opacity: 1;
    pointer-events: all;
}

/* ─── 모달 카드 ─── */
.info-modal {
    width: 100%;
    max-width: 500px;
    max-height: 92vh;
    overflow-y: auto;
    background: var(--color-surface-container-lowest);
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 4px rgba(0,0,0,0.04),
    0 8px 24px rgba(0,0,0,0.10),
    0 32px 64px rgba(0,0,0,0.16);
    outline: 1px solid rgba(45,47,47,0.06);
    transform: translateY(20px) scale(0.97);
    transition: transform 0.38s cubic-bezier(0.22, 0.9, 0.36, 1);
    scrollbar-width: thin;
    scrollbar-color: #ddd #f8f8f8;
}

.page-backdrop.modal-open .info-modal {
    transform: translateY(0) scale(1);
}

/* ─── 상단 컬러 바 ─── */
.modal-top-bar {
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-container) 100%);
}

/* ─── 바디 ─── */
.modal-body {
    padding: 32px 36px 28px;
}

/* ─── 헤더 행 ─── */
.modal-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.modal-icon-badge {
    width: 48px;
    height: 48px;
    background: var(--color-secondary-fixed);
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.modal-icon-badge .icon {
    font-size: 26px;
    color: var(--color-on-secondary-container);
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.modal-ref { text-align: right; }

.modal-ref .label {
    display: block;
    font-family: var(--font-main);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-secondary);
}

.modal-ref .ref-code {
    display: block;
    font-family: var(--font-accent);
    font-size: 10px;
    color: var(--color-outline);
    margin-top: 2px;
}

/* ─── 제목 / 부제목 ─── */
.modal-title {
    font-family: var(--font-main);
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -0.4px;
    color: var(--color-on-surface);
    margin-bottom: 6px;
}

.modal-subtitle {
    font-family: var(--font-main);
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-on-surface-variant);
    margin-bottom: 24px;
}

/* ─── 번호 구조 박스 ─── */
.code-structure-box {
    background: var(--color-surface-container-low);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    margin-bottom: 16px;
}

.code-structure-label {
    font-family: var(--font-main);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--color-outline);
    margin-bottom: 12px;
}

.code-blocks {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

.code-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.code-block .chip {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.code-block .chip-label {
    font-family: var(--font-main);
    font-size: 10px;
    color: var(--color-on-surface-variant);
    text-align: center;
    line-height: 1.3;
}

.code-sep {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--color-outline);
    padding-top: 9px;
    flex-shrink: 0;
    user-select: none;
}

/* 칩 컬러 */
.chip-year   { background: var(--code-year-bg);   color: var(--code-year-text); }
.chip-course { background: var(--code-course-bg);  color: var(--code-course-text); }
.chip-round  { background: var(--code-round-bg);   color: var(--code-round-text); }
.chip-id     { background: var(--code-id-bg);      color: var(--code-id-text); }

/* ─── 과정별 예시 ─── */
.course-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.course-item {
    border: 1px solid var(--color-surface-container-high);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.course-badge {
    font-family: var(--font-main);
    font-weight: 600;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    flex-shrink: 0;
}

.badge-medical { background: var(--badge-medical-bg); color: var(--badge-medical-text); }
.badge-coord   { background: var(--badge-coord-bg);   color: var(--badge-coord-text); }

.course-example { display: flex; flex-direction: column; gap: 3px; }

.example-label {
    font-family: var(--font-main);
    font-size: 11px;
    color: var(--color-outline);
}

.example-code {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--color-on-surface);
    letter-spacing: 1px;
}

.em-course { color: var(--code-course-text); font-weight: 700; }
.em-id     { color: var(--code-id-text);     font-weight: 700; }

/* ─── 안내 메모 ─── */
.modal-note {
    background: #fffbf0;
    border-left: 3px solid var(--color-secondary-fixed);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 10px 14px;
    margin-bottom: 24px;
}

.modal-note p {
    font-family: var(--font-main);
    font-size: 12px;
    color: var(--color-on-surface-variant);
    line-height: 1.65;
}

/* ─── 확인 버튼 ─── */
.btn-confirm {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 32px;
    border-radius: var(--radius-md);
    border: none;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-container) 100%);
    color: var(--color-on-primary);
    font-family: var(--font-main);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.25px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(160,55,61,0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-confirm .icon {
    font-size: 20px;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    transition: transform 0.2s ease;
}

.btn-confirm:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(160,55,61,0.38);
}

.btn-confirm:hover .icon { transform: translateX(4px); }
.btn-confirm:active      { transform: scale(0.97); }

/* ─── 푸터 ─── */
.modal-footer {
    background: var(--color-surface-container-low);
    padding: 12px 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-footer .security-text {
    font-family: var(--font-main);
    font-size: 10px;
    font-weight: 500;
    color: var(--color-outline);
    letter-spacing: 0.02em;
}

.modal-footer .dot-group {
    display: flex;
    gap: 6px;
    align-items: center;
}

.modal-footer .dot-group span {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.modal-footer .dot-group span:nth-child(1) { background: rgba(160,55,61,0.22); }
.modal-footer .dot-group span:nth-child(2) { background: rgba(112,89,0,0.36); }

/* ─── 반응형 ─── */
@media (max-width: 520px) {
    .modal-body   { padding: 24px 20px 20px; }
    .modal-footer { padding: 12px 20px; }
    .code-blocks  { gap: 2px; }
    .code-block .chip { font-size: 12px; padding: 6px 7px; }
    .code-sep     { font-size: 12px; }
    .example-code { font-size: 13px; }
}