/* ./src/web/static/planner.css */
/* ============================================= */
/* 화면 스타일. PRINT-CSS 구간은 서버가 PDF를 만들 때도 읽는다. (design/pdf.py의 _print_css) */
/* ============================================= */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.icon-fill-1 {
    font-variation-settings: 'FILL' 1;
}
/* Step transition classes */
.step-content {
    display: none;
}
.step-content.active {
    display: block;
}
@keyframes hsLineFadeIn {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hs-line.visible {
    animation: hsLineFadeIn 0.8s cubic-bezier(.25,.46,.45,.94) both;
}
.choice-card {
    position: relative;
    cursor: pointer;
    border: 1px solid #c7c4d8;
    background: #f8f9ff;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}
.choice-card:hover {
    background: #eff4ff;
}
.choice-card.is-selected {
    border-color: #3525cd;
    background: rgba(79, 70, 229, 0.08);
    color: #3525cd;
}
.choice-card .choice-check {
    opacity: 0;
}
.choice-card.is-selected .choice-check {
    opacity: 1;
}
.choice-card.is-selected .text-secondary,
.choice-card.is-selected .material-symbols-outlined {
    color: #3525cd;
}

/* Step 1 goal selection: expandable card layout */
#step-1 .goal-type-wrap {
    width: 100%;
    max-width: none;
}
#step-1 .goal-detail-section {
    margin-top: 26px;
    padding-top: 24px;
    border-top: 1px solid #c7c4d8;
}
#step-1 .goal-option-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
#step-1 .goal-option-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 66px;
    padding: 14px 46px 14px 16px;
    border: 1px solid #c7c4d8;
    border-radius: 0.5rem;
    background: #f8f9ff;
    color: #0b1c30;
    text-align: left;
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease;
}
#step-1 .goal-option-card:hover {
    border-color: #777587;
    background: #eff4ff;
    transform: translateY(-1px);
}
#step-1 .goal-option-card.is-selected {
    border-color: #3525cd;
    background: rgba(79, 70, 229, 0.08);
    color: #3525cd;
}
#step-1 .goal-option-card .goal-option-icon {
    flex: 0 0 auto;
    color: #515f74;
    font-size: 22px;
}
#step-1 .goal-option-card.is-selected .goal-option-icon {
    color: #3525cd;
}
#step-1 .goal-option-card .goal-option-label {
    font-size: 17px;
    line-height: 24px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
