/* 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; }

/* 로그인은 검정 테마, 로컬 회원가입은 기존 밝은 제품 UI 토큰을 사용한다. */
.login-card .tr-ui.signup-benefits,
.login-card .tr-ui.login-header {
    --tr-text: #F5F1E8;
    --tr-muted: rgba(245,241,232,0.7);
    --tr-accent-text: #C5AE79;
    --tr-border: rgba(245,241,232,0.12);
}
.login-header .login-benefits-title {
    margin: var(--tr-space-lg) 0 var(--tr-space-sm);
    color: var(--tr-text);
    font-size: var(--tr-title);
    font-weight: 700;
}
.tr-ui.signup-benefits {
    padding: var(--tr-space-md) 0;
    margin-bottom: var(--tr-space-lg);
    border-top: 1px solid var(--tr-border);
    border-bottom: 1px solid var(--tr-border);
    text-align: left;
}
.signup-benefits .signup-benefits-copy {
    margin: 0;
    color: var(--tr-text);
    font-size: var(--tr-body);
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.signup-benefits .signup-benefits-copy + .signup-benefits-copy { margin-top: var(--tr-space-md); }
.signup-benefits .signup-benefits-free {
    margin: var(--tr-space-lg) 0 0;
    color: var(--tr-text);
    font-size: var(--tr-label);
    font-weight: 500;
}
.signup-benefits .signup-benefits-note {
    margin: var(--tr-space-xs) 0 0;
    color: var(--tr-muted);
    font-size: var(--tr-label);
    word-break: keep-all;
}

.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); }

.tr-ui .staff-extra-role-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tr-space-sm) var(--tr-space-md); margin-bottom: var(--tr-space-sm); }
.tr-ui .staff-extra-role-row label { display: flex; align-items: center; gap: var(--tr-space-sm); min-height: var(--tr-control-height); font-size: var(--tr-label); overflow-wrap: anywhere; }
.tr-ui .staff-extra-role-row label:has(input:disabled) { color: var(--tr-muted); }
.tr-ui.staff-role-change .staff-role-change-controls { display: flex; gap: var(--tr-space-sm); }
.tr-ui.staff-role-change .staff-role-change-controls select { flex: 1; min-width: 0; }
.tr-ui.staff-role-change .staff-role-keep { display: flex; align-items: center; gap: var(--tr-space-sm); min-height: var(--tr-control-height); font-size: var(--tr-label); }
@media (max-width: 640px) {
    .tr-ui .staff-extra-role-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.tr-ui.staff-content-tools { padding: var(--tr-space-lg); margin-bottom: var(--tr-space-lg); background: var(--tr-band); border-radius: var(--tr-radius-card); }
.staff-content-tools h2 { margin: 0 0 var(--tr-space-sm); font-size: var(--tr-title); font-weight: 700; }
.staff-content-tools nav { display: flex; flex-wrap: wrap; gap: var(--tr-space-sm) var(--tr-space-lg); }
.staff-content-tools a { display: inline-flex; align-items: center; min-height: var(--tr-control-height); color: var(--tr-accent-text); font-size: var(--tr-body); text-decoration: underline; text-underline-offset: var(--tr-space-xs); overflow-wrap: anywhere; }
.staff-content-tools a:hover { color: var(--tr-text); }
.staff-content-tools a:focus-visible { outline: 2px solid var(--tr-accent-text); outline-offset: 3px; border-radius: var(--tr-radius-control); }
@media (max-width: 640px) {
    .tr-ui.staff-content-tools { padding: var(--tr-space-md); }
    .staff-content-tools nav { flex-direction: column; gap: var(--tr-space-xs); }
    .tr-ui.hair-picker-panel { padding: var(--tr-space-md); }
    .tr-ui .hair-style-card { flex-basis: 100%; min-width: 0; }
}

/* 공개 카테고리 상단: 결과물 페이지의 제목·설명·여백을 공통으로 사용한다. */
.tr-category-page {
    max-width: 1240px;
    margin: 0 auto;
    padding: 40px var(--sp-6) 60px;
}
.tr-ui.tr-category-header {
    --tr-category-title: 28px;
    --tr-category-description: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tr-space-md);
    margin-bottom: var(--tr-space-lg);
}
.tr-category-header .tr-category-heading { min-width: 0; }
.tr-category-header .tr-category-title {
    margin: 0 0 var(--tr-space-sm);
    font-size: var(--tr-category-title);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: normal;
    color: var(--text-primary);
}
.tr-category-header .tr-category-description {
    margin: var(--sp-3) 0 0;
    color: var(--text-muted);
    font-size: var(--tr-category-description);
    line-height: 1.7;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.tr-category-header .tr-category-controls {
    display: flex;
    align-items: center;
    gap: var(--tr-space-md);
    flex-shrink: 0;
}
@media (max-width: 900px) {
    .tr-category-page { padding: 28px var(--sp-4) var(--sp-12); }
    .tr-ui.tr-category-header { --tr-category-description: 13px; gap: var(--sp-3); }
    .tr-category-header .tr-category-description { margin-top: 10px; }
}
@media (max-width: 640px) {
    .tr-ui.tr-category-header { flex-direction: column; align-items: flex-start; }
    .tr-category-header .tr-category-controls { width: 100%; justify-content: space-between; flex-wrap: wrap; }
}