/* 이유: 모든 Portal 화면에서 세션 만료 안내의 가독성과 키보드 접근성을 동일하게 유지한다. */
.portal-session-dialog { box-sizing: border-box; width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; border: 0; border-radius: 20px; padding: 32px; color: #172b4d; background: #fff; box-shadow: 0 24px 80px #10243e33; font-family: inherit; }
.portal-session-dialog::backdrop { background: rgba(15, 23, 42, .5); }
.portal-session-dialog h2 { margin: 0 0 16px; font-size: 23px; line-height: 1.4; }
.portal-session-dialog p { margin: 0 0 22px; font-size: 15px; line-height: 1.8; word-break: keep-all; }
.portal-session-dialog .portal-session-dialog__remaining { padding: 12px 16px; border-radius: 10px; background: #eef7f6; color: #245e58; }
.portal-session-dialog__remaining strong { white-space: nowrap; }
.portal-session-dialog__actions { display: flex; gap: 12px; }
.portal-session-dialog__actions button { flex: 1; min-height: 46px; padding: 10px 12px; border: 1px solid #d6dde5; border-radius: 10px; background: #fff; color: #334155; font: inherit; font-weight: 700; cursor: pointer; }
.portal-session-dialog__actions [data-session-extend],
/* 이유: 동시 접속 안내의 확인 버튼도 동일한 주 동작 스타일을 사용한다. */
.portal-session-dialog__actions [data-session-confirm] { background: #147d73; border-color: #147d73; color: #fff; }
.portal-session-dialog button:focus-visible { outline: 3px solid #70c9bf; outline-offset: 3px; }
.portal-session-dialog button:disabled { opacity: .65; cursor: wait; }
@media (max-width: 480px) { .portal-session-dialog { padding: 24px; } }

/* 이유: 상단 로그인 남은 시간을 고정 폭 숫자로 표시해 초 단위 갱신 때 메뉴가 흔들리지 않게 한다. */
.portal-session-timer { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid #d6dde5; border-radius: 10px; color: #245e58; font-size: 13px; white-space: nowrap; }
.portal-session-timer time { min-width: 5ch; font-variant-numeric: tabular-nums; font-weight: 700; }
.portal-session-timer button { border: 0; border-radius: 6px; padding: 5px 8px; background: #147d73; color: #fff; font: inherit; cursor: pointer; }
.portal-session-timer button:disabled { opacity: .65; cursor: wait; }
.portal-session-timer button:focus-visible { outline: 3px solid #70c9bf; outline-offset: 2px; }

/* 이유: 로그인 시 타이머를 우측 계정 버튼 옆에 두고 모바일에서도 메뉴를 열지 않고 볼 수 있게 한다. */
.portal-session-header { grid-template-columns: auto 1fr auto auto; gap: 16px; }
.portal-session-header > .portal-landing__brand { grid-column: 1; grid-row: 1; }
.portal-session-header .portal-landing__nav { grid-column: 2; grid-row: 1; justify-content: center; gap: 18px; }
.portal-session-header > .portal-session-timer { grid-column: 3; grid-row: 1; }
.portal-session-header .portal-landing__account { grid-column: 4; grid-row: 1; gap: 8px; }
@media (max-width: 1080px) {
    .portal-session-header { grid-template-columns: 1fr auto auto; gap: 8px; }
    .portal-session-header > .portal-session-timer { grid-column: 2; }
    .portal-session-header > .portal-landing__menu-toggle { grid-column: 3; grid-row: 1; }
    .portal-session-header .portal-landing__nav, .portal-session-header .portal-landing__account { grid-column: auto; grid-row: auto; }
    .portal-session-header .portal-landing__account { flex-wrap: wrap; }
    .portal-session-timer > span { display: none; }
}
@media (max-width: 480px) {
    .portal-session-header > .portal-landing__brand > span:last-child { max-width: 110px; white-space: normal; }
    .portal-session-timer { gap: 4px; padding: 4px 6px; }
}