/* NETCITY Mobile white clarity refresh, 2026-06-07. */
:root {
    --nc-bg: #ffffff;
    --nc-ink: #0f172a;
    --nc-text: #334155;
    --nc-muted: #64748b;
    --nc-line: #dbe4ef;
    --nc-line-strong: #b6c6d8;
    --nc-soft: #f8fafc;
    --nc-soft-cyan: #ecfeff;
    --nc-soft-green: #f0fdf4;
    --nc-blue: #0f5fd7;
    --nc-cyan: #0891b2;
    --nc-green: #15803d;
    --nc-red: #dc2626;
    --nc-amber: #b45309;
    --nc-shadow: 0 14px 34px rgba(15, 23, 42, .09);
    --nc-shadow-soft: 0 8px 22px rgba(15, 23, 42, .06);
    --nc-radius: 8px;
    --nc-font: "SUIT Variable", "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
    --nc-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", "Noto Sans Mono CJK KR", monospace;
}

html {
    max-width: 100%;
    overflow-x: hidden;
    background: var(--nc-bg) !important;
}

body {
    max-width: 100%;
    min-height: 100vh;
    overflow-x: hidden !important;
    background:
        linear-gradient(180deg, #ffffff 0%, #f8fafc 50%, #ffffff 100%) !important;
    color: var(--nc-text) !important;
    font-family: var(--nc-font) !important;
    text-shadow: none !important;
}

body::before,
body::after {
    content: none !important;
    display: none !important;
}

* {
    letter-spacing: 0 !important;
    text-shadow: none !important;
}

a {
    color: #075985 !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover,
a:focus-visible {
    color: #0f5fd7 !important;
}

img,
video,
iframe {
    max-width: 100%;
    border: 0 !important;
    filter: none !important;
}

code,
pre,
kbd,
.hash-value,
.phone-network-notice__route code,
.hero-node-card code {
    color: #155e75 !important;
    font-family: var(--nc-mono) !important;
    background: #ecfeff !important;
    border: 1px solid #a5f3fc !important;
    border-radius: 6px !important;
}

.top-category-bar {
    border-bottom: 1px solid rgba(219, 228, 239, .96) !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .08) !important;
    backdrop-filter: blur(14px) !important;
}

.top-category-bar__inner,
.shell,
.dashboard-shell {
    width: min(1120px, calc(100% - 32px)) !important;
}

.top-category-bar__home,
.top-category-bar__link,
.floating-tools__button,
.main-home-button,
.phone-portal__button,
.board-button,
.speed__button,
.actions a,
.card__link,
.pc-env-button,
.capture-actions .board-button,
.messenger-login__button,
.messenger-login__link,
.device-card__link,
.hero-camera-card__action,
.main-renewal__links a {
    border-radius: var(--nc-radius) !important;
    font-family: var(--nc-font) !important;
    font-weight: 900 !important;
    text-transform: none !important;
}

.top-category-bar__home,
.floating-tools__button,
.main-home-button,
.messenger-login__button,
.board-button:not(.secondary),
.speed__button,
.pc-env-button {
    border-color: var(--nc-ink) !important;
    background: var(--nc-ink) !important;
    color: #ffffff !important;
}

.top-category-bar__link,
.phone-portal__button,
.actions a,
.card__link,
.device-card__link,
.messenger-login__link,
.main-renewal__links a {
    border: 1px solid var(--nc-line) !important;
    background: #ffffff !important;
    color: var(--nc-ink) !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .05) !important;
}

.top-category-bar__link--wide3-restored {
    border-color: var(--nc-red) !important;
    background: var(--nc-red) !important;
    color: #ffffff !important;
}

.top-category-bar__link--usb-lan-webcam {
    border-color: var(--nc-cyan) !important;
    background: var(--nc-cyan) !important;
    color: #ffffff !important;
}

.top-category-bar__link--webzine-duty,
.phone-portal__button.secondary,
.board-button.secondary {
    border-color: var(--nc-green) !important;
    background: var(--nc-green) !important;
    color: #ffffff !important;
}

.top-category-bar__home:hover,
.top-category-bar__link:hover,
.floating-tools__button:hover,
.main-home-button:hover,
.phone-portal__button:hover,
.board-button:hover,
.speed__button:hover,
.actions a:hover,
.card__link:hover,
.device-card__link:hover,
.pc-env-button:hover,
.main-renewal__links a:hover,
.messenger-login__button:hover,
.messenger-login__link:hover {
    border-color: #7dd3fc !important;
    outline: 2px solid #bae6fd !important;
    outline-offset: 2px !important;
    box-shadow: 0 12px 28px rgba(14, 116, 144, .14) !important;
    transform: none !important;
}

.floating-tools {
    border: 1px solid var(--nc-line) !important;
    border-radius: var(--nc-radius) !important;
    background: rgba(255, 255, 255, .95) !important;
    box-shadow: 0 16px 38px rgba(15, 23, 42, .14) !important;
}

.shell,
.dashboard-workspace,
main {
    color: var(--nc-text) !important;
}

.main-renewal,
.phone-network-notice,
.pmos-webserver,
.pmos-webserver__os-panel,
.pmos-card,
.pmos-check,
.legacy-monochrome,
.pc-spec,
.device-card,
.quick-status .card,
.card,
.page-card,
.page-tile,
.server-link-panel,
.server-link-card,
.phone-portal,
.phone-portal__card,
.wide3-webcam-card,
.youtube-live-hero,
.youtube-live-tile,
.youtube-live-manual,
.technical-engine,
.journal-engine,
.capture-feature,
.messenger-login,
.reverse,
.speed,
.counter,
.overall-counter,
.board-panel,
.board-post,
.board-detail,
.board-filebox,
.board-attachment-preview,
.board-empty,
.module-item,
.pc-env-modal,
.pc-spec__item,
.main-renewal__boot-status {
    border: 1px solid var(--nc-line) !important;
    border-radius: var(--nc-radius) !important;
    background: #ffffff !important;
    color: var(--nc-text) !important;
    box-shadow: var(--nc-shadow-soft) !important;
}

.main-renewal {
    position: relative;
    overflow: hidden;
    display: grid !important;
    grid-template-columns: minmax(260px, .88fr) minmax(0, 1.12fr) !important;
    gap: 26px !important;
    align-items: stretch !important;
    padding: clamp(18px, 4vw, 34px) !important;
    background:
        linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #ecfeff 100%) !important;
    box-shadow: 0 20px 46px rgba(15, 23, 42, .10) !important;
}

.main-renewal::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, #0f5fd7, #0891b2, #15803d, #b45309);
    pointer-events: none;
}

.main-renewal::after {
    content: none !important;
    display: none !important;
}

.main-renewal__media {
    position: relative !important;
    inset: auto !important;
    z-index: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 320px;
    overflow: hidden;
    border: 1px solid var(--nc-line) !important;
    border-radius: var(--nc-radius) !important;
    background: #009900 !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .14) !important;
}

.main-renewal__media img {
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: contain !important;
    object-position: center !important;
    padding: clamp(12px, 2vw, 24px);
    background: #009900 !important;
    opacity: .94 !important;
    filter: contrast(1.02) saturate(1.02) !important;
    display: block;
}

.main-renewal__content {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    padding: 4px 0 !important;
}

.main-renewal__title {
    font-size: clamp(34px, 5vw, 58px) !important;
}

.main-renewal__content,
.pmos-webserver__copy,
.phone-network-notice__body,
.hero-copy,
.messenger-login__copy,
.card__body,
.device-card__head,
.device-card__role,
.server-link-card,
.phone-portal__card {
    color: var(--nc-text) !important;
}

