@tailwind base;
@tailwind components;
@tailwind utilities;

/* 기본 스타일 */

textarea,
select {
    appearance: none;
    background-color: #1f2937;
    border-color: #4b5563;
    border-width: 1px; /* 기본 border-width */
    border-radius: 0; /* 기본 border-radius */
    padding-top: 0.5rem; /* spacing[2] */
    padding-right: 0.75rem; /* spacing[3] */
    padding-bottom: 0.5rem; /* spacing[2] */
    padding-left: 0.75rem; /* spacing[3] */
    font-size: 1rem; /* baseFontSize */
    line-height: 1.5; /* baseLineHeight */
    --tw-shadow: 0 0 #0000;
}

input[type='text']:focus,
input[type='email']:focus,
input[type='url']:focus,
input[type='password']:focus,
input[type='number']:focus,
input[type='date']:focus,
input[type='datetime-local']:focus,
input[type='month']:focus,
input[type='search']:focus,
input[type='tel']:focus,
input[type='time']:focus,
input[type='week']:focus,
textarea:focus,
select:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgba(37, 99, 235, var(--tw-ring-opacity, 1));
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    border-color: rgba(37, 99, 235, var(--tw-border-opacity, 1));
}

/* Placeholder 스타일 */
input::placeholder,
textarea::placeholder {
    color: rgba(107, 114, 128, var(--tw-text-opacity, 1));
    opacity: 1;
}

/* Select 스타일 */
select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='rgba(107, 114, 128, 1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem; /* spacing[10] */
}

/* Checkbox 및 Radio 스타일 */
input[type='checkbox'],
input[type='radio'] {
    appearance: none;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
    background-origin: border-box;
    user-select: none;
    flex-shrink: 0;
    height: 1rem; /* spacing[4] */
    width: 1rem; /* spacing[4] */
    color: rgba(37, 99, 235, var(--tw-text-opacity, 1));
    background-color: #fff;
    border-color: rgba(107, 114, 128, opacity 0.3);
    border-width: 1px; /* 기본 border-width */
}

/* Checkbox 체크 시 */
input[type='checkbox']:checked {
    border-color: transparent;
    background-color: currentColor;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
}

/* Radio 체크 시 */
input[type='radio']:checked {
    border-color: transparent;
    background-color: currentColor;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E");
}

body{
    background-color: #111827;
    color: #fff;
}