/* 미벤져스 앱 기본 룩 = 확정 시안 A5 의 CSS 를 그대로 옮긴 것 (시안_A5.html, 2026-10-14). 고치지 말고 app.css 에서 덮어쓴다. */
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500;600&display=swap");

:root {
  --text-scale: 1;
  --head-scale: 1;          

  
  --brand:#2A7A55; --on-brand:#FFFFFF; --brand-subtle:#E3F3EA; --on-brand-subtle:#1F5F42;
  --bg:#FFFFFF; --surface:#F4F6F5; --surface-2:#E9EDEB;
  --text:#1B1F1D; --text-muted:#5B6560; --text-placeholder:#6B7570; --text-disabled:#8E9893;
  --border:#D5DBD8;            
  --border-strong:#7B8681;     
  --link:#1A56DB; --focus:#1A56DB;
  --danger:#B3261E; --on-danger:#FFFFFF; --danger-subtle:#FBE7E5;
  --success:#1E7A4B; --success-subtle:#E3F3EA;
  --warning:#8A5A00; --warning-subtle:#FFF4D6;
  --info:#1A56DB; --info-subtle:#E8F0FE;

  
  --fs-caption:calc(.75rem * var(--text-scale));   --lh-caption-v3:calc(1rem * var(--text-scale));
  --fs-label:calc(.875rem * var(--text-scale));    --lh-label:calc(1.25rem * var(--text-scale));
  --fs-body:calc(1rem * var(--text-scale));        --lh-ui:calc(1.5rem * var(--text-scale));       
  --lh-read:calc(1.625rem * var(--text-scale));                                                     
  --fs-lead:calc(1.125rem * var(--text-scale));    --lh-lead:calc(1.75rem * var(--text-scale));
  --fs-title:calc(1.25rem * var(--head-scale));    --lh-title:calc(1.75rem * var(--head-scale));   
  --fs-head:calc(1.5rem * var(--head-scale));      --lh-head:calc(2rem * var(--head-scale));       
  --fs-h1:calc(2rem * var(--head-scale));          --lh-h1:calc(2.5rem * var(--head-scale));       
  --fs-display:calc(2.5rem * var(--head-scale));   --lh-display-v3:calc(3.25rem * var(--head-scale)); 
  --fs-tab:calc(.75rem * min(var(--text-scale), 1.3));    
  --w-regular:400; --w-medium:500; --w-bold:700;
  --font-sans:"Pretendard Variable",Pretendard,system-ui,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",Roboto,"Segoe UI",sans-serif;
  --measure:40em;                                    

  
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px;
  --gutter:16px; --col-gap:16px; --cols:4;
  --gap-section:48px;

  
  --tap-min:44px;            
  --tap-gap:8px;             
  --control-h:48px;          
  --row-h:56px; --tabbar-h:56px;
  --icon-s:calc(1rem * var(--text-scale)); --icon-m:calc(1.25rem * var(--text-scale)); --icon-l:calc(1.5rem * var(--text-scale)); --icon-xl:calc(2rem * var(--text-scale));  
  --radius-s:8px; --radius-m:12px; --radius-l:16px; --radius-full:999px;
  --shadow-1:0 1px 2px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.06); --shadow-2:0 4px 12px rgba(0,0,0,.12);
  --focus-ring:3px;
  --state-hover:.08; --state-pressed:.10;           
  --dur:150ms; --ease:cubic-bezier(.2,0,0,1);

  
  --t-caption:12px; --t-small:14px; --t-body:16px; --t-lead:18px; --t-h3:20px; --t-h2:24px; --t-h1:32px; --t-display:40px;
  --lh-display:1.15; --lh-heading:1.25; --lh-body:1.6; --lh-caption:1.4;
  --ls-display:-0.03em; --ls-heading:-0.02em; --ls-body:0; --ls-caption:0;
  --page-gutter:16px; --grid-cols:4;
  --gap-text-text:8px; --gap-para:16px; --gap-text-graphic:16px;
}

@media (min-width:600px){ :root{ --cols:8; --grid-cols:8; --gutter:24px; --page-gutter:24px; --col-gap:24px; } }
@media (min-width:1200px){ :root{ --cols:12; --grid-cols:12; --gutter:48px; --page-gutter:48px; --col-gap:24px; } }


