/* G안 1차 적용: 로그인·메인에서만 연결한다. 업무 화면의 공통 CSS는 유지한다. */
.mainPage,
.portal-login {
    --portal-primary: var(--ui-primary);
    --portal-primary-soft: var(--ui-primary-soft);
    --portal-ink: var(--ui-ink);
    --portal-muted: var(--ui-muted);
    --portal-line: var(--ui-line);
    --color-brand: var(--portal-primary);
    --color-primary: var(--portal-primary);
    --color-primary-dark: var(--ui-primary-dark);
    --color-brand-font: var(--ui-primary-dark);
    --color-brand-soft: var(--portal-primary-soft);
    font-family: var(--font-family-base);
    font-size: 16px;
    color: var(--portal-ink);
}

.portalIcon {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.portal-main [hidden],
.portal-login [hidden] {
    display: none;
}

.portal-main h1,
.portal-main h2,
.portal-login h1,
.portal-login h2 {
    margin: 0;
    letter-spacing: -.04em;
    word-break: keep-all;
}

.portal-main {
    letter-spacing: normal;
}

.portal-main h1,
.portal-main h2 {
    letter-spacing: -.045em;
}

.portal-main a:focus-visible,
.portal-main button:focus-visible,
.portal-login button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ui-primary) 55%, var(--ui-white));
    outline-offset: 3px;
}

/* 메인 헤더: 기존 시스템 선택·메뉴·개인정보·세션 기능의 마크업은 바꾸지 않는다. */
.mainPage {
    min-width: 0;
    background: var(--ui-search-surface);
    letter-spacing: -.4px;
}

.mainPage .container {
    background: transparent;
}

.mainPage .mainHeader {
    background: var(--ui-white);
    border-bottom: 1px solid var(--portal-line);
}

.mainPage .mainLogo {
    padding-right: 0;
}

.mainPage .mainLogo img,
.portalLoginBrand img {filter: none;}

/* 기존 img의 크기와 대체 텍스트를 유지하고, 로고 색상은 테마 팔레트를 따른다. */
@supports (mask-image: url("")) or (-webkit-mask-image: url("")) {
    .mainPage .mainLogo > a,
    .portalLoginBrand {position: relative; display: inline-flex; align-items: center; vertical-align: middle;}
    .mainPage .mainLogo > a::after,
    .portalLoginBrand::after {
        content: ""; position: absolute; inset: 0;
        background-color: var(--palette-brand-dark); pointer-events: none;
        -webkit-mask: url("../../images/koiha_logo.png") center / contain no-repeat;
        mask: url("../../images/koiha_logo.png") center / contain no-repeat;
    }
    .mainPage .mainLogo img,
    .portalLoginBrand img {display: block; height: auto; opacity: 0;}
}

.mainPage .mainLogo img {
    width: 210px;
}

.mainPage .styleDummy {
    display: none;
}

.mainPage .mainHeaderContent {
    position: relative;
}

.mainPage .headerTop {
    min-height: 42px;
    height: auto;
    padding: 6px 0 0;
    background: transparent;
}

.mainPage .mainSystemTabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
}

.mainPage .mainSystemTabs > span {
    display: none;
}

.mainPage .mainSystemTabs button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 5px 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--portal-muted);
    font-size: 14px;
    font-weight: 700;
}

.mainPage .mainSystemTabs button._active,
.mainPage .mainSystemTabs button:hover {
    border-color: var(--ui-line);
    background: var(--portal-primary-soft);
    color: var(--portal-primary);
}

.mainPage .mainSystemTabs button::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--neutral-350);
}

.mainPage .mainSystemTabs button._active::before {
    background: currentColor;
}

.mainPage .menuSet {
    position: absolute;
    right: 0;
    bottom: 12px;
    gap: 14px;
    padding: 0;
    background: transparent;
    font-size: 13px;
    color: var(--portal-muted);
}

.mainPage .headerBottom {
    height: 58px;
    padding: 0 120px 0 0;
    border: 0;
    background: transparent;
}

.mainPage .topMenuWrap {
    gap: 28px;
}

