/* 검색·AI 수집용 초기 HTML을 실제 첫 화면처럼 보여 주고 React 화면과 교차 전환합니다. */
.dg-app-stage {
    display: grid;
    min-width: 0;
    min-height: 100vh;
    isolation: isolate;
    background: #f8fafc;
}

.dg-app-stage > .dg-server-layer,
.dg-app-stage > #root {
    grid-area: 1 / 1;
    min-width: 0;
    width: 100%;
}

.dg-app-stage > .dg-server-layer {
    position: relative;
    z-index: 2;
    opacity: 1;
    transition: opacity 220ms ease;
}

.dg-app-stage > #root {
    position: relative;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms ease 35ms;
}

.dg-app-stage.dg-app-ready > .dg-server-layer {
    opacity: 0;
    pointer-events: none;
}

.dg-app-stage.dg-app-ready > #root {
    z-index: 3;
    opacity: 1;
    pointer-events: auto;
}

.dg-app-stage.dg-app-complete {
    display: block;
    min-height: 0;
}

.dg-server-content {
    --dg-shell-accent: #818cf8;
    --dg-shell-accent-soft: rgba(129, 140, 248, .22);
    --dg-shell-start: #0f172a;
    --dg-shell-end: #312e81;
    min-height: 100vh;
    padding: 0 1rem 4rem;
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 12%, var(--dg-shell-accent-soft), transparent 26rem),
        radial-gradient(circle at 92% 70%, rgba(255,255,255,.8), transparent 30rem),
        linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
    color: #0f172a;
}

