@charset "UTF-8";
/* =====================================================================
   GS칼텍스 통합노동조합 — 공식 홈페이지 스타일시트
   ---------------------------------------------------------------------
   확정 시안 : C 코퍼레이트
   설계 원칙 : 모바일 우선. 조합원 다수가 휴대폰으로 가입신청합니다.
   색 체계   : GS 3색을 역할별로 배분
               블루  = 기본 아이덴티티 (링크·라벨·선택)
               그린  = 보호와 승인     (체크·승인 상태·완료)
               오렌지= 행동           (가입신청 버튼·대기 수치)
   ===================================================================== */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

/* ---------------------------------------------------------------------
   GS칼텍스 공식 서체 슬롯
   공식 폰트 파일(woff2)을 assets/fonts/ 에 넣고 주석을 해제하세요.
   파일이 없으면 Pretendard 로 대체되어 레이아웃이 깨지지 않습니다.
   --------------------------------------------------------------------- */
/*
@font-face{font-family:"GSCaltex";src:url("../fonts/GSCaltex-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
*/

/* =====================================================================
   1. 토큰
   ===================================================================== */
:root{
  --font-sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,
              "Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",system-ui,sans-serif;
  --font-brand:"GSCaltex",var(--font-sans);
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --wrap:1420px;
  --wrap-narrow:880px;
  --gut:clamp(18px,4.5vw,76px);

  --r-sm:6px;
  --r:12px;
  --r-lg:18px;
  --r-pill:999px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --t:.25s var(--ease);
}

/* ── 기본 팔레트 : GS 3색 ─────────────────────────────────────── */
:root,
[data-theme="GS"]{
  --paper:#F4F7FB;
  --paper2:#E9EFF6;
  --card:#FFFFFF;

  --ink:#12181F;
  --ink2:#3E4854;
  --ink3:#626E7D;
  --rule:#DCE2E9;
  --rule2:#B5C0CE;

  --acc:#0E76BC;          /* 블루 — 아이덴티티 */
  --acc-lite:#46A0DC;     /* 짙은 면 위에서 쓰는 밝은 블루 */
  --wash:#E5F0F9;
  --cta:#EF821E;          /* 오렌지 — 행동 */
  --on-cta:#FFFFFF;
  --check:#00A69C;        /* 그린 — 보호·승인 */

  --deep:#0A1722;
  --deep-ink:#EAF0F6;
  --hero:linear-gradient(115deg,#0A1722 0%,#0F2E45 52%,#16506B 100%);

  --m1:#0E76BC; --m2:#00A69C; --m3:#EF821E;   /* 그래픽 3색 (밝은 면) */
  --g1:#4BA6E0; --g2:#00C4B6; --g3:#FF9A3D;   /* 그래픽 3색 (짙은 면) */

  --warn-bg:#FDF1E4; --warn-line:#F6C692; --warn-ink:#9A5410;
  --ok-bg:#E2F4F2;   --ok-line:#9BD8D2;   --ok-ink:#00776F;
  --err-bg:#FEF3F2;  --err-line:#FECDCA;  --err-ink:#B42318;

  --shadow-sm:0 1px 2px rgba(12,32,50,.05);
  --shadow:0 2px 6px rgba(12,32,50,.06),0 14px 32px rgba(12,32,50,.10);
  --shadow-lg:0 1px 3px rgba(12,32,50,.07),0 18px 44px rgba(12,32,50,.13);

  --chip-bg:rgba(0,0,0,.05);
  --chip-line:rgba(0,0,0,.15);
}

/* ── 대체 팔레트 : 딥페트롤 단색 (config.php 의 SITE_THEME='PETROL') ── */
[data-theme="PETROL"]{
  --paper:#EEEFEA;
  --paper2:#E2E4DC;
  --card:#F8F9F6;

  --ink:#111310;
  --ink2:#454A44;
  --ink3:#6B6F65;
  --rule:#D1D4C9;
  --rule2:#B7BBAD;

  --acc:#0F5348;
  --acc-lite:#4FB69F;
  --wash:#E3EAE6;
  --cta:#0F5348;
  --on-cta:#F3F4F1;
  --check:#0F5348;

  --deep:#0E1110;
  --deep-ink:#EDEFEA;
  --hero:linear-gradient(115deg,#0B0E0D 0%,#14201C 52%,#1C3830 100%);

  --m1:#0F5348; --m2:#4E9484; --m3:#98BEB3;
  --g1:#5FC9AF; --g2:#3B8C79; --g3:#AEDDCE;

  --warn-bg:#FBF3E3; --warn-line:#E6D3A8; --warn-ink:#7A5714;
  --ok-bg:#E6EFE9;   --ok-line:#B6D2C1;   --ok-ink:#155E3F;
}

/* =====================================================================
   2. 리셋
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.7;
  word-break:keep-all;            /* 한글 단어 단위 줄바꿈 */
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}

img,svg,canvas{max-width:100%;height:auto;vertical-align:middle}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:800;line-height:1.28;letter-spacing:-.035em;text-wrap:balance}
table{border-collapse:collapse;width:100%}

:focus-visible{outline:2.5px solid var(--acc);outline-offset:3px;border-radius:3px}

.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}

.skip-link{
  position:absolute;left:50%;top:-80px;transform:translateX(-50%);z-index:999;
  background:var(--deep);color:#fff;padding:12px 22px;border-radius:0 0 var(--r-sm) var(--r-sm);
  transition:top var(--t);
}
.skip-link:focus{top:0}

/* =====================================================================
   3. 레이아웃 기본
   ===================================================================== */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap--narrow{max-width:var(--wrap-narrow)}

.sec{padding-block:clamp(38px,6vw,78px)}
.sec--alt{background:var(--paper2)}

.eyeb{
  display:block;font-size:14px;font-weight:700;letter-spacing:-.005em;
  color:var(--ink2);text-transform:uppercase;
}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* 제목 스케일 */
.t-hero{font-size:clamp(30px,7vw,54px);font-weight:900;letter-spacing:-.05em;line-height:1.08}
.t-sec {font-size:clamp(24px,5vw,36px);font-weight:900;letter-spacing:-.045em;line-height:1.16}
.t-card{font-size:clamp(19px,2.4vw,22px);font-weight:800;letter-spacing:-.04em}
.t-sub {font-size:19px;font-weight:800;letter-spacing:-.035em}

/* 섹션 헤더 — 좁은 화면은 쌓고, 넓으면 좌 제목 / 우 설명 */
.sec__hd{margin-bottom:clamp(22px,3.4vw,38px)}
.sec__hd .eyeb{margin-bottom:12px}
.sec__hd .lead{margin-top:14px;font-size:clamp(15px,1.8vw,18px);color:var(--ink2);line-height:1.8;max-width:70ch}

@media (min-width:900px){
  .sec__hd{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
           column-gap:clamp(28px,4vw,64px);align-items:end}
  .sec__hd .eyeb{grid-column:1;grid-row:1}
  .sec__hd .t-sec{grid-column:1;grid-row:2}
  .sec__hd .lead{grid-column:2;grid-row:2;margin-top:0;align-self:end;max-width:46ch}
}