:root[data-text-size="lg"]  { --text-scale:1.15; --head-scale:1.075; }
:root[data-text-size="xl"]  { --text-scale:1.3;  --head-scale:1.15; }
:root[data-text-size="xxl"] { --text-scale:1.5;  --head-scale:1.25; }
:root[data-text-size="max"] { --text-scale:2;    --head-scale:1.5; }




@media (prefers-contrast:more){ :root{ --border:var(--border-strong); --text-muted:var(--text); --text-placeholder:var(--text-muted); } }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }

html{ font-size:100%; -webkit-text-size-adjust:100%; }   
body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-sans); font-size:var(--fs-body); line-height:var(--lh-ui);
      letter-spacing:var(--ls-body); word-break:keep-all; overflow-wrap:break-word; }
h1,h2,h3{ letter-spacing:var(--ls-heading); margin:0 0 var(--s-3); text-wrap:balance; }   
p,li,.help{ text-wrap:pretty; }   
p{ margin:0 0 var(--gap-para); }
.read{ max-width:var(--measure); line-height:var(--lh-read); }       
.num{ font-variant-numeric:tabular-nums; }                          
img,svg,video{ max-width:100%; display:block; }
:focus-visible{ outline:var(--focus-ring) solid var(--focus); outline-offset:2px; }


.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2); box-sizing:border-box; min-height:var(--control-h); padding:var(--s-2) var(--s-5);
  border:0; border-radius:var(--radius-m); background:var(--brand); color:var(--on-brand); font:var(--w-medium) var(--fs-body)/var(--lh-ui) var(--font-sans); cursor:pointer;
  transition:box-shadow var(--dur) var(--ease); position:relative; overflow:hidden; text-decoration:none; }
.btn::after{ content:""; position:absolute; inset:0; background:currentColor; opacity:0; transition:opacity var(--dur) var(--ease); pointer-events:none; }
.btn:hover::after{ opacity:var(--state-hover); } .btn:active::after{ opacity:var(--state-pressed); }
.btn[disabled]{ opacity:.4; pointer-events:none; }
.btn--ghost{ background:transparent; color:var(--brand); box-shadow:inset 0 0 0 1px var(--border-strong); }
.btn--danger{ background:var(--danger); color:var(--on-danger); }
.btn--block{ display:flex; width:100%; }
.field{ display:block; margin:0 0 var(--s-4); }
.label{ display:block; margin-bottom:var(--s-2); font-size:var(--fs-label); line-height:var(--lh-label); font-weight:var(--w-medium); }
.input{ box-sizing:border-box; width:100%; min-height:var(--control-h); padding:var(--s-2) var(--s-4); border:1px solid var(--border-strong); border-radius:var(--radius-m);
  background:var(--bg); color:var(--text); font:var(--fs-body)/var(--lh-ui) var(--font-sans); }
.input::placeholder{ color:var(--text-placeholder); }
.input[aria-invalid="true"]{ border-color:var(--danger); border-width:2px; }
.help{ margin-top:var(--s-2); font-size:var(--fs-caption); line-height:var(--lh-caption-v3); color:var(--text-muted); }
.help--error{ color:var(--danger); }
.card{ background:var(--surface); border-radius:var(--radius-l); padding:var(--s-4); box-shadow:var(--shadow-1); }
.chip{ display:inline-flex; align-items:center; box-sizing:border-box; min-height:var(--tap-min); padding:var(--s-2) var(--s-4); border-radius:var(--radius-full);
  background:var(--surface-2); color:var(--text); font-size:var(--fs-label); line-height:var(--lh-label); text-decoration:none; }