#step-1 .goal-option-card .goal-option-check {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #3525cd;
    opacity: 0;
    font-size: 21px;
}
#step-1 .goal-option-card.is-selected .goal-option-check {
    opacity: 1;
}
#step-1 .degree-level-card {
    min-height: 88px;
}
/* 흐름 화면의 아이콘 카드는 아이콘을 글자 왼쪽에 두는 가로형이라 높이를 정하지 않는다. (flow.js) */
#step-1 .degree-level-card.flow-card {
    min-height: 0;
}
#step-1 .degree-level-card .degree-level-title {
    font-size: 17px;
    line-height: 24px;
    font-weight: 700;
}
#step-1 .degree-level-card .degree-level-sub {
    font-size: 13px;
    line-height: 18px;
    color: #515f74;
}
#step-1 .degree-level-card.is-selected .degree-level-sub {
    color: #3525cd;
}
#step-1 .goal-reveal, #step-2 .goal-reveal {
    animation: goalReveal 180ms ease-out both;
}
/* 학력 입력: 학적 상태 카드는 학교 종류 카드보다 살짝 늦게 나타난다. */
#step-2 #academic-status-fieldset.goal-reveal { animation-delay: 60ms; }
@keyframes goalReveal {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}
.course-list > div > div:first-child {
    min-width: 0;
}
.step-indicator:not(:disabled) { cursor: pointer; }
.step-indicator:focus-visible, .summary-edit:focus-visible { outline: 2px solid #3525cd; outline-offset: 4px; }
.summary-edit { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; white-space: nowrap; text-align: left; border-radius: 6px; padding: 3px; }
.summary-edit > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.summary-edit:hover { background: #d3e4fe; color: #3525cd; }
/* PRINT-CSS-BEGIN */
/* 여기부터 PRINT-CSS-END까지는 서버(design/pdf.py의 _print_css)가 PDF를 만들 때도 그대로 읽어 쓴다. */
/* PDF 저장(인쇄) 템플릿: 1쪽은 목표ㆍ요건ㆍ학기 개요(8학기 칸), 2쪽부터 한 쪽에 두 칸(학기 또는 학기의 기수마다 과목 8줄, 반 쪽) */
/* 색: 푸른 계열(#1e3a8a, #2563eb, #eff6ff) + 노란 하이라이트(#fde047, #fef9c3) */
/* 형광펜 그라데이션에는 transparent를 쓰지 않는다. 모바일 크롬ㆍ파이어폭스의 PDF에서 검게 찍힌다. */
#print-root { display: none; color: #0f172a; font-size: 10.5pt; line-height: 1.45; }
/* 인쇄 전에 첫 쪽 높이를 재려고 화면 밖에 A4 본문 폭으로 잠깐 펼친다. */
#print-root.measuring { display: block; position: absolute; left: -10000px; top: 0; width: 182mm; visibility: hidden; }
.print-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 4mm; border-bottom: 2.5pt solid #1e3a8a; padding-bottom: 2mm; margin-bottom: 4mm; }
.print-title { font-size: 20pt; font-weight: 800; margin: 0; color: #1e3a8a; }
.print-title mark { background: linear-gradient(#fff 58%, #fde047 58%); color: inherit; padding: 0 1mm; }
.print-sub { color: #475569; font-size: 9.5pt; margin: 0; text-align: right; }
.print-h { font-size: 11.5pt; font-weight: 700; color: #1e3a8a; margin: 4.5mm 0 2mm; padding-left: 2.5mm; border-left: 3pt solid #2563eb; }
.print-goals { display: flex; flex-wrap: wrap; gap: 2mm; align-items: center; color: #1e3a8a; font-weight: 700; }
.print-chip { background: #1e3a8a; color: #fff; border-radius: 999px; padding: 0.8mm 4mm; font-weight: 700; }
.print-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2mm; margin-top: 3mm; }
.print-fact { background: #eff6ff; border: 0.75pt solid #bfdbfe; border-radius: 2mm; padding: 1.8mm 3mm; }
.print-fact b { display: inline-block; font-size: 13pt; color: #1e3a8a; background: linear-gradient(#eff6ff 55%, #fde047 55%); padding: 0 0.8mm; }
.print-fact span { display: block; color: #475569; font-size: 9pt; }
.print-table { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
.print-table th, .print-table td { border: 0.75pt solid #bfdbfe; padding: 1.2mm 2.5mm; text-align: left; vertical-align: top; }
.print-table th { background: #1e3a8a; color: #fff; font-weight: 700; border-color: #1e3a8a; }
.print-table tbody tr:nth-child(even) td { background: #f5f9ff; }
.print-table .num { text-align: right; white-space: nowrap; }
.print-table tr { break-inside: avoid; }
.print-table tr.print-swap td { background: #fef9c3 !important; }
.print-ok { color: #1d4ed8; font-weight: 700; }
.print-miss { background: #fde047; font-weight: 700; padding: 0 1.5mm; border-radius: 1mm; }
.print-note { margin: 1.2mm 0 0; font-size: 9.5pt; }
#print-root .notice-em { background: #fde047; color: #0f172a; border-radius: 1mm; padding: 0 1.5mm; }
/* 학기 개요: 8학기 칸을 항상 그린다. 설계에 없는 학기는 빈 칸으로 둔다. */
.print-sems { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2mm; }
.print-sem { border: 0.75pt solid #bfdbfe; border-top: 3pt solid #2563eb; border-radius: 2mm; padding: 2mm 2.5mm; min-height: 23mm; break-inside: avoid; }
.print-sem .no { display: inline-block; background: #1e3a8a; color: #fff; font-weight: 700; font-size: 8.5pt; border-radius: 999px; padding: 0 2.2mm; }
.print-sem .name { display: block; font-weight: 700; margin-top: 1mm; }
.print-sem .start { display: block; color: #1d4ed8; font-size: 9pt; }
.print-sem .load { display: block; color: #475569; font-size: 9pt; }
.print-sem .prac { display: inline-block; background: #fde047; font-size: 8pt; font-weight: 700; border-radius: 1mm; padding: 0 1.5mm; margin-top: 0.8mm; }
.print-sem.empty { border-style: dashed; border-color: #cbd5e1; border-top-color: #cbd5e1; color: #94a3b8; }
.print-sem.empty .no { background: #cbd5e1; }
.print-foot { margin-top: 3mm; text-align: right; font-weight: 700; color: #1e3a8a; }
.print-foot span { background: linear-gradient(#fff 55%, #fde047 55%); padding: 0 1mm; }
/* 학기 반 쪽: 본문 높이 265mm(297 - 위아래 여백 16mm씩)를 두 학기가 나눈다. 칸이 넘쳐도 다음 학기를 밀어내지 않게 자른다. */
.print-half { height: 130mm; box-sizing: border-box; overflow: hidden; }
.print-half + .print-half { margin-top: 3mm; padding-top: 4mm; border-top: 1pt dashed #93c5fd; }
.print-half .print-head { margin-bottom: 2mm; }
.print-half .print-title { font-size: 15pt; }
.print-half .print-foot { margin-top: 2mm; }
/* 과목 표는 칸 높이를 맞추려고 한 줄로 쓴다. */
.print-courses { table-layout: fixed; }
.print-courses td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.print-courses .c-name { width: 36%; }
.print-courses .c-degree { width: 22%; }
.print-courses .c-cert { width: 42%; }
.print-table tr.print-empty td { background: #fff; }
@page { size: A4; margin: 16mm 14mm; }
@media print {
    html, body { height: auto !important; min-height: 0 !important; overflow: visible !important; background: #fff !important; }
    body > *:not(#print-root) { display: none !important; }
    #print-root { display: block; }
    #print-root * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .print-page { break-after: page; }
    .print-page:last-child { break-after: auto; }
    .print-first:not(.print-long) { break-inside: avoid; }
}
/* PRINT-CSS-END */
/* 목표가 여러 개면 칩으로 나눠 줄바꿈한다. */
.summary-edit > .summary-goals { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 4px; white-space: normal; overflow: visible; }
.summary-chip { background: #fff; border: 1px solid #c7c4d8; border-radius: 999px; padding: 1px 8px; font-weight: 600; white-space: nowrap; }
#learner-summary { display: grid !important; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: center; gap: 6px !important; width: min(680px, 55vw); min-width: 0; max-width: 680px !important; flex: 0 1 680px; flex-wrap: nowrap !important; overflow: hidden; }
#step-1 .goal-type-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; width: 100%; }
#step-1 .goal-type-grid .choice-card { min-width: 0; width: 100%; border-radius: 0; border-width: 1px; margin-left: -1px; }
#step-1 .goal-type-grid .choice-card:first-child { margin-left: 0; border-radius: 0.5rem 0 0 0.5rem; }
#step-1 .goal-type-grid .choice-card:last-child { border-radius: 0 0.5rem 0.5rem 0; }
#step-1 .goal-type-grid .choice-card.is-selected { position: relative; z-index: 1; }
#profile-editor { width: min(620px, calc(100% - 32px)); height: min(760px, 90dvh); max-height: 90dvh; overflow: hidden; padding: 0; border: 1px solid #c7c4d8; border-radius: 16px; color: #0b1c30; background: #f8f9ff; }
#profile-editor::backdrop { background: rgb(11 28 48 / 45%); }
#step-return-dialog, #bachelor-warning-dialog { width: min(440px, calc(100% - 32px)); padding: 24px; border-radius: 16px; color: #0b1c30; background: #f8f9ff; }
#step-return-dialog::backdrop, #bachelor-warning-dialog::backdrop { background: rgb(11 28 48 / 45%); }
.profile-editor-shell { display: flex; flex-direction: column; height: 100%; }
.profile-editor-head, .profile-editor-foot { padding: 18px 20px; flex-shrink: 0; }
.profile-editor-body { flex: 1; padding: 0 20px 18px; overflow-y: auto; scrollbar-gutter: stable; min-height: 0; }
.profile-section { border: 1px solid #c7c4d8; border-radius: 8px; margin-top: 10px; background: white; }
.profile-section > summary { padding: 12px; cursor: pointer; font-weight: 700; }
.profile-options { max-height: none; overflow: visible; padding: 0 12px 12px; }
.profile-option { display: flex; align-items: center; gap: 10px; padding: 10px 6px; border-top: 1px solid #eff4ff; cursor: pointer; }
.profile-option input { flex-shrink: 0; }
@media (max-width: 639px) {
    #page-heading > div:first-child { flex-direction: column; }
    #learner-summary { max-width: 100%; width: 100%; flex: 0 0 auto; }
    .step-indicator { flex: 1; min-width: 0; }
    .step-indicator > span { font-size: 10px; text-align: center; }
}
.course-list > div > span:last-child {
    flex: 0 0 auto;
    margin-left: 8px;
}
@media (min-width: 1024px) {
    html, body {
        height: 100%;
        overflow: hidden;
    }
    body {
        min-height: 0 !important;
    }
    html.goal-step-page,
    body.goal-step-page {
        height: auto;
        min-height: 100vh !important;
        overflow-y: auto;
    }
    /* 높이는 body(flex 세로)의 flex-1이 채운다. 100vh - 헤더로 잡으면 푸터만큼 넘쳐 스크롤이 생긴다. */
    body.goal-step-page #app-main {
        height: auto;
        min-height: 0;
    }
    body.goal-step-page #content-card {
        overflow: visible;
    }
    /* 상세 목표 카드는 넓은 화면에서 3열로 놓아 노트북(768px 높이)에서도 스크롤 없이 보인다. */
    #step-1 .goal-option-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    #app-main {
        height: auto;
        min-height: 0;
        padding-top: 14px;
        padding-bottom: 10px;
    }
    #page-heading {
        margin-bottom: 12px;
    }
    #page-heading > h2 {
        margin-bottom: 10px;
    }
    #content-card {
        min-height: 0;
        overflow-y: auto;
        padding: 18px;
        margin-bottom: 8px;
    }
    #step-4.active {
        height: auto;
        display: flex;
        flex-direction: column;
    }
    #step-4 .roadmap-layout {
        gap: 14px;
    }
    #step-4 .semester-grid {
        margin-bottom: 0;
        gap: 10px;
    }
    #step-4 .semester-card {
        padding: 10px;
    }
    #step-4 .course-list {
        gap: 5px;
        overflow-y: auto !important;
        max-height: 220px !important;
    }
    #step-4 .course-list > div {
        padding: 4px 6px;
    }
    #step-4 .course-list > div p:first-child {
        line-height: 11px;
    }
    #step-4 .course-list > div p:nth-child(2) {
        line-height: 14px;
    }
    #step-navigation {
        padding-top: 8px;
    }
}
@media (max-width: 767px) {
    #step-1 .goal-option-grid {
        grid-template-columns: 1fr;
    }
    #step-1 .goal-option-card {
        min-height: 62px;
        padding-left: 14px;
    }
    .course-list > div {
        gap: 8px;
        justify-content: flex-start;
    }
    .course-list > div > span:last-child {
        margin-left: 8px;
    }
}
/* Roadmap: compact overview with accessible, touch-friendly detail panels. */
#step-4 .semester-grid { align-items: start; align-content: start; min-width: 0; }
#step-4 .semester-card { padding: 0; background: white; border: 1px solid #dce2ed; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 6px #0b1c3005; }
.semester-header { padding: 16px; }
.roadmap-button:focus-visible { outline: 3px solid #4f46e5; outline-offset: -3px; }
.semester-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 14px; font-weight: 700; }
.semester-number { background: #eeebff; color: #3525cd; width: 25px; height: 25px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.semester-start { margin-left: auto; font-size: 12px; font-weight: 600; color: #3525cd; background: #eeebff; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.design-track { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; color: #515f74; }
.track-note em { font-size: 12px; font-style: italic; color: #3525cd; margin-right: 4px; }
.track-options { display: flex; flex-wrap: wrap; gap: 6px; }
.track-option { font-size: 12px; font-weight: 600; padding: 3px 12px; border-radius: 999px; border: 1px solid #dce2ed; background: white; color: #515f74; }
.track-option:hover:not(:disabled) { border-color: #3525cd; color: #3525cd; }
.track-option.active { background: #eeebff; border-color: #eeebff; color: #3525cd; cursor: default; }
.semester-totals { margin: 10px 0 8px; font-size: 13px; color: #515f74; }
.semester-breakdown { display: flex; gap: 8px; margin-top: 4px; font-size: 12px; line-height: 1.5; color: #515f74; }
.semester-breakdown b { flex-shrink: 0; font-weight: 600; }
.semester-panel { border-top: 1px solid #e8eaf1; padding: 8px 12px 12px; }
#step-4 .course-list { display: flex; flex-direction: column; gap: 0; max-height: none !important; overflow: visible !important; }
#step-4 .course-list > .roadmap-course { padding: 10px 0; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid #eff1f6; }
.course-info { flex: 1; min-width: 0; }
.course-title { font-size: 13px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
/* G(교체 가능 과목) 드롭다운 */
.ghost-select { max-width: 100%; font: inherit; font-weight: 700; color: #3323cc; background: rgba(77,68,227,.08); border: 1px dashed #4d44e3; border-radius: 6px; padding: 1px 6px; cursor: pointer; }
.ghost-select:disabled { opacity: .6; cursor: default; }
.course-credits { color: #515f74; font-size: 11px; white-space: nowrap; }
.goal-badges { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 5px; }
.goal-badge { font-size: 11px; line-height: 1.6; padding: 2px 7px; border-radius: 5px; }
.goal-badge.degree { background: #e8f1ff; color: #175ea8; }
.goal-badge.certificate { background: #e9f5f2; color: #196857; }
.goal-badge.muted { background: #f1f3f6; color: #657080; }
.practicum-badge { font-size: 10px; font-weight: 600; color: #875316; background: #fff1d8; padding: 2px 6px; border-radius: 4px; }
.roadmap-button { min-height: 44px; padding: 8px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.roadmap-button:hover { background: #eff4ff; }
.roadmap-button:disabled { opacity: .45; cursor: default; }
.roadmap-button.primary { background: #3525cd; color: white; }
.roadmap-button.send { border: 1px solid #c7c4d8; background: #fff; }
.roadmap-button.save { border: 1px solid #c3c0ff; color: #3323cc; background: #eeebff; }
.roadmap-button.save:hover { background: #e2dfff; }
#design-save-dialog { width: min(640px, calc(100% - 32px)); max-height: 90dvh; overflow: hidden; padding: 0; border: 1px solid #c7c4d8; border-radius: 18px; color: #0b1c30; background: #f8f9ff; box-shadow: 0 24px 80px #0b1c3033; }
#design-save-dialog::backdrop { background: rgb(11 28 48 / 45%); }
.design-save-shell { display: flex; flex-direction: column; max-height: calc(90dvh - 2px); }
.design-save-head, .design-save-foot { flex-shrink: 0; }
.design-save-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 24px; border-bottom: 1px solid #e8eaf1; }
.design-save-heading { display: flex; align-items: center; gap: 12px; }
.design-save-icon { padding: 10px; border-radius: 12px; color: #3323cc; background: #eeebff; }
.design-save-heading h3 { margin: 0; font-size: 20px; font-weight: 700; }
.design-save-heading p { margin: 5px 0 0; font-size: 12px; line-height: 1.6; color: #515f74; }
.design-save-close { display: inline-flex; padding: 8px; border-radius: 8px; color: #515f74; }
.design-save-close:hover { background: #e5eeff; }
.design-save-body { padding: 24px; overflow-y: auto; min-height: 0; }
.design-save-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; border: 0; padding: 0; margin: 0 0 24px; }
.design-save-fields legend { padding: 0 0 14px; font-size: 14px; font-weight: 700; }
.design-save-fields label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 600; }
.design-save-name { grid-column: 1 / -1; }
.design-save-fields input { width: 100%; border: 1px solid #c7c4d8; border-radius: 8px; padding: 11px 12px; font-size: 14px; font-weight: 400; color: #0b1c30; background: #fff; }
.design-save-fields input:focus, .design-save-agree input:focus-visible { outline: 2px solid #4d44e3; outline-offset: 2px; }
.design-save-consent { border: 1px solid #dce2ed; border-radius: 12px; background: #fff; }
.design-save-consent h4 { margin: 0; padding: 16px 16px 0; font-size: 13px; font-weight: 700; }
.design-save-terms { padding: 0 16px 16px; font-size: 12px; line-height: 1.8; color: #515f74; word-break: keep-all; overflow-wrap: anywhere; }
.design-save-terms dl > div { padding: 12px 0; border-bottom: 1px solid #eff1f6; }
.design-save-terms dt { color: #0b1c30; font-weight: 700; margin-bottom: 4px; }
.design-save-terms dd { margin: 0; }
.design-save-terms p { margin: 12px 0 0; }
.design-save-choices { display: flex; flex-wrap: wrap; gap: 12px 24px; padding: 16px; border-top: 1px solid #e8eaf1; }
.design-save-agree { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; cursor: pointer; }
.design-save-agree input { flex-shrink: 0; accent-color: #3525cd; }
.design-save-foot { padding: 16px 24px 20px; border-top: 1px solid #e8eaf1; }
.design-save-foot > div { display: flex; justify-content: flex-end; gap: 8px; }
.design-save-foot .roadmap-button { min-width: 90px; }
@media (max-width: 480px) {
    .design-save-head, .design-save-body { padding: 20px; }
    .design-save-fields { grid-template-columns: minmax(0, 1fr); }
    .design-save-heading h3 { font-size: 18px; }
}
/* 과목 목록 위에서 선택 개수와 완료 버튼을 함께 보여준다. */
.course-selection-actions { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; margin-bottom: 12px; border: 1px solid #dce2ed; border-radius: 12px; background: #f8f9ff; box-shadow: 0 2px 6px #0b1c3005; }
.course-selection-actions .roadmap-button { white-space: nowrap; padding-inline: 18px; }
.course-selection-actions.hidden { display: none; }
/* 카드 글자는 낱말 단위로만 줄바꿈한다. (화면 폭에 따라 "자격증 취 / 득"처럼 쪼개지지 않게) */
.choice-card, .goal-option-card { word-break: keep-all; }
/* 모바일에서 카드를 고르면 다음 카드 묶음으로 스크롤한다. 위쪽에 여백을 조금 둔다. */
#goal-detail-section, #degree-specific-wrap, #liberal-major-wrap, #academic-status-fieldset, #sw2-path-section { scroll-margin-top: 16px; }
/* 결과 화면의 PDFㆍ저장 버튼 */
.result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.result-actions .roadmap-button { white-space: nowrap; }
/* 안내문: 낱말 중간에서 끊지 않고 줄 길이를 고르게 맞춘다. 좁은 화면에서는 고정 줄바꿈(<br>)을 풀어 화면 폭에 맞춘다. */
.hs-line, #content-card h3 { word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
@media (max-width: 640px) {
    .hs-line br, #content-card h3 br { display: none; }
    .result-actions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .result-actions .roadmap-button { padding: 8px 4px; font-size: 12px; }
}
/* 결과 화면의 학습자 요약 */
.design-profile-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 16px; font-size: 13px; }
.design-profile-rows > div { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
/* 목표는 칩이 여러 개라 한 줄을 통째로 쓴다. (좁은 칸에서 줄이 바뀌지 않게) */
.design-profile-rows > div.wide { grid-column: 1 / -1; }
.design-profile-rows dt { flex-shrink: 0; width: 44px; color: #515f74; font-weight: 600; }
.design-profile-rows dd { min-width: 0; font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 4px; }
/* 안내 문구 안의 강조 (예: 실습이 배치된 학기) */
.notice-em { font-weight: 700; color: #3525cd; background: #eeebff; border-radius: 6px; padding: 1px 7px; white-space: nowrap; }
.roadmap-button.danger { background: #ba1a1a; color: white; }
.roadmap-goals { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 12px; }
.roadmap-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 60; width: max-content; max-width: calc(100vw - 32px); padding: 10px 16px; background: #213145; color: white; border-radius: 12px; box-shadow: 0 4px 20px #0b1c3033; font-size: 13px; }
@media (min-width: 768px) { #step-4 .semester-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1440px) { #step-4 .semester-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
    #step-4 .semester-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .semester-header { padding: 14px 16px; }
    .roadmap-toast { bottom: calc(24px + env(safe-area-inset-bottom)); }
}

@keyframes spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }