:root{
    --green:#15281b; --green-2:#1e3526; --sand:#ddd6b6; --cream:#ece6d2; --muted:#a4b39a; --line:#33492f;
    --disp:"Anton","Pretendard",sans-serif;
    --gold:#ddd6b6; --gold-bright:#ece6d2; --gold-dim:#4a6450; --gold-bg:rgba(221,214,182,.07);
    --win:#5a9277; --alert:#bd6452;
  }
  *{box-sizing:border-box;}
  body{
    margin:0; font-family:"Pretendard","Pretendard Variable",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
    color:var(--cream); background:var(--green); line-height:1.65; -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;}
  .sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
  .wrap{max-width:760px; margin:0 auto; padding:0 18px;}
  section{padding:46px 0;}
  .eyebrow{font-size:12px; font-weight:600; letter-spacing:3px; text-transform:uppercase; color:var(--gold); opacity:1;}
  h2{font-size:24px; font-weight:600; letter-spacing:-0.5px; margin:6px 0 18px; color:#f3eed9;}
  p{color:var(--cream); opacity:.92;}
  .muted{color:var(--muted);}

  /* 앵커 네비 */
  html{scroll-behavior:smooth;}
  section[id]{scroll-margin-top:52px;}
  .anchnav{position:sticky; top:0; z-index:20; display:flex; gap:4px; justify-content:center; flex-wrap:nowrap; overflow-x:auto; background:#0a140d; border-bottom:1px solid var(--line); padding:9px 8px;}
  .anchnav::-webkit-scrollbar{display:none;}
  .anchnav a{font-size:12px; font-weight:600; letter-spacing:1px; color:var(--cream); opacity:.72; text-decoration:none; padding:6px 13px; border-radius:999px; white-space:nowrap;}
  .anchnav a:hover{opacity:1; background:var(--green-2); color:var(--gold);}

  /* 히어로 — 저지 핀스트라이프 + 크레스트 */
  .hero{
    position:relative; text-align:center; padding:66px 18px 58px; overflow:hidden;
    background:linear-gradient(rgba(9,17,12,.72),rgba(7,14,10,.92)), url('../img/gal-ssau-1.webp') center 28%/cover no-repeat;
    border-bottom:2px solid var(--sand);
  }
  .hero img{width:92px; height:auto; margin-bottom:18px; filter:drop-shadow(0 6px 16px rgba(0,0,0,.45));}
  .hero .kicker{font-size:11px; font-weight:600; letter-spacing:5px; text-transform:uppercase; color:var(--sand); opacity:.8;}
  .hero .bigname{font-family:var(--disp); font-weight:400; font-size:clamp(48px,15vw,86px); line-height:.9; letter-spacing:1px; color:var(--sand); text-transform:uppercase; margin:10px 0 0;}
  .hero .name2{font-size:13px; font-weight:600; letter-spacing:5px; text-transform:uppercase; color:var(--sand); margin-top:12px;}
  .hero .tag{font-size:14px; color:var(--cream); opacity:.85; margin-top:14px;}
  .hero .cta{margin-top:22px; display:flex; gap:8px; justify-content:center; flex-wrap:wrap;}
  .hero .cta a{display:inline-flex; align-items:center; gap:7px; padding:12px 22px; border-radius:999px; font-weight:600; font-size:13px; letter-spacing:.3px; text-decoration:none;}
  .hero .btn-member{background:var(--sand); color:var(--green);}
  .hero .btn-member:hover{background:#cfc7a2;}
  .hero .btn-insta{background:var(--green-2); color:var(--sand); border:1px solid var(--line);}
  .hero .btn-insta svg{width:16px; height:16px;}

  /* 매치데이 픽스처 바 */
  .matchbar{
    background:var(--sand); color:var(--green); display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px;
    padding:13px 18px; font-weight:600; font-size:13px; letter-spacing:.3px; text-align:center;
  }
  .matchbar .lab{font-size:10px; letter-spacing:2px; text-transform:uppercase; opacity:.6; margin-right:6px;}

  /* 하프라인 디바이더 */
  .halfline{display:flex; align-items:center; gap:0; margin:0 auto; max-width:760px; padding:0 18px;}
  .halfline::before,.halfline::after{content:""; flex:1; height:1px; background:var(--line);}
  .halfline span{width:12px; height:12px; border:1px solid var(--line); border-radius:50%; flex-shrink:0;}

  /* 키트 (WHITE · BLACK) */
  .kits{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
  .kit{position:relative; border:1px solid var(--line); border-radius:14px; padding:20px 16px; overflow:hidden; text-align:center;}
  .kit.white{background:#ece6d2; color:#15281b;
    background-image:repeating-linear-gradient(90deg, transparent 0 13px, rgba(21,40,27,.16) 13px 15px);}
  .kit.black{background:#171f1a; color:#ece6d2;
    background-image:repeating-linear-gradient(90deg, transparent 0 13px, rgba(221,214,182,.12) 13px 15px);}
  .kit .num{font-size:50px; font-weight:400; line-height:1; font-family:var(--disp);}
  .kit .nm{font-size:13px; font-weight:600; letter-spacing:3px; margin-top:8px; text-transform:uppercase;}

  /* 경기 일정 (MATCH DAY) */
  .sec-h{font-family:"Anton","Pretendard",sans-serif; font-weight:400; font-size:clamp(40px,13vw,66px); line-height:.9; letter-spacing:1px; color:#f3eed9; text-transform:uppercase; margin:6px 0 16px;}
  .fixtures{background:#ece6d2; border-radius:16px; overflow:hidden; border:1px solid var(--line); border-top:3px solid var(--gold);}
  .fx{color:#15281b;}
  .fx:nth-child(even){background:#1e3526; color:#ece6d2;}
  .fx-row{display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; gap:16px; padding:15px 18px;}
  .fx-row.no-wk{grid-template-columns:auto 1fr;}
  .fx-end{display:flex; align-items:center; gap:16px; min-width:0;}
  .fx.has-detail .fx-row{cursor:pointer;}
  .fx .more{display:none;}
  .fx.has-detail .more{display:inline; font-size:9px; font-weight:400; letter-spacing:1px; opacity:.6; flex-shrink:0;}
  .fx.has-detail .more::before{content:'＋ 자세히';}
  .fx.open .more::before{content:'－ 닫기';}
  .fx-detail{display:none; padding:0 18px 15px; font-size:13px; line-height:1.6; white-space:pre-wrap; word-break:break-word;}
  .fx.open .fx-detail{display:block;}
  .fx .meta{justify-self:center; display:flex; flex-direction:column; align-items:center; gap:2px; min-width:0; max-width:100%; text-align:center;}
  .fx .type{font-size:15px; font-weight:600; letter-spacing:.3px; opacity:.85; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis;}
  .fx .wk{font-size:11px; font-weight:600; letter-spacing:.3px; opacity:.6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}
  .fx .loc{display:flex; align-items:center; justify-content:flex-end; gap:8px; font-weight:600; font-size:15px; justify-self:end; text-align:right; min-width:0; max-width:100%;}
  .fx .loc .loc-t{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
  .fx .when{justify-self:start; padding-right:14px; text-align:left; letter-spacing:.2px; line-height:1.2;}
  .fx .when .d{font-size:15px; font-weight:600;}
  .fx .when .wd{font-size:11px; opacity:.6; margin-left:6px; letter-spacing:1px;}
  .fx .when .t{font-size:12px; opacity:.75; display:block;}
  .fx-guest{padding:0 18px 14px; margin-top:-4px; text-align:right;}
  .fx-guest a{display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; letter-spacing:.3px; padding:7px 15px; border-radius:999px; border:1.5px solid currentColor; color:inherit; text-decoration:none; opacity:.9;}
  .fx-guest a:hover{opacity:1;}

  /* 선수 명단 (SQUAD) */
  .squad{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px;}
  .pl{display:flex; align-items:center; gap:11px; background:var(--green-2); border:1px solid var(--line); border-radius:12px; padding:11px 14px;}
  .pl .no{font-family:var(--disp); font-size:23px; color:var(--gold-bright); min-width:34px; text-align:center; line-height:1;}
  .pl .nm{font-size:14px; font-weight:600; color:var(--cream); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .pl.dorm{opacity:.42;}

  /* 로딩 스켈레톤 */
  @keyframes skel{0%,100%{opacity:.45}50%{opacity:.9}}
  .fixtures .skrow{height:52px; border-bottom:1px solid var(--line); background:rgba(21,40,27,.06); animation:skel 1.1s ease-in-out infinite;}
  .fixtures .skrow:last-child{border-bottom:none;}
  .squad .skchip{height:46px; border:1px solid var(--line); border-radius:12px; background:var(--green-2); animation:skel 1.1s ease-in-out infinite;}
  .squad-grouplab{grid-column:1/-1; font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin:8px 0 2px;}

  /* 회원 카페 (CAFES) */
  .cafes{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
  @media(max-width:480px){ .cafes{grid-template-columns:1fr;} }
  .cafe{display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--green-2); border:1px solid var(--line); border-radius:14px; padding:13px 16px; text-decoration:none; color:inherit;}
  a.cafe:hover{border-color:var(--sand);}
  .cafe .info{display:flex; flex-direction:column; gap:2px; min-width:0;}
  .cafe .nm{font-size:15px; font-weight:600; color:var(--cream);}
  .cafe .addr{font-size:12px; color:var(--muted);}
  .cafe .go{flex-shrink:0; font-size:11px; font-weight:600; color:var(--green); background:var(--sand); border-radius:999px; padding:6px 12px; white-space:nowrap;}
  @media(max-width:420px){ .fx-row{padding:13px 13px; gap:8px;} .fx-end{gap:12px;} .fx .wk{font-size:13px;} .fx .loc{font-size:13px;} }

  /* 갤러리 — 원본 비율 유지(메이슨리) */
  /* 갤러리 — 풀블리드 그리드 메이슨리(비율 유지·정렬) */
  .gallery{width:100vw; margin-left:calc(50% - 50vw); padding:0 12px; display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:0; grid-auto-flow:row dense; gap:10px;}
  .gallery img{width:100%; height:auto; border-radius:12px; border:1px solid var(--line); display:block; align-self:start;}
  @media(max-width:1000px){ .gallery{grid-template-columns:repeat(3,1fr);} }
  @media(max-width:680px){ .gallery{grid-template-columns:repeat(2,1fr);} }
  @media(max-width:420px){ .gallery{padding:0 8px;} }
  .gallery img.gal-hidden{display:none;}
  .morebtn{display:block; margin:18px auto 0; padding:11px 28px; border-radius:999px; background:var(--green-2); color:var(--sand); border:1px solid var(--line); font-weight:600; font-size:13px; letter-spacing:.5px; cursor:pointer;}
  .morebtn:hover{background:#24402e; color:var(--gold); border-color:var(--gold-dim);}

  footer{text-align:center; padding:34px 18px 44px; border-top:1px solid var(--line);}
  footer img{width:58px; opacity:.85;}
  footer .c{font-size:11px; color:var(--muted); margin-top:10px;}

  /* SUPPORTED BY */
  .support{text-align:center; padding:34px 18px 30px;}
  .support .lab{display:block; font-size:11px; font-weight:600; letter-spacing:4px; color:var(--muted); text-transform:uppercase; margin-bottom:14px;}
  .support img{display:inline-block; width:84px; height:auto; filter:brightness(0) invert(1); opacity:.92;}

  /* =====================================================================
     UI 개선 (2026-07-22) — CSS/JS 분리하면서 추가
     ===================================================================== */
  /* 연간 캘린더(인라인 스타일 → 클래스) */
  .mcal{display:grid; grid-template-columns:repeat(6,1fr); gap:8px; max-width:540px; margin:18px auto 0;}
  .mon{padding:10px 4px; border-radius:10px; text-align:center; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);}
  .mon-n{font-size:15px; font-weight:800; color:#ddd6b6;}
  .mon-t{font-size:10px; color:#a4b39a; margin-top:2px;}
  .mon.lg{background:rgba(224,165,48,.16); border-color:#e0a530;}
  .mon.lg .mon-n,.mon.lg .mon-t{color:#e0a530;}
  @media(max-width:420px){ .mcal{grid-template-columns:repeat(4,1fr);} }

  /* 앵커 네비 — 현재 섹션 표시(스크롤 스파이) */
  .anchnav a.on{opacity:1; background:var(--green-2); color:var(--gold);}

  /* 스크롤 리빌 — 은은한 페이드업 */
  @media(prefers-reduced-motion:no-preference){
    .rv{opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s ease;}
    .rv.in{opacity:1; transform:none;}
  }

  /* 갤러리 라이트박스 */
  .gallery img{cursor:zoom-in;}
  .lb{position:fixed; inset:0; z-index:100; background:rgba(7,14,10,.94); display:none;
      align-items:center; justify-content:center; padding:20px;
      padding-top:calc(20px + env(safe-area-inset-top)); padding-bottom:calc(20px + env(safe-area-inset-bottom));}
  .lb.open{display:flex;}
  .lb img{max-width:100%; max-height:100%; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.5);}
  .lb-x{position:absolute; top:calc(14px + env(safe-area-inset-top)); right:16px; width:40px; height:40px;
        border-radius:50%; border:1px solid var(--line); background:var(--green-2); color:var(--cream);
        font-size:18px; line-height:1; cursor:pointer;}
  .lb-nav{position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%;
          border:1px solid var(--line); background:var(--green-2); color:var(--cream); font-size:18px; cursor:pointer;}
  .lb-prev{left:12px;} .lb-next{right:12px;}
  @media(hover:hover){ .lb-x:hover,.lb-nav:hover{border-color:var(--gold); color:var(--gold);} }

  /* 모바일 터치 보정 */
  a,button{-webkit-tap-highlight-color:transparent; touch-action:manipulation;}

/* ── FAQ ── */
.faqs{display:grid; gap:10px; max-width:760px;}
.faq-item{border:1px solid rgba(243,238,217,.16); border-radius:14px; background:rgba(243,238,217,.04);}
.faq-item summary{cursor:pointer; list-style:none; padding:16px 18px; font-weight:700; font-size:16px; color:#f3eed9; display:flex; justify-content:space-between; align-items:center; gap:12px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; font-size:20px; color:#d6cfb4; flex-shrink:0; transition:transform .2s;}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item p{margin:0; padding:0 18px 16px; font-size:14.5px; line-height:1.75; color:#d6cfb4;}
@media (max-width:640px){ .faq-item summary{font-size:15px; padding:14px 15px;} .faq-item p{padding:0 15px 14px;} }