.mainPage .topMenuWrap a {
    padding: 16px 0;
    color: var(--portal-ink);
    font-size: 17px;
}

.mainPage .topMenuWrap a._active::after {
    bottom: 6px;
}

.mainPage .topItemWrap {
    position: absolute;
    top: 9px;
    right: 0;
    gap: 12px;
    font-size: 13px;
}

.mainPage .topItemWrap button {
    font-size: 13px;
}
.mainPage .topItemWrap .admin-btn {
    min-height: 30px;
    height: 30px;
    padding: 0 9px;
    background: var(--ui-white);
    color: var(--portal-muted);
    border-color: var(--portal-line);
    font-size: 12px;
}

.mainPage .header-privacy-mask {
    border-color: var(--ui-line);
    background: var(--portal-primary-soft);
    color: var(--portal-primary);
}

.mainPage .header-privacy-mask[data-unmasked="true"] {
    border-color: color-mix(in srgb, var(--ui-danger) 25%, var(--ui-white));
    background: color-mix(in srgb, var(--ui-danger) 6%, var(--ui-white));
    color: var(--ui-danger);
}

/* 메인: 배너·바로가기·알림 / 공지·진행률 / 관련 서비스의 세 영역. */
.mainPage .mainContent {
    padding: 0;
    margin: 0;
}

.portal-main {
    --portal-gap: 16px;
    display: grid;
    grid-template-rows: minmax(330px, 1.65fr) minmax(280px, 1fr) auto;
    gap: var(--portal-gap);
    width: calc(100% - 96px);
    max-width: 1780px;
    margin: 0 auto;
    padding: 16px 0 12px;
}

.portalMainTop {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--portal-gap);
    min-height: 0;
}

.portalHero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 27% minmax(0, 1fr);
    min-height: 0;
    border: 1px solid color-mix(in srgb, var(--palette-brand) 15%, var(--ui-white));
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(114deg, color-mix(in srgb, var(--palette-brand-light) 7%, var(--ui-white)) 0%, color-mix(in srgb, var(--palette-brand) 9%, var(--ui-white)) 50%, color-mix(in srgb, var(--palette-brand) 12%, var(--ui-white)) 100%);
}

.portalHero::after {
    content: "";
    position: absolute;
    top: -110px;
    right: -55px;
    z-index: -1;
    width: 460px;
    height: 460px;
    border: 1px solid color-mix(in srgb, var(--ui-white) 44%, transparent);
    border-radius: 50%;
    box-shadow: 0 0 0 48px color-mix(in srgb, var(--ui-white) 13%, transparent), 0 0 0 96px color-mix(in srgb, var(--ui-white) 9%, transparent);
    pointer-events: none;
}

.portalHeroCopy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 24px 0 20px 26px;
}

.portalHeroKicker {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--ui-muted);
    line-height: 1.6;
    font-weight: 500;
}

.portalHeroKicker::before {
    display: inline-block;
    content: "";
    width: 17px;
    margin-right: 8px;
    border-top: 2px solid color-mix(in srgb, var(--ui-primary) 55%, var(--ui-white));
    vertical-align: middle;
}

.portalHeroCopy h1 {
    font-size: clamp(24px, 1.7vw, 31px);
    line-height: 1.4;
    letter-spacing: -1.2px;
    font-weight: 750;
}

.portalHeroCopy h1 strong {
    display: block;
    color: var(--portal-primary);
}

.portalHeroDescription {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--ui-muted);
}

.portalWelcomeArt {
    align-self: center;
    width: 180px;
    height: 115px;
    object-fit: contain;
    margin-top: 12px;
}

.portalLaunchpad {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: 22px;
    z-index: 2;
}

.portalPanelHeading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.portalPanelHeading h2 {
    font-size: 22px;
    font-weight: 750;
    line-height: normal;
}

.portalLaunchpad .portalPanelHeading {
    flex-wrap: wrap;
}

.portalSectionHint {
    font-size: 13px;
    color: var(--ui-muted);
}

.portalQuickGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    gap: 12px;
    flex: 1;
    min-height: 0;
}

.portalQuickGrid > .portalEmpty {
    grid-row: 1 / -1;
}

.portalQuickLink {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-width: 0;
    min-height: 0;
    padding: clamp(10px, 1.2vh, 18px) 14px;
    border: 1px solid var(--ui-line);
    border-radius: 12px;
    background: var(--ui-white);
    text-align: center;
    font-size: 12px;
    font-weight: 550;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--ui-ink) 3%, transparent);
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.portalQuickLink:hover,
.portalQuickLink:focus-visible {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--ui-primary) 55%, var(--ui-white));
    background: var(--ui-icon-soft);
    color: var(--ui-primary-dark);
}

.portalQuickIcon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 90px;
    height: 96px;
    border-radius: 12px;
    color: var(--portal-primary);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* 순서가 아니라 서버 모델의 업무 아이콘 코드에 연결한다. 다른 역할은 기존 SVG를 유지한다. */
.portalQuickIcon[data-icon="clipboard"] { background-image: url("../../images/common/main/shortcut-application.png"); }
.portalQuickIcon[data-icon="chart"] { background-image: url("../../images/common/main/shortcut-status.png"); }
.portalQuickIcon[data-icon="calendar"] { background-image: url("../../images/common/main/shortcut-assignment.png"); }
.portalQuickIcon[data-icon="people"] { background-image: url("../../images/common/main/shortcut-expert.png"); }
.portalQuickIcon[data-icon="consult"] { background-image: url("../../images/common/main/shortcut-consulting.png"); }
.portalQuickIcon[data-icon="report"] { background-image: url("../../images/common/main/shortcut-standard.png"); }

.portalQuickIcon[data-icon="clipboard"] .portalIcon,
.portalQuickIcon[data-icon="chart"] .portalIcon,
.portalQuickIcon[data-icon="calendar"] .portalIcon,
.portalQuickIcon[data-icon="people"] .portalIcon,
.portalQuickIcon[data-icon="consult"] .portalIcon,
.portalQuickIcon[data-icon="report"] .portalIcon {
    display: none;
}

.portalQuickIcon .portalIcon {
    width: 36px;
    height: 36px;
}

.portalQuickCopy {
    flex: 1;
    min-width: 0;
}

.portalQuickCopy strong {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    word-break: keep-all;
}

.portalCard {
    min-width: 0;
    min-height: 0;
    padding: 18px 20px;
    border: 1px solid var(--portal-line);
    border-radius: 20px;
    background: var(--ui-white);
}

.portalAlarmPanel {
    display: flex;
    flex-direction: column;
    padding: 16px 18px;
}

.portalAlarmPanel .portalPanelHeading {
    margin-bottom: 10px;
}

.portalAlarmIcon {
    width: 22px;
    height: 22px;
    color: var(--portal-primary);
}

.portalCount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 21px;
    height: 21px;
    margin-left: 4px;
    border-radius: 6px;
    background: var(--portal-primary-soft);
    color: var(--portal-primary);
    font-size: 11px;
    vertical-align: 3px;
}

.portalAlarmControls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--portal-line);
    flex-shrink: 0;
}

.portalAlarmControls select {
    width: 170px;
    height: 34px;
    padding: 5px 8px;
    border: 1px solid var(--portal-line);
    border-radius: 7px;
    background: var(--ui-search-surface);
    color: var(--portal-ink);
    font-size: 14px;
}

.portalAlarmPaging {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    white-space: nowrap;
}

.portalAlarmPaging button {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--portal-ink);
    padding: 0;
}

.portalAlarmPaging button:disabled {
    opacity: .3;
    cursor: default;
}

.portalAlarmPaging button:not(:disabled):hover {
    background: var(--portal-primary-soft);
    color: var(--portal-primary);
}

.portalAlarmPaging .portalIcon {
    width: 19px;
    height: 19px;
}

#mainAlarmPrevious .portalIcon {
    transform: rotate(180deg);
}

.portalAlarmList {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: visible;
    list-style: none;
    padding: 0;
}

.portalAlarmList > li {
    display: flex;
    align-items: center;
    flex: 1;
    min-height: 0;
    gap: 9px;
    padding: 5px 0;
    border-bottom: 1px solid var(--portal-line);
}

.portalAlarmList > li.is-last-visible {
    border-bottom: 0;
    padding-bottom: 0;
}

.portalAlarmList > li::before {
    content: "";
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    margin-top: 7px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ui-primary) 75%, var(--ui-white));
}

.portalAlarmList > li:nth-child(3n + 2)::before {
    background: var(--palette-taupe);
}

.portalAlarmList > li:nth-child(3n)::before {
    background: var(--palette-olive);
}

.portalAlarmList a {
    flex: 1;
    min-width: 0;
}

.portalAlarmCategory {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 3px;
}

.portalAlarmCategory time {
    color: var(--neutral-500);
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
}

.portalAlarmDescription {
    display: block;
    overflow: hidden;
    color: var(--portal-muted);
    font-size: 15px;
    line-height: 1.5;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.portalEmpty {
    grid-column: 1 / -1;
    align-self: center;
    padding: 20px;
    color: var(--portal-muted);
    font-size: 15px;
    text-align: center;
}

.portalAlarmList > .portalEmpty::before {
    display: none;
}

.portalInformationGrid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: var(--portal-gap);
    min-height: 0;
}

.portalNoticeCard,
.portalProgressCard {
    display: flex;
    flex-direction: column;
    padding: 14px 20px;
}

.portalInformationGrid .portalPanelHeading {
    height: 45px;
    flex-shrink: 0;
    margin-bottom: 8px;
}

.portalNoticeCard {
    position: relative;
}

.portalNoticeFilters {
    position: absolute;
    top: 27px;
    right: 63px;
    display: flex;
    gap: 6px;
    border-radius: 8px;
    background: var(--portal-muted);
}

.portalNoticeMore {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--portal-ink);
    cursor: pointer;
}

.portalNoticeMore .portalIcon {
    width: 19px;
    height: 19px;
}

.portalNoticeMore:hover,
.portalNoticeMore:focus-visible {
    background: var(--portal-primary-soft);
    color: var(--portal-primary);
}

.portalNoticeMore:disabled {
    opacity: .45;
    cursor: default;
}

.portalNoticeFilters button {
    padding: 2px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ui-white);
    font-size: 14px;
    line-height: 1.25;
}

.portalNoticeFilters button.is-active {
    background: var(--portal-primary-soft);
    color: var(--portal-primary);
    font-weight: 700;
    box-shadow: 1px 2px 3px color-mix(in srgb, var(--ui-ink) 30%, transparent);
}

.portalNoticeList {
    display: grid;
    grid-template-rows: repeat(5, minmax(0, 1fr));
    flex: 1;
    min-height: 0;
    list-style: none;
    padding: 0;
}

.portalNoticeList li {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 10px;
    min-height: 37px;
    padding: 4px 0;
    border-top: 1px solid var(--portal-line);
    font-size: 16px;
    line-height: normal;
}

.portalNoticeList li:last-child {
    border-bottom: 0;
}

