.window {
    background: silver;
    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff;
    padding: 3px
}

.title-bar {
    align-items: center;
    background: linear-gradient(90deg, navy, #1084d0);
    display: flex;
    justify-content: space-between;
    padding: 3px 2px 3px 3px
}

.title-bar.inactive {
    background: linear-gradient(90deg, grey, #b5b5b5)
}

.title-bar-text {
    color: #fff;
    font-weight: 700;
    letter-spacing: 0;
    margin-left: 5px;
    font-family: 'DungGeunMo';
    font-size: 12pt;
}

.title-bar-controls {
    display: flex
}

.title-bar-controls button {
    display: block;
    min-height: 14px;
    min-width: 16px;
    padding: 0
}


.status-bar {
    gap: 1px;
    display: flex;
    margin: 0 1px
}

.status-bar-field {
    box-shadow: inset -1px -1px #dfdfdf, inset 1px 1px grey;
    flex-grow: 1;
    margin: 0;
    padding: 2px 3px
}

.window-body {
    margin: 8px;
    font-family: 'DungGeunMo';
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column; /* 요소들을 위아래로 정렬 */
    line-height: 1;
    margin-top: 20px;
    margin-bottom: 20px;
}


fieldset {
    border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='5' height='5' fill='gray' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h5v5H0V2h2v1h1V2H0' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h4v4H0V1h1v2h2V1H0'/%3E%3C/svg%3E") 2;
    margin: 0;
    padding: 10px;
    padding-block-start: 8px
}

legend {
    background: silver
}

.field-row {
    align-items: center;
    display: flex
}

[class^=field-row]+[class^=field-row] {
    margin-top: 6px
}

.field-row>*+* {
    margin-left: 6px
}

.field-row-stacked {
    display: flex;
    flex-direction: column
}

.field-row-stacked *+* {
    margin-top: 6px
}

label {
    align-items: center;
    display: inline-flex
}