/* Native UI examples reuse the existing Hairline ink, surfaces and actual control grammar. */
.ui-card-visual-v30{display:grid;place-items:center;width:100%;height:100%;min-width:0;aspect-ratio:300/180;overflow:hidden;pointer-events:none;background:transparent}
.ui-card-visual-v30>svg{display:block;width:100%;height:100%;max-width:none;margin:0;transform:none!important;filter:none;box-shadow:none}
.ui-card-visual-v30 svg text{font-family:Outfit,Pretendard,sans-serif;letter-spacing:normal;font-weight:400;font-synthesis:none}
.ui-card-visual-v30 svg :is(rect,path,circle,line,ellipse){vector-effect:non-scaling-stroke}
.ui-example-v30{--ui-v30-ink:var(--ink,#242528);--ui-v30-line:var(--line,#ddded9);--ui-v30-muted:var(--muted,#61636a);font-family:Pretendard,sans-serif;font-size:14px;line-height:1.7}
.ui-example-v30 [hidden]{display:none!important}
.ui-example-v30 .ui-v30-instructions{margin:0 0 24px;color:var(--ui-v30-muted);font-size:13px;line-height:1.8;word-break:keep-all;overflow-wrap:anywhere}
.ui-example-v30 .ui-v30-demo{max-width:480px;margin-inline:auto;min-width:0}
.ui-example-v30 :is(.ui-v30-practice,.ui-state-v30-root,.ui-field-v30-root){min-width:0;max-width:100%;overflow-wrap:anywhere}
.ui-example-v30 :is(.ui-practice-stack,.ui-v30-practice){display:flex;flex-direction:column;align-items:stretch;gap:12px}
.ui-example-v30 .ui-practice-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
.ui-example-v30 :is(button,.ui-practice-button){appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;max-width:100%;padding:9px 14px;border:1px solid var(--ui-v30-line);border-radius:0;background:#fff;color:var(--ui-v30-ink);font:inherit;font-size:13px;line-height:1.5;box-shadow:none;cursor:pointer;overflow-wrap:anywhere;touch-action:manipulation}
.ui-example-v30 button:hover{text-decoration:underline;text-underline-offset:4px;background:#fff}
.ui-example-v30 button:disabled{cursor:default;color:#85868a;border-color:#e6e6e2;background:#f6f6f4;text-decoration:none}
.ui-example-v30 :is(button,input,select,textarea,a,[tabindex]):focus-visible{outline:2px solid var(--ui-v30-ink);outline-offset:3px;box-shadow:none}
.ui-example-v30 :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select){display:block;min-width:0;max-width:100%;width:100%;min-height:44px;border:1px solid var(--ui-v30-line);border-radius:0;background:#fff;color:var(--ui-v30-ink);font:inherit;font-size:16px;padding:9px 12px;box-shadow:none}
.ui-example-v30 :is(input,textarea)[readonly]{background:#f8f8f7}
.ui-example-v30 input[type=range]{min-height:44px;max-width:100%;width:100%;accent-color:var(--ui-v30-ink)}
.ui-example-v30 :is(input[type=checkbox],input[type=radio]){flex:none;width:18px;height:18px;min-height:18px;margin:0 8px 0 0;accent-color:var(--ui-v30-ink)}
.ui-example-v30 label{font-size:13px;line-height:1.7}
.ui-example-v30 :is(label:has(input[type=checkbox]),label:has(input[type=radio]),.ui-practice-option){display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer}
.ui-example-v30 .ui-practice-option label{display:flex;align-items:center;min-height:44px;flex:1}
.ui-example-v30 :is(fieldset,figure){min-width:0;max-width:100%;margin:0;padding:12px;border:1px solid var(--ui-v30-line)}
.ui-example-v30 legend{padding:0 5px;font-size:13px}
.ui-example-v30 :is(p,pre,ul,ol,dl){max-width:100%;margin:8px 0;font-size:13px;line-height:1.8}
.ui-example-v30 :is(pre,code){font-family:Outfit,Pretendard,sans-serif;white-space:pre-wrap;overflow-wrap:anywhere}
.ui-example-v30 :is(h3,h4){font-family:Outfit,Pretendard,sans-serif;font-size:16px;line-height:1.5;margin:0 0 12px;letter-spacing:normal}
.ui-example-v30 :is(.ui-practice-result,[data-result]){font-size:12px;color:var(--ui-v30-muted);line-height:1.8;min-height:22px;order:99}
.ui-example-v30 [data-result]:empty{display:none}
.ui-example-v30 a{color:inherit;text-underline-offset:4px;min-height:44px;display:inline-flex;align-items:center;max-width:100%}
.ui-example-v30 :is([role=tablist],[role=toolbar],[role=menubar]){display:flex;flex-wrap:wrap;gap:4px}
.ui-example-v30 [role=tab][aria-selected=true]{border-bottom:2px solid var(--ui-v30-ink)}
.ui-example-v30 :is([role=menu],[role=listbox],[role=tree],[role=treegrid]){padding:8px;border:1px solid var(--ui-v30-line);min-width:0;max-width:100%}
.ui-example-v30 :is([role=option],[role=treeitem],[role=menuitem]){min-height:44px;padding:9px 10px}
.ui-example-v30 :is([role=gridcell],[role=rowheader],[role=columnheader]){min-height:44px;padding:10px 8px}
.ui-example-v30 :is([aria-selected=true],.is-selected){background:#f1f1ed}
.ui-example-v30 table{border-collapse:collapse;width:100%;max-width:100%;font-size:13px;table-layout:fixed}
.ui-example-v30 :is(th,td){border-bottom:1px solid var(--ui-v30-line);padding:7px;overflow-wrap:anywhere;text-align:left}
.ui-example-v30 :is(progress,meter){width:100%;min-width:0;height:24px;accent-color:var(--ui-v30-ink)}
.ui-example-v30 dialog{width:min(420px,calc(100vw - 48px));max-width:calc(100vw - 48px);max-height:calc(100dvh - 48px);overflow:auto;border:1px solid var(--ui-v30-line);border-radius:0;padding:24px;background:#fff;color:var(--ui-v30-ink);font:inherit;box-shadow:none;margin:auto}
.ui-example-v30 dialog::backdrop{background:rgb(35 36 38 / .24)}
.ui-example-v30 dialog button{margin:8px 8px 0 0}
.ui-example-v30 [data-gesture]{border:1px solid var(--ui-v30-line);padding:16px;max-width:100%;min-width:0}
@media(max-width:600px){.ui-example-v30 .ui-v30-instructions{margin-bottom:20px}.ui-example-v30 :is(button,.ui-practice-button){padding-inline:12px}.ui-example-v30 :is(th,td){padding:5px}.ui-example-v30 :is(fieldset,figure){padding:10px}}
@media(prefers-reduced-motion:reduce){.ui-card-visual-v30 *,.ui-example-v30 *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}