@charset "UTF-8";

/* Shared site chrome only. Page content must stay in each page's module CSS. */
.portal-header,
.diablo-header,
.portal-footer,
.portal-header *,
.diablo-header *,
.portal-footer * {
    box-sizing: border-box;
}

.portal-header a,
.diablo-header a {
    color: inherit;
    text-decoration: none;
}

.portal-shell,
.diablo-shell {
    width: min(calc(100% - 48px), 1220px);
    margin-inline: auto;
}

/* Portal header */
.portal-header {
    color: #191c21;
    background: #fffdfa;
    font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", Arial, sans-serif;
}

.portal-status-bar {
    color: #b9bcc2;
    background: #181a1f;
    border-bottom: 1px solid #303238;
}

.portal-status-inner {
    display: flex;
    min-height: 32px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    font: 9px/1.2 Arial, sans-serif;
    letter-spacing: .05em;
}

.portal-status-inner p { margin: 0; }
.portal-status-inner strong { color: #fff; letter-spacing: .12em; }
.portal-status-inner > div { display: flex; align-items: center; gap: 10px; }
.portal-status-separator { width: 1px; height: 10px; background: #4a4d53; }

.portal-brand-bar { border-bottom: 1px solid #d9d5cd; }
.portal-brand-inner { display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 24px; }
.portal-brand { display: inline-flex; align-items: center; gap: 11px; }
.portal-brand-symbol { display: grid; width: 36px; height: 36px; place-items: center; color: #fff; background: #1765c5; font: 800 22px/1 Georgia, serif; }
.portal-brand-copy { display: grid; gap: 1px; }
.portal-brand-copy strong { font-size: 18px; letter-spacing: -.04em; white-space: nowrap; }
.portal-brand-copy small { color: #85878b; font: 700 8px/1 Arial, sans-serif; letter-spacing: .15em; }
.portal-header-tools { display: flex; align-items: center; gap: 20px; color: #55585d; font-size: 11px; font-weight: 700; }
.portal-header-tools > span { display: inline-flex; align-items: center; gap: 7px; }
.portal-header-tools small,
.portal-nav small { padding: 2px 5px; color: #888b90; border: 1px solid #d4d0c8; font-size: 8px; }
.portal-search-preview { min-width: 168px; padding: 9px 11px; justify-content: space-between; background: #f7f5f1; border: 1px solid #d9d5cd; }

.portal-nav { color: #d8dbe0; background: #202329; border-bottom: 1px solid #30343a; }
.portal-nav-inner { display: flex; min-height: 48px; align-items: stretch; overflow-x: auto; scrollbar-width: none; }
.portal-nav-inner::-webkit-scrollbar { display: none; }
.portal-nav a,
.portal-nav span { position: relative; display: flex; flex: 0 0 auto; align-items: center; gap: 7px; padding-inline: 22px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.portal-nav a:first-child { padding-left: 0; padding-right: 25px; }
.portal-nav a[aria-current="page"] { color: #fff; }
.portal-nav a[aria-current="page"]::after { position: absolute; right: 22px; bottom: 0; left: 22px; height: 3px; background: #4b8ee6; content: ""; }
.portal-nav a:first-child[aria-current="page"]::after { right: 25px; left: 0; }
.portal-nav span { color: #9c9fa5; }
.portal-nav small { color: #858990; border-color: #4a4e55; }

/* Diablo header */
.diablo-header {
    color: #202226;
    background: #fff;
    font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", Arial, sans-serif;
}

.diablo-utility { color: #b9bcc1; background: #17191d; border-bottom: 1px solid #303238; }
.diablo-utility-inner { display: flex; min-height: 32px; align-items: center; justify-content: space-between; gap: 24px; font: 9px/1.2 Arial, sans-serif; letter-spacing: .04em; }
.diablo-switcher,
.diablo-server-state { display: flex; align-items: center; gap: 10px; }
.diablo-switcher strong { color: #fff; letter-spacing: .12em; }
.diablo-server-state span { display: inline-flex; align-items: center; gap: 6px; }
.diablo-server-state i { width: 6px; height: 6px; background: #55a76a; }
.diablo-server-state time { padding-left: 10px; border-left: 1px solid #44474d; }

.diablo-brandbar { background: #fff; border-bottom: 1px solid #d8d3ca; }
.diablo-brandbar-inner { display: flex; min-height: 66px; align-items: center; justify-content: space-between; gap: 24px; }
.diablo-brand { display: inline-flex; align-items: center; gap: 11px; }
.diablo-brand-mark { display: grid; width: 36px; height: 36px; place-items: center; color: #fff; background: #b74d36; font: 800 22px/1 Georgia, serif; }
.diablo-brand > span:last-child { display: grid; gap: 2px; }
.diablo-brand strong { font-size: 17px; letter-spacing: -.04em; }
.diablo-brand small { color: #b74d36; font: 800 8px/1 Arial, sans-serif; letter-spacing: .13em; }
.diablo-account { display: flex; gap: 20px; color: #666970; font-size: 11px; font-weight: 700; }
.diablo-account small,
.diablo-nav small { padding: 2px 5px; color: #85878b; border: 1px solid #d2cec6; font-size: 8px; }

.diablo-nav { color: #dadddf; background: #22252a; border-bottom: 1px solid #33363c; }
.diablo-nav-inner { display: flex; min-height: 48px; align-items: stretch; overflow-x: auto; scrollbar-width: none; }
.diablo-nav-inner::-webkit-scrollbar { display: none; }
.diablo-nav a,
.diablo-nav span { position: relative; display: flex; flex: 0 0 auto; align-items: center; gap: 7px; padding-inline: 23px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.diablo-nav a:first-child { padding-left: 0; }
.diablo-nav a.is-current { color: #fff; }
.diablo-nav a.is-current::after { position: absolute; right: 23px; bottom: 0; left: 23px; height: 3px; background: #b74d36; content: ""; }
.diablo-nav a:first-child.is-current::after { left: 0; }
.diablo-nav span { color: #9b9ea4; }
.diablo-nav small { border-color: #4c5057; }

/* Shared footer */
.portal-footer {
    padding-block: 40px;
    color: #b9bcc1;
    background: #17191d;
    border-top: 1px solid #303238;
    font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", Arial, sans-serif;
}

.portal-footer-inner { display: flex; align-items: end; justify-content: space-between; gap: 40px; }
.portal-footer-brand strong { color: #fff; font-size: 17px; }
.portal-footer-brand strong span { margin-left: 7px; color: #74777d; font: 9px/1 Arial, sans-serif; letter-spacing: .12em; }
.portal-footer p { margin: 8px 0 0; font-size: 10px; }
.portal-footer-meta { text-align: right; }
.portal-footer-meta nav { display: flex; justify-content: flex-end; gap: 18px; color: #d7d8db; font-size: 10px; }

@media (max-width: 720px) {
    .portal-shell,
    .diablo-shell { width: min(calc(100% - 28px), 1220px); }
    .portal-status-inner > div,
    .portal-header-tools > .portal-search-preview,
    .diablo-server-state,
    .diablo-account > span:first-child { display: none; }
    .portal-brand-inner,
    .diablo-brandbar-inner { min-height: 64px; }
    .portal-nav-inner,
    .diablo-nav-inner { width: 100%; padding-inline: 14px; }
    .portal-nav a,
    .portal-nav span,
    .diablo-nav a,
    .diablo-nav span { padding-inline: 15px; font-size: 11px; }
    .portal-nav a:first-child,
    .diablo-nav a:first-child { padding-left: 0; }
    .portal-footer-inner { display: block; }
    .portal-footer-meta { margin-top: 24px; text-align: left; }
    .portal-footer-meta nav { justify-content: flex-start; flex-wrap: wrap; }
}

@media (max-width: 430px) {
    .portal-header-tools,
    .diablo-account { gap: 10px; font-size: 10px; }
    .portal-brand-copy strong,
    .diablo-brand strong { font-size: 16px; }
}