.portalNoticeList a {
    flex: 1;
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.portalNoticeList a:hover {
    color: var(--portal-primary);
}

.portalNoticeCategory {
    flex-shrink: 0;
    color: var(--portal-muted);
    font-weight: 700;
    font-size: 14px;
}

.portalNoticeList > .portalEmpty {
    grid-row: 1 / -1;
    justify-content: center;
    border: 0;
}

.portalNoticeCategory::after {
    content: "/";
    padding-left: 5px;
}

.portalNoticeList time {
    color: var(--neutral-500);
    font-family: Arial, var(--font-family-base);
    font-size: 14px;
    white-space: nowrap;
}

.portalProgressBody {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 4px 0;
}

.portalProgressDonut {
    position: relative;
    flex-shrink: 0;
    width: 208px;
    height: 208px;
}

.portalProgressHint {
    color: var(--portal-muted);
    font-size: 11px;
}

.portalProgressDonut > svg {
    display: block;
    width: 100%;
    height: 100%;
}

.portalProgressTrack,
.portalProgressValue {
    fill: none;
    stroke-width: 8;
}

.portalProgressTrack {
    stroke: var(--ui-line-soft);
}

.portalProgressValue {
    stroke: var(--portal-primary);
    stroke-linecap: round;
}

.portalProgressDonut > div {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.portalProgressDonut strong {
    font-family: Arial, var(--font-family-base);
    font-size: 36px;
    font-weight: 600;
    letter-spacing: -1.4px;
}

.portalProgressDonut small,
.portalProgressList small {
    margin-left: 2px;
    font-size: 13px;
    font-weight: 400;
}

.portalProgressDonut small {
    margin-left: 0;
    padding-left: 3px;
    font-size: 14px;
    font-weight: inherit;
    letter-spacing: 0;
}

.portalProgressList small {
    color: var(--portal-muted);
}

.portalProgressDonut > div > span {
    margin-top: 4px;
    color: var(--portal-muted);
    font-size: 10px;
}

.portalProgressList {
    flex: 1;
    min-width: 0;
}

.portalProgressList > div {
    position: relative;
    margin-bottom: 18px;
}

.portalProgressList > div:last-child {
    margin-bottom: 0;
}

.portalProgressList dt {
    font-size: 15px;
    margin-bottom: 10px;
    padding-right: 45px;
}

.portalProgressList dd > strong {
    position: absolute;
    top: 0;
    right: 0;
    font-family: Arial, var(--font-family-base);
    font-size: 19px;
}

.portalProgressList dd > span {
    display: block;
    height: 7px;
    border-radius: 8px;
    background: var(--ui-line-soft);
}

.portalProgressList dd > span::before {
    content: "";
    display: block;
    width: var(--progress);
    height: 100%;
    border-radius: inherit;
    background: var(--portal-primary);
}

.portalProgressList > div:nth-child(2) dd > span::before {
    background: var(--ui-primary-light);
}

.portalProgressList > div:nth-child(3) dd > span::before {
    background: color-mix(in srgb, var(--ui-primary-light) 65%, var(--ui-white));
}

.portalBannerGrid {
    display: grid;
    grid-template-columns: 1.16fr 1fr 1fr;
    gap: var(--portal-gap);
}

.portalBanner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    min-width: 0;
    min-height: 68px;
    padding: 12px 18px;
    border: 1px solid transparent;
    border-radius: 15px;
    background: var(--ui-surface);
}

.portalBanner > span {
    flex: 1;
    min-width: 0;
}

.portalBanner strong {
    display: block;
    font-size: 17px;
    margin-bottom: 7px;
}

.portalBanner > span > span {
    display: block;
    color: var(--portal-muted);
    font-size: 13px;
}

.portalBanner .portalIcon {
    width: 42px;
    height: 42px;
    color: color-mix(in srgb, var(--ui-muted) 80%, var(--ui-white));
}

.portalBanner .portalBannerArrow {
    width: 21px;
    height: 21px;
    color: inherit;
}

.portalBanner.-primary {
    background: var(--portal-primary);
    color: var(--ui-white);
}

.portalBanner.-primary > span > span,
.portalBanner.-primary .portalIcon {
    color: color-mix(in srgb, var(--ui-primary) 20%, var(--ui-white));
}

.mainPage .mainFooter {
    padding: 8px 0 12px;
    margin: 0;
    border: 0;
    background: transparent;
}

.mainPage .mainFooterInner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    width: calc(100% - 96px);
    max-width: 1780px;
    padding: 0;
}

.mainPage .mainFooterInfo,
.mainPage .mainFooterBrand {
    color: var(--neutral-500);
    font-size: 11px;
    line-height: 1.6;
}

.mainPage .mainFooterInfo p,
.mainPage .mainFooterBrand span {
    font-size: inherit;
}

.mainPage .mainFooterBrand img {
    display: none;
}

/* 로그인: D안 중앙 패널 + G안 블루. 전송 폼과 인증 스크립트는 유지한다. */
.portal-login {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--ui-search-surface);
}

.portalLoginHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 84px;
    padding: 0 48px;
    border-bottom: 1px solid var(--portal-line);
    background: var(--ui-white);
}

.portalLoginBrand img {
    width: 195px;
    height: auto;
}

.portalLoginHeader > span {
    font-size: 15px;
    color: var(--portal-muted);
}

.portalLoginMain {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    width: 100%;
    padding: 24px;
    background-image: radial-gradient(color-mix(in srgb, var(--ui-line) 30%, transparent) 1px, transparent 1px);
    background-size: 20px 20px;
}

.portalLoginIntro {
    text-align: center;
    margin-bottom: 22px;
}

.portalLoginSeal {
    display: grid;
    place-items: center;
    width: 49px;
    height: 49px;
    margin: 0 auto 15px;
    border: 1px solid var(--ui-line);
    border-radius: 14px;
    background: var(--portal-primary-soft);
    color: var(--portal-primary);
}

.portalLoginSeal .portalIcon {
    width: 31px;
    height: 31px;
}

.portalEyebrow {
    margin-bottom: 10px;
    color: var(--neutral-500);
    font-size: 10px;
    letter-spacing: 1.8px;
}

.portalLoginIntro h1 {
    font-size: 32px;
    font-weight: 500;
}

.portalLoginIntro > p:last-child {
    margin-top: 10px;
    color: var(--portal-muted);
    font-size: 15px;
}

.portalLoginCard {
    width: 100%;
    max-width: 490px;
    overflow: hidden;
    border: 1px solid var(--ui-line);
    border-radius: 11px;
    background: var(--ui-white);
    box-shadow: 0 13px 36px color-mix(in srgb, var(--ui-ink) 4%, transparent);
}

.portalLoginCardHeading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 20px 29px;
    border-bottom: 1px solid var(--portal-line);
}

.portalLoginCardHeading h2 {
    font-size: 23px;
    font-weight: 600;
}

.portalLoginCardHeading > span {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--portal-muted);
    font-size: 13px;
}

.portalLoginCardHeading .portalIcon {
    width: 16px;
    height: 16px;
}

.portalLoginCardBody {
    padding: 26px 29px;
}

.portalLoginField {
    margin-bottom: 20px;
}

.portalLoginField > label {
    display: block;
    margin-bottom: 8px;
    color: var(--portal-muted);
    font-size: 15px;
    font-weight: 600;
}

.portalLoginField input {
    display: block;
    width: 100%;
    height: 47px;
    padding: 0 16px;
    border: 1px solid var(--portal-line);
    border-radius: 5px;
    background: var(--ui-search-surface);
    color: var(--portal-ink);
    font-family: inherit;
    font-size: 16px;
}

.portalLoginField input:focus {
    outline: 0;
    border-color: color-mix(in srgb, var(--ui-primary) 55%, var(--ui-white));
    box-shadow: 0 0 0 3px var(--portal-primary-soft);
}

.portalLoginField input::placeholder {
    color: var(--neutral-500);
}

.portalPasswordControl {
    position: relative;
}

.portalPasswordControl input {
    padding-right: 50px;
}

.portalPasswordControl button {
    position: absolute;
    top: 0;
    right: 0;
    display: grid;
    place-items: center;
    width: 47px;
    height: 47px;
    border: 0;
    background: transparent;
    color: var(--neutral-500);
    padding: 0;
}

.portalPasswordControl .portalIcon {
    width: 20px;
    height: 20px;
}

.portal-login .login-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 47px;
    margin: 0;
    padding: 12px 18px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: var(--portal-primary);
    color: var(--ui-white);
    font-size: 17px;
    font-weight: 600;
}

.portal-login .login-button:hover {
    background: var(--ui-primary-dark);
}

.portal-login .login-button:disabled {
    opacity: .65;
    cursor: wait;
}

.portal-login .login-button .portalIcon {
    width: 20px;
    height: 20px;
}

.portal-login .login-alert {
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--ui-danger) 25%, var(--ui-white));
    border-radius: 5px;
    background: color-mix(in srgb, var(--ui-danger) 4%, var(--ui-white));
    color: var(--ui-danger);
    font-size: 14px;
    line-height: 1.5;
}

