/*
 * 서비스 페이지에서 홈 좌측 nav rail을 재사용할 때 적용하는 보정.
 * 홈은 다중 패널(좌측 rail / 가운데 본문 / 우측 보조)을 가정하지만,
 * 서비스 페이지는 본문 한 컬럼만 필요하므로 main 영역의 grid를 풀어준다.
 */

:root {
    --service-left-rail-aside-width: 4.25rem;
    --service-left-rail-gap: 1rem;
}

.service-left-rail-root {
    width: 100%;
}

.service-left-rail-shell {
    width: 100%;
    max-width: 1600px;
    padding: 0 1rem;
}

.service-left-rail-host {
    --service-left-rail-aside-width: var(--home-v6-desktop-nav-width, 4.25rem);
    --service-left-rail-gap: var(--home-v6-panel-gap, 1rem);
}

@media (min-width: 768px) {
    .service-left-rail-shell {
        padding: 0 1.5rem;
    }
}

@media (min-width: 1280px) {
    .service-left-rail-shell {
        padding: 0 2rem;
    }
}

/* 데스크톱: 로그인 홈과 같은 compact icon rail + main 1fr */
.service-left-rail-layout {
    display: grid;
    gap: var(--service-left-rail-gap);
    align-items: start;
    overflow: visible;
}

@media (min-width: 1024px) {
    .service-left-rail-root--active .service-left-rail-layout {
        grid-template-columns: var(--service-left-rail-aside-width) minmax(0, 1fr);
    }
}

/* rail 비활성 시 main만 풀폭 */
.service-left-rail-root--inactive .service-left-rail-layout {
    grid-template-columns: minmax(0, 1fr);
}

/* 서비스 본문은 홈처럼 2단 grid가 아니라 단일 column으로 흐른다.
 * (home-v4-main의 @media >=1280px 2단 그리드 오버라이드) */
.service-left-rail-main {
    grid-template-columns: minmax(0, 1fr) !important;
    column-gap: 0 !important;
    width: 100%;
    min-width: 0;
}

.service-left-rail-root--active .service-left-rail-aside {
    align-self: start;
    min-width: 0;
    overflow: visible;
}

/* 모바일에서는 aside 숨김 */
@media (max-width: 1023px) {
    .service-left-rail-aside {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    .service-left-rail-root--active .service-left-rail-aside {
        display: grid;
        gap: var(--service-left-rail-gap);
        position: sticky;
        z-index: 100;
        top: calc(var(--main-nav-height, 88px) + 0.75rem);
        width: var(--service-left-rail-aside-width);
    }
}

.service-left-rail-root--active .home-v6-nav-card.home-v6-nav-card--rail {
    padding: 0.08rem 0.16rem 0.3rem;
    overflow: visible;
    z-index: 90;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.service-left-rail-root--active .home-v6-nav-card.home-v6-nav-card--rail::before,
.service-left-rail-root--active .home-v6-nav-card.home-v6-nav-card--rail::after {
    content: none;
}

.service-left-rail-root--active .home-v6-nav-stack--rail,
.service-left-rail-root--active .home-v6-nav-rail {
    display: grid;
    gap: 0.42rem;
    overflow: visible;
}

.service-left-rail-root--active .home-v6-nav-rail {
    justify-items: center;
}

.service-left-rail-root--active .home-v6-nav-rail-group {
    position: relative;
    display: grid;
    justify-items: center;
}

.service-left-rail-root--active .home-v6-nav-rail-group.is-open {
    z-index: 110;
}

.service-left-rail-root--active .home-v6-nav-rail-button {
    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 2.96rem;
    height: 2.96rem;
    border: 1px solid rgba(226, 232, 240, 0.92);
    border-radius: 0.92rem;
    background: rgba(255, 255, 255, 0.97);
    box-shadow:
        0 6px 16px rgba(15, 23, 42, 0.038),
        inset 0 1px 0 rgba(255, 255, 255, 0.84);
    transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease;
}

.service-left-rail-root--active .home-v6-nav-rail-button:hover,
.service-left-rail-root--active .home-v6-nav-rail-button:focus-visible,
.service-left-rail-root--active .home-v6-nav-rail-button[aria-expanded="true"] {
    border-color: rgba(var(--home-v6-brand-rgb), 0.18);
    background: rgba(248, 250, 252, 0.98);
    box-shadow:
        0 8px 20px rgba(15, 23, 42, 0.045),
        0 0 0 2px rgba(var(--home-v6-brand-rgb), 0.04);
}

.service-left-rail-root--active .home-v6-nav-rail-button .home-v6-nav-icon {
    width: 1.84rem;
    height: 1.84rem;
    border-radius: 0.72rem;
    border-color: rgba(226, 232, 240, 0.95);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: none;
}

.service-left-rail-root--active .home-v6-nav-rail-button:hover .home-v6-nav-icon,
.service-left-rail-root--active .home-v6-nav-rail-button:focus-visible .home-v6-nav-icon,
.service-left-rail-root--active .home-v6-nav-rail-button[aria-expanded="true"] .home-v6-nav-icon {
    border-color: rgba(var(--home-v6-accent-rgb), 0.12);
    background: rgba(var(--home-v6-accent-rgb), 0.05);
}

.service-left-rail-root--active .home-v6-nav-flyout,
.service-left-rail-root--active .home-v6-nav-rail-tooltip {
    display: none;
    position: absolute;
    left: calc(100% + 0.7rem);
    top: 0;
    transform: none;
    z-index: 140;
    width: 15.4rem;
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
    border: 1px solid rgba(226, 232, 240, 0.94);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.985);
    box-shadow:
        0 12px 28px rgba(15, 23, 42, 0.06),
        0 1px 4px rgba(15, 23, 42, 0.03);
}

.service-left-rail-root--active .home-v6-nav-flyout::before,
.service-left-rail-root--active .home-v6-nav-rail-tooltip::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -18px;
    width: 18px;
    background: transparent;
}