.chip--on{ background:var(--brand); color:var(--on-brand); }
.chips{ display:flex; flex-wrap:wrap; gap:var(--tap-gap); }
.row{ display:flex; align-items:center; gap:var(--s-4); box-sizing:border-box; min-height:var(--row-h); padding:var(--s-2) var(--gutter); border-bottom:1px solid var(--border); }
.row__main{ flex:1; min-width:0; } .row__sub{ color:var(--text-muted); font-size:var(--fs-label); line-height:var(--lh-label); }
.icon{ width:var(--icon-l); height:var(--icon-l); flex:none; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.tabbar{ display:flex; box-sizing:border-box; min-height:calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); background:var(--bg); border-top:1px solid var(--border); }
.tab{ flex:1; min-width:0; min-height:var(--tap-min); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:var(--fs-tab); line-height:1.35; color:var(--text-muted); text-align:center; text-decoration:none; }
.tab[aria-current="page"]{ color:var(--brand); font-weight:var(--w-bold); }
.grid{ display:grid; gap:var(--col-gap); grid-template-columns:repeat(var(--cols),minmax(0,1fr)); padding:0 var(--gutter); }
.badge{ display:inline-flex; align-items:center; min-height:calc(1.25rem * var(--text-scale)); padding:0 var(--s-2); border-radius:var(--radius-full); font-size:var(--fs-caption); line-height:1; background:var(--danger); color:var(--on-danger); }


.screen{ display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; }
.screen main{ flex:1; }
.num{ font-variant-numeric:tabular-nums; }
.icon{ width:var(--icon-l); height:var(--icon-l); }
.btn .icon{ width:var(--icon-m); height:var(--icon-m); }
.tab{ gap:var(--s-2); padding:var(--s-1) 0; }
.tab .icon{ width:24px; height:24px; padding:var(--s-1) var(--s-3); box-sizing:content-box; }
.av{ flex:none; }
.top-title{ margin:0; }



