/* [생성일] 2026-11-04
   [경위] POSK 제안 시안 v1 — 메인 · 소개+안내 · 공지·모집 게시판 공용 CSS
          (제일클린 sian.css 구조에서 출발, 참고 사이트 Powerlifting America 계열의 남색 + 빨강 + 각진 버튼으로 치환)
   [변경이력]
     - 2026-11-04: 최초 생성
     - 2026-11-04: 판정표 대조 — 최신글 카드 밑줄과 hover 색, 제목 위 막대, 첫 화면 사진 위치 지정 제거 */
/* ── 토큰: 남색 바탕 · 행동색 빨강 하나 · 모서리 0 ── */
:root{
  --bg:#FFFFFF; --soft:#F5F4F0; --navy:#003049; --navy-2:#00213A; --line:#E2E2DD; --line-n:rgba(255,255,255,.18);
  --t-1:#121820; --t-2:#4A5260; --t-3:#7A818C; --n-1:#FFFFFF; --n-2:#B9C6D2;
  --red:#C8102E; --red-2:#A50D26; --red-n:#FF8A9A;
  --f-hero:clamp(64px,9vw,128px); --f-1:clamp(26px,2.6vw,36px); --f-2:20px; --f-3:18px; --f-body:16px; --f-small:13px;
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:40px; --s-5:72px; --s-6:104px;
  --r:0; --wrap:1200px; --gutter:24px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--t-1);font-family:"Pretendard Variable",Pretendard,-apple-system,"Malgun Gothic",sans-serif;font-size:var(--f-body);line-height:1.65;word-break:keep-all}
img{display:block;width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:700;line-height:1.2;letter-spacing:-.02em;color:var(--t-1)}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
dl,dd{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.nw{white-space:nowrap}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* 버튼: 각진 사각, 색 변화만 (71149 커스텀 색상 · 모서리 둥글기) */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;font-weight:700;font-size:var(--f-body);border:2px solid var(--red);border-radius:0;background:var(--red);color:var(--n-1);white-space:nowrap;transition:background-color .2s,color .2s,border-color .2s}
.btn:hover{background:var(--red-2);border-color:var(--red-2)}
.btn--white{background:transparent;border-color:var(--n-1);color:var(--n-1)}
.btn--white:hover{background:var(--n-1);color:var(--navy);border-color:var(--n-1)}
.btn--line{background:transparent;border-color:var(--navy);color:var(--navy)}
.btn--line:hover{background:var(--navy);color:var(--n-1)}
.more{font-weight:700;color:var(--red);border-bottom:1px solid transparent;transition:border-color .2s}
.more:hover{border-bottom-color:var(--red)}
.label{display:block;font-size:var(--f-small);font-weight:700;color:var(--red);letter-spacing:.06em;margin-bottom:var(--s-2)}
.lead{color:var(--t-2);font-size:var(--f-3);margin-top:var(--s-2);max-width:36em}
.btns{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-4)}

/* 헤더: 남색 불투명 */
.hd{background:var(--navy);color:var(--n-1)}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;min-height:72px;gap:var(--s-3)}
.logo{font-weight:800;font-size:24px;line-height:1;color:var(--n-1);letter-spacing:.04em}
.logo small{display:block;font-weight:500;font-size:11px;color:var(--n-2);margin-top:5px;letter-spacing:0}
.nav{display:flex;gap:32px;font-size:15px;font-weight:600;color:var(--n-2)}
.nav a:hover,.nav a[aria-current]{color:var(--n-1)}
.hd-r{display:flex;align-items:center;gap:var(--s-2)}
.hd .btn{min-height:42px;padding:0 20px;font-size:14px}
.menu-t{display:none;background:none;border:1px solid var(--n-2);padding:8px 14px;font:inherit;font-size:14px;color:var(--n-1);cursor:pointer}
.nav-m{display:none;border-top:1px solid var(--line-n);background:var(--navy)}
.nav-m.open{display:block}
.nav-m a{display:block;padding:14px var(--gutter);border-bottom:1px solid var(--line-n);font-size:16px;color:var(--n-1)}

/* 첫 화면: 전면 사진 + 남색 단색 덮개 + 왼쪽 글 (비주얼 섹션 · 71303 음영 색상) */
.hero{position:relative;background:var(--navy-2) url(../img/hero.jpg) center/cover no-repeat;display:flex;align-items:center;min-height:calc(100dvh - 72px);max-height:860px}
.hero::before{content:"";position:absolute;inset:0;background:rgba(0,33,58,.38)}
.hero .wrap{position:relative;width:100%;padding-top:var(--s-6);padding-bottom:var(--s-6)}
.hero-t{max-width:620px}
.hero-t .label{color:var(--n-1);font-size:15px}
.hero-t h1{font-size:var(--f-hero);font-weight:800;line-height:.95;letter-spacing:.02em;color:var(--n-1)}
.hero-t p{max-width:26em;margin-top:var(--s-3);font-size:var(--f-2);color:var(--n-1)}
.hero-b{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-4)}