.main-renewal__eyebrow,
.eyebrow,
.phone-network-notice__label,
.pmos-webserver__label,
.card__type,
.card__status,
.device-card__type,
.hero-camera-card__label,
.server-link-card__label,
.phone-portal__label,
.module-state,
.main-renewal__flow span,
.pmos-card__label,
.pmos-check__status,
.pc-spec__label,
.pc-env-modal__label {
    color: #075985 !important;
    font-weight: 1000 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.main-renewal__title,
.pmos-webserver__title,
.phone-network-notice__title,
.hero h1,
.server-subtitle,
.messenger-login__title,
.pc-spec__title,
.device-card__name,
.card h2,
.card h3,
.page-card h2,
.page-tile h3,
.server-link-card__title,
.phone-portal__title,
.youtube-live-hero h2,
.technical-engine h2,
.journal-engine h2,
.capture-feature h2,
.reverse h2,
.speed h2,
.counter h2,
.overall-counter h2,
.board-panel h2,
.module-item h3,
.pc-env-modal__title {
    color: var(--nc-ink) !important;
    font-weight: 1000 !important;
    letter-spacing: 0 !important;
}

.main-renewal__lead,
.pmos-webserver__lead,
.phone-network-notice__copy,
.lead,
.server-tag,
.messenger-login__text,
.pc-spec__mission,
.pc-spec__settlement,
.pc-spec__audience,
.device-card__role,
.card p,
.page-card p,
.page-tile p,
.server-link-card__copy,
.phone-portal__copy,
.youtube-live-hero p,
.technical-engine p,
.journal-engine p,
.capture-feature p,
.reverse p,
.speed p,
.counter p,
.overall-counter p,
.board-panel p,
.module-item p,
.pc-env-modal__summary {
    color: var(--nc-text) !important;
    font-weight: 650 !important;
    line-height: 1.72 !important;
    word-break: keep-all;
}

.main-renewal__boot-status,
.pmos-webserver__os-panel,
.phone-network-notice {
    background:
        linear-gradient(135deg, #f8fafc 0%, #ffffff 58%, #ecfeff 100%) !important;
    border-color: #bae6fd !important;
}

.main-renewal__boot-status span,
.main-renewal__boot-status strong,
.main-renewal__boot-status p {
    color: var(--nc-ink) !important;
}

.main-renewal__boot-status p {
    color: var(--nc-text) !important;
}

.main-renewal__flow {
    gap: 10px !important;
}

.main-renewal__flow > div,
.phone-network-notice__route,
.pmos-flow__step,
.pmos-card,
.pmos-check,
.pc-spec__item,
.device-card__spec,
.hero-node-card,
.quick-status .card,
.module-item {
    border: 1px solid var(--nc-line) !important;
    border-radius: var(--nc-radius) !important;
    background: #ffffff !important;
    color: var(--nc-ink) !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .05) !important;
}

.main-renewal__flow strong,
.phone-network-notice__route strong,
.pmos-card strong,
.pmos-check strong,
.pc-spec__value,
.device-card__spec strong,
.hero-node-card strong,
.module-item strong {
    color: var(--nc-ink) !important;
}

.pmos-webserver {
    background:
        linear-gradient(135deg, #ffffff 0%, #f8fafc 45%, #f0fdf4 100%) !important;
    border-color: #bbf7d0 !important;
    box-shadow: var(--nc-shadow) !important;
}

.pmos-webserver__intro {
    gap: 22px !important;
}

.pmos-webserver__os-panel {
    border-color: #a7f3d0 !important;
    box-shadow: 0 14px 32px rgba(21, 128, 61, .10) !important;
}

.pmos-webserver__telemetry,
.pmos-card-grid,
.pmos-check-grid {
    gap: 12px !important;
}

.pmos-card {
    border-color: #bfdbfe !important;
}

.pmos-card__label {
    color: var(--nc-blue) !important;
}

.pmos-check {
    border-color: #bbf7d0 !important;
}

.pmos-check__status {
    color: var(--nc-green) !important;
}

.pmos-flow__step {
    border-color: #c4b5fd !important;
    color: var(--nc-ink) !important;
}

.hero,
.hero-camera-card,
.hero-video,
.hero-device-photo,
.hero-device-photo figcaption,
.hero-camera-card__visual {
    border-radius: var(--nc-radius) !important;
}

.hero {
    background: #ffffff !important;
    border-color: var(--nc-line) !important;
    box-shadow: var(--nc-shadow) !important;
}

.hero-video,
.hero-device-photo {
    border-color: var(--nc-line) !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .12) !important;
}

.hero-device-photo figcaption {
    background: rgba(15, 23, 42, .90) !important;
    color: #ffffff !important;
}

.hero-camera-card {
    background: #f0fdfa !important;
    border-color: #7dd3fc !important;
    color: #083344 !important;
}

.hero-camera-card__title,
.hero-camera-card__copy {
    color: #083344 !important;
}

.messenger-login,
.messenger-login__panel,
.messenger-login__field,
.messenger-login__flash,
.messenger-login__identity,
.pc-env-modal__inner {
    border-radius: var(--nc-radius) !important;
}

.messenger-login__panel {
    border: 1px solid #bfdbfe !important;
    background: #ffffff !important;
}

.messenger-login__field,
input,
textarea,
select {
    border: 1px solid #cbd5e1 !important;
    border-radius: var(--nc-radius) !important;
    background: #ffffff !important;
    color: var(--nc-ink) !important;
}

.messenger-login__field::placeholder,
input::placeholder,
textarea::placeholder {
    color: #64748b !important;
}

.section-divider {
    border-color: var(--nc-line) !important;
}

.server-ip,
.hash-value,
.pc-spec__value,
.phone-network-notice__route code {
    overflow-wrap: anywhere;
}

table {
    border-collapse: collapse;
    background: #ffffff !important;
    color: var(--nc-text) !important;
}

th {
    background: #f1f5f9 !important;
    color: var(--nc-ink) !important;
}

td,
th {
    border-color: var(--nc-line) !important;
}

::selection {
    background: #bae6fd;
    color: #082f49;
}

@media (max-width: 900px) {
    .main-renewal {
        grid-template-columns: 1fr !important;
    }

    .main-renewal__media,
    .main-renewal__media img {
        min-height: 240px;
    }
}

@media (max-width: 720px) {
    .top-category-bar__inner,
    .shell,
    .dashboard-shell {
        width: min(100% - 20px, 1120px) !important;
    }

    .shell {
        padding-top: 18px !important;
    }

    .main-renewal,
    .phone-network-notice,
    .pmos-webserver,
    .hero,
    .messenger-login,
    .pc-spec,
    .device-card,
    .card,
    .page-card,
    .page-tile,
    .server-link-panel,
    .phone-portal {
        padding: 14px !important;
    }

    .phone-network-notice,
    .hero-top,
    .hero-camera-card,
    .messenger-login {
        grid-template-columns: 1fr !important;
    }

    .phone-network-notice__route {
        grid-template-columns: 1fr !important;
        align-items: start !important;
    }

    .floating-tools {
        right: 10px !important;
        bottom: 10px !important;
    }
}

/* NETCITY contrast pass: make light text readable on white surfaces. */
.pmos-flow__step {
    border-color: #b9d8ff !important;
    background: #ffffff !important;
    color: #1f2937 !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .05) !important;
}

.pmos-flow__step span,
.technical-engine__step,
.mobility-engine__step,
.capture-feature__stat span,
.journal-engine__stat span,
.card__build span,
.device-card__spec dt,
.pc-spec__label,
.phone-network-notice__route span,
.hero-node-card span,
.module-state,
.card__meta {
    color: #075985 !important;
    opacity: 1 !important;
}

.pmos-flow__step strong,
.technical-engine__step strong,
.mobility-engine__step strong,
.capture-feature__stat strong,
.journal-engine__stat strong,
.card__build strong,
.device-card__spec dd,
.pc-spec__value,
.hero-node-card strong,
.server-link-card__title,
.module-item strong {
    color: #0f172a !important;
    opacity: 1 !important;
}

.pmos-flow__step p,
.technical-engine__copy,
.mobility-engine__copy,
.capture-feature__copy,
.journal-engine__current,
.card__description,
.device-card__role,
.server-link-card__copy,
.module-item p {
    color: #334155 !important;
    opacity: 1 !important;
}

.pmos-flow__step code,
.card__build code,
.device-card__spec code,
.pc-spec__value code,
.hero-node-card code {
    border-color: #93c5fd !important;
    background: #eff6ff !important;
    color: #0f172a !important;
    opacity: 1 !important;
}

.technical-engine__step,
.mobility-engine__step,
.card__build span {
    border-color: #dbe4ef !important;
    background: #ffffff !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .04) !important;
}

.server-link-card,
.module-item,
.page-tile,
.card,
.device-card,
.pc-spec__item {
    color: #334155 !important;
}

/* NETCITY top menu: left-aligned text links only. */
.top-category-bar {
    border-bottom: 1px solid #e2e8f0 !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: none !important;
}

.top-category-bar__inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    gap: 18px !important;
}

