/**
 * 스냅스 플로우 스타일
 */

html:has(.ps-container),
html:has(.ps-container) body {
    overflow: hidden !important;
    height: 100dvh !important;
    position: fixed !important;
    width: 100% !important;
    touch-action: none !important;
    overscroll-behavior: none !important;
}

.ps-container input,
.ps-container select,
.ps-container textarea {
    font-size: 16px !important;
    touch-action: manipulation !important;
}

.ps-container {
    position: relative !important;
    width: 100% !important;
    height: 100dvh !important;
    overflow: hidden !important;
    background: #000 !important;
}

.ps-snap {
    position: absolute !important;
    inset: 0 !important;
    display: none !important;
    flex-direction: column !important;
}

.ps-snap-active {
    display: flex !important;
}

.ps-snap-bg {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
}

.ps-snap-bg img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top !important;
    display: block !important;
}

.ps-dialogue {
    position: absolute !important;
    bottom: 95px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 20 !important;
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    padding: 30px 24px 24px !important;
    border: none !important;
    border-radius: 10px !important;
    width: 90% !important;
    margin: 0 auto !important;
}

.ps-dialogue::after {
    content: '▼' !important;
    position: absolute !important;
    bottom: 8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-size: 10px !important;
    color: rgba(0, 0, 0, 0.5) !important;
    animation: psBlink 1.2s ease-in-out infinite !important;
    border: none !important;
    background: none !important;
    width: auto !important;
    height: auto !important;
}

@keyframes psBlink {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.ps-dialogue {
    transition: bottom 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ps-dialogue-name {
    position: absolute !important;
    top: -14px !important;
    left: 20px !important;
    display: inline-block !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #fff !important;
    background: #D4850E !important;
    padding: 5px 16px !important;
    border-radius: 14px !important;
    letter-spacing: 0.5px !important;
    margin: 0 !important;
    z-index: 1 !important;
}


.ps-dialogue-text {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #000 !important;
    line-height: 1.8 !important;
    text-align: left !important;
    letter-spacing: -0.2px !important;
}

.ps-actions {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 30 !important;
    display: flex !important;
    gap: 8px !important;
    padding: 16px !important;
    background: linear-gradient(transparent, rgba(0,0,0,0.6)) !important;
}

.ps-actions-drawer {
    position: relative !important;
    background: #fff !important;
    padding: 5px 0 15px !important;
    margin-top: 8px !important;
    border-top: none !important;
}

.ps-btn {
    flex: 1 !important;
    padding: 14px 16px !important;
    border: none !important;
    border-radius: 5px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: opacity 0.2s !important;
    text-decoration: none !important;
}

.ps-btn:active {
    opacity: 0.7 !important;
}

.ps-btn-back {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    flex: 0 0 auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.ps-actions-drawer .ps-btn-back {
    background: #f4f4f5 !important;
    color: #71717a !important;
}

.ps-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0) !important;
    z-index: 22 !important;
    transition: background 0.4s ease !important;
    pointer-events: none !important;
}

.ps-overlay-visible {
    background: rgba(0, 0, 0, 0.5) !important;
}

.ps-drawer {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 25 !important;
    background: #fff !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 12px 20px 0 !important;
    overflow: visible !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ps-drawer-hidden {
    transform: translateY(100%) !important;
}

.ps-drawer-visible {
    transform: translateY(0) !important;
}

/* 스냅스 8: 직업 Swiper freeMode */
.ps-job-swiper {
    overflow: hidden !important;
    touch-action: pan-x !important;
}

.ps-job-swiper .swiper-slide {
    width: auto !important;
}

.ps-option-chip {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 20px !important;
    border: 1px solid #e4e4e7 !important;
    border-radius: 20px !important;
    cursor: pointer !important;
    font-size: 15px !important;
    color: #3f3f46 !important;
    background: #fafafa !important;
    transition: all 0.15s !important;
    white-space: nowrap !important;
    user-select: none !important;
}

.ps-option-chip input {
    display: none !important;
}

.ps-option-chip:has(input:checked) {
    border-color: #191f28 !important;
    background: #191f28 !important;
    color: #fff !important;
    font-weight: 600 !important;
}

.ps-option-chip span {
    pointer-events: none !important;
}

.ps-drawer-handle {
    width: 40px !important;
    height: 4px !important;
    background: #d4d4d8 !important;
    border-radius: 2px !important;
    margin: 0 auto 16px !important;
}

.ps-drawer-content {
    padding-bottom: 8px !important;
}

.ps-field {
    margin-bottom: 16px !important;
}

.ps-label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #191f28 !important;
    margin-bottom: 8px !important;
}

.ps-input {
    width: 100% !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
    border: 1px solid #e4e4e7 !important;
    border-radius: 8px !important;
    background: #fafafa !important;
    outline: none !important;
    color: #191f28 !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.ps-input:focus {
    border-color: #a1a1aa !important;
    background: #fff !important;
}

.ps-select {
    cursor: pointer !important;
}

.ps-label-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 8px !important;
}