/* =====================================================================
   4. 버튼
   ===================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:13px 24px;border-radius:8px;border:1px solid transparent;
  font-size:15.5px;font-weight:700;letter-spacing:-.015em;text-align:center;
  transition:var(--t);
}
.btn--p{background:var(--cta);color:var(--on-cta);box-shadow:var(--shadow-sm)}
.btn--p:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:var(--shadow)}
.btn--d{background:var(--deep);color:#fff}
.btn--d:hover{transform:translateY(-1px)}
.btn--o{border-color:var(--rule2);color:var(--ink);background:var(--card)}
.btn--o:hover{border-color:var(--ink3);background:var(--paper2)}
.btn--sm{min-height:40px;padding:9px 17px;font-size:14px}
.btn--lg{min-height:54px;padding:16px 30px;font-size:16.5px}
.btn--block{width:100%}
.btn[disabled],.btn.is-off{opacity:.45;pointer-events:none}
.btn svg{flex:none;transition:transform var(--t)}
.btn:hover svg{transform:translateX(3px)}

/* 짙은 면 위의 테두리 버튼 */
.on-deep .btn--o{border-color:rgba(255,255,255,.4);color:#fff;background:transparent}
.on-deep .btn--o:hover{background:rgba(255,255,255,.1)}

.tlink{
  display:inline-flex;align-items:center;gap:9px;
  font-size:15px;font-weight:700;letter-spacing:-.015em;
  padding-bottom:3px;border-bottom:1.5px solid currentColor;
}
.tlink svg{transition:transform var(--t)}
.tlink:hover svg{transform:translateX(3px)}

/* =====================================================================
   5. 상단바 · 헤더
   ===================================================================== */
.topbar{background:var(--deep);color:rgba(255,255,255,.8);font-size:13px}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:40px;flex-wrap:wrap}
.topbar__note{display:flex;align-items:center;gap:9px;font-weight:500}
.topbar__dot{width:6px;height:6px;border-radius:50%;background:var(--acc-lite);flex:none}
.topbar__link{display:inline-flex;align-items:center;gap:6px;flex:none;padding:5px 12px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(255,255,255,.06);font-size:11.5px;font-weight:700;letter-spacing:.08em;color:rgba(255,255,255,.72);transition:var(--t)}
.topbar__link:hover{color:#fff;border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.14)}

.header{position:sticky;top:0;z-index:100;background:var(--card);border-bottom:1px solid var(--rule)}
.header__in{display:flex;align-items:center;gap:16px;min-height:64px}

.brand{display:inline-flex;align-items:center;gap:11px;margin-right:auto}
.brand::before{content:"";width:18px;height:2px;background:var(--cta);flex:none}
.brand__name{font-family:var(--font-brand);font-size:17px;font-weight:800;letter-spacing:-.04em;color:var(--ink)}

.nav{display:flex;gap:24px}
.nav a{position:relative;font-size:15.5px;font-weight:500;color:var(--ink2);padding-block:4px;transition:color var(--t)}
.nav a:hover{color:var(--ink)}
.nav a.on{color:var(--ink);font-weight:700}
.nav a.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--acc)}

.header__act{display:flex;align-items:center;gap:12px}
.header__console{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;color:var(--ink3)}
.header__console:hover{color:var(--ink)}

.navtoggle{display:none;width:46px;height:46px;border:1px solid var(--rule);border-radius:var(--r-sm);position:relative;background:var(--card)}
.navtoggle span,.navtoggle span::before,.navtoggle span::after{
  position:absolute;left:50%;width:19px;height:2px;background:var(--ink);
  transform:translateX(-50%);border-radius:2px;transition:var(--t);
}
.navtoggle span{top:50%;margin-top:-1px}
.navtoggle span::before{content:"";top:-6px;left:0;transform:none}
.navtoggle span::after{content:"";top:6px;left:0;transform:none}
.navtoggle[aria-expanded="true"] span{background:transparent}
.navtoggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.navtoggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* =====================================================================
   6. 히어로
   ===================================================================== */
.hero{
  position:relative;overflow:hidden;
  background:var(--hero);color:var(--deep-ink);
  padding-block:clamp(34px,5vw,66px) clamp(28px,3.8vw,52px);
  /* 짙은 면 전용 토큰 재정의 — 내부 요소가 자동으로 반전됩니다 */
  --ink:var(--deep-ink);
  --ink2:rgba(255,255,255,.82);
  --ink3:rgba(255,255,255,.66);
  --rule:rgba(255,255,255,.14);
  --rule2:rgba(255,255,255,.24);
  --acc:var(--acc-lite);
  --m1:var(--g1); --m2:var(--g2); --m3:var(--g3);
  --chip-bg:rgba(255,255,255,.09);
  --chip-line:rgba(255,255,255,.22);
}
.hero__in{position:relative;z-index:2;max-width:760px}
.hero__meta{display:flex;align-items:center;gap:11px;margin-bottom:clamp(14px,2vw,22px)}
.hero__meta i{width:6px;height:6px;background:var(--acc);flex:none;display:block}
.hero__meta span{font-size:14px;font-weight:500;color:var(--ink2)}

.hero__t{margin-bottom:clamp(16px,2.2vw,24px)}
.hero__t span{display:block}
.hero__t span:nth-child(2){color:var(--acc-lite)}

/* 배경 그래픽 — 좁은 화면에서는 감춥니다 */
.hero__gfx{display:none}
@media (min-width:900px){
  .hero__gfx{
    display:block;position:absolute;z-index:1;
    right:-5%;top:50%;transform:translateY(-50%);
    width:min(54%,600px);aspect-ratio:1/1;opacity:.6;pointer-events:none;
  }
}

/* 직군 칩 */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:clamp(14px,2vw,20px)}
.chips span{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 15px 8px 13px;border-radius:var(--r-pill);
  background:var(--chip-bg);border:1px solid var(--chip-line);
  font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink);
}
.chips i{width:9px;height:9px;border-radius:50%;flex:none}

/* 핵심 메시지 3종 */
.claims{border-top:1px solid var(--rule);margin-bottom:clamp(18px,2.6vw,30px);max-width:660px}
.claims li{
  display:flex;gap:16px;align-items:baseline;
  padding-block:9px;border-bottom:1px solid var(--rule);
  opacity:.62;transition:opacity .45s;
}
.claims li.on{opacity:1}
.claims b{font-family:var(--font-mono);font-size:12.5px;color:var(--ink3);flex:none;font-weight:400}
.claims li.on b{color:var(--acc)}
.claims p{font-size:16px;font-weight:500;letter-spacing:-.025em;line-height:1.45}
.claims li.on p{font-weight:600}

.hero__cta{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center}

/* =====================================================================
   7. 팩트바 — 히어로 아래에 겹쳐 놓인 흰 카드
   ===================================================================== */
.facts{
  position:relative;z-index:3;
  margin-top:calc(-1 * clamp(16px,2.2vw,32px));
  background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  display:grid;grid-template-columns:1fr;overflow:hidden;
}
.facts__c{padding:15px 20px 17px;border-top:1px solid var(--rule)}
.facts__c:first-child{border-top:0}
.facts__l{font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--acc);margin-bottom:8px;text-transform:uppercase}
.facts__v{font-size:16px;font-weight:700;letter-spacing:-.03em;line-height:1.45;color:var(--ink)}

@media (min-width:640px){ .facts{grid-template-columns:1fr 1fr} .facts__c:nth-child(2){border-top:0} }
@media (min-width:980px){
  .facts{grid-template-columns:repeat(4,1fr)}
  .facts__c{border-top:0;border-left:1px solid var(--rule);padding:18px 24px 20px}
  .facts__c:first-child{border-left:0}
}

/* =====================================================================
   8. 약속 카드
   ===================================================================== */