.dg-server-header {
    display: flex;
    max-width: 78rem;
    min-height: 5.5rem;
    margin: 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.dg-server-brand {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: .8rem;
    color: #0f172a;
    text-decoration: none;
}

.dg-server-brand img {
    width: 2.8rem;
    height: 2.8rem;
    flex: 0 0 auto;
    object-fit: contain;
    border: 1px solid rgba(226,232,240,.9);
    border-radius: 1rem;
    background: #fff;
    padding: .28rem;
    box-shadow: 0 8px 22px rgba(15,23,42,.08);
}

.dg-server-brand strong,
.dg-server-brand small { display: block; }
.dg-server-brand strong { font-size: .98rem; font-weight: 900; letter-spacing: -.025em; }
.dg-server-brand small { margin-top: .12rem; color: #64748b; font-size: .68rem; font-weight: 700; }

.dg-server-status {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem .8rem;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: rgba(255,255,255,.82);
    color: #64748b;
    font-size: .7rem;
    font-weight: 800;
    backdrop-filter: blur(12px);
}

.dg-server-status::before {
    width: .48rem;
    height: .48rem;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 .25rem rgba(52,211,153,.14);
    content: '';
}

.dg-server-article {
    position: relative;
    max-width: 78rem;
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 4.6rem);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: clamp(2rem, 4vw, 3.2rem);
    background:
        radial-gradient(circle at 85% 10%, var(--dg-shell-accent-soft), transparent 24rem),
        linear-gradient(135deg, var(--dg-shell-start), var(--dg-shell-end));
    color: #fff;
    box-shadow: 0 28px 70px rgba(15,23,42,.2);
}

.dg-server-article::after {
    position: absolute;
    right: -7rem;
    bottom: -9rem;
    width: 25rem;
    height: 25rem;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    box-shadow: 0 0 0 3.5rem rgba(255,255,255,.025), 0 0 0 7rem rgba(255,255,255,.018);
    content: '';
    pointer-events: none;
}

.dg-server-hero,
.dg-server-detail,
.dg-server-grid,
.dg-server-nav { position: relative; z-index: 1; }

.dg-server-hero { max-width: 58rem; }
.dg-server-kicker { margin: 0 0 1rem; color: #c7d2fe; font-size: .75rem; font-weight: 900; letter-spacing: .2em; }
.dg-server-content h1 { max-width: 56rem; margin: 0; color: #fff; font-size: clamp(2rem, 5.2vw, 4.35rem); line-height: 1.12; letter-spacing: -.05em; overflow-wrap: anywhere; word-break: keep-all; }
.dg-server-summary { max-width: 52rem; margin: 1.35rem 0 0; color: rgba(255,255,255,.78); font-size: clamp(.98rem, 2vw, 1.16rem); line-height: 1.85; word-break: keep-all; }
.dg-server-grid, .dg-server-detail { display: grid; grid-template-columns: repeat(auto-fit,minmax(14rem,1fr)); gap: .85rem; margin-top: 2.5rem; }
.dg-server-card { min-width: 0; padding: 1.15rem; border: 1px solid rgba(255,255,255,.13); border-radius: 1.25rem; background: rgba(255,255,255,.09); backdrop-filter: blur(12px); }
.dg-server-card h2 { margin: 0 0 .55rem; color: #fff; font-size: 1rem; line-height: 1.5; }
.dg-server-card p { margin: 0; color: rgba(255,255,255,.68); font-size: .88rem; line-height: 1.7; }
.dg-server-card a { color: #fff; text-decoration: none; }
.dg-server-nav { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 2rem; }
.dg-server-nav a { padding: .65rem .9rem; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; background: rgba(255,255,255,.1); color: #fff; font-size: .78rem; font-weight: 800; text-decoration: none; backdrop-filter: blur(10px); }

.dg-theme-home { --dg-shell-accent: #818cf8; --dg-shell-accent-soft: rgba(129,140,248,.25); --dg-shell-start: #111827; --dg-shell-end: #312e81; }
.dg-theme-about { --dg-shell-accent: #a78bfa; --dg-shell-accent-soft: rgba(167,139,250,.24); --dg-shell-start: #172554; --dg-shell-end: #4c1d95; }
.dg-theme-project, .dg-theme-proapp { --dg-shell-accent: #fb923c; --dg-shell-accent-soft: rgba(251,146,60,.23); --dg-shell-start: #172033; --dg-shell-end: #7c2d12; }
.dg-theme-together { --dg-shell-accent: #34d399; --dg-shell-accent-soft: rgba(52,211,153,.22); --dg-shell-start: #0f172a; --dg-shell-end: #065f46; }
.dg-theme-pixelmoa { --dg-shell-accent: #c084fc; --dg-shell-accent-soft: rgba(192,132,252,.24); --dg-shell-start: #1e1b4b; --dg-shell-end: #581c87; }
.dg-theme-cat { --dg-shell-accent: #2dd4bf; --dg-shell-accent-soft: rgba(45,212,191,.22); --dg-shell-start: #0f172a; --dg-shell-end: #115e59; }
.dg-theme-donation { --dg-shell-accent: #fb7185; --dg-shell-accent-soft: rgba(251,113,133,.24); --dg-shell-start: #312e81; --dg-shell-end: #881337; }
.dg-theme-space-rental { --dg-shell-accent: #fbbf24; --dg-shell-accent-soft: rgba(251,191,36,.2); --dg-shell-start: #1c1917; --dg-shell-end: #78350f; }
.dg-theme-map { --dg-shell-accent: #38bdf8; --dg-shell-accent-soft: rgba(56,189,248,.22); --dg-shell-start: #0f172a; --dg-shell-end: #0c4a6e; }
.dg-theme-notice { --dg-shell-accent: #60a5fa; --dg-shell-accent-soft: rgba(96,165,250,.22); --dg-shell-start: #172554; --dg-shell-end: #3730a3; }
.dg-theme-gallery { --dg-shell-accent: #fb923c; --dg-shell-accent-soft: rgba(251,146,60,.24); --dg-shell-start: #1c1917; --dg-shell-end: #9a3412; }

@media (max-width: 640px) {
    .dg-server-content { padding-right: .75rem; padding-left: .75rem; }
    .dg-server-header { min-height: 4.8rem; }
    .dg-server-brand img { width: 2.45rem; height: 2.45rem; border-radius: .85rem; }
    .dg-server-brand small, .dg-server-status { display: none; }
    .dg-server-article { padding: 2rem 1.35rem 2.25rem; border-radius: 2rem; }
    .dg-server-detail, .dg-server-grid { grid-template-columns: 1fr; margin-top: 1.7rem; }
}

@media (prefers-reduced-motion: reduce) {
    .dg-app-stage > .dg-server-layer,
    .dg-app-stage > #root { transition: none; }
}