/* FC지강2 — white-first responsive design system
   Theme colors are shared by the login, signup and all member/admin views. */
:root{
  color-scheme:light;
  --bg:#ffffff; --surface:#ffffff; --surface-2:#f8fafc; --surface-3:#f2f5f8;
  --header:#ffffff; --navigation:#ffffff;
  --border:#e2e7ef; --line:#edf0f4;
  --text:#192332; --muted:#617085; --faint:#8390a0;
  --gold:#946319; --gold-bright:#b98431; --gold-soft:#fff5e1;
  --input-bg:#ffffff; --btn-bg:#f8fafc; --btn-hover:#eff3f8; --btn-border:#dbe2ea;
  --primary:#1d2c40; --primary-hover:#2e4560; --primary-text:#ffffff;
  --nav-active:#fff5e3; --nav-active-text:#82550d;
  --hero:linear-gradient(112deg,#fff8eb 0%,#f8fafc 62%,#f4f7fb 100%);
  --shadow:0 5px 20px rgba(20,40,70,.045);
  --error:#bb2d38; --link:#1458a2;
  font-family:system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#101723; --surface:#182230; --surface-2:#202d3e; --surface-3:#243144;
  --header:#151e2b; --navigation:#151e2b;
  --border:#344255; --line:#303c4c;
  --text:#f1f5fa; --muted:#bbc7d5; --faint:#95a5bb;
  --gold:#e8bd72; --gold-bright:#f4cd87; --gold-soft:#392d1e;
  --input-bg:#121b28; --btn-bg:#202d3e; --btn-hover:#2c3a4e; --btn-border:#415064;
  --primary:#e8bd72; --primary-hover:#f4cf90; --primary-text:#21190e;
  --nav-active:#392d1e; --nav-active-text:#f4ce8d;
  --hero:linear-gradient(115deg,#302b24 0%,#1d2a3b 65%,#1a2635 100%);
  --shadow:0 12px 28px rgba(0,0,0,.13);
  --error:#ff9ca7; --link:#a8d1ff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{min-height:100vh;margin:0;display:flex;flex-direction:column;background:var(--bg);color:var(--text);font-size:14px;line-height:1.65;transition:background-color .16s,color .16s}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer;transition:background-color .16s,border-color .16s,transform .16s}
button:disabled{opacity:.6;cursor:not-allowed}
:focus-visible{outline:3px solid var(--gold-bright);outline-offset:3px}
.site-header{position:sticky;top:0;z-index:20;background:var(--header);border-bottom:1px solid var(--border)}
.header-inner{width:100%;max-width:1160px;margin:auto;min-height:76px;padding:10px 24px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand img{width:46px;height:46px;object-fit:contain;border-radius:50%;flex-shrink:0}
.brand-name{display:block;white-space:nowrap;line-height:1.2;font-size:20px;font-weight:850;letter-spacing:-.045em}
.brand-sub{display:block;margin-top:4px;color:var(--gold);font-size:10px;font-weight:750;letter-spacing:.09em;white-space:nowrap}
.header-controls,.account-actions{display:flex;align-items:center;gap:10px}
.header-controls{margin-left:auto}
#who{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:650;font-size:12px;color:var(--muted)}
body:not(.signed-in) .account-actions{display:none}
button,.linkbtn{border:1px solid var(--btn-border);border-radius:10px;background:var(--btn-bg);color:var(--text);padding:10px 14px;min-height:44px;line-height:1.4;font-weight:620}
button:hover,.linkbtn:hover{background:var(--btn-hover);border-color:var(--faint)}
button.primary,.linkbtn{background:var(--primary);border-color:var(--primary);color:var(--primary-text);font-weight:760}
button.primary:hover,.linkbtn:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
button.secondary{background:transparent;color:var(--muted);border-color:var(--btn-border)}
.theme-switch{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;font-size:12px;font-weight:720;white-space:nowrap;background:var(--surface);border-color:var(--border)}
.theme-switch:hover{background:var(--surface-2)}
.theme-icon{height:17px;width:17px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-icon-sun{display:none}
html[data-theme="dark"] .theme-icon-sun{display:block}
html[data-theme="dark"] .theme-icon-moon{display:none}
.auth-back{font-size:12px;font-weight:660;color:var(--muted);white-space:nowrap;min-height:44px;display:inline-flex;align-items:center;padding:7px 6px}
.auth-back:hover,.signup-link:hover{color:var(--gold)}
.flash{width:100%;max-width:1100px;margin:14px auto 0;padding:8px 20px;color:var(--gold);text-align:center;font-size:13px}
.flash:empty{display:none}
.flash.error,#signup-feedback.error{color:var(--error)}
.auth-section{width:100%;flex:1;padding:clamp(32px,7vh,76px) 18px 70px}
.auth-main{width:100%;max-width:380px;margin:0 auto}
.auth-intro{text-align:center;margin-bottom:25px}
.auth-eyebrow{font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--gold)}
.auth-intro h1{font-size:clamp(24px,3.2vw,29px);line-height:1.3;font-weight:820;letter-spacing:-.045em;margin:10px 0 8px}
.auth-intro p{font-size:13px;color:var(--muted);margin:0}
.card{border:1px solid var(--border);background:var(--surface);border-radius:16px;padding:22px;margin:0 0 18px;box-shadow:var(--shadow)}
.auth-card{padding:25px 24px}
.auth-card h2{font-size:17px;font-weight:760;margin:0 0 18px;letter-spacing:-.02em}
.form{display:flex;flex-direction:column;gap:14px}
.form-field{display:flex;flex-direction:column;gap:7px}
.form-field label{font-size:12px;color:var(--text);font-weight:700}
.form input,.form textarea,.form select{width:100%;min-width:0;min-height:46px;border:1px solid var(--btn-border);background:var(--input-bg);border-radius:10px;color:var(--text);padding:11px 12px;outline:0;font-size:14px;transition:border-color .15s,box-shadow .15s}
.form input::placeholder,.form textarea::placeholder{color:var(--faint)}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--gold-bright);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold-bright) 16%,transparent)}
.form textarea{min-height:102px;resize:vertical}
.form button.primary{width:100%;margin-top:6px}
.signup-link-wrap{text-align:center;border-top:1px solid var(--line);margin-top:19px;padding-top:13px}
.signup-link{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:12px;font-weight:700;padding:9px 12px;border-radius:8px}
.signup-link::after{content:"›";font-size:19px;line-height:.7}
.form-hint{font-size:12px;line-height:1.7;color:var(--muted);margin:0 0 19px}
#signup-feedback{margin:0;font-size:12px;color:var(--gold);line-height:1.65}
.app-nav{background:var(--navigation);border-bottom:1px solid var(--border)}
#tabs{width:100%;max-width:1160px;margin:auto;display:flex;gap:6px;align-items:center;overflow-x:auto;white-space:nowrap;padding:12px 24px;scrollbar-width:thin;scrollbar-color:var(--faint) transparent;-webkit-overflow-scrolling:touch}
#tabs button{position:relative;flex:0 0 auto;background:transparent;color:var(--muted);border-color:transparent;font-size:13px;font-weight:700;padding:10px 16px;min-height:44px}
#tabs button:hover{background:var(--surface-2);color:var(--text)}
#tabs button.active{background:var(--nav-active);color:var(--nav-active-text);border-color:transparent}
#tabs button.active::after{content:"";position:absolute;left:20px;right:20px;bottom:4px;height:2px;background:var(--gold);border-radius:4px}
.page-content{width:100%;max-width:1100px;margin:0 auto;padding:32px 20px 86px;flex:1}
#app{flex:1}
.page-content>h2{font-size:clamp(23px,3vw,29px);font-weight:820;letter-spacing:-.045em;line-height:1.32;margin:0 0 24px}
.page-content .card h3{font-size:17px;line-height:1.4;font-weight:760;margin:0 0 14px}
.page-content p{overflow-wrap:anywhere}
.page-content .cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.page-content .cols>.card{margin:0}
.hero{display:flex;align-items:center;gap:28px;border:1px solid var(--border);border-radius:18px;background:var(--hero);padding:30px 35px;margin-bottom:21px;min-height:200px}
.hero img{width:132px;max-width:34%;aspect-ratio:1;object-fit:contain;flex-shrink:0}
.hero h3{font-size:clamp(25px,4vw,34px)!important;line-height:1.24;letter-spacing:-.055em;font-weight:850!important;margin:0 0 8px!important}
.hero p{font-size:13px;margin:6px 0;color:var(--muted)}
.item{border-bottom:1px solid var(--line);padding:13px 1px;overflow-wrap:anywhere}
.item:last-child{border-bottom:0;padding-bottom:0}
.item small{display:block;color:var(--muted);font-size:12px;margin-top:5px}
.item .actions,.actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:12px}
.actions>button,.actions>.linkbtn{min-height:44px}
.pre{white-space:pre-wrap;overflow-wrap:anywhere}
.muted,.small{color:var(--muted)}
.small{font-size:12px}
.page-content a[href^="tel:"]{color:var(--link);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.site-footer{border-top:1px solid var(--line);color:var(--faint);padding:20px 14px;text-align:center;font-size:11px;letter-spacing:.04em;margin-top:auto}
@media(max-width:760px){
 .header-inner{min-height:67px;padding:9px 16px;gap:11px}
 .brand img{width:40px;height:40px}
 .brand-name{font-size:17px}
 .brand-sub{font-size:9px}
 .header-controls,.account-actions{gap:7px}
 #who{max-width:95px;font-size:11px}
 #tabs{padding:9px 13px;gap:3px}
 #tabs button{padding:10px 14px;font-size:13px;min-height:46px}
 .page-content{padding:25px 15px 64px}
 .page-content .cols{grid-template-columns:1fr;gap:14px}
 .page-content .cols>.card{margin:0}
 .page-content .card{padding:19px}
 .hero{gap:17px;padding:23px;min-height:160px}
 .hero img{width:95px;max-width:32%}
 .hero h3{font-size:25px!important}
 .auth-section{padding:43px 16px 60px}
 .auth-main{max-width:380px}
}
@media(max-width:520px){
 .theme-switch{padding:9px 10px;min-height:44px;min-width:44px}
 .theme-switch [data-theme-label]{display:none}
 .brand-sub{font-size:8px}
 #logout{padding:8px 10px;font-size:12px;min-height:44px}
 .auth-back{font-size:11px}
}
@media(max-width:390px){
 .header-inner{padding:10px 12px}
 .brand{gap:7px}
 .brand img{width:34px;height:34px}
 .brand-name{font-size:16px}
 .brand-sub{letter-spacing:0}
 #who{display:none}
 .auth-section{padding:30px 12px 50px}
 .auth-card{padding:22px 18px}
 .hero{padding:17px;gap:12px}
 .hero img{width:72px}
 .hero h3{font-size:22px!important}
 .hero p{font-size:12px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}


/* Dashboard navigation and clear administrative form labels */
.field-label{display:block;color:var(--text);font-size:12px;font-weight:700;margin-bottom:6px}
.hero-eyebrow{font-size:11px;letter-spacing:.13em;font-weight:800;color:var(--gold);margin-bottom:12px}
.quick-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:18px}
.quick-actions button{min-height:42px;font-size:13px;padding:9px 14px}
.card-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.card-heading h3{margin:0!important}
.text-action{background:transparent!important;border:0!important;color:var(--link)!important;min-height:40px;font-size:12px;font-weight:760;padding:8px 4px;white-space:nowrap}
.text-action:hover{text-decoration:underline}
.empty-state{margin:0;padding:16px 2px;color:var(--muted);font-size:13px}
@media(max-width:390px){.hero-eyebrow{font-size:9px;letter-spacing:.035em}.quick-actions{gap:7px}.quick-actions button{padding:9px 11px}}

/* Member administration — super-admin-only, mobile-first */
.member-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 17px}
.member-stat{border:1px solid var(--border);background:var(--surface);border-radius:14px;padding:14px 17px;min-width:0;box-shadow:var(--shadow)}
.member-stat span{display:block;color:var(--muted);font-size:12px;font-weight:650}
.member-stat strong{display:block;color:var(--text);font-size:26px;line-height:1.5;font-weight:850;font-variant-numeric:tabular-nums}
.member-privacy-note{margin:0 0 17px;font-size:12px;line-height:1.7}
.member-searchbar{display:flex;align-items:center;gap:11px;margin-bottom:15px}
.member-searchbar input,.member-searchbar select,.member-fields select{min-height:46px;min-width:0;padding:10px 13px;background:var(--input-bg);color:var(--text);border:1px solid var(--btn-border);border-radius:10px;font:inherit}
.member-searchbar input{flex:1 1 250px;width:100%}
.member-searchbar select{flex:0 1 175px;width:175px}
.member-admin-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;align-items:start}
.member-admin-list>.card{margin:0}
.member-admin-card{min-width:0}
.member-card-head{display:flex;justify-content:space-between;align-items:start;gap:12px;border-bottom:1px solid var(--line);padding-bottom:16px}
.member-card-head h3{font-size:19px!important;margin:0 0 6px!important;line-height:1.4}
.member-status-pill,.member-role-badge{display:inline-flex;align-items:center;border-radius:6px;padding:3px 8px;font-size:11px;font-weight:750}
.member-status-pill{background:var(--surface-3);color:var(--muted)}
.member-status-pill.status-approved{color:#116440;background:#e5f7ee}
.member-status-pill.status-pending{color:#83520c;background:#fff2d7}
.member-status-pill.status-rejected,.member-status-pill.status-disabled{color:#9a3e49;background:#ffedf0}
html[data-theme="dark"] .status-approved{background:#163a2e;color:#82dfb2}
html[data-theme="dark"] .status-pending{background:#3b2b16;color:#f2c37b}
html[data-theme="dark"] .status-rejected,html[data-theme="dark"] .status-disabled{background:#442631;color:#ffb4be}
.member-role-badge{background:var(--surface-3);border:1px solid var(--border);color:var(--muted);white-space:nowrap}
.member-personal-info{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 14px;margin:16px 0}
.member-personal-info div{min-width:0}
.member-personal-info dt{font-size:11px;font-weight:650;color:var(--muted)}
.member-personal-info dd{font-size:13px;font-weight:730;margin:3px 0 0;overflow-wrap:anywhere;min-height:22px}
.member-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin:0 0 16px}
.member-fields .form-field{min-width:0}
.member-fields select{width:100%;font-size:13px}
.role-locked{display:flex;align-items:center;min-height:45px;font-size:12px;color:var(--muted);font-weight:650}
.member-permission-header{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:13px;font-weight:780;margin:0 0 10px}
.member-permission-header small{color:var(--muted);font-weight:500;font-size:11px}
.permission-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.permission-option{display:flex;align-items:center;gap:9px;border:1px solid var(--border);border-radius:9px;padding:10px 11px;min-width:0;min-height:44px;font-size:12px;font-weight:650;cursor:pointer;background:var(--surface-2)}
.permission-option:has(input:checked){border-color:var(--gold-bright);background:var(--gold-soft)}
.permission-option:has(input:disabled){cursor:not-allowed;opacity:.5}
.permission-option input{width:17px;height:17px;margin:0;flex:0 0 17px;accent-color:var(--gold);cursor:inherit}
.permission-option span{overflow-wrap:anywhere}
.member-card-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;border-top:1px solid var(--line);padding-top:17px;margin-top:18px}
.member-card-actions button{font-size:12px;min-height:44px}
.member-note{font-size:12px;color:var(--muted);padding:11px 0}
.member-searchbar input:focus,.member-searchbar select:focus,.member-fields select:focus{outline:3px solid var(--gold-soft);border-color:var(--gold-bright)}
@media(max-width:840px){.member-admin-list{grid-template-columns:1fr}}
@media(max-width:520px){
 .member-summary{gap:7px}
 .member-stat{padding:11px 12px}
 .member-stat span{font-size:10px}
 .member-stat strong{font-size:21px}
 .member-searchbar{flex-direction:column;align-items:stretch;gap:9px}
 .member-searchbar input,.member-searchbar select{width:100%;flex:auto}
 .member-admin-card{padding:17px!important}
 .member-personal-info{grid-template-columns:repeat(2,minmax(0,1fr))}
 .member-fields{gap:9px}
 .member-card-actions{justify-content:stretch}
 .member-card-actions button{flex:1 1 auto}
}


/* Compact membership directory: one person per row, expand to edit. */
.member-list{border:1px solid var(--border);border-radius:14px;background:var(--surface);overflow:hidden}
.member-list-header,.member-list-summary{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1.12fr) minmax(0,.85fr) minmax(0,.93fr) minmax(0,.82fr) 78px;
  gap:12px;align-items:center;
}
.member-list-header{
  background:var(--surface-2);border-bottom:1px solid var(--border);
  padding:12px 18px;font-size:11px;color:var(--muted);font-weight:750;
}
.member-list-entry{display:block;border-bottom:1px solid var(--line);min-width:0}
.member-list-entry:last-child{border-bottom:0}
.member-list-entry[hidden]{display:none!important}
.member-list-summary{
  cursor:pointer;list-style:none;padding:13px 18px;
  min-height:62px;transition:background-color .13s;
}
.member-list-summary::-webkit-details-marker{display:none}
.member-list-summary::marker{display:none}
.member-list-summary:hover,.member-list-entry[open]>.member-list-summary{background:var(--surface-2)}
.member-list-summary:focus-visible{outline:3px solid var(--gold-bright);outline-offset:-3px}
.member-cell{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.member-name{font-weight:800;font-size:14px;color:var(--text)}
.member-phone,.member-date{color:var(--muted);font-variant-numeric:tabular-nums}
.member-role,.member-status{overflow:visible}
.member-role-badge,.member-status-pill{max-width:100%;white-space:nowrap}
.member-expand{text-align:right;font-size:12px;font-weight:780;color:var(--link);white-space:nowrap}
.member-expand-arrow{display:inline-block;font-size:17px;margin-left:3px;transition:transform .15s}
.member-list-entry[open] .member-expand-arrow{transform:rotate(180deg)}
.member-expanded{border-top:1px solid var(--line);padding:20px 22px 22px;background:var(--surface-2)}
.member-expanded-heading{font-size:14px;font-weight:800;margin-bottom:13px;color:var(--text)}
.member-expanded .member-personal-info{grid-template-columns:repeat(4,minmax(0,1fr));margin:0 0 18px}
.member-expanded .member-fields{max-width:580px}
.member-expanded .permission-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.member-expanded .permission-option{background:var(--surface)}
.member-expanded .member-card-actions{justify-content:flex-end}
@media(max-width:900px){
  .member-list-header,.member-list-summary{gap:8px;padding-left:13px;padding-right:13px}
  .member-list-header{font-size:10px}
  .member-name{font-size:13px}
  .member-cell{font-size:11px}
  .member-role-badge,.member-status-pill{font-size:10px;padding:3px 5px}
  .member-expanded .permission-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
  .member-list-header{display:none}
  .member-list-summary{
    grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 58px;
    grid-template-rows:auto auto;
    gap:4px 8px;
    min-height:76px;padding:12px 14px;
  }
  .member-name{grid-column:1;grid-row:1;font-size:14px}
  .member-phone{grid-column:1;grid-row:2;font-size:12px}
  .member-role{grid-column:2;grid-row:1}
  .member-status{grid-column:2;grid-row:2}
  .member-date{display:none}
  .member-expand{grid-column:3;grid-row:1/span 2;align-self:center;text-align:right;font-size:11px}
  .member-expanded{padding:17px 14px 19px}
  .member-expanded .member-personal-info{grid-template-columns:repeat(2,minmax(0,1fr))}
  .member-expanded .permission-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .member-expanded .member-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:390px){
  .member-list-summary{padding:12px 10px;grid-template-columns:minmax(0,1fr) minmax(0,.95fr) 48px;gap:4px}
  .member-phone{font-size:11px}
  .member-expanded .permission-option{font-size:11px;padding:9px 8px}
}

/* Emergency contacts: desktop 2 columns, mobile readable horizontal rows */
.contacts-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;align-items:stretch;width:100%;min-width:0}
.contact-heading,.contact-entry{
 display:grid;grid-template-columns:24px minmax(45px,.75fr) minmax(80px,1.15fr) minmax(92px,1.35fr) 84px;
 align-items:center;gap:5px;min-width:0;padding:9px 10px
}
.contact-heading{min-height:42px;background:var(--surface-2);color:var(--muted);border:1px solid var(--border);border-radius:9px;font-size:11px;font-weight:760;text-align:center}
.contact-entry{min-height:62px;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:9px;transition:background-color .15s}
.contact-entry:hover{background:var(--surface-2)}
.contact-heading span,.contact-entry>span{min-width:0}
.contact-heading span{text-align:center;white-space:nowrap}
.contact-no{font-size:12px;color:var(--faint);font-weight:750;text-align:center;font-variant-numeric:tabular-nums}
.contact-name{font-size:13px;font-weight:800;overflow-wrap:anywhere;text-align:center}
.contact-birth,.contact-phone{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:center}
.contact-action{text-align:center}
.contact-call{display:inline-flex;align-items:center;justify-content:center;gap:4px;width:100%;min-height:44px;padding:8px 5px;border:1px solid var(--btn-border);border-radius:9px;background:var(--btn-bg);color:var(--link);font-size:11px;font-weight:800;white-space:nowrap;transition:background-color .15s,border-color .15s;text-decoration:none!important}
.contact-call:hover{background:var(--btn-hover);border-color:var(--gold-bright)}
.contact-call:focus-visible{outline:3px solid var(--gold-bright);outline-offset:2px}
.contact-call svg{width:14px;height:14px;flex-shrink:0}
.contact-call-short{display:none}
.contact-unavailable{font-size:11px;color:var(--faint)}
.contacts-empty{padding:28px 16px;text-align:center;color:var(--muted);border:1px solid var(--border);border-radius:12px;font-size:13px}
@media(max-width:1060px){
 .contacts-grid{grid-template-columns:minmax(0,1fr);gap:7px}
 .contact-heading:nth-child(2){display:none}
 .contact-heading,.contact-entry{grid-template-columns:40px minmax(62px,1fr) minmax(104px,1fr) minmax(118px,1.2fr) 102px}
}
@media(max-width:600px){
 .contacts-grid{grid-template-columns:minmax(0,1fr);gap:5px}
 .contact-heading{display:grid;min-height:39px;font-size:10px}
 .contact-heading:nth-child(2){display:none}
 .contact-heading,.contact-entry{
  grid-template-columns:22px minmax(40px,.75fr) minmax(76px,1.15fr) minmax(92px,1.35fr) 65px;
  grid-template-rows:auto;gap:4px;padding:8px 6px
 }
 .contact-entry{min-height:59px}
 .contact-name{font-size:12px}
 .contact-birth,.contact-phone{font-size:10.5px}
 .contact-no{font-size:11px}
 .contact-call{min-height:42px;padding:7px 2px;font-size:11px}
 .contact-call svg{width:13px;height:13px}
 .contact-call-text{display:none}
 .contact-call-short{display:inline}
}
@media(max-width:365px){
 .contact-heading,.contact-entry{
  grid-template-columns:18px minmax(32px,.65fr) minmax(68px,1.25fr) minmax(77px,1.4fr) 51px;
  gap:3px;padding:7px 5px
 }
 .contact-heading{font-size:9px}
 .contact-no,.contact-name{font-size:10px}
 .contact-birth,.contact-phone{font-size:9.5px;letter-spacing:-.025em}
 .contact-call{font-size:10px;gap:2px}
 .contact-call svg{width:11px;height:11px}
}

/* Notice board 2026 — list, pinned notice, detail and editor */
.notice-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.notice-toolbar strong{font-weight:850;font-size:15px}
.notice-toolbar-desc{color:var(--muted);font-size:12px;margin-left:12px}
.notice-write{font-size:13px;padding:10px 20px;white-space:nowrap}
.notice-search{display:flex;align-items:center;gap:9px;margin-bottom:16px;flex-wrap:wrap}
.notice-search>input[type=search]{
 flex:1 1 230px;min-width:0;min-height:44px;
 background:var(--input-bg);color:var(--text);
 border:1px solid var(--btn-border);border-radius:10px;
 padding:10px 13px;font:inherit;
}
.notice-search>input[type=search]:focus{outline:3px solid var(--gold-soft);border-color:var(--gold-bright)}
.notice-pin-filter{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);white-space:nowrap;cursor:pointer;padding:8px 3px}
.notice-pin-filter input,.notice-pin-choice input{width:18px;height:18px;accent-color:var(--gold);flex-shrink:0}
.notice-search>button{white-space:nowrap;min-width:69px}
.notice-table-frame{border:1px solid var(--border);border-radius:13px;background:var(--surface);overflow:hidden}
.notice-table{width:100%;border-collapse:collapse;table-layout:fixed}
.notice-table th,.notice-table td{border-bottom:1px solid var(--line);padding:16px 12px;text-align:center;font-size:13px}
.notice-table thead th{background:var(--surface-2);color:var(--muted);font-weight:750;font-size:12px;padding:13px 12px}
.notice-table tbody tr:last-child td{border-bottom:0}
.notice-table th:nth-child(1),.notice-table td:nth-child(1){width:75px}
.notice-table th:nth-child(2),.notice-table td:nth-child(2){width:50%;text-align:center}
.notice-table th:nth-child(3),.notice-table td:nth-child(3){width:110px}
.notice-table th:nth-child(4),.notice-table td:nth-child(4){width:130px}
.notice-table tbody tr:not(.notice-pinned-row):hover{background:var(--surface-2)}
.notice-table tbody tr.notice-pinned-row{background:var(--gold-soft)}
.notice-table tbody tr.notice-pinned-row td:first-child{box-shadow:inset 3px 0 0 var(--gold)}
.notice-table tbody tr.notice-pinned-row:hover{filter:brightness(.985)}
html[data-theme="dark"] .notice-table tbody tr.notice-pinned-row:hover{filter:brightness(1.08)}
.notice-no{font-size:12px!important;color:var(--muted)}
.notice-no-important{color:var(--gold);font-weight:800}
.notice-title{
  display:inline-flex;align-items:center;justify-content:flex-start;gap:8px;
  width:100%;max-width:100%;min-height:30px;padding:0;
  border:0;background:none!important;text-align:left;
  color:var(--text);font-size:14px;font-weight:660;
}
.notice-title>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notice-title:hover>span:last-child{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.notice-pinned-row .notice-title{font-weight:830}
.notice-pin-badge{display:inline-flex;align-items:center;flex-shrink:0;white-space:nowrap;border:1px solid var(--gold-bright);border-radius:5px;padding:3px 7px;background:var(--gold-soft);color:var(--gold);font-size:11px;font-weight:850;line-height:1.3}
.notice-pinned-row .notice-pin-badge{background:var(--surface);border-color:var(--gold-bright)}
.notice-author,.notice-date{color:var(--muted);font-size:12px!important;font-variant-numeric:tabular-nums}
.notice-empty{padding:52px 12px!important;color:var(--muted)!important;text-align:center!important;font-size:13px!important}
.notice-pager{display:flex;justify-content:center;align-items:center;gap:5px;margin-top:22px}
.notice-pager button{min-height:40px;min-width:40px;padding:9px;border-radius:9px;font-size:13px}
.notice-pager button.current{background:var(--primary);border-color:var(--primary);color:var(--primary-text)}
.notice-detail{border:1px solid var(--border);border-radius:14px;background:var(--surface);overflow:hidden}
.notice-detail-header{background:var(--surface-2);padding:23px 24px;border-bottom:1px solid var(--border)}
.notice-detail-header .notice-pin-badge{margin-bottom:12px}
.notice-detail-header h3{font-size:21px!important;line-height:1.45;letter-spacing:-.025em;font-weight:850!important;margin:0 0 14px!important;overflow-wrap:anywhere}
.notice-detail-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 22px;color:var(--muted);font-size:12px}
.notice-detail-body{padding:30px 25px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.85;font-size:14px;min-height:240px}
.notice-detail-actions,.notice-editor-actions{display:flex;justify-content:flex-end;gap:9px;flex-wrap:wrap;margin-top:18px}
.notice-danger{color:var(--error);border-color:color-mix(in srgb,var(--error) 25%,var(--border));background:transparent}
.notice-danger:hover{color:var(--error);border-color:var(--error);background:var(--surface-2)}
.notice-editor-card{border:1px solid var(--border);background:var(--surface);border-radius:14px;padding:25px}
.notice-editor-card .form-field{gap:7px}
.notice-editor-card .form input{min-height:46px}
.notice-editor-card .form textarea{min-height:320px;line-height:1.7;resize:vertical}
.notice-editor-card .form button.primary{width:auto;min-width:130px;margin-top:0}
.notice-pin-choice{display:flex;align-items:flex-start;gap:11px;background:var(--gold-soft);border:1px solid var(--border);padding:14px 15px;border-radius:10px;cursor:pointer}
.notice-pin-choice input{margin-top:2px}
.notice-pin-choice b{display:block;font-size:13px;color:var(--text)}
.notice-pin-choice small{display:block;font-size:12px;color:var(--muted);margin-top:4px;line-height:1.55}
@media(max-width:760px){
 .notice-table th,.notice-table td{padding:13px 9px}
 .notice-table th:nth-child(1),.notice-table td:nth-child(1){width:56px}
 .notice-table th:nth-child(3),.notice-table td:nth-child(3){width:72px}
 .notice-table th:nth-child(4),.notice-table td:nth-child(4){width:100px}
 .notice-table th,.notice-table td{font-size:12px}
 .notice-title{font-size:13px}
 .notice-pin-badge{font-size:10px}
 .notice-detail-header{padding:21px 17px}
 .notice-detail-body{padding:23px 17px;min-height:180px}
 .notice-editor-card{padding:19px}
}
@media(max-width:540px){
 .notice-toolbar{gap:10px}
 .notice-toolbar-desc{display:block;margin:3px 0 0;font-size:11px}
 .notice-search{gap:7px}
 .notice-search>input[type=search]{flex:1 1 calc(100% - 80px)}
 .notice-pin-filter{order:3;width:100%;padding:2px 0}
 .notice-table th:nth-child(1),.notice-table td:nth-child(1),
 .notice-table th:nth-child(3),.notice-table td:nth-child(3){display:none}
 .notice-table th:nth-child(4),.notice-table td:nth-child(4){width:85px}
 .notice-table th,.notice-table td{padding:14px 11px}
 .notice-title{gap:6px;font-size:13px}
 .notice-title>span:last-child{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 .notice-date{white-space:nowrap;font-size:11px!important}
 .notice-table tbody tr.notice-pinned-row td:nth-child(2){box-shadow:inset 3px 0 0 var(--gold)}
 .notice-detail-header h3{font-size:19px!important}
 .notice-editor-card .form textarea{min-height:250px}
 .notice-editor-actions button{flex:1 1 100px}
}


/* Notice UX refinement: centered headings, compact column and bottom live search */
.notice-board{width:100%;max-width:800px;margin:0 auto}
.notice-toolbar{justify-content:flex-start;margin:0 0 16px}
.notice-toolbar strong{font-size:15px;font-weight:750}
.notice-table th:nth-child(2),.notice-table td:nth-child(2){text-align:center}
.notice-table td:nth-child(2){width:50%}
.notice-title{justify-content:center;text-align:center;gap:7px}
.notice-title>span:last-child{text-align:center}
.notice-bottom-toolbar{display:flex;align-items:flex-start;justify-content:center;gap:12px;margin:20px auto 0}
.notice-search-controls{display:flex;flex-direction:column;gap:8px;width:min(100%,340px);min-width:0}
.notice-search-controls input[type="search"]{
 width:100%;min-width:0;min-height:44px;
 color:var(--text);background:var(--input-bg);
 border:1px solid var(--btn-border);border-radius:10px;
 padding:10px 13px;font:inherit;
}
.notice-search-controls input[type="search"]:focus{outline:3px solid var(--gold-soft);border-color:var(--gold-bright)}
.notice-search-controls .notice-pin-filter{padding:2px 4px;min-height:32px}
.notice-bottom-toolbar .notice-write{min-width:90px}
.notice-bottom-toolbar{align-items:center;flex-wrap:wrap}
.notice-search-controls{flex:1 1 220px;max-width:340px}
.notice-bottom-actions{display:flex;align-items:center;justify-content:center;gap:12px;flex:0 0 auto}
.notice-bottom-actions .notice-pin-filter{min-height:44px;padding:8px 4px;margin:0;order:initial;width:auto}
.notice-editor-card .form input[name="title"]{max-width:55%}
@media(max-width:760px){
 .notice-board{max-width:100%}
 .notice-editor-card .form input[name="title"]{max-width:100%}
}
@media(max-width:540px){
 .notice-bottom-toolbar{gap:8px;justify-content:stretch}
 .notice-search-controls{flex:1 1 100%;width:100%;max-width:none}
 .notice-bottom-actions{width:100%;justify-content:flex-end;gap:14px}
 .notice-bottom-toolbar .notice-write{min-width:78px;padding-left:12px;padding-right:12px}
 .notice-table th:nth-child(2),.notice-table td:nth-child(2){width:auto}
 .notice-title{font-size:13px;justify-content:center}
}


/* Mobile viewport fit — prevent whole-page sideways panning */
html,body{max-width:100%;overflow-x:clip}
body,#app,.app-nav,.page-content,.site-header,.header-inner{min-width:0}
#app,.app-nav,.site-header{width:100%;max-width:100%}
.page-content{max-width:min(1100px,100%);overflow-wrap:anywhere}
#tabs{max-width:100%;min-width:0;overscroll-behavior-x:contain}
.header-inner{min-width:0}
.header-controls{min-width:0}
.brand>span{min-width:0}
.page-content .cols,.page-content .card,.page-content .hero{min-width:0;max-width:100%}
.hero>div{min-width:0;max-width:100%}
.hero h3,.hero-eyebrow{overflow-wrap:anywhere}
@media(max-width:600px){
 .header-inner{gap:7px;padding:9px 11px;max-width:100%}
 .brand{flex:1 1 auto;min-width:0;gap:7px}
 .brand img{width:34px;height:34px}
 .brand-name{font-size:16px}
 .brand-sub{font-size:8px;letter-spacing:0;overflow:hidden;text-overflow:ellipsis}
 .header-controls{gap:5px;flex:0 0 auto;margin-left:0}
 .account-actions{gap:5px}
 #who{display:none}
 #logout{padding:8px 8px;font-size:11px}
 .theme-switch{padding:8px;min-width:42px}
 #tabs{padding:9px 10px}
 #tabs button{padding:10px 11px}
 .page-content{padding:22px 12px 60px}
 .page-content>h2{font-size:23px;margin-bottom:18px}
 .hero{display:grid;grid-template-columns:66px minmax(0,1fr);align-items:center;gap:12px;padding:18px;min-height:0}
 .hero img{grid-column:1;grid-row:1;width:66px;max-width:100%;height:auto}
 .hero>div{grid-column:2;grid-row:1;min-width:0}
 .hero-eyebrow{font-size:9px;line-height:1.5;letter-spacing:0;margin-bottom:7px}
 .hero h3{font-size:20px!important;line-height:1.35}
 .hero p{font-size:12px}
 .quick-actions{gap:7px;margin-top:12px}
 .quick-actions button{font-size:11px;padding:8px;min-height:40px;flex:1 1 112px}
 .card-heading{gap:8px;min-width:0}
 .card-heading h3{min-width:0}
}
@media(max-width:365px){
 .header-inner{padding:8px 9px}
 .brand img{width:31px;height:31px}
 .brand-name{font-size:15px}
 .brand-sub{font-size:7px}
 #logout{font-size:10px;padding:8px 6px}
 .theme-switch{min-width:40px}
 .page-content{padding-left:9px;padding-right:9px}
 .hero{grid-template-columns:50px minmax(0,1fr);padding:14px;gap:10px}
 .hero img{width:50px}
 .hero h3{font-size:18px!important}
 .quick-actions button{flex-basis:100px}
}


/* iOS input focus zoom prevention: controls smaller than 16px can zoom the whole page */
@media(max-width:760px){
 input,select,textarea{font-size:16px!important}
}