@charset "utf-8";
/* CONNECT 2027 — 제작: 주식회사 찬스 */

:root{
  --brand:#0a73ce;          /* 선택 탭 파랑 (원본 이미지 실측값) */
  --ink:#212121;
  --panel-bg:#eceff4;       /* 임원소개 섹션 배경 (원본 이미지 실측값) */
  --line:#e7e7e7;
  --hd-h:90px;
  --snsbar-h:0px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:#fff;color:var(--ink);
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,
              "Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  word-break:keep-all;line-height:1.5;
  padding-bottom:var(--snsbar-h);
}
img{display:block;width:100%;height:auto;border:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}

/* ---------- PC / 모바일 전환 (원본 아임웹과 동일하게 768px) ---------- */
.only-pc{display:block}
.only-mo{display:none}
@media (max-width:768px){
  .only-pc{display:none}
  .only-mo{display:block}
}

/* ---------- 헤더 ---------- */
.hd{background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:60}
.hd-bar{height:var(--hd-h);display:flex;align-items:center;gap:clamp(18px,2.4vw,44px);
  max-width:1480px;margin:0 auto;padding:0 clamp(16px,2.2vw,36px)}
.hd-logo{flex:0 0 auto;display:inline-flex;align-items:center}
.hd-logo img{width:auto;height:clamp(24px,2vw,30px)}
.gnb{flex:1 1 auto;display:flex;align-items:center;justify-content:space-between;
  gap:clamp(10px,1.4vw,26px);overflow-x:auto;scrollbar-width:none}
.gnb::-webkit-scrollbar{display:none}
.gnb-link{padding:8px 2px;font-size:clamp(12.5px,1.05vw,15px);font-weight:600;color:var(--ink);
  white-space:nowrap;transition:color .15s}
.gnb-link:hover{color:var(--brand)}
.gnb-link[aria-current="page"]{color:var(--brand)}

