@charset "UTF-8";

/* Shared site chrome only. Page content must stay in each page's module CSS. */
body[class^="page-diablo"],
body[class*=" page-diablo"] {
    margin: 0;
}

.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;
}

/* Keep centered site chrome fixed when a short page has no vertical scrollbar. */
@media (min-width: 721px) {
    html { scrollbar-gutter: stable; }
}

.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 { height: 33px; min-height: 33px; color: #b9bcc1; background: #17191d; border-bottom: 1px solid #303238; }
.diablo-utility-inner { display: flex; height: 32px; 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; }
}



/* 2026-08-26 cool palette refresh: shared chrome */
.portal-header {
    color: #202633;
    background: #f8fafc;
}
.portal-status-bar,
.diablo-utility,
.portal-footer {
    background: #2f3645;
    border-color: #414a5e;
}
.portal-status-inner,
.diablo-utility-inner,
.portal-footer {
    color: #c8d0dd;
}
.portal-status-separator,
.diablo-server-state time {
    border-color: #586176;
    background: #586176;
}
.portal-brand-bar,
.diablo-brandbar {
    background: #fbfcfe;
    border-bottom-color: #d8dfe8;
}
.portal-brand-symbol {
    background: #5c71a5;
}
.diablo-brand-mark {
    background: #eb6f70;
}
.portal-brand-copy small,
.diablo-brand small {
    color: #5c71a5;
}
.diablo-brand small {
    color: #eb6f70;
}
.portal-header-tools,
.diablo-account {
    color: #606978;
}
.portal-search-preview {
    background: #f2f5f9;
    border-color: #d8dfe8;
}
.portal-nav,
.diablo-nav {
    color: #d9e0ea;
    background: #343c4d;
    border-bottom-color: #465066;
}
.portal-nav span,
.diablo-nav span {
    color: #aeb7c6;
}
.portal-nav a[aria-current="page"]::after {
    background: #5b71a8;
}
.diablo-nav a.is-current::after {
    background: #eb6f70;
}
.portal-nav small,
.diablo-nav small,
.portal-header-tools small,
.diablo-account small {
    color: #8d97a8;
    border-color: #cfd7e2;
}
.portal-footer-brand strong span {
    color: #98a3b5;
}
.portal-footer-meta nav {
    color: #e2e7ef;
}

/* Account authentication links */
.site-account-links {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    white-space: nowrap;
}
.site-account-links a {
    color: inherit;
    text-decoration: none;
}
.site-account-links a:hover,
.site-account-name { color: #c8cbd1; }
.site-logout-form { display: inline; margin: 0; }
.site-logout-button {
    appearance: none;
    padding: 0;
    border: 0;
    background: transparent;
    color: #777b83;
    cursor: pointer;
    font: inherit;
}
.site-logout-button:hover { color: #b9bcc2; }
.site-mypage-link {
    color: #aeb3bc !important;
    font-weight: 500;
}
.site-mypage-link:hover { color: #e0e3e8 !important; }

/* 2026-08-27 unified D4GG image logo */
.site-brand-logo {
    display: block;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    object-fit: contain;
}
.portal-brand-symbol,
.diablo-brand-mark { display: none !important; }
.portal-footer-brandline {
    display: flex;
    align-items: center;
    gap: 10px;
}
.site-footer-logo {
    display: block;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    object-fit: contain;
}
@media (max-width: 430px) {
    .site-brand-logo { width: 38px; height: 38px; flex-basis: 38px; }
    .site-footer-logo { width: 30px; height: 30px; flex-basis: 30px; }
}

/* Global Kakao customer-support wing */
.site-kakao-support,
.site-kakao-support * { box-sizing: border-box; }
.site-kakao-support {
    position: fixed;
    right: max(18px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 1100;
    min-width: 166px;
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 13px 8px 9px;
    color: #191919;
    border: 1px solid rgba(25, 25, 25, .16);
    border-radius: 15px;
    background: #fee500;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .32), 0 2px 6px rgba(0, 0, 0, .2);
    font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", Arial, sans-serif;
    text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.site-kakao-support:hover {
    color: #191919;
    background: #ffea23;
    box-shadow: 0 13px 32px rgba(0, 0, 0, .38), 0 3px 8px rgba(0, 0, 0, .22);
    transform: translateY(-2px);
}
.site-kakao-support:active { transform: translateY(0); }
.site-kakao-support:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.site-kakao-support-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    color: #191919;
    border-radius: 12px;
    background: rgba(255, 255, 255, .28);
}
.site-kakao-support-icon svg { width: 34px; height: 34px; display: block; }
.site-kakao-support-copy { display: grid; gap: 3px; line-height: 1; white-space: nowrap; }
.site-kakao-support-copy strong { font-size: 12px; font-weight: 800; letter-spacing: -.02em; }
.site-kakao-support-copy small { color: rgba(25, 25, 25, .68); font-size: 9px; font-weight: 650; }

@media (max-width: 720px) {
    .site-kakao-support {
        right: max(12px, env(safe-area-inset-right));
        bottom: max(12px, env(safe-area-inset-bottom));
        min-width: 54px;
        min-height: 54px;
        width: 54px;
        height: 54px;
        justify-content: center;
        padding: 0;
        border-radius: 50%;
    }
    .site-kakao-support-icon { width: 42px; height: 42px; flex-basis: 42px; border-radius: 50%; }
    .site-kakao-support-copy { display: none; }
}