:root
{
    --bg: #f3f5f7;
    --panel: #ffffff;
    --panel-soft: #f8fafc;
    --menu-active: #dff5f1;
    --menu-active-border: rgba(15, 118, 110, 0.46);
    --menu-active-glow: rgba(15, 118, 110, 0.18);
    --border: #d9e1e8;
    --text: #16202a;
    --text-dim: #5d6b78;
    --accent: #0f766e;
    --accent-hover: #115e59;
    --user-bubble: #dff7f1;
    --ai-bubble: #ffffff;
    --stage-control-bg: #eef4f6;
    --stage-control-inner: #f7fbfa;
    --stage-control-border: #cfdde2;
    --stage-control-shadow: rgba(30, 52, 68, 0.1);
}

*
{
    box-sizing: border-box;
}

[hidden]
{
    display: none !important;
}

body
{
    margin: 0;
    min-height: 100vh;
    font-family: "Segoe UI", "Noto Sans KR", sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at 15% 10%, #d7f3ec, transparent 35%),
        radial-gradient(circle at 85% 20%, #e4eef9, transparent 40%),
        var(--bg);
}

.interface-menu
{
    position: relative;
}

.interface-menu-btn
{
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--text-dim);
    background: transparent;
    cursor: pointer;
}

.interface-menu-btn:hover,
.interface-menu-btn:focus,
.interface-menu-btn[aria-expanded="true"],
.interface-menu-btn.active
{
    border-color: #8bcfc6;
    color: var(--accent-hover);
    background: #eef8f6;
    outline: none;
}

.interface-menu-btn svg
{
    width: 18px;
    height: 18px;
    stroke-width: 2.2;
}

.interface-menu-panel
{
    position: absolute;
    z-index: 25;
    top: calc(100% + 8px);
    right: 0;
    display: grid;
    gap: 6px;
    min-width: 160px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 6px;
    background: var(--panel);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.14);
    transform-origin: top right;
    animation: menu-pop 140ms ease;
}

.interface-menu-panel[hidden]
{
    display: none;
}

.interface-menu-item
{
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    letter-spacing: 0;
    color: #263a36;
    background: transparent;
    cursor: pointer;
    text-align: left;
}

.interface-menu-item:hover,
.interface-menu-item:focus
{
    border-color: #8bcfc6;
    color: var(--accent-hover);
    background: #eef8f6;
    outline: none;
}

.interface-menu-item.active
{
    border-color: #8bcfc6;
    color: #263a36;
    background: #dff7f1;
}

.interface-menu-item::after
{
    content: "OFF";
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    min-height: 18px;
    border: 1px solid #d4dedb;
    border-radius: 5px;
    padding: 0 5px;
    font-size: 10px;
    line-height: 1;
    color: #8a9995;
    background: #f7faf9;
}

.interface-menu-item.active::after
{
    content: "ON";
    border-color: #8bcfc6;
    color: #0f5f56;
    background: #ffffff;
}

.interface-menu-sub-item
{
    position: relative;
    grid-template-columns: 16px minmax(0, 1fr) auto;
    margin-left: 12px;
    width: calc(100% - 12px);
    padding-left: 9px;
    font-size: 11px;
    font-weight: 500;
}

.interface-menu-sub-item::before
{
    content: "";
    position: absolute;
    left: -7px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    border-radius: 999px;
    background: #d6e6e2;
}

.interface-menu-sub-item.active::before
{
    background: #8bcfc6;
}

.interface-menu-sub-item.disabled-look
{
    opacity: 0.45;
}

.interface-menu-sub-item.disabled-look:hover,
.interface-menu-sub-item.disabled-look:focus
{
    opacity: 0.7;
}

.interface-menu-separator
{
    height: 1px;
    margin: 3px 2px;
    background: #d9e5e2;
}

.interface-menu-item svg
{
    width: 16px;
    height: 16px;
    stroke-width: 2.3;
}

@keyframes fade-in
{
    from
    {
        opacity: 0;
        transform: translateY(4px);
    }
    to
    {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes menu-pop
{
    from
    {
        opacity: 0;
        transform: translateY(-4px) scale(0.98);
    }
    to
    {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}