/* DESIGN.md 제품 UI 기준. opt-in 적용: 기존 전역 스타일을 덮어쓰지 않는다. */
.tr-ui {
    --tr-canvas: #FAF8F3;
    --tr-surface: #FFFFFF;
    --tr-band: #F7F4EC;
    --tr-text: #17171A;
    --tr-muted: #6E665B;
    --tr-accent: #BFA05A;
    --tr-accent-text: #765A25;
    --tr-border: #ECE6D8;
    --tr-body: 16px;
    --tr-label: 14px;
    --tr-title: 20px;
    --tr-space-xs: 4px;
    --tr-space-sm: 8px;
    --tr-space-md: 16px;
    --tr-space-lg: 24px;
    --tr-space-xl: 32px;
    --tr-radius-control: 8px;
    --tr-radius-card: 16px;
    --tr-control-height: 44px;
    color: var(--tr-text);
    font-family: 'Pretendard', -apple-system, sans-serif;
    font-size: var(--tr-body);
    line-height: 1.5;
}
.tr-ui ::selection { background: var(--tr-border); color: var(--tr-text); }
.tr-ui :is(button, input) { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.tr-ui :is(button, input):focus-visible { outline: 2px solid var(--tr-accent-text); outline-offset: 3px; }
.tr-ui.hair-picker-panel { padding: var(--tr-space-lg); border-radius: var(--tr-radius-card); background: var(--tr-band); }
.tr-ui .hair-style-card { border-radius: var(--tr-radius-card); padding: var(--tr-space-md); background: var(--tr-surface); }
.tr-ui .hair-style-name { font-size: var(--tr-title); line-height: 1.4; }
.tr-ui .hair-search-input { font-size: var(--tr-body); min-height: var(--tr-control-height); caret-color: var(--tr-accent-text); }
.tr-ui .hair-search-input::placeholder { color: var(--tr-muted); opacity: 1; }
.tr-ui .hair-search-box { border-radius: var(--tr-radius-control); }
.tr-ui .hair-pick-btn { min-height: var(--tr-control-height); border-radius: var(--tr-radius-control); font-size: var(--tr-label); }
.tr-ui .hair-style-grid { gap: var(--tr-space-md); scrollbar-color: var(--tr-accent) var(--tr-band); }
@media (max-width: 640px) {
    .tr-ui.hair-picker-panel { padding: var(--tr-space-md); }
    .tr-ui .hair-style-card { flex-basis: 100%; min-width: 0; }
}