:root {
    --campus-navy: #14243a;
    --campus-blue: #315f86;
    --campus-orange: #e06b3c;
    --campus-line: #dce2e7;
    --campus-soft: #f3f7f9;
    --campus-text: #273642;
}
html {
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

/* 클릭 위치와 요소 크기는 base.css에 맡기고 시각 표현만 통합합니다. */
body.sugang-main {
    min-height: 100vh;
    color: var(--campus-text);
    background-color: #fff !important;
    background-image: none !important;
    font-family: Pretendard, "Noto Sans KR", NanumGothic, Dotum, sans-serif;
}
.sugang-main #wrap { display:flex; min-height:100vh; min-height:100dvh; flex-direction:column; }
.sugang-main #footer.site-footer { margin-top:auto; }

.sugang-main .gnb {
    box-shadow: inset 0 -3px var(--campus-orange);
    background-color: var(--campus-navy);
    background-image: none;
}
.sugang-main .gnb li.logo p { color: #fff; }
.sugang-main .gnb li.on { background: var(--campus-orange); }
.sugang-main .gnb li a { color: #fff; }
.sugang-main .gnb li.on a:after { content:"PRACTICE"; display:block; margin-top:3px; color:#ffe4d7; font-size:9px; font-weight:800; letter-spacing:1.2px; }

.sugang-main #header {
    border-bottom: 1px solid var(--campus-line);
    background: #eef2f4;
}
.sugang-main #header .logout_ment { color: #64717c; }
.sugang-main #header .logout_ment .fc_blue { color: var(--campus-blue); }
.sugang-main .btn_logout {
    display: inline-flex;
    box-sizing: border-box;
    width: 68px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border: 1px solid #174d7d;
    border-radius: 2px;
    background: linear-gradient(#1773b5, #07558f);
    box-shadow: inset 0 1px rgba(255, 255, 255, .22);
    color: #fff !important;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-shadow: 0 -1px rgba(0, 0, 0, .22);
}

.sugang-main #info .info_sectionz {
    box-sizing: border-box;
    width: 1120px;
    max-width: 1120px;
    color: var(--campus-text);
    background: #fff;
    transform: scaleY(.952);
    transform-origin: top center;
}
.sugang-main #info .info_sectionz > div:not(.captcha-row-wrap),
.sugang-main #form1,
.sugang-main .list_search {
    box-sizing: border-box;
    width: 100%;
}
.sugang-main .sec_tit { color: var(--campus-navy); }
.sugang-main .title-marker {
    display: inline-block;
    width: 4px;
    height: 14px;
    margin-right: 8px;
    border-radius: 2px;
    background: var(--campus-orange);
    vertical-align: -1px;
}
.sugang-main .point { color: #c5542e; }

.sugang-main .integration-notice {
    margin: 0;
    padding: 11px 14px;
    border: 1px solid #bdd5e7;
    border-left: 4px solid var(--campus-blue);
    border-radius: 8px;
    background: #f2f8fc;
    color: #35546d;
    font-size: 12px;
    line-height: 1.55;
}
.sugang-main .integration-notice:not([hidden]) {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1200;
    box-sizing: border-box;
    width: min(420px, calc(100vw - 44px));
    box-shadow: 0 10px 28px rgba(26, 45, 61, .16);
}
.sugang-main .tbl_subst01,
.sugang-main .tbl_subst02 {
    box-sizing: border-box;
    width: 100%;
    table-layout: fixed;
    border-color: var(--campus-line);
    border-top-color: var(--campus-blue);
    background: #fff;
}
.sugang-main .tbl_subst01 thead th,
.sugang-main .tbl_subst02 th {
    border-color: var(--campus-line);
    background: var(--campus-soft);
    color: #41515f;
}
.sugang-main .tbl_subst01 td,
.sugang-main .tbl_subst02 td { border-color: var(--campus-line); }
.sugang-main .tbl_subst01 th,
.sugang-main .tbl_subst01 td {
    padding-top: 4px;
    padding-bottom: 4px;
}
.sugang-main .main-course-table th,
.sugang-main .main-course-table td {
    box-sizing: border-box;
    min-width: 0;
}
.sugang-main .main-course-table tbody td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sugang-main .main-course-table tbody td:nth-child(3),
.sugang-main .main-course-table tbody td:nth-child(6) {
    overflow-wrap: anywhere;
    white-space: normal;
}
.sugang-main .main-course-table tbody td:last-child {
    padding-right: 5px;
    padding-left: 5px;
    text-align: center;
}
.sugang-main .main-course-table .sugang-button {
    display: inline-grid;
    max-width: 100%;
    vertical-align: middle;
}
.sugang-main .tbl_subst01 tbody tr:hover { background: #f8fafb; }

.sugang-main .list_search {
    min-width: 0;
    border-color: #c9d8e3;
    background: #f6f9fb;
}
.sugang-main .list_search input[type="text"],
.sugang-main #refCaptcha {
    border: 1px solid #aebbc5;
    background: #fff;
    color: var(--campus-text);
}
.sugang-main .course-code-entry { display:flex; align-items:center; gap:6px; min-height:28px; }
.sugang-main .table_search1 { width:100%; table-layout:fixed; }
.sugang-main .table_search1 td { box-sizing:border-box; }
.sugang-main .course-code-entry input { box-sizing:border-box; width:68px; height:22px!important; border-radius:2px; text-align:center; font-weight:700; letter-spacing:0; }
.sugang-main .course-code-entry input[name="a_lt_no"] { width:43px; }
.sugang-main .course-code-entry .point { margin-left:3px; font-size:10px; }
.sugang-main .application-captcha-box { display:inline-flex; box-sizing:border-box; width:130px; height:30px; align-items:center; gap:2px; padding:0 2px; overflow:hidden; border:1px solid #8c8c8c; background:#c0c0c0; }
.sugang-main .application-captcha-box > span { flex:0 0 62px; width:62px!important; height:28px; overflow:hidden; float:none!important; line-height:28px!important; }
.sugang-main #captchaImage { width:62px; height:28px; }
.sugang-main .captcha-row-table td:last-child { text-align:left; padding-left:14px; }
.sugang-main #refCaptcha { box-sizing:border-box; width:56px; height:22px; margin:0!important; text-align:center; font-size:14px!important; font-weight:800; letter-spacing:2px; }

.sugang-main .sugang-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border-radius: 2px;
    font-family: inherit;
    font-size: 12px !important;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: filter .12s ease, box-shadow .12s ease;
}
.sugang-main .add-button {
    display: inline-grid;
    grid-template-columns: 34px 44px;
    width: 80px;
    height: 25px;
    align-items: center;
    border: 1px solid #174d7d;
    background: linear-gradient(#1773b5, #07558f);
    color: #fff;
    line-height: 23px;
    text-shadow: 0 -1px rgba(0, 0, 0, .2);
}
.sugang-main .add-button span {
    height: 23px;
    border-right: 1px solid rgba(0, 0, 0, .2);
    box-shadow: 1px 0 rgba(255, 255, 255, .12);
    font-size: 14px;
    line-height: 23px;
}
.sugang-main .apply-button,
.sugang-main .delete-button {
    width: 62px;
    height: 36px;
    line-height: 34px;
}
.sugang-main .apply-button {
    border: 1px solid #174d7d;
    background: linear-gradient(#1773b5, #07558f);
    color: #fff;
    text-shadow: 0 -1px rgba(0, 0, 0, .2);
}
.sugang-main .delete-button {
    border: 1px solid #b7bdc2;
    background: linear-gradient(#fff, #e6e8ea);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
    color: #5d646a;
}
.sugang-main .sugang-button:hover,
.sugang-main .btn_logout:hover { filter: brightness(.94); }
.sugang-main .sugang-button:active,
.sugang-main .btn_logout:active { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .22); }
.sugang-main input:focus,
.sugang-main button:focus-visible,
.sugang-main a:focus-visible {
    outline: 2px solid rgba(49, 95, 134, .28);
    outline-offset: 1px;
}

.sugang-main #footer.site-footer { background: var(--campus-navy); }
.sugang-main #footer.site-footer p { color: #c9d5df; }

@media (max-width: 1020px) {
    .sugang-main #info .info_sectionz { width: calc(100% - 40px); max-width:none; }
}
@media (max-width: 760px) {
    /* Keep the familiar registration flow, but make the controls and records
       usable without shrinking a 980px desktop table into a phone viewport. */
    html { overflow-x:hidden; scrollbar-gutter:auto; }
    .sugang-main #wrap { min-width:0; }
    .sugang-main .gnb { min-height:68px; }
    .sugang-main .gnb ul {
        display:grid;
        grid-template-columns:minmax(132px, 45%) minmax(0, 1fr);
        min-height:68px;
        padding:0 8px;
        align-items:stretch;
    }
    .sugang-main .gnb li.logo {
        display:flex;
        width:auto;
        height:68px;
        padding:0 10px;
        flex-basis:auto;
        gap:8px;
    }
    .sugang-main .gnb li.logo img { width:34px; height:34px; flex-basis:34px; }
    .sugang-main .gnb li.logo p { font-size:12px; line-height:16px; }
    .sugang-main .gnb li.on {
        display:flex;
        width:auto;
        min-height:68px;
        padding:0 8px;
        align-items:center;
        justify-content:center;
    }
    .sugang-main .gnb li.on a { width:100%; padding:12px 4px; line-height:1.35; }
    .sugang-main #header { min-height:48px; }
    .sugang-main #header .section { min-height:48px; height:auto; }
    .sugang-main #header .logout_ment {
        position:static;
        box-sizing:border-box;
        min-height:48px;
        margin:0;
        padding:8px 86px 8px 14px;
        line-height:1.55;
    }
    .sugang-main #header .policy_btn { top:13px; right:10px; }
    .sugang-main #wrap > .mt_30 { display:none; }
    .sugang-main #info { padding-top:16px; overflow:visible; }
    .sugang-main #info .info_sectionz { width:calc(100% - 24px); max-width:none; transform:none; }
    .sugang-main #info .info_sectionz > div:not(.captcha-row-wrap) { overflow:visible; }

    /* Compact profile summary. Less important details remain in Personal settings. */
    .sugang-main .profile-info-table {
        display:table!important;
        width:100%!important;
        min-width:0!important;
        overflow:hidden;
        table-layout:fixed;
        border-radius:6px;
    }
    .sugang-main .profile-info-table colgroup { display:none; }
    .sugang-main .profile-info-table tr {
        display:grid;
        grid-template-columns:72px minmax(0,1fr) 72px minmax(0,1fr);
    }
    .sugang-main .profile-info-table th,
    .sugang-main .profile-info-table td {
        box-sizing:border-box;
        min-width:0;
        padding:7px 6px;
        font-size:11px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }
    .sugang-main .profile-info-table th {
        padding-right:3px;
        padding-left:3px;
        font-size:10px;
        line-height:1.3;
        white-space:normal;
        word-break:keep-all;
        overflow-wrap:normal;
        text-overflow:clip;
    }
    .sugang-main .profile-info-table tr:first-child > :nth-child(3),
    .sugang-main .profile-info-table tr:first-child > :nth-child(4),
    .sugang-main .profile-info-table tr:nth-child(2) > :nth-child(5),
    .sugang-main .profile-info-table tr:nth-child(2) > :nth-child(6) { display:none; }
    .sugang-main .profile-info-table tr:last-child td[colspan] { grid-column:auto; }

    .sugang-main .mt_30 { margin-top:18px; }
    .sugang-main .sec_tit { margin-top:10px; font-size:16px; }
    .sugang-main .point { display:block; line-height:1.55; }
    .sugang-main .mobile-table-note { width:100%; position:static; }

    /* Mobile record cards reuse the same tbody and buttons as the desktop table. */
    .sugang-main .main-course-table {
        display:block!important;
        width:100%!important;
        min-width:0!important;
        overflow:visible!important;
        border:0;
        background:transparent;
    }
    .sugang-main .main-course-table colgroup,
    .sugang-main .main-course-table thead { display:none; }
    .sugang-main .main-course-table tbody { display:block; width:100%; }
    .sugang-main .main-course-table tbody:empty::before {
        display:block;
        box-sizing:border-box;
        width:100%;
        padding:15px 12px;
        border:1px dashed #ccd8e1;
        border-radius:8px;
        background:#f8fafb;
        color:#71808c;
        font-size:12px;
        text-align:center;
        content:'등록된 과목이 없습니다.';
    }
    .sugang-main #packageCourseBody:empty::before { content:'신청할 수강꾸러미 과목이 없습니다.'; }
    .sugang-main #appliedCourseBody:empty::before { content:'수강신청이 완료된 과목이 없습니다.'; }
    .sugang-main .main-course-table tbody tr {
        display:grid;
        grid-template-columns:minmax(0,1fr) auto;
        gap:5px 10px;
        margin:8px 0;
        padding:11px;
        border:1px solid #d7e1e8;
        border-radius:9px;
        background:#fff;
    }
    .sugang-main .main-course-table tbody td {
        display:block;
        width:auto!important;
        min-width:0;
        padding:0!important;
        border:0;
        overflow:visible;
        font-size:11px;
        text-align:left;
        text-overflow:clip;
        white-space:normal;
    }
    .sugang-main .main-course-table tbody td:first-child,
    .sugang-main .main-course-table tbody td:nth-child(7),
    .sugang-main .main-course-table tbody td:nth-child(8) { display:none; }
    .sugang-main .main-course-table tbody td:nth-child(3) {
        grid-column:1 / -1;
        grid-row:1;
        padding:0!important;
        color:#172f45;
        font-size:14px;
        font-weight:800;
        line-height:1.45;
    }
    .sugang-main .main-course-table tbody td:nth-child(2) { grid-column:1; grid-row:2; color:#536b7d; }
    .sugang-main .main-course-table tbody td:nth-child(4) { grid-column:2; grid-row:2; color:#536b7d; text-align:right; }
    .sugang-main .main-course-table tbody td:nth-child(5) { grid-column:1 / -1; grid-row:3; color:#637586; }
    .sugang-main .main-course-table tbody td:nth-child(6) {
        grid-column:1 / -1;
        grid-row:4;
        padding-top:6px!important;
        border-top:1px solid #edf1f4;
        color:#334f65;
        line-height:1.5;
    }
    .sugang-main .main-course-table tbody td:nth-child(2)::before { content:'강좌번호 '; font-weight:700; }
    .sugang-main .main-course-table tbody td:nth-child(4)::after { content:'학점'; }
    .sugang-main .main-course-table tbody td:last-child {
        grid-column:1 / -1;
        grid-row:5;
        padding-top:4px!important;
        text-align:right;
    }
    .sugang-main .main-course-table .sugang-button {
        width:88px;
        min-height:44px;
        height:44px;
        line-height:42px;
        font-size:13px!important;
    }
    .sugang-main #packageCourseBody { max-height:246px; overflow-y:auto; overscroll-behavior:contain; }

    .sugang-main .captcha-row-wrap { margin:18px 0; }
    .sugang-main .captcha-row-table tr { gap:8px; }
    .sugang-main .captcha-row-table td:nth-child(2) { display:none; }
    .sugang-main .application-captcha-box { width:164px; height:54px; padding:4px 6px; }
    .sugang-main .application-captcha-box > span { height:30px; }
    .sugang-main #refCaptcha { width:76px; height:44px; font-size:16px!important; }
    .sugang-main .captcha-instruction { display:block; max-width:280px; font-size:12px; line-height:1.5; }

    .sugang-main .list_search { padding:10px; overflow:visible; }
    .sugang-main .table_search1,
    .sugang-main .table_search1 tbody { display:block; width:100%; }
    .sugang-main .list_search .table_search1 tr { display:grid; grid-template-columns:minmax(0,1fr) 88px; gap:8px; }
    .sugang-main .list_search .table_search1 td { display:block; width:auto!important; }
    .sugang-main .course-code-entry { min-width:0; min-height:44px; flex-wrap:wrap; gap:7px; }
    .sugang-main .course-code-entry input { width:94px; height:44px!important; font-size:16px!important; }
    .sugang-main .course-code-entry input[name="a_lt_no"] { width:58px; }
    .sugang-main .course-code-entry .point { flex:1 0 100%; margin:0; font-size:10px; }
    .sugang-main .add-button { width:88px; min-height:44px; height:44px; grid-template-columns:32px 1fr; line-height:42px; }
    .sugang-main .add-button span { height:42px; line-height:42px; }
    .sugang-main input { scroll-margin-bottom:150px; }

    .sugang-main .integration-notice:not([hidden]) {
        left:12px;
        right:12px;
        bottom:12px;
        width:auto!important;
        max-width:none;
        max-height:calc(100dvh - 24px);
        overflow:auto;
    }
}