@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap");
body{margin:0;color:#18243b}#design{width:100%}#design *{font-family:"Noto Sans KR",Arial,"Apple SD Gothic Neo","Malgun Gothic",sans-serif}#design>[data-node-id]{min-height:inherit}.preview-link{cursor:pointer}.preview-link:hover{filter:brightness(.96)}.preview-link:focus-visible{outline:3px solid #8cabff;outline-offset:2px}.preview-action{cursor:pointer}.preview-action:focus-visible{outline:3px solid #8cabff}.preview-toast{position:fixed;bottom:24px;left:24px;background:#111b2e;color:white;padding:12px;border-radius:8px;z-index:30;font-size:13px}

/* screen root children sized h-full stretch to the root (Figma fills the frame height) */
#design>[data-node-id]>.h-full{align-self:stretch;height:auto}

/* Figma inside strokes: border drawn on an overlay that takes no space (see postfix.py) */
#design .fx-stroke{border-style:none!important}
#design .fx-stroke::after{content:"";position:absolute;inset:0;border-radius:inherit;border-style:solid;border-color:inherit;border-width:var(--fxb);pointer-events:none}

/* left menu styled like the live admin sidebar; items follow Figma (restyle_menu.py) */
#design .jx-side{width:248px;flex-shrink:0;align-self:stretch;background:#101827;border-right:1px solid #1e293b;color:#cbd5e1;font-size:13px;box-sizing:border-box}
#design .jx-brand{display:flex;align-items:center;gap:12px;height:64px;padding:0 20px;border-bottom:1px solid rgba(255,255,255,.08)}
#design .jx-brand img{width:36px;height:36px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:#fff;padding:6px;object-fit:contain;box-sizing:border-box}
#design .jx-brand p{margin:0}#design .jx-brand .t{font-size:13px;font-weight:700;color:#fff}#design .jx-brand .s{font-size:11px;color:#64748b}
#design .jx-nav{display:flex;flex-direction:column;gap:4px;margin-top:16px;padding:0 12px 80px}
#design .jx-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;font-weight:500;color:#cbd5e1;cursor:pointer;transition:background .15s,color .15s}
#design .jx-item:hover{background:rgba(255,255,255,.06);color:#fff}
#design .jx-item.on{background:#2563eb;color:#fff;box-shadow:0 10px 15px -3px rgba(37,99,235,.3)}
#design .jx-item svg{width:16px;height:16px;flex-shrink:0}#design .jx-item p{margin:0;font-size:13px;line-height:20px}

/* grouped catalog menu (group_menu.py) */
#design .jx-nav{padding-bottom:40px}
#design .jx-group-h{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;font-weight:500;color:#cbd5e1;cursor:pointer;user-select:none}
#design .jx-group-h:hover{background:rgba(255,255,255,.06);color:#fff}
#design .jx-group-h svg{width:16px;height:16px;flex-shrink:0}
#design .jx-group-h span{flex:1;font-size:13px;line-height:20px}
#design .jx-group-h .chev{width:14px;height:14px;transition:transform .15s;opacity:.7}
#design .jx-group.open>.jx-group-h .chev{transform:rotate(180deg)}
#design .jx-group.cur>.jx-group-h{color:#fff}
#design .jx-subs{display:none;margin:2px 0 6px 20px;padding-left:12px;border-left:1px solid rgba(255,255,255,.1)}
#design .jx-group.open>.jx-subs{display:block}
#design .jx-sub{display:block;padding:7px 10px;border-radius:6px;font-size:12px;line-height:18px;color:#94a3b8;cursor:pointer}
#design .jx-sub:hover{background:rgba(255,255,255,.06);color:#fff}
#design .jx-sub.on{background:#2563eb;color:#fff}
#design .jx-note{margin:24px 0 6px;padding:0 12px;font-size:11px;letter-spacing:.04em;color:#64748b}
#design .jx-dev{padding-left:24px}#design .jx-dev>span{font-size:13px;line-height:20px}

/* left menu: keep scrolling but hide the scrollbar */
#design .jx-side,#design .jx-nav{scrollbar-width:none;-ms-overflow-style:none}
#design .jx-side::-webkit-scrollbar,#design .jx-nav::-webkit-scrollbar{display:none}

/* top bar like the live admin (page.js builds .jx-topbar) */
#design .jx-topbar{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px;padding:0 28px!important;background:#fff!important;border-bottom:1px solid #e2e8f0;box-sizing:border-box}
#design .jx-search{position:relative;flex:1;max-width:448px;display:block}
#design .jx-search svg{position:absolute;left:12px;top:50%;width:16px;height:16px;transform:translateY(-50%);color:#94a3b8}
#design .jx-search input{width:100%;height:36px;box-sizing:border-box;padding:0 12px 0 36px;border:1px solid #e2e8f0;border-radius:8px;background:#f8fafc;font-size:14px;color:#0f172a;outline:none}
#design .jx-search input:focus{border-color:#60a5fa;background:#fff;box-shadow:0 0 0 2px rgba(59,130,246,.1)}
#design .jx-tools{display:flex;align-items:center;gap:8px;flex-shrink:0}
#design .jx-tools button{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:32px;border:1px solid #e2e8f0;border-radius:10px;background:#fff;color:#0f172a;cursor:pointer;padding:0}
#design .jx-bell{width:32px}#design .jx-bell svg{width:16px;height:16px}
#design .jx-user{padding:0 8px!important;height:36px!important;border-radius:12px!important;box-shadow:0 1px 2px rgba(15,23,42,.06)}
#design .jx-user .u{width:20px;height:20px;color:#2563eb}#design .jx-user .c{width:14px;height:14px;color:#94a3b8}
#design .jx-tools button:hover{background:#f8fafc}

#design .jx-top{margin-bottom:8px;font-weight:700;background:rgba(30,58,138,.55);color:#bfdbfe}#design .jx-top.on{background:#2563eb;color:#fff}#design .jx-top>span{font-size:13px;line-height:20px}

#design .jx-top{background:transparent;color:#cbd5e1;font-weight:500}#design .jx-top:hover{background:rgba(255,255,255,.06);color:#fff}#design .jx-top.on{background:#2563eb;color:#fff}