.visually-hidden { position: absolute; left: -9999px; }

:root{
    --bg:#eef2ff; --surface:#fff; --surface-2:#f6f8ff;
    --text:#0d1030; --muted:#4b5485;
    --primary:#4f86ff; --primary-strong:#3b6ef1; --ring:rgba(79,134,255,.35);
    --r-lg:14px; --r-sm:10px;
    --sh-1: 0 1px 2px rgba(17,23,54,.05), 0 2px 4px rgba(17,23,54,.05);
    --sh-2: 0 6px 14px rgba(17,23,54,.08);
    --btn-sh: 0 3px 8px rgba(17,23,54,.12);
    --btn-inset: inset 0 1px rgba(255,255,255,.25);
    --toggle-w:42px; --toggle-h:24px; --toggle-knob:18px; --toggle-pad:3px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
    background:var(--bg); color:var(--text);
    font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Apple SD Gothic Neo,Noto Sans KR,sans-serif;
    line-height:1.45;
}
.shell{ max-width:1200px; margin-inline:auto; padding:16px; }

.topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:8px; }
.brand{ font-weight:800; font-size:18px; letter-spacing:.2px; }
.icon-button{
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; border-radius:12px; cursor:pointer;
    background:linear-gradient(180deg,var(--primary),var(--primary-strong));
    color:#0b1225; box-shadow:var(--btn-sh);
}

#container{
    display:grid;
    grid-template-columns: 1fr min(28rem, 32vw);
    gap:clamp(16px,2vw,24px);
    align-items:start;
    align-content:start;
    padding-top:0;
    min-height:calc(100vh - 140px);
}

#canvas{
    position:relative; overflow:hidden;
    background:#fff;
    border-radius:var(--r-lg); box-shadow:var(--sh-2);
    display:grid; place-items:center; padding:0;
}
#canvas canvas{
    position:relative; z-index:1; display:block; width:auto; height:auto; border-radius:0; outline:none;
}
#canvas.canvas-wrap { background:#fff }

#right.right-col{
    position:sticky; top:16px;
    display:grid; gap:12px;
    align-content:start;
    margin:0;
}

.panel{
    background:var(--surface);
    border-radius:var(--r-lg);
    box-shadow:var(--sh-2);
    border:1px solid rgba(0,0,0,.06);
    padding:16px;
    display:flex; flex-direction:column; gap:14px;
    margin:0;
}
.panel > *{ width:100%; max-width:100%; min-width:0; }

#M2memo,#R2memo{
    font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
    font-size:13px; white-space:pre-wrap; word-break:break-word; margin:0;
}
.divider{ height:1px; background:linear-gradient(90deg,transparent,rgba(0,0,0,.2),transparent); margin:6px 0; }

.actions, .scramble{ display:grid; gap:10px; width:100%; max-width:100%; }
#right button{ width:100%; max-width:100%; }

.field-label{ font-size:12px; color:var(--muted); }
textarea#scrambleInput{
    width:100%; max-width:100%; min-width:0;
    min-height:44px;
    max-height:270px;
    overflow:hidden;
    resize:none;
    padding:10px 12px; background:#fff; color:var(--text);
    border:1px solid rgba(0,0,0,.10); border-radius:var(--r-sm);
    font-family:ui-monospace,"JetBrains Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
    font-size:13px; line-height:1.4; outline:none;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.04);
}
textarea#scrambleInput:focus{
    box-shadow:0 0 0 3px var(--ring), inset 0 1px 2px rgba(0,0,0,.04);
    border-color:var(--primary);
}

.btn, button, .modal-actions > label.secondary{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:12px 14px; font-size:14px; font-weight:700; letter-spacing:.1px;
    color:#0b1225; width:100%; max-width:100%;
    background:linear-gradient(180deg,var(--primary),var(--primary-strong));
    border:0; border-radius:12px; cursor:pointer;
    transition:transform .06s ease, filter .15s ease, box-shadow .15s ease;
    box-shadow:var(--btn-sh), var(--btn-inset);
}
.btn:hover{ filter:brightness(1.02); transform:translateY(-1px); }
.btn:active{ transform:translateY(0); filter:brightness(.98); }
.btn:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--ring), var(--btn-sh); }
button:disabled{ opacity:.6; cursor:not-allowed; }

#bottom.modal{ display:none; }
#settingsOpen:checked ~ #bottom.modal{
    display:grid; position:fixed; inset:0; place-items:center; z-index:50;
}
#bottom .backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.5); }
#bottom .modal-card{
    position:relative; width:min(720px,calc(100vw - 32px));
    background:var(--surface); border:1px solid rgba(0,0,0,.08);
    border-radius:var(--r-lg); box-shadow:var(--sh-2); padding:16px; display:grid; gap:14px; z-index:1;
}
#bottom .modal-head{ display:flex; align-items:center; justify-content:space-between; }
#bottom .modal-head h2{ margin:0; font-size:16px; }
#bottom .close{
    cursor:pointer; width:36px; height:36px; border-radius:8px;
    display:grid; place-items:center; background:rgba(0,0,0,.06); font-size:20px; line-height:1;
}
#bottom .modal-body{ display:grid; gap:12px; }

.toggle{ display:inline-flex; align-items:center; gap:8px; user-select:none; }
.toggle input[type="checkbox"]{
    appearance:none; display:inline-block; width:var(--toggle-w); height:var(--toggle-h);
    border-radius:var(--toggle-h); background:#a8b3db; position:relative; cursor:pointer; outline:none; border:0;
}
.toggle input[type="checkbox"]::before{
    content:""; position:absolute; width:var(--toggle-knob); height:var(--toggle-knob);
    left:var(--toggle-pad); top:calc((var(--toggle-h) - var(--toggle-knob)) / 2);
    border-radius:50%; background:#fff; transition:transform .2s ease; box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.toggle input[type="checkbox"]:checked{ background:var(--primary); }
.toggle input[type="checkbox"]:checked::before{
    transform:translateX(calc(var(--toggle-w) - var(--toggle-knob) - 2*var(--toggle-pad)));
}

.slider-row{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; }
#rotatingSlider{ width:100%; accent-color:var(--primary); }
#sliderValueDisplay{ color:var(--muted); font-size:14px; white-space:nowrap; }

@media screen and (min-width: 981px) {
    #container { grid-template-columns: 1fr min(28rem, 32vw) !important; }
    #right.right-col { position: sticky !important; top: 16px; margin-left:0 !important; margin-right:0 !important; }
    #canvas { margin-left: 0 !important; margin-right: 0 !important; }
}
@media screen and (max-width: 980px) {
    #container { grid-template-columns: 1fr !important; align-content:start; }
    #right.right-col { position: static !important; }
}

:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }