:root { --paper:#f6f5f2; --ink:#263b31; --muted:#63716b; --line:#d4d5c9; --surface:#fff; --wash:#eeede9; --accent:#263b31; --danger:#873a32; --radius:8px; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:'Apple SD Gothic Neo','Malgun Gothic',sans-serif; font-size:16px; line-height:1.8; }
a { color:inherit; text-underline-offset:3px; }
button,input { font:inherit; }
button,a,input { touch-action:manipulation; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.5; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
h1,h2,p { margin:0; }
h1 { font-size:32px; font-weight:500; line-height:1.4; margin:12px 0 20px; word-break:keep-all; }
h2 { font-size:20px; font-weight:500; line-height:1.5; margin-bottom:16px; }
p + p { margin-top:16px; }
.topbar { max-width:1440px; margin:auto; padding:28px 32px; display:flex; gap:24px; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.topbar img { display:block; width:150px; height:auto; }
.topbar > span { font-size:12px; }
.brand { flex-shrink:0; }
.public-main { width:min(100%,824px); margin:auto; padding:48px 32px 64px; }
.staff-main { max-width:1440px; margin:auto; padding:40px 32px 64px; }
.page-heading { margin-bottom:32px; }
.page-heading p,.staff-heading p { color:var(--muted); max-width:680px; word-break:keep-all; }
.eyebrow { font-size:12px; letter-spacing:2px; }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:32px; min-width:0; }
.panel.narrow,.login-panel { max-width:480px; margin:32px auto; }
.login-panel p { margin-bottom:24px; }
.field { margin:0 0 24px; padding:0; border:0; min-width:0; }
.field label,.field legend { display:block; padding:0; margin-bottom:8px; font-weight:500; }
.required { margin-left:6px; font-size:12px; font-weight:400; color:var(--muted); }
input:not([type=checkbox]):not([type=radio]):not([type=hidden]) { width:100%; min-height:48px; border:1px solid var(--line); border-radius:5px; padding:10px 12px; background:var(--surface); color:var(--ink); }
input[aria-invalid=true] { border-color:var(--danger)!important; }
.field-error { display:block; font-size:14px; color:var(--danger); margin-top:6px; }
.hint { display:block; color:var(--muted); font-size:12px; line-height:1.7; margin-top:8px; }
.notice { padding:20px; background:var(--wash); margin-bottom:28px; border-radius:5px; }
.notice p { font-size:14px; margin-top:8px; }
.branch-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.branch-option { display:flex!important; align-items:center; gap:10px; padding:14px 12px!important; border:1px solid var(--line); border-radius:5px; font-weight:400!important; cursor:pointer; margin:0!important; }
.branch-option:has(input:checked) { border-color:var(--accent); background:var(--paper); }
input[type=radio],input[type=checkbox] { width:19px; height:19px; flex-shrink:0; accent-color:var(--accent); }
.consent-box { padding:20px; background:var(--paper); border:1px solid var(--line); margin:8px 0 20px; border-radius:5px; }
.consent-box h2 { font-size:16px; }
.consent-box dl { margin:0; display:grid; grid-template-columns:80px minmax(0,1fr); gap:10px 12px; font-size:13px; }
.consent-box dt { font-weight:500; }
.consent-box dd { margin:0; word-break:keep-all; }
.check-label { display:flex; align-items:flex-start; gap:10px; margin-bottom:28px; cursor:pointer; font-size:14px; }
.check-label input { margin:4px 0 0; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:12px; min-height:44px; padding:9px 18px; border:1px solid var(--accent); background:transparent; color:var(--ink); border-radius:5px; font-size:14px; line-height:1.5; text-decoration:none; white-space:nowrap; }
.button.primary,.button.approve { background:var(--accent); color:#fff; }
.button.secondary { border-color:var(--line); background:var(--surface); }
.button:hover { filter:brightness(.95); }
.submit-button { width:100%; }
.text-link { font-size:14px; }
.alert { padding:16px 20px; margin:20px 0; border:1px solid var(--line); background:var(--wash); border-radius:5px; }
.alert.error { border-color:#d5a7a0; color:var(--danger); background:#fff6f4; }
.alert.success { background:#eaf1e9; }
.success-panel h2 { font-size:26px; margin:20px 0; }
.success-panel .button { margin-top:28px; }
.status { display:inline-block; padding:3px 10px; font-size:12px; border-radius:20px; line-height:1.8; white-space:nowrap; }
.status.pending { background:#f4eedc; color:#78632b; }
.status.approved { background:#e4eee3; color:#2d5d37; }
.status.rejected { background:#f6e8e4; color:var(--danger); }
.staff-heading { display:flex; gap:24px; align-items:flex-start; justify-content:space-between; margin-bottom:32px; }
.staff-heading form { padding-top:24px; }
.status-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.status-tabs a { display:flex; align-items:center; gap:10px; text-decoration:none; min-height:44px; border:1px solid var(--line); padding:8px 16px; border-radius:5px; font-size:14px; }
.status-tabs a.selected { color:#fff; background:var(--accent); border-color:var(--accent); }
.status-tabs span { font-size:12px; }
.list-panel { padding:24px; }
.list-toolbar { display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center; margin-bottom:20px; }
.search-form { display:flex; align-items:center; gap:10px; width:min(100%,520px); flex-wrap:wrap; }
.search-form input { flex:1; min-width:160px; }
.list-summary { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:16px; font-size:12px; color:var(--muted); }
.list-summary strong { font-size:16px; color:var(--ink); }
.list-summary a { margin-left:auto; }
.table-scroll { overflow:auto; max-width:100%; }
table { border-collapse:collapse; width:100%; font-size:14px; text-align:left; }
th,td { padding:16px 12px; border-top:1px solid var(--line); vertical-align:top; }
th { font-size:12px; font-weight:500; background:var(--paper); white-space:nowrap; }
td { white-space:nowrap; }
.member-name { font-weight:500; }
.company-cell { min-width:150px; max-width:240px; white-space:normal; overflow-wrap:anywhere; }
.action-form { display:flex; gap:8px; flex-wrap:wrap; min-width:210px; }
.action-form .button { font-size:12px; padding:8px 10px; }
.empty { text-align:center; padding:48px 12px; color:var(--muted); }
.pagination { display:flex; justify-content:center; gap:20px; align-items:center; margin-top:24px; font-size:14px; }
.footer { max-width:1440px; margin:auto; display:flex; gap:24px; flex-wrap:wrap; border-top:1px solid var(--line); padding:24px 32px; font-size:12px; }
.preview-banner { padding:12px 16px; background:#f3e8bf; border-radius:5px; font-size:13px; margin-bottom:24px; }
.skip-link { position:absolute; top:-100px; left:16px; background:var(--surface); padding:12px; z-index:10; }
.skip-link:focus { top:0; }
.honeypot { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
@media(max-width:760px) {
    .topbar { padding:24px; flex-wrap:wrap; gap:12px; }
    .topbar > span { width:100%; }
    .public-main,.staff-main { padding:32px 20px 48px; }
    h1 { font-size:26px; }
    .panel { padding:24px 20px; }
    .branch-options { grid-template-columns:1fr; }
    .branch-option { min-height:48px; }
    .staff-heading { flex-direction:column; gap:16px; }
    .staff-heading form { padding-top:0; }
    .list-panel { padding:20px 12px; }
    .list-toolbar > a { width:100%; }
    .status-tabs a { flex:1 1 120px; padding:8px 10px; justify-content:center; white-space:nowrap; }
    .status-tabs { gap:6px; }
    .consent-box { padding:16px; }
    .consent-box dl { grid-template-columns:1fr; gap:4px; }
    .consent-box dd + dt { margin-top:10px; }
    .list-summary a { margin-left:0; }
    .table-scroll { overflow:visible; }
    table,tbody { display:block; }
    thead { display:none; }
    tbody tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 16px; border-top:1px solid var(--line); padding:20px 4px; }
    td { display:block; white-space:normal; border:0; padding:0; min-width:0; overflow-wrap:anywhere; }
    td[data-label]::before { content:attr(data-label); display:block; font-size:12px; color:var(--muted); margin-bottom:4px; font-weight:400; }
    .member-name { grid-column:1 / -1; font-size:18px; }
    .member-name::before { display:none!important; }
    .company-cell { min-width:0; max-width:none; }
    .actions-cell,.empty { grid-column:1 / -1; }
    .action-form { min-width:0; }
    .action-form .button { flex:1; }

    .footer { padding:24px; gap:12px; }
}
.lookup-entry { margin:24px 0; font-size:14px; }
.receipt-box { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:16px; background:var(--wash); border-radius:5px; margin:20px 0 8px; }
.receipt-number { display:block; font-size:20px; letter-spacing:1px; overflow-wrap:anywhere; }
.receipt-ref { display:block; font-size:12px; color:var(--muted); font-weight:400; }
.button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:28px; }
.success-panel .button-row .button { margin-top:0; }
.member-result h2 { margin-top:20px; }
.result-details { display:grid; grid-template-columns:90px minmax(0,1fr); gap:12px 16px; margin:24px 0; padding-block:20px; border-block:1px solid var(--line); }
.result-details dt { color:var(--muted); font-size:14px; }
.result-details dd { margin:0; overflow-wrap:anywhere; }