.promise{display:grid;gap:18px}
@media (min-width:720px){ .promise{grid-template-columns:1fr 1fr} }
@media (min-width:1080px){ .promise{grid-template-columns:repeat(3,1fr)} }

.promise__c{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:24px 22px 26px;transition:var(--t);display:flex;flex-direction:column;
}
.promise__c:hover{transform:translateY(-3px);border-color:transparent;box-shadow:var(--shadow)}
.promise__n{font-family:var(--font-mono);font-size:13px;font-weight:500;letter-spacing:.08em;color:var(--acc);margin-bottom:12px}
.promise__t{margin-bottom:12px}
.promise__d{font-size:15.5px;color:var(--ink2);line-height:1.8}
.promise__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:16px}
.promise__tags span{
  font-size:12.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;
  color:var(--acc);background:var(--wash);border-radius:var(--r-pill);padding:6px 12px;
}

/* =====================================================================
   9. 위원장 인사말
   ===================================================================== */
.greet{background:var(--paper2)}
.greet__q{
  font-size:clamp(19px,3.2vw,27px);font-weight:800;letter-spacing:-.04em;
  line-height:1.55;margin-bottom:22px;
}
.greet__q em{font-style:normal;box-shadow:inset 0 -.42em 0 var(--wash)}
.greet__b{font-size:16px;color:var(--ink2);line-height:1.85;max-width:74ch}
.greet__b + .greet__b{margin-top:1.1em}
.greet__b strong{color:var(--ink);font-weight:700}

.greet__full{margin-top:8px;padding-top:24px;border-top:1px solid var(--rule2)}
.greet__h{font-size:18px;font-weight:800;letter-spacing:-.035em;color:var(--ink);margin:26px 0 10px}

.greet__sig{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:30px;padding-top:20px;border-top:1px solid var(--rule2);
}
.greet__sig b{font-family:var(--font-brand);font-size:16.5px;font-weight:800;letter-spacing:-.035em}
.greet__sig .mono{font-size:11.5px;letter-spacing:.14em;color:var(--ink3)}
.greet__more{margin-left:auto;border-bottom:0;padding:0}
.greet__more svg{transition:transform .28s var(--ease)}
.greet__more[aria-expanded="true"] svg{transform:rotate(180deg)}
@media (max-width:600px){ .greet__more{margin-left:0} }

/* =====================================================================
   10. 비밀보장
   ===================================================================== */
.vow__g{display:grid;gap:clamp(24px,4vw,48px);align-items:center}
@media (min-width:980px){ .vow__g{grid-template-columns:minmax(0,1fr) minmax(0,.86fr)} }

.vow__t{font-size:clamp(23px,4.4vw,36px);font-weight:900;letter-spacing:-.045em;line-height:1.25;margin-bottom:22px}
.vow__t em{font-style:normal;color:var(--acc)}
.vow__l{display:grid;gap:2px}
.vow__l li{display:flex;gap:12px;align-items:flex-start;padding-block:9px;font-size:16px;line-height:1.6;color:var(--ink2)}
.vow__l svg{flex:none;color:var(--check);margin-top:4px}
.vow__l b{color:var(--ink);font-weight:700}
.vow__cta{margin-top:26px}

/* 암호화 명부 비주얼 */
.roster{position:relative;margin:0;max-width:440px}
.roster__win{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.roster__hd{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--rule);background:var(--paper2)}
.roster__t{font-size:14px;font-weight:700;letter-spacing:-.025em}
.roster__lock{
  display:inline-flex;align-items:center;gap:5px;margin-left:auto;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;
  color:var(--check);border:1px solid currentColor;border-radius:var(--r-pill);padding:3px 9px;
}
.roster__rows{position:relative;padding:4px 0}
.roster__rows::after{content:"";position:absolute;left:0;right:0;bottom:0;height:74px;background:linear-gradient(transparent,var(--card));pointer-events:none}
.roster__rows li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--rule)}
.roster__rows li:last-child{border-bottom:0}
.roster__nm{font-size:15px;font-weight:700;letter-spacing:.06em}
.roster__dt{font-family:var(--font-mono);font-size:12.5px;color:var(--ink3)}
.roster__st{font-size:11.5px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;padding:4px 10px;border-radius:var(--r-pill);background:var(--warn-bg);color:var(--warn-ink);border:1px solid var(--warn-line)}
.roster__st.ok{background:var(--ok-bg);color:var(--ok-ink);border-color:var(--ok-line)}
.roster__ft{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--rule);background:var(--paper2);font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink3)}
.roster__ft b{margin-left:auto;color:var(--acc);font-weight:500}
.roster__deny{
  position:absolute;right:-10px;bottom:-16px;
  display:inline-flex;align-items:center;gap:7px;padding:10px 15px;border-radius:var(--r-pill);
  background:var(--card);border:1px solid var(--rule);box-shadow:var(--shadow);
  font-size:12.5px;font-weight:700;letter-spacing:-.02em;color:#C0392B;
}

/* =====================================================================
   11. 진행 경과
   ===================================================================== */
.steps{display:grid;gap:16px}
@media (min-width:640px){ .steps{grid-template-columns:1fr 1fr} }
@media (min-width:1080px){ .steps{grid-template-columns:repeat(4,1fr)} }

.steps__c{position:relative;background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);padding:20px 20px 22px}
.steps__c::before{content:"";position:absolute;top:0;left:22px;right:22px;height:3px;border-radius:0 0 3px 3px;background:var(--rule2)}
.steps__c.done::before{background:var(--check)}
.steps__c.now::before{background:var(--cta)}
.steps__d{font-family:var(--font-mono);font-size:12.5px;font-weight:500;letter-spacing:.08em;color:var(--ink2)}
.steps__c.done .steps__d{color:var(--ok-ink);font-weight:600}
.steps__c.now .steps__d{color:var(--warn-ink);font-weight:600}
.steps__t{font-size:18px;font-weight:800;letter-spacing:-.035em;margin:10px 0 8px}
.steps__x{font-size:14.5px;color:var(--ink2);line-height:1.7}

/* =====================================================================
   12. FAQ
   ===================================================================== */
.faq{display:grid;gap:12px}
.faq__i{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;transition:var(--t)}
.faq__i.on{border-color:var(--acc)}
.faq__q{display:flex;align-items:flex-start;gap:16px;width:100%;text-align:left;padding:18px 20px;min-height:56px}
.faq__t{flex:1;font-size:17px;font-weight:600;letter-spacing:-.03em;line-height:1.5}
.faq__p{position:relative;width:14px;height:14px;flex:none;margin-top:6px}
.faq__p::before,.faq__p::after{content:"";position:absolute;background:var(--ink2);transition:transform .3s var(--ease)}
.faq__p::before{left:0;right:0;top:6px;height:2px}
.faq__p::after{top:0;bottom:0;left:6px;width:2px}
.faq__i.on .faq__p::after{transform:rotate(90deg)}
.faq__i.on .faq__p::before{background:var(--acc)}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease)}
.faq__i.on .faq__a{grid-template-rows:1fr}
.faq__a > div{overflow:hidden}
.faq__a p{padding:0 20px 20px;max-width:88ch;font-size:15.5px;color:var(--ink2);line-height:1.85}

/* =====================================================================
   13. 마감 CTA
   ===================================================================== */