.portal-login .field-error {
    font-size: 14px;
    color: var(--ui-danger);
}

.portalLoginCardFooter {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 29px;
    border-top: 1px solid var(--portal-line);
    background: var(--ui-surface);
    color: var(--portal-muted);
    font-size: 13px;
    line-height: 1.7;
}

.portalLoginCardFooter .portalIcon {
    color: color-mix(in srgb, var(--ui-muted) 70%, var(--ui-white));
}

.portalLoginCaption {
    margin-top: 18px;
    color: var(--portal-muted);
    font-size: 13px;
}

.portalLoginFooter {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 48px;
    color: var(--neutral-500);
    font-size: 12px;
}

/* 높이를 숨겨 잘라내지 않고, 짧은 창에서는 여백과 장식부터 줄인다. */
@media (min-width: 1200px) and (min-height: 700px) {
    .portal-main {
        height: calc(100vh - var(--portal-reserved-height, 155px));
        height: calc(100dvh - var(--portal-reserved-height, 155px));
    }
}

@media (max-width: 1600px) {
    .portalMainTop {
        grid-template-columns: minmax(0, 1fr) 330px;
    }
    .portalHero {
        grid-template-columns: 29% minmax(0, 1fr);
    }
    .portalHeroCopy {
        padding-left: 20px;
    }
    .portalWelcomeArt {
        height: 85px;
    }
    .portalQuickGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }
    .portalLaunchpad {
        padding: 16px;
    }
    .portalQuickLink {
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
        padding: 10px 12px;
        gap: 10px;
    }
    .portalQuickCopy strong {
        font-size: 17px;
    }
}

@media (max-width: 1320px) {
    .portal-main,
    .mainPage .mainFooterInner {
        width: calc(100% - 56px);
    }
}

@media (min-width: 1200px) and (max-height: 1000px) {
    .portal-main {
        --portal-gap: 10px;
        grid-template-rows: minmax(300px, 1.6fr) minmax(174px, 1fr) auto;
        padding: 10px 0 8px;
    }
    .portalHeroCopy {
        padding-top: 16px;
        padding-bottom: 16px;
    }
    .portalHeroKicker {
        margin-bottom: 10px;
    }
    .portalHeroDescription {
        margin-top: 8px;
    }
    .portalWelcomeArt {
        width: 110px;
        height: 60px;
        margin-top: 8px;
    }
    .portalAlarmPanel {
        padding: 12px 16px;
    }
    .portalAlarmPanel .portalPanelHeading {
        margin-bottom: 6px;
    }
    .portalPanelHeading h2 {
        font-size: 20px;
    }
    .portalQuickLink {
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
        padding: 8px 10px;
        gap: 8px;
    }
    .portalQuickCopy strong {
        font-size: 16px;
        line-height: 1.3;
    }
    .portalQuickIcon {
        width: 36px;
        height: 36px;
    }
    .portalQuickIcon .portalIcon {
        width: 30px;
        height: 30px;
    }
    .portalNoticeList li {
        min-height: 0;
        padding: 2px 0;
        line-height: 1.3;
    }
    .portalInformationGrid .portalCard {
        padding: 10px 16px;
    }
    .portalAlarmControls {
        padding-bottom: 6px;
    }
    .portalAlarmList > li {
        padding: 2px 0;
    }
    .portalAlarmCategory {
        line-height: 1.4;
        margin-bottom: 1px;
    }
    .portalAlarmDescription {
        font-size: 14px;
        line-height: 1.35;
    }
    .portalProgressDonut {
        width: 104px;
        height: 104px;
    }
    .portalProgressList > div {
        margin-bottom: 10px;
    }
    .portalProgressList dt {
        margin-bottom: 5px;
        line-height: 1.3;
    }
    .portalBanner {
        min-height: 58px;
        padding: 8px 14px;
    }
    .portalBanner strong {
        font-size: 16px;
        margin-bottom: 4px;
    }
    .portalBanner .portalIcon {
        width: 34px;
        height: 34px;
    }
    .portalBanner .portalBannerArrow {
        width: 21px;
        height: 21px;
    }
    .mainPage .mainFooter {
        padding: 4px 0 0;
    }
}

