/*
 * ptbwa-ds-components.css
 * PTBWA Design System — 범용 폼 컴포넌트
 *
 * Scope: 전역 (모달 특화 scope 없음). 어떤 화면에서든 사용 가능.
 * Token 참조: --ptbwa-ds-* semantic token만 참조 (계약서 준수).
 * 아키텍처: input 자체가 시각 담당 (DS 컴포넌트 계약 준수).
 *
 * ISSUE-002: spacing token DEFERRED — 임시 px값 사용
 * ISSUE-003: border-radius token DEFERRED — 임시 px값 사용
 * ISSUE-005: motion/transition token DEFERRED — 임시 ms값 사용
 */

/* ===== Input ===== */

.ptbwa-ds-input {
    background: var(--ptbwa-ds-color-surface-white);
    border: 1px solid var(--ptbwa-ds-color-border-default);
    height: 44px;
    padding: 0 16px;
    font-family: var(--ptbwa-ds-font-family-primary);
    font-size: var(--ptbwa-ds-font-size-base);
    font-weight: var(--ptbwa-ds-font-weight-medium);
    line-height: var(--ptbwa-ds-font-lh-base);
    color: var(--ptbwa-ds-color-text-primary);
    border-radius: 8px;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
    width: 100%;
}

.ptbwa-ds-input::placeholder {
    color: var(--ptbwa-ds-color-text-placeholder);
    font-weight: var(--ptbwa-ds-font-weight-regular);
}

.ptbwa-ds-input:focus {
    border-color: var(--ptbwa-ds-color-border-focus);
    outline: 2px solid var(--ptbwa-ds-color-control-focus);
    outline-offset: -1px;
    box-shadow: none;
}

.ptbwa-ds-input.ptbwa-ds-input--error {
    border-color: var(--ptbwa-ds-color-border-error);
    background: var(--ptbwa-ds-color-feedback-danger-bg);
    outline-color: var(--ptbwa-ds-color-feedback-danger);
}

.ptbwa-ds-input.ptbwa-ds-input--error::placeholder {
    color: var(--ptbwa-ds-color-feedback-danger);
}

.ptbwa-ds-input[disabled] {
    background: var(--ptbwa-ds-color-surface-disabled);
    border-color: var(--ptbwa-ds-color-border-disabled);
    color: var(--ptbwa-ds-color-text-disabled);
    cursor: not-allowed;
}

/* ===== Select variant ===== */

.ptbwa-ds-select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.ptbwa-ds-select.ptbwa-ds-input--error:invalid {
    color: var(--ptbwa-ds-color-feedback-danger);
}

.ptbwa-ds-select::-ms-expand {
    display: none;
}

.ptbwa-ds-select-wrapper {
    position: relative;
}

.ptbwa-ds-select-wrapper::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid var(--ptbwa-ds-color-text-muted);
    border-bottom: 1.5px solid var(--ptbwa-ds-color-text-muted);
    transform: translateY(-50%) rotate(45deg);
    pointer-events: none;
}

/* ===== Textarea variant ===== */

.ptbwa-ds-textarea {
    min-height: 94px;
    resize: vertical;
    height: auto;
    padding: 12px 16px;
}

/* ===== Label ===== */

.ptbwa-ds-label {
    display: block;
    font-family: var(--ptbwa-ds-font-family-primary);
    font-size: var(--ptbwa-ds-font-size-sm);
    font-weight: var(--ptbwa-ds-font-weight-regular);
    line-height: var(--ptbwa-ds-font-lh-sm);
    color: var(--ptbwa-ds-color-text-primary);
    margin-bottom: 8px;
}

.ptbwa-ds-label-required {
    color: var(--ptbwa-ds-color-feedback-warning);
    margin-left: 2px;
}

/* ===== Helper ===== */

.ptbwa-ds-helper {
    font-family: var(--ptbwa-ds-font-family-primary);
    font-size: var(--ptbwa-ds-font-size-xs);
    font-weight: var(--ptbwa-ds-font-weight-regular);
    line-height: var(--ptbwa-ds-font-lh-xs);
    color: var(--ptbwa-ds-color-text-muted);
    margin-top: 4px;
}

/* ===== Error ===== */

.ptbwa-ds-error {
    font-family: var(--ptbwa-ds-font-family-primary);
    font-size: var(--ptbwa-ds-font-size-xs);
    font-weight: var(--ptbwa-ds-font-weight-regular);
    line-height: var(--ptbwa-ds-font-lh-xs);
    color: var(--ptbwa-ds-color-feedback-danger);
    margin-top: 4px;
}

.ptbwa-ds-error:empty {
    display: none;
}

/* ===== Checkbox ===== */

.ptbwa-ds-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--ptbwa-ds-color-border-default);
    border-radius: 4px;
    background: var(--ptbwa-ds-color-surface-white);
    cursor: pointer;
    flex: 0 0 auto;
    position: relative;
    transition: all 0.15s ease;
}

.ptbwa-ds-checkbox:checked {
    background: var(--ptbwa-ds-color-control-checked);
    border-color: var(--ptbwa-ds-color-control-checked);
}

.ptbwa-ds-checkbox:checked::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.ptbwa-ds-checkbox:focus-visible {
    outline: 2px solid var(--ptbwa-ds-color-control-focus);
    outline-offset: 2px;
}

.ptbwa-ds-checkbox--error:not(:checked) {
    border-color: var(--ptbwa-ds-color-border-error);
}

/* ===== Responsive ===== */

@media (max-width: 576px) {
    .ptbwa-ds-input {
        height: 48px;
    }
}

/* ===== Chip ===== */

.ptbwa-ds-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 8px;
    font-family: var(--ptbwa-ds-font-family-primary);
    font-size: var(--ptbwa-ds-font-size-xs);
    font-weight: var(--ptbwa-ds-font-weight-medium);
    line-height: var(--ptbwa-ds-font-lh-xs);
    white-space: nowrap;
}

/* 문의 유형 — 회원 (어드민 문의관리용) */
.ptbwa-ds-chip--member-type {
    color: var(--ptbwa-ds-color-chip-member-type-fg);
    background: var(--ptbwa-ds-color-chip-member-type-bg);
}

/* 문의 유형 — 비회원 (어드민 문의관리용) */
.ptbwa-ds-chip--guest-type {
    color: var(--ptbwa-ds-color-chip-guest-type-fg);
    background: var(--ptbwa-ds-color-chip-guest-type-bg);
}

/* 문의 유형 — 문의내역 페이지용 (회원 전용, Blue/400 + Blue/100) */
.ptbwa-ds-chip--inquiry-type {
    color: var(--ptbwa-ds-color-chip-inquiry-type-fg);
    background: var(--ptbwa-ds-color-chip-inquiry-type-bg);
}

/* 답변 상태 — 대기중 */
.ptbwa-ds-chip--status-waiting {
    color: var(--ptbwa-ds-color-chip-status-waiting-fg);
    background: var(--ptbwa-ds-color-chip-status-waiting-bg);
}

/* 답변 상태 — 처리중 */
.ptbwa-ds-chip--status-progress {
    color: var(--ptbwa-ds-color-chip-status-progress-fg);
    background: var(--ptbwa-ds-color-chip-status-progress-bg);
}

/* 답변 상태 — 완료 */
.ptbwa-ds-chip--status-done {
    color: var(--ptbwa-ds-color-chip-status-done-fg);
    background: var(--ptbwa-ds-color-chip-status-done-bg);
}