.close{background:var(--paper2);padding-block:clamp(32px,5vw,64px)}
.close__g{
  background:var(--hero);border-radius:var(--r-lg);color:#fff;
  padding:clamp(24px,4vw,44px);display:grid;gap:26px;align-items:center;
}
@media (min-width:980px){ .close__g{grid-template-columns:minmax(0,1fr) auto} }
.close__g .eyeb{color:var(--acc-lite);margin-bottom:16px}
.close__lead{font-size:clamp(18px,2.6vw,21px);font-weight:700;letter-spacing:-.03em;color:#fff;margin-bottom:16px;line-height:1.5}
.close__d{font-size:16px;color:rgba(255,255,255,.76);line-height:1.8;max-width:62ch}
.close__d + .close__d{margin-top:14px}
.close__act{display:grid;gap:12px}

/* =====================================================================
   14. 푸터
   ===================================================================== */
.footer{background:var(--deep);color:rgba(255,255,255,.68);padding-block:clamp(32px,4.6vw,52px) 22px;font-size:14.5px}
.footer__g{display:grid;gap:26px;padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.12)}
@media (min-width:820px){ .footer__g{grid-template-columns:minmax(0,1.6fr) 1fr 1fr;gap:clamp(24px,4vw,48px)} }
.footer__n{font-family:var(--font-brand);font-size:17px;font-weight:800;letter-spacing:-.04em;color:var(--deep-ink);margin-bottom:12px}
.footer__x{font-size:13.5px;line-height:1.85;margin:0}
.footer__ct{font-size:12px;font-weight:700;letter-spacing:.12em;color:rgba(255,255,255,.55);margin-bottom:14px;text-transform:uppercase}
.footer li{padding-block:0;font-size:14.5px}
/* 링크 글자만큼이 아니라 손가락 크기만큼 눌리도록 a 자체에 높이를 줍니다 */
.footer li a{display:inline-flex;align-items:center;min-height:30px}
@media (max-width:1024px){ .footer li a{min-height:44px} }
.footer li a:hover{color:var(--deep-ink)}
.footer__b{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:20px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;color:rgba(255,255,255,.5)}
.footer__note{margin-top:20px;font-size:12px;line-height:1.75;color:rgba(255,255,255,.42);max-width:76ch}

/* =====================================================================
   15. 서브 페이지 머리말
   ===================================================================== */
.phead{padding-block:clamp(26px,3.6vw,52px) clamp(20px,2.6vw,34px);border-bottom:1px solid var(--rule)}
.phead__c{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;color:var(--ink2);margin-bottom:16px}
.phead__c a:hover{color:var(--ink)}
.phead__d{font-size:16px;color:var(--ink2);line-height:1.75;max-width:56ch;margin-top:14px}

/* =====================================================================
   16. 폼
   ===================================================================== */
.formwrap{display:grid;gap:clamp(24px,4vw,52px);align-items:start;padding-block:clamp(24px,3.4vw,44px)}
@media (min-width:980px){ .formwrap{grid-template-columns:minmax(0,1fr) 260px} }

.fsec{border-bottom:1px solid var(--rule);padding-bottom:clamp(22px,3vw,34px);margin-bottom:clamp(22px,3vw,34px)}
.fsec:last-of-type{border-bottom:0;margin-bottom:0;padding-bottom:0}
.fsec__h{margin-bottom:22px}
.fsec__n{font-family:var(--font-mono);font-size:12.5px;font-weight:500;letter-spacing:.1em;color:var(--acc);display:block;margin-bottom:6px}

.fgrid{display:grid;gap:0 26px}
@media (min-width:720px){ .fgrid{grid-template-columns:1fr 1fr} .fgrid .full{grid-column:1/-1} }

.field{margin-bottom:22px;position:relative}
.lab{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;letter-spacing:.02em;color:var(--ink2);margin-bottom:10px}
.lab i{color:var(--cta);font-style:normal;font-size:15px;line-height:1}
.lock{
  margin-left:auto;display:inline-flex;align-items:center;gap:4px;
  font-size:11.5px;font-weight:600;color:var(--ink3);
  background:var(--paper2);border:1px solid var(--rule);border-radius:var(--r-pill);padding:3px 9px;
}

.inp{
  width:100%;min-height:52px;padding:13px 16px;
  border:1px solid var(--rule2);border-radius:8px;background:var(--card);
  font-size:17px;font-weight:500;letter-spacing:-.02em;color:var(--ink);
  transition:border-color var(--t),box-shadow var(--t);
}
.inp::placeholder{color:var(--ink3);font-weight:400}
.inp:hover{border-color:var(--ink3)}
.inp:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3.5px var(--wash)}
.inp[readonly],.inp:disabled{background:var(--paper2);color:var(--ink2);border-color:var(--rule);cursor:default}
.inp.err{border-color:var(--err-ink);box-shadow:0 0 0 3.5px rgba(180,35,24,.1)}
textarea.inp{min-height:170px;line-height:1.75;resize:vertical}

.auto{position:absolute;right:14px;top:43px;font-family:var(--font-mono);font-size:11.5px;font-weight:500;letter-spacing:.08em;color:var(--acc);pointer-events:none}
.hint{margin-top:9px;font-size:14px;color:var(--ink3);line-height:1.65}
.hint b{color:var(--ink2);font-weight:700}
.ferr{margin-top:9px;font-size:14px;font-weight:600;color:var(--err-ink);display:none;align-items:center;gap:5px}
.ferr.show{display:flex}

/* 약관 상자 */
.terms{
  border:1px solid var(--rule);border-radius:var(--r);background:var(--card);
  padding:18px 20px;max-height:190px;overflow-y:auto;margin-bottom:20px;
  font-size:14px;line-height:1.75;color:var(--ink2);
}
.terms dl{display:grid;grid-template-columns:86px minmax(0,1fr);gap:9px 16px;margin:12px 0 0}
.terms dt{font-size:12px;font-weight:700;letter-spacing:.05em;color:var(--ink3);padding-top:2px}
.terms dd{margin:0}

/* 동의 */
.consent{display:grid;gap:10px}
.consent__all,
.consent__i{
  display:flex;gap:14px;align-items:flex-start;
  border:1px solid var(--rule);border-radius:var(--r);background:var(--card);
  padding:16px 18px;cursor:pointer;transition:var(--t);
}
.consent__all{align-items:center;border-color:var(--cta);background:var(--warn-bg)}
.consent__i:hover{border-color:var(--rule2)}
.consent__i:has(input:checked){border-color:var(--check);background:var(--ok-bg)}
.consent__i:has(input:focus-visible){outline:2.5px solid var(--acc);outline-offset:2px}
.chk{
  flex:none;appearance:none;-webkit-appearance:none;
  width:24px;height:24px;margin:0;border-radius:6px;
  border:1.8px solid var(--rule2);background:var(--card);
  display:grid;place-items:center;cursor:pointer;transition:var(--t);
}
.chk:checked{background:var(--check);border-color:var(--check)}
.chk:checked::after{content:"";width:11px;height:6px;border:2.2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.consent__all .chk:checked{background:var(--cta);border-color:var(--cta)}
.consent__t{display:block;font-size:15.5px;font-weight:600;letter-spacing:-.02em;line-height:1.55}
.consent__t b{font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--cta);margin-left:8px;vertical-align:1px}
.consent__x{display:block;margin-top:7px;font-size:14px;color:var(--ink3);line-height:1.7}
.consent__all span:last-child{font-size:16.5px;font-weight:700;letter-spacing:-.03em}

.doclink{
  display:flex;align-items:center;gap:12px;margin-top:20px;
  border:1px solid var(--rule2);border-radius:8px;background:var(--card);
  padding:15px 18px;font-size:15.5px;font-weight:700;letter-spacing:-.02em;transition:var(--t);
}
.doclink:hover{border-color:var(--acc);color:var(--acc)}
.doclink svg{flex:none;color:#C0392B}
.doclink small{margin-left:auto;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--ink3)}

.stamp{
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap;
  border:1px solid var(--rule2);border-radius:8px;background:var(--card);padding:16px 20px;
}
.stamp__l{font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--ink3);text-transform:uppercase}
.stamp__v{font-family:var(--font-mono);font-size:22px;font-weight:500;letter-spacing:-.01em;color:var(--ink)}

.factions{display:grid;gap:12px;margin-top:32px}
@media (min-width:560px){ .factions{grid-template-columns:auto 1fr;direction:rtl} .factions > *{direction:ltr} }

/* 폼 사이드 */
.aside{display:grid;gap:16px}
@media (min-width:980px){ .aside{position:sticky;top:84px} }
.aside__b{border:1px solid var(--rule);border-radius:var(--r);background:var(--card);padding:20px}
.aside__b--d{background:var(--deep);border-color:transparent;color:rgba(255,255,255,.76)}
.aside__t{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;letter-spacing:.06em;color:var(--ink2);margin-bottom:12px;text-transform:uppercase}
.aside__b--d .aside__t{color:#fff}
.aside__t svg{color:var(--acc);flex:none}
.aside__b--d .aside__t svg{color:var(--acc-lite)}
.aside__b p{font-size:14px;line-height:1.8;color:inherit}
.stp{display:flex;gap:12px;align-items:baseline;padding-block:8px;border-bottom:1px solid var(--rule);font-size:14px}
.stp:last-child{border-bottom:0}
.stp b{font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--ink3);flex:none}
.stp span{color:var(--ink3)}
.stp.on b{color:var(--cta)}
.stp.on span{color:var(--ink);font-weight:600}

/* =====================================================================
   17. 완료 화면
   ===================================================================== */
.done{max-width:640px;padding-block:clamp(44px,7vw,92px)}
.done__m{display:flex;align-items:center;gap:12px;margin-bottom:30px}
.done__sq{width:30px;height:30px;border:1.6px solid var(--check);border-radius:50%;display:grid;place-items:center;color:var(--check);flex:none}
.done__k{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.18em;color:var(--check)}
.done__d{font-size:17px;color:var(--ink2);line-height:1.85;margin-top:24px}
.done__n{
  display:flex;gap:14px;align-items:flex-start;margin-block:32px;
  border:1px solid var(--rule);border-radius:var(--r);background:var(--card);
  padding:20px 22px;font-size:15px;color:var(--ink2);line-height:1.75;
}
.done__n svg{flex:none;color:var(--check);margin-top:3px}
.done__n b{color:var(--ink);font-weight:700}
.done__f{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center}

/* =====================================================================
   18. 게시판 (FAQ 목록 · Q&A)
   ===================================================================== */
.board{border-top:2px solid var(--ink)}
.board__row{
  display:grid;grid-template-columns:1fr auto;gap:6px 14px;
  padding:16px 4px;border-bottom:1px solid var(--rule);transition:background var(--t);
}
.board__row:not(.board__row--h):hover{background:var(--paper2)}
.board__row--h{display:none}
.board__t{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:600;letter-spacing:-.025em;min-width:0}
.board__t span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board__t svg{flex:none;color:var(--ink3)}
.board__meta{font-size:13.5px;color:var(--ink3)}
.board__empty{padding:clamp(40px,8vw,80px) 4px;text-align:center;color:var(--ink3);border-bottom:1px solid var(--rule)}

@media (min-width:820px){
  .board__row{grid-template-columns:70px minmax(0,1fr) 120px 120px 110px;align-items:center;padding-inline:14px}
  .board__row--h{display:grid;background:var(--paper2);font-size:13px;font-weight:700;color:var(--ink3);padding-block:13px}
  .board__no{text-align:center;font-size:14px;color:var(--ink3)}
  .board__meta{text-align:center}
}
.board__no{display:none}
@media (min-width:820px){ .board__no{display:block} }

.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-pill);font-size:12.5px;font-weight:700;white-space:nowrap;border:1px solid transparent}
.badge i{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.badge--wait{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-line)}
.badge--done{background:var(--ok-bg);color:var(--ok-ink);border-color:var(--ok-line)}
.badge--no{background:var(--err-bg);color:var(--err-ink);border-color:var(--err-line)}
.badge--n{background:var(--paper2);color:var(--ink3);border-color:var(--rule)}

.boardact{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;margin-top:22px}

.pager{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:28px}
.pager a,.pager span{
  min-width:44px;min-height:44px;padding-inline:12px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--rule);border-radius:8px;font-size:15px;color:var(--ink2);transition:var(--t);
}
.pager a:hover{border-color:var(--ink3);background:var(--paper2)}
.pager .on{background:var(--deep);border-color:var(--deep);color:#fff;font-weight:700}
.pager .off{opacity:.4;pointer-events:none}

/* Q&A 상세 */
.qview__h{padding-bottom:20px;border-bottom:1px solid var(--rule);margin-bottom:22px}
.qview__meta{display:flex;flex-wrap:wrap;gap:14px;font-size:14px;color:var(--ink3);margin-top:12px}
.qview__b{font-size:16px;line-height:1.9;color:var(--ink2);min-height:110px;padding-bottom:26px}
.qanswer{border:1px solid var(--ok-line);background:var(--ok-bg);border-radius:var(--r);padding:20px 22px;margin-top:24px}
.qanswer__h{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:15px;font-weight:700;color:var(--ok-ink);margin-bottom:12px}
.qanswer__h span{margin-left:auto;font-size:13px;font-weight:500;color:var(--ink3)}
.qanswer__b{font-size:15.5px;line-height:1.85;color:var(--ink2)}

/* =====================================================================
   19. 알림
   ===================================================================== */
.alert{display:flex;gap:12px;align-items:flex-start;padding:15px 18px;border-radius:var(--r);border:1px solid transparent;font-size:15px;line-height:1.7;margin-bottom:22px}
.alert svg{flex:none;margin-top:3px}
.alert--ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-ink)}
.alert--err{background:var(--err-bg);border-color:var(--err-line);color:var(--err-ink)}
.alert--warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn-ink)}
.alert--info{background:var(--wash);border-color:var(--acc);color:var(--ink2)}
.alert b{font-weight:700}

/* =====================================================================
   20. 긴 글 (소개 · 개인정보처리방침)
   ===================================================================== */
.prose{font-size:17px;line-height:1.95;color:var(--ink2)}
.prose > p{margin:0 0 1.3em}
.prose strong{color:var(--ink);font-weight:700}
.prose .lead{font-size:clamp(18px,2.4vw,21px);font-weight:600;color:var(--ink);line-height:1.75;letter-spacing:-.025em;margin-bottom:1.5em}
.prose h3{font-size:clamp(20px,2.6vw,25px);font-weight:800;color:var(--ink);margin:2.2em 0 .8em;padding-left:16px;position:relative}
.prose h3::before{content:"";position:absolute;left:0;top:.3em;bottom:.3em;width:3px;border-radius:3px;background:var(--acc)}
.prose h3:first-child{margin-top:0}
.prose table{font-size:15px;margin:1em 0}
.prose th,.prose td{border:1px solid var(--rule);padding:10px 12px;text-align:left}
.prose th{background:var(--paper2);font-weight:700;width:28%}