.service-left-rail-root--active [data-home-v6-nav-rail="true"]:not([data-js-bound="true"]) .home-v6-nav-rail-group:hover .home-v6-nav-flyout,
.service-left-rail-root--active [data-home-v6-nav-rail="true"]:not([data-js-bound="true"]) .home-v6-nav-rail-group:focus-within .home-v6-nav-flyout,
.service-left-rail-root--active [data-home-v6-nav-rail="true"]:not([data-js-bound="true"]) .home-v6-nav-rail-group:hover .home-v6-nav-rail-tooltip,
.service-left-rail-root--active [data-home-v6-nav-rail="true"]:not([data-js-bound="true"]) .home-v6-nav-rail-group:focus-within .home-v6-nav-rail-tooltip {
    display: block;
}

.service-left-rail-root--active .home-v6-nav-rail-tooltip {
    width: auto;
    min-width: 7rem;
    max-width: 10.5rem;
    padding: 0.58rem 0.72rem;
    overflow: hidden;
}

.service-left-rail-root--active .home-v6-nav-flyout {
    width: 15.4rem;
    padding: 0.42rem;
}

.service-left-rail-root--active .home-v6-nav-flyout-head {
    padding: 0.14rem 0.22rem 0.36rem;
    margin-bottom: 0.12rem;
    border-bottom: 1px solid rgba(241, 245, 249, 0.98);
}

.service-left-rail-root--active .home-v6-nav-flyout-title,
.service-left-rail-root--active .home-v6-nav-rail-tooltip-title {
    margin: 0;
    color: #162033;
    font-size: 0.82rem;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -0.012em;
    white-space: nowrap;
}

.service-left-rail-root--active .home-v6-nav-flyout .home-v6-tool-list--flyout {
    margin-left: 0;
    padding: 0;
    border: 0;
    background: transparent;
    gap: 0.1rem;
}

.service-left-rail-root--active .home-v6-tool-link--flyout,
.service-left-rail-root--active .home-v6-nav-settings-link {
    display: flex;
    align-items: center;
    gap: 0.62rem;
    min-height: 2.36rem;
    padding: 0.38rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 0.82rem;
    background: transparent;
    box-shadow: none;
}

.service-left-rail-root--active .home-v6-tool-link--flyout {
    padding-right: 2.2rem;
}

.service-left-rail-root--active .home-v6-nav-flyout .home-v6-tool-summary {
    display: none;
}

.service-left-rail-root--active .home-v6-nav-flyout .home-v6-tool-title,
.service-left-rail-root--active .home-v6-nav-settings-title {
    display: block;
    overflow: hidden;
    color: #162033;
    font-size: 0.855rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.014em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.service-left-rail-root--active .home-v6-nav-flyout .home-v6-tool-item {
    transition: none;
}

.service-left-rail-root--active .home-v6-nav-flyout .home-v6-tool-item:hover,
.service-left-rail-root--active .home-v6-nav-flyout .home-v6-tool-item:focus-within {
    transform: none;
}

.service-left-rail-root--active .home-v6-nav-flyout .home-v6-tool-icon {
    width: 1.64rem;
    height: 1.64rem;
    border-radius: 0.58rem;
    border-color: rgba(241, 245, 249, 0.98);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: none;
    color: var(--home-v6-nav-accent);
}

.service-left-rail-root--active .home-v6-tool-link--flyout:hover,
.service-left-rail-root--active .home-v6-tool-link--flyout:focus-visible,
.service-left-rail-root--active .home-v6-nav-settings-link:hover,
.service-left-rail-root--active .home-v6-nav-settings-link:focus-visible {
    border-color: rgba(226, 232, 240, 0.92);
    background: rgba(248, 250, 252, 0.92);
    box-shadow: none;
}

.service-left-rail-root--active .home-v6-nav-settings-links {
    display: grid;
    gap: 0.1rem;
}

.service-left-rail-root--active .home-v6-nav-settings-link {
    justify-content: space-between;
}

.service-left-rail-root--active .home-v6-nav-settings-copy {
    display: grid;
    min-width: 0;
}

.service-left-rail-root--active .home-v6-nav-settings-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    border: 0;
    background: transparent;
    color: #94a3b8;
    flex-shrink: 0;
    font-size: 0.7rem;
}

.service-left-rail-root--active .home-v6-tool-favorite-badge {
    top: 0.46rem;
    right: 0.48rem;
    width: 1.42rem;
    height: 1.42rem;
    min-width: 1.42rem;
    min-height: 1.42rem;
    border-radius: 0.54rem;
}

.service-left-rail-root--active .home-v6-tool-favorite-badge i {
    font-size: 0.62rem;
}

/* 데스크톱에서는 모바일 chip/시트 숨김 (rail 활성 시에만 렌더되므로 추가 안전망) */
@media (min-width: 1024px) {
    .service-left-rail-root--active .service-left-rail-mobile-summary,
    .service-left-rail-root--active .home-v4-mobile-overlay,
    .service-left-rail-root--active .home-v4-mobile-sheet {
        display: none !important;
    }
}

/* rail 비활성 시 mobile chip/시트 마크업 자체가 렌더되지 않음 - 별도 처리 불필요 */

/* 카드 내부 padding이 너무 좁아 보이지 않도록 main에 가벼운 여백 */
.service-left-rail-main {
    padding-bottom: 2rem;
}

/* CLAUDE.md §40-1: 우측 잘림 방지 — min-width:0 보장 */
.service-left-rail-host,
.service-left-rail-layout,
.service-left-rail-main {
    min-width: 0;
}