/* Scoped editorial UI examples. Keep parent card links free of nested controls. */
.ui-example{--uie-line:var(--line,#ddded9);--uie-ink:var(--ink,#232426);--uie-muted:var(--muted,#61636a);box-sizing:border-box;width:100%;min-width:0;background:#fff;color:var(--uie-ink);font-family:var(--font-body,'Pretendard',sans-serif);font-size:14px;line-height:1.6;border:1px solid var(--uie-line);padding:24px;text-align:left;isolation:isolate}
.ui-example *,.ui-example *::before,.ui-example *::after{box-sizing:border-box}
.ui-example [hidden]{display:none!important}
.uie-example-header{display:flex;justify-content:space-between;gap:12px;color:var(--uie-muted);font-size:10px;letter-spacing:.08em;font-family:var(--font-display,'Outfit','Pretendard',sans-serif)}
.uie-title{font-size:18px!important;line-height:1.4!important;font-weight:500!important;letter-spacing:-.025em!important;margin:18px 0 24px!important}
.uie-demo{min-width:0;max-width:480px;margin:auto}
.uie-scope{border-top:1px solid var(--uie-line);padding-top:16px;margin:24px 0 0!important;font-size:11px!important;line-height:1.6!important;color:var(--uie-muted)}
.uie-hint{font-size:12px!important;line-height:1.7!important;color:var(--uie-muted);margin:10px 0!important}
.uie-result{font-size:12px!important;line-height:1.7!important;margin:14px 0 0!important;min-height:21px;color:var(--uie-muted);overflow-wrap:anywhere}
.uie-label{display:block;font-size:12px;font-weight:500;line-height:1.6;margin:0 0 7px}
.uie-input{display:block;max-width:100%;width:100%;border:1px solid var(--uie-line);border-radius:0;background:#fff;color:var(--uie-ink);font:inherit;padding:10px 12px;min-height:44px;box-shadow:none}
.uie-input::placeholder{color:#82848a;opacity:1}
.uie-input[readonly]{background:#f8f8f7}
.uie-button{appearance:none;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:9px 16px;margin:0;border:1px solid var(--uie-line);border-radius:0;background:#fff;color:var(--uie-ink);font:inherit;font-size:12px;line-height:1.5;text-align:center;cursor:pointer;box-shadow:none}
.uie-button:hover{background:#f6f6f4}
.uie-button:disabled{color:#85868a;background:#f6f6f4;cursor:default;border-color:#e6e6e2}
.ui-example :is(button,input,select,[tabindex]):focus-visible{outline:2px solid var(--uie-ink);outline-offset:3px;box-shadow:none}
.uie-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.uie-accordion{border-top:1px solid var(--uie-line)}
.uie-accordion>div{border-bottom:1px solid var(--uie-line)}
.uie-accordion h4{font:inherit;margin:0}
.uie-disclosure{appearance:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;width:100%;padding:12px 4px;background:#fff;border:0;border-bottom:1px solid var(--uie-line);border-radius:0;font:inherit;font-size:13px;color:var(--uie-ink);text-align:left;cursor:pointer}
.uie-accordion .uie-disclosure{border-bottom:0}
.uie-chevron{width:7px;height:7px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);margin:0 6px 4px}
[aria-expanded=true]>.uie-chevron{transform:rotate(225deg);margin-top:5px}
.uie-panel{padding:8px 4px 18px}
.uie-panel p{font-size:13px;line-height:1.8;margin:0}
.uie-panel .uie-label{margin-top:10px}
.uie-notice{border:1px solid var(--uie-line);border-left:3px solid var(--uie-ink);padding:12px;margin:16px 0 0;font-size:12px}
.uie-notice:empty{border:0;padding:0;margin:0}
.uie-dialog{width:min(420px,calc(100vw - 48px));max-height:calc(100dvh - 48px);overflow:auto;border:1px solid var(--uie-line);border-radius:0;padding:28px;background:#fff;color:var(--uie-ink);font-family:var(--font-body,'Pretendard',sans-serif);box-shadow:none;margin:auto}
.uie-dialog::backdrop{background:rgb(35 36 38 / .24)}
.uie-dialog h4,.uie-popover h4{font-size:16px;line-height:1.5;font-weight:500;margin:0 0 12px}
.uie-dialog p{font-size:13px;line-height:1.8;margin:0}
.uie-fieldset{min-width:0;border:0;padding:0;margin:0}
.uie-fieldset legend{font-size:12px;font-weight:500;padding:0;margin-bottom:12px}
.uie-choice{display:flex;align-items:center;gap:10px;min-height:40px;font-size:13px;cursor:pointer}
.uie-choice input{width:17px;height:17px;margin:0;accent-color:var(--uie-ink);flex-shrink:0}
.uie-choice--all{border-bottom:1px solid var(--uie-line);margin-bottom:6px;padding-bottom:8px}
.uie-switch-label{display:flex;align-items:center;gap:12px;font-size:13px;min-height:48px;cursor:pointer}
.uie-switch{appearance:none;position:relative;flex-shrink:0;width:40px;height:24px;border:1px solid #86888d;border-radius:20px;background:#fff;margin:0;cursor:pointer}
.uie-switch::after{position:absolute;content:'';width:14px;height:14px;border:1px solid #86888d;background:#fff;border-radius:50%;top:4px;left:4px}
.uie-switch:checked{background:var(--uie-ink);border-color:var(--uie-ink)}
.uie-switch:checked::after{left:20px;border-color:#fff}
.uie-state{margin-left:auto;color:var(--uie-muted);font-size:12px}
.uie-combobox{position:relative}
.uie-options{position:relative;z-index:2;list-style:none;border:1px solid var(--uie-line);border-top:0;background:#fff;max-height:180px;overflow:auto;padding:0;margin:0}
.uie-options [role=option]{padding:9px 12px;font-size:13px;min-height:40px;cursor:pointer}
.uie-options [role=option]:hover,.uie-options [aria-selected=true]{background:#ededeb;color:var(--uie-ink)}
.uie-listbox{min-height:146px;padding:4px}
.uie-listbox option{padding:8px}
.uie-tooltip-anchor{position:relative;display:inline-flex;padding-top:48px}
.uie-tooltip{position:absolute;bottom:calc(100% - 40px);left:0;white-space:nowrap;max-width:calc(100vw - 96px);background:var(--uie-ink);color:#fff;border:1px solid var(--uie-ink);padding:7px 10px;font-size:11px;z-index:4;pointer-events:auto}
.uie-popover-anchor{position:relative;min-height:48px}
.uie-popover{position:absolute;top:54px;left:0;width:min(340px,100%);padding:18px;border:1px solid #a8a9a5;background:#fff;z-index:3}
.uie-popover-anchor:has(.uie-popover:not([hidden])){min-height:310px}
.uie-popover::before{content:'';position:absolute;width:9px;height:9px;left:24px;top:-5px;background:#fff;border-top:1px solid #a8a9a5;border-left:1px solid #a8a9a5;transform:rotate(45deg)}
.uie-popover-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}
.uie-popover-heading h4{margin:0;font-size:14px}
.uie-popover-heading .uie-button{font-size:10px;padding:6px 10px}
.uie-popover>.uie-button{margin-top:10px}
.uie-app-stage{position:relative;min-height:216px;padding:16px;border:1px solid var(--uie-line);display:flex;flex-direction:column;align-items:flex-start;gap:12px;background:#fff}
.uie-item{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;font-size:13px}
.uie-empty{color:var(--uie-muted);font-size:12px;margin:0}
.uie-snackbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:100%;margin-top:auto;padding:12px;border:1px solid var(--uie-ink);font-size:12px;background:#fff}
.uie-snackbar>span{flex:1 1 130px}
.uie-snackbar .uie-button{border-color:transparent;padding:5px 8px;min-height:44px}
.uie-toast{align-self:flex-end;display:flex;gap:10px;align-items:flex-start;border:1px solid var(--uie-line);border-left:3px solid var(--uie-ink);padding:12px;background:#fff;max-width:100%;font-size:12px}
.uie-toast>span{max-width:210px;overflow-wrap:anywhere}
.uie-toast .uie-button{padding:4px 8px;min-height:44px;font-size:10px}
.ui-example--compact{position:relative;container-type:inline-size;height:100%;min-height:0;aspect-ratio:16/10;display:flex;justify-content:center;align-items:center;padding:0;border:0;pointer-events:none;overflow:hidden}
.uie-mini{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:calc(100% - 48px);max-width:260px;font-size:11px;line-height:1.6;font-weight:400}
.uie-mini b{font-size:11px;font-weight:500}
.uie-mini-stack{display:flex;flex-direction:column;width:100%;gap:7px}
.uie-mini-row{display:flex;justify-content:space-between;align-items:center;gap:18px;border-bottom:1px solid var(--uie-line);padding:7px 0}
.uie-mini-answer{color:var(--uie-muted);font-size:10px;padding:1px 0 6px}
.uie-mini-inset{margin-left:12px;border-left:1px solid var(--uie-line);padding:10px;display:flex;justify-content:space-between;gap:16px}
.uie-mini-box{display:inline-flex;align-items:center;justify-content:flex-start;min-height:29px;padding:6px 10px;border:1px solid var(--uie-line);background:#fff;overflow-wrap:anywhere}
.uie-mini-window{display:flex;flex-direction:column;gap:9px;width:100%;padding:15px;border:1px solid #bcbeb9;background:#fff;font-size:10px}
.uie-mini-actions,.uie-mini-split{display:flex;align-items:center;gap:10px}
.uie-mini-actions{justify-content:flex-end}
.uie-mini-choice{display:flex;gap:9px;align-items:center;padding:2px 0}
.uie-mini-choice i{font-style:normal;display:inline-flex;justify-content:center;align-items:center;border:1px solid #a7a8a5;width:13px;height:13px;font-size:10px;line-height:1}
.uie-mini-radio i{border-radius:50%;font-size:7px}
.uie-mini-switch{display:inline-block;position:relative;flex-shrink:0;width:28px;height:16px;border-radius:14px;background:var(--uie-ink);margin-left:12px}
.uie-mini-switch i{display:block;position:absolute;right:3px;top:3px;background:#fff;border-radius:50%;width:10px;height:10px}
.uie-mini-option{padding:5px 9px;border-bottom:1px solid var(--uie-line)}
.uie-mini-option.is-active{background:#f1f1ef}
.uie-mini-center{align-items:center}
.uie-mini-tip{background:var(--uie-ink);color:#fff;padding:5px 8px;font-size:10px}
.uie-mini-notice{display:flex;justify-content:space-between;gap:8px;border:1px solid var(--uie-line);padding:9px;font-size:9px;line-height:1.6}
.uie-mini-stage{display:flex;position:relative;flex-direction:column;justify-content:center;border:1px solid var(--uie-line);min-height:125px;width:100%;padding:12px;gap:15px}
.uie-mini-bottom{margin-top:auto}
.uie-mini-top{align-self:flex-end;max-width:170px}
.uie-mini-caption{font-size:9px;color:var(--uie-muted)}
.uie-compact-caption{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-size:9px;color:var(--uie-muted);letter-spacing:.02em}
.uie-mini .is-disabled{background:#f7f7f5;color:#8a8b8f}
.uie-mini .is-hint{color:#81838a}
.uie-mini .has-ring{outline:2px solid var(--uie-ink);outline-offset:3px}
.uie-mini-emphasis{align-self:flex-start;border-bottom:1px solid var(--uie-ink);padding-bottom:2px}
@container(max-width:240px){.uie-mini{width:220px;min-width:220px;transform:translate(-50%,-50%) scale(.72)}.uie-compact-caption{bottom:4px;font-size:8px}}
@container(max-width:160px){.uie-mini{width:170px;min-width:170px;transform:translate(-50%,-50%) scale(.48)}.uie-compact-caption{display:none}}
@media(max-width:520px){.ui-example:not(.ui-example--compact){padding:20px 16px}.uie-title{font-size:17px!important}.uie-example-header{font-size:9px}.uie-input{font-size:16px}.uie-dialog{padding:24px}.uie-snackbar{gap:4px;padding:10px}.uie-popover{padding:14px}.uie-item{gap:8px}.uie-actions .uie-button{flex:0 1 auto}}
@media(prefers-reduced-motion:reduce){.ui-example *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media(forced-colors:active){.uie-switch:checked{background:Highlight}.uie-switch:checked::after{background:HighlightText}.uie-options [aria-selected=true]{outline:1px solid Highlight}.uie-mini-option.is-active{outline:1px solid Highlight}}