/* 섹션 · 띠 순환 흰 > 연베이지 > 남색 */
.sec{padding-top:var(--s-6);padding-bottom:var(--s-6)}
.sec h2{font-size:var(--f-1)}
.sec--soft{background:var(--soft)}
.sec--navy{background:var(--navy);color:var(--n-1)}
.sec--navy h2,.sec--navy h3{color:var(--n-1)}
.sec--navy .lead{color:var(--n-2)}
.sec--navy .label{color:var(--red-n)}
.sec-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:var(--s-2)}
.h2-bar{display:block}

/* 최근 소식: 최신글 4칸 같은 크기 (71189 리스트 항목 · 사진 + 제목 + 작성일) */
.posts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3);margin-top:var(--s-4)}
.post{display:block;background:var(--bg)}
.post img{aspect-ratio:4/3;object-fit:cover}
.post-b{padding:18px 4px 20px}
.post b{display:block;font-size:17px;font-weight:700;color:var(--t-1);line-height:1.4}
.post small{display:block;color:var(--t-3);font-size:var(--f-small);margin-top:8px}

/* 2칸: 사진 + 글 */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-5);align-items:center}
.two img{aspect-ratio:4/3;object-fit:cover}
.two--r>img{order:2}

/* 이름/값 줄 목록 */
.dl-list{margin-top:var(--s-4)}
.dl-list div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:var(--s-3);padding:16px 0;border-top:1px solid var(--line)}
.dl-list div:last-child{border-bottom:1px solid var(--line)}
.dl-list dt{color:var(--t-1);font-weight:700}
.dl-list dd{color:var(--t-2)}
.sec--navy .dl-list div{border-color:var(--line-n)}
.sec--navy .dl-list dt{color:var(--n-1)}
.sec--navy .dl-list dd{color:var(--n-2)}

/* 세 종목: 사진 3장 + 이름 + 한 줄 */
.lifts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3);margin-top:var(--s-4)}
.lift img{aspect-ratio:4/3;object-fit:cover}
.lift b{display:block;font-size:var(--f-2);font-weight:700;margin-top:var(--s-2)}
.lift p{color:var(--t-2);font-size:15px;margin-top:4px}

/* 지난 대회: 줄 목록 (싱가포르 이벤트 목록 계열, 텍스트 위젯 + 가로선) */
.meets{margin-top:var(--s-4);border-top:1px solid var(--navy)}
.meets li{display:grid;grid-template-columns:130px minmax(0,1fr) 110px;gap:var(--s-3);align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line)}
.meets .d{font-size:15px;font-weight:700;color:var(--red)}
.meets b{font-size:var(--f-3);font-weight:700}
.meets b small{display:block;font-size:14px;font-weight:400;color:var(--t-3);margin-top:2px}
.meets .n{text-align:right;color:var(--t-2);font-size:15px}
.src{font-size:var(--f-small);color:var(--t-3);margin-top:var(--s-2)}

/* 하위 페이지 머리 */
.ph{position:relative;background:var(--navy-2) url(../img/hall.jpg) center 40%/cover no-repeat}
.ph::before{content:"";position:absolute;inset:0;background:rgba(0,33,58,.62)}
.ph .wrap{position:relative;padding-top:var(--s-5);padding-bottom:var(--s-5)}
.ph h1{font-size:clamp(32px,3.6vw,48px);font-weight:800;color:var(--n-1)}
.ph p{max-width:34em;margin-top:var(--s-2);font-size:var(--f-3);color:var(--n-2)}
.ph--soft{background:var(--soft)}
.ph--soft::before{display:none}
.ph--soft h1{color:var(--t-1)}
.ph--soft p{color:var(--t-2)}

/* 페이지 안 이동 메뉴 · 게시판 분류 (메뉴 리스트 위젯: 글자 + 밑줄) */
.tabs{display:flex;flex-wrap:wrap;gap:4px 28px;border-bottom:1px solid var(--line);background:var(--bg)}
.tabs a{display:block;padding:16px 0 14px;font-weight:600;color:var(--t-2);border-bottom:3px solid transparent;margin-bottom:-1px}
.tabs a:hover{color:var(--t-1)}
.tabs a[aria-current]{color:var(--t-1);border-bottom-color:var(--red)}
.tabs-wrap{position:relative}

/* 소개 페이지 이동 줄: 버튼 위젯 「탭 버튼」 형태 (71149 개별 버튼이 하나로 붙어 탭처럼) + 섹션 ID 앵커 (70677) */
.tabbtn{display:flex;flex-wrap:wrap;margin-top:var(--s-4)}
.tabbtn a{flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 18px;border:1px solid var(--navy);margin:0 -1px -1px 0;font-weight:600;color:var(--navy);background:var(--bg);transition:background-color .2s,color .2s}
.tabbtn a:hover{background:var(--navy);color:var(--n-1)}

