html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.expression-picker{padding:0;width:min(820px,calc(100vw - 28px));max-height:calc(100dvh - 40px);border:1px solid #fff;border-radius:24px;background:#f5f1fc;color:#251a3b;box-shadow:0 20px 70px #24143c44;overflow:hidden;font-family:Arial,'Noto Sans KR','Malgun Gothic',sans-serif;-webkit-text-size-adjust:100%;text-size-adjust:100%;box-sizing:border-box}
.expression-picker *,.expression-picker *::before,.expression-picker *::after{box-sizing:border-box}
.expression-picker[open]{display:flex;flex-direction:column}
.expression-picker .picker-heading{display:block;flex-shrink:0;height:auto;margin:0;padding:6px 12px 2px;border:0;text-align:center}.picker-title-row{display:flex;justify-content:center;align-items:center}.picker-heading h2{font-size:18px;line-height:1.4;margin:0;white-space:nowrap}.picker-heading .picker-count{font-size:14px;font-weight:650;color:#503575;line-height:1.4;margin:2px 0 0}
.expression-picker .picker-scroll{padding:0 12px 4px;margin:0;overflow-y:auto;overscroll-behavior:contain;min-height:0}.expression-picker #selection{margin-top:4px;gap:8px}.expression-picker #selection>label:not(.select-all-row){font-size:15px;line-height:1.45;min-height:52px;align-items:center}.expression-picker #selection .expression-copy{word-break:keep-all;overflow-wrap:anywhere}
.expression-picker .picker-footer{display:flex;align-items:center;justify-content:center;gap:10px;padding:6px 12px 8px;margin:0;border-top:1px solid #e0d4ed;background:#f5f1fc;flex-shrink:0}
.expression-picker .picker-footer .select-all-row{display:flex;align-items:center;justify-content:center;gap:8px;width:146px;min-height:42px;padding:8px 14px;margin:0;border:1px solid #a977ef;border-radius:14px;background:linear-gradient(140deg,#9858fa,#702ce1);color:#fff;font-size:15px;font-weight:700;white-space:nowrap;cursor:pointer;box-shadow:3px 3px 8px #cab9df}
.expression-picker .picker-done{min-height:40px;min-width:80px;padding:8px 12px;border:1px solid #cbb5e5;border-radius:14px;background:#eee5f8;color:#59348f;font-family:inherit;font-size:13px;font-weight:650;line-height:1.4;cursor:pointer;box-shadow:2px 2px 6px #d2c5df}
.expression-picker input[type=checkbox]{appearance:none;-webkit-appearance:none;display:inline-grid;place-content:center;width:18px;height:18px;min-width:18px;min-height:18px;flex:0 0 18px;margin:0;border:1px solid #9079ac;border-radius:5px;background:#fff;vertical-align:middle;cursor:pointer}.expression-picker input[type=checkbox]:checked,.expression-picker input[type=checkbox]:indeterminate{background:#7839dc;border-color:#7839dc}.expression-picker input[type=checkbox]:checked::before{content:'';width:9px;height:5px;border-left:2px solid white;border-bottom:2px solid white;transform:translateY(-1px) rotate(-45deg)}.expression-picker input[type=checkbox]:indeterminate::before{content:'';width:9px;height:2px;background:#fff;border:0;transform:none}.expression-picker input[type=checkbox]:focus-visible{outline:2px solid #7839dc;outline-offset:3px}.expression-picker .picker-footer input[type=checkbox]{border-color:#fff}
@media(max-width:600px){.expression-picker{max-height:calc(100dvh - 24px);width:calc(100vw - 20px);border-radius:20px}.picker-heading h2{font-size:16px}.expression-picker #selection>label:not(.select-all-row){font-size:14px}}@media(max-width:380px){.expression-picker #selection>label:not(.select-all-row){font-size:13px;padding-left:6px;padding-right:6px}}

.expression-picker .picker-validation{font-size:14px;font-weight:650;color:#9b2452;line-height:1.4;margin:5px 0 2px}.expression-picker .picker-validation[hidden]{display:none}

/* Match the expression grid columns; give initial focus to the title. */
.expression-picker .picker-title-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;text-align:left;align-items:center}
.expression-picker .picker-title-row h2{font-size:20px;line-height:1.4;margin:0;white-space:normal;min-width:0;text-align:left;outline:none}
.expression-picker .picker-title-row .picker-count{grid-column:2;font-size:14px;line-height:1.4;margin:0;min-width:0;text-align:left}
.expression-picker::backdrop{backdrop-filter:none;-webkit-backdrop-filter:none;background:#261a3b70}
.expression-picker{animation:none;transition:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.expression-picker .picker-scroll{scroll-behavior:auto;overflow-anchor:none}
.expression-picker input[type=checkbox]{-webkit-tap-highlight-color:transparent}
@media(min-width:760px){.expression-picker .picker-title-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.expression-picker .picker-title-row h2{font-size:18px}}

.expression-picker .picker-title-row h2,.expression-picker .picker-title-row .picker-count{white-space:nowrap}

.expression-picker-overlay{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:12px 0;background:rgba(38,26,59,.44);isolation:isolate;overflow:hidden;animation:none;transition:none;-webkit-tap-highlight-color:transparent}
.expression-picker-overlay[hidden]{display:none!important}
.expression-picker-overlay .expression-picker{position:relative;margin:0;flex:0 1 auto;max-height:calc(100dvh - 24px);visibility:inherit;contain:layout style;}

/* Static grid metrics avoid measuring/reflow while the popup opens. */
.expression-picker .picker-title-row h2,.expression-picker .picker-title-row .picker-count{padding-left:31px}
.expression-picker-overlay{background:#aaa2b5;isolation:auto}
.expression-picker-overlay .expression-picker{box-shadow:none;contain:none;background:#f5f1fc}
.expression-picker .picker-scroll{contain:none;isolation:auto;will-change:auto;transform:none;filter:none}
.expression-picker #selection>label{background:#f7f3fc;box-shadow:none;transition:none;animation:none}
.expression-picker #selection>label:has(input:checked){background:#eee7f8}
@media(max-width:380px){.expression-picker .picker-title-row h2,.expression-picker .picker-title-row .picker-count{padding-left:30px}}

/* Choice lists are controls, not selectable text. Suppress Android tap/selection paint. */
.expression-picker-overlay,.expression-picker,.expression-picker *{-webkit-tap-highlight-color:rgba(0,0,0,0)!important;-webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none}
.expression-picker::selection,.expression-picker *::selection{background:transparent;color:inherit}
.expression-picker #selection>label,.expression-picker .select-all-row,.expression-picker button{touch-action:manipulation}
.expression-picker .picker-scroll{touch-action:pan-y;overscroll-behavior-y:contain}