/* 워니추니 UI kit v1. All styles are opt-in under .wf-system. */
:where(.wf-system){font-family:"Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif;color:var(--wf-text);font-size:var(--wf-type-body);line-height:1.6;background:var(--wf-canvas)}
:where(.wf-system) :where(*, *::before, *::after){box-sizing:border-box}
:where(.wf-system) :where(button,input,textarea,select){font:inherit;color:inherit}
:where(.wf-system) :where(button){cursor:pointer}
:where(.wf-system) :where(button:disabled,[aria-disabled="true"]){cursor:default}
:where(.wf-system) :where(button,a,input,textarea,select):focus-visible{outline:3px solid var(--wf-selected-text);outline-offset:2px}
:where(.wf-system) :where(h1,h2,h3,p){margin:0}
:where(.wf-system) :where(h1,h2){font-size:var(--wf-type-title);font-weight:600;line-height:1.4}
:where(.wf-system) :where(h3){font-size:var(--wf-type-section);font-weight:600;line-height:1.45}
:where(.wf-system) .wf-muted{color:var(--wf-muted)}
:where(.wf-system) .wf-caption{font-size:var(--wf-type-caption);color:var(--wf-muted);line-height:1.5}
:where(.wf-system) .wf-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:where(.wf-system) .wf-row{display:flex;align-items:center;gap:var(--wf-space-8);flex-wrap:wrap}
:where(.wf-system) .wf-stack{display:flex;flex-direction:column;gap:var(--wf-space-12);min-width:0}
:where(.wf-system) .wf-icon{width:var(--wf-icon);height:var(--wf-icon);display:inline-block;vertical-align:middle;flex-shrink:0;overflow:visible}
:where(.wf-system) .wf-button{min-height:var(--wf-touch);min-width:var(--wf-touch);padding:var(--wf-space-8) var(--wf-space-16);border:1px solid var(--wf-control-border);border-radius:var(--wf-radius-control);background:var(--wf-surface);color:var(--wf-selected-text);font-size:var(--wf-type-button);font-weight:600;line-height:1.4;display:inline-flex;align-items:center;justify-content:center;gap:var(--wf-space-8);overflow-wrap:anywhere;text-align:center}
:where(.wf-system) .wf-button--primary{background:var(--wf-primary);border-color:var(--wf-primary);color:var(--wf-on-primary)}
:where(.wf-system) .wf-button--danger{color:var(--wf-error);border-color:var(--wf-error)}
:where(.wf-system) .wf-button--icon{width:var(--wf-touch);padding:var(--wf-space-8);flex-shrink:0}
:where(.wf-system) .wf-button--plain{border-color:transparent;background:transparent}
:where(.wf-system) .wf-button:not(:disabled):active{background:var(--wf-selected)}
:where(.wf-system) .wf-button--primary:not(:disabled):active{background:var(--wf-primary-pressed);border-color:var(--wf-primary-pressed)}
:where(.wf-system) .wf-button:disabled{color:var(--wf-muted);background:var(--wf-disabled);border-color:var(--wf-control-border)}
:where(.wf-system) .wf-button[aria-busy=true]{cursor:progress}
:where(.wf-system) .wf-button[data-state=pressed]{background:var(--wf-primary-pressed);color:var(--wf-on-primary)}
:where(.wf-system) .wf-button[data-state=focus]{outline:3px solid var(--wf-selected-text);outline-offset:2px}
:where(.wf-system) .wf-spinner{width:18px;height:18px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;flex-shrink:0;animation:wf-spin 900ms linear infinite}
@keyframes wf-spin{to{transform:rotate(360deg)}}
:where(.wf-system) .wf-field{display:flex;flex-direction:column;gap:var(--wf-space-8);font-size:var(--wf-type-label);min-width:0}
:where(.wf-system) :where(.wf-input,.wf-textarea,.wf-select){width:100%;min-width:0;min-height:var(--wf-touch);padding:var(--wf-space-12);border:1px solid var(--wf-control-border);border-radius:var(--wf-radius-control);background:var(--wf-surface);font-size:var(--wf-type-body);line-height:1.5}
:where(.wf-system) .wf-textarea{resize:vertical;min-height:4.5rem}
:where(.wf-system) :where(.wf-input,.wf-textarea)::placeholder{color:var(--wf-muted);font-size:var(--wf-type-label);opacity:1}
:where(.wf-system) :where(.wf-input,.wf-textarea,.wf-select)[aria-invalid=true]{border:2px solid var(--wf-error)}
:where(.wf-system) :where(.wf-input,.wf-textarea,.wf-select):disabled{background:var(--wf-disabled);color:var(--wf-muted)}
:where(.wf-system) .wf-error{color:var(--wf-error);font-size:var(--wf-type-caption)}
:where(.wf-system) .wf-switch{position:relative;min-height:var(--wf-touch);display:flex;align-items:center;justify-content:space-between;gap:var(--wf-space-16);padding:var(--wf-space-8) 0;cursor:pointer}
:where(.wf-system) .wf-switch input{position:absolute;right:0;width:var(--wf-touch);height:var(--wf-touch);opacity:0;margin:0;cursor:pointer}
:where(.wf-system) .wf-switch__track{width:44px;height:26px;border-radius:999px;background:var(--wf-control-border);position:relative;flex-shrink:0;pointer-events:none}
:where(.wf-system) .wf-switch__track::after{content:"";position:absolute;left:4px;top:4px;width:18px;height:18px;border-radius:50%;background:var(--wf-surface)}
:where(.wf-system) .wf-switch input:checked~.wf-switch__track{background:var(--wf-primary)}
:where(.wf-system) .wf-switch input:checked~.wf-switch__track::after{left:22px}
:where(.wf-system) .wf-switch input:focus-visible~.wf-switch__track{outline:3px solid var(--wf-selected-text);outline-offset:3px}
:where(.wf-system) .wf-switch:has(input:disabled){color:var(--wf-muted);cursor:default}
:where(.wf-system) .wf-switch input:disabled{cursor:default}
:where(.wf-system) .wf-choice{display:inline-flex;align-items:center;justify-content:center;gap:var(--wf-space-8);min-height:var(--wf-touch);min-width:var(--wf-touch);padding:var(--wf-space-8);border:1px solid var(--wf-control-border);border-radius:var(--wf-radius-control);background:var(--wf-surface);font-size:var(--wf-type-label);cursor:pointer}
:where(.wf-system) .wf-choice input{width:18px;height:18px;margin:0;accent-color:var(--wf-primary);flex-shrink:0}
:where(.wf-system) .wf-choice:has(input:checked){background:var(--wf-selected);border-color:var(--wf-selected-text)}
:where(.wf-system) .wf-choice:has(input:focus-visible){outline:3px solid var(--wf-selected-text);outline-offset:2px}
:where(.wf-system) .wf-filter{min-width:var(--wf-touch);min-height:var(--wf-touch);display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px;border:1px solid var(--wf-control-border);border-radius:var(--wf-radius-control);background:var(--wf-surface);font-size:var(--wf-type-caption)}
:where(.wf-system) .wf-filter[aria-pressed=true]{background:var(--wf-selected);border-color:var(--wf-selected-text)}
:where(.wf-system) .wf-filter[aria-pressed=false] .wf-profile{filter:grayscale(1)}
:where(.wf-system) .wf-filter .wf-checkmark{height:1rem;color:var(--wf-selected-text)}
:where(.wf-system) .wf-filter[aria-pressed=false] .wf-checkmark{visibility:hidden}
:where(.wf-system) .wf-profile{width:36px;height:36px;object-fit:contain;flex-shrink:0}
:where(.wf-system) .wf-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;background:var(--wf-surface);padding:8px 4px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--wf-divider)}
:where(.wf-system) .wf-tab{min-width:0;min-height:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:0;border-radius:var(--wf-radius-control);background:transparent;color:var(--wf-muted);font-size:var(--wf-type-caption);line-height:1.4;padding:8px 2px;text-align:center;overflow-wrap:anywhere}
:where(.wf-system) .wf-tab[aria-current=page]{background:var(--wf-selected);color:var(--wf-selected-text);font-weight:600}
:where(.wf-system) .wf-tab:disabled{color:var(--wf-muted);background:transparent}
:where(.wf-system) .wf-tab__pending{font-size:var(--wf-type-pending);line-height:1.3}
:where(.wf-system) .wf-card{background:var(--wf-surface);border:1px solid var(--wf-divider);border-radius:var(--wf-radius-card);padding:var(--wf-space-16);min-width:0;overflow-wrap:anywhere}
:where(.wf-system) .wf-card--family{border-left:4px solid var(--wf-primary);background:var(--wf-selected)}
:where(.wf-system) .wf-family-badge{display:grid;grid-template-columns:repeat(2,1fr);width:64px;height:64px;gap:0;position:relative;background:transparent;flex-shrink:0}
:where(.wf-system) .wf-family-badge img{width:32px;height:32px;object-fit:contain}
:where(.wf-system) .wf-family-badge--compact{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;color:var(--wf-primary);background:var(--wf-selected);border-radius:50%}
:where(.wf-system) .wf-family-badge--compact .wf-icon{width:24px;height:24px}
:where(.wf-system) .wf-dot{width:10px;height:10px;flex-shrink:0;background:conic-gradient(var(--wf-family-dad) 0 25%,var(--wf-family-mom) 25% 50%,var(--wf-family-woni) 50% 75%,var(--wf-family-chuni) 75%);border-radius:50%}
:where(.wf-system) .wf-notice{display:flex;align-items:flex-start;gap:var(--wf-space-8);padding:var(--wf-space-12);border:1px solid var(--wf-control-border);border-radius:var(--wf-radius-control);background:var(--wf-surface);color:var(--wf-muted)}
:where(.wf-system) .wf-notice--error{color:var(--wf-error);border-color:var(--wf-error)}
:where(.wf-system) .wf-notice--success{color:var(--wf-success);border-color:var(--wf-success)}
:where(.wf-system) .wf-notice--warning{color:var(--wf-warning);border-color:var(--wf-warning)}
:where(.wf-system) .wf-dialog{width:min(32rem,calc(100% - 2rem));max-height:calc(100dvh - 2rem);padding:var(--wf-space-24);border:1px solid var(--wf-divider);border-radius:var(--wf-radius-dialog);background:var(--wf-surface);color:var(--wf-text);overflow:auto}
:where(.wf-system) .wf-dialog::backdrop{background:rgb(39 36 53 / .35)}
:where(.wf-system) .wf-dialog__head{display:flex;justify-content:space-between;align-items:center;gap:var(--wf-space-8);margin-bottom:var(--wf-space-16)}
:where(.wf-system) .wf-sheet{border:1px solid var(--wf-divider);border-radius:var(--wf-radius-dialog) var(--wf-radius-dialog) 0 0;background:var(--wf-surface);padding:var(--wf-space-16)}
:where(.wf-system) .wf-composer{display:flex;flex-direction:column;gap:var(--wf-space-8)}
:where(.wf-system) .wf-composer__tools{display:flex;gap:var(--wf-space-8);align-items:center;flex-wrap:wrap}
:where(.wf-system) .wf-composer__send{margin-left:auto}
:where(.wf-system) .wf-draft{display:flex;align-items:center;gap:var(--wf-space-8);padding:var(--wf-space-12);border-radius:var(--wf-radius-control);background:var(--wf-selected);overflow-wrap:anywhere}
:where(.wf-system) .wf-draft>span{flex:1;min-width:0}
:where(.wf-system) .wf-empty{display:flex;flex-direction:column;align-items:center;gap:var(--wf-space-8);padding:var(--wf-space-16);color:var(--wf-muted);text-align:center}
:where(.wf-system) .wf-empty img{width:120px;max-width:100%;height:auto}
:where(.wf-system) .wf-filename{overflow-wrap:anywhere}
@media(prefers-reduced-motion:reduce){:where(.wf-system) .wf-spinner{animation:none;border-style:dashed}}
@media(prefers-reduced-motion:no-preference){:where(.wf-system) .wf-switch__track{transition:background-color var(--wf-motion-quick)}}