/* SBPivot 예제 실행 결과 영역. (spec/72)
 * Pivot 예제를 실행하는 동안만 .homepage-pivot 에 pivot-run 클래스가 붙는다.
 * Grid 예제의 버튼 모양은 바꾸지 않는다. */

.homepage-pivot .pivot-guide-result {
    margin: 8px 0;
    padding: 8px 10px;
    min-height: 20px;
    background: #f6f8fa;
    border: 1px solid #e5e5e5;
    white-space: pre-wrap;
    font-family: Consolas, monospace;
    font-size: 13px;
}

.homepage-pivot .pivot-guide-error {
    color: #c62828;
    border-color: #f3b5b5;
    background: #fff5f5;
}

/* 예제 실행 버튼만 꾸민다. Pivot 내부 팝업의 적용/취소 버튼은 SBGrid 스타일을 유지한다. */
.homepage-pivot.pivot-run > button {
    margin: 0 6px 6px 0;
    padding: 4px 10px;
    border: 1px solid #c8c8c8;
    border-radius: 4px;
    background: #fff;
}

.homepage-pivot.pivot-run > button:disabled {
    color: #aaa;
}

/* Store Sales와 Grid Live Sync는 넓은 표를 먼저 보여주고 코드를 아래에 배치한다. */
.sbgridapi-wrap .sbgridapi-content .sbgridapi-coding-box.pivot-wide {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sbgridapi-wrap .sbgridapi-content .sbgridapi-coding-box.pivot-wide > div {
    width: 100%;
    margin: 0;
}

.sbgridapi-coding-box.pivot-wide .sbgridapi-res-box {
    order: -1;
}

/* 공통 ResizeObserver가 설정하는 표 높이와 코드 편집기 높이를 분리한다. */
.sbgridapi-coding-box.pivot-wide #code-box1,
.sbgridapi-coding-box.pivot-wide #code-box2 {
    height: 360px !important;
    min-height: 360px !important;
}

.homepage-pivot .store-pivot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
}

.homepage-pivot .store-pivot-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: auto;
    color: #3d6257;
    font-size: 12px;
}

.homepage-pivot .store-pivot-filters select {
    max-width: 160px;
    padding: 6px 8px;
    border: 1px solid #c9dcd5;
    border-radius: 4px;
    background: #fff;
    color: #203d38;
    font: inherit;
}

.homepage-pivot .store-pivot-filters select:focus-visible {
    outline: 2px solid #166d59;
    outline-offset: 2px;
}

.homepage-pivot .store-pivot-views {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.homepage-pivot .store-pivot-views button {
    margin: 0;
    padding: 7px 12px;
    border-color: #c9dcd5;
    color: #3d6257;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.homepage-pivot .store-pivot-views button[aria-pressed="true"] {
    border-color: #166d59;
    background: #166d59;
    color: #fff;
}

.homepage-pivot .store-pivot-views button:focus-visible {
    outline: 2px solid #166d59;
    outline-offset: 3px;
}

.homepage-pivot .store-pivot-views button:disabled {
    opacity: .6;
    cursor: wait;
}

.homepage-pivot .store-pivot-caption {
    margin: 10px 0;
    color: #617a73;
    font-size: 12px;
    line-height: 1.8;
}

.homepage-pivot .live-sync-pivot h3,
.homepage-pivot .live-sync-pivot h4 {
    margin: 12px 0 8px;
    color: #203d38;
}

.homepage-pivot .live-sync-caption {
    margin: 8px 0 12px;
    color: #617a73;
    font-size: 12px;
    line-height: 1.8;
}

.homepage-pivot .live-sync-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.homepage-pivot .live-sync-actions button,
.homepage-pivot .live-sync-changes button {
    padding: 7px 12px;
    border: 1px solid #c9dcd5;
    border-radius: 4px;
    background: #fff;
    color: #3d6257;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.homepage-pivot .live-sync-actions button:focus-visible {
    outline: 2px solid #166d59;
    outline-offset: 2px;
}

.homepage-pivot .live-sync-actions button:disabled {
    opacity: .6;
    cursor: wait;
}

.homepage-pivot .live-sync-changes {
    width: min(900px, calc(100vw - 48px));
    box-sizing: border-box;
    padding: 16px;
    border: 1px solid #c9dcd5;
    border-radius: 6px;
}

.homepage-pivot .live-sync-changes::backdrop {
    background: rgba(0, 0, 0, .3);
}

.homepage-pivot .live-sync-changes pre {
    max-height: 60vh;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 13px;
    line-height: 1.5;
}

.homepage-pivot .live-sync-changes form {
    text-align: right;
}

/* Store Sales 예제의 주변 UI 스타일. 피벗 내부에는 기본 제품 스타일을 사용한다. */
.sbgridapi-coding-box.pivot-wide .homepage-pivot {
    padding: 12px;
    border-color: #d3d6da;
    border-radius: 3px;
    box-shadow: none;
}

.homepage-pivot .store-pivot .store-pivot-views button,
.homepage-pivot .store-pivot .store-pivot-filters select {
    border-color: #d3d6da;
    border-radius: 3px;
    background: #fff;
    color: #4b535d;
}

.homepage-pivot .store-pivot .store-pivot-views button[aria-pressed="true"] {
    border-color: #aeb5c0;
    background: #eef0f4;
    color: #303742;
    font-weight: 500;
}

.homepage-pivot .store-pivot .store-pivot-views button:focus-visible,
.homepage-pivot .store-pivot .store-pivot-filters select:focus-visible {
    outline-color: #6474ae;
}

.homepage-pivot .store-pivot .store-pivot-filters,
.homepage-pivot .store-pivot .store-pivot-caption {
    color: #737b87;
}