/* 탭바 [상담신청]의 상담 방법 시트(시안 [바텀시트/상담신청] 3453:2863) - 탭바가 보이는 폭에서만 열린다. 버튼 색 · 크기는 fstd-button 이 맡는다. */

.consult-method-sheet {
    position: fixed;
    inset: 0;
    z-index: 1000;                     /* 공유 시트 · 상담 폼 .csf 와 같은 층(한 번에 하나만 열린다), 알림 .mdl 1100 아래 */
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;   /* body 직계라 .landing-v2 의 글꼴을 물려받지 못한다 */
}

/* 공유 시트와 같이 숨김을 못 박는다 - 다른 규칙이 display 를 줘도 닫힌 시트가 화면을 덮지 않게. */
.consult-method-sheet[hidden] {
    display: none !important;
}

/* base.css 가 모든 요소의 포커스 윤곽선을 지운다 - 키보드 포커스에서만 되살린다. */
.consult-method-sheet :focus-visible {
    outline: revert;
}

.consult-method-sheet__dim {
    position: absolute;
    inset: 0;
    background-color: var(--fstd-dim-sheet);
    opacity: 0;
    transition: opacity 250ms ease-in;
}

.consult-method-sheet__panel {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: var(--fstd-surface);
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    transition: transform 250ms ease-in;
}

.consult-method-sheet.is-open .consult-method-sheet__dim {
    opacity: 1;
    transition: opacity 300ms ease-out;
}
.consult-method-sheet.is-open .consult-method-sheet__panel {
    transform: none;
    transition: transform 300ms ease-out;
}

.consult-method-sheet__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 24px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px));
}

.consult-method-sheet__title {
    margin: 0;
    color: var(--fstd-fg-heavy);
    font-size: var(--ds-text-xl, 20px);
    font-weight: var(--ds-weight-medium, 500);
    line-height: 28px;
    letter-spacing: -0.4px;
}

.consult-method-sheet__close {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    padding: 6px;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--fstd-fg-muted);
    cursor: pointer;
}

.consult-method-sheet__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px max(16px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}

/* .is-open 규칙까지 적어야 특정도에서 이긴다. */
@media (prefers-reduced-motion: reduce) {
    .consult-method-sheet__dim,
    .consult-method-sheet.is-open .consult-method-sheet__dim,
    .consult-method-sheet__panel,
    .consult-method-sheet.is-open .consult-method-sheet__panel {
        transition: none;
    }
}