/* 기본 색상: 이용자 메뉴부터 전체 설정 영역까지 옅은 적색으로 연결한다.
   네 수평 구역은 위에서 아래로 유지하며 목록은 선택상자 밖의 구역 전체 폭에 펼친다. */
:root{--user-ink:#9f3f45;--user-tint:#f7dddf;--user-paper:#fff0ef;--user-edge:#e1b8b8}
body[data-theme=user]{--section-ink:var(--user-ink);--section-tint:var(--user-tint);--section-paper:var(--user-paper);--section-edge:var(--user-edge)}
#tab-user{--tab-ink:var(--user-ink);--tab-tint:var(--user-tint);--tab-edge:var(--user-edge)}
.app-tabs a[aria-disabled=true]{opacity:.48;cursor:default}
#user-screen .user-title{display:flex;align-items:center;justify-content:space-between;gap:8px}
#user-screen h1{color:var(--user-ink);margin:0}
#user-current,.user-active-label{font-size:12px;color:#6d625e}
#user-screen .user-instruction{font-size:12px;color:#6d625e;margin:7px 0 12px}
#user-screen .user-band{padding:12px 10px;background:#fff7f6;border-top:1px solid var(--user-edge)}
#user-screen .user-band:last-of-type{border-bottom:1px solid var(--user-edge)}
#user-screen .user-selected{background:#fce1e1;box-shadow:inset 3px 0 var(--user-ink)}
#user-screen .user-band-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:9px}
#user-screen .user-role{display:flex;align-items:center;gap:6px;min-height:30px}
#user-screen .user-role input{width:18px;height:18px;margin:0;accent-color:var(--user-ink)}
#user-screen .user-number{font-size:11px;color:var(--user-ink)}
#user-screen .user-role strong{font-size:16px;color:var(--user-ink)}
#user-screen .user-policy{font-size:11px;color:#6d625e}
#user-screen .user-coming{font-size:11px;color:var(--user-ink);padding:2px 7px;border:1px solid var(--user-edge);border-radius:4px}
#user-screen .user-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
#user-screen [data-role=broker] .user-fields{grid-template-columns:repeat(3,minmax(0,1fr))}
#user-screen [data-role=institution] .user-fields{grid-template-columns:repeat(3,minmax(0,1fr))}
#user-screen .user-field{display:grid;gap:4px;min-width:0}
#user-screen .user-field-label{font-size:11px;color:#6d625e;font-weight:700}
#user-screen .user-field button{display:flex;align-items:center;justify-content:space-between;gap:4px;min-width:0;width:100%;border:1px solid var(--user-edge);border-bottom-width:3px;border-radius:6px;background:white;color:#173f35;font-size:13px;line-height:1.4;text-align:left;padding:8px;box-shadow:0 2px 3px #9f3f4510}
#user-screen .user-field button span:first-child{overflow-wrap:anywhere}
#user-screen .user-field button[aria-expanded=true]{border-color:var(--user-ink)}
#user-screen .user-options{margin-top:9px;padding:5px;background:white;border:1px solid var(--user-edge);border-radius:7px;box-shadow:0 5px 10px #9f3f4517;max-height:min(44dvh,360px);overflow-y:auto;overscroll-behavior:contain}
#user-screen .user-options-heading{display:flex;align-items:center;justify-content:space-between;color:var(--user-ink);font-size:12px;font-weight:700;padding:4px 5px 7px}
#user-screen .user-options-heading button{min-height:32px;border:0;box-shadow:none;background:white;padding:4px 8px}
#user-screen .user-options .user-option{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:48px;border:0;border-radius:0;border-top:1px solid #f3e8e6;background:white;color:#273831;box-shadow:none;font-size:20px;font-weight:500;line-height:1.4;padding:9px 8px;text-align:left;overflow-wrap:anywhere}
#user-screen .user-options .user-option[aria-pressed=true]{background:#fae9e9;color:var(--user-ink);font-weight:700}
#user-status{font-size:12px;color:var(--user-ink);min-height:18px;margin:12px 0 8px}
#user-screen #user-apply{width:100%;min-height:46px;border-color:#87383c;border-bottom-width:3px;border-radius:6px;background:linear-gradient(#b45458,#94393f);color:white;font-size:15px;box-shadow:0 3px 6px #9f3f4520}
#user-screen .user-footnote{font-size:11px;color:#6d625e;text-align:center;margin:10px 0 0}
.user-profile-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:8px;font-size:12px}
.user-profile-bar a{color:var(--user-ink);font-weight:700}
@media(max-width:420px){.app-tabs{gap:4px;padding-left:6px;padding-right:6px}.app-tabs a{font-size:11px;padding-left:2px;padding-right:2px}.app-tabs .tab-selected-mark{width:.9em;margin-right:.1em}}
@media(max-width:350px){#user-screen .user-band{padding:10px 7px}#user-screen .user-field button{font-size:12px;padding:7px 4px}}

/* 모든 유형은 같은 세 칸을 유지하고 해당하지 않는 설정만 비활성화한다. */
.user-field-inactive{opacity:.5}