/* ============================================================
   강용FC 홈페이지 - 스타일
   붉은색 / 검은색 줄무늬 · 모바일 웹
   ============================================================ */

:root{
  --red:#C8102E; --red-dark:#9E0C24; --black:#1A1A1A;
  --grey:#F4F4F4; --grey2:#E5E5E5; --txt:#1A1A1A; --muted:#7A7A7A;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}

html,body{height:100%;}

body{
  font-family:'Malgun Gothic','Apple SD Gothic Neo','Noto Sans KR',sans-serif;
  background:#2b2b2b;color:var(--txt);
  display:flex;justify-content:center;
}

/* 모바일 우선: 화면 전체를 채운다 */
.phone{
  width:100%;max-width:480px;min-height:100vh;
  background:#fff;overflow:hidden;
  display:flex;flex-direction:column;
  position:relative;
}

/* 데스크톱: 휴대폰 프레임으로 보여준다 */
@media (min-width:520px){
  body{align-items:center;padding:24px 0;}
  .phone{
    max-width:390px;height:820px;min-height:auto;
    border-radius:38px;border:10px solid #0c0c0c;
    box-shadow:0 18px 50px rgba(0,0,0,.55);
  }
}

/* ---------- 상단 헤더 (줄무늬) ---------- */
.topbar{
  background:var(--black);position:relative;flex:none;
  padding:16px 16px 18px;overflow:hidden;
}
.topbar::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,
    var(--red) 0 14px,transparent 14px 34px);
  opacity:.30;
}
.topbar-row{position:relative;display:flex;align-items:center;gap:11px;}
.emblem{
  width:44px;height:44px;border-radius:50%;flex:none;
  background:var(--red);color:#fff;font-weight:800;font-size:15px;
  display:flex;align-items:center;justify-content:center;
  border:2px solid #fff;
}
.topbar h2{color:#fff;font-size:19px;letter-spacing:.5px;}
.topbar .sub{color:#f3b6bf;font-size:11px;margin-top:2px;}
.stripe-line{
  height:5px;flex:none;
  background:repeating-linear-gradient(90deg,var(--red) 0 18px,var(--black) 18px 36px);
}

/* ---------- 화면 본문 ---------- */
.screen{flex:1;overflow-y:auto;background:var(--grey);
  -webkit-overflow-scrolling:touch;}
.screen::-webkit-scrollbar{width:0;}
.view{display:none;padding:14px 14px 24px;}
.view.active{display:block;}

.sec-title{
  font-size:14px;font-weight:800;margin:16px 2px 8px;
  display:flex;align-items:center;gap:7px;
}
.sec-title::before{content:"";width:4px;height:15px;background:var(--red);border-radius:2px;}
.view > div > .sec-title:first-child{margin-top:2px;}

.card{background:#fff;border-radius:14px;padding:13px 14px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);margin-bottom:10px;}

/* 상태 표시 */
.loading,.empty{
  text-align:center;color:var(--muted);font-size:13px;
  padding:22px 10px;background:#fff;border-radius:14px;
  margin-bottom:10px;
}
.errbox{
  background:#fff;border-radius:14px;padding:20px 16px;
  border:2px solid var(--red);margin-top:8px;
}
.errbox b{color:var(--red);font-size:14px;}
.errbox p{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.5;}
.errbox .hint{color:#aaa;}
.note{font-size:11px;color:var(--muted);margin-top:12px;text-align:center;}

/* ---------- 히어로 ---------- */
.hero{
  background:var(--black);border-radius:16px;padding:22px 16px;
  position:relative;overflow:hidden;margin-bottom:12px;
}
.hero::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,var(--red) 0 16px,transparent 16px 40px);
  opacity:.28;}
.hero-in{position:relative;}
.hero h3{color:#fff;font-size:23px;letter-spacing:1px;}
.hero .slogan{color:#f3b6bf;font-size:12px;margin-top:6px;font-weight:600;}

/* ---------- 경기 카드 ---------- */
.match{display:flex;align-items:center;justify-content:space-between;}
.team{display:flex;flex-direction:column;align-items:center;gap:5px;width:86px;}
.team .badge{width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:13px;color:#fff;}
.team .b-red{background:var(--red);}
.team .b-blk{background:#444;}
.team span{font-size:11px;font-weight:700;text-align:center;}
.vs{text-align:center;}
.vs .score{font-size:24px;font-weight:800;}
.vs .small{font-size:11px;color:var(--muted);margin-top:2px;}
.dday{display:inline-block;background:var(--red);color:#fff;
  font-size:11px;font-weight:800;padding:3px 10px;border-radius:20px;}
.meta{font-size:12px;color:var(--muted);margin-top:8px;text-align:center;}

.badge-res{font-size:11px;font-weight:800;padding:2px 8px;border-radius:6px;
  color:#fff;display:inline-block;margin-top:3px;}
.win{background:var(--red);}
.draw{background:#888;}
.lose{background:#444;}

/* ---------- 공지 (요약 줄) ---------- */
.notice{display:flex;gap:9px;align-items:flex-start;padding:11px 12px;}
.notice .new{background:var(--red);color:#fff;font-size:9px;font-weight:800;
  padding:2px 6px;border-radius:4px;flex:none;margin-top:1px;}
.notice .dot{width:7px;height:7px;border-radius:50%;background:var(--grey2);
  flex:none;margin-top:5px;}
.notice .n-txt{flex:1;}
.notice .n-txt b{font-size:13px;}
.notice .n-txt p{font-size:11px;color:var(--muted);margin-top:2px;}

/* ---------- 일정 ---------- */
.month-tag{font-size:12px;font-weight:800;color:var(--red);margin:14px 2px 6px;}
.sch{display:flex;gap:11px;align-items:center;}
.sch .date{background:var(--black);color:#fff;border-radius:10px;
  width:50px;height:50px;flex:none;display:flex;flex-direction:column;
  align-items:center;justify-content:center;}
.sch .date .d{font-size:18px;font-weight:800;line-height:1;}
.sch .date .m{font-size:9px;margin-top:2px;}
.sch .info{flex:1;}
.sch .info b{font-size:13px;}
.sch .info p{font-size:11px;color:var(--muted);margin-top:3px;}

/* ---------- 선수단 ---------- */
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.player{background:#fff;border-radius:14px;overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.06);}
.player .photo{height:100px;position:relative;
  background:repeating-linear-gradient(90deg,var(--red) 0 16px,var(--black) 16px 32px);
  display:flex;align-items:center;justify-content:center;}
.player .num{font-size:40px;font-weight:800;color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.4);}
.player .pinfo{padding:9px 10px;}
.player .pinfo b{font-size:13px;}
.player .pos{display:inline-block;background:var(--grey);color:var(--red);
  font-size:10px;font-weight:800;padding:2px 7px;border-radius:5px;margin-top:4px;}
.player .pinfo p{font-size:10px;color:var(--muted);margin-top:5px;line-height:1.4;}

.coach{display:flex;gap:11px;align-items:center;}
.coach .ava{width:44px;height:44px;border-radius:50%;background:var(--black);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:13px;flex:none;}
.coach b{font-size:13px;}
.coach p{font-size:11px;color:var(--muted);margin-top:2px;}

/* ---------- 갤러리 ---------- */
.alb{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.album{border-radius:14px;overflow:hidden;position:relative;height:124px;
  box-shadow:0 2px 8px rgba(0,0,0,.08);text-decoration:none;display:block;}
.album .img{height:100%;display:flex;align-items:center;justify-content:center;
  font-size:32px;}
.a1{background:linear-gradient(135deg,var(--red),var(--red-dark));}
.a2{background:linear-gradient(135deg,#3a3a3a,var(--black));}
.a3{background:linear-gradient(135deg,var(--red-dark),#3a3a3a);}
.a4{background:linear-gradient(135deg,var(--black),var(--red));}
.album .cap{position:absolute;left:0;right:0;bottom:0;
  background:rgba(0,0,0,.55);color:#fff;padding:7px 9px;}
.album .cap b{font-size:12px;}
.album .cap p{font-size:10px;color:#ddd;margin-top:1px;}

/* ---------- 공지 페이지 ---------- */
.npage{display:flex;gap:10px;padding:13px;align-items:flex-start;}
.npage .pin{font-size:15px;flex:none;}
.npage .body{flex:1;}
.npage .body .t{font-size:13px;font-weight:700;}
.npage .body .c{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.55;}
.npage .body .dt{font-size:10px;color:#aaa;margin-top:6px;}

/* ---------- 하단 탭바 ---------- */
.tabbar{
  flex:none;display:flex;background:var(--black);
  border-top:3px solid var(--red);
  padding-bottom:env(safe-area-inset-bottom);
}
.tab{
  flex:1;padding:9px 0 10px;display:flex;flex-direction:column;
  align-items:center;gap:3px;cursor:pointer;border:none;background:none;
}
.tab .ic{font-size:18px;filter:grayscale(1) brightness(2);opacity:.55;}
.tab .lb{font-size:10px;color:#999;font-weight:700;}
.tab.on .ic{filter:none;opacity:1;}
.tab.on .lb{color:#fff;}