/* 체급 줄 */
.classes{margin-top:var(--s-3)}
.classes div{display:grid;grid-template-columns:80px minmax(0,1fr);gap:var(--s-2);padding:14px 0;border-top:1px solid var(--line)}
.classes div:last-child{border-bottom:1px solid var(--line)}
.classes dt{font-weight:700}
.classes dd{color:var(--t-2);letter-spacing:.01em}

/* 게시판 목록 (게시판 위젯 기본 목록: 카테고리 · 제목 · 작성일 · 조회) */
.board{width:100%;border-collapse:collapse;margin-top:var(--s-3);border-top:1px solid var(--navy)}
.board th{font-size:var(--f-small);font-weight:600;color:var(--t-3);text-align:left;padding:12px 8px;border-bottom:1px solid var(--line)}
.board td{padding:18px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.board .c{width:90px;font-size:14px;font-weight:700}
.board .c--n{color:var(--navy)}
.board .c--r{color:var(--red)}
.board .c--g{color:#3B7A57}
.board .t a{font-weight:600;color:var(--t-1)}
.board .t a:hover{text-decoration:underline}
.board .dt,.board .v{width:110px;color:var(--t-3);font-size:14px;white-space:nowrap}
.board .v{width:70px;text-align:right}
.pager{display:flex;justify-content:center;gap:6px;margin-top:var(--s-4)}
.pager a{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;border:1px solid var(--line);color:var(--t-2);font-size:14px}
.pager a[aria-current]{background:var(--navy);border-color:var(--navy);color:var(--n-1)}

/* 푸터 */
.ft{background:var(--navy-2);color:var(--n-2);padding-top:var(--s-5);padding-bottom:var(--s-4);font-size:var(--f-small)}
.ft-top{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:var(--s-4);padding-bottom:var(--s-4);border-bottom:1px solid var(--line-n)}
.ft h3{font-size:var(--f-small);color:var(--n-1);margin-bottom:var(--s-2);letter-spacing:.04em}
.ft li{margin-bottom:6px}
.ft a:hover{color:var(--n-1)}
.ft-bot{padding-top:var(--s-3);line-height:1.9}
.ft-bot a{text-decoration:underline}
.ft-ex{margin-top:var(--s-2);color:#7C8EA0}

/* 제작 메모 (시안 전용, 아임웹에 안 들어감) */
.memo-btn{position:fixed;right:16px;bottom:16px;z-index:30;background:var(--bg);color:var(--t-2);border:1px solid #C9CFD8;border-radius:999px;font:inherit;font-size:12px;padding:8px 14px;cursor:pointer}
.memo{display:none;position:fixed;right:16px;bottom:56px;z-index:31;width:min(380px,calc(100vw - 32px));max-height:70vh;overflow:auto;background:var(--bg);color:var(--t-1);border:1px solid #C9CFD8;padding:var(--s-3);font-size:14px;line-height:1.6}
.memo.open{display:block}
.memo li{padding-left:14px;position:relative;margin-bottom:8px}
.memo li::before{content:"-";position:absolute;left:0}

/* 등장: 투명도만 (71169 페이드인) */
.fade{opacity:0;transition:opacity .6s}
.fade.in{opacity:1}
@media (prefers-reduced-motion:reduce){.fade{opacity:1;transition:none}}

/* 반응형 */
@media (max-width:1024px){
  .posts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav{gap:20px;font-size:14px}
}
@media (max-width:767px){
  :root{--s-5:48px;--s-6:64px}
  .nav{display:none}
  .menu-t{display:block}
  .hd .btn{display:none}
  .hero{min-height:560px}
  .hero::before{background:rgba(0,33,58,.5)}
  .hero .wrap{padding-top:var(--s-5);padding-bottom:var(--s-5)}
  .hero-b .btn,.btns .btn{flex:1 1 100%}
  .two,.lifts{grid-template-columns:minmax(0,1fr);gap:var(--s-3)}
  /* 최신글 그리드 「모바일 한줄 개수」 2 (2026-10-16 바테정원 실측) */
  .posts{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3) var(--s-2)}
  .post b{font-size:15px}
  .two--r>img{order:0}
  .dl-list div{grid-template-columns:96px minmax(0,1fr);gap:var(--s-2)}
  .meets li{grid-template-columns:minmax(0,1fr) auto;gap:4px var(--s-2)}
  .meets .d{grid-column:1/-1}
  .board thead,.board .v{display:none}
  .board tr{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;padding:14px 0;border-bottom:1px solid var(--line)}
  .board td{padding:0;border:0}
  .board .c{width:auto}
  .board .t{grid-column:1/-1;grid-row:2}
  .board .dt{width:auto;text-align:right}
  .tabs{gap:4px 20px;overflow-x:auto;flex-wrap:nowrap}
  .tabs a{white-space:nowrap}
  .tabbtn a{flex:1 1 50%;font-size:15px}
  .ft-top{grid-template-columns:1fr 1fr}
}