/**
 * 종합서비스 허브 — story-campaign 레이어 (에디토리얼·챕터 레일·덜 둥근 지오메트리)
 * 범위: .unified-search-page--story 만 (기존 modern_unified와 병행)
 */

.unified-search-page--story {
    --us-ink: #1c1917;
    --us-graphite: #44403c;
    --us-clay: #8d431b;
    --us-paper: rgba(255, 251, 246, 0.92);
    --us-rail: rgba(65, 52, 40, 0.12);
}

/* 배경 블롭 — 덜 도드라지게 */
.unified-search-page--story .glass-blob {
    opacity: 0.28;
    filter: blur(80px);
}

/* —— 01 히어로(포스터) —— 중앙 정렬(타이틀+설명+레일+허브 pill 묶음) */
.unified-search-page--story .us-hero-poster {
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 20px;
    column-gap: 24px;
    border-radius: 16px;
    padding: 18px 20px;
    background: var(--us-paper);
    border: 1px solid rgba(65, 52, 40, 0.1);
    box-shadow: 0 18px 42px rgba(45, 34, 24, 0.08);
}

.unified-search-page--story .us-hero-poster__left {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex: 0 1 auto;
    min-width: 0;
    max-width: min(580px, 100%);
}

.unified-search-page--story .us-hero-poster__rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 4px 10px 4px 4px;
    border-right: 1px solid var(--us-rail);
    flex-shrink: 0;
}

.unified-search-page--story .us-hero-poster__scene-num {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--us-clay);
    font-variant-numeric: tabular-nums;
}

.unified-search-page--story .us-hero-poster__scene-title {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    color: var(--us-graphite);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    opacity: 0.75;
}

.unified-search-page--story .us-hero-poster__copy {
    text-align: center;
    width: 100%;
}

.unified-search-page--story .us-hero-poster__copy .service-studio-eyebrow {
    color: var(--us-clay);
}

.unified-search-page--story .us-hero-poster__copy h1 {
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--us-ink);
}

.unified-search-page--story .us-hero-poster__copy .service-studio-copy {
    color: #57534e;
    font-size: 0.88rem;
    line-height: 1.65;
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
}

/* 히어로와 같은 막에서 허브 pill(종합/보험/스튜디오)도 가운데 */
.unified-search-page--story .us-hero-poster .service-top-mode-switch {
    margin-left: auto;
    margin-right: auto;
    flex: 0 1 min(720px, 100%);
}

/* 상단 허브 전환 — 덜 ‘앱스토어 pill’, 더 직사각형·원장 */
.unified-search-page--story .hub-mode-pill {
    border-radius: 10px;
    min-height: 96px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(65, 52, 40, 0.12);
    box-shadow: 0 8px 20px rgba(45, 34, 24, 0.06);
}

.unified-search-page--story .hub-mode-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(45, 34, 24, 0.1);
}

.unified-search-page--story .hub-mode-pill.is-active {
    background: linear-gradient(145deg, #6b3d22 0%, #5c3319 100%);
    border-color: rgba(45, 34, 24, 0.25);
}

/* —— 좌측 카테고리: 챕터 넘버(우상단 모서리, 그리드 레이아웃 유지) —— */
.unified-search-page--story .app-hub-sidebar .category-card,
.unified-search-page--story .service-studio-sidebar .category-card {
    position: relative;
    border-radius: 12px;
}

.unified-search-page--story .us-cat-chapter {
    position: absolute;
    top: 8px;
    right: 34px;
    left: auto;
    transform: none;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: rgba(65, 52, 40, 0.38);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    z-index: 0;
}

/* —— 02 앱 영역 헤더(씬 레일) —— */
.unified-search-page--story .hub-browser-head--scene {
    border-radius: 14px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(65, 52, 40, 0.1);
    box-shadow: 0 12px 32px rgba(45, 34, 24, 0.07);
}

.unified-search-page--story .hub-browser-head__row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 14px;
    width: 100%;
}

.unified-search-page--story .hub-scene-rail {
    flex-shrink: 0;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--us-clay);
    font-variant-numeric: tabular-nums;
    border-right: 1px solid var(--us-rail);
    line-height: 1;
}