.quote{margin:2.2em 0;padding:clamp(24px,4vw,36px);border-radius:var(--r-lg);background:var(--hero);color:#fff;position:relative;overflow:hidden}
.quote p{font-size:clamp(17px,2.2vw,21px);font-weight:600;line-height:1.7;letter-spacing:-.025em}
.quote cite{display:block;margin-top:16px;font-style:normal;font-size:14px;font-weight:600;color:var(--acc-lite);letter-spacing:.04em}

.sign{margin-top:clamp(32px,5vw,56px);padding-top:24px;border-top:1px solid var(--rule);text-align:right}
.sign__o{font-family:var(--font-brand);font-size:19px;font-weight:800;letter-spacing:-.04em;color:var(--ink)}
.sign__s{font-size:14px;color:var(--ink3);margin-top:6px}

.article{display:grid;gap:clamp(24px,4vw,56px);align-items:start}
@media (min-width:1080px){ .article{grid-template-columns:230px minmax(0,1fr)} }
.toc{display:none}
@media (min-width:1080px){
  .toc{display:block;position:sticky;top:88px}
  .toc__t{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--ink3);margin-bottom:14px;text-transform:uppercase}
  .toc__l{display:grid;gap:2px;border-left:2px solid var(--rule)}
  .toc__l a{display:block;padding:9px 0 9px 16px;margin-left:-2px;border-left:2px solid transparent;font-size:14.5px;color:var(--ink3);line-height:1.5;transition:var(--t)}
  .toc__l a:hover{color:var(--ink)}
  .toc__l a.on{color:var(--acc);border-left-color:var(--acc);font-weight:600}
}

/* =====================================================================
   21. 관리자 콘솔
   ===================================================================== */
.admin{background:var(--paper2);min-height:100vh}

.alogin{min-height:100vh;display:grid;place-items:center;padding:20px;background:var(--hero)}
.alogin__c{width:100%;max-width:440px;background:var(--card);border-radius:var(--r-lg);padding:clamp(26px,5vw,42px);box-shadow:0 30px 70px rgba(0,0,0,.35)}
.alogin__h{text-align:center;margin-bottom:26px}
.alogin__t{font-size:22px;font-weight:800;letter-spacing:-.04em;margin-bottom:8px}
.alogin__d{font-size:14.5px;color:var(--ink3)}