.ps-checkbox-label {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    color: #71717a !important;
}

.ps-checkbox-label input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    border-radius: 4px !important;
    border: 1px solid #d4d4d8 !important;
    cursor: pointer !important;
    accent-color: #191f28 !important;
}

.ps-select-disabled {
    opacity: 0.4 !important;
    pointer-events: none !important;
}

.ps-birth-inputs {
    display: flex !important;
    gap: 6px !important;
}

.ps-input-suffix {
    flex: 1 !important;
    position: relative !important;
    min-width: 0 !important;
}

.ps-input-suffix .ps-input {
    padding-right: 28px !important;
    text-align: center !important;
}

.ps-input-suffix .ps-input::-webkit-inner-spin-button,
.ps-input-suffix .ps-input::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.ps-input-suffix .ps-input[type="number"] {
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

.ps-input-error {
    border-color: #f87272 !important;
    background: #fef2f2 !important;
}

.ps-suffix {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 13px !important;
    color: #a1a1aa !important;
    pointer-events: none !important;
}

.ps-calendar-toggle {
    display: flex !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
}

.ps-radio-label {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    color: #3f3f46 !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    border: 1px solid #e4e4e7 !important;
    background: #fff !important;
}

.ps-radio-label input:checked + span {
    font-weight: 600 !important;
    color: #191f28 !important;
}

.ps-radio-label input {
    display: none !important;
}

.ps-radio-label:has(input:checked) {
    border-color: #191f28 !important;
    background: #f4f4f5 !important;
}

.ps-gender-row {
    display: flex !important;
    gap: 8px !important;
}

.ps-gender-option {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 12px !important;
    border: 1px solid #e4e4e7 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-size: 15px !important;
    color: #3f3f46 !important;
    background: #fafafa !important;
    transition: all 0.15s !important;
}

.ps-gender-option input {
    display: none !important;
}

.ps-gender-option:has(input:checked) {
    border-color: #191f28 !important;
    background: #191f28 !important;
    color: #fff !important;
    font-weight: 600 !important;
}

.ps-snap-enter {
    animation: psSlideIn 0.3s ease forwards !important;
}

.ps-snap-exit {
    animation: psSlideOut 0.3s ease forwards !important;
}

@keyframes psSlideIn {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes psSlideOut {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(-30px); }
}

.ps-snap-enter-back {
    animation: psSlideInBack 0.3s ease forwards !important;
}

.ps-snap-exit-back {
    animation: psSlideOutBack 0.3s ease forwards !important;
}

@keyframes psSlideInBack {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes psSlideOutBack {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(30px); }
}

.ps-dialogue-hidden {
    opacity: 0 !important;
    transform: translateY(10px) !important;
    transition: opacity 0.4s ease, transform 0.4s ease !important;
}

.ps-dialogue-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: opacity 0.4s ease, transform 0.4s ease !important;
}

.ps-actions-hidden {
    opacity: 0 !important;
    transform: translateY(8px) !important;
    pointer-events: none !important;
    transition: opacity 0.35s ease, transform 0.35s ease !important;
}

.ps-actions-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    transition: opacity 0.35s ease, transform 0.35s ease !important;
}

.ps-dialogue {
    cursor: pointer !important;
}

/* 옵션 그리드 (연애상태, 직업 등) */
.ps-option-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
}

.ps-option-grid-single {
    grid-template-columns: 1fr !important;
}

.ps-option-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
    border: 1px solid #e4e4e7 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-size: 15px !important;
    color: #3f3f46 !important;
    background: #fafafa !important;
    transition: all 0.15s !important;
    text-align: center !important;
}

.ps-option-item input {
    display: none !important;
}

.ps-option-item:has(input:checked) {
    border-color: #191f28 !important;
    background: #191f28 !important;
    color: #fff !important;
    font-weight: 600 !important;
}

.ps-option-item span {
    pointer-events: none !important;
}