.unified-search-page--story .hub-browser-head__inner {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.unified-search-page--story .hub-browser-head--scene .hub-section-kicker {
    margin-bottom: 0;
    color: var(--us-graphite);
}

.unified-search-page--story .hub-browser-headline h3 {
    color: var(--us-ink);
}

.unified-search-page--story .hub-browser-headline p {
    color: #6b5f52;
}

/* —— 앱 서비스 리스트: 2열·플랫한 ‘원장 행’ —— */
.unified-search-page--story .service-grid {
    grid-template-columns: 1fr;
    gap: 8px;
}

@media (min-width: 900px) {
    .unified-search-page--story .service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 12px;
    }
}

.unified-search-page--story .service-item {
    border-radius: 10px;
    min-height: 90px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(65, 52, 40, 0.1);
    box-shadow: 0 4px 16px rgba(45, 34, 24, 0.05);
}

.unified-search-page--story .service-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(45, 34, 24, 0.08);
}

.unified-search-page--story .service-item::before {
    opacity: 0;
}

.unified-search-page--story .service-icon {
    border-radius: 10px;
    width: 44px;
    height: 44px;
}

/* 패널 전반: 반지름 약화 */
.unified-search-page--story .service-studio-panel {
    border-radius: 16px;
}

.unified-search-page--story .category-section--hub {
    border-radius: 16px;
}

/* 모바일: 히어로(포스터) 전용 — 세로 스택, 레일·텍스트·pill 정돈 */
@media (max-width: 480px) {
    .unified-search-page--story .us-hero-poster {
        flex-direction: column;
        align-items: stretch;
        row-gap: 16px;
        padding: 16px 12px 14px;
    }

    /* 레일(01 HUB) → 가로 띠, 중앙 / 그 아래 카피 / 맨 아래 3칸 pill */
    .unified-search-page--story .us-hero-poster__left {
        flex-direction: column;
        align-items: center;
        max-width: 100%;
        width: 100%;
        gap: 12px;
    }

    .unified-search-page--story .us-hero-poster__rail {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        border-right: 0;
        border-bottom: 1px solid var(--us-rail);
        padding: 0 0 12px 0;
        width: 100%;
        gap: 10px;
    }

    .unified-search-page--story .us-hero-poster__scene-title {
        writing-mode: horizontal-tb;
        letter-spacing: 0.14em;
    }

    .unified-search-page--story .us-hero-poster__copy {
        padding: 0 4px;
    }

    .unified-search-page--story .us-hero-poster__copy h1 {
        font-size: clamp(1.25rem, 4.2vw, 1.5rem);
        line-height: 1.2;
    }

    .unified-search-page--story .us-hero-poster__copy .service-studio-copy {
        font-size: 0.85rem;
        line-height: 1.6;
    }

    .unified-search-page--story .us-hero-poster .service-top-mode-switch {
        width: 100%;
        max-width: 100%;
        flex: 1 1 100%;
        margin: 0;
    }

    /* 3칸·좁은 화면: pill 터치/줄바꿈 */
    .unified-search-page--story .us-hero-poster .hub-mode-switch {
        gap: 6px;
    }

    .unified-search-page--story .us-hero-poster .hub-mode-pill {
        min-height: 70px;
        padding: 10px 6px;
    }

    .unified-search-page--story .us-hero-poster .hub-mode-pill strong {
        font-size: 12px;
        line-height: 1.25;
        word-break: keep-all;
    }

    .unified-search-page--story .us-hero-poster .hub-mode-pill span {
        font-size: 10px;
        line-height: 1.35;
    }

    .unified-search-page--story .us-cat-chapter {
        display: none;
    }

    .unified-search-page--story .hub-scene-rail {
        width: 32px;
        font-size: 0.95rem;
    }

    .unified-search-page--story .hub-browser-head > div:first-child {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 8px;
    }

    .unified-search-page--story .hub-browser-head__inner {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        flex: 1;
        min-width: 0;
    }

    .unified-search-page--story .hub-browser-head__inner .hub-section-kicker {
        margin-bottom: 0;
    }
}