:root {
    --bg:#f5f5f5;
    --ink:#222;
    --muted:#555;
    --win-blue:#000080;
    --face:#e6e6e6;
    --bevel-light:#fff;
    --bevel-dark:#c0c0c0;
    --inset:#c0c0c0;
}

* {
    box-sizing:border-box;
    -webkit-font-smoothing: antialiased;
}

html, body {
    height:100%;
    margin:0;
}

body {
    display:flex;
    justify-content:center;
    align-items:center;
    background:#ccc;
    color:var(--ink);
    font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    padding:16px;
}

main.wrap {
    max-width:900px;
    width:90%;
    display:flex;
    flex-direction:column;
    gap:16px;
}

/* 패널 (윈도우98 느낌) */
.panel {
    border:2px outset var(--bevel-dark);
    background:var(--bg);
    padding:10px;
    position:relative;
    box-shadow:0 1px 0 rgba(0,0,0,.04);
}

.note-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:var(--win-blue);
    color:#fff;
    margin:-10px -10px 10px -10px;
    padding:6px 10px;
    font-weight:700;
    font-size:14px;
    line-height:1.2;
}

/* 질문 레이아웃 */
.form-grid {
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
}

.question-block {
    display:flex;
    flex-direction:column;
    font-size:14px;
    color:var(--ink);
}

.question-block label {
    margin-top: 6px;
    margin-bottom:3px;
    font-weight:600;
}

.question-block select {
    border:2px inset var(--inset);
    background:#fff;
    padding:6px 8px;
    font-size:14px;
    font-family:inherit;
    color:#333;
    min-height:32px;
}

/* 버튼 */
.btn {
    background:var(--face);
    border:2px outset var(--bevel-light);
    padding:8px 14px;
    cursor:pointer;
    user-select:none;
    font:inherit;
    line-height:1;
    font-size:14px;
}
.btn:active {
    border:2px inset var(--bevel-dark);
}

.btn[disabled] {
    opacity:.5;
    cursor:wait;
}


/* 결과 */
.result-box {
    border:2px inset var(--inset);
    background:#fff;
    padding:12px;
    font-size:14px;
    white-space:pre-wrap;
    line-height:1.5;
    min-height:120px;
    color:#333;
}

.action-row,
.again-row {
    display:flex;
    justify-content:flex-end;
    margin-top:12px;
}

.btn-row {
    display:flex;
    gap:6px;
    flex-wrap:wrap;
}

/* responsive tweaks */
@media (max-width:480px) {
    .note-header {
        font-size:13px;
        padding:6px 8px;
    }
    .btn {
        width:100%;
        text-align:center;
    }
    .action-row,
    .again-row {
        justify-content:center;
    }
}