.btn {
    border: none;
    font-weight: 500;
    padding: 0.8rem 1.2rem;
    border-radius: 2rem;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn-grey {
    --pico-background-color: #777777; /* 원하는 빨간색 코드 */
    --pico-border-color: #777777;
    --pico-color: white; /* 텍스트 색상 */

    /* hover, focus 상태 색상 (선택사항 - 약간 더 어둡게) */
    --pico-primary-hover-background: #5E5E5E;
    --pico-primary-hover-border: #5E5E5E;
    border-radius: 2rem;
}

.btn-pink {
    --pico-background-color: #DB687D;
    --pico-border-color: #DB687D;
    --pico-color: white;
    --pico-primary-hover-background: #DB687D;
    --pico-primary-hover-border: #DB687D;
}

.btn-pink:hover {
    opacity: 0.9;
}

.btn-dark-red {
    --pico-background-color: #9B2318;
    --pico-border-color: #9B2318;
    --pico-color: white;
    --pico-primary-hover-background: #9B2318;
    --pico-primary-hover-border: #9B2318;
}

.btn-red {
    --pico-background-color: #D93526;
    --pico-border-color: #D93526;
    --pico-color: white;
    --pico-primary-hover-background: #D93526;
    --pico-primary-hover-border: #D93526;
}

.btn-icon {
    background: none;
    border: none;
    padding: 0;
}

:host(:not([data-theme=dark])), :root:not([data-theme=dark]), [data-theme=light] {
    font-family: "Noto Sans JP", "Noto Sans KR", sans-serif;
    background-color: #FAF4F5;
    --pico-muted-color: #6E3023;
    --pico-color: #6E3023;
    color: var(--pico-color);
}

input, select, textarea {
    color: #6E3023;
}

input::placeholder {
    color: #D4C1BD
}

dialog {
    --pico-modal-overlay-backdrop-filter: blur(0.075rem);
    background: transparent;
}

.menu-modal-article {
    display: flex;
    align-items: center;
    flex-direction: column;
    align-self: end;
    text-align: center;
    margin: 0;
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
    position: relative;
}

.menu-modal-article button.btn-icon {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.menu-modal-article h3 {
    font-size: 1.25rem;
    color: #DB687D;
    font-weight: 700;
    line-height: 1.75rem;
    margin-top: 1rem;
}

.menu-modal-article footer {
    width: 100%;
    border: none;
    background: none;
    display: grid;
    grid-template-columns: 3fr 5fr;
    margin-top: 0;
}

:where(select,textarea):not([readonly]):focus, input:not([type=submit],[type=button],[type=reset],[type=range],[type=file],[readonly]):focus {
    --pico-form-element-focus-color: #DB687D;
    --pico-box-shadow: 0;
}