:root {
    --bg: #050816;
    --panel: #10182f;
    --panel-strong: #142044;
    --text: #ffffff;
    --muted: #b8c2d6;
    --line: rgba(255,255,255,.12);
    --blue: #2f80ff;
    --blue-soft: #5aa2ff;
    --danger: #ffd6d6;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0 !important; padding: 0 !important; width: 100%; min-height: 100%; background: var(--bg); }
body.ai-spine-app-body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", Arial, sans-serif; color: var(--text); overflow-x: hidden; }
body, button, input, textarea { font-size: 16px; }
.ai-spine-page { width: 100%; min-height: 100vh; min-height: 100dvh; background: radial-gradient(circle at top, #14285e 0%, #050816 48%, #03040b 100%); }

/* 워드프레스 기본 공간 최소화 */
.wp-site-blocks, .site, .site-content, .content-area, .entry-content, main { margin: 0 !important; padding: 0 !important; max-width: 100% !important; }
.site-header, header, .main-navigation, .menu-toggle, .site-footer, footer { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; border: 0; cursor: pointer; }

.app-shell { width: 100%; min-height: 100vh; min-height: 100dvh; display: flex; justify-content: center; align-items: stretch; padding: max(18px, env(safe-area-inset-top)) 14px max(92px, calc(76px + env(safe-area-inset-bottom))); }
.hero-card, .content-card { width: 100%; max-width: 480px; min-height: calc(100dvh - 110px); border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(180deg, rgba(16,24,47,.96), rgba(7,11,25,.98)); box-shadow: 0 24px 60px rgba(0,0,0,.36); padding: 24px 20px; display: flex; flex-direction: column; gap: 18px; }
.brand-area { display: flex; align-items: center; gap: 14px; }
.brand-mark { width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(135deg, var(--blue), #7fd7ff); color: #fff; font-weight: 900; letter-spacing: -1px; box-shadow: 0 12px 30px rgba(47,128,255,.35); }
.eyebrow { margin: 0 0 4px; color: var(--blue-soft); font-size: 13px; font-weight: 700; letter-spacing: .5px; }
h1 { margin: 0; font-size: clamp(24px, 7vw, 30px); line-height: 1.18; letter-spacing: -1px; color: var(--text); }
.hero-copy { margin: 0; color: var(--muted); line-height: 1.65; font-size: 16px; }

.hero-visual { position: relative; min-height: 190px; border-radius: 24px; overflow: hidden; background: linear-gradient(135deg, rgba(47,128,255,.14), rgba(127,215,255,.05)); border: 1px solid var(--line); }
.spine-line { position: absolute; left: 50%; top: 22px; width: 10px; height: 145px; transform: translateX(-50%); border-radius: 999px; background: linear-gradient(180deg, #75d6ff, #2f80ff, #ffffff); box-shadow: 0 0 30px rgba(90,162,255,.9); }
.scan-ring { position: absolute; left: 50%; transform: translateX(-50%); border: 2px solid rgba(127,215,255,.45); border-radius: 50%; }
.ring-one { top: 38px; width: 116px; height: 116px; }
.ring-two { top: 70px; width: 160px; height: 80px; }
.scan-dot { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 20px rgba(255,255,255,.8); }
.dot-one { left: 29%; top: 62px; } .dot-two { right: 27%; bottom: 48px; }

.action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.primary-action, .secondary-action, .small-action { min-height: 54px; border-radius: 18px; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 800; }
.primary-action { grid-column: 1 / -1; background: linear-gradient(135deg, var(--blue), #6fc7ff); color: #fff; box-shadow: 0 14px 28px rgba(47,128,255,.3); }
.secondary-action { grid-column: 1 / -1; background: #fff; color: #071022; }
.small-action { background: rgba(255,255,255,.08); color: #fff; border: 1px solid var(--line); }
.primary-action:active, .secondary-action:active, .small-action:active, .tab-item:active { transform: scale(.98); }

.notice-card { margin-top: auto; padding: 15px; border-radius: 20px; background: rgba(255,255,255,.07); border: 1px solid var(--line); }
.notice-card strong { display: block; margin-bottom: 5px; color: #ffffff; }
.notice-card p { margin: 0; color: var(--danger); line-height: 1.55; font-size: 14px; }

.bottom-tabs { position: fixed; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: calc(100% - 28px); max-width: 480px; min-height: 64px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px; border-radius: 24px; background: rgba(8,13,29,.92); border: 1px solid var(--line); box-shadow: 0 14px 40px rgba(0,0,0,.45); backdrop-filter: blur(14px); z-index: 20; }
.tab-item { min-height: 48px; border-radius: 16px; display: grid; place-items: center; color: var(--muted); background: transparent; font-weight: 700; }
.tab-item.active { color: #fff; background: rgba(47,128,255,.22); }

@media (min-width: 700px) { .app-shell { align-items: center; } .hero-card { min-height: 740px; } }
@media (max-width: 360px) { .hero-card { padding: 20px 16px; border-radius: 24px; } .hero-visual { min-height: 160px; } .primary-action, .secondary-action, .small-action { min-height: 52px; font-size: 15px; } }

/* PWA Start Page로 일반 워드프레스 페이지를 선택했을 때 호환 */
.app-shell-page {
    padding: 0 0 max(86px, calc(70px + env(safe-area-inset-bottom))) !important;
    align-items: stretch;
    background: #050816;
}
.app-page-card {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 !important;
    padding: 0 !important;
    background: #050816;
    color: #fff;
}
.wp-content-app {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 !important;
    padding: 0 !important;
    background: #050816;
    color: #fff;
    overflow-x: hidden;
}
.wp-content-app > *:first-child { margin-top: 0 !important; }
.wp-content-app > *:last-child { margin-bottom: 0 !important; }
.wp-content-app p,
.wp-content-app li,
.wp-content-app span,
.wp-content-app div { color: inherit; }
.wp-content-app h1,
.wp-content-app h2,
.wp-content-app h3,
.wp-content-app h4 { color: #fff; line-height: 1.25; }
.wp-content-app img,
.wp-content-app video,
.wp-content-app canvas,
.wp-content-app iframe {
    max-width: 100% !important;
}
.wp-content-app iframe {
    width: 100% !important;
    min-height: 70vh;
    border: 0;
}
.wp-content-app .wp-block-group,
.wp-content-app .wp-block-cover,
.wp-content-app .wp-block-columns,
.wp-content-app .wp-block-column {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.wp-content-app .wp-block-group,
.wp-content-app .wp-block-cover {
    padding-left: 16px;
    padding-right: 16px;
}
.wp-content-app .wp-block-button__link,
.wp-content-app button,
.wp-content-app input[type="button"],
.wp-content-app input[type="submit"] {
    min-height: 52px;
    border-radius: 16px;
    font-weight: 800;
}
.compact-card {
    min-height: 100vh;
    min-height: 100dvh;
    max-width: 100%;
    border-radius: 0;
    border: 0;
}
@media (min-width: 700px) {
    .app-shell-page { justify-content: center; }
    .app-page-card { max-width: 480px; }
}