@media (min-width: 1200px) and (max-height: 800px) {
    .portalWelcomeArt {
        display: none;
    }
}

@media (max-height: 850px) and (min-width: 701px) {
    .portalLoginHeader {
        min-height: 74px;
    }
    .portalLoginMain {
        padding: 18px 24px;
    }
    .portalLoginIntro {
        position: relative;
        padding-left: 66px;
        margin-bottom: 18px;
        text-align: left;
    }
    .portalLoginSeal {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        margin: 0;
    }
    .portalEyebrow {
        margin-bottom: 6px;
    }
    .portalLoginCardHeading {
        padding-top: 16px;
        padding-bottom: 16px;
    }
    .portalLoginCardBody {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .portalLoginField {
        margin-bottom: 16px;
    }
    .portalLoginCardFooter {
        padding-top: 14px;
        padding-bottom: 14px;
    }
    .portalLoginCaption {
        margin-top: 14px;
    }
}

/* 관리자 최소 너비 1200px: 1199px 너비 분기 보관
@media (max-width: 1199px) {
    .mainPage .topItemWrap {
        position: static;
        flex-wrap: wrap;
        margin-left: auto;
    }
    .mainPage .headerBottom {
        height: auto;
        flex-wrap: wrap;
        padding: 0 0 10px;
    }
    .mainPage .menuSet {
        position: static;
        padding-top: 8px;
    }
    .portal-main {
        grid-template-rows: auto;
    }
    .portalHero {
        min-height: 350px;
    }
    .portalMainTop {
        grid-template-columns: minmax(0, 1fr) 310px;
    }
    .portalBannerGrid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
*/

/* 관리자 최소 너비 1200px: 900px 너비 분기 보관
@media (max-width: 900px) {
    .mainPage .topMenuWrap {
        flex-wrap: wrap;
        gap: 16px;
    }
    .portalMainTop,
    .portalInformationGrid {
        grid-template-columns: 1fr;
    }
    .portalAlarmList > li {
        min-height: 55px;
    }
    .portalHero {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .portalHeroCopy {
        padding: 24px;
    }
    .portalWelcomeArt {
        display: none;
    }
    .portalQuickLink {
        min-height: 90px;
    }
    .portalBannerGrid {
        grid-template-columns: 1fr;
    }
    .mainPage .mainFooterInner {
        flex-wrap: wrap;
    }
}
*/

/* 관리자 최소 너비 1200px: 760px 너비 분기 보관
@media (max-width: 760px) {
    .portal-main,
    .mainPage .mainFooterInner {
        width: calc(100% - 32px);
    }
    .portalNoticeFilters {
        position: static;
        align-self: flex-start;
        margin-bottom: 12px;
    }
    .portalProgressBody {
        flex-wrap: wrap;
    }
    .portalQuickGrid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-rows: auto;
    }
    .portalQuickIcon {
        width: 56px;
        height: 60px;
    }
}
*/

/* 관리자 최소 너비 1200px: 700px 너비 분기 보관
@media (max-width: 700px) {
    .portalLoginHeader {
        min-height: 72px;
        padding: 0 20px;
    }
    .portalLoginHeader > span,
    .portalEyebrow,
    .portalLoginSeal,
    .portalLoginCaption,
    .portalLoginFooter > span:last-child {
        display: none;
    }
    .portalLoginMain {
        padding: 20px;
    }
    .portalLoginIntro h1 {
        font-size: 25px;
    }
    .portalLoginIntro > p:last-child {
        font-size: 14px;
    }
    .portalLoginCardHeading,
    .portalLoginCardBody,
    .portalLoginCardFooter {
        padding-left: 22px;
        padding-right: 22px;
    }
    .portalLoginFooter {
        justify-content: center;
        padding: 12px 20px;
        font-size: 11px;
    }
}
*/

@media (prefers-reduced-motion: reduce) {
    .portalQuickLink {
        transition: none;
    }
}