/* 모바일 헤더 */
.hd-mo{display:none}
@media (max-width:768px){
  .hd-bar{display:none}
  .hd-mo{display:block}
  .hd-mo-bar{height:48px;display:flex;align-items:center;padding:0 14px;border-bottom:1px solid var(--line)}
  .hd-burger{width:34px;height:34px;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:5px;margin-right:6px}
  .hd-burger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px}
  .hd-mo-title{flex:1;align-self:stretch;display:flex;align-items:center;justify-content:center;
    font-size:18px;font-weight:700;letter-spacing:-.01em;margin-right:40px}
  .subnav{display:flex;gap:14px;align-items:center;height:47px;padding:0 16px;overflow-x:auto;
    justify-content:center;justify-content:safe center;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .subnav::-webkit-scrollbar{display:none}
  .subnav a{font-size:13.5px;font-weight:500;white-space:nowrap;padding:4px 0}
  .subnav [aria-current="page"]{color:var(--brand);font-weight:700}
  .hd-mo-title img{width:auto;height:26px}

  /* 후보자 운영소신 — 눌러서 후보자 목록 펼치기 */
  .subnav-more{display:flex;align-items:center;gap:5px;height:100%;
    font-size:13.5px;font-weight:500;white-space:nowrap}
  .subnav-more .caret{width:0;height:0;border-left:4px solid transparent;
    border-right:4px solid transparent;border-top:5px solid currentColor;
    transition:transform .22s}
  .subnav-more[aria-expanded="true"] .caret{transform:rotate(180deg)}
  .cand-list{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;background:#fff;
    max-height:0;visibility:hidden;border-top:1px solid transparent;
    transition:max-height .26s ease,visibility 0s linear .26s,border-color .26s}
  .cand-list.is-open{max-height:320px;visibility:visible;border-top-color:var(--line);
    transition:max-height .26s ease,visibility 0s,border-color .26s}
  .cand-list a{display:flex;align-items:center;justify-content:center;min-height:46px;
    padding:8px 10px;font-size:13.5px;font-weight:500;text-align:center;
    border-bottom:1px solid #f2f2f2}
  .cand-list a:nth-child(odd){border-right:1px solid #f2f2f2}
  .cand-list a[aria-current="page"]{color:var(--brand);font-weight:700;background:var(--panel-bg)}
}

/* 모바일 서랍 메뉴 */
.drawer{position:fixed;inset:0;z-index:200;visibility:hidden}
.drawer[data-open="true"]{visibility:visible}
.drawer-dim{position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:0;transition:opacity .28s}
.drawer[data-open="true"] .drawer-dim{opacity:1}
.drawer-panel{position:absolute;inset:0 auto 0 0;width:min(82vw,320px);background:#fff;
  transform:translateX(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;overflow-y:auto}
.drawer[data-open="true"] .drawer-panel{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;height:56px;
  padding:0 8px 0 20px;border-bottom:1px solid var(--line)}
.drawer-head strong{font-size:16px;font-weight:700}
.drawer-close{width:44px;height:44px;font-size:22px;line-height:1;color:#666}
.drawer nav{padding:8px 0 28px}
.drawer nav a{display:block;padding:13px 20px;font-size:15px;font-weight:600;border-bottom:1px solid #f2f2f2}
.drawer nav .lv2{padding-left:34px;font-size:14px;font-weight:500;color:#4a4a4a}
.drawer nav a:hover{color:var(--brand);background:var(--panel-bg)}

/* ---------- 섹션 ---------- */
.sec{position:relative}

/* 이미지 틀: PC/모바일 비율을 미리 잡아 화면 밀림(레이아웃 시프트)을 막는다.
   <source media>로 화면 크기에 맞는 한 장만 내려받는다. */
.fig{position:relative;width:100%;overflow:hidden;background:var(--panel-bg)}
.fig>picture{position:absolute;inset:0;display:block}
.fig img{width:100%;height:100%;object-fit:fill}
.fig-hero{aspect-ratio:1920/2748;background:#c9ccd0}
.fig-ofchead{aspect-ratio:1920/340}
.fig-contact{aspect-ratio:1920/2501;background:#1e3463}
@media (max-width:768px){
  .fig-hero{aspect-ratio:984/1712}
  .fig-ofchead{aspect-ratio:984/255}
  .fig-contact{aspect-ratio:984/1942}
}

/* ---------- 선거직 임원 소개 ---------- */
.officers{background:var(--panel-bg)}

/* 탭 밴드: 원본 1920x180 / 모바일 984x160 비율 유지 (2026-09-04 모바일 버튼 확대) */
.tabband{position:relative;width:100%;aspect-ratio:1920/180;background:var(--panel-bg)}
@media (max-width:768px){.tabband{aspect-ratio:984/160}}
.tab{position:absolute;left:var(--l);top:var(--t);width:var(--w);height:var(--h);
  padding:0;line-height:0;border-radius:2px;overflow:hidden}
@media (max-width:768px){
  .tab{left:var(--ml);top:var(--mt);width:var(--mw);height:var(--mh)}
}
.tab picture{position:absolute;inset:0;display:block}
.tab img{width:100%;height:100%;object-fit:fill}
.tab .on{opacity:0;transition:opacity .18s ease}
.tab:hover .on,.tab:focus-visible .on,
.tab[aria-selected="true"] .on,.tab[aria-current="page"] .on{opacity:1}
.tab[aria-selected="true"],.tab[aria-current="page"]{cursor:default}

/* 프로필 본문: 8장을 겹쳐 두고 교차 전환 */
.ofc-body{position:relative;width:100%;aspect-ratio:1920/1109;background:var(--panel-bg)}
@media (max-width:768px){.ofc-body{aspect-ratio:984/811}}
.ofc-panel{position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .26s ease,visibility 0s linear .26s}
.ofc-panel.is-active{opacity:1;visibility:visible;transition:opacity .26s ease var(--fx-delay,0s),visibility 0s}
.ofc-panel picture{position:absolute;inset:0;display:block}
.ofc-panel img{width:100%;height:100%;object-fit:fill}
/* 즉시 전환 모드 */
body[data-fx="instant"] .ofc-panel{transition:none!important}

/* ---------- 이미지 위 클릭영역(핫스팟) ---------- */
.hs{position:absolute;left:var(--l);top:var(--t);width:var(--w);height:var(--h);
  border-radius:8px;z-index:2}
@media (max-width:768px){
  .hs{left:var(--ml,var(--l));top:var(--mt,var(--t));width:var(--mw,var(--w));height:var(--mh,var(--h))}
}
.hs::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:currentColor;opacity:0;transition:opacity .18s}
.hs:hover::after,.hs:focus-visible::after{opacity:.13}
.hs-tel1,.hs-tel2,.hs-tel3,.hs-pledge{color:#fff}
.hs-insta,.hs-fb{color:#0a3c8c}
.hs[aria-disabled="true"]{cursor:default}
.hs[aria-disabled="true"]::after{display:none}

/* ---------- 전국 간담회 지역 박스 (PC: 마우스 오버 / 모바일: 터치) ---------- */
.mapboxes{position:absolute;inset:0;z-index:2;pointer-events:none}
.mapboxes-mo{display:none}
.mapbox{position:absolute;left:var(--l);top:var(--t);width:var(--w);height:var(--h);
  pointer-events:auto;display:block;-webkit-tap-highlight-color:transparent}
.mapboxes-mo .mapbox{left:var(--ml);top:var(--mt);width:var(--mw);height:var(--mh);cursor:pointer}
.mapbox img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;
  opacity:0;transition:opacity .18s ease}
@media (hover:hover){
  .mapbox:hover img,.mapbox:focus-visible img{opacity:1}
}
/* 손으로 누르는 동안 + 누른 뒤 선택 상태 유지 */
.mapbox:active img,.mapbox.is-on img{opacity:1}
@media (max-width:768px){
  .mapboxes-pc{display:none}
  .mapboxes-mo{display:block}
}

/* ---------- 히어로 영상 (모니터 화면 위) ---------- */
.hs-video{color:#fff;border-radius:0;z-index:3}
.hs-video::after{opacity:0}
.hs-video:hover::after,.hs-video:focus-visible::after{opacity:.08}
.video-frame{position:absolute;left:var(--l);top:var(--t);width:var(--w);height:var(--h);
  z-index:4;border:0;background:#000}
@media (max-width:768px){
  .video-frame{left:var(--ml);top:var(--mt);width:var(--mw);height:var(--mh)}
}

/* ---------- 모바일 인스타/페이스북 고정 바 ---------- */
.snsbar{display:none}
@media (max-width:768px){
  body{--snsbar-h:calc((100vw * 177 / 984) + env(safe-area-inset-bottom,0px))}
  .snsbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:150;background:#1e3463;
    padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 -4px 16px rgba(0,0,0,.22)}
  .snsbar-inner{position:relative}
  .snsbar a{position:absolute;top:0;height:100%;width:50%}
  .snsbar a::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;transition:opacity .18s}
  .snsbar a:active::after{opacity:.16}
  .snsbar .sb-insta{left:0}
  .snsbar .sb-fb{left:50%}
}

/* ---------- 푸터 ---------- */
.ft{background:#f5f6f8;border-top:1px solid var(--line);padding:34px 20px 44px;
  font-size:13px;color:#5a5f66;text-align:center}
.ft p{margin:0 0 8px}
.ft a{text-decoration:underline;text-underline-offset:2px}
.ft a:hover{color:var(--brand)}
.ft-links{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:12px;
  font-weight:600;color:var(--ink)}
.ft-credit{margin-top:14px;font-size:12.5px;color:#7a7f87}

/* ---------- 전환효과 비교 스위치 (?compare=1 일 때만 노출) ---------- */
.fxbar{display:none;position:fixed;right:14px;bottom:14px;z-index:300;background:#111a2e;color:#fff;
  border-radius:999px;padding:7px 8px 7px 16px;font-size:13px;box-shadow:0 8px 24px rgba(0,0,0,.3);
  align-items:center;gap:10px}
body[data-compare="1"] .fxbar{display:flex}
@media (max-width:768px){body[data-compare="1"] .fxbar{bottom:calc(var(--snsbar-h) + 14px)}}
.fxbar b{font-weight:600;letter-spacing:-.01em}
.fxbar button{border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:700;
  background:#2b3a5c;color:#cfd8ea}
.fxbar button[aria-pressed="true"]{background:#fff;color:#111a2e}

/* ---------- 본문 페이지(운영소신 등) ---------- */
.doc img{display:block}

/* 후보자별 페이지 — 콘텐츠 오기 전까지 비워둔 상태 */
.empty-page{min-height:calc(100vh - 90px - var(--snsbar-h));background:#fff}
@media (max-width:768px){.empty-page{min-height:calc(100vh - 95px - var(--snsbar-h))}}

/* ---------- 글 페이지(개인정보처리방침) ---------- */
.page{max-width:840px;margin:0 auto;padding:44px 20px 72px}
.page h1{font-size:clamp(22px,4.2vw,30px);font-weight:800;letter-spacing:-.02em;margin:0 0 10px}
.page .lead{color:#5a5f66;font-size:14px;margin:0 0 34px}
.page h2{font-size:clamp(16px,2.6vw,18px);font-weight:700;margin:34px 0 10px;
  padding-left:11px;border-left:4px solid var(--brand);line-height:1.35}
.page p,.page li{font-size:15px;line-height:1.78;color:#33383f}
.page ul,.page ol{margin:0 0 4px;padding-left:20px}
.page li{margin:3px 0}
.page table{width:100%;border-collapse:collapse;margin:8px 0 4px;font-size:14.5px}
.page th,.page td{border:1px solid #dfe3e8;padding:10px 12px;text-align:left;vertical-align:top}
.page th{background:var(--panel-bg);font-weight:700;white-space:nowrap}
.page .note{background:var(--panel-bg);border-radius:10px;padding:16px 18px;margin-top:30px;font-size:14px;color:#454a52}
.page a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.page .back{display:inline-block;margin-top:34px;padding:11px 22px;border-radius:999px;
  background:var(--brand);color:#fff;font-size:14px;font-weight:700;text-decoration:none}
.page .back:hover{filter:brightness(1.08)}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}