.top-category-bar__home svg {
    display: none !important;
}

.top-category-bar__links {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    flex: 0 1 auto !important;
    width: auto !important;
    gap: 18px !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: auto !important;
}

.top-category-bar__home,
.top-category-bar__link,
.top-category-bar__link--wide3-restored,
.top-category-bar__link--usb-lan-webcam,
.top-category-bar__link--webzine-duty {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #0f172a !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.top-category-bar__link--webzine-duty {
    margin-left: 0 !important;
}

.top-category-bar__home:hover,
.top-category-bar__home:focus-visible,
.top-category-bar__link:hover,
.top-category-bar__link:focus-visible {
    border: 0 !important;
    background: transparent !important;
    color: #0369a1 !important;
    box-shadow: none !important;
    outline: 0 !important;
    text-decoration: underline !important;
    text-underline-offset: 5px !important;
}

@media (max-width: 720px) {
    .top-category-bar__inner {
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        min-height: 44px !important;
        padding: 0 10px !important;
        gap: 12px !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
    }

    .top-category-bar__links {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        grid-template-columns: none !important;
        width: auto !important;
        overflow: visible !important;
        gap: 14px !important;
    }

    .top-category-bar__home,
    .top-category-bar__link,
    .top-category-bar__link--wide3-restored,
    .top-category-bar__link--usb-lan-webcam,
    .top-category-bar__link--webzine-duty {
        min-height: 44px !important;
        height: 44px !important;
        font-size: 13px !important;
    }
}