.ahead{background:var(--deep);color:var(--deep-ink);position:sticky;top:0;z-index:90}
.ahead__in{display:flex;align-items:center;gap:14px;min-height:58px;flex-wrap:wrap}
.ahead__b{display:flex;align-items:center;gap:9px;margin-right:auto;font-family:var(--font-brand);font-size:15px;font-weight:800;letter-spacing:-.035em}
.ahead__x{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;color:var(--acc-lite);border:1px solid currentColor;border-radius:4px;padding:2px 7px}
.ahead__r{display:flex;gap:16px;align-items:center;font-size:13px;color:rgba(255,255,255,.7)}
.ahead__r b{color:var(--deep-ink);font-weight:600}
.ahead__r a:hover{color:#fff}

.anav{background:var(--deep);border-top:1px solid rgba(255,255,255,.1)}
.anav__l{display:flex;gap:22px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.anav a{padding:13px 0;font-size:14px;font-weight:500;color:rgba(255,255,255,.66);border-bottom:2px solid transparent;white-space:nowrap}
.anav a.on{color:var(--deep-ink);border-bottom-color:var(--acc-lite);font-weight:700}

.amain{padding-block:clamp(20px,3vw,34px) clamp(30px,5vw,56px)}
.atitle{font-size:22px;font-weight:800;letter-spacing:-.04em;margin-bottom:6px}
.adesc{font-size:14.5px;color:var(--ink3);line-height:1.7;margin-bottom:22px;max-width:70ch}
.adesc b{color:var(--ink2);font-weight:700}

.anote{display:flex;gap:11px;align-items:flex-start;padding:14px 16px;border-left:3px solid var(--warn-line);background:var(--warn-bg);color:var(--warn-ink);font-size:14px;line-height:1.65;margin-bottom:24px;border-radius:0 var(--r-sm) var(--r-sm) 0}
.anote svg{flex:none;margin-top:3px}

.kpi{display:grid;gap:14px;margin-bottom:26px}
@media (min-width:560px){ .kpi{grid-template-columns:1fr 1fr} }
@media (min-width:980px){ .kpi{grid-template-columns:repeat(4,1fr)} }
.kpi__c{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:16px 18px 18px}
.kpi__c.hot{border-color:var(--warn-line);background:var(--warn-bg)}
.kpi__l{font-size:13px;font-weight:700;letter-spacing:.05em;color:var(--ink2);margin-bottom:8px}
.kpi__c.hot .kpi__l{color:var(--warn-ink)}
.kpi__v{font-family:var(--font-mono);font-size:30px;font-weight:500;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.kpi__c.hot .kpi__v{color:var(--cta)}
.kpi__v small{font-family:var(--font-sans);font-size:13px;font-weight:600;color:var(--ink3);margin-left:5px;letter-spacing:0}

.panel{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.panel__h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;border-bottom:1px solid var(--rule)}
.panel__tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.panel__t{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:700;letter-spacing:-.03em}
.panel__b{padding:18px}
.panel__b--flush{padding:0}

.tabs{display:flex;gap:18px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{position:relative;font-size:14.5px;font-weight:500;color:var(--ink3);padding-block:6px;white-space:nowrap}
.tabs a.on{color:var(--ink);font-weight:700}
.tabs a.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--acc)}
.tabs b{font-family:var(--font-mono);font-size:11.5px;font-weight:400;margin-left:4px;opacity:.7}

.search{display:flex;align-items:center;gap:8px;border:1px solid var(--rule2);border-radius:8px;background:var(--card);padding:0 12px}
.search svg{flex:none;color:var(--ink3)}
.search input{border:0;background:none;min-height:42px;font-size:14.5px;width:min(240px,46vw)}
.search input:focus{outline:none}

.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{min-width:940px;font-size:14.5px}
.table th{padding:13px 14px;text-align:left;font-size:12.5px;font-weight:700;letter-spacing:.05em;color:var(--ink3);background:var(--paper2);border-bottom:1px solid var(--rule);white-space:nowrap}
.table td{padding:14px;border-bottom:1px solid var(--rule);vertical-align:middle;white-space:nowrap}
.table tr:hover{background:var(--paper2)}
.table tr.ok{background:color-mix(in srgb,var(--ok-bg) 55%,transparent)}
.t-no{font-family:var(--font-mono);font-size:13px;color:var(--ink3)}
.t-nm{font-weight:700;letter-spacing:-.025em;font-size:15px}
.t-mn{font-family:var(--font-mono);font-size:13px;color:var(--ink2)}
.t-dt{font-family:var(--font-mono);font-size:12.5px;color:var(--ink3)}

.reveal{font-size:12px;font-weight:600;color:var(--ink3);border:1px dashed var(--rule2);border-radius:5px;padding:4px 9px;margin-left:7px;min-height:30px}
.reveal:hover{color:var(--acc);border-color:var(--acc)}
.acts{display:flex;align-items:center;gap:6px}.acts .reveal{margin-left:0}
.reveal--del{color:var(--err-ink);border-color:var(--err-line)}.reveal--del:hover{color:var(--err-ink);border-color:var(--err-ink);background:var(--err-bg)}

/* 상태 토글 — 클릭하면 승인 */
.sbtn{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 14px;border-radius:var(--r-pill);border:1px solid transparent;font-size:13px;font-weight:700;transition:var(--t)}
.sbtn--wait{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-line)}
.sbtn--wait:hover{background:var(--warn-ink);color:#fff;border-color:var(--warn-ink)}
.sbtn--wait::after{content:"승인하기";display:none}
.sbtn--wait:hover span{display:none}
.sbtn--wait:hover::after{display:inline}
.sbtn--ok{background:var(--ok-bg);color:var(--ok-ink);border-color:var(--ok-line);cursor:default}
.sbtn--no{background:var(--err-bg);color:var(--err-ink);border-color:var(--err-line)}
.sent{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;color:var(--ok-ink);margin-top:3px}

.empty{padding:clamp(40px,8vw,80px) 20px;text-align:center}
.empty__t{font-size:17px;font-weight:700;margin-bottom:8px}
.empty__d{font-size:14.5px;color:var(--ink3)}

/* =====================================================================
   22. 모바일 내비게이션
   ===================================================================== */
@media (max-width:899px){
  .navtoggle{display:block}
  .nav{
    /* 헤더 바로 아래에 붙입니다. 고정 수치를 쓰면 상단 알림바가
       두 줄로 늘어나는 좁은 화면에서 로고를 덮습니다 */
    position:absolute;top:100%;left:0;right:0;z-index:99;
    flex-direction:column;gap:0;
    background:var(--card);border-bottom:1px solid var(--rule);box-shadow:var(--shadow);
    padding:8px var(--gut) 20px;
    transform:translateY(-14px);opacity:0;pointer-events:none;transition:var(--t);
  }
  .nav.open{transform:none;opacity:1;pointer-events:auto}
  .nav a{padding:16px 2px;font-size:17px;border-bottom:1px solid var(--rule)}
  .nav a.on::after{display:none}
  .nav a.on{color:var(--acc)}
  .header__act .btn--p{display:none}
}

/* =====================================================================
   23. 접근성 · 인쇄
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .claims li{opacity:1}
}

@media print{
  .topbar,.header,.footer,.hero__gfx,.factions,.anav,.navtoggle{display:none!important}
  body{background:#fff;color:#000}
  .panel,.promise__c,.steps__c,.faq__i{box-shadow:none;border:1px solid #ccc}
}

/* =====================================================================
   24. 보조 클래스
   기존 템플릿에서 이어 쓰는 이름들을 새 체계에 맞춰 정의합니다.
   ===================================================================== */
.freq{color:var(--cta);font-size:15px;line-height:1}

/* 폼을 감싸는 카드 */
form.panel__b,
.panel__b > form{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);padding:clamp(20px,3.4vw,34px)}


/* 짙은 강조 박스 (소개 페이지) */
.vowbox{background:var(--hero);color:#fff;border-radius:var(--r-lg);padding:clamp(22px,4vw,34px)}
.vowbox .vow__l li{color:rgba(255,255,255,.86);border:0}
.vowbox .vow__l b,.vowbox strong{color:#fff}
.vow-chk{flex:none;color:var(--acc-lite);margin-top:4px}

/* 사이드 카드 보조 */
.aside__p{font-size:14px;line-height:1.8;color:inherit}
.asteps{display:grid}
.stp-n{font-family:var(--font-mono);font-size:11.5px;color:var(--ink3);flex:none}
.stp.on .stp-n{color:var(--cta)}
.stp-t{color:var(--ink3)}
.stp.on .stp-t{color:var(--ink);font-weight:600}

/* 전체동의 · 규약 링크 */
.consent-allt{font-size:16.5px;font-weight:700;letter-spacing:-.03em}
.doclink-i{flex:none;color:#C0392B}
.doclink-s{margin-left:auto;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--ink3)}

/* 빈 상태 아이콘 · 탭 카운트 */
.empty__i{width:56px;height:56px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;background:var(--paper2);color:var(--ink3)}
.tabs-c{font-family:var(--font-mono);font-size:11.5px;opacity:.7;margin-left:4px}

/* 게시판 빈 영역 */
.board__empty{padding:clamp(40px,8vw,80px) 4px;text-align:center;color:var(--ink3);border-bottom:1px solid var(--rule)}

/* =====================================================================
   25. 가로 넘침 방지
   명부 카드가 좁은 화면에서 뷰포트를 밀어내지 않도록 합니다.
   ===================================================================== */
.roster{width:min(440px,100%);max-width:100%}
.roster__deny{right:0}

@media (max-width:520px){
  .roster__rows li{grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;padding:10px 14px}
  .roster__dt{grid-column:1;font-size:12px}
  .roster__nm{grid-row:1}
  .roster__st{grid-row:1;grid-column:2;font-size:11px;padding:3px 9px}
  .roster__deny{position:static;margin-top:12px;display:inline-flex}
  .roster__hd,.roster__ft{padding-inline:14px}
}

/* 넓은 표는 자체 영역에서만 가로 스크롤 */
.tablewrap{max-width:100%}

/* 상단 알림은 좁은 화면에서도 감추지 않고 줄바꿈합니다 */
@media (max-width:640px){
  .topbar__in{padding-block:8px;gap:4px 12px}
  .topbar__note{font-size:12.5px;line-height:1.5;align-items:flex-start}
  .topbar__dot{margin-top:7px}
}

/* ── 26. 관리자 콘솔 레이아웃 ─────────────────────────────────── */
/* 콘솔은 표·목록을 다루는 작업화면이라 본사이트보다 화면을 넓게 씁니다 */
.admin{--gut:clamp(16px,2.2vw,34px)}
.admin .wrap{max-width:none}

/* 본문 + 사이드 2단. 모바일에서는 세로로 쌓입니다 */
.acc-grid,
.faq-admin-grid,
.qna-admin-grid{display:grid;gap:22px;align-items:stretch}

@media (min-width:1025px){
  /* 비밀번호 변경은 내용이 짧아 화면을 채우지 않고 원래 높이로 둡니다 */
  .acc-grid{grid-template-columns:minmax(0,1fr) 320px;align-items:start}
  /* 목록 : 등록양식 = 1 : 1 — 등록 화면을 넓게 씁니다 */
  .faq-admin-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  /* 질문 목록이 너무 좁지 않도록 고정폭 대신 비율로 나눕니다 */
  .qna-admin-grid{grid-template-columns:minmax(380px,1fr) minmax(0,1.25fr)}
}

/* ── 화면 높이에 맞추기 ────────────────────────────────────────
   목록이 길어져도 페이지 전체가 늘어나지 않습니다. 남는 높이를
   목록이 모두 차지하고, 넘치면 목록 안에서만 스크롤됩니다.
   제목줄·탭·페이지 이동 버튼은 항상 화면에 남습니다.
   좁은 화면에서는 평소처럼 페이지가 스크롤되는 편이 낫습니다. */
@media (min-width:1025px){
  body.admin{display:flex;flex-direction:column;height:100vh;overflow:hidden}
  .admin .ahead{flex:none}
  .amain{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding-block:clamp(14px,1.8vw,22px) 0}
  .amain > .wrap{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:auto}

  /* 각 화면에서 마지막에 오는 목록 영역이 남은 높이를 차지합니다 */
  .amain > .wrap > .panel,
  .amain > .wrap > .faq-admin-grid,
  .amain > .wrap > .qna-admin-grid{flex:1 1 0;min-height:0;margin-bottom:12px}

  .amain .panel{display:flex;flex-direction:column;min-height:0}
  .amain .panel__h{flex:none}
  .amain .panel__b{flex:1 1 auto;min-height:0;overflow:auto}
  .amain .pager{flex:none}
}

/* 표 안에서 버튼을 나란히 둘 때 (td 에 직접 flex 를 주면 표가 깨집니다) */
.cellact{display:flex;align-items:center;gap:6px}

/* 라벨 옆 작은 보조 표시 */
.field__lock,
.consent__body{font-size:12.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink3)}
.field__lock{margin-left:8px}

/* 관리자 콘솔 푸터 — 한 줄로 고정해 본문 영역을 최대한 확보합니다 */
.afoot{
  flex:none;padding:9px var(--gut);text-align:center;
  font-size:11.5px;line-height:1.5;color:var(--ink3);
  border-top:1px solid var(--rule);background:var(--card);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
@media (max-width:1024px){
  .afoot{white-space:normal;padding:14px var(--gut) 22px}
}

/* ── 27. 가입신청 관리 상단 압축 ──────────────────────────────── */
/* 제목과 설명을 한 줄에 놓아 세로 공간을 아낍니다 */
.ahd{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;margin-bottom:14px}
.ahd .atitle{margin:0}
.ahd .adesc{margin:0;max-width:none;font-size:13.5px}

/* 통계 카드가 곧 상태 필터입니다. 높이를 절반으로 줄였습니다 */
.kpi{margin-bottom:12px}
@media (min-width:980px){ .kpi{grid-template-columns:repeat(5,1fr)} }
/* 폰에서도 2열로 놓아 목록이 시작되는 지점을 끌어올립니다.
   카드가 5개라 마지막 한 장은 한 줄을 다 쓰게 합니다 */
@media (max-width:979px){
  .kpi{grid-template-columns:1fr 1fr;gap:10px}
  .kpi > :last-child{grid-column:1 / -1}
}
.kpi__c{padding:9px 14px 10px}
.kpi__l{font-size:12px;margin-bottom:2px}
.kpi__v{font-size:21px}
.kpi__v small{font-size:12px;margin-left:4px}

a.kpi__c{display:block;transition:var(--t)}
a.kpi__c:hover{border-color:var(--rule2)}
a.kpi__c.on{border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}
a.kpi__c.on .kpi__l{color:var(--acc)}

/* 목록 머리에 놓인 개인정보 취급 경고 */
.panelnote{
  display:flex;align-items:center;gap:8px;margin:0;min-width:0;
  font-size:12.5px;line-height:1.5;color:var(--warn-ink);
}
.panelnote svg{flex:none;color:var(--cta)}
.panelnote b{font-weight:700}
@media (max-width:1024px){ .panelnote{font-size:12px} }

/* ── 28. 관리자 콘솔 글자 크기 상향 ───────────────────────────── */
/* 표를 오래 들여다보는 작업화면이라 본문(16px)에 가깝게 키웁니다.
   .admin 으로 묶어 두어 공개 사이트 쪽은 전혀 건드리지 않습니다. */
.admin .anav a{font-size:15px}
.admin .atitle{font-size:24px}
.admin .adesc,
.admin .ahd .adesc{font-size:14.5px}
.admin .panel__t{font-size:17px}
.admin .panelnote{font-size:13.5px}
.admin .kpi__l{font-size:13px}
.admin .kpi__v{font-size:23px}
.admin .kpi__v small{font-size:13px}

/* 목록 표 — 이름·사번·연락처가 실제로 읽히는 크기로 */
.admin .table{font-size:15.5px}
.admin .table th{font-size:13.5px}
.admin .table td{padding:15px 14px}
.admin .t-no{font-size:14px}
.admin .t-nm{font-size:16.5px}
.admin .t-mn{font-size:14.5px}
.admin .t-dt{font-size:13.5px}

/* 표 안의 버튼·입력칸도 같이 올려야 균형이 맞습니다 */
.admin .sbtn{font-size:14px;min-height:38px}
.admin .reveal{font-size:13px;min-height:32px}
.admin .inp{font-size:15px}
.admin .pager a,.admin .pager span{font-size:15.5px}
.admin .afoot{font-size:12.5px}

@media (max-width:1024px){
  .admin .panelnote{font-size:13px}
  /* iOS 는 16px 미만 입력칸을 누르면 화면을 확대해 버립니다 */
  .admin .inp{font-size:16px}
}

/* ── 29. 좁은 화면 상세 패널 (전체화면 + 페이드) ─────────────── */
/* 폰에서는 목록과 상세가 위아래로 쌓여서, 수정을 누르면 한참 스크롤해야
   양식이 나옵니다. 목록 위에 덮어씌우고 X 로 닫게 합니다.
   is-sheet 는 스크립트가 붙이므로, JS 가 없으면 평소대로 아래에 쌓입니다. */
.sheet-x{display:none}

@media (max-width:1024px){
  body.sheet-open{overflow:hidden}

  .sheet.is-sheet{
    position:fixed;inset:0;z-index:200;
    margin:0;border:0;border-radius:0;
    display:flex;flex-direction:column;
    background:var(--card);
    opacity:0;transform:translateY(10px);
    transition:opacity .22s var(--ease),transform .22s var(--ease);
  }
  .sheet.is-sheet.is-open{opacity:1;transform:none}

  .sheet.is-sheet > .panel__h{
    position:sticky;top:0;z-index:2;flex:none;
    background:var(--card);border-bottom:1px solid var(--rule);
  }
  .sheet.is-sheet > .panel__b{
    flex:1 1 auto;min-height:0;overflow:auto;
    -webkit-overflow-scrolling:touch;padding-bottom:28px;
  }

  .sheet.is-sheet .sheet-x{
    display:inline-flex;align-items:center;justify-content:center;
    width:40px;height:40px;flex:none;
    border:1px solid var(--rule);border-radius:var(--r-sm);
    background:var(--card);color:var(--ink2);transition:var(--t);
  }
  .sheet.is-sheet .sheet-x:hover{border-color:var(--ink3);color:var(--ink)}

  /* X 와 역할이 겹치는 링크는 폰에서 숨깁니다 */
  .sheet.is-sheet .sheet-hide-m{display:none}

  /* 폰에서는 좌우 배치가 아니라 위아래라서 안내 문구가 맞지 않습니다 */
  .panel--hint{display:none}
}

@media (prefers-reduced-motion:reduce){
  .sheet.is-sheet{transition:none}
}

/* ── 30. 관리자 메뉴 탭이 잘릴 때 알려주는 그라데이션 ─────────── */
/* 좁은 화면에서는 탭이 화면 밖으로 넘어가는데, 밀 수 있다는 걸
   모르면 메뉴가 없는 줄 압니다. 오른쪽 끝을 흐리게 해서 신호를 줍니다.
   끝까지 밀면 is-end 가 붙어 사라집니다 (스크립트가 붙입니다). */
.anav{position:relative}
.anav::after{
  content:"";position:absolute;top:0;right:0;bottom:0;width:44px;
  pointer-events:none;opacity:0;transition:opacity .2s var(--ease);
  background:linear-gradient(90deg,rgba(10,23,34,0) 0%,rgba(10,23,34,.92) 70%,var(--deep) 100%);
}
.anav.is-scrollable:not(.is-end)::after{opacity:1}

:root[data-theme="dark"] .anav::after{
  background:linear-gradient(90deg,rgba(14,17,16,0) 0%,rgba(14,17,16,.92) 70%,var(--deep) 100%);
}