:root{ --brand:#D4AF37; --on-brand:#0B0B0B; --brand-subtle:#2A2414; --on-brand-subtle:#E9CF7A;
  --bg:#0B0B0B; --surface:#161616; --surface-2:#222222; --text:#F4EFE3; --text-muted:#B2AB9B; --border:#2E2E2E; --border-strong:#857C67;
  --danger:#F08A80; --on-danger:#0B0B0B; --page:#1E1E1E; --num-font:"Oswald","Pretendard Variable",Pretendard,sans-serif; }
body{ background:var(--page); }
.screen{ background:var(--bg); }
.appbar{ display:flex; align-items:center; gap:var(--s-3); padding:var(--s-3) var(--gutter); border-bottom:1px solid var(--border); }
.appbar__main{ flex:1; min-width:0; }
.club{ margin:0; font:600 var(--fs-label)/var(--lh-label) var(--num-font); letter-spacing:.04em; color:var(--brand); }
.team{ margin:0; font-size:var(--fs-caption); line-height:var(--lh-caption-v3); color:var(--text-muted); }
.iconbtn{ width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:var(--radius-full); background:var(--surface-2); color:var(--text); }
.pagehead{ padding:var(--s-6) var(--gutter) var(--s-4); background:linear-gradient(180deg,#17140C 0,var(--bg) 100%); }
.eyebrow{ margin:0 0 var(--s-1); font:500 var(--fs-label)/var(--lh-label) var(--num-font); letter-spacing:.04em; color:var(--brand); }
h1{ margin:0; font-size:var(--fs-head); line-height:var(--lh-head); font-weight:700; }
.content{ padding:0 var(--gutter) var(--s-8); }
.sec{ margin:var(--s-8) 0 var(--s-3); font-size:var(--fs-lead); line-height:var(--lh-lead); font-weight:700; }
.sechead{ display:flex; align-items:baseline; gap:var(--s-2); margin:var(--s-8) 0 var(--s-3); } .sechead .sec{ margin:0; flex:1; }
.lead{ margin:0 0 var(--s-4); color:var(--text-muted); }
.muted{ color:var(--text-muted); font-weight:400; } .gold{ color:var(--brand); }
.card{ background:var(--surface); border-radius:var(--radius-m); box-shadow:none; border:1px solid var(--border); }
.hero{ position:relative; padding:var(--s-5); border-radius:var(--radius-m); background:linear-gradient(135deg,#1B1708 0%,#0F0F0F 60%); border:1px solid var(--brand); }
.hero__top{ display:flex; align-items:flex-end; gap:var(--s-4); }
.hero__dday{ margin:0; font:600 var(--fs-display)/1 var(--num-font); color:var(--brand); }
.hero__when{ margin:0; flex:1; font-size:var(--fs-label); line-height:var(--lh-label); color:var(--text-muted); text-align:right; }
.hero__q{ margin:var(--s-5) 0 var(--s-4); font-size:var(--fs-title); line-height:var(--lh-title); font-weight:700; }
.hero__btns{ display:flex; gap:var(--s-3); }
.hero__btns .btn{ flex:1; min-height:64px; font-size:var(--fs-lead); font-weight:700; }
.btn--gold{ background:var(--brand); color:var(--on-brand); }
.btn--line{ background:transparent; color:var(--text); box-shadow:inset 0 0 0 1px var(--border-strong); }
.btn--block{ margin-top:var(--s-4); }
.hero__foot{ display:flex; align-items:center; gap:var(--s-3); margin-top:var(--s-5); padding-top:var(--s-4); border-top:1px solid #3A3320; }
.hero__left{ margin:0; flex:1; font-size:var(--fs-label); line-height:var(--lh-label); color:var(--text-muted); text-align:right; } .hero__left b{ color:var(--text); }
.stack{ display:flex; } .stack .av{ margin-right:-8px; }
.list{ list-style:none; margin:0; padding:0; }
.list .row{ padding:var(--s-3) var(--s-4); }
.list .row:last-child,.list .srow:last-child{ border-bottom:0; }
.row__title{ margin:0; font-weight:700; } .row__sub{ margin:0; }
.date{ width:48px; height:48px; flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:var(--radius-s); background:var(--surface-2); }
.date__d{ font:600 var(--fs-title)/1 var(--num-font); color:var(--brand); } .date__w{ font-size:var(--fs-caption); line-height:var(--lh-caption-v3); color:var(--text-muted); }
.icon--muted{ color:var(--text-muted); }
.host{ padding:var(--s-4); }
.host__who{ display:flex; align-items:center; gap:var(--s-3); padding-bottom:var(--s-4); border-bottom:1px solid var(--border); }
.host__name{ flex:1; }
.facts{ margin:var(--s-2) 0 0; padding:0; }
.facts>li{ display:flex; align-items:center; gap:var(--s-3); min-height:44px; }
.facts .icon{ color:var(--brand); width:var(--icon-m); height:var(--icon-m); }
.facts .fk{ width:calc(5rem * var(--text-scale)); color:var(--text-muted); font-size:var(--fs-label); }
.facts .fv{ margin:0; flex:1; font-weight:500; }
.srow{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3); padding:var(--s-3) var(--s-4); border-bottom:1px solid var(--border); }
.srow__main{ flex:1 1 calc(9rem * var(--text-scale)); min-width:0; }
.tag{ display:inline-block; padding:0 var(--s-2); border-radius:var(--radius-full); background:var(--brand-subtle); color:var(--on-brand-subtle); font-size:var(--fs-caption); line-height:var(--lh-caption-v3); font-weight:500; vertical-align:2px; }
.pick{ display:flex; gap:var(--s-2); }
.chip{ border:0; min-width:60px; justify-content:center; font-weight:700; background:var(--surface-2); color:var(--text-muted); }
.chip--yes.is-on{ background:var(--brand); color:var(--on-brand); }
.chip--no.is-on{ background:#3A2120; color:#FFB4AB; }
.pitch{ position:relative; height:460px; margin-top:var(--s-4); border-radius:var(--radius-m); overflow:hidden; border:1px solid var(--border); }
.pitch__bg{ position:absolute; inset:0; width:100%; height:100%; }
.mk{ position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:var(--s-1); }
.mk__name{ margin:0; display:flex; align-items:center; gap:var(--s-1); padding:2px var(--s-2) 2px 2px; border-radius:var(--radius-full); background:#0B0B0B; border:1px solid var(--brand); font-size:var(--fs-label); line-height:var(--lh-label); font-weight:700; white-space:nowrap; }
.mk__no{ min-width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-full); background:var(--brand); color:var(--on-brand); font:600 var(--fs-caption)/1 var(--num-font); }
.mk__pos{ margin:0; padding:0 var(--s-2); border-radius:var(--radius-full); background:#F4EFE3; color:#0B0B0B; font-size:var(--fs-caption); line-height:var(--lh-caption-v3); font-weight:700; white-space:nowrap; }
.bench{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s-2); grid-template-columns:repeat(auto-fit,minmax(calc(3.25rem * var(--text-scale)),1fr)); }
.bench li{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.bench .av{ margin-bottom:var(--s-2); }
.bench__name{ margin:0; font-size:var(--fs-label); line-height:var(--lh-label); font-weight:700; }
.bench__no{ margin:0; font:500 var(--fs-caption)/var(--lh-caption-v3) var(--num-font); color:var(--brand); }
.me{ margin-top:var(--s-4); padding:var(--s-5); border-color:#4A3F1C; background:linear-gradient(160deg,#1C180C 0%,#141414 55%); }
.me__top{ display:flex; align-items:center; gap:var(--s-4); }
.me__id{ flex:1; }
.me__no{ margin:0; font:600 var(--fs-h1)/1 var(--num-font); color:var(--brand); }
.me__name{ margin:var(--s-2) 0 0; font-size:var(--fs-title); line-height:var(--lh-title); font-weight:700; }
.me__btns{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin:var(--s-5) 0 var(--s-2); } .me__btns .btn{ flex:1 1 auto; }
.mvp{ display:flex; align-items:center; gap:var(--s-3); margin-top:var(--s-3); padding:var(--s-3) var(--s-4); border-radius:var(--radius-s); background:var(--brand-subtle); }
.mvp p{ margin:0; flex:1; font-weight:700; color:var(--on-brand-subtle); } .mvp .mvp__n{ flex:none; font:600 var(--fs-title)/1 var(--num-font); color:var(--brand); }
.jno{ margin:0; min-width:44px; text-align:right; font:600 var(--fs-head)/1 var(--num-font); color:var(--brand); }
.tabbar{ background:#111; border-top:1px solid var(--border); }
.tab[aria-current="page"]{ color:var(--brand); }


.pagehead{ background:none; }
.eyebrow,.club{ color:var(--gold-ink); }
.gold,.jno,.bench__no,.date__d,.me__no{ color:var(--gold-ink); }
.facts .icon{ color:var(--gold-ink); }
.iconbtn{ background:var(--surface); color:var(--text); box-shadow:inset 0 0 0 1px var(--border); }
.tag{ background:#F6EBC8; color:#5C4508; }
.chip{ background:var(--surface-2); color:var(--text-muted); }
.chip--yes.is-on{ background:var(--brand); color:#141414; }
.chip--no.is-on{ background:#FBE3DF; color:#8E2A1F; }
.date{ background:#F6EFDC; }
.mvp{ background:#F6EBC8; } .mvp p{ color:#5C4508; } .mvp .mvp__n{ color:#5C4508; }
.btn--line{ color:var(--text); box-shadow:inset 0 0 0 1px var(--border-strong); }

:root{ --bg:#EAEAE6; --surface:#FFFFFF; --surface-2:#EDEDEA; --text:#151515; --text-muted:#5C5C58; --border:#E4E4E0; --border-strong:#85857F;
  --page:#D6D6D1; --gold-ink:#7E5F0E; --band-bg:#D4AF37; --band-text:#141414; --band-muted:#3A2E0A; }
.appbar{ background:#0B0B0B; border-bottom:0; } .appbar .club{ color:#D4AF37; } .appbar .team{ color:#B2AB9B; }
.appbar .iconbtn{ background:#222; color:#F4EFE3; box-shadow:none; }
.pagehead{ background:#0B0B0B; color:#F4EFE3; border-radius:0 0 var(--radius-l) var(--radius-l); padding-bottom:var(--s-6); }
.pagehead .eyebrow{ color:#D4AF37; }
.content{ padding-top:var(--s-5); }
.card{ background:var(--surface); border:0; border-radius:var(--radius-l); box-shadow:0 2px 12px rgba(0,0,0,.08); }
.hero{ background:#0B0B0B; border:0; border-radius:var(--radius-l); box-shadow:0 2px 12px rgba(0,0,0,.08); }
.hero__foot{ border-top-color:#333; }
.list .row,.srow{ border-bottom:1px solid var(--border); }
.me{ background:var(--surface); border:0; border-top:4px solid var(--brand); }
.pitch{ border:0; border-radius:var(--radius-l); }
.mk__name{ background:#FFFFFF; color:#151515; border-color:#FFFFFF; }
.mk__pos{ background:#0B0B0B; color:#F4EFE3; }
.tabbar{ background:#FFFFFF; border-top:0; box-shadow:0 -2px 12px rgba(0,0,0,.06); }
.tab[aria-current="page"]{ color:#151515; }
.tab[aria-current="page"] .icon{ background:#F6EBC8; border-radius:var(--radius-full); }

:root{ --bg:#F5F0E4; --surface-2:#EFE9DA; --border:#E0D8C4; --page:#E6DFCF; }
.tab[aria-current="page"] .icon{ background:#F6EBC8; }
.card.me.dark{ background:#0B0B0B; }

.hero,.dark{ --text:#F4EFE3; --text-muted:#C9C1AE; --border:#3A3A3A; --border-strong:#857C67; --surface-2:#2A2A2A; color:var(--text); }
.hero .row__sub,.dark .row__sub{ color:var(--text-muted); }
.dark .gold,.dark .facts .icon,.dark .me__no{ color:#D4AF37; }
.dark .mvp{ background:#2A2414; } .dark .mvp p{ color:#E9CF7A; } .dark .mvp .mvp__n{ color:#D4AF37; }
.hero .btn--line,.dark .btn--line{ color:#F4EFE3; box-shadow:inset 0 0 0 1px #857C67; }


.team,.bench__no,.dnum__m,.stat__l,.ev__w,.date__w,.pcard__no,.mk__pos{ margin-top:var(--s-1); }
.hero__btns .btn{ line-height:var(--lh-lead); }
.date{ gap:var(--s-2); } .date__d{ line-height:var(--lh-title) !important; } .date__w{ margin-top:0; }
.ev__date{ gap:0; } .ev__d{ line-height:var(--lh-ui) !important; }
.me__no{ line-height:var(--lh-h1) !important; }
.hero__btns{ flex-wrap:wrap; } .hero__btns .btn{ flex:1 1 auto; }
.facts{ list-style:none; } .ft{ flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:center; column-gap:var(--s-3); --edge-ok:1; } .facts .fk{ flex:none; } .facts .fv{ flex:1 1 auto; }
.bench{ row-gap:var(--s-4) !important; }
.date{ width:auto !important; min-width:48px; height:auto !important; min-height:48px; box-sizing:border-box; padding:var(--s-1); }
.dnum{ width:auto !important; min-width:48px; }
.host__name{ min-width:0; }
.faces{ display:grid !important; grid-template-columns:repeat(auto-fit,minmax(calc(3.5rem * var(--text-scale)),1fr)); }


/* ===== A5 다듬기 1014 ===== */
html{ scroll-behavior:smooth; }
/* 검정 면: 아주 은은한 그라데이션 + 위쪽 금색 빛 번짐 */
.appbar{ background:#0B0B0B; }
.pagehead{ position:relative; }
.pagehead{ background:radial-gradient(70% 90% at 92% 100%, rgba(212,175,55,.10) 0%, rgba(212,175,55,0) 70%), linear-gradient(180deg,#0B0B0B 0%,#1A1712 100%); }
.hero{ background:radial-gradient(120% 70% at 100% 0%, rgba(212,175,55,.16) 0%, rgba(212,175,55,0) 60%), linear-gradient(160deg,#1A1712 0%,#0B0B0B 70%);
  border:1px solid rgba(212,175,55,.22); box-shadow:0 12px 28px rgba(28,22,8,.22), inset 0 1px 0 rgba(255,255,255,.05); }
.hero__foot{ border-top-color:rgba(212,175,55,.18); }
.card.me.dark{ background:radial-gradient(120% 60% at 100% 0%, rgba(212,175,55,.14) 0%, rgba(212,175,55,0) 60%), linear-gradient(160deg,#1A1712 0%,#0B0B0B 70%);
  border:1px solid rgba(212,175,55,.22); box-shadow:0 12px 28px rgba(28,22,8,.22), inset 0 1px 0 rgba(255,255,255,.05); }
.dark .mvp{ background:linear-gradient(90deg,#2C2512 0%,#1E1A10 100%); box-shadow:inset 0 0 0 1px rgba(212,175,55,.2); }
/* 흰 카드: 얇은 테두리 + 아주 부드러운 그림자 */
.card:not(.hero):not(.dark){ border:1px solid rgba(60,48,20,.08); box-shadow:0 1px 2px rgba(40,32,12,.04), 0 8px 20px rgba(40,32,12,.05); }
.tabbar{ box-shadow:0 -1px 0 rgba(60,48,20,.06), 0 -8px 20px rgba(40,32,12,.04); }
/* 큰 숫자: 금색 그라데이션 글자 (color 는 대비 검사용으로 남김) */
.hero__dday,.card.me.dark .me__no{ color:#D4AF37; background:linear-gradient(180deg,#F3DC86 0%,#D4AF37 55%,#B48E22 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
/* 금색 버튼: 금색 그라데이션 + 부드러운 글로우 (한 화면에 하나) */
.btn--gold{ background:linear-gradient(180deg,#E2C35A 0%,#C9A230 100%); color:#141414;
  box-shadow:0 4px 16px rgba(212,175,55,.35), inset 0 1px 0 rgba(255,255,255,.35); }
.hero .btn--gold{ box-shadow:0 4px 16px rgba(212,175,55,.35), inset 0 1px 0 rgba(255,255,255,.35); }
/* 선택된 참석 칩: 약한 글로우 */
.chip--yes.is-on{ background:linear-gradient(180deg,#E2C35A 0%,#C9A230 100%); color:#141414; box-shadow:0 2px 8px rgba(212,175,55,.28); }
.chip--no.is-on{ background:#FBE3DF; color:#8E2A1F; box-shadow:inset 0 0 0 1px rgba(142,42,31,.18); }
.chip{ transition:background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
/* 글자: 제목·숫자 자간, 굵기 위계 (제목 700 · 값 500 · 보조 400) */
h1,.hero__q,.sec,.me__name{ letter-spacing:-0.02em; }
.hero__dday,.me__no,.jno,.date__d,.mvp__n,.mk__no,.bench__no{ letter-spacing:-0.01em; }
.hero__dday{ letter-spacing:-0.02em; }
.row__sub,.lead,.hero__when,.hero__left{ font-weight:400; }
.lead{ line-height:var(--lh-read); }
.btn{ font-weight:700; letter-spacing:-0.01em; }
/* 버튼 크기·간격: 같은 종류 같은 크기, 나란한 버튼은 같은 폭, 사이 12 */
.hero__btns,.me__btns{ gap:var(--s-3); }
.hero__btns .btn{ flex:1 1 calc(8rem * var(--text-scale)); }
.me__btns .btn{ flex:1 1 auto; padding-left:var(--s-4); padding-right:var(--s-4); }
.hero__btns .btn, .card.me.dark .btn{ min-height:56px; font-size:var(--fs-lead); line-height:1.5; }
.me__btns .btn,.btn--block{ min-height:var(--control-h); }
.pick .chip{ min-width:64px; }
.srow__place{ display:block; }
/* 눌림 효과 */
.btn,.chip,.iconbtn,.tab{ -webkit-tap-highlight-color:transparent; cursor:pointer; transition:transform 120ms var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); }
.btn:active,.chip:active,.iconbtn:active{ transform:scale(.97); }
.tab:active .icon{ transform:scale(.92); }
.btn--gold:active{ box-shadow:0 2px 8px rgba(212,175,55,.3), inset 0 1px 0 rgba(255,255,255,.25); }
.hero .btn.is-no{ background:#3A2120; color:#FFB4AB; box-shadow:inset 0 0 0 1px rgba(255,180,171,.35); }
.list .row.is-link{ cursor:pointer; } .list .row.is-link:active{ background:var(--surface-2); }
.mk.is-pick .mk__name{ box-shadow:0 0 0 2px #D4AF37, 0 4px 12px rgba(212,175,55,.45); }
.pitch.is-swap .mk{ cursor:pointer; }
.toast{ position:fixed; left:50%; bottom:calc(72px + env(safe-area-inset-bottom)); z-index:20; transform:translate(-50%,8px); max-width:calc(100% - 32px);
  box-sizing:border-box; padding:var(--s-3) var(--s-4); border-radius:var(--radius-m); background:#141414; color:#F4EFE3;
  box-shadow:0 8px 24px rgba(0,0,0,.25); font-size:var(--fs-label); line-height:var(--lh-label); opacity:0; pointer-events:none; transition:opacity 200ms, transform 200ms; }
.toast.is-on{ opacity:1; transform:translate(-50%,0); }